月球大数据地理空间分析展示平台-【前端】-月球2期前端
surprise
2023-11-29 36fbd1e5a40e319e6ac5f43d11c99ba4b66e93a3
src/views/plotting/plottingInquire.vue
@@ -44,36 +44,14 @@
              </div>-->
              <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="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>
@@ -82,12 +60,7 @@
                <div class="chart_btn">
                  <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"
@@ -98,19 +71,9 @@
                </div>
                <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>
@@ -147,6 +110,8 @@
                  <div class="table_head_td">序号</div>
                  <div class="table_head_td">
                    <span>图层名</span>
                    <span>最大值</span>
                    <span>最小值</span>
                    <span>分析结果</span>
                  </div>
                </div>
@@ -154,7 +119,10 @@
                  <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>
                      <span>{{ e.layerName }} <label v-show="e.unit"> [{{ e.unit }}]</label></span>
                      <span>{{ e.max }}</span>
                      <span>{{ e.min }}</span>
                      <span>{{ e.avg }}</span>
                    </div>
                  </div>
@@ -425,6 +393,7 @@
    resultList.value.push(e);
  });
  console.log(resultList.value);
};
//面查询接口
@@ -515,7 +484,7 @@
      };
      //   store.commit("SET_plotting", obj);
      store.state.plottingInquireData = obj;
      setCloseWebSocket();
      inquireData.value = {
        name: "path #9",
@@ -526,7 +495,7 @@
    }
  }
};
const handleClick = (tab: TabsPaneContext, event: Event) => {};
const handleClick = (tab: TabsPaneContext, event: Event) => { };
//   const setCloseplotting = () => {
//     emits("setCloseplotting", false);
//   };
@@ -560,10 +529,11 @@
  }
};
const setOptionStart = () => {
  resultList.value = [];
  layerArr.value = [];
  layeroptions.value = [];
  layerValue.value = '';
};
const setWebSocketStart = () => {
  // if (Window.ws) {
@@ -573,7 +543,7 @@
  var token = getToken();
  var url = socketUrl + "?token=" + token;
  Window.ws = new WebSocket(url);
  Window.ws.option = () => {};
  Window.ws.option = () => { };
  Window.ws.onmessage = (msg) => {
    // console.log('来自服务器端的数据:' + msg.data); //监听接受来自服务端的信息
    if (msg.data != "连接成功") {
@@ -581,6 +551,7 @@
      if (val.analysisForPost && val.analysisForPost.token == token) {
        var data = val.analysisForPost;
        console.log(data)
        switch (wktType.value) {
          case "Point":
            setWebSocketPoint(data);
@@ -604,6 +575,7 @@
    min: res.minList.length <= 0 ? "--" : res.minList.toString(),
    lng: store.state.plottingInquireData.entitiesData.lng,
    lat: store.state.plottingInquireData.entitiesData.lat,
    unit: res.unit
  };
  resultList.value.push(obj);
};
@@ -622,8 +594,9 @@
watch(
  () => store.state.plottingInquireData,
  (nVal, oVal) => {
    if (!nVal) return;
    setOptionStart();
    setCloseWebSocket();
    if (!nVal) return;
    if (nVal.entitiesData.name != inquireData.value.name) {
      isShow.value = nVal.isshow;
      inquireData.value = nVal.entitiesData;
@@ -686,7 +659,7 @@
  position: absolute;
  right: 26px;
  top: 80px;
  width: 320px;
  width: 400px;
  background: rgba(7, 8, 14, 0.8);
  z-index: 100;
@@ -854,7 +827,7 @@
          }
          .table_head_td:nth-child(2) {
            width: 237px;
            width: 16.34375vw;
            display: flex;
            justify-content: space-between;
            align-items: center;
@@ -885,11 +858,18 @@
              border-right: 1px solid rgba(214, 228, 255, 0.4);
              box-sizing: border-box;
              div {
                width: 100%;
                background: skyblue;
                height: 100%;
              }
              // padding: 5px;
              // white-space: nowrap;
              span {
                display: block;
                width: 50%;
                width: 17%;
                word-wrap: break-word;
                // white-space: pre;
                text-align: left;
@@ -900,21 +880,18 @@
                // justify-content: flex-end;
                // margin-left: 5%;
                //  float: right;
                width: 40%;
                text-align: right;
                // width:16.34375vw;
                text-align: center;
                // background: skyblue;
              }
            }
            .table_td:nth-child(2) {
              width: 237px;
              width: 16.34375vw;
              display: flex;
              justify-content: space-between;
              align-items: center;
              // padding: 0 10px;
              padding-left: 10px;
              padding-right: 10px;
              padding-top: 5px;
              padding-bottom: 5px;
              padding: 0 10px;
              border-right: 0;
            }
          }