7.30 基础
This commit is contained in:
parent
2d2b4c1e33
commit
ac50cfb0a1
|
|
@ -9,7 +9,9 @@
|
|||
<script>
|
||||
import * as echarts from 'echarts';
|
||||
export default {
|
||||
|
||||
name: 'barChart',
|
||||
|
||||
data () {
|
||||
return {
|
||||
option: {}
|
||||
|
|
@ -50,8 +52,8 @@
|
|||
|
||||
<style lang="less">
|
||||
#bar-chart {
|
||||
width: 100%;
|
||||
height: 50%;
|
||||
// width: 100%;
|
||||
// height: 100%;
|
||||
background-color: rgba(6, 30, 93, 0.5);
|
||||
border-top: 2px solid rgba(1, 153, 209, .5);
|
||||
box-sizing: border-box;
|
||||
|
|
|
|||
|
|
@ -9,15 +9,22 @@
|
|||
<div class="block-left-right-content" >
|
||||
<scroll-board :ScrollList= "showData.scrollList" />
|
||||
<div class="block-top-bottom-content">
|
||||
<div class="block-top-content" style="height:55%;padding-Bottom:20px；">
|
||||
<rose-chart/>
|
||||
<rose-chart/>
|
||||
<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>
|
||||
<bar-chart />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<dv-loading v-else>Loading...</dv-loading>
|
||||
<div style="height: 5%;width: 100%;"></div>
|
||||
|
||||
</dv-full-screen-container>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -49,25 +56,17 @@ export default {
|
|||
return {
|
||||
type: '',
|
||||
setting: {},
|
||||
dinnerData: {
|
||||
classFullData: [],
|
||||
classList: [],
|
||||
daysDetails: [],
|
||||
details: [],
|
||||
searchParms: [],
|
||||
workItemFullData: [],
|
||||
workItemList: []
|
||||
},
|
||||
totalData: {},
|
||||
chartData1:null,
|
||||
chartData2:null,
|
||||
chartData3:null,
|
||||
totalData: [],
|
||||
todayData: [],
|
||||
showData: {
|
||||
name: '永盛陶瓷只能数据看榜',
|
||||
times: [],
|
||||
leftData: [],
|
||||
reportedList: [],
|
||||
scrollList: [
|
||||
['员工1','上釉','500']
|
||||
],
|
||||
scrollList: [],
|
||||
todayData: [],
|
||||
bottomData: [],
|
||||
allNum: 0,
|
||||
|
|
@ -85,40 +84,26 @@ export default {
|
|||
|
||||
this.$api.post2('/api/web/GetScreenReport').then(res => {
|
||||
if (res.code === '200') {
|
||||
let data = res.data
|
||||
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
|
||||
}
|
||||
});
|
||||
|
||||
// this.$api.post('/api/PG/GetScreenReport').then(res => {
|
||||
// if (res.code === '200') {
|
||||
// let data = res.data
|
||||
// if (that.type !== data.type) {
|
||||
// that.loadingDone = false
|
||||
// that.type = data.type
|
||||
// }
|
||||
// setTimeout(function () {
|
||||
// // 如果是更换页面则添加loading
|
||||
// if (data.type === 'dinner') {
|
||||
// that.dinnerData = data.dinnerData
|
||||
// that.setting = data.setting
|
||||
// that.showData.todayData = data.todayData.details.filter((item) => {
|
||||
// return item.dinnerID === that.dinnerData.searchParms.dinnerID
|
||||
// })
|
||||
// that.dinnerDataFomat()
|
||||
// } else if (data.type === 'total') {
|
||||
// that.totalData = data.totalData
|
||||
// that.showData.todayData = data.todayData.details
|
||||
// that.setting = data.setting
|
||||
// that.totalDataFomat()
|
||||
// }
|
||||
// }, 500)
|
||||
// };
|
||||
// setTimeout(() => {
|
||||
// this.createdData()
|
||||
// }, 1000)
|
||||
// })
|
||||
},
|
||||
dinnerDataFomat () {
|
||||
this.showData.name = this.setting.dinnerName
|
||||
|
|
@ -159,20 +144,20 @@ export default {
|
|||
})
|
||||
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
|
||||
},
|
||||
// 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() // 获取当前年份（四位数）
|
||||
|
|
@ -224,7 +209,7 @@ export default {
|
|||
display: flex;
|
||||
flex-grow: 0;
|
||||
box-sizing: border-box;
|
||||
padding-bottom: 20px;
|
||||
// padding-bottom: 20px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,13 +1,23 @@
|
|||
<template>
|
||||
<div id="rose-chart">
|
||||
<div class="rose-chart-title" :style="'font-size:'+$fontSize(0.25)+'px'">累计计量资金分布</div>
|
||||
<dv-charts :option="option" />
|
||||
<div class="rose-chart-title" :style="'font-size:'+$fontSize(0.20)+'px'">---{{chartData?chartData.title:''}}---</div>
|
||||
<!-- <dv-charts :option="option" /> -->
|
||||
<div :id="pieId" class="pie-chart-container"></div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import * as echarts from 'echarts';
|
||||
export default {
|
||||
name: 'RoseChart',
|
||||
props:{
|
||||
pieId:{
|
||||
type: String,
|
||||
},
|
||||
chartData:{
|
||||
type:Object,
|
||||
}
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
option: {}
|
||||
|
|
@ -17,71 +27,66 @@ export default {
|
|||
createData () {
|
||||
const { randomExtend } = this
|
||||
|
||||
this.option = {
|
||||
legend:{
|
||||
show: true,
|
||||
data: ['路基', '交安设施', '日常养护', '桥通', '交通事故', '路面', '绿化', '计日工', '除雪']
|
||||
},
|
||||
series: [
|
||||
{
|
||||
type: 'pie',
|
||||
radius: '50%',
|
||||
roseSort: false,
|
||||
var myChart = echarts.init(document.getElementById(this.pieId));
|
||||
this.option = {
|
||||
|
||||
data: [
|
||||
{ name: '路基', value: randomExtend(40, 70) },
|
||||
{ name: '交安设施', value: randomExtend(20, 30) },
|
||||
{ name: '日常养护', value: randomExtend(10, 50) },
|
||||
{ name: '桥通', value: randomExtend(5, 20) },
|
||||
{ name: '交通事故', value: randomExtend(40, 50) },
|
||||
{ name: '路面', value: randomExtend(20, 30) },
|
||||
{ name: '绿化', value: randomExtend(5, 10) },
|
||||
{ name: '计日工', value: randomExtend(20, 35) },
|
||||
{ name: '除雪', value: randomExtend(5, 10) }
|
||||
],
|
||||
insideLabel: {
|
||||
show: false
|
||||
tooltip: {
|
||||
trigger: 'item'
|
||||
},
|
||||
legend: {
|
||||
orient: 'horizontal',
|
||||
left: '20',
|
||||
top:'10',
|
||||
textStyle:{
|
||||
color:'fff',
|
||||
fontSize:this.$fontSize(0.12)
|
||||
},
|
||||
|
||||
outsideLabel: {
|
||||
formatter: '{name} {percent}%',
|
||||
labelLineEndLength: 20,
|
||||
style: {
|
||||
fill: '#fff'
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: '数据详情',
|
||||
type: 'pie',
|
||||
radius: '50%',
|
||||
data: this.chartData.data,
|
||||
emphasis: {
|
||||
textStyle: {
|
||||
color: 'rgba(0,0,0,0)'
|
||||
}
|
||||
},
|
||||
labelLineStyle: {
|
||||
stroke: '#fff'
|
||||
}
|
||||
},
|
||||
roseType: false
|
||||
}
|
||||
],
|
||||
label: {
|
||||
color: '#fff',
|
||||
fontSize:this.$fontSize(0.12),
|
||||
formatter: '{b}: {d}%'
|
||||
|
||||
color: ['#da2f00', '#fa3600', '#ff4411', '#ff724c', '#541200', '#801b00', '#a02200', '#5d1400', '#b72700']
|
||||
}
|
||||
},
|
||||
}
|
||||
]
|
||||
};
|
||||
myChart.setOption(this.option);
|
||||
},
|
||||
randomExtend (minNum, maxNum) {
|
||||
if (arguments.length === 1) {
|
||||
return parseInt(Math.random() * minNum + 1, 10)
|
||||
} else {
|
||||
return parseInt(Math.random() * (maxNum - minNum + 1) + minNum, 10)
|
||||
}
|
||||
}
|
||||
// randomExtend (minNum, maxNum) {
|
||||
// if (arguments.length === 1) {
|
||||
// return parseInt(Math.random() * minNum + 1, 10)
|
||||
// } else {
|
||||
// return parseInt(Math.random() * (maxNum - minNum + 1) + minNum, 10)
|
||||
// }
|
||||
// }
|
||||
},
|
||||
mounted () {
|
||||
const { createData } = this
|
||||
|
||||
createData()
|
||||
|
||||
setInterval(createData, 30000)
|
||||
setInterval(createData, 100000)
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less">
|
||||
#rose-chart {
|
||||
width: 50%;
|
||||
height: 100%;
|
||||
// width: 33.33%;
|
||||
// height: 55%;
|
||||
background-color: rgba(6, 30, 93, 0.5);
|
||||
border-top: 2px solid rgba(1, 153, 209, .5);
|
||||
box-sizing: border-box;
|
||||
|
|
@ -95,8 +100,8 @@ export default {
|
|||
align-items: center;
|
||||
}
|
||||
|
||||
.dv-charts-container {
|
||||
height: calc(~"100% - 50px");
|
||||
}
|
||||
.pie-chart-container {
|
||||
height: calc(~"100% - 50px");
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -15,8 +15,8 @@ export default {
|
|||
data: [
|
||||
],
|
||||
index: true,
|
||||
columnWidth: [100, 150, 150],
|
||||
align: ['center'],
|
||||
columnWidth: [100, 150, 200],
|
||||
align: ['center', 'center', 'center', 'center'],
|
||||
rowNum: 20,
|
||||
headerBGC: '#1981f6',
|
||||
headerHeight: 50,
|
||||
|
|
|
|||
Loading…
Reference in New Issue