<template> <#if ctrl.render??> ${ctrl.render.code} <#else> <div class="map-container"> <div ref="map" class="map"></div> </div> </#if> </template> <#assign import_block> import echarts from 'echarts'; import 'echarts/map/js/china.js' import { Http } from "@/utils"; </#assign> <#ibizinclude> ../@MACRO/CONTROL/CONTROL_HEADER-BASE.vue.ftl </#ibizinclude> /** * 地图对象 * * @type {*} * @memberof ${srfclassname('${ctrl.codeName}')}Base */ public map: any; /** * 显示处理提示 * * @type {boolean} * @memberof ${srfclassname('${ctrl.codeName}')}Base */ @Prop({ default: true }) public showBusyIndicator?: boolean; /** * 部件行为--update * * @type {string} * @memberof ${srfclassname('${ctrl.codeName}')}Base */ @Prop() public updateAction!: string; /** * 部件行为--fetch * * @type {string} * @memberof ${srfclassname('${ctrl.codeName}')}Base */ @Prop() public fetchAction!: string; /** * 部件行为--remove * * @type {string} * @memberof ${srfclassname('${ctrl.codeName}')}Base */ @Prop() public removeAction!: string; /** * 部件行为--load * * @type {string} * @memberof ${srfclassname('${ctrl.codeName}')}Base */ @Prop() public loadAction!: string; /** * 部件行为--loaddraft * * @type {string} * @memberof ${srfclassname('${ctrl.codeName}')}Base */ @Prop() public loaddraftAction!: string; /** * 部件行为--create * * @type {string} * @memberof ${srfclassname('${ctrl.codeName}')}Base */ @Prop() public createAction!: string; /** * 地图数据项模型 * * @type {} * @memberof ${srfclassname('${ctrl.name}')}Base */ public mapItems: any = { <#if ctrl.getPSSysMapItems?? && ctrl.getPSSysMapItems()??> <#list ctrl.getPSSysMapItems() as mapitem> '${mapitem.getItemType()?lower_case}': { bkcolor: '<#if mapitem.getBKColorPSAppDEField?? && mapitem.getBKColorPSAppDEField()??>${mapitem.getBKColorPSAppDEField().getCodeName()?lower_case}</#if>', color:'<#if mapitem.getColorPSAppDEField?? && mapitem.getColorPSAppDEField()??>${mapitem.getColorPSAppDEField().getCodeName()?lower_case}</#if>', content:'<#if mapitem.getContentPSDEField?? && mapitem.getContentPSDEField()??>${mapitem.getContentPSDEField().getCodeName()?lower_case}</#if>', latitude:'<#if mapitem.getLatitudePSAppDEField?? && mapitem.getLatitudePSAppDEField()??>${mapitem.getLatitudePSAppDEField().getCodeName()?lower_case}</#if>', longitude:'<#if mapitem.getLongitudePSAppDEField?? && mapitem.getLongitudePSAppDEField()??>${mapitem.getLongitudePSAppDEField().getCodeName()?lower_case}</#if>', text:'<#if mapitem.getTextPSAppDEField?? && mapitem.getTextPSAppDEField()??>${mapitem.getTextPSAppDEField().getCodeName()?lower_case}</#if>', tips:'<#if mapitem.getTipsPSAppDEField?? && mapitem.getTipsPSAppDEField()??>${mapitem.getTipsPSAppDEField().getCodeName()?lower_case}</#if>', code:'${mapitem_index}' }<#if mapitem_has_next>,</#if> </#list> </#if> }; /** * 数据集 * * @type {} * @memberof ${srfclassname('${ctrl.name}')}Base */ public items: any[] = []; /** * 初始化配置 * * @type {} * @memberof ${srfclassname('${ctrl.name}')}Base */ public initOptions: any = { tooltip: { trigger: 'item' }, legend: { orient: 'horizontal', x: 'center', data: [ <#if ctrl.getPSSysMapItems?? && ctrl.getPSSysMapItems()??> <#list ctrl.getPSSysMapItems() as mapitem> '${mapitem.getName()}'<#if mapitem_has_next>,</#if> </#list> </#if> ] }, geo: { map: 'china', zoom: 1.2, label: { normal: { show: false }, emphasis: { show: false } }, itemStyle: { normal: { areaColor: '#4FADFD', borderColor: '#111' }, emphasis: { areaColor: '#0CD3DB' } } }, visualMap: [ <#if ctrl.getPSSysMapItems?? && ctrl.getPSSysMapItems()??> <#list ctrl.getPSSysMapItems() as mapitem> { type: 'piecewise', left: 'left', top: 'bottom', splitNumber: 1, seriesIndex: ${mapitem_index}, pieces: [{ label: '${mapitem.getName()}', min: ${mapitem_index * 10}, max: ${(mapitem_index+1) * 10}, <#if mapitem.getColor?? && mapitem.getColor()??> color: '${mapitem.getColor()}', </#if><#t> <#if mapitem.getBKColor?? && mapitem.getBKColor()??> backgroundColor: '${mapitem.getBKColor()}', </#if><#t> <#if mapitem.getBorderColor?? && mapitem.getBorderColor()??> borderColor: '${mapitem.getBorderColor()}', </#if><#t> <#if mapitem.getBorderWidth?? && mapitem.getBorderWidth()??> borderWidth: '${mapitem.getBorderWidth()}', </#if><#t> }], show: false }<#if mapitem_has_next>,</#if> </#list> </#if> ], series: [ <#if ctrl.getPSSysMapItems?? && ctrl.getPSSysMapItems()??> <#list ctrl.getPSSysMapItems() as mapitem> { name: '<#if mapitem.getName()??>${mapitem.getName()}</#if>', <#-- 类型判断 Start (默认 POINT )--> <#-- 目前支持 POINT --> <#if mapitem.getItemStyle?? && mapitem.getItemStyle()??> <#if mapitem.getItemStyle() == 'POINT'> type: 'scatter', <#else> type: 'scatter', </#if> <#else> type: 'scatter', </#if> <#-- 类型判断 End --> coordinateSystem: 'geo', <#if mapitem.getItemType?? && mapitem.getItemType()??> itemType: '${mapitem.getItemType()?lower_case}', </#if><#t> <#if mapitem.getColor?? && mapitem.getColor()??> color: '${mapitem.getColor()}', </#if><#t> geoIndex: 0, symbolSize: 14, label: { show: false }, emphasis: { label: { show: false } }, tooltip: { formatter: '{a}' }, seriesDataIndex: ${(mapitem_index + 1) * 10 - 5}, data: [] }<#if mapitem_has_next>,</#if> </#list> </#if> ] } /** * 应用状态事件 * * @public * @type {(Subscription | undefined)} * @memberof ${srfclassname('${ctrl.codeName}')}Base */ public appStateEvent: Subscription | undefined; /** * 刷新 * * @memberof ${srfclassname('${ctrl.codeName}')}Base */ public refresh(args?: any) { this.load(); } /** * 选中的数据 * * @returns {any[]} * @memberof ${srfclassname('${ctrl.codeName}')}Base */ public selections: any[] = []; /** * 获取多项数据 * * @returns {any[]} * @memberof ${srfclassname('${ctrl.codeName}')}Base */ public getDatas(): any[] { return this.selections; } /** * 获取单项树 * * @returns {*} * @memberof ${srfclassname('${ctrl.codeName}')}Base */ public getData(): any { return null; } /** * vue 生命周期 * * @returns * @memberof ${srfclassname('${ctrl.codeName}')}Base */ public created() { this.afterCreated(); } /** * 执行created后的逻辑 * * @memberof ${srfclassname('${ctrl.codeName}')}Base */ public afterCreated() { if(AppCenterService && AppCenterService.getMessageCenter()){ this.appStateEvent = AppCenterService.getMessageCenter().subscribe(({ name, action, data }) =>{ if(!Object.is(name,"${ctrl.getPSAppDataEntity().getCodeName()}")){ return; } if(Object.is(action,'appRefresh')){ this.refresh(); } }) } this.viewStateEvent = this.viewState.subscribe(({ tag, action, data }) => { if (!Object.is(tag, this.name)) { return; } if (Object.is('load', action)) { this.load(data); } }); } /** * vue生命周期 * * @memberof ${srfclassname('${ctrl.codeName}')}Base */ public mounted() { this.afterMounted(); } /** * 执行mounted后的逻辑 * * @memberof ${srfclassname('${ctrl.codeName}')}Base */ public afterMounted() { let map: any = (this.$refs.map as any); this.map = echarts.init(map); this.map.setOption(this.initOptions); } /** * 加载数据 * * @memberof ${srfclassname('${ctrl.codeName}')}Base */ public load(data: any = {}, type: string = "",isloadding = this.showBusyIndicator) { this.items = []; const parentData: any = {}; this.$emit('beforeload', parentData); Object.assign(data, parentData); let tempViewParams: any = parentData.viewparams ? parentData.viewparams : {}; Object.assign(tempViewParams, JSON.parse(JSON.stringify(this.viewparams))); Object.assign(data, { viewparams: tempViewParams }); this.service.search(this.fetchAction, this.context, data, isloadding).then((response: any) => { if(!response || response.status !== 200) { this.$notify.warning({ title: '警告', message: response.error.message }) } this.$emit('load', response.data ? response.data : []); this.items = response.data; this.handleOptions(response.data); this.setOptions(); }); } /** * 设置配置 * * @memberof ${srfclassname('${ctrl.codeName}')}Base */ public setOptions() { if(!this.map) { return; } const options = JSON.parse(JSON.stringify(this.initOptions)); this.map.setOption(options); } /** * 处理数据集 * * @memberof ${srfclassname('${ctrl.codeName}')}Base */ public handleOptions(items: any[]) { if(!items || items.length == 0) { return; } items.forEach((item: any) => { let longitudeArr: Array<any> = []; let latitudeArr: Array<any> = []; for(let key in this.mapItems) { if(Object.is(key, item.itemType)) { item.longitude ? longitudeArr.push(item.longitude) : ''; item.latitude ? latitudeArr.push(item.latitude) : ''; } } this.handleMapOptions(longitudeArr, latitudeArr, item); }) } /** * 配置整合 * * @memberof ${srfclassname('${ctrl.codeName}')}Base */ public handleMapOptions(longitude: Array<any>, latitude: Array<any>, arg: any) { let series: Array<any> = this.initOptions.series; if(!series || series.length==0) { return; } series.forEach((item: any) => { if(Object.is(arg.itemType, item.itemType)) { longitude.forEach((jd: any, index: number) => { let tempItem: any[] = []; tempItem.push(parseFloat(jd)); tempItem.push(parseFloat(latitude[index])); this.handleSeriesOptions(tempItem, item, arg); item.data.push(tempItem); }) } }); Object.assign(this.initOptions.series, series); } /** * 数据整合 * * @memberof ${srfclassname('${ctrl.codeName}')}Base */ public handleSeriesOptions(tempItem: any, item: any, data: any) { // 序列 tempItem.push(item.seriesDataIndex); } /** * vue 生命周期 * * @memberof ${srfclassname('${ctrl.codeName}')}Base */ public destroyed() { this.afterDestroy(); } /** * 执行destroyed后的逻辑 * * @memberof ${srfclassname('${ctrl.codeName}')}Base */ public afterDestroy() { if(this.appStateEvent){ this.appStateEvent.unsubscribe(); } if(this.viewStateEvent){ this.viewStateEvent.unsubscribe(); } <#if destroyed_block??> ${destroyed_block} </#if> } <#ibizinclude> ../@MACRO/CONTROL/CONTROL_BOTTOM-BASE.vue.ftl </#ibizinclude> <#ibizinclude> ../@MACRO/CONTROL/CONTROL-BASE.style.ftl </#ibizinclude>