emcp/frontend/src/views/switchQuantity/index.vue

<script setup lang="ts">
import { computed, onMounted } from 'vue'
import { usePlatformStore } from '../../stores/platform'

const { state, bootstrap } = usePlatformStore()

const inputStates = computed(() => {
  if (!state.realtime?.switch) {
    return Array(12).fill(false)
  }
  return Array.from({ length: 12 }, (_, i) => {
    const key = `input_${i + 1}`
    return state.realtime!.switch[key] === 1
  })
})

const outputStates = computed(() => {
  if (!state.realtime?.switch) {
    return Array(12).fill(false)
  }
  return Array.from({ length: 12 }, (_, i) => {
    const key = `output_${i + 1}`
    return state.realtime!.switch[key] === 1
  })
})

const tableData = computed(() => {
  return state.alarms.slice(0, 10).map((alarm, index) => ({
    name: '线路一',
    typeName: alarm.type,
    content: alarm.content,
    time: alarm.time,
    ts: '0',
  }))
})

onMounted(() => {
  void bootstrap()
})
</script>

<template>
    <div class="switch-container">
        <div class="switch-container-top">
            <div class="top-title">开入/开出状态</div>
            <div class="container-top-box">
                <div class="state-column">
                    <div class="column-title">
                        <div class="column-title-icon"></div>
                        <div class="column-title-text">开入状态</div>
                    </div>
                    <div class="state-grid">
                        <div v-for="(state, index) in inputStates" :key="`input-${index}`" class="state-item">
                            <img v-if="state" src="@/assets/images/menuicon/off.png" style="width: 34px; height: 36px;"
                                alt="">
                            <img v-else src="@/assets/images/menuicon/on.png" alt="" style="width: 34px; height: 36px;">
                            <div class="label">开入{{ index + 1 }}</div>
                        </div>
                    </div>
                </div>
                <div class="state-column">
                    <div class="column-title">
                        <div class="column-title-icon"></div>
                        <div class="column-title-text">开出状态</div>
                    </div>
                    <div class="state-grid">
                        <div v-for="(state, index) in outputStates" :key="`output-${index}`" class="state-item">
                            <img v-if="state" src="@/assets/images/menuicon/off2.png" style="width: 46px; height: 24px;"
                                alt="">
                            <img v-else src="@/assets/images/menuicon/on2.png" style="width: 46px; height: 24px;"
                                alt="">
                            <div class="label">开出{{ index + 1 }}</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="switch-container-bottom">
            <div class="top-title">报警信息</div>
            <div class="container-bottom-box">
                <div v-for="(item, index) in tableData" :key="index" class="container-bottom-box-line1">
                    <div style="width: 8%; text-align: center;">{{ index + 1 }}</div>
                    <div style="width: 23%; text-align: center;">{{ item.name }}</div>
                    <div style="width: 15%; text-align: center;">{{ item.typeName }}</div>
                    <div style="width: 25%; text-align: center;">{{ item.content }}</div>
                    <div style="width: 20%; text-align: center;">{{ item.time }}</div>
                    <div style="width: 10%; text-align: center;">{{ item.ts }}ms</div>
                </div>
            </div>
        </div>
    </div>
</template>

<style scoped lang="scss">
.switch-container {
    width: 100%;
    height: 100%;
    padding: 20px;

    .top-title {
        font-weight: 700;
        font-style: normal;
        font-size: 16px;
        color: #363636;
        margin-bottom: 15px;
    }

    .switch-container-top {
        width: 100%;
        margin-bottom: 25px;

        .container-top-box {
            width: 100%;
            height: 458px;
            padding: 20px;
            background: #ffffff;
            box-shadow: 0px 0px 10px rgba(219, 225, 236, 1);
            border-radius: 4px;
            display: flex;
            gap: 40px;

            .state-column {
                flex: 1;
                display: flex;
                flex-direction: column;

                .column-title {
                    font-size: 18px;
                    font-weight: 700;
                    color: #363636;
                    margin-bottom: 20px;
                    display: flex;
                    align-items: center;

                    .column-title-icon {
                        width: 4px;
                        height: 14px;
                        background-color: #409EFF;
                    }

                    .column-title-text {
                        font-size: 18px;
                        font-weight: 700;
                        color: #363636;
                        margin-left: 10px;
                    }
                }

                .state-grid {
                    display: grid;
                    grid-template-columns: repeat(4, 1fr);
                    padding: 20px 10px;
                    background-color: rgba(249, 250, 254, 1);
                    height: 380px;
                    align-items: center;
                    justify-items: center;
                    gap: 0;

                    .state-item {
                        display: flex;
                        flex-direction: column;
                        align-items: center;
                        justify-content: space-between;
                        height: 65px;
                        .label {
                            font-size: 14px;
                            color: #363636;
                            height: 20px;
                            line-height: 20px;
                            // 文字居中对齐
                            text-align: center;
                            display: flex;
                            align-items: center;
                            justify-content: center;
                        }
                    }
                }
            }
        }
    }

    .switch-container-bottom {
        width: 100%;

        .container-bottom-box {
            width: 100%;
            height: calc(100vh - 660px);
            padding: 20px;
            background: #ffffff;
            box-shadow: 0px 0px 10px rgba(219, 225, 236, 1);
            border-radius: 4px;

            .container-bottom-box-line1 {
                display: flex;
                align-items: center;
                color: #787878;
                height: 40px;
                font-size: 14px;
                color: #505050;
                border-bottom: 1px solid #f2f2f2;

                &:last-child {
                    border-bottom: none;
                }
            }
        }
    }
}
</style>