center/dataease-dm
center/dataease-dm
13
0
Fork 0
forked from github/dataease
Code Pull Requests Activity

feat(视图): 色彩地图增加标记功能

Browse Source
This commit is contained in:
fit2cloud-chenyw 2022-12-15 14:01:28 +08:00
parent acd771cfd0
commit 4fa41d8676
60 changed files with 2534 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
backend/src/main/java/io/dataease/service/chart/ChartViewService.java
View File

@ -558,6 +558,12 @@ public class ChartViewService {
return data; return data;
} }
public Boolean containDetailField(ChartViewDTO view) {
List<String> detailFieldViewTypes = new ArrayList<>();
detailFieldViewTypes.add("map");
return detailFieldViewTypes.contains(view.getType());
}
public ChartViewDTO calcData(ChartViewDTO view, ChartExtRequest chartExtRequest, boolean cache) throws Exception { public ChartViewDTO calcData(ChartViewDTO view, ChartExtRequest chartExtRequest, boolean cache) throws Exception {
ChartViewDTO chartViewDTO = new ChartViewDTO(); ChartViewDTO chartViewDTO = new ChartViewDTO();
if (ObjectUtils.isEmpty(view)) { if (ObjectUtils.isEmpty(view)) {
@ -906,6 +912,9 @@ public class ChartViewService {
pageInfo.setGoPage(chartExtRequest.getGoPage()); pageInfo.setGoPage(chartExtRequest.getGoPage());
pageInfo.setPageSize(chartExtRequest.getPageSize()); pageInfo.setPageSize(chartExtRequest.getPageSize());
List<ChartViewFieldDTO> detailFieldList = new ArrayList<>();
String detailFieldSql = null;
List<String[]> detailData = new ArrayList<>();
//如果不是插件视图 走原生逻辑 //如果不是插件视图 走原生逻辑
if (table.getMode() == 0) {// 直连 if (table.getMode() == 0) {// 直连
if (ObjectUtils.isEmpty(ds)) { if (ObjectUtils.isEmpty(ds)) {
@ -931,6 +940,11 @@ public class ChartViewService {
totalPageSql = qp.getResultCount(true, dataTableInfoDTO.getTable(), xAxis, fieldCustomFilter, rowPermissionsTree, extFilterList, ds, view); totalPageSql = qp.getResultCount(true, dataTableInfoDTO.getTable(), xAxis, fieldCustomFilter, rowPermissionsTree, extFilterList, ds, view);
} else { } else {
querySql = qp.getSQL(dataTableInfoDTO.getTable(), xAxis, yAxis, fieldCustomFilter, rowPermissionsTree, extFilterList, ds, view); querySql = qp.getSQL(dataTableInfoDTO.getTable(), xAxis, yAxis, fieldCustomFilter, rowPermissionsTree, extFilterList, ds, view);
if (containDetailField(view) && CollectionUtils.isNotEmpty(viewFields)) {
detailFieldList.addAll(xAxis);
detailFieldList.addAll(viewFields);
detailFieldSql = qp.getSQLWithPage(true, dataTableInfoDTO.getTable(), detailFieldList, fieldCustomFilter, rowPermissionsTree, extFilterList, ds, view, pageInfo);
}
} }
} else if (StringUtils.equalsIgnoreCase(table.getType(), DatasetType.SQL.name())) { } else if (StringUtils.equalsIgnoreCase(table.getType(), DatasetType.SQL.name())) {
String sql = dataTableInfoDTO.isBase64Encryption() ? new String(java.util.Base64.getDecoder().decode(dataTableInfoDTO.getSql())) : dataTableInfoDTO.getSql(); String sql = dataTableInfoDTO.isBase64Encryption() ? new String(java.util.Base64.getDecoder().decode(dataTableInfoDTO.getSql())) : dataTableInfoDTO.getSql();
@ -994,6 +1008,11 @@ public class ChartViewService {
logger.info(datasourceAssistRequest.getQuery()); logger.info(datasourceAssistRequest.getQuery());
assistData = datasourceProvider.getData(datasourceAssistRequest); assistData = datasourceProvider.getData(datasourceAssistRequest);
} }
if (StringUtils.isNotBlank(detailFieldSql)) {
datasourceRequest.setQuery(detailFieldSql);
detailData = datasourceProvider.getData(datasourceRequest);
}
} else if (table.getMode() == 1) {// 抽取 } else if (table.getMode() == 1) {// 抽取
// 连接doris，构建doris数据源查询 // 连接doris，构建doris数据源查询
datasourceRequest.setDatasource(ds); datasourceRequest.setDatasource(ds);
@ -1200,6 +1219,9 @@ public class ChartViewService {
} }
// table组件，明细表，也用于导出数据 // table组件，明细表，也用于导出数据
Map<String, Object> mapTableNormal = ChartDataBuild.transTableNormal(xAxis, yAxis, view, data, extStack, desensitizationList); Map<String, Object> mapTableNormal = ChartDataBuild.transTableNormal(xAxis, yAxis, view, data, extStack, desensitizationList);
if (CollectionUtils.isNotEmpty(detailData)) {
mapTableNormal = ChartDataBuild.transTableNormalWithDetail(xAxis, yAxis, data, detailFieldList, detailData, desensitizationList);
}
chartViewDTO = uniteViewResult(datasourceRequest.getQuery(), mapChart, mapTableNormal, view, isDrill, drillFilters, dynamicAssistFields, assistData); chartViewDTO = uniteViewResult(datasourceRequest.getQuery(), mapChart, mapTableNormal, view, isDrill, drillFilters, dynamicAssistFields, assistData);
chartViewDTO.setTotalPage(totalPage); chartViewDTO.setTotalPage(totalPage);
chartViewDTO.setTotalItems(totalItems); chartViewDTO.setTotalItems(totalItems);

41
backend/src/main/java/io/dataease/service/chart/util/ChartDataBuild.java
View File

@ -1,5 +1,6 @@
package io.dataease.service.chart.util; package io.dataease.service.chart.util;
import cn.hutool.core.util.ArrayUtil;
import io.dataease.plugins.common.base.domain.ChartViewWithBLOBs; import io.dataease.plugins.common.base.domain.ChartViewWithBLOBs;
import io.dataease.dto.chart.*; import io.dataease.dto.chart.*;
import io.dataease.plugins.common.dto.chart.ChartViewFieldDTO; import io.dataease.plugins.common.dto.chart.ChartViewFieldDTO;
@ -952,6 +953,46 @@ public class ChartDataBuild {
return transTableNormal(fields, view, data, desensitizationList); return transTableNormal(fields, view, data, desensitizationList);
} }
public static Map<String, Object> transTableNormalWithDetail(List<ChartViewFieldDTO> xAxis, List<ChartViewFieldDTO> yAxis, List<String[]> data, List<ChartViewFieldDTO> detailFields, List<String[]> detailData, Map<String, ColumnPermissionItem> desensitizationList) {
int detailIndex = xAxis.size();
List<ChartViewFieldDTO> realDetailFields = detailFields.subList(detailIndex, detailFields.size());
List<ChartViewFieldDTO> fields = new ArrayList<>();
if (CollectionUtils.isNotEmpty(xAxis))
fields.addAll(xAxis);
if (CollectionUtils.isNotEmpty(yAxis))
fields.addAll(yAxis);
Map<String, Object> map = transTableNormal(fields, null, data, desensitizationList);
List<Map<String, Object>> tableRow = (List<Map<String, Object>>) map.get("tableRow");
final int xEndIndex = detailIndex;
Map<String, List<String[]>> groupDataList = detailData.stream().collect(Collectors.groupingBy(item -> ArrayUtil.join(ArrayUtil.sub(item, 0, xEndIndex), "-de-", "(", ")")));
tableRow.forEach(row -> {
String key = xAxis.stream().map(x -> row.get(x.getDataeaseName()).toString()).collect(Collectors.joining("-de-", "(", ")"));
List<String[]> detailFieldValueList = groupDataList.get(key);
List<Map<String, Object>> detailValueMapList = detailFieldValueList.stream().map((detailArr -> {
Map<String, Object> temp = new HashMap<>();
for (int i = 0; i < realDetailFields.size(); i++) {
ChartViewFieldDTO realDetailField = realDetailFields.get(i);
temp.put(realDetailField.getDataeaseName(), detailArr[detailIndex + i]);
}
return temp;
})).collect(Collectors.toList());
row.put("details", detailValueMapList);
});
ChartViewFieldDTO detailFieldDTO = new ChartViewFieldDTO();
detailFieldDTO.setId("DataEase-Detail");
detailFieldDTO.setName("detail");
detailFieldDTO.setDataeaseName("detail");
fields.add(detailFieldDTO);
map.put("fields", fields);
map.put("detailFields", realDetailFields);
map.put("tableRow", tableRow);
return map;
}
// 表格 // 表格
public static Map<String, Object> transTableNormal(Map<String, List<ChartViewFieldDTO>> fieldMap, ChartViewWithBLOBs view, List<String[]> data, Map<String, ColumnPermissionItem> desensitizationList) { public static Map<String, Object> transTableNormal(Map<String, List<ChartViewFieldDTO>> fieldMap, ChartViewWithBLOBs view, List<String[]> data, Map<String, ColumnPermissionItem> desensitizationList) {

86
frontend/src/components/deIconPicker/eIcon/e-icon.vue Normal file
View File

@ -0,0 +1,86 @@
<template>
<i
v-if="fontClass"
:class="iconName"
@click="click(iconName,$event)"
/>
<svg
v-else-if="svg"
:class="svgClass"
aria-hidden="true"
@click="click(iconName,$event)"
>
<use :xlink:href="iconName" />
</svg>
<div
v-else-if="isExternal"
:style="styleExternalIcon"
:class="className"
class="icon external-icon"
@click="click(iconName,$event)"
/>
</template>
<script>
import { isExternal } from '../utils/index'
export default {
name: 'EIcon',
props: {
iconName: {
type: String,
required: true
},
className: {
type: String,
default: ''
}
},
computed: {
fontClass() {
return this.iconName && this.iconName.trim().length > 2 && (!isExternal(this.iconName) && !this.iconName.startsWith('#'))
},
svg() {
return this.iconName && this.iconName.trim().length > 2 && (!isExternal(this.iconName) && this.iconName.startsWith('#'))
},
isExternal() {
return isExternal(this.iconName)
},
svgClass() {
if (this.className) {
return 'icon ' + this.className
} else {
return 'icon'
}
},
styleExternalIcon() {
return {
'background-image': `url(${this.iconName})`,
'background-repeat': 'no-repeat',
'background-size': '100% 100%',
'-moz-background-size': '100% 100%'
}
}
},
methods: {
click(iconName, event) {
if (event) event.preventDefault()
this.$emit('click', iconName)
}
}
}
</script>
<style scoped>
.icon {
width: 1em;
height: 1em;
vertical-align: -0.15em;
fill: currentColor;
overflow: hidden;
}
.external-icon {
display: inline-block;
}
</style>

1
frontend/src/components/deIconPicker/eIconList.js Normal file
View File

@ -0,0 +1 @@
export default ['xianxingbenzitubiao1', 'xianxinganquansuotubiao', 'xianxingbenzitubiao2', 'xianxingdianzantubiao', 'xianxingdiannaotubiao', 'xianxingjishibentubiao', 'xianxingdianhuatubiao', 'xianxinghuishouzhantubiao', 'xianxingWIFItubiao', 'xianxingduihuakuangtubiao', 'xianxinglajitongtubiao', 'xianxingjiangpaitubiao2', 'xianxingjiaoyoutubiao', 'xianxingquerentubiao', 'xianxingrenwutubiao', 'xianxingjiangpaitubiao1', 'xianxingshoujitubiao', 'xianxinglianxirentubiao', 'xianxingrenyuantubiao', 'xianxinggongjutubiao', 'xianxingshenfentubiao', 'xianxingxiangjitubiao', 'xianxingwendatubiao', 'xianxingyanjingtubiao', 'xianxingxinxitubiao', 'xianxingxinjiantubiao', 'xianxingtudingtubiao', 'xianxingshijiantubiao', 'xianxingqianbaotubiao', 'xianxingtupiantubiao', 'xianxingzhifubaotubiao', 'xianxingyoujiantubiao', 'xianxingzhifeijitubiao', 'xianxingyuantubiao', 'xianxingxiangfatubiao', 'diannao-01', 'jiaojuan-01', 'shuji-01', 'gujianzhu-01', 'simiao-01', 'yundong-yumaoqiu', 'sanjiaojia-01', 'zhaoxiangji-01', 'shuihu-01', 'yumaopai-01', 'yanjing-01', 'chalaoban-01', 'shouji-01', 'yinzhang-01', 'xiangyan-01', 'guangpan-01', 'kafei-01', 'erji-01', 'foling-01', 'xiong-01', 'bingxiang', 'diannao', 'chufangcheng', 'biludianshi', 'dayinji', 'guangpan', 'jiashiqi', 'fengshan', 'kongtiao', 'dianfanbao', 'fengrenji', 'dianzicheng', 'mensuo', 'shexiangji', 'saodijiqiren', 'lvshuiji', 'shuzhuodeng', 'kafeiji', 'jisuanqi', 'xiyiji', 'shexiangtou'].map(s => 'eiconfont e-icon-' + s)

1
frontend/src/components/deIconPicker/elementUI.js Normal file
View File

@ -0,0 +1 @@
export default ['platform-eleme', 'eleme', 'delete-solid', 'delete', 's-tools', 'setting', 'user-solid', 'user', 'phone', 'phone-outline', 'more', 'more-outline', 'star-on', 'star-off', 's-goods', 'goods', 'warning', 'warning-outline', 'question', 'info', 'remove', 'circle-plus', 'success', 'error', 'zoom-in', 'zoom-out', 'remove-outline', 'circle-plus-outline', 'circle-check', 'circle-close', 's-help', 'help', 'minus', 'plus', 'check', 'close', 'picture', 'picture-outline', 'picture-outline-round', 'upload', 'upload2', 'download', 'camera-solid', 'camera', 'video-camera-solid', 'video-camera', 'message-solid', 'bell', 's-cooperation', 's-order', 's-platform', 's-fold', 's-unfold', 's-operation', 's-promotion', 's-home', 's-release', 's-ticket', 's-management', 's-open', 's-shop', 's-marketing', 's-flag', 's-comment', 's-finance', 's-claim', 's-custom', 's-opportunity', 's-data', 's-check', 's-grid', 'menu', 'share', 'd-caret', 'caret-left', 'caret-right', 'caret-bottom', 'caret-top', 'bottom-left', 'bottom-right', 'back', 'right', 'bottom', 'top', 'top-left', 'top-right', 'arrow-left', 'arrow-right', 'arrow-down', 'arrow-up', 'd-arrow-left', 'd-arrow-right', 'video-pause', 'video-play', 'refresh', 'refresh-right', 'refresh-left', 'finished', 'sort', 'sort-up', 'sort-down', 'rank', 'loading', 'view', 'c-scale-to-original', 'date', 'edit', 'edit-outline', 'folder', 'folder-opened', 'folder-add', 'folder-remove', 'folder-delete', 'folder-checked', 'tickets', 'document-remove', 'document-delete', 'document-copy', 'document-checked', 'document', 'document-add', 'printer', 'paperclip', 'takeaway-box', 'search', 'monitor', 'attract', 'mobile', 'scissors', 'umbrella', 'headset', 'brush', 'mouse', 'coordinate', 'magic-stick', 'reading', 'data-line', 'data-board', 'pie-chart', 'data-analysis', 'collection-tag', 'film', 'suitcase', 'suitcase-1', 'receiving', 'collection', 'files', 'notebook-1', 'notebook-2', 'toilet-paper', 'office-building', 'school', 'table-lamp', 'house', 'no-smoking', 'smoking', 'shopping-cart-full', 'shopping-cart-1', 'shopping-cart-2', 'shopping-bag-1', 'shopping-bag-2', 'sold-out', 'sell', 'present', 'box', 'bank-card', 'money', 'coin', 'wallet', 'discount', 'price-tag', 'news', 'guide', 'male', 'female', 'thumb', 'cpu', 'link', 'connection', 'open', 'turn-off', 'set-up', 'chat-round', 'chat-line-round', 'chat-square', 'chat-dot-round', 'chat-dot-square', 'chat-line-square', 'message', 'postcard', 'position', 'turn-off-microphone', 'microphone', 'close-notification', 'bangzhu', 'time', 'odometer', 'crop', 'aim', 'switch-button', 'full-screen', 'copy-document', 'mic', 'stopwatch', 'medal-1', 'medal', 'trophy', 'trophy-1', 'first-aid-kit', 'discover', 'place', 'location', 'location-outline', 'location-information', 'add-location', 'delete-location', 'map-location', 'alarm-clock', 'timer', 'watch-1', 'watch', 'lock', 'unlock', 'key', 'service', 'mobile-phone', 'bicycle', 'truck', 'ship', 'basketball', 'football', 'soccer', 'baseball', 'wind-power', 'light-rain', 'lightning', 'heavy-rain', 'sunrise', 'sunrise-1', 'sunset', 'sunny', 'cloudy', 'partly-cloudy', 'cloudy-and-sunny', 'moon', 'moon-night', 'dish', 'dish-1', 'food', 'chicken', 'fork-spoon', 'knife-fork', 'burger', 'tableware', 'sugar', 'dessert', 'ice-cream', 'hot-water', 'water-cup', 'coffee-cup', 'cold-drink', 'goblet', 'goblet-full', 'goblet-square', 'goblet-square-full', 'refrigerator', 'grape', 'watermelon', 'cherry', 'apple', 'pear', 'orange', 'coffee', 'ice-tea', 'ice-drink', 'milk-tea', 'potato-strips', 'lollipop', 'ice-cream-square', 'ice-cream-round'].map(s => 'el-icon-' + s)

1
frontend/src/components/deIconPicker/fontAwesome.js Normal file
View File

File diff suppressed because one or more lines are too long

48
frontend/src/components/deIconPicker/iconList.js Normal file
View File

@ -0,0 +1,48 @@
import { TypeUtil } from './utils/index'
import fontAwesome from './fontAwesome'
import elementUI from './elementUI'
import eIconList from './eIconList'
const add = function(list, item) {
let arr = []
if (item && TypeUtil.isArray(item)) {
arr = list.concat(item)
} else if (item && TypeUtil.isString(item)) {
arr = arr.concat(list)
arr.push(item)
}
return arr
}
const remove = function(list, item) {
if (item && TypeUtil.isArray(item)) {
for (let i = 0; i < item.length; i++) {
for (let j = 0; j < list.length; j++) {
if (list[j] === item[i]) {
list.splice(j, 1)
j--
}
}
}
} else if (item && TypeUtil.isString(item)) {
list = list.filter(function(i) {
return i !== item
})
}
return list
}
const iconList = {
list: [],
addIcon: function(item) {
this.list = add(this.list, item)
},
removeIcon: function(item) {
this.list = remove(this.list, item)
}
}
export { fontAwesome, elementUI, eIconList }
export default iconList

539
frontend/src/components/deIconPicker/index.vue Normal file
View File

@ -0,0 +1,539 @@
<template>
<div class="ui-fas">
<div
v-if="!!name"
class="selected-icon-container"
>
<span
title="icon"
:style="{color: color}"
>
<e-icon
:icon-name="name"
:title="name"
class="e-icon"
/>
</span>
</div>
<el-popover
ref="popover"
v-model="visible"
:disabled="disabled"
:placement="myPlacement"
popper-class="el-icon-popper"
:width="popoverWidth"
show-arrow
trigger="manual"
@show="setTempSelected"
>
<template slot="reference">
<slot
name="default"
:data="{prefixIcon,visible,placeholder,disabled,clearable,readonly,size}"
>
<el-input
ref="input"
v-model="proxyValue"
class="de-icon-picker-input"
:placeholder="dynamicPlaceholder"
:style="styles"
:clearable="clearable"
:disabled="disabled"
:readonly="true"
:size="size"
@input="_change"
@clear="_initIcon(false)"
@focus="_popoverShowFun(false)"
>
<template
v-if="showPrefix"
slot="prepend"
>
<slot
name="prepend"
:icon="prefixIcon"
>
<e-icon
:icon-name="prefixIcon"
class="e-icon"
/>
</slot>
</template>
</el-input>
</slot>
</template>
<div class="de-icon-picker-container">
<div class="top-container">
<el-color-picker
v-model="curColor"
show-alpha
@change="colorChange"
/>
<div class="top-sure-button-div">
<el-button
type="primary"
size="mini"
icon="el-icon-check"
@click.stop="sure"
/>
</div>
</div>
<el-divider class="top-divider" />
<el-scrollbar
v-if="!destroy"
ref="eScrollbar"
tag="div"
wrap-class="el-select-dropdown__wrap"
view-class="el-select-dropdown__list"
:class="'is-empty-'+id"
>
<ul
v-if="dataList && dataList.length > 0"
ref="fasIconList"
class="fas-icon-list"
>
<li
v-for="(item, index) in dataList"
:key="index"
class="picker-li"
:style="tempSelected === item && (highLightColor !== '' || !!curColor) ? {color: highLightColor || curColor, border: '1px solid ' + curColor} : ''"
@click="_selectedIcon(item)"
>
<slot
name="icon"
:icon="item"
>
<e-icon
:icon-name="item"
:title="item"
class="e-icon"
/>
</slot>
</li>
</ul>
<span
v-else
class="fas-no-data"
v-text="emptyText"
/>
</el-scrollbar>
</div>
</el-popover>
</div>
</template>
<script>
import iconList, { eIconList, elementUI, fontAwesome } from './iconList'
import { off, on } from './utils/index'
import EIcon from './eIcon/e-icon'
import ElInput from 'element-ui/lib/input'
import ElPopover from 'element-ui/lib/popover'
import ElScrollbar from 'element-ui/lib/scrollbar'
import { PopupManager } from 'element-ui/lib/utils/popup'
export default {
name: 'EIconPicker',
components: {
EIcon,
ElInput,
ElPopover,
ElScrollbar
},
props: {
disabled: {
type: Boolean,
default() {
return false
}
},
readonly: {
type: Boolean,
default() {
return false
}
},
clearable: {
type: Boolean,
default() {
return false
}
},
styles: {
type: Object,
default() {
return {}
}
},
placement: {
type: String,
default() {
return 'bottom'
}
},
value: {
type: String,
default() {
return ''
}
},
options: {},
width: {
type: Number,
default() {
return -1
}
},
size: {
type: String,
default() {
return 'medium'
}
},
placeholder: {
type: String,
default() {
return '请选择图标'
}
},
defaultIcon: {
type: String,
default() {
return 'eiconfont e-icon-bi'
}
},
emptyText: {
type: String,
default() {
return '暂无可选图标'
}
},
highLightColor: {
type: String,
default() {
return ''
}
},
zIndex: {
type: Number,
default() {
return null
}
},
showPrefix: {
type: Boolean,
default() {
return false
}
},
color: {
type: String,
default() {
return 'rgba(255, 0, 0, 1.0)'
}
}
},
data() {
return {
iconList: [],
visible: false,
prefixIcon: 'eiconfont e-icon-bi',
name: '',
icon: {},
myPlacement: 'bottom',
popoverWidth: 200,
destroy: false,
id: new Date().getTime(),
proxyValue: '',
curColor: '',
tempSelected: ''
}
},
computed: {
dataList: function() {
const arr1 = []
for (let i = 0, len = this.iconList.length; i < len; i++) {
if (arr1.indexOf(this.iconList[i]) === -1) {
arr1.push(this.iconList[i])
}
}
return arr1
},
dynamicPlaceholder() {
return this.name ? '' : this.placeholder
}
},
watch: {
value: function(val) {
setTimeout(() => {
this.name = val
this.prefixIcon = this.name ? this.name : this.defaultIcon
}, 50)
},
visible: function(val) {
if (val === false) {
this.$nextTick(() => {
off(document, 'mouseup', this._popoverHideFun)
})
} else {
this.$nextTick(() => {
this.createIconList()
on(document, 'mouseup', this._popoverHideFun)
})
}
},
options: {
handler(newV, oldV) {
const self = this
setTimeout(() => {
self._initIcon(true)
}, 50)
},
deep: true
}
},
mounted() {
this._updateW()
},
beforeDestroy() {
off(document, 'mouseup', this._popoverHideFun)
this.destroyIconList()
},
created() {
this.createIconList()
this._initIcon(true)
this.curColor = this.color
},
methods: {
colorChange(c) {
this.color = c
this.$emit('set-color', c)
},
setTempSelected() {
this.tempSelected = this.name
},
sure() {
this.visible = false
this.name = this.tempSelected
this.prefixIcon = this.name
this.color = this.curColor
this._emitFun(this.name)
this.$emit('set-color', this.curColor)
},
_change(val) {
this.iconList = this.icon.list.filter(function(i) {
return i.indexOf(val) !== -1
})
},
_initIcon(type) {
this.prefixIcon = this.value && type && type === true ? this.value : this.defaultIcon
this.name = type === true ? this.value : ''
this.icon = Object.assign({}, iconList)
if (this.options) {
this.icon.list = []
if (this.options.addIconList !== undefined &&
this.options.addIconList &&
this.options.addIconList.length > 0) {
this.icon.addIcon(this.options.addIconList)
}
if (this.options.removeIconList !== undefined &&
this.options.removeIconList &&
this.options.removeIconList.length > 0) {
this.icon.removeIcon(this.options.removeIconList)
}
if (this.options.FontAwesome === true) {
this.icon.addIcon(fontAwesome)
}
if (this.options.ElementUI === true) {
this.icon.addIcon(elementUI)
}
if (this.options.eIcon === true) {
if (this.options.eIconSymbol) {
const list = eIconList.map((item) => {
return item.replace('eiconfont ', '#')
})
this.icon.addIcon(list)
} else {
this.icon.addIcon(eIconList)
}
}
}
this.iconList = this.icon.list
if (this.placement && (this.placement === 'bottom' || this.placement === 'top')) {
this.myPlacement = this.placement
}
if (type === false) {
this._emitFun('')
}
},
addIcon(item = []) {
if (item !== undefined && item && item.length > 0) {
this.icon.addIcon(item)
this.iconList = this.icon.list
}
},
removeIcon(item = []) {
if (item !== undefined && item && item.length > 0) {
this.icon.removeIcon(item)
this.iconList = this.icon.list
}
},
updatePopper(zIndex) {
if (zIndex) {
PopupManager.zIndex = zIndex
}
this._popoverShowFun(true)
setTimeout(() => {
this.$refs.popover.updatePopper()
}, 100)
},
_selectedIcon(item) {
this.tempSelected = item
},
_updateW() {
this.$nextTick(() => {
if (this.width === -1 && this.$refs.input && this.$refs.input.$el) {
this.popoverWidth = this.$refs.input.$el.getBoundingClientRect().width - 36
} else {
this.popoverWidth = this.width
}
if (this.$refs.eScrollbar && this.$refs.eScrollbar.wrap) {
this.$refs.eScrollbar.wrap.scrollTop = 0
this.$refs.eScrollbar.handleScroll()
this.$refs.eScrollbar.update()
}
})
},
_popoverShowFun(flag) {
const _this = this
if (_this.readonly !== true && _this.disabled !== true) {
if (!flag && _this.zIndex) {
PopupManager.zIndex = this.zIndex
}
_this.visible = true
_this._updateW()
}
},
_popoverHideFun(e) {
const path = e.path || (e.composedPath && e.composedPath())
const isInside = path.some(list => {
return list.className && typeof list.className === 'string' && (list.className.indexOf('ui-fas') !== -1 || list.className.indexOf('de-icon-picker-container') !== -1)
})
if (!isInside) {
this.visible = false
}
const isInput = path.some(list => {
return list.className && typeof list.className === 'string' && list.className.indexOf('de-icon-picker-input') !== -1
})
if (this.visible && isInput) {
// this.visible = false
}
},
_emitFun(val) {
this.$emit('input', val)
this.$emit('change', val)
},
destroyIconList() {
this.destroy = true
},
createIconList() {
this.destroy = false
},
show() {
this._popoverShowFun(false)
},
hide() {
this.visible = false
}
}
}
</script>
<style lang="scss" scoped>
@import '~element-ui/lib/theme-chalk/input.css';
@import '~element-ui/lib/theme-chalk/popover.css';
@import '~element-ui/lib/theme-chalk/scrollbar.css';
@import '~element-ui/lib/theme-chalk/select-dropdown.css';
.fas-icon-list {
list-style-type: none;
margin: 0 0 0 -4px;
padding: 0;
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
.ui-fas .el-input__inner {
cursor: pointer;
}
.fas-icon-list li {
width: 30px;
height: 30px;
margin: 5px;
}
.fas-icon-list li i, .fas-icon-list li svg {
font-size: 20px;
cursor: pointer;
}
.el-icon-popper {
max-height: 400px;
overflow: auto;
overflow-x: hidden;
overflow-y: hidden;
}
.el-icon-popper[x-placement^="bottom"] {
margin-top: 5px;
}
.fas-no-data {
display: block;
}
.e-icon {
font-size: 16px;
}
.top-divider {
margin: 5px 0 0 0 !important;
}
.top-container {
display: flex;
}
.top-sure-button-div {
margin: 4px 15px 0 auto;
::v-deep button {
width: 25px;
height: 20px;
padding: 4px 5px;
}
}
.selected-icon-container {
position: absolute;
z-index: 9;
width: 21%;
text-align: center;
margin-top: 2px;
pointer-events: none;
}
.picker-li {
text-align: center;
line-height: 30px;
}
</style>

27
frontend/src/components/deIconPicker/utils/TypeUtil.js Normal file
View File

@ -0,0 +1,27 @@
export const TypeUtil = {
isArray: function(obj) {
return (typeof obj === 'object') && obj.constructor === Array
},
isString: function(obj) {
return (typeof obj === 'string') && obj.constructor === String
},
isNumber: function(obj) {
return (typeof obj === 'number') && obj.constructor === Number
},
isDate: function(obj) {
return (typeof obj === 'object') && obj.constructor === Date
},
isFunction: function(obj) {
return (typeof obj === 'function') && obj.constructor === Function
},
isObject: function(obj) {
return (typeof obj === 'object') && obj.constructor === Object
}
}

36
frontend/src/components/deIconPicker/utils/dom.js Normal file
View File

@ -0,0 +1,36 @@
import { isServer } from './util'
export const on = (function() {
if (!isServer) {
if (document && document.addEventListener) {
return function(element, event, handler) {
if (element && event && handler) {
element.addEventListener(event, handler, false)
}
}
} else {
return function(element, event, handler) {
if (element && event && handler) {
element.attachEvent('on' + event, handler)
}
}
}
}
})()
export const off = (function() {
if (!isServer) {
if (document && document.removeEventListener) {
return function(element, event, handler) {
if (element && event) {
element.removeEventListener(event, handler, false)
}
}
} else {
return function(element, event, handler) {
if (element && event) {
element.detachEvent('on' + event, handler)
}
}
}
}
})()

15
frontend/src/components/deIconPicker/utils/getSvg.js Normal file
View File

@ -0,0 +1,15 @@
const req = require.context(process.env.VUE_APP_SVG, false, /\.svg$/)
const requireAllFile = requireContext => requireContext.keys().map(requireContext)
requireAllFile(req)
const re = /\.\/(.*)\.svg/
const requireAll = requireContext => requireContext.keys()
const svgIcons = requireAll(req).map(i => {
return '#' + i.match(re)[1]
})
export default svgIcons

28
frontend/src/components/deIconPicker/utils/index.js Normal file
View File

@ -0,0 +1,28 @@
(function(e, d, w) {
if (!e.composedPath) {
e.composedPath = function() {
if (this.path) {
return this.path
}
let target = this.target
this.path = []
while (target.parentNode !== null) {
this.path.push(target)
target = target.parentNode
}
this.path.push(d, w)
return this.path
}
}
if (!String.prototype.startsWith) {
// eslint-disable-next-line no-extend-native
String.prototype.startsWith = function(search, pos) {
return this.substr(!pos || pos < 0 ? 0 : +pos, search.length) === search
}
}
})(Event.prototype, document, window)
export * from './util'
export * from './dom'
export * from './TypeUtil'

53
frontend/src/components/deIconPicker/utils/util.js Normal file
View File

@ -0,0 +1,53 @@
export const analyzingIconForIconfont = function(json) {
let font_family = ''
let css_prefix_text = ''
let list = []
if (json) {
if (json.font_family) {
font_family = json.font_family
}
if (json.css_prefix_text) {
css_prefix_text = json.css_prefix_text
}
if (json.glyphs) {
list = json.glyphs.map(function(value, index, array) {
return font_family + ' ' + css_prefix_text + value.font_class
})
}
}
return {
font_family,
css_prefix_text,
list
}
}
export const eIconSymbol = function(json) {
let font_family = ''
let css_prefix_text = ''
let list = []
if (json) {
if (json.font_family) {
font_family = json.font_family
}
if (json.css_prefix_text) {
css_prefix_text = json.css_prefix_text
}
if (json.glyphs) {
list = json.glyphs.map(function(value, index, array) {
return '#' + css_prefix_text + value.font_class
})
}
}
return {
font_family,
css_prefix_text,
list
}
}
export function isExternal(path) {
return /^(https?:|data:|\/\/?)/.test(path)
}
export const isServer = typeof window === 'undefined'

15
frontend/src/deicons/index.js Normal file
View File

@ -0,0 +1,15 @@
const req = require.context('./svg', false, /\.svg$/)
const requireAllFile = requireContext => requireContext.keys().map(requireContext)
requireAllFile(req)
const re = /\.\/(.*)\.svg/
const requireAll = requireContext => requireContext.keys()
const deSvgIcons = requireAll(req).map(i => {
return '#' + i.match(re)[1]
})
export default deSvgIcons

1
frontend/src/deicons/svg/ai37.svg Normal file
View File

@ -0,0 +1 @@
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg class="icon" width="200px" height="200.00px" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M423.731142 161.571862 423.731142 249.306043 713.416847 249.306043 160.428318 802.295596 221.877855 863.682711 774.803963 310.790372 774.803963 600.443331 862.637404 600.443331 862.637404 161.571862Z" /></svg>
Side by Side

After

Width:  |  Height:  |  Size: 476 B

1
frontend/src/deicons/svg/ai65.svg Normal file
View File

@ -0,0 +1 @@
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg class="icon" width="200px" height="200.00px" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M883.075899 428.228061l-267.119757-22.906709-104.369046-246.226914-104.363929 246.226914-267.122827 22.906709 202.63714 175.596274-60.72606 261.081227 229.575676-138.430816 229.577722 138.374534-60.780295-261.134439L883.075899 428.228061zM511.587096 656.715963 511.587096 311.183322l63.559595 149.966547 162.695452 14.038738-123.465986 106.871029 37.002752 158.998247L511.587096 656.715963z" /></svg>
Side by Side

After

Width:  |  Height:  |  Size: 667 B

1
frontend/src/deicons/svg/bumanyi.svg Normal file
View File

@ -0,0 +1 @@
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg class="icon" width="200px" height="200.00px" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M512 128c52 0 102.4 10.4 149.6 30.4 45.6 19.2 86.4 47.2 122.4 82.4s63.2 76 82.4 122.4c20 47.2 30.4 97.6 30.4 149.6s-10.4 102.4-30.4 149.6c-19.2 45.6-47.2 86.4-82.4 122.4s-76.8 63.2-122.4 82.4c-47.2 20-97.6 30.4-149.6 30.4s-102.4-10.4-149.6-30.4c-45.6-19.2-86.4-47.2-122.4-82.4s-63.2-76.8-82.4-122.4C138.4 614.4 128 564 128 512s10.4-102.4 30.4-149.6C177.6 316.8 204.8 276 240 240s76-63.2 122.4-82.4C409.6 138.4 460 128 512 128m0-64C264.8 64 64 264.8 64 512s200.8 448 448 448 448-200.8 448-448S759.2 64 512 64z" /><path d="M288 384c0 35.2 28.8 64 64 64s64-28.8 64-64-28.8-64-64-64-64 28.8-64 64zM608 384c0 35.2 28.8 64 64 64s64-28.8 64-64-28.8-64-64-64-64 28.8-64 64zM513.6 512.8c-46.4 0-92 15.2-132 44.8C344 585.6 312 624.8 289.6 672c-8 16-0.8 35.2 15.2 42.4 16 7.2 35.2 0.8 42.4-15.2 17.6-37.6 42.4-68.8 72-90.4C448 587.2 480 576 512.8 576s64.8 11.2 93.6 32.8c28.8 21.6 53.6 52.8 72 90.4 7.2 16 26.4 22.4 42.4 15.2 16-7.2 22.4-26.4 15.2-42.4-22.4-47.2-54.4-86.4-91.2-114.4-39.2-29.6-84.8-44.8-131.2-44.8z" /></svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.3 KiB

1
frontend/src/deicons/svg/chaping-yuankuang.svg Normal file
View File

@ -0,0 +1 @@
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg class="icon" width="200px" height="200.00px" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M512 64C264.8 64 64 264.8 64 512s200.8 448 448 448 448-200.8 448-448S759.2 64 512 64zM340.8 525.6c0 4.8-4 9.6-8.8 10.4l-64 2.4c-5.6 0.8-12-4-12-10.4V288c0-6.4 5.6-11.2 12.8-10.4l64 2.4c4.8 0.8 8.8 5.6 8.8 10.4v235.2z m424-2.4c0 35.2-31.2 32.8-31.2 32.8H596C644.8 749.6 566.4 768 566.4 768c-30.4 0-27.2-40.8-27.2-44C539.2 656 446.4 576 393.6 544c-5.6-3.2-9.6-9.6-9.6-16.8V299.2c0-10.4 8.8-19.2 19.2-19.2 60 0 284-21.6 284-21.6 17.6 0 32 49.6 32 49.6 47.2 171.2 45.6 215.2 45.6 215.2z" /></svg>
Side by Side

After

Width:  |  Height:  |  Size: 759 B

1
frontend/src/deicons/svg/chaping.svg Normal file
View File

@ -0,0 +1 @@
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg class="icon" width="200px" height="200.00px" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M320 189.6v343.2c0 10.4 5.6 20 14.4 25.6 80 48 220.8 168.8 220.8 271.2 0 4.8-5.6 66.4 40.8 66.4 0 0 118.4-28 44.8-320h208s48 4 48-48.8c0 0 2.4-66.4-68-324.8 0 0-21.6-74.4-48.8-74.4 0 0-340 32-430.4 32-16.8 0-29.6 12.8-29.6 29.6zM146.4 155.2l96 4c8 1.6 13.6 8 13.6 16v355.2c0 8-5.6 14.4-13.6 16l-96 3.2c-9.6 1.6-18.4-5.6-18.4-16V171.2c0-10.4 8.8-17.6 18.4-16z" /></svg>
Side by Side

After

Width:  |  Height:  |  Size: 635 B

1
frontend/src/deicons/svg/circle.svg Normal file
View File

@ -0,0 +1 @@
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg class="icon" width="200px" height="200.00px" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M62 512c0 248.528 201.472 450 450 450s450-201.472 450-450c0-248.528-201.472-450-450-450-248.528 0-450 201.472-450 450z" /></svg>
Side by Side

After

Width:  |  Height:  |  Size: 395 B

1
frontend/src/deicons/svg/cuowuguanbiquxiao-yuankuang.svg Normal file
View File

@ -0,0 +1 @@
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg class="icon" width="200px" height="200.00px" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M512 64C264.8 64 64 264.8 64 512s200.8 448 448 448 448-200.8 448-448S759.2 64 512 64z m238.4 641.6l-45.6 45.6L512 557.6 318.4 750.4l-45.6-45.6L467.2 512 273.6 318.4l45.6-45.6L512 467.2l193.6-193.6 45.6 45.6L557.6 512l192.8 193.6z" /></svg>
Side by Side

After

Width:  |  Height:  |  Size: 506 B

1
frontend/src/deicons/svg/five-star.svg Normal file
View File

@ -0,0 +1 @@
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg class="icon" width="200px" height="200.00px" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M512 63.34l141.072 285.815 315.433 45.84-228.24 222.503 53.879 314.185-282.144-148.368-282.144 148.368 53.879-314.185-228.24-222.503 315.433-45.84z" /></svg>
Side by Side

After

Width:  |  Height:  |  Size: 424 B

1
frontend/src/deicons/svg/gantanhao-yuankuang.svg Normal file
View File

@ -0,0 +1 @@
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg class="icon" width="200px" height="200.00px" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M512 64C264.8 64 64 264.8 64 512s200.8 448 448 448 448-200.8 448-448S759.2 64 512 64z m32 704h-64v-64h64v64z m-64-128V256h64v384h-64z" /></svg>
Side by Side

After

Width:  |  Height:  |  Size: 410 B

1
frontend/src/deicons/svg/haoping-yuankuang.svg Normal file
View File

@ -0,0 +1 @@
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg class="icon" width="200px" height="200.00px" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M512 64C264.8 64 64 264.8 64 512s200.8 448 448 448 448-200.8 448-448S759.2 64 512 64zM340.8 695.2c0 4.8-4 9.6-8.8 10.4l-64 2.4c-6.4 0.8-12.8-4-12.8-10.4v-240c0-6.4 5.6-11.2 12-10.4l64 2.4c4.8 0.8 8.8 5.6 8.8 10.4v235.2zM720 677.6s-14.4 49.6-32 49.6c0 0-224-21.6-284-21.6-10.4 0-19.2-8.8-19.2-19.2V458.4c0-7.2 3.2-13.6 9.6-16.8 52.8-32 145.6-112 145.6-180 0-3.2-4-44 27.2-44 0 0 78.4 18.4 29.6 212h136.8s31.2-3.2 31.2 32.8c0 0 1.6 44-44.8 215.2z" /></svg>
Side by Side

After

Width:  |  Height:  |  Size: 721 B

1
frontend/src/deicons/svg/haoping.svg Normal file
View File

@ -0,0 +1 @@
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg class="icon" width="200px" height="200.00px" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M320 834.4V491.2c0-10.4 5.6-20 14.4-25.6 79.2-48 220-168.8 220-271.2 0-4.8-5.6-66.4 40.8-66.4 0 0 118.4 28 44.8 320h208s47.2-4 47.2 48.8c0 0 2.4 66.4-67.2 324.8 0 0-21.6 74.4-48.8 74.4 0 0-340-32-431.2-32-15.2 0-28-13.6-28-29.6z m-173.6 34.4l96-4c8-1.6 13.6-8 13.6-16V494.4c0-8-5.6-14.4-13.6-16l-96-3.2c-9.6-1.6-18.4 5.6-18.4 16v361.6c-0.8 10.4 8 17.6 18.4 16z" /></svg>
Side by Side

After

Width:  |  Height:  |  Size: 637 B

1
frontend/src/deicons/svg/jiantou-copy-copy-2.svg Normal file
View File

@ -0,0 +1 @@
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg class="icon" width="200px" height="200.00px" viewBox="0 0 1000 1000" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M362.57 764.226h364.149c28.44 0 51.491-23.051 51.491-51.491v-364.149c0-28.44-23.051-51.491-51.491-51.491s-51.491 23.051-51.491 51.491v239.829l-349.073-349.073c-20.119-20.119-52.711-20.119-72.831 0s-20.119 52.711 0 72.831l349.073 349.073h-239.829c-14.202-0.001-27.093 5.754-36.415 15.076s-15.094 22.195-15.076 36.415c0 28.44 23.051 51.491 51.491 51.491z" /></svg>
Side by Side

After

Width:  |  Height:  |  Size: 629 B

1
frontend/src/deicons/svg/jiantou-copy-copy-copy.svg Normal file
View File

@ -0,0 +1 @@
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg class="icon" width="200px" height="200.00px" viewBox="0 0 1000 1000" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M661.43 259.774h-364.149c-28.44 0-51.491 23.051-51.491 51.491v364.149c0 28.44 23.051 51.491 51.491 51.491s51.491-23.051 51.491-51.491v-239.829l349.073 349.073c20.119 20.119 52.711 20.119 72.831 0s20.119-52.711 0-72.831l-349.073-349.073h239.829c14.202 0.001 27.093-5.754 36.415-15.076s15.094-22.195 15.076-36.415c0-28.44-23.051-51.491-51.491-51.491z" /></svg>
Side by Side

After

Width:  |  Height:  |  Size: 625 B

1
frontend/src/deicons/svg/jiantou-copy-copy.svg Normal file
View File

@ -0,0 +1 @@
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg class="icon" width="200px" height="200.00px" viewBox="0 0 1000 1000" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M259.774 362.57v364.149c0 28.44 23.051 51.491 51.491 51.491h364.149c28.44 0 51.491-23.051 51.491-51.491s-23.051-51.491-51.491-51.491h-239.829l349.073-349.073c20.119-20.119 20.119-52.711 0-72.831s-52.711-20.119-72.831 0l-349.073 349.073v-239.829c0.001-14.202-5.754-27.093-15.076-36.415s-22.195-15.094-36.415-15.076c-28.44 0-51.491 23.051-51.491 51.491z" /></svg>
Side by Side

After

Width:  |  Height:  |  Size: 628 B

1
frontend/src/deicons/svg/lingxing.svg Normal file
View File

@ -0,0 +1 @@
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg class="icon" width="200px" height="200.00px" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M512 69.479l442.498 442.498-442.498 442.498-442.498-442.498 442.498-442.498z" /></svg>
Side by Side

After

Width:  |  Height:  |  Size: 353 B

1
frontend/src/deicons/svg/manyi.svg Normal file
View File

@ -0,0 +1 @@
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg class="icon" width="200px" height="200.00px" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M512 128c52 0 102.4 10.4 149.6 30.4 45.6 19.2 86.4 47.2 122.4 82.4s63.2 76 82.4 122.4c20 47.2 30.4 97.6 30.4 149.6s-10.4 102.4-30.4 149.6c-19.2 45.6-47.2 86.4-82.4 122.4s-76.8 63.2-122.4 82.4c-47.2 20-97.6 30.4-149.6 30.4s-102.4-10.4-149.6-30.4c-45.6-19.2-86.4-47.2-122.4-82.4s-63.2-76.8-82.4-122.4C138.4 614.4 128 564 128 512s10.4-102.4 30.4-149.6C177.6 316.8 204.8 276 240 240s76-63.2 122.4-82.4C409.6 138.4 460 128 512 128m0-64C264.8 64 64 264.8 64 512s200.8 448 448 448 448-200.8 448-448S759.2 64 512 64zM288 384c0 35.2 28.8 64 64 64s64-28.8 64-64-28.8-64-64-64-64 28.8-64 64z m320 0.8c0 35.2 28.8 64 64 64s64-28.8 64-64-28.8-64-64-64-64 28-64 64zM512 768c46.4 0 92-15.2 132-44.8 37.6-28 68.8-67.2 91.2-114.4 8-16 0.8-35.2-15.2-42.4-16-8-35.2-0.8-42.4 15.2-17.6 37.6-43.2 68.8-72 90.4-28 20.8-60.8 32-93.6 32s-64.8-11.2-93.6-32.8c-28.8-21.6-53.6-52.8-72-90.4-8-16-27.2-22.4-42.4-15.2-16 8-22.4 26.4-15.2 42.4 22.4 47.2 54.4 86.4 91.2 114.4 40 30.4 85.6 45.6 132 45.6z" /></svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.2 KiB

1
frontend/src/deicons/svg/paixu.svg Normal file
View File

@ -0,0 +1 @@
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg class="icon" width="200px" height="200.00px" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M564.224 44.032q43.008 0 58.368 20.48t15.36 65.536q0 20.48 0.512 64.512t0.512 93.696 0.512 96.768 0.512 74.752q0 38.912 7.68 61.952t35.328 22.016q19.456 0 48.128 1.024t49.152 1.024q35.84 0 45.568 18.944t-13.824 49.664q-24.576 30.72-57.344 72.704t-68.096 86.016-69.12 86.528-59.392 75.264q-23.552 29.696-45.568 30.72t-45.568-27.648q-24.576-29.696-57.344-69.632t-67.072-82.432-67.584-83.968-59.904-74.24q-29.696-35.84-22.528-58.88t44.032-23.04l24.576 0q14.336 0 29.696-0.512t30.208-1.536 26.112-1.024q26.624 0 32.768-15.36t6.144-41.984q0-29.696-0.512-77.824t-0.512-100.352-0.512-101.376-0.512-79.872q0-13.312 2.048-27.648t9.728-26.112 20.992-19.456 36.864-7.68q27.648 0 53.248-0.512t57.344-0.512z" /></svg>
Side by Side

After

Width:  |  Height:  |  Size: 971 B

1
frontend/src/deicons/svg/qizi.svg Normal file
View File

@ -0,0 +1 @@
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg class="icon" width="200px" height="200.00px" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M152.474 62.225c-26.856 0-56.286 21.748-56.286 48.663v802.451c0 26.798 28.773 48.653 55.579 48.653 26.789 0 56.286-21.857 56.286-48.663v-802.434c0-26.914-28.78-48.663-55.579-48.663zM730.146 129.011c-157.836 0-157.836-64.694-315.663-64.694-91.108 0-161.46 42.504-161.46 42.504l-0.658 484.313s71.010-42.446 162.119-42.446c157.827 0 157.827 64.694 315.663 64.694 98.74 0 197.923-51.845 197.923-51.845v-484.264s-99.183 51.737-197.923 51.737z" /></svg>
Side by Side

After

Width:  |  Height:  |  Size: 714 B

1
frontend/src/deicons/svg/rect.svg Normal file
View File

@ -0,0 +1 @@
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg class="icon" width="200px" height="200.00px" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M62 62h900v900h-900v-900z" /></svg>
Side by Side

After

Width:  |  Height:  |  Size: 302 B

1
frontend/src/deicons/svg/shangjiantou.svg Normal file
View File

@ -0,0 +1 @@
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg class="icon" width="200px" height="200.00px" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M65.582671 735.208665l446.417329-446.41733 446.417329 446.41733z" /></svg>
Side by Side

After

Width:  |  Height:  |  Size: 341 B

1
frontend/src/deicons/svg/weizhi.svg Normal file
View File

@ -0,0 +1 @@
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg class="icon" width="200px" height="200.00px" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M512 64C306.4 64 140 230.4 140 436c0 101.6 40.8 194.4 107.2 261.6L512 960l264-263.2c66.4-67.2 107.2-159.2 107.2-261.6C884 230.4 717.6 64 512 64z m128 331.2c-4.8 62.4-54.4 112-116.8 116.8-75.2 6.4-138.4-53.6-138.4-127.2 0-70.4 57.6-128 128-128 73.6 0 133.6 63.2 127.2 138.4z" /></svg>
Side by Side

After

Width:  |  Height:  |  Size: 550 B

1
frontend/src/deicons/svg/wenhao-yuankuang.svg Normal file
View File

@ -0,0 +1 @@
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg class="icon" width="200px" height="200.00px" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M512 64C264.8 64 64 264.8 64 512s200.8 448 448 448 448-200.8 448-448S759.2 64 512 64z m32 704h-64v-64h64v64z m11.2-203.2l-5.6 4.8c-3.2 2.4-5.6 8-5.6 12.8v58.4h-64v-58.4c0-24.8 11.2-48 29.6-63.2l5.6-4.8c56-44.8 83.2-68 83.2-108C598.4 358.4 560 320 512 320c-49.6 0-86.4 36.8-86.4 86.4h-64C361.6 322.4 428 256 512 256c83.2 0 150.4 67.2 150.4 150.4 0 72.8-49.6 112.8-107.2 158.4z" /></svg>
Side by Side

After

Width:  |  Height:  |  Size: 652 B

1
frontend/src/deicons/svg/wujiaoxing.svg Normal file
View File

@ -0,0 +1 @@
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg class="icon" width="200px" height="200.00px" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M509.867 189.867L608 411.733l243.2 25.6-181.333 162.134 51.2 238.933-211.2-121.6-211.2 121.6 51.2-238.933L168.533 435.2l243.2-25.6 98.134-219.733z" /></svg>
Side by Side

After

Width:  |  Height:  |  Size: 423 B

1
frontend/src/deicons/svg/xiajiantou.svg Normal file
View File

@ -0,0 +1 @@
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg class="icon" width="200px" height="200.00px" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M65.582671 288.791335l446.417329 446.41733 446.417329-446.41733z" /></svg>
Side by Side

After

Width:  |  Height:  |  Size: 341 B

1
frontend/src/deicons/svg/xiangshang.svg Normal file
View File

@ -0,0 +1 @@
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg class="icon" width="200px" height="200.00px" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M470.016 976.896q-44.032 0-59.392-20.48t-15.36-65.536q0-20.48-0.512-64.512t-1.024-93.696-1.536-96.768-1.024-74.752q0-39.936-7.68-62.464t-35.328-21.504q-20.48 0-48.64-1.024t-49.664 0q-35.84 0-45.568-19.456t13.824-50.176q24.576-30.72 57.344-72.704t67.584-86.016 68.096-87.04 58.88-75.776q23.552-29.696 45.568-30.72t46.592 26.624q24.576 29.696 56.832 69.632t67.072 82.432 68.608 83.968 60.416 73.216q29.696 35.84 23.04 58.88t-43.52 23.04q-11.264 0-25.088 0.512t-29.184 1.024-30.208 1.024-27.136 0.512q-25.6 1.024-32.256 16.384t-5.632 41.984q0 29.696 0.512 77.824t1.024 100.352 1.536 101.376 1.024 79.872q0 13.312-2.048 27.648t-9.728 26.112-21.504 19.968-36.352 8.192q-27.648 0-52.736 0.512t-56.832 1.536z" /></svg>
Side by Side

After

Width:  |  Height:  |  Size: 978 B

1
frontend/src/deicons/svg/xiangyou.svg Normal file
View File

@ -0,0 +1 @@
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg class="icon" width="200px" height="200.00px" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M47.104 453.632q0-43.008 20.992-57.856t66.048-14.848q20.48 0 64.512 0.512t93.696 0.512 96.768 0.512 74.752 0.512q38.912 1.024 61.44-6.656t22.528-35.328q0-20.48 1.536-48.64t1.536-48.64q1.024-35.84 20.48-45.568t49.152 14.848q30.72 24.576 71.68 58.368t84.992 69.12 86.016 69.632 74.752 59.904q29.696 24.576 30.208 46.592t-28.16 45.568q-29.696 24.576-70.144 56.32t-83.968 65.536-85.504 67.072-74.752 58.88q-35.84 28.672-58.88 21.504t-22.016-44.032l0-24.576 0-29.696q0-15.36-0.512-30.208t-0.512-27.136q0-25.6-15.36-32.256t-41.984-6.656q-29.696 0-77.824-0.512t-100.352-0.512-101.376-0.512-79.872-0.512q-13.312 0-27.648-2.56t-26.112-9.728-18.944-20.992-7.168-37.376q0-27.648-0.512-53.248t0.512-57.344z" /></svg>
Side by Side

After

Width:  |  Height:  |  Size: 971 B

1
frontend/src/deicons/svg/xiangzuo.svg Normal file
View File

@ -0,0 +1 @@
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg class="icon" width="200px" height="200.00px" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M966.656 567.296q0 43.008-20.48 58.368t-65.536 15.36l-64.512 0q-44.032 0-93.696 0.512t-96.768 0.512l-74.752 0q-38.912 0-61.952 7.68t-22.016 35.328q0 20.48-1.024 48.64t-1.024 49.664q0 35.84-19.456 45.568t-50.176-13.824q-30.72-24.576-72.704-57.856t-85.504-68.096-86.016-68.608-75.264-59.392q-30.72-24.576-31.232-46.592t28.16-45.568q28.672-24.576 68.608-56.832t82.944-66.56 84.48-68.096 74.24-60.416q35.84-28.672 58.88-22.016t23.04 43.52l0 25.6q0 14.336 0.512 29.696t1.024 30.208 0.512 26.112q1.024 25.6 16.384 32.256t41.984 6.656q29.696 0 77.824-0.512t100.352-0.512 101.376-0.512 79.872-0.512q13.312 0 27.648 2.048t26.112 9.728 19.456 21.504 7.68 36.352q0 27.648 0.512 53.248t0.512 57.344z" /></svg>
Side by Side

After

Width:  |  Height:  |  Size: 964 B

1
frontend/src/deicons/svg/yiban.svg Normal file
View File

@ -0,0 +1 @@
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg class="icon" width="200px" height="200.00px" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M512 128c52 0 102.4 10.4 149.6 30.4 45.6 19.2 86.4 47.2 122.4 82.4s63.2 76 82.4 122.4c20 47.2 30.4 97.6 30.4 149.6s-10.4 102.4-30.4 149.6c-19.2 45.6-47.2 86.4-82.4 122.4s-76.8 63.2-122.4 82.4c-47.2 20-97.6 30.4-149.6 30.4s-102.4-10.4-149.6-30.4c-45.6-19.2-86.4-47.2-122.4-82.4s-63.2-76.8-82.4-122.4C138.4 614.4 128 564 128 512s10.4-102.4 30.4-149.6C177.6 316.8 204.8 276 240 240s76-63.2 122.4-82.4C409.6 138.4 460 128 512 128m0-64C264.8 64 64 264.8 64 512s200.8 448 448 448 448-200.8 448-448S759.2 64 512 64zM288 384c0 35.2 28.8 64 64 64s64-28.8 64-64-28.8-64-64-64-64 28-64 64z m320 0c0 35.2 28.8 64 64 64s64-28.8 64-64-28.8-64-64-64-64 28.8-64 64z m96 288c0-17.6-14.4-32-32-32H352c-17.6 0-32 14.4-32 32s14.4 32 32 32h320c17.6 0 32-14.4 32-32z" /></svg>
Side by Side

After

Width:  |  Height:  |  Size: 1021 B

1
frontend/src/deicons/svg/youjiantou.svg Normal file
View File

@ -0,0 +1 @@
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg class="icon" width="200px" height="200.00px" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M288.791335 65.582671l446.41733 446.417329-446.41733 446.417329z" /></svg>
Side by Side

After

Width:  |  Height:  |  Size: 341 B

1
frontend/src/deicons/svg/zheng-triangle.svg Normal file
View File

@ -0,0 +1 @@
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg class="icon" width="200px" height="200.00px" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M71.675 893.33l440.325-762.683 440.325 762.683z" /></svg>
Side by Side

After

Width:  |  Height:  |  Size: 324 B

1
frontend/src/deicons/svg/zhengquewancheng-yuankuang.svg Normal file
View File

@ -0,0 +1 @@
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg class="icon" width="200px" height="200.00px" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M512 64C264.8 64 64 264.8 64 512s200.8 448 448 448 448-200.8 448-448S759.2 64 512 64zM428 718.4l-45.6 45.6-45.6-45.6-116-117.6 45.6-45.6L383.2 672l367.2-367.2 45.6 45.6-368 368z" /></svg>
Side by Side

After

Width:  |  Height:  |  Size: 454 B

1
frontend/src/deicons/svg/zuojiantou.svg Normal file
View File

@ -0,0 +1 @@
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg class="icon" width="200px" height="200.00px" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M735.208665 65.582671l-446.41733 446.417329 446.41733 446.417329z" /></svg>
Side by Side

After

Width:  |  Height:  |  Size: 342 B

22
frontend/src/deicons/svgo.yml Normal file
View File

@ -0,0 +1,22 @@
# replace default config
# multipass: true
# full: true
plugins:
# - name
#
# or:
# - name: false
# - name: true
#
# or:
# - name:
# param1: 1
# param2: 2
- removeAttrs:
attrs:
- 'fill'
- 'fill-rule'

6
frontend/src/lang/en.js
View File

@ -931,6 +931,12 @@ export default {
password_input_error: 'Original password input error' password_input_error: 'Original password input error'
}, },
chart: { chart: {
mark_field: 'Field',
mark_value: 'Value',
function_style: 'Function style',
condition_style: 'Mark style',
longitude: 'Longitude',
latitude: 'Latitude',
gradient: 'Gradient', gradient: 'Gradient',
layer_controller: 'Quota switch', layer_controller: 'Quota switch',
suspension: 'Suspension', suspension: 'Suspension',

6
frontend/src/lang/tw.js
View File

@ -930,6 +930,12 @@ export default {
password_input_error: '原始密碼輸入錯誤' password_input_error: '原始密碼輸入錯誤'
}, },
chart: { chart: {
mark_field: '字段',
mark_value: '值',
function_style: '功能型樣式',
condition_style: '標記樣式',
longitude: '經度',
latitude: '緯度',
gradient: '漸變', gradient: '漸變',
layer_controller: '指標切換', layer_controller: '指標切換',
suspension: '懸浮', suspension: '懸浮',

6
frontend/src/lang/zh.js
View File

@ -929,6 +929,12 @@ export default {
password_input_error: '原始密码输入错误' password_input_error: '原始密码输入错误'
}, },
chart: { chart: {
mark_field: '字段',
mark_value: '值',
function_style: '功能型样式',
condition_style: '标记样式',
longitude: '经度',
latitude: '纬度',
gradient: '渐变', gradient: '渐变',
layer_controller: '指标切换', layer_controller: '指标切换',
suspension: '悬浮', suspension: '悬浮',

18
frontend/src/views/chart/chart/chart.js
View File

@ -132,6 +132,11 @@ export const DEFAULT_SIZE = {
export const DEFAULT_SUSPENSION = { export const DEFAULT_SUSPENSION = {
show: true show: true
} }
export const DEFAULT_MARK = {
fieldId: '',
conditions: []
}
export const DEFAULT_LABEL = { export const DEFAULT_LABEL = {
show: false, show: false,
position: 'top', position: 'top',
@ -892,14 +897,25 @@ export const BASE_MAP = {
inRange: { inRange: {
color: ['lightskyblue', 'yellow', 'orangered'] color: ['lightskyblue', 'yellow', 'orangered']
}, },
seriesIndex: 0,
textStyle: {}, textStyle: {},
right: 0 right: 0
}, },
geo: {
map: 'MAP',
roam: true,
nameMap: {
},
itemStyle: {
}
},
series: [ series: [
{ {
name: '', name: '',
type: 'map', type: 'map',
map: 'MAP', geoIndex: 0,
roam: true, roam: true,
data: [], data: [],
itemStyle: { itemStyle: {

172
frontend/src/views/chart/chart/map/map.js
View File

@ -159,7 +159,80 @@ export function baseMapOption(chart_option, chart, themeStyle, curAreaCode, seri
if (chart.senior) { if (chart.senior) {
const senior = JSON.parse(chart.senior) const senior = JSON.parse(chart.senior)
senior && senior.mapMapping && senior.mapMapping[curAreaCode] && (chart_option.series[0].nameMap = senior.mapMapping[curAreaCode]) senior && senior.mapMapping && senior.mapMapping[curAreaCode] && (chart_option.geo.nameMap = senior.mapMapping[curAreaCode])
}
if (chart.data?.detailFields?.length > 1) {
const deNameArray = ['x', 'y']
chart.data.detailFields.forEach(item => {
if (item?.busiType === 'locationXaxis') {
deNameArray[0] = item
} else if (item?.busiType === 'locationYaxis') {
deNameArray[1] = item
} else {
deNameArray.push(item)
}
})
let markData = []
chart.data.tableRow.forEach(row => {
if (row?.details) {
markData = markData.concat(row.details.map(detail => {
const temp = deNameArray.map(key => detail[key.dataeaseName])
temp.push(1)
return temp
}))
}
})
if (markData.length) {
let valueIndex = -1
const markCondition = customAttr.mark
if (markCondition?.fieldId && markCondition.conditions?.length) {
for (let i = 0; i < deNameArray.length; i++) {
if (deNameArray[i].id === markCondition.fieldId) {
valueIndex = i
break
}
}
}
const markSeries = {
type: 'scatter',
coordinateSystem: 'geo',
geoIndex: 0,
symbolSize: function(params) {
return 20
},
symbol: (values, param) => {
if (valueIndex < 0) {
return svgPathData()
}
const val = values[valueIndex]
const field = deNameArray[valueIndex]
const con = getSvgCondition(val, field, markCondition.conditions)
let svgName = null
if (con) {
svgName = con.icon
if (svgName && svgName.startsWith('#')) {
svgName = svgName.substr(1)
}
}
return svgPathData(svgName)
},
itemStyle: {
color: params => {
const { value } = params
const val = value[valueIndex]
const con = getSvgCondition(val, null, markCondition.conditions)
return con?.color || '#b02a02'
}
},
encode: {
tooltip: 2
},
data: markData
}
chart_option.series.push(markSeries)
}
} }
} }
} }
@ -167,3 +240,100 @@ export function baseMapOption(chart_option, chart, themeStyle, curAreaCode, seri
return chart_option return chart_option
} }
const getSvgCondition = (val, field, conditions) => {
for (let i = 0; i < conditions.length; i++) {
const condition = conditions[i]
if (conditionMatch(condition, val)) {
return condition
}
}
return null
}
const conditionMatch = (condition, curVal) => {
let matchResult = false
const { calc, value, startv, endv } = condition
if (!curVal || (!value && !startv && !endv)) {
return matchResult
}
switch (calc) {
case 'eq':
matchResult = curVal === value
break
case 'ne':
matchResult = curVal !== value
break
case 'contain':
matchResult = curVal.includes(value)
break
case 'uncontain':
matchResult = !curVal.includes(value)
break
case 'start':
matchResult = curVal.startsWith(value)
break
case 'end':
matchResult = curVal.endsWith(value)
break
case 'gt':
matchResult = parseFloat(curVal) > parseFloat(value)
break
case 'ge':
matchResult = parseFloat(curVal) >= parseFloat(value)
break
case 'lt':
matchResult = parseFloat(curVal) < parseFloat(value)
break
case 'le':
matchResult = parseFloat(curVal) <= parseFloat(value)
break
case 'between':
if (startv) {
matchResult = parseFloat(curVal) >= parseFloat(startv)
}
if (endv) {
matchResult = parseFloat(curVal) <= parseFloat(endv)
}
break
default:
matchResult = false
break
}
return matchResult
}
const loadXML = xmlString => {
const domParser = new DOMParser()
const xmlDoc = domParser.parseFromString(xmlString, 'text/xml')
return xmlDoc
}
const svgPathData = iconName => {
iconName = iconName || 'weizhi'
const defaultNode = require(`@/deicons/svg/${iconName}.svg`).default
if (!defaultNode?.content) return null
const content = defaultNode.content
const xmlRoot = loadXML(content)
const pathDataList = []
const stack = []
stack.push(xmlRoot)
let curNode
while (stack.length) {
curNode = stack.pop()
if (curNode?.tagName === 'path') {
pathDataList.push(curNode.getAttribute('d'))
}
if (curNode.childNodes?.length) {
let childLen = curNode.childNodes.length
while (childLen--) {
stack.push(curNode.childNodes[childLen])
}
}
}
if (pathDataList.length) {
return pathDataList.map(item => 'path://' + item).join('')
}
return null
}

6
frontend/src/views/chart/chart/util.js
View File

@ -3170,7 +3170,8 @@ export const TYPE_CONFIGS = [
'label-selector', 'label-selector',
'tooltip-selector', 'tooltip-selector',
'title-selector', 'title-selector',
'suspension-selector' 'suspension-selector',
'condition-style-selector'
], ],
propertyInner: { propertyInner: {
@ -3207,6 +3208,9 @@ export const TYPE_CONFIGS = [
], ],
'suspension-selector': [ 'suspension-selector': [
'show' 'show'
],
'condition-style-selector': [
'show'
] ]
} }
} }

154
frontend/src/views/chart/components/dragItem/DetailItem.vue Normal file
View File

@ -0,0 +1,154 @@
<template>
<span style="position: relative;display: inline-block;">
<i
class="el-icon-arrow-down el-icon-delete"
style="position: absolute;top: 6px;right: 4px;color: #878d9f;cursor: pointer;z-index: 1;"
@click="removeItem"
/>
<span class="el-dropdown-link">
<el-tag
size="small"
class="item-axis"
:type="tagType"
>
<span style="float: left">
<svg-icon
v-if="item.deType === 0"
icon-class="field_text"
class="field-icon-text"
/>
<svg-icon
v-if="item.deType === 1"
icon-class="field_time"
class="field-icon-time"
/>
<svg-icon
v-if="item.deType === 2 || item.deType === 3"
icon-class="field_value"
class="field-icon-value"
/>
<svg-icon
v-if="item.deType === 5"
icon-class="field_location"
class="field-icon-location"
/>
</span>
<span
class="item-span-style"
:title="item.name"
>{{ item.name }}</span>
<field-error-tips v-if="tagType === 'danger'" />
</el-tag>
</span>
</span>
</template>
<script>
import { getItemType } from '@/views/chart/components/dragItem/utils'
import FieldErrorTips from '@/views/chart/components/dragItem/components/FieldErrorTips'
import bus from '@/utils/bus'
export default {
name: 'LocationEditor',
components: { FieldErrorTips },
props: {
param: {
type: Object,
required: true
},
item: {
type: Object,
required: true
},
index: {
type: Number,
required: true
},
dimensionData: {
type: Array,
required: true
},
quotaData: {
type: Array,
required: true
}
},
data() {
return {
tagType: 'success'
}
},
watch: {
dimensionData: function() {
this.getItemTagType()
},
quotaData: function() {
this.getItemTagType()
},
item: function() {
this.getItemTagType()
}
},
mounted() {
bus.$on('reset-change-table', this.getItemTagType)
},
beforeDestroy() {
bus.$off('reset-change-table', this.getItemTagType)
},
methods: {
removeItem() {
this.item.index = this.index
this.$emit('onDetailItemRemove', this.item)
},
getItemTagType() {
this.tagType = getItemType(this.dimensionData, this.quotaData, this.item)
}
}
}
</script>
<style scoped>
.item-axis {
padding: 1px 6px;
margin: 0 3px 2px 3px;
text-align: left;
height: 24px;
line-height: 22px;
display: flex;
border-radius: 4px;
box-sizing: border-box;
white-space: nowrap;
width: 159px;
}
.item-axis:hover {
background-color: #fdfdfd;
cursor: pointer;
}
span {
font-size: 12px;
}
.summary-span{
margin-left: 4px;
color: #878d9f;;
}
.inner-dropdown-menu{
display: flex;
justify-content: space-between;
align-items: center;
width: 100%
}
.item-span-style{
display: inline-block;
width: 115px;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
</style>

403
frontend/src/views/chart/components/functionStyle/MapMarkSelector.vue Normal file
View File

@ -0,0 +1,403 @@
<template>
<div style="width: 100%;">
<el-col>
<el-form
ref="markForm"
:model="markForm"
label-width="40px"
size="mini"
>
<el-form-item
class="form-item"
:label="$t('chart.mark_field')"
>
<el-select
v-model="markForm.fieldId"
style="width: 100%;"
clearable
:placeholder="($t('commons.please_select') + $t('chart.mark_field'))"
@change="changeFields"
>
<el-option-group
v-for="group in fieldOptions"
:key="group.label"
:label="group.label"
>
<el-option
v-for="item in group.options"
:key="item.id"
:label="item.name"
:value="item.id"
:disabled="item.disabled"
/>
</el-option-group>
</el-select>
</el-form-item>
<el-form-item
v-for="(condition, index) in markForm.conditions"
:key="index"
:label="$t('chart.mark_value')"
class="form-item"
>
<el-col
class="col-start"
:span="6"
>
<el-select
v-model="condition.calc"
placeholder="请选择"
@change="changeMarkAttr('conditions')"
>
<el-option
v-for="item in currentCalcOption"
:key="item.value"
:label="item.label"
:value="item.value"
/>
</el-select>
</el-col>
<el-col
v-if="condition.calc === 'between'"
class="col-center"
:span="10"
>
<el-input
v-model="condition.startv"
class="number-range-input"
placeholder=""
@input="changeMarkAttr('conditions')"
/>
<span
class="number-range-span"
style="padding: 0 2px;"
>-</span>
<el-input
v-model="condition.endv"
class="number-range-input"
placeholder=""
@input="changeMarkAttr('conditions')"
/>
</el-col>
<el-col
v-else
class="col-center"
:span="10"
>
<el-input
v-model="condition.value"
placeholder=""
@input="changeMarkAttr('conditions')"
/>
</el-col>
<el-col
class="col-center"
:span="6"
>
<de-icon-picker
v-model="condition.icon"
:options="iconOptions"
:color="condition.color"
size="mini"
@change="changeMarkAttr('conditions')"
@set-color="c => {setConditionColor(index, c)}"
/>
</el-col>
<el-col
class="col-end"
:span="2"
>
<div>
<div
v-if="markForm.conditions.length > 1"
class="i-row-container"
:class="index === (markForm.conditions.length - 1) ? 'flex-column': ''"
>
<i
class="ope-item el-icon-minus"
@click.stop="del(index)"
/>
</div>
<div
v-if="index === (markForm.conditions.length - 1)"
class="i-row-container"
:class="markForm.conditions.length > 1 ? 'flex-column': ''"
>
<i
class="ope-item el-icon-plus"
@click.stop="add"
/>
</div>
</div>
</el-col>
</el-form-item>
</el-form>
</el-col>
</div>
</template>
<script>
import { DEFAULT_MARK } from '../../chart/chart'
import DeIconPicker from '@/components/deIconPicker'
import deSvgIcons from '@/deicons'
export default {
name: 'MapMarkSelector',
components: { DeIconPicker },
props: {
param: {
type: Object,
required: true
},
chart: {
type: Object,
required: true
},
dimensionData: {
type: Array,
required: true
},
quotaData: {
type: Array,
required: true
},
view: {
type: Object,
required: true
}
},
data() {
return {
markForm: JSON.parse(JSON.stringify(DEFAULT_MARK)),
values: null,
calcOptions: [{
value: 'eq',
label: '等于',
type: 'String'
}, {
value: 'contain',
label: '包含',
type: 'String'
}, {
value: 'uncontain',
label: '不包含',
type: 'String'
}, {
value: 'start',
label: '开头是',
type: 'String'
}, {
value: 'end',
label: '结尾是',
type: 'String'
}, {
value: 'eq',
label: '=',
type: 'Number'
}, {
value: 'ne',
label: '!=',
type: 'Number'
}, {
value: 'gt',
label: '>',
type: 'Number'
}, {
value: 'ge',
label: '>=',
type: 'Number'
}, {
value: 'lt',
label: '<',
type: 'Number'
}, {
value: 'le',
label: '<=',
type: 'Number'
}, {
value: 'between',
label: 'between',
type: 'Number'
}
],
iconOptions: {
FontAwesome: false,
ElementUI: false,
addIconList: [],
removeIconList: []
}
}
},
computed: {
fieldOptions() {
const xaxis = this.view.xaxis
const yaxis = this.view.yaxis
const locationIds = this.view.viewFields.filter(item => item.busiType === 'locationXaxis' || item.busiType === 'locationYaxis').map(item => item.id)
const xIds = xaxis ? xaxis.map(item => item.id) : []
const yIds = yaxis ? yaxis.map(item => item.id) : []
const disableIds = [...xIds, ...yIds, ...locationIds]
return [
{
label: this.$t('chart.dimension'),
options: this.dimensionData && this.dimensionData.map(item => {
item.disabled = disableIds.includes(item.id)
return item
})
},
{
label: this.$t('chart.quota'),
options: this.quotaData && this.quotaData.map(item => {
item.disabled = disableIds.includes(item.id)
return item
})
}
]
},
currentCalcOption() {
const field = this.getField(this.markForm.fieldId)
if (!field) {
return []
}
const numberType = [2, 3]
const excludeCalcType = numberType.includes(field.deType) ? 'String' : 'Number'
return this.calcOptions.filter(option => option.type !== excludeCalcType)
}
},
watch: {
'chart': {
handler: function() {
this.initData()
}
}
},
mounted() {
this.initData()
this.loadSvg()
},
methods: {
setConditionColor(index, color) {
this.markForm.conditions[index].color = color
this.changeMarkAttr('conditions')
},
loadSvg() {
this.iconOptions.addIconList = [...this.iconOptions.addIconList, ...deSvgIcons]
},
initData() {
const chart = JSON.parse(JSON.stringify(this.chart))
if (chart.customAttr) {
let customAttr = null
if (Object.prototype.toString.call(chart.customAttr) === '[object Object]') {
customAttr = JSON.parse(JSON.stringify(chart.customAttr))
} else {
customAttr = JSON.parse(chart.customAttr)
}
if (customAttr.mark) {
this.markForm = customAttr.mark
}
}
},
add() {
const newRow = {
fieldId: this.markForm.fieldId,
calc: 'eq',
value: '',
icon: '',
color: 'rgba(255, 0, 0, 1)'
}
this.markForm.conditions.push(newRow)
},
del(index) {
this.markForm.conditions.splice(index, 1)
this.changeMarkAttr('modifyName')
},
changeMarkAttr(modifyName) {
this.markForm['modifyName'] = modifyName
this.$emit('onMarkChange', this.markForm)
},
getField(fieldId) {
const fields = [...JSON.parse(JSON.stringify(this.dimensionData)), ...JSON.parse(JSON.stringify(this.quotaData))]
return fields.find(item => item.id === fieldId)
},
changeFields(fieldId) {
const baseConditions = [
{
fieldId: fieldId,
calc: 'eq',
value: '',
icon: '',
color: 'rgba(255, 0, 0, 1.0)'
}
]
this.view.viewFields = this.view.viewFields.filter(item => item.busiType !== 'daxis')
if (fieldId) {
this.markForm.conditions = JSON.parse(JSON.stringify(baseConditions))
const field = this.getField(fieldId)
if (field) {
field.busiType = 'daxis'
this.view.viewFields.push(field)
}
} else {
this.markForm.conditions = []
}
this.changeMarkAttr('fieldId')
}
}
}
</script>
<style lang="scss" scoped>
.color-picker-style{
cursor: pointer;
z-index: 1003;
}
.col-end {
text-align: end;
}
.col-center {
padding: 0 5px;
}
.ope-item {
height: 100%;
line-height: 100%;
background-color: #FFFFFF;
background-image: none;
border: 1px solid #DCDFE6;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.i-row-container {
width: 15px;
font-size: 12px !important;
float: right;
i {
cursor: pointer;
&:hover {
color: var(--primary, #3370ff);
border-color: var(--primary, #3370ff);
}
}
}
.flex-column {
display: flex;
flex: none;
flex-direction: column;
}
.number-range-input {
width: 45%;
}
.number-range-span {
padding: 0 2px;
}
</style>

669
frontend/src/views/chart/components/map/MarkMapDataEditor.vue Normal file
View File

@ -0,0 +1,669 @@
<template>
<div>
<el-row
class="padding-lr"
>
<span class="data-area-label">
<span>{{ $t('chart.longitude') }}</span>
<span> / </span>
<span> {{ $t('chart.dimension') }}</span>
<i
class="el-icon-arrow-down el-icon-delete data-area-clear"
@click="clearData('locationXaxis')"
/>
</span>
<draggable
v-model="busiFieldMap.locationXaxis"
group="drag"
animation="300"
:move="onMove"
class="drag-block-style"
@add="addLocationXaxis"
@update="calcData(true)"
>
<transition-group class="draggable-group">
<detail-item
v-for="(item,index) in busiFieldMap.locationXaxis"
:key="item.id"
:param="param"
:index="index"
:item="item"
:dimension-data="dimension"
:quota-data="quota"
@onDetailItemRemove="locationXItemRemove"
/>
</transition-group>
</draggable>
<div
v-if="!busiFieldMap.locationXaxis || busiFieldMap.locationXaxis.length === 0"
class="drag-placeholder-style"
>
<span class="drag-placeholder-style-span">{{ $t('chart.placeholder_field') }}</span>
</div>
</el-row>
<el-row
class="padding-lr"
>
<span class="data-area-label">
<span>{{ $t('chart.latitude') }} / {{ $t('chart.dimension') }}</span>
<i
class="el-icon-arrow-down el-icon-delete data-area-clear"
@click="clearData('locationYaxis')"
/>
</span>
<draggable
v-model="busiFieldMap.locationYaxis"
group="drag"
animation="300"
:move="onMove"
class="drag-block-style"
@add="addLocationYaxis"
@update="calcData(true)"
>
<transition-group class="draggable-group">
<detail-item
v-for="(item,index) in busiFieldMap.locationYaxis"
:key="item.id"
:param="param"
:index="index"
:item="item"
:dimension-data="dimension"
:quota-data="quota"
@onDetailItemRemove="locationYItemRemove"
/>
</transition-group>
</draggable>
<div
v-if="!busiFieldMap.locationYaxis || busiFieldMap.locationYaxis.length === 0"
class="drag-placeholder-style"
>
<span class="drag-placeholder-style-span">{{ $t('chart.placeholder_field') }}</span>
</div>
</el-row>
</div>
</template>
<script>
import DetailItem from '@/views/chart/components/dragItem/DetailItem'
export default {
name: 'MarkMapDataEditor',
components: { DetailItem },
props: {
view: {
type: Object,
require: true
},
param: {
type: Object,
required: true
},
dimensionData: {
type: Array,
required: true
},
quotaData: {
type: Array,
required: true
}
},
data() {
return {
busiFieldMap: {
locationXaxis: [],
locationYaxis: [],
daxis: []
}
}
},
created() {
this.releaseViewFields()
},
methods: {
fillViewFields() {
const result = []
for (const key in this.busiFieldMap) {
if (Object.hasOwnProperty.call(this.busiFieldMap, key)) {
const element = JSON.parse(JSON.stringify(this.busiFieldMap[key]))
element.forEach(item => {
item.busiType = key
result.push(item)
})
}
}
this.view.viewFields = result
},
releaseViewFields() {
this.view.viewFields.forEach(item => {
const busiType = item.busiType
if (this.busiFieldMap?.[busiType]) {
this.busiFieldMap[busiType].push(item)
}
})
},
clearData(type) {
this.busiFieldMap[type] = []
this.calcData(true)
},
onMove(e, originalEvent) {
this.moveId = e.draggedContext.element.id
return true
},
dragCheckType(list, type) {
if (list && list.length > 0) {
for (let i = 0; i < list.length; i++) {
if (list[i].groupType !== type) {
list.splice(i, 1)
}
}
}
},
dragMoveDuplicate(list, e) {
const that = this
const dup = list.filter(function(m) {
return m.id === that.moveId
})
if (dup && dup.length > 1) {
list.splice(e.newDraggableIndex, 1)
}
},
addDaxis(e) {
this.dragCheckType(this.busiFieldMap.daxis, 'd')
this.dragMoveDuplicate(this.busiFieldMap.daxis, e)
this.calcData(true)
},
addLocationXaxis(e) {
this.dragCheckType(this.busiFieldMap.locationXaxis, 'd')
this.dragMoveDuplicate(this.busiFieldMap.locationXaxis, e)
this.busiFieldMap.locationXaxis = [this.busiFieldMap.locationXaxis[0]]
this.calcData(true)
},
addLocationYaxis(e) {
this.dragCheckType(this.busiFieldMap.locationYaxis, 'd')
this.dragMoveDuplicate(this.busiFieldMap.locationYaxis, e)
this.busiFieldMap.locationYaxis = [this.busiFieldMap.locationYaxis[0]]
this.calcData(true)
},
locationXItemRemove(item) {
this.busiFieldMap.locationXaxis.splice(item.index, 1)
this.calcData(true)
},
locationYItemRemove(item) {
this.busiFieldMap.locationYaxis.splice(item.index, 1)
this.calcData(true)
},
detailItemRemove(item) {
this.busiFieldMap.daxis.splice(item.index, 1)
this.calcData(true)
},
calcData(cahce) {
this.fillViewFields()
this.$emit('calc-data', cahce)
}
}
}
</script>
<style lang="scss" scoped>
.padding-lr {
padding: 0 6px;
}
.itxst {
margin: 10px;
text-align: left;
}
.col {
width: 40%;
flex: 1;
padding: 10px;
border: solid 1px #eee;
border-radius: 5px;
float: left;
}
.col + .col {
margin-left: 10px;
}
.view-panel-row {
display: flex;
background-color: #f7f8fa;
overflow-y: auto;
overflow-x: hidden;
height: calc(100vh - 96px);
}
.view-panel-Mask {
display: flex;
height: calc(100vh - 80px);
background-color: rgba(92, 94, 97, 0.7);
position: absolute;
top: 0px;
left: 0px;
width: 350px;
z-index: 2;
cursor: not-allowed;
display: flex;
align-items: center;
justify-content: center;
}
.view-panel {
display: flex;
height: 100%;
background-color: #f7f8fa;
}
.blackTheme .view-panel {
background-color: var(--MainBG);
}
.drag-list {
height: calc(100% - 26px);
overflow: auto;
padding: 2px 0;
}
.item-dimension {
padding: 2px 10px;
margin: 2px 2px 0 2px;
border: solid 1px #eee;
text-align: left;
color: #606266;
/*background-color: rgba(35,46,64,.05);*/
background-color: white;
display: block;
word-break: break-all;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
position: relative;
}
.blackTheme .item-dimension {
border: solid 1px;
border-color: var(--TableBorderColor);
color: var(--TextPrimary);
background-color: var(--MainBG);
}
.item-dimension + .item-dimension {
margin-top: 2px;
}
.item-dimension:hover {
color: #1890ff;
background: #e8f4ff;
border-color: #a3d3ff;
cursor: pointer;
}
.blackTheme .item-dimension:hover {
color: var(--Main);
background: var(--ContentBG);
cursor: pointer;
}
.item-quota {
padding: 2px 10px;
margin: 2px 2px 0 2px;
border: solid 1px #eee;
text-align: left;
color: #606266;
background-color: white;
display: block;
word-break: break-all;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
position: relative;
}
.blackTheme .item-quota {
border: solid 1px;
border-color: var(--TableBorderColor);
color: var(--TextPrimary);
background-color: var(--MainBG);
}
.item-quota + .item-quota {
margin-top: 2px;
}
.item-quota:hover {
color: #67c23a;
background: #f0f9eb;
border-color: #b2d3a3;
cursor: pointer;
}
.blackTheme .item-quota:hover {
background: var(--ContentBG);
}
.el-form-item {
margin-bottom: 0;
}
span {
font-size: 12px;
}
.tab-header ::v-deep .el-tabs__header {
border-top: solid 1px #eee;
border-right: solid 1px #eee;
}
.tab-header ::v-deep .el-tabs__item {
font-size: 12px;
padding: 0 20px !important;
}
.blackTheme .tab-header ::v-deep .el-tabs__item {
background-color: var(--MainBG);
}
.tab-header ::v-deep .el-tabs__nav-scroll {
padding-left: 0 !important;
}
.tab-header ::v-deep .el-tabs__header {
margin: 0 !important;
}
.tab-header ::v-deep .el-tabs__content {
height: calc(100% - 40px);
}
.draggable-group {
display: block;
width: 100%;
height: calc(100% - 6px);
}
.chart-icon {
width: 20px !important;
height: 20px !important;
}
.el-radio {
margin: 5px;
}
.el-radio ::v-deep .el-radio__label {
padding-left: 0;
}
.attr-style {
height: calc(100vh - 76px - 60px - 40px - 40px);
}
.blackTheme .attr-style {
color: var(--TextPrimary);
}
.attr-selector {
width: 100%;
height: 100%;
margin: 6px 0;
padding: 0 4px;
display: flex;
align-items: center;
background-color: white
}
.blackTheme .attr-selector {
background-color: var(--MainBG)
}
.disabled-none-cursor {
cursor: not-allowed;
pointer-events: none;
}
.chart-class {
height: 100%;
padding: 10px;
}
.table-class {
height: calc(100% - 20px);
}
.dialog-css ::v-deep .el-dialog__title {
font-size: 14px;
}
.dialog-css ::v-deep .el-dialog__header {
padding: 20px 20px 0;
}
.dialog-css ::v-deep .el-dialog__body {
padding: 10px 20px 20px;
}
.filter-btn-class {
padding: 6px;
border: none;
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
}
.chart-error-class {
text-align: center;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
background-color: #ece7e7;
}
.blackTheme .chart-error-class {
background-color: var(--MainBG)
}
.field-height {
height: 100%;
border-top: 1px solid #E6E6E6;
}
.blackTheme .field-height {
border-top: 1px solid;
border-color: var(--TableBorderColor) !important;
}
.padding-tab {
padding: 0;
height: 100%;
}
.tree-select-span {
::v-deep div.vue-treeselect__control {
height: 32px !important;
font-weight: normal !important;
}
}
.drag-block-style {
padding: 2px 0 0 0;
width: 100%;
min-height: 32px;
border-radius: 4px;
border: 1px solid #DCDFE6;
overflow-x: hidden;
display: flex;
align-items: center;
background-color: white;
}
.blackTheme .drag-block-style {
border: 1px solid;
border-color: var(--TableBorderColor);
background-color: var(--ContentBG);
}
.drag-placeholder-style {
position: absolute;
top: calc(50% - 2px);
left: 0;
width: 100%;
color: #CCCCCC;
}
.blackTheme .drag-placeholder-style {
color: var(--TextPrimary);
}
.drag-placeholder-style-span {
padding-left: 16px;
}
.blackTheme .theme-border-class {
color: var(--TextPrimary) !important;
background-color: var(--ContentBG);
}
.blackTheme .padding-lr {
border-color: var(--TableBorderColor) !important;
}
.blackTheme .theme-item-class {
background-color: var(--MainBG) !important;
border-color: var(--TableBorderColor) !important;
}
.icon-class {
color: #6c6c6c;
}
.blackTheme .icon-class {
color: #cccccc;
}
.result-count {
width: 50px;
}
.result-count ::v-deep input {
padding: 0 4px;
}
.radio-span ::v-deep .el-radio__label {
margin-left: 4px;
}
.view-title-name {
display: -moz-inline-box;
display: inline-block;
width: 130px;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
margin-left: 45px;
}
::v-deep .item-axis {
width: 168px !important;
}
::v-deep .el-slider__input {
width: 80px !important;
}
::v-deep .el-input-number--mini {
width: 100px !important;
}
::v-deep .el-slider__runway.show-input {
width: 80px !important;
}
.no-senior {
width: 100%;
text-align: center;
font-size: 12px;
padding-top: 40px;
overflow: auto;
border-right: 1px solid #e6e6e6;
height: 100%;
}
.form-item-slider::v-deep.el-form-item__label {
font-size: 12px;
line-height: 38px;
}
.form-item::v-deep.el-form-item__label {
font-size: 12px;
}
.field-name {
display: inline-block;
width: 90px;
word-break: break-all;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
position: absolute;
top: 2px;
}
.field-setting {
position: absolute;
right: 8px;
}
.father .child {
visibility: hidden;
}
.father:hover .child {
visibility: visible;
}
.field-split {
height: calc(100% - 40px);
}
.field-split ::v-deep .fu-split-pane__left {
padding-right: 0 !important;
}
.field-split ::v-deep .fu-split-pane__right {
padding-left: 0 !important;
}
.view-panel-row ::v-deep .el-collapse-item__header {
height: 34px !important;
line-height: 34px !important;
padding: 0 0 0 6px !important;
font-size: 12px !important;
font-weight: 400 !important;
}
.data-area-label {
text-align: left;
position: relative;
width: 100%;
display: inline-block;
}
.data-area-clear {
position: absolute;
top: 4px;
right: 6px;
color: rgb(135, 141, 159);
cursor: pointer;
z-index: 1;
}
</style>

70
frontend/src/views/chart/components/table/TableNormal.vue
View File

@ -21,6 +21,7 @@
:row-style="getRowStyle" :row-style="getRowStyle"
class="table-class" class="table-class"
:class="chart.id" :class="chart.id"
:merge-cells="mergeCells"
:show-summary="showSummary" :show-summary="showSummary"
:summary-method="summaryMethod" :summary-method="summaryMethod"
:index-config="{seqMethod}" :index-config="{seqMethod}"
@ -32,12 +33,20 @@
<ux-table-column <ux-table-column
v-for="field in fields" v-for="field in fields"
:key="field.name" :key="field.name"
:field="field.dataeaseName" :field="field.child ? '' : field.dataeaseName"
:resizable="true" :resizable="true"
sortable :sortable="(!field.child || !field.child.length)"
:title="field.name" :title="field.name"
:width="columnWidth" :width="columnWidth"
/> >
<ux-table-column
v-for="item in field.child"
:key="field.name + item.name"
:field="item.dataeaseName"
:title="item.name"
:width="columnWidth"
/>
</ux-table-column>
</ux-grid> </ux-grid>
<el-row <el-row
@ -117,6 +126,7 @@ export default {
data() { data() {
return { return {
fields: [], fields: [],
detailFields: [],
height: 'auto', height: 'auto',
title_class: { title_class: {
margin: '0 0', margin: '0 0',
@ -167,7 +177,8 @@ export default {
totalStyle: { totalStyle: {
color: '#606266' color: '#606266'
}, },
not_support_page_dataset: NOT_SUPPORT_PAGE_DATASET not_support_page_dataset: NOT_SUPPORT_PAGE_DATASET,
mergeCells: []
} }
}, },
computed: { computed: {
@ -235,7 +246,15 @@ export default {
let data = [] let data = []
this.showPage = false this.showPage = false
if (this.chart.data) { if (this.chart.data) {
this.fields = JSON.parse(JSON.stringify(this.chart.data.fields)) const fields = JSON.parse(JSON.stringify(this.chart.data.fields))
if (this.chart.data.detailFields) {
fields.forEach(field => {
if (field.id === 'DataEase-Detail' && field.dataeaseName === 'detail') {
field.child = JSON.parse(JSON.stringify(this.chart.data.detailFields))
}
})
}
this.fields = fields
const attr = JSON.parse(this.chart.customAttr) const attr = JSON.parse(this.chart.customAttr)
this.currentPage.pageSize = parseInt(attr.size.tablePageSize ? attr.size.tablePageSize : 20) this.currentPage.pageSize = parseInt(attr.size.tablePageSize ? attr.size.tablePageSize : 20)
@ -269,13 +288,38 @@ export default {
data = [] data = []
this.resetPage() this.resetPage()
} }
data.forEach(item => { if (this.chart.data.detailFields?.length) {
Object.keys(item).forEach(key => { let result = []
if (typeof item[key] === 'object') { let groupRowIndex = 0
item[key] = '' data.forEach(item => {
const baseObj = JSON.parse(JSON.stringify(item))
delete baseObj.details
const details = JSON.parse(JSON.stringify(item.details))
let colsIndex = this.fields.length - 1
while (colsIndex--) {
const mergeItem = {
row: groupRowIndex,
col: colsIndex,
rowspan: details.length,
colspan: 1
}
this.mergeCells.push(mergeItem)
} }
groupRowIndex += details.length
result = result.concat(details.map(detail => Object.assign(detail, baseObj)))
}) })
}) data = result
} else {
data.forEach(item => {
Object.keys(item).forEach(key => {
if (typeof item[key] === 'object') {
item[key] = ''
}
})
})
}
this.$refs.plxTable.reloadData(data) this.$refs.plxTable.reloadData(data)
this.$nextTick(() => { this.$nextTick(() => {
this.initStyle() this.initStyle()
@ -295,6 +339,12 @@ export default {
if (this.chart.data) { if (this.chart.data) {
if (this.chart.type === 'table-info') { if (this.chart.type === 'table-info') {
tableHeight = (this.currentPage.pageSize + 2) * 36 - pageHeight tableHeight = (this.currentPage.pageSize + 2) * 36 - pageHeight
} else if (this.chart.data.detailFields?.length) {
let rowLength = 0
this.chart.data.tableRow.forEach(row => {
rowLength += (row?.details?.length || 1)
})
tableHeight = (rowLength + 2) * 36 - pageHeight
} else { } else {
tableHeight = (this.chart.data.tableRow.length + 2) * 36 - pageHeight tableHeight = (this.chart.data.tableRow.length + 2) * 36 - pageHeight
} }

26
frontend/src/views/chart/view/ChartEdit.vue
View File

@ -863,6 +863,17 @@
<span class="drag-placeholder-style-span">{{ $t('chart.placeholder_field') }}</span> <span class="drag-placeholder-style-span">{{ $t('chart.placeholder_field') }}</span>
</div> </div>
</el-row> </el-row>
<mark-map-data-editor
v-if="view.type === 'map'"
:view="view"
:param="param"
:dimension-data="dimension"
:quota-data="quota"
@clear-data="clearData"
@calc-data="calcData"
/>
<el-row <el-row
class="padding-lr" class="padding-lr"
style="margin-top: 6px;" style="margin-top: 6px;"
@ -988,6 +999,7 @@
@onMarginChange="onMarginChange" @onMarginChange="onMarginChange"
@onChangeBackgroundForm="onChangeBackgroundForm" @onChangeBackgroundForm="onChangeBackgroundForm"
@onSuspensionChange="onSuspensionChange" @onSuspensionChange="onSuspensionChange"
@onMarkChange="onMarkChange"
/> />
</el-tab-pane> </el-tab-pane>
<el-tab-pane <el-tab-pane
@ -1670,7 +1682,7 @@ import ChartFieldEdit from '@/views/chart/view/ChartFieldEdit'
import CalcChartFieldEdit from '@/views/chart/view/CalcChartFieldEdit' import CalcChartFieldEdit from '@/views/chart/view/CalcChartFieldEdit'
import { equalsAny } from '@/utils/StringUtils' import { equalsAny } from '@/utils/StringUtils'
import PositionAdjust from '@/views/chart/view/PositionAdjust' import PositionAdjust from '@/views/chart/view/PositionAdjust'
import MarkMapDataEditor from '@/views/chart/components/map/MarkMapDataEditor'
export default { export default {
name: 'ChartEdit', name: 'ChartEdit',
components: { components: {
@ -1707,7 +1719,8 @@ export default {
DrillItem, DrillItem,
DrillPath, DrillPath,
PluginCom, PluginCom,
MapMapping MapMapping,
MarkMapDataEditor
}, },
props: { props: {
param: { param: {
@ -2499,7 +2512,14 @@ export default {
this.view.customAttr.suspension = val this.view.customAttr.suspension = val
this.calcStyle() this.calcStyle()
}, },
onMarkChange(val) {
this.view.customAttr.mark = val
if (val.modifyName === 'fieldId') {
this.calcData()
} else {
this.calcStyle()
}
},
onSizeChange(val) { onSizeChange(val) {
this.view.customAttr.size = val this.view.customAttr.size = val
this.calcData() this.calcData()

36
frontend/src/views/chart/view/ChartStyle.vue
View File

@ -310,6 +310,34 @@
</el-collapse-item> </el-collapse-item>
</el-collapse> </el-collapse>
</el-row> </el-row>
<el-row
v-show="showPropertiesCollapse(['condition-style-selector'])"
class="de-collapse-style"
>
<span class="padding-lr">{{ $t('chart.function_style') }}</span>
<el-collapse
v-model="styleActiveNames"
class="style-collapse"
>
<el-collapse-item
v-show="showPropertiesCollapse(['condition-style-selector'])"
name="conditionStyle"
:title="$t('chart.condition_style')"
>
<map-mark-selector
:param="param"
class="attr-selector"
:chart="chart"
:view="view"
:dimension-data="dimensionData"
:quota-data="quotaData"
@onMarkChange="onMarkChange"
/>
</el-collapse-item>
</el-collapse>
</el-row>
</div> </div>
</el-row> </el-row>
</template> </template>
@ -338,6 +366,7 @@ import BackgroundColorSelector from '@/views/chart/components/componentStyle/Bac
import SplitSelector from '@/views/chart/components/componentStyle/SplitSelector' import SplitSelector from '@/views/chart/components/componentStyle/SplitSelector'
import SplitSelectorAntV from '@/views/chart/components/componentStyle/SplitSelectorAntV' import SplitSelectorAntV from '@/views/chart/components/componentStyle/SplitSelectorAntV'
import SuspensionSelector from '@/components/suspensionSelector' import SuspensionSelector from '@/components/suspensionSelector'
import MapMarkSelector from '@/views/chart/components/functionStyle/MapMarkSelector'
import { mapState } from 'vuex' import { mapState } from 'vuex'
export default { export default {
@ -366,7 +395,8 @@ export default {
ColorSelector, ColorSelector,
MarginSelector, MarginSelector,
PluginCom, PluginCom,
SuspensionSelector SuspensionSelector,
MapMarkSelector
}, },
props: { props: {
chart: { chart: {
@ -498,6 +528,10 @@ export default {
onChangeBackgroundForm(val, propertyName) { onChangeBackgroundForm(val, propertyName) {
val['propertyName'] = propertyName val['propertyName'] = propertyName
this.$emit('onChangeBackgroundForm', val) this.$emit('onChangeBackgroundForm', val)
},
onMarkChange(val, propertyName) {
val['propertyName'] = propertyName
this.$emit('onMarkChange', val)
} }
} }
} }

13
frontend/vue.config.js
View File

@ -94,6 +94,17 @@ module.exports = {
deleteOriginalAssets: true // 删除源文件 deleteOriginalAssets: true // 删除源文件
})) */ })) */
} }
config.module
.rule('icons')
.test(/\.svg$/)
.include.add(resolve('src/deicons'))
.end()
.use('svg-sprite-loader')
.loader('svg-sprite-loader')
.options({
symbolId: '[name]'
})
}, },
css: { css: {
loaderOptions: { loaderOptions: {
@ -102,7 +113,7 @@ module.exports = {
} }
}, },
extract: { extract: {
ignoreOrder: true, ignoreOrder: true
} }
} }