hotline-bs/src/views/judicial/left-bottom.vue

<template>
  <div class="left_bottom">
    <div class="left_bottom-title flex">
      <div class="flex items-center">
        <img src="@/assets/img/home/title_arrow.png" alt="">
        高频事项分析
      </div>
      <el-dropdown @command="handleCommand">
        <el-button link class="link-button">
          {{ areaText }}
          <el-icon class="el-icon--right">
            <arrow-down/>
          </el-icon>
        </el-button>
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item v-for="item in areaList" :key="item.value" :command="item">{{ item.name }}</el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
    </div>
    <div class="left_bottom-content">
      <template v-if="list.length">
        <v-chart class="chart" :option="option" :loading="loading" :loading-options="loadingOptions"/>
      </template>
      <template v-else>
        <EmptyCom></EmptyCom>
      </template>
    </div>
  </div>
</template>
<script setup lang="ts">
import {onMounted, ref, watch} from "vue";
import {ArrowDown} from '@element-plus/icons-vue'
import {hotSpot} from "@/api/home";
import dayjs from "dayjs";
import EmptyCom from "@/components/empty-com";
import {loadingOptions} from "@/utils/constants";
import {graphic} from "echarts/core";
import {arraySortByKey} from "@/utils/tools";

const props = defineProps({
  dateArray: {
    type: Array,
    default: () => []
  }
})

const areaList = ref([
  {
    name: '宜宾市',
    value: '511500'
  },
  {
    name: '翠屏区',
    value: '511502'
  },
  {
    name: '南溪区',
    value: '511503'
  },
  {
    name: '叙州区',
    value: '511504'
  },
  {
    name: '江安县',
    value: '511523'
  },
  {
    name: '长宁县',
    value: '511524'
  },
  {
    name: '高县',
    value: '511525'
  },
  {
    name: '珙县',
    value: '511526'
  },
  {
    name: '筠连县',
    value: '511527'
  },
  {
    name: '兴文县',
    value: '511528'
  },
  {
    name: '屏山县',
    value: '511529'
  }
]);
const date = ref([]);
const loading = ref(false);
const option = ref<any>({});
watch(() => props.dateArray, (val: any) => {
  date.value = val;
}, {immediate: true})

watch(() => props.dateArray, () => {
  getData();
})
const areaCode = ref('511500');
const areaText = ref('宜宾市');
const list = ref<any>([]);
const getData = async () => {
  loading.value = true;
  try {
    const {result} = await hotSpot({
      StartDate: dayjs(date.value[0]).format('YYYY-MM-DD'),
      EndDate: dayjs(date.value[1]).format('YYYY-MM-DD'),
      AreaCode: areaCode.value
    });
    list.value = result;

    const category = arraySortByKey(result, 'sumCount',);

    const charts = { // 按顺序排列从大到小
      cityList: category.map((item: any) => item.hotspotName),
      cityData: category.map((item: any) => item.sumCount)
    };
    const top10CityList = charts.cityList;
    const top10CityData = charts.cityData;
    const color = ['#ff9500', '#02d8f9', '#027fff'];
    const color1 = ['#ffb349', '#70e9fc', '#4aa4ff'];

    let lineY = []
    let lineT = []
    for (let i = 0; i < charts.cityList.length; i++) {
      let x = i;
      if (x > 1) {
        x = 2
      }
      const data = {
        name: charts.cityList[i],
        color: color[x],
        value: top10CityData[i],
        barGap: '-100%',
        itemStyle: {
          show: true,
          color: new graphic.LinearGradient(0, 0, 1, 0, [{
            offset: 0,
            color: color[x]
          }, {
            offset: 1,
            color: color1[x]
          }], false),
          borderRadius: 10,
        },
        emphasis: {
          itemStyle: {
            shadowBlur: 15,
            shadowColor: 'rgba(0, 0, 0, 0.1)'
          }
        }
      };
      const data1 = {
        value: top10CityData[0],
        itemStyle: {
          color: '#001235',
          borderRadius: 10
        }
      };
      lineY.push(data)
      lineT.push(data1)
    }

    option.value = {
      backgroundColor: 'rgba(0, 0, 0, 0)',
      title: {
        show: false
      },
      tooltip: {},
      grid: {
        borderWidth: 0,
        top: '5%',
        left: '5%',
        right: '15%',
        bottom: '10%'
      },
      color: color,
      yAxis: [{
        type: 'category',
        inverse: true,
        axisTick: {
          show: false
        },
        axisLine: {
          show: false
        },
        axisLabel: {
          show: false,
          inside: false
        },
        data: top10CityList
      }, {
        type: 'category',
        inverse: true,
        axisLine: {
          show: false
        },
        axisTick: {
          show: false
        },
        axisLabel: {
          show: true,
          inside: false,
          verticalAlign: 'middle',
          lineHeight: '40',
          color: '#fff',
          fontSize: '14',
          fontFamily: 'PingFangSC-Regular',
          formatter: function (val) {
            return `${val}`
          }
        },
        splitArea: {
          show: false
        },
        splitLine: {
          show: false
        },
        data: top10CityData
      }],
      xAxis: {
        type: 'value',
        axisTick: {
          show: false
        },
        axisLine: {
          show: false
        },
        splitLine: {
          show: false
        },
        axisLabel: {
          show: false
        }
      },
      series: [{
        name: 'total',
        type: 'bar',
        zLevel: 1,
        barGap: '-100%',
        barWidth: '10px',
        data: lineT,
        legendHoverLink: false
      }, {
        type: 'bar',
        zLevel: 2,
        barWidth: '10px',
        data: lineY,
        label: {
          color: '#b3ccf8',
          show: true,
          position: [0, '-18px'],
          fontSize: 16,
          formatter: function (a) {
            let num = ''
            let str = ''
            if (a.dataIndex + 1 < 10) {
              num = '0' + (a.dataIndex + 1);
            } else {
              num = (a.dataIndex + 1);
            }
            if (a.dataIndex === 0) {
              str = `{color1|${num}} {color4|${a.name}}`
            } else if (a.dataIndex === 1) {
              str = `{color2|${num}} {color4|${a.name}}`
            } else {
              str = `{color3|${num}} {color4|${a.name}}`
            }
            return str;
          },
          rich: {
            color1: {
              color: '#ff9500',
              fontWeight: 700
            },
            color2: {
              color: '#02d8f9',
              fontWeight: 700
            },
            color3: {
              color: '#027fff',
              fontWeight: 700
            },
            color4: {
              color: '#e5eaff'
            }
          }
        }
      }],
    }
    loading.value = false;
  } catch (e) {
    console.log(e);
    loading.value = false;
  }
}
// 选择省市区
const handleCommand = (command: any) => {
  areaCode.value = command.value;
  areaText.value = command.name;
  getData();
}
onMounted(() => {
  getData();
});
</script>
<style scoped lang="scss">
.left_bottom {
  padding: 0 30px;

  &-title {
    font-size: 20px;
    color: #fff;
    justify-content: space-between;
    align-items: center;
  }

  &-content {
    height: calc(100% - 30px);
  }
}

:deep(.link-button) {
  cursor: pointer;
  color: #7DBDEC;
  display: flex;
  align-items: center;
}
</style>