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

巡检任务编辑完成

Browse Source
This commit is contained in:
Zy
2026-04-22 17:44:05 +08:00
parent 04eb40d0e4
commit d0767d8a71
8 changed files with 142 additions and 90 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -27,12 +27,10 @@
</div>
</div>
<div class="overviewBox">
<el-card v-for="(item, index) in list" :key="index">
<div class="overviewitem">
<div class="overviewitem_name">{{ item.name }}</div>
<div class="overviewitem_value">{{ item.value }}</div>
</div>
</el-card>
<div class="overviewitem" v-for="(item, index) in list" :key="index">
<div class="overviewitem_name">{{ item.name }}</div>
<div class="overviewitem_value">{{ item.value }}</div>
</div>
</div>
</div>
</el-card>
@@ -41,10 +39,10 @@
<el-card class="flex-1" shadow="never">
<template #header>
<span style="font-size: 1.2rem">数据统计 </span>
<span style="font-size: 1.1rem">数据统计 </span>
</template>
<el-row :gutter="10" class="h-full">
<el-col :span="10">
<el-row :gutter="40" class="h-full">
<el-col :span="11">
<div class="echartsbox flex h-full flex-col">
<div class="echartsactions">
<div
@@ -62,19 +60,26 @@
</div>
</div>
</el-col>
<el-col :span="14">
<el-col :span="1"></el-col>
<el-col :span="12">
<el-table v-loading="loading" border :data="itemList">
<el-table-column label="日期" width="100" align="center" prop="statDate" />
<el-table-column label="计划巡检任务" width="120" align="center" prop="totalPlans" />
<el-table-column label="按时完成" align="center" prop="completedTasks" />
<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="outCompletedTasks" />
<el-table-column label="超时未完成" align="center" prop="outUncompletedTasks" />
<el-table-column label="超时未完成" width="110" align="center" prop="outUncompletedTasks" />
<el-table-column label="进行中" align="center" prop="activeTask" />
<el-table-column label="未开始" align="center" prop="pendingTask" />
</el-table>
<pagination
:pagerCount="pagerCount"
v-show="total > 0"
:total="total"
:layout="layout"
v-model:page="queryParams.pageNum"
v-model:limit="queryParams.pageSize"
@pagination="getList"
@@ -95,9 +100,12 @@ const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const itemList = ref<any[]>([]);
const loading = ref(true);
const showSearch = ref(true);
const total = ref(0);
const total = ref(100);
const queryFormRef = ref<ElFormInstance>();
const pagerCount = document.body.clientWidth <= 1500 ? 1 : 7;
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();
};
@@ -117,17 +125,17 @@ const list = ref([
{
name: '计划数量',
key: 'totalPlans',
value: 20
value: 0
},
{
name: '任务数量',
key: 'totalPlans',
value: 200
key: 'totalTasks',
value: 0
},
{
name: '任务完成数量',
key: 'UncompletedTasks',
value: 40
key: 'completedTasks',
value: 0
},
{
name: ' 完成率',
@@ -137,13 +145,13 @@ const list = ref([
{
name: '未完成数量',
key: 'outUncompletedTasks',
value: 40
value: 0
}
]);
// ! echarts =================================================================
const activeEchartsindex = ref('totalTasks');
// echarts tabs
const ecartslist = ref([
{
name: '全部任务',
@@ -176,6 +184,8 @@ const ecartslist = ref([
offsetbottomColor: 'rgb(233, 233, 235)'
}
]);
// echarts options
const options = computed<EChartsOption>(() => ({
grid: {
left: '1%',
@@ -186,14 +196,26 @@ const options = computed<EChartsOption>(() => ({
},
xAxis: { data: xAxislist.value },
yAxis: { type: 'value' as const },
tooltip: { trigger: 'axis' as const },
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow',
shadowStyle: {
color: '#f6f8fc',
opacity: 0.3
}
}
},
series: activeSeries.value // 动态系列
}));
//
const diffday = ref(0);
const activeSeries = ref();
const xAxislist = ref([]);
// join Echarts Options object
function handleEcartsOptions(data, name, colorlist = ['#1a75ff', '#f2f9ff']) {
activeSeries.value = null;
const obj = {
data: data,
type: 'line' as const,
@@ -229,12 +251,13 @@ function handleEcartsOptions(data, name, colorlist = ['#1a75ff', '#f2f9ff']) {
activeSeries.value = obj;
}
// echarts tabs switch
function handleEcartsData(row: (typeof ecartslist.value)[number]) {
activeEchartsindex.value = row.key;
if (row) {
xAxislist.value = [];
// 避免修改原数组，创建副本排序
const sortedList = [...itemList.value].sort((a, b) => new Date(a.statDate).getTime() - new Date(b.statDate).getTime());
console.log(sortedList);
// 创建日期到值的映射，标准化日期格式（假设 statDate 为 '2024-04-16 00:00:00'，截取前10位）
const dataMap = new Map<string, number>();
sortedList.forEach((item) => {
@@ -243,22 +266,16 @@ function handleEcartsData(row: (typeof ecartslist.value)[number]) {
});
// 根据 x 轴日期生成数据数组
console.log(diffday.value);
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);
console.log(xAxisDates, dataMap);
xAxislist.value = xAxisDates;
console.log('xAxisDates:', xAxisDates); // 调试
console.log('dataMap:', dataMap); // 调试
console.log('arr:', arr); // 调试
activeSeries.value = null;
handleEcartsOptions(arr, row.name, [row.color, row.offsetbottomColor]);
handleEcartsOptions(arr, row.name, [row.color]);
}
}
// 选择日期
function handleStateDate(val) {
console.log(diffDays(val));
diffday.value = diffDays(val);
queryParams.value.statDate = `${formatDate(new Date(val), 'YYYY/MM/DD')}-${formatDate(new Date(), 'YYYY/MM/DD')}`;
getList();
@@ -266,10 +283,10 @@ function handleStateDate(val) {
// ! echarts =================================================================
const day = 1000 * 60 * 60 * 24;
// search options
function handleQueryDay(val: number) {
const newday = new Date(); // 当前日期
const time = new Date(newday.getTime() - val * day); // 指定日期
console.log(time, newday);
diffday.value = val; // 差值
diffday.value = getNaturalDayDiff(time, newday);
queryParams.value.statDate = formatDate(time, 'YYYY/MM/DD');
@@ -283,7 +300,22 @@ const getList = async () => {
loading.value = true;
const res = await listItem(queryParams.value);
itemList.value = res.rows;
handleEcartsData(ecartslist.value[0]);
list.value.forEach((item) => {
item.value = 0;
});
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;
});
if (!Number.isNaN(+list.value[2].value) && !Number.isNaN(+list.value[1].value)) {
list.value[3].value = Math.min((Number(list.value[2].value) / Number(list.value[1].value)) * 100, 100) + '%';
}
handleEcartsData(ecartslist.value.find((item) => item.key === activeEchartsindex.value));
total.value = res.total;
loading.value = false;
};
@@ -300,14 +332,17 @@ onMounted(() => {
}
.rightSearch {
font-size: 0.85rem;
div {
width: 60px;
min-width: 60px;
margin-right: 10px;
}
i {
margin: 0 10px;
display: block;
padding: 5px 5px;
font-style: normal;
cursor: pointer;
&:hover {
color: #409eff;
}
@@ -315,13 +350,20 @@ onMounted(() => {
}
.overviewBox {
display: flex;
flex-wrap: nowrap;
align-items: center;
justify-content: space-between;
margin-top: 40px;
gap: 20px;
.overviewitem {
flex: 1;
min-width: 150px;
padding: 5px -5px;
padding: 25px 15px;
width: 240px;
height: 112px;
border-radius: 10px;
background-color: rgba(255, 255, 255, 1);
box-shadow: 0px 2px 6px 0px rgba(26, 117, 255, 0.2);
border: 1px solid rgba(26, 117, 255, 0.2);
.overviewitem_name {
color: rgba(102, 102, 102, 1);
@@ -346,9 +388,11 @@ onMounted(() => {
line-height: 40px;
width: 100px;
text-align: center;
font-size: 0.75rem;
border: 1px solid rgba(220, 223, 230, 1);
color: rgba(16, 16, 16, 1);
border-left: none;
cursor: pointer;
&:first-of-type {
border-radius: 4px 0px 0px 0px;
border-left: 1px solid rgba(220, 223, 230, 1);
@@ -363,5 +407,8 @@ onMounted(() => {
}
}
}
.echartsbody {
max-height: 500px;
}
}
</style>