违规报警

src/views/Alarm/AlarmWarn.vue

@@ -25,9 +25,46 @@
       </template>
       <template #handler="scope">
         <span v-if="scope.row.dig">已处理</span>
-        <el-button v-else type="primary" size="mini">处理</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>
+    <el-dialog
+        :title=" digType ? '处理' : '批量处理'"
+        :visible.sync="dialogVisible"
+        width="30%">
+      <div>
+        <el-form ref="form" :model="form" :rules="rules" label-width="100px" size="mini">
+          <el-form-item label="报警时间" v-if="digType">
+            <span>{{alarmDig.time}}</span>
+          </el-form-item>
+          <el-form-item label="报警内容"  v-if="digType">
+            <el-input
+                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-select>
+          </el-form-item>
+          <el-form-item label="用户名" prop="account">
+            <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-dialog>
   </div>
 </template>
 
@@ -37,13 +74,15 @@ 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";
 export default {
   name: "AlarmWarn",
   components: {
     AlarmPie,
     AlarmBar,
     XForm,
-    NewTable
+    NewTable,
+    TableFooter
   },
   computed: {
     ...mapState(['color'])
@@ -152,15 +191,59 @@ export default {
         showSelect: true,
         defaultProp: 'dig'
       },
+      total: 0,
+      pageNum: 1,
+      pageSize: 20,
+      dialogVisible: false,
+      form: {},
+      rules: {},
+      // 判断是否是批量操作还是单个
+      digType: true,
+      // 单个处理数据
+      alarmDig: {},
+      options: [
+        {
+          label: '略过',
+          value: 1
+        },
+        {
+          label: '加速处理',
+          value: 2
+        },
+        {
+          label: '...',
+          value: 3
+        }
+      ],
+      userName: localStorage.getItem('UserName')
     }
   },
   methods: {
+    // 修改size
+    sizeChange(val) {
+      this.pageSize = val;
+      this.init();
+    },
+    // 修改页数
+    pageChange(val) {
+      this.pageNum= val;
+      this.init();
+    },
+    init() {},
     setDay(data) {
       this.day = data;
     },
     onClickType() {},
+    dig(item) {
+      this.digType = true;
+      this.dialogVisible = true;
+      this.alarmDig = item;
+    },
     // 批量处理
-    digAll() {}
+    digAll() {
+      this.digType = false;
+    },
+    onSubmit() {}
   },
 }
 </script>

src/views/Alarm/EnvWarn.vue

@@ -1,13 +1,164 @@
 <template>
-  <div>环境监测报警</div>
+  <div class="envWarn">
+    <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">导出数据</el-button>
+      </template>
+      <template #handler="scope">
+        <el-button type="text" @click="open(scope.row)">未处理</el-button>
+      </template>
+    </new-table>
+    <table-footer
+        :totals="total"
+        :size="pageSize"
+        @sizeChange="sizeChange"
+        @pageChange="pageChange"></table-footer>
+  </div>
 </template>
 
 <script>
+import { mapState } from 'vuex';
+import XForm from "@/components/XForm";
+import NewTable from "@/components/newTable/NewTable";
+import TableFooter from "@/components/TableFooter";
 export default {
-  name: "EnvWarn"
+  name: "EnvWarn",
+  computed: {
+    ...mapState(['color'])
+  },
+  components: {
+    XForm,
+    NewTable,
+    TableFooter
+  },
+  data() {
+    return {
+      day: 2,
+      selectItems: [
+        {
+          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: 'search'
+        }
+      ],
+      title: '数据列表',
+      list: [
+        {
+          id: 1,
+          time: '2021-10-11 14:09:09',
+          location: '育肥1栋2层死猪通道',
+          content: '温度过高',
+        },
+        {
+          id: 2,
+          time: '2021-10-11 14:09:09',
+          location: '卖猪台',
+          content: '温度过高',
+        }
+      ],
+      tableItems: [
+        {
+          prop: 'time',
+          label: '时间',
+          minWidth: '100',
+          slotName: 'time'
+        },
+        {
+          prop: 'location',
+          label: '位置',
+          minWidth: '100',
+          slotName: 'location'
+        },
+        {
+          prop: 'content',
+          label: '内容',
+          minWidth: '100',
+          slotName: 'content'
+        },
+        {
+          label: '处理结果',
+          minWidth: '100',
+          slotName: 'handler'
+        }
+      ],
+      tableShows: {
+        showIndex: false,
+        showSelect: false,
+      },
+      total: 0,
+      pageNum: 1,
+      pageSize: 20,
+    }
+  },
+  methods: {
+    // 修改size
+    sizeChange(val) {
+      this.pageSize = val;
+      this.init();
+    },
+    // 修改页数
+    pageChange(val) {
+      this.pageNum= val;
+      this.init();
+    },
+    init() {},
+    setDay(data) {
+      this.day = data;
+    },
+    onClickType() {},
+    open() {},
+  },
 }
 </script>
 
 <style scoped>
