dev
/
GScreenWEB_TPMes
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

7.30 基础

This commit is contained in:
ljx 2024-07-30 15:47:42 +08:00
parent 2d2b4c1e33
commit ac50cfb0a1
4 changed files with 113 additions and 121 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/components/datav/barChart.vue
View File

@ -9,7 +9,9 @@
<script> <script>
import * as echarts from 'echarts'; import * as echarts from 'echarts';
export default { export default {
name: 'barChart', name: 'barChart',
data () { data () {
return { return {
option: {} option: {}
@ -50,8 +52,8 @@
<style lang="less"> <style lang="less">
#bar-chart { #bar-chart {
width: 100%; // width: 100%;
height: 50%; // height: 100%;
background-color: rgba(6, 30, 93, 0.5); background-color: rgba(6, 30, 93, 0.5);
border-top: 2px solid rgba(1, 153, 209, .5); border-top: 2px solid rgba(1, 153, 209, .5);
box-sizing: border-box; box-sizing: border-box;

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

@ -9,15 +9,22 @@
<div class="block-left-right-content" > <div class="block-left-right-content" >
<scroll-board :ScrollList= "showData.scrollList" /> <scroll-board :ScrollList= "showData.scrollList" />
<div class="block-top-bottom-content"> <div class="block-top-bottom-content">
<div class="block-top-content" style="height:55%;padding-Bottom:20px；"> <div class="block-top-content" style="height:100%;display: flex;flex-wrap: wrap;">
<rose-chart/> <!-- <rose-chart v-if="chartData1" pieId="roseChart1" :chartData="chartData1"/>
<rose-chart/> <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>
<bar-chart />
</div> </div>
</div> </div>
</div> </div>
<dv-loading v-else>Loading...</dv-loading> <dv-loading v-else>Loading...</dv-loading>
<div style="height: 5%;width: 100%;"></div>
</dv-full-screen-container> </dv-full-screen-container>
</div> </div>
</template> </template>
@ -49,25 +56,17 @@ export default {
return { return {
type: '', type: '',
setting: {}, setting: {},
dinnerData: { chartData1:null,
classFullData: [], chartData2:null,
classList: [], chartData3:null,
daysDetails: [], totalData: [],
details: [],
searchParms: [],
workItemFullData: [],
workItemList: []
},
totalData: {},
todayData: [], todayData: [],
showData: { showData: {
name: '永盛陶瓷只能数据看榜', name: '永盛陶瓷只能数据看榜',
times: [], times: [],
leftData: [], leftData: [],
reportedList: [], reportedList: [],
scrollList: [ scrollList: [],
['员工1','上釉','500']
],
todayData: [], todayData: [],
bottomData: [], bottomData: [],
allNum: 0, allNum: 0,
@ -85,40 +84,26 @@ export default {
this.$api.post2('/api/web/GetScreenReport').then(res => { this.$api.post2('/api/web/GetScreenReport').then(res => {
if (res.code === '200') { 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.showData.name = '永盛大屏数据看板'
this.loadingDone = true 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 () { dinnerDataFomat () {
this.showData.name = this.setting.dinnerName this.showData.name = this.setting.dinnerName
@ -159,20 +144,20 @@ export default {
}) })
this.loadingDone = true this.loadingDone = true
}, },
totalDataFomat () { // totalDataFomat () {
this.showData.name = '各个食堂运营情况总结' // this.showData.name = '各个食堂运营情况总结'
this.showData.allNum = 0 // this.showData.allNum = 0
this.showData.reportedNum = 0 // this.showData.reportedNum = 0
this.showData.times = [this.setting.starttime, this.setting.endtime] // this.showData.times = [this.setting.starttime, this.setting.endtime]
this.showData.leftData = this.totalData.total.filter(item => { // this.showData.leftData = this.totalData.total.filter(item => {
return !!item.dinnerName // return !!item.dinnerName
}) // })
this.totalData.total.forEach((item) => { // this.totalData.total.forEach((item) => {
this.showData.allNum += item.quantity // this.showData.allNum += item.quantity
this.showData.reportedNum += item.quantityDone // this.showData.reportedNum += item.quantityDone
}) // })
this.loadingDone = true // this.loadingDone = true
}, // },
getToday () { getToday () {
var today = new Date() // 创建一个表示当前时间的Date对象 var today = new Date() // 创建一个表示当前时间的Date对象
var year = today.getFullYear() // 获取当前年份（四位数） var year = today.getFullYear() // 获取当前年份（四位数）
@ -224,7 +209,7 @@ export default {
display: flex; display: flex;
flex-grow: 0; flex-grow: 0;
box-sizing: border-box; box-sizing: border-box;
padding-bottom: 20px; // padding-bottom: 20px;
} }
} }
</style> </style>

115
src/components/datav/roseChart.vue
View File

@ -1,13 +1,23 @@
<template> <template>
<div id="rose-chart"> <div id="rose-chart">
<div class="rose-chart-title" :style="'font-size:'+$fontSize(0.25)+'px'">累计计量资金分布</div> <div class="rose-chart-title" :style="'font-size:'+$fontSize(0.20)+'px'">---{{chartData?chartData.title:''}}---</div>
<dv-charts :option="option" /> <!-- <dv-charts :option="option" /> -->
<div :id="pieId" class="pie-chart-container"></div>
</div> </div>
</template> </template>
<script> <script>
import * as echarts from 'echarts';
export default { export default {
name: 'RoseChart', name: 'RoseChart',
props:{
pieId:{
type: String,
},
chartData:{
type:Object,
}
},
data () { data () {
return { return {
option: {} option: {}
@ -17,71 +27,66 @@ export default {
createData () { createData () {
const { randomExtend } = this const { randomExtend } = this
this.option = { var myChart = echarts.init(document.getElementById(this.pieId));
legend:{ this.option = {
show: true,
data: ['路基', '交安设施', '日常养护', '桥通', '交通事故', '路面', '绿化', '计日工', '除雪'] tooltip: {
}, trigger: 'item'
series: [ },
{ legend: {
type: 'pie', orient: 'horizontal',
radius: '50%', left: '20',
roseSort: false, top:'10',
textStyle:{
data: [ color:'fff',
{ name: '路基', value: randomExtend(40, 70) }, fontSize:this.$fontSize(0.12)
{ 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
}, },
outsideLabel: { },
formatter: '{name} {percent}%', series: [
labelLineEndLength: 20, {
style: { name: '数据详情',
fill: '#fff' type: 'pie',
radius: '50%',
data: this.chartData.data,
emphasis: {
textStyle: {
color: 'rgba(0,0,0,0)'
}
}, },
labelLineStyle: { label: {
stroke: '#fff' color: '#fff',
} fontSize:this.$fontSize(0.12),
}, formatter: '{b}: {d}%'
roseType: false
} },
], }
]
color: ['#da2f00', '#fa3600', '#ff4411', '#ff724c', '#541200', '#801b00', '#a02200', '#5d1400', '#b72700'] };
} myChart.setOption(this.option);
}, },
randomExtend (minNum, maxNum) { // randomExtend (minNum, maxNum) {
if (arguments.length === 1) { // if (arguments.length === 1) {
return parseInt(Math.random() * minNum + 1, 10) // return parseInt(Math.random() * minNum + 1, 10)
} else { // } else {
return parseInt(Math.random() * (maxNum - minNum + 1) + minNum, 10) // return parseInt(Math.random() * (maxNum - minNum + 1) + minNum, 10)
} // }
} // }
}, },
mounted () { mounted () {
const { createData } = this const { createData } = this
createData() createData()
setInterval(createData, 30000) setInterval(createData, 100000)
} }
} }
</script> </script>
<style lang="less"> <style lang="less">
#rose-chart { #rose-chart {
width: 50%; // width: 33.33%;
height: 100%; // height: 55%;
background-color: rgba(6, 30, 93, 0.5); background-color: rgba(6, 30, 93, 0.5);
border-top: 2px solid rgba(1, 153, 209, .5); border-top: 2px solid rgba(1, 153, 209, .5);
box-sizing: border-box; box-sizing: border-box;
@ -95,8 +100,8 @@ export default {
align-items: center; align-items: center;
} }
.dv-charts-container { .pie-chart-container {
height: calc(~"100% - 50px"); height: calc(~"100% - 50px");
} }
} }
</style> </style>

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

@ -15,8 +15,8 @@ export default {
data: [ data: [
], ],
index: true, index: true,
columnWidth: [100, 150, 150], columnWidth: [100, 150, 200],
align: ['center'], align: ['center', 'center', 'center', 'center'],
rowNum: 20, rowNum: 20,
headerBGC: '#1981f6', headerBGC: '#1981f6',
headerHeight: 50, headerHeight: 50,