暂时完成-鹏城云脑-安防管理

src/apis/tab2.js

@@ -0,0 +1,17 @@
+import axios from '../utils/request'
+// 鹏城云脑-能耗管理
+export const energyList = (data) => {
+  return axios({
+    method: 'post',
+    url: '/cms/energy/list',
+    data
+  })
+}
+// 修改
+export const energySave = (data) => {
+  return axios({
+    method: 'post',
+    url: '/cms/energy/save',
+    data
+  })
+}

src/apis/tab3.js

@@ -0,0 +1,39 @@
+import axios from '../utils/request'
+// 获取鹏城云脑-安防管理
+export const securityList = (data) => {
+  return axios({
+    method: 'post',
+    url: '/cms/security/list',
+    data
+  })
+}
+// 修改
+export const securitySave = (data) => {
+  return axios({
+    method: 'post',
+    url: '/cms/security/save',
+    data
+  })
+}
+// 监控画面-列表
+export const securityVideoList = (data) => {
+  return axios({
+    method: 'post',
+    url: '/cms/security/video/list',
+    data
+  })
+}
+// 监控画面-编辑-新增
+export const videoSave = (data) => {
+  return axios({
+    method: 'post',
+    url: '/cms/security/video/save',
+    data
+  })
+}
+// 监控画面-详情通过id
+export const videoDetailById = (id) => {
+  return axios({
+    url: `/cms/security/video/detail/${id}`
+  })
+}

src/assets/css/base.css

