初步完成无人机巡检

src/apis/tab6.js

@@ -0,0 +1,46 @@
+import axios from '../utils/request'
+// 获取无人机监控
+export const aerialList = (data) => {
+  return axios({
+    method: 'post',
+    url: '/cms/aerial/list',
+    data
+  })
+}
+// 修改无人机监控
+export const aerialSave = (data) => {
+  return axios({
+    method: 'post',
+    url: '/cms/aerial/save',
+    data
+  })
+}
+// 获取无人机监控图-列表
+export const imgList = (data) => {
+  return axios({
+    method: 'post',
+    url: '/cms/aerial/img/list',
+    data
+  })
+}
+// 新增-修改无人机监控图
+export const aerialImgSave = (data) => {
+  return axios({
+    method: 'post',
+    url: '/cms/aerial/img/save',
+    data
+  })
+}
+// 无人机监控图-通过id获取详情
+export const imgDetailById = (id) => {
+  return axios({
+    url: `/cms/aerial/img/detail/${id}`
+  })
+}
+
+// 无人机监控图-删除
+export const imgRemove = (id) => {
+  return axios({
+    url: `/cms/aerial/img/remove/${id}`
+  })
+}

src/components/Tab5DialogThree.vue

@@ -22,7 +22,7 @@
           <i class="biaoshi"></i>
           <el-upload
             class="avatar-uploader"
-            :action="baseURL + '/cms/security/video/upload/img'"
+            :action="baseURL + '/cms/site/img/upload'"
             :headers="{
               token,
             }"

src/components/tab5Dialog.vue

@@ -39,7 +39,7 @@
           <i class="biaoshi"></i>
           <el-upload
             class="avatar-uploader"
-            :action="baseURL + '/cms/security/video/upload/img'"
+            :action="baseURL + '/cms/site/video/upload/img'"
             :headers="{
               token,
             }"
@@ -68,7 +68,7 @@
             multiple
             class="upload-demo"
             :file-list='fileList'
-            :action="baseURL + '/cms/security/video/upload/video'"
+            :action="baseURL + '/cms/site/video/upload/video'"
             :headers="{ token }"
             :before-upload="beforeFujian"
             :on-success="successFujian"

src/components/tab6Dialog.vue

