10 changed files with 1478 additions and 701 deletions
-
1160src/assets/styles/archives-manage.scss
-
96src/views/archivesManage/fileImport/dataImport/index.vue
-
96src/views/archivesManage/fileImport/importLog/index.vue
-
113src/views/archivesManage/fileImport/module/detail.vue
-
0src/views/archivesManage/fileImport/module/table.json
-
24src/views/storeManage/deviceManage/module/deviceDetail.vue
-
274src/views/storeManage/warehouse3D/destroyedFileRoom/index.vue
-
63src/views/storeManage/warehouse3D/fullViewSeven/index.vue
-
79src/views/storeManage/warehouse3D/index.vue
-
274src/views/storeManage/warehouse3D/infoRoom/index.vue
1160
src/assets/styles/archives-manage.scss
File diff suppressed because it is too large
View File
File diff suppressed because it is too large
View File
@ -1,23 +1,115 @@ |
|||
<template> |
|||
<div> |
|||
导入日志 |
|||
<div class="head-container" style="display: flex; justify-content: flex-start;"> |
|||
<div class="head-search" style="margin-bottom: 0;"> |
|||
<date-range-picker v-model="query.createTime" class="date-item" /> |
|||
<rrOperation /> |
|||
</div> |
|||
<crudOperation /> |
|||
</div> |
|||
<!--表格渲染--> |
|||
<el-table ref="table" v-loading="crud.loading" :data="crud.data" style="width: 100%;" @row-click="clickRowHandler" @selection-change="selectionChangeHandler" @row-dblclick="handleDbClick"> |
|||
<el-table-column type="selection" align="center" width="55" /> |
|||
<el-table-column prop="username" label="导入数据包" /> |
|||
<el-table-column prop="nickName" label="导入状态" /> |
|||
<el-table-column prop="gender" label="操作人" /> |
|||
<el-table-column prop="createTime" label="操作日期"> |
|||
<template slot-scope="scope"> |
|||
<div>{{ scope.row.createTime | parseTime }}</div> |
|||
</template> |
|||
</el-table-column> |
|||
</el-table> |
|||
<!--分页组件--> |
|||
<pagination /> |
|||
|
|||
<el-dialog class="import-dialog" :close-on-click-modal="false" :visible.sync="detailVisible" title="导入详情" @closed="handleClose"> |
|||
<span class="dialog-right-top" /> |
|||
<span class="dialog-left-bottom" /> |
|||
<div class="setting-dialog"> |
|||
<div class="import-data-number"> |
|||
<p>导入方式：<span style="color: #339cff;">跳过</span></p> |
|||
<p>成功读取数据：<span style="color:rgb(246,81,99)">10000</span> 条</p> |
|||
<p>成功导入数据：<span style="color: #1AAE93;">500</span> 条</p> |
|||
</div> |
|||
<detail /> |
|||
</div> |
|||
</el-dialog> |
|||
|
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import crudUser from '@/api/system/user' |
|||
import CRUD, { presenter, header, crud } from '@crud/crud' |
|||
import rrOperation from '@crud/RR.operation' |
|||
import crudOperation from '@crud/CRUD.operation' |
|||
import pagination from '@crud/Pagination' |
|||
import DateRangePicker from '@/components/DateRangePicker' |
|||
import detail from '../module/detail.vue' |
|||
export default { |
|||
name: 'ImportLog', |
|||
components: { }, |
|||
components: { detail, rrOperation, DateRangePicker, crudOperation, pagination }, |
|||
cruds() { |
|||
return CRUD({ title: '导入日志', url: 'api/users', crudMethod: { ...crudUser }, optShow: { |
|||
add: false, |
|||
edit: false, |
|||
del: false, |
|||
reset: true, |
|||
download: true, |
|||
group: false |
|||
}}) |
|||
}, |
|||
mixins: [presenter(), header(), crud()], |
|||
data() { |
|||
return { |
|||
detailVisible: false |
|||
} |
|||
}, |
|||
created() { |
|||
}, |
|||
methods: { |
|||
clickRowHandler(row) { |
|||
// this.$refs.table.toggleRowSelection(row) |
|||
}, |
|||
selectionChangeHandler(val) { |
|||
this.selections = val |
|||
}, |
|||
// 双击详情 |
|||
handleDbClick(row) { |
|||
this.detailVisible = true |
|||
}, |
|||
handleClose() { |
|||
this.detailVisible = false |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
.import-dialog{ |
|||
::v-deep .el-dialog{ |
|||
width: 940px; |
|||
.el-dialog__body{ |
|||
padding: 20px 0 30px 0; |
|||
} |
|||
.setting-dialog{ |
|||
position: relative; |
|||
} |
|||
} |
|||
} |
|||
.import-data-number{ |
|||
position: absolute; |
|||
right: 10px; |
|||
top: 20px; |
|||
font-size: 12px; |
|||
color: #fff; |
|||
display: flex; |
|||
justify-content: flex-start; |
|||
& p{ |
|||
margin-right: 10px; |
|||
} |
|||
& span{ |
|||
font-weight: bold; |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,113 @@ |
|||
<template> |
|||
<div class="import-detail-container"> |
|||
<ul class="import-tab"> |
|||
<li :class="{'active': archivesTabIndex == 0}" @click="changeActiveTab(0)">案卷</li> |
|||
<li :class="{'active': archivesTabIndex == 1}" @click="changeActiveTab(1)">文件</li> |
|||
<li :class="{'active': archivesTabIndex == 2}" @click="changeActiveTab(2)">资料</li> |
|||
</ul> |
|||
<el-table |
|||
ref="table" |
|||
:data="tableData" |
|||
style="width: 100%" |
|||
height="calc(100vh - 504px)" |
|||
@row-click="clickRowHandler" |
|||
@selection-change="selectionChangeHandler" |
|||
> |
|||
<el-table-column prop="security_class" label="密级" align="center" width="80px" /> |
|||
<el-table-column prop="medium_type" label="载体类型" align="center" width="100px" /> |
|||
<el-table-column prop="micro_number" label="缩微号" align="center" width="80px" /> |
|||
<el-table-column prop="archive_no" label="档号" align="center" width="200px" /> |
|||
<el-table-column prop="page_qty" label="文件件数" align="center" width="100px" /> |
|||
<el-table-column prop="maintitle" label="案卷题名" align="center" show-overflow-tooltip width="240px" /> |
|||
<el-table-column prop="begin_date" label="起始时间" align="center" width="140px" /> |
|||
<el-table-column prop="end_date" label="终止时间" align="center" width="140px" /> |
|||
<el-table-column prop="archive_ctg_no" label="分类号" align="center" width="140px" /> |
|||
<el-table-column prop="subject_term" label="主题词" align="center" width="140px" /> |
|||
<el-table-column prop="remarks" label="附注" align="center" width="120px" /> |
|||
<el-table-column prop="retention" label="保管期限" align="center" width="120px" /> |
|||
<el-table-column prop="archive_year" label="年度" align="center" width="100px" /> |
|||
<el-table-column prop="fonds_no" label="全宗" align="center" width="100px" /> |
|||
<el-table-column prop="piece_no" label="卷号" align="center" width="100px" /> |
|||
</el-table> |
|||
<!--分页组件--> |
|||
<el-pagination |
|||
:current-page="page.page" |
|||
:total="page.total" |
|||
:page-size="page.size" |
|||
:pager-count="5" |
|||
layout="total, prev, pager, next, sizes" |
|||
@size-change="handleSizeChange" |
|||
@current-change="handleCurrentPage" |
|||
/> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import tableJson from './table.json' |
|||
export default { |
|||
name: 'DataImport', |
|||
components: { }, |
|||
data() { |
|||
return { |
|||
archivesTabIndex: 0, |
|||
tableData: [], |
|||
page: { |
|||
page: 1, |
|||
size: 10, |
|||
total: 0 |
|||
} |
|||
} |
|||
}, |
|||
created() { |
|||
this.tableData = tableJson |
|||
}, |
|||
methods: { |
|||
changeActiveTab(index) { |
|||
this.archivesTabIndex = index |
|||
}, |
|||
// table |
|||
clickRowHandler(row) { |
|||
this.$refs.table.toggleRowSelection(row) |
|||
}, |
|||
// table |
|||
selectionChangeHandler(val) { |
|||
this.selections = val |
|||
}, |
|||
handleSizeChange(size) { |
|||
this.page.size = size |
|||
this.page.page = 1 |
|||
}, |
|||
handleCurrentPage(val) { |
|||
this.page.page = val |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang='scss' scoped> |
|||
.import-tab{ |
|||
display: flex; |
|||
justify-content: flex-start; |
|||
margin-bottom: 10px; |
|||
li{ |
|||
padding: 10px 20px 14px 20px; |
|||
font-size: 16px; |
|||
color: #339CFF; |
|||
cursor: pointer; |
|||
&.active{ |
|||
position: relative; |
|||
color: #fff; |
|||
&::after{ |
|||
content: ""; |
|||
position: absolute; |
|||
left: 0; |
|||
bottom: -1px; |
|||
width: 100%; |
|||
height: 3px; |
|||
border-radius: 3px; |
|||
background-color: #fff; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,274 @@ |
|||
<template> |
|||
<div class="warehouse"> |
|||
<div class="warehouse-left"> |
|||
<div class="left-3d"> |
|||
<iframe id="myIframe" ref="myIframe" name="iframeMap" class="iframe_box" src="/webA/index.html" frameborder="0" scrolling="no" /> |
|||
<ul class="msg-list"> |
|||
<li v-show="topDisplayData.DXW_DIV_TOP_001.show" :class="{ 'li-warn': topDisplayData.DXW_DIV_TOP_001.curstatus > 0 }"> |
|||
<svg-icon icon-class="temperature" class-name="msg-list-svg" /> |
|||
<div class="msg-txt"> |
|||
<span class="msg-list-num">{{ topDisplayData.DXW_DIV_TOP_001.curValue }}</span> |
|||
<p class="msg-list-unit">温度 {{ topDisplayData.DXW_DIV_TOP_001.unit }}</p> |
|||
</div> |
|||
</li> |
|||
<li v-show="topDisplayData.DXW_DIV_TOP_002.show" :class="{ 'li-warn': topDisplayData.DXW_DIV_TOP_002.curstatus > 0 }"> |
|||
<svg-icon icon-class="shidu" class-name="msg-list-svg" /> |
|||
<div class="msg-txt"> |
|||
<span class="msg-list-num">{{ topDisplayData.DXW_DIV_TOP_002.curValue }}</span> |
|||
<p class="msg-list-unit">湿度 {{ topDisplayData.DXW_DIV_TOP_002.unit }}</p> |
|||
</div> |
|||
</li> |
|||
<li v-show="topDisplayData.DXW_DIV_TOP_003.show" :class="{ 'li-warn': topDisplayData.DXW_DIV_TOP_003.curstatus > 0 }"> |
|||
<svg-icon icon-class="co2" class-name="msg-list-svg" /> |
|||
<div class="msg-txt"> |
|||
<span class="msg-list-num">{{ topDisplayData.DXW_DIV_TOP_003.curValue }}</span> |
|||
<p class="msg-list-unit">CO2 {{ topDisplayData.DXW_DIV_TOP_003.unit }}</p> |
|||
</div> |
|||
</li> |
|||
<li v-show="topDisplayData.DXW_DIV_TOP_004.show" :class="{ 'li-warn': topDisplayData.DXW_DIV_TOP_004.curstatus > 0 }"> |
|||
<svg-icon icon-class="voc" class-name="msg-list-svg" /> |
|||
<div class="msg-txt"> |
|||
<span class="msg-list-num">{{ topDisplayData.DXW_DIV_TOP_004.curValue }}</span> |
|||
<p class="msg-list-unit">VOC {{ topDisplayData.DXW_DIV_TOP_004.unit }}</p> |
|||
</div> |
|||
</li> |
|||
<li v-show="topDisplayData.DXW_DIV_TOP_005.show" :class="{ 'li-warn': topDisplayData.DXW_DIV_TOP_005.curstatus > 0 }" class="msg-pm"> |
|||
<svg-icon icon-class="pm25" class-name="msg-list-svg" /> |
|||
<div class="msg-txt"> |
|||
<span class="msg-list-num">{{ topDisplayData.DXW_DIV_TOP_005.curValue }}</span> |
|||
<p class="msg-list-unit">PM2.5 {{ topDisplayData.DXW_DIV_TOP_005.unit }}</p> |
|||
</div> |
|||
</li> |
|||
<li v-show="topDisplayData.DXW_DIV_TOP_006.show" :class="{ 'li-warn': topDisplayData.DXW_DIV_TOP_006.curstatus > 0 }" class="msg-pm"> |
|||
<svg-icon icon-class="pm10" class-name="msg-list-svg" /> |
|||
<div class="msg-txt"> |
|||
<span class="msg-list-num">{{ topDisplayData.DXW_DIV_TOP_006.curValue }}</span> |
|||
<p class="msg-list-unit">PM10 {{ topDisplayData.DXW_DIV_TOP_006.unit }}</p> |
|||
</div> |
|||
</li> |
|||
</ul> |
|||
</div> |
|||
</div> |
|||
<div class="warehouse-right"> |
|||
<!-- 报警记录 --> |
|||
<warehouse-warning :height="'calc(100% - 40px)'" :storeroom-id="roomId" /> |
|||
<!-- 门禁记录 --> |
|||
<security-door :height="'calc(100% - 40px)'" /> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import WarehouseWarning from '@/views/components/WarehouseWarning' |
|||
import SecurityDoor from '@/views/components/SecurityDoor' |
|||
import displayConfigApi from '@/api/storeManage/displayConfig' |
|||
import thirdApi from '@/api/thirdApi' |
|||
export default { |
|||
name: 'DestroyedFileRoom', |
|||
components: { WarehouseWarning, SecurityDoor }, |
|||
data() { |
|||
return { |
|||
roomId: 'D4C395BFB0A2E7C96C65A0', |
|||
allDisplayConfigData: [], |
|||
displayConfigData: [], |
|||
url: '', |
|||
allDeviceIds: [], |
|||
oaoMessage: [], |
|||
timer: '', |
|||
topDisplayData: { |
|||
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 |
|||
} |
|||
} |
|||
// , |
|||
// iframeWin: null, |
|||
// timer: null, // 定时器id 滚动表格 |
|||
// isScroll: false // 是否滚动 |
|||
} |
|||
}, |
|||
async created() { |
|||
window.getIframeLoading = this.getIframeLoading // 把vue实例中的方法引用给window对象 |
|||
this.allDisplayConfigData = await displayConfigApi.list({ storeroomId: this.roomId }) |
|||
this.allDisplayConfigData.forEach(element => { |
|||
if (element.isDisplay && element.bindState && element.deviceInfo && (element.divPosition.includes('OAO') || element.divPosition.includes('TOP'))) { |
|||
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')) }) |
|||
await this.getRealTimeData() |
|||
}, |
|||
mounted() { |
|||
const _this = this |
|||
_this.iframeWin = this.$refs.myIframe.contentWindow |
|||
// inframe 加载完成之后 |
|||
document.getElementById('myIframe').onload = function() { |
|||
_this.deviceState() |
|||
} |
|||
window.addEventListener('message', this.handleMessageDevice) |
|||
// 定时请求第三方数据，更新页面数据 |
|||
this.timer = setInterval(async() => { |
|||
await _this.getRealTimeData() |
|||
_this.handleAQI() |
|||
}, 10000) |
|||
}, |
|||
beforeDestroy() { |
|||
if (this.timer) { |
|||
clearInterval(this.timer) |
|||
} |
|||
}, |
|||
methods: { |
|||
// 加载完成状态传值 |
|||
getIframeLoading(value) { |
|||
// console.log(`我是iframe传过来的参数：${value}`) |
|||
if (value === 'false') { |
|||
this.allDisplayConfigData.forEach(element => { |
|||
if ((!element.isDisplay || !element.bindState) && element.divPosition.includes('OAO')) { |
|||
this.handleHide(element.divPosition) |
|||
} |
|||
}) |
|||
// this.handleAlarm('DAK_MO_OAO_003') |
|||
this.deviceState() |
|||
this.handleAQI() |
|||
} |
|||
}, |
|||
// 传入设备状态data / 给iframe传初始值 |
|||
deviceState(e) { |
|||
this.iframeWin.postMessage({ |
|||
data: this.oaoMessage |
|||
}, '*') |
|||
}, |
|||
// 点击查看设备状况 / 密集架列号 |
|||
handleMessageDevice(event) { |
|||
const _this = this |
|||
if (event.data && event.data.data) { |
|||
const data = event.data.data |
|||
if (data.includes('cabinet')) { |
|||
_this.deviceId = data.slice(data.length - 2) |
|||
_this.$router.push('/storeManage/deseCabinet') |
|||
localStorage.setItem('cabinetNum', _this.deviceId) |
|||
} |
|||
} |
|||
}, |
|||
// 设置温湿度 |
|||
handleAQI() { |
|||
this.oaoMessage.forEach(element => { |
|||
window.frames['iframeMap'].setAlertValue(element.id, element.wendu, element.sidu) |
|||
}) |
|||
}, |
|||
// 设置温湿度报警状况 |
|||
handleAlarm(deviceId) { |
|||
// true 报警 false 不报警 |
|||
window.frames['iframeMap'].Myalert(deviceId, true) |
|||
}, |
|||
// 设置是否显示 |
|||
handleHide(deviceId) { |
|||
// true 显示 false 隐藏 |
|||
window.frames['iframeMap'].setYangGanCanshow(deviceId, false) |
|||
}, |
|||
// 表格隔行变色 |
|||
rowBgColor({ row, rowIndex }) { |
|||
if (rowIndex % 2 === 1) { |
|||
return 'light-blue' |
|||
} else { |
|||
return '' |
|||
} |
|||
}, |
|||
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 |
|||
}) |
|||
console.log(result) |
|||
this.$set(this.topDisplayData, element.divPosition, { |
|||
show: true, |
|||
curValue: result.curvalue, |
|||
unit: result.unit, |
|||
curstatus: result.curstatus |
|||
}) |
|||
} else { |
|||
// 获取3D弹窗显示的数据 |
|||
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 |
|||
}) |
|||
} |
|||
console.log(wendu?.curstatus, sidu?.curstatus) |
|||
this.oaoMessage.push({ |
|||
id: element.divPosition, |
|||
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 lang="scss" scoped> |
|||
@import "~@/assets/styles/lend-manage.scss"; |
|||
.warehouse-left { |
|||
position: relative; |
|||
} |
|||
.container-wrap { |
|||
min-height: auto; |
|||
height: calc(100% / 2 - 10px); |
|||
overflow: hidden; |
|||
} |
|||
.container-wrap { |
|||
margin-bottom: 20px; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,63 @@ |
|||
<template> |
|||
<div class="warehouse"> |
|||
<div class="warehouse-left"> |
|||
<div class="left-3d"> |
|||
<h2 class="title-arrow"> |
|||
7楼-3D库房 |
|||
</h2> |
|||
<iframe |
|||
ref="iframe" |
|||
class="iframe_box" |
|||
src="/webTotal/index.html" |
|||
frameborder="0" |
|||
scrolling="no" |
|||
/> |
|||
</div> |
|||
</div> |
|||
<warehouse-warning :width="'458px'" :height="'calc(100% - 40px)'" /> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import WarehouseWarning from '@/views/components/WarehouseWarning' |
|||
export default { |
|||
name: 'FullViewSeven', |
|||
components: { WarehouseWarning }, |
|||
data() { |
|||
return { |
|||
cameraNameId: null |
|||
} |
|||
}, |
|||
mounted() { |
|||
// 监听'全景图' iframe 获取摄像头name得id |
|||
// window.addEventListener('message', this.handleMessageCamera) |
|||
}, |
|||
methods: { |
|||
// handleMessageCamera(event) { |
|||
// const _this = this |
|||
// if (event.data && event.data.data) { |
|||
// const data = event.data.data |
|||
// _this.cameraNameId = data |
|||
// } |
|||
// }, |
|||
destroyed() { |
|||
window.removeEventListener('message', this.handleMessageCamera) |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
@import '~@/assets/styles/lend-manage.scss'; |
|||
.warehouse-left{ |
|||
position: relative; |
|||
h2{ |
|||
display: block; |
|||
width: 460px !important; |
|||
color: #fff; |
|||
font-size: 16px; |
|||
text-align: center; |
|||
margin: 0 auto; |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,274 @@ |
|||
<template> |
|||
<div class="warehouse"> |
|||
<div class="warehouse-left"> |
|||
<div class="left-3d"> |
|||
<iframe id="myIframe" ref="myIframe" name="iframeMap" class="iframe_box" src="/webA/index.html" frameborder="0" scrolling="no" /> |
|||
<ul class="msg-list"> |
|||
<li v-show="topDisplayData.XXW_DIV_TOP_001.show" :class="{ 'li-warn': topDisplayData.XXW_DIV_TOP_001.curstatus > 0 }"> |
|||
<svg-icon icon-class="temperature" class-name="msg-list-svg" /> |
|||
<div class="msg-txt"> |
|||
<span class="msg-list-num">{{ topDisplayData.XXW_DIV_TOP_001.curValue }}</span> |
|||
<p class="msg-list-unit">温度 {{ topDisplayData.XXW_DIV_TOP_001.unit }}</p> |
|||
</div> |
|||
</li> |
|||
<li v-show="topDisplayData.XXW_DIV_TOP_002.show" :class="{ 'li-warn': topDisplayData.XXW_DIV_TOP_002.curstatus > 0 }"> |
|||
<svg-icon icon-class="shidu" class-name="msg-list-svg" /> |
|||
<div class="msg-txt"> |
|||
<span class="msg-list-num">{{ topDisplayData.XXW_DIV_TOP_002.curValue }}</span> |
|||
<p class="msg-list-unit">湿度 {{ topDisplayData.XXW_DIV_TOP_002.unit }}</p> |
|||
</div> |
|||
</li> |
|||
<li v-show="topDisplayData.XXW_DIV_TOP_003.show" :class="{ 'li-warn': topDisplayData.XXW_DIV_TOP_003.curstatus > 0 }"> |
|||
<svg-icon icon-class="co2" class-name="msg-list-svg" /> |
|||
<div class="msg-txt"> |
|||
<span class="msg-list-num">{{ topDisplayData.XXW_DIV_TOP_003.curValue }}</span> |
|||
<p class="msg-list-unit">CO2 {{ topDisplayData.XXW_DIV_TOP_003.unit }}</p> |
|||
</div> |
|||
</li> |
|||
<li v-show="topDisplayData.XXW_DIV_TOP_004.show" :class="{ 'li-warn': topDisplayData.XXW_DIV_TOP_004.curstatus > 0 }"> |
|||
<svg-icon icon-class="voc" class-name="msg-list-svg" /> |
|||
<div class="msg-txt"> |
|||
<span class="msg-list-num">{{ topDisplayData.XXW_DIV_TOP_004.curValue }}</span> |
|||
<p class="msg-list-unit">VOC {{ topDisplayData.XXW_DIV_TOP_004.unit }}</p> |
|||
</div> |
|||
</li> |
|||
<li v-show="topDisplayData.XXW_DIV_TOP_005.show" :class="{ 'li-warn': topDisplayData.XXW_DIV_TOP_005.curstatus > 0 }" class="msg-pm"> |
|||
<svg-icon icon-class="pm25" class-name="msg-list-svg" /> |
|||
<div class="msg-txt"> |
|||
<span class="msg-list-num">{{ topDisplayData.XXW_DIV_TOP_005.curValue }}</span> |
|||
<p class="msg-list-unit">PM2.5 {{ topDisplayData.XXW_DIV_TOP_005.unit }}</p> |
|||
</div> |
|||
</li> |
|||
<li v-show="topDisplayData.XXW_DIV_TOP_006.show" :class="{ 'li-warn': topDisplayData.XXW_DIV_TOP_006.curstatus > 0 }" class="msg-pm"> |
|||
<svg-icon icon-class="pm10" class-name="msg-list-svg" /> |
|||
<div class="msg-txt"> |
|||
<span class="msg-list-num">{{ topDisplayData.XXW_DIV_TOP_006.curValue }}</span> |
|||
<p class="msg-list-unit">PM10 {{ topDisplayData.XXW_DIV_TOP_006.unit }}</p> |
|||
</div> |
|||
</li> |
|||
</ul> |
|||
</div> |
|||
</div> |
|||
<div class="warehouse-right"> |
|||
<!-- 报警记录 --> |
|||
<warehouse-warning :height="'calc(100% - 40px)'" :storeroom-id="roomId" /> |
|||
<!-- 门禁记录 --> |
|||
<security-door :height="'calc(100% - 40px)'" /> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import WarehouseWarning from '@/views/components/WarehouseWarning' |
|||
import SecurityDoor from '@/views/components/SecurityDoor' |
|||
import displayConfigApi from '@/api/storeManage/displayConfig' |
|||
import thirdApi from '@/api/thirdApi' |
|||
export default { |
|||
name: 'InfoRoom', |
|||
components: { WarehouseWarning, SecurityDoor }, |
|||
data() { |
|||
return { |
|||
roomId: '1B2DADD8499058954C0CAC ', |
|||
allDisplayConfigData: [], |
|||
displayConfigData: [], |
|||
url: '', |
|||
allDeviceIds: [], |
|||
oaoMessage: [], |
|||
timer: '', |
|||
topDisplayData: { |
|||
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 |
|||
} |
|||
} |
|||
// , |
|||
// iframeWin: null, |
|||
// timer: null, // 定时器id 滚动表格 |
|||
// isScroll: false // 是否滚动 |
|||
} |
|||
}, |
|||
async created() { |
|||
window.getIframeLoading = this.getIframeLoading // 把vue实例中的方法引用给window对象 |
|||
this.allDisplayConfigData = await displayConfigApi.list({ storeroomId: this.roomId }) |
|||
this.allDisplayConfigData.forEach(element => { |
|||
if (element.isDisplay && element.bindState && element.deviceInfo && (element.divPosition.includes('OAO') || element.divPosition.includes('TOP'))) { |
|||
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')) }) |
|||
await this.getRealTimeData() |
|||
}, |
|||
mounted() { |
|||
const _this = this |
|||
_this.iframeWin = this.$refs.myIframe.contentWindow |
|||
// inframe 加载完成之后 |
|||
document.getElementById('myIframe').onload = function() { |
|||
_this.deviceState() |
|||
} |
|||
window.addEventListener('message', this.handleMessageDevice) |
|||
// 定时请求第三方数据，更新页面数据 |
|||
this.timer = setInterval(async() => { |
|||
await _this.getRealTimeData() |
|||
_this.handleAQI() |
|||
}, 10000) |
|||
}, |
|||
beforeDestroy() { |
|||
if (this.timer) { |
|||
clearInterval(this.timer) |
|||
} |
|||
}, |
|||
methods: { |
|||
// 加载完成状态传值 |
|||
getIframeLoading(value) { |
|||
// console.log(`我是iframe传过来的参数：${value}`) |
|||
if (value === 'false') { |
|||
this.allDisplayConfigData.forEach(element => { |
|||
if ((!element.isDisplay || !element.bindState) && element.divPosition.includes('OAO')) { |
|||
this.handleHide(element.divPosition) |
|||
} |
|||
}) |
|||
// this.handleAlarm('DAK_MO_OAO_003') |
|||
this.deviceState() |
|||
this.handleAQI() |
|||
} |
|||
}, |
|||
// 传入设备状态data / 给iframe传初始值 |
|||
deviceState(e) { |
|||
this.iframeWin.postMessage({ |
|||
data: this.oaoMessage |
|||
}, '*') |
|||
}, |
|||
// 点击查看设备状况 / 密集架列号 |
|||
handleMessageDevice(event) { |
|||
const _this = this |
|||
if (event.data && event.data.data) { |
|||
const data = event.data.data |
|||
if (data.includes('cabinet')) { |
|||
_this.deviceId = data.slice(data.length - 2) |
|||
_this.$router.push('/storeManage/deseCabinet') |
|||
localStorage.setItem('cabinetNum', _this.deviceId) |
|||
} |
|||
} |
|||
}, |
|||
// 设置温湿度 |
|||
handleAQI() { |
|||
this.oaoMessage.forEach(element => { |
|||
window.frames['iframeMap'].setAlertValue(element.id, element.wendu, element.sidu) |
|||
}) |
|||
}, |
|||
// 设置温湿度报警状况 |
|||
handleAlarm(deviceId) { |
|||
// true 报警 false 不报警 |
|||
window.frames['iframeMap'].Myalert(deviceId, true) |
|||
}, |
|||
// 设置是否显示 |
|||
handleHide(deviceId) { |
|||
// true 显示 false 隐藏 |
|||
window.frames['iframeMap'].setYangGanCanshow(deviceId, false) |
|||
}, |
|||
// 表格隔行变色 |
|||
rowBgColor({ row, rowIndex }) { |
|||
if (rowIndex % 2 === 1) { |
|||
return 'light-blue' |
|||
} else { |
|||
return '' |
|||
} |
|||
}, |
|||
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 |
|||
}) |
|||
console.log(result) |
|||
this.$set(this.topDisplayData, element.divPosition, { |
|||
show: true, |
|||
curValue: result.curvalue, |
|||
unit: result.unit, |
|||
curstatus: result.curstatus |
|||
}) |
|||
} else { |
|||
// 获取3D弹窗显示的数据 |
|||
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 |
|||
}) |
|||
} |
|||
console.log(wendu?.curstatus, sidu?.curstatus) |
|||
this.oaoMessage.push({ |
|||
id: element.divPosition, |
|||
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 lang="scss" scoped> |
|||
@import "~@/assets/styles/lend-manage.scss"; |
|||
.warehouse-left { |
|||
position: relative; |
|||
} |
|||
.container-wrap { |
|||
min-height: auto; |
|||
height: calc(100% / 2 - 10px); |
|||
overflow: hidden; |
|||
} |
|||
.container-wrap { |
|||
margin-bottom: 20px; |
|||
} |
|||
</style> |
|||
Write
Preview
Loading…
Cancel
Save
Reference in new issue