Skip to content

Y
yqlh-dataEase
Commit 5650020c by cwx
Options

区块地图

parent dcae35ac
正在显示 包含 342 行增加 和 134 行删除
src/lang/en.js
This source diff could not be displayed because it is too large. You can view the blob instead.
src/lang/tw.js
This source diff could not be displayed because it is too large. You can view the blob instead.
src/main.js
import Vue from 'vue' import Vue from "vue";
import Cookies from 'js-cookie' import Cookies from "js-cookie";
import '@/styles/index.scss' // global css import "@/styles/index.scss"; // global css
import ElementUI from 'element-ui' import ElementUI from "element-ui";
import Vuetify from 'vuetify' import Vuetify from "vuetify";
import Fit2CloudUI from 'fit2cloud-ui' import Fit2CloudUI from "fit2cloud-ui";
import i18n from './lang' // internationalization import i18n from "./lang"; // internationalization
import App from './App' import App from "./App";
import store from './store' import store from "./store";
import router from './router' import router from "./router";
import message from './utils/message' import message from "./utils/message";
import '@/icons' // icon import "@/icons"; // icon
import '@/permission' // permission control import "@/permission"; // permission control
import api from '@/api/index.js' import api from "@/api/index.js";
import filter from '@/filter/filter' import filter from "@/filter/filter";
import directives from './directive' import directives from "./directive";
import VueClipboard from 'vue-clipboard2' import VueClipboard from "vue-clipboard2";
import widgets from '@/components/widget' import widgets from "@/components/widget";
import Treeselect from '@riophae/vue-treeselect' import Treeselect from "@riophae/vue-treeselect";
import '@riophae/vue-treeselect/dist/vue-treeselect.css' import "@riophae/vue-treeselect/dist/vue-treeselect.css";
import './utils/dialog' import "./utils/dialog";
import DeComplexInput from '@/components/business/conditionTable/DeComplexInput' import DeComplexInput from "@/components/business/conditionTable/DeComplexInput";
import DeComplexSelect from '@/components/business/conditionTable/DeComplexSelect' import DeComplexSelect from "@/components/business/conditionTable/DeComplexSelect";
import DeViewSelect from '@/components/deViewSelect' import DeViewSelect from "@/components/deViewSelect";
import RemarkEditor from '@/views/chart/components/componentStyle/dialog/RemarkEditor' import RemarkEditor from "@/views/chart/components/componentStyle/dialog/RemarkEditor";
import TitleRemark from '@/views/chart/view/TitleRemark' import TitleRemark from "@/views/chart/view/TitleRemark";
import '@/components/canvas/customComponent' // 注册自定义组件 import "@/components/canvas/customComponent"; // 注册自定义组件
import deBtn from '@/components/deCustomCm/DeBtn.vue' import deBtn from "@/components/deCustomCm/DeBtn.vue";
import '@/utils/DateUtil' import "@/utils/DateUtil";
import draggable from 'vuedraggable' import draggable from "vuedraggable";
import deWebsocket from '@/websocket' import deWebsocket from "@/websocket";
import { GaodeMap } from '@antv/l7-maps' import { GaodeMap } from "@antv/l7-maps";
import * as echarts from 'echarts' import * as echarts from "echarts";
import UmyUi from 'umy-ui' import UmyUi from "umy-ui";
// 全屏插件 // 全屏插件
import fullscreen from 'vue-fullscreen' import fullscreen from "vue-fullscreen";
import VueFriendlyIframe from 'vue-friendly-iframe' import VueFriendlyIframe from "vue-friendly-iframe";
import vueToPdf from 'vue-to-pdf' import vueToPdf from "vue-to-pdf";
import VueVideoPlayer from 'vue-video-player' import VueVideoPlayer from "vue-video-player";
import 'video.js/dist/video-js.css' import "video.js/dist/video-js.css";
import '@antv/s2/dist/style.min.css' import "@antv/s2/dist/style.min.css";
import VueAMap from "vue-amap";
// 控制标签宽高成比例的指令 // 控制标签宽高成比例的指令
import proportion from 'vue-proportion-directive' import proportion from "vue-proportion-directive";
import xss from 'xss' import xss from "xss";
// 定义全局XSS解决方法 // 定义全局XSS解决方法
Object.defineProperty(Vue.prototype, '$xss', { Object.defineProperty(Vue.prototype, "$xss", {
value: xss value: xss,
}) });
window._AMapSecurityConfig = {
Vue.config.productionTip = false securityJsCode: "1b336198f587a2a6e3a723f72db8358f",
Vue.use(VueClipboard) };
Vue.use(widgets) Vue.config.productionTip = false;
Vue.component('Draggable', draggable) Vue.use(VueClipboard);
Vue.prototype.$api = api Vue.use(widgets);
Vue.component("Draggable", draggable);
Vue.prototype.$echarts = echarts Vue.prototype.$api = api;
Vue.prototype.$gaodeMap = GaodeMap
Vue.prototype.$echarts = echarts;
Vue.use(UmyUi) Vue.prototype.$gaodeMap = GaodeMap;
Vue.use(fullscreen) Vue.use(UmyUi);
Vue.use(VueFriendlyIframe) Vue.use(fullscreen);
Vue.use(Vuetify)
Vue.use(VueFriendlyIframe);
Vue.use(Vuetify);
Vue.use(VueAMap);
VueAMap.initAMapApiLoader({
key: "9e49146176f7e9153ffe8a982638fae6",
plugin: [
"AMap.Scale",
"AMap.OverView",
"AMap.ToolBar",
"AMap.MapType",
"AMap.PlaceSearch",
"AMap.Geolocation",
"AMap.Geocoder",
"AMap.DistrictSearch",
"AMap.Polygon",
],
v: "2.0",
});
// import TEditor from '@/components/Tinymce/index.vue' // import TEditor from '@/components/Tinymce/index.vue'
// Vue.component('TEditor', TEditor) // Vue.component('TEditor', TEditor)
...@@ -76,80 +97,83 @@ Vue.use(Vuetify) ...@@ -76,80 +97,83 @@ Vue.use(Vuetify)
* Currently MockJs will be used in the production environment, * Currently MockJs will be used in the production environment,
* please remove it before going online ! ! ! * please remove it before going online ! ! !
*/ */
if (process.env.NODE_ENV === 'production') { if (process.env.NODE_ENV === "production") {
// const { mockXHR } = require('../mock') // const { mockXHR } = require('../mock')
// mockXHR() // mockXHR()
} }
// set ElementUI lang to EN // set ElementUI lang to EN
// Vue.use(ElementUI, { locale }) // Vue.use(ElementUI, { locale })
// 如果想要中文版 element-ui，按如下方式声明 // 如果想要中文版 element-ui，按如下方式声明
ElementUI.Dialog.props.closeOnClickModal.default = false ElementUI.Dialog.props.closeOnClickModal.default = false;
ElementUI.Dialog.props.closeOnPressEscape.default = false ElementUI.Dialog.props.closeOnPressEscape.default = false;
Vue.use(ElementUI, { Vue.use(ElementUI, {
size: Cookies.get('size') || 'medium', // set element-ui default size size: Cookies.get("size") || "medium", // set element-ui default size
i18n: (key, value) => i18n.t(key, value) i18n: (key, value) => i18n.t(key, value),
}) });
Vue.use(Fit2CloudUI, { Vue.use(Fit2CloudUI, {
i18n: (key, value) => i18n.t(key, value) i18n: (key, value) => i18n.t(key, value),
}) });
// Vue.use(VueAxios, axios) // Vue.use(VueAxios, axios)
Vue.use(filter) Vue.use(filter);
Vue.use(directives) Vue.use(directives);
Vue.use(message) Vue.use(message);
Vue.component('Treeselect', Treeselect) Vue.component("Treeselect", Treeselect);
Vue.component('DeComplexInput', DeComplexInput) Vue.component("DeComplexInput", DeComplexInput);
Vue.component('DeComplexSelect', DeComplexSelect) Vue.component("DeComplexSelect", DeComplexSelect);
Vue.component('DeViewSelect', DeViewSelect) Vue.component("DeViewSelect", DeViewSelect);
Vue.component('RemarkEditor', RemarkEditor) Vue.component("RemarkEditor", RemarkEditor);
Vue.component('TitleRemark', TitleRemark) Vue.component("TitleRemark", TitleRemark);
Vue.component('DeBtn', deBtn) Vue.component("DeBtn", deBtn);
Vue.config.productionTip = false Vue.config.productionTip = false;
Vue.use(vueToPdf) Vue.use(vueToPdf);
Vue.use(VueVideoPlayer) Vue.use(VueVideoPlayer);
Vue.use(proportion) Vue.use(proportion);
Vue.prototype.hasDataPermission = function(pTarget, pSource) { Vue.prototype.hasDataPermission = function (pTarget, pSource) {
if (this.$store.state.user.user.isAdmin || pSource === 'ignore') { if (this.$store.state.user.user.isAdmin || pSource === "ignore") {
return true return true;
} }
if (pSource && pTarget) { if (pSource && pTarget) {
return pSource.indexOf(pTarget) > -1 return pSource.indexOf(pTarget) > -1;
} }
return false return false;
} };
Vue.prototype.checkPermission = function(pers) { Vue.prototype.checkPermission = function (pers) {
const permissions = store.getters.permissions const permissions = store.getters.permissions;
const hasPermission = pers.every(needP => { const hasPermission = pers.every((needP) => {
const result = permissions.includes(needP) const result = permissions.includes(needP);
return result return result;
}) });
return hasPermission return hasPermission;
} };
Vue.use(deWebsocket) Vue.use(deWebsocket);
Vue.prototype.$currentHttpRequestList = new Map() Vue.prototype.$currentHttpRequestList = new Map();
Vue.prototype.$cancelRequest = function(cancelkey) { Vue.prototype.$cancelRequest = function (cancelkey) {
if (cancelkey) { if (cancelkey) {
if (cancelkey.indexOf('/**') > -1) { if (cancelkey.indexOf("/**") > -1) {
Vue.prototype.$currentHttpRequestList.forEach((item, key) => { Vue.prototype.$currentHttpRequestList.forEach((item, key) => {
key.indexOf(cancelkey.split('/**')[0]) > -1 && item('Operation canceled by the user.') key.indexOf(cancelkey.split("/**")[0]) > -1 &&
}) item("Operation canceled by the user.");
});
} else { } else {
Vue.prototype.$currentHttpRequestList.get(cancelkey) && Vue.prototype.$currentHttpRequestList.get(cancelkey)('Operation canceled by the user.') Vue.prototype.$currentHttpRequestList.get(cancelkey) &&
Vue.prototype.$currentHttpRequestList.get(cancelkey)(
"Operation canceled by the user."
);
} }
} }
} };
new Vue({ new Vue({
router, router,
store, store,
i18n, i18n,
render: h => h(App) render: (h) => h(App),
}).$mount('#app') }).$mount("#app");
src/views/chart/chart/util.js
...@@ -3111,25 +3111,19 @@ export const TYPE_CONFIGS = [ ...@@ -3111,25 +3111,19 @@ export const TYPE_CONFIGS = [
{ {
render: "aMap", render: "aMap",
category: "chart.chart_type_space", category: "chart.chart_type_space",
value: "map", value: "amap",
title: "map.layer", title: "amap.layer",
icon: "map_mini", icon: "map_mini",
properties: [ properties: [
"color-selector", "color-selector",
"label-selector", // "label-selector",
"tooltip-selector", // "tooltip-selector",
"title-selector", "title-selector",
"suspension-selector", // "suspension-selector",
"condition-style-selector", "condition-style-selector",
], ],
propertyInner: { propertyInner: {
"color-selector": [ "color-selector": ["theme"],
"value",
"custom",
"alpha",
"area-border-color",
"gradient-color",
],
"label-selector": [ "label-selector": [
"show", "show",
"fontSize", "fontSize",
......
src/views/chart/components/AMap.vue
<template> <template>
<div>{{ mapData }}</div> <el-amap
:vid="mapId"
default-cursor="default"
/>
</template> </template>
<script> <script>
import { lazyAMapApiLoaderInstance } from 'vue-amap'
import { uuid } from 'vue-uuid'
import { baseAMapData, hazardLevel } from './aMap/aMap'
export default { export default {
props: { props: {
mapData: { chart: {
type: Object, type: Object,
required: true required: true
} }
}, },
data() { data() {
return {} return {
map: {},
AMap: {},
layers: [],
allParkList: [],
center: [116.400586, 39.903475],
mapStyle: 'amap://styles/6ee1c8252c951da095d5e4eaf9c65a1f',
zoom: 14,
mapId: uuid.v1()
}
}, },
watch: { watch: {
mapData: { chart: {
handler(newVal, oldVal) { handler(newVal, oldVal) {
console.log(newVal, oldVal) // this.drawLayer()
this.initMap()
}, },
deep: true deep: true
} }
}, },
destroyed() { mounted() {
console.log(66666) this.initMap()
},
destroyed() {},
methods: {
initMap() {
const _this = this
lazyAMapApiLoaderInstance.load().then(() => {
const colorAttr = JSON.parse(this.chart.customAttr)
this.map = new AMap.Map(_this.mapId, {
center: this.center, // 地图中心点的经纬度位置配置
zoom: this.zoom, // 地图缩放比例配置
mapStyle: colorAttr?.color?.theme === 'dark' ? this.mapStyle : ''
})
this.drawLayer()
})
},
renderMarker(color) {
return `<div style='width: 30px;height: 30px;overflow: hidden;'>
<img style='width: 30px;filter: drop-shadow(${color} 100px 0); transform: translateX(-100px);' src='/static/svg/marker.svg'></img>
</div>`
},
drawLayer() {
const data = baseAMapData(this.chart)
this.allParkList = JSON.parse(JSON.stringify(data))
this.layers = []
data.map((item) => {
const color = hazardLevel[item.hazardLevel]?.color
let layer = null
if (item.areaType === '1') {
layer = new AMap.Marker({
position: new AMap.LngLat(item.longitude, item.latitude),
content: this.renderMarker(color),
offset: new AMap.Pixel(-15, -30),
zIndex: 53,
extData: {
...item
}
})
} else if (item.areaType === '2') {
layer = new AMap.Polygon({
path: JSON.parse(item.path),
fillColor: color,
strokeColor: 'transparent',
fillOpacity: 0.6,
zIndex: 51,
extData: {
...item
}
})
} else if (item.areaType === '3') {
layer = new AMap.Polyline({
path: JSON.parse(item.path),
borderWeight: 3,
strokeColor: color,
strokeOpacity: 1,
strokeStyle: 'solid',
zIndex: 52,
extData: {
...item
}
})
}
if (layer) {
this.layers.push(layer)
const extData = layer.getExtData()
layer.on('click', (obj) => {
this.parkClick(extData)
})
}
})
this.map.add(this.layers)
this.map.setFitView()
},
parkClick(item) {
const id = item.id
const highLightColor = '#AF24FF'
const allPolyline = this.layers
this.allParkList.forEach((it, index) => {
if (allPolyline[index]) {
const color = hazardLevel[it.hazardLevel]?.color
if (it.areaType === '1') {
allPolyline[index].setContent(this.renderMarker(color))
if (it.id === id) {
this.map.setCenter([item.longitude, item.latitude])
this.map.setZoom(15)
allPolyline[index].setContent(this.renderMarker(highLightColor))
}
} else {
allPolyline[index].setOptions({
[it.areaType === '3' ? 'strokeColor' : 'fillColor']: color
})
if (it.id === id) {
if (item.path && typeof item.path === 'string') {
const path = JSON.parse(item.path)
if (path[0]) {
this.map.setCenter([path[0][0], path[0][1]])
this.map.setZoom(15)
}
}
allPolyline[index].setOptions({
[it.areaType === '3' ? 'strokeColor' : 'fillColor']:
highLightColor
})
}
}
}
})
// const currentDom = document.querySelector(`#${id}`)
// currentDom?.scrollIntoView({ behavior: 'smooth' })
}
} }
} }
</script> </script>
<style></style> <style>
#container {
padding: 0px;
margin: 0px;
width: 100%;
height: 100%;
}
</style>
src/views/chart/components/aMap/aMap.js 0 → 100644
export function baseAMapData(chart) {
const data = chart.data.tableRow;
const fields = chart.data.fields;
let layerData = [];
layerData = data.map((a, index) => {
const obj = {
id: index + 1,
};
fields.map((b) => {
for (const key in a) {
if (b.dataeaseName === key) {
obj[b.originName] = a[key];
}
}
});
return obj;
});
return layerData;
}
export const hazardLevel = {
0: {
text: "非重大危险源",
color: "#52c41a",
},
1: {
text: "一级危险源",
color: "#FF4D4F",
},
2: {
text: "二级危险源",
color: "#FF7A45",
},
3: {
text: "三级危险源",
color: "#FAAD14",
},
4: {
text: "四级危险源",
color: "#1890FF",
},
};
static/svg/marker.svg 0 → 100644
<?xml version="1.0"?>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="none" version="1.1" width="16" height="16" viewBox="0 0 16 16">
<defs>
<clipPath id="master_svg0_29_08980">
<rect x="0" y="0" width="16" height="16" rx="0"/>
</clipPath>
</defs>
<g clip-path="url(#master_svg0_29_08980)">
<g>
<path d="M8.06745609375,1.02983903885C5.11671609375,1.04304715625,2.72670529375,3.45439515625,2.73980069165,6.40546515625C2.75210569375,9.17445515625,7.16127609375,14.16478515625,7.66409609375,14.72448515625C7.91233609375,15.00178515625,8.347036093749999,14.99988515625,8.592846093750001,14.72038515625C9.090696093750001,14.15618515625,13.45534609375,9.12681515625,13.44304609375,6.35771515625C13.42994609375,3.40675515625,11.01841609375,1.01674315625,8.06745609375,1.02983903885ZM8.101766093750001,8.73079515625C6.90670609375,8.73609515625,5.92975609375,7.76805515625,5.924446093749999,6.57288515625C5.919146093749999,5.37771515625,6.88740609375,4.40098515625,8.08235609375,4.39578515625C9.27786609375,4.390365156250001,10.25459609375,5.35840515625,10.25990609375,6.55346515625C10.265206093749999,7.74875515625,9.29716609375,8.72537515625,8.101766093750001,8.73079515625Z" fill="#1890FF" fill-opacity="1"/>
</g>
</g>
</svg>
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论