work随笔记录（实时更新）

嗳华裳2023-12-23 3:46

el-table设置边框颜色

javascript 复制代码 
<style scoped lang='scss'>
   .el-table td, .el-table th.is-leaf,.el-table--border, .el-table--group{
       border-color: black;
   }
   .el-table--border::after, .el-table--group::after, .el-table::before{
       background-color: black;
   }
</style>

隐藏浏览器滚动条

javascript 复制代码 
&::-webkit-scrollbar{
  display: none;
}

el-dialog弹窗打开时 - 可点击下方内容

javascript 复制代码 
::v-deep .el-dialog__wrapper{
  pointer-events:none;
  .el-dialog{
    pointer-events:auto;
  }
}

el-progress设置渐变色

javascript 复制代码 
// stroke-linecap="square"直角
// define-back-color="transparent"去掉底色 
// id % 5 - 五个一循环
<!-- :percentage="(number / total).toFixed(2) * 100"  -->
<el-progress
	type="circle"
  	:class="assetsPieColor[idx % 5].id"
  	class="blue"
  	:percentage="setItemProgress(item)"
  	:show-text="false"
  	:stroke-width="12"
  	stroke-linecap="square"
 	define-back-color="transparent"
></el-progress>

// 以下是重点：el-progress的class要跟
<svg width="100%" height="100%">
  <defs>
  	// x1-x2:x轴渐变；y1-y2:y轴渐变
    <linearGradient v-for="(item,idx) in assetsPieColor" :key="idx" :id="item.id" x1="0%" y1="100%" x2="0%" y2="0%">
      <stop offset="0%" :style="{'stop-color': item.color}" stop-opacity="1" />
      <stop offset="80%" :style="{'stop-color': item.color1}" stop-opacity="1" />
      <stop offset="100%" style="stop-color: #fff " stop-opacity="1" />
    </linearGradient>
  </defs>
</svg>

<script>
	data() {
		return {
		assetsPieColor: [
	  		{ id: 'blue', color: '#0C7DFF', color1: '#92D7FF' },
	  		{ id: 'cyan', color: '#2CD8E8', color1: '#AAF8FE' },
	  		{ id: 'yellow', color: '#D2C348', color1: '#FFF5A2' },
	  		// { id: 'green', color: '#4FA524', color1: '#B9FA91' },
	 	 	// { id: 'orange', color: '#CA9033', color1: '#FFDEAA' }
		]
	}
}
</script>

