初步完成鹏城云脑-物联网设备

src/apis/tab4.js

@@ -0,0 +1,39 @@
+import axios from '../utils/request'
+// 获取鹏城云脑-物联网设备
+export const securityList = (data) => {
+  return axios({
+    method: 'post',
+    url: '/cms/lot/list',
+    data
+  })
+}
+// 修改
+export const lotSave = (data) => {
+  return axios({
+    method: 'post',
+    url: '/cms/lot/save',
+    data
+  })
+}
+// 今日报警-列表
+export const securityVideoList = (data) => {
+  return axios({
+    method: 'post',
+    url: '/cms/lot/alarm/list',
+    data
+  })
+}
+// 今日报警-编辑-新增
+export const alarmSave = (data) => {
+  return axios({
+    method: 'post',
+    url: '/cms/lot/alarm/save',
+    data
+  })
+}
+// 今日报警-详情通过id
+export const videoDetailById = (id) => {
+  return axios({
+    url: `/cms/lot/alarm/detail/${id}`
+  })
+}

src/components/tab3Dialog.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="tab3Dialog">
-    <el-dialog title="新增" :visible="isShow" @close="btnX()">
+    <el-dialog :title="ruleForm.id?'修改':'新增'" :visible="isShow" @close="btnX()">
       <el-form
         :model="ruleForm"
         :rules="rules"

src/components/tab4Dialog.vue

