1.安灯设置静态页面实现部分

loulijun2021

2022-10-17 329de8a777dbc880bc495559fc3aae51963663fb

 src/views/sbgl/wxjl.vue

@@ -267,7 +267,7 @@
                style="width: 100px;margin-right: 10px"
                :src="baseUrl+item.img1url"
                alt=""
                @click="handlePictureCardPreview(baseUrl+item.img1url)"
                @click="handlePictureCardPreview(baseUrl+item.img1url,'设备报修/故障图片')"
              >
            </div>
          </div>
@@ -283,7 +283,7 @@
                style="width: 100px;margin-right: 10px"
                :src="baseUrl+item.img1url"
                alt=""
                @click="handlePictureCardPreview(baseUrl+item.img1url)"
                @click="handlePictureCardPreview(baseUrl+item.img1url,'设备维修/故障图片')"
              >
            </div>
          </div>
@@ -296,7 +296,7 @@
                style="width: 100px;margin-right: 10px"
                :src="baseUrl+item.img2url"
                alt=""
                @click="handlePictureCardPreview(baseUrl+item.img2url)"
                @click="handlePictureCardPreview(baseUrl+item.img2url,'设备维修/备件图片')"
              >
            </div>
          </div>
@@ -305,7 +305,14 @@
          <i class="el-icon-s-operation" style="color:#42b983;" /> 设备维修验证信息：
        </div>
        <div style="display: flex;flex-direction: column;margin-left: 40px">
          <div style="margin-bottom: 10px">验证结果：{{ isResult }}</div>
          <div style="margin-bottom: 10px;display: flex;">验证结果：
            <div
              :style="{backgroundColor:isResult==='通过'? '#42b983':'red'}"
              style="margin-top: 3px;margin-right: 5px;width:10px;height: 10px;border-radius: 50%;"
            />
            {{ isResult }}
          </div>

        </div>
      </div>
      <!--      图片预览对话框-->
@@ -316,7 +323,33 @@
        append-to-body
        @close="pictureHandleClose"
      >
        <img width="100%" :src="pictureUrl" alt="">
        <div style="font-size: 16px;margin-bottom: 10px">
          <i class="el-icon-s-comment" style="color:#42b983;" /> {{ pictureName }}
        </div>

        <img :key="new Date()" width="100%" :src="pictureUrl" alt="">

        <el-tooltip class="item" effect="light" content="上一张" placement="top">
          <div
            v-if="pictureUrlAll.findIndex(item => item.url === pictureUrl)!==0"
            style="position: absolute;top: 48%;left: 3.5%;"
          ><i
            style="color:#fff;cursor: pointer;font-size: 20px"
            class="el-icon-d-arrow-left"
            @click="arrowLeftClick(pictureUrl,pictureName)"
          /></div>
        </el-tooltip>
        <el-tooltip class="item" effect="light" content="下一张" placement="top">
          <div
            v-if="pictureUrlAll.findIndex(item => item.url === pictureUrl)!==pictureUrlAll.length-1"
            style="position: absolute;top: 48%;right: 3.5%;"
          >
            <i
              style="color:#fff;cursor: pointer;font-size: 20px"
              class="el-icon-d-arrow-right"
              @click="arrowRightClick(pictureUrl,pictureName)"
            /></div>
        </el-tooltip>
        <span slot="footer" class="dialog-footer">
          <div class="footerButton">
            <el-button @click="pictureVisible=false">返 回</el-button>
@@ -391,6 +424,8 @@

      pictureVisible: false, // 图片预览对话框
      pictureUrl: '', // 图片预览Url
      pictureName: '', // 图片预览名称
      pictureUrlAll: [], // 图片预览地址的所有Url

      title_value: '数据导入 / 点检部位',
      code: '4',
@@ -506,19 +541,58 @@
      this.dialogData1 = res.data1
      this.dialogData2 = res.data2
      this.isResult = row.verify_result

      // 设备报修图片集合
      if (this.dialogData1.faultimage) {
        this.dialogData1.faultimage.forEach(item => {
          this.pictureUrlAll.push(
            { url: this.baseUrl + item.img1url, name: '设备报修/故障图片' }
          )
        })
      }
      // 设备维修图片集合
      if (this.dialogData2.repairimage) {
        this.dialogData2.repairimage.forEach(item => {
          this.pictureUrlAll.push(
            {
              url: item.img1url ? this.baseUrl + item.img1url : this.baseUrl + item.img2url,
              name: item.img1url ? '设备维修/故障图片' : '设备维修/备件图片'
            }
          )
        })
      }
    },
    handlePictureCardPreview(url) {
    handlePictureCardPreview(url, name) {
      this.pictureVisible = true
      this.pictureUrl = url
      this.pictureName = name
    },
    arrowLeftClick(pictureUrl, pictureName) {
      this.pictureUrlAll.forEach((item, index) => {
        if (item.url === pictureUrl) {
          this.pictureUrl = this.pictureUrlAll[index - 1].url
          this.pictureName = this.pictureUrlAll[index - 1].name
        }
      })
    },
    arrowRightClick(pictureUrl, pictureName) {
      this.pictureUrlAll.forEach((item, index) => {
        if (item.url === pictureUrl) {
          this.pictureUrl = this.pictureUrlAll[index + 1].url
          this.pictureName = this.pictureUrlAll[index + 1].name
        }
      })
    },
    pictureHandleClose() {
      this.pictureUrl = ''
      this.pictureName = ''
    },
    // 对话框关闭事件
    handleClose() {
      this.dialogData1 = {}
      this.dialogData2 = {}
      this.isResult = ''
      this.pictureUrlAll = []
    },
    async download() {
      let reportdate = this.form.reportdate