Browse Source

城市报建项目上图

maxiaoxiao 1 year ago
parent
commit
ef280558d4

+ 14 - 3
src/views/cockpit/bjxm.vue

@@ -11,7 +11,7 @@
       </div>
     </div>
     <div class="content">
-      <div class="item">
+      <div class="item cursor" @click="draw_vector">
         <div class="icon">
           <div class="icon_zxkg"></div>
         </div>
@@ -24,7 +24,7 @@
         <div class="text">
           <p>报建数量</p>
           <span>{{ left_value == 'csbj' ? sdata.sj_number : 0 }}</span>个
-          <!-- <i style="pointer-events:all" :class="{ 'el-icon-view-switch': icon_switch, 'el-icon-view': true }"></i> -->
+          <i style="pointer-events:all" :class="{ 'el-icon-view-switch': icon_switch, 'el-icon-view': true }"></i>
         </div>
       </div>
       <div class="item">
@@ -383,7 +383,15 @@ export default {
       myChart.setOption(option);
     },
     draw_vector() {
-
+      store.setViewerFlagb(false);
+      store.setToolBarShow(false);
+      store.setXzqh_flag(false);
+      store.setCockpit_vector({
+        title: "城市报建完成项目",
+        tableData: this.vector_data,
+        tablejscType: 'jsc_bjxm_csbj_zbmx',
+        columns: ["上月转结", "事项内容", "事项名称", "办件类型", "办件编号", "办结情况", "受理人",'实际办结时间','审批模式','当前环节','当场办结','承诺日期','状态','申请主体','申请数量','行政区','面积(亩)','预警'],
+     })
     },
     draw_vector_tdgy_gy_jd() {
       this.vector_data.forEach((res) => {
@@ -569,6 +577,9 @@ export default {
   display: inline-block;
   margin-top: 0.5rem;
 }
+.cursor{
+  cursor: pointer;
+}
 
 .icon {
   width: 50px;

+ 487 - 0
src/views/cockpit/common/VectorSpace/BoxCommonVector copy.vue

@@ -0,0 +1,487 @@
+<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="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: {
+        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) {
+            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) {
+            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,
+
+                }
+
+                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(() => {
+
+            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: 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>
+