From af8e5d35d64f9ca894cd933d0cfbea8f067abcbf Mon Sep 17 00:00:00 2001
From: TreeWish <1131093754@qq.com>
Date: 星期四, 16 二月 2023 09:41:19 +0800
Subject: [PATCH] '一张图页面整体编写'
---
vue.config.js | 16
src/components/Screen/top.vue | 145 ++
src/assets/img/Screen/bigST.png | 0
src/assets/img/Screen/leftArrow.png | 0
src/assets/img/Screen/bottombg.png | 0
src/components/Screen/bottom.vue | 194 +++
src/assets/img/Screen/centerbtnc.png | 0
src/views/Thematic/index.vue | 1025 +-----------------
src/assets/img/Screen/logobg.png | 0
src/assets/img/Screen/btnc.png | 0
public/SmartEarthSDK/Workers/path/ProjectPath.html | 461 ++++++++
src/assets/img/Screen/rightArrow.png | 0
src/components/Screen/ProjectTree.vue | 252 ++++
src/components/Screen/left.vue | 82 +
src/components/Screen/mapsdk.vue | 88 +
src/assets/img/Screen/btnbg.png | 0
src/components/Screen/right.vue | 82 +
src/assets/img/Screen/ptree.png | 0
src/assets/img/Screen/centerbtn.png | 0
src/assets/img/Screen/return.png | 0
src/assets/img/Screen/yximg.png | 0
src/views/Tools/LayerTree.vue | 1
src/assets/img/Screen/chartbg.png | 0
src/main.js | 1
src/views/Thematic/index1.vue | 977 +++++++++++++++++
package.json | 1
src/assets/img/Screen/bdimg.png | 0
27 files changed, 2,365 insertions(+), 960 deletions(-)
diff --git a/package.json b/package.json
index 45359f6..b6c3811 100644
--- a/package.json
+++ b/package.json
@@ -10,6 +10,7 @@
},
"dependencies": {
"@turf/turf": "^6.5.0",
+ "animate.css": "^4.1.1",
"aws-sdk": "^2.963.0",
"axios": "^0.21.1",
"cesium": "^1.84.0",
diff --git a/public/SmartEarthSDK/Workers/path/ProjectPath.html b/public/SmartEarthSDK/Workers/path/ProjectPath.html
new file mode 100644
index 0000000..e81bd29
--- /dev/null
+++ b/public/SmartEarthSDK/Workers/path/ProjectPath.html
@@ -0,0 +1,461 @@
+锘�<!DOCTYPE html>
+<html lang="en">
+
+<head>
+ <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+ <meta name="viewport"
+ content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
+ <title>宸ョ▼宸℃</title>
+ <link rel="stylesheet" href="../layui/css/layui.css">
+ <style>
+ html,
+ body,
+ .layui-prop {
+ background-color: rgba(0, 0, 0, 0);
+ height: 100%;
+ color: #fff;
+ overflow-y: auto;
+ overflow-x: hidden;
+ }
+
+ .layui-prop::-webkit-scrollbar {
+ /*婊氬姩鏉℃暣浣撴牱寮�*/
+ width: 8px;
+ /*楂樺鍒嗗埆瀵瑰簲妯珫婊氬姩鏉＄殑灏哄*/
+ height: 8px;
+ scrollbar-arrow-color: red;
+ }
+
+ .layui-prop::-webkit-scrollbar-thumb {
+ border-radius: 5px;
+ -webkit-box-shadow: inset 0 0 5px rgba(218, 218, 218, 0.2);
+ box-shadow: inset 0 0 5px rgba(218, 218, 218, 0.2);
+ background: rgba(218, 218, 218, 0.5);
+ scrollbar-arrow-color: red;
+ }
+
+ .layui-prop::-webkit-scrollbar-track {
+ -webkit-box-shadow: inset 0 0 5px rgba(218, 218, 218, 0.2);
+ box-shadow: inset 0 0 5px rgba(218, 218, 218, 0.2);
+ border-radius: 0;
+ background: rgba(218, 218, 218, 0.1);
+ }
+
+ form {
+ width: 95%;
+ }
+
+ html {
+ overflow: hidden;
+ }
+
+ .layui-form-item {
+ width: 313px !important;
+ }
+
+ .layui-input {
+ background-color: #fff !important;
+ height: 30px;
+ margin-top: 5px;
+ }
+
+ .layui-form-label {
+ width: 96px !important;
+ }
+
+ .layui-input-block {
+ width: 150px !important;
+ margin-left: 150px !important;
+ }
+
+ .layui-prop {
+ margin-left: 10px;
+ }
+
+ .layui-form-item .line {
+ display: block;
+ }
+
+ .layui-input-block {
+ margin-left: 0;
+ }
+
+ .layui-form-item {
+ border: 1px solid;
+ margin-bottom: 0px !important;
+ border-bottom: none;
+ }
+
+ .layui-input {
+ background-color: rgba(0, 0, 0, 0) !important;
+ margin-top: 5px;
+ color: #fff;
+ }
+
+ .layui-form-select dl {
+ background-color: rgba(0, 0, 0, 0.5) !important;
+ }
+
+ .layui-form-select dl dd:hover {
+ background-color: #f2f2f250;
+ }
+
+ .bnt-box {
+ text-align: center;
+ height: 58px;
+ }
+
+ .bnt-box button {
+ margin-top: 10px;
+ }
+
+ .fly {
+ display: none;
+ }
+
+ #flySpeed {
+ padding: 19px 0;
+ }
+ </style>
+</head>
+
+<body>
+ <div class="layui-prop">
+ <div class="bnt-box">
+ <button type="button" class="layui-btn layui-btn-normal" id="start">缁х画宸℃</button>
+ <button type="button" class="layui-btn layui-btn-normal" id="stop" style="margin-left: 0;">鏆傚仠宸℃</button>
+ <button type="button" class="layui-btn layui-btn-normal" id="exit">閫�鍑哄贰妫�</button>
+ </div>
+ <form class="layui-form" action="">
+ <div class="layui-form-item">
+ <label class="layui-form-label">璺嚎鍚嶇О</label>
+ <div class="layui-input-block" id="roadName" style="line-height: 38px;">
+
+ </div>
+ </div>
+ <div class="layui-form-item">
+ <label class="layui-form-label">瑙嗚妯″紡</label>
+ <div class="layui-input-block">
+ <select id="sjms" name="sjms" lay-filter="sjms">
+ <option value="0">璺熼殢妯″瀷</option>
+ <option value="1">绗竴浜虹О瑙嗚</option>
+ <option value="2">涓婂笣瑙嗚</option>
+ </select>
+ </div>
+ </div>
+ <div class="layui-form-item norline fly">
+ <label class="layui-form-label">椋炶楂樺害</label>
+ <div class="layui-input-block">
+ <input id="cameraHeight" type="text" value="0" name="cameraHeight" lay-filter="cameraHeight"
+ class="layui-input" onkeyup="value=value.replace(/[^\d\.\-]/g,'')">
+ </div>
+ </div>
+ <div class="layui-form-item norline fly notGod">
+ <label class="layui-form-label">椋炶璺濈</label>
+ <div class="layui-input-block">
+ <input id="cameraDistance" type="text" value="0" name="cameraDistance" lay-filter="cameraDistance"
+ class="layui-input" onkeyup="value=value.replace(/[^\d\.\-]/g,'')">
+ </div>
+ </div>
+ <div class="layui-form-item norline fly notGod">
+ <label class="layui-form-label">淇话瑙�</label>
+ <div class="layui-input-block">
+ <input id="pitch" type="text" value="0" name="pitch" lay-filter="pitch" class="layui-input"
+ onkeyup="value=value.replace(/[^\d\.\-]/g,'')">
+ </div>
+ </div>
+ <div class="layui-form-item norline">
+ <label class="layui-form-label">宸℃閫熷害(m/s)</label>
+ <div class="layui-input-block">
+ <div id="flySpeed" class="flySpeed"></div>
+ </div>
+ </div>
+ <div class="layui-form-item norline">
+ <label class="layui-form-label">鎬婚暱搴�</label>
+ <div class="layui-input-block" id="totalLen" style="line-height: 38px;">
+ </div>
+ </div>
+ <div class="layui-form-item norline">
+ <label class="layui-form-label">宸插贰妫�闀垮害</label>
+ <div class="layui-input-block" id="distanceTraveled" style="line-height: 38px;">
+ 0
+ </div>
+ </div>
+ <div class="layui-form-item norline">
+ <label class="layui-form-label">鎬绘椂闀�</label>
+ <div class="layui-input-block" id="totalTime" style="line-height: 38px;">
+ </div>
+ </div>
+ <div class="layui-form-item norline">
+ <label class="layui-form-label">宸插贰妫�鏃堕棿</label>
+ <div class="layui-input-block" id="time" style="line-height: 38px;">
+ 0
+ </div>
+ </div>
+ <div class="layui-form-item norline">
+ <label class="layui-form-label">鏄惁鏄剧ず妯″瀷</label>
+ <div class="layui-input-block">
+ <input id="showModel" type="checkbox" lay-skin="switch" lay-filter="showModel" value="off"
+ lay-text="鏄瘄鍚�">
+ </div>
+ </div>
+ <div class="layui-form-item norline">
+ <label class="layui-form-label">鏄惁鏄剧ず璺嚎</label>
+ <div class="layui-input-block">
+ <input id="showLine" type="checkbox" lay-skin="switch" lay-filter="showLine" value="off"
+ lay-text="鏄瘄鍚�">
+ </div>
+ </div>
+ <div class="layui-form-item norline">
+ <label class="layui-form-label">閫熷害</label>
+ <div class="layui-input-block" id="sd" style="line-height: 38px;">
+ 50m/s
+ </div>
+ </div>
+ <div class="layui-form-item norline">
+ <label class="layui-form-label">缁忓害</label>
+ <div class="layui-input-block" id="jd" style="line-height: 38px;">
+ </div>
+ </div>
+
+ <div class="layui-form-item norline">
+ <label class="layui-form-label">绾害</label>
+ <div class="layui-input-block" id="wd" style="line-height: 38px;">
+ </div>
+ </div>
+
+ <div class="layui-form-item norline">
+ <label class="layui-form-label">宸℃楂樼▼</label>
+ <div class="layui-input-block" id="height" style="line-height: 38px;">
+ </div>
+ </div>
+ <div class="layui-form-item norline">
+ <label class="layui-form-label">鍦伴潰楂樼▼</label>
+ <div class="layui-input-block" id="globeHeight" style="line-height: 38px;">
+ </div>
+ </div>
+ <div class="layui-form-item">
+ <div class="layui-progress layui-progress-big" lay-showpercent="true" lay-filter="ratio">
+ <div class="layui-progress-bar layui-bg-red" lay-percent="0%"></div>
+ </div>
+ </div>
+ </form>
+ </div>
+ <script src="../jquery-2.0.3.js"></script>
+ <script src="../layui/layui.js"></script>
+
+ <script>
+ /// <reference path="sjcs.js" />
+ var fly = null;
+ var sgworld = parent.sgworld;
+ var routeData = parent.PathAnimationData.flyData;
+ var url = parent.SmartEarthRootUrl + "Workers/Model/xiaoche.glb";
+ $('#start').hide();
+ $('#stop').show();
+ var form, element, slider;
+ var ratio = 0;
+ layui.use(['form', 'element', 'slider'], function () {
+ form = layui.form;
+ element = layui.element;
+ slider = layui.slider;
+
+ if (routeData.distance) {
+ document.getElementById("totalLen").innerText = getDistance(routeData.distance);
+ }
+ if (routeData.Totaltime) {
+ document.getElementById("totalTime").innerText = getTime(routeData.Totaltime);
+ }
+ if (routeData.range) {
+ document.getElementById("cameraDistance").value = routeData.range;
+ }
+ if (routeData.height) {
+ document.getElementById("cameraHeight").value = routeData.height;
+ }
+ if (routeData.pitch) {
+ document.getElementById("pitch").value = routeData.pitch;
+ }
+ document.getElementById("roadName").innerText = routeData.name;
+
+ fly = sgworld.Creator.createDynamicObject(routeData, url, shuj);
+ parent.PathAnimationData.fly = fly
+
+ if (routeData.mode) {
+ $('#sjms option[value="' + routeData.mode + '"]').attr('selected', '');
+ form.render();
+ switch (routeData.mode) {
+ case 1:
+ $('.fly').show();
+ break;
+ case 2:
+ $('.fly').show();
+ $('.notGod').hide();
+ break;
+ }
+ }
+ form.on('select(sjms)', function (data) {
+ if (data.value === "0") {
+ fly && fly.changeFlyMode(0);
+ routeData && (routeData.mode = 0);
+ $('.fly').hide();
+ } else if (data.value === "1") {
+ fly && fly.changeFlyMode(1);
+ routeData && (routeData.mode = 1);
+ $('.fly').show();
+ } else if (data.value === "2") {
+ fly && fly.changeFlyMode(2);
+ routeData && (routeData.mode = 2);
+ $('.fly').show();
+ $('.notGod').hide();
+ }
+ });
+
+ slider.render({
+ elem: '#flySpeed',
+ theme: '#1E9FFF', //涓婚鑹�
+ min: 1,
+ max: 500,
+ value: 50,
+ change: function (value) {
+ let multiplier = value / 50.5;
+ fly && fly.setMultiplier(multiplier);
+ routeData && (routeData.multiplier = multiplier);
+ document.getElementById("sd").innerText = value + 'm/s';
+ }
+ });
+
+ $('#cameraDistance').on('input propertychange', function (event) {
+ var distance = $(this).val().replace(/[^\d\.\-]/g, '');
+ fly && fly.setFlyDistance(parseFloat(distance));
+ routeData && (routeData.range = parseFloat(distance));
+ });
+ $('#cameraHeight').on('input propertychange', function (event) {
+ var height = $(this).val().replace(/[^\d\.\-]/g, '');
+ fly && fly.setFlyHeight(parseFloat(height));
+ routeData && (routeData.height = parseFloat(height));
+ });
+ $('#pitch').on('input propertychange', function (event) {
+ var pitch = $(this).val().replace(/[^\d\.\-]/g, '');
+ fly && fly.setFlyPitch(parseFloat(pitch));
+ routeData && (routeData.pitch = parseFloat(pitch));
+ });
+ if (routeData.showModel) {
+ $('#showModel').next().click();
+ $('#showModel').attr('value', 'on');
+ }
+ form.on('switch(showModel)', function (data) {
+ fly && fly.showModel(this.checked);
+ routeData && (routeData.showModel = this.checked);
+ });
+ if (routeData.showLine) {
+ $('#showLine').next().click();
+ $('#showLine').attr('value', 'on');
+ }
+ form.on('switch(showLine)', function (data) {
+ fly && fly.showLine(this.checked);
+ routeData && (routeData.showLine = this.checked);
+ });
+ //杩涘害鏉�
+ setInterval(function () {
+ element.progress('ratio', ratio + '%');
+ }, 500);
+ });
+ //鎸夐挳浜嬩欢
+ $(".bnt-box button").click(function () {
+ var id = this.id;
+ switch (id) {
+ case 'start':
+ fly && fly.isPause(false);
+ $('#start').hide();
+ $('#stop').show();
+ break;
+ case 'stop':
+ fly && fly.isPause(true);
+ $('#start').show();
+ $('#stop').hide();
+ break;
+ case 'exit':
+ parent.layer.close(parent.PathAnimationData.winIndex)
+ break;
+ }
+ });
+
+ function shuj(data) {
+ if (data.distanceTraveled) {
+ //宸插贰妫�闀垮害
+ document.getElementById("distanceTraveled").innerText = getDistance(data.distanceTraveled);
+ }
+ if (data.time) {
+ //宸插贰妫�鏃堕棿
+ document.getElementById("time").innerText = getTime(parseInt(data.time));
+ }
+ if (data.longitude) {
+ //缁忓害
+ document.getElementById("jd").innerText = data.longitude.toFixed(7) + '掳';
+ }
+ if (data.latitude) {
+ //绾害
+ document.getElementById("wd").innerText = data.latitude.toFixed(7) + '掳';
+ }
+ // if (data.speed) {
+ // //閫熷害
+ // document.getElementById("sd").innerText = data.speed;
+ // }
+ if (data.height) {
+ //閫熷害
+ document.getElementById("height").innerText = getDistance(data.height);
+ }
+ if (data.globeHeight) {
+ //閫熷害
+ document.getElementById("globeHeight").innerText = getDistance(data.globeHeight);
+ }
+ if (data.ratio) {
+ ratio = parseInt(data.ratio * 100);
+ }
+ }
+
+ //鑷姩鐐瑰嚮鍏抽棴绐楀彛鐐瑰叧闂簨浠�
+ function closeLayer() {
+ var $title = $(window.parent.document).find('.layui-layer-title');
+ if ($title.length > 0) {
+ $title.each(function (i, item) {
+ if (item.innerHTML === "宸℃璺嚎") {
+ var closeButton = $(item).parent().find('.layui-layer-close');
+ var event = document.createEvent('MouseEvents');
+ event.initEvent("click", false, true);
+ closeButton[0].dispatchEvent(event);
+ }
+ })
+ }
+ }
+
+ function getTime(data) {
+ var time;
+ if (data < 60) {
+ time = data + "绉�";
+ } else if (data >= 60 && data < 3600) {
+ time = Math.floor(data / 60) + '鍒�' + data % 60 + '绉�';
+ } else {
+ var h = Math.floor(data / 3600);
+ data -= h * 3600;
+ var m = Math.floor(data / 60);
+ data -= m * 60;
+ time = h + '灏忔椂' + m + '鍒�' + data + '绉�';
+ }
+ return time;
+ }
+
+ function getDistance(data) {
+ var dis;
+ data = parseFloat(data).toFixed(2);
+ data = parseFloat(data);
+ if (data >= 1000) {
+ dis = (data / 1000).toFixed(3) + "鍗冪背";
+ } else {
+ dis = data + "绫�";
+ }
+ return dis;
+ }
+ </script>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/src/assets/img/Screen/bdimg.png b/src/assets/img/Screen/bdimg.png
new file mode 100644
index 0000000..102e157
--- /dev/null
+++ b/src/assets/img/Screen/bdimg.png
Binary files differ
diff --git a/src/assets/img/Screen/bigST.png b/src/assets/img/Screen/bigST.png
new file mode 100644
index 0000000..f45d62e
--- /dev/null
+++ b/src/assets/img/Screen/bigST.png
Binary files differ
diff --git a/src/assets/img/Screen/bottombg.png b/src/assets/img/Screen/bottombg.png
new file mode 100644
index 0000000..536cbd3
--- /dev/null
+++ b/src/assets/img/Screen/bottombg.png
Binary files differ
diff --git a/src/assets/img/Screen/btnbg.png b/src/assets/img/Screen/btnbg.png
new file mode 100644
index 0000000..678c750
--- /dev/null
+++ b/src/assets/img/Screen/btnbg.png
Binary files differ
diff --git a/src/assets/img/Screen/btnc.png b/src/assets/img/Screen/btnc.png
new file mode 100644
index 0000000..a909dfb
--- /dev/null
+++ b/src/assets/img/Screen/btnc.png
Binary files differ
diff --git a/src/assets/img/Screen/centerbtn.png b/src/assets/img/Screen/centerbtn.png
new file mode 100644
index 0000000..de48173
--- /dev/null
+++ b/src/assets/img/Screen/centerbtn.png
Binary files differ
diff --git a/src/assets/img/Screen/centerbtnc.png b/src/assets/img/Screen/centerbtnc.png
new file mode 100644
index 0000000..c2de00e
--- /dev/null
+++ b/src/assets/img/Screen/centerbtnc.png
Binary files differ
diff --git a/src/assets/img/Screen/chartbg.png b/src/assets/img/Screen/chartbg.png
new file mode 100644
index 0000000..30ac482
--- /dev/null
+++ b/src/assets/img/Screen/chartbg.png
Binary files differ
diff --git a/src/assets/img/Screen/leftArrow.png b/src/assets/img/Screen/leftArrow.png
new file mode 100644
index 0000000..45ce6d3
--- /dev/null
+++ b/src/assets/img/Screen/leftArrow.png
Binary files differ
diff --git a/src/assets/img/Screen/logobg.png b/src/assets/img/Screen/logobg.png
new file mode 100644
index 0000000..7835da6
--- /dev/null
+++ b/src/assets/img/Screen/logobg.png
Binary files differ
diff --git a/src/assets/img/Screen/ptree.png b/src/assets/img/Screen/ptree.png
new file mode 100644
index 0000000..33adaba
--- /dev/null
+++ b/src/assets/img/Screen/ptree.png
Binary files differ
diff --git a/src/assets/img/Screen/return.png b/src/assets/img/Screen/return.png
new file mode 100644
index 0000000..d10f0c5
--- /dev/null
+++ b/src/assets/img/Screen/return.png
Binary files differ
diff --git a/src/assets/img/Screen/rightArrow.png b/src/assets/img/Screen/rightArrow.png
new file mode 100644
index 0000000..30ffac5
--- /dev/null
+++ b/src/assets/img/Screen/rightArrow.png
Binary files differ
diff --git a/src/assets/img/Screen/yximg.png b/src/assets/img/Screen/yximg.png
new file mode 100644
index 0000000..aedc47d
--- /dev/null
+++ b/src/assets/img/Screen/yximg.png
Binary files differ
diff --git a/src/components/Screen/ProjectTree.vue b/src/components/Screen/ProjectTree.vue
new file mode 100644
index 0000000..df592f5
--- /dev/null
+++ b/src/components/Screen/ProjectTree.vue
@@ -0,0 +1,252 @@
+<template>
+ <div class="project_tree" :class="{ left_main_show: !leftMenuOpen }">
+ <div class="tree-container">
+ <el-tree
+ :data="treeData"
+ show-checkbox
+ node-key="id"
+ default-expand-all
+ :props="defaultProps"
+ ref="tree"
+ class="el-tree"
+ @check-change="handleCheckChange"
+ >
+ <div
+ style="display: flex"
+ class="custom-tree-node"
+ slot-scope="{ node, data }"
+ >
+ <div style="margin-left: 0px; padding-left: 15px">
+ <i
+ v-if="data.children && data.children.length > 0"
+ style="color: yellow"
+ class="el-icon-folder-opened"
+ ></i>
+ <i v-else style="color: skyblue" class="el-icon-folder-opened"></i>
+ </div>
+
+ <div
+ class="tree-label"
+ :title="node.label || '-'"
+ >
+ {{ node.label }}
+ </div>
+ </div>
+ </el-tree>
+ </div>
+ <div class="changeBaseLayer">
+ <div @click="changeMenulayer" class="CenDiv">
+ <div
+ id="cenBg"
+ v-bind:class="{ active: isActive, menuLayer: isMenuLayer }"
+ ></div>
+ </div>
+ </div>
+ </div>
+</template>
+
+<script>
+import { right_menu, right_list, image_layer } from "@/assets/js/index.js"
+
+import { perms_selectLayers } from "@/api/api.js"
+
+export default {
+ data() {
+ return {
+ treeData: [],
+ defaultProps: {
+ children: "children",
+ label: "label",
+ },
+ typeIndex: null,
+ leftMenuOpen: false,
+ rightMenuOpen: false,
+ changeSelectStyle: null,
+ changeSelectli: null,
+ rightMenu: [],
+ rightList: [],
+ treeData: [],
+ centerFlag: false,
+ isActive: false,
+ isMenuLayer: true,
+ openEcharts: false,
+ }
+ },
+
+ mounted() {
+ this.rightList = right_list[0]
+ this.rightMenu = right_menu
+ this.changeSelectli = this.rightList[0].id
+ this.changeSelectStyle = this.rightMenu[0].id
+ this.addImageLayer()
+ },
+ methods: {
+ async addImageLayer() {
+ const data = await perms_selectLayers()
+ if (data.code != 200) {
+ return this.$message.error("鍥惧眰鍒楄〃鏌ヨ澶辫触")
+ }
+ var std = []
+ var layer_list = []
+ var layer_groups = []
+ for (var i in data.result) {
+ if (data.result[i].type == 1) {
+ layer_groups.push({
+ id: data.result[i].id,
+ label: data.result[i].cnName,
+ type: data.result[i].type,
+ isEdit: false,
+ children: [],
+ })
+ } else if (data.result[i].type == 2) {
+ if (data.result[i].url != null) {
+ var layer_entity = {
+ id: data.result[i].id,
+ pid: data.result[i].pid,
+ label: data.result[i].cnName,
+ resource: data.result[i].url,
+ type: data.result[i].type,
+ isEdit: false,
+ }
+ layer_list.push(layer_entity)
+ if (data.result[i].isShow == 1) {
+ std.push(data.result[i].id)
+ this.setAddImageLayer(layer_entity)
+ }
+ }
+ }
+ }
+ for (var i in layer_list) {
+ for (var j in layer_groups) {
+ if (layer_list[i].pid === layer_groups[j].id) {
+ layer_groups[j].children.push(layer_list[i])
+ }
+ }
+ }
+ this.treeData = layer_groups
+
+ this.$refs.tree.setCheckedKeys(std)
+ },
+ handleCheckChange(data, checked, indeterminate) {
+ if (data.children != null) return
+ var std = []
+ for (var i = 0; i < Viewer.imageryLayers._layers.length; i++) {
+ var val_id = Viewer.imageryLayers._layers[i].imageryProvider.name
+ if (val_id == data.label) {
+ std.push(data.label)
+ const img_layer = Viewer.imageryLayers._layers[i]
+ img_layer.show = checked
+ }
+ }
+ if (std.length == 0 && checked == true) {
+ this.setAddImageLayer(data)
+ }
+ },
+ setAddImageLayer(res) {
+ let layerWMS = new Cesium.WebMapServiceImageryProvider({
+ url: geoServerURl,
+ layers: res.resource,
+ parameters: {
+ transparent: true,
+ format: "image/png",
+ },
+ })
+ layerWMS.name = res.label
+ Viewer.imageryLayers.addImageryProvider(layerWMS)
+ },
+ changeMenulayer() {
+ this.isActive = !this.isActive
+ this.isMenuLayer = !this.isMenuLayer
+ this.setLayerVisible()
+ },
+ setLayerVisible() {
+ if (this.isActive == true) {
+ Viewer.imageryLayers._layers[1].show = true
+ Viewer.imageryLayers._layers[2].show = false
+ Viewer.imageryLayers._layers[3].show = false
+ } else {
+ Viewer.imageryLayers._layers[1].show = false
+ Viewer.imageryLayers._layers[2].show = true
+ Viewer.imageryLayers._layers[3].show = true
+ }
+ },
+ },
+}
+</script>
+
+<style lang="scss" scoped>
+.project_tree {
+ margin: 0;
+ width: 300px;
+ height: 100%;
+ transition: width 2s;
+ background: url("~@/assets/img/themic/宸︽.png") no-repeat center;
+ background-size: 100% 100%;
+
+ .tree-container {
+ margin: 10px;
+ height: 90%;
+ overflow-y: auto;
+ }
+ .changeBaseLayer {
+ width: 100%;
+ display: flex;
+ justify-content: flex-end;
+ overflow: hidden;
+ }
+ .CenDiv {
+ height: 40px;
+ width: 60px;
+
+ margin-right: 7%;
+ border-radius: 5px;
+ bottom: 3%;
+ }
+
+ // .CenDiv:hover {
+
+ // }
+ .active {
+ height: 40px;
+ width: 60px;
+ background: url("~@/assets/img/themic/榛樿鐨勫奖鍍�.png") no-repeat center;
+ position: absolute;
+ background-size: 100% 100%;
+ border-radius: 5px;
+ }
+ .menuLayer {
+ height: 40px;
+ width: 60px;
+ background: url("~@/assets/img/themic/榛樿鐨勫簳鍥�.png") no-repeat center;
+ position: absolute;
+ background-size: 100% 100%;
+ border-radius: 5px;
+ }
+}
+</style>
+
+<style lang="scss">
+.leftContainer {
+ .project_tree {
+ .el-tree-node__content > label.el-checkbox {
+ margin-right: -30px;
+ }
+ .el-tree-node__content > .el-tree-node__expand-icon {
+ visibility: hidden;
+ }
+ .el-tree .el-tree-node .is-leaf + .el-checkbox .el-checkbox__inner {
+ display: block;
+ visibility: visible;
+ }
+ .el-tree .el-tree-node .el-checkbox .el-checkbox__inner {
+ display: none;
+ // visibility: hidden;
+ }
+ .tree-label {
+ padding-left: 10px;
+ font-size: 16px;
+ color: #fff;
+ }
+ }
+}
+</style>
diff --git a/src/components/Screen/bottom.vue b/src/components/Screen/bottom.vue
new file mode 100644
index 0000000..be02463
--- /dev/null
+++ b/src/components/Screen/bottom.vue
@@ -0,0 +1,194 @@
+<template>
+ <div class="bottom">
+ <div class="bottom1">
+ <div class="bottom11"></div>
+ <div class="bottom12">
+ <div class="bottombtn">
+ <el-popover
+ popper-class="popover"
+ placement="top"
+ width="100"
+ trigger="click"
+ >
+ <!-- 鍐呭 -->
+ <span slot="reference">椤圭洰灞曠ず</span>
+ <div class="popover-content">
+ <div class="popover-content__header">椤圭洰淇℃伅</div>
+ <div class="popover-content__list">
+ <div
+ class="popover-content__list__item"
+ v-for="item in projectInfoList"
+ :key="item.id"
+ :class="currProject == item.name ? 'active' : ''"
+ >
+ {{ item.name }}
+ </div>
+ </div>
+ </div>
+ </el-popover>
+ </div>
+ <div class="bottombtn">
+ <el-popover placement="top" width="100" trigger="click">
+ <!-- 鍐呭 -->
+ <span slot="reference">宸ョ▼灞曠ず</span>
+ </el-popover>
+ </div>
+ <div class="bottombtn">
+ <el-popover placement="top" width="100" trigger="click">
+ <!-- 鍐呭 -->
+ <span slot="reference">宸ョ▼宸¤</span>
+ </el-popover>
+ </div>
+ </div>
+ <div class="bottom13">
+ <img :src="yxImg" @click="ChangeBaseLayer" />
+ </div>
+ </div>
+ <div class="bottom2">
+ <img src="../../assets/img/Screen/bottombg.png" />
+ </div>
+ </div>
+</template>
+<script>
+export default {
+ data() {
+ return {
+ YXState: true,
+ yxImg: require("../../assets/img/Screen/yximg.png"),
+ currProject: "鍏ㄧ悆绠＄綉鍥�",
+ projectInfoList: [
+ {
+ name: "鍏ㄥ浗绠＄綉鍥�",
+ id: "qggwt",
+ },
+ {
+ name: "鍏ㄧ悆绠＄綉鍥�",
+ id: "qqgwt",
+ },
+ {
+ name: "鍏ㄥ浗椤圭洰",
+ id: "qgxm",
+ },
+ {
+ name: "鍏ㄧ悆椤圭洰",
+ id: "qqxm",
+ },
+ ],
+ }
+ },
+ methods: {
+ ChangeBaseLayer() {
+ if (this.YXState) {
+ this.yxImg = require("../../assets/img/Screen/bdimg.png")
+ //鍔犺浇鐧惧害褰卞儚
+ Viewer.imageryLayers._layers[1].show = true
+ Viewer.imageryLayers._layers[2].show = false
+ Viewer.imageryLayers._layers[3].show = false
+ } else {
+ this.yxImg = require("../../assets/img/Screen/yximg.png")
+ Viewer.imageryLayers._layers[1].show = false
+ Viewer.imageryLayers._layers[2].show = true
+ Viewer.imageryLayers._layers[3].show = true
+ }
+ this.YXState = !this.YXState
+ },
+ },
+}
+</script>
+<style lang="scss">
+.bottom {
+ height: 100%;
+ width: 100%;
+ display: flex;
+ flex-direction: column;
+
+ .bottom1 {
+ height: calc(100% - 36px);
+ width: 100%;
+ display: flex;
+ flex-direction: row;
+
+ .bottom11,
+ .bottom13 {
+ height: 100%;
+ width: 40%;
+ }
+
+ .bottom12 {
+ height: 100%;
+ width: 20%;
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+ justify-content: space-around;
+ }
+
+ .bottom13 {
+ cursor: pointer;
+ display: flex;
+ align-items: center;
+ justify-content: flex-end;
+
+ img {
+ cursor: pointer;
+ margin-right: 30px;
+ width: 92px;
+ height: 61px;
+ }
+ }
+
+ .bottombtn {
+ height: 36px;
+ width: 147px;
+ background: url(../../assets/img/Screen/centerbtn.png);
+ background-size: 100% 100%;
+ background-repeat: no-repeat;
+ font-size: 1rem;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ color: #fff;
+ font-weight: 600;
+ cursor: pointer;
+ }
+ }
+
+ .bottom2 {
+ height: 36px;
+ width: 100%;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+
+ img {
+ width: 80%;
+ height: 100%;
+ }
+ }
+}
+.popover {
+ background-color: aqua;
+
+ .popover-content {
+ &__header {
+ &::before,
+ &::after {
+ content: "";
+ display: inline-block;
+ background-color: aqua;
+ border-radius: 50%;
+ width: 10px;
+ height: 10px;
+ }
+ }
+ &__list {
+ &__item {
+ background-color: orange;
+ &.active {
+ background-color: aqua;
+ }
+ }
+ }
+ }
+}
+</style>
diff --git a/src/components/Screen/left.vue b/src/components/Screen/left.vue
new file mode 100644
index 0000000..fa664e9
--- /dev/null
+++ b/src/components/Screen/left.vue
@@ -0,0 +1,82 @@
+<template>
+ <div class="current">
+ <div class="leftarrow">
+ <img :src="leftImg" @click="ChangeLeft" />
+ </div>
+ <div class="leftContainer" v-if="!ChartDisplay">
+ <div class="current1"></div>
+ <div class="current1"></div>
+ <div class="current1"></div>
+ </div>
+ <div class="leftContainer" v-if="ChartDisplay">
+ <project-tree></project-tree>
+ <!-- <div class="current1"></div>
+ <div class="current1"></div>
+ <div class="current1"></div> -->
+ </div>
+ </div>
+</template>
+<script>
+import ProjectTree from './ProjectTree.vue'
+export default {
+ components: {
+ ProjectTree
+ },
+ data() {
+ return {
+ ChartDisplay: true,
+ leftImg: require("../../assets/img/Screen/rightArrow.png"),
+ }
+ },
+ mounted() {},
+ methods: {
+ ChangeLeft() {
+ if (this.ChartDisplay) {
+ this.leftImg = require("../../assets/img/Screen/leftArrow.png")
+ } else {
+ this.leftImg = require("../../assets/img/Screen/rightArrow.png")
+ }
+ this.ChartDisplay = !this.ChartDisplay
+ this.$parent.ChangeWidth("left")
+ },
+ },
+}
+</script>
+<style lang="scss">
+.current {
+ height: 100%;
+ width: 100%;
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+ justify-content: center;
+ .leftarrow {
+ width: 36px;
+ height: 100%;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ img {
+ width: 30px;
+ height: 120px;
+ cursor: pointer;
+ }
+ }
+ .leftContainer {
+ height: 100%;
+ width: calc(100% - 36px);
+
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: space-around;
+ .current1 {
+ height: 30%;
+ width: 100%;
+ background: url(../../assets/img/Screen/chartbg.png);
+ background-size: 100% 100%;
+ background-repeat: no-repeat;
+ }
+ }
+}
+</style>
diff --git a/src/components/Screen/mapsdk.vue b/src/components/Screen/mapsdk.vue
new file mode 100644
index 0000000..c5c6f6c
--- /dev/null
+++ b/src/components/Screen/mapsdk.vue
@@ -0,0 +1,88 @@
+<template>
+ <div class="ParentCentermapdiv">
+ <div id="Centermapdiv"></div>
+ </div>
+</template>
+
+<script>
+
+export default {
+ name: "",
+ components: {},
+ data() {
+ return{}
+ },
+ mounted() {
+ this.init3DMap()
+ },
+ methods: {
+ init3DMap() {
+ //鍦板浘鍒濆鍖�
+ window.sgworld = new SmartEarth.SGWorld("Centermapdiv", {
+ licenseServer: window.sceneConfig.licenseServer,
+ })
+
+ window.Viewer = window.sgworld._Viewer
+ Viewer.imageryLayers._layers[0].show = false
+ //瀹氫綅
+ Viewer.camera.flyTo({
+ destination: Cesium.Cartesian3.fromDegrees(110, 33, 25000000),
+
+ });
+ Viewer.imageryLayers.addImageryProvider(
+ new Cesium.UrlTemplateImageryProvider({
+ url: gaoDeBaseUrl[0].url,
+ })
+ )
+
+ Viewer.imageryLayers.addImageryProvider(
+ new Cesium.UrlTemplateImageryProvider({
+ url: gaoDeBaseUrl[1].url,
+ })
+ )
+ Viewer.imageryLayers.addImageryProvider(
+ new Cesium.UrlTemplateImageryProvider({
+ url: gaoDeBaseUrl[2].url,
+ })
+ )
+
+
+
+ Viewer._enableInfoOrSelection = false
+ //鏄剧ずfps
+ Viewer.scene.debugShowFramesPerSecond = false
+ //瀵艰埅鎺т欢
+ window.sgworld.navControl("nav", false)
+ //姣斾緥灏�
+ window.sgworld.navControl("scale", false)
+ //寮�鍚繁搴︽娴�
+ sgworld.Analysis.depthTestAgainstTerrain(true)
+
+
+ Viewer.terrainProvider = new Cesium.CesiumTerrainProvider({
+ url: demLayer,
+ })
+
+ //鏀瑰彉澶╃┖棰滆壊涓洪粦鑹�
+ Viewer.scene.skyBox.show = false //鍏抽棴澶╃┖鐩掞紝鍚﹀垯浼氭樉绀哄ぉ绌洪鑹�
+ //鑳屾櫙閫忔槑
+ Viewer.scene.backgroundColor = new Cesium.Color(0.0, 0.0, 0.0, 0.0);
+ },
+
+ }
+
+}
+</script>
+
+<style scoped lang="scss">
+.ParentCentermapdiv{
+ display: fixed;
+ height: 100%;
+ width: 100%;
+}
+ #Centermapdiv{
+ height: 100%;
+ width: 100%;
+ }
+
+</style>
diff --git a/src/components/Screen/right.vue b/src/components/Screen/right.vue
new file mode 100644
index 0000000..6e0a036
--- /dev/null
+++ b/src/components/Screen/right.vue
@@ -0,0 +1,82 @@
+<template>
+ <div class="current">
+
+ <div class="rightContainer" v-show="ChartDisplay">
+ <div class="current1"></div>
+ <div class="current1"></div>
+ <div class="current1"></div>
+ </div>
+ <div class="rightarrow">
+ <img :src="RightImg" @click="ChangeRight" />
+ </div>
+
+ </div>
+</template>
+<script>
+export default{
+ data(){
+ return{
+ ChartDisplay:true,
+ RightImg:require("../../assets/img/Screen/leftArrow.png")
+ }
+ },
+ methods:{
+ ChangeRight(){
+ if(this.ChartDisplay){
+ this.RightImg=require("../../assets/img/Screen/rightArrow.png");
+ }else{
+ this.RightImg=require("../../assets/img/Screen/leftArrow.png");
+ }
+ this.ChartDisplay=!this.ChartDisplay;
+ this.$parent.ChangeWidth("right");
+ }
+ }
+
+
+
+}
+
+
+
+</script>
+<style lang="scss">
+.current {
+ height: 100%;
+ width: 100%;
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+ justify-content: center;
+ .rightarrow{
+ width:36px;
+ height: 100%;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ img{
+ width: 30px;
+ height: 120px;
+ cursor: pointer;
+ }
+ }
+ .rightContainer {
+ height: 100%;
+ width: calc(100% - 36px);
+
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: space-around;
+ .current1{
+ height: 30%;
+ width: 100%;
+ background:url(../../assets/img/Screen/chartbg.png);
+ background-size: 100% 100%;
+ background-repeat: no-repeat;
+ }
+ }
+
+
+
+}
+</style>
\ No newline at end of file
diff --git a/src/components/Screen/top.vue b/src/components/Screen/top.vue
new file mode 100644
index 0000000..afb517a
--- /dev/null
+++ b/src/components/Screen/top.vue
@@ -0,0 +1,145 @@
+<template>
+ <div class="top">
+ <div class="topleft">
+ <div
+ class="topleft1 topleftC"
+ :class="{ topleft1: screen == false, topleftC: screen == true }"
+ >
+ <img src="../../assets/img/Screen/bigST.png" />
+ <span>澶у睆瑙嗗浘</span>
+ </div>
+ <div
+ class="topleft1 topleftC"
+ :class="{ topleft1: tree == false, topleftC: tree == true }"
+ >
+ <img src="../../assets/img/Screen/ptree.png" />
+ <span>宸ョ▼椤圭洰</span>
+ </div>
+ </div>
+ <div class="topCenter">
+ <div>绠＄綉涓�寮犲浘</div>
+ </div>
+ <div class="topRight">
+ <div class="topright1 toprightC" @click="ReturnLast">
+ <img src="../../assets/img/Screen/return.png" />
+ <span>杩斿洖涓婄骇</span>
+ </div>
+ </div>
+ </div>
+</template>
+<script>
+export default {
+ data() {
+ return {
+ tree: false,
+ screen: false,
+ }
+ },
+ mounted() {},
+ methods: {
+ ReturnLast() {
+ this.$router.push("/Synthesis")
+ },
+ },
+}
+</script>
+<style lang="scss">
+.top {
+ height: 100%;
+ width: 100%;
+ background-image: url(../../assets/img/Screen/logobg.png);
+ background-size: 100% 100%;
+ background-repeat: no-repeat;
+ display: flex;
+ flex-direction: row;
+ .topleft {
+ width: 20%;
+ height: 100%;
+ display: flex;
+ flex-direction: row;
+ align-items: flex-end;
+ justify-content: space-around;
+ cursor: pointer;
+ .topleft1 {
+ width: 131px;
+ height: 40px;
+ background-image: url(../../assets/img/Screen/btnc.png);
+ background-repeat: no-repeat;
+ background-size: 100% 100%;
+ display: flex;
+ align-items: center;
+ }
+ .topleftC {
+ width: 131px;
+ height: 40px;
+ background-image: url(../../assets/img/Screen/btnbg.png);
+ background-repeat: no-repeat;
+ background-size: 100% 100%;
+ display: flex;
+ align-items: center;
+ }
+ img {
+ height: 26px;
+ width: 32px;
+ margin: 0px 8px;
+ }
+ span {
+ color: #b3c8e3;
+ font-size: 1rem;
+ letter-spacing: 1px;
+ }
+ }
+ .topCenter {
+ width: 60%;
+ height: 100%;
+ font-size: 2rem;
+ text-align: center;
+ font-weight: 600;
+ font-style: italic;
+ letter-spacing: 5px;
+ color: #e3eafd;
+ div {
+ margin-top: 5px;
+ }
+ }
+ .topRight {
+ width: 20%;
+ height: 100%;
+ display: flex;
+ flex-direction: row;
+ align-items: flex-end;
+ justify-content: flex-end;
+ cursor: pointer;
+ .topright1 {
+ width: 131px;
+ height: 40px;
+ background-image: url(../../assets/img/Screen/btnc.png);
+ background-repeat: no-repeat;
+ background-size: 100% 100%;
+ display: flex;
+ align-items: center;
+ margin-right: 10%;
+ }
+ .toprightC {
+ width: 131px;
+ height: 40px;
+ background-image: url(../../assets/img/Screen/btnbg.png);
+ background-repeat: no-repeat;
+ background-size: 100% 100%;
+ display: flex;
+ align-items: center;
+ margin-right: 10%;
+ }
+ img {
+ height: 26px;
+ width: 32px;
+ margin: 0px 8px;
+ }
+ span {
+ color: #b3c8e3;
+ font-size: 1rem;
+ letter-spacing: 1px;
+ }
+ }
+}
+</style>
diff --git a/src/main.js b/src/main.js
index f977b1b..d218944 100644
--- a/src/main.js
+++ b/src/main.js
@@ -15,6 +15,7 @@
import '@/assets/css/content.css'
import '@/assets/css/configure.css'
import '@/assets/css/config.css'
+import 'animate.css';
Vue.prototype.$echarts = echarts;
import * as echarts from 'echarts';
Vue.use(ElementUI, { locale });
diff --git a/src/views/Thematic/index.vue b/src/views/Thematic/index.vue
index ceecc2c..01e5cbb 100644
--- a/src/views/Thematic/index.vue
+++ b/src/views/Thematic/index.vue
@@ -1,977 +1,90 @@
<template>
<div class="themaic">
- <div
- class="left_menu"
- :class="{ left_main_show: !leftMenuOpen }"
- >
- <div class="tree-container">
- <el-tree
- :data="treeData"
- show-checkbox
- node-key="id"
- default-expand-all
- :props="defaultProps"
- ref="tree"
- class="el-tree"
- @check-change="handleCheckChange"
- >
- <span
- class="custom-tree-node"
- slot-scope="{ node, data }"
- >
- <svg-icon
- v-if="!data.children"
- icon-class="file"
- class="svgIcon"
- />
- <svg-icon
- v-else-if="node.expanded"
- icon-class="floder_open"
- class="svgIcon"
- />
- <svg-icon
- v-else
- icon-class="floder_close"
- class="svgIcon"
- />
- <span
- class='fontSize14'
- :title='node.label || "-"'
- >{{node.label}}</span>
- </span>
- </el-tree>
- </div>
- <div class="changeBaseLayer">
- <div
- @click="changeMenulayer"
- class="CenDiv"
- >
- <div
- id="cenBg"
- v-bind:class="{ active: isActive, menuLayer: isMenuLayer }"
- ></div>
- </div>
- </div>
-
- </div>
-
- <div class="center_content">
-
- <div
- id="MapView"
- class="MapView"
- >
- <div class="TopHeader">
- <div
- @click="setTopReturn"
- class="TopReturn"
- ></div>
- </div>
- <div class="leftEchart">
- <div class="showEcharts">
- <div
- v-if="typeIndex == '1'"
- class="echart1"
- >
- <echart11></echart11>
- </div>
- <div
- v-if="typeIndex == '1'"
- class="echart1"
- >
- <echart12></echart12>
- </div>
- <div
- v-if="typeIndex == '1'"
- class="echart1"
- >
- <echart13></echart13>
- </div>
- <div
- v-if="typeIndex == '2'"
- class="echart1"
- >
- <echart21></echart21>
- </div>
- <div
- v-if="typeIndex == '2'"
- class="echart1"
- >
- <echart22></echart22>
- </div>
- <div
- v-if="typeIndex == '2'"
- class="echart1"
- >
- <echart23></echart23>
- </div>
- <div
- v-if="typeIndex == '3'"
- class="echart1"
- >
- <echart31></echart31>
- </div>
- <div
- v-if="typeIndex == '3'"
- class="echart1"
- >
- <echart32></echart32>
- </div>
- <div
- v-if="typeIndex == '3'"
- class="echart1"
- >
- <echart33></echart33>
- </div>
- <div
- v-if="typeIndex == '4'"
- class="echart1"
- >
- <echart44></echart44>
- </div>
- <div
- v-if="typeIndex == '4'"
- class="echart1"
- >
- <echart45></echart45>
- </div>
- <div
- v-if="typeIndex == '4'"
- class="echart1"
- >
- <echart46></echart46>
- </div>
- </div>
- </div>
- <div class="rightEchart">
- <div class="showEcharts">
- <div
- v-if="typeIndex == '1'"
- class="echart1"
- >
- <echart14></echart14>
- </div>
- <div
- v-if="typeIndex == '1'"
- class="echart1"
- >
- <echart15></echart15>
- </div>
- <div
- v-if="typeIndex == '1'"
- class="echart1"
- >
- <echart16></echart16>
- </div>
-
- <div
- v-if="typeIndex == '2'"
- class="echart1"
- >
- <echart24></echart24>
- </div>
- <div
- v-if="typeIndex == '2'"
- class="echart1"
- >
- <echart25></echart25>
- </div>
- <div
- v-if="typeIndex == '2'"
- class="echart1"
- >
- <echart26></echart26>
- </div>
- <div
- v-if="typeIndex == '3'"
- class="echart1"
- >
- <echart34></echart34>
- </div>
- <div
- v-if="typeIndex == '3'"
- class="echart1"
- >
- <echart35></echart35>
- </div>
- <div
- v-if="typeIndex == '3'"
- class="echart1"
- >
- <echart36></echart36>
- </div>
- <div
- v-if="typeIndex == '4'"
- class="echart1"
- >
- <echart41></echart41>
- </div>
- <div
- v-if="typeIndex == '4'"
- class="echart1"
- >
- <echart42></echart42>
- </div>
- <div
- v-if="typeIndex == '4'"
- class="echart1"
- >
- <echart43></echart43>
- </div>
- </div>
- </div>
- <div class="left_content">
- <div
- @click="showLeftMenu"
- v-show=" !leftMenuOpen"
- >
- <div class="LeftMenu"></div>
- </div>
- <div
- @click="showLeftMenu"
- v-show=" leftMenuOpen"
- >
- <div class="LeftMenu1"></div>
- </div>
- </div>
-
- <div class="right_content">
- <div
- @click="showRightMenu"
- v-show="!rightMenuOpen "
- >
- <div class="RightMenu"></div>
- </div>
- <div
- @click="showRightMenu"
- v-show="rightMenuOpen "
- >
- <div class="RightMenu1"></div>
- </div>
- </div>
- </div>
- </div>
- <div
- class="right_menu"
- :class="{ right_main_show: !rightMenuOpen }"
- >
- <div class="content_right">
- <div class="contentLi">
- <ul>
- <li
- @click="changeRightList(item)"
- v-for="item in rightList"
- :class="item.id == changeSelectli ? 'changeliStyle' : ''"
- >
- {{ item.name }}
- </li>
- </ul>
- </div>
- <div class="contentBottom">
- <div
- v-for="item in rightMenu"
- class="right_item"
- :class="{ changeStyle: changeSelectStyle == item.id }"
- @click="changeRightMenu(item)"
- >
- {{ item.name }}
- </div>
- </div>
- </div>
- </div>
+ <mapsdk></mapsdk>
+ <top class="title" ref="title"></top>
+ <left class="mapleft" :style="{ width: leftWidth }"></left>
+ <right class="mapright" :style="{ width: rightWidth }"></right>
+ <bottom class="mapbottom"></bottom>
</div>
</template>
<script>
-window.sgworld = null;
-var Viewer = null;
+import mapsdk from "@/components/Screen/mapsdk.vue"
+import top from "../../components/Screen/top.vue"
+import left from "@/components/Screen/left.vue"
+import right from "../../components/Screen/right.vue"
+import bottom from "../../components/Screen/bottom.vue"
-import mapsdk from '../../components/mapsdk.vue';
-import { right_menu, right_list, image_layer } from '../../assets/js/index.js';
-import { perms_selectLayers } from '../../api/api.js';
-import echart11 from '../../components/echart11.vue';
-import echart12 from '../../components/echart12.vue';
-import echart13 from '../../components/echart13.vue';
-import echart14 from '../../components/echart14.vue';
-import echart15 from '../../components/echart15.vue';
-import echart16 from '../../components/echart16.vue';
-import echart21 from '../../components/echart21.vue';
-import echart22 from '../../components/echart22.vue';
-import echart23 from '../../components/echart23.vue';
-import echart24 from '../../components/echart24.vue';
-import echart25 from '../../components/echart25.vue';
-import echart26 from '../../components/echart26.vue';
-import echart31 from '../../components/echart31.vue';
-import echart32 from '../../components/echart32.vue';
-import echart33 from '../../components/echart33.vue';
-import echart34 from '../../components/echart34.vue';
-import echart35 from '../../components/echart35.vue';
-import echart36 from '../../components/echart36.vue';
-import echart41 from '../../components/echart41.vue';
-import echart42 from '../../components/echart42.vue';
-import echart43 from '../../components/echart43.vue';
-import echart44 from '../../components/echart44.vue';
-import echart45 from '../../components/echart45.vue';
-import echart46 from '../../components/echart46.vue';
-import axios from 'axios';
+import axios from "axios"
export default {
- components: {
- mapsdk,
- echart11,
- echart12,
- echart13,
- echart14,
- echart15,
- echart16,
- echart21,
- echart22,
- echart23,
- echart24,
- echart25,
- echart26,
- echart31,
- echart32,
- echart33,
- echart34,
- echart35,
- echart36,
- echart41,
- echart43,
- echart42,
- echart44,
- echart45,
- echart46,
- },
+ components: { mapsdk, top, left, right, bottom },
data() {
return {
- typeIndex: null,
- leftMenuOpen: false,
- rightMenuOpen: false,
- changeSelectStyle: null,
- changeSelectli: null,
- rightMenu: [],
- rightList: [],
- treeData: [],
- centerFlag: false,
- isActive: false,
- isMenuLayer: true,
- openEcharts: false,
- defaultProps: {
- children: 'children',
- label: 'label',
- },
- };
- },
- mounted() {
-
- this.rightList = right_list[0];
- this.rightMenu = right_menu;
- this.changeSelectli = this.rightList[0].id;
- this.changeSelectStyle = this.rightMenu[0].id;
- this.initMapView();
- this.addImageLayer();
-
-
- },
- created() {
-
- },
- methods: {
- setTopReturn() {
- this.$router.push('/Synthesis');
- sessionStorage.setItem('changeSelectStyle', 3)
- },
- changeRightList(res) {
- this.changeSelectli = res.id;
- if (res.layer != null) {
- var layer = res.layer;
- this.$refs.tree.setCheckedKeys(layer);
- }
- if (res.index != null) {
- this.openEcharts = true;
- this.typeIndex = res.index;
- } else {
- this.openEcharts = false;
- this.typeIndex = null;
- }
- var vid = res.id;
-
- if (vid.indexOf('b') != -1) {
- var url = geoserverWFS + '%27' + res.name + '%27';
- axios.get(url).then((res) => {
- if (res.status == 200) {
- var point = res.data.features[0].geometry.coordinates;
- //瀹氫綅
- Viewer.camera.flyTo({
- //璺宠浆瑙嗚
- destination: new Cesium.Cartesian3.fromDegrees(
- point[0],
- point[1],
- 8000
- ),
- });
- }
- });
- } else if (vid.indexOf('a') != -1) {
- //瀹氫綅
- Viewer.camera.flyTo({
- //璺宠浆瑙嗚
- destination: new Cesium.Cartesian3.fromDegrees(105.02, 34.9, 8000000),
- });
- } else if (vid.indexOf('c') != -1) {
- var url = geoserverWFSLine + '%27' + res.name + '%27';
- axios.get(url).then((res) => {
-
- if (res.status == 200) {
- if (res.data.features.length == 0) return;
- var std = [];
- for (var i in res.data.features) {
- var featurLayer = res.data.features[i];
- var path = featurLayer.geometry.coordinates[0];
- for (var j in path) {
- // std.push(path[j][0], path[j][1], 50);
- std.push(path[j])
- }
- }
-
- var str = this.removeRepeat1(std);
- var val = [];
- for (var i in str) {
- val.push(str[i][0], str[i][1], 50);
- }
- this.showPathLine(val)
- }
- });
- }
- },
- removeRepeat1(arr) {
- const obj = {};
- return arr.filter(item => {
- if (!obj[item.toString()]) {
- obj[item.toString()] = item.toString();
- return item;
- }
- });
- },
-
- showPathLine(res) {
-
- window.sgworld.Creator.getFlyData(res, (data) => {
- data.showPoint = false;
- data.showLine = true;
- data.mode = 1;
- data.height = 2000;
-
- // 寮圭獥鏁版嵁
- window.PathAnimationData = {
- flyData: data,
- };
- window.PathAnimationData.winIndex = layer.open({
- type: 2,
- title: '璺緞鍔ㄧ敾',
- shade: false,
- area: ['352px', '690px'],
- offset: 'r',
- skin: 'other-class',
- content: SmartEarthRootUrl + 'Workers/path/Path.html',
- end: function () {
- PathAnimationData.fly && PathAnimationData.fly.exit();
- },
- });
- });
- },
- showLeftMenu() {
- this.leftMenuOpen = !this.leftMenuOpen;
- var a = 0;
- var layer = setInterval(() => {
- a++;
- this.$bus.$emit('resizeEchart', true);
- if (a == 20) {
- clearInterval(layer);
- this.$bus.$emit('resizeEchart', true);
- }
- }, 100);
- },
- showRightMenu() {
- this.rightMenuOpen = !this.rightMenuOpen;
- var a = 0;
- var layer = setInterval(() => {
- a++;
- this.$bus.$emit('resizeEchart', true);
- if (a == 30) {
- clearInterval(layer);
- this.$bus.$emit('resizeEchart', true);
- }
- }, 100);
- },
- changeRightMenu(res) {
- this.rightList = right_list[parseInt(res.id) - 1];
- this.changeSelectStyle = res.id;
- },
- initMapView() {
- sgworld = new SmartEarth.SGWorld('MapView', {
- licenseServer: window.sceneConfig.licenseServer,
- });
-
- Viewer = sgworld._Viewer;
- Viewer.imageryLayers._layers[0].show = false;
- //瀹氫綅
- sgworld.Navigate.jumpTo({
- //璺宠浆瑙嗚
- destination: new Cesium.Cartesian3.fromDegrees(
- 116.3911,
- 39.9115,
- 100000
- ),
- });
- for (var i in gaoDeBaseUrl) {
- sgworld.Creator.createUrlTemplateImageryProvider(
- gaoDeBaseUrl[i].label,
- gaoDeBaseUrl[i].url,
- '0',
- undefined,
- true,
- ''
- );
- }
-
- //鏄剧ずfps
- Viewer.scene.debugShowFramesPerSecond = false;
- //瀵艰埅鎺т欢
- sgworld.navControl('nav', false);
- //姣斾緥灏�
- sgworld.navControl('scale', false);
-
- Viewer.terrainProvider = new Cesium.CesiumTerrainProvider({
- url: demLayer
- });
-
-
- },
- changeMenulayer() {
- this.isActive = !this.isActive;
- this.isMenuLayer = !this.isMenuLayer;
- this.setLayerVisible();
- },
- setLayerVisible() {
- if (this.isActive == true) {
- Viewer.imageryLayers._layers[1].show = true;
- Viewer.imageryLayers._layers[2].show = false;
- Viewer.imageryLayers._layers[3].show = false;
- } else {
- Viewer.imageryLayers._layers[1].show = false;
- Viewer.imageryLayers._layers[2].show = true;
- Viewer.imageryLayers._layers[3].show = true;
- }
- },
- async addImageLayer() {
- const data = await perms_selectLayers();
- // var val_layer = this.treeData[0].children;
- // var std = [];
- // for (var i = 0; i < val_layer.length; i++) {
- // if (val_layer[i].id != 13 && val_layer[i].id != 14) {
- // let layerWMS = new Cesium.WebMapServiceImageryProvider({
- // url: geoServerURl,
- // layers: val_layer[i].resource,
- // parameters: {
- // transparent: true,
- // format: 'image/png',
- // },
- // });
- // layerWMS.name = val_layer[i].label;
- // Viewer.imageryLayers.addImageryProvider(layerWMS);
- // std.push(val_layer[i].id);
- // }
- // }
- if (data.code != 200) {
- return this.$message.error("鍥惧眰鍒楄〃鏌ヨ澶辫触");
- }
- var std = [];
- var layer_list = [];
- var layer_groups = [];
- for (var i in data.result) {
- if (data.result[i].type == 1) {
- layer_groups.push({
- id: data.result[i].id,
- label: data.result[i].cnName,
- type: data.result[i].type,
- isEdit: false,
- children: [],
- })
- } else if (data.result[i].type == 2) {
- if (data.result[i].url != null) {
- var layer_entity = {
- id: data.result[i].id,
- pid: data.result[i].pid,
- label: data.result[i].cnName,
- resource: data.result[i].url,
- type: data.result[i].type,
- isEdit: false,
- }
- layer_list.push(layer_entity)
- if (data.result[i].isShow == 1) {
- std.push(data.result[i].id);
- this.setAddImageLayer(layer_entity);
- }
- }
- }
- }
- for (var i in layer_list) {
- for (var j in layer_groups) {
- if (layer_list[i].pid === layer_groups[j].id) {
- layer_groups[j].children.push(layer_list[i])
- }
- }
- }
- this.treeData = layer_groups;
-
- this.$refs.tree.setCheckedKeys(std);
- },
- handleCheckChange(data, checked, indeterminate) {
- if (data.children != null) return;
- var std = [];
- for (var i = 0; i < Viewer.imageryLayers._layers.length; i++) {
- var val_id =
- Viewer.imageryLayers._layers[i].imageryProvider.name;
- if (val_id == data.label) {
- std.push(data.label)
- const img_layer = Viewer.imageryLayers._layers[i];
- img_layer.show = checked;
- }
- }
- if (std.length == 0 && checked == true) {
- this.setAddImageLayer(data);
- }
- },
- setAddImageLayer(res) {
- let layerWMS = new Cesium.WebMapServiceImageryProvider({
- url: geoServerURl,
- layers: res.resource,
- parameters: {
- transparent: true,
- format: 'image/png',
- },
- });
- layerWMS.name = res.label;
- Viewer.imageryLayers.addImageryProvider(layerWMS);
+ leftWidth: "20%",
+ rightWidth: "20%",
}
},
-};
+ mounted() {},
+ created() {},
+ methods: {
+ //淇敼宸︿晶瀹藉害
+ ChangeWidth(parm) {
+ if (parm == "left") {
+ if (this.leftWidth == "20%") {
+ this.leftWidth = "36px"
+ } else {
+ this.leftWidth = "20%"
+ }
+ }
+ if (parm == "right") {
+ if (this.rightWidth == "20%") {
+ this.rightWidth = "36px"
+ } else {
+ this.rightWidth = "20%"
+ }
+ }
+ },
+ },
+}
</script>
<style lang="less" scoped>
.themaic {
- width: 100%;
height: 100%;
- background: #303030;
+ width: 100%;
position: absolute;
display: flex;
- overflow: hidden;
- .left_menu {
- margin: 0;
- width: 300px;
- height: 100%;
- transition: width 2s;
- background: url("../../assets/img/themic/宸︽.png") no-repeat center;
- background-size: 100% 100%;
-
- .tree-container {
- margin: 10px;
- height: 90%;
- overflow-y: auto;
- }
- .changeBaseLayer {
- width: 100%;
- display: flex;
- justify-content: flex-end;
- overflow: hidden;
- }
- .CenDiv {
- height: 40px;
- width: 60px;
-
- margin-right: 7%;
- border-radius: 5px;
- bottom: 3%;
- }
-
- // .CenDiv:hover {
-
- // }
- .active {
- height: 40px;
- width: 60px;
- background: url("../../assets/img/themic/榛樿鐨勫奖鍍�.png") no-repeat center;
- position: absolute;
- background-size: 100% 100%;
- border-radius: 5px;
- }
- .menuLayer {
- height: 40px;
- width: 60px;
- background: url("../../assets/img/themic/榛樿鐨勫簳鍥�.png") no-repeat center;
- position: absolute;
- background-size: 100% 100%;
- border-radius: 5px;
- }
- }
- .center_content {
- flex: 1;
- height: 100%;
- .MapView {
- width: 100%;
- height: 100%;
- overflow: hidden;
- margin: 0;
- float: left;
- position: relative;
- display: flex;
- justify-content: space-around;
- .TopHeader {
- width: 100%;
- height: 106px;
- margin-top: -21px;
- position: absolute;
- background: url("../../assets/img/themic/bj.png") no-repeat;
- background-size: 100% 100%;
- z-index: 40;
- .TopReturn {
- width: 142px;
- height: 40px;
- top: 37%;
- left: 2.2%;
- background: url("../../assets/img/themic/杩斿洖.png") no-repeat;
- background-size: 100% 100%;
- position: absolute;
- z-index: 60;
- }
- }
- .leftEchart {
- z-index: 60;
- position: absolute;
- bottom: 2px;
- height: calc(100% - 77px);
- width: 24%;
- left: 10px;
- position: absolute;
- right: 10px;
- }
- .showEcharts {
- width: 100%;
- height: 100%;
- display: flex;
- flex-direction: column;
- justify-content: space-between;
- }
- .rightEchart {
- z-index: 60;
- position: absolute;
- height: calc(100% - 77px);
- width: 24%;
- right: 10px;
- bottom: 2px;
- position: absolute;
- right: 10px;
- }
- .rightEchartShow {
- margin-right: 20px;
- }
- .right_content {
- width: 20px;
- height: 100%;
- z-index: 60;
- right: 10px;
- position: absolute;
- display: flex;
- align-items: center;
- }
-
- .left_content {
- width: 20px;
- height: 100%;
- z-index: 60;
- left: 10px;
- position: absolute;
- display: flex;
- align-items: center;
- }
- .LeftMenu {
- width: 20px;
- height: 100px;
- background: url("../../assets/img/themic/life.png") no-repeat;
- background-size: 100% 100%;
- position: absolute;
- float: right;
- }
- .LeftMenu1 {
- width: 20px;
- height: 100px;
- background: url("../../assets/img/themic/left1.png") no-repeat;
- background-size: 100% 100%;
- position: absolute;
- float: right;
- }
- .RightMenu {
- width: 20px;
- height: 100px;
- background: url("../../assets/img/themic/right.png") no-repeat;
- background-size: 100% 100%;
- position: absolute;
- float: right;
- }
- .RightMenu1 {
- width: 20px;
- height: 100px;
- background: url("../../assets/img/themic/right1.png") no-repeat;
- background-size: 100% 100%;
- position: absolute;
- float: right;
- }
- }
- }
- .item_menu {
- height: 100%;
- display: flex;
- align-items: center;
- }
- .left_main_show {
- width: 0;
- }
- .right_menu {
- margin: 0;
- width: 300px;
- height: 100%;
- transition: width 2s;
- background: url("../../assets/img/themic/鍙虫.png") no-repeat center;
- background-size: 100% 100%;
- .content_right {
- width: calc(100% - 40px);
- height: calc(100% - 60px);
- margin-top: 30px;
- margin-left: 20px;
- .contentLi {
- width: 100%;
- height: 95%;
- overflow-y: auto;
- }
- .contentBottom {
- width: 100%;
- height: 5%;
- margin-top: 5%;
- display: flex;
- justify-content: space-between;
- .right_item {
- align-items: center;
- display: flex;
- height: calc(100% - 2px);
- flex-grow: 1;
- justify-content: center;
- font-size: 14px;
- font-family: Source Han Sans SC;
- font-weight: 400;
- color: white;
- background: url("../../assets/img/themic/榛樿鐨勬寜閽儗鏅�.png")
- no-repeat center;
- background-size: 100% 100%;
- }
- .changeStyle {
- background: url("../../assets/img/themic/閫変腑鐨勬寜閽儗鏅�.png")
- no-repeat center;
- background-size: 100% 100%;
- }
- }
- li {
- padding: 10px 10px;
- color: white;
- background: url("../../assets/img/themic/listBJ.png") no-repeat center;
- background-size: 100% 100%;
- }
- li:hover {
- color: #409eff;
- }
- .changeliStyle {
- color: #409eff;
- }
- }
- }
-
- .right_main_show {
- width: 0;
- }
- .echart1 {
- width: 100%;
- height: 33%;
- background: url("../../assets/img/themic/xxk.png") no-repeat;
- background-size: 100% 100%;
- }
-
- /* 鍘婚櫎鏃嬭浆鍔ㄧ敾 */
- .el-tree /deep/ .el-tree-node__expand-icon.expanded {
- -webkit-transform: rotate(0deg);
- transform: rotate(0deg);
- }
-
- /* 鏈夊瓙鑺傜偣 涓旀湭灞曞紑 */
- .el-tree /deep/ .el-icon-caret-right:before {
- background: url("../../assets/img/themic/鍦嗚鐭╁舰 3 鎷疯礉 3.png") no-repeat 0
- 3px;
- content: "";
- content: "";
- display: block;
- width: 16px;
- height: 16px;
- font-size: 16px;
- background-size: 16px;
- }
-
- /* //鏈夊瓙鑺傜偣 涓斿凡灞曞紑 */
- /deep/
- .el-tree
- .el-tree-node__expand-icon.expanded.el-icon-caret-right:before {
- background: url("../../assets/img/themic/鍦嗚鐭╁舰 3 鎷疯礉 4.png") no-repeat 0
- 3px;
- content: "";
- display: block;
- width: 16px;
- height: 16px;
- font-size: 16px;
- background-size: 16px;
- }
-
- /* 娌℃湁瀛愯妭鐐� */
- /deep/ .el-tree .el-tree-node__expand-icon.is-leaf::before {
- background: url("../../assets/img/themic/鍦嗚鐭╁舰 3 鎷疯礉 3.png") no-repeat 0
- 3px;
- content: "";
- display: block;
- width: 16px;
- height: 16px;
- font-size: 16px;
- background-size: 16px;
- }
-
- /deep/ .el-tree {
- padding-top: 15px;
- padding-left: 10px;
- // 涓嶅彲鍏ㄩ�夋牱寮�
- .el-tree-node {
- .is-leaf + .el-checkbox .el-checkbox__inner {
- display: inline-block;
- }
- .el-checkbox .el-checkbox__inner {
- display: none;
- }
- }
- }
- /deep/.el-tree .el-tree-node__content:hover {
- background-color: transparent !important;
- }
- /deep/.el-tree {
- color: white !important;
- background: transparent !important;
- }
- /deep/.el-tree-node:focus > .el-tree-node__content {
- background: transparent !important;
- }
+}
+.title {
+ position: absolute;
+ top: 0;
+ left: 0;
+ height: 86px;
+ width: 100%;
+ z-index: 999;
+}
+.mapleft {
+ position: absolute;
+ top: 90px;
+ left: 0px;
+ // width: 20%;
+ height: calc(100% - 180px);
+ z-index: 999;
+}
+.mapright {
+ position: absolute;
+ top: 90px;
+ right: 0px;
+ // width: 20%;
+ height: calc(100% - 180px);
+ z-index: 999;
+}
+.mapbottom {
+ position: absolute;
+ left: 0;
+ bottom: 0;
+ height: 90px;
+ width: 100%;
+ z-index: 999;
}
</style>
diff --git a/src/views/Thematic/index1.vue b/src/views/Thematic/index1.vue
new file mode 100644
index 0000000..ceecc2c
--- /dev/null
+++ b/src/views/Thematic/index1.vue
@@ -0,0 +1,977 @@
+<template>
+ <div class="themaic">
+ <div
+ class="left_menu"
+ :class="{ left_main_show: !leftMenuOpen }"
+ >
+ <div class="tree-container">
+ <el-tree
+ :data="treeData"
+ show-checkbox
+ node-key="id"
+ default-expand-all
+ :props="defaultProps"
+ ref="tree"
+ class="el-tree"
+ @check-change="handleCheckChange"
+ >
+ <span
+ class="custom-tree-node"
+ slot-scope="{ node, data }"
+ >
+ <svg-icon
+ v-if="!data.children"
+ icon-class="file"
+ class="svgIcon"
+ />
+ <svg-icon
+ v-else-if="node.expanded"
+ icon-class="floder_open"
+ class="svgIcon"
+ />
+ <svg-icon
+ v-else
+ icon-class="floder_close"
+ class="svgIcon"
+ />
+ <span
+ class='fontSize14'
+ :title='node.label || "-"'
+ >{{node.label}}</span>
+ </span>
+ </el-tree>
+ </div>
+ <div class="changeBaseLayer">
+ <div
+ @click="changeMenulayer"
+ class="CenDiv"
+ >
+ <div
+ id="cenBg"
+ v-bind:class="{ active: isActive, menuLayer: isMenuLayer }"
+ ></div>
+ </div>
+ </div>
+
+ </div>
+
+ <div class="center_content">
+
+ <div
+ id="MapView"
+ class="MapView"
+ >
+ <div class="TopHeader">
+ <div
+ @click="setTopReturn"
+ class="TopReturn"
+ ></div>
+ </div>
+ <div class="leftEchart">
+ <div class="showEcharts">
+ <div
+ v-if="typeIndex == '1'"
+ class="echart1"
+ >
+ <echart11></echart11>
+ </div>
+ <div
+ v-if="typeIndex == '1'"
+ class="echart1"
+ >
+ <echart12></echart12>
+ </div>
+ <div
+ v-if="typeIndex == '1'"
+ class="echart1"
+ >
+ <echart13></echart13>
+ </div>
+ <div
+ v-if="typeIndex == '2'"
+ class="echart1"
+ >
+ <echart21></echart21>
+ </div>
+ <div
+ v-if="typeIndex == '2'"
+ class="echart1"
+ >
+ <echart22></echart22>
+ </div>
+ <div
+ v-if="typeIndex == '2'"
+ class="echart1"
+ >
+ <echart23></echart23>
+ </div>
+ <div
+ v-if="typeIndex == '3'"
+ class="echart1"
+ >
+ <echart31></echart31>
+ </div>
+ <div
+ v-if="typeIndex == '3'"
+ class="echart1"
+ >
+ <echart32></echart32>
+ </div>
+ <div
+ v-if="typeIndex == '3'"
+ class="echart1"
+ >
+ <echart33></echart33>
+ </div>
+ <div
+ v-if="typeIndex == '4'"
+ class="echart1"
+ >
+ <echart44></echart44>
+ </div>
+ <div
+ v-if="typeIndex == '4'"
+ class="echart1"
+ >
+ <echart45></echart45>
+ </div>
+ <div
+ v-if="typeIndex == '4'"
+ class="echart1"
+ >
+ <echart46></echart46>
+ </div>
+ </div>
+ </div>
+ <div class="rightEchart">
+ <div class="showEcharts">
+ <div
+ v-if="typeIndex == '1'"
+ class="echart1"
+ >
+ <echart14></echart14>
+ </div>
+ <div
+ v-if="typeIndex == '1'"
+ class="echart1"
+ >
+ <echart15></echart15>
+ </div>
+ <div
+ v-if="typeIndex == '1'"
+ class="echart1"
+ >
+ <echart16></echart16>
+ </div>
+
+ <div
+ v-if="typeIndex == '2'"
+ class="echart1"
+ >
+ <echart24></echart24>
+ </div>
+ <div
+ v-if="typeIndex == '2'"
+ class="echart1"
+ >
+ <echart25></echart25>
+ </div>
+ <div
+ v-if="typeIndex == '2'"
+ class="echart1"
+ >
+ <echart26></echart26>
+ </div>
+ <div
+ v-if="typeIndex == '3'"
+ class="echart1"
+ >
+ <echart34></echart34>
+ </div>
+ <div
+ v-if="typeIndex == '3'"
+ class="echart1"
+ >
+ <echart35></echart35>
+ </div>
+ <div
+ v-if="typeIndex == '3'"
+ class="echart1"
+ >
+ <echart36></echart36>
+ </div>
+ <div
+ v-if="typeIndex == '4'"
+ class="echart1"
+ >
+ <echart41></echart41>
+ </div>
+ <div
+ v-if="typeIndex == '4'"
+ class="echart1"
+ >
+ <echart42></echart42>
+ </div>
+ <div
+ v-if="typeIndex == '4'"
+ class="echart1"
+ >
+ <echart43></echart43>
+ </div>
+ </div>
+ </div>
+ <div class="left_content">
+ <div
+ @click="showLeftMenu"
+ v-show=" !leftMenuOpen"
+ >
+ <div class="LeftMenu"></div>
+ </div>
+ <div
+ @click="showLeftMenu"
+ v-show=" leftMenuOpen"
+ >
+ <div class="LeftMenu1"></div>
+ </div>
+ </div>
+
+ <div class="right_content">
+ <div
+ @click="showRightMenu"
+ v-show="!rightMenuOpen "
+ >
+ <div class="RightMenu"></div>
+ </div>
+ <div
+ @click="showRightMenu"
+ v-show="rightMenuOpen "
+ >
+ <div class="RightMenu1"></div>
+ </div>
+ </div>
+ </div>
+ </div>
+ <div
+ class="right_menu"
+ :class="{ right_main_show: !rightMenuOpen }"
+ >
+ <div class="content_right">
+ <div class="contentLi">
+ <ul>
+ <li
+ @click="changeRightList(item)"
+ v-for="item in rightList"
+ :class="item.id == changeSelectli ? 'changeliStyle' : ''"
+ >
+ {{ item.name }}
+ </li>
+ </ul>
+ </div>
+ <div class="contentBottom">
+ <div
+ v-for="item in rightMenu"
+ class="right_item"
+ :class="{ changeStyle: changeSelectStyle == item.id }"
+ @click="changeRightMenu(item)"
+ >
+ {{ item.name }}
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+</template>
+
+<script>
+window.sgworld = null;
+var Viewer = null;
+
+import mapsdk from '../../components/mapsdk.vue';
+import { right_menu, right_list, image_layer } from '../../assets/js/index.js';
+import { perms_selectLayers } from '../../api/api.js';
+import echart11 from '../../components/echart11.vue';
+import echart12 from '../../components/echart12.vue';
+import echart13 from '../../components/echart13.vue';
+import echart14 from '../../components/echart14.vue';
+import echart15 from '../../components/echart15.vue';
+import echart16 from '../../components/echart16.vue';
+import echart21 from '../../components/echart21.vue';
+import echart22 from '../../components/echart22.vue';
+import echart23 from '../../components/echart23.vue';
+import echart24 from '../../components/echart24.vue';
+import echart25 from '../../components/echart25.vue';
+import echart26 from '../../components/echart26.vue';
+import echart31 from '../../components/echart31.vue';
+import echart32 from '../../components/echart32.vue';
+import echart33 from '../../components/echart33.vue';
+import echart34 from '../../components/echart34.vue';
+import echart35 from '../../components/echart35.vue';
+import echart36 from '../../components/echart36.vue';
+import echart41 from '../../components/echart41.vue';
+import echart42 from '../../components/echart42.vue';
+import echart43 from '../../components/echart43.vue';
+import echart44 from '../../components/echart44.vue';
+import echart45 from '../../components/echart45.vue';
+import echart46 from '../../components/echart46.vue';
+import axios from 'axios';
+export default {
+ components: {
+ mapsdk,
+ echart11,
+ echart12,
+ echart13,
+ echart14,
+ echart15,
+ echart16,
+ echart21,
+ echart22,
+ echart23,
+ echart24,
+ echart25,
+ echart26,
+ echart31,
+ echart32,
+ echart33,
+ echart34,
+ echart35,
+ echart36,
+ echart41,
+ echart43,
+ echart42,
+ echart44,
+ echart45,
+ echart46,
+ },
+ data() {
+ return {
+ typeIndex: null,
+ leftMenuOpen: false,
+ rightMenuOpen: false,
+ changeSelectStyle: null,
+ changeSelectli: null,
+ rightMenu: [],
+ rightList: [],
+ treeData: [],
+ centerFlag: false,
+ isActive: false,
+ isMenuLayer: true,
+ openEcharts: false,
+ defaultProps: {
+ children: 'children',
+ label: 'label',
+ },
+ };
+ },
+ mounted() {
+
+ this.rightList = right_list[0];
+ this.rightMenu = right_menu;
+ this.changeSelectli = this.rightList[0].id;
+ this.changeSelectStyle = this.rightMenu[0].id;
+ this.initMapView();
+ this.addImageLayer();
+
+
+ },
+ created() {
+
+ },
+ methods: {
+ setTopReturn() {
+ this.$router.push('/Synthesis');
+ sessionStorage.setItem('changeSelectStyle', 3)
+ },
+ changeRightList(res) {
+ this.changeSelectli = res.id;
+ if (res.layer != null) {
+ var layer = res.layer;
+ this.$refs.tree.setCheckedKeys(layer);
+ }
+ if (res.index != null) {
+ this.openEcharts = true;
+ this.typeIndex = res.index;
+ } else {
+ this.openEcharts = false;
+ this.typeIndex = null;
+ }
+ var vid = res.id;
+
+ if (vid.indexOf('b') != -1) {
+ var url = geoserverWFS + '%27' + res.name + '%27';
+ axios.get(url).then((res) => {
+ if (res.status == 200) {
+ var point = res.data.features[0].geometry.coordinates;
+ //瀹氫綅
+ Viewer.camera.flyTo({
+ //璺宠浆瑙嗚
+ destination: new Cesium.Cartesian3.fromDegrees(
+ point[0],
+ point[1],
+ 8000
+ ),
+ });
+ }
+ });
+ } else if (vid.indexOf('a') != -1) {
+ //瀹氫綅
+ Viewer.camera.flyTo({
+ //璺宠浆瑙嗚
+ destination: new Cesium.Cartesian3.fromDegrees(105.02, 34.9, 8000000),
+ });
+ } else if (vid.indexOf('c') != -1) {
+ var url = geoserverWFSLine + '%27' + res.name + '%27';
+ axios.get(url).then((res) => {
+
+ if (res.status == 200) {
+ if (res.data.features.length == 0) return;
+ var std = [];
+ for (var i in res.data.features) {
+ var featurLayer = res.data.features[i];
+ var path = featurLayer.geometry.coordinates[0];
+ for (var j in path) {
+ // std.push(path[j][0], path[j][1], 50);
+ std.push(path[j])
+ }
+ }
+
+ var str = this.removeRepeat1(std);
+ var val = [];
+ for (var i in str) {
+ val.push(str[i][0], str[i][1], 50);
+ }
+ this.showPathLine(val)
+ }
+ });
+ }
+ },
+ removeRepeat1(arr) {
+ const obj = {};
+ return arr.filter(item => {
+ if (!obj[item.toString()]) {
+ obj[item.toString()] = item.toString();
+ return item;
+ }
+ });
+ },
+
+ showPathLine(res) {
+
+ window.sgworld.Creator.getFlyData(res, (data) => {
+ data.showPoint = false;
+ data.showLine = true;
+ data.mode = 1;
+ data.height = 2000;
+
+ // 寮圭獥鏁版嵁
+ window.PathAnimationData = {
+ flyData: data,
+ };
+ window.PathAnimationData.winIndex = layer.open({
+ type: 2,
+ title: '璺緞鍔ㄧ敾',
+ shade: false,
+ area: ['352px', '690px'],
+ offset: 'r',
+ skin: 'other-class',
+ content: SmartEarthRootUrl + 'Workers/path/Path.html',
+ end: function () {
+ PathAnimationData.fly && PathAnimationData.fly.exit();
+ },
+ });
+ });
+ },
+ showLeftMenu() {
+ this.leftMenuOpen = !this.leftMenuOpen;
+ var a = 0;
+ var layer = setInterval(() => {
+ a++;
+ this.$bus.$emit('resizeEchart', true);
+ if (a == 20) {
+ clearInterval(layer);
+ this.$bus.$emit('resizeEchart', true);
+ }
+ }, 100);
+ },
+ showRightMenu() {
+ this.rightMenuOpen = !this.rightMenuOpen;
+ var a = 0;
+ var layer = setInterval(() => {
+ a++;
+ this.$bus.$emit('resizeEchart', true);
+ if (a == 30) {
+ clearInterval(layer);
+ this.$bus.$emit('resizeEchart', true);
+ }
+ }, 100);
+ },
+ changeRightMenu(res) {
+ this.rightList = right_list[parseInt(res.id) - 1];
+ this.changeSelectStyle = res.id;
+ },
+ initMapView() {
+ sgworld = new SmartEarth.SGWorld('MapView', {
+ licenseServer: window.sceneConfig.licenseServer,
+ });
+
+ Viewer = sgworld._Viewer;
+ Viewer.imageryLayers._layers[0].show = false;
+ //瀹氫綅
+ sgworld.Navigate.jumpTo({
+ //璺宠浆瑙嗚
+ destination: new Cesium.Cartesian3.fromDegrees(
+ 116.3911,
+ 39.9115,
+ 100000
+ ),
+ });
+ for (var i in gaoDeBaseUrl) {
+ sgworld.Creator.createUrlTemplateImageryProvider(
+ gaoDeBaseUrl[i].label,
+ gaoDeBaseUrl[i].url,
+ '0',
+ undefined,
+ true,
+ ''
+ );
+ }
+
+ //鏄剧ずfps
+ Viewer.scene.debugShowFramesPerSecond = false;
+ //瀵艰埅鎺т欢
+ sgworld.navControl('nav', false);
+ //姣斾緥灏�
+ sgworld.navControl('scale', false);
+
+ Viewer.terrainProvider = new Cesium.CesiumTerrainProvider({
+ url: demLayer
+ });
+
+
+ },
+ changeMenulayer() {
+ this.isActive = !this.isActive;
+ this.isMenuLayer = !this.isMenuLayer;
+ this.setLayerVisible();
+ },
+ setLayerVisible() {
+ if (this.isActive == true) {
+ Viewer.imageryLayers._layers[1].show = true;
+ Viewer.imageryLayers._layers[2].show = false;
+ Viewer.imageryLayers._layers[3].show = false;
+ } else {
+ Viewer.imageryLayers._layers[1].show = false;
+ Viewer.imageryLayers._layers[2].show = true;
+ Viewer.imageryLayers._layers[3].show = true;
+ }
+ },
+ async addImageLayer() {
+ const data = await perms_selectLayers();
+ // var val_layer = this.treeData[0].children;
+ // var std = [];
+ // for (var i = 0; i < val_layer.length; i++) {
+ // if (val_layer[i].id != 13 && val_layer[i].id != 14) {
+ // let layerWMS = new Cesium.WebMapServiceImageryProvider({
+ // url: geoServerURl,
+ // layers: val_layer[i].resource,
+ // parameters: {
+ // transparent: true,
+ // format: 'image/png',
+ // },
+ // });
+ // layerWMS.name = val_layer[i].label;
+ // Viewer.imageryLayers.addImageryProvider(layerWMS);
+ // std.push(val_layer[i].id);
+ // }
+ // }
+ if (data.code != 200) {
+ return this.$message.error("鍥惧眰鍒楄〃鏌ヨ澶辫触");
+ }
+ var std = [];
+ var layer_list = [];
+ var layer_groups = [];
+ for (var i in data.result) {
+ if (data.result[i].type == 1) {
+ layer_groups.push({
+ id: data.result[i].id,
+ label: data.result[i].cnName,
+ type: data.result[i].type,
+ isEdit: false,
+ children: [],
+ })
+ } else if (data.result[i].type == 2) {
+ if (data.result[i].url != null) {
+ var layer_entity = {
+ id: data.result[i].id,
+ pid: data.result[i].pid,
+ label: data.result[i].cnName,
+ resource: data.result[i].url,
+ type: data.result[i].type,
+ isEdit: false,
+ }
+ layer_list.push(layer_entity)
+ if (data.result[i].isShow == 1) {
+ std.push(data.result[i].id);
+ this.setAddImageLayer(layer_entity);
+ }
+ }
+ }
+ }
+ for (var i in layer_list) {
+ for (var j in layer_groups) {
+ if (layer_list[i].pid === layer_groups[j].id) {
+ layer_groups[j].children.push(layer_list[i])
+ }
+ }
+ }
+ this.treeData = layer_groups;
+
+ this.$refs.tree.setCheckedKeys(std);
+ },
+ handleCheckChange(data, checked, indeterminate) {
+ if (data.children != null) return;
+ var std = [];
+ for (var i = 0; i < Viewer.imageryLayers._layers.length; i++) {
+ var val_id =
+ Viewer.imageryLayers._layers[i].imageryProvider.name;
+ if (val_id == data.label) {
+ std.push(data.label)
+ const img_layer = Viewer.imageryLayers._layers[i];
+ img_layer.show = checked;
+ }
+ }
+ if (std.length == 0 && checked == true) {
+ this.setAddImageLayer(data);
+ }
+ },
+ setAddImageLayer(res) {
+ let layerWMS = new Cesium.WebMapServiceImageryProvider({
+ url: geoServerURl,
+ layers: res.resource,
+ parameters: {
+ transparent: true,
+ format: 'image/png',
+ },
+ });
+ layerWMS.name = res.label;
+ Viewer.imageryLayers.addImageryProvider(layerWMS);
+ }
+ },
+};
+</script>
+
+<style lang="less" scoped>
+.themaic {
+ width: 100%;
+ height: 100%;
+ background: #303030;
+ position: absolute;
+ display: flex;
+ overflow: hidden;
+ .left_menu {
+ margin: 0;
+ width: 300px;
+ height: 100%;
+ transition: width 2s;
+ background: url("../../assets/img/themic/宸︽.png") no-repeat center;
+ background-size: 100% 100%;
+
+ .tree-container {
+ margin: 10px;
+ height: 90%;
+ overflow-y: auto;
+ }
+ .changeBaseLayer {
+ width: 100%;
+ display: flex;
+ justify-content: flex-end;
+ overflow: hidden;
+ }
+ .CenDiv {
+ height: 40px;
+ width: 60px;
+
+ margin-right: 7%;
+ border-radius: 5px;
+ bottom: 3%;
+ }
+
+ // .CenDiv:hover {
+
+ // }
+ .active {
+ height: 40px;
+ width: 60px;
+ background: url("../../assets/img/themic/榛樿鐨勫奖鍍�.png") no-repeat center;
+ position: absolute;
+ background-size: 100% 100%;
+ border-radius: 5px;
+ }
+ .menuLayer {
+ height: 40px;
+ width: 60px;
+ background: url("../../assets/img/themic/榛樿鐨勫簳鍥�.png") no-repeat center;
+ position: absolute;
+ background-size: 100% 100%;
+ border-radius: 5px;
+ }
+ }
+ .center_content {
+ flex: 1;
+ height: 100%;
+ .MapView {
+ width: 100%;
+ height: 100%;
+ overflow: hidden;
+ margin: 0;
+ float: left;
+ position: relative;
+ display: flex;
+ justify-content: space-around;
+ .TopHeader {
+ width: 100%;
+ height: 106px;
+ margin-top: -21px;
+ position: absolute;
+ background: url("../../assets/img/themic/bj.png") no-repeat;
+ background-size: 100% 100%;
+ z-index: 40;
+ .TopReturn {
+ width: 142px;
+ height: 40px;
+ top: 37%;
+ left: 2.2%;
+ background: url("../../assets/img/themic/杩斿洖.png") no-repeat;
+ background-size: 100% 100%;
+ position: absolute;
+ z-index: 60;
+ }
+ }
+ .leftEchart {
+ z-index: 60;
+ position: absolute;
+ bottom: 2px;
+ height: calc(100% - 77px);
+ width: 24%;
+ left: 10px;
+ position: absolute;
+ right: 10px;
+ }
+ .showEcharts {
+ width: 100%;
+ height: 100%;
+ display: flex;
+ flex-direction: column;
+ justify-content: space-between;
+ }
+ .rightEchart {
+ z-index: 60;
+ position: absolute;
+ height: calc(100% - 77px);
+ width: 24%;
+ right: 10px;
+ bottom: 2px;
+ position: absolute;
+ right: 10px;
+ }
+ .rightEchartShow {
+ margin-right: 20px;
+ }
+ .right_content {
+ width: 20px;
+ height: 100%;
+ z-index: 60;
+ right: 10px;
+ position: absolute;
+ display: flex;
+ align-items: center;
+ }
+
+ .left_content {
+ width: 20px;
+ height: 100%;
+ z-index: 60;
+ left: 10px;
+ position: absolute;
+ display: flex;
+ align-items: center;
+ }
+ .LeftMenu {
+ width: 20px;
+ height: 100px;
+ background: url("../../assets/img/themic/life.png") no-repeat;
+ background-size: 100% 100%;
+ position: absolute;
+ float: right;
+ }
+ .LeftMenu1 {
+ width: 20px;
+ height: 100px;
+ background: url("../../assets/img/themic/left1.png") no-repeat;
+ background-size: 100% 100%;
+ position: absolute;
+ float: right;
+ }
+ .RightMenu {
+ width: 20px;
+ height: 100px;
+ background: url("../../assets/img/themic/right.png") no-repeat;
+ background-size: 100% 100%;
+ position: absolute;
+ float: right;
+ }
+ .RightMenu1 {
+ width: 20px;
+ height: 100px;
+ background: url("../../assets/img/themic/right1.png") no-repeat;
+ background-size: 100% 100%;
+ position: absolute;
+ float: right;
+ }
+ }
+ }
+ .item_menu {
+ height: 100%;
+ display: flex;
+ align-items: center;
+ }
+ .left_main_show {
+ width: 0;
+ }
+ .right_menu {
+ margin: 0;
+ width: 300px;
+ height: 100%;
+ transition: width 2s;
+ background: url("../../assets/img/themic/鍙虫.png") no-repeat center;
+ background-size: 100% 100%;
+ .content_right {
+ width: calc(100% - 40px);
+ height: calc(100% - 60px);
+ margin-top: 30px;
+ margin-left: 20px;
+ .contentLi {
+ width: 100%;
+ height: 95%;
+ overflow-y: auto;
+ }
+ .contentBottom {
+ width: 100%;
+ height: 5%;
+ margin-top: 5%;
+ display: flex;
+ justify-content: space-between;
+ .right_item {
+ align-items: center;
+ display: flex;
+ height: calc(100% - 2px);
+ flex-grow: 1;
+ justify-content: center;
+ font-size: 14px;
+ font-family: Source Han Sans SC;
+ font-weight: 400;
+ color: white;
+ background: url("../../assets/img/themic/榛樿鐨勬寜閽儗鏅�.png")
+ no-repeat center;
+ background-size: 100% 100%;
+ }
+ .changeStyle {
+ background: url("../../assets/img/themic/閫変腑鐨勬寜閽儗鏅�.png")
+ no-repeat center;
+ background-size: 100% 100%;
+ }
+ }
+ li {
+ padding: 10px 10px;
+ color: white;
+ background: url("../../assets/img/themic/listBJ.png") no-repeat center;
+ background-size: 100% 100%;
+ }
+ li:hover {
+ color: #409eff;
+ }
+ .changeliStyle {
+ color: #409eff;
+ }
+ }
+ }
+
+ .right_main_show {
+ width: 0;
+ }
+ .echart1 {
+ width: 100%;
+ height: 33%;
+ background: url("../../assets/img/themic/xxk.png") no-repeat;
+ background-size: 100% 100%;
+ }
+
+ /* 鍘婚櫎鏃嬭浆鍔ㄧ敾 */
+ .el-tree /deep/ .el-tree-node__expand-icon.expanded {
+ -webkit-transform: rotate(0deg);
+ transform: rotate(0deg);
+ }
+
+ /* 鏈夊瓙鑺傜偣 涓旀湭灞曞紑 */
+ .el-tree /deep/ .el-icon-caret-right:before {
+ background: url("../../assets/img/themic/鍦嗚鐭╁舰 3 鎷疯礉 3.png") no-repeat 0
+ 3px;
+ content: "";
+ content: "";
+ display: block;
+ width: 16px;
+ height: 16px;
+ font-size: 16px;
+ background-size: 16px;
+ }
+
+ /* //鏈夊瓙鑺傜偣 涓斿凡灞曞紑 */
+ /deep/
+ .el-tree
+ .el-tree-node__expand-icon.expanded.el-icon-caret-right:before {
+ background: url("../../assets/img/themic/鍦嗚鐭╁舰 3 鎷疯礉 4.png") no-repeat 0
+ 3px;
+ content: "";
+ display: block;
+ width: 16px;
+ height: 16px;
+ font-size: 16px;
+ background-size: 16px;
+ }
+
+ /* 娌℃湁瀛愯妭鐐� */
+ /deep/ .el-tree .el-tree-node__expand-icon.is-leaf::before {
+ background: url("../../assets/img/themic/鍦嗚鐭╁舰 3 鎷疯礉 3.png") no-repeat 0
+ 3px;
+ content: "";
+ display: block;
+ width: 16px;
+ height: 16px;
+ font-size: 16px;
+ background-size: 16px;
+ }
+
+ /deep/ .el-tree {
+ padding-top: 15px;
+ padding-left: 10px;
+ // 涓嶅彲鍏ㄩ�夋牱寮�
+ .el-tree-node {
+ .is-leaf + .el-checkbox .el-checkbox__inner {
+ display: inline-block;
+ }
+ .el-checkbox .el-checkbox__inner {
+ display: none;
+ }
+ }
+ }
+ /deep/.el-tree .el-tree-node__content:hover {
+ background-color: transparent !important;
+ }
+ /deep/.el-tree {
+ color: white !important;
+ background: transparent !important;
+ }
+ /deep/.el-tree-node:focus > .el-tree-node__content {
+ background: transparent !important;
+ }
+}
+</style>
diff --git a/src/views/Tools/LayerTree.vue b/src/views/Tools/LayerTree.vue
index 2e1a70b..03592cc 100644
--- a/src/views/Tools/LayerTree.vue
+++ b/src/views/Tools/LayerTree.vue
@@ -321,7 +321,6 @@
var node= this.currentNode;
var data = this.currentData;
let copyNode = this.currentNode
- debugger
// copyNode.previousSibling = {...node. }
// copyNode.nextSibling = {...node.nextSibling}
// window.sessionStorage.setItem('menuNode',CircularJSON.stringify(copyNode))
diff --git a/vue.config.js b/vue.config.js
index 0b3fcbf..6c5461f 100644
--- a/vue.config.js
+++ b/vue.config.js
@@ -1,9 +1,19 @@
+const path = require("path")
+const resolve = dir => path.join(__dirname, dir)
module.exports = {
lintOnSave: false,
- publicPath: './',
+ publicPath: "./",
devServer: {
- host: '0.0.0.0', //鎸囧畾瑕佷娇鐢ㄧ殑 host
+ host: "0.0.0.0", //鎸囧畾瑕佷娇鐢ㄧ殑 host
port: 12315, //鎸囧畾绔彛鍙蜂互渚﹀惉
hotOnly: false, //鍚敤鐑ā鍧楁浛鎹紝鑰屾棤闇�椤甸潰鍒锋柊浣滀负鏋勫缓澶辫触鏃剁殑鍥為��銆�
},
-};
+
+ configureWebpack: {
+ resolve: {
+ alias: {
+ "@": resolve("src"),
+ },
+ },
+ },
+}
--
Gitblit v1.9.3