feat: 仪表板增加Web组件

backend/pom.xml

@@ -420,7 +420,7 @@
                 </dependencies>
             </plugin>
 
-            
+
         </plugins>
     </build>
 
@@ -486,7 +486,7 @@
             </properties>
         </profile>
     </profiles>
-    
+
 
     <repositories>
         <repository>

backend/src/main/java/io/dataease/config/WebSecurityConfig.java

@@ -0,0 +1,9 @@
+package io.dataease.config;
+
+/**
+ * Author: wangjiahao
+ * Date: 2022/3/27
+ * Description:
+ */
+public class WebSecurityConfig {
+}

frontend/package.json

@@ -54,6 +54,7 @@
     "vue-axios": "3.2.4",
     "vue-clipboard2": "0.3.1",
     "vue-codemirror": "^4.0.6",
+    "vue-friendly-iframe": "^0.20.0",
     "vue-fullscreen": "^2.5.2",
     "vue-i18n": "7.3.2",
     "vue-proportion-directive": "^1.1.0",

frontend/src/components/canvas/components/Editor/FrameLinks.vue

@@ -0,0 +1,130 @@
+<template>
+  <el-popover
+    ref="popover"
+    width="400"
+    trigger="click"
+  >
+    <el-row>
+      <el-form ref="form" size="mini" label-width="70px">
+        <el-form-item :label="'Tips:'">
+          <span style="color: #909399; font-size: 8px;margin-left: 3px">
+            {{ $t('panel.web_set_tips') }}
+          </span>
+        </el-form-item>
+        <el-form-item :label="$t('panel.web_url')">
+          <el-input v-model="linkInfoTemp.src" />
+        </el-form-item>
+        <el-form-item>
+          <el-button type="primary" @click="onSubmit">{{ $t('panel.confirm') }}</el-button>
+          <el-button @click="onClose">{{ $t('panel.cancel') }}</el-button>
+        </el-form-item>
+      </el-form>
+    </el-row>
+    <i slot="reference" class="icon iconfont icon-chaolianjie" />
+  </el-popover>
+</template>
+
+<script>
+import { mapState } from 'vuex'
+import { deepCopy } from '@/components/canvas/utils/utils'
+
+export default {
+  props: {
+    linkInfo: {
+      type: Object,
+      required: true
+    }
+  },
+  data() {
+    return {
+      linkInfoTemp: null,
+      componentType: null,
+      linkageActiveStatus: false,
+      editFilter: [
+        'view',
+        'custom'
+      ]
+    }
+  },
+  watch: {
+    linkInfo: {
+      handler: function() {
+        this.init()
+      },
+      deep: true
+    }
+  },
+  created() {
+    this.init()
+  },
+  mounted() {
+  },
+  computed: {
+    ...mapState([
+      'curComponent'
+    ])
+  },
+  methods: {
+    init() {
+      this.linkInfoTemp = deepCopy(this.linkInfo)
+    },
+    onSubmit() {
+      this.curComponent.frameLinks = this.linkInfoTemp
+      this.$store.state.styleChangeTimes++
+      this.popoverClose()
+    },
+    onClose() {
+      this.$emit('close')
+      this.popoverClose()
+    },
+    popoverClose() {
+      this.$refs.popover.showPopper = false
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+  .slot-class{
+    color: white;
+  }
+
+  .bottom {
+    margin-top: 20px;
+    text-align: center;
+
+  }
+  .ellip{
+    /*width: 100%;*/
+    margin-left: 10px;
+    margin-right: 10px;
+    overflow: hidden;/*超出部分隐藏*/
+    white-space: nowrap;/*不换行*/
+    text-overflow:ellipsis;/*超出部分文字以...显示*/
+    background-color: #f7f8fa;
+    color: #3d4d66;
+    font-size: 12px;
+    line-height: 24px;
+    height: 24px;
+    border-radius: 3px;
+  }
+
+  .select-filed{
+    /*width: 100%;*/
+    margin-left: 10px;
+    margin-right: 10px;
+    overflow: hidden;/*超出部分隐藏*/
+    white-space: nowrap;/*不换行*/
+    text-overflow:ellipsis;/*超出部分文字以...显示*/
+    color: #3d4d66;
+    font-size: 12px;
+    line-height: 35px;
+    height: 35px;
+    border-radius: 3px;
+  }
+  >>>.el-popover{
+    height: 200px;
+    overflow: auto;
+  }
+
+</style>

frontend/src/components/canvas/components/TextAttr.vue

@@ -134,6 +134,11 @@
         </el-tooltip>
       </div>
 
+      <div v-if="attrShow('frameLinks')" style="width: 20px;float: left;margin-top: 2px;margin-left: 2px;">
+        <el-tooltip content="网页地址">
+          <FrameLinks :link-info="curComponent.frameLinks" />
+        </el-tooltip>
+      </div>
       <div v-if="attrShow('date-format')" style="width: 20px;float: left;margin-top: 2px;margin-left: 10px;">
         <el-tooltip content="日期格式">
           <date-format :format-info="curComponent.formatInfo" />
@@ -156,9 +161,10 @@ import Hyperlinks from '@/components/canvas/components/Editor/Hyperlinks'
 import VideoLinks from '@/components/canvas/components/Editor/VideoLinks'
 import DateFormat from '@/components/canvas/components/Editor/DateFormat'
 import { COLOR_PANEL } from '@/views/chart/chart/chart'
+import FrameLinks from '@/components/canvas/components/Editor/FrameLinks'
 
 export default {
-  components: { Hyperlinks, DateFormat, VideoLinks },
+  components: { FrameLinks, Hyperlinks, DateFormat, VideoLinks },
   props: {
     scrollLeft: {
       type: Number,
@@ -292,6 +298,10 @@ export default {
       'de-video': [
         'opacity',
         'videoLinks'
+      ],
+      'de-frame': [
+        'opacity',
+        'frameLinks'
       ]
     }
   },

frontend/src/components/canvas/custom-component/DeFrame.vue

@@ -0,0 +1,106 @@
+<template>
+  <el-row class="main-frame">
+    <div v-if="element.frameLinks.src" class="main-frame">
+      <iframe id="iframe" :src="element.frameLinks.src" scrolling="auto" frameborder="0" class="main-frame" />
+      <div v-if="editMode==='edit'" class="frame-mask">
+        <span style="opacity: 1;">
+          <span style="font-weight: bold;color: lawngreen;">{{ $t('panel.edit_web_tips') }}</span>
+        </span>
+      </div>
+    </div>
+    <div v-else class="info-class">
+      {{ $t('panel.web_add_tips') }}
+    </div>
+  </el-row>
+</template>
+
+<script>
+import { mapState } from 'vuex'
+import NProgress from 'nprogress'
+export default {
+  name: 'DeVideo',
+  props: {
+    propValue: {
+      type: String,
+      require: true
+    },
+    element: {
+      type: Object
+    },
+    editMode: {
+      type: String,
+      require: false,
+      default: 'edit'
+    },
+    active: {
+      type: Boolean,
+      require: false,
+      default: false
+    }
+  },
+  data() {
+    return {
+      pOption: {}
+    }
+  },
+
+  computed: {
+    ...mapState([
+      'componentGap',
+      'canvasStyleData'
+    ])
+  },
+  watch: {
+    h(newVal, oldVla) {
+    }
+  },
+  created() {
+  },
+  mounted() {
+    this.init()
+  },
+  methods: {
+    init() {
+      const iframe = document.getElementById('iframe')
+      NProgress.start()
+      iframe.onload = function() {
+        NProgress.done()
+      }
+    }
+
+  }
+}
+</script>
+
+<style>
+  .info-class{
+    text-align: center;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background-color: #FFFFFF;
+    font-size: 12px;
+    color: #9ea6b2;
+  }
+
+  .main-frame{
+    height: 100%;
+    width: 100%;
+  }
+  .frame-mask {
+    display: flex;
+    height: 100%!important;
+    width: 100% !important;
+    background-color: #5c5e61;
+    opacity: 0.5;
+    position:absolute;
+    top:0px;
+    left: 0px;
+    z-index: 2;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+</style>
+

frontend/src/components/canvas/custom-component/component-list.js

@@ -86,6 +86,11 @@ export const VIDEOLINKS = {
 
 }
 
+// 嵌套页面信息
+export const FRAMELINKS = {
+  src: ''
+}
+
 export const assistList = [
   {
     id: '10001',
@@ -133,7 +138,7 @@ export const pictureList = [
   }
 ]
 
-export const dateList = [
+export const otherList = [
   {
     id: '30001',
     component: 'de-show-date',
@@ -141,6 +146,14 @@ export const dateList = [
     label: '时间',
     icon: 'iconfont icon-shijian',
     defaultClass: 'text-filter'
+  },
+  {
+    id: '30002',
+    component: 'de-frame',
+    type: 'de-frame',
+    label: '网页',
+    icon: 'iconfont icon-iframe',
+    defaultClass: 'text-filter'
   }
 ]
 
@@ -353,6 +366,27 @@ const list = [
     miniSizex: 1,
     miniSizey: 1
   },
+  {
+    id: '30002',
+    component: 'de-frame',
+    type: 'de-frame',
+    label: '',
+    icon: 'iconfont icon-iframe',
+    defaultClass: 'text-filter',
+    mobileStyle: BASE_MOBILE_STYLE,
+    style: {
+      width: 400,
+      height: 200,
+      borderRadius: ''
+    },
+    frameLinks: FRAMELINKS,
+    x: 1,
+    y: 1,
+    sizex: 10,
+    sizey: 5,
+    miniSizex: 1,
+    miniSizey: 1
+  },
   {
     id: '20001',
     component: 'picture-add',

frontend/src/components/canvas/custom-component/index.js

@@ -7,6 +7,7 @@ import Group from '@/components/canvas/custom-component/Group'
 import RectShape from '@/components/canvas/custom-component/RectShape'
 import UserView from '@/components/canvas/custom-component/UserView'
 import DeVideo from '@/components/canvas/custom-component/DeVideo'
+import DeFrame from '@/components/canvas/custom-component/DeFrame'
 
 Vue.component('Picture', Picture)
 Vue.component('VText', VText)
@@ -15,4 +16,5 @@ Vue.component('Group', Group)
 Vue.component('RectShape', RectShape)
 Vue.component('UserView', UserView)
 Vue.component('DeVideo', DeVideo)
+Vue.component('DeFrame', DeFrame)
 

frontend/src/lang/en.js

@@ -1390,6 +1390,7 @@ export default {
     sure_bt: 'Confirm'
   },
   panel: {
+    web_set_tips: 'Some Websites Cannot Be Displayed Because Of Cross Domain Problems  ',
     repeat_params: 'Repeat Params Exist',
     enable_outer_param_set: 'Enable Outer Param Set',
     select_param: 'Please Select Param...',
@@ -1401,6 +1402,7 @@ export default {
     input_param_name: "Please Input Param's Name",
     params_setting: 'Outer Params Setting',
     template_view_tips: "Template's Views. Please Change",
+    edit_web_tips: 'The Inner Event Can Be Used When Then Panel Not In Edit Status',
     no_auth_role: 'Unshared roles',
     auth_role: 'Shared roles',
     picture_limit: 'Only pictures can be inserted',
@@ -1600,7 +1602,9 @@ export default {
     play_once: 'Once',
     play_circle: 'Circle',
     video_links: 'Video Links',
+    web_url: 'Web URL',
     video_add_tips: 'Please Add Video Info...',
+    web_add_tips: 'Please Add Web Url Info...',
     panel_view_result_show: 'View Result Show',
     panel_view_result_tips: 'Chose "Panel" Will Overwrite View`s Result,Range 1~10000',
     timeout_refresh: 'Timeout，Will Refresh...',

frontend/src/lang/tw.js

@@ -1391,6 +1391,7 @@ export default {
     sure_bt: '確定'
   },
   panel: {
+    web_set_tips: '部分网站可能存在跨域问题无法显示',
     repeat_params: '存在名称重复的参数',
     enable_outer_param_set: '启用外部参数设置',
     select_param: '请选择参数...',
@@ -1402,6 +1403,7 @@ export default {
     input_param_name: '请输入参数名称',
     params_setting: '外部参数设置',
     template_view_tips: '当前是模板视图,请点击更换数据集',
+    edit_web_tips: '编辑状态不可操作网页内部',
     no_auth_role: '未分享角色',
     auth_role: '已分享角色',
     picture_limit: '只能插入圖片',
@@ -1601,7 +1603,9 @@ export default {
     play_once: '播放一次',
     play_circle: '循環播放',
     video_links: '視頻鏈接',
+    web_url: '网页地址',
     video_add_tips: '請點擊添加配置視頻信息...',
+    web_add_tips: '請點擊添加网页信息...',
     panel_view_result_show: '視圖結果展示',
     panel_view_result_tips: '選擇儀錶闆會覆蓋視圖的結果展示數量，取值範圍1~10000',
     timeout_refresh: '請求超時，稍後刷新...',

frontend/src/lang/zh.js

@@ -1399,6 +1399,7 @@ export default {
     sure_bt: '确定'
   },
   panel: {
+    web_set_tips: '部分网站可能存在跨域问题无法显示',
     repeat_params: '存在名称重复的参数',
     enable_outer_param_set: '启用外部参数设置',
     select_param: '请选择参数...',
@@ -1410,6 +1411,7 @@ export default {
     input_param_name: '请输入参数名称',
     params_setting: '外部参数设置',
     template_view_tips: '当前是模板视图,请点击更换数据集',
+    edit_web_tips: '编辑状态不可操作网页内部',
     no_auth_role: '未分享角色',
     auth_role: '已分享角色',
     picture_limit: '只能插入图片',
@@ -1610,7 +1612,9 @@ export default {
     play_once: '播放一次',
     play_circle: '循环播放',
     video_links: '视频链接',
+    web_url: '网页地址',
     video_add_tips: '请点击添加配置视频信息...',
+    web_add_tips: '请点击添加网页信息...',
     panel_view_result_show: '视图结果展示',
     panel_view_result_tips: '选择仪表板会覆盖视图的结果展示数量，取值范围1~10000',
     timeout_refresh: '请求超时，稍后刷新...',

frontend/src/main.js

@@ -45,6 +45,10 @@ Vue.use(vcolorpicker)
 import fullscreen from 'vue-fullscreen'
 Vue.use(fullscreen)
 
+import VueFriendlyIframe from 'vue-friendly-iframe'
+
+Vue.use(VueFriendlyIframe)
+
 // import TEditor from '@/components/Tinymce/index.vue'
 // Vue.component('TEditor', TEditor)
 

frontend/src/styles/deicon/demo_index.html

@@ -54,6 +54,12 @@
       <div class="content unicode" style="display: block;">
           <ul class="icon_lists dib-box">
           
+            <li class="dib">
+              <span class="icon iconfont">&#xe6de;</span>
+                <div class="name">iframe</div>
+                <div class="code-name">&amp;#xe6de;</div>
+              </li>
+          
             <li class="dib">
               <span class="icon iconfont">&#xe6d7;</span>
                 <div class="name">参数</div>
@@ -516,9 +522,9 @@
 <pre><code class="language-css"
 >@font-face {
   font-family: 'iconfont';
-  src: url('iconfont.woff2?t=1647483965100') format('woff2'),
+  src: url('iconfont.woff2?t=1648367037728') format('woff2'),
-       url('iconfont.woff?t=1647483965100') format('woff'),
+       url('iconfont.woff?t=1648367037728') format('woff'),
-       url('iconfont.ttf?t=1647483965100') format('truetype');
+       url('iconfont.ttf?t=1648367037728') format('truetype');
 }
 </code></pre>
           <h3 id="-iconfont-">第二步：定义使用 iconfont 的样式</h3>
@@ -544,6 +550,15 @@
       <div class="content font-class">
         <ul class="icon_lists dib-box">
           
+          <li class="dib">
+            <span class="icon iconfont icon-iframe"></span>
+            <div class="name">
+              iframe
+            </div>
+            <div class="code-name">.icon-iframe
+            </div>
+          </li>
+          
           <li class="dib">
             <span class="icon iconfont icon-canshu"></span>
             <div class="name">
@@ -1237,6 +1252,14 @@
       <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-iframe"></use>
+                </svg>
+                <div class="name">iframe</div>
+                <div class="code-name">#icon-iframe</div>
+            </li>
+          
             <li class="dib">
                 <svg class="icon svg-icon" aria-hidden="true">
                   <use xlink:href="#icon-canshu"></use>

frontend/src/styles/deicon/iconfont.css

@@ -1,8 +1,8 @@
 @font-face {
   font-family: "iconfont"; /* Project id 2459092 */
-  src: url('iconfont.woff2?t=1647483965100') format('woff2'),
+  src: url('iconfont.woff2?t=1648367037728') format('woff2'),
-       url('iconfont.woff?t=1647483965100') format('woff'),
+       url('iconfont.woff?t=1648367037728') format('woff'),
-       url('iconfont.ttf?t=1647483965100') format('truetype');
+       url('iconfont.ttf?t=1648367037728') format('truetype');
 }
 
 .iconfont {
@@ -13,6 +13,10 @@
   -moz-osx-font-smoothing: grayscale;
 }
 
+.icon-iframe:before {
+  content: "\e6de";
+}
+
 .icon-canshu:before {
   content: "\e6d7";
 }

frontend/src/styles/deicon/iconfont.json

@@ -5,6 +5,13 @@
   "css_prefix_text": "icon-",
   "description": "",
   "glyphs": [
+    {
+      "icon_id": "4920096",
+      "name": "iframe",
+      "font_class": "iframe",
+      "unicode": "e6de",
+      "unicode_decimal": 59102
+    },
     {
       "icon_id": "19610186",
       "name": "参数",

frontend/src/views/panel/AssistComponent/index.vue

@@ -57,7 +57,7 @@
 
       <div class="filter-widget-content">
         <div
-          v-for="(item, index) in dateList"
+          v-for="(item, index) in otherList"
           :key="index"
           :data-id="item.id"
           :data-index="index"
@@ -79,7 +79,7 @@
 </template>
 
 <script>
-import componentList, { assistList, pictureList, dateList } from '@/components/canvas/custom-component/component-list'
+import componentList, { assistList, pictureList, otherList } from '@/components/canvas/custom-component/component-list'
 import toast from '@/components/canvas/utils/toast'
 import { commonStyle, commonAttr } from '@/components/canvas/custom-component/component-list'
 import generateID from '@/components/canvas/utils/generateID'
@@ -93,7 +93,7 @@ export default {
     return {
       assistList,
       pictureList,
-      dateList
+      otherList
     }
   },
   computed: {

frontend/src/views/panel/edit/index.vue

@@ -441,7 +441,8 @@ export default {
         'de-tabs',
         'rect-shape',
         'de-show-date',
-        'de-video'
+        'de-video',
+        'de-frame'
       ],
       enableSureButton: false,
       filterFromDrag: false,