diff --git a/.env.development b/.env.development
index 7170c1a..93fd5e9 100644
--- a/.env.development
+++ b/.env.development
@@ -3,5 +3,4 @@ ENV = 'development'
 
 # base api
 VUE_APP_BASE_API = '/api'
-
-VUE_APP_PUBLIC_PATH = "/"
+VUE_APP_URL = "http://192.168.0.104:7009"
diff --git a/src/api/gd36524/store.js b/src/api/gd36524/store.js
index a982dac..6dce68c 100644
--- a/src/api/gd36524/store.js
+++ b/src/api/gd36524/store.js
@@ -2,11 +2,72 @@ import request from '@/utils/request'
 
 export default {
 
-  list: function(data) {
-    return request({
-      url: '/store/list',
-      method: 'post',
-      data: data
-    });
-  }
+	list: function(data) {
+		return request({
+			url: '/store/list',
+			method: 'post',
+			data: data
+		});
+	},
+
+	// 左侧数据总览
+	getProjectDaily: function(data) {
+		return request({
+			url: '/datacenter/getProjectDaily',
+			method: 'post',
+			data: data
+		});
+	},
+
+	// 获取指定设备列表,
+	getOtherList: function(data) {
+		return request({
+			url: '/datacenter/getOtherList?type=1&ckId=1a10a17b-9c56-4ef9-8986-194a858e3832',
+			method: 'get'
+		});
+	},
+
+	//  获取摄像头状态数量 ,
+	getStatusCount: function(data) {
+		return request({
+			url: '/datacenter/getStatusCount?ckId=1a10a17b-9c56-4ef9-8986-194a858e3832',
+			method: 'get'
+		});
+	},
+
+	//  实时监控 ,
+	getVedioPcLiveById: function(data) {
+		return request({
+			url: '/datacenter/getVedioPcLiveById?id=' + data,
+			method: 'get'
+		});
+	},
+
+
+	//  回放监控 ,
+	getVedioPcRecById: function(data) {
+		return request({
+			url: '/datacenter/getVedioPcRecById?id=' + data,
+			method: 'get'
+		});
+	},
+
+	//  库存货值 ,
+	getInventory: function(data) {
+		return request({
+			url: '/datacenter/getInventory?orderDate=' + data,
+			method: 'get'
+		});
+	},
+
+	//  库存分析图 ,
+	getReportInventory: function(data) {
+		return request({
+			url: '/datacenter/getReportInventory',
+			method: 'post',
+			data: data
+		});
+	},
+
+
 }
\ No newline at end of file
diff --git a/src/views/echarts/barlineEacharts.vue b/src/views/echarts/barlineEacharts.vue
index 716adfe..875d1c7 100644
--- a/src/views/echarts/barlineEacharts.vue
+++ b/src/views/echarts/barlineEacharts.vue
@@ -76,93 +76,51 @@ export default {
     } = {}) {
       this.chart.setOption({
         color:  ['#ff9900', '#10aeff'],
-        legend: {
-          top: 10,
-          left: "center",
-          itemWidth: 10,
-          itemHeight: 10,
-          // padding: [5, 10],
-          textStyle: {
-            fontSize: 14,
-            color: "#000",
-            padding: [3, 0, 0, 0],
-          },
-          data: ['常温仓', '供应链仓'],
-        },
-        grid: {
-          left: "0%",
-          right: "0%",
-          bottom: "5%",
-          containLabel: true,
-        },
-        xAxis: {
-          type: "category",
-          axisLabel: {
-            color: "#96A4F4",
-          },
-          nameTextStyle: {
-            // y轴name的样式调整
-            color: "#f00",
-            fontSize: 10,
-          },
-          axisLine: {
-            lineStyle: {
-              color: "#96A4F4",
-            },
-
-          },
-          axisTick: {
-            show: false,
-          },
-          data: ['12/1', '12/2', '12/3', '12/4', '12/5', '12/6', '12/7', '12/8', '12/9','12/10','12/11','12/12','12/13'],
-        },
-        yAxis: {
-          type: "value",
-          axisLabel: {
-            color: "#96A4F4",
-          },
-
-          axisLine: {
-            lineStyle: {
-              color: "#96A4F4",
-            },
-            width: 5,
-          },
-          axisTick: {
-            show: false,
-          },
-          splitLine: {
-            lineStyle: {
-              color: "rgba(000, 000, 000, 0.3)",
-            },
-            width:5
-          },
-        },
-        series: [
-          {
-            name: "常温仓",
-            type: "bar",
-            stack: "总量",
-            barWidth: "45%",
-            label: {
-              show: false,
-              position: "insideRight",
-            },
-            data: [1320, 1302, 901, 634, 1390, 1330, 1320, 1000, 500],
-          },
-          {
-            name: "供应链仓",
-            type: "bar",
-            stack: "总量",
-            barWidth: "45%",
-            label: {
-              show: false,
-              position: "insideRight",
-            },
-            data: [1320, 1302, 901, 634, 1390, 1330, 1320, 1000, 500],
-          },
-        ],
-      });
+         tooltip: {
+           trigger: 'axis',
+           axisPointer: {
+             type: 'shadow'
+           }
+         },
+         legend: {},
+         grid: {
+           left: '3%',
+           right: '4%',
+           bottom: '3%',
+           containLabel: true
+         },
+         xAxis: [
+           {
+             type: 'category',
+             data: this.chartData.date
+           }
+         ],
+         yAxis: [
+           {
+             type: 'value'
+           }
+         ],
+         series: [
+         
+           {
+             name: '常温仓',
+             type: 'bar',
+             stack: 'Search Engine',
+             emphasis: {
+               focus: 'series'
+             },
+             data: this.chartData.changwencang
+           },
+           {
+             name: '供应链',
+             type: 'bar',
+             stack: 'Search Engine',
+             emphasis: {
+               focus: 'series'
+             },
+             data: this.chartData.gongyinglian
+           }
+         ]});
       this.chart.on("click", function (param) {
         this.callParents(param);
       });
