supervise-monitor-ui/src/views/zhiwujiance/zhiwujianceInfo.vue

<template>
  <div class="app-container">
    <div>
      <div class="tab-header webtop">
        <div>{{ viewTitle }}</div>
        <div>
          <el-button type="info" size="small" @click="handleReturn()">关闭</el-button>
        </div>
      </div>
      <div class="listconadd">
        <el-form ref="form_obj" :model="infoForm" :rules="rules" class="formadd">
          <div class="title">
            <div>货堆监测详情信息</div>
          </div>
          <el-row>
            <el-col :span="4" class="tleftb">
              <span>仓库名称</span>
            </el-col>
            <el-col :span="8">
              <el-form-item>
                <span>{{ infoForm.cangkuname }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="4" class="tleftb">
              <span>仓库位置</span>
            </el-col>
            <el-col :span="8">
              <el-form-item>
                <span>{{ infoForm.weizhi }}</span>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="4" class="tleftb">
              <span>货架号</span>
            </el-col>
            <el-col :span="8">
              <el-form-item>
                <span>{{ infoForm.huohao }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="4" class="tleftb">
              <span>联系人</span>
            </el-col>
            <el-col :span="8">
              <el-form-item>
                <span>{{ infoForm.ren }}</span>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="4" class="tleftb">
              <span>联系电话</span>
            </el-col>
            <el-col :span="8">
              <el-form-item>
                <span>{{ infoForm.tel }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="4" class="tleftb">
              <span>拍照时间</span>
            </el-col>
            <el-col :span="8">
              <el-form-item>
                <span>{{ infoForm.modifyTime }}</span>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="4" class="tleftb">
              <span>拍照图片</span>
            </el-col>
            <el-col :span="20">
              <el-form-item>
                <span><img class="tus" :src="fileUrl + infoForm.imgAfter" alt="" /></span>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>

import { getDeviceImageById } from '@/api/deviceImage/deviceImage'

export default {
  name: 'shebeitaizhangInfo',
  data() {
    return {
      // tableKey: 0,
      // index: 0,
      viewTitle: '',
      fileUrl: 'http://8.130.39.13:7003/upload/monitor/',
      // fileUrl: 'http://huirong.ybkjyl.com/imagesDownload/',
      supplierType_list: [
        { title: '摄像头', id: '1' },
      ],
      status_list: [
        { title: '已损坏', id: '1' },
        { title: '已维修', id: '2' },
        { title: '完好', id: '3' },
      ],
      infoForm: {},
      rules: {},
      infoOne: {}
    }
  },
  methods: {
    getStatus(item) {
      for (var i = 0; i < this.status_list.length; i++) {
        if (this.status_list[i].id == item) {
          return this.status_list[i].title
        }
      }
    },
    getSupplierType(item) {
      for (var i = 0; i < this.supplierType_list.length; i++) {
        if (this.supplierType_list[i].id == item) {
          return this.supplierType_list[i].title
        }
      }
    },
    showInfo(row) {
      this.$nextTick(() => {
        this.$refs['form_obj'].clearValidate()
      })
      this.viewTitle = '质物台账详情'
      getDeviceImageById({ id: row.id }).then(resp => {
        console.log('resp', resp)
        this.infoForm = {
          cangkuname: '仓库1', huohao: '1025632', ren: 'sun', tel: '138330025635',
          bianma: '02124623', name: '矿泉水', num: '500', weizhi: '仓库1F3',
          manufacturerName: 'KD-22',
          manufacturerAs: '2F金陵文脉',
          manufacturerCode: '1',
          time: '2023-02-26 16:00:00',
          manufacturerAddress: '大华',
          manufacturer: '2023-02-26 12:00:00',
          manufacturerTelePhone: '大华科技',
          manufacturerFax: '2023-05-23',
          status: '1',
          cangku: '仓库1',
          tuUrl: './image/tu1.jpg',
          modifyTime: '',
          imgAfter: ''
        }
        this.infoForm.modifyTime = resp.data.modifyTime
        this.infoForm.imgAfter = resp.data.imgAfter
      }).catch(e => {
        this.formobj = row
      })
    },
    handleReturn() {
      this.$emit('doback')
    }
  }
}
</script>

<style scoped>
.tus {
  width: 400px;
  margin: 20px;
}
</style>