8/13, dev
This commit is contained in:
@@ -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;
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user