U 断路器修改

he wei

2023-12-20 d216ef279fee1f19e835b44dd5e6c40af5bf17ac

 src/components/stepLine.vue

@@ -15,9 +15,38 @@
    },
  },
  data() {
    return {};
    let xLabel = [];
    let oData = [];
    for (let i = 0, j = 24 * 60 * 60; i < j; i++) {
      xLabel.push(this.convertSecsToTime(i));
      oData.push(0);
    }
    return {
      xLabel,
      oData,
    };
  },
  methods: {
    convertSecsToTime(sec) {
      let h, m, s;

      m = Math.floor(sec / 60);
      s = sec % 60;

      h = Math.floor(m / 60);
      m = m % 60;

      // 将小时、分钟和秒转换为两位数  
      h = (h < 10) ? "0" + h : h;
      m = (m < 10) ? "0" + m : m;
      s = (s < 10) ? "0" + s : s;

      return h + ":" + m + ":" + s;
    },
    convertTimeToSecs(time) {
      let [h, m, s] = time.split(':').map(v => v * 1);
      return h * 60 * 60 + m * 60 + s;
    },
    fullScreen() {
      return false;
    },
@@ -27,23 +56,63 @@
      this.setOption(option);
    },

    getOption(data) {
      // let xLabel = data.xLabel;
    getOption(data = []) {
      let xLabel = this.xLabel;
      let rdata = JSON.parse(JSON.stringify(this.oData));
      // let sData = data.sData;
      // data = [{ time: '12:30:05', flag: 0 }, { time: '12:50:05', flag: 1 }, { time: '13:30:05', flag: 1 }, { time: '16:30:05', flag: 0 }];
      // 获取初始状态  如果有操作 根据第一次操作来定初始状态 没有操作 则认定初始状态为分闸状态
      let lastFlag = 0;
      let lastSec = 0;
      if (data[0]) {
        lastFlag = !data[0].flag * 1;
      }

      data.forEach((v, i) => {
        // rdata[this.convertTimeToSecs(v.time)] = v.flag;
        let { time, flag } = v;
        let sec = this.convertTimeToSecs(time);
        // 上一次的状态为合闸 就要一直补合闸状态到下一次状态改变
        if (lastFlag) {
          rdata.fill(1, lastSec, sec);
        }

        // 如果是最后一笔 且为合闸操作 则要补状态到结束
        if (i == data.length - 1 && flag) {
          rdata.fill(1, lastSec);
        }
        lastFlag = flag;
        lastSec = sec;
      });
      // rdata.forEach((v, i) => {

      // });

      return {
        grid: {
          left: 0,
          right: 0,
          bottom: "2%",
          top: "2%",
          left: '2%',
          right: '2%',
          bottom: "6%",
          top: "6%",
          containLabel: true,
        },
        tooltip: {},
        // tooltip: {},
        tooltip: {
          trigger: 'axis',  // 'axis' 表示在数据轴上触发悬停  
          axisPointer: {  // 指示器，有以下三种选择：  
            type: 'line'  // 'line'、'shadow'  
          },
          formatter(params) {
            return params[0].name + '<br >' + (params[0].value ? '合闸' : '分闸');
          }
        },
        xAxis: {
          type: "category",
          data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
          onZero: false,
          data: xLabel,
          // onZero: false,
          axisPointer: {
            type: "line"
          },
          axisLine: {
            show: false, // 隐藏x轴轴线
          },
@@ -57,26 +126,71 @@
        },
        yAxis: {
          type: "value",
          min: -0.1,
          axisLine: {
            show: false,
          },
          min: -0.5,
          max: 1.5,
          interval: 0.5,
          // minInterval: 1,
          axisLabel: {
            formatter: function (value, index) {
              switch (value) {
                case 0:
                  return '分闸';
                case 1:
                  return '合闸';
                default:
                  return '';
              }
            }
          }
          // show: false,
        },
        series: [
          {
            data: [1, 0, 0, 1, 0, 1, 0],
            data: rdata,
            type: "line",
            step: "center",
            connectNulls: true,
            step: "middle",
            // connectNulls: true,
            symbolSize: 0
          },
        ],
        toolbox: {
          show: true,
          feature: {
            dataZoom: {
              yAxisIndex: "none"
            },
            // dataView: {
            //   readOnly: false
            // },
            // magicType: {
            //   type: ["line", "bar"]
            // },
            restore: {},
            // saveAsImage: {}
          }
        },
        dataZoom: [
          {
            type: "inside",
            show: true,
            height: 15,
            start: 1,
            start: 0,
            end: 100,
            orient: "vertical",
            orient: "horizontal",
            zlevel: 66,
          },
          // {
          //   type: "slider",
          //   show: true,
          //   height: 15,
          //   start: 0,
          //   end: 100,
          //   orient: "horizontal",
          //   zlevel: 66,
          // },
        ],
      };
    },