fy-report-vue.git

			@@ -1,72 +1,23 @@
			<template>
			<!-- <BaseCard> -->
			<el-row> 巡查汇总 </el-row>
			<el-segmented v-model="value" :options="options" block />
			<div><el-text tag="i"> 评估 </el-text></div>
			<el-row justify="space-evenly">
			<div>
			<el-statistic title="总计" :value="10"> </el-statistic>
			<div class="statistic-footer">
			<div class="footer-item">
			<span>对比昨日</span>
			<span class="green">
			24%
			<el-icon>
			<CaretTop />
			</el-icon>
			</span>
			</div>
			</div>
			</div>
			<el-statistic title="高风险" :value="2" :value-style="styleRed"> </el-statistic>
			<el-statistic title="中风险" :value="6" :value-style="styleYellow"> </el-statistic>
			<el-statistic title="低风险" :value="2" :value-style="styleGreen"> </el-statistic>
			</el-row>
			<div><el-text tag="i"> 复核 </el-text></div>
			<el-row justify="space-evenly">
			<div>
			<el-statistic title="需复核" :value="2"> </el-statistic>
			<div class="statistic-footer">
			<div class="footer-item">
			<span>对比昨日</span>
			<span class="green">
			24%
			<el-icon>
			<CaretTop />
			</el-icon>
			</span>
			</div>
			</div>
			</div>
			<el-statistic title="已完成" :value="2" :value-style="styleGreen"> </el-statistic>
			</el-row>
			<div><el-text tag="i"> 问题 </el-text></div>
			<el-row justify="space-evenly">
			<div>
			<el-statistic title="总计" :value="10"> </el-statistic>
			<div class="statistic-footer">
			<div class="footer-item">
			<span>对比昨日</span>
			<span class="green">
			24%
			<el-icon>
			<CaretTop />
			</el-icon>
			</span>
			</div>
			</div>
			</div>
			<el-statistic title="待审核" :value="2" :value-style="styleRed"> </el-statistic>
			<el-statistic title="已审核" :value="6" :value-style="styleYellow"> </el-statistic>
			<el-statistic title="待整改" :value="2" :value-style="styleGreen"> </el-statistic>
			<el-statistic title="已整改" :value="2" :value-style="styleGreen"> </el-statistic>
			<el-statistic title="待确认" :value="2" :value-style="styleGreen"> </el-statistic>
			</el-row>
			<!-- </BaseCard> -->
			<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>
			import { ref } from 'vue'
			import * as echarts from 'echarts'
			import { ref, onMounted } from 'vue'
			import dayjs from 'dayjs'
			import taskApi from '@/api/fysp/taskApi.js'

			@@ -76,22 +27,312 @@

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

			const alue = '今日汇总'
			const ptions = ['今日汇总', '周度汇总', '月度汇总', '季度汇总', '年度汇总']
			const tyleRed = 'color:var(--el-color-danger);'
			const tyleYellow = 'color:var(--el-color-warning);'
			const tyleGreen = 'color:var(--el-color-success);'
			const value = ref('月度汇总')
			const options = ['今日汇总', '本周汇总', '上周汇总', '月度汇总']

			function name(params) {
			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()
			const area = {
			starttime: d.startOf('day').format('YYYY-MM-DD HH:mm:ss'),
			return {
			starttime: d.startOf(type).format('YYYY-MM-DD HH:mm:ss'),
			endtime: d.endOf(type).format('YYYY-MM-DD HH:mm:ss')
			}
			}

			taskApi.fetchSubtaskSummaryByArea(this.area).then((res) => {
			this.subtaskList = res.data
			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>

			@@ -136,4 +377,9 @@
			.red {
			color: var(--el-color-error);
			}

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