From 4ba7f2446b3331444f2db737e83c5bcbc3b7fb5b Mon Sep 17 00:00:00 2001
From: guoxing <1369478551@qq.com>
Date: Thu, 16 Nov 2023 18:15:12 +0800
Subject: [PATCH] 2023-11-16

---
 src/views/echarts/barlineEacharts.vue |   2 +-
 src/views/echarts/pieLineEacharts.vue |  18 +-
 src/views/mortgage/index.vue          | 281 ++++++++++++++++++++------
 3 files changed, 225 insertions(+), 76 deletions(-)

diff --git a/src/views/echarts/barlineEacharts.vue b/src/views/echarts/barlineEacharts.vue
index 7935a0d..6616aae 100644
--- a/src/views/echarts/barlineEacharts.vue
+++ b/src/views/echarts/barlineEacharts.vue
@@ -113,7 +113,7 @@ export default {
 			 name: '人民币/元',
 			 min: 10000,
 			 max: 25000000,
-			 interval: 2000000,
+			 interval: 5000000,
 			 axisLabel: {
 			   formatter: '{value} 元',
 			   textStyle: {
diff --git a/src/views/echarts/pieLineEacharts.vue b/src/views/echarts/pieLineEacharts.vue
index 4d95c7c..428ac57 100644
--- a/src/views/echarts/pieLineEacharts.vue
+++ b/src/views/echarts/pieLineEacharts.vue
@@ -80,12 +80,12 @@ export default {
         text: this.chartData.pledgeRatePercent+"%",
         subtext: "质押率 " + this.chartData.bankPledgeRate + "%",
         textStyle:{
-            fontSize:18,
+            fontSize:14,
             color:this.chartData.state == '2' ? "#ff7e4b" : "#ccc"
 						
         },
         subtextStyle: {
-            fontSize: 16,
+            fontSize: 12,
             color: '#bbbaba'
         },
         textAlign:"center",
@@ -108,26 +108,26 @@ export default {
 		 y: 'center',
 		 x:"right",
         orient: 'vertical',
-        left:'62%',
+        left:'60%',
         align:'left',
-        top:'80',
+        top:'30',
         itemGap:30,
         padding:[20,0,20,10],
         textStyle: {
             color:'#fff',
-            fontSize:20,
-            padding:[0,10]
+            fontSize:14,
+            padding:[0,5]
         },
         height:'auto',
-        itemWidth:20,
-        itemHeight:20
+        itemWidth:15,
+        itemHeight:15
     },
     series: [
         {
             name:'标签',
             type:'pie',
             center: ['31%', '50%'],
-            radius: ['30%', '55%'],
+            radius: ['30%', '50%'],
              clockwise: false, //饼图的扇区是否是顺时针排布
             avoidLabelOverlap: false,
             label: {
diff --git a/src/views/mortgage/index.vue b/src/views/mortgage/index.vue
index 76e6cd2..cfd21bb 100644
--- a/src/views/mortgage/index.vue
+++ b/src/views/mortgage/index.vue
@@ -47,51 +47,7 @@
 					</div>
 				</div>
 				<div class="mortgage_top_item_cons">
-					<div class="mortgage_top_item_cons_left">
-						<div class="mortgage_top_item_top">
-							<img src="@/assets/mprtgage/WarehousePlan.png" alt="" />
-							<img src="@/assets/mprtgage/camera.jpg" class="mortgage_top_item_top_btn1"
-								@click="cameraClock(0)" />
-							<img src="@/assets/mprtgage/camera.jpg" class="mortgage_top_item_top_btn2"
-								@click="cameraClock(1)" />
-							<img src="@/assets/mprtgage/camera.jpg" class="mortgage_top_item_top_btn3"
-								@click="cameraClock(2)" />
-							<img src="@/assets/mprtgage/camera.jpg" class="mortgage_top_item_top_btn4"
-								@click="cameraClock(3)" />
-
-
-						</div>
-						<div class="mortgage_top_item_bom">
-							<div class="mortgage_top_item_bom_left">
-								<div class="mortgage_top_item_bom_left_item">
-									<span>
-										<svg-icon slot="prefix" icon-class="video" class="el-input__icon"
-											style="height: 16px; width: 16px" />
-									</span>
-									视频监控
-								</div>
-							</div>
-							<div class="mortgage_top_item_bom_right">
-								<div class="mortgage_top_item_bom_right_item">
-									正常<span>
-										<svg-icon slot="prefix" icon-class="diannao" class="el-input__icon"
-											style="height: 16px; width: 16px" />
-									</span>
-									<p>{{StatusCountInfo.online==''||StatusCountInfo.online==null?'0':StatusCountInfo.online}}
-									</p>
-								</div>
-								<div class="mortgage_top_item_bom_right_item">
-									离线<span>
-										<svg-icon slot="prefix" icon-class="diannao" class="el-input__icon"
-											style="height: 16px; width: 16px" />
-									</span>
-									<p>{{StatusCountInfo.offline==''||StatusCountInfo.offline==null?'0':StatusCountInfo.offline}}
-									</p>
-								</div>
-							</div>
-						</div>
-					</div>
-					<div class="mortgage_top_item_cons_right">
+						<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>
@@ -109,8 +65,8 @@
 								</div>
 							</div>
 						</div>
-						<div class="mortgage_top_item_cons_right_bom">
-							<div class="titele">
+						<!-- <div class="mortgage_top_item_cons_right_bom"> -->
+							<!-- <div class="titele">
 								<div class="titele_left">
 									<span>
 										<svg-icon icon-class="alarm" class="el-input__icon"
@@ -139,7 +95,7 @@
 									</div>
 
 								</div>
-							</div>
+							</div> -->
 							<!-- <div class="containers"  @mouseenter="mEnter" @mouseleave="mLeave" :style="{ transform: `translate(0px,-${scrollTop}px)` }">
 								<div class="container_item2">
 									2023-10-19&nbsp;&nbsp;20:05:16&nbsp;&nbsp;&nbsp;&nbsp;<span
@@ -155,8 +111,104 @@
 									2023-10-16&nbsp;&nbsp;15:26:12&nbsp;&nbsp;&nbsp;&nbsp;<span>365国润三通道摄像头离线</span>
 								</div>
 							</div> -->
+						<!-- </div> -->
+					</div>
+				
+				<div class="mortgage_top_item_cons_left">
+					<div class="mortgage_top_item_top">
+						<img src="@/assets/mprtgage/WarehousePlan.png" alt="" />
+						<img src="@/assets/mprtgage/camera.jpg" class="mortgage_top_item_top_btn1"
+							@click="cameraClock(0)" />
+						<img src="@/assets/mprtgage/camera.jpg" class="mortgage_top_item_top_btn2"
+							@click="cameraClock(1)" />
+						<img src="@/assets/mprtgage/camera.jpg" class="mortgage_top_item_top_btn3"
+							@click="cameraClock(2)" />
+						<img src="@/assets/mprtgage/camera.jpg" class="mortgage_top_item_top_btn4"
+							@click="cameraClock(3)" />
+				
+				
+					</div>
+					
+					<div class="mortgage_top_item_cons_right_bom">
+						<div class="titele">
+							<div class="titele_left">
+								<span>
+									<svg-icon icon-class="alarm" class="el-input__icon"
+										style="height: 16px; width: 16px" />
+								</span>
+								告警信息
+							</div>
+							<div class="titele_right"></div>
 						</div>
+					
+						<div class="banner">
+							<div class="scroll-list">
+					
+								<div class="container_item2">
+									2023-10-19&nbsp;&nbsp;20:05:16&nbsp;&nbsp;&nbsp;&nbsp;<span
+										class="container_item-tetxt2">365国润四通道摄像头离线解除</span>
+								</div>
+								<div class="container_item1">
+									2023-10-19&nbsp;&nbsp;19:33:21&nbsp;&nbsp;&nbsp;&nbsp;<span>365国润四通道摄像头离线</span>
+								</div>
+								<div class="container_item2">
+									2023-10-16&nbsp;&nbsp;16:13:36&nbsp;&nbsp;&nbsp;&nbsp;<span>365国润三通道摄像头离线解除</span>
+								</div>
+								<div class="container_item1">
+									2023-10-16&nbsp;&nbsp;15:26:12&nbsp;&nbsp;&nbsp;&nbsp;<span>365国润三通道摄像头离线</span>
+								</div>
+					
+							</div>
+						</div>
+						<!-- <div class="containers"  @mouseenter="mEnter" @mouseleave="mLeave" :style="{ transform: `translate(0px,-${scrollTop}px)` }">
+							<div class="container_item2">
+								2023-10-19&nbsp;&nbsp;20:05:16&nbsp;&nbsp;&nbsp;&nbsp;<span
+									class="container_item-tetxt2">365国润四通道摄像头离线解除</span>
+							</div>
+							<div class="container_item1">
+								2023-10-19&nbsp;&nbsp;19:33:21&nbsp;&nbsp;&nbsp;&nbsp;<span>365国润四通道摄像头离线</span>
+							</div>
+							<div class="container_item2">
+								2023-10-16&nbsp;&nbsp;16:13:36&nbsp;&nbsp;&nbsp;&nbsp;<span>365国润三通道摄像头离线解除</span>
+							</div>
+							<div class="container_item1">
+								2023-10-16&nbsp;&nbsp;15:26:12&nbsp;&nbsp;&nbsp;&nbsp;<span>365国润三通道摄像头离线</span>
+							</div>
+						</div> -->
 					</div>
+					
+					<!-- <div class="mortgage_top_item_bom">
+						<div class="mortgage_top_item_bom_left">
+							<div class="mortgage_top_item_bom_left_item">
+								<span>
+									<svg-icon slot="prefix" icon-class="video" class="el-input__icon"
+										style="height: 16px; width: 16px" />
+								</span>
+								视频监控
+							</div>
+						</div>
+						<div class="mortgage_top_item_bom_right">
+							<div class="mortgage_top_item_bom_right_item">
+								正常<span>
+									<svg-icon slot="prefix" icon-class="diannao" class="el-input__icon"
+										style="height: 16px; width: 16px" />
+								</span>
+								<p>{{StatusCountInfo.online==''||StatusCountInfo.online==null?'0':StatusCountInfo.online}}
+								</p>
+							</div>
+							<div class="mortgage_top_item_bom_right_item">
+								离线<span>
+									<svg-icon slot="prefix" icon-class="diannao" class="el-input__icon"
+										style="height: 16px; width: 16px" />
+								</span>
+								<p>{{StatusCountInfo.offline==''||StatusCountInfo.offline==null?'0':StatusCountInfo.offline}}
+								</p>
+							</div>
+						</div>
+					</div> -->
+				</div>
+				
+				
 				</div>
 			</div>
 		</div>
@@ -788,14 +840,14 @@
 						margin-bottom: 10px;
 						align-items: center;
 						box-sizing: border-box;
-						padding-left: 30px;
-						padding-right: 30px;
+						padding-left: 10px;
+						padding-right: 10px;
 						justify-content: space-between;
 
 						span {
 							color: #49a6e2;
 							font-weight: bold;
-							font-size: 20px;
+							font-size: 18px;
 						}
 					}
 				}
@@ -871,9 +923,109 @@
 					justify-content: space-between;
 
 					.mortgage_top_item_cons_left {
-						width: 58%;
-						height: 100%;
+						width: 38%;
+						height: 80%;
 						position: relative;
+						.mortgage_top_item_cons_right_bom {
+							height: calc(50% - 10px);
+							width: 100%;
+							position: relative;
+							top: 5px;
+						
+							.titele {
+								width: 100%;
+								height: 40px;
+								display: flex;
+								align-items: center;
+						
+								.titele_left {
+									color: #fff;
+									width: auto;
+									height: 100%;
+									line-height: 40px;
+									margin-right: 5px;
+									font-size: 30px;
+									font-weight: 600;
+									font-family: sans-serif;
+								}
+						
+								.titele_right {
+									flex: 1;
+									position: relative;
+									height: 100%;
+						
+									&::after {
+										content: "";
+										position: absolute;
+										bottom: 13px;
+										left: 0px;
+										width: 100%;
+										height: 100%;
+										border-bottom: solid 4px #dadada;
+									}
+								}
+							}
+						
+							.banner {
+								position: relative;
+								/* 父容器需要有明确的高度 */
+								height: 30px;
+								width: 100%;
+								margin: auto;
+								overflow: hidden;
+								display: flex;
+								background: transparent;
+								justify-content: center;
+								flex-wrap: wrap;
+								margin-top: 20px;
+							}
+						
+							.banner>.scroll-list {
+								position: absolute;
+								top: 0;
+								left: 0;
+								width: 100%;
+								animation: scroll 5s linear infinite normal;
+						
+								.container_item1 {
+									width: 100%;
+									height: 30px;
+									line-height: 30px;
+									color: #E43961;
+									font-size: 15px;
+									font-family: '微软雅黑';
+									box-sizing: border-box;
+						
+									span {
+										margin-left: 10px;
+									}
+								}
+						
+								.container_item2 {
+									width: 100%;
+									height: 30px;
+									line-height: 30px;
+									color: #A0D090;
+									font-size: 15px;
+									font-family: '微软雅黑';
+									box-sizing: border-box;
+						
+									span {
+										margin-left: 10px;
+									}
+								}
+							}
+						
+						
+							@keyframes scroll {
+								100% {
+									/* 需要滚动内容的总高度 */
+									top: -180px;
+								}
+							}
+						
+						
+						}
 					}
 
 					.mortgage_top_item_cons_right {
@@ -890,6 +1042,7 @@
 							position: relative;
 
 							.mortgage_top_item_cons_right_top_video {
+								margin-top: 30px;
 								width: 100%;
 								height: 90%;
 								position: relative;
@@ -901,8 +1054,8 @@
 							}
 
 							.mortgage_top_item_cons_right_top_foor {
-								top: 105px;
-								width: 100%;
+								top: -175px;
+								width: 500px;
 								height: 10%;
 								display: flex;
 								position: relative;
@@ -1178,7 +1331,7 @@
 
 		.mortgage_bom {
 			width: 100%;
-			height: calc((100% - 75px) / 2);
+			height: calc((100% - 75px) );
 			display: flex;
 			align-items: center;
 			position: relative;
@@ -1195,12 +1348,10 @@
 					.mortgage_bom_item_cont {
 
 						box-sizing: border-box;
-						padding: 20px;
 
 						.mortgage_bom_item_cont_item {
 							padding-left: 10px;
 							padding-right: 10px;
-							margin-top: 5px;
 
 							&:last-child {
 								border-bottom: none;
@@ -1224,7 +1375,6 @@
 
 					.mortgage_bom_item_cont {
 						box-sizing: border-box;
-						padding-left: 45px;
 
 						.mortgage_bom_item_cont_item {
 							&:last-child {
@@ -1291,7 +1441,7 @@
 
 				.mortgage_bom_item_cont {
 					width: 100%;
-					height: calc(100% - 100px);
+					height: calc(100% - 50px);
 					position: relative;
 
 					.mortgage_bom_item_cont_list {
@@ -1301,7 +1451,6 @@
 
 						.mortgage_bom_item_cont_list_item {
 							width: 100%;
-							margin-top: 15px;
 							height: calc(100% / 5);
 							position: relative;
 							display: flex;
@@ -1315,7 +1464,7 @@
 								align-items: center;
 								color: #0EC0B4;
 								margin-left: 10px;
-								font-size: 20px;
+								font-size: 16px;
 								font-weight: 600;
 								font-family: sans-serif;
 							}
@@ -1328,7 +1477,7 @@
 								align-items: center;
 								justify-content: right;
 								color: #FF7E3F;
-								font-size: 23px;
+								font-size: 18px;
 								font-weight: 600;
 								font-family: sans-serif;
 							}
@@ -1337,7 +1486,7 @@
 
 					.mortgage_bom_item_cont_item {
 						width: 100%;
-						height: calc(100% / 5);
+						height: calc(100% / 7);
 						position: relative;
 						display: flex;
 						border-bottom: solid 1px #dadada;
@@ -1348,7 +1497,7 @@
 							display: flex;
 							align-items: center;
 							color: #0EC0B4;
-							font-size: 20px;
+							font-size: 16px;
 							font-weight: 600;
 							font-family: sans-serif;
 						}
@@ -1360,7 +1509,7 @@
 							align-items: center;
 							justify-content: right;
 							color: #FF7E3F;
-							font-size: 23px;
+							font-size: 18px;
 							font-weight: 600;
 							font-family: sans-serif;
 						}