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.
1668 lines
43 KiB
1668 lines
43 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" @click="goSys" 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="host-detail"> |
|
<!-- 流程底图 --> |
|
<img class="flowchart" src="../../../assets/images/flowchart.png" alt="" /> |
|
<!-- 热量数据 --> |
|
<div class="hot-details"> |
|
<div class="hot-title">热量计量</div> |
|
<div class="hot-li"> |
|
<img src="../../../assets/images/hot-icon1.png" class="hot-icon" alt="" /> |
|
<div>热回收总量:</div> |
|
<div class="hot-data"> |
|
{{ formatHeatValue(hotData.totalHeatRecoverySum) }} |
|
</div> |
|
</div> |
|
<div class="hot-li"> |
|
<img src="../../../assets/images/hot-icon2.png" class="hot-icon" alt="" /> |
|
<div>离心机热量回收:</div> |
|
<div class="hot-data"> |
|
{{ formatHeatValue(hotData.centrifugalHeatRecoverySum) }} |
|
</div> |
|
</div> |
|
<div class="hot-li"> |
|
<img src="../../../assets/images/hot-icon3.png" class="hot-icon" alt="" /> |
|
<div>后处理及MD热量回收:</div> |
|
<div class="hot-data"> |
|
{{ formatHeatValue(hotData.postProcessingAndMdHeatRecoverySum) }} |
|
</div> |
|
</div> |
|
<div class="hot-li"> |
|
<img src="../../../assets/images/hot-icon4.png" class="hot-icon" alt="" /> |
|
<div>水源热泵热量:</div> |
|
<div class="hot-data"> |
|
{{ formatHeatValue(hotData.waterSourceHeatPumpSum) }} |
|
</div> |
|
</div> |
|
</div> |
|
<!-- 标题 --> |
|
<div class="text text1">车间热水</div> |
|
<div class="text text2">供水</div> |
|
<div class="text text3">车间热水</div> |
|
<div class="text text4">回水</div> |
|
<div class="text text5">空调热水</div> |
|
<div class="text text6">蓄热循环水箱</div> |
|
<div class="text text7">中温水板换</div> |
|
<div class="text text8">低温水板换</div> |
|
<div class="text text9">冷却水板换</div> |
|
<div class="text text10">二通阀</div> |
|
<div class="text text12">后冷却器</div> |
|
<div class="text text13">吸干机</div> |
|
<div class="text text14">保障冷却器</div> |
|
<div class="text text15">水源热泵</div> |
|
<div class="text text16">冷却塔</div> |
|
<div class="text text17">离心机</div> |
|
<!-- 标志 --> |
|
<div class="text p0">P0</div> |
|
<div class="text p1">P1</div> |
|
<div class="text p2">P2</div> |
|
<div class="text p3">P3</div> |
|
<div class="text p4">P4</div> |
|
<div class="text p5">P5</div> |
|
<div class="text p6">P6</div> |
|
<div class="text p7">P7</div> |
|
<div class="text p8">P8</div> |
|
<div class="text p9">P9</div> |
|
<!-- <div class="text p10">P10</div> --> |
|
<div class="text p11">P11</div> |
|
<!-- <div class="text p12">P12</div> --> |
|
<!-- <div class="text t1">T1</div> --> |
|
<div class="text t2">T2</div> |
|
<div class="text t3">T3</div> |
|
<div class="text t4">T4</div> |
|
<div class="text t5">T5</div> |
|
<div class="text t6">T6</div> |
|
<!-- <div class="text t7">T7</div> --> |
|
<div class="text h1" @click="hotListData(hotArrOne, '热量表1')"> |
|
热量表1 |
|
</div> |
|
<div class="text h2" @click="hotListData(hotArrTwo, '热量表2')"> |
|
热量表2 |
|
</div> |
|
<div class="text h3" @click="hotListData(hotArrThree, '热量表3')"> |
|
热量表3 |
|
</div> |
|
<div class="text h4" @click="hotListData(hotArrFour, '热量表4')"> |
|
热量表4 |
|
</div> |
|
<div class="text h5" @click="hotListData(hotArrFive, '热量表5')"> |
|
热量表5 |
|
</div> |
|
<div class="text h6" @click="hotListData(hotArrSix, '热量表6')"> |
|
热量表6 |
|
</div> |
|
<div class="text h7" @click="hotListData(hotArrSeven, '热量表7')"> |
|
热量表7 |
|
</div> |
|
|
|
<!-- 数据 --> |
|
<!-- 压力传感器0-12号 --> |
|
<div class="text pres0"> |
|
{{ getTemPreData(pressureArr, "0号压力传感器") }}bar |
|
</div> |
|
<div class="text pres1"> |
|
{{ getTemPreData(pressureArr, "1号压力传感器") }}bar |
|
</div> |
|
<div class="text pres2"> |
|
{{ getTemPreData(pressureArr, "2号压力传感器") }}bar |
|
</div> |
|
<div class="text pres3"> |
|
{{ getTemPreData(pressureArr, "3号压力传感器") }}bar |
|
</div> |
|
<div class="text pres4"> |
|
{{ getTemPreData(pressureArr, "4号压力传感器") }}bar |
|
</div> |
|
<div class="text pres5"> |
|
{{ getTemPreData(pressureArr, "5号压力传感器") }}bar |
|
</div> |
|
<div class="text pres6"> |
|
{{ getTemPreData(pressureArr, "6号压力传感器") }}bar |
|
</div> |
|
<div class="text pres7"> |
|
{{ getTemPreData(pressureArr, "7号压力传感器") }}bar |
|
</div> |
|
<div class="text pres8"> |
|
{{ getTemPreData(pressureArr, "8号压力传感器") }}bar |
|
</div> |
|
<div class="text pres9"> |
|
{{ getTemPreData(pressureArr, "9号压力传感器") }}bar |
|
</div> |
|
<!-- <div class="text pres10"> |
|
{{ getTemPreData(pressureArr, "10号压力传感器") }}bar |
|
</div> --> |
|
<div class="text pres11"> |
|
{{ getTemPreData(pressureArr, "11号压力传感器") }}bar |
|
</div> |
|
<!-- <div class="text pres12"> |
|
{{ getTemPreData(pressureArr, "12号压力传感器") }}bar |
|
</div> --> |
|
|
|
<!-- 温度传感器 1-7号 --> |
|
<!-- <div class="text tem1">{{ getTemPreData(temArr, "1号温度传感器") }}℃</div> --> |
|
<div class="text tem2">{{ getTemPreData(temArr, "2号温度传感器") }}℃</div> |
|
<div class="text tem3">{{ getTemPreData(temArr, "3号温度传感器") }}℃</div> |
|
<div class="text tem4">{{ getHotMeterTemp(allValveArr, "温度模块2_输入值", 99) }}℃</div> |
|
<div class="text tem5">{{ getTemPreData(temArr, "5号温度传感器") }}℃</div> |
|
<div class="text tem6">{{ getTemPreData(temArr, "6号温度传感器") }}℃</div> |
|
<!-- <div class="text tem7">{{ getTemPreData(temArr, "7号温度传感器") }}℃</div> --> |
|
|
|
<!-- 热量表1数据 --> |
|
<div class="text intem1"> |
|
{{ getHotMeterTemp(hotArrOne, "进水温度", 12) }}℃ |
|
</div> |
|
<div class="text outtem1"> |
|
{{ getHotMeterTemp(hotArrOne, "出水温度", 12) }}℃ |
|
</div> |
|
<div class="text nowhot1"> |
|
{{ getHotMeterTemp(hotArrOne, "瞬时热量", 47) }}kw |
|
</div> |
|
<!-- 热量表2数据 --> |
|
<div class="text intem2"> |
|
{{ getHotMeterTemp(hotArrTwo, "进水温度", 12) }}℃ |
|
</div> |
|
<div class="text outtem2"> |
|
{{ getHotMeterTemp(hotArrTwo, "出水温度", 12) }}℃ |
|
</div> |
|
<div class="text nowhot2"> |
|
{{ getHotMeterTemp(hotArrTwo, "瞬时热量", 47) }}kw |
|
</div> |
|
<!-- 热量表3数据 --> |
|
<div class="text intem3"> |
|
{{ getHotMeterTemp(hotArrThree, "进水温度", 12) }}℃ |
|
</div> |
|
<div class="text outtem3"> |
|
{{ getHotMeterTemp(hotArrThree, "出水温度", 12) }}℃ |
|
</div> |
|
<div class="text nowhot3"> |
|
{{ getHotMeterTemp(hotArrThree, "瞬时热量", 47) }}kw |
|
</div> |
|
<!-- 热量表4数据 --> |
|
<div class="text intem4"> |
|
{{ getHotMeterTemp(hotArrFour, "进水温度", 12) }}℃ |
|
</div> |
|
<div class="text outtem4"> |
|
{{ getHotMeterTemp(hotArrFour, "出水温度", 12) }}℃ |
|
</div> |
|
<div class="text nowhot4"> |
|
{{ getHotMeterTemp(hotArrFour, "瞬时热量", 47) }}kw |
|
</div> |
|
<!-- 热量表5数据 --> |
|
<div class="text intem5"> |
|
{{ getHotMeterTemp(hotArrFive, "进水温度", 12) }}℃ |
|
</div> |
|
<div class="text outtem5"> |
|
{{ getHotMeterTemp(hotArrFive, "出水温度", 12) }}℃ |
|
</div> |
|
<div class="text nowhot5"> |
|
{{ getHotMeterTemp(hotArrFive, "瞬时热量", 47) }}kw |
|
</div> |
|
<!-- 热量表6数据 --> |
|
<div class="text intem6"> |
|
{{ getHotMeterTemp(hotArrSix, "进水温度", 12) }}℃ |
|
</div> |
|
<div class="text outtem6"> |
|
{{ getHotMeterTemp(hotArrSix, "出水温度", 12) }}℃ |
|
</div> |
|
<div class="text nowhot6"> |
|
{{ getHotMeterTemp(hotArrSix, "瞬时热量", 47) }}kw |
|
</div> |
|
<!-- 热量表7数据 --> |
|
<div class="text intem7"> |
|
{{ getHotMeterTemp(hotArrSeven, "进水温度", 12) }}℃ |
|
</div> |
|
<div class="text outtem7"> |
|
{{ getHotMeterTemp(hotArrSeven, "出水温度", 12) }}℃ |
|
</div> |
|
<div class="text nowhot7"> |
|
{{ getHotMeterTemp(hotArrSeven, "瞬时热量", 47) }}kw |
|
</div> |
|
<!-- 二通阀门 --> |
|
<div class="text valve1"> |
|
{{ getHotMeterTemp(valveOneArr, "二通阀门_开度反馈", 4) }}% |
|
</div> |
|
<!-- 可点击区域 --> |
|
<div class="text click2" @click="controlValve(valveOneArr, '二通阀门')"></div> |
|
<!-- 三通阀门 --> |
|
<img :src="getThreeWaySrc" :class="['text', openPercent <= 0 ? 'three-way-less' : 'three-way']" alt="" /> |
|
<div :class="['text', openPercent <= 0 ? 'text11' : 'text18']"> |
|
三通阀 |
|
</div> |
|
<!-- 反馈值 --> |
|
<div :class="['text', openPercent <= 0 ? 'valve4' : 'valve3']">{{ openPercent }}%</div> |
|
<!-- 计算值 --> |
|
<div class="text valve2"> |
|
{{ (100 - openPercent).toFixed(1) }}% |
|
</div> |
|
<div :class="['text', openPercent <= 0 ? 'click3' : 'click4']" @click="controlValve(valveTwoArr, '三通阀门')"></div> |
|
</div> |
|
<!-- 控制弹框内容 --> |
|
<el-dialog :title="controlTitle" :visible.sync="openHotDialog" width="500px" append-to-body class="monitor-dialog"> |
|
<div class="hot-list"> |
|
<div class="hot-data"> |
|
<div class="hot-text">回水温度：</div> |
|
<div class="hot-details"> |
|
{{ getHotMeterTemp(hotDialogArr, "出水温度", 12) }}℃ |
|
</div> |
|
</div> |
|
<div class="hot-data"> |
|
<div class="hot-text">供水温度：</div> |
|
<div class="hot-details"> |
|
{{ getHotMeterTemp(hotDialogArr, "进水温度", 12) }}℃ |
|
</div> |
|
</div> |
|
<div class="hot-data"> |
|
<div class="hot-text">瞬时热量：</div> |
|
<div class="hot-details"> |
|
{{ getHotMeterTemp(hotDialogArr, "瞬时热量", 47) }}kw |
|
</div> |
|
</div> |
|
<div class="hot-data"> |
|
<div class="hot-text">瞬时流量小时：</div> |
|
<div class="hot-details"> |
|
{{ getHotMeterTemp(hotDialogArr, "瞬时流量", 31) }}m³/h |
|
</div> |
|
</div> |
|
<div class="hot-data"> |
|
<div class="hot-text">热能量累积量：</div> |
|
<div class="hot-details"> |
|
{{ formatHeatValue(getHotMeterTemp(hotDialogArr, "累积热量", 47)) }} |
|
</div> |
|
</div> |
|
</div> |
|
</el-dialog> |
|
|
|
<el-dialog :title="valveTitle" :visible.sync="openValveDialog" width="600px" append-to-body class="monitor-dialog"> |
|
<div class="hot-list" style="width: 80%;"> |
|
<div class="hot-data"> |
|
<div class="hot-text">{{ valveTitle === '二通阀门' ? '实际温度差值：' : '实际温度值：' }}</div> |
|
<el-input readonly v-model="valveFormData.actualTempDiff" size="small" |
|
:placeholder="valveTitle === '二通阀门' ? '实际温度差值' : '实际温度值'"></el-input> |
|
</div> |
|
<div class="hot-data"> |
|
<div class="hot-text">{{ valveTitle === '二通阀门' ? '设定温度差值：' : '设定温度值：' }}</div> |
|
<el-input v-model="valveFormData.setTempDiff" size="small" placeholder="设定温度差值" clearable |
|
@keyup.enter.native="handleEnter('设定温度差值', valveFormData.setTempDiffId, valveFormData.setTempDiff, $event)" |
|
@input="handleInput(valveFormData.setTempDiff)" @blur="handleBlur()"></el-input> |
|
</div> |
|
<div class="hot-data"> |
|
<div class="hot-text">水阀输出值：</div> |
|
<el-input readonly v-model="valveFormData.valveOutput" size="small" placeholder="水阀输出值"></el-input> |
|
</div> |
|
<div class="hot-data"> |
|
<div class="hot-text">P值：</div> |
|
<el-input v-model="valveFormData.pValue" size="small" placeholder="P值" clearable |
|
@keyup.enter.native="handleEnter('P值', valveFormData.pValueId, valveFormData.pValue, $event)" |
|
@input="handleInput(valveFormData.pValue)" @blur="handleBlur()"></el-input> |
|
</div> |
|
<div class="hot-data"> |
|
<div class="hot-text">I值：</div> |
|
<el-input v-model="valveFormData.iValue" size="small" placeholder="I值" clearable |
|
@keyup.enter.native="handleEnter('I值', valveFormData.iValueId, valveFormData.iValue, $event)" |
|
@input="handleInput(valveFormData.iValue)" @blur="handleBlur()"></el-input> |
|
</div> |
|
<div class="hot-data"> |
|
<div class="hot-text">D值：</div> |
|
<el-input v-model="valveFormData.dValue" size="small" placeholder="D值" clearable |
|
@keyup.enter.native="handleEnter('D值', valveFormData.dValueId, valveFormData.dValue, $event)" |
|
@input="handleInput(valveFormData.dValue)" @blur="handleBlur()"></el-input> |
|
</div> |
|
</div> |
|
</el-dialog> |
|
|
|
</div> |
|
</template> |
|
|
|
<script> |
|
import { runTime, operationConrol } from "@/api/centerairC/sysMonitor"; |
|
import { alarmRecordList } from "@/api/alarm/alarmRecord"; |
|
import { |
|
monitorList, |
|
monitorTotalDatas, |
|
} from "@/api/heatRecoverySys/deviceMonitor"; |
|
import { getDay } from "@/utils/datetime"; |
|
export default { |
|
data() { |
|
return { |
|
loading: false, |
|
currentDate: new Date(), |
|
nowTimer: null, |
|
isShowWarning: false, //是否有报警 |
|
dayData: "", //监测天数 |
|
timer: null, // 用于存储定时器 ID |
|
|
|
hotData: {}, //热量计量框 |
|
pressureArr: [], //压力传感器 |
|
temArr: [], //温度传感器 |
|
hotArrOne: [], //热量表1数据 |
|
hotArrTwo: [], //热量表2数据 |
|
hotArrThree: [], //热量表3数据 |
|
hotArrFour: [], //热量表4数据 |
|
hotArrFive: [], //热量表5数据 |
|
hotArrSix: [], //热量表6数据 |
|
hotArrSeven: [], //热量表7数据 |
|
valveOneArr: [], //二通阀门开度 |
|
valveTwoArr: [], //三通阀门开度 |
|
allValveArr: [], //二、三通阀门弹框数据 |
|
|
|
openHotDialog: false, |
|
controlTitle: "热量表", |
|
hotDialogArr: [], |
|
|
|
openValveDialog: false, |
|
valveTitle: "", |
|
valveModule: "", // 温度模块名称 |
|
valveFormData: { |
|
actualTempDiff: "", // 实际温度差值 |
|
actualTempDiffId: "", // 实际温度差值ID |
|
setTempDiff: "", // 设定温度差值 |
|
setTempDiffId: "", // 设定温度差值ID |
|
valveOutput: "", // 水阀输出值 |
|
valveOutputId: "", // 水阀输出值ID |
|
pValue: "", // P值 |
|
pValueId: "", // P值ID |
|
iValue: "", // I值 |
|
iValueId: "", // I值ID |
|
dValue: "", // D值 |
|
dValueId: "", // D值ID |
|
}, |
|
}; |
|
}, |
|
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}`; |
|
}, |
|
openPercent() { |
|
// 三通阀百分比数值 |
|
// return 100; |
|
// 获取原始值并转成数字 |
|
const originVal = Number( |
|
this.getHotMeterTemp(this.valveTwoArr, "三通阀门_开度反馈", 4) |
|
); |
|
console.log("三通阀百分比", Math.max(0, Math.min(100, originVal))) |
|
// 小于0返回0，大于100返回100，否则返回原值 |
|
return Math.max(0, Math.min(100, originVal)); |
|
}, |
|
getThreeWaySrc() { |
|
if (this.openPercent <= 0) { |
|
return require("../../../assets/images/three-way-greater.png"); |
|
} else if (this.openPercent >= 100) { |
|
return require("../../../assets/images/three-way-less.png"); |
|
} else { |
|
return require("../../../assets/images/three-way-between.png"); |
|
} |
|
}, |
|
}, |
|
mounted() { |
|
this.getAlarnStatus(); |
|
this.getDayData(); |
|
this.getMonitorList(); |
|
this.getMonitorTotalData(); |
|
// 在组件挂载后尝试进入全屏 |
|
setTimeout(() => { |
|
this.requestFullscreen(); |
|
}, 100); // 延迟 100 毫秒执行全屏操作 |
|
// 设置定时器，每 10 秒执行一次 |
|
this.timer = setInterval(() => { |
|
this.getAlarnStatus(); |
|
this.getMonitorList(); |
|
this.getMonitorTotalData(); |
|
}, 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; |
|
} |
|
}); |
|
}, |
|
formatHeatValue(value) { |
|
// 判断数值大于1万的时候转成mkwh单位，1万kwh = 0.01mkwh，按需保留小数 |
|
if (value > 10000) { |
|
return `${(value / 10000).toFixed(2)}mkwh`; |
|
} |
|
return `${value}kwh`; |
|
}, |
|
// 工艺流程图数据 |
|
getMonitorList() { |
|
let data = { |
|
systemType: "7", |
|
}; |
|
monitorList(data).then((res) => { |
|
if (res.code == 200) { |
|
console.log("工艺流程图返回数据----------", res.rows); |
|
// 初始化各个设备列表 |
|
this.pressureArr = []; |
|
this.temArr = []; |
|
this.hotArr = []; |
|
this.valveOneArr = []; |
|
this.valveTwoArr = []; |
|
this.allValveArr = []; |
|
|
|
res.rows.forEach((row) => { |
|
// 对 values 数组按照 orderNum 进行排序 |
|
const sortedValues = row.values |
|
? [...row.values].sort((a, b) => { |
|
// 确保 orderNum 是数字类型进行比较 |
|
const orderA = Number(a.orderNum) || 0; |
|
const orderB = Number(b.orderNum) || 0; |
|
return orderA - orderB; |
|
}) |
|
: []; |
|
|
|
switch (row.name) { |
|
case "13": |
|
this.pressureArr = sortedValues; |
|
console.log("排序后的压力传感器数组", this.pressureArr); |
|
break; |
|
case "14": |
|
this.temArr = sortedValues; |
|
console.log("排序后的温度传感器数组", this.temArr); |
|
break; |
|
case "6": |
|
// 处理热量表数据，按 orderNum 分配到不同数组 |
|
this.processHotMeters(sortedValues); |
|
break; |
|
case "26": |
|
this.valveOneArr = sortedValues; |
|
console.log("排序后的二通阀门开度数据", this.valveOneArr); |
|
break; |
|
case "27": |
|
this.valveTwoArr = sortedValues; |
|
console.log("排序后的三通阀门开度数据", this.valveTwoArr); |
|
break; |
|
case "28": |
|
this.allValveArr = sortedValues; |
|
console.log("排序后的二三通阀门开度数据", this.allValveArr); |
|
// 获取二通阀、三通阀开度数据 获取T4温度 |
|
|
|
break; |
|
default: |
|
break; |
|
} |
|
}); |
|
} |
|
}); |
|
}, |
|
// 处理热量表数据的方法 |
|
processHotMeters(sortedValues) { |
|
// 清空所有热量表数组 |
|
this.hotArrOne = []; |
|
this.hotArrTwo = []; |
|
this.hotArrThree = []; |
|
this.hotArrFour = []; |
|
this.hotArrFive = []; |
|
this.hotArrSix = []; |
|
this.hotArrSeven = []; |
|
|
|
// 根据 orderNum 分配数据 |
|
sortedValues.forEach((item) => { |
|
const orderNum = Number(item.orderNum); |
|
|
|
switch (orderNum) { |
|
case 1: |
|
this.hotArrOne.push(item); |
|
break; |
|
case 2: |
|
this.hotArrTwo.push(item); |
|
break; |
|
case 3: |
|
this.hotArrThree.push(item); |
|
break; |
|
case 4: |
|
this.hotArrFour.push(item); |
|
break; |
|
case 5: |
|
this.hotArrFive.push(item); |
|
break; |
|
case 6: |
|
this.hotArrSix.push(item); |
|
break; |
|
case 7: |
|
this.hotArrSeven.push(item); |
|
break; |
|
default: |
|
console.warn(`未知的 orderNum: ${orderNum}，跳过该热量表数据`); |
|
break; |
|
} |
|
}); |
|
|
|
// 打印各个热量表数组 |
|
console.log("热量表1数据:", this.hotArrOne); |
|
console.log("热量表2数据:", this.hotArrTwo); |
|
console.log("热量表3数据:", this.hotArrThree); |
|
console.log("热量表4数据:", this.hotArrFour); |
|
console.log("热量表5数据:", this.hotArrFive); |
|
console.log("热量表6数据:", this.hotArrSix); |
|
console.log("热量表7数据:", this.hotArrSeven); |
|
}, |
|
// 获取热量表的温度值（进水温度/出水温度） 阀门开度反馈 |
|
getHotMeterTemp(arr, type, id) { |
|
if (!arr || !Array.isArray(arr)) return null; |
|
|
|
// 查找对应类型的温度数据 |
|
const item = arr.find((item) => { |
|
if (!item || !item.collectName) return false; |
|
return item.collectName.includes(type) && item.paramType == id; |
|
}); |
|
if (!item) return null; |
|
// console.log("当前匹配名称和值", item.collectName, item.collectValue); |
|
return item.collectValue; |
|
}, |
|
// 获取其他的数据 |
|
getTemPreData(arr, type) { |
|
if (!arr || !Array.isArray(arr)) return null; |
|
|
|
// 查找对应类型的温度数据 |
|
const item = arr.find((item) => { |
|
if (!item || !item.collectName) return false; |
|
return item.collectName == type; |
|
}); |
|
if (!item) return null; |
|
// console.log("当前匹配名称和值", item.collectName, item.collectValue); |
|
return item.collectValue; |
|
}, |
|
// 控制开度 |
|
async controlValve(data, title) { |
|
try { |
|
this.valveTitle = title; |
|
this.valveModule = title === "二通阀门" ? "温度模块1" : "温度模块2"; |
|
// 根据 allValveArr 获取数据并填充表单 |
|
this.fillValveFormData(); |
|
this.openValveDialog = true; |
|
} catch (error) { |
|
console.error("获取当前开度失败:", error); |
|
this.$message.error("获取当前开度失败，请重试"); |
|
} finally { |
|
// this.loading = false; |
|
} |
|
}, |
|
// 填充阀门控制表单数据 |
|
fillValveFormData() { |
|
this.valveFormData = { |
|
actualTempDiff: "", |
|
actualTempDiffId: "", |
|
setTempDiff: "", |
|
setTempDiffId: "", |
|
valveOutput: "", |
|
valveOutputId: "", |
|
pValue: "", |
|
pValueId: "", |
|
iValue: "", |
|
iValueId: "", |
|
dValue: "", |
|
dValueId: "", |
|
}; |
|
|
|
// 实际温度差值：collectName 包含温度模块名和"输入值"的 collectValue |
|
const actualItem = this.allValveArr.find( |
|
item => item.collectName.includes(this.valveModule) && item.collectName.includes("输入值") |
|
); |
|
if (actualItem) { |
|
this.valveFormData.actualTempDiff = actualItem.collectValue; |
|
this.valveFormData.actualTempDiffId = actualItem.id; |
|
} |
|
|
|
// 设定温度差值：collectName 包含温度模块名和"控制值"的 collectValue |
|
const setItem = this.allValveArr.find( |
|
item => item.collectName.includes(this.valveModule) && item.collectName.includes("控制值") |
|
); |
|
if (setItem) { |
|
this.valveFormData.setTempDiff = setItem.collectValue; |
|
this.valveFormData.setTempDiffId = setItem.id; |
|
} |
|
|
|
// 水阀输出值：collectName 包含"二通阀输出百分比"的 collectValue |
|
const outputItem = this.allValveArr.find( |
|
item => item.collectName.includes(this.valveModule) && item.collectName.includes("输出百分比") |
|
); |
|
if (outputItem) { |
|
this.valveFormData.valveOutput = (outputItem.collectValue / 10).toFixed(1); |
|
this.valveFormData.valveOutputId = outputItem.id; |
|
} |
|
|
|
// P值：collectName 包含温度模块名和"P"的 collectValue 显示除10，控制乘10 |
|
const pItem = this.allValveArr.find( |
|
item => item.collectName.includes(this.valveModule) && item.collectName.includes("P") |
|
); |
|
if (pItem) { |
|
this.valveFormData.pValue = (pItem.collectValue / 10).toFixed(1); |
|
this.valveFormData.pValueId = pItem.id; |
|
} |
|
|
|
// I值：collectName 包含温度模块名和"I"的 collectValue |
|
const iItem = this.allValveArr.find( |
|
item => item.collectName.includes(this.valveModule) && item.collectName.includes("I") |
|
); |
|
if (iItem) { |
|
this.valveFormData.iValue = iItem.collectValue; |
|
this.valveFormData.iValueId = iItem.id; |
|
} |
|
|
|
// D值：collectName 包含温度模块名和"D"的 collectValue |
|
const dItem = this.allValveArr.find( |
|
item => item.collectName.includes(this.valveModule) && item.collectName.includes("D") |
|
); |
|
if (dItem) { |
|
this.valveFormData.dValue = dItem.collectValue; |
|
this.valveFormData.dValueId = dItem.id; |
|
} |
|
|
|
console.log("填充的表单数据:", this.valveFormData); |
|
}, |
|
// 处理输入事件，过滤非数字字符 |
|
handleInput(item) { |
|
console.log("校验"); |
|
// 实时校验并过滤非数字字符 |
|
item = String(item).replace(/[^\d]/g, ""); |
|
}, |
|
// 失去焦点 |
|
handleBlur() { |
|
}, |
|
handleEnter(name, id, value, event) { |
|
if (!value) { |
|
this.$modal.msgWarning("请输入当前值!"); |
|
return |
|
} |
|
// 失去焦点 |
|
event.target.blur(); |
|
this.$confirm( |
|
`确定要修改${name}为:${value} 吗?`, |
|
"提示", |
|
{ |
|
confirmButtonText: "确定", |
|
cancelButtonText: "取消", |
|
type: "warning", |
|
} |
|
) |
|
.then(async () => { |
|
// 准备请求参数 |
|
// 如果name为P值，传给后端的value需要乘10 |
|
const paramValue = name === "P值" ? value * 10 : value; |
|
const params = { |
|
id: id, |
|
param: paramValue, |
|
}; |
|
console.log("params", params); |
|
// 调用operationConrol接口 |
|
try { |
|
this.loading = true; |
|
const result = await operationConrol([params]); |
|
if (result.code == 200) { |
|
this.$modal.msgSuccess("指令下发成功!"); |
|
setTimeout(() => { |
|
this.getMonitorList(); |
|
this.getMonitorTotalData(); |
|
this.loading = false; |
|
}, 3000); |
|
} else { |
|
this.$modal.msgError("指令下发失败!"); |
|
this.loading = false; |
|
} |
|
} catch (error) { |
|
console.error("指令下发失败:", error); |
|
this.$modal.msgError("指令下发失败，请重试!"); |
|
this.loading = false; |
|
} |
|
}) |
|
.catch(() => { |
|
// 用户取消操作，需要更新原来的频率 |
|
// this.$emit("upList"); |
|
this.loading = false; |
|
}); |
|
}, |
|
// 积累热量数据 |
|
getMonitorTotalData() { |
|
let data = { |
|
systemType: "7", |
|
}; |
|
monitorTotalDatas(data).then((res) => { |
|
if (res.code == 200) { |
|
console.log("累计热量返回数据----------", res.rows); |
|
this.hotData = res.rows[0]; |
|
} |
|
}); |
|
}, |
|
goWarning() { |
|
// this.exitFullscreen(); |
|
this.$router.push("/alarm/alarmRecord"); |
|
}, |
|
// 热量表弹框 |
|
hotListData(arr, title) { |
|
this.hotDialogArr = []; |
|
this.controlTitle = title; |
|
this.hotDialogArr = arr; |
|
console.log("当前热量表数据", this.hotDialogArr); |
|
this.openHotDialog = true; |
|
}, |
|
}, |
|
}; |
|
</script> |
|
|
|
<style lang="scss" scoped> |
|
.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.8rem; |
|
} |
|
|
|
.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; |
|
} |
|
} |
|
|
|
.host-detail { |
|
margin: 0 0.2rem; |
|
width: calc(100% - 0.4rem); |
|
height: 9.6rem; |
|
position: relative; |
|
background-image: url(../../../assets/images/monitor-border.png); |
|
background-size: 100% 100%; |
|
background-repeat: no-repeat; |
|
|
|
.flowchart { |
|
width: 16.806rem; |
|
height: 8.245rem; |
|
position: absolute; |
|
top: 0.5rem; |
|
left: 1.1rem; |
|
} |
|
|
|
.hot-details { |
|
width: 4.6rem; |
|
padding: 0.1rem; |
|
height: 3.05rem; |
|
background-image: url(../../../assets/images/monitor-hot.png); |
|
background-size: 100% 100%; |
|
background-repeat: no-repeat; |
|
position: absolute; |
|
top: 0.4rem; |
|
right: 0.8rem; |
|
display: flex; |
|
flex-direction: column; |
|
|
|
.hot-title { |
|
font-size: 0.18rem; |
|
color: #ffffff; |
|
font-weight: bold; |
|
padding: 0.05rem 0 0 0.5rem; |
|
margin-bottom: 0.4rem; |
|
} |
|
|
|
.hot-li { |
|
width: 100%; |
|
display: flex; |
|
flex-direction: row; |
|
align-items: center; |
|
font-size: 0.16rem; |
|
color: #b8bbb7; |
|
position: relative; |
|
padding-left: 1rem; |
|
margin-bottom: 0.3rem; |
|
text-align: center; |
|
letter-spacing: 0.1em; |
|
|
|
.hot-icon { |
|
width: 1rem; |
|
height: 1rem; |
|
position: absolute; |
|
left: 0.2rem; |
|
} |
|
|
|
.hot-data { |
|
color: #ffffff; |
|
font-weight: bold; |
|
margin-left: 0.1rem; |
|
} |
|
} |
|
} |
|
|
|
.text { |
|
font-size: 0.18rem; |
|
color: #ffffff; |
|
position: absolute; |
|
letter-spacing: 0.1em; |
|
} |
|
|
|
.text1 { |
|
top: 1.2rem; |
|
left: 2.5rem; |
|
} |
|
|
|
.text2 { |
|
top: 1.5rem; |
|
left: 2.5rem; |
|
} |
|
|
|
.text3 { |
|
top: 2.6rem; |
|
left: 2.5rem; |
|
} |
|
|
|
.text4 { |
|
top: 2.9rem; |
|
left: 2.5rem; |
|
} |
|
|
|
.text5 { |
|
top: 4.3rem; |
|
left: 0.5rem; |
|
} |
|
|
|
.text6 { |
|
top: 2.55rem; |
|
left: 4.4rem; |
|
} |
|
|
|
.text7 { |
|
top: 3.35rem; |
|
left: 7.9rem; |
|
} |
|
|
|
.text8 { |
|
top: 5.02rem; |
|
left: 7.9rem; |
|
} |
|
|
|
.text9 { |
|
top: 6.7rem; |
|
left: 2rem; |
|
} |
|
|
|
.text10 { |
|
top: 5.45rem; |
|
left: 4.1rem; |
|
font-size: 0.14rem; |
|
} |
|
|
|
.text11 { |
|
top: 5.59rem; |
|
left: 11.5rem; |
|
font-size: 0.14rem; |
|
} |
|
|
|
.text18 { |
|
top: 5.1rem; |
|
left: 11.5rem; |
|
font-size: 0.14rem; |
|
} |
|
|
|
.text12 { |
|
top: 7.7rem; |
|
left: 6.4rem; |
|
} |
|
|
|
.text13 { |
|
top: 7.7rem; |
|
left: 8.6rem; |
|
} |
|
|
|
.text14 { |
|
top: 7.27rem; |
|
left: 11.65rem; |
|
} |
|
|
|
.text15 { |
|
top: 7.57rem; |
|
left: 14.1rem; |
|
} |
|
|
|
.text16 { |
|
top: 7.27rem; |
|
left: 16.3rem; |
|
} |
|
|
|
.text17 { |
|
top: 5.05rem; |
|
left: 14.1rem; |
|
} |
|
|
|
.pres0 { |
|
top: 1.57rem; |
|
left: 8.1rem; |
|
color: #eaf12a; |
|
} |
|
|
|
.pres1 { |
|
top: 2.35rem; |
|
left: 9.6rem; |
|
color: #eaf12a; |
|
} |
|
|
|
.pres2 { |
|
top: 4rem; |
|
left: 9.6rem; |
|
color: #eaf12a; |
|
} |
|
|
|
.pres3 { |
|
top: 5rem; |
|
left: 10.5rem; |
|
color: #eaf12a; |
|
} |
|
|
|
.pres4 { |
|
top: 5.1rem; |
|
left: 12.5rem; |
|
color: #eaf12a; |
|
} |
|
|
|
.pres5 { |
|
top: 2.9rem; |
|
left: 12.5rem; |
|
color: #eaf12a; |
|
} |
|
|
|
.pres6 { |
|
top: 2.35rem; |
|
left: 6.8rem; |
|
color: #eaf12a; |
|
} |
|
|
|
.pres7 { |
|
top: 3.9rem; |
|
left: 6.8rem; |
|
color: #eaf12a; |
|
} |
|
|
|
.pres8 { |
|
top: 7.5rem; |
|
left: 2.6rem; |
|
color: #eaf12a; |
|
} |
|
|
|
.pres9 { |
|
top: 7.5rem; |
|
left: 1.2rem; |
|
color: #eaf12a; |
|
} |
|
|
|
.pres10 { |
|
top: 4.92rem; |
|
left: 2.8rem; |
|
color: #eaf12a; |
|
} |
|
|
|
.pres11 { |
|
top: 4.9rem; |
|
left: 1.15rem; |
|
color: #eaf12a; |
|
} |
|
|
|
.pres12 { |
|
top: 8rem; |
|
left: 12.75rem; |
|
color: #eaf12a; |
|
} |
|
|
|
.tem1 { |
|
top: 2.33rem; |
|
left: 10.4rem; |
|
color: #ef4317; |
|
} |
|
|
|
.tem2 { |
|
top: 3.97rem; |
|
left: 10.4rem; |
|
color: #ef4317; |
|
} |
|
|
|
.tem3 { |
|
top: 5.27rem; |
|
left: 10.5rem; |
|
color: #ef4317; |
|
} |
|
|
|
.tem4 { |
|
top: 5.5rem; |
|
left: 12.5rem; |
|
color: #16cb64; |
|
} |
|
|
|
.tem5 { |
|
top: 7.49rem; |
|
left: 3.4rem; |
|
color: #ef4317; |
|
} |
|
|
|
.tem6 { |
|
top: 8.78rem; |
|
left: 13.25rem; |
|
color: #16cb64; |
|
} |
|
|
|
.tem7 { |
|
top: 7.98rem; |
|
left: 13.55rem; |
|
color: #ef4317; |
|
} |
|
|
|
.intem1 { |
|
top: 0.25rem; |
|
left: 7.2rem; |
|
color: #ef4317; |
|
} |
|
|
|
.outtem1 { |
|
top: 1.55rem; |
|
left: 7.2rem; |
|
color: #16cb64; |
|
} |
|
|
|
.nowhot1 { |
|
top: 1rem; |
|
left: 7.2rem; |
|
color: #ffffff; |
|
} |
|
|
|
.intem2 { |
|
top: 2.35rem; |
|
left: 6rem; |
|
color: #ef4317; |
|
} |
|
|
|
.outtem2 { |
|
top: 3.25rem; |
|
left: 6rem; |
|
color: #16cb64; |
|
} |
|
|
|
.nowhot2 { |
|
top: 2.85rem; |
|
left: 6rem; |
|
color: #ffffff; |
|
} |
|
|
|
.intem3 { |
|
top: 3.9rem; |
|
left: 6rem; |
|
color: #ef4317; |
|
} |
|
|
|
.outtem3 { |
|
top: 4.7rem; |
|
left: 6rem; |
|
color: #16cb64; |
|
} |
|
|
|
.nowhot3 { |
|
top: 4.3rem; |
|
left: 6rem; |
|
color: #ffffff; |
|
} |
|
|
|
.intem4 { |
|
top: 5.3rem; |
|
left: 1.2rem; |
|
color: #ef4317; |
|
} |
|
|
|
.outtem4 { |
|
top: 5.3rem; |
|
left: 3rem; |
|
color: #16cb64; |
|
} |
|
|
|
.nowhot4 { |
|
top: 5.33rem; |
|
left: 2.05rem; |
|
color: #ffffff; |
|
} |
|
|
|
.intem5 { |
|
top: 7.7rem; |
|
left: 11.1rem; |
|
color: #ef4317; |
|
} |
|
|
|
.outtem5 { |
|
top: 7.7rem; |
|
left: 12.75rem; |
|
color: #16cb64; |
|
} |
|
|
|
.nowhot5 { |
|
top: 7.7rem; |
|
left: 11.9rem; |
|
color: #ffffff; |
|
} |
|
|
|
.intem6 { |
|
top: 8.8rem; |
|
left: 10.5rem; |
|
color: #ef4317; |
|
} |
|
|
|
.outtem6 { |
|
top: 8rem; |
|
left: 10.5rem; |
|
color: #16cb64; |
|
} |
|
|
|
.nowhot6 { |
|
top: 8.4rem; |
|
left: 10.5rem; |
|
color: #ffffff; |
|
} |
|
|
|
.intem7 { |
|
top: 6rem; |
|
left: 13.4rem; |
|
color: #ef4317; |
|
} |
|
|
|
.outtem7 { |
|
top: 6rem; |
|
left: 15.1rem; |
|
color: #16cb64; |
|
} |
|
|
|
.nowhot7 { |
|
top: 6rem; |
|
left: 14.15rem; |
|
color: #ffffff; |
|
} |
|
|
|
.valve1 { |
|
top: 5.37rem; |
|
left: 4.9rem; |
|
color: #ffffff; |
|
cursor: pointer; |
|
} |
|
|
|
.valve2 { |
|
top: 5.55rem; |
|
left: 10.5rem; |
|
color: #ffffff; |
|
cursor: pointer; |
|
} |
|
|
|
.valve3 { |
|
top: 4.55rem; |
|
left: 12.2rem; |
|
color: #ffffff; |
|
cursor: pointer; |
|
} |
|
|
|
.valve4 { |
|
top: 4.55rem; |
|
left: 11.9rem; |
|
color: #ffffff; |
|
cursor: pointer; |
|
} |
|
|
|
.three-way { |
|
top: 4.4rem; |
|
left: 9.2rem; |
|
width: 4.38rem; |
|
height: 1.78rem; |
|
} |
|
|
|
.three-way-less { |
|
top: 4.7rem; |
|
left: 9.2rem; |
|
width: 4.39rem; |
|
height: 1.47rem; |
|
} |
|
|
|
.click2 { |
|
width: 0.8rem; |
|
height: 0.8rem; |
|
top: 4.9rem; |
|
left: 3.93rem; |
|
// background: #eaf12a; |
|
cursor: pointer; |
|
z-index: 999; |
|
} |
|
|
|
.click3 { |
|
width: 0.8rem; |
|
height: 0.8rem; |
|
top: 5rem; |
|
left: 11.32rem; |
|
// background: #eaf12a; |
|
cursor: pointer; |
|
z-index: 999; |
|
} |
|
|
|
.click4 { |
|
width: 0.8rem; |
|
height: 0.8rem; |
|
top: 4.5rem; |
|
left: 11.33rem; |
|
// background: #eaf12a; |
|
cursor: pointer; |
|
z-index: 999; |
|
} |
|
|
|
.p0 { |
|
top: 1.35rem; |
|
left: 8.3rem; |
|
color: #ffffff; |
|
} |
|
|
|
.p1 { |
|
top: 2.15rem; |
|
left: 9.75rem; |
|
color: #ffffff; |
|
} |
|
|
|
.p2 { |
|
top: 3.75rem; |
|
left: 9.75rem; |
|
color: #ffffff; |
|
} |
|
|
|
.p3 { |
|
top: 5rem; |
|
left: 10.15rem; |
|
color: #ffffff; |
|
} |
|
|
|
.p4 { |
|
top: 5.12rem; |
|
left: 13.25rem; |
|
color: #ffffff; |
|
} |
|
|
|
.p5 { |
|
top: 2.67rem; |
|
left: 12.7rem; |
|
color: #ffffff; |
|
} |
|
|
|
.p6 { |
|
top: 2.15rem; |
|
left: 6.9rem; |
|
color: #ffffff; |
|
} |
|
|
|
.p7 { |
|
top: 3.68rem; |
|
left: 6.9rem; |
|
color: #ffffff; |
|
} |
|
|
|
.p8 { |
|
top: 7.72rem; |
|
left: 2.8rem; |
|
color: #ffffff; |
|
} |
|
|
|
.p9 { |
|
top: 7.72rem; |
|
left: 1.3rem; |
|
color: #ffffff; |
|
} |
|
|
|
.p10 { |
|
top: 4.93rem; |
|
left: 3.55rem; |
|
color: #ffffff; |
|
} |
|
|
|
.p11 { |
|
top: 4.9rem; |
|
left: 0.7rem; |
|
color: #ffffff; |
|
} |
|
|
|
.p12 { |
|
top: 8.34rem; |
|
left: 12.9rem; |
|
color: #ffffff; |
|
} |
|
|
|
.t1 { |
|
top: 2.15rem; |
|
left: 10.45rem; |
|
color: #ffffff; |
|
} |
|
|
|
.t2 { |
|
top: 3.75rem; |
|
left: 10.45rem; |
|
color: #ffffff; |
|
} |
|
|
|
.t3 { |
|
top: 5.3rem; |
|
left: 10.15rem; |
|
color: #ffffff; |
|
} |
|
|
|
.t4 { |
|
top: 5.53rem; |
|
left: 13.25rem; |
|
color: #ffffff; |
|
} |
|
|
|
.t5 { |
|
top: 7.72rem; |
|
left: 3.55rem; |
|
color: #ffffff; |
|
} |
|
|
|
.t6 { |
|
top: 8.82rem; |
|
left: 12.9rem; |
|
color: #ffffff; |
|
} |
|
|
|
.t7 { |
|
top: 8.34rem; |
|
left: 13.7rem; |
|
color: #ffffff; |
|
} |
|
|
|
.h1 { |
|
top: 1rem; |
|
left: 6.2rem; |
|
color: #cecece; |
|
font-size: 0.16rem; |
|
padding: 0.06rem; |
|
border: 0.01rem dashed #646866; |
|
cursor: pointer; |
|
} |
|
|
|
.h2 { |
|
top: 3.15rem; |
|
left: 5.1rem; |
|
color: #cecece; |
|
font-size: 0.16rem; |
|
padding: 0.06rem; |
|
border: 0.01rem dashed #646866; |
|
cursor: pointer; |
|
} |
|
|
|
.h3 { |
|
top: 4.25rem; |
|
left: 5.1rem; |
|
color: #cecece; |
|
font-size: 0.16rem; |
|
padding: 0.06rem; |
|
border: 0.01rem dashed #646866; |
|
cursor: pointer; |
|
} |
|
|
|
.h4 { |
|
top: 5rem; |
|
left: 2rem; |
|
color: #cecece; |
|
font-size: 0.16rem; |
|
padding: 0.06rem; |
|
border: 0.01rem dashed #646866; |
|
cursor: pointer; |
|
} |
|
|
|
.h5 { |
|
top: 7.9rem; |
|
left: 11.82rem; |
|
color: #cecece; |
|
font-size: 0.16rem; |
|
padding: 0.06rem; |
|
border: 0.01rem dashed #646866; |
|
cursor: pointer; |
|
} |
|
|
|
.h6 { |
|
top: 8.35rem; |
|
left: 9.55rem; |
|
color: #cecece; |
|
font-size: 0.16rem; |
|
padding: 0.06rem; |
|
border: 0.01rem dashed #646866; |
|
cursor: pointer; |
|
} |
|
|
|
.h7 { |
|
top: 5.5rem; |
|
left: 14.15rem; |
|
color: #cecece; |
|
font-size: 0.16rem; |
|
padding: 0.06rem; |
|
border: 0.01rem dashed #646866; |
|
cursor: pointer; |
|
} |
|
} |
|
} |
|
|
|
.hot-list { |
|
display: flex; |
|
flex-direction: column; |
|
margin-left: 50px; |
|
|
|
.hot-data { |
|
display: flex; |
|
flex-direction: row; |
|
align-items: center; |
|
margin-bottom: 10px; |
|
|
|
.hot-text { |
|
// text-align: center; |
|
margin-right: 8px; |
|
min-width: 100px; |
|
white-space: nowrap; |
|
} |
|
|
|
.hot-details { |
|
background-color: #1960a3; |
|
border-radius: 10px; |
|
padding: 8px 10px; |
|
font-size: 16px; |
|
width: 180px; |
|
text-align: center; |
|
font-weight: bold; |
|
letter-spacing: 0.1em; |
|
} |
|
} |
|
} |
|
</style>
|
|
|