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 Cookies from 'js-cookie'
import '@/styles/index.scss' // global css
import ElementUI from 'element-ui'
import Vuetify from 'vuetify'
import Fit2CloudUI from 'fit2cloud-ui'
import i18n from './lang' // internationalization
import App from './App'
import store from './store'
import router from './router'
import message from './utils/message'
import '@/icons' // icon
import '@/permission' // permission control
import api from '@/api/index.js'
import filter from '@/filter/filter'
import directives from './directive'
import VueClipboard from 'vue-clipboard2'
import widgets from '@/components/widget'
import Treeselect from '@riophae/vue-treeselect'
import '@riophae/vue-treeselect/dist/vue-treeselect.css'
import './utils/dialog'
import DeComplexInput from '@/components/business/conditionTable/DeComplexInput'
import DeComplexSelect from '@/components/business/conditionTable/DeComplexSelect'
import DeViewSelect from '@/components/deViewSelect'
import RemarkEditor from '@/views/chart/components/componentStyle/dialog/RemarkEditor'
import TitleRemark from '@/views/chart/view/TitleRemark'
import '@/components/canvas/customComponent' // 注册自定义组件
import deBtn from '@/components/deCustomCm/DeBtn.vue'
import '@/utils/DateUtil'
import draggable from 'vuedraggable'
import deWebsocket from '@/websocket'
import { GaodeMap } from '@antv/l7-maps'
import * as echarts from 'echarts'
import UmyUi from 'umy-ui'
import Vue from "vue";
import Cookies from "js-cookie";
import "@/styles/index.scss"; // global css
import ElementUI from "element-ui";
import Vuetify from "vuetify";
import Fit2CloudUI from "fit2cloud-ui";
import i18n from "./lang"; // internationalization
import App from "./App";
import store from "./store";
import router from "./router";
import message from "./utils/message";
import "@/icons"; // icon
import "@/permission"; // permission control
import api from "@/api/index.js";
import filter from "@/filter/filter";
import directives from "./directive";
import VueClipboard from "vue-clipboard2";
import widgets from "@/components/widget";
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
import "./utils/dialog";
import DeComplexInput from "@/components/business/conditionTable/DeComplexInput";
import DeComplexSelect from "@/components/business/conditionTable/DeComplexSelect";
import DeViewSelect from "@/components/deViewSelect";
import RemarkEditor from "@/views/chart/components/componentStyle/dialog/RemarkEditor";
import TitleRemark from "@/views/chart/view/TitleRemark";
import "@/components/canvas/customComponent"; // 注册自定义组件
import deBtn from "@/components/deCustomCm/DeBtn.vue";
import "@/utils/DateUtil";
import draggable from "vuedraggable";
import deWebsocket from "@/websocket";
import { GaodeMap } from "@antv/l7-maps";
import * as echarts from "echarts";
import UmyUi from "umy-ui";
// 全屏插件
import fullscreen from 'vue-fullscreen'
import VueFriendlyIframe from 'vue-friendly-iframe'
import vueToPdf from 'vue-to-pdf'
import VueVideoPlayer from 'vue-video-player'
import 'video.js/dist/video-js.css'
import '@antv/s2/dist/style.min.css'
import fullscreen from "vue-fullscreen";
import VueFriendlyIframe from "vue-friendly-iframe";
import vueToPdf from "vue-to-pdf";
import VueVideoPlayer from "vue-video-player";
import "video.js/dist/video-js.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解决方法
Object.defineProperty(Vue.prototype, '$xss', {
value: xss
})
Vue.config.productionTip = false
Vue.use(VueClipboard)
Vue.use(widgets)
Vue.component('Draggable', draggable)
Vue.prototype.$api = api
Vue.prototype.$echarts = echarts
Vue.prototype.$gaodeMap = GaodeMap
Vue.use(UmyUi)
Vue.use(fullscreen)
Vue.use(VueFriendlyIframe)
Vue.use(Vuetify)
Object.defineProperty(Vue.prototype, "$xss", {
value: xss,
});
window._AMapSecurityConfig = {
securityJsCode: "1b336198f587a2a6e3a723f72db8358f",
};
Vue.config.productionTip = false;
Vue.use(VueClipboard);
Vue.use(widgets);
Vue.component("Draggable", draggable);
Vue.prototype.$api = api;
Vue.prototype.$echarts = echarts;
Vue.prototype.$gaodeMap = GaodeMap;
Vue.use(UmyUi);
Vue.use(fullscreen);
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'
// Vue.component('TEditor', TEditor)
......@@ -76,80 +97,83 @@ Vue.use(Vuetify)
* Currently MockJs will be used in the production environment,
* please remove it before going online ! ! !
*/
if (process.env.NODE_ENV === 'production') {
// const { mockXHR } = require('../mock')
// mockXHR()
if (process.env.NODE_ENV === "production") {
// const { mockXHR } = require('../mock')
// mockXHR()
}
// set ElementUI lang to EN
// Vue.use(ElementUI, { locale })
// 如果想要中文版 element-ui，按如下方式声明
ElementUI.Dialog.props.closeOnClickModal.default = false
ElementUI.Dialog.props.closeOnPressEscape.default = false
ElementUI.Dialog.props.closeOnClickModal.default = false;
ElementUI.Dialog.props.closeOnPressEscape.default = false;
Vue.use(ElementUI, {
size: Cookies.get('size') || 'medium', // set element-ui default size
i18n: (key, value) => i18n.t(key, value)
})
size: Cookies.get("size") || "medium", // set element-ui default size
i18n: (key, value) => i18n.t(key, value),
});
Vue.use(Fit2CloudUI, {
i18n: (key, value) => i18n.t(key, value)
})
i18n: (key, value) => i18n.t(key, value),
});
// Vue.use(VueAxios, axios)
Vue.use(filter)
Vue.use(directives)
Vue.use(message)
Vue.component('Treeselect', Treeselect)
Vue.component('DeComplexInput', DeComplexInput)
Vue.component('DeComplexSelect', DeComplexSelect)
Vue.component('DeViewSelect', DeViewSelect)
Vue.component('RemarkEditor', RemarkEditor)
Vue.component('TitleRemark', TitleRemark)
Vue.component('DeBtn', deBtn)
Vue.use(filter);
Vue.use(directives);
Vue.use(message);
Vue.component("Treeselect", Treeselect);
Vue.component("DeComplexInput", DeComplexInput);
Vue.component("DeComplexSelect", DeComplexSelect);
Vue.component("DeViewSelect", DeViewSelect);
Vue.component("RemarkEditor", RemarkEditor);
Vue.component("TitleRemark", TitleRemark);
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) {
if (this.$store.state.user.user.isAdmin || pSource === 'ignore') {
return true
Vue.prototype.hasDataPermission = function (pTarget, pSource) {
if (this.$store.state.user.user.isAdmin || pSource === "ignore") {
return true;
}
if (pSource && pTarget) {
return pSource.indexOf(pTarget) > -1
return pSource.indexOf(pTarget) > -1;
}
return false
}
Vue.prototype.checkPermission = function(pers) {
const permissions = store.getters.permissions
const hasPermission = pers.every(needP => {
const result = permissions.includes(needP)
return result
})
return hasPermission
}
Vue.use(deWebsocket)
Vue.prototype.$currentHttpRequestList = new Map()
Vue.prototype.$cancelRequest = function(cancelkey) {
return false;
};
Vue.prototype.checkPermission = function (pers) {
const permissions = store.getters.permissions;
const hasPermission = pers.every((needP) => {
const result = permissions.includes(needP);
return result;
});
return hasPermission;
};
Vue.use(deWebsocket);
Vue.prototype.$currentHttpRequestList = new Map();
Vue.prototype.$cancelRequest = function (cancelkey) {
if (cancelkey) {
if (cancelkey.indexOf('/**') > -1) {
if (cancelkey.indexOf("/**") > -1) {
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 {
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({
router,
store,
i18n,
render: h => h(App)
}).$mount('#app')
render: (h) => h(App),
}).$mount("#app");
src/views/chart/chart/util.js
......@@ -3111,25 +3111,19 @@ export const TYPE_CONFIGS = [
{
render: "aMap",
category: "chart.chart_type_space",
value: "map",
title: "map.layer",
value: "amap",
title: "amap.layer",
icon: "map_mini",
properties: [
"color-selector",
"label-selector",
"tooltip-selector",
// "label-selector",
// "tooltip-selector",
"title-selector",
"suspension-selector",
// "suspension-selector",
"condition-style-selector",
],
propertyInner: {
"color-selector": [
"value",
"custom",
"alpha",
"area-border-color",
"gradient-color",
],
"color-selector": ["theme"],
"label-selector": [
"show",
"fontSize",
......
src/views/chart/components/AMap.vue
<template>
<div>{{ mapData }}</div>
<el-amap
:vid="mapId"
default-cursor="default"
/>
</template>
<script>
import { lazyAMapApiLoaderInstance } from 'vue-amap'
import { uuid } from 'vue-uuid'
import { baseAMapData, hazardLevel } from './aMap/aMap'
export default {
props: {
mapData: {
chart: {
type: Object,
required: true
}
},
data() {
return {}
return {
map: {},
AMap: {},
layers: [],
allParkList: [],
center: [116.400586, 39.903475],
mapStyle: 'amap://styles/6ee1c8252c951da095d5e4eaf9c65a1f',
zoom: 14,
mapId: uuid.v1()
}
},
watch: {
mapData: {
chart: {
handler(newVal, oldVal) {
console.log(newVal, oldVal)
// this.drawLayer()
this.initMap()
},
deep: true
}
},
destroyed() {
console.log(66666)
mounted() {
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>
<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 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论