大屏页面得修改

shuishen

2022-03-25 1ca8b42abcb41d14729000a357355b7e372660cb

大屏页面得修改

 src/App.vue

@@ -10,41 +10,11 @@
    name: 'App',
    data () {
        return {
            //   consoles: 1,
            //   consoles1: 1,
            cantdoits: false
        }
    },
    mounted () {
        const that = this

        // console.log(frames, 789456);
        // setInterval(function () {
        //   check();
        // }, 4000);
        // var check = function () {
        //   function doCheck(a) {
        //     if (("" + a / a)["length"] !== 1 || a % 20 === 0) {
        //       //   (function () {}["constructor"]("debugger")());
        //       console.log("已打开控制台1");
        //       that.consoles++;
        //       return;
        //     } else {
        //       //   (function () {}["constructor"]("debugger")());
        //       //   console.log("已打开控制台2");
        //       //   return;
        //       that.consoles++;
        //     }
        //     doCheck(++a);
        //   }
        //   try {
        //     doCheck(0);
        //   } catch (err) {}
        // };
        // check();
        // console.log(this.getQueryString("data"), "window.location");
        // var reg = new RegExp("(^|&)" + "data" + "=([^&]*)(&|$)");
        var data = {}
        var transmitData = {}

        var url = window.location.href

@@ -53,24 +23,15 @@
            var brr = arr[1].split('&')
            brr.forEach((item, index) => {
                var a = item.split('=')
                data[a[0]] = decodeURIComponent(a[1])
                transmitData[a[0]] = decodeURIComponent(a[1])
            })
            try {
                data = JSON.parse(data)
                transmitData = JSON.parse(transmitData)
            } catch (error) { }
        }

        this.$store.commit('set_urlParameterData', data) // 传入数据
        this.$store.commit('set_urlParameterData', transmitData) // 传入数据

        const d = {
            methods: 'goto',
            jd: 125.11111,
            wd: 25.555555
        }
        // console.log(
        //   "http://192.168.0.222:8080/#/mobileLayout/default?data=" +
        //     JSON.stringify(d)
        // );
        if (this._isMobile()) {
            this.cantdoits = true
            // 手机端
@@ -116,6 +77,7 @@
                })
        } else {
            // pc端
            // this.$router.replace('/large')
            this.$router.replace('/pcLayout')
        }
    },

 src/components/largeMap/index.vue

New file
@@ -0,0 +1,106 @@
/* eslint-disable camelcase */
<template>
    <div id="large-viewer-container" style="height: 100%; width: 100%"></div>
</template>
<script>
let largeViewer = null

export default {
    name: 'largeMap',
    data () {
        return {
            samllMapFlag: false
        }
    },
    mounted () {
        function generatePosition (num, isAdd) {
            const list = []
            for (let i = 0; i < num; i++) {
                const lng = 121.49536592256028 + Math.random() * 0.04 * (isAdd ? 1 : -1)
                const lat = 31.241616722278213 + Math.random() * 0.04 * (isAdd ? 1 : -1)
                list.push({ lng, lat })
            }
            return list
        }

        function initViewer () {
            largeViewer = new global.DC.Viewer('large-viewer-container', {
                contextOptions: {
                    webgl: {
                        stencil: true,
                        preserveDrawingBuffer: true
                    }
                }
            }).setOptions({
                // showAtmosphere: false, 大气层
                showMoon: false, // 月亮
                showSun: false, // 太阳
                skyBox: {
                    show: false
                },
                globe: {
                    baseColor: global.DC.Color.BLACK
                }
            })

            // const baseLayer = global.DC.ImageryLayerFactory.createBaiduImageryLayer({
            //     style: 'dark'
            // })
            // largeViewer.addBaseLayer(baseLayer, {
            //     iconUrl: 'examples/images/icon/midnight.png',
            //     name: '午夜蓝'
            // })

            const layerBuild = new global.DC.TilesetLayer('layerBuild').addTo(largeViewer)
            const build = new global.DC.Tileset(
                '//resource.dvgis.cn/data/3dtiles/ljz/tileset.json',
                { skipLevels: true }
            )
            const fs = `
                    varying vec3 v_positionEC;
                    void main(void){
                        vec4 position = czm_inverseModelView * vec4(v_positionEC,1); // 位置
                        float glowRange = 100.0; // 光环的移动范围(高度)
                        gl_FragColor = vec4(0.2,  0.5, 1.0, 1.0); // 颜色
                        gl_FragColor *= vec4(vec3(position.z / 100.0), 1.0); // 渐变
                        // 动态光环
                        float time = fract(czm_frameNumber / 360.0);
                        time = abs(time - 0.5) * 2.0;
                        float diff = step(0.005, abs( clamp(position.z / glowRange, 0.0, 1.0) - time));
                        gl_FragColor.rgb += gl_FragColor.rgb * (1.0 - diff);
                    }
                    `
            build.setCustomShader(fs)
            layerBuild.addOverlay(build)
            const layer = new global.DC.PrimitiveLayer('layer').addTo(largeViewer)
            let positions = generatePosition(50, true)
            positions = positions.concat(generatePosition(50))
            positions.forEach(item => {
                const position = global.DC.Position.fromObject(item)
                const end = position.copy()
                end.alt = 5000 * Math.random()
                const line = new global.DC.FlowLinePrimitive([position, end], 0.5)
                line.setStyle({
                    speed: 6 * Math.random(),
                    color: global.DC.Color.fromCssColorString('rgb(141,172,172)'),
                    percent: 0.1,
                    gradient: 0.01
                })
                layer.addOverlay(line)
            })
            largeViewer.zoomToPosition('121.4941629,31.2091462,1859.56,0,-28.71')

            // 视角旋转
            largeViewer.scene.screenSpaceCameraController.enableTilt = false
        }

        global.DC.ready(initViewer)
    },
    methods: {

    }
}
</script>

