标绘贴地

WX

2023-09-14 5d0ad67a45c25938c0ee890083ddb5aa4b97cd40

 src/views/plotting/plottingInquire.vue

@@ -45,7 +45,7 @@
                  @change="pixelChange"
                >
                  <el-option
                    v-for="item in options"
                    v-for="item in pixeloptions"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
@@ -53,9 +53,42 @@
                </el-select>
              </div>
            </div>
            <div class="chart_box" v-if="chartIsshow">
              <Bar-graph :width="'100%'" :height="'260px'"></Bar-graph>
            <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>
@@ -97,6 +130,14 @@
      </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>

<script lang="ts" setup>
@@ -113,9 +154,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);
@@ -129,7 +172,22 @@
  Scop: "",
  pixel: "1",
});
const options = [
let layerValue = ref("");
const layeroptions = [
  {
    value: "图层名称",
    label: "图层名称",
  },
  {
    value: "图层名称",
    label: "图层名称",
  },
  {
    value: "图层名称",
    label: "图层名称",
  },
];
const pixeloptions = [
  {
    value: "1",
    label: "1×1",
@@ -168,6 +226,16 @@
  },
];
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") {
@@ -279,6 +347,7 @@
      });
    }
    if (nVal.entitiesData.icon == "m.png") {
      chartIsshow.value = false;
      if (nVal.entitiesData.name == oVal.entitiesData.name) {
        return;
      }
@@ -286,6 +355,7 @@
      selectPolygon({ wkt: nVal.entitiesData.wkt });
    }
    if (nVal && nVal.entitiesData.icon == "d.png") {
      chartIsshow.value = false;
      selectPoint({
        pixel: ScopeBox.value.pixel,
        wkt: nVal.entitiesData.wkt,
@@ -516,6 +586,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>