531 lines
25 KiB
Vue
531 lines
25 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">
|
||
<div class="row1-col1" :style="`width:${row1Style.width[0]}; height:${row1Style.height};padding-right:0.1rem;`">
|
||
<div v-for="(rcitem,rcindex) in row1col1report" :key="rcitem.setting.ID" :style="`width:${rcitem.setting.width}; height:${rcitem.setting.height};`">
|
||
<div v-if="rcitem.setting.reportType == 'rank'" style="width: 100%;height: 100%;">
|
||
<div class="rankTitle" style="font-size: 0.2rem;line-height: 0.4rem;text-align: center;font-weight: bold; background-color: rgba(0, 102, 153, 0.4)">{{ rcitem.title }} </div>
|
||
<div class="rankHeader" style="display: flex;">
|
||
<p style="width: 0.5rem;text-align: center;">#</p>
|
||
<p v-for="(item,index) in rcitem.columns" :key="item.code+index" :style="`width:${item.width};text-align:center;`">{{ item.name }}</p>
|
||
</div>
|
||
<!-- <vue-seamless-scroll style="height: calc(100% - 0.9rem);" :data="rcitem.data" class="warp" :classOption="{step:2,limitMoveNum:10}">
|
||
<ul class="item" >
|
||
<li v-for="(item, index) in rcitem.data" :key="index" style="display: flex;" :class="index%2==0?'rowStyle1':'rowStyle2'">
|
||
<div style="width: 0.5rem;display: flex;align-items: center;justify-content: center;" class="rownum">
|
||
<div style="padding:0 0.05rem;background-color:#1981f6;color: #fff;height: 0.3rem;line-height: 0.3rem;border-radius: 0.05rem;">{{index+1}}</div>
|
||
</div>
|
||
<div v-for="i in rcitem.columns" v-text="item[i.code]" :key="i.code" :style="`width:${i.width};text-align:center;`"></div>
|
||
</li>
|
||
</ul>
|
||
</vue-seamless-scroll> -->
|
||
<page-rank :rcitem="rcitem" :warpId="'pageRank'+rcitem.setting.rowNumber+rcitem.setting.columnNumber+rcindex" :pageSize="rcitem.setting.pageSize" :switchSpeed="rcitem.setting.switchSpeed"></page-rank>
|
||
</div>
|
||
<div v-if="rcitem.setting.reportType == 'pie'" style="width: 100%;height: 100%;">
|
||
<rose-chart :pieId="'roseChart'+rcitem.setting.rowNumber+rcitem.setting.columnNumber+rcindex" :chartData="rcitem" style="width: 100%;height: 100%;"/>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="row1-col2" v-if="row1col2report.length>0" :style="`width:${row1Style.width[1]}; height:${row1Style.height};padding-right:0.1rem;`">
|
||
<div v-for="(rcitem,rcindex) in row1col2report" :key="rcitem.setting.ID" :style="`width:${rcitem.setting.width}; height:${rcitem.setting.height};`">
|
||
<div v-if="rcitem.setting.reportType == 'rank'" style="width: 100%;height: 100%;">
|
||
<div class="rankTitle" style="font-size: 0.2rem;line-height: 0.4rem;text-align: center;font-weight: bold; background-color: rgba(0, 102, 153, 0.4)">{{ rcitem.title }} </div>
|
||
<div class="rankHeader" style="display: flex;">
|
||
<p style="width: 0.5rem;text-align: center;">#</p>
|
||
<p v-for="(item,index) in rcitem.columns" :key="item.code+index" :style="`width:${item.width};text-align:center;`">{{ item.name }}</p>
|
||
</div>
|
||
<!-- <vue-seamless-scroll style="height: calc(100% - 0.9rem);" :data="rcitem.data" class="warp" :classOption="{step:2,limitMoveNum:10}"> -->
|
||
<!-- <ul class="item">
|
||
<li v-for="(item, index) in rcitem.data" :key="index" style="display: flex;" :class="index%2==0?'rowStyle1':'rowStyle2'">
|
||
<div style="width: 0.5rem;display: flex;align-items: center;justify-content: center;" class="rownum">
|
||
<div style="padding:0 0.05rem;background-color:#1981f6;color: #fff;height: 0.3rem;line-height: 0.3rem;border-radius: 0.05rem;">{{index+1}}</div>
|
||
</div>
|
||
<div v-for="i in rcitem.columns" v-text="item[i.code]" :key="i.code" :style="`width:${i.width};text-align:center;`"></div>
|
||
</li>
|
||
</ul> -->
|
||
<!-- </vue-seamless-scroll> -->
|
||
|
||
<page-rank :rcitem="rcitem" :warpId="'pageRank'+rcitem.setting.rowNumber+rcitem.setting.columnNumber+rcindex" :pageSize="rcitem.setting.pageSize" :switchSpeed="rcitem.setting.switchSpeed"></page-rank>
|
||
</div>
|
||
<div v-if="rcitem.setting.reportType == 'pie'" style="width: 100%;height: 100%;">
|
||
<rose-chart :pieId="'roseChart'+rcitem.setting.rowNumber+rcitem.setting.columnNumber+rcindex" :chartData="rcitem" style="width: 100%;height: 100%;"/>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="row1-col3" v-if="row1col3report.length>0" :style="`width:${row1Style.width[2]}; height:${row1Style.height};`">
|
||
<!-- <div class="block-top-content" style="height:100%;display: flex;flex-wrap: wrap;">
|
||
<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 v-for="(rcitem,rcindex) in row1col3report" :key="rcitem.setting.ID" :style="`width:${rcitem.setting.width}; height:${rcitem.setting.height};`">
|
||
<div v-if="rcitem.setting.reportType == 'rank'" style="width: 100%;height: 100%;">
|
||
<div class="rankTitle" style="font-size: 0.2rem;line-height: 0.4rem;text-align: center;font-weight: bold; background-color: rgba(0, 102, 153, 0.4)">{{ rcitem.title }} </div>
|
||
<div class="rankHeader" style="display: flex;">
|
||
<p style="width: 0.5rem;text-align: center;">#</p>
|
||
<p v-for="(item,index) in rankHeader1" :key="item.code+index" :style="`width:${item.width};text-align:center;`">{{ item.name }}</p>
|
||
</div>
|
||
<!-- <vue-seamless-scroll style="height: calc(100% - 0.9rem);" :data="rcitem.data" class="warp" :classOption="{step:2,limitMoveNum:10}">
|
||
<ul class="item" >
|
||
<li v-for="(item, index) in rcitem.data" :key="index" style="display: flex;" :class="index%2==0?'rowStyle1':'rowStyle2'">
|
||
<div style="width: 0.5rem;display: flex;align-items: center;justify-content: center;" class="rownum">
|
||
<div style="padding:0 0.05rem;background-color:#1981f6;color: #fff;height: 0.3rem;line-height: 0.3rem;border-radius: 0.05rem;">{{index+1}}</div>
|
||
</div>
|
||
<div v-for="i in rankHeader1" v-text="item[i.code]" :key="i.code" :style="`width:${i.width};text-align:center;`"></div>
|
||
</li>
|
||
</ul>
|
||
</vue-seamless-scroll> -->
|
||
<page-rank :rcitem="rcitem" :warpId="'pageRank'+rcitem.setting.rowNumber+rcitem.setting.columnNumber+rcindex" :pageSize="rcitem.setting.pageSize" :switchSpeed="rcitem.setting.switchSpeed"></page-rank>
|
||
</div>
|
||
<div v-if="rcitem.setting.reportType == 'pie'" style="width: 100%;height: 100%;">
|
||
<rose-chart :pieId="'roseChart'+rcitem.setting.rowNumber+rcitem.setting.columnNumber+rcindex" :chartData="rcitem" style="width: 100%;height: 100%;"/>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="row2-col1" v-if="row2col1report.length>0" :style="`width:${row2Style.width[0]}; height:${row2Style.height};margin-top: 0.1rem;padding-right:0.1rem;`">
|
||
<div v-for="(rcitem,rcindex) in row2col1report" :key="rcitem.setting.ID" :style="`width:${rcitem.setting.width}; height:${rcitem.setting.height};`">
|
||
<div v-if="rcitem.setting.reportType == 'rank'" style="width: 100%;height: 100%;">
|
||
<div class="rankTitle" style="font-size: 0.2rem;line-height: 0.4rem;text-align: center;font-weight: bold; background-color: rgba(0, 102, 153, 0.4)">{{ rcitem.title }} </div>
|
||
<div class="rankHeader" style="display: flex;">
|
||
<p style="width: 0.5rem;text-align: center;">#</p>
|
||
<p v-for="(item,index) in rcitem.columns" :key="item.code+index" :style="`width:${item.width};text-align:center;`">{{ item.name }}</p>
|
||
</div>
|
||
<!-- <vue-seamless-scroll style="height: calc(100% - 0.9rem);" :data="rcitem.data" class="warp" :classOption="{step:2,limitMoveNum:10}">
|
||
<ul class="item" >
|
||
<li v-for="(item, index) in rcitem.data" :key="index" style="display: flex;" :class="index%2==0?'rowStyle1':'rowStyle2'">
|
||
<div style="width: 0.5rem;display: flex;align-items: center;justify-content: center;" class="rownum">
|
||
<div style="padding:0 0.05rem;background-color:#1981f6;color: #fff;height: 0.3rem;line-height: 0.3rem;border-radius: 0.05rem;">{{index+1}}</div>
|
||
</div>
|
||
<div v-for="i in rcitem.columns" v-text="item[i.code]" :key="i.code" :style="`width:${i.width};text-align:center;`"></div>
|
||
</li>
|
||
</ul>
|
||
</vue-seamless-scroll> -->
|
||
<page-rank :rcitem="rcitem" :warpId="'pageRank'+rcitem.setting.rowNumber+rcitem.setting.columnNumber+rcindex" :pageSize="rcitem.setting.pageSize" :switchSpeed="rcitem.setting.switchSpeed"></page-rank>
|
||
</div>
|
||
<div v-if="rcitem.setting.reportType == 'pie'" style="width: 100%;height: 100%;">
|
||
<rose-chart :pieId="'roseChart'+rcitem.setting.rowNumber+rcitem.setting.columnNumber+rcindex" :chartData="rcitem" style="width: 100%;height: 100%;"/>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="row2-col2" v-if="row2col2report.length>0" :style="`width:${row2Style.width[1]}; height:${row2Style.height};margin-top: 0.1rem;padding-right:0.1rem;`">
|
||
<div v-for="(rcitem,rcindex) in row2col2report" :key="rcitem.setting.ID" :style="`width:${rcitem.setting.width}; height:${rcitem.setting.height};`">
|
||
<div v-if="rcitem.setting.reportType == 'rank'" style="width: 100%;height: 100%;">
|
||
<div class="rankTitle" style="font-size: 0.2rem;line-height: 0.4rem;text-align: center;font-weight: bold; background-color: rgba(0, 102, 153, 0.4)">{{ rcitem.title }} </div>
|
||
<div class="rankHeader" style="display: flex;">
|
||
<p style="width: 0.5rem;text-align: center;">#</p>
|
||
<p v-for="(item,index) in rcitem.columns" :key="item.code+index" :style="`width:${item.width};text-align:center;`">{{ item.name }}</p>
|
||
</div>
|
||
<!-- <vue-seamless-scroll style="height: calc(100% - 0.9rem);" :data="rcitem.data" class="warp" :classOption="{step:2,limitMoveNum:10}">
|
||
<ul class="item" >
|
||
<li v-for="(item, index) in rcitem.data" :key="index" style="display: flex;" :class="index%2==0?'rowStyle1':'rowStyle2'">
|
||
<div style="width: 0.5rem;display: flex;align-items: center;justify-content: center;" class="rownum">
|
||
<div style="padding:0 0.05rem;background-color:#1981f6;color: #fff;height: 0.3rem;line-height: 0.3rem;border-radius: 0.05rem;">{{index+1}}</div>
|
||
</div>
|
||
<div v-for="i in rcitem.columns" v-text="item[i.code]" :key="i.code" :style="`width:${i.width};text-align:center;`"></div>
|
||
</li>
|
||
</ul>
|
||
</vue-seamless-scroll> -->
|
||
<page-rank :rcitem="rcitem" :warpId="'pageRank'+rcitem.setting.rowNumber+rcitem.setting.columnNumber+rcindex" :pageSize="rcitem.setting.pageSize" :switchSpeed="rcitem.setting.switchSpeed"></page-rank>
|
||
</div>
|
||
<div v-if="rcitem.setting.reportType == 'pie'" style="width: 100%;height: 100%;">
|
||
<rose-chart :pieId="'roseChart'+rcitem.setting.rowNumber+rcitem.setting.columnNumber+rcindex" :chartData="rcitem" style="width: 100%;height: 100%;"/>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="row2-col3" v-if="row2col3report.length>0" :style="`width:${row2Style.width[2]}; height:${row2Style.height};margin-top: 0.1rem;`">
|
||
<div v-for="(rcitem,rcindex) in row2col3report" :key="rcitem.setting.ID" :style="`width:${rcitem.setting.width}; height:${rcitem.setting.height};`">
|
||
<div v-if="rcitem.setting.reportType == 'rank'" style="width: 100%;height: 100%;">
|
||
<div class="rankTitle" style="font-size: 0.2rem;line-height: 0.4rem;text-align: center;font-weight: bold; background-color: rgba(0, 102, 153, 0.4)">{{ rcitem.title }} </div>
|
||
<div class="rankHeader" style="display: flex;">
|
||
<p style="width: 0.5rem;text-align: center;">#</p>
|
||
<p v-for="(item,index) in rcitem.columns" :key="item.code+index" :style="`width:${item.width};text-align:center;`">{{ item.name }}</p>
|
||
</div>
|
||
<!-- <vue-seamless-scroll style="height: calc(100% - 0.9rem);" :data="rcitem.data" class="warp" :classOption="{step:2,limitMoveNum:10}">
|
||
<ul class="item" >
|
||
<li v-for="(item, index) in rcitem.data" :key="index" style="display: flex;" :class="index%2==0?'rowStyle1':'rowStyle2'">
|
||
<div style="width: 0.5rem;display: flex;align-items: center;justify-content: center;" class="rownum">
|
||
<div style="padding:0 0.05rem;background-color:#1981f6;color: #fff;height: 0.3rem;line-height: 0.3rem;border-radius: 0.05rem;">{{index+1}}</div>
|
||
</div>
|
||
<div v-for="i in rcitem.columns" v-text="item[i.code]" :key="i.code" :style="`width:${i.width};text-align:center;`"></div>
|
||
</li>
|
||
</ul>
|
||
</vue-seamless-scroll> -->
|
||
<page-rank :rcitem="rcitem" :warpId="'pageRank'+rcitem.setting.rowNumber+rcitem.setting.columnNumber+rcindex" :pageSize="rcitem.setting.pageSize" :switchSpeed="rcitem.setting.switchSpeed"></page-rank>
|
||
</div>
|
||
<div v-if="rcitem.setting.reportType == 'pie'" style="width: 100%;height: 100%;">
|
||
<rose-chart :pieId="'roseChart'+rcitem.setting.rowNumber+rcitem.setting.columnNumber+rcindex" :chartData="rcitem" style="width: 100%;height: 100%;"/>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- <scroll-board :ScrollList= "showData.scrollList" :ScrollWidth= "showData.scrollWidth" /> -->
|
||
|
||
<div class="block-top-bottom-content" style="flex: 1;"></div>
|
||
</div>
|
||
<!-- <scroll-board-bottom :ScrollList= "showData.scrollList2" :listName = "showData.listName2" /> -->
|
||
</div>
|
||
<dv-loading v-else>Loading...</dv-loading>
|
||
<!-- </dv-full-screen-container> -->
|
||
</div>
|
||
<div id="dv-full-screen-container2" v-if="showNotices" style="height: 100vh;width: 100vw;position: fixed;top: 0;left: 0;z-index: 9999;">
|
||
<p v-if="notices.length>0" style="font-size: 0.6rem;margin: 0;padding: 0.2rem; text-align: center;font-weight: bold;">{{ notices[0].title }}</p>
|
||
<div class="inner-content" v-if="notices.length>0" style="font-size: 0.4rem;margin: 0;padding: 0.2rem;white-space: pre-wrap;" v-html="notices[0].content"></div>
|
||
</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'
|
||
import vueSeamlessScroll from 'vue-seamless-scroll'
|
||
import pageRank from './pageRank.vue'
|
||
|
||
export default {
|
||
name: 'DataView',
|
||
components: {
|
||
topHeader,
|
||
// digitalFlop,
|
||
rankingBoard,
|
||
roseChart,
|
||
waterLevelChart,
|
||
scrollBoard,
|
||
scrollBoardBottom,
|
||
cards,
|
||
rightTotal,
|
||
barChart,
|
||
vueSeamlessScroll,
|
||
pageRank
|
||
},
|
||
data () {
|
||
return {
|
||
Aid: '',
|
||
type: '',
|
||
setting: {},
|
||
totalData: [],
|
||
todayData: [],
|
||
notices: [],
|
||
showNotices:false,
|
||
showData: {
|
||
name: '',
|
||
times: [],
|
||
leftData: [],
|
||
reportedList: [],
|
||
scrollList: [],
|
||
scrollWidth: '20%',
|
||
scrollList2: [],
|
||
listName2:'',
|
||
todayData: [],
|
||
bottomData: [],
|
||
allNum: 0,
|
||
reportedNum: 0
|
||
},
|
||
|
||
reportSettings:[],
|
||
rankHeader1:[],
|
||
rankHeader2:[],
|
||
rankHeader3:[],
|
||
row1Style:{
|
||
height:'65%',
|
||
width:['25%','50%','25%'],
|
||
},
|
||
row1col1report:[],
|
||
row1col2report:[],
|
||
row1col3report:[],
|
||
row2col1report:[],
|
||
row2col2report:[],
|
||
row2col3report:[],
|
||
row2Style:{
|
||
height:'35%',
|
||
width:['100%','0%', '0%'],
|
||
},
|
||
loadingDone: false
|
||
}
|
||
},
|
||
created (e) {
|
||
console.log(window.location.href.split('?')[1])
|
||
let params = window.location.href.split('?')[1];
|
||
let Aid = params.split('=')[1];
|
||
this.Aid = Aid;
|
||
if(Aid == 'A1'){
|
||
this.row1Style={
|
||
height:'65%',
|
||
width:['25%','50%','25%'],
|
||
};
|
||
this.row2Style={
|
||
height:'35%',
|
||
width:['100%','0%', '0%'],
|
||
}
|
||
}else if(Aid == 'A2'){
|
||
this.row1Style={
|
||
height:'40%',
|
||
width:['100%','0%', '0%'],
|
||
};
|
||
this.row2Style={
|
||
height:'60%',
|
||
width:['80%','20%', '0%'],
|
||
}
|
||
}else if(Aid == 'A3'){
|
||
this.row1Style={
|
||
height:'50%',
|
||
width:['100%','0%','0%'],
|
||
};
|
||
this.row2Style={
|
||
height:'50%',
|
||
width:['100%','0%', '0%'],
|
||
}
|
||
}else if(Aid == 'A4'){
|
||
this.row1Style={
|
||
height:'50%',
|
||
width:['100%','0%','0%'],
|
||
};
|
||
this.row2Style={
|
||
height:'50%',
|
||
width:['100%','0%', '0%'],
|
||
}
|
||
}
|
||
this.createdData(Aid)
|
||
let that = this;
|
||
setInterval(()=>{
|
||
that.createdData(Aid)
|
||
}, 900000)
|
||
},
|
||
methods: {
|
||
createdData (Aid) {
|
||
let that = this
|
||
that.loadingDone = false;
|
||
this.row1col1report = [];
|
||
this.row1col2report = [];
|
||
this.row1col3report = [];
|
||
this.row2col1report = [];
|
||
this.row2col2report = [];
|
||
this.row2col3report = [];
|
||
that.showNotices = false;
|
||
this.$api.post2('/api/web/GetScreenReport?category='+Aid).then(res => {
|
||
if (res.code === '200') {
|
||
let data = res.data;
|
||
this.showData.name = res.data.title || '智能数据看板';
|
||
this.reportSettings = data.reportSettings;
|
||
this.notices = data.notices;
|
||
// console.log(data.notices.length>0 , data.notices[0].starttime , data.notices[0].Endtime)
|
||
if(data.notices.length>0 && data.notices[0].starttime && data.notices[0].Endtime){
|
||
let nowtimestamp = new Date().getTime();
|
||
let starttimestamp = new Date(this.notices[0].starttime).getTime();
|
||
let endtimestamp = new Date(this.notices[0].Endtime).getTime();
|
||
console.log(nowtimestamp, starttimestamp, endtimestamp)
|
||
if(nowtimestamp>=starttimestamp && nowtimestamp<=endtimestamp){
|
||
this.showNotices = true;
|
||
}else{
|
||
this.showNotices = false;
|
||
}
|
||
}
|
||
|
||
if(data.reportSettings.length>0){
|
||
data.reportSettings.forEach(item=>{
|
||
if(item.columns.length>0){
|
||
item.columns.sort((a,b) => a.sort - b.sort)
|
||
}
|
||
if(item.setting.rowNumber==1 && item.setting.columnNumber==1){
|
||
this.row1col1report.push(item)
|
||
}
|
||
if(item.setting.rowNumber==1 && item.setting.columnNumber==2){
|
||
this.row1col2report.push(item)
|
||
}
|
||
if(item.setting.rowNumber==1 && item.setting.columnNumber==3){
|
||
this.row1col3report.push(item)
|
||
}
|
||
if(item.setting.rowNumber==2 && item.setting.columnNumber==1){
|
||
this.row2col1report.push(item)
|
||
}
|
||
if(item.setting.rowNumber==2 && item.setting.columnNumber==2){
|
||
this.row2col2report.push(item)
|
||
}
|
||
if(item.setting.rowNumber==2 && item.setting.columnNumber==3){
|
||
this.row2col3report.push(item)
|
||
}
|
||
|
||
})
|
||
}
|
||
|
||
this.showData.name = res.data.title;
|
||
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,#dv-full-screen-container2{
|
||
background-image: url('./img/bg.png');
|
||
background-size: 100% 100%;
|
||
box-shadow: 0 0 3px blue;
|
||
display: flex;
|
||
flex-direction: column;
|
||
}
|
||
.row1-col1,.row1-col2,.row2-col1,.row2-col2{
|
||
box-sizing: border-box;
|
||
overflow: hidden;
|
||
}
|
||
.main-content {
|
||
flex: 1;
|
||
height: calc(100% - 1rem);
|
||
display: flex;
|
||
flex-direction: column;
|
||
}
|
||
|
||
.block-left-right-content {
|
||
// flex: 1;
|
||
height: 100%;
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
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;
|
||
}
|
||
.rankHeader{
|
||
font-size: 0.2rem;
|
||
font-weight: bold;
|
||
color: #fff;
|
||
p{
|
||
margin: 0;
|
||
height: 0.5rem;
|
||
line-height: 0.5rem;
|
||
background-color: #1e80ff;
|
||
&:last-child{
|
||
flex: 1;
|
||
}
|
||
}
|
||
}
|
||
.warp {
|
||
height: 100%;
|
||
width: 100%;
|
||
margin: 0 auto;
|
||
overflow: hidden;
|
||
ul {
|
||
list-style: none;
|
||
padding: 0;
|
||
margin: 0 auto;
|
||
li,a {
|
||
display: block;
|
||
// height: 0.5rem;
|
||
line-height: 0.5rem;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
font-size: 0.2rem;
|
||
}
|
||
.rowStyle1{
|
||
background-color: rgba(10, 29, 50, 0.8);
|
||
}
|
||
.rowStyle2{
|
||
background-color: rgba(0, 44, 81, 0.8);
|
||
}
|
||
}
|
||
}
|
||
#dv-full-screen-container2 .inner-content{
|
||
p{
|
||
margin: 0;
|
||
font-size: 0.3rem;
|
||
}
|
||
}
|
||
}
|
||
.inner-content{
|
||
h1,h2,h3{margin:0;}
|
||
h1{font-size: 1rem;}
|
||
h2{font-size: 0.6rem;}
|
||
}
|
||
</style>
|