2021-12-05

src/utils/chenApi.js

@@ -1,7 +1,7 @@
 /*
  * @Author: your name
  * @Date: 2021-11-18 13:40:39
- * @LastEditTime: 2021-12-05 17:07:29
+ * @LastEditTime: 2021-12-05 18:17:50
  * @LastEditors: Please set LastEditors
  * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
  * @FilePath: \hyyfClient\src\utils\chenApi.js
@@ -226,3 +226,21 @@ export function getSewageAlarm(params) {
   })
 }
 
+/* 报警信息 */
+// 报警情况占比 - 长条图
+export function getOneWeekAlarm(params) {
+  return axios({
+    url: 'env/alarm/getOneWeekAlarm',
+    method: 'get',
+    params: params
+  })
+}
+
+// 报警情况占比 - 圆环图
+export function getTodayAlarmRate(params) {
+  return axios({
+    url: 'env/alarm/getTodayAlarmRate',
+    method: 'get',
+    params: params
+  })
+}

src/views/Alarm/AlarmWarn.vue

@@ -3,17 +3,35 @@
     <div class="title" :style="{ color: color }">报警情况占比</div>
     <div class="box-flex">
       <div class="flex-left">
-        <alarm-pie></alarm-pie>
+        <alarm-pie :pieData="alarmPieData"></alarm-pie>
       </div>
       <div class="flex-left">
-        <alarm-bar></alarm-bar>
+        <alarm-bar :barData="alarmBarData"></alarm-bar>
       </div>
     </div>
-    <div class="reply" :style="{color: color}">筛选查询</div>
-    <x-form :formItems="selectItems" :day="day" @setDay="setDay" @onClickType="onClickType"></x-form>
-    <new-table :height="600" :title="title" :listData="list" :tableItems="tableItems" :shows="tableShows">
+    <div class="reply" :style="{ color: color }">筛选查询</div>
+    <x-form
+      :formItems="selectItems"
+      :day="day"
+      @setDay="setDay"
+      @onClickType="onClickType"
+    ></x-form>
+    <new-table
+      :height="600"
+      :title="title"
+      :listData="list"
+      :tableItems="tableItems"
+      :shows="tableShows"
+    >
       <template #right>
-        <el-button size="mini" type="primary" v-if="hasPerm('video:add')" style="margin-right: 10px" @click="digAll">批量处理</el-button>
+        <el-button
+          size="mini"
+          type="primary"
+          v-if="hasPerm('video:add')"
+          style="margin-right: 10px"
+          @click="digAll"
+          >批量处理</el-button
+        >
       </template>
       <template #type="scope">
         <span v-if="scope.row.type === 1">环境报警</span>
@@ -25,56 +43,75 @@
       </template>
       <template #handler="scope">
         <span v-if="scope.row.dig">已处理</span>
-        <el-button v-else type="primary" size="mini" @click="dig(scope.row)">处理</el-button>
+        <el-button v-else type="primary" size="mini" @click="dig(scope.row)"
+          >处理</el-button
+        >
       </template>
     </new-table>
     <table-footer
-        :totals="total"
-        :size="pageSize"
-        @sizeChange="sizeChange"
-        @pageChange="pageChange"></table-footer>
+      :totals="total"
+      :size="pageSize"
+      @sizeChange="sizeChange"
+      @pageChange="pageChange"
+    ></table-footer>
     <el-dialog
-        :title=" digType ? '处理' : '批量处理'"
-        :visible.sync="dialogVisible"
-        width="30%">
+      :title="digType ? '处理' : '批量处理'"
+      :visible.sync="dialogVisible"
+      width="30%"
+    >
       <div>
-        <el-form ref="form" :model="form" :rules="rules" label-width="100px" size="mini">
+        <el-form
+          ref="form"
+          :model="form"
+          :rules="rules"
+          label-width="100px"
+          size="mini"
+        >
           <el-form-item label="报警时间" v-if="digType">
-            <span>{{alarmDig.time}}</span>
+            <span>{{ alarmDig.time }}</span>
           </el-form-item>
-          <el-form-item label="报警内容"  v-if="digType">
+          <el-form-item label="报警内容" v-if="digType">
             <el-input
-                type="textarea"
-                :rows="2"
-                readonly
-                :value="alarmDig.content">
+              type="textarea"
+              :rows="2"
+              readonly
+              :value="alarmDig.content"
+            >
             </el-input>
           </el-form-item>
           <el-form-item label="审批意见" prop="areaId">
             <el-select v-model="form.areaId">
