You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
863 lines
28 KiB
863 lines
28 KiB
<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)">5楼</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="height: calc(100%); padding-left: 15px;">
|
|
<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>VOC</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>VOC</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>VOC</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)">5楼</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) {
|
|
console.log('this.allDeviceIds', this.allDeviceIds)
|
|
console.log('this.displayConfigData', this.displayConfigData)
|
|
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>
|