初步完成tab3静态页面

houtai/src/assets/css/base.css

@@ -103,6 +103,7 @@ input[type="number"] {
   width: 100px;
   height: 50px;
   object-fit: cover;
+  border: 3px solid #ccc;
 }
 .table_name{
   cursor: pointer;
@@ -129,6 +130,7 @@ input[type="number"] {
 }
 .el-image__preview{
   border: 10px solid #cccccc;
+  object-fit: cover;
 }
 .el-pager li{
   border-radius: 5px;

houtai/src/router/index.js

@@ -63,10 +63,16 @@ const routes = [
         component: () => import('../views/tab3/index.vue')
       },
       {
-        path: 'tab3Edit1',
-        name: 'tab3Edit1',
+        path: 'tab3Add',
+        name: 'tab3Add',
         meta: { myInd: 3 },
-        component: () => import('../views/tab3/edit1.vue')
+        component: () => import('../views/tab3/tab3Add.vue')
+      },
+      {
+        path: 'tab3Look',
+        name: 'tab3Look',
+        meta: { myInd: 3 },
+        component: () => import('../views/tab3/tab3Look.vue')
       },
       {
         path: 'tab4',
@@ -75,18 +81,6 @@ const routes = [
         component: () => import('../views/tab4/index.vue')
       },
       {
-        path: 'tab4Edit1',
-        name: 'tab4Edit1',
-        meta: { myInd: 4 },
-        component: () => import('../views/tab4/edit1.vue')
-      },
-      {
-        path: 'tab4Edit2',
-        name: 'tab4Edit2',
-        meta: { myInd: 4 },
-        component: () => import('../views/tab4/edit2.vue')
-      },
-      {
         path: 'tab5',
         name: 'tab5',
         meta: { myInd: 5 },

houtai/src/views/tab1/index.vue

@@ -76,7 +76,7 @@
                 }}</span>
               </template>
             </el-table-column>
-            <el-table-column label="封面图片" width="100">
+            <el-table-column label="封面图片" width="120">
               <template #default>
                 <img class="table_img" src="../../assets/img/demo.png" alt="" />
               </template>

houtai/src/views/tab2/index.vue

@@ -62,7 +62,7 @@
               <span class="table_name" :title="row.name1">{{ row.name1 }}</span>
             </template>
           </el-table-column>
-          <el-table-column label="封面图片" width="100">
+          <el-table-column label="封面图片" width="120">
             <template #default>
               <img class="table_img" src="../../assets/img/demo.png" alt="" />
             </template>

houtai/src/views/tab2/tab2Add.vue

@@ -18,7 +18,7 @@
         label-width="120px"
         class="demo-ruleForm"
       >
-        <el-form-item label="标题：" prop="name">
+        <el-form-item label="姓名：" prop="name">
           <el-input
             v-model="ruleForm.name"
             maxlength="25"

houtai/src/views/tab2/tab2Look.vue

@@ -35,7 +35,7 @@
       <div class="row">
         <div>领导照片：</div>
         <el-image
-          style="width: 300px; height: 300px"
+          style="width: 200px; height: 200px"
           :src="srcList[0]"
           :preview-src-list="srcList"
         >

houtai/src/views/tab3/edit1.vue

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

houtai/src/views/tab3/index.vue

@@ -1,81 +1,105 @@
 <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="insideTop">
+      学籍管理
       <div class="add">
-        <el-button type="primary" @click="addVideo">新 增</el-button>
+        <el-button type="primary" @click="$router.push('/layout/tab3Add')">新增学籍信息</el-button>
+      </div>
+    </div>
+    <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="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="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="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="200">
-          <template #default="{ row }">
-            <el-button type="text" @click="editVideo(row.id)">修 改</el-button>
-            <el-button type="text" @click="delVideo(row.id)" style="color:#b6242b;">删 除</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>
+    <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"
       >
@@ -85,117 +109,97 @@
 </template>
 
 <script>
-import axios from '@/utils/request'
-import Tab3Dialog from '@/components/tab3Dialog.vue'
-import { securityList, securityVideoList, videoRemove } from '@/apis/tab3'
 export default {
   name: 'tab3',
-  components: { Tab3Dialog },
+  components: {},
   data () {
     // 这里存放数据
     return {
-      total: 0,
-      srcList: [], // 查看大图的图片数组合集
-      baseURL: '',
-      isShow: false,
-      topInd: 1,
-      from: {
+      total: 100,
+      time: '',
+      formData: {
+        startTime: '',
+        endTime: '',
         pageNum: 1,
         pageSize: 9999,
         searchKey: '',
-        type: ''
-      },
-      from2: {
-        pageNum: 1,
-        pageSize: 15,
-        searchKey: ''
+        type: 'time'
       },
-      tableData: [],
-      tableData2: []
+      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.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) {
+    }, // 点击查看
+    lookGood (id) {
       this.$router.push({
-        path: '/layout/tab3Edit1',
-        query: { ...val, id }
+        path: '/layout/tab3Look'
+        // query: { conLeftId: this.conLeft }
       })
     },
-    // 点击监控画面修改
-    editVideo (id) {
-      this.$refs.Tab3DialogRef.videoDetailById(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 = ''
     },
-    // 点击删除
-    delVideo (id) {
-      this.$confirm('确定删除吗?', '提示', {
-        confirmButtonText: '确定',
-        cancelButtonText: '取消',
-        type: 'warning'
-      })
-        .then(async () => {
-          await videoRemove(id)
-          this.$message.success('删除成功!')
-          this.securityVideoList(this.from2)
-        })
-        .catch(() => {
-          this.$message.info('已取消删除')
-        })
+    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 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)
+    checkTime (i) {
+      if (i < 10) {
+        i = '0' + i
+      }
+      return i
     }
   },
   // 生命周期 - 创建完成（可以访问当前this实例）
-  created () {
-    // 获取服务器前缀地址
-    this.baseURL = axios.defaults.baseURL
-    this.securityList(this.from)
-    this.securityVideoList(this.from2)
-  },
+  created () {},
   // 生命周期 - 挂载完成（可以访问DOM元素）
   mounted () {},
   beforeCreate () {}, // 生命周期 - 创建之前
@@ -209,43 +213,49 @@ export default {
 </script>
 <style lang='less' scoped>
 .tab3 {
-
-  /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;
-    }
-  }
-    .paging {
-      width: auto;
-      display: flex;
-      position: absolute;
-      bottom: 40px;
-      right: 50px;
-      .zong{
-        margin-right: 20px;
-        margin-top: 4px;
+    .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 {
+    position: absolute;
+    bottom: 15px;
+    right: 50px;
+  }
 }
 </style>

houtai/src/views/tab3/tab3Add.vue

@@ -0,0 +1,329 @@
+<template>
+  <div class="tab3Add">
+    <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="性别：" prop="sex">
+          <el-radio v-model="ruleForm.sex" label="1">男</el-radio>
+          <el-radio v-model="ruleForm.sex" label="0">女</el-radio>
+        </el-form-item>
+        <el-form-item label="政治面貌：" prop="face">
+          <el-select
+            v-model="ruleForm.face"
+            placeholder="请选择"
+            style="width: 500px"
+          >
+            <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-option label="民盟盟员" value="民盟盟员"></el-option>
+            <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-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="position">
+          <el-input
+            v-model="ruleForm.position"
+            maxlength="25"
+            show-word-limit
+            style="width: 500px"
+          ></el-input>
+        </el-form-item>
+        <el-form-item label="专业：" prop="major">
+          <el-input
+            v-model="ruleForm.major"
+            maxlength="25"
+            show-word-limit
+            style="width: 500px"
+          ></el-input>
+        </el-form-item>
+        <el-form-item label="任期：">
+          <i class="biaoshi biaoshi1"></i>
+          <el-date-picker
+            style="width: 500px"
+            v-model="time"
+            type="daterange"
+            range-separator="-"
+            start-placeholder="开始日期"
+            end-placeholder="结束日期"
+          >
+          </el-date-picker>
+        </el-form-item>
+        <!-- 图片和附件 -->
+        <el-form-item label="学生照片">
+          <i class="biaoshi biaoshi2"></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_top">校园动态</div>
+      <div id="div1" style="z-index: 1"></div>
+      <!-- 底部按钮 -->
+      <div class="con_btn">
+        <el-button type="primary">保 存</el-button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import E from 'wangeditor'
+export default {
+  name: 'tab3Add',
+  components: {},
+  data () {
+    // 这里存放数据
+    return {
+      time: '',
+      // 服务器前缀地址
+      baseURL: '',
+      token: '',
+      ruleForm: {
+        name: '',
+        sex: '1',
+        face: '',
+        position: '',
+        startTime: '',
+        endTime: '',
+        major: '',
+        thumb: ''
+      },
+      rules: {
+        name: [{ required: true, message: '不能为空', trigger: 'blur' }],
+        sex: [{ required: true, message: '不能为空', trigger: 'blur' }],
+        face: [{ required: true, message: '不能为空', trigger: 'change' }],
+        position: [{ required: true, message: '不能为空', trigger: 'change' }],
+        major: [{ required: true, message: '不能为空', trigger: 'change' }]
+      }
+    }
+  },
+  // 监听属性 类似于data概念
+  computed: {},
+  // 监控data中的数据变化
+  watch: {
+    time (val) {
+      this.handleSelect(val)
+    }
+  },
+  // 方法集合
+  methods: {
+    // 上传图片
+    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
+    },
+    // 点击返回
+    goBack () {
+      this.$confirm('点击返回后，编辑的信息将无法保存，是否继续？', '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      })
+        .then(async () => {
+          this.$router.push('/layout/tab3')
+        })
+        .catch(() => {
+          this.$message.info('已取消')
+        })
+    },
+    // 时间处理----------------
+    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 () {},
+  // 生命周期 - 挂载完成（可以访问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>
+.tab3Add {
+  height: 100%;
+  .conten {
+  padding-bottom: 10px;
+  overflow-y: auto;
+    height: calc(100% - 32px);
+    .con_top {
+      margin-bottom: 12px;
+      height: 40px;
+      line-height: 40px;
+      padding-left: 20px;
+      background-color: #fbfbfb;
+    }
+    .biaoshi1::before {
+      left: -64px;
+      top: -10px;
+    }
+    .biaoshi2::before {
+      left: -78px;
+    }
+    /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;
+    }
+    #div1{
+      width: 85%;
+      margin: 0 auto;
+    }
+    .con_btn {
+      width: 80px;
+      margin: 15px auto 0;
+    }
+  }
+}
+</style>

houtai/src/views/tab3/tab3Look.vue

@@ -0,0 +1,119 @@
+<template>
+  <div class="tab3Look">
+    <div class="insideTop">
+      学籍管理 > 查看学籍信息
+      <div class="add">
+        <el-button type="primary" @click="$router.push('/layout/tab3')"
+          >返 回</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>
+        <span>男</span>
+      </div>
+      <div class="row">
+        <div>政治面貌：</div>
+        <span>中共党员</span>
+      </div>
+      <div class="row">
+        <div>学籍号：</div>
+        <span>123051100544</span>
+      </div>
+      <div class="row">
+        <div>专业：</div>
+        <span>机械自动化</span>
+      </div>
+      <div class="row">
+        <div>任期：</div>
+        <span>2010年10月-2019年6月</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 class="con_top">校园动态</div>
+      <div id="div1">校园动态</div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'tab3Look',
+  components: {},
+  data () {
+    // 这里存放数据
+    return {
+      value: true,
+      srcList: [
+        '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>
+.tab3Look {
+  height: 100%;
+  .conten {
+    padding-bottom: 20px;
+    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;
+      }
+    }
+    #div1{
+      width: 85%;
+      margin: 0 auto;
+    }
+  }
+}
+</style>

houtai/src/views/tab4/edit1.vue

@@ -1,234 +0,0 @@
-<!--  -->
-<template>
-  <div class="tab4Edit1">
-    <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="camera">
-          <el-input
-            v-model.number="ruleForm.camera"
-            type="number"
-          ></el-input>
-          <span class="unit">个</span>
-        </el-form-item>
-        <el-form-item label="巡逻车：" prop="cruiser">
-          <el-input
-            v-model.number="ruleForm.cruiser"
-            type="number"
-          ></el-input>
-          <span class="unit">辆</span>
-        </el-form-item>
-        <el-form-item label="门禁锁：" prop="door">
-          <el-input
-            v-model.number="ruleForm.door"
-            type="number"
-          ></el-input>
-          <span class="unit">个</span>
-        </el-form-item>
-        <el-form-item label="无人机：" prop="aerial">
-          <el-input
-            v-model.number="ruleForm.aerial"
-            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/tab4')">返 回</el-button>
-      <el-button type="primary" @click="btnOk">提 交</el-button>
-    </div>
-  </div>
-</template>
-
-<script>
-import { lotSave } from '@/apis/tab4'
-export default {
-  name: 'tab4Edit1',
-  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: {
-        camera: '',
-        cruiser: '',
-        door: '',
-        aerial: ''
-      },
-      rules: {
-        camera: [
-          { required: true, message: '不能为空', trigger: 'blur' },
-          { validator: validatePass, trigger: 'blur' }
-        ],
-        cruiser: [
-          { required: true, message: '不能为空', trigger: 'blur' },
-          { validator: validatePass, trigger: 'blur' }
-        ],
-        door: [
-          { required: true, message: '不能为空', trigger: 'blur' },
-          { validator: validatePass, trigger: 'blur' }
-        ],
-        aerial: [
-          { 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 lotSave(obj)
-        if (res.code === 0) {
-          this.$message.success('修改成功')
-          this.$router.push('/layout/tab4')
-        }
-        // 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>
-.tab4Edit1 {
-  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/tab4/edit2.vue

@@ -1,282 +0,0 @@
-<!--  -->
-<template>
-  <div class="tab4Edit2">
-    <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="cameraStart">
-          <el-input
-            v-model.number="ruleForm.cameraStart"
-            type="number"
-          ></el-input>
-          <!-- <span class="unit">个</span> -->
-        </el-form-item>
-        <el-form-item label="监控-停用：" prop="cameraStop">
-          <el-input
-            v-model.number="ruleForm.cameraStop"
-            type="number"
-          ></el-input>
-          <!-- <span class="unit">个</span> -->
-        </el-form-item>
-        <el-form-item label="消防-启用：" prop="cruiserStart">
-          <el-input
-            v-model.number="ruleForm.cruiserStart"
-            type="number"
-          ></el-input>
-          <!-- <span class="unit">辆</span> -->
-        </el-form-item>
-        <el-form-item label="消防-停用：" prop="cruiserStop">
-          <el-input
-            v-model.number="ruleForm.cruiserStop"
-            type="number"
-          ></el-input>
-          <!-- <span class="unit">辆</span> -->
-        </el-form-item>
-        <el-form-item label="监测-启用：" prop="doorStart">
-          <el-input
-            v-model.number="ruleForm.doorStart"
-            type="number"
-          ></el-input>
-          <!-- <span class="unit">个</span> -->
-        </el-form-item>
-        <el-form-item label="监测-停用：" prop="doorStop">
-          <el-input
-            v-model.number="ruleForm.doorStop"
-            type="number"
-          ></el-input>
-          <!-- <span class="unit">个</span> -->
-        </el-form-item>
-        <el-form-item label="功能-启用：" prop="aerialStart">
-          <el-input
-            v-model.number="ruleForm.aerialStart"
-            type="number"
-          ></el-input>
-          <!-- <span class="unit">辆</span> -->
-        </el-form-item>
-        <el-form-item label="功能-停用：" prop="aerialStop">
-          <el-input
-            v-model.number="ruleForm.aerialStop"
-            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/tab4')">返 回</el-button>
-      <el-button type="primary" @click="btnOk">提 交</el-button>
-    </div>
-  </div>
-</template>
-
-<script>
-import { lotSave } from '@/apis/tab4'
-export default {
-  name: 'tab4Edit2',
-  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: {
-        cameraStart: '',
-        cameraStop: '',
-        cruiserStart: '',
-        cruiserStop: '',
-        doorStart: '',
-        doorStop: '',
-        aerialStart: '',
-        aerialStop: ''
-      },
-      rules: {
-        cameraStart: [
-          { required: true, message: '不能为空', trigger: 'blur' },
-          { validator: validatePass, trigger: 'blur' }
-        ],
-        cameraStop: [
-          { required: true, message: '不能为空', trigger: 'blur' },
-          { validator: validatePass, trigger: 'blur' }
-        ],
-        cruiserStart: [
-          { required: true, message: '不能为空', trigger: 'blur' },
-          { validator: validatePass, trigger: 'blur' }
-        ],
-        cruiserStop: [
-          { required: true, message: '不能为空', trigger: 'blur' },
-          { validator: validatePass, trigger: 'blur' }
-        ],
-        doorStart: [
-          { required: true, message: '不能为空', trigger: 'blur' },
-          { validator: validatePass, trigger: 'blur' }
-        ],
-        doorStop: [
-          { required: true, message: '不能为空', trigger: 'blur' },
-          { validator: validatePass, trigger: 'blur' }
-        ],
-        aerialStart: [
-          { required: true, message: '不能为空', trigger: 'blur' },
-          { validator: validatePass, trigger: 'blur' }
-        ],
-        aerialStop: [
-          { 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 = Number(this.myData.id)
-        obj.data = JSON.stringify(this.ruleForm)
-        obj.userUpdateTime = this.disTime
-        const res = await lotSave(obj)
-        if (res.code === 0) {
-          this.$message.success('修改成功')
-          this.$router.push('/layout/tab4')
-        }
-        // 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>
-.tab4Edit2 {
-  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/tab4/index.vue

@@ -1,63 +1,100 @@
 <template>
   <div class="tab4">
-    <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="insideTop">
+      学院宣传片管理
       <div class="add">
-        <el-button type="primary" @click="addVideo">新 增</el-button>
+        <el-button type="primary" @click="$router.push('/layout/tab4Add')">新增宣传片</el-button>
+      </div>
+    </div>
+    <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="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="location" label="设备位置"></el-table-column>
-        <el-table-column prop="userCreateTime" label="报警时间"></el-table-column>
-        <el-table-column prop="userUpdateTime" label="更新时间"></el-table-column>
-        <el-table-column label="操作" width="220">
-          <template #default="{ row }">
-            <el-button type="text" @click="editVideo(row.id)">修 改</el-button>
-            <el-button type="text" @click="delAlarm(row.id)" style="color:#b6242b;">删 除</el-button>
-          </template>
-        </el-table-column>
-      </el-table>
     </div>
-    <!-- 新增弹窗 -->
-    <Tab4Dialog :isShow.sync="isShow" @refresh="securityVideoList(from2)" ref="Tab4DialogRef"/>
     <!-- 分页 -->
-    <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"
       >
@@ -67,116 +104,97 @@
 </template>
 
 <script>
-import Tab4Dialog from '@/components/tab4Dialog.vue'
-import { securityList, securityVideoList, alarmRemove } from '@/apis/tab4'
 export default {
   name: 'tab4',
-  components: { Tab4Dialog },
+  components: {},
   data () {
     // 这里存放数据
     return {
-      total: 0,
-      isShow: false,
-      topInd: 1,
-      from: {
+      total: 100,
+      time: '',
+      formData: {
+        startTime: '',
+        endTime: '',
         pageNum: 1,
         pageSize: 9999,
         searchKey: '',
-        type: ''
-      },
-      from2: {
-        pageNum: 1,
-        pageSize: 15,
-        searchKey: ''
+        type: 'time'
       },
-      tableData: [],
-      tableData2: []
+      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.securityVideoList(this.from2)
     },
     sizeChange (val) {
       // console.log('条数改变了', val)
-      this.from2.pageNum = 1
-      this.from2.pageSize = val
-      this.securityVideoList(this.from2)
-    },
-    // 点击监控画面新增
-    addVideo () {
-      this.isShow = true
-      this.$refs.Tab4DialogRef.getCurrentTime()
-    },
-    // 点击安防设备修改
-    edit (val, id) {
-      let temp = ''
-      if (id === 1) temp = '/layout/tab4Edit1'
-      else temp = '/layout/tab4Edit2'
+    }, // 点击查看
+    lookGood (id) {
       this.$router.push({
-        path: temp,
-        query: { ...val, id }
+        path: '/layout/tab4Look'
+        // query: { conLeftId: this.conLeft }
       })
     },
-    // 点击监控画面修改
-    editVideo (id) {
-      this.$refs.Tab4DialogRef.videoDetailById(id)
-      this.isShow = true
-    },
-    // 点击删除
-    delAlarm (id) {
-      this.$confirm('确定删除吗?', '提示', {
-        confirmButtonText: '确定',
-        cancelButtonText: '取消',
-        type: 'warning'
-      })
-        .then(async () => {
-          await alarmRemove(id)
-          this.$message.success('删除成功!')
-          this.securityVideoList(this.from2)
-        })
-        .catch(() => {
-          this.$message.info('已取消删除')
-        })
+    // 时间处理----------------
+    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 securityList (data) {
-      const res = await securityList(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.camera}个；巡逻车：${temp.data.cruiser}辆；门禁锁：${temp.data.door}个；无人机：${temp.data.aerial}辆`
-        } else {
-          temp.type = '设备情况'
-          temp.conten = `监控-启用：${temp.data.cameraStart}；监控-停用：${temp.data.cameraStop}；消防-启用：${temp.data.cruiserStart}；消防-停用：${temp.data.cruiserStop}；监测-启用：${temp.data.doorStart}；监测-停用：${temp.data.doorStop}；功能-启用：${temp.data.aerialStart}；功能-停用：${temp.data.aerialStop}`
-        }
-        this.tableData.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 securityVideoList (data) {
-      const res = await securityVideoList(data)
-      this.total = res.data.total
-      this.tableData2 = res.data.records
+    checkTime (i) {
+      if (i < 10) {
+        i = '0' + i
+      }
+      return i
     }
   },
   // 生命周期 - 创建完成（可以访问当前this实例）
-  created () {
-    this.securityList(this.from)
-    this.securityVideoList(this.from2)
-  },
+  created () {},
   // 生命周期 - 挂载完成（可以访问DOM元素）
   mounted () {},
   beforeCreate () {}, // 生命周期 - 创建之前
@@ -190,43 +208,49 @@ export default {
 </script>
 <style lang='less' scoped>
 .tab4 {
-
-  /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;
-    }
-  }
-    .paging {
-      width: auto;
-      display: flex;
-      position: absolute;
-      bottom: 40px;
-      right: 50px;
-      .zong{
-        margin-right: 20px;
-        margin-top: 4px;
+    .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 {
+    position: absolute;
+    bottom: 15px;
+    right: 50px;
+  }
 }
 </style>