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

<template>
  <div style="padding: 10px 15px">
    <div class="taskdetail">
      <div class="title">
        {{ taskinfo.taskCode }} 工单
        <div class="btngroup">
          <el-button
            type="primary"
            v-if="taskinfo.status == 1"
            @click="showpf = true"
            >派 发</el-button
          >
          <el-button
            type="primary"
            v-if="taskinfo.status == 4"
            @click="showpf = true"
            >转 派</el-button
          >
          <el-button
            type="primary"
            v-if="taskinfo.status == 2"
            @click="showbh = true"
            >驳 回</el-button
          >

          <el-button
            type="primary"
            v-if="taskinfo.status == 2"
            @click="showxy = true"
            >响 应</el-button
          >
          <el-button
            type="primary"
            v-if="taskinfo.status == 2"
            @click="showcz = true"
            >处 置</el-button
          >
          <el-button
            type="primary"
            v-if="taskinfo.status == 3 || taskinfo.status == 5"
            @click="showsh = true"
            >审 核</el-button
          >
          <el-button
            type="primary"
            v-if="taskinfo.status == 3"
            @click="showgz = true"
            >跟 踪</el-button
          >
          <el-button
            type="danger"
            @click="
              () => {
                router.back();
              }
            "
            >返回</el-button
          >
        </div>
      </div>
      <div class="card">
        <div class="title" style="position: relative">
          工单信息
          <div
            style="
              position: absolute;
              right: 10px;
              top: 0;
              color: #333;
              font-size: 20px;
            "
          >
            {{
              task_status.filter(
                (i) => i.value.toString() === taskinfo.status.toString()
              )[0]?.label ?? "-"
            }}
          </div>
        </div>
        <div class="body">
          <el-row>
            <el-col :span="6"
              >事件来源：{{
                task_type.filter(
                  (i) => i.value.toString() === taskinfo.taskType.toString()
                )[0]?.label ?? "-"
              }}</el-col
            >
            <el-col :span="6"
              >班组区域：{{
                (taskinfo.taskDeptRange ?? "")
                  .split(",")
                  .map((i) => {
                    return (
                      alldept.find((p) => {
                        return p.deptId + "" === i + "";
                      })?.deptName ?? "-"
                    );
                  })
                  .join(",")
              }}</el-col
            >
            <el-col :span="6">来件时间：{{ taskinfo.taskTime }}</el-col>
            <!-- <el-col :span="6"
              >设施编号：{{ taskinfo.taskFacilitieCode }}</el-col
            > -->
            <el-col :span="6"
              >接单人：{{
                allusers
                  .filter(
                    (i) =>
                      [taskinfo.taskReporter + ""].indexOf(i.userId + "") != -1
                  )
                  .map((i) => i.nickName)
                  .join(",")
              }}</el-col
            >
          </el-row>
          <el-row>
            <el-col :span="6"
              >事件分类：{{
                task_event_type.filter(
                  (i) =>
                    i.value.toString() === taskinfo.taskEventType.toString()
                )[0]?.label ?? "-"
              }}</el-col
            >
            <el-col :span="6">其他工单号：{{ taskinfo.taskOtherId }}</el-col>
            <el-col :span="6"
              >要求完成时间：{{ taskinfo.taskReqCompleteTime }}</el-col
            >
            <el-col :span="6"
              >事件类型：{{
                task_event_category.filter(
                  (i) =>
                    i.value.toString() === taskinfo.taskEventCategory.toString()
                )[0]?.label ?? "-"
              }}</el-col
            >
          </el-row>
          <el-row>
            <el-col :span="6"
              >是否需要确认：{{ taskinfo.remark === "1" ? "是" : "否" }}</el-col
            >
            <el-col :span="6">来件备注：{{ taskinfo.taskFromRemark }}</el-col>
            <el-col :span="6"
              >投诉人电话：{{ taskinfo.taskComplainConnect }}</el-col
            >
          </el-row>
          <el-row>
            <el-col :span="24">详细地址：{{ taskinfo.taskAddr }}</el-col>
            <!-- <el-col :span="12">备注信息：{{ taskinfo.remark }}</el-col> -->
          </el-row>
          <el-row>
            <el-col :span="12">现场照片：</el-col>
            <el-col :span="12">任务内容：{{ taskinfo.taskContent }}</el-col>
          </el-row>

          <el-row>
            <el-col :span="24">
              <ImagePreview
                v-model:src="taskinfo.taskPics"
                :height="'120px'"
                :width="'120px'"
              ></ImagePreview>
            </el-col>

          </el-row>
          <el-row>
            <el-col :span="24">派单照片：</el-col>
          </el-row>

            <el-row>
            <el-col :span="24">
              <ImagePreview
                v-model:src="taskinfo.taskVideos"
                :height="'120px'"
                :width="'120px'"
              ></ImagePreview>
            </el-col>

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

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

      <div
        class="card"
        v-if="
          (taskinfo.tblTaskLogList.filter((ii) => ii.taskStatus === -1) ?? [])
            .length > 0
        "
      >
        <div class="title">响应信息</div>
        <div class="body">
          <el-row>
            <el-col :span="6"
              >班组响应时间：{{
                JSON.parse(
                  taskinfo.tblTaskLogList.filter(
                    (ii) => ii.taskStatus === -1
                  )[0].logDes
                ).bzxytime
              }}</el-col
            >
            <el-col :span="6"
              >到达现场时间：{{
                JSON.parse(
                  taskinfo.tblTaskLogList.filter(
                    (ii) => ii.taskStatus === -1
                  )[0].logDes
                ).ddxctime
              }}</el-col
            >
            <el-col :span="6"
              >处置完成时间：{{
                JSON.parse(
                  taskinfo.tblTaskLogList.filter(
                    (ii) => ii.taskStatus === -1
                  )[0].logDes
                ).czwctime
              }}</el-col
            >
            <el-col :span="6"
              >作业时长（小时）：{{
                JSON.parse(
                  taskinfo.tblTaskLogList.filter(
                    (ii) => ii.taskStatus === -1
                  )[0].logDes
                ).zysc
              }}</el-col
            >
            <el-col :span="6"
              >处理时长（小时）：{{
                JSON.parse(
                  taskinfo.tblTaskLogList.filter(
                    (ii) => ii.taskStatus === -1
                  )[0].logDes
                ).clsc
              }}</el-col
            >
            <el-col :span="6"
              >作业负责人：{{
                allusers
                  .filter(
                    (i) =>
                      i.userId + "" ===
                      JSON.parse(
                        taskinfo.tblTaskLogList.filter(
                          (ii) => ii.taskStatus === -1
                        )[0].logDes
                      ).zyfzr +
                        ""
                  )
                  .map((i) => i.nickName)
                  .join(",")
              }}
            </el-col>
            <el-col :span="6"
              >联系方式：{{
                allusers
                  .filter(
                    (i) =>
                      i.userId + "" ===
                      JSON.parse(
                        taskinfo.tblTaskLogList.filter(
                          (ii) => ii.taskStatus === -1
                        )[0].logDes
                      ).zyfzr +
                        ""
                  )
                  .map((i) => i.phonenumber)
                  .join(",")
              }}</el-col
            >

            <el-col :span="6"
              >作业人数：{{
                JSON.parse(
                  taskinfo.tblTaskLogList.filter(
                    (ii) => ii.taskStatus === -1
                  )[0].logDes
                ).zyrs
              }}</el-col
            >

            <el-col :span="6"
              >车辆型号：{{
                JSON.parse(
                  taskinfo.tblTaskLogList.filter(
                    (ii) => ii.taskStatus === -1
                  )[0].logDes
                ).carxh
              }}</el-col
            >
            <el-col :span="6"
              >车牌号码：{{
                JSON.parse(
                  taskinfo.tblTaskLogList.filter(
                    (ii) => ii.taskStatus === -1
                  )[0].logDes
                ).carnumber
              }}</el-col
            >
            <el-col :span="6"
              >公里数：{{
                JSON.parse(
                  taskinfo.tblTaskLogList.filter(
                    (ii) => ii.taskStatus === -1
                  )[0].logDes
                ).gls
              }}</el-col
            >
          </el-row>
        </div>
      </div>

      <div class="card" v-if="taskinfo.status == 4">
        <div class="title">现场驳回</div>
        <div class="body">
          <el-row>
            <el-col :span="12"
              >原因备注：{{
                JSON.parse(
                  taskinfo.tblTaskLogList.filter((ii) => ii.taskStatus === 4)[0]
                    .logDes ?? "{}"
                ).resonRemark
              }}</el-col
            >

            <el-col :span="12"
              >驳回时间：{{
                taskinfo.tblTaskLogList.filter((ii) => ii.taskStatus === 4)[0]
                  .createTime
              }}</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(
                      taskinfo.tblTaskLogList.filter(
                        (ii) => ii.taskStatus === 4
                      )[0].logDes ?? '{}'
                    ).files?.split(',') ?? []"
                  >
                    <a target="_blank" :href="`${STATICURL + i}`">
                      {{ i.split("/")[i.split("/").length - 1] }}
                    </a>
                  </div>
                </div>
              </div>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <ImagePreview
                v-model:src="
                  JSON.parse(
                    taskinfo.tblTaskLogList.filter(
                      (ii) => ii.taskStatus === 4
                    )[0].logDes ?? '{}'
                  ).images
                "
                :height="'120px'"
                :width="'120px'"
              ></ImagePreview>
            </el-col>
          </el-row>
        </div>
      </div>

      <div class="card" v-if="taskinfo.status >= 5">
        <div class="title">跟踪信息</div>
        <div class="body">
          <el-row>
            <el-col :span="6"
              >是否及时完成：{{
                JSON.parse(
                  taskinfo.tblTaskLogList.filter((ii) => ii.taskStatus === 5)[0]
                    .logDes ?? "{}"
                ).isfinsh
              }}</el-col
            >
            <el-col :span="6"
              >回访情况：{{
                JSON.parse(
                  taskinfo.tblTaskLogList.filter((ii) => ii.taskStatus === 5)[0]
                    .logDes ?? "{}"
                ).hfdes
              }}</el-col
            >
            <el-col :span="6"
              >处置完成日期：{{
                JSON.parse(
                  taskinfo.tblTaskLogList.filter((ii) => ii.taskStatus === 5)[0]
                    .logDes ?? "{}"
                ).czcompletetime
              }}</el-col
            >
            <el-col :span="6"
              >记录人：{{
                JSON.parse(
                  taskinfo.tblTaskLogList.filter((ii) => ii.taskStatus === 5)[0]
                    .logDes ?? "{}"
                ).jlr
              }}</el-col
            >
          </el-row>
        </div>
      </div>

      <div class="card" v-if="taskinfo.status > 2 && taskinfo.status != 4">
        <div class="title">处置信息</div>
        <div class="body">
          <!-- <div v-for="(item, index1) in processdata">
            <div
              class="titleheader"
              :style="`${index1 == 0 ? 'margin-top:0px' : ''}`"
            >
              {{ item.title }}
            </div>
            <div>
              <el-row>
                <el-col :span="6" v-for="p in item.content">{{ p }}</el-col>
              </el-row>
            </div>
          </div> -->
          <div class="titleheader" :style="`${'margin-top:0px'}`">
            {{ "权属确认" }}
          </div>
          <div>
            <el-row>
              <el-col :span="6"
                >{{
                  "现场勘查" +
                  ":" +
                  JSON.parse(
                    taskinfo.tblTaskLogList.filter(
                      (ii) => ii.taskStatus === 3
                    )[0].logDes ?? "{}"
                  ).qsdes
                }}
              </el-col>
            </el-row>
          </div>

          <div class="titleheader">
            {{ "工作量" }}
          </div>
          <div>
            <el-row>
              <el-col
                :span="6"
                v-for="(item, index1) in JSON.parse(
                  taskinfo.tblTaskLogList.filter((ii) => ii.taskStatus === 3)[0]
                    .logDes ?? '{}'
                ).gzldata" :style="item['value1'] !==''?'':'display:none' "
                >{{ item.name + ":" + item.value1 +" "+item.unit1 +(item.hasOwnProperty('value2')?(`${item.value2+" "+item.unit2}`):'') }}
              </el-col>
            </el-row>
          </div>

          <div class="titleheader" :style="`${'margin-top:0px'}`">
            {{ "车辆设备" }}
          </div>
          <div>
            <el-row>
              <el-col
                :span="6"
                v-for="(item, index1) in JSON.parse(
                  taskinfo.tblTaskLogList.filter((ii) => ii.taskStatus === 3)[0]
                    .logDes ?? '{}'
                ).clsbdata" :style="item['value1'] !==''?'':'display:none' "
                >{{ item.name + ":" + item.value1 +" "+item.unit1 +(item.hasOwnProperty('value2')?(`${item.value2+" "+item.unit2}`):'') }}
              </el-col>
            </el-row>
          </div>

          <div class="titleheader" :style="`${'margin-top:0px'}`">
            {{ "耗材" }}
          </div>
          <div>
            <el-row>
              <el-col
                :span="6"
                v-for="(item, index1) in JSON.parse(
                  taskinfo.tblTaskLogList.filter((ii) => ii.taskStatus === 3)[0]
                    .logDes ?? '{}'
                ).hcdata" :style="item['value1'] !==''?'':'display:none' "
                >{{ item.name + ":" + item.value1 +" "+item.unit1 +(item.hasOwnProperty('value2')?(`${item.value2+" "+item.unit2}`):'') }}
              </el-col>
            </el-row>
          </div>

          <div>
            <div class="titleheader">现场图片</div>
            <el-row>
              <el-col :span="24">
                <ImagePreview
                  v-model:src="
                    JSON.parse(
                      taskinfo.tblTaskLogList.filter(
                        (ii) => ii.taskStatus === 3
                      )[0].logDes ?? '{}'
                    ).images
                  "
                  :height="'120px'"
                  :width="'120px'"
                ></ImagePreview>
              </el-col>
            </el-row>
          </div>
        </div>
      </div>

      <div class="card" v-if="taskinfo.status > 5">
        <div class="title">核查信息</div>
        <div class="body">
          <el-row>
            <el-col :span="12"
              >核查人员：{{
                JSON.parse(
                  taskinfo.tblTaskLogList.filter((ii) => ii.taskStatus === 6)[0]
                    .logDes ?? "{}"
                ).hcry
              }}</el-col
            >

            <el-col :span="12"
              >核查时间：{{
                JSON.parse(
                  taskinfo.tblTaskLogList.filter((ii) => ii.taskStatus === 6)[0]
                    .logDes ?? "{}"
                ).hctime
              }}</el-col
            >
            <el-col :span="24"
              >核查备注：{{
                JSON.parse(
                  taskinfo.tblTaskLogList.filter((ii) => ii.taskStatus === 6)[0]
                    .logDes ?? "{}"
                ).hcdes
              }}</el-col
            >
          </el-row>
        </div>
      </div>
    </div>

    <el-dialog v-model="showpf" title="任务派发" draggable>
      <div>
        <el-form :model="pdobj" label-width="120px">
          <el-form-item label="负责班组">
            <el-select v-model="pdobj.fzbz" multiple placeholder="">
              <el-option
                v-for="dept in ywdept"
                :label="dept.deptName"
                :value="dept.deptId"
              ></el-option>
            </el-select>

            <!-- <el-tree-select
              style="width: 100%"
              v-model="pdobj.fzbz"
              multiple
              :data="ywdept"
          /> -->
          </el-form-item>
          <el-form-item label="负责人">
            <el-select
              v-model="pdobj.fzr"
              placeholder="请选择"
              style="width: 100%"
              multiple
            >
              <el-option
                v-for="item in fzrusers"
                :key="item.userId"
                :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="Taskdistributed">确定</el-button>
        </span>
      </template>
    </el-dialog>

    <el-dialog v-model="showbh" title="任务驳回" draggable>
      <div>
        <el-form :model="bhobj" label-width="120px">
          <el-form-item label="驳回原因"
            ><el-input
              v-model="bhobj.resonRemark"
              :rows="2"
              type="textarea"
              placeholder="请输入驳回原因"
          /></el-form-item>
          <el-form-item label="现场照片">
            <ImageUpload v-model="bhobj.images"></ImageUpload>
          </el-form-item>

          <el-form-item label="说明报告">
            <FileUpload v-model="bhobj.files" :fileSize="100"></FileUpload>
          </el-form-item>
        </el-form>
      </div>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="showbh = false">取消</el-button>
          <el-button type="primary" @click="TaskClose">确定</el-button>
        </span>
      </template>
    </el-dialog>

    <el-dialog v-model="showgz" title="任务跟踪" draggable>
      <div>
        <el-form :model="gzobj" label-width="120px">
          <el-form-item label="是否及时完成">
            <el-select v-model="gzobj.isfinsh" placeholder="请选择">
              <el-option label="是" value="是"></el-option>
              <el-option label="否" value="否"></el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="回访情况"
            ><el-input
              v-model="gzobj.hfdes"
              :rows="2"
              type="textarea"
              placeholder="请输入回访情况"
          /></el-form-item>

          <el-form-item label="处置完成日期">
            <el-date-picker
              v-model="gzobj.czcompletetime"
              type="date"
              placeholder="请选择"
            />
          </el-form-item>

          <el-form-item label="记录人">
            <el-input v-model="gzobj.jlr" placeholder="请输入记录人"></el-input>
          </el-form-item>
        </el-form>
      </div>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="showgz = false">取消</el-button>
          <el-button type="primary" @click="TaskGZ">确定</el-button>
        </span>
      </template>
    </el-dialog>

    <el-dialog v-model="showsh" title="任务审核" draggable>
      <div>
        <el-form :model="shobj" label-width="120px">
          <el-form-item label="审核人员">
            <el-select
              v-model="shobj.hcry"
              placeholder="请选择核查人员"
              style="width: 100%"
              filterable
              allow-create
            >
              <el-option
                v-for="item in allusers"
                :label="item.nickName"
                :value="item.nickName"
              />
            </el-select>
          </el-form-item>

          <el-form-item label="核查备注"
            ><el-input
              v-model="shobj.hcdes"
              :rows="2"
              type="textarea"
              placeholder="请输入核查备注"
          /></el-form-item>

          <el-form-item label="核查时间">
            <el-date-picker
              v-model="shobj.hctime"
              type="datetime"
              placeholder="请选择"
            />
          </el-form-item>
        </el-form>
      </div>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="showsh = false">取消</el-button>
          <el-button type="primary" @click="TaskSH">确定</el-button>
        </span>
      </template>
    </el-dialog>

    <el-dialog v-model="showxy" title="任务响应" draggable>
      <div>
        <el-form :model="xyobj" label-width="120px">
          <el-form-item label="班组响应时间"
            ><el-date-picker
              v-model="xyobj.bzxytime"
              type="datetime"
              placeholder="请选择"
          /></el-form-item>
          <el-form-item label="到达现场时间"
            ><el-date-picker
              v-model="xyobj.ddxctime"
              type="datetime"
              placeholder="请选择"
          /></el-form-item>
          <el-form-item label="处理完成时间"
            ><el-date-picker
              v-model="xyobj.czwctime"
              type="datetime"
              placeholder="请选择"
          /></el-form-item>
          <el-form-item label="作业时长(小时)">
            <el-input v-model="xyobj.zysc" type="text" placeholder="请输入"
          /></el-form-item>
          <el-form-item label="处理时长(小时)"
            ><el-input v-model="xyobj.clsc" type="text" placeholder="请输入"
          /></el-form-item>

          <el-form-item label="作业负责人">
            <el-select
              v-model="xyobj.zyfzr"
              placeholder="请选择人员"
              style="width: 100%"
              filterable
              allow-create
            >
              <el-option
                v-for="item in allusers"
                :label="item.nickName"
                :value="item.userId"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="作业人数"
            ><el-input v-model="xyobj.zyrs" type="text" placeholder="请输入"
          /></el-form-item>
          <el-form-item label="车辆型号"
            ><el-input v-model="xyobj.carxh" type="text" placeholder="请输入"
          /></el-form-item>
          <el-form-item label="车牌号"
            ><el-input
              v-model="xyobj.carnumber"
              type="text"
              placeholder="请输入"
          /></el-form-item>

          <el-form-item label="公里数"
            ><el-input v-model="xyobj.gls" type="number" placeholder="请输入"
          /></el-form-item>
        </el-form>
      </div>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="showxy = false">取消</el-button>
          <el-button type="primary" @click="TaskXY">确定</el-button>
        </span>
      </template>
    </el-dialog>

    <el-dialog v-model="showcz" title="任务处置" draggable width="80vw">
      <div>
        <el-form :model="czobj" label-width="150px">
          <el-form-item label="权属确认(现场勘查)">
            <el-input
              v-model="czobj.qsdes"
              type="text"
              placeholder="请输入勘查信息"
            />
          </el-form-item>

          <el-form-item label="">
            <el-tabs v-model="cztblaname" class="demo-tabs">
              <el-tab-pane label="工作量" name="gzl">
                <el-row>
                  <el-col :span="12" v-for="item in czobj.gzldata" >
                    <div style="margin-bottom:10px">
                       <el-row>
                      <el-col :span="8"><div style="text-align: right;padding-right:6px">{{ item.name }}:</div></el-col>
                      <el-col :span="item.hasOwnProperty('value2') ? 8 : 16">
                        <el-input
                          v-model="item.value1"
                          placeholder="请输入"
                        >
                          <template #append v-if="item.unit1!==''">{{
                            item.unit1
                          }}</template></el-input
                        >
                      </el-col>
                      <el-col :span="8" v-if="item.hasOwnProperty('value2')">
                        <div style="padding-left:5px">
                           <el-input
                          v-if="item.hasOwnProperty('value2')"
                          v-model="item.value2"
                          placeholder="请输入"
                        >
                          <template #append v-if="item.unit2!==''">{{
                            item.unit2
                          }}</template></el-input
                        >

                        </div>

                      </el-col>
                    </el-row>

                    </div>

                  </el-col>
                </el-row>
              </el-tab-pane>
              <el-tab-pane label="车辆设备" name="clsb">
                <el-row>
                  <el-col :span="12" v-for="item in czobj.clsbdata" >
                    <div style="margin-bottom:10px">
                       <el-row>
                      <el-col :span="8"><div style="text-align: right;padding-right:6px">{{ item.name }}:</div></el-col>
                      <el-col :span="item.hasOwnProperty('value2') ? 8 : 16">
                        <el-input
                          v-model="item.value1"
                          placeholder="请输入"
                        >
                          <template #append v-if="item.unit1!==''">{{
                            item.unit1
                          }}</template></el-input
                        >
                      </el-col>
                      <el-col :span="8" v-if="item.hasOwnProperty('value2')">
                        <div style="padding-left:5px">
                           <el-input
                          v-if="item.hasOwnProperty('value2')"
                          v-model="item.value2"
                          placeholder="请输入"
                        >
                          <template #append v-if="item.unit2!==''">{{
                            item.unit2
                          }}</template></el-input
                        >

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

                    </div>

                  </el-col>
                </el-row>
              </el-tab-pane>
              <el-tab-pane label="耗材" name="hc">
                 <el-row>
                  <el-col :span="12" v-for="item in czobj.hcdata" >
                    <div style="margin-bottom:10px">
                       <el-row>
                      <el-col :span="8"><div style="text-align: right;padding-right:6px">{{ item.name }}:</div></el-col>
                      <el-col :span="item.hasOwnProperty('value2') ? 8 : 16">
                        <el-input
                          v-model="item.value1"
                          placeholder="请输入"
                        >
                          <template #append v-if="item.unit1!==''">{{
                            item.unit1
                          }}</template></el-input
                        >
                      </el-col>
                      <el-col :span="8" v-if="item.hasOwnProperty('value2')">
                        <div style="padding-left:5px">
                           <el-input
                          v-if="item.hasOwnProperty('value2')"
                          v-model="item.value2"
                          placeholder="请输入"
                        >
                          <template #append v-if="item.unit2!==''">{{
                            item.unit2
                          }}</template></el-input
                        >
                        </div>
                      </el-col>
                      </el-row>
                    </div>

                  </el-col>
                </el-row>
              </el-tab-pane>
            </el-tabs>
          </el-form-item>
          <el-row>
            <el-col :span="8"
              ><el-form-item label="现场照片(处置前)">
                <ImageUpload
                  v-model="czobj.images[0]"
                  :limit="1"
                ></ImageUpload> </el-form-item
            ></el-col>
            <el-col :span="8">
              <el-form-item label="(处置中)">
                <ImageUpload v-model="czobj.images[1]" :limit="1"></ImageUpload>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="(处置后)">
                <ImageUpload v-model="czobj.images[2]" :limit="1"></ImageUpload>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="showcz = false">取消</el-button>
          <el-button type="primary" @click="TaskComplete">确定</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { defineComponent, ref, onMounted, watch } from "vue";
