bin-code-editor=>bin-ace-editor

packages/bigscreen/designer/components/form/DataConfig.vue

@@ -1,12 +1,12 @@
 <template>
   <div class="layout-config__group--wrapper">
     <ai-dialog
-      append-to-body
+        append-to-body
-      :visible.sync="isShowEditor"
+        :visible.sync="isShowEditor"
-      width="1000px"
+        width="1000px"
-      class="layout-config__edit"
+        class="layout-config__edit"
-      title="编辑器"
+        title="编辑器"
-      @onConfirm="onConfirm">
+        @onConfirm="onConfirm">
       <div>
         <code-editor v-model="json" lang="json" theme="github" width="100%" height="440"></code-editor>
       </div>
@@ -18,10 +18,10 @@
         <div class="layout-config__item--right">
           <el-select size="mini" v-model="options.dataType" placeholder="请选择数据类型">
             <el-option
-              v-for="item in dataTypes"
+                v-for="item in dataTypes"
-              :key="item.value"
+                :key="item.value"
-              :label="item.label"
+                :label="item.label"
-              :value="item.value">
+                :value="item.value">
             </el-option>
           </el-select>
         </div>
@@ -36,10 +36,10 @@
           <div class="layout-config__item--right">
             <el-select size="mini" v-model="options.sourceDataId" placeholder="请选择数据源" @change="onDataChange">
               <el-option
-                v-for="item in sourceData"
+                  v-for="item in sourceData"
-                :key="item.id"
+                  :key="item.id"
-                :label="item.description"
+                  :label="item.description"
-                :value="item.id">
+                  :value="item.id">
               </el-option>
             </el-select>
           </div>
@@ -63,17 +63,18 @@
         </div>
       </div>
     </div>
-    <div class="layout-config__group" v-if="options.dataType !== 'staticData' && options.type === 'monitor' && (options.monitorType === 'cmcc' || options.monitorType === 'slw')">
+    <div class="layout-config__group"
+         v-if="options.dataType !== 'staticData' && options.type === 'monitor' && (options.monitorType === 'cmcc' || options.monitorType === 'slw')">
       <h2>字段设置</h2>
       <div class="layout-config__item">
         <label>监控视频</label>
         <div class="layout-config__item--right">
           <el-select size="mini" v-model="options.moniterId" placeholder="请选择监控视频" @change="onMoniterId">
             <el-option
-              v-for="(item, index) in monitorList"
+                v-for="(item, index) in monitorList"
-              :key="index"
+                :key="index"
-              :label="item.name"
+                :label="item.name"
-              :value="item.id">
+                :value="item.id">
             </el-option>
           </el-select>
         </div>
@@ -86,10 +87,10 @@
         <div class="layout-config__item--right">
           <el-select size="mini" v-model="options.dataX" placeholder="请选择X轴" @change="onChooseChange">
             <el-option
-              v-for="(item, index) in keys"
+                v-for="(item, index) in keys"
-              :key="index"
+                :key="index"
-              :label="item"
+                :label="item"
-              :value="item">
+                :value="item">
             </el-option>
           </el-select>
         </div>
@@ -97,12 +98,13 @@
       <div class="layout-config__item">
         <label>Y轴设置</label>
         <div class="layout-config__item--right">
-          <el-select size="mini" multiple :multiple-limit="options.type.indexOf('pie') > -1 ? 1 : 100" v-model="options.dataY" collapse-tags placeholder="请选择Y轴" @change="onChooseChange">
+          <el-select size="mini" multiple :multiple-limit="options.type.indexOf('pie') > -1 ? 1 : 100" v-model="options.dataY" collapse-tags placeholder="请选择Y轴"
+                     @change="onChooseChange">
             <el-option
-              v-for="(item, index) in keys"
+                v-for="(item, index) in keys"
-              :key="index"
+                :key="index"
-              :label="item"
+                :label="item"
-              :value="item">
+                :value="item">
             </el-option>
           </el-select>
         </div>
@@ -112,295 +114,318 @@
 </template>
 
 <script>
-  import CodeEditor from 'bin-ace-editor'
+import CodeEditor from 'bin-ace-editor'
-  require('brace/mode/json')
+import 'brace/mode/json'
-  require('brace/snippets/json')
+import 'brace/snippets/json';
-  require('brace/theme/github')
+import 'brace/theme/github';
-  require('brace/theme/monokai')
+import 'brace/theme/monokai';
 
