<!-- * @Author: your name * @Date: 2022-01-27 14:25:45 * @LastEditTime: 2022-02-28 11:35:31 * @LastEditors: Please set LastEditors * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE * @FilePath: /hello-world/src/views/components/User.vue --> <template> <div class="user-wrapper"> <div class="title">{{ companyType[deviceData.companyType] }}</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> <div class="group flex first"> <div class="first once left">管道名称:</div> <div class="right pipeAddr right zzz">{{ deviceData.pipeName }}</div> </div> <div class="group flex"> <div class="left first">管道长度:</div> <div class="right zzz">{{ deviceData.pipeLength }}米</div> <div class="left">管径:</div> <div class="right last">{{ deviceData.pipeDiameter }}</div> </div> <!-- <div class="group flex"> </div> --> <div class="group flex"> <div class="left first">管道压力:</div> <div :title="deviceData.pipePressure" class="right zzz"> {{ deviceData.pipePressure }} </div> <div class="left">所属公司:</div> <div class="right last zzz">{{ companyType[deviceData.companyType] }}</div> </div> <div class="group flex"> <div class="first left">管道材质:</div> <div class="right">{{ deviceData.pipeMaterial }}</div> <div class="left">管道埋深:</div> <div class="right last">{{ deviceData.pipeDepth }}米</div> </div> <div class="group flex"> <div class="left first">管道走向:</div> <div class="right zzz" :title="deviceData.pipeTrend">{{ deviceData.pipeTrend }}</div> <div class="left">权属单位:</div> <div :title="deviceData.powerCompany" class="right last zzz"> {{ deviceData.powerCompany }} </div> </div> <div class="group flex"> <div class="first left">建设年代:</div> <div class="right">{{ deviceData.buildyear }}</div> <div class="left">建设单位:</div> <div class="last right zzz" :title="deviceData.buildCompany">{{ deviceData.buildCompany }}</div> </div> <div class="group flex"> <div class="first once left">管道位置:</div> <div v-unValue :title="deviceData.pipeAddr" class="last pipeAddr right zzz" > {{ deviceData.pipeAddr }} </div> </div> <div class="group flex" v-show="isVisibleMethod"> <div class="left">详细地址:</div> <div class="right pipeAddr last zzz">{{ deviceData.detaildAddress }}</div> </div> <div class="group flex" v-show="isVisibleMethod"> <div class="first left">主管部门:</div> <div class="right zzz">{{ deviceData.indRegAuth }}</div> <div class="left">主管负责人:</div> <div class="right last zzz">{{ deviceData.indRegAuthPer }}</div> </div> <div class="group flex" v-show="isVisibleMethod"> <div class="first left">主管负责电话:</div> <div class="right zzz">{{ deviceData.indRegAuthPerCon }}</div> <div class="left">重点燃气使用:</div> <div class="right last zzz">{{ deviceData.keyAreasGasUsage }}</div> </div> <div class="group flex" v-show="isVisibleMethod"> <div class="first left">燃气公司:</div> <div class="right zzz">{{ deviceData.affGasCom }}</div> <div class="left">燃气安检人:</div> <div class="right last zzz">{{ deviceData.affGasComSecPer }}</div> </div> <div class="group flex" v-show="isVisibleMethod"> <div class="first left">安检人电话:</div> <div class="right zzz">{{ deviceData.affGasComSecPerCon }}</div> <div class="left">安检时间:</div> <div class="right last zzz">{{ deviceData.secCheckTime }}</div> </div> <div class="group flex" v-show="isVisibleMethod"> <div class="first left">燃气负责人:</div> <div class="right zzz">{{ deviceData.unitGasUserRes }}</div> <div class="left">负责人电话:</div> <div class="right last zzz">{{ deviceData.unitGasUserResCon }}</div> </div> </div> </template> <script> import { companyType, pipePressure } from "@/utils/mapClassForBigOld/config.js"; export default { data() { return { companyType, pipePressure, isClose: 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; }) } }, methods: { close() { // 关闭前先把颜色改回来 this.mapClass.infowindowClose(); }, isVisibleMethod(){ return deviceData.pipePressure == "中压" } }, }; </script> <style lang="scss" scoped> .user-wrapper { box-shadow: 0px 0px 10px #54e0ef inset; background-color: #071738; padding: 10px; position: relative; width: 500px; border-radius: 7px; .title { font-size: 14px; line-height: 14px; color: #ffffff; } .close { position: absolute; right: 10px; top: 5px; cursor: pointer; } .group { border-top: none; height: 28px; font-size: 14px; line-height: 28px; color: #ffffff; &.first { margin-top: 10px; } div { flex: 1; } .left { text-align: right; } .right { box-sizing: border-box; text-align: left; padding: 0 1em; } .last { border: none; } .once { flex: 1; } .pipeAddr { flex: 3; padding: 0 3em 0 1em; } } .flex { display: flex; justify-content: space-between; } } </style>