<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>