From 2b390ceb13d2eed8d8eec064fb161eb7af3680f8 Mon Sep 17 00:00:00 2001
From: guoxing <1369478551@qq.com>
Date: Fri, 17 Nov 2023 10:42:50 +0800
Subject: [PATCH] 2023-11-17

---
 src/views/echarts/pieLineEacharts.vue |  16 +-
 src/views/mortgage/index.vue          |  27 ++-
 src/views/mortgage/yqpb2.vue          | 294 ++++++++++++++++++++++----
 3 files changed, 275 insertions(+), 62 deletions(-)

diff --git a/src/views/echarts/pieLineEacharts.vue b/src/views/echarts/pieLineEacharts.vue
index 428ac57..4c3d30a 100644
--- a/src/views/echarts/pieLineEacharts.vue
+++ b/src/views/echarts/pieLineEacharts.vue
@@ -80,17 +80,17 @@ export default {
         text: this.chartData.pledgeRatePercent+"%",
         subtext: "质押率 " + this.chartData.bankPledgeRate + "%",
         textStyle:{
-            fontSize:14,
+            fontSize:10,
             color:this.chartData.state == '2' ? "#ff7e4b" : "#ccc"
 						
         },
         subtextStyle: {
-            fontSize: 12,
+            fontSize: 10,
             color: '#bbbaba'
         },
         textAlign:"center",
-        x: '30.5%',
-        y: '43%',
+        x: '30%',
+        y: '35%',
     }],
     tooltip: {
         trigger: 'item',
@@ -110,8 +110,8 @@ export default {
         orient: 'vertical',
         left:'60%',
         align:'left',
-        top:'30',
-        itemGap:30,
+        top:'0',
+        itemGap:10,
         padding:[20,0,20,10],
         textStyle: {
             color:'#fff',
@@ -126,8 +126,8 @@ export default {
         {
             name:'标签',
             type:'pie',
-            center: ['31%', '50%'],
-            radius: ['30%', '50%'],
+            center: ['31%', '45%'],
+            radius: ['50%', '70%'],
              clockwise: false, //饼图的扇区是否是顺时针排布
             avoidLabelOverlap: false,
             label: {
diff --git a/src/views/mortgage/index.vue b/src/views/mortgage/index.vue
index 06b7a5f..b188bfa 100644
--- a/src/views/mortgage/index.vue
+++ b/src/views/mortgage/index.vue
@@ -1,5 +1,5 @@
 <template style="height:100%;overflow-y: auto;">
-	<div class="mortgage" style="min-height:100%;overflow-y: auto;">
+	<div class="mortgage" style="overflow-y: auto;">
 		<div class="mortgage_tit">国大36524项目</div>
 		<div class="mortgage_top">
 			<div class="mortgage_top_item">
@@ -19,7 +19,7 @@
 				</div>
 				<div class="mortgage_top_item_coner">
 					<div class="mortgage_top_item_coner_eat">
-						<pieLineEachartsVue :width="`100%`" :height="`100%`" :chartData="chartData">
+						<pieLineEachartsVue :width="`100%`" :height="`80%`" :chartData="chartData">
 						</pieLineEachartsVue>
 					</div>
 					<div class="mortgage_top_item_coner_con">
@@ -50,7 +50,7 @@
 						<div class="mortgage_top_item_cons_right">
 						<div class="mortgage_top_item_cons_right_top">
 							<div class="mortgage_top_item_cons_right_top_video">
-								<iframe :src="spUrl" width="500" height="300" id="ysOpenDevice" allowfullscreen>
+								<iframe :src="spUrl" width="500" height="250" id="ysOpenDevice" allowfullscreen>
 								</iframe>
 							</div>
 							<div class="mortgage_top_item_cons_right_top_foor">
@@ -263,7 +263,7 @@
 					</div>
 				</div>
 				<div class="mortgage_bom_item_cont">
-					<barlineEachartsVue :width="`100%`" :height="'270px'" :chartData="chartData2"></barlineEachartsVue>
+					<barlineEachartsVue :width="`100%`" :height="'180px'" :chartData="chartData2"></barlineEachartsVue>
 				</div>
 			</div>
 			<div class="mortgage_bom_item" style="margin-left: 32px;padding-right: 30px;">
@@ -659,7 +659,7 @@
 
 		.mortgage_top {
 			width: 100%;
-			height: 60%;
+			height: 52%;
 			position: relative;
 			display: flex;
 			justify-content: space-between;
@@ -824,7 +824,7 @@
 
 				.mortgage_top_item_coner {
 					width: 100%;
-					height: calc(100% - 40px);
+					height: calc(100% - 110px);
 					position: relative;
 
 					.mortgage_top_item_coner_eat {
@@ -854,7 +854,7 @@
 
 				.mortgage_top_item_top {
 					width: 100%;
-					height: 85%;
+					height: 75%;
 					position: relative;
 
 					img {
@@ -977,7 +977,7 @@
 								background: transparent;
 								justify-content: center;
 								flex-wrap: wrap;
-								margin-top: 20px;
+								margin-top: 10px;
 							}
 						
 							.banner>.scroll-list {
@@ -1331,7 +1331,7 @@
 
 		.mortgage_bom {
 			width: 100%;
-			height: calc((100%) );
+			height: 45%;
 			display: flex;
 			align-items: center;
 			position: relative;
@@ -1447,14 +1447,13 @@
 					.mortgage_bom_item_cont_list {
 						width: 100%;
 						height: calc(100% / 6);
-						padding-top: 15px;
-
+						margin-top: 5px;
 						.mortgage_bom_item_cont_list_item {
 							width: 100%;
-							height: calc(100% / 5);
+							height: 35px;
 							position: relative;
 							display: flex;
-							padding-bottom: 20px;
+							padding-bottom: 5px;
 							border-bottom: solid 1px #dadada;
 
 							.mortgage_bom_item_cont_list_item_left {
@@ -1486,7 +1485,7 @@
 
 					.mortgage_bom_item_cont_item {
 						width: 100%;
-						height: calc(100% / 7);
+						height: 35px;
 						position: relative;
 						display: flex;
 						border-bottom: solid 1px #dadada;
diff --git a/src/views/mortgage/yqpb2.vue b/src/views/mortgage/yqpb2.vue
index 45e5622..64c1d5a 100644
--- a/src/views/mortgage/yqpb2.vue
+++ b/src/views/mortgage/yqpb2.vue
@@ -9,42 +9,112 @@
 
 				<div class="layout-left-top">
 					<span class="layout-left-top-title">累计订货量</span>
-					
+
 					<div class="layout-left-top-label">
-						<span >品类</span>
+						<span>品类</span>
 						<span>数量(单位：公斤/升)</span>
 					</div>
-					
-				<div v-for="(item,index) in ztsj" :index="index" class="layout-left-top-list">
-					
-					<div class="layout-left-top-list-item">
-						<span class="layout-left-top-list-name" >{{ item.typeName }}</span>
-						<span class="layout-left-top-list-value">{{ item.allData }}</span>
+
+					<div v-for="(item,index) in ztsj" :index="index" class="layout-left-top-list">
+
+						<div class="layout-left-top-list-item">
+							<span class="layout-left-top-list-name">{{ item.typeName }}</span>
+							<span class="layout-left-top-list-value">{{ item.allData }}</span>
+						</div>
+
 					</div>
-					
-				</div>
-					
-					
+
+
 				</div>
-				
+
 				<div class="layout-left-contre">
-					
+
+					<span class="layout-left-contre-title">上月订货量</span>
+
+					<div class="layout-left-contre-label">
+						<span>品类</span>
+						<span>数量(单位：公斤/升)</span>
+					</div>
+
+					<div v-for="(item,index) in ztsj" :index="index" class="layout-left-contre-list">
+
+						<div class="layout-left-contre-list-item">
+							<span class="layout-left-contre-list-name">{{ item.typeName }}</span>
+							<span class="layout-left-contre-list-value">{{ item.allMonthPre }}</span>
+						</div>
+
+					</div>
+
 				</div>
-				
-				
+
+
 				<div class="layout-left-bom">
-					
+
+					<span class="layout-left-bom-title">本月订货量</span>
+
+					<div class="layout-left-bom-label">
+						<span>品类</span>
+						<span>数量(单位：公斤/升)</span>
+						<span>增长量</span>
+					</div>
+
+					<div v-for="(item,index) in ztsj" :index="index" class="layout-left-bom-list">
+
+						<div class="layout-left-bom-list-item">
+							<span class="layout-left-bom-list-name">{{ item.typeName }}</span>
+							<span class="layout-left-bom-list-value">{{ item.allMonthPre }}</span>
+							<span class="layout-left-bom-list-growth">{{ item.allMonthIncrement }}</span>
+						</div>
+
+					</div>
 				</div>
-				
-				
+
+
 			</div>
 
 			<div class="layout-contre">
 
+				<div class="layout-contre-top">
+
+					<span>现场视频</span>
+					
+					<div class="layout-contre-top-title">
+						<span >通道一</span>
+						<div class="layout-contre-top-title-show">
+						
+							<span @click="cameraType" style="margin-right: 5px;">{{videos?"监控回放":'实时监控'}}</span>
+						
+							<svg-icon icon-class="huifang" class="el-input__icon"
+								style="height: 16px; width: 16px" @click="clivideo" />
+						</div>
+					</div>
+
+					<div class="layout-contre-top_video">
+						<iframe :src="spUrl" width="100%" height="350px" id="ysOpenDevice" allowfullscreen>
+						</iframe>
+					</div>
+
+
+				</div>
+
+				<div class="layout-contre-bom">
+
+				</div>
+
 			</div>
 
 			<div class="layout-right">
 
+
+
+				<div class="layout-right-contre">
+
+				</div>
+
+				<div class="layout-right-bom">
+
+				</div>
+
 			</div>
 
 		</div>
@@ -64,6 +134,7 @@
 	export default {
 		data() {
 			return {
+				videos:false,
 				ztsj: [],
 				zhpm: []
 			}
@@ -204,73 +275,216 @@
 			display: flex;
 			flex-direction: row;
 			padding: 20px;
-			
-			.layout-left{
+
+			.layout-left {
 				width: 25%;
 				display: flex;
 				flex-direction: column;
-				.layout-left-top{
+
+				.layout-left-top {
 					background-color: #031249;
 					display: flex;
 					flex-direction: column;
 					padding: 20px;
-					.layout-left-top-title{
+
+					.layout-left-top-title {
 						font-size: 25px;
 						font-weight: 600;
 						font-family: sans-serif;
 					}
-					.layout-left-top-label{
+
+					.layout-left-top-label {
 						display: flex;
 						flex-direction: row;
 						align-items: center;
 						justify-content: space-between;
-						span{
-							margin-top: 10px;
+
+						span {
+							margin-top: 20px;
 							font-size: 20px;
 							font-weight: 600;
 							font-family: sans-serif;
 						}
 
 					}
-					.layout-left-top-list{
+
+					.layout-left-top-list {
 						margin-top: 10px;
 						display: flex;
 						flex-direction: column;
-						.layout-left-top-list-item{
+
+						.layout-left-top-list-item {
 							display: flex;
 							margin-top: 5px;
 							margin-bottom: 5px;
 							flex-direction: row;
 							align-items: center;
 							justify-content: space-between;
-							.layout-left-top-list-name{
-								
-							}
-							.layout-left-top-list-value{
-								
-							}
+
+							.layout-left-top-list-name {}
+
+							.layout-left-top-list-value {}
 						}
 					}
 				}
-				.layout-left-contre{
-					margin-top: 15px;
+
+				.layout-left-contre {
+					margin-top: 20px;
 					background-color: #031249;
 					display: flex;
 					flex-direction: column;
+					padding: 20px;
+
+					.layout-left-contre-title {
+						font-size: 25px;
+						font-weight: 600;
+						font-family: sans-serif;
+					}
+
+					.layout-left-contre-label {
+						display: flex;
+						flex-direction: row;
+						align-items: center;
+						justify-content: space-between;
+
+						span {
+							margin-top: 20px;
+							font-size: 20px;
+							font-weight: 600;
+							font-family: sans-serif;
+						}
+
+					}
+
+					.layout-left-contre-list {
+						margin-top: 10px;
+						display: flex;
+						flex-direction: column;
+
+						.layout-left-contre-list-item {
+							display: flex;
+							margin-top: 5px;
+							margin-bottom: 5px;
+							flex-direction: row;
+							align-items: center;
+							justify-content: space-between;
+
+							.layout-left-contre-list-name {}
+
+							.layout-left-contre-list-value {}
+						}
+					}
 				}
-				.layout-left-bom{
+
+				.layout-left-bom {
 					margin-top: 15px;
 					background-color: #031249;
 					display: flex;
 					flex-direction: column;
+					padding: 20px;
+
+					.layout-left-bom-title {
+						font-size: 25px;
+						font-weight: 600;
+						font-family: sans-serif;
+					}
+
+					.layout-left-bom-label {
+						display: flex;
+						flex-direction: row;
+						align-items: center;
+						justify-content: space-between;
+
+						span {
+							margin-top: 20px;
+							font-size: 20px;
+							font-weight: 600;
+							font-family: sans-serif;
+						}
+
+					}
+
+					.layout-left-bom-list {
+						margin-top: 10px;
+						display: flex;
+						flex-direction: column;
+
+						.layout-left-bom-list-item {
+							display: flex;
+							margin-top: 5px;
+							margin-bottom: 5px;
+							flex-direction: row;
+							align-items: center;
+							justify-content: space-between;
+
+							.layout-left-bom-list-name {}
+
+							.layout-left-bom-list-value {}
+
+							.layout-left-bom-list-growth {}
+						}
+					}
 				}
 			}
-			.layout-contre{
-				width: 40%;
+
+			.layout-contre {
+				width: 45%;
+				margin-left: 30px;
+				display: flex;
+				flex-direction: column;
+
+				.layout-contre-top {
+					background-color: #031249;
+					display: flex;
+					flex-direction: column;
+					padding: 20px;
+
+					span {
+						font-size: 25px;
+						font-weight: 600;
+						font-family: sans-serif;
+					}
+					.layout-contre-top-title{
+						display: flex;
+						margin-top: 10px;
+						padding-left: 10px;
+						padding-right: 10px;
+						flex-direction: row;
+						justify-content: space-between;
+						
+						span {
+							font-size: 20px;
+							font-weight: 600;
+							font-family: sans-serif;
+						}
+						
+						.layout-contre-top-title-show{
+							
+						}
+					}
+					
+
+					.layout-contre-top_video {
+						margin-top: 20px;
+					}
+				}
+
+				.layout-contre-bom {
+					margin-top: 20px;
+					background-color: #031249;
+				}
 			}
-			.layout-right{
+
+			.layout-right {
 				width: 25%;
+
+				.layout-right-top {}
+
+				.layout-right-contre {}
+
+				.layout-right-bom {}
 			}
+
 		}
 	}
 </style>
\ No newline at end of file