From bed0a9bd5abfe4bd5603a6b6b4f1dc8efb0e95e3 Mon Sep 17 00:00:00 2001
From: duanliang <duanliang>
Date: Fri, 20 Dec 2024 11:41:23 +0800
Subject: [PATCH] =?UTF-8?q?feat=20=E5=B7=A5=E5=8D=95=E6=B6=88=E6=81=AF?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/workOrder/components/box-1.vue |   4 +-
 src/views/workOrder/components/box-2.vue |  22 +-
 src/views/workOrder/components/box-3.vue | 401 +++++++++++++++++++++++
 src/views/workOrder/index.vue            |   3 +-
 4 files changed, 419 insertions(+), 11 deletions(-)
 create mode 100644 src/views/workOrder/components/box-3.vue

diff --git a/src/views/workOrder/components/box-1.vue b/src/views/workOrder/components/box-1.vue
index d485e55..59c0c6e 100644
--- a/src/views/workOrder/components/box-1.vue
+++ b/src/views/workOrder/components/box-1.vue
@@ -29,6 +29,8 @@
 		z-index:99;
 		padding:0 vw(20);
 		.list{
+			scrollbar-width: none;
+			scrollbar-color: transparent transparent;
 			height:vh(895);
 			overflow: auto;
 			.li:nth-child(odd){
@@ -71,7 +73,7 @@
 					text-align: left;
 					font-style: normal;
 					text-transform: none;
-					margin-left:vw(50);
+					margin-left:vw(30);
 				}
 				p{
 					font-weight: 400;
diff --git a/src/views/workOrder/components/box-2.vue b/src/views/workOrder/components/box-2.vue
index 1057c18..19378ca 100644
--- a/src/views/workOrder/components/box-2.vue
+++ b/src/views/workOrder/components/box-2.vue
@@ -8,19 +8,19 @@
 			<div class="hd-list">
 				<img class="h-icon" src="@/assets/images/work-icon-1.png" alt="" />
 				<div class="item item1">
-					今日工单总条数 <span class="color1">456789</span>
+					今日工单总条数 <span class="color1"><countup endVal="45678" /></span>
 				</div>
 				<div class="item item1">
-					工单完成数 <span class="color1">456789</span>
+					工单完成数 <span class="color1"><countup endVal="45678" /></span>
 				</div>
 				<div class="item item3">
-					紧急工单数 <span class="">456789</span>
+					紧急工单数 <span class=""><countup endVal="45678" /></span>
 				</div>
 				<div class="item item2">
-					重要工单数 <span class="">456789</span>
+					重要工单数 <span class=""><countup endVal="45678" /></span>
 				</div>
 				<div class="item item1">
-					普通工单数 <span class="">456789</span>
+					普通工单数 <span class=""><countup endVal="45678" /></span>
 				</div>
 			</div>
 			<div class="chart-box flex">
@@ -100,8 +100,8 @@
 </template>
 
 <script setup>
-	import * as echarts from 'echarts'
 	import countup from 'vue-countup-v3'
+	import * as echarts from 'echarts'
 	import { fitChartSize } from '@/utils/dataUtil'
 	import Map from '@/components/Map/marker.vue'
 	import VChart, { THEME_KEY } from 'vue-echarts';
@@ -395,7 +395,7 @@
 	    })
 	const optionLine = ref({
 		  backgroundColor:'transparent',
-		  height:250,
+		  height:240,
 		  grid:{
 			top:'30',
 			bottom:'0',
@@ -496,6 +496,9 @@
 		font-size:vw(14) !important;
 		color:#fff;
 	}
+	.line-chart{
+		// margin-top:vh(20);
+	}
 	.work-box-2{
 		width:vw(1522);
 		height:vh(965);
@@ -515,7 +518,7 @@
 				
 				.lt-chart{
 					width:vw(740);
-					height: vw(336);
+					min-height: vw(336);
 					padding:vw(20);
 					background: radial-gradient( 70% at 99% 50%, #0A4190 0%, rgba(0,77,136,0.6) 100%);
 					border-radius: 0px 0px 0px 0px;
@@ -654,6 +657,7 @@
 					height:vh(74);
 				}
 				.item{
+					display:flex;
 					width:vw(210);
 					height:vh(58);
 					line-height: vh(58);
@@ -670,7 +674,7 @@
 						font-size: vw(24);
 						position: relative;
 						top:vh(2);
-						margin-left:vw(2);
+						margin-left:vw(5);
 					}
 					.color1{
 						color:#02F9FA;
diff --git a/src/views/workOrder/components/box-3.vue b/src/views/workOrder/components/box-3.vue
new file mode 100644
index 0000000..42c7ef2
--- /dev/null
+++ b/src/views/workOrder/components/box-3.vue
@@ -0,0 +1,401 @@
+<template>
+	<div class="work-box-3">
+		<!-- 1 -->
+		<div class="work-2-flex">
+			<div class="header">
+			  <div class="title"> <span>消息情况</span> </div>
+			</div>
+			<div class="hd-list">
+				<div class="item item1">
+					工单完成数 <span class="color1"><countup endVal="45678" /></span>
+				</div>
+				<div class="item item3">
+					紧急工单数 <span class=""><countup endVal="45678" /></span>
+				</div>
+				<div class="item item2">
+					重要工单数 <span class=""><countup endVal="45678" /></span>
+				</div>
+				<div class="item item1">
+					普通工单数 <span class=""><countup endVal="45678" /></span>
+				</div>
+			</div>
+			<div class="chart-box flex">
+				<div class="box-item">
+					<v-chart class="line-chart"  :option="option" autoresize />
+				</div>
+				<div class="box-item">
+					<v-chart class="line-chart"  :option="option" autoresize />
+				</div>
+				<div class="box-item">
+					<v-chart class="line-chart"  :option="option" autoresize />
+				</div>
+			</div>
+		</div>
+		<!-- 2 -->
+		<div class="work-box-1">
+			<!-- 最新工单 -->
+			<div class="header">
+			  <div class="title"> <span>最新工单</span> </div>
+			</div>
+			<!-- 列表 -->
+			<div class="list">
+				<div class="li" v-for="item in 40">
+					<span class="label label1">普通</span>
+					<p>这是一条工单信息这是一条工单信息这是一条工单信息这是一条工单信息这是一条</p>
+					<span class="time">2024-12.16 23:58</span>
+				</div>
+			</div>
+		</div>
+	</div>
+</template>
+
+<script setup>
+	import countup from 'vue-countup-v3'
+	import * as echarts from 'echarts'
+	import { fitChartSize } from '@/utils/dataUtil'
+	import Map from '@/components/Map/marker.vue'
+	import VChart, { THEME_KEY } from 'vue-echarts';
+	import { ref, provide } from 'vue';
+	provide(THEME_KEY, 'dark');
+	const option = ref({
+		backgroundColor:'transparent',
+		title: [
+		  {
+		    text: '45.5%',
+		    x: 'center',
+		    top: '34%',
+		    textStyle: {
+		      color: '#00D0FF',
+		      fontSize: fitChartSize(12)
+		    }
+		  },
+		  {
+		    text: '完成率',
+		    x: 'center',
+		    top: '56%',
+		    textStyle: {
+		      color: '#fff',
+		      fontSize: fitChartSize(12)
+		    }
+		  }
+		],
+		series: [
+		  // 内侧环
+		  {
+		    type: 'gauge',
+		    radius: '100%',
+		    center: ['50%', '50%'],
+		    min: 0,
+		    max: 100,
+		    startAngle: 360,
+		    endAngle: 0,
+		    itemStyle: {
+		      color: '#00D0FF'
+		    },
+		    axisLine: {
+		      show: true,
+		      roundCap: false,
+		      lineStyle: {
+		        color: [
+		          [0, '#075199'],
+		          [1, '#075199']
+		        ],
+		        width: fitChartSize(6)
+		      }
+		    },
+		    progress: {
+		      show: true,
+		      roundCap: false,
+		      width: fitChartSize(6)
+		    },
+		    pointer: {
+		      // 指针
+		      show: false
+		    },
+		    axisTick: {
+		      // 刻度
+		      show: false
+		    },
+		    splitLine: {
+		      // 分割线
+		      show: false
+		    },
+		    axisLabel: {
+		      // 刻度标签
+		      show: false
+		    },
+		    detail: {
+		      // 仪表盘详情
+		      show: false
+		    },
+		    data: [
+		      {
+		        value: 50
+		      }
+		    ]
+		  },
+		  {
+		    type: 'gauge',
+		    radius: '95%',
+		    center: ['50%', '50%'],
+		    min: 0,
+		    max: 100,
+		    startAngle: 360,
+		    endAngle: 0,
+		    itemStyle: {
+		      color: '#057EB9'
+		    },
+		    axisLine: {
+		      roundCap: false,
+		      lineStyle: {
+		        color: [
+		          [0, '#075199'],
+		          [1, '#075199']
+		        ],
+		        width: fitChartSize(10)
+		      }
+		    },
+		    progress: {
+		      show: true,
+		      roundCap: false,
+		      width: fitChartSize(10)
+		    },
+		    pointer: {
+		      // 指针
+		      show: false
+		    },
+		    axisTick: {
+		      // 刻度
+		      show: false
+		    },
+		    splitLine: {
+		      // 分割线
+		      show: false
+		    },
+		    axisLabel: {
+		      // 刻度标签
+		      show: false
+		    },
+		    detail: {
+		      // 仪表盘详情
+		      show: false
+		    },
+		    data: [
+		      {
+		        value: 50
+		      }
+		    ]
+		  }
+		]
+	})
+</script>
+
+<style lang="scss" scoped>
+	.work-box-3{
+		width: vw(813);
+		height: vh(380);
+		background: linear-gradient( 321deg, #0B2F64 0%, #062B57 100%);
+		border-radius: 0px 0px 0px 0px;
+		margin-top:vh(100);
+		margin-left:vw(10);
+		position:relative;
+		z-index: 99;
+		.work-box-1{
+			width:vw(815);
+			height:vh(588);
+			// margin-top:vh(100);
+			background: linear-gradient( 321deg, #0B2F64 0%, #062B57 100%);
+			border-radius: 0px 0px 0px 0px;
+			position:relative;
+			z-index:99;
+			padding:0 vw(20);
+			.list{
+				scrollbar-width: none;
+				scrollbar-color: transparent transparent;
+				height:vh(510);
+				overflow: auto;
+				.li:nth-child(odd){
+					background: rgba(3,78,153,0.3);
+					
+				}
+				.li:nth-child(even){
+					background-color: transparent;
+				}
+				.li{
+					display: flex;
+					align-items: center;
+					justify-content: flex-start;
+					padding:vh(8) vh(10);
+					.label{
+						width: vw(60);
+						height: vh(24);
+						line-height:vh(24);
+						color:#fff;
+						border-radius: 2px 2px 2px 2px;
+						font-size: vw(14);
+						text-align: center;
+						display: inline-block;
+						margin-right: vw(10);
+					}
+					.label1{
+						background: #2380FB;
+					}
+					.label2{
+						background: #FEAE00;
+					}
+					.label3{
+						background: #D9011B;
+					}
+					.time{
+						font-weight: 400;
+						font-size: vw(12);
+						color: rgba(255,255,255,0.6);
+						line-height: 14px;
+						text-align: left;
+						font-style: normal;
+						text-transform: none;
+						margin-left:vw(30);
+					}
+					p{
+						font-weight: 400;
+						font-size: vw(15);
+						color: #FFFFFF;
+						text-align: left;
+						font-style: normal;
+						text-transform: none;
+						flex: 1;
+						 /*1. 先强制一行内显示文本*/
+						white-space: nowrap;
+						  /*2. 超出的部分隐藏*/
+						overflow: hidden;
+						  /*3. 文字用省略号替代超出的部分*/
+						text-overflow: ellipsis;
+					}
+				}
+			}
+			.header {
+			  position: relative;
+			  margin:vh(20);
+			  .title {
+			    margin: vh(5) auto;
+			    width: vw(468);
+			    height: vh(32);
+			    font-weight: 800;
+			    font-size: vw(16);
+			    color: #fff;
+			    display: flex;
+			    align-items: center;
+			    justify-content: center;
+			    background-image: url('@/assets/images/title-4.png');
+			    background-size: 100% 100%;
+				span{
+					font-weight: 800;
+					color: transparent;
+					-webkit-background-clip: text;
+					background-clip: text;
+					-webkit-text-fill-color: transparent;
+					background-image: linear-gradient(to bottom, #ffffff 0%, #87c9ff 100%);
+				}
+			  }
+		  }
+		}
+		.work-2-flex{
+			background: linear-gradient( 321deg, #0B2F64 0%, #062B57 100%);
+			height:vh(380);
+			overflow:hidden;
+			.chart-box{
+				display: flex;
+				justify-content: space-between;
+				padding:vw(20) vw(15);
+				height:vh(360);
+				padding-top:vh(35);
+				box-sizing: border-box;
+				.box-item{
+					flex:1;
+					width:vw(150);
+					height:vh(150);
+					padding:vw(10);
+					.line-chart{
+						// width:100%;
+						// height:100%;
+					}
+				}
+			}
+			.header {
+			  position: relative;
+			  margin:vh(20);
+			  
+			  .title {
+				margin: vh(5) auto;
+				width: vw(468);
+				height: vh(32);
+				font-weight: 800;
+				font-size: vw(16);
+				color: #fff;
+				display: flex;
+				align-items: center;
+				justify-content: center;
+				background-image: url('@/assets/images/title-4.png');
+				background-size: 100% 100%;
+				span{
+					font-weight: 800;
+					color: transparent;
+					-webkit-background-clip: text;
+					background-clip: text;
+					-webkit-text-fill-color: transparent;
+					background-image: linear-gradient(to bottom, #ffffff 0%, #87c9ff 100%);
+				}
+			  }
+			}
+			.hd-list{
+				display: flex;
+				justify-content: center;
+				position:relative;
+				.h-icon{
+					position:absolute;
+					left:vw(70);
+					top:50%;
+					transform: translateY(-50%);
+					width:vw(74);
+					height:vh(74);
+				}
+				.item{
+					display:flex;
+					width:vw(210);
+					height:vh(58);
+					line-height: vh(58);
+					padding-left:vw(10);
+					text-align: center;
+					margin:0 vw(15);
+					font-weight: 400;
+					font-size: vw(14);
+					color: rgba(255,255,255,0.9);
+					text-align: left;
+					font-style: normal;
+					text-transform: none;
+					span{
+						font-size: vw(24);
+						position: relative;
+						top:vh(2);
+						margin-left:vw(5);
+					}
+					.color1{
+						color:#02F9FA;
+					}
+				}
+				.item1{
+					background-image: url('@/assets/images/work-n-bg-1.png');
+					background-size: 100% 100%;
+				}
+				.item2{
+					background-image: url('@/assets/images/work-n-bg-2.png');
+					background-size: 100% 100%;
+				}
+				.item3{
+					background-image: url('@/assets/images/work-n-bg-3.png');
+					background-size: 100% 100%;
+				}
+			}
+		}
+	}
+</style>
\ No newline at end of file
diff --git a/src/views/workOrder/index.vue b/src/views/workOrder/index.vue
index 129b84f..d46f2d9 100644
--- a/src/views/workOrder/index.vue
+++ b/src/views/workOrder/index.vue
@@ -3,6 +3,7 @@
     <CoreVideo />
 	<box1/>
 	<box2/>
+	<box3/>
     <Header title="工单消息" is-skip  />
     <Correspondence />
   </main>
@@ -11,7 +12,7 @@
 <script setup>
   import box1 from './components/box-1.vue'
   import box2 from './components/box-2.vue'
-
+  import box3 from './components/box-3.vue'
   onMounted(() => {})
 </script>