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.
747 lines
22 KiB
747 lines
22 KiB
<template>
|
|
<div class="dashboard-container">
|
|
<div class="dashboard-editor-container">
|
|
<panel-group />
|
|
<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>
|
|
</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> -->
|
|
|
|
<ul v-if="newAlarm && newAlarm.length !== 0" class="leakage-list">
|
|
<li v-for="item in newAlarm" :key="item.SUBID">
|
|
<div class="msg-txt">
|
|
<p>{{ item.subName }}</p>
|
|
<span>{{ item.value }}</span>
|
|
</div>
|
|
</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>
|
|
</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)'" /> -->
|
|
<AccessDoor :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 AccessDoor from '@/views/components/AccessDoor'
|
|
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 alarmApi from '@/api/home/alarm'
|
|
// import { allDeviceData, mockIpData } from '@/views/environmentalScreen/index.js'
|
|
|
|
// // 同步mock方法
|
|
// const mockFetchDataForIP = (params) => {
|
|
// return new Promise((resolve) => {
|
|
// setTimeout(() => {
|
|
// const ip = params.ip
|
|
// const result = mockIpData[ip] || { code: 200, message: '操作成功', data: [], timestamp: Date.now() }
|
|
// resolve(result.data)
|
|
// }, 500)
|
|
// })
|
|
// }
|
|
import { mapGetters } from 'vuex'
|
|
|
|
export default {
|
|
name: 'Dashboard',
|
|
components: {
|
|
WarehouseWarning,
|
|
// SecurityDoor,
|
|
AccessDoor,
|
|
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
|
|
}
|
|
},
|
|
// 同步FullView的核心数据
|
|
newAlarm: [],
|
|
aqiValue: 45,
|
|
aqiStatus: '健康',
|
|
keepIndicators: [
|
|
'二氧化碳',
|
|
'甲醛',
|
|
'综合气体',
|
|
'PM2.5浓度',
|
|
'PM10浓度',
|
|
'温度',
|
|
'湿度',
|
|
'空气质量'
|
|
],
|
|
ipToNameMap: {}, // IP到设备名称映射
|
|
currentDeviceName: '', // 当前显示设备名称
|
|
currentIpIndex: 0, // IP轮询索引
|
|
excludeIpList: ['192.168.99.101:6003'] // 排除IP列表
|
|
}
|
|
},
|
|
computed: {
|
|
...mapGetters([
|
|
'roles'
|
|
])
|
|
},
|
|
async created() {
|
|
this.getWaitBorrower()
|
|
|
|
// console.log('allDeviceData:', allDeviceData)
|
|
// this.allDisplayConfigData = allDeviceData
|
|
// this.handleDeviceIpList()
|
|
// 真实请求请替换：
|
|
await alarmApi.FetchYpGetSite().then((data) => {
|
|
if (data && data.length > 0) {
|
|
this.allDisplayConfigData = data
|
|
// 处理设备IP列表
|
|
this.handleDeviceIpList()
|
|
} else {
|
|
this.allDisplayConfigData = []
|
|
}
|
|
})
|
|
|
|
// 初始加载数据
|
|
if (this.allDeviceIds.length > 0) {
|
|
this.currentDeviceName = this.ipToNameMap[this.allDeviceIds[0]] || ''
|
|
await this.getRealTimeData(this.allDeviceIds[0])
|
|
console.log('初始加载IP数据：', this.allDeviceIds[0])
|
|
} else {
|
|
console.warn('无有效设备IP，停止轮询')
|
|
this.newAlarm = []
|
|
}
|
|
},
|
|
mounted() {
|
|
if (this.allDeviceIds.length > 0) {
|
|
this.dataTimer = setInterval(async() => {
|
|
const currentIp = this.getNextIp()
|
|
this.currentDeviceName = this.ipToNameMap[currentIp] || ''
|
|
await this.getRealTimeData(currentIp)
|
|
}, 10000)
|
|
console.log(`启动IP轮询，共${this.allDeviceIds.length}个有效IP：`, this.allDeviceIds)
|
|
}
|
|
},
|
|
methods: {
|
|
/**
|
|
* 处理设备IP列表（去重+排除+名称映射）
|
|
*/
|
|
handleDeviceIpList() {
|
|
const ipSet = new Set()
|
|
this.ipToNameMap = {}
|
|
|
|
this.allDisplayConfigData.forEach(element => {
|
|
const ip = (element.IP || '').trim()
|
|
if (ip && !this.excludeIpList.includes(ip)) {
|
|
ipSet.add(ip)
|
|
this.ipToNameMap[ip] = element.Name || `未知设备(${ip})`
|
|
console.log('有效设备IP：', ip, '设备名称：', element.Name)
|
|
} else if (this.excludeIpList.includes(ip)) {
|
|
console.log('排除指定IP：', ip, '设备名称：', element.Name)
|
|
} else if (!ip) {
|
|
console.log('过滤空IP：', element.Name)
|
|
}
|
|
})
|
|
this.allDeviceIds = Array.from(ipSet)
|
|
},
|
|
|
|
/**
|
|
* 获取下一个轮询IP（循环切换）
|
|
*/
|
|
getNextIp() {
|
|
if (this.allDeviceIds.length === 0) return ''
|
|
const ip = this.allDeviceIds[this.currentIpIndex]
|
|
this.currentIpIndex = (this.currentIpIndex + 1) % this.allDeviceIds.length
|
|
console.log(`轮询切换 - 当前IP：${ip}，下一个索引：${this.currentIpIndex}`)
|
|
return ip
|
|
},
|
|
/**
|
|
* 请求指定IP的实时数据（过滤+AQI计算）
|
|
*/
|
|
async getRealTimeData(targetIp) {
|
|
if (!targetIp) {
|
|
this.newAlarm = []
|
|
this.currentDeviceName = ''
|
|
return
|
|
}
|
|
|
|
try {
|
|
console.log(`开始请求IP【${targetIp}】的实时数据（模拟）`)
|
|
// 模拟
|
|
// const data = await mockFetchDataForIP({ ip: targetIp })
|
|
// 真实请求
|
|
const data = await alarmApi.FetchDataForIP({ ip: targetIp })
|
|
|
|
// 过滤需要的指标
|
|
const filteredData = data.filter(item =>
|
|
this.keepIndicators.includes(item.subName)
|
|
)
|
|
|
|
if (filteredData.length > 0) {
|
|
this.newAlarm = filteredData
|
|
console.log(`IP【${targetIp}】(${this.currentDeviceName}) 过滤后的数据：`, filteredData)
|
|
} else {
|
|
this.newAlarm = []
|
|
this.aqiValue = 45
|
|
this.aqiStatus = '健康'
|
|
console.log(`IP【${targetIp}】(${this.currentDeviceName}) 无需要的指标数据`)
|
|
}
|
|
} catch (error) {
|
|
this.newAlarm = []
|
|
this.aqiValue = 45
|
|
this.aqiStatus = '健康'
|
|
this.currentDeviceName = ''
|
|
console.error(`IP【${targetIp}】数据请求失败：`, error)
|
|
}
|
|
},
|
|
|
|
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'
|
|
})
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</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-wrap: wrap;
|
|
flex: 1;
|
|
text-align: left;
|
|
font-size: 10px;
|
|
padding-left: 10px;
|
|
li {
|
|
position: relative;
|
|
display: flex;
|
|
justify-content: flex-start;
|
|
flex-wrap: wrap;
|
|
align-items: center;
|
|
width: 72px;
|
|
height: 40px;
|
|
border: 1px solid #3581cc;
|
|
background-color: #02255f;
|
|
border-radius: 2px;
|
|
padding: 4px;
|
|
margin: 6px 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>
|