fix: 修复系统组件在预览态绑定了定时器但是无法更新的问题

data-room-ui/package-lock.json

@@ -3397,27 +3397,6 @@
         "whatwg-fetch": "^3.6.2"
       },
       "dependencies": {
-        "@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
-            }
-          }
-        },
         "acorn-walk": {
           "version": "8.2.0",
           "resolved": "https://registry.npmjs.org/acorn-walk/-/acorn-walk-8.2.0.tgz",
@@ -3489,26 +3468,6 @@
             "tapable": "^2.0.0"
           }
         },
-        "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"
-          }
-        },
         "ms": {
           "version": "2.1.2",
           "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
@@ -3726,6 +3685,47 @@
         "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",
@@ -7545,6 +7545,11 @@
         "minimatch": "^3.0.4"
       }
     },
+    "downloadjs": {
+      "version": "1.4.7",
+      "resolved": "https://registry.npmjs.org/downloadjs/-/downloadjs-1.4.7.tgz",
+      "integrity": "sha512-LN1gO7+u9xjU5oEScGFKvXhYf7Y/empUIIEAGBs1LzUq/rg5duiDrkuH5A2lQGd5jfMOb9X9usDa2oVXwJ0U/Q=="
+    },
     "duplexer": {
       "version": "0.1.2",
       "resolved": "https://registry.npmjs.org/duplexer/-/duplexer-0.1.2.tgz",
@@ -19918,6 +19923,14 @@
         "vue": "^2.2.6"
       }
     },
+    "vue-json-excel": {
+      "version": "0.3.0",
+      "resolved": "https://registry.npmjs.org/vue-json-excel/-/vue-json-excel-0.3.0.tgz",
+      "integrity": "sha512-FrSh0tVUpw4K+ilLO8g0Qp52eFJw/hkk3rZPTEKo9qVkJgVfQtZwzj3UWc5ACYxA3jLk9HtjK+f9xKHCN4Kgag==",
+      "requires": {
+        "downloadjs": "^1.4.7"
+      }
+    },
     "vue-json-viewer": {
       "version": "2.2.22",
       "resolved": "https://registry.npmjs.org/vue-json-viewer/-/vue-json-viewer-2.2.22.tgz",

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

@@ -139,7 +139,6 @@ export default {
           type: 'varchar'
         }
       }
-      console.log(this.columnData)
       this.dataList = list
     },
     // 获取表格的表头

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

@@ -751,7 +751,6 @@ export default {
           } else {
             this.params = res.params
           }
-
           this.datasetName = res.name
           // 选择数据集的时候，如果数据集类型是dataModel,则不显示参数配置
           this.config.option.displayOption.params.enable = res.type !== 'dataModel'

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

@@ -47,7 +47,6 @@ import RenderCard from 'data-room-ui/Render/RenderCard.vue'
 import { mapActions, mapMutations, mapState } from 'vuex'
 import { compile } from 'tiny-sass-compiler/dist/tiny-sass-compiler.esm-browser.prod.js'
 import NotPermission from 'data-room-ui/NotPermission'
-import cloneDeep from 'lodash/cloneDeep'
 import Configuration from 'data-room-ui/Render/Configuration.vue'
 import DataViewDialog from 'data-room-ui/BigScreenDesign/DataViewDialog/index.vue'
 export default {
@@ -225,7 +224,11 @@ export default {
             that.chartList.forEach((chart, index) => {
               if (item.code === chart.code && item.time === time) {
                 item.time = item.time + item.originTime
-                that.$refs.RenderCardRef[index].$refs[chart.code].changeData(chart)
+                if (that.$refs.RenderCardRef[index].$refs[chart.code]?.componentInstance) {
+                  that.$refs.RenderCardRef[index].$refs[chart.code].componentInstance.changeData(chart)
+                } else {
+                  that.$refs.RenderCardRef[index].$refs[chart.code].changeData(chart)
+                }
               }
             })
           }

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

@@ -13,7 +13,6 @@
         </div>
       </div>
       <div class="right-btn-wrap">
-
         <CusBtn
           :loading="loading"
           @click="save"
@@ -27,14 +26,25 @@
         <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('echarts')">
+              <div class="code-tab">
+                组件模板
+              </div>
+              <div
+                class="code-tab-btn"
+                @click="change('echarts')"
+              >
                 echarts组件
               </div>
-              <div class="code-tab-btn" @click="change('g2')">
+              <div
+                class="code-tab-btn"
+                @click="change('g2')"
+              >
                 G2Plot组件
               </div>
-              <div class="code-tab-btn" @click="change('base')">
+              <div
+                class="code-tab-btn"
+                @click="change('base')"
+              >
                 原生组件
               </div>
             </div>
@@ -89,12 +99,12 @@
               效果预览
             </div>
             <div class="upload-btn">
-             <CusBtn
-              :loading="loading"
-              @click.native="createdImg()"
-            >
-              生成图片
-            </CusBtn>
+              <CusBtn
+                :loading="loading"
+                @click.native="createdImg()"
+              >
+                生成图片
+              </CusBtn>
             </div>
           </div>
           <BizComponentPreview
@@ -232,19 +242,19 @@ export default {
         })
       }
     },
