<!-- * @Author: your name * @Date: 2022-01-26 20:07:52 * @LastEditTime: 2024-08-01 09:48:18 * @LastEditors: 纪泽龙 jizelong@qq.com * @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.nickName }} </div> <div class="close" @click="close"> <!-- <img src="@/assets/mapImages/closeBtn.png" alt="" /> --> <i class="el-icon-close" style="font-size: 20px; color: #49d8ff"></i> </div> <div class="line"></div> <div class="top"> <div class="info-item" :show-overflow-tooltip="true"> <div class="label">联系人:</div> <div class="username-value" :title="deviceData.linkman">{{ deviceData.linkman }}</div> </div> <div class="info-item" :show-overflow-tooltip="true"> <div class="label">联系电话:</div> <div class="phone-value" :title="deviceData.phone"> {{ deviceData.phone }} </div> </div> </div> <div class="addresstop"> <div class="group"> <div class="left">联系地址:</div> <div :title="deviceData.address" class="right last zzz"> {{ deviceData.address || "-" }} </div> </div> </div> <template v-if="deviceData.detectorCountList.length>0"> <div class="foot"> <div class="thead flex"> <div class="first">设备类型</div> <div>设备数量</div> <div>在线设备</div> <div>离线设备</div> <!-- <div>历史报警</div> <div>已处理报警</div> --> <div class="last">报警中</div> </div> <div v-for="data in deviceData.detectorCountList" :key="data.userId" class="tbody flex" > <div v-unValue class="first zzz">{{ data.detectorType }}</div> <div class="">{{ data.detectorCount }}</div> <div v-unValue class=""> {{ data.onLineNum }} </div> <div v-unValue class=""> {{ data.offLineNum }} </div> <!-- <div v-unValue class=""> {{ data.historyAlarmNum }} </div> <div v-unValue class=""> {{ data.cancelAlarmNum }} </div> --> <div v-unValue class="last zzz"> {{ data.processingAlarmNum }} </div> </div> </div> </template> <div style="width: 100%; display: flex" v-if="detcetorList>0"> <div class="btn"> <div>感知设备</div> </div> <p style=" width: 85%; 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> <UserCenter :title="centerTitle" :show="userCenterShow" ref="userCenter" :detcetorList="detcetorList" :userId="centerUserId" :total="centerTotal" :pageSize="5" v-show="!isShow" /> </div> </template> <script> import { getUser } from "@/api/bigWindow/getDevice"; import { companyType, deviceType } from "@/utils/mapClass/config.js"; import { listDetectorInfo } from "@/api/detector/detectorInfo"; import { detectorUserList } from "@/api/detector/detectorUser"; import UserCenter from "@/components/bigWindow/UserCenter.vue"; export default { components: { UserCenter, }, data() { return { flag: true, isShow: true, companyType, deviceType, centerTitle: "", detcetorList: [], centerUserId: null, centerTotal: null, userCenterShow: false, }; }, 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: { //用户的设备center getDetectorInfoList(httpFunc, queryParams, title) { console.log(queryParams); return httpFunc(queryParams).then((res) => { // console.log("queryParamssssssssssss", res); if (res.code == 200) { this.detcetorList = res.rows; this.centerUserId = queryParams.userId; // 总数据 this.centerTotal = res.total; // this.$refs.userCenter.fade = "fade"; this.otherCenterShow = false; this.userCenterShow = true; this.centerTitle = title; // 传递回去 return res.code; } }); }, close() { this.mapClass.infowindowClose(); }, btnClick() { this.isShow = !this.isShow; // this.vueRoot.centerDataFunc(this.deviceData.pressureFlows); this.getDetectorInfoList( listDetectorInfo, { userId: this.deviceData.userId, pageNum: 1, pageSize: 5 }, this.deviceData.nickName ); }, myHttp() { detectorUserList({ userId: this.deviceData.userId }).then((res) => { if (res.code == 200) { const data = res.data.filter( (item) => item.userId == this.deviceData.userId )[0].detectorCountList; this.deviceData.detectorCountList = data; } }); }, }, }; </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 { background: rgba(2, 26, 51, 0.9); border: 1px solid #127bd1; box-shadow: inset 0px 0px 10px 0px #164db2; padding: 10px; position: relative; width: 740px; .title { // padding-top: 10px; // padding-left: 10px; font-size: 14px; line-height: 14px; color: #ffffff; padding-left: 5px; } .line { width: 50%; height: 2px; margin-top: 10px; background: linear-gradient( 90deg, rgba(29, 33, 41, 0) 0%, #568ef6 38%, #19d1ed 49%, rgba(29, 33, 41, 0) 109% ); // border: 2px solid; } .close { position: absolute; right: 10px; top: 5px; cursor: pointer; } .addresstop { margin-top: 10px; margin-bottom: 10px; display: flex; // gap: 10px; /* 列与列之间的间隔 */ .group { height: 30px; display: flex; justify-content: flex-start; /* 左对齐 */ align-items: center; /* 垂直居中,如果需要的话 */ div { box-sizing: border-box; text-align: left; font-size: 14px; color: #ffffff; line-height: 30px; padding: 0 5px; &.last { border-right: none; } } .left { text-align: left; } } } .top { margin-top: 10px; margin-bottom: 10px; width: 100%; display: flex; /* 使用 Flexbox 布局 */ align-items: center; /* 垂直居中 */ justify-content: space-between; /* 平均分布 */ box-sizing: border-box; /* 边框盒模型 */ .info-item{ flex: 1; /* 每个组合占据一半的空间 */ display: flex; align-items: center; /* 垂直居中 */ justify-content: flex-start; /* 左对齐 */ overflow: hidden; /* 防止内容溢出容器 */ } .label { min-width: 80px; text-align: left; /* 标签右对齐 */ padding-left: 5px; /* 添加一些右侧内边距 */ color: #ffffff; font-size: 14px; } .username-value, .phone-value { flex: 1; /* 弹性布局,占据剩余空间 */ overflow: hidden; /* 如果值过长,隐藏超出的部分 */ text-overflow: ellipsis; /* 显示省略号 */ white-space: nowrap; /* 不允许文本换行 */ text-align: left; /* 值左对齐 */ padding-left: 5px; /* 添加一些左侧内边距 */ color: #ffffff; font-size: 14px; } // .info-item { // width: 50%; // } } // .top { // margin-top: 10px; // margin-bottom: 10px; // box-sizing: border-box; // &.top-top { // // div{ // // width: 33%; // // } // } // .group { // height: 30px; // display: flex; // justify-content: space-evenly; // box-sizing: border-box; // div { // box-sizing: border-box; // text-align: left; // font-size: 14px; // color: #ffffff; // line-height: 30px; // padding: 0 5px; // &.last { // border-right: none; // } // } // .left { // text-align: left; // } // } // &.top-bottom { // .left { // flex: none; // width: 192px !important; // } // .right { // flex: 1; // } // } // } .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>