traffic_sense/traffic-ui/src/views/analysis/eventCategoryStat/index.vue

<template>
  <div class="eventStat">
    <div class="eventStat-header">
      <el-card>
        <template #header>
          <div class="event-category">
            <span>监控点位违反统计</span>
            <el-radio-group v-model="eventDateType" @change="getBarData" size="small">
              <el-radio-button label="今天" value="1" />
              <el-radio-button label="近7天" value="7" />
              <el-radio-button label="近30天" value="30" />
            </el-radio-group>
          </div>
        </template>
        <BaseChart width="100%" height="250px" :option="barOptions" />
      </el-card>
      <el-card>
        <template #header>
          <div class="event-category">
            <span>区域违法分布</span>
            <el-radio-group v-model="regionDateType" @change="getPieData" size="small">
              <el-radio-button label="今天" value="1" />
              <el-radio-button label="近7天" value="7" />
              <el-radio-button label="近30天" value="30" />
            </el-radio-group>
          </div>
        </template>
        <BaseChart width="100%" height="250px" :option="pieOptions" />
      </el-card>

    </div>
    <el-card style="margin-top: 10px;">
      <template #header>
        <div class="event-category">
          <span>每分钟{{ formatDict(eventType) }}统计</span>
          <el-select v-model="eventType" @change="getLineData">
            <el-option v-for="item in eventTypeOptions" :key="item.dictValue" :label="item.dictLabel"
              :value="item.dictValue" />
          </el-select>
        </div>
      </template>
      <BaseChart width="100%" height="250px" :option="lineOptions" />
    </el-card>



  </div>
</template>
<script setup lang="ts">
import BaseChart from '@/components/BaseChart/index.vue'
import { pointEventsStat, regionEventsStat, minuteEventsStat } from '@/api/sense/events/index'
import { getDicts } from '@/api/system/dict/data/index'
const pieData = ref([])
const barData = ref([])
const lineData = ref([])
const eventTypeOptions = ref([])
const eventType = ref('1')
const eventDateType = ref('1')
const regionDateType = ref('1')
const pieOptions = computed(() => {
  let options = {
    tooltip: {
      trigger: 'item'
    },
    legend: {
      orient: 'vertical',
      top: '8%',
      right: 0,
      itemWidth: 10,
      itemHeight: 10,
      itemGap: 10
    },
    grid: {
    },
    series: [
      {
        type: 'pie',
        radius: '50%',
        data: pieData.value,
        center: ['40%', '50%'],
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: 'rgba(0, 0, 0, 0.5)'
          }
        }
      }
    ]
  };
  return options
})
const barOptions = computed(() => {
  const colors = [
    "#FF5733",
    "#7B3F00",
    "#FFC300",
    "#DAF7A6",
    "#FF5733",
    "#008080",
    "#E8EAF6",
    "#FFEEC1",
    "#B39DDB",
    "#4CAF50"
  ];
  const barObj = {}
  barData.value.forEach(item => {
    barObj[item.area_name] = item.event_count
  })
  let options = {
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow'
      }
    },
    grid: {
      left: '5%',
      right: '3%',
      bottom: 0,
      top: '6%',
      containLabel: true
    },
    xAxis: {
      type: 'category',
      data: Object.keys(barObj),
      axisLabel: {
        interval: 0,
        // rotate: 15  // 表示倾斜的角度
      }
    },
    yAxis: {
      type: 'value'
    },
    series: [
      {
        data: Object.values(barObj),
        type: 'bar',
        barWidth: 20,
        itemStyle: {
          color: (params) => {
            return colors[params.dataIndex]
          }
        },
        label: {
          show: true, // 显示数值
          position: 'top' // 在顶部显示
        }

      }
    ]
  };
  return options
})
const lineOptions = computed(() => {
  const xData = lineData.value.map(item => item.time_format)
  const yData = lineData.value.map(item => item.count)
  const options = {
    tooltip: {
      trigger: 'axis',
      appendToBody: true
    },
    grid: {
      left: '1%',
      right: '3%',
      bottom: 0,
      top: '22%',
      containLabel: true
    },
    xAxis: {
      type: 'category',
      axisLabel: {
        show: true,
        // interval: 0,//横轴信息全部显示
        // margin: 5, //刻度标签与轴线之间的距离
      },
      data: xData
    },
    yAxis: {
      type: 'value'
    },
    series: [
      // {
      // name: '',
      // type: 'line',
      // symbol: 'circle', // 默认是空心圆（中间是白色的），改成实心圆
      // showAllSymbol: true,
      // symbolSize: 0,
      // data: yData
      // }
      {
        name: '',
        data: yData,
        type: 'pictorialBar',
        barMinHeight: 50,
        barCategoryGap: '80%',
        symbol: 'path://M0,10 L10,10 C5.5,10 5.5,5 5,0 C4.5,5 4.5,10 0,10 z',
        itemStyle: {
          normal: {
            color: '#65B1E9'
          }
        },
      },
    ]
  };
  return options
})
onMounted(() => {
  getPieData()
  getBarData()
  getLineData()
  getDicts('event_type').then(({ code, data }) => {
    if (code === 200) {
      eventTypeOptions.value = data || []
    }
  })
})
const getPieData = () => {
  regionEventsStat({ dateType: regionDateType.value }).then(({ code, data }) => {
    if (code === 200) {
      pieData.value = data || []
    }
  })
}
const getBarData = () => {
  pointEventsStat({ dateType: eventDateType.value }).then(({ code, data }) => {
    if (code === 200) {
      barData.value = data || []
    }
  })
}
const getLineData = () => {
  minuteEventsStat({ eventType: eventType.value }).then(({ code, data }) => {
    if (code === 200) {
      lineData.value = data || {}
    }
  })
}
const formatDict = (val) => {
  let name = ''
  eventTypeOptions.value.forEach(item => {
    if (item.dictValue === val) {
      name = item.dictLabel
    }
  })
  return name
}

</script>
<style lang="scss" scoped>
.eventStat {
  padding: 10px;
  height: 100%;
  background-color: #F0F2F5;
  position: relative;
}

.event-category {
  display: flex;
  align-items: center;
  justify-content: space-between;

  .el-select {
    width: 250px;
  }
}

.eventStat-header {
  display: flex;

  .el-card {
    flex: 1;

    &:not(:first-child) {
      margin-left: 10px;
    }
  }
}
</style>