单独构建大屏ui库,避免引入混乱

components/index.js

@@ -1,38 +0,0 @@
-//本地仓库外部组件
-
-// 存储组件列表
-let components = [];
-// 定义 install 方法，接收 Vue 作为参数。如果使用 use 注册插件，则所有的组件都将被注册
-const install = function (Vue) {
-  if (install.installed) return;
-  // 声明全局业务对象类
-  const models = require.context('./model', true, /\.js$/)
-  if (models) {
-    const model = {}
-    models.keys().map(e => {
-      model[e.replace(/\.[\/\\]([^\\\/]+)\.js$/, '$1')] = models(e).default
-    })
-    Vue.prototype.MODEL = model
-  }
-  Vue.prototype.$echartTpls = require("./AiEchart/echartTpls").default
-  // 遍历注册全局组件
-  let contexts = require.context('.', true, /[\\\/]Ai([^\\\/]+)\.vue$/);
-  if (contexts) {
-    contexts.keys().map((e) => {
-      components.push(contexts(e).default);
-      Vue.component(contexts(e).default.name, contexts(e).default);
-    });
-  }
-};
-
-// 判断是否是直接引入文件
-if (typeof window !== 'undefined' && window.Vue) {
-  install(window.Vue);
-}
-
-export default {
-  // 导出的对象必须具有 install，才能被 Vue.use() 方法安装
-  install,
-  // 以下组件列表
-  ...components
-};

examples/main.js

@@ -7,12 +7,12 @@ import utils from './utils';
 import dui from 'dui';
 import store from './store';
 import dataV from '@jiaminghi/data-view';
-import appComps from '../components'
+import dvui from '@dui/dv'
 
 Vue.use(dataV)
 Vue.use(ui);
 Vue.use(dui);
-Vue.use(appComps);
+Vue.use(dvui);
 //富文本编辑器配置
 Vue.config.productionTip = false;
 Object.keys(utils).map((e) => (Vue.prototype[e] = utils[e]));

package.json

@@ -9,20 +9,22 @@
     "dev:dv": "vue-cli-service serve examples/main.js --mode dv",
     "dev:fengdu": "vue-cli-service serve examples/main.js --mode fengdu",
     "lib": "npm publish||(npm unpublish -f&&npm publish)",
