From 293ae5ab2b9e3d104efe900119304a2509940515 Mon Sep 17 00:00:00 2001
From: "liu.shiyi" <liu.shiyi@ustcinfo.com>
Date: Fri, 13 Oct 2023 16:39:11 +0800
Subject: [PATCH] =?UTF-8?q?fix:=E5=88=9D=E6=AD=A5=E5=AE=9E=E7=8E=B0html?=
 =?UTF-8?q?=E7=BB=84=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../BasicComponents/CustomHtml/index.vue      |  56 ++++++++++
 .../BasicComponents/CustomHtml/setting.vue    | 104 ++++++++++++++++++
 .../CustomHtml/settingConfig.js               |  37 +++++++
 .../RightSetting/ComponentBinding/index.vue   |   2 +-
 .../images/bigScreenIcon/svg/29html.svg       |   1 +
 .../js/config/basicComponentsConfig.js        |   1 +
 .../packages/js/utils/getComponentConfig.js   |  13 +++
 7 files changed, 213 insertions(+), 1 deletion(-)
 create mode 100644 data-room-ui/packages/BasicComponents/CustomHtml/index.vue
 create mode 100644 data-room-ui/packages/BasicComponents/CustomHtml/setting.vue
 create mode 100644 data-room-ui/packages/BasicComponents/CustomHtml/settingConfig.js
 create mode 100644 data-room-ui/packages/assets/images/bigScreenIcon/svg/29html.svg

