标会查询页面

WX

2023-09-08 deaf4ddeccc554ce782213ebda24923158c23c5a

标会查询页面

 src/store/index.ts

@@ -35,8 +35,17 @@
    olLon: "0.00",
    olLat: "0.00",
    olZoom: 0,
    plottingInquireData: {
      isshow: false,
      entitiesData: {},
      getData: {},
    },
  },
  mutations: {
    // SET_plotting(state, obj) {
    //   console.log(obj);
    //   state.plottingInquireData = obj;
    // },
    //获取登录Code
    setLoginCode(state, num) {
      state.loginCode = num;
@@ -49,7 +58,7 @@
    },
    SET_TOKEN(state, token) {
      state.token = token;
      var obj = {
      const obj = {
        token: token,
        uname: state.uname,
      };

 src/views/Index.vue

@@ -1,6 +1,5 @@
<template>
  <div class="body_box">

    <export-map
      v-if="layerExportshow"
      @SETexportMap="SETexportMap"
@@ -13,21 +12,16 @@
      v-if="layerSpatialshow"
      @SETspatialClose="SETspatialClose"
    ></spatial-box>
    <coord-location
      v-if="layerLocationshow"
      @SETcoordClose="setCoordLocation"
    >
    <coord-location v-if="layerLocationshow" @SETcoordClose="setCoordLocation">
    </coord-location>
    <details-query v-if="store.state.details.showDetails">

    </details-query>
    <details-query v-if="store.state.details.showDetails"> </details-query>
    <div v-if="store.state.isShowMap">
      <map-view></map-view>
    </div>
    <div v-if="!store.state.isShowMap">
      <ol-map></ol-map>
    </div>

    <plotting-inquire></plotting-inquire>
  </div>
</template>

@@ -60,6 +54,8 @@
import detailsQuery from "@/views/query/detailsQuery.vue";
//出图列表
import exportList from "./export/exportList.vue";
//标绘查询
import plottingInquire from "./plotting/plottingInquire.vue";

import router from "@/router";
import { useStore } from "vuex"; // å¼•å…¥useStore æ–¹æ³•

 src/views/plotting/plotting.vue

@@ -1,14 +1,8 @@
<template>
  <div
    v-drag
    class="plottingBox"
  >
  <div v-drag class="plottingBox">
    <div class="plottingTitle">
      <div class="tileLeft">
        <div
          class="titleImg"
          @click="setCloseplotting"
        >
        <div class="titleImg" @click="setCloseplotting">
          <ArrowLeft />
        </div>
        <div class="titleLable">标绘查询</div>
@@ -18,18 +12,9 @@
      <div class="plotting_content_btn">
        <span class="plotting_content_title">标绘工具</span>
        <div class="plotting_btn">
          <div
            class="btn_box_d btn_box"
            @click="setMenuDraw('point')"
          ></div>
          <div
            class="btn_box_x btn_box"
            @click="setMenuDraw('polyline')"
          ></div>
          <div
            class="btn_box_m btn_box"
            @click="setMenuDraw('polygon')"
          ></div>
          <div class="btn_box_d btn_box" @click="setMenuDraw('point')"></div>
          <div class="btn_box_x btn_box" @click="setMenuDraw('polyline')"></div>
          <div class="btn_box_m btn_box" @click="setMenuDraw('polygon')"></div>
        </div>
      </div>
      <div class="plotting_list">
@@ -37,6 +22,7 @@
          class="plotting_list_tr"
          v-for="(item, i) in list"
          :key="i"
          @click.stop="resultShow(item)"
        >
          <div class="plotting_list_tr_name">
            <img
@@ -46,14 +32,8 @@
            /><span>{{ item.name }}</span>
          </div>
          <div class="plotting_list_tr_btn">
            <div
              class="tr_btn dw"
              @click="setLayerLocation(item)"
            ></div>
            <div
              class="tr_btn sc"
              @click="setLayerRemove(item)"
            ></div>
            <div class="tr_btn dw" @click.stop="setLayerLocation(item)"></div>
            <div class="tr_btn sc" @click.stop="setLayerRemove(item)"></div>
          </div>
        </div>
      </div>
@@ -70,8 +50,11 @@
  reactive,
  defineProps,
  defineEmits,
  watch,
} from "vue";
import { useStore } from "vuex"; // å¼•å…¥useStore æ–¹æ³•
const emits = defineEmits(["setCloseplotting"]);
const store = useStore(); // è¯¥æ–¹æ³•ç”¨äºŽè¿”回store å®žä¾‹
let list = ref([]);
const drawFlag = ref(null);
const plotNum = ref({
@@ -98,6 +81,12 @@
    if (entities[i].name == res.name) {
      Viewer.entities.remove(entities[i]);
      list.value.splice(i, 1);
      let obj = {
        isshow: false,
        entitiesData: {},
        getData: {},
      };
      store.state.plottingInquireData = obj;
      break;
    }
  }
@@ -217,6 +206,34 @@
const setCloseplotting = () => {
  emits("setCloseplotting", false);
};
const resultShow = (res) => {
  console.log(res);
  let obj = {
    isshow: true,
    entitiesData: res,
    getData: {},
  };
  // store.commit("SET_plotting", obj);
  store.state.plottingInquireData = obj;
};
watch(
  () => store.state.plottingInquireData,
  (nVal, oVal) => {
    if (nVal.isshow == false) {
      //列表删除联动
      if (nVal.entitiesData != {} && nVal.entitiesData.name) {
        for (var i in list.value) {
          if (list.value[i].name == nVal.entitiesData.name) {
            console.log(list.value[i].name);
            list.value.splice(i, 1);
            break;
          }
        }
      }
    }
  },
  { deep: true }
);
</script>

<style lang="less" scoped>
@@ -322,6 +339,7 @@
      align-items: center;
      justify-content: space-between;
      padding: 0 25px;
      cursor: pointer;
      .plotting_list_tr_name {
        display: flex;
        align-items: center;

 src/views/plotting/plottingInquire.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,403 @@
<template>
  <div class="plottingInquire" v-if="isShow">
    <div class="InquireHeader">标绘查询</div>
    <div class="inquireContent">
      <div class="inquireContent_title">用户新建要素</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>
        </div>
        <div class="plotting_list_tr_btn">
          <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-tab-pane label="图层属性" name="first">User</el-tab-pane> -->
          <el-tab-pane label="查询结果" name="second">
            <div class="inquireContent_input">
              <div class="inquireContent_input_left">
                <div class="label">范围框</div>
                <el-input
                  v-model="ScopeBox.Scop"
                  size="small"
                  placeholder="范围框"
                >
                  <template #append>km</template>
                </el-input>
              </div>
              <div class="inquireContent_input_right">
                <div class="label">范围框内最大像素值</div>
                <el-select
                  v-model="ScopeBox.pixel"
                  class="m-2"
                  placeholder="像素值"
                  size="small"
                >
                  <el-option
                    v-for="item in options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  />
                </el-select>
              </div>
            </div>
            <div class="inquireContent_msg">
              <div class="inquireContent_msg_k">
                <span>提取的边界框</span>
                <span>{{ ScopeBox.pixel }}</span>
              </div>
              <div class="inquireContent_msg_k">
                <span>使用</span>
                <span
                  >{{ ScopeBox.Scop * 1000 }}.00,{{ ScopeBox.Scop * 1000 }}.00
                  m/px</span
                >
              </div>
            </div>
            <div class="inquireContent_table">
              <div class="table">
                <div class="table_head">
                  <div class="table_head_td">序号</div>
                  <div class="table_head_td">
                    <span> å›¾å±‚名 </span>
                    <span> åˆ†æžç»“æžœ </span>
                  </div>
                </div>
                <div class="table_content">
                  <div class="table_tr">
                    <div class="table_td">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>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </el-tab-pane>
        </el-tabs>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import menuTool from "@/assets/js/Map/menuTool";
import {
  ref,
  onMounted,
  onBeforeUnmount,
  reactive,
  defineProps,
  defineEmits,
  watch,
} from "vue";
import { useStore } from "vuex"; // å¼•å…¥useStore æ–¹æ³•
const store = useStore(); // è¯¥æ–¹æ³•ç”¨äºŽè¿”回store å®žä¾‹
const emits = defineEmits(["setCloseplotting"]);
let isShow = ref(false);
let inquireData = ref({
  name: "path #9",
  icon: "d.png",
});
const activeName = ref("second");
const ScopeBox = ref({
  Scop: "",
  pixel: "",
});
const options = [
  {
    value: "1×1",
    label: "1×1",
  },
  {
    value: "2×2",
    label: "2×2",
  },
  {
    value: "4×4",
    label: "4×4",
  },
  {
    value: "8×8",
    label: "8×8",
  },
  {
    value: "16×16",
    label: "16×16",
  },
  {
    value: "32×32",
    label: "32×32",
  },
  {
    value: "64×64",
    label: "64×64",
  },
  {
    value: "Option3",
    label: "Option3",
  },
  {
    value: "128×128",
    label: "128×128",
  },
  {
    value: "256×256",
    label: "256×256",
  },
];
const setLayerLocation = () => {
  var entities = Viewer.entities._entities._array;
  for (var i in entities) {
    if (entities[i].name == inquireData.value.name) {
      Viewer.zoomTo(entities[i]);
      break;
    }
  }
};
const setLayerRemove = () => {
  var entities = Viewer.entities._entities._array;
  for (var i in entities) {
    if (entities[i].name == inquireData.value.name) {
      Viewer.entities.remove(entities[i]);
      //   inquireData.value = {};
      let obj = {
        isshow: false,
        entitiesData: { name: inquireData.value.name },
        getData: {},
      };
      //   store.commit("SET_plotting", obj);
      store.state.plottingInquireData = obj;
      isShow.value = false;
      break;
    }
  }
};
const handleClick = (tab: TabsPaneContext, event: Event) => {
  console.log(tab, event);
};
//   const setCloseplotting = () => {
//     emits("setCloseplotting", false);
//   };
watch(
  () => store.state.plottingInquireData,
  (nVal, oVal) => {
    isShow.value = nVal.isshow;
    inquireData.value = nVal.entitiesData;
  },
  { deep: true }
);
</script>

<style lang="less" scoped>
.plottingInquire {
  position: absolute;
  right: 26px;
  top: 80px;
  width: 320px;
  background: rgba(7, 8, 14, 0.8);
  z-index: 100;
  .InquireHeader {
    width: 100%;
    height: 35px;
    background: #0e151f;
    box-shadow: 0px 0px 6px 0px #080c13,
      0px 14px 16px 0px rgba(38, 47, 71, 0.68);
    font-size: 16px;
    font-weight: 400;
    color: #d6e4ff;
    padding: 10px;
    box-sizing: border-box;
  }
  .inquireContent {
    .inquireContent_title {
      font-size: 14px;
      font-weight: 400;
      color: #d6e4ff;
      margin-bottom: 15px;
      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;
          color: #ffffff;
          margin-left: 10px;
        }
      }
      .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;
      align-items: center;
      margin-left: 10px;
      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;
        color: #d6e4ff;
        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;
          color: rgba(214, 228, 255, 0.8);
        }
      }
    }
    .inquireContent_table {
      padding-right: 15px;
      padding-left: 15px;
      padding-bottom: 14px;
      .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;
          //   box-shadow: 0px 0px 6px 0px #080c13,
          //     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;
            font-weight: 400;
            color: #d6e4ff;
            display: flex;
            justify-content: center;
            align-items: center;
            border-right: 1px solid rgba(214, 228, 255, 0.4);
          }
          .table_head_td:nth-child(2) {
            width: 237px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0 10px;
            border-right: 0;
          }
        }
        .table_content {
          height: 440px;
          overflow: auto;
          .table_tr {
            height: 27px;
            display: flex;
            background: #000000;
            .table_td {
              width: 50px;
              font-size: 14px;
              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;
            }
            .table_td:nth-child(2) {
              width: 237px;
              display: flex;
              justify-content: space-between;
              align-items: center;
              padding: 0 10px;
              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);
        }
      }
    }
  }
}
</style>