From 2cbbc0e4c0357260f370c47365810608c19131c9 Mon Sep 17 00:00:00 2001 From: surprise <15810472099@163.com> Date: 星期一, 01 四月 2024 09:31:56 +0800 Subject: [PATCH] 代码更新 --- src/components/mapsdk.vue | 867 +++++++++++++++++++++++++++++++++------------------------ 1 files changed, 496 insertions(+), 371 deletions(-) diff --git a/src/components/mapsdk.vue b/src/components/mapsdk.vue index 6e53554..88b9ae6 100644 --- a/src/components/mapsdk.vue +++ b/src/components/mapsdk.vue @@ -1,145 +1,107 @@ <template> <div class="mapBox"> <div id="mapdiv"> - <div class="menu_Top box_divm" - v-if="$store.state.mapMenuBoolean"> + <div class="menu_Top box_divm" v-if="$store.state.mapMenuBoolean"> <map-menu-top v-if="$store.state.mapMenuBoxFlag == '1'" /> <map-space-top v-if="$store.state.mapMenuBoxFlag == '2'" /> </div> - <div class="bufferBox" - v-if="showBufferBoxDialog"> + <div class="bufferBox" v-if="showBufferBoxDialog"> <el-card class="box-card box_divm"> - <div slot="header" - class="clearfix"> + <div slot="header" class="clearfix"> <span>缂撳啿鍖哄垎鏋�</span> <div style="float: right; cursor: pointer"> - <i class="el-icon-close" - @click="closeBufferBox(1)"></i> + <i class="el-icon-close" @click="closeBufferBox(1)"></i> </div> </div> <div class="box-body"> - <el-form ref="form" - :model="bufFrom" - label-width="100px"> + <el-form ref="form" :model="bufFrom" label-width="100px"> <el-form-item label="缂撳啿鍗婂緞(绫�):"> <el-input v-model="bufFrom.val"></el-input> </el-form-item> <el-form-item> - <el-button @click="addBuffer(1)" - type="info">鐐�</el-button> - <el-button @click="addBuffer(2)" - type="info">绾�</el-button> - <el-button @click="addBuffer(3)" - type="info">闈�</el-button> - <el-button @click="clearBuffer" - type="info">娓呴櫎</el-button> + <el-button @click="addBuffer(1)" type="info">鐐�</el-button> + <el-button @click="addBuffer(2)" type="info">绾�</el-button> + <el-button @click="addBuffer(3)" type="info">闈�</el-button> + <el-button @click="clearBuffer" type="info">娓呴櫎</el-button> </el-form-item> </el-form> </div> </el-card> </div> <!--鍧愭爣鐐逛綅--> - <div class="coordLocalBox" - v-if="showCoordLocalBoxDialog"> + <div class="coordLocalBox" v-if="showCoordLocalBoxDialog"> <el-card class="box-card"> <div slot="header"> <span>鍧愭爣瀹氫綅</span> <div style="float: right; cursor: pointer"> - <i class="el-icon-close" - @click="closeBufferBox(2)"></i> + <i class="el-icon-close" @click="closeBufferBox(2)"></i> </div> </div> <div class="box-body"> - <el-form ref="form" - :model="coordFrom" - label-width="50px"> + <el-form ref="form" :model="coordFrom" label-width="70px"> <el-form-item label="缁忓害:"> - <el-input v-model="coordFrom.lon" - placeholder="璇疯緭鍏ョ粡搴�"></el-input> + <el-input v-model="coordFrom.lon" placeholder="璇疯緭鍏ョ粡搴�"></el-input> </el-form-item> <el-form-item label="绾害:"> - <el-input v-model="coordFrom.lat" - placeholder="璇疯緭鍏ョ淮搴�"></el-input> + <el-input v-model="coordFrom.lat" placeholder="璇疯緭鍏ョ淮搴�"></el-input> </el-form-item> <el-form-item label="楂樺害:"> - <el-input v-model="coordFrom.height" - placeholder="璇疯緭鍏ラ珮搴�"></el-input> + <el-input v-model="coordFrom.height" placeholder="璇疯緭鍏ラ珮搴�"></el-input> </el-form-item> <el-form-item> - <el-button @click="setCoordLocal" - type="info">瀹氫綅</el-button> + <el-button @click="setCoordLocal" type="info">瀹氫綅</el-button> </el-form-item> </el-form> </div> </el-card> </div> <!--鍦板舰骞虫暣--> - <div class="terrainLevelBox" - v-if="showTerrainLevelDialog"> + <div class="terrainLevelBox" v-if="showTerrainLevelDialog"> <el-card class="box-card"> <div slot="header"> <span>鍦板舰骞虫暣</span> <div style="float: right; cursor: pointer"> - <i class="el-icon-close" - @click="closeBufferBox(5)"></i> + <i class="el-icon-close" @click="closeBufferBox(5)"></i> </div> </div> <div class="box-body"> - <el-form ref="form" - :model="terrainFrom" - label-width="100px"> + <el-form ref="form" :model="terrainFrom" label-width="100px"> <el-form-item label="骞虫暣楂樺害:"> <el-input v-model="terrainFrom.height"></el-input> </el-form-item> <el-form-item> - <el-button @click="drawTerrainLevel" - type="parmary">缁樺埗</el-button> - <el-button @click="clearTerrainLevel" - type="info">娓呴櫎</el-button> + <el-button @click="drawTerrainLevel" type="parmary">缁樺埗</el-button> + <el-button @click="clearTerrainLevel" type="info">娓呴櫎</el-button> </el-form-item> </el-form> </div> </el-card> </div> - <div class="toponymicLocalBox" - v-if="showToponymicLocalBoxDialog"> + <div class="toponymicLocalBox" v-if="showToponymicLocalBoxDialog"> <el-card class="box-card"> - <div slot="header" - class="clearfix"> + <div slot="header" class="clearfix"> <span>鍦板悕瀹氫綅</span> <div style="float: right; cursor: pointer"> - <i class="el-icon-close" - @click="closeBufferBox(3)"></i> + <i class="el-icon-close" @click="closeBufferBox(3)"></i> </div> </div> <div class="box-body"> - <el-form :model="comprehensive" - :inline="true"> + <el-form :model="comprehensive" :inline="true"> <el-form-item label="鍦板悕:"> - <el-input style="width: 160px" - v-model="comprehensive.name" - placeholder="璇疯緭鍏ュ湴鍚�...."></el-input> + <el-input size="small" style="width: 160px" v-model="comprehensive.name" + placeholder="璇疯緭鍏ュ湴鍚�...."></el-input> </el-form-item> <el-form-item> - <el-button @click="setQueryTable" - type="info">鏌ヨ</el-button> + <el-button @click="setQueryTable" type="info" size="small">鏌ヨ</el-button> </el-form-item> </el-form> - <el-table :data="tableData" - height="200px" - border - style="width: 100%"> - <el-table-column align="center" - type="index" - label="搴忓彿" /> - <el-table-column prop="name" - align="center" - label="鍦板悕"> + <el-table :data="tableData" height="200px" border style="width: 100%"> + <el-table-column align="center" type="index" label="搴忓彿" width="70" /> + <el-table-column prop="name" align="center" label="鍦板悕"> <template slot-scope="scope"> - <el-button @click="handleLocation(scope.$index, scope.row)" - size="small">{{scope.row.name}}<i class="el-icon-place" - style="padding-left: 5px"></i></el-button> + <el-button @click="handleLocation(scope.$index, scope.row)" size="small">{{ scope.row.name }}<i + class="el-icon-place" style="padding-left: 5px"></i></el-button> </template> </el-table-column> <!-- <el-table-column--> @@ -163,92 +125,99 @@ <!-- </el-table-column>--> </el-table> <div class="pagination_box"> - <el-pagination @size-change="handleSizeChange" - @current-change="handleCurrentChange" - :current-page="listData.pageIndex" - :page-sizes="[10, 20, 50, 100]" - :pager-count="3" - :page-size="listData.pageSize" - layout="total, prev, pager, next" - :total="count"> + <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" + :current-page="listData.pageIndex" :page-sizes="[10, 20, 50, 100]" :pager-count="3" + :page-size="listData.pageSize" layout="total, prev, pager, next" :total="count"> </el-pagination> </div> </div> </el-card> </div> <!-- 璺緞鍒嗘瀽寮圭獥--> - <div class="pathAnalysisBox" - v-if="showPathAnalysisBoxDialog"> + <div class="pathAnalysisBox" v-if="showPathAnalysisBoxDialog"> <el-card class="box-card"> - <div slot="header" - class="clearfix"> + <div slot="header" class="clearfix"> <span>璺緞鍒嗘瀽</span> <div style="float: right; cursor: pointer"> - <i class="el-icon-close" - @click="closeBufferBox(4)"></i> + <i class="el-icon-close" @click="closeBufferBox(4)"></i> </div> </div> <div class="box-body"> - <el-form ref="form" - :model="pathFrom" - :rules="rules" - label-width="55px"> - <el-form-item label="璧风偣:" - prop="lon"> - <el-input style="width: 250px" - v-model="pathFrom.lon" - placeholder="鍧愭爣鏍煎紡:116.799,39.979"></el-input> - <el-link :underline="false" - @click="showMouseLeftClick(1)" - style="margin-left: 10px"><i class="el-icon-plus"></i></el-link> + <el-form ref="form" :model="pathFrom" :rules="rules" label-width="55px"> + <el-form-item label="璧风偣:" prop="lon"> + <el-input style="width: 250px" v-model="pathFrom.lon" placeholder="鍧愭爣鏍煎紡:116.799,39.979"></el-input> + <el-link :underline="false" @click="showMouseLeftClick(1)" style="margin-left: 10px"><i + class="el-icon-plus"></i></el-link> </el-form-item> - <el-form-item label="缁堢偣:" - prop="lat"> - <el-input style="width: 250px" - v-model="pathFrom.lat" - placeholder="鍧愭爣鏍煎紡:116.824,39.938"></el-input> - <el-link :underline="false" - @click="showMouseLeftClick(2)" - style="margin-left: 10px"><i class="el-icon-plus"></i></el-link> + <el-form-item label="缁堢偣:" prop="lat"> + <el-input style="width: 250px" v-model="pathFrom.lat" placeholder="鍧愭爣鏍煎紡:116.824,39.938"></el-input> + <el-link :underline="false" @click="showMouseLeftClick(2)" style="margin-left: 10px"><i + class="el-icon-plus"></i></el-link> </el-form-item> <el-form-item> - <el-button @click="showMouseLeftClick(3)" - type="info">鏌ヨ</el-button> + <el-button @click="showMouseLeftClick(3)" type="info">鏌ヨ</el-button> </el-form-item> </el-form> </div> </el-card> </div> <!-- <div style="display: flex;">--> - <div class="changeTerrain" - @click="changeTerrainLayer"> - <div title="鍦板舰鍒囨崲" - id="cenBg" - class="mapTerrain"></div> - </div> + <!-- <div + class="changeTerrain" + @click="changeTerrainLayer" + style=" position: absolute; + bottom: 84px; + right: 46px; + height: 30px; + width: 30px; + z-index: 101; + display: flex; + justify-content: center; + align-items: center; + cursor: pointer; + border: 1px solid rgba(255, 255, 255, 0.5);" + > + <div + title="鍦板舰鍒囨崲" + id="cenBg" + class="mapTerrain" + ></div> + </div> --> <!-- class="center CenDiv"--> - <div @click="changeMenulayer" - class="changeLayer"> - <div title="搴曞浘鍒囨崲" - id="cenBg" - class="mapBaseMap"></div> + <div @click="changeMenulayer" class="changeLayer" style=" position: absolute; + bottom: 116px; + right: 46px; + height: 30px; + width: 30px; + z-index: 101; + display: flex; + justify-content: center; + align-items: center; + cursor: pointer; + border: 1px solid rgba(255, 255, 255, 0.5);"> + <div title="搴曞浘鍒囨崲" id="cenBg" class="mapBaseMap"></div> </div> - <div @click="changeMapType" - class="changeMapType"> - <div title="2/3缁村垏鎹�" - id="cenBg" - :class="show2DMap ? 'mapTypeTwo' : 'mapTypeThree'"></div> + <div @click="changeMapType" class="changeMapType" v-if="$store.state.setChangeBaseMap" style=" position: absolute; + bottom: 85px; + right: 46px; + height: 30px; + width: 30px; + z-index: 101; + display: flex; + justify-content: center; + align-items: center; + cursor: pointer; + border: 1px solid rgba(255, 255, 255, 0.5);"> + <div title="2/3缁村垏鎹�" id="cenBg" :class="show2DMap ? 'mapTypeTwo' : 'mapTypeThree'"></div> </div> <!-- </div>--> <!-- 鍧″害鍒嗘瀽寮圭獥--> - <div class="lengend" - v-show="showLengendDialog"> + <div class="lengend" v-show="showLengendDialog"> <el-card class="box-card"> <div class="lengendBox"> <div> - <img class="lengendImg" - src="../assets/img/colors.png" /> + <img class="lengendImg" src="../assets/img/colors.png" /> </div> <div class="lengendSpan"> <div>0掳</div> @@ -260,8 +229,7 @@ </div> </el-card> </div> - <div class="HistLeng" - v-show="$store.state.histLenged"> + <div class="HistLeng" v-show="$store.state.histLenged"> <el-card class="box-card"> <table> <tr> @@ -331,71 +299,53 @@ </el-card> </div> <!--灞炴�т俊鎭脊绐�--> - <div class="propertiesPop" - v-if="$store.state.propertiesFlag == '1'" - v-drag> + <div class="propertiesPop" v-if="$store.state.propertiesFlag == '1'" v-drag> <el-card class="box-card"> <div slot="header"> <span>灞炴�т俊鎭�</span> <div style="float: right; cursor: pointer"> - <el-link v-if="$store.state.propertiesName.enName == 's_surveyworksite'" - type="primary" - :underline="false" - @click="getPointInfo" - style="margin-right: 10px">鍕樺療淇℃伅琛�</el-link> - <el-link type="primary" - :underline="false" - @click="getAttatchList" - style="margin-right: 10px">鏌ョ湅闄勪欢</el-link> - <i class="el-icon-close" - @click="closeBufferBox(6)"></i> + <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" + @click="getPointInfo" style="margin-right: 10px">鍕樺療淇℃伅琛�</el-link> + <el-link type="primary" :underline="false" @click="getAttatchList" + style="margin-right: 10px">鏌ョ湅闄勪欢</el-link> + <i class="el-icon-close" @click="closeBufferBox(6)"></i> </div> </div> - <div class="pointInfoBoxContext" - style="height:250px;overflow-y: auto"> - <div style="line-height: 20px" - v-for="(value, key) in $store.state.propertiesInfo" - :key="key"> - <span v-if="key != 'eventid'" - style="font-size: 14px;font-weight: bold;margin-right: 5px">{{key}}:</span> - <span v-if="key != 'eventid'">{{value}}</span> + <div class="pointInfoBoxContext" style="height:250px;overflow-y: auto"> + <div style="line-height: 20px" v-for="(value, key) in $store.state.propertiesInfo" :key="key"> + <span v-if="key != 'eventid'" style="font-size: 14px;font-weight: bold;margin-right: 5px">{{ key + }}:</span> + <span v-if="key != 'eventid'">{{ value }}</span> </div> </div> </el-card> </div> <!--鍕樺療淇℃伅寮圭獥--> - <div v-drag - class="attributionPop" - v-if="showAttribute"> + <div v-drag class="attributionPop" v-if="showAttribute"> <el-card class="box-card"> <div slot="header"> <span>鍕樺療淇℃伅</span> <div style="float: right; cursor: pointer"> - <i class="el-icon-close" - @click="showAttribute=false"></i> + <i class="el-icon-close" @click="showAttribute = false"></i> </div> </div> - <div class="pointInfoBoxContext" - style="height:250px;overflow-y: auto"> - <div style="line-height: 20px" - v-for="(item, index) in attributeList" - :key="index"> - <span style="font-size: 14px;font-weight: bold;margin-right: 5px">{{item.alias}}:</span> - <span>{{item.value ? item.value :'鏆傛棤鏁版嵁'}}</span> + <div class="pointInfoBoxContext" style="height:250px;overflow-y: auto"> + <div style="line-height: 20px" v-for="(item, index) in attributeList" :key="index"> + <span style="font-size: 14px;font-weight: bold;margin-right: 5px">{{ item.alias }}:</span> + <span>{{ item.value ? item.value : '鏆傛棤鏁版嵁' }}</span> </div> </div> </el-card> </div> - <div class="propertiesPop" - style="right:22%" - v-if="$store.state.propertiesFlag == '2'"> + <div class="propertiesPop" style="right:22%" v-if="$store.state.propertiesFlag == '2'"> <el-card class="box-card"> <div slot="header"> <span>{{ $store.state.propertiesInfo.title }}</span> </div> - <div class="pointInfoBoxContext" - style="height:250px;overflow-y: auto"> + <div class="pointInfoBoxContext" style="height:250px;overflow-y: auto"> <div style="line-height: 20px">宀╁湡鍚嶇О锛� {{ $store.state.propertiesInfo.name }}</div> <div style="line-height: 20px">宀╁湡绫诲瀷锛� {{ $store.state.propertiesInfo.type }}</div> <div style="line-height: 20px">灞傚簳娣卞害锛� {{ $store.state.propertiesInfo.botdepth }} 绫�</div> @@ -405,150 +355,96 @@ </el-card> </div> <!--涓夌淮鎴潰鍒嗘瀽寮圭獥--> - <div class="modelClipPop" - v-if="$store.state.propertiesFlag == '3'"> + <div class="modelClipPop" v-if="$store.state.propertiesFlag == '3'"> <div class="slide-bg"> - <el-slider class="slide" - @change="valveChange()" - :min="-300" - :max="300" - v-model="valueX"></el-slider> + <el-slider class="slide" @change="valveChange()" :min="-300" :max="300" v-model="valueX"></el-slider> <span>宸﹀彸鎴潰</span> - </div> + </div>SpatialQuery <div class="slide-bg"> - <el-slider class="slide" - @change="valveChange()" - :min="-300" - :max="300" - v-model="valueY"></el-slider> + <el-slider class="slide" @change="valveChange()" :min="-300" :max="300" v-model="valueY"></el-slider> <span>鍓嶅悗鎴潰</span> </div> <div class="slide-bg"> - <el-slider class="slide" - @change="valveChange()" - :min="-300" - :max="300" - v-model="valueZ"></el-slider> + <el-slider class="slide" @change="valveChange()" :min="-300" :max="300" v-model="valueZ"></el-slider> <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="闄勪欢鍒楄〃" - :append-to-body="false" - :visible.sync="showAttach" - width="35%" - :close-on-click-modal="false"> + <el-dialog title="闄勪欢鍒楄〃" :append-to-body="false" :visible.sync="showAttach" width="35%" + :close-on-click-modal="false"> <div> - <el-table :data="attachList" - height="100%" - style="width: 100%" - border> - <el-table-column align="center" - type="index" - label="搴忓彿" - width="50" /> - <el-table-column prop="name" - label="鍚嶇О"> + <el-table :data="attachList" height="100%" style="width: 100%" border> + <el-table-column align="center" type="index" label="搴忓彿" width="50" /> + <el-table-column prop="name" label="鍚嶇О"> </el-table-column> - <el-table-column label="鏃堕棿" - width="180"> + <el-table-column label="鏃堕棿" width="180"> <template slot-scope="scope"> - <span>{{format(scope.row.createTime)}}</span> + <span>{{ format(scope.row.createTime) }}</span> </template> </el-table-column> - <el-table-column label="鎿嶄綔" - width="100"> + <el-table-column label="鎿嶄綔" width="100"> <template slot-scope="scope"> - <el-button v-if="showAttachDetailBtn(scope.row)" - @click="showAttachDetail(scope.row)" - type="text" - size="small">鏌ョ湅</el-button> + <el-button v-if="showAttachDetailBtn(scope.row)" @click="showAttachDetail(scope.row)" type="text" + size="small">鏌ョ湅</el-button> </template> </el-table-column> </el-table> </div> </el-dialog> <!--闄勪欢寮圭獥--> - <el-dialog title="棰勮" - :append-to-body="false" - :visible.sync="dialog.dialogVisible" - width="70%" - :close-on-click-modal="false"> - <div v-if="dialog.isPdf" - class="pdfClass"> - <iframe :src="dialog.src" - type="application/x-google-chrome-pdf" - width="100%" - height="100%"> + <el-dialog title="棰勮" :append-to-body="false" :visible.sync="dialog.dialogVisible" width="70%" + :close-on-click-modal="false"> + <div v-if="dialog.isPdf" class="pdfClass"> + <iframe :src="dialog.src" type="application/x-google-chrome-pdf" width="100%" height="100%"> </iframe> </div> - <div v-if="dialog.isJpg" - class="pdfClass"> - <el-image style="width:100%; height:100%" - :src="dialog.src" - :preview-src-list="[dialog.src]"> + <div v-if="dialog.isJpg" class="pdfClass"> + <el-image style="width:100%; height:100%" :src="dialog.src" :preview-src-list="[dialog.src]"> </el-image> </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" - :visible.sync="downTitleFlag" - :close-on-click-modal="false" - :show-close="false" - width="30%"> - <el-form :model="ruleForm" - status-icon - :rules="rules" - ref="ruleForm" - label-width="100px" - class="demo-ruleForm"> - <el-form-item label="鍚嶇О" - prop="title"> - <el-input v-model="ruleForm.title" - size="small" - placeholder="璇疯緭鍏ユ暟鎹悕绉�..."></el-input> + + <el-dialog title="鐡︾墖涓嬭浇" :append-to-body="false" :visible.sync="downTitleFlag" :close-on-click-modal="false" + :show-close="false" width="30%"> + <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm"> + <el-form-item label="鍚嶇О" prop="title"> + <el-input v-model="ruleForm.title" size="small" placeholder="璇疯緭鍏ユ暟鎹悕绉�..."></el-input> </el-form-item> - <el-form-item label="瀵嗙爜" - prop="pass"> - <el-input show-password - type="password" - v-model="ruleForm.pass" - autocomplete="off" - size="small" - placeholder="璇疯緭鍏ュ瘑鐮�..."></el-input> + <el-form-item label="瀵嗙爜" prop="pass"> + <el-input show-password type="password" v-model="ruleForm.pass" autocomplete="off" size="small" + placeholder="璇疯緭鍏ュ瘑鐮�..."></el-input> </el-form-item> - <el-form-item label="纭瀵嗙爜" - prop="checkPass"> - <el-input show-password - type="password" - v-model="ruleForm.checkPass" - autocomplete="off" - size="small" - placeholder="纭瀵嗙爜..."></el-input> + <el-form-item label="纭瀵嗙爜" prop="checkPass"> + <el-input show-password type="password" v-model="ruleForm.checkPass" autocomplete="off" size="small" + placeholder="纭瀵嗙爜..."></el-input> </el-form-item> <el-form-item> - <el-button type="primary" - size="small" - @click='submitTitleDown("ruleForm")'>鎻愪氦</el-button> - <el-button size="small" - @click='cannelTitleDown("ruleForm")'>鍙栨秷</el-button> + <el-button type="primary" size="small" @click='submitTitleDown("ruleForm")'>鎻愪氦</el-button> + <el-button size="small" @click='cannelTitleDown("ruleForm")'>鍙栨秷</el-button> </el-form-item> </el-form> </el-dialog> </div> - <model-property ref='modelProperty'></model-property> + + <surface-chart ref="surfaceChart" /> + <iframe id="downFrame" src="" style="display: none; border: 0; padding: 0; height: 0; width: 0"></iframe> + <model-property ref="modelProperty"></model-property> </div> </template> @@ -556,26 +452,30 @@ 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" +import axios from 'axios'; export default { name: "", components: { mapMenuTop, mapSpaceTop, - ModelProperty + ModelProperty, + }, - data () { + data() { var validatePosition = (rule, value, callback) => { if (value === "") { callback(new Error("璇疯緭鍏ュ瘑鐮�")); @@ -684,10 +584,12 @@ title: '' }, loadingText: '', - loading: false + loading: false, + surfaceDeFormFlag: false, + option: null }; }, - mounted () { + mounted() { this.init3DMap(); this.$bus.$on("mapChangeBox", (res) => { this.showChangeBox(res); @@ -714,25 +616,190 @@ this.$bus.$on("titleDown", res => { this.setDownLoadTitle(res); }); - + this.$bus.$on('annexDownload', res => { + this.setAnnexDownload(res); + }) window.localStorage.setItem('slider_x', this.valueX); window.localStorage.setItem('slider_y', this.valueY); window.localStorage.setItem('slider_z', this.valueZ); }, methods: { - setDownLoadTitle (res) { + 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) + } + debugger + 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.reverse() + }, + yAxis: { + type: 'value', + name: "mm", + }, + series: [ + { + name: '骞村舰鍙橀�熺巼', + type: 'line', + stack: 'Total', + data: res1 + }, + { + name: '鏃跺簭鍙樺舰閲�', + type: 'line', + stack: 'Total', + data: res2.reverse() + } + ] + }; + + this.option && myChart.setOption(this.option); + window.addEventListener("resize", myChart.resize); + }, + async setAnnexDownload(rs) { + + var type, eventid; + if (rs.serveType == 'TMS') { + type = 'DOM'; + eventid = 'dom_' + rs.id; + } else if (rs.serveType == 'DEM') { + type = 'DEM'; + eventid = 'dem_' + rs.id + } + + var obj = { + eventid: eventid, + tabName: type, + }; + const res = await dataLib_selectFiles(obj); + + if (res.code != 200) { + this.$message.error('闄勪欢鏌ヨ澶辫触'); + return + } + if (res.result.length <= 0) { + this.$message('鏆傛棤闄勪欢'); + return + } + + this.attachList = res.result; + this.showAttach = true; + }, + setDownLoadTitle(res) { this.signGetPublicKey() this.downTitleFlag = true; this.downTitleData = res; }, - async signGetPublicKey () { + async signGetPublicKey() { const res = await sign_getPublicKey() if (res && res.code == 200) { window.encrypt = new JSEncrypt(); encrypt.setPublicKey(res.result); } }, - submitTitleDown (formName) { + submitTitleDown(formName) { this.$refs[formName].validate((valid) => { if (valid) { this.downTitleData.title = this.ruleForm.title @@ -746,7 +813,7 @@ } }); }, - async getDownLoadTile (res) { + async getDownLoadTile(res) { this.loading = true; this.loadingText = "鏁版嵁涓嬭浇涓�,璇风◢绛�..." $.ajax({ @@ -766,7 +833,7 @@ } }); }, - cannelTitleDown (formName) { + cannelTitleDown(formName) { this.downTitleFlag = false; // this.$refs[formName].resetFields(); this.ruleForm = { @@ -775,7 +842,7 @@ title: '' } }, - catchmodel () { + catchmodel() { var that = this; window.pickedFeature; window.pickedColor; @@ -798,13 +865,15 @@ } }, Cesium.ScreenSpaceEventType.LEFT_CLICK) }, - async setModelInfoData (result) { + async setModelInfoData(result) { var modelKey = 'id'; var modelid; if (result.tileset) { + if (result.tileset.pubid && parseInt(result.tileset.pubid) > 0) { const data = await comprehensive_selectPubById({ id: result.tileset.pubid }) + if (data.code != 200) { return } else { @@ -853,7 +922,7 @@ }; that.$refs && that.$refs.modelProperty && that.$refs.modelProperty.open(); }, - drawTerrainLevel () { + drawTerrainLevel() { this.clearTerrainLevel() var deep = parseFloat(this.terrainFrom.height) sgworld.Creator.createSimpleGraphic( @@ -870,22 +939,51 @@ } ); }, - clearTerrainLevel () { + clearTerrainLevel() { if (window.TerrainFlattening) { window.TerrainFlattening && window.TerrainFlattening.remove(); } }, - init3DMap () { + addGaoDeMap() { + Viewer.imageryLayers.removeAll(); + var base_ulr = window.sceneConfig.baseUrl; + if (base_ulr.indexOf('{host}') > -1) { + base_ulr = base_ulr.replace("{host}", iisHost) + } + Viewer.imageryLayers.addImageryProvider( + new Cesium.UrlTemplateImageryProvider({ + url: base_ulr, + maximumLevel: 5 + }) + ); + + }, + init3DMap() { var webKey = "94a34772eb88317fcbf8428e10448561"; //鍦板浘鍒濆鍖� window.sgworld = new SmartEarth.SGWorld("mapdiv", { licenseServer: window.sceneConfig.licenseServer, }); - window.Viewer = window.sgworld._Viewer; + window.Viewer = window.sgworld._Viewer; if (is_production) { - Viewer.imageryLayers.removeAll(); + this.addGaoDeMap(); + } else { + var url = "https://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/?callback=loadJsonp940826&f=json" + $.ajax({ + url: url, + timeout: 1500, // 璇锋眰瓒呮椂鏃堕棿 + async: true, + type: "GET", + success: (res) => { + console.log("鍦ㄧ嚎鍦板潃鑾峰彇鎴愬姛") + }, + error: (res) => { + console.log("鍦ㄧ嚎鍦板潃鑾疯幏鍙栧け璐�") + this.addGaoDeMap(); + } + }) } //瀹氫綅 // sgworld.Navigate.jumpTo({ @@ -917,11 +1015,12 @@ // sgworld.Analysis.depthTestAgainstTerrain(true) Viewer.scene.globe.depthTestAgainstTerrain = true; if (is_production) { + var base_ulr = window.sceneConfig.baseUrl; if (base_ulr.indexOf('{host}') > -1) { base_ulr = base_ulr.replace("{host}", iisHost) } - Viewer.imageryLayers.addImageryProvider( + window.TileMapLayer = Viewer.imageryLayers.addImageryProvider( new Cesium.UrlTemplateImageryProvider({ url: base_ulr, maximumLevel: 9 @@ -940,12 +1039,18 @@ requestVertexNormals: true, }; window.terrainLayer = sgworld.Creator.sfsterrainprovider("", option, "", true, ""); + + // window.terrainLayer = new Cesium.CesiumTerrainProvider({ + // // url: LFData + '/3d/terrain/dem20230321' + // url: demLayer + // }); + // Viewer.terrainProvider = window.terrainLayer window.terrainFlag = 'MPT' window.elevationTool = new SmartEarth.ElevationTool(window.sgworld); elevationTool.setContourColor("#F1D487"); }, //dem鍒囨崲 - changeTerrainLayer () { + changeTerrainLayer() { if (this.terrainflag) { Viewer.terrainProvider = new Cesium.EllipsoidTerrainProvider(); var option = { @@ -978,14 +1083,14 @@ } this.terrainflag = !this.terrainflag }, - changeMenulayer () { - this.$bus.$emit("setChangeBaseMapLayer", true) + changeMenulayer() { + this.$bus.$emit("setChangeBaseMapLayer", { type: 'Cesium', boolen: true }) // this.$refs && this.$refs.addOnlineMap && this.$refs.addOnlineMap.open("鍦颁笅妯″紡", null,); // this.isActive = !this.isActive; // this.isMenuLayer = !this.isMenuLayer; // this.setLayerVisible(); }, - setLayerVisible () { + setLayerVisible() { if (this.isActive == true) { Viewer.imageryLayers._layers[1].show = true Viewer.imageryLayers._layers[2].show = false @@ -1003,7 +1108,7 @@ } }, //鏄剧ず寮圭獥 - showChangeBox (res) { + showChangeBox(res) { if (res.name == "Query") { if (res.id == "6") { } else if (res.id == "7") { @@ -1047,20 +1152,20 @@ } } }, - handleSizeChange (val) { + handleSizeChange(val) { this.listData.pageSize = val; this.getToponymicData(); }, - handleCurrentChange (val) { + handleCurrentChange(val) { this.listData.pageIndex = val; this.getToponymicData(); }, - setQueryTable () { + setQueryTable() { this.listData.pageSize = 10; this.listData.pageIndex = 1; this.getToponymicData(); }, - async getToponymicData () { + async getToponymicData() { if (this.listData.tab == "") { delete this.listData.tab; } @@ -1073,7 +1178,7 @@ this.tableData = data.result; this.count = data.count; }, - async handleLocation (index, row) { + async handleLocation(index, row) { const data = await select_Comprehensive_SelectWktById({ id: row.gid }); if (data.code != 200) { this.$message.error("鍒楄〃璋冪敤澶辫触"); @@ -1110,7 +1215,7 @@ ), }); }, - closeBufferBox (res) { + closeBufferBox(res) { switch (res) { case 1: this.showBufferBoxDialog = false; @@ -1139,10 +1244,13 @@ this.$store.state.propertiesFlag = null; this.showAttribute = false; break; + case 7: + this.surfaceDeFormFlag = false; + break; } }, //瀹氫綅 - setCoordLocal () { + setCoordLocal() { if (!this.coordFrom.lon) { return this.$message('璇疯緭鍏ョ粡搴�'); } @@ -1188,12 +1296,12 @@ // }); }, //缂撳啿鍖哄垎鏋� - clearBuffer () { + clearBuffer() { if (this.buffer == null) return; this.buffer && this.buffer.clearBuff(); this.buffer = null; }, - getBufferTable (type) { + getBufferTable(type) { const points = this.buffer.this_buff.buff.polygon.hierarchy.getValue().positions; let geometrys = ""; @@ -1208,7 +1316,7 @@ if (geometrys.length != 0) geometrys.trimEnd(","); geometrys = "{rings:[[" + geometrys + "]]}"; }, - addBuffer (res) { + addBuffer(res) { this.clearBuffer(); var buffRadius = this.bufFrom.val; switch (res) { @@ -1238,7 +1346,7 @@ break; } }, - async showMouseLeftClick (res) { + async showMouseLeftClick(res) { if (res == 3) { this.$refs.form.validate(async (valid) => { if (valid) { @@ -1387,7 +1495,7 @@ }, Cesium.ScreenSpaceEventType.LEFT_CLICK); } }, - clearPathAll (res) { + clearPathAll(res) { switch (res) { case 1: if (this.pathStart != null) { @@ -1433,11 +1541,11 @@ break; } }, - clearLeftClick () { + clearLeftClick() { this.handler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_CLICK); //绉婚櫎浜嬩欢 this.handler = null; }, - executeFly3D (res) { + executeFly3D(res) { var position = []; if (res) { var positionA = res.features; @@ -1465,7 +1573,7 @@ } }, //浜岀淮/涓夌淮鍦板浘鍒囨崲 - changeMapType () { + changeMapType() { // this.show2DMap = !this.show2DMap; //浜岀淮 @@ -1479,7 +1587,7 @@ this.$bus.$emit("changemapType", this.show2DMap); }, //鑾峰彇闄勪欢鍒楄〃 - async getAttatchList () { + async getAttatchList() { if (this.$store.state.propertiesName == null) { return } @@ -1506,7 +1614,7 @@ this.showAttach = true; }, //鏄惁鏄剧ず鏌ョ湅鎸夐挳 - showAttachDetailBtn (row) { + showAttachDetailBtn(row) { var name = row.name; if ( @@ -1528,14 +1636,14 @@ return false; }, //鏁版嵁鍒濆鍖� - refreshAttatchDetail () { + refreshAttatchDetail() { this.dialog.src = ""; this.dialog.dialogVisible = false; this.dialog.isPdf = false; this.dialog.isJpg = false; }, //鏌ョ湅闄勪欢 - showAttachDetail (row) { + showAttachDetail(row) { this.refreshAttatchDetail(); var name = row.name; if (name.indexOf('.pdf') != -1 || name.indexOf('.PDF') != -1) { @@ -1563,7 +1671,7 @@ } }, //鏍煎紡鍖栨椂闂� - format (shijianchuo) { + format(shijianchuo) { //shijianchuo鏄暣鏁帮紝鍚﹀垯瑕乸arseInt杞崲 var time = new Date(shijianchuo); var y = time.getFullYear(); @@ -1587,11 +1695,11 @@ ); }, //鏍煎紡鍖栨椂闂� - add0 (m) { + add0(m) { return m < 10 ? '0' + m : m; }, //鍕樺療淇℃伅琛� - getPointInfo () { + getPointInfo() { if (this.showAttribute) { @@ -1601,7 +1709,7 @@ this.getAttributeDomFiled(name); }, //鑾峰彇姣忎釜琛ㄥ瓧娈靛悕绉板強闃堝�� - async getAttributeDomFiled (res) { + async getAttributeDomFiled(res) { //鏌ヨ瀛楁淇℃伅; const fileds = await dataQuery_selectFields({ name: res, @@ -1636,7 +1744,7 @@ this.getAttributeTableData(std, res, this.$store.state.propertiesInfo.宸ョ偣鍚嶇О, data1) }, //鑾峰彇琛ㄦ牸淇℃伅 - async getAttributeTableData (res, name, title, list) { + async getAttributeTableData(res, name, title, list) { let attributeFild = res; let parmams = { name: name, @@ -1654,7 +1762,7 @@ } if (!data.result.length) { - this.$message.error("鏈煡璇㈠埌鍕樻帰淇℃伅鏁版嵁"); + this.$message("鏈煡璇㈠埌鍕樻帰淇℃伅鏁版嵁"); return } this.showAttribute = !this.showAttribute; @@ -1680,13 +1788,13 @@ this.attributeList = list; } }, - valveChange () { + valveChange() { window.localStorage.setItem('slider_x', this.valueX); window.localStorage.setItem('slider_y', this.valueY); window.localStorage.setItem('slider_z', this.valueZ); } }, - destroyed () { + destroyed() { this.showAttribute = false } }; @@ -1697,11 +1805,13 @@ width: 100%; height: 100%; position: relative; + #mapdiv { width: 100%; height: 100%; overflow: hidden; position: relative; + .toponymicLocalBox { width: 350px; //width: 750px; @@ -1711,6 +1821,7 @@ right: 8%; bottom: 1%; } + .bufferBox { width: 412px; height: 230px; @@ -1719,6 +1830,7 @@ right: 6%; bottom: 1%; } + .coordLocalBox { width: 350px; height: 370px; @@ -1726,7 +1838,12 @@ position: absolute; right: 8%; bottom: 1%; + + span { + width: 100px; + } } + .propertiesPop { width: 350px; height: 370px; @@ -1734,13 +1851,31 @@ position: absolute; right: 8%; bottom: 1%; + /deep/ .el-card__header { padding: 10px 20px; } + /deep/ .el-card__body { 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; @@ -1749,10 +1884,12 @@ top: 3%; background: rgba(255, 255, 255, 0.85); border: 1px solid rgba(32, 160, 255, 0.6); + .slide-bg { padding: 10px; display: flex; align-items: center; + .slide { width: 250px; margin-left: 5px; @@ -1760,6 +1897,7 @@ } } } + .pathAnalysisBox { width: 412px; height: 370px; @@ -1768,6 +1906,7 @@ right: 8%; bottom: 1%; } + .attributionPop { width: 350px; height: 370px; @@ -1775,13 +1914,16 @@ position: absolute; right: 38%; bottom: 1%; + /deep/ .el-card__header { padding: 10px 20px; } + /deep/ .el-card__body { padding: 10px 20px; } } + .terrainLevelBox { width: 350px; height: 370px; @@ -1795,15 +1937,18 @@ opacity: 0.85; border: 1px solid rgba(32, 160, 255, 0.6); } + .menu_Top { width: 100%; padding: 1%; position: absolute; z-index: 40; + /deep/.el-form-item { margin-bottom: 0px; } } + .menu_Popup { background: #303030; opacity: 0.85; @@ -1815,12 +1960,14 @@ position: absolute; z-index: 40; } + .HistLeng { z-index: 40; position: absolute; right: 115px; bottom: 10px; } + .lengend { width: 300px; z-index: 40; @@ -1828,18 +1975,23 @@ right: 1%; bottom: 13%; transform: rotate(90deg); + .lengendBox { .lengendSpan { display: flex; justify-content: space-between; margin-top: 10px; + div { transform: rotate(-90deg); } } + .lengendImg { - -ms-transform: rotate(180deg); /* IE 9 */ - -webkit-transform: rotate(180deg); /* Safari and Chrome */ + -ms-transform: rotate(180deg); + /* IE 9 */ + -webkit-transform: rotate(180deg); + /* Safari and Chrome */ transform: rotate(180deg); width: 100%; height: 30px; @@ -1910,9 +2062,11 @@ border-radius: 5px; cursor: pointer; } + .center1 { right: 1%; } + .right { position: absolute; top: 50px; @@ -1924,6 +2078,7 @@ flex-direction: column; justify-content: space-between; } + // .CenDiv:hover { // border: 1px solid #409eff; // } @@ -1935,6 +2090,7 @@ background-size: 100% 100%; border-radius: 5px; } + .menuLayer { width: 100%; height: 100%; @@ -1953,6 +2109,7 @@ background-repeat: no-repeat; background-size: contain; } + //.changeMapType { // position: absolute; // bottom: 1%; @@ -1969,45 +2126,12 @@ // // cursor: pointer; //} -.changeTerrain { - position: absolute; - bottom: 84px; - right: 46px; - height: 30px; - width: 30px; - z-index: 101; - display: flex; - justify-content: center; - align-items: center; - cursor: pointer; - border: 1px solid rgba(255, 255, 255, 0.5); -} -.changeLayer { - position: absolute; - bottom: 116px; - right: 46px; - height: 30px; - width: 30px; - z-index: 101; - display: flex; - justify-content: center; - align-items: center; - cursor: pointer; - border: 1px solid rgba(255, 255, 255, 0.5); -} -.changeMapType { - position: absolute; - bottom: 52px; - right: 46px; - height: 30px; - width: 30px; - z-index: 101; - display: flex; - justify-content: center; - align-items: center; - cursor: pointer; - border: 1px solid rgba(255, 255, 255, 0.5); -} +.changeTerrain {} + +.changeLayer {} + +.changeMapType {} + //.changeTerrain { // position: absolute; // bottom: 1%; @@ -2033,6 +2157,7 @@ //background-size: contain; } + .mapTerrain { width: 100%; height: 100%; @@ -2043,6 +2168,7 @@ background-repeat: no-repeat; //background-size: contain; } + .mapTypeThree { width: 100%; height: 100%; @@ -2062,5 +2188,4 @@ // background: rgba(255, 255, 255, 0.2) !important; // color: white !important; // border: 1px solid rgba(255, 255, 255, 0.2) !important; -// } -</style> +// }</style> -- Gitblit v1.9.3