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

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

const vm = Vue.createApp({});

vm.component('panel-object', {
    data() {
        return {
            panel_data: panel_data,
            right:right,
        }
    },
    template: `<div v-for="panel in panel_data"  class="col-md-6 col-lg-6 col-xl-4" >
        <section class="panel" v-if="right >= panel.right">
            <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 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>`
});