qa-prevention-gwj-vue/src/views/map/dialog/xfControl.vue

<template>
  <div class="app-container print-work" style="width: 100%">

    <!--消防泵房-->
    <div v-if="type === 'xfbf01'">
      <div class="level-title">
        <h1>基础信息</h1>
      </div>
      <table class="table-ui">
        <tr>
          <td class="bbg-transparent">名称</td>
          <td colspan="2">{{ FIRERESOURCES_NAME }}</td>
        </tr>
        <tr>
          <td class="bbg-transparent">状态</td>
          <td colspan="2">{{ pd.STATE == '0' ? '正常' : '异常' }}</td>
        </tr>
        <tr>
          <td class="bbg-transparent">所属分公司</td>
          <td v-if="gangkou === '00004'" colspan="2"> 曹妃甸实业港务有限公司 </td>
          <td v-else colspan="2"> {{ pd.CORP_NAME }} </td>
        </tr>
      </table>
      <div class="level-title" style="margin-top: 10px">
        <h1>消防设备</h1>
      </div>
      <table class="table-ui">
        <tr>
          <th class="bbg-transparent">泵房编号</th>
          <th class="bbg-transparent">名称</th>
          <th class="bbg-transparent">水泵分类</th>
          <th class="bbg-transparent">负责单位</th>
          <th class="bbg-transparent">具体位置</th>
          <th class="bbg-transparent">设备参数和规格</th>
        </tr>
        <tr v-for="(item) in pumpRoomList" :key="item.label" >
          <td class="bbg-transparent">{{ item.code }}</td>
          <td class="bbg-transparent">{{ item.name }}</td>
          <td class="bbg-transparent">{{ item.type }}</td>
          <td class="bbg-transparent">{{ item.corp }}</td>
          <td class="bbg-transparent">{{ item.palce }}</td>
          <td class="bbg-transparent">{{ item.ramake }}</td>
        </tr>
      </table>
      <div class="level-title" style="margin-top: 10px">
        <h1>照片</h1>
      </div>
      <el-carousel :interval="4000" type="card" height="200px">
        <el-carousel-item v-for="(image, index) in images" :key="index">
          <img v-viewer v-if="gangkou === '00004'" :src="config.cfdfileUrl + image.FILEPATH" style="max-width: 100%;">
          <img v-viewer v-else :src="config.fileUrl + image.FILEPATH" style="max-width: 100%;">
        </el-carousel-item>
      </el-carousel>
    </div>
    <!--消防控制室-->
    <div v-if="type === 'xfkzs01'">
      <div class="level-title">
        <h1>基础信息</h1>
      </div>
      <table class="table-ui">
        <tr>
          <td class="bbg-transparent">名称</td>
          <td colspan="2">{{ FIRERESOURCES_NAME }}</td>
        </tr>
        <tr>
          <td class="bbg-transparent">状态</td>
          <td colspan="2">{{ pd.STATE == '0' ? '正常' : '异常' }}</td>
        </tr>
        <tr>
          <td class="bbg-transparent">所属分公司</td>
          <td v-if="gangkou === '00004'" colspan="2"> 曹妃甸实业港务有限公司 </td>
          <td v-else colspan="2"> {{ pd.CORP_NAME }} </td>
        </tr>
      </table>
      <div class="level-title" style="margin-top: 10px">
        <h1>消防设备</h1>
      </div>
      <table class="table-ui">
        <tr>
          <th class="bbg-transparent">设备名称</th>
          <th class="bbg-transparent">型号</th>
          <th class="bbg-transparent">设备数量</th>
          <th class="bbg-transparent">设备位置</th>
        </tr>
        <tr v-for="(item) in pumpRoomList.DESCR" :key="item.label" >
          <td class="bbg-transparent">{{ item.name }}</td>
          <td class="bbg-transparent">{{ item.model }}</td>
          <td class="bbg-transparent">{{ item.number }}</td>
          <td class="bbg-transparent">{{ item.place }}</td>
        </tr>
      </table>
      <div class="level-title" style="margin-top: 10px">
        <h1>人员</h1>
      </div>
      <table class="table-ui">
        <tr>
          <th class="bbg-transparent">人员姓名</th>
          <th class="bbg-transparent">人员手机号</th>
          <th class="bbg-transparent">人员值班情况</th>
        </tr>
        <tr v-for="(item) in pumpRoomList.RenYuan" :key="item.label" >
          <td class="bbg-transparent">{{ item.name }}</td>
          <td class="bbg-transparent">{{ item.phone }}</td>
          <td class="bbg-transparent">{{ item.remake }}</td>
        </tr>
      </table>
      <div class="level-title" style="margin-top: 10px">
        <h1>照片</h1>
      </div>
      <el-carousel :interval="4000" type="card" height="200px">
        <el-carousel-item v-for="(image, index) in images" :key="index">
          <img v-viewer v-if="gangkou === '00004'" :src="config.cfdfileUrl + image.FILEPATH" style="max-width: 100%;">
          <img v-viewer v-else :src="config.fileUrl + image.FILEPATH" style="max-width: 100%;">
        </el-carousel-item>
      </el-carousel>
    </div>
    <!--消防救援队-->
    <div v-if="type === 'xfjyd01'">
      <div class="level-title">
        <h1>基础信息</h1>
      </div>
      <table class="table-ui">
        <tr>
          <td class="bbg-transparent">名称</td>
          <td colspan="2">{{ FIRERESOURCES_NAME }}</td>
        </tr>
        <tr>
          <td class="bbg-transparent">状态</td>
          <td colspan="2">{{ pd.STATE == '0' ? '正常' : '异常' }}</td>
        </tr>
        <tr>
          <td class="bbg-transparent">所属分公司</td>
          <td v-if="gangkou === '00004'" colspan="2"> 曹妃甸实业港务有限公司 </td>
          <td v-else colspan="2"> {{ pd.CORP_NAME }} </td>
        </tr>
      </table>
      <table class="table-ui">
        <tr v-for="(item) in pumpRoomList" :key="item.label" >
          <td class="bbg-transparent">{{ item.label }}</td>
          <td colspan="2">{{ item.value }}</td>
        </tr>
      </table>
    </div>
    <!--消防水源-->
    <div v-if="type === 'xfsy01'">
      <div class="level-title">
        <h1>基础信息</h1>
      </div>
      <table class="table-ui">
        <tr>
          <td class="bbg-transparent">名称</td>
          <td colspan="2">{{ FIRERESOURCES_NAME }}</td>
        </tr>
        <tr>
          <td class="bbg-transparent">状态</td>
          <td colspan="2">{{ pd.STATE == '0' ? '正常' : '异常' }}</td>
        </tr>
        <tr>
          <td class="bbg-transparent">所属分公司</td>
          <td v-if="gangkou === '00004'" colspan="2"> 曹妃甸实业港务有限公司 </td>
          <td v-else colspan="2"> {{ pd.CORP_NAME }} </td>
        </tr>
      </table>
      <table class="table-ui">
        <tr v-for="(item) in pumpRoomList" :key="item.label" >
          <td class="bbg-transparent">{{ item.label }}</td>
          <td colspan="2">{{ item.value }}</td>
        </tr>
      </table>
    </div>
  </div>
