修改标绘查询接口

WX

2023-09-14 87fc01b9305ddbd6d74ad3ac7d1d2560e26af399

 src/views/plotting/plottingInquire.vue

@@ -24,10 +24,7 @@
        >
          <!-- <el-tab-pane label="图层属性" name="first">User</el-tab-pane> -->
          <el-tab-pane label="查询结果" name="second">
            <div class="chart_box" v-if="chartIsshow">
              <Bar-graph :width="'100%'" :height="'260px'"></Bar-graph>
            </div>
            <div class="inquireContent_input" v-if="!chartIsshow">
            <div class="inquireContent_input" v-show="pixelIsShow">
              <!-- <div class="inquireContent_input_left">
                <div class="label">范围框</div>
                <el-input
@@ -38,7 +35,7 @@
                  <template #append>km</template>
                </el-input>
              </div> -->
              <div class="inquireContent_input_right" v-show="pixelIsShow">
              <div class="inquireContent_input_right" v-show="!chartIsshow">
                <div class="label">范围框内最大像素值</div>
                <el-select
                  v-model="ScopeBox.pixel"
@@ -48,7 +45,24 @@
                  @change="pixelChange"
                >
                  <el-option
                    v-for="item in options"
                    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"
@@ -56,6 +70,42 @@
                </el-select>
              </div>
            </div>
            <div class="chart" v-if="chartIsshow">
              <div class="chart_box">
                <div class="chart_btn">
                  <el-button
                    :icon="Search"
                    link
                    class="linkBtn"
                    @click="openDialog"
                  ></el-button>

                  <el-button :icon="Download" link class="linkBtn"></el-button>
                  <el-button
                    :icon="Delete"
                    link
                    class="del linkBtn"
                  ></el-button>
                </div>
                <Bar-graph :width="'100%'" :height="'260px'"></Bar-graph>
              </div>
              <div class="select_box">
                <el-select
                  v-model="layerValue"
                  class="m-2"
                  placeholder="选择图层"
                  size="small"
                >
                  <el-option
                    v-for="item in layeroptions"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  />
                </el-select>
              </div>
            </div>

            <div class="inquireContent_msg" v-if="!chartIsshow">
              <div class="inquireContent_msg_k">
                <span>提取的边界框</span>
@@ -89,12 +139,20 @@
                </div>
              </div>
            </div>
            <div class="download">
              <el-button link @click="download">下载 CSV</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="chart">
      <i @click.capture="closeDialog"
        ><el-icon><Close /></el-icon
      ></i>
      <BarGraphAxisLine :width="'856px'" :height="'636px'"></BarGraphAxisLine>
    </div>
  </div>
