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

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
+};