2025.6.23

Riku

2025-06-23 ff82e86becbd200adabd2ce56fba1f6b3c6c37e1

 src/views/management/TaskSummary.vue

@@ -1,26 +1,462 @@
<template>
  <el-row> 巡查汇总 </el-row>
  <el-row>
    <el-col :span="8">
      <TaskSummaryItem title="今日汇总"></TaskSummaryItem>
    </el-col>
    <el-col :span="8">
      <TaskSummaryItem title="周度汇总"></TaskSummaryItem>
    </el-col>
    <el-col :span="8">
      <TaskSummaryItem title="月度汇总"></TaskSummaryItem>
    </el-col>
  </el-row>
  <el-row>
    <el-col :span="12">
      <TaskSummaryItem title="季度汇总"></TaskSummaryItem>
    </el-col>
    <el-col :span="12">
      <TaskSummaryItem title="年度汇总"></TaskSummaryItem>
    </el-col>
  </el-row>
  <BaseCard title="巡查汇总">
    <!-- <el-row> 巡查汇总 </el-row> -->
    <el-segmented v-model="value" :options="options" block />
    <div v-show="value == '今日汇总'">
      <div ref="echart1" class="bar-chart"></div>
    </div>
    <div v-show="value == '本周汇总'">
      <div ref="echart2" class="bar-chart"></div>
    </div>
    <div v-show="value == '上周汇总'">
      <div ref="echart3" class="bar-chart"></div>
    </div>
    <div v-show="value == '本月汇总'">
      <div ref="echart4" class="bar-chart"></div>
    </div>
  </BaseCard>
</template>

<script setup></script>
<script setup>
/**
 * 1. 区域分类统计更加灵活
 */
import * as echarts from 'echarts'
import { ref, onMounted } from 'vue'
import dayjs from 'dayjs'
import taskApi from '@/api/fysp/taskApi.js'

<style scoped></style>
const props = defineProps({
  height: String
})

const emits = defineEmits(['update:height'])

const value = ref('本月汇总')
const options = ['今日汇总', '本周汇总', '上周汇总', '本月汇总']

const subtaskToday = ref([])
const subtaskWeek = ref([])
const subtaskLastWeek = ref([])
const subtaskMonth = ref([])

const echart1 = ref()
const echart2 = ref()
const echart3 = ref()
const echart4 = ref()
let echartToday
let echartWeek
let echartLastWeek
let echartMonth

function getParams(type) {
  const d = dayjs()
  return {
    starttime: d.startOf(type).format('YYYY-MM-DD HH:mm:ss'),
    endtime: d.endOf(type).format('YYYY-MM-DD HH:mm:ss')
  }
}

function fetchSubtaskToday() {
  const area = getParams('day')
  taskApi.fetchSubtaskSummaryByArea(area).then((res) => {
    subtaskToday.value = res.data
    const series = refreshChartData(res.data)
    setOption(echartToday, series)
  })
}

function fetchSubtaskThisWeek() {
  const area = getParams('week')
  // 修改时段为周一到周日
  area.starttime = dayjs(area.starttime).add(1, 'day').format('YYYY-MM-DD HH:mm:ss')
  area.endtime = dayjs(area.endtime).add(1, 'day').format('YYYY-MM-DD HH:mm:ss')
  taskApi.fetchSubtaskSummaryByArea(area).then((res) => {
    subtaskWeek.value = res.data
    const series = refreshChartData(res.data)
    setOption(echartWeek, series)
  })
}

function fetchSubtaskLastWeek() {
  const area = getParams('week')
  // 修改时段为周一到周日
  area.starttime = dayjs(area.starttime).add(-6, 'day').format('YYYY-MM-DD HH:mm:ss')
  area.endtime = dayjs(area.endtime).add(-6, 'day').format('YYYY-MM-DD HH:mm:ss')
  taskApi.fetchSubtaskSummaryByArea(area).then((res) => {
    subtaskLastWeek.value = res.data
    const series = refreshChartData(res.data)
    setOption(echartLastWeek, series)
  })
}

function fetchSubtaskThisMonth() {
  const area = getParams('month')
  taskApi.fetchSubtaskSummaryByArea(area).then((res) => {
    subtaskMonth.value = res.data
    const series = refreshChartData(res.data)
    setOption(echartMonth, series)
  })
}

onMounted(() => {
  echartToday = echarts.init(echart1.value)
  echartWeek = echarts.init(echart2.value)
  echartLastWeek = echarts.init(echart3.value)
  echartMonth = echarts.init(echart4.value)
  fetchSubtaskToday()
  fetchSubtaskThisWeek()
  fetchSubtaskLastWeek()
  fetchSubtaskThisMonth()
})

