eta_front/src/views/dataEntry_manage/components/sectionalCombination/sectionalCombinationOption.vue

<template>
  <div class="sectionalCombination-option-wrap">
    <div class="sort-wrap">
      <div>
        <el-tooltip
          effect="dark"
          :content="$t('EtaChartAddPage.sort_tips')"
          placement="top-start"
        >
          <span>
            <span>{{ $t('EtaChartAddPage.label_sort_rule')}}</span>
            <i class="el-icon-info"></i>
          </span>
        </el-tooltip>
        <el-radio-group v-model="sortType" style="margin-left: 20px" @change="handleGetChartData">
          <el-radio :label="0">{{$t('EtaBasePage.default_select_text')}}</el-radio>
          <el-radio :label="1">{{$t('EtaChartAddPage.option_sort_up')}}</el-radio>
          <el-radio :label="2">{{$t('EtaChartAddPage.option_sort_low')}}</el-radio>
        </el-radio-group>
      </div>
      <el-select
        class="select-box"
        v-model="sortBasisEdb"
        :placeholder="$t('EtaChartAddPage.select_base_placehold')"
        @change="handleGetChartData"
      >
        <el-option
          v-for="item in seriesData"
          :key="item.seriesName"
          :label="item.seriesName"
          :value="item.seriesName"
        >
        </el-option>
      </el-select>
    </div>
    <div class="date-set-wrap">
      <span @click="handleShowRefrenceDate">{{$t('EtaChartAddPage.reference_date_set')}}</span>
      <span @click="handleShowAxis">{{$t('EtaChartAddPage.axis_set')}}</span>
    </div>
    <!-- 系列数据模块 -->
    <div class="series-data-wrap" v-if="seriesData.length">
      <el-collapse class="series-list">
        <el-collapse-item v-for="(item, index) in seriesData" :key="index">
          <template slot="title">
            <span class="text_oneLine" @click.stop="handleShowEditSeries(index)">{{
              currentLang === "en"?item.seriesNameEn||item.seriesName:item.seriesName
            }}</span>
            <img class="copy-icon" src="~@/assets/img/icons/copy-active.png" alt="" @click.stop="copySeries(item)">
            <i
              class="el-icon-delete del-icon"
              @click.stop="handleDelSeries(item,index)"
            ></i>
          </template>
          <ul class="set-box">
            <li>
              <el-radio-group
                v-model="item.IsAxis"
                size="mini"
                @input="handleChartUpdate('isAxis')"
              >
                <el-radio-button :label="1"
                  ><!-- 左轴 -->{{ $t("Chart.Detail.l_axis") }}</el-radio-button
                >
                <el-radio-button :label="0"
                  ><!-- 右轴 -->{{ $t("Chart.Detail.r_axis") }}</el-radio-button
                >

                <!-- 指标有右轴时才可以选右2轴 不然没有右2这个概念的意义 -->
                <el-radio-button
                  :label="2"
                  :disabled="
                    seriesData.findIndex((_) => _.IsAxis === 0) === -1 ||
                    (seriesData.findIndex((_) => _.IsAxis === 0) === index &&
                      seriesData.filter((_) => _.IsAxis === 0).length === 1)
                  "
                  ><!-- 右2轴 -->{{
                    $t("Chart.Detail.rtwo_axis")
                  }}</el-radio-button
                >
              </el-radio-group>
            </li>
            <li>
              <div style="display: flex">
                <span style="margin-right: 3px"
                  ><!-- 生成样式 -->{{ $t("Chart.label_create_sty") }}：</span
                >
                <el-select
                  v-model="item.seriesChartType"
                  placeholder="请选择生成样式"
                  style="width: 50%"
                  class="edb-item-style"
                  @change="handleChartUpdate('chartType')"
                >
                  <el-option
                    v-for="item in chartItemStyleArr"
                    :key="item.key"
                    :label="item.label"
                    :value="item.value"
                  >
                  </el-option>
                </el-select>
              </div>
            </li>
            <!-- 数据点展示 -->
            <li>
              <div style="display: flex; align-items: center" v-if="item.seriesChartType!='column'">
                <span>{{$t('EtaChartAddPage.show_data_point')}}</span>
                <el-tooltip
                  :content="$t('EtaChartAddPage.show_data_point_tips')"
                  placement="top"
                >
                  <i class="el-icon-info"></i>
                </el-tooltip>
                <el-switch
                  style="margin-left: 20px"
                  v-model="item.showDataPoint"
                  @change="handleChartUpdate('dataPoint')"
                >
                </el-switch>
              </div>
            </li>
            <!-- 数值展示 -->
            <li>
              <div style="display: flex; align-items: center">
                <span>{{$t('EtaChartAddPage.show_data_value')}}</span>
                <el-tooltip :content="$t('EtaChartAddPage.show_data_value_tips')" placement="top">
                  <i class="el-icon-info"></i>
                </el-tooltip>
                <el-switch
                  style="margin-left: 33px"
                  v-model="item.showDataValue"
                  @change="handleChartUpdate('dataValue')"
                >
                </el-switch>
              </div>
            </li>
            <li>
              <div style="display: flex">
                <span style="margin-right: 3px"
                  ><!-- 线条颜色 -->{{ $t("Chart.Detail.line_color") }}：</span
                >
                <el-color-picker
                  v-model="item.ChartColor"
                  size="mini"
                  show-alpha
                  :predefine="predefineColors"
                  @change="handleChartUpdate('ChartColor')"
                ></el-color-picker>
              </div>

              <div style="margin-top: 12px" v-if="item.seriesChartType!='column'">
                <!-- 线条粗细 -->{{ $t("Chart.Detail.line_size") }}：
                <el-input
                  style="width: 60px"
                  size="mini"
                  type="number"
                  :min="1"
                  v-model="item.ChartWidth"
                  @change="handleChartUpdate('ChartWidth')"
                />
              </div>
            </li>
          </ul>
        </el-collapse-item>
      </el-collapse>
    </div>

    <div class="add-cont" @click="showSeriesEdit = true">
      <img
        src="~@/assets/img/set_m/add_ico.png"
        alt=""
        style="width: 16px; height: 16px; margin-right: 10px"
      />
      <span>{{$t('EtaChartAddPage.add_series_btn')}}</span>
    </div>

    <!-- 引用日期设置 -->
    <referenceDateSet :show.sync="showReferenceDate" :defaultDate="referenceDateOpts" @change="handleUpdateRefrenceDate"/>

    <!-- 添加系列 -->
    <seriesEdit 
      ref="seriesEditIns"
      :show.sync="showSeriesEdit" 
      :chartInfo="chartInfo"
      :defaultData="seriesData"
      :referenceDateOpts="referenceDateOpts" 
      @change="handleSeriesChange" 
    />

    <!-- 横纵轴设置 -->
    <axisSet 
      :show.sync="showAxisSet" 
      :XDataList="XDataList" 
      :UnitList="UnitList" 
      :seriesData="seriesData"
      @change="handleAxisChange"
    />
  </div>
