nnbp_ui/src/views/detection/list/index.vue

<template>
  <div style="padding: 10px">
    <div class="formbody">
      <el-form :inline="true" v-model="queryparameters" class="demo-form-inline">
        <el-form-item label="设施台账">
          <el-select
            v-model="queryparameters.facilitiesId"
            class="m-1"
            placeholder="请选择"
          >
            <el-option
              v-for="item in alldevices"
              :label="item.exId"
              :value="item.exId"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="计划状态" v-if="currentstatus == 1">
          <el-select v-model="queryparameters.status" class="m-1" placeholder="请选择">
            <el-option
              v-for="item in detection_status"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="道路名">
          <el-select v-model="queryparameters.taskArea" class="m-2" placeholder="请选择">
            <el-option
              v-for="item in alldevices"
              :label="item.roadName"
              :value="item.roadName"
            ></el-option>
          </el-select>
        </el-form-item>
        <div style="float: right">
          <el-form-item>
            <el-button type="primary" @click="getList">查询</el-button>
          </el-form-item>
          <el-form-item>
            <el-button type="success" @click="adddetection">新增</el-button>
          </el-form-item>
        </div>
      </el-form>

      <div>
        <el-table
          :data="tableData"
          class="eltable"
          style="width: 100%"
          @row-click="tblrowclick"
        >
          <el-table-column prop="taskCode" label="台账编号">
            <template #default="scope">
              {{
                alldevices.filter((i) => i.id === scope.row.facilitiesId)[0]?.ext1
                  .tz_id ?? "-"
              }}
            </template>
          </el-table-column>
          <el-table-column prop="taskCode" label="设施名称">
            <template #default="scope">
              {{
                alldevices.filter((i) => i.id === scope.row.facilitiesId)[0]?.ext1
                  .tz_ss_name ?? "-"
              }}
            </template>
          </el-table-column>
          <el-table-column prop="taskCode" label="城区">
            <template #default="scope">
              {{
                (sys_area ?? []).filter(
                  (i) =>
                    i.value ===
                    alldevices.filter((i) => i.id === scope.row.facilitiesId)[0]?.ext1
                      .tz_area_new +
                      ""
                )[0]?.label ?? "-"
              }}
            </template>
          </el-table-column>
          <el-table-column label="检测类型">
            <template #default="scope">
              {{
                detection_type.filter(
                  (i) => i.value + "" === scope.row.detectionType + ""
                )[0]?.label ?? "-"
              }}
            </template>
          </el-table-column>
          <el-table-column label="路段范围">
            <template #default="scope">
              {{
                alldevices.filter((i) => i.id === scope.row.facilitiesId)[0]?.ext1
                  .tz_ss_road_se ?? "-"
              }}
            </template>
          </el-table-column>
          <el-table-column prop="ext1.task.datestart" label="计划时间" />
          <el-table-column prop="ext1.task.dateend" label="完成时间" />
          <el-table-column label="管径(mm)">
            <template #default="scope">
              {{ scope.row.ext1.task.gd.map((i) => i.yh_gj).join("、") }}
            </template>
          </el-table-column>
          <el-table-column label="管道清淤(米)">
            <template #default="scope">
              {{
                evilFn(
                  scope.row.ext1.task.gd
                    .map((i) => (i.yh_length && i.yh_length != "" ? i.yh_length : 0))
                    .join("+")
                )
              }}
            </template>
          </el-table-column>

          <el-table-column label="雨水口清掏（座）">
            <template #default="scope">
              {{ scope.row.ext1.task.ysk }}
            </template>
          </el-table-column>

          <el-table-column label="检查井清掏（座）">
            <template #default="scope">
              {{ scope.row.ext1.task.jcj }}
            </template>
          </el-table-column>

          <el-table-column label="计划状态">
            <template #default="scope">
              {{
                detection_status.filter((i) => i.value === scope.row.status + "")[0]
                  ?.label ?? "-"
              }}
            </template>
          </el-table-column>

          <el-table-column prop="maintainUnit" label="辖区班组">
            <template #default="scope">
              {{
                (scope.row.ext1.facilities_unit == ""
                  ? []
                  : scope.row.ext1.facilities_unit ?? []
                )
                  .map((i) => {
                    return (
                      alldept.find((p) => {
                        return p.deptId + "" === i + "";
                      })?.deptName ?? "-"
                    );
                  })
                  .join("、")
              }}
            </template>
          </el-table-column>
          <el-table-column label="检测单位">
            <template #default="scope">
              {{ scope.row.detectionDes }}
            </template>
          </el-table-column>
          <el-table-column label="备注">
            <template #default="scope">
              {{ scope.row.detectionRemark }}
            </template>
          </el-table-column>
          <el-table-column prop="address" label="操作">
            <template #default="scope">
              <el-button text size="small" @click.stop="edittask(scope.row)"
                >修改
              </el-button>
              <el-popconfirm title="确定删除?" @confirm="deltask(scope.row)">
                <template #reference>
                  <el-button text size="small" @click.stop="">删除</el-button>
                </template>
              </el-popconfirm>
            </template>
          </el-table-column>

          <!-- <el-table-column prop="ext1" label="责任人" width="180">
            <template #default="scope">
              {{ scope.row.ext1 === "" ? "未派发" : scope.row.ext1 }}
            </template>
          </el-table-column> -->
        </el-table>
        <div style="position: relative; padding-right: 20px; margin-top: -20px">
          <Pagination
            :total="pagedata.total ?? 0"
            v-show="pagedata.total > 0"
            v-model:page="queryparameters.pageNum"
            v-model:limit="queryparameters.pageSize"
            @pagination="getList"
          ></Pagination>
          <!-- <el-pagination
          style="float: right"
          small
          background
          :page-sizes="[10, 20, 30, 50]"

          :page-size="10"
          layout=" sizes,prev, pager, next"
          :total="pagedata.total??0"
          class="mt-4"
        /> -->
        </div>
      </div>
    </div>

    <el-dialog
      v-model="showadd"
      v-loading="loading"
      title="新增设施检测计划"
      width="70%"
      draggable
    >
      <div>
        <el-form :model="detectioninfo" ref="form">
          <div style="font-weight: bold; font-size: 15px; margin-bottom: 10px">
            任务基础信息
          </div>
          <el-row>
            <el-col :span="12"
              ><el-form-item label="关联设施" label-width="150px">
                <el-select
                  v-model="detectioninfo.facilitiesId"
                  filterable
                  placeholder="请选择设备"
                >
                  <el-option
                    v-for="item in alldevices"
                    :label="item.ext1.tz_id"
                    :value="item.id"
                  ></el-option>
                </el-select> </el-form-item
            ></el-col>
            <el-col :span="12">
              <el-form-item
                label="任务类型"
                required
                label-width="150px"
                prop="maintainType"
              >
                <el-select
                  v-model="detectioninfo.maintainType"
                  filterable
                  placeholder="请选择类型"
                >
                  <el-option
                    v-for="item in detection_type"
                    :label="item.label"
                    :value="parseInt(item.value)"
                  ></el-option>
                </el-select> </el-form-item
            ></el-col>
          </el-row>
          <el-row>
            <el-col :span="12"
              ><el-form-item label="设施名称" label-width="150px">
                <el-input
                  v-model="detectioninfo.ext1.facilities_name"
                  placeholder="请输入"
                ></el-input></el-form-item
            ></el-col>
            <el-col :span="12"
              ><el-form-item label="所在道路" label-width="150px">
                <el-input
                  v-model="detectioninfo.ext1.facilities_road"
                  placeholder="请输入"
                ></el-input></el-form-item
            ></el-col>

            <el-col :span="6"
              ><el-form-item label="运维长度" label-width="100px">
                <el-input
                  v-model="detectioninfo.ext1.facilities_length"
                  placeholder="请输入"
                  ><template #append>(米)</template></el-input
                ></el-form-item
              ></el-col
            >

            <el-col :span="6"
              ><el-form-item label="管径范围" label-width="100px">
                <el-input
                  v-model="detectioninfo.ext1.facilities_gjfw"
                  placeholder="请输入"
                  ><template #append>(mm)</template></el-input
                ></el-form-item
              ></el-col
            >
            <el-col :span="12"
              ><el-form-item
                label="检测起点"
                required
                label-width="100px"
                prop="ext1.facilities_start"
              >
                <el-input
                  v-model="detectioninfo.ext1.facilities_start"
                  placeholder="请输入"
                ></el-input></el-form-item
            ></el-col>

            <el-col :span="12"
              ><el-form-item label="辖区班组" label-width="100px">
                <el-tree-select
                  v-model="detectioninfo.ext1.facilities_unit"
                  multiple
                  :data="treedept"
                  check-strictly="true"
              /></el-form-item>
            </el-col>

            <el-col :span="12"
              ><el-form-item
                label="检测终点"
                required
                label-width="100px"
                prop="ext1.facilities_end"
              >
                <el-input
                  v-model="detectioninfo.ext1.facilities_end"
                  placeholder="请输入"
                ></el-input></el-form-item
            ></el-col>

            <el-col :span="24">
              <el-form-item label="检测备注" label-width="150px">
                <el-input
                  v-model="detectioninfo.detectionRemark"
                  type="textarea"
                  placeholder="请输入"
                ></el-input></el-form-item
            ></el-col>

            <el-col :span="24">
              <el-form-item label="检测单位" label-width="150px">
                <el-input
                  v-model="detectioninfo.detectionDes"
                  type="textarea"
                  placeholder="请输入"
                ></el-input></el-form-item
            ></el-col>
          </el-row>
          <div style="font-weight: bold; font-size: 15px; margin-bottom: 10px">
            养护计划量及任务派发
          </div>
          <el-row>
            <el-col :span="8">
              <el-form-item label="检查井" label-width="100px">
                <el-input
                  v-model="detectioninfo.ext1.task.jcj"
                  type="text"
                  placeholder="请输入"
                  ><template #append>(座)</template></el-input
                ></el-form-item
              >
            </el-col>
            <el-col :span="8">
              <el-form-item label="雨水口" label-width="100px">
                <el-input
                  v-model="detectioninfo.ext1.task.ysk"
                  type="text"
                  placeholder="请输入"
                  ><template #append>(座)</template></el-input
                ></el-form-item
              >
            </el-col>
            <el-col :span="8">
              <el-form-item label="排河口" label-width="100px">
                <el-input
                  v-model="detectioninfo.ext1.task.phk"
                  type="text"
                  placeholder="请输入"
                  ><template #append>(座)</template></el-input
                ></el-form-item
              >
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="4">
              <div
                style="
                  font-weight: bold;
                  font-size: 15px;
                  text-align: right;
                  padding-right: 30px;
                  padding-top: 3px;
                "
              >
                雨水口检测详情
              </div>
            </el-col>
            <el-col :span="4" style="padding-right: 10px">
              <el-form-item label="单箅" label-width="40px">
                <el-input
                  v-model="detectioninfo.ext1.task.bz_dan"
                  type="text"
                  placeholder="请输入"
                  ><template #append>(个)</template></el-input
                ></el-form-item
              >
            </el-col>
            <el-col :span="4" style="padding-right: 10px">
              <el-form-item label="双箅" label-width="40px">
                <el-input
                  v-model="detectioninfo.ext1.task.bz_shuang"
                  type="text"
                  placeholder="请输入"
                  ><template #append>(个)</template></el-input
                ></el-form-item
              >
            </el-col>
            <el-col :span="4" style="padding-right: 10px">
              <el-form-item label="三箅" label-width="40px">
                <el-input
                  v-model="detectioninfo.ext1.task.bz_san"
                  type="text"
                  placeholder="请输入"
                  ><template #append>(个)</template></el-input
                ></el-form-item
              >
            </el-col>
            <el-col :span="4" style="padding-right: 10px">
              <el-form-item label="四箅" label-width="40px">
                <el-input
                  v-model="detectioninfo.ext1.task.bz_si"
                  type="text"
                  placeholder="请输入"
                  ><template #append>(个)</template></el-input
                ></el-form-item
              >
            </el-col>
            <el-col :span="4" style="padding-right: 10px">
              <el-form-item label="多箅" label-width="40px">
                <el-input
                  v-model="detectioninfo.ext1.task.bz_duo"
                  type="text"
                  placeholder="请输入"
                  ><template #append>(个)</template></el-input
                ></el-form-item
              >
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="4">
              <div
                style="
                  font-weight: bold;
                  font-size: 15px;
                  text-align: right;
                  padding-right: 30px;
                  padding-top: 3px;
                "
              >
                管道检测详情
              </div>
            </el-col>
            <el-col :span="20">
              <el-row>
                <el-col :span="24">
                  <el-row v-for="(item, index) in detectioninfo.ext1.task.gd">
                    <el-col :span="8" style="padding-right: 10px">
                      <el-form-item label="管道检测" label-width="80px">
                        <el-input
                          v-model="item.yh_length"
                          type="text"
                          placeholder="请输入"
                          ><template #append>(米)</template></el-input
                        ></el-form-item
                      >
                    </el-col>

                    <el-col :span="8" style="padding-right: 10px">
                      <el-form-item label="管径" label-width="80px">
                        <el-input v-model="item.yh_gj" type="text" placeholder="请输入"
                          ><template #append>(mm)</template></el-input
                        ></el-form-item
                      >
                    </el-col>
                    <el-col :span="8" style="padding-right: 40px; position: relative">
                      <el-form-item label="备注" label-width="40px">
                        <el-input
                          v-model="item.yh_remark"
                          type="text"
                          placeholder="请输入"
                        ></el-input
                      ></el-form-item>
                      <el-button
                        style="position: absolute; right: 0; top: 3px"
                        size="small"
                        @click="gzloperat(index)"
                        type="primary"
                        :icon="
                          index == detectioninfo.ext1.task.gd.length - 1 ? Plus : Minus
                        "
                      ></el-button>
                    </el-col>
                  </el-row>
                </el-col>

                <el-col :span="24">
                  <div style="font-weight: bold; font-size: 15px">
                    合计：{{
                      evilFn(
                        detectioninfo.ext1.task.gd
                          .map((i) => {
                            var p = 0;
                            try {
                              p = parseFloat(i.yh_length);
                            } catch (e) {
                              p = 0;
                            }
                            return p == "" || isNaN(p) ? 0 : p;
                          })
                          .join("+")
                      )
                    }}
                    米
                  </div>
                </el-col>
              </el-row>
            </el-col>
          </el-row>

          <el-row style="margin-top: 10px">
            <el-col :span="12" style="text-align: right">
              <el-form-item :label="`计划开始时间`">
                <el-date-picker
                  v-model="detectioninfo.ext1.task.datestart"
                  value-format="YYYY-MM"
                  type="month"
                  placeholder="请选择"
                />
              </el-form-item>
            </el-col>
            <el-col :span="12" style="text-align: right">
              <el-form-item :label="`计划结束时间`">
                <el-date-picker
                  v-model="detectioninfo.ext1.task.dateend"
                  value-format="YYYY-MM"
                  type="month"
                  placeholder="请选择"
                />
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>

      <template #footer>
        <span class="dialog-footer">
          <el-button @click="showadd = false">取消</el-button>
          <el-button type="primary" @click="onadd">保存</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { defineComponent, ref, reactive, onMounted, computed } from "vue";
