铁塔在线状态

src/api/globalMap/TowerStatus.ts

@@ -0,0 +1,23 @@
+// 铁塔状态统计
+export const getTowerStatus = () => {
+  return request({
+    url: '/api/gateway/v2/get_tower_status_count',
+    method: 'get'
+  });
+};
+
+// 各区县告警类型分析
+export const getTowerWarn = () => {
+  return request({
+    url: '/api/gateway/v2/get_tower_area_status_count',
+    method: 'get'
+  });
+};
+
+// 各区县异常比例统计
+export const getTowerAbnormal = () => {
+  return request({
+    url: '/api/gateway/v2/get_tower_area_count',
+    method: 'get'
+  });
+};

src/views/globalMap/RightMenu/TowerStatus.vue

@@ -1,173 +1,664 @@
 <template>
-  <div class="monitoring">
-    <div class="header">
-      <h2>铁塔运行监测</h2>
-      <div class="stats">
-        <div v-for="(value, key) in stats" :key="key" class="stat-item">
-          <p>{{ value }}</p>
-          <span>{{ key }}</span>
+  <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 class="text2">xx</div>
+          </div>
+          <div class="text3">{{ 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 class="text2">xx</div>
+          </div>
+          <div class="text4">{{ 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 class="text2">xx</div>
+          </div>
+          <div class="text5">{{ 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 class="text2">xx</div>
+          </div>
+          <div class="text6">{{ 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 class="text2">xx</div>
+          </div>
+          <div class="text7">{{ 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 class="text2">xx</div>
+          </div>
+          <div class="text8">{{ 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 class="text2">xx</div>
+          </div>
+          <div class="text9">{{ 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 class="text2">xx</div>
+          </div>
+          <div class="text10">{{ analyzeData.trespass }}</div>
         </div>
       </div>
     </div>
-
-    <div class="chart">
-      <h3>各区县异常比例</h3>
-      <!-- 使用外部图表库或者CSS实现柱状图 -->
-      <div class="chart-container">
-        <bar-chart :data="chartData" :options="chartOptions" />
+    <div class="card-header">
+      <div class="title-box">各区县异常比例</div>
+      <!-- 图表区域 -->
+      <el-select>
+        <el-option v-for="item in abnormal" :key="item.value" :label="item.name" :value="item.value" />
+      </el-select>
+    </div>
+    <Chart :option="chartOption1" style="width: 100%; height: 505px" />
+    <div class="card-header">
+      <div class="title-box">
+        <div>各区县告警类型分析</div>
       </div>
     </div>
-
     <div class="table">
-      <h3>各区县告警类型分析</h3>
-      <el-table-v2 v-model:sort-state="sortState" :columns="columns" :data="data" :width="700" :height="400" fixed="50%" @column-sort="onSort" />
+      <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>
+      </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>
     </div>
   </div>
 </template>
 
 <script lang="ts" setup>
-// import { ref, onMounted } from 'vue';
-// import { TableV2SortOrder } from 'element-plus';
-// import type { SortBy, SortState } from 'element-plus';
-// import { Bar, useChart } from 'vue-chartjs';
-// import 'chart.js/auto';
-//
-// const generateColumns = (length = 10, prefix = 'column-', props?: any) =>
-//   Array.from({ length }).map((_, columnIndex) => ({
-//     ...props,
-//     key: `${prefix}${columnIndex}`,
-//     dataKey: `${prefix}${columnIndex}`,
-//     title: `Column ${columnIndex}`,
-//     width: 150
-//   }));
-//
-// const generateData = (columns: ReturnType<typeof generateColumns>, length = 200, prefix = 'row-') =>
-//   Array.from({ length }).map((_, rowIndex) => {
-//     return columns.reduce(
-//       (rowData, column, columnIndex) => {
-//         rowData[column.dataKey] = `Row ${rowIndex} - Col ${columnIndex}`;
-//         return rowData;
-//       },
-//       {
-//         id: `${prefix}${rowIndex}`,
-//         parentId: null
-//       }
-//     );
-//   });
-//
-// const columns = generateColumns(10);
-// const data = ref(generateData(columns, 200));
-//
-// columns[0].sortable = true;
-// columns[1].sortable = true;
-//
-// const sortState = ref<SortState>({
-//   'column-0': TableV2SortOrder.DESC,
-//   'column-1': TableV2SortOrder.ASC
-// });
-//
-// const onSort = ({ key, order }: SortBy) => {
-//   sortState.value[key] = order;
-//   data.value = data.value.reverse();
-// };
-//
-// const chartData = ref({
-//   labels: ['茂南区', '电白区', '信宜市', '高州市', '化州市', '滨海新区', '高新区', '水东湾新城'],
-//   datasets: [
-//     {
-//       label: '异常比例 (%)',
-//       data: [20, 25, 30, 35, 5, 15, 40, 45],
-//       backgroundColor: [
-//         'rgba(255, 99, 132, 0.2)',
-//         'rgba(54, 162, 235, 0.2)',
-//         'rgba(255, 206, 86, 0.2)',
-//         'rgba(75, 192, 192, 0.2)',
-//         'rgba(153, 102, 255, 0.2)',
-//         'rgba(255, 159, 64, 0.2)',
-//         'rgba(255, 205, 86, 0.2)',
-//         'rgba(201, 203, 207, 0.2)'
-//       ],
-//       borderColor: [
-//         'rgba(255, 99, 132, 1)',
-//         'rgba(54, 162, 235, 1)',
-//         'rgba(255, 206, 86, 1)',
-//         'rgba(75, 192, 192, 1)',
-//         'rgba(153, 102, 255, 1)',
-//         'rgba(255, 159, 64, 1)',
-//         'rgba(255, 205, 86, 1)',
-//         'rgba(201, 203, 207, 1)'
-//       ],
-//       borderWidth: 1
-//     }
-//   ]
-// });
-//
-// const chartOptions = {
-//   scales: {
-//     y: {
-//       beginAtZero: true,
-//       title: {
-//         display: true,
-//         text: '异常比例 (%)'
-//       }
-//     }
-//   },
-//   responsive: true,
-//   maintainAspectRatio: false
-// };
-//
-// const { renderChart } = useChart();
-//
-// onMounted(() => {
-//   renderChart(chartData.value, chartOptions);
-// });
+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 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;
+  });
+};
+// 各区县告警类型分析
+// 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;
+      });
+    }
+    handleGetTowerWarn();
+  },
+  { immediate: true }
+);
+const handleSort = () => {
+  if (queryParams.sort === 'desc') {
+    queryParams.sort = 'asc';
+  } else {
+    queryParams.sort = 'desc';
+  }
+  handleGetTowerWarn();
+};
+// 影响分析
+const towerStatus = reactive([25, 50]);
+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 = () => {
+  getTowerStatus({
+    query: {
+      start_num: towerStatus[0],
+      end_num: towerStatus[1],
+      timeOption: timeOption.value
+    }
+  }).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;
+};
+const initData = () => {
+  handleGetTowerAbnormal();
+  handleGetTowerWarn();
+  getTower();
+};
+initData();
 </script>
 
-<style>
-.monitoring {
-  width: 800px;
-  margin: 0 auto;
-  font-family: Arial, sans-serif;
+<style lang="scss" scoped>
+.menu-content {
+  width: 1589px;
+  height: 2071px;
+  background: url('@/assets/images/map/rightMenu/rainMonitor/dialog.png') no-repeat;
+  padding: 130px 20px 20px 20px;
+  font-size: 36px;
+  position: relative;
+  .card-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-top: 35px;
+    .title-box {
+      background-image: url('@/assets/images/map/rightMenu/rainMonitor/titleBox.png');
+      background-repeat: no-repeat;
+      background-size: 370px 35px;
+      background-position: bottom left;
+      font-size: 44px;
+      color: #fff;
+      padding-left: 50px;
+      display: flex;
+      align-items: center;
+      .line {
+        background-color: #dce2ec;
+        width: 3px;
+        height: 44px;
+        margin: 0 30px;
+      }
+      .text2 {
+        font-size: 44px;
+      }
+      .text3 {
+        font-size: 38px;
+        color: #a7ccdf;
+      }
+    }
+    .btn-box {
+      display: flex;
+      align-items: center;
+      .btn {
+        width: 244px;
+        height: 120px;
+        background: url('@/assets/images/map/rightMenu/rainMonitor/btn.png') no-repeat;
+        cursor: pointer;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        .more-icon {
+          width: 47px;
+          height: 43px;
+          background: url('@/assets/images/map/rightMenu/rainMonitor/more.png') no-repeat;
+          margin-right: 5px;
+        }
+        .export-icon {
+          width: 43px;
+          height: 45px;
+          background: url('@/assets/images/map/rightMenu/rainMonitor/export.png') no-repeat;
+          margin-right: 5px;
+        }
+        .btn-text {
+          color: #edfaff;
+          font-size: 32px;
+        }
+      }
+    }
+  }
 }
-.header {
-  background-color: #f9f9f9;
-  padding: 20px;
-  border-radius: 5px;
+.table {
+  margin-left: 28px;
+  .table-header {
+    width: 1490px;
+    height: 88px;
+    background: url('@/assets/images/map/rightMenu/rainMonitor/header.png') no-repeat;
+    display: flex;
+    align-items: center;
+    .td-cursor {
+      cursor: pointer;
+    }
+  }
+  .tr {
+    width: 1487px;
+    height: 88px;
+    background: url('@/assets/images/map/rightMenu/rainMonitor/tr.png') no-repeat;
+    display: flex;
+    align-items: center;
+    margin-top: 10px;
+    .td {
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+  }
+  .gradient-text2 {
+    color: transparent !important;
+  }
+  .td {
+    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;
+    }
+  }
+  .down-icon {
+    display: inline-block;
+    width: 33px;
+    height: 15px;
+    background: url('@/assets/images/map/rightMenu/rainMonitor/down.png') no-repeat;
+    cursor: pointer;
+    margin-left: 8px;
+  }
+  .asc-icon {
+    display: inline-block;
+    width: 33px;
+    height: 33px;
+    background: url('@/assets/images/map/rightMenu/rainMonitor/asc.png') no-repeat;
+    cursor: pointer;
+    margin-left: 8px;
+  }
+  .desc-icon {
+    display: inline-block;
+    width: 33px;
+    height: 33px;
+    background: url('@/assets/images/map/rightMenu/rainMonitor/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;
+  }
 }
-.stats {
+.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;
-  justify-content: space-between;
-  flex-wrap: wrap;
-}
-.stat-item {
-  width: 100px;
-  text-align: center;
-  margin-bottom: 10px;
-}
-.chart {
-  margin-top: 20px;
+  .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;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    margin-left: 40px;
+    margin-top: 5px;
+    .text1 {
+      font-size: 32px;
+      color: #a7ccdf;
+    }
+    .text2 {
+      font-size: 38px;
+      font-family: BEBAS-1, serif;
+      color: transparent;
+      background-image: linear-gradient(to bottom, #ffffff 25%, #d2fff8 50%, #6bffec 70%, #00fde8 100%);
+      /* 使用 -webkit-background-clip 属性将背景剪裁至文本形状 */
+      -webkit-background-clip: text;
+      /* 非Webkit内核浏览器需要使用标准前缀 */
+      background-clip: text;
+      /* 把当前元素设置为行内块，以便能够应用背景 */
+      display: inline-block;
+    }
+  }
 }
-.bar {
+.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;
-  margin-bottom: 10px;
-}
-.bar-inner {
-  height: 20px;
-  background-color: #5ba5f9;
-  margin: 0 10px;
-}
-.table {
-  margin-top: 20px;
-}
-table {
-  width: 100%;
-  border-collapse: collapse;
+  .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;
+    }
+    .icon1 {
+      width: 141px;
+      height: 126px;
+      background: url('@/assets/images/map/rightMenu/rainMonitor/icon1.png') no-repeat;
+    }
+    .icon2 {
+      background: url('@/assets/images/map/rightMenu/rainMonitor/icon2.png') no-repeat;
+    }
+    .icon3 {
+      background: url('@/assets/images/map/rightMenu/rainMonitor/icon3.png') no-repeat;
+    }
+    .icon4 {
+      background: url('@/assets/images/map/rightMenu/rainMonitor/icon4.png') no-repeat;
+    }
+  }
 }
-th,
-td {
-  border: 1px solid #ccc;
-  padding: 8px;
-  text-align: center;
+.title {
+  font-size: 60px;
+  position: absolute;
+  top: 30px;
+  left: 160px;
 }
 </style>

src/views/globalMap/RightMenu/echartOptions.ts

@@ -606,6 +606,81 @@ export const option7 = {
         borderWidth: 2
       },
       data: []
+    }
+  ]
+};
+
+// 各区县异常比例
+export const option8 = {
+  grid: {
+    left: '60',
+    right: '60',
+    bottom: '0',
+    containLabel: true
+  },
+  xAxis: {
+    type: 'value',
+    axisLine: {
+      show: true,
+      lineStyle: {
+        color: '#395d9f'
+      }
+    },
+    splitLine: {
+      show: false,
+      interval: 0,
+      lineStyle: {
+        type: 'dotted',
+        color: '#395d9f'
+      }
+    },
+    axisLabel: {
+      color: '#a7ccdf',
+      fontFamily: 'BEBAS-1',
+      fontSize: '32'
+    }
+  },
+  yAxis: {
+    name: '比例（%）',
+    type: 'category',
+    axisTick: false,
+    axisLine: {
+      show: true,
+      lineStyle: {
+        color: '#395d9f'
+      }
+    },
+    nameTextStyle: {
+      color: '#a7ccdf',
+      fontFamily: 'PingFang SC',
+      fontSize: '32'
     },
+    axisLabel: {
+      color: '#a7ccdf',
+      fontFamily: 'BEBAS-1',
+      fontSize: '32'
+    },
+    data: ['0.1-10', '10-25', '25-50', '50-100', '100-250', '>250']
+  },
+  graphic: {
+    elements: [
+      {
+        type: 'text',
+        left: '20', // 这里指定了文本在容器的左侧
+        bottom: '0', // 可以根据需要调整位置
+        style: {
+          text: '监测站(个)', // 你要显示的文本
+          fill: '#a7ccdf', // 文本颜色
+          fontSize: 32 // 文本大小
+        }
+      }
+    ]
+  },
+  series: [
+    {
+      type: 'bar',
+      barWidth: 25,
+      data: []
+    }
   ]
 };