代码优化

linwe

2024-07-29 6416b40cf242340eaa163c498bd49d8103e73610

 src/views/patrolList/patrolRecord.vue

@@ -23,15 +23,12 @@
    </avue-crud>


    <el-drawer title="巡查详情" :visible.sync="isDetail" :append-to-body="true" size="60%" direction="rtl">

    <!-- <el-drawer title="巡查详情" :visible.sync="isDetail" :append-to-body="true" size="60%" direction="rtl">
      <el-card class="trackClass" style="overflow-y: auto">

        <el-collapse v-model="activeNames" @change="handleChange">
          <div v-for="(item, index) in 10" :key="index">
            <el-collapse-item title="一致性 Consistency" name="1">
          <div v-for="(item, index) in patrolTree" :key="index">
            <el-collapse-item :title="item.title" name="1">
              <div>{{ index }}

                <el-collapse v-model="activeNames" @change="handleChange">
                  <div v-for="(item, index) in 3" :key="index">
                    <el-collapse-item title="er致性 Consistency" name="1">
@@ -43,38 +40,64 @@
            </el-collapse-item>
          </div>
        </el-collapse>

        <!--  <el-form :model="form" label-position="right" size="mini" class="taskinfoForm" label-width="70px">
          <el-row>
            <el-col :span="24">
              <el-form-item label="巡查内容">
                <el-input :disabled="true" v-model="form.content" autocomplete="off"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <el-form-item label="巡检状态">
                <el-input :disabled="true" v-model="form.$status" autocomplete="off"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <el-form-item label="巡查图片">
                <el-upload action="" :disabled="true" list-type="picture-card" :file-list="form.elUploadImageArr">
                </el-upload>
              </el-form-item>

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

      </el-card>
    </el-drawer> -->

      <!-- <DcMap v-if="isDetail" :is-detail="isDetail" :range="form.taskRoute" :patrolRoute="form.patrolRoute">
      </DcMap> -->

    <el-drawer title="消防自查详情" :visible.sync="isDetail" :append-to-body="true" size="40%" direction="rtl">
      <div class="question-list" v-for="(item, index) in patrolTree" :key='tIndex' v-loading="drawerLoading">
        <div class="question-type">
          <div class="type-name">
            {{ item.title }}
          </div>
          <!--  <div class="icon-box"><i class="el-icon-arrow-down" v-show="tItem.isShowQList"></i><i class="el-icon-arrow-up"
              v-show="!tItem.isShowQList"></i></div> -->
        </div>
        <div class="question-item" v-for="(item2, index2) in item.children" :key='index2' v-show="item.hasChildren">
          <div class="question-name">
            <div class="key">{{ index2 + 1 }}、{{ item2.title }}</div>
            <div class="value">
              <el-radio v-model="item2.radio" label="1">存在</el-radio>
              <el-radio v-model="item2.radio" label="2">不存在</el-radio>
            </div>
          </div>
          <div class="yh-pic-box">
            <div class="yh-pic-name">
              隐患图片
            </div>
            <div class="yh-pic-list">
              <div class="pic-item" v-for="pic in item2.imageUrlsList">
                <el-image style="width: 100px; height: 100px" :src="pic" :fit="fit"></el-image>
              </div>
            </div>
          </div>
          <div class="yh-remark">
            <div class="yh-remark-name">
              隐患描述
            </div>
            <div class="yh-remark-value">
              {{ item2.remark }}
            </div>
          </div>
          <div class="yh-pic-box">
            <div class="yh-pic-name">
              整改后图片
            </div>
            <div class="yh-pic-list">
              <div class="pic-item" v-for="pic in item2.rectificationImageUrlsList">
                <el-image style="width: 100px; height: 100px" :src="pic" :fit="fit"></el-image>
              </div>
            </div>
          </div>
          <div class="yh-remark">
            <div class="yh-remark-name">
              整改后描述
            </div>
            <div class="yh-remark-value">
              {{ item2.rectificationRemark }}
            </div>
          </div>
        </div>
      </div>
    </el-drawer>

  </basic-container>
@@ -195,10 +218,12 @@
              slot: true
            },
            {
              width: 140,
              label: "场所地址",
              prop: "location",
              span: 24,
              row: true,
              overHidden: true,
              searchSpan: 4,
              searchLabelWidth: 46,
            },
