2021-12-06

src/views/Alarm/EventRem.vue

@@ -1,34 +1,46 @@
 <template>
-    <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>
+  <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 { mapState } from "vuex";
 import XForm from "@/components/XForm";
 import NewTable from "@/components/newTable/NewTable";
 import TableFooter from "@/components/TableFooter";
 export default {
   name: "EventRem",
   computed: {
-    ...mapState(['color'])
+    ...mapState(["color"]),
   },
   components: {
     XForm,
     NewTable,
-    TableFooter
+    TableFooter,
   },
   data() {
     return {
@@ -36,79 +48,79 @@ export default {
       selectItems: [
         {
           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: 'search'
-        }
+          click: "search",
+        },
       ],
-      title: '数据列表',
+      title: "数据列表",
       list: [
         {
           id: 1,
-          time: '2021-10-11 14:09:09',
-          location: '育肥1栋2层死猪通道',
-          content: '死猪装袋处理',
+          time: "2021-10-11 14:09:09",
+          location: "育肥1栋2层死猪通道",
+          content: "死猪装袋处理",
         },
         {
           id: 2,
-          time: '2021-10-11 14:09:09',
-          location: '卖猪台',
-          content: '猪只售卖',
-        }
+          time: "2021-10-11 14:09:09",
+          location: "卖猪台",
+          content: "猪只售卖",
+        },
       ],
       tableItems: [
         {
-          prop: 'time',
-          label: '时间',
-          minWidth: '100',
-          slotName: 'time'
+          prop: "time",
+          label: "时间",
+          minWidth: "100",
+          slotName: "time",
         },
         {
-          prop: 'location',
-          label: '位置',
-          minWidth: '100',
-          slotName: 'location'
+          prop: "location",
+          label: "位置",
+          minWidth: "100",
+          slotName: "location",
         },
         {
-          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,
@@ -117,7 +129,7 @@ export default {
       total: 0,
       pageNum: 1,
       pageSize: 20,
-    }
+    };
   },
   methods: {
     // 修改size
@@ -127,35 +139,35 @@ export default {
     },
     // 修改页数
     pageChange(val) {
-      this.pageNum= val;
+      this.pageNum = val;
       this.init();
     },
     init() {},
     setDay(data) {
-      this.day = data;
+      this.day = data.type;
     },
     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;
-  }
+.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/ViolationUser.vue

@@ -1,40 +1,52 @@
 <template>
   <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">
+    <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="">
+        <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>
+      :totals="total"
+      :size="pageSize"
+      @sizeChange="sizeChange"
+      @pageChange="pageChange"
+    ></table-footer>
   </div>
 </template>
 
 <script>
-import { mapState } from 'vuex';
+import { mapState } from "vuex";
 import XForm from "@/components/XForm";
 import NewTable from "@/components/newTable/NewTable";
 import TableFooter from "@/components/TableFooter";
 export default {
   name: "ViolationUser",
   computed: {
-    ...mapState(['color'])
+    ...mapState(["color"]),
   },
   components: {
     XForm,
     NewTable,
-    TableFooter
+    TableFooter,
   },
   data() {
     return {
@@ -42,85 +54,85 @@ export default {
       selectItems: [
         {
           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: 'search'
-        }
+          click: "search",
+        },
       ],
-      title: '数据列表',
+      title: "数据列表",
       list: [
         {
           id: 1,
-          time: '2021-10-11 14:09:09',
-          location: '育肥1栋2层死猪通道',
-          content: '死猪装袋处理',
+          time: "2021-10-11 14:09:09",
+          location: "育肥1栋2层死猪通道",
+          content: "死猪装袋处理",
         },
         {
           id: 2,
-          time: '2021-10-11 14:09:09',
-          location: '卖猪台',
-          content: '猪只售卖',
-        }
+          time: "2021-10-11 14:09:09",
+          location: "卖猪台",
+          content: "猪只售卖",
+        },
       ],
       tableItems: [
         {
-          prop: 'time',
-          label: '时间',
-          minWidth: '100',
-          slotName: 'time'
+          prop: "time",
+          label: "时间",
+          minWidth: "100",
+          slotName: "time",
         },
         {
-          prop: 'img',
-          label: '照片',
-          minWidth: '100',
-          slotName: 'img'
+          prop: "img",
+          label: "照片",
+          minWidth: "100",
+          slotName: "img",
         },
         {
-          prop: 'location',
-          label: '位置',
-          minWidth: '100',
-          slotName: 'location'
+          prop: "location",
+          label: "位置",
+          minWidth: "100",
+          slotName: "location",
         },
         {
-          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,
@@ -129,7 +141,7 @@ export default {
       total: 0,
       pageNum: 1,
       pageSize: 20,
-    }
+    };
   },
   methods: {
     // 修改size
@@ -139,35 +151,35 @@ export default {
     },
     // 修改页数
     pageChange(val) {
-      this.pageNum= val;
+      this.pageNum = val;
       this.init();
     },
     init() {},
     setDay(data) {
-      this.day = data;
+      this.day = data.type;
     },
     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;
-  }
+.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/alarm-set/AlarmForm.vue

@@ -1,7 +1,7 @@
 <!--
  * @Author: your name
  * @Date: 2021-11-29 16:41:38
- * @LastEditTime: 2021-12-01 15:56:30
+ * @LastEditTime: 2021-12-06 15:11:12
  * @LastEditors: Please set LastEditors
  * @Description: 报警设置的 各个报警号码
  * @FilePath: \hyyfClient\src\views\Alarm\alarm-set\AlarmForm.vue
@@ -57,6 +57,11 @@
           label="接收号码："
           :prop="'thirdPhones.' + index + '.phone'"
           :key="domain.key"
+          :rules="{
+            pattern: /^[1][3,4,5,7,8][0-9]{9}$/,
+            message: '请输入正确的手机号',
+            trigger: 'blur',
+          }"
         >
           <el-input
             v-model="alarmForm.thirdPhones[index].phone"
@@ -136,6 +141,7 @@ export default {
       });
     },
     addPhonesAction() {
+      // this.$refs[alarmForm]
       const secondPhones = this.alarmForm.secondPhones.reduce((prev, item) => {
         return prev + item.phone + ",";
       }, "");