初步完成静态页面（用户管理待定）

houtai/src/router/index.js

@@ -117,16 +117,16 @@ const routes = [
         component: () => import('../views/tab6/index.vue')
       },
       {
-        path: 'tab6Edit1',
-        name: 'tab6Edit1',
+        path: 'tab6Add',
+        name: 'tab6Add',
         meta: { myInd: 6 },
-        component: () => import('../views/tab6/edit1.vue')
+        component: () => import('../views/tab6/tab6Add.vue')
       },
       {
-        path: 'tab6Edit2',
-        name: 'tab6Edit2',
+        path: 'tab6Look',
+        name: 'tab6Look',
         meta: { myInd: 6 },
-        component: () => import('../views/tab6/edit2.vue')
+        component: () => import('../views/tab6/tab6Look.vue')
       },
       {
         path: 'tab7',

houtai/src/views/tab6/edit1.vue

@@ -1,222 +0,0 @@
-<!--  -->
-<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>

houtai/src/views/tab6/edit2.vue

@@ -1,225 +0,0 @@
-<!--  -->
-<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>

houtai/src/views/tab6/index.vue

@@ -1,238 +1,195 @@
 <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="insideTop">
+      校歌管理
       <div class="add">
-        <el-button type="primary" @click="addVideo">新 增</el-button>
+        <el-button type="primary" @click="$router.push('/layout/tab6Add')">新增音频</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)" style="color:#b6242b;">删 除</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 class="obstruct"></div>
+    <!-- 主要内容 -->
+    <div class="conten">
+      <div class="classify">全部</div>
+      <div class="search">
+        <span>发布时间：</span>
+        <el-date-picker
+          style="width: 240px"
+          v-model="time"
+          type="daterange"
+          range-separator="-"
+          start-placeholder="开始时间"
+          end-placeholder="结束时间"
+        >
+        </el-date-picker>
+        <span class="search_k">标题关键字：</span>
+        <el-input
+          v-model="formData.searchKey"
+          placeholder="请输入"
+          style="width: 240px"
+        ></el-input>
+        <span class="search_k">排序：</span>
+        <el-select
+          v-model="formData.type"
+          placeholder="请选择"
+          style="width: 240px"
+        >
+          <el-option label="发布时间" value="time"></el-option>
+          <el-option label="排序编号" value="number"></el-option>
+        </el-select>
+        <!-- 右侧按钮 -->
+        <div class="search_btn">
+          <el-button type="primary">查 询</el-button>
+          <el-button>重 置</el-button>
+        </div>
+      </div>
+      <!-- 表格 -->
+      <div class="table">
+        <el-table :data="tableData" style="width: 100%">
+          <el-table-column label="序号" width="80">
+            <template slot-scope="scope">
+              {{
+                scope.$index + (formData.pageNum - 1) * formData.pageSize + 1
+              }}
+            </template>
+          </el-table-column>
+          <el-table-column label="标题">
+            <template #default="{ row }">
+              <span class="table_name" :title="row.name1">{{ row.name1 }}</span>
+            </template>
+          </el-table-column>
+          <el-table-column prop="name1" label="阅读"> </el-table-column>
+          <el-table-column prop="name1" label="发布人"> </el-table-column>
+          <el-table-column prop="name2" label="发布时间">
+          </el-table-column>
+          <el-table-column prop="address" label="排序" width="80">
+            <template #default="{ row }">
+              <el-input type="text" v-model="row.name1"></el-input>
+            </template>
+          </el-table-column>
+          <el-table-column prop="name3" label="是否显示">
+            <template #default="{ row }">
+              <el-switch v-model="row.name3" active-color="#b9412e">
+              </el-switch>
+            </template>
+          </el-table-column>
+          <el-table-column label="操作">
+            <template #default="{ row }">
+              <el-button type="text" @click="lookGood(row.id)"
+                >查看</el-button
+              >
+              <el-button type="text" v-if="!row.name3">编辑</el-button>
+              <el-button type="text" v-if="!row.name3">删除</el-button>
+            </template>
+          </el-table-column>
+        </el-table>
+      </div>
     </div>
-    <!-- 监控画面弹窗 -->
-    <Tab6Dialog
-      :isShow.sync="isShow"
-      @refresh="imgList(from2)"
-      ref="Tab6DialogRef"
-    />
-
     <!-- 分页 -->
