real3d-portalsite/src/components/Query/clickQuery/MultiLevelQuery.vue

<template>
    <el-tabs class="multi_level_query_table" v-model="activeName" @tab-click="handleClick" v-if="store.state.query_pick_last_pane">
        <el-tab-pane :label="store.state.query_pick_last_pane.name" name="second">
            <span v-for="(item_last, index) in store.state.query_pick_last_pane.value" :key="index"
                v-if="item_last.filed != 'geom'">
                <p>{{ item_last.filedZH }} {{ item_last.data }}</p>
            </span>
        </el-tab-pane>

        <el-tab-pane :label="item.name" :name="item.name" v-for="(item, index) in store.state.query_pick_pane" :key="index">

            <el-collapse v-for="(value, index_item) in item.value" :key="index_item" v-model="activeNames"
                @change="handleChange">
                <el-collapse-item :title="'地块' + (index_item + 1)" name="1">
                    <div v-for="(value_field, index_field) in value" :key="index_field" v-if="value_field.filed != 'geom'">
                        {{ value_field.filedZH }} :{{ value_field.data }}</div>

                </el-collapse-item>
            </el-collapse>

        </el-tab-pane>
    </el-tabs>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
import { GetTableData } from '@/api/cockpitNew'
import * as wellknown from "wellknown";

export default {
    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() {

            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);
                }

                const geojsonPoint = {
                    "type": "Point",
                    "coordinates": [longitude, latitude] // 注意经纬度顺序  
                };

                const wkt = wellknown.stringify(geojsonPoint);
                let obj = {
                    "wkt": wkt,
                    "id": 'dd699f839bc04969ae2dc2e1964d0ad1',
                }
                GetTableData(obj).then(res => {
                    store.state.query_pick_last_pane = {
                        name: res.data.dataname,
                        value: res.data.data[0]
                    };
                    console.log('store.state.query_pick_last_pane: ', store.state.query_pick_last_pane);

                    res.data.child.forEach(element => {
                        if (element.data.length > 1) {
                            store.state.query_pick_pane.push({
                                name: element.dataname,
                                value: element.data
                            });
                        }
                    });
                })

                console.log(store.state.query_pick_pane, "that.pane");


                that.handler_multi_level_query.destroy();
                that.handler_multi_level_query = null;
            }, Cesium.ScreenSpaceEventType.LEFT_CLICK);


        },
        clear_data() {
            store.state.query_pick_last_pane = null;
            store.state.query_pick_pane = [];

        }
    },
    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 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;
}

::v-deep .el-collapse-item__header {
    color: #64daff !important;
    font-weight: 600;
}
</style>