@@ -0,0 +1,277 @@
+<template>
+  <div class="Tab6Dialog">
+    <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="year">
+          <i class="biaoshi2 biaoshi"></i>
+          <el-date-picker v-model="value2" type="month" placeholder="选择年-月">
+          </el-date-picker>
+        </el-form-item>
+        <!-- 图片和附件 -->
+        <el-form-item label="图片：">
+          <i class="biaoshi biaoshi3"></i>
+          <el-upload
+            class="avatar-uploader"
+            :action="baseURL + '/cms/aerial/upload'"
+            :headers="{
+              token,
+            }"
+            :show-file-list="false"
+            :before-upload="beforethumbUpload"
+            :on-success="upload_thumb_success"
+          >
+            <div v-if="ruleForm.thumb" class="imgdiv">
+              <img
+                style="width: 100%; height: 100%"
+                :src="baseURL + ruleForm.thumb"
+              />
+              <i
+                class="el-icon-circle-close"
+                @click.stop="ruleForm.thumb = ''"
+              ></i>
+            </div>
+            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
+          </el-upload>
+          <span>格式要求：支持png、jpg、gif和jpeg的图片格式；最大支持5M。</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 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 { imgDetailById, aerialImgSave } from '@/apis/tab6'
+
+import axios from '@/utils/request'
+export default {
+  name: 'Tab6Dialog',
+  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)
+            }
+          }
+        ]
+      },
+      time: '', // 服务器前缀地址
+      value2: '',
+      baseURL: '',
+      token: '',
+      ruleForm: {
+        id: '',
+        thumb: '',
+        year: '',
+        userUpdateTime: ''
+      },
+      rules: {
+      }
+    }
+  },
+  computed: {},
+  watch: {
+    value2 (val) {
+      const temp = this.moment(val).format('YYYY-MM')
+      this.ruleForm.year = temp
+    },
+    time (val) {
+      const temp = this.moment(val).format('YYYY-MM-DD HH:mm:ss')
+      this.ruleForm.userUpdateTime = temp
+    }
+  },
+  methods: {
+    // 点击关闭
+    btnX () {
+      this.$emit('update:isShow', false)
+      // 清空表单
+      this.ruleForm = {
+        id: '',
+        thumb: '',
+        year: '',
+        userUpdateTime: ''
+      }
+      this.value2 = ''
+    },
+    // 点击确定
+    async btnOk () {
+      if (this.ruleForm.thumb === '') { return this.$message.warning('封面图片不能为空') }
+      if (!this.value2) { return this.$message.warning('年份不能为空') }
+      if (this.time === null) return this.$message.warning('时间不能为空!')
+      const obj = { ...this.ruleForm }
+      const res = await aerialImgSave(obj)
+      if (res.code === 0) {
+        this.$message.success('操作成功')
+        // 通知父组件刷新页面
+        this.$emit('refresh')
+        this.btnX()
+      } else return this.$message.warning(res.msg)
+      // console.log(998, res)
+    },
+    // 上传图片
+    beforethumbUpload (file) {
+      // console.log(998, file)
+      // 限制图片大小和格式
+      const sizeOk = file.size / 1024 / 1024 < 5
+      const typeOk =
+        file.type === 'image/png' ||
+        file.type === 'image/jpeg' ||
+        file.type === 'image/gif'
+
+      return new Promise((resolve, reject) => {
+        if (!typeOk) {
+          this.$message.error('照片格式有误！')
+          reject(file)
+        } else if (!sizeOk) {
+          this.$message.error('照片大小超过5M！')
+          reject(file)
+        } else if (file.name.length > 32) {
+          this.$message.error('照片名字不能超过32个字！')
+          reject(file)
+        } else {
+          this.$message.success('上传成功')
+          resolve(file)
+        }
+      })
+    },
+    upload_thumb_success (data) {
+      // console.log('图片上传成功', data.data.urlPath)
+      this.ruleForm.thumb = data.data.urlPath
+    },
+    // 通过id获取详情---让父组件调用
+    async imgDetailById (id) {
+      const res = await imgDetailById(id)
+      this.ruleForm = res.data
+      this.value2 = res.data.year
+      // console.log(998, res)
+      this.getCurrentTime()
+    },
+    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实例）
+  created () {
+    // 获取服务器前缀地址
+    this.baseURL = axios.defaults.baseURL
+    // 获取用户token
+    this.token = localStorage.getItem('SZSBL_token')
+  },
+  // 生命周期 - 挂载完成（可以访问DOM元素）
+  mounted () {},
+  beforeCreate () {}, // 生命周期 - 创建之前
+  beforeMount () {}, // 生命周期 - 挂载之前
+  beforeUpdate () {}, // 生命周期 - 更新之前
+  updated () {}, // 生命周期 - 更新之后
+  beforeDestroy () {}, // 生命周期 - 销毁之前
+  destroyed () {}, // 生命周期 - 销毁完成
+  activated () {} // 如果页面有keep-alive缓存功能，这个函数会触发
+}
+</script>
+<style lang='less' scoped>
+.biaoshi::before {
+  top: -10px;
+}
+.biaoshi2::before {
+  top: -10px;
+  left: -64px;
+}
+.biaoshi3::before {
+  top: 0px;
+  left: -64px;
+}
+/deep/.el-upload-list {
+  width: 500px;
+}
+/deep/.el-icon-plus {
+  border: 1px dashed #ccc;
+}
+.avatar-uploader .el-upload {
+  border-radius: 6px;
+  cursor: pointer;
+  position: relative;
+  overflow: hidden;
+}
+.avatar-uploader .el-upload:hover {
+  border-color: #3e5eb3;
+}
+.avatar-uploader-icon {
+  font-size: 28px;
+  color: #8c939d;
+  width: 178px;
+  height: 178px;
+  line-height: 178px;
+  text-align: center;
+}
+/deep/.el-icon-circle-close {
+  font-size: 20px;
+}
+.imgdiv {
+  max-width: 400px;
+}
+</style>

src/router/index.js

@@ -85,6 +85,24 @@ const routes = [
         name: 'tab5Edit1',
         meta: { myInd: 5 },
         component: () => import('../views/tab5/edit1.vue')
+      },
+      {
+        path: 'tab6',
+        name: 'tab6',
+        meta: { myInd: 6 },
+        component: () => import('../views/tab6/index.vue')
+      },
+      {
+        path: 'tab6Edit1',
+        name: 'tab6Edit1',
+        meta: { myInd: 6 },
+        component: () => import('../views/tab6/edit1.vue')
+      },
+      {
+        path: 'tab6Edit2',
+        name: 'tab6Edit2',
+        meta: { myInd: 6 },
+        component: () => import('../views/tab6/edit2.vue')
       }
     ]
   }

src/views/tab6/edit1.vue