<style lang="scss" scope>
</style>

 src/components/map/components/dimension.vue

@@ -207,6 +207,40 @@
                            // minimumLevel: 19
                        }))

                    // global.viewer.imageryLayers.addImageryProvider(
                    //     new global.DC.Namespace.Cesium.WebMapTileServiceImageryProvider({
                    //         url: 'http://www.tdtfz.com/OneMapServer/rest/services/fzsw2019/MapServer/WMTS',
                    //         layer: 'fzsw2019',
                    //         style: 'default',
                    //         tileMatrixSetID: 'default028mm',
                    //         format: 'image/jpgpng',
                    //         tilingScheme: new global.DC.Namespace.Cesium.GeographicTilingScheme(),
                    //         maximumLevel: 19,
                    //         tileMatrixLabels: [
                    //             '0',
                    //             '1',
                    //             '2',
                    //             '3',
                    //             '4',
                    //             '5',
                    //             '6',
                    //             '7',
                    //             '8',
                    //             '9',
                    //             '10',
                    //             '11',
                    //             '12',
                    //             '13',
                    //             '14',
                    //             '15',
                    //             '16',
                    //             '17',
                    //             '18',
                    //             '19'
                    //         ]
                    //     })
                    // )

                    // wallLayer = new global.DC.VectorLayer('wallLayer')
                    // global.viewer.addLayer(wallLayer)


 src/components/map/index.vue

@@ -15,18 +15,18 @@

        <div
            style="
        position: fixed;
        left: 4px;
        bottom: 4px;
        width: 80px;
        line-height: 24px;
        text-align: center;
        color: #fff;
        font-size: 14px;
        border-radius: 4px;
        background: #2196f3ed;
        z-index: 11;
      "
                position: fixed;
                left: 4px;
                bottom: 4px;
                width: 80px;
                line-height: 24px;
                text-align: center;
                color: #fff;
                font-size: 14px;
                border-radius: 4px;
                background: #2196f3ed;
                z-index: 11;
            "
        >智慧校区</div>

        <dimension />

 src/pcviews/large/index.vue

New file
@@ -0,0 +1,266 @@
<template>
    <div class="large-container">
        <div class="map-container">
            <largeMap ref="largeMap" />
        </div>

        <div class="header-container">
            <div class="title">
                <img src="/img/logo.png" class="logo deblurring" alt />
                智慧校园大数据可视化平台
                <i class="one-line"></i>
                <i class="two-line"></i>
                <i class="three-line"></i>
            </div>
        </div>
        <div class="left-container">
            <div class="top" id="LeftTop"></div>
            <div class="center" id="LeftCenter"></div>
            <div class="bottom" id="LeftBottom"></div>
        </div>
        <div class="right-container">
            <div class="top" id="RightTop"></div>
            <div class="center"></div>
            <div class="bottom"></div>
        </div>
    </div>
</template>

<script>

