yjdp-web/src/views/routineCommandMap/RightSection/index.vue

<template>
  <div class="right-section">
    <div class="common-title gradient-text">突发事件</div>
    <div class="box">
      <div class="box-header">
        <div class="common-title-box">事件情况</div>
        <el-select v-model="queryParams.year" class="custom-select" popper-class="custom-select-popper" :teleported="false" @change="initData">
          <el-option v-for="level in yearOptions" :key="level.value" :label="level.name" :value="level.value"></el-option>
        </el-select>
      </div>
      <div class="data-box">
        <div class="box-item">
          <i class="year-icon" />
          <div class="box-flex">
            <div class="text-box">
              <div class="gradient-text3 text1">{{ statisticalData.nf_value }}</div>
              <div class="text2">件</div>
            </div>
            <div class="text3">{{ statisticalData.nf }}年度</div>
          </div>
        </div>
        <div class="box-item">
          <i class="season-icon" />
          <div class="box-flex">
            <div class="text-box">
              <div class="gradient-text3 text1">{{ statisticalData.jd_value }}</div>
              <div class="text2">件</div>
            </div>
            <div class="text3">第{{ getChineseQuarter(statisticalData.jd) }}季度</div>
          </div>
        </div>
        <div class="box-item">
          <i class="month-icon" />
          <div class="box-flex">
            <div class="text-box">
              <div class="text4">{{ statisticalData.yf_value }}</div>
              <div class="text2">件</div>
            </div>
            <div class="text3">{{ statisticalData.yf }}月份</div>
          </div>
        </div>
      </div>
    </div>
    <div class="chart-box">
      <Chart :option="chartOption1" style="width: 546px; height: 546px" />
      <div class="data-box2">
        <div class="table">
          <div class="tr" style="background: none">
            <div class="th"></div>
            <div class="th">事件类型</div>
            <div class="th">数量</div>
            <div class="th">百分比</div>
          </div>
          <div class="table-content">
            <div v-for="(item, index) in eventTypeData" :key="index" class="tr">
              <div class="td">
                <div :class="['0'].includes(item.event_type) ? 'td-icon' : 'td-icon2'"></div>
              </div>
              <div class="td">
                <dict-tag :options="mm_event_type" :value="item.event_type" />
              </div>
              <div class="td">
                <div :class="['0'].includes(item.event_type) ? 'td-text1' : 'td-text2'">{{ item.cn }}</div>
                件
              </div>
              <div class="td td-text2">{{ item.ratio ? item.ratio + '%' : '' }}</div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <EventReport />
  </div>
</template>

<script lang="ts" setup name="RightSection">
import EventReport from './EventReport/index.vue';
import { option1 } from './chartOptions';
import BigNumber from 'bignumber.js';
import { getEventCount, getEventTypeCount } from '@/api/duty/eventing';

const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const { mm_event_type } = toRefs<any>(
  proxy?.useDict('mm_event_type')
);
const queryParams = reactive({
  year: '2024'
});
const yearOptions = reactive([{ name: '2024', value: '2024' }]);
const statisticalData = ref({
  nf: '',
  nf_value: '',
  jd: '',
  jd_value: '',
  yf: '',
  yf_value: ''
});
const chartOption1 = ref(option1);
const eventTypeData = ref([]);
const colorList = reactive(['#247dff', '#00fde7']);
const initData = () => {
  getEventCount({
    query: {
      year_n: queryParams.year
    }
  }).then((res) => {
    statisticalData.value = res.rows[0];
  });
  getEventTypeCount({
    query: {
      year_n: queryParams.year
    }
  }).then((res) => {
    const data = res.rows;
    eventTypeData.value = data;
    const placeHolderStyle = {
      label: {
        show: false
      },
      labelLine: {
        show: false
      },
      color: 'rgba(0, 0, 0, 0)',
      borderColor: 'rgba(0, 0, 0, 0)',
      borderWidth: 0
    };
    let total = 0;
    data.forEach((item) => {
      total += item.cn;
    });
    const transparentData = {
      value: new BigNumber(total).multipliedBy(0.02).toNumber(),
      name: '',
      itemStyle: placeHolderStyle
    };
    const len = data.length;
    const chartData = [];
    const chartData2 = [];
    for (let i = 0; i < len; i++) {
      chartData.push({
        // name: data[i].name,
        value: data[i].cn,
        itemStyle: {
          color: ['0'].includes(data[i].event_type) ? colorList[0] : colorList[1]
        }
      });
      chartData2.push({
        // name: data[i].name,
        value: data[i].cn,
        itemStyle: {
          color: ['0'].includes(data[i].event_type) ? colorList[0] : colorList[1],
          opacity: 0.1
        }
      });
      chartData.push(transparentData);
      chartData2.push(transparentData);
    }
    chartOption1.value.series[0].data = chartData;
    chartOption1.value.series[1].data = chartData2;
  });
};
const getChineseQuarter = (quarter: number): string => {
  const chineseQuarters = ['一', '二', '三', '四'];
  return chineseQuarters[quarter - 1] || '';
};
onMounted(() => {
  initData();
});
</script>

