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

<template>
    <div class="BoxCommonVector" v-if="title">
        <div class="innerContainerVector leftPaneVector" v-drag>

            <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="650" :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="50">
                    <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 BoxCommonVector_entity = null;
export default {
    data() {
        return {
            state: '',
            timeout: null,
            title: "",
            active_dableData: null,
            tableData: null,
        };
    },
    methods: {
        multiPolygonToPolygons(multiPolygon) {
            const polygons = [];
            multiPolygon.coordinates.forEach(polygonCoordinates => {
                polygons.push({
                    type: 'Polygon',
                    coordinates: polygonCoordinates
                });
            });
            return polygons;
        },
        // draw_vector_tdgy_gy_jd(data) {
        //     const that = this;
        //     data.forEach((res) => {
        //         res.type = this.title
        //         if (res.geom) {
        //             res.geom.coordinates.forEach((res_coordinates) => {
        //                 // let arrayt = [];
        //                 // if (res_coordinates.length == 1) {
        //                 //     arrayt = res_coordinates[0]
        //                 //     const twoDArray = arrayt;
        //                 //     const oneDArray = twoDArray.reduce((accumulator, currentValue) => accumulator.concat(currentValue), []);
        //                 //     tdsy.add(res, oneDArray);
        //                 // } else {
        //                 //     // arrayt = res_coordinates
        //                 // }

        //                 // 多面转单面
        //                 // if (res.geom.type == 'MultiPolygon') {
        //                 //     let polygons = that.multiPolygonToPolygons(geojson);

        //                 //     // 在
        //                 //     polygons.forEach((res) => {
        //                 //         that.add_viewer_for_vector(res, data);
        //                 //         tdsy.add(res, oneDArray);

        //                 //     })
        //                 // } else {

        //                 // }

        //             })
        //         }
        //     })
        // },
        draw_vector_tdgy_gy_jd(data) {
            // tdsy.remove();
            data.forEach((res) => {
                res.type = '图斑上图'
                if (res.geom) {

                    let geojson = res.geom;
                    if (geojson.type == 'MultiPolygon') {
                        geojson.coordinates.forEach((res) => {
                            const twoDArray = res[0];
                            const oneDArray = twoDArray.reduce((accumulator, currentValue) => accumulator.concat(currentValue), []);

                            tdsy.add(res, oneDArray);

                        })

                    } else {
                        const twoDArray = geojson.coordinates[0];
                        const oneDArray = twoDArray.reduce((accumulator, currentValue) => accumulator.concat(currentValue), []);
                        tdsy.add(res, oneDArray);
                    }
                }
            })
        },
        close() {

            store.setViewerFlagb(true);
            tdsy.remove();
            store.state.vectorData = [];
            store.hideToolBar();
        },
        info() { },
        switch_show(flag) {
            BoxCommonVector_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), []);

                BoxCommonVector_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) {
            store.setVectordataid(item.dataid)
            let arr = [];
            const that = this;
            // BoxCommonVector_entity = new Cesium.CustomDataSource("BoxCommonVector_entity");
            // viewer.dataSources.add(BoxCommonVector_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), []);
                        BoxCommonVector_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);
                        for (var i = 0; i < 10; i++) {
                            BoxCommonVector_entity.entities.values.forEach((res) => {

                                BoxCommonVector_entity.entities.remove(res);

                            })
                        }


                    }, 6000)



                }
            });


            store.state.vectorData = arr
            store.setActiveToolBar(9);

        },
        change_witch() {
            this.get_search(this.state);
        },
        // get_search(word) {
        //     if (word.length == 0) {
        //         this.active_dableData = this.tableData;
        //     } else {
        //         let gy_ju = {
        //             beginTime: store.state.cockpit_date[0],
        //             endTime: store.state.cockpit_date[1],
        //             jscType: store.state.cockpit_vector.tablejscType + '_cx',
        //             id: '4602',
        //             val0: word,

        //         }
        //         if (this.title == '土地供应完成项目' || this.title == '山水工程完成项目') {
        //             gy_ju.beginTime = undefined
        //             gy_ju.endTime = undefined
        //         }

        //         // 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) => {
        //             values[0].data.map((res) => {
        //                 if (res.geom) {
        //                     res.geom = wellknown.parse(res.geom.split(";")[1]);
        //                 }
        //             })
        //             this.active_dableData = values[0].data


        //         }).catch((error) => {
        //             console.error(error); // 如果有任何一个 promise 失败，则捕获这个错误  
        //         });
        //     }

        // },

        get_search(word) {
            if (word.length == 0) {
                this.active_dableData = this.tableData;
                console.log('this.active_dableData: ', this.active_dableData);
            } else {
                // console.log('this.tableData: ', this.tableData);
                // this.active_dableData = this.tableData.filter((item) => {
                //     item.项目名称.indexOf(word) >= 0
                // })
                console.log('this.tableData: ', this.word);

                this.active_dableData = this.tableData.filter((item) => {
                    console.log('item: ', item);
                    if (item[this.word] && word) {
                        return item[this.word].indexOf(word) >= 0;
                    }
                    return false;
                })

            }

        },
        async init_vector(params) {

            const that = this;

            let obj = {
                jscType: store.state.cockpit_vector.tablejscType,
                beginTime: store.state.cockpit_date[0],
                endTime: store.state.cockpit_date[1],
                id: params ? params.id : "4602",
            };
            if (this.title == '土地供应完成项目' || this.title == '山水工程完成项目') {
                obj.beginTime = undefined
                obj.endTime = undefined
            }
            if (this.title == '进出平衡') {
                obj.jscType = "jsc_gdbh_jcph_zbmc",
                    obj.val2 = 0,
                    obj.val1 = 50000,
                    obj.beginTime = store.state.cockpit_date[1].slice(0, 4),
                    obj.endTime = undefined

            }
            if (this.title == '土地收储计划项目') {
                obj.beginTime = undefined
                obj.endTime = undefined
            }
            if (this.title == '私宅报建完成项目') {

                let dateString_beginTime = store.state.cockpit_date[0];
                let formattedDate = dateString_beginTime.slice(0, 4) + '-' + dateString_beginTime.slice(4, 6) + '-' + dateString_beginTime.slice(6);

                let dateString_endTime = store.state.cockpit_date[1];
                let formattedDate_endTime = dateString_endTime.slice(0, 4) + '-' + dateString_endTime.slice(4, 6) + '-' + dateString_endTime.slice(6);

                obj.beginTime = formattedDate
                obj.endTime = formattedDate_endTime
            }
            let data = await QueryList(obj);
            data.data.map((res) => {
                if (res.geom) {
                    res.geom = wellknown.parse(res.geom.split(";")[1]);
                }
            });
            this.active_dableData = data.data
            console.log('data.data: ', data.data);
            this.tableData = data.data
        },

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

    },
    watch: {
        cockpit_vector(newVal, oldVal) {
            this.title = newVal.title
            this.word = newVal.word
            if (newVal.tableData && newVal.tableData.length > 0) {

                this.active_dableData = newVal.tableData
                this.tableData = newVal.tableData
                this.init_vector()

            } else if (this.title) {
                this.init_vector()
            }
            if (newVal.goitem) {
                this.go(newVal.goitem)
            }
        },
        active_dableData(newVal, oldVal) {
            this.draw_vector_tdgy_gy_jd(newVal);
        }
    },
    mounted() {
        const that = this;
        this.$nextTick(() => {

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

        });
    },

};
</script>
  


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

.innerContainerVector {
    width: 350px;
    height: 760px; //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>