From 3a9377fe4bef849d43124efe2bbb53f21d8f4094 Mon Sep 17 00:00:00 2001
From: aixianling <aixianling@sinoecare.com>
Date: Mon, 9 Oct 2023 16:46:02 +0800
Subject: [PATCH] =?UTF-8?q?=E8=B0=83=E6=95=B4=E5=B7=A5=E7=A8=8B=E7=BB=93?=
 =?UTF-8?q?=E6=9E=84,=E5=B9=B6=E8=BF=9B=E8=A1=8C=E4=BA=86=E4=BC=98?=
 =?UTF-8?q?=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/AiDvRender.vue                     |   2 +-
 examples/main.js                              |   2 +-
 .../designer/{components => }/Add.vue         |   0
 packages/bigscreen/designer/AppDesigner.vue   |  10 +-
 .../designer/{components => }/Layout.vue      |   6 +-
 .../designer/{components => }/List.vue        |   0
 .../designer/{components => }/SourceData.vue  |   0
 .../components/{form => }/DataConfig.vue      | 176 +-----------------
 .../components/{form => }/componentConfig.vue |   0
 .../designer/components/configItem.vue        |  86 +++++++++
 .../designer/components/datasourcePicker.vue  |  75 ++++++++
 packages/bigscreen/designer/config.js         |   7 +-
 .../designer/{components => }/preview.vue     |   0
 13 files changed, 185 insertions(+), 179 deletions(-)
 rename packages/bigscreen/designer/{components => }/Add.vue (100%)
 rename packages/bigscreen/designer/{components => }/Layout.vue (99%)
 rename packages/bigscreen/designer/{components => }/List.vue (100%)
 rename packages/bigscreen/designer/{components => }/SourceData.vue (100%)
 rename packages/bigscreen/designer/components/{form => }/DataConfig.vue (65%)
 rename packages/bigscreen/designer/components/{form => }/componentConfig.vue (100%)
 create mode 100644 packages/bigscreen/designer/components/configItem.vue
 create mode 100644 packages/bigscreen/designer/components/datasourcePicker.vue
 rename packages/bigscreen/designer/{components => }/preview.vue (100%)

diff --git a/components/AiDvRender.vue b/components/AiDvRender.vue
index 7ff03094..c717d55c 100644
--- a/components/AiDvRender.vue
+++ b/components/AiDvRender.vue
@@ -206,7 +206,7 @@ export default {
   },
   mounted() {
     if (this.currentType == 'table') {
-      this.$injectLib("https://cdn.cunwuyun.cn/datav.map.vue.js")
+      // this.$injectLib("https://cdn.cunwuyun.cn/datav.map.vue.js")
     }
   }
 }
diff --git a/examples/main.js b/examples/main.js
index cf168901..98d2d660 100644
--- a/examples/main.js
+++ b/examples/main.js
@@ -9,7 +9,7 @@ import store from './store';
 import dataV from '@jiaminghi/data-view';
 import appComps from '../components'
 
-Vue.use(dataV);
+Vue.use(dataV)
 Vue.use(ui);
 Vue.use(dui);
 Vue.use(appComps);
diff --git a/packages/bigscreen/designer/components/Add.vue b/packages/bigscreen/designer/Add.vue
similarity index 100%
rename from packages/bigscreen/designer/components/Add.vue
rename to packages/bigscreen/designer/Add.vue
diff --git a/packages/bigscreen/designer/AppDesigner.vue b/packages/bigscreen/designer/AppDesigner.vue
index 55f9920b..f10b6155 100644
--- a/packages/bigscreen/designer/AppDesigner.vue
+++ b/packages/bigscreen/designer/AppDesigner.vue
@@ -5,11 +5,11 @@
 </template>
 
 <script>
