diff --git a/components/AiDvMap.vue b/components/AiDvMap.vue
index 9ea18775..476c0471 100644
--- a/components/AiDvMap.vue
+++ b/components/AiDvMap.vue
@@ -1,6 +1,13 @@
@@ -11,12 +18,15 @@ import {mapState} from "vuex";
export default {
name: 'AiDvMap',
props: {
- geoJson: String
+ geoJson: String,
+ data: Array
},
data() {
return {
- timer: null,
- chart: null
+ dialog: false,
+ chart: null,
+ detail: {},
+ dialogPos: {}
}
},
directives: {
@@ -50,6 +60,14 @@ export default {
mounted() {
this.$load(this.$refs.dvMap).then(() => this.initChart())
},
+ watch: {
+ dialog(v) {
+ if (!v) {
+ this.detail = []
+ this.dialogPos = {}
+ }
+ }
+ },
methods: {
onDomResize() {
this.$nextTick(() => {
@@ -63,95 +81,130 @@ export default {
if (res?.data) {
echarts.registerMap('customMap', res.data)
const option = {
- // geo: [
- // {
- // map: "customMap",
- // aspectScale: 1,
- // zoom: 0.65,
- // layoutCenter: ["50%", "50%"],
- // layoutSize: "180%",
+ geo: [
+ {
+ map: "customMap",
+ aspectScale: 1,
+ zoom: 0.65,
+ layoutCenter: ["50%", "50%"],
+ layoutSize: "180%",
+ show: true,
+ roam: false,
+ selectedMode: 'single',
+ emphasis: {
+ show: true,
+ label: {
+ textStyle: {
+ color: "#FFFFFF"
+ },
+ },
+ itemStyle: {
+ areaColor: '#02C6DC'
+ }
+ },
+ select: {
+ label: {
+ color: "#fff"
+ },
+ itemStyle: {
+ areaColor: '#02bcff29'
+ }
+ },
+ label: {
+ show: true,
+ color: '#fff',
+ fontSize: 22
+ },
+ itemStyle: {
+ borderColor: "rgba(2, 198, 220, 1)",
+ borderWidth: 2,
+ areaColor: "#02bcff29",
+ shadowBlur: 120,
+ }
+ },
+ // 重影
+ ...Array(3).fill(1).map((e, i) => {
+ return {
+ type: "map",
+ map: "customMap",
+ zlevel: -1,
+ aspectScale: 1,
+ zoom: 0.65,
+ layoutCenter: ["50%", `${51 + i}%`],
+ layoutSize: "180%",
+ roam: false,
+ silent: true,
+ itemStyle: {
+ normal: {
+ borderWidth: 1,
+ // borderColor:"rgba(17, 149, 216,0.6)",
+ borderColor: `rgba(2, 198, 220, ${0.6 - i * 0.2})`,
+ shadowColor: `rgba(2, 198, 220, ${0.6 - i * 0.2})`,
+ shadowOffsetY: 5,
+ shadowBlur: 15,
+ areaColor: "transparent",
+ },
+ },
+ }
+ })
+ ],
+ // geo3D: {
+ // map: "customMap",
+ // shading: 'color',
+ // regionHeight: 8,
+ // show: true,
+ // emphasis: {
// show: true,
- // roam: false,
- // emphasis: {
- // show: true,
- // label: {
- // textStyle: {
- // color: "#FFFFFF"
- // },
- // },
- // itemStyle: {
- // areaColor: '#02C6DC'
- // }
- // },
- // label: {
- // show: true,
- // color: '#fff',
- // fontSize: 22
- // },
- // itemStyle: {
- // borderColor: "rgba(2, 198, 220, 1)",
- // borderWidth: 2,
- // areaColor: "#02bcff29",
- // }
// },
- // // 重影
- // // {
- // // type: "map",
- // // map: "customMap",
- // // zlevel: -1,
- // // aspectScale: 1,
- // // zoom: 0.65,
- // // layoutCenter: ["50%", "51%"],
- // // layoutSize: "180%",
- // // roam: false,
- // // silent: true,
- // // itemStyle: {
- // // normal: {
- // // borderWidth: 1,
- // // // borderColor:"rgba(17, 149, 216,0.6)",
- // // borderColor: "rgba(2, 198, 220, 0.6)",
- // // shadowColor: "rgba(2, 198, 220, 0.6)",
- // // shadowOffsetY: 5,
- // // shadowBlur: 15,
- // // areaColor: "rgba(5,21,35,0.1)",
- // // },
- // // },
- // // },
- // ],
- geo3D: {
- map: "customMap",
- shading: 'color',
- regionHeight: 8,
- show: true,
- emphasis: {
- show: true,
- },
- label: {
- show: true,
- color: '#fff',
- fontSize: 22
- },
- itemStyle: {
- color: '#02bcff29',
- borderColor: "rgba(2, 198, 220, 1)",
- borderWidth: 2
- },
- viewControl: {
- rotateSensitivity: 0,
- zoomSensitivity: 0,
- panMouseButton: 0,
- distance: 250,
- alpha:50,
- center:[0,-60,0]
- }
- },
+ // label: {
+ // show: true,
+ // color: '#fff',
+ // fontSize: 22
+ // },
+ // itemStyle: {
+ // color: '#02bcff29',
+ // borderColor: "rgba(2, 198, 220, 1)",
+ // borderWidth: 2
+ // },
+ // viewControl: {
+ // rotateSensitivity: 0,
+ // zoomSensitivity: 0,
+ // panMouseButton: 0,
+ // distance: 250,
+ // alpha:50,
+ // center:[0,-60,0]
+ // }
+ // },
}
this.chart.setOption(option)
+ this.chart.on('click', evt => {
+ const {name, event: {offsetX, offsetY}} = evt
+ this.dialog = true
+ this.detail = []
+ const item = this.data.find(e => e.name.includes(name))
+ for (const k in item) {
+ if ('name' != k) {
+ this.detail.push({
+ label: k, value: item[k], color: {
+ 高风险纠纷: "#FF6868",
+ 中风险纠纷: "#FFAB68",
+ 低风险纠纷: "#7FE89E",
+ }[k]
+ })
+ }
+ }
+ this.dialogPos = {left: offsetX + 'px', top: offsetY + 'px'}
+ })
}
})
},
getData(url = `https://geo.datav.aliyun.com/areas_v3/bound/geojson?code=${this.user.info.areaId?.substring(0, 6)}`) {
return http.post(`/app/appdvcpconfig/apiForward?url=${encodeURIComponent(url)}`)
+ },
+ dotStyle(color) {
+ return {
+ background: color,
+ }
}
}
}
@@ -166,10 +219,49 @@ export default {
height: 100%;
padding: 16px;
box-sizing: border-box;
+ position: relative;
.chart-map {
width: 100%;
height: 100%;
}
+
+ .dialog {
+ position: absolute;
+ transform: translate(-50%, -120%);
+ z-index: 20240327926;
+ padding: 16px 16px 24px;
+ background-color: rgba(9, 48, 69, 0.8);
+ backdrop-filter: blur(5px);
+ color: #fff;
+ font-size: 14px;
+ min-width: 200px;
+ border: 1px solid #02C6DC;
+
+ &:after {
+ position: absolute;
+ bottom: 0;
+ left: 50%;
+ transform: translate(-50%, 50%) rotate(-135deg);
+ content: " ";
+ width: 10px;
+ height: 10px;
+ background: inherit;
+ border: inherit;
+ clip-path: polygon(0 0, 100% 0, 0 100%);
+ }
+
+ .dot {
+ width: 14px;
+ height: 14px;
+ border-radius: 50%;
+ margin-right: 8px;
+ border: 3px solid rgba(9, 48, 69, .4);
+ }
+
+ .label {
+ color: #9BB7D4;
+ }
+ }
}
diff --git a/components/AiDvRender.vue b/components/AiDvRender.vue
index f87842a8..ea5b3140 100644
--- a/components/AiDvRender.vue
+++ b/components/AiDvRender.vue
@@ -43,7 +43,7 @@
:subType="data.subType"
:data="values">
-
+
-
+