jjx
/
g-cesium-map
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

update

feature
jiangAB 4 days ago
parent
bf8d9a5a49
commit
fb93301585
6 changed files with 106 additions and 65 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 2
      public/map/components/CompanyShorePower.vue
  2. 23
      public/map/components/ShorePowerUsageRate.vue
  3. 71
      public/map/components/ShowData.vue
  4. 12
      public/map/components/cesiumMap.vue
  5. 10
      public/map/components/charts/ComparisonBarChart.vue
  6. 53
      public/map/index.vue

2
public/map/components/CompanyShorePower.vue
View File

@ -526,7 +526,7 @@ onMounted(() => {
display: flex;
align-items: center;
justify-content: center;
font-size: 16px;
font-size: 24px;
font-weight: bold;
color: #fff;
padding: 4px;

23
public/map/components/ShorePowerUsageRate.vue
View File

@ -438,31 +438,8 @@ onBeforeUnmount(() => {
margin-right: 4px;
}
.comparison-type-selector {
display: inline-flex;
margin: 0 10px;
width: fit-content;
background: rgba(255, 255, 255, 0.1);
padding: 2px;
// margin-bottom: 8px;
border-radius: 4px;
}
.comparison-type-btn {
border: none;
background: transparent;
color: #ccc;
padding: 4px 8px;
border-radius: 2px;
cursor: pointer;
font-size: 14px;
transition: all 0.3s;
&.active {
background: #1890ff;
color: white;
}
}
.right {
/* gap: 0 */

71
public/map/components/ShowData.vue
View File

@ -65,7 +65,7 @@
<span class="label">名称:</span>
<span class="value">{{ shipSelectedItem.shipBasicInfo.name + '-' +
shipSelectedItem.shipBasicInfo.nameEn
}}</span>
}}</span>
</div>
<!-- <div class="detail-item">
<span class="label">英文船名:</span>
@ -119,7 +119,7 @@
<span class="label">靠泊类型:</span>
<span class="value">{{ getOperationTypeLabel(shipSelectedItem.shorePowerAndShip.type,
BERTH_TYPE)
}}</span>
}}</span>
</div>
<div class="detail-item">
<span class="label">靠泊时间:</span>
@ -148,12 +148,12 @@
<div class="detail-item">
<span class="label">岸电联系人:</span>
<span class="value">{{ shipSelectedItem?.shipBasicInfo?.shorePowerContact
}}</span>
}}</span>
</div>
<div class="detail-item">
<span class="label">联系方式:</span>
<span class="value">{{ shipSelectedItem?.shipBasicInfo?.shorePowerContactPhone
}}</span>
}}</span>
</div>
</div>
</div>
@ -234,6 +234,7 @@
</div>
</div>
</div>
<div style="margin-top: 8px; font-size: 16px;">注： 点击查看同比环比信息</div>
</div>
<!-- 港口企业岸电使用 -->
@ -310,26 +311,38 @@
</div>
</div>
<div class="ship-status">
<div class="usage-rate shadow" @click="handleOpenRate">
<div class="usage-rate shadow" @click.stop="handleClickComparison()">
<div class="comparison-type-selector-container">
<div class="comparison-type-selector">
<button :class="['comparison-type-btn', { active: shorePowerCardShow }]"
@click.stop="handleClickComparison()">
环比/同比
</button>
<!-- <button :class="['comparison-type-btn', { active: comparisonType === 'yearOnYear' }]"
@click="handleClickComparison('yearOnYear')">
同比
</button> -->
</div>
</div>
<div class="rate-value">{{ calculateShorePowerUsageRate() }}%</div>
<div class="rate-label">岸电使用率</div>
</div>
<div class="status-grid">
<div class="status-card">
<div class="status-card" @click="handleCloseShipList()">
<div class="status-value">{{ shipTotalData.allPortAreaCount }}</div>
<div class="status-label">在港船舶</div>
<div class="status-label">在港船舶<br />(艘)</div>
</div>
<div class="status-card" @click="handleShowShipList('all')">
<div class="status-value">{{ shipTotalData.berthingShips }}</div>
<div class="status-label">在泊船舶</div>
<div class="status-label">靠泊船舶<br />(艘)</div>
</div>
<div class="status-card" @click="handleShowShipList('using')">
<div class="status-value">{{ shipTotalData.shorePowerShips }}</div>
<div class="status-label">使用岸电船舶</div>
<div class="status-label">使用岸电船舶(艘)</div>
</div>
<div class="status-card" @click="handleShowShipList('notUsing')">
<div class="status-value">{{ shipTotalData.noShorePowerShips }}</div>
<div class="status-label">未使用岸电船舶</div>
<div class="status-label">未使用岸电船舶(艘)</div>
</div>
</div>
<!-- <div class="ship-list">
@ -456,6 +469,8 @@ const shipHistoryVisible = ref({
const shipSelectedItem = ref<ShipRespVo | null>(null)
const shorePowerCardShow = ref(false)
const comparisonType = ref('chain')
const periodOptions = [
{ label: '当日', value: 'day' },
{ label: '当月', value: 'month' },
@ -463,30 +478,13 @@ const periodOptions = [
{ label: '汇总', value: 'realtime' },
]
// 模拟不同时间段的数据
const rankingData = {
今日: [
{ rank: 1, name: '华能曹妃甸港口有限公司', value: '350,000', change: '+15%', isUp: true },
{ rank: 2, name: '河北华电曹妃甸储运有限公司', value: '280,000', change: '+8%', isUp: true },
{ rank: 3, name: '国投曹妃甸港口有限公司', value: '220,000', change: '-3%', isUp: false }
],
本月: [
{ rank: 1, name: '华能曹妃甸港口有限公司', value: '8,350,000', change: '+12%', isUp: true },
{ rank: 2, name: '国投曹妃甸港口有限公司', value: '7,280,000', change: '+5%', isUp: true },
{ rank: 3, name: '河北华电曹妃甸储运有限公司', value: '6,220,000', change: '-2%', isUp: false }
],
本年: [
{ rank: 1, name: '华能曹妃甸港口有限公司', value: '120,350,000', change: '+18%', isUp: true },
{ rank: 2, name: '国投曹妃甸港口有限公司', value: '95,280,000', change: '+9%', isUp: true },
{ rank: 3, name: '河北华电曹妃甸储运有限公司', value: '82,220,000', change: '+3%', isUp: true }
],
全部: [
{ rank: 1, name: '华能曹妃甸港口有限公司', value: '2,120,350,000', change: '+15%', isUp: true },
{ rank: 2, name: '国投曹妃甸港口有限公司', value: '1,095,280,000', change: '+11%', isUp: true },
{ rank: 3, name: '河北华电曹妃甸储运有限公司', value: '882,220,000', change: '+7%', isUp: true }
]
const handleClickComparison = () => {
if (shorePowerCardShow.value) {
handleCloseRate()
} else {
handleOpenRate()
}
}
// 关闭岸电使用情况模块
const handleCloseRate = () => {
shorePowerCardShow.value = false
@ -1094,6 +1092,7 @@ const deviceDataMap = computed(() => {
align-items: center;
cursor: pointer;
transition: all 0.3s ease;
position: relative;
&:hover {
transform: translateY(-2px);
@ -1333,4 +1332,10 @@ const deviceDataMap = computed(() => {
.close-btn:hover {
color: #f5222d;
}
.comparison-type-selector-container {
position: absolute;
top: 8px;
right: 8px;
}
</style>

12
public/map/components/cesiumMap.vue
View File

@ -37,6 +37,10 @@ const props = defineProps({
);
}
},
allMapDataList: {
type: Array,
required: true,
},
shipDataList: {
type: Array,
required: true,
@ -331,7 +335,7 @@ onMounted(async () => {
format: 'image/png',
maximumLevel: 16
});
const dataInfo = history.value ? history.value : await MapApi.getAllData()
const dataInfo = props.allMapDataList
console.log(dataInfo)
const shipData = props.shipDataList
const shorePowerList = props.shorePowerList
@ -1079,6 +1083,12 @@ onBeforeUnmount(() => {
console.log('Cesium Viewer 已销毁');
}
});
watch(() => props.allMapDataList, (newVal, oldVal) => {
if (newVal.length > 0) {
console.log(newVal)
}
})
</script>
<style scoped>

10
public/map/components/charts/ComparisonBarChart.vue
View File

@ -61,7 +61,7 @@ const createBarOption = (currentLabel: string, previousLabel: string, currentVal
left: '15%',
right: '10%',
bottom: '20%',
top: '15%'
top: '20%'
},
xAxis: {
type: 'category',
@ -112,11 +112,13 @@ const createBarOption = (currentLabel: string, previousLabel: string, currentVal
}],
// 添加标题显示增长率
title: props.chartData[0]?.growthRate !== undefined ? {
text: `${props.chartData[0].growthRate >= 0 ? '↑' : '↓'} ${(props.chartData[0].growthRate * 100).toFixed(1)}%`,
text: `
数差: ${(currentValue - previousValue).toFixed(2)}${props.chartType === 'percentage' ? '%' : ''}
${props.chartData[0].growthRate >= 0 ? '↑' : '↓'} ${(props.chartData[0].growthRate * 100).toFixed(1)}%`,
left: 'center',
top: '5%',
top: '0%',
textStyle: {
fontSize: 32,
fontSize: 36,
fontWeight: 'bold',
color: props.chartData[0].growthRate >= 0 ? '#52c41a' : '#f5222d',
fontFamily: 'Arial, sans-serif'

53
public/map/index.vue
View File

@ -2,7 +2,8 @@
<div>
<PublicMapComponents ref="mapComponentRef" class="map-base" :shore-power-list="ShorePowerList"
:ship-data-list="shipDataList" v-if="dataLoad" :on-instance-click="handleElectricalBoxClick"
:distribution-data-list="distributionDataList" :get-device-status="getDeviceStatus" />
:distribution-data-list="distributionDataList" :get-device-status="getDeviceStatus"
:all-map-data-list="getAllMapDataList" />
<div v-else class="loading">
<div class="loading-container">
<el-space direction="vertical" size="large">
@ -381,6 +382,10 @@ const dayDataRes = ref<RealtimeDeviceData[]>([])
const companyComparisonData = ref<CompanyShorePowerData[]>([])
const getAllMapDataList = ref<ComparativeData[]>([])
// const allPortAreaCount = ref<number>(0)
@ -779,6 +784,21 @@ const yearEnergyUsing = computed(() => {
return kwhData - yearData
})
const hanleGetAllMapData = async () => {
const data = await MapApi.getAllData()
getAllMapDataList.value = data
}
onMounted(() => {
setInterval(async () => {
// hanleGetAllMapData()
const tempBuildShipData = await handleGetShipData()
handleGetStorePower()
getDistributionBoxDataList()
handleBuildCompanyShorePowerYear(tempBuildShipData)
}, 60 * 1000)
})
// 监听组件挂载
onMounted(async () => {
dockList.value = await MapApi.getDockIdAndNameList()
@ -810,14 +830,15 @@ onMounted(async () => {
handleBuildCompanyShorePowerYear(tempBuildShipData)
getDistributionBoxDataList()
await handleGetBuildData()
await hanleGetAllMapData()
dataLoad.value = true
getRealtimeIntervalId = setInterval(async () => {
const data = await handleGetRealtimeAllData()
if (data) {
// const tempBuildShipData = await handleGetShipData()
handleGetlRangeData(data)
handleBuildCompanyShorePower(data)
handleBuildCompanyShorePowerYear(tempBuildShipData)
}
}, 5000)
})
@ -2127,4 +2148,30 @@ const getElectricityUsageIds = computed(() => {
border-color: #4CAF50;
color: #fff;
}
.comparison-type-selector {
display: inline-flex;
margin: 0 10px;
width: fit-content;
background: rgba(255, 255, 255, 0.1);
padding: 2px;
// margin-bottom: 8px;
border-radius: 4px;
.comparison-type-btn {
border: none;
background: transparent;
color: #ccc;
padding: 4px 8px;
border-radius: 2px;
cursor: pointer;
font-size: 14px;
transition: all 0.3s;
&.active {
background: #1890ff;
color: white;
}
}
}
</style>

Write Preview
Loading…
Cancel
Save