-              <el-option v-for=" item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
+              <el-option
+                v-for="item in options"
+                :key="item.value"
+                :label="item.label"
+                :value="item.value"
+              ></el-option>
             </el-select>
           </el-form-item>
           <el-form-item label="用户名" prop="account">
-            <span>{{userName}}</span>
+            <span>{{ userName }}</span>
           </el-form-item>
         </el-form>
       </div>
       <span slot="footer" class="dialog-footer">
-          <el-button @click="dialogVisible = false">取 消</el-button>
-          <el-button type="primary" @click="onSubmit('form')">确认</el-button>
-        </span>
+        <el-button @click="dialogVisible = false">取 消</el-button>
+        <el-button type="primary" @click="onSubmit('form')">确认</el-button>
+      </span>
     </el-dialog>
   </div>
 </template>
 
 <script>
-import { mapState } from 'vuex';
+import { mapState } from "vuex";
 import AlarmPie from "@/views/Alarm/chart/AlarmPie";
 import AlarmBar from "@/views/Alarm/chart/AlarmBar";
 import XForm from "@/components/XForm";
 import NewTable from "@/components/newTable/NewTable";
 import TableFooter from "@/components/TableFooter";
+
+import { getOneWeekAlarm, getTodayAlarmRate } from "@/utils/chenApi.js";
+
 export default {
   name: "AlarmWarn",
   components: {
@@ -82,114 +119,114 @@ export default {
     AlarmBar,
     XForm,
     NewTable,
-    TableFooter
+    TableFooter,
   },
   computed: {
-    ...mapState(['color'])
+    ...mapState(["color"]),
   },
   data() {
     return {
       selectItems: [
         {
           id: 1,
-          type: 'select',
-          label: '报警类型：',
-          placeholder: '请选择报警类型',
-          field: 'areaId',
+          type: "select",
+          label: "报警类型：",
+          placeholder: "请选择报警类型",
+          field: "areaId",
           options: [],
-          col: 5
+          col: 5,
         },
         {
           id: 3,
-          type: 'text',
-          text: '今日',
+          type: "text",
+          text: "今日",
           value: 1,
-          col: 1
+          col: 1,
         },
         {
           id: 4,
-          type: 'text',
-          text: '本周',
+          type: "text",
+          text: "本周",
           value: 2,
-          col: 1
+          col: 1,
         },
         {
           id: 5,
-          type: 'text',
-          text: '本月',
+          type: "text",
+          text: "本月",
           value: 3,
-          col: 1
+          col: 1,
         },
         {
           id: 6,
-          type: 'datepicker',
+          type: "datepicker",
           placeholder: [],
-          field: 'value1',
-          col: 6
+          field: "value1",
+          col: 6,
         },
         {
           id: 7,
-          type: 'button',
-          text: '导出数据',
+          type: "button",
+          text: "导出数据",
           col: 2,
-          click: 'derive'
-        }
+          click: "derive",
+        },
       ],
       day: 2,
-      title: '报警列表',
+      title: "报警列表",
       list: [
         {
           id: 1,
-          time: '2021-10-11 14:55:55',
+          time: "2021-10-11 14:55:55",
           type: 1,
           class: 1,
-          content: '育肥1栋3单元温度过高',
+          content: "育肥1栋3单元温度过高",
           dig: false,
         },
         {
           id: 2,
-          time: '2021-10-11 14:55:55',
+          time: "2021-10-11 14:55:55",
           type: 2,
           class: 2,
-          content: '育肥1栋2单元温度传感器异常',
+          content: "育肥1栋2单元温度传感器异常",
           dig: true,
-        }
+        },
       ],
       tableItems: [
         {
-          prop: 'time',
-          label: '报警时间',
-          minWidth: '100',
-          slotName: 'time'
+          prop: "time",
+          label: "报警时间",
+          minWidth: "100",
+          slotName: "time",
         },
         {
-          prop: 'type',
-          label: '报警类型',
-          minWidth: '100',
-          slotName: 'type'
+          prop: "type",
+          label: "报警类型",
+          minWidth: "100",
+          slotName: "type",
         },
         {
-          prop: 'class',
-          label: '危险等级',
-          minWidth: '100',
-          slotName: 'class'
+          prop: "class",
+          label: "危险等级",
+          minWidth: "100",
+          slotName: "class",
         },
         {
-          prop: 'content',
-          label: '报警内容',
-          minWidth: '100',
-          slotName: 'content'
+          prop: "content",
+          label: "报警内容",
+          minWidth: "100",
+          slotName: "content",
         },
         {
-          label: '处理结果',
-          minWidth: '100',
-          slotName: 'handler'
-        }
+          label: "处理结果",
+          minWidth: "100",
+          slotName: "handler",
+        },
       ],
       tableShows: {
         showIndex: false,
         showSelect: true,
-        defaultProp: 'dig'
+        defaultProp: "dig",
       },
       total: 0,
       pageNum: 1,
@@ -203,20 +240,22 @@ export default {
       alarmDig: {},
       options: [
         {
-          label: '略过',
-          value: 1
+          label: "略过",
+          value: 1,
         },
         {
-          label: '加速处理',
-          value: 2
+          label: "加速处理",
+          value: 2,
         },
         {
-          label: '...',
-          value: 3
-        }
+          label: "...",
+          value: 3,
+        },
       ],
-      userName: localStorage.getItem('UserName')
-    }
+      userName: localStorage.getItem("UserName"),
+      alarmBarData: {},
+      alarmPieData: [], // 报警占比 圆环数据
+    };
   },
   methods: {
     // 修改size
@@ -226,7 +265,7 @@ export default {
     },
     // 修改页数
     pageChange(val) {
-      this.pageNum= val;
+      this.pageNum = val;
       this.init();
     },
     init() {},
@@ -243,44 +282,65 @@ export default {
     digAll() {
       this.digType = false;
     },
-    onSubmit() {}
+    onSubmit() {},
+    // 获取报警情况占比的 一二三级
+    initOneWeekAlarm() {
+      getOneWeekAlarm({}).then((res) => {
+        if (res.code === 10000) {
+          console.log(res.data);
+          this.alarmBarData = res.data;
+        }
+      });
+    },
+    // 报警情况占比的 bar 数据
+    initTodayAlarmRate() {
+      getTodayAlarmRate({}).then((res) => {
+        if (res.code === 10000) {
+          this.alarmPieData = res.data;
+        }
+      });
+    },
   },
-}
+  mounted() {
+    this.initOneWeekAlarm(); // bar
+    this.initTodayAlarmRate(); // pie
+  },
+};
 </script>
 
 <style scoped>
