点面标绘查询

WX

2023-09-13 051f46b4ee09ef92df932a5463f5f6bffa1e2274

 src/views/plotting/plottingInquire.vue

@@ -28,7 +28,7 @@
              <Bar-graph :width="'100%'" :height="'260px'"></Bar-graph>
            </div>
            <div class="inquireContent_input" v-if="!chartIsshow">
              <div class="inquireContent_input_left">
              <!-- <div class="inquireContent_input_left">
                <div class="label">范围框</div>
                <el-input
                  v-model="ScopeBox.Scop"
@@ -37,14 +37,15 @@
                >
                  <template #append>km</template>
                </el-input>
              </div>
              <div class="inquireContent_input_right">
              </div> -->
              <div class="inquireContent_input_right" v-show="pixelIsShow">
                <div class="label">范围框内最大像素值</div>
                <el-select
                  v-model="ScopeBox.pixel"
                  class="m-2"
                  placeholder="像素值"
                  size="small"
                  @change="pixelChange"
                >
                  <el-option
                    v-for="item in options"
@@ -58,15 +59,15 @@
            <div class="inquireContent_msg" v-if="!chartIsshow">
              <div class="inquireContent_msg_k">
                <span>提取的边界框</span>
                <span>{{ ScopeBox.pixel }}</span>
                <span>{{ ScopeBox.pixel }}×{{ ScopeBox.pixel }}</span>
              </div>
              <div class="inquireContent_msg_k">
              <!-- <div class="inquireContent_msg_k">
                <span>使用</span>
                <span
                  >{{ ScopeBox.Scop * 1000 }}.00,{{ ScopeBox.Scop * 1000 }}.00
                  m/px</span
                >
              </div>
              </div> -->
            </div>
            <div class="inquireContent_table" v-if="!chartIsshow">
              <div class="table">
@@ -78,22 +79,18 @@
                  </div>
                </div>
                <div class="table_content">
                  <div class="table_tr">
                    <div class="table_td">1</div>
                  <div class="table_tr" v-for="(e, i) in resultList" :key="i">
                    <div class="table_td">{{ i + 1 }}</div>
                    <div class="table_td">
                      <span> 平均地球能见度120m [1]: </span>
                      <span> 112.993 </span>
                    </div>
                  </div>
                  <div class="table_tr">
                    <div class="table_td">2</div>
                    <div class="table_td">
                      <span> 平均地球能见度120m [1]: </span>
                      <span> 112.993 </span>
                      <span> {{ e.layerName }}</span>
                      <span> {{ e.avg }}</span>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="download">
              <el-button link @click="download">下载 CSV</el-button>
            </div>
          </el-tab-pane>
        </el-tabs>
@@ -116,9 +113,13 @@
import { useStore } from "vuex"; // 引入useStore 方法
//echarts
import BarGraph from "@/components/BarGraph.vue";
import { saveFSDZJsonToExcel } from "@/utils/downloadCSV.js";
import { selectByPoint, selectByPolygon, selectByPolyline } from "@/api/api";
import { ElMessage } from "element-plus";
const store = useStore(); // 该方法用于返回store 实例
const emits = defineEmits(["setCloseplotting"]);
let isShow = ref(false);
let pixelIsShow = ref(true);
let inquireData = ref({
  name: "path #9",
  icon: "d.png",
@@ -126,50 +127,97 @@
const activeName = ref("second");
const ScopeBox = ref({
  Scop: "",
  pixel: "",
  pixel: "1",
});
const options = [
  {
    value: "1×1",
    value: "1",
    label: "1×1",
  },
  {
    value: "2×2",
    value: "2",
    label: "2×2",
  },
  {
    value: "4×4",
    value: "4",
    label: "4×4",
  },
  {
    value: "8×8",
    value: "8",
    label: "8×8",
  },
  {
    value: "16×16",
    value: "16",
    label: "16×16",
  },
  {
    value: "32×32",
    value: "32",
    label: "32×32",
  },
  {
    value: "64×64",
    value: "64",
    label: "64×64",
  },
  {
    value: "Option3",
    label: "Option3",
  },
  {
    value: "128×128",
    value: "128",
    label: "128×128",
  },
  {
    value: "256×256",
    value: "256",
    label: "256×256",
  },
];
let resultList = ref([]);
//像素选择
const pixelChange = (val) => {
  selectPoint({
    pixel: val,
    wkt: `POINT (${store.state.plottingInquireData.entitiesData.lng} ${store.state.plottingInquireData.entitiesData.lat})`,
  });
};
//下载csv
const download = () => {
  saveFSDZJsonToExcel(resultList.value, "123", "");
};
//点查询接口
const selectPoint = async (res) => {
  const dt = await selectByPoint(res);

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

  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 selectPolygon = async (res) => {
  const dt = await selectByPolygon(res);

  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 selectPolyline = async (res) => {
  const dt = await selectByPolyline(res);
  console.log(dt);
};
const setLayerLocation = () => {
  var entities = Viewer.entities._entities._array;
  for (var i in entities) {
@@ -211,6 +259,24 @@
    inquireData.value = nVal.entitiesData;
    if (nVal.entitiesData.icon == "x.png") {
      chartIsshow.value = true;
      // selectPolyline({
      //   pixel: ScopeBox.value.pixel,
      //   wkt: `POINT (${nVal.entitiesData.lng})`,
      // })
    }
    if (nVal.entitiesData.icon == "m.png") {
      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") {
      selectPoint({
        pixel: ScopeBox.value.pixel,
        wkt: nVal.entitiesData.wkt,
      });
    }
  },
  { deep: true }
@@ -332,7 +398,7 @@
    .inquireContent_table {
      padding-right: 15px;
      padding-left: 15px;
      padding-bottom: 14px;
      padding-bottom: 10px;
      .table {
        background: rgba(0, 0, 0, 0, 4);
        border: 1px solid rgba(214, 228, 255, 0.4);
@@ -353,6 +419,7 @@
            justify-content: center;
            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;
@@ -367,26 +434,44 @@
          height: 440px;
          overflow: auto;
          .table_tr {
            height: 27px;
            // height: 27px;
            display: flex;
            background: #000000;
            // padding: 5px 0;
            .table_td {
              width: 50px;
              font-size: 14px;

              font-size: 12px;
              font-weight: 400;
              color: #d6e4ff;
              display: flex;
              justify-content: center;
              align-items: center;
              border-right: 1px solid rgba(214, 228, 255, 0.4);
              white-space: nowrap;
              box-sizing: border-box;
              // padding: 5px;
              // white-space: nowrap;
              span {
                display: block;
                width: 50%;
                word-wrap: break-word;
                // white-space: pre;
              }
              span:nth-child(2) {
                display: flex;
                justify-content: flex-end;
              }
            }
            .table_td:nth-child(2) {
              width: 237px;
              display: flex;
              justify-content: space-between;
              align-items: center;
              padding: 0 10px;
              // padding: 0 10px;
              padding-left: 10px;
              padding-right: 10px;
              padding-top: 5px;
              padding-bottom: 5px;
              border-right: 0;
            }
          }
@@ -407,6 +492,17 @@
        }
      }
    }
    .download {
      padding-right: 15px;
      padding-left: 15px;
      padding-bottom: 14px;
      display: flex;
      justify-content: flex-end;
      .el-button {
        font-size: 12px;
        color: #d6e4ff;
      }
    }
  }
}
</style>