@@ -0,0 +1,203 @@
+<!--  -->
+<template>
+  <div class="tab4Dialog">
+    <el-dialog :title="ruleForm.id?'修改':'新增'" :visible="isShow" @close="btnX()">
+      <el-form
+        :model="ruleForm"
+        :rules="rules"
+        ref="ruleForm"
+        label-width="100px"
+        class="demo-ruleForm"
+      >
+        <el-form-item label="报警设备：" prop="name">
+          <el-input
+            v-model="ruleForm.name"
+            maxlength="10"
+            show-word-limit
+            style="width: 500px"
+          ></el-input>
+        </el-form-item>
+        <el-form-item label="报警位置：" prop="location">
+          <el-input
+            v-model="ruleForm.location"
+            maxlength="8"
+            show-word-limit
+            style="width: 500px"
+          ></el-input>
+        </el-form-item>
+        <el-form-item label="报警时间：">
+          <i class="biaoshi"></i>
+          <el-date-picker
+            v-model="timeBJ"
+            type="datetime"
+            placeholder="选择日期时间"
+            align="right"
+            :picker-options="pickerOptions"
+          >
+          </el-date-picker>
+        </el-form-item>
+        <el-form-item label="更新时间：">
+          <i class="biaoshi"></i>
+          <el-date-picker
+            v-model="time"
+            type="datetime"
+            placeholder="选择日期时间"
+            align="right"
+            :picker-options="pickerOptions"
+          >
+          </el-date-picker>
+        </el-form-item>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button @click="btnX">取 消</el-button>
+        <el-button type="primary" @click="btnOk">确 定</el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import { alarmSave, videoDetailById } from '@/apis/tab4'
+export default {
+  name: 'tab4Dialog',
+  props: {
+    isShow: {
+      type: Boolean,
+      default: false
+    }
+  },
+  components: {},
+  data () {
+    return {
+      pickerOptions: {
+        shortcuts: [
+          {
+            text: '今天',
+            onClick (picker) {
+              picker.$emit('pick', new Date())
+            }
+          },
+          {
+            text: '昨天',
+            onClick (picker) {
+              const date = new Date()
+              date.setTime(date.getTime() - 3600 * 1000 * 24)
+              picker.$emit('pick', date)
+            }
+          },
+          {
+            text: '一周前',
+            onClick (picker) {
+              const date = new Date()
+              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7)
+              picker.$emit('pick', date)
+            }
+          }
+        ]
+      },
+      disTimeBJ: '',
+      timeBJ: '',
+      time: '',
+      disTime: '',
+      ruleForm: {
+        id: '',
+        name: '',
+        location: ''
+      },
+      rules: {
+        name: [{ required: true, message: '不能为空', trigger: 'blur' }],
+        location: [{ required: true, message: '不能为空', trigger: 'blur' }]
+      }
+    }
+  },
+  watch: {
+    time (val) {
+      const temp = this.moment(val).format('YYYY-MM-DD HH:mm:ss')
+      this.disTime = temp
+    },
+    timeBJ (val) {
+      const temp = this.moment(val).format('YYYY-MM-DD HH:mm:ss')
+      this.disTimeBJ = temp
+    }
+  },
+  computed: {},
+  methods: {
+    btnX () {
+      this.$emit('update:isShow', false)
+      this.$refs.ruleForm.resetFields()
+      this.ruleForm = {
+        id: '',
+        name: '',
+        location: ''
+      }
+      this.timeBJ = ''
+    },
+    async btnOk () {
+      if (this.timeBJ === null) return this.$message.warning('报警时间不能为空!')
+      if (this.time === null) return this.$message.warning('更新时间不能为空!')
+      try {
+        await this.$refs.ruleForm.validate()
+        const obj = {}
+        if (this.ruleForm.id) obj.id = Number(this.ruleForm.id)
+        obj.location = this.ruleForm.location
+        obj.name = this.ruleForm.name
+        obj.userCreateTime = this.disTimeBJ
+        obj.userUpdateTime = this.disTime
+        const res = await alarmSave(obj)
+        if (res.code === 0) {
+          this.$message.success('操作成功')
+          // 通知父组件刷新页面
+          this.$emit('refresh')
+          this.btnX()
+        }
+        // console.log(999, res)
+        // console.log(777777777777, obj)
+      } catch (error) {
+        console.log(error)
+      }
+    },
+    getCurrentTime () {
+      // 获取当前时间并打印
+      var _this = this
+      const yy = new Date().getFullYear()
+      const mm = new Date().getMonth() + 1
+      const dd = new Date().getDate()
+      const hh = new Date().getHours()
+      const mf =
+        new Date().getMinutes() < 10
+          ? '0' + new Date().getMinutes()
+          : new Date().getMinutes()
+      const ss =
+        new Date().getSeconds() < 10
+          ? '0' + new Date().getSeconds()
+          : new Date().getSeconds()
+      _this.gettime = yy + '/' + mm + '/' + dd + ' ' + hh + ':' + mf + ':' + ss
+      this.time = _this.gettime
+      console.log(_this.gettime)
+    },
+    // 通过id获取详情---让父组件调用
+    async videoDetailById (id) {
+      const res = await videoDetailById(id)
+      this.ruleForm = res.data
+      this.timeBJ = res.data.userCreateTime
+      // console.log(998, res)
+      this.getCurrentTime()
+    }
+  },
+  // 生命周期 - 创建完成（可以访问当前this实例）
+  created () {
+  },
+  // 生命周期 - 挂载完成（可以访问DOM元素）
+  mounted () {},
+  beforeCreate () {}, // 生命周期 - 创建之前
+  beforeMount () {}, // 生命周期 - 挂载之前
+  beforeUpdate () {}, // 生命周期 - 更新之前
+  updated () {}, // 生命周期 - 更新之后
+  beforeDestroy () {}, // 生命周期 - 销毁之前
+  destroyed () {}, // 生命周期 - 销毁完成
+  activated () {} // 如果页面有keep-alive缓存功能，这个函数会触发
+}
+</script>
+<style lang='less' scoped>
+//@import url(); 引入公共css类
+</style>

src/router/index.js

@@ -55,6 +55,24 @@ const routes = [
         name: 'tab3Edit1',
         meta: { myInd: 3 },
         component: () => import('../views/tab3/edit1.vue')
+      },
+      {
+        path: 'tab4',
+        name: 'tab4',
+        meta: { myInd: 4 },
+        component: () => import('../views/tab4/index.vue')
+      },
+      {
+        path: 'tab4Edit1',
+        name: 'tab4Edit1',
+        meta: { myInd: 4 },
+        component: () => import('../views/tab4/edit1.vue')
+      },
+      {
+        path: 'tab4Edit2',
+        name: 'tab4Edit2',
+        meta: { myInd: 4 },
+        component: () => import('../views/tab4/edit2.vue')
       }
     ]
   }

