banner背景图片调整
This commit is contained in:
80937518651731347
parent
f61af1183d
commit
a72a7d82f7
|
|
@ -467,10 +467,11 @@ export default {
|
|||
background-color: #ebf1f7;
|
||||
|
||||
.banner {
|
||||
background-color: #012458;
|
||||
background-image: url(../../../static/images/bannerny1.jpg);
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
background-size: 100% 100%;
|
||||
background-size: contain;
|
||||
width: 100%;
|
||||
height: 480px;
|
||||
display: flex;
|
||||
|
|
|
|||
|
|
@ -489,10 +489,11 @@ export default {
|
|||
background-color: #ebf1f7;
|
||||
|
||||
.banner {
|
||||
background-color: #012458;
|
||||
background-image: url(../../../static/images/bannerny1.jpg);
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
background-size: 100% 100%;
|
||||
background-size: contain;
|
||||
width: 100%;
|
||||
height: 480px;
|
||||
display: flex;
|
||||
|
|
|
|||
|
|
@ -467,10 +467,11 @@ export default {
|
|||
background-color: #ebf1f7;
|
||||
|
||||
.banner {
|
||||
background-color: #012458;
|
||||
background-image: url(../../../static/images/bannerny1.jpg);
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
background-size: 100% 100%;
|
||||
background-size: contain;
|
||||
width: 100%;
|
||||
height: 480px;
|
||||
display: flex;
|
||||
|
|
|
|||
|
|
@ -44,7 +44,7 @@
|
|||
<div class="map-module">
|
||||
<div class="bezel">
|
||||
<div class="map-title">参航单位</div>
|
||||
<div id="workUnitMap_ship" ref="workUnitMap_ship" style="height: 100%;width:100%;" />
|
||||
<div id="baiduCesiumContainer" ref="baiduCesiumContainer" style="height: 100%;width:100%;" />
|
||||
</div>
|
||||
<div class="bezel">
|
||||
<div class="map-title">航次地图</div>
|
||||
|
|
@ -61,14 +61,18 @@
|
|||
@change="selectVoyageYear"
|
||||
/>
|
||||
</div>
|
||||
<div id="voyageMap_ship" ref="voyageMap_ship" style="height: 100%;width:100%;" />
|
||||
<div id="cesiumContainer" ref="cesiumContainer" style="height: 100%;width:100%;" />
|
||||
</div>
|
||||
</div>
|
||||
<!-- echarts板块-->
|
||||
<div class="echarts-module">
|
||||
<div class="bezel">
|
||||
<BarChart :title="barData1.title" :chart-data="barData1.salesData" :categories="barData1.productCategories"
|
||||
chart-type="single" />
|
||||
<BarChart
|
||||
:title="barData1.title"
|
||||
:chart-data="barData1.salesData"
|
||||
:categories="barData1.productCategories"
|
||||
chart-type="single"
|
||||
/>
|
||||
</div>
|
||||
<div class="bezel">
|
||||
<BarChart
|
||||
|
|
@ -88,29 +92,36 @@
|
|||
/>
|
||||
</div>
|
||||
<div class="bezel">
|
||||
<BarChart :title="barData3.title" :chart-data="barData3.salesData" :categories="barData3.productCategories" />
|
||||
<BarChart
|
||||
:title="barData3.title"
|
||||
:chart-data="barData3.salesData"
|
||||
:categories="barData3.productCategories"
|
||||
/>
|
||||
</div>
|
||||
<div class="bezel">
|
||||
<BarChart :title="barData4.title" :chart-data="barData4.salesData" :categories="barData4.productCategories" />
|
||||
<BarChart
|
||||
:title="barData4.title"
|
||||
:chart-data="barData4.salesData"
|
||||
:categories="barData4.productCategories"
|
||||
/>
|
||||
</div>
|
||||
<div class="bezel">
|
||||
<PieChart :chart-data="pieData" title="参航单位类型" chart-type="ring" />
|
||||
<PieChart
|
||||
:chart-data="pieData"
|
||||
title="参航单位类型"
|
||||
chart-type="ring"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Vue from 'vue'
|
||||
import BarChart from './components/BarChart.vue'
|
||||
import PieChart from './components/PieChart.vue'
|
||||
import { setImageryViewModels } from '../../utils/common'
|
||||
import { reportList, shipTotal, shipUnit, shipUnitYear, shipVoyage } from '../../api/statistics'
|
||||
import { getYearRange, filterDictItems } from '../../utils/index'
|
||||
import {initMapbox, handleWheel, initSprites, triggerLayerClick } from "@/utils/mapbox-utils";
|
||||
import { loadVectorLayer, loadJsonLineFeature, loadJsonPointFeature, highlightFeaturesByProperty } from '@/utils/vector-layer-utils'
|
||||
import { ColorGenerator } from '@/utils/color-generator';
|
||||
|
||||
const Cesium = window.Cesium
|
||||
|
||||
export default {
|
||||
|
|
@ -169,29 +180,18 @@ export default {
|
|||
created() {
|
||||
this.getTypeList()
|
||||
this.getShipList()
|
||||
this.getShipUnit()
|
||||
this.gitShipVoyage()
|
||||
this.gitShipUnitYear()
|
||||
this.getChartBar({ year: '2025' })
|
||||
},
|
||||
mounted() {
|
||||
initMapbox("workUnitMap_ship", {
|
||||
tileKey: "gaode",
|
||||
zoom: 3,
|
||||
center: [110, 31],
|
||||
minZoom: 2,
|
||||
maxZoom: 29
|
||||
});
|
||||
initMapbox("voyageMap_ship", {
|
||||
tileKey: "GEBCO_basemap_NCEI",
|
||||
zoom: 4,
|
||||
center: [113, 15],
|
||||
minZoom: 2,
|
||||
maxZoom: 29
|
||||
});
|
||||
// this.imageryViewModels = setImageryViewModels(this.CesiumHostAddr)
|
||||
// this.initBaiduCesium() // 初始化参航单位地图
|
||||
// this.initCesium() // 初始化航次地图
|
||||
this.imageryViewModels = setImageryViewModels(this.CesiumHostAddr)
|
||||
this.initCesium() // 初始化航次地图
|
||||
this.initBaiduCesium() // 初始化参航单位地图
|
||||
// 依赖 Cesium Viewer 的接口须在地图就绪后调用（created 阶段 viewer 尚未创建）
|
||||
this.$nextTick(() => {
|
||||
this.getShipUnit()
|
||||
this.gitShipVoyage()
|
||||
})
|
||||
},
|
||||
beforeDestroy() {
|
||||
// 清理Cesium资源
|
||||
|
|
@ -239,31 +239,11 @@ export default {
|
|||
// 参航单位统计
|
||||
getShipUnit() {
|
||||
shipUnit().then(res => {
|
||||
let geojson = {
|
||||
type: "FeatureCollection",
|
||||
features: []
|
||||
};
|
||||
res.array.forEach(element => {
|
||||
geojson.features.push({
|
||||
type: "Feature",
|
||||
geometry: {
|
||||
type: "Point",
|
||||
coordinates: [element.unit_lon, element.unit_lat]
|
||||
},
|
||||
properties: {
|
||||
unit_name: element.unit_name,
|
||||
unit_type: element.unit_type,
|
||||
create_time: element.create_time,
|
||||
tsy_id: element.tsy_id
|
||||
}
|
||||
});
|
||||
});
|
||||
loadJsonPointFeature("workUnit", "blue", geojson, "unit_name", "workUnitMap_ship");
|
||||
// 清除之前的标记
|
||||
this.clearBaiduCesiumMarkers()
|
||||
|
||||
// // 清除之前的标记
|
||||
// this.clearBaiduCesiumMarkers()
|
||||
// // 创建参航单位标记
|
||||
// this.createBaiduCesiumMarkers(res.array)
|
||||
// 创建参航单位标记
|
||||
this.createBaiduCesiumMarkers(res.array)
|
||||
|
||||
const typeCount = res.array.reduce((acc, unit) => {
|
||||
const type = unit.unit_type
|
||||
|
|
@ -328,22 +308,15 @@ export default {
|
|||
// 航次统计
|
||||
gitShipVoyage(params = {}) {
|
||||
shipVoyage(params).then(res => {
|
||||
let i = 0;
|
||||
const colors = ColorGenerator.generateDivergingColors(res.array.length);
|
||||
// 添加轨迹图层
|
||||
res.array.forEach(item => {
|
||||
// 加载轨迹图层
|
||||
loadVectorLayer(item.voyage_name, ["line", "symbol"], [colors[i], "#FFFFFF"], "visible", "voyageMap_ship", "dsds");
|
||||
i++;
|
||||
|
||||
// this.addSingleLineImg(item)
|
||||
this.addSingleLineImg(item)
|
||||
})
|
||||
})
|
||||
},
|
||||
|
||||
// 初始化Cesium - 参航单位地图
|
||||
initBaiduCesium() {
|
||||
this.baiduCesiumViewer = new Cesium.Viewer(this.$refs.workUnitMap_ship, {
|
||||
this.baiduCesiumViewer = new Cesium.Viewer(this.$refs.baiduCesiumContainer, {
|
||||
sceneMode: Cesium.SceneMode.SCENE2D,
|
||||
shadows: false,
|
||||
timeline: false,
|
||||
|
|
@ -379,7 +352,7 @@ export default {
|
|||
// 初始化cesium
|
||||
initCesium() {
|
||||
Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiJkY2Y5NWY2Ni1mODQ1LTQ3YTUtYjc4Zi1jYzhjMGI2YzcxMWYiLCJpZCI6MTI5ODMwLCJpYXQiOjE2Nzk0Njk5NTd9.DTH54ioOH-HLqeNIetBe9hFyrPOX2Vp1AQmZzw8TIZ4'
|
||||
this.viewer = new Cesium.Viewer(this.$refs.voyageMap_ship, {
|
||||
this.viewer = new Cesium.Viewer('cesiumContainer', {
|
||||
sceneMode: Cesium.SceneMode.SCENE2D,
|
||||
shadows: false,
|
||||
timeline: false,
|
||||
|
|
@ -509,10 +482,11 @@ export default {
|
|||
background-color: #ebf1f7;
|
||||
|
||||
.banner {
|
||||
background-color: #012458;
|
||||
background-image: url(../../../static/images/bannerny1.jpg);
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
background-size: 100% 100%;
|
||||
background-size: contain;
|
||||
width: 100%;
|
||||
height: 480px;
|
||||
display: flex;
|
||||
|
|
@ -596,29 +570,24 @@ export default {
|
|||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
.value {
|
||||
font-size: 56px;
|
||||
font-weight: bold;
|
||||
|
||||
.unit {
|
||||
font-size: 26px;
|
||||
}
|
||||
}
|
||||
|
||||
.label {
|
||||
font-size: 18px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.map-module {
|
||||
padding: 50px 50px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
gap: 50px;
|
||||
|
||||
.bezel {
|
||||
flex: 1;
|
||||
width: 100%;
|
||||
|
|
@ -711,7 +680,6 @@ export default {
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
.echarts-module {
|
||||
padding: 0 50px 50px;
|
||||
display: grid;
|
||||
|
|
|
|||
|
|
@ -266,10 +266,11 @@ export default {
|
|||
background-color: #ebf1f7;
|
||||
|
||||
.banner {
|
||||
background-color: #012458;
|
||||
background-image: url(../../../static/images/bannerny1.jpg);
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
background-size: 100% 100%;
|
||||
background-size: contain;
|
||||
width: 100%;
|
||||
height: 480px;
|
||||
display: flex;
|
||||
|
|
|
|||
|
|
@ -440,10 +440,11 @@ export default {
|
|||
background-color: #ebf1f7;
|
||||
|
||||
.banner {
|
||||
background-color: #012458;
|
||||
background-image: url(../../../static/images/bannerny1.jpg);
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
background-size: 100% 100%;
|
||||
background-size: contain;
|
||||
width: 100%;
|
||||
height: 480px;
|
||||
display: flex;
|
||||
|
|
|
|||
Loading…
Reference in New Issue