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

<template>
  <div style="padding: 10px 15px">
    <div class="maintindetail">
      <div class="title">
        {{ facilitieinfo.name }}检测计划
        <div class="btngroup">
          <el-button
            type="primary"
            v-if="detectioninfo.status == 1"
            @click="showpf = true"
            >派 发</el-button
          >

          <el-button
            type="primary"
            v-if="detectioninfo.status == 2"
            @click="showzxfk = true"
            >执行反馈</el-button
          >
          <el-button
            type="primary"
            v-if="detectioninfo.status == 3"
            @click="showcgsc = true"
            >成果上传</el-button
          >

          <el-button
            type="danger"
            @click="
              () => {
                router.back();
              }
            "
            >返回</el-button
          >
        </div>
      </div>
      <div class="card">
        <div class="title" style="position: relative">设施信息</div>
        <div class="body">
          <el-row>
            <el-col :span="6">台账序号：{{ facilitieinfo.exId }}</el-col>
            <el-col :span="6">所在道路：{{ facilitieinfo.roadName }}</el-col>
            <el-col :span="6">性质：{{ facilitieinfo.nature }}</el-col>
            <el-col :span="6">运维长度：{{ facilitieinfo.fLength }}</el-col>
            <el-col :span="6">设施名称：{{ facilitieinfo.name }}</el-col>
            <el-col :span="18"
              >设施起止点：{{ facilitieinfo.addrFrom }}-{{
                facilitieinfo.addrEnd
              }}</el-col
            >
          </el-row>
        </div>
      </div>

      <div class="card">
        <div class="title" style="position: relative">
          检测计划信息
          <div
            style="
              position: absolute;
              right: 10px;
              top: 0;
              color: #333;
              font-size: 20px;
            "
          >
            {{
              detection_status.filter(
                (i) => i.value.toString() === detectioninfo.status.toString()
              )[0]?.label ?? "-"
            }}
          </div>
        </div>
        <div class="body">
          <el-row>
            <el-col :span="6"
              >检测类型：{{
                detection_type.filter(
                  (i) => i.value === detectioninfo.detectionType + ""
                )[0]?.label ?? "-"
              }}</el-col
            >

            <el-col :span="6">年计划：{{ detectioninfo.detectionYear }}</el-col>
            <el-col :span="6"
              >月计划：{{ detectioninfo.detectionMonth }}</el-col
            >
            <el-col :span="6">周计划：{{ detectioninfo.detectionWeek }}</el-col>
            <el-col :span="12"
              >计划作业班组：{{}}{{ alldept
                  .filter(
                    (i) =>
                      (
                       detectioninfo.detectionDept
                      ).indexOf(i.deptId) != -1
                  )
                  .map((i) => i.deptName)
                  .join(",")}}</el-col
            >
            <el-col :span="12"
              >计划备注：{{ detectioninfo.detectionDes }}</el-col
            >
            <el-col :span="24"
              >备注：{{ detectioninfo.detectionRemark }}</el-col
            >
          </el-row>
        </div>
      </div>

      <div class="card" v-if="detectioninfo.status > 1">
        <div class="title">派发信息</div>
        <div class="body">
          <el-row>
            <el-col :span="6"
              >负责人：{{
                allusers.filter(
                  (i) =>
                    i.userId.toString() ===
                    JSON.parse(
                      detectioninfo.detectionLogs.filter(
                        (ii) => ii.detectionStatus === 2
                      )[0].logDes
                    ).fzr.toString()
                )[0]?.nickName ?? "-"
              }}</el-col
            >
            <el-col :span="6"
              >联系方式：{{
                allusers.filter(
                  (i) =>
                    i.userId.toString() ===
                    JSON.parse(
                      detectioninfo.detectionLogs.filter(
                        (ii) => ii.detectionStatus === 2
                      )[0].logDes
                    ).fzr.toString()
                )[0]?.phonenumber ?? "-"
              }}</el-col
            >
            <el-col :span="6"
              >处置班组：{{
                alldept
                  .filter(
                    (i) =>
                      (
                        JSON.parse(
                          detectioninfo.detectionLogs.filter(
                            (ii) => ii.detectionStatus === 2
                          )[0].logDes
                        ).fzbz ?? []
                      ).indexOf(i.deptId) != -1
                  )
                  .map((i) => i.deptName)
                  .join(",")
              }}</el-col
            >
            <el-col :span="6"
              >派发时间：{{
                detectioninfo.detectionLogs.filter(
                  (ii) => ii.detectionStatus === 2
                )[0].createTime
              }}</el-col
            >
          </el-row>
        </div>
      </div>

      <div class="card" v-if="detectioninfo.status > 2">
        <div class="title" style="position: relative">执行反馈</div>
        <div class="body">
          <div class="titleheader" :style="`${'margin-top:0px'}`">
            {{ "作业组" }}
          </div>
          <div>
            <el-row>
              <el-col :span="6">
                负责人：{{
                  JSON.parse(
                    detectioninfo.detectionLogs.filter(
                      (ii) => ii.detectionStatus === 3
                    )[0].logDes ?? "{}"
                  ).gzz.fzr
                }}
              </el-col>
              <el-col :span="6">
                组员：
                {{
                  allusers
                    .filter(
                      (i) =>
                        (
                          JSON.parse(
                            detectioninfo.detectionLogs.filter(
                              (ii) => ii.detectionStatus === 3
                            )[0].logDes
                          ).gzz.zy ?? []
                        ).indexOf(i.userId) != -1
                    )
                    .map((i) => i.nickName)
                    .join(",")
                }}
              </el-col>
              <el-col :span="6">
                人数：
                {{
                  JSON.parse(
                    detectioninfo.detectionLogs.filter(
                      (ii) => ii.detectionStatus === 3
                    )[0].logDes ?? "{}"
                  ).gzz.rs
                }}
              </el-col>
              <el-col :span="6">
                开始时间：{{
                  moment(JSON.parse(
                    detectioninfo.detectionLogs.filter(
                      (ii) => ii.detectionStatus === 3
                    )[0].logDes ?? "{}"
                  ).gzz.starttime).format("YYYY-MM-DD")}}

              </el-col>
              <el-col :span="6">
                管线起点：{{
                  JSON.parse(
                    detectioninfo.detectionLogs.filter(
                      (ii) => ii.detectionStatus === 3
                    )[0].logDes ?? "{}"
                  ).gzz.addrstart
                }}
              </el-col>
              <el-col :span="6">
                管线终点：{{
                  JSON.parse(
                    detectioninfo.detectionLogs.filter(
                      (ii) => ii.detectionStatus === 3
                    )[0].logDes ?? "{}"
                  ).gzz.addrend
                }}
              </el-col>
              <el-col :span="6">
                城区：
                {{
                  JSON.parse(
                    detectioninfo.detectionLogs.filter(
                      (ii) => ii.detectionStatus === 3
                    )[0].logDes ?? "{}"
                  ).gzz.cq
                }}
              </el-col>

              <el-col :span="6">
                结束时间：{{
                  moment(JSON.parse(
                    detectioninfo.detectionLogs.filter(
                      (ii) => ii.detectionStatus === 3
                    )[0].logDes ?? "{}"
                  ).gzz.endtime).format("YYYY-MM-DD")
                }}
              </el-col>
              <el-col :span="6">
                作业地址：
                {{
                  JSON.parse(
                    detectioninfo.detectionLogs.filter(
                      (ii) => ii.detectionStatus === 3
                    )[0].logDes ?? "{}"
                  ).gzz.addr
                }}
              </el-col>
              <el-col :span="6">
                检测设备：{{
                  JSON.parse(
                    detectioninfo.detectionLogs.filter(
                      (ii) => ii.detectionStatus === 3
                    )[0].logDes ?? "{}"
                  ).gzz.jcsb
                }}
              </el-col>
              <el-col :span="6">
                车辆：{{
                  JSON.parse(
                    detectioninfo.detectionLogs.filter(
                      (ii) => ii.detectionStatus === 3
                    )[0].logDes ?? "{}"
                  ).gzz.cars
                }}
              </el-col>
              <el-col :span="6">
                车牌：{{
                  JSON.parse(
                    detectioninfo.detectionLogs.filter(
                      (ii) => ii.detectionStatus === 3
                    )[0].logDes ?? "{}"
                  ).gzz.carnumber
                }}
              </el-col>
              <el-col :span="12"> 作业照片： </el-col>
              <el-col :span="12"> 工作照片： </el-col>
              <el-col :span="12">
                <ImagePreview
                  v-model:src="
                    JSON.parse(
                      detectioninfo.detectionLogs.filter(
                        (ii) => ii.detectionStatus === 3
                      )[0].logDes ?? '{}'
                    ).gzz.zyimages
                  "
                  :height="'120px'"
                  :width="'120px'"
                ></ImagePreview>
              </el-col>
              <el-col :span="12">
                <ImagePreview
                  v-model:src="
                    JSON.parse(
                      detectioninfo.detectionLogs.filter(
                        (ii) => ii.detectionStatus === 3
                      )[0].logDes ?? '{}'
                    ).gzz.gzimages
                  "
                  :height="'120px'"
                  :width="'120px'"
                ></ImagePreview>
              </el-col>
            </el-row>
          </div>
          <div class="titleheader" :style="`${'margin-top:0px'}`">
            {{ "工作量" }}
          </div>
          <div>
            <el-row>
              <el-col :span="6"
                >检查井(座)：{{
                  JSON.parse(
                    detectioninfo.detectionLogs.filter(
                      (ii) => ii.detectionStatus === 3
                    )[0].logDes ?? "{}"
                  ).gzl.jcj
                }}</el-col
              >
              <el-col :span="6"
                >雨水口(座)：{{
                  JSON.parse(
                    detectioninfo.detectionLogs.filter(
                      (ii) => ii.detectionStatus === 3
                    )[0].logDes ?? "{}"
                  ).gzl.ysk
                }}</el-col
              >
              <el-col :span="6"
                >箅子(个)：{{
                  JSON.parse(
                    detectioninfo.detectionLogs.filter(
                      (ii) => ii.detectionStatus === 3
                    )[0].logDes ?? "{}"
                  ).gzl.bz
                }}</el-col
              >
              <el-col :span="6"
                >主管(m)：{{
                  JSON.parse(
                    detectioninfo.detectionLogs.filter(
                      (ii) => ii.detectionStatus === 3
                    )[0].logDes ?? "{}"
                  ).gzl.zg
                }}</el-col
              >
              <el-col :span="6"
                >接户管(m)：{{
                  JSON.parse(
                    detectioninfo.detectionLogs.filter(
                      (ii) => ii.detectionStatus === 3
                    )[0].logDes ?? "{}"
                  ).gzl.jhg
                }}</el-col
              >
              <el-col :span="6"
                >雨水口支管(m)：{{
                  JSON.parse(
                    detectioninfo.detectionLogs.filter(
                      (ii) => ii.detectionStatus === 3
                    )[0].logDes ?? "{}"
                  ).gzl.yskzg
                }}</el-col
              >
              <el-col :span="6"
                >总设施长度(m)：{{
                  JSON.parse(
                    detectioninfo.detectionLogs.filter(
                      (ii) => ii.detectionStatus === 3
                    )[0].logDes ?? "{}"
                  ).gzl.zsscd
                }}</el-col
              >
              <el-col :span="6"
                >管径范围(mm)：{{
                  JSON.parse(
                    detectioninfo.detectionLogs.filter(
                      (ii) => ii.detectionStatus === 3
                    )[0].logDes ?? "{}"
                  ).gzl.gjfw
                }}</el-col
              >
              <el-col :span="6"
                >备注：{{
                  JSON.parse(
                    detectioninfo.detectionLogs.filter(
                      (ii) => ii.detectionStatus === 3
                    )[0].logDes ?? "{}"
                  ).gzl.remark
                }}</el-col
              >
              <el-col :span="12"
                >未能作业原因：{{
                  JSON.parse(
                    detectioninfo.detectionLogs.filter(
                      (ii) => ii.detectionStatus === 3
                    )[0].logDes ?? "{}"
                  ).gzl.wnzyyy
                }}</el-col
              >
              <el-col :span="12"
                >备注：{{
                  JSON.parse(
                    detectioninfo.detectionLogs.filter(
                      (ii) => ii.detectionStatus === 3
                    )[0].logDes ?? "{}"
                  ).gzl.remark1
                }}</el-col
              >
              <el-col :span="24">现场照片：</el-col>
              <el-col :span="24"
                ><ImagePreview
                  v-model:src="
                    JSON.parse(
                      detectioninfo.detectionLogs.filter(
                        (ii) => ii.detectionStatus === 3
                      )[0].logDes ?? '{}'
                    ).gzl.images
                  "
                  :height="'120px'"
                  :width="'120px'"
                ></ImagePreview
              ></el-col>
            </el-row>
          </div>
        </div>
      </div>

      <div class="card" v-if="detectioninfo.status > 3">
        <div class="title" style="position: relative">检测成果</div>
        <div class="body">
          <div class="titleheader" :style="`${'margin-top:0px'}`">
            {{ "报告信息" }}
          </div>
          <div>
            <el-row>
              <el-col :span="6">
                报告编号：{{
                  JSON.parse(
                    detectioninfo.detectionLogs.filter(
                      (ii) => ii.detectionStatus === 4
                    )[0].logDes ?? "{}"
                  ).bgxx.bgbh
                }}
              </el-col>
              <el-col :span="6">
                城区：{{
                  JSON.parse(
                    detectioninfo.detectionLogs.filter(
                      (ii) => ii.detectionStatus === 4
                    )[0].logDes ?? "{}"
                  ).bgxx.cq
                }}
              </el-col>
              <el-col :span="6">
                完成月份：
                {{
                  JSON.parse(
                    detectioninfo.detectionLogs.filter(
                      (ii) => ii.detectionStatus === 4
                    )[0].logDes ?? "{}"
                  ).bgxx.wcyf
                }}
              </el-col>
              <el-col :span="6">
                备注：{{
                  JSON.parse(
                    detectioninfo.detectionLogs.filter(
                      (ii) => ii.detectionStatus === 4
                    )[0].logDes ?? "{}"
                  ).bgxx.bz
                }}
              </el-col>

              <el-col :span="12"> 作业图纸： </el-col>
              <el-col :span="12"> 收单方： </el-col>
              <el-col :span="12">
                <div style="position: relative">
                  <div
                    style="position: absolute; top: 0; left: 60px; width: 100%"
                  >
                    <div
                      style="
                        margin-bottom: 10px;
                        color: #4f9eee;
                        display: inline-block;
                        margin-left: 10px;
                      "
                      v-for="i in JSON.parse(
                        detectioninfo.detectionLogs.filter(
                          (ii) => ii.detectionStatus === 4
                        )[0].logDes ?? '{}'
                      ).bgxx.tz?.split(',') ?? []"
                    >
                      <a target="_blank" :href="`${STATICURL + i}`">
                        {{ i.split("/")[i.split("/").length - 1] }}
                      </a>
                    </div>
                  </div>
                </div>
              </el-col>
              <el-col :span="12">
                <div style="position: relative">
                  <div
                    style="position: absolute; top: 0; left: 60px; width: 100%"
                  >
                    <div
                      style="
                        margin-bottom: 10px;
                        color: #4f9eee;
                        display: inline-block;
                        margin-left: 10px;
                      "
                      v-for="i in JSON.parse(
                        detectioninfo.detectionLogs.filter(
                          (ii) => ii.detectionStatus === 4
                        )[0].logDes ?? '{}'
                      ).bgxx.sfd?.split(',') ?? []"
                    >
                      <a target="_blank" :href="`${STATICURL + i}`">
                        {{ i.split("/")[i.split("/").length - 1] }}
                      </a>
                    </div>
                  </div>
                </div>
              </el-col>
              <el-col :span="12"> 作业照片： </el-col>
              <el-col :span="12"> 作业视频： </el-col>
              <el-col :span="12">
                <ImagePreview
                  v-model:src="
                    JSON.parse(
                      detectioninfo.detectionLogs.filter(
                        (ii) => ii.detectionStatus === 4
                      )[0].logDes ?? '{}'
                    ).bgxx.zyzp
                  "
                  :height="'120px'"
                  :width="'120px'"
                ></ImagePreview>
              </el-col>
              <el-col :span="12">
                <VideoPreview
                  v-model:src="
                    JSON.parse(
                      detectioninfo.detectionLogs.filter(
                        (ii) => ii.detectionStatus === 4
                      )[0].logDes ?? '{}'
                    ).bgxx.zysp
                  "
                  :height="'120px'"
                  :width="'120px'"
                ></VideoPreview>
              </el-col>
            </el-row>
          </div>
          <div class="titleheader" :style="`${'margin-top:0px'}`">
            {{ "养护信息" }}
          </div>
          <div>
            <el-row>
              <el-col :span="24"
                >主管建议养护：
                {{
                  JSON.parse(
                    detectioninfo.detectionLogs.filter(
                      (ii) => ii.detectionStatus === 4
                    )[0].logDes ?? "{}"
                  ).yhxx.zgjyyh
                }}
              </el-col>
              <el-col :span="6"
                >涉及检查井座：
                {{
                  JSON.parse(
                    detectioninfo.detectionLogs.filter(
                      (ii) => ii.detectionStatus === 4
                    )[0].logDes ?? "{}"
                  ).yhxx.sjjcjz
                }}
              </el-col>
              <el-col :span="6"
                >养护长度(m)：{{
                  JSON.parse(
                    detectioninfo.detectionLogs.filter(
                      (ii) => ii.detectionStatus === 4
                    )[0].logDes ?? "{}"
                  ).yhxx.yhcd
                }}</el-col
              >
              <el-col :span="6"
                >管径范围：{{
                  JSON.parse(
                    detectioninfo.detectionLogs.filter(
                      (ii) => ii.detectionStatus === 4
                    )[0].logDes ?? "{}"
                  ).yhxx.gjfw
                }}</el-col>
              <el-col :span="24">主管缺陷分布图：</el-col>
              <el-col :span="24">
                 <ImagePreview
                  v-model:src="
                  JSON.parse(
                      detectioninfo.detectionLogs.filter(
                        (ii) => ii.detectionStatus === 4
                      )[0].logDes ?? '{}'
                    ).yhxx.zgqxfbt
                  "
                  :height="'120px'"
                  :width="'120px'"
                ></ImagePreview>
              </el-col>

              <el-col :span="24"
                >支管建议养护：
                {{
                  JSON.parse(
                    detectioninfo.detectionLogs.filter(
                      (ii) => ii.detectionStatus === 4
                    )[0].logDes ?? "{}"
                  ).yhxx.zgjyyh1
                }}
              </el-col>
              <el-col :span="6"
                >支管三四级缺陷个数：
                {{
                  JSON.parse(
                    detectioninfo.detectionLogs.filter(
                      (ii) => ii.detectionStatus === 4
                    )[0].logDes ?? "{}"
                  ).yhxx.zgqxssjs
                }}
              </el-col>
              <el-col :span="12"
                >养护备注：{{
                  JSON.parse(
                    detectioninfo.detectionLogs.filter(
                      (ii) => ii.detectionStatus === 4
                    )[0].logDes ?? "{}"
                  ).yhxx.remark
                }}</el-col
              >

              <el-col :span="24">支管缺陷分布图：</el-col>
              <el-col :span="24">
                 <ImagePreview
                  v-model:src="
                  JSON.parse(
                      detectioninfo.detectionLogs.filter(
                        (ii) => ii.detectionStatus === 4
                      )[0].logDes ?? '{}'
                    ).yhxx.zgqxfbt1
                  "
                  :height="'120px'"
                  :width="'120px'"
                ></ImagePreview>
              </el-col>

            </el-row>
          </div>
        </div>
      </div>
    </div>

    <el-dialog v-model="showpf" title="计划派发" draggable>
      <div>
        <el-form :model="pdobj" label-width="120px">
          <el-form-item label="负责班组"
            ><el-tree-select
              style="width: 100%"
              v-model="pdobj.fzbz"
              multiple
              :data="treedept"
          /></el-form-item>
          <el-form-item label="负责人">
            <el-select
              v-model="pdobj.fzr"
              placeholder="请选择"
              style="width: 100%"
            >
              <el-option
                v-for="item in allusers.filter(
                  (i) => (pdobj.fzbz ?? []).indexOf(i.deptId) !== -1
                )"
                :label="item.nickName"
                :value="item.userId"
              />
            </el-select>
          </el-form-item>
        </el-form>
      </div>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="showpf = false">取消</el-button>
          <el-button type="primary" @click="detectiondistributed"
            >确定</el-button
          >
        </span>
      </template>
    </el-dialog>

    <el-dialog v-model="showzxfk" title="计划执行反馈" draggable>
      <div>
        <el-form :model="zxfkobj" label-width="10px">
          <el-form-item label="">
            <el-tabs v-model="currenttabname" class="demo-tabs">
              <el-tab-pane label="作业组" name="zyz">
                <el-row>
                  <el-col :span="6">
                    <el-form-item label="负责人" label-width="80px">
                      <el-input
                        v-model="zxfkobj.gzz.fzr"
                        placeholder="请输入负责人"
                      ></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="6">
                    <el-form-item label="组员" label-width="80px">
                      <el-select
                        v-model="zxfkobj.gzz.zy"
                        multiple
                        filterable
                        allow-create
                        default-first-option
                        :reserve-keyword="false"
                        placeholder="请输入组员"
                      >
                        <el-option
                          v-for="item in allusers"
                          :key="item.nickName"
                          :label="item.nickName"
                          :value="item.userId"
                        />
                      </el-select>
                    </el-form-item>
                  </el-col>
                  <el-col :span="6">
                    <el-form-item label="人数" label-width="80px">
                      <el-input
                        v-model="zxfkobj.gzz.rs"
                        type="number"
                        placeholder="请输入人数"
                      ></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="6">
                    <el-form-item label="城区" label-width="80px">
                      <el-select
                        v-model="zxfkobj.gzz.cq"
                        placeholder="请选择城区"
                      >
                        <el-option
                          v-for="item in sys_area"
                          :key="item.label"
                          :label="item.label"
                          :value="item.label"
                        />
                      </el-select>
                    </el-form-item>
                  </el-col>
                </el-row>

                <el-row>
                  <el-col :span="6">
                    <el-form-item label="管线起点" label-width="80px">
                      <el-input
                        v-model="zxfkobj.gzz.addrstart"
                        placeholder="请输入地址"
                      ></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="6">
                    <el-form-item label="管线终点" label-width="80px">
                      <el-input
                        v-model="zxfkobj.gzz.addrend"
                        placeholder="请输入地址"
                      ></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="6">
                    <el-form-item label="开始时间" label-width="80px">
                      <el-date-picker
                        v-model="zxfkobj.gzz.starttime"
                        type="date"
                        format="YYYY-MM-DD"
                        placeholder="请选择"
                      />
                    </el-form-item>
                  </el-col>
                  <el-col :span="6">
                    <el-form-item label="结束时间" label-width="80px">
                      <el-date-picker
                        v-model="zxfkobj.gzz.endtime"
                        type="date"
                        format="YYYY-MM-DD"
                        placeholder="请选择"
                      />
                    </el-form-item>
                  </el-col>
                </el-row>

                <el-row>
                  <el-col :span="6">
                    <el-form-item label="作业地址" label-width="80px">
                      <el-input
                        v-model="zxfkobj.gzz.addr"
                        placeholder="请输入地址"
                      ></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="6">
                    <el-form-item label="检测设备" label-width="80px">
                      <el-input
                        v-model="zxfkobj.gzz.jcsb"
                        placeholder="请输入"
                      ></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="6">
                    <el-form-item label="车辆" label-width="80px">
                      <el-input
                        v-model="zxfkobj.gzz.cars"
                        type="number"
                        placeholder="请输入车辆数"
                      ></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="6">
                    <el-form-item label="车牌号" label-width="80px">
                      <el-input
                        v-model="zxfkobj.gzz.carnumber"
                        placeholder="请输入车牌号"
                      ></el-input>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="12">
                    <el-form-item label="作业图片" label-width="80px">
                      <ImageUpload v-model="zxfkobj.gzz.zyimages"></ImageUpload>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="工作图片" label-width="80px">
                      <ImageUpload v-model="zxfkobj.gzz.gzimages"></ImageUpload>
                    </el-form-item>
                  </el-col>
                </el-row>
              </el-tab-pane>
              <el-tab-pane label="工作量" name="gzl">
                <el-row>
                  <el-col :span="6">
                    <el-form-item label="检查井(座)" label-width="80px">
                      <el-input
                        v-model="zxfkobj.gzl.jcj"
                        type="number"
                        placeholder="请输入数量"
                      ></el-input>
                    </el-form-item>
                  </el-col>

                  <el-col :span="6">
                    <el-form-item label="雨水口(座)" label-width="80px">
                      <el-input
                        v-model="zxfkobj.gzl.ysk"
                        type="number"
                        placeholder="请输入数量"
                      ></el-input>
                    </el-form-item>
                  </el-col>

                  <el-col :span="6">
                    <el-form-item label="箅子(个)" label-width="80px">
                      <el-input
                        v-model="zxfkobj.gzl.bz"
                        type="number"
                        placeholder="请输入数量"
                      ></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="6">
                    <el-form-item label="主管(m)" label-width="80px">
                      <el-input
                        v-model="zxfkobj.gzl.zg"
                        type="number"
                        placeholder="请输入数量"
                      ></el-input>
                    </el-form-item>
                  </el-col> </el-row
                ><el-row>
                  <el-col :span="6">
                    <el-form-item label="接户管(m)" label-width="80px">
                      <el-input
                        v-model="zxfkobj.gzl.jhg"
                        type="number"
                        placeholder="请输入数量"
                      ></el-input>
                    </el-form-item>
                  </el-col>

                  <el-col :span="6">
                    <el-form-item label="雨水口支管(m)" label-width="120px">
                      <el-input
                        v-model="zxfkobj.gzl.yskzg"
                        type="number"
                        placeholder="请输入数量"
                      ></el-input>
                    </el-form-item>
                  </el-col>

                  <el-col :span="6">
                    <el-form-item label="总设施长度(m)" label-width="120px">
                      <el-input
                        v-model="zxfkobj.gzl.zsscd"
                        type="number"
                        placeholder="请输入"
                      ></el-input>
                    </el-form-item>
                  </el-col>

                  <el-col :span="6">
                    <el-form-item label="管径范围(mm)" label-width="120px">
                      <el-input
                        v-model="zxfkobj.gzl.gjfw"
                        type="number"
                        placeholder="请输入"
                      ></el-input>
                    </el-form-item>
                  </el-col> </el-row
                ><el-row>
                  <el-col :span="6">
                    <el-form-item label="备注" label-width="80px">
                      <el-input
                        v-model="zxfkobj.gzl.remark"
                        placeholder="请输入备注"
                      ></el-input>
                    </el-form-item>
                  </el-col> </el-row
                ><el-row>
                  <el-col :span="12">
                    <el-form-item label="未能作业原因" label-width="100px">
                      <el-input
                        v-model="zxfkobj.gzl.wnzyyy"
                        placeholder="请输入备注"
                      ></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="备注" label-width="80px">
                      <el-input
                        v-model="zxfkobj.gzl.remark1"
                        placeholder="请输入备注"
                      ></el-input>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="24">
                    <el-form-item label="现场图片" label-width="80px">
                      <ImageUpload v-model="zxfkobj.gzl.images"></ImageUpload>
                    </el-form-item>
                  </el-col>
                </el-row>
              </el-tab-pane>
            </el-tabs>
          </el-form-item>
        </el-form>
      </div>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="showzxfk = false">取消</el-button>
          <el-button type="primary" @click="Feedbackdetection">确定</el-button>
        </span>
      </template>
    </el-dialog>

    <el-dialog v-model="showcgsc" width="80%" title="计划成果上传" draggable>
      <div>
        <el-form :model="cgscobj" label-width="10px">
          <el-form-item label="">
            <el-tabs v-model="currenttabname1" class="demo-tabs">
              <el-tab-pane label="报告信息" name="bgxx">
                <el-row>
                  <el-col :span="6">
                    <el-form-item label="报告编号" label-width="100px">
                      <el-input
                        v-model="cgscobj.bgxx.bgbh"
                        placeholder="请输入编号"
                      ></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="6">
                    <el-form-item label="城区" label-width="80px">
                      <el-select
                        v-model="cgscobj.bgxx.cq"
                        placeholder="请选择城区"
                      >
                        <el-option
                          v-for="item in sys_area"
                          :key="item.label"
                          :label="item.label"
                          :value="item.label"
                        />
                      </el-select>
                    </el-form-item>
                  </el-col>
                  <el-col :span="6">
                    <el-form-item label="完成月份" label-width="80px">
                      <el-select
                        v-model="cgscobj.bgxx.wcyf"
                        placeholder="请选择月份"
                      >
                        <el-option
                          v-for="item in getmonth()"
                          :key="item"
                          :label="item"
                          :value="item"
                        />
                      </el-select>
                    </el-form-item>
                  </el-col>
                  <el-col :span="6">
                    <el-form-item label="备注" label-width="80px">
                      <el-input
                        v-model="cgscobj.bgxx.bz"
                        type="number"
                        placeholder="请输入备注"
                      ></el-input>
                    </el-form-item>
                  </el-col>
                </el-row>

                <el-row>
                  <el-col :span="12">
                    <el-form-item label="作业图纸" label-width="80px">
                      <FileUpload
                        v-model="cgscobj.bgxx.tz"
                        :fileSize="100"
                      ></FileUpload>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="收单方" label-width="80px">
                      <FileUpload
                        v-model="cgscobj.bgxx.sfd"
                        :fileSize="100"
                      ></FileUpload>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="作业照片" label-width="80px">
                      <ImageUpload v-model="cgscobj.bgxx.zyzp"></ImageUpload>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="作业视频" label-width="80px">
                      <VideoUpload v-model="cgscobj.bgxx.zysp"></VideoUpload>
                    </el-form-item>
                  </el-col>
                </el-row>
              </el-tab-pane>
              <el-tab-pane label="养护信息" name="yhxx">
                <el-row>
                  <el-col :span="6">
                    <el-form-item label="主管建议养护" label-width="100px">
                      <el-input
                        v-model="cgscobj.yhxx.zgjyyh"
                        placeholder="请输入"
                      ></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="6">
                    <el-form-item label="涉及检查井座" label-width="100px">
                      <el-input
                        v-model="cgscobj.yhxx.sjjcjz"
                        placeholder="请输入"
                      ></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="6">
                    <el-form-item label="养护长度(m)" label-width="100px">
                      <el-input
                        v-model="cgscobj.yhxx.yhcd"
                        type="number"
                        placeholder="请输入"
                      ></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="6">
                    <el-form-item label="管径范围" label-width="80px">
                      <el-input
                        v-model="cgscobj.yhxx.gjfw"
                        placeholder="请输入"
                      ></el-input>
                    </el-form-item>
                  </el-col>
                  </el-row>
                <el-row>
                  <el-col :span="24">
                    <el-form-item label="主管缺陷分布图" label-width="130px">
                      <ImageUpload v-model="cgscobj.yhxx.zgqxfbt"></ImageUpload>
                    </el-form-item>
                  </el-col>
                </el-row>

                <el-row>
                  <el-col :span="6">
                    <el-form-item label="支管建议养护" label-width="100px">
                      <el-input
                        v-model="cgscobj.yhxx.zgjyyh1"
                        placeholder="请输入"
                      ></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="6">
                    <el-form-item label="支管三四级缺陷个数" label-width="140px">
                      <el-input
                        v-model="cgscobj.yhxx.zgqxssjs"
                        placeholder="请输入"
                      ></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="养护备注" label-width="100px">
                      <el-input
                        v-model="cgscobj.yhxx.remark"
                        placeholder="请输入"
                      ></el-input>
                    </el-form-item>
                  </el-col>

                  </el-row>
                  <el-row>
                  <el-col :span="24">
                    <el-form-item label="支管缺陷分布图" label-width="130px">
                      <ImageUpload v-model="cgscobj.yhxx.zgqxfbt1"></ImageUpload>
                    </el-form-item>
                  </el-col>
                </el-row>

              </el-tab-pane>
              <el-tab-pane label="维修信息" name="wxxx">
                <el-row>
                  <el-col :span="6">
                    <el-form-item label="主管建议维修" label-width="120px">
                      <el-input
                        v-model="cgscobj.wxxx.zgjywx"
                        type="number"
                        placeholder="请输入"
                      ></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="6">
                    <el-form-item label="主管三四级缺陷个数" label-width="140px">
                      <el-input
                        v-model="cgscobj.wxxx.zgqxssjs"
                        type="number"
                        placeholder="请输入数量"
                      ></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="6">
                    <el-form-item label="管径范围" label-width="80px">
                      <el-input
                        v-model="cgscobj.wxxx.gjfw"
                        type="number"
                        placeholder="请输入"
                      ></el-input>
                    </el-form-item>
                  </el-col>

                  </el-row><el-row>
                    <el-col :span="24">
                    <el-form-item label="主管结构类缺陷分布图" label-width="160px">
                      <ImageUpload v-model="cgscobj.wxxx.zgjglqxfbt"></ImageUpload>
                    </el-form-item>
                  </el-col>
                  </el-row><el-row>
                    <el-col :span="6">
                    <el-form-item label="支管建议维修" label-width="120px">
                      <el-input
                        v-model="cgscobj.wxxx.zgjywx1"
                        type="number"
                        placeholder="请输入"
                      ></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="6">
                    <el-form-item label="支管三四级缺陷个数" label-width="140px">
                      <el-input
                        v-model="cgscobj.wxxx.zgqxssjs1"
                        type="number"
                        placeholder="请输入数量"
                      ></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="6">
                    <el-form-item label="维修备注" label-width="80px">
                      <el-input
                        v-model="cgscobj.wxxx.wxbz"
                        type="number"
                        placeholder="请输入"
                      ></el-input>
                    </el-form-item>
                  </el-col>
                   </el-row><el-row>
                    <el-col :span="24">
                    <el-form-item label="支管结构类缺陷分布图" label-width="160px">
                      <ImageUpload v-model="cgscobj.wxxx.zgjglqxfbt1"></ImageUpload>
                    </el-form-item>
                  </el-col>

                </el-row>
              </el-tab-pane>
            </el-tabs>
          </el-form-item>
        </el-form>
      </div>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="showcgsc = false">取消</el-button>
          <el-button type="primary" @click="detectionComplete">确定</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>
