提交

src/views/componentschild/overviewdistrib-hb.vue

@@ -0,0 +1,254 @@
+<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>