From d643050ffd11f45b4512865c09f4da6754ea90d2 Mon Sep 17 00:00:00 2001
From: chenyao <1219716595@qq.com>
Date: Sat, 12 Apr 2025 17:46:51 +0800
Subject: [PATCH] feat: 修改任务管理功能
---
src/views/TaskManage/TaskTop/TaskTime.vue | 54 ++++--
src/assets/images/task/title.png | 0
src/assets/images/task/other-total.png | 0
src/assets/images/task/task-event-total.png | 0
src/views/TaskManage/SearchBox.vue | 72 +++-----
src/views/TaskManage/TaskTop/TaskTotal.vue | 109 ++++++------
src/assets/images/task/total.png | 0
src/assets/images/task/task-num-total.png | 0
src/views/TaskManage/TaskTop/TaskTop.vue | 37 +++-
src/views/Home/AINowFly.vue | 15 +
src/views/TaskManage/TaskTop/TaskEvent.vue | 60 +++----
src/views/TaskManage/TaskTop/TaskIndustry.vue | 118 +++++++-------
src/views/TaskManage/TaskIntermediateContent/TaskIntermediateContent.vue | 15 -
13 files changed, 249 insertions(+), 231 deletions(-)
diff --git a/src/assets/images/task/other-total.png b/src/assets/images/task/other-total.png
new file mode 100644
index 0000000..38cd85c
--- /dev/null
+++ b/src/assets/images/task/other-total.png
Binary files differ
diff --git a/src/assets/images/task/task-event-total.png b/src/assets/images/task/task-event-total.png
new file mode 100644
index 0000000..7d7c956
--- /dev/null
+++ b/src/assets/images/task/task-event-total.png
Binary files differ
diff --git a/src/assets/images/task/task-num-total.png b/src/assets/images/task/task-num-total.png
new file mode 100644
index 0000000..6b6d9e5
--- /dev/null
+++ b/src/assets/images/task/task-num-total.png
Binary files differ
diff --git a/src/assets/images/task/title.png b/src/assets/images/task/title.png
new file mode 100644
index 0000000..8b525bc
--- /dev/null
+++ b/src/assets/images/task/title.png
Binary files differ
diff --git a/src/assets/images/task/total.png b/src/assets/images/task/total.png
new file mode 100644
index 0000000..bda148d
--- /dev/null
+++ b/src/assets/images/task/total.png
Binary files differ
diff --git a/src/views/Home/AINowFly.vue b/src/views/Home/AINowFly.vue
index 835b46f..45eff86 100644
--- a/src/views/Home/AINowFly.vue
+++ b/src/views/Home/AINowFly.vue
@@ -1,6 +1,6 @@
<template>
<div class="AINowFly">
- <div class="title">指点飞行<img @click="closeClick" src="@/assets/images/aiNowFly/close.png"/></div>
+ <div class="title">智引即飞<img @click="closeClick" src="@/assets/images/aiNowFly/close.png"/></div>
<el-form ref="ruleFormRef" :model="params" :rules="rules" label-width="auto" size="small" status-icon>
<el-form-item label="任务名称" prop="name">
<el-input v-model="params.name" />
@@ -23,7 +23,7 @@
<div class="title-list">可飞行机巢列表:</div>
<el-table :data="list" height="120" @selection-change="handleSelectionChange">
- <el-table-column type="selection" width="40" />
+ <el-table-column type="selection" />
<!-- <el-table-column type="index" label="序号" /> -->
<el-table-column prop="nickname" label="机巢名称" />
<el-table-column prop="minute" label="可飞行时间" />
@@ -317,6 +317,14 @@
width: 300px;
height: 120px;
margin: 0 0 0 11px;
+ overflow: hidden;
+ :deep(.el-scrollbar__wrap) {
+ overflow-x: hidden !important;
+ }
+
+ :deep(.el-table__body-wrapper) {
+ overflow-x: hidden !important;
+ }
:deep(.el-table__header-wrapper) {
th {
font-size: 12px;
@@ -328,7 +336,8 @@
}
:deep(.el-table__empty-block) {
background-color: #0A1734;
-
+ height: auto !important; // 移除固定高度
+ min-height: 60px; // 设置最小高度
.el-table__empty-text {
color: #FFFFFF;
}
diff --git a/src/views/TaskManage/SearchBox.vue b/src/views/TaskManage/SearchBox.vue
index dfa9c47..6901583 100644
--- a/src/views/TaskManage/SearchBox.vue
+++ b/src/views/TaskManage/SearchBox.vue
@@ -1,10 +1,10 @@
<template>
<div class="search-box" :class="{ 'is-expand': isExpand }">
<el-form :model="searchForm" inline>
- <div class="search-row">
- <div class="search-items">
- <el-form-item label="名称/编号">
- <el-input v-model="searchForm.key_word" placeholder="请输入任务名称/编号" clearable />
+ <!-- <div class="search-row"> -->
+ <!-- <div class="search-items"> -->
+ <el-form-item>
+ <el-input v-model="searchForm.key_word" placeholder="请输入任务/机巢名称" clearable />
</el-form-item>
<el-form-item label="区域">
<el-select v-model="searchForm.area_code" @change="deptChange" placeholder="请选择部门" clearable>
@@ -16,8 +16,12 @@
<el-option v-for="item in machineData" :key="item.device_sn" :label="item.nickname" :value="item.device_sn" />
</el-select>
</el-form-item>
- </div>
- <div class="search-btns">
+ <el-form-item>
+ <CommonDateTime v-model="newTime" @change="getData" />
+ </el-form-item>
+
+ <!-- </div> -->
+ <!-- <div class="search-btns">
<el-form-item>
<el-button type="primary" @click="handleSearch">查询</el-button>
<el-button @click="handleReset">重置</el-button>
@@ -29,12 +33,12 @@
</el-icon>
</el-button>
</el-form-item>
- </div>
- </div>
+ </div> -->
+ <!-- </div> -->
<!-- 展开后显示的更多搜索条件 -->
- <div v-show="isExpand" class="search-more">
- <div class="search-row">
- <el-form-item label="周期类型">
+ <!-- <div v-show="isExpand" class="search-more"> -->
+ <!-- <div class="search-row"> -->
+ <!-- <el-form-item label="周期类型">
<el-select v-model="searchForm.date_enum" placeholder="请选择状态" clearable>
<el-option label="日" value="DAY" />
<el-option label="周" value="CURRENT_WEEK" />
@@ -51,16 +55,16 @@
end-placeholder="结束日期"
value-format="YYYY-MM-DD"
/>
- </el-form-item>
+ </el-form-item> -->
<el-form-item label="任务算法">
<!-- <el-select v-model="searchForm.ai_types" placeholder="请选择算法" clearable>
<el-option v-for="item in taskAlgorithm" :key="item.id" :label="item.dictValue" :value="item.dictKey" />
</el-select> -->
<TaskAlgorithmBusiness :showAlgorithm="true" @algorithmChange="algorithmChange"/>
</el-form-item>
- </div>
- <div class="search-row">
- <el-form-item label="所属部门">
+ <!-- </div> -->
+ <!-- <div class="search-row"> -->
+ <!-- <el-form-item label="所属部门">
<el-select v-model="searchForm.create_dept" placeholder="请选择部门" clearable>
<el-option v-for="item in deptData" :key="item.id" :label="item.deptName" :value="item.id" />
</el-select>
@@ -71,17 +75,16 @@
</el-select>
</el-form-item>
<el-form-item label="任务类型">
- <!-- <el-select v-model="searchForm.industry_type" placeholder="请选择类型" clearable>
- <el-option v-for="item in taskBusiness" :key="item.id" :label="item.dictValue" :value="item.dictKey" />
- </el-select> -->
<TaskAlgorithmBusiness :showBusiness="true" @businessChange="businessChange"/>
- </el-form-item>
- </div>
- </div>
+ </el-form-item> -->
+ <!-- </div> -->
+ <!-- </div> -->
</el-form>
</div>
</template>
<script setup>
+import { pxToRem } from '@/utils/rem'
+import CommonDateTime from '@/components/CommonDateTime.vue'
import { deptsByAreaCode, getDockInfo } from '@/api/home/common';
import TaskAlgorithmBusiness from './components/TaskAlgorithmBusiness.vue';
@@ -135,19 +138,6 @@
emit('addTask');
};
-// let taskAlgorithm = ref([]);
-// let taskBusiness = ref([]);
-
-// 请求字典字段
-// const requestDictionary = () => {
-// getDictionary('SF,HYLB').then((res) => {
-// if (res.code !== 0) {
-// // 处理数据
-// taskAlgorithm.value = res.data.data['SF'];
-// taskBusiness.value = res.data.data['HYLB'];
-// }
-// });
-// };
const algorithmChange = (val) => {
searchForm.ai_types = val;
};
@@ -199,18 +189,10 @@
<style lang="scss" scoped>
.search-box {
- position: absolute;
- top: 340px;
- left: 40px;
- width: calc(100% - 80px);
- height: 60px;
- line-height: 60px;
- background: rgba(31, 62, 122, 0.95);
- // padding: 10px 20px;
transition: all 0.3s;
- &.is-expand {
- height: auto;
- }
+ // &.is-expand {
+ // height: auto;
+ // }
.search-row {
display: flex;
// justify-content: space-between;
diff --git a/src/views/TaskManage/TaskIntermediateContent/TaskIntermediateContent.vue b/src/views/TaskManage/TaskIntermediateContent/TaskIntermediateContent.vue
index 299a8f3..905694a 100644
--- a/src/views/TaskManage/TaskIntermediateContent/TaskIntermediateContent.vue
+++ b/src/views/TaskManage/TaskIntermediateContent/TaskIntermediateContent.vue
@@ -1,7 +1,7 @@
<!-- 任务统计表格 -->
<template>
- <SearchBox @search="searchClick" @addTask="handleAddTask"></SearchBox>
<div class="task-intermediate-content">
+ <SearchBox @search="searchClick" @addTask="handleAddTask"></SearchBox>
<el-table :data="jobListData" style="width: 100%" height="calc(100vh - 180px)">
<el-table-column label="序号" width="60">
<template #default="scope">
@@ -121,16 +121,13 @@
<style lang="scss" scoped>
.task-intermediate-content {
- position: absolute;
- top: 400px;
- width: calc(100% - 80px);
- left: 40px;
- height: 500px;
- display: flex;
- flex-direction: column;
- justify-content: space-between;
+ margin-left: 38px;
+ margin-top: 16px;
+ background: linear-gradient( 27deg, #1F3E7A 0%, rgba(31,62,122,0.35) 79%, rgba(31,62,122,0) 100%);
+ padding: 14px 18px;
:deep(.el-table) {
+ margin-top: 12px;
background-color: transparent;
--el-table-tr-bg-color: transparent;
--el-table-border-color: rgba(255, 255, 255, 0.1);
diff --git a/src/views/TaskManage/TaskTop/TaskEvent.vue b/src/views/TaskManage/TaskTop/TaskEvent.vue
index 59c695e..cb3189d 100644
--- a/src/views/TaskManage/TaskTop/TaskEvent.vue
+++ b/src/views/TaskManage/TaskTop/TaskEvent.vue
@@ -1,13 +1,12 @@
-<!-- 任务事件统计 -->
+<!-- 任务事件数量比统计 -->
<template>
- <!-- <common-title title="任务事件统计"></common-title> -->
<div class="task-event">
+ <div class="title">任务事件数量比统计</div>
<div class="chart" ref="chartRef"></div>
</div>
</template>
<script setup>
-import CommonTitle from '@/components/CommonTitle.vue';
import * as echarts from 'echarts';
import { jobEventBar } from '@/api/home/task';
import dayjs from 'dayjs';
@@ -24,20 +23,22 @@
trigger: 'axis',
axisPointer: {
type: 'shadow'
- }
+ },
+ formatter: '{b}: {c} 件'
},
legend: {
data: ['任务', '事件'],
+ top: '2%',
textStyle: {
- color: '#fff'
+ color: '#6B90B5',
+ fontSize: 12,
},
- bottom: '5%'
},
grid: {
top: '15%',
left: '3%',
right: '4%',
- bottom: '15%',
+ bottom: '2%',
containLabel: true
},
xAxis: {
@@ -55,6 +56,7 @@
},
yAxis: {
type: 'value',
+ name: '单位：件',
axisLine: {
lineStyle: {
color: '#fff'
@@ -73,22 +75,22 @@
{
name: '任务',
type: 'bar',
- barWidth: '20%',
+ barWidth: '6px',
itemStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
- { offset: 0, color: '#1EE7E7' },
- { offset: 1, color: 'rgba(30, 231, 231, 0.1)' }
+ { offset: 0, color: '#1EE7C5' },
+ { offset: 1, color: '#84EDFF' }
])
}
},
{
name: '事件',
type: 'bar',
- barWidth: '20%',
+ barWidth: '6px',
itemStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
- { offset: 0, color: '#0070FF' },
- { offset: 1, color: 'rgba(0, 112, 255, 0.1)' }
+ { offset: 0, color: '#69BCFF' },
+ { offset: 1, color: '#183FFF' }
])
}
}
@@ -104,12 +106,6 @@
option.series[1].data = res.data?.data.map(item => item.data[1].value);
chart.setOption(option);
});
-};
-
-// 生成随机颜色
-const getRandomColor = () => {
- const colors = ['#1890FF', '#36CBCB', '#4ECB73', '#FBD437', '#F2637B', '#975FE5'];
- return colors[Math.floor(Math.random() * colors.length)];
};
onBeforeUnmount(() => {
@@ -140,21 +136,21 @@
<style lang="scss" scoped>
.task-event {
font-family: YouSheBiaoTiHei, YouSheBiaoTiHei;
- // margin-left: 29px;
- // padding: 16px 16px;
- width: 340px;
- height: 200px;
- background: linear-gradient(
- 270deg,
- rgba(31, 62, 122, 0) 0%,
- rgba(31, 62, 122, 0.35) 21%,
- #1f3e7a 100%
- );
- border-radius: 0px 0px 0px 0px;
- opacity: 0.85;
+ width: 660px;
+ height: 100%;
+ margin-left: 40px;
+ .title {
+ margin-top: 10px;
+ width: 660px;
+ height: 28.6px;
+ background: url('@/assets/images/task/task-event-total.png') no-repeat center / 100% 100%;
+ color: #CFEAFF;
+ padding-left: 44px;
+ line-height: 8px;
+ }
.chart {
width: 100%;
- height: 100%;
+ height: 200px;
}
}
</style>
\ No newline at end of file
diff --git a/src/views/TaskManage/TaskTop/TaskIndustry.vue b/src/views/TaskManage/TaskTop/TaskIndustry.vue
index 47968cf..326d6b8 100644
--- a/src/views/TaskManage/TaskTop/TaskIndustry.vue
+++ b/src/views/TaskManage/TaskTop/TaskIndustry.vue
@@ -1,13 +1,12 @@
-<!-- 业务统计 -->
+<!-- 任务算法统计 -->
<template>
- <!-- <common-title title="行业统计" :style="{ marginLeft: pxToRem(14) }"></common-title> -->
<div class="task-industry">
+ <div class="title">任务算法统计</div>
<div class="chart" ref="chartRef"></div>
</div>
</template>
<script setup>
-import CommonTitle from '@/components/CommonTitle.vue';
import * as echarts from 'echarts';
import { industryJobNumPieChart } from '@/api/home/task';
const chartRef = ref(null);
@@ -21,52 +20,44 @@
legend: {
orient: 'horizontal',
left: 'center',
- bottom: '5%',
+ bottom: '2%',
textStyle: {
- color: '#fff',
+ color: '#6B90B5',
fontSize: 12
},
- itemWidth: 10,
- itemHeight: 10,
- itemGap: 10,
- formatter: function(name) {
- let data = option.series[0].data;
- let total = 0;
- let tarValue = 0;
- for (let i = 0; i < data.length; i++) {
- total += data[i].value;
- if (data[i].name === name) {
- tarValue = data[i].value;
- }
- }
- let percentage = ((tarValue / total) * 100).toFixed(1);
- return `${name} ${percentage}%`;
- }
+ itemWidth: 2, // 减小图例标记的宽度
+ itemHeight: 3, // 减小图例标记的高度
+ itemGap: 8, // 减小图例项之间的间距
+ formatter: '{name}' // 简化图例文本
},
series: [
{
name: '行业统计',
type: 'pie',
- radius: '60%',
- center: ['35%', '50%'],
- itemStyle: {
- borderRadius: 4,
- borderColor: 'rgba(255,255,255,0.2)',
- borderWidth: 1
- },
+ roseType: 'radius',
+ radius: ['20%', '70%'],
+ center: ['50%', '45%'],
+ data: [
+ { name: '国土类', value: 0, itemStyle: { color: '#3D7FFF' } },
+ { name: '城管类', value: 0, itemStyle: { color: '#8277E9' } },
+ { name: '消防类', value: 0, itemStyle: { color: '#FFB77E' } },
+ { name: '林业类', value: 0, itemStyle: { color: '#44D7B6' } },
+ { name: '公安类', value: 0, itemStyle: { color: '#62F4FF' } }
+ ],
label: {
show: true,
- position: 'inside',
+ position: 'outside',
formatter: '{c}',
fontSize: 12,
color: '#fff'
},
labelLine: {
- show: false
- },
- emphasis: {
- scale: true,
- scaleSize: 10
+ show: true,
+ length: 5,
+ length2: 8,
+ lineStyle: {
+ color: '#fff'
+ }
}
}
]
@@ -76,23 +67,33 @@
const getIndustryJobNumPieChart = () => {
industryJobNumPieChart().then(res => {
if (res.data.code !== 0) return;
- const data = res.data.data.map(item => ({
- name: item.name,
- value: item.value,
- itemStyle: {
- color: getRandomColor()
+ option.series[0].data.forEach(item => {
+ const matchData = res.data.data.find(d => d.name === item.name);
+ if (matchData) {
+ item.value = matchData.value;
}
- }));
- option.series[0].data = data;
+ });
chart.setOption(option);
});
};
-// 生成随机颜色
-const getRandomColor = () => {
- const colors = ['#1890FF', '#36CBCB', '#4ECB73', '#FBD437', '#F2637B', '#975FE5'];
- return colors[Math.floor(Math.random() * colors.length)];
-};
+
+// 获取行业统计数据
+// const getIndustryJobNumPieChart = () => {
+// industryJobNumPieChart().then(res => {
+// if (res.data.code !== 0) return;
+// const data = res.data.data.map(item => ({
+// name: item.name,
+// value: item.value,
+// itemStyle: {
+// color: getRandomColor()
+// }
+// }));
+// option.series[0].data = data;
+// chart.setOption(option);
+// });
+// };
+
onMounted(() => {
chart = echarts.init(chartRef.value);
@@ -112,21 +113,20 @@
<style lang="scss" scoped>
.task-industry {
font-family: YouSheBiaoTiHei, YouSheBiaoTiHei;
- // margin-left: 29px;
- // padding: 16px 16px;
- width: 340px;
- height: 200px;
- background: linear-gradient(
- 270deg,
- rgba(31, 62, 122, 0) 0%,
- rgba(31, 62, 122, 0.35) 21%,
- #1f3e7a 100%
- );
- border-radius: 0px 0px 0px 0px;
- opacity: 0.85;
+ width: 244px;
+ height: 100%;
+ .title {
+ margin-top: 10px;
+ width: 244px;
+ height: 26px;
+ background: url('@/assets/images/task/title.png') no-repeat center / 100% 100%;
+ color: #CFEAFF;
+ padding-left: 38px;
+ line-height: 8px;
+ }
.chart {
width: 100%;
- height: 100%;
+ height: 200px;
}
}
</style>
\ No newline at end of file
diff --git a/src/views/TaskManage/TaskTop/TaskTime.vue b/src/views/TaskManage/TaskTop/TaskTime.vue
index efea1b5..e20c7f7 100644
--- a/src/views/TaskManage/TaskTop/TaskTime.vue
+++ b/src/views/TaskManage/TaskTop/TaskTime.vue
@@ -1,13 +1,12 @@
-<!-- 任务事件统计 -->
+<!-- 任务数量统计 -->
<template>
- <!-- <common-title title="任务时间统计"></common-title> -->
<div class="task-time">
+ <div class="title">任务数量统计</div>
<div class="chart" ref="chartRef"></div>
</div>
</template>
<script setup>
-import CommonTitle from '@/components/CommonTitle.vue';
import * as echarts from 'echarts';
import { jobNumBar } from '@/api/home/task';
import dayjs from 'dayjs';
@@ -24,13 +23,21 @@
trigger: 'axis',
axisPointer: {
type: 'shadow'
+ },
+ formatter: '{b}: {c} 件'
+ },
+ legend: {
+ top: '2%',
+ textStyle: {
+ color: '#6B90B5',
+ fontSize: 12,
}
},
grid: {
top: '15%',
left: '3%',
right: '4%',
- bottom: '3%',
+ bottom: '2%',
containLabel: true
},
xAxis: {
@@ -48,6 +55,12 @@
},
yAxis: {
type: 'value',
+ name: '单位：件',
+ nameTextStyle: {
+ color: '#E6F7FF',
+ fontSize: 12,
+ padding: [0, 0, 0, 0] // 调整单位文字位置
+ },
axisLine: {
lineStyle: {
color: '#fff'
@@ -64,12 +77,13 @@
},
series: [
{
+ name: '任务数量',
type: 'bar',
- barWidth: '40%',
+ barWidth: '6px',
itemStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
- { offset: 0, color: '#1EE7E7' },
- { offset: 1, color: 'rgba(30, 231, 231, 0.1)' }
+ { offset: 0, color: '#0EECE4' },
+ { offset: 1, color: '#058FE7' }
])
}
}
@@ -111,21 +125,21 @@
<style lang="scss" scoped>
.task-time {
font-family: YouSheBiaoTiHei, YouSheBiaoTiHei;
- // margin-left: 29px;
- // padding: 16px 16px;
- width: 340px;
- height: 200px;
- background: linear-gradient(
- 270deg,
- rgba(31, 62, 122, 0) 0%,
- rgba(31, 62, 122, 0.35) 21%,
- #1f3e7a 100%
- );
- border-radius: 0px 0px 0px 0px;
- opacity: 0.85;
+ width: 502px;
+ height: 100%;
+ margin-left: 14px;
+ .title {
+ margin-top: 10px;
+ width: 502px;
+ height: 28.6px;
+ background: url('@/assets/images/task/task-num-total.png') no-repeat center / 100% 100%;
+ color: #CFEAFF;
+ padding-left: 44px;
+ line-height: 8px;
+ }
.chart {
width: 100%;
- height: 100%;
+ height: 200px;
}
}
</style>
\ No newline at end of file
diff --git a/src/views/TaskManage/TaskTop/TaskTop.vue b/src/views/TaskManage/TaskTop/TaskTop.vue
index b3c7374..56232ed 100644
--- a/src/views/TaskManage/TaskTop/TaskTop.vue
+++ b/src/views/TaskManage/TaskTop/TaskTop.vue
@@ -1,13 +1,20 @@
<template>
- <div class="task-left">
- <TaskTotal />
- <TaskIndustry />
- <TaskTime />
- <TaskEvent />
+ <div class="task-top">
+ <!--时间 天气-->
+ <common-weather/>
+ <UserOperate/>
+ <div class="statistical-chart">
+ <TaskTotal />
+ <TaskIndustry />
+ <TaskTime />
+ <TaskEvent />
+ </div>
</div>
</template>
<script setup>
+import CommonWeather from '@/components/CommonWeather.vue';
+import UserOperate from '@/components/UserOperate.vue';
import TaskTotal from './TaskTotal.vue';
import TaskIndustry from './TaskIndustry.vue';
import TaskTime from './TaskTime.vue';
@@ -15,10 +22,22 @@
</script>
<style lang="scss" scoped>
-.task-left {
+.task-top {
position: relative;
- display: flex;
- justify-content: space-between;
- margin: 40px;
+ .statistical-chart {
+ display: flex;
+ width: 1848px;
+ height: 238px;
+ background: linear-gradient(
+ 270deg,
+ rgba(31, 62, 122, 0) 0%,
+ rgba(31, 62, 122, 0.35) 21%,
+ #1f3e7a 100%
+ );
+ border-radius: 0px 0px 0px 0px;
+ opacity: 0.85;
+ margin-left: 38px;
+ margin-right: 29px;
+ }
}
</style>
\ No newline at end of file
diff --git a/src/views/TaskManage/TaskTop/TaskTotal.vue b/src/views/TaskManage/TaskTop/TaskTotal.vue
index 5a5178c..bfb8291 100644
--- a/src/views/TaskManage/TaskTop/TaskTotal.vue
+++ b/src/views/TaskManage/TaskTop/TaskTotal.vue
@@ -1,11 +1,15 @@
<!-- 任务统计 -->
<template>
- <!-- <common-title title="任务统计" :style="{ marginLeft: pxToRem(14) }"></common-title> -->
<div class="task-total">
- <div class="card" v-for="item in list">
- <div>
- <div class="value">{{ item.value }}</div>
- <div class="name">{{item.name}}</div>
+ <div class="total">
+ <div class="txt">总任务数</div>
+ <div class="num">{{ total }}</div>
+ <img src="@/assets/images/task/total.png" alt="">
+ </div>
+ <div class="other-total">
+ <div class="total" v-for="item in list">
+ <div class="value" :style="{ color:item.color }">{{ item.value }}</div>
+ <div class="name">{{ item.name }}</div>
</div>
</div>
</div>
@@ -13,23 +17,22 @@
<script setup>
import { pxToRem } from '@/utils/rem';
-import CommonTitle from '@/components/CommonTitle.vue';
import { totalJobNum, jobStatistics } from "@/api/home/task";
+const total = ref(0);
const list = ref([
- { name: '总任务数', value: '1888'},
- { name: '计划执行', value: '18'},
- { name: '执行中', value: '999'},
- { name: '待执行', value: '8888'},
- { name: '已执行', value: '666'},
- { name: '执行失败', value: '2222'},
+ { name: '计划执行', value: '0', color: '#FFFFFF'},
+ { name: '执行中', value: '0', color: '#FFA768'},
+ { name: '待执行', value: '0', color: '#FFE17E'},
+ { name: '已执行', value: '0', color: '#8EFFAC'},
+ { name: '执行失败', value: '0', color: '#FF8E8E'},
]);
// 获取任务统计总数
const getTotalJobNum = () => {
totalJobNum().then((res) => {
if (res.data.code !== 0) returen;
- list.value[0].value = res.data.data;
+ total.value = res.data.data;
});
};
// 获取其他任务统计
@@ -53,48 +56,46 @@
<style lang="scss" scoped>
.task-total {
font-family: YouSheBiaoTiHei, YouSheBiaoTiHei;
- // margin-left: 29px;
- // padding: 16px 16px;
- width: 340px;
- height: 200px;
- left: 40px;
- background: linear-gradient(
- 270deg,
- rgba(31, 62, 122, 0) 0%,
- rgba(31, 62, 122, 0.35) 21%,
- #1f3e7a 100%
- );
- border-radius: 0px 0px 0px 0px;
- opacity: 0.85;
- margin-bottom: 12px;
- display: grid;
- grid-template-columns: repeat(2, 1fr);
- grid-template-rows: repeat(3, 1fr);
- gap: 10px;
- padding: 20px;
- .card {
- /* position: absolute;
- top: 8px;
- right: 10px;
- width: 200px; */
- display: flex;
- flex-wrap: wrap;
- gap: 8px;
- justify-content: flex-start;
- line-height: 22px;
- padding: 0 10px 10px 0;
- color: #ffffff;
- .name {
- font-family: Source Han Sans CN, Source Han Sans CN;
- font-weight: 400;
- font-size: 14px;
-
+ display: flex;
+ justify-content: space-between;
+ color: #ffffff;
+ .total {
+ position: relative;
+ text-align: center;
+ left: 18px;
+ .txt {
+ font-size: 16px;
+ margin-bottom: 14px;
+ margin-top: 40px;
}
-
- .value {
- font-family: YouSheBiaoTiHei, YouSheBiaoTiHei;
- font-weight: 400;
- font-size: 26px;
+ img { width: 160px; height: 110px;}
+ .num {
+ position: absolute;
+ font-size: 32px;
+ top: 94px;
+ left: 56px;
+ }
+ }
+ .other-total {
+ width: 256px;
+ height: 188px;
+ background: url('@/assets/images/task/other-total.png') no-repeat center / 100% 100%;
+ margin-top: 22px;
+ padding: 20px;
+ display: flex;
+ flex-wrap: wrap;
+ align-content: space-around;
+ .total {
+ position: static;
+ width: 30%;
+ text-align: center;
+ left: 0;
+ .name {
+ font-size: 14px;
+ }
+ .value {
+ font-size: 26px;
+ }
}
}
}
--
Gitblit v1.9.3