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.
1956 lines
61 KiB
1956 lines
61 KiB
<template> |
|
<!-- 空调 --> |
|
<div class="light"> |
|
<!-- 各楼栋楼层切换 --> |
|
<clickCp :bimModel="bimModel" sbType="空调" ref="clickcp"></clickCp> |
|
<!-- 返回主视角 --> |
|
<backHome :bimModel="bimModel" type="空调"></backHome> |
|
<div class="mapDom" style=" |
|
position: absolute; |
|
left: 105px; |
|
top: 210px; |
|
width: 250px; |
|
height: 180px; |
|
margin: 45px auto; |
|
"></div> |
|
<!-- 设备概况 --> |
|
<div class="box2"> |
|
<div class="title flex-center"> |
|
<img class="icon" src="../../../public/img/monitoring/electricity/sbIcon.png" /> |
|
<span>设备概况</span> |
|
</div> |
|
<div class="state flex-center-center"> |
|
<div class="zc flex-center" style="font-family: fantasy"> |
|
<span style="margin-left: 72px">{{ |
|
normalTotal |
|
}}</span> |
|
</div> |
|
<div class="lx flex-center" style="font-family: fantasy"> |
|
<span style="margin-left: 72px">{{ warnEquip }}</span> |
|
</div> |
|
</div> |
|
<div class="stateName flex-center-center"> |
|
<span class="zc">正常</span> |
|
<span class="lx">设备告警</span> |
|
</div> |
|
<div class="tab_box"> |
|
<div class="tab_one" @click="clickAlarm(1)" :style="{ color: isAlarm ? 'red' : '#fff' }"> |
|
<!-- <span>系统报警 <span class="circle"></span> <span>(4)</span></span> --> |
|
<el-badge :is-dot="isAlarm" class="item">设备告警</el-badge><span |
|
style="margin-left: 5px; vertical-align: bottom">({{ equipWarn }})</span> |
|
</div> |
|
<!-- <div class="tab_one tab_two" @click="clickAlarm(2)" :style="{color: isSafe ? 'red' :'#fff'}"><el-badge :is-dot='isSafe' class="item">安全报警</el-badge><span style="margin-left:5px;vertical-align: bottom;">({{safeTotal}})</span></div> --> |
|
</div> |
|
<div class="flex-center tit" :class="bimModel == 2 ? 'tataitit' : ''"> |
|
<p>设备名称</p> |
|
<span>|</span> |
|
<p>报警信息</p> |
|
<span>|</span> |
|
<p>报警时间</p> |
|
</div> |
|
<div v-if="listData.length == 0" class="noBjxx">暂无故障报警信息</div> |
|
<vue-seamless-scroll :class-option="classOption" :data="listData" class="warp"> |
|
<div class="item flex-center" v-for="(item, index) in listData" :key="index" style="position: relative" |
|
@mouseenter="showAlarkAlert(item, index)" @mouseleave="closeAlarkAlert(item, index)"> |
|
<div v-if="item.homepageShow == 1" @click="doCancelWarn(item.id)" |
|
:style="{ display: item.showAlert ? 'flex' : 'none' }" class="alark-alert"> |
|
<p> |
|
<img src="../../../public/img/monitoring/electricity/close-alark-icon.png" alt="" /> |
|
<span>关闭告警</span> |
|
</p> |
|
</div> |
|
<div class="box flex-center" style="justify-content: space-around" :class="bimModel == 2 ? 'tataicon' : ''"> |
|
<div class="left flex-center-center"> |
|
<img class="icon" src="../../../public/img/monitoring/electricity/lx.png" v-if="item.status == '90001'" /> |
|
<img class="icon" src="../../../public/img/monitoring/electricity/bj.png" v-else /> |
|
<span class="message" v-text="item.name" :style="{ |
|
color: |
|
item.status == 90000 |
|
? 'white' |
|
: item.status == 90001 |
|
? '#a5bbe5' |
|
: '#ff0000', |
|
}" :title="item.name"></span> |
|
</div> |
|
<span></span> |
|
<span class="data" :style="{ |
|
color: |
|
item.status == 90000 |
|
? 'white' |
|
: item.status == 90001 |
|
? '#a5bbe5' |
|
: '#ff0000', |
|
}" :title="item.warnContent">{{ item.warnContent }}</span> |
|
<span class=""></span> |
|
<span class="time" |
|
:style="{ color: item.status == 90000 ? '' : item.status == 90001 ? '#a5bbe5' : '#ff0000' }">{{ |
|
item.warnDate.substring(5, 16) |
|
}}</span> |
|
</div> |
|
</div> |
|
</vue-seamless-scroll> |
|
<div |
|
style="position: absolute;bottom: 10px;right: 10px;width:345px;text-align:right;color:rgb(7, 230, 237);font-size:14px;cursor:pointer;"> |
|
<span @click="goMoreWarnList">查看报警详情</span> |
|
</div> |
|
</div> |
|
<!-- 设备列表 --> |
|
<div v-if="bimModel == 1" class="switch"> |
|
<div class="title flex-center"> |
|
<!-- <img src="../../../public/img/monitoring/sblb.png" /> --> |
|
<img src="../../../public/img/monitoring/electricity/listIcon3.png" /> |
|
<span>设备列表</span> |
|
</div> |
|
<!-- <div class="select flex-center-between"> |
|
<span class="name">设备位置</span> |
|
<el-select v-model="build" placeholder="请选择"> |
|
<el-option v-for="(item,key) in devices" :key="key" :label="item.name" :value="item.name"> |
|
</el-option> |
|
</el-select> |
|
<span class="btn" @click="searchDevice" style="cursor: pointer;">查询</span> |
|
</div> --> |
|
<div class="tabBox"> |
|
<el-table :data="tableData" style="width: 100%; max-height: 220px"> |
|
<el-table-column label="设备名称" min-width="100px" style="cursor: pointer"> |
|
<template slot-scope="scope"> |
|
<div class="flex-center-center" @click="clickConditions(scope.row)" style="cursor: pointer"> |
|
<img v-if="scope.row.open == 1" style="margin-right: 6px" |
|
src="../../../public/img/monitoring/electricity/listIcon.png" /> |
|
<img v-else style="margin-right: 6px" src="../../../public/img/monitoring/electricity/listIcon2.png" /> |
|
<!--<img v-else style="margin-right: 6px;" src="../../../public/img/monitoring/gz.png"> --> |
|
<!-- <marquee behavior="scroll" direction="left" style="width: 30px;">{{scope.row.name}}</marquee> --> |
|
<span :style="{ color: scope.row.open == 1 ? 'white' : '#9d9d9d' }">{{ scope.row.name }}</span> |
|
</div> |
|
</template> |
|
</el-table-column> |
|
<el-table-column label="|" width="5"></el-table-column> |
|
<el-table-column label="温度(实际/设定)" style="cursor: pointer"> |
|
<template slot-scope="scope"> |
|
<span @click="clickConditions(scope.row)" style="cursor: pointer" |
|
:style="{ color: scope.row.open == 1 ? 'white' : '#9d9d9d' }">{{ scope.row.temCur ? scope.row.temCur : |
|
"--" |
|
}}℃/{{ |
|
scope.row.temSetting ? scope.row.temSetting : "--" |
|
}}℃</span> |
|
</template> |
|
</el-table-column> |
|
<el-table-column label="|" width="5"></el-table-column> |
|
<el-table-column label="楼层" width="100" style="cursor: pointer"> |
|
<template slot-scope="scope"> |
|
<span @click="clickConditions(scope.row)" style="cursor: pointer" |
|
:style="{ color: scope.row.open == 1 ? 'white' : '#9d9d9d' }">{{ |
|
Number(scope.row.build) + |
|
"号楼" + |
|
Number(scope.row.floored) + |
|
"层" |
|
}}</span> |
|
</template> |
|
</el-table-column> |
|
<!-- <el-table-column label="设备状态" style="cursor: pointer;"> |
|
<template slot-scope="scope"> |
|
<span @click="clickConditions(scope.row)" style="cursor: pointer;" |
|
:style="{color:scope.row.open == 1?'white':'#9d9d9d'}">{{scope.row.open == 1?'开启':'关闭'}}</span> |
|
</template> |
|
</el-table-column> --> |
|
</el-table> |
|
</div> |
|
<div class="pagination"> |
|
<el-pagination :pager-count="4" background @current-change="handleCurrentChange" :current-page.sync="current" |
|
:page-size="size" layout="total, prev, pager, next" :total="total"> |
|
</el-pagination> |
|
</div> |
|
<!-- <div class="box"> |
|
<span>空开1</span> |
|
<el-switch @change="switchChange1" v-model="value1" active-color="#13ce66" inactive-color="#ff4949"> |
|
</el-switch> |
|
</div> |
|
<div class="box"> |
|
<span>空开5</span> |
|
<el-switch @change="switchChange2" v-model="value2" active-color="#13ce66" inactive-color="#ff4949"> |
|
</el-switch> |
|
</div> --> |
|
</div> |
|
<div v-if="bimModel == 1 && isControl" class="tab_control"> |
|
<div class="title flex-center"> |
|
<img src="../../../public/img/monitoring/electricity/kt-control.png" /> |
|
<span>空调控制</span> |
|
<!-- {{testObject1.name}} --> |
|
</div> |
|
<div class="flex-center-between" style="padding: 0 1rem"> |
|
<div class="open-txt"> |
|
{{ testObject1.name }} |
|
<span v-if="testObject1.funcCat == 1">{{ |
|
testObject1.mode == 0 |
|
? "通风" |
|
: testObject1.mode == 1 |
|
? "制热" |
|
: "制冷" |
|
}}</span> |
|
<span v-if="testObject1.funcCat == 3">{{ |
|
testObject1.mode == 0 |
|
? "内机制热" |
|
: testObject1.mode == 1 |
|
? "内机地暖同时制热" |
|
: testObject1.mode == 2 |
|
? "地暖制热" |
|
: testObject1.mode == 3 |
|
? "制冷" |
|
: testObject1.mode == 9 |
|
? "通风" |
|
: "" |
|
}}</span> |
|
</div> |
|
<div> |
|
<img style="width: 44px; height: 22px" v-if="testObject1.open == 1" |
|
src="../../../public/img/monitoring/open.png" @click="closeCondition" /> |
|
<img style="width: 44px; height: 22px" v-if="testObject1.open == 2 || testObject1.open == 0" |
|
src="../../../public/img/monitoring/off.png" @click="openCondition" /> |
|
</div> |
|
</div> |
|
<div class="conditios-block" v-if="testObject1.open == 1"> |
|
<div class="conditios-block-temper" v-if="testObject1.mode == 0 || testObject1.mode == 9" |
|
style="justify-content: center"> |
|
<img src="../../../public/img/monitoring/electricity/green-wind.png" alt="" /> |
|
</div> |
|
<div class="conditios-block-temper" v-else> |
|
<img src="../../../public/img/monitoring/electricity/jian.png" alt="" @click="descreaseTemper" /> |
|
<span><span style="font-size: 40px; font-family: fantasy">{{ |
|
testObject1.temSetting |
|
}}</span>℃</span> |
|
<img src="../../../public/img/monitoring/electricity/jia.png" alt="" @click="plusTemper" /> |
|
</div> |
|
<div class="conditios-block-temper1"> |
|
<div class="conditios-block-temper1-left"> |
|
<img src="../../../public/img/monitoring/electricity/wendu.png" alt="" /> |
|
室内温度： |
|
<span>{{ testObject1.temCur }}℃</span> |
|
</div> |
|
<div class="conditios-block-temper1-right"> |
|
<img src="../../../public/img/monitoring/electricity/wind-line.png" alt="" /> |
|
当前风速： |
|
<span v-if="testObject1.funcCat == 1">{{ |
|
testObject1.speed == 0 |
|
? "低速" |
|
: testObject1.speed == 1 |
|
? "中速" |
|
: testObject1.speed == 2 |
|
? "高速" |
|
: "自动" |
|
}}</span> |
|
<span v-if="testObject1.funcCat == 3">{{ |
|
testObject1.speed == 1 |
|
? "低速" |
|
: testObject1.speed == 2 |
|
? "中速" |
|
: testObject1.speed == 3 |
|
? "高速" |
|
: "自动" |
|
}}</span> |
|
</div> |
|
</div> |
|
</div> |
|
<div class="conditios-block" v-if="testObject1.open == 2 || testObject1.open == 0"> |
|
<div class="conditios-block-temper" v-if="testObject1.mode == 0 || testObject1.mode == 9" |
|
style="justify-content: center"> |
|
<img src="../../../public/img/monitoring/electricity/gray-wind.png" alt="" /> |
|
</div> |
|
<div class="conditios-block-temper" v-else> |
|
<img src="../../../public/img/monitoring/electricity/gray-jian.png" alt="" @click="descreaseTemper" /> |
|
<span style="color: #7da0d1"><span style="font-size: 40px; font-family: fantasy">{{ |
|
testObject1.temSetting |
|
}}</span>℃</span> |
|
<img src="../../../public/img/monitoring/electricity/gray-jia.png" alt="" @click="plusTemper" /> |
|
</div> |
|
<div class="conditios-block-temper1"> |
|
<div class="conditios-block-temper1-left"> |
|
<img src="../../../public/img/monitoring/electricity/wendu.png" alt="" /> |
|
室内温度： |
|
<span>{{ testObject1.temCur }}℃</span> |
|
</div> |
|
<div class="conditios-block-temper1-right"> |
|
<img src="../../../public/img/monitoring/electricity/wind-line.png" alt="" /> |
|
当前风速： |
|
<span v-if="testObject1.funcCat == 1">{{ |
|
testObject1.speed == 0 |
|
? "低速" |
|
: testObject1.speed == 1 |
|
? "中速" |
|
: testObject1.speed == 2 |
|
? "高速" |
|
: "自动" |
|
}}</span> |
|
<span v-if="testObject1.funcCat == 3">{{ |
|
testObject1.speed == 1 |
|
? "低速" |
|
: testObject1.speed == 2 |
|
? "中速" |
|
: testObject1.speed == 3 |
|
? "高速" |
|
: "自动" |
|
}}</span> |
|
</div> |
|
</div> |
|
</div> |
|
<!-- 设备不在线 --> |
|
<div class="conditios-block" style="text-align:center;padding:4rem 0;" v-if="testObject1.open == -1"> |
|
<img src="../../../public/img/monitoring/device_online.png" /> |
|
<div style="color:#7597cb;font-size:0.14rem;margin-top:0.1rem;">设备离线</div> |
|
</div> |
|
</div> |
|
</div> |
|
</template> |
|
|
|
<script> |
|
import * as bfHelper from "../../util/bfHelper"; |
|
import * as commonValue from "../../util/commonValue"; |
|
import { |
|
openConditionsList, |
|
getConditionData, |
|
getConditionOpen, |
|
getConditionClose, |
|
setConditionTemUp, |
|
setConditionTemDown, |
|
setConditionMode, |
|
setConditionSpeedUp, |
|
setConditionSpeedDown, |
|
getFloorTemp, |
|
getLifList, |
|
getAirWarnList,//报警列表 |
|
getCancelWarn,//关闭告警 |
|
setLoraTemp,//设置lora面板温度 |
|
setLoraStatus,//设置lora面板开关0：关机 1：开机 |
|
setLoraModel,//设置lora面板模式0:内机制热 1:内机地暖同时制热(默认) 2::地暖制热 3:制冷模式 9:通风模式| |
|
setLoraSpeed,//设置lora面板风速1：低速 2：中速 3：高速 4：自动 |
|
queryLoraAll,//读取lora面板### 读取空调面板的 |
|
} from "@/api/garden/monitoring"; |
|
import clickCp from "./clickCp"; |
|
import backHome from "./backHome"; |
|
export default { |
|
props: { |
|
bimModel: { |
|
type: Number, |
|
}, |
|
}, |
|
components: { |
|
clickCp, |
|
backHome, |
|
}, |
|
filters: { |
|
statusType: (data) => { |
|
//状态值所对应的数据 |
|
switch (data) { |
|
case 0: |
|
return "未运行"; |
|
case 1: |
|
return "运行中"; |
|
case 2: |
|
return "故障"; |
|
} |
|
}, |
|
}, |
|
data() { |
|
return { |
|
value1: false, |
|
value2: false, |
|
build: "", |
|
build1: "", |
|
tableData: [], |
|
current: 1, //当前页 |
|
size: 5, //每页数量 |
|
total: 0, //总条目数 |
|
chooseId: [], |
|
switchAllClose: require("../../../public/img/monitoring/switchbg.png"), |
|
switchAllOpen: require("../../../public/img/monitoring/switchbg.png"), |
|
conditionInfo: { |
|
name: "空调1", |
|
status: 1, //运行中 |
|
temperature: 24, |
|
roomTemperature: 20, |
|
speed: "强", |
|
}, |
|
operatorHot: require("../../../public/img/monitoring/hot.png"), |
|
operatorCold: require("../../../public/img/monitoring/snow.png"), |
|
operatorWet: require("../../../public/img/monitoring/wet.png"), |
|
|
|
testObject: { |
|
status: 0, //通风模式 |
|
isOpen: false, //空调开启 |
|
name: "空调1", |
|
temper: 28, |
|
actualTemper: 30, |
|
windSpeed: 0, |
|
worldPosition: { |
|
x: 57430.87626265357, |
|
y: -5298.693359375, |
|
z: 3059.87618005641, |
|
}, |
|
tower: null, |
|
layer: null, |
|
}, |
|
testObject1: {}, |
|
status: 0, |
|
isControl: false, |
|
bgImg: null, |
|
openStatus: null, |
|
build: null, |
|
floor: null, |
|
position: null, |
|
clickCode: null, |
|
allDatas: [], |
|
isMapViewer: 0, |
|
conditionNum: null, |
|
arr: [], //空调信息 |
|
listData: [], //告警列表 |
|
noramlTotal: 0,//正常设备数量 |
|
warnEquip: 0,//告警设备数量 |
|
equipWarn: 0,//告警数量 |
|
}; |
|
}, |
|
watch: { |
|
bimModel: { |
|
handler(newVal, oldVal) { |
|
this.getAirWarnList();//告警列表 |
|
this.getLifLists();//设备信息 |
|
if (this.setInterval) { |
|
clearInterval(this.setInterval); |
|
} |
|
|
|
this.setInterval = setInterval(() => { |
|
this.getConditions(); //空调列表 |
|
this.getAirWarnList();//告警列表 |
|
}, 3600000); |
|
|
|
this.getConditions(); //空调列表 |
|
}, |
|
}, |
|
openStatus(newVal, oldVal) { |
|
bfHelper.clearTags(); |
|
this.allDatas.forEach((item) => { |
|
bfHelper.customTag( |
|
{ x: item.xmove, y: item.ymove, z: item.zmove }, |
|
null, |
|
item.funcCat == 1 ? this.getContent(item) : item.funcCat == 2 ? this.getOAContent(item) : this.getMbContent(item) |
|
); |
|
}); |
|
}, |
|
clickCode(newVal, oldVal) { |
|
bfHelper.clearTags(); |
|
if (this.conditionNum == 1) { |
|
bfHelper.customTag( |
|
this.position, |
|
null, |
|
this.testObject1.funcCat == 1 ? this.getContent(this.testObject1) : this.testObject1.funcCat == 2 ? this.getOAContent(this.testObject1) : this.getMbContent(this.testObject1) |
|
); |
|
} else if (this.conditionNum == 2) { |
|
this.allDatas.forEach((item) => { |
|
bfHelper.customTag( |
|
{ x: item.xmove, y: item.ymove, z: item.zmove }, |
|
null, |
|
item.funcCat == 1 ? this.getContent(item) : item.funcCat == 2 ? this.getOAContent(item) : this.getMbContent(item) |
|
); |
|
}); |
|
} |
|
}, |
|
//模型是否加载完成监听 |
|
"$store.state.bfHelperState.bfState": { |
|
immediate: true, |
|
handler(newval, olval) { |
|
if (newval) { |
|
// 模型恢复全部状态 |
|
bfHelper.resetStatus(2); |
|
bfHelper.extObjMngClear(); //清除外部构件 |
|
// this.initial(); |
|
if (newval == 1) { |
|
// 查看管线 |
|
// 滚轮设置透明度 |
|
if (this.bimModel == 1) { |
|
window.sessionStorage.setItem( |
|
"camera", |
|
JSON.stringify(bfHelper.getCameraStatus()) |
|
); |
|
let build = sessionStorage.getItem("build"); |
|
let floor = sessionStorage.getItem("floor"); |
|
// console.log(build,floor) |
|
if (build) { |
|
if (build == 10) { |
|
setTimeout(() => { |
|
this.setTowerKT("07"); |
|
this.$refs.clickcp.active = 26; |
|
this.$refs.clickcp.tower = 9; |
|
}, 300); |
|
bfHelper.lookPipeline2(null, null, build - 1, null, "空调"); |
|
// bfHelper.setCameraStatus(bfHelper.lightCamera[6]); |
|
} else if (build == 26) { |
|
// bfHelper.resetStatus(2); |
|
bfHelper.lookEquipmentCop("空调"); |
|
setTimeout(() => { |
|
this.setTowerKT(); |
|
this.initial(); |
|
}, 300); |
|
bfHelper.setOpacityFun(); |
|
} else { |
|
if (floor.indexOf("undefined") == -1) { |
|
setTimeout(() => { |
|
this.setTowerKT("0" + build, "0" + floor); |
|
this.$refs.clickcp.active = commonValue.activeValue( |
|
Number(build), |
|
Number(floor) |
|
); |
|
this.$refs.clickcp.tower = commonValue.towerValue(build); |
|
}, 300); |
|
bfHelper.lookPipeline2( |
|
null, |
|
null, |
|
build - 1, |
|
floor, |
|
"空调" |
|
); |
|
} else { |
|
setTimeout(() => { |
|
this.setTowerKT("0" + build); |
|
this.$refs.clickcp.active = commonValue.activeValue( |
|
Number(build), |
|
null |
|
); |
|
this.$refs.clickcp.tower = commonValue.towerValue(build); |
|
}, 300); |
|
bfHelper.lookPipeline2(null, null, build - 1, floor, "空调"); |
|
// bfHelper.setCameraStatus(bfHelper.lightCamera[build - 1]); |
|
} |
|
} |
|
} else { |
|
bfHelper.lookEquipmentCop("空调"); |
|
this.getNavigationMap(); |
|
bfHelper.setOpacityFun(); |
|
// setTimeout(() => { |
|
this.initial(); |
|
// },300) |
|
} |
|
// this.initial() |
|
} else { |
|
} |
|
} else { |
|
} |
|
} |
|
}, |
|
}, |
|
}, |
|
beforeDestroy() { |
|
console.log('销毁interval') |
|
if (this.setInterval) { |
|
clearInterval(this.setInterval); |
|
} |
|
}, |
|
created() { |
|
this.getConditions(); //空调列表 |
|
this.getAirWarnList();//告警列表 |
|
this.setInterval = setInterval(() => { |
|
this.getConditions(); //空调列表 |
|
this.getAirWarnList();//告警列表 |
|
}, 3600000); |
|
}, |
|
mounted() { |
|
this.getNavigationMap(); |
|
}, |
|
|
|
methods: { |
|
//关闭告警 - 重新查询告警列表 |
|
doCancelWarn(id) { |
|
getCancelWarn(id).then((res) => { |
|
this.getAirWarnList(); |
|
}) |
|
}, |
|
//跳转历史告警列表 |
|
goMoreWarnList() { |
|
const routerUrl = this.$router.resolve({ path: '/equipment/warnHistory', query: { classCode: '0900', area: this.bimModel } }); |
|
window.open(routerUrl.href, "_blank"); |
|
}, |
|
// 报警记录-20221031改版 |
|
getAirWarnList() { |
|
getAirWarnList({ |
|
area: this.bimModel, |
|
build: this.build ? this.build : "", |
|
floor: this.floor ? this.floor : "", |
|
}).then((res) => { |
|
this.listData = res.data.data.warnEquipList; |
|
this.normalTotal = res.data.data.normalEquipNumber; |
|
this.warnEquip = res.data.data.warnEquipEquipNumber; |
|
for (let i = 0; i < this.listData.length; i++) { |
|
this.listData[i].showAlert = false; |
|
} |
|
}); |
|
}, |
|
// 设备信息、告警信息 |
|
getLifLists() { |
|
getLifList(this.bimModel).then((res) => { |
|
if (res.data.code == 200) { |
|
this.arr = res.data.data; |
|
this.setLiftColor(this.arr); |
|
} |
|
}); |
|
}, |
|
setLiftColor(arr) { |
|
let arrs = []; |
|
for (let i = 0; i < arr.length; i++) { |
|
if (arr[i].status != 90000) { |
|
arrs.push(arr[i]); |
|
} |
|
} |
|
|
|
// this.listData = arrs; |
|
|
|
for (let j = 0; j < this.listData.length; j++) { |
|
this.listData[j].showAlert = false; |
|
} |
|
let offList = []; |
|
let bjList = []; |
|
let normalList = []; |
|
for (let i = 0; i < arr.length; i++) { |
|
let objectId = bfHelper.getExternalComponentId(arr[i].modelId); |
|
if (arr[i].status == 90000) { |
|
normalList.push(objectId); |
|
} else if (arr[i].status == 90001) { |
|
offList.push(objectId); |
|
} else { |
|
bjList.push(objectId); |
|
} |
|
} |
|
bfHelper.restoreColor(normalList); |
|
bfHelper.setFlicker(bjList, "#ff0000", 100); |
|
bfHelper.cancelFlicker(normalList); |
|
bfHelper.setColor("#a5bbe5", offList); |
|
}, |
|
getNavigationMap() { |
|
commonValue.getNavigationMap("water"); |
|
}, |
|
// 接收子组件当前点击楼号 |
|
setTowerKT(i, j) { |
|
this.current = 1; //当前页 |
|
this.total = 0; //总条目数 |
|
this.build = i; |
|
this.floor = j; |
|
if (this.bimModel == 1) { |
|
commonValue.getUpdateMap("water", i, j); |
|
this.removeEvent(); |
|
this.getConditions(); |
|
|
|
window.addEventListener("click", this.addEvent); |
|
this.conditionNum = 2; |
|
} |
|
}, |
|
|
|
getConditions() { |
|
if (this.bimModel == 1) { |
|
openConditionsList( |
|
this.current, |
|
this.size, |
|
1, |
|
this.build ? this.build : "", |
|
this.floor ? this.floor : "" |
|
).then((res) => { |
|
if (this.build && this.floor) { |
|
this.tableData = res.data.data.records.slice( |
|
(this.current - 1) * this.size, |
|
this.current * this.size |
|
); |
|
this.allDatas = res.data.data.records; |
|
bfHelper.clearTags(); |
|
res.data.data.records.forEach((item) => { |
|
bfHelper.customTag( |
|
{ |
|
x: item.xmove, |
|
y: item.ymove, |
|
z: item.zmove, |
|
}, |
|
null, |
|
item.funcCat == 1 ? this.getContent(item) : item.funcCat == 2 ? this.getOAContent(item) : this.getMbContent(item) |
|
); |
|
}); |
|
} else { |
|
// bfHelper.clearTags(); |
|
this.tableData = res.data.data.records; |
|
} |
|
|
|
this.total = res.data.data.total; |
|
}); |
|
} |
|
}, |
|
changeMode(mode) { |
|
//改变空调模式 |
|
if (this.testObject1.open == 1) { |
|
this.testObject1.mode = mode; |
|
if (this.testObject1.funcCat == 3) { |
|
//lora面板 |
|
setLoraModel(this.testObject1.code, this.testObject1.mode).then(res => { |
|
}) |
|
return; |
|
} |
|
var arr = bfHelper.getAll(); |
|
bfHelper.clearTags(); |
|
if (arr.length < 2) { |
|
bfHelper.customTag( |
|
{ |
|
x: this.testObject1.xmove, |
|
y: this.testObject1.ymove, |
|
z: this.testObject1.zmove, |
|
}, |
|
null, |
|
this.getContent(this.testObject1) |
|
); |
|
} else { |
|
this.allDatas.forEach((item) => { |
|
if (item.code == this.clickCode) { |
|
item.mode = mode; |
|
} |
|
bfHelper.customTag( |
|
{ |
|
x: item.xmove, |
|
y: item.ymove, |
|
z: item.zmove, |
|
}, |
|
null, |
|
item.funcCat == 1 ? this.getContent(item) : item.funcCat == 2 ? this.getOAContent(item) : this.getMbContent(item) |
|
); |
|
}); |
|
} |
|
setConditionMode(this.testObject1.code, this.testObject1.mode).then( |
|
(res) => { |
|
if (res.data.code == 200) { |
|
this.getConditions(); |
|
} |
|
} |
|
); |
|
} |
|
}, |
|
descreaseTemper() { |
|
//减温度 |
|
if (this.testObject1.open == 1) { |
|
if (this.testObject1.agentCtrl == 0) { |
|
this.$message.error("暂无设备控制权限！"); |
|
} else { |
|
this.testObject1.temSetting--; |
|
if (this.testObject1.temSetting <= 16) { |
|
this.testObject1.temSetting = 16; |
|
} |
|
if (this.testObject1.funcCat == 3) { |
|
//lora面板 |
|
setLoraTemp(this.testObject1.code, this.testObject1.temSetting).then(res => { |
|
if (res.data.code == 200) { |
|
this.$message.success('温度设置成功'); |
|
} else { |
|
this.$message.error('温度设置失败'); |
|
this.testObject1.temSetting++; |
|
} |
|
}) |
|
return; |
|
} |
|
setConditionTemDown( |
|
this.testObject1.code, |
|
this.testObject1.temSetting |
|
).then((res) => { |
|
if (res.data.code == 200) { |
|
this.getConditions(); |
|
} |
|
}); |
|
} |
|
} |
|
}, |
|
plusTemper() { |
|
//加温度 |
|
if (this.testObject1.open == 1) { |
|
if (this.testObject1.agentCtrl == 0) { |
|
this.$message.error("暂无设备控制权限！"); |
|
} else { |
|
this.testObject1.temSetting++; |
|
if (this.testObject1.temSetting >= 30) { |
|
this.testObject1.temSetting = 30; |
|
} |
|
if (this.testObject1.funcCat == 3) { |
|
//lora面板 |
|
setLoraTemp(this.testObject1.code, this.testObject1.temSetting).then(res => { |
|
if (res.data.code == 200) { |
|
this.$message.success('温度设置成功'); |
|
} else { |
|
this.$message.error('温度设置失败'); |
|
this.testObject1.temSetting--; |
|
} |
|
}) |
|
return; |
|
} |
|
setConditionTemUp( |
|
this.testObject1.code, |
|
this.testObject1.temSetting |
|
).then((res) => { |
|
if (res.data.code == 200) { |
|
this.getConditions(); |
|
} |
|
}); |
|
} |
|
} |
|
}, |
|
decreaseWind() { |
|
//减风速 |
|
if (this.testObject1.open == 1) { |
|
this.testObject1.speed--; |
|
if (this.testObject1.speed <= 0) { |
|
this.testObject1.speed = 0; |
|
} |
|
if (this.testObject1.funcCat == 3) { |
|
//lora面板 |
|
setLoraSpeed(this.testObject1.code, this.testObject1.speed).then(res => { |
|
}) |
|
return; |
|
} |
|
setConditionSpeedDown( |
|
this.testObject1.code, |
|
this.testObject1.speed |
|
).then((res) => { |
|
if (res.data.code == 200) { |
|
this.getConditions(); |
|
} |
|
}); |
|
} |
|
}, |
|
plusWind() { |
|
//加风速 |
|
if (this.testObject1.open == 1) { |
|
this.testObject1.speed++; |
|
if (this.testObject1.speed >= 3) { |
|
this.testObject1.speed = 3; |
|
} |
|
if (this.testObject1.funcCat == 3) { |
|
//lora面板 |
|
setLoraSpeed(this.testObject1.code, this.testObject1.speed).then(res => { |
|
}) |
|
return; |
|
} |
|
setConditionSpeedUp(this.testObject1.code, this.testObject1.speed).then( |
|
(res) => { |
|
if (res.data.code == 200) { |
|
this.getConditions(); |
|
} |
|
} |
|
); |
|
} |
|
}, |
|
closeCondition() { |
|
if (this.testObject1.agentCtrl == 0) { |
|
this.$message.error("暂无设备控制权限！"); |
|
} else { |
|
if (this.testObject1.funcCat == 3) { |
|
//lora面板 |
|
setLoraStatus(this.testObject1.code, 0).then(res => { |
|
this.testObject1.open = 2; |
|
}) |
|
return; |
|
} |
|
getConditionClose(this.testObject1.code).then((res) => { |
|
if (res.data.code == 200) { |
|
if (res.data.data) { |
|
this.getConditions(); |
|
this.testObject1.open = 2; |
|
var arr = bfHelper.getAll(); |
|
bfHelper.clearTags(); |
|
if (arr.length < 2) { |
|
bfHelper.customTag( |
|
{ |
|
x: this.testObject1.xmove, |
|
y: this.testObject1.ymove, |
|
z: this.testObject1.zmove, |
|
}, |
|
null, |
|
this.testObject1.funcCat == 1 ? this.getContent(this.testObject1) : this.testObject1.funcCat == 2 ? this.getOAContent(this.testObject1) : this.getMbContent(this.testObject1) |
|
); |
|
} else { |
|
this.allDatas.forEach((item) => { |
|
if (item.code == this.clickCode) { |
|
item.open = 2; |
|
} |
|
bfHelper.customTag( |
|
{ |
|
x: item.xmove, |
|
y: item.ymove, |
|
z: item.zmove, |
|
}, |
|
null, |
|
item.funcCat == 1 ? this.getContent(item) : item.funcCat == 2 ? this.getOAContent(item) : this.getMbContent(item) |
|
); |
|
}); |
|
} |
|
} else { |
|
this.$message.warning(res.data.msg); |
|
} |
|
} |
|
}); |
|
} |
|
}, |
|
openCondition() { |
|
if (this.testObject1.agentCtrl == 0) { |
|
this.$message.error("暂无设备控制权限！"); |
|
} else { |
|
if (this.testObject1.funcCat == 3) { |
|
//lora面板 |
|
setLoraStatus(this.testObject1.code, 1).then(res => { |
|
this.testObject1.open = 1; |
|
}) |
|
return; |
|
} |
|
getConditionOpen(this.testObject1.code).then((res) => { |
|
if (res.data.code == 200) { |
|
if (res.data.data) { |
|
this.getConditions(); |
|
this.testObject1.open = 1; |
|
var arr = bfHelper.getAll(); |
|
bfHelper.clearTags(); |
|
if (arr.length < 2) {getOAContent |
|
bfHelper.customTag( |
|
{ |
|
x: this.testObject1.xmove, |
|
y: this.testObject1.ymove, |
|
z: this.testObject1.zmove, |
|
}, |
|
null, |
|
this.testObject1.funcCat == 1 ? this.getContent(this.testObject1) : this.testObject1.funcCat == 2 ? this.getOAContent(this.testObject1) : this.getMbContent(this.testObject1) |
|
); |
|
} else { |
|
this.allDatas.forEach((item) => { |
|
if (item.code == this.clickCode) { |
|
item.open = 1; |
|
} |
|
bfHelper.customTag( |
|
{ |
|
x: item.xmove, |
|
y: item.ymove, |
|
z: item.zmove, |
|
}, |
|
null, |
|
item.funcCat == 1 ? this.getContent(item) : item.funcCat == 2 ? this.getOAContent(item) : this.getMbContent(item) |
|
); |
|
}); |
|
} |
|
} |
|
} else { |
|
this.$message.warning(res.data.msg); |
|
} |
|
}); |
|
} |
|
}, |
|
testaaa(a) { |
|
console.log(a); |
|
}, |
|
// 设置单元格的样式 |
|
cellstyle({ row, column, rowIndex, columnIndex }) { |
|
if (columnIndex == 2) { |
|
return "text-align: center;padding:0;border-right:1px solid #2083ec;border-left:1px solid #2083ec;border-bottom:1px solid #2083ec;font-size: 0.75rem;color: #ffffff;height: 1.938rem;linh-height: 1.938rem;background-color: transparent;"; |
|
} else { |
|
return "text-align: center;padding:0;border-left:1px solid #2083ec;border-right:1px solid #2083ec;border-bottom:1px solid #2083ec;font-size: 0.75rem;color: #ffffff;height: 1.938rem;linh-height: 1.938rem;background-color: transparent;"; |
|
} |
|
}, |
|
// 定义表格的头部样式 |
|
tableHeaderColor({ row, rowIndex }) { |
|
if (rowIndex === 0) { |
|
return "line-height:2rem;height:2rem;padding: 0;border:none;background-color: #2083ec;color:#fff;font-size:0.875rem;text-align: center;"; |
|
} |
|
}, |
|
// 页码改变时触发 |
|
handleCurrentChange(val) { |
|
this.current = val; |
|
this.getConditions(); |
|
}, |
|
selectId(selection, row) { |
|
// console.log(selection,row) |
|
}, |
|
handleSelect(selection) { |
|
var arr = []; |
|
if (selection.length != 0) { |
|
selection.forEach((item) => { |
|
arr.push(item.id); |
|
}); |
|
} |
|
this.chooseId = arr; |
|
}, |
|
clickConditions(row) { |
|
getConditionData(row.code).then((res) => { |
|
if (res.data.code == 200) { |
|
this.testObject1 = res.data.data; |
|
this.$refs.clickcp.active = commonValue.activeValue( |
|
Number(row.build), |
|
Number(row.floored) |
|
); |
|
this.$refs.clickcp.tower = commonValue.towerValue(row.build); |
|
bfHelper.clearDrawableContainer(); |
|
bfHelper.clearTags(); |
|
bfHelper.lookPipeline2( |
|
null, |
|
null, |
|
Number(row.build) - 1, |
|
Number(row.floored), |
|
"空调" |
|
); |
|
window.sessionStorage.setItem("build", Number(row.build)); |
|
window.sessionStorage.setItem("floor", Number(row.floored)); |
|
commonValue.getUpdateMap("water", row.build, row.floored); |
|
// this.updateMap(row.build,row.floored) |
|
this.position = { |
|
x: row.xmove, |
|
y: row.ymove, |
|
z: row.zmove, |
|
}; |
|
// console.log(this.position) |
|
// console.log(this.getContent(this.testObject1)) |
|
bfHelper.customTag( |
|
this.position, |
|
null, |
|
row.funcCat == 1 ? this.getContent(this.testObject1) : row.funcCat == 2 ? this.getOAContent(this.testObject1) : this.getMbContent(this.testObject1) |
|
); |
|
this.removeEvent(); |
|
window.addEventListener("click", this.addEvent); |
|
this.conditionNum = 1; |
|
} |
|
}); |
|
}, |
|
// addClick() { |
|
// window.addEventListener('click', (e) => { |
|
// // console.log(e.target.id) |
|
|
|
// }) |
|
// }, |
|
addEvent(e) { |
|
let code = null; |
|
if (e.target.id.indexOf("condition") != -1) { |
|
code = e.target.id.substring(10); |
|
} |
|
if (e.target.id.indexOf("temper") != -1) { |
|
code = e.target.id.substring(7); |
|
} |
|
if (e.target.id.indexOf("tempea") != -1) { |
|
code = e.target.id.substring(7); |
|
} |
|
if (e.target.id.indexOf("tempec") != -1) { |
|
code = e.target.id.substring(7); |
|
} |
|
if (e.target.id.indexOf("tempac") != -1) { |
|
code = e.target.id.substring(7); |
|
} |
|
if (e.target.id.indexOf("temped") != -1) { |
|
code = e.target.id.substring(7); |
|
} |
|
if (code) { |
|
let funcCatObj = this.allDatas.find(item => { return item.code == code }); |
|
if (funcCatObj && funcCatObj.funcCat == 3) { |
|
//lora面板 |
|
queryLoraAll(code).then(res => { |
|
this.testObject1 = res.data.data; |
|
this.testObject1.funcCat = 3; |
|
if ( |
|
e.target.id == "condition-" + code || |
|
e.target.id == "temper-" + code || |
|
e.target.id == "tempea-" + code || |
|
e.target.id == "tempec-" + code || |
|
e.target.id == "tempac-" + code || |
|
e.target.id == "temped-" + code |
|
) { |
|
this.isControl = true; |
|
this.clickCode = code; |
|
} |
|
}) |
|
return; |
|
} |
|
getConditionData(code).then((res) => { |
|
if (res.data.code == 200) { |
|
this.testObject1 = res.data.data; |
|
if(this.testObject1.getConditionData == 2){ |
|
//新风不需要控制 |
|
return; |
|
} |
|
if ( |
|
e.target.id == "condition-" + code || |
|
e.target.id == "temper-" + code || |
|
e.target.id == "tempea-" + code || |
|
e.target.id == "tempec-" + code || |
|
e.target.id == "tempac-" + code || |
|
e.target.id == "temped-" + code |
|
) { |
|
this.isControl = true; |
|
this.clickCode = code; |
|
} |
|
} |
|
}); |
|
} |
|
}, |
|
removeEvent() { |
|
window.removeEventListener("click", this.addEvent); |
|
}, |
|
getContent(testObject) { |
|
// console.log(this.clickCode,testObject.code) |
|
let button = require("../../../public/img/monitoring/electricity/off-button.png"); |
|
let greenWind = require("../../../public/img/monitoring/electricity/green-wind.png"); |
|
let decrease = require("../../../public/img/monitoring/electricity/jian.png"); |
|
let plus = require("../../../public/img/monitoring/electricity/jia.png"); |
|
let wind = require("../../../public/img/monitoring/electricity/wind.png"); |
|
let hot = require("../../../public/img/monitoring/electricity/hot.png"); |
|
let cold = require("../../../public/img/monitoring/electricity/cold.png"); |
|
let bgImg1 = require("../../../public/img/monitoring/electricity/condition1.png"); |
|
let bgImg2 = require("../../../public/img/monitoring/electricity/condition2.png"); |
|
let content = `<div class="lift-block" style="position:relative;width:133px"> |
|
<div style="background-image:url(${testObject.open == 1 ? bgImg1 : bgImg2 |
|
});width:133px;height:40px;background-size:100% 100%;background-position:-5px 0;color:white" id="temped-${testObject.code |
|
}"> |
|
<div id="condition-${testObject.code |
|
}" style="width:103px;position:absolute;height:40px;display:flex;left:30px;top:0;justify-content: space-between;align-items:center;cursor: pointer"> |
|
<span style="font-size:14px;display:${testObject.code == this.clickCode ? "none" : "inline-block" |
|
}" > |
|
<span style="font-size:16px;font-family:fantasy;" id="temper-${testObject.code |
|
}">${testObject.temSetting}</span> |
|
<span id="tempec-${testObject.code |
|
}">℃/</span><span style="font-size:16px;font-family:fantasy;" id="tempea-${testObject.code |
|
}">${testObject.temCur}</span><span id="tempac-${testObject.code |
|
}"> ℃</span> |
|
</span> |
|
<span style="font-size:14px;display:${testObject.code == this.clickCode ? "inline-block" : "none" |
|
}" id="temper-${testObject.code}">${testObject.name}</span> |
|
</div> |
|
</div> |
|
|
|
</div>`; |
|
|
|
return content; |
|
}, |
|
getContent1() { |
|
let bgImg1 = require("../../../public/img/monitoring/electricity/condition1.png"); |
|
let bgImg2 = require("../../../public/img/monitoring/electricity/condition2.png"); |
|
let content = `<div class="lift-block" style="position:relative;width:133px"> |
|
<div style="background-image:url(${this.testObject.open == 1 ? bgImg1 : bgImg2 |
|
});width:133px;height:40px;background-size:100% 100%;color:white"> |
|
<div style="width:93px;position:absolute;height:40px;display:flex;left:40px;top:0;justify-content: space-between;align-items:center;cursor: pointer"> |
|
<span style="font-size:14px;" >${this.testObject.name}</span> |
|
</div> |
|
</div> |
|
|
|
</div>`; |
|
|
|
return content; |
|
}, |
|
//空调面板 |
|
getMbContent(testObject) { |
|
// console.log('空调面板',testObject) |
|
let bgImg1 = require("../../../public/img/monitoring/electricity/condition_mb.png"); |
|
let content = `<div class="lift-block" style="position:relative;width:100px"> |
|
<div id="temped-${testObject.code}" style="background:#07a7ff url(${bgImg1}) 5px center no-repeat;width:100px;height:34px;color:white;font-size:18px;" id="temped-${testObject.code |
|
}"> |
|
<div id="condition-${testObject.code |
|
}" style="width:60px;position:absolute;height:34px;line-height: 34px;left:40px;top:0;cursor: pointer"> |
|
<span id="temper-${testObject.code}" style="font-size:18px;font-family:fantasy;">${testObject.name}</span> |
|
</div> |
|
</div> |
|
|
|
</div>`; |
|
|
|
return content; |
|
}, |
|
//空调主机定位标签样式 |
|
getOAContent(objData) { |
|
let content = `<div class="leadTips" style="transform: translateY(-72px);"> |
|
<div style="display: flex;width:max-content"> |
|
<img src="${require(objData.open == 1 |
|
? "../../../public/img/monitoring/electricity/customTag1.png" |
|
: "../../../public/img/monitoring/electricity/offline2_2.png")}" style="width:87px;height:53px;"/> |
|
<div style="margin-top: -42px;"> |
|
<div style="width: 185px;height: 46px;background: url('${require(objData.open == 1 |
|
? "../../../public/img/monitoring/electricity/customTag1-1.png" |
|
: "../../../public/img/monitoring/electricity/offline2.png")}');"> |
|
<span style="padding-left: 36px;line-height: 32px;font-size: 15px;color: white;">${objData.name}</span> |
|
</div> |
|
<div style="margin-top: 5px;box-sizing: border-box;color: #ffffff;width: 185px;padding: 0 15px;background-color: ${objData.open == 1 |
|
? "rgba(30, 57, 102, 0.8)" |
|
: "rgba(96, 96, 96, 0.8)" |
|
};"> |
|
<div style="padding: 5px 0;display: flex;align-items: center;justify-content: space-between;"> |
|
<span style="opacity: 0.5;font-size: 12px;">设备状态:</span> |
|
<span style="font-size: 15px;">${objData.open == 1 ? "开" : "关"}</span> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
</div>`; |
|
return content; |
|
}, |
|
// 初始化标签 |
|
initial() { |
|
if (this.bimModel == 1) { |
|
getFloorTemp(this.bimModel).then((res) => { |
|
let num = []; |
|
const data = res.data.data; |
|
let position = bfHelper.ywqThreeLevelPt; |
|
for (let i = 0; i < data.length; i++) { |
|
let content = `<div class="leadTips" style="transform: translateY(-40px);"> |
|
<div style="display: flex;width:max-content"> |
|
<div style="display: flex;align-items: center;justify-content: center;color:#fff;font-size:18px;width:110px;height:40px;background-color: rgba(7, 67, 151, 0.8);box-shadow: #009cff 0px 0px 15px inset;border: 1px solid #00BAFE;border-radius: 12px;"> |
|
<span>温度:${data[i].temp}℃</span> |
|
</div> |
|
</div> |
|
</div>`; |
|
bfHelper.customTag(position[i], null, content); |
|
} |
|
}); |
|
} |
|
}, |
|
}, |
|
}; |
|
</script> |
|
|
|
<style scoped lang="scss"> |
|
.switch { |
|
z-index: 99; |
|
position: absolute; |
|
right: 40px; |
|
bottom: 41px; |
|
// background-image: url(../../../public/img/monitoring/ktbg.png); |
|
width: 402px; |
|
height: 342px; |
|
background: url(../../../public/img/monitoring/electricity/newbg.png) no-repeat; |
|
background-size: cover; |
|
// padding-bottom: 30px; |
|
// background-size: 100% 100%; |
|
|
|
.title { |
|
margin: 1rem 0 2rem 1.25rem; |
|
color: #fff; |
|
font-size: 15px; |
|
font-weight: bold; |
|
|
|
img { |
|
display: block; |
|
width: 16px; |
|
margin-right: 10px; |
|
} |
|
} |
|
|
|
.select { |
|
width: 87%; |
|
margin: 1.563rem auto 0; |
|
|
|
.name { |
|
font-size: 0.875rem; |
|
color: #07e6ed; |
|
} |
|
|
|
.btn { |
|
width: 3.375rem; |
|
height: 1.125rem; |
|
background-color: rgba(7, 230, 237, 0.6); |
|
border-radius: 0.313rem; |
|
border: 0.063rem solid #07e5ed; |
|
text-align: center; |
|
font-size: 0.875rem; |
|
padding: 5px 10px; |
|
color: #ffffff; |
|
} |
|
|
|
/deep/ .el-input__inner { |
|
background-color: transparent; |
|
border-radius: 0.313rem; |
|
border: solid 0.063rem #07e6ed; |
|
height: 1.888rem; |
|
color: #fff; |
|
line-height: 1.888rem; |
|
font-size: 0.75rem; |
|
} |
|
|
|
/deep/ .el-select .el-input .el-select__caret { |
|
color: #07e6ed; |
|
} |
|
|
|
/deep/ .el-input__icon { |
|
line-height: 1.888rem; |
|
} |
|
|
|
/deep/ input::-webkit-input-placeholder { |
|
color: #d1d5d5; |
|
} |
|
|
|
/deep/ input::-moz-input-placeholder { |
|
color: #d1d5d5; |
|
} |
|
|
|
/deep/ input::-ms-input-placeholder { |
|
color: #d1d5d5; |
|
} |
|
} |
|
|
|
.tabBox { |
|
border: 1px solid #07a7ff; |
|
width: 21.563rem; |
|
margin: 1rem auto 0; |
|
|
|
/deep/ .el-table--enable-row-hover .el-table__body tr:hover>td { |
|
background-color: transparent !important; |
|
} |
|
|
|
/deep/ .el-table__header-wrapper .has-gutter th { |
|
border-bottom: none; |
|
padding: 0; |
|
text-align: center; |
|
} |
|
|
|
/deep/ .el-table__header-wrapper .has-gutter th .cell { |
|
line-height: 31px; |
|
padding: 0; |
|
background-color: #07a7ff; |
|
color: white; |
|
} |
|
|
|
/deep/ .tataitab .el-table__header-wrapper .has-gutter th .cell { |
|
background: rgb(33, 110, 196); |
|
} |
|
|
|
/deep/ .tataitab .el-table__header-wrapper .has-gutter th:nth-of-type(even) .cell { |
|
color: rgb(31, 91, 180); |
|
} |
|
|
|
/deep/ .el-table__body-wrapper.is-scrolling-none .el-table__row:nth-of-type(odd) { |
|
color: white; |
|
background-color: rgba($color: #1e419d, $alpha: 1); |
|
} |
|
|
|
/deep/ .el-table__body-wrapper.is-scrolling-none .el-table__row:nth-of-type(even) { |
|
background-color: rgba($color: #0d318b, $alpha: 1); |
|
color: white; |
|
} |
|
|
|
/deep/ .tataitab .el-table__body-wrapper.is-scrolling-none .el-table__row:nth-of-type(odd) { |
|
color: white; |
|
background-color: rgba($color: #384c6f, $alpha: 1); |
|
} |
|
|
|
/deep/ .tataitab .el-table__body-wrapper.is-scrolling-none .el-table__row:nth-of-type(even) { |
|
background-color: rgba($color: #1f355c, $alpha: 1); |
|
color: white; |
|
} |
|
|
|
/deep/ .el-table__body-wrapper.is-scrolling-none .el-table__row td { |
|
border-bottom: none; |
|
padding: 0; |
|
text-align: center; |
|
} |
|
|
|
/deep/ .el-table__body-wrapper.is-scrolling-none .el-table__row td .cell { |
|
display: flex; |
|
line-height: 36px; |
|
align-content: center; |
|
justify-content: center; |
|
padding: 0; |
|
} |
|
|
|
/deep/ .el-table__body-wrapper.is-scrolling-none .el-table__empty-block { |
|
background-color: #3656ae; |
|
height: 252px !important; |
|
} |
|
|
|
/deep/ .el-table::before { |
|
background-color: transparent; |
|
} |
|
} |
|
|
|
.pagination { |
|
position: absolute; |
|
right: 15px; |
|
bottom: 8px; |
|
|
|
.el-pagination.is-background { |
|
display: flex; |
|
justify-content: flex-end; |
|
margin-top: 1rem; |
|
} |
|
} |
|
|
|
/deep/ .el-pagination.is-background .btn-next, |
|
/deep/ .el-pagination.is-background .btn-prev, |
|
/deep/ .el-pagination.is-background .el-pager li { |
|
min-width: 20px; |
|
height: 20px; |
|
line-height: 20px; |
|
font-size: 12px; |
|
} |
|
|
|
/deep/ .el-pagination__total { |
|
height: 20px; |
|
line-height: 20px; |
|
color: #07e6ed; |
|
} |
|
|
|
// .box { |
|
// margin: 20px 0; |
|
|
|
// span { |
|
// margin-right: 10px; |
|
// color: #fff; |
|
|
|
// } |
|
// } |
|
} |
|
|
|
.device-manager { |
|
z-index: 99; |
|
position: absolute; |
|
right: 40px; |
|
bottom: 41px; |
|
background-image: url(../../../public/img/monitoring/ktbg.png); |
|
width: 25.25rem; |
|
height: auto; |
|
padding-bottom: 30px; |
|
background-size: 100% 100%; |
|
|
|
.conditioner-info { |
|
display: flex; |
|
align-items: flex-end; |
|
margin: 1rem 0 1.5rem 0; |
|
padding: 0 30px; |
|
justify-content: space-between; |
|
|
|
>span { |
|
font-size: 30px; |
|
color: white; |
|
} |
|
|
|
>div { |
|
margin-left: 20px; |
|
color: white; |
|
font-size: 14px; |
|
|
|
.condition-status { |
|
display: flex; |
|
align-items: center; |
|
|
|
.circle { |
|
width: 10px; |
|
height: 10px; |
|
background-color: rgb(0, 230, 0); |
|
border-radius: 10px; |
|
margin-right: 8px; |
|
} |
|
} |
|
} |
|
} |
|
|
|
.condition-operator { |
|
display: flex; |
|
padding: 0 30px; |
|
justify-content: space-between; |
|
|
|
.operators { |
|
color: white; |
|
height: 186px; |
|
display: flex; |
|
flex-direction: column; |
|
justify-content: space-between; |
|
padding: 10px 0; |
|
|
|
div { |
|
display: flex; |
|
align-items: center; |
|
|
|
span { |
|
margin-left: 8px; |
|
} |
|
} |
|
} |
|
|
|
.wind-speed, |
|
.temperature { |
|
width: 47px; |
|
height: 186px; |
|
background-image: url(../../../public/img/monitoring/speedbg.png); |
|
background-size: 100% 100%; |
|
display: flex; |
|
padding: 15px 0; |
|
color: white; |
|
font-size: 14px; |
|
flex-direction: column; |
|
justify-content: space-between; |
|
align-items: center; |
|
} |
|
} |
|
} |
|
|
|
// 设备列表 |
|
.tab { |
|
z-index: 99; |
|
position: fixed; |
|
right: 40px; |
|
bottom: 15px; |
|
width: 402px; |
|
height: 342px; |
|
background: url(../../../public/img/monitoring/electricity/newbg.png); |
|
background-size: 100% 100%; |
|
|
|
.title { |
|
margin: 1rem 0 2rem 1.25rem; |
|
color: #fff; |
|
font-size: 15px; |
|
font-weight: bold; |
|
|
|
img { |
|
display: block; |
|
width: 16px; |
|
margin-right: 10px; |
|
} |
|
} |
|
|
|
.tabBox { |
|
width: 21.563rem; |
|
margin: 1rem auto 0; |
|
|
|
/deep/ .el-table--enable-row-hover .el-table__body tr:hover>td { |
|
background-color: transparent !important; |
|
} |
|
|
|
/deep/ .el-table__header-wrapper .has-gutter th { |
|
border-bottom: none; |
|
padding: 0; |
|
text-align: center; |
|
} |
|
|
|
/deep/ .el-table__header-wrapper .has-gutter th .cell { |
|
line-height: 31px; |
|
padding: 0; |
|
background-color: #07a7ff; |
|
color: white; |
|
} |
|
|
|
/deep/ .el-table__body-wrapper.is-scrolling-none .el-table__row:nth-of-type(odd) { |
|
color: white; |
|
background-color: rgba($color: #1e419d, $alpha: 1); |
|
} |
|
|
|
/deep/ .el-table__body-wrapper.is-scrolling-none .el-table__row:nth-of-type(even) { |
|
background-color: rgba($color: #0d318b, $alpha: 1); |
|
color: white; |
|
} |
|
|
|
/deep/ .el-table__body-wrapper.is-scrolling-none .el-table__row td { |
|
border-bottom: none; |
|
padding: 0; |
|
text-align: center; |
|
} |
|
|
|
/deep/ .el-table__body-wrapper.is-scrolling-none .el-table__row td .cell { |
|
display: flex; |
|
line-height: 36px; |
|
align-content: center; |
|
justify-content: center; |
|
} |
|
|
|
/deep/ .el-table__body-wrapper.is-scrolling-none .el-table__empty-block { |
|
background-color: #3656ae; |
|
height: 252px !important; |
|
} |
|
|
|
/deep/ .el-table::before { |
|
background-color: transparent; |
|
} |
|
} |
|
|
|
// 分页 |
|
.pagination { |
|
position: absolute; |
|
right: 15px; |
|
bottom: 8px; |
|
} |
|
|
|
.pagination .el-pagination.is-background { |
|
display: flex; |
|
justify-content: flex-end; |
|
} |
|
|
|
/deep/ .el-pagination.is-background .btn-next, |
|
/deep/ .el-pagination.is-background .btn-prev, |
|
/deep/ .el-pagination.is-background .el-pager li { |
|
min-width: 20px; |
|
height: 20px; |
|
line-height: 20px; |
|
font-size: 12px; |
|
} |
|
|
|
/deep/ .el-pagination__total { |
|
height: 20px; |
|
line-height: 20px; |
|
color: #07e6ed; |
|
} |
|
} |
|
|
|
.conditios-open { |
|
display: flex; |
|
justify-content: space-between; |
|
margin-top: -10px; |
|
margin-bottom: 10px; |
|
|
|
.open-txt { |
|
color: #95a1b7; |
|
line-height: 30px; |
|
} |
|
} |
|
|
|
.conditios-block { |
|
border: 6px solid rgb(121, 151, 203); |
|
padding: 40px 0; |
|
border-radius: 3px; |
|
|
|
.conditios-block-temper { |
|
color: rgb(43, 213, 42); |
|
display: flex; |
|
justify-content: space-around; |
|
align-items: center; |
|
} |
|
|
|
.conditios-block-temper1 { |
|
display: flex; |
|
justify-content: space-around; |
|
width: 100%; |
|
align-items: center; |
|
|
|
.conditios-block-temper1-left, |
|
.conditios-block-temper1-right { |
|
p { |
|
font-size: 13px; |
|
color: rgb(149, 161, 183); |
|
margin-bottom: 5px; |
|
display: flex; |
|
align-items: center; |
|
|
|
img { |
|
margin-right: 5px; |
|
} |
|
|
|
span { |
|
color: white; |
|
} |
|
} |
|
} |
|
|
|
.conditios-block-temper1-line { |
|
font-size: 20px; |
|
margin: 0; |
|
color: rgb(149, 161, 183); |
|
} |
|
} |
|
} |
|
|
|
.conditios-block-mode { |
|
display: flex; |
|
justify-content: space-between; |
|
width: 100%; |
|
align-items: center; |
|
margin-top: 10px; |
|
|
|
.conditios-block-mode-part { |
|
font-size: 13px; |
|
color: rgb(149, 161, 183); |
|
text-align: center; |
|
cursor: pointer; |
|
|
|
div { |
|
width: 90px; |
|
height: 40px; |
|
margin-bottom: 5px; |
|
background: rgba(121, 151, 203, 0.4); |
|
border-radius: 5px; |
|
display: flex; |
|
justify-content: space-around; |
|
align-items: center; |
|
|
|
img { |
|
width: 20px; |
|
height: 20px; |
|
} |
|
|
|
span { |
|
color: white; |
|
} |
|
} |
|
} |
|
} |
|
|
|
.conditios-block-wind { |
|
background: rgba(121, 151, 203, 0.4); |
|
padding: 5px 10px; |
|
margin-top: 20px; |
|
border-radius: 5px; |
|
display: flex; |
|
justify-content: space-between; |
|
align-items: center; |
|
color: white; |
|
} |
|
|
|
//空调控制 |
|
.tab_control { |
|
position: absolute; |
|
left: 105px; |
|
bottom: 41px; |
|
width: 244px; |
|
height: 333px; |
|
background: url(../../../public/img/monitoring/electricity/newbg1.png); |
|
background-size: 100% 100%; |
|
|
|
.title { |
|
margin: 1rem 0 2rem 1rem; |
|
color: #fff; |
|
font-size: 15px; |
|
font-weight: bold; |
|
|
|
img { |
|
display: block; |
|
width: 16px; |
|
margin-right: 10px; |
|
} |
|
} |
|
|
|
.open-txt { |
|
color: #fff; |
|
font-size: 14px; |
|
} |
|
|
|
.conditios-block { |
|
border-radius: 10px; |
|
margin: 1.1rem; |
|
padding: 0; |
|
} |
|
|
|
.conditios-block-temper { |
|
padding: 30px 15px 20px; |
|
} |
|
|
|
.conditios-block-temper1 { |
|
display: block; |
|
text-align: center; |
|
border-top: 1px solid rgba(55, 255, 255, 0.2); |
|
padding: 17px 0 5px 0; |
|
|
|
.conditios-block-temper1-left, |
|
.conditios-block-temper1-right { |
|
color: rgba(255, 255, 255, 0.5); |
|
font-size: 14px; |
|
margin-bottom: 0.6rem; |
|
|
|
img { |
|
vertical-align: middle; |
|
margin-right: 5px; |
|
} |
|
|
|
span { |
|
color: #fff; |
|
font-size: 15px; |
|
} |
|
} |
|
} |
|
} |
|
|
|
// 设备概况 |
|
.box2 { |
|
z-index: 99; |
|
background: url(../../../public/img/monitoring/electricity/genbag.png) no-repeat; |
|
background-size: 100% 100%; |
|
width: 402px; |
|
height: 450px; |
|
position: absolute; |
|
top: 150px; |
|
right: 40px; |
|
|
|
.title { |
|
margin: 17px 0 0 17px; |
|
font-size: 15px; |
|
font-weight: bold; |
|
color: #ffffff; |
|
|
|
img { |
|
margin-right: 5px; |
|
width: 20px; |
|
height: 19px; |
|
} |
|
} |
|
|
|
.state { |
|
margin-top: 30px; |
|
font-size: 28px; |
|
line-height: 17px; |
|
color: #ffffff; |
|
|
|
.zc { |
|
// padding-right: 36px; |
|
box-sizing: border-box; |
|
// justify-content: flex-end; |
|
background: url(../../../public/img/monitoring/electricity/normal.png) no-repeat; |
|
background-size: cover; |
|
width: 176px; |
|
height: 78px; |
|
} |
|
|
|
.lx { |
|
// padding-right: 36px; |
|
box-sizing: border-box; |
|
// justify-content: flex-end; |
|
background: url(../../../public/img/monitoring/electricity/guzhangbg.png) no-repeat; |
|
background-size: cover; |
|
width: 176px; |
|
height: 78px; |
|
} |
|
} |
|
|
|
.stateName { |
|
margin: 5px 0 20px; |
|
color: #2cd52c; |
|
font-size: 14px; |
|
display: flex; |
|
justify-content: space-around; |
|
|
|
.lx { |
|
// padding-left: 146px; |
|
// color: red; |
|
color: #ec9b28; |
|
} |
|
} |
|
|
|
.tab_box { |
|
width: 80%; |
|
display: flex; |
|
margin-top: 25px; |
|
margin-bottom: 30px; |
|
margin-left: 23px; |
|
color: #fff; |
|
|
|
.tab_one { |
|
cursor: pointer; |
|
} |
|
|
|
.tab_two { |
|
margin-left: 20px; |
|
} |
|
|
|
/deep/ .item .is-dot { |
|
background: red; |
|
border: none; |
|
} |
|
} |
|
|
|
.tit { |
|
margin: 0 auto 6px; |
|
width: 345px; |
|
height: 34px; |
|
line-height: 34px; |
|
background-color: #07a7ff; |
|
font-size: 14px; |
|
color: white; |
|
justify-content: space-around; |
|
|
|
&.tataitit { |
|
background: rgb(34, 110, 196); |
|
|
|
span { |
|
color: #1851ab; |
|
} |
|
} |
|
|
|
p { |
|
width: 33.3%; |
|
text-align: center; |
|
} |
|
|
|
span { |
|
color: silver; |
|
} |
|
} |
|
|
|
.noBjxx { |
|
color: white; |
|
font-size: 1rem; |
|
margin: 2.5rem 0 0; |
|
text-align: center; |
|
} |
|
|
|
.warp { |
|
height: 120px; |
|
width: 345px; |
|
margin: auto; |
|
overflow: hidden; |
|
|
|
.item { |
|
height: 40px; |
|
font-size: 14px; |
|
color: #9d9d9d; |
|
|
|
.alark-alert { |
|
position: absolute; |
|
width: 100%; |
|
height: 100%; |
|
background: rgba(11, 34, 74, 0.8); |
|
// display: flex; |
|
justify-content: space-around; |
|
align-items: center; |
|
color: #07e6ed; |
|
|
|
p { |
|
display: flex; |
|
align-items: center; |
|
|
|
img { |
|
margin-right: 7px; |
|
} |
|
} |
|
} |
|
|
|
.box { |
|
width: 100%; |
|
height: 34px; |
|
background-color: rgba($color: #0d318b, $alpha: 0.6); |
|
|
|
&.tataicon { |
|
background-color: rgba($color: #1f355c, $alpha: 1); |
|
|
|
span { |
|
color: #1851ab; |
|
} |
|
} |
|
|
|
.left { |
|
width: 33.3%; |
|
text-align: center; |
|
|
|
img { |
|
width: 16px; |
|
height: auto; |
|
margin: 0 5px 0 10px; |
|
} |
|
|
|
.message { |
|
flex: 1; |
|
white-space: nowrap; |
|
overflow: hidden; |
|
text-overflow: ellipsis; |
|
} |
|
} |
|
|
|
.data { |
|
width: 33.3%; |
|
text-align: center; |
|
} |
|
|
|
.time { |
|
width: 33.3%; |
|
text-align: center; |
|
} |
|
} |
|
} |
|
|
|
.item:hover { |
|
cursor: pointer; |
|
} |
|
} |
|
|
|
.more { |
|
justify-content: flex-end; |
|
font-size: 14px; |
|
color: #07e6ed; |
|
margin: 10px 27px 0 0; |
|
} |
|
} |
|
</style>
|
|
|