Compare commits
2 Commits
c2cf9ae0f4
...
bbb844b266
| Author | SHA1 | Date |
|---|---|---|
|
|
bbb844b266 | |
|
|
a72a7d82f7 |
|
|
@ -283,10 +283,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;
|
||||
|
|
|
|||
|
|
@ -283,10 +283,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;
|
||||
|
|
|
|||
|
|
@ -282,10 +282,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;
|
||||
|
|
|
|||
|
|
@ -70,14 +70,13 @@
|
|||
</template>
|
||||
|
||||
<script>
|
||||
import Vue from 'vue'
|
||||
import BarChart from './components/BarChart.vue'
|
||||
import PieChart from './components/PieChart.vue'
|
||||
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';
|
||||
import { initMapbox } from '@/utils/mapbox-utils'
|
||||
import { loadVectorLayer, loadJsonPointFeature } from '@/utils/vector-layer-utils'
|
||||
import { ColorGenerator } from '@/utils/color-generator'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
|
|
@ -134,20 +133,20 @@ export default {
|
|||
this.getChartBar({ year: '2025' })
|
||||
},
|
||||
mounted() {
|
||||
initMapbox("workUnitMap_ship", {
|
||||
tileKey: "gaode",
|
||||
initMapbox('workUnitMap_ship', {
|
||||
tileKey: 'gaode',
|
||||
zoom: 3,
|
||||
center: [110, 31],
|
||||
minZoom: 2,
|
||||
maxZoom: 29
|
||||
});
|
||||
initMapbox("voyageMap_ship", {
|
||||
tileKey: "GEBCO_basemap_NCEI",
|
||||
})
|
||||
initMapbox('voyageMap_ship', {
|
||||
tileKey: 'GEBCO_basemap_NCEI',
|
||||
zoom: 3,
|
||||
center: [113, 15],
|
||||
minZoom: 2,
|
||||
maxZoom: 29
|
||||
});
|
||||
})
|
||||
},
|
||||
beforeDestroy() {
|
||||
|
||||
|
|
@ -189,15 +188,15 @@ export default {
|
|||
// 参航单位统计
|
||||
getShipUnit() {
|
||||
shipUnit().then(res => {
|
||||
let geojson = {
|
||||
type: "FeatureCollection",
|
||||
const geojson = {
|
||||
type: 'FeatureCollection',
|
||||
features: []
|
||||
};
|
||||
}
|
||||
res.array.forEach(element => {
|
||||
geojson.features.push({
|
||||
type: "Feature",
|
||||
type: 'Feature',
|
||||
geometry: {
|
||||
type: "Point",
|
||||
type: 'Point',
|
||||
coordinates: [element.unit_lon, element.unit_lat]
|
||||
},
|
||||
properties: {
|
||||
|
|
@ -206,9 +205,9 @@ export default {
|
|||
create_time: element.create_time,
|
||||
tsy_id: element.tsy_id
|
||||
}
|
||||
});
|
||||
});
|
||||
loadJsonPointFeature("workUnit", "blue", geojson, "unit_name", "workUnitMap_ship");
|
||||
})
|
||||
})
|
||||
loadJsonPointFeature('workUnit', 'blue', geojson, 'unit_name', 'workUnitMap_ship')
|
||||
|
||||
const typeCount = res.array.reduce((acc, unit) => {
|
||||
const type = unit.unit_type
|
||||
|
|
@ -225,13 +224,13 @@ export default {
|
|||
// 航次统计
|
||||
gitShipVoyage(params = {}) {
|
||||
shipVoyage(params).then(res => {
|
||||
let i = 0;
|
||||
const colors = ColorGenerator.generateDivergingColors(res.array.length);
|
||||
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++;
|
||||
loadVectorLayer(item.voyage_name, ['line', 'symbol'], [colors[i], '#FFFFFF'], 'visible', 'voyageMap_ship', 'dsds')
|
||||
i++
|
||||
})
|
||||
})
|
||||
},
|
||||
|
|
@ -306,10 +305,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;
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -395,10 +395,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