2023-11-17

src/router/index.js

@@ -62,6 +62,11 @@ export const constantRoutes = [
     path:"/yqpb",
     name:'yqpb',
     component:()=>import('@/views/mortgage/yqpb.vue')
+  },
+	{
+	  path:"/yqpb2",
+	  name:'yqpb2',
+	  component:()=>import('@/views/mortgage/yqpb2.vue')
 	}
   // 404 page must be placed at the end !!!
   // { path: '*', redirect: '/404', hidden: true }

src/views/mortgage/index.vue

@@ -663,7 +663,7 @@
 			position: relative;
 			display: flex;
 			justify-content: space-between;
-			margin-bottom: 40px;
+			margin-bottom: 20px;
 
 			.mortgage_top_item {
 				height: 100%;
@@ -985,7 +985,7 @@
 								top: 0;
 								left: 0;
 								width: 100%;
-								animation: scroll 5s linear infinite normal;
+								animation: scroll 20s linear infinite normal;
 						
 								.container_item1 {
 									width: 100%;
@@ -1054,7 +1054,7 @@
 							}
 
 							.mortgage_top_item_cons_right_top_foor {
-								top: -175px;
+								top: -105%;
 								width: 500px;
 								height: 10%;
 								display: flex;
@@ -1331,7 +1331,7 @@
 
 		.mortgage_bom {
 			width: 100%;
-			height: calc((100% - 75px) );
+			height: calc((100%) );
 			display: flex;
 			align-items: center;
 			position: relative;

src/views/mortgage/yqpb.vue

@@ -90,7 +90,7 @@
 					<div class="cont-box">
 						<el-card class="box-card">
 							<div slot="header" class="clearfix">
-                <span>仓内平面图</span>
+								<span>现场视频</span>
 							</div>
 							<div />
 						</el-card>
@@ -133,6 +133,13 @@
 				</div>
 			</div>
 			<div class="yxt-main-ha">
+
+				<div class="cont-vb">
+					<div class="cont-box">
+						<span class="cont-box-text">仓库平面图</span>
+						<img src="@/assets/mprtgage/yqpb-icon.png"/>
+					</div>
+				</div>
 				<div class="cont-va">
 					<div class="cont-box">
 						<div>
@@ -162,16 +169,6 @@
 						</div>
 					</div>
 				</div>
-        <div class="cont-vb">
-          <div class="cont-box">
-            <el-card class="box-card">
-              <div slot="header" class="clearfix">
-                <span>现场视频</span>
-              </div>
-              <div />
-            </el-card>
-          </div>
-        </div>
 				<div class="cont-va">
 					<div class="cont-box">
 						<div>
@@ -203,6 +200,7 @@
 						</div>
 					</div>
 				</div>
+
 			</div>
 		</div>
 	</div>
@@ -417,6 +415,17 @@
 		padding: 10px;
 		background-color: #031249;
 		position: relative;
+		
+		.cont-box-text{
+			font-size: 25px;
+			font-weight: 600;
+			font-family: sans-serif
+		}
+		img{
+			margin-top: 10px;
+			width: 100%;
+			height: 90%;
+		}
 	}
 
 	.cont-row-title {
@@ -443,7 +452,8 @@
 		padding-left: 20px;
 		padding-right: 20px;
 	}
-  .cont-box-scroll{
+
+	.cont-box-scroll {
 		display: flex;
 		flex-direction: column;
 		justify-content: space-between;
@@ -451,6 +461,7 @@
 		height: 100%;
 		overflow: hidden;
 	}
+
 	.cont-row-scroll {
 		display: flex;
 		flex-direction: row;
@@ -460,6 +471,7 @@
 		padding-left: 20px;
 		padding-right: 20px;
 	}
+
 	.cont-row-item-scroll {
 		display: flex;
 		flex-direction: row;
@@ -469,33 +481,38 @@
 		padding-left: 20px;
 		padding-right: 20px;
 	}
+
 	.cont-box .box-border {
 		position: absolute;
 		width: 2.60417vw;
 		height: 2.60417vw;
 	}
+
 	.border-tl {
 		top: 0;
 		left: 0;
 		border-left: 1px solid #006FB6;
 		border-top: 1px solid #006FB6;
 	}
+
 	.border-tr {
 		top: 0;
 		right: 0;
 		border-top: 1px solid #006FB6;
 		border-right: 1px solid #006FB6;
-}
+	}
-.border-bl {
+
+	.border-bl {
 		bottom: 0;
 		left: 0;
 		border-left: 1px solid #006FB6;
 		border-bottom: 1px solid #006FB6;
-}
+	}
-.border-br {
+
+	.border-br {
 		bottom: 0;
 		right: 0;
 		border-right: 1px solid #006FB6;
 		border-bottom: 1px solid #006FB6;
-}
+	}
 </style>

src/views/mortgage/yqpb2.vue

@@ -0,0 +1,276 @@
+<template>
+	<div class="yxt-containers">
+
+		<span class="title">一起拼搏(汇融惠享项目)</span>
+
+		<div class="layout">
+
+			<div class="layout-left">
+
+				<div class="layout-left-top">
+					<span class="layout-left-top-title">累计订货量</span>
+					
+					<div class="layout-left-top-label">
+						<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>
+					
+				</div>
+					
+					
+				</div>
+				
+				<div class="layout-left-contre">
+					
+				</div>
+				
+				
+				<div class="layout-left-bom">
+					
+				</div>
+				
+				
+			</div>
+
+			<div class="layout-contre">
+
+			</div>
+
+			<div class="layout-right">
+
+			</div>
+
+		</div>
+
+
+	</div>
+</template>
+
+<script>
+	import req from '@/api/gd36524/store'
+	import {
+		zhj_ztsj
+	} from '@/demodata/zhj_ztsj.js'
+	import {
+		zhj_zhpm
+	} from '@/demodata/zhj_zhpm.js'
+	export default {
+		data() {
+			return {
+				ztsj: [],
+				zhpm: []
+			}
+		},
+		created() {
+			this.loadList()
+		},
+		methods: {
+			loadList() {
+				this.ztsj = zhj_ztsj.rows
+				this.zhpm = zhj_zhpm.rows
+				console.log('11', this.ztsj)
+			},
+			getReportInventory() {
+				req.getReportInventory().then(res => {
+					console.log('getReportInventory:', res)
+
+					this.chartData2 = {
+						date: res.data.date,
+						changwencang: res.data.changwencang,
+						gongyinglian: res.data.gongyinglian,
+						cancipin: res.data.cancipin,
+						mendian: res.data.mendian,
+						ycMendian: res.data.ycMendian
+
+					}
+				}).catch(e => {
+					console.log('GdinventoryLog-loadList-ee:', e)
+				})
+			},
+			getInventory() {
+				req.getInventory(this.times).then(res => {
+					console.log('getInventory:', res)
+
+					this.inventoryList = res.data
+				}).catch(e => {
+					console.log('GdinventoryLog-loadList-ee:', e)
+				})
+			},
+			handleCloseJK() {
+				this.dialogImageJK = false
+			},
+			getStatusCount() {
+				req.getStatusCount().then(res => {
+					console.log('getStatusCount:', res)
+					this.StatusCountInfo = res.data
+				}).catch(e => {
+					console.log('GdinventoryLog-loadList-ee:', e)
+				})
+			},
+			getOtherList() {
+				req.getOtherList().then(res => {
+					console.log('getOtherList:', res)
+					this.cameraList = res.data
+
+					this.cameraInfo = res.data[0]
+					this.getVedioPcLiveById(res.data[0].id)
+				}).catch(e => {
+					console.log('GdinventoryLog-loadList-ee:', e)
+				})
+			},
+
+			// 实时
+			getVedioPcLiveById(id) {
+				req.getVedioPcLiveById(id).then(res => {
+					console.log('getVedioPcLiveById:', res)
+					this.spUrl = res.data
+				}).catch(e => {
+					console.log('GdinventoryLog-loadList-ee:', e)
+				})
+			},
+
+			// 回放
+			getVedioPcRecById(id) {
+				req.getVedioPcRecById(id).then(res => {
+					console.log('getVedioPcRecById:', res)
+					this.spUrl = res.data
+				}).catch(e => {
+					console.log('GdinventoryLog-loadList-ee:', e)
+				})
+			},
+
+			selectTime(val) {
+				console.log('val:', val)
+				this.times = val
+				this.loadList()
+				this.getInventory()
+				// this.getOtherList();
+				// this.getStatusCount();
+			},
+
+			cameraClock(index) {
+				var item = this.cameraList[index]
+				this.cameraInfo = item
+				this.getVedioPcLiveById(item.id)
+			},
+
+			cameraType() {
+				console.log('cameraInfo:', this.cameraInfo)
+				this.videos = !this.videos
+
+				if (this.videos) {
+					this.getVedioPcLiveById(this.cameraInfo.id)
+				} else {
+					this.getVedioPcRecById(this.cameraInfo.id)
+				}
+			},
+			clivideo() {
+				// this.lookvideo = true
+
+				this.dialogImageJK = true
+			}
+
+		}
+	}
+</script>
+<style lang="scss" scoped>
+	.yxt-containers {
+		display: flex;
+		background-color: #040C2B;
+		color: #39D6FE;
+		flex-direction: column;
+		width: 100%;
+		height: 100%;
+		margin: 0px;
+		padding: 0px;
+
+		.title {
+			margin-top: 25px;
+			color: #39D6FE;
+			font-size: 30px;
+			margin-left: 20px;
+			font-weight: 1000;
+			font-family: sans-serif;
+		}
+
+		.layout {
+			display: flex;
+			flex-direction: row;
+			padding: 20px;
+			
+			.layout-left{
+				width: 25%;
+				display: flex;
+				flex-direction: column;
+				.layout-left-top{
+					background-color: #031249;
+					display: flex;
+					flex-direction: column;
+					padding: 20px;
+					.layout-left-top-title{
+						font-size: 25px;
+						font-weight: 600;
+						font-family: sans-serif;
+					}
+					.layout-left-top-label{
+						display: flex;
+						flex-direction: row;
+						align-items: center;
+						justify-content: space-between;
+						span{
+							margin-top: 10px;
+							font-size: 20px;
+							font-weight: 600;
+							font-family: sans-serif;
+						}
+
+					}
+					.layout-left-top-list{
+						margin-top: 10px;
+						display: flex;
+						flex-direction: column;
+						.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-contre{
+					margin-top: 15px;
+					background-color: #031249;
+					display: flex;
+					flex-direction: column;
+				}
+				.layout-left-bom{
+					margin-top: 15px;
+					background-color: #031249;
+					display: flex;
+					flex-direction: column;
+				}
+			}
+			.layout-contre{
+				width: 40%;
+			}
+			.layout-right{
+				width: 25%;
+			}
+		}
+	}
+</style>