新增多个数据获取接口，优化数据展示逻辑

src/api/home/index.ts

@@ -30,9 +30,28 @@ export const HomeApi = {
   /**
    * 近6个月任务走势
    */
-  getTaskNumDoing:()=>{
+  getTaskNumDoing:params=>{
     return request.get({
-      url: '/system/home/taskNumDoing'
+      url: '/system/home/taskNumDoing',
+      params
+    })
+  },
+  /**
+   * 执法整改
+   */
+  getExecCorrection:params=>{
+    return request.get({
+      url: '/system/home/execCorrectionCount',
+      params
+    })
+  },
+  /**
+   * 最新任务
+   */
+  getNewTask:params=> {
+    return request.get({
+      url: 'system/task-info/appPage',
+      params
     })
   }
 }

src/views/Home/Index.vue

@@ -3,7 +3,12 @@
     <el-col :span="14">
       <el-form :model="queryParams" class="queryForm" inline>
         <el-form-item label="按区域" prop="region">
-          <el-select v-model="queryParams.region" placeholder="请选择区域" size="large">
+          <el-select
+            v-model="queryParams.region"
+            placeholder="请选择区域"
+            size="large"
+            @change="getData"
+          >
             <el-option
               v-for="option in area"
               :key="option.value"
@@ -18,6 +23,8 @@
             placeholder="请选择周期"
             clearable
             size="large"
+            @select="getData"
+            @change="getData"
           >
             <el-option
               v-for="option in getIntDictOptions(DICT_TYPE.SELECT_WEEK)"
@@ -30,11 +37,11 @@
       </el-form>
     </el-col>
     <section class="flex gap-20px">
-      <el-button type="primary" plain>
+      <el-button type="primary" plain @click="getData">
         <Icon icon="ep:search" />
         查询
       </el-button>
-      <el-button>
+      <el-button @click="reset">
         <Icon icon="ep:refresh" />
         重置
       </el-button>
@@ -83,9 +90,10 @@
               class="text-15px flex justify-between"
             >
               <span class="color-#303133">{{ item.title }}</span>
-              <span class="color-#606266">{{ item.user }}</span>
+              <span class="color-#606266">{{ item.deptName }}</span>
-              <span class="color-#909399">{{ item.date }}</span>
+              <span class="color-#909399">{{ formatDate(item.startDate, 'YYYY年M月D日') }}</span>
             </div>
+            <el-empty v-if="tasks.length == 0" />
           </section>
         </el-skeleton>
       </el-card>
@@ -103,6 +111,7 @@
               <span class="color-#303133">{{ item.name }}</span>
               <span class="color-#909399">{{ item.count }}次</span>
             </div>
+            <el-empty v-if="notice1.length == 0" />
           </section>
         </el-skeleton>
       </el-card>
@@ -120,6 +129,7 @@
               <span class="color-#303133">{{ item.name }}</span>
               <span class="color-#909399">{{ item.count }}天</span>
             </div>
+            <el-empty v-if="notice2.length == 0" />
           </section>
         </el-skeleton>
       </el-card>
@@ -127,96 +137,316 @@
   </el-row>
 </template>
 <script lang="ts" setup>
-import { set } from 'lodash-es'
-import { EChartsOption } from 'echarts'
-import { pieOptions, barOptions, lineOptions } from './echarts-data'
 import { HomeApi } from '@/api/home'
 import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
-
+import { formatDate } from '@/utils/formatTime'
 defineOptions({ name: 'Home' })
 
 const loading = ref(true)
-const pieOptionsData = reactive<EChartsOption>(pieOptions) as EChartsOption
+const pieOptionsData = ref({
-const barOptionsData = reactive<EChartsOption>(barOptions) as EChartsOption
+  title: {
-const lineOptionsData = reactive<EChartsOption>(lineOptions) as EChartsOption
+    text: '90%',
-
+    subtext: '完成率',
-const queryParams = reactive({
+    left: 'center',
-  selectWeek: '',
+    top: 'center',
-  region: ''
+    itemGap: 0,
+    textStyle: {
+      fontSize: 40,
+      lineHeight: 40,
+      padding: [0, 0, 0, 0],
+      fontWeight: 'bold'
+    },
+    subtextStyle: {
+      color: '#909399',
+      fontSize: 18,
+      lineHeight: 18,
+      padding: [0, 0, 0, 0]
+    }
+  },
+  tooltip: {
+    trigger: 'item',
+    formatter: '{a} <br/>{b} : {c} ({d}%)'
+  },
+  series: {
+    name: '任务进度',
+    type: 'pie',
+    radius: ['60%', '80%'],
+    center: ['50%', '50%'],
+    itemStyle: {
+      borderColor: '#fff',
+      borderWidth: 2
+    },
+    label: {
+      formatter: (v) => {
+        if (v.name) {
+          return `{row|${v.name}} {v|${v.percent}%}  \n{hr|}`
+        }
+        return ''
+      },
+      padding: [0, 0, 15, 0],
+      distanceToLabelLine: 0,
+      rich: {
+        row: {
+          padding: [0, 0, 4, 5]
+        },
+        v: {
+          color: '#409EFF',
+          padding: [0, 0, 4, 0]
+        },
+        hr: {
+          backgroundColor: '#409EFF',
+          width: '100%',
+          height: 1
+        }
+      }
+    },
+    labelLine: {
+      length2: 0,
+      lineStyle: {
+        color: '#409EFF'
+      }
+    },
+    roseType: 'radius',
+    data: [
+      { value: 335, name: '执法一队' },
+      { value: 310, name: '执法二队' },
+      { value: 234, name: '执法三队' },
+      { value: 135, name: '执法四队' },
+      { value: 1548, name: '执法五队' }
+    ]
+  }
 })
-
+const barOptionsData = ref({
-const area = ref<any[]>([])
+  tooltip: {
-
+    trigger: 'axis',
-// 监听两个卡片高度变化并保持同步
+    axisPointer: {
-const taskNewCard = ref()
+      type: 'shadow'
-
+    }
-const tasks = reactive<any>([
-  {
-    title: '义县一公司环保信息',
-    date: '2023-01-01',
-    user: '张三',
-    status: 1
   },
-  {
+  grid: {
-    title: '锦州二公司安全检查',
+    top: 42,
-    date: '2023-01-02',
+    left: 16,
-    user: '李四',
+    right: 16,
-    status: 2
+    bottom: 16,
+    containLabel: true
   },
-  {
+  legend: {
-    title: '北镇三公司环评整改',
+    show: true,
-    date: '2023-01-03',
+    top: 16,
-    user: '王五',
+    left: 'center',
-    status: 1
+    itemWidth: 10,
+    itemHeight: 10,
+    textStyle: {
+      color: '#333'
+    }
   },
-  {
+  xAxis: {
-    title: '凌海四公司排污监测',
+    type: 'category',
-    date: '2023-01-04',
+    axisTick: {
-    user: '赵六',
+      show: false
-    status: 3
     },
+    axisLine: {
+      show: false
+    },
+    splitLine: {
+      show: true,
+      lineStyle: {
+        type: 'dashed',
+        color: '#E5E7EB'
+      }
+    },
+    data: [],
+    axisLabel: {
+      show: true,
+      color: '#333'
+    }
+  },
+  yAxis: {
+    type: 'value',
+    max: (v) => {
+      return Math.floor(v.max * 1.2 + 1)
+    },
+    axisLine: {
+      show: false
+    },
+    axisTick: {
+      show: false
+    },
+    splitLine: {
+      lineStyle: {
+        type: 'dashed',
+        color: '#E5E7EB'
+      }
+    }
+  },
+  series: [
     {
-    title: '黑山五公司设备巡检',
+      name: '执法记录',
-    date: '2023-01-05',
+      type: 'bar',
-    user: '孙七',
+      barWidth: 20,
-    status: 2
+      stack: '执法记录',
+      barGap: '30%',
+      itemStyle: {
+        color: 'rgba(64, 158, 255, .6)'
+      },
+      data: [70, 35, 70, 60, 20]
     },
     {
-    title: '义县六公司安全培训',
+      name: '整改次数',
-    date: '2023-01-06',
+      type: 'bar',
-    user: '周八',
+      stack: '整改次数',
-    status: 1
+      barWidth: 20,
+      itemStyle: {
+        color: 'rgba(103, 194, 58, .6)'
+      },
+      data: [90, 45, 80, 50, 70]
     },
     {
-    title: '大石桥七公司隐患排查',
+      name: '执法记录',
-    date: '2023-01-07',
+      type: 'bar',
-    user: '吴九',
+      barWidth: 20,
-    status: 3
+      stack: '执法记录',
+      barGap: '30%',
+      itemStyle: {
+        color: 'rgba(64, 158, 255, 1)'
+      },
+      tooltip: {
+        show: false
+      },
+      data: [1, 1, 1, 1, 1]
     },
     {
-    title: '盘锦八公司应急演练',
+      name: '整改次数',
-    date: '2023-01-08',
+      type: 'bar',
-    user: '郑十',
+      stack: '整改次数',
-    status: 2
+      barWidth: 20,
+      itemStyle: {
+        color: 'rgba(103, 194, 58, 1)'
       },
+      tooltip: {
+        show: false
+      },
+      data: [1, 1, 1, 1, 1]
+    }
+  ]
+})
+const lineOptionsData = ref({
+	tooltip: {
+		trigger: 'axis',
+		axisPointer: {
+			type: 'shadow'
+		}
+	},
+	grid: {
+		top: 42,
+		left: 16,
+		right: 16,
+		bottom: 16,
+		containLabel: true
+	},
+	legend: {
+		show: true,
+		top: 16,
+		left: 'center',
+		textStyle: {
+			color: '#333'
+		}
+	},
+	xAxis: {
+		type: 'category',
+		data:[],
+		axisTick: {
+			show: false
+		},
+		axisLine: {
+			show: false
+		},
+		splitLine: {
+			show: true,
+			lineStyle: {
+				type: 'dashed',
+				color: '#E5E7EB'
+			}
+		},
+		axisLabel: {
+			show: false,
+			color: '#333'
+		}
+	},
+	yAxis: {
+		type: 'value',
+		axisLine: {
+			show: false
+		},
+		max: (v) => {
+			return Math.floor(v.max * 1.2 + 1)
+		},
+		axisTick: {
+			show: false
+		},
+		splitLine: {
+			lineStyle: {
+				type: 'dashed',
+				color: '#E5E7EB'
+			}
+		}
+	},
+	series: [
 		{
-    title: '营口九公司废水处理',
+			name: '任务数',
-    date: '2023-01-09',
+			data: [13253, 34235, 26321, 12340, 24643],
-    user: '钱十一',
+			type: 'line',
-    status: 1
+			smooth: true,
+			itemStyle: {
+				color: 'rgba(64, 158, 255, 1)'
+			},
+			lineStyle: {
+				color: 'rgba(64, 158, 255, 1)'
+			},
+			areaStyle: {
+				color: 'rgba(64, 158, 255, .3)'
+			}
 		},
 		{
-    title: '阜新十公司空气监测',
+			name: '执法数',
-    date: '2023-01-10',
+			data: [15678, 28943, 31452, 19876, 22345],
-    user: '刘十二',
+			type: 'line',
-    status: 2
+			smooth: true,
+			itemStyle: {
+				color: 'rgba(103, 194, 58, 1)'
+			},
+			lineStyle: {
+				color: 'rgba(103, 194, 58, 1)'
+			},
+			areaStyle: {
+				color: 'rgba(103, 194, 58, .3)'
+			}
 		}
-])
+	]
+})
+
+const queryParams = reactive({
+  selectWeek: '',
+  region: ''
+})
+
+const area = ref<any[]>([])
+
+// 监听两个卡片高度变化并保持同步
+const taskNewCard = ref()
+
+const tasks = ref<any>([])
 
 const notice1 = ref<any[]>([])
 
 const notice2 = ref<any[]>([])
 
+//查询
+const reset = () => {
+  queryParams.selectWeek = ''
+  queryParams.region = area.value[0].value
+  getData()
+}
 // 完成率
 const getPieData = async () => {
   const res = await HomeApi.getPieData(queryParams)
@@ -228,6 +458,12 @@ const getPieData = async () => {
         name: item.name,
         itemStyle: {
           color: getGradientColor(index, res.completionRate.length)
+        },
+        label: {
+          show: item.pieValue > 0
+        },
+        labelLine: {
+          show: item.pieValue > 0
         }
       }
     })
@@ -247,22 +483,54 @@ const getPieData = async () => {
       }
     })
   }
-  set(pieOptions, 'title.text', `${res.taskCompletionRate}%`)
+
-  set(pieOptions, 'series.data', data)
+  pieOptionsData.value.title.text = `${res.taskCompletionRate}%`
+  pieOptionsData.value.series.data = data
 }
 
 // 近6个月执法走势
 const getS3Data = async () => {
-  const res = await HomeApi.getTaskNumDoing()
+  const res = await HomeApi.getTaskNumDoing(queryParams)
+	console.log(res)
   let data1 = [] as any
   let data2 = [] as any
   res.forEach((item: any) => {
     data1.push({ name: item.month, value: item.taskCount })
     data2.push({ name: item.month, value: item.inspectionCount })
   })
-  set(lineOptions, 'series[0].data', data1)
+	lineOptionsData.value.series[0].data = data1
-  set(lineOptions, 'series[1].data', data2)
+	lineOptionsData.value.series[1].data = data2
-	set(lineOptions, 'xAxis.data', res.map(i=>i.month))
+	lineOptionsData.value.xAxis.data = res.map((i) => i.month)
+}
+
+// 执法整改
+const getS2Data = async () => {
+  const res = await HomeApi.getExecCorrection(queryParams)
+  const data1 = res.map((i) => {
+    return {
+      name: i.realName,
+      value: i.inspectionCount
+    }
+  })
+  const data2 = res.map((i) => {
+    return {
+      name: i.realName,
+      value: i.correctionCount
+    }
+  })
+  const axis = res.map((i) => i.realName)
+  const top = (res[0].inspectionCount % 10) / 10
+  barOptionsData.value.series[0].data = data1
+  barOptionsData.value.series[1].data = data2
+  barOptionsData.value.xAxis.data = axis
+  barOptionsData.value.series[2].data = new Array(axis.length).fill(top || 0.1)
+  barOptionsData.value.series[3].data = new Array(axis.length).fill(top || 0.1)
+}
+
+// 获取最新任务
+const getS4Data = async () => {
+  const res = await HomeApi.getNewTask({ ...queryParams, pageSize: 8, pageNo: 1 })
+  tasks.value = res.list
 }
 
 // 整改排名、资质临期
@@ -271,6 +539,7 @@ const getS5S6 = async () => {
   notice1.value = await HomeApi.getListData({ ...queryParams, type: 2, size: 8 })
 }
 
+// 区域下拉框
 const getArea = async () => {
   area.value = await HomeApi.getArea()
   queryParams.region = area.value[0].value
@@ -281,8 +550,9 @@ const init = async () => {
   await getData()
 }
 
+// 获取数据
 const getData = async () => {
-  await Promise.all([getPieData(), getS3Data(), getS5S6()])
+  await Promise.all([getPieData(), getS2Data(), getS3Data(), getS4Data(), getS5S6()])
   loading.value = false
 }
 

src/views/Home/echarts-data.ts

@@ -1,285 +0,0 @@
-import { EChartsOption } from 'echarts'
-
-
-
-export const pieOptions: EChartsOption = {
-  title: {
-    text: '90%',
-    subtext: '完成率',
-    left: 'center',
-    top: 'center',
-    itemGap: 0,
-    textStyle: {
-      fontSize: 40,
-      lineHeight: 40,
-      padding: [0, 0, 0, 0],
-      fontWeight: 'bold'
-    },
-    subtextStyle: {
-      color: '#909399',
-      fontSize: 18,
-      lineHeight: 18,
-      padding: [0, 0, 0, 0]
-    }
-  },
-  tooltip: {
-    trigger: 'item',
-    formatter: '{a} <br/>{b} : {c} ({d}%)'
-  },
-  series: {
-    type: 'pie',
-    radius: ['60%', '80%'],
-    center: ['50%', '50%'],
-    itemStyle: {
-      borderColor: '#fff',
-      borderWidth: 2
-    },
-    label: {
-      formatter: (v) => {
-        if (v.name) {
-          return `{row|${v.name}} {v|${v.percent}%}  \n{hr|}`
-        }
-        return ''
-      },
-      padding: [0, 0, 15, 0],
-      distanceToLabelLine: 0,
-      rich: {
-        row: {
-          padding: [0, 0, 4, 5]
-        },
-        v: {
-          color: '#409EFF',
-          padding: [0, 0, 4, 0]
-        },
-        hr: {
-          backgroundColor: '#409EFF',
-          width: '100%',
-          height: 1
-        }
-      }
-    },
-    labelLine: {
-      length2: 0,
-      lineStyle: {
-        color: '#409EFF'
-      }
-    },
-    roseType: 'radius',
-    data: [
-      { value: 335, name: '执法一队' },
-      { value: 310, name: '执法二队' },
-      { value: 234, name: '执法三队' },
-      { value: 135, name: '执法四队' },
-      { value: 1548, name: '执法五队' }
-    ]
-  }
-}
-
-export const barOptions: EChartsOption = {
-  tooltip: {
-    trigger: 'axis',
-    axisPointer: {
-      type: 'shadow'
-    }
-  },
-  grid: {
-    top: 42,
-    left: 16,
-    right: 16,
-    bottom: 16,
-    containLabel: true
-  },
-  legend: {
-    show: true,
-    top: 16,
-    left: 'center',
-    itemWidth: 10,
-    itemHeight: 10,
-    textStyle: {
-      color: '#333'
-    }
-  },
-  xAxis: {
-    type: 'category',
-    axisTick: {
-      show: false
-    },
-    axisLine: {
-      show: false
-    },
-    splitLine: {
-      show: true,
-      lineStyle: {
-        type: 'dashed',
-        color: '#E5E7EB'
-      }
-    },
-    axisLabel: {
-      show: true,
-      color: '#333'
-    }
-  },
-  yAxis: {
-    type: 'value',
-    max: (v) => {
-      return Math.floor(v.max * 1.2 + 1)
-    },
-    axisLine: {
-      show: false
-    },
-    axisTick: {
-      show: false
-    },
-    splitLine: {
-      lineStyle: {
-        type: 'dashed',
-        color: '#E5E7EB'
-      }
-    }
-  },
-  series: [
-    {
-      name: '执法记录',
-      type: 'bar',
-      barWidth: 20,
-      stack: '执法记录',
-      barGap: '30%',
-      itemStyle: {
-        color: 'rgba(64, 158, 255, .6)'
-      },
-      data: [70, 35, 70, 60, 20]
-    },
-    {
-      name: '整改次数',
-      type: 'bar',
-      stack: '整改次数',
-      barWidth: 20,
-      itemStyle: {
-        color: 'rgba(103, 194, 58, .6)'
-      },
-      data: [90, 45, 80, 50, 70]
-    },
-    {
-      name: '执法记录',
-      type: 'bar',
-      barWidth: 20,
-      stack: '执法记录',
-      barGap: '30%',
-      itemStyle: {
-        color: 'rgba(64, 158, 255, 1)'
-      },
-      tooltip: {
-        show: false
-      },
-      data: [2, 2, 2, 2, 2]
-    },
-    {
-      name: '整改次数',
-      type: 'bar',
-      stack: '整改次数',
-      barWidth: 20,
-      itemStyle: {
-        color: 'rgba(103, 194, 58, 1)'
-      },
-      tooltip: {
-        show: false
-      },
-      data: [2, 2, 2, 2, 2]
-    }
-  ]
-}
-
-export const lineOptions: EChartsOption = {
-  tooltip: {
-    trigger: 'axis',
-    axisPointer: {
-      type: 'shadow'
-    }
-  },
-  grid: {
-    top: 42,
-    left: 16,
-    right: 16,
-    bottom: 16,
-    containLabel: true
-  },
-  legend: {
-    show: true,
-    top: 16,
-    left: 'center',
-    textStyle: {
-      color: '#333'
-    }
-  },
-  xAxis: {
-    type: 'category',
-    data:[],
-    axisTick: {
-      show: false
-    },
-    axisLine: {
-      show: false
-    },
-    splitLine: {
-      show: true,
-      lineStyle: {
-        type: 'dashed',
-        color: '#E5E7EB'
-      }
-    },
-    axisLabel: {
-      show: false,
-      color: '#333'
-    }
-  },
-  yAxis: {
-    type: 'value',
-    axisLine: {
-      show: false
-    },
-    max: (v) => {
-      return Math.floor(v.max * 1.2 + 1)
-    },
-    axisTick: {
-      show: false
-    },
-    splitLine: {
-      lineStyle: {
-        type: 'dashed',
-        color: '#E5E7EB'
-      }
-    }
-  },
-  series: [
-    {
-      name: '任务数',
-      data: [13253, 34235, 26321, 12340, 24643],
-      type: 'line',
-      smooth: true,
-      itemStyle: {
-        color: 'rgba(64, 158, 255, 1)'
-      },
-      lineStyle: {
-        color: 'rgba(64, 158, 255, 1)'
-      },
-      areaStyle: {
-        color: 'rgba(64, 158, 255, .3)'
-      }
-    },
-    {
-      name: '执法数',
-      data: [15678, 28943, 31452, 19876, 22345],
-      type: 'line',
-      smooth: true,
-      itemStyle: {
-        color: 'rgba(103, 194, 58, 1)'
-      },
-      lineStyle: {
-        color: 'rgba(103, 194, 58, 1)'
-      },
-      areaStyle: {
-        color: 'rgba(103, 194, 58, .3)'
-      }
-    }
-  ]
-}

src/views/Home/types.ts

@@ -1,50 +0,0 @@
-export type WorkplaceTotal = {
-  project: number
-  access: number
-  todo: number
-}
-
-export type Project = {
-  name: string
-  icon: string
-  message: string
-  personal: string
-  time: Date | number | string
-}
-
-
-
-export type Shortcut = {
-  name: string
-  icon: string
-  url: string
-}
-
-export type RadarData = {
-  personal: number
-  team: number
-  max: number
-  name: string
-}
-export type AnalysisTotalTypes = {
-  users: number
-  messages: number
-  moneys: number
-  shoppings: number
-}
-
-export type UserAccessSource = {
-  value: number
-  name: string
-}
-
-export type WeeklyUserActivity = {
-  value: number
-  name: string
-}
-
-export type MonthlySales = {
-  name: string
-  estimate: number
-  actual: number
-}