From 99018c2dc6b79e284e85bedec64adce143d74424 Mon Sep 17 00:00:00 2001 From: surprise <15810472099@163.com> Date: 星期四, 18 四月 2024 14:32:45 +0800 Subject: [PATCH] 页面添加 --- src/components/props/occupancyAnalysis copy.vue | 499 ++++++++++++ src/components/props/densityAnalysis.vue | 499 ++++++++++++ src/components/viewer.vue | 92 +- index.html | 4 src/components/props/militaryPlot.vue | 285 ++++++ src/components/wggl/left/czll.vue | 17 src/components/wggl/right/fwxq.vue | 7 src/components/props/occupancyAnalysis.vue | 499 ++++++++++++ src/components/props/situationComparison.vue | 499 ++++++++++++ 9 files changed, 2,356 insertions(+), 45 deletions(-) diff --git a/index.html b/index.html index 93332d3..50336ba 100644 --- a/index.html +++ b/index.html @@ -11,9 +11,9 @@ background-color: transparent !important; } - .te-right { + /* .te-right { height: auto !important; - } + } */ </style> </head> diff --git a/src/components/props/densityAnalysis.vue b/src/components/props/densityAnalysis.vue new file mode 100644 index 0000000..568d598 --- /dev/null +++ b/src/components/props/densityAnalysis.vue @@ -0,0 +1,499 @@ +<template> + <div class="bot" + v-if="showsituation"> + <div class="top1"> + <span class="botcon"> + <span class="icon"></span> + <span class="text">鐢ㄩ瀵嗗害鍒嗘瀽</span> + </span> + <span class="close" + @click="close">x</span> + </div> + <div class="next"> + <el-form ref="form" + :model="form" + label-width="240px"> + <el-form-item label="鍖哄煙:"> + <el-select v-model="form.points" + @change="changeplase"> + <el-option v-for="(item, index) in regions" + :key="index" + :label="item.vname" + :value="{ value: item.vlatlngs, label: item.vname }"> + </el-option> + </el-select> + </el-form-item> + <el-form-item label="璧峰鏃堕棿:"> + <el-date-picker v-model="form.startTime" + value-format="yyyyMMdd" + :picker-options="pickerOptions" + format="yyyy-MM-dd" + type="date" + placeholder="閫夋嫨鏃ユ湡" + @change="change"> + </el-date-picker> + </el-form-item> + <el-form-item label="缁撴潫鏃堕棿:"> + <el-date-picker v-model="form.endTime" + value-format="yyyyMMdd" + :picker-options="pickerOptions" + format="yyyy-MM-dd" + type="date" + placeholder="閫夋嫨鏃ユ湡" + @change="change1"> + </el-date-picker> + </el-form-item> + <el-form-item label="鍒嗘瀽绫诲瀷:"> + <el-select v-model="form.analysisType"> + <el-option label="棰戠偣" + value="1"></el-option> + <el-option label="棰戞" + value="2"></el-option> + </el-select> + </el-form-item> + <el-form-item label="鏃犵嚎鐢典笟鍔�:"> + <el-select v-model="form.radio" + @change="choose"> + <el-option v-for="item in radios" + :key="item.value" + :label="item.bussName" + :value="item.startFreq + '-' + item.endFreq"> + </el-option> + </el-select> + </el-form-item> + </el-form> + <div class="btns"> + <span @click="reset">閲嶇疆</span> + <span @click="analysis">鍒嗘瀽</span> + </div> + </div> + <div class="showpic" + v-if="showpic"> + <div :style="innerbac" + @click="openDia"></div> + </div> + <changePic @colordata="getdata" /> + </div> +</template> + +<script> +import { createPic,freqBandAnalysis,showCQ } from "../../api/http"; +import changePic from "../common/color.vue"; +import bus from "../../utils/bus"; +import axios from "axios"; + +let hander,divPoint3; +let Base64=require("js-base64").Base64; +export default { + components: { + changePic, + }, + data () { + return { + form: { + points: "", + startTime: new Date("2016-06-01"), + endTime: new Date("2016-06-30"), + radio: "璋冮骞挎挱", + freqStart: "87", + freqEnd: "108", + analysisType: "棰戠偣", + }, + nowfile: "", + showsituation: false, + imageid: null, + showpic: false, + pickerOptions: {}, + chooseplase: "", + options: [], + regions: [], + radios: [], + colorContainer: {}, + innerbac: { + width: "30%", + height: "70%", + border: "1px solid #000", + transform: "translate(40px,90px)", + backgroundImage: + "url("+require("@/assets/image/botbtn/color.png")+")", + backgroundPosition: "center", + backgroundSize: ` 100% 100%`, + }, + showdata1: true, + showdata2: true, + showDianci: false, + }; + }, + mounted () { + bus.$on("clearEve",(e) => { + this.reset(); + }); + bus.$on("radioData",(e) => { + this.radios=e; + }); + bus.$on("guanzhou",(e) => { + this.form.startTime=e.fromdate; + this.form.endTime=e.todate; + }); + bus.$on("areaData",(e) => { + this.regions=e; + }); + bus.$on("showdio",(e) => { + this.showsituation=e==9; + this.showdata1=true; + this.showdata2=true; + }); + }, + methods: { + changeplase (value) { + if(value.label.indexOf("骞垮窞")>-1) { + this.chooseplase="骞垮窞"; + this.form.startTime=new Date("2019-10-08"); + this.form.endTime=new Date("2019-10-16"); + window.Viewer.camera.flyTo({ + destination: Cesium.Cartesian3.fromDegrees( + 113.29503528791071, + 23.104708355136264, + 4109.8492337442767 + ), + orientation: { + heading: 0.8349372341578318, + pitch: -0.85222154573481174, + roll: 0, + }, + }); + } else { + this.chooseplase="涓婃捣"; + this.form.startTime=new Date("2016-06-01"); + this.form.endTime=new Date("2016-06-30"); + window.Viewer.camera.flyTo({ + destination: Cesium.Cartesian3.fromDegrees( + 121.23142475566037, + 30.314431916707203, + 101204.78027978493 + ), + orientation: { + heading: 0.149372341578318, + pitch: -0.8022154573481174, + roll: 0, + }, + }); + } + }, + change () { + this.showdata1=false; + }, + change1 () { + this.showdata2=false; + }, + openDia () { + bus.$emit("changeColor",true); + }, + choose (value) { + let arr=value.split("-"); + this.form.freqStart=arr[0]; + this.form.freqEnd=arr[1]; + }, + close () { + this.showsituation=false; + }, + getdata (data) { + this.colorContainer=data; + }, + // 鐐瑰嚮鑾峰緱鎬佸娍 + getTaishi () { + if(hander) { + return; + } + hander=new Cesium.ScreenSpaceEventHandler(Viewer.scene.canvas); + let pickFeature; + // 榧犳爣鐐瑰嚮浜嬩欢 + hander.setInputAction((event) => { + // 鎷惧彇瀵硅薄 + divPoint3&&divPoint3.deleteObject(); + let clickPosition=viewer.scene.camera.pickEllipsoid(event.position); + // 杞粡绾害锛堝姬搴︼級鍧愭爣 + let radiansPos=Cesium.Cartographic.fromCartesian(clickPosition); + let lon=Cesium.Math.toDegrees(radiansPos.longitude); + let lat=Cesium.Math.toDegrees(radiansPos.latitude); + let filename=this.nowfile; + let obj={ + lat: lat, + lng: lon, + analysisAction: "-1", + analysisType: "1", + filename: filename, + }; + showCQ(obj).then((res) => { + let data=res.data; + if(data!="鏃犳暟鎹�") { + divPoint3=sgworld.Creator.createDivPoint( + "鍚堣偉", + { lon: obj.lng,lat: obj.lat }, + { + type: "custom", + offset: ["c",60], + description: ` + <div class="divPoint-custom"> + <p>${data}</p> + </div> + `, + near: 0, + far: 100000, + } + ); + } + }); + //鎶婁綘鎷惧彇鐨勪笢瑗挎墦鍗板嚭鏉ョ湅鐪嬩粈涔堝�煎彲浠ョ敤浣滃垽鏂� + },Cesium.ScreenSpaceEventType.LEFT_CLICK); + }, + analysis () { + this.reset(); + let that=this; + if(that.imageid) { + window.Viewer.entities.removeById(that.imageid); + that.imageid=null; + } + let data={ + colorName: "-100,0000FF;120,FF0000", + startTime: "20160601000000", + endTime: 20160630000000, + freqStart: 87000000, + freqEnd: 108000000, + freqPoint: 87000000, + points: + "[[30.5504351,120.5667114],[32.0499889,120.5667114],[32.0499889,122.4453735],[30.5504351,122.4453735]]", + radius: 0, + analysisAction: "3", + analysisType: 1, + }; + data={ ...data,...this.form }; + data.freqStart=data.freqStart*1000000; + data.freqEnd=data.freqEnd*1000000; + data.startTime=data.startTime+"000000"; + data.endTime=data.endTime*1000000; + data.analysisType=="棰戠偣"? (data.analysisType=1):""; + delete data.radio; + if(this.showdata1) { + data.startTime=20160601000000; + this.chooseplase&&this.chooseplase=="涓婃捣" + ? (data.startTime=20160601000000) + :(data.startTime=20191008000000); + } + if(this.showdata2) { + data.endTime=20160630000000; + this.chooseplase&&this.chooseplase=="涓婃捣" + ? (data.endTime=20160630000000) + :(data.endTime=20191016000000); + } + const loading=that.$loading({ + lock: true, + text: "璁$畻涓�", + spinner: "el-icon-loading", + background: "rgba(0, 0, 0, 0.7)", + }); + data.points=data.points.value; + freqBandAnalysis(data) + .then((res) => { + if(res.message==="Success") { + let points=res.data.imgBounds; + that.nowfile=Base64.encode(res.data.url) + var data1={ + colorSchemes: 1, + file: Base64.encode(res.data.url), + maxColor: "FF0000", + maxValue: 100, + minColor: "0000FF", + minValue: 0, + showBounds: this.form.points.value, + }; + data1={ ...data1,...this.colorContainer }; + createPic(data1) + .then((res2) => { + let rectangle=sgworld.Creator.addSimpleGraphic("rectangle",{ + removeEdit: true, + coordinates: Cesium.Rectangle.fromDegrees( + points.xmin, + points.ymin, + points.xmax, + points.ymax + ), + color: "rgba(255,255,255,0.5)", + image: + "http://221.224.53.36:9081/calc/picurl?file="+ + Base64.encode(res2.data), + }); + that.showDianci=true; + // 鍥剧墖鑾峰彇鎴愬姛 寮�鍚嬀鍙� + that.getTaishi(); + if(that.imageid) { + window.Viewer.entities.removeById(that.imageid); + that.imageid=null; + } + that.imageid=rectangle.id; + + loading.close(); + that.$message({ + message: "璁$畻鎴愬姛", + type: "success", + }); + that.showpic=true; + }) + .catch((error) => { + loading.close(); + }); + } + }) + .catch((error) => { + loading.close(); + }); + }, + reset () { + //閲嶇疆 + if(this.imageid) { + window.Viewer.entities.removeById(this.imageid); + hander&& + hander.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_CLICK); + hander=null; + divPoint3&&divPoint3.deleteObject(); + + this.imageid=null; + this.showDianci=false; + } + }, + }, + watch: { + colorContainer: { + deep: true, + handler (data) { + let colornow={ + width: "30%", + height: "70%", + border: "1px solid #000", + transform: "translate(40px,90px)", + backgroundImage: `linear-gradient(${data.maxColor},${data.minColor})`, + }; + this.innerbac=colornow; + }, + }, + }, +}; +</script> + +<style scoped> +.bot { + width: 1000px; + height: 1150px; + background: url(~@/assets/image/test/22.png); + background-size: 100% 100%; + background-repeat: no-repeat; + position: absolute; + left: 3920px; + top: 680px; +} +.top1 { + width: 95%; + height: 11%; + font-size: 40px; + font-weight: bold; + margin: 0px auto; + border-bottom: 2px solid #fff; + color: #fff; + letter-spacing: 3px; +} +.icon { + position: absolute; + left: 50px; + width: 50px; + height: 50px; + top: 39px; + background-size: 100% 100% !important; + background-repeat: no-repeat !important; + background-position: center !important; + background: url(~@/assets/image/subject/棰樻爣.png); +} +.text { + display: inline-block; + margin-left: 90px; +} +.close { + position: absolute; + font-size: 60px; + font-weight: 400; + right: 60px; + top: 20px; +} +.close:hover { + color: red; + transition: color 1s; + cursor: pointer; +} +.next { + width: 89%; + height: 79%; + margin: 100px auto; +} +.next >>> .el-select { + width: 95% !important; +} +.next >>> .el-form-item { + margin-top: 60px; +} +.next >>> .el-input { + width: 84%; +} +.next >>> .el-date-editor { + width: 515px; +} +.next >>> .el-form-item__label { + color: #fff; + font-size: 40px; +} +.next >>> .el-input__inner { + font-size: 30px; +} +.next >>> .el-form-item__error { + font-size: 30px; + font-weight: 700; +} +.botcon { + display: inline-block; + margin-top: 34px; +} +.btns { + margin-top: 100px; + width: 100%; + height: 70px; + display: flex; + justify-content: center; +} +.btns > span { + display: block; + width: 200px; + height: 70px; + border: 1px solid #000; + text-align: center; + font-size: 35px; + margin: 0 50px; + line-height: 70px; + cursor: pointer; +} +.btns > span:nth-child(3) { + color: #fff; + background-image: linear-gradient(#76c2f6, #6a9cf1); +} +.btns > span:nth-child(-n + 2) { + color: #000; + background: #cadaea; +} +.showpic { + width: 260px; + height: 400px; + background: url(~@/assets/image/botbtn/bac.png); + background-position: center; + background-size: 100% 100%; + position: absolute; + top: 1200px; + right: 0px; +} +</style> diff --git a/src/components/props/militaryPlot.vue b/src/components/props/militaryPlot.vue new file mode 100644 index 0000000..b8bc70c --- /dev/null +++ b/src/components/props/militaryPlot.vue @@ -0,0 +1,285 @@ +<template> + <div class="container" + v-if="ishowtuli" + id="moved2" + @mousedown="moved"> + <div class="top"> + <span style="font-weight: bold">鎬佸娍鏍囩粯</span> + <span class="close" + @click="showtuli">X</span> + </div> + <div class="boxMenu"> + <div class="menu"> + + <div class="menuContent"> + <div class="menuItem" + @click="setMenuClick(item)" + v-for="(item,index) in Option" + :key="index"> + <button>{{ item.name}}</button> + </div> + </div> + + </div> + <!-- <div class="menu"> + <p>涓夌淮鏍囩粯</p> + <div> + <div v-for="(item,index) in Option1" + :key="index"> + </div> + </div> + </div> --> + + </div> + </div> +</template> +<script> +import bus from "../../utils/bus"; +import { juhe } from "../../utils/work"; +export default { + data () { + return { + value: false, + value1: true, + value2: false, + ishowtuli: false, + scale: 2.13, + Option: [ + { + name: '绮楃洿绠ご', + type: 'StraightArrow', + value: 'polygon', + }, + { + name: '鐕曞熬鐩寸澶�', + type: 'SwallowtailArrow', + value: 'polygon', + },{ + name: '閽冲嚮绠ご', + type: 'PincerArrow', + value: 'polygon', + },{ + name: '闆嗙粨鍦�', + type: 'GatheringPlace', + value: 'polygon', + },{ + name: '鍦嗚鐭╁舰', + type: 'RoundedRectangle', + value: 'polygon', + }, + { + name: '鎵囧舰', + type: 'Sector', + value: 'polygon', + },{ + name: '寮撳舰', + type: 'Bow', + value: 'polygon', + },{ + name: '鏀诲嚮绠ご', + type: 'AttackArrow', + value: 'polygon', + },{ + name: '娓呴櫎', + type: 'Clear', + } + ], + + }; + + }, + methods: { + moved (event) { + var drag=document.getElementById("moved2"); + // //鐐瑰嚮鏌愮墿浣撴椂锛岀敤drag瀵硅薄鍗冲彲锛宮ove鍜寀p鏄叏灞�鍖哄煙锛� + // 涔熷氨鏄暣涓枃妗i�氱敤锛屽簲璇ヤ娇鐢╠ocument瀵硅薄鑰屼笉鏄痙rag瀵硅薄(鍚﹀垯锛岄噰鐢╠rag瀵硅薄鏃剁墿浣撳彧鑳藉線鍙虫柟鎴栦笅鏂圭Щ鍔�) + var event=event||window.event; //鍏煎IE娴忚鍣� + // 榧犳爣鐐瑰嚮鐗╀綋閭d竴鍒荤浉瀵逛簬鐗╀綋宸︿晶杈规鐨勮窛绂�=鐐瑰嚮鏃剁殑浣嶇疆鐩稿浜庢祻瑙堝櫒鏈�宸﹁竟鐨勮窛绂�-鐗╀綋宸﹁竟妗嗙浉瀵逛簬娴忚鍣ㄦ渶宸﹁竟鐨勮窛绂� + var diffX=event.clientX*this.scale-drag.offsetLeft; + var diffY=event.clientY*this.scale-drag.offsetTop; + document.onmousemove=(event) => { + var event=event||window.event; + var moveX=event.clientX*this.scale-diffX; + var moveY=event.clientY*this.scale-diffY; + if(moveX<0) { + moveX=0; + } else if(moveX>2304*this.scale-drag.offsetWidth) { + moveX=2304*this.scale-drag.offsetWidth; + } + if(moveY<0) { + moveY=0; + } else if(moveY>4096*this.scale-drag.offsetHeight) { + moveY=4096*this.scale-drag.offsetHeight; + } + drag.style.left=moveX+"px"; + drag.style.top=moveY+"px"; + }; + document.onmouseup=function(event) { + document.onmousemove=null; + document.onmouseup=null; + }; + }, + //杈规鐨勬樉绀洪殣钘� + showtuli () { + this.ishowtuli=false; + //娓呴櫎绯荤粺鍙扮珯锛岀洃娴嬬珯锛実b + }, + setMenuClick (res) { + if(res.type=='Clear') { + sgworld.Creator.ClearMilitaryStandard(); + return + } + + sgworld.Creator.militaryPlotting(res.type,res.value,(entity) => { + }); + } + }, + mounted () { + bus.$on("clearMilitaryPlot",(e) => { + this.ishowtuli=false + this.showtuli() + }); + bus.$on("ishowMilitaryPlot",(e) => { + if(this.ishowtuli) { + this.ishowtuli=false + this.showtuli() + } else { + this.ishowtuli=true + } + }); + }, + watch: { + value (e) { + if(e) { + if(document.getElementsByClassName("tableContain")[0]) { + document.getElementsByClassName("tableContain")[0].style.display= + "none"; + } + } + }, + value1 (e) { + if(e) { + this.showbuild() + if(document.getElementsByClassName("tableContain")[0]) { + document.getElementsByClassName("tableContain")[0].style.display= + "none"; + } + } else { + mode1.deleteObject() + mode1=null + } + }, + }, +}; +</script> +<style scoped> +.top { + width: 94%; + height: 20%; + margin: 0 auto; + border-bottom: 2px solid #fff; + color: #fff; +} +.top > span { + display: inline-block; + margin: 10px 20px; + font-size: 40px; + letter-spacing: 5px; + font-weight: 300; + line-height: 80px; + margin-left: 40px; +} +.container { + width: 800px; + height: 500px; + position: absolute; + right: 340px; + top: 180px; + z-index: 50; + background: url(~@/assets/image/test/鍦嗚鐭╁舰.png) no-repeat; + background-position: center; + background-size: 100% 100%; + cursor: move; +} +.boxMenu { + width: 100%; + height: 70%; + + /* font-weight: bold; + display: flex; + -ms-flex-wrap: wrap; + flex-wrap: wrap; + flex-direction: column; + justify-content: center; + -ms-flex-pack: distribute; + align-items: center; */ +} +.menuTitle { + font-size: 36px; + color: white; + margin: 10px 40px; +} +.menuItem { + margin: 20px 10px; + /* background: #409eff !important; */ +} +.menuItem button { + width: 200px; +} +.menuItem :hover { + /* color: #409eff !important; */ + /* background: #409eff !important; */ +} +.menuContent { + /* display: flex; */ + cursor: pointer; + display: grid; + grid-template-columns: auto auto auto; + text-align: center; + font-size: 32px; + color: white; + margin: 10px 40px; +} +.box .menu { + width: 100%; + height: auto; +} +.box >>> .el-switch__core { + width: 140px !important; + height: 50px; + margin-left: 30px; + border-radius: 28px; +} +.box >>> .el-switch__core:after { + width: 48px; + height: 48px; + margin-left: 0px; + top: 0px; +} +.box >>> .el-switch.is-checked .el-switch__core::after { + margin-left: -50px !important; +} +.box > div { + width: 70%; + height: 70px; + font-size: 40px; + line-height: 70px; + margin-top: 20px; + color: #fff; + display: flex; + flex-wrap: nowrap; + justify-content: space-around; + align-items: center; +} +.close { + position: absolute; + right: 20px; + top: 0px; + cursor: pointer; +} +/* .container>div{ +width: 100%; +height: 20%; +border: 1px solid #000; +} */ +</style> \ No newline at end of file diff --git a/src/components/props/occupancyAnalysis copy.vue b/src/components/props/occupancyAnalysis copy.vue new file mode 100644 index 0000000..a75f72a --- /dev/null +++ b/src/components/props/occupancyAnalysis copy.vue @@ -0,0 +1,499 @@ +<template> + <div class="bot" + v-if="showsituation"> + <div class="top1"> + <span class="botcon"> + <span class="icon"></span> + <span class="text">淇″彿瑕嗙洊鐜囧垎鏋�</span> + </span> + <span class="close" + @click="close">x</span> + </div> + <div class="next"> + <el-form ref="form" + :model="form" + label-width="240px"> + <el-form-item label="鍖哄煙:"> + <el-select v-model="form.points" + @change="changeplase"> + <el-option v-for="(item, index) in regions" + :key="index" + :label="item.vname" + :value="{ value: item.vlatlngs, label: item.vname }"> + </el-option> + </el-select> + </el-form-item> + <el-form-item label="璧峰鏃堕棿:"> + <el-date-picker v-model="form.startTime" + value-format="yyyyMMdd" + :picker-options="pickerOptions" + format="yyyy-MM-dd" + type="date" + placeholder="閫夋嫨鏃ユ湡" + @change="change"> + </el-date-picker> + </el-form-item> + <el-form-item label="缁撴潫鏃堕棿:"> + <el-date-picker v-model="form.endTime" + value-format="yyyyMMdd" + :picker-options="pickerOptions" + format="yyyy-MM-dd" + type="date" + placeholder="閫夋嫨鏃ユ湡" + @change="change1"> + </el-date-picker> + </el-form-item> + <el-form-item label="鍒嗘瀽绫诲瀷:"> + <el-select v-model="form.analysisType"> + <el-option label="棰戠偣" + value="1"></el-option> + <el-option label="棰戞" + value="2"></el-option> + </el-select> + </el-form-item> + <el-form-item label="鏃犵嚎鐢典笟鍔�:"> + <el-select v-model="form.radio" + @change="choose"> + <el-option v-for="item in radios" + :key="item.value" + :label="item.bussName" + :value="item.startFreq + '-' + item.endFreq"> + </el-option> + </el-select> + </el-form-item> + </el-form> + <div class="btns"> + <span @click="reset">閲嶇疆</span> + <span @click="analysis">鍒嗘瀽</span> + </div> + </div> + <div class="showpic" + v-if="showpic"> + <div :style="innerbac" + @click="openDia"></div> + </div> + <changePic @colordata="getdata" /> + </div> +</template> + +<script> +import { createPic,freqBandAnalysis,showCQ } from "../../api/http"; +import changePic from "../common/color.vue"; +import bus from "../../utils/bus"; +import axios from "axios"; + +let hander,divPoint3; +let Base64=require("js-base64").Base64; +export default { + components: { + changePic, + }, + data () { + return { + form: { + points: "", + startTime: new Date("2016-06-01"), + endTime: new Date("2016-06-30"), + radio: "璋冮骞挎挱", + freqStart: "87", + freqEnd: "108", + analysisType: "棰戠偣", + }, + nowfile: "", + showsituation: false, + imageid: null, + showpic: false, + pickerOptions: {}, + chooseplase: "", + options: [], + regions: [], + radios: [], + colorContainer: {}, + innerbac: { + width: "30%", + height: "70%", + border: "1px solid #000", + transform: "translate(40px,90px)", + backgroundImage: + "url("+require("@/assets/image/botbtn/color.png")+")", + backgroundPosition: "center", + backgroundSize: ` 100% 100%`, + }, + showdata1: true, + showdata2: true, + showDianci: false, + }; + }, + mounted () { + bus.$on("clearEve",(e) => { + this.reset(); + }); + bus.$on("radioData",(e) => { + this.radios=e; + }); + bus.$on("guanzhou",(e) => { + this.form.startTime=e.fromdate; + this.form.endTime=e.todate; + }); + bus.$on("areaData",(e) => { + this.regions=e; + }); + bus.$on("showdio",(e) => { + this.showsituation=e==10; + this.showdata1=true; + this.showdata2=true; + }); + }, + methods: { + changeplase (value) { + if(value.label.indexOf("骞垮窞")>-1) { + this.chooseplase="骞垮窞"; + this.form.startTime=new Date("2019-10-08"); + this.form.endTime=new Date("2019-10-16"); + window.Viewer.camera.flyTo({ + destination: Cesium.Cartesian3.fromDegrees( + 113.29503528791071, + 23.104708355136264, + 4109.8492337442767 + ), + orientation: { + heading: 0.8349372341578318, + pitch: -0.85222154573481174, + roll: 0, + }, + }); + } else { + this.chooseplase="涓婃捣"; + this.form.startTime=new Date("2016-06-01"); + this.form.endTime=new Date("2016-06-30"); + window.Viewer.camera.flyTo({ + destination: Cesium.Cartesian3.fromDegrees( + 121.23142475566037, + 30.314431916707203, + 101204.78027978493 + ), + orientation: { + heading: 0.149372341578318, + pitch: -0.8022154573481174, + roll: 0, + }, + }); + } + }, + change () { + this.showdata1=false; + }, + change1 () { + this.showdata2=false; + }, + openDia () { + bus.$emit("changeColor",true); + }, + choose (value) { + let arr=value.split("-"); + this.form.freqStart=arr[0]; + this.form.freqEnd=arr[1]; + }, + close () { + this.showsituation=false; + }, + getdata (data) { + this.colorContainer=data; + }, + // 鐐瑰嚮鑾峰緱鎬佸娍 + getTaishi () { + if(hander) { + return; + } + hander=new Cesium.ScreenSpaceEventHandler(Viewer.scene.canvas); + let pickFeature; + // 榧犳爣鐐瑰嚮浜嬩欢 + hander.setInputAction((event) => { + // 鎷惧彇瀵硅薄 + divPoint3&&divPoint3.deleteObject(); + let clickPosition=viewer.scene.camera.pickEllipsoid(event.position); + // 杞粡绾害锛堝姬搴︼級鍧愭爣 + let radiansPos=Cesium.Cartographic.fromCartesian(clickPosition); + let lon=Cesium.Math.toDegrees(radiansPos.longitude); + let lat=Cesium.Math.toDegrees(radiansPos.latitude); + let filename=this.nowfile; + let obj={ + lat: lat, + lng: lon, + analysisAction: "-1", + analysisType: "1", + filename: filename, + }; + showCQ(obj).then((res) => { + let data=res.data; + if(data!="鏃犳暟鎹�") { + divPoint3=sgworld.Creator.createDivPoint( + "鍚堣偉", + { lon: obj.lng,lat: obj.lat }, + { + type: "custom", + offset: ["c",60], + description: ` + <div class="divPoint-custom"> + <p>${data}</p> + </div> + `, + near: 0, + far: 100000, + } + ); + } + }); + //鎶婁綘鎷惧彇鐨勪笢瑗挎墦鍗板嚭鏉ョ湅鐪嬩粈涔堝�煎彲浠ョ敤浣滃垽鏂� + },Cesium.ScreenSpaceEventType.LEFT_CLICK); + }, + analysis () { + this.reset(); + let that=this; + if(that.imageid) { + window.Viewer.entities.removeById(that.imageid); + that.imageid=null; + } + let data={ + colorName: "-100,0000FF;120,FF0000", + startTime: "20160601000000", + endTime: 20160630000000, + freqStart: 87000000, + freqEnd: 108000000, + freqPoint: 87000000, + points: + "[[30.5504351,120.5667114],[32.0499889,120.5667114],[32.0499889,122.4453735],[30.5504351,122.4453735]]", + radius: 0, + analysisAction: "3", + analysisType: 1, + }; + data={ ...data,...this.form }; + data.freqStart=data.freqStart*1000000; + data.freqEnd=data.freqEnd*1000000; + data.startTime=data.startTime+"000000"; + data.endTime=data.endTime*1000000; + data.analysisType=="棰戠偣"? (data.analysisType=1):""; + delete data.radio; + if(this.showdata1) { + data.startTime=20160601000000; + this.chooseplase&&this.chooseplase=="涓婃捣" + ? (data.startTime=20160601000000) + :(data.startTime=20191008000000); + } + if(this.showdata2) { + data.endTime=20160630000000; + this.chooseplase&&this.chooseplase=="涓婃捣" + ? (data.endTime=20160630000000) + :(data.endTime=20191016000000); + } + const loading=that.$loading({ + lock: true, + text: "璁$畻涓�", + spinner: "el-icon-loading", + background: "rgba(0, 0, 0, 0.7)", + }); + data.points=data.points.value; + freqBandAnalysis(data) + .then((res) => { + if(res.message==="Success") { + let points=res.data.imgBounds; + that.nowfile=Base64.encode(res.data.url) + var data1={ + colorSchemes: 1, + file: Base64.encode(res.data.url), + maxColor: "FF0000", + maxValue: 100, + minColor: "0000FF", + minValue: 0, + showBounds: this.form.points.value, + }; + data1={ ...data1,...this.colorContainer }; + createPic(data1) + .then((res2) => { + let rectangle=sgworld.Creator.addSimpleGraphic("rectangle",{ + removeEdit: true, + coordinates: Cesium.Rectangle.fromDegrees( + points.xmin, + points.ymin, + points.xmax, + points.ymax + ), + color: "rgba(255,255,255,0.5)", + image: + "http://221.224.53.36:9081/calc/picurl?file="+ + Base64.encode(res2.data), + }); + that.showDianci=true; + // 鍥剧墖鑾峰彇鎴愬姛 寮�鍚嬀鍙� + that.getTaishi(); + if(that.imageid) { + window.Viewer.entities.removeById(that.imageid); + that.imageid=null; + } + that.imageid=rectangle.id; + + loading.close(); + that.$message({ + message: "璁$畻鎴愬姛", + type: "success", + }); + that.showpic=true; + }) + .catch((error) => { + loading.close(); + }); + } + }) + .catch((error) => { + loading.close(); + }); + }, + reset () { + //閲嶇疆 + if(this.imageid) { + window.Viewer.entities.removeById(this.imageid); + hander&& + hander.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_CLICK); + hander=null; + divPoint3&&divPoint3.deleteObject(); + + this.imageid=null; + this.showDianci=false; + } + }, + }, + watch: { + colorContainer: { + deep: true, + handler (data) { + let colornow={ + width: "30%", + height: "70%", + border: "1px solid #000", + transform: "translate(40px,90px)", + backgroundImage: `linear-gradient(${data.maxColor},${data.minColor})`, + }; + this.innerbac=colornow; + }, + }, + }, +}; +</script> + +<style scoped> +.bot { + width: 1000px; + height: 1150px; + background: url(~@/assets/image/test/22.png); + background-size: 100% 100%; + background-repeat: no-repeat; + position: absolute; + left: 3920px; + top: 680px; +} +.top1 { + width: 95%; + height: 11%; + font-size: 40px; + font-weight: bold; + margin: 0px auto; + border-bottom: 2px solid #fff; + color: #fff; + letter-spacing: 3px; +} +.icon { + position: absolute; + left: 50px; + width: 50px; + height: 50px; + top: 39px; + background-size: 100% 100% !important; + background-repeat: no-repeat !important; + background-position: center !important; + background: url(~@/assets/image/subject/棰樻爣.png); +} +.text { + display: inline-block; + margin-left: 90px; +} +.close { + position: absolute; + font-size: 60px; + font-weight: 400; + right: 60px; + top: 20px; +} +.close:hover { + color: red; + transition: color 1s; + cursor: pointer; +} +.next { + width: 89%; + height: 79%; + margin: 100px auto; +} +.next >>> .el-select { + width: 95% !important; +} +.next >>> .el-form-item { + margin-top: 60px; +} +.next >>> .el-input { + width: 84%; +} +.next >>> .el-date-editor { + width: 515px; +} +.next >>> .el-form-item__label { + color: #fff; + font-size: 40px; +} +.next >>> .el-input__inner { + font-size: 30px; +} +.next >>> .el-form-item__error { + font-size: 30px; + font-weight: 700; +} +.botcon { + display: inline-block; + margin-top: 34px; +} +.btns { + margin-top: 100px; + width: 100%; + height: 70px; + display: flex; + justify-content: center; +} +.btns > span { + display: block; + width: 200px; + height: 70px; + border: 1px solid #000; + text-align: center; + font-size: 35px; + margin: 0 50px; + line-height: 70px; + cursor: pointer; +} +.btns > span:nth-child(3) { + color: #fff; + background-image: linear-gradient(#76c2f6, #6a9cf1); +} +.btns > span:nth-child(-n + 2) { + color: #000; + background: #cadaea; +} +.showpic { + width: 260px; + height: 400px; + background: url(~@/assets/image/botbtn/bac.png); + background-position: center; + background-size: 100% 100%; + position: absolute; + top: 1200px; + right: 0px; +} +</style> diff --git a/src/components/props/occupancyAnalysis.vue b/src/components/props/occupancyAnalysis.vue new file mode 100644 index 0000000..5c2f70b --- /dev/null +++ b/src/components/props/occupancyAnalysis.vue @@ -0,0 +1,499 @@ +<template> + <div class="bot" + v-if="showsituation"> + <div class="top1"> + <span class="botcon"> + <span class="icon"></span> + <span class="text">棰戣氨鍗犵敤搴﹀垎鏋�</span> + </span> + <span class="close" + @click="close">x</span> + </div> + <div class="next"> + <el-form ref="form" + :model="form" + label-width="240px"> + <el-form-item label="鍖哄煙:"> + <el-select v-model="form.points" + @change="changeplase"> + <el-option v-for="(item, index) in regions" + :key="index" + :label="item.vname" + :value="{ value: item.vlatlngs, label: item.vname }"> + </el-option> + </el-select> + </el-form-item> + <el-form-item label="璧峰鏃堕棿:"> + <el-date-picker v-model="form.startTime" + value-format="yyyyMMdd" + :picker-options="pickerOptions" + format="yyyy-MM-dd" + type="date" + placeholder="閫夋嫨鏃ユ湡" + @change="change"> + </el-date-picker> + </el-form-item> + <el-form-item label="缁撴潫鏃堕棿:"> + <el-date-picker v-model="form.endTime" + value-format="yyyyMMdd" + :picker-options="pickerOptions" + format="yyyy-MM-dd" + type="date" + placeholder="閫夋嫨鏃ユ湡" + @change="change1"> + </el-date-picker> + </el-form-item> + <el-form-item label="鍒嗘瀽绫诲瀷:"> + <el-select v-model="form.analysisType"> + <el-option label="棰戠偣" + value="1"></el-option> + <el-option label="棰戞" + value="2"></el-option> + </el-select> + </el-form-item> + <el-form-item label="鏃犵嚎鐢典笟鍔�:"> + <el-select v-model="form.radio" + @change="choose"> + <el-option v-for="item in radios" + :key="item.value" + :label="item.bussName" + :value="item.startFreq + '-' + item.endFreq"> + </el-option> + </el-select> + </el-form-item> + </el-form> + <div class="btns"> + <span @click="reset">閲嶇疆</span> + <span @click="analysis">鍒嗘瀽</span> + </div> + </div> + <div class="showpic" + v-if="showpic"> + <div :style="innerbac" + @click="openDia"></div> + </div> + <changePic @colordata="getdata" /> + </div> +</template> + +<script> +import { createPic,freqBandAnalysis,showCQ } from "../../api/http"; +import changePic from "../common/color.vue"; +import bus from "../../utils/bus"; +import axios from "axios"; + +let hander,divPoint3; +let Base64=require("js-base64").Base64; +export default { + components: { + changePic, + }, + data () { + return { + form: { + points: "", + startTime: new Date("2016-06-01"), + endTime: new Date("2016-06-30"), + radio: "璋冮骞挎挱", + freqStart: "87", + freqEnd: "108", + analysisType: "棰戠偣", + }, + nowfile: "", + showsituation: false, + imageid: null, + showpic: false, + pickerOptions: {}, + chooseplase: "", + options: [], + regions: [], + radios: [], + colorContainer: {}, + innerbac: { + width: "30%", + height: "70%", + border: "1px solid #000", + transform: "translate(40px,90px)", + backgroundImage: + "url("+require("@/assets/image/botbtn/color.png")+")", + backgroundPosition: "center", + backgroundSize: ` 100% 100%`, + }, + showdata1: true, + showdata2: true, + showDianci: false, + }; + }, + mounted () { + bus.$on("clearEve",(e) => { + this.reset(); + }); + bus.$on("radioData",(e) => { + this.radios=e; + }); + bus.$on("guanzhou",(e) => { + this.form.startTime=e.fromdate; + this.form.endTime=e.todate; + }); + bus.$on("areaData",(e) => { + this.regions=e; + }); + bus.$on("showdio",(e) => { + this.showsituation=e==8; + this.showdata1=true; + this.showdata2=true; + }); + }, + methods: { + changeplase (value) { + if(value.label.indexOf("骞垮窞")>-1) { + this.chooseplase="骞垮窞"; + this.form.startTime=new Date("2019-10-08"); + this.form.endTime=new Date("2019-10-16"); + window.Viewer.camera.flyTo({ + destination: Cesium.Cartesian3.fromDegrees( + 113.29503528791071, + 23.104708355136264, + 4109.8492337442767 + ), + orientation: { + heading: 0.8349372341578318, + pitch: -0.85222154573481174, + roll: 0, + }, + }); + } else { + this.chooseplase="涓婃捣"; + this.form.startTime=new Date("2016-06-01"); + this.form.endTime=new Date("2016-06-30"); + window.Viewer.camera.flyTo({ + destination: Cesium.Cartesian3.fromDegrees( + 121.23142475566037, + 30.314431916707203, + 101204.78027978493 + ), + orientation: { + heading: 0.149372341578318, + pitch: -0.8022154573481174, + roll: 0, + }, + }); + } + }, + change () { + this.showdata1=false; + }, + change1 () { + this.showdata2=false; + }, + openDia () { + bus.$emit("changeColor",true); + }, + choose (value) { + let arr=value.split("-"); + this.form.freqStart=arr[0]; + this.form.freqEnd=arr[1]; + }, + close () { + this.showsituation=false; + }, + getdata (data) { + this.colorContainer=data; + }, + // 鐐瑰嚮鑾峰緱鎬佸娍 + getTaishi () { + if(hander) { + return; + } + hander=new Cesium.ScreenSpaceEventHandler(Viewer.scene.canvas); + let pickFeature; + // 榧犳爣鐐瑰嚮浜嬩欢 + hander.setInputAction((event) => { + // 鎷惧彇瀵硅薄 + divPoint3&&divPoint3.deleteObject(); + let clickPosition=viewer.scene.camera.pickEllipsoid(event.position); + // 杞粡绾害锛堝姬搴︼級鍧愭爣 + let radiansPos=Cesium.Cartographic.fromCartesian(clickPosition); + let lon=Cesium.Math.toDegrees(radiansPos.longitude); + let lat=Cesium.Math.toDegrees(radiansPos.latitude); + let filename=this.nowfile; + let obj={ + lat: lat, + lng: lon, + analysisAction: "-1", + analysisType: "1", + filename: filename, + }; + showCQ(obj).then((res) => { + let data=res.data; + if(data!="鏃犳暟鎹�") { + divPoint3=sgworld.Creator.createDivPoint( + "鍚堣偉", + { lon: obj.lng,lat: obj.lat }, + { + type: "custom", + offset: ["c",60], + description: ` + <div class="divPoint-custom"> + <p>${data}</p> + </div> + `, + near: 0, + far: 100000, + } + ); + } + }); + //鎶婁綘鎷惧彇鐨勪笢瑗挎墦鍗板嚭鏉ョ湅鐪嬩粈涔堝�煎彲浠ョ敤浣滃垽鏂� + },Cesium.ScreenSpaceEventType.LEFT_CLICK); + }, + analysis () { + this.reset(); + let that=this; + if(that.imageid) { + window.Viewer.entities.removeById(that.imageid); + that.imageid=null; + } + let data={ + colorName: "-100,0000FF;120,FF0000", + startTime: "20160601000000", + endTime: 20160630000000, + freqStart: 87000000, + freqEnd: 108000000, + freqPoint: 87000000, + points: + "[[30.5504351,120.5667114],[32.0499889,120.5667114],[32.0499889,122.4453735],[30.5504351,122.4453735]]", + radius: 0, + analysisAction: "3", + analysisType: 1, + }; + data={ ...data,...this.form }; + data.freqStart=data.freqStart*1000000; + data.freqEnd=data.freqEnd*1000000; + data.startTime=data.startTime+"000000"; + data.endTime=data.endTime*1000000; + data.analysisType=="棰戠偣"? (data.analysisType=1):""; + delete data.radio; + if(this.showdata1) { + data.startTime=20160601000000; + this.chooseplase&&this.chooseplase=="涓婃捣" + ? (data.startTime=20160601000000) + :(data.startTime=20191008000000); + } + if(this.showdata2) { + data.endTime=20160630000000; + this.chooseplase&&this.chooseplase=="涓婃捣" + ? (data.endTime=20160630000000) + :(data.endTime=20191016000000); + } + const loading=that.$loading({ + lock: true, + text: "璁$畻涓�", + spinner: "el-icon-loading", + background: "rgba(0, 0, 0, 0.7)", + }); + data.points=data.points.value; + freqBandAnalysis(data) + .then((res) => { + if(res.message==="Success") { + let points=res.data.imgBounds; + that.nowfile=Base64.encode(res.data.url) + var data1={ + colorSchemes: 1, + file: Base64.encode(res.data.url), + maxColor: "FF0000", + maxValue: 100, + minColor: "0000FF", + minValue: 0, + showBounds: this.form.points.value, + }; + data1={ ...data1,...this.colorContainer }; + createPic(data1) + .then((res2) => { + let rectangle=sgworld.Creator.addSimpleGraphic("rectangle",{ + removeEdit: true, + coordinates: Cesium.Rectangle.fromDegrees( + points.xmin, + points.ymin, + points.xmax, + points.ymax + ), + color: "rgba(255,255,255,0.5)", + image: + "http://221.224.53.36:9081/calc/picurl?file="+ + Base64.encode(res2.data), + }); + that.showDianci=true; + // 鍥剧墖鑾峰彇鎴愬姛 寮�鍚嬀鍙� + that.getTaishi(); + if(that.imageid) { + window.Viewer.entities.removeById(that.imageid); + that.imageid=null; + } + that.imageid=rectangle.id; + + loading.close(); + that.$message({ + message: "璁$畻鎴愬姛", + type: "success", + }); + that.showpic=true; + }) + .catch((error) => { + loading.close(); + }); + } + }) + .catch((error) => { + loading.close(); + }); + }, + reset () { + //閲嶇疆 + if(this.imageid) { + window.Viewer.entities.removeById(this.imageid); + hander&& + hander.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_CLICK); + hander=null; + divPoint3&&divPoint3.deleteObject(); + + this.imageid=null; + this.showDianci=false; + } + }, + }, + watch: { + colorContainer: { + deep: true, + handler (data) { + let colornow={ + width: "30%", + height: "70%", + border: "1px solid #000", + transform: "translate(40px,90px)", + backgroundImage: `linear-gradient(${data.maxColor},${data.minColor})`, + }; + this.innerbac=colornow; + }, + }, + }, +}; +</script> + +<style scoped> +.bot { + width: 1000px; + height: 1150px; + background: url(~@/assets/image/test/22.png); + background-size: 100% 100%; + background-repeat: no-repeat; + position: absolute; + left: 3920px; + top: 680px; +} +.top1 { + width: 95%; + height: 11%; + font-size: 40px; + font-weight: bold; + margin: 0px auto; + border-bottom: 2px solid #fff; + color: #fff; + letter-spacing: 3px; +} +.icon { + position: absolute; + left: 50px; + width: 50px; + height: 50px; + top: 39px; + background-size: 100% 100% !important; + background-repeat: no-repeat !important; + background-position: center !important; + background: url(~@/assets/image/subject/棰樻爣.png); +} +.text { + display: inline-block; + margin-left: 90px; +} +.close { + position: absolute; + font-size: 60px; + font-weight: 400; + right: 60px; + top: 20px; +} +.close:hover { + color: red; + transition: color 1s; + cursor: pointer; +} +.next { + width: 89%; + height: 79%; + margin: 100px auto; +} +.next >>> .el-select { + width: 95% !important; +} +.next >>> .el-form-item { + margin-top: 60px; +} +.next >>> .el-input { + width: 84%; +} +.next >>> .el-date-editor { + width: 515px; +} +.next >>> .el-form-item__label { + color: #fff; + font-size: 40px; +} +.next >>> .el-input__inner { + font-size: 30px; +} +.next >>> .el-form-item__error { + font-size: 30px; + font-weight: 700; +} +.botcon { + display: inline-block; + margin-top: 34px; +} +.btns { + margin-top: 100px; + width: 100%; + height: 70px; + display: flex; + justify-content: center; +} +.btns > span { + display: block; + width: 200px; + height: 70px; + border: 1px solid #000; + text-align: center; + font-size: 35px; + margin: 0 50px; + line-height: 70px; + cursor: pointer; +} +.btns > span:nth-child(3) { + color: #fff; + background-image: linear-gradient(#76c2f6, #6a9cf1); +} +.btns > span:nth-child(-n + 2) { + color: #000; + background: #cadaea; +} +.showpic { + width: 260px; + height: 400px; + background: url(~@/assets/image/botbtn/bac.png); + background-position: center; + background-size: 100% 100%; + position: absolute; + top: 1200px; + right: 0px; +} +</style> diff --git a/src/components/props/situationComparison.vue b/src/components/props/situationComparison.vue new file mode 100644 index 0000000..9228e4b --- /dev/null +++ b/src/components/props/situationComparison.vue @@ -0,0 +1,499 @@ +<template> + <div class="bot" + v-if="showsituation"> + <div class="top1"> + <span class="botcon"> + <span class="icon"></span> + <span class="text">鐢电鎬佸娍瀵规瘮</span> + </span> + <span class="close" + @click="close">x</span> + </div> + <div class="next"> + <el-form ref="form" + :model="form" + label-width="240px"> + <el-form-item label="鍖哄煙:"> + <el-select v-model="form.points" + @change="changeplase"> + <el-option v-for="(item, index) in regions" + :key="index" + :label="item.vname" + :value="{ value: item.vlatlngs, label: item.vname }"> + </el-option> + </el-select> + </el-form-item> + <el-form-item label="璧峰鏃堕棿:"> + <el-date-picker v-model="form.startTime" + value-format="yyyyMMdd" + :picker-options="pickerOptions" + format="yyyy-MM-dd" + type="date" + placeholder="閫夋嫨鏃ユ湡" + @change="change"> + </el-date-picker> + </el-form-item> + <el-form-item label="缁撴潫鏃堕棿:"> + <el-date-picker v-model="form.endTime" + value-format="yyyyMMdd" + :picker-options="pickerOptions" + format="yyyy-MM-dd" + type="date" + placeholder="閫夋嫨鏃ユ湡" + @change="change1"> + </el-date-picker> + </el-form-item> + <el-form-item label="鍒嗘瀽绫诲瀷:"> + <el-select v-model="form.analysisType"> + <el-option label="棰戠偣" + value="1"></el-option> + <el-option label="棰戞" + value="2"></el-option> + </el-select> + </el-form-item> + <el-form-item label="鏃犵嚎鐢典笟鍔�:"> + <el-select v-model="form.radio" + @change="choose"> + <el-option v-for="item in radios" + :key="item.value" + :label="item.bussName" + :value="item.startFreq + '-' + item.endFreq"> + </el-option> + </el-select> + </el-form-item> + </el-form> + <div class="btns"> + <span @click="reset">閲嶇疆</span> + <span @click="analysis">鍒嗘瀽</span> + </div> + </div> + <div class="showpic" + v-if="showpic"> + <div :style="innerbac" + @click="openDia"></div> + </div> + <changePic @colordata="getdata" /> + </div> +</template> + +<script> +import { createPic,freqBandAnalysis,showCQ } from "../../api/http"; +import changePic from "../common/color.vue"; +import bus from "../../utils/bus"; +import axios from "axios"; + +let hander,divPoint3; +let Base64=require("js-base64").Base64; +export default { + components: { + changePic, + }, + data () { + return { + form: { + points: "", + startTime: new Date("2016-06-01"), + endTime: new Date("2016-06-30"), + radio: "璋冮骞挎挱", + freqStart: "87", + freqEnd: "108", + analysisType: "棰戠偣", + }, + nowfile: "", + showsituation: false, + imageid: null, + showpic: false, + pickerOptions: {}, + chooseplase: "", + options: [], + regions: [], + radios: [], + colorContainer: {}, + innerbac: { + width: "30%", + height: "70%", + border: "1px solid #000", + transform: "translate(40px,90px)", + backgroundImage: + "url("+require("@/assets/image/botbtn/color.png")+")", + backgroundPosition: "center", + backgroundSize: ` 100% 100%`, + }, + showdata1: true, + showdata2: true, + showDianci: false, + }; + }, + mounted () { + bus.$on("clearEve",(e) => { + this.reset(); + }); + bus.$on("radioData",(e) => { + this.radios=e; + }); + bus.$on("guanzhou",(e) => { + this.form.startTime=e.fromdate; + this.form.endTime=e.todate; + }); + bus.$on("areaData",(e) => { + this.regions=e; + }); + bus.$on("showdio",(e) => { + this.showsituation=e==7; + this.showdata1=true; + this.showdata2=true; + }); + }, + methods: { + changeplase (value) { + if(value.label.indexOf("骞垮窞")>-1) { + this.chooseplase="骞垮窞"; + this.form.startTime=new Date("2019-10-08"); + this.form.endTime=new Date("2019-10-16"); + window.Viewer.camera.flyTo({ + destination: Cesium.Cartesian3.fromDegrees( + 113.29503528791071, + 23.104708355136264, + 4109.8492337442767 + ), + orientation: { + heading: 0.8349372341578318, + pitch: -0.85222154573481174, + roll: 0, + }, + }); + } else { + this.chooseplase="涓婃捣"; + this.form.startTime=new Date("2016-06-01"); + this.form.endTime=new Date("2016-06-30"); + window.Viewer.camera.flyTo({ + destination: Cesium.Cartesian3.fromDegrees( + 121.23142475566037, + 30.314431916707203, + 101204.78027978493 + ), + orientation: { + heading: 0.149372341578318, + pitch: -0.8022154573481174, + roll: 0, + }, + }); + } + }, + change () { + this.showdata1=false; + }, + change1 () { + this.showdata2=false; + }, + openDia () { + bus.$emit("changeColor",true); + }, + choose (value) { + let arr=value.split("-"); + this.form.freqStart=arr[0]; + this.form.freqEnd=arr[1]; + }, + close () { + this.showsituation=false; + }, + getdata (data) { + this.colorContainer=data; + }, + // 鐐瑰嚮鑾峰緱鎬佸娍 + getTaishi () { + if(hander) { + return; + } + hander=new Cesium.ScreenSpaceEventHandler(Viewer.scene.canvas); + let pickFeature; + // 榧犳爣鐐瑰嚮浜嬩欢 + hander.setInputAction((event) => { + // 鎷惧彇瀵硅薄 + divPoint3&&divPoint3.deleteObject(); + let clickPosition=viewer.scene.camera.pickEllipsoid(event.position); + // 杞粡绾害锛堝姬搴︼級鍧愭爣 + let radiansPos=Cesium.Cartographic.fromCartesian(clickPosition); + let lon=Cesium.Math.toDegrees(radiansPos.longitude); + let lat=Cesium.Math.toDegrees(radiansPos.latitude); + let filename=this.nowfile; + let obj={ + lat: lat, + lng: lon, + analysisAction: "-1", + analysisType: "1", + filename: filename, + }; + showCQ(obj).then((res) => { + let data=res.data; + if(data!="鏃犳暟鎹�") { + divPoint3=sgworld.Creator.createDivPoint( + "鍚堣偉", + { lon: obj.lng,lat: obj.lat }, + { + type: "custom", + offset: ["c",60], + description: ` + <div class="divPoint-custom"> + <p>${data}</p> + </div> + `, + near: 0, + far: 100000, + } + ); + } + }); + //鎶婁綘鎷惧彇鐨勪笢瑗挎墦鍗板嚭鏉ョ湅鐪嬩粈涔堝�煎彲浠ョ敤浣滃垽鏂� + },Cesium.ScreenSpaceEventType.LEFT_CLICK); + }, + analysis () { + this.reset(); + let that=this; + if(that.imageid) { + window.Viewer.entities.removeById(that.imageid); + that.imageid=null; + } + let data={ + colorName: "-100,0000FF;120,FF0000", + startTime: "20160601000000", + endTime: 20160630000000, + freqStart: 87000000, + freqEnd: 108000000, + freqPoint: 87000000, + points: + "[[30.5504351,120.5667114],[32.0499889,120.5667114],[32.0499889,122.4453735],[30.5504351,122.4453735]]", + radius: 0, + analysisAction: "3", + analysisType: 1, + }; + data={ ...data,...this.form }; + data.freqStart=data.freqStart*1000000; + data.freqEnd=data.freqEnd*1000000; + data.startTime=data.startTime+"000000"; + data.endTime=data.endTime*1000000; + data.analysisType=="棰戠偣"? (data.analysisType=1):""; + delete data.radio; + if(this.showdata1) { + data.startTime=20160601000000; + this.chooseplase&&this.chooseplase=="涓婃捣" + ? (data.startTime=20160601000000) + :(data.startTime=20191008000000); + } + if(this.showdata2) { + data.endTime=20160630000000; + this.chooseplase&&this.chooseplase=="涓婃捣" + ? (data.endTime=20160630000000) + :(data.endTime=20191016000000); + } + const loading=that.$loading({ + lock: true, + text: "璁$畻涓�", + spinner: "el-icon-loading", + background: "rgba(0, 0, 0, 0.7)", + }); + data.points=data.points.value; + freqBandAnalysis(data) + .then((res) => { + if(res.message==="Success") { + let points=res.data.imgBounds; + that.nowfile=Base64.encode(res.data.url) + var data1={ + colorSchemes: 1, + file: Base64.encode(res.data.url), + maxColor: "FF0000", + maxValue: 100, + minColor: "0000FF", + minValue: 0, + showBounds: this.form.points.value, + }; + data1={ ...data1,...this.colorContainer }; + createPic(data1) + .then((res2) => { + let rectangle=sgworld.Creator.addSimpleGraphic("rectangle",{ + removeEdit: true, + coordinates: Cesium.Rectangle.fromDegrees( + points.xmin, + points.ymin, + points.xmax, + points.ymax + ), + color: "rgba(255,255,255,0.5)", + image: + "http://221.224.53.36:9081/calc/picurl?file="+ + Base64.encode(res2.data), + }); + that.showDianci=true; + // 鍥剧墖鑾峰彇鎴愬姛 寮�鍚嬀鍙� + that.getTaishi(); + if(that.imageid) { + window.Viewer.entities.removeById(that.imageid); + that.imageid=null; + } + that.imageid=rectangle.id; + + loading.close(); + that.$message({ + message: "璁$畻鎴愬姛", + type: "success", + }); + that.showpic=true; + }) + .catch((error) => { + loading.close(); + }); + } + }) + .catch((error) => { + loading.close(); + }); + }, + reset () { + //閲嶇疆 + if(this.imageid) { + window.Viewer.entities.removeById(this.imageid); + hander&& + hander.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_CLICK); + hander=null; + divPoint3&&divPoint3.deleteObject(); + + this.imageid=null; + this.showDianci=false; + } + }, + }, + watch: { + colorContainer: { + deep: true, + handler (data) { + let colornow={ + width: "30%", + height: "70%", + border: "1px solid #000", + transform: "translate(40px,90px)", + backgroundImage: `linear-gradient(${data.maxColor},${data.minColor})`, + }; + this.innerbac=colornow; + }, + }, + }, +}; +</script> + +<style scoped> +.bot { + width: 1000px; + height: 1150px; + background: url(~@/assets/image/test/22.png); + background-size: 100% 100%; + background-repeat: no-repeat; + position: absolute; + left: 3920px; + top: 680px; +} +.top1 { + width: 95%; + height: 11%; + font-size: 40px; + font-weight: bold; + margin: 0px auto; + border-bottom: 2px solid #fff; + color: #fff; + letter-spacing: 3px; +} +.icon { + position: absolute; + left: 50px; + width: 50px; + height: 50px; + top: 39px; + background-size: 100% 100% !important; + background-repeat: no-repeat !important; + background-position: center !important; + background: url(~@/assets/image/subject/棰樻爣.png); +} +.text { + display: inline-block; + margin-left: 90px; +} +.close { + position: absolute; + font-size: 60px; + font-weight: 400; + right: 60px; + top: 20px; +} +.close:hover { + color: red; + transition: color 1s; + cursor: pointer; +} +.next { + width: 89%; + height: 79%; + margin: 100px auto; +} +.next >>> .el-select { + width: 95% !important; +} +.next >>> .el-form-item { + margin-top: 60px; +} +.next >>> .el-input { + width: 84%; +} +.next >>> .el-date-editor { + width: 515px; +} +.next >>> .el-form-item__label { + color: #fff; + font-size: 40px; +} +.next >>> .el-input__inner { + font-size: 30px; +} +.next >>> .el-form-item__error { + font-size: 30px; + font-weight: 700; +} +.botcon { + display: inline-block; + margin-top: 34px; +} +.btns { + margin-top: 100px; + width: 100%; + height: 70px; + display: flex; + justify-content: center; +} +.btns > span { + display: block; + width: 200px; + height: 70px; + border: 1px solid #000; + text-align: center; + font-size: 35px; + margin: 0 50px; + line-height: 70px; + cursor: pointer; +} +.btns > span:nth-child(3) { + color: #fff; + background-image: linear-gradient(#76c2f6, #6a9cf1); +} +.btns > span:nth-child(-n + 2) { + color: #000; + background: #cadaea; +} +.showpic { + width: 260px; + height: 400px; + background: url(~@/assets/image/botbtn/bac.png); + background-position: center; + background-size: 100% 100%; + position: absolute; + top: 1200px; + right: 0px; +} +</style> diff --git a/src/components/viewer.vue b/src/components/viewer.vue index aa8ce6c..ea09e92 100644 --- a/src/components/viewer.vue +++ b/src/components/viewer.vue @@ -18,21 +18,21 @@ light, } from "@/utils/work"; import bus from "@/utils/bus"; -import { getVectorList, getRadio } from "@/api/http"; +import { getVectorList,getRadio } from "@/api/http"; export default { name: "App", - data() { + data () { return {}; }, methods: { - init() { - const that = this; - window.currentsubindex = 1; - let _core = new SmartEarth.Core(); - window.tedp = new this.$trame({ + init () { + const that=this; + window.currentsubindex=1; + let _core=new SmartEarth.Core(); + window.tedp=new this.$trame({ elem: "app1", width: 4992, - prop: [0, 0], + prop: [0,0], height: 2560, navtop: 300, gisType: "hf", @@ -56,13 +56,13 @@ }, gisInit: (webgis) => { //杩斿洖鍦板浘瀵硅薄 - window.Sgworld = webgis; - window.sgworld = webgis; - window.Viewer = webgis.Viewer; - window.viewer = webgis.Viewer; - window.Cesium = Cesium; + window.Sgworld=webgis; + window.sgworld=webgis; + window.Viewer=webgis.Viewer; + window.viewer=webgis.Viewer; + window.Cesium=Cesium; - window.layers = window.sgworld.Viewer.scene.imageryLayers; + window.layers=window.sgworld.Viewer.scene.imageryLayers; // const blackMarble = layers.addImageryProvider( // new Cesium.IonImageryProvider({ assetId: 3812 }) // ); @@ -70,9 +70,9 @@ // blackMarble.alpha = 0.0; // blackMarble.brightness = 2.0; // 鍦扮悆棰滆壊 - Viewer.scene.globe.baseColor = + Viewer.scene.globe.baseColor= Cesium.Color.fromCssColorString("#272d39"); - // //椋炲悜骞垮窞 + // //椋炲悜骞垮窞 // window.Viewer.camera.flyTo({ // destination: Cesium.Cartesian3.fromDegrees( // 113.29503528791071, @@ -97,44 +97,44 @@ roll: 0, }, }); - let urldian1 = + let urldian1= "http://183.162.245.49:8099/geoserver/SHwuxiandian/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=SHwuxiandian:1GZ_POI&maxFeatures=50&outputFormat=application%2Fjson"; - let urldian = + let urldian= "http://183.162.245.49:8099/geoserver/SHP/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=SHP:SH_POI1&maxFeatures=50&outputFormat=application%2Fjson"; try { - loaddian(urldian1, "[TE_DESC]", "[height]"); - loaddian(urldian, "[name]", "[Height]"); + loaddian(urldian1,"[TE_DESC]","[height]"); + loaddian(urldian,"[name]","[Height]"); loadBaimo(1); loadLW(); addRightMouseEvent(); SPPM(); loadYH(); - juhe(true, "鐩戞祴绔�"); + juhe(true,"鐩戞祴绔�"); addMpt(true); - } catch (error) {} + } catch(error) { } //寮�鍚棩鐓� - viewer.scene.globe.enableLighting = false; - viewer.shadows = false; + viewer.scene.globe.enableLighting=false; + viewer.shadows=false; addMouseEvent(); light(); getVectorList().then((res) => { - if (res.message === "Success") { - let region = res.rows; + if(res.message==="Success") { + let region=res.rows; region.forEach((item) => { - let arr = []; + let arr=[]; JSON.parse(item.vlatlngs).forEach((item2) => { - arr.push([item2[1], item2[0]]); + arr.push([item2[1],item2[0]]); }); - item.vlatlngs = JSON.stringify(arr); + item.vlatlngs=JSON.stringify(arr); }); - bus.$emit("areaData", region); + bus.$emit("areaData",region); } }); //鑾峰彇鏃犵嚎鐢垫暟鎹� getRadio().then((res) => { - if (res.message === "Success") { - let radio = res.rows; - bus.$emit("radioData", radio); + if(res.message==="Success") { + let radio=res.rows; + bus.$emit("radioData",radio); console.log(radio); } }); @@ -147,30 +147,30 @@ // window.Viewer.scene.primitives.add(baimo); //鍘垮煙杈圭晫,缃戞牸 }, - subClick(index) { + subClick (index) { let showindex; - switch (index) { + switch(index) { case 0: - showindex = 1; + showindex=1; break; case 1: - showindex = 2; + showindex=2; break; case 2: - showindex = 3; + showindex=3; break; case 3: - showindex = 4; + showindex=4; break; case 4: - showindex = 5; + showindex=5; break; default: break; } - bus.$emit("showindex", showindex); + bus.$emit("showindex",showindex); }, - prop: [970, 970], + prop: [970,970], nav: { navTop: () => import("@/components/top/navTop"), }, @@ -238,11 +238,17 @@ DynamicMap: () => import("@/components/props/bottom"), //鎬佸娍鍥惧姩鎬佹挱鏀� freeAnalyse: () => import("@/components/props/freeAnalyse"), //绌洪棽璧勬簮灞曠ず moreTZ: () => import("@/components/props/moreTZ"), //绌洪棽璧勬簮灞曠ず + // SurprisePlus + showMilitaryPlot: () => import("@/components/props/militaryPlot"),//鍐涗簨鏍囩粯 + situationComparison: () => import("@/components/props/situationComparison"),//鎬佸娍瀵规瘮 + occupancyAnalysis: () => import("@/components/props/occupancyAnalysis"), //棰戣氨鍗犵敤搴﹀垎鏋� + + densityAnalysis: () => import("@/components/props/densityAnalysis"), //鐢ㄩ瀵嗗害鍒嗘瀽 }, }); }, }, - mounted() { + mounted () { this.init(); }, }; diff --git a/src/components/wggl/left/czll.vue b/src/components/wggl/left/czll.vue index 000a9c6..ac5f6f6 100644 --- a/src/components/wggl/left/czll.vue +++ b/src/components/wggl/left/czll.vue @@ -120,18 +120,35 @@ this.nowchoose=2; bus.$emit("showdio",this.nowchoose); break; + case "1-2"://null + this.nowchoose=7; + bus.$emit("showdio",this.nowchoose); + break; case "1-1": this.nowchoose=1; + bus.$emit("showdio",this.nowchoose); + break; + case "2-6"://null + this.nowchoose=8; bus.$emit("showdio",this.nowchoose); break; case "2-5": this.nowchoose=3; bus.$emit("showdio",this.nowchoose); break; + case "2-4"://null + this.nowchoose=9; + bus.$emit("showdio",this.nowchoose); + break; + case "2-3"://null + this.nowchoose=10; + bus.$emit("showdio",this.nowchoose); + break; case "2-2": this.nowchoose='1-4'; bus.$emit("showdio",this.nowchoose); break; + case "3-4": this.nowchoose=5; bus.$emit("showdio",this.nowchoose); diff --git a/src/components/wggl/right/fwxq.vue b/src/components/wggl/right/fwxq.vue index 6a39e8a..eea71ea 100644 --- a/src/components/wggl/right/fwxq.vue +++ b/src/components/wggl/right/fwxq.vue @@ -170,6 +170,13 @@ remove (index) { if(index==0) { + var tlobj={ + value: false, + value1: true, + value2: false, + show: true, + }; + bus.$emit("ishowMilitaryPlot",tlobj); // bus.$emit("clearEve",true); // window.FieldIntensity&&window.FieldIntensity.deleteObject(); // window.imageidXT&&window.Viewer.entities.removeById(window.imageidXT); -- Gitblit v1.9.3