|
|
@@ -1,6 +1,15 @@
|
|
|
<!-- -->
|
|
|
<template>
|
|
|
<div class="home">
|
|
|
+ <!-- 机关标识 -->
|
|
|
+ <!-- <a
|
|
|
+ id="_ideConac"
|
|
|
+ href="https://bszs.conac.cn/sitename?method=show&id=3A90AA974EB3C48EE06310291AAC48FC"
|
|
|
+ target="_blank"
|
|
|
+ >
|
|
|
+ <img src="https://dcs.conac.cn/image/nis/red.png" alt="">
|
|
|
+ </a> -->
|
|
|
+
|
|
|
<div id="mars3dContainer" class="mars3d-container"></div>
|
|
|
<div id="zoneControl" @click="showZoneSelect">
|
|
|
<img src="data/layer.png" />
|
|
|
@@ -27,13 +36,25 @@
|
|
|
<!-- 搜索 -->
|
|
|
<div class="search" @keyup.enter="mySearch">
|
|
|
<div class="searchBtn" @click="mySearch"></div>
|
|
|
- <el-input placeholder="搜索村落名称..." suffix-icon="el-icon-search" v-model="name"> </el-input>
|
|
|
+ <el-input
|
|
|
+ placeholder="搜索村落名称..."
|
|
|
+ suffix-icon="el-icon-search"
|
|
|
+ v-model="name"
|
|
|
+ >
|
|
|
+ </el-input>
|
|
|
</div>
|
|
|
<!-- 下面内容 -->
|
|
|
<div class="main">
|
|
|
<div class="mainTop">
|
|
|
- <div :class="{ active: mainInd === 0 }" @click="mainInd = 0">浏览统计</div>
|
|
|
- <div :class="{ active: mainInd === 1 }" @click="mainInd = 1">区域筛选</div>
|
|
|
+ <div :class="{ active: mainInd === 0 }" @click="mainInd = 0">
|
|
|
+ 浏览统计
|
|
|
+ </div>
|
|
|
+ <div :class="{ active: mainInd === 1 }" @click="mainInd = 1">
|
|
|
+ 区域筛选
|
|
|
+ </div>
|
|
|
+ <div :class="{ active: mainInd === 2 }" @click="mainInd = 2">
|
|
|
+ 类型筛选
|
|
|
+ </div>
|
|
|
</div>
|
|
|
<!-- 浏览统计盒子 -->
|
|
|
<div class="mainBox1" v-show="mainInd === 0">
|
|
|
@@ -55,7 +76,12 @@
|
|
|
<div class="details">
|
|
|
<h3>详情统计</h3>
|
|
|
<div class="detailsNum">
|
|
|
- <div class="row" @click.stop="toCun(item.id)" v-for="item in numData" :key="item.id">
|
|
|
+ <div
|
|
|
+ class="row"
|
|
|
+ @click.stop="toCun(item.id)"
|
|
|
+ v-for="item in numData"
|
|
|
+ :key="item.id"
|
|
|
+ >
|
|
|
<div class="rowLeft">{{ item.name }}</div>
|
|
|
<div class="rowRight">
|
|
|
<div class="plan">
|
|
|
@@ -74,9 +100,52 @@
|
|
|
<div>{{ item.name }}</div>
|
|
|
<div class="bs">{{ item.son.length }}</div>
|
|
|
</div>
|
|
|
- <div @click="cutInd(item.id)" class="rr" :class="item.id === mapDataInd ? 'el-icon-arrow-up' : 'el-icon-arrow-down'"></div>
|
|
|
+ <div
|
|
|
+ @click="cutInd(item.id)"
|
|
|
+ class="rr"
|
|
|
+ :class="
|
|
|
+ item.id === mapDataInd
|
|
|
+ ? 'el-icon-arrow-up'
|
|
|
+ : 'el-icon-arrow-down'
|
|
|
+ "
|
|
|
+ ></div>
|
|
|
<div class="sonBox">
|
|
|
- <div @click.stop="toCun(val.id)" :class="{ active: item.id === mapDataInd }" v-for="val in item.son" :key="val.id">· {{ val.name }}</div>
|
|
|
+ <div
|
|
|
+ @click.stop="toCun(val.id)"
|
|
|
+ :class="{ active: item.id === mapDataInd }"
|
|
|
+ v-for="val in item.son"
|
|
|
+ :key="val.id"
|
|
|
+ >
|
|
|
+ · {{ val.name }}
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <!-- 类型筛选合作 -->
|
|
|
+ <div class="mainBox2" v-show="mainInd === 2">
|
|
|
+ <div class="box2Row" v-for="item in gongNengData" :key="item.id">
|
|
|
+ <div class="ll" @click="cutInd(item.id, true)">
|
|
|
+ <div>{{ item.name }}</div>
|
|
|
+ <div class="bs">{{ item.son.length }}</div>
|
|
|
+ </div>
|
|
|
+ <div
|
|
|
+ @click="cutInd(item.id, true)"
|
|
|
+ class="rr"
|
|
|
+ :class="
|
|
|
+ item.id === gongNengInd
|
|
|
+ ? 'el-icon-arrow-up'
|
|
|
+ : 'el-icon-arrow-down'
|
|
|
+ "
|
|
|
+ ></div>
|
|
|
+ <div class="sonBox">
|
|
|
+ <div
|
|
|
+ @click.stop="toCun(val.id)"
|
|
|
+ :class="{ active: item.id === gongNengInd }"
|
|
|
+ v-for="val in item.son"
|
|
|
+ :key="val.id"
|
|
|
+ >
|
|
|
+ · {{ val.name }}
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
@@ -84,11 +153,19 @@
|
|
|
|
|
|
<div class="special_topic">
|
|
|
<img src="../assets/img/icon_q&a.png" @click="showQA = true" alt="" />
|
|
|
- <img src="../assets/img/icon_special_topic.png" alt="" @click="topicModalVisible = true" />
|
|
|
+ <img
|
|
|
+ src="../assets/img/icon_special_topic.png"
|
|
|
+ alt=""
|
|
|
+ @click="topicModalVisible = true"
|
|
|
+ />
|
|
|
</div>
|
|
|
</div>
|
|
|
<!-- 加载中 -->
|
|
|
- <div class="homeLoading" :class="{ homeLoadingNone: isLoading }" v-loading="true"></div>
|
|
|
+ <div
|
|
|
+ class="homeLoading"
|
|
|
+ :class="{ homeLoadingNone: isLoading }"
|
|
|
+ v-loading="true"
|
|
|
+ ></div>
|
|
|
<topic :value="topicModalVisible" @close="topicModalVisible = false" />
|
|
|
<QA v-if="showQA" @closeQA="showQA = false"></QA>
|
|
|
</div>
|
|
|
@@ -262,6 +339,47 @@ export default {
|
|
|
villageLabel: null,
|
|
|
villageLabels: [],
|
|
|
// zoneLayer: null,
|
|
|
+
|
|
|
+ //类型划分模块
|
|
|
+ gongNengInd: null,
|
|
|
+ gongNengData: [
|
|
|
+ {
|
|
|
+ id: 10001,
|
|
|
+ name: "宗祠建筑",
|
|
|
+ son: [
|
|
|
+ { id: 3, name: "卢边村" },
|
|
|
+ { id: 10, name: "浮石村" },
|
|
|
+ { id: 2, name: "良溪村" },
|
|
|
+ { id: 6, name: "霄南村" },
|
|
|
+ { id: 7, name: "歇马村" },
|
|
|
+ ],
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: 10002,
|
|
|
+ name: "洋楼、书室建筑",
|
|
|
+ son: [{ id: 12, name: "横江村" }],
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: 10003,
|
|
|
+ name: "侨乡碉楼、居庐建筑",
|
|
|
+ son: [
|
|
|
+ { id: 5, name: "仓前村" },
|
|
|
+ { id: 11, name: "浮月村" },
|
|
|
+ { id: 9, name: "马降龙村" },
|
|
|
+ { id: 8, name: "自力村" },
|
|
|
+ ],
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: 10004,
|
|
|
+ name: "民居建筑",
|
|
|
+ son: [{ id: 1, name: "东宁村" }],
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: 10005,
|
|
|
+ name: "客家建筑",
|
|
|
+ son: [{ id: 4, name: "田心村" }],
|
|
|
+ },
|
|
|
+ ],
|
|
|
};
|
|
|
},
|
|
|
//监听属性 类似于data概念
|
|
|
@@ -285,7 +403,7 @@ export default {
|
|
|
|
|
|
// 监听地图缩放
|
|
|
map.controls.distanceLegend.on(mars3d.EventType.change, function (event) {
|
|
|
- console.log("比例尺发生变化", event);
|
|
|
+ // console.log("比例尺发生变化", event);
|
|
|
|
|
|
const obj = {
|
|
|
20000: [],
|
|
|
@@ -325,7 +443,11 @@ export default {
|
|
|
const acInfo = this.villagePos.find((v) => v.id === id) || {};
|
|
|
|
|
|
const graphic = new mars3d.graphic.DivGraphic({
|
|
|
- position: new mars3d.LngLatPoint(acInfo.position[0], acInfo.position[1], 100),
|
|
|
+ position: new mars3d.LngLatPoint(
|
|
|
+ acInfo.position[0],
|
|
|
+ acInfo.position[1],
|
|
|
+ 100
|
|
|
+ ),
|
|
|
style: {
|
|
|
html: `
|
|
|
<div class="lableContent" _id=${id} >
|
|
|
@@ -339,7 +461,12 @@ export default {
|
|
|
horizontalOrigin: mars3d.Cesium.HorizontalOrigin.LEFT,
|
|
|
verticalOrigin: mars3d.Cesium.VerticalOrigin.BOTTOM,
|
|
|
// distanceDisplayCondition: new mars3d.Cesium.DistanceDisplayCondition(0, 30000), // 按视距距离显示
|
|
|
- scaleByDistance: new mars3d.Cesium.NearFarScalar(1000, 1.5, 12000, 0.8),
|
|
|
+ scaleByDistance: new mars3d.Cesium.NearFarScalar(
|
|
|
+ 1000,
|
|
|
+ 1.5,
|
|
|
+ 12000,
|
|
|
+ 0.8
|
|
|
+ ),
|
|
|
clampToGround: true,
|
|
|
},
|
|
|
attr: {
|
|
|
@@ -360,9 +487,14 @@ export default {
|
|
|
zoneSelect.style.display = "flex";
|
|
|
}
|
|
|
},
|
|
|
- cutInd(id) {
|
|
|
- if (this.mapDataInd === id) this.mapDataInd = null;
|
|
|
- else this.mapDataInd = id;
|
|
|
+ cutInd(id, val) {
|
|
|
+ if (val) {
|
|
|
+ if (this.gongNengInd === id) this.gongNengInd = null;
|
|
|
+ else this.gongNengInd = id;
|
|
|
+ } else {
|
|
|
+ if (this.mapDataInd === id) this.mapDataInd = null;
|
|
|
+ else this.mapDataInd = id;
|
|
|
+ }
|
|
|
},
|
|
|
mySearch() {
|
|
|
console.log("点击了搜索", this.name);
|
|
|
@@ -500,7 +632,11 @@ export default {
|
|
|
//生命周期 - 创建完成（可以访问当前this实例）
|
|
|
async created() {
|
|
|
// 移动端和pc端的切换
|
|
|
- if (window.navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i)) {
|
|
|
+ if (
|
|
|
+ window.navigator.userAgent.match(
|
|
|
+ /(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i
|
|
|
+ )
|
|
|
+ ) {
|
|
|
// 移动端
|
|
|
if (window.location.href.includes("web")) {
|
|
|
window.location.href = window.location.href.replace("web", "webM");
|
|
|
@@ -566,6 +702,18 @@ export default {
|
|
|
background-size: cover;
|
|
|
overflow: hidden;
|
|
|
|
|
|
+ // 机关标识
|
|
|
+ #_ideConac{
|
|
|
+ position: absolute;
|
|
|
+ z-index: 99999;
|
|
|
+ top: 20px;
|
|
|
+ left: 20px;
|
|
|
+ &>img{
|
|
|
+ width: 50px;
|
|
|
+ height: auto;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
.homeLoading {
|
|
|
position: absolute;
|
|
|
top: 0;
|
|
|
@@ -733,9 +881,9 @@ export default {
|
|
|
height: 40px;
|
|
|
color: #e8e0d1;
|
|
|
border-bottom: 1px solid #e8e0d1;
|
|
|
- padding: 0 40px;
|
|
|
+ // padding: 0 40px;
|
|
|
justify-content: space-between;
|
|
|
- font-size: 22px;
|
|
|
+ font-size: 20px;
|
|
|
|
|
|
& > div {
|
|
|
cursor: pointer;
|
|
|
@@ -989,7 +1137,7 @@ export default {
|
|
|
align-items: center;
|
|
|
position: absolute;
|
|
|
bottom: 30px;
|
|
|
- left: 5px;
|
|
|
+ left: 50px;
|
|
|
width: 40px;
|
|
|
height: 40px;
|
|
|
background-color: rgba(0, 16, 56, 0.7);
|
