revisit
/
DSDSWeb
1
0
Fork 0
Code Issues 3 Pull Requests Packages Projects Releases Wiki Activity

1.首页调整为显示最近的10个航次； 

2.地图右上角增加小图标（船），鼠标滑动到图标上后显示这10个航次的列表；
3.点击：记录高亮、移除其他高亮图层、加载对应的航次高亮图层、，再次点击，取消航次记录高亮，移除该航次高亮突出;
4.Checkbox框：选中代表该航次图层显示在地图上，取消则隐藏该航次图层。默认10个航次全部选中;
5.增加4500米、6000米等深线按钮，点击触发：加载/取消对应的等深线图层
This commit is contained in:
zhangqi 2025-10-14 14:17:44 +08:00
parent a922d431bd
commit 6082400308
4 changed files with 992 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/public/Header.vue
View File

@ -106,7 +106,7 @@ export default {
// },
{
name:"统计分析",
path:"analyse",
path:"statistics",
children:[]
},
// {

26
src/router/index.js
View File

@ -328,16 +328,36 @@ export const constantRoutes = [
loginAuthority: true
}
},
// {
// path: 'analyse',
// name: 'analyse',
// component: () => import('@/views/analyse.vue'),
// meta: {
// title: '统计分析',
// icon: 'peoples',
// loginAuthority: true
// }
// },
{
path: 'analyse',
name: 'analyse',
component: () => import('@/views/analyse.vue'),
path: 'statistics',
name: 'statistics',
component: () => import('@/views/statistics/index.vue'),
meta: {
title: '统计分析',
icon: 'peoples',
loginAuthority: true
}
},
{
path: 'ships',
name: 'ships',
component: () => import('@/views/statistics/ShipStatistics.vue'),
meta: {
title: '科考船汇总统计',
icon: 'peoples',
loginAuthority: true
}
},
{
path: 'AboutUs',
name: 'AboutUs',

681
src/views/statistics/ShipStatistics.vue Normal file
View File

@ -0,0 +1,681 @@
<template>
<div class="fenxi">
<div class="banner">
<img src="../../../static/images/bannerny1.jpg" alt="">
<div class="banner_con">
<div class="con">
<h1>探索一号</h1>
<ul>
<li>
<div class="t">
<p>26</p>
<span>次</span>
</div>
<div class="b">
<p>航次次数</p>
</div>
</li>
<li>
<div class="t">
<p>286</p>
<span>天</span>
</div>
<div class="b">
<p>航次天数</p>
</div>
</li>
<li>
<div class="t">
<p>23</p>
<span>家</span>
</div>
<div class="b">
<p>参航单位</p>
</div>
</li>
<li>
<div class="t">
<p>279</p>
<span>个</span>
</div>
<div class="b">
<p>作业站位个数</p>
</div>
</li>
</ul>
</div>
</div>
</div>
<div class="fenxi_con">
<div class="fenxi1">
<div id="xinxi" class="ccc" />
</div>
<div class="fenxi1">
<h2 class="white">参航单位</h2>
<div id="danwei" class="ccc">
<baidu-map
:center="center1"
:zoom="zoom1"
:scroll-wheel-zoom="true"
map-type="BMAP_SATELLITE_MAP"
style="width: 100%; height: 100%"
@ready="handler1"
>
<bm-marker
v-for="(item, index) in listxia"
:key="index"
:position="item.dingwei"
:dragging="true"
:icon="item.pic"
@click="totap1(item)"
>
<bm-label
:content="item.content"
:offset="{ width: -35, height: 30 }"
/>
</bm-marker>
</baidu-map>
</div>
</div>
<div class="fenxi1">
<div id="renyuan" class="ccc" />
</div>
<div class="fenxi1">
<h2 class="white">作业站位</h2>
<div id="zhanwei" class="ccc">
<GMRT />
</div>
</div>
</div>
</div>
</template>
<script>
import * as echarts from 'echarts'
import GMRT from '../GMRT.vue'
export default {
name: 'Fenxi',
components: {
GMRT
},
data() {
return {
center: { lng: 118.962643, lat: 35.618913 },
zoom: 3,
center1: { lng: 56.761382, lat: 10.897877 },
zoom1: 2,
list: [
{
dingwei: {
lng: 119.054629,
lat: 36.373917
},
content: '',
pic: {
url: 'http://shipin.hey17.com/dingwei.png',
size: { width: 16, height: 21 }
}
},
{
dingwei: {
lng: 119.919302,
lat: 34.226755
},
content: '',
pic: {
url: 'http://shipin.hey17.com/dingwei.png',
size: { width: 16, height: 21 }
}
},
{
dingwei: {
lng: 119.560555,
lat: 34.421374
},
content: '',
pic: {
url: 'http://shipin.hey17.com/dingwei.png',
size: { width: 16, height: 21 }
}
},
{
dingwei: {
lng: 116.442213,
lat: 35.556921
},
content: '',
pic: {
url: 'http://shipin.hey17.com/dingwei.png',
size: { width: 16, height: 21 }
}
}
],
listxia: [
{
dingwei: {
lng: 56.761382,
lat: 10.897877
},
content: '',
pic: {
url: 'http://shipin.hey17.com/dingwei1.png',
size: { width: 16, height: 21 }
}
},
{
dingwei: {
lng: 59.116236,
lat: -0.00034
},
content: '',
pic: {
url: 'http://shipin.hey17.com/dingwei1.png',
size: { width: 16, height: 21 }
}
},
{
dingwei: {
lng: 47.783501,
lat: -2.370556
},
content: '',
pic: {
url: 'http://shipin.hey17.com/dingwei1.png',
size: { width: 16, height: 21 }
}
},
{
dingwei: {
lng: 41.160475,
lat: -5.474589
},
content: '',
pic: {
url: 'http://shipin.hey17.com/dingwei1.png',
size: { width: 16, height: 21 }
}
}
],
dataShuju: {
value: [800, 1200, 900, 1700, 1410, 1600, 1000, 1100],
color: '#ffe866',
name: 'Observed'
},
dataQushi: {
value: [1000, 1150, 850, 1600, 1510, 1700, 1100, 1300],
color: '#02c464',
name: 'Predicted',
pic: {
url: 'http://shipin.hey17.com/dingwei1.png',
size: { width: 16, height: 21 }
}
}
}
},
mounted() {
this.getecharts()
this.gettubiao2()
const originShadow = Element.prototype.attachShadow;
Element.prototype.attachShadow = (...args) => {
const shadowRoot = originShadow.call(this, ...args)
const style = document.createElement("style")
style.innerHTML = "div { display: none !important; }"
shadowRoot.appendChild(style)
return shadowRoot
};
},
methods: {
getecharts() {
var myChart = this.$echarts.init(document.getElementById('xinxi'))
var option = {
title: {
top: '20',
left: '20',
text: '航次信息统计',
textStyle: {
color: '#212121',
fontSize: '22px'
}
},
grid: {
left: '2%',
right: '4%',
bottom: '10%',
top: '20%',
containLabel: true
// borderColor:'#dce8fe',
// borderWidth: 5 ,
// show:true,
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow',
shadowStyle: { color: 'rgba(0,0,0,0.1)' },
z: 1
},
padding: [15, 22],
backgroundColor: 'rgba(0,0,0,0.9)',
borderColor: '#01a3ce',
borderWidth: 1,
textStyle: { fontSize: 15, lineHeight: 32, color: '#ffffff' }
},
xAxis: {
data: [
'TS03',
'TS04',
'TS05',
'TS06',
'TS07',
'TS08',
'TS09',
'TS010',
'TS011',
'TS012',
'TS013'
],
axisLine: { show: true },
axisTick: {
show: false,
lineStyle: { color: '#0187c4', width: 1, opacity: 1 }
},
axisLabel: {
textStyle: { fontSize: 15, color: '#212121' },
margin: 25,
interval: 0
},
splitLine: { show: false }
},
yAxis: {
type: 'value',
name: '天数',
nameTextStyle: {
fontSize: '14px',
padding: [3, 14, 5, -30]
},
axisLine: { show: false },
axisTick: {
show: false,
lineStyle: { color: '#0187c4', width: 1, opacity: 1 }
},
axisLabel: {
textStyle: { fontSize: 14, color: '#212121' },
opacity: 0.7,
margin: 15
},
splitLine: {
show: true,
lineStyle: { color: '#212121', width: 1, opacity: 0.2 }
}
},
dataZoom: [
{
id: 'dataZoomX',
type: 'slider',
xAxisIndex: [0],
filterMode: 'filter'
}
],
series: [
// {
// type: "pictorialBar",
// z: 13,
// symbolSize: [30, 12],
// symbolOffset: [0, -7],
// symbolPosition: "end",
// tooltip: { show: false },
// itemStyle: { color: "#00a8e6" },
// data: [120, 200, 150, 80, 70, 110, 130, 150, 80],
// },
{
type: 'bar',
z: 12,
itemStyle: {
color: '#13a1f0',
borderRadius: [5, 5, 0, 0] // （顺时针左上，右上，右下，左下）
// color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
// { offset: 0, color: "#00e7ff" },
// { offset: 1, color: "rgba(0,146,255,0.05)" },
// ]),
},
label: {
show: true,
position: 'top',
distance: 5,
fontSize: 16,
color: '#212121',
lineHeight: 30,
fontFamily: 'DIN-Bold'
},
// emphasis: {
// label: { color: "#f1e06e" },
// },
barWidth: 20,
data: [120, 200, 150, 80, 70, 110, 130, 150, 80, 110, 130]
}
]
}
myChart.setOption(option)
},
gettubiao2() {
var myChart = this.$echarts.init(document.getElementById('renyuan'))
var option = {
title: {
top: '20',
left: '20',
text: '航次参航人员工作量统计',
textStyle: {
color: '#212121',
fontSize: '22px'
}
},
legend: {
data: ['天数', '次数'],
right: '5%',
top: '5%',
textStyle: {
color: '#212121',
fontSize: '15'
},
icon: 'roundRect'
},
grid: {
left: '2%',
right: '4%',
bottom: '10%',
top: '20%',
containLabel: true
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow',
shadowStyle: { color: 'rgba(0,0,0,0.1)' },
z: 1
},
padding: [15, 22],
backgroundColor: 'rgba(255,255,255,0.9)',
borderColor: '#01a3ce',
borderWidth: 1,
textStyle: { fontSize: 16, lineHeight: 32, color: '#212121' }
},
dataZoom: [
{
id: 'dataZoomX',
type: 'slider',
xAxisIndex: [0],
filterMode: 'filter'
}
],
xAxis: {
data: [
'高文清',
'秋雪玲',
'陈传旭',
'何恩怨',
'金文明',
'罗腾也',
'唐元贵',
'王飒',
'李珊珊'
],
axisLine: { show: false },
axisTick: {
show: false,
lineStyle: { color: '#0187c4', width: 1, opacity: 1 }
},
axisLabel: {
textStyle: { fontSize: 16, color: '#212121' },
margin: 15,
interval: 0
},
splitLine: { show: false }
},
yAxis: {
type: 'value',
name: '天数/次数',
nameTextStyle: {
fontSize: '14px',
padding: [3, 14, 5, -10]
},
axisLine: { show: false },
axisTick: {
show: false,
lineStyle: { color: '#212121', width: 1, opacity: 1 }
},
axisLabel: {
textStyle: { fontSize: 15, color: '#212121' },
opacity: 0.7,
margin: 15
},
splitLine: {
show: true,
lineStyle: { color: '#212121', width: 1, opacity: 0.2 }
}
},
animationDelay: 900,
animationDuration: 2000,
animationDurationUpdate: 800,
series: [
// {
// type: "pictorialBar",
// z: 13,
// symbolSize: [26, 10],
// symbolOffset: [0, -6],
// symbolPosition: "end",
// tooltip: { show: false },
// itemStyle: { color: "#ffe866" },
// data: [120, 200, 150, 80, 70, 110, 130, 150, 80],
// },
{
type: 'bar',
name: '天数',
z: 8,
barGap: '30%',
itemStyle: {
color: '#13a1f0',
borderRadius: [5, 5, 0, 0]
// color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
// { offset: 0, color: "#cdc060" },
// { offset: 1, color: "rgba(205,192,96,0.05)" },
// ]),
},
barWidth: 20,
data: [120, 200, 150, 80, 70, 110, 130, 150, 80]
},
{
name: '次数',
type: 'line',
stack: 'Total',
smooth: true,
symbol: 'circle',
symbolSize: 10,
showSymbol: true,
z: 10,
data: [100, 150, 200, 100, 80, 90, 100, 110, 100],
itemStyle: {
color: '#fff',
borderColor: '#ffab34',
borderWidth: 2,
borderType: 'solid'
},
lineStyle: {
color: '#ffab34',
width: 4
}
// areaStyle: {
// color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
// { offset: 0, color: "#3cefc8" },
// { offset: 1, color: "transparent" },
// ]),
// opacity: 0.15,
// },
}
]
}
myChart.setOption(option)
},
handler({ BMap, map }) {
console.log(BMap, map)
this.center.lng = 116.404
this.center.lat = 39.915
this.zoom = 6
},
handler1({ BMap, map }) {
console.log(BMap, map)
this.center1.lng = 56.761382
this.center1.lat = 10.897877
this.zoom1 = 1
},
totap(e) {
console.log(e)
e.pic.url = 'http://shipin.hey17.com/dingwei_a.png'
e.pic.size.width = 22
e.pic.size.height = 28
for (var i = 0; i < this.list.length; i++) {
if (this.list[i] != e) {
this.list[i].pic.url = 'http://shipin.hey17.com/dingwei.png'
this.list[i].pic.size.width = 16
this.list[i].pic.size.height = 21
}
}
},
totap1(e) {
console.log(e)
e.pic.url = 'http://shipin.hey17.com/dingwei_a.png'
e.pic.size.width = 22
e.pic.size.height = 28
for (var i = 0; i < this.listxia.length; i++) {
if (this.listxia[i] != e) {
this.listxia[i].pic.url = 'http://shipin.hey17.com/dingwei1.png'
this.listxia[i].pic.size.width = 16
this.listxia[i].pic.size.height = 21
}
}
}
}
}
</script>
<style scoped lang="scss">
.fenxi {
width: 100%;
height: 100%;
.banner {
width: 100%;
height: 20%;
position: relative;
img {
width: 100%;
// height: 100%;
object-fit: contain;
}
.banner_con {
position: absolute;
top: 0;
left: 0;
z-index: 888;
width: 100%;
height: 100%;
display: flex;
align-items: center;
.con {
margin: auto;
margin-top: 40px;
width: 85%;
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
h1 {
display: block;
margin-bottom: 40px;
font-size: 56px;
color: #fff;
font-weight: bold;
}
ul {
width: 100%;
height: auto;
display: flex;
align-items: center;
justify-content: center;
li {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
margin: 0 80px;
.t {
display: flex;
align-items: baseline;
p {
font-size: 56px;
color: #fff;
font-family: DIN-Bold;
font-weight: bold;
}
span {
font-size: 26px;
color: #fff;
}
}
.b {
width: auto;
text-align: center;
p {
font-size: 18px;
color: #fff;
}
}
}
}
}
}
}
.fenxi_con {
margin: auto;
margin-top: 40px;
margin-bottom: 90px;
width: 85%;
height: auto;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
.fenxi1 {
position: relative;
margin-bottom: 40px;
width: 48%;
height: 520px;
border-radius: 10px;
border: 1px solid #ccc;
overflow: hidden;
h2{
position: absolute;
top: 20px;
left: 20px;
z-index: 8888;
font-size: 22px;
color: #212121;
&.white{
color: #fff;
}
}
.ccc {
width: 100%;
height: 100%;
}
}
}
}
</style>
<style>
.anchorBL{
display: none;
}
</style>

