1.首页调整为显示最近的10个航次；
2.地图右上角增加小图标（船），鼠标滑动到图标上后显示这10个航次的列表； 3.点击：记录高亮、移除其他高亮图层、加载对应的航次高亮图层、，再次点击，取消航次记录高亮，移除该航次高亮突出; 4.Checkbox框：选中代表该航次图层显示在地图上，取消则隐藏该航次图层。默认10个航次全部选中; 5.增加4500米、6000米等深线按钮，点击触发：加载/取消对应的等深线图层
This commit is contained in:
zhangqi
parent
a922d431bd
commit
6082400308
|
|
@ -106,7 +106,7 @@ export default {
|
||||||
// },
|
// },
|
||||||
{
|
{
|
||||||
name:"统计分析",
|
name:"统计分析",
|
||||||
path:"analyse",
|
path:"statistics",
|
||||||
children:[]
|
children:[]
|
||||||
},
|
},
|
||||||
// {
|
// {
|
||||||
|
|
|
||||||
|
|
@ -328,16 +328,36 @@ export const constantRoutes = [
|
||||||
loginAuthority: true
|
loginAuthority: true
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
// {
|
||||||
|
// path: 'analyse',
|
||||||
|
// name: 'analyse',
|
||||||
|
// component: () => import('@/views/analyse.vue'),
|
||||||
|
// meta: {
|
||||||
|
// title: '统计分析',
|
||||||
|
// icon: 'peoples',
|
||||||
|
// loginAuthority: true
|
||||||
|
// }
|
||||||
|
// },
|
||||||
{
|
{
|
||||||
path: 'analyse',
|
path: 'statistics',
|
||||||
name: 'analyse',
|
name: 'statistics',
|
||||||
component: () => import('@/views/analyse.vue'),
|
component: () => import('@/views/statistics/index.vue'),
|
||||||
meta: {
|
meta: {
|
||||||
title: '统计分析',
|
title: '统计分析',
|
||||||
icon: 'peoples',
|
icon: 'peoples',
|
||||||
loginAuthority: true
|
loginAuthority: true
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
path: 'ships',
|
||||||
|
name: 'ships',
|
||||||
|
component: () => import('@/views/statistics/ShipStatistics.vue'),
|
||||||
|
meta: {
|
||||||
|
title: '科考船汇总统计',
|
||||||
|
icon: 'peoples',
|
||||||
|
loginAuthority: true
|
||||||
|
}
|
||||||
|
},
|
||||||
{
|
{
|
||||||
path: 'AboutUs',
|
path: 'AboutUs',
|
||||||
name: 'AboutUs',
|
name: 'AboutUs',
|
||||||
|
|
|
||||||
|
|
@ -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>
|
||||||
|
|
@ -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>
|
||||||
Loading…
Reference in New Issue