监控管理基础页面

2 years ago · 45a37ec242
8 changed files with 530 additions and 5 deletions
--- a/src/assets/styles/lend-manage.scss
+++ b/src/assets/styles/lend-manage.scss
@ -222,3 +222,8 @@
    color: #666;
  }
 }
+//其他
+.delMsg{
+  color: #fff;
+  font-size: 16px;
+}
--- a/src/views/storeManage/listenManage/index.vue
+++ b/src/views/storeManage/listenManage/index.vue
@ -0,0 +1,63 @@
+<template>
+  <div class="app-container lend-container">
+    <div class="tab-content">
+      <span class="right-top-line" />
+      <span class="left-bottom-line" />
+      <span class="right-bottom-line" />
+      <ul class="tab-nav">
+        <li :class="{ 'active-tab-nav': activeIndex == 0 }" @click="changeActiveTab(0)">视频监控<i /></li>
+        <li :class="{ 'active-tab-nav': activeIndex == 1 }" @click="changeActiveTab(1)">监控配置<i /></li>
+        <!-- 最右侧装饰img -->
+        <span class="tab-right-img" />
+      </ul>
+      <component :is="comName" />
+
+    </div>
+  </div>
+</template>
+
+<script>
+import videoListen from './videoListen/index.vue'
+import listenConfig from './listenConfig/index.vue'
+
+export default {
+  name: 'ListenManage',
+  components: {
+    videoListen,
+    listenConfig
+  },
+  data() {
+    return {
+      activeIndex: 0
+    }
+  },
+  computed: {
+    comName: function() {
+      if (this.activeIndex === 0) {
+        return 'videoListen'
+      } else if (this.activeIndex === 1) {
+        return 'listenConfig'
+      }
+      return 'videoListen'
+    }
+  },
+  methods: {
+    changeActiveTab(data) {
+      this.activeIndex = data
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.lend-container{
+  .tab-content{
+    position: relative;
+    margin-top: 61px;
+    border: 1px solid #113d72;
+  }
+}
+.tab-content .tab-nav{
+  margin-bottom: 0;
+}
+</style>
--- a/src/views/storeManage/listenManage/listenConfig/index.vue
+++ b/src/views/storeManage/listenManage/listenConfig/index.vue
@ -0,0 +1,159 @@
+<template>
+  <div>
+    <div class="head-container">
+      <el-button size="mini" icon="el-icon-video-camera" :disabled="!(selections.length===1)" @click="handleBind">绑定摄像头</el-button>
+      <el-button icon="el-icon-delete" size="mini" :disabled="!selections.length" @click="delVisible=true">删除</el-button>
+      <el-select v-model="timeType" class="filter-item" style="width: 155px; height: 30px;margin:0 0 0 10px" @change="crud.toQuery">
+        <el-option v-for="item in timeOptions" :key="item.value" :label="item.label" :value="item.value" />
+      </el-select>
+      <el-input
+        v-model="keyWord"
+        size="small"
+        clearable
+        placeholder="请输入关键词"
+        style="width: 300px;margin-right:10px;padding-left:10px"
+        class="input-prepend filter-item"
+        @keyup.enter.native="crud.toQuery"
+      >
+        <el-select slot="prepend" v-model="optionVal" style="width: 100px">
+          <el-option
+            v-for="item in options"
+            :key="item.value"
+            :label="item.label"
+            :value="item.value"
+          />
+        </el-select>
+      </el-input>
+      <date-range-picker v-model="queryTime" class="date-item" />
+      <rrOperation />
+    </div>
+    <!-- :cell-class-name="cell" -->
+    <el-table
+      ref="table"
+      :data="tableData"
+      style="width: 100%;"
+      height="calc(100vh - 356px)"
+      @row-click="clickRowHandler"
+      @row-dblclick="handleDbClick"
+      @selection-change="selectionChangeHandler"
+    >
+      <el-table-column type="selection" width="55" align="center" />
+      <el-table-column type="index" label="序号" width="100" align="center" />
+      <el-table-column prop="area" label="所属区域" align="center" min-width="150" />
+      <el-table-column prop="" label="设备" align="center" min-width="150" />
+      <el-table-column prop="" label="摄像头" align="center" min-width="180" />
+      <el-table-column prop="" label="录像保存时长" align="center" min-width="180" />
+      <el-table-column prop="create_time" label="操作时间" align="center" min-width="180">
+        <template slot-scope="scope">
+          <div>{{ scope.row.create_time | parseTime }}</div>
+        </template>
+      </el-table-column>
+
+    </el-table>
+    <pagination />
+    <Details ref="DetailsDom" />
+    <BindCamera ref="bindDom" />
+    <!-- 删除 -->
+    <el-dialog :visible.sync="delVisible" title="提示">
+      <span class="dialog-right-top" />
+      <span class="dialog-left-bottom" />
+      <div class="setting-dialog">
+        <p class="delMsg">确定删除所选消息吗？</p>
+        <div slot="footer" class="dialog-footer">
+          <el-button type="primary" @click="handleDelConfirm">确定</el-button>
+        </div>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import rrOperation from '@crud/RR.operation'
+import CRUD, { presenter, crud, header } from '@crud/crud'
+import DateRangePicker from '@/components/DateRangePicker'
+import pagination from '@crud/Pagination'
+import Details from '../module/details.vue'
+import BindCamera from '../module/bindCamera.vue'
+import data1 from '../module/data1'
+// import qs from 'qs'
+export default {
+  name: 'ListenConfig',
+  components: { rrOperation, DateRangePicker, pagination, Details, BindCamera },
+  mixins: [presenter(), crud(), header()],
+  cruds() {
+    return CRUD({
+      url: 'api/alarmlog/',
+      sort: ['state'],
+      optShow: {}
+    })
+  },
+  data() {
+    return {
+      delVisible: false,
+      tableData: [],
+      selections: [],
+      keyWord: '',
+      timeType: 0,
+      timeOptions: [
+        { value: 0, label: '全部' },
+        { value: 1, label: '事件触发前后10秒' },
+        { value: 2, label: '事件触发前后20秒' },
+        { value: 3, label: '事件触发前后30秒' }
+      ],
+      optionVal: 1,
+      options: [
+        { value: 1, label: '所属区域' },
+        { value: 2, label: '设备' }
+      ],
+      queryTime: null
+    }
+  },
+  created() {
+    this.tableData = data1.rows
+  },
+  methods: {
+    // 获取数据前的处理
+    // [CRUD.HOOK.beforeRefresh]() {
+    //   this.crud.downloadLoading = true
+    //   this.crud.query.state = null
+    //   // this.crud.query.blurry = this.keyWord
+    //   if (this.oprType > -1) {
+    //     this.crud.query.state = this.oprType
+    //   }
+    //   this.crud.downloadLoading = false
+    // },
+    // 绑定摄像头
+    handleBind() {
+      this.$refs.bindDom.bindVisible = true
+    },
+    // 删除
+    handleDelConfirm() {
+      this.handleDelConfirm = false
+    },
+    clickRowHandler(row) {
+      this.$refs.table.toggleRowSelection(row) // 单击选中
+    },
+    // 双击详情
+    handleDbClick(row) {
+      // console.log(row)
+      this.$refs.DetailsDom.detailsVisible = true
+    },
+    selectionChangeHandler(val) {
+      this.selections = val
+    }
+    // cell({ row, columnIndex }) {
+    //   if (row.state === true && columnIndex === 2) {
+    //     return 'have-clear'
+    //   } else if (row.state === false && columnIndex === 2) {
+    //     return 'fail-clear'
+    //   }
+    // }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+@import '~@/assets/styles/lend-manage.scss';
+@import "~@/assets/styles/archives-manage.scss";
+
+</style>
--- a/src/views/storeManage/listenManage/module/bindCamera.vue
+++ b/src/views/storeManage/listenManage/module/bindCamera.vue
@ -0,0 +1,105 @@
+<template>
+  <div>
+    <el-dialog append-to-body :close-on-click-modal="false" :visible.sync="bindVisible" title="绑定摄像头">
+      <span class="dialog-right-top" />
+      <span class="dialog-left-bottom" />
+      <div class="setting-dialog">
+        <div class="head-container">
+          <p>
+            <span class="bule">选择设备</span>
+            <el-select v-model="devType" class="filter-item" style="width: 155px; height: 30px;margin:0 0 0 10px">
+              <el-option v-for="item in devOptions" :key="item.value" :label="item.label" :value="item.value" />
+            </el-select>
+          </p>
+          <p>
+            <span class="bule">保存录像时长</span>
+            <el-select v-model="timeType" class="filter-item" style="width: 155px; height: 30px;margin:0 0 0 10px">
+              <el-option v-for="item in timeOptions" :key="item.value" :label="item.label" :value="item.value" />
+            </el-select>
+          </p>
+        </div>
+        <el-table
+          ref="table"
+          :data="tableData"
+          style="width: 100%;"
+          height="calc(100vh - 556px)"
+          @row-click="clickRowHandler"
+        >
+          <el-table-column type="selection" width="55" align="center" />
+          <el-table-column type="index" label="序号" width="80" align="center" />
+          <el-table-column prop="area" label="所属区域" min-width="150" align="center" />
+          <el-table-column prop="" label="设备类型" align="center" min-width="150" />
+          <el-table-column prop="" label="设备名称" align="center" min-width="150" />
+        </el-table>
+        <!-- 分页器 -->
+        <pagination />
+        <div slot="footer" class="dialog-footer">
+          <el-button type="primary" @click="handleSave">保存</el-button>
+        </div>
+      </div>
+
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import data1 from './data1'
+import pagination from '@crud/Pagination'
+import CRUD, { presenter } from '@crud/crud'
+
+export default {
+  components: { pagination },
+  mixins: [presenter()],
+  cruds() {
+    return CRUD({
+      url: 'api/alarmlog/',
+      sort: ['state'],
+      optShow: {}
+    })
+  },
+  data() {
+    return {
+      tableData: [],
+      bindVisible: false,
+      devType: 1,
+      devOptions: [
+        { value: 1, label: '库房名称-密集架1' },
+        { value: 2, label: '库房名称-密集架2' }
+      ],
+      timeType: 1,
+      timeOptions: [
+        { value: 1, label: '事件触发前后10秒' },
+        { value: 2, label: '事件触发前后20秒' },
+        { value: 3, label: '事件触发前后30秒' }
+      ]
+    }
+  },
+  created() {
+    this.tableData = data1.rows
+  },
+  methods: {
+    handleSave() {
+      this.bindVisible = false
+    },
+    clickRowHandler(row) {
+      this.$refs.table.toggleRowSelection(row) // 单击选中
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+@import '~@/assets/styles/lend-manage.scss';
+@import "~@/assets/styles/archives-manage.scss";
+.head-container{
+  display: flex;
+  justify-content: space-between;
+  padding-top: 0;
+  p{
+    flex: 1;
+  }
+}
+.bule{
+  color: #339CFF;
+}
+</style>
--- a/src/views/storeManage/listenManage/module/data1.json
+++ b/src/views/storeManage/listenManage/module/data1.json
@ -0,0 +1,17 @@
+{
+  "rows":[
+    {
+      "area":"档案库"
+    },
+    {
+      "area":"档案库"
+    },
+    {},
+    {},
+    {},
+    {},
+    {},
+    {},
+    {}
+  ]
+}
--- a/src/views/storeManage/listenManage/module/details.vue
+++ b/src/views/storeManage/listenManage/module/details.vue
@ -0,0 +1,67 @@
+<template>
+  <div>
+    <el-dialog append-to-body :close-on-click-modal="false" :visible.sync="detailsVisible" title="绑定详情">
+      <span class="dialog-right-top" />
+      <span class="dialog-left-bottom" />
+      <div class="setting-dialog">
+        <div class="head-container">
+          <p>
+            <span class="bule">选择设备：</span>
+            <span class="white">库房名称-密集架1</span>
+          </p>
+          <p>
+            <span class="bule">保存录像时长：</span>
+            <span class="white">事件触发前后10秒</span>
+          </p>
+        </div>
+        <el-table
+          ref="table"
+          :data="tableData"
+          style="width: 100%;"
+          height="calc(100vh - 556px)"
+        >
+          <el-table-column type="index" label="序号" width="80" align="center" />
+          <el-table-column prop="area" label="所属区域" min-width="150" align="center" />
+          <el-table-column prop="" label="设备类型" align="center" min-width="150" />
+          <el-table-column prop="" label="设备名称" align="center" min-width="150" />
+        </el-table>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import data1 from './data1'
+export default {
+  data() {
+    return {
+      detailsVisible: false
+    }
+  },
+  created() {
+    this.tableData = data1.rows
+  },
+  methods: {
+
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+@import '~@/assets/styles/lend-manage.scss';
+@import "~@/assets/styles/archives-manage.scss";
+.head-container{
+  display: flex;
+  justify-content: space-between;
+  padding-top: 0;
+  p{
+    flex: 1;
+  }
+}
+.bule{
+  color: #339CFF;
+}
+.white{
+  color: #fff;
+}
+</style>
--- a/src/views/storeManage/listenManage/videoListen/index.vue
+++ b/src/views/storeManage/listenManage/videoListen/index.vue
@ -0,0 +1,114 @@
+<template>
+  <div>
+    <div class="head-container">
+      <el-select v-model="optionVal" class="filter-item" style="width: 125px; height: 30px;margin:0 10px 0 0">
+        <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
+      </el-select>
+      <date-range-picker v-model="queryTime" class="date-item" />
+      <rrOperation />
+    </div>
+    <!-- :cell-class-name="cell" -->
+    <el-table
+      ref="table"
+      :data="tableData"
+      style="width: 100%;"
+      height="calc(100vh - 356px)"
+    >
+      <!-- <el-table-column type="selection" width="55" align="center" /> -->
+      <el-table-column type="index" label="序号" width="80" align="center" />
+      <el-table-column prop="area" label="所属区域" min-width="150" align="center" />
+      <el-table-column prop="" label="设备" align="center" min-width="150" />
+      <el-table-column prop="" label="摄像头" align="center" min-width="150" />
+      <el-table-column prop="" label="事件" align="center" min-width="180" />
+      <el-table-column prop="" label="内容描述" align="center" min-width="180" />
+      <el-table-column prop="" label="事件发生时间" align="center" min-width="180">
+        <template slot-scope="scope">
+          <div>{{ scope.row.create_time | parseTime }}</div>
+        </template>
+      </el-table-column>
+      <el-table-column prop="" label="操作" align="center" min-width="100">
+        <template>
+          <el-button size="mini" style="background:#3A99FD" @click="handleListen">查看监控</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+    <pagination />
+    <!-- 查看监控 -->
+    <el-dialog append-to-body :close-on-click-modal="false" :visible.sync="lookVisible" title="查看监控">
+      <span class="dialog-right-top" />
+      <span class="dialog-left-bottom" />
+      <div class="setting-dialog">
+        <!--  -->
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import rrOperation from '@crud/RR.operation'
+import CRUD, { presenter, crud, header } from '@crud/crud'
+import DateRangePicker from '@/components/DateRangePicker'
+import pagination from '@crud/Pagination'
+import data1 from '../module/data1'
+// import qs from 'qs'
+export default {
+  name: 'VideoListen',
+  components: { rrOperation, DateRangePicker, pagination },
+  mixins: [presenter(), crud(), header()],
+  cruds() {
+    return CRUD({
+      url: 'api/alarmlog/',
+      sort: ['state'],
+      optShow: {}
+    })
+  },
+  data() {
+    return {
+      tableData: [],
+      lookVisible: false,
+      optionVal: 0,
+      options: [
+        { value: 0, label: '全部' },
+        { value: 1, label: '密集架开架' },
+        { value: 2, label: '密集架报警' },
+        { value: 3, label: '通道门报警' }
+      ],
+      queryTime: null
+    }
+  },
+  created() {
+    this.tableData = data1.rows
+  },
+  methods: {
+    // 获取数据前的处理
+    // [CRUD.HOOK.beforeRefresh]() {
+    //   this.crud.downloadLoading = true
+    //   this.crud.query.state = null
+    //   // this.crud.query.blurry = this.keyWord
+    //   if (this.oprType > -1) {
+    //     this.crud.query.state = this.oprType
+    //   }
+    //   this.crud.downloadLoading = false
+    // },
+
+    // cell({ row, columnIndex }) {
+    //   if (row.state === true && columnIndex === 2) {
+    //     return 'have-clear'
+    //   } else if (row.state === false && columnIndex === 2) {
+    //     return 'fail-clear'
+    //   }
+    // }
+
+    // 查看监控
+    handleListen() {
+      this.lookVisible = true
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+@import '~@/assets/styles/lend-manage.scss';
+@import "~@/assets/styles/archives-manage.scss";
+
+</style>
--- a/src/views/system/notifyManage/index.vue
+++ b/src/views/system/notifyManage/index.vue
@ -476,11 +476,6 @@ textarea{
  align-items: center;
  padding-right: 20px;
 }
-
-.delMsg{
-  color: #fff;
-  font-size: 16px;
-}
 ::v-deep .el-form-item__error{
  top: 93%;
 }