提交

src/views/componentschild/areaview.vue

@@ -0,0 +1,283 @@
+<template>
+  <div ref="areaView" id="viewEcharts" style="width: 100%;"></div>
+</template>
+<script>
+import { dicData } from "@/assets/commjs/dictypeData";
+import { getAreaData } from "@/api/Tableabove";
+import yan from "@/assets/commjs/color";
+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.areaView.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("areaview").style.height;
+          let strsec = str.split("p");
+          let height = parseInt(strsec) - 50 + "px";
+          this.$refs.areaView.style.height = height;
+        }, 200);
+      } else {
+        return;
+      }
+    },
+  },
+  data() {
+    return {
+      classificationData: [],
+      areaStatistics: [],
+      time: this.timefamt(),
+      formData: {
+        deptIndex: JSON.parse(window.sessionStorage.getItem("Info")).deptId,
+        monitorFlag: 2,
+        powerFlag: 2,
+        serverName: "event-boot",
+        searchBeginTime: "",
+        searchEndTime: "",
+        statisticalType: {},
+        timeFlag: 1,
+      },
+    };
+  },
+  created() {
+    this.getclassificationData();
+    this.queryData();
+  },
+  mounted() {
+    setTimeout(() => {
+      let str = document.getElementById("areaview").style.height;
+      let strsec = str.split("p");
+      let height = parseInt(strsec) - 50 + "px";
+      this.$refs.areaView.style.height = height;
+    }, 200);
+  },
+  methods: {
+    //获取统计类型
+    getclassificationData() {
+      var code = "Statistical_Type";
+      this.classificationData = dicData(code, ["Report_Type"]);
+      this.formData.statisticalType = this.classificationData[0];
+    },
+    queryData() {
+      this.formData.searchBeginTime = this.time[0];
+      this.formData.searchEndTime = this.time[1];
+      getAreaData(this.formData).then((res) => {
+        this.areaStatistics = res.data.areaStatistics.areaCalculation;
+        this.qualifiedechart();
+      });
+    },
+    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;
+    },
+    qualifiedechart() {
+      let echartsColor = JSON.parse(window.localStorage.echartsColor);
+      let echartsndArr = [];
+      let echartsArr = [];
+      this.areaStatistics.forEach((item) => {
+        echartsndArr.push(item.areaName);
+        echartsArr.push(item.frequency);
+      });
+      const echarts = require("echarts");
+      var myChartes = echarts.init(document.getElementById("viewEcharts"));
+      myChartes.clear();
+      //let echartsColor = JSON.parse(window.localStorage.echartsColor);
+      let option = {
+        title: {
+          text: "区域",
+          left: "center",
+          textStyle: {
+            color: "#fff",
+            fontSize: 16,
+          },
+        },
+        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)",
+          borderWidth: 0,
+          formatter: function (params) {
+            // console.log(params);
+            var tips = "";
+            for (var i = 0; i < params.length; i++) {
+              if (params[i].value == 3.14159) {
+                tips += params[i].name + "<br/>";
+                tips += params[i].seriesName + ":暂无数据<br/>";
+              } else {
+                tips += params[i].name + "<br/>";
+                tips += params[i].seriesName + ":" + params[i].value + "<br/>";
+              }
+            }
+            return tips;
+          },
+        },
+        grid: yan.EchartObject.gridj,
+        dataZoom: yan.EchartObject.dataZoom,
+        color: echartsColor.FigureColor,
+        legend: {
+          data: ["暂降次数"],
+          itemWidth: 16,
+          itemHeight: 16,
+          right: 80,
+          itemGap: 28,
+          itemStyle: {
+            color: echartsColor.FigureColor[0],
+          },
+          textStyle: {
+            color: "#fff",
+            rich: {
+              a: {
+                verticalAlign: "middle",
+              },
+            },
+
+            padding: [2, 0, 0, 0], //[上、右、下、左]
+          },
+        },
+        xAxis: [
+          {
+            name: yan.EchartObject.area1,
+            type: "category",
+            data: echartsndArr,
+
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: "#fff",
+              },
+              symbol: ["none", "arrow"],
+            },
+            axisLabel: {
+              textStyle: {
+                fontFamily: yan.EchartObject.fontFamily,
+                color: "#fff",
+                fontSize: yan.EchartObject.xNamefontSize,
+              },
+            },
+            axisTick: {
+              alignWithLabel: true,
+            },
+          },
+        ],
+        yAxis: [
+          {
+            type: "value",
+            name: yan.EchartObject.nuit2,
+            nameTextStyle: {
+              color: "#fff",
+            },
+            minInterval: 1,
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: "#fff",
+              },
+            },
+            axisLabel: {
+              textStyle: {
+                fontFamily:yan.EchartObject.fontFamily,
+                color: "#fff",
+                fontSize:yan.EchartObject.xNamefontSize
+                //fontSize:10
+              },
+            },
+            splitLine: {
+              lineStyle: {
+                // 使用深浅的间隔色
+                color: "#fff",
+                type: "dashed",
+                opacity: 0.5,
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            barMaxWidth:  yan.EchartObject.barMaxWidth,
+            itemStyle: {
+              normal: {
+                //这里是颜色
+                color: function (params) {
+                  // console.log(params,'1111111111111111111111');
+                  if (params.data == 3.14159) {
+                    return echartsColor.FigureColor[9];
+                  } else {
+                    return echartsColor.FigureColor[0];
+                  }
+                },
+              },
+              // color: echartsColor.FigureColor[0],
+            },
+            name: "暂降次数",
+            type: "bar",
+            data: echartsArr,
+          },
+        ],
+      };
+      myChartes.setOption(option)
+window.echartsArr.push(myChartes);
+      setTimeout(() => {
+        myChartes.resize();
+      }, 100);
+      this.loadingd = false;
+      let _this = this;
+      _this.$erd.listenTo(_this.$refs.areaView, (element) => {
+        _this.$nextTick(() => {
+          myChartes.resize();
+        });
+      });
+      window.onresize = function () {
+        myChartes.resize();
+      };
+    },
+  },
+};
+</script>