@@ -0,0 +1,222 @@
+<!--  -->
+<template>
+  <div class="tab6Edit1">
+    <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="check">
+          <el-input
+            v-model.number="ruleForm.check"
+            type="number"
+          ></el-input>
+          <span class="unit">次</span>
+        </el-form-item>
+        <el-form-item label="拍照次数：" prop="photo">
+          <el-input
+            v-model.number="ruleForm.photo"
+            type="number"
+          ></el-input>
+          <span class="unit">次</span>
+        </el-form-item>
+        <el-form-item label="录像次数：" prop="video">
+          <el-input
+            v-model.number="ruleForm.video"
+            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/tab6')">返 回</el-button>
+      <el-button type="primary" @click="btnOk">提 交</el-button>
+    </div>
+  </div>
+</template>
+
+<script>
+import { aerialSave } from '@/apis/tab6'
+export default {
+  name: 'tab6Edit1',
+  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: {
+        check: '',
+        photo: '',
+        video: ''
+      },
+      rules: {
+        check: [
+          { required: true, message: '不能为空', trigger: 'blur' },
+          { validator: validatePass, trigger: 'blur' }
+        ],
+        photo: [
+          { required: true, message: '不能为空', trigger: 'blur' },
+          { validator: validatePass, trigger: 'blur' }
+        ],
+        video: [
+          { 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 aerialSave(obj)
+        if (res.code === 0) {
+          this.$message.success('修改成功')
+          this.$router.push('/layout/tab6')
+        }
+        // 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>
+.tab6Edit1 {
+  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/tab6/edit2.vue

@@ -0,0 +1,225 @@
+<!--  -->
+<template>
+  <div class="tab6Edit2">
+    <div class="top">巡检管理</div>
+    <div class="from">
+      <el-form
+        :model="ruleForm"
+        :rules="rules"
+        ref="ruleForm"
+        label-width="140px"
+        class="demo-ruleForm"
+      >
+        <el-form-item label="可视化监拍设备：" prop="visualAerial">
+          <el-input
+            v-model.number="ruleForm.visualAerial"
+            type="number"
+          ></el-input>
+          <span class="unit">次</span>
+        </el-form-item>
+        <el-form-item label="跨视频监控：" prop="crossAerial">
+          <el-input
+            v-model.number="ruleForm.crossAerial"
+            type="number"
+          ></el-input>
+          <span class="unit">次</span>
+        </el-form-item>
+        <el-form-item label="螺旋式无人机：" prop="spiralAerial">
+          <el-input
+            v-model.number="ruleForm.spiralAerial"
+            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/tab6')">返 回</el-button>
+      <el-button type="primary" @click="btnOk">提 交</el-button>
+    </div>
+  </div>
+</template>
+
+<script>
+import { aerialSave } from '@/apis/tab6'
+export default {
+  name: 'tab6Edit2',
+  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: {
+        visualAerial: '',
+        crossAerial: '',
+        spiralAerial: ''
+      },
+      rules: {
+        visualAerial: [
+          { required: true, message: '不能为空', trigger: 'blur' },
+          { validator: validatePass, trigger: 'blur' }
+        ],
+        crossAerial: [
+          { required: true, message: '不能为空', trigger: 'blur' },
+          { validator: validatePass, trigger: 'blur' }
+        ],
+        spiralAerial: [
+          { 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 = 'patrol'
+        obj.id = Number(this.myData.id)
+        obj.data = JSON.stringify(this.ruleForm)
+        obj.userUpdateTime = this.disTime
+        const res = await aerialSave(obj)
+        if (res.code === 0) {
+          this.$message.success('修改成功')
+          this.$router.push({
+            path: '/layout/tab6',
+            query: { num: 3 }
+          })
+        }
+        // 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>
+.tab6Edit2 {
+  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/tab6/index.vue

@@ -0,0 +1,288 @@
+<template>
+  <div class="tab6">
+    <div class="search">
+      <div :class="{ active: topInd === 1 }" @click="topInd = 1">无人机监控</div>
+      <div :class="{ active: topInd === 2 }" @click="topInd = 2">无人机监控图</div>
+      <div :class="{ active: topInd === 3 }" @click="topInd = 3">巡检管理</div>
+    </div>
+    <!-- 表格1 -->
+    <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>
+    <!-- 表格2 -->
+    <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="year" label="年份"></el-table-column>
+        <el-table-column label="图片">
+          <template #default="{ row }">
+            <el-image
+              style="height: 50px"
+              :src="baseURL + row.thumb"
+              :preview-src-list="srcList"
+            >
+            </el-image>
+          </template>
+        </el-table-column>
+        <el-table-column prop="userUpdateTime" label="更新时间"></el-table-column>
+
+        <el-table-column label="操作" width="200">
+          <template #default="{ row }">
+            <el-button type="text" @click="editVideo(row.id)">修 改</el-button>
+            <el-button type="text" @click="delTow(row.id)">删 除</el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+    </div>
+    <!-- 表格3 -->
+    <div class="table" v-show="topInd === 3">
+      <el-table :data="tableData3" border style="width: 100%">
+        <el-table-column  label="序列" width="80">
+          <template #default>1</template>
+        </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>
+    <!-- 监控画面弹窗 -->
+    <Tab6Dialog
+      :isShow.sync="isShow"
+      @refresh="imgList(from2)"
+      ref="Tab6DialogRef"
+    />
+
+    <!-- 分页 -->
+    <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 axios from '@/utils/request'
+import Tab6Dialog from '@/components/tab6Dialog.vue'
+import { aerialList, imgList, imgRemove } from '@/apis/tab6'
+export default {
+  name: 'tab6',
+  components: { Tab6Dialog },
+  data () {
+    // 这里存放数据
+    return {
+      total: 0,
+      srcList: [], // 查看大图的图片数组合集
+      baseURL: '',
+      isShow: false,
+      topInd: 1,
+      from: {
+        pageNum: 1,
+        pageSize: 9999,
+        searchKey: '',
+        type: ''
+      },
+      from2: {
+        pageNum: 1,
+        pageSize: 15,
+        searchKey: ''
+      },
+      tableData: [],
+      tableData2: [],
+      tableData3: []
+    }
+  },
+  // 监听属性 类似于data概念
+  computed: {},
+  // 监控data中的数据变化
+  watch: {},
+  // 方法集合
+  methods: {
+    // 分页器方法
+    currentChange (val) {
+      // console.log('当前页改变了', val)
+      this.from2.pageNum = val
+      this.imgList(this.from2)
+    },
+    sizeChange (val) {
+      // console.log('条数改变了', val)
+      this.from2.pageNum = 1
+      this.from2.pageSize = val
+      this.imgList(this.from2)
+    },
+    // 点击监控画面新增
+    addVideo () {
+      this.isShow = true
+      this.$refs.Tab6DialogRef.getCurrentTime()
+    },
+    // 点击安防设备修改
+    edit (val, id) {
+      let temp = ''
+      if (id === 1) temp = '/layout/tab6Edit1'
+      else temp = '/layout/tab6Edit2'
+      this.$router.push({
+        path: temp,
+        query: { ...val, id }
+      })
+    },
+    // 监控画面删除
+    delTow (id) {
+      this.$confirm('确定删除吗?', '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      })
+        .then(async () => {
+          await imgRemove(id)
+          this.$message.success('删除成功!')
+          this.imgList(this.from2)
+        })
+        .catch(() => {
+          this.$message.info('已取消删除')
+        })
+    },
+    // 点击监控画面修改
+    editVideo (id) {
+      this.$refs.Tab6DialogRef.imgDetailById(id)
+      this.isShow = true
+    },
+    // 封装获取列表方法
+    async aerialList (data) {
+      const res = await aerialList(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.check}次；拍照次数：${temp.data.photo}次；录像次数：${temp.data.video}次`
+          this.tableData.push(temp)
+        } else {
+          temp.type = '巡检管理'
+          temp.conten = `可视化监拍设备：${temp.data.visualAerial}次；跨视频监控：${temp.data.crossAerial}次；螺旋式无人机：${temp.data.spiralAerial}次`
+          this.tableData3.push(temp)
+        }
+      })
+    },
+    // 封装获取监控画面列表方法
+    async imgList (data) {
+      this.srcList = []
+      const res = await imgList(data)
+      this.total = res.data.total
+      this.tableData2 = res.data.records
+      this.tableData2.forEach((v) => {
+        this.srcList.push(this.baseURL + v.thumb)
+      })
+      // console.log(998, res)
+    }
+
+  },
+  // 生命周期 - 创建完成（可以访问当前this实例）
+  created () {
+    // 判断是不是从edit3跳过来的
+    const temp = this.$route.query.num
+    if (temp) { this.topInd = Number(temp) }
+
+    // 获取服务器前缀地址
+    this.baseURL = axios.defaults.baseURL
+    this.aerialList(this.from)
+    this.imgList(this.from2)
+  },
+  // 生命周期 - 挂载完成（可以访问DOM元素）
+  mounted () {},
+  beforeCreate () {}, // 生命周期 - 创建之前
+  beforeMount () {}, // 生命周期 - 挂载之前
+  beforeUpdate () {}, // 生命周期 - 更新之前
+  updated () {}, // 生命周期 - 更新之后
+  beforeDestroy () {}, // 生命周期 - 销毁之前
+  destroyed () {}, // 生命周期 - 销毁完成
+  activated () {} // 如果页面有keep-alive缓存功能，这个函数会触发
+}
+</script>
+<style lang='less' scoped>
+.tab6 {
+
+  /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>