月球大数据地理空间分析展示平台-【前端】-月球2期前端
WX
2023-09-13 513e1bdf4b2703409d9e4dbb776e67ffa0c134a6
src/views/search/search.vue
@@ -5,29 +5,73 @@
        v-model="searchValue"
        class="searchInput"
        placeholder="请输入地名"
        :prefix-icon="Search"
        :clearable="true"
      />
      >
        <template #suffix>
          <el-icon
            title="清除"
            @click="setSearchClose"
            class="el-input__icon"
          >
            <Close />
          </el-icon>
        </template>
        <template #prefix>
          <el-icon
            @click="setSearchClick"
            title="查询"
            class="el-input__icon"
          >
            <search />
          </el-icon>
        </template>
      </el-input>
    </div>
    <div class="search_content">
      <el-collapse v-model="activeNames" @change="handleChange">
        <el-collapse-item title="查询结果" name="1">
          <div class="search_content_text">总查询结果:448</div>
    <div
      v-if="searchFLag"
      class="search_content"
    >
      <el-collapse
        v-model="activeNames"
        @change="handleChange"
      >
        <el-collapse-item
          title="查询结果"
          name="1"
        >
          <div class="search_content_text">总查询结果:{{ listData.count }}</div>
          <div class="search_content_text paging">
            总页数:45
            <el-button size="small" text :icon="DArrowLeft" class="pagingBtn" />
            <el-button size="small" text :icon="ArrowLeft" class="pagingBtn1" />
            <el-input class="numInput" v-model="num" />
            总页数:{{ listData.page }}
            <el-button
              size="small"
              text
              :icon="DArrowLeft"
              @click="setPageChange(1)"
              class="pagingBtn"
            />
            <el-button
              size="small"
              text
              :icon="ArrowLeft"
              class="pagingBtn1"
              @click="setPageChange(2)"
            />
            <el-input
              class="numInput"
              v-model.number="listData.pageIndex"
              @change="setInputCahgne"
            />
            <el-button
              size="small"
              text
              :icon="ArrowRight"
              class="pagingBtn1"
              @click="setPageChange(3)"
            />
            <el-button
              size="small"
              text
              :icon="DArrowRight"
              @click="setPageChange(4)"
              class="pagingBtn"
            />
          </div>
@@ -37,17 +81,13 @@
              <div class="table_th">地名</div>
            </div>
            <div class="table_childer">
              <div class="table_tr">
                <div class="table_th_x"></div>
                <div class="table_th"></div>
              </div>
              <div class="table_tr">
                <div class="table_th_x"></div>
                <div class="table_th"></div>
              </div>
              <div class="table_tr">
                <div class="table_th_x"></div>
                <div class="table_th"></div>
              <div
                class="table_tr"
                v-for="(item, flag) in tableData"
                @click="setPointLocal(item)"
              >
                <div class="table_th_x">{{ flag + 1 }}</div>
                <div class="table_th">{{ item.name }}</div>
              </div>
            </div>
          </div>
@@ -67,56 +107,136 @@
  defineEmits,
} from "vue";
import {
  Search,
  DArrowLeft,
  ArrowLeft,
  ArrowRight,
  DArrowRight,
} from "@element-plus/icons-vue";
// import config from "../../../public/config/config.js";
import { dataQuery_selectByPage } from "@/api/api.js";
import { ElMessage } from "element-plus";
let searchValue = ref("");
const searchFLag = ref(false);
const tableData = ref([]);
const activeNames = ref(["1"]);
const num = ref(1);
const NumhandleChange = (value: number) => {
  console.log(value);
const listData = ref({
  count: 0,
  page: 0,
  pageIndex: 1,
  pageSize: 10,
});
const imageLabel = null;
const NumhandleChange = (value: number) => {};
const handleChange = (val: string[]) => {};
const setPoitCannel = () => {
  if (imageLabel) {
    imageLabel.deleteObject();
    imageLabel = null;
  }
};
const handleChange = (val: string[]) => {
  console.log(val);
const setPointLocal = (res) => {
  if (imageLabel) {
    setPoitCannel();
  }
  var position = { X: res.lon, Y: res.lat, Altitude: 10 };
  imageLabel = window.sgworld.Creator.CreateImageLabel(
    position,
    config.StaticFileBaseUrl + "/Workers/image/location.png",
    {},
    0,
    "标签点"
  );
  var id = imageLabel.item.id;
  window.sgworld.Navigate.flyToObj(imageLabel.item);
  // window.earthCtrl.camera.flyTo(res.log, res.lat, 300, 9.5, -45, 0.0, 5);
};
const tableData = reactive([
  {
    date: "1",
    name: "Tom",
  },
  {
    date: "2",
    name: "Tom",
  },
  {
    date: "3",
    name: "Tom",
  },
  {
    date: "4",
    name: "Tom",
  },
]);
const setInputCahgne = () => {
  if (
    listData.value.pageIndex >= 1 &&
    listData.value.pageIndex <= listData.value.page
  ) {
  } else {
    return ElMessage("输出错误,无法查询");
  }
  setSearchClick();
};
const setPageChange = (res) => {
  switch (res) {
    case 1: //查询第一页
      listData.value.pageIndex = 1;
      break;
    case 2: //前一页
      if (listData.value.pageIndex > 1) {
        listData.value.pageIndex -= 1;
      } else {
        return;
      }
      break;
    case 3: //后一页
      if (listData.value.pageIndex < listData.value.page) {
        listData.value.pageIndex += 1;
      } else {
        return;
      }
      break;
    case 4: //查询最后一页
      listData.value.pageIndex = listData.value.page;
      break;
  }
  setSearchClick();
};
const setSearchClose = () => {
  searchFLag.value = false;
  searchValue.value = "";
  setPoitCannel();
};
const setSearchClick = async () => {
  if (!searchValue.value) return;
  var obj = {
    filter: "name like '" + searchValue.value + "'",
    pageIndex: listData.value.pageIndex,
    pageSize: listData.value.pageSize,
    name: "lunarplacename",
    hasGeom: 1,
  };
  const data = await dataQuery_selectByPage(obj);
  if (data.code != 200) {
    return ElMessage(data.msg);
  }
  tableData.value = data.result;
  listData.value.count = data.count;
  listData.value.page = Math.ceil(data.count / 10);
  searchFLag.value = true;
};
onMounted(() => {});
</script>
<style lang="less" scoped>
.searchBox {
  margin-left: 34px;
  // margin-left: 34px;
  // height: auto;
  position: absolute;
  top: 0;
  right: -270px;
  z-index: 101;
}
.searchInput {
  width: 222px;
  width: 243px;
  height: 35px;
  /deep/.el-input__icon {
    color: #d6e4ff;
  }
}
.search_content {
  margin-top: 8px;
  width: 222px;
  width: 243px;
  //   background: rgba(7, 8, 14, 0.8);
  border-radius: 4px;
  z-index: 40px;
  .el-collapse,
  /deep/ .el-collapse-item__wrap {
    border: 0;
@@ -143,7 +263,7 @@
    color: #d6e4ff;
  }
  .numInput {
    width: 49px;
    width: 70px;
    height: 23px;
    padding: 0 5px;
  }
@@ -210,6 +330,14 @@
      display: flex;
      background: #000000;
    }
    .table_tr:hover {
      .table_th {
        color: #409eff;
      }
      .table_th_x {
        color: #409eff;
      }
    }
    .table_tr:nth-child(2n) {
      background: #0e151f;
    }