import { useDict } from "@/utils/dict";
import router from "../../../router";
// 分页组件
import Pagination from "@/components/Pagination";
import { listFacilities } from "@/api/system/facilities";
import { listDetection, addDetection } from "@/api/system/detection";
import { listDept, getDept } from "@/api/system/dept";
import { treeselect as deptTreeselect } from "@/api/system/dept";
import { cloneDeep } from "lodash";
import { ElMessage } from "element-plus";
import { useRoute } from "vue-router";
import { delDetection, updateDetection } from "../../../api/system/detection";
import {
  Delete,
  Edit,
  Search,
  Share,
  Upload,
  Plus,
  Minus,
} from "@element-plus/icons-vue";
const {
  task_status,
  task_type,
  task_event_type,
  task_event_category,
  sys_area,
  facilities_pstz,
} = useDict(
  "task_status",
  "task_type",
  "task_event_type",
  "task_event_category",
  "sys_area",
  "facilities_pstz"
);

const { detection_status, detection_type } = useDict(
  "detection_status",
  "detection_type"
);

const queryparameters = ref({
  status: "",
  facilitiesId: "",
  pageNum: 1,
  pageSize: 10,
});

const { proxy } = getCurrentInstance();
const showadd = ref(false);
const loading = ref(false);
const tableData = ref([]);
const pagedata = ref({});
const route = useRoute();
const currentstatus = computed(() => route.params.status);

