You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
784 lines
33 KiB
784 lines
33 KiB
<template>
|
|
<PublicMapComponents class="map-base" :defCenter="[38.8417433306111, 118.43845367431642]" :defZoom="12" />
|
|
|
|
<div class="base-div">
|
|
<div class="title-top">
|
|
<el-row>
|
|
<el-col :span="6">
|
|
<div class="title-name">
|
|
<span>曹妃甸港区船舶岸电监管平台</span>
|
|
</div>
|
|
<div style="text-align: center;">
|
|
<span class="title-data">
|
|
<span></span>
|
|
<span style="padding: 0 10px">累计用电：{{ totalPower.toFixed(2) }} kWH</span>
|
|
<span></span>
|
|
</span>
|
|
</div>
|
|
|
|
</el-col>
|
|
<el-col :span="14">
|
|
<el-row>
|
|
<template v-for="(item, index) in dataTypeList" :key="index">
|
|
<el-col :span="24 / dataTypeList.length">
|
|
<div class="show-type-btn" :class="{ 'show-type-btn-active': activeButtonType === item.value }"
|
|
@click="updateButtonType(index + 1)">
|
|
{{ item.label }}
|
|
</div>
|
|
</el-col>
|
|
</template>
|
|
|
|
</el-row>
|
|
</el-col>
|
|
<el-col :span="4">
|
|
<div class="title-time">
|
|
<!-- <div class="title-time" @click="splitScreen = !splitScreen">-->
|
|
<!-- 日期 不能换行 换行后显示中多空格 -->
|
|
{{ timer.getFullYear() + '-' }}{{ ((timer.getMonth() + 1) > 9 ? (timer.getMonth() + 1) : ('0' +
|
|
(timer.getMonth() + 1))) + '-' }}{{ (timer.getDate() > 9 ? timer.getDate() : ('0' + timer.getDate())) }}
|
|
<!-- 时间 不能换行 换行后显示中多空格 -->
|
|
{{ (timer.getHours() > 9 ? timer.getHours() : ('0' + timer.getHours())) + ':' }}{{ (timer.getMinutes() > 9 ?
|
|
timer.getMinutes() : ('0' + timer.getMinutes())) + ':' }}{{ timer.getSeconds() > 9 ? timer.getSeconds() :
|
|
('0' + timer.getSeconds()) }}
|
|
</div>
|
|
</el-col>
|
|
</el-row>
|
|
</div>
|
|
|
|
<div style="margin-top: 20px">
|
|
<el-row>
|
|
<el-col :span="showData ? 15 : 24" v-if="!splitScreen">
|
|
<!-- <PublicMapComponents :defCenter="[38.8417433306111, 118.43845367431642]" :defZoom="12" v-if="showData"/>-->
|
|
</el-col>
|
|
|
|
|
|
|
|
|
|
<el-col :span="showData ? 9 : 16" v-if="splitScreen">
|
|
<PublicMapComponents mapName="left" :illustration="true" :defCenter="[38.95448645628942, 118.4517351374956]"
|
|
:defZoom="15" v-if="showData" />
|
|
<PublicMapComponents mapName="left" :illustration="true" :defCenter="[38.95448645628942, 118.4517351374956]"
|
|
:defZoom="15" v-if="!showData" />
|
|
</el-col>
|
|
<el-col :span="showData ? 6 : 8" v-if="splitScreen">
|
|
<PublicMapComponents mapName="right" :illustration="false"
|
|
:defCenter="[38.98524127752966, 118.45273520834166]" :defZoom="16" v-if="showData" />
|
|
<PublicMapComponents mapName="right" :illustration="false"
|
|
:defCenter="[38.98524127752966, 118.45273520834166]" :defZoom="16" v-if="!showData" />
|
|
</el-col>
|
|
|
|
|
|
|
|
<el-col :span="showData ? 9 : 0">
|
|
<div class="data-info">
|
|
<el-scrollbar height="100%">
|
|
<div v-show="activeButtonType === 1" class="data-card">
|
|
<el-row>
|
|
<el-col :span="8">
|
|
<div class="data-card-title">港口岸电使用情况</div>
|
|
</el-col>
|
|
<el-col :span="16">
|
|
<div class="data-date">
|
|
<span :class="dataDate == 1 ? 'date-button-using' : 'date-button'"
|
|
@click="updateDataDate(1)">日</span>
|
|
<span :class="dataDate == 2 ? 'date-button-using' : 'date-button'"
|
|
@click="updateDataDate(2)">周</span>
|
|
<span :class="dataDate == 3 ? 'date-button-using' : 'date-button'"
|
|
@click="updateDataDate(3)">月</span>
|
|
<span :class="dataDate == 4 ? 'date-button-using' : 'date-button'"
|
|
@click="updateDataDate(4)">年</span>
|
|
<span :class="dataDate == 5 ? 'date-button-using' : 'date-button'"
|
|
@click="updateDataDate(5)">全部</span>
|
|
</div>
|
|
</el-col>
|
|
</el-row>
|
|
<el-row :gutter="10">
|
|
<el-col :span="24">
|
|
<div :class="dataType == 1 ? 'data-info-one-using' : 'data-info-one'" @click="dataType = 1">
|
|
<div class="data-card-content-big">{{ usedDl.toFixed(2) }}</div>
|
|
<div class="data-card-name">累计用电（千瓦时）</div>
|
|
</div>
|
|
</el-col>
|
|
<el-col :span="12">
|
|
<div :class="dataType == 2 ? 'data-info-one-using' : 'data-info-one'" @click="dataType = 2">
|
|
<div class="data-card-content">{{ (usedDl / 7936.84).toFixed(2) }}</div>
|
|
<div class="data-card-name">减少燃油（吨）</div>
|
|
</div>
|
|
</el-col>
|
|
<el-col :span="12">
|
|
<div :class="dataType == 3 ? 'data-info-one-using' : 'data-info-one'" @click="dataType = 3">
|
|
<div class="data-card-content">{{ (usedDl / 1.4925373).toFixed(2) }}</div>
|
|
<div class="data-card-name">减少二氧化碳排放（千克）</div>
|
|
</div>
|
|
</el-col>
|
|
<el-col :span="8">
|
|
<div :class="dataType == 4 ? 'data-info-one-using' : 'data-info-one'" @click="dataType = 4">
|
|
<div class="data-card-content">{{ (usedDl / 684.93132534).toFixed(2) }}</div>
|
|
<div class="data-card-name">减少PM2.5排放（千克）</div>
|
|
</div>
|
|
</el-col>
|
|
<el-col :span="8">
|
|
<div :class="dataType == 5 ? 'data-info-one-using' : 'data-info-one'" @click="dataType = 5">
|
|
<div class="data-card-content">{{ (usedDl / 55.24862549).toFixed(2) }}</div>
|
|
<div class="data-card-name">减少氮氧化物（千克）</div>
|
|
</div>
|
|
</el-col>
|
|
<el-col :span="8">
|
|
<div :class="dataType == 6 ? 'data-info-one-using' : 'data-info-one'" @click="dataType = 6">
|
|
<div class="data-card-content">{{ (usedDl / 95.238).toFixed(2) }}</div>
|
|
<div class="data-card-name">减少二氧化硫（千克）</div>
|
|
</div>
|
|
</el-col>
|
|
</el-row>
|
|
</div>
|
|
<div v-show="activeButtonType === 2" class="data-card">
|
|
<el-row>
|
|
<el-col :span="10">
|
|
<div class="data-card-title" v-if="dataType == 1">港口企业岸电使用</div>
|
|
<div class="data-card-title" v-else-if="dataType == 2">港口企业燃油消耗减少</div>
|
|
<div class="data-card-title" v-else-if="dataType == 3">港口企业二氧化碳排放减少</div>
|
|
<div class="data-card-title" v-else-if="dataType == 4">港口企业PM2.5排放减少</div>
|
|
<div class="data-card-title" v-else-if="dataType == 5">港口企业氮氧化物排放减少</div>
|
|
<div class="data-card-title" v-else-if="dataType == 6">港口企业二氧化硫排放减少</div>
|
|
</el-col>
|
|
<el-col :span="14">
|
|
<div class="data-date">
|
|
<span :class="dataDate == 1 ? 'date-button-using' : 'date-button'"
|
|
@click="updateDataDate(1)">日</span>
|
|
<span :class="dataDate == 2 ? 'date-button-using' : 'date-button'"
|
|
@click="updateDataDate(2)">周</span>
|
|
<span :class="dataDate == 3 ? 'date-button-using' : 'date-button'"
|
|
@click="updateDataDate(3)">月</span>
|
|
<span :class="dataDate == 4 ? 'date-button-using' : 'date-button'"
|
|
@click="updateDataDate(4)">年</span>
|
|
<span :class="dataDate == 5 ? 'date-button-using' : 'date-button'"
|
|
@click="updateDataDate(5)">全部</span>
|
|
<span class="date-button" v-show="showBerth" @click="updateBerth({})">返回</span>
|
|
</div>
|
|
</el-col>
|
|
</el-row>
|
|
<div class="data-card-black">
|
|
<div v-for="(item, index) in dockShowData" :key="index">
|
|
<div @click="updateBerth(item)">
|
|
<el-row>
|
|
<el-col class="data-progress-data" :span="6">
|
|
<div class="data-progress-name">{{ item.name }}</div>
|
|
</el-col>
|
|
<el-col class="data-progress-data" :span="18">
|
|
<div>
|
|
<el-progress :text-inside="true" :stroke-width="18" :percentage="item.value * 200"
|
|
status="success">
|
|
<span>
|
|
{{ (usedDl * item.value / (dataType == 1 ? 1 : dataType == 2 ? 7936.84 : dataType == 3 ?
|
|
1.4925373 : dataType == 4 ? 684.93132534 : dataType == 5 ? 55.24862549 : dataType == 6 ?
|
|
95.238 : 1)).toFixed(2) }}
|
|
{{ dataType == 1 ? ' kWH' : dataType == 2 ? ' t' : ' kg' }}
|
|
</span>
|
|
</el-progress>
|
|
</div>
|
|
</el-col>
|
|
</el-row>
|
|
</div>
|
|
</div>
|
|
<div class="data-card-black">
|
|
<div v-for="(item, index) in usingData" :key="index">
|
|
<el-row>
|
|
<el-col :span="4">
|
|
<div class="ship-info-info-green">{{ item.dock }}</div>
|
|
</el-col>
|
|
<el-col :span="5">
|
|
<div class="ship-info-info-green">{{ item.berth }}</div>
|
|
</el-col>
|
|
<el-col :span="7">
|
|
<div class="ship-info-info-green">{{ item.name }}</div>
|
|
</el-col>
|
|
<el-col :span="4">
|
|
<div class="ship-info-info-green">正在用电</div>
|
|
</el-col>
|
|
<el-col :span="4">
|
|
<div class="ship-info-info-green">{{ item.used }}</div>
|
|
</el-col>
|
|
</el-row>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div v-show="activeButtonType === 3" class="data-card">
|
|
<el-row>
|
|
<el-col :span="10">
|
|
<div class="data-card-title">船舶岸电使用情况</div>
|
|
</el-col>
|
|
<el-col :span="14">
|
|
<div class="data-date">
|
|
<span :class="dataDate == 1 ? 'date-button-using' : 'date-button'"
|
|
@click="updateDataDate(1)">日</span>
|
|
<span :class="dataDate == 2 ? 'date-button-using' : 'date-button'"
|
|
@click="updateDataDate(2)">周</span>
|
|
<span :class="dataDate == 3 ? 'date-button-using' : 'date-button'"
|
|
@click="updateDataDate(3)">月</span>
|
|
<span :class="dataDate == 4 ? 'date-button-using' : 'date-button'"
|
|
@click="updateDataDate(4)">年</span>
|
|
<span :class="dataDate == 5 ? 'date-button-using' : 'date-button'"
|
|
@click="updateDataDate(5)">全部</span>
|
|
</div>
|
|
</el-col>
|
|
</el-row>
|
|
<el-row :gutter="10">
|
|
<el-col :span="8">
|
|
<div :class="showShipData == 1 ? 'data-info-one-using' : 'data-info-one'"
|
|
@click="showShipData = showShipData == 1 ? 0 : 1">
|
|
<div class="data-card-content">13</div>
|
|
<div class="data-card-name-big">在泊船舶数量</div>
|
|
</div>
|
|
</el-col>
|
|
<el-col :span="8">
|
|
<div :class="showShipData == 2 ? 'data-info-one-using' : 'data-info-one'"
|
|
@click="showShipData = showShipData == 2 ? 0 : 2">
|
|
<div class="data-card-content">3</div>
|
|
<div class="data-card-name-big">使用岸电船舶数量</div>
|
|
</div>
|
|
</el-col>
|
|
<el-col :span="8">
|
|
<div :class="showShipData == 3 ? 'data-info-one-using' : 'data-info-one'"
|
|
@click="showShipData = showShipData == 3 ? 0 : 3">
|
|
<div class="data-card-content">10</div>
|
|
<div class="data-card-name-big">未使用岸电船舶数量</div>
|
|
</div>
|
|
</el-col>
|
|
<el-col :span="24">
|
|
<div v-if="showShipData != 0" class="ship-info-card">
|
|
<div class="ship-info">
|
|
<div class="ship-info-title" @click="showShipData = 0">收起 ↑</div>
|
|
<el-scrollbar height="180px">
|
|
<div v-for="(item, index) in shipData" :key="index">
|
|
<div
|
|
v-if="showShipData == 1 || (showShipData == 2 && item.reasonType == 1) || (showShipData == 3 && (item.reasonType == 2 || item.reasonType == 3))">
|
|
|
|
<el-popover :title="item.name" placement="left" :width="430">
|
|
<template #reference>
|
|
<el-row>
|
|
<el-col :span="3">
|
|
<div
|
|
:class="item.reasonType == 1 ? 'ship-info-green' : item.reasonType == 2 ? 'ship-info-yellow' : 'ship-info-red'">
|
|
{{ item.name }}</div>
|
|
</el-col>
|
|
<el-col :span="5">
|
|
<div
|
|
:class="item.reasonType == 1 ? 'ship-info-green' : item.reasonType == 2 ? 'ship-info-yellow' : 'ship-info-red'">
|
|
{{ item.dock }}</div>
|
|
</el-col>
|
|
<el-col :span="3">
|
|
<div
|
|
:class="item.reasonType == 1 ? 'ship-info-green' : item.reasonType == 2 ? 'ship-info-yellow' : 'ship-info-red'">
|
|
{{ item.berth }}</div>
|
|
</el-col>
|
|
<el-col :span="13">
|
|
<div
|
|
:class="item.reasonType == 1 ? 'ship-info-green' : item.reasonType == 2 ? 'ship-info-yellow' : 'ship-info-red'">
|
|
{{ item.reason }}</div>
|
|
</el-col>
|
|
</el-row>
|
|
</template>
|
|
<div>
|
|
<div class="ship-info-info-default">船名：{{ item.name }}</div>
|
|
<div
|
|
:class="item.reasonType == 1 ? 'ship-info-info-green' : item.reasonType == 2 ? 'ship-info-info-yellow' : 'ship-info-info-red'">
|
|
岸电使用情况：{{ item.reason }}</div>
|
|
<div class="ship-info-info-default">船舶信息：{{ item.info }}</div>
|
|
</div>
|
|
</el-popover>
|
|
</div>
|
|
</div>
|
|
</el-scrollbar>
|
|
</div>
|
|
</div>
|
|
</el-col>
|
|
</el-row>
|
|
</div>
|
|
|
|
<!-- <div class="data-card">
|
|
<div class="data-card-title" style="text-align: center;">船舶使用岸电情况</div>
|
|
<el-row :gutter="10">
|
|
<el-col :span="6">
|
|
<div class="data-info-one" style="cursor: default;">
|
|
<div class="data-card-content">20</div>
|
|
<div class="data-card-name">岸电设备数量</div>
|
|
</div>
|
|
</el-col>
|
|
<el-col :span="6">
|
|
<div class="data-info-one" style="cursor: default;">
|
|
<div class="data-card-content">10</div>
|
|
<div class="data-card-name">在泊船舶数量</div>
|
|
</div>
|
|
</el-col>
|
|
<el-col :span="6">
|
|
<div class="data-info-one" style="cursor: default;">
|
|
<div class="data-card-content">3</div>
|
|
<div class="data-card-name">岸电使用船舶数量</div>
|
|
</div>
|
|
</el-col>
|
|
<el-col :span="6">
|
|
<div class="data-info-one" style="cursor: default;">
|
|
<div class="data-card-content">1</div>
|
|
<div class="data-card-name">故障/维护岸电设施数量</div>
|
|
</div>
|
|
</el-col>
|
|
</el-row>
|
|
</div>-->
|
|
|
|
</el-scrollbar>
|
|
</div>
|
|
</el-col>
|
|
</el-row>
|
|
</div>
|
|
</div>
|
|
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
|
|
import PublicMapComponents from './components/index.vue'
|
|
|
|
defineOptions({ name: 'PublicMap' })
|
|
|
|
const timer = ref(new Date())
|
|
const getTime = () => {
|
|
timer.value = new Date()
|
|
setTimeout(() => {
|
|
getTime()
|
|
}, 100)
|
|
}
|
|
const splitScreen = ref(false)
|
|
|
|
const showData = ref(true)
|
|
const dataDate = ref<number>(1)
|
|
let defaultDlData = ref<number>(835229.91)
|
|
let totalPower = ref<number>(1492774 + defaultDlData.value)
|
|
let usedDl = ref<number>(defaultDlData.value * dataDate.value)
|
|
const buildDlData = () => {
|
|
setTimeout(() => {
|
|
buildDlData()
|
|
}, 5000)
|
|
defaultDlData.value = (defaultDlData.value + Math.random() * 10 + 30)
|
|
totalPower.value = (1492774 + defaultDlData.value * 1)
|
|
usedDl.value = (defaultDlData.value * dataDate.value)
|
|
}
|
|
const updateDataDate = (number: number) => {
|
|
if (number == 5) {
|
|
window.open("http://server.ayaojies.com.cn:801/login", '_blank');
|
|
} else {
|
|
dataDate.value = number
|
|
usedDl.value = 835229.9 * number
|
|
}
|
|
}
|
|
const dataType = ref<number>(1)
|
|
|
|
const dataTypeList = ref<{ value: number, label: string }[]>([
|
|
{ value: 1, label: '港口岸电使用情况' },
|
|
{ value: 2, label: '港口企业岸电使用' },
|
|
{ value: 3, label: '船舶岸电使用情况' },
|
|
])
|
|
|
|
const dockData = ref([
|
|
{
|
|
index: 1, name: '华能码头', value: 0.278, berth: [
|
|
{ index: 1, name: '1泊位', value: 0.25 },
|
|
{ index: 2, name: '2泊位', value: 0.15 },
|
|
{ index: 3, name: '3泊位', value: 0.1 },
|
|
{ index: 4, name: '4泊位', value: 0.4 },
|
|
{ index: 5, name: '5泊位', value: 0.1 },
|
|
]
|
|
},
|
|
{
|
|
index: 2, name: '国投码头', value: 0.495, berth: [
|
|
{ index: 1, name: '201泊位', value: 0.25 },
|
|
{ index: 2, name: '202泊位', value: 0.15 },
|
|
{ index: 3, name: '203泊位', value: 0.1 },
|
|
{ index: 4, name: '204泊位', value: 0.4 },
|
|
{ index: 5, name: '205泊位', value: 0.1 },
|
|
{ index: 1, name: '206泊位', value: 0.25 },
|
|
{ index: 2, name: '207泊位', value: 0.15 },
|
|
{ index: 3, name: '208泊位', value: 0.1 },
|
|
{ index: 4, name: '209泊位', value: 0.4 },
|
|
{ index: 5, name: '210泊位', value: 0.1 },
|
|
]
|
|
},
|
|
{
|
|
index: 3, name: '华电码头（储运）', value: 0.227, berth: [
|
|
{ index: 1, name: '806泊位', value: 0.25 },
|
|
{ index: 2, name: '807泊位', value: 0.15 },
|
|
{ index: 3, name: '808泊位', value: 0.1 },
|
|
{ index: 4, name: '809泊位', value: 0.4 },
|
|
{ index: 5, name: '810泊位', value: 0.1 },
|
|
]
|
|
}
|
|
])
|
|
const dockShowData = ref(dockData.value)
|
|
let showBerth = ref(false)
|
|
const updateBerth = (item: any) => {
|
|
if (showBerth.value) {
|
|
showBerth.value = false
|
|
dockShowData.value = dockData.value
|
|
}
|
|
if (!showBerth.value) {
|
|
if (item.berth) {
|
|
showBerth.value = true
|
|
dockShowData.value = item.berth
|
|
}
|
|
}
|
|
}
|
|
|
|
const usingData = ref([
|
|
{ index: 1, name: '华元503', dock: '华能码头', berth: '3泊位', used: '2479kWH' },
|
|
{ index: 1, name: '和泰通10', dock: '华电码头（储运）', berth: '810泊位', used: '2192kWH' },
|
|
{ index: 1, name: '永宁2', dock: '华电码头（储运）', berth: '808泊位', used: '692kWH' },
|
|
|
|
])
|
|
|
|
|
|
const shipData = ref([
|
|
{ index: 1, name: '华元503', dock: '华能码头', berth: '3泊位', reasonType: 1, reason: '使用岸电21小时45分钟，2479kWH', info: { info: '这里可以显示船舶的信息' } },
|
|
{ index: 2, name: '信洋新征程', dock: '国投码头', berth: '202#泊位', reasonType: 2, reason: '无受电设备', info: { info: '这里可以显示船舶的信息' } },
|
|
{ index: 3, name: '华海航2', dock: '华电码头（储运）', berth: '806泊位', reasonType: 2, reason: '船电设施损坏，预计2025-11-30恢复', info: { info: '这里可以显示船舶的信息' } },
|
|
{ index: 4, name: '东亿603', dock: '国投码头', berth: '205#泊位', reasonType: 2, reason: '电缆长度不匹配', info: { info: '这里可以显示船舶的信息' } },
|
|
{ index: 5, name: '东成山', dock: '华能码头', berth: '2泊位', reasonType: 2, reason: '岸电用电接口不匹配', info: { info: '这里可以显示船舶的信息' } },
|
|
{ index: 6, name: '中茂98', dock: '华电码头（储运）', berth: '807泊位', reasonType: 3, reason: '岸电设施维护中', info: { info: '这里可以显示船舶的信息' } },
|
|
{ index: 7, name: '舜华', dock: '国投码头', berth: '203#泊位', reasonType: 2, reason: '岸电用电接口不匹配', info: { info: '这里可以显示船舶的信息' } },
|
|
{ index: 8, name: '浙海温州', dock: '华能码头', berth: '5泊位', reasonType: 2, reason: '岸电设施电压/频率不匹配', info: { info: '这里可以显示船舶的信息' } },
|
|
{ index: 9, name: '浙能2', dock: '华能码头', berth: '1泊位', reasonType: 2, reason: '无受电设备', info: { info: '这里可以显示船舶的信息' } },
|
|
{ index: 10, name: '华润电力2', dock: '国投码头', berth: '201#泊位', reasonType: 3, reason: '气象因素禁止作业', info: { info: '这里可以显示船舶的信息' } },
|
|
{ index: 11, name: '和泰通10', dock: '华电码头（储运）', berth: '810泊位', reasonType: 1, reason: '使用岸电17小时45分钟，2192kWH', info: { info: '这里可以显示船舶的信息' } },
|
|
{ index: 12, name: '永宁2', dock: '华电码头（储运）', berth: '808泊位', reasonType: 1, reason: '使用岸电3小时15分钟，692kWH', info: { info: '这里可以显示船舶的信息' } },
|
|
{ index: 13, name: '盛达海', dock: '华能码头', berth: '4泊位', reasonType: 3, reason: '岸电设施维护中', info: { info: '这里可以显示船舶的信息' } },
|
|
{ index: 13, name: '新世纪128', dock: '国投码头', berth: '201#泊位', reasonType: 2, reason: '岸电设施电压/频率不匹配', info: { info: '这里可以显示船舶的信息' } },
|
|
{ index: 13, name: '太行128', dock: '国投码头', berth: '206#泊位', reasonType: 2, reason: '无受电设备', info: { info: '这里可以显示船舶的信息' } },
|
|
{ index: 13, name: '东和明16', dock: '国投码头', berth: '208#泊位', reasonType: 2, reason: '岸电设施电压/频率不匹配', info: { info: '这里可以显示船舶的信息' } },
|
|
{ index: 13, name: '华鲁海1', dock: '华电码头（储运）', berth: '809泊位', reasonType: 2, reason: '拒绝使用岸电', info: { info: '这里可以显示船舶的信息' } },
|
|
{ index: 13, name: '安永山', dock: '国投码头', berth: '204#泊位', reasonType: 2, reason: '岸电设施电压/频率不匹配', info: { info: '这里可以显示船舶的信息' } },
|
|
{ index: 13, name: '华盛151', dock: '国投码头', berth: '209#泊位', reasonType: 2, reason: '电缆长度不匹配', info: { info: '这里可以显示船舶的信息' } },
|
|
])
|
|
const showShipData = ref<number>(1)
|
|
const activeButtonType = ref<number>(1)
|
|
|
|
const updateButtonType = (type: number) => {
|
|
activeButtonType.value = type
|
|
// 在这里可以添加其他业务逻辑
|
|
console.log('切换到按钮类型:', type)
|
|
}
|
|
|
|
/** 初始化 **/
|
|
onMounted(() => {
|
|
getTime()
|
|
buildDlData()
|
|
})
|
|
|
|
|
|
</script>
|
|
<style scoped lang="scss">
|
|
/* .map-base {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
z-index: -999;
|
|
width: 100%;
|
|
height: 100%;
|
|
background-color: rgba(30, 30, 30, 0.7);
|
|
} */
|
|
|
|
.map-base:hover {
|
|
z-index: 999;
|
|
}
|
|
|
|
.base-div {
|
|
height: 100%;
|
|
//background-color: rgba(10, 50, 100, 1);
|
|
padding: 15px;
|
|
|
|
.title-top {
|
|
position: fixed;
|
|
top: 20px;
|
|
left: 30px;
|
|
right: 30px;
|
|
width: calc(100% - 60px);
|
|
padding: 30px;
|
|
border-radius: 10px;
|
|
background-color: rgba(255, 255, 255, 0.15);
|
|
box-shadow: 0 0 15px rgba(0, 0, 0, 0.3);
|
|
|
|
.title-time {
|
|
font-size: 20px;
|
|
color: rgba(20, 200, 255, 0.8);
|
|
font-weight: bold;
|
|
text-align: right;
|
|
}
|
|
|
|
.title-name {
|
|
font-size: 28px;
|
|
color: rgba(20, 200, 255, 1);
|
|
text-align: center;
|
|
font-weight: bold;
|
|
line-height: 30px;
|
|
text-shadow: 0 0 5px rgba(0, 0, 0, 1), 0 0 6px rgba(20, 200, 255, 0.3), 0 0 7px rgba(20, 200, 255, 0.2), 0 0 8px rgba(20, 200, 255, 0.1);
|
|
}
|
|
|
|
.show-type-btn {
|
|
margin: 5px;
|
|
padding: 8px 12px;
|
|
border: 1px solid rgba(10, 180, 240, 1);
|
|
border-radius: 5px;
|
|
font-size: 14px;
|
|
color: rgba(10, 180, 240, 1);
|
|
text-align: center;
|
|
cursor: pointer;
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.show-type-btn-active {
|
|
background-color: rgba(10, 180, 240, 1);
|
|
color: rgba(0, 0, 0, 1);
|
|
font-weight: bold;
|
|
}
|
|
|
|
.show-type-btn:hover {
|
|
background-color: rgba(10, 180, 240, 0.2);
|
|
transform: translateY(-2px);
|
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
|
|
}
|
|
|
|
.show-type-btn-active:hover {
|
|
background-color: rgba(10, 180, 240, 1);
|
|
transform: none;
|
|
box-shadow: none;
|
|
}
|
|
|
|
.title-data {
|
|
padding: 8px 15px;
|
|
font-size: 20px;
|
|
color: rgba(20, 200, 255, 0.8);
|
|
font-weight: bold;
|
|
text-align: right;
|
|
border-radius: 10px;
|
|
|
|
&:active {
|
|
box-shadow: 0 0 15px 5px rgba(20, 200, 255, 0.3), 0 0 25px 10px rgba(20, 200, 255, 0.1);
|
|
}
|
|
}
|
|
}
|
|
|
|
.data-info {
|
|
position: fixed;
|
|
top: 100px;
|
|
right: 0px;
|
|
width: calc(40%);
|
|
padding: 30px;
|
|
border-radius: 10px;
|
|
margin-left: 10px;
|
|
|
|
.data-card-black {
|
|
margin-top: 15px;
|
|
padding: 10px;
|
|
background-color: rgba(0, 0, 0, 0.15);
|
|
border-radius: 10px;
|
|
}
|
|
|
|
.data-card {
|
|
margin-top: 15px;
|
|
padding: 10px;
|
|
background-color: rgba(255, 255, 255, 0.15);
|
|
border-radius: 10px;
|
|
|
|
.data-card-title {
|
|
font-size: 18px;
|
|
color: rgba(10, 180, 240, 1);
|
|
font-weight: bold;
|
|
line-height: 30px;
|
|
text-shadow: 0 0 3px rgba(0, 0, 0, 1), 0 0 4px rgba(20, 200, 255, 0.3), 0 0 5px rgba(20, 200, 255, 0.2), 0 0 6px rgba(20, 200, 255, 0.1);
|
|
}
|
|
|
|
.data-date {
|
|
text-align: right;
|
|
margin: 2px;
|
|
|
|
.date-button {
|
|
margin: 6px;
|
|
padding: 4px 8px;
|
|
border: 1px solid rgba(10, 180, 240, 1);
|
|
border-radius: 5px;
|
|
font-size: 12px;
|
|
color: rgba(10, 180, 240, 1);
|
|
cursor: pointer;
|
|
}
|
|
|
|
.date-button-using {
|
|
margin: 6px;
|
|
padding: 4px 8px;
|
|
background-color: rgba(10, 180, 240, 1);
|
|
border: 1px solid rgba(10, 180, 240, 1);
|
|
border-radius: 5px;
|
|
font-size: 12px;
|
|
color: rgba(0, 0, 0, 1);
|
|
cursor: default;
|
|
}
|
|
}
|
|
|
|
.data-info-one {
|
|
margin-top: 10px;
|
|
padding: 10px;
|
|
text-align: center;
|
|
background-color: rgba(10, 30, 30, 0.2);
|
|
border: 1px solid rgba(10, 130, 170, 1);
|
|
border-radius: 10px;
|
|
cursor: pointer;
|
|
|
|
.data-card-content-big {
|
|
font-size: 30px;
|
|
color: rgba(10, 180, 240, 1);
|
|
font-weight: bold;
|
|
line-height: 30px;
|
|
text-shadow: 0 0 3px rgba(0, 0, 0, 1), 0 0 4px rgba(20, 200, 255, 0.3), 0 0 5px rgba(20, 200, 255, 0.2), 0 0 6px rgba(20, 200, 255, 0.1);
|
|
}
|
|
|
|
.data-card-content {
|
|
font-size: 25px;
|
|
color: rgba(10, 180, 240, 1);
|
|
font-weight: bold;
|
|
line-height: 25px;
|
|
text-shadow: 0 0 3px rgba(0, 0, 0, 1), 0 0 4px rgba(20, 200, 255, 0.3), 0 0 5px rgba(20, 200, 255, 0.2), 0 0 6px rgba(20, 200, 255, 0.1);
|
|
}
|
|
|
|
.data-card-name {
|
|
margin-top: 5px;
|
|
font-size: 10px;
|
|
color: rgba(200, 200, 200, 1);
|
|
}
|
|
|
|
.data-card-name-big {
|
|
margin-top: 5px;
|
|
font-size: 16px;
|
|
color: rgba(240, 240, 240, 1);
|
|
}
|
|
}
|
|
|
|
.data-info-one-using {
|
|
margin-top: 10px;
|
|
padding: 10px;
|
|
text-align: center;
|
|
background-color: rgba(30, 190, 240, 0.2);
|
|
border: 1px solid rgba(50, 200, 255, 1);
|
|
border-radius: 10px;
|
|
cursor: pointer;
|
|
|
|
.data-card-content-big {
|
|
font-size: 30px;
|
|
color: rgba(10, 180, 240, 1);
|
|
font-weight: bold;
|
|
line-height: 30px;
|
|
text-shadow: 0 0 3px rgba(0, 0, 0, 1), 0 0 4px rgba(20, 200, 255, 0.3), 0 0 5px rgba(20, 200, 255, 0.2), 0 0 6px rgba(20, 200, 255, 0.1);
|
|
}
|
|
|
|
.data-card-content {
|
|
font-size: 25px;
|
|
color: rgba(10, 180, 240, 1);
|
|
font-weight: bold;
|
|
line-height: 25px;
|
|
text-shadow: 0 0 3px rgba(0, 0, 0, 1), 0 0 4px rgba(20, 200, 255, 0.3), 0 0 5px rgba(20, 200, 255, 0.2), 0 0 6px rgba(20, 200, 255, 0.1);
|
|
}
|
|
|
|
.data-card-name {
|
|
margin-top: 5px;
|
|
font-size: 10px;
|
|
color: rgba(200, 200, 200, 1);
|
|
}
|
|
|
|
.data-card-name-big {
|
|
margin-top: 5px;
|
|
font-size: 16px;
|
|
color: rgba(240, 240, 240, 1);
|
|
}
|
|
}
|
|
|
|
.data-progress-name {
|
|
font-size: 15px;
|
|
color: rgba(10, 180, 240, 1);
|
|
font-weight: bold;
|
|
line-height: 15px;
|
|
text-shadow: 0 0 3px rgba(0, 0, 0, 1), 0 0 4px rgba(20, 200, 255, 0.3), 0 0 5px rgba(20, 200, 255, 0.2), 0 0 6px rgba(20, 200, 255, 0.1);
|
|
cursor: pointer;
|
|
}
|
|
|
|
.data-progress-data {
|
|
margin-top: 10px;
|
|
margin-bottom: 5px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.ship-info-card {
|
|
margin-top: 10px;
|
|
font-size: 15px;
|
|
line-height: 30px;
|
|
|
|
.ship-info-title {
|
|
padding: 10px;
|
|
text-align: center;
|
|
font-size: 15px;
|
|
color: rgba(10, 180, 240, 1);
|
|
font-weight: 400;
|
|
line-height: 15px;
|
|
border: 1px solid rgba(10, 180, 240, 1);
|
|
border-radius: 7px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.ship-info {
|
|
border-radius: 10px;
|
|
border: 1px solid rgba(10, 180, 240, 1);
|
|
background-color: rgba(10, 30, 30, 0.2);
|
|
|
|
.ship-info-green {
|
|
margin-left: 10px;
|
|
color: rgba(50, 255, 100, 1);
|
|
}
|
|
|
|
.ship-info-red {
|
|
margin-left: 10px;
|
|
color: rgba(255, 70, 70, 1);
|
|
}
|
|
|
|
.ship-info-yellow {
|
|
margin-left: 10px;
|
|
color: rgba(255, 150, 0, 1);
|
|
}
|
|
}
|
|
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
.ship-info-info-default {
|
|
margin-left: 10px;
|
|
margin-bottom: 5px;
|
|
color: rgba(50, 50, 50, 1);
|
|
}
|
|
|
|
.ship-info-info-green {
|
|
margin-left: 10px;
|
|
margin-bottom: 5px;
|
|
color: rgba(50, 200, 80, 1);
|
|
}
|
|
|
|
.ship-info-info-red {
|
|
margin-left: 10px;
|
|
margin-bottom: 5px;
|
|
color: rgba(255, 70, 70, 1);
|
|
}
|
|
|
|
.ship-info-info-yellow {
|
|
margin-left: 10px;
|
|
margin-bottom: 5px;
|
|
color: rgba(255, 150, 0, 1);
|
|
}
|
|
</style>
|
|
|