-  export default {
+export default {
-    name: 'dataConfig',
+  name: 'dataConfig',
 
-    props: {
+  props: {
-      options: Object,
+    options: Object,
-      instance: Function,
+    instance: Function,
-      dict: Object,
+    dict: Object,
-      params: Object,
+    params: Object,
-    },
+  },
 
-    data () {
+  data() {
-      return {
+    return {
-        dataTypes: [
+      dataTypes: [
-          {
+        {
-            value: 'staticData',
+          value: 'staticData',
-            label: '静态数据'
+          label: '静态数据'
-          },
+        },
-          {
+        {
-            value: 'dynamicData',
+          value: 'dynamicData',
-            label: '动态数据'
+          label: '动态数据'
-          },
+        },
-          {
+        {
-            value: 'apiData',
+          value: 'apiData',
-            label: '接口'
+          label: '接口'
-          }
-        ],
-        isShowEditor: false,
-        json: {},
-        sourceDataId: '',
-        sourceData: [],
-        keys: [],
-        monitorList: [],
-        list: [],
-        jsonData: `{"title":"测试json数据","children":[{"name":"子项名称", "desc":"子项说明" },{"name":"子项名称1", "desc":"子项说明1" }]}`
-      }
-    },
-
-    components: {
-      CodeEditor
-    },
-
-    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 => {
-          if (res.code == 0) {
-            if (res.data.length && this.options.type !== 'monitor') {
-              this.list = res.data
-              this.keys = Object.keys(res.data[0])
-
-              this.$nextTick(() => {
-                this.onChooseChange()
-              })
-            } else if (this.options.type === 'monitor') {
-              this.monitorList = res.data
-
-              if (this.options.src) {
-                const obj = res.data.filter(v => this.options.title === v.name)
-
-                if (obj.length) {
-                  this.options.src = obj[0].url
-                }
-              }
-            }
-          }
-        })
-      }
-    },
-
-    methods: {
-      showEditor () {
-        this.json = JSON.stringify(this.options.staticData, null, 2)
-        this.isShowEditor = true
-      },
-
-      onMoniterId (e) {
-        this.instance.post(`/app/appzyvideoequipment/getWebSdkUrl?deviceId=${e}`).then(res => {
-          if (res.code == 0) {
-            this.options.src = JSON.parse(res.data).url
-          }
-        })
-      },
-
-      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') {
-                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) {
-          this.list.forEach(item => {
-            let obj = {}
-            this.options.dataY.forEach(v => {
-              obj[v] = item[v]
-            })
-            arr.push({
-              [this.options.dataX]: item[this.options.dataX],
-              ...obj
-            })
-          })
-
-          this.options[this.options.dataType] = arr
         }
-      },
+      ],
+      isShowEditor: false,
+      json: {},
+      sourceDataId: '',
+      sourceData: [],
+      keys: [],
+      monitorList: [],
+      list: [],
+      jsonData: `{"title":"测试json数据","children":[{"name":"子项名称", "desc":"子项说明" },{"name":"子项名称1", "desc":"子项说明1" }]}`
+    }
+  },
 
-      onDataChange (e) {
+  components: {
-        this.options.dataX = ''
+    CodeEditor
-        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') {
-                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 {
+  mounted() {
-                    row: v,
+    this.getDataList()
-                    ...obj
+
-                  }
+    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 => {
+        if (res.code == 0) {
+          if (res.data.length && this.options.type !== 'monitor') {
+            this.list = res.data
+            this.keys = Object.keys(res.data[0])
+
+            this.$nextTick(() => {
+              this.onChooseChange()
+            })
+          } else if (this.options.type === 'monitor') {
+            this.monitorList = res.data
+
+            if (this.options.src) {
+              const obj = res.data.filter(v => this.options.title === v.name)
+
+              if (obj.length) {
+                this.options.src = obj[0].url
+              }
+            }
+          }
+        }
+      })
+    }
+  },
+
+  methods: {
+    showEditor() {
+      this.json = JSON.stringify(this.options.staticData, null, 2)
+      this.isShowEditor = true
+    },
+
+    onMoniterId(e) {
+      this.instance.post(`/app/appzyvideoequipment/getWebSdkUrl?deviceId=${e}`).then(res => {
+        if (res.code == 0) {
+          this.options.src = JSON.parse(res.data).url
+        }
+      })
+    },
+
+    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') {
+              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]
                 })
-              } else if (this.options.type === 'summary') {
+
-                this.options.dynamicData = Object.keys(res.data[0]).map(item => {
+                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 {
-                this.list = res.data
-                this.keys = Object.keys(res.data[0])
               }
+            } else if (this.options.type === 'monitor') {
+              this.monitorList = res.data
             } else {
-              this.options.dynamicData = []
+              this.list = res.data
+              this.keys = Object.keys(res.data[0])
             }
           }
-        })
+        } else {
-      },
+          this.options.dynamicData = []
+        }
+      })
+    },
 
