yjdp-web/src/views/globalMap/RightMenu/TowerStatus.vue

<template>
  <div class="menu-content">
    <div class="gradient-text title">铁塔运行监测</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>
    </div>
    <Chart :option="chartOption1" style="width: 100%; height: 650px" />
    <div class="card-header">
      <div class="title-box">各区县告警类型分析</div>
    </div>
    <div class="table">
      <div class="table-header">
        <div class="td">区县</div>
        <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 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>
  </div>
</template>

<script lang="ts" setup>
import { ref, reactive, 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 chartOption1 = ref(option8);
const fetchAbnormalRateData = async () => {
  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;
  });
};
// 各区县告警类型分析
const queryParams = reactive({
  order_by: 'ffjr',
  sort: 'asc'
});
const rangeData = ref([]);

// 获取告警类型分析数据的方法
const townshipList = async () => {
  const data = {
    query: {
      order_by: queryParams.order_by,
      sort: queryParams.sort
    }
  };
  try {
    const response = await getTowerWarn(data);
    if (response.code === 0 && response.rows) {
      rangeData.value = response.rows;
    } else {
      console.error('获取告警类型分析数据失败:', response.msg);
    }
  } catch (error) {
    console.error('请求告警类型分析数据失败:', error);
  }
};
// 处理排序
const handleSort = (type: string) => {
  if (type === queryParams.order_by) {
    queryParams.sort = queryParams.sort === 'asc' ? 'desc' : 'asc';
  } else {
    queryParams.order_by = type;
    queryParams.sort = 'asc'; // 默认设置为升序
  }
  townshipList(); // 重新获取数据
};
// 影响分析
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();
  townshipList();
  fetchAbnormalRateData();
});
</script>

<style lang="scss" scoped>
.menu-content {
  width: 1589px;
  height: 2071px;
  background: url('@/assets/images/map/rightMenu/rainMonitor/dialog.png') no-repeat;
  padding: 130px 50px 50px 50px;
  font-size: 36px;
  position: relative;
  .card-header {
    display: flex;
    justify-content: space-between;
    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;
      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;
        }
      }
    }
  }
}
.table {
  margin-top: 20px;
  margin-left: 20px;
  .table-header {
    width: 1490px;
    height: 88px;
    background: url('@/assets/images/common/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;
    background: url('@/assets/images/common/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,
  .td2 {
    font-size: 38px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex: 1;
    &:nth-child(6),
    &:nth-child(9) {
      width: 193px;
      flex: unset;
    }
  }
  .td {
    color: #a7ccdf;
  }
  .td2 {
    color: #edfaff;
    font-family: BEBAS-1;
  }
  .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/common/asc.png') no-repeat;
    cursor: pointer;
    margin-left: 8px;
  }
  .desc-icon {
    display: inline-block;
    width: 33px;
    height: 33px;
    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;
  }
}
.title {
  font-size: 60px;
  position: absolute;
  top: 30px;
  left: 160px;
}
.data-box {
  display: flex;
  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;
    font-size: 38px;
    margin-top: 30px;
    margin-right: 40px;
    padding: 0 30px;
    &:nth-child(4),
    &:nth-child(8) {
      margin-right: 0;
    }
    .text1 {
      color: #a7ccdf;
      margin-bottom: 10px;
    }
    .text2 {
      font-size: 48px;
      font-family: BEBAS-1;
      color: transparent;
      background-image: linear-gradient(to bottom, #ffffff 20%, #2b72d6 100%);
      -webkit-background-clip: text;
      background-clip: text;
      display: inline-block;
    }
    .box-content {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    .icon1 {
      width: 51px;
      height: 69px;
      background: url('@/assets/images/map/rightMenu/ironTower/icon1.png') no-repeat;
      background-size: 100% 100%;
      display: inline-block;
    }
    .icon2 {
      width: 68px;
      height: 64px;
      background: url('@/assets/images/map/rightMenu/ironTower/icon2.png') no-repeat;
      background-size: 100% 100%;
      display: inline-block;
    }
    .icon3 {
      width: 73px;
      height: 72px;
      background: url('@/assets/images/map/rightMenu/ironTower/icon3.png') no-repeat;
      background-size: 100% 100%;
      display: inline-block;
    }
    .icon4 {
      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;
    }
  }
}
</style>