nezha-nezha-fronted/nezha-fronted/src/components/common/rightBox/chart/otherChartConfig.vue

<template>
  <div class="chart-config">
    <el-form
      ref="chartForm"
      :model="chartConfig"
      :rules="rules"
      label-position= "top"
      label-width="120px"
    >
      <!--title-->
      <div class="form__sub-title">
        <span>{{$t('dashboard.panel.chartForm.displayConfig')}}</span>
      </div>
      <div class="form-items--half-width-group">
        <!-- type -->
        <el-form-item
          :label="$t('dashboard.panel.chartForm.type')"
          class="form-item--half-width"
          prop="type"
        >
          <el-select
            id="chart-box-type"
            v-model="chartConfig.type"
            :disabled="!!(chartConfig.type==='group'&&chartConfig.children&&chartConfig.children.length)"
            :placeholder="$t('el.select.placeholder')"
            popper-class="right-box-select-top prevent-clickoutside"
            size="small"
            value-key="chartType"
            @change="chartTypeChange">
            <el-option
              v-for="item in chartTypeList"
              :key="item.id"
              :disabled="item.id==='group' && !!chartConfig.groupId"
              :label="item.name"
              :value="item.id">
              <span class="panel-dropdown-label-txt" >{{item.name}}</span>
            </el-option>
          </el-select>
        </el-form-item>
        <!--Default collapse-->
        <el-form-item class="form-item--half-width" v-if="isGroup(chartConfig.type)" :label='$t("dashboard.panel.chartForm.collapse")' prop="param.collapse">
          <el-switch id="chart-box-collapse"
                     v-model="chartConfig.param.collapse"
                     :active-value="true"
                     :inactive-value="false"
                     @change="change"
                     size="small"/>
        </el-form-item>
      </div>
      <div class="form-items--half-width-group" v-if="!isGroup(chartConfig.type)">
        <!--width-->
        <el-form-item
          :label="$t('dashboard.panel.chartForm.width')"
          class="form-item--half-width"
          prop="span">
          <el-select
            id="chart-box-span"
            v-model="chartConfig.span"
            :disabled="chartConfig.type === 'group'"
            placeholder=""
            popper-class="right-box-select-top prevent-clickoutside"
            size="small"
            value-key="chartSpan"
            @change="change"
          >
            <el-option
              v-for="item in spanList"
              :key="item"
              :label="'span-' + item"
              :value="item">
              <span class="panel-dropdown-label-txt" > span-{{item}}</span>
            </el-option>
          </el-select>
        </el-form-item>

        <!--height-->
        <el-form-item
          :label="$t('dashboard.panel.chartForm.high')"
          class="form-item--half-width"
          prop="height">
          <!-- 由px改为span -->
          <el-select
            id="chart-box-height"
            v-model="chartConfig.height"
            :disabled="chartConfig.type === 'group'"
            placeholder=""
            popper-class="right-box-select-top prevent-clickoutside"
            size="small"
            value-key="chartSpan"
            @change="change"
          >
            <el-option
              v-for="item in spanList"
              :key="item"
              :label="'span-' + item"
              :value="item"
            >
              <span class="panel-dropdown-label-txt" > span-{{item}}</span>
            </el-option>
          </el-select>
        </el-form-item>
      </div>
      <!--content-->
      <div v-if="!isGroup(chartConfig.type)" class="form__sub-title">
        <span>{{$t('dashboard.panel.chartForm.content')}}</span>
        <span style="cursor: pointer" v-if="isDiagram(chartConfig.type)"><i class="nz-icon nz-icon-edit" @click="topologyDialogChange(true)"></i></span>
      </div>
      <!--url-->
      <el-form-item v-if="isUrl(chartConfig.type)" :label='$t("dashboard.panel.chartForm.url")' :rules="{ required: true,  message: $t('validate.required'), trigger: 'blur' }" prop="param.url">
        <el-input id="chart-box-url" v-model="chartConfig.param.url" maxlength="1024" show-word-limit size="small" type="textarea" @change="change"></el-input>
      </el-form-item>
      <!--topoData-->
      <el-form-item v-if="isDiagram(chartConfig.type)" >
        <div class="topology-box">
          <div class="topology-mc"></div>
          <diagram :topoData="chartConfig.param.topo" :fromChartBox="true" :topologyIndexF="-1"/>
        </div>
      </el-form-item>
      <!--topplogy-->
      <diagram :topoData="chartConfig.param.topo" class="topology-dialog" v-if="topologyDialog" @change="topologyDialogChange" :topologyIndexF="-2" ref="topologyDialog" :fromTopologyDialog="true"/>
      <!--text-->
      <el-form-item  v-if="isText(chartConfig.type)"  :rules="{ required: true,  message: $t('validate.required'), trigger: 'change' }" prop="param.text">
        <rich-text-editor ref="richTextEditor" :edit-data="chartConfig.param.text" @textChange="textChange"></rich-text-editor>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import publicConfig from '@/components/common/rightBox/chart/publicConfig'
import chartTypeShow from '@/components/common/rightBox/chart/chartTypeShow'
import diagram from '@/components/common/ChartDiagram/diagram'
import richTextEditor from '@/components/charts/richTextEditor'
export default {
  name: 'otherChartConfig',
  mixins: [publicConfig, chartTypeShow],
  components: {
    diagram,
    richTextEditor
  },
  watch: {
    'chartConfig.param.text': {
      handler (n) {
        this.change()
      }
    }
  },
  data () {
    return {
      rules: {},
      topologyDialog: false,
      chartTypeList: [
        {
          id: 'url',
          name: this.$t('dashboard.panel.chartForm.typeVal.url.label')
        },
        {
          id: 'text',
          name: this.$t('dashboard.panel.chartForm.typeVal.text.label')
        },
        {
          id: 'diagram',
          name: this.$t('dashboard.panel.chartForm.typeVal.diagram.label')
        },
        {
          id: 'group',
          name: this.$t('dashboard.panel.chartForm.typeVal.group.label')
        }
      ]
    }
  },
  methods: {
    init () {
      this.chartConfig = JSON.parse(JSON.stringify(this.params))
    },
    chartTypeChange (type) {
      switch (type) {
        case 'group':
          this.chartConfig.span = 12
          this.chartConfig.param = {
            collapse: true
          }
          break
        case 'text':
          this.chartConfig.param = {
            text: ''
          }
          break
        case 'diagram':
          this.chartConfig.param = {
            topo: ''
          }
          break
        case 'url':
          this.chartConfig.param = {
            url: ''
          }
          break
      }
      this.change()
    },
    topologyDialogChange (flag, data) {
      this.topologyDialog = flag
      if (data) {
        this.chartConfig.param.topo = data
        this.change()
      }
    },
    textChange () {
      this.chartConfig.param.text = this.$refs.richTextEditor.getContent()
    }
  },
  created () {
    this.init()
  }
}
</script>

<style scoped>

</style>