nnbp_ui/src/views/mb/maintain/detail/index.vue

<template>
  <div>
    <van-nav-bar
      title="计划详情"
      left-text="返回"
      left-arrow
      @click-left="onClickLeft"
    />
    <div class="body">
      <div class="listcontent" :style="`height:${bodyheight}px`">
        <van-collapse v-model="activeNames">
          <van-collapse-item class="citem" :title="`${ facilitieinfo.name }养护计划信息【${maintain_status.filter((i) => i.value.toString() === maintaininfo.status.toString())[0]?.label ?? '-' }】`" name="1">
            <van-row>
            <van-col :span="24"
              >养护类型：{{
                maintain_type.filter(
                  (i) => i.value === maintaininfo.maintainType + ""
                )[0]?.label ?? "-"
              }}</van-col
            >

            <van-col :span="12"
              >养护数量：{{ maintaininfo.maintainCount }}</van-col
            >
            <van-col :span="12"
              >报南排：{{
                maintaininfo.maintainReportNp == 1 ? "是" : "否"
              }}</van-col
            >
            <van-col :span="24">养护单位：{{ maintaininfo.maintainUnit }}</van-col>

            <van-col :span="12">年计划：{{ maintaininfo.maintainYear }}</van-col>
            <van-col :span="12">月计划：{{ maintaininfo.maintainMonth }}</van-col>
            <van-col :span="24">计划备注：{{ maintaininfo.maintainDes }}</van-col>
            <van-col :span="24">备注：{{ maintaininfo.maintainRemark }}</van-col>
          </van-row>
          </van-collapse-item>
           <van-collapse-item class="citem" title="设施信息" name="5">
             <van-row>
            <van-col :span="12">台账序号：{{ facilitieinfo.exId }}</van-col>
            <van-col :span="12">所在道路：{{ facilitieinfo.roadName }}</van-col>
            <van-col :span="12">性质：{{ facilitieinfo.nature }}</van-col>
            <van-col :span="12">运维长度：{{ facilitieinfo.fLength }}</van-col>
            <van-col :span="12">设施名称：{{ facilitieinfo.name }}</van-col>
            <van-col :span="24"
              >设施起止点：{{ facilitieinfo.addrFrom }}-{{
                facilitieinfo.addrEnd
              }}</van-col
            >
          </van-row>

           </van-collapse-item>
          <van-collapse-item class="citem" title="派发信息" name="2" v-if="maintaininfo.status > 1">
            <van-row>
            <van-col :span="12"
              >负责人：{{
                allusers.filter(
                  (i) =>
                    i.userId.toString() ===
                    JSON.parse(
                      maintaininfo.maintainLogs.filter(
                        (ii) => ii.maintainStatus === 2
                      )[0].logDes
                    ).fzr.toString()
                )[0]?.nickName ?? "-"
              }}</van-col
            >
            <van-col :span="12"
              >联系方式：{{
                allusers.filter(
                  (i) =>
                    i.userId.toString() ===
                    JSON.parse(
                      maintaininfo.maintainLogs.filter(
                        (ii) => ii.maintainStatus === 2
                      )[0].logDes
                    ).fzr.toString()
                )[0]?.phonenumber ?? "-"
              }}</van-col
            >
            <van-col :span="24"
              >处置班组：{{
                alldept
                  .filter(
                    (i) =>
                      (
                        JSON.parse(
                          maintaininfo.maintainLogs.filter(
                            (ii) => ii.maintainStatus === 2
                          )[0].logDes
                        ).fzbz ?? []
                      ).indexOf(i.deptId) != -1
                  )
                  .map((i) => i.deptName)
                  .join(",")
              }}</van-col
            >
            <van-col :span="24"
              >派发时间：{{
                maintaininfo.maintainLogs.filter(
                  (ii) => ii.maintainStatus === 2
                )[0].createTime
              }}</van-col
            >
          </van-row>

          </van-collapse-item>
          <van-collapse-item class="citem" title="执行反馈" name="3" v-if="maintaininfo.status >2">
             <div class="titleheader" :style="`${'margin-top:0px'}`">
            {{ "作业组" }}
          </div>
          <div>
            <van-row>
                <van-col :span="12">
                  负责人：{{JSON.parse(
                    maintaininfo.maintainLogs.filter(
                      (ii) => ii.maintainStatus === 3
                    )[0].logDes ?? "{}"
                  ).gzz.fzr}}
                </van-col>
                <van-col :span="24">
                  组员：
                  {{
                  allusers
                    .filter(
                      (i) =>
                        (
                          JSON.parse(
                            maintaininfo.maintainLogs.filter(
                              (ii) => ii.maintainStatus === 3
                            )[0].logDes
                          ).gzz.zy ?? []
                        ).indexOf(i.userId) != -1
                    )
                    .map((i) => i.nickName)
                    .join(",")
                }}

                </van-col>
                <van-col :span="12">
                  人数： {{JSON.parse(
                    maintaininfo.maintainLogs.filter(
                      (ii) => ii.maintainStatus === 3
                    )[0].logDes ?? "{}"
                  ).gzz.rs}}
                </van-col>
                <van-col :span="12">
                  开始时间：{{ moment(JSON.parse(
                    maintaininfo.maintainLogs.filter(
                      (ii) => ii.maintainStatus === 3
                    )[0].logDes ?? "{}"
                  ).gzz.starttime).format("YYYY-MM-DD")}}
                </van-col>
                <van-col :span="12">
                  管线起点：{{JSON.parse(
                    maintaininfo.maintainLogs.filter(
                      (ii) => ii.maintainStatus === 3
                    )[0].logDes ?? "{}"
                  ).gzz.addrstart}}
                </van-col>
                <van-col :span="12">
                  管线终点：{{JSON.parse(
                    maintaininfo.maintainLogs.filter(
                      (ii) => ii.maintainStatus === 3
                    )[0].logDes ?? "{}"
                  ).gzz.addrend}}
                </van-col>
                <van-col :span="12">
                  城区： {{JSON.parse(
                    maintaininfo.maintainLogs.filter(
                      (ii) => ii.maintainStatus === 3
                    )[0].logDes ?? "{}"
                  ).gzz.cq}}
                </van-col>

                <van-col :span="12">
                  结束时间：{{
                    moment(JSON.parse(
                    maintaininfo.maintainLogs.filter(
                      (ii) => ii.maintainStatus === 3
                    )[0].logDes ?? "{}"
                  ).gzz.endtime).format("YYYY-MM-DD")}}
                </van-col>
                <van-col :span="12">
                  作业地址： {{JSON.parse(
                    maintaininfo.maintainLogs.filter(
                      (ii) => ii.maintainStatus === 3
                    )[0].logDes ?? "{}"
                  ).gzz.addr}}
                </van-col>
                 <van-col :span="12">
                  作业方式：{{JSON.parse(
                    maintaininfo.maintainLogs.filter(
                      (ii) => ii.maintainStatus === 3
                    )[0].logDes ?? "{}"
                  ).gzz.jcsb}}
                </van-col>
                 <van-col :span="12">
                  车辆：{{JSON.parse(
                    maintaininfo.maintainLogs.filter(
                      (ii) => ii.maintainStatus === 3
                    )[0].logDes ?? "{}"
                  ).gzz.cars}}
                </van-col>
                 <van-col :span="12">
                  车牌：{{JSON.parse(
                    maintaininfo.maintainLogs.filter(
                      (ii) => ii.maintainStatus === 3
                    )[0].logDes ?? "{}"
                  ).gzz.carnumber}}
                </van-col>
                <van-col :span="24">
                  作业照片：
                </van-col>

                <van-col :span="24">
                  <ImagePreview
                  v-model:src="
                  JSON.parse(
                      maintaininfo.maintainLogs.filter(
                        (ii) => ii.maintainStatus === 3
                      )[0].logDes ?? '{}'
                    ).gzz.zyimages
                  "
                  :height="'120px'"
                  :width="'120px'"
                ></ImagePreview>
                </van-col>
                 <van-col :span="24">
                  工作照片：
                </van-col>
                <van-col :span="24">
                  <ImagePreview
                  v-model:src="
                  JSON.parse(
                      maintaininfo.maintainLogs.filter(
                        (ii) => ii.maintainStatus === 3
                      )[0].logDes ?? '{}'
                    ).gzz.gzimages
                  "
                  :height="'120px'"
                  :width="'120px'"
                ></ImagePreview>
                </van-col>
            </van-row>
          </div>
           <div class="titleheader" :style="`${'margin-top:0px'}`">
            {{ "工作量" }}
          </div>
          <div>
            <van-row>
              <van-col :span="12">管径(mm)：
                {{JSON.parse(
                      maintaininfo.maintainLogs.filter(
                        (ii) => ii.maintainStatus === 3
                      )[0].logDes ?? '{}'
                    ).gzl.gj}}
              </van-col>
              <van-col :span="12">对应长度(m)：{{JSON.parse(
                      maintaininfo.maintainLogs.filter(
                        (ii) => ii.maintainStatus === 3
                      )[0].logDes ?? '{}'
                    ).gzl.dycd}}</van-col>
              <van-col :span="12">泥量(方)：{{JSON.parse(
                      maintaininfo.maintainLogs.filter(
                        (ii) => ii.maintainStatus === 3
                      )[0].logDes ?? '{}'
                    ).gzl.nl}}</van-col>
              <van-col :span="12">检查井(座)：{{JSON.parse(
                      maintaininfo.maintainLogs.filter(
                        (ii) => ii.maintainStatus === 3
                      )[0].logDes ?? '{}'
                    ).gzl.jcj}}</van-col>
              <van-col :span="12">雨水口(座)：{{JSON.parse(
                      maintaininfo.maintainLogs.filter(
                        (ii) => ii.maintainStatus === 3
                      )[0].logDes ?? '{}'
                    ).gzl.ysk}}</van-col>
              <van-col :span="12">箅子(个)：{{JSON.parse(
                      maintaininfo.maintainLogs.filter(
                        (ii) => ii.maintainStatus === 3
                      )[0].logDes ?? '{}'
                    ).gzl.bz}}</van-col>
              <van-col :span="12">雨水口支管(m)：{{JSON.parse(
                      maintaininfo.maintainLogs.filter(
                        (ii) => ii.maintainStatus === 3
                      )[0].logDes ?? '{}'
                    ).gzl.yskzg}}</van-col>
              <van-col :span="24">备注：{{JSON.parse(
                      maintaininfo.maintainLogs.filter(
                        (ii) => ii.maintainStatus === 3
                      )[0].logDes ?? '{}'
                    ).gzl.remark}}</van-col>
              <van-col :span="24">未能作业原因：{{JSON.parse(
                      maintaininfo.maintainLogs.filter(
                        (ii) => ii.maintainStatus === 3
                      )[0].logDes ?? '{}'
                    ).gzl.wnzyyy}}</van-col>
              <van-col :span="24">备注：{{JSON.parse(
                      maintaininfo.maintainLogs.filter(
                        (ii) => ii.maintainStatus === 3
                      )[0].logDes ?? '{}'
                    ).gzl.remark1}}</van-col>
              <van-col :span="24">现场照片：</van-col>
              <van-col :span="24"><ImagePreview
                  v-model:src="
                  JSON.parse(
                      maintaininfo.maintainLogs.filter(
                        (ii) => ii.maintainStatus === 3
                      )[0].logDes ?? '{}'
                    ).gzl.images
                  "
                  :height="'120px'"
                  :width="'120px'"
                ></ImagePreview></van-col>
            </van-row>
          </div>

          </van-collapse-item>
          <van-collapse-item class="citem" title="养护成果" name="4" v-if="maintaininfo.status >3">
             <div class="titleheader" :style="`${'margin-top:0px'}`">
            {{ "收单方" }}
          </div>
          <div>
            <van-row>
                <van-col :span="12">
                  收单编号：{{JSON.parse(
                    maintaininfo.maintainLogs.filter(
                      (ii) => ii.maintainStatus === 4
                    )[0].logDes ?? "{}"
                  ).sdf.sdfbh}}
                </van-col>
                <van-col :span="12">
                  城区：{{JSON.parse(
                    maintaininfo.maintainLogs.filter(
                      (ii) => ii.maintainStatus === 4
                    )[0].logDes ?? "{}"
                  ).sdf.cq}}
                </van-col>
                <van-col :span="12">
                  完成月份： {{JSON.parse(
                    maintaininfo.maintainLogs.filter(
                      (ii) => ii.maintainStatus === 4
                    )[0].logDes ?? "{}"
                  ).sdf.wcyf}}
                </van-col>
                <van-col :span="24">
                  备注：{{JSON.parse(
                    maintaininfo.maintainLogs.filter(
                      (ii) => ii.maintainStatus === 4
                    )[0].logDes ?? "{}"
                  ).sdf.bz}}
                </van-col>

                <van-col :span="24">
                  作业图纸：
                </van-col>

                <van-col :span="24">
                 <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(
                      maintaininfo.maintainLogs.filter(
                        (ii) => ii.maintainStatus === 4
                      )[0].logDes ?? '{}'
                    ).sdf.tz?.split(',') ?? []"
                  >
                    <a target="_blank" :href="`${STATICURL + i}`">
                      {{ i.split("/")[i.split("/").length - 1] }}
                    </a>
                  </div>  </div>
                </div>
                </van-col>
                 <van-col :span="24">
                  收单方：
                </van-col>
                <van-col :span="24">
                  <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(
                      maintaininfo.maintainLogs.filter(
                        (ii) => ii.maintainStatus === 4
                      )[0].logDes ?? '{}'
                    ).sdf.sfd?.split(',') ?? []"
                  >
                    <a target="_blank" :href="`${STATICURL + i}`">
                      {{ i.split("/")[i.split("/").length - 1] }}
                    </a>
                  </div>  </div>
                </div>
                </van-col>
                <van-col :span="24">
                  作业照片：
                </van-col>

                <van-col :span="24">
                   <ImagePreview
                  v-model:src="
                  JSON.parse(
                      maintaininfo.maintainLogs.filter(
                        (ii) => ii.maintainStatus === 4
                      )[0].logDes ?? '{}'
                    ).sdf.zyzp
                  "
                  :height="'120px'"
                  :width="'120px'"
                ></ImagePreview>
                </van-col>
                <van-col :span="24">
                  作业视频：
                </van-col>
                <van-col :span="24">
                    <VideoPreview
                  v-model:src="
                  JSON.parse(
                      maintaininfo.maintainLogs.filter(
                        (ii) => ii.maintainStatus === 4
                      )[0].logDes ?? '{}'
                    ).sdf.zysp
                  "
                  :height="'120px'"
                  :width="'120px'"
                ></VideoPreview>
                </van-col>
            </van-row>
          </div>
           <div class="titleheader" :style="`${'margin-top:0px'}`">
            {{ "班组验收信息" }}
          </div>
          <div>
            <van-row>
              <van-col :span="24">实际养护路段范围：
                {{JSON.parse(
                      maintaininfo.maintainLogs.filter(
                        (ii) => ii.maintainStatus === 4
                      )[0].logDes ?? '{}'
                    ).bzys.sjfw}}
              </van-col>
              <van-col :span="12">管径(mm)：
                {{JSON.parse(
                      maintaininfo.maintainLogs.filter(
                        (ii) => ii.maintainStatus === 4
                      )[0].logDes ?? '{}'
                    ).bzys.zgkj}}
              </van-col>
              <van-col :span="12">对应长度(m)：{{JSON.parse(
                      maintaininfo.maintainLogs.filter(
                        (ii) => ii.maintainStatus === 4
                      )[0].logDes ?? '{}'
                    ).bzys.dycd}}</van-col>
              <van-col :span="12">泥量(方)：{{JSON.parse(
                      maintaininfo.maintainLogs.filter(
                        (ii) => ii.maintainStatus === 4
                      )[0].logDes ?? '{}'
                    ).bzys.nl}}</van-col>
              <van-col :span="12">检查井(座)：{{JSON.parse(
                      maintaininfo.maintainLogs.filter(
                        (ii) => ii.maintainStatus === 4
                      )[0].logDes ?? '{}'
                    ).bzys.jcj}}</van-col>
              <van-col :span="12">雨水口(座)：{{JSON.parse(
                      maintaininfo.maintainLogs.filter(
                        (ii) => ii.maintainStatus === 4
                      )[0].logDes ?? '{}'
                    ).bzys.ysk}}</van-col>
              <van-col :span="12">箅子(个)：{{JSON.parse(
                      maintaininfo.maintainLogs.filter(
                        (ii) => ii.maintainStatus === 4
                      )[0].logDes ?? '{}'
                    ).bzys.bz}}</van-col>
              <van-col :span="12">雨水口支管(m)：{{JSON.parse(
                      maintaininfo.maintainLogs.filter(
                        (ii) => ii.maintainStatus === 4
                      )[0].logDes ?? '{}'
                    ).bzys.yskzg}}</van-col>

              <van-col :span="24">验收情况：{{JSON.parse(
                      maintaininfo.maintainLogs.filter(
                        (ii) => ii.maintainStatus === 4
                      )[0].logDes ?? '{}'
                    ).bzys.ysqk}}</van-col>
              <van-col :span="24">验收备注：{{JSON.parse(
                      maintaininfo.maintainLogs.filter(
                        (ii) => ii.maintainStatus === 4
                      )[0].logDes ?? '{}'
                    ).bzys.remark}}</van-col>
              <van-col :span="24">验收图纸：</van-col>
              <van-col :span="24">
                 <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(
                      maintaininfo.maintainLogs.filter(
                        (ii) => ii.maintainStatus === 4
                      )[0].logDes ?? '{}'
                    ).bzys.ystz?.split(',') ?? []"
                  >
                    <a target="_blank" :href="`${STATICURL + i}`">
                      {{ i.split("/")[i.split("/").length - 1] }}
                    </a>
                  </div>  </div>
                </div>
              </van-col>
            </van-row>
          </div>



          </van-collapse-item>

        </van-collapse>
      </div>
    </div>
  </div>