import { useDict } from "@/utils/dict";
// 图片预览组件
import ImagePreview from "@/components/ImagePreview";
import { cloneDeep } from "lodash";
import { listDept, getDept } from "@/api/system/dept";
import router from "../../../router";
import { useRoute } from "vue-router";
import {
  listTask,
  getTask,
  delTask,
  addTask,
  updateTask,
  distributedTask,
  closeTask,
  czTask,
  gzTask,
  hcTask,
  ddTask,
} from "@/api/system/task";
import {
  changeUserStatus,
  listUser,
  resetUserPwd,
  delUser,
  getUser,
  updateUser,
  addUser,
} from "@/api/system/user";
import { treeselect as deptTreeselect } from "@/api/system/dept";
import { ElMessage } from "element-plus";
import ImageUpload from "@/components/ImageUpload";
import FileUpload from "@/components/FileUpload";
import moment from "moment";

const STATICURL = import.meta.env.VITE_APP_BASE_API;

const {
  task_status,
  task_type,
  task_event_type,
  task_event_category,
  task_work,
  task_car,
  task_consumables,
} = useDict(
  "task_status",
  "task_type",
  "task_event_type",
  "task_event_category",
  "task_work",
  "task_car",
  "task_consumables"
);

const route = useRoute();
const showpf = ref(false);
const showbh = ref(false);
const showcz = ref(false);
const showgz = ref(false);
const showsh = ref(false);
const showxy = ref(false);
const pdobj = ref({ fzbz: [], fzr: [] });
const bhobj = ref({ resonRemark: [], files: "", images: [] });
const czobj = ref({
  qsdes: "",
  images: ["", "", ""],
  gzldata: [],
  clsbdata: [],
  hcdata: [],
});
const xyobj = ref({
  bzxytime: "",
  ddxctime: "",
  czwctime: "",
  zysc: "",
  clsc: "",
  zyfzr: "",
  zyrs: 0,
  carxh: "",
  carnumber: "",
  gls: "",
});
const gzobj = ref({ isfinsh: "是", hfdes: "", czcompletetime: "", jlr: "" });
const shobj = ref({ hcry: "", hcdes: "", hctime: "" });
const cztblaname = ref("gzl");

