From 3003ab05f20cacea2d1e7d9bd027d26b1813864e Mon Sep 17 00:00:00 2001
From: MrShi <1878285526@qq.com>
Date: 星期三, 03 十二月 2025 09:35:45 +0800
Subject: [PATCH] 优化
---
screen/src/views/KeyCabinet.vue | 33 +++++++++++++++++----------------
1 files changed, 17 insertions(+), 16 deletions(-)
diff --git a/screen/src/views/KeyCabinet.vue b/screen/src/views/KeyCabinet.vue
index 8dbc11f..96ac713 100644
--- a/screen/src/views/KeyCabinet.vue
+++ b/screen/src/views/KeyCabinet.vue
@@ -4,7 +4,7 @@
<img src="@/assets/images/bg.png" class="main_bg" alt="" />
<div class="main_header">
<img src="@/assets/images/maintitle.gif" class="main_header_bg" alt="" />
- <div class="title">閽ュ寵鏌滄暟鎹湅鏉�</div>
+ <div class="title">涓変氦涓�灏佹櫤鑳芥煖</div>
<div class="time_wrap">
<span class="date">{{ date }}</span>
<span class="week">{{ week }}</span>
@@ -95,7 +95,7 @@
<div>閽ュ寵鍙栬繕璁板綍</div>
</div>
<div class="search">
- <div class="search-item" @click.stop="show = true">
+ <div class="search-item" @click.stop="show = !show">
<div class="search-item-label">鐘舵�侊細</div>
<div class="search-item-select">
<span v-if="form.status === ''">鍏ㄩ儴</span>
@@ -176,9 +176,9 @@
</div>
<div class="car_static">
<div class="echart_wrap">
- <div class="pie_text">
- <div class="fs30"><strong>30</strong></div>
- <div style="font-size: 15px; color: rgba(255,255,255,0.8); font-weight: 400;">鍏ュ簱鎬婚噺</div>
+ <div class="pie_text" v-if="fenbu">
+ <div class="fs30"><strong>{{fenbu.alcoholNum + fenbu.unCloseNum + fenbu.timeOutNum}}</strong></div>
+ <div style="font-size: 15px; color: rgba(255,255,255,0.8); font-weight: 400;">鍛婅鎬婚噺</div>
</div>
<div class="echart1" id="echart1"></div>
</div>
@@ -195,14 +195,14 @@
<div class="icon" :style="{ background: `linear-gradient(270deg, ${colors[1].color1} 0%, ${colors[1].color2} 100%)` }"></div>
<div class="text">鏌滈棬鏈叧鍛婅</div>
</div>
- <div class="num" :style="{ color: '#FEAF01' }">{{fenbu.timeOutNum}}娆★綔{{fenbu.timeOutNumPct}}%</div>
+ <div class="num" :style="{ color: '#FEAF01' }">{{fenbu.unCloseNum}}娆★綔{{fenbu.unCloseNumPct}}%</div>
</div>
<div class="item1">
<div class="line">
<div class="icon" :style="{ background: `linear-gradient(270deg, ${colors[2].color1} 0%, ${colors[2].color2} 100%)` }"></div>
<div class="text">瓒呮椂鏈繕鍛婅</div>
</div>
- <div class="num" :style="{ color: '#28F0C4' }">{{fenbu.unCloseNum}}娆★綔{{fenbu.unCloseNumPct}}%</div>
+ <div class="num" :style="{ color: '#28F0C4' }">{{fenbu.timeOutNum}}娆★綔{{fenbu.timeOutNumPct}}%</div>
</div>
</div>
</div>
@@ -329,7 +329,7 @@
getKeyUseRecord({ carCode: form.value.carCode, status: form.value.status })
.then(res => {
if (res.code === 200) {
- // data5.value = res.data
+ data5.value = res.data
}
})
}
@@ -350,8 +350,8 @@
fenbu.value = {
...res.data,
alcoholNumPct: calculatePercentage(res.data.alcoholNum,[res.data.alcoholNum + res.data.timeOutNum + res.data.unCloseNum]),
- timeOutNumPct: calculatePercentage(res.data.timeOutNum,[res.data.alcoholNum + res.data.timeOutNum + res.data.unCloseNum]),
- unCloseNumPct: calculatePercentage(res.data.unCloseNum,[res.data.alcoholNum + res.data.timeOutNum + res.data.unCloseNum])
+ unCloseNumPct: calculatePercentage(res.data.unCloseNum,[res.data.alcoholNum + res.data.timeOutNum + res.data.unCloseNum]),
+ timeOutNumPct: calculatePercentage(res.data.timeOutNum,[res.data.alcoholNum + res.data.timeOutNum + res.data.unCloseNum])
}
dataList5.value = [res.data.alcoholNum, res.data.unCloseNum, res.data.timeOutNum]
nextTick(() => {
@@ -427,6 +427,7 @@
itemStyle: {
borderRadius: 10,
color: function(params) {
+ console.log(params)
// 浣跨敤涓嶅悓鐨勬笎鍙樿壊
let colorList = [
{offset: 0, color: colors[params.dataIndex].color1}, // 0% 澶勭殑棰滆壊
@@ -623,14 +624,14 @@
<div style="position: absolute;bottom: 0;right: 0;width: 10px;height: 10px;border-right: 1px solid #01D9FE;border-bottom: 1px solid #01D9FE;"></div>
<div style="color: #FFFFFF;font-size: 14px;font-weight: 400;">${params[0].axisValue}</div>
<div style="display: flex; align-items: center;margin-top: 4px;">
- <div style="width: 12px;height: 12px;background: #00C2FF;border-radius: 50%;margin-right: 12px;"></div>
+ <div style="width: 12px;height: 12px;background: linear-gradient(to bottom, #50afd3, #1d4861);border-radius: 50%;margin-right: 12px;"></div>
<div style="color: #FFFFFF;font-size: 14px;font-weight: 400;">棰嗗彇锛�</div>
- <div style="color: #00F2F3;font-size: 14px;font-weight: 500;">${params[0].data}涓�</div>
+ <div style="color: #00F2F3;font-size: 14px;font-weight: 500;">${params[0].data}娆�</div>
</div>
<div style="display: flex; align-items: center;margin-top: 4px;">
- <div style="width: 12px;height: 12px;background: #FF8A00;border-radius: 50%;margin-right: 12px;"></div>
+ <div style="width: 12px;height: 12px;background: linear-gradient(to bottom, rgb(255,184,0), rgba(255, 138, 0, 0.20));border-radius: 50%;margin-right: 12px;"></div>
<div style="color: #FFFFFF;font-size: 14px;font-weight: 400;">褰掕繕锛�</div>
- <div style="color: #00F2F3;font-size: 14px;font-weight: 500;">${params[1].data}涓�</div>
+ <div style="color: #00F2F3;font-size: 14px;font-weight: 500;">${params[1].data}娆�</div>
</div>
</div>
`;
@@ -646,7 +647,7 @@
},
yAxis: {
type: 'value',
- name: '鍗曚綅锛氫釜',
+ name: '鍗曚綅锛氭',
minInterval: 1,
axisLabel: {
color: '#D2E0FF',
@@ -1403,7 +1404,7 @@
z-index: 9;
border-radius: 10px;
overflow: hidden;
- background: rgba(0,86,255,0.05);
+ background: rgba(134, 156, 201, 1);
.search-item-select-list-item {
width: 100%;
height: 40px;
--
Gitblit v1.9.3