Newer
Older
sanitationFront / src / views / overview / components / popwindow.vue
<!--
 * @Description:
 * @Author: 王晓颖
 * @Date:
 -->
<template>
  <div class="info-window">
    <!--人员详情-->
    <div v-if="type=='staff'" class="info-header">人员详情</div>
    <div v-if="type=='staff'&&data!=null" class="info-body">
      <div>姓名:{{ data.name }}</div>
      <div>性别:{{ data.sexName }}</div>
      <div>联系电话:{{ data.tel }}</div>
      <div>人员类别:{{ data.postName }}</div>
      <div>负责片区:{{ data.responseArea }}</div>
    </div>
    <div v-if="type=='toilet'" class="info-header">公厕详情</div>
    <div v-if="type=='toilet'&&data!=null" class="info-body">
      <div>公厕编号:{{ data.code }}</div>
      <div>公厕名称:{{ data.name }}</div>
      <div>位置:{{ data.position }}</div>
      <div>建设单位:{{ data.owner }}</div>
      <div>负责人:{{ data.responsiblePerson }} ( {{ data.responsiblePersonTel }} )</div>
      <div>占地面积:{{ data.area }}(m²)</div>
      <div>建设时间:{{ data.ts }}</div>
    </div>
    <div v-if="type=='wastebin'" class="info-header">垃圾桶详情</div>
    <div v-if="type=='wastebin'&&data!=null" class="info-body">
      <div>垃圾桶编号:{{ data.code }}</div>
      <div>垃圾桶名称:{{ data.name }}</div>
      <div>位置:{{ data.position }}</div>
      <div>负责人:{{ data.responsiblePerson }} ( {{ data.responsiblePersonTel }} )</div>
      <div>启用时间:{{ data.ts }}</div>
    </div>
    <div v-if="type=='transferStation'" class="info-header">中转站详情</div>
    <div v-if="type=='transferStation'&&data!=null" class="info-body">
      <div>中转站编号:{{ data.code }}</div>
      <div>中转站名称:{{ data.name }}</div>
      <div>位置:{{ data.position }}</div>
      <div>建设单位:{{ data.owner }}</div>
      <div>负责人:{{ data.responsiblePerson }} ( {{ data.responsiblePersonTel }} )</div>
      <div>占地面积:{{ data.area }}平方米</div>
      <!--<div>最新垃圾量:{{ data.capacity }}立方米</div>-->
      <div>建设时间:{{ data.ts }}</div>
    </div>
    <div v-if="type=='car'" class="info-header">车辆详情</div>
    <div v-if="type=='car'&&data!=null" class="info-body">
      <div>车牌号:{{ data.carCode }}</div>
      <div>车辆描述:{{ data.description }}</div>
      <div>车辆类型:{{ data.carTypeName }}</div>
      <div>使用单位:{{ data.deptName }} </div>
      <div>车速:{{ data.speed }}km/h</div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Popwindow',
  props: {
    data: {
      type: Object,
      required: true
    }, // 数据
    type: {
      type: String,
      required: true
    }// 弹窗类型
  },
  data() {
    return {
    }
  },
  methods: {
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
  .info-window{
    max-width: 250px;
    width:230px;
    /*background-color: lightcyan;*/
    .info-header{
      padding: 0px 0px 5px 0px;
      line-height: 30px;
      font-size:16px;
      font-weight: bold;
      /*background-color: #eaf4ff;*/
    }
    .info-body{
      padding: 5px 0px 10px 0px;
      line-height: 23px;
      font-size: 14px;
    }
  }
</style>