From 9c44fd1baaf6f6d854677cf590e974a021840dd2 Mon Sep 17 00:00:00 2001
From: zhou zhou <3272660260@qq.com>
Date: 星期二, 23 十二月 2025 09:52:55 +0800
Subject: [PATCH] ##
---
Monitor-APP/pages/home/home.vue | 598 ++++++++++++++++++++++++++++++++++++++---------------------
1 files changed, 380 insertions(+), 218 deletions(-)
diff --git a/Monitor-APP/pages/home/home.vue b/Monitor-APP/pages/home/home.vue
index 336b75e..a33021e 100644
--- a/Monitor-APP/pages/home/home.vue
+++ b/Monitor-APP/pages/home/home.vue
@@ -12,8 +12,8 @@
<view class="button-right" @click="ejected()"></view>
<!-- 涓昏鍥� -->
<view class="main">
- <view class="mian-item">
- <view class="mian-item-box">
+ <view class="main-item">
+ <view class="main-item-box">
<y-box>
<view class="box-item">
<text class="item-title">鏅鸿兘澶у睆鏄剧ず绯荤粺</text>
@@ -23,9 +23,9 @@
<text class="item-title">浠撳簱鏁版嵁</text>
<text class="item-subTitle">warehouse data</text>
<view class="img-box">
- <view style="width: 100%; display: flex" v-for="(item, i) in locList" :key="i">
- <view style="display: flex; justify-content: center; align-items: center; width: 48%; font-size: 1.3vw">鐗╂枡鐮�: {{ item.matnr }}</view>
- <view style="display: flex; justify-content: center; align-items: center; width: 48%; font-size: 1.3vw">鏁伴噺: {{ item.matnrCount }}</view>
+ <view class="data-row" v-for="(item, i) in locList" :key="i">
+ <view class="data-cell data-text">鐗╂枡鐮�: {{ item.matnr }}</view>
+ <view class="data-cell data-text-lg">鏁伴噺: {{ item.matnrCount }}</view>
</view>
</view>
</view>
@@ -61,8 +61,8 @@
</y-box>
</view>
</view>
- <view class="mian-item">
- <view class="mian-item-box">
+ <view class="main-item">
+ <view class="main-item-box">
<view style="width: 100%; height: 100%">
<view style="height: 35%">
<!-- 鎶樼嚎鍥� -->
@@ -113,27 +113,21 @@
:echartsApp="true"
/>
</view>
- <view>
+ <view class="stat-panel">
<view class="flex-row sub-info">
<image src="../../static/g1.png" mode="aspectFit"></image>
- <view style="width: 8vw; height: 4vw; line-height: 4vw">鍦ㄥ簱</view>
- <view style="width: 8vw; height: 4vw; line-height: 4vw; font-size: 2vw">
- {{ baseInfo.stockCount }}
- </view>
+ <view class="stat-label">鍦ㄥ簱</view>
+ <view class="stat-label data-text-lg">{{ baseInfo.stockCount }}</view>
</view>
- <view class="flex-row sub-info" style="margin-top: 2vh">
+ <view class="flex-row sub-info">
<image src="../../static/f1.png" mode="aspectFit"></image>
- <view style="width: 8vw; height: 4vw; line-height: 4vw">绌哄簱</view>
- <view style="width: 8vw; height: 4vw; line-height: 4vw; font-size: 2vw">
- {{ baseInfo.emptyCount }}
- </view>
+ <view class="stat-label">绌哄簱</view>
+ <view class="stat-label data-text-lg">{{ baseInfo.emptyCount }}</view>
</view>
- <view class="flex-row sub-info" style="margin-top: 2vh">
+ <view class="flex-row sub-info">
<image src="../../static/e1.png" mode="aspectFit"></image>
- <view style="width: 8vw; height: 4vw; line-height: 4vw">閿佸畾</view>
- <view style="width: 8vw; height: 4vw; line-height: 4vw; font-size: 2vw">
- {{ baseInfo.noneCount }}
- </view>
+ <view class="stat-label">閿佸畾</view>
+ <view class="stat-label data-text-lg">{{ baseInfo.noneCount }}</view>
</view>
</view>
</view>
@@ -266,15 +260,31 @@
</template>
<script>
import WebSocketUtil from './uniWebSocket';
+
+// 浠诲姟绫诲瀷甯搁噺鏄犲皠
+const IO_TYPE_MAP = {
+ 101: '鍏ㄦ澘鍑哄簱',
+ 103: '鎷ｆ枡鍑哄簱',
+ 107: '鐩樼偣鍑哄簱',
+ 1: '鍏ュ簱',
+ 10: '绌烘墭鍏ュ簱',
+ 110: '绌烘墭鍑哄簱',
+ 104: '骞舵澘鍑哄簱',
+ 54: '骞舵澘鍏ュ簱'
+};
+
export default {
data() {
return {
+ // 瑙嗗浘鐘舵��
homeViewShow: true,
infoViewShow: false,
errorInfoViewShow: false,
homeMode: [],
infoMode: [],
errorInfoMode: [],
+
+ // 鍩虹淇℃伅
baseInfo: {
xDistance: 1,
yDistance: 2,
@@ -286,29 +296,33 @@
emptyCount: '',
noneCount: ''
},
+
+ // 鍥捐〃鏁版嵁
chartsData: {
- Line: {
- categories: [],
- series: []
- },
- Pie: {
- series: [
- {
- data: []
- }
- ]
- }
+ Line: { categories: [], series: [] },
+ Pie: { series: [{ data: [] }] }
},
+
+ // 鍔ㄧ敾涓庡浘琛�
duration: 300,
calendar: '',
ringOpts: {},
chartsDataLine1: {},
chartsDataPie2: {},
+
+ // 閰嶇疆寮圭獥
ejectShow: false,
+
+ // 鏈嶅姟鍣ㄩ厤缃�
baseIP: '',
basePort: '',
baseLedId: '',
baseUrl: '',
+ wmsUrl: '',
+ wmsPort: '',
+ getConfigUrl: 'http://127.0.0.1:8088/wcs/monitor/getIpConfig',
+
+ // 浠诲姟淇℃伅
infoType: 0,
infoText: {
title: '',
@@ -321,23 +335,33 @@
barcode: ''
},
swiperList: [],
+
+ // 杩炴帴鐘舵��
timeOut: false,
times: 0,
+ socketClient: null,
+ socketUrl: '',
+
+ // 鏃ユ湡鏃堕棿
currDate: '',
locList: [],
oldHours: '',
oldMin: '',
- socketClient: null,
+
+ // 鐗堟湰鏇存柊
version: '',
- socketUrl: '',
msgType: 'success',
filename: '',
dialogContent: '',
- wmsUrl: '',
- wmsPort: '',
+
+ // 瑙嗗浘鍒囨崲鎺у埗
switchDebounceTimer: null,
viewSwitchInProgress: false,
- getConfigUrl:"http://127.0.0.1:8088/wcs/monitor/getIpConfig"
+
+ // 瀹氭椂鍣↖D锛堢敤浜庢竻鐞嗭級
+ refreshTimerId: null,
+ restartTimerId: null,
+ gcTimerId: null
};
},
onShow() {
@@ -346,95 +370,111 @@
plus.navigator.setFullscreen(true);
// #endif
this.getVersion();
-
},
+
mounted() {
- let that = this;
- const BaseIP = uni.getStorageSync('BaseIp');
- const BaseLedId = uni.getStorageSync('BaseLedId');
- const BasePort = uni.getStorageSync('BasePort');
- const BaseCrnId = uni.getStorageSync('BaseCrnId');
- const PROJ = uni.getStorageSync('UPROJ');
- const WMSURL = uni.getStorageSync('wmsUrl');
- const WMSPORT = uni.getStorageSync('wmsPort');
- that.baseUrl = PROJ;
- that.baseIP = BaseIP;
- that.baseLedId = BaseLedId;
- that.basePort = BasePort;
- that.baseCrnId = BaseCrnId;
- that.wmsUrl = WMSURL;
- that.wmsPort = WMSPORT;
+ // 浣跨敤缁熶竴鐨勯厤缃垵濮嬪寲鏂规硶
+ this.initConfig();
},
+
created() {
- let that = this;
- const BaseIP = uni.getStorageSync('BaseIp');
- const BaseLedId = uni.getStorageSync('BaseLedId');
- const BasePort = uni.getStorageSync('BasePort');
- const BaseCrnId = uni.getStorageSync('BaseCrnId');
- const PROJ = uni.getStorageSync('UPROJ');
- const WMSURL = uni.getStorageSync('wmsUrl');
- const WMSPORT = uni.getStorageSync('wmsPort');
- that.baseUrl = PROJ;
- that.baseIP = BaseIP;
- that.baseLedId = BaseLedId;
- that.basePort = BasePort;
- that.baseCrnId = BaseCrnId;
- that.wmsUrl = WMSURL;
- that.wmsPort = WMSPORT;
-
- that.getIPConfig();
-
- that.uniWebSocket();
- // that.webSockerInit()
+ // 鍒濆鍖栭厤缃苟寤虹珛杩炴帴
+ this.initConfig();
+ this.getIPConfig();
+ this.uniWebSocket();
},
+
onLoad() {
- setInterval(() => {
+ // 鏁版嵁鍒锋柊瀹氭椂鍣紙姣忕锛�
+ this.refreshTimerId = setInterval(() => {
this.getServerData();
this.controller();
}, 1000);
- setInterval(() => {
+ // 搴旂敤閲嶅惎瀹氭椂鍣紙姣�4灏忔椂锛�
+ this.restartTimerId = setInterval(() => {
setTimeout(() => {
plus.runtime.restart();
}, 100);
}, 1000 * 60 * 60 * 4);
- // 姣忓皬鏃惰Е鍙戜竴娆″瀮鍦惧洖鏀�
- const memoryCleanerId = setInterval(() => {
+ // 鍨冨溇鍥炴敹瀹氭椂鍣紙姣�5鍒嗛挓锛�
+ this.gcTimerId = setInterval(() => {
+ // #ifdef APP-PLUS
if (plus.os.name.toLowerCase() === 'android') {
- // 寮哄埗瑙﹀彂 GC
plus.android.importClass('java.lang.System');
plus.android.invoke('java.lang.System', 'gc');
console.log('鎵嬪姩瑙﹀彂 GC');
}
- // 娓呯悊涓嶅啀闇�瑕佺殑澶у瀷鏁版嵁瀵硅薄
+ // #endif
+ // 娓呯悊澶у瀷鏁版嵁瀵硅薄
if (this.oldData && this.oldData.length > 100) {
this.oldData = [];
}
- }, 30000 * 10); // 姣忓皬鏃舵墽琛屼竴娆�
-
-
+ }, 30000 * 10);
},
+
+ // 缁勪欢鍗歌浇鏃舵竻鐞嗚祫婧�
+ onUnload() {
+ // 娓呯悊鎵�鏈夊畾鏃跺櫒
+ if (this.refreshTimerId) {
+ clearInterval(this.refreshTimerId);
+ this.refreshTimerId = null;
+ }
+ if (this.restartTimerId) {
+ clearInterval(this.restartTimerId);
+ this.restartTimerId = null;
+ }
+ if (this.gcTimerId) {
+ clearInterval(this.gcTimerId);
+ this.gcTimerId = null;
+ }
+ if (this.switchDebounceTimer) {
+ clearTimeout(this.switchDebounceTimer);
+ this.switchDebounceTimer = null;
+ }
+
+ // 鍏抽棴 WebSocket 杩炴帴
+ if (this.socketClient) {
+ this.socketClient.close();
+ this.socketClient = null;
+ }
+ },
+
methods: {
- getIPConfig(){
- const that = this
-
- console.log(that.baseIP)
- uni.request({
- url: that.getConfigUrl,
- method:'GET',
- success(result) {
- console.log(result)
- const res = result.data
- uni.setStorageSync('BaseIp', res.data.ledIp);
- uni.setStorageSync('BaseLedId', res.data.ledId);
- uni.setStorageSync('BasePort', res.data.ledPort);
- uni.setStorageSync('UPROJ', res.data.ledUrl);
-
+ // 缁熶竴鐨勯厤缃垵濮嬪寲鏂规硶
+ initConfig() {
+ this.baseIP = uni.getStorageSync('BaseIp') || '';
+ this.baseLedId = uni.getStorageSync('BaseLedId') || '';
+ this.basePort = uni.getStorageSync('BasePort') || '';
+ this.baseCrnId = uni.getStorageSync('BaseCrnId') || '';
+ this.baseUrl = uni.getStorageSync('UPROJ') || '';
+ this.wmsUrl = uni.getStorageSync('wmsUrl') || '';
+ this.wmsPort = uni.getStorageSync('wmsPort') || '';
+ },
+
+ // 鑾峰彇IP閰嶇疆锛堝甫閿欒澶勭悊锛�
+ getIPConfig() {
+ const that = this;
+ uni.request({
+ url: that.getConfigUrl,
+ method: 'GET',
+ timeout: 5000,
+ success(result) {
+ if (result.data && result.data.data) {
+ const configData = result.data.data;
+ uni.setStorageSync('BaseIp', configData.ledIp || '');
+ uni.setStorageSync('BaseLedId', configData.ledId || '');
+ uni.setStorageSync('BasePort', configData.ledPort || '');
+ uni.setStorageSync('UPROJ', configData.ledUrl || '');
+ console.log('IP閰嶇疆鑾峰彇鎴愬姛');
}
- });
-
-
+ },
+ fail(err) {
+ console.error('鑾峰彇IP閰嶇疆澶辫触:', err);
+ // 浣跨敤鏈湴瀛樺偍鐨勯厤缃綔涓哄悗澶�
+ }
+ });
},
uniWebSocket() {
let that = this;
@@ -494,20 +534,7 @@
that.baseInfo.used = data.used;
that.baseInfo.usedPr = data.usedPr;
- that.chartsData.Line.categories = [
- that.getDateFormat(-11),
- that.getDateFormat(-10),
- that.getDateFormat(-9),
- that.getDateFormat(-8),
- that.getDateFormat(-7),
- that.getDateFormat(-6),
- that.getDateFormat(-5),
- that.getDateFormat(-4),
- that.getDateFormat(-3),
- that.getDateFormat(-2),
- that.getDateFormat(-1),
- that.getDateFormat(0)
- ];
+ that.chartsData.Line.categories = that.generateDateCategories(-11, 0);
that.chartsData.Line.series = data.rows;
that.calendar = data.year + '骞�' + data.month + '鏈�' + data.day + '鏃� ' + data.hour + ':' + data.minute + ':' + data.second + ' ' + data.week;
that.currDate = data.year + '/' + data.month + '/' + data.day;
@@ -535,59 +562,63 @@
that.infoType = 0;
}
} else if (data.type === 'task') {
- if (data.taskList && data.taskList !== '' && data.taskList.length != 0) {
- if (that.infoType == 2 || that.infoType == 3) {
- return;
- }
- // infoType1:鍙湁鎷ｆ枡绛変俊鎭�
- that.infoType = 1;
- if (data.taskList[0].ioType === 101) {
- that.infoText.title = '鍏ㄦ澘鍑哄簱';
- } else if (data.taskList[0].ioType === 103) {
- that.infoText.title = '鎷ｆ枡鍑哄簱';
- } else if (data.taskList[0].ioType === 107) {
- that.infoText.title = '鐩樼偣鍑哄簱';
- } else if (data.taskList[0].ioType === 1) {
- that.infoText.title = '鍏ュ簱';
- } else if (data.taskList[0].ioType === 10) {
- that.infoText.title = '绌烘墭鍏ュ簱';
- } else if (data.taskList[0].ioType === 110) {
- that.infoText.title = '绌烘墭鍑哄簱';
- } else if (data.taskList[0].ioType === 104) {
- that.infoText.title = '骞舵澘鍑哄簱';
- } else if (data.taskList[0].ioType === 54) {
- that.infoText.title = '骞舵澘鍏ュ簱';
- }else {
- that.infoText.title = data.taskList[0].title;
- }
- that.infoText.barcode = data.taskList[0].barcode;
- that.infoText.workNo = data.taskList[0].workNo;
- that.infoText.sourceLocNo = data.taskList[0].sourceLocNo;
- that.infoText.staNo = data.taskList[0].staNo;
- that.swiperList = data.taskList[0].matDtos;
- }else if(data.type === 'NoData'){
- that.infoType = 0;
- }
- else {
- if (that.infoType == 2 || that.infoType == 3) {
- return;
- }
- that.infoType = 0;
- }
+ this.handleTaskData(data);
+ } else if (data.type === 'NoData') {
+ that.infoType = 0;
}
},
+
+ // 澶勭悊浠诲姟鏁版嵁锛堜娇鐢ㄥ父閲忔槧灏勭畝鍖栭�昏緫锛�
+ handleTaskData(data) {
+ // 鏃犱换鍔″垪琛ㄦ椂
+ if (!data.taskList || data.taskList.length === 0) {
+ // 寮傚父淇℃伅浼樺厛绾ф洿楂橈紝涓嶅垏鎹�
+ if (this.infoType === 2 || this.infoType === 3) {
+ return;
+ }
+ this.infoType = 0;
+ return;
+ }
+
+ // 寮傚父淇℃伅浼樺厛绾ф洿楂橈紝涓嶅垏鎹㈠埌浠诲姟瑙嗗浘
+ if (this.infoType === 2 || this.infoType === 3) {
+ return;
+ }
+
+ const task = data.taskList[0];
+ this.infoType = 1;
+
+ // 浣跨敤甯搁噺鏄犲皠鑾峰彇浠诲姟绫诲瀷鍚嶇О
+ this.infoText.title = IO_TYPE_MAP[task.ioType] || task.title || '浠诲姟';
+ this.infoText.barcode = task.barcode || '';
+ this.infoText.workNo = task.workNo || '';
+ this.infoText.sourceLocNo = task.sourceLocNo || '';
+ this.infoText.staNo = task.staNo || '';
+ this.swiperList = task.matDtos || [];
+ },
+
+ // 鐢熸垚鏃ユ湡鍒嗙被鏁扮粍锛堟�ц兘浼樺寲锛�
+ generateDateCategories(startOffset, endOffset) {
+ const categories = [];
+ const baseDate = new Date(this.currDate);
+ for (let i = startOffset; i <= endOffset; i++) {
+ const date = new Date(baseDate);
+ date.setDate(date.getDate() + i);
+ categories.push(`${date.getMonth() + 1}-${date.getDate()}`);
+ }
+ return categories;
+ },
+
getDateFormat(value) {
- var date = new Date(this.currDate); // 鑾峰彇褰撳墠鏃堕棿
- date.setDate(date.getDate() + value); // 璁剧疆澶╂暟 -1 澶�
- var m = date.getMonth() + 1;
- var d = date.getDate();
- var newDate = m + '-' + d;
- return newDate;
+ const date = new Date(this.currDate);
+ date.setDate(date.getDate() + value);
+ return `${date.getMonth() + 1}-${date.getDate()}`;
},
getServerData() {
- this.chartsDataLine1 = JSON.parse(JSON.stringify(this.chartsData.Line));
- this.chartsDataPie2 = JSON.parse(JSON.stringify(this.chartsData.Pie));
+ // 浣跨敤灞曞紑杩愮畻绗︽祬鎷疯礉锛堟�ц兘浼樹簬 JSON 娣辨嫹璐濓級
+ this.chartsDataLine1 = { ...this.chartsData.Line };
+ this.chartsDataPie2 = { ...this.chartsData.Pie };
},
// 鎺у埗鍣�
controller() {
@@ -619,37 +650,53 @@
}
},
- showHomeView() {
- this.infoViewShow = false;
- this.errorInfoViewShow = false;
- this.infoMode = ['fade', 'slide-bottom'];
- this.errorInfoMode = ['fade', 'slide-bottom'];
+ // 缁熶竴鐨勮鍥惧垏鎹㈡柟娉�
+ switchToView(viewType) {
+ const transitionMode = ['fade', 'slide-bottom'];
+
+ // 鏍规嵁鐩爣瑙嗗浘闅愯棌鍏朵粬瑙嗗浘
+ if (viewType !== 'home') {
+ this.homeViewShow = false;
+ this.homeMode = transitionMode;
+ }
+ if (viewType !== 'info') {
+ this.infoViewShow = false;
+ this.infoMode = transitionMode;
+ }
+ if (viewType !== 'error') {
+ this.errorInfoViewShow = false;
+ this.errorInfoMode = transitionMode;
+ }
+
+ // 寤惰繜鏄剧ず鐩爣瑙嗗浘
setTimeout(() => {
- this.homeViewShow = true;
- this.homeMode = ['fade', 'slide-bottom'];
+ switch(viewType) {
+ case 'home':
+ this.homeViewShow = true;
+ this.homeMode = transitionMode;
+ break;
+ case 'info':
+ this.infoViewShow = true;
+ this.infoMode = transitionMode;
+ break;
+ case 'error':
+ this.errorInfoViewShow = true;
+ this.errorInfoMode = transitionMode;
+ break;
+ }
}, this.duration);
+ },
+
+ showHomeView() {
+ this.switchToView('home');
},
showInfoView() {
- this.homeViewShow = false;
- this.errorInfoViewShow = false;
- this.homeMode = ['fade', 'slide-bottom'];
- this.errorInfoMode = ['fade', 'slide-bottom'];
- setTimeout(() => {
- this.infoViewShow = true;
- this.infoMode = ['fade', 'slide-bottom'];
- }, this.duration);
+ this.switchToView('info');
},
showErrorView() {
- this.homeViewShow = false;
- this.infoViewShow = false;
- this.homeMode = ['fade', 'slide-bottom'];
- this.infoMode = ['fade', 'slide-bottom'];
- setTimeout(() => {
- this.errorInfoViewShow = true;
- this.errorInfoMode = ['fade', 'slide-bottom'];
- }, this.duration);
+ this.switchToView('error');
},
// 閰嶇疆
ejected() {
@@ -692,33 +739,34 @@
that.getUpdateVersion();
}, 100);
},
- // 鏍￠獙鐗堟湰
+ // 鏍￠獙鐗堟湰锛堝寮洪敊璇鐞嗭級
getUpdateVersion() {
- let that = this;
- let type = 1;
- if (that.baseUrl == 'http://undefined:undefined/undefined') {
+ const that = this;
+ const type = 1;
+
+ // 閰嶇疆楠岃瘉
+ if (!that.baseIP || !that.wmsPort || !that.wmsUrl) {
+ console.log('鐗堟湰妫�鏌ヨ烦杩囷細閰嶇疆涓嶅畬鏁�');
return;
}
- const wms = 'http://' + that.baseIP + ':' + that.wmsPort + '/' + that.wmsUrl;
- console.log(wms);
- let url = wms + '/appVersion/checkUpdate/' + that.version + '/' + type;
+
+ const wmsBaseUrl = `http://${that.baseIP}:${that.wmsPort}/${that.wmsUrl}`;
+ const url = `${wmsBaseUrl}/appVersion/checkUpdate/${that.version}/${type}`;
+
uni.request({
url: url,
method: 'GET',
- success(res) {
- console.log(res);
- var res = res.data;
- if (res.data) {
+ timeout: 10000,
+ success(result) {
+ const res = result.data;
+ if (res && res.data) {
that.filename = res.data.path;
- that.dialogContent = '鍙戠幇鏂扮増鏈�:' + res.data.version + ', 鏄惁绔嬪嵆鏇存柊';
+ that.dialogContent = `鍙戠幇鏂扮増鏈�: ${res.data.version}, 鏄惁绔嬪嵆鏇存柊`;
that.$refs.upVersion.open();
- } else {
- uni.showToast({
- title: res.msg,
- icon: 'none',
- position: 'top'
- });
}
+ },
+ fail(err) {
+ console.error('鐗堟湰妫�鏌ュけ璐�:', err);
}
});
},
@@ -799,38 +847,99 @@
<style>
@import url('home.css');
-/* 鍒� */
+/* ========== 宸ュ叿绫� ========== */
.flex-col {
display: flex;
flex-direction: column;
}
-/* 琛� */
.flex-row {
display: flex;
flex-direction: row;
}
+.flex-full {
+ width: 100%;
+ display: flex;
+}
+
+.flex-center {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+}
+
+/* 鏁版嵁鏂囨湰鏍峰紡 */
+.data-text {
+ font-size: 1.3vw;
+ color: rgba(255, 255, 255, 0.9);
+}
+
+.data-text-lg {
+ font-size: 2vw;
+ font-weight: 600;
+ color: #00d4ff;
+}
+
+.data-text-xl {
+ font-size: 3vw;
+ font-weight: 700;
+}
+
+.stat-label {
+ width: 8vw;
+ height: 4vw;
+ line-height: 4vw;
+}
+
+/* 鏁版嵁琛屽垪琛� */
+.data-row {
+ width: 100%;
+ display: flex;
+ padding: 0.5vw 0;
+ border-bottom: 1px solid rgba(0, 212, 255, 0.1);
+ transition: background 0.2s ease;
+}
+
+.data-row:hover {
+ background: rgba(0, 212, 255, 0.05);
+}
+
+.data-cell {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ width: 48%;
+}
+
+/* 缁熻闈㈡澘 */
+.stat-panel {
+ display: flex;
+ flex-direction: column;
+ gap: 1.5vh;
+}
+
+/* ========== 瀹瑰櫒 ========== */
.container {
width: 100vw;
min-height: 100vh;
- background-color: #00163e;
+ background: linear-gradient(135deg, #00163e 0%, #001a4d 50%, #00163e 100%);
color: #fff;
text-align: center;
}
-/* 涓昏鍥� */
+/* ========== 涓昏鍥� ========== */
.home-view {
width: 100vw;
min-height: 100vh;
background-image: url(../../static/background.png);
background-size: 100vw 100vh;
+ background-position: center;
}
.home-right {
width: 50vw;
height: 89vh;
- /* background-color: cadetblue; */
}
.home-right-box {
@@ -838,6 +947,7 @@
height: 98%;
}
+/* ========== 澶撮儴鏍囬 ========== */
.head {
width: 100vw;
height: 11vh;
@@ -847,16 +957,23 @@
align-items: center;
justify-content: center;
transform: scale(0.7);
+ background: linear-gradient(180deg, rgba(0, 212, 255, 0.1) 0%, transparent 100%);
+ text-shadow: 0 0 20px rgba(0, 212, 255, 0.5);
+ letter-spacing: 0.5vw;
}
+/* ========== 鏃堕棿宸ュ叿鏍� ========== */
.time-tools {
position: absolute;
right: 2%;
top: 2%;
font-size: 1vw;
transform: scale(0.8);
+ color: rgba(255, 255, 255, 0.8);
+ text-shadow: 0 0 10px rgba(0, 212, 255, 0.3);
}
+/* ========== 瑁呴グ鎸夐挳 ========== */
.button-left {
position: absolute;
background-image: url(../../static/right.png);
@@ -866,6 +983,13 @@
width: 13.5%;
height: 8.5%;
transform: scaleX(-1);
+ opacity: 0.9;
+ transition: opacity 0.3s ease;
+}
+
+.button-left:hover,
+.button-right:hover {
+ opacity: 1;
}
.button-right {
@@ -876,17 +1000,30 @@
left: 65%;
width: 13.5%;
height: 8.5%;
+ opacity: 0.9;
+ transition: opacity 0.3s ease;
}
+/* ========== 浠撳簱鏁版嵁鍒楄〃 ========== */
.img-box {
height: 23vw;
width: 100%;
- /* background-color: #666666; */
display: flex;
flex-direction: row;
justify-content: flex-start;
flex-wrap: wrap;
font-size: 1vw;
+ overflow-y: auto;
+ padding: 0.5vw;
+}
+
+.img-box::-webkit-scrollbar {
+ width: 4px;
+}
+
+.img-box::-webkit-scrollbar-thumb {
+ background: rgba(0, 212, 255, 0.5);
+ border-radius: 2px;
}
.item-img {
@@ -894,7 +1031,6 @@
margin-top: 5%;
display: flex;
flex-direction: row;
- /* background-color: #00ffff; */
justify-content: flex-start;
align-items: flex-start;
}
@@ -907,21 +1043,38 @@
width: 5vw;
}
+/* ========== 杩涘害鏉★紙澧炲己鐗堬級========== */
.progressBar {
margin-top: 9%;
- /* width: 100%; */
height: 20%;
- background-color: #233751;
+ background: linear-gradient(90deg, #233751 0%, #1a2a3d 100%);
border-radius: 5vw;
+ overflow: hidden;
+ box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.3);
+ position: relative;
}
.progress {
- /* width: 90%; */
height: 100%;
- background-color: #ff5722;
+ max-width: 100%;
+ background: linear-gradient(90deg, #ff9800 0%, #ff5722 50%, #f44336 100%);
+ border-radius: 5vw;
+ transition: width 0.5s ease-out;
+ position: relative;
+}
+
+.progress::after {
+ content: '';
+ position: absolute;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ background: linear-gradient(180deg, rgba(255, 255, 255, 0.3) 0%, transparent 50%);
border-radius: 5vw;
}
+/* ========== 鍥捐〃鍖哄煙 ========== */
.charts-box {
width: 80%;
height: 24vh;
@@ -931,19 +1084,28 @@
.charts-box-ring {
width: 60%;
height: 24vh;
- /* background-color: #00ffff; */
}
+/* ========== 搴撳瓨缁熻淇℃伅 ========== */
.sub-info {
font-size: 1.5vw;
+ padding: 0.5vw 1vw;
+ border-radius: 0.5vw;
+ background: rgba(0, 212, 255, 0.05);
+ transition: background 0.3s ease;
+}
+
+.sub-info:hover {
+ background: rgba(0, 212, 255, 0.1);
}
.sub-info image {
width: 3.5vw;
height: 3.5vw;
+ margin-right: 0.5vw;
}
-/* 鍏辩敤 */
+/* ========== 鍏辩敤 ========== */
.main {
width: 100vw;
height: 88vh;
@@ -951,7 +1113,7 @@
display: flex;
}
-.mian-item {
+.main-item {
width: 50%;
height: 100%;
display: flex;
@@ -960,7 +1122,7 @@
justify-content: center;
}
-.mian-item-box {
+.main-item-box {
width: 98%;
height: 98%;
}
--
Gitblit v1.9.1