Browse Source

代码提交

master
juwei001 1 year ago
parent
commit
a0dd45956f
  1. 20
      src/api/szyf.js
  2. 7
      src/views/next/dialog-module/szyf-left/eventProcessing.vue
  3. 129
      src/views/next/screen-content-map/cpt/szyf-map.vue

20
src/api/szyf.js

@ -1,6 +1,6 @@
import request from 'utils/request'
// 科技人才列表
// 事件处理实况
export function getEventRate (params) {
return request({
url: '/api/gov/project/icEvent/yifengScreen/getEventRate',
@ -8,3 +8,21 @@ export function getEventRate (params) {
params
})
}
// 事件处理实况
export function getEventAnalysis (params) {
return request({
url: '/api/gov/project/icEvent/yifengScreen/getEventAnalysis',
method: 'GET',
params
})
}
// 事件处理实况
export function statsByCategory (params) {
return request({
url: 'api/epmetuser/lingShan/helpCrowd/screen/yifengScreen/statsByCategory',
method: 'GET',
params
})
}

7
src/views/next/dialog-module/szyf-left/eventProcessing.vue

@ -49,6 +49,7 @@
<script>
import { mapGetters, mapActions } from 'vuex'
import { getEventRate } from '@/api/szyf'
export default {
name: '',
data () {
@ -131,7 +132,11 @@ export default {
},
components: {},
watch: {},
created () {},
created () {
getEventRate().then(res => {
console.log('getEventRate::', res)
})
},
methods: {
...mapActions({
showGlobalDialog: 'showGlobalDialog'

129
src/views/next/screen-content-map/cpt/szyf-map.vue

@ -1,101 +1,98 @@
<template>
<div style="width: 100% ;height: 100%;">
<div style="width: 100%; height: 100%">
<div id="myMap">
<!-- <screen-map-header :data="headerList"></screen-map-header> -->
</div>
<div class="mapImage">
<div>事件处置流程图</div>
<img src="@/assets/images/map/flow.png" alt="">
<img src="@/assets/images/map/flow.png" alt="" />
</div>
</div>
</template>
<script>
import { Scene, PolygonLayer } from '@antv/l7'
import { GaodeMap } from '@antv/l7-maps'
import yifengJson from './yifeng.json'
import jdbandaoJson from './jdbandao.json'
import chinaMap from './chinaMap.vue'
import { mapActions } from 'vuex'
let myMap
let scene
let polygonLayer
import { Scene, PolygonLayer } from "@antv/l7";
import { GaodeMap } from "@antv/l7-maps";
import yifengJson from "./yifeng.json";
import jdbandaoJson from "./jdbandao.json";
import chinaMap from "./chinaMap.vue";
import { mapActions } from "vuex";
let myMap;
let scene;
let polygonLayer;
export default {
data () {
data() {
return {
darkStyle: {
style: 'amap://styles/blue',
style: "amap://styles/blue",
polygonColor: [
// "rgba(255, 100, 60, 0.5)",
// "rgba(43, 231, 253, 0.35)",
'rgba(0, 127, 241, .5)'
"rgba(0, 127, 241, .5)",
// "rgba(255, 255, 50, 0.35)",
],
lineColor: [
// "rgba(255, 180, 150, 0.9)",
// "rgba(43, 231, 253, 0.7)",
'rgba(0, 127, 241, .6)'
"rgba(0, 127, 241, .6)",
// "rgba(255, 255, 50, 0.7)",
],
circleColor: [
// "rgba(255, 180, 150, 0.99)",
// "rgba(43, 231, 253, 0.99)",
'rgba(0, 127, 241, 0.99)'
"rgba(0, 127, 241, 0.99)",
// "rgba(255, 255, 50, 0.99)",
],
textColor: [
// "rgba(255, 100, 60, 0.99)",
// "rgba(43, 231, 253, 0.99)",
'rgba(126, 187, 255, 1)'
"rgba(126, 187, 255, 1)",
// "rgba(255, 255, 50, 0.99)",
],
textStrokeColor: '#fff'
textStrokeColor: "#fff",
},
lightStyle: {
style: 'amap://styles/blue',
style: "amap://styles/blue",
polygonColor: [
// "rgba(255, 100, 60, 0.3)",
'rgba(43, 231, 253, 0.3)'
"rgba(43, 231, 253, 0.3)",
// "rgba(255, 255, 50, 0.3)",
],
lineColor: [
// "rgba(220, 150, 120, 0.9)",
'rgba(155, 212, 242, 1)'
"rgba(155, 212, 242, 1)",
// "rgba(200, 200, 50, 0.9)",
],
circleColor: [
// "rgba(255, 180, 150, 0.99)",
'rgba(13, 181, 203, 0.8)'
"rgba(13, 181, 203, 0.8)",
// "rgba(255, 255, 50, 0.99)",
],
textColor: [
// "rgba(200, 50, 10, 0.99)",
'rgba(0, 130, 153, 0.99)'
"rgba(0, 130, 153, 0.99)",
// "rgba(120, 120, 0, 0.99)",
],
textStrokeColor: '#666'
}
}
textStrokeColor: "#666",
},
created () {
};
},
mounted () {
created() {},
mounted() {
this.$nextTick(() => {
this.init()
})
this.init();
});
},
methods: {
init () {
if (!yifengJson) return false
init() {
if (!yifengJson) return false;
myMap = new GaodeMap({
pitch: 40.24716321414439,
// mapStyle: 'amap://styles/3bd5ec68d60de6542634c3e701f64523',
style: this.darkStyle.style,
showLabel: false,
center: [120.220563, 36.496127],
token: 'fc14b42e0ca18387866d68ebd4f150c1',
token: "fc14b42e0ca18387866d68ebd4f150c1",
zoom: 10,
isHotspot: false,
showIndoorMap: false,
@ -103,29 +100,28 @@ export default {
resizeEnable: true,
doubleClickZoom: false,
showRoad: false,
viewMode: '3D'
})
viewMode: "3D",
});
scene = new Scene({
id: 'myMap',
id: "myMap",
logoVisible: false,
map: myMap
})
map: myMap,
});
const data = yifengJson
const data1 = jdbandaoJson
const data = yifengJson;
const data1 = jdbandaoJson;
//
if (polygonLayer) {
scene.removeLayer(polygonLayer)
scene.removeLayer(polygonLayer);
}
polygonLayer = new PolygonLayer({
autoFit: true
autoFit: true,
})
.size(1000)
.source(data1)
.color('name', ['rgba(0, 127, 241, .5)'])
.shape('fill')
.color("name", ["rgba(0, 127, 241, .5)"])
.shape("fill")
.style({
// opacityLinear: {
// enable: true, // true - false
@ -133,18 +129,18 @@ export default {
// },
opacity: 0.6,
// heightfixed: true,
sourceColor: '#4ee8fc',
targetColor: '#00284e'
})
scene.addLayer(polygonLayer)
sourceColor: "#4ee8fc",
targetColor: "#00284e",
});
scene.addLayer(polygonLayer);
//
polygonLayer = new PolygonLayer({
autoFit: true
autoFit: true,
})
.size(1000)
.source(data)
.color('name', ['rgba(0, 127, 241, .0)'])
.shape('fill')
.color("name", ["rgba(0, 127, 241, .0)"])
.shape("fill")
.style({
// opacityLinear: {
// enable: true, // true - false
@ -152,18 +148,17 @@ export default {
// },
opacity: 0,
// heightfixed: true,
sourceColor: '#4ee8fc',
targetColor: '#00284e'
})
scene.addLayer(polygonLayer)
scene.on('loaded', () => {
})
}
sourceColor: "#4ee8fc",
targetColor: "#00284e",
});
scene.addLayer(polygonLayer);
scene.on("loaded", () => {});
},
},
components: { chinaMap },
computed: {},
watch: {}
}
watch: {},
};
</script>
<style lang="scss" scoped>
@ -180,27 +175,28 @@ export default {
position: absolute;
top: 50%;
left: 50%;
user-select: none;
transform: translate(-439px, -323px);
div {
width: 371px;
height: 49px;
text-align: center;
background: url('~@/assets/images/map/headerBg.png') no-repeat;
background: url("~@/assets/images/map/headerBg.png") no-repeat;
background-size: 100% 100%;
color: #fff;
margin-bottom: 100px;
position: relative;
&::after {
content: '';
content: "";
display: inline-block;
width: 58px;
height: 54px;
position: absolute;
top: 30px;
left: 43%;
background: url('~@/assets/images/map/down.png') no-repeat;
background: url("~@/assets/images/map/down.png") no-repeat;
background-size: 100% 100%;
animation: moveUpDown 2s infinite;
}
@ -217,5 +213,4 @@ export default {
transform: translateY(0);
}
}
</style>

Loading…
Cancel
Save