初步完成工地监控

src/apis/tab3.js

@@ -37,3 +37,9 @@ export const videoDetailById = (id) => {
     url: `/cms/security/video/detail/${id}`
   })
 }
+// 删除
+export const videoRemove = (id) => {
+  return axios({
+    url: `/cms/security/video/remove/${id}`
+  })
+}

src/apis/tab4.js

@@ -37,3 +37,9 @@ export const videoDetailById = (id) => {
     url: `/cms/lot/alarm/detail/${id}`
   })
 }
+// 删除
+export const alarmRemove = (id) => {
+  return axios({
+    url: `/cms/lot/alarm/remove/${id}`
+  })
+}

src/apis/tab5.js

@@ -0,0 +1,73 @@
+import axios from '../utils/request'
+// 获取工地监控
+export const siteList = (data) => {
+  return axios({
+    method: 'post',
+    url: '/cms/site/list',
+    data
+  })
+}
+// 修改工地监控
+export const siteSave = (data) => {
+  return axios({
+    method: 'post',
+    url: '/cms/site/save',
+    data
+  })
+}
+// 获取监控画面列表
+export const siteVideoList = (data) => {
+  return axios({
+    method: 'post',
+    url: '/cms/site/video/list',
+    data
+  })
+}
+// 新增-修改监控画面列表
+export const siteVideoSave = (data) => {
+  return axios({
+    method: 'post',
+    url: '/cms/site/video/save',
+    data
+  })
+}
+// 监控画面列表-通过id获取详情
+export const videoDetailById = (id) => {
+  return axios({
+    url: `/cms/site/video/detail/${id}`
+  })
+}
+// 获取进度管理列表
+export const siteImgList = (data) => {
+  return axios({
+    method: 'post',
+    url: '/cms/site/img/list',
+    data
+  })
+}
+// 新增-修改监控画面列表
+export const siteImgSave = (data) => {
+  return axios({
+    method: 'post',
+    url: '/cms/site/img/save',
+    data
+  })
+}
+// 监控画面列表-通过id获取详情
+export const videoDetailById3 = (id) => {
+  return axios({
+    url: `/cms/site/img/detail/${id}`
+  })
+}
+// 监控画面-删除
+export const videoRemove = (id) => {
+  return axios({
+    url: `/cms/site/video/remove/${id}`
+  })
+}
+// 进度管理-删除
+export const imgRemove = (id) => {
+  return axios({
+    url: `/cms/site/img/remove/${id}`
+  })
+}

src/components/Tab5DialogThree.vue

