From 2fae357b20387b35a7cf0768120c2d9297b5fe08 Mon Sep 17 00:00:00 2001
From: 584911253@qq.com <584911253@qq.com>
Date: 星期五, 03 三月 2023 15:52:10 +0800
Subject: [PATCH] 空间查询属性点击事件，附件查看
---
src/components/MapView/mapSpaceTop.vue | 2
src/components/MapView/mapMenuTop.vue | 4
src/components/MapView/mapMenuPop.vue | 36 ++++++++
src/components/mapsdk.vue | 177 ++++++++++++++++++++++++++++++++++++++++++-
src/components/MapView/mapSpacePop.vue | 2
5 files changed, 208 insertions(+), 13 deletions(-)
diff --git a/src/components/MapView/mapMenuPop.vue b/src/components/MapView/mapMenuPop.vue
index d5d9419..ce7b278 100644
--- a/src/components/MapView/mapMenuPop.vue
+++ b/src/components/MapView/mapMenuPop.vue
@@ -546,7 +546,7 @@
this.imagePoint = null;
}
var wkt = this.$wkt.parse(val1);
- this.setMapLoaction(wkt);
+ this.setMapLoaction(wkt,row);
}
},
setMapLoaction(res) {
@@ -604,6 +604,7 @@
this.listdata.pageIndex = 1;
this.listdata.pageSize = 10;
this.listdata.name = res.entity;
+ this.$store.state.propertiesName = res;
this.getTableDateHidder();
},
handleSizeChange(val) {
@@ -642,6 +643,7 @@
},
async showAllImage(res) {
for (var i in res) {
+ let properties = res[i];
var param = {
gid: res[i].gid,
name: this.listdata.name,
@@ -654,7 +656,7 @@
if (val1) {
var wkt = this.$wkt.parse(val1);
// this.getprimitiLayer(wkt);
- this.primitivesAddLayer(wkt);
+ this.primitivesAddLayer(wkt,properties);
}
}
},
@@ -667,7 +669,7 @@
break;
}
},
- primitivesAddLayer(res) {
+ primitivesAddLayer(res,properties) {
switch (res.type) {
case "Point":
var val = Cesium.Cartesian3.fromDegrees(
@@ -676,6 +678,8 @@
);
var point = Viewer.entities.add({
position: val,
+ properties:properties,
+ tag : "properties_point",
billboard: {
// 鍥惧儚鍦板潃锛孶RI鎴朇anvas鐨勫睘鎬�
image: SmartEarthRootUrl + "Workers/image/mark.png",
@@ -694,6 +698,29 @@
});
point.billboard.disableDepthTestDistance = Number.POSITIVE_INFINITY;
this.$store.state.queryInfo.push(point);
+ //鐐瑰嚮浜嬩欢
+ window.propertieshandler = new Cesium.ScreenSpaceEventHandler(
+ sgworld.Viewer.scene.canvas
+ );
+ window.propertieshandler.setInputAction(event => {
+ let pick = sgworld.Viewer.scene.pick(event.position);
+ // debugger;
+ if (pick && pick.id && pick.id.tag == "properties_point") {
+ this.$store.state.propertiesFlag = '1';
+ let properties = pick.id.properties;
+ let propertyNames = pick.id.properties.propertyNames;
+ let obj = {};
+ obj["eventid"] = properties['_eventid']._value;
+ this.attributeData.forEach(item => {
+ propertyNames.forEach(itemElement => {
+ if (itemElement == item.field){
+ obj[item.alias] = properties[itemElement]._value
+ }
+ })
+ })
+ this.$store.state.propertiesInfo = obj;
+ }
+ }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
break;
case "LineString":
case "MultiLineString":
@@ -752,6 +779,9 @@
}
});
},
+ destroyed() {
+ this.$store.state.propertiesFlag = null;
+ }
};
</script>
diff --git a/src/components/MapView/mapMenuTop.vue b/src/components/MapView/mapMenuTop.vue
index b793550..b5d17dc 100644
--- a/src/components/MapView/mapMenuTop.vue
+++ b/src/components/MapView/mapMenuTop.vue
@@ -343,8 +343,8 @@
getCheckedNodes() {
var valTree = this.$refs.tree.getCheckedNodes()
if (valTree.length == 0) return
-
- this.menuTopFrom.queryLayer = valTree[0].tabDesc
+ this.menuTopFrom.queryLayer = valTree[0].tabDesc;
+ this.$store.state.propertiesName = valTree[0];
for (var i = 0; i < valTree.length; i++) {
if (valTree[i].entity) {
this.treeChange.push(valTree[i])
diff --git a/src/components/MapView/mapSpacePop.vue b/src/components/MapView/mapSpacePop.vue
index 7ff8102..f00e178 100644
--- a/src/components/MapView/mapSpacePop.vue
+++ b/src/components/MapView/mapSpacePop.vue
@@ -443,6 +443,8 @@
let properties = pick.id.properties;
let propertyNames = pick.id.properties.propertyNames;
let obj = {};
+ obj["eventid"] = properties['_eventid']._value;
+ // debugger
this.attributeData.forEach(item => {
propertyNames.forEach(itemElement => {
if (itemElement == item.field) {
diff --git a/src/components/MapView/mapSpaceTop.vue b/src/components/MapView/mapSpaceTop.vue
index de3cd91..71d8dfb 100644
--- a/src/components/MapView/mapSpaceTop.vue
+++ b/src/components/MapView/mapSpaceTop.vue
@@ -151,7 +151,7 @@
this.mapSpaceQueryLayer = value;
this.layerData.forEach(item => {
if (this.menuTopFrom.queryLayer == item.entity){
- this.$store.state.propertiesName = item.tabDesc;
+ this.$store.state.propertiesName = item;
}
})
this.getCheckedNodes();
diff --git a/src/components/mapsdk.vue b/src/components/mapsdk.vue
index ce5fc51..42a1afa 100644
--- a/src/components/mapsdk.vue
+++ b/src/components/mapsdk.vue
@@ -351,8 +351,9 @@
>
<el-card class="box-card">
<div slot="header">
- <span>{{$store.state.propertiesName}}</span>
+ <span>{{$store.state.propertiesName.tabDesc || '灞炴�т俊鎭�'}}</span>
<div style="float: right; cursor: pointer">
+ <el-link type="primary" :underline="false" @click="getAttatchList" style="margin-right: 10px">鏌ョ湅闄勪欢</el-link>
<i
class="el-icon-close"
@click="closeBufferBox(6)"
@@ -368,12 +369,84 @@
v-for="(value, key) in $store.state.propertiesInfo"
:key="key"
>
- <span style="font-size: 14px;font-weight: bold;margin-right: 5px">{{key}}:</span>
- <span>{{value}}</span>
+ <span v-if="key != 'eventid'" style="font-size: 14px;font-weight: bold;margin-right: 5px">{{key}}:</span>
+ <span v-if="key != 'eventid'">{{value}}</span>
</div>
</div>
</el-card>
</div>
+ <!--闄勪欢鍒楄〃寮圭獥-->
+ <el-dialog
+ title="闄勪欢鍒楄〃"
+ :append-to-body="false"
+ :visible.sync="showAttach"
+ width="30%"
+ :close-on-click-modal="false"
+ >
+ <div>
+ <el-table
+ :data="attachList"
+ height="100%"
+ style="width: 100%"
+ border
+ >
+ <el-table-column
+ align="center"
+ type="index"
+ label="搴忓彿"
+ width="50"
+ />
+ <el-table-column
+ prop="name"
+ label="鍚嶇О"
+ width="150">
+ </el-table-column>
+ <el-table-column
+ prop="createTime"
+ label="鏃堕棿"
+ width="150">
+ </el-table-column>
+ <el-table-column
+ label="鎿嶄綔"
+ width="100">
+ <template slot-scope="scope">
+ <el-button v-if="showAttachDetailBtn(scope.row)" @click="showAttachDetail(scope.row)" type="text" size="small">鏌ョ湅</el-button>
+ </template>
+ </el-table-column>
+ </el-table>
+ </div>
+ </el-dialog>
+ <!--闄勪欢寮圭獥-->
+ <el-dialog
+ title="棰勮"
+ :append-to-body="false"
+ :visible.sync="dialog.dialogVisible"
+ width="70%"
+ :close-on-click-modal="false"
+ >
+ <div
+ v-if="dialog.isPdf"
+ class="pdfClass"
+ >
+ <iframe
+ :src="dialog.src"
+ type="application/x-google-chrome-pdf"
+ width="100%"
+ height="100%"
+ >
+ </iframe>
+ </div>
+ <div
+ v-if="dialog.isJpg"
+ class="pdfClass"
+ >
+ <img
+ style="width:100%; height:100%;background: red"
+ :src="dialog.src"
+ alt=""
+ />
+ </div>
+ </el-dialog>
<!-- <div-->
<!-- @click="changeMenulayer"-->
<!-- class="center CenDiv"-->
@@ -391,13 +464,14 @@
<script>
import $ from "jquery";
import mapMenuTop from "./MapView/mapMenuTop.vue";
-
import mapSpaceTop from "./MapView/mapSpaceTop.vue";
import {
select_Comprehensive_ByPageAndCount,
select_Comprehensive_SelectWktById,
comprehensive_selectRoute,
+ dataLib_selectFiles
} from "../api/api";
+import {getToken} from '@/utils/auth'
export default {
name: "",
@@ -436,7 +510,6 @@
lon: "",
lat: "",
},
-
rules: {
lon: [
{ required: true, message: "璇疯緭鍏ヨ捣鐐圭粡绾害鍧愭爣", trigger: "blur" },
@@ -481,7 +554,6 @@
layer3: null,
isActive: false,
isMenuLayer: true,
- selFrom: {},
selectTree: null,
showTerrainLevelDialog: false,
menuList: [],
@@ -492,7 +564,16 @@
show2DMap: false,
terrainFrom: {
height: '10'
- }, showLengendDialog: false,
+ },
+ showLengendDialog: false,
+ showAttach:false,
+ attachList:[],
+ dialog: {
+ dialogVisible: false,
+ isPdf: false,
+ isJpg: false,
+ src: ''
+ }
};
},
mounted() {
@@ -1079,6 +1160,82 @@
}
this.$bus.$emit("changemapType", this.show2DMap);
},
+ //鑾峰彇闄勪欢鍒楄〃
+ async getAttatchList() {
+ let tabName = this.$store.state.propertiesName.ns+'.'+this.$store.state.propertiesName.tab;
+ let eventid = this.$store.state.propertiesInfo.eventid;
+ var obj = {
+ eventid:eventid,
+ tabName:tabName,
+ };
+ const res = await dataLib_selectFiles(obj);
+ if (res.code != 200) {
+ this.$message.error('闄勪欢鏌ヨ澶辫触');
+ return
+ }
+ if (res.result.length <= 0) {
+ this.$message.error('鏆傛棤闄勪欢');
+ return
+ }
+ this.attachList = res.result;
+ this.showAttach = true;
+ },
+ //鏄惁鏄剧ず鏌ョ湅鎸夐挳
+ showAttachDetailBtn(row){
+ var name = row.name;
+ if (name.indexOf('.pdf') != -1 || name.indexOf('.jpg') != -1 || name.indexOf('.gif') != -1 || name.indexOf('.png') != -1 || name.indexOf('.jpeg') != -1) {
+ return true;
+ }
+ return false;
+ },
+ //鏁版嵁鍒濆鍖�
+ refreshAttatchDetail() {
+ this.dialog.src = "";
+ this.dialog.dialogVisible = false;
+ this.dialog.isPdf = false;
+ this.dialog.isJpg = false;
+ },
+ //鏌ョ湅闄勪欢
+ showAttachDetail(row){
+ this.refreshAttatchDetail();
+ var name = row.name;
+ if (name.indexOf('.pdf') != -1) {
+ this.dialog.dialogVisible = true;
+ this.dialog.isPdf = true;
+ var url = BASE_URL + "/res/downloadForView?guid=" + row.guid + "&token=" + getToken();
+ this.dialog.src = url
+ }
+ else if (name.indexOf('.jpg') != -1 || name.indexOf('.gif') != -1 || name.indexOf('.png') != -1 || name.indexOf('.jpeg') != -1) {
+ this.dialog.dialogVisible = true;
+ this.dialog.isJpg = true;
+ var url = BASE_URL + "/res/downloadForView?guid=" + row.guid + "&token=" + getToken();
+ this.dialog.src = url
+ }
+ },
+ //鏍煎紡鍖栨椂闂�
+ format(shijianchuo) {
+ //shijianchuo鏄暣鏁帮紝鍚﹀垯瑕乸arseInt杞崲
+ var time = new Date(shijianchuo);
+ var y = time.getFullYear();
+ var m = time.getMonth() + 1;
+ var d = time.getDate();
+ var h = time.getHours();
+ var mm = time.getMinutes();
+ var s = time.getSeconds();
+ return (
+ y +
+ '-' +
+ this.add0(m) +
+ '-' +
+ this.add0(d) +
+ ' ' +
+ h +
+ ':' +
+ mm +
+ ':' +
+ s
+ );
+ },
},
};
</script>
@@ -1331,6 +1488,12 @@
background-size: contain;
}
+.pdfClass {
+ height: 70vh;
+ width: 100%;
+ position: relative;
+}
+
// .menuSelect .el-input__inner {
// background: rgba(255, 255, 255, 0.2) !important;
// color: white !important;
--
Gitblit v1.9.3