</template>

<script setup>
import { defineComponent, ref, onMounted, watch } from "vue";
import { cloneDeep } from "lodash";
import { listDept, getDept } from "@/api/system/dept";
import ImagePreview from "@/components/ImagePreview";
import VideoPreview from "@/components/VideoPreview";
import { useDict } from "@/utils/dict";
import { useRoute } from "vue-router";
import moment from "moment";
import { listFacilities, getFacilities } from "@/api/system/facilities";
import {
  listMaintain,
  getMaintain,
  delMaintain,
  addMaintain,
  updateMaintain,
} from "@/api/system/maintain";
import {
  changeUserStatus,
  listUser,
  resetUserPwd,
  delUser,
  getUser,
  updateUser,
  addUser,
} from "@/api/system/user";
import { treeselect as deptTreeselect } from "@/api/system/dept";
import router from "../../../../router";

const STATICURL = import.meta.env.VITE_APP_BASE_API;
const {
  maintain_status,
  maintain_type,

} = useDict(
  "maintain_status",
  "maintain_type",
);

const route = useRoute();
const bodyheight = ref(0);
bodyheight.value = document.body.clientHeight - 46;

const activeNames = ref(["1"]);

const alldept = ref([]);
listDept().then((response) => {
  alldept.value = cloneDeep(response.data);
});
const allusers = ref([]);
listUser({ pageSize: 1000 }).then((res) => {
  allusers.value = res.rows;
});
const maintaininfo = ref({
 createBy: null,
  createTime: null,
  ext1: "多少v啥的",
  ext2: null,
  facilitiesId: 1,
  id: 1,
  maintainCount: 2,
  maintainDes: "是东方闪电",
  maintainLogs: [],
  maintainMonth: "06",
  maintainRemark: "是东方闪电",
  maintainReportNp: 1,
  maintainType: 1,
  maintainUnit: "安庆公交集团",
  maintainYear: "2022",
  params: {},
  remark: null,
  searchValue: null,
  status: 1,
  updateBy: null,
  updateTime: null,
});
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,
});
onMounted(() => {
  getMaintain(Number(route.params.id)).then((res) => {
    maintaininfo.value = res.data;
  });
    getFacilities(maintaininfo.value.facilitiesId).then((rep) => {
      facilitieinfo.value = rep.data;
    });
});
const onClickLeft = () => {
  router.back();
};
</script>

<style lang="scss">
body {
  position: fixed;
  width: 100%;
  top: -1px;
}
.listcontent {
  overflow-y: auto;
  padding: 10px;
  .van-col{
    margin-bottom: 10px;
  }
  .citem {
    margin-top: 10px;
    border-radius: 5px;
    border: 1px solid rgba(209, 217, 221, 0.4);
    overflow: hidden;
    .content {
      font-size: 10px;

    }
    .titleheader{
        color:#3d6dc5;
        margin-bottom: 5px;
      }
  }
  .van-cell__title {
    color: #3d6dc5;
    font-weight: bold;
  }
}
</style>