From f5dc2bd96e5278a415a96a548e9e1ee965858a59 Mon Sep 17 00:00:00 2001
From: "liu.shiyi" <liu.shiyi@ustcinfo.com>
Date: Thu, 12 Oct 2023 17:29:41 +0800
Subject: [PATCH] =?UTF-8?q?fix:=E6=95=B0=E5=AD=97=E7=BB=84=E4=BB=B6?=
 =?UTF-8?q?=E5=88=9D=E6=AD=A5=E6=8F=90=E4=BA=A4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../BasicComponents/Numbers/index.vue         |  80 +++++++++
 .../BasicComponents/Numbers/setting.vue       | 170 ++++++++++++++++++
 .../BasicComponents/Numbers/settingConfig.js  |  64 +++++++
 .../images/bigScreenIcon/svg/28number.svg     |   1 +
 .../js/config/basicComponentsConfig.js        |   1 +
 .../packages/js/utils/getComponentConfig.js   |  13 ++
 6 files changed, 329 insertions(+)
 create mode 100644 data-room-ui/packages/BasicComponents/Numbers/index.vue
 create mode 100644 data-room-ui/packages/BasicComponents/Numbers/setting.vue
 create mode 100644 data-room-ui/packages/BasicComponents/Numbers/settingConfig.js
 create mode 100644 data-room-ui/packages/assets/images/bigScreenIcon/svg/28number.svg

