zhaoyang/sunProduct
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

8/13， dev

Browse Source
This commit is contained in:
Zy
2026-08-13 08:50:43 +08:00
parent 0717bb489b
commit 3048aa3f88
14 changed files with 290 additions and 95 deletions
Download Patch File Download Diff File Expand all files Collapse all files

55
src/views/system/inspection/Overview/index.vue
View File

@@ -46,7 +46,7 @@
<div class="echartsbox flex h-full flex-col">
<div class="echartsactions">
<div
@click="handleEcartsData(item)"
@click="handleEchartsData(item)"
:class="{ active: activeEchartsindex === item.key }"
class="echartsactions_item"
v-for="(item, index) in ecartslist"
@@ -65,11 +65,7 @@
<el-table v-loading="loading" border :data="itemList">
<el-table-column fixed="left" label="日期" width="100" align="center" prop="statDate" />
<el-table-column label="计划巡检任务" width="110" align="center" prop="totalPlans" />
<el-table-column label="按时完成" align="center" prop="completedTasks">
<template #default="scope">
{{ scope.row.completedTasks - scope.row.outCompletedTasks }}
</template>
</el-table-column>
<el-table-column label="按时完成" align="center" prop="completedTasks" />
<el-table-column label="超时完成" align="center" prop="outCompletedTasks" />
<el-table-column label="超时未完成" width="110" align="center" prop="outUncompletedTasks" />
<el-table-column label="进行中" align="center" prop="activeTask" />
@@ -91,9 +87,10 @@
<script setup name="Item" lang="ts">
import EchartsCompontent from '@/components/Echarts/index.vue';
import { listItem, type Request } from '@/api/system/Inspection/index';
import { getNaturalDayDiff, getLastNDays, diffDays, formatDate } from '@/utils/time';
import { listItem, type Request } from '@/api/system/Inspection';
import { diffDays, formatDate, getLastNDays, getNaturalDayDiff } from '@/utils/time';
import { EChartsOption } from 'echarts';
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const itemList = ref<any[]>([]);
@@ -101,8 +98,6 @@ const loading = ref(true);
const showSearch = ref(true);
const total = ref(100);
const queryFormRef = ref<ElFormInstance>();
const layout = document.body.clientWidth <= 1500 ? 'total, sizes, prev, pager, next' : 'total, sizes, prev, pager, next,';
const disabledDate = (time: Date) => {
return time.getTime() > Date.now();
@@ -207,14 +202,14 @@ const options = computed<EChartsOption>(() => ({
series: activeSeries.value // 动态系列
}));
//
const diffday = ref(0);
const diffDay = ref(0);
const activeSeries = ref();
const xAxislist = ref([]);
// join Echarts Options object
function handleEcartsOptions(data, name, colorlist = ['#1a75ff', '#f2f9ff']) {
function handleEchartsOptions(data: number[], name: string, colorList: string[] = ['#1a75ff', '#f2f9ff']) {
activeSeries.value = null;
const obj = {
activeSeries.value = {
data: data,
type: 'line' as const,
smooth: true,
@@ -226,31 +221,30 @@ function handleEcartsOptions(data, name, colorlist = ['#1a75ff', '#f2f9ff']) {
y: 0,
x2: 0,
y2: 1, // 从上到下渐变
colorStops: colorlist.map((item, index) => {
colorStops: colorList.map((item, index) => {
return {
offset: index / colorlist.length,
offset: index / colorList.length,
color: item
};
})
}
},
lineStyle: {
color: colorlist[0]
color: colorList[0]
},
itemStyle: {
color: colorlist[0]
color: colorList[0]
},
label: {
show: true,
color: colorlist[0],
color: colorList[0],
position: 'top'
}
};
activeSeries.value = obj;
}
// echarts tabs switch
function handleEcartsData(row: (typeof ecartslist.value)[number]) {
function handleEchartsData(row: (typeof ecartslist.value)[number]) {
activeEchartsindex.value = row.key;
if (row) {
xAxislist.value = [];
@@ -264,16 +258,16 @@ function handleEcartsData(row: (typeof ecartslist.value)[number]) {
});
// 根据 x 轴日期生成数据数组
const xAxisDates = getLastNDays(diffday.value, undefined, 'YYYY/MM/DD'); // 确保格式为 ['2024-04-16', ...]
const xAxisDates = getLastNDays(diffDay.value, undefined, 'YYYY/MM/DD'); // 确保格式为 ['2024-04-16', ...]
const arr = xAxisDates.map((date) => dataMap.get(date) || 0);
xAxislist.value = xAxisDates;
handleEcartsOptions(arr, row.name, [row.color]);
handleEchartsOptions(arr, row.name, [row.color]);
}
}
// 选择日期
function handleStateDate(val) {
diffday.value = diffDays(val);
function handleStateDate(val: string) {
diffDay.value = diffDays(val);
queryParams.value.statDate = `${formatDate(new Date(val), 'YYYY/MM/DD')}-${formatDate(new Date(), 'YYYY/MM/DD')}`;
getList();
}
@@ -282,10 +276,10 @@ function handleStateDate(val) {
const day = 1000 * 60 * 60 * 24;
// search options
function handleQueryDay(val: number) {
const newday = new Date(); // 当前日期
const time = new Date(newday.getTime() - val * day); // 指定日期
diffday.value = val; // 差值
diffday.value = getNaturalDayDiff(time, newday);
const newDay = new Date(); // 当前日期
const time = new Date(newDay.getTime() - val * day); // 指定日期
diffDay.value = val; // 差值
diffDay.value = getNaturalDayDiff(time, newDay);
queryParams.value.statDate = formatDate(time, 'YYYY/MM/DD');
getList();
}
@@ -305,15 +299,16 @@ const getList = async () => {
itemList.value.forEach((item) => {
list.value[0].value += item.totalPlans ?? 0;
list.value[1].value += item.totalTasks ?? 0;
list.value[2].value += item.completedTasks ?? 0;
list.value[4].value += item.outUncompletedTasks ?? 0;
const num = item.outCompletedTasks + item.completedTasks || 0;
list.value[2].value += num;
});
if (!Number.isNaN(+list.value[2].value) && !Number.isNaN(+list.value[1].value)) {
const num = Number(list.value[2].value) / Number(list.value[1].value);
list.value[3].value = Math.min((Number.isNaN(num) ? 0 : num) * 100, 100).toFixed(2) + '%';
}
handleEcartsData(ecartslist.value.find((item) => item.key === activeEchartsindex.value));
handleEchartsData(ecartslist.value.find((item) => item.key === activeEchartsindex.value));
total.value = res.total;
loading.value = false;
};