From 0000e935d6c7f74cb6682aea1bbf24d8deade390 Mon Sep 17 00:00:00 2001
From: wwl <xchao828@163.com>
Date: 星期四, 03 七月 2025 17:49:18 +0800
Subject: [PATCH] 1
---
src/views/index.vue | 198 +++++++++++++++++++++++++++++-------------------
1 files changed, 119 insertions(+), 79 deletions(-)
diff --git a/src/views/index.vue b/src/views/index.vue
index 268ec38..1ea2590 100644
--- a/src/views/index.vue
+++ b/src/views/index.vue
@@ -1,5 +1,28 @@
<template>
<div class="centre">
+ <!-- 浠婃棩閫氱煡 -->
+ <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>
@@ -56,7 +79,6 @@
<script>
import { getCustomer, getOrder, getReportToday, getTobeToday, getPieChart, getChart } from "@/api/home";
import { noticeToday } from "@/api/system/notice";
-import { initWebSocket } from "@/utils/websocket";
const echarts = require('echarts/lib/echarts');
require('echarts/lib/component/title');
require('echarts/lib/component/tooltip');
@@ -79,18 +101,27 @@
teamYYNum: [],
PieChart: [],
PieChart2: [],
+ noticeList: [],
+ groupedNoticeList: [], // 鍒嗙粍鍚庣殑閫氱煡鍒楄〃
loading: false
};
},
created() {
this.getList();
- this.initWebSocket();
},
watch: {
$route(to, from) {
window.location.reload();
+ },
+ noticeList: {
+ handler(newList) {
+ // 灏嗛�氱煡鎸夋瘡缁勪笁鏉″垎缁�
+ this.groupedNoticeList = this.chunkArray(newList, 3);
+ console.log('groupedNoticeList:', this.groupedNoticeList); // 璋冭瘯
+ },
+ deep: true
}
},
@@ -101,91 +132,49 @@
query: { noticeId }
});
},
-
- // 鍒濆鍖� WebSocket 杩炴帴
- initWebSocket() {
- const token = this.$store.state.user.token || '';
- initWebSocket(token, (type, data) => {
- if (type === 'error') {
- this.$notify.error({
- title: '閿欒',
- message: data,
- duration: 5000,
- position: 'top-right'
- });
- return;
- }
-
- try {
- const message = JSON.parse(data);
- console.log('WebSocket 瑙ｆ瀽鍚庢秷鎭�:', message);
- if (message.noticeId && message.noticeTitle) {
- const noticeTypeLabel = message.noticeType === '1' ? '閫氱煡' : '鍏憡';
- this.$notify({
- title: `鏂�${noticeTypeLabel}`,
- message: message.noticeTitle || '鏃犳爣棰�',
- type: 'success',
- duration: 5000, // 鎮仠 5 绉�
- position: 'top-right',
- offset: 50,
- onClick: () => {
- this.goToNotice(message.noticeId);
- }
- });
- } else {
- console.log('鏈煡娑堟伅绫诲瀷:', message);
- }
- } catch (error) {
- console.error('娑堟伅瑙ｆ瀽澶辫触:', error, '鍘熷鏁版嵁:', data);
- this.$notify.info({
- title: '娑堟伅',
- message: `鏈嶅姟鍣ㄥ洖搴斿瓧绗︿覆: ${data}`,
- duration: 5000,
- position: 'top-right',
- offset: 50
- });
- }
- });
- },
-
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.$notify.error({
- title: '閿欒',
- message: `鑾峰彇閫氱煡澶辫触锛�${error.message}`,
- duration: 5000,
- position: 'top-right'
- });
+ this.$message.error("鑾峰彇閫氱煡澶辫触锛�" + error.message);
this.loading = false;
});
+ // 鏌ヨ浠婃棩鐧昏
getCustomer().then(response => {
this.Customer = response.data || response;
this.loading = false;
});
+ // 鏌ヨ浠婃棩宸叉
getOrder().then(response => {
this.Order = response.data || response;
this.loading = false;
});
+ // 鏌ヨ浠婃棩鎶ュ憡
getReportToday().then(response => {
this.ReportToday = response.data || response;
this.loading = false;
});
+ // 鏌ヨ浠婃棩寰呮
getTobeToday().then(response => {
this.TobeToday = response.data || response;
this.loading = false;
});
+ // 鎶樼嚎鍥�
getChart().then(response => {
response.data.forEach(item => {
this.LineChart.push(item.date);
@@ -222,6 +211,7 @@
this.loading = false;
});
+ // 楗肩姸鍥�
getPieChart().then(response => {
if (response.data) {
if (response.data.tjdj == 0 || !response.data.tjdj?.length) {
@@ -291,6 +281,23 @@
});
},
+ // 鏁扮粍鍒嗙粍鏂规硶
+ 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 {
@@ -320,6 +327,62 @@
margin: 15px;
background-color: #f3f3f3;
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 {
@@ -384,28 +447,5 @@
height: 350px;
background-color: #fff;
margin-right: 20px;
-}
-
-/* 鑷畾涔� Element UI 閫氱煡鏍峰紡 */
-.el-notification {
- min-width: 300px;
- background-color: #f0f9eb;
- border-color: #e1f3d8;
- color: #67c23a;
- font-size: 16px;
- padding: 15px 20px;
-}
-
-.el-notification__title {
- font-weight: bold;
-}
-
-.el-notification__content {
- font-size: 14px;
- color: #333;
-}
-
-.el-notification__closeBtn {
- color: #999;
}
</style>
\ No newline at end of file
--
Gitblit v1.8.0