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

surprise

2023-10-19 9f51306b10520a2be30bedfe1b34c288cf770f43

 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;