From 1ca8b42abcb41d14729000a357355b7e372660cb Mon Sep 17 00:00:00 2001
From: shuishen <1109946754@qq.com>
Date: Fri, 25 Mar 2022 10:37:10 +0800
Subject: [PATCH] 大屏页面得修改
---
src/router/page/index.js | 13 +
src/components/map/components/dimension.vue | 34 +++
src/pcviews/large/index.vue | 266 +++++++++++++++++++++++++++++
src/components/largeMap/index.vue | 106 +++++++++++
src/components/map/index.vue | 24 +-
src/App.vue | 48 ----
6 files changed, 434 insertions(+), 57 deletions(-)
diff --git a/src/App.vue b/src/App.vue
index fa16554..4dfe049 100644
--- a/src/App.vue
+++ b/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')
}
},
diff --git a/src/components/largeMap/index.vue b/src/components/largeMap/index.vue
new file mode 100644
index 0000000..35d12f3
--- /dev/null
+++ b/src/components/largeMap/index.vue
@@ -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>
diff --git a/src/components/map/components/dimension.vue b/src/components/map/components/dimension.vue
index 069e60b..4f209e9 100644
--- a/src/components/map/components/dimension.vue
+++ b/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)
diff --git a/src/components/map/index.vue b/src/components/map/index.vue
index 77c4c38..31e5896 100644
--- a/src/components/map/index.vue
+++ b/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 />
diff --git a/src/pcviews/large/index.vue b/src/pcviews/large/index.vue
new file mode 100644
index 0000000..dd121de
--- /dev/null
+++ b/src/pcviews/large/index.vue
@@ -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>
diff --git a/src/router/page/index.js b/src/router/page/index.js
index 672fc30..f6ef179 100644
--- a/src/router/page/index.js
+++ b/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',
--
Gitblit v1.9.3