@@ -211,12 +236,32 @@
              span: 24,
            },
            {
              width: 140,
              label: "创建时间",
              prop: "createTime",
              span: 24,
              row: true,
              searchSpan: 4,
              searchLabelWidth: 46,
            },
            {
              width: 140,
              label: "是否存在隐患",
              prop: "hiddenDangerNumber",
              type: 'select',
              span: 24,
              hide: true,
              searchSpan: 3,
              searchLabelWidth: 110,
              search: true,
              dicData: [{
                label: '不存在',
                value: 0
              }, {
                label: '存在',
                value: 1
              }]

            },
          ],
        },
@@ -281,6 +326,53 @@

      getDetail(row) {
        this.isDetail = true
        getDetail(row.id).then(res => {
          // console.log("****1245****", res.data)
          let recordInfo = res.data
          getPatrolGroupTree({
            type: 1,
            childType: 1
          }).then((res) => {
            const dataResult = res.data.data
            dataResult.forEach(item => {
              if (item.hasChildren) {
                item.children.forEach(item2 => {
                  recordInfo.data.patrolRecordVOList.forEach(item3 => {
                    if (item2.id == item3.itemId) {
                      item2.rectificationRemark = item3.rectificationRemark
                      // item2.rectificationImageUrls = item3.rectificationImageUrls
                      // item2.rectificationTime = item3.rectificationTime
                      // item2.imageUrls = item3.imageUrls

                      item2.imageUrlsList = []
                      item2.rectificationImageUrlsList = []
                      if (item3.imageUrls) {
                        item2.imageUrlsList = item3.imageUrls.split(',').map(ele => {
                          return website.minioUrl + ele
                        })
                      }
                      if (item3.rectificationImageUrls) {
                        item2.rectificationImageUrlsList = item3.rectificationImageUrls.split(',')
                          .map(ele => {
                            return website.minioUrl + ele
                          })
                      }

                      item2.radio = "1"
                    } else {
                      item2.radio = '2'
                    }
                  })

                })
              }
            })


            this.patrolTree = dataResult
            console.log("****1245****", dataResult)
          })
        })
      },
      searchReset() {
        this.query = {}
@@ -370,16 +462,14 @@
          this.loading = false
          this.selectionClear()
        })
        getPatrolGroupTree({
          type: 1,
          childType: 1
        }).then((res) => {
          const data = res.data.data
          this.patrolTree = data
          // const column = this.findObject(this.option.column, "articleList")
          // column.dicData = res.data.data
          this.loading = false
        })
        // getPatrolGroupTree({
        //   type: 1,
        //   childType: 1
        // }).then((res) => {
        //   const data = res.data.data
        //   this.patrolTree = data
        //   this.loading = false
        // })
      },
      updateFb(row) {
        if (row.publish == "0") {
@@ -420,4 +510,120 @@
  .avue-upload__icon {
    line-height: 6;
  }
</style>

  .title {
    margin: 10px;
    height: 40px;
    background-color: #eee;
    display: flex;
    align-items: center;

    .icon {
      width: 4px;
      height: 18px;
      background-color: #409dfe;
      margin: 0 10px;
      color: transparent;
    }
  }

  .basic-info {
    padding: 0 20px;
    font-size: 14px;

    .info-item {
      display: flex;
      padding: 10px;

      .info-name {
        width: 100px;
        display: flex;
        align-items: center;
      }

      .info-value {
        display: flex;
        align-items: center;
      }
    }
  }

  .question-list {
    padding: 0 20px;
    font-size: 14px;

    .question-type {
      height: 60px;
      display: flex;
      align-items: center;
      cursor: pointer;
      justify-content: space-between;
      padding-right: 20px;

      .type-name {}

      .icon-box {}
    }

    .question-item {
      margin-bottom: 20px;
      padding: 10px;
      background: #f5f7fa;
      border-radius: 8px;

      &>div {
        margin: 14px 0;
      }

      .question-name {
        display: flex;

        .key {
          width: 80%;
          padding-right: 20px;
          word-break: break-all;
        }

        .value {
          width: 20%;
          display: flex;
          align-items: center;
          justify-content: center;
        }
      }

      .yh-pic-box {
        display: flex;
        height: 100px;

        .yh-pic-name {
          width: 100px;
          display: flex;
          align-items: center;
          justify-content: left;
        }

        .yh-pic-list {
          width: 0;
          flex: 1;
          display: flex;
        }
      }

      .yh-remark {
        display: flex;

        .yh-remark-name {
          width: 100px;
          display: flex;
          align-items: center;
          justify-content: left;
        }

        .yh-remark-value {
          word-break: break-all;
        }
      }
    }
  }
</style>