-  .alarmWarn {
-    width: 100%;
-    height: 100%;
-    padding: 20px 20px 0 20px;
-  }
-  .title {
-    width: 100%;
-    height: 40px;
-    border: 1px solid #ddd;
-    background-color: #f3f3f3;
-    padding-left: 20px;
-    line-height: 40px;
-  }
-  .box-flex {
-    width: 100%;
-    height: 400px;
-    background-color: #fff;
-    display: flex;
-  }
-  .flex-left {
-    width: 50%;
-    height: 100%;
-  }
-  .reply {
-    width: 100%;
-    border: 1px solid #ddd;
-    border-bottom: 0;
-    height: 50px;
-    background-color: #F3F3F3;
-    line-height: 50px;
-    font-size: 18px;
-    box-sizing: border-box;
-    padding-left: 20px;
-  }
+.alarmWarn {
+  width: 100%;
+  height: 100%;
+  padding: 20px 20px 0 20px;
+}
+.title {
+  width: 100%;
+  height: 40px;
+  border: 1px solid #ddd;
+  background-color: #f3f3f3;
+  padding-left: 20px;
+  line-height: 40px;
+}
+.box-flex {
+  width: 100%;
+  height: 400px;
+  background-color: #fff;
+  display: flex;
+}
+.flex-left {
+  width: 50%;
+  height: 100%;
+}
+.reply {
+  width: 100%;
+  border: 1px solid #ddd;
+  border-bottom: 0;
+  height: 50px;
+  background-color: #f3f3f3;
+  line-height: 50px;
+  font-size: 18px;
+  box-sizing: border-box;
+  padding-left: 20px;
+}
 </style>

src/views/Alarm/chart/AlarmBar.vue

@@ -3,132 +3,158 @@
 </template>
 
 <script>