src/views/tab4/edit1.vue

@@ -0,0 +1,234 @@
+<!--  -->
+<template>
+  <div class="tab4Edit1">
+    <div class="top">设备统计</div>
+    <div class="from">
+      <el-form
+        :model="ruleForm"
+        :rules="rules"
+        ref="ruleForm"
+        label-width="130px"
+        class="demo-ruleForm"
+      >
+        <el-form-item label="摄像头：" prop="camera">
+          <el-input
+            v-model.number="ruleForm.camera"
+            type="number"
+          ></el-input>
+          <span class="unit">个</span>
+        </el-form-item>
+        <el-form-item label="巡逻车：" prop="cruiser">
+          <el-input
+            v-model.number="ruleForm.cruiser"
+            type="number"
+          ></el-input>
+          <span class="unit">辆</span>
+        </el-form-item>
+        <el-form-item label="门禁锁：" prop="door">
+          <el-input
+            v-model.number="ruleForm.door"
+            type="number"
+          ></el-input>
+          <span class="unit">个</span>
+        </el-form-item>
+        <el-form-item label="无人机：" prop="aerial">
+          <el-input
+            v-model.number="ruleForm.aerial"
+            type="number"
+          ></el-input>
+          <span class="unit">辆</span>
+        </el-form-item>
+        <el-form-item label="更新时间：">
+          <i class="biaoshi"></i>
+          <el-date-picker
+            v-model="time"
+            type="datetime"
+            placeholder="选择日期时间"
+            align="right"
+            :picker-options="pickerOptions"
+          >
+          </el-date-picker>
+        </el-form-item>
+      </el-form>
+    </div>
+    <!-- 下面的按钮 -->
+    <div class="btn">
+      <el-button @click="$router.push('/layout/tab4')">返 回</el-button>
+      <el-button type="primary" @click="btnOk">提 交</el-button>
+    </div>
+  </div>
+</template>
+
+<script>
+import { lotSave } from '@/apis/tab4'
+export default {
+  name: 'tab4Edit1',
+  components: {},
+  data () {
+    // 这里存放数据
+    const validatePass = (rule, value, callback) => {
+      if (value > 99999999.99) {
+        callback(new Error('不能超过99999999.99'))
+      } else {
+        callback()
+      }
+    }
+    return {
+      pickerOptions: {
+        shortcuts: [
+          {
+            text: '今天',
+            onClick (picker) {
+              picker.$emit('pick', new Date())
+            }
+          },
+          {
+            text: '昨天',
+            onClick (picker) {
+              const date = new Date()
+              date.setTime(date.getTime() - 3600 * 1000 * 24)
+              picker.$emit('pick', date)
+            }
+          },
+          {
+            text: '一周前',
+            onClick (picker) {
+              const date = new Date()
+              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7)
+              picker.$emit('pick', date)
+            }
+          }
+        ]
+      },
+      disTime: '',
+      time: '',
+      myData: {},
+      ruleForm: {
+        camera: '',
+        cruiser: '',
+        door: '',
+        aerial: ''
+      },
+      rules: {
+        camera: [
+          { required: true, message: '不能为空', trigger: 'blur' },
+          { validator: validatePass, trigger: 'blur' }
+        ],
+        cruiser: [
+          { required: true, message: '不能为空', trigger: 'blur' },
+          { validator: validatePass, trigger: 'blur' }
+        ],
+        door: [
+          { required: true, message: '不能为空', trigger: 'blur' },
+          { validator: validatePass, trigger: 'blur' }
+        ],
+        aerial: [
+          { required: true, message: '不能为空', trigger: 'blur' },
+          { validator: validatePass, trigger: 'blur' }
+        ]
+      }
+    }
+  },
+  // 监听属性 类似于data概念
+  computed: {},
+  // 监控data中的数据变化
+  watch: {
+    time (val) {
+      const temp = this.moment(val).format('YYYY-MM-DD HH:mm:ss')
+      this.disTime = temp
+    }
+  },
+  // 方法集合
+  methods: {
+    // 点击提交
+    async btnOk () {
+      if (this.time === null) return this.$message.warning('时间不能为空!')
+      try {
+        await this.$refs.ruleForm.validate()
+        const obj = {}
+        obj.type = 'count'
+        obj.id = Number(this.myData.id)
+        obj.data = JSON.stringify(this.ruleForm)
+        obj.userUpdateTime = this.disTime
+        const res = await lotSave(obj)
+        if (res.code === 0) {
+          this.$message.success('修改成功')
+          this.$router.push('/layout/tab4')
+        }
+        // console.log(999, res)
+        // console.log(777777777777, obj)
+      } catch (error) {
+        console.log(error)
+      }
+    },
+    getCurrentTime () {
+      // 获取当前时间并打印
+      var _this = this
+      const yy = new Date().getFullYear()
+      const mm = new Date().getMonth() + 1
+      const dd = new Date().getDate()
+      const hh = new Date().getHours()
+      const mf =
+        new Date().getMinutes() < 10
+          ? '0' + new Date().getMinutes()
+          : new Date().getMinutes()
+      const ss =
+        new Date().getSeconds() < 10
+          ? '0' + new Date().getSeconds()
+          : new Date().getSeconds()
+      _this.gettime = yy + '/' + mm + '/' + dd + ' ' + hh + ':' + mf + ':' + ss
+      this.time = _this.gettime
+      // console.log(_this.gettime)
+    }
+  },
+  // 生命周期 - 创建完成（可以访问当前this实例）
+  async created () {
+    this.myData = this.$route.query
+    console.log(998, this.myData)
+    for (const k in this.myData) {
+      this.ruleForm[k] = this.myData[k]
+    }
+    this.getCurrentTime()
+    // console.log(999, this.$route.query)
+  },
+  // 生命周期 - 挂载完成（可以访问DOM元素）
+  mounted () {},
+  beforeCreate () {}, // 生命周期 - 创建之前
+  beforeMount () {}, // 生命周期 - 挂载之前
+  beforeUpdate () {}, // 生命周期 - 更新之前
+  updated () {}, // 生命周期 - 更新之后
+  beforeDestroy () {}, // 生命周期 - 销毁之前
+  destroyed () {}, // 生命周期 - 销毁完成
+  activated () {} // 如果页面有keep-alive缓存功能，这个函数会触发
+}
+</script>
+<style lang='less' scoped>
+.tab4Edit1 {
+  height: 100%;
+  position: relative;
+  .top {
+    height: 40px;
+    line-height: 40px;
+    background-color: #fbfbfb;
+    padding-left: 20px;
+  }
+  .from {
+    margin-top: 30px;
+    width: 50%;
+    .unit {
+      position: absolute;
+      right: -40px;
+      top: 0;
+    }
+  }
+  .btn {
+    display: flex;
+    justify-content: space-between;
+    width: 200px;
+    position: absolute;
+    left: 50%;
+    bottom: 30px;
+    transform: translateX(-50%);
+  }
+}
+</style>