export default {
    components: {

    },
    data () {
        return {

        }
    },
    created () {
    },
    mounted () {
        this.$nextTick(() => {
            this.initPillerOne()
            this.initPillerTwo()
            this.ecartsInitCircle()
        })
    },
    methods: {
        initPillerOne () {
            // 柱形图
            // 因为初始化echarts 的时候，需要指定的容器 id='main'
            this.$echarts.init(document.getElementById('LeftTop')).setOption({
                xAxis: {
                    type: 'category',
                    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
                },
                yAxis: {
                    type: 'value'
                },
                series: [{
                    data: [120, 200, 150, 80, 70, 110, 130],
                    type: 'bar',
                    showBackground: true,
                    backgroundStyle: {
                        color: 'rgba(220, 220, 220, 0.8)'
                    }
                }]
            })
        },
        initPillerTwo () {
            this.$echarts.init(document.getElementById('RightTop')).setOption({
                title: {
                    text: 'World Population'
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow'
                    }
                },
                legend: {},
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis: {
                    type: 'value',
                    boundaryGap: [0, 0.01]
                },
                yAxis: {
                    type: 'category',
                    data: ['Brazil', 'Indonesia', 'USA', 'India', 'China', 'World']
                },
                series: [
                    {
                        name: '2011',
                        type: 'bar',
                        data: [18203, 23489, 29034, 104970, 131744, 630230]
                    },
                    {
                        name: '2012',
                        type: 'bar',
                        data: [19325, 23438, 31000, 121594, 134141, 681807]
                    }
                ]
            })
        },
        ecartsInitCircle () {
            this.$echarts.init(document.getElementById('LeftCenter')).setOption({
                title: {
                    text: 'Referer of a Website',
                    subtext: 'Fake Data',
                    left: 'center'
                },
                tooltip: {
                    trigger: 'item'
                },
                legend: {
                    orient: 'vertical',
                    left: 'left'
                },
                series: [
                    {
                        name: 'Access From',
                        type: 'pie',
                        radius: '50%',
                        data: [
                            { value: 1048, name: 'Search Engine' },
                            { value: 735, name: 'Direct' },
                            { value: 580, name: 'Email' },
                            { value: 484, name: 'Union Ads' },
                            { value: 300, name: 'Video Ads' }
                        ],
                        emphasis: {
                            itemStyle: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        }
                    }
                ]
            })
        }
    }
}
</script>

<style scoped lang='scss'>
.large-container {
    position: relative;
    height: 100%;
    background: #1a1f33;

    .header-container {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 120px;
        line-height: 120px;
        z-index: 11;

        .title {
            position: absolute;
            top: 0;
            left: 80px;
            right: 40%;
            width: 60%;
            height: 100%;
            color: #5ce7ff;
            font-size: 40px;
            // border-bottom: 2px solid #4b6073;

            .logo {
                width: 60px;
                vertical-align: middle;
            }

            .one-line {
                position: absolute;
                bottom: 3px;
                left: 0;
                width: 0;
                border: 2px solid #5ce7ff;
                height: 50px;
                transform: rotate(-53.13deg);
                transform-origin: bottom right;
                border-radius: 100%;
            }

            .two-line {
                position: absolute;
                bottom: 3px;
                left: -40px;
                width: 0;
                border: 2px solid #5ce7ff;
                height: 50px;
                transform: rotate(-53.13deg);
                transform-origin: bottom right;
                border-radius: 100%;
            }

            .three-line {
                position: absolute;
                bottom: 0;
                left: 1px;
                right: 0px;
                width: 100%;
                border: 2px solid #5ce7ff;
                height: 0;
                border-radius: 100%;
            }
        }
    }

    .map-container {
        width: 100%;
        height: 100%;
    }

    .left-container {
        position: absolute;
        top: 130px;
        left: 10px;
        width: 24%;
        height: calc(100% - 140px);
        // transform: rotateY(10deg);
        // transform-origin: left center;
    }

    .right-container {
        position: absolute;
        top: 130px;
        right: 10px;
        width: 24%;
        height: calc(100% - 140px);
    }

    .left-container,
    .right-container {
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        & > div {
            flex: 1;
            margin: 5px 0;
        }

        .top {
            background: rgba(248, 248, 248, 0.75);
        }

        .center {
            background: rgba(248, 248, 248, 0.75);
        }

        .bottom {
            background: rgba(248, 248, 248, 0.75);
        }
    }
}
</style>

 src/router/page/index.js

@@ -2,12 +2,14 @@
 * @Author: Morpheus
 * @Date: 2021-04-30 14:12:09
 * @Last Modified by: Morpheus
 * @Last Modified time: 2022-02-14 15:09:19
 * @Last Modified time: 2022-03-24 15:25:40
 */

import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)

const large = () => import('../../pcviews/large/index.vue')

const pcLayout = () => import('../../pcLayout/index.vue')
const pcHome = () => import('../../pcviews/home/index.vue')
@@ -53,8 +55,15 @@
const pcToolLayerManage = () => import('../../pcviews/tool/layer-manage.vue')

const routes = [
    // 大屏页面
    {
        path: '/large',
        meta: {
            title: '大屏页面'
        },
        component: large
    },
    // pc端

    {
        path: '/pcLayout',
        redirect: '/pcLayout/default',