diff --git a/src/assets/styles/index.scss b/src/assets/styles/index.scss index b5b8dfe..8edcebd 100644 --- a/src/assets/styles/index.scss +++ b/src/assets/styles/index.scss @@ -179,3 +179,5 @@ aside { margin-bottom: 10px; } } + + diff --git a/src/views/map.vue b/src/views/map.vue index 3dbd4bb..691cb0d 100644 --- a/src/views/map.vue +++ b/src/views/map.vue @@ -65,6 +65,7 @@ :class="currentModelIndex == index ? 'activeBtn' : ''" v-for="(item, index) in mapModel" :key="index" + @click="changeModel(index)" > {{ item }} @@ -82,7 +83,130 @@ - + + +
+
基本信息
+
+
地址：
+
{{ info.address }}
+
+
+
办公时间：
+
{{ info.officeHours }}
+
+
+
联系电话：
+
{{ info.phone }}
+
+
+
封面：
+
+ +
+ + 图片加载出错 +
+ +
+
+ +
+ 办理业务 +
+
+
{{ item.title }}
+ +
+
+
{{ subIndex + 1 }}. {{ subItem.simpleName }}
+
+
+
+ + + + +
+
+
业务名称：
+
{{ businessInfo.businessName }}
+
+
+
业务简称：
+
{{ businessInfo.simpleName }}
+
+
+
申办条件：
+
{{ businessInfo.businessInstructions }}
+
+
+
申办要求：
+
{{ businessInfo.businessGuide }}
+
+
+
相关材料：
+
+
+
{{ item.name }}
+
+ 参考样本 + +
+
+
+
+
+
法定时限：
+
{{ businessInfo.legaltime }}
+
+
+
承诺时限：
+
{{ businessInfo.promisetime }}
+
+
+ + + @@ -100,6 +224,7 @@ import { getEnterpriseTree, } from "@/api/mapApi"; import { ref, reactive, onMounted, onUnmounted } from "vue"; +const baseUrl = import.meta.env.VITE_APP_BASE_API; let options = reactive({ scene: { center: { @@ -174,9 +299,14 @@ let mapLayer = reactive({}); let list = reactive([]); let popupShow = ref(false); let dictList = reactive([]); +let info = reactive({}); +let businessInfo = reactive({}); +const showPreview = ref(false) +let srcList = reactive([]) +let initialIndex = ref(0) const dialogVisible = ref(false); - +const innerVisible = ref(false); let currentIndex = ref(null); let currentModelIndex = ref(0); //树形结构配置 @@ -199,6 +329,44 @@ onUnmounted(() => { document.removeEventListener("click", handleOutsideClick); }); +/** + * + * @param index + * + */ +const lookIamge = (index) => { + + initialIndex.value = index //阅览的索引 + showPreview.value = true + + + + // if (!exampleFile) return; + // const imageItem = document.getElementById(`businessImage` + index); + // console.log('sssddd',) + // imageItem.click(); +}; + +/** + * 获取业务详情 + * @param id + */ +const handleInfoByyewu = async (id) => { + const res = await getbusinessById({ + id, + parent: info.parent, + }); + res.data.srcList = [] + if(res.data.formList.length>0){ + res.data.srcList= res.data.formList.map(item=>{ + return `${baseUrl}/api/yzt-data/file/otherImage?name=${item.exampleFile}&imgname=${item.name}` + }) + } + + businessInfo = res.data; + innerVisible.value = true; +}; + /** * 获取详情 * @param id @@ -309,13 +477,13 @@ const initMarker = (item, flyTo = false, markerLength = 0) => { mapLayer.markerLayer.addGraphic(graphic); mapLayer.markerLayer.enabledEvent = true; // 恢复事件 - // //图标单击事件 - // graphic.on(mars3d.EventType.click, async (event) => { - // const infoItem = event.target.attr; - // this.info = await this.getInfo(infoItem.id, infoItem.lonLat); - // this.queryParams.name = this.info.pointName; - // this.dialogVisible = true; - // }); + //图标单击事件 + graphic.on(mars3d.EventType.click, async (event) => { + const infoItem = event.target.attr; + info = await getInfo(infoItem.id, infoItem.lonLat); + queryParams.name = info.pointName; + dialogVisible.value = true; + }); if (markerLength > 0) { graphic.openHighlight(); @@ -388,6 +556,57 @@ const finishTree = () => { drawer.value = false; }; +/** + * 二三维地图变化 + * @param index + */ +const changeModel = (index) => { + if (currentModelIndex.value != index) { + currentModelIndex.value = index; + if (index == 1) { + if (mapLayer.tiles3dLayer == undefined) { + mapLayer.tiles3dLayer = new mars3d.layer.TilesetLayer({ + name: "模型名称", + url: "http://localhost:9090/B3dmqlh06/tileset.json", + maximumScreenSpaceError: 16, + maxMemory: 1024, // 最大缓存内存大小(MB) + matrixMove: { + hasMiddle: false, + }, + flyTo: true, + // cacheBytes: 1073741824, // 1024MB = 1024*1024*1024 【重要】额定显存大小(以字节为单位)，允许在这个值上下波动。 + // maximumCacheOverflowBytes: 2147483648, // 2048MB = 2048*1024*1024 【重要】最大显存大小(以字节为单位)。 + // maximumMemoryUsage: 512, //【cesium 1.107+弃用】内存建议显存大小的50%左右，内存分配变小有利于倾斜摄影数据回收，提升性能体验 + // skipLevelOfDetail: true, //是Cesium在1.5x 引入的一个优化参数，这个参数在金字塔数据加载中，可以跳过一些级别，这样整体的效率会高一些，数据占用也会小一些。但是带来的异常是：1） 加载过程中闪烁，看起来像是透过去了，数据载入完成后正常。2，有些异常的面片，这个还是因为两级LOD之间数据差异较大，导致的。当这个参数设置false，两级之间的变化更平滑，不会跳跃穿透，但是清晰的数据需要更长，而且还有个致命问题，一旦某一个tile数据无法请求到或者失败，导致一直不清晰。所以我们建议：对于网络条件好，并且数据总量较小的情况下，可以设置false，提升数据显示质量。 + // loadSiblings: true, // 如果为true则不会在已加载完模型后，自动从中心开始超清化模型 + // cullRequestsWhileMoving: true, + // cullRequestsWhileMovingMultiplier: 10, //【重要】 值越小能够更快的剔除 + // preferLeaves: true, //【重要】这个参数默认是false，同等条件下，叶子节点会优先加载。但是Cesium的tile加载优先级有很多考虑条件，这个只是其中之一，如果skipLevelOfDetail=false，这个参数几乎无意义。所以要配合skipLevelOfDetail=true来使用，此时设置preferLeaves=true。这样我们就能最快的看见符合当前视觉精度的块，对于提升大数据以及网络环境不好的前提下有一点点改善意义。 + // progressiveResolutionHeightFraction: 0.5, //【重要】 数值偏于0能够让初始加载变得模糊 + // dynamicScreenSpaceError: true, // true时会在真正的全屏加载完之后才清晰化模型 + // preloadWhenHidden: true, //tileset.show是false时，也去预加载数据 + }); + map.addLayer(mapLayer.tiles3dLayer); + } else { + mapLayer.tiles3dLayer.show = true; + map.sceneOptionsmap({ + center: { + lat: 31.967646, + lng: 120.847855, + alt: 1250, + heading: 6.6, + pitch: -18.8, + }, + }); + } + } else { + if (mapLayer.tiles3dLayer) { + mapLayer.tiles3dLayer.show = false; + } + } + } +}; + const laoding3d = () => { const tiles3dLayer = new mars3d.layer.TilesetLayer({ name: "模型名称", @@ -603,6 +822,97 @@ const getdictList = async () => { background: #409eff !important; } +::v-deep .info-dialog { + background: rgba(15, 42, 79, 1); + border: 1px solid #094edb; + .el-dialog__title, + .el-dialog__close { + color: #fff !important; + font-weight: bold; + font-size: 22px; + } + .info-title { + font-size: 16px; + color: #fff; + font-weight: 550; + margin-bottom: 15px; + } + .info-box { + max-height: 500px; + overflow-y: auto; + } + .info-row { + display: flex; + align-items: flex-start; + margin-bottom: 10px; + font-size: 14px; + color: #fff; + + .row-lable { + width: 75px; + color: #9acfff; + } + .row-value { + flex: 1; + } + .value-list { + & > div { + padding: 10px 0; + + display: flex; + align-items: center; + justify-content: space-between; + border-bottom: 1px solid rgba(3, 91, 178, 0.5); + .value-list-title { + flex: 1; + } + .value-list-subTitle { + color: #094edb; + margin-left: 3px; + cursor: pointer; + } + } + } + } + ::v-deep .image-slot { + height: 100%; + width: 100%; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + font-size: 20px; + border: 1px solid #094edb; + } + + .yewu-list { + .yewu-title { + margin: 15px 0; + font-size: 15px; + color: #fff; + border-left: 5px solid #409eff; + padding-left: 10px; + } + .list-sub { + cursor: pointer; + display: flex; + align-items: center; + font-size: 14px; + color: #fff; + padding: 10px 0; + border-bottom: 1px solid rgba(3, 91, 178, 0.5); + } + .file-icon { + margin-right: 10px; + height: 20px; + width: 20px; + background: url("@/assets/images/file.png"); + + background-size: 100% 100%; + } + } +} + // 滚动条 /* 设置滚动条整体样式 */ ::-webkit-scrollbar {