city-gather/src/subPack-charge/chargeDetail/chargeDetail.vue

<script setup lang="ts">
import router from '@/router'
import { StaticUrl } from '@/config'

const { statusBarHeight, MenuButtonHeight } = storeToRefs(useSysStore())
const activeTab = ref('price')
definePage({
  name: 'charge-detail',
  islogin: false,
  style: {
    navigationBarTitleText: '充电详情',
    navigationStyle: 'custom',
  },
})
const stationId = ref()
onLoad((options: any) => {
  stationId.value = Number(options.stationId)
  activeTab.value = options.type
})
onMounted(() => {
  getPricesList()
  getConnectorsList()
})

const priceDetail = ref<Api.chargeStationPrices>()
async function getPricesList() {
  const res = await Apis.charge.prices({ data: { stationId: stationId.value } })
  priceDetail.value = res.data
}

const connectorsDetail = ref<Api.chargeStationConnectors>()
async function getConnectorsList() {
  const res = await Apis.charge.connectors({ data: { stationId: stationId.value } })
  connectorsDetail.value = res.data
}

/**
 * 处理站点设备状态
 *status 状态：0-离线 1-空闲 2-占用
 */
function getStatusImageByStatus(deviceStatus: number) {
  switch (deviceStatus) {
    case 1: // 空闲
      return 'kx'
    case 2: // 占用
      return 'zy'
    case 0: // 离线
      return 'lx'
    default:
      return 'unknown'
  }
}
// 切换选项卡的方法
function switchTab(tab: string) {
  activeTab.value = tab
}

// 计算样式的方法
function getTabStyle(tab: string) {
  return activeTab.value === tab
    ? { background: '#9ED605', color: '#FFF' }
    : {}
}
</script>

<template>
  <view class="charge-detail-page min-h-screen bg-[linear-gradient(90deg,#F1FECC_0%,#EAFEFA_100%)]">
    <wd-navbar
      title="充电详情" custom-style="background: linear-gradient(90deg, #F1FECC 0%, #EAFEFA 100%);"
      :bordered="false" :z-index="999" safe-area-inset-top left-arrow fixed @click-left="router.back()"
    />
    <view :style="{ paddingTop: `${(Number(statusBarHeight) || 44) + MenuButtonHeight + 12}px` }" />
    <view class="content-page box-border px24rpx">
      <view class="flex items-center gap-24rpx">
        <view>
          <view class="text-32rpx font-bold">
            {{ priceDetail?.stationName }}
          </view>
          <view class="mt-16rpx text-24rpx text-#AAA">
            {{ priceDetail?.tips || '--' }}
          </view>
        </view>
        <view>
          <image
            class="h-132rpx w-140rpx"
            :src="`${StaticUrl}/site-name-icon.png`"
          />
        </view>
      </view>
      <view class="items-centerrounded-16rpx mt-20rpx flex bg-#FFF p-20rpx">
        <view class="w-230rpx text-center">
          <view class="text-32rpx text-#9ED605 font-bold">
            {{ connectorsDetail?.idleCount }}
          </view>
          <view class="text-24rpx font-500">
            空闲
          </view>
        </view>
        <view class="h-76rpx w-2rpx bg-#F0F0F0" />
        <view class="w-230rpx text-center">
          <view class="text-32rpx text-#9ED605 font-bold">
            {{ connectorsDetail?.occupiedCount }}
          </view>
          <view class="text-24rpx font-500">
            占用
          </view>
        </view>
        <view class="h-76rpx w-2rpx bg-#F0F0F0" />
        <view class="w-230rpx text-center">
          <view class="text-32rpx text-#9ED605 font-bold">
            {{ connectorsDetail?.offlineCount }}
          </view>
          <view class="text-24rpx font-500">
            离线
          </view>
        </view>
      </view>
      <view class="mt-28rpx">
        <view class="flex items-center justify-between rounded-42rpx bg-#FFF p-6rpx">
          <view
            class="h-80rpx w-348rpx rounded-60rpx text-center line-height-[80rpx]" :style="getTabStyle('price')"
            @click="switchTab('price')"
          >
            电站价格
          </view>
          <view
            class="h-80rpx w-348rpx rounded-60rpx text-center line-height-[80rpx]" :style="getTabStyle('terminal')"
            @click="switchTab('terminal')"
          >
            充电终端
          </view>
        </view>
      </view>
      <view v-if="activeTab == 'price'">
        <view v-for="item in priceDetail?.priceList" :key="item.timePeriod" class="mt-20rpx rounded-16rpx bg-#FFF p-24rpx" :style="{ border: item.currentPeriod ? '2rpx solid #9ED605' : '' }">
          <view class="relative flex items-center justify-between">
            <view class="flex items-center gap-20rpx">
              <view
                class="h-40rpx w-40rpx rounded-8rpx bg-#CCC text-center text-28rpx text-#FFF font-bold line-height-[40rpx]"
              >
                {{ item.periodFlagName }}
              </view>
              <view class="text-28rpx font-bold">
                {{ item.timePeriod }}
              </view>
            </view>
            <view
              v-if="item.currentPeriod"
              class="absolute h-40rpx w-152rpx rounded-[0_16rpx_0_16rpx] bg-[linear-gradient(99deg,#D2F670_0%,#9ED605_100%)] text-center text-28rpx text-#FFF font-600 -right-24rpx -top-24rpx"
            >
              当前时段
            </view>
          </view>
          <view class="mt-24rpx rounded-16rpx bg-#F6F6F6 p-20rpx">
            <view class="flex items-center justify-between">
              <view class="text-24rpx text-#222222">
                抵扣券电价
              </view>
              <view class="text-24rpx" :style="{ color: item.currentPeriod ? '#FF6464' : '', fontWeight: item.currentPeriod ? '800' : '' }">
                <text>{{ item.totalPrice }}</text>
                <text class="text-#AAA">
                  元/度
                </text>
              </view>
            </view>
          </view>
        </view>
      </view>
      <view v-if="activeTab == 'terminal'">
        <view v-for="item in connectorsDetail?.connectorList" :key="item.connectorId" class="mt-20rpx flex items-center gap-20rpx rounded-16rpx bg-#FFF p-20rpx">
          <view
            class="h-116rpx w-116rpx text-center line-height-[116rpx]"
            :style="{ backgroundImage: `url(${StaticUrl}/site-status-${getStatusImageByStatus(item.status)}.png)`, backgroundSize: 'cover', backgroundPosition: 'center' }"
          >
            <view class="text-24rpx font-bold">
              {{ item.statusName }}
            </view>
          </view>
          <view>
            <view class="text-bold text-28rpx">
              {{ item.connectorName }}
            </view>
            <view class="mt-4rpx text-24rpx text-#AAA">
              电类分类：{{ item.equipmentType }}
            </view>
            <view class="mt-4rpx w-400rpx overflow-hidden truncate whitespace-nowrap text-24rpx text-#AAA">
              终端编号：{{ item.connectorCode }}
            </view>
          </view>
        </view>
      </view>
    </view>
    <view class="h-180rpx" />
    <view class="fixed bottom-66rpx left-24rpx h-100rpx w-702rpx rounded-16rpx bg-[linear-gradient(90deg,#DBFC81_0%,#9ED605_100%)] text-center text-28rpx font-800 line-height-[100rpx] shadow-[inset_0rpx_6rpx_20rpx_2rpx_#FFFFFF]">
      扫码充电
    </view>
  </view>
</template>

<style lang="scss" scoped></style>