daofu-gov-pc/src/views/system/base/service-rating/index.vue

<template>
  <div>
    <div class="percentage-content-body-one">
      <div class="content body_one">
        <div class="body_one_title">所有工作类型完成统计</div>
        <div class="body_one_content">
          <div v-for="(item, index) in workOptions" :key="index">
            <div>{{ item.typeName }}</div>
            <div>
              <span>总数</span><span>:{{ item.total }}</span>
            </div>
            <div>
              <span>完成数</span><span>:{{ item.finish }}</span>
            </div>
            <div>
              <span>未完成数</span><span>:{{ item.unFinish }}</span>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="percentage-content">
      <div class="content">
        <div class="h-layout space-between h-center">
          <div class="h-layout h-center">
            <div class="h-layout">
              <div class="tool-item" @click="getList">
                <svg-icon name="refurbish" class="icon" />
                <span>刷新</span>
              </div>
            </div>
            <div class="label-select filter-tab">
              <label>工作类型</label>
              <el-select
                v-model="search.typeId"
                @change="determineEme()"
                clearable
                placeholder="请选择"
              >
                <el-option
                  v-for="item in tabs"
                  :key="item.typeId"
                  :label="item.typeName"
                  :value="item.typeId"
                >
                </el-option>
              </el-select>
            </div>
            <div class="label-select filter-tab">
              <label>办理状态</label>
              <el-select
                v-model="search.state"
                @change="getList"
                clearable
                placeholder="请选择"
              >
                <el-option
                  v-for="item in stateOptions"
                  :key="item.value"
                  :label="item.title"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </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
            type="index"
            align="center"
            label="序号"
            width="80"
          />
          <el-table-column prop="title" align="center" label="工作内容" />
          <el-table-column
            prop="startTime"
            align="center"
            label="开始时间"
            width="150"
          >
            <template #default="scope">
              {{ scope.row.startTime }}
            </template>
          </el-table-column>
          <el-table-column
            prop="endTime"
            align="center"
            label="结束时间"
            width="150"
          >
            <template #default="scope">
              {{ scope.row.endTime ? scope.row.endTime : "--" }}
            </template>
          </el-table-column>
          <el-table-column
            prop="chinaName"
            align="center"
            label="发布人"
            width="120"
          />
          <el-table-column
            prop="postName"
            align="center"
            label="发布人岗位"
            width="150"
          />
          <el-table-column
            :resizable="true"
            align="center"
            width="260"
            label="操作"
          >
            <template #default="scope">
                 <span  v-if="tabIndex == 2" class="operate" @click="toDetail(scope.row.workId)">
                <svg-icon name="detail" class="icon"></svg-icon>
                <span class="detail">详情</span>
              </span>
              <span
               v-else
                class="operate"
                @click="
                  (dialogVisible = true), (form = scope.row), (readonly = true)
                "
              >
                <svg-icon name="detail" class="icon"></svg-icon>
                <span class="detail">详情</span>
              </span>
             
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页 -->
        <el-pagination
          class="pagination"
          @size-change="getList"
          @current-change="getList"
          v-model:current-page.sync="currentPage"
          :page-sizes="[10, 15, 20, 30]"
          v-model:page-size.sync="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          background
        >
        </el-pagination>
      </div>
    </div>
    <Add
      :visible="dialogVisible"
      :form="form"
      :readonly="readonly"
      @close="onclone"
      :typeId="typeId"
      :tabsTitle="tabsTitle"
    />
  </div>