diff --git a/src/views/echarts/pieLineEacharts.vue b/src/views/echarts/pieLineEacharts.vue
index 05d26b3..f71965b 100644
--- a/src/views/echarts/pieLineEacharts.vue
+++ b/src/views/echarts/pieLineEacharts.vue
@@ -77,14 +77,15 @@ export default {
       this.chart.setOption({
          title: [
     {
-        text: '75.62%',
-        subtext: '质押率50%',
+        text: this.chartData.pledgeRatePercent+"%",
+        subtext: "质押率 " + this.chartData.bankPledgeRate + "%",
         textStyle:{
-            fontSize:20,
-            color:"#ff7e4b"
+            fontSize:16,
+            color:this.chartData.state == '2' ? "#ff7e4b" : "#ccc"
+						
         },
         subtextStyle: {
-            fontSize: 18,
+            fontSize: 14,
             color: '#bbbaba'
         },
         textAlign:"center",
@@ -104,11 +105,12 @@ export default {
     legend: {
         type:"plain",
         icon:'rect',
+		 y: 'center',
+		 x:"right",
         orient: 'vertical',
         left:'70%',
         align:'left',
-        top:'middle',
-        layout:'horizontal',
+        top:'0',
         itemGap:30,
         padding:[20,29,40,0],
         textStyle: {
@@ -122,7 +124,7 @@ export default {
     },
     series: [
         {
-            name:'标题',
+            name:'标签',
             type:'pie',
             center: ['35%', '50%'],
             radius: ['40%', '65%'],
@@ -141,14 +143,15 @@ export default {
                   smooth:true,
                 }
             },
-            data: [
-               {value:335, legendname:'种类01',name:"账户余额",itemStyle:{color:"#5087ec"}},
-               {value:310, legendname:'种类02',name:"应收账款",itemStyle:{color:"#68bbc4"}},
-               {value:234, legendname:'种类03',name:"物质库存价值",itemStyle:{color:"#58a55c"}},
-               {value:154, legendname:'种类04',name:"在途货物价值",itemStyle:{color:"#f2bd42"}},
-               {value:335, legendname:'种类05',name:"预付款",itemStyle:{color:"#ee752f"}},
+            data:  this.chartData.data
+						// [
+      //          {value:335, legendname:'种类01',name:"账户余额",itemStyle:{color:"#5087ec"}},
+      //          {value:310, legendname:'种类02',name:"应收账款",itemStyle:{color:"#68bbc4"}},
+      //          {value:234, legendname:'种类03',name:"物质库存价值",itemStyle:{color:"#58a55c"}},
+      //          {value:154, legendname:'种类04',name:"在途货物价值",itemStyle:{color:"#f2bd42"}},
+      //          {value:335, legendname:'种类05',name:"预付款",itemStyle:{color:"#ee752f"}},
 
-            ]
+      //       ]
         }
         ]
       });
diff --git a/src/views/mortgage/index - 副本.vue b/src/views/mortgage/index - 副本.vue
new file mode 100644
index 0000000..181156e
--- /dev/null
+++ b/src/views/mortgage/index - 副本.vue	
@@ -0,0 +1,1179 @@
+<template>
+	<div class="mortgage">
+		<div class="mortgage_tit">36524保证类贷款项目</div>
+		<div class="mortgage_top">
+			<div class="mortgage_top_item">
+				<div class="mortgage_top_item_tit">
+					<div class="mortgage_top_item_tit_left">
+						<span>
+							<svg-icon slot="prefix" icon-class="word" class="el-input__icon"
+								style="height: 16px; width: 16px" />
+						</span>
+						数据总览
+					</div>
+					<div class="mortgage_top_item_tit_right">
+						<el-date-picker v-model="times" @change="selectTime" type="date" placeholder="选择日期"
+							format="yyyy-MM-dd" value-format="yyyy-MM-dd">
+						</el-date-picker>
+					</div>
+				</div>
+				<div class="mortgage_top_item_coner">
+					<div class="mortgage_top_item_coner_eat">
+						<pieLineEachartsVue :width="`100%`" :height="`100%`" :chartData="chartData">
+						</pieLineEachartsVue>
+					</div>
+					<div class="mortgage_top_item_coner_con">
+						<span> 授信：{{info.creditLimit}}元 </span>
+
+						<span> 用信：{{info.useLimit}}元 </span>
+					</div>
+				</div>
+			</div>
+			<div class="mortgage_top_item">
+				<div class="mortgage_top_item_tit" style="margin-bottom: 10px">
+					<div class="mortgage_top_item_tit_left">
+						<span>
+							<svg-icon slot="prefix" icon-class="home" class="el-input__icon"
+								style="height: 16px; width: 16px" />
+						</span>
+						仓库安防
+					</div>
+					<div class="mortgage_top_item_tit_right">
+						<el-select v-model="wareValue" placeholder="请选择仓库">
+							<el-option v-for="item in warehouse" :key="item.value" :label="item.label"
+								:value="item.value">
+							</el-option>
+						</el-select>
+					</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/tablist.jpg" alt="" />
+							<div class="mortgage_top_item_top_btn1" @click="cameraClock(0)" />
+							<div class="mortgage_top_item_top_btn2" @click="cameraClock(1)" />
+							<div class="mortgage_top_item_top_btn3" @click="cameraClock(2)" />
+							<div 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_top">
+							<div class="mortgage_top_item_cons_right_top_video">
+								<iframe :src="spUrl" width="450" height="150" id="ysOpenDevice" allowfullscreen>
+								</iframe>
+							</div>
+							<div class="mortgage_top_item_cons_right_top_foor">
+								<div class="invie">{{cameraInfo.name}}</div>
+
+								<div class="huishie">
+
+									<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>
+						<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="containers">
+								<div class="container_item">
+									2023-11-19&nbsp;&nbsp;19:33:21&nbsp;&nbsp;&nbsp;&nbsp;<span>摄像头1号离线</span>
+								</div>
+								<div class="container_item">
+									2023-11-19&nbsp;&nbsp;19:33:21&nbsp;&nbsp;&nbsp;&nbsp;<span>摄像头1号离线</span>
+								</div>
+								<div class="container_item">
+									2023-11-19&nbsp;&nbsp;19:33:21&nbsp;&nbsp;&nbsp;&nbsp;<span>摄像头1号离线</span>
+								</div>
+								<div class="container_item">
+									2023-11-19&nbsp;&nbsp;19:33:21&nbsp;&nbsp;&nbsp;&nbsp;<span>摄像头1号离线</span>
+								</div>
+							</div>
+						</div>
+					</div>
+				</div>
+			</div>
+		</div>
+		<div class="mortgage_bom">
+			<div class="mortgage_bom_item">
+				<div class="mortgage_bom_item_tit">
+					<div class="mortgage_bom_item_tit_left">
+						<span>
+							<svg-icon icon-class="jianguan" class="el-input__icon" style="height: 16px; width: 16px" />
+						</span>
+						监管数据
+					</div>
+					<div class="mortgage_bom_item_tit_right"></div>
+				</div>
+				<div class="mortgage_bom_item_cont">
+					<div class="mortgage_bom_item_cont_item">
+						<div class="mortgage_bom_item_cont_item_left">账户余额</div>
+						<div class="mortgage_bom_item_cont_item_right">{{info.accountsBalance}}元</div>
+					</div>
+					<div class="mortgage_bom_item_cont_item">
+						<div class="mortgage_bom_item_cont_item_left">应收账款</div>
+						<div class="mortgage_bom_item_cont_item_right">{{info.accountsReceivable}}元</div>
+					</div>
+					<div class="mortgage_bom_item_cont_item">
+						<div class="mortgage_bom_item_cont_item_left">质物库存价值</div>
+						<div class="mortgage_bom_item_cont_item_right">{{info.stockAmount}}元</div>
+					</div>
+					<div class="mortgage_bom_item_cont_item">
+						<div class="mortgage_bom_item_cont_item_left">在途货物价值</div>
+						<div class="mortgage_bom_item_cont_item_right">{{info.transitAmount}}元</div>
+					</div>
+					<div class="mortgage_bom_item_cont_item">
+						<div class="mortgage_bom_item_cont_item_left">预付款</div>
+						<div class="mortgage_bom_item_cont_item_right">{{info.advancePayment}}元</div>
+					</div>
+				</div>
+			</div>
+
+			<div class="mortgage_bom_item">
+				<div class="mortgage_bom_item_tit">
+					<div class="mortgage_bom_item_tit_left">
+						<span>
+							<svg-icon icon-class="data" class="el-input__icon" style="height: 16px; width: 16px" />
+						</span>
+						库存分析图
+					</div>
+					<div class="mortgage_bom_item_tit_right">
+						<el-select v-model="dayValue" placeholder="请选择日期">
+							<el-option v-for="item in day" :key="item.value" :label="item.label" :value="item.value">
+							</el-option>
+						</el-select>
+					</div>
+				</div>
+				<div class="mortgage_bom_item_cont">
+					<barlineEachartsVue :width="`100%`" :height="'270px'" :chartData="chartData2"></barlineEachartsVue>
+				</div>
+			</div>
+			<div class="mortgage_bom_item">
+				<div class="mortgage_bom_item_tit">
+					<div class="mortgage_bom_item_tit_left">
+						<span>
+							<svg-icon icon-class="lines" class="el-input__icon" style="height: 16px; width: 16px" />
+						</span>
+						仓库库存表
+					</div>
+					<div class="mortgage_bom_item_tit_right"></div>
+				</div>
+				<div class="mortgage_bom_item_cont">
+					<div class="mortgage_bom_item_cont_item">
+						<div class="mortgage_bom_item_cont_item_left">常温仓</div>
+						<div class="mortgage_bom_item_cont_item_right">{{inventoryInfo.changwencang}}元</div>
+					</div>
+					<div class="mortgage_bom_item_cont_item">
+						<div class="mortgage_bom_item_cont_item_left">门店</div>
+						<div class="mortgage_bom_item_cont_item_right">{{inventoryInfo.mendian}}元</div>
+					</div>
+					<div class="ditus" @click="dialogVisible = true">
+						<img src="/image/map.jpg" alt="">
+					</div>
+				</div>
+			</div>
+		</div>
+
+		<el-dialog title="门店分布" :visible.sync="dialogVisible" width="85%">
+			<div class="iframemap">
+				<iframe src="http://jianguan.yyundong.com/map365/#/map" frameborder="0"></iframe>
+			</div>
+		</el-dialog>
+
+		<el-dialog title="查看视频" :visible.sync="lookvideo" width="50%">
+			<div class="loockvideo">
+				<video autoplay src="https://cloud.video.taobao.com/play/u/null/p/1/e/6/t/1/437270439243.mp4"></video>
+			</div>
+		</el-dialog>
+
+		<!-- 查看监控 -->
+		<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>
+</template>
+
+<script>
+	import req from '@/api/gd36524/store'
+	import barlineEachartsVue from "../echarts/barlineEacharts.vue";
+	import pieLineEachartsVue from "../echarts/pieLineEacharts.vue";
+	import {
+		getDateRang
+	} from '@/utils/index'
+	export default {
+		components: {
+			barlineEachartsVue,
+			pieLineEachartsVue
+		},
+		data() {
+			return {
+				times: getDateRang('yesterday'),
+				warehouse: [{
+					value: "选项1",
+					label: "常温仓",
+				}],
+				wareValue: "常温仓",
+				day: [{
+					value: "选项1",
+					label: "15日",
+				}],
+				dayValue: "15日",
+				dialogVisible: false,
+				videos: true,
+				lookvideo: false,
+				dialogImageJK: false,
+				info: {
+					creditLimit: "--",
+					useLimit: "--",
+					accountsBalance: "--",
+					accountsReceivable: "--",
+					stockAmount: "--",
+					transitAmount: "--",
+					advancePayment: "--",
+				},
+				chartData: {
+					pledgeRatePercent: "",
+					state: "",
+					bankPledgeRate: "",
+					data: []
+				},
+				cameraList: [],
+				cameraInfo: {
+					name: ""
+				},
+				StatusCountInfo: {
+					//offline离线  online在线 
+					offline: "0",
+					online: "0"
+				},
+				spUrl: "",
+				inventoryInfo:{
+					mendian:"--",
+					changwencang:"--",
+				},
+				chartData2:{
+					date:[],
+					changwencang:[],
+					gongyinglian:[],
+				}
+			};
+		},
+		created() {
+			this.loadList()
+			this.getOtherList();
+			this.getStatusCount();
+			this.getInventory()
+			this.getReportInventory()
+		},
+		methods: {
+			getReportInventory(){
+				req.getReportInventory().then(res => {
+					console.log('getReportInventory:', res)
+					
+						this.chartData2 = {
+							date:res.data.date,
+							changwencang:res.data.changwencang,
+							gongyinglian:res.data.gongyinglian,
+							
+						}
+				}).catch(e => {
+					console.log('GdinventoryLog-loadList-ee:', e)
+				})
+			},
+			getInventory(){
+				req.getInventory(this.times).then(res => {
+					console.log('getInventory:', res)
+							this.inventoryInfo = 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)
+				})
+			},
+			
+
+			loadList() {
+
+				var params = {
+					orderDate: this.times
+				}
+
+				console.log('params:', params)
+
+				req.getProjectDaily(params).then(res => {
+					console.log('getProjectDaily:', res)
+					if (res.data) {
+						this.info = res.data
+
+						this.chartData = {
+
+							pledgeRatePercent: res.data.pledgeRatePercent,
+							state: res.data.state,
+							bankPledgeRate: res.data.bankPledgeRate,
+							data: [{
+									value: res.data.accountsBalance,
+									legendname: '种类01',
+									name: "账户余额",
+									itemStyle: {
+										color: "#5087ec"
+									}
+								},
+								{
+									value: res.data.accountsReceivable,
+									legendname: '种类02',
+									name: "应收账款",
+									itemStyle: {
+										color: "#68bbc4"
+									}
+								},
+								{
+									value: res.data.stockAmount,
+									legendname: '种类03',
+									name: "物质库存价值",
+									itemStyle: {
+										color: "#58a55c"
+									}
+								},
+								{
+									value: res.data.transitAmount,
+									legendname: '种类04',
+									name: "在途货物价值",
+									itemStyle: {
+										color: "#f2bd42"
+									}
+								},
+								{
+									value: res.data.advancePayment,
+									legendname: '种类05',
+									name: "预付款",
+									itemStyle: {
+										color: "#ee752f"
+									}
+								},
+							]
+						}
+
+					} else {
+						this.info = {}
+
+						this.chartData = {
+							pledgeRatePercent: "",
+							state: "",
+							bankPledgeRate: "",
+							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>
+	.mortgage {
+		width: 100%;
+		height: 100%;
+		box-sizing: border-box;
+		padding: 0px 20px 20px 20px;
+		display: flex;
+		flex-direction: column;
+		position: relative;
+
+		.mortgage_tit {
+			line-height: 50px;
+			font-size: 24px;
+			font-weight: bold;
+			color: #000;
+		}
+
+		.mortgage_top {
+			width: 100%;
+			height: calc((100% - 50px) / 2);
+			position: relative;
+			display: flex;
+			justify-content: space-between;
+			margin-bottom: 40px;
+
+			.mortgage_top_item {
+				height: 100%;
+				position: relative;
+
+				&:nth-of-type(1) {
+					width: 26%;
+					box-sizing: border-box;
+					padding-right: 30px;
+
+					::v-deep .el-select {
+						width: 150px;
+
+						.el-input {
+							.el-input__inner {
+								background: transparent;
+								border: transparent;
+							}
+						}
+					}
+
+					.mortgage_top_item_tit_right {
+						flex: 1;
+						position: relative;
+						justify-content: right;
+
+						::v-deep .el-date-editor {
+							width: 150px;
+
+							.el-input__inner {
+								background: transparent;
+								border: none;
+							}
+
+							.el-input__prefix {
+								display: none;
+							}
+						}
+
+						&::before {
+							content: "";
+							position: absolute;
+							width: 100%;
+							height: 100%;
+							bottom: 5px;
+							border-bottom: solid 4px #dadada;
+						}
+					}
+				}
+
+				&:nth-of-type(2) {
+					width: 73%;
+					box-sizing: border-box;
+					padding-right: 50px;
+
+					.mortgage_top_item_tit {
+						.mortgage_top_item_tit_left {
+							width: auto;
+							margin-right: 10px;
+						}
+					}
+
+					::v-deep .el-select {
+						width: 150px;
+
+						.el-input {
+							.el-input__inner {
+								background: transparent;
+								border: transparent;
+							}
+						}
+					}
+				}
+
+				.mortgage_top_item_tit_right {
+					flex: 1;
+					position: relative;
+					justify-content: right;
+
+					&::before {
+						content: "";
+						position: absolute;
+						width: 100%;
+						height: 100%;
+						bottom: 5px;
+						border-bottom: solid 4px #dadada;
+					}
+				}
+
+				.mortgage_top_item_tit {
+					height: 40px;
+					display: flex;
+					position: relative;
+					justify-content: space-between;
+
+					.mortgage_top_item_tit_left {
+						width: auto;
+						height: 100%;
+						display: flex;
+						align-items: center;
+						margin-right: 10px;
+						font-size: 20px;
+
+						span {
+							margin-right: 10px;
+						}
+
+						::v-deep .svg-icon {
+							cursor: pointer;
+							width: 24px !important;
+							height: 24px !important;
+						}
+					}
+
+					.mortgage_top_item_tit_right {
+						width: 50%;
+						height: 100%;
+						display: flex;
+						justify-content: right;
+						align-items: center;
+
+						span {
+							margin-right: 20px;
+						}
+					}
+				}
+
+				.mortgage_top_item_coner {
+					width: 100%;
+					height: calc(100% - 40px);
+					position: relative;
+
+					.mortgage_top_item_coner_eat {
+						width: 100%;
+						height: 90%;
+					}
+
+					.mortgage_top_item_coner_con {
+						width: 100%;
+						height: 10%;
+						display: flex;
+						align-items: center;
+						box-sizing: border-box;
+						padding-left: 30px;
+						padding-right: 30px;
+						justify-content: space-between;
+
+						span {
+							color: #49a6e2;
+							font-weight: bold;
+							font-size: 18px;
+						}
+					}
+				}
+
+				.mortgage_top_item_top {
+					width: 100%;
+					height: 85%;
+
+					img {
+						width: 100%;
+						height: 100%;
+					}
+
+					.mortgage_top_item_top_btn1 {
+						z-index: 100;
+						position: relative;
+						top: -259px;
+						left: 81px;
+						width: 53px;
+						height: 50px;
+						background-color: #f0f;
+						/*设置透明度，0为完全透明，1为不透明*/
+						opacity: 0;
+					}
+
+					.mortgage_top_item_top_btn2 {
+						z-index: 100;
+						position: relative;
+						top: -326px;
+						left: 481px;
+						width: 53px;
+						height: 50px;
+						background-color: #1d62e2;
+						/*设置透明度，0为完全透明，1为不透明*/
+						opacity: 0;
+					}
+
+					.mortgage_top_item_top_btn3 {
+						z-index: 100;
+						position: relative;
+						top: -161px;
+						left: 81px;
+						width: 53px;
+						height: 50px;
+						background-color: #1d62e2;
+						/*设置透明度，0为完全透明，1为不透明*/
+						opacity: 0;
+					}
+
+					.mortgage_top_item_top_btn4 {
+						z-index: 100;
+						position: relative;
+						top: -214px;
+						left: 481px;
+						width: 53px;
+						height: 50px;
+						background-color: #1d62e2;
+						/*设置透明度，0为完全透明，1为不透明*/
+						opacity: 0;
+					}
+				}
+
+				.mortgage_top_item_cons {
+					width: 100%;
+					height: calc(100% - 50px);
+					position: relative;
+					display: flex;
+					justify-content: space-between;
+
+					.mortgage_top_item_cons_left {
+						width: 58%;
+						height: 100%;
+						position: relative;
+					}
+
+					.mortgage_top_item_cons_right {
+						width: 40%;
+						height: 100%;
+						box-sizing: border-box;
+						padding-left: 30px;
+						position: relative;
+
+						.mortgage_top_item_cons_right_top {
+							height: 50%;
+							width: 100%;
+							margin-bottom: 10px;
+							position: relative;
+
+							.mortgage_top_item_cons_right_top_video {
+								width: 100%;
+								height: 90%;
+								position: relative;
+
+								img {
+									width: 100%;
+									height: 100%;
+								}
+							}
+
+							.mortgage_top_item_cons_right_top_foor {
+								margin-top: 10px;
+								width: 100%;
+								height: 10%;
+								display: flex;
+								position: relative;
+
+								.invie {
+									width: auto;
+									height: 100%;
+									color: #999;
+									display: flex;
+									align-items: center;
+								}
+
+								.huishie {
+									flex: 1;
+									z-index: 100;
+									height: 100%;
+									display: flex;
+									color: #999;
+									align-items: center;
+									justify-content: right;
+
+									span {
+										margin-left: 10px;
+									}
+								}
+							}
+						}
+
+						.mortgage_top_item_cons_right_bom {
+							height: calc(50% - 10px);
+							width: 100%;
+							position: relative;
+
+							.titele {
+								width: 100%;
+								height: 40px;
+								display: flex;
+								align-items: center;
+
+								.titele_left {
+									width: auto;
+									height: 100%;
+									line-height: 40px;
+									margin-right: 5px;
+								}
+
+								.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;
+									}
+								}
+							}
+
+							.containers {
+								width: 100%;
+								height: calc(100% - 1px);
+								position: relative;
+								display: flex;
+								background: transparent;
+								justify-content: center;
+								flex-wrap: wrap;
+
+								.container_item {
+									width: 100%;
+									height: 30px;
+									line-height: 30px;
+									color: #999;
+									font-size: 16px;
+									font-family: '微软雅黑';
+									box-sizing: border-box;
+									padding-left: 20px;
+
+									span {
+										margin-left: 10px;
+									}
+								}
+							}
+						}
+					}
+				}
+
+				.mortgage_top_item_bom {
+					margin-top: 5px;
+					height: 15%;
+					width: 100%;
+					display: flex;
+					position: relative;
+
+					.mortgage_top_item_bom_left {
+						display: flex;
+						width: auto;
+						height: 100%;
+						align-items: flex-end;
+
+						.mortgage_top_item_bom_left_item {
+							width: 130px;
+							display: flex;
+							height: 45px;
+							cursor: pointer;
+							background: #018ad2;
+							color: #fff;
+							justify-content: center;
+							align-items: center;
+							border-right: solid 1px #dadada;
+
+							::v-deep .svg-icon {
+								cursor: pointer;
+								width: 16px !important;
+								height: 16px !important;
+							}
+
+							&:nth-of-type(1) {
+								span {
+									width: 30px;
+									height: 30px;
+									display: flex;
+									align-items: center;
+									justify-content: center;
+									border-radius: 50%;
+									background: #11c155;
+									margin-right: 5px;
+								}
+							}
+
+							&:nth-of-type(2) {
+								span {
+									width: 30px;
+									height: 30px;
+									border-radius: 50%;
+									background: #f57f19;
+									margin-right: 5px;
+								}
+							}
+
+							&:nth-of-type(3) {
+								span {
+									width: 30px;
+									height: 30px;
+									border-radius: 50%;
+									background: #5b9cf7;
+									margin-right: 5px;
+								}
+							}
+						}
+					}
+
+					.mortgage_top_item_bom_right {
+						flex: 1;
+						height: 100%;
+						display: flex;
+						align-items: flex-end;
+						justify-content: right;
+
+						.mortgage_top_item_bom_right_item {
+							width: 130px;
+							height: 45px;
+							display: flex;
+							align-items: center;
+							justify-content: center;
+							background: #e9f7fa;
+							border: solid #71b9f1 1px;
+
+							::v-deep .svg-icon {
+								cursor: pointer;
+								width: 24px !important;
+								height: 24px !important;
+							}
+
+							&:nth-of-type(1) {
+								color: #6082fc;
+
+								span {
+									background: #1d62e2;
+									width: 30px;
+									height: 30px;
+									border-radius: 50%;
+									display: flex;
+									align-items: center;
+									justify-content: center;
+									margin: 0px 3px;
+								}
+
+								p {
+									color: #6082fc;
+									font-weight: bold;
+								}
+							}
+
+							&:nth-of-type(2) {
+								color: #6e7173;
+
+								span {
+									background: #4b4b4b;
+									width: 30px;
+									height: 30px;
+									display: flex;
+									align-items: center;
+									justify-content: center;
+									border-radius: 50%;
+									margin: 0px 3px;
+								}
+
+								p {
+									color: #4d4d4e;
+									font-weight: bold;
+								}
+							}
+						}
+					}
+				}
+			}
+		}
+
+		.mortgage_bom {
+			width: 100%;
+			height: calc((100% - 75px) / 2);
+			display: flex;
+			align-items: center;
+			position: relative;
+
+			.mortgage_bom_item {
+				height: 100%;
+
+				&:nth-of-type(1) {
+					width: 26%;
+					box-sizing: border-box;
+					padding-right: 30px;
+
+					.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;
+							}
+						}
+					}
+				}
+
+				&:nth-of-type(2) {
+					width: 43%;
+					box-sizing: border-box;
+					padding: 0px 30px 0px 20px;
+				}
+
+				&:nth-of-type(3) {
+					width: 28%;
+
+					.mortgage_bom_item_cont {
+						box-sizing: border-box;
+						padding-left: 45px;
+
+						.mortgage_bom_item_cont_item {
+							&:last-child {
+								border-bottom: none;
+							}
+						}
+					}
+				}
+
+				.mortgage_bom_item_tit {
+					height: 40px;
+					width: 100%;
+					position: relative;
+					margin-bottom: 10px;
+					display: flex;
+
+					.mortgage_bom_item_tit_left {
+						width: auto;
+						display: flex;
+						align-items: center;
+						margin-right: 5px;
+						height: 100%;
+						font-size: 20px;
+
+						span {
+							margin-right: 10px;
+						}
+					}
+
+					.mortgage_bom_item_tit_right {
+						flex: 1;
+						position: relative;
+						display: flex;
+						justify-content: right;
+						height: 100%;
+
+						::v-deep .el-select {
+							width: 150px;
+
+							.el-input {
+								.el-input__inner {
+									background: transparent;
+									border: transparent;
+								}
+							}
+						}
+					}
+
+					.mortgage_bom_item_tit_right::before {
+						content: "";
+						position: absolute;
+						width: 100%;
+						height: 100%;
+						border-bottom: solid 4px #dadada;
+						bottom: 5px;
+						left: 0px;
+					}
+				}
+
+				.mortgage_bom_item_cont {
+					width: 100%;
+					height: calc(100% - 100px);
+					position: relative;
+
+					.mortgage_bom_item_cont_item {
+						width: 100%;
+						height: calc(100% / 5);
+						position: relative;
+						display: flex;
+						border-bottom: solid 1px #dadada;
+
+						.mortgage_bom_item_cont_item_left {
+							width: 50%;
+							height: 100%;
+							display: flex;
+							align-items: center;
+							color: #333;
+						}
+
+						.mortgage_bom_item_cont_item_right {
+							width: 50%;
+							height: 100%;
+							display: flex;
+							align-items: center;
+							justify-content: right;
+							color: #333;
+						}
+					}
+				}
+
+				.ditus {
+					height: 160px;
+					width: 100%;
+					position: relative;
+					cursor: pointer;
+
+					img {
+						width: 100%;
+						height: 100%;
+					}
+				}
+			}
+		}
+
+		::v-deep .svg-icon {
+			cursor: pointer;
+			width: 30px !important;
+			height: 30px !important;
+
+		}
+
+		.iframemap {
+			width: 100%;
+			height: 1000px;
+
+			iframe {
+				width: 100%;
+				height: 100%;
+			}
+		}
+
+		.loockvideo {
+			width: 100%;
+			height: 300px;
+
+			video {
+				width: 100%;
+				height: 100%;
+			}
+		}
+	}
+</style>
\ No newline at end of file
diff --git a/src/views/mortgage/index.vue b/src/views/mortgage/index.vue
index 09384eb..181156e 100644
--- a/src/views/mortgage/index.vue
+++ b/src/views/mortgage/index.vue
@@ -1,883 +1,1179 @@
 <template>
-  <div class="mortgage">
-    <div class="mortgage_tit">山海能源光伏动产质押项目</div>
-    <div class="mortgage_top">
-      <div class="mortgage_top_item">
-        <div class="mortgage_top_item_tit">
-          <div class="mortgage_top_item_tit_left">
-            <span>
-              <svg-icon
-                slot="prefix"
-                icon-class="word"
-                class="el-input__icon"
-                style="height: 16px; width: 16px"
-              />
-            </span>
-            数据总览
-          </div>
-          <div class="mortgage_top_item_tit_right">
-            <el-date-picker
-              v-model="times"
-              type="date"
-              placeholder="选择日期"
-              format="yyyy-MM-dd"
-              value-format="yyyy-MM-dd"
-              >
-            </el-date-picker>
-          </div>
-        </div>
-        <div class="mortgage_top_item_coner">
-          <div class="mortgage_top_item_coner_eat">
-            <pieLineEachartsVue
-              :width="`100%`"
-              :height="`100%`"
-            ></pieLineEachartsVue>
-          </div>
-          <div class="mortgage_top_item_coner_con">
-            <span> 授信：2398712元 </span>
-
-            <span> 用信：2398712元 </span>
-          </div>
-        </div>
-      </div>
-      <div class="mortgage_top_item">
-        <div class="mortgage_top_item_tit" style="margin-bottom: 10px">
-          <div class="mortgage_top_item_tit_left">
-            <span>
-              <svg-icon
-                slot="prefix"
-                icon-class="home"
-                class="el-input__icon"
-                style="height: 16px; width: 16px"
-              />
-            </span>
-            仓库安防
-          </div>
-          <div class="mortgage_top_item_tit_right">
-            <el-select v-model="wareValue" placeholder="请选择仓库">
-              <el-option
-                v-for="item in warehouse"
-                :key="item.value"
-                :label="item.label"
-                :value="item.value"
-              >
-              </el-option>
-            </el-select>
-          </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/tablist.jpg" alt="" />
-            </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>4</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>4</p>
-                </div>
-              </div>
-            </div>
-          </div>
-          <div class="mortgage_top_item_cons_right">
-            <div class="mortgage_top_item_cons_right_top">
-              <div class="mortgage_top_item_cons_right_top_video">
-                <img src="@/assets/image/videos.jpg">
-              </div>
-              <div class="mortgage_top_item_cons_right_top_foor">
-                <div class="invie">东北角摄像头1</div>
-
-                <div class="huishie">
-                  {{videos?"监控回放":'实时监控'}}
-                  <span @click="clivideo">
-                    <svg-icon     
-                  
-                      icon-class="huifang"
-                      class="el-input__icon"
-                      style="height: 16px; width: 16px"
-                    />
-                  </span>
-                </div>
-              </div>
-            </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="containers">
-                <div class="container_item">
-                  2023-11-19&nbsp;&nbsp;19:33:21&nbsp;&nbsp;&nbsp;&nbsp;<span>摄像头1号离线</span>
-                </div>
-                <div class="container_item">
-                  2023-11-19&nbsp;&nbsp;19:33:21&nbsp;&nbsp;&nbsp;&nbsp;<span>摄像头1号离线</span>
-                </div>
-                <div class="container_item">
-                  2023-11-19&nbsp;&nbsp;19:33:21&nbsp;&nbsp;&nbsp;&nbsp;<span>摄像头1号离线</span>
-                </div>
-                <div class="container_item">
-                  2023-11-19&nbsp;&nbsp;19:33:21&nbsp;&nbsp;&nbsp;&nbsp;<span>摄像头1号离线</span>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-    <div class="mortgage_bom">
-      <div class="mortgage_bom_item">
-        <div class="mortgage_bom_item_tit">
-          <div class="mortgage_bom_item_tit_left">
-            <span>
-              <svg-icon
-                icon-class="jianguan"
-                class="el-input__icon"
-                style="height: 16px; width: 16px"
-              />
-            </span>
-            监管数据
-          </div>
-          <div class="mortgage_bom_item_tit_right"></div>
-        </div>
-        <div class="mortgage_bom_item_cont">
-          <div class="mortgage_bom_item_cont_item">
-            <div class="mortgage_bom_item_cont_item_left">账户余额</div>
-            <div class="mortgage_bom_item_cont_item_right">12123432.22元</div>
-          </div>
-          <div class="mortgage_bom_item_cont_item">
-            <div class="mortgage_bom_item_cont_item_left">账户余额</div>
-            <div class="mortgage_bom_item_cont_item_right">12123432.22元</div>
-          </div>
-          <div class="mortgage_bom_item_cont_item">
-            <div class="mortgage_bom_item_cont_item_left">账户余额</div>
-            <div class="mortgage_bom_item_cont_item_right">12123432.22元</div>
-          </div>
-          <div class="mortgage_bom_item_cont_item">
-            <div class="mortgage_bom_item_cont_item_left">账户余额</div>
-            <div class="mortgage_bom_item_cont_item_right">12123432.22元</div>
-          </div>
-          <div class="mortgage_bom_item_cont_item">
-            <div class="mortgage_bom_item_cont_item_left">账户余额</div>
-            <div class="mortgage_bom_item_cont_item_right">12123432.22元</div>
-          </div>
-        </div>
-      </div>
-
-      <div class="mortgage_bom_item">
-        <div class="mortgage_bom_item_tit">
-          <div class="mortgage_bom_item_tit_left">
-            <span>
-              <svg-icon
-                icon-class="data"
-                class="el-input__icon"
-                style="height: 16px; width: 16px"
-              />
-            </span>
-            库存分析图
-          </div>
-          <div class="mortgage_bom_item_tit_right">
-            <el-select v-model="dayValue" placeholder="请选择日期">
-              <el-option
-                v-for="item in day"
-                :key="item.value"
-                :label="item.label"
-                :value="item.value"
-              >
-              </el-option>
-            </el-select>
-          </div>
-        </div>
-        <div class="mortgage_bom_item_cont">
-          <barlineEachartsVue
-            :width="`100%`"
-            :height="`100%`"
-          ></barlineEachartsVue>
-        </div>
-      </div>
-      <div class="mortgage_bom_item">
-        <div class="mortgage_bom_item_tit">
-          <div class="mortgage_bom_item_tit_left">
-            <span>
-              <svg-icon
-                icon-class="lines"
-                class="el-input__icon"
-                style="height: 16px; width: 16px"
-              />
-            </span>
-            仓库库存表
-          </div>
-          <div class="mortgage_bom_item_tit_right"></div>
-        </div>
-        <div class="mortgage_bom_item_cont">
-          <div class="mortgage_bom_item_cont_item">
-            <div class="mortgage_bom_item_cont_item_left">常温仓</div>
-            <div class="mortgage_bom_item_cont_item_right">12123432.22元</div>
-          </div>
-          <div class="mortgage_bom_item_cont_item">
-            <div class="mortgage_bom_item_cont_item_left">门店</div>
-            <div class="mortgage_bom_item_cont_item_right">12123432.22元</div>
-          </div>
-          <div class="ditus" @click="dialogVisible = true">
-            <img src="@/assets/image/map.jpg" alt="">
-          </div>
-        </div>
-      </div>
-    </div>
-
-    <el-dialog
-      title="门店分布"
-      :visible.sync="dialogVisible"
-      width="70%">
-      <div class="iframemap">
-       <iframe src="http://jianguan.yyundong.com/map365/#/map" frameborder="0"></iframe> 
-      </div>
-    </el-dialog>
-
-    <el-dialog
-      title="查看视频"
-      :visible.sync="lookvideo"
-      width="50%">
-      <div class="loockvideo">
-        <video autoplay src="https://cloud.video.taobao.com/play/u/null/p/1/e/6/t/1/437270439243.mp4"></video>
-      </div>
-    </el-dialog>
-  </div>
+	<div class="mortgage">
+		<div class="mortgage_tit">36524保证类贷款项目</div>
+		<div class="mortgage_top">
+			<div class="mortgage_top_item">
+				<div class="mortgage_top_item_tit">
+					<div class="mortgage_top_item_tit_left">
+						<span>
+							<svg-icon slot="prefix" icon-class="word" class="el-input__icon"
+								style="height: 16px; width: 16px" />
+						</span>
+						数据总览
+					</div>
+					<div class="mortgage_top_item_tit_right">
+						<el-date-picker v-model="times" @change="selectTime" type="date" placeholder="选择日期"
+							format="yyyy-MM-dd" value-format="yyyy-MM-dd">
+						</el-date-picker>
+					</div>
+				</div>
+				<div class="mortgage_top_item_coner">
+					<div class="mortgage_top_item_coner_eat">
+						<pieLineEachartsVue :width="`100%`" :height="`100%`" :chartData="chartData">
+						</pieLineEachartsVue>
+					</div>
+					<div class="mortgage_top_item_coner_con">
+						<span> 授信：{{info.creditLimit}}元 </span>
+
+						<span> 用信：{{info.useLimit}}元 </span>
+					</div>
+				</div>
+			</div>
+			<div class="mortgage_top_item">
+				<div class="mortgage_top_item_tit" style="margin-bottom: 10px">
+					<div class="mortgage_top_item_tit_left">
+						<span>
+							<svg-icon slot="prefix" icon-class="home" class="el-input__icon"
+								style="height: 16px; width: 16px" />
+						</span>
+						仓库安防
+					</div>
+					<div class="mortgage_top_item_tit_right">
+						<el-select v-model="wareValue" placeholder="请选择仓库">
+							<el-option v-for="item in warehouse" :key="item.value" :label="item.label"
+								:value="item.value">
+							</el-option>
+						</el-select>
+					</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/tablist.jpg" alt="" />
+							<div class="mortgage_top_item_top_btn1" @click="cameraClock(0)" />
+							<div class="mortgage_top_item_top_btn2" @click="cameraClock(1)" />
+							<div class="mortgage_top_item_top_btn3" @click="cameraClock(2)" />
+							<div 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_top">
+							<div class="mortgage_top_item_cons_right_top_video">
+								<iframe :src="spUrl" width="450" height="150" id="ysOpenDevice" allowfullscreen>
+								</iframe>
+							</div>
+							<div class="mortgage_top_item_cons_right_top_foor">
+								<div class="invie">{{cameraInfo.name}}</div>
+
+								<div class="huishie">
+
+									<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>
+						<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="containers">
+								<div class="container_item">
+									2023-11-19&nbsp;&nbsp;19:33:21&nbsp;&nbsp;&nbsp;&nbsp;<span>摄像头1号离线</span>
+								</div>
+								<div class="container_item">
+									2023-11-19&nbsp;&nbsp;19:33:21&nbsp;&nbsp;&nbsp;&nbsp;<span>摄像头1号离线</span>
+								</div>
+								<div class="container_item">
+									2023-11-19&nbsp;&nbsp;19:33:21&nbsp;&nbsp;&nbsp;&nbsp;<span>摄像头1号离线</span>
+								</div>
+								<div class="container_item">
+									2023-11-19&nbsp;&nbsp;19:33:21&nbsp;&nbsp;&nbsp;&nbsp;<span>摄像头1号离线</span>
+								</div>
+							</div>
+						</div>
+					</div>
+				</div>
+			</div>
+		</div>
+		<div class="mortgage_bom">
+			<div class="mortgage_bom_item">
+				<div class="mortgage_bom_item_tit">
+					<div class="mortgage_bom_item_tit_left">
+						<span>
+							<svg-icon icon-class="jianguan" class="el-input__icon" style="height: 16px; width: 16px" />
+						</span>
+						监管数据
+					</div>
+					<div class="mortgage_bom_item_tit_right"></div>
+				</div>
+				<div class="mortgage_bom_item_cont">
+					<div class="mortgage_bom_item_cont_item">
+						<div class="mortgage_bom_item_cont_item_left">账户余额</div>
+						<div class="mortgage_bom_item_cont_item_right">{{info.accountsBalance}}元</div>
+					</div>
+					<div class="mortgage_bom_item_cont_item">
+						<div class="mortgage_bom_item_cont_item_left">应收账款</div>
+						<div class="mortgage_bom_item_cont_item_right">{{info.accountsReceivable}}元</div>
+					</div>
+					<div class="mortgage_bom_item_cont_item">
+						<div class="mortgage_bom_item_cont_item_left">质物库存价值</div>
+						<div class="mortgage_bom_item_cont_item_right">{{info.stockAmount}}元</div>
+					</div>
+					<div class="mortgage_bom_item_cont_item">
+						<div class="mortgage_bom_item_cont_item_left">在途货物价值</div>
+						<div class="mortgage_bom_item_cont_item_right">{{info.transitAmount}}元</div>
+					</div>
+					<div class="mortgage_bom_item_cont_item">
+						<div class="mortgage_bom_item_cont_item_left">预付款</div>
+						<div class="mortgage_bom_item_cont_item_right">{{info.advancePayment}}元</div>
+					</div>
+				</div>
+			</div>
+
+			<div class="mortgage_bom_item">
+				<div class="mortgage_bom_item_tit">
+					<div class="mortgage_bom_item_tit_left">
+						<span>
+							<svg-icon icon-class="data" class="el-input__icon" style="height: 16px; width: 16px" />
+						</span>
+						库存分析图
+					</div>
+					<div class="mortgage_bom_item_tit_right">
+						<el-select v-model="dayValue" placeholder="请选择日期">
+							<el-option v-for="item in day" :key="item.value" :label="item.label" :value="item.value">
+							</el-option>
+						</el-select>
+					</div>
+				</div>
+				<div class="mortgage_bom_item_cont">
+					<barlineEachartsVue :width="`100%`" :height="'270px'" :chartData="chartData2"></barlineEachartsVue>
+				</div>
+			</div>
+			<div class="mortgage_bom_item">
+				<div class="mortgage_bom_item_tit">
+					<div class="mortgage_bom_item_tit_left">
+						<span>
+							<svg-icon icon-class="lines" class="el-input__icon" style="height: 16px; width: 16px" />
+						</span>
+						仓库库存表
+					</div>
+					<div class="mortgage_bom_item_tit_right"></div>
+				</div>
+				<div class="mortgage_bom_item_cont">
+					<div class="mortgage_bom_item_cont_item">
+						<div class="mortgage_bom_item_cont_item_left">常温仓</div>
+						<div class="mortgage_bom_item_cont_item_right">{{inventoryInfo.changwencang}}元</div>
+					</div>
+					<div class="mortgage_bom_item_cont_item">
+						<div class="mortgage_bom_item_cont_item_left">门店</div>
+						<div class="mortgage_bom_item_cont_item_right">{{inventoryInfo.mendian}}元</div>
+					</div>
+					<div class="ditus" @click="dialogVisible = true">
+						<img src="/image/map.jpg" alt="">
+					</div>
+				</div>
+			</div>
+		</div>
+
+		<el-dialog title="门店分布" :visible.sync="dialogVisible" width="85%">
+			<div class="iframemap">
+				<iframe src="http://jianguan.yyundong.com/map365/#/map" frameborder="0"></iframe>
+			</div>
+		</el-dialog>
+
+		<el-dialog title="查看视频" :visible.sync="lookvideo" width="50%">
+			<div class="loockvideo">
+				<video autoplay src="https://cloud.video.taobao.com/play/u/null/p/1/e/6/t/1/437270439243.mp4"></video>
+			</div>
+		</el-dialog>
+
+		<!-- 查看监控 -->
+		<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>
 </template>
 
 <script>
-import barlineEachartsVue from "../echarts/barlineEacharts.vue";
-import pieLineEachartsVue from "../echarts/pieLineEacharts.vue";
-import {getDateRang} from  '@/utils/index'
-export default {
-  components: { barlineEachartsVue, pieLineEachartsVue },
-  data() {
-    return {
-      options: [
-        {
-          value: "选项1",
-          label: "2023-11-14",
-        },
-        {
-          value: "选项2",
-          label: "2023-11-14",
-        },
-        {
-          value: "选项3",
-          label: "2023-11-14",
-        },
-        {
-          value: "选项4",
-          label: "2023-11-14",
-        },
-        {
-          value: "选项5",
-          label: "2023-11-14",
-        },
-      ],
-      times: "",
-      warehouse: [
-        {
-          value: "选项1",
-          label: "常温仓",
-        }
-      ],
-      wareValue: "常温仓",
-      day: [
-        {
-          value: "选项1",
-          label: "15日",
-        }
-      ],
-      dayValue: "15日",
-      dialogVisible:false,
-      videos:true,
-      lookvideo:false
-    };
-  },
-  mounted(){
-    this.times=getDateRang('yesterday')
-  },
-  methods:{
-    clivideo(){
-      this.videos = !this.videos
-      this.lookvideo = true
-    }
-  }
-};
+	import req from '@/api/gd36524/store'
+	import barlineEachartsVue from "../echarts/barlineEacharts.vue";
+	import pieLineEachartsVue from "../echarts/pieLineEacharts.vue";
+	import {
+		getDateRang
+	} from '@/utils/index'
+	export default {
+		components: {
+			barlineEachartsVue,
+			pieLineEachartsVue
+		},
+		data() {
+			return {
+				times: getDateRang('yesterday'),
+				warehouse: [{
+					value: "选项1",
+					label: "常温仓",
+				}],
+				wareValue: "常温仓",
+				day: [{
+					value: "选项1",
+					label: "15日",
+				}],
+				dayValue: "15日",
+				dialogVisible: false,
+				videos: true,
+				lookvideo: false,
+				dialogImageJK: false,
+				info: {
+					creditLimit: "--",
+					useLimit: "--",
+					accountsBalance: "--",
+					accountsReceivable: "--",
+					stockAmount: "--",
+					transitAmount: "--",
+					advancePayment: "--",
+				},
+				chartData: {
+					pledgeRatePercent: "",
+					state: "",
+					bankPledgeRate: "",
+					data: []
+				},
+				cameraList: [],
+				cameraInfo: {
+					name: ""
+				},
+				StatusCountInfo: {
+					//offline离线  online在线 
+					offline: "0",
+					online: "0"
+				},
+				spUrl: "",
+				inventoryInfo:{
+					mendian:"--",
+					changwencang:"--",
+				},
+				chartData2:{
+					date:[],
+					changwencang:[],
+					gongyinglian:[],
+				}
+			};
+		},
+		created() {
+			this.loadList()
+			this.getOtherList();
+			this.getStatusCount();
+			this.getInventory()
+			this.getReportInventory()
+		},
+		methods: {
+			getReportInventory(){
+				req.getReportInventory().then(res => {
+					console.log('getReportInventory:', res)
+					
+						this.chartData2 = {
+							date:res.data.date,
+							changwencang:res.data.changwencang,
+							gongyinglian:res.data.gongyinglian,
+							
+						}
+				}).catch(e => {
+					console.log('GdinventoryLog-loadList-ee:', e)
+				})
+			},
+			getInventory(){
+				req.getInventory(this.times).then(res => {
+					console.log('getInventory:', res)
+							this.inventoryInfo = 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)
+				})
+			},
+			
+
+			loadList() {
+
+				var params = {
+					orderDate: this.times
+				}
+
+				console.log('params:', params)
+
+				req.getProjectDaily(params).then(res => {
+					console.log('getProjectDaily:', res)
+					if (res.data) {
+						this.info = res.data
+
+						this.chartData = {
+
+							pledgeRatePercent: res.data.pledgeRatePercent,
+							state: res.data.state,
+							bankPledgeRate: res.data.bankPledgeRate,
+							data: [{
+									value: res.data.accountsBalance,
+									legendname: '种类01',
+									name: "账户余额",
+									itemStyle: {
+										color: "#5087ec"
+									}
+								},
+								{
+									value: res.data.accountsReceivable,
+									legendname: '种类02',
+									name: "应收账款",
+									itemStyle: {
+										color: "#68bbc4"
+									}
+								},
+								{
+									value: res.data.stockAmount,
+									legendname: '种类03',
+									name: "物质库存价值",
+									itemStyle: {
+										color: "#58a55c"
+									}
+								},
+								{
+									value: res.data.transitAmount,
+									legendname: '种类04',
+									name: "在途货物价值",
+									itemStyle: {
+										color: "#f2bd42"
+									}
+								},
+								{
+									value: res.data.advancePayment,
+									legendname: '种类05',
+									name: "预付款",
+									itemStyle: {
+										color: "#ee752f"
+									}
+								},
+							]
+						}
+
+					} else {
+						this.info = {}
+
+						this.chartData = {
+							pledgeRatePercent: "",
+							state: "",
+							bankPledgeRate: "",
+							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>
-.mortgage {
-  width: 100%;
-  height: 100%;
-  box-sizing: border-box;
-  padding: 0px 20px 20px 20px;
-  display: flex;
-  flex-direction: column;
-  position: relative;
-  .mortgage_tit {
-    line-height: 50px;
-    font-size: 24px;
-    font-weight: bold;
-    color: #000;
-  }
-  .mortgage_top {
-    width: 100%;
-    height: calc((100% - 50px) / 2);
-    position: relative;
-    display: flex;
-    justify-content: space-between;
-    margin-bottom: 40px;
-    .mortgage_top_item {
-      height: 100%;
-      position: relative;
-      &:nth-of-type(1) {
-        width: 26%;
-        box-sizing: border-box;
-        padding-right: 30px;
-        ::v-deep .el-select {
-          width: 150px;
-          .el-input {
-            .el-input__inner {
-              background: transparent;
-              border: transparent;
-            }
-          }
-        }
-        .mortgage_top_item_tit_right {
-          flex: 1;
-          position: relative;
-          justify-content: right;
-          ::v-deep .el-date-editor{
-            width: 150px;
-            .el-input__inner{
-              background: transparent;
-              border: none;
-            }
-            .el-input__prefix{
-              display: none;
-            }
-          }
-          &::before {
-            content: "";
-            position: absolute;
-            width: 100%;
-            height: 100%;
-            bottom: 5px;
-            border-bottom: solid 4px #dadada;
-          }
-        }
-      }
-      &:nth-of-type(2) {
-        width: 73%;
-        box-sizing: border-box;
-        padding-right: 50px;
-        .mortgage_top_item_tit {
-          .mortgage_top_item_tit_left {
-            width: auto;
-            margin-right: 10px;
-          }
-        }
-
-        ::v-deep .el-select {
-          width: 150px;
-          .el-input {
-            .el-input__inner {
-              background: transparent;
-              border: transparent;
-            }
-          }
-        }
-      }
-      .mortgage_top_item_tit_right {
-        flex: 1;
-        position: relative;
-        justify-content: right;
-        &::before {
-          content: "";
-          position: absolute;
-          width: 100%;
-          height: 100%;
-          bottom: 5px;
-          border-bottom: solid 4px #dadada;
-        }
-      }
-      .mortgage_top_item_tit {
-        height: 40px;
-        display: flex;
-        position: relative;
-        justify-content: space-between;
-        .mortgage_top_item_tit_left {
-          width: auto;
-          height: 100%;
-          display: flex;
-          align-items: center;
-          margin-right: 10px;
-          font-size: 20px;
-          span {
-            margin-right: 10px;
-          }
-          ::v-deep .svg-icon {
-            cursor: pointer;
-            width: 24px !important;
-            height: 24px !important;
-          }
-        }
-        .mortgage_top_item_tit_right {
-          width: 50%;
-          height: 100%;
-          display: flex;
-          justify-content: right;
-          align-items: center;
-          span {
-            margin-right: 20px;
-          }
-        }
-      }
-      .mortgage_top_item_coner {
-        width: 100%;
-        height: calc(100% - 40px);
-        position: relative;
-        .mortgage_top_item_coner_eat {
-          width: 100%;
-          height: 90%;
-        }
-        .mortgage_top_item_coner_con {
-          width: 100%;
-          height: 10%;
-          display: flex;
-          align-items: center;
-          box-sizing: border-box;
-          padding-left: 30px;
-          justify-content: space-between;
-          span {
-            color: #49a6e2;
-            font-weight: bold;
-            font-size: 18px;
-          }
-        }
-      }
-      .mortgage_top_item_top {
-        width: 100%;
-        height: 85%;
-        position: relative;
-        img {
-          width: 100%;
-          height: 100%;
-        }
-      }
-      .mortgage_top_item_cons {
-        width: 100%;
-        height: calc(100% - 50px);
-        position: relative;
-        display: flex;
-        justify-content: space-between;
-        .mortgage_top_item_cons_left {
-          width: 58%;
-          height: 100%;
-          position: relative;
-        }
-        .mortgage_top_item_cons_right {
-          width: 40%;
-          height: 100%;
-          box-sizing: border-box;
-          padding-left: 30px;
-          position: relative;
-          .mortgage_top_item_cons_right_top {
-            height: 50%;
-            width: 100%;
-            margin-bottom: 10px;
-            position: relative;
-            .mortgage_top_item_cons_right_top_video {
-              width: 100%;
-              height: 90%;
-              position: relative;
-              img{
-                width: 100%;
-                height: 100%;
-              }
-            }
-            .mortgage_top_item_cons_right_top_foor {
-              width: 100%;
-              height: 10%;
-              display: flex;
-              position: relative;
-              .invie {
-                width: auto;
-                height: 100%;
-                color: #999;
-                display: flex;
-                align-items: center;
-              }
-              .huishie {
-                flex: 1;
-                height: 100%;
-                display: flex;
-                color: #999;
-                align-items: center;
-                justify-content: right;
-                span {
-                  margin-left: 10px;
-                }
-              }
-            }
-          }
-          .mortgage_top_item_cons_right_bom {
-            height: calc(50% - 10px);
-            width: 100%;
-            position: relative;
-            .titele {
-              width: 100%;
-              height: 40px;
-              display: flex;
-              align-items: center;
-              .titele_left {
-                width: auto;
-                height: 100%;
-                line-height: 40px;
-                margin-right: 5px;
-              }
-              .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;
-                }
-              }
-            }
-            .containers {
-              width: 100%;
-              height: calc(100% - 40px);
-              position: relative;
-              display: flex;
-              background: transparent;
-              justify-content: center;
-              flex-wrap: wrap;
-              .container_item {
-                width: 100%;
-                height: 30px;
-                line-height: 30px;
-                color: #999;
-                font-size: 16px;
-                font-family: '微软雅黑';
-                box-sizing: border-box;
-                padding-left: 20px;
-                span{
-                  margin-left: 10px;
-                }
-              }
-            }
-          }
-        }
-      }
-      .mortgage_top_item_bom {
-        height: 15%;
-        width: 100%;
-        display: flex;
-        position: relative;
-        .mortgage_top_item_bom_left {
-          display: flex;
-          width: auto;
-          height: 100%;
-          align-items: flex-end;
-          .mortgage_top_item_bom_left_item {
-            width: 130px;
-            display: flex;
-            height: 45px;
-            cursor: pointer;
-            background: #018ad2;
-            color: #fff;
-            justify-content: center;
-            align-items: center;
-            border-right: solid 1px #dadada;
-
-            ::v-deep .svg-icon {
-              cursor: pointer;
-              width: 16px !important;
-              height: 16px !important;
-            }
-            &:nth-of-type(1) {
-              span {
-                width: 30px;
-                height: 30px;
-                display: flex;
-                align-items: center;
-                justify-content: center;
-                border-radius: 50%;
-                background: #11c155;
-                margin-right: 5px;
-              }
-            }
-            &:nth-of-type(2) {
-              span {
-                width: 30px;
-                height: 30px;
-                border-radius: 50%;
-                background: #f57f19;
-                margin-right: 5px;
-              }
-            }
-            &:nth-of-type(3) {
-              span {
-                width: 30px;
-                height: 30px;
-                border-radius: 50%;
-                background: #5b9cf7;
-                margin-right: 5px;
-              }
-            }
-          }
-        }
-        .mortgage_top_item_bom_right {
-          flex: 1;
-          height: 100%;
-          display: flex;
-          align-items: flex-end;
-          justify-content: right;
-          .mortgage_top_item_bom_right_item {
-            width: 130px;
-            height: 45px;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            background: #e9f7fa;
-            border: solid #71b9f1 1px;
-
-            ::v-deep .svg-icon {
-              cursor: pointer;
-              width: 24px !important;
-              height: 24px !important;
-            }
-            &:nth-of-type(1) {
-              color: #6082fc;
-              span {
-                background: #1d62e2;
-                width: 30px;
-                height: 30px;
-                border-radius: 50%;
-                display: flex;
-                align-items: center;
-                justify-content: center;
-                margin: 0px 3px;
-              }
-              p {
-                color: #6082fc;
-                font-weight: bold;
-              }
-            }
-            &:nth-of-type(2) {
-              color: #6e7173;
-              span {
-                background: #4b4b4b;
-                width: 30px;
-                height: 30px;
-                display: flex;
-                align-items: center;
-                justify-content: center;
-                border-radius: 50%;
-                margin: 0px 3px;
-              }
-              p {
-                color: #4d4d4e;
-                font-weight: bold;
-              }
-            }
-          }
-        }
-      }
-    }
-  }
-  .mortgage_bom {
-    width: 100%;
-    height: calc((100% - 75px) / 2);
-    display: flex;
-    align-items: center;
-    position: relative;
-    .mortgage_bom_item {
-      height: 100%;
-      &:nth-of-type(1) {
-        width: 26%;
-        box-sizing:border-box;
-        padding-right: 30px;
-        .mortgage_bom_item_cont {
-          
-          box-sizing: border-box;
-          padding: 20px;
-          .mortgage_bom_item_cont_item {
-            &:last-child {
-              border-bottom: none;
-            }
-          }
-        }
-      }
-      &:nth-of-type(2) {
-        width: 43%;
-        box-sizing: border-box;
-        padding: 0px 30px 0px 20px;
-      }
-      &:nth-of-type(3) {
-        width: 28%;
-        .mortgage_bom_item_cont {
-          box-sizing: border-box;
-          padding-left: 45px;
-          .mortgage_bom_item_cont_item {
-            &:last-child {
-              border-bottom: none;
-            }
-          }
-        }
-      }
-      .mortgage_bom_item_tit {
-        height: 40px;
-        width: 100%;
-        position: relative;
-        margin-bottom: 10px;
-        display: flex;
-        .mortgage_bom_item_tit_left {
-          width: auto;
-          display: flex;
-          align-items: center;
-          margin-right: 5px;
-          height: 100%;
-          font-size: 20px;
-          span {
-            margin-right: 10px;
-          }
-        }
-        .mortgage_bom_item_tit_right {
-          flex: 1;
-          position: relative;
-          display: flex;
-          justify-content: right;
-          height: 100%;
-
-          ::v-deep .el-select {
-            width: 150px;
-            .el-input {
-              .el-input__inner {
-                background: transparent;
-                border: transparent;
-              }
-            }
-          }
-        }
-        .mortgage_bom_item_tit_right::before {
-          content: "";
-          position: absolute;
-          width: 100%;
-          height: 100%;
-          border-bottom: solid 4px #dadada;
-          bottom: 5px;
-          left: 0px;
-        }
-      }
-      .mortgage_bom_item_cont {
-        width: 100%;
-        height: calc(100% - 100px);
-        position: relative;
-
-        .mortgage_bom_item_cont_item {
-          width: 100%;
-          height: calc(100% / 5);
-          position: relative;
-          display: flex;
-          border-bottom: solid 1px #dadada;
-          .mortgage_bom_item_cont_item_left {
-            width: 50%;
-            height: 100%;
-            display: flex;
-            align-items: center;
-            color: #333;
-          }
-          .mortgage_bom_item_cont_item_right {
-            width: 50%;
-            height: 100%;
-            display: flex;
-            align-items: center;
-            justify-content: right;
-            color: #333;
-          }
-        }
-      }
-      .ditus {
-        height: 160px;
-        width: 100%;
-        position: relative;
-        cursor: pointer;
-          img{
-            width: 100%;
-            height: 100%;
-          }
-      }
-    }
-  }
-  ::v-deep .svg-icon {
-    cursor: pointer;
-    width: 30px !important;
-    height: 30px !important;
-
-  }
-  .iframemap{
-    width: 100%;
-    height: 1000px;
-    iframe{
-      width: 100%;
-      height: 100%;
-    }
-  }
-  .loockvideo{
-    width: 100%;
-    height: 300px;
-    video{
-      width: 100%;
-      height: 100%;
-    }
-  }
-}
+	.mortgage {
+		width: 100%;
+		height: 100%;
+		box-sizing: border-box;
+		padding: 0px 20px 20px 20px;
+		display: flex;
+		flex-direction: column;
+		position: relative;
+
+		.mortgage_tit {
+			line-height: 50px;
+			font-size: 24px;
+			font-weight: bold;
+			color: #000;
+		}
+
+		.mortgage_top {
+			width: 100%;
+			height: calc((100% - 50px) / 2);
+			position: relative;
+			display: flex;
+			justify-content: space-between;
+			margin-bottom: 40px;
+
+			.mortgage_top_item {
+				height: 100%;
+				position: relative;
+
+				&:nth-of-type(1) {
+					width: 26%;
+					box-sizing: border-box;
+					padding-right: 30px;
+
+					::v-deep .el-select {
+						width: 150px;
+
+						.el-input {
+							.el-input__inner {
+								background: transparent;
+								border: transparent;
+							}
+						}
+					}
+
+					.mortgage_top_item_tit_right {
+						flex: 1;
+						position: relative;
+						justify-content: right;
+
+						::v-deep .el-date-editor {
+							width: 150px;
+
+							.el-input__inner {
+								background: transparent;
+								border: none;
+							}
+
+							.el-input__prefix {
+								display: none;
+							}
+						}
+
+						&::before {
+							content: "";
+							position: absolute;
+							width: 100%;
+							height: 100%;
+							bottom: 5px;
+							border-bottom: solid 4px #dadada;
+						}
+					}
+				}
+
+				&:nth-of-type(2) {
+					width: 73%;
+					box-sizing: border-box;
+					padding-right: 50px;
+
+					.mortgage_top_item_tit {
+						.mortgage_top_item_tit_left {
+							width: auto;
+							margin-right: 10px;
+						}
+					}
+
+					::v-deep .el-select {
+						width: 150px;
+
+						.el-input {
+							.el-input__inner {
+								background: transparent;
+								border: transparent;
+							}
+						}
+					}
+				}
+
+				.mortgage_top_item_tit_right {
+					flex: 1;
+					position: relative;
+					justify-content: right;
+
+					&::before {
+						content: "";
+						position: absolute;
+						width: 100%;
+						height: 100%;
+						bottom: 5px;
+						border-bottom: solid 4px #dadada;
+					}
+				}
+
+				.mortgage_top_item_tit {
+					height: 40px;
+					display: flex;
+					position: relative;
+					justify-content: space-between;
+
+					.mortgage_top_item_tit_left {
+						width: auto;
+						height: 100%;
+						display: flex;
+						align-items: center;
+						margin-right: 10px;
+						font-size: 20px;
+
+						span {
+							margin-right: 10px;
+						}
+
+						::v-deep .svg-icon {
+							cursor: pointer;
+							width: 24px !important;
+							height: 24px !important;
+						}
+					}
+
+					.mortgage_top_item_tit_right {
+						width: 50%;
+						height: 100%;
+						display: flex;
+						justify-content: right;
+						align-items: center;
+
+						span {
+							margin-right: 20px;
+						}
+					}
+				}
+
+				.mortgage_top_item_coner {
+					width: 100%;
+					height: calc(100% - 40px);
+					position: relative;
+
+					.mortgage_top_item_coner_eat {
+						width: 100%;
+						height: 90%;
+					}
+
+					.mortgage_top_item_coner_con {
+						width: 100%;
+						height: 10%;
+						display: flex;
+						align-items: center;
+						box-sizing: border-box;
+						padding-left: 30px;
+						padding-right: 30px;
+						justify-content: space-between;
+
+						span {
+							color: #49a6e2;
+							font-weight: bold;
+							font-size: 18px;
+						}
+					}
+				}
+
+				.mortgage_top_item_top {
+					width: 100%;
+					height: 85%;
+
+					img {
+						width: 100%;
+						height: 100%;
+					}
+
+					.mortgage_top_item_top_btn1 {
+						z-index: 100;
+						position: relative;
+						top: -259px;
+						left: 81px;
+						width: 53px;
+						height: 50px;
+						background-color: #f0f;
+						/*设置透明度，0为完全透明，1为不透明*/
+						opacity: 0;
+					}
+
+					.mortgage_top_item_top_btn2 {
+						z-index: 100;
+						position: relative;
+						top: -326px;
+						left: 481px;
+						width: 53px;
+						height: 50px;
+						background-color: #1d62e2;
+						/*设置透明度，0为完全透明，1为不透明*/
+						opacity: 0;
+					}
+
+					.mortgage_top_item_top_btn3 {
+						z-index: 100;
+						position: relative;
+						top: -161px;
+						left: 81px;
+						width: 53px;
+						height: 50px;
+						background-color: #1d62e2;
+						/*设置透明度，0为完全透明，1为不透明*/
+						opacity: 0;
+					}
+
+					.mortgage_top_item_top_btn4 {
+						z-index: 100;
+						position: relative;
+						top: -214px;
+						left: 481px;
+						width: 53px;
+						height: 50px;
+						background-color: #1d62e2;
+						/*设置透明度，0为完全透明，1为不透明*/
+						opacity: 0;
+					}
+				}
+
+				.mortgage_top_item_cons {
+					width: 100%;
+					height: calc(100% - 50px);
+					position: relative;
+					display: flex;
+					justify-content: space-between;
+
+					.mortgage_top_item_cons_left {
+						width: 58%;
+						height: 100%;
+						position: relative;
+					}
+
+					.mortgage_top_item_cons_right {
+						width: 40%;
+						height: 100%;
+						box-sizing: border-box;
+						padding-left: 30px;
+						position: relative;
+
+						.mortgage_top_item_cons_right_top {
+							height: 50%;
+							width: 100%;
+							margin-bottom: 10px;
+							position: relative;
+
+							.mortgage_top_item_cons_right_top_video {
+								width: 100%;
+								height: 90%;
+								position: relative;
+
+								img {
+									width: 100%;
+									height: 100%;
+								}
+							}
+
+							.mortgage_top_item_cons_right_top_foor {
+								margin-top: 10px;
+								width: 100%;
+								height: 10%;
+								display: flex;
+								position: relative;
+
+								.invie {
+									width: auto;
+									height: 100%;
+									color: #999;
+									display: flex;
+									align-items: center;
+								}
+
+								.huishie {
+									flex: 1;
+									z-index: 100;
+									height: 100%;
+									display: flex;
+									color: #999;
+									align-items: center;
+									justify-content: right;
+
+									span {
+										margin-left: 10px;
+									}
+								}
+							}
+						}
+
+						.mortgage_top_item_cons_right_bom {
+							height: calc(50% - 10px);
+							width: 100%;
+							position: relative;
+
+							.titele {
+								width: 100%;
+								height: 40px;
+								display: flex;
+								align-items: center;
+
+								.titele_left {
+									width: auto;
+									height: 100%;
+									line-height: 40px;
+									margin-right: 5px;
+								}
+
+								.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;
+									}
+								}
+							}
+
+							.containers {
+								width: 100%;
+								height: calc(100% - 1px);
+								position: relative;
+								display: flex;
+								background: transparent;
+								justify-content: center;
+								flex-wrap: wrap;
+
+								.container_item {
+									width: 100%;
+									height: 30px;
+									line-height: 30px;
+									color: #999;
+									font-size: 16px;
+									font-family: '微软雅黑';
+									box-sizing: border-box;
+									padding-left: 20px;
+
+									span {
+										margin-left: 10px;
+									}
+								}
+							}
+						}
+					}
+				}
+
+				.mortgage_top_item_bom {
+					margin-top: 5px;
+					height: 15%;
+					width: 100%;
+					display: flex;
+					position: relative;
+
+					.mortgage_top_item_bom_left {
+						display: flex;
+						width: auto;
+						height: 100%;
+						align-items: flex-end;
+
+						.mortgage_top_item_bom_left_item {
+							width: 130px;
+							display: flex;
+							height: 45px;
+							cursor: pointer;
+							background: #018ad2;
+							color: #fff;
+							justify-content: center;
+							align-items: center;
+							border-right: solid 1px #dadada;
+
+							::v-deep .svg-icon {
+								cursor: pointer;
+								width: 16px !important;
+								height: 16px !important;
+							}
+
+							&:nth-of-type(1) {
+								span {
+									width: 30px;
+									height: 30px;
+									display: flex;
+									align-items: center;
+									justify-content: center;
+									border-radius: 50%;
+									background: #11c155;
+									margin-right: 5px;
+								}
+							}
+
+							&:nth-of-type(2) {
+								span {
+									width: 30px;
+									height: 30px;
+									border-radius: 50%;
+									background: #f57f19;
+									margin-right: 5px;
+								}
+							}
+
+							&:nth-of-type(3) {
+								span {
+									width: 30px;
+									height: 30px;
+									border-radius: 50%;
+									background: #5b9cf7;
+									margin-right: 5px;
+								}
+							}
+						}
+					}
+
+					.mortgage_top_item_bom_right {
+						flex: 1;
+						height: 100%;
+						display: flex;
+						align-items: flex-end;
+						justify-content: right;
+
+						.mortgage_top_item_bom_right_item {
+							width: 130px;
+							height: 45px;
+							display: flex;
+							align-items: center;
+							justify-content: center;
+							background: #e9f7fa;
+							border: solid #71b9f1 1px;
+
+							::v-deep .svg-icon {
+								cursor: pointer;
+								width: 24px !important;
+								height: 24px !important;
+							}
+
+							&:nth-of-type(1) {
+								color: #6082fc;
+
+								span {
+									background: #1d62e2;
+									width: 30px;
+									height: 30px;
+									border-radius: 50%;
+									display: flex;
+									align-items: center;
+									justify-content: center;
+									margin: 0px 3px;
+								}
+
+								p {
+									color: #6082fc;
+									font-weight: bold;
+								}
+							}
+
+							&:nth-of-type(2) {
+								color: #6e7173;
+
+								span {
+									background: #4b4b4b;
+									width: 30px;
+									height: 30px;
+									display: flex;
+									align-items: center;
+									justify-content: center;
+									border-radius: 50%;
+									margin: 0px 3px;
+								}
+
+								p {
+									color: #4d4d4e;
+									font-weight: bold;
+								}
+							}
+						}
+					}
+				}
+			}
+		}
+
+		.mortgage_bom {
+			width: 100%;
+			height: calc((100% - 75px) / 2);
+			display: flex;
+			align-items: center;
+			position: relative;
+
+			.mortgage_bom_item {
+				height: 100%;
+
+				&:nth-of-type(1) {
+					width: 26%;
+					box-sizing: border-box;
+					padding-right: 30px;
+
+					.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;
+							}
+						}
+					}
+				}
+
+				&:nth-of-type(2) {
+					width: 43%;
+					box-sizing: border-box;
+					padding: 0px 30px 0px 20px;
+				}
+
+				&:nth-of-type(3) {
+					width: 28%;
+
+					.mortgage_bom_item_cont {
+						box-sizing: border-box;
+						padding-left: 45px;
+
+						.mortgage_bom_item_cont_item {
+							&:last-child {
+								border-bottom: none;
+							}
+						}
+					}
+				}
+
+				.mortgage_bom_item_tit {
+					height: 40px;
+					width: 100%;
+					position: relative;
+					margin-bottom: 10px;
+					display: flex;
+
+					.mortgage_bom_item_tit_left {
+						width: auto;
+						display: flex;
+						align-items: center;
+						margin-right: 5px;
+						height: 100%;
+						font-size: 20px;
+
+						span {
+							margin-right: 10px;
+						}
+					}
+
+					.mortgage_bom_item_tit_right {
+						flex: 1;
+						position: relative;
+						display: flex;
+						justify-content: right;
+						height: 100%;
+
+						::v-deep .el-select {
+							width: 150px;
+
+							.el-input {
+								.el-input__inner {
+									background: transparent;
+									border: transparent;
+								}
+							}
+						}
+					}
+
+					.mortgage_bom_item_tit_right::before {
+						content: "";
+						position: absolute;
+						width: 100%;
+						height: 100%;
+						border-bottom: solid 4px #dadada;
+						bottom: 5px;
+						left: 0px;
+					}
+				}
+
+				.mortgage_bom_item_cont {
+					width: 100%;
+					height: calc(100% - 100px);
+					position: relative;
+
+					.mortgage_bom_item_cont_item {
+						width: 100%;
+						height: calc(100% / 5);
+						position: relative;
+						display: flex;
+						border-bottom: solid 1px #dadada;
+
+						.mortgage_bom_item_cont_item_left {
+							width: 50%;
+							height: 100%;
+							display: flex;
+							align-items: center;
+							color: #333;
+						}
+
+						.mortgage_bom_item_cont_item_right {
+							width: 50%;
+							height: 100%;
+							display: flex;
+							align-items: center;
+							justify-content: right;
+							color: #333;
+						}
+					}
+				}
+
+				.ditus {
+					height: 160px;
+					width: 100%;
+					position: relative;
+					cursor: pointer;
+
+					img {
+						width: 100%;
+						height: 100%;
+					}
+				}
+			}
+		}
+
+		::v-deep .svg-icon {
+			cursor: pointer;
+			width: 30px !important;
+			height: 30px !important;
+
+		}
+
+		.iframemap {
+			width: 100%;
+			height: 1000px;
+
+			iframe {
+				width: 100%;
+				height: 100%;
+			}
+		}
+
+		.loockvideo {
+			width: 100%;
+			height: 300px;
+
+			video {
+				width: 100%;
+				height: 100%;
+			}
+		}
+	}
 </style>
\ No newline at end of file
diff --git a/vue.config.js b/vue.config.js
index e31206a..c78bbfb 100644
--- a/vue.config.js
+++ b/vue.config.js
@@ -40,7 +40,7 @@ module.exports = {
     },
     proxy: {
       '/api': { // 匹配所有以 '/api'开头的请求路径
-        target: 'http://127.0.0.1:7104',
+        target: process.env.VUE_APP_URL,
          // target: process.env.VUE_APP_URL, // 代理目标的基础路径
         changeOrigin: true, // 支持跨域
         pathRewrite: { // 重写路径: 去掉路径中开头的'/api'