forked from github/dataease
feat(视图): 色彩地图增加标记功能
This commit is contained in:
fit2cloud-chenyw
parent
acd771cfd0
commit
4fa41d8676
@ -558,6 +558,12 @@ public class ChartViewService {
|
||||
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 {
|
||||
ChartViewDTO chartViewDTO = new ChartViewDTO();
|
||||
if (ObjectUtils.isEmpty(view)) {
|
||||
@ -906,6 +912,9 @@ public class ChartViewService {
|
||||
pageInfo.setGoPage(chartExtRequest.getGoPage());
|
||||
pageInfo.setPageSize(chartExtRequest.getPageSize());
|
||||
|
||||
List<ChartViewFieldDTO> detailFieldList = new ArrayList<>();
|
||||
String detailFieldSql = null;
|
||||
List<String[]> detailData = new ArrayList<>();
|
||||
//如果不是插件视图 走原生逻辑
|
||||
if (table.getMode() == 0) {// 直连
|
||||
if (ObjectUtils.isEmpty(ds)) {
|
||||
@ -931,6 +940,11 @@ public class ChartViewService {
|
||||
totalPageSql = qp.getResultCount(true, dataTableInfoDTO.getTable(), xAxis, fieldCustomFilter, rowPermissionsTree, extFilterList, ds, view);
|
||||
} else {
|
||||
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())) {
|
||||
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());
|
||||
assistData = datasourceProvider.getData(datasourceAssistRequest);
|
||||
}
|
||||
|
||||
if (StringUtils.isNotBlank(detailFieldSql)) {
|
||||
datasourceRequest.setQuery(detailFieldSql);
|
||||
detailData = datasourceProvider.getData(datasourceRequest);
|
||||
}
|
||||
} else if (table.getMode() == 1) {// 抽取
|
||||
// 连接doris，构建doris数据源查询
|
||||
datasourceRequest.setDatasource(ds);
|
||||
@ -1200,6 +1219,9 @@ public class ChartViewService {
|
||||
}
|
||||
// table组件，明细表，也用于导出数据
|
||||
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.setTotalPage(totalPage);
|
||||
chartViewDTO.setTotalItems(totalItems);
|
||||
|
||||
@ -1,5 +1,6 @@
|
||||
package io.dataease.service.chart.util;
|
||||
|
||||
import cn.hutool.core.util.ArrayUtil;
|
||||
import io.dataease.plugins.common.base.domain.ChartViewWithBLOBs;
|
||||
import io.dataease.dto.chart.*;
|
||||
import io.dataease.plugins.common.dto.chart.ChartViewFieldDTO;
|
||||
@ -952,6 +953,46 @@ public class ChartDataBuild {
|
||||
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) {
|
||||
|
||||
|
||||
86
frontend/src/components/deIconPicker/eIcon/e-icon.vue
Normal file
86
frontend/src/components/deIconPicker/eIcon/e-icon.vue
Normal 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
1
frontend/src/components/deIconPicker/eIconList.js
Normal 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
1
frontend/src/components/deIconPicker/elementUI.js
Normal 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
1
frontend/src/components/deIconPicker/fontAwesome.js
Normal file
File diff suppressed because one or more lines are too long
48
frontend/src/components/deIconPicker/iconList.js
Normal file
48
frontend/src/components/deIconPicker/iconList.js
Normal 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
539
frontend/src/components/deIconPicker/index.vue
Normal 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
27
frontend/src/components/deIconPicker/utils/TypeUtil.js
Normal 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
36
frontend/src/components/deIconPicker/utils/dom.js
Normal 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
15
frontend/src/components/deIconPicker/utils/getSvg.js
Normal 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
28
frontend/src/components/deIconPicker/utils/index.js
Normal 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
53
frontend/src/components/deIconPicker/utils/util.js
Normal 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
15
frontend/src/deicons/index.js
Normal 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
1
frontend/src/deicons/svg/ai37.svg
Normal 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>
|
||||
|
After Width: | Height: | Size: 476 B |
1
frontend/src/deicons/svg/ai65.svg
Normal file
1
frontend/src/deicons/svg/ai65.svg
Normal 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>
|
||||
|
After Width: | Height: | Size: 667 B |
1
frontend/src/deicons/svg/bumanyi.svg
Normal file
1
frontend/src/deicons/svg/bumanyi.svg
Normal 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>
|
||||
|
After Width: | Height: | Size: 1.3 KiB |
1
frontend/src/deicons/svg/chaping-yuankuang.svg
Normal file
1
frontend/src/deicons/svg/chaping-yuankuang.svg
Normal 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>
|
||||
|
After Width: | Height: | Size: 759 B |
1
frontend/src/deicons/svg/chaping.svg
Normal file
1
frontend/src/deicons/svg/chaping.svg
Normal 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>
|
||||
|
After Width: | Height: | Size: 635 B |
1
frontend/src/deicons/svg/circle.svg
Normal file
1
frontend/src/deicons/svg/circle.svg
Normal 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>
|
||||
|
After Width: | Height: | Size: 395 B |
1
frontend/src/deicons/svg/cuowuguanbiquxiao-yuankuang.svg
Normal file
1
frontend/src/deicons/svg/cuowuguanbiquxiao-yuankuang.svg
Normal 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>
|
||||
|
After Width: | Height: | Size: 506 B |
1
frontend/src/deicons/svg/five-star.svg
Normal file
1
frontend/src/deicons/svg/five-star.svg
Normal 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>
|
||||
|
After Width: | Height: | Size: 424 B |
1
frontend/src/deicons/svg/gantanhao-yuankuang.svg
Normal file
1
frontend/src/deicons/svg/gantanhao-yuankuang.svg
Normal 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>
|
||||
|
After Width: | Height: | Size: 410 B |
1
frontend/src/deicons/svg/haoping-yuankuang.svg
Normal file
1
frontend/src/deicons/svg/haoping-yuankuang.svg
Normal 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>
|
||||
|
After Width: | Height: | Size: 721 B |
1
frontend/src/deicons/svg/haoping.svg
Normal file
1
frontend/src/deicons/svg/haoping.svg
Normal 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>
|
||||
|
After Width: | Height: | Size: 637 B |
1
frontend/src/deicons/svg/jiantou-copy-copy-2.svg
Normal file
1
frontend/src/deicons/svg/jiantou-copy-copy-2.svg
Normal 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>
|
||||
|
After Width: | Height: | Size: 629 B |
1
frontend/src/deicons/svg/jiantou-copy-copy-copy.svg
Normal file
1
frontend/src/deicons/svg/jiantou-copy-copy-copy.svg
Normal 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>
|
||||
|
After Width: | Height: | Size: 625 B |
1
frontend/src/deicons/svg/jiantou-copy-copy.svg
Normal file
1
frontend/src/deicons/svg/jiantou-copy-copy.svg
Normal 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>
|
||||
|
After Width: | Height: | Size: 628 B |
1
frontend/src/deicons/svg/lingxing.svg
Normal file
1
frontend/src/deicons/svg/lingxing.svg
Normal 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>
|
||||
|
After Width: | Height: | Size: 353 B |
1
frontend/src/deicons/svg/manyi.svg
Normal file
1
frontend/src/deicons/svg/manyi.svg
Normal 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>
|
||||
|
After Width: | Height: | Size: 1.2 KiB |
1
frontend/src/deicons/svg/paixu.svg
Normal file
1
frontend/src/deicons/svg/paixu.svg
Normal 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>
|
||||
|
After Width: | Height: | Size: 971 B |
1
frontend/src/deicons/svg/qizi.svg
Normal file
1
frontend/src/deicons/svg/qizi.svg
Normal 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>
|
||||
|
After Width: | Height: | Size: 714 B |
1
frontend/src/deicons/svg/rect.svg
Normal file
1
frontend/src/deicons/svg/rect.svg
Normal 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>
|
||||
|
After Width: | Height: | Size: 302 B |
1
frontend/src/deicons/svg/shangjiantou.svg
Normal file
1
frontend/src/deicons/svg/shangjiantou.svg
Normal 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>
|
||||
|
After Width: | Height: | Size: 341 B |
1
frontend/src/deicons/svg/weizhi.svg
Normal file
1
frontend/src/deicons/svg/weizhi.svg
Normal 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>
|
||||
|
After Width: | Height: | Size: 550 B |
1
frontend/src/deicons/svg/wenhao-yuankuang.svg
Normal file
1
frontend/src/deicons/svg/wenhao-yuankuang.svg
Normal 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>
|
||||
|
After Width: | Height: | Size: 652 B |
1
frontend/src/deicons/svg/wujiaoxing.svg
Normal file
1
frontend/src/deicons/svg/wujiaoxing.svg
Normal 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>
|
||||
|
After Width: | Height: | Size: 423 B |
1
frontend/src/deicons/svg/xiajiantou.svg
Normal file
1
frontend/src/deicons/svg/xiajiantou.svg
Normal 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>
|
||||
|
After Width: | Height: | Size: 341 B |
1
frontend/src/deicons/svg/xiangshang.svg
Normal file
1
frontend/src/deicons/svg/xiangshang.svg
Normal 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>
|
||||
|
After Width: | Height: | Size: 978 B |
1
frontend/src/deicons/svg/xiangyou.svg
Normal file
1
frontend/src/deicons/svg/xiangyou.svg
Normal 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>
|
||||
|
After Width: | Height: | Size: 971 B |
1
frontend/src/deicons/svg/xiangzuo.svg
Normal file
1
frontend/src/deicons/svg/xiangzuo.svg
Normal 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>
|
||||
|
After Width: | Height: | Size: 964 B |
1
frontend/src/deicons/svg/yiban.svg
Normal file
1
frontend/src/deicons/svg/yiban.svg
Normal 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>
|
||||
|
After Width: | Height: | Size: 1021 B |
1
frontend/src/deicons/svg/youjiantou.svg
Normal file
1
frontend/src/deicons/svg/youjiantou.svg
Normal 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>
|
||||
|
After Width: | Height: | Size: 341 B |
1
frontend/src/deicons/svg/zheng-triangle.svg
Normal file
1
frontend/src/deicons/svg/zheng-triangle.svg
Normal 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>
|
||||
|
After Width: | Height: | Size: 324 B |
1
frontend/src/deicons/svg/zhengquewancheng-yuankuang.svg
Normal file
1
frontend/src/deicons/svg/zhengquewancheng-yuankuang.svg
Normal 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>
|
||||
|
After Width: | Height: | Size: 454 B |
1
frontend/src/deicons/svg/zuojiantou.svg
Normal file
1
frontend/src/deicons/svg/zuojiantou.svg
Normal 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>
|
||||
|
After Width: | Height: | Size: 342 B |
22
frontend/src/deicons/svgo.yml
Normal file
22
frontend/src/deicons/svgo.yml
Normal 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'
|
||||
@ -931,6 +931,12 @@ export default {
|
||||
password_input_error: 'Original password input error'
|
||||
},
|
||||
chart: {
|
||||
mark_field: 'Field',
|
||||
mark_value: 'Value',
|
||||
function_style: 'Function style',
|
||||
condition_style: 'Mark style',
|
||||
longitude: 'Longitude',
|
||||
latitude: 'Latitude',
|
||||
gradient: 'Gradient',
|
||||
layer_controller: 'Quota switch',
|
||||
suspension: 'Suspension',
|
||||
|
||||
@ -930,6 +930,12 @@ export default {
|
||||
password_input_error: '原始密碼輸入錯誤'
|
||||
},
|
||||
chart: {
|
||||
mark_field: '字段',
|
||||
mark_value: '值',
|
||||
function_style: '功能型樣式',
|
||||
condition_style: '標記樣式',
|
||||
longitude: '經度',
|
||||
latitude: '緯度',
|
||||
gradient: '漸變',
|
||||
layer_controller: '指標切換',
|
||||
suspension: '懸浮',
|
||||
|
||||
@ -929,6 +929,12 @@ export default {
|
||||
password_input_error: '原始密码输入错误'
|
||||
},
|
||||
chart: {
|
||||
mark_field: '字段',
|
||||
mark_value: '值',
|
||||
function_style: '功能型样式',
|
||||
condition_style: '标记样式',
|
||||
longitude: '经度',
|
||||
latitude: '纬度',
|
||||
gradient: '渐变',
|
||||
layer_controller: '指标切换',
|
||||
suspension: '悬浮',
|
||||
|
||||
@ -132,6 +132,11 @@ export const DEFAULT_SIZE = {
|
||||
export const DEFAULT_SUSPENSION = {
|
||||
show: true
|
||||
}
|
||||
|
||||
export const DEFAULT_MARK = {
|
||||
fieldId: '',
|
||||
conditions: []
|
||||
}
|
||||
export const DEFAULT_LABEL = {
|
||||
show: false,
|
||||
position: 'top',
|
||||
@ -892,14 +897,25 @@ export const BASE_MAP = {
|
||||
inRange: {
|
||||
color: ['lightskyblue', 'yellow', 'orangered']
|
||||
},
|
||||
seriesIndex: 0,
|
||||
textStyle: {},
|
||||
right: 0
|
||||
},
|
||||
geo: {
|
||||
map: 'MAP',
|
||||
roam: true,
|
||||
nameMap: {
|
||||
|
||||
},
|
||||
itemStyle: {
|
||||
|
||||
}
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: '',
|
||||
type: 'map',
|
||||
map: 'MAP',
|
||||
geoIndex: 0,
|
||||
roam: true,
|
||||
data: [],
|
||||
itemStyle: {
|
||||
|
||||
@ -159,7 +159,80 @@ export function baseMapOption(chart_option, chart, themeStyle, curAreaCode, seri
|
||||
if (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
|
||||
}
|
||||
|
||||
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
|
||||
}
|
||||
|
||||
|
||||
@ -3170,7 +3170,8 @@ export const TYPE_CONFIGS = [
|
||||
'label-selector',
|
||||
'tooltip-selector',
|
||||
'title-selector',
|
||||
'suspension-selector'
|
||||
'suspension-selector',
|
||||
'condition-style-selector'
|
||||
],
|
||||
propertyInner: {
|
||||
|
||||
@ -3207,6 +3208,9 @@ export const TYPE_CONFIGS = [
|
||||
],
|
||||
'suspension-selector': [
|
||||
'show'
|
||||
],
|
||||
'condition-style-selector': [
|
||||
'show'
|
||||
]
|
||||
}
|
||||
}
|
||||
|
||||
154
frontend/src/views/chart/components/dragItem/DetailItem.vue
Normal file
154
frontend/src/views/chart/components/dragItem/DetailItem.vue
Normal 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>
|
||||
@ -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
669
frontend/src/views/chart/components/map/MarkMapDataEditor.vue
Normal 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>
|
||||
@ -21,6 +21,7 @@
|
||||
:row-style="getRowStyle"
|
||||
class="table-class"
|
||||
:class="chart.id"
|
||||
:merge-cells="mergeCells"
|
||||
:show-summary="showSummary"
|
||||
:summary-method="summaryMethod"
|
||||
:index-config="{seqMethod}"
|
||||
@ -32,12 +33,20 @@
|
||||
<ux-table-column
|
||||
v-for="field in fields"
|
||||
:key="field.name"
|
||||
:field="field.dataeaseName"
|
||||
:field="field.child ? '' : field.dataeaseName"
|
||||
:resizable="true"
|
||||
sortable
|
||||
:sortable="(!field.child || !field.child.length)"
|
||||
:title="field.name"
|
||||
: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>
|
||||
|
||||
<el-row
|
||||
@ -117,6 +126,7 @@ export default {
|
||||
data() {
|
||||
return {
|
||||
fields: [],
|
||||
detailFields: [],
|
||||
height: 'auto',
|
||||
title_class: {
|
||||
margin: '0 0',
|
||||
@ -167,7 +177,8 @@ export default {
|
||||
totalStyle: {
|
||||
color: '#606266'
|
||||
},
|
||||
not_support_page_dataset: NOT_SUPPORT_PAGE_DATASET
|
||||
not_support_page_dataset: NOT_SUPPORT_PAGE_DATASET,
|
||||
mergeCells: []
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
@ -235,7 +246,15 @@ export default {
|
||||
let data = []
|
||||
this.showPage = false
|
||||
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)
|
||||
this.currentPage.pageSize = parseInt(attr.size.tablePageSize ? attr.size.tablePageSize : 20)
|
||||
|
||||
@ -269,13 +288,38 @@ export default {
|
||||
data = []
|
||||
this.resetPage()
|
||||
}
|
||||
data.forEach(item => {
|
||||
Object.keys(item).forEach(key => {
|
||||
if (typeof item[key] === 'object') {
|
||||
item[key] = ''
|
||||
if (this.chart.data.detailFields?.length) {
|
||||
let result = []
|
||||
let groupRowIndex = 0
|
||||
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.$nextTick(() => {
|
||||
this.initStyle()
|
||||
@ -295,6 +339,12 @@ export default {
|
||||
if (this.chart.data) {
|
||||
if (this.chart.type === 'table-info') {
|
||||
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 {
|
||||
tableHeight = (this.chart.data.tableRow.length + 2) * 36 - pageHeight
|
||||
}
|
||||
|
||||
@ -863,6 +863,17 @@
|
||||
<span class="drag-placeholder-style-span">{{ $t('chart.placeholder_field') }}</span>
|
||||
</div>
|
||||
</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
|
||||
class="padding-lr"
|
||||
style="margin-top: 6px;"
|
||||
@ -988,6 +999,7 @@
|
||||
@onMarginChange="onMarginChange"
|
||||
@onChangeBackgroundForm="onChangeBackgroundForm"
|
||||
@onSuspensionChange="onSuspensionChange"
|
||||
@onMarkChange="onMarkChange"
|
||||
/>
|
||||
</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 { equalsAny } from '@/utils/StringUtils'
|
||||
import PositionAdjust from '@/views/chart/view/PositionAdjust'
|
||||
|
||||
import MarkMapDataEditor from '@/views/chart/components/map/MarkMapDataEditor'
|
||||
export default {
|
||||
name: 'ChartEdit',
|
||||
components: {
|
||||
@ -1707,7 +1719,8 @@ export default {
|
||||
DrillItem,
|
||||
DrillPath,
|
||||
PluginCom,
|
||||
MapMapping
|
||||
MapMapping,
|
||||
MarkMapDataEditor
|
||||
},
|
||||
props: {
|
||||
param: {
|
||||
@ -2499,7 +2512,14 @@ export default {
|
||||
this.view.customAttr.suspension = val
|
||||
this.calcStyle()
|
||||
},
|
||||
|
||||
onMarkChange(val) {
|
||||
this.view.customAttr.mark = val
|
||||
if (val.modifyName === 'fieldId') {
|
||||
this.calcData()
|
||||
} else {
|
||||
this.calcStyle()
|
||||
}
|
||||
},
|
||||
onSizeChange(val) {
|
||||
this.view.customAttr.size = val
|
||||
this.calcData()
|
||||
|
||||
@ -310,6 +310,34 @@
|
||||
</el-collapse-item>
|
||||
</el-collapse>
|
||||
</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>
|
||||
</el-row>
|
||||
</template>
|
||||
@ -338,6 +366,7 @@ import BackgroundColorSelector from '@/views/chart/components/componentStyle/Bac
|
||||
import SplitSelector from '@/views/chart/components/componentStyle/SplitSelector'
|
||||
import SplitSelectorAntV from '@/views/chart/components/componentStyle/SplitSelectorAntV'
|
||||
import SuspensionSelector from '@/components/suspensionSelector'
|
||||
import MapMarkSelector from '@/views/chart/components/functionStyle/MapMarkSelector'
|
||||
import { mapState } from 'vuex'
|
||||
|
||||
export default {
|
||||
@ -366,7 +395,8 @@ export default {
|
||||
ColorSelector,
|
||||
MarginSelector,
|
||||
PluginCom,
|
||||
SuspensionSelector
|
||||
SuspensionSelector,
|
||||
MapMarkSelector
|
||||
},
|
||||
props: {
|
||||
chart: {
|
||||
@ -498,6 +528,10 @@ export default {
|
||||
onChangeBackgroundForm(val, propertyName) {
|
||||
val['propertyName'] = propertyName
|
||||
this.$emit('onChangeBackgroundForm', val)
|
||||
},
|
||||
onMarkChange(val, propertyName) {
|
||||
val['propertyName'] = propertyName
|
||||
this.$emit('onMarkChange', val)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -94,6 +94,17 @@ module.exports = {
|
||||
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: {
|
||||
loaderOptions: {
|
||||
@ -102,7 +113,7 @@ module.exports = {
|
||||
}
|
||||
},
|
||||
extract: {
|
||||
ignoreOrder: true,
|
||||
ignoreOrder: true
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user