hb_pqs_web/src/views/componentschild/terminalstatus.vue

<template>
  <div ref="run" id="runstatus" style="width: 100%;"></div>
</template>
<script>
import yan from "@/assets/commjs/color";
import { dicData } from "@/assets/commjs/dictypeData";
import api from "@/api/harmonic/onlineData";
export default {
  props: {
    item: {
      type: Object,
      default: null,
    },
    item2: {
      type: Object,
      default: null,
    },
    height:{
      type:Number,
      default: null,
    },
    height2:{
      type:Number,
      default: null,
    }
  },
  watch: {
    height2(a, b) {
      if (a == 24) {
        this.$refs.run.style.height =  document.getElementById('conmentId').offsetHeight -50 + 'px';
      } else {
        return;
      }
    },
    height(a, b) {
      if (a == 6 || a==8 || a==9 || a==16) {
        setTimeout(()=>{
        let str = document.getElementById('terminalstatus').style.height
        let strsec = str.split('p')
        let height = parseInt(strsec) - 60 +'px'
        this.$refs.run.style.height =  height
        },200)
      } else {
        return;
      }
    },
  },
  data() {
    return {
      tableData: [],
      statisticalType: null,
      classificationData: [],
      time: this.timefamt(),
      ydata1: [],
      ydata2: [],
      xdata: [],
      ydata: [],
    };
  },
  created() {
    var data = window.sessionStorage.getItem("Info");
    data = eval("(" + data + ")");
    this.deptIndex = data.deptId;
    this.getIndexType();
    this.queryData();
  },
  mounted() {
    setTimeout(()=>{
    let str = document.getElementById('terminalstatus').style.height
    let strsec = str.split('p')
    let height = parseInt(strsec) - 60 +'px'
     this.$refs.run.style.height =  height
    },200)
  },
  methods: {
    queryData() {
      var formData = {
        id: "333ff66a28acd0c68834f5a0d4ca68bd",
        searchBeginTime: this.time[0],
        searchEndTime: this.time[1],
      };
          api.getComFlagInfoData(formData).then((res) => {
            if (res.code === "A0000") {
            this.xdata = res.data.updateTime;

            this.ydata = res.data.type;
            this.$nextTick(() => {
            this.runstatus();
           });
          }
        })
    },
    getIndexType() {
      var code = "Indicator_Type";
      this.classificationData = dicData(code, [
        "PLPC",
        "DYPC",
        "SXDYBPHD",
        "CSSB",
        "FXDL",
        "JXBDY",
      ]);
      this.statisticalType = this.classificationData[0];
    },
    timefamt() {
      var date = new Date();
      var year = date.getFullYear();
      var month = date.getMonth() + 1;
      var day = date.getDate();
      month = month > 9 ? month : "0" + month;
      day = day < 10 ? "0" + day : day;
      var arr = [];
      var time1 = year + "-" + month + "-01";
      arr.push(time1);
      var time2 = year + "-" + month + "-" + day ;
      arr.push(time2);
      return arr;
    },
    runstatus() {
      const echarts = require("echarts");
      var myChartes = echarts.init(document.getElementById("runstatus"));
      myChartes.clear();
      var option = {
        // title: {
        //     text: '运行状态'
        // },
        tooltip: {
          trigger: "axis",
          
          axisPointer: {
                            type: "shadow",
                            label: {
                            color: "#fff",
                            fontSize: 16,
                            },
                        },
                        textStyle: {
                            color: "#fff",
                            fontStyle: "normal",
                            opacity: 0.35,
                            fontSize: 14,
                        },
                        backgroundColor: "rgba(0,0,0,0.35)",
          formatter: function (params) {
            var res = params[0].name + "<br/>终端运行状态为：";
            var texts = "";
            if (params[0].value === 2 || params[0].value === "2") {
              texts = "退出";
            } else if (params[0].value === 0 || params[0].value === "0") {
              texts = "中断";
            } else if (params[0].value === 1 || params[0].value === "1") {
              texts = "正常";
            }
            res = res + texts;
            return res;
          },
        },
        legend: {
          data: ["运行状态"],
          right: "20px",
          top:'-5px',
          textStyle: {
            color: "#fff",
          },
        },
        grid: yan.EchartObject.gridf,
        dataZoom: yan.EchartObject.dataZoom,
        xAxis: {
          name: yan.EchartObject.date,
          type: "category",
          data: this.xdata,
          axisLine: {
            show: true,
            symbol: ["none", "arrow"],
            lineStyle: {
              color: "#fff",
            },
          },
          axisTick: {
            show: true,
            alignWithLabel: true,
          },
        },
        yAxis: {
          name: "状态",
          type: "value",
          axisLine: {
            show: true,
            symbol: ["none", "arrow"],
            lineStyle: {
              color: "#fff",
            
            },
          },
          splitLine: {
              show: false,
              type:yan.EchartObject.type
            },
          axisLabel: {
            show: true,
            textStyle: {
              color: "#fff",
              fontSize:yan.EchartObject.xNamefontSize
            },
            // 这里重新定义就可以
            formatter: function (value, index) {
              var texts = [];
              if (value === 2) {
                texts.push("退出");
              } else if (value === 0) {
                texts.push("中断");
              } else if (value === 1) {
                texts.push("正常");
              }
              return texts;
            },
          },
        },
        series: [
          {
            name: "运行状态",
            type: "line",
            step: "end",
            data: this.ydata,
            itemStyle:{
                color:'#FF9900'
            }
          },
        ],
      };
      myChartes.setOption(option)
window.echartsArr.push(myChartes);
      setTimeout(() => {
        myChartes.resize();
      }, 100);
      this.loadingd = false;
      let _this = this;
      _this.$erd.listenTo(_this.$refs.run, (element) => {
        _this.$nextTick(() => {
          myChartes.resize();
        });
      });
      window.onresize = function () {
        myChartes.resize();
      };
    },
  },
};
</script>