sl-sfy-safety/src/views/dashboard/home/components/AlgoDataPanel copy.vue

<template>
  <div class="algo-data">
    <span class="algo-tit">算法数据分析</span>
    <CensusTabs @check-tab="onCheckTab" />
    <v-chart class="chart" :option="option" />
    <div class="stat-show">
      <ViolationStatItem :data="getVioStatData(0)" />
      <div class="stat-divider"></div>
      <ViolationStatItem :data="getVioStatData(1)" />
      <div class="stat-divider"></div>
      <ViolationStatItem :data="getVioStatData(2)" />
      <div class="stat-divider"></div>
      <ViolationStatItem :data="getVioStatData(3)" />
    </div>
  </div>
</template>

<script setup lang="ts">
  import { computed, ref } from 'vue';
  import CensusTabs from './AlgoCensusTabs.vue';
  import ViolationStatItem from './ViolationStatItem.vue';
  import { TimeTabEnum, violationHandleCounts } from '../types';
  import { use } from 'echarts/core';
  import { CanvasRenderer } from 'echarts/renderers';
  import { PieChart } from 'echarts/charts';
  import { TooltipComponent, LegendComponent } from 'echarts/components';
  import { ViolationCount } from '@/api/home/home.ts';
  import VChart from 'vue-echarts';

  const props = defineProps<{
    data: ViolationCount;
    getViolations: (range: string[]) => void;
  }>();

  use([CanvasRenderer, PieChart, TooltipComponent, LegendComponent]);

  const algoData = computed(() => {
    let newData: any[] = [];
    const vioList = props.data.violationAlgoList;
    if (vioList && vioList.length) {
      newData = vioList.map((item) => {
        return {
          value: item.proportion,
          name: item.name,
        };
      });
    }
    console.log(newData);

    return newData;
  });
  //  [
  //   { value: 335, name: "人员闯入" },
  //   { value: 310, name: "未穿反光背心" },
  //   { value: 2, name: "明火烟雾" },
  //   { value: 135, name: "机翼保护垫" },
  //   { value: 148, name: "工装未归位" },
  //   { value: 335, name: "人员闯入1" },
  //   { value: 310, name: "未穿反光背心1" },
  //   { value: 2, name: "明火烟雾1" },
  //   { value: 135, name: "机翼保护垫1" },
  //   { value: 148, name: "工装未归位1" },
  // ];

  const statData = computed(() => props.data.statusCountList);

  const getVioStatData = (index) => {
    let count = 0;
    if (statData.value && statData.value.length) {
      const matchItem = statData.value.find(
        (item) => item.name === violationHandleCounts[index].value,
      );
      if (matchItem) {
        count = matchItem.value;
      }
    }
    return { ...violationHandleCounts[index], count };
  };

  const option = computed(() => {
    return {
      tooltip: {
        trigger: 'item',
        formatter: '{a} <br/>{b} : {c} ({d}%)',
      },
      legend: {
        orient: 'horizontial',
        x: 'center',
        y: 'bottom',
        icon: 'circle',
        width: '80%',
        height: '28%',
        type: 'scroll',
        data: algoData.value.map((item) => item.name),
        formatter: function (name) {
          let total = 0;
          let target;
          for (let i = 0; i < algoData.value.length; i++) {
            total += algoData.value[i].value;
            if (algoData.value[i].name === name) {
              target = algoData.value[i].value;
            }
          }
          var arr = [
            '{a|' + name + '}',
            '{b|' + ' | ' + ((target / total) * 100).toFixed(0) + '%}\n',
          ];
          return arr.join('  ');
        },
        textStyle: {
          padding: [8, 0, 0, 0],
          fontSize: 14,
          rich: {
            a: {
              fontSize: 15,
            },
            b: {
              fontSize: 15,
              color: '#c1c1c1',
            },
          },
        },
      },
      series: [
        {
          name: '违规统计',
          type: 'pie',
          radius: ['40%', '65%'],
          center: ['50%', '40%'],
          labelLine: {
            show: false,
          },

          label: {
            show: false,
            position: 'center',
          },
          data: algoData.value,
          itemStyle: {
            borderColor: '#fff',
            borderWidth: 5,
          },
          emphasis: {
            label: {
              show: true,
              fontSize: 20,
              fontWeight: 'bold',
            },
            itemStyle: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: 'rgba(0, 0, 0, 0.5)',
            },
          },
        },
      ],
    };
  });

  const timeTab = ref<TimeTabEnum>(TimeTabEnum.DAY);

  const onCheckTab = (info: { tab: TimeTabEnum; data: string[] }) => {
    timeTab.value = info.tab;
    props.getViolations(info.data);
  };
</script>

<style scoped>
  .algo-data {
    width: 484px;
    padding: 12px 27px;
    border-left: 2px solid #e8e8e8;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }

  .chart {
    width: 100%;
    height: 450px;
  }

  .algo-tit {
    font-size: 16px;
    font-weight: 500;
    margin-bottom: 10px;
    line-height: 44px;
    color: #2e2e2e;
  }

  .stat-show {
    width: 100%;
    margin-top: 32px;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .stat-divider {
    width: 1px;
    height: 40px;
    background: #e9e9e9;
  }
</style>