@@ -0,0 +1,210 @@
+<template>
+  <div class="Tab5DialogThree">
+    <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"></i>
+          <el-upload
+            class="avatar-uploader"
+            :action="baseURL + '/cms/security/video/upload/img'"
+            :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>
+      <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 { videoDetailById3, siteImgSave } from '@/apis/tab5'
+
+import axios from '@/utils/request'
+export default {
+  name: 'Tab5DialogThree',
+  props: {
+    isShow: {
+      type: Boolean,
+      default: false
+    }
+  },
+  components: {},
+  data () {
+    return {
+      // 服务器前缀地址
+      value2: '',
+      baseURL: '',
+      token: '',
+      ruleForm: {
+        id: '',
+        thumb: '',
+        year: ''
+      },
+      rules: {
+      }
+    }
+  },
+  computed: {},
+  watch: {
+    value2 (val) {
+      const temp = this.moment(val).format('YYYY-MM')
+      this.ruleForm.year = temp
+    }
+  },
+  methods: {
+    // 点击关闭
+    btnX () {
+      this.$emit('update:isShow', false)
+      // 清空表单
+      this.ruleForm = {
+        id: '',
+        thumb: '',
+        year: ''
+      }
+      this.value2 = ''
+    },
+    // 点击确定
+    async btnOk () {
+      if (this.ruleForm.thumb === '') { return this.$message.warning('封面图片不能为空') }
+      if (!this.value2) { return this.$message.warning('年份不能为空') }
+      const obj = { ...this.ruleForm }
+      const res = await siteImgSave(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 videoDetailById3 (id) {
+      const res = await videoDetailById3(id)
+      this.ruleForm = res.data
+      this.value2 = res.data.year
+      // console.log(998, res)
+    }
+  },
+  // 生命周期 - 创建完成（可以访问当前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: 1px;
+}
+.biaoshi2::before {
+  top: -10px;
+  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/components/tab3Dialog.vue

@@ -133,7 +133,7 @@ export default {
         // 通知父组件刷新页面
         this.$emit('refresh')
         this.btnX()
-      }
+      } else this.$message.warning(res.msg)
       // console.log(998, res)
     },
     // 上传图片
@@ -179,7 +179,7 @@ export default {
           this.$message.error('视频名字不能超过32个字')
           reject(file)
         } else if (!sizeOk) {
-          this.$message.error('视频大小超过1BG！')
+          this.$message.error('视频大小超过1GB！')
           reject(file)
         } else if (!typeOk) {
           this.$message.error('视频格式有误！')

src/components/tab4Dialog.vue

@@ -149,7 +149,7 @@ export default {
           // 通知父组件刷新页面
           this.$emit('refresh')
           this.btnX()
-        }
+        } else this.$message.warning(res.msg)
         // console.log(999, res)
         // console.log(777777777777, obj)
       } catch (error) {

src/components/tab5Dialog.vue

@@ -0,0 +1,310 @@
+<template>
+  <div class="tab5Dialog">
+    <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="25"
+            show-word-limit
+            style="width: 500px"
+          ></el-input>
+        </el-form-item>
+        <el-form-item label="经度：" prop="lon">
+          <el-input
+            type="number"
+            v-model.number="ruleForm.lon"
+            maxlength="8"
+            show-word-limit
+            style="width: 500px"
+          ></el-input>
+        </el-form-item>
+        <el-form-item label="纬度：" prop="lat">
+          <el-input
+            type="number"
+            v-model.number="ruleForm.lat"
+            maxlength="8"
+            show-word-limit
+            style="width: 500px"
+          ></el-input>
+        </el-form-item>
+        <!-- 图片和附件 -->
+        <el-form-item label="封面图片：">
+          <i class="biaoshi"></i>
+          <el-upload
+            class="avatar-uploader"
+            :action="baseURL + '/cms/security/video/upload/img'"
+            :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-upload
+            multiple
+            class="upload-demo"
+            :file-list='fileList'
+            :action="baseURL + '/cms/security/video/upload/video'"
+            :headers="{ token }"
+            :before-upload="beforeFujian"
+            :on-success="successFujian"
+            :before-remove="beforeRemove"
+            :on-remove="handleRemove"
+            :limit="1"
+            :on-exceed="handleExceed"
+            :show-file-list="true"
+          >
+            <el-button size="small" type="primary">点击上传</el-button>
+            <div class="el-upload__tip" slot="tip">
+              支持AVI、mov、rmvb、rm、FLV、mp4、3GP等格式的视频文件，大小不超过1GB。
+            </div>
+          </el-upload>
+        </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 { videoDetailById, siteVideoSave } from '@/apis/tab5'
+
+import axios from '@/utils/request'
+export default {
+  name: 'tab5Dialog',
+  props: {
+    isShow: {
+      type: Boolean,
+      default: false
+    }
+  },
+  components: {},
+  data () {
+    // 这里存放数据
+    const validatePass = (rule, value, callback) => {
+      if (value > 99999999.99) {
+        callback(new Error('不能超过99999999.99'))
+      } else {
+        callback()
+      }
+    }
+    return {
+      fileList: [],
+      // 服务器前缀地址
+      baseURL: '',
+      token: '',
+      ruleForm: {
+        id: '',
+        name: '',
+        thumb: '',
+        video: '',
+        fileName: '',
+        lon: '',
+        lat: ''
+      },
+      rules: {
+        name: [{ required: true, message: '不能为空', trigger: 'blur' }],
+        lon: [{ required: true, message: '不能为空', trigger: 'blur' }, { validator: validatePass, trigger: 'blur' }],
+        lat: [{ required: true, message: '不能为空', trigger: 'blur' }, { validator: validatePass, trigger: 'blur' }]
+      }
+    }
+  },
+  computed: {},
+  methods: {
+    // 点击关闭
+    btnX () {
+      this.$emit('update:isShow', false)
+      // 清空表单
+      this.ruleForm = {
+        id: '',
+        name: '',
+        thumb: '',
+        video: '',
+        fileName: '',
+        lon: '',
+        lat: ''
+      }
+      this.$refs.ruleForm.resetFields()
+      this.fileList = []
+    },
+    // 点击确定
+    async btnOk () {
+      if (this.ruleForm.thumb === '') return this.$message.warning('封面图片不能为空')
+      if (this.ruleForm.video === '') return this.$message.warning('视频文件不能为空')
+      try {
+        await this.$refs.ruleForm.validate()
+        const obj = { ...this.ruleForm }
+        const res = await siteVideoSave(obj)
+        if (res.code === 0) {
+          this.$message.success('操作成功')
+          // 通知父组件刷新页面
+          this.$emit('refresh')
+          this.btnX()
+        } else this.$message.warning(res.msg)
+      } catch (error) {
+        console.log(error)
+      }
+      // 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
+    },
+    // 上传附件
+    beforeFujian (file) {
+      // console.log('附件上传前', file)
+      const sizeOk = file.size / 1024 / 1024 < 1024
+      const typeOk =
+        file.type === 'video/mp4' ||
+        file.type === 'video/avi' ||
+        file.type === 'video/mov' || file.type === 'video/rmvb' || file.type === 'video/rm' || file.type === 'video/flv' || file.type === 'video/3gp'
+      return new Promise((resolve, reject) => {
+        if (file.name.length > 32) {
+          this.$message.error('视频名字不能超过32个字')
+          reject(file)
+        } else if (!sizeOk) {
+          this.$message.error('视频大小超过1GB！')
+          reject(file)
+        } else if (!typeOk) {
+          this.$message.error('视频格式有误！')
+          reject(file)
+        } else {
+          resolve(file)
+        }
+      })
+    },
+    successFujian (file) {
+      console.log('上传附件成功', file)
+      if (file.code === 0) {
+        this.ruleForm.video = file.data.urlPath
+        this.ruleForm.fileName = file.data.fileName
+        this.$message.success('上传成功')
+      } else if (file.code === -1) {
+        this.$message.warning('上传失败，不支持的文件格式')
+      }
+    },
+    beforeRemove (file, fileList) {
+      if (file && file.status === 'success') {
+        return this.$confirm(`确定移除 ${file.name}？`)
+      }
+    },
+    handleRemove (file, fileList) {
+      this.ruleForm.video = ''
+      this.ruleForm.fileName = ''
+    },
+    handleExceed (files, fileList) {
+      this.$message.warning('只能上传一个视频，请删除原视频后操作')
+    },
+    // 通过id获取详情---让父组件调用
+    async videoDetailById (id) {
+      const res = await videoDetailById(id)
+      this.ruleForm = res.data
+      this.fileList = [{ name: res.data.fileName }]
+      // console.log(998, res)
+    }
+  },
+  // 生命周期 - 创建完成（可以访问当前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: 1px;
+}
+/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

@@ -73,6 +73,18 @@ const routes = [
         name: 'tab4Edit2',
         meta: { myInd: 4 },
         component: () => import('../views/tab4/edit2.vue')
+      },
+      {
+        path: 'tab5',
+        name: 'tab5',
+        meta: { myInd: 5 },
+        component: () => import('../views/tab5/index.vue')
+      },
+      {
+        path: 'tab5Edit1',
+        name: 'tab5Edit1',
+        meta: { myInd: 5 },
+        component: () => import('../views/tab5/edit1.vue')
       }
     ]
   }

