门禁记录 报警记录修改 3D库房配置页面修改

src/api/securityDoor/securityDoor.js

@@ -0,0 +1,9 @@
+import request from '@/utils/request'
+
+export function securitydoor() {
+  return request({
+    url: 'api/securitydoor/storeroom',
+    method: 'get'
+  })
+}
+export default { securitydoor }

src/api/storeManage/deviceManage/storeroom.js

@@ -27,4 +27,11 @@ export function edit(data) {
   })
 }
 
-export default { add, edit, del }
+export function get(data) {
+  return request({
+    url: 'api/storeroom/tree',
+    method: 'get'
+  })
+}
+
+export default { add, edit, del, get }

src/views/components/SecurityDoor.vue

@@ -0,0 +1,110 @@
+<template>
+  <div class="container-wrap">
+    <span class="right-top-line" />
+    <span class="left-bottom-line" />
+    <h3 class="table-title">
+      <p class="title-arrow">
+        <svg-icon icon-class="menjin" class-name="warehouse-svg" />门禁记录
+      </p>
+    </h3>
+    <el-table ref="table" style="min-width: 100%;" height="100%" :data="tableData" class="warehose-el-table" stripe>
+      <el-table-column prop="time" label="时间" align="center" min-width="60" />
+      <el-table-column label="库房" align="center" min-width="60">
+        <template>
+          档案库
+        </template>
+      </el-table-column>
+      <el-table-column prop="warning" label="警情" align="center" :show-overflow-tooltip="true" min-width="85" />
+    </el-table>
+  </div>
+</template>
+<script>
+import { securitydoor } from '@/api/securityDoor/securityDoor'
+export default {
+  name: 'SecurityDoor',
+  props: {
+    width: {
+      type: String,
+      default: '100%'
+    },
+    height: {
+      type: String,
+      default: '100%'
+    }
+  },
+  data() {
+    return {
+      tableData: [], // 正在展示的数据
+      socket: null
+    }
+  },
+  created() {
+    securitydoor().then((data) => {
+      this.tableData.push(...data)
+    })
+    this.openSocket()
+  },
+  destroyed() {
+    if (this.socket) {
+      this.socket.close()
+    }
+  },
+  methods: {
+    // 表格隔行变色
+    rowBgColor({ row, rowIndex }) {
+      if (rowIndex % 2 === 1) {
+        return 'light-blue'
+      } else {
+        return ''
+      }
+    },
+    openSocket() {
+      if (!('WebSocket' in window)) {
+        console.log('您的浏览器不支持WebSocket')
+      } else {
+        console.log('您的浏览器支持WebSocket')
+        const socketUrl = process.env.VUE_APP_WS_API + '/webSocket'
+        if (this.socket != null) {
+          this.socket.close()
+          this.socket = null
+        }
+        this.socket = new WebSocket(socketUrl)
+        // 打开事件
+        this.socket.onopen = () => {
+          console.log('websocket已经打开')
+          // 心跳检测重置
+          // this.heartCheck.start()
+        }
+        // 获得消息
+        this.socket.onmessage = (msg) => {
+          console.log(msg)
+          this.tableData.push(JSON.parse(msg.data.slice(7, msg.data.length - 2)).Data)
+        }
+        // 关闭事件
+        this.socket.onclose = function() {
+          console.log('websocket已关闭')
+        }
+        // 发生了错误事件
+        this.socket.onerror = function(e) {
+          console.log('websocket发生了错误')
+          console.log(e)
+        }
+      }
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+@import "~@/assets/styles/lend-manage.scss";
+.warehouse-left {
+  position: relative;
+  h2 {
+    position: absolute;
+    left: 50%;
+    top: 0;
+    transform: translateX(-50%);
+    color: #fff;
+    font-size: 16px;
+  }
+}
+</style>

src/views/components/WarehouseWarning.vue

@@ -63,7 +63,12 @@ export default {
   created() {
     this.openSocket()
   },
-
+  destroyed() {
+    clearInterval(this.timer)
+    if (this.socket) {
+      this.socket.close()
+    }
+  },
   methods: {
     // 表格隔行变色
     rowBgColor({ row, rowIndex }) {
@@ -101,7 +106,6 @@ export default {
           if (Math.round(bodyWrapper.scrollTop / 40) >= this.tableData.length - this.displayNum) {
             bodyWrapper.scrollTop = 0
           } else {
-            console.log(3333, this.displayNum)
             bodyWrapper.scrollTop += this.displayNum * 40
           }
           // if (scrollTop === bodyWrapper.scrollTop) {
@@ -138,7 +142,7 @@ export default {
         // 获得消息
         this.socket.onmessage = (msg) => {
           console.log(msg)
-          this.tableData.splice(0, this.tableData.length, ...JSON.parse(msg.data.slice(6, msg.data.length - 1)).Data)
+          this.tableData.splice(0, this.tableData.length, ...JSON.parse(msg.data.slice(7, msg.data.length - 2)).Data)
           // 对返回数据进行处理
           // this.heartCheck.start()
         }

src/views/environmentalScreen/index.vue

@@ -68,7 +68,7 @@
             </ul>
           </div>
         </div>
-        <div class="env-item container-wrap">
+        <!-- <div class="env-item container-wrap">
           <span class="right-top-line" />
           <span class="left-bottom-line" />
           <h3><i class="iconfont icon-menjinjilu" />门禁记录</h3>
@@ -84,7 +84,9 @@
             <el-table-column prop="warehouse" label="库房" align="center" min-width="60" />
             <el-table-column prop="name" label="档案名称" align="center" :show-overflow-tooltip="true" min-width="85" />
           </el-table>
-        </div>
+        </div> -->
+        <!-- 门禁记录 -->
+        <security-door :height="'calc(100% - 38px)'" />
       </div>
       <div class="env-main-middle">
         <div class="env-3d">
@@ -193,23 +195,8 @@
           <h3><i class="iconfont icon-zhenglishi" />整理室</h3>
           <LineChart :class-name="className[1]" :chart-data="lineChartData.collateRoomData" />
         </div>
-        <div class="env-item container-wrap">
-          <span class="right-top-line" />
-          <span class="left-bottom-line" />
-          <h3><i class="iconfont icon-baojingjilu" />报警记录</h3>
-          <el-table
-            ref="table"
-            style="min-width: 100%;"
-            height="calc(100% - 38px)"
-            :data="tableData"
-            class="warehose-el-table"
-            :row-class-name="rowBgColor"
-          >
-            <el-table-column prop="time" label="时间" align="center" min-width="60" />
-            <el-table-column prop="warehouse" label="库房" align="center" min-width="60" />
-            <el-table-column prop="warning" label="警情" align="center" :show-overflow-tooltip="true" min-width="85" />
-          </el-table>
-        </div>
+        <!-- 报警记录 -->
+        <warehouse-warning :height="'calc(100% - 38px)'" />
       </div>
     </div>
     <!-- 摄像头视频 -->
@@ -222,6 +209,8 @@ import { getCurrentTime } from '@/utils/index'
 import LineChart from './module/lineChart'
 import Video from '@/views/storeManage/warehouse3D/module/video'
 import data1 from './data1.json'
+import WarehouseWarning from '@/views/components/WarehouseWarning'
+import SecurityDoor from '@/views/components/SecurityDoor'
 const lineChartData = {
   readRoomData: {
     temperatureData: [16, 12, 15, 11, 20, 16, 15, 22],
@@ -235,6 +224,8 @@ const lineChartData = {
 export default {
   name: 'EnvironmentalScreen',
   components: {
+    WarehouseWarning,
+    SecurityDoor,
     LineChart,
     Video
   },

src/views/home.vue

@@ -103,7 +103,7 @@
         </el-col>
         <el-col :xs="24" :sm="24" :lg="8">
           <!-- 门禁记录 -->
-          <div class="container-wrap">
+          <!-- <div class="container-wrap">
             <span class="right-top-line" />
             <span class="left-bottom-line" />
             <h3 class="table-title">
@@ -116,7 +116,8 @@
               <el-table-column prop="warehouse" label="库房" align="center" min-width="60" />
               <el-table-column prop="warning" label="警情" align="center" :show-overflow-tooltip="true" min-width="85" />
             </el-table>
-          </div>
+          </div> -->
+          <security-door :height="'calc(100% - 40px)'" />
         </el-col>
         <el-col :xs="24" :sm="24" :lg="8">
           <!-- 报警记录 -->
@@ -180,6 +181,7 @@ import catePie from '@/views/components/echarts/catePie.vue'
 import typePie from '@/views/components/echarts/typePie.vue'
 import data1 from './data1.json'
 import WarehouseWarning from '@/views/components/WarehouseWarning'
+import SecurityDoor from '@/views/components/SecurityDoor'
 
 // const lineChartData = {
 //   newVisitis: {
@@ -205,6 +207,7 @@ export default {
   components: {
     // GithubCorner,
     WarehouseWarning,
+    SecurityDoor,
     PanelGroup,
     // LineChart,
     // RadarChart,

src/views/storeManage/warehouse3D/archivesStorage/index.vue

@@ -82,7 +82,8 @@
         </el-table>
       </div> -->
       <!-- 门禁记录 -->
-      <div class="container-wrap">
+      <security-door :height="'calc(100% - 40px)'" />
+      <!-- <div class="container-wrap">
         <span class="right-top-line" />
         <span class="left-bottom-line" />
         <h3 class="table-title">
@@ -100,7 +101,7 @@
           <el-table-column prop="warehouse" label="库房" align="center" min-width="60" />
           <el-table-column prop="warning" label="警情" align="center" :show-overflow-tooltip="true" min-width="85" />
         </el-table>
-      </div>
+      </div> -->
     </div>
   </div>
 </template>
@@ -108,9 +109,10 @@
 <script>
 import data1 from '../data1.json'
 import WarehouseWarning from '@/views/components/WarehouseWarning'
+import SecurityDoor from '@/views/components/SecurityDoor'
 export default {
   name: 'FullView',
-  components: { WarehouseWarning },
+  components: { WarehouseWarning, SecurityDoor },
   data() {
     return {
       tableData: [],
@@ -127,9 +129,6 @@ export default {
       _this.deviceState()
     }
     window.addEventListener('message', this.handleMessageDevice)
-    // this.$nextTick(() => {
-    //   this.tableRefScroll()
-    // })
   },
   methods: {
     // 传入设备状态data  / 给iframe传初始值

src/views/storeManage/warehouse3DConfig/index.vue

@@ -2,17 +2,8 @@
   <div>
     <div class="head-container">
       <div>
-        <el-select
-          v-model="room"
-          class="filter-item"
-          style="width:245px"
-        >
-          <el-option
-            v-for="item in options"
-            :key="item.value"
-            :label="item.label"
-            :value="item.value"
-          />
+        <el-select v-model="room" class="filter-item" style="width:245px">
+          <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
         </el-select>
       </div>
       <div>
@@ -23,15 +14,7 @@
       <span class="right-top-line" />
       <span class="left-bottom-line" />
       <!--表格渲染-->
-      <el-table
-        ref="table"
-        :data="tableData"
-        style="width: 100%;"
-        height="calc(100vh - 245px)"
-        :cell-class-name="cell"
-        @selection-change="selectionChangeHandler"
-        @row-click="clickRowHandler"
-      >
+      <el-table ref="table" :data="tableData" style="width: 100%;" height="calc(100vh - 245px)" :cell-class-name="cell" @selection-change="selectionChangeHandler" @row-click="clickRowHandler">
         <el-table-column type="selection" width="55" align="center" />
         <el-table-column type="index" label="序号" width="55" align="center" />
         <el-table-column prop="showPosition" label="显示位置" align="center" />
@@ -50,10 +33,7 @@
       </el-table>
     </div>
     <!-- 绑定参数对话框 -->
-    <el-dialog
-      title="绑定参数"
-      :visible.sync="dialogVisible"
-    >
+    <el-dialog title="绑定参数" :visible.sync="dialogVisible">
       <span class="dialog-right-top" />
       <span class="dialog-left-bottom" />
       <div class="setting-dialog">
@@ -93,16 +73,12 @@
 
 <script>
 import data from './data.json'
+import { get } from '@/api/storeManage/deviceManage/storeroom'
 export default {
   data() {
     return {
       room: '选项1',
-      options: [
-        { value: '选项1', label: '档案库' },
-        { value: '选项2', label: '阅览室' },
-        { value: '选项3', label: '整理室' },
-        { value: '选项4', label: '走廊' }
-      ],
+      options: [],
       tableData: [],
       selections: [],
       dialogVisible: false,
@@ -129,6 +105,11 @@ export default {
     }
   },
   created() {
+    get().then((data) => {
+      const rooms = data[0].children.map((x) => { return { value: x.id, label: x.name } })
+      this.options.push(...rooms)
+      this.room = rooms[0].value
+    })
     this.getData()
   },
   methods: {
@@ -170,28 +151,28 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-@import '~@/assets/styles/lend-manage.scss';
+@import "~@/assets/styles/lend-manage.scss";
 
-.head-container{
+.head-container {
   display: flex;
   justify-content: space-between;
-  .el-button{
+  .el-button {
     width: 106px;
     height: 30px;
-    background-color: #1AAE93;
+    background-color: #1aae93;
     border: none;
   }
 }
-::v-deep .el-icon-more:before{
-      margin-right: 8px;
+::v-deep .el-icon-more:before {
+  margin-right: 8px;
 }
-.app-container{
+.app-container {
   margin-top: 0;
   min-height: calc(100vh - 242px);
 }
-.form{
+.form {
   margin-left: 38px;
-  .form-first{
+  .form-first {
     color: #fff;
     background-color: #083177;
     width: 510px;
@@ -201,26 +182,26 @@ export default {
     padding-left: 16px;
   }
 }
-::v-deep .form .el-input__inner{
+::v-deep .form .el-input__inner {
   width: 510px;
   height: 36px;
 }
-::v-deep .el-dialog{
+::v-deep .el-dialog {
   width: 720px;
 }
-::v-deep .el-tag.el-tag--info{
+::v-deep .el-tag.el-tag--info {
   height: 26px;
   line-height: 26px;
-  background-color: #13439E;
+  background-color: #13439e;
   border: none;
   color: #fff;
 }
-::v-deep .el-tag.el-tag--info .el-tag__close{
+::v-deep .el-tag.el-tag--info .el-tag__close {
   background-color: #fff;
 }
-::v-deep .el-dialog .el-dialog__header .el-dialog__close::before{
-    position: absolute;
-    right: -43px;
-    top: 0;
+::v-deep .el-dialog .el-dialog__header .el-dialog__close::before {
+  position: absolute;
+  right: -43px;
+  top: 0;
 }
 </style>