From e3520708691de511d3cb13ff60b8ace469c3297a Mon Sep 17 00:00:00 2001
From: wwl <xchao828@163.com>
Date: 星期五, 20 六月 2025 08:40:17 +0800
Subject: [PATCH] 通知
---
src/views/index.vue | 478 +++++++++++++++++++++++++++++++----------------------------
1 files changed, 249 insertions(+), 229 deletions(-)
diff --git a/src/views/index.vue b/src/views/index.vue
index 6b85e7c..1ea2590 100644
--- a/src/views/index.vue
+++ b/src/views/index.vue
@@ -1,6 +1,30 @@
<template>
<div class="centre">
- <div style="display:flex;justify-content: center;align-items: center;">
+ <!-- 浠婃棩閫氱煡 -->
+ <div style="display: flex; justify-content: center; align-items: center;">
+ <h4>浠婃棩閫氱煡</h4>
+ </div>
+ <div class="notice-area">
+ <el-carousel :interval="2000" direction="vertical" :autoplay="true" :loop="true" height="120px"
+ v-if="groupedNoticeList.length > 0" class="carousel">
+ <el-carousel-item v-for="(group, index) in groupedNoticeList" :key="index">
+ <div class="notice-group">
+ <div class="notice-item" v-for="notice in group" :key="notice.noticeId"
+ @click="goToNotice(notice.noticeId)">
+ <el-tag size="small" :type="notice.noticeType === '1' ? 'info' : 'warning'">
+ {{ notice.noticeType === '1' ? '閫氱煡' : '鍏憡' }}
+ </el-tag>
+ <span class="notice-title">{{ notice.noticeTitle || '鏃犳爣棰�' }}</span>
+ <span class="notice-time">{{ parseTime(notice.createTime, '{y}-{m}-{d}') || '鏃犳椂闂�' }}</span>
+ </div>
+ </div>
+ </el-carousel-item>
+ </el-carousel>
+ <div v-else class="no-notice">鏆傛棤閫氱煡</div>
+ </div>
+
+ <!-- 浠婃棩缁熻 -->
+ <div style="display: flex; justify-content: center; align-items: center;">
<h4>浠婃棩缁熻</h4>
</div>
<div class="top">
@@ -37,11 +61,13 @@
</div>
</div>
</div>
- <div style="display:flex;justify-content: center;align-items: center;">
+
+ <!-- 杩戜竴鏈堢粺璁� -->
+ <div style="display: flex; justify-content: center; align-items: center;">
<h4>杩戜竴鏈堢粺璁�</h4>
</div>
<div class="data-view">
- <div id="main" style="width:95%;height:330px"></div>
+ <div id="main" style="width: 95%; height: 330px"></div>
</div>
<div class="view">
<div id="main2"></div>
@@ -52,11 +78,13 @@
<script>
import { getCustomer, getOrder, getReportToday, getTobeToday, getPieChart, getChart } from "@/api/home";
+import { noticeToday } from "@/api/system/notice";
const echarts = require('echarts/lib/echarts');
require('echarts/lib/component/title');
require('echarts/lib/component/tooltip');
require('echarts/lib/component/legend');
require('echarts/lib/chart/pie');
+require('echarts/lib/chart/line');
export default {
data() {
@@ -73,305 +101,304 @@
teamYYNum: [],
PieChart: [],
PieChart2: [],
- }
+ noticeList: [],
+ groupedNoticeList: [], // 鍒嗙粍鍚庣殑閫氱煡鍒楄〃
+ loading: false
+ };
},
created() {
this.getList();
-
},
+
watch: {
- $route(to, from) {
- window.location.reload(); //鐩戞祴鍒拌矾鐢卞彂鐢熻烦杞椂鍒锋柊涓�娆￠〉闈�
- // this.$router.go(0);
- },
+ $route(to, from) {
+ window.location.reload();
},
-
+ noticeList: {
+ handler(newList) {
+ // 灏嗛�氱煡鎸夋瘡缁勪笁鏉″垎缁�
+ this.groupedNoticeList = this.chunkArray(newList, 3);
+ console.log('groupedNoticeList:', this.groupedNoticeList); // 璋冭瘯
+ },
+ deep: true
+ }
+ },
methods: {
-
+ goToNotice(noticeId) {
+ this.$router.push({
+ path: '/notice',
+ query: { noticeId }
+ });
+ },
getList() {
this.loading = true;
+
+ // 鏌ヨ鎵�鏈夊叕鍛�
+ noticeToday().then(response => {
+ console.log('Notice API response:', response);
+ this.noticeList = response.rows || response.data || [];
+ console.log('noticeList:', this.noticeList);
+ this.loading = false;
+ this.$nextTick(() => {
+ console.log('Carousel updated');
+ });
+ }).catch(error => {
+ console.error('Notice API error:', error);
+ this.$message.error("鑾峰彇閫氱煡澶辫触锛�" + error.message);
+ this.loading = false;
+ });
+
// 鏌ヨ浠婃棩鐧昏
- getCustomer().then((response) => {
- this.Customer = response
+ getCustomer().then(response => {
+ this.Customer = response.data || response;
this.loading = false;
});
+
// 鏌ヨ浠婃棩宸叉
- getOrder().then((response) => {
- this.Order = response
+ getOrder().then(response => {
+ this.Order = response.data || response;
this.loading = false;
});
+
// 鏌ヨ浠婃棩鎶ュ憡
- getReportToday().then((response) => {
- this.ReportToday = response
+ getReportToday().then(response => {
+ this.ReportToday = response.data || response;
this.loading = false;
});
+
// 鏌ヨ浠婃棩寰呮
- getTobeToday().then((response) => {
- this.TobeToday = response
+ getTobeToday().then(response => {
+ this.TobeToday = response.data || response;
this.loading = false;
});
+
// 鎶樼嚎鍥�
- getChart().then((response) => {
+ getChart().then(response => {
response.data.forEach(item => {
- this.LineChart.push(item.date)
+ this.LineChart.push(item.date);
this.reportNum.push(item.tdcoun);
this.personYYNum.push(item.grcoun);
this.teamYYNum.push(item.bgcoun);
-
});
- let myChart = this.$echarts.init(document.getElementById('main'));
+ let myChart = this.$echarts.init(document.getElementById('main'));
myChart.setOption({
- tooltip: {
- trigger: 'axis'
- },
- legend: {
- data: ['姣忔棩浣撴鐧昏鏁�', '姣忔棩鍥綋鐧昏鏁�', '姣忔棩鍙戝竷鎶ュ憡鏁�']
- },
- grid: {
- left: '3%',
- right: '4%',
- bottom: '3%',
- containLabel: true
- },
- toolbox: {
- feature: {
- saveAsImage: {}
- }
- },
+ tooltip: { trigger: 'axis' },
+ legend: { data: ['姣忔棩浣撴鐧昏鏁�', '姣忔棩鍥綋鐧昏鏁�', '姣忔棩鍙戝竷鎶ュ憡鏁�'] },
+ grid: { left: '3%', right: '4%', bottom: '3%', containLabel: true },
+ toolbox: { feature: { saveAsImage: {} } },
xAxis: {
type: 'category',
boundaryGap: false,
axisLine: {
show: true,
- lineStyle: {
- color: "blue",
- size: 12,
- width: 0,
- tyle: "solid"
- }
+ lineStyle: { width: 0, color: 'blue', type: 'solid' }
},
data: this.LineChart
},
- yAxis: {
- type: 'value',
- min: 0,
- max: 400,
- interval: 20
- },
+ yAxis: { type: 'value', min: 0, max: 400, interval: 20 },
series: [
- {
- name: '姣忔棩浣撴鐧昏鏁�',
- type: 'line',
- stack: 'Total',
- data: this.personYYNum
- },
- {
- name: '姣忔棩鍥綋鐧昏鏁�',
- type: 'line',
- stack: 'Total',
- data: this.reportNum
- },
- {
- name: '姣忔棩鍙戝竷鎶ュ憡鏁�',
- type: 'line',
- stack: 'Total',
- data: this.teamYYNum
- },
+ { name: '姣忔棩浣撴鐧昏鏁�', type: 'line', stack: 'Total', data: this.personYYNum },
+ { name: '姣忔棩鍥綋鐧昏鏁�', type: 'line', stack: 'Total', data: this.reportNum },
+ { name: '姣忔棩鍙戝竷鎶ュ憡鏁�', type: 'line', stack: 'Total', data: this.teamYYNum }
]
+ });
- })
- let sizeFun = ()=> {
- myChart.resize()
- }
- window.addEventListener("resize", sizeFun)
-
+ const sizeFun = () => myChart.resize();
+ window.addEventListener('resize', sizeFun);
this.loading = false;
});
// 楗肩姸鍥�
- getPieChart().then((response) => {
+ getPieChart().then(response => {
if (response.data) {
-
- if(response.data.tjdj == 0){
- this.PieChart = []
- this.PieChart = [
- {
- "name": "浣撴鐧昏浜烘暟鍒嗗竷",
- "count": 1,
- "value": 10
- },
-
- ]
- }else if (response.data.tjdj.length === 0) {
-
- this.PieChart = []
- this.PieChart = [
- {
- "name": "浣撴鐧昏浜烘暟鍒嗗竷",
- "count": 1,
- "value": 10
- },
-
- ]
+ if (response.data.tjdj == 0 || !response.data.tjdj?.length) {
+ this.PieChart = [{ name: '浣撴鐧昏浜烘暟鍒嗗竷', count: 1, value: 10 }];
} else {
- this.PieChart = response.data.tjdj
- this.PieChart.forEach(item => {
- item.value = item.count
- })
- this.PieChart.reverse()
- this.PieChart.push(this.PieChart[0])
- this.PieChart.splice(0, 1)
-
+ this.PieChart = response.data.tjdj;
+ this.PieChart.forEach(item => { item.value = item.count; });
+ this.PieChart.reverse();
+ this.PieChart.push(this.PieChart[0]);
+ this.PieChart.splice(0, 1);
}
let myChart2 = this.$echarts.init(document.getElementById('main2'));
myChart2.setOption({
- title: {
- text: '浣撴鐧昏浜烘暟鍒嗗竷',
- top: '5'
+ title: { text: '浣撴鐧昏浜烘暟鍒嗗竷', top: '5' },
+ tooltip: { trigger: 'item' },
+ legend: { top: '80%', left: 'center' },
+ series: [{
+ type: 'pie',
+ radius: ['16%', '54%'],
+ center: ['50%', '43%'],
+ avoidLabelOverlap: false,
+ startAngle: 180,
+ minAngle: 10,
+ data: this.PieChart,
+ emphasis: {
+ itemStyle: { shadowBlur: 10, shadowOffsetX: 0, shadowColor: 'rgba(0, 0, 0, 0.5)' }
+ }
+ }]
+ });
- },
-
- tooltip: {
- trigger: 'item'
- },
- legend: {
- top: '80%',
- left: 'center'
- },
- series: [
- {
- // name: 'Access From',
- type: 'pie',
- radius: ['16%', '54%'],
- center: ["50%", "43%"],
- avoidLabelOveralap:false,
- startAngle:180,
- minAngle:10,
- data: this.PieChart,
- emphasis: {
- itemStyle: {
- shadowBlur: 10,
- shadowOffsetX: 0,
- shadowColor: 'rgba(0, 0, 0, 0.5)'
- }
- }
- }]
- })
-
- if(response.data.tjyc == 0){
- this.PieChart2 = []
- this.PieChart2 = [
- {
- "name": "浣撴缁撴灉寮傚父浜烘暟鍒嗗竷",
- "count": 1,
- "value": 0
- },
-
- ]
- }else if (response.data.tjyc.length === 0) {
- this.PieChart2 = []
- this.PieChart2 = [
- {
- "name": "浣撴缁撴灉寮傚父浜烘暟鍒嗗竷",
- "count": 1,
- "value": 0
- },
-
- ]
+ if (response.data.tjyc == 0 || !response.data.tjyc?.length) {
+ this.PieChart2 = [{ name: '浣撴缁撴灉寮傚父浜烘暟鍒嗗竷', count: 1, value: 0 }];
} else {
- this.PieChart2 = response.data.tjyc
- this.PieChart2.reverse()
- this.PieChart2.push(this.PieChart2[0])
- this.PieChart2.splice(0, 1)
- this.PieChart2.forEach(item => {
- item.value = item.count
- })
- // this.TobeToday = response
+ this.PieChart2 = response.data.tjyc;
+ this.PieChart2.reverse();
+ this.PieChart2.push(this.PieChart2[0]);
+ this.PieChart2.splice(0, 1);
+ this.PieChart2.forEach(item => { item.value = item.count; });
}
+
let myChart3 = this.$echarts.init(document.getElementById('main3'));
-
myChart3.setOption({
- title: {
- text: '浣撴缁撴灉寮傚父浜烘暟鍒嗗竷',
- top: '5'
+ title: { text: '浣撴缁撴灉寮傚父浜烘暟鍒嗗竷', top: '5' },
+ tooltip: { trigger: 'item' },
+ legend: { top: '80%', left: 'center' },
+ series: [{
+ type: 'pie',
+ radius: ['16%', '54%'],
+ center: ['50%', '43%'],
+ avoidLabelOverlap: false,
+ startAngle: 180,
+ minAngle: 10,
+ data: this.PieChart2,
+ emphasis: {
+ itemStyle: { shadowBlur: 10, shadowOffsetX: 0, shadowColor: 'rgba(0, 0, 0, 0.5)' }
+ }
+ }]
+ });
- },
- tooltip: {
- trigger: 'item'
- },
- legend: {
- top: '80%',
- left: 'center'
- },
- series: [
- {
- // name: 'Access From',
- type: 'pie',
- radius: ['16%', '54%'],
- center: ["50%", "43%"],
- avoidLabelOveralap:false,
- startAngle:180,
- minAngle:10,
- data: this.PieChart2,
- emphasis: {
- itemStyle: {
- shadowBlur: 10,
- shadowOffsetX: 0,
- shadowColor: 'rgba(0, 0, 0, 0.5)'
- }
- }
- }]
- })
- window.onresize = () =>{
- myChart2.resize()
- myChart3.resize()
+ window.onresize = () => {
+ myChart2.resize();
+ myChart3.resize();
+ };
}
- }
-
-
-
this.loading = false;
});
+ },
+ // 鏁扮粍鍒嗙粍鏂规硶
+ chunkArray(array, size) {
+ if (!array || array.length === 0) return [];
+ const result = [];
+ for (let i = 0; i < array.length; i += size) {
+ result.push(array.slice(i, i + size));
+ }
+ // 纭繚寰幆婊氬姩骞虫粦锛岃嫢涓嶈冻 size 鏉★紝琛ラ綈
+ if (array.length % size !== 0 && array.length > size) {
+ const lastGroup = result[result.length - 1];
+ while (lastGroup.length < size) {
+ lastGroup.push(array[lastGroup.length % array.length]);
+ }
+ }
+ return result;
+ },
+
+ parseTime(time, cFormat) {
+ if (!time) return '';
+ try {
+ const date = new Date(time);
+ if (isNaN(date.getTime())) return '';
+ const formatObj = {
+ y: date.getFullYear(),
+ m: String(date.getMonth() + 1).padStart(2, '0'),
+ d: String(date.getDate()).padStart(2, '0'),
+ h: String(date.getHours()).padStart(2, '0'),
+ i: String(date.getMinutes()).padStart(2, '0'),
+ s: String(date.getSeconds()).padStart(2, '0')
+ };
+ return cFormat.replace(/{([ymdhis]+)}/g, (result, key) => formatObj[key] || '');
+ } catch (error) {
+ console.error('parseTime error:', error, 'time:', time);
+ return '';
+ }
}
- },
-
-
- mounted() {
-
}
-}
-
-
+};
</script>
<style>
.centre {
min-height: 820px;
- margin: 15px 15px;
+ margin: 15px;
background-color: #f3f3f3;
- padding: 10px 10px 10px 10px;
+ padding: 10px;
+}
+
+.notice-area {
+ width: 100%;
+ min-height: 120px;
+ /* 璋冩暣涓轰笁鏉￠�氱煡楂樺害 */
+ background-color: #fff;
+ margin: 10px 0;
+ padding: 0 20px;
+}
+
+.carousel {
+ width: 100% !important;
+}
+
+.notice-group {
+ display: flex;
+ flex-direction: column;
+ height: 120px;
+ /* 纭繚鍖呭惈涓夋潯閫氱煡 */
+}
+
+.notice-item {
+ display: flex;
+ align-items: center;
+ width: 100%;
+ height: 40px;
+ line-height: 40px;
+ font-size: 14px;
+ cursor: pointer;
+}
+
+.notice-title {
+ margin-left: 10px;
+ font-size: 14px;
+ color: #333;
+ flex-grow: 1;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+}
+
+.notice-time {
+ font-size: 12px;
+ color: #999;
+ margin-left: 20px;
+}
+
+.no-notice {
+ width: 100%;
+ height: 120px;
+ /* 涓庤疆鎾珮搴︿竴鑷� */
+ line-height: 120px;
+ text-align: center;
+ color: #999;
+ font-size: 14px;
}
.top {
width: 100%;
display: flex;
height: 120px;
-
}
.add {
- width: 380px;
+ width: 320px;
height: 75px;
- margin-top: 30px;
+ margin-top: 20px;
margin-left: 20px;
margin-right: 20px;
background-color: #fff;
- display: flex
+ display: flex;
}
.img {
@@ -385,7 +412,6 @@
.image {
width: 60px;
height: 60px;
-
}
.txt {
@@ -401,7 +427,7 @@
.data-view {
margin: 0 15px;
- height: 323px !important
+ height: 323px !important;
}
#main {
@@ -409,19 +435,13 @@
}
.view {
- margin: 0px 15px;
+ margin: 0 15px;
padding-top: 15px;
min-height: 350px;
display: flex;
}
-#main2 {
- width: 820px;
- height: 350px;
- background-color: #fff;
- margin-right: 20px;
-}
-
+#main2,
#main3 {
width: 820px;
height: 350px;
--
Gitblit v1.8.0