From 9d66bd86b7c90172e6859706b273e31c099e5d00 Mon Sep 17 00:00:00 2001
From: guoxing <1369478551@qq.com>
Date: Fri, 17 Nov 2023 16:32:46 +0800
Subject: [PATCH] 2023-11-17

---
 src/router/index.js                |    9 +-
 src/views/mortgage/yqpb-原始.vue |  518 +++++++++++
 src/views/mortgage/yqpb.vue        | 1382 +++++++++++++++++++++-------
 src/views/mortgage/yqpb2.vue       |  982 --------------------
 4 files changed, 1551 insertions(+), 1340 deletions(-)
 create mode 100644 src/views/mortgage/yqpb-原始.vue
 delete mode 100644 src/views/mortgage/yqpb2.vue

diff --git a/src/router/index.js b/src/router/index.js
index 5bfa532..daa8d5b 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -58,16 +58,13 @@ export const constantRoutes = [
     path:"/mortgage",
     name:'mortgage',
     component:()=>import('@/views/mortgage/index.vue')
-  },{
+  },
+  {
     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 }
 ]
diff --git a/src/views/mortgage/yqpb-原始.vue b/src/views/mortgage/yqpb-原始.vue
new file mode 100644
index 0000000..29abf9a
--- /dev/null
+++ b/src/views/mortgage/yqpb-原始.vue
@@ -0,0 +1,518 @@
+<template>
+	<div class="yxt-containers">
+		<div class="yxt-header">
+			<h1>一起拼搏(汇融惠享项目)</h1>
+		</div>
+		<div class="yxt-main">
+			<div class="yxt-main-ha">
+				<div class="cont-vb">
+					<div class="cont-box">
+						<div>
+							<h2>累计定货量</h2>
+						</div>
+						<div class="cont-row-title">
+							<div class="cont-row-title-center">
+								<h3>品类</h3>
+							</div>
+							<div class="cont-row-title-center">
+								<h3>数量(单位：公斤/升)</h3>
+							</div>
+						</div>
+						<div v-for="(item,index) in ztsj" :index="index" class="cont-row-item">
+							<div class="cont-row-title-left">
+								<span>{{ item.typeName }}</span>
+							</div>
+							<div class="cont-row-title-left">
+								<span>{{ item.allData }}</span>
+							</div>
+						</div>
+					</div>
+				</div>
+				<div class="cont-va">
+					<div class="cont-box">
+						<div class="box-border border-tl" />
+						<div class="box-border border-tr" />
+						<div class="box-border border-bl" />
+						<div class="box-border border-br" />
+						<div>
+							<h2>上月总定货量</h2>
+						</div>
+						<div class="cont-row-title">
+							<div class="cont-row-title-center">
+								<h3>品类</h3>
+							</div>
+							<div class="cont-row-title-center">
+								<h3>数量(单位：公斤/升)</h3>
+							</div>
+						</div>
+						<div v-for="(item,index) in ztsj" :index="index" class="cont-row-item">
+							<div class="cont-row-title-left">
+								<span>{{ item.typeName }}</span>
+							</div>
+							<div class="cont-row-title-left">
+								<span>{{ item.allMonthPre }}</span>
+							</div>
+						</div>
+					</div>
+				</div>
+				<div class="cont-va">
+					<div class="cont-box">
+						<div>
+							<h2>本月总定货量</h2>
+						</div>
+						<div class="cont-row-title">
+							<div class="cont-row-title-center">
+								<h3>品类</h3>
+							</div>
+							<div class="cont-row-title-center">
+								<h3>数量(单位：公斤/升)</h3>
+							</div>
+							<div class="cont-row-title-center">
+								<h3>增长量</h3>
+							</div>
+						</div>
+						<div v-for="(item,index) in ztsj" :index="index" class="cont-row-item">
+							<div class="cont-row-title-left">
+								<span>{{ item.typeName }}</span>
+							</div>
+							<div class="cont-row-title-left">
+								<span>{{ item.allMonth }}</span>
+							</div>
+							<div class="cont-row-title-left">
+								<span>{{ item.allMonthIncrement }}</span>
+							</div>
+						</div>
+					</div>
+				</div>
+			</div>
+			<div class="yxt-main-hb">
+				<div class="cont-vc">
+					<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>
+							<h2>餐饮企业定货量</h2>
+						</div>
+						<div class="cont-row-title">
+							<div class="cont-row-title-center">
+								<h3>品类</h3>
+							</div>
+							<div class="cont-row-title-center">
+								<h3>月累计</h3>
+							</div>
+							<div class="cont-row-title-center">
+								<h3>上月同期</h3>
+							</div>
+							<div class="cont-row-title-center">
+								<h3>增长量</h3>
+							</div>
+						</div>
+						<div v-for="(item,index) in ztsj" :index="index" class="cont-row-item">
+							<div class="cont-row-title-left">
+								<span>{{ item.typeName }}</span>
+							</div>
+							<div class="cont-row-title-left">
+								<span>{{ item.caterMonth }}</span>
+							</div>
+							<div class="cont-row-title-left">
+								<span>{{ item.caterMonthPre }}</span>
+							</div>
+							<div class="cont-row-title-left">
+								<span>{{ item.caterMonthIncrement }}</span>
+							</div>
+						</div>
+					</div>
+				</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>
+							<h2>本月目标数</h2>
+						</div>
+						<div class="cont-row-title">
+							<div class="cont-row-title-center">
+								<h3>品类</h3>
+							</div>
+							<div class="cont-row-title-center">
+								<h3>任务数</h3>
+							</div>
+							<div class="cont-row-title-center">
+								<h3>完成比例</h3>
+							</div>
+						</div>
+						<div v-for="(item,index) in ztsj" :index="index" class="cont-row-item">
+							<div class="cont-row-title-left">
+								<span>{{ item.typeName }}</span>
+							</div>
+							<div class="cont-row-title-left">
+								<span>{{ item.targetData }}</span>
+							</div>
+							<div class="cont-row-title-left">
+								<span>{{ item.targetDataRate }}</span>
+							</div>
+						</div>
+					</div>
+				</div>
+				<div class="cont-va">
+					<div class="cont-box">
+						<div>
+							<h2>支行订单量完成情况</h2>
+						</div>
+						<div class="cont-row-title">
+							<div class="cont-row-title-center">
+								<h3>排名</h3>
+							</div>
+							<div class="cont-row-title-center">
+								<h3>支行名称</h3>
+							</div>
+							<div class="cont-row-title-center">
+								<h3>本月累计</h3>
+							</div>
+						</div>
+						<div class="cont-box-scroll">
+							<div v-for="(item,index) in zhpm" :index="index" class="cont-row-scroll">
+								<div class="cont-row-title-left">
+									<span>{{ item.sortNo }}</span>
+								</div>
+								<div class="cont-row-title-left">
+									<span>{{ item.bankName }}</span>
+								</div>
+								<div class="cont-row-title-left">
+									<span>{{ item.allMonth }}</span>
+								</div>
+							</div>
+						</div>
+					</div>
+				</div>
+
+			</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;
+	}
+
+	.yxt-header {
+		display: flex;
+		width: 100%;
+		height: 60px;
+		margin: 0px;
+		padding: 5px;
+	}
+
+	.yxt-main {
+		display: flex;
+		flex-direction: row;
+		width: 100%;
+		height: 100%;
+		margin: 0px;
+		padding: 0px;
+	}
+
+	.yxt-main-ha {
+		display: flex;
+		flex-direction: column;
+		width: 30%;
+		height: 100%;
+		margin: 0px;
+		padding: 10px;
+	}
+
+	.yxt-main-hb {
+		display: flex;
+		flex-direction: column;
+		width: 40%;
+		height: 100%;
+		margin: 0px;
+		padding: 10px;
+	}
+
+	.cont-va {
+		display: flex;
+		flex-direction: column;
+		width: 100%;
+		height: 33%;
+		margin: 0px;
+		padding: 10px;
+	}
+
+	.cont-vb {
+		display: flex;
+		flex-direction: column;
+		width: 100%;
+		height: 34%;
+		margin: 0px;
+		padding: 10px;
+	}
+
+	.cont-vc {
+		display: flex;
+		flex-direction: column;
+		width: 100%;
+		height: 67%;
+		margin: 0px;
+		padding: 10px;
+	}
+
+	.cont-box {
+		display: flex;
+		flex-direction: column;
+		width: 100%;
+		height: 100%;
+		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 {
+		display: flex;
+		flex-direction: row;
+		justify-content: space-between;
+		width: 100%;
+		height: 100%;
+		padding-left: 30px;
+		padding-right: 30px;
+	}
+
+	.cont-row-title-center {
+		height: 100%;
+		text-align: center;
+	}
+
+	.cont-row-item {
+		display: flex;
+		flex-direction: row;
+		justify-content: space-between;
+		width: 100%;
+		height: 100%;
+		padding-left: 20px;
+		padding-right: 20px;
+	}
+
+	.cont-box-scroll {
+		display: flex;
+		flex-direction: column;
+		justify-content: space-between;
+		width: 100%;
+		height: 100%;
+		overflow: hidden;
+	}
+
+	.cont-row-scroll {
+		display: flex;
+		flex-direction: row;
+		justify-content: space-between;
+		width: 100%;
+		height: 25px;
+		padding-left: 20px;
+		padding-right: 20px;
+	}
+
+	.cont-row-item-scroll {
+		display: flex;
+		flex-direction: row;
+		justify-content: space-between;
+		width: 100%;
+		height: 100%;
+		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 {
+		bottom: 0;
+		left: 0;
+		border-left: 1px solid #006FB6;
+		border-bottom: 1px solid #006FB6;
+	}
+
+	.border-br {
+		bottom: 0;
+		right: 0;
+		border-right: 1px solid #006FB6;
+		border-bottom: 1px solid #006FB6;
+	}
+</style>
\ No newline at end of file
diff --git a/src/views/mortgage/yqpb.vue b/src/views/mortgage/yqpb.vue
index 29abf9a..a7f0b46 100644
--- a/src/views/mortgage/yqpb.vue
+++ b/src/views/mortgage/yqpb.vue
@@ -1,212 +1,302 @@
 <template>
-	<div class="yxt-containers">
-		<div class="yxt-header">
-			<h1>一起拼搏(汇融惠享项目)</h1>
-		</div>
-		<div class="yxt-main">
-			<div class="yxt-main-ha">
-				<div class="cont-vb">
-					<div class="cont-box">
-						<div>
-							<h2>累计定货量</h2>
-						</div>
-						<div class="cont-row-title">
-							<div class="cont-row-title-center">
-								<h3>品类</h3>
-							</div>
-							<div class="cont-row-title-center">
-								<h3>数量(单位：公斤/升)</h3>
-							</div>
+	<div class="yxt-containers" style="overflow-y: auto;">
+
+		<span class="title">一起拼搏(汇融惠享项目)</span>
+
+		<div class="layout">
+
+			<div class="layout-left">
+
+				<div class="layout-left-top">
+					<div class="box-border border-tl" />
+					<div class="box-border border-tr" />
+					<div class="box-border border-bl" />
+					<div class="box-border border-br" />
+
+					<div class="layout-left-top-title">
+
+						<div class="layout-left-top-title_left">
+							<svg-icon slot="prefix" icon-class="word" class="el-input__icon"
+								style="height: 25px; width: 25px;margin-right: 10px;" />
+
+							<span>累计订货量</span>
 						</div>
-						<div v-for="(item,index) in ztsj" :index="index" class="cont-row-item">
-							<div class="cont-row-title-left">
-								<span>{{ item.typeName }}</span>
-							</div>
-							<div class="cont-row-title-left">
-								<span>{{ item.allData }}</span>
-							</div>
+						<div class="layout-left-top-title_right"></div>
+					</div>
+
+
+					<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="cont-va">
-					<div class="cont-box">
-						<div class="box-border border-tl" />
-						<div class="box-border border-tr" />
-						<div class="box-border border-bl" />
-						<div class="box-border border-br" />
-						<div>
-							<h2>上月总定货量</h2>
-						</div>
-						<div class="cont-row-title">
-							<div class="cont-row-title-center">
-								<h3>品类</h3>
-							</div>
-							<div class="cont-row-title-center">
-								<h3>数量(单位：公斤/升)</h3>
-							</div>
+
+				<div class="layout-left-contre">
+
+					<div class="box-border border-tl" />
+					<div class="box-border border-tr" />
+					<div class="box-border border-bl" />
+					<div class="box-border border-br" />
+
+					<div class="layout-left-contre-title">
+
+						<div class="layout-left-contre-title_left">
+							<svg-icon slot="prefix" icon-class="word" class="el-input__icon"
+								style="height: 25px; width: 25px;margin-right: 10px;" />
+
+							<span>上月订货量</span>
 						</div>
-						<div v-for="(item,index) in ztsj" :index="index" class="cont-row-item">
-							<div class="cont-row-title-left">
-								<span>{{ item.typeName }}</span>
-							</div>
-							<div class="cont-row-title-left">
-								<span>{{ item.allMonthPre }}</span>
-							</div>
+						<div class="layout-left-contre-title_right"></div>
+					</div>
+
+					<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="cont-va">
-					<div class="cont-box">
-						<div>
-							<h2>本月总定货量</h2>
-						</div>
-						<div class="cont-row-title">
-							<div class="cont-row-title-center">
-								<h3>品类</h3>
-							</div>
-							<div class="cont-row-title-center">
-								<h3>数量(单位：公斤/升)</h3>
-							</div>
-							<div class="cont-row-title-center">
-								<h3>增长量</h3>
-							</div>
+
+
+				<div class="layout-left-bom">
+
+					<div class="box-border border-tl" />
+					<div class="box-border border-tr" />
+					<div class="box-border border-bl" />
+					<div class="box-border border-br" />
+
+					<div class="layout-left-bom-title">
+
+						<div class="layout-left-bom-title_left">
+							<svg-icon slot="prefix" icon-class="word" class="el-input__icon"
+								style="height: 25px; width: 25px;margin-right: 10px;" />
+
+							<span>本月订货量</span>
 						</div>
-						<div v-for="(item,index) in ztsj" :index="index" class="cont-row-item">
-							<div class="cont-row-title-left">
-								<span>{{ item.typeName }}</span>
-							</div>
-							<div class="cont-row-title-left">
-								<span>{{ item.allMonth }}</span>
-							</div>
-							<div class="cont-row-title-left">
-								<span>{{ item.allMonthIncrement }}</span>
-							</div>
+						<div class="layout-left-bom-title_right"></div>
+					</div>
+
+
+					<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"
+								:class="{ 'layout-left-bom-list-growth2': item.allMonthIncrement<0}">{{ item.allMonthIncrement }}</span>
 						</div>
+
 					</div>
 				</div>
+
+
 			</div>
-			<div class="yxt-main-hb">
-				<div class="cont-vc">
-					<div class="cont-box">
-						<el-card class="box-card">
-							<div slot="header" class="clearfix">
-								<span>现场视频</span>
-							</div>
-							<div />
-						</el-card>
+
+			<div class="layout-contre">
+
+				<div class="layout-contre-top">
+
+
+					<div class="box-border border-tl" />
+					<div class="box-border border-tr" />
+					<div class="box-border border-bl" />
+					<div class="box-border border-br" />
+
+
+					<div class="layout-contre-top-title">
+
+						<div class="layout-contre-top-title_left">
+							<svg-icon slot="prefix" icon-class="word" class="el-input__icon"
+								style="height: 25px; width: 25px;margin-right: 10px;" />
+
+							<span>现场视频</span>
+						</div>
+						<div class="layout-contre-top-title_right"></div>
 					</div>
-				</div>
-				<div class="cont-va">
-					<div class="cont-box">
-						<div>
-							<h2>餐饮企业定货量</h2>
+
+
+					<div class="layout-contre-top-camera">
+						<span>摄像头：{{cameraInfo.name}}</span>
+						<div class="layout-contre-top-camera-show">
+
+							<span @click="cameraType" style="margin-right: 5px;">{{videos?"监控回放":'实时监控'}}</span>
+
+							<svg-icon icon-class="huifang" class="el-input__icon" style="height: 30px; width: 30px"
+								@click="clivideo" />
 						</div>
-						<div class="cont-row-title">
-							<div class="cont-row-title-center">
-								<h3>品类</h3>
-							</div>
-							<div class="cont-row-title-center">
-								<h3>月累计</h3>
-							</div>
-							<div class="cont-row-title-center">
-								<h3>上月同期</h3>
-							</div>
-							<div class="cont-row-title-center">
-								<h3>增长量</h3>
-							</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 class="box-border border-tl" />
+					<div class="box-border border-tr" />
+					<div class="box-border border-bl" />
+					<div class="box-border border-br" />
+					
+					
+					<div class="layout-contre-bom-title">
+					
+						<div class="layout-contre-bom-title_left">
+							<svg-icon slot="prefix" icon-class="word" class="el-input__icon"
+								style="height: 25px; width: 25px;margin-right: 10px;" />
+					
+							<span>餐饮企业定货量</span>
 						</div>
-						<div v-for="(item,index) in ztsj" :index="index" class="cont-row-item">
-							<div class="cont-row-title-left">
-								<span>{{ item.typeName }}</span>
-							</div>
-							<div class="cont-row-title-left">
-								<span>{{ item.caterMonth }}</span>
-							</div>
-							<div class="cont-row-title-left">
-								<span>{{ item.caterMonthPre }}</span>
-							</div>
-							<div class="cont-row-title-left">
-								<span>{{ item.caterMonthIncrement }}</span>
-							</div>
+						<div class="layout-contre-bom-title_right"></div>
+					</div>
+
+
+					<div class="layout-contre-bom-label">
+						<span>品类</span>
+						<span>月累计</span>
+						<span>上月同期</span>
+						<span>增长量</span>
+					</div>
+
+					<div v-for="(item,index) in ztsj" :index="index" class="layout-contre-bom-list">
+
+						<div class="layout-contre-bom-list-item">
+							<span class="layout-contre-bom-list-name">{{ item.typeName }}</span>
+							<span class="layout-contre-bom-list-value">{{ item.caterMonth }}</span>
+							<span class="layout-contre-bom-list-monthPre">{{ item.caterMonthPre }}</span>
+							<span class="layout-contre-bom-list-growth"
+									:class="{ 'layout-contre-bom-list-growth2': item.caterMonthIncrement<0}">{{ item.caterMonthIncrement }}</span>
+							
 						</div>
+
 					</div>
+
 				</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 class="layout-right">
+				<div class="layout-right-top">
+					<span>仓库平面图</span>
+					<img src="@/assets/mprtgage/yqpb-icon.png" />
+
+					<img src="@/assets/mprtgage/camera.jpg" class="layout-right-top_btn1" @click="cameraClock(0)" />
+					<img src="@/assets/mprtgage/camera.jpg" class="layout-right-top_btn2" @click="cameraClock(1)" />
+					<img src="@/assets/mprtgage/camera.jpg" class="layout-right-top_btn3" @click="cameraClock(2)" />
+					<img src="@/assets/mprtgage/camera.jpg" class="layout-right-top_btn4" @click="cameraClock(3)" />
+					<img src="@/assets/mprtgage/camera.jpg" class="layout-right-top_btn5" @click="cameraClock(4)" />
+					<img src="@/assets/mprtgage/camera.jpg" class="layout-right-top_btn6" @click="cameraClock(5)" />
+					<img src="@/assets/mprtgage/camera.jpg" class="layout-right-top_btn7" @click="cameraClock(6)" />
+					<img src="@/assets/mprtgage/camera.jpg" class="layout-right-top_btn8" @click="cameraClock(7)" />
+					<img src="@/assets/mprtgage/camera.jpg" class="layout-right-top_btn9" @click="cameraClock(8)" />
+					<img src="@/assets/mprtgage/camera.jpg" class="layout-right-top_btn10" @click="cameraClock(9)" />
+					<img src="@/assets/mprtgage/camera.jpg" class="layout-right-top_btn11" @click="cameraClock(10)" />
+					<img src="@/assets/mprtgage/camera.jpg" class="layout-right-top_btn12" @click="cameraClock(11)" />
+
 				</div>
-				<div class="cont-va">
-					<div class="cont-box">
-						<div>
-							<h2>本月目标数</h2>
-						</div>
-						<div class="cont-row-title">
-							<div class="cont-row-title-center">
-								<h3>品类</h3>
-							</div>
-							<div class="cont-row-title-center">
-								<h3>任务数</h3>
-							</div>
-							<div class="cont-row-title-center">
-								<h3>完成比例</h3>
-							</div>
-						</div>
-						<div v-for="(item,index) in ztsj" :index="index" class="cont-row-item">
-							<div class="cont-row-title-left">
-								<span>{{ item.typeName }}</span>
-							</div>
-							<div class="cont-row-title-left">
-								<span>{{ item.targetData }}</span>
-							</div>
-							<div class="cont-row-title-left">
-								<span>{{ item.targetDataRate }}</span>
-							</div>
+
+				<div class="layout-right-contre">
+
+					<span class="layout-right-contre-title">本月目标数</span>
+
+					<div class="layout-right-contre-label">
+						<span>品类</span>
+						<span>任务数</span>
+						<span>完成比例</span>
+					</div>
+
+					<div v-for="(item,index) in ztsj" :index="index" class="layout-right-contre-list">
+
+						<div class="layout-right-contre-list-item">
+							<span class="layout-right-contre-list-name">{{ item.typeName }}</span>
+							<span class="layout-right-contre-list-value">{{ item.targetData }}</span>
+							<span class="layout-right-contre-list-value">{{ item.targetDataRate }}</span>
 						</div>
+
 					</div>
 				</div>
-				<div class="cont-va">
-					<div class="cont-box">
-						<div>
-							<h2>支行订单量完成情况</h2>
-						</div>
-						<div class="cont-row-title">
-							<div class="cont-row-title-center">
-								<h3>排名</h3>
-							</div>
-							<div class="cont-row-title-center">
-								<h3>支行名称</h3>
-							</div>
-							<div class="cont-row-title-center">
-								<h3>本月累计</h3>
-							</div>
-						</div>
-						<div class="cont-box-scroll">
-							<div v-for="(item,index) in zhpm" :index="index" class="cont-row-scroll">
-								<div class="cont-row-title-left">
-									<span>{{ item.sortNo }}</span>
-								</div>
-								<div class="cont-row-title-left">
-									<span>{{ item.bankName }}</span>
-								</div>
-								<div class="cont-row-title-left">
-									<span>{{ item.allMonth }}</span>
-								</div>
-							</div>
-						</div>
+
+				<div class="layout-right-bom">
+
+					<span class="layout-right-bom-title">支行订单量完成情况</span>
+
+					<div class="layout-right-bom-label">
+						<span>排名</span>
+						<span>支行名称</span>
+						<span>本月累计</span>
 					</div>
+					<vue-seamless-scroll :data="zhpm" :class-option="optionHover" class="seamless-warp">
+
+						<el-table :data="zhpm" border :show-header="status" :row-style="{height: '40px'}">
+							<el-table-column prop="sortNo">
+							</el-table-column>
+							<el-table-column prop="bankName" width="130">
+							</el-table-column>
+							<el-table-column prop="allMonth" align="right">
+							</el-table-column>
+						</el-table>
+
+						<!-- <div v-for="(item,index) in zhpm" :index="index" class="banner-scroll-list"> 
+
+							<div class="banner-scroll-list-item">
+								<span class="banner-scroll-list-name">{{ item.sortNo }}</span>
+								<span class="banner-scroll-list-value">{{ item.bankName }}</span>
+								<span class="banner-scroll-list-all">{{ item.allMonth }}</span>
+							</div>
+						</div> -->
+					</vue-seamless-scroll>
+
+
 				</div>
 
+
 			</div>
+
 		</div>
+
+		<!-- 查看监控 -->
+		<el-dialog title="查看视频" :visible.sync="dialogImageJK" width="800px" :before-close="handleCloseJK"
+			style="z-index:999">
+			<iframe :src="this.spUrl" width="750" height="400" id="ysOpenDevice" allowfullscreen>
+			</iframe>
+		</el-dialog>
+
+	</div>
+
+
 	</div>
 </template>
 
 <script>
+	// import Scroll from "@/components/scrollList/index";
 	import req from '@/api/gd36524/store'
 	import {
 		zhj_ztsj
@@ -214,15 +304,45 @@
 	import {
 		zhj_zhpm
 	} from '@/demodata/zhj_zhpm.js'
+	components: {
+		Scroll: () => import("@/components/scrollList/index.vue")
+	}
 	export default {
 		data() {
 			return {
+				status: false,
+				dialogVisible: false,
+				videos: true,
+				lookvideo: false,
+				dialogImageJK: false,
+				spUrl: "",
+				cameraList: [],
+				cameraInfo: {
+					name: "默认"
+				},
 				ztsj: [],
 				zhpm: []
 			}
 		},
+		computed: {
+			optionHover() {
+				return {
+					step: 0.1, // 数值越大速度滚动越快
+					limitMoveNum: 2, // 开始无缝滚动的数据量 this.dataList.length
+					hoverStop: true, // 是否开启鼠标悬停stop
+					direction: 1, // 0向下 1向上 2向左 3向右
+					openWatch: true, // 开启数据实时监控刷新dom
+					singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
+					singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
+					waitTime: 1000, // 单步运动停止的时间(默认值1000ms)
+
+				};
+			},
+
+		},
 		created() {
 			this.loadList()
+			this.getOtherList()
 		},
 		methods: {
 			loadList() {
@@ -230,50 +350,21 @@
 				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 => {
+				req.getOtherList2().then(res => {
 					console.log('getOtherList:', res)
-					this.cameraList = res.data
 
-					this.cameraInfo = res.data[0]
-					this.getVedioPcLiveById(res.data[0].id)
+					if (res.data) {
+
+						this.cameraList = res.data
+						this.cameraInfo = res.data[0]
+						this.getVedioPcLiveById(res.data[0].id)
+					}
+
 				}).catch(e => {
 					console.log('GdinventoryLog-loadList-ee:', e)
 				})
@@ -299,15 +390,6 @@
 				})
 			},
 
-			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
@@ -343,146 +425,742 @@
 		height: 100%;
 		margin: 0px;
 		padding: 0px;
-	}
 
-	.yxt-header {
-		display: flex;
-		width: 100%;
-		height: 60px;
-		margin: 0px;
-		padding: 5px;
-	}
+		.title {
+			margin-top: 25px;
+			color: #39D6FE;
+			font-size: 30px;
+			margin-left: 20px;
+			font-weight: 1000;
+			font-family: sans-serif;
+		}
 
-	.yxt-main {
-		display: flex;
-		flex-direction: row;
-		width: 100%;
-		height: 100%;
-		margin: 0px;
-		padding: 0px;
-	}
+		.layout {
+			display: flex;
+			flex-direction: row;
+			padding: 20px;
 
-	.yxt-main-ha {
-		display: flex;
-		flex-direction: column;
-		width: 30%;
-		height: 100%;
-		margin: 0px;
-		padding: 10px;
-	}
+			.layout-left {
+				width: 25%;
+				display: flex;
+				flex-direction: column;
 
-	.yxt-main-hb {
-		display: flex;
-		flex-direction: column;
-		width: 40%;
-		height: 100%;
-		margin: 0px;
-		padding: 10px;
-	}
+				.layout-left-top {
+					background-color: #031249;
+					display: flex;
+					flex-direction: column;
+					padding: 20px;
+					position: relative;
 
-	.cont-va {
-		display: flex;
-		flex-direction: column;
-		width: 100%;
-		height: 33%;
-		margin: 0px;
-		padding: 10px;
-	}
 
-	.cont-vb {
-		display: flex;
-		flex-direction: column;
-		width: 100%;
-		height: 34%;
-		margin: 0px;
-		padding: 10px;
-	}
+					.layout-left-top-title {
 
-	.cont-vc {
-		display: flex;
-		flex-direction: column;
-		width: 100%;
-		height: 67%;
-		margin: 0px;
-		padding: 10px;
-	}
+						display: flex;
+						flex-direction: row;
 
-	.cont-box {
-		display: flex;
-		flex-direction: column;
-		width: 100%;
-		height: 100%;
-		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%;
-		}
-	}
+						.layout-left-top-title_left {
+							color: #fff;
+							font-size: 25px;
+							font-weight: 600;
+							font-family: sans-serif;
+							margin-right: 10px;
+						}
 
-	.cont-row-title {
-		display: flex;
-		flex-direction: row;
-		justify-content: space-between;
-		width: 100%;
-		height: 100%;
-		padding-left: 30px;
-		padding-right: 30px;
-	}
+						.layout-left-top-title_right {
+							flex: 1;
+							position: relative;
+							height: 100%;
 
-	.cont-row-title-center {
-		height: 100%;
-		text-align: center;
-	}
+							&::after {
+								content: "";
+								position: absolute;
+								bottom: 13px;
+								left: 0px;
+								top: 0px;
+								width: 100%;
+								height: 100%;
+								border-bottom: solid 4px #dadada;
+							}
+						}
+					}
 
-	.cont-row-item {
-		display: flex;
-		flex-direction: row;
-		justify-content: space-between;
-		width: 100%;
-		height: 100%;
-		padding-left: 20px;
-		padding-right: 20px;
-	}
+					.layout-left-top-label {
+						display: flex;
+						flex-direction: row;
+						align-items: center;
+						justify-content: space-between;
 
-	.cont-box-scroll {
-		display: flex;
-		flex-direction: column;
-		justify-content: space-between;
-		width: 100%;
-		height: 100%;
-		overflow: hidden;
-	}
+						span {
+							margin-top: 20px;
+							font-size: 20px;
+							font-weight: 600;
+							font-family: sans-serif;
+						}
 
-	.cont-row-scroll {
-		display: flex;
-		flex-direction: row;
-		justify-content: space-between;
-		width: 100%;
-		height: 25px;
-		padding-left: 20px;
-		padding-right: 20px;
-	}
+					}
 
-	.cont-row-item-scroll {
-		display: flex;
-		flex-direction: row;
-		justify-content: space-between;
-		width: 100%;
-		height: 100%;
-		padding-left: 20px;
-		padding-right: 20px;
+					.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 {
+								color: #FFD735;
+							}
+
+							.layout-left-top-list-value {
+								color: #FF9C00;
+							}
+						}
+					}
+				}
+
+				.layout-left-contre {
+					margin-top: 20px;
+					background-color: #031249;
+					display: flex;
+					flex-direction: column;
+					padding: 20px;
+					position: relative;
+
+					.layout-left-contre-title {
+						display: flex;
+						flex-direction: row;
+
+						.layout-left-contre-title_left {
+							color: #fff;
+							font-size: 25px;
+							font-weight: 600;
+							font-family: sans-serif;
+							margin-right: 10px;
+						}
+
+						.layout-left-contre-title_right {
+							flex: 1;
+							position: relative;
+							height: 100%;
+
+							&::after {
+								content: "";
+								position: absolute;
+								bottom: 13px;
+								left: 0px;
+								top: 0px;
+								width: 100%;
+								height: 100%;
+								border-bottom: solid 4px #dadada;
+							}
+						}
+
+					}
+
+					.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 {
+								color: #FFD735;
+							}
+
+							.layout-left-contre-list-value {
+								color: #FF9C00;
+							}
+						}
+					}
+				}
+
+				.layout-left-bom {
+					margin-top: 15px;
+					background-color: #031249;
+					display: flex;
+					flex-direction: column;
+					padding: 20px;
+					position: relative;
+
+					.layout-left-bom-title {
+						display: flex;
+						flex-direction: row;
+
+						.layout-left-bom-title_left {
+							color: #fff;
+							font-size: 25px;
+							font-weight: 600;
+							font-family: sans-serif;
+							margin-right: 10px;
+						}
+
+						.layout-left-bom-title_right {
+							flex: 1;
+							position: relative;
+							height: 100%;
+
+							&::after {
+								content: "";
+								position: absolute;
+								bottom: 13px;
+								left: 0px;
+								top: 0px;
+								width: 100%;
+								height: 100%;
+								border-bottom: solid 4px #dadada;
+							}
+						}
+					}
+
+					.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 {
+								color: #FFD735;
+							}
+
+							.layout-left-bom-list-value {
+								color: #FF9C00;
+							}
+
+							.layout-left-bom-list-growth {
+								color: #0CD947;
+							}
+
+							.layout-left-bom-list-growth2 {
+								color: #FF352C;
+							}
+
+						}
+					}
+				}
+			}
+
+			.layout-contre {
+				width: 45%;
+				margin-left: 30px;
+				margin-right: 30px;
+				display: flex;
+				flex-direction: column;
+
+				.layout-contre-top {
+					display: flex;
+						background-color: #031249;
+					flex-direction: column;
+					padding: 20px;
+					position: relative;
+					
+					.layout-contre-top-title{
+						display: flex;
+						flex-direction: row;
+						.layout-contre-top-title_left {
+							color: #fff;
+							font-size: 25px;
+							font-weight: 600;
+							font-family: sans-serif;
+							margin-right: 10px;
+						}
+						
+						.layout-contre-top-title_right {
+							flex: 1;
+							position: relative;
+							height: 100%;
+						
+							&::after {
+								content: "";
+								position: absolute;
+								bottom: 13px;
+								left: 0px;
+								top: 0px;
+								width: 100%;
+								height: 100%;
+								border-bottom: solid 4px #dadada;
+							}
+						}
+					}
+					
+				
+					
+					.layout-contre-top-camera {
+						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-camera-show {
+							display: flex;
+							flex-direction: row;
+							align-items: center;
+						}
+					}
+					
+
+
+					.layout-contre-top_video {
+						margin-top: 20px;
+					}
+				}
+
+				.layout-contre-bom {
+					margin-top: 15px;
+					background-color: #031249;
+					display: flex;
+					flex-direction: column;
+					padding: 20px;
+					position: relative;
+
+					.layout-contre-bom-title {
+						display: flex;
+						flex-direction: row;
+						.layout-contre-bom-title_left {
+							color: #fff;
+							font-size: 25px;
+							font-weight: 600;
+							font-family: sans-serif;
+							margin-right: 10px;
+						}
+						
+						.layout-contre-bom-title_right {
+							flex: 1;
+							position: relative;
+							height: 100%;
+						
+							&::after {
+								content: "";
+								position: absolute;
+								bottom: 13px;
+								left: 0px;
+								top: 0px;
+								width: 100%;
+								height: 100%;
+								border-bottom: solid 4px #dadada;
+							}
+						}
+					}
+
+					.layout-contre-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-contre-bom-list {
+						margin-top: 10px;
+						display: flex;
+						flex-direction: column;
+
+						.layout-contre-bom-list-item {
+							display: flex;
+							margin-top: 5px;
+							margin-bottom: 5px;
+							flex-direction: row;
+							align-items: center;
+							justify-content: space-between;
+
+							.layout-contre-bom-list-name {}
+
+							.layout-contre-bom-list-value {}
+
+							.layout-contre-bom-list-growth {}
+						}
+					}
+				}
+			}
+
+			.layout-right {
+				width: 25%;
+				display: flex;
+				flex-direction: column;
+
+				.layout-right-top {
+					background-color: #031249;
+					padding: 20px;
+					height: 230px;
+					position: relative;
+
+					span {
+						font-size: 25px;
+						font-weight: 600;
+						font-family: sans-serif;
+					}
+
+					img {
+						margin-top: 10px;
+						width: 100%;
+						height: 80%;
+					}
+
+					.layout-right-top_btn1 {
+						//二通道
+						// z-index: 100;
+						position: absolute;
+						top: 25%;
+						left: 16.1%;
+						width: 7.5%;
+						height: 6%;
+						background-color: #f0f;
+						/*设置透明度，0为完全透明，1为不透明*/
+						// opacity: 0;
+					}
+
+					.layout-right-top_btn2 {
+						//  三通道
+						// z-index: 100;
+						position: absolute;
+						top: 25%;
+						left: 46.5%;
+						width: 7%;
+						height: 6%;
+						background-color: #ff0;
+						/*设置透明度，0为完全透明，1为不透明*/
+						// opacity: 0;
+					}
+
+					.layout-right-top_btn3 {
+						//  四通道
+						// z-index: 100;
+						position: absolute;
+						top: 34.5%;
+						left: 10.2%;
+						width: 7%;
+						height: 6%;
+						background-color: #00f;
+						/*设置透明度，0为完全透明，1为不透明*/
+						// opacity: 0;
+					}
+
+					.layout-right-top_btn4 {
+						//  一通道
+						// z-index: 100;
+						position: absolute;
+						top: 34%;
+						left: 84.1%;
+						width: 5%;
+						height: 7%;
+						background-color: #0ff;
+						/*设置透明度，0为完全透明，1为不透明*/
+						// opacity: 0;
+					}
+
+					.layout-right-top_btn5 {
+						//  一通道
+						// z-index: 100;
+						position: absolute;
+						top: 48.2%;
+						left: 37.5%;
+						width: 7.5%;
+						height: 5%;
+						background-color: #0ff;
+						/*设置透明度，0为完全透明，1为不透明*/
+						// opacity: 0;
+					}
+
+					.layout-right-top_btn6 {
+						//  一通道
+						// z-index: 100;
+						position: absolute;
+						top: 42%;
+						left: 72.6%;
+						width: 5%;
+						height: 7%;
+						background-color: #0ff;
+						/*设置透明度，0为完全透明，1为不透明*/
+						// opacity: 0;
+					}
+
+					.layout-right-top_btn7 {
+						//  一通道
+						// z-index: 100;
+						position: absolute;
+						top: 55%;
+						left: 10.5%;
+						width: 6.5%;
+						height: 5.5%;
+						background-color: #0ff;
+						/*设置透明度，0为完全透明，1为不透明*/
+						// opacity: 0;
+					}
+
+					.layout-right-top_btn8 {
+						//  一通道
+						// z-index: 100;
+						position: absolute;
+						top: 51.4%;
+						left: 48.8%;
+						width: 5%;
+						height: 7%;
+						background-color: #0ff;
+						/*设置透明度，0为完全透明，1为不透明*/
+						// opacity: 0;
+					}
+
+					.layout-right-top_btn9 {
+						//  一通道
+						// z-index: 100;
+						position: absolute;
+						top: 58%;
+						left: 70.8%;
+						width: 7%;
+						height: 6.5%;
+						background-color: #0ff;
+						/*设置透明度，0为完全透明，1为不透明*/
+						// opacity: 0;
+					}
+
+					.layout-right-top_btn10 {
+						//  一通道
+						// z-index: 100;
+						position: absolute;
+						top: 55%;
+						left: 81.5%;
+						width: 5.5%;
+						height: 8%;
+						background-color: #0ff;
+						/*设置透明度，0为完全透明，1为不透明*/
+						// opacity: 0;
+					}
+
+					.layout-right-top_btn11 {
+						//  一通道
+						// z-index: 100;
+						position: absolute;
+						top: 69.5%;
+						left: 63.5%;
+						width: 7%;
+						height: 5.5%;
+						background-color: #0ff;
+						/*设置透明度，0为完全透明，1为不透明*/
+						// opacity: 0;
+					}
+
+					.layout-right-top_btn12 {
+						//  一通道
+						// z-index: 100;
+						position: absolute;
+						top: 71.5%;
+						left: 83.8%;
+						width: 5.8%;
+						height: 6.8%;
+						background-color: #0ff;
+						/*设置透明度，0为完全透明，1为不透明*/
+						// opacity: 0;
+					}
+
+
+				}
+
+				.layout-right-contre {
+					margin-top: 15px;
+					background-color: #031249;
+					display: flex;
+					flex-direction: column;
+					padding: 20px;
+
+					.layout-right-contre-title {
+						font-size: 25px;
+						font-weight: 600;
+						font-family: sans-serif;
+					}
+
+					.layout-right-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-right-contre-list {
+						margin-top: 10px;
+						display: flex;
+						flex-direction: column;
+
+						.layout-right-contre-list-item {
+							display: flex;
+							margin-top: 5px;
+							margin-bottom: 5px;
+							flex-direction: row;
+							align-items: center;
+							justify-content: space-between;
+
+							.layout-right-contre-list-name {}
+
+							.layout-right-contre-list-value {}
+
+							.layout-right-contre-list-growth {}
+						}
+					}
+
+				}
+
+				.layout-right-bom {
+					margin-top: 15px;
+					background-color: #031249;
+					display: flex;
+					flex-direction: column;
+					padding: 20px;
+
+					.layout-right-bom-title {
+						font-size: 25px;
+						font-weight: 600;
+						font-family: sans-serif;
+					}
+
+					.layout-right-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;
+						}
+
+					}
+
+					.seamless-warp {
+						margin-top: 10px;
+						height: 100px;
+						width: 100%;
+						overflow: hidden;
+
+					}
+
+					::v-deep.el-table,
+					::v-deep .el-table__expanded-cell {
+						background-color: transparent;
+
+					}
+
+					::v-deep.el-table::before {
+						height: 0px;
+					}
+
+					::v-deep.el-table--border::after {
+						width: 0px;
+					}
+
+					::v-deep.el-table--border {
+						border: none;
+					}
+
+
+
+					::v-deep .el-table td {
+						/* 去除表格线 */
+						border-top: none;
+						border-right: none;
+					}
+
+					/* 表格内背景颜色 */
+					::v-deep.el-table th,
+					::v-deep .el-table tr,
+					::v-deep .el-table td {
+						background-color: transparent;
+						color: white
+					}
+
+					::v-deep .el-table .cell {
+						background-color: #031249;
+					}
+
+					::v-deep .toptitle {
+						width: 100%;
+						display: flex;
+						background-color: gainsboro;
+						margin-bottom: 10px;
+						// border: 2px solid gainsboro;
+						background-color: transparent;
+						color: white
+					}
+
+				}
+			}
+
+		}
 	}
 