const alldevices = ref([]);
const treedept = ref([]);
const detectioninfo = ref({});
const maintaininfo = ref();
const alldept = ref([]);

const adddetection = () => {
  initadd();
  showadd.value = true;
};

const tblrowclick = (row) => {
  // console.log(row)
  router.push(`/detection/detail/${row.id}`);
};

const initadd = () => {
  detectioninfo.value = {
    ext1: {
      facilities_name: "",
      facilities_road: "",
      facilities_length: "",
      facilities_gjfw: "",
      facilities_start: "",
      facilities_end: "",
      facilities_unit: "",
      task: {
        jcj: "",
        ysk: "",
        phk: "",
        bz_dan: "",
        bz_shuang: "",
        bz_san: "",
        bz_si: "",
        bz_duo: "",
        gd: [
          {
            yh_length: "",
            yh_gj: "",
            yh_remark: "",
          }
        ],
        datestart: "",
        dateend: "",
      },
    },
    facilitiesId: null,
    detectionRemark: "",
    detectionDes: '',
    detectionWeek:'',
    detectionType: "",
    id: null,
    status: 1,
  };
};
const onadd = () => {
  loading.value = true;
  if (detectioninfo.value.id == null) {
    var detectioninfoobj = cloneDeep(detectioninfo.value);
    detectioninfoobj.ext1 = JSON.stringify(detectioninfoobj.ext1);
    // delete detectioninfoobj.detectionDept;
    detectioninfoobj.detectionDept =
      detectioninfo.value.detectionDept instanceof Array
        ? detectioninfo.value.detectionDept.join(",")
        : "";
    addDetection(detectioninfoobj).then((res) => {
      loading.value = false;
      showadd.value = false;
      getList();
    });
  } else {
    var detectioninfoobj = cloneDeep(detectioninfo.value);
    detectioninfoobj.ext1 = JSON.stringify(detectioninfoobj.ext1);
    // delete detectioninfoobj.detectionDept;
    detectioninfoobj.detectionDept =
      detectioninfo.value.detectionDept instanceof Array
        ? detectioninfo.value.detectionDept.join(",")
        : "";
    updateDetection(detectioninfoobj).then((res) => {
      loading.value = false;
      showadd.value = false;
      getList();
    });
  }
};

