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 class="table-body">
        <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.qxmc }}</span>
          <span class="count green">{{ resource.yhzCount }}</span>
          <span class="count orange">{{ resource.wzCount }}</span>
          <div class="equipment-cell">
            <span class="count" :class="resource.equipmentClass">{{ resource.sbCount }}</span>
            <img
              v-if="resource.hasAlert"
              src="../assets/img/emergency-alert-icon.png"
              alt="alert"
              class="alert-icon"
            />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { request } from '@shared/utils/request'

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
  }
])

// 请求后端接口 /district/statistics
const getDistrictStatistics = async () => {
  const res = await request({
    url: '/snow-ops-platform/district/statistics',
    method: 'GET'
  })
  console.log(res)
  if(res.code === '00000') {
    resources.value = res.data
  } else {
    console.log(res.message)
  }
}

onMounted(() => {
  getDistrictStatistics()
})

</script>

<style scoped lang="scss">
@use '@/styles/mixins.scss' as *;

.emergency-resources {
  background: url(../assets/img/emergency-panel-bg.png) no-repeat;
  background-size: 100% 100%;
  padding: vw(20) vw(30);
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

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

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

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

  .table-header {
    height: vh(35);
    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: fs(16);
    font-family: SourceHanSansCN-Medium, sans-serif;
    font-weight: 500;
    margin-bottom: vh(5);
  }

  .table-body {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: rgba(28, 161, 255, 0.4) transparent;

    &::-webkit-scrollbar {
      width: vw(4);
    }

    &::-webkit-scrollbar-track {
      background: transparent;
    }

    &::-webkit-scrollbar-thumb {
      background: rgba(28, 161, 255, 0.4);
      border-radius: vw(2);

      &:hover {
        background: rgba(28, 161, 255, 0.6);
      }
    }
  }

  .table-row {
    height: vh(35);
    display: grid;
    grid-template-columns: vw(35) 1fr 1fr 1fr 1fr;
    align-items: center;
    gap: vw(10);
    color: rgba(255, 255, 255, 1);
    font-size: fs(14);
    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: vw(35);
      height: vh(35);
      display: flex;
      align-items: center;
      justify-content: center;
      background-color: rgba(28, 161, 255, 0.44);
      color: rgba(255, 255, 255, 1);
      font-size: fs(14);
      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: fs(14);

      &.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: vw(5);

      .alert-icon {
        width: vw(10);
        height: vh(10);
      }
    }
  }
}
</style>