dvcp_v2_webapp/packages/bigscreen/designer/components/form/componentConfig.vue

<template>
  <section class="componentConfig">
    <div class="layout-right__content--wrapper">
      <div class="layout-config__group">
        <h2>基础设置</h2>
        <div class="layout-config__item">
          <label>图表尺寸</label>
          <div class="layout-config__item--right">
            <el-input-number size="mini" :min="0" v-model="config.width" controls-position="right"/>
            <el-input-number size="mini" :min="0" v-model="config.height" controls-position="right"/>
          </div>
        </div>
        <div class="layout-config__item">
          <label>图表位置</label>
          <div class="layout-config__item--right">
            <el-input-number size="mini" :min="0" v-model="config.left" controls-position="right"/>
            <el-input-number size="mini" :min="0" v-model="config.top" controls-position="right"/>
          </div>
        </div>
      </div>
    </div>
    <div class="layout-right__content--wrapper">
      <div class="layout-config__group">
        <h2>组件设置</h2>
        <div class="layout-config__item layout-config__item--input">
          <label>标题</label>
          <div class="layout-config__item--right">
            <el-input v-model="config.title" size="mini"></el-input>
          </div>
        </div>
        <div class="layout-config__item layout-config__item--input" v-if="config.display === 'summary2'">
          <label>标题</label>
          <div class="layout-config__item--right">
            <el-input v-model="config.summaryTitle" size="mini"></el-input>
          </div>
        </div>
        <div class="layout-config__item" v-else-if="config.type !== 'display'">
          <label>边框</label>
          <div class="layout-config__item--right">
            <el-select size="mini" v-model="config.border" placeholder="请选择边框" clearable>
              <el-option
                  v-for="(item, index) in borderList"
                  :key="index"
                  :label="item"
                  :value="item">
              </el-option>
            </el-select>
          </div>
        </div>
        <div class="layout-config__item layout-config__item--input" v-else-if="config.type === 'video'">
          <label>视频地址</label>
          <div class="layout-config__item--right">
            <el-input v-model="config.src" size="mini"></el-input>
          </div>
        </div>
        <div class="layout-config__item" v-if="config.type === 'monitor'">
          <label>视频类型</label>
          <div class="layout-config__item--right">
            <el-select size="mini" v-model="config.monitorType" placeholder="请选择" clearable>
              <el-option label="中国移动" value="cmcc"></el-option>
              <el-option label="海康威视" value="hik"></el-option>
              <el-option label="大华" value="dahua"></el-option>
              <el-option label="视联网" value="slw"></el-option>
            </el-select>
          </div>
        </div>
        <template v-else-if="config.type === 'table'">
          <div class="layout-config__item">
            <label>显示排名</label>
            <div class="layout-config__item--right">
              <el-select size="mini" v-model="config.isShowIndex" placeholder="请选择" clearable>
                <el-option
                    v-for="(item, index) in tableStatus"
                    :key="index"
                    :label="item.label"
                    :value="item.value">
                </el-option>
              </el-select>
            </div>
          </div>
          <div class="layout-config__item">
            <label>表格行数</label>
            <div class="layout-config__item--right">
              <el-input-number size="mini" style="width: 232px" :min="0" v-model="config.rowNum" controls-position="right"></el-input-number>
            </div>
          </div>
        </template>
        <template v-else-if="config.type === 'map'">
          <div class="layout-config__item">
            <label>遮罩层</label>
            <div class="layout-config__item--right">
              <el-select size="mini" v-model="config.mask" placeholder="请选择" clearable>
                <el-option label="是" value="1"></el-option>
                <el-option label="否" value="2"></el-option>
              </el-select>
            </div>
          </div>
          <div class="layout-config__item">
            <label>选择地区</label>
            <div class="layout-config__item--right">
              <AiAreaGet :instance="instance" :valueLevel="3" v-model="config.areaId" placeholder="地图展示的中心"/>
            </div>
          </div>
          <div class="layout-config__item">
            <label>展示光轨</label>
            <div class="layout-config__item--right">
              <ai-select v-model="config.pulseLines" :selectList="dict.getDict('yesOrNo')"/>
            </div>
          </div>
          <div class="layout-config__item layout-config__item--input">
            <label>地图样式</label>
            <div class="layout-config__item--right">
              <el-input size="mini" v-model="config.mapStyle" clearable placeholder="请输入地图样式ID,从UI处获取.."/>
            </div>
          </div>
          <div class="layout-config__item layout-config__item--input">
            <label>3D地图</label>
            <div class="layout-config__item--right">
              <ai-select v-model="config.is3d" :selectList="dict.getDict('yesOrNo')"/>
            </div>
          </div>
        </template>
        <div class="layout-config__item" v-if="config.type === 'summary'">
          <label>数据汇总</label>
          <div class="layout-config__item--right">
            <el-select size="mini" v-model="config.display" placeholder="请选择类型" clearable>
              <el-option
                  v-for="(item, index) in summaryList"
                  :key="index"
                  :label="item"
                  :value="item">
              </el-option>
            </el-select>
          </div>
        </div>
      </div>
    </div>
  </section>
</template>

<script>
export default {
  name: "componentConfig",
  props: {
    config: {default: () => ({})},
    instance: Function,
    dict: Object,
  },
  data() {
    return {
      borderList: ['border0', 'border1', 'border2', 'border3', 'border4', 'border5'],//边框待选项
      summaryList: ['summary0', 'summary1', 'summary2', 'summary3', 'summary4', 'summary6', 'summary5', 'summary7', 'summary8', 'summary9', 'summary10', 'summary11'],//汇总待选项
      //是否显示排名
      tableStatus: [
        {label: '是', value: '1'},
        {label: '否', value: '0'}
      ],
    }
  },
  methods: {},
  created() {
  }
}
</script>

<style lang="scss" scoped>
.componentConfig {
}
</style>