
<template>
  <div class="right">
    <div class="head">
      <div class="title">岗位达标</div>
      <div class="search" style="display: flex">
        <div style="width: 30%;">
          <pie ids="lawPie" :pieNum="pieData" v-if="pieData.length > 0"></pie>
        </div>
        <div style="width: 65%;">
          <!-- 折线图-->
             <oneBar :yAxdata="yAxdata" :serData="serData" :key="key2"/>
          <!-- <manyBars ids="zrs" :barTitle="zrsTitle" :barNum="zrsNum" :loadingshow="barsShow"
            v-if="zrsNum.length > 0 && zrsTitle.length > 0">
          </manyBars> -->
        </div>
      </div>
    </div>
    <div class="bottom">
      <div class="bottomright">
        <div class="table">
          <MyTable :tableData="data.tableData" :tableColumn="data.tableColumn" :tableConfiger="data.tableConfiger"
            :tableloading="tableloading" @chooseData="chooseData">
            <!-- 操作 -->
            <template #controls="{ row }">
              <span class="operesee" @click="edit(row)"><el-icon>
                  <Compass />
                </el-icon>详情</span>
            </template>
          </MyTable>
        </div>
      </div>
    </div>
  </div>
</template>
            
<script setup>
import pie from "@/views/law/components/charts/pie.vue";
import oneBar from "@/views/dutyBook/components/charts/oneBar.vue";
import MyTable from "@/components/aboutTable/MyTable/index.vue";
import { getApi, deleteApi, putApi, postApi } from "@/api/tobAcco_api.js";
import { ElMessage } from "element-plus";
import { reactive, onMounted, ref, getCurrentInstance } from "vue";
const emit = defineEmits("changePage", "getobj");
// 树的展开与折叠
const barsShow = ref(false);
const data = reactive({
  searchObj: {},
  tableData: [],
  userinfo: {},
  tableColumn: [
    {
      label: "单位/部门名称",
      prop: "depname",
      showOverflowTooltip: false,
      sortable: false
    },
    {
      label: "总人数",
      prop: "join_person_num",
      showOverflowTooltip: false,
      sortable: false
    },
    {
      label: "达标人数",
      prop: "db_num",
      showOverflowTooltip: false,
      sortable: false
    },
    {
      label: "可达标人数",
      prop: "kdb_num",
      showOverflowTooltip: false,
      sortable: false
    },
    {
      label: "不达标人数",
      prop: "bdb_num",
      showOverflowTooltip: false,
      sortable: false
    },
    {
      label: "达标率",
      prop: "dbl",
      showOverflowTooltip: false,
      sortable: false
    }
  ],
  tableConfiger: {
    showIndex: false,
    loading: false,
    height: '55vh',
    rowHeight: 61
  },
  pageConfiger: {
    pageSize: 20,
    pageCurrent: 1,
    total: 0
  },

});
const yAxdata = ref(
    ['作业层','管理层','决策层']
  ) 
 const serData=ref([
    {
     name: "已达标",
      type: "bar",
      data: [0,0,0]
    },
      {
        name: "未达标",
      type: "bar",
      data: [0,0,0]
    },
     {
       name: "不达标",
      type: "bar",
      data: [0,0,0]
    }
 ]) 
  const key2=ref(1)
// 饼图数据
const pieData = ref([]);
onMounted(() => {
  barsShow.value = true;
  getcount() 
  getTableData();
});
const edit = (row) => {
  let obj = {
    title: "达标详情",
    saveBtnShow: false,
    orgcode: row.depcode
  };
  emit("changePage", "AddOrEdite", obj);
};
const tableloading = ref(false);
function getTableData() {
  tableloading.value = true;
  getApi({}, `/mosty-jcgl/gwdb/getGwdbStatistics`).then((res) => {
    if (res) {
      res.forEach(el => {
        el.dbl=el.data[0].dbl?el.data[0].dbl:'0%'
      });
      data.tableData = res;
      tableloading.value = false;
    } else {
      data.tableData = [];
      tableloading.value = false;
    }
  });
}
function getcount() { 
    getApi({}, `/mosty-jcgl/gwdb/getGwdbState`).then((res) => {
      if (res) {
        pieData.value = [
          { name: "已达标", value: res.dbtotal },
          { name: "可达标", value: res.kdbtotal },
          { name: "不达标", value: res.bdbtotal }
        ];
serData.value[0].data=[res.db03,res.db02,res.db01],
serData.value[1].data=[res.kdb03,res.kdb02,res.kdb01],
          serData.value[2].data = [res.bdb03, res.bdb02, res.bdb01]
key2.value++
      }
  });
}

</script>
            
<style lang="scss" scoped>
.search{
  display: flex;
  justify-content: space-between;
>div{
    height: 200px;
    border: 1px solid var(--el-color-primary);
    margin: 10px;
    
}
  
}
.danger {
  color: red;
}

.success {
  color: green;
}

::-webkit-scrollbar {
  width: 0 !important;
  height: 0;
}

.echar {
  margin-top: 50px;
  width: 600px;
  margin-left: 100px;
  height: 300px;
}

.right {
  width: 100%;
  height: 100vh;
  overflow-y: scroll;
  margin: 0 auto;
  box-sizing: border-box;

  .head {
    margin-bottom: 10px;
    justify-content: space-between;

    .title {
      display: flex;
      margin-top: 10px;
      color: black;
      font-size: 20px;
    }
  }

  .fenye {
    top: 95%;
  }
}
</style>