zzyuan
/
gz-att-web
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

数据看板

This commit is contained in:
lSun 2024-12-23 18:53:43 +08:00
parent 49e79471da
commit 73ac8490cb
1 changed files with 117 additions and 111 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

228
src/views/dashboard/bottomTwo.vue
View File

@ -1,134 +1,140 @@
<template> <template>
<div class="content"> <div class="content">
<div class="content-box"> <div class="content-box">
<div class="title-box"> <div class="title-box">
<div style="margin-left: 10px;font-size: 22px;font-weight: bold;">当月异常统计</div> <div style="margin-left: 10px;font-size: 22px;font-weight: bold;">当月异常统计</div>
</div> </div>
<div class="chart-box" @click="toggleDialog(12)"> <div class="chart-box" @click="toggleDialog(12)">
<div id="barBox" style="width: 100%;height: 400px;"></div> <div id="barBox" style="width: 100%;height: 400px;"></div>
</div> </div>
</div>
</div> </div>
</div>
</template> </template>
<script> <script>
import * as echarts from 'echarts'; import * as echarts from 'echarts';
export default { export default {
components: { components: {},
name: 'bottomTwo',
props: {
pageData: {
// required: true,
type: Object,
default: {
addressErrorNum: 0,
earlyNum: 0,
einErrorNum: 0,
lateNum: 0,
leaveNum: 0,
skippingNum: 0
}
}, },
name: 'bottomTwo',
props: { },
pageData: { data() {
// required: true, return {
type: Object, pieCharts: null,
default:{ dateTime: "",
addressErrorNum:0, barYData: [22, 18, 11, 23, 29, 33]
earlyNum:0, }
einErrorNum:0, },
lateNum:0, watch: {
leaveNum:0, pageData: {
skippingNum:0 handler() {
} this.getInitData()
}, },
immediate: true
}, }
data() { },
return { created() {
pieCharts: null,
dateTime:"", },
barYData:[22, 18, 11, 23, 29, 33] mounted() {
} this.getInitData()
}, },
watch: { methods: {
pageData: { getInitData() {
handler() { setTimeout(() => {
this.getInitData() this.barYData = [Number(this.pageData.lateNum), Number(this.pageData.earlyNum), Number(this.pageData.skippingNum), Number(this.pageData.leaveNum), Number(this.pageData.addressErrorNum), Number(this.pageData.einErrorNum)]
}, console.log(this.barYData)
immediate: true this.initChart()
} }, 500)
},
created() {
}, },
mounted() { initChart() {
this.getInitData() this.pieCharts = echarts.init(document.getElementById('barBox'))
var option = {
grid: {
left: '5%',
right: '5%',
bottom: '5%',
top: '5%',
containLabel: true,
},
xAxis: {
data: ['迟到', '早退', '旷工', '请假', '打卡地异常', '出入异常']
},
yAxis: {},
series: [{
type: 'bar',
data: this.barYData,
itemStyle: {
color: "#157DF3"
},
label: {
show: true, // 显示标签
position: 'top', // 设置标签的位置在柱子的上方
formatter: '{c}' // 显示的数据格式，这里显示的是原始数值
}
}]
};
this.pieCharts.setOption(option)
// 监听柱状图的点击事件
this.pieCharts.on('click', function (params) {
// 控制台输出点击的数据的信息
console.log(params);
// 在这里添加你的点击事件逻辑
// 例如：弹窗显示点击的数据的详细信息
// alert('你点击的是：' + params.name);
});
}, },
methods: { toggleDialog(v) {
getInitData(){ this.$emit('openDialog', {order: v})
setTimeout(()=>{
this.barYData=[Number(this.pageData.lateNum),Number(this.pageData.earlyNum),Number(this.pageData.skippingNum),Number(this.pageData.leaveNum),Number(this.pageData.addressErrorNum),Number(this.pageData.einErrorNum)]
console.log(this.barYData)
this.initChart()
},500)
},
initChart(){
this.pieCharts = echarts.init(document.getElementById('barBox'))
var option = {
grid: {
left: '5%',
right: '5%',
bottom: '5%',
top: '5%',
containLabel: true,
},
xAxis: {
data: ['迟到', '早退', '旷工', '请假', '打卡地异常', '出入异常']
},
yAxis: {},
series: [{
type: 'bar',
data:this.barYData,
itemStyle:{
color:"#157DF3"
}
}]
};
this.pieCharts.setOption(option)
// 监听柱状图的点击事件
this.pieCharts.on('click', function (params) {
// 控制台输出点击的数据的信息
console.log(params);
// 在这里添加你的点击事件逻辑
// 例如：弹窗显示点击的数据的详细信息
// alert('你点击的是：' + params.name);
});
},
toggleDialog(v) {
this.$emit('openDialog', { order: v })
},
}, },
},
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.content{ .content {
width: 100%;
height: 100%;
// padding-top: 20px;
.content-box {
width: 100%; width: 100%;
height: 100%; height: 100%;
// padding-top: 20px; padding: 10px;
.content-box{ background-color: #fff;
width: 100%; border-radius: 10px;
height: 100%; }
padding: 10px;
background-color: #fff; .title-box {
border-radius: 10px; width: 100%;
} height: 30px;
.title-box{ display: flex;
width: 100%; justify-content: space-between;
height: 30px; align-items: center;
display: flex;
justify-content: space-between; }
align-items: center;
.chart-box {
width: 100%;
height: 450px;
}
}
.chart-box{
width: 100%;
height: 450px;
}
} }
</style> </style>