Merge branch 'master' of github.com:gcpaas/DataRoom

data-room-ui/package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "@gcpaas/data-room-ui",
-  "version": "1.0.1-2023083002-Alpha",
+  "version": "1.0.1-2023091801-Alpha",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
@@ -3397,6 +3397,27 @@
         "whatwg-fetch": "^3.6.2"
       },
       "dependencies": {
+        "@vue/vue-loader-v15": {
+          "version": "npm:vue-loader@15.10.2",
+          "resolved": "https://registry.npmmirror.com/vue-loader/-/vue-loader-15.10.2.tgz",
+          "integrity": "sha512-ndeSe/8KQc/nlA7TJ+OBhv2qalmj1s+uBs7yHDRFaAXscFTApBzY9F1jES3bautmgWjDlDct0fw8rPuySDLwxw==",
+          "dev": true,
+          "requires": {
+            "@vue/component-compiler-utils": "^3.1.0",
+            "hash-sum": "^1.0.2",
+            "loader-utils": "^1.1.0",
+            "vue-hot-reload-api": "^2.3.0",
+            "vue-style-loader": "^4.1.0"
+          },
+          "dependencies": {
+            "hash-sum": {
+              "version": "1.0.2",
+              "resolved": "https://registry.npmmirror.com/hash-sum/-/hash-sum-1.0.2.tgz",
+              "integrity": "sha512-fUs4B4L+mlt8/XAtSOGMUO1TXmAelItBPtJG7CyHJfYTdDjwisntGO2JQz7oUsatOY9o68+57eziUVNw/mRHmA==",
+              "dev": true
+            }
+          }
+        },
         "acorn-walk": {
           "version": "8.2.0",
           "resolved": "https://registry.npmjs.org/acorn-walk/-/acorn-walk-8.2.0.tgz",
@@ -3468,6 +3489,26 @@
             "tapable": "^2.0.0"
           }
         },
+        "json5": {
+          "version": "1.0.2",
+          "resolved": "https://registry.npmmirror.com/json5/-/json5-1.0.2.tgz",
+          "integrity": "sha512-g1MWMLBiz8FKi1e4w0UyVL3w+iJceWAFBAaBnnGKOpNa5f8TLktkbre1+s6oICydWAm+HRUGTmI+//xv2hvXYA==",
+          "dev": true,
+          "requires": {
+            "minimist": "^1.2.0"
+          }
+        },
+        "loader-utils": {
+          "version": "1.4.2",
+          "resolved": "https://registry.npmmirror.com/loader-utils/-/loader-utils-1.4.2.tgz",
+          "integrity": "sha512-I5d00Pd/jwMD2QCduo657+YM/6L3KZu++pmX9VFncxaxvHcru9jx1lBaFft+r4Mt2jK0Yhp41XlRAihzPxHNCg==",
+          "dev": true,
+          "requires": {
+            "big.js": "^5.2.2",
+            "emojis-list": "^3.0.0",
+            "json5": "^1.0.1"
+          }
+        },
         "ms": {
           "version": "2.1.2",
           "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
@@ -3685,47 +3726,6 @@
         "lodash": "^4.17.4"
       }
     },
