From e1281f6933755e07c7fb4b5bd8e8027cfb780e94 Mon Sep 17 00:00:00 2001
From: MrShi <1878285526@qq.com>
Date: 星期四, 27 十一月 2025 17:06:43 +0800
Subject: [PATCH] 改bug
---
screen/src/views/KeyCabinet.vue | 109 ++++++++++++++++++++++++++++++++++++++++--------------
1 files changed, 80 insertions(+), 29 deletions(-)
diff --git a/screen/src/views/KeyCabinet.vue b/screen/src/views/KeyCabinet.vue
index 85ff37e..ccecbb0 100644
--- a/screen/src/views/KeyCabinet.vue
+++ b/screen/src/views/KeyCabinet.vue
@@ -59,7 +59,7 @@
</div>
<div class="tabs">
<div class="tab" :class="type1 === 0 ? 'active' : ''" @click="clickOneItem(0)">杩�7澶�</div>
- <div class="separate"> 锝� </div>
+ <div class="separate"> </div>
<div class="tab" :class="type1 === 1 ? 'active' : ''" @click="clickOneItem(1)">杩�15澶�</div>
</div>
<img src="@/assets/images/task/title@2x.png" class="bg" alt="" />
@@ -75,7 +75,7 @@
</div>
<div class="tabs">
<div class="tab" :class="type2 === 0 ? 'active' : ''" @click="clickTwoItem(0)">杩�7澶�</div>
- <div class="separate"> 锝� </div>
+ <div class="separate"> </div>
<div class="tab" :class="type2 === 1 ? 'active' : ''" @click="clickTwoItem(1)">杩�15澶�</div>
</div>
<img src="@/assets/images/task/title@2x.png" class="bg" alt="" />
@@ -122,6 +122,7 @@
<div class="header line">
<span class="item">杞︾墝鍙�</span>
<span class="item">棰嗗彇浜�</span>
+ <span class="item">棰嗗彇鏃堕棿</span>
<span class="item">褰掕繕鏃堕棿</span>
<span class="item">鐘舵��</span>
<span class="item">澶囨敞</span>
@@ -131,6 +132,7 @@
<div class="line one-swiper-slide swiper-slide item" v-for="(item, i) in data5" :key="i">
<span class="item">{{item.carCode}}</span>
<span class="item">{{item.memberName}}</span>
+ <span class="item">{{item.createDate}}</span>
<span class="item">{{item.returnDate || '-'}}</span>
<span class="item">
<span v-if="item.status === 0" style="color: #FEAF01;">鏈綊杩�</span>
@@ -139,14 +141,11 @@
</span>
<span class="item">{{item.remark || '-'}}</span>
</div>
+ <div v-if="data5.length == 0" class="empty_wrap" style="margin-top: 50px;">
+ <img src="@/assets/images/default_empty.png" alt="">
+ </div>
</div>
</div>
-<!-- <template>-->
-<!-- <Loading />-->
-<!-- <div class="empty">-->
-<!-- <img src="@/assets/images/default_nodata.png" alt="">-->
-<!-- </div>-->
-<!-- </template>-->
</div>
</div>
</div>
@@ -189,21 +188,21 @@
<div class="icon" :style="{ background: `linear-gradient(270deg, ${colors[0].color1} 0%, ${colors[0].color2} 100%)` }"></div>
<div class="text">閰掔簿妫�娴嬪憡璀�</div>
</div>
- <div class="num">{{fenbu.alcoholNum}}娆★綔{{fenbu.alcoholNumPct}}%</div>
+ <div class="num" :style="{ color: '#01ABFE' }">{{fenbu.alcoholNum}}娆★綔{{fenbu.alcoholNumPct}}%</div>
</div>
<div class="item1">
<div class="line">
<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">{{fenbu.timeOutNum}}娆★綔{{fenbu.timeOutNumPct}}%</div>
+ <div class="num" :style="{ color: '#FEAF01' }">{{fenbu.timeOutNum}}娆★綔{{fenbu.timeOutNumPct}}%</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">{{fenbu.unCloseNum}}娆★綔{{fenbu.unCloseNumPct}}%</div>
+ <div class="num" :style="{ color: '#28F0C4' }">{{fenbu.unCloseNum}}娆★綔{{fenbu.unCloseNumPct}}%</div>
</div>
</div>
</div>
@@ -232,19 +231,14 @@
<div class="title">
<img class="xf" src="@/assets/images/FireFighting/ic_gaojing_red@2x.png" alt="">
<span>{{item.content}}</span>
-<!-- <div class="data">-->
-<!-- <img src="@/assets/images/ic_guihao@2x.png" />-->
-<!-- <span>鏌滃彿锛�19</span>-->
-<!-- </div>-->
</div>
</div>
- <!-- <div class="status">澶勭悊涓�</div> -->
</div>
</div>
</div>
-<!-- <div v-if="data7.length == 0" class="empty_wrap" style="margin-top: 50px;">-->
-<!-- <img src="@/assets/images/default_empty.png" alt="">-->
-<!-- </div>-->
+ <div v-if="alarm.length == 0" class="empty_wrap" style="margin-top: 50px;">
+ <img src="@/assets/images/default_empty.png" alt="">
+ </div>
</div>
</div>
</div>
@@ -359,7 +353,7 @@
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])
}
- dataList5.value = [res.data.alcoholNum, res.data.unCloseNum, res.data.timeOutNum]
+ dataList5.value = [res.data.alcoholNum, res.data.timeOutNum, res.data.unCloseNum]
nextTick(() => {
initEchart1()
})
@@ -433,6 +427,7 @@
itemStyle: {
borderRadius: 10,
color: function(params) {
+ console.log(params)
// 浣跨敤涓嶅悓鐨勬笎鍙樿壊
let colorList = [
{offset: 0, color: colors[params.dataIndex].color1}, // 0% 澶勭殑棰滆壊
@@ -473,21 +468,38 @@
myChart.setOption({
tooltip: {
trigger: 'axis',
- axisPointer: {
- type: 'line'
- },
+ backgroundColor: 'transparent',
+ borderColor: 'transparent',
+ borderWidth: 0,
+ padding: 0,
+ formatter: function(params) {
+ return `
+ <div style="position: relative;padding: 16px;box-sizing: border-box;background: rgba(17,34,74,0.6);border-radius: 4px;border: 1px solid rgba(1,217,254,0.29);">
+ <div style="position: absolute;top: 0;left: 0;width: 10px;height: 10px;border-left: 1px solid #01D9FE;border-top: 1px solid #01D9FE;"></div>
+ <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: #00F2F3;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>
+ </div>
+ `;
+ }
},
xAxis: {
type: 'category',
boundaryGap: false,
axisLabel: {
- color: '#D2E0FF'
+ color: '#D2E0FF',
+ rotate: 45 // 鏃嬭浆45搴�
},
data: data4.value.map(i => i.name)
},
yAxis: {
type: 'value',
name: '鍗曚綅锛氳締',
+ minInterval: 1,
nameTextStyle: {
padding: [0, 0, 0, -16], // 鍥涗釜鏁板瓧鍒嗗埆涓轰笂鍙充笅宸︿笌鍘熶綅缃窛绂�
color: '#D2E0FF'
@@ -502,7 +514,8 @@
splitNumber: 4
},
axisLabel: {
- color: '#D2E0FF'
+ color: '#D2E0FF',
+ formatter: '{value}'
}
},
grid: {
@@ -581,6 +594,16 @@
var myChart = echarts.init(document.querySelector('.three_two_chat'))
myChart.setOption({
+ legend: {
+ top: '5%',
+ right: '2%',
+ itemWidth: 16,
+ itemHeight: 4,
+ itemGap: 50,
+ textStyle: {
+ color: '#D2E0FF'
+ }
+ },
grid: {
top: '20%',
left: '6%',
@@ -589,20 +612,46 @@
containLabel: true
},
tooltip: {
- trigger: 'axis'
+ trigger: 'axis',
+ backgroundColor: 'transparent',
+ borderColor: 'transparent',
+ borderWidth: 0,
+ padding: 0,
+ formatter: function(params) {
+ return `
+ <div style="position: relative;padding: 16px;box-sizing: border-box;background: rgba(17,34,74,0.6);border-radius: 4px;border: 1px solid rgba(1,217,254,0.29);">
+ <div style="position: absolute;top: 0;left: 0;width: 10px;height: 10px;border-left: 1px solid #01D9FE;border-top: 1px solid #01D9FE;"></div>
+ <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: 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>
+ <div style="display: flex; align-items: center;margin-top: 4px;">
+ <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>
+ </div>
+ `;
+ }
},
xAxis: {
type: 'category',
axisLabel: {
- color: '#D2E0FF'
+ color: '#D2E0FF',
+ rotate: 45 // 鏃嬭浆45搴�
},
data: data2.value.map(i => i.name)
},
yAxis: {
type: 'value',
- name: '鍗曚綅锛歬',
+ name: '鍗曚綅锛氫釜',
+ minInterval: 1,
axisLabel: {
- color: '#D2E0FF'
+ color: '#D2E0FF',
+ formatter: '{value}'
},
nameTextStyle: {
color: '#D2E0FF',
@@ -618,6 +667,7 @@
},
series: [
{
+ name: '棰嗗彇',
data: data2.value.map(i => i.num),
type: 'bar',
barWidth: 10,
@@ -635,6 +685,7 @@
}
},
{
+ name: '褰掕繕',
data: data2.value.map(i => i.nextNum),
type: 'bar',
barWidth: 10,
--
Gitblit v1.9.3