前書き

業界ソリューション

Baiduの砂糖視覚化ソリューション

https://sugar.baidu.com/home

Ali datav

https://data.aliyun.com/visual/datav

Tencent Cloud Atlas

https://cloud.tencent.com/product/yuntu

サイズ

現在、一般的な大画面のデザインは基本的に16：9または32：9のサイズです

設計草案

設計案に記載されている図面は、基本的に16：9、1920 * 1080です。

アダプティブサイズ

デザインドラフトによると、1920 * 1080のカット画像表示には問題はありませんが、それでも解決策が必要です。つまり、他のサイズのページと互換性がある必要があるため、適応型の解決策が必要です。

スケール+マージンスキーム

大画面のダッシュボードページのセットアップstyle="width: 1920px;height: 1080px;"
プロパティであり、scale適応的にスケーリングします。センタリングショーを実現するために
外層を通してmargin: 0 xxpx。

<div class="wrapper">
    <div class="container">
        <div class="dashboard-bg-image"></div>
        <div :style="marginStyle">
            <div style="position: relative;">
                <div class="dashboard-container" style="width: 1920px;height: 1080px;" :style="transformStyle">
                    <top-title :title.sync="title"></top-title>
                    <!-- left -->
                    <dashboard1></dashboard1>
                    <!-- right -->
                    <dashboard2></dashboard2>
                    <!-- right -->
                    <dashboard3></dashboard3>
                    <!-- right -->
                    <dashboard4></dashboard4>
                </div>
            </div>
        </div>
    </div>
</div>

.wrapper {
    
    
    height: 100%;
    width: 100%;
    position: relative;
}

.container {
    
    
    background-color: rgb(3, 12, 59);
    overflow: hidden;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}


.dashboard-bg-image {
    
    
    width: 100%;
    height: 100%;
    position: absolute;
    background: url('../assets/bg2.jpg');
}

.dashboard-container {
    
    
    position: relative;
    user-select: none;
    width: 100%;
    height: 100%;
    transform-origin: 0 0;
    box-shadow: 0 0 10px 0 rgba(0, 0, 0, .5);
    transition: all .3s linear;
    overflow: hidden;
}

github

https://github.com/bosscheng/big-dashboard

https://bosscheng.github.io/big-dashboard/

vueに基づく視覚的な大画面開発

前書き