real3d-portalsite/src/views/cockpit/common/VectorSpace/BoxCommonVector.vue

<template>
    <div class="BoxCommonVector">
        <div class="innerContainerVector leftPaneVector">

            <h2 class="PangetitleVector">
                <span class="pange_textVector">{{ title }}</span>
            </h2>
            <i class="el-icon-close" @click="close"></i>

            <el-input clearable v-model="state" @input="change_witch" class="search" placeholder="请输入内容"></el-input>

            <el-table :data="active_dableData" style="width: 100%" height="490" :header-cell-style="{
                background: 'rgba(10, 25, 38, 0.6)',
                color: '#66b1ff',
                fontSize: '14px',
                fontFamily: 'Microsoft YaHei',
                fontWeight: '400',
            }">


                <el-table-column show-overflow-tooltip="true" v-for="(index, item) in store.state.cockpit_vector.columns"
                    :key="index" width="120" :prop="store.state.cockpit_vector.columns[item]"
                    :label="store.state.cockpit_vector.columns[item]">

                </el-table-column>

                <el-table-column fixed="right" label="操作" width="90">
                    <template slot-scope="scope">
                        <el-button @click="info(scope.row)" type="text" size="small">详情</el-button>
                        <el-button @click="go(scope.row)" type="text" size="small">定位</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
    </div>
</template>
  
<script>
import { QueryList } from '@/api/cockpitNew'
import * as tdsy from "@/views/cockpit/js/tdsy";

import * as wellknown from "wellknown";
import * as turf from "@turf/turf";

