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 | 322 ++++++++++++++++++++++++++++++++++++++++++++++++++++-
1 files changed, 312 insertions(+), 10 deletions(-)
diff --git a/screen/src/views/LogisticsEfficiency.vue b/screen/src/views/LogisticsEfficiency.vue
index 26d9530..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">
@@ -135,9 +134,105 @@
<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_three"></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="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 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 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 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>
@@ -147,9 +242,11 @@
<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'
+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 +319,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 +536,7 @@
.center_box {
flex: 1;
padding: 16px 60px;
+
.center_box_one {
.tabs {
display: flex;
@@ -478,7 +609,8 @@
#20FFC5 50%,
#20FFC5 100%);
}
- .finish{
+
+ .finish {
background-image: -webkit-linear-gradient(top,
#fff 0%,
#FFB120 50%,
@@ -489,7 +621,8 @@
}
}
}
- .center_box_two{
+
+ .center_box_two {
width: 100%;
border: 1px solid;
}
@@ -497,6 +630,175 @@
.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 {
+ margin-bottom: 14px;
+ font-size: 14px;
+
+ &:nth-last-child(1) {
+ margin: 0;
+ }
+
+ .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;
+ }
+ }
+ }
+ }
+ }
}
}
@@ -606,14 +908,14 @@
.main_app {
width: 1920px;
- min-height: 960px;
+ height: 960px;
/* width: 100%;
height: 100vh; */
background: #0b2539;
color: #FFFFFF;
position: relative;
z-index: -2;
-
+ font-size: 14px;
.main_bg {
position: absolute;
left: 0;
--
Gitblit v1.9.3