| | |
| | | <div class="detail-context"> |
| | | <div v-for="(item, key) in detailList" :key="key" class="detail-item"> |
| | | <div class="detail-name">{{ item.name }}</div> |
| | | <div class="detail-value" :title="item.value">{{ item.value || "--" }}</div> |
| | | <div class="detail-value" :title="item.value"> |
| | | {{ item.value || "--" }} |
| | | </div> |
| | | </div> |
| | | </div> |
| | | </div> |
| | |
| | | |
| | | <script setup> |
| | | import { ref, onMounted, nextTick, onUnmounted } from "vue"; |
| | | import { showDeviceDetail, deviceDetail, className, dialogPositon } from "@/store" |
| | | import { |
| | | showDeviceDetail, |
| | | deviceDetail, |
| | | className, |
| | | dialogPositon, |
| | | } from "@/store"; |
| | | |
| | | // props: { |
| | | // deviceDetail: { |
| | | // type: Object, |
| | | // default: { |
| | | // deviceCode: "1101161102180100031040", |
| | | // deviceId: "1554360448383913986", |
| | | // deviceName: "怀柔区琉璃庙镇孙胡沟村于家西沟次声仪1040", |
| | | // dictDeviceType: "1437295832", |
| | | // latitude: 40.563822, |
| | | // longitude: 116.592648, |
| | | // type: "次生仪", |
| | | // name: "怀柔区琉璃庙镇孙胡沟村于家西沟次声仪1040", |
| | | // id: "1554360448383913986", |
| | | // }, |
| | | // }, |
| | | // }, |
| | | const detailList = ref([]) |
| | | const detailTitle = ref("设备详情") |
| | | const detailList = ref([]); |
| | | const detailTitle = ref("设备详情"); |
| | | function closeMsg() { |
| | | showDeviceDetail.value = false |
| | | coloseDialog() |
| | | showDeviceDetail.value = false; |
| | | coloseDialog(); |
| | | } |
| | | // 监测设备具体信息 |
| | | function handlDeviceDetail() { |
| | | const name = deviceDetail.value.name.split("孙胡沟")[1] || deviceDetail.value.deviceName |
| | | detailTitle.value = name |
| | | const name = deviceDetail.value.name; |
| | | detailTitle.value = name; |
| | | detailList.value = [ |
| | | { |
| | | name: "设备编号", |
| | | value: deviceDetail.value.deviceCode || Math.floor(Math.random() * 100000), |
| | | value: |
| | | deviceDetail.value.deviceCode || Math.floor(Math.random() * 100000), |
| | | }, |
| | | { |
| | | name: "设备类型", |
| | |
| | | }, |
| | | { |
| | | name: "安装时间", |
| | | value: "2024-01-15 12:55:18", |
| | | value: "2024-01-15 12:55:18" || deviceDetail.value.startTime, |
| | | }, |
| | | { |
| | | name: "更新时间", |
| | |
| | | }, |
| | | { |
| | | name: "设备位置", |
| | | value: deviceDetail.value.name.split("孙胡沟")[0] || cityData.listData[0], |
| | | value: deviceDetail.value.deviceForShort || cityData.listData[0], |
| | | // value: deviceDetail.value.name.split("孙胡沟")[0] || cityData.listData[0], |
| | | }, |
| | | ] |
| | | ]; |
| | | } |
| | | // 隐患点具体信息 |
| | | function handleDistrictDetail() { |
| | | const name = deviceDetail.value.name || deviceDetail.value.district |
| | | detailTitle.value = name |
| | | const name = deviceDetail.value.hdName; |
| | | detailTitle.value = name; |
| | | detailList.value = [ |
| | | { |
| | | name: "隐患类型", |
| | | value: deviceDetail.value.type || "泥石流", |
| | | value: deviceDetail.value.disasterType || "泥石流", |
| | | }, |
| | | // { |
| | | // name: "威胁人数", |
| | | // value: deviceDetail.value.type || "", |
| | | // }, |
| | | { |
| | | name: "主管科长", |
| | | value: "张浩", |
| | | }, |
| | | { |
| | | name: "主管镇长", |
| | | value: "刘佳斌", |
| | | value: deviceDetail.value.supervisorAlcaldeUserName, |
| | | }, |
| | | { |
| | | name: "群测群防", |
| | | value: deviceDetail.value.groupMonitor, |
| | | value: deviceDetail.value.groupTestGroupDefenseUserName, |
| | | }, |
| | | { |
| | | name: "隐患位置", |
| | | value: deviceDetail.value.district, |
| | | value: deviceDetail.value.position, |
| | | }, |
| | | { |
| | | name: "预防方案", |
| | | value: deviceDetail.value.preventionPlan, |
| | | value: deviceDetail.value.preventionSuggestion, |
| | | }, |
| | | ] |
| | | ]; |
| | | } |
| | | function loadClassNameDetail() { |
| | | if (className.value == "device") { |
| | | handlDeviceDetail() |
| | | handlDeviceDetail(); |
| | | } else if (className.value == "district") { |
| | | handleDistrictDetail() |
| | | handleDistrictDetail(); |
| | | } |
| | | } |
| | | const detailRef = ref(null) |
| | | const detailRef = ref(null); |
| | | //展示属性框 |
| | | function calcDialogPostion() { |
| | | const position = dialogPositon.value; |
| | |
| | | bubble.style.top = top + "px"; |
| | | } |
| | | |
| | | |
| | | //关闭属性框 |
| | | const coloseDialog = () => { |
| | | window.viewer.scene.postRender.removeEventListener(calcDialogPostion) |
| | | } |
| | | window.viewer.scene.postRender.removeEventListener(calcDialogPostion); |
| | | }; |
| | | onMounted(() => { |
| | | loadClassNameDetail(); |
| | | nextTick(() => { |