铁塔样式实现

src/api/globalMap/TowerStatus.ts

@@ -1,3 +1,4 @@
+import request from '@/utils/request';
 // 铁塔状态统计
 export const getTowerStatus = () => {
   return request({

src/assets/styles/index.scss

@@ -394,7 +394,7 @@ aside {
     display: inline-block;
     width: 33px;
     height: 33px;
-    background: url('@/assets/images/map/rightMenu/rainMonitor/asc.png') no-repeat;
+    background: url('@/assets/images/common/asc.png') no-repeat;
     cursor: pointer;
     margin-left: 8px;
   }
@@ -402,7 +402,16 @@ aside {
     display: inline-block;
     width: 33px;
     height: 33px;
-    background: url('@/assets/images/map/rightMenu/rainMonitor/desc.png') no-repeat;
+    background: url('@/assets/images/common/desc.png') no-repeat;
+    cursor: pointer;
+    margin-left: 8px;
+  }
+  .unSort-icon {
+    display: inline-block;
+    width: 33px;
+    height: 32px;
+    background: url('@/assets/images/common/unSort.png') no-repeat;
+    background-size: 100% 100%;
     cursor: pointer;
     margin-left: 8px;
   }

src/views/globalMap/RightMenu/RainMonitor/RainRank.vue

@@ -289,7 +289,7 @@ const handleClick = (item) => {
     display: inline-block;
     width: 33px;
     height: 33px;
-    background: url('@/assets/images/map/rightMenu/rainMonitor/asc.png') no-repeat;
+    background: url('@/assets/images/common/asc.png') no-repeat;
     cursor: pointer;
     margin-left: 8px;
   }
@@ -297,7 +297,7 @@ const handleClick = (item) => {
     display: inline-block;
     width: 33px;
     height: 33px;
-    background: url('@/assets/images/map/rightMenu/rainMonitor/desc.png') no-repeat;
+    background: url('@/assets/images/common/desc.png') no-repeat;
     cursor: pointer;
     margin-left: 8px;
   }

src/views/globalMap/RightMenu/RainMonitor/index.vue

@@ -630,7 +630,7 @@ initData();
     display: inline-block;
     width: 33px;
     height: 33px;
-    background: url('@/assets/images/map/rightMenu/rainMonitor/asc.png') no-repeat;
+    background: url('@/assets/images/common/asc.png') no-repeat;
     cursor: pointer;
     margin-left: 8px;
   }
@@ -638,7 +638,7 @@ initData();
     display: inline-block;
     width: 33px;
     height: 33px;
-    background: url('@/assets/images/map/rightMenu/rainMonitor/desc.png') no-repeat;
+    background: url('@/assets/images/common/desc.png') no-repeat;
     cursor: pointer;
     margin-left: 8px;
   }

src/views/globalMap/RightMenu/TowerStatus.vue

@@ -1,108 +1,141 @@
 <template>
   <div class="menu-content">
     <div class="gradient-text title">铁塔运行监测</div>
-    <div class="data-box2">
-      <div class="data-item">
-        <div class="icon1"></div>
-        <div class="item-right">
-          <div class="text-box">
-            <div class="text1">停电</div>
-          </div>
-          <div class="text2">{{ analyzeData.power_cut }}</div>
-        </div>
-      </div>
-      <div class="data-item">
-        <div class="icon2"></div>
-        <div class="item-right">
-          <div class="text-box">
-            <div class="text1">欠压</div>
-          </div>
-          <div class="text3">{{ analyzeData.under_voltage }}</div>
-        </div>
-      </div>
-      <div class="data-item">
-        <div class="icon3"></div>
-        <div class="item-right">
-          <div class="text-box">
-            <div class="text1">退服</div>
-          </div>
-          <div class="text4">{{ analyzeData.service_out }}</div>
-        </div>
-      </div>
-      <div class="data-item">
-        <div class="icon4"></div>
-        <div class="item-right">
-          <div class="text-box">
-            <div class="text1">离线</div>
-          </div>
-          <div class="text5">{{ analyzeData.offline }}</div>
-        </div>
-      </div>
-      <div class="data-item">
-        <div class="icon4"></div>
-        <div class="item-right">
-          <div class="text-box">
-            <div class="text1">温度过高</div>
-          </div>
-          <div class="text6">{{ analyzeData.overheat }}</div>
-        </div>
-      </div>
-      <div class="data-item">
-        <div class="icon4"></div>
-        <div class="item-right">
-          <div class="text-box">
-            <div class="text1">烟雾</div>
-          </div>
-          <div class="text7">{{ analyzeData.smoke }}</div>
-        </div>
-      </div>
-      <div class="data-item">
-        <div class="icon4"></div>
-        <div class="item-right">
-          <div class="text-box">
-            <div class="text1">水浸</div>
-          </div>
-          <div class="text8">{{ analyzeData.water_out }}</div>
-        </div>
-      </div>
-      <div class="data-item">
-        <div class="icon4"></div>
-        <div class="item-right">
-          <div class="text-box">
-            <div class="text1">非法进入</div>
-          </div>
-          <div class="text9">{{ analyzeData.trespass }}</div>
+    <div class="data-box">
+      <div v-for="(item, index) in analyzeData" :key="index" class="data-item">
+        <div class="text1">{{ item.status_name }}</div>
+        <div class="box-content">
+          <div class="text2">{{ item.num }}</div>
+          <i :class="'icon' + (index + 1)"></i>
         </div>
       </div>
     </div>
     <div class="card-header">
       <div class="title-box">各区县异常比例</div>
-      <!-- 图表区域 -->
-      <el-select>
-        <el-option v-for="item in abnormalData" :key="item.area" :label="item.area" :value="item.area" />
-      </el-select>
-    </div>
-    <div class="chart">
-      <!-- 在这里你可以使用一个图表库来展示数据，例如 ECharts -->
-      <Chart :option="chartOption1" style="width: 100%; height: 505px" />
     </div>
+    <Chart :option="chartOption1" style="width: 100%; height: 650px" />
     <div class="card-header">
-      <div class="title-box">
-        <div>各区县告警类型分析</div>
-      </div>
+      <div class="title-box">各区县告警类型分析</div>
     </div>
     <div class="table">
       <div class="table-header">
         <div class="td">区县</div>
-        <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 class="td td-cursor">
+          <span>停电</span>
+          <i
+            :class="
+              queryParams.sortName !== 'td' || (queryParams.sortName === 'td' && queryParams.sort === '')
+                ? 'unSort-icon'
+                : queryParams.sort === 'desc'
+                  ? 'desc-icon'
+                  : 'asc-icon'
+            "
+            @click="handleSort('td')"
+          />
+        </div>
+        <div class="td td-cursor">
+          <span>欠压</span>
+          <i
+            :class="
+              queryParams.sortName !== 'qy' || (queryParams.sortName === 'qy' && queryParams.sort === '')
+                ? 'unSort-icon'
+                : queryParams.sort === 'desc'
+                  ? 'desc-icon'
+                  : 'asc-icon'
+            "
+            @click="handleSort('qy')"
+          />
+        </div>
+        <div class="td td-cursor">
+          <span>退服</span>
+          <i
+            :class="
+              queryParams.sortName !== 'tf' || (queryParams.sortName === 'tf' && queryParams.sort === '')
+                ? 'unSort-icon'
+                : queryParams.sort === 'desc'
+                  ? 'desc-icon'
+                  : 'asc-icon'
+            "
+            @click="handleSort('tf')"
+          />
+        </div>
+        <div class="td td-cursor">
+          <span>离线</span>
+          <i
+            :class="
+              queryParams.sortName !== 'lx' || (queryParams.sortName === 'lx' && queryParams.sort === '')
+                ? 'unSort-icon'
+                : queryParams.sort === 'desc'
+                  ? 'desc-icon'
+                  : 'asc-icon'
+            "
+            @click="handleSort('lx')"
+          />
+        </div>
+        <div class="td td-cursor">
+          <span>温度过高</span>
+          <i
+            :class="
+              queryParams.sortName !== 'wdgg' || (queryParams.sortName === 'wdgg' && queryParams.sort === '')
+                ? 'unSort-icon'
+                : queryParams.sort === 'desc'
+                  ? 'desc-icon'
+                  : 'asc-icon'
+            "
+            @click="handleSort('wdgg')"
+          />
+        </div>
+        <div class="td td-cursor">
+          <span>烟雾</span>
+          <i
+            :class="
+              queryParams.sortName !== 'yw' || (queryParams.sortName === 'yw' && queryParams.sort === '')
+                ? 'unSort-icon'
+                : queryParams.sort === 'desc'
+                  ? 'desc-icon'
+                  : 'asc-icon'
+            "
+            @click="handleSort('yw')"
+          />
+        </div>
+        <div class="td td-cursor">
+          <span>水浸</span>
+          <i
+            :class="
+              queryParams.sortName !== 'sj' || (queryParams.sortName === 'sj' && queryParams.sort === '')
+                ? 'unSort-icon'
+                : queryParams.sort === 'desc'
+                  ? 'desc-icon'
+                  : 'asc-icon'
+            "
+            @click="handleSort('sj')"
+          />
+        </div>
+        <div class="td td-cursor">
+          <span>非法侵入</span>
+          <i
+            :class="
+              queryParams.sortName !== 'ffqr' || (queryParams.sortName === 'ffqr' && queryParams.sort === '')
+                ? 'unSort-icon'
+                : queryParams.sort === 'desc'
+                  ? 'desc-icon'
+                  : 'asc-icon'
+            "
+            @click="handleSort('ffqr')"
+          />
         </div>
       </div>
-      <div v-for="(item, index) in rangeData" :key="index" class="tr">
-        <div class="td">{{ item.area }}</div>
-        <div v-for="label in labels" :key="label" class="td">
-          {{ item[label.toLowerCase()] }}
+      <div class="table-content">
+        <div v-for="(item, index) in rangeData" :key="index" class="tr">
+          <div class="td">{{ item.area }}</div>
+          <div class="td2">{{ item.td }}</div>
+          <div class="td2">{{ item.qy }}</div>
+          <div class="td2">{{ item.tf }}</div>
+          <div class="td2">{{ item.lx }}</div>
+          <div class="td2">{{ item.wdgg }}</div>
+          <div class="td2">{{ item.yw }}</div>
+          <div class="td2">{{ item.sj }}</div>
+          <div class="td2">{{ item.ffjr }}</div>
         </div>
       </div>
     </div>
@@ -110,66 +143,71 @@
 </template>
 
 <script lang="ts" setup>
-import { ref, reactive, onMounted } from 'vue';
+import { ref, onMounted } from 'vue';
 import { option8 } from './echartOptions';
 import { getTowerStatus, getTowerWarn, getTowerAbnormal } from '@/api/globalMap/TowerStatus';
 
 const { proxy } = getCurrentInstance() as ComponentInternalInstance;
 const { district_type } = toRefs<any>(proxy?.useDict('district_type'));
 // 各区县异常比例
-const abnormalData = ref([]);
 const chartOption1 = ref(option8);
 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);
