更改特定时间表格是否能选中

src/components/newTable/NewTable.vue

@@ -22,7 +22,8 @@
 
         <el-table-column 
           v-if="shows.showSelect" 
-          type="selection" 
+          type="selection"
+          :selectable="checkSelectable"
           align="center">
         </el-table-column>
 
@@ -60,7 +61,7 @@ export default {
     },
     shows: {
       type: Object,
-      default: () => ({ showIndex: true, showSelect: true})
+      default: () => ({ showIndex: true, showSelect: true, defaultProp: null})
     },
     tableItems: {
       type: Array,
@@ -75,6 +76,14 @@ export default {
     // TableContent
   },
   methods: {
+    // 特定条件不让其选中
+    checkSelectable(row) {
+      if(this.shows.defaultProp) {
+        return row[this.shows.defaultProp] === false
+      } else {
+        return true
+      }
+    },
     handleSelectionChange(rows) {
       this.$emit('selectionChange', rows)
     }

src/views/Alarm/AlarmWarn.vue

@@ -1,13 +1,203 @@
 <template>
-  <div>报警信息</div>
+  <div class="alarmWarn">
+    <div class="title" :style="{ color: color }">报警情况占比</div>
+    <div class="box-flex">
+      <div class="flex-left">
+        <alarm-pie></alarm-pie>
+      </div>
+      <div class="flex-left">
+        <alarm-bar></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">
+      <template #right>
+        <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>
+        <span v-else>设备异常</span>
+      </template>
+      <template #class="scope">
+        <span v-if="scope.row.class === 1">一级</span>
+        <span v-else>二级</span>
+      </template>
+      <template #handler="scope">
+        <span v-if="scope.row.dig">已处理</span>
+        <el-button v-else type="primary" size="mini">处理</el-button>
+      </template>
+    </new-table>
+  </div>
 </template>
 
 <script>
+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";
 export default {
-  name: "AlarmWarn"
+  name: "AlarmWarn",
+  components: {
+    AlarmPie,
+    AlarmBar,
+    XForm,
+    NewTable
+  },
+  computed: {
+    ...mapState(['color'])
+  },
+  data() {
+    return {
+      selectItems: [
+        {
+          id: 1,
+          type: 'select',
+          label: '报警类型：',
+          placeholder: '请选择报警类型',
+          field: 'areaId',
+          options: [],
+          col: 5
+        },
+        {
+          id: 3,
+          type: 'text',
+          text: '今日',
+          value: 1,
+          col: 1
+        },
+        {
+          id: 4,
+          type: 'text',
+          text: '本周',
+          value: 2,
+          col: 1
+        },
+        {
+          id: 5,
+          type: 'text',
+          text: '本月',
+          value: 3,
+          col: 1
+        },
+        {
+          id: 6,
+          type: 'datepicker',
+          placeholder: [],
+          field: 'value1',
+          col: 6
+        },
+        {
+          id: 7,
+          type: 'button',
+          text: '导出数据',
+          col: 2,
+          click: 'derive'
+        }
+      ],
+      day: 2,
+      title: '报警列表',
+      list: [
+        {
+          id: 1,
+          time: '2021-10-11 14:55:55',
+          type: 1,
+          class: 1,
+          content: '育肥1栋3单元温度过高',
+          dig: false,
+        },
+        {
+          id: 2,
+          time: '2021-10-11 14:55:55',
+          type: 2,
+          class: 2,
+          content: '育肥1栋2单元温度传感器异常',
+          dig: true,
+        }
+      ],
+      tableItems: [
+        {
+          prop: 'time',
+          label: '报警时间',
+          minWidth: '100',
+          slotName: 'time'
+        },
+        {
+          prop: 'type',
+          label: '报警类型',
+          minWidth: '100',
+          slotName: 'type'
+        },
+        {
+          prop: 'class',
+          label: '危险等级',
+          minWidth: '100',
+          slotName: 'class'
+        },
+        {
+          prop: 'content',
+          label: '报警内容',
+          minWidth: '100',
+          slotName: 'content'
+        },
+        {
+          label: '处理结果',
+          minWidth: '100',
+          slotName: 'handler'
+        }
+      ],
+      tableShows: {
+        showIndex: false,
+        showSelect: true,
+        defaultProp: 'dig'
+      },
+    }
+  },
+  methods: {
+    setDay(data) {
+      this.day = data;
+    },
+    onClickType() {},
+    // 批量处理
+    digAll() {}
+  },
 }
 </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;
+  }
 </style>

src/views/Alarm/chart/AlarmBar.vue

@@ -0,0 +1,134 @@
+<template>
+  <div id="alarm-bar" style="width: 100%; height: 100%;"></div>
+</template>
+
+<script>
+import echarts from 'echarts';
+import { mapState } from 'vuex';
+export default {
+  name: "AlarmBar",
+  computed: {
+    ...mapState(['color'])
+  },
+  data() {
+    return {
+      myChart: null
+    }
+  },
+  watch: {
+    color(newVal) {
+      if(newVal) {
+        this.myChart.clear();
+        this.init();
+      }
+    }
+  },
+  methods: {
+    init() {
+      var salvProName =["一级","二级","三级"];
+      var salvProValue =[239,181,154];
+      let options = {
+        grid: {
+          left: '2%',
+          right: '2%',
+          bottom: '2%',
+          top: '2%',
+          containLabel: true
+        },
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            type: 'none'
+          },
+          formatter: function(params) {
+            return params[0].name  + ' : ' + params[0].value
+          }
+        },
+        xAxis: {
+          show: false,
+          type: 'value'
+        },
+        yAxis: [{
+          type: 'category',
+          inverse: true,
+          axisLabel: {
+            show: true,
+            textStyle: {
+              color: '#111'
+            },
+          },
+          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'
+            },
+          },
+          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
+              }]),
+            },
+          },
+          barWidth: 20,
+          data: salvProValue
+        },
+          {
+            name: '背景',
+            type: 'bar',
+            barWidth: 20,
+            barGap: '-100%',
+            data: [],
+            itemStyle: {
+              normal: {
+                color: 'rgba(24,31,68,1)',
+                barBorderRadius: 30,
+              }
+            },
+          },
+        ]
+      }
+      this.myChart.setOption(options);
+    },
+  },
+  mounted() {
+    this.myChart = this.$echarts.init(document.getElementById('alarm-bar'));
+    this.init();
+    let that = this;
+    window.addEventListener('resize', function() {
+      that.myChart.resize();
+    })
+  }
+}
+</script>
+
+<style scoped>
+
+</style>

