qa-prevention-gwj-vue/src/views/emergen_cyrescue/emergency_map/components/baseTable.vue

<template>
  <div class="infomation_area">
    <div class="infomation_title" @click="clickIntoDutyInfoDialog">{{ titleType }}</div>
    <table v-if="(!isReservePlan) && useType === 'dutyInfo'" class="infomation_table" cellspacing="0">
      <thead class="infomation_table_thead">
        <tr class="infomation_table_thead_tr">
          <th class="infomation_table_th">姓名</th>
          <th class="infomation_table_th">电话</th>
        </tr>
      </thead>
      <tbody class="infomation_table_tbody">
        <tr v-for="(item, index) in showInfomationType" :key="index" class="infomation_table_tbody_tr">
          <td>{{ item.PEOPLE_NAME }}</td>
          <td>{{ item.PEOPLE_PHONE }}</td>
        </tr>
      </tbody>
    </table>

    <table v-if="(!isReservePlan) && useType === 'addressBook'" class="infomation_table" cellspacing="0">
      <thead class="infomation_table_thead">
        <tr class="infomation_table_thead_tr">
          <th class="infomation_table_th">姓名</th>
          <th class="infomation_table_th">电话</th>
          <th class="infomation_table_th">部门</th>
        </tr>
      </thead>
      <tbody class="infomation_table_tbody">
        <tr v-for="(item, index) in showInfomationType" :key="index" class="infomation_table_tbody_tr">
          <td>{{ item.NAME }}</td>
          <td>{{ item.MOVE_PHONE }}</td>
          <td>{{ item.DEPARTMENT }}</td>
        </tr>
      </tbody>
    </table>

    <div v-if="isReservePlan" class="reserve_plan">
      <div class="reserve_plan_title">应急预案名称: {{ info.reservePlan.PLANNAME }}</div>
      <div class="scroll-box">
        <ul class="reserve_plan_ul">
          <li>预案编码: {{ info.reservePlan.PLANCODE }}</li>
          <li>事件类型: {{ info.reservePlan.EVENTTYPE }}</li>
        </ul>
        <ul class="reserve_plan_ul">
          <li>预案类型: {{ info.reservePlan.PLANTYPE_NAME }}</li>
          <li>预案等级: {{ info.reservePlan.PLANGRADE }}</li>
        </ul>
        <ul class="reserve_plan_ul">
          <li>重点场所: {{ info.reservePlan.KEYPLACES_ID }}</li>
          <li>备注信息: {{ info.reservePlan.BZ }}</li>
        </ul>
        <ul class="reserve_plan_ul">
          <li>经度: {{ info.reservePlan.LON }}</li>
          <li>纬度: {{ info.reservePlan.LAT }}</li>
        </ul>
      </div>
    </div>

    <dialog-index :visible.sync="dutyInfoDialog.visible" />
  </div>
</template>

<script>
import dayjs from 'dayjs'
import DialogIndex from './dialog.vue'

export default {
  components: { DialogIndex },
  props: {
    useType: {
      type: String,
      required: true
    },
    isReservePlan: {
      type: Boolean,
      required: false,
      default: false
    },
    info: {
      type: Object,
      required: true
    }
  },
  data() {
    return {
      dutyInfoDialog: {
        visible: false,
        id: ''
      }
    }
  },
  computed: {
    titleType: {
      get: function() {
        switch (this.useType) {
          case 'dutyInfo': {
            return '值班信息'
          }
          case 'reservePlanInfo': {
            return '预案信息'
          }
          case 'addressBook': {
            return '通讯录'
          }
          default:
            return '标题'
        }
      }
    },
    phoneType: {
      get: function() {
        return this.useType === 'dutyInfo' ? '电话' : '手机号'
      }
    },
    showInfomationType: {
      get: function() {
        return this.useType === 'dutyInfo' ? this.info.dutyInfoData : this.info.addressBook
      }
    },
    formatTime: {
      get: function() {
        return dayjs(this.info.reservePlan.发布日期).format('YYYY-MM-DD')
      }
    }
  },
  methods: {
    clickIntoDutyInfoDialog() {
      this.dutyInfoDialog.visible = true
    }
  }
}
</script>

<style lang="scss" scoped>
.infomation_area {
  box-sizing: border-box;
  padding: 12px;

  .infomation_title {
    cursor: pointer;
    width: 100%;
    display: flex;
    align-items: center;
    padding-left: 51px;
    color: #ffffff;
    font-weight: 600;
    height: 45px;
    background-image: url('../../../../assets/map/emergency_rescue/navbg.png');
    background-repeat: no-repeat;
  }

  .infomation_table {
    width: 100%;

    .infomation_table_thead {
      height: 32px;
      color: #ffffff;
      background-image: linear-gradient(to right, rgba(255, 0, 0, 0), #0c305b, rgba(255, 0, 0, 0));

      .infomation_table_thead_tr {
        text-align: center;
        padding: 10px 0;

        &>th:nth-child(1) {
          transform: translateX(-8px);
        }

        &>th:nth-child(3) {
          transform: translateX(-15px);
        }
      }
    }

    .infomation_table_tbody {
      height: 32px;
      width: 100%;
      color: #ffffff;
      background: linear-gradient(90deg, rgba(44, 62, 80, 0) 20%, rgba(3, 39, 78, 0.75) 50%, rgba(3, 39, 78, 0) 80%);

      .infomation_table_tbody_tr {
        text-align: center;
        height: 34px;
        border-bottom: 1px solid rgba(3, 39, 78, 1);

        &>td:nth-child(1) {
          text-align: start;
          transform: translateX(21px);
        }

        &>td:nth-child(3) {
          transform: translateX(8px);
        }
      }
    }
  }

  .infomation_table .infomation_table_tbody {
    display: block;
    height: 155px;
    overflow-y: scroll;

    &::-webkit-scrollbar {
      display: none;
    }
  }

  .infomation_table .infomation_table_thead,
  .infomation_table_tbody .infomation_table_tbody_tr {
    text-align: center;
    display: table;
    width: 100%;
    table-layout: fixed;
  }

  .reserve_plan {
    display: flex;
    flex-direction: column;
    gap: 5px;
    justify-content: center;
    align-items: flex-start;
    padding: 8px;
    color: #ffffff;
    font-size: 15px;

    .reserve_plan_title {
      font-size: 16px;
      display: flex;
      width: 100%;
      height: 40px;
      border-bottom: 1px solid #0c2d53;
      justify-content: flex-start;
      align-items: center
    }

    .scroll-box {
      height: 145px;
      overflow-x: hidden;
      overflow-y: auto;

      &::-webkit-scrollbar {
        display: none;
      }

      .reserve_plan_ul {
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: 43px;
        border-bottom: 1px solid #0c2d53;
      }
    }
  }
}
</style>