bxztApp/packages/screen/src/views/cockpit/components/EmergencyResources.vue

<template>
  <div class="emergency-resources">
    <div class="panel-header">
      <span class="title">应急资源</span>
    </div>

    <!-- 资源列表 -->
    <div class="resource-table">
      <div class="table-header">
        <span>所属区县</span>
        <span>服务站点</span>
        <span>应急物资</span>
        <span>应急设备</span>
      </div>

      <div
        v-for="(resource, index) in resources"
        :key="resource.id"
        class="table-row"
        :class="{ 'row-alt': index % 2 === 0 }"
      >
        <div class="row-number">{{ index + 1 }}</div>
        <span class="district-name">{{ resource.name }}</span>
        <span class="count green">{{ resource.stations }}</span>
        <span class="count orange">{{ resource.supplies }}</span>
        <div class="equipment-cell">
          <span class="count" :class="resource.equipmentClass">{{ resource.equipment }}</span>
          <img
            v-if="resource.hasAlert"
            src="../assets/img/emergency-alert-icon.png"
            alt="alert"
            class="alert-icon"
          />
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'

const resources = ref([
  {
    id: 1,
    name: '万州区',
    stations: 32,
    supplies: 32,
    equipment: 25,
    equipmentClass: 'red',
    hasAlert: true
  },
  {
    id: 2,
    name: '城口区',
    stations: 11,
    supplies: 11,
    equipment: 15,
    equipmentClass: 'red',
    hasAlert: true
  },
  {
    id: 3,
    name: '长寿区',
    stations: 136,
    supplies: 136,
    equipment: 12,
    equipmentClass: 'red',
    hasAlert: false
  },
  {
    id: 4,
    name: '涪陵区',
    stations: 35,
    supplies: 35,
    equipment: 12,
    equipmentClass: 'red',
    hasAlert: false
  },
  {
    id: 5,
    name: '合川区',
    stations: 46,
    supplies: 46,
    equipment: 12,
    equipmentClass: 'red',
    hasAlert: false
  },
  {
    id: 6,
    name: '永川区',
    stations: 35,
    supplies: 35,
    equipment: 12,
    equipmentClass: 'red',
    hasAlert: false
  }
])
</script>

<style scoped lang="less">
.emergency-resources {
  background: url(../assets/img/emergency-panel-bg.png) no-repeat;
  background-size: 100% 100%;
  padding: 20px 30px;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.panel-header {
  position: relative;
  width: 293px;
  height: 49px;
  background: url(../assets/img/common-panel-header-bg.png) no-repeat;
  background-size: 100% 100%;
  display: flex;
  align-items: center;
  padding-left: 24px;
  margin-bottom: 30px;

  .title {
    color: rgba(255, 255, 255, 1);
    font-size: 22px;
    font-family: SourceHanSansCN-Medium, sans-serif;
    font-weight: 500;
  }
}

.resource-table {
  flex: 1;
  display: flex;
  flex-direction: column;

  .table-header {
    height: 35px;
    background: url(../assets/img/emergency-table-header-bg.png) no-repeat;
    background-size: 100% 100%;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    align-items: center;
    text-align: center;
    color: rgba(255, 255, 255, 1);
    font-size: 16px;
    font-family: SourceHanSansCN-Medium, sans-serif;
    font-weight: 500;
    margin-bottom: 5px;
  }

  .table-row {
    height: 35px;
    display: grid;
    grid-template-columns: 35px 1fr 1fr 1fr 1fr;
    align-items: center;
    gap: 10px;
    color: rgba(255, 255, 255, 1);
    font-size: 14px;
    font-family: PingFangSC-Medium, sans-serif;
    font-weight: 500;

    &.row-alt {
      background: url(../assets/img/common-table-row-bg.png) no-repeat;
      background-size: 100% 100%;
    }

    &:not(.row-alt) {
      background: url(../assets/img/common-table-row-bg-alt.png) no-repeat;
      background-size: 100% 100%;
    }

    .row-number {
      width: 35px;
      height: 35px;
      display: flex;
      align-items: center;
      justify-content: center;
      background-color: rgba(28, 161, 255, 0.44);
      color: rgba(255, 255, 255, 1);
      font-size: 14px;
      font-family: FZZYJW--GB1-0, sans-serif;
    }

    &:not(.row-alt) .row-number {
      background-color: rgba(28, 161, 255, 0.2);
    }

    .district-name {
      text-align: left;
    }

    .count {
      text-align: center;
      font-family: PingFangSC-Semibold, sans-serif;
      font-weight: 600;
      font-size: 14px;

      &.green {
        color: rgba(17, 187, 119, 1);
      }

      &.orange {
        color: rgba(255, 128, 11, 1);
      }

      &.red {
        color: rgba(255, 6, 36, 1);
      }
    }

    .equipment-cell {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 5px;

      .alert-icon {
        width: 10px;
        height: 10px;
      }
    }
  }
}
</style>