src/views/Alarm/chart/AlarmPie.vue

@@ -0,0 +1,123 @@
+<template>
+  <div id="alarm-pie" style="width: 100%; height: 100%"></div>
+</template>
+
+<script>
+export default {
+  name: "AlarmPie",
+  data() {
+    return {
+      myChart: null
+    }
+  },
+  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 formatNumber = function (num) {
+        let reg = /(?=(\B)(\d{3})+$)/g;
+        return num.toString().replace(reg, ',');
+      };
+      let total = echartData.reduce((a, b) => {
+        return a + b.value * 1;
+      }, 0);
+      let options = {
+        title: [
+          {
+            text: '{name|' + title + '}\n{val|' + formatNumber(total) + '} ' + '条',
+            top: 'center',
+            left: '22%',
+            textStyle: {
+              rich: {
+                name: {
+                  fontSize: 14,
+                  fontWeight: 'normal',
+                  color: '#666666',
+                  padding: [10, 0],
+                  textAlign: 'center'
+                },
+                val: {
+                  fontSize: 32,
+                  fontWeight: 'bold',
+                  color: '#333333',
+                },
+              },
+            },
+          },
+        ],
+        color: color,
+        tooltip: {
+          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',
+          icon: "circle",
+          textStyle: {
+            color:'#8C8C8C'
+          },
+        },
+        series: [
+          {
+            type: 'pie',
+            radius: ['75%', '90%'],
+            center: ['35%', '50%'],
+            data: echartData,
+            hoverAnimation: false,
+            itemStyle: {
+              normal: {
+                borderColor: '#fff',
+                borderWidth: 2,
+              },
+            },
+          },
+        ],
+      }
+      this.myChart.setOption(options);
+    }
+  },
+  mounted() {
+    this.myChart = this.$echarts.init(document.getElementById('alarm-pie'))
+    this.init()
+    let that = this;
+    // 监听resize
+    window.addEventListener("resize", function() {
+      that.myChart.resize();
+    });
+  }
+}
+</script>
+
+<style scoped>
+
+</style>