<script lang="ts" setup>
import { defineComponent, ref, onMounted, watch } from "vue";
import { useDict } from "@/utils/dict";
// 图片预览组件
import ImagePreview from "@/components/ImagePreview";
import ImageUpload from "@/components/ImageUpload";
import FileUpload from "@/components/FileUpload";
import VideoUpload from "@/components/VideoUpload";
import VideoPreview from "@/components/VideoPreview";
import { cloneDeep } from "lodash";
import { listDept, getDept } from "@/api/system/dept";
import { ElMessage } from "element-plus";
import router from "../../../router";
import { useRoute } from "vue-router";
import { listFacilities, getFacilities } from "@/api/system/facilities";
import {
  listDetection,
  addDetection,
  getDetection,
  distributedDetection,
  feedbackDetection,
  completeDetection,
} from "@/api/system/detection";
import {
  changeUserStatus,
  listUser,
  resetUserPwd,
  delUser,
  getUser,
  updateUser,
  addUser,
} from "@/api/system/user";
import { treeselect as deptTreeselect } from "@/api/system/dept";
import moment from "moment";

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

const STATICURL = import.meta.env.VITE_APP_BASE_API;
const route = useRoute();
if (!route.params.id || route.params.id == "undefined") {
  router.back();
}

const currenttabname = ref("zyz");
const currenttabname1 = ref("bgxx");
const showzxfk = ref(false);
const zxfkobj = ref({
  gzz: {
    fzr: "",
    zy: "",
    rs: 1,
    starttime: "",
    endtime: "",
    addrstart: "",
    addrend: "",
    cq: "",
    addr: "",
    jcsb: "",
    cars: "",
    carnumber: "",
    zyimages: [],
    gzimages: [],
  },
  gzl: {
    jcj: "",
    ysk: "",
    bz: "",
    zg: "",
    jhg: "",
    yskzg: "",
    zsscd: "",
    gjfw: "",
    remark: "",
    wnzyyy: "",
    remark1: "",
    images: [],
  },
});
const Feedbackdetection = () => {
  feedbackDetection({
    detectionId: route.params.id,
    logDes: JSON.stringify(zxfkobj.value),
  }).then((res) => {
    showzxfk.value = false;
    ElMessage.success("反馈成功！");
    getDetection(Number(route.params.id)).then((res) => {
      detectioninfo.value = res.data;
    });
  });
};

