10 changed files with 1478 additions and 701 deletions
-
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
-
12src/views/storeManage/deviceManage/module/deviceDetail.vue
-
274src/views/storeManage/warehouse3D/destroyedFileRoom/index.vue
-
63src/views/storeManage/warehouse3D/fullViewSeven/index.vue
-
43src/views/storeManage/warehouse3D/index.vue
-
274src/views/storeManage/warehouse3D/infoRoom/index.vue
@ -1,23 +1,115 @@ |
|||||
<template> |
<template> |
||||
<div> |
<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> |
</div> |
||||
</template> |
</template> |
||||
|
|
||||
<script> |
<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 { |
export default { |
||||
name: 'ImportLog', |
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() { |
data() { |
||||
return { |
return { |
||||
|
detailVisible: false |
||||
} |
} |
||||
}, |
}, |
||||
created() { |
created() { |
||||
}, |
}, |
||||
methods: { |
methods: { |
||||
|
clickRowHandler(row) { |
||||
|
// this.$refs.table.toggleRowSelection(row) |
||||
|
}, |
||||
|
selectionChangeHandler(val) { |
||||
|
this.selections = val |
||||
|
}, |
||||
|
// 双击详情 |
||||
|
handleDbClick(row) { |
||||
|
this.detailVisible = true |
||||
|
}, |
||||
|
handleClose() { |
||||
|
this.detailVisible = false |
||||
|
} |
||||
} |
} |
||||
} |
} |
||||
</script> |
</script> |
||||
|
|
||||
<style lang="scss" scoped> |
<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> |
</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