LiuXue
/
JinZHouXiYiJi_DaPin
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

数据大屏三的修改

main
DengJiangKun 2023-12-09 14:13:32 +08:00
parent cac8709214
commit fe2fcae9a5
5 changed files with 57 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

60
src/components/datav/CenterCmp.vue
View File

@ -2,29 +2,29 @@
<div class="center-cmp"> <div class="center-cmp">
<div class="cc-details"> <div class="cc-details">
<div style="width:40%;height:30px;align-items: center ;font-size: 15px ;text-align: center" > <div style="width:40%;height:30px;align-items: center ;font-size: 15px ;text-align: center;margin-top: 30px" >
<span>当月入库</span> <span>当日入库</span>
</div> </div>
<div style="width:20%;height:30px;align-items: center ;font-size: 15px ;text-align: center" > <div style="width:20%;height:30px;align-items: center ;font-size: 15px ;text-align: center" >
</div> </div>
<div style="width:40%;height:30px;align-items: center ;font-size: 15px ;text-align: center" > <div style="width:40%;height:30px;align-items: center ;font-size: 15px ;text-align: center;margin-top: 30px" >
<span>当月出库</span> <span>当日出库</span>
</div> </div>
</div> </div>
<div class="cc-header"> <div class="cc-header">
<div style="width:40%;height:50px; float: left;display: flex" > <div style="width:40%;height:50px; float: left;display: flex;margin-left: 20px" >
<div class="card">{{r1}}</div> <div class="card">{{this.inZX}}</div>
<div class="card">{{r2}}</div> <!-- <div class="card"></div>-->
<div class="card">{{r3}}</div> <div class="card">{{this.inDZX}}</div>
<div class="card">{{r4}}</div> <!-- <div class="card"></div>-->
<div class="card">{{r5}}</div> <!-- <div class="card"></div>-->
</div> </div>
<div style="width:40%;height:50px; float: left;display: flex" > <div style="width:40%;height:50px; float: left;display: flex;margin-right: -20px" >
<div class="card">{{c1}}</div> <div class="card">{{this.outZX}}</div>
<div class="card">{{c2}}</div> <!-- <div class="card"></div>-->
<div class="card">{{c3}}</div> <div class="card">{{this.outDZX}}</div>
<div class="card">{{c4}}</div> <!-- <div class="card"></div>-->
<div class="card">{{c5}}</div> <!-- <div class="card"></div>-->
</div> </div>
</div> </div>
@ -32,8 +32,10 @@
</div> </div>
<div class="cc-main-container"> <div class="cc-main-container">
<dv-active-ring-chart class="ccmc-middle" :config="config1" /> <dv-decoration-9 style="width:150px;height:150px;margin-left: 40px;margin-top: 10px" :color="['#007ef9', '#052650']">{{this.inAllData}}</dv-decoration-9>
<dv-active-ring-chart class="ccmc-middle" :config="config2" /> <dv-decoration-9 style="width:150px;height:150px;margin-left: 110px;margin-top: 10px" :color="['#007ef9', '#052650']">{{this.outAllData}}</dv-decoration-9>
<!-- <dv-active-ring-chart class="ccmc-middle" :config="config1" />-->
<!-- <dv-active-ring-chart class="ccmc-middle" :config="config2" />-->
</div> </div>
<div class="cc-details"> <div class="cc-details">
@ -66,7 +68,13 @@ export default {
c2:'0', c2:'0',
c3:'0', c3:'0',
c4:'0', c4:'0',
c5:'0' c5:'0',
outAllData:0,
outZX:0,
outDZX:0,
inAllData:0,
inZX:0,
inDZX:0
} }
}, },
mounted () { mounted () {
@ -75,11 +83,13 @@ export default {
this.getListData() this.getListData()
this.getListData2() this.getListData2()
this.getListData3() this.getListData3()
this.getListData4()
}, 2500) }, 2500)
setInterval(this.getListData, 535000) setInterval(this.getListData, 535000)
setInterval(this.getListData2, 545000) setInterval(this.getListData2, 545000)
setInterval(this.getListData3, 555000) setInterval(this.getListData3, 555000)
setInterval(this.getListData4, 60000)
}, },
methods: { methods: {
getListData () { getListData () {
@ -134,6 +144,18 @@ export default {
//let data2=JSON.parse(this.list); //let data2=JSON.parse(this.list);
}) })
},
getListData4(){
this.$axios.post('/api/api/screeView/inOutData',{}).then(res => {
console.log("===============")
console.log(res)
this.outAllData=res.data.outAll;
this.outZX=res.data.outZX;
this.outDZX=res.data.outDZX;
this.inAllData=res.data.inAll;
this.inZX=res.data.inZX;
this.inDZX=res.data.inDZX;
})
} }
} }
} }

