坡度坡向功能新增，临时图层添加定位。空间查询功能优化；

surprise

2023-10-19 9f51306b10520a2be30bedfe1b34c288cf770f43

坡度坡向功能新增，临时图层添加定位。空间查询功能优化；

 src/assets/js/Map/index.js

@@ -31,11 +31,11 @@
      timeline: true,
    });

 

    this.earthCtrl.Viewer.scene.debugShowFramesPerSecond = true
    this.earthCtrl.coreMap.scene.screenSpaceCameraController.enableCollisionDetection = true;
    this.earthCtrl.Viewer.scene.globe.terrainExaggeration = 1.00001
 


    window.earthCtrl = this.earthCtrl;

@@ -65,26 +65,51 @@
    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)) {

        if (cartesian.id.shpType && cartesian.id.shpType == 'temporaryLayer') {
     

          that.setEditTemporaryLayer(cartesian.id._id)
        }

@@ -94,9 +119,9 @@
  setEditTemporaryLayer(res) {
    // store.state.editTemporaryId = res;
    // console.log(store.state.editTemporaryId)
 
    if (store.state.editTemporaryId && store.state.editTemporaryId  == res) {
 

    if (store.state.editTemporaryId && store.state.editTemporaryId == res) {

      store.state.setEditTemporaryShow = true;
    }
  },

 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":
@@ -142,7 +156,7 @@
        if (res.outline) {
            outlinewidth = res.width
        }
 

        window.Viewer.entities.add({
            name: res.cnName,
            id: res.id,
@@ -156,7 +170,7 @@
                    res.near,
                    res.far
                ),
  

                material: new Cesium.PolylineOutlineMaterialProperty({
                    color: Cesium.Color.fromCssColorString(res.material).withAlpha(
                        res.materialAlpha
@@ -339,7 +353,7 @@
            layerType: '线',
            geometry: geom,
            heightReference: res.polyline.clampToGround._value,
            outline:  res.outline != null ?  res.outline : false,
            outline: res.outline != null ? res.outline : false,
            width: res.polyline.width._value,
            material: this.colorRgbToHex('rgb(' + (mataColor.red * 255) + ',' + (mataColor.green * 255) + ',' + (mataColor.blue * 255) + ')'),
            outlineColor: this.colorRgbToHex('rgb(' + (outlineColor.red * 255) + ',' + (outlineColor.green * 255) + ',' + (outlineColor.blue * 255) + ')'),
@@ -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 =
@@ -119,27 +114,27 @@
  });


   Viewer.scene.postRender.addEventListener(() => {
      // // èŽ·å–画布的大小
      let scene = earthCtrl.Viewer.scene;
      var width = scene.canvas.clientWidth;
      var height = scene.canvas.clientHeight;
      //获取画布中心两个像素的坐标（默认地图渲染在画布中心位置）
      var left = scene.camera.getPickRay(new SmartEarth.Cesium.Cartesian2((width / 2) | 0, (height - 1) / 2));
      var right = scene.camera.getPickRay(new SmartEarth.Cesium.Cartesian2(1 + (width / 2) | 0, (height - 1) / 2));
  Viewer.scene.postRender.addEventListener(() => {
    // // èŽ·å–画布的大小
    let scene = earthCtrl.Viewer.scene;
    var width = scene.canvas.clientWidth;
    var height = scene.canvas.clientHeight;
    //获取画布中心两个像素的坐标（默认地图渲染在画布中心位置）
    var left = scene.camera.getPickRay(new SmartEarth.Cesium.Cartesian2((width / 2) | 0, (height - 1) / 2));
    var right = scene.camera.getPickRay(new SmartEarth.Cesium.Cartesian2(1 + (width / 2) | 0, (height - 1) / 2));

      var leftPosition = scene.globe.pick(left, scene);
      var rightPosition = scene.globe.pick(right, scene);
      if (!SmartEarth.Cesium.defined(leftPosition) || !SmartEarth.Cesium.defined(rightPosition)) {
        return;
      }
      const ellipsoid = SmartEarth.Cesium.Ellipsoid.MOON2000
      var leftCartographic = ellipsoid.cartesianToCartographic(leftPosition);
      var rightCartographic = ellipsoid.cartesianToCartographic(rightPosition);
      var geodesic = new SmartEarth.Cesium.EllipsoidGeodesic(leftCartographic, rightCartographic, ellipsoid);
      var distance = geodesic.surfaceDistance;// åˆ†è¾¨çŽ‡
      rate.value =distance.toFixed(2); //分辨率
    })
    var leftPosition = scene.globe.pick(left, scene);
    var rightPosition = scene.globe.pick(right, scene);
    if (!SmartEarth.Cesium.defined(leftPosition) || !SmartEarth.Cesium.defined(rightPosition)) {
      return;
    }
    const ellipsoid = SmartEarth.Cesium.Ellipsoid.MOON2000
    var leftCartographic = ellipsoid.cartesianToCartographic(leftPosition);
    var rightCartographic = ellipsoid.cartesianToCartographic(rightPosition);
    var geodesic = new SmartEarth.Cesium.EllipsoidGeodesic(leftCartographic, rightCartographic, ellipsoid);
    var distance = geodesic.surfaceDistance;// åˆ†è¾¨çŽ‡
    rate.value = distance.toFixed(2); //分辨率
  })
};
const gridSwitch = () => {
  server.showlonlatLine();
@@ -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) => {
    data.children.forEach(item => {
      if (item.children) {
        temp.push(item.id)
      } else {
        if (ids.indexOf(item.id) > -1) {
          temp.push(item.id)
    if (data.children) {
      data.children.forEach(item => {
        if (item.children) {
          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>
@@ -569,7 +463,7 @@
    }
  }
};
const handleClick = (tab: TabsPaneContext, event: Event) => {};
const handleClick = (tab: TabsPaneContext, event: Event) => { };
//   const setCloseplotting = () => {
//     emits("setCloseplotting", false);
//   };
@@ -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>