const getList = () => {
  if (currentstatus.value != 1) {
    if (currentstatus.value == 2) {
      queryparameters.value.status = 1;
    } else {
      queryparameters.value.status = currentstatus.value;
    }
  } else {
    queryparameters.value.status = "";
  }
  listDetection(queryparameters.value).then((response) => {
    tableData.value = response.rows.map((i) => {
      i.ext1 = JSON.parse(i.ext1);
      return i;
    });
    pagedata.value = response;
  });
};

const getyears = () => {
  var years = [];
  for (var i = 0; i <= 100; i++) {
    years.push((2019 + i).toString());
  }
  return years;
};
const getmonth = () => {
  var months = [];
  for (var i = 0; i < 12; i++) {
    if (i < 9) {
      months.push("0" + (1 + i).toString());
    } else {
      months.push((1 + i).toString());
    }
  }
  return months;
};

const gzloperat = (index) => {
  if (detectioninfo.value.ext1.task.gd.length - 1 == index) {
    //add
    detectioninfo.value.ext1.task.gd.push({
      yh_length: "",
      yh_gj: "",
      yh_remark: "",
    });
  } else {
    //sub
    detectioninfo.value.ext1.task.gd.splice(index, 1);
  }
};
const evilFn = (fn) => {
  let Fn = Function; // 一个变量指向Function，防止有些前端编译工具报错
  return new Fn(`return ${fn}`)();
};
const edittask = (row) => {
  detectioninfo.value = cloneDeep(row);
  if (
    detectioninfo.value.detectionDept != null &&
    detectioninfo.value.detectionDept != "" &&
    detectioninfo.value.detectionDept != undefined &&
    !Array.isArray(detectioninfo.value.detectionDept)
  ) {
    detectioninfo.value.detectionDept = detectioninfo.value.detectionDept
      .split(",")
      .map((i) => parseInt(i));
  }
  showadd.value = true;
};
const deltask = (row) => {
  delDetection(row.id).then((res) => {
    ElMessage.success("删除成功");
    getList();
  });
};

