From 03e3f933f10fb9228eef02c5699b749a501a50e7 Mon Sep 17 00:00:00 2001
From: jiangping <jp@doumee.com>
Date: 星期四, 14 十一月 2024 09:27:54 +0800
Subject: [PATCH] Merge remote-tracking branch 'origin/master'
---
screen/src/views/LogisticsEfficiency.vue | 267 ++++++++++++++++++++++++++++++++++++++++++++++++++++-
1 files changed, 260 insertions(+), 7 deletions(-)
diff --git a/screen/src/views/LogisticsEfficiency.vue b/screen/src/views/LogisticsEfficiency.vue
index 332092e..a04ca3b 100644
--- a/screen/src/views/LogisticsEfficiency.vue
+++ b/screen/src/views/LogisticsEfficiency.vue
@@ -28,7 +28,8 @@
</div>
<div class="content_wrap">
<div class="content">
- <div class="num" v-if="data1.monthOutTotal || data1.yearOutTotal">{{ activeTab1 == 0 ? data1.monthOutTotal.toLocaleString() : data1.yearOutTotal.toLocaleString() }}</div>
+ <div class="num" v-if="data1.monthOutTotal || data1.yearOutTotal">{{ activeTab1 == 0 ?
+ data1.monthOutTotal.toLocaleString() : data1.yearOutTotal.toLocaleString() }}</div>
<div class="unit_wrap" v-if="data1.monthOutTotalOnYear || data1.yearOutTotalOnYear">
<span style="color: #869CC9;">鍚屾瘮</span>
<img
@@ -215,16 +216,74 @@
<div class="repertory">
<div class="use_ratio">
<div class="header">
- <div>搴撳瓨閲� <span class="num">{{data1.stockTotal}}/{{data1.stockMax}}</span></div>
- <div v-if="data1.stockTotal && data1.stockMax">鍒╃敤鐜噞{ ((data1.stockTotal / data1.stockMax) * 100).toFixed(0) }}%</div>
+ <div>搴撳瓨閲� <span class="num">{{ data1.stockTotal }}/{{ data1.stockMax }}</span></div>
+ <div v-if="data1.stockTotal && data1.stockMax">鍒╃敤鐜噞{ ((data1.stockTotal / data1.stockMax) *
+ 100).toFixed(0) }}%</div>
</div>
- <Percent v-if="data1.stockTotal && data1.stockMax" :rate="((data1.stockTotal / data1.stockMax) * 100).toFixed(0)" />
+ <Percent v-if="data1.stockTotal && data1.stockMax"
+ :rate="((data1.stockTotal / data1.stockMax) * 100).toFixed(0)" />
</div>
<div class="list">
<div class="item" v-for="item in dataList6">
<div class="la">{{ item.name }}</div>
- <div class="val">{{item.num}}涓囨敮</div>
+ <div class="val">{{ item.num }}涓囨敮</div>
</div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ <!-- -->
+ <div class="modal" v-if="showModal">
+ <div class="title_head">
+ <img src="@/assets/images/energy_ef/chuku_ic_car@2x.png" alt="">
+ <span>鐨朼222</span>
+ </div>
+ <div class="info">
+ <div class="item">
+ <div class="dian"></div>
+ <div class="la">杩愯緭鍗曞彿锛�</div>
+ <div class="val">22</div>
+ </div>
+ <div class="item">
+ <div class="dian"></div>
+ <div class="la">鍙告満淇℃伅锛�</div>
+ <div class="val">22</div>
+ </div>
+ <div class="item">
+ <div class="dian"></div>
+ <div class="la">鎬昏繍杈撻噺锛�</div>
+ <div class="val">22 涓囨敮</div>
+ </div>
+ </div>
+ <div class="tabs">
+ <div :class="{ active: modalTab == 0 }" @click="modalTabClick(0)" class="tab">浣滀笟淇℃伅</div>
+ <div :class="{ active: modalTab == 1 }" @click="modalTabClick(1)" class="tab">鍚堝悓鍒楄〃</div>
+ </div>
+ <div class="tab1" v-if="modalTab == 0">
+ <div class="item" v-for="item, i in 3">
+ <div class="icon_wrap">
+ <img v-if="i === 0" class="dian" src="@/assets/images/ic_dangqian@2x.png" alt="">
+ <img v-else src="@/assets/images/ic_jindu@2x.png" class="dian_ac" alt="">
+ <div class="line"></div>
+ </div>
+ <div class="content">
+ <div class="status">浣滀笟涓�</div>
+ <div class="text">浣滀笟浠诲姟鍦ㄣ�愬叆搴撳幓1鍙锋湀鍙般�戝紑濮嬩綔涓�</div>
+ <div class="time">2024-04-02 12:00</div>
+ </div>
+ </div>
+ </div>
+ <div class="tab2" v-if="modalTab == 1">
+ <div class="list">
+ <div class="item">
+ <div class="head">
+ <div class="code">鍚堝悓鍙凤細12312312</div>
+ <div class="addr">鏀惰揣鍦帮細姹熼棬鐑熻崏鐗╂祦涓績</div>
+ </div>
+ <div class="line" v-for="i in 3">
+ <div class="name">鐗╂枡鍚嶇О锛�<span class="val">榛勫北</span></div>
+ <div class="num">鏁伴噺锛�<span class="val">100涓囨敮</span></div>
</div>
</div>
</div>
@@ -262,7 +321,14 @@
}, 1000)
-const arr = ['#68e2e3', '#50afd3', '#377cdb', '#d5ae3a']
+const showModal = ref(false)
+const modalTab = ref(0)
+const modalTabClick = (val) => {
+ modalTab.value = val
+}
+
+
+
const initEnergy = () => {
var myChart = echarts.init(document.querySelector('.energyRef'))
// 缁樺埗鍥捐〃
@@ -714,7 +780,7 @@
getData5()
getData6()
- initMap()
+ initMap()
})
@@ -1155,6 +1221,7 @@
height: 240px;
overflow: auto;
scrollbar-width: none;
+
.item {
width: 100%;
height: 36px;
@@ -1309,6 +1376,192 @@
}
}
+.modal {
+ width: 600px;
+ height: 556px;
+ background: rgba(0, 30, 63, 0.5);
+ backdrop-filter: blur(5px);
+ position: fixed;
+ top: 20%;
+ left: 50%;
+ transform: translate(-50%, 0);
+ z-index: 99;
+ padding: 24px;
+
+ .title_head {
+ display: flex;
+ align-items: center;
+ font-weight: bold;
+ font-size: 17px;
+ margin-bottom: 20px;
+
+ img {
+ width: 20px;
+ margin-right: 4px;
+ }
+ }
+
+ .info {
+ display: flex;
+ flex-wrap: wrap;
+
+ .item {
+ display: flex;
+ align-items: center;
+ font-size: 13px;
+ width: 55%;
+ margin-bottom: 8px;
+
+ &:nth-of-type(2n+1) {
+ width: 45%;
+ }
+
+ .dian {
+ width: 4px;
+ height: 4px;
+ background-color: #fff;
+ border-radius: 50%;
+ margin-right: 4px;
+ }
+
+ .la {
+ color: #01D9FE;
+ }
+ }
+ }
+
+ .tabs {
+ display: flex;
+ border-bottom: 1px solid rgba(255, 255, 255, 0.16);
+ margin: 0 -24px;
+ margin-bottom: 20px;
+ padding-left: 12px;
+
+ .tab {
+ color: #869CC9;
+ font-size: 14px;
+ margin-right: 12px;
+ width: 80px;
+ height: 42px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ border-bottom: 2px solid #06182e;
+ cursor: pointer;
+ }
+
+ .active {
+ font-weight: 500;
+ font-size: 15px;
+ color: #00F2F3;
+ border-bottom: 2px solid #00F2F3;
+ }
+ }
+
+ .tab1 {
+ .item {
+ display: flex;
+
+ &:nth-last-child(1) {
+ .content {
+ .time {
+ padding-bottom: 0;
+ }
+ }
+ }
+
+ .icon_wrap {
+ width: 24px;
+ margin-right: 10px;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+
+ .dian {
+ width: 12px;
+ height: 12px;
+ }
+
+ .dian_ac {
+ width: 24px;
+ height: 24px;
+ }
+
+ .line {
+ width: 1px;
+ height: 100%;
+ border: 1px dashed #8a9bc5;
+ }
+ }
+
+ .content {
+ font-size: 13px;
+ color: #D2E0FF;
+
+ .status {
+ font-weight: 500;
+ font-size: 14px;
+ margin-bottom: 5px;
+ color: #fff;
+ }
+
+ .text {
+ margin-bottom: 4px;
+ }
+
+ .time {
+ font-size: 12px;
+ padding-bottom: 12px;
+ }
+ }
+ }
+ }
+
+ .tab2 {
+ .list {
+ .item {
+ width: 560px;
+ background: rgba(1, 171, 254, 0.1);
+ font-size: 12px;
+ color: #D2E0FF;
+ padding: 10px;
+ margin-bottom: 10px;
+ .head {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ height: 36px;
+ line-height: 36px;
+ border-bottom: 1px solid rgba(255,255,255,0.16);
+ margin-bottom: 10px;
+ .code {
+ font-weight: 500;
+ font-size: 14px;
+ color: #00F2F3;
+ }
+ }
+ .line{
+ display: flex;
+ align-items: center;
+ margin-bottom: 8px;
+ &:nth-last-child(1){
+ margin-bottom: 0;
+ }
+ .name{
+ flex: 4;
+ }
+ .num{
+ flex: 3;
+ }
+ .val{
+ color: #fff;
+ }
+ }
+ }
+ }
+ }
+}
+
.bg {
position: absolute;
left: 0;
--
Gitblit v1.9.3