shuili-vue/src/views/sluice/runManage/dangerWeakProject/inspectStatistics/index.vue

<!-- 监督检查-统计分析 -->
<script>
import { getDangerTaskListData, getDangerTaskTotalData } from "@/api/sluice";
import { getAreasData } from "@/api/areas";
import Pie from "./components/Pie.vue";

import TopBackTitle from "@/components/TopBackTitle/index.vue";
import { cascaderLazyLoad } from "@/utils/elUtils";

export default {
  name: "InspectionItems",
  components: {
    Pie,
    TopBackTitle,
  },
  data() {
    return {
      areasOptionProps: {
        emitPath: false,
        checkStrictly: true, //选择任意一级
        expandTrigger: "hover",
        lazy: true,
        lazyLoad: cascaderLazyLoad,
      },
      areasOptions: [],
      riverLocationList: [], // 流域数据
      tasksList: [], // 任务列表数据
      projectTypeOptions: [], // 工程类型
      paramsData: {
        riverLocation: "",
        wagaType: "",
        adcd: "",
        taskId: "",
      },
      questionLevelList: [],
    };
  },
  methods: {
    // 获取列表数据
    initData() {
      getDangerTaskTotalData({
        wagaType: this.paramsData.wagaType || null,
        adcd: this.paramsData.adcd || null,
        id: this.paramsData.taskId || null,
        riverLocation: this.paramsData.riverLocation || null,
      }).then((res) => {
        let list = [
          {
            text: "病险工程数",
            key: "totalCheckTask",
            value: 0,
          },
          {
            text: "已建核查数",
            key: "alreadyCheckTask",
            value: 0,
          },
          {
            text: "未建核查数",
            key: "unCheckTask",
            value: 0,
          },
          {
            text: "任务总数",
            key: "totalTask",
            value: 0,
          },
          {
            text: "完成核查任务数",
            key: "finishTask",
            value: 0,
          },
          {
            text: "未完成核查任务数",
            key: "unTask",
            value: 0,
          },
          {
            text: "核查项总数",
            key: "itemTotal",
            value: 0,
          },
          {
            text: "核查正常项数",
            key: "normalTotal",
            value: 0,
          },
          {
            text: "核查问题项数",
            key: "problemTotal",
            value: 0,
          },
        ];
        if (res?.data) {
          list.forEach((item) => {
            item.value = res.data[item.key] || 0;
          });
        }
        this.questionLevelList = list;
      });
    },
    handleChangeType() {
      this.remoteOptions = [];
      this.paramsData = {
        wagaType: "",
        adcd: "",
        remoteValue: "",
      };
      if (this.typeSelect === "") {
        this.initData();
      }
    },
    handleChangeQuery() {
      this.initData();
    },
    handleGetRemoteRiverLocationData() {
      // 获取远程搜索数据
      // api({
      //   data: {
      //     name: query,
      //   },
      //   pageSize: 20,
      //   pageNum: 1,
      // }).then((res) => {
      //   if (res) {
      //     this.remoteOptions = res.records.map((item) => {
      //       return {
      //         label: item.name,
      //         value: item.id,
      //       };
      //     });
      //   }
      // });
    },
    // 获取远程搜索数据
    handleGetRemoteTasksData(query) {
      getDangerTaskListData({
        data: {
          name: query,
        },
        pageSize: 20,
        pageNum: 1,
      }).then((res) => {
        if (res) {
          this.tasksList = res.records.map((item) => {
            return {
              label: item.name,
              value: item.id,
            };
          });
        }
      });
    },
    // 获取行政区划数据
    getTreeData() {
      getAreasData().then((items) => {
        let res = [];
        let getChildren = (res, pid) => {
          for (const i of items.data) {
            if (i.parentid === pid) {
              const newItem = {
                label: i.name,
                value: i.id,
              };
              if (i.layer != 3) newItem.children = [];
              res.push(newItem);
              getChildren(newItem.children, newItem.value);
            }
          }
        };
        getChildren(res, items.data[0].parentid);
        this.areasOptions = res;
      });
    },
  },
  created() {
    // 水闸类型
    this.getDicts("sluice_type").then((response) => {
      this.projectTypeOptions = response.data;
    });
  },
  mounted() {
    this.getTreeData();
    this.initData();
  },
};
</script>