src/views/tab3/edit1.vue

@@ -1,7 +1,7 @@
 <!--  -->
 <template>
   <div class="tab3Edit1">
-    <div class="top">网点视频监控</div>
+    <div class="top">安防设备</div>
     <div class="from">
       <el-form
         :model="ruleForm"

src/views/tab3/index.vue

@@ -40,7 +40,7 @@
         <el-table-column label="视频封面">
           <template #default="{ row }">
             <el-image
-              style="width: 100px; height: 50px"
+              style="height: 50px"
               :src="baseURL + row.thumb"
               :preview-src-list="srcList"
             >
@@ -58,9 +58,10 @@
             >
           </template>
         </el-table-column>
-        <el-table-column label="操作" width="120">
+        <el-table-column label="操作" width="200">
           <template #default="{ row }">
             <el-button type="text" @click="editVideo(row.id)">修 改</el-button>
+            <el-button type="text" @click="delVideo(row.id)">删 除</el-button>
           </template>
         </el-table-column>
       </el-table>
@@ -86,7 +87,7 @@
 <script>
 import axios from '@/utils/request'
 import Tab3Dialog from '@/components/tab3Dialog.vue'
-import { securityList, securityVideoList } from '@/apis/tab3'
+import { securityList, securityVideoList, videoRemove } from '@/apis/tab3'
 export default {
   name: 'tab3',
   components: { Tab3Dialog },
@@ -147,13 +148,29 @@ export default {
       this.$refs.Tab3DialogRef.videoDetailById(id)
       this.isShow = true
     },
+    // 点击删除
+    delVideo (id) {
+      this.$confirm('确定删除吗?', '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      })
+        .then(async () => {
+          await videoRemove(id)
+          this.$message.success('删除成功!')
+          this.securityVideoList(this.from2)
+        })
+        .catch(() => {
+          this.$message.info('已取消删除')
+        })
+    },
     // 封装获取列表方法
     async securityList (data) {
       const res = await securityList(data)
       res.data.forEach((v) => {
         const temp = {}
         temp.id = v.id
-        temp.type = '网点视频监控'
+        temp.type = '安防设备'
         temp.data = JSON.parse(v.data)
         temp.time = v.userUpdateTime
         temp.conten = `摄像头总数：${temp.data.total}个；运行中摄像头：${temp.data.alive}个；正常摄像头：${temp.data.normal}个；故障摄像头：${temp.data.error}个；室内摄像头：${temp.data.indoor}个；室外摄像头：${temp.data.outdoor}个；`
@@ -192,9 +209,7 @@ export default {
 </script>
 <style lang='less' scoped>
 .tab3 {
-  /deep/.el-image__preview {
-    object-fit: contain;
-  }
+
   /deep/.el-table__body-wrapper{
     max-height: 600px;
     overflow-y: auto;

src/views/tab4/index.vue

@@ -40,9 +40,10 @@
         <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">
+        <el-table-column label="操作" width="220">
           <template #default="{ row }">
             <el-button type="text" @click="editVideo(row.id)">修 改</el-button>
+            <el-button type="text" @click="delAlarm(row.id)">删 除</el-button>
           </template>
         </el-table-column>
       </el-table>
@@ -67,7 +68,7 @@
 
 <script>
 import Tab4Dialog from '@/components/tab4Dialog.vue'
-import { securityList, securityVideoList } from '@/apis/tab4'
+import { securityList, securityVideoList, alarmRemove } from '@/apis/tab4'
 export default {
   name: 'tab4',
   components: { Tab4Dialog },
@@ -130,6 +131,22 @@ export default {
       this.$refs.Tab4DialogRef.videoDetailById(id)
       this.isShow = true
     },
+    // 点击删除
+    delAlarm (id) {
+      this.$confirm('确定删除吗?', '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      })
+        .then(async () => {
+          await alarmRemove(id)
+          this.$message.success('删除成功!')
+          this.securityVideoList(this.from2)
+        })
+        .catch(() => {
+          this.$message.info('已取消删除')
+        })
+    },
     // 封装获取列表方法
     async securityList (data) {
       const res = await securityList(data)
@@ -173,9 +190,7 @@ export default {
 </script>
 <style lang='less' scoped>
 .tab4 {
-  /deep/.el-image__preview {
-    object-fit: contain;
-  }
+
   /deep/.el-table__body-wrapper{
     max-height: 600px;
     overflow-y: auto;

src/views/tab5/edit1.vue

@@ -0,0 +1,300 @@
+<!--  -->
+<template>
+  <div class="tab5Edit1">
+    <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="temp">
+          <el-input
+            style="width: 295px;margin-right:60px;"
+            v-model.number="ruleForm.temp"
+            type="number"
+          ></el-input>
+          <span class="unit">°C</span>
+          <!-- 下拉框 -->
+          <el-select v-model="ruleForm.tempScope" placeholder="请选择状态">
+            <el-option label="正常" value="正常"></el-option>
+            <el-option label="偏低" value="偏低"></el-option>
+            <el-option label="中等" value="中等"></el-option>
+            <el-option label="超标" value="超标"></el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="湿度：" prop="humidity">
+          <el-input
+            style="width: 295px;margin-right:60px;"
+            v-model.number="ruleForm.humidity"
+            type="number"
+          ></el-input>
+          <span class="unit">RH</span>
+          <!-- 下拉框 -->
+          <el-select v-model="ruleForm.humidityScope" placeholder="请选择状态">
+            <el-option label="正常" value="正常"></el-option>
+            <el-option label="偏低" value="偏低"></el-option>
+            <el-option label="中等" value="中等"></el-option>
+            <el-option label="超标" value="超标"></el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="PM2.5：" prop="pm25">
+          <el-input
+            style="width: 295px;margin-right:60px;"
+            v-model.number="ruleForm.pm25"
+            type="number"
+          ></el-input>
+          <span class="unit">μg/m3</span>
+          <!-- 下拉框 -->
+          <el-select v-model="ruleForm.pm25Scope" placeholder="请选择状态">
+            <el-option label="正常" value="正常"></el-option>
+            <el-option label="偏低" value="偏低"></el-option>
+            <el-option label="中等" value="中等"></el-option>
+            <el-option label="超标" value="超标"></el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="PM10：" prop="pm10">
+          <el-input v-model.number="ruleForm.pm10" type="number"></el-input>
+        </el-form-item>
+        <el-form-item label="噪音：" prop="noise">
+          <el-input v-model.number="ruleForm.noise" type="number"></el-input>
+        </el-form-item>
+        <el-form-item label="风速：" prop="windSpeed">
+          <el-input
+            v-model.number="ruleForm.windSpeed"
+            type="number"
+          ></el-input>
+        </el-form-item>
+        <el-form-item label="AIQ：" prop="aiq">
+          <el-input v-model.number="ruleForm.aiq" type="number"></el-input>
+        </el-form-item>
+        <el-form-item label="TSP：" prop="tsp">
+          <el-input v-model.number="ruleForm.tsp" type="number"></el-input>
+        </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/tab5')">返 回</el-button>
+      <el-button type="primary" @click="btnOk">提 交</el-button>
+    </div>
+  </div>
+</template>
+
+<script>
+import { siteSave } from '@/apis/tab5'
+export default {
+  name: 'tab5Edit1',
+  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: {
+        temp: '',
+        tempScope: '',
+        humidity: '',
+        humidityScope: '',
+        pm25: '',
+        pm25Scope: '',
+        pm10: '',
+        noise: '',
+        windSpeed: '',
+        aiq: '',
+        tsp: ''
+      },
+      rules: {
+        temp: [
+          { required: true, message: '不能为空', trigger: 'blur' },
+          { validator: validatePass, trigger: 'blur' }
+        ],
+        humidity: [
+          { required: true, message: '不能为空', trigger: 'blur' },
+          { validator: validatePass, trigger: 'blur' }
+        ],
+        pm25: [
+          { required: true, message: '不能为空', trigger: 'blur' },
+          { validator: validatePass, trigger: 'blur' }
+        ],
+        pm10: [
+          { required: true, message: '不能为空', trigger: 'blur' },
+          { validator: validatePass, trigger: 'blur' }
+        ],
+        noise: [
+          { required: true, message: '不能为空', trigger: 'blur' },
+          { validator: validatePass, trigger: 'blur' }
+        ],
+        windSpeed: [
+          { required: true, message: '不能为空', trigger: 'blur' },
+          { validator: validatePass, trigger: 'blur' }
+        ],
+        aiq: [
+          { required: true, message: '不能为空', trigger: 'blur' },
+          { validator: validatePass, trigger: 'blur' }
+        ],
+        tsp: [
+          { 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 = 1
+        obj.data = JSON.stringify(this.ruleForm)
+        obj.userUpdateTime = this.disTime
+        const res = await siteSave(obj)
+        if (res.code === 0) {
+          this.$message.success('修改成功')
+          this.$router.push('/layout/tab5')
+        }
+        // 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)
+    this.ruleForm = this.myData
+    this.getCurrentTime()
+    // console.log(999, this.$route.query)
+  },
+  // 生命周期 - 挂载完成（可以访问DOM元素）
+  mounted () {},
+  beforeCreate () {}, // 生命周期 - 创建之前
+  beforeMount () {}, // 生命周期 - 挂载之前
+  beforeUpdate () {}, // 生命周期 - 更新之前
+  updated () {}, // 生命周期 - 更新之后
+  beforeDestroy () {}, // 生命周期 - 销毁之前
+  destroyed () {}, // 生命周期 - 销毁完成
+  activated () {} // 如果页面有keep-humidity缓存功能，这个函数会触发
+}
+</script>
+<style lang='less' scoped>
+.tab5Edit1 {
+  /deep/.el-form-item__content {
+    width: 655px;
+  }
+  .is-required{
+    /deep/.el-input--suffix .el-input__inner{
+      width: 300px;
+    }
+  }
+  height: 100%;
+  position: relative;
+  .top {
+    height: 40px;
+    line-height: 40px;
+    background-color: #fbfbfb;
+    padding-left: 20px;
+  }
+  .from {
+    margin-top: 30px;
+    width: 50%;
+    .unit {
+      width: 50px;
+      text-align: center;
+      position: absolute;
+      right: 310px;
+      top: 0;
+    }
+  }
+  .btn {
+    display: flex;
+    justify-content: space-between;
+    width: 200px;
+    position: absolute;
+    left: 50%;
+    bottom: 30px;
+    transform: translateX(-50%);
+  }
+}
+</style>

src/views/tab5/index.vue

@@ -0,0 +1,369 @@
+<template>
+  <div class="tab5">
+    <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="name" label="视频名称"></el-table-column>
+        <el-table-column prop="lon" label="经度"></el-table-column>
+        <el-table-column prop="lat" label="纬度"></el-table-column>
+        <el-table-column label="视频封面" width="150">
+          <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 label="视频文件" width="100">
+          <template #default="{ row }">
+            <a
+              :href="baseURL + row.video"
+              target="_blank"
+              :download="baseURL + row.video"
+              class="mydown"
+              >下 载</a
+            >
+          </template>
+        </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">
+      <div class="add">
+        <el-button type="primary" @click="addVideoThree">新 增</el-button>
+      </div>
+      <el-table :data="tableData3" border style="width: 100%">
+        <el-table-column label="序列" width="80">
+          <template slot-scope="scope">
+            {{ scope.$index + (from3.pageNum - 1) * from3.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="srcList3"
+            >
+            </el-image>
+          </template>
+        </el-table-column>
+        <el-table-column label="操作" width="200">
+          <template #default="{ row }">
+            <el-button type="text" @click="editVideoThree(row.id)"
+              >修 改</el-button
+            >
+            <el-button type="text" @click="delThree(row.id)"
+              >删 除</el-button
+            >
+          </template>
+        </el-table-column>
+      </el-table>
+    </div>
+    <!-- 监控画面弹窗 -->
+    <Tab5Dialog
+      :isShow.sync="isShow"
+      @refresh="siteVideoList(from2)"
+      ref="Tab5DialogRef"
+    />
+    <!-- 进度管理弹窗 -->
+    <Tab5DialogThree
+      :isShow.sync="isShow3"
+      @refresh="siteImgList(from3)"
+      ref="Tab5DialogThreeRef"
+    />
+    <!-- 分页 -->
+    <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 class="paging" v-show="topInd === 3">
+      <span class="zong">共 {{ total3 }} 条</span>
+      <el-pagination
+        layout="sizes,prev,pager,next,jumper"
+        :total="total3"
+        :page-sizes="[15, 30, 45, 60]"
+        :current-page="from3.pageNum"
+        @current-change="currentChange3"
+        @size-change="sizeChange3"
+      >
+      </el-pagination>
+    </div>
+  </div>
+</template>
+
+<script>
+import axios from '@/utils/request'
+import Tab5Dialog from '@/components/tab5Dialog.vue'
+import Tab5DialogThree from '@/components/Tab5DialogThree.vue'
+import { siteList, siteVideoList, siteImgList, videoRemove, imgRemove } from '@/apis/tab5'
+export default {
+  name: 'tab5',
+  components: { Tab5Dialog, Tab5DialogThree },
+  data () {
+    // 这里存放数据
+    return {
+      total: 0,
+      total3: 0,
+      srcList: [], // 查看大图的图片数组合集
+      srcList3: [], // 查看大图的图片数组合集
+      baseURL: '',
+      isShow: false,
+      isShow3: false,
+      topInd: 1,
+      from: {
+        pageNum: 1,
+        pageSize: 9999,
+        searchKey: '',
+        type: ''
+      },
+      from2: {
+        pageNum: 1,
+        pageSize: 15,
+        searchKey: ''
+      },
+      from3: {
+        pageNum: 1,
+        pageSize: 15,
+        searchKey: ''
+      },
+      tableData: [],
+      tableData2: [],
+      tableData3: []
+    }
+  },
+  // 监听属性 类似于data概念
+  computed: {},
+  // 监控data中的数据变化
+  watch: {},
+  // 方法集合
+  methods: {
+    // ----------------------进度管理-----------------------------
+    addVideoThree () {
+      this.isShow3 = true
+    },
+    editVideoThree (id) {
+      this.$refs.Tab5DialogThreeRef.videoDetailById3(id)
+      this.isShow3 = true
+    },
+    delThree (id) {
+      this.$confirm('确定删除吗?', '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      })
+        .then(async () => {
+          await imgRemove(id)
+          this.$message.success('删除成功!')
+          this.siteImgList(this.from3)
+        })
+        .catch(() => {
+          this.$message.info('已取消删除')
+        })
+    },
+    // 分页器方法
+    currentChange3 (val) {
+      // console.log('当前页改变了', val)
+      this.from3.pageNum = val
+      this.siteImgList(this.from3)
+    },
+    sizeChange3 (val) {
+      // console.log('条数改变了', val)
+      this.from3.pageNum = 1
+      this.from3.pageSize = val
+      this.siteImgList(this.from3)
+    },
+    // ----------------------进度管理-----------------------------
+    // 分页器方法
+    currentChange (val) {
+      // console.log('当前页改变了', val)
+      this.from2.pageNum = val
+      this.siteVideoList(this.from2)
+    },
+    sizeChange (val) {
+      // console.log('条数改变了', val)
+      this.from2.pageNum = 1
+      this.from2.pageSize = val
+      this.siteVideoList(this.from2)
+    },
+    // 点击监控画面新增
+    addVideo () {
+      this.isShow = true
+    },
+    // 点击安防设备修改
+    edit (val, id) {
+      this.$router.push({
+        path: '/layout/tab5Edit1',
+        query: { ...val, id }
+      })
+    },
+    // 监控画面删除
+    delTow (id) {
+      this.$confirm('确定删除吗?', '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      })
+        .then(async () => {
+          await videoRemove(id)
+          this.$message.success('删除成功!')
+          this.siteVideoList(this.from2)
+        })
+        .catch(() => {
+          this.$message.info('已取消删除')
+        })
+    },
+    // 点击监控画面修改
+    editVideo (id) {
+      this.$refs.Tab5DialogRef.videoDetailById(id)
+      this.isShow = true
+    },
+    // 封装获取列表方法
+    async siteList (data) {
+      const res = await siteList(data)
+      res.data.forEach((v) => {
+        const temp = {}
+        temp.id = v.id
+        temp.type = '环境情况'
+        temp.data = JSON.parse(v.data)
+        temp.time = v.userUpdateTime
+        temp.conten = `温度：${temp.data.temp}°--${temp.data.tempScope}；湿度：${temp.data.humidity}RH--${temp.data.humidityScope}；PM2.5：${temp.data.pm25}个--${temp.data.pm25Scope}；PM10：${temp.data.pm10}个；噪音：${temp.data.noise}；风速：${temp.data.windSpeed}；AIQ：${temp.data.aiq}；TSP：${temp.data.tsp}`
+        this.tableData.push(temp)
+      })
+    },
+    // 封装获取监控画面列表方法
+    async siteVideoList (data) {
+      this.srcList = []
+      const res = await siteVideoList(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)
+    },
+    // 封装获取进度管理列表方法
+    async siteImgList (data) {
+      this.srcList = []
+      const res = await siteImgList(data)
+      this.total3 = res.data.total
+      this.tableData3 = res.data.records
+      this.tableData3.forEach((v) => {
+        this.srcList3.push(this.baseURL + v.thumb)
+      })
+      // console.log(998, res)
+    }
+  },
+  // 生命周期 - 创建完成（可以访问当前this实例）
+  created () {
+    // 获取服务器前缀地址
+    this.baseURL = axios.defaults.baseURL
+    this.siteList(this.from)
+    this.siteVideoList(this.from2)
+    this.siteImgList(this.from3)
+  },
+  // 生命周期 - 挂载完成（可以访问DOM元素）
+  mounted () {},
+  beforeCreate () {}, // 生命周期 - 创建之前
+  beforeMount () {}, // 生命周期 - 挂载之前
+  beforeUpdate () {}, // 生命周期 - 更新之前
+  updated () {}, // 生命周期 - 更新之后
+  beforeDestroy () {}, // 生命周期 - 销毁之前
+  destroyed () {}, // 生命周期 - 销毁完成
+  activated () {} // 如果页面有keep-alive缓存功能，这个函数会触发
+}
+</script>
+<style lang='less' scoped>
+.tab5 {
+
+  /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>