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>
相关推荐
天天进步20155 分钟前
Vue+Springboot用Websocket实现协同编辑
vue.js·spring boot·websocket
疯狂的沙粒25 分钟前
如何在Vue项目中应用TypeScript？应该注意那些点？
前端·vue.js·typescript
小镇程序员40 分钟前
vue2 src_Todolist全局总线事件版本
前端·javascript·vue.js
疯狂的沙粒1 小时前
对 TypeScript 中函数如何更好的理解及使用？与 JavaScript 函数有哪些区别？
前端·javascript·typescript
瑞雨溪1 小时前
AJAX的基本使用
前端·javascript·ajax
力透键背1 小时前
display: none和visibility: hidden的区别
开发语言·前端·javascript
程楠楠&M1 小时前
node.js第三方Express 框架
前端·javascript·node.js·express
weiabc1 小时前
学习electron
javascript·学习·electron
想自律的露西西★2 小时前
用el-scrollbar实现滚动条，拖动滚动条可以滚动，但是通过鼠标滑轮却无效
前端·javascript·css·vue.js·elementui·前端框架·html5
白墨阳2 小时前
vue3:瀑布流
前端·javascript·vue.js
热门推荐
01(欧拉)openEuler系统添加网卡文件配置流程、(欧拉)openEuler系统手动配置ipv6地址流程、(欧拉)openEuler系统网络管理说明02PyTorch机器学习实现液态神经网络03【HarmonyOS】HUAWEI DevEco Studio 下载地址汇总04玄机平台应急响应—webshell查杀05Coze扣子平台完整体验和实践（附国内和国际版对比）06Ubuntu 20.04使用Livox mid 360 测试 FAST_LIO07怎样让音频速度变慢？请跟随以下方法进行操作08Unity中PICO实现 隔空取物 和 接触抓取物体09RAG 实践- Ollama+RagFlow 部署本地知识库10【目标跟踪】相机运动补偿