-      onConfirm () {
+    onChooseChange() {
-        this.$set(this.options, 'staticData', JSON.parse(this.json))
+      let arr = []
-        this.isShowEditor = false
+      if (this.options.dataX && this.options.dataY.length) {
-        this.$emit('change')
+        this.list.forEach(item => {
+          let obj = {}
+          this.options.dataY.forEach(v => {
+            obj[v] = item[v]
+          })
+          arr.push({
+            [this.options.dataX]: item[this.options.dataX],
+            ...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') {
+              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.isShowEditor = false
+      this.$emit('change')
     }
   }
+}
 </script>
 
 <style lang="scss">
-   .el-dialog__body {
+.el-dialog__body {
-      .jsoneditor-vue {
+  .jsoneditor-vue {
-        height: 480px;
+    height: 480px;
 
-        .jsoneditor-poweredBy {
+    .jsoneditor-poweredBy {
-          display: none;
+      display: none;
+    }
+  }
+}
+
+.layout-config__group--wrapper {
+  .layout-config__code .bin-ace-editor {
+  }
+
+  .layout-config__group {
+    padding: 10px 10px 20px;
+    border-bottom: 1px solid #000000;
+
+    &:last-child {
+      border: none;
+    }
+
+    .layout-config__code {
+      position: relative;
+      padding-left: 10px;
+
+      .layout-config__code--btn {
+        position: absolute;
+        right: 0;
+        top: 0;
+        color: gray;
+        z-index: 111;
+
+        &:hover {
+          opacity: 0.8;
         }
       }
     }
-  .layout-config__group--wrapper {
+
-    .layout-config__code .bin-ace-editor {
+    & > h2 {
+      margin-bottom: 20px;
+      color: #FFFFFF;
+      font-size: 15px;
+      font-weight: 700;
+    }
+  }
+
+  .layout-config__item {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 10px;
+
+    &:last-child {
+      margin-bottom: 0;
     }
 
-    .layout-config__group {
+    label {
-      padding: 10px 10px 20px;
+      flex-shrink: 0;
-      border-bottom: 1px solid #000000;
+      width: 60px;
-
+      color: #FFFFFF;
-      &:last-child {
+      font-size: 12px;
-        border: none;
+      text-align: right;
-      }
-
-      .layout-config__code {
-        position: relative;
-        padding-left: 10px;
-
-        .layout-config__code--btn {
-          position: absolute;
-          right: 0;
-          top: 0;
-          color: gray;
-          z-index: 111;
-
-          &:hover {
-            opacity: 0.8;
-          }
-        }
-      }
-
-      & > h2 {
-        margin-bottom: 20px;
-        color: #FFFFFF;
-        font-size: 15px;
-        font-weight: 700;
-      }
     }
 
-    .layout-config__item {
+    .layout-config__item--right {
       display: flex;
       align-items: center;
-      justify-content: space-between;
+      justify-content: flex-end;
-      margin-bottom: 10px;
+      width: 200px;
+      text-align: right;
+    }
+
+    .el-select .el-tag {
+      color: #fff;
+      background: transparent;
+    }
+
+    input {
+      background: #262C33;
+      font-size: 12px;
+      color: #fff;
+      border: 1px solid #030411;
+    }
+
+    .el-input__icon {
+      color: #fff;
+    }
+
+    .el-switch__label {
+      color: #fff;
+    }
+
+    .el-select {
+      width: 100%;
 
       &:last-child {
-        margin-bottom: 0;
+        margin-right: 0;
-      }
-
-      label {
-        flex-shrink: 0;
-        width: 60px;
-        color: #FFFFFF;
-        font-size: 12px;
-        text-align: right;
-      }
-
-      .layout-config__item--right {
-        display: flex;
-        align-items: center;
-        justify-content: flex-end;
-        width: 200px;
-        text-align: right;
-      }
-
-      .el-select .el-tag {
-        color: #fff;
-        background: transparent;
       }
 
       input {
@@ -413,29 +438,7 @@
       .el-input__icon {
         color: #fff;
       }
-
-      .el-switch__label {
-        color: #fff;
-      }
-
-      .el-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;
-        }
-      }
     }
   }
+}
 </style>

packages/extra/AppModConfig/AppModConfig.vue

@@ -36,7 +36,6 @@
             <code-editor v-model="form.config" auto-format :lint="false"/>
           </el-form-item>
         </el-form>
-
         <el-row type="flex" justify="center" class="footer">
           <el-button @click="drawer=false">取消</el-button>
           <el-button type="primary" @click="submit">提交</el-button>
@@ -47,8 +46,11 @@
 </template>
 
 <script>
-import {CodeEditor} from 'bin-code-editor'
+import {CodeEditor} from 'bin-ace-editor'
-import 'bin-code-editor/lib/styles/index.css'
+import 'brace/mode/json'
+import 'brace/snippets/json';
+import 'brace/theme/github';
+import 'brace/theme/monokai';
 
 const label = "应用定制配置";
 export default {