</template>
@@ -113,9 +171,11 @@
import { useStore } from "vuex"; // 引入useStore 方法
//echarts
import BarGraph from "@/components/BarGraph.vue";
import BarGraphAxisLine from "@/components/BarGraphAxisLine.vue";
import { saveFSDZJsonToExcel } from "@/utils/downloadCSV.js";
import { selectByPoint, selectByPolygon, selectByPolyline } from "@/api/api";
import { ElMessage } from "element-plus";
import { Search, Delete, Download } from "@element-plus/icons-vue";
const store = useStore(); // 该方法用于返回store 实例
const emits = defineEmits(["setCloseplotting"]);
let isShow = ref(false);
@@ -128,8 +188,24 @@
const ScopeBox = ref({
  Scop: "",
  pixel: "1",
  nodes: "16",
});
const options = [
let layerValue = ref("");
const layeroptions = [
  {
    value: "图层名称",
    label: "图层名称",
  },
  {
    value: "图层名称",
    label: "图层名称",
  },
  {
    value: "图层名称",
    label: "图层名称",
  },
];
const pixeloptions = [
  {
    value: "1",
    label: "1×1",
@@ -167,32 +243,103 @@
    label: "256×256",
  },
];
const nodesoptions = [
  {
    value: "16",
    label: "16",
  },
  {
    value: "32",
    label: "32",
  },
  {
    value: "64",
    label: "64",
  },
  {
    value: "96",
    label: "96",
  },
  {
    value: "128",
    label: "128",
  },
  {
    value: "192",
    label: "192",
  },
  {
    value: "256",
    label: "256",
  },
  {
    value: "384",
    label: "384",
  },
  {
    value: "512",
    label: "512",
  },
  {
    value: "768",
    label: "768",
  },
  {
    value: "1024",
    label: "1024",
  },
];
let resultList = ref([]);
let dialogShow = ref(false);
//关闭
const closeDialog = () => {
  dialogShow.value = false;
  // alert(1);
};
//打开
const openDialog = () => {
  dialogShow.value = true;
};
//像素选择
const pixelChange = (val) => {
  // if (store.state.plottingInquireData.entitiesData.icon == "d.png") {

  // }
  selectPoint({
    pixel: val,
    wkt: `POINT (${store.state.plottingInquireData.entitiesData.lng} ${store.state.plottingInquireData.entitiesData.lat})`,
    wkt: store.state.plottingInquireData.entitiesData.wkt,
  });
};
//节点选择
const nodesChange = (val) => {
  selectPolyline({
    nodes: val,
    wkt: store.state.plottingInquireData.entitiesData.wkt,
  });
};
//节点选择
//下载csv
const download = () => {
  saveFSDZJsonToExcel(resultList.value, "123", "");
};
//点查询接口
const selectPoint = async (res) => {
  resultList.value = [];
  const dt = await selectByPoint(res);

  if (dt.code !== 200) {
    return ElMessage.error("查询错误");
  }

  console.log(dt);
  dt.result.forEach((e) => {
    if (e.code != 200) {
      e.avg = "-";
      e.max = "-";
      e.min = "-";
    }
    e.avg = e.avgList.toString();
    e.max = e.maxList.toString();
    e.min = e.minList.toString();
    e.lng = store.state.plottingInquireData.entitiesData.lng;
    e.lat = store.state.plottingInquireData.entitiesData.lat;
    resultList.value.push(e);
@@ -200,6 +347,7 @@
};
//面查询接口
const selectPolygon = async (res) => {
  resultList.value = [];
  const dt = await selectByPolygon(res);

  dt.result.forEach((e) => {
@@ -208,6 +356,9 @@
      e.max = "-";
      e.min = "-";
    }
    e.avg = e.avgList.toString();
    e.max = e.maxList.toString();
    e.min = e.minList.toString();
    e.lng = store.state.plottingInquireData.entitiesData.lng;
    e.lat = store.state.plottingInquireData.entitiesData.lat;
    resultList.value.push(e);
@@ -217,6 +368,17 @@
const selectPolyline = async (res) => {
  const dt = await selectByPolyline(res);
  console.log(dt);
  // dt.result.forEach((e) => {
  //   if (e.code != 200) {
  //     e.avg = "-";
  //     e.max = "-";
  //     e.min = "-";
  //   }

  //   // e.lng = store.state.plottingInquireData.entitiesData.lng;
  //   // e.lat = store.state.plottingInquireData.entitiesData.lat;
  //   // resultList.value.push(e);
  // });
};
const setLayerLocation = () => {
  var entities = Viewer.entities._entities._array;
@@ -259,20 +421,21 @@
    inquireData.value = nVal.entitiesData;
    if (nVal.entitiesData.icon == "x.png") {
      chartIsshow.value = true;
      // selectPolyline({
      //   pixel: ScopeBox.value.pixel,
      //   wkt: `POINT (${nVal.entitiesData.lng})`,
      // })
      selectPolyline({
        nodes: ScopeBox.value.nodes,
        wkt: nVal.entitiesData.wkt,
      });
    }
    if (nVal.entitiesData.icon == "m.png") {
      chartIsshow.value = false;
      if (nVal.entitiesData.name == oVal.entitiesData.name) {
        return;
      }
      pixelIsShow.value = false;
      selectPolygon({ wkt: nVal.entitiesData.wkt });
      // console.log(nVal);
    }
    if (nVal.entitiesData.icon == "d.png") {
    if (nVal && nVal.entitiesData.icon == "d.png") {
      chartIsshow.value = false;
      selectPoint({
        pixel: ScopeBox.value.pixel,
        wkt: nVal.entitiesData.wkt,
@@ -503,6 +666,56 @@
        color: #d6e4ff;
      }
    }
    .chart {
      width: 100%;
    }
    .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 {
      display: flex;
      justify-content: center;
      padding-bottom: 20px;
    }
  }
}
.dialog {
  position: absolute;
  top: 0;
  height: 0;
  width: 100vw;
  height: 100vh;
  background-color: rgba(255, 255, 255, 0.4);
  z-index: 110;
  .chart {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: rgb(33, 37, 44);
    padding: 20px;
    i {
      position: absolute;
      right: 2px;
      top: 2px;
      color: #fff;
      font-size: 14px;
      cursor: pointer;
    }
  }
}
</style>