diff --git a/frontend/src/components/canvas/components/Editor/CloseBar.vue b/frontend/src/components/canvas/components/Editor/CloseBar.vue new file mode 100644 index 0000000000..80959e96f4 --- /dev/null +++ b/frontend/src/components/canvas/components/Editor/CloseBar.vue @@ -0,0 +1,59 @@ + + + + + diff --git a/frontend/src/components/canvas/components/Editor/ComponentWrapper.vue b/frontend/src/components/canvas/components/Editor/ComponentWrapper.vue index 8baba60614..1f79f447cc 100644 --- a/frontend/src/components/canvas/components/Editor/ComponentWrapper.vue +++ b/frontend/src/components/canvas/components/Editor/ComponentWrapper.vue @@ -6,29 +6,33 @@ @mousedown="elementMouseDown" > - - + + + + + + @@ -40,9 +44,10 @@ import { mapState } from 'vuex' import DeOutWidget from '@/components/dataease/DeOutWidget' import EditBar from '@/components/canvas/components/Editor/EditBar' import MobileCheckBar from '@/components/canvas/components/Editor/MobileCheckBar' +import CloseBar from '@/components/canvas/components/Editor/CloseBar' export default { - components: { MobileCheckBar, DeOutWidget, EditBar }, + components: { CloseBar, MobileCheckBar, DeOutWidget, EditBar }, mixins: [mixins], props: { config: { @@ -64,11 +69,20 @@ export default { type: Boolean, required: false, default: true + }, + terminal: { + type: String, + default: 'pc' + } + }, + data() { + return { + previewVisible: false } }, computed: { componentActiveFlag() { - return this.curComponent && this.config === this.curComponent + return (this.curComponent && this.config === this.curComponent) && !this.previewVisible }, curGap() { return this.config.auxiliaryMatrix ? this.componentGap : 0 @@ -156,7 +170,14 @@ export default { this.$store.commit('setCurComponent', { component: this.config, index: this.index }) }, showViewDetails() { - this.$refs.wrapperChild.openChartDetailsDialog() + if (this.terminal === 'pc') { + this.$refs.wrapperChild.openChartDetailsDialog() + } else { + this.previewVisible = true + } + }, + closePreview() { + this.previewVisible = false } } } diff --git a/frontend/src/components/canvas/components/Editor/EditBar.vue b/frontend/src/components/canvas/components/Editor/EditBar.vue index 932598dc01..c10fc98aac 100644 --- a/frontend/src/components/canvas/components/Editor/EditBar.vue +++ b/frontend/src/components/canvas/components/Editor/EditBar.vue @@ -1,10 +1,10 @@ @@ -54,6 +53,10 @@ export default { type: String, required: false, default: 'preview' + }, + previewVisible: { + type: Boolean, + default: false } }, data() { @@ -70,6 +73,14 @@ export default { mounted() { }, computed: { + // 联动区域按钮显示 + linkageAreaShow() { + return this.linkageSettingStatus && this.element !== this.curLinkageView && this.element.type === 'view' + }, + // 编辑或预览区域显示 + normalAreaShow() { + return !this.linkageSettingStatus + }, existLinkage() { let linkageFiltersCount = 0 this.componentData.forEach(item => { @@ -102,6 +113,9 @@ export default { beforeDestroy() { }, methods: { + closePreview() { + this.$emit('closePreview') + }, createTimer() { if (!this.timer) { this.timer = setInterval(() => { diff --git a/frontend/src/components/canvas/components/Editor/Preview.vue b/frontend/src/components/canvas/components/Editor/Preview.vue index d2f35995c4..e06c1ef7e8 100644 --- a/frontend/src/components/canvas/components/Editor/Preview.vue +++ b/frontend/src/components/canvas/components/Editor/Preview.vue @@ -19,6 +19,7 @@ :config="item" :search-count="searchCount" :in-screen="inScreen" + :terminal="terminal" /> + + + + + + + + + + + + + + + diff --git a/frontend/src/styles/deicon/demo_index.html b/frontend/src/styles/deicon/demo_index.html index 2a79fc1d42..bd13b8ef1a 100644 --- a/frontend/src/styles/deicon/demo_index.html +++ b/frontend/src/styles/deicon/demo_index.html @@ -38,7 +38,7 @@

- +

    - + +
  • + +
    关闭
    +
    
    +
  • +
  • 矩形
    
  • - +
  • 移动端
    
  • - +
  • video
    
  • - +
  • 悬浮按钮发动态
    
  • - +
  • 吸附选择
    
  • - +
  • margin
    
  • - +
  • padding
    
  • - +
  • 时间
    
  • - +
  • 时间格式转换
    
  • - +
  • 超链接
    
  • - +
  • 科学技术
    
  • - +
  • 符号-数据矩阵
    
  • - +
  • 视图矩阵_o
    
  • - +
  • 悬浮
    
  • - +
  • 右悬浮-选中
    
  • - +
  • 悬浮
    
  • - +
  • 悬浮按钮
    
  • - +
  • 44.tabs
    
  • - +
  • 洗浴
    
  • - +
  • 线性图标-取消下钻
    
  • - +
  • 线性图标-取消下钻
    
  • - +
  • 联动
    
  • - +
  • 下钻
    
  • - +
  • 上钻
    
  • - +
  • 取消联动
    
  • - +
  • edit-2
    
  • - +
  • edit-2
    
  • - +
  • 详情
    
  • - +
  • 弧形框
    
  • - +
  • 弧形框
    
  • - +
  • 透明
    
  • - +
  • 弧度
    
  • - +
  • 放大
    
  • - +
  • 设 置
    
  • - +
  • 屏幕_全屏
    
  • - +
  • font-weight-bold
    
  • - +
  • letter_spacing
    
  • - +
  • letter-spacing
    
  • - +
  • 字体颜色
    
  • - +
  • format_letter_spacing_2
    
  • - +
  • font_size
    
  • - +
  • 居中
    
  • - +
  • 居右
    
  • - +
  • 居左
    
  • - +
  • 实线
    
  • - +
  • 画笔
    
  • - +
  • 点线
    
  • - +
  • 虚线
    
  • - +
  • 背景色‘
    
  • - +
  • 矩形
    
  • - +
  • text
    
  • - +
  • picture
    
  • - +
  • 输入
    
  • - +
  • 
  • - +
  • 查询搜索
    
  • - +
  • 季度
    
  • - +
  • 数字顺序
    
  • - +
  • 树列表
    
  • - +
  • 日期
    
  • - +
  • 左侧-区间
    
  • - +
  • 列表
    
  • - +
  • 下拉框
    
  • - +
  • 下拉树
    
  • - +
  • 重置
    
  • - +
  • 
  • - +
  • 
  • - +
  • 
  • - +

Unicode 引用

@@ -474,9 +480,9 @@
@font-face {
   font-family: 'iconfont';
-  src: url('iconfont.woff2?t=1639546982753') format('woff2'),
-       url('iconfont.woff?t=1639546982753') format('woff'),
-       url('iconfont.ttf?t=1639546982753') format('truetype');
+  src: url('iconfont.woff2?t=1639622225820') format('woff2'),
+       url('iconfont.woff?t=1639622225820') format('woff'),
+       url('iconfont.ttf?t=1639622225820') format('truetype');
 }
 

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

@@ -501,7 +507,16 @@
    - + +
  • + +
    + 关闭 +
    +
    .icon-guanbi +
    +
  • +
  • @@ -510,7 +525,7 @@
    .icon-juxing1
  • - +
  • @@ -519,7 +534,7 @@
    .icon-yidongduan
  • - +
  • @@ -528,7 +543,7 @@
    .icon-video
  • - +
  • @@ -537,7 +552,7 @@
    .icon-xuanfuanniufadongtai
  • - +
  • @@ -546,7 +561,7 @@
    .icon-xifuxuanze
  • - +
  • @@ -555,7 +570,7 @@
    .icon-margin
  • - +
  • @@ -564,7 +579,7 @@
    .icon-padding
  • - +
  • @@ -573,7 +588,7 @@
    .icon-shijian
  • - +
  • @@ -582,7 +597,7 @@
    .icon-shijiangeshizhuanhuan
  • - +
  • @@ -591,7 +606,7 @@
    .icon-chaolianjie
  • - +
  • @@ -600,7 +615,7 @@
    .icon-kexuejishu
  • - +
  • @@ -609,7 +624,7 @@
    .icon-shujujuzhen
  • - +
  • @@ -618,7 +633,7 @@
    .icon-shitujuzhen_o
  • - +
  • @@ -627,7 +642,7 @@
    .icon-xuanfu1
  • - +
  • @@ -636,7 +651,7 @@
    .icon-youxuanfu-copy
  • - +
  • @@ -645,7 +660,7 @@
    .icon-xuanfu
  • - +
  • @@ -654,7 +669,7 @@
    .icon-xuanfuanniu
  • - +
  • @@ -663,7 +678,7 @@
    .icon-tabs
  • - +
  • @@ -672,7 +687,7 @@
    .icon-xiyu
  • - +
  • @@ -681,7 +696,7 @@
    .icon-quxiaoshangzuan
  • - +
  • @@ -690,7 +705,7 @@
    .icon-quxiaoxiazuan
  • - +
  • @@ -699,7 +714,7 @@
    .icon-linkage
  • - +
  • @@ -708,7 +723,7 @@
    .icon-xiazuan
  • - +
  • @@ -717,7 +732,7 @@
    .icon-shangzuan
  • - +
  • @@ -726,7 +741,7 @@
    .icon-quxiaoliandong
  • - +
  • @@ -735,7 +750,7 @@
    .icon-edit-outline
  • - +
  • @@ -744,7 +759,7 @@
    .icon-edit
  • - +
  • @@ -753,7 +768,7 @@
    .icon-xiangqing1
  • - +
  • @@ -762,7 +777,7 @@
    .icon-weibiaoti-1
  • - +
  • @@ -771,7 +786,7 @@
    .icon-weibiaoti-
  • - +
  • @@ -780,7 +795,7 @@
    .icon-touming
  • - +
  • @@ -789,7 +804,7 @@
    .icon-fangxing-
  • - +
  • @@ -798,7 +813,7 @@
    .icon-fangda
  • - +
  • @@ -807,7 +822,7 @@
    .icon-shezhi
  • - +
  • @@ -816,7 +831,7 @@
    .icon-quanping1
  • - +
  • @@ -825,7 +840,7 @@
    .icon-font-weight-bold
  • - +
  • @@ -834,7 +849,7 @@
    .icon-letter_spacing
  • - +
  • @@ -843,7 +858,7 @@
    .icon-letter-spacing
  • - +
  • @@ -852,7 +867,7 @@
    .icon-zimua
  • - +
  • @@ -861,7 +876,7 @@
    .icon-format_letter_spacing_
  • - +
  • @@ -870,7 +885,7 @@
    .icon-font_size
  • - +
  • @@ -879,7 +894,7 @@
    .icon-align-center
  • - +
  • @@ -888,7 +903,7 @@
    .icon-juyou
  • - +
  • @@ -897,7 +912,7 @@
    .icon-juzuo
  • - +
  • @@ -906,7 +921,7 @@
    .icon-solid_line
  • - +
  • @@ -915,7 +930,7 @@
    .icon-huabi
  • - +
  • @@ -924,7 +939,7 @@
    .icon-dianxian
  • - +
  • @@ -933,7 +948,7 @@
    .icon-xuxian
  • - +
  • @@ -942,7 +957,7 @@
    .icon-beijingse1
  • - +
  • @@ -951,7 +966,7 @@
    .icon-juxing
  • - +
  • @@ -960,7 +975,7 @@
    .icon-text
  • - +
  • @@ -969,7 +984,7 @@
    .icon-picture
  • - +
  • @@ -978,7 +993,7 @@
    .icon-shuru
  • - +
  • @@ -987,7 +1002,7 @@
    .icon-tree
  • - +
  • @@ -996,7 +1011,7 @@
    .icon-chaxunsousuo
  • - +
  • @@ -1005,7 +1020,7 @@
    .icon-jidu
  • - +
  • @@ -1014,7 +1029,7 @@
    .icon-shuzishunxu
  • - +
  • @@ -1023,7 +1038,7 @@
    .icon-Group-
  • - +
  • @@ -1032,7 +1047,7 @@
    .icon-riqi
  • - +
  • @@ -1041,7 +1056,7 @@
    .icon-zuoce-qujian
  • - +
  • @@ -1050,7 +1065,7 @@
    .icon-liebiao
  • - +
  • @@ -1059,7 +1074,7 @@
    .icon-xialakuang
  • - +
  • @@ -1068,7 +1083,7 @@
    .icon-xialashu
  • - +
  • @@ -1077,7 +1092,7 @@
    .icon-zhongzhi
  • - +
  • @@ -1086,7 +1101,7 @@
    .icon-ri
  • - +
  • @@ -1095,7 +1110,7 @@
    .icon-nian
  • - +
  • @@ -1104,7 +1119,7 @@
    .icon-yue
  • - +

font-class 引用

@@ -1131,7 +1146,15 @@
    - + +
  • + +
    关闭
    +
    #icon-guanbi
    +
  • +
  • 矩形
    #icon-juxing1
  • - +
  • 移动端
    #icon-yidongduan
  • - +
  • video
    #icon-video
  • - +
  • 悬浮按钮发动态
    #icon-xuanfuanniufadongtai
  • - +
  • 吸附选择
    #icon-xifuxuanze
  • - +
  • margin
    #icon-margin
  • - +
  • padding
    #icon-padding
  • - +
  • 时间
    #icon-shijian
  • - +
  • 时间格式转换
    #icon-shijiangeshizhuanhuan
  • - +
  • 超链接
    #icon-chaolianjie
  • - +
  • 科学技术
    #icon-kexuejishu
  • - +
  • 符号-数据矩阵
    #icon-shujujuzhen
  • - +
  • 视图矩阵_o
    #icon-shitujuzhen_o
  • - +
  • 悬浮
    #icon-xuanfu1
  • - +
  • 右悬浮-选中
    #icon-youxuanfu-copy
  • - +
  • 悬浮
    #icon-xuanfu
  • - +
  • 悬浮按钮
    #icon-xuanfuanniu
  • - +
  • 44.tabs
    #icon-tabs
  • - +
  • 洗浴
    #icon-xiyu
  • - +
  • 线性图标-取消下钻
    #icon-quxiaoshangzuan
  • - +
  • 线性图标-取消下钻
    #icon-quxiaoxiazuan
  • - +
  • 联动
    #icon-linkage
  • - +
  • 下钻
    #icon-xiazuan
  • - +
  • 上钻
    #icon-shangzuan
  • - +
  • 取消联动
    #icon-quxiaoliandong
  • - +
  • edit-2
    #icon-edit-outline
  • - +
  • edit-2
    #icon-edit
  • - +
  • 详情
    #icon-xiangqing1
  • - +
  • 弧形框
    #icon-weibiaoti-1
  • - +
  • 弧形框
    #icon-weibiaoti-
  • - +
  • 透明
    #icon-touming
  • - +
  • 弧度
    #icon-fangxing-
  • - +
  • 放大
    #icon-fangda
  • - +
  • 设 置
    #icon-shezhi
  • - +
  • 屏幕_全屏
    #icon-quanping1
  • - +
  • font-weight-bold
    #icon-font-weight-bold
  • - +
  • letter_spacing
    #icon-letter_spacing
  • - +
  • letter-spacing
    #icon-letter-spacing
  • - +
  • 字体颜色
    #icon-zimua
  • - +
  • format_letter_spacing_2
    #icon-format_letter_spacing_
  • - +
  • font_size
    #icon-font_size
  • - +
  • 居中
    #icon-align-center
  • - +
  • 居右
    #icon-juyou
  • - +
  • 居左
    #icon-juzuo
  • - +
  • 实线
    #icon-solid_line
  • - +
  • 画笔
    #icon-huabi
  • - +
  • 点线
    #icon-dianxian
  • - +
  • 虚线
    #icon-xuxian
  • - +
  • 背景色‘
    #icon-beijingse1
  • - +
  • 矩形
    #icon-juxing
  • - +
  • text
    #icon-text
  • - +
  • picture
    #icon-picture
  • - +
  • 输入
    #icon-shuru
  • - +
  • #icon-tree
  • - +
  • 查询搜索
    #icon-chaxunsousuo
  • - +
  • 季度
    #icon-jidu
  • - +
  • 数字顺序
    #icon-shuzishunxu
  • - +
  • 树列表
    #icon-Group-
  • - +
  • 日期
    #icon-riqi
  • - +
  • 左侧-区间
    #icon-zuoce-qujian
  • - +
  • 列表
    #icon-liebiao
  • - +
  • 下拉框
    #icon-xialakuang
  • - +
  • 下拉树
    #icon-xialashu
  • - +
  • 重置
    #icon-zhongzhi
  • - +
  • #icon-ri
  • - +
  • #icon-nian
  • - +
  • #icon-yue
  • - +

Symbol 引用

diff --git a/frontend/src/styles/deicon/iconfont.css b/frontend/src/styles/deicon/iconfont.css index 4291faabce..45af36e21b 100644 --- a/frontend/src/styles/deicon/iconfont.css +++ b/frontend/src/styles/deicon/iconfont.css @@ -1,8 +1,8 @@ @font-face { font-family: "iconfont"; /* Project id 2459092 */ - src: url('iconfont.woff2?t=1639546982753') format('woff2'), - url('iconfont.woff?t=1639546982753') format('woff'), - url('iconfont.ttf?t=1639546982753') format('truetype'); + src: url('iconfont.woff2?t=1639622225820') format('woff2'), + url('iconfont.woff?t=1639622225820') format('woff'), + url('iconfont.ttf?t=1639622225820') format('truetype'); } .iconfont { @@ -13,6 +13,10 @@ -moz-osx-font-smoothing: grayscale; } +.icon-guanbi:before { + content: "\e60d"; +} + .icon-juxing1:before { content: "\e67e"; } diff --git a/frontend/src/styles/deicon/iconfont.js b/frontend/src/styles/deicon/iconfont.js index 26a4b7e445..1e6df8ac58 100644 --- a/frontend/src/styles/deicon/iconfont.js +++ b/frontend/src/styles/deicon/iconfont.js @@ -1 +1 @@ -!function(c){var h,l,a,v,t,i='',z=(z=document.getElementsByTagName("script"))[z.length-1].getAttribute("data-injectcss"),o=function(c,h){h.parentNode.insertBefore(c,h)};if(z&&!c.__iconfont__svg__cssinject__){c.__iconfont__svg__cssinject__=!0;try{document.write("")}catch(c){console&&console.log(c)}}function m(){t||(t=!0,a())}function s(){try{v.documentElement.doScroll("left")}catch(c){return void setTimeout(s,50)}m()}h=function(){var c,h;(h=document.createElement("div")).innerHTML=i,i=null,(c=h.getElementsByTagName("svg")[0])&&(c.setAttribute("aria-hidden","true"),c.style.position="absolute",c.style.width=0,c.style.height=0,c.style.overflow="hidden",h=c,(c=document.body).firstChild?o(h,c.firstChild):c.appendChild(h))},document.addEventListener?~["complete","loaded","interactive"].indexOf(document.readyState)?setTimeout(h,0):(l=function(){document.removeEventListener("DOMContentLoaded",l,!1),h()},document.addEventListener("DOMContentLoaded",l,!1)):document.attachEvent&&(a=h,v=c.document,t=!1,s(),v.onreadystatechange=function(){"complete"==v.readyState&&(v.onreadystatechange=null,m())})}(window); \ No newline at end of file +!function(c){var h,l,a,v,t,i='',z=(z=document.getElementsByTagName("script"))[z.length-1].getAttribute("data-injectcss"),o=function(c,h){h.parentNode.insertBefore(c,h)};if(z&&!c.__iconfont__svg__cssinject__){c.__iconfont__svg__cssinject__=!0;try{document.write("")}catch(c){console&&console.log(c)}}function m(){t||(t=!0,a())}function s(){try{v.documentElement.doScroll("left")}catch(c){return void setTimeout(s,50)}m()}h=function(){var c,h;(h=document.createElement("div")).innerHTML=i,i=null,(c=h.getElementsByTagName("svg")[0])&&(c.setAttribute("aria-hidden","true"),c.style.position="absolute",c.style.width=0,c.style.height=0,c.style.overflow="hidden",h=c,(c=document.body).firstChild?o(h,c.firstChild):c.appendChild(h))},document.addEventListener?~["complete","loaded","interactive"].indexOf(document.readyState)?setTimeout(h,0):(l=function(){document.removeEventListener("DOMContentLoaded",l,!1),h()},document.addEventListener("DOMContentLoaded",l,!1)):document.attachEvent&&(a=h,v=c.document,t=!1,s(),v.onreadystatechange=function(){"complete"==v.readyState&&(v.onreadystatechange=null,m())})}(window); diff --git a/frontend/src/styles/deicon/iconfont.json b/frontend/src/styles/deicon/iconfont.json index 87bfba3040..9ca1419ce4 100644 --- a/frontend/src/styles/deicon/iconfont.json +++ b/frontend/src/styles/deicon/iconfont.json @@ -5,6 +5,13 @@ "css_prefix_text": "icon-", "description": "", "glyphs": [ + { + "icon_id": "1367318", + "name": "关闭", + "font_class": "guanbi", + "unicode": "e60d", + "unicode_decimal": 58893 + }, { "icon_id": "23446403", "name": "矩形", diff --git a/frontend/src/styles/deicon/iconfont.ttf b/frontend/src/styles/deicon/iconfont.ttf index 1ad290994a..c19298b658 100644 Binary files a/frontend/src/styles/deicon/iconfont.ttf and b/frontend/src/styles/deicon/iconfont.ttf differ diff --git a/frontend/src/styles/deicon/iconfont.woff b/frontend/src/styles/deicon/iconfont.woff index eff5bc0451..f079466170 100644 Binary files a/frontend/src/styles/deicon/iconfont.woff and b/frontend/src/styles/deicon/iconfont.woff differ diff --git a/frontend/src/styles/deicon/iconfont.woff2 b/frontend/src/styles/deicon/iconfont.woff2 index 6a9351de38..69569792ff 100644 Binary files a/frontend/src/styles/deicon/iconfont.woff2 and b/frontend/src/styles/deicon/iconfont.woff2 differ