常见业务代码总结常见业务代码记录：

80 阅读 0 评论 53 点赞

我是靠谱客的博主缥缈盼望，最近开发中收集的这篇文章主要介绍常见业务代码总结常见业务代码记录：，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

常见业务代码记录：

1.处理el-tab 折叠echarts 图表 bug

在这里插入图片描述

data() {
    return {
      active_name:"1",
      active: 1,
      tab_refresh:{
        lock1: true,
        lock2: false,
      },
    };
  },
  methods: {
    handleqie(val) {
      this.active = val;
    },

    handleTabchange(tab) {
      this.activeName = tab.name;
      switch (this.activeName) {
        case "1":
          this.switchTab("lock1");
          break;
        case "2":
          this.switchTab("lock2");
          break;
      }
    },
    //遍历对象拿值，然后IF判断
    switchTab (tab) {
      for (let key in this.tabRefresh) {
        if (tab === key) {
          this.tabRefresh[key] = true
        } else {
          this.tabRefresh[key] = false
        }
      }
    },
  },

2.取过去某段时间字符串函数

/**
 * @params  min 倒推的分钟数, back 倒退粒度 例如 (60*24, 1) 即往前倒退一天
 * @impact 处理时间格式，用于获取当前时间的前时间点（天/小时/分钟）
 */
window.giveDate = function giveDate(min, back){
  if (min != 60 * 24) {
    let ms = new Date().getTime(); //获取当前时间戳
    let ms_back = min * back * 60 * 1000; //获取 倒退 分钟数时间戳
    ms = ms - ms_back - (ms % (min * 60 * 1000));
    let d = new Date();
    d.setTime(ms);

    let getMonth =
      d.getMonth() + 1 < 10 ? "0" + (d.getMonth() + 1) : d.getMonth() + 1;
    let getDate = d.getDate() < 10 ? "0" + d.getDate() : d.getDate();
    let getHours = d.getHours() < 10 ? "0" + d.getHours() : d.getHours();
    let getMinutes =
      d.getMinutes() < 10 ? "0" + d.getMinutes() : d.getMinutes();
    let mytime =
      d.getFullYear() +
      "-" +
      getMonth +
      "-" +
      getDate +
      " " +
      getHours +
      ":" +
      getMinutes +
      ":00";
    // console.log(mytime);
    return mytime;
  }

  if (min == 60 * 24) {
    let ms = new Date().getTime(); //获取当前时间戳
    let ms_back = min * back * 60 * 1000; //获取 倒退 分钟数时间戳
    ms = ms - ms_back - (ms % (min * 60 * 1000));
    let d = new Date();
    d.setTime(ms);
    
    let getMonth =
      d.getMonth() + 1 < 10 ? "0" + (d.getMonth() + 1) : d.getMonth() + 1;
    let getDate = d.getDate() < 10 ? "0" + d.getDate() : d.getDate();

    let mytime =
      d.getFullYear() + "-" + getMonth + "-" + getDate + " " + "00:00:00";
    // console.log(mytime);
    return mytime;
  }
};
yesterday = giveDate(60*24,1);
before45min = giveDate(15,3);

3.按钮变灰（比disable人性化）

.deactive {
  background-color: gray;
  background-image: none;
  pointer-events: none;
}

4.操作确认消息提示

open() {
        this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });          
        });
      }

5.折线图基本配置

lineChart_op() {
      return {
        backgroundColor: "#fafafa",
        tooltip: {
          trigger: "axis",
          backgroundColor: "#fff", // 提示框浮层的背景颜色
          padding: 15,
          axisPointer: {
            lineStyle: {
              color: "rgb(255,153,0)",
              width: 2,
            },
          },
          textStyle: {
            color: "#000", // 文字的颜色
            fontSize: "18", // 文字字体大小
            lineHeight: "35", // 行高
          },

          formatter: function (params) {
            var result = params[0].name + "<br>";
            params.forEach(function (item) {
              result +=
                '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background-color:' +
                item.color +
                '"></span>';
              if (parseFloat(item.data) >= 0) {
                result +=
                  item.seriesName +
                  " : " +
                  '<span style="color:#e30101">' +
                  item.data.toLocaleString() +
                  "</span><br>";
              } else if (parseFloat(item.data) < 0) {
                result +=
                  item.seriesName +
                  " : " +
                  '<span style="color:#049500">' +
                  item.data.toLocaleString() +
                  "</span><br>";
              }
            });
            return result;
          },
        },
        color: ["#FA660A", "#0E76E4", "#8923F1", "#FF0000", "#339966"],
        legend: {
          data: [
            this.chartData1.legend_name1,
            this.chartData2.legend_name2,
            this.chartData3.legend_name3,
          ],
        },

        grid: {
          top: "50px",
          left: "45px",
          right: "30px",
          bottom: "50px",
          containLabel: true,
        },

        xAxis: [
          {
            offset: 20,
            type: "category",
            boundaryGap: false,
            data: this.chartData1.x_param1,
          },
        ],
        yAxis: [
          {
            type: "value",
            axisTick: {
              show: false, //刻度线
            },

            splitLine: {
              show: false, // 背景线
            },
            axisLabel: {
              show: true,
              textStyle: {
                color: "#797979",
                fontSize: 13,
                showMinLabel: false, //不显示最小刻度线值
                showMaxLabel: false, //不显示最大刻度线值
              },
            },
            axisLine: {
              show: false, //y轴刻度线不显示
            },

            min: 0, //取0为最小刻度
            max: 100, //取100为最大刻度

            min: "dataMin", //取最小值为最小刻度
            max: "dataMax", //取最大值为最大刻度

            min: function (value) {
              //取最小值向下取整为最小刻度
              return Math.floor(value.min);
            },
            max: function (value) {
              //取最大值向上取整为最大刻度
              return Math.ceil(value.max);
            },

            scale: true, //自适应
            minInterval: 0.1, //分割刻度
          },
        ],
        series: [
          {
            name: this.chartData1.legend_name1,
            type: "line",
            symbolSize: 8, //拐点圆的大小
            symbol: "circle", //拐点样式
            smooth: true,
            animation: true, //false: hover圆点不缩放 .true:hover圆点默认缩放
            // areaStyle: {},
            data: this.chartData1.y_param1,
          },

          {
            name: this.chartData2.legend_name2,
            type: "line",
            symbolSize: 8, //拐点圆的大小
            symbol: "circle", //拐点样式
            smooth: true,
            animation: true,
            // areaStyle: {},
            data: this.chartData2.y_param2,
          },

          {
            name: this.chartData3.legend_name3,
            type: "line",
            symbolSize: 8, //拐点圆的大小
            symbol: "circle", //拐点样式
            smooth: true,
            animation: true,
            // areaStyle: {},
            data: this.chartData3.y_param3,
          },
        ],
      };
    },