<style lang="scss" scoped>
svg{
  width: 0;
  height: 0;
}
.yellow ::v-deep svg>path:nth-child(2) {
stroke: url(#yellow);
}
.blue ::v-deep svg>path:nth-child(2) {
stroke: url(#blue);
}
.cyan ::v-deep svg>path:nth-child(2) {
stroke: url(#cyan);
}
.orange ::v-deep svg>path:nth-child(2) {
stroke: url(#orange);
}
.green ::v-deep svg>path:nth-child(2) {
stroke: url(#green);
}
</style>

echarts文字内容（x轴label)太长 - 换行展示

javascript 复制代码 
xAxis: {
 data: newData.category,
  axisLine: {
    show: true,
    lineStyle: {
      show: false,
      color: '#40586F',
      width: 3
    }
  },
  axisTick: {
    show: false
  },
  axisLabel: {
    show: true,
    margin: 20,
    interval: 0,
    textStyle: {
      color: '#D9EAFE',
      fontSize: 30
    },
    // 以下是重点|
    formatter: params => {
      var newParamsName = '';
      var paramsNameNumber = params.length;
      var provideNumber = 8; //一行显示几个字
      var rowNumber = Math.ceil(paramsNameNumber / provideNumber);
      if (paramsNameNumber > provideNumber) {
        for (var p = 0; p < rowNumber; p++) {
          var tempStr = '';
          var start = p * provideNumber;
          var end = start + provideNumber;
          if (p == rowNumber - 1) {
            tempStr = params.substring(start, paramsNameNumber);
          } else {
            tempStr = params.substring(start, end) + '\n';
          }
          newParamsName += tempStr;
        }
      } else {
        newParamsName = params;
      }
      return newParamsName;
    }
  }
},

vue-seamless-scroll实现列表自动轮播

javascript 复制代码 
<vue-seamless-scroll :data="dataList" v-if="postDataFlag" :class-option="{
	step: 1, // 数值越大速度滚动越快
    hoverStop: true, // 是否开启鼠标悬停stop
    openWatch: true, // 开启数据实时监控刷新dom
    limitMoveNum: 30,
    direction: 1, // 0向下 1向上 2向左 3向右
    singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
    singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
    waitTime: 1000 // 单步运动停止的时间(默认值1000ms)
 <progressList :data="dataList" @click="pointClick" />
</vue-seamless-scroll>

import progressList from './components/progressList.vue';

<template>
  <div class="progress_list">
    <div class="pro_item" v-for="(item, idx) in list" :key="idx">
      <div class="w-100 w-flex w-content name_num" :class="'name_num_'+ idx%4">
        <div class="w-flex l_w">
          <div class="l_icon"><img src="../../../assets/index/p_jiao.png" alt="" /></div>
          <div class="name">{{ item.name }}</div>
        </div>
        <div class="number">{{ item.number }}<span>{{ item.unit ? item.unit : '' }}</span></div>
      </div>
      <div class="pro_bar" :class="'pro_bar_'+ idx%4" @click="click(item)">
          <!-- :percentage="(value.peopleNumber / workPeopleData.allNumber).toFixed(2) * 100"  -->
        <el-progress
          :percentage="item.percentage"
          :show-text="false"
          :stroke-width="18"
          stroke-linecap="square"
        ></el-progress>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: ['data'],
  data() {
    return {
      list: []
    };
  },
  watch: {
    data: {
      handler(val) {
        console.log('handlervalval', val)
        let arr = val.length > 0 ? val.map(item => {
          return item.number;
        }) : [];
        let total = arr.length > 0 ? arr.reduce((a, b) => {
          return a + b;
        }) : 0;
        this.list = val.map(item => {
          return { ...item, percentage: item.number ? (item.number / total).toFixed(2) * 100 : 0 };
        });
      },
      deep: true,
      immediate: true
    }
  },
  methods: {
    click(item) {
      this.$emit('click', item);
    }
  }
};
</script>

<style lang="scss" scoped>
.progress_list {
  .pro_item {
    padding: 20px 0;
    .w-content {
      margin-bottom: 16px;
      display: flex;
      justify-content: space-between;
      .l_w {
        display: flex;
        align-items: center;
      }
      .l_icon {
        width: 35px;
        height: 41px;
        img {
          width: 100%;
          height: 100%;
        }
      }
      .name {
        position: relative;
        line-height: 45px;
        font-size: 30px;
        font-weight: 400;
        color: #d9eafe;
      }
      .number {
        line-height: 40px;
        display: flex;
        justify-content: flex-end;
        font-size: 49px;
        font-weight: 500;
        color: #d9eafe;
        span{
          font-size: 30px;
          margin-left: 8px;
          color: #d9eafe;
        }
      }
    }
    .name_num{
      &_0{
        .number{
          color: #0096FF;
        }
      }
      &_1{
        .number{
          color: #4EFCFC;
        }
      }
      &_2{
        .number{
          color: #FFF38E;
        }
      }
      &_3{
        .number{
          color: #FFC273;
        }
      }
    }
    ::v-deep .pro_bar {
      cursor: pointer;
      height: 52px;
      line-height: 52px;
      background: url(../../../assets/index/dl_bar_bg.png) no-repeat;
      background-size: 100% 100%;
      .el-progress {
        padding: 16px 18px 0 18px;
        .el-progress-bar {
          .el-progress-bar__outer {
            border-radius: 0;
            background: #2d455d !important;
            // height: 14px !important;
          }
          .el-progress-bar__inner {
            position: relative;
            &::after {
              content: '';
              position: absolute;
              right: -4px;
              top: 50%;
              transform: translateY(-50%);
              width: 4px;
              height: 32px;
              background-color: #fff;
            }
            border-radius: 0;
            height: 18px !important;
            background: linear-gradient(90deg, #59acff, #59acff, #ddefff);
            background-color: unset;
          }
        }
      }
      &_0{
        .el-progress {
          .el-progress-bar{
            .el-progress-bar__inner{
              background: linear-gradient(90deg, #0096FF, #0096FF, #ddefff);
            }
          }
        }
      }
      &_1{
        .el-progress {
          .el-progress-bar{
            .el-progress-bar__inner{
              background: linear-gradient(90deg, #4EFCFC, #4EFCFC, #ddefff);
            }
          }
        }
      }
      &_2{
        .el-progress {
          .el-progress-bar{
            .el-progress-bar__inner{
              background: linear-gradient(90deg, #FFF38E, #FFF38E, #ddefff);
            }
          }
        }
      }
      &_3{
        .el-progress {
          .el-progress-bar{
            .el-progress-bar__inner{
              background: linear-gradient(90deg, #FFC273, #FFC273, #ddefff);
            }
          }
        }
      }
    }
  }
}
</style>

vue-seamless-scroll实现列表自动轮播时：数值会频繁从0突然变为总数量

这种情况是因为vue-seamless-scroll在页面初始化复制的时候，数据还没请求到导致的。

v-if判断一下，请求到数据后再渲染页面就可以了。

n个数据为一组循环设置动态class或者v-if判断的实现

动态class:

javascript 复制代码 
<div class="pro_item" v-for="(item, idx) in list" :key="idx">
	<div class="pro_bar" :class="'pro_bar_'+ idx % n">
	  <!-- :percentage="(value.peopleNumber / workPeopleData.allNumber).toFixed(2) * 100"  -->
	  <el-progress
	    :percentage="item.percentage"
	    :show-text="false"
	    :stroke-width="18"
	    stroke-linecap="square"
	  ></el-progress>
	</div>
</div>
.pro_bar_0{}
.pro_bar_1{}
.pro_bar_2{}
............
.pro_bar_n{}

动态div显隐：

javascript 复制代码 
<div v-if="idx % n === 0"></div>
<div v-if="idx % n === 1"></div>
<div v-if="idx % n === 2"></div>
<div v-if="idx % n === 3"></div>

vue项目中使用echarts(4.6.0)时因版本不匹配，导致图表不显示

使用ppchat：添加链接描述

地图撒点位置偏移问题

原因：经纬度坐标系不匹配

  • BD09坐标系：
    BD09（Baidu Coordinate System）是百度地图使用的一种坐标系。它基于GCJ02坐标系进行了加密偏移，提供了更好的数据保护性能，适用于百度地图定位和导航服务。BD09通常用于中国境内各种位置服务应用。
  • GCJ02坐标系
    GCJ02（国测局坐标系）是中国国家测绘局制定的一种地理坐标系，用于对中国大陆的地理位置进行偏移加密处理。GCJ02坐标系也被称为火星坐标系，广泛应用于中国各种地图和位置服务应用，包括高德地图、腾讯地图等。
  • WGS84坐标系
    WGS84（World Geodetic System 1984）是目前全球最常用的地理坐标系，由美国国防部和国际地球测量与地理信息协会共同制定。WGS84坐标系使用GPS技术对地球表面进行测量，常用于全球定位系统（GPS）和许多其他位置服务应用。
  • 不同的坐标系适用于不同的应用场景，如导航、地图制作、测量等。在进行数据处理和分析时，了解和选择正确的坐标系对准确性和一致性至关重要。同时，跨坐标系转换也是常见的需求，可以使用专业的地理信息系统软件或在线工具来实现坐标系之间的转换。

不同坐标系之间的转换

javascript 复制代码 
// project\src\utils\transCoordinate.js
var x_PI = (Math.PI * 3e3) / 180;
var PI = Math.PI;
var a = 6378245;
var ee = 0.006693421622965943;
// 高德
function bd09togcj02(a, t) {
  var r = (3.141592653589793 * 3e3) / 180;
  var n = t - 0.0065;
  var s = a - 0.006;
  var h = Math.sqrt(n * n + s * s) - 2e-5 * Math.sin(s * r);
  var M = Math.atan2(s, n) - 3e-6 * Math.cos(n * r);
  var e = h * Math.cos(M);
  var i = h * Math.sin(M);
  return [i, e];
}
// 百度
function gcj02tobd09(a, t) {
  var r = Math.sqrt(t * t + a * a) + 2e-5 * Math.sin(a * x_PI);
  var n = Math.atan2(a, t) + 3e-6 * Math.cos(t * x_PI);
  var s = r * Math.cos(n) + 0.0065;
  var h = r * Math.sin(n) + 0.006;
  return [h, s];
}
function wgs84togcj02(t, r) {
  if (out_of_china(r, t)) {
    return [t, r];
  } else {
    var n = transformlat(r - 105, t - 35);
    var s = transformlng(r - 105, t - 35);
    var h = (t / 180) * PI;
    var M = Math.sin(h);
    M = 1 - ee * M * M;
    var e = Math.sqrt(M);
    n = (n * 180) / (((a * (1 - ee)) / (M * e)) * PI);
    s = (s * 180) / ((a / e) * Math.cos(h) * PI);
    var i = t + n;
    var o = r + s;
    return [i, o];
  }
}
function gcj02towgs84(t, r) {
  if (out_of_china(r, t)) {
    return [t, r];
  } else {
    var n = transformlat(r - 105, t - 35);
    var s = transformlng(r - 105, t - 35);
    var h = (t / 180) * PI;
    var M = Math.sin(h);
    M = 1 - ee * M * M;
    var e = Math.sqrt(M);
    n = (n * 180) / (((a * (1 - ee)) / (M * e)) * PI);
    s = (s * 180) / ((a / e) * Math.cos(h) * PI);
    let mglat = t + n;
    let mglng = r + s;
    return [t * 2 - mglat, r * 2 - mglng];
  }
}
function transformlat(a, t) {
  var r =
    -100 +
    2 * a +
    3 * t +
    0.2 * t * t +
    0.1 * a * t +
    0.2 * Math.sqrt(Math.abs(a));
  r += ((20 * Math.sin(6 * a * PI) + 20 * Math.sin(2 * a * PI)) * 2) / 3;
  r += ((20 * Math.sin(t * PI) + 40 * Math.sin((t / 3) * PI)) * 2) / 3;
  r +=
    ((160 * Math.sin((t / 12) * PI) + 320 * Math.sin((t * PI) / 30)) * 2) / 3;
  return r;
}
function transformlng(a, t) {
  var r =
    300 + a + 2 * t + 0.1 * a * a + 0.1 * a * t + 0.1 * Math.sqrt(Math.abs(a));
  r += ((20 * Math.sin(6 * a * PI) + 20 * Math.sin(2 * a * PI)) * 2) / 3;
  r += ((20 * Math.sin(a * PI) + 40 * Math.sin((a / 3) * PI)) * 2) / 3;
  r +=
    ((150 * Math.sin((a / 12) * PI) + 300 * Math.sin((a / 30) * PI)) * 2) / 3;
  return r;
}
function out_of_china(a, t) {
  return a < 72.004 || a > 137.8347 || t < 0.8293 || t > 55.8271 || false;
}
function wgs84togbd09(el) {
  var l = bd09togcj02(el[1],el[0])
  let arr = gcj02towgs84(l[0],l[1])
  return [arr[1],arr[0]]
}
export {
  bd09togcj02,
  gcj02tobd09,
  wgs84togcj02,
  gcj02towgs84,
  wgs84togbd09
}

elementUI el-checkbox多选框不显示或者只显示禁用状态下的项

  • 错误用法
javascript 复制代码 
<el-form-item label="类型" prop="checkList">          
  <el-checkbox-group v-model="form.checkList">
    <el-checkbox v-for="(item, idx) in mediaTypes" :key="idx" :label="item.name" checked></el-checkbox>
  </el-checkbox-group>
</el-form-item>
  • 正确示例：
javascript 复制代码 
<el-form-item label="类型" prop="checkList">          
  <el-checkbox-group v-model="checkList">
    <el-checkbox v-for="(item, idx) in mediaTypes" :key="idx" :label="item.name" checked></el-checkbox>
  </el-checkbox-group>
</el-form-item>

js将11位电话号码中间四位设为****

javascript 复制代码 
const telphone = '1383838438';
let result = telphone.substr(0,3) + '****' + telphone.substr(7);
console.log(result);// 138****8438
//使用 `substr` 方法截取电话号码的前三位，然后拼接上'****'，
//再拼接上电话号码从索引为7开始的剩余部分，将结果赋值给变量result。

vue项目页面定时刷新实现

  • 使用provide / inject组合控制Vue刷新当前页面
javascript 复制代码 
// App.vue
<template>
  <div id="app">
    <router-view v-if="isRouterAlive" />
  </div>
</template>

<script>
export default {
  provide() {
    return {
      reload: this.reload
    }
  },
  data() {
    return {
      isRouterAlive: true
    }
  },
  methods: {
    reload() {
      this.isRouterAlive = false
      this.$nextTick(() => {
        this.isRouterAlive = true
      })
    }
  }
}
</script>
  • 在需要当前页面刷新的页面注入App组件中的reload，然后使用this.reload（）调用。
  • 当页面销毁时：清除定时器。
javascript 复制代码 
// 子组件
<script>
export default {
  inject: ['reload'],
  data() {
    return{
      intervalId: null,
    }
  },
  created() {
    // 计时器正在进行中，退出函数
    if (this.intervalId != null) {
        return;
     }
    this.intervalId = setInterval(() => {
      this.reload()
    }, 180000)
  },  
  methods: {
    // 停止定时器
    clear() {
        clearInterval(this.intervalId);//清除计时器
        this.intervalId = null; //设置为null
      },
  },
  beforeDestroy() {
    this.clear();
  }
};
</script>
相关推荐
懒大王爱吃狼23 分钟前
Python教程：python枚举类定义和使用
开发语言·前端·javascript·python·python基础·python编程·python书籍
待磨的钝刨1 小时前
【格式化查看JSON文件】coco的json文件内容都在一行如何按照json格式查看
开发语言·javascript·json
Devil枫5 小时前
Vue 3 单元测试与E2E测试
前端·vue.js·单元测试
GIS程序媛—椰子6 小时前
【Vue 全家桶】6、vue-router 路由（更新中）
前端·vue.js
前端青山6 小时前
Node.js-增强 API 安全性和性能优化
开发语言·前端·javascript·性能优化·前端框架·node.js
毕业设计制作和分享7 小时前
ssm《数据库系统原理》课程平台的设计与实现+vue
前端·数据库·vue.js·oracle·mybatis
程序媛小果7 小时前
基于java+SpringBoot+Vue的旅游管理系统设计与实现
java·vue.js·spring boot
从兄7 小时前
vue 使用docx-preview 预览替换文档内的特定变量
javascript·vue.js·ecmascript
凉辰8 小时前
设计模式 策略模式 场景Vue （技术提升）
vue.js·设计模式·策略模式
清灵xmf9 小时前
在 Vue 中实现与优化轮询技术
前端·javascript·vue·轮询
热门推荐
01【HarmonyOS】HUAWEI DevEco Studio 下载地址汇总02(欧拉)openEuler系统添加网卡文件配置流程、(欧拉)openEuler系统手动配置ipv6地址流程、(欧拉)openEuler系统网络管理说明03组基轨迹建模 GBTM的介绍与实现（Stata 或 R）04【AIGC】重塑未来的科技巨轮05全面解析：构建基于深度学习的安全帽检测系统（UI界面+YOLO代码+数据集）06【经验分享】Ubuntu22.04安装微信(linux官方版)07基于YOLOv10深度学习的CT扫描图像肾结石智能检测系统【python源码+Pyqt5界面+数据集+训练代码】深度学习实战、目标检测08Ubuntu 20.04使用Livox mid 360 测试 FAST_LIO09RAG 实践- Ollama+RagFlow 部署本地知识库10红米手机使用google play