682 lines
17 KiB
Vue
682 lines
17 KiB
Vue
<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>
|