Browse Source

2023-11-17

master
guoxing 2 years ago
parent
commit
ed4d5ff761
  1. BIN
      src/assets/mprtgage/yqpb-icon.png
  2. 5
      src/router/index.js
  3. 8
      src/views/mortgage/index.vue
  4. 51
      src/views/mortgage/yqpb.vue
  5. 276
      src/views/mortgage/yqpb2.vue

BIN
src/assets/mprtgage/yqpb-icon.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.7 MiB

5
src/router/index.js

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

8
src/views/mortgage/index.vue

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

51
src/views/mortgage/yqpb.vue

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

276
src/views/mortgage/yqpb2.vue

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