if (!route.params.id || route.params.id == "undefined") {
  router.back();
}

const TaskComplete = () => {
  czTask({
    taskId: route.params.id,
    logDes: JSON.stringify(czobj.value),
  }).then((res) => {
    showcz.value = false;
    ElMessage.success("成功！");
    gettasklist();
  });
};
const TaskGZ = () => {
  var gz = cloneDeep(gzobj.value);
  if (gz.czcompletetime) {
    gz.czcompletetime = moment(gz.czcompletetime).format("YYYY-MM-DD");
  }
  gzTask({
    taskId: route.params.id,
    logDes: JSON.stringify(gz),
  }).then((res) => {
    showgz.value = false;
    ElMessage.success("成功！");
    gettasklist();
  });
};

const TaskSH = () => {
  var gz = cloneDeep(shobj.value);
  if (gz.hctime) {
    gz.hctime = moment(gz.hctime).format("YYYY-MM-DD HH:mm:ss");
  }
  hcTask({
    taskId: route.params.id,
    logDes: JSON.stringify(gz),
  }).then((res) => {
    showsh.value = false;
    ElMessage.success("成功！");
    gettasklist();
  });
};
const TaskClose = () => {
  closeTask({
    taskId: route.params.id,
    logDes: JSON.stringify(bhobj.value),
  }).then((res) => {
    showbh.value = false;
    ElMessage.success("成功！");
    gettasklist();
  });
};
const addnewitem = () => {
  if (cztblaname.value === "gzl") {
    czobj.value.gzldata.push({
      index: czobj.value.gzldata.length,
      label: "",
      value: "",
    });
  }
  if (cztblaname.value === "clsb") {
    czobj.value.clsbdata.push({
      index: czobj.value.clsbdata.length,
      label: "",
      value: "",
    });
  }
  if (cztblaname.value === "hc") {
    czobj.value.hcdata.push({
      index: czobj.value.hcdata.length,
      label: "",
      value: "",
    });
  }
};