-import echarts from 'echarts';
-import { mapState } from 'vuex';
+import echarts from "echarts";
+import { mapState } from "vuex";
 export default {
   name: "AlarmBar",
   computed: {
-    ...mapState(['color'])
+    ...mapState(["color"]),
+  },
+  props: {
+    barData: {
+      type: Object,
+      default: () => ({
+        one: 0,
+        two: 0,
+        three: 0,
+      }),
+    },
   },
   data() {
     return {
-      myChart: null
-    }
+      myChart: null,
+    };
   },
   watch: {
     color(newVal) {
-      if(newVal) {
+      if (newVal) {
         this.myChart.clear();
         this.init();
       }
-    }
+    },
+    barData: {
+      handler(newVal) {
+        console.log(newVal);
+        this.myChart.clear();
+        this.init();
+      },
+    },
   },
   methods: {
     init() {
-      var salvProName =["一级","二级","三级"];
-      var salvProValue =[239,181,154];
+      var salvProName = ["一级", "二级", "三级"];
+      var salvProValue = [
+        this.barData.one,
+        this.barData.two,
+        this.barData.three,
+      ];
       let options = {
         grid: {
-          left: '2%',
-          right: '2%',
-          bottom: '2%',
-          top: '2%',
-          containLabel: true
+          left: "2%",
+          right: "2%",
+          bottom: "2%",
+          top: "2%",
+          containLabel: true,
         },
         tooltip: {
-          trigger: 'axis',
+          trigger: "axis",
           axisPointer: {
-            type: 'none'
+            type: "none",
           },
           formatter: function(params) {
-            return params[0].name  + ' : ' + params[0].value
-          }
+            return params[0].name + " : " + params[0].value;
+          },
         },
         xAxis: {
           show: false,
-          type: 'value'
+          type: "value",
         },
-        yAxis: [{
-          type: 'category',
-          inverse: true,
-          axisLabel: {
-            show: true,
-            textStyle: {
-              color: '#111'
+        yAxis: [
+          {
+            type: "category",
+            inverse: true,
+            axisLabel: {
+              show: true,
+              textStyle: {
+                color: "#111",
+              },
             },
+            splitLine: {
+              show: false,
+            },
+            axisTick: {
+              show: false,
+            },
+            axisLine: {
+              show: false,
+            },
+            data: salvProName,
           },
-          splitLine: {
-            show: false
-          },
-          axisTick: {
-            show: false
-          },
-          axisLine: {
-            show: false
-          },
-          data: salvProName
-        }, {
-          type: 'category',
-          inverse: true,
-          axisTick: 'none',
-          axisLine: 'none',
-          show: true,
-          axisLabel: {
-            textStyle: {
-              color: '#111',
-              fontSize: '12'
+          {
+            type: "category",
+            inverse: true,
+            axisTick: "none",
+            axisLine: "none",
+            show: true,
+            axisLabel: {
+              textStyle: {
+                color: "#111",
+                fontSize: "12",
+              },
             },
+            data: salvProValue,
           },
-          data:salvProValue
-        }],
-        series: [{
-          name: '值',
-          type: 'bar',
-          zlevel: 1,
-          itemStyle: {
-            normal: {
-              barBorderRadius: 30,
-              color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
-                offset: 0,
-                color: this.color
-              }, {
-                offset: 1,
-                color: this.color
-              }]),
+        ],
+        series: [
+          {
+            name: "值",
+            type: "bar",
+            zlevel: 1,
+            itemStyle: {
+              normal: {
+                barBorderRadius: 30,
+                color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
+                  {
+                    offset: 0,
+                    color: this.color,
+                  },
+                  {
+                    offset: 1,
+                    color: this.color,
+                  },
+                ]),
+              },
             },
+            barWidth: 20,
+            data: salvProValue,
           },
-          barWidth: 20,
-          data: salvProValue
-        },
           {
-            name: '背景',
-            type: 'bar',
+            name: "背景",
+            type: "bar",
             barWidth: 20,
-            barGap: '-100%',
+            barGap: "-100%",
             data: [],
             itemStyle: {
               normal: {
-                color: 'rgba(24,31,68,1)',
+                color: "rgba(24,31,68,1)",
                 barBorderRadius: 30,
-              }
+              },
             },
           },
-        ]
-      }
+        ],
+      };
       this.myChart.setOption(options);
     },
   },
   mounted() {
-    this.myChart = this.$echarts.init(document.getElementById('alarm-bar'));
+    this.myChart = this.$echarts.init(document.getElementById("alarm-bar"));
     this.init();
     let that = this;
-    window.addEventListener('resize', function() {
+    window.addEventListener("resize", function() {
       that.myChart.resize();
-    })
-  }
-}
+    });
+  },
+};
 </script>
 
-<style scoped>
-
-</style>
+<style scoped></style>

src/views/Alarm/chart/AlarmPie.vue

