From 1460aa1d5f2b5722d43ed31724594c006213bea7 Mon Sep 17 00:00:00 2001
From: huang <1532065656@qq.com>
Date: 星期五, 18 四月 2025 16:40:43 +0800
Subject: [PATCH] 看板2更新
---
UI-Project/src/views/KanbanDisplay/kanbanDisplay.vue | 963 ++++++++++++++++++++++++++++++++++++++++++++++---------
1 files changed, 795 insertions(+), 168 deletions(-)
diff --git a/UI-Project/src/views/KanbanDisplay/kanbanDisplay.vue b/UI-Project/src/views/KanbanDisplay/kanbanDisplay.vue
index e5fd828..4ccbdc2 100644
--- a/UI-Project/src/views/KanbanDisplay/kanbanDisplay.vue
+++ b/UI-Project/src/views/KanbanDisplay/kanbanDisplay.vue
@@ -1,193 +1,820 @@
-<!-- 绌虹櫧椤� -->
-
-
<script setup>
-import { ref, computed } from 'vue'
-import * as echarts from 'echarts';
+import { ref, onMounted, onUnmounted, nextTick } from 'vue'
+import * as echarts from 'echarts'
+import request from '@/utils/request'
+
+const dashboardRef = ref(null)
+const standardWidth = 1920 // 璁捐绋挎爣鍑嗗搴�
+const standardHeight = 1080 // 璁捐绋挎爣鍑嗛珮搴�
+
+// 璁＄畻缂╂斁姣斾緥骞跺簲鐢�
+const setScale = () => {
+ if (!dashboardRef.value) return
+
+ const w = window.innerWidth
+ const h = window.innerHeight
+
+ // 璁＄畻瀹介珮姣斾緥
+ const wScale = w / standardWidth
+ const hScale = h / standardHeight
+
+ // 浣跨敤杈冨皬鐨勭缉鏀炬瘮渚嬶紝纭繚鍐呭瀹屽叏鏄剧ず
+ const scale = Math.min(wScale, hScale)
+
+ // 璁＄畻灞呬腑鍋忕Щ
+ const offsetX = (w - standardWidth * scale) / 2
+ const offsetY = (h - standardHeight * scale) / 2
+
+ // 搴旂敤鍙樻崲
+ dashboardRef.value.style.transform = `scale(${scale})`
+ dashboardRef.value.style.transformOrigin = '0 0'
+ dashboardRef.value.style.marginLeft = `${offsetX}px`
+ dashboardRef.value.style.marginTop = `${offsetY}px`
+}
+
+// 鐩戝惉绐楀彛澶у皬鍙樺寲
+const handleResize = () => {
+ setScale()
+ // 閲嶆柊娓叉煋鎵�鏈夊浘琛�
+ charts.forEach(chart => {
+ chart.resize()
+ })
+}
+
+// 瀛樺偍鎵�鏈夊浘琛ㄥ疄渚�
+const charts = []
+
+// 鑾峰彇鑳借�楁暟鎹�
+const loadEnergyData = async () => {
+ try {
+ const res = await request({
+ url: '/deviceInteraction/energy/consumption/chartEnergy',
+ method: 'post'
+ })
+ if (res.code === 200) {
+ energyData.value = res.data.actual || [];
+ updateEnergyChart()
+ }
+ } catch (error) {
+ console.error('鑾峰彇鑳借�楁暟鎹け璐�:', error)
+ }
+}
+
+
+const energyData = ref([])
+const notCompleteData = ref([]) // 瀹屾暣鏁版嵁闆�
+const displayedData = ref([]) // 褰撳墠鏄剧ず鐨勬暟鎹泦
+const pageSize = 20 // 姣忔壒鏄剧ず鐨勬暟鎹噺
+let currentPage = 0 // 褰撳墠鏄剧ず鐨勬壒娆�
+let scrollTimer = null // 婊氬姩璁℃椂鍣�
+
+// 鑾峰彇鏈畬鎴愭暟鎹�
+const loadNotCompleteData = async () => {
+ try {
+ const res = await request.post('/deviceInteraction/primitiveTask/findDayNotCompleteOutput', {
+ "dayCount": 2
+ })
+
+ if (res.code === 200) {
+ notCompleteData.value = res.data;
+ console.log("鍔犺浇鏁版嵁瀹屾垚锛屽叡" + res.data.length + "鏉�");
+
+ // 鍔犺浇绗竴鎵规暟鎹�
+ loadNextBatch();
+
+ // 寮�濮嬫粴鍔ㄦ樉绀�
+ nextTick(() => {
+ startScrollingWithBatches();
+ });
+ } else {
+ console.error('璇锋眰褰撴棩浜ч噺鏁版嵁澶辫触:', res.message);
+ }
+ } catch (error) {
+ console.error('璇锋眰褰撴棩浜ч噺鏁版嵁澶辫触:', error);
+ }
+}
+
+// 鍔犺浇涓嬩竴鎵规暟鎹�
+const loadNextBatch = () => {
+ const startIndex = currentPage * pageSize;
+ let endIndex = startIndex + pageSize;
+
+ // 濡傛灉鍒拌揪鏁版嵁鏈熬锛屽垯閲嶆柊浠庡ご寮�濮�
+ if (startIndex >= notCompleteData.value.length) {
+ currentPage = 0;
+ loadNextBatch();
+ return;
+ }
+
+ // 鏇存柊褰撳墠鏄剧ず鐨勬暟鎹�
+ displayedData.value = notCompleteData.value.slice(
+ startIndex,
+ Math.min(endIndex, notCompleteData.value.length)
+ );
+ currentPage++;
+}
+
+// 浣跨敤鍒嗘壒鏂瑰紡瀹炵幇婊氬姩
+const startScrollingWithBatches = () => {
+ const tableBody = document.querySelector('.el-table__body');
+ const tableWrapper = document.querySelector('.el-table__body-wrapper');
+
+ if (!tableBody || !tableWrapper) return;
+
+ // 鏁版嵁閲忚緝灏戞椂涓嶆粴鍔�
+ if (notCompleteData.value.length <= 5) {
+ tableBody.style.animation = 'none';
+ return;
+ }
+
+ // 娓呴櫎涔嬪墠鐨勫畾鏃跺櫒
+ if (scrollTimer) clearTimeout(scrollTimer);
+
+ // 璁＄畻褰撳墠鎵规鐨勬�绘粴鍔ㄦ椂闂�
+ const currentBatchRows = displayedData.value.length;
+ if (currentBatchRows === 0) {
+ loadNextBatch();
+ scrollTimer = setTimeout(startScrollingWithBatches, 500);
+ return;
+ }
+
+
+ // 姣忔潯鏁版嵁鐨勬樉绀烘椂闂村拰鎬绘粴鍔ㄦ椂闂�
+ const timePerRow = 0.8;
+ const scrollTime = Math.max(currentBatchRows * timePerRow, 5);
+
+ console.log('鏄剧ず绗�' + currentPage + '鎵规暟鎹�')
+
+ // 鍒犻櫎鏃ф牱寮忓苟閲嶇疆鍔ㄧ敾
+ const oldStyle = document.getElementById('scroll-animation-style');
+ if (oldStyle) document.head.removeChild(oldStyle);
+ tableBody.style.animation = 'none';
+ tableBody.offsetHeight; // 寮哄埗閲嶆帓
+
+ // 璁＄畻婊氬姩璺濈
+ const tableHeight = tableBody.offsetHeight;
+ const wrapperHeight = tableWrapper.offsetHeight;
+ const scrollDistance = tableHeight - wrapperHeight;
+
+ if (scrollDistance > 0) {
+ // 鍒涘缓婊氬姩鍔ㄧ敾鏍峰紡
+ const style = document.createElement('style');
+ style.id = 'scroll-animation-style';
+ style.innerHTML = `
+ @keyframes scroll-animation {
+ 0% { transform: translateY(0); }
+ 5% { transform: translateY(0); }
+ 90% { transform: translateY(-${scrollDistance}px); }
+ 100% { transform: translateY(-${scrollDistance}px); }
+ }
+ `;
+ document.head.appendChild(style);
+
+ // 搴旂敤婊氬姩鍔ㄧ敾
+ tableBody.style.animation = `scroll-animation ${scrollTime}s linear`;
+
+ // 婊氬姩缁撴潫鍚庡姞杞戒笅涓�鎵规暟鎹�
+ scrollTimer = setTimeout(() => {
+ loadNextBatch();
+ startScrollingWithBatches();
+ }, scrollTime * 1000);
+ } else {
+ // 鍐呭涓嶈冻浠ユ粴鍔ㄦ椂锛岀洿鎺ユ樉绀�3绉掑悗鍒囨崲
+ scrollTimer = setTimeout(() => {
+ loadNextBatch();
+ startScrollingWithBatches();
+ }, 3000);
+ }
+}
+
+// 淇敼鍥捐〃鍒濆鍖栨柟娉�
+const draw = (name, Option) => {
+ const chart = echarts.init(document.getElementById(name))
+ chart.setOption(Option)
+ charts.push(chart)
+}
+
+// 鏇存柊鑳借�楀浘琛�
+const updateEnergyChart = () => {
+ // 鎸夋棩鏈熸帓搴忓苟鏍煎紡鍖栨棩鏈�
+ const sortedData = [...energyData.value].sort((a, b) =>
+ new Date(a.recordDate) - new Date(b.recordDate)
+ ).map(item => {
+ const date = new Date(item.recordDate);
+ return {
+ ...item,
+ recordDate: `${date.getMonth() + 1}-${date.getDate().toString().padStart(2, '0')}`
+ };
+ });
+
+ const energyoption = {
+ title: {
+ text: '鑳借�楃鐞�',
+ textStyle: {
+ fontSize: 25,
+ fontWeight: 'bold',
+ color: 'white' // 璁剧疆鏍囬棰滆壊涓虹櫧鑹�
+ },
+ },
+ tooltip: {
+ trigger: 'axis',
+ axisPointer: {
+ type: 'cross',
+ label: {
+ backgroundColor: '#6a7985',
+ fontSize: 16, // 鎻愮ず妗嗘枃瀛楀ぇ灏�
+ color: 'white' // 璁剧疆鎻愮ず妗嗘枃瀛楅鑹蹭负鐧借壊
+ }
+ }
+ },
+ legend: {
+ data: ['鑳借�楀��'],
+ textStyle: {
+ fontSize: 25,
+ fontWeight: 'bold',
+ color: 'white' // 璁剧疆鍥句緥鏂囧瓧棰滆壊涓虹櫧鑹�
+ }
+ },
+ toolbox: {
+ show: true,
+ feature: {
+ dataZoom: {
+ yAxisIndex: 'none'
+ },
+ dataView: { readOnly: false },
+ magicType: { type: ['line', 'bar'] },
+ restore: {},
+ saveAsImage: {}
+ },
+ iconStyle: {
+ color: 'white' // 璁剧疆宸ュ叿妗嗗浘鏍囬鑹蹭负鐧借壊
+ }
+ },
+ grid: {
+ left: '3%',
+ right: '4%',
+ bottom: '10%',
+ containLabel: true
+ },
+ xAxis: [
+ {
+ type: 'category',
+ boundaryGap: false,
+ data: sortedData.map(item => item.recordDate),
+ axisLabel: {
+ fontSize: 20,
+ interval: 'auto', // 鑷姩璁＄畻闂撮殧
+ margin: 15, // 涓庤酱绾跨殑璺濈
+ formatter: (value) => {
+ // 鍙樉绀烘湀-鏃�
+ const date = new Date(value);
+ return `${date.getMonth() + 1}-${date.getDate()}`;
+ },
+ color: 'white' // 璁剧疆 x 杞存爣绛鹃鑹蹭负鐧借壊
+ },
+ nameTextStyle: {
+ fontSize: 20,
+ color: 'white' // 璁剧疆 x 杞村悕绉伴鑹蹭负鐧借壊
+ }
+ }
+ ],
+ yAxis: [
+ {
+ type: 'value',
+ axisLabel: {
+ fontSize: 20, // y 杞存爣绛炬枃瀛楀ぇ灏�
+ color: 'white' // 璁剧疆 y 杞存爣绛鹃鑹蹭负鐧借壊
+ },
+ nameTextStyle: {
+ fontSize: 20, // 鍧愭爣杞村悕绉版枃瀛楀ぇ灏�
+ color: 'white' // 璁剧疆 y 杞村悕绉伴鑹蹭负鐧借壊
+ }
+ }
+ ],
+ series: [
+ {
+ name: '鑳借�楀��',
+ type: 'line',
+ areaStyle: {},
+ label: {
+ show: true,
+ position: 'top',
+ fontSize: 16, // 鏁版嵁鏍囩鏂囧瓧澶у皬
+ formatter: '{c}',
+ color: 'white' // 璁剧疆鏁版嵁鏍囩棰滆壊涓虹櫧鑹�
+ },
+ data: sortedData.map(item => item.energyValue)
+ }
+ ]
+ }
+
+ draw('drawLineChart_day71', energyoption);
+}
+
+onMounted(() => {
+ setScale()
+ window.addEventListener('resize', handleResize)
+ loadEnergyData();
+ loadNotCompleteData();
+})
+
+onUnmounted(() => {
+ window.removeEventListener('resize', handleResize)
+ charts.forEach(chart => {
+ chart.dispose()
+ })
+})
+
</script>
+
+<template>
+ <div class="dashboard-container" ref="dashboardRef">
+ <div class="dashboard-content">
+ <div style="font-weight: 800;font-size: 30px;height: 70px;line-height: 70px;border: 1px solid #ccc;text-align: center;">
+ JOMOO閰嶅宸ュ巶闀滅墖杞﹂棿鐢熶骇鐪嬫澘
+ </div>
+
+ <div style="width:100% ;height: 880px;">
+ <div style="width:100% ;height: 33.3%;border: 1px solid #ccc;">
+ <div id="drawLineChart_day11" style="height: 100%;width: 30%;border: 1px solid #ccc;float: left;">鏃ュ崟杈炬垚鐜�-鐗囨暟</div>
+ <div id="drawLineChart_day12" class="table-container">
+ <div class="table-title">褰撴棩鏈畬鎴愰噺</div>
+ <div class="table-scroll-wrapper">
+ <el-table
+ height="100%"
+ :data="displayedData"
+ :header-cell-style="{ background: '#052c52', color: 'white', textAlign: 'center' }"
+ :cell-style="{ textAlign: 'center' }">
+ <el-table-column prop="OrderNo" :label="$t('glassInfo.OrderNo')" />
+ <el-table-column prop="notComplete" :label="$t('glassInfo.notCompleteCount')" />
+ <el-table-column
+ prop="area_sum"
+ :label="$t('glassInfo.notCompleteArea')"
+ :formatter="row => row.area_sum ? Number(row.area_sum).toFixed(2) : '0.00'" />
+ </el-table>
+ </div>
+ </div>
+ <div id="drawLineChart_day71" style="height: 100%;width: 40%;border: 1px solid #ccc;float: left;">鑳借�楃鐞�-鎸夊ぉ鏄剧ず锛堟墜杈擄級
+ </div>
+ </div>
+ <div style="width:100% ;height: 37.5%;border: 1px solid #ccc;">
+ <div id="drawLineChart_day31" style="height: 100%;width: 100%;border: 1px solid #ccc;">涓ょ嚎鐢熶骇瀵规瘮-鐗囨暟</div>
+ </div>
+ <div style="width:100% ;height: 37.5%;border: 1px solid #ccc;">
+ <div id="drawLineChart_day51" style="height: 100%;width: 80%;border: 1px solid #ccc;float: left;">璁″垝閲�-鐗囨暟銆佸钩鏂�</div>
+ <div id="drawLineChart_day91" style="height: 100%;width: 20%;float: left;">
+ <div style="font-weight: 700;font-size: 20px;height: 30px;line-height: 30px;text-align: center;border: 1px solid #ccc;">鎬昏鍒掗噺-鐗囨暟銆佸钩鏂�</div>
+ <div id="textDay" style="font-size: 20px;height: 30px;margin-left: 20px;margin-top: 20px;">鏃ユ湡锛�2023-03-01 - 2023-03-01</div>
+ <div id="textprice" style="font-size: 20px;height: 30px;margin-left: 20px;margin-top: 20px;">鐗囨暟锛�25</div>
+ <div id="textarea" style="font-size: 20px;height: 30px;margin-left: 20px;margin-top: 20px;">骞虫柟鏁帮細2999</div>
+ </div>
+ </div>
+ </div>
+
+ <!-- <div style="width:33% ;height: 880px;border: 1px solid #ccc;">
+ <div id="drawLineChart_day1" style="height: 300px;width: 25%;border: 1px solid #ccc;float: left;"></div>
+ <div id="drawLineChart_day2" style="height: 300px;width: 25%;border: 1px solid #ccc;float: left;"></div>
+ </div> -->
+ </div>
+ </div>
+</template>
+
+
<script>
export default {
mounted() {
- this.drawLineChart('drawLineChart_day1', 1);
- this.drawLineChart('drawLineChart_day2', 1);
- this.drawLineChart('drawLineChart_day3', 1);
- this.drawLineChart('drawLineChart_day4', 1);
- this.drawLineChart('drawLineChart_day5', 1);
- //this.drawLineChart('drawLineChart_week', 1);
- this.drawBarchart('drawBarchart', 1);
+ const OptionDayMode = {
+ title: {
+ text: '璁″垝閲忕湅鏉�',
+ textStyle: {
+ fontSize: 25,
+ fontWeight: 'bold',
+ color: 'white' // 璁剧疆鏍囬棰滆壊涓虹櫧鑹�
+ }
+ },
+ tooltip: {
+ trigger: 'axis',
+ axisPointer: {
+ label: {
+ fontSize: 16,
+ color: 'white' // 璁剧疆鎻愮ず妗嗘枃瀛楅鑹蹭负鐧借壊
+ }
+ }
+ },
+ legend: {
+ textStyle: {
+ fontSize: 20,
+ fontWeight: 'bold',
+ color: 'white' // 璁剧疆鍥句緥鏂囧瓧棰滆壊涓虹櫧鑹�
+ }
+ },
+ toolbox: {
+ show: true,
+ feature: {
+ dataZoom: {
+ yAxisIndex: 'none'
+ },
+ dataView: { readOnly: false },
+ magicType: { type: ['line', 'bar'] },
+ restore: {},
+ saveAsImage: {}
+ },
+ iconStyle: {
+ color: 'white' // 璁剧疆宸ュ叿妗嗗浘鏍囬鑹蹭负鐧借壊
+ }
+ },
+ grid: {
+ left: '3%',
+ right: '4%',
+ bottom: '10%',
+ containLabel: true
+ },
+ xAxis: {
+ type: 'category',
+ boundaryGap: false,
+ axisTick: { alignWithLabel: true },
+ axisLabel: {
+ fontSize: 20,
+ interval: 'auto',
+ margin: 15,
+ formatter: (value, index) => {
+ // 濡傛灉鏄棩鏈熸牸寮�
+ if (value.includes('-')) {
+ // 瀵圭涓�涓棩鏈熸樉绀哄畬鏁村勾鏈堟棩
+ if (index === 0) {
+ return value; // 杩斿洖瀹屾暣鏃ユ湡 (渚嬪: 2024-03-21)
+ }
+ // 鍏朵粬鏃ユ湡鍙樉绀烘湀-鏃�
+ return value.split('-').slice(1).join('-'); // (渚嬪: 03-21)
+ }
+ return value;
+ },
+ color: 'white' // 璁剧疆 x 杞存爣绛鹃鑹蹭负鐧借壊
+ },
+ nameTextStyle: {
+ fontSize: 20,
+ color: 'white' // 璁剧疆 x 杞村悕绉伴鑹蹭负鐧借壊
+ }
+ },
+ yAxis: {
+ type: 'value',
+ axisLabel: {
+ fontSize: 20,
+ formatter: '{value} ',
+ color: 'white' // 璁剧疆 y 杞存爣绛鹃鑹蹭负鐧借壊
+ },
+ nameTextStyle: {
+ fontSize: 20,
+ color: 'white' // 璁剧疆 y 杞村悕绉伴鑹蹭负鐧借壊
+ }
+ },
+ series: [
+ {
+ name: '骞虫柟',
+ type: 'line',
+ barWidth: '40%',
+ barGap: '10%',
+ label: {
+ show: true,
+ fontSize: 16,
+ formatter: (params) => {
+ // 淇濈暀涓や綅灏忔暟
+ return params.value ? Number(params.value).toFixed(2) : '0.00';
+ },
+ color: 'white' // 璁剧疆鏁版嵁鏍囩棰滆壊涓虹櫧鑹�
+ },
+ lineStyle: {
+ color: 'blue'
+ },
+ },
+ {
+ name: '鐗囨暟',
+ type: 'line',
+ barWidth: '40%',
+ barGap: '10%',
+ label: {
+ show: true,
+ fontSize: 16,
+ color: 'white' // 璁剧疆鏁版嵁鏍囩棰滆壊涓虹櫧鑹�
+ }
+ }
+ ]
+ };
+ const OptionYear = {
+ tooltip: {
+ trigger: 'axis',
+ axisPointer: {
+ type: 'shadow',
+ label: {
+ fontSize: 16,
+ color: 'white' // 璁剧疆鎻愮ず妗嗘枃瀛楅鑹蹭负鐧借壊
+ }
+ }
+ },
+ legend: {
+ textStyle: {
+ fontSize: 20,
+ fontWeight: 'bold',
+ color: 'white' // 璁剧疆鍥句緥鏂囧瓧棰滆壊涓虹櫧鑹�
+ }
+ },
+ toolbox: {
+ show: true,
+ feature: {
+ dataZoom: {
+ yAxisIndex: 'none'
+ },
+ dataView: { readOnly: false },
+ magicType: { type: ['line', 'bar'] },
+ restore: {},
+ saveAsImage: {}
+ },
+ iconStyle: {
+ color: 'white' // 璁剧疆宸ュ叿妗嗗浘鏍囬鑹蹭负鐧借壊
+ }
+ },
+ grid: {
+ left: '3%',
+ right: '4%',
+ bottom: '10%',
+ containLabel: true
+ },
+ xAxis: [
+ {
+ type: 'category',
+ axisTick: { alignWithLabel: true },
+ boundaryGap: '20%',
+ axisLabel: {
+ fontSize: 20,
+ interval: 'auto',
+ margin: 15,
+ formatter: (value, index) => {
+ // 濡傛灉鏄棩鏈熸牸寮�
+ if (value.includes('-')) {
+ // 瀵圭涓�涓棩鏈熸樉绀哄畬鏁村勾鏈堟棩
+ if (index === 0) {
+ return value; // 杩斿洖瀹屾暣鏃ユ湡 (渚嬪: 2024-03-21)
+ }
+ // 鍏朵粬鏃ユ湡鍙樉绀烘湀-鏃�
+ return value.split('-').slice(1).join('-'); // (渚嬪: 03-21)
+ }
+ return value;
+ },
+ color: 'white' // 璁剧疆 x 杞存爣绛鹃鑹蹭负鐧借壊
+ },
+ nameTextStyle: {
+ fontSize: 20,
+ color: 'white' // 璁剧疆 x 杞村悕绉伴鑹蹭负鐧借壊
+ }
+ }
+ ],
+ yAxis: [
+ {
+ type: 'value',
+ axisLabel: {
+ fontSize: 20,
+ color: 'white' // 璁剧疆 y 杞存爣绛鹃鑹蹭负鐧借壊
+ },
+ nameTextStyle: {
+ fontSize: 20,
+ color: 'white' // 璁剧疆 y 杞村悕绉伴鑹蹭负鐧借壊
+ }
+ }
+ ],
+ series: [
+ {
+ name: '璁″垝閲�',
+ type: 'bar',
+ barWidth: '27%',
+ barGap: '20%',
+ label: {
+ show: true,
+ fontSize: 16,
+ formatter: (params) => params.value,
+ color: 'white',
+ position: 'top'
+ }
+ },
+ {
+ name: '涓�绾�',
+ type: 'bar',
+ barWidth: '27%',
+ barGap: '20%',
+ label: {
+ show: true,
+ fontSize: 16,
+ formatter: (params) => params.value,
+ color: 'white',
+ position: 'top'
+ },
+ },
+ {
+ name: '浜岀嚎',
+ type: 'bar',
+ barWidth: '27%',
+ barGap: '10%',
+ label: {
+ show: true,
+ fontSize: 16,
+ formatter: (params) => params.value,
+ color: 'white',
+ position: 'top'
+ },
+ }
+ ]
+ };
+ // //璇锋眰褰撴棩浜ч噺
+ // request.post('/deviceInteraction/primitiveTask/findDailyOutput',
+ // {
+ // "dayCount": 1
+ // }).then((res) => {
+ // if (res.code == 200) {
+ // const modeOptions = res.data;
+ // this.drawDay('drawLineChart_day11', OptionYear, modeOptions);
+ // // this.drawDay('drawLineChart_day31', OptionYear, modeOptions);
+ // // this.drawYear('drawLineChart_day51', OptionDayMode, modeOptions);
+ // } else {
+ // console.error('璇锋眰褰撴棩浜ч噺鏁版嵁澶辫触:', error);
+ // }
+ // });
+
+ //璇锋眰鏃ヤ骇閲�-鏈�
+ request.post('/deviceInteraction/primitiveTask/findDailyOutput',
+ {
+ "dayCount": 30
+ }).then((res) => {
+ if (res.code == 200) {
+ const modeOptions = res.data;
+ const modeOptions2 = [res.data[res.data.length - 1]];
+ console.log(modeOptions2);
+ //this.drawDay('drawLineChart_day11', OptionYear, modeOptions);
+ this.drawDay('drawLineChart_day31', OptionYear, modeOptions);
+ this.drawDay('drawLineChart_day11', OptionYear, modeOptions2);
+ // this.drawYear('drawLineChart_day51', OptionDayMode, modeOptions);
+ } else {
+ console.error('璇锋眰鏃ヤ骇閲�-鏈堟暟鎹け璐�:', error);
+ }
+ });
+ //璇锋眰璁″垝閲�
+ request.post('/deviceInteraction/primitiveTask/findPlannedQuantity',
+ {
+ "dayCount": 30
+ }).then((res) => {
+ if (res.code == 200) {
+ const modeOptions = res.data;
+ this.drawYear('drawLineChart_day51', OptionDayMode, modeOptions);
+ let textDay = document.getElementById('textDay');
+ let textprice = document.getElementById('textprice');
+ let textarea = document.getElementById('textarea');
+
+ let y_pingfang = res.data.map(v => { return v.area_sum });
+ let y_pianshu = res.data.map(v => { return v.task_quantity_sum });
+ let y_pingfang_sum = 0;
+ let y_pianshu_sum = 0;
+ for (let i = 0; i < y_pingfang.length; i++) {
+ y_pingfang_sum += y_pingfang[i];
+ }
+ for (let i = 0; i < y_pianshu.length; i++) {
+ y_pianshu_sum += y_pianshu[i];
+ }
+
+ textDay.innerHTML = "鏃ユ湡锛�" + res.data[0].CreateDate + " - " + res.data[res.data.length - 1].CreateDate;
+ textprice.innerHTML = "鐗囨暟锛�" + y_pianshu_sum;
+ textarea.innerHTML = "骞虫柟鏁帮細" + Number(y_pingfang_sum).toFixed(2);
+ // this.drawYear('drawLineChart_day51', OptionDayMode, modeOptions);
+ } else {
+ console.error('璇锋眰璁″垝閲�-鏈堟暟鎹け璐�:', error);
+ }
+ });
+
},
methods: {
- //鏂规硶
- drawLineChart(name, data) {
+ draw(name, Option) {
var myChart = echarts.init(document.getElementById(name));
- myChart.setOption({ // 缁樺埗鍥捐〃
- title: {
- text: '浜ч噺鐪嬫澘绀轰緥'
- },
- tooltip: {
- trigger: 'axis',
- axisPointer: {
- type: 'cross',
- label: {
- backgroundColor: '#6a7985'
- }
- }
- },
- legend: {
- data: ['璁″垝浜ч噺', '瀹為檯浜ч噺']
- },
- toolbox: {
- feature: {
- saveAsImage: {}
- }
- },
- grid: {
- left: '3%',
- right: '4%',
- bottom: '3%',
- containLabel: true
- },
- xAxis: [
- {
- type: 'category',
- boundaryGap: false,
- data: ['1-01', '1-02', '1-03', '1-04', '1-05',
- '1-06', '1-07', '1-08', '1-09', '1-10',
- '1-11', '1-12', '1-13', '1-14', '1-15',
- '1-16', '1-17', '1-18', '1-19', '1-20',
- '1-21', '1-22', '1-23', '1-24', '1-25',
- '1-26', '1-27', '1-28', '1-29', '1-30', '1-31']
- }
- ],
- yAxis: [
- {
- type: 'value'
- }
- ],
- series: [
- {
- name: '璁″垝浜ч噺',
- type: 'line',
- areaStyle: {},
- label: {
- show: true,
- position: 'top'
- },
- data: [120, 132, 101, 134, 90, 230, 210,
- 120, 132, 101, 134, 90, 230, 210,
- 120, 132, 101, 134, 90, 230, 210,
- 120, 132, 101, 134, 90, 230, 210,
- 120, 132, 101]
- },
- {
- name: '瀹為檯浜ч噺',
- type: 'line',
- areaStyle: {},
- emphasis: {
- focus: 'series'
- },
- data: [100, 122, 101, 124, 90, 200, 180,
- 100, 122, 101, 124, 90, 200, 180,
- 100, 122, 101, 124, 90, 200, 180,
- 100, 122, 101, 124, 90, 200, 180,
- 100, 122, 101]
- }
- ]
-
- });
+ myChart.setOption(Option);
},
- drawBarchart(name, data) {
- var myChart = echarts.init(document.getElementById(name));
- myChart.setOption({ // 缁樺埗鍥捐〃
- title: {
- text: '鎬讳骇閲忕湅鏉跨ず渚�'
- },
- tooltip: {
- trigger: 'item'
- },
- legend: {
- top: '5%',
- left: 'center'
- },
- series: [
- {
- name: 'Access From',
- type: 'pie',
- radius: ['40%', '70%'],
- avoidLabelOverlap: false,
- label: {
- show: false,
- position: 'center'
- },
- emphasis: {
- label: {
- show: true,
- fontSize: 40,
- fontWeight: 'bold'
- }
- },
- labelLine: {
- show: false
- },
- data: [
- { value: 1000, name: '璁″垝鎬荤墖鏁�' },
- { value: 900, name: '瀹為檯鎬荤墖鏁�' },
- { value: 10, name: '鐮存崯鐗囨暟' }
- ]
- , label: {
- formatter: '{b}:{c}'
- }
- }
- ]
+ drawDay(name, Option, data) {
+ // console.log(data);
+ //Option.title.text="鏃ョ湅鏉�";
+ //鏃ョ湅鏉�- 璁″垝閲忥紝涓�绾垮畬鎴愶紝浜岀嚎瀹屾垚锛堢墖鏁帮級
+ let x_data = data.map(v => { return v.date });
+ let y_jihua = data.map(v => { return v.plan });
+ let y_one = data.map(v => { return v.line1 });
+ let y_two = data.map(v => { return v.line2 });
+ Option.xAxis[0].data = x_data;
+ Option.series[0].data = y_jihua;
+ Option.series[1].data = y_one;
+ Option.series[2].data = y_two;
+ this.draw(name, Option);
+ },
+ drawYear(name, Option, data) {
+ //璁″垝閲�- 骞虫柟锛岀墖鏁�
+ let x_data = data.map(v => { return v.CreateDate });
+ let y_pingfang = data.map(v => { return v.area_sum });
+ let y_pianshu = data.map(v => { return v.task_quantity_sum });
+ Option.xAxis.data = x_data;
+ Option.series[0].data = y_pingfang;
+ Option.series[1].data = y_pianshu;
+ this.draw(name, Option);
+ },
+ requsstData() {
-
- });
}
}
}
</script>
-<template>
- <div>
- <div style="font-size: 30px;height: 70px;line-height: 70px;border: 1px solid #ccc;text-align: center;">
- JOOMO闀滅墖鍒堕�犱腑蹇冮┚椹惰埍
- </div>
- <div style="margin-left: 20px;">
- <el-button type="primary" @click="drawPieChart">鏍囧噯鍝�</el-button>
- <el-button type="primary" @click="drawPieChart">瀹氬埗鍝�</el-button>
- </div>
- <div style="width:100% ;height: 880px;">
- <div style="width:33.3% ;height: 100%;border: 1px solid #ccc;float: left;">
- <div id="drawLineChart_day11" style="height: 50%;width: 100%;border: 1px solid #ccc;">鏃ュ崟杈炬垚鐜�-鐗囨暟</div>
- <div id="drawLineChart_day21" style="height: 50%;width: 100%;border: 1px solid #ccc;">鏈堝崟杈炬垚鐜�-鐗囨暟</div>
- </div>
- <div style="width:33.3% ;height: 100%;border: 1px solid #ccc;float: left;">
- <div id="drawLineChart_day31" style="height: 50%;width: 100%;border: 1px solid #ccc;">鏃ュ崟杈炬垚鐜�-骞虫柟</div>
- <div id="drawLineChart_day41" style="height: 50%;width: 100%;border: 1px solid #ccc;">鏈堝崟杈炬垚鐜�-骞虫柟</div>
- </div>
- <div style="width:33.3% ;height: 100%;border: 1px solid #ccc;float: left;">
- <div id="drawLineChart_day51" style="height: 33.3%;width: 100%;border: 1px solid #ccc;">鍚堟牸鐜�-鏄剧ず褰撳ぉ</div>
- <div id="drawLineChart_day61" style="height: 33.3%;width: 100%;border: 1px solid #ccc;">璁惧绋煎姩鐜�</div>
- <div id="drawLineChart_day71" style="height: 33.3%;width: 100%;border: 1px solid #ccc;">鑳借�楃鐞�-鎸夊ぉ鏄剧ず锛堟墜杈擄級</div>
- </div>
- </div>
-
- <!-- <div style="width:33% ;height: 880px;border: 1px solid #ccc;">
- <div id="drawLineChart_day1" style="height: 300px;width: 25%;border: 1px solid #ccc;float: left;"></div>
- <div id="drawLineChart_day2" style="height: 300px;width: 25%;border: 1px solid #ccc;float: left;"></div>
- </div> -->
- </div>
-</template>
<style scoped>
-.float{
+.dashboard-container {
+ position: absolute;
+ width: 1920px; /* 璁捐绋垮搴� */
+ background: linear-gradient(to bottom, #001f3f, #0074d9d7);
+ color: white;
+ overflow: hidden;
+ transition: transform 0.3s ease-out, margin 0.3s ease-out;
+}
+
+.dashboard-content {
+ width: 100%;
+ height: 100%;
+}
+
+:deep(.el-table__header th) {
+ background: #052c52!important;
+ color: white!important;
+ font-size: large;
+}
+:deep(.el-table) {
+ background: #0b3d6f;
+ color: white;
+}
+:deep(.el-table__body tr) {
+ background: #0b3d6f;
+ color: rgb(3, 160, 181);
+ font-size: 23px;
+}
+
+/*0b3d6f*/
+.float {
float: left;
}
-.style{
- width: 600px;
+
+.style {
+ width: 600px;
height: 400px;
border: 1px solid #ccc;
}
+
.chart {
height: 400px;
}
+
+/* 纭繚鍥捐〃瀹瑰櫒鍐呯殑echarts瀹炰緥鑳藉姝ｇ‘鏄剧ず */
+:deep(.echarts) {
+ width: 100% !important;
+ height: 100% !important;
+}
+
+.table-container {
+ height: 100%;
+ width: 30%;
+ border: 1px solid #ccc;
+ float: left;
+ display: flex;
+ flex-direction: column;
+}
+
+.table-title {
+ font-weight: bold;
+ font-size: 20px;
+ padding: 10px;
+ text-align: center;
+ background-color: #052c52;
+ color: white;
+}
+
+.table-scroll-wrapper {
+ flex: 1;
+ overflow: hidden;
+ position: relative;
+}
+
+/* 寮哄埗闅愯棌婊氬姩鏉′絾鍏佽婊氬姩鍐呭 */
+:deep(.el-table__body-wrapper) {
+ overflow: hidden !important;
+}
+
+/* 榧犳爣鎮仠鏃舵殏鍋滃姩鐢� */
+:deep(.el-table__body-wrapper:hover .el-table__body) {
+ animation-play-state: paused !important;
+}
+
+/* 琛ㄦ牸瀛椾綋棰滆壊*/
+:deep(.el-table__body tr) {
+ color: white;
+}
+
+:deep(.el-table__body tr:hover td) {
+ background-color: #1a4d7f !important;
+}
</style>
\ No newline at end of file
--
Gitblit v1.8.0