铁塔在线状态

src/views/globalMap/RightMenu/TowerStatus.vue

@@ -7,9 +7,8 @@
         <div class="item-right">
           <div class="text-box">
             <div class="text1">停电</div>
-            <div class="text2">xx</div>
           </div>
-          <div class="text3">{{ analyzeData.power_cut }}</div>
+          <div class="text2">{{ analyzeData.power_cut }}</div>
         </div>
       </div>
       <div class="data-item">
@@ -17,9 +16,8 @@
         <div class="item-right">
           <div class="text-box">
             <div class="text1">欠压</div>
-            <div class="text2">xx</div>
           </div>
-          <div class="text4">{{ analyzeData.under_voltage }}</div>
+          <div class="text3">{{ analyzeData.under_voltage }}</div>
         </div>
       </div>
       <div class="data-item">
@@ -27,9 +25,8 @@
         <div class="item-right">
           <div class="text-box">
             <div class="text1">退服</div>
-            <div class="text2">xx</div>
           </div>
-          <div class="text5">{{ analyzeData.service_out }}</div>
+          <div class="text4">{{ analyzeData.service_out }}</div>
         </div>
       </div>
       <div class="data-item">
@@ -37,9 +34,8 @@
         <div class="item-right">
           <div class="text-box">
             <div class="text1">离线</div>
-            <div class="text2">xx</div>
           </div>
-          <div class="text6">{{ analyzeData.offline }}</div>
+          <div class="text5">{{ analyzeData.offline }}</div>
         </div>
       </div>
       <div class="data-item">
@@ -47,9 +43,8 @@
         <div class="item-right">
           <div class="text-box">
             <div class="text1">温度过高</div>
-            <div class="text2">xx</div>
           </div>
-          <div class="text7">{{ analyzeData.overheat }}</div>
+          <div class="text6">{{ analyzeData.overheat }}</div>
         </div>
       </div>
       <div class="data-item">
@@ -57,9 +52,8 @@
         <div class="item-right">
           <div class="text-box">
             <div class="text1">烟雾</div>
-            <div class="text2">xx</div>
           </div>
-          <div class="text8">{{ analyzeData.smoke }}</div>
+          <div class="text7">{{ analyzeData.smoke }}</div>
         </div>
       </div>
       <div class="data-item">
@@ -67,9 +61,8 @@
         <div class="item-right">
           <div class="text-box">
             <div class="text1">水浸</div>
-            <div class="text2">xx</div>
           </div>
-          <div class="text9">{{ analyzeData.water_out }}</div>
+          <div class="text8">{{ analyzeData.water_out }}</div>
         </div>
       </div>
       <div class="data-item">
@@ -77,9 +70,8 @@
         <div class="item-right">
           <div class="text-box">
             <div class="text1">非法进入</div>
-            <div class="text2">xx</div>
           </div>
-          <div class="text10">{{ analyzeData.trespass }}</div>
+          <div class="text9">{{ analyzeData.trespass }}</div>
         </div>
       </div>
     </div>
@@ -87,10 +79,13 @@
       <div class="title-box">各区县异常比例</div>
       <!-- 图表区域 -->
       <el-select>
-        <el-option v-for="item in abnormal" :key="item.value" :label="item.name" :value="item.value" />
+        <el-option v-for="item in abnormalData" :key="item.area" :label="item.area" :value="item.area" />
       </el-select>
     </div>
-    <Chart :option="chartOption1" style="width: 100%; height: 505px" />
+    <div class="chart">
+      <!-- 在这里你可以使用一个图表库来展示数据，例如 ECharts -->
+      <Chart :option="chartOption1" style="width: 100%; height: 505px" />
+    </div>
     <div class="card-header">
       <div class="title-box">
         <div>各区县告警类型分析</div>
@@ -99,177 +94,59 @@
     <div class="table">
       <div class="table-header">
         <div class="td">区县</div>
