<!--
* @Author: your name
* @Date: 2022-01-26 20:07:52
* @LastEditTime: 2022-03-23 15:23:34
* @LastEditors: Please set LastEditors
* @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
* @FilePath: /test/hello-world/src/views/components/deviceA.vue
-->
<template>
<div class="devicea-wrapper">
<div class="title">
{{
deviceData.deviceName ? deviceData.deviceName : deviceData.stationName
}}
</div>
<div class="close" @click="close">
<!-- <img src="@/assets/mapImages/closeBtn.png" alt="" /> -->
<i class="el-icon-close" style="font-size:20px;color:#5dfefe;"></i>
</div>
<p style="background-image: linear-gradient(to right, #5dfefe, #071738); width:100%;height:1px;"></p>
<div>
<div class="top flex">
<div class="top-left">
<div class="group">
<div class="left">所属公司：</div>
<div class="right zzz">{{ companyType[deviceData.companyType] }}</div>
</div>
<div class="group">
<div class="left">备注：</div>
<div class="right zzz">{{ profile }}</div>
</div>
</div>
<div class="top-center">
<div class="group">
<div class="left">设备类型：</div>
<div class="right zzz">
{{ deviceType[deviceData.iconType] }}
</div>
</div>
<div class="group">
<div class="left last">设备地址：</div>
<div
v-if="deviceData.deviceAddr"
:title="deviceData.deviceAddr"
class="right last zzz"
>
{{ deviceData.deviceAddr || "-" }}
</div>
<div
v-else-if="deviceData.stationAddr"
:title="deviceData.stationAddr"
class="right last zzz"
>
{{ deviceData.stationAddr || "-" }}
</div>
<div class="right last zzz" v-else>-</div>
</div>
</div>
<div class="top-right">
<div class="left last">照片：</div>
<el-image
v-if="deviceData.iconUrl"
style="width: 80px; height: 50px"
:src="deviceData.iconUrl"
:preview-src-list="[deviceData.iconUrl ]"
:z-index="999999"
>
</el-image>
<div class="imgtext" v-else>暂无图片</div>
</div>
</div>
<!-- <div class="middle">{{ profile }}</div> -->
<div class="foot">
<div class="thead flex" v-if="list.length > 0">
<div class="first">设备类型</div>
<div>设备数量</div>
<div>在线设备</div>
<div>离线设备</div>
<!-- <div>历史报警</div>
<div>已处理报警</div> -->
<div class="last">报警中</div>
</div>
<template v-if="list.length > 0">
<div
class="tbody flex"
v-for="deviceData in list"
:key="deviceData.inAlarm + Math.random()"
>
<div v-unValue class="first zzz">
{{ typeList[deviceData.dataType] }}
</div>
<div v-unValue class="">{{ deviceData.numberPressureGauges }}</div>
<div v-unValue class="">
{{ deviceData.onlineEquipment }}
</div>
<div v-unValue class="">
{{ deviceData.offlineEquipment }}
</div>
<!-- <div v-unValue class="">
{{ deviceData.historicalAlarm }}
</div>
<div v-unValue class="">
{{ deviceData.alarmProcessed }}
</div> -->
<div v-unValue class="last">
{{ deviceData.inAlarm }}
</div>
</div>
</template>
</div>
</div>
<div style="width:100%;display: flex;">
<div class="btn" v-if="list.length > 0">
<div>感知设备</div>
</div>
<p style="width:83%;height:10px;background-color: #022346;margin-top: 22px;margin-left: -10px;"></p>
<div @click="btnClick">
<img @click="flag = !flag" src="../../assets/second/box-down.png" :class="{ 'arrowTransform': !flag, 'arrowTransformReturn': flag}" alt="" style="width:30px;height:30px;margin-top: 12px;cursor: pointer;">
</div>
</div>
<OtherCenter
:title="centerTitle"
:show="otherCenterShow"
ref="otherCenter"
:detcetorList="detcetorList"
:userId="centerUserId"
:total="centerTotal"
:pageSize="5"
v-show="!isShow"
/>
</div>
</template>
<script>
import {
getTcqDevice,
} from "@/api/bigWindowOld/getDevice";
import { companyType, deviceType } from "@/utils/mapClassForBigOld/config.js";
import { getTyxDevice, getFmDevice } from "@/api/bigWindowOld/getDevice.js";
import OtherCenter from "@/components/bigWindowOld/OtherCenter.vue";
export default {
components: {
OtherCenter,
},
data() {
return {
flag: true,
isShow: true ,
centerTitle: "",
otherCenterShow: false,
alarmTimer: null,
detcetorList: [],
centerUserId: null,
centerTotal: null,
userCenterShow: false,
companyType,
deviceType,
profile: "暂无备注",
typeList: {
// 1压力表 2流量计 3探测器
1: "压力表",
2: "流量计",
3: "工业探测器",
},
list: [
// {
// numberPressureGauges: "-",
// onlineEquipment: "-",
// offlineEquipment: "-",
// historicalAlarm: "-",
// alarmProcessed: "-",
// inAlarm: "-",
// dataType: 1,
// },
// {
// numberPressureGauges: "-",
// onlineEquipment: "-",
// offlineEquipment: "-",
// historicalAlarm: "-",
// alarmProcessed: "-",
// inAlarm: "-",
// dataType: 2,
// },
// {
// numberPressureGauges: "-",
// onlineEquipment: "-",
// offlineEquipment: "-",
// historicalAlarm: "-",
// alarmProcessed: "-",
// inAlarm: "-",
// dataType: 3,
// },
],
};
},
computed: {
prodTest() {
return this.vueRoot.$store.state.user.systemSetting.prod_test;
},
company() {
return this.vueRoot.$store.state.bigWindowCompany.company;
},
},
mounted() {
// 如果不是测试，而是真数据，就要用帧数据的东西
if (this.prodTest != "test") {
this.companyType = {};
this.company.forEach((item) => {
this.companyType[item.conpanyId] = item.companyName;
});
}
// 当点开infowindow的时候，重新调接口
this.myHttp();
console.log(this.deviceData);
},
methods: {
// 调压箱，阀门，场站睇下的设备
getTcqDevice(queryParams, title) {
console.log(queryParams);
return getTcqDevice(queryParams).then((res) => {
// console.log("queryParams", res);
console.log("resresresresreszzzzzzzzzzzzzzz", res);
this.detcetorList = res;
this.centerUserId = queryParams.devId;
// 总数据
this.centerTotal = res.length;
// this.$refs.userCenter.fade = "fade";
this.userCenterShow = false;
this.otherCenterShow = true;
this.centerTitle = title;
// if (res.detectorStatus === "在线"){
// return {'color':'red'}
// }
// 传递回去
return res.code;
});
},
close() {
this.mapClass.infowindowClose();
},
btnClick() {
this.isShow = !this.isShow;
// this.vueRoot.centerDataFunc(this.deviceData.pressureFlows);
const title = this.deviceData.deviceName
? this.deviceData.deviceName
: this.deviceData.stationName;
this.getTcqDevice(
{ devId: this.deviceData.deviceId, relationDeviceType: 1,pageNum: 1, pageSize: 5, },
title
);
},
myHttp() {
console.log(this.deviceData.iconType);
if (this.deviceData.iconType == 2) {
getTyxDevice({ deviceId: this.deviceData.deviceId }).then((res) => {
// 过滤设备数为0的
this.list = res.data[0].subordinateEquipmentList.filter(
(item) => item.numberPressureGauges > 0
);
console.log("this.list333333333",this.list);
});
} else {
getFmDevice({ deviceId: this.deviceData.deviceId }).then((res) => {
// 过滤设备数为0的
this.list = res.data[0].subordinateEquipmentList.filter(
(item) => item.numberPressureGauges > 0
);
});
}
},
},
};
</script>
<style lang="scss" scoped>
.arrowTransform {
transition: 0s;
transform-origin: center;
transform: rotateZ(180deg);
}
.arrowTransformReturn {
transition: 0s;
transform-origin: center;
transform: rotateZ(0deg);
}
.devicea-wrapper {
box-shadow: 0px 0px 10px #54e0ef inset;
background-color: #071738;
padding: 10px;
position: relative;
width: 670px;
border-radius: 7px;
.title {
// padding-top: 10px;
// padding-left: 10px;
font-size: 14px;
line-height: 14px;
color: #ffffff;
}
.close {
position: absolute;
right: 10px;
top: 5px;
cursor: pointer;
}
.top {
margin-top: 10px;
margin-bottom: 10px;
box-sizing: border-box;
.top-left {
flex: 1.8;
.group {
height: 30px;
flex: 1;
display: flex;
justify-content: space-between;
box-sizing: border-box;
div {
flex: 1;
box-sizing: border-box;
font-size: 14px;
color: #ffffff;
line-height: 30px;
padding: 0 5px;
&.last {
border-bottom: none;
}
}
.left {
text-align: right;
}
.right {
flex:2;
}
}
}
.top-center {
flex: 1.8;
.group {
height: 30px;
flex: 1;
display: flex;
justify-content: space-between;
box-sizing: border-box;
div {
flex: 1;
box-sizing: border-box;
font-size: 14px;
color: #ffffff;
line-height: 30px;
padding: 0 5px;
&.last {
border-bottom: none;
}
}
.left {
text-align: right;
}
.right {
flex:2;
}
}
}
.top-right {
flex: 1;
display: flex;
justify-content: center;
div {
width: 50px;
font-size: 14px;
color: #ffffff;
&.last {
border-bottom: none;
}
}
.imgtext {
color: #ffffff;
font-size: 30px;
}
}
}
// .middle {
// width: 100%;
// padding: 5px;
// box-sizing: border-box;
// font-size: 14px;
// color: #ffffff;
// text-indent: 2em;
// margin-bottom: 10px;
// }
.foot {
font-size: 14px;
color: #ffffff;
background: url('../../assets/second/box-bg.png');
background-size: 100% 100%;
background-repeat: no-repeat;
padding: 1px;
.thead,
.tbody {
div {
flex: 1;
text-align: left;
box-sizing: border-box;
text-align: center;
border: 1px solid #1b365d;
}
// .first {
// flex: 2;
// }
// .last {
// border-right: none;
// }
}
.tbody {
border-top: none;
}
// .thead {
// div {
// background-color: rgba(255, 255, 255, 0.1);
// }
// }
}
.btn {
position: relative;
margin-top: 10px;
div {
font-size: 14px;
color: #ffffff;
background: url('../../assets/second/boxbtn-bg.png');
background-size: 100% 100%;
background-repeat: no-repeat;
padding: 7px 15px;
}
}
.flex {
display: flex;
justify-content: space-between;
}
}
</style>