SOURCE

console 命令行工具 X clear

                    
>
console
  new Vue({
    el: '#app',
    data() {
      return {
        key: '',
        baseList: baseList,
        menuFlag: true,
        dialogVisible: false,
        CodeMirrorEditor: {},
        gradeFlag: false,
        relaod: true,
        form: {},
        dicOption: dicOption,
        tableOption: tableOption,
        colorOption: colorOption,
        config: {
          name: 'avuex数据大屏',
          width: 1920,
          height: 1080,
          scale: 1,
          backgroundImage: 'https://sugar.bce.baidu.com/static/img-templet/background-2.png',
          gradeShow: false,
          gradeLen: 30,
        },
        active: -1,
        list: list
      }
    },
    computed: {
      zIndexList: {
        set(val) {
          const leng = val.length;
          val.forEach((ele, index) => {
            const zIndex = leng - index;
            this.$set(this.list[ele.index], 'zIndex', zIndex)
          })
        },
        get() {
          let list = [];
          list = this.list.map(ele => {
            return {
              index: ele.index,
              title: ele.title,
              zIndex: ele.zIndex
            }
          })
          list.sort(compare("zIndex"));
          return list;
        }
      },
      listLen() {
        return this.list.length || 0;
      },
      activeComponent() {
        return this.activeObj.component || {}
      },
      activeKey() {
        if (this.activeComponent.name === 'table') {
          return this.activeComponent.option.column
        } else if (['bar', 'line', 'pie'].includes(this.activeComponent.name)) {
          return this.activeComponent.option.barColor
        }
      },
      activeObj() {
        return this.list[this.active] || {}
      },
      styleName() {
        const scale = this.config.scale;
        return {
          transform: `scale(${scale / 100}, ${scale / 100})`,
          background: `url(${this.config.backgroundImage}) 0% 0% / 100% 100% rgb(3, 12, 59)`,
          width: this.setPx(this.config.width),
          height: this.setPx(this.config.height)
        }
      },
      gradeLenStyle() {
        return {
          backgroundSize: `${this.setPx(this.config.gradeLen)} ${this.setPx(this.config.gradeLen)},${this.setPx(this.config.gradeLen)} ${this.setPx(this.config.gradeLen)}`
        }
      }
    },
    created() {
      this.initData();
    },
    mounted() {
      this.setResize();
    },
    watch: {
      menuFlag(val) {
        this.$nextTick(() => {
          this.setResize();
        })
      },
      active(val) {
        this.list.forEach((ele, index) => {
          if (this.$refs['item_' + index]) {
            if (index === val) {
              this.$refs['item_' + index][0].setActive(true)
            } else {
              this.$refs['item_' + index][0].setActive(false)
            }
          }

        });
      },
    },
    methods: {
      initData() {
        this.list.forEach((ele, index) => {
          this.$set(this.list, index, Object.assign(ele, {
            index,
            zIndex: (this.listLen - 1) - index
          }));
        })
      },
      setResize() {
        this.config.scale = (this.$refs.wrapper.offsetWidth / this.config.width) * 100
      },
      formatTooltip(val) {
        return parseInt(val);
      },
      handleMouseDown() {
        this.active = -1;
      },
      handleChange(index) {
        this.active = index;
      },
      handleFocus() {
        this.gradeFlag = true;
      },
      handleBlur() {
        this.gradeFlag = false;
      },
      handleDel(index, zIndex) {
        const obj = this.list[index]
        this.$confirm(`是否删除<<${obj.name}>>图层?`, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.active = -1;
          this.list.splice(index, 1);
          this.relaod = false;
          this.$nextTick(() => {
            this.relaod = true;
          })
        }).catch(() => {

        });
      },
      handleCopy(index, zIndex) {
        const obj = this.list[index]
        this.$confirm(`是否复制<<${obj.name}>>图层?`, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.addCompoment(obj);
        }).catch(() => {

        });
      },
      handleResize({ index, width, height }) {
        const ele = this.list[index].component;
        this.$set(ele, 'width', width)
        this.$set(ele, 'height', height)

      },
      handlePostion({ index, left, top }) {
        const ele = this.list[index];
        this.$set(ele, 'left', left)
        this.$set(ele, 'top', top)
      },
      rowSave(row, done) {
        this.activeKey.push(row);
        done()
      },
      rowDel(row, index) {
        this.activeKey.splice(index, 1);
      },
      rowUpdate(row, index, done) {
        this.activeKey.splice(index, 1, row);
        done()
      },
      addCompoment(option) {
        const obj = this.deepClone(option);
        obj.left = 0;
        obj.top = 0;
        obj.zIndex = this.listLen;
        obj.index = this.listLen;
        this.list.push(obj);
      },
      handleView() {
        this.menuFlag = false;
        this.active = -1;
      },
      handleBuild() {
        this.dialogVisible = true;
        this.$nextTick(() => {
          this.CodeMirrorEditor = CodeMirror.fromTextArea(this.$refs.code, {
            lineNumbers: true,
            mode: 'application/json',
            gutters: ['CodeMirror-lint-markers'],
            theme: 'rubyblue',
            lint: true
          });
          this.CodeMirrorEditor.setValue(JSON.stringify(this.list, null, 2))
        })
      },
    }
  })
