src/assets/js/Map/index.js | ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史 | |
src/assets/js/Map/menuTool.js | ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史 | |
src/assets/js/Map/temporaryTools.js | ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史 | |
src/components/mouseMove.vue | ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史 | |
src/store/index.ts | ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史 | |
src/views/Index.vue | ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史 | |
src/views/Map/mapView.vue | ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史 | |
src/views/layer/layerManage.vue | ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史 | |
src/views/menus.vue | ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史 | |
src/views/plotting/plottingInquire.vue | ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史 | |
src/views/query/slopeQuery.vue | ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史 |
src/assets/js/Map/index.js
@@ -65,21 +65,46 @@ sgworld.Navigate.Stop(); //åæ¶é£è¡ç¶æ sgworld.Navigate.setPosition(-1093596.38, 5729026.12, 4136590.41); this.addMouseLeftClickEvents(); this.addMouseLeftDownEvents(); }, //é¼ æ å·¦é®ç¹å»äºä»¶æ·»å addMouseLeftClickEvents() { addMouseLeftDownEvents() { if (window.handleLeftClick) { window.handleLeftClick.removeInputAction( Cesium.ScreenSpaceEventType.LEFT_CLICK ); //ç§»é¤äºä»¶ window.handleLeftClick = null; } const pickGlobeSlope = new SmartEarth.Cesium.PickGlobeSlope(earthCtrl.Viewer) window.handleLeftClick = new Cesium.ScreenSpaceEventHandler( window.Viewer.scene.canvas ); var that = this; window.handleLeftClick.setInputAction(function (event) { const angle = pickGlobeSlope.pickSlope(event.position) if (store.state.slopeQueyFlag) { if (!store.state.showSlopeQuey) { store.state.showSlopeQuey = true; } store.state.slopeQueyValue = angle.toFixed(6); } }, Cesium.ScreenSpaceEventType.LEFT_CLICK); }, //é¼ æ å·¦é®ç¹å»äºä»¶æ·»å addMouseLeftClickEvents() { if (window.handleLeftDown) { window.handleLeftDown.removeInputAction( Cesium.ScreenSpaceEventType.LEFT_DOWN ); //ç§»é¤äºä»¶ window.handleLeftDown = null; } window.handleLeftDown = new Cesium.ScreenSpaceEventHandler( window.Viewer.scene.canvas ); var that = this; window.handleLeftDown.setInputAction(function (event) { let cartesian = window.Viewer.scene.pick(event.position); if (Cesium.defined(cartesian)) { src/assets/js/Map/menuTool.js
@@ -136,8 +136,11 @@ window.material = null; globe.material = null; Viewer.scene.globe.enableLighting = false; store.state.slopeQueyFlag = false; store.state.showSlopeQuey = false; return; } store.state.slopeQueyFlag = true; window.material = new Cesium.Material({ fabric: { type: "ElevationRamp", @@ -159,6 +162,9 @@ if (window.material) { window.material = null; globe.material = null; store.state.slopeQueyFla = false store.state.slopeQueyFlag = false; store.state.showSlopeQuey = false; return; } @@ -625,7 +631,8 @@ window.material = null; globe.material = null; Viewer.scene.globe.enableLighting = false; return; store.state.slopeQueyFlag = false; store.state.showSlopeQuey = false; } if (window.DoubleScreen) { window.DoubleScreen && window.DoubleScreen.destroy(); @@ -695,7 +702,7 @@ offset: { heading: Cesium.Math.toRadians(0.0), pitch: Cesium.Math.toRadians(-90), range: 0 range: 40 } } ); @@ -753,7 +760,7 @@ }, }) window.Viewer.flyTo(locationPolygonEntity, { window.Viewer.flyTo(polyline, { offset: { heading: Cesium.Math.toRadians(0.0), pitch: Cesium.Math.toRadians(-90), src/assets/js/Map/temporaryTools.js
@@ -10,6 +10,20 @@ } } }, locationTemporaryLayer(res){ var entities = window.Viewer.entities._entities._array; for (var i in entities) { if (entities[i].id == res.id && entities[i]._shpType == res.shpType) { window.Viewer.flyTo(entities[i], { offset: { heading: Cesium.Math.toRadians(0.0), pitch: Cesium.Math.toRadians(-90), range: 400 } }); } } }, addTemporaryTool(res) { switch (res.type) { case "point": @@ -361,7 +375,6 @@ if (res.label.outlineWidth && res.label.outlineWidth._value) { width = res.label.outlineWidth._value } return { id: this.isedit ? res.id : (new Date()).getTime(), cnName: res.name, @@ -386,7 +399,6 @@ layerType: 'ææ¬ç¹', } }, getPointEntityObj(res) { var mataColor = res.point.color._value; var outlineColor = res.point.outlineColor._value; src/components/mouseMove.vue
@@ -1,13 +1,6 @@ <template> <div class="mouseBox" @setMouseMove="setMouseMove" > <div class="earthImage" :class="{ active: gridIsshow }" @click="gridSwitch" ></div> <div class="mouseBox" @setMouseMove="setMouseMove"> <div class="earthImage" :class="{ active: gridIsshow }" @click="gridSwitch"></div> <div class="earthLable">ç»åº¦ :</div> <div class="earthLable">{{ longitude }}</div> <div class="earthLable">纬度 :</div> @@ -56,13 +49,15 @@ let handlerPoint = new SmartEarth.Cesium.ScreenSpaceEventHandler( window.Viewer.scene.canvas ); const pickGlobeSlope = new SmartEarth.Cesium.PickGlobeSlope(earthCtrl.Viewer) var ellipsoid = window.Viewer.scene.globe.ellipsoid; handlerPoint.setInputAction(function (movement) { handlerPoint.setInputAction((movement) => { //æè·æ¤çä½ï¼å°ç¬å¡å°äºç»´å¹³é¢åæ 转为æ¤çä½çç¬å¡å°ä¸ç»´åæ ï¼è¿åçä½è¡¨é¢çç¹ var cartesian = window.Viewer.camera.pickEllipsoid( movement.endPosition, ellipsoid ); if (cartesian) { //å°ç¬å¡å°ä¸ç»´åæ 转为å°å¾åæ ï¼å¼§åº¦ï¼ var cartographic = @@ -303,6 +298,7 @@ padding-right: 20px; display: flex; align-items: center; .earthImage { width: 20px; height: 20px; @@ -311,6 +307,7 @@ margin-left: 10px; cursor: pointer; } .earthLable { font-size: 16px; font-family: Source Han Sans CN; @@ -319,6 +316,7 @@ line-height: 5px; margin-left: 10px; } .active { background-color: #171e2e; border: 1px solid; src/store/index.ts
@@ -47,6 +47,9 @@ editTemporarName: null, editTemporaryback: null, layerGroups:null, slopeQueyFlag:false, slopeQueyValue:null, showSlopeQuey:false, }, mutations: { // SET_plotting(state, obj) { src/views/Index.vue
@@ -1,25 +1,12 @@ <template> <div class="body_box" v-loading="store.state.loading" element-loading-background="rgba(0, 0, 0, 0.8)" > <export-map v-if="layerExportshow" @SETexportMap="SETexportMap" ></export-map> <div class="body_box" v-loading="store.state.loading" element-loading-background="rgba(0, 0, 0, 0.8)"> <export-map v-if="layerExportshow" @SETexportMap="SETexportMap"></export-map> <export-list v-if="store.state.setExportList"></export-list> <menus></menus> <bottom-btn v-if="store.state.isShowMap"></bottom-btn> <mouse-move v-if="store.state.isShowMap"></mouse-move> <spatial-box v-if="layerSpatialshow" @SETspatialClose="SETspatialClose" ></spatial-box> <coord-location v-if="layerLocationshow" @SETcoordClose="setCoordLocation" > <spatial-box v-if="layerSpatialshow" @SETspatialClose="SETspatialClose"></spatial-box> <coord-location v-if="layerLocationshow" @SETcoordClose="setCoordLocation"> </coord-location> <details-query v-if="store.state.details.showDetails"> </details-query> <div v-if="store.state.isShowMap"> @@ -30,6 +17,7 @@ </div> <plotting-inquire></plotting-inquire> <attribute-info v-if="store.state.setEditTemporaryShow"></attribute-info> <slopeQuery v-if="store.state.showSlopeQuey"></slopeQuery> </div> </template> @@ -66,7 +54,8 @@ import plottingInquire from "./plotting/plottingInquire.vue"; //屿§ç¼è¾ import attributeInfo from "./plotting/attributeInfo.vue"; // å¡åº¦å¼ import slopeQuery from "./query/slopeQuery.vue"; import router from "@/router"; import { useStore } from "vuex"; // å¼å ¥useStore æ¹æ³ src/views/Map/mapView.vue
@@ -1,6 +1,7 @@ <template> <div class="MapViewBox"> <div id="cesiumContainer"> </div> </div> </template> src/views/layer/layerManage.vue
@@ -44,6 +44,8 @@ @click.native="clickdTemporary(1, data)">ç¼è¾</el-dropdown-item> <el-dropdown-item v-if="data.shpType == 'temporaryLayer'" @click.native="clickdTemporary(2, data)">å é¤</el-dropdown-item> <el-dropdown-item v-if="data.shpType == 'temporaryLayer'" @click.native="clickdTemporary(3, data)">å®ä½</el-dropdown-item> </el-dropdown-menu> </template> </el-dropdown> @@ -117,6 +119,10 @@ const temporary = ref(new Date().getTime()); const clickdTemporary = async (res, data) => { if (res == 1) { let son = estreeRef.value.getCheckedKeys() if(son.indexOf(data.id)<0){ return ElMessage(data.cnName+"å¾å±æ²¡æå¾é,æ æ³è¿è¡ç¼è¾"); } if (store.state.editTemporaryId) { var id = store.state.editTemporaryId; var edit_id = sgworld.Creator.SimpleGraphic.SimpleGraphicObj.indexOf(id); @@ -130,7 +136,7 @@ sgworld.Creator.SimpleGraphic.edit(true, { editProp: false, tipText: { ActiveText: 'ç¹å»æ¿æ´»ç¼è¾' } }, enableDelete: false }); } else if (res == 2) { var layerId = [] @@ -167,6 +173,12 @@ } estreeRef.value.setCheckedKeys(layerIds, true); }) } else if(res == 3){ let son = estreeRef.value.getCheckedKeys() if(son.indexOf(data.id)<0){ return ElMessage(data.cnName+"å¾å±æ²¡æå¾é,æ æ³è¿è¡å®ä½"); } temporaryTool.locationTemporaryLayer(data); } }; //éæ©å¾å± @@ -174,6 +186,10 @@ layerAttributeIsshow.value = false; layerDetailIsshow.value = false; let isCheck = checked.checkedKeys.indexOf(data.id) > -1; nextTick(() => { let son = estreeRef.value.getCheckedNodes(); store.commit("SET_CHECKLAYER", son); }); if (isCheck) { if (data.isLayer == 0) { let son = estreeRef.value.getCheckedNodes().reverse(); @@ -202,9 +218,7 @@ } } } } else { if (data.isLayer == 0) { var layers = data.children; for (var i in layers) { @@ -224,6 +238,7 @@ } } }; const setVisiable = (treeNode, checked) => { if (checked !== undefined) { @@ -288,17 +303,27 @@ const getCheckedLayerPID = (res, result) => { var temp = []; var ids = result let forFn = (data) => { if (data.children) { data.children.forEach(item => { if (item.children) { temp.push(item.id) forFn(item) } else { if (ids.indexOf(item.id) > -1) { temp.push(item.id) } } }) } else { if (ids.indexOf(data.id) > -1) { temp.push(data.id) } } } forFn(res); return temp; }; src/views/menus.vue
@@ -80,6 +80,7 @@ > <thematic-map v-show="!thematicMapBtnState"></thematic-map> <top-btn v-show="fullScreen" v-if="thematicMapBtnState"></top-btn> <div> <div class="setUserLogo" @click="setLogMeu = !setLogMeu"> <div class="setUserImage"></div> @@ -123,6 +124,7 @@ import store from "@/store"; //Router import router from "@/router"; const menuOptions = ref([]); const checkMenuFlag = ref(""); let fullScreen = ref(true); src/views/plotting/plottingInquire.vue
@@ -1,18 +1,10 @@ <template> <div class="plottingInquire" v-if="isShow" v-drag="true" > <div class="plottingInquire" v-if="isShow" v-drag="true"> <div class="InquireHeader"> <div>æ ç»æ¥è¯¢</div> <div> <el-icon @click="isShow = false" :size="20" style="cursor: pointer" > <el-icon @click="isShow = false" :size="20" style="cursor: pointer"> <Close /> </el-icon> @@ -25,42 +17,20 @@ </div> <div class="inquireContent_name"> <div class="plotting_list_tr_name"> <img :src="require(`../../assets/img/${inquireData.icon}`)" class="ico" alt="" /><span>{{ inquireData.name }}</span> <img :src="require(`../../assets/img/${inquireData.icon}`)" class="ico" alt="" /><span>{{ inquireData.name }}</span> </div> <div class="plotting_list_tr_wkt" v-show="geoWktFlag" >{{ geoWkt }}</div> <div class="plotting_list_tr_wkt" v-show="geoWktFlag">{{ geoWkt }}</div> <div class="plotting_list_tr_btn"> <div class="tr_btn dw" @click="setLayerLocation()" ></div> <div class="tr_btn sc" @click="setLayerRemove()" ></div> <div class="tr_btn dw" @click="setLayerLocation()"></div> <div class="tr_btn sc" @click="setLayerRemove()"></div> </div> </div> <div class="tab_box"> <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick" > <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick"> <!-- <el-tab-pane label="å¾å±å±æ§" name="first">User</el-tab-pane> --> <el-tab-pane label="æ¥è¯¢ç»æ" name="second" > <div class="inquireContent_input" v-show="pixelIsShow" > <el-tab-pane label="æ¥è¯¢ç»æ" name="second"> <div class="inquireContent_input" v-show="pixelIsShow"> <!-- <div class="inquireContent_input_left"> <div class="label">èå´æ¡</div> <el-input @@ -71,66 +41,25 @@ <template #append>km</template> </el-input> </div> --> <div class="inquireContent_input_right" v-show="!chartIsshow" > <div class="inquireContent_input_right" v-show="!chartIsshow"> <div class="label">èå´æ¡å æå¤§åç´ å¼</div> <el-select v-model="ScopeBox.pixel" class="m-2" placeholder="åç´ å¼" size="small" @change="pixelChange" > <el-option v-for="item in pixeloptions" :key="item.value" :label="item.label" :value="item.value" /> <el-select v-model="ScopeBox.pixel" class="m-2" placeholder="åç´ å¼" size="small" @change="pixelChange"> <el-option v-for="item in pixeloptions" :key="item.value" :label="item.label" :value="item.value" /> </el-select> </div> <div class="inquireContent_input_right" v-show="chartIsshow" > <div class="inquireContent_input_right" v-show="chartIsshow"> <div class="label">èç¹æ°</div> <el-select v-model="ScopeBox.nodes" class="m-2" placeholder="åç´ å¼" size="small" @change="nodesChange" > <el-option v-for="item in nodesoptions" :key="item.value" :label="item.label" :value="item.value" /> <el-select v-model="ScopeBox.nodes" class="m-2" placeholder="åç´ å¼" size="small" @change="nodesChange"> <el-option v-for="item in nodesoptions" :key="item.value" :label="item.label" :value="item.value" /> </el-select> </div> </div> <div class="chart" v-if="chartIsshow" > <div class="chart" v-if="chartIsshow"> <div class="chart_box"> <div class="chart_btn"> <el-button :icon="Search" link class="linkBtn" @click="openDialog(e)" ></el-button> <el-button :icon="Search" link class="linkBtn" @click="openDialog(e)"></el-button> <el-button :icon="Download" link class="linkBtn" @click="downloadChart(layerData)" ></el-button> <el-button :icon="Download" link class="linkBtn" @click="downloadChart(layerData)"></el-button> <!-- ææ¶ä¸ç¨å é¤ --> <!-- <el-button :icon="Delete" @@ -139,25 +68,11 @@ @click="deleteChart(e)" ></el-button> --> </div> <Bar-graph :width="'100%'" :height="'260px'" :layerData="layerData" ></Bar-graph> <Bar-graph :width="'100%'" :height="'260px'" :layerData="layerData"></Bar-graph> <div class="select"> <el-select v-model="layerValue" class="m-2" placeholder="éæ©å¾å±" size="small" @change="layerChange" > <el-option v-for="(item, i) in layeroptions" :key="i" :label="item.layerName" :value="item.layerName" /> <el-select v-model="layerValue" class="m-2" placeholder="éæ©å¾å±" size="small" @change="layerChange"> <el-option v-for="(item, i) in layeroptions" :key="i" :label="item.layerName" :value="item.layerName" /> </el-select> </div> </div> @@ -188,10 +103,7 @@ > </div> </div> --> <div class="inquireContent_table" v-if="!chartIsshow" > <div class="inquireContent_table" v-if="!chartIsshow"> <div class="table"> <div class="table_head"> <div class="table_head_td">åºå·</div> @@ -201,11 +113,7 @@ </div> </div> <div class="table_content"> <div class="table_tr" v-for="(e, i) in resultList" :key="i" > <div class="table_tr" v-for="(e, i) in resultList" :key="i"> <div class="table_td">{{ i + 1 }}</div> <div class="table_td"> <span> {{ e.layerName }}</span> @@ -215,34 +123,20 @@ </div> </div> </div> <div class="download" v-if="!chartIsshow" > <el-button link @click="download" >ä¸è½½åæç»æ</el-button> <div class="download" v-if="!chartIsshow"> <el-button link @click="download">ä¸è½½åæç»æ</el-button> </div> </el-tab-pane> </el-tabs> </div> </div> </div> <div class="dialog" v-if="dialogShow" @click.self="dialogShow = false" > <div class="dialog" v-if="dialogShow" @click.self="dialogShow = false"> <div class="chart"> <i @click.capture="closeDialog"><el-icon> <Close /> </el-icon></i> <BarGraphAxisLine :width="'856px'" :height="'636px'" :layerData="layerData" ></BarGraphAxisLine> <BarGraphAxisLine :width="'856px'" :height="'636px'" :layerData="layerData"></BarGraphAxisLine> </div> </div> </template> @@ -635,6 +529,7 @@ width: 320px; background: rgba(7, 8, 14, 0.8); z-index: 100; .InquireHeader { width: 100%; height: 35px; @@ -649,6 +544,7 @@ display: flex; justify-content: space-between; } .inquireContent { .inquireContent_title { font-size: 14px; @@ -658,20 +554,24 @@ margin-top: 10px; padding-left: 10px; } .inquireContent_name { display: flex; align-items: center; justify-content: space-between; padding: 0 10px; padding-bottom: 16px; .plotting_list_tr_name { display: flex; align-items: center; justify-content: space-between; .ico { width: 18px; height: 18px; } span { font-size: 16px; font-weight: 300; @@ -679,6 +579,7 @@ margin-left: 10px; } } .plotting_list_tr_wkt { font-size: 12px; font-weight: 300; @@ -686,34 +587,41 @@ margin-left: 10px; flex: 1; } .plotting_list_tr_btn { display: flex; align-items: center; .tr_btn { width: 16px; height: 15px; cursor: pointer; } .dw { background: url("../../assets/img/dw.png") no-repeat center; background-size: 100% 100%; margin-right: 18px; } .sc { background: url("../../assets/img/sc.png") no-repeat center; background-size: 100% 100%; } } } /deep/ .el-tabs__nav { justify-content: center; float: none; } /deep/ .el-tabs__item, /deep/ .el-tabs__item.is-active { color: #d6e4ff; font-size: 16px; } .inquireContent_input { display: flex; justify-content: space-between; @@ -722,12 +630,15 @@ margin-right: 10px; padding-bottom: 14px; border-bottom: 1px solid rgba(214, 228, 255, 0.4); .inquireContent_input_left { width: 45%; } .inquireContent_input_right { width: 45%; } .label { font-size: 14px; font-weight: 400; @@ -735,12 +646,15 @@ padding-bottom: 10px; } } .inquireContent_msg { padding: 12px 18px; .inquireContent_msg_k { display: flex; justify-content: space-between; align-items: center; span { font-size: 12px; font-weight: 400; @@ -748,14 +662,17 @@ } } } .inquireContent_table { padding-right: 15px; padding-left: 15px; padding-bottom: 10px; .table { background: rgba(0, 0, 0, 0, 4); border: 1px solid rgba(214, 228, 255, 0.4); border-radius: 4px; .table_head { height: 27px; background: #0e151f; @@ -763,6 +680,7 @@ // 0px 14px 16px 0px rgba(38, 47, 71, 0.68); // border-radius: 4px 4px 0px 0px; display: flex; .table_head_td { width: 50px; font-size: 14px; @@ -773,7 +691,9 @@ align-items: center; border-right: 1px solid rgba(214, 228, 255, 0.4); box-sizing: border-box; } .table_head_td:nth-child(2) { width: 237px; display: flex; @@ -781,15 +701,19 @@ align-items: center; padding: 0 10px; border-right: 0; } } .table_content { height: 440px; overflow: auto; .table_tr { // height: 27px; display: flex; background: #000000; // padding: 5px 0; .table_td { width: 50px; @@ -802,6 +726,7 @@ align-items: center; border-right: 1px solid rgba(214, 228, 255, 0.4); box-sizing: border-box; // padding: 5px; // white-space: nowrap; span { @@ -809,12 +734,19 @@ width: 50%; word-wrap: break-word; // white-space: pre; text-align: left; } span:nth-child(2) { display: flex; justify-content: flex-end; // display: flex; // justify-content: flex-end; // margin-left: 5%; // float: right; width: 40%; text-align: right; } } .table_td:nth-child(2) { width: 237px; display: flex; @@ -828,74 +760,91 @@ border-right: 0; } } .table_tr:nth-child(2n) { background: #0e151f; } } .table_content::-webkit-scrollbar { width: 8px; } .table_content::-webkit-scrollbar-thumb { border-radius: 10px; background: rgba(0, 0, 0, 0.2); } .table_content::-webkit-scrollbar-track { border-radius: 0; background: rgba(0, 0, 0, 0); } } } .download { padding-right: 15px; padding-left: 15px; padding-bottom: 14px; display: flex; justify-content: flex-end; .el-button { font-size: 12px; color: #d6e4ff; } } .chart { width: 100%; height: 540px; overflow: auto; } .chart::-webkit-scrollbar { width: 8px; } .chart::-webkit-scrollbar-thumb { border-radius: 10px; background: rgba(0, 0, 0, 0.2); } .chart::-webkit-scrollbar-track { border-radius: 0; background: rgba(0, 0, 0, 0); } .chart_box { width: 100%; .chart_btn { display: flex; justify-content: flex-end; margin: 0 10px; padding-top: 5px; padding-bottom: 5px; // border-bottom: 1px solid rgba(214, 228, 255, 0.4); .linkBtn { color: #d6e4ff; } .del { color: red; } } } .select_box { padding-bottom: 20px; .add_btn { display: flex; justify-content: center; } } .select { display: flex; justify-content: center; @@ -903,6 +852,7 @@ } } } .dialog { position: absolute; top: 0; @@ -911,6 +861,7 @@ height: 100vh; background-color: rgba(255, 255, 255, 0.4); z-index: 110; .chart { position: absolute; top: 50%; @@ -918,6 +869,7 @@ transform: translate(-50%, -50%); background-color: rgb(33, 37, 44); padding: 20px; i { position: absolute; right: 2px; @@ -928,6 +880,7 @@ } } } .btnstyle { .el-button { background: rgba(104, 156, 255, 0.2); @@ -937,9 +890,11 @@ font-weight: 400; color: #ffffff; } .el-button:hover { border: 1px solid #689cff; } .delbtn { background: rgba(245, 108, 108, 0.2); border: 1px solid #5a0914; src/views/query/slopeQuery.vue
¶Ô±ÈÐÂÎļþ @@ -0,0 +1,72 @@ <template> <div v-drag="true" class="searchBox"> <div @click="setCloseSlopeQuerty" style="float: right;"> <el-icon :size="20"> <Close /> </el-icon> </div> <div> å¡åº¦å¼ï¼{{ queryVal }} </div> </div> </template> <script lang="ts" setup> import { ref, onMounted, onBeforeUnmount, reactive, defineProps, defineEmits, nextTick, watch, } from "vue"; import store from "@/store"; const queryVal = ref(null) const setCloseSlopeQuerty = () => { store.state.showSlopeQuey = false; store.state.slopeQueyValue = null; } const changeSlopQueryValue = (res) => { queryVal.value = res } onMounted(() => { changeSlopQueryValue(store.state.slopeQueyValue) }) watch( () => store.state.slopeQueyValue, (nVal, oVal) => { if (nVal) { changeSlopQueryValue(nVal); } }, { deep: true } ); </script> <style lang="less" scoped> .searchBox { position: absolute; z-index: 30; width: 200px; top: 8vh; right: 24vh; padding: 10px; background: rgba(7, 8, 14, 0.8); border: 1px solid #d6e4ff; box-shadow: inset 0px 10px 40px 10px rgba(38, 47, 71, 1); border-radius: 5px; font-family: Source Han Sans SC; font-size: 12px; color: white; } </style>