watch(
  [() => xyobj.value.bzxytime, xyobj.value.ddxctime, xyobj.value.czwctime],
  () => {
    if (xyobj.value.bzxytime != "" && xyobj.value.czwctime != "") {
      xyobj.value.clsc =
        (
          (moment(xyobj.value.czwctime).unix() -
            moment(xyobj.value.bzxytime).unix()) /
          3600.0
        ).toFixed(2) + "";
    }
    if (xyobj.value.ddxctime != "" && xyobj.value.czwctime != "") {
      xyobj.value.zysc =
        (
          (moment(xyobj.value.czwctime).unix() -
            moment(xyobj.value.ddxctime).unix()) /
          3600.0
        ).toFixed(2) + "";
    }
  }
);
const TaskXY = () => {
  var gz = cloneDeep(xyobj.value);
  if (gz.bzxytime) {
    gz.bzxytime = moment(gz.bzxytime).format("YYYY-MM-DD HH:mm:ss");
  }
  if (gz.ddxctime) {
    gz.ddxctime = moment(gz.ddxctime).format("YYYY-MM-DD HH:mm:ss");
  }
  if (gz.czwctime) {
    gz.czwctime = moment(gz.czwctime).format("YYYY-MM-DD HH:mm:ss");
  }

  ddTask({
    taskId: route.params.id,
    taskStatus: -1,
    logDes: JSON.stringify(gz),
  }).then((res) => {
    showxy.value = false;
    ElMessage.success("保存成功！");
    gettasklist();
  });
};

