初步完成静态tab5

houtai/src/router/index.js

@@ -99,10 +99,16 @@ const routes = [
         component: () => import('../views/tab5/index.vue')
       },
       {
-        path: 'tab5Edit1',
-        name: 'tab5Edit1',
+        path: 'tab5Add',
+        name: 'tab5Add',
         meta: { myInd: 5 },
-        component: () => import('../views/tab5/edit1.vue')
+        component: () => import('../views/tab5/tab5Add.vue')
+      },
+      {
+        path: 'tab5Look',
+        name: 'tab5Look',
+        meta: { myInd: 5 },
+        component: () => import('../views/tab5/tab5Look.vue')
       },
       {
         path: 'tab6',

houtai/src/views/tab5/edit1.vue

@@ -1,300 +0,0 @@
-<!--  -->
-<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/m³</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>

houtai/src/views/tab5/index.vue

@@ -1,319 +1,200 @@
 <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="insideTop">
+      校园图片管理
       <div class="add">
-        <el-button type="primary" @click="addVideo">新 增</el-button>
+        <el-button type="primary" @click="$router.push('/layout/tab5Add')">新增校园图片</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)" style="color:#b6242b;">删 除</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 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="标题" width="200">
+            <template #default="{ row }">
+              <span class="table_name" :title="row.name1">{{ row.name1 }}</span>
+            </template>
+          </el-table-column>
+          <el-table-column label="封面图片" width="120">
+            <template #default>
+              <img class="table_img" src="../../assets/img/demo.png" alt="" />
+            </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="发布时间" width="200">
+          </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>
-      <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)" style="color:#b6242b;"
-              >删 除</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>
+    <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 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 },
+  components: {},
   data () {
     // 这里存放数据
     return {
-      total: 0,
-      total3: 0,
-      srcList: [], // 查看大图的图片数组合集
-      srcList3: [], // 查看大图的图片数组合集
-      baseURL: '',
-      isShow: false,
-      isShow3: false,
-      topInd: 1,
-      from: {
+      total: 100,
+      time: '',
+      formData: {
+        startTime: '',
+        endTime: '',
         pageNum: 1,
         pageSize: 9999,
         searchKey: '',
-        type: ''
-      },
-      from2: {
-        pageNum: 1,
-        pageSize: 15,
-        searchKey: ''
-      },
-      from3: {
-        pageNum: 1,
-        pageSize: 15,
-        searchKey: ''
+        type: 'time'
       },
-      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: {
-    // ----------------------进度管理-----------------------------
-    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) {
+    }, // 点击查看
+    lookGood (id) {
       this.$router.push({
-        path: '/layout/tab5Edit1',
-        query: { ...val, id }
+        path: '/layout/tab5Look'
+        // query: { conLeftId: this.conLeft }
       })
     },
-    // 监控画面删除
-    delTow (id) {
-      this.$confirm('确定删除吗?', '提示', {
-        confirmButtonText: '确定',
-        cancelButtonText: '取消',
-        type: 'warning'
-      })
-        .then(async () => {
-          await videoRemove(id)
-          this.$message.success('删除成功!')
-          this.siteVideoList(this.from2)
-        })
-        .catch(() => {
-          this.$message.info('已取消删除')
-        })
+    // 时间处理----------------
+    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 = ''
     },
-    // 点击监控画面修改
-    editVideo (id) {
-      this.$refs.Tab5DialogRef.videoDetailById(id)
-      this.isShow = true
+    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 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}μg/m³--${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)
+    checkTime (i) {
+      if (i < 10) {
+        i = '0' + i
+      }
+      return i
     }
   },
   // 生命周期 - 创建完成（可以访问当前this实例）
-  created () {
-    // 获取服务器前缀地址
-    this.baseURL = axios.defaults.baseURL
-    this.siteList(this.from)
-    this.siteVideoList(this.from2)
-    this.siteImgList(this.from3)
-  },
+  created () {},
   // 生命周期 - 挂载完成（可以访问DOM元素）
   mounted () {},
   beforeCreate () {}, // 生命周期 - 创建之前
@@ -327,43 +208,49 @@ export default {
 </script>
 <style lang='less' scoped>
 .tab5 {
-
-  /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/tab5/tab5Add.vue

@@ -0,0 +1,190 @@
+<template>
+  <div class="tab5Add">
+    <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="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 biaoshi1"></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>
+          <p class="upHint">格式要求：支持png、jpg、gif和jpeg的图片格式；最大支持20M。</p>
+        </el-form-item>
+      </el-form>
+      <!-- 底部按钮 -->
+      <div class="con_btn">
+        <el-button type="primary">保 存</el-button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'tab5Add',
+  components: {},
+  data () {
+    return {
+      // 服务器前缀地址
+      baseURL: '',
+      token: '',
+      ruleForm: {
+        id: '',
+        name: '',
+        thumb: '',
+        fileName: ''
+      },
+      rules: {
+        name: [{ required: true, message: '不能为空', trigger: 'blur' }]
+      }
+    }
+  },
+  computed: {},
+  methods: {
+    // 点击返回
+    goBack () {
+      this.$confirm('点击返回后，编辑的信息将无法保存，是否继续？', '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      })
+        .then(async () => {
+          this.$router.push('/layout/tab5')
+        })
+        .catch(() => {
+          this.$message.info('已取消')
+        })
+    },
+    // 上传图片
+    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
+    }
+  },
+  // 生命周期 - 创建完成（可以访问当前this实例）
+  created () {
+  },
+  // 生命周期 - 挂载完成（可以访问DOM元素）
+  mounted () {},
+  beforeCreate () {}, // 生命周期 - 创建之前
+  beforeMount () {}, // 生命周期 - 挂载之前
+  beforeUpdate () {}, // 生命周期 - 更新之前
+  updated () {}, // 生命周期 - 更新之后
+  beforeDestroy () {}, // 生命周期 - 销毁之前
+  destroyed () {}, // 生命周期 - 销毁完成
+  activated () {} // 如果页面有keep-alive缓存功能，这个函数会触发
+}
+</script>
+<style lang='less' scoped>
+.tab5Add {
+  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;
+    }
+  }
+}
+</style>

houtai/src/views/tab5/tab5Look.vue

@@ -0,0 +1,112 @@
+<!--  -->
+<template>
+  <div class="tab5Look">
+    <div class="insideTop">
+      校园图片管理 > 查看图片
+      <div class="add">
+        <el-button type="primary" @click="$router.push('/layout/tab5')"
+          >返 回</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>
+        <el-image
+          style="width: 200px; height: 200px"
+          :src="srcList[0]"
+          :preview-src-list="srcList"
+        >
+        </el-image>
+      </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: 'tab5Look',
+  components: {},
+  data () {
+    // 这里存放数据
+    return {
+      value: true,
+      srcList: [
+        'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fup.enterdesk.com%2Fedpic%2F5e%2F4e%2Ff0%2F5e4ef0e451852e0114d75eac14f60924.jpeg&refer=http%3A%2F%2Fup.enterdesk.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1643275872&t=6a91d1e33312fc0a70f0f48a6cf57f68'
+      ],
+      srcList2: [
+        'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fup.enterdesk.com%2Fedpic%2F5e%2F4e%2Ff0%2F5e4ef0e451852e0114d75eac14f60924.jpeg&refer=http%3A%2F%2Fup.enterdesk.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1643275872&t=6a91d1e33312fc0a70f0f48a6cf57f68',
+        'https://img2.baidu.com/it/u=395719964,2145680590&fm=26&fmt=auto'
+      ]
+    }
+  },
+  // 监听属性 类似于data概念
+  computed: {},
+  // 监控data中的数据变化
+  watch: {},
+  // 方法集合
+  methods: {
+
+  },
+  // 生命周期 - 创建完成（可以访问当前this实例）
+  created () {
+  },
+  // 生命周期 - 挂载完成（可以访问DOM元素）
+  mounted () {},
+  beforeCreate () {}, // 生命周期 - 创建之前
+  beforeMount () {}, // 生命周期 - 挂载之前
+  beforeUpdate () {}, // 生命周期 - 更新之前
+  updated () {}, // 生命周期 - 更新之后
+  beforeDestroy () {}, // 生命周期 - 销毁之前
+  destroyed () {}, // 生命周期 - 销毁完成
+  activated () {} // 如果页面有keep-alive缓存功能，这个函数会触发
+}
+</script>
+<style lang='less' scoped>
+.tab5Look {
+  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;
+      }
+    .imgList{
+      width: 1500px;
+      display: flex;
+      flex-wrap: wrap;
+      /deep/.el-image{
+        margin-right: 30px;
+        margin-bottom: 30px;
+      }
+    }
+    }
+  }
+}
+</style>