qa-regulatory-gwj-vue/src/views/map/dialog/mkGateMachine.vue

<template>
  <div class="app-container print-work">
    <div v-if= "type !== 'CAMERA'" class="level-title">
      <h1>区域名称：{{ info.GATE_AREA_NAME }}</h1>
    </div>
    <table v-if= "type !== 'CAMERA'" class="table-ui">
      <tr>
        <td class="bbg-transparent">闸机名称</td>
        <td colspan="5">{{ info.GATE_MACHINE_NAME }}</td>
      </tr>
      <!--      <tr>-->
      <!--        <td class="bbg-transparent">型号</td>-->
      <!--        <td >{{ info.GATE_MACHINE_MODEL }}</td>-->
      <!--      </tr>-->
      <tr>
        <td class="bbg-transparent">今日进</td>
        <td>{{ type == 'CAR'? info.CAR_IN : info.PERSON_IN }}</td>
        <td class="bbg-transparent">今日出</td>
        <td>{{ type == 'CAR'? info.CAR_OUT : info.PERSON_OUT }}</td>
        <td class="bbg-transparent">当前滞留</td>
        <td>{{ type == 'CAR'? info.CAR_IN - info.CAR_OUT : info.PERSON_IN - info.PERSON_OUT }}</td>
      </tr>
      <tr v-if="type == 'PERSON'">
        <td colspan="6">
          <table class="table-ui">
            <tr>
              <td>卡号</td>
              <td>人员姓名</td>
              <td>刷卡时间</td>
              <td>状态</td>
            </tr>
            <tr v-for="(item,index) in recordAllList" :key="index">
              <td>{{ item.CARDTYPE }}</td>
              <td>{{ item.USERNAME }}</td>
              <td>{{ item.TIME }}</td>
              <td>
                <span v-if="item.STATE === 0">进入</span>
                <span v-if="item.STATE === 1">出去</span>
              </td>
            </tr>
          </table>
        </td>
      </tr>
    </table>
    <div v-if= "type == 'CAMERA'" class="level-title">
      <h1>摄像头名称：{{ info.VIDEONAME }}</h1>
    </div>
    <table v-if= "type == 'CAMERA'" class="table-ui">
      <tr>
        <td class="bbg-transparent">编码</td>
        <td >{{ info.CODE }}</td>
      </tr>
    </table>
    <div class="video">
      <video-play v-if="type === 'CAMERA' && info.GATEVIDEO_ID" :id="info.GATEVIDEO_ID" :type="type" :gangkou="gangkou"/>
    </div>
  </div>
</template>

<script>
import { requestFN } from '@/utils/request'
import moment from 'moment'
import videoPlay from './video_play.vue'
export default {
  components: { videoPlay },
  props: {
    id: {
      type: String,
      default() {
        return ''
      }
    },
    type: {
      type: String,
      default() {
        return ''
      }
    },
    gangkou: {
      type: String,
      default: ''
    },
    corpId: {
      type: String,
      default() {
        return ''
      }
    }
  },
  data() {
    return {
      config: config,
      info: {},
      recordAllList: []
    }
  },

  created() {
    this.getData()
    this.getListData()
  },
  methods: {
    formatDate(date, format) {
      if (date) {
        return moment(date).format(format)
      } else {
        return ''
      }
    },
    getData() {
      requestFN(
        '/map/getGatesInAndOutNumById',
        {
          GATE_AREA_ID: this.id,
          TYPE: this.type,
          GANGKOU: this.gangkou,
          CORPINFO_ID: this.corpId
        }
      ).then((data) => {
        Object.assign(this.info, data.pd)
        if (this.type !== 'CAMERA') {
          Object.assign(this.info, data.pd.info)
          this.info.CAR_IN = 0
          this.info.CAR_OUT = 0
          this.info.PERSON_IN = 0
          this.info.PERSON_OUT = 0
          for (let i = 0; i < data.pd.varList.length; i++) {
            if (data.pd.varList[i].TYPE == 'CAR_IN') {
              this.info.CAR_IN = data.pd.varList[i].COUNT
            }
            if (data.pd.varList[i].TYPE == 'CAR_OUT') {
              this.info.CAR_OUT = data.pd.varList[i].COUNT
            }
            if (data.pd.varList[i].TYPE == 'PERSON_IN') {
              this.info.PERSON_IN = data.pd.varList[i].COUNT
            }
            if (data.pd.varList[i].TYPE == 'PERSON_OUT') {
              this.info.PERSON_OUT = data.pd.varList[i].COUNT
            }
          }
        }

        this.$forceUpdate()
      }).catch((e) => {
      })
    },
    getListData() {
      requestFN(
        '/map/getGatesInAndOutListById?showCount=10000&currentPage=1',
        {
          GATE_AREA_ID: this.id,
          TYPE: this.type,
          GANGKOU: this.gangkou,
          CORPINFO_ID: this.corpId
        }
      ).then((data) => {
        this.recordAllList = data.recordAllList
        this.$forceUpdate()
      }).catch((e) => {
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.video{
  margin-top: 20px;
}
</style>