src/views/tab4/edit2.vue

@@ -0,0 +1,282 @@
+<!--  -->
+<template>
+  <div class="tab4Edit2">
+    <div class="top">设备情况</div>
+    <div class="from">
+      <el-form
+        :model="ruleForm"
+        :rules="rules"
+        ref="ruleForm"
+        label-width="130px"
+        class="demo-ruleForm"
+      >
+        <el-form-item label="摄像头-启用：" prop="cameraStart">
+          <el-input
+            v-model.number="ruleForm.cameraStart"
+            type="number"
+          ></el-input>
+          <span class="unit">个</span>
+        </el-form-item>
+        <el-form-item label="摄像头-停用：" prop="cameraStop">
+          <el-input
+            v-model.number="ruleForm.cameraStop"
+            type="number"
+          ></el-input>
+          <span class="unit">个</span>
+        </el-form-item>
+        <el-form-item label="巡逻车-启用：" prop="cruiserStart">
+          <el-input
+            v-model.number="ruleForm.cruiserStart"
+            type="number"
+          ></el-input>
+          <span class="unit">辆</span>
+        </el-form-item>
+        <el-form-item label="巡逻车-停用：" prop="cruiserStop">
+          <el-input
+            v-model.number="ruleForm.cruiserStop"
+            type="number"
+          ></el-input>
+          <span class="unit">辆</span>
+        </el-form-item>
+        <el-form-item label="门禁锁-启用：" prop="doorStart">
+          <el-input
+            v-model.number="ruleForm.doorStart"
+            type="number"
+          ></el-input>
+          <span class="unit">个</span>
+        </el-form-item>
+        <el-form-item label="门禁锁-停用：" prop="doorStop">
+          <el-input
+            v-model.number="ruleForm.doorStop"
+            type="number"
+          ></el-input>
+          <span class="unit">个</span>
+        </el-form-item>
+        <el-form-item label="无人机-启用：" prop="aerialStart">
+          <el-input
+            v-model.number="ruleForm.aerialStart"
+            type="number"
+          ></el-input>
+          <span class="unit">辆</span>
+        </el-form-item>
+        <el-form-item label="无人机-停用：" prop="aerialStop">
+          <el-input
+            v-model.number="ruleForm.aerialStop"
+            type="number"
+          ></el-input>
+          <span class="unit">辆</span>
+        </el-form-item>
+        <el-form-item label="更新时间：">
+          <i class="biaoshi"></i>
+          <el-date-picker
+            v-model="time"
+            type="datetime"
+            placeholder="选择日期时间"
+            align="right"
+            :picker-options="pickerOptions"
+          >
+          </el-date-picker>
+        </el-form-item>
+      </el-form>
+    </div>
+    <!-- 下面的按钮 -->
+    <div class="btn">
+      <el-button @click="$router.push('/layout/tab4')">返 回</el-button>
+      <el-button type="primary" @click="btnOk">提 交</el-button>
+    </div>
+  </div>
+</template>
+
+<script>
+import { lotSave } from '@/apis/tab4'
+export default {
+  name: 'tab4Edit2',
+  components: {},
+  data () {
+    // 这里存放数据
+    const validatePass = (rule, value, callback) => {
+      if (value > 99999999.99) {
+        callback(new Error('不能超过99999999.99'))
+      } else {
+        callback()
+      }
+    }
+    return {
+      pickerOptions: {
+        shortcuts: [
+          {
+            text: '今天',
+            onClick (picker) {
+              picker.$emit('pick', new Date())
+            }
+          },
+          {
+            text: '昨天',
+            onClick (picker) {
+              const date = new Date()
+              date.setTime(date.getTime() - 3600 * 1000 * 24)
+              picker.$emit('pick', date)
+            }
+          },
+          {
+            text: '一周前',
+            onClick (picker) {
+              const date = new Date()
+              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7)
+              picker.$emit('pick', date)
+            }
+          }
+        ]
+      },
+      disTime: '',
+      time: '',
+      myData: {},
+      ruleForm: {
+        cameraStart: '',
+        cameraStop: '',
+        cruiserStart: '',
+        cruiserStop: '',
+        doorStart: '',
+        doorStop: '',
+        aerialStart: '',
+        aerialStop: ''
+      },
+      rules: {
+        cameraStart: [
+          { required: true, message: '不能为空', trigger: 'blur' },
+          { validator: validatePass, trigger: 'blur' }
+        ],
+        cameraStop: [
+          { required: true, message: '不能为空', trigger: 'blur' },
+          { validator: validatePass, trigger: 'blur' }
+        ],
+        cruiserStart: [
+          { required: true, message: '不能为空', trigger: 'blur' },
+          { validator: validatePass, trigger: 'blur' }
+        ],
+        cruiserStop: [
+          { required: true, message: '不能为空', trigger: 'blur' },
+          { validator: validatePass, trigger: 'blur' }
+        ],
+        doorStart: [
+          { required: true, message: '不能为空', trigger: 'blur' },
+          { validator: validatePass, trigger: 'blur' }
+        ],
+        doorStop: [
+          { required: true, message: '不能为空', trigger: 'blur' },
+          { validator: validatePass, trigger: 'blur' }
+        ],
+        aerialStart: [
+          { required: true, message: '不能为空', trigger: 'blur' },
+          { validator: validatePass, trigger: 'blur' }
+        ],
+        aerialStop: [
+          { required: true, message: '不能为空', trigger: 'blur' },
+          { validator: validatePass, trigger: 'blur' }
+        ]
+      }
+    }
+  },
+  // 监听属性 类似于data概念
+  computed: {},
+  // 监控data中的数据变化
+  watch: {
+    time (val) {
+      const temp = this.moment(val).format('YYYY-MM-DD HH:mm:ss')
+      this.disTime = temp
+    }
+  },
+  // 方法集合
+  methods: {
+    // 点击提交
+    async btnOk () {
+      if (this.time === null) return this.$message.warning('时间不能为空!')
+      try {
+        await this.$refs.ruleForm.validate()
+        const obj = {}
+        obj.type = 'info'
+        obj.id = Number(this.myData.id)
+        obj.data = JSON.stringify(this.ruleForm)
+        obj.userUpdateTime = this.disTime
+        const res = await lotSave(obj)
+        if (res.code === 0) {
+          this.$message.success('修改成功')
+          this.$router.push('/layout/tab4')
+        }
+        // console.log(999, res)
+        // console.log(777777777777, obj)
+      } catch (error) {
+        console.log(error)
+      }
+    },
+    getCurrentTime () {
+      // 获取当前时间并打印
+      var _this = this
+      const yy = new Date().getFullYear()
+      const mm = new Date().getMonth() + 1
+      const dd = new Date().getDate()
+      const hh = new Date().getHours()
+      const mf =
+        new Date().getMinutes() < 10
+          ? '0' + new Date().getMinutes()
+          : new Date().getMinutes()
+      const ss =
+        new Date().getSeconds() < 10
+          ? '0' + new Date().getSeconds()
+          : new Date().getSeconds()
+      _this.gettime = yy + '/' + mm + '/' + dd + ' ' + hh + ':' + mf + ':' + ss
+      this.time = _this.gettime
+      // console.log(_this.gettime)
+    }
+  },
+  // 生命周期 - 创建完成（可以访问当前this实例）
+  async created () {
+    this.myData = this.$route.query
+    console.log(998, this.myData)
+    for (const k in this.myData) {
+      this.ruleForm[k] = this.myData[k]
+    }
+    this.getCurrentTime()
+    // console.log(999, this.$route.query)
+  },
+  // 生命周期 - 挂载完成（可以访问DOM元素）
+  mounted () {},
+  beforeCreate () {}, // 生命周期 - 创建之前
+  beforeMount () {}, // 生命周期 - 挂载之前
+  beforeUpdate () {}, // 生命周期 - 更新之前
+  updated () {}, // 生命周期 - 更新之后
+  beforeDestroy () {}, // 生命周期 - 销毁之前
+  destroyed () {}, // 生命周期 - 销毁完成
+  activated () {} // 如果页面有keep-alive缓存功能，这个函数会触发
+}
+</script>
+<style lang='less' scoped>
+.tab4Edit2 {
+  height: 100%;
+  position: relative;
+  .top {
+    height: 40px;
+    line-height: 40px;
+    background-color: #fbfbfb;
+    padding-left: 20px;
+  }
+  .from {
+    margin-top: 30px;
+    width: 50%;
+    .unit {
+      position: absolute;
+      right: -40px;
+      top: 0;
+    }
+  }
+  .btn {
+    display: flex;
+    justify-content: space-between;
+    width: 200px;
+    position: absolute;
+    left: 50%;
+    bottom: 30px;
+    transform: translateX(-50%);
+  }
+}
+</style>