-    changeTemp(val){
-      if(val=='g2'){
-        this.form.settingContent=defaultG2SettingContent
-        this.form.vueContent=defaultG2VueContent
-      }else if(val=='base'){
-        this.form.settingContent=defaultSettingContent
-        this.form.vueContent=defaultVueContent
-      }else if(val=='echarts'){
-        this.form.settingContent= defaultEchartsSettingContent
-        this.form.vueContent=defaultEchartsVueContent
+    changeTemp (val) {
+      if (val == 'g2') {
+        this.form.settingContent = defaultG2SettingContent
+        this.form.vueContent = defaultG2VueContent
+      } else if (val == 'base') {
+        this.form.settingContent = defaultSettingContent
+        this.form.vueContent = defaultVueContent
+      } else if (val == 'echarts') {
+        this.form.settingContent = defaultEchartsSettingContent
+        this.form.vueContent = defaultEchartsVueContent
       }
     },
-    change(val) {
+    change (val) {
       this.$confirm('确定替换为选中模板吗？未保存的代码将被覆盖！', '提示', {
         distinguishCancelAndClose: true,
         confirmButtonText: '确定',

data-room-ui/packages/MapDataManagement/src/AddForm.vue

@@ -124,25 +124,24 @@
             class="bs-el-switch"
           />
         </el-form-item>
-
       </el-form>
       <span
         slot="footer"
         class="dialog-footer"
       >
-      <el-button
-        class="bs-el-button-default"
-        @click="handleClose"
-      >
-        取消
-      </el-button>
-      <el-button
-        type="primary"
-        @click="submitForm"
-      >
-        确定
-      </el-button>
-    </span>
+        <el-button
+          class="bs-el-button-default"
+          @click="handleClose"
+        >
+          取消
+        </el-button>
+        <el-button
+          type="primary"
+          @click="submitForm"
+        >
+          确定
+        </el-button>
+      </span>
     </el-dialog>
     <input
       ref="geoJsonFile"
@@ -157,22 +156,21 @@
 
 <script>
 import vueJsonViewer from 'vue-json-viewer'
-import {getMapChildFromGeoJson, mapAdd, repeatCheck} from 'data-room-ui/js/utils/mapDataService'
+import { getMapChildFromGeoJson, mapAdd, repeatCheck } from 'data-room-ui/js/utils/mapDataService'
 
 export default {
-  name: "AddForm",
+  name: 'AddForm',
   components: {
     vueJsonViewer
   },
   computed: {
-    autoParseNextLevelShow() {
+    autoParseNextLevelShow () {
       // geoJson 不为空，且支持下钻
       return !this.isEmpty(this.mapForm.geoJson) && this.mapForm.enableDown === 1
     }
   },
-  data() {
+  data () {
     const validateCode = (rule, value, callback) => {
-      console.log(value)
       if (this.mapForm.parentCode !== '0') {
         // 不需要校验
         callback()
@@ -187,7 +185,6 @@ export default {
           callback()
         }
       })
-
     }
     return {
       mapFormVisible: false,
@@ -208,28 +205,28 @@ export default {
       },
       rules: {
         mapCode: [
-          {required: true, message: '请选择地图编码', trigger: 'blur'},
-          {validator: validateCode, trigger: 'blur'}
+          { required: true, message: '请选择地图编码', trigger: 'blur' },
+          { validator: validateCode, trigger: 'blur' }
         ],
         name: [
-          {required: true, message: '请输入地图名称', trigger: 'blur'}
+          { required: true, message: '请输入地图名称', trigger: 'blur' }
         ],
         level: [
-          {required: true, message: '请选择地图级别', trigger: 'change'}
+          { required: true, message: '请选择地图级别', trigger: 'change' }
         ]
       },
       levelList: [
-        {value: 0, label: '世界'},
-        {value: 1, label: '国家'},
-        {value: 2, label: '省份'},
-        {value: 3, label: '城市'},
-        {value: 4, label: '区县'}
+        { value: 0, label: '世界' },
+        { value: 1, label: '国家' },
+        { value: 2, label: '省份' },
+        { value: 3, label: '城市' },
+        { value: 4, label: '区县' }
       ],
       mapCodeList: []
     }
   },
   methods: {
-    init(parentMap) {
+    init (parentMap) {
       this.mapForm = {
         parentId: '0',
         parentCode: '0',
@@ -251,10 +248,10 @@ export default {
         this.getMapCodeList()
       }
     },
-    handleClose() {
+    handleClose () {
       this.mapFormVisible = false
     },
-    submitForm() {
+    submitForm () {
       this.$refs.mapForm.validate(valid => {
         if (!valid) {
           return false
@@ -273,19 +270,18 @@ export default {
           this.mapFormVisible = false
           this.$emit('refresh')
         })
-
       })
     },
-    isEmpty(obj) {
+    isEmpty (obj) {
       if (typeof obj === 'object') {
-        return Object.keys(obj).length === 0 && obj.constructor === Object;
+        return Object.keys(obj).length === 0 && obj.constructor === Object
       }
       if (typeof obj === 'string') {
-        return /^\s*$/.test(obj);
+        return /^\s*$/.test(obj)
       }
-      return Array.isArray(obj) && obj.length === 0;
+      return Array.isArray(obj) && obj.length === 0
     },
-    getMapCodeList() {
+    getMapCodeList () {
       this.mapCodeList = []
       if (this.mapForm.parentCode === '0') {
         this.mapCodeList = [{
@@ -298,17 +294,17 @@ export default {
         })
       }
     },
-    upload() {
+    upload () {
       this.$refs.geoJsonFile.click()
     },
-    handleBatchUpload(source) {
+    handleBatchUpload (source) {
       this.uploadLoading = true
       const file = source.target.files
       const reader = new FileReader() // 新建一个FileReader
       reader.readAsText(file[0], 'UTF-8') // 读取文件
 
       reader.onload = (event) => {
-        let jsonStr = event.target.result
+        const jsonStr = event.target.result
         // 读取文件内容
         try {
           this.mapForm.geoJson = JSON.parse(jsonStr)
@@ -321,13 +317,12 @@ export default {
         // input通过onchange事件来触发js代码的，由于两次文件是重复的，所以这个时候onchange事件是没有触发到的，所以需要手动清空input的值
         source.target.value = ''
       }
-    },
+    }
 
   }
 }
 </script>
 
-
 <style lang="scss" scoped>
 @import '../../assets/style/bsTheme.scss';
 

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

@@ -22,7 +22,6 @@ import { mapMutations, mapState } from 'vuex'
 import innerRemoteComponents, { getRemoteComponents } from 'data-room-ui/RemoteComponents/remoteComponentsList'
 import { getBizComponentInfo } from 'data-room-ui/js/api/bigScreenApi'
 import { settingToTheme } from 'data-room-ui/js/utils/themeFormatting'
-import _ from 'lodash'
 import cloneDeep from 'lodash/cloneDeep'
 export default {
   name: 'LcdpRemoteComponent',
@@ -45,7 +44,8 @@ export default {
   data () {
     return {
       loading: false,
-      remoteComponent: null
+      remoteComponent: null,
+      componentInstance: null
     }
   },
   watch: {
@@ -92,8 +92,9 @@ export default {
     },
     async chartInit () {
       let config = this.config
-      config.g2Plots=g2Plot
-      config.echarts=_echarts
+      config.g2Plots = g2Plot
+      config.echarts = _echarts
+      this.componentInstance = this.$refs['remoteComponent' + config.code]
       // key和code相等，说明是一进来刷新，调用list接口
       if (this.config.code === this.config.key || this.isPreview) {
         // 改变样式
@@ -110,7 +111,7 @@ export default {
         }
       }
     },
-    linkEvent (formData) {
+        linkEvent (formData) {
       this.linkage(formData)
     },
     /**
@@ -215,7 +216,7 @@ export default {
       }
       // 只有样式改变时更新主题配置，切换主题时不需要保存
       if (!isUpdateTheme) {
-        config.theme = settingToTheme(_.cloneDeep(config), this.customTheme)
+        config.theme = settingToTheme(cloneDeep(config), this.customTheme)
       }
       if (this.chart) {
         this.chart.update(config.option)

data-room-ui/packages/js/store/mutations.js

@@ -87,7 +87,7 @@ export default {
   // 改变当前组件配置
   changeChartConfig (state, itemConfig) {
     // 如果存在parentCode的组件，则是tab中的组件
-    if (itemConfig.parentCode) {
+    if (itemConfig?.parentCode) {
       state.pageInfo.chartList.forEach((chart, index) => {
         if (chart.code === itemConfig.parentCode) {
           chart.customize.tabList.forEach((tabItem, i) => {