ibms-dome/Frontend/dashboard.html


<div class="row d-flex justify-content-between mx-3 mt-3">
    <!-- 天氣圖 -->
    <div class="col-sm-12 col-xl-4">
        <img src="..\assets\img\clouds.png"
             class="img-fluid"
             style="min-height: 520px; background-color: aquamarine" />
    </div>

    <div class="col-sm-12 col-xl-4">
        <div class="row">
            <div class="col-sm-6 col-xl-6">
                <div class="p-3 bg-info rounded position-relative text-white">
                    <h3 class="display-6 d-block m-0">21.5k</h3>
                    <small class="m-0">users signed up</small>
                </div>
            </div>
            <div class="col-sm-6 col-xl-6">
                <div class="p-3 bg-warning rounded position-relative text-white">
                    <h3 class="display-6 d-block m-0">$10,203</h3>
                    <small class="m-0">Visual Index Figure</small>
                </div>
            </div>
        </div>
        <div class="col-lg-12 mt-4">
            <div class="card text-white bg-dark" style="min-height: 390px">
                <div class="card-header">昨日／今日用電比較</div>
                <div class="card-body">
                    <h5 class="card-title">Dark card title</h5>
                    <p class="card-text">
                        Some quick example text to build on the card title and make up the
                        bulk of the card's content.
                    </p>
                </div>
            </div>
        </div>
    </div>
    <div class="col-sm-12 col-xl-4">
        <div class="row">
            <div class="col-sm-6 col-xl-6">
                <div class="p-3 bg-success rounded position-relative text-white">
                    <h3 class="display-6 d-block m-0 fw-500">- 103.72</h3>
                    <small class="m-0">Offset Balance Ratio</small>
                </div>
            </div>
            <div class="col-sm-6 col-xl-6">
                <div class="p-3 bg-secondary rounded position-relative text-white">
                    <h3 class="display-6 d-block m-0 fw-500">+40%</h3>
                    <small class="m-0">Product level increase</small>
                </div>
            </div>
        </div>
        <div class="col-lg-12 mt-4">
            <div class="card text-white bg-dark" style="min-height: 390px">
                <div class="card-header">本週／上週用電比較</div>
                <div class="card-body">
                    <h5 class="card-title">Dark card title</h5>
                    <p class="card-text">
                        Some quick example text to build on the card title and make up the
                        bulk of the card's content.
                    </p>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- 按鈕組 卡片組 -->
<div class="row d-flex justify-content-between col mx-3 my-3">
    <!-- 按鈕組 -->
    <div class="col-sm-12 col-lg-8">
        <div class="row">
            <div class="btn-group btn-group-lg col-lg-3 mb-4"
                 v-for="btn in btns"
                 :key="btn">
                <button type="button" class="btn btn-secondary col-6">
                    <i :class="btn.icon"></i>
                </button>
                <button type="button" class="btn btn-secondary col-6">
                    
                </button>
            </div>
        </div>
    </div>

    <!-- 卡片組 -->
    <div class="col-sm-12 col-lg-4">
        <!-- 異常狀態 -->
        <div class="mb-1">
            <div class="card text-white bg-dark">
                <div class="card-header">異常狀態</div>
                <div class="card-body">
                    <h5 class="card-title">Dark card title</h5>
                    <p class="card-text">
                        Some quick example text to build on the card title and make up the
                        bulk of the card's content.
                    </p>
                </div>
            </div>
        </div>

        <!-- 工單進度 -->
        <div class="">
            <div class="card text-white bg-dark">
                <div class="card-header">工單進度</div>
                <div class="card-body">
                    <h5 class="card-title">Dark card title</h5>
                    <p class="card-text">
                        Some quick example text to build on the card title and make up the
                        bulk of the card's content.
                    </p>
                </div>
            </div>
        </div>
    </div>
</div>


<script>
    import { useStore } from 'vuex';
    export default {
        setup() {
            const store = useStore();

            return { store }
        },
        data() {
            return {
                btns: [
                    {
                        name: "照明系統",
                        icon: "fa-regular fa-lightbulb fa-2x",
                    },
                    {
                        name: "環境感測系統",
                        icon: "fa-solid fa-temperature-three-quarters fa-2x",
                    },
                    {
                        name: "電表系統",
                        icon: "fa-solid fa-bolt fa-2x",
                    },
                    {
                        name: "空調系統",
                        icon: "fa-solid fa-wind fa-2x",
                    },
                    {
                        name: "電梯系統",
                        icon: "fa-solid fa-elevator fa-2x",
                    },
                    {
                        name: "門禁系統",
                        icon: "fa-sharp fa-solid fa-door-closed fa-2x",
                    },
                    {
                        name: "照明系統",
                        icon: "fa-regular fa-lightbulb fa-2x",
                    },
                    {
                        name: "環境感測系統",
                        icon: "fa-solid fa-temperature-three-quarters fa-2x",
                    },
                    {
                        name: "電表系統",
                        icon: "fa-solid fa-bolt fa-2x",
                    },
                    {
                        name: "空調系統",
                        icon: "fa-solid fa-wind fa-2x",
                    },
                    {
                        name: "電梯系統",
                        icon: "fa-solid fa-elevator fa-2x",
                    },
                    {
                        name: "門禁系統",
                        icon: "fa-sharp fa-solid fa-door-closed fa-2x",
                    },
                ],
            };
        },
        created() {

        },
    };
</script>