xiaoshi_system/src/views/analyse/custom/components/Tabs/Style.vue

<template>
  <div class="custom-analyse-tabs-style">
    <el-collapse v-model="activeNames">
      <el-collapse-item title="类型" name="0">
        <div style="margin-left: 20px;margin-top: 10px;">
          <style-type v-for="item in chartIcon" :item="item" @click.native="handleClick(item)" />
        </div>
      </el-collapse-item>
      <el-collapse-item title="框架" name="8" v-if="!getShow([30])">
        <div class="content">
          <div>
            <span class="label">宽度</span>
            <el-input placeholder="请输入宽度" v-model="form.setting.width" size="small" style="width: calc(100% - 170px);padding-left: 10px;"></el-input>
            <el-select size="small" v-model="form.setting.widthUnit" placeholder="请选择" style="width: calc(100% - 190px);margin-left: 10px;">
              <el-option label="百分比" value="%"></el-option>
              <el-option label="像素" value="px"></el-option>
            </el-select>
          </div>
          <div style="margin-top: 10px;">
            <span class="label">高度</span>
            <el-input placeholder="请输入高度" v-model="form.setting.height" size="small" style="width: calc(100% - 170px);padding-left: 10px;"></el-input>
            <el-select size="small" v-model="form.setting.heightUnit" placeholder="请选择" style="width: calc(100% - 190px);margin-left: 10px;">
              <el-option label="百分比" value="%" disabled></el-option>
              <el-option label="像素" value="px"></el-option>
            </el-select>
          </div>
        </div>
      </el-collapse-item>
      <el-collapse-item title="气泡图" name="9" v-if="getShow([])">
        <div class="content">
          <span class="label">气泡比例</span>
          <el-input placeholder="请输入气泡比例" v-model="form.setting.scatterSize" size="small" style="width: calc(100% - 160px);padding-left: 10px;"></el-input>
        </div>
      </el-collapse-item>
      <el-collapse-item title="柱形图" name="7" v-if="getShow([4, 7, 5, 6, 8, 9])">
        <div class="content">
          <span class="label">宽度</span>
          <el-input placeholder="请输入宽度" v-model="form.setting.barWidth" size="small" style="width: calc(100% - 190px);padding-left: 10px;"></el-input>
        </div>
      </el-collapse-item>
      <el-collapse-item title="标签" name="1" v-if="!getShow([30, 19])">
        <div class="content">
          <div>
            <el-checkbox v-model="form.setting.dataLabel">显示标签</el-checkbox>
            <template v-if="!getShow([13, 12, 20, 18, 21, 23])">
              <span style="margin-left: 42px;" class="label">位置</span>
              <el-select size="small" v-model="form.setting.dataPosition" placeholder="请选择" style="width: calc(100% - 160px);margin-left: 10px;">
                <el-option v-for="item in positionList" :label="item.label" :value="item.value"></el-option>
              </el-select>
            </template>
          </div>
          <div style="margin-top: 10px;">
            <el-select size="small" v-model="form.setting.fontFamily2" placeholder="请选择" style="width: calc(100% - 160px)">
              <el-option v-for="item in $constants.fontFamily" :label="item.label" :value="item.value"></el-option>
            </el-select>
            <el-input size="small" v-model.number="form.setting.dataSize" type="number" placeholder="请输入" style="width: 105px;margin-left: 10px;"></el-input>
            <el-color-picker size="small" v-model="form.setting.labelColor" style="margin-left: 10px; float:right;"></el-color-picker>
          </div>
          <div style="margin-top: 10px;" v-if="getShow([10, 11])">
            <el-checkbox v-model="form.setting.dataLabel2">显示数值</el-checkbox>
            <el-checkbox v-model="form.setting.dataLabel3">显示百分比</el-checkbox>
          </div>
        </div>
      </el-collapse-item>
      <el-collapse-item title="颜色" name="2" v-if="!getShow([20, 18, 21, 23])">
        <div class="content">
          <el-container>
            <el-main style="max-height: 300px;" class="color-config">
              <template v-if="!getShow([15, 30])">
                <div v-for="item in form.setting.config.color" class="color-config-content">
                  <el-color-picker size="small" v-model="item.color"></el-color-picker>
                  <span class="name">{{ item.name }}</span>
                </div>
                <div v-if="form.setting.config.line.enable" class="color-config-content">
                  <el-color-picker size="small" v-model="form.setting.config.line.color"></el-color-picker>
                  <span class="name">{{ form.setting.config.line.name }}</span>
                </div>
              </template>
              <template v-else>
                <div v-for="(item, index) in form.setting.config.table">
                  <el-color-picker size="small" v-model="item.color"></el-color-picker>
                  <div style="float: right; padding-right: 20px;">
                    <el-input v-model="item.min" style="width: 80px;" size="small"></el-input>
                    <span class="o-code">≤</span><span>数值</span><span class="o-code">≤</span>
                    <el-input v-model="item.max" style="width: 80px;" size="small"></el-input>
                  </div>
                </div>
              </template>
            </el-main>
          </el-container>
        </div>
      </el-collapse-item>
      <el-collapse-item title="图例" name="3" v-if="getShow([5, 6, 8, 9, 10, 11])">
        <div class="content">
          <div>
            <el-checkbox v-model="form.setting.legend">显示图例</el-checkbox>
            <span class="label" style="margin-left: 42px;">位置</span>
            <el-select size="small" v-model="form.setting.legendLocation" style="width: calc(100% - 160px);margin-left: 10px;">
              <el-option value="top" label="上"></el-option>
              <el-option value="left" label="左"></el-option>
              <el-option value="bottom" label="下"></el-option>
              <el-option value="right" label="右"></el-option>
            </el-select>
          </div>
          <div style="margin-top: 10px;">
            <el-select size="small" v-model="form.setting.fontFamily3" placeholder="请选择" style="width: calc(100% - 160px)">
              <el-option v-for="item in $constants.fontFamily" :label="item.label" :value="item.value"></el-option>
            </el-select>
            <el-input size="small" v-model.number="form.setting.legendFontSize" type="number" placeholder="请输入" style="width: 105px;margin-left: 10px;"></el-input>
            <el-color-picker size="small" v-model="form.setting.legendColor" style="margin-left: 10px; float:right;"></el-color-picker>
          </div>
          <div style="margin-top: 10px;">
            <el-select size="small" v-model="form.setting.type2" style="width: calc(100% - 160px)">
              <el-option value="scroll" label="滚动图例"></el-option>
              <el-option value="plain" label="普通图例"></el-option>
            </el-select>
          </div>
        </div>
      </el-collapse-item>
      <el-collapse-item title="距离" name="4" v-if="!getShow([30, 22, 17, 19, 12, 20, 18, 21, 23, 13])">
        <div class="content">
          <div>
            <span class="label">顶部</span>
            <el-input size="small" v-model="form.setting.gridTop" style="width: 240px;margin-left: 10px;"></el-input>
            <span style="margin-left: 10px;">%</span>
          </div>
          <div style="margin-top: 10px;">
            <span class="label">底部</span>
            <el-input size="small" v-model="form.setting.gridBottom" style="width: 240px;margin-left: 10px;"></el-input>
            <span style="margin-left: 10px;">%</span>
          </div>
          <div style="margin-top: 10px;">
            <span class="label">左侧</span>
            <el-input size="small" v-model="form.setting.gridLeft" style="width: 240px;margin-left: 10px;"></el-input>
            <span style="margin-left: 10px;">%</span>
          </div>
          <div style="margin-top: 10px;">
            <span class="label">右侧</span>
            <el-input size="small" v-model="form.setting.gridRight" style="width: 240px;margin-left: 10px;"></el-input>
            <span style="margin-left: 10px;">%</span>
          </div>
        </div>
      </el-collapse-item>
      <el-collapse-item title="X轴" name="5" v-if="getShow([1, 3, 4, 7, 5, 6, 8, 9, 2, 15, 14])">
        <div class="content">
          <div>
            <el-checkbox v-model="form.setting.show">显示坐标轴</el-checkbox>
            <el-checkbox v-model="form.setting.splitLine" v-if="!getShow([14])">显示背景线</el-checkbox>
          </div>
          <div style="margin-top: 10px;">
            <el-select size="small" v-model="form.setting.fontFamily" placeholder="请选择" style="width: calc(100% - 160px)">
              <el-option v-for="item in $constants.fontFamily" :label="item.label" :value="item.value"></el-option>
            </el-select>
            <el-input size="small" v-model.number="form.setting.fontSize" type="number" placeholder="请输入" style="width: 105px;margin-left: 10px;"></el-input>
            <el-color-picker size="small" v-model="form.setting.fontColor" style="margin-left: 10px; float:right;"></el-color-picker>
          </div>
          <div style="margin-top: 10px;">
            <el-checkbox v-model="form.setting.fontWeight">字体加粗</el-checkbox>
            <span class="label" style="margin-left: 15px;">标题位置</span>
            <el-select size="small" v-model="form.setting.nameLocation" style="width: calc(100% - 160px);margin-left: 10px;">
              <el-option value="start" label="左"></el-option>
              <el-option value="middle" label="中"></el-option>
              <el-option value="end" label="右"></el-option>
            </el-select>
          </div>
          <div style="margin-top: 10px;">
            <span class="label">标题</span>
            <el-input size="small" v-model="form.setting.title1" placeholder="请输入" style="width: calc(100% - 37px);margin-left: 10px;"></el-input>
          </div>
          <div style="margin-top: 10px;" class="title-padding">
            <span class="label">位移</span>
            <span class="label" style="margin: 0 5px;">上</span>
            <el-input v-model.number="form.setting.paddingTop" size="small" placeholder="" style="width: 45px;"></el-input>
            <span class="label" style="margin: 0 5px;">左</span>
            <el-input v-model.number="form.setting.paddingLeft" size="small" placeholder="" style="width: 45px;"></el-input>
            <span class="label" style="margin: 0 5px;">下</span>
            <el-input v-model.number="form.setting.paddingBottom" size="small" placeholder="" style="width: 45px;"></el-input>
            <span class="label" style="margin: 0 5px;">右</span>
            <el-input v-model.number="form.setting.paddingRight" size="small" placeholder="" style="width: 45px;"></el-input>
          </div>
          <div style="margin-top: 10px;">
            <el-checkbox v-model="form.setting.interval">完整显示</el-checkbox>
            <span class="label" style="margin-left: 15px;">倾斜角度</span>
            <el-input size="small" v-model="form.setting.rotate" placeholder="请输入" style="width: calc(100% - 160px);margin-left: 10px;"></el-input>
          </div>
        </div>
      </el-collapse-item>
      <el-collapse-item title="Y轴" name="6" v-if="getShow([1, 3, 4, 7, 5, 6, 8, 9, 2, 15, 14])">
        <div class="content">
          <div>
            <el-checkbox v-model="form.setting.show2">显示坐标轴</el-checkbox>
            <el-checkbox v-model="form.setting.splitLine2" v-if="!getShow([14])">显示背景线</el-checkbox>
          </div>
          <div style="margin-top: 10px;">
            <el-select size="small" v-model="form.setting.fontFamily2" placeholder="请选择" style="width: calc(100% - 160px)">
              <el-option v-for="item in $constants.fontFamily" :label="item.label" :value="item.value"></el-option>
            </el-select>
            <el-input size="small" v-model.number="form.setting.fontSize2" type="number" placeholder="请输入" style="width: 105px;margin-left: 10px;"></el-input>
            <el-color-picker size="small" v-model="form.setting.fontColor2" style="margin-left: 10px; float:right;"></el-color-picker>
          </div>
          <div style="margin-top: 10px;">
            <el-checkbox v-model="form.setting.fontWeight2">字体加粗</el-checkbox>
            <span class="label" style="margin-left: 15px;">标题位置</span>
            <el-select size="small" v-model="form.setting.nameLocation2" style="width: calc(100% - 160px);margin-left: 10px;">
              <el-option value="end" label="上"></el-option>
              <el-option value="middle" label="中"></el-option>
              <el-option value="start" label="下"></el-option>
            </el-select>
          </div>
          <div style="margin-top: 10px;">
            <span class="label">标题</span>
            <el-input size="small" v-model="form.setting.title2" placeholder="请输入" style="width: calc(100% - 37px);margin-left: 10px;"></el-input>
          </div>
          <div style="margin-top: 10px;" class="title-padding">
            <span class="label">位移</span>
            <span class="label" style="margin: 0 5px;">上</span>
            <el-input v-model.number="form.setting.paddingTop2" size="small" placeholder="" style="width: 45px;"></el-input>
            <span class="label" style="margin: 0 5px;">左</span>
            <el-input v-model.number="form.setting.paddingLeft2" size="small" placeholder="" style="width: 45px;"></el-input>
            <span class="label" style="margin: 0 5px;">下</span>
            <el-input v-model.number="form.setting.paddingBottom2" size="small" placeholder="" style="width: 45px;"></el-input>
            <span class="label" style="margin: 0 5px;">右</span>
            <el-input v-model.number="form.setting.paddingRight2" size="small" placeholder="" style="width: 45px;"></el-input>
          </div>
          <div style="margin-top: 10px;">
            <el-checkbox v-model="form.setting.interval2">完整显示</el-checkbox>
            <span class="label" style="margin-left: 15px;">倾斜角度</span>
            <el-input size="small" v-model="form.setting.rotate2" placeholder="请输入" style="width: calc(100% - 160px);margin-left: 10px;"></el-input>
          </div>
        </div>
      </el-collapse-item>
      <el-collapse-item title="坐标" name="6" v-if="getShow([17, 22])">
        <div class="content">
          <div>
            <el-checkbox v-model="form.setting.show">显示</el-checkbox>
            <el-checkbox v-model="form.setting.fontWeight">字体加粗</el-checkbox>
          </div>
          <div style="margin-top: 10px;">
            <el-select size="small" v-model="form.setting.fontFamily" placeholder="请选择" style="width: calc(100% - 160px)">
              <el-option v-for="item in $constants.fontFamily" :label="item.label" :value="item.value"></el-option>
            </el-select>
            <el-input size="small" v-model.number="form.setting.fontSize" type="number" placeholder="请输入" style="width: 105px;margin-left: 10px;"></el-input>
            <el-color-picker size="small" v-model="form.setting.fontColor" style="margin-left: 10px; float:right;"></el-color-picker>
          </div>
        </div>
      </el-collapse-item>
    </el-collapse>
  </div>