</template>

<script>
import axisSet from './axisSet.vue'
import referenceDateSet from './referenceDateSet.vue'
import seriesEdit from './seriesEdit.vue'
import { defaultOpts } from '@/utils/defaultOptions';
export default {
  components: { referenceDateSet, seriesEdit, axisSet },
  props:{
    defaultData:{},
    chartInfo: {
      type: Object
    },
  },
  data() {
    return {
      chartItemStyleArr: [
        { label: '曲线图', key: 1, value: 'spline' },
        { label: '折线图', key: 2, value: 'line' },
        { label: '柱状图', key: 4, value: 'column' },
      ],//可选样式
      predefineColors: defaultOpts.colors.slice(0, 2), //定义颜色蓝，红 默认颜色

      seriesData: [],

      sortType: 0,//排序类型，0默认，1升序，2降序
      sortBasisEdb: '',//基准

      referenceDateOpts:[],//引用日期选择项

      showReferenceDate: false,

      showSeriesEdit: false,

      XDataList:[],//横轴配置
      UnitList:{
        LeftName:'',
				RightName:'',
				RightTwoName:''
      },//纵轴单位配置
      showAxisSet: false

    }
  },
  mounted(){
    this.initData()
  },
  methods: {
    handleShowEditSeries(index){
      this.showSeriesEdit=true
      this.$nextTick(()=>{
        this.$refs.seriesEditIns.activeIndex=index
      })
    },
    initData(){
      if(this.defaultData&&Object.keys(this.defaultData).length !== 0){
        this.sortType=this.defaultData.SortType
        this.sortBasisEdb=this.defaultData.BaseChartSeriesName
        const arr=this.defaultData.SeriesList||[]
        this.seriesData=arr.map(item=>{
          const _arr=item.EdbInfoList||[]
          return {
            seriesName: item.SeriesName,
            seriesNameEn: item.SeriesNameEn,
            seriesChartType: item.ChartStyle,//系列图表展示类型
            IsAxis: item.IsAxis,
            ChartColor: item.ChartColor,
            ChartWidth: item.ChartWidth,
            showDataPoint: item.IsPoint?true:false,
            showDataValue: item.IsNumber?true:false,
            edbList: _arr.map(i=>{
              return {
                ChartSeriesEdbMappingId:i.ChartSeriesEdbMappingId,
						    ChartSeriesId:i.ChartSeriesId,
                dateType: i.DateConfType,//0指标最新日期 1引用日期
                edbType:i.EdbInfoType,
                selectEdbData: i,
                MoveForward: i.DateConf.MoveForward,//期数前移
                dateTransfData: i.DateConf.DateChange,//日期变换数据
                refrenceDateName: i.DateConfName,//选择的引用日期
              }
            })
          }
        })
        
        const arr2=this.defaultData.XDataList||[]
        this.XDataList=arr2.map(item=>{
          return {Name:this.$i18nt.locale==='zh'?item.Name:item.NameEn}
        })
        this.UnitList=this.defaultData.UnitList
        this.referenceDateOpts=this.defaultData.DateConfList.map(item=>{
          return {
            name: item.DateConfName,
            dateType: item.DateType||0,//0指标最新日期 1系统日期
            selectEdbData: item.EdbInfoId?{
              EdbInfoId:item.EdbInfoId,
              EdbName:item.EdbName,
              EdbNameEn:item.EdbNameEn,
              EndDate:item.EndDate,
              Frequency:item.Frequency
            }:null,
            MoveForward: item.MoveForward||0,//期数前移
            dateTransfData: item.DateChange||[],//日期变换数据
          }
        })

      
      }
      console.log('初始化后截面组合图数据：',this.defaultData, this.$data);
    },

    // 获取图表数据
    handleGetChartData(){
      this.$emit('getData',this.$data)
    },

    // 图表配置更新
    handleChartUpdate(type){
      const params={
        type,
        data:this.$data
      }
      this.$emit('updateChart',params)
    },

    //设置横纵轴回调
    handleAxisChange(e){
      this.XDataList=e.XDataList
      this.UnitList=e.UnitList
      this.handleGetChartData()
    },

    // 显示设置横纵轴
    handleShowAxis(){
      if(this.defaultData&&Object.keys(this.defaultData).length !== 0){
        const arr=this.defaultData.XDataList||[]
        this.XDataList=arr.map(item=>{
          return {Name:this.$i18nt.locale==='zh'?item.Name:item.NameEn}
        })
        this.UnitList=this.defaultData.UnitList
      }
      this.showAxisSet=true
    },

    // 删除系列
    async handleDelSeries(item,index){
      if(this.seriesData.length===1){
        await this.$confirm(this.$t('EtaChartAddPage.series_del_tips'),this.$t('Dialog.warn_tit'))
      }
      this.seriesData.splice(index,1)
      // 删完了
      if(this.seriesData.length===0){
        this.sortBasisEdb=''
        this.XDataList=[]
        this.UnitList={
          LeftName:'',
          RightName:'',
          RightTwoName:''
        }
        this.$emit('hideChart')
      }else{
        // 删除的是基准
        if(item.seriesName===this.sortBasisEdb){
          this.sortBasisEdb=this.seriesData[0].seriesName
        }
        // 判断是否还有右轴 如果没了则要将右二轴换成右轴
        const hasRightTwo=this.seriesData.some(i=>i.IsAxis===2)
        const hasRight=this.seriesData.some(i=>i.IsAxis===0)
        if(hasRightTwo&&!hasRight){
          this.seriesData.forEach(i=>{
            if(i.IsAxis===2){
              i.IsAxis=0
            }
          })
        }
        this.handleGetChartData()
      }
    },

    //复制系列
    copySeries(item){
      this.seriesData.push(JSON.parse(JSON.stringify(item)))
      this.$refs.seriesEditIns.handleCopySeries()
      this.showSeriesEdit=true
    },

    handleSeriesChange(data) {
      console.log('系列数据改变',data);
      this.seriesData = JSON.parse(JSON.stringify(data))

      // 设置基准为第一个系列
      if(!this.sortBasisEdb){
        this.sortBasisEdb=data[0].seriesName
      }
  
      this.handleGetChartData()
    },

    handleUpdateRefrenceDate(e){
      console.log('更新引用日期',e);
      this.referenceDateOpts=e
    },

    handleShowRefrenceDate(){
      console.log('展示引用日期',this.referenceDateOpts);
      this.showReferenceDate=true
    }
  },
}
</script>

