2024.7.16

riku

2024-07-16 d00a9f035aec50c37c8e0a1363a1968672fb875f

 src/views/inspection/problem/component/ProblemSummary.vue

@@ -1,18 +1,81 @@
<template>
  <div>
    问题数: {{ summary.proNum }}，整改数: {{ summary.changeNum }}，整改率: {{ summary.changePer }}
  </div>
  <el-row>
    <el-col :xs="24" :sm="24" :md="24" :lg="9" :xl="9">
      <div v-show="mainProType">
        <el-text>突出问题</el-text>
        <div ref="echartRef" class="pie-chart"></div>
      </div>
      <template v-if="mainProType">
        <div v-show="false" class="font-small">
          突出问题：{{ mainProType.name }}，问题数：{{ mainProType.count }}，占比{{
            mainProType.per
          }}
        </div>
      </template>
    </el-col>
    <el-col :xs="24" :sm="24" :md="24" :lg="colSpanLarge" :xl="colSpanLarge">
      <el-text>单日汇总</el-text>
      <BaseTable :data="summary">
        <el-table-column
          label="问题数"
          prop="proNum"
          :show-overflow-tooltip="true"
        ></el-table-column>
        <el-table-column
          label="整改数"
          prop="changeNum"
          :show-overflow-tooltip="true"
        ></el-table-column>
        <el-table-column
          label="整改率"
          prop="changePer"
          :show-overflow-tooltip="true"
        ></el-table-column>
      </BaseTable>
    </el-col>
  </el-row>
</template>
<script setup>
import { computed, ref } from 'vue'
import { computed, onMounted, ref, watch } from 'vue'
import dayjs from 'dayjs'
import * as echarts from 'echarts'
import { pieChartOption } from '@/utils/echart/chart-option'

const props = defineProps({
  date: {
    type: Date,
    default: new Date()
  },
  data: {
    type: Array
    type: Array,
    default: () => []
  },
  proStatistic: {
    type: Array,
    default: () => []
  },
  loading: Boolean
})

const colSpanLarge = computed(() => {
  return mainProType.value ? 15 : 24
})

// 饼图
let echart
const echartRef = ref(null)

// 当日时间
const timeObj = computed(() => {
  const d = dayjs(props.date)
  return {
    year: d.year(),
    month: d.month(),
    date: d.date()
  }
})

// 问题和整改数量统计
const summary = computed(() => {
  let proNum = 0,
    changeNum = 0,
@@ -23,9 +86,74 @@
  })

  if (proNum > 0) {
    changePer = Math.round((changeNum / proNum) * 100) / 100 + '%'
    changePer = Math.round((changeNum / proNum) * 100) + '%'
  }

  return { proNum, changeNum, changePer }
  return [{ proNum, changeNum, changePer }]
})

// 突出问题统计
const mainProType = computed(() => {
  let res
  let total = 0,
    max = 0
  props.proStatistic.forEach((d) => {
    total += d.count
  })
  props.proStatistic.forEach((d) => {
    if (total > 0) {
      const per = d.count / total
      if (per >= max) {
        max = per
        res = {
          name: d.name,
          count: d.count,
          per: Math.round(per * 100) + '%'
        }
      }
    }
  })
  refreshChart(props.proStatistic)
  return res
})

function refreshChart(data) {
  if (!data || !echart) return
  const chartData = data
    .map((item) => {
      return {
        value: item.count,
        name: item.name
      }
    })
    // 正序排列
    .sort(function (a, b) {
      return b.value - a.value
    })
  const option = pieChartOption('问题分布', chartData, 1)
  const series = option.series[0]
  // series.radius = '50%'
  series.center = ['10%', '50%']
  series.label.formatter = '{b}\n{c}个({d}%)'
  echart.setOption(option)
  setTimeout(() => {
    echart.resize()
  }, 100)
}

// watch(props.proStatistic, (nV, oV) => {
//   if (nV != oV) {
//     refreshChart(nV)
//   }
// })

onMounted(() => {
  echart = echarts.init(echartRef.value)
})
</script>
<style scoped>
.pie-chart {
  /* width: 200px; */
  height: 70px;
}
</style>