index.vue 7.3 KB
Newer Older
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183
<template>
  <el-dialog title="安检记录详情" :visible.sync="detailOpen" width="900px" append-to-body>
    <el-form label-width="120px" class="detailInfo">
      <el-row>
        <el-col :span="12">
          <el-form-item label="储配站">
            <span>{{ form.stationName}}</span>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="用户名称">
            <span>{{ form.gasUserName}}</span>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="12">
          <el-form-item label="用户类型">
            <span v-if="form.gasUserType == '0'">居民</span>
            <span v-if="form.gasUserType == '1'">非居民</span>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="联系方式">
            <span>{{ form.telNum}}</span>
          </el-form-item>
        </el-col>

      </el-row>

      <el-row>
        <el-col :span="12">
          <el-form-item label="安检时间">
            <span>{{ form.safeCheckDate}}</span>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="安检人">
            <span>{{ form.safeCheckPersonName}}</span>
          </el-form-item>
        </el-col>

      </el-row>

      <el-row>
        <el-col :span="12">
          <el-form-item label="入户状态">
            <span v-if="form.checkInStatus == '0'">正常入户</span>
            <span v-if="form.checkInStatus == '1'">拒绝安检</span>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="用户地址">
            <span>{{ form.gasUserAddress}}</span>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="12" v-if="form.stoveCheckStatus">
          <el-form-item label="燃气灶具检查情况">
            <div v-if="form.stoveCheckStatus == '0'">合格</div>
            <div v-if="form.stoveCheckStatus == '1'">无3C认证</div>
            <div v-if="form.stoveCheckStatus == '2'">无熄火保护装置</div>
            <el-image v-if="form.stoveCheckPic" :src="form.stoveCheckPic" :preview-src-list="[form.stoveCheckPic]" :z-index="9999" style="width: 230px;height: 170px;"/>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="连接软管检查情况" v-if="form.hoseCheckStatus">
            <div v-if="form.hoseCheckStatus == '0'">合格</div>
            <div v-if="form.hoseCheckStatus == '1'">普通橡胶软管</div>
            <div v-if="form.hoseCheckStatus == '2'">三通连接软管</div>
            <div v-if="form.hoseCheckStatus == '3'">长度超过两米且未使用硬质钢管链接</div>
            <div v-if="form.hoseCheckStatus == '4'">穿越墙体、门窗顶棚和地面</div>
            <el-image v-if="form.hoseCheckPic" :src="form.hoseCheckPic" :preview-src-list="[form.hoseCheckPic]" :z-index="9999" style="width: 230px;height: 170px;"/>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="12" v-if="form.valveCheckStatus">
          <el-form-item label="减压阀检查情况">
            <div v-if="form.valveCheckStatus == '0'">合格</div>
            <div v-if="form.valveCheckStatus == '1'">可调节</div>
            <div v-if="form.valveCheckStatus == '2'">五自闭功能</div>
            <el-image v-if="form.valveCheckPic" :src="form.valveCheckPic" :preview-src-list="[form.valveCheckPic]" :z-index="9999" style="width: 230px;height: 170px;"/>
          </el-form-item>
        </el-col>
        <el-col :span="12" v-if="form.bottleCheckStatus">
          <el-form-item label="液化气钢瓶检查情况">
            <div v-if="form.bottleCheckStatus == '0'">合格</div>
            <div v-if="form.bottleCheckStatus == '1'">部分有码且可追溯</div>
            <div v-if="form.bottleCheckStatus == '2'">有码但不可追溯</div>
            <div v-if="form.bottleCheckStatus == '3'">钢瓶无码</div>
            <el-image v-if="form.bottleCheckPic" :src="form.bottleCheckPic" :preview-src-list="[form.bottleCheckPic]" :z-index="9999" style="width: 230px;height: 170px;"/>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="12" v-if="form.alarmCheckStatus">
          <el-form-item label="报警器加电磁切断阀检查情况">
            <div v-if="form.alarmCheckStatus == '0'">合格</div>
            <div v-if="form.alarmCheckStatus == '1'">有但未使用</div>
            <div v-if="form.alarmCheckStatus == '2'">有但未实现联动</div>
            <div v-if="form.alarmCheckStatus == '3'"></div>
            <div v-if="form.alarmCheckStatus == '4'">非液化气专用报警器</div>
            <div v-if="form.alarmCheckStatus == '5'">安装位置大于0.3米</div>
            <el-image v-if="form.alarmCheckPic" :src="form.alarmCheckPic" :preview-src-list="[form.alarmCheckPic]" :z-index="9999" style="width: 230px;height: 170px;"/>
          </el-form-item>
        </el-col>
        <el-col :span="12" v-if="form.placeCheckStatus">
          <el-form-item label="液化气钢瓶检查情况">
            <div v-if="form.placeCheckStatus == '0'">合格</div>
            <div v-if="form.placeCheckStatus == '1'">高层建筑(裙房)</div>
            <div v-if="form.placeCheckStatus == '2'">地下(半地下)室 </div>
            <div v-if="form.placeCheckStatus == '3'">车库或半地下车库 </div>
            <div v-if="form.placeCheckStatus == '4'">通风不良的场所 5.50公斤钢瓶超过两只或15公斤钢瓶超过七只未设置独立的气瓶间 </div>
            <el-image v-if="form.placeCheckPic" :src="form.placeCheckPic" :preview-src-list="[form.placeCheckPic]" :z-index="9999" style="width: 230px;height: 170px;"/>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="12" v-if="form.checkPersonSign">
          <el-form-item label="安检人员签名">
            <el-image v-if="form.checkPersonSign" :src="form.checkPersonSign" :preview-src-list="[form.checkPersonSign]" :z-index="9999" style="width: 230px;height: 170px;"/>
          </el-form-item>
        </el-col>
        <el-col :span="12" v-if="form.gasUserSign">
          <el-form-item label="用户签字">
            <el-image v-if="form.gasUserSign" :src="form.gasUserSign" :preview-src-list="[form.gasUserSign]" :z-index="9999" style="width: 230px;height: 170px;"/>
          </el-form-item>
        </el-col>
      </el-row>

    </el-form>
  </el-dialog>
</template>

<script>
  export default {
    name: "index",
    data(){
      return{
        detailOpen: false,
        form: {}
      }
    },
    methods:{
    }
  }
</script>

<style scoped lang="scss">
  .detailInfo{
    height: 350px;
    overflow-y: auto;
    &::-webkit-scrollbar {
      /* 设置滚动条宽度 */
      width: 4px;
      /* 设置滚动条背景色 */
      //background: black;
    }

    //滚动条轨道
    &::-webkit-scrollbar-track {
      background-color:transparent;
      -webkit-border-radius: 2em;
      -moz-border-radius: 2em;
      border-radius:2em;
    }

    //滚动条滑块
    &::-webkit-scrollbar-thumb {
      background-color: rgb(147,147,153,0.5);
      -webkit-border-radius: 2em;
      -moz-border-radius: 2em;
      border-radius:2em;
    }
  }
</style>