From fa7ba545bb58983c8dab5f96cd1f010a48d7420c Mon Sep 17 00:00:00 2001 From: surprise <15810472099@163.com> Date: 星期一, 22 四月 2024 17:39:58 +0800 Subject: [PATCH] 综合展示,附件挂载添加cad查看功能 --- src/components/mapsdk.vue | 2253 ++++++++++++++++++++++++++++++++++++++++------------------ 1 files changed, 1,555 insertions(+), 698 deletions(-) diff --git a/src/components/mapsdk.vue b/src/components/mapsdk.vue index f6c03dd..db1eba0 100644 --- a/src/components/mapsdk.vue +++ b/src/components/mapsdk.vue @@ -1,197 +1,148 @@ <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"></el-input> + <el-input v-model="coordFrom.lon" + placeholder="璇疯緭鍏ョ粡搴�"></el-input> </el-form-item> <el-form-item label="绾害:"> - <el-input v-model="coordFrom.lat"></el-input> + <el-input v-model="coordFrom.lat" + placeholder="璇疯緭鍏ョ淮搴�"></el-input> </el-form-item> <el-form-item label="楂樺害:"> - <el-input v-model="coordFrom.height"></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" - ></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--> @@ -215,124 +166,130 @@ <!-- </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 - @click="changeMenulayer" - class="center CenDiv" - :class="{ center1: centerFlag }" - > - <div - id="cenBg" - v-bind:class="{ active: isActive, menuLayer: isMenuLayer }" - ></div> - </div> - <div - @click="changeMapType" - class="changeMapType" - > - <div - id="cenBg" - :class="show2DMap ? 'mapTypeTwo' : 'mapTypeThree'" - ></div> - </div> - </div> - <div - class="lengend" - v-show="showLengendDialog" + <!-- <div style="display: flex;">--> + <!-- <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" + 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" + 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"> <el-card class="box-card"> - <!-- <div - class="lengend_color" - style="height:205px" - > - - </div> --> <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> @@ -341,124 +298,320 @@ <div>52.5掳</div> <div>70掳</div> </div> + </div> + </el-card> + </div> + <div class="HistLeng" + v-show="$store.state.histLenged"> + <el-card class="box-card"> + <table> + <tr> + <td>绮夎川榛忓湡</td> + <td> + <div style="width:100px;height:20px;background:rgba(139,106,77,1)"> + </div> + </td> + </tr> + <tr> + <td>娣ゆ偿璐ㄧ矇鍦�</td> + <td> + <div style="width:100px;height:20px;background:rgba(141,85,69,1)"> + </div> + </td> + </tr> + <tr> + <td>鍦嗙牼</td> + <td> + <div style="width:100px;height:20px;background:rgba(102,166,184,1)"> + </div> + </td> + </tr> + <tr> + <td>鍗电煶</td> + <td> + <div style="width:100px;height:20px;background:rgba(54,83,173,1)"> + </div> + </td> + </tr> + <tr> + <td>娉ュ博</td> + <td> + <div style="width:100px;height:20px;background:rgba(47,30,13,1)"> + </div> + </td> + </tr> + <tr> + <td>缁嗙爞</td> + <td> + <div style="width:100px;height:20px;background:rgba(93,88,15,1)"> + </div> + </td> + </tr> + <tr> + <td>涓爞</td> + <td> + <div style="width:100px;height:20px;background:rgba(164,140,21,1)"> + </div> + </td> + </tr> + <tr> + <td>娣ゆ偿璐ㄥ湡</td> + <td> + <div style="width:100px;height:20px;background:rgba(75,74,78,1)"> + </div> + </td> + </tr> + <tr> + <td>鍏朵粬</td> + <td> + <div style="width:100px;height:20px;background:rgba(225,225,225,1)"> + </div> + </td> + </tr> + </table> + </el-card> + </div> + <!--灞炴�т俊鎭脊绐�--> + <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.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> + </div> + </el-card> + </div> + <!--鍕樺療淇℃伅寮圭獥--> + <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> + </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> + </div> + </el-card> + </div> + + <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 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> + <div style="line-height: 20px">鎻忚堪锛� {{ $store.state.propertiesInfo.describe }}</div> + </div> + + </el-card> + </div> + <!--涓夌淮鎴潰鍒嗘瀽寮圭獥--> + <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> + <span>宸﹀彸鎴潰</span> + </div>SpatialQuery + <div class="slide-bg"> + <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> + <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> - <div - class="propertiesPop" - v-if="$store.state.propertiesFlag == '1'" - > - <el-card class="box-card"> - <div slot="header"> - <span>{{$store.state.propertiesName.tabDesc || '灞炴�т俊鎭�'}}</span> - <div style="float: right; cursor: pointer"> - <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> - </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" - > - <img - style="width:100%; height:100%;" - :src="dialog.src" - alt="" - /> + <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-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> + <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-form-item> + </el-form> + </el-dialog> </div> + + <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> @@ -466,31 +619,41 @@ import $ from "jquery"; import mapMenuTop from "./MapView/mapMenuTop.vue"; import mapSpaceTop from "./MapView/mapSpaceTop.vue"; +import ModelProperty from '../views/Tools/ModelProperty.vue'; + import { select_Comprehensive_ByPageAndCount, select_Comprehensive_SelectWktById, comprehensive_selectRoute, - dataLib_selectFiles -} from "../api/api"; -import {getToken} from '@/utils/auth' - + dataLib_selectFiles,dataQuery_selectFields,dataQuery_selectDomains, + dataQuery_selectByPage,sign_getPublicKey,inquiry_downloadTiles, + 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'; +import { nearest } from '@turf/turf'; export default { name: "", components: { mapMenuTop, mapSpaceTop, + ModelProperty, + + }, - data() { - var validatePosition = (rule, value, callback) => { - if (value === "") { + data () { + var validatePosition=(rule,value,callback) => { + if(value==="") { callback(new Error("璇疯緭鍏ュ瘑鐮�")); } else { - if (value) { - let arr = value.split(","); - if (arr.length !== 2) { + if(value) { + let arr=value.split(","); + if(arr.length!==2) { callback(new Error("鍧愭爣鐐圭粡绾害鏍煎紡閿欒锛�")); } else { - if (arr[0].startsWith("116") && arr[1].startsWith("39")) { + if(arr[0].startsWith("116")&&arr[1].startsWith("39")) { } else { callback(new Error("鍧愭爣鐐圭含搴︽牸寮忛敊璇紒")); } @@ -513,7 +676,7 @@ }, rules: { lon: [ - { required: true, message: "璇疯緭鍏ヨ捣鐐圭粡绾害鍧愭爣", trigger: "blur" }, + { required: true,message: "璇疯緭鍏ヨ捣鐐圭粡绾害鍧愭爣",trigger: "blur" }, { validator: validatePosition, trigger: "blur", @@ -521,7 +684,7 @@ }, ], lat: [ - { required: true, message: "璇疯緭鍏ョ粓鐐圭粡绾害鍧愭爣", trigger: "blur" }, + { required: true,message: "璇疯緭鍏ョ粓鐐圭粡绾害鍧愭爣",trigger: "blur" }, { validator: validatePosition, trigger: "blur", @@ -533,9 +696,9 @@ val: 50, }, coordFrom: { - lon: 116.3911, - lat: 39.9115, - height: 100000, + lon: "", + lat: "", + height: "", }, listData: { name: null, @@ -567,59 +730,429 @@ height: '10' }, showLengendDialog: false, - showAttach:false, - attachList:[], + showAttach: false, + attachList: [], dialog: { dialogVisible: false, isPdf: false, isJpg: false, src: '' - } + }, + showAttribute: false, + attributeList: [], + valueZ: 0, + valueX: 0, + valueY: 0, + terrainflag: false, + downTitleFlag: false, + downTitleData: null, + ruleForm: { + pass: '', + checkPass: '', + title: '' + }, + loadingText: '', + loading: false, + surfaceDeFormFlag: false, + option: null }; }, - mounted() { + mounted () { this.init3DMap(); - this.$bus.$on("mapChangeBox", (res) => { + this.$bus.$on("mapChangeBox",(res) => { this.showChangeBox(res); }); - this.$bus.$on('changemapType', (e) => { - this.show2DMap = e; + this.$bus.$on('changemapType',(e) => { + this.show2DMap=e; }); + this.$bus.$on('closeMenuPop',(e) => { + //闈炶矾寰勫垎鏋� + if(e!='d3') { + this.showPathAnalysisBoxDialog=false; + } + //闈炲潯搴﹀垎鏋� + if(e!='d2') { + this.showLengendDialog=false; + } + //闈炲湴褰㈠钩鏁� + if(e!='d10') { + this.showTerrainLevelDialog=false; + } + }); + //妯″瀷鎹曟崏 + this.catchmodel(); + 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: { - drawTerrainLevel() { + 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 () { + const res=await sign_getPublicKey() + if(res&&res.code==200) { + window.encrypt=new JSEncrypt(); + encrypt.setPublicKey(res.result); + } + }, + submitTitleDown (formName) { + this.$refs[formName].validate((valid) => { + if(valid) { + this.downTitleData.title=this.ruleForm.title + // this.downTitleData.pwd = encr(this.ruleForm.pass) + this.downTitleData.pwd=encrypt.encrypt(this.ruleForm.pass) + this.getDownLoadTile(this.downTitleData); + this.cannelTitleDown(); + } else { + console.log('error submit!!'); + return false; + } + }); + }, + async getDownLoadTile (res) { + this.loading=true; + this.loadingText="鏁版嵁涓嬭浇涓�,璇风◢绛�..." + $.ajax({ + url: BASE_URL+"/inquiry/downloadTiles?token="+getToken(), + type: "POST", + data: JSON.stringify(res), + dataType: 'json', // html銆乯son銆乯sonp銆乻cript銆乼ext + contentType: "application/json", // "application/x-www-form-urlencoded" + success: (data) => { + var token=getToken() + var url=BASE_URL+"/dataLib/downloadFile?token="+token+"&guid="+data.result+"&pwd="+res.pwd; + $("#downFrame").attr("src",url).click(); + this.loading=false; + this.loadingText="" + }, + error: function(e) { + } + }); + }, + cannelTitleDown (formName) { + this.downTitleFlag=false; + // this.$refs[formName].resetFields(); + this.ruleForm={ + pass: '', + checkPass: '', + title: '' + } + }, + catchmodel () { + var that=this; + window.pickedFeature; + window.pickedColor; + window.modeCatchHandler=new Cesium.ScreenSpaceEventHandler(Viewer.scene.canvas); + window.modeCatchHandler.setInputAction((event) => { + if(window.pickedColor) { window.pickedFeature&&(window.pickedFeature.color=window.pickedColor); } + // window.pickedFeature && (window.pickedFeature.color = window.pickedColor); + window.pickedFeature=sgworld.Viewer.scene.pick(event.position); + if(Cesium.defined(window.pickedFeature)) { + if(window.pickedFeature.primitive instanceof Cesium.Cesium3DTileset) { + if(window.pickedFeature) { + window.pickedColor=window.pickedFeature.color + window.pickedFeature.color=Cesium.Color.RED.withAlpha(0.3); + + // this.$store.state.catModel = true; + + that.setModelInfoData(window.pickedFeature); + } + } + } + },Cesium.ScreenSpaceEventType.LEFT_CLICK) + }, + 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 { + + modelKey=JSON.parse(data.result.json).modelid + } + if(!modelKey) { + return this.$message('娌℃湁妯″瀷涓婚敭ID,鏃犳硶鏌ヨ鏁版嵁'); + } + modelid=pickedFeature.getProperty(modelKey); + + } + } else { + modelid='3dml'+result.primitive.id; + } + var that=this + if(!modelid) { + modelid="noAuto_"+pickedFeature.primitive.layerId; + } + var obj={ + layerid: pickedFeature.primitive.layerId, + modelid: modelid + } + + const data1=await comprehensive_selectModelByGuid(obj); + + if(data1.code!=200) { + return; + } + var name=null; + var bak=null; + var type=null; + if(data1.result) { + name=data1.result.name; + bak=data1.result.bak; + type=data1.result.type; + } + + that.$store.state.catModelInfo={ + id: modelid, + name: name, + type: type, + bak: bak, + layerId: pickedFeature.primitive.layerId, + layerName: pickedFeature.primitive.id + }; + that.$refs&&that.$refs.modelProperty&&that.$refs.modelProperty.open(); + }, + drawTerrainLevel () { this.clearTerrainLevel() - var deep = parseFloat(this.terrainFrom.height) + var deep=parseFloat(this.terrainFrom.height) sgworld.Creator.createSimpleGraphic( 'polygon', { clampToGround: true, }, - function (entity) { + function(entity) { - var positions = entity.polygon.hierarchy.getValue().positions; + var positions=entity.polygon.hierarchy.getValue().positions; sgworld.Creator.SimpleGraphic.remove(entity.id); - window.TerrainFlattening = sgworld.Creator.createTerrainModifier("鍦板舰鍘嬪钩", positions, deep, {}); + window.TerrainFlattening=sgworld.Creator.createTerrainModifier("鍦板舰鍘嬪钩",positions,deep,{}); } ); }, - clearTerrainLevel() { - if (window.TerrainFlattening) { - window.TerrainFlattening && window.TerrainFlattening.remove(); + clearTerrainLevel () { + if(window.TerrainFlattening) { + window.TerrainFlattening&&window.TerrainFlattening.remove(); } }, - init3DMap() { - var webKey = "94a34772eb88317fcbf8428e10448561"; + 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", { - url: SmartEarthRootUrl + "Workers/image/earth.jpg", + window.sgworld=new SmartEarth.SGWorld("mapdiv",{ + licenseServer: window.sceneConfig.licenseServer, }); - window.Viewer = window.sgworld._Viewer; - Viewer.imageryLayers._layers[0].show = false; + window.Viewer=window.sgworld._Viewer; + if(is_production) { + 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({ // //璺宠浆瑙嗚 @@ -630,200 +1163,209 @@ // ), // }) Viewer.camera.flyTo({ - destination: Cesium.Cartesian3.fromDegrees(110, 33, 8000000), + destination: Cesium.Cartesian3.fromDegrees(110,33,8000000), }); - this.layer1 = Viewer.imageryLayers.addImageryProvider( - new Cesium.UrlTemplateImageryProvider({ - url: gaoDeBaseUrl[0].url, - }) - ); - this.layer2 = Viewer.imageryLayers.addImageryProvider( - new Cesium.UrlTemplateImageryProvider({ - url: gaoDeBaseUrl[1].url, - }) - ); - this.layer3 = Viewer.imageryLayers.addImageryProvider( - new Cesium.UrlTemplateImageryProvider({ - url: gaoDeBaseUrl[2].url, - }) - ); + // window.BaseMapLayer = Viewer.imageryLayers.addImageryProvider( + // new Cesium.UrlTemplateImageryProvider({ + // url: gaoDeBaseUrl[1].url, + // }) + // ); - window.ImageLayer3 = this.layer3; - - // for (var i in gaoDeBaseUrl) { - // sgworld.Creator.createUrlTemplateImageryProvider( - // gaoDeBaseUrl[i].label, - // gaoDeBaseUrl[i].url, - // '0', - // undefined, - // true, - // '' - // ); - // } - - Viewer._enableInfoOrSelection = false; + Viewer._enableInfoOrSelection=false; //鏄剧ずfps - Viewer.scene.debugShowFramesPerSecond = false; + Viewer.scene.debugShowFramesPerSecond=false; //瀵艰埅鎺т欢 - window.sgworld.navControl("nav", false); + // window.sgworld.navControl("nav", false); //姣斾緥灏� - window.sgworld.navControl("scale", false); + // window.sgworld.navControl("scale", false); //寮�鍚繁搴︽娴� // sgworld.Analysis.depthTestAgainstTerrain(true) - Viewer.scene.globe.depthTestAgainstTerrain = true; - //褰卞儚瀵规瘮璁剧疆 - // var base = { - // url: 'https://a.tile.openstreetmap.org/', - // }; - // window.openStreetMap = sgworld.Creator.createImageryProvider( - // 'OpenStreetMap', - // 'OpenStreetMap', - // base, - // '0', - // undefined, - // true, - // '' - // ); - // openStreetMap.item.show = false; + Viewer.scene.globe.depthTestAgainstTerrain=true; + if(is_production) { - // Viewer.terrainProvider = new Cesium.CesiumTerrainProvider({ - // url: demLayer, - // }) - var option = { + var base_ulr=window.sceneConfig.baseUrl; + if(base_ulr.indexOf('{host}')>-1) { + base_ulr=base_ulr.replace("{host}",iisHost) + } + window.TileMapLayer=Viewer.imageryLayers.addImageryProvider( + new Cesium.UrlTemplateImageryProvider({ + url: base_ulr, + maximumLevel: 9 + }) + ); + window.BaseMapLayer=Viewer.imageryLayers.addImageryProvider( + new Cesium.UrlTemplateImageryProvider({ + url: base_ulr, + }) + ); + } + + var option={ url: window.sceneConfig.SGUrl, layerName: window.sceneConfig.mptName, requestVertexNormals: true, }; - sgworld.Creator.sfsterrainprovider("", option, "", true, ""); + window.terrainLayer=sgworld.Creator.sfsterrainprovider("",option,"",true,""); - window.elevationTool = new SmartEarth.ElevationTool(window.sgworld); - elevationTool.setContourColor("#F1D487"); - - // var helper = new Cesium.EventHelper(); - // helper.add(Viewer.scene.globe.tileLoadProgressEvent, function (e) { - - // if (e == 0) { - // console.log("杩欎釜鏄姞杞芥渶鍚庝竴涓煝閲忓垏鐗囩殑鍥炶皟"); - // } - // helper.removeAll(); - // helper = undefined; + // 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 () { + if(this.terrainflag) { + Viewer.terrainProvider=new Cesium.EllipsoidTerrainProvider(); + var option={ + url: window.sceneConfig.SGUrl, + layerName: window.sceneConfig.mptName, + requestVertexNormals: true, + }; + window.terrainLayer=sgworld.Creator.sfsterrainprovider("",option,"",true,""); + Viewer.camera.flyTo({ + destination: Cesium.Cartesian3.fromDegrees(110,33,8000000), + }); - changeMenulayer() { - this.isActive = !this.isActive; - this.isMenuLayer = !this.isMenuLayer; - this.setLayerVisible(); + } else { + window.terrainLayer.deleteObject(); + window.terrainLayer=null; + + window.terrainLayer=new Cesium.CesiumTerrainProvider({ + // url: LFData + '/3d/terrain/dem20230321' + url: demLayer + }); + Viewer.terrainProvider=window.terrainLayer + Viewer.camera.flyTo({ + destination: Cesium.Cartesian3.fromDegrees(113.229279,31.215949,1000), + orientation: { + heading: 6.08434611923462, + pitch: Cesium.Math.toRadians(-45.0), + roll: 0.0 + } + }); + } + this.terrainflag=!this.terrainflag }, - setLayerVisible() { - if (this.isActive == true) { - // Viewer.imageryLayers._layers[1].show = true - // Viewer.imageryLayers._layers[2].show = false + 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 () { + if(this.isActive==true) { + Viewer.imageryLayers._layers[1].show=true + Viewer.imageryLayers._layers[2].show=false // Viewer.imageryLayers._layers[3].show = false - Viewer.imageryLayers.lower(this.layer2); - Viewer.imageryLayers.lower(this.layer3); + // Viewer.imageryLayers.lower(this.layer2); + // Viewer.imageryLayers.lower(this.layer3); } else { - Viewer.imageryLayers.raise(this.layer3); - Viewer.imageryLayers.raise(this.layer2); + // Viewer.imageryLayers.raise(this.layer3); + // Viewer.imageryLayers.raise(this.layer2); - // Viewer.imageryLayers._layers[1].show = false - // Viewer.imageryLayers._layers[2].show = true + Viewer.imageryLayers._layers[1].show=false + Viewer.imageryLayers._layers[2].show=true // Viewer.imageryLayers._layers[3].show = true } }, //鏄剧ず寮圭獥 - showChangeBox(res) { - if (res.name == "Query") { - if (res.id == "6") { - } else if (res.id == "7") { + showChangeBox (res) { + if(res.name=="Query") { + if(res.id=="6") { + } else if(res.id=="7") { } else { - this.showBufferBoxDialog = true; + this.showBufferBoxDialog=true; } - } else if (res.name == "Coord") { - if (res.id == "1") { - this.showCoordLocalBoxDialog = true; - this.showToponymicLocalBoxDialog = false; - } else if (res.id == "2") { - this.showToponymicLocalBoxDialog = true; - this.showCoordLocalBoxDialog = false; + } + else if(res.name=="Coord") { + if(res.id=="1") { + this.showCoordLocalBoxDialog=true; + this.showToponymicLocalBoxDialog=false; + } else if(res.id=="2") { + this.showToponymicLocalBoxDialog=true; + this.showCoordLocalBoxDialog=false; this.getToponymicData(); } - } else if (res.name == "Analysis") { - if (res.id == "3") { - if (res.show == true) { - this.showPathAnalysisBoxDialog = true; + } + else if(res.name=="Analysis") { + if(res.id=="3") { + if(res.show==true) { + this.showPathAnalysisBoxDialog=true; } else { - this.showPathAnalysisBoxDialog = false; + this.showPathAnalysisBoxDialog=false; this.closeBufferBox(4); } } - } else if (res.name == "Trrain") { - switch (res.id) { + } + else if(res.name=="Trrain") { + switch(res.id) { case "d10": - this.showTerrainLevelDialog = !this.showTerrainLevelDialog; + this.showTerrainLevelDialog=!this.showTerrainLevelDialog; this.clearTerrainLevel(); break; } - - } else if (res.name == "Lengend") { - switch (res.id) { + } + else if(res.name=="Lengend") { + switch(res.id) { case "d2": - - this.showLengendDialog = res.vshow; - + this.showLengendDialog=res.vshow; break; } - } }, - handleSizeChange(val) { - this.listData.pageSize = val; + handleSizeChange (val) { + this.listData.pageSize=val; this.getToponymicData(); }, - handleCurrentChange(val) { - this.listData.pageIndex = val; + handleCurrentChange (val) { + this.listData.pageIndex=val; this.getToponymicData(); }, - setQueryTable() { - this.listData.pageSize = 10; - this.listData.pageIndex = 1; + setQueryTable () { + this.listData.pageSize=10; + this.listData.pageIndex=1; this.getToponymicData(); }, - async getToponymicData() { - if (this.listData.tab == "") { + async getToponymicData () { + if(this.listData.tab=="") { delete this.listData.tab; } - this.listData.name = this.comprehensive.name; - const data = await select_Comprehensive_ByPageAndCount(this.listData); + this.listData.name=this.comprehensive.name; + const data=await select_Comprehensive_ByPageAndCount(this.listData); - if (data.code != 200) { + if(data.code!=200) { this.$message.error("鍒楄〃璋冪敤澶辫触"); } - this.tableData = data.result; - this.count = data.count; + this.tableData=data.result; + this.count=data.count; }, - async handleLocation(index, row) { - const data = await select_Comprehensive_SelectWktById({ id: row.gid }); - if (data.code != 200) { + async handleLocation (index,row) { + const data=await select_Comprehensive_SelectWktById({ id: row.gid }); + if(data.code!=200) { this.$message.error("鍒楄〃璋冪敤澶辫触"); } - var val = data.result.slice(6, data.result.length - 1); - val = val.split(" "); - var position = { + var val=data.result.slice(6,data.result.length-1); + val=val.split(" "); + var position={ X: parseFloat(val[0]), Y: parseFloat(val[1]), Altitude: 2000, }; - if (this.imagePoint != null) { + if(this.imagePoint!=null) { sgworld.Creator.DeleteObject(this.imagePoint); - this.imagePoint = null; + this.imagePoint=null; } - this.imagePoint = sgworld.Creator.CreateLabel( + this.imagePoint=sgworld.Creator.CreateLabel( position, "", - SmartEarthRootUrl + "Workers/image/mark.png", + SmartEarthRootUrl+"Workers/image/mark.png", { disableDepthTestDistance: Infinity, scale: 0.8, @@ -841,49 +1383,65 @@ ), }); }, - closeBufferBox(res) { - switch (res) { + closeBufferBox (res) { + switch(res) { case 1: - this.showBufferBoxDialog = false; + this.showBufferBoxDialog=false; this.clearBuffer(); break; case 2: - this.showCoordLocalBoxDialog = false; + this.showCoordLocalBoxDialog=false; + sgworld.Creator.DeleteObject(this.imagePoint); break; case 3: - this.showToponymicLocalBoxDialog = false; - if (this.imagePoint != null) { + this.showToponymicLocalBoxDialog=false; + if(this.imagePoint!=null) { sgworld.Creator.DeleteObject(this.imagePoint); - this.imagePoint = null; + this.imagePoint=null; } break; case 4: - this.showPathAnalysisBoxDialog = false; + this.showPathAnalysisBoxDialog=false; this.clearPathAll(3); break; case 5: - this.showTerrainLevelDialog = false; + this.showTerrainLevelDialog=false; this.clearTerrainLevel() break; case 6: - this.$store.state.propertiesFlag = null; + this.$store.state.propertiesFlag=null; + this.showAttribute=false; + break; + case 7: + this.surfaceDeFormFlag=false; break; } }, //瀹氫綅 - setCoordLocal() { - var lon = parseFloat(this.coordFrom.lon); - var lat = parseFloat(this.coordFrom.lat); - var height = parseFloat(this.coordFrom.height); - var position = { + setCoordLocal () { + if(!this.coordFrom.lon) { + return this.$message('璇疯緭鍏ョ粡搴�'); + } + if(!this.coordFrom.lat) { + return this.$message('璇疯緭鍏ョ含搴�'); + } + var lon=parseFloat(this.coordFrom.lon) + var lat=parseFloat(this.coordFrom.lat) + var height=parseFloat(this.coordFrom.height)==NaN? parseFloat(this.coordFrom.height):100; + + var position={ X: lon, Y: lat, - Altitude: 2000, + Altitude: height, }; - this.imagePoint = sgworld.Creator.CreateLabel( + if(this.imagePoint!=null) { + sgworld.Creator.DeleteObject(this.imagePoint); + this.imagePoint=null; + } + this.imagePoint=sgworld.Creator.CreateLabel( position, "", - SmartEarthRootUrl + "Workers/image/mark.png", + SmartEarthRootUrl+"Workers/image/mark.png", { disableDepthTestDistance: Infinity, scale: 0.8, @@ -906,32 +1464,32 @@ // }); }, //缂撳啿鍖哄垎鏋� - clearBuffer() { - if (this.buffer == null) return; - this.buffer && this.buffer.clearBuff(); - this.buffer = null; + clearBuffer () { + if(this.buffer==null) return; + this.buffer&&this.buffer.clearBuff(); + this.buffer=null; }, - getBufferTable(type) { - const points = + getBufferTable (type) { + const points= this.buffer.this_buff.buff.polygon.hierarchy.getValue().positions; - let geometrys = ""; + let geometrys=""; let firstPoint; - let degrees = ""; - points.forEach((p, i) => { - degrees = window.sgworld.Core.toDegrees(p); - geometrys += "[" + degrees.lon + "," + degrees.lat + "],"; - i === 0 && (firstPoint = "[" + degrees.lon + "," + degrees.lat + "]"); + let degrees=""; + points.forEach((p,i) => { + degrees=window.sgworld.Core.toDegrees(p); + geometrys+="["+degrees.lon+","+degrees.lat+"],"; + i===0&&(firstPoint="["+degrees.lon+","+degrees.lat+"]"); }); - geometrys += firstPoint; - if (geometrys.length != 0) geometrys.trimEnd(","); - geometrys = "{rings:[[" + geometrys + "]]}"; + geometrys+=firstPoint; + if(geometrys.length!=0) geometrys.trimEnd(","); + geometrys="{rings:[["+geometrys+"]]}"; }, - addBuffer(res) { + addBuffer (res) { this.clearBuffer(); - var buffRadius = this.bufFrom.val; - switch (res) { + var buffRadius=this.bufFrom.val; + switch(res) { case 1: - this.buffer = sgworld.Analysis.DrawPointBuffer( + this.buffer=sgworld.Analysis.DrawPointBuffer( buffRadius, (event) => { this.getBufferTable("point"); @@ -939,7 +1497,7 @@ ); break; case 2: - this.buffer = sgworld.Analysis.DrawPolylineBuffer( + this.buffer=sgworld.Analysis.DrawPolylineBuffer( buffRadius, (event) => { this.getBufferTable("line"); @@ -947,7 +1505,7 @@ ); break; case 3: - this.buffer = sgworld.Analysis.DrawPolygonBuffer( + this.buffer=sgworld.Analysis.DrawPolygonBuffer( buffRadius, (event) => { this.getBufferTable("polygon"); @@ -956,38 +1514,66 @@ break; } }, - async showMouseLeftClick(res) { - if (res == 3) { - this.$refs.form.validate((valid) => { - if (!valid) { - return false; + async showMouseLeftClick (res) { + if(res==3) { + this.$refs.form.validate(async (valid) => { + if(valid) { + this.clearPathAll(5); + var start=this.pathFrom.lon.split(","); + var end=this.pathFrom.lat.split(","); + var startData={ + x1: parseFloat(start[0]), + y1: parseFloat(start[1]), + x2: parseFloat(end[0]), + y2: parseFloat(end[1]), + }; + const data=await comprehensive_selectRoute(startData); + if(data.code!=200) { + return this.$message.error("鏁版嵁璇锋眰澶辫触"); + } + if(!data.result) { + return this.$message.error("鏆傛棤鏁版嵁"); + } + var wkt=this.$wkt.parse(data.result); + var bufferSource=Cesium.GeoJsonDataSource.load(wkt,{ + stroke: new Cesium.Color(82/255,152/255,255/255,1), + strokeWidth: 5, + clampToGround: true, + }); + bufferSource.then((bufferSource) => { + sgworld.Navigate.flyToObj(bufferSource); + Viewer.dataSources.add(bufferSource); + }); } }); - this.clearPathAll(3); - var start = this.pathFrom.lon.split(","); - var end = this.pathFrom.lat.split(","); - var startData = { - x1: parseFloat(start[0]), - y1: parseFloat(start[1]), - x2: parseFloat(end[0]), - y2: parseFloat(end[1]), - }; - - const data = await comprehensive_selectRoute(startData); - if (data.code != 200) { - return this.$message.error("鏁版嵁璇锋眰澶辫触"); - } - var wkt = this.$wkt.parse(data.result); - var bufferSource = Cesium.GeoJsonDataSource.load(wkt, { - stroke: new Cesium.Color(82 / 255, 152 / 255, 255 / 255, 1), - - strokeWidth: 5, - clampToGround: true, - }); - bufferSource.then((bufferSource) => { - sgworld.Navigate.flyToObj(bufferSource); - Viewer.dataSources.add(bufferSource); - }); + // this.clearPathAll(3); + // var start = this.pathFrom.lon.split(","); + // var end = this.pathFrom.lat.split(","); + // var startData = { + // x1: parseFloat(start[0]), + // y1: parseFloat(start[1]), + // x2: parseFloat(end[0]), + // y2: parseFloat(end[1]), + // }; + // + // const data = await comprehensive_selectRoute(startData); + // if (data.code != 200) { + // return this.$message.error("鏁版嵁璇锋眰澶辫触"); + // } + // if (!data.result) { + // return this.$message.error("鏆傛棤鏁版嵁"); + // } + // var wkt = this.$wkt.parse(data.result); + // var bufferSource = Cesium.GeoJsonDataSource.load(wkt, { + // stroke: new Cesium.Color(82 / 255, 152 / 255, 255 / 255, 1), + // + // strokeWidth: 5, + // clampToGround: true, + // }); + // bufferSource.then((bufferSource) => { + // sgworld.Navigate.flyToObj(bufferSource); + // Viewer.dataSources.add(bufferSource); + // }); // var jsonurl = // wnsUrl + // '?start=' + @@ -1006,35 +1592,35 @@ // }, // }); } else { - var that = this; - if (this.handler != null) { + var that=this; + if(this.handler!=null) { this.clearLeftClick(); } - this.handler = new Cesium.ScreenSpaceEventHandler(Viewer.scene.canvas); - this.handler.setInputAction(function (event) { - let cartesian = Viewer.camera.pickEllipsoid(event.position); - let cartographic = Cesium.Cartographic.fromCartesian(cartesian); - let lng = parseFloat( + this.handler=new Cesium.ScreenSpaceEventHandler(Viewer.scene.canvas); + this.handler.setInputAction(function(event) { + let cartesian=Viewer.camera.pickEllipsoid(event.position); + let cartographic=Cesium.Cartographic.fromCartesian(cartesian); + let lng=parseFloat( Cesium.Math.toDegrees(cartographic.longitude) ).toFixed(6); // 缁忓害 - let lat = parseFloat( + let lat=parseFloat( Cesium.Math.toDegrees(cartographic.latitude) ).toFixed(6); // 绾害 - if (that.linePath != null) { + if(that.linePath!=null) { that.clearPathAll(3); } - if (lng != null && lat != null) { - let val = lng + "," + lat; - var position = sgworld.Creator.CreatePosition(lng, lat, 0); - if (res == 1) { - if (that.pathStart != null) { + if(lng!=null&&lat!=null) { + let val=lng+","+lat; + var position=sgworld.Creator.CreatePosition(lng,lat,0); + if(res==1) { + if(that.pathStart!=null) { that.clearPathAll(1); } - that.pathStart = sgworld.Creator.CreateLabel( + that.pathStart=sgworld.Creator.CreateLabel( position, "", - SmartEarthRootUrl + "Workers/image/start.png", + SmartEarthRootUrl+"Workers/image/start.png", { // 鏂囨湰鍋忕Щ閲� pixelOffset: { @@ -1048,16 +1634,16 @@ "璧峰鐐�" ); - that.pathFrom.lon = val; - } else if (res == 2) { - if (that.pathEnd != null) { + that.pathFrom.lon=val; + } else if(res==2) { + if(that.pathEnd!=null) { that.clearPathAll(2); } - that.pathEnd = sgworld.Creator.CreateLabel( + that.pathEnd=sgworld.Creator.CreateLabel( position, "", - SmartEarthRootUrl + "Workers/image/end.png", + SmartEarthRootUrl+"Workers/image/end.png", { // 鏂囨湰鍋忕Щ閲� pixelOffset: { @@ -1070,71 +1656,78 @@ 0, "缁撴潫鐐�" ); - that.pathFrom.lat = val; + that.pathFrom.lat=val; } that.clearLeftClick(); } - }, Cesium.ScreenSpaceEventType.LEFT_CLICK); + },Cesium.ScreenSpaceEventType.LEFT_CLICK); } }, - clearPathAll(res) { - switch (res) { + clearPathAll (res) { + switch(res) { case 1: - if (this.pathStart != null) { + if(this.pathStart!=null) { sgworld.Creator.DeleteObject(this.pathStart); - this.pathStart = null; + this.pathStart=null; } break; case 2: - if (this.pathEnd != null) { + if(this.pathEnd!=null) { sgworld.Creator.DeleteObject(this.pathEnd); - this.pathEnd = null; + this.pathEnd=null; } break; case 3: - if (this.pathStart != null) { + if(this.pathStart!=null) { sgworld.Creator.DeleteObject(this.pathStart); - this.pathStart = null; + this.pathStart=null; } - if (this.pathEnd != null) { + if(this.pathEnd!=null) { sgworld.Creator.DeleteObject(this.pathEnd); - this.pathEnd = null; + this.pathEnd=null; } - if (this.linePath != null) { + if(this.linePath!=null) { sgworld.Creator.DeleteObject(this.linePath); - this.linePath = null; + this.linePath=null; } Viewer.dataSources.removeAll(); break; case 4: - if (this.linePath != null) { + if(this.linePath!=null) { sgworld.Creator.DeleteObject(this.linePath); - this.linePath = null; + this.linePath=null; } + case 5: + if(this.linePath!=null) { + sgworld.Creator.DeleteObject(this.linePath); + this.linePath=null; + } + + Viewer.dataSources.removeAll(); break; } }, - clearLeftClick() { + clearLeftClick () { this.handler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_CLICK); //绉婚櫎浜嬩欢 - this.handler = null; + this.handler=null; }, - executeFly3D(res) { - var position = []; - if (res) { - var positionA = res.features; - if (positionA.length > 0) { - for (var i = 0; i < positionA.length; i++) { - var val = positionA[i]; - if (val.geometry.type == "LineString") { - var val_data = val.geometry.coordinates; - for (var j = 0; j < val_data.length; j++) { - position.push({ x: val_data[j][0], y: val_data[j][1] }); + executeFly3D (res) { + var position=[]; + if(res) { + var positionA=res.features; + if(positionA.length>0) { + for(var i=0;i<positionA.length;i++) { + var val=positionA[i]; + if(val.geometry.type=="LineString") { + var val_data=val.geometry.coordinates; + for(var j=0;j<val_data.length;j++) { + position.push({ x: val_data[j][0],y: val_data[j][1] }); } } } - this.linePath = sgworld.Creator.createPolyline( + this.linePath=sgworld.Creator.createPolyline( position, "#ffff00", 1, @@ -1148,100 +1741,231 @@ } }, //浜岀淮/涓夌淮鍦板浘鍒囨崲 - changeMapType() { + changeMapType () { // - this.show2DMap = !this.show2DMap; + this.show2DMap=!this.show2DMap; //浜岀淮 - if (this.show2DMap) { - this.$bus.$emit("changemap", 2); + if(this.show2DMap) { + this.$bus.$emit("changemap",2); } //涓夌淮 else { - this.$bus.$emit("changemap", 3); + this.$bus.$emit("changemap",3); } - this.$bus.$emit("changemapType", this.show2DMap); + this.$bus.$emit("changemapType",this.show2DMap); }, //鑾峰彇闄勪欢鍒楄〃 - async getAttatchList() { - let tabName = this.$store.state.propertiesName.ns+'.'+this.$store.state.propertiesName.tab; - let eventid = this.$store.state.propertiesInfo.eventid; - var obj = { - eventid:eventid, - tabName:tabName, + async getAttatchList () { + if(this.$store.state.propertiesName==null) { + return + } + + let tabName=this.$store.state.propertiesName.ns+'.'+this.$store.state.propertiesName.enName; + let eventid=this.$store.state.propertiesInfo.eventid; + + var obj={ + eventid: eventid, + tabName: tabName, }; - const res = await dataLib_selectFiles(obj); - if (res.code != 200) { + const res=await dataLib_selectFiles(obj); + + if(res.code!=200) { this.$message.error('闄勪欢鏌ヨ澶辫触'); return } - if (res.result.length <= 0) { - this.$message.error('鏆傛棤闄勪欢'); + if(res.result.length<=0) { + this.$message('鏆傛棤闄勪欢'); return } - this.attachList = res.result; - this.showAttach = true; + + this.attachList=res.result; + this.showAttach=true; }, //鏄惁鏄剧ず鏌ョ湅鎸夐挳 - showAttachDetailBtn(row){ - var name = row.name; - if (name.indexOf('.pdf') != -1 || name.indexOf('.jpg') != -1 || name.indexOf('.gif') != -1 || name.indexOf('.png') != -1 || name.indexOf('.jpeg') != -1) { + showAttachDetailBtn (row) { + var name=row.name; + console.log(neme) + if( + name.indexOf('.pdf')!=-1 + ||name.indexOf('.jpg')!=-1 + ||name.indexOf('.gif')!=-1 + ||name.indexOf('.png')!=-1 + ||name.indexOf('.jpeg')!=-1 + ||name.indexOf('.PDF')!=-1 + ||name.indexOf('.JPG')!=-1 + ||name.indexOf('.GIF')!=-1 + ||name.indexOf('.PNG')!=-1 + ||name.indexOf('.JPEG')!=-1 + ||name.indexOf('.BMP')!=-1 + ||name.indexOf('.bmp')!=-1 + ||name.indexOf('.dwg')!=-1 + ) { return true; } return false; }, //鏁版嵁鍒濆鍖� - refreshAttatchDetail() { - this.dialog.src = ""; - this.dialog.dialogVisible = false; - this.dialog.isPdf = false; - this.dialog.isJpg = false; + 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) { - this.dialog.dialogVisible = true; - this.dialog.isPdf = true; - var url = BASE_URL + "/res/downloadForView?guid=" + row.guid + "&token=" + getToken(); - this.dialog.src = url + var name=row.name; + if(name.indexOf('.pdf')!=-1||name.indexOf('.PDF')!=-1) { + this.dialog.dialogVisible=true; + this.dialog.isPdf=true; + var url=BASE_URL+"/comprehensive/downloadForView?guid="+row.guid+"&token="+getToken(); + this.dialog.src=url } - else if (name.indexOf('.jpg') != -1 || name.indexOf('.gif') != -1 || name.indexOf('.png') != -1 || name.indexOf('.jpeg') != -1) { - this.dialog.dialogVisible = true; - this.dialog.isJpg = true; - var url = BASE_URL + "/res/downloadForView?guid=" + row.guid + "&token=" + getToken(); - this.dialog.src = url + else if( + name.indexOf('.jpg')!=-1 + ||name.indexOf('.gif')!=-1 + ||name.indexOf('.png')!=-1 + ||name.indexOf('.jpeg')!=-1 + ||name.indexOf('.JPG')!=-1 + ||name.indexOf('.GIF')!=-1 + ||name.indexOf('.PNG')!=-1 + ||name.indexOf('.JPEG')!=-1 + ||name.indexOf('.BMP')!=-1 + ||name.indexOf('.bmp')!=-1 + ) { + this.dialog.dialogVisible=true; + this.dialog.isJpg=true; + var url=BASE_URL+"/comprehensive/downloadForView?guid="+row.guid+"&token="+getToken(); + this.dialog.src=url } }, //鏍煎紡鍖栨椂闂� - format(shijianchuo) { + format (shijianchuo) { //shijianchuo鏄暣鏁帮紝鍚﹀垯瑕乸arseInt杞崲 - var time = new Date(shijianchuo); - var y = time.getFullYear(); - var m = time.getMonth() + 1; - var d = time.getDate(); - var h = time.getHours(); - var mm = time.getMinutes(); - var s = time.getSeconds(); + var time=new Date(shijianchuo); + var y=time.getFullYear(); + var m=time.getMonth()+1; + var d=time.getDate(); + var h=time.getHours(); + var mm=time.getMinutes(); + var s=time.getSeconds(); return ( - y + - '-' + - this.add0(m) + - '-' + - this.add0(d) + - ' ' + - h + - ':' + - mm + - ':' + - s + y+ + '-'+ + this.add0(m)+ + '-'+ + this.add0(d)+ + ' '+ + h+ + ':'+ + mm+ + ':'+ + s ); }, //鏍煎紡鍖栨椂闂� - add0(m) { - return m < 10 ? '0' + m : m; + add0 (m) { + return m<10? '0'+m:m; }, + //鍕樺療淇℃伅琛� + getPointInfo () { + + if(this.showAttribute) { + + } + let attrbuteOption=workSite; + var name=attrbuteOption[0].table.replaceAll("_",""); + this.getAttributeDomFiled(name); + }, + //鑾峰彇姣忎釜琛ㄥ瓧娈靛悕绉板強闃堝�� + async getAttributeDomFiled (res) { + //鏌ヨ瀛楁淇℃伅; + const fileds=await dataQuery_selectFields({ + name: res, + }); + if(fileds.code!=200) { + this.$message.error("璋冪敤鍒楄〃澶辫触,璇疯仈绯诲伐浣滀汉鍛�!"); + return; + } + //鏌ヨ闃堝�间俊鎭紱 + const domains=await dataQuery_selectDomains({ + name: res, + }); + if(domains.code!=200) { + this.$message.error("璋冪敤鍒楄〃澶辫触,璇疯仈绯诲伐浣滀汉鍛�!"); + return; + } + var data1=fileds.result; + var data2=domains.result; + var std=[]; + this.filedsOption=[]; + for(var i in data1) { + if(data1[i].type!='geometry'&&data1[i].type) { + this.filedsOption.push(data1[i]); + } + if(data1[i].showtype==1) { + if(data1[i].domainNa!=null) { + data1[i].domainNa=this.getDomainNaFild(data1[i].domainNa,data2); + } + std.push(data1[i]); + } + } + this.getAttributeTableData(std,res,this.$store.state.propertiesInfo.宸ョ偣鍚嶇О,data1) + }, + //鑾峰彇琛ㄦ牸淇℃伅 + async getAttributeTableData (res,name,title,list) { + let attributeFild=res; + let parmams={ + name: name, + pageIndex: 1, + pageSize: 10, + count: 0, + title: title, + filter: "workname = "+"'"+title+"'", + } + + const data=await dataQuery_selectByPage(parmams); + if(data.code!=200) { + this.$message.error("璋冪敤鍒楄〃澶辫触,璇疯仈绯诲伐浣滀汉鍛�!"); + return; + } + + if(!data.result.length) { + this.$message("鏈煡璇㈠埌鍕樻帰淇℃伅鏁版嵁"); + return + } + this.showAttribute=!this.showAttribute; + var res_val=attributeFild; + for(var i in data.result) { + let val_Data=data.result[i]; + for(var j in res_val) { + if(res_val[j].domainNa!=null&&res_val[j].domainNa!=undefined) { + val_Data[res_val[j].field]=res_val[j].domainNa; + } + } + } + let info=data.result.length>0? data.result[0]:''; + if(info) { + let keys=Object.keys(info); + keys.forEach((obj) => { + list.forEach((item) => { + if(item.field==obj) { + item.value=info[obj]; + } + }) + }) + this.attributeList=list; + } + }, + valveChange () { + window.localStorage.setItem('slider_x',this.valueX); + window.localStorage.setItem('slider_y',this.valueY); + window.localStorage.setItem('slider_z',this.valueZ); + } }, + destroyed () { + this.showAttribute=false + } }; </script> @@ -1249,13 +1973,14 @@ .mapBox { width: 100%; height: 100%; - position: relative; + #mapdiv { width: 100%; height: 100%; overflow: hidden; position: relative; + .toponymicLocalBox { width: 350px; //width: 750px; @@ -1265,6 +1990,7 @@ right: 8%; bottom: 1%; } + .bufferBox { width: 412px; height: 230px; @@ -1273,6 +1999,7 @@ right: 6%; bottom: 1%; } + .coordLocalBox { width: 350px; height: 370px; @@ -1280,7 +2007,12 @@ position: absolute; right: 8%; bottom: 1%; + + span { + width: 100px; + } } + .propertiesPop { width: 350px; height: 370px; @@ -1288,13 +2020,79 @@ 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; + position: absolute; + left: 2%; + 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; + margin-right: 15px; + } + } + } + + .pathAnalysisBox { + width: 412px; + height: 370px; + z-index: 40; + position: absolute; + right: 8%; + bottom: 1%; + } + + .attributionPop { + width: 350px; + height: 370px; + z-index: 40; + 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; @@ -1303,28 +2101,23 @@ right: 8%; bottom: -11%; } - .pathAnalysisBox { - width: 412px; - - z-index: 40; - position: absolute; - right: 8%; - bottom: 1%; - } .box-card { 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; @@ -1337,6 +2130,13 @@ z-index: 40; } + .HistLeng { + z-index: 40; + position: absolute; + right: 115px; + bottom: 10px; + } + .lengend { width: 300px; z-index: 40; @@ -1344,18 +2144,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; @@ -1414,21 +2219,23 @@ .CenDiv { position: absolute; bottom: 1%; - left: 1%; + left: calc(1% + 75px); height: 40px; width: 60px; z-index: 101; display: flex; flex-direction: column; justify-content: space-between; - box-shadow: 3px 3px 6px #666; - border: 1px solid rgba(204, 204, 204, 0.76); + // box-shadow: 3px 3px 6px #666; + // border: 1px solid rgba(204, 204, 204, 0.76); border-radius: 5px; cursor: pointer; } + .center1 { right: 1%; } + .right { position: absolute; top: 50px; @@ -1440,9 +2247,10 @@ flex-direction: column; justify-content: space-between; } -.CenDiv:hover { - border: 1px solid #409eff; -} + +// .CenDiv:hover { +// border: 1px solid #409eff; +// } .active { width: 100%; height: 100%; @@ -1451,6 +2259,7 @@ background-size: 100% 100%; border-radius: 5px; } + .menuLayer { width: 100%; height: 100%; @@ -1460,37 +2269,85 @@ border-radius: 5px; } -.changeMapType { - position: absolute; - bottom: 1%; - left: calc(1% + 75px); - height: 40px; - width: 60px; - z-index: 101; - display: flex; - justify-content: center; - align-items: center; - // box-shadow: 3px 3px 6px #666; - //border: 1px solid rgba(204, 204, 204, 0.76); - border-radius: 5px; - - cursor: pointer; +.mapBaseMap { + width: 100%; + height: 100%; + //margin-left: 10px; + background-image: url("../assets/img/basemap.png"); + //background-image: url("../assets/img/synthesis/搴曞浘.png"); + background-repeat: no-repeat; + background-size: contain; } + +//.changeMapType { +// position: absolute; +// bottom: 1%; +// left: calc(1% + 150px); +// height: 40px; +// width: 60px; +// z-index: 101; +// display: flex; +// justify-content: center; +// align-items: center; +// // box-shadow: 3px 3px 6px #666; +// //border: 1px solid rgba(204, 204, 204, 0.76); +// border-radius: 5px; +// +// cursor: pointer; +//} +.changeTerrain { +} + +.changeLayer { +} + +.changeMapType { +} + +//.changeTerrain { +// position: absolute; +// bottom: 1%; +// left: 1%; +// height: 40px; +// width: 60px; +// z-index: 101; +// display: flex; +// justify-content: center; +// align-items: center; +// +// border-radius: 5px; +// cursor: pointer; +//} + .mapTypeTwo { width: 100%; height: 100%; margin-left: 10px; - background-image: url("../assets/img/synthesis/3D.png"); + background-image: url("../assets/img/3D.png"); + //background-image: url("../assets/img/synthesis/3D.png"); background-repeat: no-repeat; - background-size: contain; + + //background-size: contain; } + +.mapTerrain { + width: 100%; + height: 100%; + //margin-left: 10px; + //background-image: url("../assets/img/synthesis/鍦板舰.png"); + //background-image: url("../assets/img/synthesis/鍦板舰.png"); + background-image: url("../assets/img/terrain.png"); + background-repeat: no-repeat; + //background-size: contain; +} + .mapTypeThree { width: 100%; height: 100%; - margin-left: 10px; - background-image: url("../assets/img/synthesis/2D 鎷疯礉 2.png"); + //margin-left: 10px; + background-image: url("../assets/img/2D.png"); background-repeat: no-repeat; - background-size: contain; + //background-size: contain; } .pdfClass { -- Gitblit v1.9.3