okrtree改成cdn加载

project/dv/apps/AppGridDV.vue

@@ -17,22 +17,21 @@
         </el-tree>
       </div>
     </div>
-    <div class="middle" :class="[girdLevel == '2' ? 'middle-active' : '']" ref="container" v-loading="isLoading" element-loading-background="rgba(0, 0, 0, 0.5)">
+    <div class="middle" :class="[girdLevel == '2' ? 'middle-active' : '']" ref="container" v-loading="isLoading"
+         element-loading-background="rgba(0, 0, 0, 0.5)">
       <div
           ref="middleTree"
           id="tree"
           class="tree"
           :style="{left: x, top: y, transform: `scale(${scale}) translate(-50%, -50%) `, 'transform-origin': `${0} ${0}`}">
-        <VueOkrTree
+        <ai-okr-tree ref="VueOkrTree" v-if="chartData.length"
-          ref="VueOkrTree"
                      :data="chartData"
                      node-key="id"
                      show-collapsable
                      aniamte
                      animate-name="okr-fade-in-linear"
                      :render-content="renderContent"
-          default-expand-all>
+                     default-expand-all/>
-        </VueOkrTree>
       </div>
     </div>
     <div class="right">
@@ -72,7 +71,6 @@
           <span>{{ residentInfo.currentAreaName }}</span>
         </div>
         <ai-table
-          v-if="tableData.length"
             style="width: 558px"
             :tableData="tableData"
             :col-configs="colConfigs"
@@ -90,14 +88,13 @@
 <script>
 import pieChart from 'dvcp-dv-ui/components/AiEchart/template/pie/pieChart2'
 import barChart1 from 'dvcp-dv-ui/components/AiEchart/template/bar/barChart1'
-  import { VueOkrTree } from 'vue-okr-tree'
+import AiOkrTree from "dvcp-dv-ui/components/AiOkrTree"
-  import 'vue-okr-tree/dist/vue-okr-tree.css'
 
 export default {
   name: 'AppGridDV',
 
   label: '网格数据大屏',
-
+  components: {AiOkrTree},
   props: {
     instance: Function,
     dict: Object,
@@ -136,7 +133,13 @@
           },
           formart: v => this.dict.getLabel('householdRelation', v)
         },
-          { prop: 'idNumber', label: '身份证号', align: 'center', width: 220, formart: v => v ? v.replace(/^(\d{10})\d{4}(.{4}$)/g, `$1${Array(5).join('*')}$2`) : '-' },
+        {
+          prop: 'idNumber',
+          label: '身份证号',
+          align: 'center',
+          width: 220,
+          formart: v => v ? v.replace(/^(\d{10})\d{4}(.{4}$)/g, `$1${Array(5).join('*')}$2`) : '-'
+        },
         {prop: 'phone', label: '联系方式', align: 'center'}
       ],
       girdId: '',
@@ -153,10 +156,6 @@
     }
   },
 
-    components: {
-      VueOkrTree
-    },
-
   created() {
     this.dict.load('householdRelation')
     this.getTreeList()
@@ -233,7 +232,6 @@
     handleNodeClick(e) {
       this.girdLevel = e.girdLevel
       this.isLoading = true
-        console.log(e)
       this.getGirdInfo(e.id, e.girdLevel)
       this.getStatisticsInfo(e.id)
     },
@@ -346,7 +344,6 @@
       this.instance.post(`/app/appgirdinfo/listAllGirdAndMemberByTop?id=${id || ''}`).then((res) => {
         if (res.code == 0) {
           const chartData = this.formatList([res.data])
-            console.log(chartData)
           this.chartData = chartData
 
           this.$nextTick(() => {
@@ -501,6 +498,7 @@
 
   .grid-info {
     width: 100%;
+
     .grid-info__title {
       display: flex;
       align-items: center;
@@ -640,9 +638,11 @@
             font-size: 12px;
             margin-bottom: 4px;
           }
+
           span {
             line-height: 14px;
           }
+
           img {
             width: 40px;
             height: 56px;

project/dvui/components/AiDvPartyOrg.vue

@@ -1,33 +1,19 @@
 <template>
   <div class="partyDvOrg" ref="container">
-    <div
+    <div class="partyDvOrg-wrapper" ref="tree" id="tree"
-      class="partyDvOrg-wrapper"
-      ref="tree"
-      id="tree"
          :style="{left: x, top: y, transform: `scale(${scale}) translate(-50%, -50%) `, 'transform-origin': `${0} ${0}`}">
-      <VueOkrTree
+      <ai-okr-tree :props="props" node-key="id" :data="treeData"/>
-        :props="props"
-        node-key="id"
-        ref="VueOkrTree"
-        :data="treeData">
-      </VueOkrTree>
     </div>
   </div>
 </template>
 
 <script>
-  import { VueOkrTree } from 'vue-okr-tree'
+import AiOkrTree from "./AiOkrTree";
-  import 'vue-okr-tree/dist/vue-okr-tree.css'
 
 export default {
   name: 'AiDvPartyOrg',
-
+  components: {AiOkrTree},
   props: ['instance'],
-
-    components: {
-      VueOkrTree
-    },
-
   data() {
     return {
       scale: 1,

project/dvui/components/AiOkrTree.vue

@@ -0,0 +1,40 @@
+<template>
+  <section class="AiOkrTree">
+    <component v-if="okrTreeLoaded" v-bind="$attrs" :is="ot" :data="data"/>
+  </section>
+</template>
+
+<script>
+import Vue from "vue"
+
+export default {
+  name: "AiOkrTree",
+  props: {
+    data: {default: () => []}
+  },
+  computed: {
+    okrTreeLoaded: v => !!v.ot
+  },
+  data() {
+    return {
+      ot: null
+    }
+  },
+  created() {
+    this.$injectCss("https://cdn.cunwuyun.cn/vot/vue-okr-tree.css")
+    this.$injectLib("https://cdn.cunwuyun.cn/vot/vue-okr-tree.umd.min.js", () => {
+      const {VueOkrTree} = (window?.["vue-okr-tree"] || {})
+      this.ot = Vue.extend({
+        ...VueOkrTree, data() {
+          return {...this.$attrs}
+        }
+      })
+    })
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.AiOkrTree {
+}
+</style>