From 7cdea6d16a8b9f74800792ea412ad8b51c4df7f4 Mon Sep 17 00:00:00 2001
From: jiangping <jp@doumee.com>
Date: 星期二, 22 十月 2024 17:48:38 +0800
Subject: [PATCH] 最新版本541200007
---
screen/src/views/LogisticsEfficiency.vue | 135 ++++++++++++++++++++++++++++++++++++--------
1 files changed, 109 insertions(+), 26 deletions(-)
diff --git a/screen/src/views/LogisticsEfficiency.vue b/screen/src/views/LogisticsEfficiency.vue
index 2026b8a..ea14ba6 100644
--- a/screen/src/views/LogisticsEfficiency.vue
+++ b/screen/src/views/LogisticsEfficiency.vue
@@ -1,9 +1,8 @@
<template>
- <v-scale-screen width="1920" height="960" :fullScreen="true">
+ <v-scale-screen width="1920" height="960">
<div class="main_app">
<img src="@/assets/images/energy_ef/bg@2x.png" class="main_bg" alt="" />
<div class="main_header">
- <!-- <img src="@/assets/images/maintitle.gif" class="main_header_bg" alt="" /> -->
<img src="@/assets/images/maintitle@2x.png" class="main_header_bg" alt="" />
<div class="title">瀹夋嘲鏅烘収鐗╂祦鍥尯-璋冨害鑳芥晥璺熻釜</div>
<div class="time_wrap">
@@ -183,24 +182,57 @@
</div>
<div class="list">
<div class="item">
- <div class="icon"></div>
- <div class="text">鍚堣偉鍘�</div>
- <div class="num">100涓囨敮 | 55%</div>
+ <div class="line">
+ <div :style="{ background: colors[0] }" class="icon"></div>
+ <div class="text">鍚堣偉鍘�</div>
+ </div>
+ <div :style="{ color: colors[0] }" class="num">100涓囨敮 | 55%</div>
</div>
<div class="item">
- <div :style="{ background: colors[0] }" class="icon"></div>
- <div class="text">闆嗘暎涓績</div>
- <div class="num">100涓囨敮 | 55%</div>
+ <div class="line">
+ <div :style="{ background: colors[1] }" class="icon"></div>
+ <div class="text">闆嗘暎涓績</div>
+ </div>
+ <div :style="{ color: colors[1] }" class="num">100涓囨敮 | 55%</div>
</div>
<div class="item">
- <div :style="{ background: colors[1] }" class="icon"></div>
- <div class="text">甯傚叕鍙�</div>
- <div class="num">100涓囨敮 | 55%</div>
+ <div class="line">
+ <div :style="{ background: colors[2] }" class="icon"></div>
+ <div class="text">甯傚叕鍙�</div>
+ </div>
+ <div :style="{ color: colors[2] }" class="num">100涓囨敮 | 55%</div>
</div>
</div>
</div>
</div>
- <div class="right_box_three"></div>
+ <div class="right_box_three">
+ <div class="com_header">
+ <div class="title">
+ <img src="@/assets/images/ic_title@2x.png" class="icon" alt="" />
+ <div>搴撳瓨鎯呭喌</div>
+ </div>
+ <img src="@/assets/images/title@2x.png" class="bg" alt="" />
+ </div>
+ <div class="repertory">
+ <div class="use_ratio">
+ <div class="header">
+ <div>搴撳瓨閲� <span class="num">80/100</span></div>
+ <div>鍒╃敤鐜� 88%</div>
+ </div>
+ <Percent :rate="80" />
+ </div>
+ <div class="list">
+ <div class="item">
+ <div class="la">榛勫北(鏂板埗鐨栫儫)</div>
+ <div class="val">400涓囨敮</div>
+ </div>
+ <div class="item">
+ <div class="la">榛勫北(鏂板埗鐨栫儫)</div>
+ <div class="val">400涓囨敮</div>
+ </div>
+ </div>
+ </div>
+ </div>
</div>
</div>
</div>
@@ -210,7 +242,9 @@
<script setup>
import { ref, onMounted } from 'vue'
import VScaleScreen from 'v-scale-screen'
+import Percent from '@/components/percent.vue'
import dayjs from 'dayjs'
+
import * as echarts from 'echarts'
const colors = ['#FEAF01', '#01ABFE', '#51F9E4']
const weekMap = ['鏄熸湡鏃�', '鏄熸湡涓�', '鏄熸湡浜�', '鏄熸湡涓�', '鏄熸湡鍥�', '鏄熸湡浜�', '鏄熸湡鍏�',]
@@ -666,13 +700,14 @@
.echart_wrap {
position: relative;
+
.pie_text {
width: 104px;
height: 104px;
border: 1px dashed;
border-radius: 50%;
position: absolute;
-
+
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
@@ -682,7 +717,8 @@
justify-content: center;
align-items: center;
font-size: 14px;
- .fs30{
+
+ .fs30 {
font-size: 30px;
}
}
@@ -697,20 +733,67 @@
margin-left: 36px;
.item {
- display: flex;
- align-items: center;
- margin: 8px 0;
+ margin-bottom: 14px;
+ font-size: 14px;
- .icon {
- width: 16px;
- height: 16px;
- border-radius: 50%;
- margin-right: 6px;
- background: linear-gradient(270deg, #29aeff 0%, #207ff7 100%);
+ &:nth-last-child(1) {
+ margin: 0;
}
- .text {
- margin-right: 6px;
+ .line {
+ display: flex;
+ align-items: center;
+ margin-bottom: 6px;
+
+ .icon {
+ width: 12px;
+ height: 12px;
+ border-radius: 50%;
+ margin-right: 10px;
+ background: linear-gradient(270deg, #29aeff 0%, #207ff7 100%);
+ }
+ }
+
+ .num {
+ margin-left: 20px;
+ }
+ }
+ }
+ }
+ }
+
+ .right_box_three {
+ .repertory {
+ .header {
+ padding: 15px;
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ font-size: 14px;
+ color: #D2E0FF;
+ margin-bottom: 11px;
+ .num {
+ font-weight: 500;
+ font-size: 16px;
+ color: #FFFFFF;
+ }
+ }
+ .list{
+ margin-top: 22px;
+ .item{
+ width: 100%;
+ height: 36px;
+ display: flex;
+ align-items: center;
+ &:nth-of-type(2n+1){
+ background: rgba(0,152,255,0.13);
+ }
+ .la{
+ flex: 5;
+ padding-left: 20px;
+ }
+ .val{
+ flex: 2;
}
}
}
@@ -832,7 +915,7 @@
color: #FFFFFF;
position: relative;
z-index: -2;
-
+ font-size: 14px;
.main_bg {
position: absolute;
left: 0;
--
Gitblit v1.9.3