From 898c836c57c22b9439321e96650f8a35b1cea917 Mon Sep 17 00:00:00 2001
From: 罗广辉 <guanghui.luo@foxmail.com>
Date: Sun, 13 Apr 2025 08:07:06 +0800
Subject: [PATCH] feat: 添加echartsResize hooks,添加ztzf组件样式
---
src/views/TaskManage/TaskTop/TaskTime.vue | 27 -
src/views/Home/HomeRight/EventOverview.vue | 8
src/views/Home/EventOverviewDetail/EventOverviewDetailLeft/EventTrendAnalysis.vue | 7
src/views/Home/EventOverviewDetail/EventOverviewDetailRight.vue | 9
src/views/TaskManage/SearchBox.vue | 64 -----
src/views/TaskManage/TaskTop/TaskTotal.vue | 4
src/views/Home/HomeRight/TaskAchievements.vue | 2
src/hooks/useEchartsResize.js | 38 +++
src/styles/element-ui.scss | 278 ++++++++++++++-----------
src/views/Home/EventOverviewDetail/EventOverviewDetailLeft/EventDataAnalysis.vue | 7
src/views/SignMachineNest/MachineLeft/InspectionRaskDetails.vue | 15
src/views/TaskManage/TaskTop/TaskEvent.vue | 28 --
src/views/TaskManage/TaskTop/TaskIndustry.vue | 21 -
src/views/Home/HomeLeft/InspectionRaskDetails/InspectionRaskDetails.vue | 45 +--
src/views/Home/HomeLeft/InspectionRaskDetails/InspectionRaskDetailsDialog.vue | 65 -----
src/views/TaskManage/TaskIntermediateContent/TaskIntermediateContent.vue | 29 --
src/views/TaskManage/components/TaskAlgorithmBusiness.vue | 4
17 files changed, 272 insertions(+), 379 deletions(-)
diff --git a/src/hooks/useEchartsResize.js b/src/hooks/useEchartsResize.js
new file mode 100644
index 0000000..76f9600
--- /dev/null
+++ b/src/hooks/useEchartsResize.js
@@ -0,0 +1,38 @@
+import * as echarts from 'echarts'
+
+
+/**
+ * ECharts自适应容器大小Hook
+ *
+ * @param {Object} domRef - DOM元素引用对象，需包含value属性指向要挂载的DOM节点
+ * @returns {Object} chart - 包含value属性的对象，value保存ECharts实例引用
+ */
+const useEchartsResize = (domRef) => {
+ // 图表实例容器，用对象包装便于保持引用地址
+ const chart = {value: null}
+
+ // 窗口大小变化处理函数
+ const resizeChart = () => {
+ chart.value?.resize()
+ }
+
+ // 组件挂载后初始化逻辑
+ onMounted(() => {
+ if (!domRef.value) return
+ // 初始化ECharts实例并注册resize监听
+ chart.value = echarts.init(domRef.value)
+ window.addEventListener('resize', resizeChart)
+ })
+
+ // 组件卸载前清理逻辑
+ onBeforeUnmount(() => {
+ // 移除监听并清理图表实例
+ window.removeEventListener('resize', resizeChart)
+ chart.value?.dispose()
+ chart.value = null
+ })
+
+ return {chart}
+}
+
+export default useEchartsResize
diff --git a/src/styles/element-ui.scss b/src/styles/element-ui.scss
index 27d81e9..9358c27 100644
--- a/src/styles/element-ui.scss
+++ b/src/styles/element-ui.scss
@@ -60,60 +60,65 @@
.avue--detail .el-form-item {
background-color: #fafafa;
}
+
// 查看按钮
.ztzf-view {
width: 53px;
- height: 27px;
- background: #001f4e !important;
- border-radius: 0px 0px 0px 0px;
- border: 1px solid #51a8ff !important;
- font-size: 14px;
- color: #ffffff;
- text-align: center;
- line-height: 27px;
- cursor: pointer;
+ height: 27px;
+ background: #001f4e !important;
+ border-radius: 0px 0px 0px 0px;
+ border: 1px solid #51a8ff !important;
+ font-size: 14px;
+ color: #ffffff;
+ text-align: center;
+ line-height: 27px;
+ cursor: pointer;
}
+
// table表格
.ztzf-table {
.el-table__inner-wrapper:before {
- height: 0 !important;
- }
- .el-table .warning-row {
- --el-table-tr-bg-color: rgba(22, 43, 74, 0.79);
- }
- .el-table .warning-row::after {
- position: absolute;
- content: '';
- left: 0;
- width: 100%;
- border-bottom: 1px solid;
+ height: 0 !important;
+ }
- border-image: linear-gradient(
- 90deg,
- rgba(25, 162, 255, 0) 10%,
- rgba(20, 125, 202, 1) 50%,
- rgba(25, 162, 255, 0) 90%
- )
- 2 2 2 2;
- }
- .el-table .success-row {
- --el-table-tr-bg-color: #0b1d38;
- }
- .el-table .success-row::after {
- position: absolute;
- content: '';
- left: 0;
- width: 100%;
- border-bottom: 1px solid;
+ .el-table .warning-row {
+ --el-table-tr-bg-color: rgba(22, 43, 74, 0.79);
+ }
- border-image: linear-gradient(
- 90deg,
- rgba(25, 162, 255, 0) 10%,
- rgba(20, 125, 202, 1) 79%,
- rgba(25, 162, 255, 0) 90%
- )
- 2 2 2 2;
- }
+ .el-table .warning-row::after {
+ position: absolute;
+ content: '';
+ left: 0;
+ width: 100%;
+ border-bottom: 1px solid;
+
+ border-image: linear-gradient(
+ 90deg,
+ rgba(25, 162, 255, 0) 10%,
+ rgba(20, 125, 202, 1) 50%,
+ rgba(25, 162, 255, 0) 90%
+ ) 2 2 2 2;
+ }
+
+ .el-table .success-row {
+ --el-table-tr-bg-color: #0b1d38;
+ }
+
+ .el-table .success-row::after {
+ position: absolute;
+ content: '';
+ left: 0;
+ width: 100%;
+ border-bottom: 1px solid;
+
+ border-image: linear-gradient(
+ 90deg,
+ rgba(25, 162, 255, 0) 10%,
+ rgba(20, 125, 202, 1) 79%,
+ rgba(25, 162, 255, 0) 90%
+ ) 2 2 2 2;
+ }
+
.el-table {
color: #fff;
--el-table-border-color: var(--el-border-color-lighter);
@@ -130,18 +135,21 @@
--el-table-fixed-left-column: inset 10px 0 10px -10px rgba(0, 0, 0, 0.15);
--el-table-fixed-right-column: inset -10px 0 10px -10px rgba(0, 0, 0, 0.15);
}
+
.el-table__header {
width: 0 !important;
}
+
.el-table__body {
border-collapse: collapse;
}
+
.el-table .el-table__cell {
padding: 0 !important;
text-align: center !important;
}
-
- .el-table thead{
+
+ .el-table thead {
border-bottom: 1px solid !important;
border: 1px solid !important;
border-image: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1), rgba(255, 255, 255, 0)) 1 1 !important;
@@ -149,88 +157,116 @@
background: #102441 !important;
}
}
- // 分页
+
+// 分页
.ztzf-pagination {
-
- .el-pagination {
- display: flex !important;
- justify-content: center !important;
-}
-.el-pagination button{
- background: center center no-repeat none !important;
- color: #8eb8ea !important;
-}
-.el-pager li{
- background: none !important;
- color: #8eb8ea !important;
-}
-.el-pager li.is-active {
- background: #021022 !important;
- border-radius: 0px 0px 0px 0px;
- border: 1px solid #1479ef;
- color: #c7e1ff !important;
-}
-.el-pagination__goto {
- color: #c7e1ff !important;
-}
-.el-pagination__classifier {
- color: #c7e1ff !important;
-}
-.el-pager .el-input__wrapper {
- background: #021022 !important;
- color: #c7e1ff !important;
- border: 1px solid #1479ef !important;
- z-index: 1;
-}
-.el-input__wrapper {
- background: #021022 !important;
- box-shadow: none !important;
- border: 1px solid #178bff;
- color: #fff !important;
-}
-.el-input__inner {
- color: #fff !important;
-}
-}
-
-
-.ztzf-date-picker{
- box-shadow: none !important;
- background: rgba(0, 15, 34, 0.5);
- border: 1px solid #306fca;
-
- .el-input__wrapper {
- background-color: transparent;
- box-shadow: 0 0 0 1px #0070ff;
-
- &.is-focus {
- box-shadow: 0 0 0 1px #0070ff;
- }
+ --text-color: #8eb8ea;
+ --border: 1px solid #1479EF;
+ button {
+ background: center center no-repeat none !important;
+ color: var(--text-color);
}
-
- .el-range-input {
- background-color: transparent;
- color: #fff;
- height: 28px;
-
- &::placeholder {
- color: rgba(255, 255, 255, 0.6);
- }
- }
-
- .el-range-separator{
- color: #fff;
- }
-}
-
-.ztzf-select {
.el-select__wrapper {
background-color: transparent;
box-shadow: none;
- border: 1px solid #306fca;
+ border: var(--border);
}
.el-select__placeholder {
color: #ffffff;
}
+ .el-pagination__total{
+ color: var(--text-color);
+ }
+
+ .el-pager li {
+ background: none !important;
+ color: var(--text-color);
+
+ &.is-active{
+ background: #021022 !important;
+ border-radius: 0;
+ border: var(--border);
+ color: var(--text-color);
+ }
+ }
+
+ .el-pagination__goto {
+ color: var(--text-color);
+ }
+
+ .el-pagination__classifier {
+ color: var(--text-color);
+ }
+
+ .el-input__wrapper {
+ background: #021022 !important;
+ box-shadow: none !important;
+ border: var(--border);
+ color: #fff !important;
+ }
+
+ .el-input__inner {
+ color: #fff !important;
+ }
+}
+
+//时间日期选择器
+.ztzf-date-picker {
+ box-shadow: none !important;
+ background: #012A50;
+ border: 1px solid #51A8FF;
+
+ .el-input__wrapper {
+ box-shadow: none !important;
+
+ &.is-focus {
+ box-shadow: none !important;
+ }
+ }
+
+ .el-range-input {
+ color: #fff;
+
+ &::placeholder {
+ color: #8AC3FD;
+ }
+ }
+
+ .el-range-separator {
+ color: #ffffff;
+ }
+}
+
+//下拉
+.ztzf-select {
+ .el-select__wrapper {
+ background: #012A50;
+ box-shadow: none !important;
+ border: 1px solid #51A8FF;
+ }
+
+ .el-select__placeholder {
+ &.is-transparent{
+ color: #8AC3FD !important;
+ }
+ &.el-select__selected-item{
+ color: #ffffff;
+ }
+ }
+}
+
+.ztzf-input{
+ .el-input__wrapper{
+ background: #012A50;
+ box-shadow: none !important;
+ border: 1px solid #51A8FF;
+
+ .el-input__inner{
+ color: #ffffff;
+ &::placeholder {
+ color: #8AC3FD;
+ }
+ }
+ }
}
diff --git a/src/views/Home/EventOverviewDetail/EventOverviewDetailLeft/EventDataAnalysis.vue b/src/views/Home/EventOverviewDetail/EventOverviewDetailLeft/EventDataAnalysis.vue
index 0652a8f..3fa276b 100644
--- a/src/views/Home/EventOverviewDetail/EventOverviewDetailLeft/EventDataAnalysis.vue
+++ b/src/views/Home/EventOverviewDetail/EventOverviewDetailLeft/EventDataAnalysis.vue
@@ -7,9 +7,10 @@
<script setup>
import { getEventIndustryData } from '@/api/home/event'
import * as echarts from 'echarts'
+import useEchartsResize from '@/hooks/useEchartsResize'
const echartsRef = ref(null)
-let chart = null
+let { chart } = useEchartsResize(echartsRef)
const echartsOption = {
tooltip: {
@@ -126,12 +127,10 @@
})
})
echartsOption.series = seriesList
- chart.setOption(echartsOption)
+ chart.value.setOption(echartsOption)
}
onMounted(() => {
- chart = echarts.init(echartsRef.value)
- window.addEventListener('resize', chart.resize)
getData()
})
</script>
diff --git a/src/views/Home/EventOverviewDetail/EventOverviewDetailLeft/EventTrendAnalysis.vue b/src/views/Home/EventOverviewDetail/EventOverviewDetailLeft/EventTrendAnalysis.vue
index 36fdb73..b661128 100644
--- a/src/views/Home/EventOverviewDetail/EventOverviewDetailLeft/EventTrendAnalysis.vue
+++ b/src/views/Home/EventOverviewDetail/EventOverviewDetailLeft/EventTrendAnalysis.vue
@@ -7,9 +7,10 @@
<script setup>
import { getEventTrend } from '@/api/home/event'
import * as echarts from 'echarts'
+import useEchartsResize from '@/hooks/useEchartsResize'
const echartsRef = ref(null)
-let chart = null
+let { chart } = useEchartsResize(echartsRef)
const echartsOption = {
tooltip: {
@@ -102,12 +103,10 @@
const list = res?.data?.data || []
echartsOption.xAxis.data = list.map(item => item.name)
echartsOption.series.data = list.map(item => item.value)
- chart.setOption(echartsOption)
+ chart.value.setOption(echartsOption)
}
onMounted(() => {
- chart = echarts.init(echartsRef.value)
- window.addEventListener('resize', chart.resize)
getData()
})
</script>
diff --git a/src/views/Home/EventOverviewDetail/EventOverviewDetailRight.vue b/src/views/Home/EventOverviewDetail/EventOverviewDetailRight.vue
index 005f263..d610fc6 100644
--- a/src/views/Home/EventOverviewDetail/EventOverviewDetailRight.vue
+++ b/src/views/Home/EventOverviewDetail/EventOverviewDetailRight.vue
@@ -90,6 +90,7 @@
<div class="pagination">
<el-pagination
+ class="ztzf-pagination"
background
v-model:current-page="params.current"
v-model:page-size="params.size"
@@ -450,13 +451,5 @@
width: 100%;
display: flex;
justify-content: center;
-
- .el-pagination {
- --el-color-primary: #173da7;
- --el-pagination-button-bg-color: #131c35;
- --el-pagination-button-color: #ecf1ff;
- --el-disabled-bg-color: #131c35;
- --el-text-color-regular: #ecf1ff;
- }
}
</style>
diff --git a/src/views/Home/HomeLeft/InspectionRaskDetails/InspectionRaskDetails.vue b/src/views/Home/HomeLeft/InspectionRaskDetails/InspectionRaskDetails.vue
index 469035f..9831c09 100644
--- a/src/views/Home/HomeLeft/InspectionRaskDetails/InspectionRaskDetails.vue
+++ b/src/views/Home/HomeLeft/InspectionRaskDetails/InspectionRaskDetails.vue
@@ -1,7 +1,6 @@
<!-- 巡检任务详情 -->
<template>
- <common-title title="巡检任务情况" :style="{ marginLeft: pxToRem(14) }" @details="detailsFun">
- </common-title>
+ <common-title title="巡检任务情况" :style="{ marginLeft: pxToRem(14) }" @details="detailsFun"></common-title>
<div class="inspection-rask-details">
<div class="inspection-num">
<div class="total">
@@ -34,6 +33,7 @@
import { getJobNumBar, getJobStatistics, getTotalJobNum } from '@/api/home'
import dayjs from 'dayjs'
import InspectionRaskDetailsDialog from '@/views/Home/HomeLeft/InspectionRaskDetails/InspectionRaskDetailsDialog.vue'
+import useEchartsResize from '@/hooks/useEchartsResize'
const currenDate = dayjs().format('YYYY-MM-DD')
const newTime = ref([currenDate, currenDate])
const list = ref([
@@ -107,14 +107,14 @@
},
},
}
+
// 是否展示巡检任务详情
const isShowDetailsDialog = ref(false)
-const detailsFun = () => {
+const detailsFun = () => {
isShowDetailsDialog.value = true
-
}
-
-let chart = null
+const chartRef = ref(null)
+let { chart } = useEchartsResize(chartRef)
// TODAY,CURRENT_WEEK,CURRENT_MONTH,CURRENT_YEAR
const getData = (value, date_enum) => {
@@ -129,11 +129,10 @@
getJobNumBar(params).then(res => {
option.xAxis.data = res.data?.data.map(item => item.name)
option.series.data = res.data?.data.map(item => item.value)
- chart.setOption(option)
+ chart.value.setOption(option)
})
}
-const chartRef = ref(null)
const total = ref(0)
const jobStatistics = ref({
planned_executions: 0,
@@ -144,11 +143,6 @@
})
onMounted(() => {
- chart = echarts.init(chartRef.value)
- // 监听窗口大小变化
- window.addEventListener('resize', () => {
- chart?.resize()
- })
getTotalJobNum().then(res => {
total.value = res.data?.data || 0
})
@@ -162,12 +156,7 @@
padding: 16px 16px;
width: 390px;
height: 414px;
- background: linear-gradient(
- 270deg,
- rgba(31, 62, 122, 0) 0%,
- rgba(31, 62, 122, 0.35) 21%,
- #1f3e7a 100%
- );
+ 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;
@@ -201,22 +190,22 @@
height: 110px;
display: grid;
grid-template-columns: repeat(3, 1fr);
- grid-template-rows: repeat(1 , 30px); // 设置每行高度
+ grid-template-rows: repeat(1, 30px); // 设置每行高度
gap: 10px 0; // 调整行间距
align-content: center;
-
+
.item {
display: flex;
align-items: center;
}
.right-line {
- width: 0px;
- height: 36px;
- border-radius: 0px 0px 0px 0px;
- border: 1px solid;
- border-image: linear-gradient(180deg, rgba(27, 148, 255, 0), rgba(27, 148, 255, 1), rgba(27, 148, 255, 0)) 1 1;
- margin-left: 10px;
- }
+ width: 0px;
+ height: 36px;
+ border-radius: 0px 0px 0px 0px;
+ border: 1px solid;
+ border-image: linear-gradient(180deg, rgba(27, 148, 255, 0), rgba(27, 148, 255, 1), rgba(27, 148, 255, 0)) 1 1;
+ margin-left: 10px;
+ }
.name {
width: 56px;
text-align: center;
diff --git a/src/views/Home/HomeLeft/InspectionRaskDetails/InspectionRaskDetailsDialog.vue b/src/views/Home/HomeLeft/InspectionRaskDetails/InspectionRaskDetailsDialog.vue
index 5732667..b5b7f35 100644
--- a/src/views/Home/HomeLeft/InspectionRaskDetails/InspectionRaskDetailsDialog.vue
+++ b/src/views/Home/HomeLeft/InspectionRaskDetails/InspectionRaskDetailsDialog.vue
@@ -17,22 +17,22 @@
<el-form :model="searchForm" inline>
<div class="search-row">
<el-form-item>
- <el-input v-model="searchForm.key_word" placeholder="请输入任务/机巢名称" clearable />
+ <el-input class="ztzf-input" v-model="searchForm.key_word" placeholder="请输入任务/机巢名称" clearable />
</el-form-item>
<el-form-item label="关联算法">
- <el-select v-model="searchForm.ai_types" placeholder="请选择">
+ <el-select class="ztzf-select" v-model="searchForm.ai_types" placeholder="请选择">
<el-option v-for="item in taskAlgorithm" :key="item.id" :label="item.dictValue" :value="item.dictKey" />
</el-select>
</el-form-item>
<el-form-item label="任务状态">
- <el-select v-model="searchForm.status" placeholder="请选择" clearable>
+ <el-select class="ztzf-select" v-model="searchForm.status" placeholder="请选择" clearable>
<el-option v-for="item in statusOptions" :key="item.value" :label="item.label" :value="item.value" />
</el-select>
</el-form-item>
</div>
<div class="search-row">
<el-form-item label="选择机巢">
- <el-select v-model="searchForm.device_sn" placeholder="请选择">
+ <el-select class="ztzf-select" v-model="searchForm.device_sn" placeholder="请选择">
<el-option
v-for="item in deviceList"
:label="item.nickname"
@@ -43,6 +43,7 @@
</el-form-item>
<el-form-item>
<el-date-picker
+ class="ztzf-date-picker"
v-model="dateRange"
type="daterange"
range-separator="至"
@@ -115,8 +116,9 @@
</el-table>
</div>
<!-- 分页 -->
- <div class="pagination ztzf-pagination">
+ <div style="display: flex;justify-content: center">
<el-pagination
+ class="ztzf-pagination"
v-model:current-page="pageParams.current"
v-model:page-size="pageParams.size"
:page-sizes="[10, 20, 30, 50]"
@@ -272,67 +274,18 @@
.el-form-item__label {
color: #fff;
}
-
- .el-input,
- .el-select,
- .el-date-editor {
- width: 200px;
- --el-input-bg-color: transparent;
- --el-input-border-color: rgba(255, 255, 255, 0.3);
- --el-input-text-color: #fff;
- --el-input-placeholder-color: rgba(255, 255, 255, 0.5);
- }
}
}
:deep() {
- .el-date-editor.el-input,
- .el-date-editor.el-input__wrapper {
- height: var(--el-input-height, var(--el-component-size));
- width: 0 !important;
- }
- .el-select__wrapper {
- background: #012a50;
- height: 100%;
- padding-left: 20px;
- border: 1px solid #51a8ff;
- box-shadow: none !important;
- }
- .el-select__selected-item {
- font-family: Source Han Sans CN, Source Han Sans CN, serif;
- line-height: 18px;
- font-weight: 400;
- font-size: 16px;
- color: #296aca;
- }
- .el-input__wrapper {
- background: #012a50 !important;
- box-shadow: none !important;
- border: 1px solid #178bff;
- }
- .el-input__inner::placeholder {
- color: #296aca;
- }
.el-form-item__label {
font-family: Segoe UI, Segoe UI;
font-weight: 400;
font-size: 16px;
color: #ffffff;
}
- .el-date-editor .el-range-separator {
- color: #ffffff !important;
- }
-}
-:deep(.el-pagination) {
- display: flex;
- justify-content: center;
- margin-top: 10px;
-}
-:deep(.el-pagination button) {
- background: center center no-repeat none !important;
- color: #8eb8ea !important;
}
.el-table__body {
@@ -435,9 +388,9 @@
-webkit-background-clip: text; /* 背景被裁剪成文字的前景色 */
-webkit-text-fill-color: transparent; /* 文字填充颜色变透明 */
}
-
+
.el-scrollbar__thumb {
background: #13c6ff !important;
}
}
-</style>
\ No newline at end of file
+</style>
diff --git a/src/views/Home/HomeRight/EventOverview.vue b/src/views/Home/HomeRight/EventOverview.vue
index c9c5d5e..e86fd05 100644
--- a/src/views/Home/HomeRight/EventOverview.vue
+++ b/src/views/Home/HomeRight/EventOverview.vue
@@ -64,6 +64,7 @@
import dayjs from 'dayjs';
import { selectDevicePage } from '@/api/home/machineNest';
import { useStore } from 'vuex'
+import useEchartsResize from '@/hooks/useEchartsResize'
const echartsOption = {
tooltip: {
@@ -139,7 +140,7 @@
};
});
const echartsRef = ref(null);
-let chart = null;
+let { chart } = useEchartsResize(echartsRef)
const deviceList = ref([]);
const today = dayjs().format('YYYY-MM-DD');
const timeArr = ref([today, today]);
@@ -233,13 +234,14 @@
Object.keys(seriesObj).forEach(key => {seriesObj[key].data = []})
list.forEach(item => {
item.data.forEach((item1, index) => {
+ if (!seriesObj?.[item1.status]) return
seriesObj[item1.status].data.push(item1.value);
});
});
completionRateSeries.data = list.map(item => item.rate);
echartsOption.series = Object.values(seriesObj);
echartsOption.series.push(completionRateSeries);
- chart.setOption(echartsOption);
+ chart.value.setOption(echartsOption);
});
};
@@ -264,8 +266,6 @@
};
onMounted(() => {
- chart = echarts.init(echartsRef.value);
- window.addEventListener('resize', chart.resize);
getJobEventTotal().then(res => {
eventTotal.value = res?.data?.data || 0;
});
diff --git a/src/views/Home/HomeRight/TaskAchievements.vue b/src/views/Home/HomeRight/TaskAchievements.vue
index c320b81..ee25830 100644
--- a/src/views/Home/HomeRight/TaskAchievements.vue
+++ b/src/views/Home/HomeRight/TaskAchievements.vue
@@ -1,5 +1,5 @@
<template>
- <CommonTitle title="任务成果" @details="detailsFun" />
+ <CommonTitle title="任务成果" />
<div :style="{ marginLeft: pxToRem(14) }">
<div class="taskAchievements">
<div class="rawData">
diff --git a/src/views/SignMachineNest/MachineLeft/InspectionRaskDetails.vue b/src/views/SignMachineNest/MachineLeft/InspectionRaskDetails.vue
index 150515b..98cf3b9 100644
--- a/src/views/SignMachineNest/MachineLeft/InspectionRaskDetails.vue
+++ b/src/views/SignMachineNest/MachineLeft/InspectionRaskDetails.vue
@@ -15,13 +15,16 @@
import CommonTitle from '@/components/CommonTitle.vue';
import CommonDateTime from '@/components/CommonDateTime.vue';
import { jobNumBar, eventNumPie } from '@/api/home'
+import useEchartsResize from '@/hooks/useEchartsResize'
// 日期
const currenDate = dayjs().format('YYYY-MM-DD');
const newTime = ref([currenDate, currenDate]);
// 统计图
const chartRef = ref(null);
+let { chart } = useEchartsResize(chartRef)
const pieRef = ref(null);
+let { chart: pieChart } = useEchartsResize(pieRef)
const option = {
@@ -160,8 +163,6 @@
}
]
};
-let chart = null;
-let pieChart = null;
// TODAY,CURRENT_WEEK,CURRENT_MONTH,CURRENT_YEAR
const getData = (value,date_enum) => {
@@ -177,7 +178,7 @@
option.xAxis.data = res.data?.data.map(item => item.name);
option.series[0].data = res.data?.data.map(item => item.data[0].value);
option.series[1].data = res.data?.data.map(item => item.data[1].value);
- chart.setOption(option);
+ chart.value.setOption(option);
})
// 获取饼状图
eventNumPie(params).then(res => {
@@ -191,16 +192,10 @@
};
});
pieOption.series[0].data = updatedPieData;
- pieChart.setOption(pieOption);
+ pieChart.value.setOption(pieOption);
})
};
onMounted(() => {
- chart= echarts.init(chartRef.value);
- pieChart = echarts.init(pieRef.value);
- window.addEventListener('resize', () => {
- chart?.resize();
- pieChart?.resize();
- });
getData(newTime.value, 'TODAY');
});
</script>
diff --git a/src/views/TaskManage/SearchBox.vue b/src/views/TaskManage/SearchBox.vue
index bd27512..26fba96 100644
--- a/src/views/TaskManage/SearchBox.vue
+++ b/src/views/TaskManage/SearchBox.vue
@@ -3,15 +3,15 @@
<el-form :model="searchForm" inline>
<div class="search-first">
<el-form-item>
- <el-input v-model="searchForm.key_word" placeholder="请输入任务/机巢名称" clearable />
+ <el-input class="ztzf-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>
+ <el-select class="ztzf-select" v-model="searchForm.area_code" @change="deptChange" placeholder="请选择部门" clearable>
<el-option v-for="item in deptTreeData" :key="item.area_code" :label="item.area_name" :value="item.area_code" />
</el-select>
</el-form-item>
<el-form-item label="所属机巢:">
- <el-select v-model="searchForm.device_sn" placeholder="请选择机巢" clearable>
+ <el-select class="ztzf-select" v-model="searchForm.device_sn" placeholder="请选择机巢" clearable>
<el-option v-for="item in machineData" :key="item.device_sn" :label="item.nickname" :value="item.device_sn" />
</el-select>
</el-form-item>
@@ -22,12 +22,12 @@
<TaskAlgorithmBusiness :setWidth="200" :showAlgorithm="true" @algorithmChange="algorithmChange"/>
</el-form-item>
<el-form-item label="所属部门:" v-if="isExpand">
- <el-select v-model="searchForm.create_dept" placeholder="请选择部门" clearable>
+ <el-select class="ztzf-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>
</el-form-item>
<el-form-item label="任务状态:" v-if="isExpand">
- <el-select v-model="searchForm.status" placeholder="请选择状态" clearable>
+ <el-select class="ztzf-select" v-model="searchForm.status" placeholder="请选择状态" clearable>
<el-option v-for="item in statusOptions" :key="item.value" :label="item.label" :value="item.value" />
</el-select>
</el-form-item>
@@ -181,18 +181,6 @@
}
}
:deep(.el-form) {
- :deep(.el-input__wrapper),
- :deep(.el-select),
- :deep(.el-select__wrapper) {
-
- background-color: #021740;
- box-shadow: 0 0 0 1px #026AD6;
-
- &.is-focus {
- box-shadow: 0 0 0 1px #026AD6;
- }
- }
-
:deep(.el-input__wrapper.is-disabled) {
background-color: #021740;
box-shadow: 0 0 0 1px #026AD6;
@@ -201,51 +189,13 @@
margin-bottom: 0;
margin-right: 20px;
width: 260px;
-
+
.el-form-item__label {
color: #fff;
line-height: 32px;
}
-
- .el-input,
- .el-select,
- .el-date-editor {
- width: 100%;
- height: 32px;
- --el-input-bg-color: transparent;
- --el-input-border-color: #178BFF;
- --el-input-text-color: #296ACA;
- --el-input-placeholder-color: rgba(255, 255, 255, 0.5);
- .el-input__wrapper {
- height: 32px;
- }
-
- .el-input__inner {
- height: 32px;
- line-height: 32px;
- }
- }
}
- }
- :deep() {
- .el-select__wrapper {
- background: transparent;
- box-shadow: none;
- box-shadow: 0 0 0 1px #026AD6;
- height: 32px;
- padding-left: 20px;
- }
- }
- :deep(.el-pagination) {
- position: fixed;
- bottom: 20px;
- left: 50%;
- transform: translateX(-50%);
- background: rgba(31, 62, 122, 0.95);
- padding: 15px 20px;
- border-radius: 4px;
- box-shadow: 0 2px 12px rgba(0, 0, 0, 0.3);
}
}
-</style>
\ No newline at end of file
+</style>
diff --git a/src/views/TaskManage/TaskIntermediateContent/TaskIntermediateContent.vue b/src/views/TaskManage/TaskIntermediateContent/TaskIntermediateContent.vue
index c267f8f..3a25db8 100644
--- a/src/views/TaskManage/TaskIntermediateContent/TaskIntermediateContent.vue
+++ b/src/views/TaskManage/TaskIntermediateContent/TaskIntermediateContent.vue
@@ -29,7 +29,7 @@
</el-table-column>
</el-table>
<div class="pagination">
- <el-pagination class="btn-prev"
+ <el-pagination class="ztzf-pagination"
v-model:current-page="jobListParams.current"
v-model:page-size="jobListParams.size"
:page-sizes="[10, 20, 30, 50]"
@@ -72,7 +72,7 @@
const getStatusText = (status) => {
const statusMap = {
1: '待执行',
- 2: '执行中',
+ 2: '执行中',
3: '已完成',
4: '已取消',
5: '执行失败'
@@ -141,7 +141,7 @@
margin: 16px 38px 16px 38px;
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;
@@ -174,27 +174,6 @@
// padding: 20px 0;
display: flex;
justify-content: center;
-
- :deep(.el-pagination) {
- --el-pagination-bg-color: transparent;
- --el-pagination-text-color: #8EB8EA;
- --el-pagination-button-color: #8EB8EA;
- --el-pagination-hover-color: #409eff;
- .btn-prev {
- background: transparent;
- }
- .el-pager li.is-active {
- background: #021022;
- color: #8EB8EA;
- border: 1px solid #1479EF;
- padding: 0 6px;
- }
-
- .el-pagination__jump {
- background: transparent;
- color: #8EB8EA;
- }
- }
}
}
-</style>
\ No newline at end of file
+</style>
diff --git a/src/views/TaskManage/TaskTop/TaskEvent.vue b/src/views/TaskManage/TaskTop/TaskEvent.vue
index cb3189d..a56335a 100644
--- a/src/views/TaskManage/TaskTop/TaskEvent.vue
+++ b/src/views/TaskManage/TaskTop/TaskEvent.vue
@@ -10,13 +10,15 @@
import * as echarts from 'echarts';
import { jobEventBar } from '@/api/home/task';
import dayjs from 'dayjs';
+import useEchartsResize from '@/hooks/useEchartsResize'
// 日期
const currenDate = dayjs().format('YYYY-MM-DD');
const newTime = ref([currenDate, currenDate]);
// 图表
const chartRef = ref(null);
-let chart = null;
+let { chart } = useEchartsResize(chartRef)
+
const option = {
tooltip: {
@@ -104,33 +106,15 @@
option.xAxis.data = res.data.data.map(item => item.name);
option.series[0].data = res.data?.data.map(item => item.data[0].value);
option.series[1].data = res.data?.data.map(item => item.data[1].value);
- chart.setOption(option);
+ chart.value.setOption(option);
});
};
-onBeforeUnmount(() => {
- if (chart) {
- chart.dispose();
- chart = null;
- }
- window.removeEventListener('resize', handleResize);
-});
onMounted(() => {
- chart = echarts.init(chartRef.value);
getJobEventBar(newTime.value, 'CURRENT_YEAR');
-
- window.addEventListener('resize', () => {
- if (chart && !chart.isDisposed()) {
- chart.resize();
- }
- });
});
-onUnmounted(() => {
- window.removeEventListener('resize', chart?.resize);
- chart?.dispose();
-});
</script>
<style lang="scss" scoped>
@@ -140,7 +124,7 @@
height: 100%;
margin-left: 40px;
.title {
- margin-top: 10px;
+ margin-top: 10px;
width: 660px;
height: 28.6px;
background: url('@/assets/images/task/task-event-total.png') no-repeat center / 100% 100%;
@@ -153,4 +137,4 @@
height: 200px;
}
}
-</style>
\ No newline at end of file
+</style>
diff --git a/src/views/TaskManage/TaskTop/TaskIndustry.vue b/src/views/TaskManage/TaskTop/TaskIndustry.vue
index 326d6b8..ad47c8e 100644
--- a/src/views/TaskManage/TaskTop/TaskIndustry.vue
+++ b/src/views/TaskManage/TaskTop/TaskIndustry.vue
@@ -9,8 +9,9 @@
<script setup>
import * as echarts from 'echarts';
import { industryJobNumPieChart } from '@/api/home/task';
+import useEchartsResize from '@/hooks/useEchartsResize'
const chartRef = ref(null);
-let chart = null;
+let { chart } = useEchartsResize(chartRef)
const option = {
tooltip: {
@@ -73,7 +74,7 @@
item.value = matchData.value;
}
});
- chart.setOption(option);
+ chart.value.setOption(option);
});
};
@@ -90,23 +91,13 @@
// }
// }));
// option.series[0].data = data;
-// chart.setOption(option);
+// chart.value.setOption(option);
// });
// };
onMounted(() => {
- chart = echarts.init(chartRef.value);
getIndustryJobNumPieChart();
-
- window.addEventListener('resize', () => {
- chart?.resize();
- });
-});
-
-onUnmounted(() => {
- window.removeEventListener('resize', chart?.resize);
- chart?.dispose();
});
</script>
@@ -116,7 +107,7 @@
width: 244px;
height: 100%;
.title {
- margin-top: 10px;
+ margin-top: 10px;
width: 244px;
height: 26px;
background: url('@/assets/images/task/title.png') no-repeat center / 100% 100%;
@@ -129,4 +120,4 @@
height: 200px;
}
}
-</style>
\ No newline at end of file
+</style>
diff --git a/src/views/TaskManage/TaskTop/TaskTime.vue b/src/views/TaskManage/TaskTop/TaskTime.vue
index e20c7f7..a837636 100644
--- a/src/views/TaskManage/TaskTop/TaskTime.vue
+++ b/src/views/TaskManage/TaskTop/TaskTime.vue
@@ -10,13 +10,15 @@
import * as echarts from 'echarts';
import { jobNumBar } from '@/api/home/task';
import dayjs from 'dayjs';
+import useEchartsResize from '@/hooks/useEchartsResize'
// 日期
const currenDate = dayjs().format('YYYY-MM-DD');
const newTime = ref([currenDate, currenDate]);
const chartRef = ref(null);
-let chart = null;
+let { chart } = useEchartsResize(chartRef)
+
const option = {
tooltip: {
@@ -96,30 +98,15 @@
if (res.data.code !== 0) return;
option.xAxis.data = res.data.data.map(item => item.name);
option.series[0].data = res.data.data.map(item => item.value);
- chart.setOption(option);
+ chart.value.setOption(option);
});
};
-onBeforeUnmount(() => {
- if (chart) {
- chart.dispose();
- chart = null;
- }
- window.removeEventListener('resize', handleResize);
-});
+
onMounted(() => {
- chart = echarts.init(chartRef.value);
getJobNumBar(newTime.value, 'CURRENT_YEAR');
-
- if (chart && !chart.isDisposed()) {
- chart.resize();
- }
});
-onUnmounted(() => {
- window.removeEventListener('resize', chart?.resize);
- chart?.dispose();
-});
</script>
<style lang="scss" scoped>
@@ -129,7 +116,7 @@
height: 100%;
margin-left: 14px;
.title {
- margin-top: 10px;
+ margin-top: 10px;
width: 502px;
height: 28.6px;
background: url('@/assets/images/task/task-num-total.png') no-repeat center / 100% 100%;
@@ -142,4 +129,4 @@
height: 200px;
}
}
-</style>
\ No newline at end of file
+</style>
diff --git a/src/views/TaskManage/TaskTop/TaskTotal.vue b/src/views/TaskManage/TaskTop/TaskTotal.vue
index bfb8291..7ed5f4d 100644
--- a/src/views/TaskManage/TaskTop/TaskTotal.vue
+++ b/src/views/TaskManage/TaskTop/TaskTotal.vue
@@ -43,7 +43,7 @@
list.value[2].value = res.data.data.running_num;
list.value[3].value = res.data.data.pending_executions;
list.value[4].value = res.data.data.executed;
- list.value[5].value = res.data.data.failed_executions;
+ // list.value[5].value = res.data.data.failed_executions;
});
};
@@ -99,4 +99,4 @@
}
}
}
-</style>
\ No newline at end of file
+</style>
diff --git a/src/views/TaskManage/components/TaskAlgorithmBusiness.vue b/src/views/TaskManage/components/TaskAlgorithmBusiness.vue
index 8d68097..2486b5e 100644
--- a/src/views/TaskManage/components/TaskAlgorithmBusiness.vue
+++ b/src/views/TaskManage/components/TaskAlgorithmBusiness.vue
@@ -1,12 +1,12 @@
<!-- 关联算法和综合业务 -->
<template>
<div class="task-algorithm" v-if="showAlgorithm">
- <el-select :style="{ width:setWidth +'px' }" v-model="ai_types" multiple collapse-tags collapse-tags-tooltip placeholder="请选择算法" clearable @change="handleAlgorithmChange">
+ <el-select class="ztzf-select" :style="{ width:setWidth +'px' }" v-model="ai_types" multiple collapse-tags collapse-tags-tooltip placeholder="请选择算法" clearable @change="handleAlgorithmChange">
<el-option v-for="item in taskAlgorithm" :key="item.id" :label="item.dictValue" :value="item.dictKey" />
</el-select>
</div>
<div class="task-business" v-if="showBusiness">
- <el-select :style="{ width:setWidth +'px' }" v-model="industry_type" placeholder="请选择类型" clearable @change="handleBusinessChange">
+ <el-select class="ztzf-select" :style="{ width:setWidth +'px' }" v-model="industry_type" placeholder="请选择类型" clearable @change="handleBusinessChange">
<el-option v-for="item in taskBusiness" :key="item.id" :label="item.dictValue" :value="item.dictKey" />
</el-select>
</div>
--
Gitblit v1.9.3