|
@@ -4,13 +4,14 @@
|
|
|
<el-tab-pane :label="store.state.query_pick_last_pane.name" name="second">
|
|
|
<div class="list_vector_multi" v-for="(item_last, index) in store.state.query_pick_last_pane.value" :key="index"
|
|
|
v-if="item_last.filed != 'geom'">
|
|
|
- <span>{{ item_last.filedZH }}:
|
|
|
- {{ item_last.filedZH == '面积'?item_last.data.toFixed(2):item_last.data }}</span>
|
|
|
+ <span>{{ item_last.filedZH }}:
|
|
|
+ {{ item_last.filedZH == '面积' ? item_last.data.toFixed(2) : item_last.data }}</span>
|
|
|
</div>
|
|
|
</el-tab-pane>
|
|
|
|
|
|
<el-tab-pane :label="item.name" :name="item.name" v-for="(item, index) in store.state.query_pick_pane" :key="index">
|
|
|
- <pie class="echart" :class="item.name == '权属' ? 'echart1' : ''" unit="亩" @echartClick="(name)=>echartClick(name,item.value)" :ref="`echartRef`"></pie>
|
|
|
+ <pie class="echart" :class="item.name == '权属' ? 'echart1' : ''" unit="亩"
|
|
|
+ @echartClick="(name) => echartClick(name, item.value)" :ref="`echartRef`"></pie>
|
|
|
<div>{{ eclickname }}</div>
|
|
|
<el-collapse v-for="(value, index_item) in echartList[eclickname]" :key="index_item" @change="handleChange">
|
|
|
<el-collapse-item :title="'地块' + (index_item + 1)" name="1">
|
|
@@ -22,7 +23,7 @@
|
|
|
</div>
|
|
|
:
|
|
|
<div class="filed_box">
|
|
|
- {{ value_field.filedZH == '面积'?value_field.data.toFixed(2):value_field.data }}
|
|
|
+ {{ value_field.filedZH == '面积' ? value_field.data.toFixed(2) : value_field.data }}
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
@@ -56,7 +57,7 @@ export default {
|
|
|
pick_entity: null,
|
|
|
pick_entity_geo: null,
|
|
|
eclickname: '',
|
|
|
- echartList:{}
|
|
|
+ echartList: {}
|
|
|
};
|
|
|
},
|
|
|
//监听属性 类似于data概念
|
|
@@ -65,21 +66,21 @@ export default {
|
|
|
watch: {},
|
|
|
//方法集合
|
|
|
methods: {
|
|
|
- compute(mj) {
|
|
|
- return mj ? (mj * 0.0015).toFixed(2) : 0;
|
|
|
- },
|
|
|
- setEchart(data, type, index) {
|
|
|
- this.$nextTick(() => {
|
|
|
- let max = index == 0 ? 3 : 10
|
|
|
- let legend_right= index == 0 ? "2%" : "10%"
|
|
|
- this.$refs.echartRef[index].setOptions({ data, type, max,legend_right });
|
|
|
- });
|
|
|
- },
|
|
|
- echartClick(name,datas){
|
|
|
- this.eclickname = name
|
|
|
- // let click = datas.filter((c) => c.name == name);
|
|
|
- // if (click.length > 0) this.gogeojson(click[0].geom );
|
|
|
- },
|
|
|
+ compute(mj) {
|
|
|
+ return mj ? (mj * 0.0015).toFixed(2) : 0;
|
|
|
+ },
|
|
|
+ setEchart(data, type, index) {
|
|
|
+ this.$nextTick(() => {
|
|
|
+ let max = index == 0 ? 3 : 10
|
|
|
+ let legend_right = index == 0 ? "2%" : "10%"
|
|
|
+ this.$refs.echartRef[index].setOptions({ data, type, max, legend_right });
|
|
|
+ });
|
|
|
+ },
|
|
|
+ echartClick(name, datas) {
|
|
|
+ this.eclickname = name
|
|
|
+ // let click = datas.filter((c) => c.name == name);
|
|
|
+ // if (click.length > 0) this.gogeojson(click[0].geom );
|
|
|
+ },
|
|
|
switch_show(flag) {
|
|
|
pick_entity.entities.values.forEach((res) => {
|
|
|
res.show = flag;
|
|
@@ -93,74 +94,74 @@ export default {
|
|
|
}
|
|
|
});
|
|
|
},
|
|
|
- gogeojson(data){
|
|
|
- let geojson = wellknown.parse(data);
|
|
|
-
|
|
|
- const twoDArray = geojson.coordinates[0];
|
|
|
- const oneDArray = twoDArray.reduce((accumulator, currentValue) => accumulator.concat(currentValue), []);
|
|
|
- this.pick_entity_geo = oneDArray;
|
|
|
-
|
|
|
- pick_entity.entities.add({
|
|
|
- polygon: {
|
|
|
- // 获取指定属性(positions,holes(图形内需要挖空的区域))
|
|
|
- hierarchy: {
|
|
|
- positions: Cesium.Cartesian3.fromDegreesArray(oneDArray),
|
|
|
- },
|
|
|
- // 边框
|
|
|
- outline: true,
|
|
|
- // 边框颜色
|
|
|
- outlineColor: Cesium.Color.RED,
|
|
|
- // 边框尺寸
|
|
|
- outlineWidth: 2,
|
|
|
- // 填充的颜色,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 flag = true;
|
|
|
- let time = setInterval(() => {
|
|
|
- flag = !flag
|
|
|
- this.switch_show(flag);
|
|
|
- }, 500);
|
|
|
- setTimeout(() => {
|
|
|
- clearInterval(time);
|
|
|
- pick_entity.entities.values.forEach((res) => {
|
|
|
-
|
|
|
- pick_entity.entities.remove(res);
|
|
|
+ gogeojson(data) {
|
|
|
+ let geojson = wellknown.parse(data);
|
|
|
|
|
|
- })
|
|
|
- }, 6000)
|
|
|
+ const twoDArray = geojson.coordinates[0];
|
|
|
+ const oneDArray = twoDArray.reduce((accumulator, currentValue) => accumulator.concat(currentValue), []);
|
|
|
+ this.pick_entity_geo = oneDArray;
|
|
|
+
|
|
|
+ pick_entity.entities.add({
|
|
|
+ polygon: {
|
|
|
+ // 获取指定属性(positions,holes(图形内需要挖空的区域))
|
|
|
+ hierarchy: {
|
|
|
+ positions: Cesium.Cartesian3.fromDegreesArray(oneDArray),
|
|
|
+ },
|
|
|
+ // 边框
|
|
|
+ outline: true,
|
|
|
+ // 边框颜色
|
|
|
+ outlineColor: Cesium.Color.RED,
|
|
|
+ // 边框尺寸
|
|
|
+ outlineWidth: 2,
|
|
|
+ // 填充的颜色,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 flag = true;
|
|
|
+ let time = setInterval(() => {
|
|
|
+ flag = !flag
|
|
|
+ this.switch_show(flag);
|
|
|
+ }, 500);
|
|
|
+ setTimeout(() => {
|
|
|
+ clearInterval(time);
|
|
|
+ pick_entity.entities.values.forEach((res) => {
|
|
|
+
|
|
|
+ pick_entity.entities.remove(res);
|
|
|
+
|
|
|
+ })
|
|
|
+ }, 6000)
|
|
|
|
|
|
|
|
|
- // 注意:polygon首尾坐标要一致
|
|
|
- var polygon = turf.polygon([geojson.coordinates[0]]);
|
|
|
+ // 注意:polygon首尾坐标要一致
|
|
|
+ var polygon = turf.polygon([geojson.coordinates[0]]);
|
|
|
|
|
|
- var centroid = turf.centroid(polygon).geometry.coordinates;
|
|
|
+ var centroid = turf.centroid(polygon).geometry.coordinates;
|
|
|
|
|
|
- viewer.camera.flyTo({
|
|
|
- duration: 1,
|
|
|
+ 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
|
|
|
- },
|
|
|
+ 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
|
|
|
+ },
|
|
|
});
|
|
|
},
|
|
|
handleChange(val) {
|
|
@@ -220,6 +221,7 @@ export default {
|
|
|
};
|
|
|
|
|
|
const wkt = wellknown.stringify(geojsonPoint);
|
|
|
+ let id = store.state.vectorlayerlist[store.state.vectorlayerlist.length - 1].id
|
|
|
let obj = {
|
|
|
// "wkt": 'POINT (109.51207847188947 18.311530254307392)', //单面
|
|
|
// "wkt": 'POINT (109.50728022974468 18.318266593715794)', //多面
|
|
@@ -239,7 +241,7 @@ export default {
|
|
|
let index = -1;
|
|
|
res.data.child.forEach(element => {
|
|
|
if (element.data.length > 1) {
|
|
|
- index ++;
|
|
|
+ index++;
|
|
|
let edata = []
|
|
|
store.state.query_pick_pane.push({
|
|
|
name: element.dataname,
|
|
@@ -255,28 +257,27 @@ export default {
|
|
|
})
|
|
|
});
|
|
|
// if(element.dataname == '土地现状'){
|
|
|
- const countByName = element.data.reduce((acc, e) => {
|
|
|
- let name,value = ''
|
|
|
- e.forEach((res) => {
|
|
|
- if (res.filed == 'dlmc' || res.filed == 'qslx') name = res.data
|
|
|
- if (res.filed == 'siweiarea') value = res.data
|
|
|
-
|
|
|
+ const countByName = element.data.reduce((acc, e) => {
|
|
|
+ let name, value = ''
|
|
|
+ e.forEach((res) => {
|
|
|
+ if (res.filed == 'dlmc' || res.filed == 'qslx') name = res.data
|
|
|
+ if (res.filed == 'siweiarea') value = res.data
|
|
|
+
|
|
|
})
|
|
|
- acc[name] = (acc[name] || 0) + value;
|
|
|
- if(element.dataname=='权属')
|
|
|
- {
|
|
|
- if(!this.echartList[name])this.echartList[name]=[]
|
|
|
- this.echartList[name].push(e)
|
|
|
- }
|
|
|
- return acc;
|
|
|
- }, {});
|
|
|
-
|
|
|
+ acc[name] = (acc[name] || 0) + value;
|
|
|
+ if (element.dataname == '权属') {
|
|
|
+ if (!this.echartList[name]) this.echartList[name] = []
|
|
|
+ this.echartList[name].push(e)
|
|
|
+ }
|
|
|
+ return acc;
|
|
|
+ }, {});
|
|
|
+
|
|
|
Object.keys(countByName).forEach((key) => {
|
|
|
- edata.push({name:key,value:this.compute(countByName[key])})
|
|
|
+ edata.push({ name: key, value: this.compute(countByName[key]) })
|
|
|
});
|
|
|
edata.sort((a, b) => b.value - a.value);
|
|
|
// }
|
|
|
- this.setEchart(edata,'vertical',index)
|
|
|
+ this.setEchart(edata, 'vertical', index)
|
|
|
|
|
|
// store.state.query_pick_pane.push({
|
|
|
// name: element.dataname,
|
|
@@ -438,13 +439,15 @@ export default {
|
|
|
}
|
|
|
</style>
|
|
|
<style lang="scss" scoped>
|
|
|
-.echart{
|
|
|
+.echart {
|
|
|
width: 300px;
|
|
|
height: 420px;
|
|
|
}
|
|
|
-.echart1{
|
|
|
+
|
|
|
+.echart1 {
|
|
|
height: 280px;
|
|
|
}
|
|
|
+
|
|
|
.multi_level_query_table {
|
|
|
position: absolute;
|
|
|
top: 7rem;
|