From ceb66442df7361a0247ebe7a6b12ad04e8b89c8c Mon Sep 17 00:00:00 2001
From: jiangping <jp@doumee.com>
Date: 星期一, 14 十月 2024 09:32:41 +0800
Subject: [PATCH] Merge remote-tracking branch 'origin/master'
---
screen/src/views/LogisticsEfficiency.vue | 231 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++-
1 files changed, 225 insertions(+), 6 deletions(-)
diff --git a/screen/src/views/LogisticsEfficiency.vue b/screen/src/views/LogisticsEfficiency.vue
index 26d9530..2026b8a 100644
--- a/screen/src/views/LogisticsEfficiency.vue
+++ b/screen/src/views/LogisticsEfficiency.vue
@@ -135,8 +135,71 @@
<div class="center_box_two"></div>
</div>
<div class="right_box">
- <div class="right_box_one"></div>
- <div class="right_box_two"></div>
+ <div class="right_box_one">
+ <div class="com_header">
+ <div class="title">
+ <img src="@/assets/images/ic_title@2x.png" class="icon" alt="" />
+ <div>鍑哄叆搴撴晥鐜�</div>
+ </div>
+ <div class="tabs">
+ <div class="tab active">浠婃棩</div>
+ <div class="separate"></div>
+ <div class="tab">鏈湀</div>
+ </div>
+ <img src="@/assets/images/title@2x.png" class="bg" alt="" />
+ </div>
+ <div class="static_wrap">
+ <div class="item">
+ <img src="@/assets/images/energy_ef/ic_chukuxiaolv@2x.png" alt="">
+ <div class="content">
+ <div class="name">鍑哄簱鏁堢巼</div>
+ <div class="num"><span>1000</span>涓囨敮/灏忔椂</div>
+ </div>
+ </div>
+ <div class="item">
+ <img src="@/assets/images/energy_ef/ic_rukuxiaolv@2x.png" alt="">
+ <div class="content">
+ <div class="name">鍏ュ簱鏁堢巼</div>
+ <div class="num"><span class="today">1000</span>涓囨敮/灏忔椂</div>
+ </div>
+ </div>
+ </div>
+ </div>
+ <div class="right_box_two">
+ <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="content">
+ <div class="echart_wrap">
+ <div class="pie_text">
+ <div class="fs30"><strong>300</strong></div>
+ <div>鍏ュ簱鏁伴噺</div>
+ </div>
+ <div class="echart" id="echart1"></div>
+ </div>
+ <div class="list">
+ <div class="item">
+ <div class="icon"></div>
+ <div class="text">鍚堣偉鍘�</div>
+ <div 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>
+ <div class="item">
+ <div :style="{ background: colors[1] }" class="icon"></div>
+ <div class="text">甯傚叕鍙�</div>
+ <div class="num">100涓囨敮 | 55%</div>
+ </div>
+ </div>
+ </div>
+ </div>
<div class="right_box_three"></div>
</div>
</div>
@@ -149,7 +212,7 @@
import VScaleScreen from 'v-scale-screen'
import dayjs from 'dayjs'
import * as echarts from 'echarts'
-
+const colors = ['#FEAF01', '#01ABFE', '#51F9E4']
const weekMap = ['鏄熸湡鏃�', '鏄熸湡涓�', '鏄熸湡浜�', '鏄熸湡涓�', '鏄熸湡鍥�', '鏄熸湡浜�', '鏄熸湡鍏�',]
const date = ref(dayjs().format('YYYY.MM.DD'))
const week = ref(weekMap[new Date().getDay()])
@@ -222,9 +285,42 @@
myChart.resize()
})
}
+const initEchart1 = () => {
+ const myChart = echarts.init(document.getElementById('echart1'))
+ const option = {
+ series: [
+ {
+ type: 'pie',
+ radius: ['86%', '100%'],
+ label: {
+ show: false,
+ position: 'center'
+ },
+ padAngle: 5,
+ itemStyle: {
+ borderRadius: 10
+ },
+ color: colors,
+ labelLine: {
+ show: false
+ },
+ data: [
+ { value: 1048, name: 'Search Engine' },
+ { value: 735, name: 'Direct' },
+ { value: 580, name: 'Email' }
+ ]
+ }
+ ]
+ }
+ myChart.setOption(option)
+ window.addEventListener('resize', function () { // 鎵ц
+ myChart.resize()
+ })
+}
onMounted(() => {
initEnergy()
+ initEchart1()
})
@@ -406,6 +502,7 @@
.center_box {
flex: 1;
padding: 16px 60px;
+
.center_box_one {
.tabs {
display: flex;
@@ -478,7 +575,8 @@
#20FFC5 50%,
#20FFC5 100%);
}
- .finish{
+
+ .finish {
background-image: -webkit-linear-gradient(top,
#fff 0%,
#FFB120 50%,
@@ -489,7 +587,8 @@
}
}
}
- .center_box_two{
+
+ .center_box_two {
width: 100%;
border: 1px solid;
}
@@ -497,6 +596,126 @@
.right_box {
width: 440px;
+
+ .right_box_one {
+ margin-bottom: 20px;
+
+ .static_wrap {
+ display: flex;
+ justify-content: space-evenly;
+ align-items: center;
+ height: 140px;
+
+ .item {
+ display: flex;
+ align-items: center;
+
+ img {
+ width: 80px;
+ height: 80px;
+ margin-right: 5px;
+ }
+
+ .content {
+ font-size: 14px;
+
+ .num {
+ font-size: 12px;
+ color: #D2E0FF;
+ margin-top: 8px;
+
+ span {
+ font-weight: bold;
+ font-size: 24px;
+ margin-right: 4px;
+ font-weight: 600;
+ background-image: -webkit-linear-gradient(top,
+ #01D9FE 0%,
+ #01D9FE 60%,
+ #fff 100%);
+ -webkit-background-clip: text;
+ -webkit-text-fill-color: transparent;
+ }
+
+ .today {
+ background-image: -webkit-linear-gradient(top,
+ #fff 0%,
+ #20FFC5 50%,
+ #20FFC5 100%);
+ }
+
+ .finish {
+ background-image: -webkit-linear-gradient(top,
+ #fff 0%,
+ #FFB120 50%,
+ #FFB120 100%);
+ }
+ }
+ }
+ }
+ }
+ }
+
+ .right_box_two {
+ .content {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ height: 200px;
+ border: 1px solid;
+
+ .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%);
+ z-index: 999;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ font-size: 14px;
+ .fs30{
+ font-size: 30px;
+ }
+ }
+ }
+
+ .echart {
+ width: 140px;
+ height: 140px;
+ }
+
+ .list {
+ margin-left: 36px;
+
+ .item {
+ display: flex;
+ align-items: center;
+ margin: 8px 0;
+
+ .icon {
+ width: 16px;
+ height: 16px;
+ border-radius: 50%;
+ margin-right: 6px;
+ background: linear-gradient(270deg, #29aeff 0%, #207ff7 100%);
+ }
+
+ .text {
+ margin-right: 6px;
+ }
+ }
+ }
+ }
+ }
}
}
@@ -606,7 +825,7 @@
.main_app {
width: 1920px;
- min-height: 960px;
+ height: 960px;
/* width: 100%;
height: 100vh; */
background: #0b2539;
--
Gitblit v1.9.3