zhgdyun/src/views/projectFront/laborManage/reportCenter.vue

<template>
  <!-- // 报表中心 -->
  <div class="reportCenter flex">
    <div class="left whiteBlock">
      <vue-scroll style="width: 100%">
        <div
          v-for="item in listData"
          :key="item.id"
          class="list_title"
          :class="checkedId == item.id ? 'checked_color' : 'nocheck'"
          @click="checkedId = item.id"
        >
          <span class="list_name">{{ item.name }}</span>
        </div>
      </vue-scroll>
    </div>
    <div class="right whiteBlock">
      <div class="chart" ref="ageChart"></div>
    </div>
  </div>
</template>
<script>
import { selectProjectComapnyWorkTotalListApi } from "@/assets/js/api/dataBoard.js";
import echarts from 'echarts4';;
export default {
  data() {
    return {
      projectSn: "",
      userEnterpriseId:'',
      listData: [
        { id: 1, name: this.$t('message.laborMange.companyAttendanceRanking') },
      ],
      checkedId: "",
    };
  },
  created() {
    this.projectSn = this.$store.state.projectSn;
    this.userEnterpriseId = this.$store.state.userInfo.userEnterpriseId;
    this.checkedId = this.listData[0].id;
    this.getListData();
  },
  methods: {
    getListData() {
      let data = {
        projectSn: this.projectSn,
        userEnterpriseId: this.userEnterpriseId
      };
      selectProjectComapnyWorkTotalListApi(data).then((res) => {
        console.log('报表中心数据res',res)
        if (res.code == 200) {
          var Data = res.result;
          var xData = [],
            yData1 = [],
            yData2 = [],
            yData3 = [];
            Data.forEach((element) => {
            xData.push(element.enterpriseName);
            yData1.push(element.attendancePersonNum);
            yData2.push(element.totalPersonNum);
            yData3.push(element.presencePersonNum);
          });
          this.createdBarCharts(
            xData,
            yData1,
            yData2,
            yData3,
            this.$refs.ageChart,
            [this.$t('message.laborMange.attendance'), this.$t('message.laborMange.payroll'), this.$t('message.laborMange.theNumberOfPresent')]
          );
        } else {
          this.$message.error(res.message);
        }
      });
    },
    //企业出勤---图表
    createdBarCharts(xData, yData1, yData2, yData3, el, legendData) {
      let that = this;
      let ageChart = echarts.init(el);
      ageChart.clear();
      let option = {
        grid: {
          top: 40,
          left: 0,
          bottom: 5,
          right: 20,
          containLabel: true,
        },
        color: ["#5CE2F6", "#5181F6",'#8EBDD2'],
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
        },
        legend: {
          show: true,
          align: "left",
          top: 5,
          left: 0,
          itemWidth: 13,
          itemHeight: 5,
          textStyle: {
            color: "#9fa2ad",
          },
        },

        xAxis: [
          {
            type: "category",
            data: xData,
            boundaryGap: true,
            axisTick: {
              show: false,
            },
            axisLine: {
              show: false,
            },
            axisLabel: {
              color: "#9fa2ad",
              fontSize: 12,
            },
          },
        ],

        yAxis: {
          type: "value",
          axisTick: {
            show: false,
          },
          axisLine: {
            show: false,
          },
          splitLine: {
            lineStyle: {
              type: "dashed",
              color: "rgba(231, 233, 243, 1)",
            },
          },
          axisLabel: {
            color: "#9fa2ad",
          },
        },
        series: [
          {
            name: legendData[1],
            type: "bar",
            data: yData2,
            barWidth: 35,
            barGap: 0.1,
          },
          {
            name: legendData[0],
            type: "bar",
            data: yData1,
            barWidth: 35,
          },
          {
            name: legendData[2],
            type: "bar",
            data: yData3,
            barWidth: 35,
            barGap: 0.1,
          },
        ],
      };

      ageChart.setOption(option);
    },
  },
};
</script>
<style lang="less" scoped>
.flex {
  display: flex;
}
.flex2 {
  display: flex;
  align-content: center;
}
.flex3 {
  display: flex;
  align-content: center;
  justify-content: space-between;
}
.reportCenter {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  .left {
    width: 300px;
    box-sizing: border-box;
    margin-right: 15px;
    padding: 5px 0;
    .list_title {
      width: 100%;
      line-height: 43px;
      cursor: pointer;
      box-sizing: border-box;
    }
    .checked_color {
      border-left: 3px solid #5181f6;
      background: #edf2fe;
    }
    .nocheck {
      padding-left: 3px;
    }
    .list_name {
      padding: 0 15px;
    }
  }
  .right {
    width: calc(100% - 300px);
    box-sizing: border-box;
    padding: 15px 20px;
    .chart {
      width: 100%;
      height: 100%;
    }
  }
}
</style>