From f30dbe373cc0d4296a71b545811f0a0ad92e4cec Mon Sep 17 00:00:00 2001 From: Surpriseplus <845948745@qq.com> Date: 星期四, 29 六月 2023 17:54:47 +0800 Subject: [PATCH] 添加地表形变时序图 --- src/components/mapsdk.vue | 212 +++++++++++++++++++++++++++++++++++++++++++++++++---- 1 files changed, 196 insertions(+), 16 deletions(-) diff --git a/src/components/mapsdk.vue b/src/components/mapsdk.vue index 7116c36..a2f495b 100644 --- a/src/components/mapsdk.vue +++ b/src/components/mapsdk.vue @@ -480,6 +480,13 @@ <span>灞炴�т俊鎭�</span> <div style="float: right; cursor: pointer"> <el-link + v-if="$store.state.surfaceDeForm.flag && this.$store.state.surfaceDeForm.gid" + type="primary" + :underline="false" + @click="setSurfaceDeForm" + style="margin-right: 10px" + >鍦拌〃褰㈠彉鏃跺簭鍥�</el-link> + <el-link v-if="$store.state.propertiesName.enName == 's_surveyworksite'" type="primary" :underline="false" @@ -605,7 +612,33 @@ <span>涓婁笅鎴潰</span> </div> </div> + <!-- 鍦拌〃褰㈠彉鏃跺簭鍥� --> + <div + class="surfaceDeFormPop" + style=" width: 800px; + height: 800px;" + v-show="surfaceDeFormFlag" + v-drag + > + <el-card class="box-card"> + <div slot="header"> + <span>鍦拌〃褰㈠彉鏃跺簭鍥�</span> + <div style="float: right; cursor: pointer"> + <i + class="el-icon-close" + @click="closeBufferBox(7)" + ></i> + </div> + </div> + <div + id="surfaceDeFormEchart" + class="pointInfoBoxContext" + style="height:500px;width:750px;" + > + </div> + </el-card> + </div> <!--闄勪欢鍒楄〃寮圭獥--> <el-dialog title="闄勪欢鍒楄〃" @@ -689,16 +722,7 @@ </div> </el-dialog> - <!-- <div--> - <!-- @click="changeMenulayer"--> - <!-- class="center CenDiv"--> - <!-- :class="{ center1: centerFlag }"--> - <!-- >--> - <!-- <div--> - <!-- id="cenBg"--> - <!-- v-bind:class="{ active: isActive, menuLayer: isMenuLayer }"--> - <!-- ></div>--> - <!-- </div>--> + <el-dialog title="鐡︾墖涓嬭浇" :append-to-body="false" @@ -765,7 +789,8 @@ </el-form> </el-dialog> </div> - <model-property ref='modelProperty'></model-property> + + <surface-chart ref="surfaceChart" /> <iframe id="downFrame" src="" @@ -778,23 +803,26 @@ import $ from "jquery"; import mapMenuTop from "./MapView/mapMenuTop.vue"; import mapSpaceTop from "./MapView/mapSpaceTop.vue"; -import ModelProperty from '../views/Tools/ModelProperty.vue' +import ModelProperty from '../views/Tools/ModelProperty.vue'; + import { select_Comprehensive_ByPageAndCount, select_Comprehensive_SelectWktById, comprehensive_selectRoute, dataLib_selectFiles, dataQuery_selectFields, dataQuery_selectDomains, dataQuery_selectByPage, sign_getPublicKey, inquiry_downloadTiles, - comprehensive_selectPubById, comprehensive_selectModelByGuid + comprehensive_selectPubById, comprehensive_selectModelByGuid, dataQuery_selectByGid, + dataLib_selectByPage } from '../api/api' import { getToken } from '@/utils/auth' - +import * as echarts from "echarts" export default { name: "", components: { mapMenuTop, mapSpaceTop, - ModelProperty + ModelProperty, + }, data() { @@ -906,7 +934,9 @@ title: '' }, loadingText: '', - loading: false + loading: false, + surfaceDeFormFlag: false, + option: null }; }, mounted() { @@ -942,6 +972,140 @@ window.localStorage.setItem('slider_z', this.valueZ); }, methods: { + async setSurfaceDeForm() { + var gid = this.$store.state.surfaceDeForm.gid; + const data = await dataQuery_selectByGid({ gid: gid, name: 'msurfacedeformationdata' }); + if (data.code != 200) { + return this.$message.error("鏍规嵁GID鏌ヨ鏁版嵁澶辫触"); + } + + + this.getSurfaceDeFormData(data.result) + + }, + async getSurfaceDeFormData(result) { + var data = await dataLib_selectByPage({ + filter: "defpointno = '" + result.defpointno + "'", + name: 'msurfacedeformationdata', + pageIndex: 1, + pageSize: 100000, + }); + + const data1 = await dataLib_selectByPage({ + filter: "defpointno = '" + result.defpointno + "'", + name: 'msurfacedeformationdatadate', + pageIndex: 1, + pageSize: 100000, + }); + + if (data1.code != 200 || data.code != 200) { + return this.$message.error("鍦拌〃褰㈠彉鏁版嵁鏌ヨ澶辫触"); + } + + this.surfaceDeFormFlag = true; + var average = data.result; + var val = data1.result + var xtitle = []; + var val1 = []; + var val2 = []; + for (var i in val) { + val1.push(average[0].seqvar); + xtitle.push(this.formDate(val[i].defdate)) + val2.push(val[i].seqvar) + } + this.showSurfaceDeFormEchart(xtitle, val1, val2); + + }, + formDate(res) { + var time = new Date(res); + var y = time.getFullYear(); + var m = time.getMonth() + 1; + var d = time.getDate(); + + return ( + y + + '-' + + this.add0(m) + + '-' + + this.add0(d) + + ); + }, + //鏍煎紡鍖栨椂闂� + add0(m) { + return m < 10 ? '0' + m : m; + }, + showSurfaceDeFormEchart(res, res1, res2) { + + + var dom = document.getElementById('surfaceDeFormEchart'); + // var myChart = echarts.init(chartDom); + if (this.option != null) { + dom.removeAttribute("_echarts_instance_"); // 绉婚櫎瀹瑰櫒涓婄殑 _echarts_instance + } + + var myChart = echarts.init(dom, null, { + renderer: "canvas", + useDirtyRect: false, + }); + + + this.option = { + + tooltip: { + trigger: 'axis', + formatter: function (params) { + return params[0].axisValue + + '<br/>鏃跺簭褰㈠彉閲忥細' + params[1].data + ' mm' + + '<br/>骞村舰鍙橀�熺巼锛�' + params[0].data + 'm/a' + }, + }, + dataZoom: [{ + type: 'inside', //1骞崇Щ 缂╂斁 + + }], + grid: { + left: '1%', + right: '1%', + bottom: '1%', + containLabel: true + }, + toolbox: { + feature: { + saveAsImage: {} + }, + + }, + + xAxis: { + type: 'category', + boundaryGap: false, + data: res + }, + yAxis: { + type: 'value', + name: "mm", + }, + series: [ + { + name: '骞村舰鍙橀�熺巼', + type: 'line', + stack: 'Total', + data: res1 + }, + { + name: '鏃跺簭鍙樺舰閲�', + type: 'line', + stack: 'Total', + data: res2 + } + ] + }; + + this.option && myChart.setOption(this.option); + window.addEventListener("resize", myChart.resize); + }, + setDownLoadTitle(res) { this.signGetPublicKey() this.downTitleFlag = true; @@ -1360,6 +1524,9 @@ case 6: this.$store.state.propertiesFlag = null; this.showAttribute = false; + break; + case 7: + this.surfaceDeFormFlag = false; break; } }, @@ -1963,6 +2130,18 @@ padding: 10px 20px; } } + .surfaceDeFormPop { + z-index: 40; + position: absolute; + right: 8%; + bottom: 1%; + /deep/ .el-card__header { + padding: 10px 20px; + } + /deep/ .el-card__body { + padding: 10px 20px; + } + } .modelClipPop { width: 350px; z-index: 40; @@ -2175,6 +2354,7 @@ background-repeat: no-repeat; background-size: contain; } + //.changeMapType { // position: absolute; // bottom: 1%; -- Gitblit v1.9.3