| | |
|---|
| | | }, |
|---|
| | | "dependencies": { |
|---|
| | | "@turf/turf": "^6.5.0", |
|---|
| | | "animate.css": "^4.1.1", |
|---|
| | | "aws-sdk": "^2.963.0", |
|---|
| | | "axios": "^0.21.1", |
|---|
| | | "cesium": "^1.84.0", |
|---|
| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | <!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> |
|---|
| | |
|---|
| | | }, |
|---|
| | | synthesis: { |
|---|
| | | DownloadList: 'Download List', |
|---|
| | | import: 'Import', |
|---|
| | | export: 'Export', |
|---|
| | | import: 'Import KML', |
|---|
| | | export: 'Export KML', |
|---|
| | | pipelineAnalysis: 'Pipeline analysis', |
|---|
| | | sceneExtraction: 'Scene extraction', |
|---|
| | | synthesis: 'Comprehensive Display', |
|---|
| | |
|---|
| | | }, |
|---|
| | | }, |
|---|
| | | synthesis: { |
|---|
| | | import: '导å
¥', |
|---|
| | | export: '导åº', |
|---|
| | | import: '导å
¥KML', |
|---|
| | | export: '导åºKML', |
|---|
| | | import1:'导å
¥SHP', |
|---|
| | | export1: '导åºSHP', |
|---|
| | | pipelineAnalysis: '管éåæ', |
|---|
| | | synthesis: '综åå±ç¤º', |
|---|
| | | DownloadList: 'ä¸è½½å表', |
|---|
| | |
|---|
| | | this.listdata.name = null; |
|---|
| | | this.option = []; |
|---|
| | | }, |
|---|
| | | clearQuerInfo() { |
|---|
| | | if (this.$store.state.queryInfo.length != 0) { |
|---|
| | | for (var i in this.$store.state.queryInfo) { |
|---|
| | | sgworld.Viewer.entities.remove(this.$store.state.queryInfo[i]); |
|---|
| | | } |
|---|
| | | this.$store.state.queryInfo = []; |
|---|
| | | if (this.$store.state.primitLayer != null) { |
|---|
| | | sgworld.Creator.DeleteObject(this.$store.state.primitLayer); |
|---|
| | | this.$store.state.primitLayer = null; |
|---|
| | | } |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | setTableAll() { |
|---|
| | | this.clearQuerInfo(); |
|---|
| | | this.signGetPublicKey(); |
|---|
| | | this.startTableMssage(); |
|---|
| | | this.listdata.wkt = this.$store.state.mapMenuShpFile; |
|---|
| | |
|---|
| | | this.showAllImage(data.result); |
|---|
| | | }, |
|---|
| | | async showAllImage(res) { |
|---|
| | | if (window.Viewer.scene.primitives.length != null) { |
|---|
| | | window.Viewer.scene.primitives.removeAll(); |
|---|
| | | } |
|---|
| | | if (this.$store.state.primitLayer != null) { |
|---|
| | | sgworld.Creator.DeleteObject(this.$store.state.primitLayer); |
|---|
| | | this.$store.state.primitLayer = null; |
|---|
| | | } |
|---|
| | | |
|---|
| | | for (var i in res) { |
|---|
| | | var param = { |
|---|
| | | gid: res[i].gid, |
|---|
| | |
|---|
| | | var val1 = decr(data.result); |
|---|
| | | if (val1) { |
|---|
| | | var wkt = this.$wkt.parse(val1); |
|---|
| | | this.getprimitiLayer(wkt); |
|---|
| | | // this.getprimitiLayer(wkt); |
|---|
| | | this.primitivesAddLayer(wkt); |
|---|
| | | } |
|---|
| | | } |
|---|
| | |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | primitivesAddLayer(res) { |
|---|
| | | debugger |
|---|
| | | switch (res.type) { |
|---|
| | | case "Point": |
|---|
| | | var val = Cesium.Cartesian3.fromDegrees( |
|---|
| | |
|---|
| | | res.coordinates[1], |
|---|
| | | 200 |
|---|
| | | ); |
|---|
| | | this.$store.state.primitLayer.add({ |
|---|
| | | var point = Viewer.entities.add({ |
|---|
| | | position: val, |
|---|
| | | image: SmartEarthRootUrl + "Workers/image/mark.png", |
|---|
| | | billboard: { |
|---|
| | | // å¾åå°åï¼URIæCanvasçå±æ§ |
|---|
| | | image: SmartEarthRootUrl + "Workers/image/mark.png", |
|---|
| | | // 大å°æ¯å¦ä»¥ç±³ä¸ºåä½ |
|---|
| | | sizeInMeters: false, |
|---|
| | | // ç¸å¯¹äºåæ çåç´ä½ç½® |
|---|
| | | verticalOrigin: Cesium.VerticalOrigin.CENTER, |
|---|
| | | // ç¸å¯¹äºåæ çæ°´å¹³ä½ç½® |
|---|
| | | horizontalOrigin: Cesium.HorizontalOrigin.LEFT, |
|---|
| | | // åºç¨äºå¾åçç»ä¸æ¯ä¾ãæ¯ä¾å¤§äºä¼1.0æ¾å¤§æ ç¾ï¼èæ¯ä¾å°äºä¼1.0缩å°æ ç¾ã |
|---|
| | | scale: 1.0, |
|---|
| | | // æ¯å¦æ¾ç¤º |
|---|
| | | show: true |
|---|
| | | } |
|---|
| | | }); |
|---|
| | | this.$store.state.queryInfo.push(point) |
|---|
| | | break; |
|---|
| | | case "LineString": |
|---|
| | | case "MultiLineString": |
|---|
| | | var line = res.coordinates[0]; |
|---|
| | | var std = []; |
|---|
| | | for (var i in line) { |
|---|
| | | std.push(line[i][0], line[i][1]); |
|---|
| | | } |
|---|
| | | var instance = new Cesium.GeometryInstance({ |
|---|
| | | geometry: new Cesium.GroundPolylineGeometry({ |
|---|
| | | var polyline = Viewer.entities.add({ |
|---|
| | | polyline: { |
|---|
| | | positions: Cesium.Cartesian3.fromDegreesArray(std), |
|---|
| | | width: 4.0, |
|---|
| | | }), |
|---|
| | | attributes: { |
|---|
| | | color: Cesium.ColorGeometryInstanceAttribute.fromColor( |
|---|
| | | new Cesium.Color(1.0, 0.0, 0.0, 0.3) |
|---|
| | | ), |
|---|
| | | }, |
|---|
| | | }); |
|---|
| | | window.Viewer.scene.primitives.add( |
|---|
| | | new Cesium.GroundPolylinePrimitive({ |
|---|
| | | geometryInstances: instance, |
|---|
| | | appearance: new Cesium.PolylineColorAppearance(), |
|---|
| | | }) |
|---|
| | | ); |
|---|
| | | width: 5, |
|---|
| | | material: new Cesium.Color(1.0, 0.0, 0.0, 0.3), |
|---|
| | | clampToGround: true, |
|---|
| | | } |
|---|
| | | }) |
|---|
| | | this.$store.state.queryInfo.push(polyline) |
|---|
| | | break; |
|---|
| | | case "MultiPolygon": |
|---|
| | | var val = res.coordinates[0][0]; |
|---|
| | |
|---|
| | | for (var i in val) { |
|---|
| | | std.push(val[i][0], val[i][1]); |
|---|
| | | } |
|---|
| | | var primitive = new Cesium.GroundPrimitive({ |
|---|
| | | //è´´å°çprimitive |
|---|
| | | geometryInstances: new Cesium.GeometryInstance({ |
|---|
| | | geometry: new Cesium.PolygonGeometry({ |
|---|
| | | //æ¯æCircleGeometryï¼CorridorGeometryï¼EllipseGeometryï¼RectangleGeometry |
|---|
| | | polygonHierarchy: new Cesium.PolygonHierarchy( |
|---|
| | | Cesium.Cartesian3.fromDegreesArray(std) |
|---|
| | | ), |
|---|
| | | }), |
|---|
| | | attributes: { |
|---|
| | | color: Cesium.ColorGeometryInstanceAttribute.fromColor( |
|---|
| | | new Cesium.Color(1.0, 0.0, 0.0, 0.3) |
|---|
| | | ), |
|---|
| | | }, |
|---|
| | | }), |
|---|
| | | appearance: Cesium.EllipsoidSurfaceAppearance(), |
|---|
| | | }); |
|---|
| | | window.Viewer.scene.primitives.add(primitive); |
|---|
| | | var entity = Viewer.entities.add({ |
|---|
| | | polygon: { |
|---|
| | | hierarchy: Cesium.Cartesian3.fromDegreesArray(std), |
|---|
| | | //height : 100000, |
|---|
| | | material: new Cesium.Color(1.0, 0.0, 0.0, 0.3), |
|---|
| | | outline: true, |
|---|
| | | outlineColor: new Cesium.Color(1.0, 0.0, 0.0, 0.3), |
|---|
| | | } |
|---|
| | | }) |
|---|
| | | this.$store.state.queryInfo.push(entity) |
|---|
| | | break; |
|---|
| | | } |
|---|
| | | }, |
|---|
| | |
|---|
| | | }, |
|---|
| | | |
|---|
| | | mounted() { |
|---|
| | | // sgworld.Creator.SimpleGraphic.edit(false, { editProp: false }); |
|---|
| | | |
|---|
| | | this.menuTopFrom.queryType = 'rectangle'; |
|---|
| | | this.getAllTable(); |
|---|
| | | }, |
|---|
| | | methods: { |
|---|
| | | flyRemove() { |
|---|
| | | |
|---|
| | | }, |
|---|
| | | flyQuery() { |
|---|
| | | // Viewer.flyTo( sgworld.Creator.SimpleGraphic._viewer.entities._entities._array[0]) |
|---|
| | | // switch (this.menuTopFrom.queryType) { |
|---|
| | | // case 'point': //ç¹ |
|---|
| | | // Viewer.camera.flyTo({ |
|---|
| | | // destination: Cesium.Cartesian3.fromDegrees(this.flyEntity.lng, this.flyEntity.lat, 3000), |
|---|
| | | |
|---|
| | | // }); |
|---|
| | | |
|---|
| | | // break; |
|---|
| | | // case 'polyline': //线 |
|---|
| | | // debugger |
|---|
| | | // break; |
|---|
| | | // case 'rectangle': //ç©å½¢ |
|---|
| | | |
|---|
| | | // debugger |
|---|
| | | // break; |
|---|
| | | // case 'circle': //å |
|---|
| | | // debugger |
|---|
| | | // break; |
|---|
| | | // case 'polygon': //å¤è¾¹å½¢ |
|---|
| | | // debugger |
|---|
| | | // break; |
|---|
| | | // } |
|---|
| | | }, |
|---|
| | | changeValue(value) { |
|---|
| | | // var obj = {}; |
|---|
| | | // obj = this.queryOption.find(function (item) { |
|---|
| | | // return item.value === value; |
|---|
| | | // }); |
|---|
| | | // if (obj.value == 'inputFile') { |
|---|
| | | // this.getMenuTopFile(); |
|---|
| | | // } |
|---|
| | | var obj = {}; |
|---|
| | | obj = this.queryOption.find(function (item) { |
|---|
| | | return item.value === value; |
|---|
| | | }); |
|---|
| | | if (obj.value == 'inputFile') { |
|---|
| | | this.getMenuTopFile(); |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | async getAllTable() { |
|---|
| | | const data = await inquiry_SelectTabs(); |
|---|
| | |
|---|
| | | //æ¸
空æ ç» |
|---|
| | | sgworld.Creator.SimpleGraphic.edit(false, { editProp: false }); |
|---|
| | | sgworld.Creator.SimpleGraphic.clear(); |
|---|
| | | |
|---|
| | | if (this.$store.state.queryInfo.length != 0) { |
|---|
| | | for (var i in this.$store.state.queryInfo) { |
|---|
| | | sgworld.Viewer.entities.remove(this.$store.state.queryInfo[i]); |
|---|
| | | } |
|---|
| | | this.$store.state.queryInfo = []; |
|---|
| | | } |
|---|
| | | if (this.$store.state.primitLayer != null) { |
|---|
| | | sgworld.Creator.DeleteObject(this.$store.state.primitLayer); |
|---|
| | | this.$store.state.primitLayer = null; |
|---|
| | | } |
|---|
| | | if (this.treeChange.length == 0) { |
|---|
| | | this.$message.error('请éæ©è¦æ¥è¯¢çæ°æ®'); |
|---|
| | | return; |
|---|
| | |
|---|
| | | properties: { foo: 'bar' }, |
|---|
| | | }; |
|---|
| | | var circle = turf.circle(position, radius, options); |
|---|
| | | debugger |
|---|
| | | |
|---|
| | | this.setJonToWKT(circle); |
|---|
| | | }, |
|---|
| | | setTurfPolyOrLine(res, type) { |
|---|
| | |
|---|
| | | showMapMenuPop() { |
|---|
| | | this.$store.state.mapSpaceQueryLayer = this.treeChange; |
|---|
| | | this.$store.state.mapPopBoxFlag = '1'; |
|---|
| | | // this.$refs && this.$refs.queryinfo && this.$refs.queryinfo.close(); |
|---|
| | | this.$refs && this.$refs.queryinfo && this.$refs.queryinfo.close(); |
|---|
| | | this.$refs && this.$refs.queryinfo && this.$refs.queryinfo.open("空é´æ¥è¯¢", null, { |
|---|
| | | close: () => { |
|---|
| | | |
|---|
| | | if (this.$store.state.primitLayer != null) { |
|---|
| | | // sgworld.Creator.DeleteObject(this.$store.state.primitLayer); |
|---|
| | | this.$store.state.primitLayer = null; |
|---|
| | | } |
|---|
| | | // if (this.$store.state.primitLayer != null) { |
|---|
| | | // // sgworld.Creator.DeleteObject(this.$store.state.primitLayer); |
|---|
| | | // this.$store.state.primitLayer = null; |
|---|
| | | // } |
|---|
| | | |
|---|
| | | if (window.Viewer.scene.primitives.length != 0) { |
|---|
| | | window.Viewer.scene.primitives.removeAll() |
|---|
| | | } |
|---|
| | | // if (window.Viewer.scene.primitives.length != 0) { |
|---|
| | | // window.Viewer.scene.primitives.removeAll() |
|---|
| | | // } |
|---|
| | | } |
|---|
| | | }); |
|---|
| | | this.$bus.$emit('changeMapMenuTop', 'true'); |
|---|
| | | sgworld.Creator.SimpleGraphic.edit(false, { editProp: false }); |
|---|
| | | // this.$bus.$emit('changeMapMenuTop', 'true'); |
|---|
| | | |
|---|
| | | // sgworld.Creator.SimpleGraphic.clear(); |
|---|
| | | //æ¸
空inputFile |
|---|
| | | // var file = document.getElementById('getMenuTopFile'); |
|---|
| | |
|---|
| | | this.menuTopFrom.queryLayer = null; |
|---|
| | | this.menuTopFrom.queryType = 'rectangle'; |
|---|
| | | this.$refs.tree.setCheckedKeys([]); |
|---|
| | | //æ¸
空æ ç» |
|---|
| | | //æ¸
空æ ç» |
|---|
| | | sgworld.Creator.SimpleGraphic.edit(false, { editProp: false }); |
|---|
| | | sgworld.Creator.SimpleGraphic.clear(); |
|---|
| | | |
|---|
| | | // //æ¸
é¤å¯¹è±¡ |
|---|
| | | // if (window.Viewer.scene.primitives.length != null) { |
|---|
| | | // window.Viewer.scene.primitives.removeAll(); |
|---|
| | | // } |
|---|
| | | // if (this.$store.state.primitLayer != null) { |
|---|
| | | // sgworld.Creator.DeleteObject(this.$store.state.primitLayer); |
|---|
| | | // this.$store.state.primitLayer = null; |
|---|
| | | // } |
|---|
| | | if (this.$store.state.queryInfo.length != 0) { |
|---|
| | | for (var i in this.$store.state.queryInfo) { |
|---|
| | | sgworld.Viewer.entities.remove(this.$store.state.queryInfo[i]); |
|---|
| | | } |
|---|
| | | this.$store.state.queryInfo = []; |
|---|
| | | } |
|---|
| | | //å
³éçªå£ |
|---|
| | | this.$refs && this.$refs.queryinfo && this.$refs.queryinfo.close("queryinfo"); |
|---|
| | | |
|---|
| | | |
|---|
| | | |
|---|
| | | |
|---|
| | | if (this.$store.state.primitLayer != null) { |
|---|
| | | sgworld.Creator.DeleteObject(this.$store.state.primitLayer); |
|---|
| | | this.$store.state.primitLayer = null; |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | setCartesianToEightFour(res) { |
|---|
| | | var std = {}; |
|---|
| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | <template> |
|---|
| | | <div class="project_tree" :class="{ left_main_show: !leftMenuOpen }"> |
|---|
| | | <div class="project_tree__title">å·¥ç¨é¡¹ç®</div> |
|---|
| | | <el-input |
|---|
| | | style="width: 80%" |
|---|
| | | placeholder="è¾å
¥å
³é®åè¿è¡æ¥è¯¢" |
|---|
| | | suffix-icon="el-icon-search" |
|---|
| | | v-model="filterText" |
|---|
| | | size="mini" |
|---|
| | | > |
|---|
| | | </el-input> |
|---|
| | | <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" |
|---|
| | | :filter-node-method="filterNode" |
|---|
| | | > |
|---|
| | | <div |
|---|
| | | style="display: flex" |
|---|
| | | class="custom-tree-node" |
|---|
| | | slot-scope="{ node, data }" |
|---|
| | | > |
|---|
| | | <div style=""> |
|---|
| | | <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 style=""> |
|---|
| | | <i |
|---|
| | | v-if="node.expanded && 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 |
|---|
| | | :style=" |
|---|
| | | data.children && data.children.length > 0 |
|---|
| | | ? 'padding-left: 20px' |
|---|
| | | : 'padding-left: 20px' |
|---|
| | | " |
|---|
| | | 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, |
|---|
| | | filterText: '', |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | |
|---|
| | | mounted() { |
|---|
| | | this.rightList = right_list[0] |
|---|
| | | this.rightMenu = right_menu |
|---|
| | | this.changeSelectli = this.rightList[0].id |
|---|
| | | this.changeSelectStyle = this.rightMenu[0].id |
|---|
| | | this.addImageLayer() |
|---|
| | | }, |
|---|
| | | watch: { |
|---|
| | | filterText(val) { |
|---|
| | | this.$refs.tree.filter(val) |
|---|
| | | }, |
|---|
| | | }, |
|---|
| | | 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 |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | filterNode(value, data) { |
|---|
| | | if (!value) return true |
|---|
| | | return data.label.indexOf(value) !== -1 |
|---|
| | | }, |
|---|
| | | }, |
|---|
| | | } |
|---|
| | | </script> |
|---|
| | | |
|---|
| | | <style lang="scss" scoped> |
|---|
| | | .project_tree { |
|---|
| | | margin: 0; |
|---|
| | | width: 300px; |
|---|
| | | height: 100%; |
|---|
| | | transition: width 2s; |
|---|
| | | background: url("~@/assets/img/Screen/prjectree.png") no-repeat center; |
|---|
| | | |
|---|
| | | background-size: 100% 100%; |
|---|
| | | &__title { |
|---|
| | | color: #fff; |
|---|
| | | height: 30px; |
|---|
| | | font-size: 20px; |
|---|
| | | width: 130px; |
|---|
| | | text-align: center; |
|---|
| | | padding-top: 10px; |
|---|
| | | font-weight: bold; |
|---|
| | | } |
|---|
| | | .el-input { |
|---|
| | | width: 80%; |
|---|
| | | padding: 5px 0 5px 30px; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .tree-container { |
|---|
| | | margin: 10px; |
|---|
| | | height: 85%; |
|---|
| | | 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; |
|---|
| | | } |
|---|
| | | } |
|---|
| | | /* æ»å¨æ¡æ ·å¼ */ |
|---|
| | | |
|---|
| | | ::-webkit-scrollbar { |
|---|
| | | width: 4px; |
|---|
| | | height: 4px; |
|---|
| | | background-color: #409eff; |
|---|
| | | } |
|---|
| | | |
|---|
| | | ::-webkit-scrollbar-track { |
|---|
| | | background: #eee; |
|---|
| | | } |
|---|
| | | |
|---|
| | | ::-webkit-scrollbar-thumb { |
|---|
| | | background: #409eff; |
|---|
| | | border-radius: 5px; |
|---|
| | | } |
|---|
| | | |
|---|
| | | ::-webkit-scrollbar-thumb:hover { |
|---|
| | | background: #409eff; |
|---|
| | | } |
|---|
| | | |
|---|
| | | ::-webkit-scrollbar-corner { |
|---|
| | | background: #409eff; |
|---|
| | | } |
|---|
| | | </style> |
|---|
| | | |
|---|
| | | <style lang="scss"> |
|---|
| | | .leftContainer { |
|---|
| | | .project_tree { |
|---|
| | | .el-tree-node__content { |
|---|
| | | margin-left: 20px; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .el-tree .el-tree-node .is-leaf { |
|---|
| | | margin-left: -14px; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .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 { |
|---|
| | | font-size: 16px; |
|---|
| | | color: #fff; |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | </style> |
|---|
| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | <template> |
|---|
| | | <div class="bottom"> |
|---|
| | | <div class="bottom1"> |
|---|
| | | <div class="bottom11"></div> |
|---|
| | | <div class="bottom12"> |
|---|
| | | <div |
|---|
| | | :class="currMenu == item.menuName ? 'active' : ''" |
|---|
| | | v-for="item in menuList" |
|---|
| | | :key="item.menuName" |
|---|
| | | class="bottombtn" |
|---|
| | | @click="handleMenuClick(item)" |
|---|
| | | > |
|---|
| | | <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="child in item.children" |
|---|
| | | :key="child.id" |
|---|
| | | :class="currProject == child.name ? 'active' : ''" |
|---|
| | | @click="handlePopoverClick(child)" |
|---|
| | | > |
|---|
| | | {{ child.name }} |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | </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"), |
|---|
| | | currMenu: "项ç®å±ç¤º", |
|---|
| | | currProject: "å
¨ç管ç½å¾", |
|---|
| | | menuList: [ |
|---|
| | | { |
|---|
| | | menuName: "项ç®å±ç¤º", |
|---|
| | | children: [ |
|---|
| | | { |
|---|
| | | name: "å
¨å½ç®¡ç½å¾", |
|---|
| | | id: "qggwt", |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | name: "å
¨ç管ç½å¾", |
|---|
| | | id: "qqgwt", |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | name: "å
¨å½é¡¹ç®", |
|---|
| | | id: "qgxm", |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | name: "å
¨ç项ç®", |
|---|
| | | id: "qqxm", |
|---|
| | | }, |
|---|
| | | ], |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | menuName: "å·¥ç¨å±ç¤º", |
|---|
| | | children: [ |
|---|
| | | { |
|---|
| | | name: "ä¸ä¿ä¸çº¿ç®¡éå·¥ç¨", |
|---|
| | | id: "zedx", |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | name: "西æ°ä¸è¾ä¸çº¿ä¸æ管éå·¥ç¨", |
|---|
| | | id: "xqds", |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | name: "ä¸ç¼
天ç¶æ°ç®¡éå·¥ç¨", |
|---|
| | | id: "zmtrq", |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | name: "å±±ä¸å®ç½æ°å¹²çº¿", |
|---|
| | | id: "sdxgx", |
|---|
| | | }, |
|---|
| | | ], |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | menuName: "å·¥ç¨å·¡è§", |
|---|
| | | children: [ |
|---|
| | | { |
|---|
| | | name: "ä¸ä¿ä¸çº¿ç®¡éå·¥ç¨", |
|---|
| | | id: "zedx", |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | name: "西æ°ä¸è¾ä¸çº¿ä¸æ管éå·¥ç¨", |
|---|
| | | id: "xqds", |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | name: "ä¸ç¼
天ç¶æ°ç®¡éå·¥ç¨", |
|---|
| | | id: "zmtrq", |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | name: "å±±ä¸å®ç½æ°å¹²çº¿", |
|---|
| | | id: "sdxgx", |
|---|
| | | }, |
|---|
| | | ], |
|---|
| | | }, |
|---|
| | | ], |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | 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 |
|---|
| | | }, |
|---|
| | | handleMenuClick(menu) { |
|---|
| | | this.currMenu = menu.menuName |
|---|
| | | }, |
|---|
| | | handlePopoverClick(child) { |
|---|
| | | this.currProject = child.name |
|---|
| | | }, |
|---|
| | | |
|---|
| | | //项ç®å±ç¤º |
|---|
| | | DisplayCurrentProject(parm) { |
|---|
| | | console.log(parm) |
|---|
| | | //æå¼æè
å è½½å¾å± |
|---|
| | | |
|---|
| | | //é£å°æå®ä½ç½® |
|---|
| | | }, |
|---|
| | | |
|---|
| | | //å·¥ç¨æ¼«æ¸¸é£è¡ |
|---|
| | | FlyCurrentProject(parm) { |
|---|
| | | console.log(parm) |
|---|
| | | //æå¼æè
å è½½å¾å± |
|---|
| | | |
|---|
| | | //å¼å§é£è¡ |
|---|
| | | }, |
|---|
| | | }, |
|---|
| | | } |
|---|
| | | </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; |
|---|
| | | &.active { |
|---|
| | | background: url(~@/assets/img/Screen/centerbtnc.png); |
|---|
| | | background-size: 100% 100%; |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | |
|---|
| | | .bottom2 { |
|---|
| | | height: 36px; |
|---|
| | | width: 100%; |
|---|
| | | display: flex; |
|---|
| | | align-items: center; |
|---|
| | | justify-content: center; |
|---|
| | | |
|---|
| | | img { |
|---|
| | | width: 80%; |
|---|
| | | height: 100%; |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | .popover { |
|---|
| | | display: flex; |
|---|
| | | justify-content: center; |
|---|
| | | width: 163px; |
|---|
| | | height: 239px; |
|---|
| | | background: url(~@/assets/img/Screen/centerTooltip.png); |
|---|
| | | background-size: 100% 100%; |
|---|
| | | border: none; |
|---|
| | | .popper__arrow { |
|---|
| | | display: none; |
|---|
| | | } |
|---|
| | | .popover-content { |
|---|
| | | &__header { |
|---|
| | | display: flex; |
|---|
| | | justify-content: center; |
|---|
| | | align-items: center; |
|---|
| | | text-align: center; |
|---|
| | | width: 130px; |
|---|
| | | height: 30px; |
|---|
| | | font-size: 18px; |
|---|
| | | color: #fff; |
|---|
| | | &::before, |
|---|
| | | &::after { |
|---|
| | | margin: 0 5px; |
|---|
| | | content: ""; |
|---|
| | | display: inline-block; |
|---|
| | | background-color: #466c99; |
|---|
| | | border-radius: 50%; |
|---|
| | | width: 8px; |
|---|
| | | height: 8px; |
|---|
| | | } |
|---|
| | | } |
|---|
| | | &__list { |
|---|
| | | display: flex; |
|---|
| | | flex-direction: column; |
|---|
| | | justify-content: space-evenly; |
|---|
| | | height: 190px; |
|---|
| | | |
|---|
| | | &__item { |
|---|
| | | color: #fff; |
|---|
| | | width: 130px; |
|---|
| | | height: 30px; |
|---|
| | | line-height: 30px; |
|---|
| | | text-align: center; |
|---|
| | | // background-color: orange; |
|---|
| | | cursor: pointer; |
|---|
| | | background: url(~@/assets/img/Screen/btnbg.png); |
|---|
| | | background-size: 100% 100%; |
|---|
| | | |
|---|
| | | &.active { |
|---|
| | | // background-color: aqua; |
|---|
| | | background: url(~@/assets/img/Screen/btnc.png); |
|---|
| | | background-size: 100% 100%; |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | </style> |
|---|
| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | <template> |
|---|
| | | <div class="current"> |
|---|
| | | <div class="leftarrow"> |
|---|
| | | <img :src="leftImg" @click="ChangeLeft" /> |
|---|
| | | </div> |
|---|
| | | <div class="leftContainer" v-show="ChartDisplay"> |
|---|
| | | <div class="current1" id="leftCurrent1"></div> |
|---|
| | | <div class="current1" id="leftCurrent2"></div> |
|---|
| | | <div class="current1" id="leftCurrent3"></div> |
|---|
| | | </div> |
|---|
| | | <div class="leftContainer" v-show="ProjectreeDisplay"> |
|---|
| | | <project-tree></project-tree> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | </template> |
|---|
| | | <script> |
|---|
| | | import ProjectTree from './ProjectTree.vue' |
|---|
| | | export default { |
|---|
| | | components: { |
|---|
| | | ProjectTree |
|---|
| | | }, |
|---|
| | | data() { |
|---|
| | | return { |
|---|
| | | leftMessage: "init", |
|---|
| | | ChartDisplay: true, |
|---|
| | | ProjectreeDisplay: false, |
|---|
| | | leftImg: require("../../assets/img/Screen/rightArrow.png"), |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | mounted() { |
|---|
| | | this.OpenLeftInit(); |
|---|
| | | this.OpenLeftInitChart(); |
|---|
| | | }, |
|---|
| | | methods: { |
|---|
| | | ChangeLeft() { |
|---|
| | | if (this.leftMessage == "init") { |
|---|
| | | if (this.ChartDisplay) { |
|---|
| | | this.leftImg = require("../../assets/img/Screen/leftArrow.png") |
|---|
| | | } else { |
|---|
| | | this.leftImg = require("../../assets/img/Screen/rightArrow.png") |
|---|
| | | } |
|---|
| | | this.ChartDisplay = !this.ChartDisplay; |
|---|
| | | } |
|---|
| | | |
|---|
| | | if (this.leftMessage == "projectree") { |
|---|
| | | if (this.ProjectreeDisplay) { |
|---|
| | | this.leftImg = require("../../assets/img/Screen/leftArrow.png") |
|---|
| | | } else { |
|---|
| | | this.leftImg = require("../../assets/img/Screen/rightArrow.png") |
|---|
| | | } |
|---|
| | | this.ProjectreeDisplay = !this.ProjectreeDisplay; |
|---|
| | | } |
|---|
| | | |
|---|
| | | |
|---|
| | | this.$parent.ChangeWidth("left"); |
|---|
| | | }, |
|---|
| | | //æå¼å¤§å±å·¦ä¾§çé¢ |
|---|
| | | OpenLeftInit() { |
|---|
| | | this.ChartDisplay = true; |
|---|
| | | this.ProjectreeDisplay = false; |
|---|
| | | this.leftMessage = "init"; |
|---|
| | | this.OpenLeftInitChart(); |
|---|
| | | }, |
|---|
| | | //æå¼å·¥ç¨æ |
|---|
| | | OpenLeftProjectTree() { |
|---|
| | | this.ChartDisplay = false; |
|---|
| | | this.ProjectreeDisplay = true; |
|---|
| | | this.leftMessage = "projectree"; |
|---|
| | | }, |
|---|
| | | //大å±çé¢å¾è¡¨ |
|---|
| | | OpenLeftInitChart() { |
|---|
| | | //å·¦ä¸å¾ |
|---|
| | | let option1 = { |
|---|
| | | title: { |
|---|
| | | text: '项ç®åç±»', |
|---|
| | | padding: [10, 30], |
|---|
| | | textStyle: { |
|---|
| | | color: '#fff', |
|---|
| | | fontSize: 15 |
|---|
| | | }, |
|---|
| | | }, |
|---|
| | | tooltip: { |
|---|
| | | trigger: 'axis', |
|---|
| | | axisPointer: { |
|---|
| | | type: 'shadow', |
|---|
| | | }, |
|---|
| | | }, |
|---|
| | | grid: { |
|---|
| | | left: '2%', |
|---|
| | | right: '4%', |
|---|
| | | bottom: '0%', |
|---|
| | | containLabel: true, |
|---|
| | | }, |
|---|
| | | xAxis: { |
|---|
| | | type: 'value', |
|---|
| | | boundaryGap: [0, 0.01], |
|---|
| | | axisLine: { |
|---|
| | | lineStyle: { |
|---|
| | | color: '#ccc', |
|---|
| | | }, |
|---|
| | | }, |
|---|
| | | axisLabel: { |
|---|
| | | show: true, |
|---|
| | | textStyle: { |
|---|
| | | color: '#fff', |
|---|
| | | }, |
|---|
| | | }, |
|---|
| | | }, |
|---|
| | | yAxis: { |
|---|
| | | type: 'category', |
|---|
| | | data: [ |
|---|
| | | '管éç±»', |
|---|
| | | '管ç½ç±»', |
|---|
| | | 'åºå»ºç±»', |
|---|
| | | 'èªç©ºæµé', |
|---|
| | | 'é£é©ææ¥', |
|---|
| | | 'å·¥ç¨å¹è®', |
|---|
| | | ], |
|---|
| | | axisLine: { |
|---|
| | | lineStyle: { |
|---|
| | | color: '#ccc', |
|---|
| | | }, |
|---|
| | | }, |
|---|
| | | axisLabel: { |
|---|
| | | show: true, |
|---|
| | | textStyle: { |
|---|
| | | color: '#fff', |
|---|
| | | }, |
|---|
| | | }, |
|---|
| | | }, |
|---|
| | | series: [ |
|---|
| | | { |
|---|
| | | name: '项ç®åç±»', |
|---|
| | | type: 'bar', |
|---|
| | | barWidth: 20, |
|---|
| | | data: [36, 45, 25, 15, 49, 33], |
|---|
| | | itemStyle: { |
|---|
| | | normal: { |
|---|
| | | // æ±å½¢å¾åè§ï¼åå§åææ |
|---|
| | | barBorderRadius: [0, 90, 90, 0], |
|---|
| | | color: (params) => { |
|---|
| | | var colorList = [ |
|---|
| | | ['#00FCFF', '#008297'], |
|---|
| | | ['#0091FF', '#005EA4'], |
|---|
| | | ['#901698', '#F157EE'], |
|---|
| | | ['#40FBCB', '#009871'], |
|---|
| | | ['#FF515A', '#FFDD53'], |
|---|
| | | ['#6574E2', '#261164'], |
|---|
| | | ]; |
|---|
| | | var colorItem = colorList[params.dataIndex]; |
|---|
| | | return new this.$echarts.graphic.LinearGradient( |
|---|
| | | 1, |
|---|
| | | 0, |
|---|
| | | 0, |
|---|
| | | 0, |
|---|
| | | [ |
|---|
| | | { |
|---|
| | | offset: 0, |
|---|
| | | color: colorItem[0], |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | offset: 1, |
|---|
| | | color: colorItem[1], |
|---|
| | | }, |
|---|
| | | ], |
|---|
| | | false |
|---|
| | | ); |
|---|
| | | }, |
|---|
| | | }, |
|---|
| | | }, |
|---|
| | | }, |
|---|
| | | ], |
|---|
| | | }; |
|---|
| | | let myChart1 = this.$echarts.init(document.getElementById("leftCurrent1")); |
|---|
| | | myChart1.setOption(option1); |
|---|
| | | window.addEventListener("resize", function () { |
|---|
| | | myChart1.resize(); |
|---|
| | | }); |
|---|
| | | |
|---|
| | | //å·¦äºå¾ |
|---|
| | | let dataAxis = [ |
|---|
| | | 'ä¸ä¿ä¸çº¿ç®¡éå·¥ç¨å段', |
|---|
| | | 'ä¸ä¿ä¸çº¿ç®¡éå·¥ç¨ä¸æ®µ', |
|---|
| | | '广å·ç«', |
|---|
| | | 'åå±±LNG', |
|---|
| | | 'æ°çè¿æ¨æ²ç«åº', |
|---|
| | | 'ä¸ç¼
天ç¶æ°ç®¡éé£é©ææ¥èªç©ºæå½±æµé', |
|---|
| | | ]; |
|---|
| | | let data = [0.4, 0.2, 0.7, 0.65, 0.5, 0.1]; |
|---|
| | | let yMax = 500; |
|---|
| | | let dataShadow = []; |
|---|
| | | for (let i = 0; i < data.length; i++) { |
|---|
| | | dataShadow.push(yMax); |
|---|
| | | } |
|---|
| | | let option2 = { |
|---|
| | | title: { |
|---|
| | | text: '项ç®å®æ度', |
|---|
| | | padding: [10, 30], |
|---|
| | | textStyle: { |
|---|
| | | color: '#fff', |
|---|
| | | fontSize: 15 |
|---|
| | | }, |
|---|
| | | }, |
|---|
| | | tooltip: { |
|---|
| | | trigger: 'axis', |
|---|
| | | axisPointer: { |
|---|
| | | type: 'shadow', |
|---|
| | | }, |
|---|
| | | }, |
|---|
| | | grid: { |
|---|
| | | left: '3%', |
|---|
| | | right: '0%', |
|---|
| | | bottom: '0%', |
|---|
| | | containLabel: true, |
|---|
| | | }, |
|---|
| | | xAxis: { |
|---|
| | | type: 'category', |
|---|
| | | data: dataAxis, |
|---|
| | | axisLabel: { |
|---|
| | | show: true, |
|---|
| | | textStyle: { |
|---|
| | | color: '#fff', |
|---|
| | | }, |
|---|
| | | formatter: function (params) { |
|---|
| | | var newParamsName = ''; // æç»æ¼æ¥æçå符串 |
|---|
| | | var paramsNameNumber = params.length; // å®é
æ ç¾çä¸ªæ° |
|---|
| | | var provideNumber = 4; // æ¯è¡è½æ¾ç¤ºçåçä¸ªæ° |
|---|
| | | var rowNumber = Math.ceil(paramsNameNumber / provideNumber); // æ¢è¡çè¯ï¼éè¦æ¾ç¤ºå è¡ï¼åä¸åæ´ |
|---|
| | | /** |
|---|
| | | * å¤ææ ç¾ç个æ°æ¯å¦å¤§äºè§å®ç个æ°ï¼ å¦æ大äºï¼åè¿è¡æ¢è¡å¤ç å¦æä¸å¤§äºï¼å³çäºæå°äºï¼å°±è¿ååæ ç¾ |
|---|
| | | */ |
|---|
| | | // æ¡ä»¶çåäºrowNumber>1 |
|---|
| | | if (paramsNameNumber > provideNumber) { |
|---|
| | | /** 循ç¯æ¯ä¸è¡,pè¡¨ç¤ºè¡ */ |
|---|
| | | for (var p = 0; p < rowNumber; p++) { |
|---|
| | | var tempStr = ''; // 表示æ¯ä¸æ¬¡æªåçå符串 |
|---|
| | | var start = p * provideNumber; // å¼å§æªåçä½ç½® |
|---|
| | | var end = start + provideNumber; // ç»ææªåçä½ç½® |
|---|
| | | // æ¤å¤ç¹æ®å¤çæåä¸è¡çç´¢å¼å¼ |
|---|
| | | if (p == rowNumber - 1) { |
|---|
| | | // æåä¸æ¬¡ä¸æ¢è¡ |
|---|
| | | tempStr = params.substring(start, paramsNameNumber); |
|---|
| | | } else { |
|---|
| | | // æ¯ä¸æ¬¡æ¼æ¥å符串并æ¢è¡ |
|---|
| | | tempStr = params.substring(start, end) + '\n'; |
|---|
| | | } |
|---|
| | | newParamsName += tempStr; // æç»æ¼æçå符串 |
|---|
| | | } |
|---|
| | | } else { |
|---|
| | | // å°æ§æ ç¾çå¼èµç»æ°æ ç¾ |
|---|
| | | newParamsName = params; |
|---|
| | | } |
|---|
| | | //å°æç»çå符串è¿å |
|---|
| | | return newParamsName; |
|---|
| | | }, |
|---|
| | | }, |
|---|
| | | }, |
|---|
| | | yAxis: { |
|---|
| | | axisLine: { |
|---|
| | | show: true, |
|---|
| | | }, |
|---|
| | | |
|---|
| | | splitLine: { |
|---|
| | | show: false |
|---|
| | | }, |
|---|
| | | axisTick: { |
|---|
| | | show: false, |
|---|
| | | }, |
|---|
| | | |
|---|
| | | axisLabel: { |
|---|
| | | show: true, |
|---|
| | | textStyle: { |
|---|
| | | color: '#fff', |
|---|
| | | }, |
|---|
| | | }, |
|---|
| | | }, |
|---|
| | | dataZoom: [ |
|---|
| | | { |
|---|
| | | type: 'inside', |
|---|
| | | }, |
|---|
| | | ], |
|---|
| | | series: [ |
|---|
| | | { |
|---|
| | | type: 'bar', |
|---|
| | | barWidth: '40%', |
|---|
| | | showBackground: true, |
|---|
| | | itemStyle: { |
|---|
| | | color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [ |
|---|
| | | { offset: 0, color: '#83bff6' }, |
|---|
| | | { offset: 0.5, color: '#188df0' }, |
|---|
| | | { offset: 1, color: '#188df0' }, |
|---|
| | | ]), |
|---|
| | | }, |
|---|
| | | emphasis: { |
|---|
| | | itemStyle: { |
|---|
| | | color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [ |
|---|
| | | { offset: 0, color: '#2378f7' }, |
|---|
| | | { offset: 0.7, color: '#2378f7' }, |
|---|
| | | { offset: 1, color: '#83bff6' }, |
|---|
| | | ]), |
|---|
| | | }, |
|---|
| | | }, |
|---|
| | | data: data, |
|---|
| | | }, |
|---|
| | | ], |
|---|
| | | }; |
|---|
| | | const zoomSize = 6; |
|---|
| | | let myChart2 = this.$echarts.init(document.getElementById('leftCurrent2')); |
|---|
| | | myChart2.on('click', function (params) { |
|---|
| | | myChart2.dispatchAction({ |
|---|
| | | type: 'dataZoom', |
|---|
| | | startValue: dataAxis[Math.max(params.dataIndex - zoomSize / 2, 0)], |
|---|
| | | endValue: |
|---|
| | | dataAxis[ |
|---|
| | | Math.min(params.dataIndex + zoomSize / 2, data.length - 1) |
|---|
| | | ], |
|---|
| | | }); |
|---|
| | | }); |
|---|
| | | |
|---|
| | | myChart2.setOption(option2); |
|---|
| | | window.addEventListener('resize', function () { |
|---|
| | | myChart2.resize(); |
|---|
| | | }); |
|---|
| | | |
|---|
| | | |
|---|
| | | //å·¦ä¸å¾ |
|---|
| | | var legendData = ['人å', 'åæ´å人å']; //å¾ä¾ |
|---|
| | | |
|---|
| | | var indicator = [ |
|---|
| | | { name: 'ä¸ç¼
天ç¶æ°ç®¡éé£é©ææ¥èªç©ºæå½±æµé', max: 80 }, |
|---|
| | | { name: 'åå±±LNG', max: 80 }, |
|---|
| | | { name: 'ä¸ä¿ä¸çº¿ç®¡éå·¥ç¨å段', max: 160 }, |
|---|
| | | { name: 'ä¸ä¿ä¸çº¿ç®¡éå·¥ç¨ä¸æ®µ', max: 100 }, |
|---|
| | | { name: 'æ°çè¿æ¨æ²ç«åº', max: 40 }, |
|---|
| | | { name: '广å·ç«', max: 40 }, |
|---|
| | | ]; |
|---|
| | | var dataArr = [ |
|---|
| | | { |
|---|
| | | value: [35, 30, 80, 70, 15, 15], |
|---|
| | | name: legendData[0], |
|---|
| | | itemStyle: { |
|---|
| | | normal: { |
|---|
| | | lineStyle: { |
|---|
| | | color: '#4A99FF', |
|---|
| | | // shadowColor: '#4A99FF', |
|---|
| | | // shadowBlur: 10, |
|---|
| | | }, |
|---|
| | | shadowColor: '#4A99FF', |
|---|
| | | shadowBlur: 10, |
|---|
| | | }, |
|---|
| | | }, |
|---|
| | | areaStyle: { |
|---|
| | | normal: { |
|---|
| | | // å项åºåå¡«å
æ ·å¼ |
|---|
| | | color: { |
|---|
| | | type: 'linear', |
|---|
| | | x: 0, //å³ |
|---|
| | | y: 0, //ä¸ |
|---|
| | | x2: 1, //å·¦ |
|---|
| | | y2: 1, //ä¸ |
|---|
| | | colorStops: [ |
|---|
| | | { |
|---|
| | | offset: 0, |
|---|
| | | color: '#4A99FF', |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | offset: 0.5, |
|---|
| | | color: 'rgba(0,0,0,0)', |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | offset: 1, |
|---|
| | | color: '#4A99FF', |
|---|
| | | }, |
|---|
| | | ], |
|---|
| | | globalCoord: false, |
|---|
| | | }, |
|---|
| | | opacity: 1, // åºåéæ度 |
|---|
| | | }, |
|---|
| | | }, |
|---|
| | | //å¨æç¹å¤æ¾ç¤ºæ°å¼ |
|---|
| | | label: { |
|---|
| | | show: true, |
|---|
| | | formatter: function (params) { |
|---|
| | | return params.value; |
|---|
| | | }, |
|---|
| | | }, |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | value: [40, 25, 110, 60, 18, 12], |
|---|
| | | name: legendData[1], |
|---|
| | | itemStyle: { |
|---|
| | | normal: { |
|---|
| | | lineStyle: { |
|---|
| | | color: '#4BFFFC', |
|---|
| | | // shadowColor: '#4BFFFC', |
|---|
| | | // shadowBlur: 10, |
|---|
| | | }, |
|---|
| | | shadowColor: '#4BFFFC', |
|---|
| | | shadowBlur: 10, |
|---|
| | | }, |
|---|
| | | }, |
|---|
| | | areaStyle: { |
|---|
| | | normal: { |
|---|
| | | // å项åºåå¡«å
æ ·å¼ |
|---|
| | | color: { |
|---|
| | | type: 'linear', |
|---|
| | | x: 0, //å³ |
|---|
| | | y: 0, //ä¸ |
|---|
| | | x2: 1, //å·¦ |
|---|
| | | y2: 1, //ä¸ |
|---|
| | | colorStops: [ |
|---|
| | | { |
|---|
| | | offset: 0, |
|---|
| | | color: '#4BFFFC', |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | offset: 0.5, |
|---|
| | | color: 'rgba(0,0,0,0)', |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | offset: 1, |
|---|
| | | color: '#4BFFFC', |
|---|
| | | }, |
|---|
| | | ], |
|---|
| | | globalCoord: false, |
|---|
| | | }, |
|---|
| | | opacity: 1, // åºåéæ度 |
|---|
| | | }, |
|---|
| | | }, |
|---|
| | | //å¨æç¹å¤æ¾ç¤ºæ°å¼ |
|---|
| | | label: { |
|---|
| | | show: true, |
|---|
| | | formatter: function (params) { |
|---|
| | | return params.value; |
|---|
| | | }, |
|---|
| | | }, |
|---|
| | | }, |
|---|
| | | ]; |
|---|
| | | var colorArr = ['#4A99FF', '#4BFFFC']; //é¢è² |
|---|
| | | let option3 = { |
|---|
| | | title: { |
|---|
| | | text: '人ååå¨', |
|---|
| | | padding: [10, 30], |
|---|
| | | textStyle: { |
|---|
| | | color: '#fff', |
|---|
| | | fontSize: 15 |
|---|
| | | }, |
|---|
| | | }, |
|---|
| | | color: colorArr, |
|---|
| | | radar: { |
|---|
| | | // shape: 'circle', |
|---|
| | | name: { |
|---|
| | | textStyle: { |
|---|
| | | color: '#fff', |
|---|
| | | fontSize: 12, |
|---|
| | | }, |
|---|
| | | }, |
|---|
| | | radius: 75, |
|---|
| | | nameGap: 2, // å¾ä¸å·¥èºçåè·ç¦»å¾çè·ç¦» |
|---|
| | | splitNumber: 4, // ç½æ ¼çº¿çä¸ªæ° |
|---|
| | | center: ["50%", "63%"], // å¾çä½ç½® |
|---|
| | | |
|---|
| | | indicator: indicator, |
|---|
| | | splitArea: { |
|---|
| | | // åæ è½´å¨ grid åºåä¸çåéåºåï¼é»è®¤ä¸æ¾ç¤ºã |
|---|
| | | show: true, |
|---|
| | | areaStyle: { |
|---|
| | | // åéåºåçæ ·å¼è®¾ç½®ã |
|---|
| | | color: ['rgba(255,255,255,0)', 'rgba(255,255,255,0)'], // åéåºåé¢è²ãåéåºåä¼ææ°ç»ä¸é¢è²ç顺åºä¾æ¬¡å¾ªç¯è®¾ç½®é¢è²ãé»è®¤æ¯ä¸ä¸ªæ·±æµ
çé´éè²ã |
|---|
| | | }, |
|---|
| | | }, |
|---|
| | | axisLine: { |
|---|
| | | //æåå¤åææ¬çåéçº¿æ ·å¼ |
|---|
| | | lineStyle: { |
|---|
| | | color: '#153269', |
|---|
| | | }, |
|---|
| | | }, |
|---|
| | | splitLine: { |
|---|
| | | lineStyle: { |
|---|
| | | color: '#113865', // åé线é¢è² |
|---|
| | | width: 1, // åé线线宽 |
|---|
| | | }, |
|---|
| | | }, |
|---|
| | | }, |
|---|
| | | series: [ |
|---|
| | | { |
|---|
| | | type: 'radar', |
|---|
| | | symbolSize: 4, |
|---|
| | | // symbol: 'angle', |
|---|
| | | data: dataArr, |
|---|
| | | }, |
|---|
| | | ], |
|---|
| | | }; |
|---|
| | | |
|---|
| | | let myChart3 = this.$echarts.init(document.getElementById('leftCurrent3')); |
|---|
| | | myChart3.setOption(option3); |
|---|
| | | window.addEventListener('resize', function () { |
|---|
| | | myChart3.resize(); |
|---|
| | | }); |
|---|
| | | |
|---|
| | | }, |
|---|
| | | |
|---|
| | | |
|---|
| | | |
|---|
| | | |
|---|
| | | |
|---|
| | | |
|---|
| | | }, |
|---|
| | | } |
|---|
| | | </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> |
|---|
| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | <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.camera.flyTo({ |
|---|
| | | destination: { |
|---|
| | | x: -3919623.6069864673, |
|---|
| | | y: 13752070.475126158, |
|---|
| | | z: 8307291.863719194, |
|---|
| | | }, |
|---|
| | | orientation: { |
|---|
| | | heading: 6.283185307179582, |
|---|
| | | roll: 0, |
|---|
| | | pitch: -1.5707039123519846, |
|---|
| | | }, |
|---|
| | | }) |
|---|
| | | |
|---|
| | | 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> |
|---|
| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | <template> |
|---|
| | | <div class="current"> |
|---|
| | | <div class="rightContainer" v-show="ChartDisplay"> |
|---|
| | | <div class="current1"> |
|---|
| | | <div class="aside-title">ç®å½åå¸</div> |
|---|
| | | <echart11></echart11> |
|---|
| | | </div> |
|---|
| | | <div class="current1"> |
|---|
| | | <div class="aside-title">æ°æ®åæå¡æ交</div> |
|---|
| | | <echart12></echart12> |
|---|
| | | </div> |
|---|
| | | <div class="current1"> |
|---|
| | | <div class="aside-title">åç±»æ°æ®åå¨åå¸</div> |
|---|
| | | <echart13></echart13> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | <div class="rightarrow"> |
|---|
| | | <img :src="RightImg" @click="ChangeRight" /> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | </template> |
|---|
| | | <script> |
|---|
| | | import echart11 from "@/components/echart11.vue" |
|---|
| | | import echart12 from "@/components/echart12.vue" |
|---|
| | | import echart13 from "@/components/echart13.vue" |
|---|
| | | export default { |
|---|
| | | components: { |
|---|
| | | echart11, |
|---|
| | | echart12, |
|---|
| | | echart13, |
|---|
| | | }, |
|---|
| | | 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; |
|---|
| | | } |
|---|
| | | .aside-title { |
|---|
| | | padding-left: 30px; |
|---|
| | | height: 27px; |
|---|
| | | line-height: 27px; |
|---|
| | | font-size: 16px; |
|---|
| | | color: #fff; |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | </style> |
|---|
| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | <template> |
|---|
| | | <div class="top"> |
|---|
| | | <div class="topleft"> |
|---|
| | | <div |
|---|
| | | class="topleft1 topleftC" @click="OpenInitChart" |
|---|
| | | :class="{ topleft1: screen == false, topleftC: screen == true }" |
|---|
| | | > |
|---|
| | | <img src="../../assets/img/Screen/bigST.png" /> |
|---|
| | | <span>大å±è§å¾</span> |
|---|
| | | </div> |
|---|
| | | <div |
|---|
| | | class="topleft1 topleftC" @click="OpenProjectree" |
|---|
| | | :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") |
|---|
| | | }, |
|---|
| | | |
|---|
| | | //æå¼å¤§å± |
|---|
| | | OpenInitChart(){ |
|---|
| | | this.$parent.$refs.mapleft.OpenLeftInit(); |
|---|
| | | }, |
|---|
| | | |
|---|
| | | //æå¼å·¥ç¨æ |
|---|
| | | OpenProjectree(){ |
|---|
| | | this.$parent.$refs.mapleft.OpenLeftProjectTree(); |
|---|
| | | } |
|---|
| | | |
|---|
| | | |
|---|
| | | |
|---|
| | | }, |
|---|
| | | } |
|---|
| | | </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> |
|---|
| | |
|---|
| | | components: {}, |
|---|
| | | data() { |
|---|
| | | //è¿éåæ¾æ°æ® |
|---|
| | | return { myChart: null }; |
|---|
| | | return { myChart: null } |
|---|
| | | }, |
|---|
| | | mounted() { |
|---|
| | | this.lineChart(); |
|---|
| | | this.$bus.$on('resizeEchart', (res) => { |
|---|
| | | this.myChart.resize(); |
|---|
| | | }); |
|---|
| | | this.lineChart() |
|---|
| | | this.$bus.$on("resizeEchart", res => { |
|---|
| | | this.myChart.resize() |
|---|
| | | }) |
|---|
| | | }, |
|---|
| | | //æ¹æ³éå |
|---|
| | | methods: { |
|---|
| | | lineChart() { |
|---|
| | | let option = { |
|---|
| | | title: { |
|---|
| | | text: 'ç®å½åå¸', |
|---|
| | | top: '15', |
|---|
| | | text: "ç®å½åå¸", |
|---|
| | | top: "15", |
|---|
| | | textStyle: { |
|---|
| | | |
|---|
| | | color: '#fff', |
|---|
| | | color: "#fff", |
|---|
| | | }, |
|---|
| | | show: false, |
|---|
| | | }, |
|---|
| | | tooltip: { |
|---|
| | | trigger: 'axis', |
|---|
| | | trigger: "axis", |
|---|
| | | axisPointer: { |
|---|
| | | type: 'shadow', |
|---|
| | | type: "shadow", |
|---|
| | | }, |
|---|
| | | }, |
|---|
| | | // legend: {}, |
|---|
| | | grid: { |
|---|
| | | left: '0%', |
|---|
| | | |
|---|
| | | right: '4%', |
|---|
| | | bottom: '0%', |
|---|
| | | top: "5", |
|---|
| | | left: "0%", |
|---|
| | | right: "4%", |
|---|
| | | bottom: "10", |
|---|
| | | containLabel: true, |
|---|
| | | }, |
|---|
| | | xAxis: { |
|---|
| | | type: 'value', |
|---|
| | | type: "value", |
|---|
| | | boundaryGap: [0, 0.01], |
|---|
| | | axisLine: { |
|---|
| | | lineStyle: { |
|---|
| | | color: '#ccc', |
|---|
| | | color: "#ccc", |
|---|
| | | }, |
|---|
| | | }, |
|---|
| | | axisLabel: { |
|---|
| | | show: true, |
|---|
| | | textStyle: { |
|---|
| | | color: '#fff', |
|---|
| | | color: "#fff", |
|---|
| | | }, |
|---|
| | | }, |
|---|
| | | }, |
|---|
| | | yAxis: { |
|---|
| | | type: 'category', |
|---|
| | | data: ['A1', 'A2', 'A3', 'A4', 'A5', 'A6', 'A7'], |
|---|
| | | type: "category", |
|---|
| | | data: ["A1", "A2", "A3", "A4", "A5", "A6", "A7"], |
|---|
| | | axisLine: { |
|---|
| | | lineStyle: { |
|---|
| | | color: '#ccc', |
|---|
| | | color: "#ccc", |
|---|
| | | }, |
|---|
| | | }, |
|---|
| | | axisLabel: { |
|---|
| | | show: true, |
|---|
| | | textStyle: { |
|---|
| | | color: '#fff', |
|---|
| | | color: "#fff", |
|---|
| | | }, |
|---|
| | | formatter: function (params) { |
|---|
| | | var newParamsName = ''; // æç»æ¼æ¥æçå符串 |
|---|
| | | var paramsNameNumber = params.length; // å®é
æ ç¾çä¸ªæ° |
|---|
| | | var provideNumber = 4; // æ¯è¡è½æ¾ç¤ºçåçä¸ªæ° |
|---|
| | | var rowNumber = Math.ceil(paramsNameNumber / provideNumber); // æ¢è¡çè¯ï¼éè¦æ¾ç¤ºå è¡ï¼åä¸åæ´ |
|---|
| | | var newParamsName = "" // æç»æ¼æ¥æçå符串 |
|---|
| | | var paramsNameNumber = params.length // å®é
æ ç¾çä¸ªæ° |
|---|
| | | var provideNumber = 4 // æ¯è¡è½æ¾ç¤ºçåçä¸ªæ° |
|---|
| | | var rowNumber = Math.ceil(paramsNameNumber / provideNumber) // æ¢è¡çè¯ï¼éè¦æ¾ç¤ºå è¡ï¼åä¸åæ´ |
|---|
| | | /** |
|---|
| | | * å¤ææ ç¾ç个æ°æ¯å¦å¤§äºè§å®ç个æ°ï¼ å¦æ大äºï¼åè¿è¡æ¢è¡å¤ç å¦æä¸å¤§äºï¼å³çäºæå°äºï¼å°±è¿ååæ ç¾ |
|---|
| | | */ |
|---|
| | |
|---|
| | | if (paramsNameNumber > provideNumber) { |
|---|
| | | /** 循ç¯æ¯ä¸è¡,pè¡¨ç¤ºè¡ */ |
|---|
| | | for (var p = 0; p < rowNumber; p++) { |
|---|
| | | var tempStr = ''; // 表示æ¯ä¸æ¬¡æªåçå符串 |
|---|
| | | var start = p * provideNumber; // å¼å§æªåçä½ç½® |
|---|
| | | var end = start + provideNumber; // ç»ææªåçä½ç½® |
|---|
| | | var tempStr = "" // 表示æ¯ä¸æ¬¡æªåçå符串 |
|---|
| | | var start = p * provideNumber // å¼å§æªåçä½ç½® |
|---|
| | | var end = start + provideNumber // ç»ææªåçä½ç½® |
|---|
| | | // æ¤å¤ç¹æ®å¤çæåä¸è¡çç´¢å¼å¼ |
|---|
| | | if (p == rowNumber - 1) { |
|---|
| | | // æåä¸æ¬¡ä¸æ¢è¡ |
|---|
| | | tempStr = params.substring(start, paramsNameNumber); |
|---|
| | | tempStr = params.substring(start, paramsNameNumber) |
|---|
| | | } else { |
|---|
| | | // æ¯ä¸æ¬¡æ¼æ¥å符串并æ¢è¡ |
|---|
| | | tempStr = params.substring(start, end) + '\n'; |
|---|
| | | tempStr = params.substring(start, end) + "\n" |
|---|
| | | } |
|---|
| | | newParamsName += tempStr; // æç»æ¼æçå符串 |
|---|
| | | newParamsName += tempStr // æç»æ¼æçå符串 |
|---|
| | | } |
|---|
| | | } else { |
|---|
| | | // å°æ§æ ç¾çå¼èµç»æ°æ ç¾ |
|---|
| | | newParamsName = params; |
|---|
| | | newParamsName = params |
|---|
| | | } |
|---|
| | | //å°æç»çå符串è¿å |
|---|
| | | return newParamsName; |
|---|
| | | return newParamsName |
|---|
| | | }, |
|---|
| | | }, |
|---|
| | | }, |
|---|
| | | series: [ |
|---|
| | | { |
|---|
| | | name: 'ç®å½åå¸', |
|---|
| | | type: 'bar', |
|---|
| | | name: "ç®å½åå¸", |
|---|
| | | type: "bar", |
|---|
| | | barWidth: 20, |
|---|
| | | data: [120, 150, 110, 50, 70, 20, 70], |
|---|
| | | showBackground: true, |
|---|
| | |
|---|
| | | normal: { |
|---|
| | | // æ±å½¢å¾åè§ï¼åå§åææ |
|---|
| | | |
|---|
| | | color: (params) => { |
|---|
| | | color: params => { |
|---|
| | | var colorList = [ |
|---|
| | | ['#188df0', '#83bff6'], |
|---|
| | | ['#188df0', '#83bff6'], |
|---|
| | | ['#188df0', '#83bff6'], |
|---|
| | | ['#188df0', '#83bff6'], |
|---|
| | | ['#188df0', '#83bff6'], |
|---|
| | | ['#188df0', '#83bff6'], |
|---|
| | | ['#188df0', '#83bff6'], |
|---|
| | | ]; |
|---|
| | | var colorItem = colorList[params.dataIndex]; |
|---|
| | | ["#188df0", "#83bff6"], |
|---|
| | | ["#188df0", "#83bff6"], |
|---|
| | | ["#188df0", "#83bff6"], |
|---|
| | | ["#188df0", "#83bff6"], |
|---|
| | | ["#188df0", "#83bff6"], |
|---|
| | | ["#188df0", "#83bff6"], |
|---|
| | | ["#188df0", "#83bff6"], |
|---|
| | | ] |
|---|
| | | var colorItem = colorList[params.dataIndex] |
|---|
| | | return new this.$echarts.graphic.LinearGradient( |
|---|
| | | 1, |
|---|
| | | 0, |
|---|
| | |
|---|
| | | }, |
|---|
| | | ], |
|---|
| | | false |
|---|
| | | ); |
|---|
| | | ) |
|---|
| | | }, |
|---|
| | | }, |
|---|
| | | }, |
|---|
| | | }, |
|---|
| | | ], |
|---|
| | | }; |
|---|
| | | this.myChart = this.$echarts.init(document.getElementById('echart6')); |
|---|
| | | this.myChart.setOption(option); |
|---|
| | | window.addEventListener('resize', function () { |
|---|
| | | this.myChart.resize(); |
|---|
| | | }); |
|---|
| | | } |
|---|
| | | this.myChart = this.$echarts.init(document.getElementById("echart6")) |
|---|
| | | this.myChart.setOption(option) |
|---|
| | | window.addEventListener("resize", function () { |
|---|
| | | this.myChart.resize() |
|---|
| | | }) |
|---|
| | | }, |
|---|
| | | }, |
|---|
| | | created() { }, |
|---|
| | | }; |
|---|
| | | created() {}, |
|---|
| | | } |
|---|
| | | </script> |
|---|
| | | <style lang="less" scoped> |
|---|
| | | //@import url(); å¼å
¥å
Œ
±cssç±» |
|---|
| | |
|---|
| | | color: '#fff', |
|---|
| | | // fontSize: "22", |
|---|
| | | }, |
|---|
| | | show: false |
|---|
| | | // subtextStyle: { |
|---|
| | | // color: "#90979c", |
|---|
| | | // fontSize: "16", |
|---|
| | | // }, |
|---|
| | | }, |
|---|
| | | // å¾è¡¨çä½ç½® |
|---|
| | | // grid: { |
|---|
| | | // top:"4%" |
|---|
| | | // }, |
|---|
| | | grid: { |
|---|
| | | top: '10', |
|---|
| | | left: '0%', |
|---|
| | | right: '0%', |
|---|
| | | bottom: '0%', |
|---|
| | | containLabel: true, |
|---|
| | | }, |
|---|
| | | |
|---|
| | | color: colorArr, |
|---|
| | | legend: { |
|---|
| | | orient: 'vertical', |
|---|
| | | icon: 'circle', //å¾ä¾å½¢ç¶ |
|---|
| | | data: legendData, |
|---|
| | | top: 10, |
|---|
| | | top: 0, |
|---|
| | | right: 0, |
|---|
| | | itemWidth: 14, // å¾ä¾æ è®°çå¾å½¢å®½åº¦ã[ default: 25 ] |
|---|
| | | itemHeight: 14, // å¾ä¾æ è®°çå¾å½¢é«åº¦ã[ default: 14 ] |
|---|
| | |
|---|
| | | radius: 80, |
|---|
| | | nameGap: 2, // å¾ä¸å·¥èºçåè·ç¦»å¾çè·ç¦» |
|---|
| | | splitNumber: 4, // ç½æ ¼çº¿çä¸ªæ° |
|---|
| | | center: ["50%", "65%"], // å¾çä½ç½® |
|---|
| | | center: ["50%", "45%"], // å¾çä½ç½® |
|---|
| | | |
|---|
| | | indicator: indicator, |
|---|
| | | splitArea: { |
|---|
| | |
|---|
| | | textStyle: { |
|---|
| | | color: '#fff', |
|---|
| | | }, |
|---|
| | | show: false |
|---|
| | | }, |
|---|
| | | tooltip: { |
|---|
| | | trigger: 'axis', |
|---|
| | |
|---|
| | | }, |
|---|
| | | }, |
|---|
| | | grid: { |
|---|
| | | top: '10', |
|---|
| | | left: '0%', |
|---|
| | | right: '0%', |
|---|
| | | bottom: '0%', |
|---|
| | |
|---|
| | | 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 }); |
|---|
| | |
|---|
| | | isNaviget: false, |
|---|
| | | treeData: null, |
|---|
| | | checkedKeys: [], |
|---|
| | | queryInfo:[], |
|---|
| | | }, |
|---|
| | | mutations: { |
|---|
| | | //è·åæéåé |
|---|
| | |
|---|
| | | class="file" |
|---|
| | | style="display: none" |
|---|
| | | /> |
|---|
| | | <input |
|---|
| | | :accept="'.shp, .shx, .dbf, .prj'" |
|---|
| | | style="display: none" |
|---|
| | | ref="pathClear" |
|---|
| | | type="file" |
|---|
| | | name="file" |
|---|
| | | id="shpFile" |
|---|
| | | multiple="multiple" |
|---|
| | | @change="handleOpenShp()" |
|---|
| | | /> |
|---|
| | | </div> |
|---|
| | | </template> |
|---|
| | | |
|---|
| | |
|---|
| | | import mapinfo from '../Tools/mapinfo.vue'; |
|---|
| | | import maplayer from '../Tools/maplayer.vue'; |
|---|
| | | import queryinfo from '../Tools/queryinfo.vue'; |
|---|
| | | import $ from 'jquery' |
|---|
| | | import { getToken } from '@/utils/auth'; |
|---|
| | | import { |
|---|
| | | OverviewMap, |
|---|
| | | defaults as defaultControls, |
|---|
| | | FullScreen, |
|---|
| | | ScaleLine, |
|---|
| | | Rotate, |
|---|
| | | |
|---|
| | | } from "ol/control.js" |
|---|
| | | import * as turf from '@turf/turf'; |
|---|
| | | import { geometry } from '@turf/turf'; |
|---|
| | | |
|---|
| | | export default { |
|---|
| | | components: { mapinfo, maplayer, queryinfo }, |
|---|
| | | data() { |
|---|
| | |
|---|
| | | css: 'twoMenu_imge81', |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | id: "h8", |
|---|
| | | label: "synthesis.textLabel", |
|---|
| | | name: "ææ¬ç¹", |
|---|
| | | css: "twoMenu_imge81", |
|---|
| | | id: 'h8', |
|---|
| | | label: 'synthesis.addlabel', |
|---|
| | | name: 'æå', |
|---|
| | | css: 'twoMenu_imge88', |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | id: 'h2', |
|---|
| | |
|---|
| | | { |
|---|
| | | id: 'h5', |
|---|
| | | label: 'synthesis.import', |
|---|
| | | name: '导å
¥', |
|---|
| | | name: '导å
¥KML', |
|---|
| | | css: 'twoMenu_imge85', |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | id: 'h6', |
|---|
| | | label: 'synthesis.export', |
|---|
| | | name: '导åº', |
|---|
| | | name: '导åºKML', |
|---|
| | | css: 'twoMenu_imge86', |
|---|
| | | }, |
|---|
| | | |
|---|
| | | { |
|---|
| | | id: 'h8', |
|---|
| | | label: 'synthesis.addlabel', |
|---|
| | | name: 'æå', |
|---|
| | | css: 'twoMenu_imge88', |
|---|
| | | id: 'h9', |
|---|
| | | label: 'synthesis.import1', |
|---|
| | | name: '导å
¥SHP', |
|---|
| | | css: 'twoMenu_imge85', |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | id: 'h10', |
|---|
| | | label: 'synthesis.export1', |
|---|
| | | name: '导åºSHP', |
|---|
| | | css: 'twoMenu_imge86', |
|---|
| | | }, |
|---|
| | | |
|---|
| | | |
|---|
| | | { |
|---|
| | | id: 'h7', |
|---|
| | | label: 'synthesis.removepaint', |
|---|
| | |
|---|
| | | UndergroundMode: false, |
|---|
| | | scaleLine: null, |
|---|
| | | Excavation: false, |
|---|
| | | entityaLayers: [], |
|---|
| | | isMenuFlag: null, |
|---|
| | | }; |
|---|
| | | }, |
|---|
| | | methods: { |
|---|
| | | //äºç´èåç¹å»åæ¢ |
|---|
| | | setChangeTwoMenu(res) { |
|---|
| | | //æ¸
é¤ç»å¶å¾å½¢å¯¹è±¡ |
|---|
| | | sgworld.Creator.SimpleGraphic.clear(); |
|---|
| | | if (window.Viewer.scene.primitives.length != null) { |
|---|
| | | window.Viewer.scene.primitives.removeAll(); |
|---|
| | | } |
|---|
| | | if (this.$store.state.primitLayer != null) { |
|---|
| | | sgworld.Creator.DeleteObject(this.$store.state.primitLayer); |
|---|
| | | this.$store.state.primitLayer = null; |
|---|
| | | } |
|---|
| | | |
|---|
| | | |
|---|
| | | |
|---|
| | | //å
³éæå¼çä¿¡æ¯çªä½ |
|---|
| | | |
|---|
| | |
|---|
| | | window.model = null; |
|---|
| | | } |
|---|
| | | |
|---|
| | | |
|---|
| | | if (this.isMenuFlag != val) { |
|---|
| | | sgworld.Creator.SimpleGraphic.clear(); |
|---|
| | | this.isMenuFlag = val; |
|---|
| | | if (this.entityaLayers.length != 0) { |
|---|
| | | for (var i in this.entityaLayers) { |
|---|
| | | sgworld.Viewer.entities.remove(this.entityaLayers[i]); |
|---|
| | | } |
|---|
| | | this.entityaLayers = []; |
|---|
| | | } |
|---|
| | | for (var i in this.$store.state.queryInfo) { |
|---|
| | | sgworld.Viewer.entities.remove(this.$store.state.queryInfo[i]); |
|---|
| | | } |
|---|
| | | this.$store.state.queryInfo = []; |
|---|
| | | if (this.$store.state.primitLayer != null) { |
|---|
| | | sgworld.Creator.DeleteObject(this.$store.state.primitLayer); |
|---|
| | | this.$store.state.primitLayer = null; |
|---|
| | | } |
|---|
| | | } |
|---|
| | | |
|---|
| | | |
|---|
| | | switch (val) { |
|---|
| | | case 'a': //å¾å±ç®¡ç |
|---|
| | | |
|---|
| | | this.setCoverage(res.id); |
|---|
| | | break; |
|---|
| | | case 'b': |
|---|
| | |
|---|
| | | case 'h6': |
|---|
| | | this.handleSaveClick(); |
|---|
| | | break; |
|---|
| | | case 'h9': |
|---|
| | | // this.handleOpenShp(); |
|---|
| | | $("#shpFile").click(); |
|---|
| | | break; |
|---|
| | | case 'h10': |
|---|
| | | this.handleSaveShp(); |
|---|
| | | break; |
|---|
| | | case 'h7': |
|---|
| | | sgworld.Creator.SimpleGraphic.clear(); |
|---|
| | | for (var i in this.entityaLayers) { |
|---|
| | | sgworld.Viewer.entities.remove(this.entityaLayers[i]); |
|---|
| | | } |
|---|
| | | this.entityaLayers = []; |
|---|
| | | break; |
|---|
| | | case 'h8': |
|---|
| | | sgworld.Creator.createSimpleGraphic('label', {}, function (entity) { |
|---|
| | |
|---|
| | | alert('å½ååºæ¯æ²¡æentitieså®ä½'); |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | handleSaveShp() { |
|---|
| | | |
|---|
| | | var entities = sgworld.Viewer.entities.values; |
|---|
| | | if (entities.length == 0) { |
|---|
| | | return; |
|---|
| | | } |
|---|
| | | var std = []; |
|---|
| | | for (var i in entities) { |
|---|
| | | var type, fillColor, alpha, wkt, name; |
|---|
| | | var bak = {} |
|---|
| | | |
|---|
| | | if (entities[i].name) { |
|---|
| | | |
|---|
| | | name = entities[i].name |
|---|
| | | } |
|---|
| | | if (entities[i].properties) { |
|---|
| | | |
|---|
| | | var properties = entities[i].properties.propertyNames; |
|---|
| | | for (var j in properties) { |
|---|
| | | bak[properties[j]] = entities[i].properties[properties[j]]._value; |
|---|
| | | } |
|---|
| | | } else { |
|---|
| | | bak = { |
|---|
| | | "name": entities[i].name |
|---|
| | | } |
|---|
| | | } |
|---|
| | | if (entities[i].rectangle) {//ç©å½¢ |
|---|
| | | type = 'rectangle' |
|---|
| | | var east = Cesium.Math.toDegrees(entities[i].rectangle.coordinates.getValue().east); |
|---|
| | | var north = Cesium.Math.toDegrees(entities[i].rectangle.coordinates.getValue().north); |
|---|
| | | var west = Cesium.Math.toDegrees(entities[i].rectangle.coordinates.getValue().west); |
|---|
| | | var south = Cesium.Math.toDegrees(entities[i].rectangle.coordinates.getValue().south); |
|---|
| | | var line = turf.polygon([[[east, north], [west, north], [west, south], [east, south], [east, north]]]) |
|---|
| | | wkt = this.$wkt.convert(line.geometry) |
|---|
| | | var fill = entities[i].rectangle._material._color._value; |
|---|
| | | fillColor = fill.red + ',' + fill.green + ',' + fill.blue; |
|---|
| | | alpha = fill.alpha; |
|---|
| | | } else if (entities[i].point) {//ç¹ |
|---|
| | | type = 'point' |
|---|
| | | let ellipsoid = Viewer.scene.globe.ellipsoid; |
|---|
| | | let cartographic = ellipsoid.cartesianToCartographic(entities[i].position.getValue()); |
|---|
| | | let lat = Cesium.Math.toDegrees(cartographic.latitude); |
|---|
| | | let lng = Cesium.Math.toDegrees(cartographic.longitude); |
|---|
| | | let alt = cartographic.height; |
|---|
| | | let point = turf.point([lng, lat, alt]) |
|---|
| | | wkt = this.$wkt.convert(point.geometry) |
|---|
| | | var fill = entities[i].point._color._value; |
|---|
| | | fillColor = fill.red + ',' + fill.green + ',' + fill.blue; |
|---|
| | | alpha = fill.alpha; |
|---|
| | | |
|---|
| | | |
|---|
| | | } else if (entities[i].polygon) { |
|---|
| | | type = 'polygon'; |
|---|
| | | var fill = entities[i].polygon._material._color._value; |
|---|
| | | fillColor = fill.red + ',' + fill.green + ',' + fill.blue; |
|---|
| | | alpha = fill.alpha; |
|---|
| | | var geometry = entities[i].polygon.hierarchy.getValue().positions; |
|---|
| | | var coordinates = []; |
|---|
| | | for (var k in geometry) { |
|---|
| | | coordinates.push(this.setCartesianToEightFour(geometry[k])) |
|---|
| | | } |
|---|
| | | if (coordinates[0] != coordinates[1]) { |
|---|
| | | coordinates.push(coordinates[0]) |
|---|
| | | } |
|---|
| | | var polygon = turf.polygon([coordinates]) |
|---|
| | | wkt = this.$wkt.convert(polygon.geometry) |
|---|
| | | } else if (entities[i].polyline) { |
|---|
| | | type = "polyline"; |
|---|
| | | var coordinates = []; |
|---|
| | | var geometry = entities[i].polyline.positions.getValue(); |
|---|
| | | for (var k in geometry) { |
|---|
| | | coordinates.push(this.setCartesianToEightFour(geometry[k])) |
|---|
| | | } |
|---|
| | | var polyline = turf.lineString(coordinates) |
|---|
| | | wkt = this.$wkt.convert(polyline.geometry) |
|---|
| | | |
|---|
| | | var fill = entities[i].polyline._material._color._value; |
|---|
| | | fillColor = fill.red + ',' + fill.green + ',' + fill.blue; |
|---|
| | | alpha = fill.alpha; |
|---|
| | | } else if (entities[i].label) { |
|---|
| | | type = "label"; |
|---|
| | | let ellipsoid = Viewer.scene.globe.ellipsoid; |
|---|
| | | let cartographic = ellipsoid.cartesianToCartographic(entities[i].position.getValue()); |
|---|
| | | let lat = Cesium.Math.toDegrees(cartographic.latitude); |
|---|
| | | let lng = Cesium.Math.toDegrees(cartographic.longitude); |
|---|
| | | let alt = cartographic.height; |
|---|
| | | let point = turf.point([lng, lat, alt]) |
|---|
| | | wkt = this.$wkt.convert(point.geometry) |
|---|
| | | var fill = entities[i].label.backgroundColor._value; |
|---|
| | | fillColor = fill.red + ',' + fill.green + ',' + fill.blue; |
|---|
| | | alpha = fill.alpha; |
|---|
| | | } |
|---|
| | | std.push({ |
|---|
| | | id: parseInt(i) + 1, |
|---|
| | | type: type, |
|---|
| | | fillColor: fillColor, |
|---|
| | | opacity: alpha, |
|---|
| | | name: name, |
|---|
| | | bak: JSON.stringify(bak), |
|---|
| | | wkt: wkt |
|---|
| | | }) |
|---|
| | | } |
|---|
| | | $.ajax({ |
|---|
| | | url: BASE_URL + "/comprehensive/downloadShp?token=" + getToken(), |
|---|
| | | type: "POST", |
|---|
| | | data: JSON.stringify(std), |
|---|
| | | dataType: 'json', // htmlãjsonãjsonpãscriptãtext |
|---|
| | | contentType: "application/json", // "application/x-www-form-urlencoded" |
|---|
| | | success: (rs) => { |
|---|
| | | if (rs && rs.code == 200) { |
|---|
| | | var a = document.createElement('a'); // å建ä¸ä¸ªaæ ç¾å
ç´ |
|---|
| | | a.style.display = 'none'; // 设置å
ç´ ä¸å¯è§ |
|---|
| | | |
|---|
| | | a.href = BASE_URL + "/comprehensive/downloadFile?token=" + getToken() + "&guid=" + rs.result; |
|---|
| | | |
|---|
| | | document.body.appendChild(a); // å å
¥ |
|---|
| | | a.click(); // 触åç¹å»,ä¸è½½ |
|---|
| | | document.body.removeChild(a); // éæ¾ |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | error: function (e) { |
|---|
| | | } |
|---|
| | | }); |
|---|
| | | |
|---|
| | | }, |
|---|
| | | handleOpenShp() { |
|---|
| | | var formData = new FormData(); |
|---|
| | | var fs = document.getElementById("shpFile"); |
|---|
| | | var exts = [".shp", ".shx", ".dbf", ".prj"]; |
|---|
| | | var count = 0; |
|---|
| | | for (var i = 0, c = fs.files.length; i < c; i++) { |
|---|
| | | var name = fs.files[i].name.toLocaleLowerCase(); |
|---|
| | | var ext = name.substring(name.lastIndexOf(".")); |
|---|
| | | if (exts.indexOf(ext) > -1) { |
|---|
| | | count++; |
|---|
| | | formData.append(fs.files[i].name, fs.files[i]); // fs.files[i].name,file |
|---|
| | | } |
|---|
| | | } |
|---|
| | | if (count != 4) { |
|---|
| | | alert("ShapeFileæ件éæ©ä¸å
¨ï¼"); |
|---|
| | | return; |
|---|
| | | } |
|---|
| | | var that = this; |
|---|
| | | $.ajax(BASE_URL + "/comprehensive/uploadShp?token=" + getToken(), { |
|---|
| | | type: "post", |
|---|
| | | data: formData, |
|---|
| | | async: true, |
|---|
| | | cache: false, |
|---|
| | | processData: false, |
|---|
| | | contentType: false, |
|---|
| | | success: function (rs) { |
|---|
| | | |
|---|
| | | if (rs.code == 200) { |
|---|
| | | that.showShpEntity(rs.result); |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | error: function (e) { |
|---|
| | | console.error(e); |
|---|
| | | } |
|---|
| | | }); |
|---|
| | | |
|---|
| | | document.getElementById("shpFile").value = "" |
|---|
| | | |
|---|
| | | }, |
|---|
| | | showShpEntity(res) { |
|---|
| | | |
|---|
| | | for (var i in res) { |
|---|
| | | var wkt = this.$wkt.parse(res[i].wkt); |
|---|
| | | var fillColor = res[i].fillColor.split(","); |
|---|
| | | var color = new Cesium.Color(parseFloat(fillColor[0]), parseFloat(fillColor[1]), parseFloat(fillColor[2]), res[i].opacity); |
|---|
| | | var name = res[i].name |
|---|
| | | switch (res[i].type) { |
|---|
| | | case 'rectangle': |
|---|
| | | case 'polygon': |
|---|
| | | |
|---|
| | | var std = []; |
|---|
| | | var geo = wkt.coordinates[0]; |
|---|
| | | for (var i in geo) { |
|---|
| | | std.push(geo[i][0]) |
|---|
| | | std.push(geo[i][1]) |
|---|
| | | } |
|---|
| | | var entity = Viewer.entities.add({ |
|---|
| | | name: name, |
|---|
| | | polygon: { |
|---|
| | | hierarchy: Cesium.Cartesian3.fromDegreesArray(std), |
|---|
| | | //height : 100000, |
|---|
| | | material: color, |
|---|
| | | outline: true, |
|---|
| | | outlineColor: color, |
|---|
| | | } |
|---|
| | | }) |
|---|
| | | this.entityaLayers.push(entity) |
|---|
| | | break; |
|---|
| | | case 'point': |
|---|
| | | let point = Viewer.entities.add({ |
|---|
| | | name: name, |
|---|
| | | position: Cesium.Cartesian3.fromDegrees(wkt.coordinates[0], wkt.coordinates[1]), //ç»çº¬åº¦è½¬ä¸çåæ |
|---|
| | | point: { |
|---|
| | | show: true, |
|---|
| | | color: color, |
|---|
| | | pixelSize: 10, |
|---|
| | | outlineColor: color, |
|---|
| | | outlineWidth: 3, |
|---|
| | | heightReference: Cesium.HeightReference.CLAMP_TO_GROUND, |
|---|
| | | disableDepthTestDistance: Number.POSITIVE_INFINITY, |
|---|
| | | }, |
|---|
| | | }); |
|---|
| | | |
|---|
| | | this.entityaLayers.push(point) |
|---|
| | | break; |
|---|
| | | case 'polyline': |
|---|
| | | var std = []; |
|---|
| | | var geo = wkt.coordinates; |
|---|
| | | for (var i in geo) { |
|---|
| | | std.push(geo[i][0]) |
|---|
| | | std.push(geo[i][1]) |
|---|
| | | } |
|---|
| | | let line = Viewer.entities.add({ |
|---|
| | | name: name, |
|---|
| | | polyline: { |
|---|
| | | //ç»çº¬åº¦æ°ç»è½¬ä¸çåæ ï¼å¸¦é«åº¦çè¯æ¯fromDegreesArrayHeights |
|---|
| | | positions: Cesium.Cartesian3.fromDegreesArray(std), |
|---|
| | | width: 10, |
|---|
| | | material: color, |
|---|
| | | clampToGround: true, |
|---|
| | | } |
|---|
| | | }) |
|---|
| | | |
|---|
| | | this.entityaLayers.push(line) |
|---|
| | | break; |
|---|
| | | case 'label': |
|---|
| | | debugger |
|---|
| | | const label = Viewer.entities.add({ |
|---|
| | | position: Cesium.Cartesian3.fromDegrees(wkt.coordinates[0], wkt.coordinates[1]), |
|---|
| | | label: { |
|---|
| | | text: name, |
|---|
| | | fillColor: color, |
|---|
| | | font: '28px', |
|---|
| | | horizontalOrigin: Cesium.HorizontalOrigin.CENTER, |
|---|
| | | verticalOrigin: Cesium.VerticalOrigin.TOP, |
|---|
| | | heightReference: Cesium.HeightReference.CLAMP_TO_GROUND, |
|---|
| | | disableDepthTestDistance: Number.POSITIVE_INFINITY, |
|---|
| | | }, |
|---|
| | | }) |
|---|
| | | this.entityaLayers.push(label) |
|---|
| | | break; |
|---|
| | | } |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | |
|---|
| | | setCartesianToEightFour(res) { |
|---|
| | | var std = []; |
|---|
| | | let ellipsoid = Viewer.scene.globe.ellipsoid; |
|---|
| | | let cartographic = ellipsoid.cartesianToCartographic(res); |
|---|
| | | let lat = Cesium.Math.toDegrees(cartographic.latitude); |
|---|
| | | let lng = Cesium.Math.toDegrees(cartographic.longitude); |
|---|
| | | let alt = cartographic.height; |
|---|
| | | std = [lng, lat, alt] |
|---|
| | | return std; |
|---|
| | | }, |
|---|
| | | handleOpenClick() { |
|---|
| | | var that = this; |
|---|
| | | sgworld.Creator.SimpleGraphic.edit(true, { editProp: true }); |
|---|
| | | let fileInput = document.querySelector('.file'); |
|---|
| | | fileInput.onchange = function (evt) { |
|---|
| | |
|---|
| | | fileReader.result, |
|---|
| | | kmlOptions |
|---|
| | | ); |
|---|
| | | |
|---|
| | | geocachePromise.then(function (dataSource) { |
|---|
| | | var geocacheEntities = dataSource.entities.values; |
|---|
| | | |
|---|
| | | that.entityaLayers = geocacheEntities; |
|---|
| | | for (var i = 0; i < geocacheEntities.length; i++) { |
|---|
| | | var entity = geocacheEntities[i]; |
|---|
| | | |
|---|
| | |
|---|
| | | font-size: 16px; |
|---|
| | | font-family: Microsoft YaHei; |
|---|
| | | font-weight: 400; |
|---|
| | | |
|---|
| | | border: 1px solid rgba(0, 0, 0, 0); |
|---|
| | | padding: 10px; |
|---|
| | | min-width: 100px; |
|---|
| | | margin-left: 10px; |
|---|
| | |
|---|
| | | <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 }" ref="mapleft"></left> |
|---|
| | | <right class="mapright" :style="{ width: rightWidth }" ref="mapright"></right> |
|---|
| | | <bottom class="mapbottom" ref="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> |
|---|
| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | <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> |
|---|
| | |
|---|
| | | ></el-tree> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | <div style="width: 80%;"> |
|---|
| | | <div> |
|---|
| | | <div class="contentshuju"> |
|---|
| | | <div class="contentshujutou"> |
|---|
| | | <el-form |
|---|
| | | ref="ruleForm" |
|---|
| | | :model="ruleForm" |
|---|
| | |
|---|
| | | style="width: 200px;" |
|---|
| | | ></el-input> |
|---|
| | | </el-form-item> |
|---|
| | | <!-- <el-form-item style="float: right"> |
|---|
| | | <el-button |
|---|
| | | v-if="btnStatus.insert" |
|---|
| | | @click="conditionVisible = true" |
|---|
| | | size="small" |
|---|
| | | icon="el-icon-plus" |
|---|
| | | type="success" |
|---|
| | | >{{$t('common.append')}}</el-button> |
|---|
| | | </el-form-item> |
|---|
| | | <el-form-item style="float: right"> |
|---|
| | | <el-button |
|---|
| | | @click="submitForm" |
|---|
| | | type="primary" |
|---|
| | | size="small" |
|---|
| | | icon="el-icon-search" |
|---|
| | | >{{$t('common.iquery')}}</el-button> |
|---|
| | | </el-form-item> |
|---|
| | | <el-form-item style="float: right"> |
|---|
| | | <el-button |
|---|
| | | @click="resetForm" |
|---|
| | | size="small" |
|---|
| | | icon="el-icon-refresh" |
|---|
| | | type="info" |
|---|
| | | >{{$t('common.reset')}}</el-button> |
|---|
| | | </el-form-item> |
|---|
| | | <el-form-item style="float: right"> |
|---|
| | | <el-button |
|---|
| | | @click="getSpaceMapVisibale" |
|---|
| | | size="small" |
|---|
| | | type="primary" |
|---|
| | | >{{ |
|---|
| | | $t('synthesis.rangequery') |
|---|
| | | }}</el-button> |
|---|
| | | </el-form-item> --> |
|---|
| | | <el-form-item style="float: right"> |
|---|
| | | <el-button |
|---|
| | | @click="getSpaceMapVisibale" |
|---|
| | |
|---|
| | | >{{$t('common.append')}}</el-button> |
|---|
| | | </el-form-item> |
|---|
| | | </el-form> |
|---|
| | | <!-- <el-divider class="eldivider" /> --> |
|---|
| | | </div> |
|---|
| | | <!-- <div class="spatial_rightContent subpage_Div"> |
|---|
| | | <div> |
|---|
| | | <el-table |
|---|
| | | ref="filterTable" |
|---|
| | | :data="tableData" |
|---|
| | | border |
|---|
| | | style="width: 100%;max-height: 593px;overflow: auto;" |
|---|
| | | @selection-change="handleSelectionChange" |
|---|
| | | > |
|---|
| | | <el-table-column |
|---|
| | | type="selection" |
|---|
| | | width="55" |
|---|
| | | /> |
|---|
| | | <el-table-column |
|---|
| | | width="60" |
|---|
| | | align="center" |
|---|
| | | type="index" |
|---|
| | | :label="$t('common.index')" |
|---|
| | | /> |
|---|
| | | <el-table-column |
|---|
| | | v-for="(item, index) in attributeData" |
|---|
| | | :key="index" |
|---|
| | | :label="item.alias" |
|---|
| | | :prop="item.field" |
|---|
| | | show-overflow-tooltip |
|---|
| | | align="center" |
|---|
| | | ></el-table-column> |
|---|
| | | <el-table-column |
|---|
| | | min-width="120" |
|---|
| | | :label="$t('common.operate')" |
|---|
| | | > |
|---|
| | | <template slot-scope="scope"> |
|---|
| | | <el-link |
|---|
| | | class="elLink" |
|---|
| | | @click="showDetail(scope.$index, scope.row)" |
|---|
| | | >{{$t('common.details')}}</el-link> |
|---|
| | | <el-link |
|---|
| | | class="elLink" |
|---|
| | | @click="getAttachTable(scope.$index, scope.row)" |
|---|
| | | style="margin-left: 20px; " |
|---|
| | | >{{$t('common.enclosure')}}</el-link> |
|---|
| | | </template> |
|---|
| | | </el-table-column> |
|---|
| | | </el-table> |
|---|
| | | <div |
|---|
| | | style="margin-top: 20px" |
|---|
| | | class="pagination_box" |
|---|
| | | > |
|---|
| | | <el-pagination |
|---|
| | | v-if="changePag" |
|---|
| | | @size-change="handleSizeChange" |
|---|
| | | @current-change="handleCurrentChange" |
|---|
| | | :current-page="this.listData.pageIndex" |
|---|
| | | :page-sizes="[10, 20, 50, 100]" |
|---|
| | | :page-size="this.listData.pageSize" |
|---|
| | | layout="total, sizes, prev, pager, next, jumper" |
|---|
| | | :total="count" |
|---|
| | | > |
|---|
| | | </el-pagination> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | </div> --> |
|---|
| | | <div style="height: 73%"> |
|---|
| | | <div class="contenttable"> |
|---|
| | | <el-table |
|---|
| | | ref="filterTable" |
|---|
| | | :data="tableData" |
|---|
| | | style="width: 100%" |
|---|
| | | height="99%" |
|---|
| | | height="100%" |
|---|
| | | > |
|---|
| | | <el-table-column |
|---|
| | | type="selection" |
|---|
| | |
|---|
| | | justify-content: space-between; |
|---|
| | | .spatial_leftTree { |
|---|
| | | width: calc(15% - 0px); |
|---|
| | | height: 91%; |
|---|
| | | height: 100%; |
|---|
| | | |
|---|
| | | border-radius: 5px; |
|---|
| | | padding: 1%; |
|---|
| | |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | .contentshuju{ |
|---|
| | | width: 80%; |
|---|
| | | height: 91%; |
|---|
| | | border-radius: 5px; |
|---|
| | | padding: 1%; |
|---|
| | | max-height: 670px; |
|---|
| | | border: 1px solid #dcdfe6; |
|---|
| | | } |
|---|
| | | .contentshujutou{ |
|---|
| | | height: 50px; |
|---|
| | | padding: 1%; |
|---|
| | | border-radius: 5px; |
|---|
| | | border: 1px solid #dcdfe6; |
|---|
| | | } |
|---|
| | | .contenttable{ |
|---|
| | | min-height: 520px; |
|---|
| | | height: 530px; |
|---|
| | | margin-top: 10px; |
|---|
| | | } |
|---|
| | | /deep/ .el-table__body{ |
|---|
| | | min-height: 525px; |
|---|
| | | } |
|---|
| | | </style> |
|---|
| | |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | <div class="cataLog_rightContent subpage_Div"> |
|---|
| | | <div style="display:flex;justify-content:space-between"> |
|---|
| | | <div style="align-items: center;display:flex;justify-content:space-between"> |
|---|
| | | <el-breadcrumb separator="/"> |
|---|
| | | <el-breadcrumb-item :to="{ path: '/' }">{{ |
|---|
| | | $t('dataManage.dictionaryManageObj.particulars') |
|---|
| | |
|---|
| | | padding: 1%; |
|---|
| | | .cataLogContent { |
|---|
| | | width: 100%; |
|---|
| | | height: 92%; |
|---|
| | | height: 100%; |
|---|
| | | max-height: 670px; |
|---|
| | | display: flex; |
|---|
| | | align-items: center; |
|---|
| | | justify-content: space-between; |
|---|
| | | .cataLog_leftTree { |
|---|
| | | width: 15%; |
|---|
| | | height: 91%; |
|---|
| | | height: 100%; |
|---|
| | | border-radius: 5px; |
|---|
| | | padding: 1%; |
|---|
| | | overflow-y: auto; |
|---|
| | | } |
|---|
| | | .cataLog_rightContent { |
|---|
| | | width: 80%; |
|---|
| | | height: 91%; |
|---|
| | | height: 100%; |
|---|
| | | max-height: 670px; |
|---|
| | | border-radius: 5px; |
|---|
| | | padding: 1%; |
|---|
| | | .menuTop { |
|---|
| | |
|---|
| | | class="demo-form-inline" |
|---|
| | | > |
|---|
| | | <!-- å
¥åºç±»å --> |
|---|
| | | <el-form-item :label="$t('dataManage.dataUpObj.UploadType')" style="margin-right: 2%"> |
|---|
| | | <el-form-item |
|---|
| | | :label="$t('dataManage.dataUpObj.UploadType')" |
|---|
| | | style="margin-right: 2%" |
|---|
| | | > |
|---|
| | | <el-select |
|---|
| | | :disabled="tableData.length == 0 ? false : true" |
|---|
| | | v-model="formInline.uploadType" |
|---|
| | |
|---|
| | | </el-form-item> |
|---|
| | | <!-- åå¨ç®å½ --> |
|---|
| | | <el-form-item |
|---|
| | | style="margin-right: 2%" |
|---|
| | | style="margin-right: 2%" |
|---|
| | | v-show="uploadFlag" |
|---|
| | | :label="$t('dataManage.dataUpObj.storageDirectory')" |
|---|
| | | > |
|---|
| | |
|---|
| | | </el-form-item> |
|---|
| | | <!-- 项ç®å称 --> |
|---|
| | | <el-form-item |
|---|
| | | style="margin-right: 2%" |
|---|
| | | style="margin-right: 2%" |
|---|
| | | v-show="!uploadFlag" |
|---|
| | | :label="$t('dataManage.dataUpObj.entryName')" |
|---|
| | | > |
|---|
| | |
|---|
| | | </el-select> |
|---|
| | | </el-form-item> |
|---|
| | | <!-- æ°æ®çæ¬ --> |
|---|
| | | <el-form-item :label="$t('dataManage.dataUpObj.dataVersion')" style="margin-right: 2%"> |
|---|
| | | <el-form-item |
|---|
| | | :label="$t('dataManage.dataUpObj.dataVersion')" |
|---|
| | | style="margin-right: 2%" |
|---|
| | | > |
|---|
| | | <el-select |
|---|
| | | :popper-append-to-body="false" |
|---|
| | | :disabled="tableData.length == 0 ? false : true" |
|---|
| | |
|---|
| | | </el-select> |
|---|
| | | </el-form-item> |
|---|
| | | <!-- æ°æ®ä¸ä¸ --> |
|---|
| | | <el-form-item :label="$t('dataManage.dataUpObj.dataSpecialty')" style="margin-right: 2%"> |
|---|
| | | <el-form-item |
|---|
| | | :label="$t('dataManage.dataUpObj.dataSpecialty')" |
|---|
| | | style="margin-right: 2%" |
|---|
| | | > |
|---|
| | | <el-select |
|---|
| | | :popper-append-to-body="false" |
|---|
| | | :disabled="tableData.length == 0 ? false : true" |
|---|
| | |
|---|
| | | </el-select> |
|---|
| | | </el-form-item> |
|---|
| | | <!-- åæ ç³» --> |
|---|
| | | <el-form-item :label="$t('dataManage.dataUpObj.coordinateSystem')" style="margin-right: 3%"> |
|---|
| | | <el-form-item |
|---|
| | | :label="$t('dataManage.dataUpObj.coordinateSystem')" |
|---|
| | | style="margin-right: 3%" |
|---|
| | | > |
|---|
| | | <el-select |
|---|
| | | :popper-append-to-body="false" |
|---|
| | | :disabled="tableData.length == 0 ? false : true" |
|---|
| | |
|---|
| | | @change="handleMetaFileChange" |
|---|
| | | ></input> |
|---|
| | | </el-form-item> |
|---|
| | | <el-form-item v-show="uploadFlag" style="margin-left: 0.7%;"> |
|---|
| | | <el-form-item |
|---|
| | | v-show="uploadFlag" |
|---|
| | | style="margin-left: 0.7%;" |
|---|
| | | > |
|---|
| | | <el-input |
|---|
| | | placeholder="请è¾å
¥å
容" |
|---|
| | | v-model="formInline.metaData" |
|---|
| | |
|---|
| | | >{{ $t('common.Warehousin') }}</el-button> |
|---|
| | | <!-- è´¨æ£ --> |
|---|
| | | <el-button |
|---|
| | | style="margin-right:-9px" |
|---|
| | | style="margin-right:-9px" |
|---|
| | | v-if="menuStatus.insert" |
|---|
| | | :disabled="multipleSelection.length == 0 ? true : false" |
|---|
| | | type="info" |
|---|
| | |
|---|
| | | <!-- ä¸ä¼ æ°æ®å表 --> |
|---|
| | | <div class="subpage_Content subpage_Div"> |
|---|
| | | <el-table |
|---|
| | | style="min-height: 450px;" |
|---|
| | | style="min-height: 470px;" |
|---|
| | | :data="tableData" |
|---|
| | | @selection-change="handleSelectionChange" |
|---|
| | | > |
|---|
| | |
|---|
| | | :model="formWarehousing" |
|---|
| | | class="demo-form-inline" |
|---|
| | | > |
|---|
| | | <el-form-item :label="$t('dataManage.dataUpObj.describe')" > |
|---|
| | | <el-form-item :label="$t('dataManage.dataUpObj.describe')"> |
|---|
| | | <el-input |
|---|
| | | v-model="formWarehousing.name" |
|---|
| | | placeholder="请è¾å
¥å
容" |
|---|
| | |
|---|
| | | ></el-input> |
|---|
| | | </el-form-item> |
|---|
| | | <el-form-item style="float: right;"> |
|---|
| | | <el-button |
|---|
| | | v-if="menuStatus.delete" |
|---|
| | | @click="setWarehouseDel" |
|---|
| | | icon="el-icon-folder-delete" |
|---|
| | | type="danger" |
|---|
| | | size="small" |
|---|
| | | >{{ $t('common.delete') }}</el-button> |
|---|
| | | <el-button |
|---|
| | | @click="setWarehouseSearch" |
|---|
| | | icon="el-icon-upload" |
|---|
| | |
|---|
| | | size="small" |
|---|
| | | type="info" |
|---|
| | | >{{ $t('common.reset') }}</el-button> |
|---|
| | | <el-button |
|---|
| | | v-if="menuStatus.delete" |
|---|
| | | @click="setWarehouseDel" |
|---|
| | | icon="el-icon-folder-delete" |
|---|
| | | type="danger" |
|---|
| | | size="small" |
|---|
| | | >{{ $t('common.delete') }}</el-button> |
|---|
| | | </el-form-item> |
|---|
| | | <el-form-item style="float: right;"> |
|---|
| | | <el-button |
|---|
| | |
|---|
| | | </el-form-item> |
|---|
| | | </el-form> |
|---|
| | | </div> |
|---|
| | | <div |
|---|
| | | class="subpage_Content subpage_Div" |
|---|
| | | style="min-height:480px" |
|---|
| | | > |
|---|
| | | <div style="height: 450px"> |
|---|
| | | <el-table |
|---|
| | | ref="filterTable" |
|---|
| | | :data="waretableData" |
|---|
| | | style="width: 100%" |
|---|
| | | height="99%"> |
|---|
| | | <el-table-column |
|---|
| | | type="selection" |
|---|
| | | width="55" |
|---|
| | | <!-- å
¥åº --> |
|---|
| | | <div class="bottom"> |
|---|
| | | <div class="rightTable subpage_Div"> |
|---|
| | | <div class="table_box"> |
|---|
| | | <el-table |
|---|
| | | ref="filterTable" |
|---|
| | | :data="waretableData" |
|---|
| | | style="width: 100%" |
|---|
| | | height="99%" |
|---|
| | | @selection-change="handleDelteChange" |
|---|
| | | > |
|---|
| | | </el-table-column> |
|---|
| | | <el-table-column |
|---|
| | | align="center" |
|---|
| | | type="index" |
|---|
| | | :label="$t('common.index')" |
|---|
| | | width="70px" |
|---|
| | | ></el-table-column> |
|---|
| | | <el-table-column |
|---|
| | | align="center" |
|---|
| | | prop="name" |
|---|
| | | :label="$t('common.name')" |
|---|
| | | width="100" |
|---|
| | | /> |
|---|
| | | <el-table-column |
|---|
| | | align="center" |
|---|
| | | prop="dirName" |
|---|
| | | :label="$t('dataManage.dataUpObj.catalogue')" |
|---|
| | | width="300" |
|---|
| | | /> |
|---|
| | | <el-table-column |
|---|
| | | align="center" |
|---|
| | | prop="depName" |
|---|
| | | :label="$t('dataManage.dataUpObj.company')" |
|---|
| | | width="200" |
|---|
| | | /> |
|---|
| | | <el-table-column |
|---|
| | | align="center" |
|---|
| | | prop="verName" |
|---|
| | | :label="$t('dataManage.dataUpObj.versionNo')" |
|---|
| | | /> |
|---|
| | | <el-table-column |
|---|
| | | align="center" |
|---|
| | | prop="type" |
|---|
| | | :label="$t('common.type')" |
|---|
| | | /> |
|---|
| | | <el-table-column |
|---|
| | | align="center" |
|---|
| | | prop="sizes" |
|---|
| | | :label="$t('common.size')" |
|---|
| | | :formatter="changeSizeFile" |
|---|
| | | /> |
|---|
| | | <el-table-column |
|---|
| | | align="center" |
|---|
| | | :label="$t('dataManage.dataUpObj.tableName')" |
|---|
| | | <el-table-column |
|---|
| | | type="selection" |
|---|
| | | width="55" |
|---|
| | | > |
|---|
| | | </el-table-column> |
|---|
| | | <el-table-column |
|---|
| | | align="center" |
|---|
| | | type="index" |
|---|
| | | :label="$t('common.index')" |
|---|
| | | width="70px" |
|---|
| | | ></el-table-column> |
|---|
| | | <el-table-column |
|---|
| | | align="center" |
|---|
| | | prop="name" |
|---|
| | | :label="$t('common.name')" |
|---|
| | | width="100" |
|---|
| | | /> |
|---|
| | | <el-table-column |
|---|
| | | align="center" |
|---|
| | | prop="dirName" |
|---|
| | | :label="$t('dataManage.dataUpObj.catalogue')" |
|---|
| | | width="300" |
|---|
| | | /> |
|---|
| | | <el-table-column |
|---|
| | | align="center" |
|---|
| | | prop="depName" |
|---|
| | | :label="$t('dataManage.dataUpObj.company')" |
|---|
| | | width="200" |
|---|
| | | /> |
|---|
| | | <el-table-column |
|---|
| | | align="center" |
|---|
| | | prop="verName" |
|---|
| | | :label="$t('dataManage.dataUpObj.versionNo')" |
|---|
| | | /> |
|---|
| | | <el-table-column |
|---|
| | | align="center" |
|---|
| | | prop="type" |
|---|
| | | :label="$t('common.type')" |
|---|
| | | /> |
|---|
| | | <el-table-column |
|---|
| | | align="center" |
|---|
| | | prop="sizes" |
|---|
| | | :label="$t('common.size')" |
|---|
| | | :formatter="changeSizeFile" |
|---|
| | | /> |
|---|
| | | <el-table-column |
|---|
| | | align="center" |
|---|
| | | :label="$t('dataManage.dataUpObj.tableName')" |
|---|
| | | > |
|---|
| | | <template slot-scope="scope"> |
|---|
| | | <a |
|---|
| | | class="scopeRowColor" |
|---|
| | | @click="detail(scope.row)" |
|---|
| | | >{{ scope.row.tab }}</a> |
|---|
| | | </template> |
|---|
| | | </el-table-column> |
|---|
| | | <el-table-column |
|---|
| | | align="center" |
|---|
| | | prop="rows" |
|---|
| | | :label="$t('common.lineNuber')" |
|---|
| | | /> |
|---|
| | | <el-table-column |
|---|
| | | align="center" |
|---|
| | | prop="desc" |
|---|
| | | :label="$t('dataManage.dataUpObj.describe')" |
|---|
| | | /> |
|---|
| | | <el-table-column |
|---|
| | | align="center" |
|---|
| | | prop="uname" |
|---|
| | | :label="$t('dataManage.vmobj.createonuser')" |
|---|
| | | /> |
|---|
| | | <el-table-column |
|---|
| | | align="center" |
|---|
| | | prop="createTime" |
|---|
| | | :label="$t('dataManage.vmobj.createontime')" |
|---|
| | | :formatter="changetimeFile" |
|---|
| | | width="100" |
|---|
| | | /> |
|---|
| | | </el-table> |
|---|
| | | </div> |
|---|
| | | <div class="pagination_box"> |
|---|
| | | <el-pagination |
|---|
| | | @size-change="handleSizeChange" |
|---|
| | | @current-change="handleCurrentChange" |
|---|
| | | :current-page="listData.pageIndex" |
|---|
| | | :page-sizes="[10, 20, 50, 100]" |
|---|
| | | :page-size="listData.pageSize" |
|---|
| | | layout="total, sizes, prev, pager, next, jumper" |
|---|
| | | :total="count" |
|---|
| | | > |
|---|
| | | <template slot-scope="scope"> |
|---|
| | | <a |
|---|
| | | class="scopeRowColor" |
|---|
| | | @click="detail(scope.row)" |
|---|
| | | >{{ scope.row.tab }}</a> |
|---|
| | | </template> |
|---|
| | | </el-table-column> |
|---|
| | | <el-table-column |
|---|
| | | align="center" |
|---|
| | | prop="rows" |
|---|
| | | :label="$t('common.lineNuber')" |
|---|
| | | /> |
|---|
| | | <el-table-column |
|---|
| | | align="center" |
|---|
| | | prop="desc" |
|---|
| | | :label="$t('dataManage.dataUpObj.describe')" |
|---|
| | | /> |
|---|
| | | <el-table-column |
|---|
| | | align="center" |
|---|
| | | prop="uname" |
|---|
| | | :label="$t('dataManage.vmobj.createonuser')" |
|---|
| | | /> |
|---|
| | | <el-table-column |
|---|
| | | align="center" |
|---|
| | | prop="createTime" |
|---|
| | | :label="$t('dataManage.vmobj.createontime')" |
|---|
| | | :formatter="changetimeFile" |
|---|
| | | width="100" |
|---|
| | | /> |
|---|
| | | </el-table> |
|---|
| | | <div class="pagination_box"> |
|---|
| | | <el-pagination |
|---|
| | | @size-change="handleSizeChange" |
|---|
| | | @current-change="handleCurrentChange" |
|---|
| | | :current-page="listData.pageIndex" |
|---|
| | | :page-sizes="[10, 20, 50, 100]" |
|---|
| | | :page-size="listData.pageSize" |
|---|
| | | layout="total, sizes, prev, pager, next, jumper" |
|---|
| | | :total="count" |
|---|
| | | > |
|---|
| | | </el-pagination> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | </el-pagination> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | </el-tab-pane> |
|---|
| | | </el-tabs> |
|---|
| | |
|---|
| | | for (var i in this.enclosureData) { |
|---|
| | | formData.append('ids', this.enclosureData[i]) |
|---|
| | | } |
|---|
| | | const that = this |
|---|
| | | const that = this |
|---|
| | | that.jindudialogVisible = true |
|---|
| | | that.$set(this, 'jindutiaoname', "é件ä¸ä¼ ") |
|---|
| | | that.$set(this, 'jindutiao', 0) |
|---|
| | |
|---|
| | | if (rs.code != 200) { |
|---|
| | | return this.$message.error('é件ä¸ä¼ 失败'); |
|---|
| | | } |
|---|
| | | |
|---|
| | | |
|---|
| | | this.$set(this, 'jindutiao', 100) |
|---|
| | | this.$message({ |
|---|
| | | message: 'é件ä¸ä¼ æå', |
|---|
| | | type: 'success' |
|---|
| | | }); |
|---|
| | | |
|---|
| | | |
|---|
| | | }, |
|---|
| | | error: (rs) => { |
|---|
| | | this.loading = false; |
|---|
| | |
|---|
| | | |
|---|
| | | |
|---|
| | | |
|---|
| | | |
|---|
| | | |
|---|
| | | |
|---|
| | | }, |
|---|
| | | //éæ©ä¸ä¼ é件çæ件 |
|---|
| | |
|---|
| | | }, |
|---|
| | | xhr: function () { |
|---|
| | | var myXhr = $.ajaxSettings.xhr(); |
|---|
| | | |
|---|
| | | |
|---|
| | | if (myXhr.upload) { //æ£æ¥uploadå±æ§æ¯å¦åå¨ |
|---|
| | | myXhr.upload.addEventListener('progress', that.progressHandlingFunction, false); //ç»å®progressäºä»¶çåè°å½æ° |
|---|
| | | } |
|---|
| | |
|---|
| | | }, |
|---|
| | | } |
|---|
| | | }; |
|---|
| | | </script> |
|---|
| | | </script> |
|---|
| | | <style lang="less" scoped> |
|---|
| | | .bottom { |
|---|
| | | width: 100%; |
|---|
| | | margin-top: 1%; |
|---|
| | | // height: 74%; |
|---|
| | | height: 570px; |
|---|
| | | display: flex; |
|---|
| | | justify-content: space-between; |
|---|
| | | |
|---|
| | | .rightTable { |
|---|
| | | width: 98%; |
|---|
| | | height: 92%; |
|---|
| | | |
|---|
| | | border-radius: 5px; |
|---|
| | | padding: 1%; |
|---|
| | | .table_box { |
|---|
| | | width: 100%; |
|---|
| | | height: 93%; |
|---|
| | | margin: 0 auto; |
|---|
| | | overflow: auto; |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | </style> |
|---|
| | |
|---|
| | | `${$t('dataManage.dictionaryManage')}`, |
|---|
| | | ]"></My-bread> |
|---|
| | | <el-divider /> |
|---|
| | | <div> |
|---|
| | | <el-form |
|---|
| | | <div class="mainBox"> |
|---|
| | | <div class="dictionaryContent"> |
|---|
| | | <div class="dictionary_leftTree subpage_Div"> |
|---|
| | | <ul> |
|---|
| | | <li |
|---|
| | | @click="getTableDesc(item)" |
|---|
| | | v-for="item in optionCount" |
|---|
| | | :class="{ active: activeName == item.tab }" |
|---|
| | | > |
|---|
| | | {{ item.tabDesc }} |
|---|
| | | </li> |
|---|
| | | </ul> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | <div class="right subpage_Div"> |
|---|
| | | <div class="inquire"> |
|---|
| | | <el-form |
|---|
| | | :inline="true" |
|---|
| | | :model="formInline" |
|---|
| | | class="demo-form-inline" |
|---|
| | |
|---|
| | | >{{ $t('common.reset') }}</el-button> |
|---|
| | | </el-form-item> |
|---|
| | | </el-form> |
|---|
| | | </div> |
|---|
| | | <div class="dictionaryContent"> |
|---|
| | | <div class="dictionary_leftTree subpage_Div"> |
|---|
| | | <ul> |
|---|
| | | <li |
|---|
| | | @click="getTableDesc(item)" |
|---|
| | | v-for="item in optionCount" |
|---|
| | | :class="{ active: activeName == item.tab }" |
|---|
| | | > |
|---|
| | | {{ item.tabDesc }} |
|---|
| | | </li> |
|---|
| | | </ul> |
|---|
| | | </div> |
|---|
| | | <div class="dictionary_rightContent subpage_Div"> |
|---|
| | | <el-table |
|---|
| | | </div> |
|---|
| | | <div class="table_box"> |
|---|
| | | <el-table |
|---|
| | | :data="tableData" |
|---|
| | | style="width: 100%" |
|---|
| | | @selection-change="handleSelectionChange" |
|---|
| | | height="93%" |
|---|
| | | height="100%" |
|---|
| | | > |
|---|
| | | <el-table-column |
|---|
| | | type="selection" |
|---|
| | |
|---|
| | | </el-table> |
|---|
| | | <div |
|---|
| | | class="pagination_box" |
|---|
| | | style="margin-top: 10px" |
|---|
| | | style="margin-top: 20px" |
|---|
| | | > |
|---|
| | | <el-pagination |
|---|
| | | @size-change="handleSizeChange" |
|---|
| | |
|---|
| | | :total="count" |
|---|
| | | > |
|---|
| | | </el-pagination> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | |
|---|
| | | width: 98%; |
|---|
| | | padding: 1%; |
|---|
| | | .dictionaryContent { |
|---|
| | | width: 100%; |
|---|
| | | width: 16.5%; |
|---|
| | | height: 92%; |
|---|
| | | display: flex; |
|---|
| | | justify-content: space-between; |
|---|
| | | // display: flex; |
|---|
| | | // justify-content: space-between; |
|---|
| | | .dictionary_leftTree { |
|---|
| | | width: 15%; |
|---|
| | | width: 100%; |
|---|
| | | height: 80%; |
|---|
| | | min-height: 700px; |
|---|
| | | |
|---|
| | | border-radius: 5px; |
|---|
| | | padding: 1%; |
|---|
| | |
|---|
| | | margin-bottom: 10px; |
|---|
| | | } |
|---|
| | | } |
|---|
| | | .mainBox { |
|---|
| | | width: 100%; |
|---|
| | | height: 92%; |
|---|
| | | display: flex; |
|---|
| | | justify-content: space-between; |
|---|
| | | .leftTree { |
|---|
| | | width: 15%; |
|---|
| | | height: 91%; |
|---|
| | | |
|---|
| | | border-radius: 5px; |
|---|
| | | padding: 1%; |
|---|
| | | max-height: 670px; |
|---|
| | | overflow-y: auto; |
|---|
| | | } |
|---|
| | | .right { |
|---|
| | | width: 80%; |
|---|
| | | height: 91%; |
|---|
| | | |
|---|
| | | border-radius: 5px; |
|---|
| | | padding: 1%; |
|---|
| | | max-height: 670px; |
|---|
| | | // overflow-y: auto; |
|---|
| | | .inquire { |
|---|
| | | // margin-bottom: 10px; |
|---|
| | | padding: 1%; |
|---|
| | | |
|---|
| | | border-radius: 5px; |
|---|
| | | border: 1px solid #dcdfe6; |
|---|
| | | .el-form-item { |
|---|
| | | margin: 5px; |
|---|
| | | } |
|---|
| | | } |
|---|
| | | .table_box { |
|---|
| | | width: 100%; |
|---|
| | | height: 80%; |
|---|
| | | margin: 0 auto; |
|---|
| | | // overflow: auto; |
|---|
| | | margin-top: 10px; |
|---|
| | | |
|---|
| | | .el-table /deep/ th.el-table__cell > .cell { |
|---|
| | | padding: 15px !important; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .el-table--border::after, |
|---|
| | | .el-table--group::after { |
|---|
| | | width: 0; |
|---|
| | | } |
|---|
| | | .el-table::before { |
|---|
| | | height: 0; |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | </style> |
|---|
| | |
|---|
| | | <el-divider /> |
|---|
| | | <div class="mainBox"> |
|---|
| | | <div class="leftTree subpage_Div"> |
|---|
| | | <el-input v-model="filterInput" style="width:200px"></el-input> |
|---|
| | | <el-input |
|---|
| | | v-model="filterInput" |
|---|
| | | style="width:200px" |
|---|
| | | ></el-input> |
|---|
| | | <div style="width:450px"> |
|---|
| | | <el-tree |
|---|
| | | :data="domainData" |
|---|
| | |
|---|
| | | val: 'ä¸å¡æ°æ®', |
|---|
| | | children: [], |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | val: 'å
æ°æ®', |
|---|
| | | children: [], |
|---|
| | | }, |
|---|
| | | ], |
|---|
| | | defaultProps: { |
|---|
| | | children: 'children', |
|---|
| | |
|---|
| | | getDomainTabs().then((res) => { |
|---|
| | | let bdres = res.result.filter((item) => item.ns == 'bd'); |
|---|
| | | let bsres = res.result.filter((item) => item.ns == 'bs'); |
|---|
| | | let mdres = res.result.filter((item) => item.ns == 'md'); |
|---|
| | | for (var i in bdres) { |
|---|
| | | // bdres[i].val = bdres[i].tabDesc + '(' + bdres[i].tab + ')'; |
|---|
| | | bdres[i].val = bdres[i].tabDesc; |
|---|
| | |
|---|
| | | // bsres[i].val = bsres[i].tabDesc + '(' + bsres[i].tab + ')'; |
|---|
| | | bsres[i].val = bsres[i].tabDesc; |
|---|
| | | } |
|---|
| | | for (var i in mdres) { |
|---|
| | | // bsres[i].val = bsres[i].tabDesc + '(' + bsres[i].tab + ')'; |
|---|
| | | mdres[i].val = mdres[i].tabDesc; |
|---|
| | | } |
|---|
| | | this.domainData[0].children = bdres; |
|---|
| | | this.domainData[1].children = bsres; |
|---|
| | | this.domainData[2].children = mdres; |
|---|
| | | }); |
|---|
| | | }, |
|---|
| | | handleSelectionChange(val) { |
|---|
| | |
|---|
| | | border-radius: 5px; |
|---|
| | | padding: 1%; |
|---|
| | | max-height: 670px; |
|---|
| | | overflow-y: auto; |
|---|
| | | // overflow-y: auto; |
|---|
| | | .inquire { |
|---|
| | | margin-bottom: 10px; |
|---|
| | | // margin-bottom: 10px; |
|---|
| | | padding: 1%; |
|---|
| | | |
|---|
| | | border-radius: 5px; |
|---|
| | | border: 1px solid rgb(202, 201, 204); |
|---|
| | | border: 1px solid #dcdfe6; |
|---|
| | | .el-form-item { |
|---|
| | | margin: 5px; |
|---|
| | | } |
|---|
| | |
|---|
| | | height: 80%; |
|---|
| | | margin: 0 auto; |
|---|
| | | overflow: auto; |
|---|
| | | margin-top: 10px; |
|---|
| | | |
|---|
| | | .el-table /deep/ th.el-table__cell > .cell { |
|---|
| | | padding: 15px !important; |
|---|
| | |
|---|
| | | </div> |
|---|
| | | <div class="verSion_rightContent subpage_Div"> |
|---|
| | | <el-form |
|---|
| | | style=" height: 44px; |
|---|
| | | padding: 1%; |
|---|
| | | display: flex; |
|---|
| | | flex-direction: row-reverse; |
|---|
| | | border-radius: 5px; |
|---|
| | | border: 1px solid #dcdfe6;" |
|---|
| | | :inline="true" |
|---|
| | | class="demo-form-inline" |
|---|
| | | > |
|---|
| | |
|---|
| | | >{{ $t('common.append') }}</el-button> |
|---|
| | | </el-form-item> |
|---|
| | | </el-form> |
|---|
| | | <el-divider class="eldivider" /> |
|---|
| | | <div style="height: 80%; padding: 1%; overflow: auto"> |
|---|
| | | <!-- <el-divider class="eldivider" /> --> |
|---|
| | | <div style="height: 80%; margin-top: 10px;"> |
|---|
| | | <el-table |
|---|
| | | ref="filterTable" |
|---|
| | | :data="dbTableData" |
|---|
| | | height="90%" |
|---|
| | | height="100%" |
|---|
| | | border |
|---|
| | | style="width: 100%" |
|---|
| | | > |
|---|
| | |
|---|
| | | |
|---|
| | | border-radius: 5px; |
|---|
| | | padding: 1%; |
|---|
| | | |
|---|
| | | max-height: 670px; |
|---|
| | | overflow-y: auto; |
|---|
| | | } |
|---|
| | | .verSion_rightContent { |
|---|
| | | width: 80%; |
|---|
| | | height: 91%; |
|---|
| | | |
|---|
| | | max-height: 670px; |
|---|
| | | border-radius: 5px; |
|---|
| | | padding: 1%; |
|---|
| | | overflow-y: auto; |
|---|
| | |
|---|
| | | `${$t('dataManage.styleManage')}`, |
|---|
| | | ]"></My-bread> |
|---|
| | | <el-divider /> |
|---|
| | | <div class="searchComp subpage_Div"> |
|---|
| | | <div class="searchComp subpage_Div" style="padding: 1%;"> |
|---|
| | | <el-form |
|---|
| | | ref="ruleForm" |
|---|
| | | :model="ruleForm" |
|---|
| | |
|---|
| | | </el-form> |
|---|
| | | </div> |
|---|
| | | <div class="bottom"> |
|---|
| | | <div class="rightTable"> |
|---|
| | | <div class="rightTable subpage_Div"> |
|---|
| | | <div class="table_box"> |
|---|
| | | <el-table |
|---|
| | | :data="tableData" |
|---|
| | | style="width: 100%" |
|---|
| | | height="100%" |
|---|
| | | height="95%" |
|---|
| | | @selection-change="handleSelectionChange" |
|---|
| | | > |
|---|
| | | <el-table-column |
|---|
| | |
|---|
| | | </el-table> |
|---|
| | | </div> |
|---|
| | | <div |
|---|
| | | style="margin-top: 20px;" |
|---|
| | | class="pagination_box" |
|---|
| | | > |
|---|
| | | <el-pagination |
|---|
| | |
|---|
| | | } |
|---|
| | | .bottom { |
|---|
| | | width: 100%; |
|---|
| | | height: 85%; |
|---|
| | | margin-top: 1%; |
|---|
| | | height: 74%; |
|---|
| | | display: flex; |
|---|
| | | justify-content: space-between; |
|---|
| | | |
|---|
| | | .rightTable { |
|---|
| | | height: 100%; |
|---|
| | | width: 100%; |
|---|
| | | width: 98%; |
|---|
| | | height: 92%; |
|---|
| | | |
|---|
| | | border-radius: 5px; |
|---|
| | | padding: 1%; |
|---|
| | | .table_box { |
|---|
| | | width: 100%; |
|---|
| | | height: 80%; |
|---|
| | | height: 93%; |
|---|
| | | margin: 0 auto; |
|---|
| | | overflow: auto; |
|---|
| | | } |
|---|
| | |
|---|
| | | `${$t('dataManage.versionManage')}`, |
|---|
| | | ]"></My-bread> |
|---|
| | | <el-divider /> |
|---|
| | | <div class="verSionContent"> |
|---|
| | | <!-- <div class="verSion_leftTree"> |
|---|
| | | <ver-dir-tree></ver-dir-tree> |
|---|
| | | </div> --> |
|---|
| | | <div class="verSion_rightContent subpage_Div"> |
|---|
| | | <el-form |
|---|
| | | <div class="inquire subpage_Div"> |
|---|
| | | <el-form |
|---|
| | | ref="ruleForm" |
|---|
| | | :model="ruleForm" |
|---|
| | | :inline="true" |
|---|
| | |
|---|
| | | >{{ $t('common.empty') }}</el-button> |
|---|
| | | </el-form-item> |
|---|
| | | </el-form> |
|---|
| | | <el-divider class="eldivider" /> |
|---|
| | | <div style="height: 73%"> |
|---|
| | | </div> |
|---|
| | | <div class="bottom"> |
|---|
| | | <div class="rightTable subpage_Div"> |
|---|
| | | <div class="table_box"> |
|---|
| | | <el-table |
|---|
| | | :data="tableData" |
|---|
| | | style="width: 100%" |
|---|
| | | height="99%" |
|---|
| | | height="95%" |
|---|
| | | > |
|---|
| | | <el-table-column |
|---|
| | | align="center" |
|---|
| | |
|---|
| | | </template> |
|---|
| | | </el-table-column> |
|---|
| | | </el-table> |
|---|
| | | </div> |
|---|
| | | <div |
|---|
| | | style="margin-top: 20px; " |
|---|
| | | class="pagination_box" |
|---|
| | | > |
|---|
| | | <el-pagination |
|---|
| | |
|---|
| | | > |
|---|
| | | </el-pagination> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | <el-dialog |
|---|
| | | :title="$t('dataManage.vmobj.editVersion')" |
|---|
| | | :visible.sync="dialogFormVisible" |
|---|
| | |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | .inquire { |
|---|
| | | position: relative; |
|---|
| | | |
|---|
| | | padding-bottom: 8px; |
|---|
| | | |
|---|
| | | border-radius: 5px; |
|---|
| | | padding: 1%; |
|---|
| | | .el-form-item { |
|---|
| | | margin: 5px; |
|---|
| | | } |
|---|
| | | } |
|---|
| | | .bottom { |
|---|
| | | width: 100%; |
|---|
| | | margin-top: 1%; |
|---|
| | | height: 74%; |
|---|
| | | display: flex; |
|---|
| | | justify-content: space-between; |
|---|
| | | |
|---|
| | | .rightTable { |
|---|
| | | width: 98%; |
|---|
| | | height: 92%; |
|---|
| | | |
|---|
| | | border-radius: 5px; |
|---|
| | | padding: 1%; |
|---|
| | | .table_box { |
|---|
| | | width: 100%; |
|---|
| | | height: 93%; |
|---|
| | | margin: 0 auto; |
|---|
| | | overflow: auto; |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | </style> |
|---|
| | |
|---|
| | | }, |
|---|
| | | //éç½®å¯ç |
|---|
| | | editPwd() { |
|---|
| | | |
|---|
| | | |
|---|
| | | var std = []; |
|---|
| | | for (var i in this.multipleSelection) { |
|---|
| | | std.push(this.multipleSelection[i].id); |
|---|
| | | } |
|---|
| | | |
|---|
| | | if (std.length == 0) { |
|---|
| | | alert("请å
éæ©ç¨æ·"); |
|---|
| | | return; |
|---|
| | |
|---|
| | | 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"), |
|---|
| | | }, |
|---|
| | | }, |
|---|
| | | }, |
|---|
| | | } |
|---|