-  }
+  getTowerAbnormal().then((res) => {
+    const yAxisData = [];
+    const data = [];
+    const data2 = [];
+    res.rows.forEach((item) => {
+      yAxisData.push(item.area);
+      data.push(item.num);
+      data2.push(!!item.num ? item.num : null);
+    });
+    chartOption1.value.yAxis.data = yAxisData;
+    chartOption1.value.series[0].data = data;
+    chartOption1.value.series[1].data = data;
+  });
 };
 // 各区县告警类型分析
 // true 降序
+const queryParams = reactive({
+  sortName: '',
+  sort: ''
+});
 const rangeData = ref([]);
 const townshipList = async () => {
-  try {
-    const response = await getTowerWarn();
-    if (response.code === 0 && response.rows) {
-      rangeData.value = response.rows;
+  getTowerWarn().then((res) => {
+    rangeData.value = res.rows;
+  });
+};
+const handleSort = (type: string) => {
+  if (type === queryParams.sortName) {
+    if (queryParams.sort === 'desc') {
+      queryParams.sort = 'asc';
+    } else if (queryParams.sort === 'asc') {
+      queryParams.sort = '';
     } else {
-      console.error('获取告警类型分析数据失败:', response.msg);
+      queryParams.sort = 'desc';
     }
-  } catch (error) {
-    console.error('请求告警类型分析数据失败:', error);
+  } else {
+    queryParams.sortName = type;
+    queryParams.sort = 'desc';
   }
+  townshipList();
 };
 // 影响分析
-const analyzeData = ref({
-  power_cut: 0,
-  under_voltage: 0,
-  service_out: 0,
-  offline: 0,
-  overheat: 0,
-  smoke: 0,
-  water_out: 0,
-  trespass: 0
-});
-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);
-    }
-  } catch (error) {
-    console.error('请求告警数据失败:', error);
-  }
+const analyzeData = ref([
+  { status_name: '停电', num: '' },
+  { status_name: '欠压', num: '' },
+  { status_name: '退服', num: '' },
+  { status_name: '离线', num: '' },
+  { status_name: '温度过高', num: '' },
+  { status_name: '烟雾', num: '' },
+  { status_name: '水浸', num: '' },
+  { status_name: '非法侵入', num: '' }
+]);
+const getTower = () => {
+  getTowerStatus().then((res) => {
+    analyzeData.value = res.rows;
+  });
 };
 onMounted(() => {
   getTower();
@@ -183,7 +221,7 @@ onMounted(() => {
   width: 1589px;
   height: 2071px;
   background: url('@/assets/images/map/rightMenu/rainMonitor/dialog.png') no-repeat;
-  padding: 130px 20px 20px 20px;
+  padding: 130px 50px 50px 50px;
   font-size: 36px;
   position: relative;
   .card-header {
@@ -192,6 +230,7 @@ onMounted(() => {
     align-items: center;
     margin-top: 35px;
     .title-box {
+      width: 100%;
       background-image: url('@/assets/images/map/rightMenu/rainMonitor/titleBox.png');
       background-repeat: no-repeat;
       background-size: 370px 35px;
@@ -247,17 +286,25 @@ onMounted(() => {
   }
 }
 .table {
-  margin-left: 28px;
+  margin-top: 20px;
+  margin-left: 20px;
   .table-header {
     width: 1490px;
     height: 88px;
     background: url('@/assets/images/map/rightMenu/rainMonitor/header.png') no-repeat;
     display: flex;
     align-items: center;
+    .td {
+      color: #edfaff !important;
+    }
     .td-cursor {
       cursor: pointer;
     }
   }
+  .table-content {
+    height: 500px;
+    overflow-y: auto;
+  }
   .tr {
     width: 1487px;
     height: 88px;
@@ -274,27 +321,20 @@ onMounted(() => {
   .gradient-text2 {
     color: transparent !important;
   }
-  .td {
+  .td,
+  .td2 {
     font-size: 38px;
-    color: #edfaff;
     display: flex;
     justify-content: center;
     align-items: center;
-    &:nth-child(1) {
-      width: 140px;
-    }
-    &:nth-child(2) {
-      width: 220px;
-    }
-    &:nth-child(3) {
-      width: 280px;
-    }
-    &:nth-child(4) {
-      flex: 1;
-    }
-    &:nth-child(5) {
-      width: 230px;
-    }
+    flex: 1;
+  }
+  .td {
+    color: #a7ccdf;
+  }
+  .td2 {
+    color: #edfaff;
+    font-family: BEBAS-1;
   }
   .down-icon {
     display: inline-block;
@@ -308,7 +348,7 @@ onMounted(() => {
     display: inline-block;
     width: 33px;
     height: 33px;
-    background: url('@/assets/images/map/rightMenu/rainMonitor/asc.png') no-repeat;
+    background: url('@/assets/images/common/asc.png') no-repeat;
     cursor: pointer;
     margin-left: 8px;
   }
@@ -316,213 +356,121 @@ onMounted(() => {
     display: inline-block;
     width: 33px;
     height: 33px;
-    background: url('@/assets/images/map/rightMenu/rainMonitor/desc.png') no-repeat;
+    background: url('@/assets/images/common/desc.png') no-repeat;
     cursor: pointer;
     margin-left: 8px;
   }
-  .rank1,
-  .rank2,
-  .rank3,
-  .rank-other {
-    width: 50px;
-    height: 48px;
-    color: #ecfaff;
-    font-family: BEBAS-1, serif;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-  }
-  .rank1 {
-    height: 47px;
-    background: url('@/assets/images/map/rightMenu/rainMonitor/first.png') no-repeat;
-  }
-  .rank2 {
-    background: url('@/assets/images/map/rightMenu/rainMonitor/second.png') no-repeat;
-  }
-  .rank3 {
-    background: url('@/assets/images/map/rightMenu/rainMonitor/third.png') no-repeat;
-  }
-  .rank-other {
-    background: url('@/assets/images/map/rightMenu/rainMonitor/other.png') no-repeat;
+  .unSort-icon {
+    display: inline-block;
+    width: 33px;
+    height: 32px;
+    background: url('@/assets/images/common/unSort.png') no-repeat;
+    background-size: 100% 100%;
+    cursor: pointer;
+    margin-left: 8px;
   }
 }
+.title {
+  font-size: 60px;
+  position: absolute;
+  top: 30px;
+  left: 160px;
+}
 .data-box {
-  width: 1495px;
-  height: 172px;
-  background: url('@/assets/images/map/rightMenu/rainMonitor/box1.png') no-repeat;
-  margin-left: 28px;
-  color: #a7ccdf;
-  padding-left: 50px;
-  padding-top: 20px;
-  font-size: 32px;
   display: flex;
-  .line1 {
-    display: flex;
-    .line-item {
-      width: 192.46px;
-    }
-  }
-  .line2 {
-    display: flex;
-    margin: 10px 0;
-    position: relative;
-    .dot {
-      width: 65px;
-      height: 65px;
-      background: url('@/assets/images/map/rightMenu/rainMonitor/dot.png') no-repeat;
-      cursor: pointer;
-      position: absolute;
-      top: 50%;
-      transform: translateY(-50%);
-    }
-    .line-item {
-      width: 192px;
-      height: 30px;
-      &:nth-child(1) {
-        border-bottom-left-radius: 30px;
-        border-top-left-radius: 30px;
-        background-color: #a8ccdd;
-      }
-      &:nth-child(2) {
-        background-color: #2b81ff;
-      }
-      &:nth-child(3) {
-        background-color: #00fce6;
-      }
-      &:nth-child(4) {
-        background-color: #97d664;
-      }
-      &:nth-child(5) {
-        background-color: #ffaf00;
-      }
-      &:nth-child(6) {
-        border-bottom-right-radius: 30px;
-        border-top-right-radius: 30px;
-        background-color: #ff2e3b;
-      }
-    }
-  }
-  .line3 {
-    display: flex;
-    .line-item {
-      width: 192.46px;
-      &:last-child {
-        display: flex;
-        justify-content: space-between;
-      }
-    }
-  }
-  .box {
-    width: 203px;
-    height: 119px;
-    background: url('@/assets/images/map/rightMenu/rainMonitor/box2.png') no-repeat;
+  flex-wrap: wrap;
+  align-items: center;
+  .data-item {
+    width: 342px;
+    height: 160px;
+    background: url('@/assets/images/map/rightMenu/ironTower/boxBg.png') no-repeat;
+    background-size: 100% 100%;
+    color: #fff;
     display: flex;
     flex-direction: column;
     justify-content: center;
-    align-items: center;
-    margin-left: 40px;
-    margin-top: 5px;
+    font-size: 38px;
+    margin-top: 30px;
+    margin-right: 40px;
+    padding: 0 30px;
+    &:nth-child(4),
+    &:nth-child(8) {
+      margin-right: 0;
+    }
     .text1 {
-      font-size: 32px;
       color: #a7ccdf;
+      margin-bottom: 10px;
     }
     .text2 {
-      font-size: 38px;
-      font-family: BEBAS-1, serif;
+      font-size: 48px;
+      font-family: BEBAS-1;
       color: transparent;
-      background-image: linear-gradient(to bottom, #ffffff 25%, #d2fff8 50%, #6bffec 70%, #00fde8 100%);
-      /* 使用 -webkit-background-clip 属性将背景剪裁至文本形状 */
+      background-image: linear-gradient(to bottom, #ffffff 20%, #2b72d6 100%);
       -webkit-background-clip: text;
-      /* 非Webkit内核浏览器需要使用标准前缀 */
       background-clip: text;
-      /* 把当前元素设置为行内块，以便能够应用背景 */
       display: inline-block;
     }
-  }
-}
-.data-box2 {
-  width: 1492px;
-  height: 200px;
-  background: url('@/assets/images/map/rightMenu/rainMonitor/dataBox.png') no-repeat;
-  background-size: 1492px 123px;
-  background-position: bottom;
-  margin-left: 28px;
-  display: flex;
-  padding: 0 70px;
-  align-items: center;
-  .data-item {
-    display: flex;
-    flex: 1;
-    .item-right {
-      margin-left: 20px;
-      .text-box {
-        display: flex;
-        margin-bottom: 20px;
-        .text1 {
-          font-size: 32px;
-          color: #ffffff;
-        }
-        .text2 {
-          font-size: 32px;
-          color: #a7ccdf;
-          margin-left: 5px;
-        }
-      }
-      .text3,
-      .text4,
-      .text5,
-      .text6 {
-        font-size: 38px;
-        font-family: BEBAS-1, serif;
-        /* 设置字体透明 */
-        color: transparent;
-        /* 使用 -webkit-background-clip 属性将背景剪裁至文本形状 */
-        -webkit-background-clip: text;
-        /* 非Webkit内核浏览器需要使用标准前缀 */
-        background-clip: text;
-        /* 把当前元素设置为行内块，以便能够应用背景 */
-        display: inline-block;
-      }
-      .text3 {
-        background-image: linear-gradient(to bottom, #ffffff 25%, #e58400 100%);
-      }
-      .text4 {
-        background-image: linear-gradient(to bottom, #ffffff 25%, #6fe695 100%);
-      }
-      .text5 {
-        background-image: linear-gradient(to bottom, #ffffff 25%, #00fde8 100%);
-      }
-      .text6 {
-        background-image: linear-gradient(to bottom, #ffffff 25%, #2b72d6 100%);
-      }
-    }
-    .icon1,
-    .icon2,
-    .icon3,
-    .icon4 {
-      width: 152px;
-      height: 138px;
+    .box-content {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
     }
     .icon1 {
-      width: 141px;
-      height: 126px;
-      background: url('@/assets/images/map/rightMenu/rainMonitor/icon1.png') no-repeat;
+      width: 51px;
+      height: 69px;
+      background: url('@/assets/images/map/rightMenu/ironTower/icon1.png') no-repeat;
+      background-size: 100% 100%;
+      display: inline-block;
     }
     .icon2 {
-      background: url('@/assets/images/map/rightMenu/rainMonitor/icon2.png') no-repeat;
+      width: 68px;
+      height: 64px;
+      background: url('@/assets/images/map/rightMenu/ironTower/icon2.png') no-repeat;
+      background-size: 100% 100%;
+      display: inline-block;
     }
     .icon3 {
-      background: url('@/assets/images/map/rightMenu/rainMonitor/icon3.png') no-repeat;
+      width: 73px;
+      height: 72px;
+      background: url('@/assets/images/map/rightMenu/ironTower/icon3.png') no-repeat;
+      background-size: 100% 100%;
+      display: inline-block;
     }
     .icon4 {
-      background: url('@/assets/images/map/rightMenu/rainMonitor/icon4.png') no-repeat;
+      width: 82px;
+      height: 66px;
+      background: url('@/assets/images/map/rightMenu/ironTower/icon4.png') no-repeat;
+      background-size: 100% 100%;
+      display: inline-block;
+    }
+    .icon5 {
+      width: 49px;
+      height: 71px;
+      background: url('@/assets/images/map/rightMenu/ironTower/icon5.png') no-repeat;
+      background-size: 100% 100%;
+      display: inline-block;
+    }
+    .icon6 {
+      width: 59px;
+      height: 72px;
+      background: url('@/assets/images/map/rightMenu/ironTower/icon6.png') no-repeat;
+      background-size: 100% 100%;
+      display: inline-block;
+    }
+    .icon7 {
+      width: 73px;
+      height: 73px;
+      background: url('@/assets/images/map/rightMenu/ironTower/icon7.png') no-repeat;
+      background-size: 100% 100%;
+      display: inline-block;
+    }
+    .icon8 {
+      width: 69px;
+      height: 71px;
+      background: url('@/assets/images/map/rightMenu/ironTower/icon8.png') no-repeat;
+      background-size: 100% 100%;
+      display: inline-block;
     }
   }
 }
-.title {
-  font-size: 60px;
-  position: absolute;
-  top: 30px;
-  left: 160px;
-}
 </style>

src/views/globalMap/RightMenu/echartOptions.ts

@@ -2,6 +2,7 @@ import { graphic } from 'echarts';
 import pieIcon from '@/assets/images/map/rightMenu/pie-icon.png';
 import pieBg from '@/assets/images/map/rightMenu/pie-bg.png';
 import dotImg from '@/assets/images/map/rightMenu/layerAnalysis/dot.png';
+import dotImg2 from '@/assets/images/map/rightMenu/ironTower/dot.png';
 // 降雨过程实况
 export const option1 = {
   xAxis: {
@@ -615,7 +616,7 @@ export const option8 = {
   grid: {
     left: '60',
     right: '60',
-    bottom: '0',
+    bottom: '40',
     containLabel: true
   },
   xAxis: {
@@ -623,31 +624,31 @@ export const option8 = {
     axisLine: {
       show: true,
       lineStyle: {
-        color: '#395d9f'
+        color: '#3c5c9d'
       }
     },
     splitLine: {
-      show: false,
+      show: true,
       interval: 0,
       lineStyle: {
-        type: 'dotted',
-        color: '#395d9f'
+        type: 'dashed',
+        color: '#3c5c9d'
       }
     },
     axisLabel: {
       color: '#a7ccdf',
       fontFamily: 'BEBAS-1',
-      fontSize: '32'
+      fontSize: '32',
+      margin: 15
     }
   },
   yAxis: {
-    name: '比例（%）',
     type: 'category',
     axisTick: false,
     axisLine: {
       show: true,
       lineStyle: {
-        color: '#395d9f'
+        color: '#3c5c9d'
       }
     },
     nameTextStyle: {
@@ -660,16 +661,16 @@ export const option8 = {
       fontFamily: 'BEBAS-1',
       fontSize: '32'
     },
-    data: ['0.1-10', '10-25', '25-50', '50-100', '100-250', '>250']
+    data: []
   },
   graphic: {
     elements: [
       {
         type: 'text',
-        left: '20', // 这里指定了文本在容器的左侧
+        left: '60', // 这里指定了文本在容器的左侧
         bottom: '0', // 可以根据需要调整位置
         style: {
-          text: '监测站(个)', // 你要显示的文本
+          text: '比例(%)', // 你要显示的文本
           fill: '#a7ccdf', // 文本颜色
           fontSize: 32 // 文本大小
         }
@@ -679,7 +680,29 @@ export const option8 = {
   series: [
     {
       type: 'bar',
-      barWidth: 25,
+      barWidth: 20,
+      itemStyle: {
+        color: new graphic.LinearGradient(0, 0, 1, 0, [
+          {
+            offset: 0,
+            color: 'rgba(0, 88, 219, 0.2)'
+          },
+          {
+            offset: 1,
+            color: 'rgba(67, 147, 255, 1)'
+          }
+        ])
+      },
+      data: []
+    },
+    {
+      type: 'scatter',
+      symbol: 'image://' + dotImg2,
+      symbolSize: 44,
+      symbolOffset: [0, 0],
+      label: {
+        show: false
+      },
       data: []
     }
   ]