diff --git a/data-room-ui/packages/BasicComponents/CustomHtml/index.vue b/data-room-ui/packages/BasicComponents/CustomHtml/index.vue
new file mode 100644
index 00000000..40e298b0
--- /dev/null
+++ b/data-room-ui/packages/BasicComponents/CustomHtml/index.vue
@@ -0,0 +1,56 @@
+<template>
+  <div
+    class="bs-design-wrap"
+    :class="`bs-current-time-${customTheme}`"
+  >
+    <div
+      ref="customHtml"
+      v-html="config.customize.htmlStr"
+    />
+  </div>
+</template>
+
+<script>
+import paramsMixins from 'data-room-ui/js/mixins/paramsMixins'
+import { mapMutations, mapState } from 'vuex'
+export default {
+  name: 'CustomHtml',
+  mixins: [paramsMixins],
+  props: {
+    config: {
+      type: Object,
+      default: () => ({})
+    }
+  },
+  computed: {
+    ...mapState({
+    })
+  },
+  data () {
+    return {
+    }
+  },
+  mounted () {
+  },
+  // 销毁定时器
+  destroyed () {
+  },
+  methods: {
+    ...mapMutations({
+      changeChartConfig: 'bigScreen/changeChartConfig',
+      changeActiveItemConfig: 'bigScreen/changeActiveItemConfig'
+    }),
+    changeStyle (config) {
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+@import "../../BasicComponents/fonts/index.css";
+@import "../../assets/fonts/numberFont/stylesheet.css";
+.bs-design-wrap{
+  width: 100%;
+  padding: 10px;
+}
+</style>
diff --git a/data-room-ui/packages/BasicComponents/CustomHtml/setting.vue b/data-room-ui/packages/BasicComponents/CustomHtml/setting.vue
new file mode 100644
index 00000000..36dc73a4
--- /dev/null
+++ b/data-room-ui/packages/BasicComponents/CustomHtml/setting.vue
@@ -0,0 +1,104 @@
+<!--
+ * @description: 指标组件案例设计面板
+ * @Date: 2022-08-17 16:53:28
+ * @Author: xingheng
+-->
+<template>
+  <div>
+    <el-form
+      ref="form"
+      label-width="100px"
+      label-position="left"
+      :model="config"
+      class="bs-el-form"
+    >
+      <SettingTitle>标题</SettingTitle>
+      <div class="setting-wrap">
+        <el-form-item
+          label="标题"
+          label-width="100px"
+        >
+          <el-input
+            v-model="config.title"
+            placeholder="请输入标题"
+          />
+        </el-form-item>
+      </div>
+      <SettingTitle>位置</SettingTitle>
+      <div class="setting-wrap">
+        <PosWhSetting :config="config" />
+      </div>
+      <SettingTitle v-if="config.border">边框</SettingTitle>
+      <div class="lc-field-body">
+        <BorderSetting
+          v-if="config.border"
+          label-width="100px"
+          :config="config.border"
+          :bigTitle='config.title'
+        />
+      </div>
+      <SettingTitle>旋转</SettingTitle>
+      <div class="lc-field-body">
+        <RotateSetting
+          :config="config"
+        />
+      </div>
+      <SettingTitle>基础</SettingTitle>
+      <div class="setting-wrap">
+        <el-form-item
+          label="html内容"
+          label-width="100px"
+        >
+          <el-input
+            v-model="config.customize.htmlStr"
+            type="textarea"
+            :rows="5"
+          />
+        </el-form-item>
+      </div>
+    </el-form>
+  </div>
+</template>
+<script>
+import SettingTitle from 'data-room-ui/SettingTitle/index.vue'
+import PosWhSetting from 'data-room-ui/BigScreenDesign/RightSetting/PosWhSetting.vue'
+import BorderSetting from 'data-room-ui/BigScreenDesign/RightSetting/BorderSetting.vue'
+import RotateSetting from 'data-room-ui/BigScreenDesign/RightSetting/RotateSetting.vue'
+export default {
+  name: 'CurrentTimeSetting',
+  components: {
+    PosWhSetting,
+    SettingTitle,
+    BorderSetting,
+    RotateSetting
+  },
+  data () {
+    return {
+      activeName: 'data'
+    }
+  },
+  computed: {
+    config: {
+      get () {
+        return this.$store.state.bigScreen.activeItemConfig
+      },
+      set (val) {
+        this.$store.state.bigScreen.activeItemConfig = val
+      }
+    }
+  },
+  watch: {
+  },
+  mounted () {},
+  methods: {
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+ @import "../../assets/style/settingWrap.scss";
+ @import "../../assets/style/bsTheme.scss";
+.setting-wrap{
+  padding: 12px 16px;
+}
+</style>
diff --git a/data-room-ui/packages/BasicComponents/CustomHtml/settingConfig.js b/data-room-ui/packages/BasicComponents/CustomHtml/settingConfig.js
new file mode 100644
index 00000000..b7d5afd8
--- /dev/null
+++ b/data-room-ui/packages/BasicComponents/CustomHtml/settingConfig.js
@@ -0,0 +1,37 @@
+import { commonConfig } from '../../js/config'
+
+export const settingConfig = {
+  time: '',
+  theme: 'dark',
+  // 设置面板属性的显隐
+  displayOption: {
+    dataAllocation: {
+      // 是否存在数据配置
+      enable: false
+    }
+  }
+}
+const customConfig = {
+
+  type: 'customHtml',
+  root: {
+    version: '2023071001',
+    // 绕x轴旋转角度
+    rotateX: 0,
+    // 绕y轴旋转角度
+    rotateY: 0,
+    // 绕z轴旋转角度
+    rotateZ: 0,
+    // 透视距离
+    perspective: 0,
+    skewX: 0,
+    skewY: 0
+  },
+  customize: {
+    htmlStr: '<h1 style="color:#ffffff;font-size: 30px">我是自定义html内容</h1>' // html的内容
+  }
+
+}
+export const dataConfig = {
+  ...commonConfig(customConfig)
+}
diff --git a/data-room-ui/packages/BigScreenDesign/RightSetting/ComponentBinding/index.vue b/data-room-ui/packages/BigScreenDesign/RightSetting/ComponentBinding/index.vue
index 6a502d50..8458e289 100644
--- a/data-room-ui/packages/BigScreenDesign/RightSetting/ComponentBinding/index.vue
+++ b/data-room-ui/packages/BigScreenDesign/RightSetting/ComponentBinding/index.vue
@@ -116,7 +116,7 @@ export default {
           })
         }
       })
-      layouts = layouts?.filter(item => item.code !== code && !['Tabs', 'titles', 'currentTime', 'timeCountDown', 'iframeChart', 'linkChart', 'carousel', 'themeSwitcher', 'themeSelect'].includes(item.type))
+      layouts = layouts?.filter(item => item.code !== code && !['Tabs', 'titles', 'currentTime', 'timeCountDown', 'iframeChart', 'linkChart', 'carousel', 'themeSwitcher', 'themeSelect', 'customHtml'].includes(item.type))
       layouts = [...layouts, ...tabComponents]?.map(item => ({
         name: item.code,
         comment: item.title
diff --git a/data-room-ui/packages/assets/images/bigScreenIcon/svg/29html.svg b/data-room-ui/packages/assets/images/bigScreenIcon/svg/29html.svg
new file mode 100644
index 00000000..b5fb9652
--- /dev/null
+++ b/data-room-ui/packages/assets/images/bigScreenIcon/svg/29html.svg
@@ -0,0 +1 @@
+<?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="1697184484757" class="icon" viewBox="0 0 2217 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="9081" xmlns:xlink="http://www.w3.org/1999/xlink" width="433.0078125" height="200"><path d="M534.894998 1024L0 512.056531 534.894998 0.113062l125.611572 131.264657L262.755438 512.169593l397.751132 380.678812zM1682.132273 1024l-125.611571-131.264657 397.751132-380.678812-397.751132-380.791874L1682.132273 0l534.894999 511.943469z" fill="#4077ED" p-id="9082"></path><path d="M765.653969 912.068897L1295.122005 19.333554l156.138236 92.710611-529.468036 892.622281z" fill="#A2BFFF" p-id="9083"></path></svg>
\ No newline at end of file
diff --git a/data-room-ui/packages/js/config/basicComponentsConfig.js b/data-room-ui/packages/js/config/basicComponentsConfig.js
index ed4c4bf6..f910c8b3 100644
--- a/data-room-ui/packages/js/config/basicComponentsConfig.js
+++ b/data-room-ui/packages/js/config/basicComponentsConfig.js
@@ -20,6 +20,7 @@ const typeList = [
   'picture',
   'timeCountDown',
   'currentTime',
+  'customHtml',
   'iframeChart',
   'digitalFlop',
   'tables',
diff --git a/data-room-ui/packages/js/utils/getComponentConfig.js b/data-room-ui/packages/js/utils/getComponentConfig.js
index e34be6ea..03dd7f70 100644
--- a/data-room-ui/packages/js/utils/getComponentConfig.js
+++ b/data-room-ui/packages/js/utils/getComponentConfig.js
@@ -175,6 +175,19 @@ export default function getComponentConfig (type) {
         y: 0,
         type
       }
+    case 'customHtml':
+      return {
+        name: '自定义html',
+        title: '自定义html',
+        icon: Icon.getNameList()[29],
+        className:
+          'com.gccloud.dataroom.core.module.chart.components.ScreenCustomHtmlChart',
+        w: 600,
+        h: 150,
+        x: 0,
+        y: 0,
+        type
+      }
     case 'video':
       return {
         name: '播放器',