</template>
<script lang='ts' setup>
import { onMounted, reactive, ref } from "vue";
import { receiveWork, wkAllFinishStats } from "@/api/demands";
import Add from "./add.vue";
import { useRouter } from "vue-router";
const router = useRouter();
import { wkTypes } from "@/api/Work";
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({
  condition: "",
  typeId:'',
  state:1,
});
const currentPage = ref(1);
const pageSize = ref(10);
const total = ref(0);
const tableData = ref([]);
//筛选选项
const stateOptions = ref([
    {title:"待办事项",value:1},
    {title:"已办事项",value:2}
]);
const tabs = ref([
  { typeName: "常规工作", sortId: 1, },
]);
const tabIndex = ref(0);
//详情弹窗
const dialogVisible = ref(false);
const form = ref({});
const readonly = ref(false);
//关闭详情弹窗
const onclone = () => {
  dialogVisible.value = false;
  form.value = {};
  getList();
};
//获取列表
const tableDataloading = ref(false);
const getList = () => {
  tableDataloading.value = true;
  let params = {
    limit: pageSize.value,
    page: currentPage.value,
    condition: search.value.condition,
    userId: userId.value,
    typeId:search.value.typeId,
    state:search.value.state
  };
  receiveWork(params).then((res: any) => {
    console.log(res.data.list);
    tableData.value = res.data.list;
    total.value = res.data.total;
    tableDataloading.value = false;
  });
};
//获取所有工作类型完成统计
const workOptions = ref([]);
const getWkAllFinishStats = () => {
  let params = {
    userId: userId.value,
    endTime: "",
    startTime: "",
  };
  wkAllFinishStats(params).then((res: any) => {
    workOptions.value = res.data;
  });
};
//应急事件详情
const toDetail = (id) => {
  router.push({
    name: "work-detail",
    query: { id: id },
  });
};
//工作类型
const getWkTypes = ()=>{
  let params = {
    classify:1
  }
  wkTypes(params).then((res: any) => {
    tabs.value = res.data;
    search.value.typeId = res.data[0].typeId
    getList();
  });
}
//判断是否应急事件
const determineEme = (value)=>{
    for (let index = 0; index < tabs.value.length; index++) {
        if (search.value.typeId == tabs.value[index].typeId) {
            tabIndex.value = index;
            console.log(tabIndex.value,'tabIndex.value===>');
            
        }
    }
    getList();
}
onMounted(() => {
     getWkTypes();
  
  getWkAllFinishStats();
});
</script>
<style lang="scss" scoped>
.content {
    width: 100%;
    background: #fff;
    border-radius: 0.26042vw;
    box-shadow: 0 0 0.41667vw 0 rgb(8 33 85 / 10%);
    height: 100%;
    padding: 0.83333vw;
    overflow-y: auto;
    overflow-x: hidden !important;
    /* stylelint-disable-next-line property-no-vendor-prefix */
    -moz-box-sizing: border-box;
    /* stylelint-disable-next-line property-no-vendor-prefix */
    -webkit-box-sizing: border-box;
    /* stylelint-disable-next-line property-no-vendor-prefix */
    -o-box-sizing: border-box;
    /* stylelint-disable-next-line property-no-vendor-prefix */
    -ms-box-sizing: border-box;
    box-sizing: border-box;
}
.dialog-footer button:first-child {
    margin-right: 10px;
}
.content-top {
    padding: 16px;
    background: #fff;
    box-shadow: 0 0 6px rgb(0 120 255 / 10%);
    border-radius: 6px;
    display: flex;
    flex-direction: row;
}
.coverImg {
    width: 50px;
    height: 50px;
}
.stop {
    color: rgb(8 238 8);
}
.didNot {
    color: #fb4e33;
}
.percentage-content-body-one {
    width: 86.2vw;
    margin: 18px;
}
.percentage-content {
    width: 88vw;
    // margin: 20px;
}
.body_one_title {
    font-size: 24px;
    font-weight: 600;
    margin-bottom: 30px;
}
.body_one_content {
    display: flex;
    justify-content: space-between;
    > div {
        text-align: center;
        color: #fff;
        width: 350px;
        height: 180px;
        background-image: url("@/assets/images/onfile/blue.png");
        background-size: 350px 180px;
        background-repeat: no-repeat;
        box-sizing: border-box;
        font-size: 30px;
        padding: 10px;
        // font-weight: 600;
        > div:not(:nth-child(1)) {
            width: 100%;
            display: flex;
            padding-left: 50px;
            > span:nth-child(1) {
                width: 50%;
                display: inline-block;
                // text-align: right;
                text-align: justify;
                text-align-last: justify;
            }
            > span:nth-child(2) {
                font-weight: 600;
            }
        }
        > div:nth-child(1) {
            font-size: 25px;
            font-weight: bold;
        }
    }
}
.h-center {
    margin-bottom: 10px;
}
</style>