-    <div class="paging" v-show="topInd === 2">
-      <span class="zong">共 {{ total }} 条</span>
+    <div class="paging">
       <el-pagination
-        layout="sizes,prev,pager,next,jumper"
+        layout="sizes,prev, pager, next,jumper"
         :total="total"
-        :page-sizes="[15, 30, 45, 60]"
-        :current-page="from2.pageNum"
+        :current-page="formData.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 },
+  components: {},
   data () {
     // 这里存放数据
     return {
-      total: 0,
-      srcList: [], // 查看大图的图片数组合集
-      baseURL: '',
-      isShow: false,
-      topInd: 1,
-      from: {
+      total: 100,
+      time: '',
+      formData: {
+        startTime: '',
+        endTime: '',
         pageNum: 1,
         pageSize: 9999,
         searchKey: '',
-        type: ''
+        type: 'time'
       },
-      from2: {
-        pageNum: 1,
-        pageSize: 15,
-        searchKey: ''
-      },
-      tableData: [],
-      tableData2: [],
-      tableData3: []
+      tableData: [
+        { name1: '123', name2: '2013-12-26  13:33:23', name3: true },
+        { name1: '123', name2: '123', name3: false },
+        { name1: '123', name2: '2013-12-26  13:33:23', name3: true },
+        { name1: '123', name2: '123', name3: false },
+        { name1: '123', name2: '2013-12-26  13:33:23', name3: true },
+        { name1: '123', name2: '123', name3: false },
+        { name1: '123', name2: '2013-12-26  13:33:23', name3: true },
+        { name1: '123', name2: '123', name3: false },
+        { name1: '123', name2: '2013-12-26  13:33:23', name3: true },
+        { name1: '123', name2: '123', name3: false },
+        { name1: '123', name2: '2013-12-26  13:33:23', name3: true },
+        { name1: '123', name2: '123', name3: false }
+      ]
     }
   },
   // 监听属性 类似于data概念
   computed: {},
   // 监控data中的数据变化
-  watch: {},
+  watch: {
+    time (val) {
+      this.handleSelect(val)
+    }
+  },
   // 方法集合
   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'
+    }, // 点击查看
+    lookGood (id) {
       this.$router.push({
-        path: temp,
-        query: { ...val, id }
+        path: '/layout/tab6Look'
+        // query: { conLeftId: this.conLeft }
       })
     },
-    // 监控画面删除
-    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
+    // 时间处理----------------
+    handleSelect (e) {
+      const date = []
+      for (const i in e) {
+        date.push(this.gettime(e[i]))
+      }
+      this.formData.startTime = date[0]
+      if (date[1]) {
+        this.formData.endTime = date[1].replace('00:00:00', '23:59:59')
+      }
+      if (e === null) this.formData.endTime = ''
     },
-    // 封装获取列表方法
-    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)
-        }
-      })
+    gettime (data) {
+      const value =
+        data.getFullYear() +
+        '-' +
+        this.checkTime(data.getMonth() + 1) +
+        '-' +
+        this.checkTime(data.getDate()) +
+        ' ' +
+        this.checkTime(data.getHours()) +
+        ':' +
+        this.checkTime(data.getMinutes()) +
+        ':' +
+        this.checkTime(data.getSeconds())
+      return value
     },
-    // 封装获取监控画面列表方法
-    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)
+    checkTime (i) {
+      if (i < 10) {
+        i = '0' + i
+      }
+      return i
     }
-
   },
   // 生命周期 - 创建完成（可以访问当前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)
-  },
+  created () {},
   // 生命周期 - 挂载完成（可以访问DOM元素）
   mounted () {},
   beforeCreate () {}, // 生命周期 - 创建之前
