refactor: 视图插件自定义icon

frontend/src/utils/validate.js

@@ -7,7 +7,7 @@
  * @returns {Boolean}
  */
 export function isExternal(path) {
-  return /^(https?:|mailto:|tel:)/.test(path)
+  return /^(https?:|mailto:|tel:)/.test(path) || /^(http?:|mailto:|tel:)/.test(path) || path.startsWith('/api/pluginCommon/staticInfo')
 }
 
 /**

frontend/src/views/chart/group/Group.vue

@@ -224,7 +224,7 @@
           </el-row>
         </el-row>
         <el-row class="chart-box" style="text-align: center;">
-          <svg-icon :icon-class="view.type" class="chart-icon" />
+          <svg-icon :icon-class="view.isPlugin ? ('/api/pluginCommon/staticInfo/' + view.type + '/svg') : view.type" class="chart-icon" />
         </el-row>
       </el-row>
 
@@ -297,6 +297,7 @@ import TableSelector from '../view/TableSelector'
 import GroupMoveSelector from '../components/TreeSelector/GroupMoveSelector'
 import ChartMoveSelector from '../components/TreeSelector/ChartMoveSelector'
 import ChartType from '@/views/chart/view/ChartType'
+import { pluginTypes } from '@/api/chart/chart'
 import {
   DEFAULT_COLOR_CASE,
   DEFAULT_LABEL,
@@ -420,7 +421,8 @@ export default {
         folder: this.$t('commons.folder')
       },
       currentViewNodeData: {},
-      currentKey: null
+      currentKey: null,
+      pluginRenderOptions: []
     }
   },
   computed: {
@@ -429,14 +431,14 @@ export default {
     },
     panelInfo() {
       return this.$store.state.panel.panelInfo
-    },
-    pluginRenderOptions() {
+    }
+    /* pluginRenderOptions() {
       const plugins = localStorage.getItem('plugin-views') && JSON.parse(localStorage.getItem('plugin-views')) || []
       const pluginOptions = plugins.filter(plugin => !this.renderOptions.some(option => option.value === plugin.render)).map(plugin => {
         return { name: plugin.render, value: plugin.render }
       })
       return [...this.renderOptions, ...pluginOptions]
-    }
+    } */
   },
   watch: {
     saveStatus() {
@@ -460,6 +462,21 @@ export default {
     }
 
   },
+  created() {
+    const plugins = localStorage.getItem('plugin-views') && JSON.parse(localStorage.getItem('plugin-views'))
+    if (plugins) {
+      this.loadPluginType()
+    } else {
+      pluginTypes().then(res => {
+        const plugins = res.data
+        localStorage.setItem('plugin-views', JSON.stringify(plugins))
+        this.loadPluginType()
+      }).catch(e => {
+        localStorage.setItem('plugin-views', null)
+        this.loadPluginType()
+      })
+    }
+  },
   mounted() {
     if (this.mountedInit) {
       this.treeNode(true)
@@ -468,6 +485,13 @@ export default {
     this.getChartGroupTree()
   },
   methods: {
+    loadPluginType() {
+      const plugins = localStorage.getItem('plugin-views') && JSON.parse(localStorage.getItem('plugin-views')) || []
+      const pluginOptions = plugins.filter(plugin => !this.renderOptions.some(option => option.value === plugin.render)).map(plugin => {
+        return { name: plugin.render, value: plugin.render }
+      })
+      this.pluginRenderOptions = [...this.renderOptions, ...pluginOptions]
+    },
     clickAdd(param) {
       this.currGroup = param.data
       if (param.type === 'group') {

frontend/src/views/chart/view/ChartEdit.vue

@@ -154,7 +154,7 @@
                   <span>{{ $t('chart.chart_type') }}</span>
                   <el-row style="padding: 4px 0 4px 10px;">
                     <span>
-                      <svg-icon :icon-class="view.type" class="chart-icon" />
+                      <svg-icon :icon-class="view.isPlugin ? ('/api/pluginCommon/staticInfo/' + view.type + '/svg') : view.type" class="chart-icon" />
                     </span>
                     <span style="float: right;">
                       <el-popover
@@ -1212,7 +1212,7 @@ import AssistLine from '@/views/chart/components/senior/AssistLine'
 import Threshold from '@/views/chart/components/senior/Threshold'
 import TotalCfg from '@/views/chart/components/shape-attr/TotalCfg'
 import LabelNormalText from '@/views/chart/components/normal/LabelNormalText'
-
+import { pluginTypes } from '@/api/chart/chart'
 export default {
   name: 'ChartEdit',
   components: {
@@ -1365,7 +1365,8 @@ export default {
       hasEdit: false,
       quotaItemCompare: {},
       showEditQuotaCompare: false,
-      preChartId: ''
+      preChartId: '',
+      pluginRenderOptions: []
 
     }
   },
@@ -1378,14 +1379,14 @@ export default {
     },
     ...mapState([
       'panelViewEditInfo'
-    ]),
-    pluginRenderOptions() {
+    ])
+    /* pluginRenderOptions() {
       const plugins = localStorage.getItem('plugin-views') && JSON.parse(localStorage.getItem('plugin-views')) || []
       const pluginOptions = plugins.filter(plugin => !this.renderOptions.some(option => option.value === plugin.render)).map(plugin => {
         return { name: plugin.render, value: plugin.render }
       })
       return [...this.renderOptions, ...pluginOptions]
-    }
+    } */
   },
   watch: {
     'param': function(val) {
@@ -1411,8 +1412,19 @@ export default {
     }
   },
   created() {
-    // this.get(this.$store.state.chart.viewId);
-    // this.initAreas()
+    const plugins = localStorage.getItem('plugin-views') && JSON.parse(localStorage.getItem('plugin-views'))
+    if (plugins) {
+      this.loadPluginType()
+    } else {
+      pluginTypes().then(res => {
+        const plugins = res.data
+        localStorage.setItem('plugin-views', JSON.stringify(plugins))
+        this.loadPluginType()
+      }).catch(e => {
+        localStorage.setItem('plugin-views', null)
+        this.loadPluginType()
+      })
+    }
   },
   mounted() {
     this.bindPluginEvent()
@@ -1424,6 +1436,13 @@ export default {
   },
 
   methods: {
+    loadPluginType() {
+      const plugins = localStorage.getItem('plugin-views') && JSON.parse(localStorage.getItem('plugin-views')) || []
+      const pluginOptions = plugins.filter(plugin => !this.renderOptions.some(option => option.value === plugin.render)).map(plugin => {
+        return { name: plugin.render, value: plugin.render }
+      })
+      this.pluginRenderOptions = [...this.renderOptions, ...pluginOptions]
+    },
     emptyTableData() {
       this.table = {}
       this.dimension = []

frontend/src/views/panel/ViewSelect/index.vue

@@ -47,6 +47,7 @@
               </span>
               <span v-else>
                 <svg-icon :icon-class="data.modelInnerType" style="width: 14px;height: 14px" />
+                <svg-icon :icon-class="data.isPlugin ? ('/api/pluginCommon/staticInfo/' + data.modelInnerType + '/svg') : data.modelInnerType" style="width: 14px;height: 14px" />
               </span>
               <span style="margin-left: 6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;" :title="data.name">{{ data.name }}</span>
             </span>
@@ -74,7 +75,7 @@ import eventBus from '@/components/canvas/utils/eventBus'
 import { mapState } from 'vuex'
 import { queryPanelViewTree } from '@/api/panel/panel'
 import { deleteCircle } from '@/api/chart/chart'
-import { delUser } from '@/api/system/user'
+import { pluginTypes } from '@/api/chart/chart'
 
 export default {
   name: 'ViewSelect',
@@ -96,7 +97,8 @@ export default {
       data: [],
       showdetail: false,
       detailItem: null,
-      loading: false
+      loading: false,
+      plugins: null
     }
   },
   computed: {
@@ -110,7 +112,20 @@ export default {
     }
   },
   created() {
-    this.loadData()
+    this.plugins = localStorage.getItem('plugin-views') && JSON.parse(localStorage.getItem('plugin-views'))
+    if (this.plugins) {
+      this.loadData()
+    } else {
+      pluginTypes().then(res => {
+        this.plugins = res.data
+        localStorage.setItem('plugin-views', JSON.stringify(res.data))
+        this.loadData()
+      }).catch(e => {
+        localStorage.setItem('plugin-views', null)
+        this.plugins = null
+        this.loadData()
+      })
+    }
   },
   methods: {
     filterNode(value, data) {
@@ -172,6 +187,11 @@ export default {
         if (node.modelType === 'panel' || node.nodeType === 'spine') {
           node.disabled = true
         }
+
+        if (node.modelType === 'view' && node.modelInnerType && this.plugins && this.plugins.length) {
+          node.isPlugin = this.plugins.some(plugin => plugin.value === node.modelInnerType)
+        }
+
         if (node.children && node.children.length > 0) {
           this.setParentDisable(node.children)
         }