@@ -7,38 +7,52 @@ export default {
   name: "AlarmPie",
   data() {
     return {
-      myChart: null
-    }
+      myChart: null,
+    };
+  },
+  props: {
+    pieData: {
+      type: Array,
+      default: () => [],
+    },
   },
   methods: {
     init() {
-      let title = '报警总量';
-      let color = ['#0E7CE2', '#FF8352', '#E271DE', '#F8456B', '#00FFFF', '#4AEAB0'];
-      let echartData = [
-        {
-          name: '环境报警',
-          value: '3720',
-        },
-        {
-          name: '人员违规',
-          value: '2920',
-        },
-        {
-          name: '环境监测',
-          value: '2200',
-        },
-        {
-          name: '污水排放',
-          value: '1420',
-        },
-        {
-          name: '设备异常',
-          value: '1420',
-        },
+      let title = "报警总量";
+      let color = [
+        "#0E7CE2",
+        "#FF8352",
+        "#E271DE",
+        "#F8456B",
+        "#00FFFF",
+        "#4AEAB0",
       ];
-      let formatNumber = function (num) {
+      // let echartData = [
+      //   {
+      //     name: "环境报警",
+      //     value: "3720",
+      //   },
+      //   {
+      //     name: "人员违规",
+      //     value: "2920",
+      //   },
+      //   {
+      //     name: "环境监测",
+      //     value: "2200",
+      //   },
+      //   {
+      //     name: "污水排放",
+      //     value: "1420",
+      //   },
+      //   {
+      //     name: "设备异常",
+      //     value: "1420",
+      //   },
+      // ];
+      let echartData = this.pieData;
+      let formatNumber = function(num) {
         let reg = /(?=(\B)(\d{3})+$)/g;
-        return num.toString().replace(reg, ',');
+        return num.toString().replace(reg, ",");
       };
       let total = echartData.reduce((a, b) => {
         return a + b.value * 1;
@@ -46,22 +60,23 @@ export default {
       let options = {
         title: [
           {
-            text: '{name|' + title + '}\n{val|' + formatNumber(total) + '} ' + '条',
-            top: 'center',
-            left: '26%',
+            text:
+              "{name|" + title + "}\n{val|" + formatNumber(total) + "} " + "条",
+            top: "center",
+            left: "26%",
             textStyle: {
               rich: {
                 name: {
                   fontSize: 14,
-                  fontWeight: 'normal',
-                  color: '#666666',
+                  fontWeight: "normal",
+                  color: "#666666",
                   padding: [10, 0],
-                  textAlign: 'center'
+                  textAlign: "center",
                 },
                 val: {
                   fontSize: 32,
-                  fontWeight: 'bold',
-                  color: '#333333',
+                  fontWeight: "bold",
+                  color: "#333333",
                 },
               },
             },
@@ -69,56 +84,78 @@ export default {
         ],
         color: color,
         tooltip: {
-          trigger: 'item',
-          formatter: function (parms){
-            var str = parms.marker+""+parms.data.name+"</br>"+
-                "数量："+ parms.data.value+ '条' +"</br>"+
-                "占比："+ parms.percent+"%";
-            return  str ;
-          }
+          trigger: "item",
+          formatter: function(parms) {
+            var str =
+              parms.marker +
+              "" +
+              parms.data.name +
+              "</br>" +
+              "数量：" +
+              parms.data.value +
+              "条" +
+              "</br>" +
+              "占比：" +
+              parms.percent +
+              "%";
+            return str;
+          },
         },
         legend: {
-          orient: 'vertical',
-          left:'65%',
-          align:'left',
-          top:'middle',
+          orient: "vertical",
+          left: "65%",
+          align: "left",
+          top: "middle",
           icon: "circle",
           itemGap: 20,
           textStyle: {
-            color:'#8C8C8C'
+            color: "#8C8C8C",
           },
         },
         series: [
           {
-            type: 'pie',
-            radius: ['75%', '90%'],
-            center: ['35%', '50%'],
+            type: "pie",
+            radius: ["75%", "90%"],
+            center: ["35%", "50%"],
             data: echartData,
             hoverAnimation: false,
             itemStyle: {
               normal: {
-                borderColor: '#fff',
+                borderColor: "#fff",
                 borderWidth: 5,
               },
             },
           },
         ],
-      }
+      };
       this.myChart.setOption(options);
-    }
+    },
   },
   mounted() {
-    this.myChart = this.$echarts.init(document.getElementById('alarm-pie'))
-    this.init()
+    this.myChart = this.$echarts.init(document.getElementById("alarm-pie"));
+    this.init();
     let that = this;
     // 监听resize
     window.addEventListener("resize", function() {
       that.myChart.resize();
     });
-  }
-}
+  },
+  watch: {
+    color(newVal) {
+      if (newVal) {
+        this.myChart.clear();
+        this.init();
+      }
+    },
+    pieData: {
+      handler(newVal) {
+        console.log(newVal);
+        this.myChart.clear();
+        this.init();
+      },
+    },
+  },
+};
 </script>
 
-<style scoped>
-
-</style>
+<style scoped></style>