/**chart**********************************************************************/
function setOption(echart, series) {
  const option = {
    textStyle: {
      color: 'white'
    },
    legend: {
      textStyle: {
        color: 'white'
      }
    },
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow'
      }
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    },
    xAxis: [
      {
        type: 'value'
      }
    ],
    yAxis: [
      {
        type: 'category',
        data: ['复核数', '整改数', '问题数', '完成量']
      }
    ],
    series: series
  }
  echart.setOption(option)
}

function refreshChartData(dataList) {
  // 任务量、问题数、整改数
  // 任务量
  const totalCount = {
    numByTotal: {},
    numByDistrict: {},
    numByStreet: {},
    numByScene: {},
    numByUser: {}
  }
  // 问题数
  const proCount = {
    numByTotal: {},
    numByDistrict: {},
    numByStreet: {},
    numByScene: {},
    numByUser: {}
  }
  // 整改数
  const changeCount = {
    numByTotal: {},
    numByDistrict: {},
    numByStreet: {},
    numByScene: {},
    numByUser: {}
  }
  // 复核数
  const reCheckCount = {
    numByTotal: {},
    numByDistrict: {},
    numByStreet: {},
    numByScene: {},
    numByUser: {}
  }
  const historySceneId = []

  dataList.forEach((d) => {
    const tName = '总计'
    const dName = d.subtask.districtname
    const townName = d.scene.townname
    const sType = d.sceneType
    const uName = d.subtask.deployerrealname

    // 任务量总计
    totalCount.numByTotal[tName] = totalCount.numByTotal[tName]
      ? totalCount.numByTotal[tName] + 1
      : 1
    // 任务量分区县
    totalCount.numByDistrict[dName] = totalCount.numByDistrict[dName]
      ? totalCount.numByDistrict[dName] + 1
      : 1
    // 任务量分街镇
    totalCount.numByStreet[townName] = totalCount.numByStreet[townName]
      ? totalCount.numByStreet[townName] + 1
      : 1
    // 任务量分场景类型
    totalCount.numByScene[sType] = totalCount.numByScene[sType]
      ? totalCount.numByScene[sType] + 1
      : 1
    // 任务量分用户
    totalCount.numByUser[uName] = totalCount.numByUser[uName] ? totalCount.numByUser[uName] + 1 : 1

    // 问题数总计
    proCount.numByTotal[tName] = proCount.numByTotal[tName]
      ? proCount.numByTotal[tName] + d.proCheckedNum
      : d.proCheckedNum
    // 问题数分区县
    proCount.numByDistrict[dName] = proCount.numByDistrict[dName]
      ? proCount.numByDistrict[dName] + d.proCheckedNum
      : d.proCheckedNum
    // 问题数分街镇
    proCount.numByStreet[townName] = proCount.numByStreet[townName]
      ? proCount.numByStreet[townName] + d.proCheckedNum
      : d.proCheckedNum
    // 问题数分场景类型
    proCount.numByScene[sType] = proCount.numByScene[sType]
      ? proCount.numByScene[sType] + d.proCheckedNum
      : d.proCheckedNum
    // 问题数分用户
    proCount.numByUser[uName] = proCount.numByUser[uName]
      ? proCount.numByUser[uName] + d.proCheckedNum
      : d.proCheckedNum

    // 整改数总计
    changeCount.numByTotal[tName] = changeCount.numByTotal[tName]
      ? changeCount.numByTotal[tName] + d.changeCheckedNum
      : d.changeCheckedNum
    // 整改数分区县
    changeCount.numByDistrict[dName] = changeCount.numByDistrict[dName]
      ? changeCount.numByDistrict[dName] + d.changeCheckedNum
      : d.changeCheckedNum
    // 整改数分街镇
    changeCount.numByStreet[townName] = changeCount.numByStreet[townName]
      ? changeCount.numByStreet[townName] + d.changeCheckedNum
      : d.changeCheckedNum
    // 整改数分场景类型
    changeCount.numByScene[sType] = changeCount.numByScene[sType]
      ? changeCount.numByScene[sType] + d.changeCheckedNum
      : d.changeCheckedNum
    // 整改数分用户
    changeCount.numByUser[uName] = changeCount.numByUser[uName]
      ? changeCount.numByUser[uName] + d.changeCheckedNum
      : d.changeCheckedNum

    if (historySceneId.length == 0) {
      reCheckCount.numByTotal[tName] = 0
      reCheckCount.numByDistrict[dName] = 0
      reCheckCount.numByScene[sType] = 0
      reCheckCount.numByUser[uName] = 0
    } else if (historySceneId.indexOf(d.sceneId) != -1) {
      // 复核数总计
      reCheckCount.numByTotal[tName] = reCheckCount.numByTotal[tName]
        ? reCheckCount.numByTotal[tName] + 1
        : 1
      // 复核数分区县
      reCheckCount.numByDistrict[dName] = reCheckCount.numByDistrict[dName]
        ? reCheckCount.numByDistrict[dName] + 1
        : 1
      // 复核数分街镇
      reCheckCount.numByStreet[townName] = reCheckCount.numByStreet[townName]
        ? reCheckCount.numByStreet[townName] + 1
        : 1
      // 复核数分场景类型
      reCheckCount.numByScene[sType] = reCheckCount.numByScene[sType]
        ? reCheckCount.numByScene[sType] + 1
        : 1
      // 复核数分用户
      reCheckCount.numByUser[uName] = reCheckCount.numByUser[uName]
        ? reCheckCount.numByUser[uName] + 1
        : 1
    } else {
      historySceneId.push(d.sceneId)
    }
  })

  let series = {}
  parseSeries(series, reCheckCount)
  parseSeries(series, changeCount)
  parseSeries(series, proCount)
  parseSeries(series, totalCount)

  const res = []
  for (const key in series) {
    const e = series[key]
    res.push(e)
  }

  return res
}

