2025.6.15

Riku

2025-06-15 31980b06d50d530feb2c0f1db9daf24bd3b8797a

 src/views/management/TaskSummary.vue

@@ -1,26 +1,385 @@
<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>
  <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>
</template>

<script setup></script>
<script setup>
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')
  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(-7, 'day').format('YYYY-MM-DD HH:mm:ss')
  area.endtime = dayjs(area.endtime).add(-7, '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: {},
    numByScene: {},
    numByUser: {}
  }
  // 问题数
  const proCount = {
    numByTotal: {},
    numByDistrict: {},
    numByScene: {},
    numByUser: {}
  }
  // 整改数
  const changeCount = {
    numByTotal: {},
    numByDistrict: {},
    numByScene: {},
    numByUser: {}
  }
  // // 按用户分类
  // const userCount = {
  //   numByTotal: {},
  //   numByDistrict: {},
  //   numByScene: {},
  //   numByUser: {}
  // }
  dataList.forEach((d) => {
    const tName = '总计'
    const dName = d.subtask.districtname
    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.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.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.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
  })

  let series = {}
  totalCount
  proCount
  changeCount
  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: [0, 10],
        },
        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: 600px;
}
</style>