From 5270308151082506e0e6df2c72d278d2976ec860 Mon Sep 17 00:00:00 2001
From: liulijun <liulijun@hnkhzn.com>
Date: 星期三, 29 四月 2026 10:28:58 +0800
Subject: [PATCH] WCS设备监控
---
项目代码/WCS/WCSClient/src/views/LineInfo.vue | 629 ++++++++++++++++++++++++++++++++++++++------------------
1 files changed, 425 insertions(+), 204 deletions(-)
diff --git "a/\351\241\271\347\233\256\344\273\243\347\240\201/WCS/WCSClient/src/views/LineInfo.vue" "b/\351\241\271\347\233\256\344\273\243\347\240\201/WCS/WCSClient/src/views/LineInfo.vue"
index 0f2cf01..4c275ae 100644
--- "a/\351\241\271\347\233\256\344\273\243\347\240\201/WCS/WCSClient/src/views/LineInfo.vue"
+++ "b/\351\241\271\347\233\256\344\273\243\347\240\201/WCS/WCSClient/src/views/LineInfo.vue"
@@ -1,100 +1,42 @@
<template>
- <div :class="update()" :style="{ left: left, top: top, marginBottom: 0 + 'px', marginTop: 0 + 'px' }"
+ <div :class="update" :style="{ left: left, top: top, marginBottom: 0 + 'px', marginTop: 15 + 'px' }"
@click="mouseClick" v-loading.fullscreen.lock="fullscreenLoading">
<img v-if="imgType === '2'" src="../../public/lines.png" />
<img v-if="imgType === '1'" src="../../public/lines2.png" />
<label v-if="equipNo" class="equip-no">{{ equipNo }}</label>
</div>
- <el-dialog v-model="dialogVisible" title="杈撻�佺嚎淇℃伅鏌ョ湅" :before-close="handleClose">
- <el-form ref="$form" :model="lineItemInfo" label-position="left" label-width="100px" size="medium">
- <el-row :gutter="20" type="flex" justify="start" align="top" tag="div">
- <el-col :span="12" :offset="0" :push="0" :pull="0" tag="div">
- <el-form-item label="璁惧缂栧彿锛�">
- <j-el-description :value="equipNo" type="primary" ellipsis></j-el-description>
- </el-form-item>
- </el-col>
- <el-col :span="12" :offset="0" :push="0" :pull="0" tag="div">
- <el-form-item label="鏄惁鏈夌洏:">
- <j-el-description :value="lineItemInfo.inStock" type="primary" ellipsis></j-el-description>
- </el-form-item>
- </el-col>
- </el-row>
- <el-row :gutter="20" type="flex" justify="start" align="top" tag="div">
- <el-col :span="12" :offset="0" :push="0" :pull="0" tag="div">
- <el-form-item label="浠诲姟鍙�:">
- <j-el-description :value="lineItemInfo.taskNumm" type="primary" ellipsis></j-el-description>
- </el-form-item>
- </el-col>
- <el-col :span="12" :offset="0" :push="0" :pull="0" tag="div">
- <el-form-item label="鎶ヨ浠ｇ爜锛�">
- <j-el-description :value="lineItemInfo.alarm" type="primary" ellipsis></j-el-description>
- </el-form-item>
- </el-col>
- </el-row>
-
- </el-form><el-divider />
- <h4 style="margin-bottom: 20px;">鎵嬪姩鎿嶄綔</h4>
- <el-form ref="form" :model="form" label-width="100px">
- <el-row :gutter="20" type="flex" justify="start" align="top" tag="div">
- <el-col :span="16" :offset="0" :push="0" :pull="0" tag="div">
- <el-form-item label="浠� 鍔� 鍛� 浠�" prop="TargetAddress">
- <el-select size="large" v-model="form.TaskType" placeholder="璇烽�夋嫨浠诲姟鍛戒护">
- <el-option label="鍏ュ簱" value="1" />
- <el-option label="鍑哄簱" value="2" />
- </el-select>
- </el-form-item>
- </el-col>
- </el-row>
- <el-row :gutter="20" type="flex" justify="start" align="top" tag="div">
- <el-col :span="16" :offset="0" :push="0" :pull="0" tag="div">
- <el-form-item label="涓嬩竴鐩爣鍦板潃:">
- <el-input size="large" v-model="form.TargetAddress" placeholder="璇疯緭鍏ヤ笅涓�鐩爣鍦板潃" />
- </el-form-item>
- </el-col>
- </el-row>
- </el-form>
- <el-divider />
- <el-row :gutter="20" type="flex" justify="start" align="top" tag="div">
- <el-col :span="4" :offset="0" :push="0" :pull="0" tag="div">
- <el-button type="primary" size="small" plain @click="SendCommand">
- <i class="el-icon-check">鍙戦�佸懡浠�</i>
- </el-button>
- </el-col>
- <el-col :span="4" :offset="0" :push="0" :pull="0" tag="div">
- <el-button type="warning" size="small" plain @click="ConveyorLineReset">
- <i class="el-icon-check">澶嶄綅</i>
- </el-button>
-
- </el-col>
- <el-col :span="4" :offset="0" :push="0" :pull="0" tag="div">
- <el-button type="danger" size="small" plain @click="ConveyorLineEmergencyStop">
- <i class="el-icon-check">鍋滄</i>
- </el-button>
- </el-col>
- <el-col :span="4" :offset="0" :push="0" :pull="0" tag="div">
- <el-button type="danger" size="small" plain @click="ConveyorLineReturn">
- <i class="el-icon-check">閫�鍥�</i>
- </el-button>
- </el-col>
- <el-col :span="4" :offset="0" :push="0" :pull="0" tag="div">
- <el-button type="danger" size="small" plain @click="ConveyorLineCancel">
- <i class="el-icon-check">鍙栨秷浠诲姟</i>
- </el-button>
- </el-col>
- <el-col :span="4" :offset="0" :push="0" :pull="0" tag="div">
- <el-button type="danger" size="small" plain @click="ConveyorLineInitialize">
- <i class="el-icon-check">宸ヤ綅鍒濆鍖�</i>
- </el-button>
- </el-col>
- </el-row>
- <template #footer>
- <div class="dialog-footer">
- <el-button @click="dialogVisible = false">鍙栨秷</el-button>
- <el-button type="primary" @click="dialogVisible = false">
- 纭
- </el-button>
+ <el-dialog v-model="dialogVisible" :before-close="handleClose" width="520px" class="modern-dialog">
+ <div class="dialog-header">
+ <h3 class="dialog-title">杈撻�佺嚎淇℃伅</h3>
+ </div>
+ <div class="dialog-content">
+ <div class="info-list">
+ <div class="info-item">
+ <span class="item-label">璁惧缂栧彿</span>
+ <span class="item-value">{{ equipNo || '鏃�' }}</span>
+ </div>
+ <div class="info-item">
+ <span class="item-label">浠诲姟鍙�</span>
+ <span class="item-value">{{ ConveyorLineInfo.TaskNum || '鏃�' }}</span>
+ </div>
+ <div class="info-item">
+ <span class="item-label">鏄惁鏈夌洏</span>
+ <span class="item-value">{{ ConveyorLineInfo.HasGoods || '鏃�' }}</span>
+ </div>
+ <div class="info-item">
+ <span class="item-label">鎵樼洏鏉＄爜</span>
+ <span class="item-value">{{ ConveyorLineInfo.PalletCode || '鏃�' }}</span>
+ </div>
+ <div class="info-item">
+ <span class="item-label">鐘舵��</span>
+ <span :class="['item-value', statusClass]">{{ ConveyorLineInfo.Status || '鏃�' }}</span>
+ </div>
+ <div class="info-item">
+ <span class="item-label">鍛戒护</span>
+ <span class="item-value">{{ ConveyorLineInfo.Command || '鏃�' }}</span>
+ </div>
</div>
- </template>
+ </div>
</el-dialog>
</template>
@@ -140,143 +82,288 @@
left: "500px",
top: "400px",
dialogVisible: false,
- lineItemInfo: {
- inStock: "",
- taskNum: "",
- alarm: "",
+ fullscreenLoading: false,
+ timer1: null,
+ hasGoods: false,
+ isAlarm: false,
+ ConveyorLineInfo: {
+ TaskNum: "",
+ HasGoods: "",
+ Status: "",
+ Command: "",
+ PalletCode: "",
},
form: {
TaskType: "",
TargetAddress: "",
DeviceCode: "",
},
+ Map: {
+ Command: {
+ 0: "鏃犲懡浠�",
+ 1: "闈炲氨缁紙涓嶆墽琛屼笅鍙戝懡浠わ級",
+ 2: "鍙栬揣绔欏彴宸ヤ綅灏辩华锛堟湁鏂欙級",
+ 3: "鏀捐揣绔欏彴宸ヤ綅灏辩华锛堟棤鏂欙級",
+ 4: "鏀捐揣绔欏彴宸ヤ綅灏辩华锛堟湁鏂欙級",
+ 5: "鎵爜宸ヤ綅灏辩华",
+ 6: "浠诲姟宸ヤ綅灏辩华",
+ 7: "鐢宠鏂欐",
+ 8: "鏂欐鍒颁綅",
+ 9: "鎵ц鍛戒护涓�"
+ },
+ Status: {
+ 0: "鑴辨満涓�",
+ 1: "鎵嬪姩寰呮満",
+ 2: "鑷姩寰呮満",
+ 3: "璁惧杩愯",
+ 4: "璁惧鏁呴殰"
+ }
+ },
};
},
mounted() {
- const axisX = (this.positionX - 1) * 40 + 100;
+ const axisX = (this.positionX - 1) * 60 + 100;
const axisY = (this.positionY - 1) + 50;
this.$nextTick(() => {
this.left = `${axisX}px`;
this.top = `${axisY}px`;
});
+ // 鍚姩瀹氭椂鍣紝姣忕鏇存柊涓�娆℃暟鎹�
+ this.timer1 = setInterval(() => {
+ this.updateAlarmStatus();
+ }, 1000);
+ },
+ beforeUnmount() {
+ // 娓呴櫎瀹氭椂鍣�
+ if (this.timer1) {
+ clearInterval(this.timer1);
+ this.timer1 = null;
+ }
+ },
+ watch: {
+ '$root.conveyorLineDetails': {
+ handler() {
+ this.updateAlarmStatus();
+ },
+ deep: true,
+ immediate: true
+ }
},
methods: {
+ updateAlarmStatus() {
+ const equipNoStr = String(this.equipNo);
+ if (this.$root.conveyorLineDetails && this.$root.conveyorLineDetails[equipNoStr]) {
+ const rawData = this.$root.conveyorLineDetails[equipNoStr];
+ this.hasGoods = rawData.inStock === '鏄�' || false;
+ // 浣跨敤Home.vue涓凡缁忚绠楀ソ鐨刬sAlarm鍊硷紝鎴栬�呮牴鎹姸鎬佸垽鏂�
+ this.isAlarm = rawData.isAlarm || (rawData.status === 4) || false;
+ // 瀹炴椂鏇存柊瀵硅瘽妗嗕腑鐨勬暟鎹�
+ this.ConveyorLineInfo = {
+ TaskNum: rawData.taskNum || rawData.TaskNum || '鏃�',
+ HasGoods: (rawData.taskNum && rawData.taskNum !== '鏃�' && rawData.taskNum !== '0') ? '鏄�' : '鍚�',
+ Status: rawData.status || rawData.Status || '鏃�',
+ Command: rawData.command || rawData.Command || '鏃�',
+ PalletCode: rawData.palletCode || rawData.PalletCode || '鏃�',
+ };
+ // 灏嗗懡浠や唬鐮佽浆鎹负瀵瑰簲鐨勪腑鏂囨弿杩�
+ if (this.ConveyorLineInfo.Command !== '' && this.ConveyorLineInfo.Command !== '鏃�') {
+ const commandCode = parseInt(this.ConveyorLineInfo.Command);
+ if (!isNaN(commandCode) && this.Map.Command && this.Map.Command[commandCode] !== undefined) {
+ this.ConveyorLineInfo.Command = this.Map.Command[commandCode];
+ }
+ }
+ // 灏嗙姸鎬佷唬鐮佽浆鎹负瀵瑰簲鐨勪腑鏂囨弿杩�
+ if (this.ConveyorLineInfo.Status !== '' && this.ConveyorLineInfo.Status !== '鏃�') {
+ const statusCode = parseInt(this.ConveyorLineInfo.Status);
+ if (!isNaN(statusCode) && this.Map.Status && this.Map.Status[statusCode] !== undefined) {
+ this.ConveyorLineInfo.Status = this.Map.Status[statusCode];
+ }
+ }
+ } else {
+ this.hasGoods = false;
+ this.isAlarm = false;
+ }
+ },
mouseClick() {
this.fullscreenLoading = true;
this.dialogVisible = true;
- // 澶勭悊鐐瑰嚮浜嬩欢
- this.http.post("api/DeviceInfo/GetConveyorLineInfo?DeviceChildCode=" + this.equipNo, null, "")
- .then((x) => {
- if (x.status) {
- this.lineItemInfo = x.data;
- } else {
- this.$message({
- type: "error",
- message: x.message,
- });
- }
- });
+ // 浠庡叏灞�鍙橀噺涓幏鍙栬緭閫佺嚎璇︾粏淇℃伅
+ if (this.$root.conveyorLineDetails && this.$root.conveyorLineDetails[this.equipNo]) {
+ // 鍏堣幏鍙栧師濮嬫暟鎹�
+ const rawData = this.$root.conveyorLineDetails[this.equipNo];
+ // 澶嶅埗鏁版嵁鍒癈onveyorLineInfo锛堟ā鏉夸腑缁戝畾鐨勫璞★級
+ this.ConveyorLineInfo = {
+ TaskNum: rawData.taskNum || rawData.TaskNum || '鏃�',
+ HasGoods: (rawData.taskNum && rawData.taskNum !== '鏃�' && rawData.taskNum !== '0') ? '鏄�' : '鍚�',
+ Status: rawData.status || rawData.Status || '鏃�',
+ Command: rawData.command || rawData.Command || '鏃�',
+ PalletCode: rawData.palletCode || rawData.PalletCode || '鏃�',
+ };
+
+ // 灏嗗懡浠や唬鐮佽浆鎹负瀵瑰簲鐨勪腑鏂囨弿杩�
+ if (this.ConveyorLineInfo.Command !== '' && this.ConveyorLineInfo.Command !== '鏃�') {
+ const commandCode = parseInt(this.ConveyorLineInfo.Command);
+ if (!isNaN(commandCode) && this.Map.Command && this.Map.Command[commandCode] !== undefined) {
+ this.ConveyorLineInfo.Command = this.Map.Command[commandCode];
+ }
+ }
+
+ // 灏嗙姸鎬佷唬鐮佽浆鎹负瀵瑰簲鐨勪腑鏂囨弿杩�
+ if (this.ConveyorLineInfo.Status !== '' && this.ConveyorLineInfo.Status !== '鏃�') {
+ const statusCode = parseInt(this.ConveyorLineInfo.Status);
+ if (!isNaN(statusCode) && this.Map.Status && this.Map.Status[statusCode] !== undefined) {
+ this.ConveyorLineInfo.Status = this.Map.Status[statusCode];
+ }
+ }
+
+ // 灏嗘姤璀︿唬鐮佽浆鎹负瀵瑰簲鐨勪腑鏂囨弿杩�
+ if (rawData.alarm !== '' && rawData.alarm !== '鏃�') {
+ const alarmCode = parseInt(rawData.alarm);
+ if (!isNaN(alarmCode) && this.Map.ErrorCode && this.Map.ErrorCode[alarmCode] !== undefined) {
+ this.ConveyorLineInfo.Alarm = this.Map.ErrorCode[alarmCode];
+ }
+ }
+ } else {
+ // 濡傛灉娌℃湁鏁版嵁锛屼娇鐢ㄩ粯璁ゅ��
+ this.ConveyorLineInfo = {
+ TaskNum: '',
+ HasGoods: '',
+ Status: '',
+ Command: '',
+ PalletCode: '',
+ };
+ }
+ this.fullscreenLoading = false;
+ },
+ handleClose() {
+ this.dialogVisible = false;
this.fullscreenLoading = false;
},
- SendCommand() {
- this.fullscreenLoading = true;
- this.form.DeviceCode=this.equipNo;
- this.http.post("api/DeviceInfo/ConveyorLineHandTask" ,this.form)
- .then((x) => {
- if (!x.status) {
- this.$message.error(x.message);
- } else {
- this.$Message.success(x.message);
- }
- })
- .finally(() => {
- this.fullscreenLoading = false;
- });
- },
- ConveyorLineReset() {
- this.fullscreenLoading = true;
- this.http.post("api/DeviceInfo/ConveyorLineReset?DeviceChildCode=" + this.equipNo, null, "")
- .then((x) => {
- if (!x.status) {
- this.$message.error(x.message);
- } else {
- this.$Message.success(x.message);
+ // SendCommand() {
+ // this.fullscreenLoading = true;
+ // this.form.DeviceCode=this.equipNo;
+ // this.http.post("api/DeviceInfo/ConveyorLineHandTask" ,this.form)
+ // .then((x) => {
+ // if (!x.status) {
+ // this.$message.error(x.message);
+ // } else {
+ // this.$Message.success(x.message);
+ // }
+ // })
+ // .finally(() => {
+ // this.fullscreenLoading = false;
+ // });
+ // },
+ // ConveyorLineReset() {
+ // this.fullscreenLoading = true;
+ // this.http.post("api/DeviceInfo/ConveyorLineReset?DeviceChildCode=" + this.equipNo, null, "")
+ // .then((x) => {
+ // if (!x.status) {
+ // this.$message.error(x.message);
+ // } else {
+ // this.$Message.success(x.message);
- }
- })
- .finally(() => {
- this.fullscreenLoading = false;
- });
- },
- ConveyorLineEmergencyStop() {
- this.fullscreenLoading = true;
- this.http.post("api/DeviceInfo/ConveyorLineEmergencyStop?DeviceChildCode=" + this.equipNo, null, "")
- .then((x) => {
- if (!x.status) {
- this.$message.error(x.message);
- } else {
- this.$Message.success(x.message);
+ // }
+ // })
+ // .finally(() => {
+ // this.fullscreenLoading = false;
+ // });
+ // },
+ // ConveyorLineEmergencyStop() {
+ // this.fullscreenLoading = true;
+ // this.http.post("api/DeviceInfo/ConveyorLineEmergencyStop?DeviceChildCode=" + this.equipNo, null, "")
+ // .then((x) => {
+ // if (!x.status) {
+ // this.$message.error(x.message);
+ // } else {
+ // this.$Message.success(x.message);
- }
- })
- .finally(() => {
- this.fullscreenLoading = false;
- });
- },
- ConveyorLineReturn() {
- this.fullscreenLoading = true;
- this.http.post("api/DeviceInfo/ConveyorLineReturn?DeviceChildCode=" + this.equipNo, null, "")
- .then((x) => {
- if (!x.status) {
- this.$message.error(x.message);
- } else {
- this.$Message.success(x.message);
- }
- })
- .finally(() => {
- this.fullscreenLoading = false;
- });
- },
- ConveyorLineCancel() {
- this.fullscreenLoading = true;
- this.http.post("api/DeviceInfo/ConveyorLineCancel?DeviceChildCode=" + this.equipNo, null, "")
- .then((x) => {
- if (!x.status) {
- this.$message.error(x.message);
- } else {
- this.$Message.success(x.message);
- }
- })
- .finally(() => {
- this.fullscreenLoading = false;
- });
- },
- ConveyorLineInitialize() {
- this.fullscreenLoading = true;
- this.http.post("api/DeviceInfo/ConveyorLineInitialize?DeviceChildCode=" + this.equipNo, null, "")
- .then((x) => {
- if (!x.status) {
- this.$message.error(x.message);
- } else {
- this.$Message.success(x.message);
- }
- })
- .finally(() => {
- this.fullscreenLoading = false;
- });
- },
- update() {
- return !this.condition ? 'custom-img' : 'custom-img-color'
- },
+ // }
+ // })
+ // .finally(() => {
+ // this.fullscreenLoading = false;
+ // });
+ // },
+ // ConveyorLineReturn() {
+ // this.fullscreenLoading = true;
+ // this.http.post("api/DeviceInfo/ConveyorLineReturn?DeviceChildCode=" + this.equipNo, null, "")
+ // .then((x) => {
+ // if (!x.status) {
+ // this.$message.error(x.message);
+ // } else {
+ // this.$Message.success(x.message);
+ // }
+ // })
+ // .finally(() => {
+ // this.fullscreenLoading = false;
+ // });
+ // },
+ // ConveyorLineCancel() {
+ // this.fullscreenLoading = true;
+ // this.http.post("api/DeviceInfo/ConveyorLineCancel?DeviceChildCode=" + this.equipNo, null, "")
+ // .then((x) => {
+ // if (!x.status) {
+ // this.$message.error(x.message);
+ // } else {
+ // this.$Message.success(x.message);
+ // }
+ // })
+ // .finally(() => {
+ // this.fullscreenLoading = false;
+ // });
+ // },
+ // ConveyorLineInitialize() {
+ // this.fullscreenLoading = true;
+ // this.http.post("api/DeviceInfo/ConveyorLineInitialize?DeviceChildCode=" + this.equipNo, null, "")
+ // .then((x) => {
+ // if (!x.status) {
+ // this.$message.error(x.message);
+ // } else {
+ // this.$Message.success(x.message);
+ // }
+ // })
+ // .finally(() => {
+ // this.fullscreenLoading = false;
+ // });
+ //},
startTimer() {
// 寮�鍚畾鏃跺櫒锛屾瘡3绉掓墽琛屼竴娆�
this.timer1 = setInterval(() => {
- update();
- }, 500);
+ this.updateAlarmStatus();
+ }, 1000);
},
},
+ computed: {
+ update() {
+ if (this.isAlarm) {
+ return 'custom-img-alarm';
+ }
+ // 浣跨敤涓枃鐘舵�佸�煎垽鏂�
+ const statusText = this.ConveyorLineInfo.Status;
+ // 鐘舵�佷负鎵嬪姩寰呮満鏃讹紝鏃犺鏈夋棤鐩橀兘鏄剧ず钃濊壊
+ if (statusText === '鎵嬪姩寰呮満') {
+ return 'custom-img-blue';
+ }
+ // 鐘舵�佷负鑷姩寰呮満鎴栬澶囪繍琛屼笖鏈夌洏鏃舵樉绀虹豢鑹�
+ if ((statusText === '鑷姩寰呮満' || statusText === '璁惧杩愯') && (this.hasGoods || this.ConveyorLineInfo.HasGoods === '鏄�')) {
+ return 'custom-img-color';
+ }
+ return 'custom-img';
+ },
+ statusClass() {
+ const statusText = this.ConveyorLineInfo.Status;
+ if (statusText === '鎵嬪姩寰呮満') {
+ return 'status-blue';
+ } else if (statusText === '鑷姩寰呮満' || statusText === '璁惧杩愯') {
+ return 'status-green';
+ } else if (statusText === '璁惧鏁呴殰') {
+ return 'status-red';
+ }
+ return '';
+ }
+ }
});
</script>
@@ -295,6 +382,42 @@
text-align: center;
}
+.custom-img-alarm {
+ position: relative;
+ display: inline-block;
+ background-color: #ff0000;
+ color: white;
+ text-align: center;
+}
+
+.custom-img-blue {
+ position: relative;
+ display: inline-block;
+ background-color: #409eff;
+ color: white;
+ text-align: center;
+}
+
+.custom-img-blue img {
+ width: 80px;
+ height: 50px;
+}
+
+.custom-img-alarm img {
+ width: 80px;
+ height: 50px;
+}
+
+.custom-img img {
+ width: 80px;
+ height: 50px;
+}
+
+.custom-img-color img {
+ width: 80px;
+ height: 50px;
+}
+
/* .custom-img-color::before {
content: "";
position: absolute;
@@ -307,19 +430,117 @@
} */
.custom-img img {
- width: 40px;
- height: 40px;
+ width: 80px;
+ height: 50px;
}
.custom-img-color img {
- width: 40px;
- height: 40px;
+ width: 80px;
+ height: 50px;
}
.equip-no {
position: absolute;
- top: 15px;
- font-size: 12px;
- margin-left: -35px;
+ top: 50%;
+ left: 50%;
+ transform: translate(-50%, -50%);
+ font-size: 25px;
+ text-align: center;
+ width: 100%;
+}
+
+.modern-dialog {
+ border-radius: 16px !important;
+ overflow: hidden;
+ box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
+}
+
+.modern-dialog .el-dialog__header {
+ display: none;
+}
+
+.modern-dialog .el-dialog__body {
+ padding: 0;
+ margin: 0;
+}
+
+.dialog-header {
+ background: linear-gradient(135deg, #409eff 0%, #67c23a 100%);
+ padding: 20px 24px;
+ text-align: center;
+}
+
+.dialog-title {
+ color: #fff;
+ font-size: 18px;
+ font-weight: 600;
+ margin: 0;
+ letter-spacing: 2px;
+}
+
+.dialog-content {
+ padding: 28px;
+ background: #f8fafc;
+ display: flex;
+ justify-content: center;
+}
+
+.info-list {
+ width: 100%;
+ max-width: 420px;
+ display: flex;
+ flex-direction: column;
+ gap: 12px;
+}
+
+.info-item {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ padding: 16px 20px;
+ background: #fff;
+ border-radius: 12px;
+ box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
+ transition: all 0.3s ease;
+}
+
+.info-item:hover {
+ transform: translateX(4px);
+ box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
+}
+
+.item-label {
+ font-size: 14px;
+ color: #6b7280;
+ font-weight: 500;
+ min-width: 80px;
+ text-align: left;
+}
+
+.item-value {
+ font-size: 15px;
+ color: #1f2937;
+ font-weight: 500;
+ text-align: right;
+ flex: 1;
+ margin-left: 20px;
+ word-break: break-all;
+ padding-left: 20px;
+ border-left: 1px solid #e5e7eb;
+}
+
+.status-blue {
+ color: #409eff !important;
+ font-weight: 600;
+}
+
+.status-green {
+ color: #67c23a !important;
+ font-weight: 600;
+}
+
+.status-red {
+ color: #f56c6c !important;
+ font-weight: 600;
}
</style>
--
Gitblit v1.9.3