-    "@vue/vue-loader-v15": {
-      "version": "npm:vue-loader@15.10.2",
-      "resolved": "https://registry.npmjs.org/vue-loader/-/vue-loader-15.10.2.tgz",
-      "integrity": "sha512-ndeSe/8KQc/nlA7TJ+OBhv2qalmj1s+uBs7yHDRFaAXscFTApBzY9F1jES3bautmgWjDlDct0fw8rPuySDLwxw==",
-      "dev": true,
-      "requires": {
-        "@vue/component-compiler-utils": "^3.1.0",
-        "hash-sum": "^1.0.2",
-        "loader-utils": "^1.1.0",
-        "vue-hot-reload-api": "^2.3.0",
-        "vue-style-loader": "^4.1.0"
-      },
-      "dependencies": {
-        "hash-sum": {
-          "version": "1.0.2",
-          "resolved": "https://registry.npmjs.org/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",
-          "integrity": "sha512-g1MWMLBiz8FKi1e4w0UyVL3w+iJceWAFBAaBnnGKOpNa5f8TLktkbre1+s6oICydWAm+HRUGTmI+//xv2hvXYA==",
-          "dev": true,
-          "requires": {
-            "minimist": "^1.2.0"
-          }
-        },
-        "loader-utils": {
-          "version": "1.4.2",
-          "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-1.4.2.tgz",
-          "integrity": "sha512-I5d00Pd/jwMD2QCduo657+YM/6L3KZu++pmX9VFncxaxvHcru9jx1lBaFft+r4Mt2jK0Yhp41XlRAihzPxHNCg==",
-          "dev": true,
-          "requires": {
-            "big.js": "^5.2.2",
-            "emojis-list": "^3.0.0",
-            "json5": "^1.0.1"
-          }
-        }
-      }
-    },
     "@vue/vue2-jest": {
       "version": "27.0.0",
       "resolved": "https://registry.npmjs.org/@vue/vue2-jest/-/vue2-jest-27.0.0.tgz",

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

@@ -146,6 +146,7 @@ export default {
       selectDropdownIcon.style.fontSize = config.customize.fontSize + 'px'
       // 选择器下拉框元素
       const selectDropdownEl = document.querySelector(`.select-${config.code} .el-select-dropdown`)
+      console.log('selectDropdownEl', selectDropdownEl)
       // 箭头背景颜色和下拉框背景颜色一致
       if (selectDropdownEl) {
         // 下拉框无边框
@@ -169,12 +170,9 @@ export default {
           selectDropdownEmptyEl.style.backgroundColor = this.innerConfig.customize.dropDownBackgroundColor
         }
         // 下拉项hover颜色
-        const selectDropdownItemEl = document.querySelectorAll(`.select-popper-${this.innerConfig.code} .el-select-dropdown__item`)
-        // 给--dropDownHoverFontColor 和 --dropDownHoverBackgroundColor 赋值
-        selectDropdownItemEl.forEach(item => {
-          item.style.setProperty('--dropDownHoverFontColor', this.innerConfig.customize.dropDownHoverFontColor)
-          item.style.setProperty('--dropDownHoverBackgroundColor', this.innerConfig.customize.dropDownHoverBackgroundColor)
-        })
+        const selectDropdownWrap = document.querySelector(`.select-popper-${this.innerConfig.code} .el-select-dropdown__wrap`)
+        selectDropdownWrap.style.setProperty('--dropDownHoverFontColor', this.innerConfig.customize.dropDownHoverFontColor)
+        selectDropdownWrap.style.setProperty('--dropDownHoverBackgroundColor', this.innerConfig.customize.dropDownHoverBackgroundColor)
       }
       // 不是激活项的还是使用背景颜色
       const selectDropdownItemEl = document.querySelectorAll(`.select-popper-${this.innerConfig.code} .el-select-dropdown__item`)

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

@@ -104,7 +104,10 @@
               />
             </el-select>
           </el-form-item>
-          <el-form-item label="不透明度">
+          <el-form-item
+            v-if="config.customize.colorType === 'gradient'"
+            label="不透明度"
+          >
             <el-input-number
               v-model="config.customize.opacity"
               class="bs-el-input-number"

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

@@ -26,17 +26,31 @@
         <div class="left-vue-code component-code">
           <div class="code-tab-header">
             <div class="code-tab-left">
-              <div class="code-tab">组件模板</div>
-              <div class="code-tab-btn" @click="change('echart')">
+              <div class="code-tab">
+                组件模板
+              </div>
+              <div
+                class="code-tab-btn"
+                @click="change('echart')"
+              >
                 echarts组件
               </div>
-              <div class="code-tab-btn" @click="change('g2plot')">
+              <div
+                class="code-tab-btn"
+                @click="change('g2plot')"
+              >
                 G2Plot组件
               </div>
-              <div class="code-tab-btn" @click="change('native')">
+              <div
+                class="code-tab-btn"
+                @click="change('native')"
+              >
                 原生组件
               </div>
-              <div class="code-tab-btn" @click="change('3DEchart')">
+              <div
+                class="code-tab-btn"
+                @click="change('3DEchart')"
+              >
                 3D组件
               </div>
             </div>
@@ -223,7 +237,7 @@ export default {
       const type = this.$route.query.type
       if (code) {
         getBizComponentInfo(code).then(data => {
-         if(type&&type==='g2plot'){
+          if (type && type === 'g2plot') {
             this.form = {
               ...data,
               name: data.name,
@@ -231,7 +245,7 @@ export default {
               settingContent: data.settingContent || defaultG2SettingContent,
               vueContent: data.vueContent || defaultG2VueContent
             }
-          }else if(type&&type==='echart'){
+          } else if (type && type === 'echart') {
             this.form = {
               ...data,
               name: data.name,
@@ -239,7 +253,7 @@ export default {
               settingContent: data.settingContent || defaultEchartsSettingContent,
               vueContent: data.vueContent || defaultEchartsVueContent
             }
-          }else{
+          } else {
             this.form = {
               ...data,
               name: data.name,
@@ -254,29 +268,31 @@ export default {
         })
       }
     },
-    changeTemp(val){
-      if(val=='g2plot'){
-        this.form.settingContent=defaultG2SettingContent
-        this.form.vueContent=defaultG2VueContent
-      }else if(val=='native'){
-        this.form.settingContent=defaultSettingContent
-        this.form.vueContent=defaultVueContent
-      }else if(val=='echart'){
-        this.form.settingContent= defaultEchartsSettingContent
-        this.form.vueContent=defaultEchartsVueContent
+    changeTemp (val) {
+      if (val == 'g2plot') {
+        this.form.settingContent = defaultG2SettingContent
+        this.form.vueContent = defaultG2VueContent
+      } else if (val == 'native') {
+        this.form.settingContent = defaultSettingContent
+        this.form.vueContent = defaultVueContent
+      } else if (val == 'echart') {
+        this.form.settingContent = defaultEchartsSettingContent
+        this.form.vueContent = defaultEchartsVueContent
       }
     },
-    change(val) {
-      if(val==='3DEchart') return this.$confirm('开发中。。。。', '提示', {
-        distinguishCancelAndClose: true,
-        confirmButtonText: '确定',
-        cancelButtonText: '取消',
-        cancelButtonClass: 'cancel-btn',
-        type: 'warning',
-        customClass: 'bs-el-message-box'
-      }).then(() => {
-      }).catch((action) => {
-      })
+    change (val) {
+      if (val === '3DEchart') {
+        return this.$confirm('开发中。。。。', '提示', {
+          distinguishCancelAndClose: true,
+          confirmButtonText: '确定',
+          cancelButtonText: '取消',
+          cancelButtonClass: 'cancel-btn',
+          type: 'warning',
+          customClass: 'bs-el-message-box'
+        }).then(() => {
+        }).catch((action) => {
+        })
+      }
       this.$confirm('确定替换为选中模板吗？未保存的代码将被覆盖！', '提示', {
         distinguishCancelAndClose: true,
         confirmButtonText: '确定',

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

@@ -12,7 +12,6 @@
   </div>
 </template>
 <script>
-import { refreshComponentMixin } from 'data-room-ui/js/mixins/refreshComponent'
 import { dataVMixins } from 'data-room-ui/js/mixins/dataVMixins'
 import DvBorderBox1 from '@jiaminghi/data-view/lib/components/borderBox1/src/main.vue'
 import '@jiaminghi/data-view/lib/components/borderBox1/src/main.css'
@@ -21,7 +20,7 @@ export default {
   components: {
     DvBorderBox1
   },
-  mixins: [refreshComponentMixin, dataVMixins],
+  mixins: [dataVMixins],
   watch: {},
   mounted () {},
   methods: {}

data-room-ui/packages/Borders/Border10/index.vue

@@ -12,7 +12,6 @@
   </div>
 </template>
 <script>
-import { refreshComponentMixin } from 'data-room-ui/js/mixins/refreshComponent'
 import { dataVMixins } from 'data-room-ui/js/mixins/dataVMixins'
 import DvBorderBox10 from '@jiaminghi/data-view/lib/components/borderBox10/src/main.vue'
 import '@jiaminghi/data-view/lib/components/borderBox10/src/main.css'
@@ -22,7 +21,7 @@ export default {
   components: {
     DvBorderBox10
   },
-  mixins: [refreshComponentMixin, dataVMixins],
+  mixins: [dataVMixins],
   computed: {},
   watch: {},
   mounted () {},

data-room-ui/packages/Borders/Border11/index.vue

@@ -14,7 +14,6 @@
   </div>
 </template>
 <script>
-import { refreshComponentMixin } from 'data-room-ui/js/mixins/refreshComponent'
 import { dataVMixins } from 'data-room-ui/js/mixins/dataVMixins'
 import DvBorderBox11 from '@jiaminghi/data-view/lib/components/borderBox11/src/main.vue'
 import '@jiaminghi/data-view/lib/components/borderBox11/src/main.css'
@@ -23,7 +22,7 @@ export default {
   components: {
     DvBorderBox11
   },
-  mixins: [refreshComponentMixin, dataVMixins],
+  mixins: [dataVMixins],
   computed: {
     title () {
       return this.config.customize.title

data-room-ui/packages/Borders/Border12/index.vue

@@ -12,7 +12,6 @@
   </div>
 </template>
 <script>
-import { refreshComponentMixin } from 'data-room-ui/js/mixins/refreshComponent'
 import { dataVMixins } from 'data-room-ui/js/mixins/dataVMixins'
 import DvBorderBox12 from '@jiaminghi/data-view/lib/components/borderBox12/src/main.vue'
 import '@jiaminghi/data-view/lib/components/borderBox12/src/main.css'
@@ -21,7 +20,7 @@ export default {
   components: {
     DvBorderBox12
   },
-  mixins: [refreshComponentMixin, dataVMixins],
+  mixins: [dataVMixins],
   computed: {
     color () {
       return this.config.customize.borderMainColor ||

data-room-ui/packages/Borders/Border13/index.vue

@@ -12,7 +12,6 @@
   </div>
 </template>
 <script>
-import { refreshComponentMixin } from 'data-room-ui/js/mixins/refreshComponent'
 import { dataVMixins } from 'data-room-ui/js/mixins/dataVMixins'
 import DvBorderBox13 from '@jiaminghi/data-view/lib/components/borderBox13/src/main.vue'
 import '@jiaminghi/data-view/lib/components/borderBox13/src/main.css'
@@ -22,7 +21,7 @@ export default {
   components: {
     DvBorderBox13
   },
-  mixins: [refreshComponentMixin, dataVMixins],
+  mixins: [dataVMixins],
   computed: {},
   watch: {},
   mounted () {},

data-room-ui/packages/Borders/Border2/index.vue

@@ -13,7 +13,6 @@
   </div>
 </template>
 <script>
-import { refreshComponentMixin } from 'data-room-ui/js/mixins/refreshComponent'
 import { dataVMixins } from 'data-room-ui/js/mixins/dataVMixins'
 import DvBorderBox2 from '@jiaminghi/data-view/lib/components/borderBox2/src/main.vue'
 import '@jiaminghi/data-view/lib/components/borderBox2/src/main.css'
@@ -22,7 +21,7 @@ export default {
   components: {
     DvBorderBox2
   },
-  mixins: [refreshComponentMixin, dataVMixins],
+  mixins: [dataVMixins],
   computed: {},
   watch: {},
   mounted () {},

data-room-ui/packages/Borders/Border3/index.vue

@@ -12,7 +12,6 @@
   </div>
 </template>
 <script>
-import { refreshComponentMixin } from 'data-room-ui/js/mixins/refreshComponent'
 import { dataVMixins } from 'data-room-ui/js/mixins/dataVMixins'
 import DvBorderBox3 from '@jiaminghi/data-view/lib/components/borderBox3/src/main.vue'
 import '@jiaminghi/data-view/lib/components/borderBox3/src/main.css'
@@ -21,7 +20,7 @@ export default {
   components: {
     DvBorderBox3
   },
-  mixins: [refreshComponentMixin, dataVMixins],
+  mixins: [dataVMixins],
   computed: {},
   watch: {},
   mounted () {},

data-room-ui/packages/Borders/Border4/index.vue

@@ -13,7 +13,6 @@
   </div>
 </template>
 <script>
-import { refreshComponentMixin } from 'data-room-ui/js/mixins/refreshComponent'
 import { dataVMixins } from 'data-room-ui/js/mixins/dataVMixins'
 import DvBorderBox4 from '@jiaminghi/data-view/lib/components/borderBox4/src/main.vue'
 import '@jiaminghi/data-view/lib/components/borderBox4/src/main.css'
@@ -22,7 +21,7 @@ export default {
   components: {
     DvBorderBox4
   },
-  mixins: [refreshComponentMixin, dataVMixins],
+  mixins: [dataVMixins],
   computed: {
     reverse () {
       return this.config.customize.reverse

data-room-ui/packages/Borders/Border5/index.vue

@@ -13,7 +13,6 @@
   </div>
 </template>
 <script>
-import { refreshComponentMixin } from 'data-room-ui/js/mixins/refreshComponent'
 import { dataVMixins } from 'data-room-ui/js/mixins/dataVMixins'
 import DvBorderBox5 from '@jiaminghi/data-view/lib/components/borderBox5/src/main.vue'
 import '@jiaminghi/data-view/lib/components/borderBox5/src/main.css'
@@ -22,7 +21,7 @@ export default {
   components: {
     DvBorderBox5
   },
-  mixins: [refreshComponentMixin, dataVMixins],
+  mixins: [dataVMixins],
   computed: {
     reverse () {
       return this.config.customize.reverse

data-room-ui/packages/Borders/Border6/index.vue

@@ -12,7 +12,6 @@
   </div>
 </template>
 <script>
-import { refreshComponentMixin } from 'data-room-ui/js/mixins/refreshComponent'
 import { dataVMixins } from 'data-room-ui/js/mixins/dataVMixins'
 import DvBorderBox6 from '@jiaminghi/data-view/lib/components/borderBox6/src/main.vue'
 import '@jiaminghi/data-view/lib/components/borderBox6/src/main.css'
@@ -21,7 +20,7 @@ export default {
   components: {
     DvBorderBox6
   },
-  mixins: [refreshComponentMixin, dataVMixins],
+  mixins: [dataVMixins],
   computed: {
     color () {
       return this.config.customize.borderMainColor ||

data-room-ui/packages/Borders/Border7/index.vue

@@ -12,7 +12,6 @@
   </div>
 </template>
 <script>
-import { refreshComponentMixin } from 'data-room-ui/js/mixins/refreshComponent'
 import { dataVMixins } from 'data-room-ui/js/mixins/dataVMixins'
 import DvBorderBox7 from '@jiaminghi/data-view/lib/components/borderBox7/src/main.vue'
 import '@jiaminghi/data-view/lib/components/borderBox7/src/main.css'
@@ -21,11 +20,11 @@ export default {
   components: {
     DvBorderBox7
   },
-  mixins: [refreshComponentMixin, dataVMixins],
+  mixins: [dataVMixins],
   computed: {},
   watch: {},
-  mounted () {},
-  methods: {}
+  mounted () { },
+  methods: { }
 }
 </script>
 

data-room-ui/packages/Borders/Border8/index.vue

@@ -15,13 +15,12 @@
 </template>
 <script>
 import Vue from 'vue'
-import { refreshComponentMixin } from 'data-room-ui/js/mixins/refreshComponent'
 import { dataVMixins } from 'data-room-ui/js/mixins/dataVMixins'
 import { borderBox8 } from '@jiaminghi/data-view'
 Vue.use(borderBox8)
 export default {
   name: 'Border8',
-  mixins: [refreshComponentMixin, dataVMixins],
+  mixins: [dataVMixins],
   computed: {
     dur () {
       return this.config.customize.dur

data-room-ui/packages/Borders/Border9/index.vue

@@ -12,7 +12,6 @@
   </div>
 </template>
 <script>
-import { refreshComponentMixin } from 'data-room-ui/js/mixins/refreshComponent'
 import { dataVMixins } from 'data-room-ui/js/mixins/dataVMixins'
 import DvBorderBox9 from '@jiaminghi/data-view/lib/components/borderBox9/src/main.vue'
 import '@jiaminghi/data-view/lib/components/borderBox9/src/main.css'
@@ -22,7 +21,7 @@ export default {
   components: {
     DvBorderBox9
   },
-  mixins: [refreshComponentMixin, dataVMixins],
+  mixins: [dataVMixins],
   computed: {},
   watch: {},
   mounted () {},

data-room-ui/packages/Echarts/3D图/3D固定柱状图.js

@@ -1,8 +1,3 @@
-/*
- * @description: 配置，参考https://g2plot.antv.antgroup.com/examples
- * @Date: 2023-03-27 14:38:23
- * @Author: xing.heng
- */
 import * as echarts from 'echarts'
 // 配置版本号
 const version = '2023071001'

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

@@ -11,7 +11,6 @@
       :id="chatId"
       style="width: 100%;height: 100%"
     />
-    <!--    <span style="color:#ffffff">{{config.option.data}}</span>-->
   </div>
 </template>
 <script>
@@ -81,7 +80,7 @@ export default {
   },
   beforeDestroy () {
     if (this.chart) {
-      this.chart.destroy()
+      this.chart.dispose()
     }
   },
   methods: {
@@ -212,7 +211,7 @@ export default {
       const { xData, yData } = this.getxDataAndYData(xField, yField, data, hasSeries)
       // const xData = [...new Set(data.map(item => item[xField]))]
       // const yData = data.map(item => item[yField])
-      const maxY = Math.max(...yData)
+      const maxY = Math.max(...yData) + Math.max(...yData) * 0.2
       // 生成阴影柱子的值
       const shadowData = Array.from({ length: xData.length }, () => maxY)
       option.xAxis = option.xAxis.map(item => {
@@ -226,6 +225,28 @@ export default {
         const seriesField = config.setting.find(item => item.optionField === 'seriesField')?.value
         const seriesFieldList = [...new Set(data.map(item => item[seriesField]))]
         option.series = []
+        const offsetArr = []
+        let index = 0
+        let barWidth = 10
+        if (seriesFieldList.length % 2 === 0) {
+          const length = seriesFieldList.length / 2
+          for (let i = 0; i < length; i++) {
+            const offsetX = (parseInt('10%') + parseInt('50%')) * (2 * i + 1)
+            offsetArr.push(offsetX)
+            offsetArr.unshift(-offsetX)
+          }
+        } else {
+          const length = Math.ceil(seriesFieldList.length / 2)
+          for (let i = 0; i < length; i++) {
+            if (i === 0) {
+              offsetArr.push(0)
+            } else {
+              const offsetX = (parseInt('20%') + parseInt('100%')) * i
+              offsetArr.push(offsetX)
+              offsetArr.unshift(-offsetX)
+            }
+          }
+        }
         for (const seriesFieldItem of seriesFieldList) {
           const seriesData = (data.filter(item => item[seriesField] === seriesFieldItem))?.map(item => item[yField])
           const seriesItem = [
@@ -234,8 +255,8 @@ export default {
               type: 'pictorialBar',
               tooltip: { show: false },
               symbol: 'diamond',
-              symbolSize: [30, 10],
-              symbolOffset: ['-60%', -5],
+              symbolSize: [barWidth, barWidth / 2],
+              symbolOffset: [offsetArr[index] + '%', -barWidth / 4],
               symbolPosition: 'end',
               z: 15,
               zlevel: 2,
@@ -246,7 +267,7 @@ export default {
               name: seriesFieldItem,
               type: 'bar',
               barGap: '20%',
-              barWidth: 30,
+              barWidth: barWidth,
               itemStyle: {
                 normal: {
                   color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
@@ -277,8 +298,8 @@ export default {
               type: 'pictorialBar',
               tooltip: { show: false },
               symbol: 'diamond',
-              symbolSize: [30, 10],
-              symbolOffset: ['-60%', 5],
+              symbolSize: [barWidth, barWidth / 2],
+              symbolOffset: [offsetArr[index] + '%', barWidth / 4],
               zlevel: 2,
               z: 15,
               color: 'rgb(2, 192, 255)',
@@ -292,7 +313,7 @@ export default {
               barGap: '20%',
               data: shadowData,
               zlevel: 1,
-              barWidth: 30,
+              barWidth: barWidth,
               itemStyle: {
                 normal: {
                   color: 'rgba(9, 44, 76,.8)'
@@ -304,8 +325,8 @@ export default {
               type: 'pictorialBar',
               tooltip: { show: false },
               symbol: 'diamond',
-              symbolSize: [30, 10],
-              symbolOffset: ['-60%', -5],
+              symbolSize: [barWidth, barWidth / 2],
+              symbolOffset: [offsetArr[index] + '%', -barWidth / 4],
               symbolPosition: 'end',
               z: 15,
               color: 'rgb(15, 69, 133)',
@@ -313,6 +334,7 @@ export default {
               data: shadowData
             }
           ]
+          index++
           option.series.push(...seriesItem)
         }
       } else {

data-room-ui/packages/G2Plots/plotListSort.js

@@ -33,6 +33,7 @@ export default [
   '进度条',
   '圆角进度条',
   '进度环图',
+  '进度指标环图',
 
   '词云图',
   '基础矩形树图',

data-room-ui/packages/G2Plots/进度图/圆角进度条.js

@@ -35,7 +35,7 @@ const setting = [
     field: 'frontColor',
     // 对应options中的字段
     optionField: 'frontColor',
-    value: 'l(0) 0:#5F92F9  1:#5F92F9',
+    value: 'l(0) 0:#6B74E3 1:#38BBE5',
     tabName: 'custom',
     groupName: 'graph'
   },
@@ -89,8 +89,8 @@ const option = {
   percent: 0.8,
   barWidthRatio: 0.3,
   backColor: 'rgba(255, 255, 255, 0)',
-  frontColor: '#4a7af4',
-  color: ['#4a7af4', 'rgba(255, 255, 255, 0)'],
+  frontColor: 'l(0) 0:#6B74E3 1:#38BBE5',
+  color: ['l(0) 0:#6B74E3 1:#38BBE5', 'rgba(255, 255, 255, 0)'],
   progressStyle: {
     r: 10,
     // fill: 'red',

data-room-ui/packages/G2Plots/进度图/进度仪表盘.js

@@ -72,7 +72,7 @@ const setting = [
     // 对应options中的字段
     optionField: 'statistic.title.offsetY',
     value: -36,
-    min:-100,
+    min: -100,
     tabName: 'custom',
     groupName: 'graph'
   },
@@ -111,7 +111,7 @@ const setting = [
     value: 20,
     tabName: 'custom',
     groupName: 'graph'
-  },
+  }
   // 边距 padding
 ]
 const data = [

data-room-ui/packages/G2Plots/进度图/进度指标环图.js

@@ -0,0 +1,187 @@
+// 配置版本号
+const version = '2023071001'
+// 分类
+const category = 'RingProgress'
+// 标题
+const title = '进度指标环图'
+// 类别， new Gauge()
+const chartType = 'RingProgress'
+// 用于标识，唯一，和文件夹名称一致
+const name = 'JinDuZhiBiaoHuanTu'
+
+// 右侧配置项
+const setting = [
+  {
+    label: '指标',
+    // 设置组件类型
+    type: 'select',
+    // 字段
+    field: 'percent',
+    // 对应options中的字段
+    optionField: 'percent',
+    // 是否多选
+    multiple: false,
+    value: '',
+    tabName: 'data'
+  },
+  /** 样式配置 **/
+  // 图表 graph
+  {
+    label: '进度条背景色',
+    // 设置组件类型
+    type: 'colorPicker',
+    // 字段
+    field: 'color2',
+    // 对应options中的字段
+    optionField: 'color2',
+    value: 'rgba(238, 238, 238, 1)',
+    tabName: 'custom',
+    groupName: 'graph'
+  },
+  {
+    label: '进度条颜色',
+    // 设置组件类型
+    type: 'gradual',
+    // 字段
+    field: 'color1',
+    // 对应options中的字段
+    optionField: 'color1',
+    value: 'l(0) 0:#6B74E3 1:#38BBE5',
+    tabName: 'custom',
+    groupName: 'graph'
+  },
+  // {
+  //   label: '标签文本',
+  //   // 设置组件类型
+  //   type: 'input',
+  //   // 字段
+  //   field: 'statistic_title_content',
+  //   // 对应options中的字段
+  //   optionField: 'statistic.title.content',
+  //   value: '进度',
+  //   tabName: 'custom',
+  //   groupName: 'graph'
+  // },
+  // {
+  //   label: '标签字体颜色',
+  //   // 设置组件类型
+  //   type: 'colorPicker',
+  //   // 字段
+  //   field: 'statistic_title_style_fill',
+  //   // 对应options中的字段
+  //   optionField: 'statistic.title.style.fill',
+  //   value: 'rgba(133, 133, 133, 1)',
+  //   tabName: 'custom',
+  //   groupName: 'graph'
+  // },
+  // {
+  //   label: '标签字体大小',
+  //   // 设置组件类型
+  //   type: 'inputNumber',
+  //   // 字段
+  //   field: 'statistic_title_style_fontSize',
+  //   // 对应options中的字段
+  //   optionField: 'statistic.title.style.fontSize',
+  //   value: 20,
+  //   tabName: 'custom',
+  //   groupName: 'graph'
+  // },
+  // {
+  //   label: '标签位置',
+  //   // 设置组件类型
+  //   type: 'inputNumber',
+  //   // 字段
+  //   field: 'statistic_title_style_offsetY',
+  //   // 对应options中的字段
+  //   optionField: 'statistic.title.offsetY',
+  //   value: 0,
+  //   min: -100,
+  //   tabName: 'custom',
+  //   groupName: 'graph'
+  // },
+  {
+    label: '指标字体颜色',
+    // 设置组件类型
+    type: 'colorPicker',
+    // 字段
+    field: 'statistic_content_style_fill',
+    // 对应options中的字段
+    optionField: 'statistic.content.style.fill',
+    value: 'rgba(133, 133, 133, 1)',
+    tabName: 'custom',
+    groupName: 'graph'
+  },
+  {
+    label: '指标字体大小',
+    // 设置组件类型
+    type: 'inputNumber',
+    // 字段
+    field: 'statistic_content_style_fontSize',
+    // 对应options中的字段
+    optionField: 'statistic.content.style.fontSize',
+    value: 24,
+    tabName: 'custom',
+    groupName: 'graph'
+  },
+  {
+    label: '指标位置',
+    // 设置组件类型
+    type: 'inputNumber',
+    // 字段
+    field: 'statistic_content_style_offsetY',
+    // 对应options中的字段
+    optionField: 'statistic.content.offsetY',
+    value: 0,
+    min: -100,
+    tabName: 'custom',
+    groupName: 'graph'
+  }
+  // 边距 padding
+]
+
+// 配置处理脚本
+const optionHandler = 'option.color = [option.color1, option.color2]'
+const data = [
+  {
+    percent: 0.6
+  }
+]
+// 数据处理脚本
+const dataHandler =
+  "option.percent = data[0][setting.filter(settingItem=>settingItem.field === 'percent')[0].value]"
+
+// 图表配置 new Gauge('domName', option)
+const option = {
+  // 数据将要放入到哪个字段中
+  dataKey: 'percent',
+  data,
+  color1: 'l(0) 0:#6B74E3 1:#38BBE5',
+  color2: '#d0d0d0',
+  autoFit: true,
+  percent: 0.6,
+  color: ['l(0) 0:#6B74E3 1:#38BBE5', '#d0d0d0'],
+  innerRadius: 0.85,
+  radius: 0.98,
+  statistic: {
+    // title: {
+    //   style: { fill: '#fafafa', fontSize: 28, lineHeight: 2 },
+    //   content: '进度',
+    //   offsetY: 0
+    // },
+    content: {
+      style: { fill: '#fafafa', fontSize: 28, lineHeight: 2 },
+      offsetY: 0
+    }
+  }
+}
+export default {
+  category,
+  version,
+  title,
+  chartType,
+  name,
+  option,
+  setting,
+  optionHandler,
+  dataHandler
+}

data-room-ui/packages/G2Plots/进度图/进度条.js

@@ -42,12 +42,12 @@ const setting = [
   {
     label: '进度条颜色',
     // 设置组件类型
-    type: 'colorPicker',
+    type: 'gradual',
     // 字段
     field: 'frontColor',
     // 对应options中的字段
     optionField: 'frontColor',
-    value: '#4a7af4',
+    value: 'l(0) 0:#6B74E3 1:#38BBE5',
     tabName: 'custom',
     groupName: 'graph'
   },
@@ -87,8 +87,8 @@ const option = {
   percent: 0.8,
   barWidthRatio: 0.3,
   backColor: '#EEEEEE',
-  frontColor: '#4391F4',
-  color: ['#4a7af4', '#fff'],
+  frontColor: 'l(0) 0:#6B74E3 1:#38BBE5',
+  color: ['l(0) 0:#6B74E3 1:#38BBE5', '#fff'],
   progressStyle: {
     current: {
       style: {

data-room-ui/packages/G2Plots/进度图/进度环图.js

@@ -41,12 +41,12 @@ const setting = [
   {
     label: '进度条颜色',
     // 设置组件类型
-    type: 'colorPicker',
+    type: 'gradual',
     // 字段
     field: 'color1',
     // 对应options中的字段
     optionField: 'color1',
-    value: 'rgba(67, 145, 244, 1)',
+    value: 'l(0) 0:#6B74E3 1:#38BBE5',
     tabName: 'custom',
     groupName: 'graph'
   },
@@ -91,10 +91,11 @@ const setting = [
     // 设置组件类型
     type: 'inputNumber',
     // 字段
-    field: 'statistic_title_style_lineHeight',
+    field: 'statistic_title_style_offsetY',
     // 对应options中的字段
-    optionField: 'statistic.title.style.lineHeight',
-    value: 2,
+    optionField: 'statistic.title.offsetY',
+    value: 0,
+    min: -100,
     tabName: 'custom',
     groupName: 'graph'
   },
@@ -127,13 +128,14 @@ const setting = [
     // 设置组件类型
     type: 'inputNumber',
     // 字段
-    field: 'statistic_content_style_lineHeight',
+    field: 'statistic_content_style_offsetY',
     // 对应options中的字段
-    optionField: 'statistic.content.style.lineHeight',
-    value: 2,
+    optionField: 'statistic.content.offsetY',
+    value: 0,
+    min: -100,
     tabName: 'custom',
     groupName: 'graph'
-  },
+  }
   // 边距 padding
 ]
 
@@ -153,20 +155,22 @@ const option = {
   // 数据将要放入到哪个字段中
   dataKey: 'percent',
   data,
-  color1: '#F4664A',
+  color1: 'l(0) 0:#6B74E3 1:#38BBE5',
   color2: '#d0d0d0',
   autoFit: true,
   percent: 0.6,
-  color: ['#F4664A', '#d0d0d0'],
+  color: ['l(0) 0:#6B74E3 1:#38BBE5', '#d0d0d0'],
   innerRadius: 0.85,
   radius: 0.98,
   statistic: {
     title: {
       style: { fill: '#fafafa', fontSize: 28, lineHeight: 2 },
-      content: '进度'
+      content: '进度',
+      offsetY: 0
     },
     content: {
-      style: { fill: '#fafafa', fontSize: 28, lineHeight: 2 }
+      style: { fill: '#fafafa', fontSize: 28, lineHeight: 2 },
+      offsetY: 0
     }
   }
 }

data-room-ui/packages/js/mixins/dataVMixins.js

@@ -1,3 +1,6 @@
+import { mapMutations, mapState } from 'vuex'
+import { settingToTheme } from 'data-room-ui/js/utils/themeFormatting'
+import cloneDeep from 'lodash/cloneDeep'
 const dataVMixins = {
   props: {
     // 卡片的属性
@@ -8,10 +11,15 @@ const dataVMixins = {
   },
   data () {
     return {
-      borderBgId: `borderBg${this.config.code}`
+      updateKey: 0,
+      borderBgId: null
     }
   },
   computed: {
+    ...mapState({
+      customTheme: state => state.bigScreen.pageInfo.pageConfig.customTheme,
+      activeCode: state => state.bigScreen.activeCode
+    }),
     code () {
       return this.config.code
     },
@@ -31,64 +39,117 @@ const dataVMixins = {
     },
     colorType () {
       return this.config.customize.colorType
+    },
+    Data () {
+      return JSON.parse(JSON.stringify(this.config))
     }
   },
-  mounted () {
-    if (document.querySelector(`#dataV${this.config.code}`)) {
-      const borderElement = document.querySelector(`#dataV${this.config.code}`).querySelector('.border') || document.querySelector(`#dataV${this.config.code}`)?.querySelector('.dv-border-svg-container')
-      if (borderElement) {
-        let isBorder7 = false
-        borderElement.childNodes.forEach(e => {
-          if (e._prevClass === 'dv-bb7-line-width-2') {
-            isBorder7 = true
+  watch: {
+    config: {
+      handler: function (val) {
+        if (val && val.customize && val.customize.colorType) {
+          this.changeBorderStyle(this.config)
+          if (val.customize.colorType === 'single') {
+            this.borderBgId = null
+            this.$nextTick(() => {
+              this.updateKey = new Date().getTime()
+            })
+          } else {
+            this.borderBgId = `borderBg${this.config.code}`
+          }
+        }
+      },
+      deep: true
+    },
+    Data: {
+      handler (newVal, oldVal) {
+        this.$nextTick(() => {
+          if ((newVal.w !== oldVal.w) || (newVal.h !== oldVal.h)) {
+            this.$nextTick(() => {
+              this.updateKey = new Date().getTime()
+            })
           }
         })
-        borderElement.style.opacity = (this.config.customize.opacity / 100)
-        if (this.colorType === 'gradient') {
-          if (!isBorder7) {
-            let gradientDirection = ''
-            switch (this.config.customize.gradientDirection) {
-              case 'to right':
-                gradientDirection = 'x1="0%" y1="0%" x2="100%" y2="0%"'
-                break
-              case 'to left':
-                gradientDirection = 'x1="100%" y1="0%" x2="0%" y2="0%"'
-                break
-              case 'to bottom':
-                gradientDirection = 'x1="0%" y1="0%" x2="0%" y2="100%"'
-                break
-              case 'to top':
-                gradientDirection = 'x1="0%" y1="100%" x2="0%" y2="0%"'
-                break
-              case 'to bottom right':
-                gradientDirection = 'x1="0%" y1="0%" x2="100%" y2="100%"'
-                break
-              case 'to bottom left':
-                gradientDirection = 'x1="100%" y1="0%" x2="0%" y2="100%"'
-                break
-              case 'to top right':
-                gradientDirection = 'x1="0%" y1="100%" x2="100%" y2="0%"'
-                break
-              case 'to top left':
-                gradientDirection = 'x1="100%" y1="100%" x2="0%" y2="0%"'
-                break
-              default:
-                gradientDirection = 'x1="0%" y1="0%" x2="100%" y2="0%"'
-                break
+      },
+      deep: true
+    }
+  },
+  mounted () {
+    this.changeBorderStyle(this.config)
+  },
+  methods: {
+    ...mapMutations({
+      changeChartConfig: 'bigScreen/changeChartConfig',
+      changeActiveItemConfig: 'bigScreen/changeActiveItemConfig'
+    }),
+    changeStyle (config) {
+      config = { ...this.config, ...config }
+      // 样式改变时更新主题配置
+      config.theme = settingToTheme(cloneDeep(config), this.customTheme)
+      this.changeChartConfig(config)
+      if (config.code === this.activeCode) {
+        this.changeActiveItemConfig(config)
+      }
+      this.changeBorderStyle(config)
+    },
+    changeBorderStyle (config) {
+      this.borderBgId = `borderBg${config.code}`
+      if (document.querySelector(`#dataV${config.code}`)) {
+        const borderElement = document.querySelector(`#dataV${config.code}`).querySelector('.border') || document.querySelector(`#dataV${config.code}`)?.querySelector('.dv-border-svg-container')
+        if (borderElement) {
+          let isBorder7 = false
+          borderElement.childNodes.forEach(e => {
+            if (e._prevClass === 'dv-bb7-line-width-2') {
+              isBorder7 = true
+            }
+          })
+          borderElement.style.opacity = (config.customize.opacity / 100)
+          if (this.colorType === 'gradient') {
+            if (!isBorder7) {
+              let gradientDirection = ''
+              switch (config.customize.gradientDirection) {
+                case 'to right':
+                  gradientDirection = 'x1="0%" y1="0%" x2="100%" y2="0%"'
+                  break
+                case 'to left':
+                  gradientDirection = 'x1="100%" y1="0%" x2="0%" y2="0%"'
+                  break
+                case 'to bottom':
+                  gradientDirection = 'x1="0%" y1="0%" x2="0%" y2="100%"'
+                  break
+                case 'to top':
+                  gradientDirection = 'x1="0%" y1="100%" x2="0%" y2="0%"'
+                  break
+                case 'to bottom right':
+                  gradientDirection = 'x1="0%" y1="0%" x2="100%" y2="100%"'
+                  break
+                case 'to bottom left':
+                  gradientDirection = 'x1="100%" y1="0%" x2="0%" y2="100%"'
+                  break
+                case 'to top right':
+                  gradientDirection = 'x1="0%" y1="100%" x2="100%" y2="0%"'
+                  break
+                case 'to top left':
+                  gradientDirection = 'x1="100%" y1="100%" x2="0%" y2="0%"'
+                  break
+                default:
+                  gradientDirection = 'x1="0%" y1="0%" x2="100%" y2="0%"'
+                  break
+              }
+              // 在目标元素内的第一个位置插入 <defs> 和其中的内容
+              borderElement.insertAdjacentHTML(
+                'afterbegin',
+                `<defs>
+                      <linearGradient id="${this.borderBgId}" ${gradientDirection}>
+                        <stop offset="0%" stop-color="${config.customize.gradientColor0}" />
+                        <stop offset="100%" stop-color="${config.customize.gradientColor1}" />
+                      </linearGradient>
+                </defs>`
+              )
+            } else {
+              borderElement.style.background = `linear-gradient(${config.customize.gradientDirection},${config.customize.gradientColor0}, ${config.customize.gradientColor1})`
+              isBorder7 = false
             }
-            // 在目标元素内的第一个位置插入 <defs> 和其中的内容
-            borderElement.insertAdjacentHTML(
-              'afterbegin',
-              `<defs>
-                    <linearGradient id="${this.borderBgId}" ${gradientDirection}>
-                      <stop offset="0%" stop-color="${this.config.customize.gradientColor0}" />
-                      <stop offset="100%" stop-color="${this.config.customize.gradientColor1}" />
-                    </linearGradient>
-              </defs>`
-            )
-          } else {
-            borderElement.style.background = `linear-gradient(${this.config.customize.gradientDirection},${this.config.customize.gradientColor0}, ${this.config.customize.gradientColor1})`
-            isBorder7 = false
           }
         }
       }