feat: 仪表板增加Web组件

2026-05-21 04:00:55 +08:00 · 2022-03-27 19:06:37 +08:00
parent 613df9af43
commit 44e7cd5dfb
21 changed files with 358 additions and 15 deletions
--- a/frontend/src/components/canvas/components/Editor/FrameLinks.vue
+++ b/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>
--- a/frontend/src/components/canvas/components/TextAttr.vue
+++ b/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'
      ]
    }
  },
--- a/frontend/src/components/canvas/custom-component/DeFrame.vue
+++ b/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>
+
--- a/frontend/src/components/canvas/custom-component/component-list.js
+++ b/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',
--- a/frontend/src/components/canvas/custom-component/index.js
+++ b/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)