4
src/components/datav/LeftChart2.vue
View File

@ -114,8 +114,8 @@ export default {
flex-direction: column; flex-direction: column;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
border-left: 3px solid rgb(6, 30, 93); border-left: 3px solid #052650;
border-right: 3px solid rgb(6, 30, 93); border-right: 3px solid #052650;
} }
.digital-flop-title { .digital-flop-title {

4
src/components/datav/RightChart1.vue
View File

@ -161,7 +161,8 @@ export default {
box-sizing: border-box; box-sizing: border-box;
margin: 0; margin: 0;
padding: 0; padding: 0;
padding: 10px; margin-top: -16px;
right: 20px;
} }
.m-video { .m-video {
@ -171,6 +172,7 @@ export default {
position: relative; position: relative;
background: #ffffff00; background: #ffffff00;
cursor: pointer; cursor: pointer;
transform: scale(0.85);
.u-play { .u-play {
position: absolute; position: absolute;
top: 0; top: 0;

12
src/components/datav/RightChart3.vue
View File

@ -1,6 +1,6 @@
<template> <template>
<div className="bottom-right-table-3"> <div className="bottom-right-table-3">
<dv-scroll-board :config="config1" style="width: 410px;height: 400px;padding: 10px"/> <dv-scroll-board :config="config1" style="width: 350px;height: 300px;margin: 5px 0 0 5px"/>
</div> </div>
</template> </template>
@ -17,7 +17,7 @@ export default {
['<span style="font-size: 24px">料号行</span>', '<span style="font-size: 24px">0</span>'] ['<span style="font-size: 24px">料号行</span>', '<span style="font-size: 24px">0</span>']
], ],
rowNum: 6, rowNum: 6,
headerBGC: '#000fff82', headerBGC: '#061a3a',
oddRowBGC: '#ededed33', oddRowBGC: '#ededed33',
evenRowBGC: '#ededed33', evenRowBGC: '#ededed33',
headerHeight:60, headerHeight:60,
@ -32,14 +32,14 @@ export default {
console.log('123123213123131') console.log('123123213123131')
setTimeout(() => { setTimeout(() => {
this.getListData() this.getListData()
}, 3500) }, 6000)
setInterval(this.getListData, 585000) setInterval(this.getListData, 60000)
}, },
methods: { methods: {
getListData () { getListData () {
// 这里getList获取到的res是接口返回的所有内容（包含code、msg、data等），里面只有data是业务数据 // 这里getList获取到的res是接口返回的所有内容（包含code、msg、data等），里面只有data是业务数据
this.$axios.post('/api/api/screeView/inventoryView',{ this.$axios.post('/api/api/screeView/taskPerformed',{
methodType:9 methodType:9
}) })
.then(res => { .then(res => {
@ -59,7 +59,7 @@ export default {
.bottom-right-table-3 { .bottom-right-table-3 {
width: 400px; width: 400px;
height: 100%; height: 100%;
margin: 0 -5px; margin: 0 -3px;
.border-box-content { .border-box-content {
padding: 20px; padding: 20px;

8
src/components/datav/index.vue
View File

@ -3,7 +3,8 @@
<dv-full-screen-container> <dv-full-screen-container>
<div class="main-header"> <div class="main-header">
<div class="mh-left"></div> <div class="mh-left"></div>
<div class="mh-middle">荆州洗衣机数据可视化平台</div> <!-- <div class="mh-middle">荆州洗衣机数据可视化平台</div>-->
<dv-decoration-7 class="mh-middle" style="margin-left: 40px">荆州洗衣机数据可视化平台</dv-decoration-7>
<div class="mh-right"> <div class="mh-right">
</div> </div>
@ -40,7 +41,7 @@
<div class="right-top-container"> <div class="right-top-container">
<div class="rmctc-right-container"> <div class="rmctc-right-container">
<dv-border-box-8 class="rmctc-chart-1"> <dv-border-box-8 class="rmctc-chart-1" style="width: 358px">
<Right-Chart-1/> <Right-Chart-1/>
@ -98,7 +99,8 @@ export default {
color: #fff; color: #fff;
#dv-full-screen-container { #dv-full-screen-container {
background-image: url('./img/bg3.png'); //background-image: url('./img/bg3.png');
background-color: #050c1e;
background-size: 100% 100%; background-size: 100% 100%;
box-shadow: 0 0 3px blue; box-shadow: 0 0 3px blue;
display: flex; display: flex;