highwaysaas/ruoyi-ui/src/components/modelComponents/pie/pie.vue

<template>
  <div style="height: 100%">
    <el-row style="height: 100%">
      <el-col :span="12" style="height: 100%;overflow: auto;padding-bottom: 12px;" class="leftCol">
        <div style="width: 96%;margin:0 auto">
          <el-collapse v-model="configSwitch" accordion>
            <el-collapse-item title="图表配置" name="1">
              <div style="height: 100%">
                <el-form ref="form" :model="defaultData.configForm" label-width="80px">
                  <el-form-item label="数据">
                    <el-select v-model="defaultData.configForm['data']" placeholder="请选择数据"
                               @change="dataChange" clearable>
                      <el-option :label="i" :value="i"
                                 v-for="i in Object.keys(networkData)"></el-option>
                    </el-select>
                  </el-form-item>
                  <el-form-item label="扇面名称">
                    <el-select v-model="defaultData.configForm['pieName']" placeholder="请选择数据"
                               @change="pieDataChange" clearable>
                      <el-option :label="i.label" :value="i.value"
                                 v-for="i in option"></el-option>
                    </el-select>
                  </el-form-item>
                  <el-form-item label="扇面数据">
                    <el-select v-model="defaultData.configForm['pieData']" placeholder="请选择数据"
                               @change="pieDataChange" clearable>
                      <el-option :label="i.label" :value="i.value"
                                 v-for="i in option"></el-option>
                    </el-select>
                  </el-form-item>
                </el-form>

              </div>
            </el-collapse-item>
            <el-collapse-item title="数据配置" name="2">
              <div>
                <NetworkRequest :requests="defaultData.requests" @GetFinalData="getData" :limit="{isDataSet:false}"/>
              </div>
            </el-collapse-item>
          </el-collapse>
          <div style="text-align: center;height: 60px;line-height: 60px">
            <el-button type="primary" @click="onSubmit">立即创建</el-button>
            <el-button>重置</el-button>
          </div>
        </div>
      </el-col>
      <el-col :span="12" style="height: 100%">
        <div class="chart">
          <ComplexChart :defaultData="chartData" :colors="(styleData||{}).colors1"></ComplexChart>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import ComplexChart from '@/components/complex/chart'
import {queryGlobalCfg} from "@/api/configuration/globalCfg";
import NetworkRequest from "@/components/networkRequest/NetworkRequest";

export default {
  components: {
    ComplexChart,
    NetworkRequest
  },
  props: ['defaultData', 'isDialog', 'styleData'],
  watch: {
    'defaultData.requests': {
      async handler() {

        setTimeout(async () => {
          await this.getData()
          this.dataChange()
        }, 200)
      },
      deep: true
    },
  },
  data() {
    return {
      globalList: [],
      configSwitch: false,
      chartData: {},
      networkData: {},
      pieData: [],
      option: [],
    }
  },
  created() {
    this.$detectingNullValues(this.defaultData, ['configForm', 'data'])
    this.$detectingNullValues(this.defaultData, ['configForm', 'pieName'])
    this.$detectingNullValues(this.defaultData, ['configForm', 'pieData'])
  },
  async mounted() {
    this.chartData = JSON.parse(JSON.stringify(this.defaultData.chartData))
    this.defaultData.chartData.dataset.source = [this.defaultData.chartData.dataset.source[0]]
    // 获取全局配置
    await queryGlobalCfg().then(e => {
      this.globalList = e
    })
    // 轮询
    await this.getData()
    this.getChartData()
    console.log('this.chartData-=-', this.chartData)
  },
  methods: {
    getChartData() {
      this.dataChange()
      this.pieDataChange()
    },
    // 筛选配置项
    getCascaderOption(el) {
      if (el === 'color') {
        let styleData = JSON.parse(localStorage.getItem('STYLEDATA') || '{}') || {}
        return [
          {
            value: 'system',
            label: '全局变量',
            children: this.globalList.filter(e => e.globalCfgType === el).map(v => {
              return {
                value: v.globalCfgId,
                label: v.globalCfgName,
              }
            })
          },
          {
            value: 'styleData',
            label: '界面风格',
            children: [
              {
                value: styleData.color1,
                label: '基准颜色',
              },
              {
                value: styleData.color2,
                label: '字体颜色',
              },
            ].concat(styleData.colors?.map(v => {
              return {
                value: v,
                label: v,
              }
            }) || [])
          }
        ]
      } else {

        return [
          {
            value: 'system',
            label: '全局变量',
            children: this.globalList.filter(e => e.globalCfgType === el).map(v => {
              return {
                value: v.globalCfgId,
                label: v.globalCfgName,
              }
            })
          }
        ]
      }
    },
    async getData(e) {
      let data = await this.$getFinalData(this.defaultData.requests)
      this.$set(this, 'networkData', data)
    },
    async onSubmit() {
      if (this.isDialog) {
        this.$emit('close')
      }
    },
    dataChange() {
      this.pieData = this.networkData[this.defaultData.configForm.data]

      let keys = []
      this.pieData.forEach(ee=>{
        keys = [...new Set(keys.concat(Object.keys(ee)))]
      })
      console.log('this.pieData', this.pieData)
      this.option = keys.map(e => {
        return {
          value: e,
          label: e
        }
      })
    },
    pieDataChange() {
      if (this.defaultData.configForm['pieName'] && this.defaultData.configForm['pieData']) {
        let data1 = this.pieData.map(e => {
          return [e[this.defaultData.configForm['pieName']], e[this.defaultData.configForm['pieData']]]
        })
        this.$detectingNullValues(this.chartData, ['dataset', 'source', 0])
        let data = [this.chartData.dataset.source[0], ...data1]

        this.$set(this.chartData.dataset, 'source', data)

      }
    }
  },
}
</script>
<style scoped lang="less">
.chart {
  width: 100%;
  height: 50%;
  transform: translateY(50%);
}

.notScroll {
  &::-webkit-scrollbar {
    display: none;
  }
}

.leftCol::-webkit-scrollbar {
  display: none;
}

.add {
  display: inline-block;
  width: 1vw;
  height: 1vw;
  padding: 0.5vw;
  background-color: #409EFF;
  border-radius: 50%;
  margin: 0 1vw;
  cursor: pointer;
}

.subtract {
  display: inline-block;
  width: 1vw;
  height: 1vw;
  padding: 0.5vw;
  background-color: #909399;
  border-radius: 50%;
  cursor: pointer;
}

.textArea {
  position: relative;

  .textAreaIcon {
    position: absolute;
    top: 12px;
    right: 8px;
  }
}
</style>