<style lang="scss" scoped>
.right-section {
  display: flex;
  flex-direction: column;
  font-size: 36px;
  margin-left: 65px;
  width: 1962px;
  height: 2116px;
  background: url('@/assets/images/routineCommandMap/eventReport/dialog.png') no-repeat;
  background-size: 100% 100%;
  position: relative;
  padding: 140px 60px 0 50px;
  .box {
    .box-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    .data-box {
      width: 1896px;
      height: 230px;
      background: url('@/assets/images/routineCommandMap/dataBox.png') no-repeat bottom center;
      background-size: 1896px 123px;
      display: flex;
      padding-left: 130px;
      .box-item {
        display: flex;
        align-items: center;
        margin-right: 180px;
        &:last-child {
          margin-right: 0;
        }
        .year-icon {
          background: url('@/assets/images/routineCommandMap/year.png') no-repeat;
        }
        .season-icon {
          background: url('@/assets/images/routineCommandMap/season.png') no-repeat;
        }
        .month-icon {
          background: url('@/assets/images/routineCommandMap/month.png') no-repeat;
        }
        .year-icon,
        .season-icon,
        .month-icon {
          width: 192px;
          height: 200px;
          background-size: 100% 100%;
          display: inline-block;
        }
        .box-flex {
          margin-left: 38px;
          .text-box {
            display: flex;
            align-items: flex-end;
            .text1 {
              font-size: 64px;
              font-family: BEBAS-1;
            }
            .text2 {
              font-size: 38px;
              color: #a7ccdf;
              margin-left: 5px;
            }
          }
          .text3 {
            font-size: 44px;
            color: #ffffff;
          }
          .text4 {
            font-size: 64px;
            font-family: BEBAS-1;
            color: transparent;
            background-image: linear-gradient(to bottom, #ffffff 25%, #ff8015 100%);
            -webkit-background-clip: text;
            background-clip: text;
            display: inline-block;
          }
        }
      }
    }
  }
  .custom-select {
    width: 440px !important;
    margin-left: 30px;
  }
}
.chart-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  .data-box2 {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 1204px;
    height: 389px;
    background: url('@/assets/images/routineCommandMap/dataBox2.png') no-repeat;
    .table {
      .tr {
        display: flex;
        align-items: center;
        padding: 0 50px 0 0;
        width: 1087px;
        height: 96px;
        background: url('@/assets/images/routineCommandMap/eventReport/tr.png') no-repeat;
        background-size: 100% 100%;
        margin-top: 15px;
        .td {
          &:nth-child(2) {
            color: #ffffff;
          }
          &:nth-child(4) {
            font-size: 48px;
            color: #00e8ff;
            font-family: BEBAS-1;
          }
        }
        .td,
        .th {
          font-size: 38px;
          color: #a7ccdf;
          &:nth-child(1) {
            width: 90px;
            display: flex;
            justify-content: center;
            align-items: center;
          }
          &:nth-child(2) {
            flex: 1;
            text-align: left;
          }
          &:nth-child(3),
          &:nth-child(4) {
            width: 240px;
            text-align: right;
          }
        }
        .td-icon {
          width: 36px;
          height: 36px;
          border-radius: 10px;
          background-color: #247dff;
        }
        .td-icon2 {
          width: 36px;
          height: 36px;
          border-radius: 10px;
          background-color: #00fde7;
        }
        .td-text1 {
          font-size: 48px;
          color: transparent;
          background-image: linear-gradient(to bottom, #ffffff 25%, #2b72d6 100%);
          -webkit-background-clip: text;
          background-clip: text;
          display: inline-block;
          font-family: BEBAS-1;
        }
        .td-text2 {
          font-size: 48px;
          color: transparent;
          background-image: linear-gradient(to bottom, #ffffff 25%, #21c8d4 100%);
          -webkit-background-clip: text;
          background-clip: text;
          display: inline-block;
          font-family: BEBAS-1;
        }
      }
    }
  }
}
.table-content {
  height: 240px;
  overflow-y: auto;
}
</style>