| | |
| | | <template> |
| | | <div class="district"> |
| | | <div class="left-top"> |
| | | <span>监测位置</span> |
| | | </div> |
| | | |
| | | <div class="left-content district-content"> |
| | | <div style="margin-left: 5px"> |
| | | <span style="color: white">重点沟:</span> |
| | | <el-select @change="handleChange" v-model="selectValue" placeholder="Select" size="large" style="width: 240px"> |
| | | <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" /> |
| | | </el-select> |
| | | <template> |
| | | <div class="district"> |
| | | <div class="left-top"> |
| | | <span>监测位置</span> |
| | | </div> |
| | | |
| | | <!-- 滚动区域 --> |
| | | <div style="overflow-y: auto; height: 95%"> |
| | | <!-- 加载遮罩层 --> |
| | | <div v-if="loading" class="loading-overlay"> |
| | | <div class="spinner"></div> |
| | | <div class="left-content district-content"> |
| | | <div style="margin-left: 5px"> |
| | | <span style="color: white">重点沟:</span> |
| | | <el-select @change="handleChange" v-model="selectValue" placeholder="Select" size="large" |
| | | style="width: 240px"> |
| | | <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" /> |
| | | </el-select> |
| | | </div> |
| | | <div v-else v-for="(item, key) in districtList" :key="key" class="district-item" @click="handleClick(item)"> |
| | | <div class="district-item-icon"></div> |
| | | <div class="district-item-text">{{ item.hdName }}</div> |
| | | |
| | | <!-- 滚动区域 --> |
| | | <div style="overflow-y: auto; height: 95%"> |
| | | <!-- 加载遮罩层 --> |
| | | <div v-if="loading" class="loading-overlay"> |
| | | <div class="spinner"></div> |
| | | </div> |
| | | <div v-else v-for="(item, key) in districtList" :key="key" class="district-item" @click="handleClick(item)"> |
| | | <div class="district-item-icon"></div> |
| | | <div class="district-item-text">{{ item.hdName }}</div> |
| | | </div> |
| | | </div> |
| | | </div> |
| | | </div> |
| | | </div> |
| | | </template> |
| | | </template> |
| | | |
| | | <script setup> |
| | | import { ref, onMounted, watch, onBeforeUnmount } from "vue"; |
| | |
| | | districtList.value = []; |
| | | return; |
| | | } |
| | | |
| | | districtList.value = simStore.DangerPoint.filter((item) => |
| | | const filteredData = simStore.DangerPoint.filter((item) => |
| | | item.position?.includes(areaName) |
| | | ); |
| | | await initializeDevicePoints(); |
| | | |
| | | if (JSON.stringify(districtList.value) !== JSON.stringify(filteredData)) { |
| | | districtList.value = filteredData; |
| | | await initializeDevicePoints(); |
| | | } |
| | | }; |
| | | |
| | | // 处理区域变化事件 |
| | |
| | | } |
| | | filterDataByArea(areaName); |
| | | }; |
| | | watch(() => simStore.DangerShowSwitch, (newValue, oldValue) => { |
| | | let isInitialized = false; |
| | | |
| | | watch(() => simStore.DangerShowSwitch, async (newValue, oldValue) => { |
| | | console.log('当前状态:', newValue); |
| | | |
| | | if (newValue) { |
| | | initializeDevicePoints(); |
| | | if (!isInitialized) { |
| | | await initializeDevicePoints(); |
| | | isInitialized = true; |
| | | } |
| | | } else { |
| | | handleCleanup() |
| | | handleCleanup(); |
| | | isInitialized = false; |
| | | } |
| | | }); |
| | | // 监听 simStore.DangerPoint 变化 |
| | |
| | | districtList.value = []; |
| | | loading.value = true; // 数据未准备就绪 |
| | | } |
| | | }, |
| | | { immediate: true } |
| | | } |
| | | ); |
| | | |
| | | onMounted(() => { |