<template>
  <div class="body slider-right">
    <TopBackTitle :showBackBtn="false" title="统计分析"></TopBackTitle>

    <div class="table-box slider-right-body">
      <div class="flex title-box justify-between items-center">
        <div class="title">监督检查任务统计分析</div>
        <div class="select-box flex items-center font-14">
          <span class="mr-12">所属流域</span>
          <el-select
            size="mini"
            class="statistic-analysis-select-style"
            v-model="paramsData.riverLocation"
            filterable
            link
            remote
            placeholder="请输入关键词"
            :remote-method="handleGetRemoteRiverLocationData"
            @focus="handleGetRemoteRiverLocationData('')"
            @change="handleChangeQuery"
          >
            <el-option label="全部" value=""> </el-option>
            <el-option
              v-for="item in riverLocationList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
          <span class="ml-32 mr-12">工程类型</span>
          <el-select
            size="mini"
            class="statistic-analysis-select-style"
            v-model="paramsData.wagaType"
            filterable
            @change="handleChangeQuery"
            placeholder="请选择"
          >
            <el-option label="全部" value=""> </el-option>
            <el-option
              v-for="item in projectTypeOptions"
              :key="item.dictValue"
              :label="item.dictLabel"
              :value="item.dictValue"
            >
            </el-option>
          </el-select>
          <span class="ml-32 mr-12">行政区划</span>
          <el-cascader
            size="mini"
            class="statistic-analysis-select-style"
            v-model="paramsData.adcd"
            :props="areasOptionProps"
            placeholder="请选择行政区划"
            clearable
            @change="handleChangeQuery"
          >
          </el-cascader>
          <span class="ml-32 mr-12">病险核查任务</span>
          <el-select
            size="mini"
            class="statistic-analysis-select-style"
            v-model="paramsData.taskId"
            filterable
            link
            remote
            placeholder="请输入关键词"
            :remote-method="handleGetRemoteTasksData"
            @focus="handleGetRemoteTasksData('')"
            @change="handleChangeQuery"
          >
            <el-option label="全部" value=""> </el-option>
            <el-option
              v-for="item in tasksList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </div>
      </div>

      <!-- 问题列表 -->
      <div class="question-box" v-if="questionLevelList.length">
        <Pie
          title="工程统计"
          echartsTitle="工程总数"
          :itemData="questionLevelList.slice(1, 3)"
          ref="pieRef1"
          class="question-item"
        ></Pie>
        <Pie
          ref="pieRef2"
          title="任务数统计"
          echartsTitle="任务总数"
          class="question-item"
          :itemData="questionLevelList.slice(4, 6)"
        ></Pie>
        <Pie
          ref="pieRef2"
          title="核查项统计"
          echartsTitle="核查项总数"
          class="question-item"
          :itemData="questionLevelList.slice(7, 9)"
        ></Pie>
      </div>
    </div>
  </div>
</template>

<style scoped lang="less">
.body {
  width: 100%;
  padding-left: 24px;
  .top-title {
    height: 40px;
    background-color: white;
    display: flex;
    padding-left: 16px;
    align-items: center;
    font-weight: 600;
  }

  .table-box {
    width: 100%;
    margin-top: 24px;
    background-color: white;
    .title-box {
      padding: 16px;
      border-bottom: 1px solid #f0f0f0;
      .title {
        padding-left: 20px;
        position: relative;
        &::before {
          position: absolute;
          left: 0;
          top: 0;
          content: "";
          width: 4px;
          height: 16px;
          background-color: #1890ff;
        }
      }
    }
    .question-box {
      padding: 24px;
      .question-item {
        margin-bottom: 12px;
      }
    }
  }
}
</style>