30 changed files with 2217 additions and 380 deletions
-
10src/api/storeManage/deviceManage/device.js
-
11src/api/system/zkt.js
-
2src/router/index.js
-
7src/router/routers.js
-
2src/views/archivesManage/archivesCheck/module/addCheck.vue
-
2src/views/archivesManage/archivesCheck/module/checkDetail.vue
-
72src/views/archivesManage/archivesList/archivesAnjuan/index.vue
-
70src/views/archivesManage/archivesList/archivesJuannei/index.vue
-
7src/views/archivesManage/archivesList/module/archivesInfo/index.vue
-
6src/views/archivesManage/archivesList/module/packing/index.vue
-
4src/views/archivesManage/archivesSearch/index.vue
-
2src/views/archivesManage/archivesSearch/module/detailDialog.vue
-
2src/views/archivesManage/caseManage/caseList/index-oldPrint.vue
-
4src/views/archivesManage/caseManage/caseList/index.vue
-
2src/views/archivesManage/caseManage/caseList/module/detailDialog.vue
-
43src/views/archivesManage/caseManage/caseList/module/form.vue
-
2src/views/archivesManage/caseManage/caseList/module/print.vue
-
2src/views/archivesManage/outInStorage/inStorage/index.vue
-
2src/views/archivesManage/outInStorage/inStorage/module/handDialog.vue
-
2src/views/archivesManage/outInStorage/module/detailDialog.vue
-
2src/views/archivesManage/outInStorage/outInHistory/index.vue
-
2src/views/archivesManage/outInStorage/outStorage/index.vue
-
15src/views/components/AccessDoor.vue
-
9src/views/environmentalScreen/index.js
-
11src/views/environmentalScreen/index.vue
-
861src/views/home-old.vue
-
426src/views/home.vue
-
287src/views/screenVideo/index.vue
-
676src/views/storeManage/deviceManage/module/deviceDetail-old.vue
-
54src/views/storeManage/deviceManage/module/deviceDetail.vue
@ -0,0 +1,861 @@ |
|||||
|
<template> |
||||
|
<div class="dashboard-container"> |
||||
|
<div class="dashboard-editor-container"> |
||||
|
<!-- <github-corner class="github-corner" /> --> |
||||
|
<panel-group /> |
||||
|
<!-- <el-row style="background:#fff;padding:16px 16px 0;margin-bottom:32px;"> |
||||
|
<line-chart :chart-data="lineChartData" /> |
||||
|
</el-row> --> |
||||
|
<el-row :gutter="20" style="margin-bottom:20px;height: 152px;"> |
||||
|
<el-col :xs="24" :sm="24" :lg="8"> |
||||
|
<!-- search-area --> |
||||
|
<div class="container-left" style="height: 100%;margin: 0; position: relative;"> |
||||
|
<span class="right-top-line" /> |
||||
|
<span class="left-bottom-line" /> |
||||
|
<h3 class=" table-title" style="margin-bottom: 26px;"> |
||||
|
<p class="title-arrow"> |
||||
|
档案检索 |
||||
|
</p> |
||||
|
</h3> |
||||
|
<SearchAcrives :is-home-search="isHomeSearch" /> |
||||
|
</div> |
||||
|
</el-col> |
||||
|
<el-col :xs="24" :sm="24" :lg="8"> |
||||
|
<div class="container-left" style="height: 100%;margin: 0; position: relative;"> |
||||
|
<span class="right-top-line" /> |
||||
|
<span class="left-bottom-line" /> |
||||
|
<h3 class=" table-title"> |
||||
|
<p class="title-arrow"> |
||||
|
<i class="iconfont icon-kongqizhiliangshuju" />环境数据 |
||||
|
</p> |
||||
|
</h3> |
||||
|
<div class="home-floor-tab"> |
||||
|
<p :class="{ 'active-floor': floorEnvIndex == 0 }" @click="changeFloorEnvTab(0)">3楼</p> |
||||
|
<!-- <p :class="{ 'active-floor': floorEnvIndex == 1 }" @click="changeFloorEnvTab(1)">7楼</p> --> |
||||
|
</div> |
||||
|
<el-carousel ref="carouselEnvRef" trigger="click" :interval="10000" indicator-position="none" height="110px" arrow="never" @change="handleEnvChange"> |
||||
|
<el-carousel-item> |
||||
|
<div class="warehouse-tab" style="display: flex; justify-content: center; align-items: center; height: calc(100%); "> |
||||
|
<div class="five-bottom"> |
||||
|
<!-- <p class="env-title">档案库</p> --> |
||||
|
<ul class="leakage-list"> |
||||
|
<li :class="{ 'leakage-warn': topDisplayData.DAK_DIV_TOP_001.curstatus > 0 }"> |
||||
|
<p>温度</p> |
||||
|
<span>{{ topDisplayData.DAK_DIV_TOP_001.curValue }}</span> |
||||
|
</li> |
||||
|
<li :class="{ 'leakage-warn': topDisplayData.DAK_DIV_TOP_002.curstatus > 0 }"> |
||||
|
<p>湿度</p> |
||||
|
<span>{{ topDisplayData.DAK_DIV_TOP_002.curValue }}</span> |
||||
|
</li> |
||||
|
<li :class="{ 'leakage-warn': topDisplayData.DAK_DIV_TOP_003.curstatus > 0 }"> |
||||
|
<p>CO2</p> |
||||
|
<span>{{ topDisplayData.DAK_DIV_TOP_003.curValue }}</span> |
||||
|
</li> |
||||
|
<li :class="{ 'leakage-warn': topDisplayData.DAK_DIV_TOP_005.curstatus > 0 }"> |
||||
|
<p>PM2.5</p> |
||||
|
<span>{{ topDisplayData.DAK_DIV_TOP_005.curValue }}</span> |
||||
|
</li> |
||||
|
<li :class="{ 'leakage-warn': topDisplayData.DAK_DIV_TOP_006.curstatus > 0 }"> |
||||
|
<p>PM10</p> |
||||
|
<span>{{ topDisplayData.DAK_DIV_TOP_006.curValue }}</span> |
||||
|
</li> |
||||
|
<li :class="{ 'leakage-warn': topDisplayData.DAK_DIV_TOP_004.curstatus > 0 }"> |
||||
|
<p>TVOC</p> |
||||
|
<span>{{ topDisplayData.DAK_DIV_TOP_004.curValue }}</span> |
||||
|
</li> |
||||
|
</ul> |
||||
|
</div> |
||||
|
<!-- <div style="display: flex; justify-content:space-between; align-items: center;"> |
||||
|
<div class="five-bottom"> |
||||
|
<p class="env-title">整理室</p> |
||||
|
<ul class="leakage-list"> |
||||
|
<li :class="{ 'leakage-warn': oaoMessage.ZLS_MO_OAO_001.alarmState }"> |
||||
|
<p>温度</p> |
||||
|
<span>{{ oaoMessage.ZLS_MO_OAO_001.wendu }}</span> |
||||
|
</li> |
||||
|
<li :class="{ 'leakage-warn': oaoMessage.ZLS_MO_OAO_001.alarmState }"> |
||||
|
<p>湿度</p> |
||||
|
<span>{{ oaoMessage.ZLS_MO_OAO_001.sidu }}</span> |
||||
|
</li> |
||||
|
</ul> |
||||
|
</div> |
||||
|
<div class="five-bottom" style="padding-right: 13px;"> |
||||
|
<p class="env-title">阅览室</p> |
||||
|
<ul class="leakage-list"> |
||||
|
<li :class="{ 'leakage-warn': oaoMessage.YLS_MO_OAO_001.alarmState }"> |
||||
|
<p>温度</p> |
||||
|
<span>{{ oaoMessage.YLS_MO_OAO_001.wendu }}</span> |
||||
|
</li> |
||||
|
<li :class="{ 'leakage-warn': oaoMessage.YLS_MO_OAO_001.alarmState}"> |
||||
|
<p>湿度</p> |
||||
|
<span>{{ oaoMessage.YLS_MO_OAO_001.sidu }}</span> |
||||
|
</li> |
||||
|
</ul> |
||||
|
</div> |
||||
|
</div> --> |
||||
|
</div> |
||||
|
</el-carousel-item> |
||||
|
<!-- <el-carousel-item> |
||||
|
<div class="warehouse-tab" style="height: calc(100%); padding-left: 15px;"> |
||||
|
<div style="display: flex; justify-content: flex-start; align-items: center;"> |
||||
|
<p class="env-title">现行<br>文件室</p> |
||||
|
<ul class="leakage-list"> |
||||
|
<li :class="{ 'leakage-warn': topDisplayData.XXW_DIV_TOP_001.curstatus > 0 }"> |
||||
|
<p>温度</p> |
||||
|
<span>{{ topDisplayData.XXW_DIV_TOP_001.curValue }}</span> |
||||
|
</li> |
||||
|
<li :class="{ 'leakage-warn': topDisplayData.XXW_DIV_TOP_002.curstatus > 0 }"> |
||||
|
<p>湿度</p> |
||||
|
<span>{{ topDisplayData.XXW_DIV_TOP_002.curValue }}</span> |
||||
|
</li> |
||||
|
<li :class="{ 'leakage-warn': topDisplayData.XXW_DIV_TOP_003.curstatus > 0 }"> |
||||
|
<p>CO2</p> |
||||
|
<span>{{ topDisplayData.XXW_DIV_TOP_003.curValue }}</span> |
||||
|
</li> |
||||
|
<li :class="{ 'leakage-warn': topDisplayData.XXW_DIV_TOP_005.curstatus > 0 }"> |
||||
|
<p>PM2.5</p> |
||||
|
<span>{{ topDisplayData.XXW_DIV_TOP_005.curValue }}</span> |
||||
|
</li> |
||||
|
<li :class="{ 'leakage-warn': topDisplayData.XXW_DIV_TOP_006.curstatus > 0 }"> |
||||
|
<p>PM10</p> |
||||
|
<span>{{ topDisplayData.XXW_DIV_TOP_006.curValue }}</span> |
||||
|
</li> |
||||
|
<li :class="{ 'leakage-warn': topDisplayData.XXW_DIV_TOP_004.curstatus > 0 }"> |
||||
|
<p>TVOC</p> |
||||
|
<span>{{ topDisplayData.XXW_DIV_TOP_004.curValue }}</span> |
||||
|
</li> |
||||
|
</ul> |
||||
|
</div> |
||||
|
<div style="display: flex; justify-content: flex-start; align-items: center;"> |
||||
|
<p class="env-title">待销<br>文件室</p> |
||||
|
<ul class="leakage-list"> |
||||
|
<li :class="{ 'leakage-warn': topDisplayData.DXW_DIV_TOP_001.curstatus > 0 }"> |
||||
|
<p>温度</p> |
||||
|
<span>{{ topDisplayData.DXW_DIV_TOP_001.curValue }}</span> |
||||
|
</li> |
||||
|
<li :class="{ 'leakage-warn': topDisplayData.DXW_DIV_TOP_002.curstatus > 0 }"> |
||||
|
<p>湿度</p> |
||||
|
<span>{{ topDisplayData.DXW_DIV_TOP_002.curValue }}</span> |
||||
|
</li> |
||||
|
<li :class="{ 'leakage-warn': topDisplayData.DXW_DIV_TOP_003.curstatus > 0 }"> |
||||
|
<p>CO2</p> |
||||
|
<span>{{ topDisplayData.DXW_DIV_TOP_003.curValue }}</span> |
||||
|
</li> |
||||
|
<li :class="{ 'leakage-warn': topDisplayData.DXW_DIV_TOP_005.curstatus > 0 }"> |
||||
|
<p>PM2.5</p> |
||||
|
<span>{{ topDisplayData.DXW_DIV_TOP_005.curValue }}</span> |
||||
|
</li> |
||||
|
<li :class="{ 'leakage-warn': topDisplayData.DXW_DIV_TOP_006.curstatus > 0 }"> |
||||
|
<p>PM10</p> |
||||
|
<span>{{ topDisplayData.DXW_DIV_TOP_006.curValue }}</span> |
||||
|
</li> |
||||
|
<li :class="{ 'leakage-warn': topDisplayData.DXW_DIV_TOP_004.curstatus > 0 }"> |
||||
|
<p>TVOC</p> |
||||
|
<span>{{ topDisplayData.DXW_DIV_TOP_004.curValue }}</span> |
||||
|
</li> |
||||
|
</ul> |
||||
|
</div> |
||||
|
</div> |
||||
|
</el-carousel-item> --> |
||||
|
</el-carousel> |
||||
|
</div> |
||||
|
</el-col> |
||||
|
<el-col :xs="24" :sm="24" :lg="8"> |
||||
|
<div class="container-left" style="height: 100%;margin: 0; position: relative;"> |
||||
|
<span class="right-top-line" /> |
||||
|
<span class="left-bottom-line" /> |
||||
|
<h3 class=" table-title"> |
||||
|
<p class="title-arrow"> |
||||
|
<svg-icon icon-class="a-3Dkufang" class-name="warehouse-svg" />3D库房 |
||||
|
</p> |
||||
|
</h3> |
||||
|
<div class="home-floor-tab"> |
||||
|
<p :class="{ 'active-floor': floorIndex == 0 }" @click="changeFloorTab(0)">3楼</p> |
||||
|
<!-- <p :class="{ 'active-floor': floorIndex == 1 }" @click="changeFloorTab(1)">7楼</p> --> |
||||
|
</div> |
||||
|
<el-carousel ref="carouselRef" trigger="click" :interval="4000" indicator-position="none" height="110px" arrow="never" @change="handleChange"> |
||||
|
<el-carousel-item> |
||||
|
<div class="warehouse-tab"> |
||||
|
<ul class="warehouse-nav"> |
||||
|
<li @click="changeActiveTab(1,0)"> |
||||
|
<span /> |
||||
|
<p>全景图</p> |
||||
|
</li> |
||||
|
<!-- <li @click="changeActiveTab(1,1)"> |
||||
|
<span /> |
||||
|
<p>档案库</p> |
||||
|
</li> |
||||
|
<li @click="changeActiveTab(1,2)"> |
||||
|
<span /> |
||||
|
<p>整理室</p> |
||||
|
</li> |
||||
|
<li @click="changeActiveTab(1,3)"> |
||||
|
<span /> |
||||
|
<p>阅览室</p> |
||||
|
</li> --> |
||||
|
</ul> |
||||
|
</div> |
||||
|
</el-carousel-item> |
||||
|
<!-- <el-carousel-item> |
||||
|
<div class="warehouse-tab"> |
||||
|
<ul class="warehouse-nav"> |
||||
|
<li @click="changeActiveTab(0,4)"> |
||||
|
<span /> |
||||
|
<p>全景图</p> |
||||
|
</li> |
||||
|
<li @click="changeActiveTab(0,5)"> |
||||
|
<span /> |
||||
|
<p>现行文件室</p> |
||||
|
</li> |
||||
|
<li @click="changeActiveTab(0,6)"> |
||||
|
<span /> |
||||
|
<p>待销文件室</p> |
||||
|
</li> |
||||
|
</ul> |
||||
|
</div> |
||||
|
</el-carousel-item> --> |
||||
|
</el-carousel> |
||||
|
</div> |
||||
|
</el-col> |
||||
|
</el-row> |
||||
|
<el-row :gutter="20" style="margin-bottom:20px;height: calc(50vh - 251px);"> |
||||
|
<el-col :xs="24" :sm="24" :lg="8"> |
||||
|
<!-- 待办事项 --> |
||||
|
<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="tongzhigonggao" class-name="warehouse-svg" />待办事项 |
||||
|
</p> |
||||
|
</h3> |
||||
|
<div style="height: calc(100% - 40px);overflow-y: auto;overflow-x: hidden;"> |
||||
|
<ul v-if="waitBorrowerData.length !== 0" class="todo-list"> |
||||
|
<li v-for="(item,index) in waitBorrowerData" :key="index" :class="item.title.includes('警告') || item.title.includes('逾期') ? 'warn-info' :''" @click="handleToWaiting(item)"> |
||||
|
<el-tooltip class="item" effect="dark" :content="item.title" :enterable="false" placement="top"> |
||||
|
<p>{{ item.title }}</p> |
||||
|
</el-tooltip> |
||||
|
<span>{{ item.update_time | parseTime }}</span> |
||||
|
</li> |
||||
|
</ul> |
||||
|
<div v-else class="empty-main" style="height: 100%;"> |
||||
|
<svg-icon icon-class="empty" class-name="empty-img" /> |
||||
|
<p>暂无数据</p> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</el-col> |
||||
|
<el-col :xs="24" :sm="24" :lg="8"> |
||||
|
<!-- 门禁记录 --> |
||||
|
<security-door :height="'calc(100% - 40px)'" /> |
||||
|
</el-col> |
||||
|
<el-col :xs="24" :sm="24" :lg="8"> |
||||
|
<!-- 报警记录 --> |
||||
|
<warehouse-warning :height="'calc(100% - 40px)'" /> |
||||
|
</el-col> |
||||
|
</el-row> |
||||
|
<el-row :gutter="20" style="height: calc(50vh - 251px);"> |
||||
|
<el-col :xs="24" :sm="24" :lg="8"> |
||||
|
<!-- 档案借阅 --> |
||||
|
<div class="container-wrap"> |
||||
|
<span class="right-top-line" /> |
||||
|
<span class="left-bottom-line" /> |
||||
|
<h3 class="table-title"> |
||||
|
<p class="title-arrow">档案借阅</p> |
||||
|
</h3> |
||||
|
<div class="chart-wrapper"> |
||||
|
<lend-across :lend-data="lendData" /> |
||||
|
</div> |
||||
|
</div> |
||||
|
</el-col> |
||||
|
<el-col :xs="24" :sm="24" :lg="8"> |
||||
|
<!-- 档案类别 --> |
||||
|
<div class="container-wrap"> |
||||
|
<span class="right-top-line" /> |
||||
|
<span class="left-bottom-line" /> |
||||
|
<h3 class="table-title"> |
||||
|
<p class="title-arrow">档案类别</p> |
||||
|
</h3> |
||||
|
<div class="chart-wrapper"> |
||||
|
<cate-pie :cate-data="cateData" /> |
||||
|
</div> |
||||
|
</div> |
||||
|
</el-col> |
||||
|
<el-col :xs="24" :sm="24" :lg="8"> |
||||
|
<!-- 档案类型 --> |
||||
|
<div class="container-wrap"> |
||||
|
<span class="right-top-line" /> |
||||
|
<span class="left-bottom-line" /> |
||||
|
<h3 class="table-title"> |
||||
|
<p class="title-arrow">档案类型</p> |
||||
|
</h3> |
||||
|
<div v-if="typeData.length !== 0" class="chart-wrapper"> |
||||
|
<type-pie :type-data="typeData" /> |
||||
|
</div> |
||||
|
<div v-else class="empty-main"> |
||||
|
<svg-icon icon-class="empty" class-name="empty-img" /> |
||||
|
<p>暂无数据</p> |
||||
|
</div> |
||||
|
</div> |
||||
|
</el-col> |
||||
|
</el-row> |
||||
|
</div> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import PanelGroup from './dashboard/PanelGroup' |
||||
|
import lendAcross from '@/views/components/echarts/lendAcross.vue' |
||||
|
import catePie from '@/views/components/echarts/catePie.vue' |
||||
|
import typePie from '@/views/components/echarts/typePie.vue' |
||||
|
import WarehouseWarning from '@/views/components/WarehouseWarning' |
||||
|
import SecurityDoor from '@/views/components/SecurityDoor' |
||||
|
import SearchAcrives from '@/views/archivesManage/archivesSearch/index' |
||||
|
import { statisticsCrud } from '@/views/system/archiveStatistics/mixins/statistics' |
||||
|
import { FetchWaitBorrower } from '@/api/archivesManage/lendManage' |
||||
|
import displayConfigApi from '@/api/storeManage/displayConfig' |
||||
|
import thirdApi from '@/api/thirdApi' |
||||
|
|
||||
|
import { mapGetters } from 'vuex' |
||||
|
|
||||
|
export default { |
||||
|
name: 'Dashboard', |
||||
|
components: { |
||||
|
WarehouseWarning, |
||||
|
SecurityDoor, |
||||
|
PanelGroup, |
||||
|
lendAcross, |
||||
|
catePie, |
||||
|
typePie, |
||||
|
SearchAcrives |
||||
|
}, |
||||
|
mixins: [statisticsCrud], |
||||
|
data() { |
||||
|
return { |
||||
|
waitBorrowerData: [], |
||||
|
floorIndex: 0, |
||||
|
floorEnvIndex: 0, |
||||
|
isHomeSearch: false, |
||||
|
roomId: null, |
||||
|
allDisplayConfigData: [], |
||||
|
displayConfigData: [], |
||||
|
url: '', |
||||
|
allDeviceIds: [], |
||||
|
oaoMessage: { |
||||
|
ZLS_MO_OAO_001: { |
||||
|
show: false, |
||||
|
wendu: '', |
||||
|
sidu: '', |
||||
|
alarmState: 0 |
||||
|
}, |
||||
|
YLS_MO_OAO_001: { |
||||
|
show: false, |
||||
|
wendu: '', |
||||
|
sidu: '', |
||||
|
alarmState: 0 |
||||
|
} |
||||
|
}, |
||||
|
topDisplayData: { |
||||
|
DAK_DIV_TOP_001: { |
||||
|
show: false, |
||||
|
curValue: '', |
||||
|
unit: '', |
||||
|
curstatus: 0 |
||||
|
}, |
||||
|
DAK_DIV_TOP_002: { |
||||
|
show: false, |
||||
|
curValue: '', |
||||
|
unit: '', |
||||
|
curstatus: 0 |
||||
|
}, |
||||
|
DAK_DIV_TOP_003: { |
||||
|
show: false, |
||||
|
curValue: '', |
||||
|
unit: '', |
||||
|
curstatus: 0 |
||||
|
}, |
||||
|
DAK_DIV_TOP_004: { |
||||
|
show: false, |
||||
|
curValue: '', |
||||
|
unit: '', |
||||
|
curstatus: 0 |
||||
|
}, |
||||
|
DAK_DIV_TOP_005: { |
||||
|
show: false, |
||||
|
curValue: '', |
||||
|
unit: '', |
||||
|
curstatus: 0 |
||||
|
}, |
||||
|
DAK_DIV_TOP_006: { |
||||
|
show: false, |
||||
|
curValue: '', |
||||
|
unit: '', |
||||
|
curstatus: 0 |
||||
|
}, |
||||
|
// 7F 待销文件室 |
||||
|
DXW_DIV_TOP_001: { |
||||
|
show: false, |
||||
|
curValue: '', |
||||
|
unit: '', |
||||
|
curstatus: 0 |
||||
|
}, |
||||
|
DXW_DIV_TOP_002: { |
||||
|
show: false, |
||||
|
curValue: '', |
||||
|
unit: '', |
||||
|
curstatus: 0 |
||||
|
}, |
||||
|
DXW_DIV_TOP_003: { |
||||
|
show: false, |
||||
|
curValue: '', |
||||
|
unit: '', |
||||
|
curstatus: 0 |
||||
|
}, |
||||
|
DXW_DIV_TOP_004: { |
||||
|
show: false, |
||||
|
curValue: '', |
||||
|
unit: '', |
||||
|
curstatus: 0 |
||||
|
}, |
||||
|
DXW_DIV_TOP_005: { |
||||
|
show: false, |
||||
|
curValue: '', |
||||
|
unit: '', |
||||
|
curstatus: 0 |
||||
|
}, |
||||
|
DXW_DIV_TOP_006: { |
||||
|
show: false, |
||||
|
curValue: '', |
||||
|
unit: '', |
||||
|
curstatus: 0 |
||||
|
}, |
||||
|
// 7F 现行文件室 / 信息技术室 |
||||
|
XXW_DIV_TOP_001: { |
||||
|
show: false, |
||||
|
curValue: '', |
||||
|
unit: '', |
||||
|
curstatus: 0 |
||||
|
}, |
||||
|
XXW_DIV_TOP_002: { |
||||
|
show: false, |
||||
|
curValue: '', |
||||
|
unit: '', |
||||
|
curstatus: 0 |
||||
|
}, |
||||
|
XXW_DIV_TOP_003: { |
||||
|
show: false, |
||||
|
curValue: '', |
||||
|
unit: '', |
||||
|
curstatus: 0 |
||||
|
}, |
||||
|
XXW_DIV_TOP_004: { |
||||
|
show: false, |
||||
|
curValue: '', |
||||
|
unit: '', |
||||
|
curstatus: 0 |
||||
|
}, |
||||
|
XXW_DIV_TOP_005: { |
||||
|
show: false, |
||||
|
curValue: '', |
||||
|
unit: '', |
||||
|
curstatus: 0 |
||||
|
}, |
||||
|
XXW_DIV_TOP_006: { |
||||
|
show: false, |
||||
|
curValue: '', |
||||
|
unit: '', |
||||
|
curstatus: 0 |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
}, |
||||
|
computed: { |
||||
|
...mapGetters([ |
||||
|
'roles' |
||||
|
]) |
||||
|
}, |
||||
|
async created() { |
||||
|
this.getWaitBorrower() |
||||
|
this.roomId = null |
||||
|
const params = { |
||||
|
storeroomId: null, |
||||
|
isQueryAll: 1 |
||||
|
} |
||||
|
this.allDisplayConfigData = await displayConfigApi.list(params) |
||||
|
this.allDisplayConfigData.forEach(element => { |
||||
|
if (element.isDisplay && element.bindState && element.deviceInfo && (element.divPosition.includes('OAO') || element.divPosition.includes('TOP') || element.divPosition.includes('LS'))) { |
||||
|
this.allDeviceIds.push(element.deviceInfo.deviceId) |
||||
|
if (!this.url) { |
||||
|
this.url = 'http://' + element.deviceInfo.deviceIp + ':' + element.deviceInfo.devicePort |
||||
|
} |
||||
|
} |
||||
|
}) |
||||
|
this.displayConfigData = this.allDisplayConfigData.filter((item) => { return item.isDisplay && item.bindState && item.deviceInfo && (item.divPosition.includes('OAO') || item.divPosition.includes('TOP') || item.divPosition.includes('LS')) }) |
||||
|
await this.getRealTimeData() |
||||
|
}, |
||||
|
mounted() { |
||||
|
}, |
||||
|
methods: { |
||||
|
handleChange(index) { |
||||
|
this.floorIndex = index |
||||
|
}, |
||||
|
handleEnvChange(index) { |
||||
|
this.floorEnvIndex = index |
||||
|
}, |
||||
|
changeFloorTab(index) { |
||||
|
this.floorIndex = index |
||||
|
const carousel = this.$refs.carouselRef |
||||
|
carousel.setActiveItem(index) |
||||
|
}, |
||||
|
changeFloorEnvTab(index) { |
||||
|
this.floorEnvIndex = index |
||||
|
const carousel = this.$refs.carouselEnvRef |
||||
|
carousel.setActiveItem(index) |
||||
|
}, |
||||
|
// handleSetLineChartData(type) { |
||||
|
// this.lineChartData = lineChartData[type] |
||||
|
// }, |
||||
|
getWaitBorrower() { |
||||
|
FetchWaitBorrower().then(data => { |
||||
|
if (data) { |
||||
|
this.waitBorrowerData = data |
||||
|
} |
||||
|
}) |
||||
|
}, |
||||
|
changeActiveTab(floorId, roomId) { |
||||
|
if (this.roles.includes('admin') || this.roles.includes('warehouse3D')) { |
||||
|
this.$router.push({ |
||||
|
name: 'warehouse3D', |
||||
|
params: { |
||||
|
floorId: floorId, |
||||
|
roomId: roomId |
||||
|
} |
||||
|
}) |
||||
|
} else { |
||||
|
this.$message({ |
||||
|
message: '当前账号没有权限', |
||||
|
type: 'warning' |
||||
|
}) |
||||
|
} |
||||
|
}, |
||||
|
handleToWaiting(item) { |
||||
|
if (this.roles.includes('admin') || this.roles.includes('lendManage:list')) { |
||||
|
// 待借档案：到“待借档案” 0 |
||||
|
// 借出确认：到“借出确认” 1 |
||||
|
// 逾期警告：到“归还确认” 2 |
||||
|
// 即将到期：到“归还确认” 3 |
||||
|
let locationIndex = 0 |
||||
|
if (item.title.includes('待借档案')) { |
||||
|
locationIndex = 0 |
||||
|
} else if (item.title.includes('借出确认')) { |
||||
|
locationIndex = 1 |
||||
|
} else if (item.title.includes('逾期警告')) { |
||||
|
locationIndex = 2 |
||||
|
} else if (item.title.includes('即将到期')) { |
||||
|
locationIndex = 2 |
||||
|
} |
||||
|
this.$router.push({ |
||||
|
name: 'lendManage', |
||||
|
params: { |
||||
|
locationIndex: locationIndex |
||||
|
} |
||||
|
}) |
||||
|
} else { |
||||
|
this.$message({ |
||||
|
message: '当前账号没有权限', |
||||
|
type: 'warning' |
||||
|
}) |
||||
|
} |
||||
|
}, |
||||
|
getRealTimeData() { |
||||
|
if (this.allDeviceIds.length > 0) { |
||||
|
thirdApi.getRealTimeData({ ids: this.allDeviceIds, url: this.url }).then((data) => { |
||||
|
// this.oaoMessage.splice(0, this.oaoMessage.length) |
||||
|
this.displayConfigData.forEach(element => { |
||||
|
if (element.divPosition.includes('TOP') && element.deviceSpecParams[0]) { |
||||
|
// 获取页面div显示的数据 |
||||
|
const result = data.find((item) => { |
||||
|
return item.property_id === element.deviceSpecParams[0].paramId && item.device_id === element.deviceInfo.deviceId |
||||
|
}) |
||||
|
if (result) { |
||||
|
this.$set(this.topDisplayData, element.divPosition, { |
||||
|
show: true, |
||||
|
curValue: result.curvalue, |
||||
|
unit: result.unit, |
||||
|
curstatus: result.curstatus |
||||
|
}) |
||||
|
} else { |
||||
|
this.$set(this.topDisplayData, element.divPosition, { |
||||
|
show: false |
||||
|
}) |
||||
|
} |
||||
|
} else if (element.divPosition.includes('OAO')) { |
||||
|
const wenduParamId = element.deviceSpecParams.find((item) => { return item.paramName === '温度' })?.paramId |
||||
|
const siduParamId = element.deviceSpecParams.find((item) => { return item.paramName === '湿度' })?.paramId |
||||
|
let wendu = {} |
||||
|
let sidu = {} |
||||
|
if (wenduParamId) { |
||||
|
wendu = data.find((item) => { |
||||
|
return item.property_id === wenduParamId && item.device_id === element.deviceInfo.deviceId |
||||
|
}) |
||||
|
} |
||||
|
if (siduParamId) { |
||||
|
sidu = data.find((item) => { |
||||
|
return item.property_id === siduParamId && item.device_id === element.deviceInfo.deviceId |
||||
|
}) |
||||
|
} |
||||
|
this.$set(this.oaoMessage, element.divPosition, { |
||||
|
show: true, |
||||
|
wendu: (wendu?.curvalue) ? (Math.round(wendu?.curvalue)) : '-', |
||||
|
sidu: (sidu?.curvalue) ? (Math.round(sidu?.curvalue)) : '-', |
||||
|
alarmState: (wendu && wendu.curstatus > 0) || (sidu && sidu.curstatus > 0) |
||||
|
}) |
||||
|
} |
||||
|
}) |
||||
|
}) |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style rel="stylesheet/scss" lang="scss" scoped> |
||||
|
@import "~@/assets/styles/lend-manage.scss"; |
||||
|
.dashboard-editor-container { |
||||
|
padding: 20px; |
||||
|
background-color: #031435; |
||||
|
position: relative; |
||||
|
|
||||
|
.chart-wrapper { |
||||
|
height: calc(100% - 40px); |
||||
|
} |
||||
|
} |
||||
|
@media (max-width: 1024px) { |
||||
|
.chart-wrapper { |
||||
|
padding: 8px; |
||||
|
} |
||||
|
} |
||||
|
.warehouse-tab { |
||||
|
color: #fff; |
||||
|
.warehouse-nav { |
||||
|
display: flex; |
||||
|
justify-content: space-around; |
||||
|
position: absolute; |
||||
|
bottom: 15px; |
||||
|
z-index: 11; |
||||
|
width: 100%; |
||||
|
padding: 0; |
||||
|
li { |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
align-items: center; |
||||
|
flex-wrap: nowrap; |
||||
|
align-content: center; |
||||
|
justify-content: center; |
||||
|
height: 90px; |
||||
|
text-align: right; |
||||
|
font-size: 14px; |
||||
|
position: relative; |
||||
|
&:hover { |
||||
|
cursor: pointer; |
||||
|
} |
||||
|
span { |
||||
|
width: 72px; |
||||
|
height: 52px; |
||||
|
margin-bottom: 7px; |
||||
|
} |
||||
|
p { |
||||
|
text-align: left; |
||||
|
} |
||||
|
&:first-child span { |
||||
|
background: url("~@/assets/images/tab_fullview_logo.png") no-repeat; |
||||
|
} |
||||
|
&:nth-child(2) span { |
||||
|
background: url("~@/assets/images/tab_archives_logo.png") no-repeat; |
||||
|
} |
||||
|
&:nth-child(3) span { |
||||
|
background: url("~@/assets/images/tab_collate_logo.png") no-repeat; |
||||
|
} |
||||
|
&:nth-child(4) span { |
||||
|
background: url("~@/assets/images/tab_read_logo.png") no-repeat; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
.el-col { |
||||
|
height: 100%; |
||||
|
} |
||||
|
.container-left, |
||||
|
.container-right, |
||||
|
.container-wrap, |
||||
|
.el-card, |
||||
|
.header-container-wrap { |
||||
|
min-height: 100%; |
||||
|
} |
||||
|
.warehose-el-table ::v-deep .el-table__header-wrapper { |
||||
|
box-shadow: inset 0px 0px 6px 1px #339cff; |
||||
|
background: none !important; |
||||
|
} |
||||
|
.container-wrap { |
||||
|
min-height: auto; |
||||
|
height: 100%; |
||||
|
// overflow: hidden; |
||||
|
} |
||||
|
.todo-list { |
||||
|
padding: 0 20px; |
||||
|
& li { |
||||
|
height: 42px; |
||||
|
line-height: 42px; |
||||
|
margin-bottom: 10px; |
||||
|
font-size: 13px; |
||||
|
color: #ffffff; |
||||
|
background: #02255f; |
||||
|
box-shadow: inset 0px 0px 6px 1px #339cff; |
||||
|
border-radius: 26px; |
||||
|
opacity: 1; |
||||
|
cursor: pointer; |
||||
|
&.warn-info{ |
||||
|
color: #F65163; |
||||
|
box-shadow: inset 0px 0px 15px 1px #f65164; |
||||
|
} |
||||
|
& p { |
||||
|
display: inline-block; |
||||
|
width: calc(100% - 140px); |
||||
|
padding-left: 10px; |
||||
|
text-overflow: ellipsis; |
||||
|
overflow: hidden; |
||||
|
white-space: nowrap; |
||||
|
word-break: break-all; |
||||
|
} |
||||
|
& span { |
||||
|
float: right; |
||||
|
padding-right: 10px; |
||||
|
} |
||||
|
|
||||
|
} |
||||
|
} |
||||
|
::v-deep |
||||
|
.el-table--striped |
||||
|
.el-table__body |
||||
|
tr.el-table__row--striped |
||||
|
td.el-table__cell { |
||||
|
background: #02255f; |
||||
|
} |
||||
|
.search-area { |
||||
|
width: 100%; |
||||
|
height: 100%; |
||||
|
margin: 0; |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
justify-content: center; |
||||
|
} |
||||
|
::v-deep .search-main{ |
||||
|
padding: 0 0 0 20px; |
||||
|
.head-container{ |
||||
|
padding: 0; |
||||
|
width: 100% !important; |
||||
|
.search-input { |
||||
|
width: 100% !important; |
||||
|
} |
||||
|
.input-with-select{ |
||||
|
width: 100% !important; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
.home-floor-tab{ |
||||
|
position: absolute; |
||||
|
right: 14px; |
||||
|
top: 10px; |
||||
|
color: #fff; |
||||
|
display: flex; |
||||
|
justify-self: flex-start; |
||||
|
p{ |
||||
|
font-size: 14px; |
||||
|
padding:2px 6px; |
||||
|
margin-right: 6px; |
||||
|
color: #339cff; |
||||
|
border: 1px solid #339cff; |
||||
|
border-radius: 4px; |
||||
|
cursor: pointer; |
||||
|
&.active-floor, |
||||
|
&:hover{ |
||||
|
color: #fff; |
||||
|
background-color: #113d72; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
.icon-kongqizhiliangshuju{ |
||||
|
font-size: 14px; |
||||
|
color: #F65163; |
||||
|
margin-right: 6px |
||||
|
} |
||||
|
.env-title{ |
||||
|
width: 50px; |
||||
|
height: 40px; |
||||
|
line-height: 20px; |
||||
|
text-align: center; |
||||
|
font-size: 12px; |
||||
|
margin: 10px 10px 0 0; |
||||
|
} |
||||
|
.leakage-list { |
||||
|
display: flex; |
||||
|
justify-content:flex-start; |
||||
|
flex: 1; |
||||
|
text-align: left; |
||||
|
font-size: 10px; |
||||
|
li { |
||||
|
position: relative; |
||||
|
display: flex; |
||||
|
justify-content: flex-start; |
||||
|
flex-wrap: wrap; |
||||
|
align-items: center; |
||||
|
width: 60px; |
||||
|
height: 40px; |
||||
|
border: 1px solid #3581cc; |
||||
|
background-color: #02255f; |
||||
|
border-radius: 2px; |
||||
|
padding: 4px; |
||||
|
margin: 10px 10px 0 0; |
||||
|
font-size: 12px; |
||||
|
&::before { |
||||
|
content: ""; |
||||
|
position: absolute; |
||||
|
top: 2px; |
||||
|
right: 2px; |
||||
|
width: 0; |
||||
|
height: 0; |
||||
|
border-color: transparent #339cff; |
||||
|
border-width: 0 4px 4px 0; |
||||
|
border-style: solid; |
||||
|
} |
||||
|
p { |
||||
|
width: 100%; |
||||
|
} |
||||
|
span{ |
||||
|
width: 100%; |
||||
|
color: #18B08F; |
||||
|
text-align: right; |
||||
|
} |
||||
|
&.leakage-warn { |
||||
|
border-color: #f65164; |
||||
|
box-shadow: inset 0px 0px 15px 1px #f65164; |
||||
|
color: #f65164; |
||||
|
&::before { |
||||
|
border-color: transparent #f65164; |
||||
|
} |
||||
|
span { |
||||
|
color: #f65164; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.five-bottom{ |
||||
|
display: flex; |
||||
|
justify-content: flex-start; |
||||
|
align-items: center; |
||||
|
.env-title{ |
||||
|
line-height: 40px; |
||||
|
} |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,287 @@ |
|||||
|
<template> |
||||
|
<div class="env-container"> |
||||
|
<div class="env-top-title" /> |
||||
|
<div class="current-date">{{ nowDate }}</div> |
||||
|
<div class="env-main"> |
||||
|
<div v-if="cameraList.length > 0" class="video-grid"> |
||||
|
<div |
||||
|
v-for="(camera, index) in cameraList" |
||||
|
:key="camera.id || index" |
||||
|
class="video-item" |
||||
|
> |
||||
|
<div class="camera-name">{{ camera.deviceInfo.deviceName }}</div> |
||||
|
<video |
||||
|
:id="`video-${index}`" |
||||
|
controls |
||||
|
autoplay |
||||
|
muted |
||||
|
width="100%" |
||||
|
height="100%" |
||||
|
/> |
||||
|
</div> |
||||
|
</div> |
||||
|
<!-- 无摄像头提示 --> |
||||
|
<div v-else class="no-camera"> |
||||
|
暂无配置的摄像头信息 |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import { getCurrentTime } from '@/utils/index' |
||||
|
import displayConfigApi from '@/api/storeManage/displayConfig' |
||||
|
export default { |
||||
|
name: 'ScreenVideo', |
||||
|
components: {}, |
||||
|
mixins: [], |
||||
|
data() { |
||||
|
return { |
||||
|
nowDate: '', |
||||
|
timer: null, |
||||
|
cameraList: [], |
||||
|
webRtcServers: [], |
||||
|
camera_ip: '127.0.0.1:9527' |
||||
|
} |
||||
|
}, |
||||
|
async created() { |
||||
|
this.timer = setInterval(() => { |
||||
|
this.nowDate = getCurrentTime() |
||||
|
}, 1000) |
||||
|
}, |
||||
|
mounted() { |
||||
|
this.getVideoUrl() |
||||
|
}, |
||||
|
beforeDestroy() { |
||||
|
if (this.timer) clearInterval(this.timer) |
||||
|
this.cleanupAllVideoStreams() |
||||
|
}, |
||||
|
methods: { |
||||
|
// 获取摄像头列表并筛选出包含cam的摄像头 |
||||
|
getVideoUrl() { |
||||
|
displayConfigApi.list({ storeroomId: '01A1DC2123C2B75E1A579D', isQueryAll: 1 }).then((res) => { |
||||
|
console.log('摄像头列表', res) |
||||
|
if (res && res.length > 0) { |
||||
|
this.cameraList = res.filter(item => item.divPosition && item.divPosition.includes('cam')) |
||||
|
|
||||
|
if (this.cameraList.length > 0) { |
||||
|
this.$nextTick(() => { |
||||
|
this.initAllVideos() |
||||
|
}) |
||||
|
} else { |
||||
|
this.$message({ |
||||
|
message: '未找到配置的摄像头', |
||||
|
type: 'warning' |
||||
|
}) |
||||
|
} |
||||
|
} else { |
||||
|
this.$message({ |
||||
|
message: '请先配置摄像头', |
||||
|
type: 'error' |
||||
|
}) |
||||
|
} |
||||
|
}).catch(error => { |
||||
|
console.error('获取摄像头列表失败', error) |
||||
|
this.$message({ |
||||
|
message: '获取摄像头配置失败', |
||||
|
type: 'error' |
||||
|
}) |
||||
|
}) |
||||
|
}, |
||||
|
|
||||
|
// 初始化所有摄像头视频流 |
||||
|
initAllVideos() { |
||||
|
const linkSrc = process.env.NODE_ENV === 'production' |
||||
|
? window.g.ApiWebRtcServerUrl |
||||
|
: process.env.VUE_APP_WEBRTCSTREAMER_API |
||||
|
this.camera_ip = linkSrc |
||||
|
|
||||
|
// 清空之前的实例 |
||||
|
this.cleanupAllVideoStreams() |
||||
|
|
||||
|
// 为每个摄像头创建webrtc实例 |
||||
|
this.cameraList.forEach((camera, index) => { |
||||
|
const videoId = `video-${index}` |
||||
|
const hkConfig = { |
||||
|
username: camera.deviceInfo.deviceAccount, |
||||
|
password: camera.deviceInfo.devicePassword, |
||||
|
ip: camera.deviceInfo.deviceIp, |
||||
|
port: camera.deviceInfo.devicePort |
||||
|
} |
||||
|
|
||||
|
console.log(`初始化摄像头${index + 1}`, hkConfig) |
||||
|
|
||||
|
try { |
||||
|
// 创建webrtc实例并连接 |
||||
|
// eslint-disable-next-line no-undef |
||||
|
const webRtcServer = new WebRtcStreamer(videoId, location.protocol + '//' + this.camera_ip) |
||||
|
// 拼接RTSP地址 |
||||
|
const rtspUrl = `rtsp://${hkConfig.username}:${hkConfig.password}@${hkConfig.ip}:${hkConfig.port}/h264/1/1` |
||||
|
webRtcServer.connect(rtspUrl) |
||||
|
this.webRtcServers.push({ |
||||
|
index, |
||||
|
server: webRtcServer, |
||||
|
rtspUrl |
||||
|
}) |
||||
|
} catch (error) { |
||||
|
console.error(`初始化摄像头${index + 1}失败`, error) |
||||
|
this.$message({ |
||||
|
message: `摄像头${camera.deviceInfo.deviceName}连接失败`, |
||||
|
type: 'error' |
||||
|
}) |
||||
|
} |
||||
|
}) |
||||
|
}, |
||||
|
|
||||
|
// 清理所有视频流 |
||||
|
cleanupAllVideoStreams() { |
||||
|
this.webRtcServers.forEach(({ server }) => { |
||||
|
try { |
||||
|
if (server && typeof server.disconnect === 'function') { |
||||
|
server.disconnect() |
||||
|
} |
||||
|
} catch (error) { |
||||
|
console.warn('清理视频流失败：', error) |
||||
|
} |
||||
|
}) |
||||
|
|
||||
|
this.cameraList.forEach((_, index) => { |
||||
|
const videoElem = document.getElementById(`video-${index}`) |
||||
|
if (videoElem) { |
||||
|
videoElem.src = '' |
||||
|
videoElem.load() |
||||
|
} |
||||
|
}) |
||||
|
|
||||
|
this.webRtcServers = [] |
||||
|
}, |
||||
|
|
||||
|
// 重新加载单个摄像头 |
||||
|
reloadCamera(index) { |
||||
|
const camera = this.cameraList[index] |
||||
|
if (!camera) return |
||||
|
|
||||
|
// 先清理该摄像头的流 |
||||
|
if (this.webRtcServers[index]) { |
||||
|
try { |
||||
|
this.webRtcServers[index].server.disconnect() |
||||
|
} catch (error) { |
||||
|
console.warn('断开摄像头失败', error) |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
// 重新初始化 |
||||
|
const hkConfig = { |
||||
|
username: camera.deviceInfo.deviceAccount, |
||||
|
password: camera.deviceInfo.devicePassword, |
||||
|
ip: camera.deviceInfo.deviceIp, |
||||
|
port: camera.deviceInfo.devicePort |
||||
|
} |
||||
|
|
||||
|
const videoId = `video-${index}` |
||||
|
// eslint-disable-next-line no-undef |
||||
|
const webRtcServer = new WebRtcStreamer(videoId, location.protocol + '//' + this.camera_ip) |
||||
|
const rtspUrl = `rtsp://${hkConfig.username}:${hkConfig.password}@${hkConfig.ip}:${hkConfig.port}/h264/1/1` |
||||
|
webRtcServer.connect(rtspUrl) |
||||
|
|
||||
|
this.webRtcServers[index] = { |
||||
|
index, |
||||
|
server: webRtcServer, |
||||
|
rtspUrl |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style lang="scss" scoped> |
||||
|
@import "~@/assets/styles/lend-manage.scss"; |
||||
|
.env-container { |
||||
|
width: 100%; |
||||
|
height: calc(100vh); |
||||
|
background-color: #031435; |
||||
|
.env-top-title { |
||||
|
width: calc(100vw); |
||||
|
height: 130px; |
||||
|
background: url("~@/assets/images/largeScreen/top-title.png") no-repeat 0 -14px; |
||||
|
background-size: contain; |
||||
|
} |
||||
|
.current-date { |
||||
|
position: fixed; |
||||
|
top: 25px; |
||||
|
right: 150px; |
||||
|
font-size: 16px; |
||||
|
color: #3a99fd; |
||||
|
z-index: 10; |
||||
|
} |
||||
|
.env-main { |
||||
|
padding: 20px; |
||||
|
height: calc(100vh - 130px); |
||||
|
overflow: auto; |
||||
|
} |
||||
|
|
||||
|
// 视频网格布局 |
||||
|
.video-grid { |
||||
|
display: grid; |
||||
|
// 根据摄像头数量自动调整列数 |
||||
|
grid-template-columns: repeat(auto-fill, minmax(600px, 1fr)); |
||||
|
gap: 20px; |
||||
|
height: 100%; |
||||
|
} |
||||
|
|
||||
|
.video-item { |
||||
|
background: #000; |
||||
|
border-radius: 8px; |
||||
|
overflow: hidden; |
||||
|
height: 100%; |
||||
|
min-height: 400px; |
||||
|
padding-bottom: 40px; |
||||
|
|
||||
|
.camera-name { |
||||
|
padding: 10px 15px; |
||||
|
background: rgba(0, 0, 0, 0.7); |
||||
|
color: #3a99fd; |
||||
|
font-size: 16px; |
||||
|
font-weight: 500; |
||||
|
} |
||||
|
|
||||
|
video { |
||||
|
display: block; |
||||
|
object-fit: contain; |
||||
|
|
||||
|
} |
||||
|
} |
||||
|
|
||||
|
// 无摄像头提示 |
||||
|
.no-camera { |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
justify-content: center; |
||||
|
height: 100%; |
||||
|
color: #3a99fd; |
||||
|
font-size: 20px; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
// 适配不同屏幕尺寸 |
||||
|
@media (max-width: 1440px) { |
||||
|
.video-grid { |
||||
|
grid-template-columns: repeat(auto-fill, minmax(400px, 1fr)); |
||||
|
} |
||||
|
|
||||
|
.video-item { |
||||
|
min-height: 300px; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
@media (max-width: 768px) { |
||||
|
.video-grid { |
||||
|
grid-template-columns: 1fr; |
||||
|
} |
||||
|
|
||||
|
.current-date { |
||||
|
right: 20px; |
||||
|
font-size: 14px; |
||||
|
} |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,676 @@ |
|||||
|
<template> |
||||
|
<div> |
||||
|
<!--工具栏--> |
||||
|
<div class="head-container" style="padding:0 0 20px 0"> |
||||
|
<crudOperation :permission="permission"> |
||||
|
<template v-slot:left> |
||||
|
<el-button v-permission="permission.add" size="mini" type="primary" icon="el-icon-plus" :disabled="!activeAddBtn" @click="selectDeviceType">新增</el-button> |
||||
|
</template> |
||||
|
<template v-slot:right> |
||||
|
<el-button v-permission="permission.del" icon="el-icon-delete" size="mini" :loading="crud.delAllLoading" :disabled="crud.selections && crud.selections.length === 0" @click="toDelete(crud.selections)">删除</el-button> |
||||
|
<el-select v-model="deviceType" class="filter-item" style="margin-left:10px" placeholder="全部" @change="crud.toQuery"> |
||||
|
<el-option :key="0" label="全部" value="" /> |
||||
|
<el-option v-for="item in deviceTypeOptions" :key="item.id" :label="item.name" :value="item.id" /> |
||||
|
</el-select> |
||||
|
</template> |
||||
|
<template v-slot:rightButtonGroup> |
||||
|
<div class="archives-handler-btn"> |
||||
|
<el-button class="binding-mac-btn iconfont icon-bangdingshebei-fanbai" type="primary" :disabled="crud.selections.length !== 1 || (crud.selections[0].deviceTypeId && crud.selections[0].deviceTypeId.name !== '桌面式RFID读写器')" @click="bindingMac()">绑定设备</el-button> |
||||
|
<el-button class="binding-param-btn iconfont icon-bangdingcanshu-fanbai" type="primary" :disabled="crud.selections.length !== 1 || (crud.selections[0].deviceTypeId && (crud.selections[0].deviceTypeId.name !== '漏水传感器' && crud.selections[0].deviceTypeId.name !== '温湿度感应器' && crud.selections[0].deviceTypeId.name !== '空气质量检测设备'))" @click="bindingParam(crud.selections[0].id)">绑定参数</el-button> |
||||
|
</div> |
||||
|
</template> |
||||
|
</crudOperation> |
||||
|
</div> |
||||
|
<!--表单组件--> |
||||
|
<el-dialog ref="dialog" class="deviceForm" append-to-body :close-on-click-modal="false" :before-close="crud.cancelCU" :visible="crud.status.cu > 0" :title="addTypeStr" @open="open"> |
||||
|
<span class="dialog-right-top" /> |
||||
|
<span class="dialog-left-bottom" /> |
||||
|
<div class="setting-dialog"> |
||||
|
<el-form ref="form" :inline="true" :model="form" :rules="rules" size="small" label-width="80px"> |
||||
|
<!-- <el-input v-model="form.storeroomId" type="hidden" /> --> |
||||
|
<el-form-item v-if="selectedDeviceType !== '密集架' " label="设备厂商" prop="supplier"> |
||||
|
<el-select v-model="form.supplier" style="width: 370px;" :disabled="crud.status.edit === 1"> |
||||
|
<el-option v-for="item in supplierOptions" :key="item.id" :label="item.name" :value="item.id" /> |
||||
|
</el-select> |
||||
|
</el-form-item> |
||||
|
<el-form-item v-if="isInsidedevices || isOutsidedevices" label="设备ID" prop="deviceId"> |
||||
|
<el-input v-model="form.deviceId" style="width: 370px;" :disabled="crud.status.edit === 1" /> |
||||
|
</el-form-item> |
||||
|
<el-form-item label="设备名称" prop="deviceName"> |
||||
|
<el-input v-model="form.deviceName" style="width: 370px;" /> |
||||
|
</el-form-item> |
||||
|
<el-form-item v-if="selectedDeviceType === '智能密集架' || selectedDeviceType === '回转柜' || selectedDeviceType === '摄像头' || isInsidedevices" label="接口IP" prop="deviceIp"> |
||||
|
<el-input v-model="form.deviceIp" style="width: 370px;" /> |
||||
|
</el-form-item> |
||||
|
<el-form-item v-if="selectedDeviceType === '智能密集架' || selectedDeviceType === '回转柜' || selectedDeviceType === '摄像头' || isInsidedevices" label="端口" prop="devicePort"> |
||||
|
<el-input v-model="form.devicePort" style="width: 370px;" /> |
||||
|
</el-form-item> |
||||
|
<!-- 智能密集架 || 回转柜 --> |
||||
|
<el-form-item v-if="selectedDeviceType === '智能密集架' || selectedDeviceType === '回转柜'" label="库房代码" prop="storeroomCode"> |
||||
|
<el-input v-model="form.storeroomCode" style="width: 370px;" /> |
||||
|
</el-form-item> |
||||
|
<!-- 智能密集架 --> |
||||
|
<el-form-item v-if="selectedDeviceType === '智能密集架'" label="区号" prop="areaNo"> |
||||
|
<el-input v-model="form.areaNo" style="width: 370px;" :disabled="crud.status.edit === 1" /> |
||||
|
</el-form-item> |
||||
|
<el-form-item v-if="selectedDeviceType === '智能密集架'|| selectedDeviceType === '密集架'" label="起始列号" prop="firstColumnNo"> |
||||
|
<el-input v-model.number="form.firstColumnNo" style="width: 150px;" :disabled="crud.status.edit === 1" /> |
||||
|
</el-form-item> |
||||
|
<el-form-item v-if="selectedDeviceType === '智能密集架' || selectedDeviceType === '密集架'" label="总列数" prop="sumColumnNo"> |
||||
|
<el-input v-model.number="form.sumColumnNo" style="width: 150px;" :disabled="crud.status.edit === 1" /> |
||||
|
</el-form-item> |
||||
|
<el-form-item v-if="selectedDeviceType === '智能密集架' || selectedDeviceType === '密集架'" label="节数" prop="partNo"> |
||||
|
<el-input v-model.number="form.partNo" style="width: 150px;" :disabled="crud.status.edit === 1" /> |
||||
|
</el-form-item> |
||||
|
<!-- 回转柜 || 摄像头 --> |
||||
|
<el-form-item v-if="selectedDeviceType === '回转柜' || selectedDeviceType === '摄像头'" label="账号" prop="deviceAccount"> |
||||
|
<el-input v-model="form.deviceAccount" style="width: 370px;" /> |
||||
|
</el-form-item> |
||||
|
<el-form-item v-if="selectedDeviceType === '回转柜' || selectedDeviceType === '摄像头'" label="密码" prop="devicePassword"> |
||||
|
<el-input v-model="form.devicePassword" style="width: 370px;" /> |
||||
|
</el-form-item> |
||||
|
<!-- 回转柜 --> |
||||
|
<el-form-item v-if="selectedDeviceType === '回转柜'" label="柜号" prop="cupboardNo"> |
||||
|
<el-input v-model="form.cupboardNo" style="width: 370px;" :disabled="crud.status.edit === 1" /> |
||||
|
</el-form-item> |
||||
|
<!-- 摄像头 --> |
||||
|
<el-form-item v-if="selectedDeviceType === '摄像头'" label="频道" prop="videoRoute"> |
||||
|
<el-input v-model="form.videoRoute" style="width: 370px;" /> |
||||
|
</el-form-item> |
||||
|
<!-- 智能密集架 || 回转柜 --> |
||||
|
<el-form-item v-if="selectedDeviceType === '智能密集架' || selectedDeviceType === '回转柜' || selectedDeviceType === '密集架'" label="层数" prop="rowNo"> |
||||
|
<el-input v-model.number="form.rowNo" style="width: 150px;" :disabled="crud.status.edit === 1" /> |
||||
|
</el-form-item> |
||||
|
<!-- 回转柜 --> |
||||
|
<el-form-item v-if="selectedDeviceType === '回转柜'" label="每层列数" prop="columnRowNo"> |
||||
|
<el-input v-model.number="form.columnRowNo" style="width: 150px;" :disabled="crud.status.edit === 1" /> |
||||
|
</el-form-item> |
||||
|
<!-- 智能密集架 || 回转柜 --> |
||||
|
<el-form-item v-if="selectedDeviceType === '智能密集架' || selectedDeviceType === '回转柜'" label="联动操作" prop="isLinkage"> |
||||
|
<el-checkbox v-model="form.isLinkage.lend" @change="checked=>isLinkageChange(checked,'lend')">借出</el-checkbox> |
||||
|
<el-checkbox v-model="form.isLinkage.borrow" @change="checked=>isLinkageChange(checked,'borrow')">归还</el-checkbox> |
||||
|
<el-checkbox v-model="form.isLinkage.inBound" @change="checked=>isLinkageChange(checked,'inBound')">入库</el-checkbox> |
||||
|
<el-checkbox v-model="form.isLinkage.outBound" @change="checked=>isLinkageChange(checked,'outBound')">出库</el-checkbox> |
||||
|
</el-form-item> |
||||
|
<el-form-item v-if="selectedDeviceType === '智能密集架' || selectedDeviceType === '回转柜'" label="回调确认" prop="isCallback"> |
||||
|
<el-checkbox v-model="form.isCallback.lend" @change="checked=>isCallbackChange(checked,'lend')">借出</el-checkbox> |
||||
|
<el-checkbox v-model="form.isCallback.borrow" @change="checked=>isCallbackChange(checked,'lend')">归还</el-checkbox> |
||||
|
<el-checkbox v-model="form.isCallback.inBound" @change="checked=>isCallbackChange(checked,'lend')">入库</el-checkbox> |
||||
|
<el-checkbox v-model="form.isCallback.outBound" @change="checked=>isCallbackChange(checked,'lend')">出库</el-checkbox> |
||||
|
</el-form-item> |
||||
|
<el-form-item v-if="selectedDeviceType === '智能密集架' || selectedDeviceType === '回转柜'" label="下发通知" prop="isNotice" style="display: block;"> |
||||
|
<el-checkbox v-model="form.isNotice">通知</el-checkbox> |
||||
|
</el-form-item> |
||||
|
<el-form-item label="维保信息" prop="maintenanceInfo"> |
||||
|
<el-input v-model="form.maintenanceInfo" type="textarea" style="width: 370px;" :rows="6" /> |
||||
|
</el-form-item> |
||||
|
</el-form> |
||||
|
<div slot="footer" class="dialog-footer"> |
||||
|
<el-button :loading="crud.status.cu === 2" type="primary" @click="crud.submitCU">保存</el-button> |
||||
|
</div> |
||||
|
</div> |
||||
|
</el-dialog> |
||||
|
<el-dialog title="删除设备" :visible.sync="deleteVisible" :before-close="handleClose"> |
||||
|
<span class="dialog-right-top" /> |
||||
|
<span class="dialog-left-bottom" /> |
||||
|
<div class="setting-dialog"> |
||||
|
<div class="dialog-delt"> |
||||
|
<p><span>确定删除当前设备吗？</span></p> |
||||
|
</div> |
||||
|
<div slot="footer" class="dialog-footer"> |
||||
|
<el-button type="primary" @click.native="handleConfirm">确定</el-button> |
||||
|
</div> |
||||
|
</div> |
||||
|
</el-dialog> |
||||
|
<el-dialog :close-on-click-modal="false" :visible.sync="selectDeviceTypeVisible" title="新增设备"> |
||||
|
<span class="dialog-right-top" /> |
||||
|
<span class="dialog-left-bottom" /> |
||||
|
<div class="setting-dialog"> |
||||
|
<el-form size="small" label-width="80px"> |
||||
|
<el-form-item label="设备类型"> |
||||
|
<el-select v-model="selectedDeviceType" style="width: 370px;"> |
||||
|
<el-option v-for="item in deviceTypeOptions" :key="item.id" :label="item.name" :value="item.name" /> |
||||
|
</el-select> |
||||
|
</el-form-item> |
||||
|
</el-form> |
||||
|
<div slot="footer" class="dialog-footer"> |
||||
|
<el-button type="primary" @click="nextStep()"> |
||||
|
下一步 |
||||
|
</el-button> |
||||
|
</div> |
||||
|
</div> |
||||
|
</el-dialog> |
||||
|
<el-dialog :close-on-click-modal="false" :visible.sync="bindingMacVisible" title="绑定设备"> |
||||
|
<span class="dialog-right-top" /> |
||||
|
<span class="dialog-left-bottom" /> |
||||
|
<div class="setting-dialog"> |
||||
|
<el-form size="small" label-width="140px"> |
||||
|
<el-form-item label="当前电脑Mac地址"> |
||||
|
<el-input v-model="currentMac" style="width: 370px;" :disabled="true" /> |
||||
|
</el-form-item> |
||||
|
</el-form> |
||||
|
<div slot="footer" class="dialog-footer"> |
||||
|
<el-button type="primary" @click="doBindingMac()"> |
||||
|
确定绑定 |
||||
|
</el-button> |
||||
|
</div> |
||||
|
</div> |
||||
|
</el-dialog> |
||||
|
<bindParams ref="bindingParamsDlg" @refresh="crud.refresh" /> |
||||
|
<div class="container-right" style="min-height: calc(100vh - 242px);"> |
||||
|
<span class="right-top-line" /> |
||||
|
<span class="left-bottom-line" /> |
||||
|
<!--表格渲染--> |
||||
|
<el-table ref="table" v-loading="crud.loading" :data="crud.data" highlight-current-row style="width: 100%;" height="calc(100vh - 295px)" @selection-change="selectionChangeHandler" @row-click="clickRowHandler"> |
||||
|
<el-table-column align="center" type="selection" width="50" /> |
||||
|
<el-table-column align="center" type="index" label="序号" width="55" /> |
||||
|
<el-table-column align="center" prop="storeroomId.name" label="所属区域" width="100" show-overflow-tooltip /> |
||||
|
<el-table-column align="center" label="设备状态" width="100"> |
||||
|
<template slot-scope="scope"> |
||||
|
|
||||
|
<span v-if="scope.row.deviceState === null" class="el-icon-loading" /> |
||||
|
<span v-else :class="{ 'spk-a': scope.row.deviceState === 1, 'off-line': scope.row.deviceState !== 1 }" /> |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
<el-table-column align="center" prop="deviceTypeId.name" label="设备类型" show-overflow-tooltip /> |
||||
|
<el-table-column align="center" prop="supplierId.name" label="设备厂商" width="100" show-overflow-tooltip /> |
||||
|
<el-table-column align="center" prop="deviceName" label="设备名称" show-overflow-tooltip /> |
||||
|
<el-table-column align="center" label="设备ID" show-overflow-tooltip> |
||||
|
<template slot-scope="scope"> |
||||
|
<span v-if="scope.row.deviceId"> {{ scope.row.deviceId }} </span> |
||||
|
<span v-else>——</span> |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
<el-table-column align="center" label="接口IP" width="120" show-overflow-tooltip> |
||||
|
<template slot-scope="scope"> |
||||
|
<span v-if="scope.row.deviceIp"> {{ scope.row.deviceIp }} </span> |
||||
|
<span v-else>——</span> |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
<el-table-column align="center" label="端口" width="90"> |
||||
|
<template slot-scope="scope"> |
||||
|
<span v-if="scope.row.devicePort"> {{ scope.row.devicePort }} </span> |
||||
|
<span v-else>——</span> |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
<el-table-column align="center" label="绑定设备" width="100"> |
||||
|
<template slot-scope="scope"> |
||||
|
<span v-if="scope.row.deviceSpecParamId && scope.row.deviceSpecParamId.macAddress !== null"> 已绑定 </span> |
||||
|
<span v-else>——</span> |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
<el-table-column align="center" label="绑定参数" width="100"> |
||||
|
<template slot-scope="scope"> |
||||
|
<span v-if="scope.row.deviceSpecParamId && scope.row.deviceSpecParamId.paramId !== null"> 已绑定 </span> |
||||
|
<span v-else>——</span> |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
</el-table> |
||||
|
<!--分页组件--> |
||||
|
<pagination /> |
||||
|
</div> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import crudDevice from '@/api/storeManage/deviceManage/device' |
||||
|
import macApi from '@/api/storeManage/deviceManage/mac' |
||||
|
import paramApi from '@/api/storeManage/deviceManage/param' |
||||
|
import CRUD, { presenter, header, form } from '@crud/crud' |
||||
|
import crudOperation from '@crud/CRUD.operation' |
||||
|
import pagination from '@crud/Pagination' |
||||
|
import bindParams from './bindParams' |
||||
|
const defaultForm = { supplier: null, id: null, deviceId: null, deviceName: null, deviceIp: null, devicePort: null, rowNo: null, areaNo: null, sumColumnNo: null, firstColumnNo: null, partNo: null, storeroomCode: null, columnRowNo: null, deviceAccount: null, devicePassword: null, cupboardNo: null, videoRoute: null, isLinkage: { stateType: 1, lend: false, borrow: false, inBound: false, outBound: false }, isCallback: { stateType: 2, lend: false, borrow: false, inBound: false, outBound: false }, isNotice: false, maintenanceInfo: null } |
||||
|
|
||||
|
export default { |
||||
|
components: { crudOperation, pagination, bindParams }, |
||||
|
cruds() { |
||||
|
return [ |
||||
|
CRUD({ |
||||
|
title: '设备', url: 'api/device/list', |
||||
|
crudMethod: { ...crudDevice }, |
||||
|
optShow: { |
||||
|
add: false, |
||||
|
edit: true, |
||||
|
del: false, |
||||
|
reset: false, |
||||
|
download: false, |
||||
|
group: false |
||||
|
}, |
||||
|
sort: ['sequence,asc'] |
||||
|
}) |
||||
|
] |
||||
|
}, |
||||
|
mixins: [ |
||||
|
presenter(), |
||||
|
header(), |
||||
|
form(defaultForm) |
||||
|
], |
||||
|
props: { |
||||
|
activeAddBtn: { |
||||
|
type: Boolean |
||||
|
} |
||||
|
}, |
||||
|
data() { |
||||
|
return { |
||||
|
storeroomId: null, |
||||
|
deviceType: null, // 设备列表筛选项目（设备类型） |
||||
|
needRefreshTree: false, |
||||
|
permission: { |
||||
|
add: ['admin', 'device:add'], |
||||
|
edit: ['admin', 'device:edit'], |
||||
|
del: ['admin', 'device:del'] |
||||
|
}, |
||||
|
deleteVisible: false, |
||||
|
selectDeviceTypeVisible: false, |
||||
|
bindingMacVisible: false, |
||||
|
currentMac: '', |
||||
|
deviceTypeOptions: [], |
||||
|
selectedDeviceType: '密集架', // 选择添加的设备种类 |
||||
|
supplierOptions: [] // 厂商 |
||||
|
} |
||||
|
}, |
||||
|
computed: { |
||||
|
addTypeStr() { |
||||
|
const addType = this.deviceTypeOptions.find(deviceType => deviceType.name === this.selectedDeviceType) |
||||
|
const preTitle = this.crud.status.add > CRUD.STATUS.NORMAL ? '新增' : '编辑' |
||||
|
if (addType) { |
||||
|
return preTitle + addType.name |
||||
|
} else { |
||||
|
return preTitle |
||||
|
} |
||||
|
}, |
||||
|
isInsidedevices() { |
||||
|
if (this.selectedDeviceType === '空调' || this.selectedDeviceType === '桌面式RFID读写器' || this.selectedDeviceType === '盘点机' || this.selectedDeviceType === '恒湿机' || this.selectedDeviceType === '漏水传感器' || this.selectedDeviceType === '温湿度感应器' || this.selectedDeviceType === '空气质量检测设备' || this.selectedDeviceType === '漏水传感器') { |
||||
|
return true |
||||
|
} else { |
||||
|
return false |
||||
|
} |
||||
|
}, |
||||
|
isOutsidedevices() { |
||||
|
if (this.selectedDeviceType === '通道门' || this.selectedDeviceType === '手持式RFID读写器') { |
||||
|
return true |
||||
|
} else { |
||||
|
return false |
||||
|
} |
||||
|
}, |
||||
|
rules() { |
||||
|
// const checkDeviceIp = (rule, value, callback) => { |
||||
|
// const reg = /^((2[0-4]\d|25[0-5]|[01]?\d\d?)\.){3}(2[0-4]\d|25[0-5]|[01]?\d\d?)$/ |
||||
|
// if (reg.test(value)) { |
||||
|
// callback() |
||||
|
// } else { |
||||
|
// callback(new Error('设备IP格式错误')) |
||||
|
// } |
||||
|
// } |
||||
|
const checkDevicePort = (rule, value, callback) => { |
||||
|
const reg = /^([0-9]|[1-9]\d{1,3}|[1-5]\d{4}|6[0-4]\d{4}|65[0-4]\d{2}|655[0-2]\d|6553[0-5])$/ |
||||
|
if (reg.test(value)) { |
||||
|
callback() |
||||
|
} else { |
||||
|
callback(new Error('端口号输入错误')) |
||||
|
} |
||||
|
} |
||||
|
const validateRule = { |
||||
|
// deviceInfo. |
||||
|
supplier: [ |
||||
|
{ required: true, message: '请选择设备产商', trigger: 'blur' } |
||||
|
], |
||||
|
deviceName: [ |
||||
|
{ required: true, message: '请输入设备名称', trigger: 'blur' } |
||||
|
] |
||||
|
} |
||||
|
if (this.isInsidedevices || this.isOutsidedevices) { |
||||
|
this.$set(validateRule, 'deviceId', [ |
||||
|
{ required: true, message: '请输入设备ID', trigger: 'blur' } |
||||
|
]) |
||||
|
} |
||||
|
if (this.selectedDeviceType === '智能密集架' || this.selectedDeviceType === '密集架' || this.selectedDeviceType === '回转柜' || this.selectedDeviceType === '摄像头' || this.isInsidedevices) { |
||||
|
this.$set(validateRule, 'deviceIp', [ |
||||
|
{ required: true, message: '请输入接口IP', trigger: 'blur' } |
||||
|
// , |
||||
|
// { validator: checkDeviceIp, trigger: 'blur' } |
||||
|
]) |
||||
|
this.$set(validateRule, 'devicePort', [ |
||||
|
{ required: true, message: '请输入端口号', trigger: 'blur' }, |
||||
|
{ validator: checkDevicePort, trigger: 'blur' } |
||||
|
]) |
||||
|
if (this.selectedDeviceType === '智能密集架') { |
||||
|
this.$set(validateRule, 'areaNo', [ |
||||
|
{ required: true, message: '请输入区号', trigger: 'blur' } |
||||
|
]) |
||||
|
this.$set(validateRule, 'firstColumnNo', [ |
||||
|
{ required: true, message: '请输入起始列号', trigger: 'blur' } |
||||
|
]) |
||||
|
this.$set(validateRule, 'sumColumnNo', [ |
||||
|
{ required: true, message: '请输入总列数', trigger: 'blur' } |
||||
|
]) |
||||
|
this.$set(validateRule, 'partNo', [ |
||||
|
{ required: true, message: '请输入节数', trigger: 'blur' } |
||||
|
]) |
||||
|
this.$set(validateRule, 'rowNo', [ |
||||
|
{ required: true, message: '请输入层数', trigger: 'blur' } |
||||
|
]) |
||||
|
} else if (this.selectedDeviceType === '密集架') { |
||||
|
this.$set(validateRule, 'firstColumnNo', [ |
||||
|
{ required: true, message: '请输入起始列号', trigger: 'blur' } |
||||
|
]) |
||||
|
this.$set(validateRule, 'sumColumnNo', [ |
||||
|
{ required: true, message: '请输入总列数', trigger: 'blur' } |
||||
|
]) |
||||
|
this.$set(validateRule, 'partNo', [ |
||||
|
{ required: true, message: '请输入节数', trigger: 'blur' } |
||||
|
]) |
||||
|
this.$set(validateRule, 'rowNo', [ |
||||
|
{ required: true, message: '请输入层数', trigger: 'blur' } |
||||
|
]) |
||||
|
} else if (this.selectedDeviceType === '回转柜' || this.selectedDeviceType === '摄像头') { |
||||
|
// 回转柜 || 摄像头 |
||||
|
this.$set(validateRule, 'deviceAccount', [ |
||||
|
{ required: true, message: '请输入账号', trigger: 'blur' } |
||||
|
]) |
||||
|
this.$set(validateRule, 'devicePassword', [ |
||||
|
{ required: true, message: '请输入密码', trigger: 'blur' } |
||||
|
]) |
||||
|
if (this.selectedDeviceType === '回转柜') { |
||||
|
this.$set(validateRule, 'cupboardNo', [ |
||||
|
{ required: true, message: '请输入柜号', trigger: 'blur' } |
||||
|
]) |
||||
|
this.$set(validateRule, 'rowNo', [ |
||||
|
{ required: true, message: '请输入层数', trigger: 'blur' } |
||||
|
]) |
||||
|
this.$set(validateRule, 'columnRowNo', [ |
||||
|
{ required: true, message: '请输入每层列数', trigger: 'blur' } |
||||
|
]) |
||||
|
} else { |
||||
|
// 摄像头 |
||||
|
this.$set(validateRule, 'videoRoute', [ |
||||
|
{ required: true, message: '请输入频道', trigger: 'blur' } |
||||
|
]) |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
return validateRule |
||||
|
} |
||||
|
}, |
||||
|
created() { |
||||
|
crudDevice.getDeviceType().then((data) => { |
||||
|
this.deviceTypeOptions.splice(0, 0, ...data) |
||||
|
}) |
||||
|
}, |
||||
|
methods: { |
||||
|
// 设备是智能密集架或回转柜时，需要先处理 联动操作，回调操作 数据是null的情况 |
||||
|
// async |
||||
|
async [CRUD.HOOK.beforeToEdit](crud, form) { |
||||
|
if (form.deviceTypeId.name === '智能密集架' || form.deviceTypeId.name === '密集架' || form.deviceTypeId.name === '回转柜') { |
||||
|
if (form.deviceTypeId.name === '智能密集架') { |
||||
|
// 获取智能密集架行号列号等信息 |
||||
|
await crudDevice.getDesecabinetById({ deviceInfoId: this.crud.selections[0].id }).then((data) => { |
||||
|
form.rowNo = data.rowNo |
||||
|
form.areaNo = data.areaNo |
||||
|
form.sumColumnNo = data.sumColumnNo |
||||
|
form.firstColumnNo = data.firstColumnNo |
||||
|
form.partNo = data.partNo |
||||
|
form.storeroomCode = data.storeroomCode |
||||
|
}) |
||||
|
} else if (form.deviceTypeId.name === '密集架') { |
||||
|
// 获取智能密集架行号列号等信息 |
||||
|
await crudDevice.getDesecabinetById({ deviceInfoId: this.crud.selections[0].id }).then((data) => { |
||||
|
form.rowNo = data.rowNo |
||||
|
form.areaNo = data.areaNo |
||||
|
form.sumColumnNo = data.sumColumnNo |
||||
|
form.firstColumnNo = data.firstColumnNo |
||||
|
form.partNo = data.partNo |
||||
|
form.storeroomCode = data.storeroomCode |
||||
|
}) |
||||
|
} else if (form.deviceTypeId.name === '回转柜') { |
||||
|
// 获取回转柜行号列号等信息 |
||||
|
await crudDevice.getRotarycabinetById({ deviceInfoId: this.crud.selections[0].id }).then((data) => { |
||||
|
form.columnRowNo = data.columnRowNo |
||||
|
form.cupboardNo = data.cupboardNo |
||||
|
form.rowNo = data.rowNo |
||||
|
form.storeroomCode = data.storeroomCode |
||||
|
}) |
||||
|
} |
||||
|
// 获取联动和回调结果 |
||||
|
await crudDevice.getDeviceById({ deviceInfoId: this.crud.selections[0].id }).then((data) => { |
||||
|
if (data.length === 3) { |
||||
|
form.isLinkage = data.find(element => element.stateType === 1) |
||||
|
form.isCallback = data.find(element => element.stateType === 2) |
||||
|
} |
||||
|
}) |
||||
|
} |
||||
|
form.supplier = form.supplierId.id |
||||
|
this.selectedDeviceType = form.deviceTypeId.name |
||||
|
crud.status.edit = CRUD.STATUS.PREPARED |
||||
|
crud.getDataStatus(this.crud.selections[0].id).edit = CRUD.STATUS.PREPARED |
||||
|
|
||||
|
return false |
||||
|
}, |
||||
|
[CRUD.HOOK.beforeSubmit]() { |
||||
|
this.crud.form.supplierId = this.supplierOptions.find(item => item.id === this.crud.form.supplier) |
||||
|
this.crud.form.deviceTypeId = this.deviceTypeOptions.find(item => item.name === this.selectedDeviceType) |
||||
|
}, |
||||
|
// 获取数据前设置默认参数 |
||||
|
[CRUD.HOOK.beforeRefresh]() { |
||||
|
if (this.storeroomId) { |
||||
|
this.crud.query.storeroomId = this.storeroomId.id |
||||
|
} |
||||
|
if (this.deviceType !== '0') { |
||||
|
this.crud.query.deviceTypeId = this.deviceType |
||||
|
} |
||||
|
}, |
||||
|
// 防止编辑时，isLinkage是null,isLinkage.lend报错 |
||||
|
[CRUD.HOOK.afterRefresh](crud) { |
||||
|
console.log('crud.data', crud.data) |
||||
|
let selectedElementId = null |
||||
|
crud.data.forEach(element => { |
||||
|
element.isLinkage = { stateType: 1, lend: null, borrow: null, inBound: null, outBound: null } |
||||
|
element.isCallback = { stateType: 2, lend: null, borrow: null, inBound: null, outBound: null } |
||||
|
// element.deviceState = null |
||||
|
// 常在线： |
||||
|
// 1.摄像头 7305DE3D273B0CAC079538 |
||||
|
// 2.通道门 65D1886B0F864291766421 |
||||
|
// 3.条码打印机 6A48C971F5C9ECA358A2DA |
||||
|
// 常离线： |
||||
|
// 1.手持式RFID读写器 3B85FA21FDAFBB618B5D40 |
||||
|
// deviceTypeId.id 接口请求拿状态 |
||||
|
// 1.智能密集架 DD656054BE3D1DF1E2F1FC |
||||
|
// 2.桌面式RFID读写器 E2767FEACA9CE0E3B16B89 |
||||
|
// 3.环控相关（空气质量检测设备E58C8D7C896BCB9A408A78、温湿度感应设备 7882487E0C15304A3758AF、漏水传感器 250AE644EC43E4EC954A81） |
||||
|
if (element.deviceTypeId.id === '7305DE3D273B0CAC079538' || element.deviceTypeId.id === '65D1886B0F864291766421') { |
||||
|
// 摄像头 + 通道门 |
||||
|
element.deviceState = 1 |
||||
|
} else if (element.deviceTypeId.id === '3B85FA21FDAFBB618B5D40') { |
||||
|
// 手持式RFID读写器 |
||||
|
element.deviceState = 0 |
||||
|
} else if (element.deviceTypeId.id === 'DD656054BE3D1DF1E2F1FC') { |
||||
|
// 智能密集架 |
||||
|
element.deviceState = null |
||||
|
this.getDeviceState(element) |
||||
|
} else if (element.deviceTypeId.id === 'DD656054BE3D1DF1E2F1FC') { |
||||
|
// 密集架 |
||||
|
element.deviceState = null |
||||
|
this.getDeviceState(element) |
||||
|
} else if (element.deviceTypeId.id === 'E2767FEACA9CE0E3B16B89') { |
||||
|
// 桌面式RFID读写器 |
||||
|
element.deviceState = null |
||||
|
this.getDeviceState(element) |
||||
|
} else if (element.deviceTypeId.id === 'E58C8D7C896BCB9A408A78' || element.deviceTypeId.id === '7882487E0C15304A3758AF' || element.deviceTypeId.id === '250AE644EC43E4EC954A81') { |
||||
|
element.deviceState = null |
||||
|
selectedElementId = element.id |
||||
|
} |
||||
|
}) |
||||
|
if (selectedElementId) { |
||||
|
crudDevice.FetchIsOnline({ deviceId: selectedElementId }) |
||||
|
.then((data) => { |
||||
|
crud.data.forEach(element => { |
||||
|
if (element.deviceTypeId.id === 'E58C8D7C896BCB9A408A78' || element.deviceTypeId.id === '7882487E0C15304A3758AF' || element.deviceTypeId.id === '250AE644EC43E4EC954A81') { |
||||
|
element.deviceState = data === true ? 1 : 0 |
||||
|
} |
||||
|
}) |
||||
|
}) |
||||
|
.catch((error) => { |
||||
|
console.error(error) |
||||
|
}) |
||||
|
} |
||||
|
}, |
||||
|
getDeviceState(element) { |
||||
|
crudDevice.FetchIsOnline({ deviceId: element.id }).then((data) => { |
||||
|
element.deviceState = data === true ? 1 : 0 |
||||
|
}).catch((error) => { |
||||
|
console.error(error) |
||||
|
}) |
||||
|
}, |
||||
|
|
||||
|
// 提交前的验证 |
||||
|
[CRUD.HOOK.afterValidateCU](crud) { |
||||
|
if (crud.status.edit === 1) { |
||||
|
const storeroomId = this.crud.selections[0].storeroomId |
||||
|
this.crud.form.storeroomId = { |
||||
|
'id': storeroomId.id, |
||||
|
'pid': storeroomId.pid, |
||||
|
'name': storeroomId.name, |
||||
|
'remark': storeroomId.remark, |
||||
|
'sort': storeroomId.sort |
||||
|
} |
||||
|
} else { |
||||
|
this.crud.form.storeroomId = { |
||||
|
'id': this.storeroomId.id, |
||||
|
'pid': this.storeroomId.pid, |
||||
|
'name': this.storeroomId.name, |
||||
|
'remark': this.storeroomId.remark, |
||||
|
'sort': this.storeroomId.sort |
||||
|
} |
||||
|
} |
||||
|
}, |
||||
|
clickRowHandler(row) { |
||||
|
this.$refs.table.toggleRowSelection(row) |
||||
|
}, |
||||
|
selectionChangeHandler(val) { |
||||
|
this.crud.selections = val |
||||
|
}, |
||||
|
toDelete(data) { |
||||
|
this.deleteVisible = true |
||||
|
}, |
||||
|
handleConfirm() { |
||||
|
this.deleteVisible = false |
||||
|
this.crud.delAllLoading = true |
||||
|
this.crud.doDelete(this.crud.selections) |
||||
|
}, |
||||
|
handleClose(done) { |
||||
|
done() |
||||
|
}, |
||||
|
selectDeviceType() { |
||||
|
this.selectDeviceTypeVisible = true |
||||
|
}, |
||||
|
nextStep() { |
||||
|
this.selectDeviceTypeVisible = false |
||||
|
this.crud.toAdd() |
||||
|
}, |
||||
|
open() { |
||||
|
this.supplierOptions.splice(0, this.supplierOptions.length) |
||||
|
crudDevice.getSupplier().then((data) => { |
||||
|
this.supplierOptions.splice(0, 0, ...data) |
||||
|
}) |
||||
|
}, |
||||
|
bindingMac() { |
||||
|
macApi.getMac().then((data) => { |
||||
|
this.currentMac = data |
||||
|
this.bindingMacVisible = true |
||||
|
}) |
||||
|
}, |
||||
|
doBindingMac() { |
||||
|
macApi.bindMac({ deviceId: this.crud.selections[0].id, macAddress: this.currentMac }).then((data) => { |
||||
|
this.bindingMacVisible = false |
||||
|
this.$message({ |
||||
|
message: '绑定成功', |
||||
|
type: 'success' |
||||
|
}) |
||||
|
}) |
||||
|
}, |
||||
|
bindingParam(id) { |
||||
|
this.$refs.bindingParamsDlg.deviceInfoId = id |
||||
|
paramApi.getParams({ deviceInfoId: id }).then((data) => { |
||||
|
this.$refs.bindingParamsDlg.params = data |
||||
|
this.$refs.bindingParamsDlg.bindParamsVisible = true |
||||
|
}) |
||||
|
}, |
||||
|
isLinkageChange(value, type) { |
||||
|
if (!value && this.form.isCallback[type]) { |
||||
|
this.$message.error('取消对应回调选项后才能取消联动操作') |
||||
|
this.form.isLinkage[type] = true |
||||
|
} |
||||
|
}, |
||||
|
isCallbackChange(value, type) { |
||||
|
if (value && !this.form.isLinkage[type]) { |
||||
|
this.$message.error('选中对应联动选项后才能勾选回调操作') |
||||
|
this.form.isCallback[type] = false |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style rel="stylesheet/scss" lang="scss" scoped> |
||||
|
.archives-handler-btn { |
||||
|
.el-button { |
||||
|
padding: 0 13px 0 13px; |
||||
|
::v-deep span { |
||||
|
margin-left: 10px; |
||||
|
} |
||||
|
&.binding-mac-btn { |
||||
|
border-color: #fd8042; |
||||
|
background-color: #fd8042; |
||||
|
&.is-disabled { |
||||
|
border-color: #7e4021; |
||||
|
background-color: #7e4021; |
||||
|
} |
||||
|
} |
||||
|
&.binding-param-btn { |
||||
|
border-color: #1aae93; |
||||
|
background-color: #1aae93; |
||||
|
&.is-disabled { |
||||
|
border-color: #0d5649; |
||||
|
background-color: #0d5649; |
||||
|
} |
||||
|
} |
||||
|
&.is-disabled { |
||||
|
color: #666; |
||||
|
} |
||||
|
} |
||||
|
.iconfont { |
||||
|
line-height: 28px; |
||||
|
} |
||||
|
margin-left: auto; |
||||
|
} |
||||
|
.spk-a { |
||||
|
display: inline-block; |
||||
|
width: 12px; |
||||
|
height: 12px; |
||||
|
border-radius: 6px; |
||||
|
background-color: #1aae93; |
||||
|
box-shadow: 0px 0px 6px 1px #1aae93; |
||||
|
vertical-align: middle; |
||||
|
} |
||||
|
.off-line { |
||||
|
display: inline-block; |
||||
|
width: 12px; |
||||
|
height: 12px; |
||||
|
border-radius: 6px; |
||||
|
background-color: #F65163; |
||||
|
box-shadow: 0px 0px 6px 1px #F65163; |
||||
|
vertical-align: middle; |
||||
|
} |
||||
|
.deviceForm{ |
||||
|
::v-deep .el-dialog .el-dialog__body{ |
||||
|
max-height: 680px !important; |
||||
|
overflow: hidden; |
||||
|
overflow-y: scroll; |
||||
|
.el-checkbox{ |
||||
|
color: #fff; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
</style> |
||||
Write
Preview
Loading…
Cancel
Save
Reference in new issue