提交

src/views/componentschild/areamontortable.vue

@@ -0,0 +1,157 @@
+<template>
+  <div style="padding: 0px">
+    <el-col :span="24">
+      <el-table
+        stripe
+        :data="distributionData"
+        :height="vh"
+        border
+        class="mt10"
+        style="width: 100%; height: 100%"
+        v-loading="isLoading"
+        header-cell-class-name="table_header"
+      >
+        <el-table-column
+          prop="qy"
+          label="区域"
+          align="center"
+        ></el-table-column>
+        <el-table-column
+          prop="jcd"
+          label="监测点数(个数)"
+          align="center"
+        ></el-table-column>
+        <el-table-column
+          prop="zc"
+          label="通讯正常(个数)"
+          align="center"
+        ></el-table-column>
+        <el-table-column
+          prop="zd"
+          label="通讯中断(个数)"
+          align="center"
+        ></el-table-column>
+      </el-table>
+    </el-col>
+  </div>
+</template>
+<script>
+import { dicData } from "@/assets/commjs/dictypeData";
+import { getAreaLineDetailData } from "@/api/distribution";
+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.vh = document.getElementById("conmentId").offsetHeight-50;
+        this.queryData();
+      } else {
+        return;
+      }
+    },
+    height(a, b) {
+      if (a == 6 || a == 8 || a == 9 || a == 16) {
+        setTimeout(() => {
+          let str = document.getElementById("areamontortable").style.height;
+          let strsec = str.split("p");
+          let height = parseInt(strsec) - 50;
+          this.vh = height+10;
+          this.queryData();
+        }, 200);
+      } else {
+        return;
+      }
+    },
+    deep: true,
+  },
+  data() {
+    return {
+      isLoading: false,
+      vh: null,
+      h: 0,
+      classificationData: [],
+      distributionData: [],
+      time: this.timefamt(),
+      formData: {
+        deptIndex: JSON.parse(window.sessionStorage.getItem("Info")).deptId,
+        monitorFlag: 2,
+        powerFlag: 2,
+        serverName: "event-boot",
+        statisticalType: {},
+      },
+      //   classificationData: [],
+    };
+  },
+  created() {
+    this.getclassificationData();
+    this.queryData();
+  },
+  mounted() {
+    setTimeout(() => {
+      let str = document.getElementById("areamontortable").style.height;
+      let strsec = str.split("p");
+      let height = parseInt(strsec) - 50;
+      this.vh = height+10;
+    }, 200);
+  },
+  methods: {
+    //获取统计类型
+    getclassificationData() {
+      var code = "Statistical_Type";
+      this.classificationData = dicData(code, ["Report_Type"]);
+
+      this.formData.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;
+    },
+    queryData() {
+      this.isLoading = true;
+      //   this.formData.searchBeginTime = this.time[0];
+      //   this.formData.searchEndTime = this.time[1];
+      getAreaLineDetailData(this.formData).then((res) => {
+        let table = [];
+        for (var i = 0; i < res.data.areaValue.length; i++) {
+          let t = {
+            qy: res.data.areaValue[i][0],
+            jcd: res.data.areaValue[i][1],
+            zc: res.data.areaValue[i][2],
+            zd: res.data.areaValue[i][3],
+          };
+          table.push(t);
+        }
+        this.distributionData = table;
+        this.isLoading = false;
+      });
+    },
+  },
+};
+</script>