From af5847927931d3f491d7be5e0178cff3c37ac6f9 Mon Sep 17 00:00:00 2001
From: huangxiaoqiang <huangxiaoqiang@hnkhzn.com>
Date: 星期四, 06 十一月 2025 17:20:44 +0800
Subject: [PATCH] 1
---
项目代码/WMS/WIDESEA_WMSClient/src/views/Home.vue | 319 ++++++++++++++++++----------------------------------
1 files changed, 113 insertions(+), 206 deletions(-)
diff --git "a/\351\241\271\347\233\256\344\273\243\347\240\201/WMS/WIDESEA_WMSClient/src/views/Home.vue" "b/\351\241\271\347\233\256\344\273\243\347\240\201/WMS/WIDESEA_WMSClient/src/views/Home.vue"
index 89f5a59..17c134c 100644
--- "a/\351\241\271\347\233\256\344\273\243\347\240\201/WMS/WIDESEA_WMSClient/src/views/Home.vue"
+++ "b/\351\241\271\347\233\256\344\273\243\347\240\201/WMS/WIDESEA_WMSClient/src/views/Home.vue"
@@ -1,219 +1,126 @@
<template>
- <div class="home-contianer">
-
+ <div class="chart_left" style="margin-left: 20px;">
+ <div class="titles">
+ <el-icon class="icons" :size="24" color="#409EFF">
+ <Checked />
+ </el-icon>
+ 浠诲姟杩涜涓�
+ </div>
+ <div style="margin-top: 20px;"></div>
+ <div class="item_center">
+ <Task-List :data="chartData" :options="chartOptions" />
+ </div>
+ </div>
+ <div class="chart_left" style="margin-left: 20px;">
+ <div class="titles">
+ <el-icon class="icons" :size="24" color="#409EFF">
+ <Checked />
+ </el-icon>
+ 浠诲姟杩涜涓�
+ </div>
+ <div style="margin-top: 20px;"></div>
+ <div class="item_center">
+ <Task-List :data="chartData" :options="chartOptions" />
+ </div>
</div>
</template>
-<script>
-import { ref, onMounted, onUnmounted } from 'vue';
-export default {
- components: {},
- data() {
- return {
-
- n: 90,
- value1: '1',
- };
- },
- setup() {
- let open = (item) => {
- window.open(item.url, '_blank');
- };
- let interval;
- onMounted(() => {
+<script setup>
+import TaskList from '../components/index/TaskList.vue';
+import http from '../api/http.js';
+import { ref, onMounted, onUnmounted, watch } from 'vue';
+const taskListRef = ref(null);
+// 绀轰緥鏁版嵁
+const chartData = ref([
+ // { value: 103, name: '宸插彇娑�', itemStyle: { color: '#FF6B6B' } },
+ // { value: 735, name: '宸插畬鎴�', itemStyle: { color: '#4ECDC4' } },
+]);
- // interval = setInterval(() => {
- // chart2.xAxis[0].data.splice(0, 1);
- // let lastYear =
- // chart2.xAxis[0].data[chart2.xAxis[0].data.length - 1] * 1 + 1;
- // chart2.xAxis[0].data.push(lastYear);
+const fetchData = async () => {
+ try {
+ const response = await http.post("api/Task/GetTaskData", {});
+ chartData.value = response.data;
- // chart2.series[0].data.splice(0, 1);
- // chart2.series[0].data.push(~~(Math.random() * 1000));
-
- // chart2.series[1].data.splice(0, 1);
- // chart2.series[1].data.push(~~(Math.random() * 1000));
- // $chart2.setOption(chart2);
- // }, 2000);
- });
- onUnmounted(() => {
-
- });
- return { open };
- },
- destroyed() {
+ if (taskListRef.value) taskListRef.value.initChart();
+ } catch (error) {
+ console.error('API璇锋眰澶辫触:', error);
}
};
-// window.addEventListener("resize", function () {
-// $chart2.setOption(chart2);
-// });
+const intervalId = ref(null)
+const startPolling = () => {
+ fetchData(); // 鍒濆鍔犺浇
+ intervalId.value = setInterval(fetchData, 5 * 60 * 1000); // 5鍒嗛挓
+};
+
+// 娓呯悊瀹氭椂鍣�
+const stopPolling = () => {
+ if (intervalId.value) {
+ clearInterval(intervalId.value);
+ console.log('宸插仠姝㈡暟鎹疆璇�');
+ }
+};
+onMounted(() => {
+ startPolling();
+});
+onUnmounted(() => {
+ stopPolling();
+});
+const chartOptions = ref({
+ tooltip: {
+ formatter: '{b}: {c} ({d}%)'
+ },
+ legend: {
+ itemWidth: 14,
+ itemHeight: 14,
+ textStyle: { fontSize: 12 }
+ }
+});
</script>
-<style lang="less" scoped>
-.home-contianer {
- padding: 6px;
- background: #eee;
+<style scoped>
+.dashboard {
width: 100%;
+ height: 100vh;
+ padding: 20px;
+ box-sizing: border-box;
+}
+
+.m-charts {
+ display: grid;
+ margin: 10px;
+ grid-template-columns: 33% 33% 95%;
+ justify-content: space-between;
+}
+
+.labelContent {
+ padding-top: 3vh;
+}
+
+.chart_left {
+ position: relative;
+ border-radius: 10px;
+ background-color: white;
+ box-shadow: 0px 0px 10px 0px #ccc;
height: 100%;
- // max-width: 800px;
- // position: absolute;
- top: 0;
- right: 0;
- left: 0;
- margin: 0 auto;
-
- .h-top {
- display: flex;
- .h-top-left {
- height: 100%;
- width: 300px;
- background: white;
- }
- height: 300px;
- }
- .h-top > div {
- border: 1px solid #e8e7e7;
- border-radius: 5px;
- // margin: 6px;
- }
- .h-top-center {
- height: 100%;
- background: white;
- margin: 0 6px;
- display: flex;
- flex-direction: column;
- flex: 1;
- .item1 .num {
- padding-top: 28px;
- }
- .item2 .num {
- padding-bottom: 20px;
- }
-
- .n-item {
- width: 100%;
- height: 100%;
- text-align: center;
- cursor: pointer;
- // display: flex;
- .item {
- border-right: 1px solid #e5e5e5;
- width: 33.3333333%;
- float: left;
- height: 50%;
- border-bottom: 1px solid #e5e5e5;
- padding: 47px 0;
- font-size: 13px;
- }
- .item:hover {
- background: #f9f9f9;
- cursor: pointer;
- }
- .item:last-child {
- border-right: 0;
- }
- .item3,
- .item6 {
- border-right: 0;
- }
- .num {
- word-break: break-all;
- color: #282727;
- font-size: 30px;
- transition: transform 0.8s;
- }
- .num:hover {
- color: #55ce80;
- transform: scale(1.2);
- }
- .text {
- font-size: 13px;
- color: #777;
- }
- }
- }
- .h-top-right {
- // flex: 1;
-
- width: 400px;
- height: 100%;
- background: white;
- }
- .h3 {
- padding: 7px 15px;
- font-weight: 500;
- background: #fff;
- border-bottom: 1px dotted #d4d4d4;
- }
+ width: 550px;
}
-.task-table {
- table {
- width: 100%;
- .thead {
- font-weight: bold;
- }
- tr {
- cursor: pointer;
- td {
- border-bottom: 1px solid #f3f3f3;
- padding: 9px 8px;
- font-size: 12px;
- }
- }
- tr:hover {
- background: #eee;
- }
- }
+
+.icons {
+ margin-right: 5px;
}
-.h-chart {
- height: 340px;
- margin: 6px 0px;
+
+.indexModel .item_center {
+ height: 90vh;
+ width: 98%;
+ margin: 0vh 20%;
+}
+
+.titles {
+ width: 200px;
+ height: 5vh;
display: flex;
- .h-left-grid {
- width: 300px;
- height: 100%;
- background: white;
- display: inline-block;
- .name {
- margin-left: 7px;
- }
- .item:hover {
- background: #f9f9f9;
- cursor: pointer;
- }
- .item {
- padding: 22px 14px;
- float: left;
- width: 50%;
- height: 33.33333%;
- border-bottom: 1px solid #eee;
- border-right: 1px solid #eee;
- i {
- font-size: 30px;
- }
- .desc {
- font-size: 12px;
- color: #c3c3c3;
- padding: 5px 0 0 4px;
- line-height: 1.5;
- }
- }
- }
-}
-#h-chart2 {
- border-radius: 3px;
- background: white;
- padding-top: 10px;
- height: 100%;
- width: 0;
- flex: 1;
- margin: 0 7px;
-}
-#h-chart3 {
- border-radius: 3px;
- padding: 10px 10px 0 10px;
- background: white;
- // padding-top: 10px;
- height: 100%;
-
- width: 400px;
-}
-</style>
+ align-items: center;
+ font-size: 1.5rem;
+ font-weight: 600;
+ position: absolute;
+ top: 0px;
+ left: 15px;
+}</style>
\ No newline at end of file
--
Gitblit v1.9.3