src/views/tab4/index.vue

@@ -0,0 +1,217 @@
+<template>
+  <div class="tab4">
+    <div class="search">
+      <div :class="{ active: topInd === 1 }" @click="topInd = 1">物联网设备</div>
+      <div :class="{ active: topInd === 2 }" @click="topInd = 2">今日报警</div>
+    </div>
+    <!-- 表格 -->
+    <div class="table" v-show="topInd === 1">
+      <el-table :data="tableData" border style="width: 100%">
+        <el-table-column prop="id" label="序列" width="80"></el-table-column>
+        <el-table-column
+          prop="type"
+          label="栏目类型"
+          width="240"
+        ></el-table-column>
+        <el-table-column prop="conten" label="数据字段"></el-table-column>
+        <el-table-column prop="time" label="更新时间" width="200">
+        </el-table-column>
+        <el-table-column label="操作" width="120">
+          <template #default="{ row }">
+            <el-button type="text" @click="edit(row.data, row.id)"
+              >修 改</el-button
+            >
+          </template>
+        </el-table-column>
+      </el-table>
+    </div>
+    <!-- 表格 -->
+    <div class="table" v-show="topInd === 2">
+      <div class="add">
+        <el-button type="primary" @click="addVideo">新 增</el-button>
+      </div>
+      <el-table :data="tableData2" border style="width: 100%">
+        <el-table-column label="序列" width="80">
+          <template slot-scope="scope">
+            {{ scope.$index + (from2.pageNum - 1) * from2.pageSize + 1 }}
+          </template>
+        </el-table-column>
+        <el-table-column prop="name" label="报警设备"></el-table-column>
+        <el-table-column prop="location" label="设备位置"></el-table-column>
+        <el-table-column prop="userCreateTime" label="报警时间"></el-table-column>
+        <el-table-column prop="userUpdateTime" label="更新时间"></el-table-column>
+        <el-table-column label="操作" width="120">
+          <template #default="{ row }">
+            <el-button type="text" @click="editVideo(row.id)">修 改</el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+    </div>
+    <!-- 新增弹窗 -->
+    <Tab4Dialog :isShow.sync="isShow" @refresh="securityVideoList(from2)" ref="Tab4DialogRef"/>
+    <!-- 分页 -->
+    <div class="paging" v-show="topInd === 2">
+      <span class="zong">共 {{total}} 条</span>
+      <el-pagination
+        layout="sizes,prev,pager,next,jumper"
+        :total="total"
+        :page-sizes="[15, 30, 45, 60]"
+        :current-page="from2.pageNum"
+        @current-change="currentChange"
+        @size-change="sizeChange"
+      >
+      </el-pagination>
+    </div>
+  </div>
+</template>
+
+<script>
+import Tab4Dialog from '@/components/tab4Dialog.vue'
+import { securityList, securityVideoList } from '@/apis/tab4'
+export default {
+  name: 'tab4',
+  components: { Tab4Dialog },
+  data () {
+    // 这里存放数据
+    return {
+      total: 0,
+      isShow: false,
+      topInd: 1,
+      from: {
+        pageNum: 1,
+        pageSize: 9999,
+        searchKey: '',
+        type: ''
+      },
+      from2: {
+        pageNum: 1,
+        pageSize: 15,
+        searchKey: ''
+      },
+      tableData: [],
+      tableData2: []
+    }
+  },
+  // 监听属性 类似于data概念
+  computed: {},
+  // 监控data中的数据变化
+  watch: {},
+  // 方法集合
+  methods: {
+    // 分页器方法
+    currentChange (val) {
+      // console.log('当前页改变了', val)
+      this.from2.pageNum = val
+      this.securityVideoList(this.from2)
+    },
+    sizeChange (val) {
+      // console.log('条数改变了', val)
+      this.from2.pageNum = 1
+      this.from2.pageSize = val
+      this.securityVideoList(this.from2)
+    },
+    // 点击监控画面新增
+    addVideo () {
+      this.isShow = true
+      this.$refs.Tab4DialogRef.getCurrentTime()
+    },
+    // 点击安防设备修改
+    edit (val, id) {
+      let temp = ''
+      if (id === 1) temp = '/layout/tab4Edit1'
+      else temp = '/layout/tab4Edit2'
+      this.$router.push({
+        path: temp,
+        query: { ...val, id }
+      })
+    },
+    // 点击监控画面修改
+    editVideo (id) {
+      this.$refs.Tab4DialogRef.videoDetailById(id)
+      this.isShow = true
+    },
+    // 封装获取列表方法
+    async securityList (data) {
+      const res = await securityList(data)
+      res.data.forEach((v) => {
+        const temp = {}
+        temp.id = v.id
+        temp.data = JSON.parse(v.data)
+        temp.time = v.userUpdateTime
+        if (v.id === 1) {
+          temp.type = '设备统计'
+          temp.conten = `摄像头：${temp.data.camera}个；巡逻车：${temp.data.cruiser}辆；门禁锁：${temp.data.door}个；无人机：${temp.data.aerial}辆`
+        } else {
+          temp.type = '设备情况'
+          temp.conten = `摄像头-启用：${temp.data.cameraStart}个；摄像头-停用：${temp.data.cameraStop}个；巡逻车-启用：${temp.data.cruiserStart}辆；巡逻车-停用：${temp.data.cruiserStop}辆；门禁锁-启用：${temp.data.doorStart}个；门禁锁-停用：${temp.data.doorStop}个；无人机-启用：${temp.data.aerialStart}辆；无人机-停用：${temp.data.aerialStop}辆`
+        }
+        this.tableData.push(temp)
+      })
+    },
+    // 封装获取监控画面列表方法
+    async securityVideoList (data) {
+      const res = await securityVideoList(data)
+      this.total = res.data.total
+      this.tableData2 = res.data.records
+    }
+  },
+  // 生命周期 - 创建完成（可以访问当前this实例）
+  created () {
+    this.securityList(this.from)
+    this.securityVideoList(this.from2)
+  },
+  // 生命周期 - 挂载完成（可以访问DOM元素）
+  mounted () {},
+  beforeCreate () {}, // 生命周期 - 创建之前
+  beforeMount () {}, // 生命周期 - 挂载之前
+  beforeUpdate () {}, // 生命周期 - 更新之前
+  updated () {}, // 生命周期 - 更新之后
+  beforeDestroy () {}, // 生命周期 - 销毁之前
+  destroyed () {}, // 生命周期 - 销毁完成
+  activated () {} // 如果页面有keep-alive缓存功能，这个函数会触发
+}
+</script>
+<style lang='less' scoped>
+.tab4 {
+  /deep/.el-image__preview {
+    object-fit: contain;
+  }
+  /deep/.el-table__body-wrapper{
+    max-height: 600px;
+    overflow-y: auto;
+  }
+  .search {
+    display: flex;
+    font-size: 24px;
+    margin-bottom: 30px;
+    & > div {
+      cursor: pointer;
+      margin-right: 40px;
+    }
+    .active {
+      font-weight: 700;
+      border-bottom: 5px solid #1482b4;
+      padding-bottom: 10px;
+    }
+  }
+  .table {
+    position: relative;
+    .add {
+      position: absolute;
+      right: 0;
+      top: -50px;
+    }
+  }
+    .paging {
+      width: auto;
+      display: flex;
+      position: absolute;
+      bottom: 40px;
+      right: 50px;
+      .zong{
+        margin-right: 20px;
+        margin-top: 4px;
+      }
+    }
+}
+</style>