-	.cont-box .box-border {
+	.box-border {
 		position: absolute;
 		width: 2.60417vw;
 		height: 2.60417vw;
@@ -491,28 +1169,28 @@
 	.border-tl {
 		top: 0;
 		left: 0;
-		border-left: 1px solid #006FB6;
-		border-top: 1px solid #006FB6;
+		border-left: 2px solid #006FB6;
+		border-top: 2px solid #006FB6;
 	}
 
 	.border-tr {
 		top: 0;
 		right: 0;
-		border-top: 1px solid #006FB6;
-		border-right: 1px solid #006FB6;
+		border-top: 2px solid #006FB6;
+		border-right: 2px solid #006FB6;
 	}
 
 	.border-bl {
 		bottom: 0;
 		left: 0;
-		border-left: 1px solid #006FB6;
-		border-bottom: 1px solid #006FB6;
+		border-left: 2px solid #006FB6;
+		border-bottom: 2px solid #006FB6;
 	}
 
 	.border-br {
 		bottom: 0;
 		right: 0;
-		border-right: 1px solid #006FB6;
-		border-bottom: 1px solid #006FB6;
+		border-right: 2px solid #006FB6;
+		border-bottom: 2px solid #006FB6;
 	}
 </style>
\ No newline at end of file
diff --git a/src/views/mortgage/yqpb2.vue b/src/views/mortgage/yqpb2.vue
deleted file mode 100644
index c61db44..0000000
--- a/src/views/mortgage/yqpb2.vue
+++ /dev/null
@@ -1,982 +0,0 @@
-<template>
-	<div class="yxt-containers" style="overflow-y: auto;">
-
-		<span class="title">一起拼搏(汇融惠享项目)</span>
-
-		<div class="layout">
-
-			<div class="layout-left">
-
-				<div class="layout-left-top">
-					<div class="box-border border-tl" />
-					<div class="box-border border-tr" />
-					<div class="box-border border-bl" />
-					<div class="box-border border-br" />
-					
-					<div class="layout-left-top-title">
-						
-						<div class="layout-left-top-title_left">
-							<svg-icon slot="prefix" icon-class="word" class="el-input__icon"
-								style="height: 25px; width: 25px;margin-right: 10px;" />
-								
-								<span >累计订货量</span>
-						</div>
-							<div class="layout-left-top-title_right"></div>
-					</div>
-					
-
-					<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">
-
-					<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>摄像头：{{cameraInfo.name}}</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">
-
-					<span class="layout-contre-bom-title">餐饮企业定货量</span>
-
-					<div class="layout-contre-bom-label">
-						<span>品类</span>
-						<span>月累计</span>
-						<span>上月同期</span>
-						<span>增长量</span>
-					</div>
-
-					<div v-for="(item,index) in ztsj" :index="index" class="layout-contre-bom-list">
-
-						<div class="layout-contre-bom-list-item">
-							<span class="layout-contre-bom-list-name">{{ item.typeName }}</span>
-							<span class="layout-contre-bom-list-value">{{ item.caterMonth }}</span>
-							<span class="layout-contre-bom-list-value">{{ item.caterMonthPre }}</span>
-							<span class="layout-contre-bom-list-value">{{ item.caterMonthIncrement }}</span>
-						</div>
-
-					</div>
-
-				</div>
-
-			</div>
-
-			<div class="layout-right">
-				<div class="layout-right-top">
-					<span>仓库平面图</span>
-					<img src="@/assets/mprtgage/yqpb-icon.png" />
-
-					<img src="@/assets/mprtgage/camera.jpg" class="layout-right-top_btn1" @click="cameraClock(0)" />
-					<img src="@/assets/mprtgage/camera.jpg" class="layout-right-top_btn2" @click="cameraClock(1)" />
-					<img src="@/assets/mprtgage/camera.jpg" class="layout-right-top_btn3" @click="cameraClock(2)" />
-					<img src="@/assets/mprtgage/camera.jpg" class="layout-right-top_btn4" @click="cameraClock(3)" />
-					<img src="@/assets/mprtgage/camera.jpg" class="layout-right-top_btn5" @click="cameraClock(4)" />
-					<img src="@/assets/mprtgage/camera.jpg" class="layout-right-top_btn6" @click="cameraClock(5)" />
-					<img src="@/assets/mprtgage/camera.jpg" class="layout-right-top_btn7" @click="cameraClock(6)" />
-					<img src="@/assets/mprtgage/camera.jpg" class="layout-right-top_btn8" @click="cameraClock(7)" />
-					<img src="@/assets/mprtgage/camera.jpg" class="layout-right-top_btn9" @click="cameraClock(8)" />
-					<img src="@/assets/mprtgage/camera.jpg" class="layout-right-top_btn10" @click="cameraClock(9)" />
-					<img src="@/assets/mprtgage/camera.jpg" class="layout-right-top_btn11" @click="cameraClock(10)" />
-					<img src="@/assets/mprtgage/camera.jpg" class="layout-right-top_btn12" @click="cameraClock(11)" />
-
-				</div>
-
-				<div class="layout-right-contre">
-
-					<span class="layout-right-contre-title">本月目标数</span>
-
-					<div class="layout-right-contre-label">
-						<span>品类</span>
-						<span>任务数</span>
-						<span>完成比例</span>
-					</div>
-
-					<div v-for="(item,index) in ztsj" :index="index" class="layout-right-contre-list">
-
-						<div class="layout-right-contre-list-item">
-							<span class="layout-right-contre-list-name">{{ item.typeName }}</span>
-							<span class="layout-right-contre-list-value">{{ item.targetData }}</span>
-							<span class="layout-right-contre-list-value">{{ item.targetDataRate }}</span>
-						</div>
-
-					</div>
-				</div>
-
-				<div class="layout-right-bom">
-
-					<span class="layout-right-bom-title">支行订单量完成情况</span>
-
-					<div class="layout-right-bom-label">
-						<span>排名</span>
-						<span>支行名称</span>
-						<span>本月累计</span>
-					</div>
-					<vue-seamless-scroll :data="zhpm" :class-option="optionHover" class="seamless-warp">
-
-						<el-table :data="zhpm" border :show-header="status" :row-style="{height: '40px'}">
-							<el-table-column prop="sortNo">
-							</el-table-column>
-							<el-table-column prop="bankName" width="130">
-							</el-table-column>
-							<el-table-column prop="allMonth" align="right">
-							</el-table-column>
-						</el-table>
-
-						<!-- <div v-for="(item,index) in zhpm" :index="index" class="banner-scroll-list"> 
-
-							<div class="banner-scroll-list-item">
-								<span class="banner-scroll-list-name">{{ item.sortNo }}</span>
-								<span class="banner-scroll-list-value">{{ item.bankName }}</span>
-								<span class="banner-scroll-list-all">{{ item.allMonth }}</span>
-							</div>
-						</div> -->
-					</vue-seamless-scroll>
-
-
-				</div>
-
-
-			</div>
-
-		</div>
-		
-		<!-- 查看监控 -->
-		<el-dialog title="查看视频" :visible.sync="dialogImageJK" width="800px" :before-close="handleCloseJK"
-			style="z-index:999">
-			<iframe :src="this.spUrl" width="750" height="400" id="ysOpenDevice" allowfullscreen>
-			</iframe>
-		</el-dialog>
-
-	</div>
-
-
-	</div>
-</template>
-
-<script>
-	// import Scroll from "@/components/scrollList/index";
-	import req from '@/api/gd36524/store'
-	import {
-		zhj_ztsj
-	} from '@/demodata/zhj_ztsj.js'
-	import {
-		zhj_zhpm
-	} from '@/demodata/zhj_zhpm.js'
-	components: {
-		Scroll: () => import("@/components/scrollList/index.vue")
-	}
-	export default {
-		data() {
-			return {
-				status: false,
-				dialogVisible: false,
-				videos: true,
-				lookvideo: false,
-				dialogImageJK: false,
-				spUrl: "",
-				cameraList: [],
-				cameraInfo: {
-					name: "默认"
-				},
-				ztsj: [],
-				zhpm: []
-			}
-		},
-		computed: {
-			optionHover() {
-				return {
-					step: 0.1, // 数值越大速度滚动越快
-					limitMoveNum: 2, // 开始无缝滚动的数据量 this.dataList.length
-					hoverStop: true, // 是否开启鼠标悬停stop
-					direction: 1, // 0向下 1向上 2向左 3向右
-					openWatch: true, // 开启数据实时监控刷新dom
-					singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
-					singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
-					waitTime: 1000, // 单步运动停止的时间(默认值1000ms)
-
-				};
-			},
-
-		},
-		created() {
-			this.loadList()
-			this.getOtherList()
-		},
-		methods: {
-			loadList() {
-				this.ztsj = zhj_ztsj.rows
-				this.zhpm = zhj_zhpm.rows
-				console.log('11', this.ztsj)
-			},
-
-			handleCloseJK() {
-				this.dialogImageJK = false
-			},
-			getOtherList() {
-				req.getOtherList2().then(res => {
-					console.log('getOtherList:', res)
-					
-					if( res.data){
-						
-						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)
-				})
-			},
-
-			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;
-						position: relative;
-				
-
-					.layout-left-top-title {
-					
-						display: flex;
-						flex-direction: row;
-						.layout-left-top-title_left{
-							color: #fff;
-							font-size: 25px;
-							font-weight: 600;
-							font-family: sans-serif;
-							margin-right: 10px;
-						}
-						.layout-left-top-title_right{
-							flex: 1;
-							position: relative;
-							height: 100%;
-													
-							&::after {
-								content: "";
-								position: absolute;
-								bottom: 13px;
-								left: 0px;
-								top:0px;
-								width: 100%;
-								height: 100%;
-								border-bottom: solid 4px #dadada;
-							}
-						}
-					}
-
-					.layout-left-top-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-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 {
-								color: #FFD735;
-							}
-
-							.layout-left-top-list-value {
-								color: #FF9C00;
-							}
-						}
-					}
-				}
-
-				.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 {
-					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 {
-								color: #FFD735;
-							}
-
-							.layout-left-bom-list-value {
-								color: #FF9C00;
-							}
-
-							.layout-left-bom-list-growth {
-								// color: #FF352C;
-								color: #0CD947;
-							}
-							
-						}
-					}
-				}
-			}
-
-			.layout-contre {
-				width: 45%;
-				margin-left: 30px;
-				margin-right: 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: 15px;
-					background-color: #031249;
-					display: flex;
-					flex-direction: column;
-					padding: 20px;
-
-					.layout-contre-bom-title {
-						font-size: 25px;
-						font-weight: 600;
-						font-family: sans-serif;
-					}
-
-					.layout-contre-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-contre-bom-list {
-						margin-top: 10px;
-						display: flex;
-						flex-direction: column;
-
-						.layout-contre-bom-list-item {
-							display: flex;
-							margin-top: 5px;
-							margin-bottom: 5px;
-							flex-direction: row;
-							align-items: center;
-							justify-content: space-between;
-
-							.layout-contre-bom-list-name {}
-
-							.layout-contre-bom-list-value {}
-
-							.layout-contre-bom-list-growth {}
-						}
-					}
-				}
-			}
-
-			.layout-right {
-				width: 25%;
-				display: flex;
-				flex-direction: column;
-
-				.layout-right-top {
-					background-color: #031249;
-					padding: 20px;
-					height: 230px;
-					position: relative;
-
-					span {
-						font-size: 25px;
-						font-weight: 600;
-						font-family: sans-serif;
-					}
-
-					img {
-						margin-top: 10px;
-						width: 100%;
-						height: 80%;
-					}
-
-					.layout-right-top_btn1 {
-						//二通道
-						// z-index: 100;
-						position: absolute;
-						top: 25%;
-						left: 16.1%;
-						width: 7.5%;
-						height: 6%;
-						background-color: #f0f;
-						/*设置透明度，0为完全透明，1为不透明*/
-						// opacity: 0;
-					}
-
-					.layout-right-top_btn2 {
-						//  三通道
-						// z-index: 100;
-						position: absolute;
-						top: 25%;
-						left: 46.5%;
-						width: 7%;
-						height: 6%;
-						background-color: #ff0;
-						/*设置透明度，0为完全透明，1为不透明*/
-						// opacity: 0;
-					}
-
-					.layout-right-top_btn3 {
-						//  四通道
-						// z-index: 100;
-						position: absolute;
-						top: 34.5%;
-						left: 10.2%;
-						width: 7%;
-						height: 6%;
-						background-color: #00f;
-						/*设置透明度，0为完全透明，1为不透明*/
-						// opacity: 0;
-					}
-
-					.layout-right-top_btn4 {
-						//  一通道
-						// z-index: 100;
-						position: absolute;
-						top: 34%;
-						left: 84.1%;
-						width: 5%;
-						height: 7%;
-						background-color: #0ff;
-						/*设置透明度，0为完全透明，1为不透明*/
-						// opacity: 0;
-					}
-
-					.layout-right-top_btn5 {
-						//  一通道
-						// z-index: 100;
-						position: absolute;
-						top: 48.2%;
-						left: 37.5%;
-						width: 7.5%;
-						height: 5%;
-						background-color: #0ff;
-						/*设置透明度，0为完全透明，1为不透明*/
-						// opacity: 0;
-					}
-
-					.layout-right-top_btn6 {
-						//  一通道
-						// z-index: 100;
-						position: absolute;
-						top: 42%;
-						left: 72.6%;
-						width: 5%;
-						height: 7%;
-						background-color: #0ff;
-						/*设置透明度，0为完全透明，1为不透明*/
-						// opacity: 0;
-					}
-
-					.layout-right-top_btn7 {
-						//  一通道
-						// z-index: 100;
-						position: absolute;
-						top: 55%;
-						left: 10.5%;
-						width: 6.5%;
-						height: 5.5%;
-						background-color: #0ff;
-						/*设置透明度，0为完全透明，1为不透明*/
-						// opacity: 0;
-					}
-
-					.layout-right-top_btn8 {
-						//  一通道
-						// z-index: 100;
-						position: absolute;
-						top: 51.4%;
-						left: 48.8%;
-						width: 5%;
-						height: 7%;
-						background-color: #0ff;
-						/*设置透明度，0为完全透明，1为不透明*/
-						// opacity: 0;
-					}
-
-					.layout-right-top_btn9 {
-						//  一通道
-						// z-index: 100;
-						position: absolute;
-						top: 58%;
-						left: 70.8%;
-						width: 7%;
-						height: 6.5%;
-						background-color: #0ff;
-						/*设置透明度，0为完全透明，1为不透明*/
-						// opacity: 0;
-					}
-
-					.layout-right-top_btn10 {
-						//  一通道
-						// z-index: 100;
-						position: absolute;
-						top: 55%;
-						left: 81.5%;
-						width: 5.5%;
-						height: 8%;
-						background-color: #0ff;
-						/*设置透明度，0为完全透明，1为不透明*/
-						// opacity: 0;
-					}
-
-					.layout-right-top_btn11 {
-						//  一通道
-						// z-index: 100;
-						position: absolute;
-						top: 69.5%;
-						left: 63.5%;
-						width: 7%;
-						height: 5.5%;
-						background-color: #0ff;
-						/*设置透明度，0为完全透明，1为不透明*/
-						// opacity: 0;
-					}
-
-					.layout-right-top_btn12 {
-						//  一通道
-						// z-index: 100;
-						position: absolute;
-						top: 71.5%;
-						left: 83.8%;
-						width: 5.8%;
-						height: 6.8%;
-						background-color: #0ff;
-						/*设置透明度，0为完全透明，1为不透明*/
-						// opacity: 0;
-					}
-
-
-				}
-
-				.layout-right-contre {
-					margin-top: 15px;
-					background-color: #031249;
-					display: flex;
-					flex-direction: column;
-					padding: 20px;
-
-					.layout-right-contre-title {
-						font-size: 25px;
-						font-weight: 600;
-						font-family: sans-serif;
-					}
-
-					.layout-right-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-right-contre-list {
-						margin-top: 10px;
-						display: flex;
-						flex-direction: column;
-
-						.layout-right-contre-list-item {
-							display: flex;
-							margin-top: 5px;
-							margin-bottom: 5px;
-							flex-direction: row;
-							align-items: center;
-							justify-content: space-between;
-
-							.layout-right-contre-list-name {}
-
-							.layout-right-contre-list-value {}
-
-							.layout-right-contre-list-growth {}
-						}
-					}
-
-				}
-
-				.layout-right-bom {
-					margin-top: 15px;
-					background-color: #031249;
-					display: flex;
-					flex-direction: column;
-					padding: 20px;
-
-					.layout-right-bom-title {
-						font-size: 25px;
-						font-weight: 600;
-						font-family: sans-serif;
-					}
-
-					.layout-right-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;
-						}
-
-					}
-
-					.seamless-warp {
-						margin-top: 10px;
-						height: 100px;
-						width: 100%;
-						overflow: hidden;
-
-					}
-
-					::v-deep.el-table,
-					::v-deep .el-table__expanded-cell {
-						background-color: transparent;
-
-					}
-
-					::v-deep.el-table::before {
-						height: 0px;
-					}
-
-					::v-deep.el-table--border::after {
-						width: 0px;
-					}
-
-					::v-deep.el-table--border {
-						border: none;
-					}
-
-
-
-					::v-deep .el-table td {
-						/* 去除表格线 */
-						border-top: none;
-						border-right: none;
-					}
-
-					/* 表格内背景颜色 */
-					::v-deep.el-table th,
-					::v-deep .el-table tr,
-					::v-deep .el-table td {
-						background-color: transparent;
-						color: white
-					}
-
-					::v-deep .el-table .cell {
-						background-color: #031249;
-					}
-
-					::v-deep .toptitle {
-						width: 100%;
-						display: flex;
-						background-color: gainsboro;
-						margin-bottom: 10px;
-						// border: 2px solid gainsboro;
-						background-color: transparent;
-						color: white
-					}
-
-				}
-			}
-
-		}
-	}
-</style>
\ No newline at end of file