PC_FiveFollowing/src/views/site_ehcarts/Device_StateCurve.vue

<template>
  <div
    ref="statecurve"
    :class="className"
    :style="{ height: height, width: width }"
  ></div>
</template>
<script>
import * as echarts from "echarts";

export default {
  props: {
    defaul_tTime: {
      type: Array,
    },
    className: {
      type: String,
      default: "chart",
    },
    width: {
      type: String,
      default: "100%",
    },
    height: {
      type: String,
      default: "260px",
    },
    perData: {
      type: Array,
      default: () => [
        {
          color: "#01ACFF",
          name: "摄像头",
          value: [39],
          // nAmount: 566557.14,
        },
      ],
    },
  },
  data() {
    return {
      chart: null,
      color_XY: "rgba(0, 244, 253, 0.1)",
      itemStyle: [
        {
          normal: {
            borderColor: "rgba(0,244,253,1)",
            borderWidth: 2,
            color: "rgba(6, 68, 83, 1)",
            lineStyle: {
              width: 2, //折线宽度
              color: "rgba(0,244,253,1)",
            },
          },
        },
        {
          normal: {
            borderColor: "rgba(253,143,0,1)",
            borderWidth: 2,
            color: "rgba(6, 68, 83, 1)",
            lineStyle: {
              width: 2, //折线宽度
              color: "rgba(253,143,0,1)",
            },
          },
        },
        {
          normal: {
            borderColor: "rgba(0,255,18,1)",
            borderWidth: 2,
            color: "rgba(6, 68, 83, 1)",
            lineStyle: {
              width: 2, //折线宽度
              color: "rgba(0,255,18,1)",
            },
          },
        },
      ],
      msgFormSon: null,
      data_time: [],
      data: [],
      cont_time: 0,
    };
  },
  mounted() {
    // this.$nextTick(() => {
    //   this.initChart();
    //   // console.log(this.defaul_tTime);
    // });
  },
  beforeUnmount() {
    window.removeEventListener("resize", this.chart);
  },
  watch: {
    "$store.state.run_off_Status"() {
      // this.chart.resize();
      this.initChart();
    },
  },
  methods: {
    //次数分布折线图
    initChart() {
      var _this = this;
      var chart = echarts.init(this.$refs.statecurve);

      var time = _this.$store.state.Time_Data;

      var run_off_Status = _this.$store.state.run_off_Status;
      for (let i in run_off_Status) {
        if (run_off_Status[i].name === "runStates") {
          if (run_off_Status[i].list.length <= 0) {
            _this.data = [1, 1].map((val, ind) => {
              return [time[ind], val];
            });
          } else {
            _this.data = run_off_Status[i].list.map((val, ind) => {
              return [run_off_Status[i].listDate[ind], val];
            });
          }
        }
        run_off_Status[i].name === "offTime"
          ? (this.cont_time = run_off_Status[i].list)
          : "";
      }

      var option;
      option = {
        title: [
          {
            text: "运行状态曲线",
            left: "center",
            textStyle: {
              color: "#fff",
              fontSize: 14,
            },
          },
          {
            text: `OFF时长：${this.cont_time} 分钟`,
            left: "right",
            padding: [0, "7", 0, 0],
            textStyle: {
              color: "#fff",
              fontSize: 14,
            },
          },
        ],
        tooltip: {
          backgroundColor: "rgba(0, 244, 253, 0.1)",
          borderColor: "rgba(0, 244, 253, 0.3)",
          textStyle: {
            color: "#fff",
          },
          trigger: "axis",
          axisPointer: {
            type: "line",
          },
          formatter: function (params) {
            // console.log(params);
            var res = params[0].data[0];
            for (let i in params) {
              res += `
              <div style="display:flex">
                  <div style="width:10px;height:10px;background:${
                    params[i].color
                  };border-radius: 10px;margin:10px 0;"></div>
                  <div style="padding:4px 0px 0px 10px;">${
                    params[i].seriesName
                  }:</div>
                  <div style="padding:4px 0px 0px 10px;">${
                    params[i].data[1] == 1 ? "ON" : "OFF"
                  }</div>
              </div>`; //可以在这个方法中做改变
            }
            return res;
          },
        },
        xAxis: {
          type: "time",
          boundaryGap: false,
          nameTextStyle: {
            // 名称样式
            fontSize: 12,
            color: "#fff",
            fontWeight: "bold",
          },

          axisLabel: {
            showMaxLabel: true,
            textStyle: {
              color: "#fff", //坐标值得具体的颜色
            },
            formatter: {
              year: "{MM}-{dd}\n{yyyy}",
              month: `{MM}-{dd}\n{yyyy}`,
              day: `{MM}-{dd}\n{yyyy}`,
              hour: "{HH}:{mm}\n{MM}-{dd}",
              minute: "{HH}:{mm}\n{MM}-{dd}",
              second: "{HH}:{mm}\n{MM}-{dd}",
              millisecond: "{HH}:{mm}\n{MM}-{dd}",
              none: "{yyyy}-{MM}-{dd} {hh}:{mm}:{ss}",
            },
          },
          axisLine: {
            lineStyle: {
              color: this.color_XY,
            },
          },
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "10%",
          containLabel: true,
        },
        yAxis: {
          type: "value",
          splitNumber: 1,
          min: 0,
          max: 1,
          axisLabel: {
            formatter: function (value) {
              var texts = [];
              if (value == 0) {
                texts.push("OFF");
              } else {
                texts.push("ON");
              }
              return texts;
            },
            textStyle: {
              color: "#fff", //坐标值得具体的颜色
            },
          },
          splitLine: {
            lineStyle: {
              // 使用深浅的间隔色
              color: [this.color_XY],
            },
          },
        },
        series: [
          {
            name: "回路带电/停电",
            type: "line",
            // smooth: true,
            data: this.data,
          },
        ],
      };

      chart.setOption(option);
      window.addEventListener("resize", () => {
        chart.resize();
      });
      this.chart = chart;
    },
  },
};
</script>