ui开发

src/api/cockpitNew.js

@@ -16,3 +16,10 @@ export function QueryOne(params) {
     })
 }
 
+export function GetTableData(params) {
+    return request({
+        url: '/apply/tabledata/GetTableData',
+        method: 'get',
+        params
+    })
+}

src/components/Query/clickQuery/MultiLevelQuery.vue

@@ -1,33 +1,136 @@
 <template>
-
+    <el-tabs class="multi_level_query_table" v-model="activeName" @tab-click="handleClick">
+        <el-tab-pane label="用户管理" name="first">
+            <el-collapse v-model="activeNames" @change="handleChange">
+                <el-collapse-item title="一致性 Consistency" name="1">
+                    <div>与现实生活一致：与现实生活的流程、逻辑保持一致，遵循用户习惯的语言和概念；</div>
+                    <div>在界面中一致：所有的元素和结构需保持一致，比如：设计样式、图标和文本、元素的位置等。</div>
+                </el-collapse-item>
+                <el-collapse-item title="反馈 Feedback" name="2">
+                    <div>控制反馈：通过界面样式和交互动效让用户可以清晰的感知自己的操作；</div>
+                    <div>页面反馈：操作后，通过页面元素的变化清晰地展现当前状态。</div>
+                </el-collapse-item>
+                <el-collapse-item title="效率 Efficiency" name="3">
+                    <div>简化流程：设计简洁直观的操作流程；</div>
+                    <div>清晰明确：语言表达清晰且表意明确，让用户快速理解进而作出决策；</div>
+                    <div>帮助用户识别：界面简单直白，让用户快速识别而非回忆，减少用户记忆负担。</div>
+                </el-collapse-item>
+                <el-collapse-item title="可控 Controllability" name="4">
+                    <div>用户决策：根据场景可给予用户操作建议或安全提示，但不能代替用户进行决策；</div>
+                    <div>结果可控：用户可以自由的进行操作，包括撤销、回退和终止当前操作等。</div>
+                </el-collapse-item>
+            </el-collapse>
+        </el-tab-pane>
+        <el-tab-pane label="配置管理" name="second">配置管理</el-tab-pane>
+        <el-tab-pane label="角色管理" name="third">角色管理</el-tab-pane>
+        <el-tab-pane label="定时任务补偿" name="fourth">定时任务补偿</el-tab-pane>
+    </el-tabs>
 </template>
 
 <script>
 //这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