@@ -9,6 +9,22 @@ body {
 ul li {
   list-style: none;
 }
+a {
+  text-decoration:none ;
+  color: #66b1ff;
+}
+.biaoshi{
+  position: relative;
+  font-style:normal
+}
+.biaoshi::before{
+  position: absolute;
+  top: -10px;
+  left: -94px;
+  content: '*';
+  color: #F56C6C;
+}
+
 .el-button--primary{
   background-color: #1482b4;
   border-color: #1482b4;

src/components/tab3Dialog.vue

@@ -0,0 +1,273 @@
+<template>
+  <div class="tab3Dialog">
+    <el-dialog title="新增" :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="封面图片：">
+          <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, videoSave } from '@/apis/tab3'
+
+import axios from '@/utils/request'
+export default {
+  name: 'tab3Dialog',
+  props: {
+    isShow: {
+      type: Boolean,
+      default: false
+    }
+  },
+  components: {},
+  data () {
+    return {
+      fileList: [],
+      // 服务器前缀地址
+      baseURL: '',
+      token: '',
+      ruleForm: {
+        id: '',
+        name: '',
+        thumb: '',
+        video: '',
+        fileName: ''
+      },
+      rules: {
+        name: [{ required: true, message: '不能为空', trigger: 'blur' }]
+      }
+    }
+  },
+  computed: {},
+  methods: {
+    // 点击关闭
+    btnX () {
+      this.$emit('update:isShow', false)
+      // 清空表单
+      this.ruleForm = {
+        id: '',
+        name: '',
+        thumb: '',
+        video: '',
+        fileName: ''
+      }
+      this.fileList = []
+    },
+    // 点击确定
+    async btnOk () {
+      if (this.ruleForm.name.trim() === '') return this.$message.warning('标题不能为空')
+      if (this.ruleForm.thumb === '') return this.$message.warning('封面图片不能为空')
+      if (this.ruleForm.video === '') return this.$message.warning('视频文件不能为空')
+      const obj = { ...this.ruleForm }
+      const res = await videoSave(obj)
+      if (res.code === 0) {
+        this.$message.success('操作成功')
+        // 通知父组件刷新页面
+        this.$emit('refresh')
+        this.btnX()
+      }
+      // 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('视频大小超过1BG！')
+          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

@@ -31,6 +31,30 @@ const routes = [
         name: 'tab2',
         meta: { myInd: 2 },
         component: () => import('../views/tab2/index.vue')
+      },
+      {
+        path: 'tab2Edit1',
+        name: 'tab2Edit1',
+        meta: { myInd: 2 },
+        component: () => import('../views/tab2/edit1.vue')
+      },
+      {
+        path: 'tab2Edit2',
+        name: 'tab2Edit2',
+        meta: { myInd: 2 },
+        component: () => import('../views/tab2/edit2.vue')
+      },
+      {
+        path: 'tab3',
+        name: 'tab3',
+        meta: { myInd: 3 },
+        component: () => import('../views/tab3/index.vue')
+      },
+      {
+        path: 'tab3Edit1',
+        name: 'tab3Edit1',
+        meta: { myInd: 3 },
+        component: () => import('../views/tab3/edit1.vue')
       }
     ]
   }

src/views/tab1/edit.vue

@@ -53,6 +53,7 @@
           <span class="unit2" v-else>人</span>
         </el-form-item>
         <el-form-item label="更新时间：">
+          <i class="biaoshi"></i>
           <el-date-picker
             v-model="time"
             type="datetime"

src/views/tab1/index.vue

@@ -94,7 +94,5 @@ export default {
     align-items: center;
     display: flex;
   }
-  .table{
-  }
 }
 </style>

src/views/tab2/edit1.vue

@@ -0,0 +1,222 @@
+<!--  -->
+<template>
+  <div class="tab2Edit1">
+    <div class="top">{{myData.type}}</div>
+    <div class="from">
+      <el-form
+        :model="ruleForm"
+        :rules="rules"
+        ref="ruleForm"
+        label-width="130px"
+        class="demo-ruleForm"
+      >
+        <el-form-item label="用电总量：" prop="1">
+          <el-input
+            v-model.number="ruleForm[1]"
+            type="number"
+          ></el-input>
+          <span class="unit">kwh</span>
+        </el-form-item>
+        <el-form-item label="今日用电总量：" prop="2">
+          <el-input
+            v-model.number="ruleForm[2]"
+            type="number"
+          ></el-input>
+          <span class="unit">kwh</span>
+        </el-form-item>
+        <el-form-item label="同比节能：" prop="3">
+          <el-input
+            v-model.number="ruleForm[3]"
+            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/tab2')">返 回</el-button>
+      <el-button type="primary" @click="btnOk">提 交</el-button>
+    </div>
+  </div>
+</template>
+
+<script>
+import { energySave } from '@/apis/tab2'
+export default {
+  name: 'tab2Edit1',
+  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: {
+        1: '', // 用电总量
+        2: '', // 今日用电总量
+        3: '' // 同比节能
+      },
+      rules: {
+        1: [
+          { required: true, message: '不能为空', trigger: 'blur' },
+          { validator: validatePass, trigger: 'blur' }
+        ],
+        2: [
+          { required: true, message: '不能为空', trigger: 'blur' },
+          { validator: validatePass, trigger: 'blur' }
+        ],
+        3: [
+          { 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 = 'detail'
+        obj.id = Number(this.myData.id)
+        obj.data = JSON.stringify(this.ruleForm)
+        obj.userUpdateTime = this.disTime
+        const res = await energySave(obj)
+        if (res.code === 0) {
+          this.$message.success('修改成功')
+          this.$router.push('/layout/tab2')
+        }
+        // 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.data) {
+      this.ruleForm[k] = this.myData.data[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>
+.tab2Edit1 {
+  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/tab2/edit2.vue

@@ -0,0 +1,340 @@
+<!--  -->
+<template>
+  <div class="tab2Edit2">
+    <div class="top">{{myData.type}}</div>
+    <div class="from">
+      <el-form
+        :model="ruleForm"
+        :rules="rules"
+        ref="ruleForm"
+        label-width="100px"
+        class="demo-ruleForm"
+      >
+        <el-form-item label="1月：" prop="1">
+          <el-input
+            v-model.number="ruleForm[1]"
+            type="number"
+          ></el-input>
+          <span class="unit">kwh</span>
+        </el-form-item>
+        <el-form-item label="2月：" prop="2">
+          <el-input
+            v-model.number="ruleForm[2]"
+            type="number"
+          ></el-input>
+          <span class="unit">kwh</span>
+        </el-form-item>
+        <el-form-item label="3月：" prop="3">
+          <el-input
+            v-model.number="ruleForm[3]"
+            type="number"
+          ></el-input>
+          <span class="unit">kwh</span>
+        </el-form-item>
+        <el-form-item label="4月：" prop="4">
+          <el-input
+            v-model.number="ruleForm[4]"
+            type="number"
+          ></el-input>
+          <span class="unit">kwh</span>
+        </el-form-item>
+        <el-form-item label="5月：" prop="5">
+          <el-input
+            v-model.number="ruleForm[5]"
+            type="number"
+          ></el-input>
+          <span class="unit">kwh</span>
+        </el-form-item>
+        <el-form-item label="6月：" prop="6">
+          <el-input
+            v-model.number="ruleForm[6]"
+            type="number"
+          ></el-input>
+          <span class="unit">kwh</span>
+        </el-form-item>
+        <el-form-item label="7月：" prop="7">
+          <el-input
+            v-model.number="ruleForm[7]"
+            type="number"
+          ></el-input>
+          <span class="unit">kwh</span>
+        </el-form-item>
+        <el-form-item label="8月：" prop="8">
+          <el-input
+            v-model.number="ruleForm[8]"
+            type="number"
+          ></el-input>
+          <span class="unit">kwh</span>
+        </el-form-item>
+        <el-form-item label="9月：" prop="9">
+          <el-input
+            v-model.number="ruleForm[9]"
+            type="number"
+          ></el-input>
+          <span class="unit">kwh</span>
+        </el-form-item>
+        <el-form-item label="10月：" prop="10">
+          <el-input
+            v-model.number="ruleForm[10]"
+            type="number"
+          ></el-input>
+          <span class="unit">kwh</span>
+        </el-form-item>
+        <el-form-item label="11月：" prop="11">
+          <el-input
+            v-model.number="ruleForm[11]"
+            type="number"
+          ></el-input>
+          <span class="unit">kwh</span>
+        </el-form-item>
+        <el-form-item label="12月：" prop="12">
+          <el-input
+            v-model.number="ruleForm[12]"
+            type="number"
+          ></el-input>
+          <span class="unit">kwh</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/tab2')">返 回</el-button>
+      <el-button type="primary" @click="btnOk">提 交</el-button>
+    </div>
+  </div>
+</template>
+
+<script>
+import { energySave } from '@/apis/tab2'
+export default {
+  name: 'tab2Edit2',
+  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: {
+        1: '',
+        2: '',
+        3: '',
+        4: '',
+        5: '',
+        6: '',
+        7: '',
+        8: '',
+        9: '',
+        10: '',
+        11: '',
+        12: ''
+      },
+      rules: {
+        1: [
+          { required: true, message: '不能为空', trigger: 'blur' },
+          { validator: validatePass, trigger: 'blur' }
+        ],
+        2: [
+          { required: true, message: '不能为空', trigger: 'blur' },
+          { validator: validatePass, trigger: 'blur' }
+        ],
+        3: [
+          { required: true, message: '不能为空', trigger: 'blur' },
+          { validator: validatePass, trigger: 'blur' }
+        ],
+        4: [
+          { required: true, message: '不能为空', trigger: 'blur' },
+          { validator: validatePass, trigger: 'blur' }
+        ],
+        5: [
+          { required: true, message: '不能为空', trigger: 'blur' },
+          { validator: validatePass, trigger: 'blur' }
+        ],
+        6: [
+          { required: true, message: '不能为空', trigger: 'blur' },
+          { validator: validatePass, trigger: 'blur' }
+        ],
+        7: [
+          { required: true, message: '不能为空', trigger: 'blur' },
+          { validator: validatePass, trigger: 'blur' }
+        ],
+        8: [
+          { required: true, message: '不能为空', trigger: 'blur' },
+          { validator: validatePass, trigger: 'blur' }
+        ],
+        9: [
+          { required: true, message: '不能为空', trigger: 'blur' },
+          { validator: validatePass, trigger: 'blur' }
+        ],
+        10: [
+          { required: true, message: '不能为空', trigger: 'blur' },
+          { validator: validatePass, trigger: 'blur' }
+        ],
+        11: [
+          { required: true, message: '不能为空', trigger: 'blur' },
+          { validator: validatePass, trigger: 'blur' }
+        ],
+        12: [
+          { required: true, message: '不能为空', trigger: 'blur' },
+          { validator: validatePass, trigger: 'blur' }
+        ]
+      },
+      typeSwitch: {
+        '实时用电监控-当前值': 'current',
+        '实时用电监控-近三年均值': 'yearAvg',
+        '月度节能情况-同比增长': 'monthUp',
+        '月度节能情况-均值': 'monthAvg'
+      }
+    }
+  },
+  // 监听属性 类似于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 = this.typeSwitch[this.myData.type]
+        obj.id = Number(this.myData.id)
+        obj.data = JSON.stringify(this.ruleForm)
+        obj.userUpdateTime = this.disTime
+        const res = await energySave(obj)
+        if (res.code === 0) {
+          this.$message.success('修改成功')
+          this.$router.push('/layout/tab2')
+        }
+        // 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.data) {
+      this.ruleForm[k] = this.myData.data[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>
+.tab2Edit2 {
+  height: 100%;
+  position: relative;
+  .top {
+    height: 40px;
+    line-height: 40px;
+    background-color: #fbfbfb;
+    padding-left: 20px;
+  }
+  .from {
+    max-height: 600px;
+    overflow-y: auto;
+    margin-top: 30px;
+    .unit {
+      position: absolute;
+      right: -40px;
+      top: 0;
+    }
+    /deep/.el-form-item__content{
+      width: 500px;
+    }
+  }
+  .btn {
+    display: flex;
+    justify-content: space-between;
+    width: 200px;
+    position: absolute;
+    left: 50%;
+    bottom: 30px;
+    transform: translateX(-50%);
+  }
+}
+</style>

src/views/tab2/index.vue

@@ -1,18 +1,43 @@
 <template>
-<div class='tab2'>tab2</div>
+<div class='tab2'>
+  <div class="table">
+    <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)">修 改</el-button>
+          </template>
+        </el-table-column>
+    </el-table>
+  </div>
+</div>
 </template>
 
 <script>
-// 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
-// 例如：import 《组件名称》 from '《组件路径》';
-
+import { energyList } from '@/apis/tab2'
 export default {
   name: 'tab2',
   components: {},
   data () {
     // 这里存放数据
     return {
-
+      from: {
+        pageNum: 1,
+        pageSize: 9999,
+        searchKey: '',
+        type: ''
+      },
+      dictionaries: {
+        detail: '能耗详情',
+        current: '实时用电监控-当前值',
+        yearAvg: '实时用电监控-近三年均值',
+        monthUp: '月度节能情况-同比增长',
+        monthAvg: '月度节能情况-均值'
+      },
+      tableData: []
     }
   },
   // 监听属性 类似于data概念
@@ -21,11 +46,38 @@ export default {
   watch: {},
   // 方法集合
   methods: {
-
+    // 封装获取列表方法
+    async energyList (data) {
+      const res = await energyList(data)
+      // console.log(999, res)
+      res.data.forEach(v => {
+        const temp = {}
+        temp.id = v.id
+        temp.type = this.dictionaries[v.type]
+        temp.data = JSON.parse(v.data)
+        temp.time = v.userUpdateTime
+        if (v.id === 1) {
+          temp.conten = `用电总量：${temp.data[1]}kwh；同比节能：${temp.data[2]}kwh；今日用电量：${temp.data[3]}kwh`
+        } else { temp.conten = `1月：${temp.data[1]}kwh；2月：${temp.data[2]}kwh；3月：${temp.data[3]}kwh；4月：${temp.data[4]}kwh；5月：${temp.data[5]}kwh；6月：${temp.data[6]}kwh；7月：${temp.data[7]}kwh；8月：${temp.data[8]}kwh；9月：${temp.data[9]}kwh；10月：${temp.data[10]}kwh；11月：${temp.data[11]}kwh；12月：${temp.data[12]}kwh` }
+        this.tableData.push(temp)
+      })
+    },
+    // 点击修改
+    edit (val) {
+      // console.log(999, val)
+      let temp = ''
+      if (val.id === 1) {
+        temp = '/layout/tab2Edit1'
+      } else temp = '/layout/tab2Edit2'
+      this.$router.push({
+        path: temp,
+        query: val
+      })
+    }
   },
   // 生命周期 - 创建完成（可以访问当前this实例）
   created () {
-
+    this.energyList(this.from)
   },
   // 生命周期 - 挂载完成（可以访问DOM元素）
   mounted () {

src/views/tab3/edit1.vue

@@ -0,0 +1,256 @@
+<!--  -->
+<template>
+  <div class="tab3Edit1">
+    <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="total">
+          <el-input
+            v-model.number="ruleForm.total"
+            type="number"
+          ></el-input>
+          <span class="unit">个</span>
+        </el-form-item>
+        <el-form-item label="运行中摄像头：" prop="alive">
+          <el-input
+            v-model.number="ruleForm.alive"
+            type="number"
+          ></el-input>
+          <span class="unit">个</span>
+        </el-form-item>
+        <el-form-item label="正常摄像头：" prop="normal">
+          <el-input
+            v-model.number="ruleForm.normal"
+            type="number"
+          ></el-input>
+          <span class="unit">个</span>
+        </el-form-item>
+        <el-form-item label="故障摄像头：" prop="error">
+          <el-input
+            v-model.number="ruleForm.error"
+            type="number"
+          ></el-input>
+          <span class="unit">个</span>
+        </el-form-item>
+        <el-form-item label="室内摄像头：" prop="indoor">
+          <el-input
+            v-model.number="ruleForm.indoor"
+            type="number"
+          ></el-input>
+          <span class="unit">个</span>
+        </el-form-item>
+        <el-form-item label="室外摄像头：" prop="outdoor">
+          <el-input
+            v-model.number="ruleForm.outdoor"
+            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/tab3')">返 回</el-button>
+      <el-button type="primary" @click="btnOk">提 交</el-button>
+    </div>
+  </div>
+</template>
+
+<script>
+import { securitySave } from '@/apis/tab3'
+export default {
+  name: 'tab3Edit1',
+  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: {
+        total: '',
+        alive: '',
+        normal: '',
+        error: '',
+        indoor: '',
+        outdoor: ''
+      },
+      rules: {
+        total: [
+          { required: true, message: '不能为空', trigger: 'blur' },
+          { validator: validatePass, trigger: 'blur' }
+        ],
+        alive: [
+          { required: true, message: '不能为空', trigger: 'blur' },
+          { validator: validatePass, trigger: 'blur' }
+        ],
+        normal: [
+          { required: true, message: '不能为空', trigger: 'blur' },
+          { validator: validatePass, trigger: 'blur' }
+        ],
+        error: [
+          { required: true, message: '不能为空', trigger: 'blur' },
+          { validator: validatePass, trigger: 'blur' }
+        ],
+        indoor: [
+          { required: true, message: '不能为空', trigger: 'blur' },
+          { validator: validatePass, trigger: 'blur' }
+        ],
+        outdoor: [
+          { 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 = 'security'
+        obj.id = 1
+        obj.data = JSON.stringify(this.ruleForm)
+        obj.userUpdateTime = this.disTime
+        const res = await securitySave(obj)
+        if (res.code === 0) {
+          this.$message.success('修改成功')
+          this.$router.push('/layout/tab3')
+        }
+        // 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-alive缓存功能，这个函数会触发
+}
+</script>
+<style lang='less' scoped>
+.tab3Edit1 {
+  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/tab3/index.vue

@@ -0,0 +1,236 @@
+<template>
+  <div class="tab3">
+    <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 label="视频封面">
+          <template #default="{ row }">
+            <el-image
+              style="width: 100px; height: 50px"
+              :src="baseURL + row.thumb"
+              :preview-src-list="srcList"
+            >
+            </el-image>
+          </template>
+        </el-table-column>
+        <el-table-column label="视频文件">
+          <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="120">
+          <template #default="{ row }">
+            <el-button type="text" @click="editVideo(row.id)">修 改</el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+    </div>
+    <!-- 新增弹窗 -->
+    <Tab3Dialog :isShow.sync="isShow" @refresh="securityVideoList(from2)" ref="Tab3DialogRef"/>
+    <!-- 分页 -->
+    <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 Tab3Dialog from '@/components/tab3Dialog.vue'
+import { securityList, securityVideoList } from '@/apis/tab3'
+export default {
+  name: 'tab3',
+  components: { Tab3Dialog },
+  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: []
+    }
+  },
+  // 监听属性 类似于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
+    },
+    // 点击安防设备修改
+    edit (val, id) {
+      this.$router.push({
+        path: '/layout/tab3Edit1',
+        query: { ...val, id }
+      })
+    },
+    // 点击监控画面修改
+    editVideo (id) {
+      this.$refs.Tab3DialogRef.videoDetailById(id)
+      this.isShow = true
+    },
+    // 封装获取列表方法
+    async securityList (data) {
+      const res = await securityList(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.total}个；运行中摄像头：${temp.data.alive}个；正常摄像头：${temp.data.normal}个；故障摄像头：${temp.data.error}个；室内摄像头：${temp.data.indoor}个；室外摄像头：${temp.data.outdoor}个；`
+        this.tableData.push(temp)
+      })
+    },
+    // 封装获取监控画面列表方法
+    async securityVideoList (data) {
+      this.srcList = []
+      const res = await securityVideoList(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 () {
+    // 获取服务器前缀地址
+    this.baseURL = axios.defaults.baseURL
+    this.securityList(this.from)
+    this.securityVideoList(this.from2)
+  },
+  // 生命周期 - 挂载完成（可以访问DOM元素）
+  mounted () {},
+  beforeCreate () {}, // 生命周期 - 创建之前
+  beforeMount () {}, // 生命周期 - 挂载之前
+  beforeUpdate () {}, // 生命周期 - 更新之前
+  updated () {}, // 生命周期 - 更新之后
+  beforeDestroy () {}, // 生命周期 - 销毁之前
+  destroyed () {}, // 生命周期 - 销毁完成
+  activated () {} // 如果页面有keep-alive缓存功能，这个函数会触发
+}
+</script>
+<style lang='less' scoped>
+.tab3 {
+  /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>