Front-Page/script/js/vue-panel.js

var panel_data = [{
        image: "/Common/assets/images/bim.png",
        name: "BIM資源網",
        info: `BIM資源網提供元件庫、API庫以及樣版庫，使用git管理元件、API以及樣板及其之版本控制，可瀏覽所有元件、API及樣板的內容及其相關屬性，以利下載自己所需之檔案。`,
        buttons: [{
            name: "進入",
            url: "/BIM-Resource/home.php"
        }],
        target: "",
        right: 0,
    },
    {
        image: "/Common/assets/images/BIM-Monitor.png",
        name: "BIM監測網",
        info: `BIM監測查詢網的目標為監測工地在各開挖階段時的工地安全，以及是否會影響到周遭環境，利用監測儀器回傳的數據以及工地模型，以視覺化的模式回饋儀器回傳的數據，可根據有異數據進行會議討論，提出處理方案。`,
        buttons: [{
            name: "進入",
            url: "/BIM-Monitor/home.php"
        }],
        target: "",
        right: 0,
    },
    {
        image: "/Common/assets/images/db.png",
        name: "設計資料庫查詢系統",
        info: `<p>設計圖資料庫</p>`,
        buttons: [{
            name: "進入",
            url: "/DataBase/index.php"
        }],
        target: "",
        right: 1,

    },
    {
        image: "/Common/assets/images/ArcGIS.png",
        name: "ArcGIS 系統",
        info: `<p>地理資訊系統</p>`,
        buttons: [{
                name: "2D 地圖",
                url: "https://maaconsultants.maps.arcgis.com/apps/webappviewer/index.html?id=e95e23fbe1954895a5ded8e85972df77"
            },
            {
                name: "3D 地圖",
                url: "https://maaconsultants.maps.arcgis.com/apps/instant/3dviewer/index.html?appid=653b6a2c89db404dbcd3db359d151e0d"
            }
        ],
        target: "_blank",
        right: 1,
    },
    {
        image: "/Common/assets/images/profile.png",
        name: "帳號管理系統",
        info: `本系統用於帳號管理：<br>
            1.管理帳號密碼。<br>`,
        buttons: [{
            name: "進入",
            url: "/MyAccount/index.php"
        }],
        target: "",
        right: 1,
    },
    {
        image: "/Common/assets/images/permission.png",
        name: "權限管理系統",
        info: `本系統用於帳號權限管理：<br>
            1.管理部門帳號權限。<br>`,
        buttons: [{
            name: "進入",
            url: "/Authorization/index.php"
        }],
        target: "",
        right: 3,
    },
    {
        image: "/Common/assets/images/architect.png",
        name: "智慧施工查核系統",
        info: `施工查核系統為一個提升查核效率且適合內業與外業情境的視查核管理平台。`,
        buttons: [{
            name: "進入",
            url: "http://125.227.151.69/2000R-02/#/signin"
        }],
        target: "_blank",
        right: 3,
    }
]

const vm = Vue.createApp({});

vm.component('panel-row', {
    data() {
        return {
            panel_data: panelGroup,
        }
    },
    template: `<div v-for="rows in panel_data" class="row">
                    <panel-object v-for="row in rows" :panel="row"></panel-object>
                </div>`
});

vm.component('panel-object', {
    props: {
        panel: Array,
    },
    template: `<div class="col-md-6 col-lg-6 col-xl-4">
        <section class="panel">
            <header class="panel-heading bg-primary">
                <div class="panel-heading-profile-picture">
                    <img v-bind:src="panel.image" height="75px" alt="BIM">
                </div>
            </header>
            <div class="panel-body">
                <div class="panel-body-title">
                    <h4 class="text-semibold mt-sm">{{panel.name}}</h4>
                    <hr class="solid short">
                    <a :target="panel.target" v-for="button in panel.buttons" v-bind:href="button.url"><button type="button" class="mb-xs mt-xs mr-xs btn btn-primary">{{button.name}}</button></a>                    
                </div>
                <div class="panel-body-info" v-html="panel.info" hidden></div>
            </div>
        </section>
    </div>`
});