work随笔记录（实时更新）

el-table设置边框颜色

<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>

隐藏浏览器滚动条

&::-webkit-scrollbar{
  display: none;
}

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

::v-deep .el-dialog__wrapper{
  pointer-events:none;
  .el-dialog{
    pointer-events:auto;
  }
}

el-progress设置渐变色

// 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)太长 - 换行展示

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实现列表自动轮播

<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:

<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显隐：

<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）和许多其他位置服务应用。

• 不同的坐标系适用于不同的应用场景，如导航、地图制作、测量等。在进行数据处理和分析时，了解和选择正确的坐标系对准确性和一致性至关重要。同时，跨坐标系转换也是常见的需求，可以使用专业的地理信息系统软件或在线工具来实现坐标系之间的转换。

不同坐标系之间的转换

// 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多选框不显示或者只显示禁用状态下的项

• 错误用法

<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>

• 正确示例：

<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位电话号码中间四位设为****

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

vue项目页面定时刷新实现

• 使用provide / inject组合控制Vue刷新当前页面

// 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（）调用。
• 当页面销毁时：清除定时器。

// 子组件
<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>