@@ -246,43 +203,49 @@ export default {
 </script>
 <style lang='less' scoped>
 .tab6 {
-
-  /deep/.el-table__body-wrapper {
-    max-height: 600px;
-    overflow-y: auto;
+  height: 100%;
+  .insideTop .add{
+    right: 55px;
   }
-  .search {
-    display: flex;
-    font-size: 24px;
-    margin-bottom: 30px;
-    & > div {
-      cursor: pointer;
-      margin-right: 40px;
-    }
-    .active {
-      font-weight: 700;
-      border-bottom: 5px solid #1482b4;
+  .conten {
+    padding: 15px 30px 0;
+    height: calc(100% - 32px);
+    .classify {
+      text-align: center;
+      width: 40px;
       padding-bottom: 10px;
+      color: #b9412e;
+      border-bottom: 2px solid #b9412e;
     }
-  }
-  .table {
-    position: relative;
-    .add {
-      position: absolute;
-      right: 0;
-      top: -50px;
+    .search {
+      margin-bottom: 20px;
+      position: relative;
+      margin-top: 12px;
+      height: 40px;
+      .search_k {
+        margin-left: 30px;
+      }
+      .search_btn {
+        display: flex;
+        justify-content: space-between;
+        width: 200px;
+        position: absolute;
+        right: 22px;
+        top: 0;
+      }
+    }
+    .table {
+      max-width: 1533px;
+    }
+    /deep/.el-table__body-wrapper {
+      max-height: 485px;
+      overflow-y: auto;
     }
   }
   .paging {
-    width: auto;
-    display: flex;
     position: absolute;
-    bottom: 40px;
+    bottom: 15px;
     right: 50px;
-    .zong {
-      margin-right: 20px;
-      margin-top: 4px;
-    }
   }
 }
 </style>

houtai/src/views/tab6/tab6Add.vue

@@ -0,0 +1,239 @@
+<template>
+  <div class="tab6Add">
+    <div class="insideTop">
+      校歌管理 > 新增音频
+      <div class="add">
+        <el-button type="primary" @click="goBack">返 回</el-button>
+      </div>
+    </div>
+    <div class="obstruct"></div>
+    <!-- 主要内容 -->
+    <div class="conten">
+      <div class="con_top">基本信息</div>
+      <!-- 表单 -->
+      <el-form
+        :model="ruleForm"
+        :rules="rules"
+        ref="ruleForm"
+        label-width="120px"
+        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
+            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">
+              <p class="upHint">格式要求：</p>
+              <p class="upHint">1、支持音频格式文件（例如：mp3、wav）。</p>
+              <p class="upHint">2、最大支持5M的音频文件。</p>
+            </div>
+          </el-upload>
+        </el-form-item>
+        <el-form-item label="歌词：">
+          <i class="biaoshi biaoshi1"></i>
+          <div id="div1" style="z-index: 1"></div>
+        </el-form-item>
+      </el-form>
+      <!-- 底部按钮 -->
+      <div class="con_btn">
+        <el-button type="primary">保 存</el-button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import E from 'wangeditor'
+export default {
+  name: 'tab6Add',
+  components: {},
+  data () {
+    return {
+      fileList: [],
+      // 服务器前缀地址
+      baseURL: '',
+      token: '',
+      ruleForm: {
+        id: '',
+        name: '',
+        video: '',
+        fileName: ''
+      },
+      rules: {
+        name: [{ required: true, message: '不能为空', trigger: 'blur' }]
+      }
+    }
+  },
+  computed: {},
+  methods: {
+    // 点击返回
+    goBack () {
+      this.$confirm('点击返回后，编辑的信息将无法保存，是否继续？', '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      })
+        .then(async () => {
+          this.$router.push('/layout/tab6')
+        })
+        .catch(() => {
+          this.$message.info('已取消')
+        })
+    },
+    // 上传附件
+    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/quicktime' ||
+        file.type === 'video/rm' ||
+        (file.type === '' &&
+          (file.name.includes('.flv') || file.name.includes('.rmvb'))) ||
+        file.type === 'video/3gpp'
+      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('只能上传一个音频，请删除原音频后操作')
+    }
+  },
+  // 生命周期 - 创建完成（可以访问当前this实例）
+  created () {
+  },
+  // 生命周期 - 挂载完成（可以访问DOM元素）
+  mounted () {
+    // 初始化富文本
+    // 富文本
+    this.editor = new E('#div1')
+    // 配置字体
+    this.editor.config.fontNames = [
+      '黑体',
+      '仿宋',
+      '楷体',
+      '标楷体',
+      '华文仿宋',
+      '华文楷体',
+      '宋体',
+      '微软雅黑',
+      'Arial',
+      'Tahoma',
+      'Verdana',
+      'Times New Roman'
+    ]
+    this.editor.config.uploadImgShowBase64 = true // 图片地址
+    this.editor.config.showLinkVideo = false
+    this.editor.create()
+    this.editor.txt.html('66666666666666666')
+  },
+  beforeCreate () {}, // 生命周期 - 创建之前
+  beforeMount () {}, // 生命周期 - 挂载之前
+  beforeUpdate () {}, // 生命周期 - 更新之前
+  updated () {}, // 生命周期 - 更新之后
+  beforeDestroy () {}, // 生命周期 - 销毁之前
+  destroyed () {}, // 生命周期 - 销毁完成
+  activated () {} // 如果页面有keep-alive缓存功能，这个函数会触发
+}
+</script>
+<style lang='less' scoped>
+.tab6Add {
+  height: 100%;
+  .conten {
+    position: relative;
+    /deep/.el-icon-plus {
+      border: 1px dashed #ccc;
+    }
+    height: calc(100% - 32px);
+    .con_top {
+      margin-bottom: 12px;
+      height: 40px;
+      line-height: 40px;
+      padding-left: 20px;
+      background-color: #fbfbfb;
+    }
+    .biaoshi1::before {
+      left: -64px;
+    }
+    .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;
+    }
+    .con_btn {
+      position: absolute;
+      left: 50%;
+      transform: translateX(-50%);
+      bottom: 15px;
+    }
+    #div1{
+      width: 1200px;
+    }
+  }
+}
+</style>

houtai/src/views/tab6/tab6Look.vue

@@ -0,0 +1,107 @@
+<!--  -->
+<template>
+  <div class="tab6Look">
+    <div class="insideTop">
+      校歌管理 > 查看音频
+      <div class="add">
+        <el-button type="primary" @click="$router.push('/layout/tab6')"
+          >返 回</el-button
+        >
+      </div>
+    </div>
+    <div class="obstruct"></div>
+    <!-- 主要内容 -->
+    <div class="conten">
+      <div class="con_top">基本信息</div>
+      <div class="row">
+        <div>标题：</div>
+        <span>某某学院视频</span>
+      </div>
+      <div class="row">
+        <div>音频文件：</div>
+        <a href="">音频文件.mp3</a>
+      </div>
+      <div class="row">
+        <div>歌词：</div>
+        <div class="lyric">
+          <p v-for="i in 20" :key="i">我们是一支不可战胜的力量。</p>
+        </div>
+      </div>
+      <div class="row">
+        <div>显示设置：</div>
+        <el-switch disabled v-model="value" active-color="#b9412e"> </el-switch>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+// 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
+// 例如：import 《组件名称》 from '《组件路径》';
+
+export default {
+  name: 'tab6Look',
+  components: {},
+  data () {
+    // 这里存放数据
+    return {
+      value: true
+    }
+  },
+  // 监听属性 类似于data概念
+  computed: {},
+  // 监控data中的数据变化
+  watch: {},
+  // 方法集合
+  methods: {
+
+  },
+  // 生命周期 - 创建完成（可以访问当前this实例）
+  created () {
+  },
+  // 生命周期 - 挂载完成（可以访问DOM元素）
+  mounted () {},
+  beforeCreate () {}, // 生命周期 - 创建之前
+  beforeMount () {}, // 生命周期 - 挂载之前
+  beforeUpdate () {}, // 生命周期 - 更新之前
+  updated () {}, // 生命周期 - 更新之后
+  beforeDestroy () {}, // 生命周期 - 销毁之前
+  destroyed () {}, // 生命周期 - 销毁完成
+  activated () {} // 如果页面有keep-alive缓存功能，这个函数会触发
+}
+</script>
+<style lang='less' scoped>
+.tab6Look {
+  height: 100%;
+  .conten {
+    overflow-y: auto;
+    position: relative;
+    height: calc(100% - 32px);
+    .con_top {
+      margin-bottom: 12px;
+      height: 40px;
+      line-height: 40px;
+      padding-left: 20px;
+      background-color: #fbfbfb;
+    }
+    .row {
+      display: flex;
+      margin: 25px 0;
+      & > div {
+        width: 120px;
+        text-align: right;
+      }
+      .lyric{
+        padding: 5px;
+        text-align: left;
+        width: auto;
+        min-width: 600px;
+        border: 1px solid #ccc;
+        &>p{
+          margin: 5px;
+        }
+      }
+    }
+  }
+}
+</style>

houtai/src/views/tab8/index.vue

@@ -1,162 +1,104 @@
-<!--  -->
 <template>
-  <div class="tab8">
-    <div class="top">
-      <el-form
-        :model="ruleForm"
-        ref="ruleForm"
-        label-width="100px"
-        class="demo-ruleForm"
-      >
-        <el-form-item label="操作日期：">
-          <el-date-picker
-            style="width: 300px"
-            v-model="time"
-            type="daterange"
-            range-separator="-"
-            start-placeholder="开始日期"
-            end-placeholder="结束日期"
-          >
-          </el-date-picker>
-          <span class="userName">操作人员：</span>
-          <el-input
-            placeholder="请输入"
-            v-model="ruleForm.searchKey"
-            style="width: 300px; margin-right: 50px"
-          ></el-input>
-          <el-button @click="inquire">查 询</el-button>
-          <el-button @click="reset">重 置</el-button>
-        </el-form-item>
-      </el-form>
+  <div class="tab6">
+    <div class="insideTop">
+      操作日志
     </div>
-    <!-- 表格 -->
-    <div class="table">
-      <el-table :data="tableData" style="width: 100%">
-        <el-table-column label="序号" width="80">
-          <template slot-scope="scope">
-            {{ scope.$index + (ruleForm.pageNum - 1) * ruleForm.pageSize + 1 }}
-          </template>
-        </el-table-column>
-        <el-table-column prop="userName" label="操作者"> </el-table-column>
-        <el-table-column prop="createTime" label="操作日期"> </el-table-column>
-        <el-table-column prop="ip" label="ip地址"> </el-table-column>
-        <el-table-column prop="type" label="操作模块"> </el-table-column>
-        <el-table-column prop="description" label="操作记录"> </el-table-column>
-      </el-table>
+    <div class="obstruct"></div>
+    <!-- 主要内容 -->
+    <div class="conten">
+      <div class="search">
+        <el-input
+          v-model="formData.searchKey"
+          placeholder="请输入关键字"
+          style="width: 240px"
+        ></el-input>
+        <!-- 右侧按钮 -->
+        <div class="search_btn">
+          <el-button type="primary">查 询</el-button>
+        </div>
+      </div>
+      <!-- 表格 -->
+      <div class="table">
+        <el-table :data="tableData" style="width: 100%">
+          <el-table-column label="序号" width="80">
+            <template slot-scope="scope">
+              {{
+                scope.$index + (formData.pageNum - 1) * formData.pageSize + 1
+              }}
+            </template>
+          </el-table-column>
+          <el-table-column label="标题">
+            <template #default="{ row }">
+              <span class="table_name" :title="row.name1">{{ row.name1 }}</span>
+            </template>
+          </el-table-column>
+          <el-table-column prop="name1" label="账号"> </el-table-column>
+          <el-table-column prop="name1" label="操作模块"> </el-table-column>
+          <el-table-column prop="name2" label="操作事件"></el-table-column>
+          <el-table-column prop="name2" label="操作时间"></el-table-column>
+        </el-table>
+      </div>
     </div>
     <!-- 分页 -->
     <div class="paging">
-      <span class="zong">共 {{ total }} 条</span>
       <el-pagination
-        layout="sizes,prev,pager,next,jumper"
+        layout="sizes,prev, pager, next,jumper"
         :total="total"
-        :page-sizes="[15, 30, 45, 60]"
-        :current-page="ruleForm.pageNum"
+        :current-page="formData.pageNum"
         @current-change="currentChange"
         @size-change="sizeChange"
       >
       </el-pagination>
-    </div>  </div>
+    </div>
+  </div>
 </template>
 
 <script>
-import { logList } from '@/apis/tab8'
 export default {
-  name: 'tab8',
+  name: 'tab6',
   components: {},
   data () {
+    // 这里存放数据
     return {
-      total: 0,
-      time: '',
-      ruleForm: {
+      total: 100,
+      formData: {
         pageNum: 1,
-        pageSize: 15,
-        startTime: '',
-        endTime: '',
+        pageSize: 9999,
         searchKey: ''
       },
-      tableData: []
+      tableData: [
+        { name1: '123', name2: '2013-12-26  13:33:23', name3: true },
+        { name1: '123', name2: '123', name3: false },
+        { name1: '123', name2: '2013-12-26  13:33:23', name3: true },
+        { name1: '123', name2: '123', name3: false },
+        { name1: '123', name2: '2013-12-26  13:33:23', name3: true },
+        { name1: '123', name2: '123', name3: false },
+        { name1: '123', name2: '2013-12-26  13:33:23', name3: true },
+        { name1: '123', name2: '123', name3: false },
+        { name1: '123', name2: '2013-12-26  13:33:23', name3: true },
+        { name1: '123', name2: '123', name3: false },
+        { name1: '123', name2: '2013-12-26  13:33:23', name3: true },
+        { name1: '123', name2: '123', name3: false }
+      ]
     }
   },
+  // 监听属性 类似于data概念
   computed: {},
   // 监控data中的数据变化
   watch: {
-    time (val) {
-      this.handleSelect(val)
-    }
   },
+  // 方法集合
   methods: {
     // 分页器方法
     currentChange (val) {
       // console.log('当前页改变了', val)
-      this.ruleForm.pageNum = val
-      this.logList(this.ruleForm)
     },
     sizeChange (val) {
       // console.log('条数改变了', val)
-      this.ruleForm.pageNum = 1
-      this.ruleForm.pageSize = val
-      this.logList(this.ruleForm)
-    },
-    // 点击查询
-    inquire () {
-      this.ruleForm.pageNum = 1
-      this.logList(this.ruleForm)
-    },
-    // 点击重置
-    reset () {
-      this.ruleForm = {
-        pageNum: 1,
-        pageSize: 15,
-        searchKey: ''
-      }
-      this.time = ''
-      this.logList(this.ruleForm)
-    },
-    // 封装获取列表方法
-    async logList (data) {
-      const res = await logList(data)
-      this.tableData = res.data.records
-      this.total = res.data.total
-    },
-    // 时间处理----------------
-    handleSelect (e) {
-      const date = []
-      for (const i in e) {
-        date.push(this.gettime(e[i]))
-      }
-      this.ruleForm.startTime = date[0]
-      if (date[1]) {
-        this.ruleForm.endTime = date[1].replace('00:00:00', '23:59:59')
-      }
-      if (e === null) this.ruleForm.endTime = ''
-    },
-    gettime (data) {
-      const value =
-        data.getFullYear() +
-        '-' +
-        this.checkTime(data.getMonth() + 1) +
-        '-' +
-        this.checkTime(data.getDate()) +
-        ' ' +
-        this.checkTime(data.getHours()) +
-        ':' +
-        this.checkTime(data.getMinutes()) +
-        ':' +
-        this.checkTime(data.getSeconds())
-      return value
-    },
-    checkTime (i) {
-      if (i < 10) {
-        i = '0' + i
-      }
-      return i
     }
   },
   // 生命周期 - 创建完成（可以访问当前this实例）
-  created () {
-    this.logList(this.ruleForm)
-  },
+  created () {},
   // 生命周期 - 挂载完成（可以访问DOM元素）
   mounted () {},
   beforeCreate () {}, // 生命周期 - 创建之前
@@ -169,33 +111,49 @@ export default {
 }
 </script>
 <style lang='less' scoped>
-.tab8 {
-  .top {
-    position: relative;
-    border-bottom: 1px solid black;
-    margin-bottom: 20px;
-    .userName {
-      margin-left: 50px;
+.tab6 {
+  height: 100%;
+  .insideTop .add{
+    right: 55px;
+  }
+  .conten {
+    padding: 15px 30px 0;
+    height: calc(100% - 32px);
+    .classify {
+      text-align: center;
+      width: 40px;
+      padding-bottom: 10px;
+      color: #b9412e;
+      border-bottom: 2px solid #b9412e;
+    }
+    .search {
+      display: flex;
+      margin-bottom: 20px;
+      position: relative;
+      margin-top: 12px;
+      height: 40px;
+      .search_k {
+        margin-left: 30px;
+      }
+      .search_btn {
+        margin-left: 30px;
+        display: flex;
+        justify-content: space-between;
+        width: 100px;
+      }
     }
-    .addUser {
-      position: absolute;
-      right: 20px;
-      top: 0;
+    .table {
+      max-width: 1533px;
+    }
+    /deep/.el-table__body-wrapper {
+      max-height: 528px;
+      overflow-y: auto;
     }
-  }
-  /deep/.el-table__body-wrapper{
-    max-height: 580px;
-    overflow-y: auto;
   }
   .paging {
-    width: auto;
-    display: flex;
     position: absolute;
-    bottom: 40px;
+    bottom: 15px;
     right: 50px;
-    .zong {
-      margin-right: 20px;
-      margin-top: 4px;
-    }
-  }}
+  }
+}
 </style>