287
src/views/statistics/index.vue Normal file
View File

@ -0,0 +1,287 @@
<template>
<div class="main-dashboard">
<div class="header">
<h1>海洋科考数据统计分析</h1>
<p>全面展示各类科考设备与平台的运行数据统计</p>
</div>
<el-row :gutter="20" class="stats-grid">
<!-- 科考船汇总统计 -->
<el-col :xs="24" :sm="12" :md="8">
<el-card
class="stat-card"
shadow="hover"
@click.native="goToDetail('ships')"
>
<div class="card-content">
<div class="card-icon">
<i class="el-icon-ship"></i>
</div>
<div class="card-info">
<h3 class="card-title">科考船汇总统计</h3>
<p class="card-count">4艘</p>
<p class="card-desc">探索一号、探索二号、探索三号、海警101船</p>
</div>
</div>
</el-card>
</el-col>
<!-- 载人潜水器汇总统计 -->
<el-col :xs="24" :sm="12" :md="8">
<el-card
class="stat-card"
shadow="hover"
@click.native="goToDetail('hov')"
>
<div class="card-content">
<div class="card-icon">
<i class="el-icon-watermelon"></i>
</div>
<div class="card-info">
<h3 class="card-title">载人潜水器汇总统计</h3>
<p class="card-count">2型</p>
<p class="card-desc">深海勇士、奋斗者等</p>
</div>
</div>
</el-card>
</el-col>
<!-- 遥控潜水器汇总统计 -->
<el-col :xs="24" :sm="12" :md="8">
<el-card
class="stat-card"
shadow="hover"
@click.native="goToDetail('rov')"
>
<div class="card-content">
<div class="card-icon">
<i class="el-icon-cpu"></i>
</div>
<div class="card-info">
<h3 class="card-title">遥控潜水器汇总统计</h3>
<p class="card-count loading">数据加载中</p>
<p class="card-desc"></p>
</div>
</div>
</el-card>
</el-col>
<!-- 无人航行潜水器汇总统计 -->
<el-col :xs="24" :sm="12" :md="8">
<el-card
class="stat-card"
shadow="hover"
@click.native="goToDetail('uuv')"
>
<div class="card-content">
<div class="card-icon">
<i class="el-icon-help"></i>
</div>
<div class="card-info">
<h3 class="card-title">无人航行潜水器汇总统计</h3>
<p class="card-count loading">数据加载中</p>
<p class="card-desc"></p>
</div>
</div>
</el-card>
</el-col>
<!-- 基站汇总统计 -->
<el-col :xs="24" :sm="12" :md="8">
<el-card
class="stat-card"
shadow="hover"
@click.native="goToDetail('stations')"
>
<div class="card-content">
<div class="card-icon">
<i class="el-icon-office-building"></i>
</div>
<div class="card-info">
<h3 class="card-title">基站汇总统计</h3>
<p class="card-count no-data">暂无数据</p>
<p class="card-desc">深海站、深渊站、国际站</p>
</div>
</div>
</el-card>
</el-col>
<!-- 着陆器汇总统计 -->
<el-col :xs="24" :sm="12" :md="8">
<el-card
class="stat-card"
shadow="hover"
@click.native="goToDetail('landers')"
>
<div class="card-content">
<div class="card-icon">
<i class="el-icon-place"></i>
</div>
<div class="card-info">
<h3 class="card-title">着陆器汇总统计</h3>
<p class="card-count no-data">暂无数据</p>
<p class="card-desc"></p>
</div>
</div>
</el-card>
</el-col>
</el-row>
</div>
</template>
<script>
export default {
name: 'MainDashboard',
data() {
return {
// 可以在这里添加数据
}
},
methods: {
goToDetail(type) {
this.$router.push(`/container/${type}`);
}
}
}
</script>
<style scoped>
.main-dashboard {
padding: 20px;
background-color: #f0f7ff;
min-height: calc(100vh - 130px);
}
.header {
text-align: center;
margin-bottom: 30px;
}
.header h1 {
color: #1a365d;
font-size: 28px;
margin-bottom: 10px;
font-weight: 600;
}
.header p {
color: #4a5568;
font-size: 16px;
}
.stats-grid {
margin: 0 auto;
}
.stat-card {
margin-bottom: 20px;
cursor: pointer;
transition: all 0.3s ease;
border-radius: 8px;
border: none;
height: 140px;
display: flex;
align-items: center;
}
.stat-card:hover {
transform: translateY(-5px);
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
}
.card-content {
display: flex;
align-items: center;
padding: 15px;
width: 100%;
}
.card-icon {
width: 70px;
height: 70px;
border-radius: 12px;
background-color: #ebf8ff;
display: flex;
align-items: center;
justify-content: center;
margin-right: 20px;
flex-shrink: 0;
}
.card-icon i {
font-size: 36px;
color: #3182ce;
}
.card-info {
flex: 1;
}
.card-title {
font-size: 18px;
font-weight: 600;
color: #2d3748;
margin-bottom: 8px;
}
.card-count {
font-size: 28px;
font-weight: 700;
color: #3182ce;
margin-bottom: 5px;
}
.card-desc {
font-size: 14px;
color: #718096;
line-height: 1.4;
}
.loading {
color: #a0aec0;
}
.no-data {
color: #e53e3e;
}
/* 响应式设计 */
@media (max-width: 768px) {
.stat-card {
height: auto;
}
.card-content {
flex-direction: column;
text-align: center;
}
.card-icon {
margin-right: 0;
margin-bottom: 15px;
}
}
/* 动画效果 */
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.stat-card {
animation: fadeInUp 0.5s ease forwards;
}
.el-col:nth-child(1) .stat-card { animation-delay: 0.1s; }
.el-col:nth-child(2) .stat-card { animation-delay: 0.2s; }
.el-col:nth-child(3) .stat-card { animation-delay: 0.3s; }
.el-col:nth-child(4) .stat-card { animation-delay: 0.4s; }
.el-col:nth-child(5) .stat-card { animation-delay: 0.5s; }
.el-col:nth-child(6) .stat-card { animation-delay: 0.6s; }
</style>