Преглед изворни кода

书签管理相关界面提交

wanger пре 1 година
родитељ
комит
39ff828384

+ 27 - 0
src/api/map.js

@@ -48,4 +48,31 @@ export function GetXzqhGeom(id) {
         url: '/apply/yzt/xzq/GetGeom?id=' + id,
         method: 'get'
     })
+}
+
+// 书签查询
+export function BookmarkList(data) {
+    return request({
+        url: '/apply/yzt/search/bookmark',
+        method: 'post',
+        data: data
+    })
+}
+
+// 书签新增
+export function BookmarkAdd(data) {
+    return request({
+        url: '/apply/yzt/search/bookmarkAdd',
+        method: 'post',
+        data: data
+    })
+}
+
+// 书签删除
+export function BookmarkDel(data) {
+    return request({
+        url: '/apply/yzt/search/bookmarkDel',
+        method: 'post',
+        data: data
+    })
 }

+ 6 - 2
src/common/scss/globe.scss

@@ -42,7 +42,7 @@ div {
     z-index: 99;
     cursor: pointer;
     // border: 1px solid #526f82;
-    background: url(/static/images/bigscreen/site-bg.png) no-repeat;
+    background: url(/static/images/popup/background.png) no-repeat;
     background-size: 100% 100%;
     background-position: center;
     //overflow: hidden;
@@ -133,6 +133,9 @@ div {
     padding-left: 15px;
     font-size: 15px;
     border-bottom: 1px solid rgba(38, 38, 38, 0.6);
+    background: url(/static/images/popup/title.png) no-repeat;
+    background-size: 100% 100%;
+    background-position: center;
     @media (max-width: 750px) {
         // height: 35px;
         line-height: 35px;
@@ -155,7 +158,7 @@ div {
 
 .sm-function-module-content {
     // margin: 0.5rem 1rem 1rem 1rem;
-    padding: 5px 10px;
+    // padding: 5px 10px;
     overflow: auto;
     max-height: 528px;
     // background-color: rgba(23, 23, 23, 0.5);
@@ -787,6 +790,7 @@ input[type="range"]::-moz-range-thumb {
 }
 
 .flexbox {
+    padding: 2px 6px 0px 6px;
     display: flex;
     align-items: baseline;
     justify-content: space-between;

+ 233 - 0
src/components/Bookmark/Bookmark.vue

@@ -0,0 +1,233 @@
+<template>
+  <div class="sm-panel sm-function-module-content" v-if="BookmarkShow">
+    <div class="sm-panel-header">
+      <span>{{ Resource.BookMark }}</span>
+      <span class="closeBtn" @click="toggleVisibility">&times;</span>
+    </div>
+    <div class="flexbox">
+      <el-input
+        placeholder="请输入查询关键字"
+        prefix-icon="el-icon-search"
+        v-model="bookmarkSearchText"
+        size="small"
+      >
+      </el-input>
+      <el-button
+        @click="dialogVisible = true"
+        type="primary"
+        size="small"
+        style="margin-left: 5px"
+        >添加</el-button
+      >
+      <el-button
+        @click="clear"
+        type="primary"
+        size="small"
+        style="margin-left: 5px"
+        >清除</el-button
+      >
+    </div>
+    <div class="flexbox" style="height: 260px; width: 100%">
+      <el-table
+        :show-header="false"
+        :data="tableData"
+        height="260"
+        border
+        style="width: 100%"
+        @row-click="handleRowClick"
+      >
+        <el-table-column prop="name" label="名称" width="230">
+        </el-table-column>
+        <el-table-column fixed="right" label="操作" width="80">
+          <template slot-scope="scope">
+            <el-button
+              @click.stop="handleClickDel(scope.row)"
+              type="primary"
+              size="small"
+              >删除</el-button
+            >
+          </template>
+        </el-table-column>
+      </el-table>
+    </div>
+    <div>
+      <el-pagination
+        @size-change="handleSizeChange"
+        @current-change="handlePageChange"
+        :current-page="page"
+        :page-sizes="[10, 20, 50, 100]"
+        :page-size="size"
+        layout="total, sizes, prev, next"
+        :total="total"
+      >
+      </el-pagination>
+    </div>
+    <el-dialog title="书签信息" :visible.sync="dialogVisible" width="300px">
+      <el-form ref="form" :model="form" label-width="80px" :rules="rules">
+        <el-form-item label="书签名称" prop="name">
+          <el-input v-model="form.name"></el-input>
+        </el-form-item>
+        <el-button type="primary" size="mini" @click="onSubmit('form')"
+          >保存</el-button
+        >
+        <el-button size="mini" @click="dialogVisible = false">取消</el-button>
+      </el-form>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import { BookmarkList, BookmarkAdd, BookmarkDel } from "@/api/map";
+export default {
+  name: "Bookmark",
+  data() {
+    return {
+      tableData: [],
+      bookmarkSearchText: "",
+      MapViewer: window.viewer,
+      total: 100,
+      page: 1,
+      size: 10,
+      billboardHeight: 10,
+      type: "bookmark",
+      dialogVisible: false,
+      form: {
+        name: "",
+        type: "bookmark",
+        info: "",
+      },
+      rules: {
+        name: [{ required: true, message: "请输入书签名称", trigger: "blur" }],
+      },
+    };
+  },
+  created() {},
+  mounted() {
+    this.bookmarkquery();
+  },
+  computed: {
+    BookmarkShow() {
+      return store.state.toolBar[11];
+    },
+  },
+  methods: {
+    toggleVisibility() {
+      store.setToolBarAction(11);
+      this.clear();
+    },
+    handlePageChange(cur, a, b) {
+      this.page = cur;
+      this.bookmarkquery();
+    },
+    handleSizeChange(cur, a, b) {
+      this.size = cur;
+      this.bookmarkquery();
+    },
+    bookmarkquery() {
+      BookmarkList({
+        name: this.bookmarkSearchText,
+        type: this.type,
+        limit: this.size,
+        offset: (this.page - 1) * this.size,
+      }).then((res) => {
+        if (res.statuscode == 200) {
+          this.total = res.data.count;
+          this.tableData = res.data.data;
+        } else {
+          this.$message.error(e);
+        }
+      });
+    },
+    handleClickDel(item) {
+      console.log(item);
+      this.$alert("确定删除吗?", "提示", {
+        confirmButtonText: "确定",
+        callback: (action) => {
+          if (action != "cancel") {
+            BookmarkDel({ id: item.id }).then((res) => {
+              if (res.statuscode == 200) {
+                this.$message.success(res.message);
+                this.bookmarkquery();
+              } else {
+                this.$message.error(res.message);
+              }
+            });
+          }
+        },
+      });
+    },
+    onSubmit(item) {
+      this.$refs[item].validate((valid) => {
+        let param = JSON.stringify({
+          camera: JSON.stringify({
+            position: viewer.camera.position,
+            heading: viewer.camera.heading,
+            roll: viewer.camera.roll,
+            pitch: viewer.camera.pitch,
+          }),
+          name: this.form.name,
+        });
+        this.form.info = param;
+        BookmarkAdd(this.form).then((res) => {
+          if (res.statuscode == 200) {
+            this.$message.success(res.message);
+            this.dialogVisible = false;
+            this.bookmarkquery();
+          } else {
+            this.$message.error(res.message);
+          }
+        });
+      });
+    },
+    clear() {
+      viewer.entities.removeAll();
+      this.bookmarkSearchText = "";
+    },
+    handleRowClick(row) {
+      let camera = JSON.parse(JSON.parse(row.info).camera);
+      viewer.camera.flyTo({
+        destination: new Cesium.Cartesian3(
+          camera.position.x,
+          camera.position.y,
+          camera.position.z
+        ),
+        orientation: {
+          heading: camera.heading, //绕垂直于地心的轴旋转
+          pitch: camera.pitch, //绕纬度线旋转
+          roll: camera.roll,
+        },
+        duration: 3,
+      });
+    },
+    /**
+     * 飞行定位
+     * @param {{destination:object,orientation:object|undefined}} param0
+     * @param {boolean} isLonLat -是否是经纬度坐标
+     */
+    flyTo({ destination, orientation }, isLonLat = false) {
+      if (isLonLat)
+        destination = Cesium.Cartesian3.fromDegrees(
+          destination.x,
+          destination.y,
+          destination.z || 0
+        );
+
+      viewer.camera.flyTo({
+        destination,
+        orientation,
+      });
+    },
+  },
+  watch: {
+    bookmarkSearchText: function () {
+      this.page = 1;
+      this.bookmarkquery();
+    },
+  },
+};
+</script>
+<style scoped>
+.el-input__inner {
+  color: black !important;
+}
+</style>

+ 2 - 0
src/components/Bookmark/index.js

@@ -0,0 +1,2 @@
+import Bookmark from './Bookmark.vue';
+export default Bookmark;

+ 10 - 3
src/components/Combinations/toolBar/toolBar.vue

@@ -34,6 +34,13 @@
       >
         <i class="el-icon-place"></i>
       </li>
+      <li
+        class="sm-btn sm-tool-btn"
+        :title="Resource.BookMark"
+        @click="choose(11)"
+      >
+        <i class="el-icon-notebook-2"></i>
+      </li>
       <li
         class="sm-btn sm-tool-btn"
         :title="Resource.measure"
@@ -90,6 +97,7 @@
       </div>
     </div>
     <!-- 调用子组件-->
+    <Bookmark></Bookmark>
     <layer-manage></layer-manage>
     <add-layers></add-layers>
     <add-base-layer></add-base-layer>
@@ -107,11 +115,9 @@
     <scan-effect></scan-effect>
     <wind-particle></wind-particle>
     <placename-location
-      class="sm-panel"
       style="width: 400px; height: 400px; z-index: 999999"
     ></placename-location>
     <click-query
-      class="sm-panel"
       style="width: 400px; height: 700px; z-index: 999999"
     ></click-query>
   </div>
@@ -120,8 +126,9 @@
 <script>
 import clickQuery from "../../Query/clickQuery/clickQuery.vue";
 import { GetXzqhTree, GetXzqhGeom } from "@/api/map";
+import Bookmark from "../../Bookmark/Bookmark.vue";
 export default {
-  components: { clickQuery },
+  components: { clickQuery, Bookmark },
   name: "ToolBar",
   props: {},
   data() {

+ 1 - 1
src/components/Query/PlacenameLocation/PlacenameLocation.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="sm-function-module-content" v-if="PlacenameLocationShow">
+  <div class="sm-panel sm-function-module-content" v-if="PlacenameLocationShow">
     <div class="sm-panel-header">
       <span>{{ Resource.PlacenameLocation }}</span>
       <span class="closeBtn" @click="toggleVisibility">&times;</span>

+ 4 - 2
src/components/Query/clickQuery/clickQuery.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="sm-function-module-query" v-if="PoinyQueryShow">
+  <div class="sm-panel sm-function-module-query" v-if="PoinyQueryShow">
     <div class="sm-panel-header">
       <span>{{ Resource.PoinyQuery }}</span>
       <span class="closeBtn" @click="toggleVisibility">&times;</span>
@@ -448,15 +448,17 @@ export default {
 }
 .sm-function-module-content-tabs {
   height: 45px;
+  padding: 1px 5px 0px 5px;
 }
 
 .sm-function-module-content-table {
   height: 564px;
   overflow-y: auto;
+  padding: 1px 5px 0px 5px;
 }
 
 .sm-function-module-query {
-  padding: 5px 10px;
+  /* padding: 5px 10px; */
   overflow: hidden;
   max-height: 700px;
   scrollbar-width: none;

+ 3 - 0
src/components/index.js

@@ -18,6 +18,7 @@ import ViewShed from "./3DAnalysis/ViewShed/index.js";
 //查询
 import clickQuery from "./Query/clickQuery/index.js";
 import PlacenameLocation from './Query/PlacenameLocation/index.js';
+import Bookmark from './Bookmark/index.js';
 
 //添加图层功能组件
 import WebServicePan from "./addLayer/WebServicePan/index";
@@ -94,8 +95,10 @@ const components = [
     viewer,
     cockpit,
     bigScreen,
+    //查询
     clickQuery,
     PlacenameLocation,
+    Bookmark,
     //分析
     Profile3D,
     ShadowQuery,

+ 1 - 0
src/resource/resourceCN.js

@@ -5,6 +5,7 @@
         InputPlaceholder: "请输入查询关键字",
         PoinyQuery: "数据查询",
         PlacenameLocation: "兴趣点查询",
+        BookMark: "书签",
         LayerManage: "数据资源目录",
         LayerOptions: "图层管理",
         Favorite: "个人收藏",

+ 2 - 2
src/store/store.js

@@ -6,7 +6,7 @@ var store2 = {
         // 控制界面显隐,0默认隐藏,1显示
         ToolBarShow: false,
         toolBarActive: 0,
-        toolBar: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
+        toolBar: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
         addLayer: [1, 0, 0],
         sceneAtttribute: [1, 0, 0, 0, 0],
         terrain: [1, 0, 0, 0],
@@ -71,7 +71,7 @@ var store2 = {
         this.state.toolBar = [...this.state.toolBar];
     },
     hideToolBar(newValue) {
-        this.state.toolBar = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0];
+        this.state.toolBar = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0];
     },
     // 设置各功能组件子组件显隐
     setAddLayerAction(newValue) {

+ 25 - 2
static/css/index.css

@@ -80,6 +80,29 @@ div::-webkit-scrollbar-track {
     background: #2a4fd1b3;
 }
 
-.messageIndex {
-    z-index: 300000000 !important;
+.messageIndex,
+.el-message {
+    z-index: 300000000000 !important;
+}
+
+.el-dialog {
+    background: transparent !important;
+    background: url(/static/images/popup/background.png) no-repeat !important;
+    background-size: 100% 100% !important;
+    background-position: center !important;
+}
+
+.el-dialog__title,
+.el-form-item__label {
+    color: white !important;
+}
+
+.el-dialog__header {
+    background: url(/static/images/popup/title.png) no-repeat !important;
+    background-size: 100% 100% !important;
+    background-position: center !important;
+}
+
+.el-dialog__headerbtn .el-dialog__close {
+    color: white !important;
 }