-        <div class="td td-cursor">
-          <span>停电</span>
-          <i :class="queryParams.sort === 'desc' ? 'desc-icon' : 'asc-icon'" @click="handleSort" />
-        </div>
-        <div class="td td-cursor">
-          <span>欠压</span>
-          <i :class="queryParams.sort === 'desc' ? 'desc-icon' : 'asc-icon'" @click="handleSort" />
-        </div>
-        <div class="td td-cursor">
-          <span>退服</span>
-          <i :class="queryParams.sort === 'desc' ? 'desc-icon' : 'asc-icon'" @click="handleSort" />
-        </div>
-        <div class="td td-cursor">
-          <span>离线</span>
-          <i :class="queryParams.sort === 'desc' ? 'desc-icon' : 'asc-icon'" @click="handleSort" />
-        </div>
-        <div class="td td-cursor">
-          <span>温度过高</span>
-          <i :class="queryParams.sort === 'desc' ? 'desc-icon' : 'asc-icon'" @click="handleSort" />
-        </div>
-        <div class="td td-cursor">
-          <span>烟雾</span>
-          <i :class="queryParams.sort === 'desc' ? 'desc-icon' : 'asc-icon'" @click="handleSort" />
-        </div>
-        <div class="td td-cursor">
-          <span>水浸</span>
-          <i :class="queryParams.sort === 'desc' ? 'desc-icon' : 'asc-icon'" @click="handleSort" />
-        </div>
-        <div class="td td-cursor">
-          <span>非法进入</span>
-          <i :class="queryParams.sort === 'desc' ? 'desc-icon' : 'asc-icon'" @click="handleSort" />
+        <div v-for="label in labels" :key="label" class="td td-cursor">
+          <span>{{ label }}</span>
+          <i :class="queryParams.sort === 'desc' ? 'desc-icon' : 'asc-icon'" @click="handleSort(label)" />
         </div>
       </div>
       <div v-for="(item, index) in rangeData" :key="index" class="tr">
-        <div class="td">
-          <div :class="getRankClass(item.rn)">{{ item.rn }}</div>
-        </div>
         <div class="td">{{ item.area }}</div>
-        <div class="td">{{ item.township }}</div>
-        <div class="td">{{ item.address }}</div>
-        <div class="gradient-text2 td">{{ item.rainfall }}</div>
+        <div v-for="label in labels" :key="label" class="td">
+          {{ item[label.toLowerCase()] }}
+        </div>
       </div>
     </div>
   </div>
 </template>
 
 <script lang="ts" setup>
+import { ref, reactive, onMounted } from 'vue';
 import { option8 } from './echartOptions';
 import { getTowerStatus, getTowerWarn, getTowerAbnormal } from '@/api/globalMap/TowerStatus';
-import { getNextAreaInfo } from '@/api/common';
 
 const { proxy } = getCurrentInstance() as ComponentInternalInstance;
 const { district_type } = toRefs<any>(proxy?.useDict('district_type'));
-const containerScale = inject('containerScale');
 // 各区县异常比例
-let abnormal = ref();
+const abnormalData = ref([]);
 const chartOption1 = ref(option8);