-
+  .envWarn {
+    width: 100%;
+    height: 100%;
+    box-sizing: border-box;
+    padding: 20px 20px 0 20px;
+  }
+  .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/EventRem.vue

@@ -1,13 +1,161 @@
 <template>
-    <div>事件提醒</div>
+    <div class="eventRem">
+      <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 #handler="scope">
+          <el-button type="text" @click="open(scope.row)">视频回看</el-button>
+        </template>
+      </new-table>
+      <table-footer
+          :totals="total"
+          :size="pageSize"
+          @sizeChange="sizeChange"
+          @pageChange="pageChange"></table-footer>
+    </div>
 </template>
 
 <script>
+import { mapState } from 'vuex';
+import XForm from "@/components/XForm";
+import NewTable from "@/components/newTable/NewTable";
+import TableFooter from "@/components/TableFooter";
 export default {
-  name: "EventRem"
+  name: "EventRem",
+  computed: {
+    ...mapState(['color'])
+  },
+  components: {
+    XForm,
+    NewTable,
+    TableFooter
+  },
+  data() {
+    return {
+      day: 2,
+      selectItems: [
+        {
+          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: 'search'
+        }
+      ],
+      title: '数据列表',
+      list: [
+        {
+          id: 1,
+          time: '2021-10-11 14:09:09',
+          location: '育肥1栋2层死猪通道',
+          content: '死猪装袋处理',
+        },
+        {
+          id: 2,
+          time: '2021-10-11 14:09:09',
+          location: '卖猪台',
+          content: '猪只售卖',
+        }
+      ],
+      tableItems: [
+        {
+          prop: 'time',
+          label: '时间',
+          minWidth: '100',
+          slotName: 'time'
+        },
+        {
+          prop: 'location',
+          label: '位置',
+          minWidth: '100',
+          slotName: 'location'
+        },
+        {
+          prop: 'content',
+          label: '内容',
+          minWidth: '100',
+          slotName: 'content'
+        },
+        {
+          label: '操作',
+          minWidth: '100',
+          slotName: 'handler'
+        }
+      ],
+      tableShows: {
+        showIndex: false,
+        showSelect: false,
+      },
+      total: 0,
+      pageNum: 1,
+      pageSize: 20,
+    }
+  },
+  methods: {
+    // 修改size
+    sizeChange(val) {
+      this.pageSize = val;
+      this.init();
+    },
+    // 修改页数
+    pageChange(val) {
+      this.pageNum= val;
+      this.init();
+    },
+    init() {},
+    setDay(data) {
+      this.day = data;
+    },
+    onClickType() {},
+    open() {},
+  }
 }
 </script>
 
 <style scoped>
-
+  .eventRem {
+    width: 100%;
+    height: 100%;
+    box-sizing: border-box;
+    padding: 20px 20px 0 20px;
+  }
+  .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/SewageWarn.vue

@@ -1,13 +1,158 @@
 <template>
-  <div>污水排放报警</div>
+  <div class="sewageWarn">
+    <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">导出数据</el-button>
+      </template>
+      <template #handler="scope">
+        <el-button type="text" @click="open(scope.row)">未处理</el-button>
+      </template>
+    </new-table>
+    <table-footer
+        :totals="total"
+        :size="pageSize"
+        @sizeChange="sizeChange"
+        @pageChange="pageChange"></table-footer>
+  </div>
 </template>
 
 <script>
+import { mapState } from 'vuex';
+import XForm from "@/components/XForm";
+import NewTable from "@/components/newTable/NewTable";
+import TableFooter from "@/components/TableFooter";
 export default {
-  name: "SewageWarn"
+  name: "SewageWarn",
+  computed: {
+    ...mapState(['color'])
+  },
+  components: {
+    XForm,
+    NewTable,
+    TableFooter
+  },
+  data() {
+    return {
+      day: 2,
+      selectItems: [
+        {
+          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: 'search'
+        }
+      ],
+      title: '数据列表',
+      list: [
+        {
+          id: 1,
+          time: '2021-10-11 14:09:09',
+          location: '育肥1栋2层死猪通道',
+          content: '总氮量超过阈值',
+        },
+        {
+          id: 2,
+          time: '2021-10-11 14:09:09',
+          location: '卖猪台',
+          content: '化学需氧量超过阈值',
+        }
+      ],
+      tableItems: [
+        {
+          prop: 'time',
+          label: '时间',
+          minWidth: '100',
+          slotName: 'time'
+        },
+        {
+          prop: 'content',
+          label: '内容',
+          minWidth: '100',
+          slotName: 'content'
+        },
+        {
+          label: '处理结果',
+          minWidth: '100',
+          slotName: 'handler'
+        }
+      ],
+      tableShows: {
+        showIndex: false,
+        showSelect: false,
+      },
+      total: 0,
+      pageNum: 1,
+      pageSize: 20,
+    }
+  },
+  methods: {
+    // 修改size
+    sizeChange(val) {
+      this.pageSize = val;
+      this.init();
+    },
+    // 修改页数
+    pageChange(val) {
+      this.pageNum= val;
+      this.init();
+    },
+    init() {},
+    setDay(data) {
+      this.day = data;
+    },
+    onClickType() {},
+    open() {},
+  },
 }
 </script>
 
 <style scoped>
