|
|
@@ -1,55 +1,33 @@
|
|
|
<template>
|
|
|
- <!-- <div class="BoxCommonVector">
|
|
|
- <div class="innerContainerVector leftPaneVector">
|
|
|
- <h2 class="PangetitleVector">
|
|
|
- <span class="pange_textVector">智选址111</span>
|
|
|
- <i class="el-icon-close" @click="close"></i>
|
|
|
- </h2>
|
|
|
-
|
|
|
- <el-autocomplete class="search" @input="change_witch" v-model="state" :fetch-suggestions="querySearchAsync"
|
|
|
- placeholder="请输入内容" @select="handleSelect" popper-class="select-option"
|
|
|
- :popper-append-to-body="false"></el-autocomplete>
|
|
|
- </div>
|
|
|
- </div> -->
|
|
|
-
|
|
|
<div class="BoxCommonVector">
|
|
|
<div class="innerContainerVector leftPaneVector">
|
|
|
|
|
|
<h2 class="PangetitleVector">
|
|
|
- <span class="pange_textVector">智选址</span>
|
|
|
- <i class="el-icon-close" @click="close"></i>
|
|
|
+ <span class="pange_textVector">{{ title }}</span>
|
|
|
</h2>
|
|
|
+ <i class="el-icon-close" @click="close"></i>
|
|
|
|
|
|
- <el-autocomplete class="search" @input="change_witch" style="z-index: 1111;" v-model="state"
|
|
|
- :fetch-suggestions="querySearchAsync" placeholder="请输入内容" @select="handleSelect"
|
|
|
- :popper-append-to-body="false"></el-autocomplete>
|
|
|
-
|
|
|
+ <el-input clearable v-model="state" @input="change_witch" class="search" placeholder="请输入内容"></el-input>
|
|
|
|
|
|
- <el-table :data="tableData" style="width: 100%" height="440" :header-cell-style="{
|
|
|
+ <el-table :data="active_dableData" style="width: 100%" height="490" :header-cell-style="{
|
|
|
background: 'rgba(10, 25, 38, 0.6)',
|
|
|
- color: '#fff',
|
|
|
+ color: '#66b1ff',
|
|
|
fontSize: '14px',
|
|
|
fontFamily: 'Microsoft YaHei',
|
|
|
fontWeight: '400',
|
|
|
}">
|
|
|
|
|
|
- <el-table-column prop="date" label="日期" width="150">
|
|
|
- </el-table-column>
|
|
|
- <el-table-column prop="name" label="姓名" width="120">
|
|
|
- </el-table-column>
|
|
|
- <el-table-column prop="province" label="省份" width="120">
|
|
|
- </el-table-column>
|
|
|
- <el-table-column prop="city" label="市区" width="120">
|
|
|
- </el-table-column>
|
|
|
- <el-table-column prop="address" label="地址" width="300">
|
|
|
- </el-table-column>
|
|
|
- <el-table-column prop="zip" label="邮编" width="120">
|
|
|
+
|
|
|
+ <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="100">
|
|
|
+ <el-table-column fixed="right" label="操作" width="90">
|
|
|
<template slot-scope="scope">
|
|
|
- <el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>
|
|
|
- <el-button type="text" size="small">编辑</el-button>
|
|
|
+ <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>
|
|
|
@@ -59,165 +37,269 @@
|
|
|
|
|
|
<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 {
|
|
|
- restaurants: [],
|
|
|
state: '',
|
|
|
timeout: null,
|
|
|
- tableData: [{
|
|
|
- date: '2016-05-03',
|
|
|
- name: '王小虎',
|
|
|
- province: '上海',
|
|
|
- city: '普陀区',
|
|
|
- address: '上海市普陀区金沙江路 1518 弄',
|
|
|
- zip: 200333
|
|
|
- }, {
|
|
|
- date: '2016-05-02',
|
|
|
- name: '王小虎',
|
|
|
- province: '上海',
|
|
|
- city: '普陀区',
|
|
|
- address: '上海市普陀区金沙江路 1518 弄',
|
|
|
- zip: 200333
|
|
|
- }, {
|
|
|
- date: '2016-05-04',
|
|
|
- name: '王小虎',
|
|
|
- province: '上海',
|
|
|
- city: '普陀区',
|
|
|
- address: '上海市普陀区金沙江路 1518 弄',
|
|
|
- zip: 200333
|
|
|
- }, {
|
|
|
- date: '2016-05-01',
|
|
|
- name: '王小虎',
|
|
|
- province: '上海',
|
|
|
- city: '普陀区',
|
|
|
- address: '上海市普陀区金沙江路 1518 弄',
|
|
|
- zip: 200333
|
|
|
- }, {
|
|
|
- date: '2016-05-08',
|
|
|
- name: '王小虎',
|
|
|
- province: '上海',
|
|
|
- city: '普陀区',
|
|
|
- address: '上海市普陀区金沙江路 1518 弄',
|
|
|
- zip: 200333
|
|
|
- }, {
|
|
|
- date: '2016-05-06',
|
|
|
- name: '王小虎',
|
|
|
- province: '上海',
|
|
|
- city: '普陀区',
|
|
|
- address: '上海市普陀区金沙江路 1518 弄',
|
|
|
- zip: 200333
|
|
|
- }, {
|
|
|
- date: '2016-05-07',
|
|
|
- name: '王小虎',
|
|
|
- province: '上海',
|
|
|
- city: '普陀区',
|
|
|
- address: '上海市普陀区金沙江路 1518 弄',
|
|
|
- zip: 200333
|
|
|
- },{
|
|
|
- date: '2016-05-03',
|
|
|
- name: '王小虎',
|
|
|
- province: '上海',
|
|
|
- city: '普陀区',
|
|
|
- address: '上海市普陀区金沙江路 1518 弄',
|
|
|
- zip: 200333
|
|
|
- }, {
|
|
|
- date: '2016-05-02',
|
|
|
- name: '王小虎',
|
|
|
- province: '上海',
|
|
|
- city: '普陀区',
|
|
|
- address: '上海市普陀区金沙江路 1518 弄',
|
|
|
- zip: 200333
|
|
|
- },{
|
|
|
- date: '2016-05-03',
|
|
|
- name: '王小虎',
|
|
|
- province: '上海',
|
|
|
- city: '普陀区',
|
|
|
- address: '上海市普陀区金沙江路 1518 弄',
|
|
|
- zip: 200333
|
|
|
- }, {
|
|
|
- date: '2016-05-02',
|
|
|
- name: '王小虎',
|
|
|
- province: '上海',
|
|
|
- city: '普陀区',
|
|
|
- address: '上海市普陀区金沙江路 1518 弄',
|
|
|
- zip: 200333
|
|
|
- }]
|
|
|
+ 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 = [];
|
|
|
+
|
|
|
},
|
|
|
- change_witch() {
|
|
|
- this.get_search(this.state);
|
|
|
+ info() { },
|
|
|
+ switch_show(flag) {
|
|
|
+ pick_entity.entities.values.forEach((res) => {
|
|
|
+ res.show = flag;
|
|
|
+ })
|
|
|
},
|
|
|
- get_search(word) {
|
|
|
- if (word.length == 0) {
|
|
|
- return false;
|
|
|
- }
|
|
|
- let gy_ju = {
|
|
|
- jscType: 'jsc_tdgy_gy_zbmx_cx',
|
|
|
- id: '4602',
|
|
|
- val0: word,
|
|
|
-
|
|
|
- }
|
|
|
+ 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
|
|
|
+ }
|
|
|
+ });
|
|
|
|
|
|
- // 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.restaurants = [];
|
|
|
- values.forEach((item, index) => {
|
|
|
- item.data.forEach((item, index) => {
|
|
|
- if (item.项目名称 != undefined && item.项目名称.length > 0) {
|
|
|
- item.value = item.项目名称
|
|
|
- }
|
|
|
- if (item.sxnr != undefined && item.sxnr.length > 0) {
|
|
|
- item.value = item.sxnr
|
|
|
- }
|
|
|
- this.restaurants.push(item);
|
|
|
- });
|
|
|
+ // 注意：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
|
|
|
+ },
|
|
|
});
|
|
|
|
|
|
|
|
|
- // 当所有 promise 都成功完成时，values 是包含所有结果的数组
|
|
|
- }).catch((error) => {
|
|
|
- console.error(error); // 如果有任何一个 promise 失败，则捕获这个错误
|
|
|
+ })
|
|
|
+ },
|
|
|
+ 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
|
|
|
+
|
|
|
+
|
|
|
},
|
|
|
- querySearchAsync(queryString, cb) {
|
|
|
- var restaurants = this.restaurants;
|
|
|
- var results = queryString ? restaurants.filter(this.createStateFilter(queryString)) : restaurants;
|
|
|
-
|
|
|
- clearTimeout(this.timeout);
|
|
|
- this.timeout = setTimeout(() => {
|
|
|
- cb(results);
|
|
|
- }, 3000 * Math.random());
|
|
|
+ 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 失败，则捕获这个错误
|
|
|
+ });
|
|
|
+ }
|
|
|
+
|
|
|
},
|
|
|
- createStateFilter(queryString) {
|
|
|
|
|
|
- return (state) => {
|
|
|
+ },
|
|
|
+ computed: {
|
|
|
+ cockpit_vector() {
|
|
|
+ return store.state.cockpit_vector;
|
|
|
+ },
|
|
|
|
|
|
- return (state.项目名称.indexOf(queryString) != -1);
|
|
|
- };
|
|
|
+ },
|
|
|
+ watch: {
|
|
|
+ cockpit_vector(newVal, oldVal) {
|
|
|
+ console.log('newVal: ', newVal);
|
|
|
+ this.title = newVal.title
|
|
|
+ this.active_dableData = newVal.tableData
|
|
|
+ this.tableData = newVal.tableData
|
|
|
},
|
|
|
- handleSelect(item) {
|
|
|
- console.log(item);
|
|
|
+ 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);
|
|
|
+
|
|
|
+ });
|
|
|
}
|
|
|
|
|
|
};
|
|
|
@@ -245,12 +327,11 @@ export default {
|
|
|
border-top-right-radius: 15px;
|
|
|
|
|
|
.search {
|
|
|
- margin: 2rem;
|
|
|
+ // margin: 2rem;
|
|
|
}
|
|
|
|
|
|
/deep/ .el-input {
|
|
|
display: inline-block;
|
|
|
- width: 130%;
|
|
|
}
|
|
|
|
|
|
/deep/ .el-input__inner {
|
|
|
@@ -266,6 +347,19 @@ export default {
|
|
|
.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%;
|
|
|
@@ -279,18 +373,7 @@ export default {
|
|
|
position: relative;
|
|
|
overflow: hidden;
|
|
|
|
|
|
- .el-icon-close {
|
|
|
- width: 22px;
|
|
|
- height: 22px;
|
|
|
- color: #fff !important;
|
|
|
- background-color: #335f87;
|
|
|
- line-height: 23px;
|
|
|
- padding: 0 5px;
|
|
|
- border-radius: 4px;
|
|
|
- top: 5px !important;
|
|
|
- position: relative;
|
|
|
- right: -14.5rem;
|
|
|
- }
|
|
|
+
|
|
|
}
|
|
|
|
|
|
.pange_textVector {
|
|
|
@@ -396,7 +479,9 @@ export default {
|
|
|
|
|
|
}
|
|
|
|
|
|
-/deep/ .el-table--border::after, .el-table--group::after, .el-table::before {
|
|
|
+/deep/ .el-table--border::after,
|
|
|
+.el-table--group::after,
|
|
|
+.el-table::before {
|
|
|
background: rgba(10, 25, 38, 0) !important;
|
|
|
}
|
|
|
</style>
|