</template>

<script>
import mixins from "./mixins";
import { detectionChartType } from "@/utils/chart";
import StyleType from "./StyleType";

export default {
  mixins: [mixins],
  components: {
    StyleType
  },
  data() {
    return {
      activeNames: ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9'],
      chartIcon: [],
      positionList: [],
    }
  },
  mounted() {
    this.chartIcon = JSON.parse(JSON.stringify(this.$constants.chartType))
    this.chartIcon.map(item => {
      let { op, cg } = detectionChartType(item, this.form)
      if (op && cg) {
        cg = false
        this.$store.dispatch('resetSettingColor')
      }
      if (op) {
        this.$set(item, 'disable', true)
        this.$set(item, 'active', false)
      }
      if (cg) {
        this.$set(item, 'disable', false)
        this.$set(item, 'active', true)
      }
    })
    this.getPositionList()
  },
  methods: {
    getShow(arr) {
      return arr.indexOf(this.form.setting.type) !== -1
    },
    getPositionList() {
      if ([10, 11].indexOf(this.form.setting.type) !== -1) {
        this.positionList = [
          { label: '外侧', value: 'outside' },
          { label: '内部', value: 'inside' },
          { label: '中心', value: 'center' },
        ]
      } else {
        this.positionList = [
          { label: '上', value: 'top' },
          { label: '左', value: 'left' },
          { label: '右', value: 'right' },
          { label: '下', value: 'bottom' },
          { label: '内', value: '' },
        ]
      }
    },
    handleClick(item) {
      if (item.disable) {
        return false
      }
      const chartType = this.$constants.chartType.find(c => c.value === this.form.setting.type)
      if (item.value === 21 || this.form.setting.type === 21) {
        this.$store.commit('SET_RELOAD_DATA', true)
      }
      if (item.value === 22 && chartType.type === 1) {
        this.$store.commit('SET_RELOAD_DATA', true)
      }
      if (!chartType) {
        this.$store.commit('SET_RELOAD_DATA', true)
      }
      if ((this.form.schema.x.type === 6 || this.form.schema.y.type === 6) && chartType) {
        if (chartType.value === 30 && item.value !== 30) {
          this.$store.commit('SET_RELOAD_DATA', true)
        }
        if (chartType.value !== 30 && item.value === 30) {
          this.$store.commit('SET_RELOAD_DATA', true)
        }
        if (chartType.value === 20 && item.value !== 20) {
          this.$store.commit('SET_RELOAD_DATA', true)
        }
        if (chartType.value !== 20 && item.value === 20) {
          this.$store.commit('SET_RELOAD_DATA', true)
        }
      }
      this.form.setting.type = item.value
      this.chartIcon.map(c => {
        if (c.value === item.value) {
          this.$set(c, 'active', true)
        } else {
          this.$set(c, 'active', false)
        }
      })
      this.$store.dispatch('getItemSettingColor', [])
      this.form.setting.dataPosition = ''
      this.getPositionList()
    },
  }
}
</script>

<style lang="scss">
.custom-analyse-tabs-style {
  .el-collapse {
    border-top: transparent !important;
  }
  .el-collapse-item__header {
    font-weight: bold !important;
    padding: 0 20px !important;
    border-bottom: 1px solid #EBEEF5 !important;
  }
  .el-form-item {
    padding: 0 15px;
    margin-bottom: 0 !important;
  }
  .el-collapse {
    border-top: 0 !important;
  }
  .color-config {
    padding: 0 !important;
    .o-code {
      margin: 0 5px;
      display: inline-block;
    }
    .color-config-content {
      line-height: 50px;
      position: relative;
      .name {
        margin-left: 10px;
        font-size: 14px;
        top: -10px;
        position: absolute;
      }
    }
  }
  .title-padding {
    .el-input__inner {
      padding: 0 10px !important;
    }
  }
  .el-collapse-item__content {
    padding-bottom: 0 !important;
  }
  .content {
    padding: 20px;
  }
  .label {
    color: #6b6868;
  }
}
</style>