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