<!-- * @Author: your name * @Date: 2022-01-26 20:07:52 * @LastEditTime: 2022-03-23 15:19:40 * @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.address" :title="deviceData.address" class="right last zzz" > {{ deviceData.address || "-" }} </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.pictureAddress" style="width: 80px; height: 50px" :src="deviceData.pictureAddress" :preview-src-list="[deviceData.pictureAddress ]" :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;" v-if="list.length > 0"> <div class="btn"> <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/bigWindow/getDevice"; import { companyType, deviceType } from "@/utils/mapClass/config.js"; import { getCzDevice } from "@/api/bigWindow/getDevice.js"; import OtherCenter from "@/components/bigWindow/OtherCenter.vue"; export default { components: { OtherCenter, }, data() { return { flag: true, isShow: true , centerTitle: "", companyType, deviceType, otherCenterShow: false, userCenterShow: false, detcetorList: [], centerUserId: null, centerTotal: null, 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; }); } 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.siteStationId, relationDeviceType: 2,pageNum: 1, pageSize: 5, }, title ); }, myHttp() { getCzDevice({ deviceId: this.deviceData.siteStationId }).then((res) => { this.list = res.data[0].subordinateEquipmentList.filter(item=>item.numberPressureGauges>0); console.log("resresres222222222",this.list) }); }, }, }; </script> <style lang="scss" scoped> .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: 10px; } } } .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>