</template>

<script>
import { requestFN } from '@/utils/request'
import moment from 'moment'
export default {
  props: {
    id: {
      type: String,
      default() {
        return ''
      }
    },
    type: {
      type: String,
      default() {
        return ''
      }
    },
    gangkou: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      config: config,
      FIRERESOURCES_NAME: '',
      pd: {},
      images: [],
      pumpRoomList: []
    }
  },
  watch: {
    'id': function(now, old) {
      if (now) {
        this.getData()
      }
    }
  },
  created() {
    this.getData()
  },
  methods: {
    formatDate(date, format) {
      if (date) {
        return moment(date).format(format)
      } else {
        return ''
      }
    },
    getpic(ID) {
      requestFN(
        'imgfiles/listImgs',
        {
          FOREIGN_KEY: ID,
          GANGKOU: this.gangkou
        }
      ).then((data) => {
        this.images = data.imgs
      }).catch((e) => {
      })
    },
    getData() {
      requestFN(
        '/fireResources/getById',
        {
          FIRERESOURCES_ID: this.id,
          GANGKOU: this.gangkou
        }
      ).then((data) => {
        this.getpic(this.id)
        this.pumpRoomList = JSON.parse(data.pd.DESCR)
        this.FIRERESOURCES_NAME = data.pd.FIRERESOURCES_NAME
        this.pd = data.pd
      }).catch((e) => {
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.img {
  display: flex;

  .img_item {
    margin-left: 10px;

    &:first-child {
      margin-left: 0;
    }

    img {
      width: 200px;
      height: 200px;
    }
  }
}
</style>