diff --git a/data-room-ui/packages/BasicComponents/Numbers/index.vue b/data-room-ui/packages/BasicComponents/Numbers/index.vue
new file mode 100644
index 00000000..d55e9ad9
--- /dev/null
+++ b/data-room-ui/packages/BasicComponents/Numbers/index.vue
@@ -0,0 +1,80 @@
+<template>
+  <div
+    class="bs-design-wrap"
+    :class="`bs-text-${customTheme}`"
+  >
+    <div
+      class="content-box"
+      :style="{'font-family': config.customize.fontFamily,'font-size': config.customize.fontSize +'px','font-weight': +config.customize.fontWeight,'background-image': `-webkit-linear-gradient(${config.customize.color})`}"
+    >
+      {{ config.customize.title }}
+    </div>
+  </div>
+</template>
+<script>
+import commonMixins from 'data-room-ui/js/mixins/commonMixins'
+import paramsMixins from 'data-room-ui/js/mixins/paramsMixins'
+export default {
+  name: 'Texts',
+  components: {},
+  mixins: [paramsMixins, commonMixins],
+  props: {
+    // 卡片的属性
+    config: {
+      type: Object,
+      default: () => ({})
+    }
+  },
+  data () {
+    return {
+      customClass: {}
+    }
+  },
+
+  computed: {
+  },
+  mounted () {
+    this.chartInit()
+  },
+  methods: {
+    // 通过表达式计算得来的值
+    getDataByExpression (config) {
+      // 如果表达式是由其他组件的值构成的
+      if (this.config.expressionCodes && this.config.expressionCodes.length) {
+      // eslint-disable-next-line no-new-func
+        const result = new Function('dataset', 'computedDatas', this.config.expression)
+        config.customize.title = result(this.dataset, this.computedDatas)
+        // 同时将计算得来的值保存到公共的数据存储的地方
+        this.updateComputedDatas({ code: config.code, title: config.title, data: config.customize.title })
+      // this.changeChartConfig(config)
+      }
+    },
+    dataFormatting (config, data) {
+      // 文本数据配置原则：选择数据集则以后端返回的数据为主，否则以设置面板中标题设置为准
+      if (config.dataSource.businessKey) {
+        config.customize.title = data && data.data && data.data.length ? data.data[0][config.dataSource.metricField] : '暂无数据'
+      }
+      return config
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+@import "../../assets/fonts/numberFont/stylesheet.css";
+  .bs-design-wrap{
+    width: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+  .content-box{
+    //text-align: center;
+    /* 将背景设为渐变 */
+    /*background-image: -webkit-linear-gradient(left, #6294F7, #C85D14);*/
+    /* 规定背景绘制区域 */
+    -webkit-background-clip: text;
+    /* 将文字隐藏 */
+    -webkit-text-fill-color: transparent;
+  }
+</style>
diff --git a/data-room-ui/packages/BasicComponents/Numbers/setting.vue b/data-room-ui/packages/BasicComponents/Numbers/setting.vue
new file mode 100644
index 00000000..d442a514
--- /dev/null
+++ b/data-room-ui/packages/BasicComponents/Numbers/setting.vue
@@ -0,0 +1,170 @@
+<!--
+ * @description: 标题属性设置面板
+ * @Date: 2022-08-17 16:53:28
+ * @Author: shiyi
+-->
+<template>
+  <div class="bs-setting-wrap">
+    <el-form
+      ref="form"
+      label-width="100px"
+      label-position="left"
+      :model="config"
+      :rules="rules"
+      class="bs-el-form"
+    >
+      <SettingTitle>标题</SettingTitle>
+      <div class="bs-setting-wrap">
+        <el-form-item
+          label="标题"
+          label-width="100px"
+          prop="title"
+        >
+          <el-input
+            v-model="config.title"
+            placeholder="请输入标题"
+            clearable
+          />
+        </el-form-item>
+      </div>
+      <SettingTitle>位置</SettingTitle>
+      <div class="lc-field-body">
+        <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"
+          :big-title="config.title"
+        />
+      </div>
+      <SettingTitle>旋转</SettingTitle>
+      <div class="lc-field-body">
+        <RotateSetting
+          :config="config"
+        />
+      </div>
+      <SettingTitle>基础</SettingTitle>
+      <div class="lc-field-body">
+        <el-form-item
+          label="标题字体大小"
+          label-width="100px"
+        >
+          <el-input
+            v-model="config.customize.fontSize"
+            placeholder="请输入标题字体大小"
+            clearable
+          >
+            <template slot="append">
+              px
+            </template>
+          </el-input>
+        </el-form-item>
+        <el-form-item
+          label="标题字体权重"
+          label-width="100px"
+        >
+          <el-input-number
+            v-model="config.customize.fontWeight"
+            class="bs-el-input-number"
+            placeholder="请输入标题字体权重"
+          />
+        </el-form-item>
+        <el-form-item
+          label="标题字体类型"
+          label-width="100px"
+        >
+          <el-select
+            v-model="config.customize.fontFamily"
+            popper-class="bs-el-select"
+            class="bs-el-select"
+          >
+            <el-option
+              v-for="item in fontFamilyList"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value"
+            />
+          </el-select>
+        </el-form-item>
+        <TextGradient v-model="config.customize.color" />
+      </div>
+    </el-form>
+  </div>
+</template>
+<script>
+import SettingTitle from 'data-room-ui/SettingTitle/index.vue'
+import BorderSetting from 'data-room-ui/BigScreenDesign/RightSetting/BorderSetting.vue'
+import TextGradient from 'data-room-ui/BigScreenDesign/RightSetting/TextGradient/index'
+import PosWhSetting from 'data-room-ui/BigScreenDesign/RightSetting/PosWhSetting.vue'
+import RotateSetting from 'data-room-ui/BigScreenDesign/RightSetting/RotateSetting.vue'
+export default {
+  name: 'TextSetting',
+  components: {
+    TextGradient,
+    PosWhSetting,
+    SettingTitle,
+    BorderSetting,
+    RotateSetting
+  },
+  data () {
+    return {
+      fontFamilyList: [
+        {
+          label: '默认',
+          value: ''
+        },
+        {
+          label: '时钟加粗倾斜',
+          value: 'ds-digitalbold_italic'
+        },
+        {
+          label: '时钟加粗正常',
+          value: 'ds-digitalbold'
+        },
+        {
+          label: '时钟倾斜',
+          value: 'ds-digitalitalic'
+        },
+        {
+          label: '时钟正常',
+          value: 'ds-digitalnormal'
+        }],
+      rules: {
+        title: [
+          { required: true, message: '请输入标题', trigger: 'blur' }
+        ]
+      }
+    }
+  },
+  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";
+  .bs-setting-wrap{
+    padding-top: 16px;
+  }
+  .lc-field-body {
+    padding: 12px 16px;
+  }
+</style>
diff --git a/data-room-ui/packages/BasicComponents/Numbers/settingConfig.js b/data-room-ui/packages/BasicComponents/Numbers/settingConfig.js
new file mode 100644
index 00000000..8a151a48
--- /dev/null
+++ b/data-room-ui/packages/BasicComponents/Numbers/settingConfig.js
@@ -0,0 +1,64 @@
+/*
+ * @Descripttion:
+ * @Author: liu.shiyi
+ * @Date: 2022-10-13 11:18:03
+ * @LastEditTime: 2022-10-13 13:55:11
+ */
+import { commonConfig, displayOption } from 'data-room-ui/js/config'
+
+export const settingConfig = {
+  theme: 'dark',
+  text: '文本标签占位符', // text内容
+  // 设置面板属性的显隐
+  displayOption: {
+    ...displayOption,
+    metricField: {
+      // 指标
+      label: '指标',
+      enable: true,
+      multiple: false // 是否多选
+    },
+    dimensionField: {
+      // 维度
+      label: '维度', // 维度/查询字段
+      enable: false,
+      multiple: true // 是否多选
+    },
+    text: { // 文本占位符
+      label: '占位内容', // 维度/查询字段
+      enable: true
+    },
+    expression: { // 文本占位符
+      label: '表达式', // 维度/查询字段
+      enable: true
+    }
+  }
+}
+const customConfig = {
+  type: 'numbers',
+  root: {
+    version: '2023071001',
+    url: 'https://www.runoob.com/',
+    expression: 'return ',
+    expressionCodes: [],
+    // 绕x轴旋转角度
+    rotateX: 0,
+    // 绕y轴旋转角度
+    rotateY: 0,
+    // 绕z轴旋转角度
+    rotateZ: 0,
+    // 透视距离
+    perspective: 500
+  },
+  customize: {
+    title: '数字标签占位符',
+    fontSize: 20,
+    fontWeight: 700,
+    fontFamily: '', // 字体类型
+    color: 'left,#ffffff,#ffffff'
+  }
+
+}
+export const dataConfig = {
+  ...commonConfig(customConfig)
+}
diff --git a/data-room-ui/packages/assets/images/bigScreenIcon/svg/28number.svg b/data-room-ui/packages/assets/images/bigScreenIcon/svg/28number.svg
new file mode 100644
index 00000000..9da8929d
--- /dev/null
+++ b/data-room-ui/packages/assets/images/bigScreenIcon/svg/28number.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="1697102660694" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="9751" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M1024 870.4H0V153.6h1024v716.8zM51.2 819.2h921.6V204.8H51.2v614.4z" fill="#4B6EEF" p-id="9752"></path><path d="M128 281.6h102.4v460.8H128zM460.8 281.6h102.4v281.6h-102.4zM793.6 281.6h102.4v307.2h-102.4zM307.2 460.8h102.4v256h-102.4z" fill="#409FFF" p-id="9753"></path><path d="M793.6 460.8h102.4v256h-102.4zM307.2 281.6h204.8v102.4h-204.8zM640 281.6h204.8v102.4h-204.8zM307.2 460.8h204.8v102.4h-204.8z" fill="#409FFF" p-id="9754"></path><path d="M640 460.8h204.8v102.4h-204.8zM307.2 640h256v102.4H307.2zM640 640h256v102.4H640z" fill="#409FFF" p-id="9755"></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 ef83d795..ed4c4bf6 100644
--- a/data-room-ui/packages/js/config/basicComponentsConfig.js
+++ b/data-room-ui/packages/js/config/basicComponentsConfig.js
@@ -13,6 +13,7 @@ import getComponentConfig from 'data-room-ui/js/utils/getComponentConfig'
 import { setModules, dataModules } from 'data-room-ui/js/utils/configImport'
 const typeList = [
   'texts',
+  'numbers',
   'linkChart',
   'horizontalLine', // 横线
   'verticalLine', // 竖线
diff --git a/data-room-ui/packages/js/utils/getComponentConfig.js b/data-room-ui/packages/js/utils/getComponentConfig.js
index 3e70cc89..e34be6ea 100644
--- a/data-room-ui/packages/js/utils/getComponentConfig.js
+++ b/data-room-ui/packages/js/utils/getComponentConfig.js
@@ -15,6 +15,19 @@ export default function getComponentConfig (type) {
         y: 0,
         type
       }
+    case 'numbers':
+      return {
+        name: '数字',
+        title: '数字',
+        icon: Icon.getNameList()[28],
+        className:
+          'com.gccloud.dataroom.core.module.chart.components.ScreenNumbersChart',
+        w: 200,
+        h: 60,
+        x: 0,
+        y: 0,
+        type
+      }
     case 'linkChart':
       return {
         name: '超链接',