let pick_entity = null;
export default {
    data() {
        return {
            state: '',
            timeout: null,
            title: "",
            active_dableData: null,
            tableData: null,
        };
    },
    methods: {
        draw_vector_tdgy_gy_jd(data) {
            data.forEach((res) => {
                res.type = '国有建设用地完成项目'
                if (res.geom) {
                    res.geom.coordinates.forEach((res_coordinates) => {
                        let arrayt = [];
                        if (res_coordinates.length == 1) {
                            arrayt = res_coordinates[0]
                        } else {
                            arrayt = res_coordinates
                        }

                        const twoDArray = arrayt;
                        const oneDArray = twoDArray.reduce((accumulator, currentValue) => accumulator.concat(currentValue), []);
                        tdsy.add(res, oneDArray);
                    })
                }
            })
        },

        close() {

            store.setViewerFlagb(true);
            tdsy.remove();
            store.state.vectorData = [];

        },
        info() { },
        switch_show(flag) {
            pick_entity.entities.values.forEach((res) => {
                res.show = flag;
            })
        },
        build_data(geojson) {
            geojson.coordinates.forEach((res) => {
                const twoDArray = res[0];
                const oneDArray = twoDArray.reduce((accumulator, currentValue) => accumulator.concat(currentValue), []);
                console.log('oneDArray: ', oneDArray);

                pick_entity.entities.add({
                    polygon: {
                        // 获取指定属性（positions，holes（图形内需要挖空的区域））
                        hierarchy: {
                            positions: Cesium.Cartesian3.fromDegreesArrayHeights(oneDArray),
                        },
                        // 边框
                        outline: true,
                        // 边框颜色
                        outlineColor: Cesium.Color.RED,
                        // 边框尺寸
                        outlineWidth: 10,
                        // 填充的颜色，withAlpha透明度
                        material: Cesium.Color.GREEN.withAlpha(0),
                        // 是否被提供的材质填充
                        fill: true,
                        // 恒定高度
                        height: 1.1,
                        // 显示在距相机的距离处的属性，多少区间内是可以显示的
                        // distanceDisplayCondition: new Cesium.DistanceDisplayCondition(1000, 10000000),
                        // 是否显示
                        show: true,
                        // 顺序,仅当`clampToGround`为true并且支持地形上的折线时才有效。
                        zIndex: 10
                    }
                });

                // 注意：polygon首尾坐标要一致
                var polygon = turf.polygon([twoDArray]);

                var centroid = turf.centroid(polygon).geometry.coordinates;

                viewer.camera.flyTo({
                    duration: 1,

                    destination: Cesium.Cartesian3.fromDegrees(centroid[0], centroid[1], 3000),
                    // destination: {
                    //     x: -6283267.004204832,
                    //     y: 28123682.896774407,
                    //     z: 23709669.98539126
                    // },
                    orientation: {
                        heading: 6.149339593573709,
                        pitch: -1.539825618847483,
                        roll: 0
                    },
                });


            })
        },
        go(item) {
            let arr = [];
            const that = this;
            pick_entity = new Cesium.CustomDataSource("pick_entity");
            viewer.dataSources.add(pick_entity);

            Object.keys(item).forEach(key => {

                arr.push({
                    "name": key,
                    "value": item[key],
                });

                if (key == 'geom') {
                    console.log();


                    let geojson = item[key];

                    if (geojson.type == 'MultiPolygon') {
                        this.build_data(geojson);
                    } else {
                        const twoDArray = geojson.coordinates[0];
                        const oneDArray = twoDArray.reduce((accumulator, currentValue) => accumulator.concat(currentValue), []);
                        pick_entity.entities.add({
                            polygon: {
                                // 获取指定属性（positions，holes（图形内需要挖空的区域））
                                hierarchy: {
                                    positions: Cesium.Cartesian3.fromDegreesArrayHeights(oneDArray),
                                },
                                // 边框
                                outline: true,
                                // 边框颜色
                                outlineColor: Cesium.Color.RED,
                                // 边框尺寸
                                outlineWidth: 10,
                                // 填充的颜色，withAlpha透明度
                                material: Cesium.Color.GREEN.withAlpha(0),
                                // 是否被提供的材质填充
                                fill: true,
                                // 恒定高度
                                height: 1.1,
                                // 显示在距相机的距离处的属性，多少区间内是可以显示的
                                // distanceDisplayCondition: new Cesium.DistanceDisplayCondition(1000, 10000000),
                                // 是否显示
                                show: true,
                                // 顺序,仅当`clampToGround`为true并且支持地形上的折线时才有效。
                                zIndex: 10
                            }
                        });
                        // 注意：polygon首尾坐标要一致
                        var polygon = turf.polygon([geojson.coordinates[0]]);

                        var centroid = turf.centroid(polygon).geometry.coordinates;

                        viewer.camera.flyTo({
                            duration: 1,

                            destination: Cesium.Cartesian3.fromDegrees(centroid[0], centroid[1], 3000),
                            // destination: {
                            //     x: -6283267.004204832,
                            //     y: 28123682.896774407,
                            //     z: 23709669.98539126
                            // },
                            orientation: {
                                heading: 6.149339593573709,
                                pitch: -1.539825618847483,
                                roll: 0
                            },
                        });


                    }

                    let flag = true;
                    let time = setInterval(() => {
                        flag = !flag
                        that.switch_show(flag);
                    }, 500);
                    setTimeout(() => {
                        clearInterval(time);
                        console.log("s");
                        console.log(pick_entity);
                        viewer.dataSources.remove(pick_entity);


                    }, 6000)



                }
            });


            store.state.vectorData = arr


        },
        change_witch() {
            this.get_search(this.state);
        },
        get_search(word) {
            if (word.length == 0) {
                this.active_dableData = this.tableData;
            } else {
                let gy_ju = {
                    jscType: 'jsc_tdgy_gy_zbmx_cx',
                    id: '4602',
                    val0: word,

                }

                // let bj_sl = {
                //   beginTime: store.state.cockpit_date[0],
                //   endTime: store.state.cockpit_date[1],
                //   jscType: 'jsc_bjxm_csbj_zbmx_cx',
                //   id: '4602',
                //   val0: word,

                // }

                Promise.all([QueryList(gy_ju)]).then((values) => {
                    this.active_dableData = values[0].data
                }).catch((error) => {
                    console.error(error); // 如果有任何一个 promise 失败，则捕获这个错误  
                });
            }

        },

    },
    computed: {
        cockpit_vector() {
            return store.state.cockpit_vector;
        },

    },
    watch: {
        cockpit_vector(newVal, oldVal) {
            console.log('newVal: ', newVal);
            this.title = newVal.title
            this.active_dableData = newVal.tableData
            this.tableData = newVal.tableData
        },
        active_dableData(newVal, oldVal) {
            this.draw_vector_tdgy_gy_jd(newVal);
        }
    },
    mounted() {
        const that = this;
        this.$nextTick(() => {

            pick_entity = new Cesium.CustomDataSource("pick_entity");
            viewer.dataSources.add(pick_entity);

        });
    }

};
</script>
  


