hb_pqs_web/src/views/componentschild/overviewdistrib-hb.vue

<template>
  <div ref="glfb" id="eventChance2" style="width: 100%; height: 235px"></div>
</template>
<script>
import {
  onLienRate1,
  onLienRate2,
  onLienRate3,
  colorB,
} from "@/assets/commjs/color";
import { dicData } from "@/assets/commjs/dictypeData";
import yan from "@/assets/commjs/color";
//import { getProbabilityDistribution } from "@/api/monitoringpointStatistics/echart";
import {getPwDurationLineChart} from "@/api/Distributionnetwork/transient/transient";
export default {
  props: {
    item: {
      type: Object,
      default: null,
    },
    item2: {
      type: Object,
      default: null,
    },
  },
  watch: {
    height2(a, b) {
      if (a == 24) {
        this.$refs.glfb.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('overviewdistrib').style.height
        let strsec = str.split('p')
        let height = parseInt(strsec) - 50 +'px'
        this.$refs.glfb.style.height =  height
        },200)
      } else {
        return;
      }
    },
  },
  data() {
    return {
      tableData: [],
      statisticalType: null,
      classificationData: [],
      time: this.timefamt(),
      //暂降类型模拟数据
      eventList: {},
      dataListX:[],
      dataListY:[]
    };
  },
  created() {
    var data = window.sessionStorage.getItem("Info");
    data = eval("(" + data + ")");
    this.deptIndex = data.deptId;
    this.getIndexType();
    this.queryData();
  },
  mounted() {
    setTimeout(()=>{
    let str = document.getElementById('overviewdistrib').style.height
    let strsec = str.split('p')
    let height = parseInt(strsec) - 50 +'px'
     this.$refs.glfb.style.height =  height
    },200)
  },
  methods: {
    queryData() {
      var info = window.sessionStorage.getItem("Info");
        info = eval("(" + info + ")"); 
        var  id =info.deptId;
      var formData = {
        endTime: this.time[0],
        id: id,
        startTime: this.time[1],
        type:3
        // timeFlag: 0,
      };
      getPwDurationLineChart(formData).then((res) => {
       // this.eventList = res.data;
       this.dataListX=[]
        this.dataListY=[]
        res.data.forEach(item => {
        this.dataListX.push(item.name)
        this.dataListY.push(item.value)
      });
      this.eventChance();
      });
    },

    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 today = year + "-" + month + "-" + day;
      var today2 = year + "-01-01";
      arr.push(today);
      arr.push(today2);
      return arr;
    },
    eventChance() {
      // var sisttime = this.eventList.name;
      // var persisttime = this.eventList.value;
      const echarts = require("echarts");
      var myChartes = echarts.init(document.getElementById("eventChance2"));
      let echartsColor = JSON.parse(window.localStorage.echartsColor);
      myChartes.clear();
      let option = {
        title: {
          text: "持续时间的概率分布函数 ",
          left: "center",
          top: 0,
          textStyle: {
              fontSize: 12,
              color: "#fff",
            },
        },
        grid: {
          top: "50px",
          left: "10px",
          bottom: "20px",
          right: "40px",
          containLabel: true,
        },
        xAxis: {
          type: "category",
          data: this.dataListX,
          name: "s",
          //nameLocation: "middle",
          boundaryGap: false,
          nameTextStyle: {
            padding: 5,
            color:"#fff",
            
          },
          axisLine: {
              lineStyle: {
                color: "#fff",
              },
            },
            axisLabel: {
              color: "#fff",
            },

        },
        yAxis: {
          //   type: "value",
          name: "概率分布",
          nameGap: '20',
          nameTextStyle: {
              color: "#fff",
              padding: 0,
            },
              minInterval: 1,
              type: "value",
               axisLine: {
              show: true,
              lineStyle: {
                color: "#fff",
              },
              },
               axisLabel: {
              color: "#fff",
              },
            splitLine: {
              lineStyle: {
                // 使用深浅的间隔色
                color: ["#fff",],
                type: "dashed",
                opacity: 0.5,
              },
            },
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
            label: {
              color: "#fff",
              fontSize: 16,
            },
          },
          textStyle: {
            color: "#fff",
            fontStyle: "normal",
            opacity: 0.35,
            fontSize: 14,
          },
          backgroundColor: "rgba(0,0,0,0.35)",
          borderWidth: 0
        },
        series: [
          {
            data: this.dataListY,
            type: "line",
            itemStyle: {
              normal: { show: true, color: echartsColor.FigureColor[0] },
            },
            label: {
              show: true,
              position: "top",
              textStyle: {
                //数值样式
                color: "#fff",
              },
              fontSize: 12,
            },
          },
        ],
      };

      myChartes.setOption(option)
window.echartsArr.push(myChartes);
      setTimeout(() => {
        myChartes.resize();
      }, 100);
      this.loadingd = false;
      let _this = this;
      _this.$erd.listenTo(_this.$refs.glfb, (element) => {
        _this.$nextTick(() => {
          myChartes.resize();
        });
      });
      window.onresize = function () {
        myChartes.resize();
      };
    },
  },
};
</script>