-    "ui": "npm run lib -w ui&&npm i dui@latest",
+    "preui": "npm publish -ws||(npm unpublish -f -ws&&npm publish -ws)",
+    "ui": "npm i dui@latest @dui/dv@latest",
     "sync": "node bin/appsSync.js",
     "preview": "vue-cli-service serve"
   },
   "workspaces": [
-    "ui"
+    "ui",
+    "ui/dv"
   ],
   "files": [
     "packages",
-    "project",
-    "components"
+    "project"
   ],
   "dependencies": {
     "@amap/amap-jsapi-loader": "^1.0.1",
+    "@dui/dv": "^1.0.0",
     "@jiaminghi/data-view": "^2.10.0",
     "@logicflow/core": "^1.2.1",
     "bin-ace-editor": "^3.2.0",

packages/bigscreen/designer/components/DataConfig.vue

@@ -164,10 +164,11 @@ import 'brace/theme/monokai';
 import AiDialogBtn from "dui/packages/layout/AiDialogBtn.vue";
 import AiFold from "dui/packages/layout/AiFold.vue";
 import ChartPicker from "./chartPicker.vue";
-import {DvCompData, monitorTypes} from "../config";
+import {monitorTypes} from "../config";
 import ConfigItem from "./configItem.vue";
 import DatasourcePicker from "./datasourcePicker.vue";
 import AiSelect from "dui/packages/basic/AiSelect.vue";
+import {DvCompData} from "@dui/dv";
 
 export default {
   name: 'dataConfig',

packages/bigscreen/designer/components/componentConfig.vue

@@ -214,10 +214,12 @@
 
 <script>
 import ConfigItem from "./configItem.vue";
-import AiDialogBtn from "dui/packages/layout/AiDialogBtn.vue";
+import AiDialogBtn from "dui/packages/layout/AiDialogBtn";
 import {monitorTypes} from "../config";
 import JsonEditor from "./jsonEditor.vue";
 import ChartPicker from "./chartPicker.vue";
+import AiDvSummary from "@dui/dv/layout/AiDvSummary/AiDvSummary";
+import Vue from "vue";
 
 export default {
   name: 'componentConfig',
@@ -242,6 +244,9 @@ export default {
   },
   computed: {
     summaryList: () => Object.keys(AiDvSummary.components)
+  },
+  created() {
+    console.log(Vue.component("AiDvSummary"))
   }
 }
 </script>

packages/bigscreen/designer/components/datasourcePicker.vue

@@ -28,13 +28,13 @@
 <script>
 import AiDialogBtn from "dui/packages/layout/AiDialogBtn.vue";
 import ConfigItem from "./configItem.vue";
-import {DvCompData} from "../config";
 import CodeEditor from 'bin-ace-editor'
 import 'brace/mode/json'
 import 'brace/snippets/json';
 import 'brace/theme/github';
 import 'brace/theme/monokai';
 import JsonEditor from "./jsonEditor.vue";
+import {DvCompData} from "@dui/dv";
 
 export default {
   name: "datasourcePicker",

packages/bigscreen/designer/config.js

@@ -411,7 +411,54 @@ export const chartTpl = [{
     staticData: {name: '综合调处率', label: "累计调解成功", v1: 23, totalLabel: "累计排查受理", total: 33},
   },]
 }]
-
+const maps = [{
+  type: 'map',
+  label: '地图',
+  display: 'map',
+  width: 840,
+  height: 534,
+  left: 0,
+  top: 0,
+  mask: '2',
+  pulseLines: '1',
+  mapStyle: "e51987628aee5206d4c9ca8c6e98b4f7",
+  areaId: '',
+  zIndex: 1,
+  apiData: [],
+  dataType: 'staticData',
+  dynamicData: [],
+  staticData: [{
+    label: '中卫慧通', lng: 117.1339399, lat: 36.7190487,
+  }],
+  api: '',
+  thumb: 'https://cdn.cunwuyun.cn/dvcp/dv/tpl/map.png',
+  is3dAround: '0',
+  limitArea: '0',
+  layers: 'vector'
+}, {
+  type: 'AiDvMap',
+  label: '地图',
+  display: 'map',
+  width: 840,
+  height: 534,
+  left: 0,
+  top: 0,
+  mask: '2',
+  pulseLines: '1',
+  mapStyle: "e51987628aee5206d4c9ca8c6e98b4f7",
+  areaId: '',
+  zIndex: 1,
+  apiData: [],
+  dataType: 'staticData',
+  dynamicData: [],
+  staticData: [{
+    label: '中卫慧通', lng: 117.1339399, lat: 36.7190487,
+  }],
+  api: '',
+  thumb: 'https://cdn.cunwuyun.cn/dvcp/dv/tpl/map.png',
+  is3dAround: '0',
+  limitArea: '0',
+}, {type: "linkageMap", label: "联动地图", width: 800, height: 964, top: 0, left: 560}]
 const customHtml = {
   label: "HTML块", type: "html", list: [{
     type: 'html',
@@ -536,8 +583,7 @@ const components = [{
       thumb: 'https://cdn.cunwuyun.cn/dvcp/dv/tpl/total.png'
     }]
   }]
-},
-  {
+}, {
   label: "AI", list: [
     {
       label: "AI助手",
@@ -552,8 +598,7 @@ const components = [{
       }]
     }
   ]
-  },
-  {
+}, {
   label: '其他', list: [
     {
       label: "图片", list: [
@@ -566,56 +611,7 @@ const components = [{
         }
       ]
     },
-      {
-        label: '地图', type: 'map', list: [{
-          type: 'map',
-          label: '地图',
-          display: 'map',
-          width: 840,
-          height: 534,
-          left: 0,
-          top: 0,
-          mask: '2',
-          pulseLines: '1',
-          mapStyle: "e51987628aee5206d4c9ca8c6e98b4f7",
-          areaId: '',
-          zIndex: 1,
-          apiData: [],
-          dataType: 'staticData',
-          dynamicData: [],
-          staticData: [{
-            label: '中卫慧通', lng: 117.1339399, lat: 36.7190487,
-          }],
-          api: '',
-          thumb: 'https://cdn.cunwuyun.cn/dvcp/dv/tpl/map.png',
-          is3dAround: '0',
-          limitArea: '0',
-          layers: 'vector'
-        }, {
-          type: 'AiDvMap',
-          label: '地图',
-          display: 'map',
-          width: 840,
-          height: 534,
-          left: 0,
-          top: 0,
-          mask: '2',
-          pulseLines: '1',
-          mapStyle: "e51987628aee5206d4c9ca8c6e98b4f7",
-          areaId: '',
-          zIndex: 1,
-          apiData: [],
-          dataType: 'staticData',
-          dynamicData: [],
-          staticData: [{
-            label: '中卫慧通', lng: 117.1339399, lat: 36.7190487,
-          }],
-          api: '',
-          thumb: 'https://cdn.cunwuyun.cn/dvcp/dv/tpl/map.png',
-          is3dAround: '0',
-          limitArea: '0',
-        }]
-      }, {
+    {label: '地图', list: maps}, {
       label: '党组织', type: 'partyOrg', list: [{
         type: 'partyOrg',
         label: '党组织',
@@ -777,86 +773,6 @@ const components = [{
 
 export {components}
 
-/**
- * 大屏组件数据类
- */
-export class DvCompData {
-  static types = {
-    staticData: "静态数据", dynamicData: "动态数据", apiData: "接口数据", htmlData: "HTML数据"
-  }
-
-  constructor(type, dataConfig = {}, instance) {
-    this.instance = instance
-    this.type = type
-    this.params = dataConfig
-  }
-
-  getData() {
-    return this.type == 'staticData' ? this.getStaticData() :
-        this.type == 'htmlData' ? this.getStaticData() :
-            this.type == 'dynamicData' ? this.getDynamicData() :
-                this.type == 'apiData' ? this.getApiData() : []
-  }
-
-  getDynamicData() {
-    const {sourceDataId: id} = this.params
-    return id ? this.getAsyncData(`/app/appdiylargescreen/statisticsByLsid?id=${id}`) : Promise.reject("未获取到数据源id")
-  }
-
-  getStaticData() {
-    const {staticData} = this.params
-    return new Promise((resolve, reject) => {
-      staticData ? resolve(staticData) : reject("未获取到静态数据")
-    })
-  }
-
-  getApiData() {
-    const {api} = this.params
-    return api ? this.getAsyncData(api) : Promise.reject("未获取到api")
-  }
-
-  getAsyncData(api) {
-    return this.instance.post(api).then(res => {
-      if (res?.data) {
-        const list = res.data,
-            firstRecord = list?.[0] || {},
-            keys = Object.keys(firstRecord)
-        let meta = []
-        if (['AiDvTable', 'table'].includes(this.params.type)) {
-          meta = keys.map(v => {
-            let obj = {}
-            list.forEach((item, index) => {
-              obj[`v${index}`] = item[v]
-            })
-            return {row: v, ...obj}
-          })
-        } else if (this.params.type === 'summary') {
-          if (this.params.display === 'summary9') {
-            meta = res.data
-          } else {
-            meta = keys.map(key => ({key, value: firstRecord[key]}))
-          }
-        } else if (this.type === 'dynamicData' && !this.params.dataX && this.params.dataY?.length <= 0) {
-          meta = keys.map(key => ({key, value: firstRecord[key]}))
-        } else {
-          if (this.params.dataX && this.params.dataY.length) {
-            list.forEach(i => {
-              let obj = {}
-              this.params.dataY.forEach(v => obj[v] = i[v])
-              meta.push({
-                [this.params.dataX]: i[this.params.dataX], ...obj
-              })
-            })
-          } else {
-            meta = res.data
-          }
-        }
-        return meta
-      }
-    })
-  }
-}
-
 /**
  * 监控类型
  */

ui/dv/index.js

@@ -0,0 +1,118 @@
+//本地仓库外部组件
+
+// 存储组件列表
+let components = [];
+// 定义 install 方法，接收 Vue 作为参数。如果使用 use 注册插件，则所有的组件都将被注册
+const install = function (Vue) {
+  if (install.installed) return;
+  // 声明全局业务对象类
+  const models = require.context('./model', true, /\.js$/)
+  if (models) {
+    const model = {}
+    models.keys().map(e => {
+      model[e.replace(/\.[\/\\]([^\\\/]+)\.js$/, '$1')] = models(e).default
+    })
+    Vue.prototype.MODEL = model
+  }
+  Vue.prototype.$echartTpls = require("./AiEchart/echartTpls").default
+  // 遍历注册全局组件
+  let contexts = require.context('.', true, /[\\\/]Ai([^\\\/]+)\.vue$/);
+  if (contexts) {
+    contexts.keys().map((e) => {
+      components.push(contexts(e).default);
+      Vue.component(contexts(e).default.name, contexts(e).default);
+    });
+  }
+};
+
+// 判断是否是直接引入文件
+if (typeof window !== 'undefined' && window.Vue) {
+  install(window.Vue);
+}
+
+/**
+ * 大屏组件数据类
+ */
+export class DvCompData {
+  static types = {
+    staticData: "静态数据", dynamicData: "动态数据", apiData: "接口数据", htmlData: "HTML数据"
+  }
+
+  constructor(type, dataConfig = {}, instance) {
+    this.instance = instance
+    this.type = type
+    this.params = dataConfig
+  }
+
+  getData() {
+    return this.type == 'staticData' ? this.getStaticData() :
+      this.type == 'htmlData' ? this.getStaticData() :
+        this.type == 'dynamicData' ? this.getDynamicData() :
+          this.type == 'apiData' ? this.getApiData() : []
+  }
+
+  getDynamicData() {
+    const {sourceDataId: id} = this.params
+    return id ? this.getAsyncData(`/app/appdiylargescreen/statisticsByLsid?id=${id}`) : Promise.reject("未获取到数据源id")
+  }
+
+  getStaticData() {
+    const {staticData} = this.params
+    return new Promise((resolve, reject) => {
+      staticData ? resolve(staticData) : reject("未获取到静态数据")
+    })
+  }
+
+  getApiData() {
+    const {api} = this.params
+    return api ? this.getAsyncData(api) : Promise.reject("未获取到api")
+  }
+
+  getAsyncData(api) {
+    return this.instance.post(api).then(res => {
+      if (res?.data) {
+        const list = res.data,
+          firstRecord = list?.[0] || {},
+          keys = Object.keys(firstRecord)
+        let meta = []
+        if (['AiDvTable', 'table'].includes(this.params.type)) {
+          meta = keys.map(v => {
+            let obj = {}
+            list.forEach((item, index) => {
+              obj[`v${index}`] = item[v]
+            })
+            return {row: v, ...obj}
+          })
+        } else if (this.params.type === 'summary') {
+          if (this.params.display === 'summary9') {
+            meta = res.data
+          } else {
+            meta = keys.map(key => ({key, value: firstRecord[key]}))
+          }
+        } else if (this.type === 'dynamicData' && !this.params.dataX && this.params.dataY?.length <= 0) {
+          meta = keys.map(key => ({key, value: firstRecord[key]}))
+        } else {
+          if (this.params.dataX && this.params.dataY.length) {
+            list.forEach(i => {
+              let obj = {}
+              this.params.dataY.forEach(v => obj[v] = i[v])
+              meta.push({
+                [this.params.dataX]: i[this.params.dataX], ...obj
+              })
+            })
+          } else {
+            meta = res.data
+          }
+        }
+        return meta
+      }
+    })
+  }
+}
+
+export default {
+  // 导出的对象必须具有 install，才能被 Vue.use() 方法安装
+  install,
+  // 以下组件列表
+  ...components
+};

ui/dv/layout/AiDvPlot/AiDvPlot.vue

@@ -5,8 +5,7 @@
   </section>
 </template>
 <script>
-
-import {DvCompData} from "../../../packages/bigscreen/designer/config";
+import {DvCompData} from "../../index";
 
 export default {
   name: "AiDvPlot",