-
+  .sewageWarn {
+    width: 100%;
+    height: 100%;
+    box-sizing: border-box;
+    padding: 20px 20px 0 20px;
+  }
+  .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/ViolationUser.vue

@@ -1,13 +1,173 @@
 <template>
-  <div>人员违规报警</div>
+  <div class="violation">
+    <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">导出数据</el-button>
+      </template>
+      <template #img="scope">
+        <img :src="scope.row.img" alt="">
+      </template>
+      <template #handler="scope">
+        <el-button type="text" @click="open(scope.row)">加入白名单</el-button>
+      </template>
+    </new-table>
+    <table-footer
+        :totals="total"
+        :size="pageSize"
+        @sizeChange="sizeChange"
+        @pageChange="pageChange"></table-footer>
+  </div>
 </template>
 
 <script>
+import { mapState } from 'vuex';
+import XForm from "@/components/XForm";
+import NewTable from "@/components/newTable/NewTable";
+import TableFooter from "@/components/TableFooter";
 export default {
-  name: "ViolationUser"
+  name: "ViolationUser",
+  computed: {
+    ...mapState(['color'])
+  },
+  components: {
+    XForm,
+    NewTable,
+    TableFooter
+  },
+  data() {
+    return {
+      day: 2,
+      selectItems: [
+        {
+          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: 'search'
+        }
+      ],
+      title: '数据列表',
+      list: [
+        {
+          id: 1,
+          time: '2021-10-11 14:09:09',
+          location: '育肥1栋2层死猪通道',
+          content: '死猪装袋处理',
+        },
+        {
+          id: 2,
+          time: '2021-10-11 14:09:09',
+          location: '卖猪台',
+          content: '猪只售卖',
+        }
+      ],
+      tableItems: [
+        {
+          prop: 'time',
+          label: '时间',
+          minWidth: '100',
+          slotName: 'time'
+        },
+        {
+          prop: 'img',
+          label: '照片',
+          minWidth: '100',
+          slotName: 'img'
+        },
+        {
+          prop: 'location',
+          label: '位置',
+          minWidth: '100',
+          slotName: 'location'
+        },
+        {
+          prop: 'content',
+          label: '事件',
+          minWidth: '100',
+          slotName: 'content'
+        },
+        {
+          label: '操作',
+          minWidth: '100',
+          slotName: 'handler'
+        }
+      ],
+      tableShows: {
+        showIndex: false,
+        showSelect: false,
+      },
+      total: 0,
+      pageNum: 1,
+      pageSize: 20,
+    }
+  },
+  methods: {
+    // 修改size
+    sizeChange(val) {
+      this.pageSize = val;
+      this.init();
+    },
+    // 修改页数
+    pageChange(val) {
+      this.pageNum= val;
+      this.init();
+    },
+    init() {},
+    setDay(data) {
+      this.day = data;
+    },
+    onClickType() {},
+    open() {},
+  },
 }
 </script>
 
 <style scoped>
-
+  .violation {
+    width: 100%;
+    height: 100%;
+    box-sizing: border-box;
+    padding: 20px 20px 0 20px;
+  }
+  .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/AlarmPie.vue

@@ -48,7 +48,7 @@ export default {
           {
             text: '{name|' + title + '}\n{val|' + formatNumber(total) + '} ' + '条',
             top: 'center',
-            left: '22%',
+            left: '26%',
             textStyle: {
               rich: {
                 name: {
@@ -83,6 +83,7 @@ export default {
           align:'left',
           top:'middle',
           icon: "circle",
+          itemGap: 20,
           textStyle: {
             color:'#8C8C8C'
           },
@@ -97,7 +98,7 @@ export default {
             itemStyle: {
               normal: {
                 borderColor: '#fff',
-                borderWidth: 2,
+                borderWidth: 5,
               },
             },
           },