daofu-gov-pc/src/views/statistic/components/gz.vue

<!-- 工作统计 -->
<template>
  <div>
    <div class="h-layout space-between h-center">
      <div>
        <div class="h-layout h-center">
          <div class="tool-item" @click="getList">
            <svg-icon name="refurbish" class="icon" />
            <span>刷新</span>
          </div>
          <div class="label-select filter-tab">
            <label>工作类型</label>
            <el-select
              v-model="search.wkTypeId"
              @change="getList"
              clearable
              placeholder="请选择"
            >
              <el-option v-for="(item,index) in tabs" :key="index" :label="item.typeName" :value="item.typeId"></el-option>
            </el-select>
          </div>
          <div class="label-select filter-tab">
            <label>地区选择</label>
            <el-cascader
            ref="cascader"
            v-model="search.orgCode"
            @change="getList"
            placeholder="请选择地区"
            :options="orgList"
            :props="{
              checkStrictly: true,
              label: 'orgname',
              value: 'orgcode',
            }"
            clearable
          ></el-cascader>
          </div>
        </div>
      </div>
    </div>
    <el-table
      ref="loading"
      class="table"
      v-loading="tableDataloading"
      :data="tableData"
      header-row-class-name="el-one-header"
      border
    >
      <el-table-column
        prop="orgName"
        align="center"
        :resizable="true"
        label="村名"
      >
        <template #default="scope">
        <span>{{scope.row.orgName?scope.row.orgName:'--'}}</span>
      </template>
      </el-table-column>
      <el-table-column prop="ongoing" align="center" label="进行中"></el-table-column>
      <el-table-column prop="completed" align="center" label="已完成"></el-table-column>
    </el-table>
  </div>
</template>

<script lang='ts' setup>
import { onMounted, reactive, ref } from "vue";
import { ElMessageBox } from "element-plus";
import { wkTypes } from "@/api/Work";
import { workStatistic } from "@/api/statistic";

import { areaTree } from "@/api/account";
import useUserStore from "@/store/modules/user";
const userStore = useUserStore();
const user = ref(JSON.parse(userStore.userInfo));
const userId = ref(user.value.userId);

const search = ref({wkTypeId: "",orgCode: "",});
const tableData = ref([]);

//工作类型
const tabs = ref([]);
const getWkTypes = ()=>{
  let params = {
    classify:1
  }
  wkTypes(params).then((res: any) => {
    tabs.value = res.data;
    search.value.wkTypeId = res.data[0].typeId
  });
}
//获取工作统计
const tableDataloading = ref(false);
const getWorkStatistic = () => {
  tableDataloading.value = true;
  let params = {
    orgCode:search.value.orgCode?search.value.orgCode[search.value.orgCode.length-1]:'',
    wkTypeId:search.value.wkTypeId?search.value.wkTypeId:'',
  };
  workStatistic(params).then((res: any) => {
    console.log(res,'res====>');
    tableData.value = res.data;
    tableDataloading.value = false;
  });
};
const getList = ()=>{
  getWorkStatistic();
}
//获取地区
const orgList = ref([]);
const getareaTree = () => {
  areaTree(userId.value).then((res: any) => {
    orgList.value = res.data;
  });
};
onMounted(() => {
  getWkTypes();
  getareaTree();
  getList();
});
</script>

<style lang="scss" scoped>
.table {
    margin-top: 16px;
}
</style>