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