-const handleGetTowerAbnormal = () => {
-  getTowerAbnormal(abnormal.value).then((res) => {
-    const data = res.rows && res.rows.length > 0 ? res.rows.reverse() : [];
-    const colorList = [
-      [168, 204, 221],
-      [67, 147, 255],
-      [1, 251, 230],
-      [151, 213, 100],
-      [232, 161, 22],
-      [251, 46, 60]
-    ];
-    let yData = [];
-    let filterData = [];
-    data.forEach((item, index) => {
-      const color = colorList[index];
-      yData.push(item.name);
-      filterData.push({
-        value: item.num,
-        itemStyle: {
-          color: new graphic.LinearGradient(1, 0, 0, 0, [
-            {
-              offset: 0,
-              color: `rgba(${color[0]},${color[1]},${color[2]}, 1)`
-            },
-            {
-              offset: 1,
-              color: `rgba(${color[0]},${color[1]},${color[2]}, 0.1)`
-            }
-          ])
-        },
-        label: {
-          show: true,
-          distance: 18,
-          textStyle: {
-            color: '#a7ccdf',
-            fontSize: 32,
-            fontWeight: 'bold'
-          },
-          position: 'right'
-        }
-      });
-    });
-    chartOption1.value.yAxis.data = yData;
-    chartOption1.value.series[0].data = filterData;
-  });
+const fetchAbnormalRateData = async () => {
+  try {
+    const response = await getTowerAbnormal();
+    if (response.code === 0 && response.rows) {
+      abnormalData.value = response.rows;
+    } else {
+      console.error('获取各区县异常比例数据失败:', response.msg);
+    }
+  } catch (error) {
+    console.error('请求各区县异常比例数据失败:', error);
+  }
 };
 // 各区县告警类型分析
 // true 降序
 const rangeData = ref([]);
-const queryParams = reactive({
-  current: 1,
-  size: 5,
-  area: '',
-  township: '',
-  sort: 'desc'
-});
-const townshipList = ref([]);
-let showMore = ref(false);
-const getRankClass = (rank) => {
-  let res = 'rank-other';
-  if (rank === 1) {
-    res = 'rank1';
-  } else if (rank === 2) {
-    res = 'rank2';
-  } else if (rank === 3) {
-    res = 'rank3';
-  }
-  return res;
-};
-const handleGetTowerWarn = () => {
-  let area = '';
-  for (let i = 0; i < district_type.value.length; i++) {
-    if (district_type.value[i].value === queryParams.area) {
-      area = district_type.value[i].label;
-    }
-  }
-  const params = {
-    current: queryParams.current,
-    size: queryParams.size,
-    query: {
-      area: area,
-      township: queryParams.township,
-      sort: queryParams.sort,
-      timeOption: timeOption.value
-    }
-  };
-  getTowerWarn(params).then((res) => {
-    rangeData.value = res.rows;
-  });
-};
-watch(
-  () => queryParams.area,
-  () => {
-    queryParams.township = '';
-    townshipList.value = [];
-    if (queryParams.area) {
-      getNextAreaInfo(queryParams.area).then((res) => {
-        townshipList.value = res.data.list;
-      });
+const townshipList = async () => {
+  try {
+    const response = await getTowerWarn();
+    if (response.code === 0 && response.rows) {
+      rangeData.value = response.rows;
+    } else {
+      console.error('获取告警类型分析数据失败:', response.msg);
     }
-    handleGetTowerWarn();
-  },
-  { immediate: true }
-);
-const handleSort = () => {
-  if (queryParams.sort === 'desc') {
-    queryParams.sort = 'asc';
-  } else {
-    queryParams.sort = 'desc';
+  } catch (error) {
+    console.error('请求告警类型分析数据失败:', error);
   }
-  handleGetTowerWarn();
 };
 // 影响分析
-const towerStatus = reactive([25, 50]);
 const analyzeData = ref({
   power_cut: 0,
   under_voltage: 0,
@@ -280,38 +157,25 @@ const analyzeData = ref({
   water_out: 0,
   trespass: 0
 });
-const getTower = () => {
-  getTowerStatus({
-    query: {
-      start_num: towerStatus[0],
-      end_num: towerStatus[1],
-      timeOption: timeOption.value
+const getTower = async () => {
+  try {
+    const response = await getTowerStatus();
+    if (response.code === 0 && response.rows) {
+      response.rows.forEach((item) => {
+        analyzeData.value[`${item.status_name.toLowerCase()}`] = item.num;
+      });
+    } else {
+      console.error('获取告警数据失败:', response.msg);
     }
-  }).then((res) => {
-    analyzeData.value = res.rows[0];
-  });
-};
-const lineRef = ref();
-const startLeft = ref(351.5);
-ref(543.5);
-const mouseStatus = reactive({
-  move: false,
-  type: '',
-  downLeft: 0,
-  left: 0
-});
-const handleMouseUp = () => {
-  mouseStatus.move = false;
-  mouseStatus.type = '';
-  mouseStatus.downLeft = 0;
-  mouseStatus.left = 0;
+  } catch (error) {
+    console.error('请求告警数据失败:', error);
+  }
 };
-const initData = () => {
-  handleGetTowerAbnormal();
-  handleGetTowerWarn();
+onMounted(() => {
   getTower();
-};
-initData();
+  townshipList();
+  fetchAbnormalRateData();
+});
 </script>
 
 <style lang="scss" scoped>

src/views/globalMap/RightMenu/index.vue

@@ -23,7 +23,11 @@
         <!--图层分析-->
         <LayerAnalysis v-if="menuState.showMenu && menuState.menuData[menuState.activeIndex]?.name === '图层分析'" :point-type="pointType" />
         <!--空间分析-->
-        <SpatialAnalysis v-if="menuState.showMenu && menuState.menuData[menuState.activeIndex]?.name === '空间分析'" :updateLocation="location" @handle-menu="handleMenu" />
+        <SpatialAnalysis
+          v-if="menuState.showMenu && menuState.menuData[menuState.activeIndex]?.name === '空间分析'"
+          :update-location="location"
+          @handle-menu="handleMenu"
+        />
         <!--江湖河库-->
         <Reservoir v-if="menuState.showMenu && menuState.menuData[menuState.activeIndex]?.name === '江湖河库'" />
         <!--路网视频-->
@@ -40,6 +44,8 @@
         <OnlinePlotting v-if="menuState.showMenu && menuState.menuData[menuState.activeIndex]?.name === '实时标绘'" />
         <!--雨情监测-->
         <RainMonitor v-if="menuState.showMenu && menuState.menuData[menuState.activeIndex]?.name === '雨情监测'" />
+        <!--铁塔运行监测-->
+        <RainMonitor v-if="menuState.showMenu && menuState.menuData[menuState.activeIndex]?.name === '铁塔运行监测'" />
         <!--预警信号-->
         <WarningInfo v-if="menuState.showMenu && menuState.menuData[menuState.activeIndex]?.name === '预警信号'" @handle-menu="handleMenu" />
         <!--森林防火-->
@@ -47,7 +53,10 @@
         <!--防灾救援-->
         <Mitigation v-if="menuState.showMenu && menuState.menuData[menuState.activeIndex]?.name === '防灾救援'" @handle-menu="handleMenu" />
         <!--易涝隐患点-->
-        <PotentialFloodHazard v-if="menuState.showMenu && menuState.menuData[menuState.activeIndex]?.name === '易涝隐患点'" @handle-menu="handleMenu" />
+        <PotentialFloodHazard
+          v-if="menuState.showMenu && menuState.menuData[menuState.activeIndex]?.name === '易涝隐患点'"
+          @handle-menu="handleMenu"
+        />
       </div>
     </div>
   </div>

src/views/globalMap/index.vue

@@ -2,18 +2,18 @@
   <div id="globalMap">
     <div class="global-map">
       <MapLogical v-if="activeMap === 'logical'" :map-data="mapData" />
-<!--      <YMap v-else-if="['satellite2', 'satellite3'].includes(activeMap)" :activeMap="activeMap" />-->
-      <YztMap v-else-if="['satellite2', 'satellite3'].includes(activeMap)" ref="map2Ref" :active-map="activeMap" :pointType="pointType" />
-      <Map v-else ref="mapRef" :active-map="activeMap" :pointType="pointType" @handleShowVideo="handleShowVideo" />
+      <!--      <YMap v-else-if="['satellite2', 'satellite3'].includes(activeMap)" :activeMap="activeMap" />-->
+      <YztMap v-else-if="['satellite2', 'satellite3'].includes(activeMap)" ref="map2Ref" :active-map="activeMap" :point-type="pointType" />
+      <Map v-else ref="mapRef" :active-map="activeMap" :point-type="pointType" @handle-show-video="handleShowVideo" />
       <!--左侧菜单-->
       <LeftMenu style="position: absolute; top: 20px; left: 20px" @click-menu="clickMenu" @select-search-marker="selectSearchMarker" />
       <!--右侧菜单-->
-      <RightMenu ref="rightMenuRef" :pointType="pointType" />
+      <RightMenu ref="rightMenuRef" :point-type="pointType" />
       <!--更换地图类型-->
       <SwitchMapTool :active-map="activeMap" class="tool-box" @switch-map="switchMap" />
       <!--时间轴-->
       <TimeAxis />
-      <DrawTools v-if="showDrawTools" @handleAnalysisData="handleAnalysisData" />
+      <DrawTools v-if="showDrawTools" @handle-analysis-data="handleAnalysisData" />
       <NearbyVideos v-if="showNearbyVideos" v-model="showNearbyVideos" :location="location" />
     </div>
   </div>
@@ -115,7 +115,10 @@ const clickMenu = (item, dataList) => {
     // 打点信息
     addMarkers(item);
     if (item.checked || (!item.checked && index === 0)) {
-      rightMenuRef.value.updateMenu(checked, ['易涝隐患点', '无人机'].includes(item.name) ? item : { name: '图层分析', meta: { icon: 'icon1' } });
+      rightMenuRef.value.updateMenu(
+        checked,
+        ['易涝隐患点', '无人机', '铁塔运行监测'].includes(item.name) ? item : { name: '图层分析', meta: { icon: 'icon1' } }
+      );
     }
   }
 };
@@ -176,7 +179,6 @@ const handleShowVideo = (data) => {
 //   mapRef.value.addEventListener('resize', handleResize);
 // })
 
-
 provide('getMap', getMap);
 provide('getDrawTool', getDrawTool);
 </script>