From 6d4e9ccb34e0292bfadba7bfd678231cb37ae8c0 Mon Sep 17 00:00:00 2001
From: qx <1084500556@qq.com>
Date: 星期三, 02 七月 2025 15:45:16 +0800
Subject: [PATCH] :qx
---
src/views/index.vue | 198 +++++++++++++++++++-----------------------------
1 files changed, 79 insertions(+), 119 deletions(-)
diff --git a/src/views/index.vue b/src/views/index.vue
index 1ea2590..268ec38 100644
--- a/src/views/index.vue
+++ b/src/views/index.vue
@@ -1,28 +1,5 @@
<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>
@@ -79,6 +56,7 @@
<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');
@@ -101,27 +79,18 @@
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
}
},
@@ -132,49 +101,91 @@
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.$message.error("鑾峰彇閫氱煡澶辫触锛�" + error.message);
+ this.$notify.error({
+ title: '閿欒',
+ message: `鑾峰彇閫氱煡澶辫触锛�${error.message}`,
+ duration: 5000,
+ position: 'top-right'
+ });
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);
@@ -211,7 +222,6 @@
this.loading = false;
});
- // 楗肩姸鍥�
getPieChart().then(response => {
if (response.data) {
if (response.data.tjdj == 0 || !response.data.tjdj?.length) {
@@ -281,23 +291,6 @@
});
},
- // 鏁扮粍鍒嗙粍鏂规硶
- 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 {
@@ -327,62 +320,6 @@
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 {
@@ -448,4 +385,27 @@
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