225 lines
7.2 KiB
Vue
225 lines
7.2 KiB
Vue
<template>
|
||
<div id="data-view">
|
||
<!-- <dv-full-screen-container> -->
|
||
<div id="dv-full-screen-container" style="width: 100%;height: 100%;position: fixed;overflow: hidden;">
|
||
|
||
|
||
<top-header :Name = "showData.name" :Times = "showData.times"/>
|
||
|
||
<div class="main-content" v-if="loadingDone">
|
||
<!-- <digital-flop :TodayData="showData.todayData" :Type="type"/> -->
|
||
<div class="block-left-right-content">
|
||
<scroll-board :ScrollList= "showData.scrollList" />
|
||
<div class="block-top-bottom-content">
|
||
<div class="block-top-content" style="height:100%;display: flex;flex-wrap: wrap;">
|
||
<!-- <rose-chart v-if="chartData1" pieId="roseChart1" :chartData="chartData1"/>
|
||
<rose-chart v-if="chartData2" pieId="roseChart2" :chartData="chartData2"/>
|
||
<rose-chart v-if="chartData3" pieId="roseChart3" :chartData="chartData3"/>
|
||
<bar-chart style="height: 45%;" pieId="roseChart3" :chartData="chartData4"/> -->
|
||
<template v-for="(item,index) in totalData">
|
||
<rose-chart :key="index" v-if="item.setting.reportType == 'pie'" :pieId="'roseChart'+index" :chartData="item" :style="'height:'+item.setting.height+';width:'+item.setting.width+';'"/>
|
||
<bar-chart :key="index" v-if="item.setting.reportType == 'bar'" style="height: 45%;" pieId="roseChart3" :chartData="item" :style="'height:'+item.setting.height+';width:'+item.setting.width+';'"/>
|
||
</template>
|
||
</div>
|
||
|
||
</div>
|
||
|
||
</div>
|
||
<scroll-board-bottom :ScrollList= "showData.scrollList" />
|
||
</div>
|
||
<dv-loading v-else>Loading...</dv-loading>
|
||
<!-- <div style="height: 5%;width: 100%;"></div> -->
|
||
|
||
<!-- </dv-full-screen-container> -->
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import topHeader from './topHeader'
|
||
// import digitalFlop from './digitalFlop'
|
||
import rankingBoard from './rankingBoard'
|
||
import roseChart from './roseChart'
|
||
import waterLevelChart from './waterLevelChart'
|
||
import scrollBoard from './scrollBoard'
|
||
import scrollBoardBottom from './scrollBoardBottom'
|
||
import cards from './cards'
|
||
import rightTotal from './rightTotal.vue'
|
||
import barChart from './barChart.vue'
|
||
export default {
|
||
name: 'DataView',
|
||
components: {
|
||
topHeader,
|
||
// digitalFlop,
|
||
rankingBoard,
|
||
roseChart,
|
||
waterLevelChart,
|
||
scrollBoard,
|
||
scrollBoardBottom,
|
||
cards,
|
||
rightTotal,
|
||
barChart
|
||
},
|
||
data () {
|
||
return {
|
||
type: '',
|
||
setting: {},
|
||
chartData1:null,
|
||
chartData2:null,
|
||
chartData3:null,
|
||
totalData: [],
|
||
todayData: [],
|
||
showData: {
|
||
name: '永盛陶瓷智能数据看榜',
|
||
times: [],
|
||
leftData: [],
|
||
reportedList: [],
|
||
scrollList: [],
|
||
todayData: [],
|
||
bottomData: [],
|
||
allNum: 0,
|
||
reportedNum: 0
|
||
},
|
||
loadingDone: false
|
||
}
|
||
},
|
||
created () {
|
||
this.createdData()
|
||
},
|
||
methods: {
|
||
createdData () {
|
||
let that = this
|
||
|
||
this.$api.post2('/api/web/GetScreenReport?category=A1').then(res => {
|
||
if (res.code === '200') {
|
||
let data = res.data;
|
||
this.chartData1 = data.reportSettings[0];
|
||
this.chartData2 = data.reportSettings[1];
|
||
this.chartData3 = data.reportSettings[2];
|
||
if(data.reportSettings.length>0){
|
||
data.reportSettings.forEach(item=>{
|
||
if(item.setting.reportType != 'rank'){
|
||
this.totalData.push(item)
|
||
}
|
||
})
|
||
}
|
||
if(data.reportSettings[3].data.length>0){
|
||
this.showData.scrollList = data.reportSettings[3].data.map(item => {
|
||
return [item.employee_name,item.proc_name,item.value]
|
||
});
|
||
}
|
||
this.showData.name = '永盛大屏数据看板'
|
||
this.loadingDone = true
|
||
}
|
||
});
|
||
},
|
||
dinnerDataFomat () {
|
||
this.showData.name = this.setting.dinnerName
|
||
this.showData.times = [this.setting.starttime, this.setting.endtime]
|
||
this.showData.allNum = this.dinnerData.details.length
|
||
// 深拷贝 并且 往对象里添加detail
|
||
this.showData.leftData = JSON.parse(JSON.stringify(this.dinnerData.workItemFullData))
|
||
this.showData.leftData.forEach(item => { item.details = [] })
|
||
this.showData.bottomData = JSON.parse(JSON.stringify(this.showData.leftData))
|
||
// 获取已上报数据列表
|
||
let reportedList = this.dinnerData.details.filter((item) => {
|
||
return item.reportID
|
||
})
|
||
// 右侧轮播列表
|
||
// this.showData.scrollList = reportedList.map((item) => {
|
||
// return [item.reportDate, item.className, item.workItemName, item.reportEmployeeName]
|
||
// })
|
||
this.showData.reportedNum = this.showData.scrollList.length
|
||
// 一维数组 转换为 二维数组
|
||
// let categoryList = Object.values(reportedList.reduce((res, item) => {
|
||
// res[item.workItemID] ? res[item.workItemID].push(item) : res[item.workItemID] = [item]
|
||
// return res
|
||
// }, {}))
|
||
// console.log(categoryList, this.showData.leftData, '+++++++++')
|
||
reportedList.forEach((item, index) => {
|
||
this.showData.leftData.forEach((i, idx) => {
|
||
if (item.workItemID === i.ID) {
|
||
i.details.push(item)
|
||
}
|
||
})
|
||
})
|
||
this.dinnerData.details.forEach((item, index) => {
|
||
this.showData.bottomData.forEach((i, idx) => {
|
||
if (item.workItemID === i.ID) {
|
||
i.details.push(item)
|
||
}
|
||
})
|
||
})
|
||
this.loadingDone = true
|
||
},
|
||
// totalDataFomat () {
|
||
// this.showData.name = '各个食堂运营情况总结'
|
||
// this.showData.allNum = 0
|
||
// this.showData.reportedNum = 0
|
||
// this.showData.times = [this.setting.starttime, this.setting.endtime]
|
||
// this.showData.leftData = this.totalData.total.filter(item => {
|
||
// return !!item.dinnerName
|
||
// })
|
||
// this.totalData.total.forEach((item) => {
|
||
// this.showData.allNum += item.quantity
|
||
// this.showData.reportedNum += item.quantityDone
|
||
// })
|
||
// this.loadingDone = true
|
||
// },
|
||
getToday () {
|
||
var today = new Date() // 创建一个表示当前时间的Date对象
|
||
var year = today.getFullYear() // 获取当前年份（四位数）
|
||
var month = today.getMonth() + 1 // 获取当前月份（注意月份从0开始计算，所以需要加上1）
|
||
var day = today.getDate() // 获取当前日期
|
||
return year + '-' + month + '-' + day
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="less">
|
||
#data-view {
|
||
width: 100%;
|
||
height: 100%;
|
||
background-color: #030409;
|
||
color: #fff;
|
||
|
||
#dv-full-screen-container {
|
||
background-image: url('./img/bg.png');
|
||
background-size: 100% 100%;
|
||
box-shadow: 0 0 3px blue;
|
||
display: flex;
|
||
flex-direction: column;
|
||
}
|
||
|
||
.main-content {
|
||
flex: 1;
|
||
display: flex;
|
||
flex-direction: column;
|
||
}
|
||
|
||
.block-left-right-content {
|
||
// flex: 1;
|
||
height: 70%;
|
||
display: flex;
|
||
margin-top: 0.2rem;
|
||
}
|
||
|
||
.block-top-bottom-content {
|
||
flex: 1;
|
||
display: flex;
|
||
flex-direction: column;
|
||
box-sizing: border-box;
|
||
margin-left: 0.2rem;
|
||
}
|
||
|
||
.block-top-content {
|
||
height: 55%;
|
||
display: flex;
|
||
flex-grow: 0;
|
||
box-sizing: border-box;
|
||
// padding-bottom: 20px;
|
||
}
|
||
}
|
||
</style>
|