57 lines
1.5 KiB
Vue
57 lines
1.5 KiB
Vue
|
<template>
|
||
|
|
<div class="bonx">
|
||
|
|
<div class="titleBox">
|
||
|
|
<PageTitle title="勤务打卡统计"></PageTitle>
|
||
|
|
</div>
|
||
|
|
<div class="lineEchartsBox">
|
||
|
|
<moreLineEcharts echartsId="qwdkLine" :data="obj"></moreLineEcharts>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script setup>
|
||
|
|
import { qcckGet } from "@/api/qcckApi.js";
|
||
|
|
import moreLineEcharts from "@/components/echarts/moreLineEcharts.vue";
|
||
|
|
import PageTitle from "@/components/aboutTable/PageTitle.vue";
|
||
|
|
import { onMounted, reactive, ref } from "vue";
|
||
|
|
const obj = reactive({
|
||
|
|
color: ['#EB00FF', '#F57100'], //['#EB00FF','#F57100']
|
||
|
|
list: [], //[{label:'总数',val:[80,70,60,50]}, {label:'已处置',val:[70,40,30,80]}, ]
|
||
|
|
xData: [],//['09-01','09-02','09-03','09-04']
|
||
|
|
})
|
||
|
|
onMounted(() => {
|
||
|
|
getData()
|
||
|
|
})
|
||
|
|
const getData = () => {
|
||
|
|
qcckGet({}, "/mosty-jbld/jblddk/queryDktj").then(res => {
|
||
|
|
if (res && res.length > 0) {
|
||
|
|
obj.list = res[0]?.list.map((el) => {
|
||
|
|
return { label: el.bxxmc, val: [], hatColor: '#087df9', color: ['rgba(0,244,255,1)', 'rgba(0,77,167,1)'] }
|
||
|
|
})
|
||
|
|
obj.list?.forEach((w) => {
|
||
|
|
res.forEach((el) => {
|
||
|
|
el.list.forEach((item) => {
|
||
|
|
if (w.label == item.bxxmc) {
|
||
|
|
w.val.push(item.num)
|
||
|
|
}
|
||
|
|
})
|
||
|
|
})
|
||
|
|
})
|
||
|
|
obj.xData = res.map((el) => el.ssbm)
|
||
|
|
}
|
||
|
|
})
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style lang="scss" scoped>
|
||
|
|
.bonx {
|
||
|
|
width: 100%;
|
||
|
|
height: 100%;
|
||
|
|
|
||
|
|
.lineEchartsBox {
|
||
|
|
height: calc(100% - 60px);
|
||
|
|
margin-top: 10px;
|
||
|
|
background: #fff;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</style>
|