function parseSeries(series, c) {
  // c.numByTotal
  // c.numByDistrict
  // c.numByScene
  // c.numByUser

  for (const key in c.numByTotal) {
    const value = c.numByTotal[key]
    if (series[key]) {
      series[key].data.push(value)
    } else {
      series[key] = {
        name: key,
        type: 'bar',
        emphasis: {
          focus: 'series'
        },
        label: {
          show: true,
          formatter: '{c}'
          // position: [0, 10],
        },
        data: [value]
      }
    }
  }
  for (const key in c.numByDistrict) {
    const value = c.numByDistrict[key]
    if (series[key]) {
      series[key].data.push(value)
    } else {
      series[key] = {
        name: `区县：${key}`,
        type: 'bar',
        stack: 'district',
        emphasis: {
          focus: 'series'
        },
        label: {
          show: true,
          formatter: '{c}'
          // position: 'top',
        },
        data: [value]
      }
    }
  }
  // for (const key in c.numByStreet) {
  //   const value = c.numByStreet[key]
  //   if (series[key]) {
  //     series[key].data.push(value)
  //   } else {
  //     series[key] = {
  //       name: `街镇：${key}`,
  //       type: 'bar',
  //       stack: 'street',
  //       emphasis: {
  //         focus: 'series'
  //       },
  //       label: {
  //         show: true,
  //         formatter: '{c}'
  //         // position: 'top',
  //       },
  //       data: [value]
  //     }
  //   }
  // }
  for (const key in c.numByScene) {
    const value = c.numByScene[key]
    if (series[key]) {
      series[key].data.push(value)
    } else {
      series[key] = {
        name: `场景：${key}`,
        type: 'bar',
        stack: 'scene',
        emphasis: {
          focus: 'series'
        },
        label: {
          show: true,
          formatter: '{c}'
          // position: [0, 10],
        },
        data: [value]
      }
    }
  }
  for (const key in c.numByUser) {
    const value = c.numByUser[key]
    if (series[key]) {
      series[key].data.push(value)
    } else {
      series[key] = {
        name: `用户：${key}`,
        type: 'bar',
        stack: 'user',
        emphasis: {
          focus: 'series'
        },
        label: {
          show: true,
          formatter: '{c}'
          // position: [0, 10],
        },
        data: [value]
      }
    }
  }
  return series
}
</script>

<style scoped>
/* .el-segmented {
  --el-segmented-item-selected-color: var(--el-text-color-primary);
  --el-segmented-item-selected-bg-color: #ffd100;
  --el-border-radius-base: 16px;
} */

.el-statistic {
  --el-statistic-content-font-size: var(--el-font-size-base);
  /* background-color: aliceblue; */
}

.statistic-footer {
  background-color: #ffd100;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  font-size: 12px;
  color: var(--el-text-color-regular);
  /* margin-top: 16px; */
}

.statistic-footer .footer-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.statistic-footer .footer-item span:last-child {
  display: inline-flex;
  align-items: center;
  margin-left: 4px;
}

.green {
  color: var(--el-color-success);
}
.red {
  color: var(--el-color-error);
}

.bar-chart {
  width: 400px;
  height: 400px;
}
</style>