1430 lines
42 KiB
Vue
1430 lines
42 KiB
Vue
|
<template>
|
|||
|
|
<div class="index">
|
|||
|
|
<div class="banner">
|
|||
|
|
<img src="../../static/images/banner_index.jpg" alt="">
|
|||
|
|
<div class="banner_con">
|
|||
|
|
<div class="banner_top">
|
|||
|
|
<p>
|
|||
|
|
面向数据样品贡献方需求，构建用户体验良好的数据样品目录信息平台。
|
|||
|
|
</p>
|
|||
|
|
<p>
|
|||
|
|
提供便捷安全的数据录入，统计分析和可视化检索工具，服务数据样品贡献者、资助机构和管理机构。
|
|||
|
|
</p>
|
|||
|
|
</div>
|
|||
|
|
<div class="banner_bot">
|
|||
|
|
<div class="bot_left">
|
|||
|
|
<div class="left1">
|
|||
|
|
<p>建立深海所海洋地球科学数据样品信息目录</p>
|
|||
|
|
</div>
|
|||
|
|
<div class="left2">
|
|||
|
|
<div class="left2_1">
|
|||
|
|
<p>56,204</p>
|
|||
|
|
<span>数据样品数</span>
|
|||
|
|
</div>
|
|||
|
|
<div class="left2_1">
|
|||
|
|
<p>260</p>
|
|||
|
|
<span>数据集个数</span>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="bot_right">
|
|||
|
|
<div class="right1">
|
|||
|
|
<p>依托两器、两船等各类海洋科考平台、设备开展航次科考</p>
|
|||
|
|
</div>
|
|||
|
|
<div class="right2">
|
|||
|
|
<div class="right2_1">
|
|||
|
|
<p>204</p>
|
|||
|
|
<span>航次个数</span>
|
|||
|
|
</div>
|
|||
|
|
<div class="right2_1">
|
|||
|
|
<p>360</p>
|
|||
|
|
<span>航次天数</span>
|
|||
|
|
</div>
|
|||
|
|
<div class="right2_1">
|
|||
|
|
<p>204</p>
|
|||
|
|
<span>“深海勇士”号潜次数</span>
|
|||
|
|
</div>
|
|||
|
|
<div class="right2_1">
|
|||
|
|
<p>204</p>
|
|||
|
|
<span>“奋斗者”号潜次数</span>
|
|||
|
|
</div>
|
|||
|
|
<div class="right2_1">
|
|||
|
|
<p>5,623</p>
|
|||
|
|
<span>航行里程</span>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<!-- <div class="guiji">
|
|||
|
|
<div class="guiji_1">
|
|||
|
|
<img src="../../static/images/guiji.png" alt="">
|
|||
|
|
</div>
|
|||
|
|
<div class="guiji_2">
|
|||
|
|
<div class="daohang">
|
|||
|
|
<ul>
|
|||
|
|
<li>
|
|||
|
|
<a href="###" @click="allBtn">All</a>
|
|||
|
|
</li>
|
|||
|
|
<li>
|
|||
|
|
<a href="###" @click="clearBtn">clear</a>
|
|||
|
|
</li>
|
|||
|
|
<li
|
|||
|
|
v-for="(item, index) in didian"
|
|||
|
|
:key="index"
|
|||
|
|
:class="chooseIndex == index ? 'active' : ''"
|
|||
|
|
@click="tochoose(index)"
|
|||
|
|
>
|
|||
|
|
<a href="###">{{ item }}</a>
|
|||
|
|
</li>
|
|||
|
|
</ul>
|
|||
|
|
</div>
|
|||
|
|
<div id="cdc-track" ref="map" style="height: 100%;width:100%;" />
|
|||
|
|
</div>
|
|||
|
|
</div> -->
|
|||
|
|
<div class="guiji">
|
|||
|
|
<div class="guiji_1">
|
|||
|
|
<img src="../../static/images/guiji.png" alt="">
|
|||
|
|
</div>
|
|||
|
|
<div class="guiji_2">
|
|||
|
|
<!-- <img src="../../static/images/guiji_1.jpg" alt="" /> -->
|
|||
|
|
<div class="daohang">
|
|||
|
|
<ul>
|
|||
|
|
<!-- <li>
|
|||
|
|
<a href="###" @click="allBtn">All</a>
|
|||
|
|
</li> -->
|
|||
|
|
<li>
|
|||
|
|
<a href="###" @click="clearBtn">clear</a>
|
|||
|
|
</li>
|
|||
|
|
<li
|
|||
|
|
v-for="(item, index) in didian"
|
|||
|
|
:key="index"
|
|||
|
|
:class="chooseIndex == index ? 'active' : ''"
|
|||
|
|
@click="tochoose(index)"
|
|||
|
|
>
|
|||
|
|
<a href="###">{{ item }}</a>
|
|||
|
|
</li>
|
|||
|
|
</ul>
|
|||
|
|
</div>
|
|||
|
|
<div id="map" ref="map" style="height: 100%;width:100%;">
|
|||
|
|
<div class="son" style="display: none;">弹框插槽</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="shuju">
|
|||
|
|
<div class="shuju1">
|
|||
|
|
<div class="shuju1_top">
|
|||
|
|
<img src="../../static/images/shuju.png" alt="">
|
|||
|
|
</div>
|
|||
|
|
<div class="shuju1_con">
|
|||
|
|
<ul>
|
|||
|
|
<li @click="turnPage('physicalIndex')">
|
|||
|
|
<img src="../../static/images/diqiu.png" alt="">
|
|||
|
|
<p>海洋地球物理与物理海洋</p>
|
|||
|
|
<p class="sourceData">数据集：<span>-</span> 个 体量：<span>-</span> GB</p>
|
|||
|
|
</li>
|
|||
|
|
<li @click="turnPage('biologyIndex')">
|
|||
|
|
<img src="../../static/images/yangpin.png" alt="">
|
|||
|
|
<p>海洋生物样品信息（待开发）</p>
|
|||
|
|
<p class="sourceData">数据集：<span>-</span> 个 体量：<span>-</span> GB</p>
|
|||
|
|
</li>
|
|||
|
|
<li>
|
|||
|
|
<img src="../../static/images/dizhi.png" alt="">
|
|||
|
|
<p>海洋地质与地球化学（待开发）</p>
|
|||
|
|
<p class="sourceData">数据集：<span>-</span> 个 体量：<span>-</span> GB</p>
|
|||
|
|
</li>
|
|||
|
|
<li>
|
|||
|
|
<img src="../../static/images/dongwu.png" alt="">
|
|||
|
|
<p>哺乳动物与海洋声学（待开发）</p>
|
|||
|
|
<p class="sourceData">数据集：<span>-</span> 个 体量：<span>-</span> GB</p>
|
|||
|
|
</li>
|
|||
|
|
<li @click="turnPage('phoneVideoIndex')">
|
|||
|
|
<img src="../../static/images/shipin.png" alt="">
|
|||
|
|
<p>深海视频音像图元（待开发）</p>
|
|||
|
|
<p class="sourceData">数据集：<span>-</span> 个 体量：<span>-</span> GB</p>
|
|||
|
|
</li>
|
|||
|
|
</ul>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="shuju2">
|
|||
|
|
<div class="shuju2_top cursor" @click="turnPage('physicalDataSearchCTD')">
|
|||
|
|
<img src="../../static/images/shuju1.png" alt="">
|
|||
|
|
</div>
|
|||
|
|
<div class="shuju2_con">
|
|||
|
|
<div class="swiper-visualization wow fadeInUp">
|
|||
|
|
<div class="swiper-visualization-box">
|
|||
|
|
<swiper ref="visualizationSwiper" :options="swiperOptions">
|
|||
|
|
<swiper-slide
|
|||
|
|
v-for="(item, index) in visualizationList"
|
|||
|
|
:key="index"
|
|||
|
|
>
|
|||
|
|
<div class="pic">
|
|||
|
|
<img :src="item.pic" alt="">
|
|||
|
|
</div>
|
|||
|
|
<div class="txt">
|
|||
|
|
<p>0{{ index + 1 }}</p>
|
|||
|
|
<div class="txt1">
|
|||
|
|
<p>{{ item.title }}</p>
|
|||
|
|
<span>{{ item.des }}</span>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="mask" />
|
|||
|
|
</swiper-slide>
|
|||
|
|
</swiper>
|
|||
|
|
<div class="swiper-arrow swiper-prev" />
|
|||
|
|
<div class="swiper-arrow swiper-next" />
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="dongtai">
|
|||
|
|
|
|||
|
|
<el-row>
|
|||
|
|
<el-col :span="12">
|
|||
|
|
<div class="dongtai_top">
|
|||
|
|
<img src="../../static/images/shuju3.png" alt="">
|
|||
|
|
</div>
|
|||
|
|
</el-col>
|
|||
|
|
<el-col :span="12">
|
|||
|
|
<div class="dongtai_top">
|
|||
|
|
<img src="../../static/images/shuju4.png" alt="">
|
|||
|
|
</div>
|
|||
|
|
</el-col>
|
|||
|
|
</el-row>
|
|||
|
|
<div class="dongtai_bot">
|
|||
|
|
<ul>
|
|||
|
|
<li v-for="(item, index) in list" :key="index" @click="turnPage('news')">
|
|||
|
|
<div class="date">
|
|||
|
|
<p>{{ item.day }}</p>
|
|||
|
|
<span>{{ item.date }}</span>
|
|||
|
|
</div>
|
|||
|
|
<div class="des">
|
|||
|
|
<p>{{ item.title }}</p>
|
|||
|
|
<span>{{ item.des }}</span>
|
|||
|
|
</div>
|
|||
|
|
</li>
|
|||
|
|
</ul>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="gongju">
|
|||
|
|
<div class="gongju_top">
|
|||
|
|
<img src="../../static/images/shuju5.png" alt="">
|
|||
|
|
</div>
|
|||
|
|
<div class="gongju_con">
|
|||
|
|
<ul>
|
|||
|
|
<li @click="turnPage('http://10.0.82.239/analysisTools/index','url')">
|
|||
|
|
<img src="../../static/images/mofang.png" alt="">
|
|||
|
|
<p>blast基因分析工具</p>
|
|||
|
|
</li>
|
|||
|
|
<li @click="turnPage('http://10.0.82.239/analysisTools/index','url')">
|
|||
|
|
<img src="../../static/images/mofang.png" alt="">
|
|||
|
|
<p>温盐深分析工具</p>
|
|||
|
|
</li>
|
|||
|
|
<li @click="turnPage('http://10.0.82.239/analysisTools/index','url')">
|
|||
|
|
<img src="../../static/images/mofang.png" alt="">
|
|||
|
|
<p>影像数据物种智能识别</p>
|
|||
|
|
</li>
|
|||
|
|
<li @click="turnPage('http://10.0.82.239/analysisTools/index','url')">
|
|||
|
|
<img src="../../static/images/mofang.png" alt="">
|
|||
|
|
<p>海洋物理生态耦合模式分析</p>
|
|||
|
|
</li>
|
|||
|
|
</ul>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script>
|
|||
|
|
import * as echarts from 'echarts'
|
|||
|
|
import { getVoyage, getVoyageLine
|
|||
|
|
} from '@/api/home'
|
|||
|
|
require('echarts/extension/bmap/bmap')
|
|||
|
|
import { swiper, swiperSlide } from 'vue-awesome-swiper'
|
|||
|
|
import 'swiper/swiper-bundle.css'
|
|||
|
|
/* 初始化变量 */
|
|||
|
|
var viewer
|
|||
|
|
var stationArrList = [] // 收集所有的棋子实例
|
|||
|
|
var stationPrev = '' // 记录上一次点击的站位
|
|||
|
|
var handler = ''
|
|||
|
|
var ellipsoid = null
|
|||
|
|
var elevation_show = document.getElementById('elevation_show') // 水深
|
|||
|
|
var altitude_show = document.getElementById('altitude_show') // 视角高
|
|||
|
|
export default {
|
|||
|
|
name: 'Index',
|
|||
|
|
components: {
|
|||
|
|
swiper,
|
|||
|
|
swiperSlide
|
|||
|
|
},
|
|||
|
|
data() {
|
|||
|
|
return {
|
|||
|
|
movementTimer:null,
|
|||
|
|
iconImgW:require("../../static/images/14-w.png"),
|
|||
|
|
map: null,
|
|||
|
|
visualizationList: [
|
|||
|
|
{
|
|||
|
|
pic: require('../../static/images/shuju2_bg2.png'),
|
|||
|
|
title: '专业数据分析',
|
|||
|
|
des: '载人深潜温盐深数据'
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
pic: require('../../static/images/shuju2_bg.png'),
|
|||
|
|
title: '服务资助航次',
|
|||
|
|
des: '深海技术创新中心共享航次'
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
pic: require('../../static/images/shuju2_bg3.png'),
|
|||
|
|
title: '支撑大科学计划',
|
|||
|
|
des: '应急搜捞应用'
|
|||
|
|
}
|
|||
|
|
],
|
|||
|
|
swiperOptions: {
|
|||
|
|
loop: true,
|
|||
|
|
loopAdditionalSlides: 3,
|
|||
|
|
initialSlide: 1,
|
|||
|
|
spaceBetween: 35,
|
|||
|
|
navigation: {
|
|||
|
|
nextEl: '.swiper-visualization .swiper-next',
|
|||
|
|
prevEl: '.swiper-visualization .swiper-prev'
|
|||
|
|
},
|
|||
|
|
breakpoints: {
|
|||
|
|
768: {
|
|||
|
|
spaceBetween: 10
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
chooseIndex: 0,
|
|||
|
|
didian: [
|
|||
|
|
// { name: 'TS2-17' },
|
|||
|
|
// { name: 'TS2-18' },
|
|||
|
|
// { name: 'TS2-19' },
|
|||
|
|
// { name: 'TS2-20' },
|
|||
|
|
// { name: 'TS2-21' },
|
|||
|
|
// { name: 'TS2-22' },
|
|||
|
|
// { name: 'TS2-23' },
|
|||
|
|
// { name: 'TS2-24' },
|
|||
|
|
// { name: 'TS2-25' },
|
|||
|
|
// { name: 'TS2-26' },
|
|||
|
|
// { name: 'TS2-27' },
|
|||
|
|
// { name: 'TS2-28' }
|
|||
|
|
],
|
|||
|
|
|
|||
|
|
option: {},
|
|||
|
|
|
|||
|
|
list: [
|
|||
|
|
{
|
|||
|
|
title:
|
|||
|
|
'深海工程菌SS-DY31-Ⅱ-W1306-BC-1 样品数据发布，包含4个目、7个科、15个属的共1232个样品数据。',
|
|||
|
|
des: '海底热液循环可以改变海水和洋壳的化学组成，也会影响洋壳的增生和冷却过程，对于理解...',
|
|||
|
|
day: '25',
|
|||
|
|
date: '2023-03'
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
title:
|
|||
|
|
'深海工程菌SS-DY31-Ⅱ-W1306-BC-1 样品数据发布，包含4个目、7个科、15个属的共1232个样品数据。',
|
|||
|
|
des: '海底热液循环可以改变海水和洋壳的化学组成，也会影响洋壳的增生和冷却过程，对于理解...',
|
|||
|
|
day: '25',
|
|||
|
|
date: '2023-03'
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
title:
|
|||
|
|
'深海工程菌SS-DY31-Ⅱ-W1306-BC-1 样品数据发布，包含4个目、7个科、15个属的共1232个样品数据。',
|
|||
|
|
des: '海底热液循环可以改变海水和洋壳的化学组成，也会影响洋壳的增生和冷却过程，对于理解...',
|
|||
|
|
day: '25',
|
|||
|
|
date: '2023-03'
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
title:
|
|||
|
|
'深海工程菌SS-DY31-Ⅱ-W1306-BC-1 样品数据发布，包含4个目、7个科、15个属的共1232个样品数据。',
|
|||
|
|
des: '海底热液循环可以改变海水和洋壳的化学组成，也会影响洋壳的增生和冷却过程，对于理解...',
|
|||
|
|
day: '25',
|
|||
|
|
date: '2023-03'
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
title:
|
|||
|
|
'深海工程菌SS-DY31-Ⅱ-W1306-BC-1 样品数据发布，包含4个目、7个科、15个属的共1232个样品数据。',
|
|||
|
|
des: '海底热液循环可以改变海水和洋壳的化学组成，也会影响洋壳的增生和冷却过程，对于理解...',
|
|||
|
|
day: '25',
|
|||
|
|
date: '2023-03'
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
title:
|
|||
|
|
'深海工程菌SS-DY31-Ⅱ-W1306-BC-1 样品数据发布，包含4个目、7个科、15个属的共1232个样品数据。',
|
|||
|
|
des: '海底热液循环可以改变海水和洋壳的化学组成，也会影响洋壳的增生和冷却过程，对于理解...',
|
|||
|
|
day: '25',
|
|||
|
|
date: '2023-03'
|
|||
|
|
}
|
|||
|
|
]
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
computed: {
|
|||
|
|
swiper() {
|
|||
|
|
return this.$refs.visualizationSwiper.swiper
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
mounted() {
|
|||
|
|
this.init()
|
|||
|
|
|
|||
|
|
// // 引入百度地图 JavaScript API
|
|||
|
|
// const AK = 'uu7pXHZLZOejrWXyTK2lVMHASObAg8Fz'; // 替换为您的百度地图 AK
|
|||
|
|
// const BMapURL = `https://api.map.baidu.com/api?v=2.0&ak=${AK}&callback=onBMapCallback`;
|
|||
|
|
// const script = document.createElement('script');
|
|||
|
|
// script.type = 'text/javascript';
|
|||
|
|
// script.src = BMapURL;
|
|||
|
|
// // script.onerror = reject;
|
|||
|
|
// document.head.appendChild(script);
|
|||
|
|
|
|||
|
|
// // 初始化地图
|
|||
|
|
// window.onBMapCallback = () => {
|
|||
|
|
// const map = new window.BMap.Map(this.$refs.map);
|
|||
|
|
// const point = new window.BMap.Point(107.590814, 19.532274);
|
|||
|
|
// map.centerAndZoom(point, 15);
|
|||
|
|
// map.setMapType(window.BMAP_SATELLITE_MAP); // 设置地图类型为卫星模式
|
|||
|
|
// map.enableScrollWheelZoom(false);
|
|||
|
|
// };
|
|||
|
|
},
|
|||
|
|
methods: {
|
|||
|
|
async init(){
|
|||
|
|
await this.fetchCapabilities()
|
|||
|
|
this.getAllVoyage()
|
|||
|
|
},
|
|||
|
|
turnPage(val, a) {
|
|||
|
|
if (!a) {
|
|||
|
|
this.$router.push({ name: val })
|
|||
|
|
} else {
|
|||
|
|
window.open(val, '_blank')
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
allBtn() {
|
|||
|
|
this.chooseIndex = -1
|
|||
|
|
},
|
|||
|
|
clearBtn() {
|
|||
|
|
this.chooseIndex = -1
|
|||
|
|
this.drawMap([])
|
|||
|
|
},
|
|||
|
|
fetchCapabilities() {
|
|||
|
|
Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiJkY2Y5NWY2Ni1mODQ1LTQ3YTUtYjc4Zi1jYzhjMGI2YzcxMWYiLCJpZCI6MTI5ODMwLCJpYXQiOjE2Nzk0Njk5NTd9.DTH54ioOH-HLqeNIetBe9hFyrPOX2Vp1AQmZzw8TIZ4'
|
|||
|
|
let earthMap = new Cesium.WebMapTileServiceImageryProvider({
|
|||
|
|
url: 'http://124.16.219.154:8080/geoserver/gwc/service/wmts/rest/ne:gmrt_20231018/{TileMatrixSet}/{TileMatrixSet}:{TileMatrix}/{TileRow}/{TileCol}?format=image/jpeg',
|
|||
|
|
layer: 'ne:gmrt_20231018',
|
|||
|
|
style: 'default',
|
|||
|
|
tileMatrixSetID: 'EPSG:4326',
|
|||
|
|
format: 'image/jpeg',
|
|||
|
|
tilingScheme: new Cesium.GeographicTilingScheme()
|
|||
|
|
});
|
|||
|
|
viewer = new Cesium.Viewer('map', {
|
|||
|
|
sceneMode:Cesium.SceneMode.SCENE2D,
|
|||
|
|
shadows: false,
|
|||
|
|
timeline: false,
|
|||
|
|
baseLayerPicker: false,
|
|||
|
|
fullscreenButton: false,
|
|||
|
|
selectionIndicator: false,
|
|||
|
|
homeButton: false,
|
|||
|
|
animation: false,
|
|||
|
|
infoBox: false,
|
|||
|
|
geocoder: false,
|
|||
|
|
navigationHelpButton: false,
|
|||
|
|
imageryProvider: earthMap
|
|||
|
|
});
|
|||
|
|
viewer._cesiumWidget._creditContainer.style.display = 'none'
|
|||
|
|
viewer.scene.sun.show = false
|
|||
|
|
viewer.scene.moon.show = false
|
|||
|
|
viewer.scene.fog.enabled = false
|
|||
|
|
viewer.scene.skyAtmosphere.show = false
|
|||
|
|
viewer.scene.sun.show = false
|
|||
|
|
viewer.scene.skyBox.show = false
|
|||
|
|
viewer.scene.globe.enableLighting = false;
|
|||
|
|
viewer.shadowMap.darkness=0.8;
|
|||
|
|
viewer.scene._sunBloom = false
|
|||
|
|
viewer.scene.globe.showGroundAtmosphere = false;
|
|||
|
|
let coastline = new Cesium.WebMapTileServiceImageryProvider(
|
|||
|
|
{
|
|||
|
|
url: 'http://124.16.219.154:8080/geoserver/gwc/service/wmts/rest/ne:GSHHS_f_L1/{TileMatrixSet}/{TileMatrixSet}:{TileMatrix}/{TileRow}/{TileCol}?format=image/png',
|
|||
|
|
layer: 'ne:GSHHS_f_L1',
|
|||
|
|
style: 'default',
|
|||
|
|
tileMatrixSetID: 'EPSG:4326',
|
|||
|
|
format: 'image/png',
|
|||
|
|
tilingScheme: new Cesium.GeographicTilingScheme()
|
|||
|
|
}
|
|||
|
|
);
|
|||
|
|
viewer.imageryLayers.addImageryProvider(coastline);
|
|||
|
|
|
|||
|
|
Cesium.Camera.DEFAULT_VIEW_RECTANGLE = Cesium.Rectangle.fromDegrees(104.479207, 14.209234, 114.479207, 22.209234);
|
|||
|
|
viewer.camera.flyHome();
|
|||
|
|
handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
|
|||
|
|
handler.setInputAction(function (wheelment) {
|
|||
|
|
var height = viewer.camera.positionCartographic.height;
|
|||
|
|
console.log(height)
|
|||
|
|
if (height > 16576914.758292207) {
|
|||
|
|
viewer.camera.setView({
|
|||
|
|
destination: Cesium.Cartesian3.fromRadians(viewer.camera.positionCartographic.longitude, viewer.camera.positionCartographic.latitude, 16576914.758292207)
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
},Cesium.ScreenSpaceEventType.WHEEL);
|
|||
|
|
viewer.scene.screenSpaceCameraController.enableZoom = true;
|
|||
|
|
},
|
|||
|
|
drawMap(dataList){
|
|||
|
|
// const dataList = [
|
|||
|
|
// {
|
|||
|
|
// lat: 18.23400,
|
|||
|
|
// lon: 109.49100,
|
|||
|
|
// time: '2023-09-18-21:58:35'
|
|||
|
|
// },
|
|||
|
|
// { lon: 109.48983, time: '2023-09-18-21:59:26', lat: 18.23417 },
|
|||
|
|
// { lon: 109.48867, time: '2023-09-18-22:00:06', lat: 18.23417 }
|
|||
|
|
// ]
|
|||
|
|
if(dataList.length){
|
|||
|
|
let degreeArr=[]
|
|||
|
|
for (var i = 0; i < dataList.length; i++) {
|
|||
|
|
this.stationData({lat:Number(dataList[i].lat),lon:Number(dataList[i].lon),time:dataList[i].time}, i);
|
|||
|
|
degreeArr=[]
|
|||
|
|
if(i<dataList.length-1){
|
|||
|
|
degreeArr.push(Number(dataList[i].lon),Number(dataList[i].lat),Number(dataList[i+1].lon),Number(dataList[i+1].lat))
|
|||
|
|
this.drawLine(degreeArr);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}else{
|
|||
|
|
var entitys = viewer.entities._entities._array;
|
|||
|
|
let length = entitys.length;
|
|||
|
|
for(let i=0;i<length; i++){
|
|||
|
|
let item = entitys[0];
|
|||
|
|
viewer.entities.remove(item)
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
/* cesium 绘制线 */
|
|||
|
|
drawLine(degreeArr, sourceId, textName) {
|
|||
|
|
viewer.entities.add({
|
|||
|
|
polyline: { //polyline折线实体
|
|||
|
|
positions: Cesium.Cartesian3.fromDegreesArray(degreeArr),//位置
|
|||
|
|
width: 20,//折线宽度
|
|||
|
|
material: new Cesium.PolylineArrowMaterialProperty(
|
|||
|
|
// glowPower: 0.2,//发光的强度，值为线宽的百分比(0-1.0)
|
|||
|
|
// Cesium.Color.BLUE //发光的颜色
|
|||
|
|
new Cesium.Color.fromCssColorString('#ff9000')
|
|||
|
|
),//材质
|
|||
|
|
clampToGround: true, //地表层高度模式,
|
|||
|
|
zIndex: 1000
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
},
|
|||
|
|
//数据集站位
|
|||
|
|
stationData(data, index) {
|
|||
|
|
var lon = data.lon == 0 ? data.lon : data.lon;
|
|||
|
|
var lat = data.lat == 0 ? data.lat : data.lat;
|
|||
|
|
// var id = data.id; //
|
|||
|
|
// var shipId = data.shipId; // 航次Id
|
|||
|
|
// var stationNum = data.stationNum; //站位号
|
|||
|
|
var diveNum = data.time; //潜次编号
|
|||
|
|
// var sampleNo = data.time//编号
|
|||
|
|
viewer.entities.add({
|
|||
|
|
id: index,
|
|||
|
|
description:data,
|
|||
|
|
// name: diveNum,
|
|||
|
|
position: Cesium.Cartesian3.fromDegrees(lon, lat),
|
|||
|
|
//位置
|
|||
|
|
label: { //文字标签
|
|||
|
|
// text: diveNum,
|
|||
|
|
font: '700 16px Arial',
|
|||
|
|
fillColor: Cesium.Color.WHITE,//填充颜色
|
|||
|
|
outlineColor: Cesium.Color.BLACK,//轮廓颜色
|
|||
|
|
outlineWidth: 3,
|
|||
|
|
verticalOrigin: Cesium.VerticalOrigin.BOTTOM,//垂直方向以底部来计算标签的位置
|
|||
|
|
pixelOffset: new Cesium.Cartesian2(0, 50), //偏移量
|
|||
|
|
style: Cesium.LabelStyle.FILL_AND_OUTLINE, //FILL不要轮廓 , OUTLINE只要轮廓,FILL_AND_OUTLINE轮廓加填充
|
|||
|
|
horizontalOrigin:Cesium.HorizontalOrigin.CENTER, //确定文字在坐标点的位置, CENTER RIGHT LEFT
|
|||
|
|
// showBackground:true, //是否显示背景色,就是文字后面的阴影
|
|||
|
|
// backgroundColor: new Cesium.Color.fromCssColorString('#141414'),
|
|||
|
|
},
|
|||
|
|
billboard: { //图标
|
|||
|
|
image: this.iconImgW,
|
|||
|
|
scale: 1,
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
this.addbounced()
|
|||
|
|
// viewer.zoomTo(viewer.entities); //zoomTo方法可以立即定位到某个位置 */
|
|||
|
|
// if (index === 0) {
|
|||
|
|
// stationPrev = index;
|
|||
|
|
// viewer.camera.flyTo({
|
|||
|
|
// destination: Cesium.Cartesian3.fromDegrees(lon, lat, 300000)
|
|||
|
|
// });
|
|||
|
|
// }
|
|||
|
|
},
|
|||
|
|
// 移动事件
|
|||
|
|
addbounced() {
|
|||
|
|
let _this=this
|
|||
|
|
var scene = viewer.scene;
|
|||
|
|
var num = {};
|
|||
|
|
this.movementTimer = null;
|
|||
|
|
ellipsoid = viewer.scene.globe.ellipsoid;
|
|||
|
|
// 创建移动事件
|
|||
|
|
handler.setInputAction(function (movement) {
|
|||
|
|
if (scene.mode !== Cesium.SceneMode.MORPHING) {
|
|||
|
|
let pickedObject = scene.pick(movement.endPosition);
|
|||
|
|
if (
|
|||
|
|
scene.pickPositionSupported &&
|
|||
|
|
Cesium.defined(pickedObject) &&
|
|||
|
|
pickedObject.id !== ""&&
|
|||
|
|
pickedObject.id._description
|
|||
|
|
) {
|
|||
|
|
$(".son").html("");//每次弹出时先清空
|
|||
|
|
var windowPosition = movement.startPosition;//获取屏幕坐标
|
|||
|
|
num.x = windowPosition.x + 50 + document.getElementById("map").offsetLeft;
|
|||
|
|
num.y = windowPosition.y + 50;
|
|||
|
|
//获取弹出框需要显示的内容，为创建时的 description 属性
|
|||
|
|
var todo = pickedObject.id._description._value;
|
|||
|
|
//修改弹出框
|
|||
|
|
$(".son").css("display", "block");
|
|||
|
|
$(".son").css("left", num.x);
|
|||
|
|
$(".son").css("top", num.y);
|
|||
|
|
// 内容
|
|||
|
|
//es6模板字符串
|
|||
|
|
var addHtml = `
|
|||
|
|
<p>经度（°）：${todo.lon}</p>
|
|||
|
|
<p>纬度（°）：${todo.lat}</p>
|
|||
|
|
<p>时间：${todo.time}</p>`;
|
|||
|
|
$(".son").append(addHtml);
|
|||
|
|
} else {
|
|||
|
|
$(".son").html("");
|
|||
|
|
$(".son").css("display", "none");
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}, Cesium.ScreenSpaceEventType.MOUSE_MOVE)
|
|||
|
|
},
|
|||
|
|
async tochoose(e) {
|
|||
|
|
this.chooseIndex = e
|
|||
|
|
const voyageName = this.didian[e]
|
|||
|
|
try {
|
|||
|
|
const res = await getVoyageLine(voyageName)
|
|||
|
|
if (res.code == 200) {
|
|||
|
|
// this.getMap(res.data)
|
|||
|
|
this.drawMap(res.data)
|
|||
|
|
} else {
|
|||
|
|
// this.getMap([])
|
|||
|
|
this.drawMap([])
|
|||
|
|
this.$message({
|
|||
|
|
message: res.message,
|
|||
|
|
type: "warning",
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
} catch (error) {
|
|||
|
|
console.log(error)
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
async getMap(list) {
|
|||
|
|
// 计算停留地
|
|||
|
|
// const list = [
|
|||
|
|
// {
|
|||
|
|
// lat: '18.23400',
|
|||
|
|
// lon: '109.49100',
|
|||
|
|
// time: '2023-09-18-21:58:35'
|
|||
|
|
// },
|
|||
|
|
// { lon: '109.48983', time: '2023-09-18-21:59:26', lat: '18.23417' },
|
|||
|
|
// { lon: '109.48867', time: '2023-09-18-22:00:06', lat: '18.23417' }
|
|||
|
|
|
|||
|
|
// ]
|
|||
|
|
// 轨迹
|
|||
|
|
const convertData1 = function(list) {
|
|||
|
|
var res = []
|
|||
|
|
list.map((item, index) => {
|
|||
|
|
res.push({
|
|||
|
|
name: '科考点' + (index + 1),
|
|||
|
|
value: [item.lon, item.lat, item.time]
|
|||
|
|
})
|
|||
|
|
})
|
|||
|
|
return res
|
|||
|
|
}
|
|||
|
|
const data1 = convertData1(list)
|
|||
|
|
|
|||
|
|
const convertLine = function(arr) {
|
|||
|
|
var res = []; var obj = {}
|
|||
|
|
for (var i = 0; i < arr.length; i++) {
|
|||
|
|
if (i < arr.length - 1) {
|
|||
|
|
obj = {
|
|||
|
|
fromName: arr[i].name,
|
|||
|
|
toName: arr[i + 1].name,
|
|||
|
|
coords: []
|
|||
|
|
}
|
|||
|
|
obj.coords.push(arr[i].value, arr[i + 1].value)
|
|||
|
|
res.push(obj)
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
return res
|
|||
|
|
}
|
|||
|
|
const moveLine = {
|
|||
|
|
normal: convertLine(data1)
|
|||
|
|
}
|
|||
|
|
var chartDom = document.getElementById('cdc-track')
|
|||
|
|
var myChart = this.$echarts.init(chartDom)
|
|||
|
|
var option
|
|||
|
|
|
|||
|
|
option = {
|
|||
|
|
tooltip: {
|
|||
|
|
trigger: 'item'
|
|||
|
|
},
|
|||
|
|
bmap: {
|
|||
|
|
// 百度地图的设置
|
|||
|
|
center: [108.515278, 20.017767],
|
|||
|
|
zoom: 8, // 缩放比例
|
|||
|
|
roam: true // 是否可以缩放
|
|||
|
|
},
|
|||
|
|
series: [
|
|||
|
|
{
|
|||
|
|
name: '停留点',
|
|||
|
|
type: 'effectScatter', // 涟漪效果
|
|||
|
|
coordinateSystem: 'bmap', // 依赖的坐标轴
|
|||
|
|
data: data1, // 获取的数据
|
|||
|
|
symbolSize: 10, // 散点的大小
|
|||
|
|
encode: {
|
|||
|
|
value: 2
|
|||
|
|
},
|
|||
|
|
showEffectOn: 'render', // 散点涟漪的样式
|
|||
|
|
rippleEffect: {
|
|||
|
|
brushType: 'stroke'
|
|||
|
|
},
|
|||
|
|
label: {
|
|||
|
|
// 显示文字
|
|||
|
|
formatter: '{b}',
|
|||
|
|
position: 'right',
|
|||
|
|
show: false,
|
|||
|
|
color: 'black',
|
|||
|
|
// textBorderColor: '#3cb371', // 文字本身的描边颜色string。
|
|||
|
|
// textBorderWidth: 2, // 文字本身的描边宽度number。
|
|||
|
|
textShadowColor: 'white', // 文字本身的阴影颜色string。
|
|||
|
|
textShadowBlur: 2, // 文字本身的阴影长度number。
|
|||
|
|
textShadowOffsetX: 2, // 文字本身的阴影 X 偏移number。
|
|||
|
|
textShadowOffsetY: 3 // 文字本身的阴影 Y 偏移number。
|
|||
|
|
},
|
|||
|
|
itemStyle: {
|
|||
|
|
color: '#fcf67b',
|
|||
|
|
shadowBlur: 10,
|
|||
|
|
shadowColor: '#333'
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
emphasis: {
|
|||
|
|
scale: true
|
|||
|
|
},
|
|||
|
|
tooltip: {
|
|||
|
|
show: true,
|
|||
|
|
// position: [350, 350],
|
|||
|
|
padding: [5, 12],
|
|||
|
|
backgroundColor: 'rgba(0,23,45,0.9)',
|
|||
|
|
borderColor: 'rgba(1,97,153,0.9)',
|
|||
|
|
borderWidth: 1,
|
|||
|
|
textStyle: { fontSize: 14, lineHeight: 22, color: '#ffffff' },
|
|||
|
|
formatter: function(params) {
|
|||
|
|
return (
|
|||
|
|
params.name +
|
|||
|
|
'<br>' +
|
|||
|
|
'<br>经度（°）：' +
|
|||
|
|
params.value[0] +
|
|||
|
|
'<br>纬度（°）：' +
|
|||
|
|
params.value[1] +
|
|||
|
|
'<br>时间：' +
|
|||
|
|
params.value[2]
|
|||
|
|
|
|||
|
|
// +
|
|||
|
|
// '<br>航迹向：56°' +
|
|||
|
|
// '<br>航艏向：256°' +
|
|||
|
|
// '<br>航速：56KM' +
|
|||
|
|
// '<br>状态：停泊' +
|
|||
|
|
// '<br>更新时间：2023-3-14 22:15:20'
|
|||
|
|
)
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
zlevel: 10
|
|||
|
|
},
|
|||
|
|
// 射线样式
|
|||
|
|
{
|
|||
|
|
type: 'lines',
|
|||
|
|
tooltip: {
|
|||
|
|
show: false
|
|||
|
|
},
|
|||
|
|
coordinateSystem: 'bmap',
|
|||
|
|
zlevel: 2, // 数值越大越在上面
|
|||
|
|
large: true,
|
|||
|
|
symbol: ['none', 'arrow'],
|
|||
|
|
effect: {
|
|||
|
|
show: true,
|
|||
|
|
period: 6,
|
|||
|
|
constantSpeed: 30,
|
|||
|
|
trailLength: 0,
|
|||
|
|
symbolSize: 3 // 圆点大小
|
|||
|
|
},
|
|||
|
|
lineStyle: {
|
|||
|
|
// 线条颜色
|
|||
|
|
color: '#fcf67b',
|
|||
|
|
width: 2,
|
|||
|
|
opacity: 1,
|
|||
|
|
curveness: 0
|
|||
|
|
},
|
|||
|
|
data: moveLine.normal
|
|||
|
|
}
|
|||
|
|
]
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
option && myChart.setOption(option)
|
|||
|
|
},
|
|||
|
|
async getAllVoyage() {
|
|||
|
|
try {
|
|||
|
|
const res = await getVoyage()
|
|||
|
|
if (res.code == 200) {
|
|||
|
|
this.didian = res.data
|
|||
|
|
this.tochoose(0)
|
|||
|
|
}
|
|||
|
|
} catch (error) {
|
|||
|
|
console.log(error)
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<style scoped lang="scss">
|
|||
|
|
.index {
|
|||
|
|
width: 100%;
|
|||
|
|
height: 100%;
|
|||
|
|
background: #ecf2f4;
|
|||
|
|
.banner {
|
|||
|
|
width: 100%;
|
|||
|
|
height: 700px;
|
|||
|
|
position: relative;
|
|||
|
|
img {
|
|||
|
|
width: 100%;
|
|||
|
|
height: 100%;
|
|||
|
|
}
|
|||
|
|
.banner_con {
|
|||
|
|
position: absolute;
|
|||
|
|
left: 0;
|
|||
|
|
top: 35%;
|
|||
|
|
z-index: 999;
|
|||
|
|
width: 100%;
|
|||
|
|
height: auto;
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: column;
|
|||
|
|
align-items: center;
|
|||
|
|
.banner_top {
|
|||
|
|
margin-bottom: 6%;
|
|||
|
|
width: 80%;
|
|||
|
|
height: auto;
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: column;
|
|||
|
|
p {
|
|||
|
|
font-size: 21px;
|
|||
|
|
color: #fff;
|
|||
|
|
line-height: 36px;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
.banner_bot {
|
|||
|
|
width: 80%;
|
|||
|
|
height: 150px;
|
|||
|
|
border-radius: 10px;
|
|||
|
|
background: rgba($color: #fff, $alpha: 0.3);
|
|||
|
|
box-sizing: border-box;
|
|||
|
|
padding: 25px;
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: space-between;
|
|||
|
|
.bot_left {
|
|||
|
|
width: 35%;
|
|||
|
|
height: 100%;
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: column;
|
|||
|
|
border-right: 1px solid rgba($color: #fff, $alpha: 0.3);
|
|||
|
|
.left1 {
|
|||
|
|
width: 100%;
|
|||
|
|
height: 100%;
|
|||
|
|
text-align: center;
|
|||
|
|
p {
|
|||
|
|
font-size: 16px;
|
|||
|
|
color: #fff;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
.left2 {
|
|||
|
|
width: 100%;
|
|||
|
|
height: auto;
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: center;
|
|||
|
|
.left2_1 {
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: column;
|
|||
|
|
align-items: center;
|
|||
|
|
width: 40%;
|
|||
|
|
height: auto;
|
|||
|
|
p {
|
|||
|
|
font-size: 34px;
|
|||
|
|
color: #fff;
|
|||
|
|
font-weight: bold;
|
|||
|
|
line-height: 40px;
|
|||
|
|
font-family: DIN-Bold;
|
|||
|
|
}
|
|||
|
|
span {
|
|||
|
|
margin-top: 8px;
|
|||
|
|
font-size: 14px;
|
|||
|
|
color: #fff;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
.bot_right {
|
|||
|
|
width: 62%;
|
|||
|
|
height: 100%;
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
flex-direction: column;
|
|||
|
|
.right1 {
|
|||
|
|
width: 100%;
|
|||
|
|
height: 100%;
|
|||
|
|
text-align: center;
|
|||
|
|
p {
|
|||
|
|
font-size: 16px;
|
|||
|
|
color: #fff;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
.right2 {
|
|||
|
|
width: 100%;
|
|||
|
|
height: 100%;
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: space-around;
|
|||
|
|
.right2_1 {
|
|||
|
|
width: 20%;
|
|||
|
|
height: 100%;
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: column;
|
|||
|
|
align-items: center;
|
|||
|
|
p {
|
|||
|
|
font-size: 34px;
|
|||
|
|
color: #fff;
|
|||
|
|
font-weight: bold;
|
|||
|
|
line-height: 40px;
|
|||
|
|
font-family: DIN-Bold;
|
|||
|
|
}
|
|||
|
|
span {
|
|||
|
|
margin-top: 8px;
|
|||
|
|
font-size: 14px;
|
|||
|
|
color: #fff;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.guiji {
|
|||
|
|
width: 100%;
|
|||
|
|
height: auto;
|
|||
|
|
margin: 70px 0;
|
|||
|
|
margin-bottom: 0;
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: column;
|
|||
|
|
align-items: center;
|
|||
|
|
.guiji_1 {
|
|||
|
|
margin-bottom: 20px;
|
|||
|
|
width: 100%;
|
|||
|
|
height: auto;
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: center;
|
|||
|
|
img {
|
|||
|
|
width: auto;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
.guiji_2 {
|
|||
|
|
position: relative;
|
|||
|
|
width: 100%;
|
|||
|
|
height: 800px;
|
|||
|
|
.daohang {
|
|||
|
|
position: absolute;
|
|||
|
|
top: 50px;
|
|||
|
|
left: 25%;
|
|||
|
|
width: 50%;
|
|||
|
|
height: 60px;
|
|||
|
|
background: rgba($color: #000, $alpha: 0.7);
|
|||
|
|
border-radius: 10px;
|
|||
|
|
z-index: 8888;
|
|||
|
|
overflow: hidden;
|
|||
|
|
ul {
|
|||
|
|
width: 100%;
|
|||
|
|
height: 60px;
|
|||
|
|
box-sizing: border-box;
|
|||
|
|
padding-left: 15px;
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
overflow: auto;
|
|||
|
|
&::-webkit-scrollbar {
|
|||
|
|
width: 8px;
|
|||
|
|
height: 8px;
|
|||
|
|
}
|
|||
|
|
/* 滚动槽 */
|
|||
|
|
&::-webkit-scrollbar-track {
|
|||
|
|
-webkit-box-shadow: inset006pxrgba(0, 0, 0, 0.3);
|
|||
|
|
border-radius: 10px;
|
|||
|
|
background: #010e32;
|
|||
|
|
}
|
|||
|
|
/* 滚动条滑块 */
|
|||
|
|
&::-webkit-scrollbar-thumb {
|
|||
|
|
border-radius: 10px;
|
|||
|
|
/* background:rgba(0,0,0,0.3); */
|
|||
|
|
background: #203e86;
|
|||
|
|
-webkit-box-shadow: inset006pxrgba(0, 0, 0, 0.5);
|
|||
|
|
}
|
|||
|
|
li {
|
|||
|
|
// margin-right: 20px;
|
|||
|
|
width: 120px;
|
|||
|
|
height: 50px;
|
|||
|
|
white-space: nowrap;
|
|||
|
|
&.active {
|
|||
|
|
a {
|
|||
|
|
background: #0a84c1;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
a {
|
|||
|
|
display: block;
|
|||
|
|
line-height: 40px;
|
|||
|
|
margin-top: 5px;
|
|||
|
|
height: 40px;
|
|||
|
|
font-size: 15px;
|
|||
|
|
color: #fff;
|
|||
|
|
padding: 0 15px;
|
|||
|
|
border-radius: 5px;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
img {
|
|||
|
|
width: 100%;
|
|||
|
|
height: 100%;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
.shuju {
|
|||
|
|
padding-bottom: 170px;
|
|||
|
|
padding-top: 70px;
|
|||
|
|
width: 100%;
|
|||
|
|
height: auto;
|
|||
|
|
background: url(../../static/images/secBg.jpg) center no-repeat;
|
|||
|
|
background-size: 100% 100%;
|
|||
|
|
.shuju1 {
|
|||
|
|
width: 100%;
|
|||
|
|
height: auto;
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: column;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: center;
|
|||
|
|
margin-bottom: 70px;
|
|||
|
|
.shuju1_top {
|
|||
|
|
margin-bottom: 50px;
|
|||
|
|
width: 100%;
|
|||
|
|
height: auto;
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: center;
|
|||
|
|
img {
|
|||
|
|
width: auto;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
.shuju1_con {
|
|||
|
|
width: 85%;
|
|||
|
|
height: 390px;
|
|||
|
|
ul {
|
|||
|
|
width: 100%;
|
|||
|
|
height: 390px;
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: space-between;
|
|||
|
|
li {
|
|||
|
|
position: relative;
|
|||
|
|
width: 18%;
|
|||
|
|
height: 340px;
|
|||
|
|
border-radius: 10px;
|
|||
|
|
overflow: hidden;
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: column;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: center;
|
|||
|
|
cursor: pointer;
|
|||
|
|
transition: all 0.35s;
|
|||
|
|
&::after {
|
|||
|
|
display: none;
|
|||
|
|
content: "";
|
|||
|
|
position: absolute;
|
|||
|
|
top: 0;
|
|||
|
|
left: 0;
|
|||
|
|
width: 100%;
|
|||
|
|
height: 100%;
|
|||
|
|
background: rgba($color: #0a84c1, $alpha: 0.5);
|
|||
|
|
}
|
|||
|
|
&:hover {
|
|||
|
|
height: 390px;
|
|||
|
|
&::after {
|
|||
|
|
display: block;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
&:first-child {
|
|||
|
|
background: url(../../static/images/diqiu_bg.png) center no-repeat;
|
|||
|
|
background-size: cover;
|
|||
|
|
}
|
|||
|
|
&:nth-child(2) {
|
|||
|
|
background: url(../../static/images/diqiu_bg1.png) center no-repeat;
|
|||
|
|
background-size: cover;
|
|||
|
|
}
|
|||
|
|
&:nth-child(3) {
|
|||
|
|
background: url(../../static/images/dizhi_bg.png) center no-repeat;
|
|||
|
|
background-size: cover;
|
|||
|
|
}
|
|||
|
|
&:nth-child(4) {
|
|||
|
|
background: url(../../static/images/dongwu_bg.png) center no-repeat;
|
|||
|
|
background-size: cover;
|
|||
|
|
}
|
|||
|
|
&:nth-child(5) {
|
|||
|
|
background: url(../../static/images/shipin_bg.png) center no-repeat;
|
|||
|
|
background-size: cover;
|
|||
|
|
}
|
|||
|
|
img {
|
|||
|
|
position: relative;
|
|||
|
|
z-index: 99;
|
|||
|
|
width: auto;
|
|||
|
|
height: auto;
|
|||
|
|
margin-bottom: 15px;
|
|||
|
|
}
|
|||
|
|
p {
|
|||
|
|
position: relative;
|
|||
|
|
z-index: 99;
|
|||
|
|
width: 70%;
|
|||
|
|
font-size: 20px;
|
|||
|
|
color: #fff;
|
|||
|
|
text-align: center;
|
|||
|
|
}
|
|||
|
|
.sourceData{
|
|||
|
|
padding-top:55px;
|
|||
|
|
width: 96%;
|
|||
|
|
font-size: 14px;
|
|||
|
|
color: #fff;
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
.shuju2 {
|
|||
|
|
width: 100%;
|
|||
|
|
height: auto;
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: column;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: center;
|
|||
|
|
margin-bottom: 70px;
|
|||
|
|
.shuju2_top {
|
|||
|
|
margin-bottom: 50px;
|
|||
|
|
width: 100%;
|
|||
|
|
height: auto;
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: center;
|
|||
|
|
img {
|
|||
|
|
width: auto;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
.shuju2_con {
|
|||
|
|
width: 100%;
|
|||
|
|
height: auto;
|
|||
|
|
position: relative;
|
|||
|
|
.swiper-visualization {
|
|||
|
|
overflow: hidden;
|
|||
|
|
padding: 40px 0;
|
|||
|
|
.swiper-visualization-box {
|
|||
|
|
position: relative;
|
|||
|
|
width: 883px;
|
|||
|
|
margin: 0 auto;
|
|||
|
|
.swiper-arrow {
|
|||
|
|
position: absolute;
|
|||
|
|
width: 62px;
|
|||
|
|
height: 62px;
|
|||
|
|
top: 224px;
|
|||
|
|
background-repeat: no-repeat;
|
|||
|
|
// border: 2px solid #ffffff;
|
|||
|
|
background-position: center;
|
|||
|
|
z-index: 2;
|
|||
|
|
cursor: pointer;
|
|||
|
|
}
|
|||
|
|
.swiper-prev {
|
|||
|
|
left: -50px;
|
|||
|
|
background-image: url(../../static/images/arrow-left.png);
|
|||
|
|
}
|
|||
|
|
.swiper-next {
|
|||
|
|
right: -50px;
|
|||
|
|
background-image: url(../../static/images/arrow-right.png);
|
|||
|
|
}
|
|||
|
|
.swiper-container {
|
|||
|
|
overflow: visible;
|
|||
|
|
.swiper-slide {
|
|||
|
|
position: relative;
|
|||
|
|
opacity: 0.6;
|
|||
|
|
transform: scale(0.9);
|
|||
|
|
.pic {
|
|||
|
|
display: block;
|
|||
|
|
position: relative;
|
|||
|
|
padding-top: 55.28%;
|
|||
|
|
border: 2px solid #ffffff;
|
|||
|
|
box-shadow: 0px 0px 40px 0px rgba(0, 0, 0, 0.22);
|
|||
|
|
img {
|
|||
|
|
position: absolute;
|
|||
|
|
width: 100%;
|
|||
|
|
height: 100%;
|
|||
|
|
top: 0;
|
|||
|
|
left: 0;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
.txt {
|
|||
|
|
position: absolute;
|
|||
|
|
top: 5%;
|
|||
|
|
left: 5%;
|
|||
|
|
z-index: 10;
|
|||
|
|
font-weight: bold;
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: column;
|
|||
|
|
justify-content: center;
|
|||
|
|
align-items: baseline;
|
|||
|
|
font-size: 22px;
|
|||
|
|
padding: 52px 0 40px;
|
|||
|
|
opacity: 0.3;
|
|||
|
|
p {
|
|||
|
|
font-size: 60px;
|
|||
|
|
color: #fff;
|
|||
|
|
}
|
|||
|
|
.txt1 {
|
|||
|
|
margin-top: 50px;
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: column;
|
|||
|
|
p {
|
|||
|
|
font-size: 36px;
|
|||
|
|
color: #fff;
|
|||
|
|
}
|
|||
|
|
span {
|
|||
|
|
font-size: 28px;
|
|||
|
|
color: #fff;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
.mask {
|
|||
|
|
position: absolute;
|
|||
|
|
width: 1083px;
|
|||
|
|
height: 186px;
|
|||
|
|
bottom: -40px;
|
|||
|
|
left: -109px;
|
|||
|
|
right: 0;
|
|||
|
|
// background: url(~@/assets/images/daoying.png) no-repeat center /
|
|||
|
|
// cover;
|
|||
|
|
// opacity: 0;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
.swiper-slide-active {
|
|||
|
|
opacity: 1;
|
|||
|
|
transform: scale(1);
|
|||
|
|
.txt,
|
|||
|
|
.mask {
|
|||
|
|
opacity: 1;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.dongtai {
|
|||
|
|
margin-top: -180px;
|
|||
|
|
width: 100%;
|
|||
|
|
height: auto;
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: column;
|
|||
|
|
align-items: center;
|
|||
|
|
.el-row{
|
|||
|
|
width:92%;
|
|||
|
|
}
|
|||
|
|
.dongtai_top {
|
|||
|
|
width: 100%;
|
|||
|
|
height: auto;
|
|||
|
|
margin-bottom: 50px;
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: center;
|
|||
|
|
img {
|
|||
|
|
width: auto;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
.dongtai_bot {
|
|||
|
|
width: 85%;
|
|||
|
|
height: auto;
|
|||
|
|
ul {
|
|||
|
|
width: 100%;
|
|||
|
|
height: auto;
|
|||
|
|
display: flex;
|
|||
|
|
flex-wrap: wrap;
|
|||
|
|
justify-content: space-between;
|
|||
|
|
li {
|
|||
|
|
margin-bottom: 35px;
|
|||
|
|
width: 48%;
|
|||
|
|
height: 170px;
|
|||
|
|
background: #fff;
|
|||
|
|
border-radius: 10px;
|
|||
|
|
box-sizing: border-box;
|
|||
|
|
padding: 25px;
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
box-shadow: 0 0 5px #ccc;
|
|||
|
|
cursor: pointer;
|
|||
|
|
transition: all 0.35s;
|
|||
|
|
|
|||
|
|
&:hover {
|
|||
|
|
box-shadow: 0 10px 15px #ccc;
|
|||
|
|
.date {
|
|||
|
|
background: #13a1f0;
|
|||
|
|
p {
|
|||
|
|
color: #fff;
|
|||
|
|
}
|
|||
|
|
span {
|
|||
|
|
color: #fff;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
.des {
|
|||
|
|
p {
|
|||
|
|
color: #13a1f0;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
.date {
|
|||
|
|
margin-right: 30px;
|
|||
|
|
width: 100px;
|
|||
|
|
height: 100px;
|
|||
|
|
border-radius: 10px;
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: column;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: center;
|
|||
|
|
background: #ebeff5;
|
|||
|
|
p {
|
|||
|
|
font-size: 32px;
|
|||
|
|
color: #02203c;
|
|||
|
|
line-height: 35px;
|
|||
|
|
font-family: DIN-Bold;
|
|||
|
|
}
|
|||
|
|
span {
|
|||
|
|
color: #02203c;
|
|||
|
|
font-size: 16px;
|
|||
|
|
font-family: DIN-Bold;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
.des {
|
|||
|
|
width: 85%;
|
|||
|
|
height: 100px;
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: column;
|
|||
|
|
align-items: baseline;
|
|||
|
|
justify-content: space-between;
|
|||
|
|
|
|||
|
|
p {
|
|||
|
|
font-size: 18px;
|
|||
|
|
color: #212121;
|
|||
|
|
font-weight: bold;
|
|||
|
|
}
|
|||
|
|
span {
|
|||
|
|
font-size: 14px;
|
|||
|
|
color: #999;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.gongju {
|
|||
|
|
margin-top: 60px;
|
|||
|
|
margin-bottom: 70px;
|
|||
|
|
height: auto;
|
|||
|
|
width: 100%;
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: column;
|
|||
|
|
align-items: center;
|
|||
|
|
.gongju_top {
|
|||
|
|
margin-bottom: 30px;
|
|||
|
|
width: 100%;
|
|||
|
|
height: auto;
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: center;
|
|||
|
|
img {
|
|||
|
|
width: auto;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
.gongju_con {
|
|||
|
|
width: 85%;
|
|||
|
|
height: 240px;
|
|||
|
|
ul {
|
|||
|
|
width: 100%;
|
|||
|
|
height: 240px;
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: space-between;
|
|||
|
|
li {
|
|||
|
|
cursor: pointer;
|
|||
|
|
width: 23%;
|
|||
|
|
height: 240px;
|
|||
|
|
border-radius: 5px;
|
|||
|
|
background: url(../../static/images/sanBg.png) center no-repeat;
|
|||
|
|
background-size: 100% 100%;
|
|||
|
|
overflow: hidden;
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: column;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: center;
|
|||
|
|
img {
|
|||
|
|
width: auto;
|
|||
|
|
height: auto;
|
|||
|
|
display: block;
|
|||
|
|
margin-bottom: 20px;
|
|||
|
|
}
|
|||
|
|
p {
|
|||
|
|
font-size: 18px;
|
|||
|
|
color: #fff;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</style>
|
|||
|
|
|
|||
|
|
<style>
|
|||
|
|
.BMap_cpyCtrl {
|
|||
|
|
display: none;
|
|||
|
|
}
|
|||
|
|
.son{
|
|||
|
|
position: absolute;
|
|||
|
|
left: 1450px;
|
|||
|
|
top: 418px;
|
|||
|
|
background-color: #062f59c7;
|
|||
|
|
color: rgb(253, 253, 253);
|
|||
|
|
border-radius: 10px;
|
|||
|
|
padding: 20px;
|
|||
|
|
border:1px solid #7ba9cacf;
|
|||
|
|
font-size: 12px;
|
|||
|
|
z-index: 1000;
|
|||
|
|
}
|
|||
|
|
.cesium-viewer-bottom{
|
|||
|
|
display: none !important;
|
|||
|
|
}
|
|||
|
|
#map{
|
|||
|
|
position: relative;
|
|||
|
|
}
|
|||
|
|
</style>
|