-
+import { GetTableData } from '@/api/cockpitNew'
 export default {
-  components: {},
-  data() {
-    return {};
-  },
-  //监听属性 类似于data概念
-  computed: {},
-  //监控data中的数据变化
-  watch: {},
-  //方法集合
-  methods: {},
-  beforeCreate() { }, //生命周期 - 创建之前
-  created() { }, //生命周期 - 创建完成（可以访问当前this实例）
-  beforeMount() { }, //生命周期 - 挂载之前
-  mounted() { }, //生命周期 - 挂在完成
-  beforeUpdate() { }, //生命周期 - 更新之前
-  updated() { }, //生命周期 - 更新之后
-  beforeDestroy() { }, //生命周期 - 销毁之前
-  destroy() { },//生命周期 - 销毁完成
-  activated() { }, //若组件实例是 <KeepAlive> 缓存树的一部分，当组件被插入到 DOM 中时调用。
-  deactivated() { } //若组件实例是 <KeepAlive> 缓存树的一部分，当组件从 DOM 中被移除时调用。
+    components: {},
+    data() {
+        return {
+            activeName: 'second',
+            handler_multi_level_query: null,
+        };
+    },
+    //监听属性 类似于data概念
+    computed: {},
+    //监控data中的数据变化
+    watch: {},
+    //方法集合
+    methods: {
+        handleChange(val) {
+            console.log(val);
+        },
+        handleClick(tab, event) {
+            console.log(tab, event);
+        },
+        init_handler() {
+            let obj = {
+                "wkt": 'POINT(109.5139541 18.3146153)',
+                "id": 'dd699f839bc04969ae2dc2e1964d0ad1',
+            }
+            const that = this;
+            if (that.handler_multi_level_query == null) {
+                that.handler_multi_level_query = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
+            }
+            that.handler_multi_level_query.setInputAction(async event => {
+                let pickObj = viewer.scene.pick(event.position);
+                var position = viewer.scene.pickPosition(event.position);
+
+                if (!position)//点击到地球之外
+                    return false;
+                var cartographic = Cesium.Cartographic.fromCartesian(position);
+
+
+                let longitude = Cesium.Math.toDegrees(cartographic.longitude);
+                let latitude = Cesium.Math.toDegrees(cartographic.latitude);
+                let height = cartographic.height;
+                let heading = viewer.scene.camera.heading;
+                let pitch = viewer.scene.camera.pitch;
+                // that.addSceneFun()
+
+                if (!position) {
+                    position = Cesium.Cartesian3.fromDegrees(0, 0, 0);
+                }
+                if (Cesium.defined(pickObj)) {
+                    console.log('pickObj:111 ', pickObj);
+
+                    GetTableData(obj).then(res => {
+                        console.log('res: ', res);
+                    })
+
+                } else {
+
+
+                }
+                that.handler_multi_level_query.destroy();
+                that.handler_multi_level_query = null;
+            }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
+
+
+        }
+    },
+    beforeCreate() { }, //生命周期 - 创建之前
+    created() { }, //生命周期 - 创建完成（可以访问当前this实例）
+    beforeMount() { }, //生命周期 - 挂载之前
+    mounted() {
+        const that = this;
+        this.$nextTick(() => {
+            that.handler_multi_level_query = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
+        })
+
+    }, //生命周期 - 挂在完成
+    beforeUpdate() { }, //生命周期 - 更新之前
+    updated() { }, //生命周期 - 更新之后
+    beforeDestroy() { }, //生命周期 - 销毁之前
+    destroy() { },//生命周期 - 销毁完成
+    activated() { }, //若组件实例是 <KeepAlive> 缓存树的一部分，当组件被插入到 DOM 中时调用。
+    deactivated() { } //若组件实例是 <KeepAlive> 缓存树的一部分，当组件从 DOM 中被移除时调用。
 };
 </script>
-<style  scoped>
+<style lang="scss" scoped>
+.multi_level_query_table {
+    position: absolute;
+    top: 7rem;
+    width: 19rem;
+}
+
+/* 去掉tabs标签栏下的下划线 */
+::v-deep .el-tabs__nav-wrap::after {
+    position: static !important;
+    /* background-color: #fff; */
+}
+
+/* 下划线切换高亮 */
+::v-deep .el-tabs__active-bar {
+    background-color: #30fdff;
+}
+</style>
+
 
-</style>

src/components/Query/clickQuery/clickQuery.vue

@@ -44,7 +44,7 @@
     </div>
 
     <!-- <CockpitVector class="cockpit_vector"></CockpitVector> -->
-
+    <MultiLevelQuery ref="MultiLevelQuery" />
   </div>
 </template>
 
@@ -54,12 +54,14 @@ import { GetGDlnfo, GetXzqhTree, GetHouseInfo } from "../../../api/map";
 import { keys } from "lodash";
 import { handModel, handnew, clearTranslate, keyName } from "./modelLayering";
 import CockpitVector from "./CockpitVector.vue";
+import MultiLevelQuery from "./MultiLevelQuery.vue";
+
 import * as pick_cockpit_vector from "./pick_cockpit_vector.js";
 
 let gwtype;
 export default {
   name: "clickQuery",
-  components: { CockpitVector },
+  components: { CockpitVector, MultiLevelQuery },
 
   data() {
     return {
@@ -706,8 +708,7 @@ export default {
 
           break;
         } case 5: {//联级查询
-          pick_cockpit_vector.init_handler();
-
+          this.$refs.MultiLevelQuery.init_handler();
           break;
         }
         default:

src/views/cockpit/tdsy.vue

@@ -874,18 +874,18 @@ export default {
       this.gy_jd_entity.show = flag
     },
     async init_vector(params) {
-      const that = this;
-      let obj = {
-        jscType: 'jsc_tdgy_gy_zbmx',
-        id: params ? params.id : '4602'
-      };
-      let data = await QueryList(obj);
-      data.data.map((res) => {
-        res.geom = parse(res.geom);
-      })
-      this.vector_data = data.data;
+      // const that = this;
+      // let obj = {
+      //   jscType: 'jsc_tdgy_gy_zbmx',
+      //   id: params ? params.id : '4602'
+      // };
+      // let data = await QueryList(obj);
+      // data.data.map((res) => {
+      //   res.geom = parse(res.geom.split(";")[1]);
+      // })
+      // this.vector_data = data.data;
 
-      this.draw_vector_tdgy_gy_jd();
+      // this.draw_vector_tdgy_gy_jd();
     }
   },
   mounted() {