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.
2098 lines
62 KiB
2098 lines
62 KiB
<template> |
|
<div class="monitor" v-loading="loading"> |
|
<div class="monitor-top"> |
|
<img |
|
class="title-left" |
|
src="../../../assets/images/title-left.png" |
|
alt="" |
|
/> |
|
<img |
|
class="title-center" |
|
src="../../../assets/images/title-center.png" |
|
alt="" |
|
/> |
|
<img |
|
class="title-right" |
|
src="../../../assets/images/title-right.png" |
|
alt="" |
|
/> |
|
<div class="sys-title" @click="goSys">生活热水供水监控系统</div> |
|
<!-- logo --> |
|
<img src="../../../assets/images/logo-3.png" class="sys-logo" alt="" /> |
|
<div class="nowTime">{{ formattedDate }}</div> |
|
<div class="monitor-time">已监测时长:{{ dayData }}天</div> |
|
<img |
|
class="icon_warning" |
|
src="../../../assets/images/warning.png" |
|
title="报警记录" |
|
@click="goWarning" |
|
v-if="isShowWarning" |
|
alt="" |
|
/> |
|
<img |
|
class="icon_home" |
|
src="../../../assets/images/icon_home.png" |
|
title="首页" |
|
@click="goSys" |
|
alt="" |
|
/> |
|
<img |
|
class="back-icon" |
|
src="../../../assets/images/back-icon.png" |
|
title="返回" |
|
@click="goBack" |
|
alt="" |
|
/> |
|
</div> |
|
<div class="app-container"> |
|
<div class="left-tree"> |
|
<!-- 为 el-tree 设置一个固定的高度和滚动条 --> |
|
<div style="height: 5rem; overflow-y: auto"> |
|
<el-tree |
|
ref="tree" |
|
:data="treeData" |
|
node-key="id" |
|
:default-expand-all="false" |
|
:default-expanded-keys="expandedKeys" |
|
:auto-expand-parent="true" |
|
icon-class="none" |
|
@node-expand="handleNodeExpand" |
|
@node-collapse="handleNodeCollapse" |
|
:highlight-current="true" |
|
@node-click="handleNodeClick" |
|
> |
|
<template #default="{ node }"> |
|
<span class="custom-tree-node"> |
|
<!-- 根据节点状态动态设置图标类名 --> |
|
<div class="tree-left"> |
|
<i :class="getIconClass(node)" class="custom-tree-icon"></i> |
|
<span class="tree-label">{{ node.label }}</span> |
|
</div> |
|
</span> |
|
</template> |
|
</el-tree> |
|
</div> |
|
<div class="base-mes"> |
|
<div class="base-title">公共信息</div> |
|
<div class="base-height"> |
|
<div |
|
class="base-li" |
|
v-for="(item, index) in baseTable" |
|
:key="index" |
|
> |
|
{{ item.name }}:<span class="deepColor">{{ item.value }}</span |
|
>{{ item.unit }} |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
<div class="right-monitor"> |
|
<div class="buildingDiv"> |
|
<img |
|
class="title-bg" |
|
src="../../../assets/images/title-bg.png" |
|
alt="" |
|
/> |
|
<div class="title-word">楼层：{{ currentName }}</div> |
|
</div> |
|
<div class="folw"> |
|
<!-- 动态流程图 --> |
|
<div class="changeimage"> |
|
<!-- <img class="img-rad" src="" alt="" /> --> |
|
<div class="flowimg"> |
|
<!-- <img v-if="this.useWater == '运行'" src="../../../assets/images/flowimg/move.gif" class="bigMove" alt="" /> |
|
<img v-else src="../../../assets/images/flowimg/nomove.png" class="bigMove" alt="" /> --> |
|
|
|
<!-- 文字定位 --> |
|
<div class="flow-text text1">{{ progressName1 }}供水泵1</div> |
|
<div class="flow-text text6">{{ progressName1 }}供水泵2</div> |
|
<div class="flow-text text9">{{ progressName2 }}供水泵1</div> |
|
<div class="flow-text text10">{{ progressName2 }}供水泵2</div> |
|
<div class="flow-text text2">回水管</div> |
|
<div class="flow-text text3">无线网关</div> |
|
<div class="flow-text text4">回水阀</div> |
|
<div class="flow-text text5">房间</div> |
|
<!-- <div class="flow-text text7">循环加热泵</div> --> |
|
<div class="flow-text text8">补水阀</div> |
|
<!-- 补水阀定位 --> |
|
<img |
|
class="replenish" |
|
v-if="this.useWaterState === '1'" |
|
src="../../../assets/flowimg/replenish-move.gif" |
|
alt="" |
|
/> |
|
<img |
|
class="replenish" |
|
v-else |
|
src="../../../assets/flowimg/replenish-nomove.png" |
|
alt="" |
|
/> |
|
<!-- 供水定位 --> |
|
<img |
|
class="supply" |
|
v-if=" |
|
this.upWaterState1 === '1' || |
|
this.upWaterState2 === '1' || |
|
this.upWaterState3 === '1' || |
|
this.upWaterState4 === '1' |
|
" |
|
src="../../../assets/flowimg/supply-move.gif" |
|
alt="" |
|
/> |
|
<img |
|
class="supply" |
|
v-else |
|
src="../../../assets/flowimg/supply-nomove.png" |
|
alt="" |
|
/> |
|
<!-- 加热定位 --> |
|
<img |
|
class="circulate" |
|
v-if="this.hotPumState === '1' && this.isBad !== '1'" |
|
src="../../../assets/flowimg/circulate-move.gif" |
|
alt="" |
|
/> |
|
<img |
|
class="circulate" |
|
v-else |
|
src="../../../assets/flowimg/circulate-nomove.png" |
|
alt="" |
|
/> |
|
<!-- 供水泵1定位 --> |
|
<img |
|
class="coolpum" |
|
v-if="this.upWaterState1 === '1'" |
|
src="../../../assets/flowimg/startpum.png" |
|
alt="" |
|
/> |
|
<img |
|
class="coolpum" |
|
v-else |
|
src="../../../assets/flowimg/closepum.png" |
|
alt="" |
|
/> |
|
<!-- 供水泵2定位 --> |
|
<img |
|
class="waterpum" |
|
v-if="this.upWaterState2 === '1'" |
|
src="../../../assets/flowimg/startpum.png" |
|
alt="" |
|
/> |
|
<img |
|
class="waterpum" |
|
v-else |
|
src="../../../assets/flowimg/closepum.png" |
|
alt="" |
|
/> |
|
<!-- 供水泵3定位 --> |
|
<img |
|
class="waterpum2" |
|
v-if="this.upWaterState3 === '1'" |
|
src="../../../assets/flowimg/startpum.png" |
|
alt="" |
|
/> |
|
<img |
|
class="waterpum2" |
|
v-else |
|
src="../../../assets/flowimg/closepum.png" |
|
alt="" |
|
/> |
|
<!-- 供水泵4定位 --> |
|
<img |
|
class="waterpum3" |
|
v-if="this.upWaterState4 === '1'" |
|
src="../../../assets/flowimg/startpum.png" |
|
alt="" |
|
/> |
|
<img |
|
class="waterpum3" |
|
v-else |
|
src="../../../assets/flowimg/closepum.png" |
|
alt="" |
|
/> |
|
<!-- 补水定位 --> |
|
<img |
|
class="buwaterpum2" |
|
v-if="backWaterState === '1'" |
|
src="../../../assets/flowimg/bu-move.gif" |
|
alt="" |
|
/> |
|
<img |
|
class="buwaterpum" |
|
v-else |
|
src="../../../assets/flowimg/bu-nomove.png" |
|
alt="" |
|
/> |
|
<!-- 循环加热泵定位--> |
|
<!-- <img |
|
class="cirpum" |
|
v-if="this.hotPumState === '1' && this.isBad !== '1'" |
|
src="../../../assets/flowimg/startpum.png" |
|
alt="" |
|
/> |
|
<img |
|
class="cirpum" |
|
v-else |
|
src="../../../assets/flowimg/closepum.png" |
|
alt="" |
|
/> --> |
|
<!-- 热泵定位 --> |
|
<div :class="getHotPumPositionClass"> |
|
<div |
|
class="hotPump-li" |
|
v-for="(item, index) in tableData" |
|
:key="index" |
|
> |
|
<template v-if="tableData.length === 2"> |
|
<template v-if="index === 0"> |
|
<div class="hotPump-name">{{ item.pumpName }}</div> |
|
<img |
|
class="hotPump-img" |
|
:src="getImageSrc(item)" |
|
alt="" |
|
/> |
|
<!-- <div class="hotPump-tem1">温度:{{ item.waterTemp }}℃</div> |
|
--> |
|
<img |
|
class="tem2" |
|
src="../../../assets/flowimg/thermometer.png" |
|
alt="" |
|
/> |
|
<div class="temContainer2"> |
|
<div |
|
class="temprogress" |
|
:style="{ height: item.waterTemp + '%' }" |
|
></div> |
|
</div> |
|
<b class="temdiv2">{{ item.waterTemp }}℃</b> |
|
</template> |
|
<template v-else> |
|
<img |
|
class="hotPump-img" |
|
:src="getImageSrc(item)" |
|
alt="" |
|
/> |
|
<div class="hotPump-name">{{ item.pumpName }}</div> |
|
<img |
|
class="tem2" |
|
src="../../../assets/flowimg/thermometer.png" |
|
alt="" |
|
/> |
|
<div class="temContainer2"> |
|
<div |
|
class="temprogress" |
|
:style="{ height: item.waterTemp + '%' }" |
|
></div> |
|
</div> |
|
<b class="temdiv2">{{ item.waterTemp }}℃</b> |
|
</template> |
|
</template> |
|
<template v-else-if="tableData.length === 4"> |
|
<template v-if="index < 2"> |
|
<template v-if="index === 0"> |
|
<div class="hotPump-name">{{ item.pumpName }}</div> |
|
<img |
|
class="hotPump-img" |
|
:src="getImageSrc(item)" |
|
alt="" |
|
/> |
|
<!-- <div class="hotPump-tem1">温度:{{ item.waterTemp }}℃</div> |
|
--> |
|
<img |
|
class="tem2" |
|
src="../../../assets/flowimg/thermometer.png" |
|
alt="" |
|
/> |
|
<div class="temContainer2"> |
|
<div |
|
class="temprogress" |
|
:style="{ height: item.waterTemp + '%' }" |
|
></div> |
|
</div> |
|
<b class="temdiv2">{{ item.waterTemp }}℃</b> |
|
</template> |
|
<template v-else> |
|
<div class="hotPump-name">{{ item.pumpName }}</div> |
|
<img |
|
class="hotPump-img" |
|
:src="getImageSrc(item)" |
|
alt="" |
|
/> |
|
<img |
|
class="tem1" |
|
src="../../../assets/flowimg/thermometer.png" |
|
alt="" |
|
/> |
|
<div class="temContainer1"> |
|
<div |
|
class="temprogress" |
|
:style="{ height: item.waterTemp + '%' }" |
|
></div> |
|
</div> |
|
<b class="temdiv1">{{ item.waterTemp }}℃</b> |
|
</template> |
|
</template> |
|
<template v-else> |
|
<template v-if="index === 2"> |
|
<img |
|
class="hotPump-img" |
|
:src="getImageSrc(item)" |
|
alt="" |
|
/> |
|
<div class="hotPump-name">{{ item.pumpName }}</div> |
|
<!-- <div class="hotPump-tem1">温度:{{ item.waterTemp }}℃</div> |
|
--> |
|
<img |
|
class="tem2" |
|
src="../../../assets/flowimg/thermometer.png" |
|
alt="" |
|
/> |
|
<div class="temContainer2"> |
|
<div |
|
class="temprogress" |
|
:style="{ height: item.waterTemp + '%' }" |
|
></div> |
|
</div> |
|
<b class="temdiv2">{{ item.waterTemp }}℃</b> |
|
</template> |
|
<template v-else> |
|
<img |
|
class="hotPump-img" |
|
:src="getImageSrc(item)" |
|
alt="" |
|
/> |
|
<div class="hotPump-name">{{ item.pumpName }}</div> |
|
<img |
|
class="tem1" |
|
src="../../../assets/flowimg/thermometer.png" |
|
alt="" |
|
/> |
|
<div class="temContainer1"> |
|
<div |
|
class="temprogress" |
|
:style="{ height: item.waterTemp + '%' }" |
|
></div> |
|
</div> |
|
<b class="temdiv1">{{ item.waterTemp }}℃</b> |
|
</template> |
|
</template> |
|
</template> |
|
</div> |
|
</div> |
|
<!-- 热泵名称定位 --> |
|
<!-- <div class="pumname">{{ this.pumname }}</div> --> |
|
<!-- 热泵定位 --> |
|
<!-- <img |
|
class="hotpum" |
|
v-if="this.hotPumState === '1' && this.isBad !== '1'" |
|
src="../../../assets/flowimg/starthotpum.png" |
|
alt="" |
|
/> |
|
<img |
|
class="hotpum" |
|
v-else-if="this.isBad === '1'" |
|
src="../../../assets/flowimg/badhotpum.png" |
|
alt="" |
|
/> |
|
<img |
|
class="hotpum" |
|
v-else |
|
src="../../../assets/flowimg/closehotpum.png" |
|
alt="" |
|
/> --> |
|
<!-- 无线网关定位 无状态。--> |
|
<img |
|
class="web" |
|
:src=" |
|
webstate == 0 |
|
? require('../../../assets/flowimg/badweb.png') |
|
: require('../../../assets/flowimg/onlineweb.png') |
|
" |
|
alt="" |
|
/> |
|
<!-- 保温水箱定位 --> |
|
<img |
|
class="waterBox" |
|
src="../../../assets/flowimg/waterBox.png" |
|
alt="" |
|
/> |
|
<!-- 温度定位1 --> |
|
<!-- <img |
|
class="tem1" |
|
src="../../../assets/flowimg/thermometer.png" |
|
alt="" |
|
/> |
|
<div class="temContainer1"> |
|
<div class="temprogress" :style="{ height: temdata + '%' }"></div> |
|
</div> |
|
<b class="temdiv1">{{ temdata }}℃</b> --> |
|
<!-- 温度定位2 --> |
|
<!-- <img |
|
class="tem2" |
|
src="../../../assets/flowimg/thermometer.png" |
|
alt="" |
|
/> |
|
<div class="temContainer2"> |
|
<div class="temprogress" :style="{ height: temdata + '%' }"></div> |
|
</div> |
|
<b class="temdiv2">{{ temdata }}℃</b> --> |
|
<!-- 水位定位1 --> |
|
<div class="progressContainer1" v-if="progress1 > 50"> |
|
<div |
|
class="progress" |
|
:style="{ height: progress1 + '%' }" |
|
></div> |
|
<b class="propo">{{ progress1 }}%</b> |
|
</div> |
|
<div class="progressContainer2" v-else> |
|
<div |
|
class="progress" |
|
:style="{ height: progress1 + '%' }" |
|
></div> |
|
<b class="propo">{{ progress1 }}%</b> |
|
</div> |
|
<div class="progressName1">{{ progressName1 }}</div> |
|
<!-- 水位定位2 --> |
|
<div class="progressContainer3" v-if="progress2 > 50"> |
|
<div |
|
class="progress" |
|
:style="{ height: progress2 + '%' }" |
|
></div> |
|
<b class="propo">{{ progress2 }}%</b> |
|
</div> |
|
<div class="progressContainer4" v-else> |
|
<div |
|
class="progress" |
|
:style="{ height: progress2 + '%' }" |
|
></div> |
|
<b class="propo">{{ progress2 }}%</b> |
|
</div> |
|
<div class="progressName2">{{ progressName2 }}</div> |
|
</div> |
|
</div> |
|
<div class="changecontent"> |
|
<div class="tablemaeta">系统状态显示</div> |
|
<el-table |
|
class="maintable" |
|
ref="maintable" |
|
:data="tableData" |
|
height="200" |
|
highlight-current-row |
|
@row-click="handlerow" |
|
:cell-style="tableRowStyle" |
|
:show-overflow-tooltip="true" |
|
:header-cell-style="{ 'text-align': 'center' }" |
|
> |
|
<el-table-column label="序号" min-width="50"> |
|
<template slot-scope="scope"> |
|
{{ scope.$index + 1 }} |
|
</template> |
|
</el-table-column> |
|
<el-table-column prop="curDate" label="状态时间" min-width="130"> |
|
</el-table-column> |
|
<el-table-column prop="pumpName" label="热泵名称"> |
|
</el-table-column> |
|
<el-table-column |
|
prop="tempSet" |
|
label="设置温度(℃)" |
|
min-width="100" |
|
> |
|
<template slot-scope="{ row }"> |
|
<span>{{ row.tempSet }} </span> |
|
</template> |
|
</el-table-column> |
|
<el-table-column |
|
prop="waterTemp" |
|
label="实际温度(℃)" |
|
min-width="100" |
|
> |
|
<template slot-scope="{ row }"> |
|
<span>{{ row.waterTemp }} </span> |
|
</template> |
|
</el-table-column> |
|
<!-- 裙楼、高区 --> |
|
<el-table-column |
|
prop="levelSet1" |
|
label="设置水位1(%)" |
|
min-width="100" |
|
> |
|
<template slot-scope="{ row }"> |
|
<span>{{ row.levelSet1 }}</span> |
|
</template> |
|
</el-table-column> |
|
<el-table-column |
|
prop="waterLevel1" |
|
label="实际水位1(%)" |
|
min-width="100" |
|
> |
|
<template slot-scope="{ row }"> |
|
<span>{{ row.waterLevel1 }} </span> |
|
</template> |
|
</el-table-column> |
|
<!-- 中厨、中区 --> |
|
<el-table-column |
|
prop="levelSet2" |
|
label="设置水位2(%)" |
|
min-width="100" |
|
> |
|
<template slot-scope="{ row }"> |
|
<span>{{ row.levelSet2 }}</span> |
|
</template> |
|
</el-table-column> |
|
<el-table-column |
|
prop="waterLevel2" |
|
label="实际水位2(%)" |
|
min-width="100" |
|
> |
|
<template slot-scope="{ row }"> |
|
<span>{{ row.waterLevel2 }} </span> |
|
</template> |
|
</el-table-column> |
|
<el-table-column prop="upWaterState" label="补水状态"> |
|
<template slot-scope="{ row }"> |
|
<span v-if="row.useWaterState === '0'">不运行 </span> |
|
<span v-if="row.useWaterState === '1'">运行 </span> |
|
</template> |
|
</el-table-column> |
|
<el-table-column prop="backWaterState" label="回水状态"> |
|
<template slot-scope="{ row }"> |
|
<span v-if="row.backWaterState === '0'">不运行 </span> |
|
<span v-if="row.backWaterState === '1'">运行 </span> |
|
</template> |
|
</el-table-column> |
|
<el-table-column prop="runState" label="热泵状态"> |
|
<template slot-scope="{ row }"> |
|
<span v-if="row.runState === '0'">不运行 </span> |
|
<span v-if="row.runState === '1'">运行 </span> |
|
</template> |
|
</el-table-column> |
|
<el-table-column prop="isFault" label="是否故障"> |
|
<template slot-scope="{ row }"> |
|
<span v-if="row.isFault === '0'">无故障</span> |
|
<span v-if="row.isFault === '1'">有故障</span> |
|
</template> |
|
</el-table-column> |
|
</el-table> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
</template> |
|
|
|
<script> |
|
import { runTime } from "@/api/centerairC/sysMonitor"; |
|
import { alarmRecordList } from "@/api/alarm/alarmRecord"; |
|
import { getDay } from "@/utils/datetime"; |
|
import { floorTree } from "@/api/region"; |
|
import { waterPublic, waterMonitorList } from "@/api/hotWater/waterMonitor"; |
|
export default { |
|
data() { |
|
return { |
|
loading: false, |
|
currentDate: new Date(), |
|
nowTimer: null, |
|
timer: null, // 用于存储定时器 ID |
|
isShowWarning: false, //是否有报警 |
|
dayData: "", //监测天数 |
|
treeData: [], |
|
defaultProps: { |
|
children: "children", |
|
label: "label", |
|
}, |
|
deviceList: [], |
|
expandedKeys: [], |
|
currentId: "", //当前选中高亮的id |
|
currentName: "", //当前选中的名称 |
|
currentLevel: "", //当前节点的层级 |
|
currentParentId: "", //当前节点的上级的id |
|
|
|
baseTable: [], //公共信息列表数据 |
|
tableData: [], //系统状态表格数据 |
|
|
|
// 供水阀状态 0表示关闭 1表示开启 |
|
useWaterState: "", |
|
upWaterState1: "", //供水泵1状态 |
|
upWaterState2: "", //供水泵2状态 |
|
upWaterState3: "", //供水泵3状态 |
|
upWaterState4: "", //供水泵4状态 |
|
backWaterState: "", //回水阀状态 |
|
// 热泵状态 两个系数 |
|
hotPumState: "", |
|
isBad: "无故障", |
|
// 网关在线状态 0表示离线 1表示在线 |
|
webstate: 1, |
|
// 水位变化数值 |
|
progress1: 0, |
|
progress2: 0, |
|
progressName1: "", |
|
progressName2: "", |
|
// 温度变化数值 |
|
temdata: 0, |
|
// 热泵名称 |
|
pumname: "", |
|
currentWeekday: "", |
|
}; |
|
}, |
|
computed: { |
|
formattedDate() { |
|
const year = this.currentDate.getFullYear(); |
|
const month = String(this.currentDate.getMonth() + 1).padStart(2, "0"); |
|
const day = String(this.currentDate.getDate()).padStart(2, "0"); |
|
const hours = String(this.currentDate.getHours()).padStart(2, "0"); |
|
const minutes = String(this.currentDate.getMinutes()).padStart(2, "0"); |
|
const seconds = String(this.currentDate.getSeconds()).padStart(2, "0"); |
|
const weekDays = [ |
|
"星期日", |
|
"星期一", |
|
"星期二", |
|
"星期三", |
|
"星期四", |
|
"星期五", |
|
"星期六", |
|
]; |
|
const weekDay = weekDays[this.currentDate.getDay()]; |
|
return `${year}年${month}月${day}日 ${hours}:${minutes}:${seconds} ${weekDay}`; |
|
}, |
|
getHotPumPositionClass() { |
|
if (this.tableData.length === 4) { |
|
return "hotPumPosition-four"; |
|
} else if (this.tableData.length === 2) { |
|
return "hotPumPosition-two"; |
|
} |
|
return ""; |
|
}, |
|
}, |
|
created() { |
|
const weekdays = [ |
|
"星期日", |
|
"星期一", |
|
"星期二", |
|
"星期三", |
|
"星期四", |
|
"星期五", |
|
"星期六", |
|
]; |
|
const date = new Date(); |
|
const dayIndex = date.getDay(); |
|
this.currentWeekday = weekdays[dayIndex]; |
|
console.log("今天是星期几", this.currentWeekday); |
|
}, |
|
mounted() { |
|
this.requestFullscreen(); |
|
this.getSysBuild(); |
|
this.getAlarnStatus(); |
|
this.getDayData(); |
|
// 设置定时器，每 10 秒执行一次 |
|
this.timer = setInterval(() => { |
|
this.baseMessgae(); |
|
this.sysStatus(); |
|
}, 10000); |
|
// 每秒更新一次时间 |
|
this.nowTimer = setInterval(() => { |
|
this.currentDate = new Date(); |
|
}, 1000); |
|
}, |
|
beforeDestroy() { |
|
// 组件销毁前清除定时器 |
|
if (this.timer) { |
|
clearInterval(this.timer); |
|
} |
|
// 组件销毁前清除定时器 |
|
if (this.nowTimer) { |
|
clearInterval(this.nowTimer); |
|
} |
|
}, |
|
methods: { |
|
// 全屏操作 |
|
requestFullscreen() { |
|
const element = document.documentElement; |
|
console.log("全屏了吗"); |
|
if (element.requestFullscreen) { |
|
element.requestFullscreen(); |
|
} else if (element.mozRequestFullScreen) { |
|
// Firefox |
|
element.mozRequestFullScreen(); |
|
} else if (element.webkitRequestFullscreen) { |
|
// Chrome, Safari and Opera |
|
element.webkitRequestFullscreen(); |
|
} else if (element.msRequestFullscreen) { |
|
// IE/Edge |
|
element.msRequestFullscreen(); |
|
} |
|
}, |
|
// 退出全屏 |
|
exitFullscreen() { |
|
if (document.exitFullscreen) { |
|
document.exitFullscreen(); |
|
} else if (document.mozCancelFullScreen) { |
|
// Firefox |
|
document.mozCancelFullScreen(); |
|
} else if (document.webkitExitFullscreen) { |
|
// Chrome, Safari and Opera |
|
document.webkitExitFullscreen(); |
|
} else if (document.msExitFullscreen) { |
|
// IE/Edge |
|
document.msExitFullscreen(); |
|
} |
|
}, |
|
// 进入系统首页 |
|
goSys() { |
|
// this.exitFullscreen(); |
|
this.$router.push("/"); |
|
}, |
|
// 返回上一页 |
|
goBack() { |
|
window.history.go(-2); |
|
}, |
|
// 监测天数 |
|
getDayData() { |
|
runTime().then((res) => { |
|
if (res.code == 200) { |
|
this.dayData = res.data.runTime; |
|
} |
|
}); |
|
}, |
|
// 报警列表 |
|
getAlarnStatus() { |
|
let data = { |
|
pageNum: 1, |
|
pageSize: 10, |
|
status: "0", |
|
}; |
|
let timeArr = [getDay(0), getDay(0)]; |
|
alarmRecordList(this.addDateRange(data, timeArr)).then((res) => { |
|
if (res.code == 200 && res.rows.length > 0) { |
|
this.isShowWarning = true; |
|
} else { |
|
this.isShowWarning = false; |
|
} |
|
}); |
|
}, |
|
goWarning() { |
|
// this.exitFullscreen(); |
|
this.$router.push("/alarm/alarmRecord"); |
|
}, |
|
getImageSrc(item) { |
|
// console.log("item", item); |
|
if (item.runState === "1" && item.isFault !== "1") { |
|
// 使用 require 函数导入图片 |
|
return require("@/assets/flowimg/starthotpum.png"); |
|
} else if (item.isFault === "1") { |
|
return require("@/assets/flowimg/badhotpum.png"); |
|
} else { |
|
return require("@/assets/flowimg/closehotpum.png"); |
|
} |
|
}, |
|
getSysBuild() { |
|
floorTree().then((res) => { |
|
if (res.code == 200) { |
|
// 只需要保留热水的系统 |
|
console.log("楼栋返回值", res); |
|
let newRes = { ...res }; |
|
|
|
if (newRes.data && newRes.data[0] && newRes.data[0].children) { |
|
newRes.data[0].children = newRes.data[0].children.filter((item) => { |
|
// 假设子项有一个 label属性，用于检查是否包含 "热水" |
|
return item.label && item.label.includes("热水"); |
|
}); |
|
} |
|
// 指定要保留的最大层级（从 1 开始计数），这里假设指定为第 4 级 |
|
const targetLevel = 4; |
|
// 从 data[0] 开始处理，当前层级为 1 |
|
if (newRes.data[0]) { |
|
this.removeChildrenAfterLevel(newRes.data[0], 1, targetLevel); |
|
} |
|
console.log("筛选后的新结果", newRes); |
|
this.treeData = newRes.data; |
|
this.$nextTick(() => { |
|
// 默认展开节点 |
|
this.getExpandedKeys(this.treeData, 2); |
|
if (this.treeData.length > 0) { |
|
// 找到最后一层的第一个子节点 |
|
const lastLevelFirstChild = this.findLastLevelFirstChild( |
|
this.treeData[0] |
|
); |
|
// this.$refs.tree.setCurrentKey( |
|
// this.treeData[0].children[0].children[0].children[0].id |
|
// ); |
|
// 设置当前选中的节点,默认高亮 |
|
this.$refs.tree.setCurrentKey(lastLevelFirstChild.id); |
|
// 更新当前节点的信息 |
|
this.currentId = lastLevelFirstChild.id; |
|
this.currentLevel = lastLevelFirstChild.level; |
|
this.currentName = lastLevelFirstChild.label; |
|
console.log("当前选中节点ID", this.currentId); |
|
console.log("当前选中节点层级", this.currentLevel); |
|
console.log("当前选中节点名称", this.currentName); |
|
if (this.currentName === "-1楼") { |
|
this.progressName1 = "裙楼"; |
|
this.progressName2 = "中厨"; |
|
} else if (this.currentName === "3楼") { |
|
this.progressName1 = "高区"; |
|
this.progressName2 = "中区"; |
|
} |
|
this.baseMessgae(); |
|
this.sysStatus(); |
|
} |
|
}); |
|
} |
|
}); |
|
}, |
|
// 递归函数，用于去除指定层级往后的 children 数据 |
|
removeChildrenAfterLevel(obj, currentLevel, targetLevel) { |
|
if (currentLevel >= targetLevel) { |
|
// 当达到指定层级时，将 children 属性置为空数组 |
|
obj.children = []; |
|
return; |
|
} |
|
if (obj.children && obj.children.length > 0) { |
|
// 若存在 children 数组，则递归处理每个子项 |
|
for (let i = 0; i < obj.children.length; i++) { |
|
this.removeChildrenAfterLevel( |
|
obj.children[i], |
|
currentLevel + 1, |
|
targetLevel |
|
); |
|
} |
|
} |
|
}, |
|
// 递归函数，找到最后一层的第一个子节点 |
|
findLastLevelFirstChild(node, level = 1) { |
|
if (!node.children || node.children.length === 0) { |
|
return { |
|
id: node.id, |
|
level, |
|
label: node.label, |
|
}; |
|
} |
|
return this.findLastLevelFirstChild(node.children[0], level + 1); |
|
}, |
|
// 默认只展示一二级菜单 |
|
getExpandedKeys(nodes, level) { |
|
nodes.forEach((node) => { |
|
if (level <= this.currentId + 4) { |
|
this.expandedKeys.push(node.id); |
|
} |
|
if (node.children) { |
|
this.getExpandedKeys(node.children, level + 1); |
|
} |
|
}); |
|
}, |
|
// 更换图标 |
|
getIconClass(node) { |
|
// console.log("当前图标的节点内容", node); |
|
if (node.level === 4) { |
|
// 4级菜单时的图标 |
|
if (node.expanded) { |
|
return "el-icon-document-opened"; // 三级菜单展开时的图标类名 |
|
} |
|
return "el-icon-document"; // 三级菜单收缩时的图标类名 |
|
} |
|
if (node.expanded) { |
|
return "el-icon-folder-opened"; // 非三级菜单展开时的图标类名 |
|
} |
|
return "el-icon-folder-add"; // 非三级菜单收缩时的图标类名 |
|
}, |
|
handleNodeExpand(node) { |
|
// 节点展开时触发 |
|
}, |
|
handleNodeCollapse(node) { |
|
// 节点收缩时触发 |
|
}, |
|
// 点击当前节点，保存节点内容 |
|
handleNodeClick(node, data) { |
|
console.log("点击的当前节点", node, data); |
|
if (data.level !== 4) { |
|
console.log("不是第4层000"); |
|
// 设置当前选中的节点,默认高亮 |
|
this.$refs.tree.setCurrentKey(this.currentId); |
|
console.log("当前选中节点ID", this.currentId); |
|
console.log("当前选中节点层级", this.currentLevel); |
|
console.log("当前选中节点名称", this.currentName); |
|
} else { |
|
console.log("第4层111"); |
|
this.currentId = node.id; |
|
this.currentLevel = data.level; |
|
this.currentName = node.label; |
|
// 设置当前选中的节点,默认高亮 |
|
this.$refs.tree.setCurrentKey(this.currentId); |
|
console.log("当前选中节点ID", this.currentId); |
|
console.log("当前选中节点层级", this.currentLevel); |
|
console.log("当前选中节点名称", this.currentName); |
|
this.baseMessgae(); |
|
this.sysStatus(); |
|
} |
|
if (this.currentName === "-1楼") { |
|
this.progressName1 = "裙楼"; |
|
this.progressName2 = "中厨"; |
|
} else if (this.currentName === "3楼") { |
|
this.progressName1 = "高区"; |
|
this.progressName2 = "中区"; |
|
} |
|
}, |
|
handleClick(tab, event) { |
|
console.log(tab, event); |
|
console.log("activeName", this.activeName); |
|
}, |
|
//查询单个热泵状态 点击表格的某一行 |
|
handlerow(row, event, column) { |
|
console.log("row", row); |
|
//水位 温度 热泵名称 |
|
this.progress1 = row.waterLevel1; |
|
this.progress2 = row.waterLevel2; |
|
this.temdata = row.waterTemp; |
|
this.pumname = row.pumpName; |
|
// 热泵状态 是否故障 |
|
this.hotPumState = row.runState; |
|
this.isBad = row.isFault; |
|
this.useWaterState = row.useWaterState; |
|
this.upWaterState1 = row.upWaterState1; |
|
this.upWaterState2 = row.upWaterState2; |
|
this.upWaterState3 = row.upWaterState3; |
|
this.upWaterState4 = row.upWaterState4; |
|
this.backWaterState = row.backWaterState; |
|
console.log("补水阀状态11111111111111111111", this.useWaterState); |
|
}, |
|
/* 加入小手状态 */ |
|
tableRowStyle({ row, column, rowIndex, columnIndex }) { |
|
if (row) { |
|
return "cursor:pointer;text-align:center"; |
|
} |
|
}, |
|
// 公共信息 |
|
baseMessgae() { |
|
let data = { |
|
systemType: "1", |
|
floorId: this.currentId, |
|
}; |
|
waterPublic(data).then((res) => { |
|
console.log("公共信息返回", res); |
|
if (res.code == 200 && res.rows.length > 0) { |
|
this.baseTable = []; |
|
res.rows.forEach((item) => { |
|
// 初始化一个空对象来存储阀门处理后的结果 |
|
let baseltem = { |
|
name: item.name, |
|
}; |
|
if (item.name.includes("温度")) { |
|
baseltem.unit = "℃"; |
|
} |
|
if (item.name.includes("压力")) { |
|
baseltem.unit = "bar"; |
|
} |
|
if (item.value.includes("采集失败")) { |
|
baseltem.value = "0"; |
|
} else { |
|
baseltem.value = item.value; |
|
} |
|
// 将处理后的对象添加到 deviceList 中 |
|
if (Object.keys(baseltem).length > 1) { |
|
this.baseTable.push(baseltem); |
|
} |
|
}); |
|
console.log("处理后的公共信息返回", this.baseTable); |
|
} |
|
}); |
|
}, |
|
// 系统状态显示 |
|
sysStatus() { |
|
let data = { |
|
systemType: "1", |
|
floorId: this.currentId, |
|
}; |
|
waterMonitorList(data).then((res) => { |
|
console.log("系统状态返回", res); |
|
if (res.code == 200 && res.rows.length > 0) { |
|
this.tableData = []; |
|
res.rows.forEach((item) => { |
|
let deviceItem = { |
|
...item, |
|
runState: Number(item.runState) == 0 ? "0" : "1", //运行状态 |
|
upWaterState: Number(item.upWaterState) == 0 ? "0" : "1", //供水状态 |
|
isFault: Number(item.isFault) == 0 ? "0" : "1", //故障状态 |
|
}; |
|
this.tableData.push(deviceItem); |
|
}); |
|
console.log("处理后的tableData", this.tableData); |
|
if (this.tableData.length > 0) { |
|
// 获取第一行数据 |
|
const firstRow = this.tableData[0]; |
|
// 模拟点击第一行 |
|
this.handlerow(firstRow); |
|
// 设置当前选中行 |
|
this.$refs.maintable.setCurrentRow(firstRow); |
|
} |
|
} else { |
|
this.tableData = []; |
|
} |
|
}); |
|
}, |
|
}, |
|
}; |
|
</script> |
|
|
|
<style lang="scss" scoped> |
|
.buildingDiv { |
|
padding-left: 54px; |
|
display: flex; |
|
flex-direction: row; |
|
align-items: center; |
|
margin-bottom: 20px; |
|
position: relative; |
|
.title-bg { |
|
width: 208px; |
|
height: 38px; |
|
position: absolute; |
|
left: 0; |
|
z-index: 0; |
|
} |
|
.title-word { |
|
z-index: 10; |
|
font-family: YouSheBiaoTiHei; |
|
font-size: 24px; |
|
color: #ffffff; |
|
white-space: nowrap; |
|
} |
|
} |
|
.monitor { |
|
width: 100%; |
|
min-height: 100vh; |
|
background-color: black; |
|
color: #fff; |
|
.monitor-top { |
|
width: 100%; |
|
display: flex; |
|
flex-direction: row; |
|
align-items: flex-start; |
|
justify-content: space-between; |
|
flex-wrap: nowrap; |
|
padding: 0.1rem 0.2rem; |
|
position: relative; |
|
.title-left { |
|
width: 3.41rem; |
|
height: 0.8rem; |
|
} |
|
.title-center { |
|
width: 9.46rem; |
|
height: 0.69rem; |
|
} |
|
.title-right { |
|
width: 5.04rem; |
|
height: 0.78rem; |
|
} |
|
.sys-title { |
|
position: absolute; |
|
top: 40%; |
|
left: 50%; |
|
transform: translate(-50%, -50%); |
|
font-size: 0.28rem; |
|
color: #ffffff; |
|
font-weight: bold; |
|
z-index: 100; |
|
cursor: pointer; |
|
} |
|
.nowTime { |
|
position: absolute; |
|
top: 0.37rem; |
|
right: 0.6rem; |
|
font-size: 0.18rem; |
|
color: #ffffff; |
|
font-weight: bold; |
|
z-index: 100; |
|
} |
|
.sys-logo { |
|
width: 1.8rem; |
|
height: 0.5rem; |
|
position: absolute; |
|
top: 0.26rem; |
|
left: 0.8rem; |
|
z-index: 10; |
|
} |
|
.monitor-time { |
|
position: absolute; |
|
top: 0.44rem; |
|
left: 4.2rem; |
|
z-index: 10; |
|
font-size: 0.18rem; |
|
color: #ffffff; |
|
font-weight: bold; |
|
} |
|
.icon_warning { |
|
position: absolute; |
|
top: 0.39rem; |
|
right: 4.4rem; |
|
z-index: 10; |
|
width: 0.35rem; |
|
height: 0.32rem; |
|
margin: 0 0.25rem 0 0.27rem; |
|
cursor: pointer; |
|
/* 添加闪烁动画 */ |
|
animation: blink 1s infinite; |
|
} |
|
@keyframes blink { |
|
100% { |
|
opacity: 1; |
|
} |
|
50% { |
|
opacity: 0; |
|
} |
|
} |
|
.icon_home { |
|
position: absolute; |
|
top: 0.39rem; |
|
right: 4rem; |
|
z-index: 10; |
|
width: 0.35rem; |
|
height: 0.32rem; |
|
margin: 0 0.2rem 0 0.27rem; |
|
cursor: pointer; |
|
} |
|
.back-icon { |
|
position: absolute; |
|
top: 0.39rem; |
|
right: 3.7rem; |
|
z-index: 10; |
|
width: 0.35rem; |
|
height: 0.32rem; |
|
cursor: pointer; |
|
} |
|
} |
|
} |
|
.app-container { |
|
display: flex; |
|
flex-direction: row; |
|
justify-content: space-between; |
|
align-items: stretch; |
|
height: 100%; |
|
padding: 0.3rem 0.2rem 0 0.35rem; |
|
width: 100%; |
|
.left-tree { |
|
width: 256px; |
|
padding: 15px 10px 10px 10px; |
|
border: 1px solid #004b8c; |
|
display: flex; |
|
flex-direction: column; |
|
justify-content: space-between; |
|
.status { |
|
display: flex; |
|
flex-direction: row; |
|
justify-content: space-between; |
|
flex-wrap: wrap; |
|
margin-top: 20px; |
|
.status-li { |
|
width: 50%; |
|
display: flex; |
|
flex-direction: column; |
|
align-items: center; |
|
justify-content: center; |
|
margin-bottom: 15px; |
|
} |
|
.status1, |
|
.status2, |
|
.status3, |
|
.status4 { |
|
display: flex; |
|
flex-direction: row; |
|
align-items: center; |
|
margin-bottom: 5px; |
|
} |
|
.status1::before { |
|
content: ""; |
|
width: 10px; |
|
height: 10px; |
|
border-radius: 50%; |
|
background-color: #00d2ff; |
|
margin-right: 5px; |
|
} |
|
.status2::before { |
|
content: ""; |
|
width: 10px; |
|
height: 10px; |
|
border-radius: 50%; |
|
background-color: #ff2f2f; |
|
margin-right: 5px; |
|
} |
|
.status3::before { |
|
content: ""; |
|
width: 10px; |
|
height: 10px; |
|
border-radius: 50%; |
|
background-color: #ff9908; |
|
margin-right: 5px; |
|
} |
|
.status4::before { |
|
content: ""; |
|
width: 10px; |
|
height: 10px; |
|
border-radius: 50%; |
|
background-color: #7398c7; |
|
margin-right: 5px; |
|
} |
|
} |
|
.base-mes { |
|
background-color: #142c4e; |
|
padding: 20px 10px; |
|
font-size: 16px; |
|
border-radius: 6px; |
|
color: #129bd1; |
|
.base-title { |
|
font-family: SourceHanSansCN-Medium; |
|
font-size: 18px; |
|
font-style: italic; |
|
color: #d1d6df; |
|
margin-bottom: 20px; |
|
} |
|
.base-height { |
|
height: 2.6rem; |
|
overflow-y: auto; |
|
.base-li { |
|
margin-bottom: 20px; |
|
.deepColor { |
|
display: inline-block; |
|
margin: 0 10px 0 5px; |
|
color: #20ebfa; |
|
font-weight: bold; |
|
font-size: 18px; |
|
} |
|
} |
|
} |
|
} |
|
} |
|
.right-monitor { |
|
width: calc(100% - 280px); |
|
display: flex; |
|
flex-direction: column; |
|
justify-content: flex-start; |
|
.folw { |
|
width: 100%; |
|
margin-top: -0.2rem; |
|
|
|
.changeimage { |
|
width: 100%; |
|
display: flex; |
|
flex-direction: column; |
|
align-items: center; |
|
.flowimg { |
|
width: 12.27rem; |
|
height: 5.6rem; |
|
background-size: 100% 100%; |
|
background-repeat: no-repeat; |
|
position: relative; |
|
|
|
.bigMove { |
|
width: 12.27rem; |
|
height: 4.6rem; |
|
position: absolute; |
|
top: 0; |
|
} |
|
|
|
.flow-text { |
|
font-size: 0.17rem; |
|
line-height: 0.18rem; |
|
letter-spacing: 0.01rem; |
|
color: #fefefe; |
|
} |
|
|
|
.text1 { |
|
position: absolute; |
|
top: 3.15rem; |
|
left: 0.55rem; |
|
z-index: 1; |
|
} |
|
|
|
.text2 { |
|
position: absolute; |
|
top: 0.22rem; |
|
left: 5.3rem; |
|
z-index: 1; |
|
} |
|
|
|
.text3 { |
|
position: absolute; |
|
top: 0.6rem; |
|
width: 0.4rem; |
|
right: 1.2rem; |
|
line-height: 0.28rem; |
|
z-index: 1; |
|
} |
|
|
|
.text4 { |
|
position: absolute; |
|
top: 2.6rem; |
|
right: 0.5rem; |
|
z-index: 1; |
|
} |
|
|
|
.text5 { |
|
position: absolute; |
|
top: 4.4rem; |
|
right: 0.2rem; |
|
z-index: 1; |
|
} |
|
|
|
.text6 { |
|
position: absolute; |
|
top: 4.3rem; |
|
left: 0.55rem; |
|
z-index: 1; |
|
} |
|
|
|
.text7 { |
|
position: absolute; |
|
top: 3.1rem; |
|
left: 5.75rem; |
|
z-index: 1; |
|
} |
|
.text8 { |
|
position: absolute; |
|
top: 0.5rem; |
|
left: 1.4rem; |
|
z-index: 1; |
|
} |
|
.text9 { |
|
position: absolute; |
|
top: 5.4rem; |
|
left: 0.55rem; |
|
z-index: 1; |
|
} |
|
.text10 { |
|
position: absolute; |
|
top: 6.4rem; |
|
left: 0.55rem; |
|
z-index: 1; |
|
} |
|
|
|
.replenish { |
|
position: absolute; |
|
top: 0.7rem; |
|
left: 0rem; |
|
width: 2.55rem; |
|
height: 0.34rem; |
|
z-index: 1; |
|
} |
|
|
|
.supply { |
|
position: absolute; |
|
top: 1.2rem; |
|
left: 0rem; |
|
width: 12.3rem; |
|
height: 4.9rem; |
|
z-index: 0; |
|
} |
|
|
|
.circulate { |
|
position: absolute; |
|
top: 1.5rem; |
|
left: 4.8rem; |
|
width: 3.5rem; |
|
height: 1.2rem; |
|
} |
|
|
|
.coolpum { |
|
width: 0.9rem; |
|
height: 0.68rem; |
|
position: absolute; |
|
top: 2.4rem; |
|
left: 0.6rem; |
|
z-index: 2; |
|
} |
|
|
|
.waterpum { |
|
width: 0.9rem; |
|
height: 0.68rem; |
|
position: absolute; |
|
top: 3.55rem; |
|
left: 0.6rem; |
|
} |
|
.waterpum2 { |
|
width: 0.9rem; |
|
height: 0.68rem; |
|
position: absolute; |
|
top: 4.65rem; |
|
left: 0.6rem; |
|
} |
|
.waterpum3 { |
|
width: 0.9rem; |
|
height: 0.68rem; |
|
position: absolute; |
|
top: 5.65rem; |
|
left: 0.6rem; |
|
} |
|
.buwaterpum { |
|
width: 8.5rem; |
|
height: 2.9rem; |
|
position: absolute; |
|
top: -0.1rem; |
|
right: -0.02rem; |
|
z-index: 2; |
|
} |
|
.buwaterpum2 { |
|
width: 8.5rem; |
|
height: 4.4rem; |
|
position: absolute; |
|
top: -0.9rem; |
|
right: -0.02rem; |
|
z-index: 2; |
|
} |
|
|
|
.cirpum { |
|
width: 1rem; |
|
height: 0.78rem; |
|
position: absolute; |
|
top: 2.15rem; |
|
left: 5.64rem; |
|
} |
|
|
|
.hotpum { |
|
width: 2.2rem; |
|
height: 2.2rem; |
|
position: absolute; |
|
top: 1.2rem; |
|
left: 7.9rem; |
|
} |
|
|
|
.web { |
|
width: 0.78rem; |
|
height: 1.12rem; |
|
position: absolute; |
|
top: 0.26rem; |
|
right: 0.36rem; |
|
} |
|
|
|
.tem1 { |
|
width: 0.6rem; |
|
height: 1.15rem; |
|
position: absolute; |
|
top: 2.25rem; |
|
left: 3.2rem; |
|
z-index: 3; |
|
} |
|
|
|
.tem2 { |
|
width: 0.6rem; |
|
height: 1.15rem; |
|
position: absolute; |
|
top: 2.25rem; |
|
left: 4.51rem; |
|
z-index: 3; |
|
} |
|
|
|
.temContainer1 { |
|
width: 0.06rem; |
|
height: 0.65rem; |
|
background-color: #02072d; |
|
// background-color: #11aaea; |
|
position: absolute; |
|
top: 2.63rem; |
|
left: 3.46rem; |
|
z-index: 3; |
|
|
|
.temprogress { |
|
background-color: #d22727; |
|
width: 100%; |
|
position: absolute; |
|
bottom: 0; |
|
z-index: 3; |
|
} |
|
} |
|
.temContainer2 { |
|
width: 0.06rem; |
|
height: 0.65rem; |
|
background-color: #02072d; |
|
// background-color: #11aaea; |
|
position: absolute; |
|
top: 2.63rem; |
|
left: 4.77rem; |
|
z-index: 3; |
|
|
|
.temprogress { |
|
background-color: #d22727; |
|
width: 100%; |
|
position: absolute; |
|
bottom: 0; |
|
z-index: 3; |
|
} |
|
} |
|
|
|
.waterBox { |
|
position: absolute; |
|
top: 0.3rem; |
|
left: 2.47rem; |
|
width: 2.86rem; |
|
height: 3.32rem; |
|
z-index: 2; |
|
} |
|
|
|
.temdiv1 { |
|
font-size: 0.15rem; |
|
line-height: 0.18rem; |
|
letter-spacing: 0.01rem; |
|
color: #d22727; |
|
position: absolute; |
|
top: 2.15rem; |
|
left: 3.2rem; |
|
z-index: 3; |
|
} |
|
.temdiv2 { |
|
font-size: 0.15rem; |
|
line-height: 0.18rem; |
|
letter-spacing: 0.01rem; |
|
color: #d22727; |
|
position: absolute; |
|
top: 2.15rem; |
|
left: 4.5rem; |
|
z-index: 3; |
|
} |
|
|
|
.progressContainer1 { |
|
width: 0.3rem; |
|
height: 1.7rem; |
|
background-color: #dff1fa; |
|
margin-left: 2%; |
|
position: absolute; |
|
top: 1.8rem; |
|
left: 2.8rem; |
|
border: solid 0.01rem #11aaea; |
|
z-index: 3; |
|
|
|
.progress { |
|
background-color: #1167db; |
|
width: 100%; |
|
position: absolute; |
|
bottom: 0; |
|
z-index: 3; |
|
} |
|
|
|
b { |
|
font-family: AdobeHeitiStd-Regular; |
|
font-size: 0.17rem; |
|
line-height: 0.2rem; |
|
letter-spacing: 0rem; |
|
color: #d22727; |
|
position: absolute; |
|
top: -0.3rem; |
|
z-index: 3; |
|
} |
|
} |
|
|
|
.progressContainer2 { |
|
width: 0.3rem; |
|
height: 1.7rem; |
|
background-color: #dff1fa; |
|
margin-left: 2%; |
|
position: absolute; |
|
top: 1.8rem; |
|
left: 2.8rem; |
|
border: solid 0.01rem red; |
|
z-index: 3; |
|
|
|
.progress { |
|
background-color: red; |
|
width: 100%; |
|
position: absolute; |
|
bottom: 0; |
|
z-index: 3; |
|
} |
|
|
|
b { |
|
font-family: AdobeHeitiStd-Regular; |
|
font-size: 0.17rem; |
|
line-height: 0.2rem; |
|
letter-spacing: 0rem; |
|
color: #d22727; |
|
position: absolute; |
|
top: -0.3rem; |
|
z-index: 3; |
|
} |
|
} |
|
.progressContainer3 { |
|
width: 0.3rem; |
|
height: 1.7rem; |
|
background-color: #dff1fa; |
|
margin-left: 2%; |
|
position: absolute; |
|
top: 1.8rem; |
|
left: 4.2rem; |
|
border: solid 0.01rem #11aaea; |
|
z-index: 3; |
|
|
|
.progress { |
|
background-color: #1167db; |
|
width: 100%; |
|
position: absolute; |
|
bottom: 0; |
|
z-index: 3; |
|
} |
|
|
|
b { |
|
font-family: AdobeHeitiStd-Regular; |
|
font-size: 0.17rem; |
|
line-height: 0.2rem; |
|
letter-spacing: 0rem; |
|
color: #d22727; |
|
position: absolute; |
|
top: -0.3rem; |
|
z-index: 3; |
|
} |
|
} |
|
.progressContainer4 { |
|
width: 0.3rem; |
|
height: 1.7rem; |
|
background-color: #dff1fa; |
|
margin-left: 2%; |
|
position: absolute; |
|
top: 1.8rem; |
|
left: 4.2rem; |
|
border: solid 0.01rem red; |
|
z-index: 3; |
|
|
|
.progress { |
|
background-color: red; |
|
width: 100%; |
|
position: absolute; |
|
bottom: 0; |
|
z-index: 3; |
|
} |
|
|
|
b { |
|
font-family: AdobeHeitiStd-Regular; |
|
font-size: 0.17rem; |
|
line-height: 0.2rem; |
|
letter-spacing: 0rem; |
|
color: #d22727; |
|
position: absolute; |
|
top: -0.3rem; |
|
z-index: 3; |
|
} |
|
} |
|
.progressName1 { |
|
font-size: 0.17rem; |
|
font-weight: normal; |
|
font-stretch: normal; |
|
line-height: 0.2rem; |
|
letter-spacing: 0.01rem; |
|
color: #0a3797; |
|
position: absolute; |
|
top: 2rem; |
|
left: 2.6rem; |
|
z-index: 3; |
|
} |
|
.progressName2 { |
|
font-size: 0.17rem; |
|
font-weight: normal; |
|
font-stretch: normal; |
|
line-height: 0.2rem; |
|
letter-spacing: 0.01rem; |
|
color: #0a3797; |
|
position: absolute; |
|
top: 2rem; |
|
left: 4rem; |
|
z-index: 3; |
|
} |
|
|
|
.pumname { |
|
font-size: 0.17rem; |
|
font-weight: normal; |
|
font-stretch: normal; |
|
line-height: 0.2rem; |
|
letter-spacing: 0.01rem; |
|
color: #fefefe; |
|
position: absolute; |
|
top: 0.8rem; |
|
left: 8.8rem; |
|
z-index: 1; |
|
} |
|
/* 四个元素时的样式 */ |
|
.hotPumPosition-four { |
|
font-size: 0.17rem; |
|
font-weight: normal; |
|
font-stretch: normal; |
|
line-height: 0.2rem; |
|
letter-spacing: 0.01rem; |
|
color: #fefefe; |
|
position: absolute; |
|
top: 0.7rem; |
|
left: 7.8rem; |
|
z-index: 1; |
|
display: flex; |
|
flex-direction: row; |
|
flex-wrap: wrap; |
|
width: 2.3rem !important; |
|
.hotPump-li { |
|
display: flex; |
|
flex-direction: column; |
|
align-items: center; |
|
justify-content: center; |
|
width: 50% !important; |
|
position: relative; |
|
// margin-bottom: 0.2rem; |
|
.hotPump-img { |
|
width: 1rem; |
|
height: 1rem; |
|
margin: 0.1rem 0; |
|
} |
|
.hotPump-tem1 { |
|
position: absolute; |
|
bottom: 0.2rem; |
|
color: #ee3a7f; |
|
font-size: 0.13rem; |
|
font-weight: bold; |
|
} |
|
.hotPump-tem2 { |
|
position: absolute; |
|
bottom: 0.4rem; |
|
color: #ee3a7f; |
|
font-size: 0.13rem; |
|
font-weight: bold; |
|
} |
|
.tem1 { |
|
width: 0.4rem; |
|
height: 0.7rem; |
|
position: absolute; |
|
top: 0.3rem; |
|
left: 1rem; |
|
z-index: 3; |
|
} |
|
.tem2 { |
|
width: 0.4rem; |
|
height: 0.7rem; |
|
position: absolute; |
|
top: 0.3rem; |
|
left: -0.3rem; |
|
z-index: 3; |
|
} |
|
.temContainer2 { |
|
width: 0.042rem; |
|
height: 0.4rem; |
|
background-color: #02072d; |
|
// background-color: #11aaea; |
|
position: absolute; |
|
top: 0.52rem; |
|
left: -0.12rem; |
|
z-index: 3; |
|
|
|
.temprogress { |
|
background-color: #d22727; |
|
width: 100%; |
|
position: absolute; |
|
bottom: 0; |
|
z-index: 3; |
|
} |
|
} |
|
.temdiv2 { |
|
font-size: 0.15rem; |
|
line-height: 0.18rem; |
|
letter-spacing: 0.01rem; |
|
color: #d22727; |
|
position: absolute; |
|
top: 1rem; |
|
left: -0.5rem; |
|
z-index: 3; |
|
} |
|
.temContainer1 { |
|
width: 0.042rem; |
|
height: 0.4rem; |
|
background-color: #02072d; |
|
// background-color: #11aaea; |
|
position: absolute; |
|
top: 0.52rem; |
|
left: 1.18rem; |
|
z-index: 3; |
|
|
|
.temprogress { |
|
background-color: #d22727; |
|
width: 100%; |
|
position: absolute; |
|
bottom: 0; |
|
z-index: 3; |
|
} |
|
} |
|
.temdiv1 { |
|
font-size: 0.15rem; |
|
line-height: 0.18rem; |
|
letter-spacing: 0.01rem; |
|
color: #d22727; |
|
position: absolute; |
|
top: 1rem; |
|
left: 1.1rem; |
|
z-index: 3; |
|
} |
|
} |
|
} |
|
/* 两个元素时的样式 */ |
|
.hotPumPosition-two { |
|
font-size: 0.17rem; |
|
font-weight: normal; |
|
font-stretch: normal; |
|
line-height: 0.2rem; |
|
letter-spacing: 0.01rem; |
|
color: #fefefe; |
|
position: absolute; |
|
top: 0.7rem; |
|
left: 7.8rem; |
|
z-index: 1; |
|
display: flex; |
|
flex-direction: row; |
|
flex-wrap: wrap; |
|
width: 1.2rem !important; |
|
.hotPump-li { |
|
display: flex; |
|
flex-direction: column; |
|
align-items: center; |
|
justify-content: center; |
|
width: 100% !important; |
|
position: relative; |
|
// margin-bottom: 0.2rem; |
|
.hotPump-img { |
|
width: 1rem; |
|
height: 1rem; |
|
margin: 0.1rem 0; |
|
} |
|
.hotPump-tem1 { |
|
position: absolute; |
|
bottom: 0.2rem; |
|
color: #ee3a7f; |
|
font-size: 0.13rem; |
|
font-weight: bold; |
|
} |
|
.hotPump-tem2 { |
|
position: absolute; |
|
bottom: 0.4rem; |
|
color: #ee3a7f; |
|
font-size: 0.13rem; |
|
font-weight: bold; |
|
} |
|
.tem2 { |
|
width: 0.4rem; |
|
height: 0.7rem; |
|
position: absolute; |
|
top: 0.3rem; |
|
left: -0.3rem; |
|
z-index: 3; |
|
} |
|
.temContainer2 { |
|
width: 0.042rem; |
|
height: 0.4rem; |
|
background-color: #02072d; |
|
// background-color: #11aaea; |
|
position: absolute; |
|
top: 0.52rem; |
|
left: -0.12rem; |
|
z-index: 3; |
|
|
|
.temprogress { |
|
background-color: #d22727; |
|
width: 100%; |
|
position: absolute; |
|
bottom: 0; |
|
z-index: 3; |
|
} |
|
} |
|
.temdiv2 { |
|
font-size: 0.15rem; |
|
line-height: 0.18rem; |
|
letter-spacing: 0.01rem; |
|
color: #d22727; |
|
position: absolute; |
|
top: 1rem; |
|
left: -0.5rem; |
|
z-index: 3; |
|
} |
|
.temContainer1 { |
|
width: 0.042rem; |
|
height: 0.4rem; |
|
background-color: #02072d; |
|
// background-color: #11aaea; |
|
position: absolute; |
|
top: 0.52rem; |
|
left: -0.12rem; |
|
z-index: 3; |
|
|
|
.temprogress { |
|
background-color: #d22727; |
|
width: 100%; |
|
position: absolute; |
|
bottom: 0; |
|
z-index: 3; |
|
} |
|
} |
|
.temdiv1 { |
|
font-size: 0.15rem; |
|
line-height: 0.18rem; |
|
letter-spacing: 0.01rem; |
|
color: #d22727; |
|
position: absolute; |
|
top: 1rem; |
|
left: -0.5rem; |
|
z-index: 3; |
|
} |
|
} |
|
} |
|
} |
|
} |
|
|
|
.changecontent { |
|
background: #142c4e; |
|
border-radius: 6px; |
|
// height: 250px; |
|
padding: 10px; |
|
overflow: hidden; |
|
margin-top: 100px; |
|
|
|
.tablemaeta { |
|
font-family: SourceHanSansCN-Medium; |
|
font-size: 18px; |
|
font-style: italic; |
|
color: #d1d6df; |
|
margin-bottom: 20px; |
|
} |
|
} |
|
} |
|
} |
|
} |
|
.tree-container { |
|
height: 300px; /* 设置固定高度 */ |
|
overflow-y: auto; /* 启用垂直滚动条 */ |
|
} |
|
// 滚动条 |
|
:-webkit-scrollbar { |
|
width: 10px; /* 滚动条宽度 */ |
|
} |
|
|
|
::-webkit-scrollbar-track { |
|
background: transparent !important; /* 滚动条轨道背景色 */ |
|
} |
|
.custom-tree-node { |
|
flex: 1; |
|
display: flex; |
|
align-items: center; |
|
justify-content: space-between; |
|
font-size: 14px; |
|
padding-right: 8px; |
|
.tree-left { |
|
.custom-tree-icon { |
|
margin-right: 5px; |
|
} |
|
} |
|
} |
|
// @media (min-width: 1270px) and (max-width: 1490px) { |
|
// .changeimage { |
|
// transform: scale(0.9); |
|
// } |
|
// } |
|
// @media (min-width: 1120px) and (max-width: 1270px) { |
|
// .changeimage { |
|
// transform: scale(0.8); |
|
// } |
|
// } |
|
// @media (min-width: 990px) and (max-width: 1120px) { |
|
// .changeimage { |
|
// transform: scale(0.7); |
|
// } |
|
// } |
|
// 媒体查询，适配大于2000px分辨率的大屏样式 |
|
@media (min-width: 2000px) { |
|
.base-mes { |
|
padding: 0.2rem 0.1rem !important; |
|
font-size: 0.16rem !important; |
|
border-radius: 0.06rem !important; |
|
.base-title { |
|
font-size: 0.18rem !important; |
|
margin-bottom: 0.2rem !important; |
|
} |
|
.base-height { |
|
height: 2.6rem !important; |
|
.base-li { |
|
margin-bottom: 0.2rem !important; |
|
.deepColor { |
|
margin: 0 0.1rem 0 0.05rem !important; |
|
font-size: 0.18rem !important; |
|
} |
|
} |
|
} |
|
} |
|
.changecontent { |
|
border-radius: 0.06rem !important; |
|
// height: 3rem !important; |
|
padding: 0.1rem !important; |
|
margin-top: 1rem !important; |
|
|
|
.tablemaeta { |
|
font-size: 0.18rem !important; |
|
margin-bottom: 0.2rem !important; |
|
} |
|
} |
|
} |
|
// 手机端样式 |
|
@media (min-width: 0px) and (max-width: 990px) { |
|
.buildingDiv { |
|
padding-left: 0.54rem !important; |
|
margin-bottom: 0.2rem !important; |
|
.title-bg { |
|
width: 2.08rem !important; |
|
height: 0.38rem !important; |
|
} |
|
.title-word { |
|
font-size: 15px !important; |
|
} |
|
} |
|
.app-container .left-tree .base-mes { |
|
padding: 0.2rem 0.1rem !important; |
|
font-size: 14px !important; |
|
border-radius: 0.06rem !important; |
|
} |
|
.app-container .left-tree .base-mes .base-title { |
|
font-size: 15px !important; |
|
} |
|
.app-container .left-tree .base-mes .base-height { |
|
height: 5.7rem !important; |
|
} |
|
.app-container .right-monitor .folw .changecontent .tablemaeta { |
|
font-size: 14px !important; |
|
} |
|
.app-container { |
|
padding: 0rem 0.2rem 0 0.35rem !important; |
|
} |
|
.app-container .left-tree { |
|
width: 200px !important; |
|
min-height: 340px !important; |
|
padding: 0.15rem 0.1rem 0.1rem 0.1rem !important; |
|
} |
|
.app-container .tree-div { |
|
height: 300px !important; |
|
width: 100%; |
|
overflow-x: hidden !important; |
|
} |
|
.app-container .right-monitor { |
|
width: calc(100% - 210px) !important; |
|
.folw { |
|
.changecontent { |
|
border-radius: 0.06rem !important; |
|
padding: 0.1rem !important; |
|
margin-top: 1rem !important; |
|
} |
|
} |
|
} |
|
.custom-tree-node { |
|
font-size: 12px !important; |
|
} |
|
} |
|
</style> |
|
<style scoped> |
|
/* 自定义高亮颜色 */ |
|
.left-tree |
|
>>> .el-tree--highlight-current |
|
.el-tree-node.is-current |
|
> .el-tree-node__content { |
|
background-color: #285b9e !important; |
|
/* color: #f56c6c; */ |
|
color: #25f1f8; |
|
} |
|
/* 手机端样式 */ |
|
@media (min-width: 0px) and (max-width: 990px) { |
|
.left-tree >>> .el-tree-node__content > .el-tree-node__expand-icon { |
|
padding: 3px !important; |
|
} |
|
} |
|
</style>
|
|
|