const showcgsc = ref(false);
const cgscobj = ref({
  bgxx: {
    bgbh: "",
    cq: "",
    rs: 1,
    wcyf: "",
    bz: "",
    tz: [],
    sfd: [],
    zyzp: [],
    zysp: [],
  },
  yhxx: {
    zgjyyh: "",
    sjjcjz: "",
    yhcd: "",
    gjfw: "",
    whldfw: "",
    zgqxfbt: [],
    zgjyyh1: "",
    zgqxssjs: "",
    remark: "",
    zgqxfbt1: [],
  },
  wxxx: {
    zgjglqxfbt: [],
    zgjywx: "",
    zgqxssjs: "",
    gjfw: "",
    zgjywx1: "",
    zgqxssjs1:"",
    wxbz: '',
    zgjglqxfbt1:[],
  }
});
const detectionComplete = () => {
  completeDetection({
    detectionId: route.params.id,
    logDes: JSON.stringify(cgscobj.value),
  }).then((res) => {
    showcgsc.value = false;
    ElMessage.success("上传成功！");
    getDetection(Number(route.params.id)).then((res) => {
      detectioninfo.value = res.data;
    });
  });
};

const showpf = ref(false);
const pdobj = ref({ fzbz: [], fzr: "" });
const detectiondistributed = () => {
  distributedDetection({
    detectionId: route.params.id,
    logDes: JSON.stringify(pdobj.value),
  }).then((res) => {
    showpf.value = false;
    ElMessage.success("派发成功！");
    getDetection(Number(route.params.id)).then((res) => {
      detectioninfo.value = res.data;
    });
  });
};