<style lang="scss" scoped>
.BoxCommonVector {
    width: 100%;
    height: 100%;
    position: absolute;
    left: -1rem;
    top: 0rem;
}

.innerContainerVector {
    width: 350px;
    height: 600px; //calc(100% - 20px);
    position: absolute;
    top: 28px;
    z-index: 99;
    background-image: url("/static/images/ghzc/内容框.png");
    background-size: 100% 100%;
    border-top-right-radius: 15px;

    .search {
        // margin: 2rem;
    }

    /deep/ .el-input {
        display: inline-block;
    }

    /deep/ .el-input__inner {
        // background: transparent !important;
        color: white !important;
        background: rgba(10, 25, 38, 0.5);
        border-color: #5ecef09a;
        // color: #64daff;
        // font-size: 12px;
    }
}

.leftPaneVector {
    left: 20px;

    .el-icon-close {
        width: 22px;
        height: 22px;
        color: #fff !important;
        background-color: #335f87;
        line-height: 23px;
        padding: 0 5px;
        border-radius: 4px;
        top: -1.9rem !important;
        position: relative;
        right: -19.5rem;
    }

    .PangetitleVector {
        box-sizing: border-box;
        width: 100%;
        height: 35px;
        background: url("/static/images/overview/titlebox.gif") no-repeat !important;
        background-size: 100% 100% !important;
        line-height: 35px;
        font-size: 14px;
        padding-left: 15px;
        display: flex;
        position: relative;
        overflow: hidden;


    }

    .pange_textVector {
        font-size: 14px !important;
        font-family: 'HarmonyOS Sans, HarmonyOS Sans';
        font-weight: bold;
        font-size: 18px;
        color: #FFFFFF;
        margin-left: 30px;
    }
}



/deep/.el-input__inner:focus {
    border: 1px solid #1fb1ef;
}

/deep/.el-input__inner {
    border: 1px solid rgba(10, 25, 38, 0.5);
    background: rgba(10, 25, 38, 0.5);
    border-radius: 18px;
    height: 30px;
    color: white;
    line-height: 30px;
    // background: #ffffff3b;
}

/deep/.el-input__icon {
    line-height: 30px;
    border-radius: 0 18px 18px 0;
    cursor: pointer;
}

/deep/.el-input__suffix {
    background: #1fb1ef;
    right: 1px;
    padding: 0 5px;
    border-radius: 0 18px 18px 0;
    opacity: 0.8;
    color: #fff;
}


/deep/ .el-autocomplete-suggestion {
    margin-top: 8px;
    border-radius: 6px;
    border: 1px solid #198ec0;
    background: rgba(10, 25, 38, 0.9);
    color: rgba(25, 142, 192, 1);

    .popper__arrow {
        top: -8px;
        border-bottom-color: rgba(31, 177, 239, 1);
    }

    .popper__arrow::after {
        border-bottom-color: rgba(0, 80, 111, 0.9);
    }

    .el-autocomplete-suggestion__wrap {
        padding: 2px;
    }
}

/deep/ .el-autocomplete-suggestion li {
    color: #ffffff;
}

/deep/ .el-autocomplete-suggestion li:hover {
    background-color: rgba(8, 162, 223, 0.8);
    border-radius: 6px;
}



/deep/ .el-table tr {
    background: rgba(10, 25, 38, 0.5) !important;
}

/deep/ .el-table td.el-table__cell,
.el-table th.el-table__cell.is-leaf {
    background: rgba(10, 25, 38, 0.5) !important;

    border-bottom: 0px solid #EBEEF5;
}


.el-table {
    color: #fff;
    background: rgba(10, 25, 38, 0.5) !important;
}

/deep/ .el-table__fixed-right::before,
.el-table__fixed::before {

    background: rgba(10, 25, 38, 0.9) !important;

}

/deep/ .el-table__fixed-right-patch {
    background: rgba(10, 25, 38, 0.9) !important;

}

/deep/ .el-table--border::after,
.el-table--group::after,
.el-table::before {
    background: rgba(10, 25, 38, 0) !important;
}
</style>