diff --git a/frontend/src/components/DeDrag/index.vue b/frontend/src/components/DeDrag/index.vue index 8ada2505de..aed6e0e39e 100644 --- a/frontend/src/components/DeDrag/index.vue +++ b/frontend/src/components/DeDrag/index.vue @@ -42,6 +42,7 @@ @resizeView="resizeView" @linkJumpSet="linkJumpSet" @boardSet="boardSet" + @fieldSelect="fieldSelect" />
-
+
@@ -22,10 +22,10 @@ - + - + @@ -38,6 +38,15 @@ + + + + @@ -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')) { diff --git a/frontend/src/components/canvas/components/Editor/SettingMenu.vue b/frontend/src/components/canvas/components/Editor/SettingMenu.vue index ce84def1ea..a2ba3c6db2 100644 --- a/frontend/src/components/canvas/components/Editor/SettingMenu.vue +++ b/frontend/src/components/canvas/components/Editor/SettingMenu.vue @@ -20,9 +20,9 @@ - {{ $t('panel.linkage_setting') }} + {{ $t('panel.linkage_setting') }} {{ $t('panel.add_tab') }} - {{ $t('panel.setting_jump') }} + {{ $t('panel.setting_jump') }} {{ $t('panel.component_style') }} @@ -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') { diff --git a/frontend/src/components/canvas/components/Editor/fieldsList.vue b/frontend/src/components/canvas/components/Editor/fieldsList.vue new file mode 100644 index 0000000000..786b251a76 --- /dev/null +++ b/frontend/src/components/canvas/components/Editor/fieldsList.vue @@ -0,0 +1,55 @@ + + + + + diff --git a/frontend/src/components/canvas/custom-component/DeRichTextView.vue b/frontend/src/components/canvas/custom-component/DeRichTextView.vue new file mode 100644 index 0000000000..d46d9eba12 --- /dev/null +++ b/frontend/src/components/canvas/custom-component/DeRichTextView.vue @@ -0,0 +1,211 @@ + + + + + + diff --git a/frontend/src/components/canvas/custom-component/UserView.vue b/frontend/src/components/canvas/custom-component/UserView.vue index e22043f639..85e8da8fed 100644 --- a/frontend/src/components/canvas/custom-component/UserView.vue +++ b/frontend/src/components/canvas/custom-component/UserView.vue @@ -41,6 +41,16 @@ @onJumpClick="jumpClick" @trigger-edit-click="pluginEditHandler" /> + { + 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) }, diff --git a/frontend/src/icons/svg/richTextView.svg b/frontend/src/icons/svg/richTextView.svg new file mode 100644 index 0000000000..91d5c98d31 --- /dev/null +++ b/frontend/src/icons/svg/richTextView.svg @@ -0,0 +1,2 @@ + \ No newline at end of file diff --git a/frontend/src/lang/en.js b/frontend/src/lang/en.js index f7f3f79a5c..cf20815ec1 100644 --- a/frontend/src/lang/en.js +++ b/frontend/src/lang/en.js @@ -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', @@ -1801,6 +1803,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', diff --git a/frontend/src/lang/tw.js b/frontend/src/lang/tw.js index ab7cd56da9..9035f748f6 100644 --- a/frontend/src/lang/tw.js +++ b/frontend/src/lang/tw.js @@ -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: '點', @@ -1801,6 +1803,7 @@ export default { jump: '跳轉', cancel_linkage: '取消聯動', switch_picture: '更換圖片', + select_field: '选择视图字段', remove_all_linkage: '清除所有聯動', exit_un_march_linkage_field: '存在未匹配聯動關繫的字段', details: '詳情', diff --git a/frontend/src/lang/zh.js b/frontend/src/lang/zh.js index 557f002abe..257195397a 100644 --- a/frontend/src/lang/zh.js +++ b/frontend/src/lang/zh.js @@ -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: '点', @@ -1812,6 +1814,7 @@ export default { jump: '跳转', cancel_linkage: '取消联动', switch_picture: '更换图片', + select_field: '选择视图字段', remove_all_linkage: '清除所有联动', exit_un_march_linkage_field: '存在未匹配联动关系的字段', details: '详情', diff --git a/frontend/src/styles/deicon/demo_index.html b/frontend/src/styles/deicon/demo_index.html index 381228577f..a779f9a1a8 100644 --- a/frontend/src/styles/deicon/demo_index.html +++ b/frontend/src/styles/deicon/demo_index.html @@ -54,6 +54,18 @@
    +
  • + +
    data-source-24
    +
    
    +
    • + +
  • + +
    重置
    +
    
    +
    • +
  • None_Select
    @@ -768,9 +780,9 @@ 
    @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');
 }

    第二步：定义使用 iconfont 的样式

    @@ -796,6 +808,24 @@
      +
    • + +
      + data-source-24 +
      +
      .icon-datasource-select +
      +
      • + +
    • + +
      + 重置 +
      +
      .icon-zhongzhi2 +
      +
      • +
    • @@ -1867,6 +1897,22 @@
        +
      • + +
        data-source-24
        +
        #icon-datasource-select
        +
        • + +
      • + +
        重置
        +
        #icon-zhongzhi2
        +
        • +
      • + {{ $t('chart.chart_no_properties') }} +
        @@ -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%; + } diff --git a/frontend/src/views/panel/edit/index.vue b/frontend/src/views/panel/edit/index.vue index 9b2e24c949..d464a0caf0 100644 --- a/frontend/src/views/panel/edit/index.vue +++ b/frontend/src/views/panel/edit/index.vue @@ -1091,7 +1091,8 @@ export default { component = matrixBaseChange(deepCopy(componentTemp)) const propValue = { id: newComponentId, - viewId: newViewInfo.id + viewId: newViewInfo.id, + textValue: '双击输入文本内容' } component.propValue = propValue component.filters = []