const alldept = ref([]);
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;
}

const treedept = ref([]);
const allusers = ref([]);

deptTreeselect().then((res) => {
  treedept.value = [setdatakey(res.data[0])];
});
const facilitieinfo = ref({
  addrEnd: "",
  addrFrom: "",
  areaAdDes: "",
  areaDes: "",
  createBy: null,
  createTime: null,
  exId: 1,
  exId1: "",
  ext1: null,
  fLength: "0",
  id: null,
  name: "",
  nature: "",
  params: {},
  remark: null,
  roadName: "",
  searchValue: null,
  updateBy: null,
  updateTime: null,
});
const detectioninfo = ref({
  createBy: "",
  createTime: null,
  detectionDept: "204,205",
  detectionDes: "sdfsd",
  detectionLogs: [],
  detectionMonth: "03",
  detectionRemark: "sdfsd",
  detectionType: 1,
  detectionWeek: "11",
  detectionYear: "2020",
  ext1: "",
  ext2: "",
  facilitiesId: 1,
  id: 3,
  params: {},
  remark: null,
  searchValue: null,
  status: 1,
  updateBy: "",
  updateTime: null,
});

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;
};
onMounted(async () => {
  await listUser({ pageSize: 1000 }).then((res) => {
    allusers.value = res.rows;
  });
  getDetection(Number(route.params.id)).then((res) => {
    detectioninfo.value = res.data;
    if (Number(detectioninfo.value.status) > 1) {
      try {
        zxfkobj.value.gzz.fzr =
          allusers.value.filter(
            (i) =>
              i.userId.toString() ===
              JSON.parse(
                detectioninfo.value.detectionLogs.filter(
                  (ii) => ii.detectionStatus === 2
                )[0].logDes
              ).fzr.toString()
          )[0]?.nickName ?? "-";
      } catch (e) {}
    }
    getFacilities(detectioninfo.value.facilitiesId).then((rep) => {
      facilitieinfo.value = rep.data;
    });
  });
});
</script>

<style lang="scss">
.demo-tabs {
  width: 100%;
}
.el-row {
  margin-bottom: 20px;
}
.maintindetail {
  background: #fff;
  padding: 30px 22px;
  border-radius: 8px;
  overflow-y: auto;
  padding-top: 20px;
  position: relative;

  .el-select {
    width: 100%;
  }

  .title {
    color: #2b3551;
    font-size: 16px;
    font-weight: 400;
    .btngroup {
      position: absolute;
      top: 13px;
      right: 20px;
      .el-button {
        margin-left: 25px;
      }
    }
  }
  .card {
    border: 1px solid #e5e9f2;
    border-radius: 8px;
    margin-top: 16px;
    overflow: hidden;
    .title {
      background: rgba(192, 204, 218, 0.2);
      height: 54px;
      line-height: 54px;
      color: #324057;
      font-size: 14px;
      font-weight: Bold;
      padding-left: 22px;
    }
    .body {
      padding: 20px;
      color: #475669;
      font-size: 14px;
      // padding-top: 10px;
      .el-col {
        margin-bottom: 20px;
      }
      .titleheader {
        color: #2c7de3;
        font-weight: Bold;
        margin-bottom: 24px;
        margin-top: 20px;
      }
    }
  }
}
</style>