forked from github/dataease
Merge pull request #2825 from dataease/pr@dev@feat_rich-text-view
feat(视图): 新增富文本视图
This commit is contained in:
王嘉豪
GitHub
commit
6d3ab3a8b4
@ -42,6 +42,7 @@
|
||||
@resizeView="resizeView"
|
||||
@linkJumpSet="linkJumpSet"
|
||||
@boardSet="boardSet"
|
||||
@fieldSelect="fieldSelect"
|
||||
/>
|
||||
<mobile-check-bar v-if="mobileCheckBarShow" :element="element" @amRemoveItem="amRemoveItem" />
|
||||
<div
|
||||
@ -791,7 +792,7 @@ export default {
|
||||
elementMouseDown(e) {
|
||||
// private 设置当前组件数据及状态
|
||||
this.$store.commit('setClickComponentStatus', true)
|
||||
if (this.element.component !== 'de-frame' && this.element.component !== 'v-text' && this.element.component !== 'de-rich-text' && this.element.component !== 'rect-shape' && this.element.component !== 'de-input-search' && this.element.component !== 'de-select-grid' && this.element.component !== 'de-number-range' && this.element.component !== 'de-date') {
|
||||
if (this.element.component !== 'user-view' && this.element.component !== 'de-frame' && this.element.component !== 'v-text' && this.element.component !== 'de-rich-text' && this.element.component !== 'rect-shape' && this.element.component !== 'de-input-search' && this.element.component !== 'de-select-grid' && this.element.component !== 'de-number-range' && this.element.component !== 'de-date') {
|
||||
e.preventDefault()
|
||||
}
|
||||
// 阻止冒泡事件
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<div class="bar-main" :class="showEditPosition">
|
||||
<div class="bar-main" :class="showEditPosition" @mousedown="showLabelInfo">
|
||||
<input id="input" ref="files" type="file" accept="image/*" hidden @click="e => {e.target.value = '';}" @change="handleFileChange">
|
||||
<div v-if="linkageAreaShow" style="margin-right: -1px;width: 20px">
|
||||
<el-checkbox v-model="linkageInfo.linkageActive" size="medium" />
|
||||
@ -22,10 +22,10 @@
|
||||
<i v-if="activeModel==='edit'&&!curComponent.auxiliaryMatrix" class="icon iconfont icon-xuanfuanniu" @click.stop="auxiliaryMatrixChange" />
|
||||
</span>
|
||||
<span :title="$t('panel.enlarge')">
|
||||
<i v-if="curComponent.type==='view'" class="icon iconfont icon-fangda" @click.stop="showViewDetails('enlarge')" />
|
||||
<i v-if="enlargeShow" class="icon iconfont icon-fangda" @click.stop="showViewDetails('enlarge')" />
|
||||
</span>
|
||||
<span :title="$t('panel.details')">
|
||||
<i v-if="curComponent.type==='view' && terminal==='pc'" class="icon iconfont icon-chakan" @click.stop="showViewDetails('details')" />
|
||||
<i v-if="detailsShow" class="icon iconfont icon-chakan" @click.stop="showViewDetails('details')" />
|
||||
</span>
|
||||
<setting-menu v-if="activeModel==='edit'" style="float: right;height: 24px!important;" @amRemoveItem="amRemoveItem" @linkJumpSet="linkJumpSet" @boardSet="boardSet">
|
||||
<span slot="icon" :title="$t('panel.setting')">
|
||||
@ -38,6 +38,15 @@
|
||||
<span :title="$t('panel.switch_picture')">
|
||||
<i v-if="activeModel==='edit'&&curComponent&&curComponent.type==='picture-add'" class="icon iconfont icon-genghuan" @click.stop="goFile" />
|
||||
</span>
|
||||
<el-popover
|
||||
v-if="selectFieldShow"
|
||||
width="200"
|
||||
trigger="click"
|
||||
@mousedown="fieldsAreaDown"
|
||||
>
|
||||
<fields-list :fields="curFields" :element="element" />
|
||||
<i slot="reference" :title="$t('panel.select_field')" class="icon iconfont icon-datasource-select" style="margin-left: 4px;cursor: pointer;font-size: 14px;" />
|
||||
</el-popover>
|
||||
<span :title="$t('panel.jump')">
|
||||
<a v-if="showJumpFlag" :title="curComponent.hyperlinks.content " :target="curComponent.hyperlinks.openMode " :href="curComponent.hyperlinks.content ">
|
||||
<i class="icon iconfont icon-com-jump" />
|
||||
@ -53,9 +62,10 @@ import bus from '@/utils/bus'
|
||||
import SettingMenu from '@/components/canvas/components/Editor/SettingMenu'
|
||||
import LinkageField from '@/components/canvas/components/Editor/LinkageField'
|
||||
import toast from '@/components/canvas/utils/toast'
|
||||
import FieldsList from '@/components/canvas/components/Editor/fieldsList'
|
||||
|
||||
export default {
|
||||
components: { SettingMenu, LinkageField },
|
||||
components: { FieldsList, SettingMenu, LinkageField },
|
||||
|
||||
props: {
|
||||
terminal: {
|
||||
@ -93,6 +103,7 @@ export default {
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
curFields: [],
|
||||
multiplexingCheckModel: false,
|
||||
barWidth: 24,
|
||||
componentType: null,
|
||||
@ -102,12 +113,23 @@ export default {
|
||||
'custom',
|
||||
'custom-button'
|
||||
],
|
||||
timer: null
|
||||
timer: null,
|
||||
viewXArray: []
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.initCurFields()
|
||||
},
|
||||
computed: {
|
||||
detailsShow() {
|
||||
return this.curComponent.type === 'view' && this.terminal === 'pc' && this.curComponent.propValue.innerType !== 'richTextView'
|
||||
},
|
||||
enlargeShow() {
|
||||
return this.curComponent.type === 'view' && this.curComponent.propValue.innerType !== 'richTextView'
|
||||
},
|
||||
selectFieldShow() {
|
||||
return this.activeModel === 'edit' && this.curComponent.type === 'view' && this.curComponent.propValue.innerType === 'richTextView'
|
||||
},
|
||||
curComponentTypes() {
|
||||
const types = []
|
||||
this.componentData.forEach(component => {
|
||||
@ -183,12 +205,30 @@ export default {
|
||||
'curCanvasScale',
|
||||
'batchOptStatus',
|
||||
'mobileLayoutStatus',
|
||||
'curBatchOptComponents'
|
||||
'curBatchOptComponents',
|
||||
'panelViewDetailsInfo'
|
||||
])
|
||||
},
|
||||
beforeDestroy() {
|
||||
},
|
||||
methods: {
|
||||
fieldsAreaDown(e) {
|
||||
// ignore
|
||||
e.preventDefault()
|
||||
},
|
||||
initCurFields() {
|
||||
if (this.element.type === 'view') {
|
||||
const chartDetails = JSON.parse(this.panelViewDetailsInfo[this.element.propValue.viewId])
|
||||
if (chartDetails.type === 'richTextView') {
|
||||
const checkAllAxisStr = chartDetails.xaxis + chartDetails.xaxisExt + chartDetails.yaxis + chartDetails.yaxisExt + chartDetails.drillFields
|
||||
chartDetails.data.sourceFields.forEach(field => {
|
||||
if (checkAllAxisStr.indexOf(field.id) > -1) {
|
||||
this.curFields.push(field)
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
},
|
||||
positionCheck(position) {
|
||||
return this.showPosition.includes(position)
|
||||
},
|
||||
@ -286,6 +326,10 @@ export default {
|
||||
goFile() {
|
||||
this.$refs.files.click()
|
||||
},
|
||||
showLabelInfo(e) {
|
||||
// ignore
|
||||
e.preventDefault()
|
||||
},
|
||||
handleFileChange(e) {
|
||||
const file = e.target.files[0]
|
||||
if (!file.type.includes('image')) {
|
||||
|
||||
@ -20,9 +20,9 @@
|
||||
</el-dropdown-menu>
|
||||
</el-dropdown>
|
||||
</el-dropdown-item>
|
||||
<el-dropdown-item v-if="'view'===curComponent.type" icon="el-icon-link" @click.native="linkageSetting">{{ $t('panel.linkage_setting') }}</el-dropdown-item>
|
||||
<el-dropdown-item v-if="linkageSettingShow" icon="el-icon-link" @click.native="linkageSetting">{{ $t('panel.linkage_setting') }}</el-dropdown-item>
|
||||
<el-dropdown-item v-if="'de-tabs'===curComponent.type" icon="el-icon-plus" @click.native="addTab">{{ $t('panel.add_tab') }}</el-dropdown-item>
|
||||
<el-dropdown-item v-if="'view'===curComponent.type" icon="el-icon-connection" @click.native="linkJumpSet">{{ $t('panel.setting_jump') }}</el-dropdown-item>
|
||||
<el-dropdown-item v-if="linkJumpSetShow" icon="el-icon-connection" @click.native="linkJumpSet">{{ $t('panel.setting_jump') }}</el-dropdown-item>
|
||||
<el-dropdown-item icon="el-icon-magic-stick" @click.native="boardSet">{{ $t('panel.component_style') }}</el-dropdown-item>
|
||||
<el-dropdown-item @click.native="hyperlinksSet">
|
||||
<i class="icon iconfont icon-font icon-chaolianjie1" />
|
||||
@ -65,10 +65,21 @@ export default {
|
||||
]
|
||||
}
|
||||
},
|
||||
computed: mapState([
|
||||
'curComponent',
|
||||
'componentData'
|
||||
]),
|
||||
computed: {
|
||||
linkJumpSetShow() {
|
||||
return this.curComponent.type === 'view' && this.curComponent.propValue.innerType !== 'richTextView'
|
||||
},
|
||||
linkageSettingShow() {
|
||||
return this.curComponent.type === 'view' && this.curComponent.propValue.innerType !== 'richTextView'
|
||||
},
|
||||
panelInfo() {
|
||||
return this.$store.state.panel.panelInfo
|
||||
},
|
||||
...mapState([
|
||||
'curComponent',
|
||||
'componentData'
|
||||
])
|
||||
},
|
||||
methods: {
|
||||
edit() {
|
||||
if (this.curComponent.type === 'custom') {
|
||||
|
||||
@ -0,0 +1,55 @@
|
||||
<template>
|
||||
<div @mousedown="fieldsAreaDown">
|
||||
<el-button v-for="(field) in fields" :key="field.id" size="mini" class="field-area" @click="fieldSelect(field)">
|
||||
{{ field.name }}
|
||||
</el-button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import bus from '@/utils/bus'
|
||||
|
||||
export default {
|
||||
name: 'FieldsList',
|
||||
props: {
|
||||
fields: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
},
|
||||
element: {
|
||||
type: Object,
|
||||
default: null
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
|
||||
},
|
||||
watch: {
|
||||
|
||||
},
|
||||
mounted() {
|
||||
},
|
||||
methods: {
|
||||
fieldSelect(field) {
|
||||
bus.$emit('fieldSelect-' + this.element.propValue.viewId, field)
|
||||
},
|
||||
fieldsAreaDown(e) {
|
||||
// ignore
|
||||
e.preventDefault()
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.field-area{
|
||||
width: 174px;
|
||||
margin: 4px 0 0 0;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
</style>
|
||||
@ -0,0 +1,211 @@
|
||||
<template>
|
||||
<div class="rich-main-class" @dblclick="setEdit">
|
||||
<Editor
|
||||
v-if="editShow"
|
||||
:id="tinymceId"
|
||||
v-model="myValue"
|
||||
style="width: 100%;height: 100%"
|
||||
:init="init"
|
||||
:disabled="!canEdit"
|
||||
@onClick="onClick"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import tinymce from 'tinymce/tinymce' // tinymce默认hidden，不引入不显示
|
||||
import Editor from '@tinymce/tinymce-vue'// 编辑器引入
|
||||
import 'tinymce/themes/silver/theme'// 编辑器主题
|
||||
import 'tinymce/icons/default' // 引入编辑器图标icon，不引入则不显示对应图标
|
||||
// 引入编辑器插件（基本免费插件都在这儿了）
|
||||
import 'tinymce/plugins/advlist' // 高级列表
|
||||
import 'tinymce/plugins/autolink' // 自动链接
|
||||
import 'tinymce/plugins/link' // 超链接
|
||||
import 'tinymce/plugins/image' // 插入编辑图片
|
||||
import 'tinymce/plugins/lists' // 列表插件
|
||||
import 'tinymce/plugins/charmap' // 特殊字符
|
||||
import 'tinymce/plugins/media' // 插入编辑媒体
|
||||
import 'tinymce/plugins/wordcount'// 字数统计
|
||||
import 'tinymce/plugins/table'// 表格
|
||||
import 'tinymce/plugins/contextmenu'// contextmenu
|
||||
import 'tinymce/plugins/directionality'
|
||||
import 'tinymce/plugins/nonbreaking'
|
||||
import 'tinymce/plugins/pagebreak'
|
||||
import { mapState } from 'vuex'
|
||||
import bus from '@/utils/bus'
|
||||
export default {
|
||||
name: 'DeRichTextView',
|
||||
components: {
|
||||
Editor
|
||||
},
|
||||
props: {
|
||||
element: {
|
||||
type: Object
|
||||
},
|
||||
dataRowSelect: {
|
||||
type: Object
|
||||
},
|
||||
dataRowNameSelect: {
|
||||
type: Object
|
||||
},
|
||||
editMode: {
|
||||
type: String,
|
||||
require: false,
|
||||
default: 'preview'
|
||||
},
|
||||
active: {
|
||||
type: Boolean,
|
||||
require: false,
|
||||
default: false
|
||||
},
|
||||
// 是否禁用
|
||||
disabled: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
editShow: true,
|
||||
canEdit: false,
|
||||
// 初始化配置
|
||||
tinymceId: 'tinymce-view-' + this.element.id,
|
||||
myValue: '',
|
||||
init: {
|
||||
selector: '#tinymce-view-' + this.element.id,
|
||||
toolbar_items_size: 'small',
|
||||
language_url: '/tinymce/langs/zh_CN.js', // 汉化路径是自定义的，一般放在public或static里面
|
||||
language: 'zh_CN',
|
||||
skin_url: '/tinymce/skins/ui/oxide', // 皮肤
|
||||
content_css: '/tinymce/skins/content/default/content.css',
|
||||
plugins: 'advlist autolink link image lists charmap media wordcount table contextmenu directionality pagebreak', // 插件
|
||||
// 工具栏
|
||||
toolbar: 'undo redo |fontselect fontsizeselect |forecolor backcolor bold italic |underline strikethrough link| formatselect |' +
|
||||
'alignleft aligncenter alignright | bullist numlist |' +
|
||||
' blockquote subscript superscript removeformat | table image media | fullscreen ' +
|
||||
'| bdmap indent2em lineheight formatpainter axupimgs',
|
||||
toolbar_location: '/',
|
||||
font_formats: '微软雅黑=Microsoft YaHei;宋体=SimSun;黑体=SimHei;仿宋=FangSong;华文黑体=STHeiti;华文楷体=STKaiti;华文宋体=STSong;华文仿宋=STFangsong;Andale Mono=andale mono,times;Arial=arial,helvetica,sans-serif;Arial Black=arial black,avant garde;Book Antiqua=book antiqua,palatino;Comic Sans MS=comic sans ms,sans-serif;Courier New=courier new,courier;Georgia=georgia,palatino;Helvetica=helvetica;Impact=impact,chicago;Symbol=symbol;Tahoma=tahoma,arial,helvetica,sans-serif;Terminal=terminal,monaco;Times New Roman=times new roman,times;Trebuchet MS=trebuchet ms,geneva;Verdana=verdana,geneva;Webdings=webdings;Wingdings=wingdings',
|
||||
fontsize_formats: '12px 14px 16px 18px 20px 22px 24px 28px 32px 36px 48px 56px 72px', // 字体大小
|
||||
menubar: false,
|
||||
placeholder: '双击输入文字',
|
||||
inline: true, // 开启内联模式
|
||||
branding: false
|
||||
}
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
editStatus() {
|
||||
return this.editMode === 'edit' && !this.mobileLayoutStatus
|
||||
},
|
||||
...mapState([
|
||||
'mobileLayoutStatus'
|
||||
])
|
||||
},
|
||||
watch: {
|
||||
// 监听内容变化
|
||||
active(val) {
|
||||
const _this = this
|
||||
if (!val) {
|
||||
this.canEdit = false
|
||||
this.reShow()
|
||||
this.$nextTick(() => {
|
||||
_this.element.propValue.textValue = _this.myValue
|
||||
_this.myValue = _this.assignment(_this.myValue)
|
||||
})
|
||||
}
|
||||
},
|
||||
myValue(newValue) {
|
||||
console.log('myValue===' + newValue)
|
||||
// this.element.propValue.textValue = newValue
|
||||
// this.$store.state.styleChangeTimes++
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
bus.$on('fieldSelect-' + this.element.propValue.viewId, this.fieldSelect)
|
||||
tinymce.init({})
|
||||
this.myValue = this.assignment(this.element.propValue.textValue)
|
||||
},
|
||||
beforeDestroy() {
|
||||
bus.$off('fieldSelect-' + this.element.propValue.viewId)
|
||||
},
|
||||
methods: {
|
||||
assignment(content) {
|
||||
const on = content.match(/\[(.+?)\]/g)
|
||||
if (on) {
|
||||
on.forEach(itm => {
|
||||
const ele = itm.slice(1, -1)
|
||||
content = content.replace(itm, this.dataRowNameSelect[ele])
|
||||
})
|
||||
}
|
||||
return content
|
||||
},
|
||||
fieldSelect(field) {
|
||||
const value = '[' + field.name + ']'
|
||||
const ed = tinymce.get('tinymce-view-' + this.element.id)
|
||||
const range = ed.selection.getRng()
|
||||
const divNode = ed.getDoc().createElement('span')
|
||||
divNode.innerHTML = value
|
||||
range.insertNode(divNode)
|
||||
},
|
||||
onClick(e) {
|
||||
this.$emit('onClick', e, tinymce)
|
||||
},
|
||||
setEdit() {
|
||||
if (this.editStatus) {
|
||||
const _this = this
|
||||
this.canEdit = true
|
||||
this.element['editing'] = true
|
||||
this.reShow()
|
||||
this.$nextTick(() => {
|
||||
_this.myValue = _this.element.propValue.textValue
|
||||
})
|
||||
}
|
||||
},
|
||||
reShow() {
|
||||
this.editShow = false
|
||||
this.$nextTick(() => {
|
||||
this.editShow = true
|
||||
})
|
||||
},
|
||||
chartResize() {
|
||||
// ignore
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.rich-main-class {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow-y: auto!important;
|
||||
}
|
||||
::-webkit-scrollbar {
|
||||
width: 0px!important;
|
||||
height: 0px!important;
|
||||
}
|
||||
::v-deep ol {
|
||||
display: block!important;
|
||||
list-style-type: decimal;
|
||||
margin-block-start: 1em!important;
|
||||
margin-block-end: 1em!important;
|
||||
margin-inline-start: 0px!important;
|
||||
margin-inline-end: 0px!important;
|
||||
padding-inline-start: 40px!important;
|
||||
}
|
||||
::v-deep ul {
|
||||
display: block!important;
|
||||
list-style-type: disc;
|
||||
margin-block-start: 1em!important;
|
||||
margin-block-end: 1em!important;
|
||||
margin-inline-start: 0px!important;
|
||||
margin-inline-end: 0px!important;
|
||||
padding-inline-start: 40px!important;
|
||||
}
|
||||
::v-deep li {
|
||||
display: list-item!important;
|
||||
text-align: -webkit-match-parent!important;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -41,6 +41,16 @@
|
||||
@onJumpClick="jumpClick"
|
||||
@trigger-edit-click="pluginEditHandler"
|
||||
/>
|
||||
<de-rich-text-view
|
||||
v-else-if="richTextViewShowFlag"
|
||||
:ref="element.propValue.id"
|
||||
:element="element"
|
||||
:prop-value="element.propValue.textValue"
|
||||
:active="active"
|
||||
:edit-mode="editMode"
|
||||
:data-row-select="dataRowSelect"
|
||||
:data-row-name-select="dataRowNameSelect"
|
||||
/>
|
||||
<chart-component
|
||||
v-else-if="charViewShowFlag"
|
||||
:ref="element.propValue.id"
|
||||
@ -129,10 +139,12 @@ import PluginCom from '@/views/system/plugin/PluginCom'
|
||||
import LabelNormalText from '@/views/chart/components/normal/LabelNormalText'
|
||||
import { viewPropsSave } from '@/api/chart/chart'
|
||||
import { checkAddHttp } from '@/utils/urlUtils'
|
||||
import DeRichTextView from '@/components/canvas/custom-component/DeRichTextView'
|
||||
import Vue from 'vue'
|
||||
|
||||
export default {
|
||||
name: 'UserView',
|
||||
components: { LabelNormalText, PluginCom, ChartComponentS2, EditBarView, ChartComponent, TableNormal, LabelNormal, DrillPath, ChartComponentG2 },
|
||||
components: { DeRichTextView, LabelNormalText, PluginCom, ChartComponentS2, EditBarView, ChartComponent, TableNormal, LabelNormal, DrillPath, ChartComponentG2 },
|
||||
props: {
|
||||
element: {
|
||||
type: Object,
|
||||
@ -188,10 +200,18 @@ export default {
|
||||
type: String,
|
||||
required: false,
|
||||
default: 'NotProvided'
|
||||
},
|
||||
editMode: {
|
||||
type: String,
|
||||
require: false,
|
||||
default: 'preview'
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
dataRowNameSelect: {},
|
||||
dataRowSelect: {},
|
||||
curFields: [],
|
||||
isFirstLoad: true, // 是否是第一次加载
|
||||
refId: null,
|
||||
chart: BASE_CHART_STRING,
|
||||
@ -240,6 +260,9 @@ export default {
|
||||
editBarViewShowFlag() {
|
||||
return (this.active && this.inTab && !this.mobileLayoutStatus) && !this.showPosition.includes('multiplexing') || this.showPosition.includes('email-task')
|
||||
},
|
||||
richTextViewShowFlag() {
|
||||
return this.httpRequest.status && this.chart.type && this.chart.type === 'richTextView'
|
||||
},
|
||||
charViewShowFlag() {
|
||||
return this.httpRequest.status && this.chart.type && !this.chart.type.includes('table') && !this.chart.type.includes('text') && this.chart.type !== 'label' && this.renderComponent() === 'echarts'
|
||||
},
|
||||
@ -570,6 +593,7 @@ export default {
|
||||
this.drillFields = JSON.parse(JSON.stringify(response.data.drillFields))
|
||||
this.requestStatus = 'merging'
|
||||
this.mergeScale()
|
||||
this.initCurFields(this.chart)
|
||||
this.requestStatus = 'success'
|
||||
this.httpRequest.status = true
|
||||
} else {
|
||||
@ -598,6 +622,30 @@ export default {
|
||||
})
|
||||
}
|
||||
},
|
||||
initCurFields(chartDetails) {
|
||||
this.curFields = []
|
||||
const checkAllAxisStr = chartDetails.xaxis + chartDetails.xaxisExt + chartDetails.yaxis + chartDetails.yaxisExt + chartDetails.drillFields
|
||||
chartDetails.data.sourceFields.forEach(field => {
|
||||
if (checkAllAxisStr.indexOf(field.id) > -1) {
|
||||
this.curFields.push(field)
|
||||
}
|
||||
})
|
||||
// Get the corresponding relationship between id and value
|
||||
const nameIdMap = chartDetails.data.fields.reduce((pre, next) => {
|
||||
pre[next['dataeaseName']] = next['id']
|
||||
return pre
|
||||
}, {})
|
||||
const sourceFieldNameIdMap = chartDetails.data.fields.reduce((pre, next) => {
|
||||
pre[next['dataeaseName']] = next['name']
|
||||
return pre
|
||||
}, {})
|
||||
const rowData = chartDetails.data.tableRow[0]
|
||||
for (const key in rowData) {
|
||||
this.dataRowSelect[nameIdMap[key]] = rowData[key]
|
||||
this.dataRowNameSelect[sourceFieldNameIdMap[key]] = rowData[key]
|
||||
}
|
||||
Vue.set(this.element.propValue, 'innerType', chartDetails.type)
|
||||
},
|
||||
viewIdMatch(viewIds, viewId) {
|
||||
return !viewIds || viewIds.length === 0 || viewIds.includes(viewId)
|
||||
},
|
||||
|
||||
2
frontend/src/icons/svg/richTextView.svg
Normal file
2
frontend/src/icons/svg/richTextView.svg
Normal file
@ -0,0 +1,2 @@
|
||||
<?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 t="1660011842177" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4889" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css">@font-face { font-family: feedback-iconfont; src: url("//at.alicdn.com/t/font_1031158_u69w8yhxdu.woff2?t=1630033759944") format("woff2"), url("//at.alicdn.com/t/font_1031158_u69w8yhxdu.woff?t=1630033759944") format("woff"), url("//at.alicdn.com/t/font_1031158_u69w8yhxdu.ttf?t=1630033759944") format("truetype"); }
|
||||
</style></defs><path d="M218.316 307.727h87.886v205.06h-29.297v29.295h117.179v-29.294H364.79V307.727h87.882v29.293h29.294v-87.882H189.022v87.882h29.294v-29.293z m322.242 58.59h292.945v58.588H540.558v-58.588z m0 117.177h292.945v58.588H540.558v-58.588z m-351.536 117.18h644.481v58.588h-644.48v-58.587z m0 117.176h644.481v58.588h-644.48V717.85z m351.536-468.713h292.945v58.589H540.558v-58.589z m420.923 713.13H61.045V63.309h900.436v898.958z m-864.62-35.816h828.804V99.125H96.861V926.45z" p-id="4890"></path></svg>
|
||||
|
After Width: | Height: | Size: 1.2 KiB |
@ -719,6 +719,7 @@ export default {
|
||||
cas_reset: 'CAS switches back to the default login mode to access API:'
|
||||
},
|
||||
chart: {
|
||||
rich_text_view: 'Rich Text View',
|
||||
view_reset: 'View Reset',
|
||||
view_reset_tips: 'Discard Changes To View?',
|
||||
export_img: 'Export Img',
|
||||
@ -1120,6 +1121,7 @@ export default {
|
||||
slider: 'Slider',
|
||||
slider_range: 'Range',
|
||||
chart_no_senior: 'This chart type not support senior config,please look forward to.',
|
||||
chart_no_properties: 'This chart type not support properties config.',
|
||||
assist_line: 'Assist Line',
|
||||
field_fixed: 'Fixed',
|
||||
line_type_dotted: 'Dotted',
|
||||
@ -1805,6 +1807,7 @@ export default {
|
||||
jump: 'Jump',
|
||||
cancel_linkage: 'Cancel Linkage',
|
||||
switch_picture: 'Switch Picture',
|
||||
select_field: 'Select View Field',
|
||||
remove_all_linkage: 'Remove All Linkage',
|
||||
exit_un_march_linkage_field: 'Exit Un March Linkage Field',
|
||||
details: 'Details',
|
||||
|
||||
@ -720,6 +720,7 @@ export default {
|
||||
cas_reset: 'CAS切換回默認登錄方式訪問API：'
|
||||
},
|
||||
chart: {
|
||||
rich_text_view: '富文本视图',
|
||||
view_reset: '視圖重置',
|
||||
view_reset_tips: '放棄對視圖的修改？',
|
||||
export_img: '導出圖片',
|
||||
@ -1119,6 +1120,7 @@ export default {
|
||||
slider: '縮略軸',
|
||||
slider_range: '默認範圍',
|
||||
chart_no_senior: '當前圖表類型暫無高級配置，敬請期待',
|
||||
chart_no_properties: '當前圖表類型暫無样式配置.',
|
||||
assist_line: '輔助線',
|
||||
field_fixed: '固定值',
|
||||
line_type_dotted: '點',
|
||||
@ -1805,6 +1807,7 @@ export default {
|
||||
jump: '跳轉',
|
||||
cancel_linkage: '取消聯動',
|
||||
switch_picture: '更換圖片',
|
||||
select_field: '选择视图字段',
|
||||
remove_all_linkage: '清除所有聯動',
|
||||
exit_un_march_linkage_field: '存在未匹配聯動關繫的字段',
|
||||
details: '詳情',
|
||||
|
||||
@ -721,6 +721,7 @@ export default {
|
||||
cas_reset: 'CAS切换回默认登录方式访问API：'
|
||||
},
|
||||
chart: {
|
||||
rich_text_view: '富文本视图',
|
||||
view_reset: '视图重置',
|
||||
view_reset_tips: '放弃对视图的修改？',
|
||||
export_img: '导出图片',
|
||||
@ -1121,6 +1122,7 @@ export default {
|
||||
slider: '缩略轴',
|
||||
slider_range: '默认范围',
|
||||
chart_no_senior: '当前图表类型暂无高级配置，敬请期待',
|
||||
chart_no_properties: '当前图表类型暂无样式配置',
|
||||
assist_line: '辅助线',
|
||||
field_fixed: '固定值',
|
||||
line_type_dotted: '点',
|
||||
@ -1816,6 +1818,7 @@ export default {
|
||||
jump: '跳转',
|
||||
cancel_linkage: '取消联动',
|
||||
switch_picture: '更换图片',
|
||||
select_field: '选择视图字段',
|
||||
remove_all_linkage: '清除所有联动',
|
||||
exit_un_march_linkage_field: '存在未匹配联动关系的字段',
|
||||
details: '详情',
|
||||
|
||||
@ -54,6 +54,18 @@
|
||||
<div class="content unicode" style="display: block;">
|
||||
<ul class="icon_lists dib-box">
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon iconfont"></span>
|
||||
<div class="name">data-source-24</div>
|
||||
<div class="code-name">&#xe6ef;</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon iconfont"></span>
|
||||
<div class="name">重置</div>
|
||||
<div class="code-name">&#xe63c;</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon iconfont"></span>
|
||||
<div class="name">None_Select</div>
|
||||
@ -768,9 +780,9 @@
|
||||
<pre><code class="language-css"
|
||||
>@font-face {
|
||||
font-family: 'iconfont';
|
||||
src: url('iconfont.woff2?t=1658831065507') format('woff2'),
|
||||
url('iconfont.woff?t=1658831065507') format('woff'),
|
||||
url('iconfont.ttf?t=1658831065507') format('truetype');
|
||||
src: url('iconfont.woff2?t=1660024163434') format('woff2'),
|
||||
url('iconfont.woff?t=1660024163434') format('woff'),
|
||||
url('iconfont.ttf?t=1660024163434') format('truetype');
|
||||
}
|
||||
</code></pre>
|
||||
<h3 id="-iconfont-">第二步：定义使用 iconfont 的样式</h3>
|
||||
@ -796,6 +808,24 @@
|
||||
<div class="content font-class">
|
||||
<ul class="icon_lists dib-box">
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon iconfont icon-datasource-select"></span>
|
||||
<div class="name">
|
||||
data-source-24
|
||||
</div>
|
||||
<div class="code-name">.icon-datasource-select
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon iconfont icon-zhongzhi2"></span>
|
||||
<div class="name">
|
||||
重置
|
||||
</div>
|
||||
<div class="code-name">.icon-zhongzhi2
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon iconfont icon-None_Select"></span>
|
||||
<div class="name">
|
||||
@ -1867,6 +1897,22 @@
|
||||
<div class="content symbol">
|
||||
<ul class="icon_lists dib-box">
|
||||
|
||||
<li class="dib">
|
||||
<svg class="icon svg-icon" aria-hidden="true">
|
||||
<use xlink:href="#icon-datasource-select"></use>
|
||||
</svg>
|
||||
<div class="name">data-source-24</div>
|
||||
<div class="code-name">#icon-datasource-select</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<svg class="icon svg-icon" aria-hidden="true">
|
||||
<use xlink:href="#icon-zhongzhi2"></use>
|
||||
</svg>
|
||||
<div class="name">重置</div>
|
||||
<div class="code-name">#icon-zhongzhi2</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<svg class="icon svg-icon" aria-hidden="true">
|
||||
<use xlink:href="#icon-None_Select"></use>
|
||||
|
||||
@ -1,8 +1,8 @@
|
||||
@font-face {
|
||||
font-family: "iconfont"; /* Project id 2459092 */
|
||||
src: url('iconfont.woff2?t=1658831065507') format('woff2'),
|
||||
url('iconfont.woff?t=1658831065507') format('woff'),
|
||||
url('iconfont.ttf?t=1658831065507') format('truetype');
|
||||
src: url('iconfont.woff2?t=1660024163434') format('woff2'),
|
||||
url('iconfont.woff?t=1660024163434') format('woff'),
|
||||
url('iconfont.ttf?t=1660024163434') format('truetype');
|
||||
}
|
||||
|
||||
.iconfont {
|
||||
@ -13,6 +13,14 @@
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
.icon-datasource-select:before {
|
||||
content: "\e6ef";
|
||||
}
|
||||
|
||||
.icon-zhongzhi2:before {
|
||||
content: "\e63c";
|
||||
}
|
||||
|
||||
.icon-None_Select:before {
|
||||
content: "\e638";
|
||||
}
|
||||
|
||||
File diff suppressed because one or more lines are too long
@ -5,6 +5,20 @@
|
||||
"css_prefix_text": "icon-",
|
||||
"description": "",
|
||||
"glyphs": [
|
||||
{
|
||||
"icon_id": "586829",
|
||||
"name": "data-source-24",
|
||||
"font_class": "datasource-select",
|
||||
"unicode": "e6ef",
|
||||
"unicode_decimal": 59119
|
||||
},
|
||||
{
|
||||
"icon_id": "19670134",
|
||||
"name": "重置",
|
||||
"font_class": "zhongzhi2",
|
||||
"unicode": "e63c",
|
||||
"unicode_decimal": 58940
|
||||
},
|
||||
{
|
||||
"icon_id": "30874154",
|
||||
"name": "None_Select",
|
||||
|
||||
Binary file not shown.
Binary file not shown.
Binary file not shown.
@ -340,6 +340,15 @@ export const TYPE_CONFIGS = [
|
||||
]
|
||||
}
|
||||
},
|
||||
{
|
||||
render: 'antv',
|
||||
category: 'chart.chart_type_quota',
|
||||
value: 'richTextView',
|
||||
title: 'chart.rich_text_view',
|
||||
icon: 'richTextView',
|
||||
properties: [],
|
||||
propertyInner: {}
|
||||
},
|
||||
{
|
||||
render: 'antv',
|
||||
category: 'chart.chart_type_trend',
|
||||
|
||||
@ -832,7 +832,7 @@ export default {
|
||||
this.$store.dispatch('chart/setTableId', null)
|
||||
this.$store.dispatch('chart/setTableId', this.table.id)
|
||||
if (this.optFrom === 'panel') {
|
||||
this.$emit('newViewInfo', { 'id': response.data.id })
|
||||
this.$emit('newViewInfo', { 'id': response.data.id, 'type': response.data.type })
|
||||
} else {
|
||||
_this.expandedArray.push(response.data.sceneId)
|
||||
_this.currentKey = response.data.id
|
||||
|
||||
@ -3,7 +3,7 @@
|
||||
<el-tooltip :content="$t('chart.draw_back')">
|
||||
<el-button
|
||||
class="el-icon-d-arrow-right"
|
||||
style="position:absolute;left: 4px;top: 5px;z-index: 1000"
|
||||
style="position:absolute;left: 4px;top: 5px;z-index: 1"
|
||||
size="mini"
|
||||
circle
|
||||
@click="closePanelEdit"
|
||||
|
||||
@ -1,5 +1,8 @@
|
||||
<template>
|
||||
<el-row class="view-panel">
|
||||
<div v-if="properties.length===0" class="no-properties">
|
||||
{{ $t('chart.chart_no_properties') }}
|
||||
</div>
|
||||
<plugin-com
|
||||
v-if="pluginShow"
|
||||
style="overflow:auto;border-right: 1px solid #e6e6e6;height: 100%;width: 100%;"
|
||||
@ -8,7 +11,7 @@
|
||||
:obj="{view, param, chart, dimensionData, quotaData}"
|
||||
/>
|
||||
<div
|
||||
v-else
|
||||
v-if="!pluginShow&&properties.length>0"
|
||||
style="overflow:auto;border-right: 1px solid #e6e6e6;height: 100%;width: 100%;padding-right: 6px"
|
||||
class="attr-style theme-border-class"
|
||||
>
|
||||
@ -614,4 +617,13 @@ export default {
|
||||
.form-item ::v-deep .el-form-item__label{
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.no-properties {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
font-size: 12px;
|
||||
padding-top: 40px;
|
||||
overflow: auto;
|
||||
height: 100%;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1102,7 +1102,8 @@ export default {
|
||||
component = matrixBaseChange(deepCopy(componentTemp))
|
||||
const propValue = {
|
||||
id: newComponentId,
|
||||
viewId: newViewInfo.id
|
||||
viewId: newViewInfo.id,
|
||||
textValue: '双击输入文本内容'
|
||||
}
|
||||
component.propValue = propValue
|
||||
component.filters = []
|
||||
|
||||
Loading…
Reference in New Issue
Block a user