From 21cafdf0d0a032a991fdd1a1449d19405747e330 Mon Sep 17 00:00:00 2001
From: 罗广辉 <guanghui.luo@foxmail.com>
Date: Fri, 28 Mar 2025 11:25:51 +0800
Subject: [PATCH] feat: 日期调整
---
src/layout/Header.vue | 4
src/components/CommonDateTime.vue | 153 ++++++++-------
src/views/Home/components/HomeLeft/InspectionRaskDetails.vue | 322 ++++++++++++++++++-------------
src/views/Home/components/HomeRight/EventOverview.vue | 85 ++++++-
src/views/Home/SearchBox.vue | 13 +
pnpm-lock.yaml | 23 ++
6 files changed, 370 insertions(+), 230 deletions(-)
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index e20f826..035b72e 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -47,6 +47,9 @@
disable-devtool:
specifier: ^0.3.8
version: 0.3.8
+ echarts:
+ specifier: ^5.6.0
+ version: 5.6.0
element-plus:
specifier: ^2.9.3
version: 2.9.7(vue@3.5.13)
@@ -1168,6 +1171,9 @@
earcut@3.0.1:
resolution: {integrity: sha512-0l1/0gOjESMeQyYaK5IDiPNvFeu93Z/cO0TjZh9eZ1vyCtZnA7KMZ8rQggpsJHIbGSdrqYq9OhuveadOVHCshw==}
+ echarts@5.6.0:
+ resolution: {integrity: sha512-oTbVTsXfKuEhxftHqL5xprgLoc0k7uScAwtryCgWF6hPYFLRwOUHiFmHGCBKP5NPFNkDVopOieyUqYGH8Fa3kA==}
+
element-plus@2.9.7:
resolution: {integrity: sha512-6vjZh5SXBncLhUwJGTVKS5oDljfgGMh6J4zVTeAZK3YdMUN76FgpvHkwwFXocpJpMbii6rDYU3sgie64FyPerQ==}
peerDependencies:
@@ -2269,6 +2275,9 @@
resolution: {integrity: sha512-vxXDZg8/+p3gblxB6BhhG5yWVn1kGRlaL8O78UDXc3wRnPizB5g83dcvWV1jpDMIPnjZjOFuxlMmE82XJ4407w==}
engines: {node: '>= 0.4'}
+ tslib@2.3.0:
+ resolution: {integrity: sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg==}
+
tslib@2.8.1:
resolution: {integrity: sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==}
@@ -2463,6 +2472,9 @@
wildcard@1.1.2:
resolution: {integrity: sha512-DXukZJxpHA8LuotRwL0pP1+rS6CS7FF2qStDDE1C7DDg2rLud2PXRMuEDYIPhgEezwnlHNL4c+N6MfMTjCGTng==}
+
+ zrender@5.6.1:
+ resolution: {integrity: sha512-OFXkDJKcrlx5su2XbzJvj/34Q3m6PvyCZkVPHGYpcCJ52ek4U/ymZyfuV1nKE23AyBJ51E/6Yr0mhZ7xGTO4ag==}
snapshots:
@@ -3481,6 +3493,11 @@
gopd: 1.2.0
earcut@3.0.1: {}
+
+ echarts@5.6.0:
+ dependencies:
+ tslib: 2.3.0
+ zrender: 5.6.1
element-plus@2.9.7(vue@3.5.13):
dependencies:
@@ -4778,6 +4795,8 @@
typedarray.prototype.slice: 1.0.5
which-typed-array: 1.1.19
+ tslib@2.3.0: {}
+
tslib@2.8.1: {}
type@2.7.3: {}
@@ -5018,3 +5037,7 @@
has-tostringtag: 1.0.2
wildcard@1.1.2: {}
+
+ zrender@5.6.1:
+ dependencies:
+ tslib: 2.3.0
diff --git a/src/components/CommonDateTime.vue b/src/components/CommonDateTime.vue
index 7a7a9a2..efd1c5a 100644
--- a/src/components/CommonDateTime.vue
+++ b/src/components/CommonDateTime.vue
@@ -1,83 +1,96 @@
<template>
- <div class="common-date-time">
- <el-date-picker
- v-model="newTime"
- type="daterange"
- range-separator="-"
- start-placeholder="开始日期"
- end-placeholder="结束日期">
- </el-date-picker>
- <div class="time-card">
- <div class="card-item" :class="item==checked?'active':''" v-for="item in timeList" @click="timeClick(item)">
- {{ item }}
- </div>
- </div>
+ <div class="common-date-time">
+ <el-date-picker
+ v-model="newTime"
+ type="daterange"
+ range-separator="-"
+ start-placeholder="开始日期"
+ end-placeholder="结束日期"
+ >
+ </el-date-picker>
+ <div class="time-card">
+ <div
+ class="card-item"
+ :class="item == checked ? 'active' : ''"
+ v-for="item in timeList"
+ @click="timeClick(item)"
+ >
+ {{ item }}
+ </div>
</div>
+ </div>
</template>
<script setup>
const newTime = ref([]);
-let timeList = ['今日','本周','本月','本年' ];
+let timeList = ['今日', '本周', '本月', '本年'];
let checked = ref('今日');
-let timeClick = (item) => {
- checked.value = item;
-}
+let timeClick = item => {
+ checked.value = item;
+};
</script>
<style scoped lang="scss">
- .common-date-time {
- position: relative;
- top: 19px;
- display: flex ;
- justify-content: space-between;
- :deep(.el-date-editor) {
- background: rgba(0,15,34,0.5);
- border-radius: 0px 0px 0px 0px;
- border: 1px solid #306FCA;
- height: 28px;
-
- .el-input__wrapper {
- background-color: transparent;
- box-shadow: 0 0 0 1px #0070FF;
-
- &.is-focus {
- box-shadow: 0 0 0 1px #0070FF;
- }
- }
+.common-date-time {
+ position: relative;
+ display: flex;
+ justify-content: space-between;
- .el-range-input {
- background-color: transparent;
- color: #fff;
- height: 28px;
- &::placeholder {
- color: rgba(255, 255, 255, 0.6);
- }
- }
- }
- .time-card {
- width: 156px;
- height: 28px;
- background: linear-gradient( 270deg, #195BAD 0%, rgba(25,91,173,0) 100%);
- border-radius: 0px 0px 0px 0px;
- border: 1px solid #306FCA;
- font-family: Source Han Sans CN, Source Han Sans CN;
- font-weight: 400;
- font-size: 14px;
- color: #FFFFFF;
- display: flex;
- .card-item {
- width: 40px;
- height: 28px;
- line-height: 28px;
- cursor: pointer;
- }
- .active {
- background: linear-gradient( 270deg, #19AD8D 0%, rgba(25,173,141,0) 100%);
- box-shadow: inset 0px 0px 8px 0px rgba(0,255,200,0.6);
- border-radius: 0px 0px 0px 0px;
- border: 1px solid #30CAA9;
- }
- }
+ :deep(.el-date-editor) {
+ box-shadow: none;
+ width: 0;
+ flex: 1;
+ margin-right: 4px;
+
+ background: rgba(0, 15, 34, 0.5);
+ border-radius: 0px 0px 0px 0px;
+ border: 1px solid #306fca;
+ height: 28px;
+
+ .el-input__wrapper {
+ background-color: transparent;
+ box-shadow: 0 0 0 1px #0070ff;
+
+ &.is-focus {
+ box-shadow: 0 0 0 1px #0070ff;
+ }
}
-</style>
\ No newline at end of file
+
+ .el-range-input {
+ background-color: transparent;
+ color: #fff;
+ height: 28px;
+
+ &::placeholder {
+ color: rgba(255, 255, 255, 0.6);
+ }
+ }
+ }
+
+ .time-card {
+ text-align: center;
+ background: linear-gradient(270deg, #195bad 0%, rgba(25, 91, 173, 0) 100%);
+ border: 1px solid #306fca;
+ font-family: Source Han Sans CN, Source Han Sans CN, serif;
+ font-weight: 400;
+ font-size: 14px;
+ color: #ffffff;
+ display: flex;
+ height: 28px;
+
+ .card-item {
+ width: 39px;
+ height: 100%;
+ line-height: 26px;
+ cursor: pointer;
+ }
+
+ .active {
+ background: linear-gradient(270deg, #19ad8d 0%, rgba(25, 173, 141, 0) 100%);
+ box-shadow: inset 0px 0px 8px 0px rgba(0, 255, 200, 0.6);
+ border-radius: 0px 0px 0px 0px;
+ }
+ }
+}
+</style>
diff --git a/src/layout/Header.vue b/src/layout/Header.vue
index 9b5b986..5b2bff2 100644
--- a/src/layout/Header.vue
+++ b/src/layout/Header.vue
@@ -38,7 +38,7 @@
background: url(@/assets/images/header-left.png) no-repeat;
background-size: 100% 100%;
margin-right: 3px;
- font-family: YouSheBiaoTiHei, YouSheBiaoTiHei;
+ font-family: YouSheBiaoTiHei, YouSheBiaoTiHei,serif;
font-weight: 400;
font-size: 18px;
color: #ffffff;
@@ -65,7 +65,7 @@
background: url(@/assets/images/header-right.png) no-repeat;
background-size: 100% 100%;
margin-right: 3px;
- font-family: YouSheBiaoTiHei, YouSheBiaoTiHei;
+ font-family: YouSheBiaoTiHei, YouSheBiaoTiHei,serif;
font-weight: 400;
font-size: 18px;
color: #ffffff;
diff --git a/src/views/Home/SearchBox.vue b/src/views/Home/SearchBox.vue
new file mode 100644
index 0000000..aca7698
--- /dev/null
+++ b/src/views/Home/SearchBox.vue
@@ -0,0 +1,13 @@
+<script setup>
+
+</script>
+
+<template>
+ <div>
+
+ </div>
+</template>
+
+<style scoped lang="scss">
+
+</style>
diff --git a/src/views/Home/components/HomeLeft/InspectionRaskDetails.vue b/src/views/Home/components/HomeLeft/InspectionRaskDetails.vue
index 43ead71..f43deec 100644
--- a/src/views/Home/components/HomeLeft/InspectionRaskDetails.vue
+++ b/src/views/Home/components/HomeLeft/InspectionRaskDetails.vue
@@ -1,21 +1,21 @@
<!-- 巡检任务详情 -->
<template>
- <div class="inspection-rask-details">
- <div class="inspection-num">
- <div class="total">
- <div class="value">88</div>
- <div class="name">总任务数</div>
- </div>
- <div class="status">
- <div v-for="item in list">
- <div :style="{ color: item.color }" class="value">{{ item.value }}</div>
- <div class="name">{{ item.name }}</div>
- </div>
- </div>
+ <div class="inspection-rask-details">
+ <div class="inspection-num">
+ <div class="total">
+ <div class="value">88</div>
+ <div class="name">总任务数</div>
+ </div>
+ <div class="status">
+ <div v-for="item in list">
+ <div :style="{ color: item.color }" class="value">{{ item.value }}</div>
+ <div class="name">{{ item.name }}</div>
</div>
- <CommonDateTime></CommonDateTime>
- <div class="chart-container" ref="chartRef"></div>
+ </div>
</div>
+ <CommonDateTime></CommonDateTime>
+ <div class="chart-container" ref="chartRef"></div>
+ </div>
</template>
<script setup>
@@ -33,141 +33,185 @@
const chartRef = ref(null);
onMounted(() => {
- const chart = echarts.init(chartRef.value);
- const option = {
- grid: {
- top: '15%',
- left: '3%',
- right: '4%',
- bottom: '3%',
- containLabel: true
+ const chart = echarts.init(chartRef.value);
+ const option = {
+ grid: {
+ top: '15%',
+ left: '3%',
+ right: '4%',
+ bottom: '3%',
+ containLabel: true,
+ },
+ tooltip: {
+ trigger: 'axis',
+ backgroundColor: 'rgba(0,0,0,0.7)',
+ borderColor: '#0070FF',
+ borderWidth: 1,
+ textStyle: {
+ color: '#fff',
+ },
+ formatter: '{b}日: {c}次',
+ },
+ xAxis: {
+ type: 'category',
+ data: [
+ '1',
+ '2',
+ '3',
+ '4',
+ '5',
+ '6',
+ '7',
+ '8',
+ '9',
+ '10',
+ '11',
+ '12',
+ '13',
+ '14',
+ '15',
+ '16',
+ '17',
+ '18',
+ '19',
+ '20',
+ '21',
+ '22',
+ '23',
+ '24',
+ '25',
+ '26',
+ '27',
+ '28',
+ '29',
+ '30',
+ ],
+ axisLine: {
+ show: false, // 隐藏轴线
+ },
+ axisTick: {
+ show: true,
+ length: 2,
+ lineStyle: {
+ color: '#ffffff',
},
- tooltip: {
- trigger: 'axis',
- backgroundColor: 'rgba(0,0,0,0.7)',
- borderColor: '#0070FF',
- borderWidth: 1,
- textStyle: {
- color: '#fff'
- },
- formatter: '{b}日: {c}次'
+ },
+ axisLabel: {
+ color: '#ffffff',
+ margin: 8,
+ },
+ },
+ yAxis: {
+ type: 'value',
+ axisLine: {
+ lineStyle: {
+ color: '#ffffff',
},
- xAxis: {
- type: 'category',
- data: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10',
- '11', '12', '13', '14', '15', '16', '17', '18', '19',
- '20', '21', '22', '23', '24', '25', '26', '27', '28', '29', '30'],
- axisLine: {
- show: false // 隐藏轴线
- },
- axisTick: {
- show: true,
- length: 2,
- lineStyle: {
- color: '#ffffff'
- }
- },
- axisLabel: {
- color: '#ffffff',
- margin: 8
- }
+ },
+ axisLabel: {
+ color: '#ffffff',
+ },
+ splitLine: {
+ lineStyle: {
+ color: 'rgba(255, 255, 255, 0.1)',
},
- yAxis: {
- type: 'value',
- axisLine: {
- lineStyle: {
- color: '#ffffff'
- }
- },
- axisLabel: {
- color: '#ffffff'
- },
- splitLine: {
- lineStyle: {
- color: 'rgba(255, 255, 255, 0.1)'
- }
- }
+ },
+ },
+ series: [
+ {
+ data: [
+ 10, 15, 8, 20, 12, 18, 15, 22, 16, 19, 14, 17, 21, 13, 16, 18, 15, 20, 17, 22, 19, 16, 14,
+ 18, 21, 15, 17, 20, 16, 18,
+ ],
+ type: 'bar',
+ barWidth: '60%',
+ itemStyle: {
+ color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+ { offset: 0, color: '#1EE7E7' },
+ { offset: 1, color: 'rgba(0, 112, 255, 0.1)' },
+ ]),
},
- series: [{
- data: [10, 15, 8, 20, 12, 18, 15, 22, 16, 19,
- 14, 17, 21, 13, 16, 18, 15, 20, 17, 22,
- 19, 16, 14, 18, 21, 15, 17, 20, 16, 18],
- type: 'bar',
- barWidth: '60%',
- itemStyle: {
- color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
- { offset: 0, color: '#1EE7E7' },
- { offset: 1, color: 'rgba(0, 112, 255, 0.1)' }
- ])
- }
- }]
- };
-
- chart.setOption(option);
-
- // 监听窗口大小变化
- window.addEventListener('resize', () => {
- chart.resize();
- });
+ },
+ ],
+ };
+
+ chart.setOption(option);
+
+ // 监听窗口大小变化
+ window.addEventListener('resize', () => {
+ chart.resize();
+ });
});
</script>
<style scoped lang="scss">
.inspection-rask-details {
- margin-left: 29px;
- 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%);
- border-radius: 0px 0px 0px 0px;
- opacity: 0.85;
- .inspection-num {
- background: url('@/assets/images/inspection-num.png') no-repeat center / 100% 100%;
- width: 360px;
- height: 118px;
- position: relative;
- .total {
- position: absolute;
- left: 34px;
- top: 34px;
- font-weight: 500;
- font-size: 14px;
- color: #FFFFFF;
- font-family: Source Han Sans CN, Source Han Sans CN;
- .value {
- font-family: YouSheBiaoTiHei, YouSheBiaoTiHei;
- margin-left: 8px;
- font-size: 26px;
- }
- }
- .status {
- 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;
- .name {
- font-family: Source Han Sans CN, Source Han Sans CN;
- font-weight: 400;
- font-size: 14px;
- color: #FFFFFF;
- }
- .value {
- font-family: YouSheBiaoTiHei, YouSheBiaoTiHei;
- font-weight: 400;
- font-size: 26px;
- }
- }
+ margin-left: 29px;
+ 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%
+ );
+ border-radius: 0px 0px 0px 0px;
+ opacity: 0.85;
+
+ .inspection-num {
+ background: url('@/assets/images/inspection-num.png') no-repeat center / 100% 100%;
+ width: 360px;
+ height: 118px;
+ position: relative;
+
+ .total {
+ position: absolute;
+ left: 34px;
+ top: 34px;
+ font-weight: 500;
+ font-size: 14px;
+ color: #ffffff;
+ font-family: Source Han Sans CN, Source Han Sans CN;
+
+ .value {
+ font-family: YouSheBiaoTiHei, YouSheBiaoTiHei;
+ margin-left: 8px;
+ font-size: 26px;
+ }
}
- .chart-container {
- width: 100%;
- height: 200px;
- margin-top: 20px;
+
+ .status {
+ 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;
+
+ .name {
+ font-family: Source Han Sans CN, Source Han Sans CN;
+ font-weight: 400;
+ font-size: 14px;
+ color: #ffffff;
+ }
+
+ .value {
+ font-family: YouSheBiaoTiHei, YouSheBiaoTiHei;
+ font-weight: 400;
+ font-size: 26px;
+ }
}
+ }
+
+ .chart-container {
+ width: 100%;
+ height: 200px;
+ margin-top: 20px;
+ }
}
</style>
diff --git a/src/views/Home/components/HomeRight/EventOverview.vue b/src/views/Home/components/HomeRight/EventOverview.vue
index 20d1dfc..22e5042 100644
--- a/src/views/Home/components/HomeRight/EventOverview.vue
+++ b/src/views/Home/components/HomeRight/EventOverview.vue
@@ -8,6 +8,8 @@
import overviewImg5 from '@/assets/images/home/homeRight/overview5.png';
import overviewImg6 from '@/assets/images/home/homeRight/overview6.png';
import completionLeft from '@/assets/images/home/homeRight/completionLeft.png';
+import * as echarts from 'echarts';
+import CommonDateTime from '@/components/CommonDateTime.vue';
const list = ref([
{ name: '待审核', value: 265, img: overviewImg1, color: '#FF8E8E' },
@@ -18,29 +20,66 @@
{ name: '已完结', value: 262, img: overviewImg6, color: '#8EFFAC' },
]);
const value = ref('');
+const echartsRef = ref('');
const options = [
{
value: 'Option1',
label: 'Option1',
},
- {
- value: 'Option2',
- label: 'Option2',
- },
- {
- value: 'Option3',
- label: 'Option3',
- },
- {
- value: 'Option4',
- label: 'Option4',
- },
- {
- value: 'Option5',
- label: 'Option5',
- },
];
+const option = {
+ tooltip: {
+ trigger: 'axis',
+ axisPointer: {
+ type: 'shadow',
+ },
+ },
+ legend: {},
+ grid: {
+ left: '3%',
+ right: '4%',
+ bottom: '3%',
+ containLabel: true,
+ },
+ xAxis: [
+ {
+ type: 'category',
+ data: ['暴露垃圾', '占道'],
+ },
+ ],
+ yAxis: [
+ {
+ type: 'value',
+ },
+ ],
+ series: [
+ {
+ name: '待完成',
+ type: 'bar',
+ stack: 'Ad',
+ emphasis: {
+ focus: 'series',
+ },
+ data: [120, 132],
+ },
+ {
+ name: '已完成',
+ type: 'bar',
+ stack: 'Ad',
+ emphasis: {
+ focus: 'series',
+ },
+ data: [220, 182],
+ },
+ ],
+};
+
+onMounted(() => {
+ const chart = echarts.init(echartsRef.value);
+
+ chart.setOption(option);
+});
</script>
<template>
@@ -59,6 +98,7 @@
</div>
</div>
</div>
+ <CommonDateTime class="dateTime" />
<el-select class="homeRightSelect" v-model="value" placeholder="请选择" size="large">
<el-option
@@ -76,9 +116,7 @@
<img class="completion-left-img" :src="completionLeft" />
</div>
- <div class="chart">
- <div class="chart-text">echarts柱状图</div>
- </div>
+ <div class="chart" ref="echartsRef"></div>
</div>
</div>
</template>
@@ -118,6 +156,10 @@
display: flex;
flex-direction: column;
align-items: center;
+
+ .dateTime{
+ width: 356px;
+ }
.overviewData {
width: 360px;
@@ -210,5 +252,10 @@
opacity: 0.2;
}
}
+
+ .chart {
+ width: 356px;
+ height: 182px;
+ }
}
</style>
--
Gitblit v1.9.3