settle_down_web/src/views/deviceh5/index.vue

<template>
  <div class="statistic_base device_mobile">
    <el-form ref="form" :model="form">
      <div class="title">设备信息</div>
      <div class="info">
        <div class="item">
          <div class="left">专项场景</div>
          <div class="right">{{ form.scene }}</div>
        </div>
        <div class="item">
          <div class="left">标识码</div>
          <div class="right">{{ form.bsm }}</div>
        </div>
        <div class="item">
          <div class="left">点位标识码</div>
          <div class="right">{{ form.dwbsm }}</div>
        </div>
        <div class="item">
          <div class="left">设备类型</div>
          <div class="right">{{ form.equipmentType }}</div>
        </div>
        <div class="item">
          <div class="left">设备名称</div>
          <div class="right">{{ form.equipmentName }}</div>
        </div>
        <div class="item">
          <div class="left">设备型号</div>
          <div class="right">{{ form.equipmentModel }}</div>
        </div>
        <div class="item">
          <div class="left">监测指标</div>
          <div class="right">{{ form.monitoringIndex }}</div>
        </div>
        <div class="item">
          <div class="left">采集频率</div>
          <div class="right">{{ form.collectionFrequency }}</div>
        </div>
        <div class="item">
          <div class="left">上传频率</div>
          <div class="right">{{ form.uploadFrequency }}</div>
        </div>
        <div class="item">
          <div class="left">供电方式</div>
          <div class="right">{{ form.powerSupplyMode }}</div>
        </div>
        <div class="item">
          <div class="left">相对高度</div>
          <div class="right">{{ form.relativeAltitude }}</div>
          米
        </div>
        <div class="item">
          <div class="left">设备状态</div>
          <div class="right">{{ form.equipmentStatus }}</div>
        </div>
        <div class="item">
          <div class="left">行政区划</div>
          <div class="right">{{ form.area }}</div>
        </div>
        <div class="item">
          <div class="left">标签</div>
          <div class="right">{{ form.bq }}</div>
        </div>
        <div class="item">
          <div class="left">备注</div>
          <div class="right">{{ form.remark }}</div>
        </div>
      </div>
      <div class="title" style="margin-top:20px">采购信息</div>
      <div class="info">
        <div class="item">
          <div class="left">采购时间</div>
          <div class="right">{{ form.cgsj }}</div>
        </div>
        <div class="item">
          <div class="left">采购单位</div>
          <div class="right">{{ form.cgdw }}</div>
        </div>
        <div class="item">
          <div class="left">厂商名称</div>
          <div class="right">{{ form.manufacturerName }}</div>
        </div>
        <div class="title" style="margin-top:20px">安装信息</div>
        <div class="info">
          <div class="item">
            <div class="left">安装时间</div>
            <div class="right">{{ form.instalTime }}</div>
          </div>
          <div class="item">
            <div class="left">安装维护单位</div>
            <div class="right">{{ form.instalMaintenUnit }}</div>
          </div>
          <div class="item">
            <div class="left">安装位置</div>
            <div class="right">{{ form.position }}</div>
          </div>
        </div>
      </div>
      <div class="title" style="margin-top:20px">在保信息</div>
      <div class="info">
        <div class="item">
          <div class="left">在保期</div>
          <div class="right">{{ form.zbq }}</div>
        </div>
        <div class="item">
          <div class="left">在保状态</div>
          <div class="right">{{ form.zbzt }}</div>
        </div>
      </div>
    </el-form>
  </div>
</template>
<script>
import Base from '@/views/base/base'
import BaseData from '@/views/base/baseData'
import constant from '@/static/utils/constant'

export default {
    name: 'Deviceh5',
    components: {},
    mixins: [Base, BaseData],
    props: ['data'],
    data() {
        return {
            id: '',
            form: {
                scene: '',
                equipmentType: '',
                equipmentName: '',
                equipmentModel: '',
                monitoringIndex: '',
                collectionFrequency: '',
                uploadFrequency: '',
                equipmentStatus: '',
                manufacturerName: '',
                relativeAltitude: '',
                instalTime: '',
                powerSupplyMode: '',
                instalMaintenUnit: '',
                position: '',
                area: '',
                bq: '',
                remark: '',
                jwdArr: ['', ''],
                dwbsm: '',
                relId: '',
                cgdw: '',
                cgsj: '',
                zbq: '',
                zbzt: ''
            },
            tagNameListAll: []

        }
    },
    watch: {},
    mounted() {
       this.getData()
    }, methods: {
        getData() {
            this.id = this.$route.query.id
            if (this.id !== '') {
                const postData = {
                    id: this.id
                }
                this.$channel.globeRequest('wx/ZhjgAnalysisMonitoringEquipmentH5Controller', 'getH5ById', postData, 'H5Monitor')
                    .then(res => {
                        if (res.data) {
                            this.form = Object.assign({}, this.form, res.data)
                            this.form.cgsj = this.$common.transDateStr(this.form.cgsj, constant.DATE_PATTERN.DATE)
                            this.form.zbq = this.$common.transDateStr(this.form.zbq, constant.DATE_PATTERN.DATE)
                        }
                    }).catch(() => {
                    })
            } else {
                this.$message.error('无效设备信息')
                return
            }
        }
    }

}

</script>

<style lang="scss" scoped>
  .device_mobile{
    padding: 15px;
    .title{
      font-size: 16px;
      color: #333;
      font-weight: bold;
      margin-bottom: 10px;
    }
    .info{
      .item{
        border-bottom: 1px solid #ccc;
        position: relative;
        color: #333;
        font-size: 14px;
        display: flex;
        padding: 15px 0;
        .left{
          width: 100px;
        }
        .right{
           flex: 1;
           text-align: right;
           word-break: break-all;
           line-height: 16px;
        }
      }
    }
  }
</style>