const Taskdistributed = () => {
  distributedTask({
    taskId: route.params.id,
    logDes: JSON.stringify(pdobj.value),
  }).then((res) => {
    showpf.value = false;
    ElMessage.success("派发成功！");
    gettasklist();
  });
};
// console.error(route.params.id)

const alldept = ref([]);
const ywdept = ref([]);
listDept().then((response) => {
  alldept.value = cloneDeep(response.data);
  ywdept.value = alldept.value.filter(
    (i) => i.deptName.indexOf("运营") != -1 && i.deptName.indexOf("生产") == -1
  );
});

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([]);
listUser({ pageSize: 1000 }).then((res) => {
  allusers.value = res.rows;
});
deptTreeselect().then((res) => {
  treedept.value = [setdatakey(res.data[0])];
});

const taskinfo = ref({
  taskName: "",
  taskContent: "",
  taskAddr: "-",
  taskLocation: "-",
  taskCode: "-",
  taskType: "1",
  taskEventType: "1",
  taskEventCategory: "1",
  taskFromRemark: "-",
  taskAddrRoad: "-",
  taskOtherId: "-",
  taskTime: "2022-11-11 16:11:11",
  taskReqCompleteTime: "2022-11-11 16:11:11",
  status: 1,
  taskCreater: "-",
  taskReporter: "-",
  taskPics: "",
  remark: "sss",
  taskVideos: "-",
  taskComplainConnect: "-",
  taskDeptRange: "",
  taskFacilitieCode: "",
  tblTaskLogList: [],
});

