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 | 450 ++++++++++++++++++++++++++-----------------------------
1 files changed, 215 insertions(+), 235 deletions(-)
diff --git a/src/views/index.vue b/src/views/index.vue
index 8ccd4ef..268ec38 100644
--- a/src/views/index.vue
+++ b/src/views/index.vue
@@ -1,6 +1,7 @@
<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="top">
@@ -37,11 +38,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 +55,14 @@
<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');
require('echarts/lib/component/legend');
require('echarts/lib/chart/pie');
+require('echarts/lib/chart/line');
export default {
data() {
@@ -73,305 +79,263 @@
teamYYNum: [],
PieChart: [],
PieChart2: [],
- }
+ loading: false
+ };
},
created() {
this.getList();
-
+ this.initWebSocket();
},
+
watch: {
- $route(to, from) {
- window.location.reload(); //鐩戞祴鍒拌矾鐢卞彂鐢熻烦杞椂鍒锋柊涓�娆￠〉闈�
- // this.$router.go(0);
- },
- },
-
+ $route(to, from) {
+ window.location.reload();
+ }
+ },
methods: {
-
+ goToNotice(noticeId) {
+ this.$router.push({
+ path: '/notice',
+ 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;
- // 鏌ヨ浠婃棩鐧昏
- getCustomer().then((response) => {
- this.Customer = response
+
+ // 鏌ヨ鎵�鏈夊叕鍛婏紙浠呯敤浜庡垵濮嬪寲鏁版嵁锛屽彲鏍规嵁闇�瑕佷繚鐣欐垨绉婚櫎锛�
+ noticeToday().then(response => {
+ console.log('Notice API response:', response);
+ this.loading = false;
+ }).catch(error => {
+ console.error('Notice API error:', error);
+ this.$notify.error({
+ title: '閿欒',
+ message: `鑾峰彇閫氱煡澶辫触锛�${error.message}`,
+ duration: 5000,
+ position: 'top-right'
+ });
this.loading = false;
});
- // 鏌ヨ浠婃棩宸叉
- getOrder().then((response) => {
- this.Order = response
+
+ getCustomer().then(response => {
+ this.Customer = response.data || response;
this.loading = false;
});
- // 鏌ヨ浠婃棩鎶ュ憡
- getReportToday().then((response) => {
- this.ReportToday = response
+
+ getOrder().then(response => {
+ this.Order = response.data || response;
this.loading = false;
});
- // 鏌ヨ浠婃棩寰呮
- getTobeToday().then((response) => {
- this.TobeToday = response
+
+ getReportToday().then(response => {
+ this.ReportToday = response.data || response;
this.loading = false;
});
- // 鎶樼嚎鍥�
- getChart().then((response) => {
+
+ getTobeToday().then(response => {
+ this.TobeToday = response.data || response;
+ this.loading = false;
+ });
+
+ 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: 100,
- interval: 5
- },
+ 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;
});
+ },
+ 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;
}
.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 +349,6 @@
.image {
width: 60px;
height: 60px;
-
}
.txt {
@@ -401,7 +364,7 @@
.data-view {
margin: 0 15px;
- height: 323px !important
+ height: 323px !important;
}
#main {
@@ -409,23 +372,40 @@
}
.view {
- margin: 0px 15px;
+ margin: 0 15px;
padding-top: 15px;
min-height: 350px;
display: flex;
}
-#main2 {
+#main2,
+#main3 {
width: 820px;
height: 350px;
background-color: #fff;
margin-right: 20px;
}
-#main3 {
- width: 820px;
- 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