<style lang="scss">
.sectionalCombination-option-wrap {
  .sort-wrap {
    width: 90%;
    .el-radio {
      margin-right: 10px;
    }
  }
  .select-box {
    display: block;
    margin-top: 10px;
    .el-input__inner {
      height: 40px !important;
      line-height: 40px !important;
      padding: 0 15px !important;
    }
  }
  .date-set-wrap {
    width: 90%;
    margin-top: 10px;
    display: flex;
    justify-content: space-between;
    color: #409eff;
    font-size: 15px;
    cursor: pointer;
  }
  .add-cont {
    margin-top: 10px;
    color: #409eff;
    font-size: 16px;
    cursor: pointer;
    display: flex;
    align-items: center;
  }
  .series-data-wrap {
    padding: 30px 0 20px;
    .el-input__inner {
      height: 27px;
      line-height: 27px;
      padding: 0 4px;
    }
    .series-list {
      border: 1px solid #dcdfe6;
      .del-icon {
        position: absolute;
        right: 10px;
        font-size: 16px;
        color: #f00;
        cursor: pointer;
      }
      .copy-icon {
        position: absolute;
        right: 30px;
        font-size: 16px;
        color: #409eff;
        cursor: pointer;
      }
      .text_oneLine {
        color: #409eff;
      }
      .set-box {
        padding: 20px 20px 0;
        li {
          padding-bottom: 20px;
          &:last-child {
            padding-bottom: 0;
            margin-bottom: 0;
            border-bottom: none;
          }
        }
      }
    }
    .el-collapse-item__header {
      background-color: #f0f2f5;
      margin-bottom: 0;
      border-bottom: 1px solid #dcdfe6;
      padding: 0 30px;
      .el-collapse-item__arrow {
        position: absolute;
        left: 8px;
      }
    }

    .scatter-setting {
      display: flex;
      margin-bottom: 20px;
    }
  }
}
</style>