-import List from './components/List.vue'
-import Add from './components/Add'
-import SourceData from './components/SourceData'
-import Preview from "./components/preview";
-import DesignDashboard from "./components/Layout";
+import List from './List.vue'
+import Add from './Add.vue'
+import SourceData from './SourceData.vue'
+import Preview from "./preview.vue";
+import DesignDashboard from "./Layout.vue";
 
 export default {
   name: 'AppDesigner',
diff --git a/packages/bigscreen/designer/components/Layout.vue b/packages/bigscreen/designer/Layout.vue
similarity index 99%
rename from packages/bigscreen/designer/components/Layout.vue
rename to packages/bigscreen/designer/Layout.vue
index 0ceb791a..4de5c5fc 100644
--- a/packages/bigscreen/designer/components/Layout.vue
+++ b/packages/bigscreen/designer/Layout.vue
@@ -224,12 +224,12 @@
 
 <script>
 
-import {components} from '../config'
+import {components} from './config'
 import VueRulerTool from 'vue-ruler-tool'
 import VueDraggableResizable from 'vue-draggable-resizable'
 import 'vue-draggable-resizable/dist/VueDraggableResizable.css'
-import DataConfig from './form/DataConfig.vue'
-import ComponentConfig from "./form/componentConfig";
+import DataConfig from './components/DataConfig.vue'
+import ComponentConfig from "./components/componentConfig.vue";
 import {mapActions} from "vuex"
 
 export default {
diff --git a/packages/bigscreen/designer/components/List.vue b/packages/bigscreen/designer/List.vue
similarity index 100%
rename from packages/bigscreen/designer/components/List.vue
rename to packages/bigscreen/designer/List.vue
diff --git a/packages/bigscreen/designer/components/SourceData.vue b/packages/bigscreen/designer/SourceData.vue
similarity index 100%
rename from packages/bigscreen/designer/components/SourceData.vue
rename to packages/bigscreen/designer/SourceData.vue
diff --git a/packages/bigscreen/designer/components/form/DataConfig.vue b/packages/bigscreen/designer/components/DataConfig.vue
similarity index 65%
rename from packages/bigscreen/designer/components/form/DataConfig.vue
rename to packages/bigscreen/designer/components/DataConfig.vue
index a761ff75..9fa04085 100644
--- a/packages/bigscreen/designer/components/form/DataConfig.vue
+++ b/packages/bigscreen/designer/components/DataConfig.vue
@@ -13,7 +13,7 @@
         </config-item>
       </ai-fold>
       <ai-fold title="标记点连线">
-        <ai-dialog-btn :modal="false" dialog-title="设置标记点连线" :customFooter="false" @onConfirm="savePolylines"
+        <ai-dialog-btn :modal="false" dialog-title="设置标记点连线" :customFooter="false" @confirm="savePolylines"
                        @open="handleMapPolylines">
           <code-editor slot="btn" readonly :value="JSON.stringify(options.staticData.polylines, null, 2)" lang="json"
                        theme="github" width="100%" height="250" placeholder="测试默认值"/>
@@ -36,25 +36,8 @@
         <config-item label="图表模板">
           <chart-picker v-model="chart.chart"/>
         </config-item>
-        <config-item label="数据类型">
-          <ai-select v-model="chart.dataType" placeholder="请选择数据类型" :select-list="dataTypes"/>
-        </config-item>
-        <config-item v-if="chart.dataType=='dynamicData'" label="数据源">
-          <ai-select v-model="chart.sourceDataId" placeholder="请选择数据源" :select-list="sourceData"
-                     :prop="{label:'description'}"/>
-        </config-item>
-        <div class="layout-config__code" v-else-if="chart.dataType === 'staticData'">
-          <ai-dialog-btn :modal="false" dialog-title="编辑器" :customFooter="false"
-                         @confirm="chart.data=JSON.parse(json)"
-                         @open="json=JSON.stringify(chart.data||null)">
-            <code-editor slot="btn" readonly :value="JSON.stringify(chart.data)" lang="json" theme="github"
-                         width="100%" height="250"/>
-            <code-editor v-model="json" lang="json" theme="github" width="100%" height="440"/>
-          </ai-dialog-btn>
-        </div>
-        <config-item label="接口地址" v-else-if="chart.dataType=='apiData'">
-          <el-input size="mini" v-model="chart.api"/>
-        </config-item>
+        <datasource-picker v-model="chart.ds" :instance="instance"
+                           @input="chart={...chart,...chart.ds},$emit('change')"/>
         <config-item label="数据维度" v-if="chart.dataType !== 'staticData'">
           <code-editor v-model="chart.djson" lang="json" theme="github" width="100%" height="100"
                        placeholder="参照echarts配置数据维度,为一个数组,数组的第一个值为维度值"
@@ -71,24 +54,7 @@
     </div>
     <div class="layout-config__group" v-else>
       <h2>基础设置</h2>
-      <config-item label="数据类型">
-        <ai-select v-model="options.dataType" placeholder="请选择数据类型" :select-list="dataTypes"/>
-      </config-item>
-      <div class="layout-config__code" v-if="options.dataType === 'staticData'">
-        <ai-dialog-btn :modal="false" dialog-title="编辑器" :customFooter="false" @onConfirm="onConfirm"
-                       @open="showEditor">
-          <code-editor slot="btn" readonly :value="JSON.stringify(options.staticData)" lang="json" theme="github"
-                       width="100%" height="250"/>
-          <code-editor v-model="json" lang="json" theme="github" width="100%" height="440"/>
-        </ai-dialog-btn>
-      </div>
-      <config-item v-else-if="options.dataType === 'dynamicData'" label="数据源">
-        <ai-select v-model="options.sourceDataId" placeholder="请选择数据源" :select-list="sourceData"
-                   :prop="{label:'description'}" @change="onDataChange"/>
-      </config-item>
-      <config-item label="接口地址" v-else>
-        <el-input size="mini" v-model="options.api" @change="onApiChange"/>
-      </config-item>
+      <datasource-picker v-model="options" :instance="instance" @input="$emit('change')"/>
     </div>
     <div v-if="options.dataType!='staticData'&&options.type=='monitor'&&['cmcc','slw'].includes(options.monitorType)"
          class="layout-config__group">
@@ -163,8 +129,10 @@ import 'brace/theme/github';
 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} from "../../config";
+import ChartPicker from "./chartPicker.vue";
+import {DvCompData} from "../config";
+import ConfigItem from "./configItem.vue";
+import DatasourcePicker from "./datasourcePicker.vue";
 
 export default {
   name: 'dataConfig',
@@ -181,8 +149,6 @@ export default {
     return {
       dataTypes: Object.entries(DvCompData.types).map(e => ({id: e[0], label: e[1]})),
       json: "",
-      sourceDataId: '',
-      sourceData: [],
       keys: [],
       monitorList: [],
       list: [],
@@ -194,21 +160,12 @@ export default {
     markers: v => v.options.staticData?.markers || [],
   },
   components: {
+    DatasourcePicker,
+    ConfigItem,
     ChartPicker,
     AiFold,
     AiDialogBtn,
     CodeEditor,
-    configItem: {
-      props: {
-        label: String
-      },
-      render(h) {
-        return h('div', {class: 'layout-config__item'}, [
-          h('label', this.label),
-          h('div', {class: 'layout-config__item--right fill'}, this.$slots.default)
-        ])
-      }
-    }
   },
   created() {
     if (this.options.type == "map" && Array.isArray(this.options.staticData)) {//处理历史数据,并更新最新数据结构
@@ -218,7 +175,6 @@ export default {
     }
   },
   mounted() {
-    this.getDataList()
     if ((this.options.dataY && this.options.dataY.length && this.options.dataX) || this.options.type === 'monitor') {
       const api = this.options.dataType === 'apiData' ? this.options.api : `/app/appdiylargescreen/statisticsByLsid?id=${this.options.sourceDataId}`
       this.instance.post(api).then(res => {
@@ -246,10 +202,6 @@ export default {
     }
   },
   methods: {
-    showEditor() {
-      this.json = JSON.stringify(this.options.staticData, null, 2)
-    },
-
     onMoniterId(e) {
       this.instance.post(`/app/appzyvideoequipment/getWebSdkUrl?deviceId=${e}`).then(res => {
         if (res.code == 0) {
@@ -257,64 +209,6 @@ export default {
         }
       })
     },
-
-    getDataList() {
-      this.instance.post(`/app/appdiylargescreen/allDatasourceByPage`, null, {
-        params: {
-          current: 1,
-          size: 10000
-        }
-      }).then(res => {
-        if (res.code == 0) {
-          this.sourceData = res.data.records
-        }
-      })
-    },
-
-    onApiChange() {
-      this.options.dataX = ''
-      this.options.dataY = []
-      this.instance.post(this.options.api).then(res => {
-        if (res.code == 0) {
-          if (res.data.length) {
-            if (this.options.type === 'table' || this.options.type === 'AiDvTable') {
-              const keys = Object.keys(res.data[0])
-              const list = res.data
-              this.options.apiData = keys.map(v => {
-                let obj = {}
-                list.forEach((item, index) => {
-                  obj[`v${index}`] = item[v]
-                })
-
-                return {
-                  row: v,
-                  ...obj
-                }
-              })
-            } else if (this.options.type === 'summary') {
-              if (this.options.display === 'summary9') {
-                this.options.apiData = res.data
-              } else {
-                this.options.apiData = Object.keys(res.data[0]).map(item => {
-                  return {
-                    key: item,
-                    value: res.data[0][item]
-                  }
-                })
-              }
-            } else if (this.options.type === 'monitor') {
-              this.monitorList = res.data
-            } else {
-              this.list = res.data
-              this.keys = Object.keys(res.data[0])
-            }
-          }
-        } else {
-          this.options.dynamicData = []
-        }
-      })
-    },
-
     onChooseChange() {
       let arr = []
       if (this.options.dataX && this.options.dataY.length) {
@@ -328,53 +222,9 @@ export default {
             ...obj
           })
         })
-
         this.options[this.options.dataType] = arr
       }
     },
-
-    onDataChange(e) {
-      this.options.dataX = ''
-      this.options.dataY = []
-      this.instance.post(`/app/appdiylargescreen/statisticsByLsid?id=${e}`).then(res => {
-        if (res.code == 0) {
-          if (res.data.length) {
-            if (this.options.type === 'table' || this.options.type === 'AiDvTable') {
-              const keys = Object.keys(res.data[0])
-              const list = res.data
-              this.options.dynamicData = keys.map(v => {
-                let obj = {}
-                list.forEach((item, index) => {
-                  obj[`v${index}`] = item[v]
-                })
-
-                return {
-                  row: v,
-                  ...obj
-                }
-              })
-            } else if (this.options.type === 'summary') {
-              this.options.dynamicData = Object.keys(res.data[0]).map(item => {
-                return {
-                  key: item,
-                  value: res.data[0][item]
-                }
-              })
-            } else {
-              this.list = res.data
-              this.keys = Object.keys(res.data[0])
-            }
-          } else {
-            this.options.dynamicData = []
-          }
-        }
-      })
-    },
-
-    onConfirm() {
-      this.$set(this.options, 'staticData', JSON.parse(this.json))
-      this.$emit('change')
-    },
     handleMapMarker(v = {}, index) {
       this.form = this.$copy({...v, index})
       this.showMapEditor = true
@@ -423,8 +273,6 @@ export default {
 }
 
 .layout-config__group--wrapper {
-  .layout-config__code .bin-ace-editor {
-  }
 
   :deep(.layout-config__group) {
     padding: 10px 10px 20px;
@@ -434,10 +282,6 @@ export default {
       border: none;
     }
 
-    .layout-config__code {
-      position: relative;
-      padding-left: 10px;
-    }
 
     & > h2 {
       margin-bottom: 20px;
diff --git a/packages/bigscreen/designer/components/form/componentConfig.vue b/packages/bigscreen/designer/components/componentConfig.vue
similarity index 100%
rename from packages/bigscreen/designer/components/form/componentConfig.vue
rename to packages/bigscreen/designer/components/componentConfig.vue
diff --git a/packages/bigscreen/designer/components/configItem.vue b/packages/bigscreen/designer/components/configItem.vue
new file mode 100644
index 00000000..657899b0
--- /dev/null
+++ b/packages/bigscreen/designer/components/configItem.vue
@@ -0,0 +1,86 @@
+<template>
+  <section class="configItem">
+    <label v-text="label"/>
+    <div class="content fill">
+      <slot v-if="$slots.default"/>
+      <div v-else-if="value" v-html="value"/>
+    </div>
+  </section>
+</template>
+<script>
+export default {
+  name: "configItem",
+  props: {
+    label: String,
+    value: {default: null}
+  },
+  data() {
+    return {}
+  },
+  methods: {},
+}
+</script>
+<style scoped lang="scss">
+.configItem {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 10px;
+
+  &:last-child {
+    margin-bottom: 0;
+  }
+
+  & > label {
+    flex-shrink: 0;
+    width: 60px;
+    color: #FFFFFF;
+    font-size: 12px;
+    text-align: right;
+  }
+
+  .el-select .el-tag {
+    color: #fff;
+    background: transparent;
+  }
+
+  .el-input__icon {
+    color: #fff;
+  }
+
+  .el-switch__label {
+    color: #fff;
+  }
+
+  .el-select,.ai-select {
+    width: 100%;
+
+    &:last-child {
+      margin-right: 0;
+    }
+
+    input {
+      background: #262C33;
+      font-size: 12px;
+      color: #fff;
+      border: 1px solid #030411;
+    }
+
+    .el-input__icon {
+      color: #fff;
+    }
+  }
+
+  :deep(.el-collapse) {
+    height: 18px;
+  }
+
+  .content {
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+    text-align: right;
+    margin-left: 30px;
+  }
+}
+</style>
diff --git a/packages/bigscreen/designer/components/datasourcePicker.vue b/packages/bigscreen/designer/components/datasourcePicker.vue
new file mode 100644
index 00000000..766feafc
--- /dev/null
+++ b/packages/bigscreen/designer/components/datasourcePicker.vue
@@ -0,0 +1,75 @@
+<template>
+  <section class="datasourcePicker">
+    <config-item label="数据类型">
+      <ai-select v-model="options.dataType" placeholder="请选择数据类型" :select-list="dataTypes"/>
+    </config-item>
+    <div class="codeEditor" v-if="['htmlData','staticData'].includes(options.dataType)">
+      <ai-dialog-btn :modal="false" dialog-title="编辑器" :customFooter="false"
+                     @confirm="changeData" @open="content=contentstr">
+        <code-editor slot="btn" readonly :value="contentstr" :lang="dataLang" theme="github" width="100%" height="250"/>
+        <code-editor v-model="content" :lang="dataLang" theme="github" width="100%" height="440" wrap/>
+      </ai-dialog-btn>
+    </div>
+    <config-item v-else-if="options.dataType === 'dynamicData'" label="数据源">
+      <ai-select v-model="options.sourceDataId" placeholder="请选择数据源" :instance="instance"
+                 :prop="{label:'description'}" @change="changeData"
+                 action="/app/appdiylargescreen/allDatasourceByPage"/>
+    </config-item>
+    <config-item label="接口地址" v-else-if="options.dataType === 'apiData'">
+      <el-input size="small" v-model="options.api" @change="changeData" placeholder="请输入数据接口URL"/>
+    </config-item>
+  </section>
+</template>
+<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';
+
+export default {
+  name: "datasourcePicker",
+  components: {ConfigItem, AiDialogBtn, CodeEditor},
+  model: {
+    event: "input",
+    prop: "options"
+  },
+  props: {
+    options: Object,
+    instance: Function
+  },
+  data() {
+    return {
+      dataTypes: Object.entries(DvCompData.types).map(e => ({id: e[0], label: e[1]})),
+      content: "",
+      sourceData: []
+    }
+  },
+  computed: {
+    contentstr: v => JSON.stringify(v.options.staticData),
+    dataLang: v => v.options.dataType == 'htmlData' ? 'html' : 'json'
+  },
+  methods: {
+    updateOptions() {
+      this.$emit("input", this.options)
+    },
+    changeData() {
+      new DvCompData(this.options.dataType, this.options, this.instance).getData().then(data => {
+        this.options[this.options.dataType] = data
+        this.updateOptions()
+      })
+    }
+  },
+}
+</script>
+<style scoped lang="scss">
+.datasourcePicker {
+  .codeEditor {
+    position: relative;
+    padding-left: 10px;
+  }
+}
+</style>
diff --git a/packages/bigscreen/designer/config.js b/packages/bigscreen/designer/config.js
index 9310e216..ca974594 100644
--- a/packages/bigscreen/designer/config.js
+++ b/packages/bigscreen/designer/config.js
@@ -699,7 +699,7 @@ export {components}
  */
 export class DvCompData {
   static types = {
-    staticData: "静态数据", dynamicData: "动态数据", apiData: "接口数据"
+    staticData: "静态数据", dynamicData: "动态数据", apiData: "接口数据", htmlData: "HTML数据"
   }
 
   constructor(type, dataConfig = {}, instance) {
@@ -710,8 +710,9 @@ export class DvCompData {
 
   getData() {
     return this.type == 'staticData' ? this.getStaticData() :
-      this.type == 'dynamicData' ? this.getDynamicData() :
-        this.type == 'apiData' ? this.getApiData() : []
+      this.type == 'htmlData' ? this.getStaticData() :
+        this.type == 'dynamicData' ? this.getDynamicData() :
+          this.type == 'apiData' ? this.getApiData() : []
   }
 
   getDynamicData() {
diff --git a/packages/bigscreen/designer/components/preview.vue b/packages/bigscreen/designer/preview.vue
similarity index 100%
rename from packages/bigscreen/designer/components/preview.vue
rename to packages/bigscreen/designer/preview.vue