<!DOCTYPE html>
<html class="no-js">
  
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <title>
    </title>
    <meta name="description" content="" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.0/animate.min.css"
    />
    <link rel="stylesheet" href="https://avuex.avue.top/lib/index.css" />
    <link rel="stylesheet" href="https://avuex.avue.top/cdn/codemirror/codemirror.css"
    />
    <link rel="stylesheet" href="https://avuex.avue.top/cdn/codemirror/theme/rubyblue.css"
    />
    <link rel="stylesheet" href="https://avuex.avue.top/cdn/codemirror/addon/lint/lint.css"
    />
    <script src="https://avuex.avue.top/cdn/codemirror/codemirror.js">
    </script>
    <script src="https://avuex.avue.top/cdn/codemirror/addon/lint/lint.js">
    </script>
    <script src="https://avuex.avue.top/cdn/codemirror/mode/javascript/javascript.js">
    </script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.18.0/axios.min.js">
    </script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.7/vue.min.js">
    </script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/element-ui/2.4.9/theme-chalk/index.css"
    />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/element-ui/2.4.9/index.js">
    </script>
    <script src="https://avuex.avue.top/lib/avue.min.js">
    </script>
    <!-- CDNJS :: Sortable (https://cdnjs.com/) -->
    <script src="//cdn.jsdelivr.net/npm/sortablejs@1.8.4/Sortable.min.js">
    </script>
    <!-- CDNJS :: Vue.Draggable (https://cdnjs.com/) -->
    <script src="//cdnjs.cloudflare.com/ajax/libs/Vue.Draggable/2.19.2/vuedraggable.umd.min.js">
    </script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/4.2.1/echarts.min.js">
    </script>
    <script src="https://avuex.avue.top/cdn/draggable/js/colorOption.js">
    </script>
    <script src="https://avuex.avue.top/cdn/draggable/js/listOption.js">
    </script>
    <script src="https://avuex.avue.top/cdn/draggable/js/dicOption.js">
    </script>
    <script src="https://avuex.avue.top/cdn/draggable/js/baseList.js">
    </script>
    <script src="https://avuex.avue.top/cdn/draggable/js/utils.js">
    </script>
  </head>
  
<body>
  <div id="app">
    <el-dialog title="复制代码" :visible.sync="dialogVisible">
      <div class="json-editor">
        <textarea ref="code" name="code"></textarea>
      </div>
    </el-dialog>
    <el-menu mode="horizontal" background-color="#545c64" text-color="#fff" active-text-color="#ffd04b">
      <el-submenu :index="index+''" v-for="(item,index) in baseList" :key="index">
        <template slot="title">{{item.label}}</template>
        <el-menu-item @click="addCompoment(citem.option)" :key="cindex" :index=`${index}-${cindex}`
          v-for="(citem,cindex) in item.children">{{citem.label}}</el-menu-item>
      </el-submenu>
      <el-menu-item index="6" @click="menuFlag=true" v-show="!menuFlag">还原</el-menu-item>
      <el-menu-item index="7" @click="handleView" v-show="menuFlag">预览</el-menu-item>
      <el-menu-item index="8" @click="handleBuild">生成数据</el-menu-item>

    </el-menu>
    <div class="app" :class="{'app--none':!menuFlag}">
      <div class="menu" v-show="menuFlag">
        <p class="title">图层</p>
        <draggable v-model="zIndexList">
          <div class="menu__item" :class="{'menu__item--active':item.index===active}" v-for="(item,index) in zIndexList"
            :key="index" @click="active=item.index">
            {{item.title}}
          </div>
        </draggable>
      </div>
      <div class="wrapper" ref="wrapper">
        <div class="content">
          <div class="container" :style="styleName" ref="container" @mousedown.stop.self="handleMouseDown">
            <div class="grade" v-if="gradeFlag || config.gradeShow" :style="gradeLenStyle"></div>
            <avue-draggable v-if="relaod" :disabled="!menuFlag" :ref="'item_'+index" :id="'item_'+index" :step="2"
              @focus="handleFocus" @postion="handlePostion" :resize="item.resize" @resize="handleResize"
              @blur="handleBlur" @change="handleChange" :index="index" :z-index="item.zIndex"
              v-for="(item,index) in list" :width="item.component.width" :height="item.component.height" :key="index"
              :top="item.top" :left="item.left">
              <img v-if="['img'].includes(item.component.prop)" :src="item.data" draggable="false" />
              <component :id="'component_'+index" :component="item.component" v-else
                :is="'avue-echart-'+item.component.name" :component="item.component" :data="item.data"
                :option="item.component.option" :url="item.url" :time="item.time" :data-Type="item.dataType">
              </component>
              <div slot-scope="scope" slot="menu">
                <i class="el-icon-close" @click="handleDel(scope.index,scope.zIndex)"></i>
                <i class="el-icon-document" @click="handleCopy(scope.index,scope.zIndex)"></i>
              </div>
            </avue-draggable>
          </div>
        </div>
      </div>
      <div class="menu params" v-show="menuFlag">
        <p class="title">操作</p>
        <el-form label-width="100px">
          <template v-if="![undefined].includes(activeComponent.prop)">
            <el-collapse>
              <el-collapse-item title="数据设置" v-if="dicOption.dataList.includes(activeComponent.prop)">
                <el-form-item label="数据类型">
                  <avue-radio v-model="activeObj.dataType" :dic="dicOption.dataType"></avue-radio>
                </el-form-item>
                <el-form-item label="数据值" v-if="activeObj.dataType===0">
                  <avue-input v-model="activeObj.data"></avue-input>
                </el-form-item>
                <template v-if="activeObj.dataType===1">
                  <el-form-item label="接口地址">
                    <avue-input v-model="activeObj.url"></avue-input>
                  </el-form-item>
                  <el-form-item label="刷新时间">
                    <avue-input-number v-model="activeObj.time"></avue-input-number>
                  </el-form-item>
                </template>
              </el-collapse-item>
            </el-collapse>
            <el-form-item label="图层名称">
              <avue-input v-model="activeObj.name"></avue-input>
            </el-form-item>
            <template v-if="activeComponent.prop==='swiper'">
              <el-form-item label="类型">
                <avue-radio v-model="activeComponent.option.type" :dic="dicOption.swiperType"></avue-radio>
              </el-form-item>
              <el-form-item label="轮播时间">
                <avue-input v-model="activeComponent.option.interval"></avue-input>
              </el-form-item>
              <el-form-item label="选择器">
                <avue-radio v-model="activeComponent.option.indicator" :dic="dicOption.swiperIndicator"></avue-radio>
              </el-form-item>
              <el-form-item label="图片透明度">
                <avue-silder v-model="activeComponent.option.opacity"></avue-silder>
              </el-form-item>
            </template>
            <template v-if="activeComponent.prop==='text'">
              <el-form-item label="文本内容">
                <avue-input v-model="activeObj.data"></avue-input>
              </el-form-item>
              <el-form-item label="字体大小">
                <avue-silder v-model="activeComponent.option.fontSize"></avue-silder>
              </el-form-item>
              <el-form-item label="字体颜色">
                <avue-color v-model="activeComponent.option.color"></avue-color>
              </el-form-item>
              <el-form-item label="字体背景">
                <avue-color v-model="activeComponent.option.backgroundColor"></avue-color>
              </el-form-item>
              <el-form-item label="文字粗细">
                <avue-select v-model="activeComponent.option.fontWeight" :dic="dicOption.fontWeight">
                </avue-select>
              </el-form-item>
              <el-form-item label="对齐方式">
                <avue-select v-model="activeComponent.option.textAlign" :dic="dicOption.textAlign">
                </avue-select>
              </el-form-item>
              <el-collapse>
                <el-collapse-item title="跑马灯设置">
                  <el-form-item label="开启">
                    <avue-switch v-model="activeComponent.option.scroll"></avue-switch>
                  </el-form-item>
                  <template v-if="activeComponent.option.scroll">
                    <el-form-item label="滚动速度">
                      <avue-input v-model="activeComponent.option.speed"></avue-input>
                    </el-form-item>
                  </template>
                </el-collapse-item>
                <el-collapse-item title="超链设置">
                  <el-form-item label="开启">
                    <avue-switch v-model="activeComponent.option.link"></avue-switch>
                  </el-form-item>
                  <template v-if="activeComponent.option.link">
                    <el-form-item label="打开方式">
                      <avue-radio v-model="activeComponent.option.linkTarget" :dic="dicOption.target"></avue-radio>
                    </el-form-item>
                    <el-form-item label="超链地址">
                      <avue-input v-model="activeComponent.option.linkHref"></avue-input>
                    </el-form-item>
                  </template>
                </el-collapse-item>
              </el-collapse>
            </template>
            <template v-else-if="activeComponent.prop==='datetime'">
              <el-form-item label="时间格式">
                <avue-select v-model="activeComponent.option.format" :dic="dicOption.format">
                </avue-select>
              </el-form-item>
              <el-form-item label="字体大小">
                <avue-silder v-model="activeComponent.option.fontSize" :max="200"></avue-silder>
              </el-form-item>
              <el-form-item label="字体背景">
                <avue-color v-model="activeComponent.option.backgroundColor"></avue-color>
              </el-form-item>
              <el-form-item label="对其方式">
                <avue-select v-model="activeComponent.option.textAlign" :dic="dicOption.textAlign">
                </avue-select>
              </el-form-item>
              <el-form-item label="文字粗细">
                <avue-select v-model="activeComponent.option.fontWeight" :dic="dicOption.fontWeight">
                </avue-select>
              </el-form-item>
              <el-form-item label="字体颜色">
                <avue-color v-model="activeComponent.option.color"></avue-color>
              </el-form-item>
            </template>
            <template v-else-if="activeComponent.prop==='img'">
              <el-form-item label="缩略图">
                <img :src="activeObj.data" alt="" width="100%" />
              </el-form-item>
              <el-form-item label="图片地址">
                <avue-input v-model="activeObj.data"></avue-input>
              </el-form-item>
            </template>
            <template v-else-if="activeComponent.prop==='progress'">
              <el-form-item label="类型">
                <avue-radio v-model="activeComponent.option.type" :dic="dicOption.line">
                  </avue-select>
              </el-form-item>
              <el-form-item label="字体大小">
                <avue-silder v-model="activeComponent.option.fontSize" :max="200"></avue-silder>
              </el-form-item>
              <el-form-item label="边框大小">
                <avue-silder v-model="activeComponent.option.strokeWidth" :max="50"></avue-silder>
              </el-form-item>
              <el-form-item label="字体颜色">
                <avue-color v-model="activeComponent.option.color"></avue-color>
              </el-form-item>
              <el-form-item label="文字粗细">
                <avue-select v-model="activeComponent.option.fontWeight" :dic="dicOption.fontWeight">
                </avue-select>
              </el-form-item>
              <el-form-item label="边框颜色">
                <avue-color v-model="activeComponent.option.borderColor"></avue-color>
              </el-form-item>
            </template>
            <template v-else-if="activeComponent.prop==='flop'">
              <el-form-item label="字体大小">
                <avue-silder v-model="activeComponent.option.fontSize" :max="200"></avue-silder>
              </el-form-item>
              <el-form-item label="字体颜色">
                <avue-color v-model="activeComponent.option.color"></avue-color>
              </el-form-item>
              <el-form-item label="字体间距">
                <avue-silder v-model="activeComponent.option.split"></avue-silder>
              </el-form-item>
              <el-form-item label="文字粗细">
                <avue-select v-model="activeComponent.option.fontWeight" :dic="dicOption.fontWeight">
                </avue-select>
              </el-form-item>
              <el-form-item label="边框">
                <avue-radio v-model="activeComponent.option.type" :dic="dicOption.border">
                  </avue-select>
              </el-form-item>
              <template v-if="activeComponent.option.type==='img'">
                <el-form-item label="背景图片">
                  <img :src="item" v-for="(item,index) in activeComponent.list" :key="index"
                    @click="activeComponent.option.backgroundImage=item">
                </el-form-item>
              </template>
              <template v-else-if="activeComponent.option.type==='border'">
                <el-form-item label="边框颜色">
                  <avue-color v-model="activeComponent.option.borderColor"></avue-color>
                </el-form-item>
                <el-form-item label="边框宽度">
                  <avue-silder v-model="activeComponent.option.borderWidth" :max="10"></avue-silder>
                </el-form-item>
              </template>
              <el-form-item label="背景颜色">
                <avue-color v-model="activeComponent.option.backgroundColor"></avue-color>
              </el-form-item>
              <el-collapse>
                <el-collapse-item title="前缀设置">
                  <el-form-item label="前缀内容">
                    <avue-input v-model="activeComponent.option.prefixText"></avue-input>
                  </el-form-item>
                  <el-form-item label="对其方式">
                    <avue-select v-model="activeComponent.option.prefixTextAlign" :dic="dicOption.textAlign">
                    </avue-select>
                  </el-form-item>
                  <el-form-item label="间距">
                    <avue-silder v-model="activeComponent.option.prefixSplit"></avue-silder>
                  </el-form-item>
                  <el-form-item label="颜色">
                    <avue-color v-model="activeComponent.option.prefixColor"></avue-color>
                  </el-form-item>
                  <el-form-item label="字体大小">
                    <avue-silder v-model="activeComponent.option.prefixFontSize" :max="200"></avue-silder>
                  </el-form-item>
                </el-collapse-item>
                <el-collapse-item title="后缀设置">
                  <el-form-item label="后缀内容">
                    <avue-input v-model="activeComponent.option.suffixText"></avue-input>
                  </el-form-item>
                  <el-form-item label="对其方式">
                    <avue-select v-model="activeComponent.option.suffixTextAlign" :dic="dicOption.textAlign">
                    </avue-select>
                  </el-form-item>
                  <el-form-item label="间距">
                    <avue-silder v-model="activeComponent.option.suffixSplit"></avue-silder>
                  </el-form-item>
                  <el-form-item label="颜色">
                    <avue-color v-model="activeComponent.option.suffixColor"></avue-color>
                  </el-form-item>
                  <el-form-item label="字体大小">
                    <avue-silder v-model="activeComponent.option.suffixFontSize" :max="200"></avue-silder>
                  </el-form-item>
                </el-collapse-item>
              </el-collapse>
            </template>
            <template v-else-if="activeComponent.prop==='table'">
              <el-form-item label="表头颜色">
                <avue-color type="textarea" v-model="activeComponent.style.headerColor"></avue-color>
              </el-form-item>
              <el-form-item label="表头背景">
                <avue-color type="textarea" v-model="activeComponent.style.headerBackgroud"></avue-color>
              </el-form-item>
              <el-form-item label="字体位置">
                <avue-select v-model="activeComponent.style.headerTextAlign" :dic="dicOption.textAlign">
                </avue-select>
              </el-form-item>
              </el-form-item>
              <el-form-item label="文字颜色">
                <avue-color type="textarea" v-model="activeComponent.style.bodyColor"></avue-color>
              </el-form-item>
              <el-form-item label="表格背景">
                <avue-color type="textarea" v-model="activeComponent.style.bodyBackgroud"></avue-color>
              </el-form-item>
              <el-form-item label="字体位置">
                <avue-select v-model="activeComponent.style.bodyTextAlign" :dic="dicOption.textAlign">
                </avue-select>
              </el-form-item>
              </el-form-item>
              <el-form-item label="分割线">
                <avue-color type="textarea" v-model="activeComponent.style.borderColor"></avue-color>
              </el-form-item>
              <avue-crud :option="tableOption" :data="activeComponent.option.column" @row-save="rowSave"
                @row-del="rowDel" @row-update="rowUpdate"></avue-crud>
            </template>
            <template v-else-if="activeComponent.prop==='pie'">
              <el-form-item label="设置为环形">
                <avue-switch v-model="activeComponent.option.radius"></avue-switch>
              </el-form-item>
              <el-form-item label="南丁格尔玫瑰">
                <avue-switch v-model="activeComponent.option.roseType"></avue-switch>
              </el-form-item>
              <el-form-item label="自动按数据大小排序">
                <avue-switch v-model="activeComponent.option.sort"></avue-switch>
              </el-form-item>
              <el-form-item label="不展示为零数据项">
                <avue-switch v-model="activeComponent.option.notCount"></avue-switch>
              </el-form-item>
              <el-form-item label="显示Label">
                <avue-switch v-model="activeComponent.option.labelShow"></avue-switch>
              </el-form-item>

            </template>
            <template v-else-if="['bar','line'].includes(activeComponent.prop)">
              <el-form-item label="标题">
                <avue-input type="textarea" v-model="activeComponent.option.title"></avue-input>
              </el-form-item>
              <el-form-item label="标题大小">
                <avue-silder v-model="activeComponent.option.titleFontSize"></avue-silder>
              </el-form-item>
              <el-form-item label="标题颜色">
                <avue-color v-model="activeComponent.option.titleColor"></avue-color>
              </el-form-item>
              <el-form-item label="标题对齐">
                <avue-select v-model="activeComponent.option.titlePostion" :dic="dicOption.textAlign">
                </avue-select>
              </el-form-item>
              <el-form-item label="标题隐藏">
                <avue-switch v-model="activeComponent.option.titleShow"></avue-switch>
              </el-form-item>
              <el-form-item label="标题链接">
                <avue-input type="textarea" v-model="activeComponent.option.titleLink"></avue-input>
              </el-form-item>
              <el-form-item label="面积堆积" v-if="['line'].includes(activeComponent.prop)">
                <avue-switch v-model="activeComponent.option.areaStyle"></avue-switch>
              </el-form-item>
              <el-collapse>
                <el-collapse-item title="X轴设置">
                  <el-form-item label="显示">
                    <avue-switch v-model="activeComponent.option.xAxisShow">
                    </avue-switch>
                  </el-form-item>
                  <el-form-item label="显示网格线">
                    <avue-switch v-model="activeComponent.option.xAxisSplitLineShow">
                    </avue-switch>
                  </el-form-item>
                  <el-form-item label="轴反转">
                    <avue-switch v-model="activeComponent.option.xAxisInverse">
                    </avue-switch>
                  </el-form-item>
                  <el-form-item label="字号">
                    <avue-silder v-model="activeComponent.option.xNameFontSize">
                    </avue-silder>
                  </el-form-item>
                </el-collapse-item>
                <el-collapse-item title="Y轴设置">
                  <el-form-item label="显示">
                    <avue-switch v-model="activeComponent.option.yAxisShow">
                    </avue-switch>
                  </el-form-item>
                  <el-form-item label="轴网格线">
                    <avue-switch v-model="activeComponent.option.yAxisSplitLineShow">
                    </avue-switch>
                  </el-form-item>
                  <el-form-item label="反转">
                    <avue-switch v-model="activeComponent.option.yAxisInverse">
                    </avue-switch>
                  </el-form-item>
                  <el-form-item label="字号">
                    <avue-silder v-model="activeComponent.option.yNameFontSize">
                    </avue-silder>
                  </el-form-item>
                </el-collapse-item>

                <el-collapse-item title="数字提示设置">
                  <el-form-item label="显示">
                    <avue-switch v-model="activeComponent.option.labelShow">
                    </avue-switch>
                  </el-form-item>
                  <el-form-item label="字体大小">
                    <avue-silder v-model="activeComponent.option.labelShowFontSize">
                    </avue-silder>
                  </el-form-item>
                  <el-form-item label="字体颜色">
                    <avue-color v-model="activeComponent.option.labelShowColor">
                    </avue-color>
                  </el-form-item>
                  <el-form-item label="字体粗细">
                    <avue-select v-model="activeComponent.option.labelShowFontWeight" :dic="dicOption.fontWeight">
                    </avue-select>
                  </el-form-item>
                </el-collapse-item>
                <template v-if="['bar'].includes(activeComponent.prop)">
                  <el-collapse-item title="柱体设置">
                    <el-form-item label="最大宽度">
                      <avue-silder v-model="activeComponent.option.barWidth">
                      </avue-silder>
                    </el-form-item>
                    <el-form-item label="圆角">
                      <avue-silder v-model="activeComponent.option.barRadius">
                      </avue-silder>
                    </el-form-item>
                    <el-form-item label="最小高度">
                      <avue-silder v-model="activeComponent.option.barMinHeight">
                      </avue-silder>
                    </el-form-item>
                  </el-collapse-item>
                </template>
              </el-collapse>
            </template>
            <template v-if="['bar','pie','line'].includes(activeComponent.prop)">
              <el-collapse>
                <el-collapse-item title="坐标轴边距设置">
                  <el-form-item label="图例">
                    <avue-switch v-model="activeComponent.option.legendShow"></avue-switch>
                  </el-form-item>
                  <el-form-item label="左边距(像素)">
                    <avue-silder v-model="activeComponent.option.gridX" max="200"></avue-silder>
                  </el-form-item>
                  <el-form-item label="顶边距(像素)">
                    <avue-silder v-model="activeComponent.option.gridY" max="200"></avue-silder>
                  </el-form-item>
                  <el-form-item label="右边距(像素)">
                    <avue-silder v-model="activeComponent.option.gridX2" max="200"></avue-silder>
                  </el-form-item>
                  <el-form-item label="底边距(像素)">
                    <avue-silder v-model="activeComponent.option.gridY2" max="200"></avue-silder>
                  </el-form-item>
                </el-collapse-item>
                <el-collapse-item title="自定义配色">
                  <el-form-item label="文字颜色">
                    <avue-color v-model="activeComponent.option.nameColor">
                    </avue-color>
                  </el-form-item>
                  <el-form-item label="轴线颜色">
                    <avue-color v-model="activeComponent.option.lineColor"></avue-color>
                  </el-form-item>
                  <avue-crud :option="colorOption" :data="activeComponent.option.barColor" @row-save="rowSave"
                    @row-del="rowDel" @row-update="rowUpdate"></avue-crud>
                </el-collapse-item>
              </el-collapse>
            </template>
          </template>

          </template>

          <template v-else>
            <el-form-item label="大屏名称">
              <avue-input v-model="config.name"></avue-input>
            </el-form-item>
            <el-form-item label="大屏宽度">
              <avue-input-number v-model="config.width"></avue-input-number>
            </el-form-item>
            <el-form-item label="大屏高度">
              <avue-input-number v-model="config.height"></avue-input-number>
            </el-form-item>
            <el-form-item label="缩放比例">
              <el-slider v-model="config.scale" :max="200" :format-tooltip="formatTooltip"></el-slider>
            </el-form-item>
            <el-form-item label="缩略图">
              <img :src="config.backgroundImage" alt="" width="100%" />
            </el-form-item>
            <el-form-item label="背景图片">
              <avue-input v-model="config.backgroundImage"></avue-input>
            </el-form-item>
            <el-form-item label="显示网格">
              <avue-switch v-model="config.gradeShow"></avue-switch>
            </el-form-item>
            <el-form-item label="网格间距">
              <avue-input-number v-model="config.gradeLen"></avue-input-number>
            </el-form-item>
          </template>
        </el-form>
      </div>
    </div>
  </div>
</body>
</html>
* {
  margin: 0;
  padding: 0;
}

html,
body,
#app,
.app {
  height: 100%;
}

.json-editor .CodeMirror {
  height: 500px;
  overflow: auto;
}

.json-editor .cm-s-rubyblue span.cm-string {
  color: #F08047;
}

img {
  user-select: none;
}

.app {
  padding: 5px;
  display: flex;
  box-sizing: border-box;
}

.menu {
  padding: 0 10px;
  margin: 0 5px;
  width: 150px;
  height: 100%;
  overflow: hidden;
  overflow-y: auto;
  border: 1px solid #eee;
}

.menu__item {
  margin-bottom: 2px;
  width: 100%;
  height: 40px;
  line-height: 40px;
  text-indent: 1em;
  font-size: 14px;
  border: 1px solid #eee;
}

.menu__item:hover {
  border: 1px dashed #09f;
  cursor: move;
}

.menu__item--active {
  border: 1px dashed #09f;
}

.top {
  padding: 10px 20px;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 9999;
  background-color: rgba(255, 255, 255, .4);
}

.wrapper {
  padding-top: 60px;
  background-color: #eee;
  position: relative;
  width: 900px;
  height: 100%;
  overflow: auto;
  border: 1px solid #eee;
  box-sizing: border-box;
}

.app--none {
  padding: 0
}

.app--none .wrapper {
  padding: 0;
  width: 100%;
}

.app--none .content {
  height: 100%;
  border: none;
}

.content {
  height: 500px;
  overflow: hidden;
}

.container {
  user-select: none;
  transform-origin: 0 0;
  position: relative;
}

.grade {
  width: 100%;
  height: 100%;
  background-size: 30px 30px, 30px 30px;
  background-image: linear-gradient(rgba(255, 255, 255, 0.1) 1px, transparent 0px), linear-gradient(90deg, rgba(255, 255, 255, 0.1) 1px, transparent 0px);
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

.title {
  margin-bottom: 10px;
  line-height: 40px;
  height: 40px;
  text-align: center;
  font-weight: 500;
  font-size: 18px;
  letter-spacing: 2px;
  text-indent: 2px;
}

.params {
  width: 350px;
}

.el-form-item {
  margin-top: 10px;
}