{
  listFacilities().then((res) => {
    alldevices.value = res.rows.map((i) => {
      i.ext1 = JSON.parse(i.ext1);
      return i;
    });
  });
  initadd();
  getList();

  listDept().then((response) => {
    alldept.value = cloneDeep(response.data);
  });

  function setdatakey(dept) {
    if (dept.children) {
      dept.children = dept.children.map((i) => {
        return setdatakey(i);
      });
    }
    dept["value"] = dept.id;
    return dept;
  }

  deptTreeselect().then((res) => {
    treedept.value = [setdatakey(res.data[0])];
  });

  watch(
    () => detectioninfo.value.facilitiesId,
    () => {
      if (detectioninfo.value.facilitiesId != null) {
        var fd = alldevices.value.filter(
          (i) => i.id + "" == detectioninfo.value.facilitiesId + ""
        )[0];
        detectioninfo.value.ext1["facilities_name"] = fd.ext1.tz_ss_name;
        detectioninfo.value.ext1["facilities_road"] = fd.ext1.tz_ss_road;
        detectioninfo.value.ext1["facilities_length"] = fd.ext1.tz_ss_data_length;
        detectioninfo.value.ext1["facilities_gjfw"] = fd.ext1.tz_ss_dn;
        detectioninfo.value.ext1["facilities_start"] = fd.ext1.tz_ss_road_start;
        detectioninfo.value.ext1["facilities_end"] = fd.ext1.tz_ss_road_end;
        detectioninfo.value.ext1["facilities_unit"] = fd.ext1.tz_ss_unit;
        detectioninfo.value.ext1["task"]["jcj"] = fd.ext1.tz_ss_data_jing;
        detectioninfo.value.ext1["task"]["ysk"] = fd.ext1.tz_ss_data_ysk;
        detectioninfo.value.ext1["task"]["phk"] = fd.ext1.tz_pfk;
        detectioninfo.value.ext1["task"]["bz_dan"] = fd.ext1.tz_bz_dan;
        detectioninfo.value.ext1["task"]["bz_shuang"] = fd.ext1.tz_bz_shuang;
        detectioninfo.value.ext1["task"]["bz_san"] = fd.ext1.tz_bz_san;
        detectioninfo.value.ext1["task"]["bz_si"] = fd.ext1.tz_bz_si;
        detectioninfo.value.ext1["task"]["bz_duo"] = fd.ext1.tz_bz_duo;
      }
    }
  );
}

onMounted(() => {

});
</script>

<style lang="scss" scoped>
.formbody {
  background: #fff;
  width: 100%;
  border-radius: 5px;
  min-height: 80vh;
  padding: 15px 10px;
  .eltable {
    border: 1px solid #e5e9f2;
    border-radius: 5px;
  }
}
</style>

<style>
.el-table__row:hover {
  cursor: pointer;
}
.el-select {
  width: 100%;
}
</style>