4 changed files with 1551 additions and 1340 deletions
@ -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> |
|||
File diff suppressed because it is too large
@ -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> |
|||
Loading…
Reference in new issue