自定义报警统计

src/views/alarmCenter/customStatistics.vue

@@ -77,24 +77,29 @@
           </thead>
           <el-scrollbar>
             <tbody>
-              <tr>
-                <td>XG01_28</td>
-                <td>51</td>
+              <tr v-for="item in dGridData" :key="item">
+                <td>{{item.name}}</td>
+                <td>{{item.sum}}</td>
               </tr>
             </tbody>
           </el-scrollbar>
         </table>
       </div>
-      <div class="dChart" height="100%"></div>
+      <div class="dChart" height="100%" id="dChart">
+        <!-- <div class="title">报警统计柱状图</div> -->
+        <!-- <multiple-hover-bar-chart height="80%" width="90%"></multiple-hover-bar-chart> -->
+        <!-- <multiple-hover-bar-chart height="100%" :list="dChartData"></multiple-hover-bar-chart> -->
+      </div>
     </el-dialog>
   </div>
 </template>
 <script>
 // import ComTable from "@/components/coms/table/table.vue";
-
+import MultipleHoverBarChart from "../../components/chart/bar/multiple-bar-chart.vue";
+import * as echarts from "echarts";
 export default {
   name: "customStatistics",
-  components: {},
+  components: { MultipleHoverBarChart },
   data() {
     let that = this;
     return {
@@ -103,7 +108,9 @@ export default {
       startDate: "",
       endDate: "",
       tableData: [],
-      dialogShow: false
+      dialogShow: false,
+      dGridData: [],
+      dChartData: []
 
       // tableLoading: true
     };
@@ -157,9 +164,9 @@ export default {
         }
       });
     },
-    alertDetail(item) {
+    async alertDetail(item) {
       this.dialogShow = true;
-      this.API.requestData({
+      let resData = await this.API.requestData({
         timeout: 30000,
         method: "GET",
         baseURL: "http://192.168.1.18:8075/",
@@ -169,11 +176,89 @@ export default {
           datebegin: this.startDate,
           dateend: this.endDate,
           snapid: item["key"]
-        },
-        success(res) {
-          console.log(res);
         }
       });
+      let keyValue = resData.data.data;
+      const dGridData = [];
+      for (let key in keyValue) {
+        dGridData.push({ sum: keyValue[key], name: key });
+      }
+      dGridData.sort(function(a, b) {
+        return b.sum - a.sum;
+      });
+      this.dGridData = dGridData;
+      this.alertDetailChart(item);
+    },
+    async alertDetailChart(item) {
+      let resData = await this.API.requestData({
+        timeout: 30000,
+        method: "GET",
+        baseURL: "http://192.168.1.18:8075/",
+        subUrl: "alarm/count/lineandproject",
+        data: {
+          stationid: this.stationId,
+          datebegin: this.startDate,
+          dateend: this.endDate,
+          snapid: item["key"]
+        }
+      });
+      let dataX = [],
+        data1 = [],
+        data2 = [];
+      for (let item of resData.data.data) {
+        dataX.push(item["linenum"]);
+        data1.push(item["happendsum"]);
+        data2.push(item["sum"]);
+      }
+
+      let option = {
+        color: ["#05bb4c", "#4b55ae", "#fa8c16"],
+        title: {
+          text: "报警统计柱状图",
+          left: "5%"
+        },
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "shadow"
+          }
+        },
+        legend: {
+          data: ["总数", "发生数量"],
+          textStyle: {
+            color: "#fff"
+          }
+        },
+        grid: {
+          left: "5%",
+          right: "6%",
+          bottom: "3%",
+          containLabel: true
+        },
+        xAxis: { name: "线路", type: "category", data: dataX },
+        yAxis: { name: "数量", type: "value" },
+        series: [
+          {
+            name: "总数",
+            type: "bar",
+            barWidth: 40,
+            barGap: "-100%",
+            label: { normal: { show: true, position: "top" } },
+            data: data2
+          },
+          {
+            name: "发生数量",
+            type: "bar",
+            barGap: "-100%",
+            barWidth: 40,
+            label: { normal: { show: true, position: "inside" } },
+            data: data1
+          }
+        ]
+      };
+      let chart = echarts.init(document.getElementById("dChart"));
+      chart.clear();
+      chart.setOption(option);
     }
   }
 };
@@ -190,10 +275,10 @@ export default {
   }
 }
 .dChart {
-  background-color: blue;
   height: 70vh;
   width: 70%;
   display: inline-block;
+  vertical-align: top;
 }
 .dBody {
   height: 80vh;

src/views/layout/Menu.vue

@@ -154,6 +154,11 @@ export default {
                   icon: "svg-wind-site",
                   path: "/alarmCenter/customAlarm",
                 },
+                {
+                  text: "自定义报警统计",
+                  icon: "svg-wind-site",
+                  path: "/alarmCenter/customStatistics",
+                },
               ],
             },
           ],