Merge remote-tracking branch 'origin/master'

data-room-ui/package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "@gcpaas/data-room-ui",
-  "version": "1.0.1-2023101101-Alpha",
+  "version": "1.0.1-2023101301-Alpha",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
@@ -3699,7 +3699,7 @@
     },
     "@vue/vue-loader-v15": {
       "version": "npm:vue-loader@15.10.2",
-      "resolved": "https://registry.npmjs.org/vue-loader/-/vue-loader-15.10.2.tgz",
+      "resolved": "https://registry.npmmirror.com/vue-loader/-/vue-loader-15.10.2.tgz",
       "integrity": "sha512-ndeSe/8KQc/nlA7TJ+OBhv2qalmj1s+uBs7yHDRFaAXscFTApBzY9F1jES3bautmgWjDlDct0fw8rPuySDLwxw==",
       "dev": true,
       "requires": {
@@ -3712,13 +3712,13 @@
       "dependencies": {
         "hash-sum": {
           "version": "1.0.2",
-          "resolved": "https://registry.npmjs.org/hash-sum/-/hash-sum-1.0.2.tgz",
+          "resolved": "https://registry.npmmirror.com/hash-sum/-/hash-sum-1.0.2.tgz",
           "integrity": "sha512-fUs4B4L+mlt8/XAtSOGMUO1TXmAelItBPtJG7CyHJfYTdDjwisntGO2JQz7oUsatOY9o68+57eziUVNw/mRHmA==",
           "dev": true
         },
         "json5": {
           "version": "1.0.2",
-          "resolved": "https://registry.npmjs.org/json5/-/json5-1.0.2.tgz",
+          "resolved": "https://registry.npmmirror.com/json5/-/json5-1.0.2.tgz",
           "integrity": "sha512-g1MWMLBiz8FKi1e4w0UyVL3w+iJceWAFBAaBnnGKOpNa5f8TLktkbre1+s6oICydWAm+HRUGTmI+//xv2hvXYA==",
           "dev": true,
           "requires": {
@@ -3727,7 +3727,7 @@
         },
         "loader-utils": {
           "version": "1.4.2",
-          "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-1.4.2.tgz",
+          "resolved": "https://registry.npmmirror.com/loader-utils/-/loader-utils-1.4.2.tgz",
           "integrity": "sha512-I5d00Pd/jwMD2QCduo657+YM/6L3KZu++pmX9VFncxaxvHcru9jx1lBaFft+r4Mt2jK0Yhp41XlRAihzPxHNCg==",
           "dev": true,
           "requires": {
@@ -10499,11 +10499,6 @@
       "integrity": "sha512-MAb38BcSbH0eHNBxn7ql2NH/kX33OkB3lZ1BNdh7ENeRChHTYsTvWrMubiIAMNS2llXEEgZ1MUOBtXChP3kaFQ==",
       "dev": true
     },
-    "image-conversion": {
-      "version": "2.1.1",
-      "resolved": "https://registry.npmjs.org/image-conversion/-/image-conversion-2.1.1.tgz",
-      "integrity": "sha512-hnMOmP7q2jxA+52FZ+wHNhg3fdFRlgfngsQH2JQHEQkafY7tj/8F15e6Rv/RxDegc872jvyaRHwMbkTZK1Cjbg=="
-    },
     "image-size": {
       "version": "0.5.5",
       "resolved": "https://registry.npmjs.org/image-size/-/image-size-0.5.5.tgz",
@@ -20147,7 +20142,7 @@
     },
     "vue-hot-reload-api": {
       "version": "2.3.4",
-      "resolved": "https://registry.npmjs.org/vue-hot-reload-api/-/vue-hot-reload-api-2.3.4.tgz",
+      "resolved": "https://registry.npmmirror.com/vue-hot-reload-api/-/vue-hot-reload-api-2.3.4.tgz",
       "integrity": "sha512-BXq3jwIagosjgNVae6tkHzzIk6a8MHFtzAdwhnV5VlvPTFxDCvIttgSiHWjdGoTJvXtmRu5HacExfdarRcFhog==",
       "dev": true
     },

data-room-ui/package.json

@@ -64,7 +64,6 @@
     "es6-promise": "4.2.8",
     "gc-vue-draggable-resizable": "^1.0.1",
     "html-to-image": "1.11.11",
-    "image-conversion": "^2.1.1",
     "insert-css": "^2.0.0",
     "jquery": "^3.6.4",
     "lodash": "4.17.21",

data-room-ui/packages/BasicComponents/Button/setting.vue

@@ -28,12 +28,12 @@
               :bigTitle='config.title'
             />
           </div>
-          <SettingTitle>旋转</SettingTitle>
+          <!-- <SettingTitle>旋转</SettingTitle>
           <div class="lc-field-body">
             <RotateSetting
               :config="config"
             />
-          </div>
+          </div> -->
           <SettingTitle>基础</SettingTitle>
           <div class="lc-field-body">
             <el-form-item label="按钮名称">

data-room-ui/packages/BasicComponents/ChartTab/setting.vue

@@ -35,12 +35,12 @@
           label-width="120px"
         />
       </div>
-      <SettingTitle>旋转</SettingTitle>
+      <!-- <SettingTitle>旋转</SettingTitle>
       <div class="lc-field-body">
         <RotateSetting
           :config="config"
         />
-      </div>
+      </div> -->
       <SettingTitle>基础</SettingTitle>
       <div class="lc-field-body">
         <el-form-item

data-room-ui/packages/BasicComponents/CurrentTime/setting.vue

@@ -37,12 +37,12 @@
           :bigTitle='config.title'
         />
       </div>
-      <SettingTitle>旋转</SettingTitle>
+      <!-- <SettingTitle>旋转</SettingTitle>
       <div class="lc-field-body">
         <RotateSetting
           :config="config"
         />
-      </div>
+      </div> -->
       <SettingTitle>基础</SettingTitle>
       <div class="setting-wrap">
         <el-form-item

data-room-ui/packages/BasicComponents/CustomHtml/setting.vue

@@ -37,12 +37,12 @@
           :bigTitle='config.title'
         />
       </div>
-      <SettingTitle>旋转</SettingTitle>
+      <!-- <SettingTitle>旋转</SettingTitle>
       <div class="lc-field-body">
         <RotateSetting
           :config="config"
         />
-      </div>
+      </div> -->
       <SettingTitle>基础</SettingTitle>
       <div class="setting-wrap">
         <el-form-item

data-room-ui/packages/BasicComponents/DateTimePicker/setting.vue

@@ -19,12 +19,12 @@
           <div class="lc-field-body">
             <PosWhSetting :config="config" />
           </div>
-          <SettingTitle>旋转</SettingTitle>
+          <!-- <SettingTitle>旋转</SettingTitle>
           <div class="lc-field-body">
             <RotateSetting
               :config="config"
             />
-          </div>
+          </div> -->
           <SettingTitle>基础</SettingTitle>
           <div class="lc-field-body">
             <el-form-item label="组件类型">

data-room-ui/packages/BasicComponents/DigitalFlop/setting.vue

@@ -36,12 +36,12 @@
               :bigTitle='config.title'
             />
           </div>
-          <SettingTitle>旋转</SettingTitle>
+          <!-- <SettingTitle>旋转</SettingTitle>
           <div class="lc-field-body">
             <RotateSetting
               :config="config"
             />
-          </div>
+          </div> -->
           <SettingTitle>基础</SettingTitle>
           <div class="lc-field-body">
             <el-form-item label="字体大小">

data-room-ui/packages/BasicComponents/FlyMap/setting.vue

@@ -33,12 +33,12 @@
           :bigTitle='config.title'
         />
       </div>
-      <SettingTitle>旋转</SettingTitle>
+      <!-- <SettingTitle>旋转</SettingTitle>
       <div class="lc-field-body">
         <RotateSetting
           :config="config"
         />
-      </div>
+      </div> -->
       <SettingTitle>基础</SettingTitle>
       <div class="lc-field-body">
         <el-form-item

data-room-ui/packages/BasicComponents/HorizontalLine/setting.vue

@@ -28,12 +28,12 @@
           <div class="lc-field-body">
             <PosWhSetting :config="config" />
           </div>
-          <SettingTitle>旋转</SettingTitle>
+          <!-- <SettingTitle>旋转</SettingTitle>
           <div class="lc-field-body">
             <RotateSetting
               :config="config"
             />
-          </div>
+          </div> -->
           <SettingTitle v-if="config.border">边框</SettingTitle>
           <div class="lc-field-body">
             <BorderSetting

data-room-ui/packages/BasicComponents/IframeChart/setting.vue

@@ -29,12 +29,12 @@
       <div class="setting-wrap">
         <PosWhSetting :config="config" />
       </div>
-      <SettingTitle>旋转</SettingTitle>
+      <!-- <SettingTitle>旋转</SettingTitle>
       <div class="lc-field-body">
         <RotateSetting
           :config="config"
         />
-      </div>
+      </div> -->
        <SettingTitle v-if="config.border">边框</SettingTitle>
           <div class="lc-field-body">
             <BorderSetting

data-room-ui/packages/BasicComponents/IndexCard/setting.vue

@@ -27,12 +27,12 @@
         <div class="lc-field-body">
           <PosWhSetting :config="config" />
         </div>
-        <SettingTitle>旋转</SettingTitle>
+        <!-- <SettingTitle>旋转</SettingTitle>
         <div class="lc-field-body">
           <RotateSetting
             :config="config"
           />
-        </div>
+        </div> -->
          <!-- <SettingTitle v-if="config.border">边框</SettingTitle>
           <div class="lc-field-body">
             <BorderSetting

data-room-ui/packages/BasicComponents/IndexCard2/setting.vue

@@ -36,12 +36,12 @@
             :bigTitle='config.title'
           />
         </div> -->
-        <SettingTitle>旋转</SettingTitle>
+        <!-- <SettingTitle>旋转</SettingTitle>
         <div class="lc-field-body">
           <RotateSetting
             :config="config"
           />
-        </div>
+        </div> -->
         <SettingTitle>基础</SettingTitle>
         <div class="lc-field-body">
            <el-form-item label-width="100px" label="渐变背景色一">

data-room-ui/packages/BasicComponents/IndicatorCard/setting.vue

@@ -27,12 +27,12 @@
         <div class="lc-field-body">
           <PosWhSetting :config="config" />
         </div>
-        <SettingTitle>旋转</SettingTitle>
+        <!-- <SettingTitle>旋转</SettingTitle>
         <div class="lc-field-body">
           <RotateSetting
             :config="config"
           />
-        </div>
+        </div> -->
          <!-- <SettingTitle v-if="config.border">边框</SettingTitle>
           <div class="lc-field-body">
             <BorderSetting

data-room-ui/packages/BasicComponents/IndicatorCard2/setting.vue

@@ -27,12 +27,12 @@
         <div class="lc-field-body">
           <PosWhSetting :config="config" />
         </div>
-        <SettingTitle>旋转</SettingTitle>
+        <!-- <SettingTitle>旋转</SettingTitle>
         <div class="lc-field-body">
           <RotateSetting
             :config="config"
           />
-        </div>
+        </div> -->
          <!-- <SettingTitle v-if="config.border">边框</SettingTitle>
           <div class="lc-field-body">
             <BorderSetting

data-room-ui/packages/BasicComponents/Input/setting.vue

@@ -72,12 +72,12 @@
           <div class="lc-field-body">
             <PosWhSetting :config="config" />
           </div>
-          <SettingTitle>旋转</SettingTitle>
+          <!-- <SettingTitle>旋转</SettingTitle>
           <div class="lc-field-body">
             <RotateSetting
               :config="config"
             />
-          </div>
+          </div> -->
           <SettingTitle>基础</SettingTitle>
           <div class="lc-field-body">
             <el-form-item label="输入值字体大小">

data-room-ui/packages/BasicComponents/LinkChart/setting.vue

@@ -40,12 +40,12 @@
               :bigTitle='config.title'
             />
           </div>
-          <SettingTitle>旋转</SettingTitle>
+          <!-- <SettingTitle>旋转</SettingTitle>
           <div class="lc-field-body">
             <RotateSetting
               :config="config"
             />
-          </div>
+          </div> -->
       <SettingTitle>基础</SettingTitle>
       <div class="bs-setting-wrap">
         <el-form-item

data-room-ui/packages/BasicComponents/Map/setting.vue

@@ -33,12 +33,12 @@
               :bigTitle='config.title'
             />
           </div>
-      <SettingTitle>旋转</SettingTitle>
+      <!-- <SettingTitle>旋转</SettingTitle>
       <div class="lc-field-body">
         <RotateSetting
           :config="config"
         />
-      </div>
+      </div> -->
       <SettingTitle>基础</SettingTitle>
       <div class="lc-field-body">
         <el-form-item

data-room-ui/packages/BasicComponents/Marquee/setting.vue

@@ -40,12 +40,12 @@
               :bigTitle='config.title'
             />
           </div>
-      <SettingTitle>旋转</SettingTitle>
+      <!-- <SettingTitle>旋转</SettingTitle>
       <div class="lc-field-body">
         <RotateSetting
           :config="config"
         />
-      </div>
+      </div> -->
       <SettingTitle>基础</SettingTitle>
       <div class="lc-field-body">
         <el-form-item

data-room-ui/packages/BasicComponents/Numbers/setting.vue

@@ -42,12 +42,12 @@
           :big-title="config.title"
         />
       </div>
-      <SettingTitle>旋转</SettingTitle>
+      <!-- <SettingTitle>旋转</SettingTitle>
       <div class="lc-field-body">
         <RotateSetting
           :config="config"
         />
-      </div>
+      </div> -->
       <SettingTitle>基础</SettingTitle>
       <div class="lc-field-body">
         <el-form-item

data-room-ui/packages/BasicComponents/Picture/setting.vue

@@ -40,12 +40,12 @@
           :bigTitle='config.title'
         />
       </div>
-      <SettingTitle>旋转</SettingTitle>
+      <!-- <SettingTitle>旋转</SettingTitle>
       <div class="lc-field-body">
         <RotateSetting
           :config="config"
         />
-      </div>
+      </div> -->
       <SettingTitle>基础</SettingTitle>
       <div class="lc-field-body">
         <el-form-item

data-room-ui/packages/BasicComponents/ScreenScrollBoard/index.vue

@@ -66,7 +66,7 @@ export default {
       if (config.customize.columnConfig.length === 0) {
         const key = []
         for (const i in data.columnData) {
-          header.push(data.columnData[i].remark)
+          header.push(data.columnData[i].remark||data.columnData[i].alias)
           key.push(i)
         }
         data.data.forEach((item) => {

data-room-ui/packages/BasicComponents/ScreenScrollBoard/setting.vue

@@ -36,12 +36,12 @@
               :bigTitle='config.title'
             />
           </div>
-        <SettingTitle>旋转</SettingTitle>
+        <!-- <SettingTitle>旋转</SettingTitle>
         <div class="lc-field-body">
           <RotateSetting
             :config="config"
           />
-        </div>
+        </div> -->
         <SettingTitle>基础</SettingTitle>
         <div class="lc-field-body">
           <el-form-item label="表头背景色">

data-room-ui/packages/BasicComponents/ScreenScrollRanking/setting.vue

@@ -35,12 +35,12 @@
             :bigTitle='config.title'
           />
         </div>
-        <SettingTitle>旋转</SettingTitle>
+        <!-- <SettingTitle>旋转</SettingTitle>
         <div class="lc-field-body">
           <RotateSetting
             :config="config"
           />
-        </div>
+        </div> -->
         <SettingTitle>基础</SettingTitle>
         <div class="lc-field-body">
           <el-form-item

data-room-ui/packages/BasicComponents/Select/setting.vue

@@ -19,12 +19,12 @@
           <div class="lc-field-body">
             <PosWhSetting :config="config" />
           </div>
-          <SettingTitle>旋转</SettingTitle>
+          <!-- <SettingTitle>旋转</SettingTitle>
           <div class="lc-field-body">
             <RotateSetting
               :config="config"
             />
-          </div>
+          </div> -->
           <SettingTitle>基础</SettingTitle>
           <div class="lc-field-body">
             <!-- 选择器背景颜色 -->

data-room-ui/packages/BasicComponents/Tables/setting.vue

@@ -35,12 +35,12 @@
           label-width="120px"
         />
       </div>
-      <SettingTitle>旋转</SettingTitle>
+      <!-- <SettingTitle>旋转</SettingTitle>
       <div class="lc-field-body">
         <RotateSetting
           :config="config"
         />
-      </div>
+      </div> -->
       <SettingTitle>基础</SettingTitle>
       <div class="lc-field-body">
         <el-form-item label="表头颜色">

data-room-ui/packages/BasicComponents/Texts/setting.vue

@@ -42,12 +42,12 @@
           :big-title="config.title"
         />
       </div>
-      <SettingTitle>旋转</SettingTitle>
+      <!-- <SettingTitle>旋转</SettingTitle>
       <div class="lc-field-body">
         <RotateSetting
           :config="config"
         />
-      </div>
+      </div> -->
       <SettingTitle>基础</SettingTitle>
       <div class="lc-field-body">
         <el-form-item

data-room-ui/packages/BasicComponents/ThemeSelect/setting.vue

@@ -36,12 +36,12 @@
           :bigTitle='config.title'
         />
       </div>
-      <SettingTitle>旋转</SettingTitle>
+      <!-- <SettingTitle>旋转</SettingTitle>
       <div class="lc-field-body">
         <RotateSetting
           :config="config"
         />
-      </div>
+      </div> -->
       <SettingTitle>基础</SettingTitle>
       <div class="lc-field-body">
         <el-form-item

data-room-ui/packages/BasicComponents/ThemeSwitcher/setting.vue

@@ -26,12 +26,12 @@
           :bigTitle='config.title'
         />
       </div>
-      <SettingTitle>旋转</SettingTitle>
+      <!-- <SettingTitle>旋转</SettingTitle>
       <div class="lc-field-body">
         <RotateSetting
           :config="config"
         />
-      </div>
+      </div> -->
       <SettingTitle>基础</SettingTitle>
       <div class="lc-field-body">
         <el-form-item

data-room-ui/packages/BasicComponents/TimeCountDown/setting.vue

@@ -36,12 +36,12 @@
           :bigTitle='config.title'
         />
       </div>
-      <SettingTitle>旋转</SettingTitle>
+      <!-- <SettingTitle>旋转</SettingTitle>
       <div class="lc-field-body">
         <RotateSetting
           :config="config"
         />
-      </div>
+      </div> -->
       <SettingTitle>基础</SettingTitle>
       <div class="lc-field-body">
         <el-form-item

data-room-ui/packages/BasicComponents/TimePicker/setting.vue

@@ -19,12 +19,12 @@
           <div class="lc-field-body">
             <PosWhSetting :config="config" />
           </div>
-          <SettingTitle>旋转</SettingTitle>
+          <!-- <SettingTitle>旋转</SettingTitle>
           <div class="lc-field-body">
             <RotateSetting
               :config="config"
             />
-          </div>
+          </div> -->
           <SettingTitle>基础</SettingTitle>
           <div class="lc-field-body">
             <!-- 选择器背景颜色 -->

data-room-ui/packages/BasicComponents/VerticalLine/setting.vue

@@ -37,12 +37,12 @@
               :bigTitle='config.title'
             />
           </div>
-        <SettingTitle>旋转</SettingTitle>
+        <!-- <SettingTitle>旋转</SettingTitle>
         <div class="lc-field-body">
           <RotateSetting
             :config="config"
           />
-        </div>
+        </div> -->
         <SettingTitle>基础</SettingTitle>
         <div class="lc-field-body">
           <el-form-item label="背景色一">

data-room-ui/packages/BasicComponents/Video/setting.vue

@@ -37,12 +37,12 @@
               :bigTitle='config.title'
             />
           </div>
-        <SettingTitle>旋转</SettingTitle>
+        <!-- <SettingTitle>旋转</SettingTitle>
         <div class="lc-field-body">
           <RotateSetting
             :config="config"
           />
-        </div>
+        </div> -->
         <SettingTitle>基础</SettingTitle>
         <div class="lc-field-body">
           <el-form-item label="视频链接">

data-room-ui/packages/BigScreenDesign/BorderSetting.vue

@@ -27,12 +27,12 @@
         <div class="lc-field-body">
           <PosWhSetting :config="config" />
         </div>
-        <SettingTitle>旋转</SettingTitle>
+        <!-- <SettingTitle>旋转</SettingTitle>
         <div class="lc-field-body">
           <RotateSetting
             :config="config"
           />
-        </div>
+        </div> -->
         <SettingTitle>基础</SettingTitle>
         <div class="lc-field-body">
           <slot name="top" />

data-room-ui/packages/BigScreenDesign/PageDesignTop.vue

@@ -131,10 +131,9 @@ import icons from 'data-room-ui/assets/images/alignIcon/export'
 import IconSvg from 'data-room-ui/SvgIcon'
 import {
   showSize,
-  dataURLtoBlob,
-  translateBlobToBase64
+  compressImage
 } from 'data-room-ui/js/utils/compressImg'
-import * as imageConversion from 'image-conversion'
+// import * as imageConversion from 'image-conversion'
 export default {
   name: 'PageTopSetting',
   components: {
@@ -449,15 +448,21 @@ export default {
           }
           if (dataUrl) {
             if (showSize(dataUrl) > 200) {
-              const url = dataURLtoBlob(dataUrl)
-              // 压缩到500KB,这里的500就是要压缩的大小,可自定义
-              const imgRes = await imageConversion.compressAccurately(url, {
-                size: 200, // 图片大小压缩到100kb
-                width: 1280, // 宽度压缩到1280
-                height: 720 // 高度压缩到720
-              })
-              const base64 = await translateBlobToBase64(imgRes)
-              pageInfo.coverPicture = base64.result
+              // const newData = compressImage(dataUrl, 800)
+              // console.log(111, newData)
+              // const url = dataURLtoBlob(dataUrl)
+              // // 压缩到500KB,这里的500就是要压缩的大小,可自定义
+              // const imgRes = await imageConversion.compressAccurately(url, {
+              //   size: 200, // 图片大小压缩到100kb
+              //   width: 1280, // 宽度压缩到1280
+              //   height: 720 // 高度压缩到720
+              // })
+              // const base64 = await translateBlobToBase64(imgRes)
+              // pageInfo.coverPicture = base64.result
+              this.$message.info('由于封面图片过大，进行压缩中')
+              const compressCoverPicture = await compressImage(dataUrl, { width: 1280, height: 720, size: 400, quality: 1 })
+              console.log(showSize(compressCoverPicture))
+              pageInfo.coverPicture = compressCoverPicture
             } else {
               pageInfo.coverPicture = dataUrl
             }

data-room-ui/packages/BigScreenDesign/RightSetting/BorderSetting.vue

@@ -75,6 +75,7 @@
          <el-form-item
           :label-width="labelWidth"
           label="是否显示标题"
+          v-if="config.type!='GcBorder16'"
         >
           <el-switch
               v-model="config.isTitle"
@@ -146,6 +147,22 @@
           :placeholder="`请输入${setting.label}`"
           clearable
         />
+        <el-input
+          v-model="config[setting.field]"
+          v-else-if="setting.type === 'background'"
+          clearable
+          placeholder="请选择图片"
+        >
+          <template slot="append">
+            <el-button
+              size="small"
+              type="primary"
+              @click="initCard"
+            >
+              选择
+            </el-button>
+          </template>
+        </el-input>
         <el-select
           v-else-if="setting.type === 'select'"
           v-model="config[setting.field]"
@@ -249,6 +266,7 @@
         />
       </el-form-item>
       </div>
+      <SourceDialog ref="SourceDialog" @getImg='changeImg'  />
     </div>
   </div>
 </template>
@@ -258,12 +276,14 @@ import plotList from 'data-room-ui/BorderComponents/settingList.js'
 import BorderColorSetting from 'data-room-ui/BigScreenDesign/RightSetting/BorderColorSetting/index.vue'
 import ColorSelect from 'data-room-ui/ColorMultipleSelect/index.vue'
 import BorderSelect from 'data-room-ui/BorderSelect/index.vue'
+import SourceDialog from '../SourceDialog/index.vue'
 export default {
   name: '',
   components: {
     BorderSelect,
     ColorSelect,
-    BorderColorSetting
+    BorderColorSetting,
+    SourceDialog
   },
   props: {
     bigTitle:{
@@ -361,9 +381,17 @@ export default {
     // }
   },
   methods: {
+    changeImg(val){
+      console.log(val)
+      this.$set(this.config,'imgUrl',val.url)
+    },
     init(){
       this.$refs.BorderSelect.init()
+    },
+    initCard(){
+      this.$refs.SourceDialog.init()
     }
+
   }
 }
 </script>

data-room-ui/packages/BigScreenDesign/RightSetting/DataSetting.vue

@@ -792,6 +792,8 @@ export default {
     },
     // 根据数据集来获取数据集详情
     getDataSetDetailsById (id, type) {
+      this.clearVerify()
+      this.config.customize.columnConfig=[]
       if (id) {
         this.config.dataSource.businessKey = id
         getDataSetDetails(id).then(res => {

data-room-ui/packages/BigScreenDesign/RightSetting/EchartsCustomSetting.vue

@@ -37,12 +37,12 @@
           :config="config"
         />
       </div>
-      <SettingTitle>旋转</SettingTitle>
+      <!-- <SettingTitle>旋转</SettingTitle>
       <div class="lc-field-body">
         <RotateSetting
           :config="config"
         />
-      </div>
+      </div> -->
       <template v-for="group in groupList">
         <div :key="group.groupName">
           <SettingTitle>   {{ group.groupName | filterGroupName }}</SettingTitle>

data-room-ui/packages/BigScreenDesign/RightSetting/G2CustomSetting.vue

@@ -37,12 +37,12 @@
           :config="config"
         />
       </div>
-      <SettingTitle>旋转</SettingTitle>
+      <!-- <SettingTitle>旋转</SettingTitle>
       <div class="lc-field-body">
         <RotateSetting
           :config="config"
         />
-      </div>
+      </div> -->
       <template v-for="group in groupList">
         <div :key="group.groupName">
           <SettingTitle>   {{ group.groupName | filterGroupName }}</SettingTitle>

data-room-ui/packages/BigScreenDesign/SourceDialog/index.vue

@@ -153,7 +153,16 @@ import { getFileUrl } from 'data-room-ui/js/utils/file'
 export default {
   name: 'SourceDialog',
   mixins: [pageMixins],
-  props: {},
+  props: {
+    imgUrl: {
+      type: String,
+      default: ''
+    }
+  },
+  model: {
+    prop: 'imgUrl',
+    event: 'change'
+  },
   data () {
     return {
       dialogVisible: false,
@@ -193,6 +202,7 @@ export default {
     confirm () {
       this.dialogVisible = false
       if (this.focus !== -1) {
+         this.$emit('change', this.focus)
         this.$emit('getImg', this.focus)
       }
     },

data-room-ui/packages/BizComponent/index.vue

@@ -156,10 +156,11 @@ import 'codemirror/mode/vue/vue.js'
 
 import {
   showSize,
-  dataURLtoBlob,
-  translateBlobToBase64
+  compressImage
+  // dataURLtoBlob,
+  // translateBlobToBase64
 } from 'data-room-ui/js/utils/compressImg'
-import * as imageConversion from 'image-conversion'
+// import * as imageConversion from 'image-conversion'
 
 export default {
   name: 'BizComponentDesign',
@@ -354,20 +355,22 @@ export default {
       }
       if (dataUrl) {
         if (showSize(dataUrl) > 200) {
-          const url = dataURLtoBlob(dataUrl)
+          // const url = dataURLtoBlob(dataUrl)
           // 压缩到500KB,这里的500就是要压缩的大小,可自定义
-          imageConversion.compressAccurately(
-            url,
-            {
-              size: 200, // 图片大小压缩到100kb
-              width: 1280, // 宽度压缩到1280
-              height: 720 // 高度压缩到720
-            }
-          ).then((res) => {
-            translateBlobToBase64(res, (e) => {
-              this.form.coverPicture = e.result
-            })
-          })
+          // imageConversion.compressAccurately(
+          //   url,
+          //   {
+          //     size: 200, // 图片大小压缩到100kb
+          //     width: 1280, // 宽度压缩到1280
+          //     height: 720 // 高度压缩到720
+          //   }
+          // ).then((res) => {
+          //   translateBlobToBase64(res, (e) => {
+          //     this.form.coverPicture = e.result
+          //   })
+          // })
+          this.$message.info('由于封面图片过大，进行压缩中')
+          this.form.coverPicture = await compressImage(dataUrl, { width: 1280, height: 720, size: 400, quality: 1 })
         } else {
           this.form.coverPicture = dataUrl
         }

data-room-ui/packages/BorderComponents/GcBorder16/index.vue

@@ -4,8 +4,8 @@
     class="bs-design-wrap"
     :id="'border'+ config.code"
     :style="{
-      borderImageSlice:'100 100 100 100 fill',
-      borderImageWidth:'100px 100px 100px 100px',
+      borderImageSlice:`${borderArray[0]} ${borderArray[1]} ${borderArray[2]} ${borderArray[3]} fill`,
+      borderImageWidth:`${borderArray[0]}px ${borderArray[1]}px ${borderArray[2]}px ${borderArray[3]}px`,
     }"
   >
   </div>
@@ -33,12 +33,26 @@ export default {
     }
   },
   computed: {
+    borderArray(){
+      return this.config.border.borderArray ? this.config.border.borderArray
+        : [100,100,100,100]
+    }
   },
   watch: {
+    'config.border.imgUrl': {
+      handler (val) {
+        if(val){
+          const a =document.getElementById('border'+ this.config.code)
+          a.style['border-image-source']=`url(${val})`
+        }
+      }
+    }
   },
   mounted () {
-    const a =document.getElementById('border'+ this.config.code)
-    // a.style['border-image-source']=`url(http://127.0.0.1:8081//bigScreenServer/static/1704043211902484481.png)`
+    if(this.config.border.imgUrl){
+      const a =document.getElementById('border'+ this.config.code)
+          a.style['border-image-source']=`url(${this.config.border.imgUrl})`
+    }
   },
   methods: {
   }

data-room-ui/packages/BorderComponents/GcBorder16/setting.js

@@ -3,134 +3,14 @@ const type = 'GcBorder16'
 
 const name = '边框16'
 
-const isTitle = true
+const isTitle = false
 
 const padding =[0,0,0,0]
 // 右侧配置项
 const setting = [
 
-  {
-    label:'标题区域背景色',
-    // 设置组件类型， select / input / colorPicker
-    type: 'gradual',
-    // 字段
-    field: 'fontGradientColor',
-    optionField: 'fontGradientColor', // 对应options中的字段
-    // 是否多选
-    multiple: false,
-    // 绑定的值
-    value: [],
-  },
   // 背景色
   // {
-  //   label:'标题区域背景色一',
-  //   // 设置组件类型， select / input / colorPicker
-  //   type: 'colorPicker',
-  //   // 字段
-  //   field: 'fontGradientColor0',
-  //   optionField: 'fontGradientColor0', // 对应options中的字段
-  //   // 是否多选
-  //   multiple: false,
-  //   // 绑定的值
-  //   value: '',
-  // },
-  // {
-  //   label:'标题区域背景色二',
-  //   // 设置组件类型， select / input / colorPicker
-  //   type: 'colorPicker',
-  //   // 字段
-  //   field: 'fontGradientColor1',
-  //   optionField: 'fontGradientColor1', // 对应options中的字段
-  //   // 是否多选
-  //   multiple: false,
-  //   // 绑定的值
-  //   value: '',
-  // },
-  {
-    label:'标题左侧颜色',
-    // 设置组件类型， select / input / colorPicker
-    type: 'colorPicker',
-    // 字段
-    field: 'fontLeftColor',
-    optionField: 'fontLeftColor', // 对应options中的字段
-    // 是否多选
-    multiple: false,
-    // 绑定的值
-    value: '#007aff',
-  },
-  {
-    label:'标题左侧宽度',
-    // 设置组件类型， select / input / colorPicker
-    type: 'inputNumber',
-    // 字段
-    field: 'fontLeftWidth',
-    optionField: 'fontLeftWidth', // 对应options中的字段
-    // 是否多选
-    multiple: false,
-    // 绑定的值
-    value: 4,
-  },
-  {
-    label:'标题底部分割线颜色',
-    // 设置组件类型， select / input / colorPicker
-    type: 'colorPicker',
-    // 字段
-    field: 'fontBottomColor',
-    optionField: 'fontBottomColor', // 对应options中的字段
-    // 是否多选
-    multiple: false,
-    // 绑定的值
-    value: '',
-  },
-  {
-    label:'外边框线颜色',
-    // 设置组件类型， select / input / colorPicker
-    type: 'colorPicker',
-    // 字段
-    field: 'borderColor',
-    optionField: 'borderColor', // 对应options中的字段
-    // 是否多选
-    multiple: false,
-    // 绑定的值
-    value: '',
-  },
-  {
-    label:'外边框线宽度',
-    // 设置组件类型， select / input / colorPicker
-    type: 'inputNumber',
-    // 字段
-    field: 'borderWidth',
-    optionField: 'borderWidth', // 对应options中的字段
-    // 是否多选
-    multiple: false,
-    // 绑定的值
-    value: 0,
-  },
-  {
-    label:'背景色',
-    // 设置组件类型， select / input / colorPicker
-    type: 'gradual',
-    // 字段
-    field: 'gradientColor',
-    optionField: 'gradientColor', // 对应options中的字段
-    // 是否多选
-    multiple: false,
-    // 绑定的值
-    value: [],
-  },
-  // {
-  //   label:'背景色一',
-  //   // 设置组件类型， select / input / colorPicker
-  //   type: 'colorPicker',
-  //   // 字段
-  //   field: 'gradientColor0',
-  //   optionField: 'gradientColor0', // 对应options中的字段
-  //   // 是否多选
-  //   multiple: false,
-  //   // 绑定的值
-  //   value: '',
-  // },
-  // {
   //   label:'背景色二',
   //   // 设置组件类型， select / input / colorPicker
   //   type: 'colorPicker',
@@ -143,104 +23,29 @@ const setting = [
   //   value: '',
   // },
   {
-    label: '渐变色方向',
-    // 设置组件类型
-    type: 'select',
-    // 字段
-    field: 'gradientDirection',
-    // 对应options中的字段
-    optionField: 'gradientDirection',
-    // 是否多选
-    multiple: false,
-    value: 'to right',
-    options: [
-      {
-        label: '从左到右',
-        value: 'to right'
-      },
-      {
-        label: '从右到左',
-        value: 'to left'
-      },
-      {
-        label: '从上到下',
-        value: 'to bottom'
-      },
-      {
-        label: '从下到上',
-        value: 'to top'
-      },
-      {
-        label: '从左上到右下',
-        value: 'to bottom right'
-      },
-      {
-        label: '从右上到左下',
-        value: 'to bottom left'
-      },
-      {
-        label: '从左下到右上',
-        value: 'to top right'
-      },
-      {
-        label: '从右下到左上',
-        value: 'to top left'
-      }
-    ]
-  },
-  {
-    label:'左上圆角值',
+    label:'选择背景图',
     // 设置组件类型， select / input / colorPicker
-    type: 'inputNumber',
+    type: 'background',
     // 字段
-    field: 'radiusLeftTop',
-    optionField: 'radiusLeftTop', // 对应options中的字段
+    field: 'imgUrl',
+    optionField: 'imgUrl', // 对应options中的字段
     // 是否多选
     multiple: false,
     // 绑定的值
-    value: 2,
-  },
-  {
-    label:'左下圆角值',
-    // 设置组件类型， select / input / colorPicker
-    type: 'inputNumber',
-    // 字段
-    field: 'radiusLeftBottom',
-    optionField: 'radiusLeftBottom', // 对应options中的字段
-    // 是否多选
-    multiple: false,
-    // 绑定的值
-    value: 2,
-  },
-  {
-    label:'右上圆角值',
-    // 设置组件类型， select / input / colorPicker
-    type: 'inputNumber',
-    // 字段
-    field: 'radiusRightTop',
-    optionField: 'radiusRightTop', // 对应options中的字段
-    // 是否多选
-    multiple: false,
-    // 绑定的值
-    value: 2,
+    value: '',
   },
   {
-    label:'右下圆角值',
+    label:'点九图背景切割',
     // 设置组件类型， select / input / colorPicker
-    type: 'inputNumber',
+    type: 'move',
     // 字段
-    field: 'radiusRightBottom',
-    optionField: 'radiusRightBottom', // 对应options中的字段
+    field: 'borderArray',
+    optionField: 'borderArray', // 对应options中的字段
     // 是否多选
     multiple: false,
     // 绑定的值
-    value: 2,
+    value: [100,100,100,100],
   },
-
-
-
-
-
 ]
 
 

data-room-ui/packages/BorderSelect/index.vue

@@ -29,6 +29,7 @@
             @click="chooseComponent(component)"
           >
             <div
+            v-if="component.title!='GcBorder16'"
               :class="component.title == focus.title ? 'focus' : ''"
               class="big-screen-card-inner"
             >

data-room-ui/packages/Borders/Border1/setting.vue

@@ -5,9 +5,9 @@
       :config="config"
       :predefine-theme-colors="predefineThemeColors"
     />
-    <RotateSetting
+    <!-- <RotateSetting
       :config="config"
-    />
+    /> -->
   </div>
 </template>
 <script>

data-room-ui/packages/Decorations/Decoration1/setting.vue

@@ -27,12 +27,12 @@
         <div class="lc-field-body">
           <PosWhSetting :config="config" />
         </div>
-        <SettingTitle>旋转</SettingTitle>
+        <!-- <SettingTitle>旋转</SettingTitle>
         <div class="lc-field-body">
           <RotateSetting
             :config="config"
           />
-        </div>
+        </div> -->
         <SettingTitle>基础</SettingTitle>
         <div class="lc-field-body">
           <el-form-item label="装饰主颜色">

data-room-ui/packages/Decorations/Decoration10/setting.vue

@@ -27,12 +27,12 @@
         <div class="lc-field-body">
           <PosWhSetting :config="config" />
         </div>
-        <SettingTitle>旋转</SettingTitle>
+        <!-- <SettingTitle>旋转</SettingTitle>
         <div class="lc-field-body">
           <RotateSetting
             :config="config"
           />
-        </div>
+        </div> -->
         <SettingTitle>基础</SettingTitle>
         <div class="lc-field-body">
           <el-form-item label="装饰主颜色">

data-room-ui/packages/Decorations/Decoration11/setting.vue

@@ -27,12 +27,12 @@
         <div class="lc-field-body">
           <PosWhSetting :config="config" />
         </div>
-        <SettingTitle>旋转</SettingTitle>
+        <!-- <SettingTitle>旋转</SettingTitle>
         <div class="lc-field-body">
           <RotateSetting
             :config="config"
           />
-        </div>
+        </div> -->
         <SettingTitle>基础</SettingTitle>
         <div class="lc-field-body">
           <el-form-item label="装饰主颜色">

data-room-ui/packages/Decorations/Decoration12/setting.vue

@@ -53,12 +53,12 @@
             />
           </el-form-item>
         </div>
-        <SettingTitle>旋转</SettingTitle>
+        <!-- <SettingTitle>旋转</SettingTitle>
         <div class="lc-field-body">
           <RotateSetting
             :config="config"
           />
-        </div>
+        </div> -->
       </el-form>
     </el-form>
   </div>

data-room-ui/packages/Decorations/Decoration2/setting.vue

@@ -24,12 +24,6 @@
         <div class="lc-field-body">
           <PosWhSetting :config="config" />
         </div>
-        <SettingTitle>旋转</SettingTitle>
-        <div class="lc-field-body">
-          <RotateSetting
-            :config="config"
-          />
-        </div>
         <SettingTitle>基础</SettingTitle>
         <div class="lc-field-body">
           <el-form-item label="装饰颜色">
@@ -60,7 +54,7 @@
 <script>
 import ColorPicker from 'data-room-ui/ColorPicker/index.vue'
 import PosWhSetting from 'data-room-ui/BigScreenDesign/RightSetting/PosWhSetting.vue'
-import RotateSetting from 'data-room-ui/BigScreenDesign/RightSetting/RotateSetting.vue'
+// import RotateSetting from 'data-room-ui/BigScreenDesign/RightSetting/RotateSetting.vue'
 import SettingTitle from 'data-room-ui/SettingTitle/index.vue'
 import {predefineColors} from "data-room-ui/js/utils/colorList";
 export default {
@@ -68,8 +62,7 @@ export default {
   components: {
     ColorPicker,
     PosWhSetting,
-    SettingTitle,
-    RotateSetting
+    SettingTitle
   },
   data () {
     return {

data-room-ui/packages/Decorations/Decoration2/settingConfig.js

@@ -18,16 +18,16 @@ const customConfig = {
   root: {
     version: '2023071001',
     contribution: false,
-    // 绕x轴旋转角度
-    rotateX: 0,
-    // 绕y轴旋转角度
-    rotateY: 0,
-    // 绕z轴旋转角度
-    rotateZ: 0,
-    // 透视距离
-    perspective: 0,
-    skewX: 0,
-    skewY: 0
+    // // 绕x轴旋转角度
+    // rotateX: 0,
+    // // 绕y轴旋转角度
+    // rotateY: 0,
+    // // 绕z轴旋转角度
+    // rotateZ: 0,
+    // // 透视距离
+    // perspective: 0,
+    // skewX: 0,
+    // skewY: 0
   },
   customize: {
     decorationColor1: '#3faacb',

data-room-ui/packages/Decorations/Decoration2Reverse/setting.vue

@@ -24,15 +24,15 @@
         <div class="lc-field-body">
           <PosWhSetting :config="config" />
         </div>
-        <SettingTitle>旋转</SettingTitle>
+        <!-- <SettingTitle>旋转</SettingTitle>
         <div class="lc-field-body">
           <RotateSetting
             :config="config"
           />
-        </div>
+        </div> -->
         <SettingTitle>基础</SettingTitle>
         <div class="lc-field-body">
-          <el-form-item label="装饰主颜色">
+          <el-form-item label="装饰颜色">
             <ColorPicker
               v-model="config.customize.decorationColor1"
               :predefine="predefineThemeColors"

data-room-ui/packages/Decorations/Decoration3/setting.vue

@@ -24,12 +24,12 @@
         <div class="lc-field-body">
           <PosWhSetting :config="config" />
         </div>
-        <SettingTitle>旋转</SettingTitle>
+        <!-- <SettingTitle>旋转</SettingTitle>
         <div class="lc-field-body">
           <RotateSetting
             :config="config"
           />
-        </div>
+        </div> -->
         <SettingTitle>基础</SettingTitle>
         <div class="lc-field-body">
           <el-form-item label="装饰主颜色">

data-room-ui/packages/Decorations/Decoration4/setting.vue

@@ -24,12 +24,12 @@
         <div class="lc-field-body">
           <PosWhSetting :config="config" />
         </div>
-        <SettingTitle>旋转</SettingTitle>
+        <!-- <SettingTitle>旋转</SettingTitle>
         <div class="lc-field-body">
           <RotateSetting
             :config="config"
           />
-        </div>
+        </div> -->
         <SettingTitle>基础</SettingTitle>
         <div class="lc-field-body">
           <el-form-item label="装饰主颜色">

data-room-ui/packages/Decorations/Decoration4Reverse/setting.vue

@@ -24,12 +24,12 @@
         <div class="lc-field-body">
           <PosWhSetting :config="config" />
         </div>
-        <SettingTitle>旋转</SettingTitle>
+        <!-- <SettingTitle>旋转</SettingTitle>
         <div class="lc-field-body">
           <RotateSetting
             :config="config"
           />
-        </div>
+        </div> -->
         <SettingTitle>基础</SettingTitle>
         <div class="lc-field-body">
           <el-form-item label="装饰主颜色">

data-room-ui/packages/Decorations/Decoration5/setting.vue

@@ -27,12 +27,12 @@
         <div class="lc-field-body">
           <PosWhSetting :config="config" />
         </div>
-        <SettingTitle>旋转</SettingTitle>
+        <!-- <SettingTitle>旋转</SettingTitle>
         <div class="lc-field-body">
           <RotateSetting
             :config="config"
           />
-        </div>
+        </div> -->
         <SettingTitle>基础</SettingTitle>
         <div class="lc-field-body">
           <el-form-item label="装饰主颜色">

data-room-ui/packages/Decorations/Decoration6/setting.vue

@@ -27,12 +27,12 @@
         <div class="lc-field-body">
           <PosWhSetting :config="config" />
         </div>
-        <SettingTitle>旋转</SettingTitle>
+        <!-- <SettingTitle>旋转</SettingTitle>
         <div class="lc-field-body">
           <RotateSetting
             :config="config"
           />
-        </div>
+        </div> -->
         <SettingTitle>基础</SettingTitle>
         <div class="lc-field-body">
           <el-form-item label="装饰主颜色">

data-room-ui/packages/Decorations/Decoration8/setting.vue

@@ -27,12 +27,12 @@
         <div class="lc-field-body">
           <PosWhSetting :config="config" />
         </div>
-        <SettingTitle>旋转</SettingTitle>
+        <!-- <SettingTitle>旋转</SettingTitle>
         <div class="lc-field-body">
           <RotateSetting
             :config="config"
           />
-        </div>
+        </div> -->
         <SettingTitle>基础</SettingTitle>
         <div class="lc-field-body">
           <el-form-item label="装饰主颜色">

data-room-ui/packages/Decorations/Decoration8Reverse/setting.vue

@@ -27,12 +27,12 @@
         <div class="lc-field-body">
           <PosWhSetting :config="config" />
         </div>
-        <SettingTitle>旋转</SettingTitle>
+        <!-- <SettingTitle>旋转</SettingTitle>
         <div class="lc-field-body">
           <RotateSetting
             :config="config"
           />
-        </div>
+        </div> -->
         <SettingTitle>基础</SettingTitle>
         <div class="lc-field-body">
           <el-form-item label="装饰主颜色">

data-room-ui/packages/Decorations/Decoration9/setting.vue

@@ -27,12 +27,12 @@
         <div class="lc-field-body">
           <PosWhSetting :config="config" />
         </div>
-        <SettingTitle>旋转</SettingTitle>
+        <!-- <SettingTitle>旋转</SettingTitle>
         <div class="lc-field-body">
           <RotateSetting
             :config="config"
           />
-        </div>
+        </div> -->
         <SettingTitle>基础</SettingTitle>
         <div class="lc-field-body">
           <el-form-item label="装饰主颜色">

data-room-ui/packages/G2Plots/组合图/柱线混合图.js

@@ -1,544 +0,0 @@
-/*
- * @description: 配置，参考https://g2plot.antv.antgroup.com/examples
- * @Date: 2023-03-27 14:38:23
- * @Author: xing.heng
- */
-
-// 配置版本号
-const version = '2023092201'
-// 分类
-const category = 'DualAxes'
-// 标题
-const title = '柱线混合图'
-// 类别， new Line()
-const chartType = 'DualAxes'
-// 用于标识，唯一，和文件夹名称一致
-const name = 'ZhuXianHunHeTu'
-
-// 右侧配置项
-const setting = [
-  {
-    label: '维度',
-    type: 'select', // 设置组件类型
-    field: 'xField', // 字段
-    optionField: 'xField', // 对应options中的字段
-    // 是否多选
-    multiple: false,
-    value: '',
-    tabName: 'data'
-  },
-  {
-    label: '指标',
-    type: 'select', // 设置组件类型
-    field: 'yField', // 字段
-    optionField: 'yField', // 对应options中的字段
-    // 是否多选
-    multiple: true,
-    value: [],
-    tabName: 'data'
-  },
-  // 网格线 grid
-  // {
-  //   label: '虚线',
-  //   type: 'switch',
-  //   field: 'yAxis_grid_line_style_lineDash',
-  //   optionField: 'yAxis.grid.line.style.lineDash',
-  //   value: 0,
-  //   active: 5,
-  //   inactive: 0,
-  //   tabName: 'custom',
-  //   groupName: 'grid'
-  // },
-  // {
-  //   label: '宽度',
-  //   type: 'inputNumber',
-  //   field: 'yAxis_grid_line_style_lineWidth',
-  //   optionField: 'yAxis.grid.line.style.lineWidth',
-  //   value: 1,
-  //   tabName: 'custom',
-  //   groupName: 'grid'
-  // },
-  // {
-  //   label: '颜色',
-  //   type: 'colorPicker',
-  //   field: 'yAxis_grid_line_style_stroke',
-  //   optionField: 'yAxis.grid.line.style.stroke',
-  //   value: '#d0d0d0',
-  //   tabName: 'custom',
-  //   groupName: 'grid'
-  // },
-  // 图例 legend
-  {
-    label: '显示',
-    type: 'switch', // 设置组件类型
-    field: 'legendEnable', // 字段
-    optionField: 'legendEnable', // 对应options中的字段
-    value: false,
-    active: true,
-    inactive: false,
-    tabName: 'custom',
-    groupName: 'legend'
-  },
-  {
-    label: '位置',
-    type: 'select', // 设置组件类型
-    field: 'legendPosition', // 字段
-    optionField: 'legendPosition', // 对应options中的字段
-    // 是否多选
-    multiple: false,
-    value: 'top',
-    tabName: 'custom',
-    options: [
-      { label: '顶部', value: 'top' },
-      { label: '左上角', value: 'top-left' },
-      { label: '右上角', value: 'top-right' },
-      { label: '左侧', value: 'left' },
-      // { label: '左上方', value: 'left-top' },
-      // { label: '左下方', value: 'left-bottom' },
-      { label: '右侧', value: 'right' },
-      // { label: '右上方', value: 'right-top' },
-      // { label: '右下方', value: 'right-bottom' },
-      { label: '底部', value: 'bottom' },
-      { label: '左下角', value: 'bottom-left' },
-      { label: '右下角', value: 'bottom-right' }
-    ],
-    groupName: 'legend'
-  },
-  {
-    label: '字体大小',
-    type: 'inputNumber',
-    field: 'legendItemName_style_fontSize',
-    optionField: 'legendItemName.style.fontSize',
-    value: 12,
-    tabName: 'custom',
-    groupName: 'legend'
-  },
-  {
-    label: '字体权重',
-    type: 'inputNumber',
-    step: 100,
-    max: 900,
-    field: 'legendItemName_style_fontWeight',
-    optionField: 'legendItemName.style.fontWeight',
-    value: 400,
-    tabName: 'custom',
-    groupName: 'legend'
-  },
-  {
-    label: '字体颜色',
-    type: 'colorPicker',
-    field: 'legendItemName_style_fill',
-    optionField: 'legendItemName.style.fill',
-    value: '#595959',
-    tabName: 'custom',
-    groupName: 'legend'
-  },
-  // X轴 xAxis
-  {
-    label: '标题',
-    type: 'input',
-    field: 'xAxis_title_text',
-    optionField: 'xAxis.title.text',
-    value: '',
-    tabName: 'custom',
-    groupName: 'xAxis'
-  },
-  {
-    label: '标题位置',
-    type: 'select',
-    field: 'xAxis_title_position',
-    optionField: 'xAxis.title.position',
-    value: 'end',
-    tabName: 'custom',
-    options: [
-      {
-        label: '左',
-        value: 'start'
-      },
-      {
-        label: '中',
-        value: 'center'
-      },
-      {
-        label: '右',
-        value: 'end'
-      }],
-    groupName: 'xAxis'
-  },
-  {
-    label: '标题字体大小',
-    type: 'inputNumber',
-    field: 'xAxis_title_style_fontSize',
-    optionField: 'xAxis.title.style.fontSize',
-    value: 12,
-    tabName: 'custom',
-    groupName: 'xAxis'
-  },
-  {
-    label: '标题颜色',
-    type: 'colorPicker',
-    field: 'xAxis_title_style_fill',
-    optionField: 'xAxis.title.style.fill',
-    // 是否多选
-    multiple: false,
-    value: '#8C8C8C',
-    tabName: 'custom',
-    groupName: 'xAxis'
-  },
-  {
-    label: '标签大小',
-    type: 'inputNumber',
-    field: 'xAxis_label_style_fontSize',
-    optionField: 'xAxis.label.style.fontSize',
-    value: 12,
-    tabName: 'custom',
-    groupName: 'xAxis'
-  },
-  {
-    label: '标签颜色',
-    type: 'colorPicker',
-    field: 'xAxis_label_style_fill',
-    optionField: 'xAxis.label.style.fill',
-    // 是否多选
-    multiple: false,
-    value: '#8C8C8C',
-    tabName: 'custom',
-    groupName: 'xAxis'
-  },
-  {
-    label: '轴线宽度',
-    type: 'inputNumber',
-    field: 'xAxis_line_style_lineWidth',
-    optionField: 'xAxis.line.style.lineWidth',
-    value: 1,
-    tabName: 'custom',
-    groupName: 'xAxis'
-  },
-  {
-    label: '轴线颜色',
-    type: 'colorPicker',
-    field: 'xAxis_line_style_stroke',
-    optionField: 'xAxis.line.style.stroke',
-    // 是否多选
-    multiple: false,
-    value: '#d0d0d0',
-    tabName: 'custom',
-    groupName: 'xAxis'
-  },
-  {
-    label: '刻度线宽度',
-    type: 'inputNumber',
-    field: 'xAxis_tickLine_style_lineWidth',
-    optionField: 'xAxis.tickLine.style.lineWidth',
-    value: 1,
-    tabName: 'custom',
-    groupName: 'xAxis'
-  },
-  {
-    label: '刻度线颜色',
-    type: 'colorPicker',
-    field: 'xAxis_tickLine_style_stroke',
-    optionField: 'xAxis.tickLine.style.stroke',
-    // 是否多选
-    multiple: false,
-    value: '#d0d0d0',
-    tabName: 'custom',
-    groupName: 'xAxis'
-  },
-  {
-    label: '标签过多时旋转',
-    type: 'switch',
-    field: 'xAxis_label_autoRotate',
-    optionField: 'xAxis.label.autoRotate',
-    value: true,
-    active: true,
-    inactive: false,
-    tabName: 'custom',
-    groupName: 'xAxis'
-  },
-  {
-    label: '标签过多时隐藏',
-    type: 'switch',
-    field: 'xAxis_label_autoHide',
-    optionField: 'xAxis.label.autoHide',
-    value: true,
-    tabName: 'custom',
-    groupName: 'xAxis'
-  },
-  {
-    label: '标签过长时省略',
-    type: 'switch',
-    field: 'xAxis_label_autoEllipsis',
-    optionField: 'xAxis.label.autoEllipsis',
-    value: true,
-    tabName: 'custom',
-    groupName: 'xAxis'
-  },
-  // y轴
-  // {
-  //   label: '标题',
-  //   type: 'input',
-  //   field: 'yAxis_title_text',
-  //   optionField: 'yAxis.title.text',
-  //   value: '',
-  //   tabName: 'custom',
-  //   groupName: 'yAxis'
-  // },
-  // {
-  //   label: '标题过长时旋转',
-  //   type: 'switch',
-  //   field: 'yAxis_title_autoRotate',
-  //   optionField: 'yAxis.title.autoRotate',
-  //   value: true,
-  //   active: true,
-  //   inactive: false,
-  //   tabName: 'custom',
-  //   groupName: 'yAxis'
-  // },
-  // {
-  //   label: '标题位置',
-  //   type: 'select',
-  //   field: 'yAxis_title_position',
-  //   optionField: 'yAxis.title.position',
-  //   value: 'end',
-  //   tabName: 'custom',
-  //   options: [
-  //     {
-  //       label: '上',
-  //       value: 'end'
-  //     },
-  //     {
-  //       label: '中',
-  //       value: 'center'
-  //     },
-  //     {
-  //       label: '下',
-  //       value: 'start'
-  //     }],
-  //   groupName: 'yAxis'
-  // },
-  // {
-  //   label: '标题字体大小',
-  //   type: 'inputNumber',
-  //   field: 'yAxis_title_style_fontSize',
-  //   optionField: 'yAxis.title.style.fontSize',
-  //   value: 12,
-  //   tabName: 'custom',
-  //   groupName: 'yAxis'
-  // },
-  // {
-  //   label: '标题颜色',
-  //   type: 'colorPicker',
-  //   field: 'yAxis_title_style_fill',
-  //   optionField: 'yAxis.title.style.fill',
-  //   // 是否多选
-  //   multiple: false,
-  //   value: '#8C8C8C',
-  //   tabName: 'custom',
-  //   groupName: 'yAxis'
-  // },
-  // {
-  //   label: '显示标签',
-  //   type: 'switch',
-  //   field: 'yAxis_label_style_opacity',
-  //   optionField: 'yAxis.label.style.opacity',
-  //   value: 1,
-  //   active: 1,
-  //   inactive: 0,
-  //   tabName: 'custom',
-  //   groupName: 'yAxis'
-  // },
-  // {
-  //   label: '标签字体大小',
-  //   type: 'inputNumber',
-  //   field: 'yAxis_label_style_fontSize',
-  //   optionField: 'yAxis.label.style.fontSize',
-  //   value: 12,
-  //   tabName: 'custom',
-  //   groupName: 'yAxis'
-  // },
-  // {
-  //   label: '标签字体颜色',
-  //   type: 'colorPicker',
-  //   field: 'yAxis_label_style_fill',
-  //   optionField: 'yAxis.label.style.fill',
-  //   // 是否多选
-  //   multiple: false,
-  //   value: '#8C8C8C',
-  //   tabName: 'custom',
-  //   groupName: 'yAxis'
-  // },
-  // {
-  //   label: '轴线宽度',
-  //   type: 'inputNumber',
-  //   field: 'yAxis_line_lineWidth',
-  //   optionField: 'yAxis.line.style.lineWidth',
-  //   value: 0,
-  //   tabName: 'custom',
-  //   groupName: 'yAxis'
-  // },
-  // {
-  //   label: '轴线颜色',
-  //   type: 'colorPicker',
-  //   field: 'yAxis_line_stroke',
-  //   optionField: 'yAxis.line.style.stroke',
-  //   // 是否多选
-  //   multiple: false,
-  //   value: '#d0d0d0',
-  //   tabName: 'custom',
-  //   groupName: 'yAxis'
-  // },
-
-]
-
-// 配置处理脚本
-const optionHandler = 'option.legend = option.legendEnable ? {position: setting.find(settingItem=>settingItem.field === \'legendPosition\').value} : false;' +
-  '  if (option.legendEnable) {\n' +
-  '    option.legend.itemName = option.legendItemName\n' +
-  '  };'
-  // 'option.yAxis.grid.line.style.lineDash = [4,setting.find(settingItem=>settingItem.field === \'yAxis_grid_line_style_lineDash\').value]'
-
-// 数据处理脚本
-const dataHandler = 'data = [data,data]'
-
-// 模拟数据
-const data = [
-  { time: '2019-03', value: 350, count: 800 },
-  { time: '2019-04', value: 900, count: 600 },
-  { time: '2019-05', value: 300, count: 400 },
-  { time: '2019-06', value: 450, count: 380 },
-  { time: '2019-07', value: 470, count: 220 },
-]
-
-
-// 图表配置 new Line('domName', option)
-const option = {
-  // 数据将要放入到哪个字段中
-  dataKey: 'data',
-  data:[data,data],
-  xField: 'time',
-  yField: ['value', 'count'],
-  geometryOptions: [
-    {
-      geometry: 'column',
-    },
-    {
-      geometry: 'line',
-      lineStyle: {
-        lineWidth: 2,
-      },
-    },
-  ],
-  isStack: true,
-  // seriesField: 'type',
-  legendEnable: false,
-  legendItemName: {
-    style: {
-      fill: '#595959',
-      fontSize: 12,
-      fontWeight: 400
-    }
-  },
-  legendLayout: 'vertical',
-  legendPosition: 'top',
-  legend: false,
-  pattern: {
-    type: ''
-  },
-  // color: ['#6b74e4', '#4391f4', '#38bbe5', '#69d6fd', '#36c6a0'],
-  label: {
-    // 可手动配置 label 数据标签位置
-    position: 'middle', // 'top', 'bottom', 'middle'
-    // 配置样式
-    style: {
-      fill: '#59F25F',
-      opacity: 0,
-      fontSize: 12
-    },
-  },
-  xAxis: {
-    title: {
-      text: '',
-      position: 'end',
-      style: {
-        fill: '#8C8C8C',
-        fontSize: 12
-      }
-    },
-    label: {
-      autoRotate: false,
-      autoHide: true,
-      autoEllipsis: true,
-      style: {
-        fill: '#8C8C8C',
-        fontSize: 12
-      }
-    },
-    line: {
-      style: {
-        stroke: '#d0d0d0',
-        lineWidth: 1
-      }
-    },
-    tickLine: {
-      style: {
-        stroke: '#d0d0d0',
-        lineWidth: 1
-      }
-    }
-  },
-  yAxis: {
-    title: {
-      text: '',
-      position: 'end',
-      autoRotate: false,
-      // rotation: Math.PI / 2,
-      style: {
-        fill: '#8C8C8C',
-        fontSize: 12
-      }
-    },
-    grid: {
-      line: {
-        style: {
-          stroke: '#d0d0d0',
-          lineWidth: 1,
-          lineDash: [4, 5],
-          strokeOpacity: 0.7
-        }
-      }
-    },
-    label: {
-      formatter: (v) => {
-        if (v < 1e3) return v
-        // 数值格式化为千分位
-        if (v >= 1e3 && v < 1e6) return `${v}`.replace(/\d{1,3}(?=(\d{3})+$)/g, (s) => `${s},`)
-        if (v >= 1e6 && v < 1e9) return `${(v / 1e6).toFixed(1)} M`
-        if (v >= 1e9 && v < 1e12) return `${(v / 1e9).toFixed(1)} B`
-        return `${(v / 10e8).toFixed(1)} B`
-      },
-      style: {
-        fill: '#8C8C8C',
-        fontSize: 12,
-        opacity: 1
-      }
-    },
-    line: {
-      style: {
-        stroke: '#d0d0d0',
-        lineWidth: 0
-      }
-    }
-  }
-}
-export default {
-  category,
-  version,
-  title,
-  chartType,
-  name,
-  option,
-  setting,
-  optionHandler,
-  dataHandler
-}

data-room-ui/packages/js/utils/compressImg.js

@@ -19,7 +19,7 @@ export function showSize (base64url) {
     // 判断后两位是否为00，如果是则删除00
     return sizeStr.substring(0, index) + sizeStr.substr(index + 3, 2)
   }
-  return size
+  return Number(size)
 }
 
 export function dataURLtoFile (dataurl, filename) {
@@ -58,3 +58,43 @@ export function translateBlobToBase64 (blob, callback) {
   reader.readAsDataURL(blob)
   // 读取后，result属性中将包含一个data:URL格式的Base64字符串用来表示所读取的文件
 }
+
+// 压缩方法
+export function compressImage (base64, { width: w = 1280, height: h = 720, size = 200, quality = 1 }) {
+  return new Promise((resolve, reject) => {
+    const newImage = new Image()
+    newImage.src = base64
+    newImage.setAttribute('crossOrigin', 'Anonymous')
+    let imgWidth, imgHeight
+    newImage.onload = function () {
+      imgWidth = 1280
+      imgHeight = 720
+      const canvas = document.createElement('canvas')
+      const ctx = canvas.getContext('2d')
+      if (Math.max(imgWidth, imgHeight) > w) {
+        if (imgWidth > imgHeight) {
+          canvas.width = w
+          canvas.height = w * imgHeight / imgWidth
+        } else {
+          canvas.height = w
+          canvas.width = w * imgWidth / imgHeight
+        }
+      } else {
+        canvas.width = imgWidth
+        canvas.height = imgHeight
+        quality = 1
+      }
+
+      ctx.clearRect(0, 0, canvas.width, canvas.height)
+      ctx.drawImage(this, 0, 0, canvas.width, canvas.height)
+      let compressedBase64 = canvas.toDataURL('image/jpeg', quality) // 压缩语句
+      if (showSize(compressedBase64) > Number(size)) {
+        compressedBase64 = canvas.toDataURL('image/jpeg', quality - 0.2 > 0.4 ? quality - 0.2 : 0.4)
+      }
+      resolve(compressedBase64)
+    }
+    newImage.onerror = function () {
+      reject(new Error('Failed to load image'))
+    }
+  })
+}