const gettasklist = () => {
  getTask(Number(route.params.id)).then((res) => {
    var templist = {};
    var list = res.data.tblTaskLogList;
    for (var i in list) {
      var log = list[i];
      if (templist.hasOwnProperty(log.taskStatus + "")) {
        if (
          moment(templist[log.taskStatus + ""].createTime).unix() -
            moment(log.createTime).unix() <
          0
        ) {
          templist[log.taskStatus + ""] = log;
        }
      } else {
        templist[log.taskStatus + ""] = log;
      }
    }
    var lists = [];
    for (var i in templist) {
      lists.push(templist[i]);
    }
    taskinfo.value = res.data;
    taskinfo.value.tblTaskLogList = lists;

    var logs = (taskinfo.value.tblTaskLogList ?? []).filter(
      (i) => i.taskStatus == 3
    );
    var logs1 = (taskinfo.value.tblTaskLogList ?? []).filter(
      (i) => i.taskStatus == -1
    );

    if (Array.isArray(logs) && logs.length > 0) {
      var log = JSON.parse(logs[0].logDes);
      czobj.value = log;
      if (Array.isArray(log.images)) {
        if (log.images.length < 3) {
          czobj.value.images = log.images.concat(["", "", ""]);
        } else {
          czobj.value.images = log.images;
        }
      } else {
        czobj.value.images = ["", "", ""];
      }
    }
    if (Array.isArray(logs1) && logs1.length > 0) {
      var log = JSON.parse(logs1[0].logDes);
      if (log.bzxytime) log.bzxytime = moment(log.bzxytime)._d;
      if (log.ddxctime) log.ddxctime = moment(log.ddxctime)._d;
      if (log.czwctime) log.czwctime = moment(log.czwctime)._d;
      xyobj.value = log;
    }

    task_work.value.map((i) => {
      i.remark = i.remark == undefined || i.remark == null ? '' : i.remark;
      var data = { name: i.label, unit1: i.remark };
      if ((i.remark ?? "").split(",").length > 1) {
        data["value1"] = '';
        data["value2"] = '';
        data["unit1"] = (i.remark ?? "").split(",")[0];
        data["unit2"] = (i.remark ?? "").split(",")[1];
      } else {
        data["value1"] = '';
      }
      var temp = czobj.value.gzldata.find((p) => {
        return p.name == data.name;
      });
      if (temp == undefined) {
        czobj.value.gzldata.push(data);
      }
    });

    task_car.value.map((i) => {
      i.remark = i.remark == undefined || i.remark == null ? '' : i.remark;
      var data = { name: i.label, unit1: i.remark };
      if ((i.remark ?? "").split(",").length > 1) {
        data["value1"] = '';
        data["value2"] = '';
        data["unit1"] = (i.remark ?? "").split(",")[0];
        data["unit2"] = (i.remark ?? "").split(",")[1];
      } else {
        data["value1"] = '';
      }
      var temp = czobj.value.clsbdata.find((p) => {
        return p.name == data.name;
      });
      if (temp == undefined) {
        czobj.value.clsbdata.push(data);
      }
    });

    task_consumables.value.map((i) => {
      i.remark = i.remark == undefined || i.remark == null ? '' : i.remark;
      var data = { name: i.label, unit1: i.remark };
      if ((i.remark ?? "").split(",").length > 1) {
        data["value1"] = '';
        data["value2"] = '';
        data["unit1"] = (i.remark ?? "").split(",")[0];
        data["unit2"] = (i.remark ?? "").split(",")[1];
      } else {
        data["value1"] = '';
      }
      var temp = czobj.value.hcdata.find((p) => {
        return p.name == data.name;
      });
      if (temp == undefined) {
        czobj.value.hcdata.push(data);
      }
    });


  });
};

onMounted(() => {
  gettasklist();
});

const fzrusers = ref([]);

watch(
  () => pdobj.value.fzbz,
  () => {
    fzrusers.value = allusers.value
      .filter(
        (i) =>
          (pdobj.value.fzbz ?? []).indexOf(i.deptId) != -1 &&
          i.nickName.indexOf("热线处置") != -1
      )
      .map((i) => {
        i.userId = i.userId + "";
        return i;
      });
  }
);
</script>

<style lang="scss">
.demo-tabs {
  width: 100%;
}
.el-select {
  width: 100% !important;
}
.taskdetail {
  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>