截面组合图

src/api/modules/chartApi.js

@@ -699,6 +699,11 @@ const dataBaseInterface = {
 			return http.post('/datamanage/chart_info/copy',params)
 		},
 
+		// 图表类型
+		chartTypeList:()=>{
+			return http.get('/datamanage/chart_info/type_list',{})
+		},
+
 
 		/* ================代码运算========================= */
 		/**
@@ -851,6 +856,11 @@ const dataBaseInterface = {
 		return http.post('/datamanage/chart_info/preview/time_section',params)
 	},
 
+	// 截面组合图预览数据
+	sectionalCombinationPreviewData:params=>{
+		return http.post('/datamanage/chart_info/preview/section_combine',params)
+	},
+
 	 /* 批量计算
 	 * @param {*} params 
 	 * CalculateId

src/components/chart/chartTypeSelect.vue

@@ -0,0 +1,70 @@
+<template>
+  <el-cascader
+    v-model="innerValue"
+    :options="options"
+    :show-all-levels="false"
+    :props="{
+      emitPath:false,
+      label:$i18nt.locale==='zh'?'ChartTypeName':'ChartTypeNameEn',
+      value:'ChartTypeId',
+      children:'Child'
+    }"
+    placeholder="请选择生成样式"
+    @change="handleChange"
+    style="width:100%"
+    popper-class="chart-type-select-wrap"
+  />
+</template>
+
+<script>
+import { dataBaseInterface } from '@/api/api.js';
+export default {
+  name: 'ChartTypeSelect',
+  props: {
+    value: {
+      type: [String, Number, Array],
+      default: () => null
+    },
+  },
+  data() {
+    return {
+      options:[],
+      innerValue: this.value
+    };
+  },
+  watch: {
+    value: {
+      handler(newValue) {
+        this.innerValue = newValue;
+      },
+      immediate: true // 在组件创建时立即执行处理函数
+    },
+    innerValue(newValue) {
+      this.$emit('input', newValue);
+    }
+  },
+  created() {
+    this.getOptions()
+  },
+  methods: {
+    getOptions(){
+      dataBaseInterface.chartTypeList().then(res=>{
+        if(res.Ret===200){
+          this.options=res.Data.List||[]
+        }
+      })
+    },
+    handleChange(value) {
+      this.$emit('change', value);
+    }
+  }
+};
+</script>
+
+<style lang="scss">
+.chart-type-select-wrap{
+  .el-cascader-menu__wrap{
+    height: 300px;
+  }
+}
+</style>

src/lang/commonLang.js

@@ -64,6 +64,10 @@ export default {
     complete_btn: {
       en: 'Complete',
       zh: '完成'
+    },
+    apply_btn:{
+      en: 'Apply',
+      zh: '应用'
     }
   },
   Table: {

src/utils/registryComponents.js

@@ -42,3 +42,7 @@ Vue.component('dataLoading',dataLoading)
 //无指标/图表/表格权限缺省
 import noDataAuth from '@/components/noDataAuth.vue';
 Vue.component('noDataAuth',noDataAuth)
+
+// 选择图表类型
+import chartTypeSelect from '@/components/chart/chartTypeSelect.vue'
+Vue.component('chartTypeSelect',chartTypeSelect)

src/views/dataEntry_manage/addChart.vue

@@ -26,19 +26,7 @@
 					:rules="chartRules"
 				>
 					<el-form-item :label="$t('EtaChartAddPage.label_chart_type')" prop="ChartType">
-						<el-select
-							v-model="chartInfo.ChartType"
-							placeholder="请选择生成样式"
-							style="width: 90%"
-						>
-							<el-option
-								v-for="item in styleArr"
-								:key="item.key"
-								:label="item.label"
-								:value="item.key"
-							>
-							</el-option>
-						</el-select>
+						<chartTypeSelect v-model="chartInfo.ChartType" style="width:90%"/>
 					</el-form-item>
 
 					<el-form-item :label="$t('EtaChartAddPage.label_chart_theme')" prop="Theme">
@@ -59,7 +47,7 @@
 					</el-form-item>
 
 					<el-form-item label="">
-						<div class="search-cont" v-if="chartInfo.ChartType!==10">
+						<div class="search-cont" v-if="![10,14].includes(chartInfo.ChartType)">
 							<div>
 								<label><!-- 选择指标 -->{{$t('Edb.choose_edb')}}：</label>
 								<el-radio-group v-model="edbFromType">
@@ -201,7 +189,7 @@
 					</div>
 					
 					<!-- 配置区  柱形 截面 雷达不需要-->
-          <el-collapse v-model="activeNames" class="target-list" v-if="tableData.length&&![7,10,11].includes(chartInfo.ChartType)">
+          <el-collapse v-model="activeNames" class="target-list" v-if="tableData.length&&![7,10,11,14].includes(chartInfo.ChartType)">
             <el-collapse-item v-for="(item,index) in tableData" :key="item.EdbInfoId" :disabled="[2,5].includes(chartInfo.ChartType)">
               <template slot="title">
                 <span class="text_oneLine">{{currentLang==='en'?(item.EdbNameEn||item.EdbName):item.EdbName}}</span>
@@ -352,7 +340,15 @@
 					/>
 
 					<!-- 截面组合图 -->
-					<sectional-combination-option/>
+					<sectional-combination-option 
+						ref="sectionalCombinationIns"
+						v-if="chartInfo.ChartType===14"
+						:chartInfo="chartInfo"
+						:defaultData="sectionalCombinationData"
+						@getData="getSectionalCombination"
+						@hideChart="tableData=[];"
+						@updateChart="handleUpdateSectionalCombinationChart"
+					/>
 
 
 					<!-- 标识区 标记线 图表说明 -->
@@ -597,6 +593,24 @@
 								<span class="editsty" @click="isShowSourceDialog=true"><!-- 编辑 -->{{$t('Chart.chart_edit_btn')}}</span>
 							</div>
 
+							<!-- 是否堆积 -->
+							<div v-if="showIsHeap">
+								<span>柱形堆积</span>
+								<el-tooltip
+                  content="开启时，该系列上展示数据点"
+                  placement="top"
+                >
+                  <i class="el-icon-info"></i>
+                </el-tooltip>
+                <el-switch
+                  style="margin-left: 20px"
+                  v-model="IsHeap"
+									@change="handleHeapChange"
+                >
+                </el-switch> 
+							</div>
+
+
 							<!-- 公历农历切换 只用于季节性图 -->
 							<el-radio-group
 								v-model="calendar_type"
@@ -682,7 +696,7 @@ import LegendEditDia from './components/LegendEditDia.vue';
 import markersSection from './components/markersSection.vue';
 import chartSourceEditDia from './components/chartSourceEditDialog.vue';
 import chartRelationEdbList from './components/chartReleationEdbTable.vue';
-import sectionalCombinationOption from './components/sectionalCombinationOption.vue';
+import sectionalCombinationOption from './components/sectionalCombination/sectionalCombinationOption.vue';
 export default {
   components: { 
 		Chart,
@@ -831,7 +845,7 @@ export default {
 						hasLimitChange = !limitSame
 					}
 					
-					if(![10,11].includes(this.chartInfo.ChartType)){
+					if(![10,11,14].includes(this.chartInfo.ChartType)){
 						//每个数据转换需要检测是否合法
 						for(let i=0;i<db_arr.length;i++){
 							const {IsConvert,ConvertType,ConvertValue} = this.updateData[i]
@@ -889,6 +903,7 @@ export default {
 											? this.select_date[0]
 											: '',
 								EndDate: this.year_select === 5 ? this.select_date[1] : '',
+								ExtraConfig:JSON.stringify({IsHeap:this.IsHeap?1:0})//时间序列组合图是否堆积控制
 							} 
 						: typePrams
 					if(![7,10,11].includes(this.chartInfo.ChartType)){

src/views/dataEntry_manage/chartSetting.vue

@@ -1741,12 +1741,18 @@ export default {
       this.setDefaultPreviewOption(); //设置默认预览配置项
 
       sessionStorage.setItem('defaultArr',JSON.stringify(res.Data.EdbInfoList));
-
+      
+      // 时序组合图控制是否堆叠
+      if(this.chartInfo.ChartType===6){
+        this.IsHeap=res.Data.DataResp.IsHeap===1?true:false
+      }
       const chartTypeMap = {
         7: this.initBarData, //柱形图
         10: this.initSectionScatterData, //截面散点
-        11: this.initRadarData //雷达图
+        11: this.initRadarData, //雷达图
+        14: this.initSectionalCombinationChart
       }
+      
       chartTypeMap[this.chartInfo.ChartType] && chartTypeMap[this.chartInfo.ChartType](res.Data);
 
     },
@@ -1955,6 +1961,10 @@ export default {
                 YMaxValue: String(this.chartLimit.max),
               })
             }
+          case 14:
+            typeChartParam = {
+              ...public_param,
+            }
             break
         }
 

src/views/dataEntry_manage/components/chart.vue

@@ -67,7 +67,7 @@ export default {
 			let themeOptions = this.setThemeOptions();
 			const options = {...defaultOpts,...themeOptions,...this.options}
 
-			console.log(themeOptions,this.options)
+			console.log('图表配置：',themeOptions,this.options,options)
 			
 			let thatThis = this
 			//stock不支持线形图只支持时间图 部分图用原始chart

src/views/dataEntry_manage/components/chartReleationEdbTable.vue

@@ -5,7 +5,7 @@
     highlight-current-row
     border
   >
-    <el-table-column type="expand" v-if="![10,11].includes(chartInfo.ChartType)">
+    <el-table-column type="expand" v-if="![10,11,14].includes(chartInfo.ChartType)">
       <template slot-scope="{row,$index}">
             <div class="expand-wrap">
                 <div class="data-change">

src/views/dataEntry_manage/components/sectionalCombination/axisSet.vue

@@ -0,0 +1,116 @@
+<template>
+  <el-dialog
+    :visible.sync="show"
+    :close-on-click-modal="false"
+    :append-to-body="true"
+    @close="cancelHandle"
+    custom-class="axis-set-dialog"
+    center
+    width="800px"
+    v-dialogDrag
+    top="8vh"
+    title="横纵轴设置"
+  >
+    <div class="axis-wrap">
+        <div class="label-text">横轴名称设置</div>
+        <div class="list-box">
+          <el-input class="item-box" v-model="item.Name" v-for="item,index in xData" :key="index"></el-input>
+        </div>
+    </div>
+    <div class="axis-wrap">
+        <div class="label-text">纵轴单位设置</div>
+        <div class="list-box">
+          <el-input class="item-box" v-model="yData.LeftName" v-if="seriesData.some(_=>_.IsAxis==1)"></el-input>
+          <el-input class="item-box" v-model="yData.RightName" v-if="seriesData.some(_=>_.IsAxis==0)"></el-input>
+          <el-input class="item-box" v-model="yData.RightTwoName" v-if="seriesData.some(_=>_.IsAxis==2)"></el-input>
+        </div>
+    </div>
+    <div class="btn-bottom">
+      
+      <el-button @click="cancelHandle"
+        ><!-- 取消 -->{{ $t("Dialog.cancel_btn") }}</el-button
+      >
+      <el-button type="primary"
+        @click="handleSave"
+        ><!-- 保存 -->{{ $t("Dialog.confirm_save_btn") }}</el-button
+      >
+    </div>
+  </el-dialog>
+</template>
+
+<script>
+export default {
+  props: {
+    show: {
+      type: Boolean,
+      default: false
+    },
+    XDataList:[],
+    UnitList:{},
+    seriesData:null
+  },
+  watch:{
+    show(n){
+      if(n){
+        this.xData=this.XDataList||[]
+        this.yData=this.UnitList
+      }
+    }
+  },
+  data() {
+    return {
+      xData:[],
+      yData:{
+        LeftName:'',
+				RightName:'',
+				RightTwoName:''
+      }
+    }
+  },
+  methods: {
+    cancelHandle() {
+      this.$emit("update:show", false);
+    },
+    handleSave(){
+      for (let item of this.xData) {
+        if(!item.Name){
+          this.$message.warning('横轴名称不能为空')
+          return false
+        }
+      }
+      this.$emit('change',{XDataList:this.xData,UnitList:this.yData})
+      this.cancelHandle()
+    }
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+.axis-set-dialog {
+  .axis-wrap{
+    margin-bottom: 30px;
+    .label-text{
+      padding: 13px 30px;
+      font-size: 18px;
+      border-bottom: 1px solid #C8CDD9;
+      background-color: #EBEFF6;
+    }
+    .list-box{
+      padding: 20px;
+      background-color: #F4F8FE ;
+      display: flex;
+      flex-wrap: wrap;
+      gap: 20px;
+      .item-box{
+        width: 30%;
+      }
+    }
+  }
+  .btn-bottom {
+    margin-top: 40px;
+    text-align: center;
+    padding: 30px 0;
+    position: relative;
+  }
+}
+</style>

src/views/dataEntry_manage/components/sectionalCombination/batchModifyDate.vue

@@ -0,0 +1,167 @@
+<template>
+  <el-dialog
+    :visible.sync="show"
+    :close-on-click-modal="false"
+    :append-to-body="true"
+    @close="cancelHandle"
+    custom-class="batchset-date-dialog"
+    center
+    width="600px"
+    v-dialogDrag
+    top="15vh"
+    title="批量设置日期"
+  >
+    <div class="top-flex-box">
+      <div style="display: flex; align-items: center">
+        <el-radio v-model="dateType" :label="1">指标最新日期</el-radio>
+        <div>
+          <label class="el-form-item__label">{{
+            $t("ETableChildren.advance_the_term")
+          }}</label>
+          <el-input
+            class="number-input"
+            v-model="MoveForward"
+            type="number"
+            :min="0"
+            style="margin-right: 10px; width: 60px"
+            @change="
+              (e) => {
+                MoveForward = Number(e);
+              }
+            "
+          />{{ $t("ETableChildren.term_ipt") }}
+        </div>
+      </div>
+      <div>
+        <el-radio v-model="dateType" :label="2">引用日期</el-radio>
+        <el-select v-model="refrenceDateName" placeholder="请选择日期" style="width: 120px">
+          <el-option v-for="opt in referenceDateOpts" :key="opt.name" :label="opt.name" :value="opt.name"></el-option>
+        </el-select>
+      </div>
+    </div>
+    <div>
+      <dateTrans v-model="dateTransfData" />
+    </div>
+    <div class="btn-bottom">
+      <el-button @click="cancelHandle"
+        ><!-- 取消 -->{{ $t("Dialog.cancel_btn") }}</el-button
+      >
+      <el-button type="primary" style="margin-right: 20px"
+        @click="handleApply"
+        ><!-- 应用 -->{{ $t("Dialog.apply_btn") }}</el-button
+      >
+      <el-tooltip class="item" effect="dark" content="批量设置指标日期,应用后覆盖原值" placement="top-start">
+        <i class="el-icon-info" style="position: relative;left:-15px"></i>
+      </el-tooltip>
+
+      <el-popover placement="top-start" width="400" trigger="hover">
+        <p style="padding: 20px; line-height: 25px" v-html="introHtml" />
+        <el-button class="tips-btn" type="text" slot="reference"
+          >公式说明</el-button
+        >
+      </el-popover>
+    </div>
+  </el-dialog>
+</template>
+
+<script>
+import dateTrans from './dateTrans.vue'
+export default {
+  components: { dateTrans },
+  props: {
+    show: {
+      type: Boolean,
+      default: false
+    },
+    referenceDateOpts:[]
+  },
+  watch: {
+    show(n){
+      if(n){
+        this.dateType=1
+        this.MoveForward=0
+        this.dateTransfData=[]
+        this.refrenceDateName=''
+      }
+    }
+  },
+  computed: {
+    introHtml() {
+      return `
+        <p>批量设置日期说明：</p>
+        <p>1、默认未选中任何选项，无需回显上次配置项；</p>
+        <p>2、进行批量设置日期，应用后，覆盖该系列的所有已添加指标的日期选择；</p>
+        <p>3、进行批量设置日期，应用后，该系列添加更多指标时，使用该设置日期的选项；</p>
+        <p>4、应用文案说明如下：</p>
+      `
+    }
+  },
+  data() {
+    return {
+      dateType: 1,
+      MoveForward: 0,
+      dateTransfData: [],//日期变换数据
+      refrenceDateName:''
+    }
+  },
+  methods: {
+    cancelHandle() {
+      this.$emit("update:show", false);
+    },
+    handleApply(){
+      this.$emit('apply',{
+        dateType:this.dateType,
+        MoveForward:this.MoveForward,
+        dateTransfData:this.dateTransfData,
+        refrenceDateName:this.refrenceDateName
+      })
+      this.cancelHandle()
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+.batchset-date-dialog {
+  .top-flex-box {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    gap: 0 10px;
+    .el-radio {
+      margin-right: 10px !important;
+    }
+    .el-input__inner{
+      padding: 0 5px;
+    }
+  }
+  .date-change-ways {
+    margin-top: 20px;
+    padding-left: 0;
+    .header {
+      label {
+        width: auto;
+        margin-left: 0;
+      }
+    }
+    .date-change-list {
+      padding-left: 0;
+      .el-tag.el-tag--info {
+        background-color: #dae8ff;
+        border-color: #dae8ff;
+        color: #075eee;
+      }
+    }
+  }
+  .btn-bottom {
+    text-align: center;
+    padding: 30px 0;
+    position: relative;
+    .tips-btn {
+      position: absolute;
+      bottom: 20px;
+      right: 0;
+    }
+  }
+}
+</style>

src/views/dataEntry_manage/components/sectionalCombination/dateTrans.vue

@@ -0,0 +1,185 @@
+<template>
+  <div class="date-change-ways">
+    <div class="header date-item">
+      <label class="el-form-item__label">{{$t('ETableChildren.date_change_label')}}</label>
+                
+      <el-select v-model="dateChangeSelect" :placeholder="$t('ETable.Msg.please_select')" style="width:110px">
+        <el-option :label="$t('ETableChildren.date_displacement_label')" :value="1"/>
+        <el-option :label="$t('ETableChildren.specified_frequency_tag')" :value="2"/>
+      </el-select>
+
+      <el-button type="text" style="margin: 0 10px;" @click="addDateChange">{{$t('ETable.Btn.add_btn')}}</el-button>
+    </div>
+    
+    <ul v-if="dateChangeArr.length" class="date-change-list">
+      <li v-for="(dateItem,index) in dateChangeArr" :key="dateItem.ChangeType" class="date-change-li">
+
+        <div v-if="dateItem.ChangeType===1" class="date-item">
+          <el-tag type="info" style="margin-right:15px">{{$t('ETableChildren.date_displacement_label')}}</el-tag>
+          <div>
+            <el-input
+              v-model="dateItem.Day"
+              type="number"
+              style="margin-right:10px;width:80px"
+              @change="e => {dateItem.Day=Number(e);}"
+            />{{$t('ETable.Date.day')}}
+            <el-input
+              v-model="dateItem.Month"
+              type="number"
+              style="margin-right:10px;width:80px"
+              @change="e => {dateItem.Month=Number(e);}"
+            />{{$t('ETable.Date.month')}}
+            <el-input
+              v-model="dateItem.Year"
+              type="number"
+              style="margin-right:10px;width:80px"
+              @change="e => {dateItem.Year=Number(e);}"
+            />{{$t('ETable.Date.year')}}
+          </div>
+          <i class="el-icon-delete" @click="removeDateItem(index)"></i>
+        </div>
+
+        <div v-else-if="dateItem.ChangeType===2" class="date-item">
+          <el-tag type="info" style="margin-right:15px">{{$t('ETableChildren.specified_frequency_tag')}}</el-tag>
+          <el-select
+              style="max-width: 120px;"
+              v-model="dateItem.Frequency"
+              :placeholder="$t('OnlineExcelPage.please_select_frequency')"
+              @change="dateItem.FrequencyDay=frequencyDaysOptions[0].name;"
+          >
+            <el-option
+                v-for="item in frequencyOptions"
+                :key="item.value"
+                :label="item.name"
+                :value="item.value"
+            />
+          </el-select>
+
+          <el-select
+              style="max-width: 120px;margin:0 10px"
+              v-model="dateItem.FrequencyDay"
+              :placeholder="$t('ETable.Msg.please_select')"
+          >
+            <el-option
+                v-for="item in frequencyDaysOptions"
+                :key="item.name"
+                :label="item.lable"
+                :value="item.name"
+            />
+          </el-select>
+
+          <i class="el-icon-delete" @click="removeDateItem(index)"></i>
+        </div>
+      </li>
+    </ul>
+  </div>
+</template>
+<script>
+export default {
+  props:{
+    value:{
+      default:()=>[]
+    },
+  },
+  watch: {
+    value: {
+      handler(newValue) {
+        this.dateChangeArr = newValue||[];
+      },
+      immediate: true // 在组件创建时立即执行处理函数
+    },
+    dateChangeArr:{
+      handler(newValue) {
+        this.$emit('input', newValue);
+      },
+      deep: true
+    }
+  },
+  computed: {
+    frequencyDaysOptions() {
+      let typeMap = {
+        '本周': [
+          { name: '周一' ,lable: this.$t('ETable.Date.monday') },
+          { name: '周二' ,lable: this.$t('ETable.Date.tuesday')},
+          { name: '周三' ,lable: this.$t('ETable.Date.wednesday')},
+          { name: '周四' ,lable: this.$t('ETable.Date.thursday')},
+          { name: '周五' ,lable: this.$t('ETable.Date.friday')},
+          { name: '周六' ,lable: this.$t('ETable.Date.saturday')},
+          { name: '周日' ,lable: this.$t('ETable.Date.sunday')},
+        ]
+      }
+      
+      let obj = this.dateChangeArr.find(_ => _.ChangeType===2);
+      if(!obj) return []
+
+      return typeMap[obj.Frequency] 
+        ? typeMap[obj.Frequency] 
+        : [
+          {name:'第一天',lable: this.$t('ETable.Date.first_day')},
+          {name:'最后一天',lable: this.$t('ETable.Date.last_day')}
+        ]
+    },
+    frequencyOptions(){
+      return  [
+        { name: this.$t('ETable.Date.this_week'), value: '本周' },
+        { name: this.$t('ETable.Date.this_ten_days'), value: '本旬' },
+        { name: this.$t('ETable.Date.this_month'), value: '本月' },
+        { name: this.$t('ETable.Date.this_season'), value: '本季' },
+        { name: this.$t('ETable.Date.this_half_year'), value: '本半年' },
+        { name: this.$t('ETable.Date.this_year'), value: '本年' },
+      ]
+    }
+  },
+  data() {
+    return {
+      dateChangeSelect: 1,
+      dateChangeArr: [],
+    }
+  },
+  methods:{
+    /* 提加日期变换数组 */
+    addDateChange() {
+      let haveObj = this.dateChangeArr.find(_ => _.ChangeType===this.dateChangeSelect);
+      if(haveObj) return this.$message.warning(this.dateChangeSelect===1?this.$t('ETableChildren.added_date_offset_msg') :this.$t('ETableChildren.added_frequency_offset_msg') )
+      let item = {
+        ChangeType: this.dateChangeSelect,
+        Day: 0,
+        Month: 0,
+        Year: 0,
+        Frequency: '本周',
+        FrequencyDay: '周一'
+      }
+
+      this.dateChangeArr.push(item)
+    },
+
+    removeDateItem(index) {
+      this.dateChangeArr.splice(index,1)
+    }
+  },
+}
+</script>
+<style scoped lang='scss'>
+.date-change-ways {
+  padding-left: 20px;
+  .date-change-list {
+    padding-left: 68px;
+  }
+  .date-change-li {
+    margin: 10px 0;
+  }
+  .header {
+    label { width: 100px;text-align: right;margin-left: -20px;}
+  }
+  .date-item {
+    display: flex;
+    align-items: center;
+    .el-icon-delete {
+      color: #f00;
+      font-size: 16px;
+      margin:0 10px;
+      cursor: pointer;
+    }
+  }
+}
+</style>

src/views/dataEntry_manage/components/referenceDateSet.vue → src/views/dataEntry_manage/components/sectionalCombination/referenceDateSet.vue

@@ -26,7 +26,7 @@
           style="width: 220px"
         ></el-input>
         <div class="date-type-box">
-          <el-radio v-model="item.dateType" :label="1">指标最新日期</el-radio>
+          <el-radio v-model="item.dateType" :label="0">指标最新日期</el-radio>
           <div style="width: 300px">
             <selectTarget
               ref="selectRef"
@@ -44,7 +44,7 @@
               <span>频度:</span>
               <span>{{ item.selectEdbData.Frequency }}</span>
               <span>最新日期:</span>
-              <span>{{ item.selectEdbData.LatestDate }}</span>
+              <span>{{ item.selectEdbData.EndDate }}</span>
             </template>
           </div>
           <div>
@@ -66,14 +66,11 @@
           </div>
         </div>
         <div class="date-type-box">
-          <el-radio v-model="item.dateType" :label="2">系统日期</el-radio>
+          <el-radio v-model="item.dateType" :label="1">系统日期</el-radio>
           <span>{{ today }}</span>
         </div>
         <div>
-          <dateMoveWaySec
-            ref="dateMoveWayRef"
-            :defaultArr="item.dateTransfData"
-          />
+          <dateTrans v-model="item.dateTransfData" />
         </div>
       </div>
     </div>
@@ -85,9 +82,18 @@
       <el-button @click="cancelHandle"
         ><!-- 取消 -->{{ $t("Dialog.cancel_btn") }}</el-button
       >
-      <el-button type="primary" style="margin-right: 20px"
+      <el-button
+        type="primary"
+        style="margin-right: 20px"
+        @click="handleConfirm"
         ><!-- 保存 -->{{ $t("Dialog.confirm_save_btn") }}</el-button
       >
+      <el-popover placement="top-start" width="400" trigger="hover">
+        <p style="padding: 20px; line-height: 25px" v-html="introHtml" />
+        <el-button class="tips-btn" type="text" slot="reference"
+          >公式说明</el-button
+        >
+      </el-popover>
     </div>
   </el-dialog>
 </template>
@@ -95,13 +101,39 @@
 <script>
 import moment from 'moment';
 import selectTarget from '@/views/chartRelevance_manage/components/selectTarget.vue';
-import dateMoveWaySec from '@/views/datasheet_manage/components/dateMoveWaySection.vue'
+import dateTrans from './dateTrans.vue'
 export default {
-  components: { selectTarget, dateMoveWaySec },
+  components: { selectTarget, dateTrans },
   props: {
     show: {
       type: Boolean,
       default: false
+    },
+    defaultDate: null,
+  },
+  watch: {
+    show(n){
+      if (n) {
+        console.log(this.defaultDate);
+        if (this.defaultDate.length) {
+          this.list = JSON.parse(JSON.stringify(this.defaultDate))
+        } else {
+          this.list = [{
+            name: '',
+            dateType: 0,//0指标最新日期 1系统日期
+            selectEdbData: null,
+            MoveForward: 0,//期数前移
+            dateTransfData: [],//日期变换数据
+          }]
+        }
+      }
+    }
+  },
+  computed: {
+    introHtml() {
+      return `
+        <p>公式说明：<p>
+      `
     }
   },
   data() {
@@ -110,10 +142,10 @@ export default {
       list: [
         {
           name: '',
-          dateType: 1,//1指标最新日期 2系统日期
+          dateType: 0,//0指标最新日期 1系统日期
           selectEdbData: null,
           MoveForward: 0,//期数前移
-          dateTransfData: null,//日期变换数据
+          dateTransfData: [],//日期变换数据
         }
       ]
     }
@@ -125,19 +157,41 @@ export default {
     chooseEdb(e, index) {
       console.log('选择的指标', e);
       this.list[index].selectEdbData = e || null
+      // 设置name
+      if (this.list[index].dateType === 0 && !this.list[index].name && e) {
+        this.list[index].name = e.LatestDate
+      }
     },
 
     handleDelListItem(index) {
       this.list.splice(index, 1)
     },
 
+    handleConfirm() {
+      let flag = true
+      this.list.forEach(item => {
+        if (!item.name || (item.dateType == 0 && !item.selectEdbData)) {
+          flag = false
+        }
+      });
+      if (!flag) {
+        this.$message.warning('请完善表单')
+        return
+      }
+
+
+      this.$emit('change', JSON.parse(JSON.stringify(this.list)))
+      this.$message.success('保存成功')
+      this.cancelHandle()
+    },
+
     handleAddListItem() {
       this.list.push({
         name: '',
-        dateType: 1,//1指标最新日期 2系统日期
+        dateType: 0,//0指标最新日期 1系统日期
         selectEdbData: null,
         MoveForward: 0,//期数前移
-        dateTransfData: null,//日期变换数据
+        dateTransfData: [],//日期变换数据
       })
     }
   },
@@ -217,6 +271,12 @@ export default {
   .btn-bottom {
     text-align: center;
     padding: 30px 0;
+    position: relative;
+    .tips-btn {
+      position: absolute;
+      bottom: 20px;
+      right: 0;
+    }
   }
 }
 </style>

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

@@ -0,0 +1,476 @@
+<template>
+  <div class="sectionalCombination-option-wrap">
+    <div class="sort-wrap">
+      <div>
+        <el-tooltip
+          effect="dark"
+          content="默认排序为每个系列添加指标的顺序，切换升序/降序时，需选择基准系列，按照该系列的数值大小对横轴重排"
+          placement="top-start"
+        >
+          <span>
+            <span>排序规则</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">默认</el-radio>
+          <el-radio :label="1">升序</el-radio>
+          <el-radio :label="2">降序</el-radio>
+        </el-radio-group>
+      </div>
+      <el-select
+        class="select-box"
+        v-model="sortBasisEdb"
+        placeholder="请选择基准"
+        @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">引用日期设置</span>
+      <span @click="handleShowAxis">横纵轴设置</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="showSeriesEdit = true">{{
+              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>数据点展示</span>
+                <el-tooltip
+                  content="开启时，该系列上展示数据点"
+                  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>数值展示</span>
+                <el-tooltip content="开启时，该系列上展示数值" 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>添加系列</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: {
+    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引用日期
+                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
+    },
+
+    // 删除系列
+    handleDelSeries(item,index){
+      this.seriesData.splice(index,1)
+      // 删完了
+      if(this.seriesData.length===0){
+        this.sortBasisEdb=''
+        this.XDataList=[]
+        this.UnitList={
+          LeftName:'',
+          RightName:'',
+          RightTwoName:''
+        }
+        this.$emit('hideChart')
+      }else{
+        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>

src/views/dataEntry_manage/components/sectionalCombination/seriesEdit.vue

@@ -0,0 +1,340 @@
+<template>
+  <el-dialog
+    :visible.sync="show"
+    :close-on-click-modal="false"
+    :append-to-body="true"
+    @close="cancelHandle"
+    custom-class="series-set-dialog"
+    center
+    width="960px"
+    v-dialogDrag
+    top="8vh"
+    title="添加系列"
+  >
+    <div class="content-wrap">
+      <div class="top-nav-wrap">
+        <el-button
+          v-for="(item, index) in list"
+          :key="index"
+          type="primary"
+          :plain="activeIndex !== index"
+          @click="handleChangeSeries(index)"
+          >{{ item.seriesName || "新系列" }}({{
+            item.edbList.length
+          }})</el-button
+        >
+        <el-button
+          class="add-btn"
+          type="default"
+          icon="el-icon-plus"
+          plain
+          @click="handleAddSeries"
+          >添加系列</el-button
+        >
+      </div>
+      <series-item-wrap
+        v-model="list[activeIndex]"
+        :referenceDateOpts="referenceDateOpts"
+        :disRightTwoAxis="
+          list.findIndex((_) => _.IsAxis === 0) === -1 ||
+          (list.findIndex((_) => _.IsAxis === 0) === activeIndex &&
+            list.filter((_) => _.IsAxis === 0).length === 1)
+        "
+        @del="handleDelListItem"
+      />
+    </div>
+
+    <div class="btn-bottom">
+      <el-button @click="cancelHandle"
+        ><!-- 取消 -->{{ $t("Dialog.cancel_btn") }}</el-button
+      >
+      <el-button type="primary" style="margin-right: 20px" @click="handleSave"
+        ><!-- 保存 -->{{ $t("Dialog.confirm_save_btn") }}</el-button
+      >
+      <el-popover placement="top-start" width="400" trigger="hover">
+        <p style="padding: 20px; line-height: 25px" v-html="introHtml" />
+        <el-button class="tips-btn" type="text" slot="reference"
+          >公式说明</el-button
+        >
+      </el-popover>
+    </div>
+  </el-dialog>
+</template>
+
+<script>
+import seriesItemWrap from './seriesItemWrap.vue';
+import { defaultOpts } from '@/utils/defaultOptions';
+export default {
+  name: "sectionalCombinationSeriesEdit",
+  components: { seriesItemWrap },
+  props: {
+    show: {
+      type: Boolean,
+      default: false
+    },
+    referenceDateOpts: [],
+    defaultData: null,
+    chartInfo: {
+      type: Object
+    },
+  },
+  computed: {
+    introHtml() {
+      return `
+        <p>公式说明：<p>
+      `
+    }
+  },
+  watch: {
+    show(n) {
+      if (n) {
+        if (this.defaultData && this.defaultData.length > 0) {
+          this.initData()
+        } else {
+          this.list = [
+            {
+              seriesName: '',
+              seriesNameEn: '',
+              seriesChartType: 'spline',//系列图表展示类型
+              IsAxis: 1,
+              ChartColor: '',
+              ChartWidth: 1,
+              showDataPoint: false,
+              showDataValue: false,
+
+              edbList: [
+                {
+                  ChartSeriesEdbMappingId: 0,
+                  ChartSeriesId: 0,
+                  dateType: 0,//0指标最新日期 1引用日期
+                  selectEdbData: null,
+                  MoveForward: 0,//期数前移
+                  dateTransfData: [],//日期变换数据
+                  refrenceDateName: '',//选择的引用日期
+                },
+                {
+                  ChartSeriesEdbMappingId: 0,
+                  ChartSeriesId: 0,
+                  dateType: 0,//0指标最新日期 1引用日期
+                  selectEdbData: null,
+                  MoveForward: 0,//期数前移
+                  dateTransfData: [],//日期变换数据
+                  refrenceDateName: '',//选择的引用日期
+                },
+                {
+                  ChartSeriesEdbMappingId: 0,
+                  ChartSeriesId: 0,
+                  dateType: 0,//0指标最新日期 1引用日期
+                  selectEdbData: null,
+                  MoveForward: 0,//期数前移
+                  dateTransfData: [],//日期变换数据
+                  refrenceDateName: '',//选择的引用日期
+                }
+              ]
+            }
+          ]
+        }
+      }
+    }
+  },
+  data() {
+    return {
+      activeIndex: 0,
+
+      list: [
+        {
+          seriesName: '',
+          seriesNameEn: '',
+          seriesChartType: 'spline',//系列图表展示类型
+          IsAxis: 1,
+          ChartColor: '',
+          ChartWidth: 1,
+          showDataPoint: false,
+          showDataValue: false,
+
+          edbList: [
+            {
+              ChartSeriesEdbMappingId: 0,
+              ChartSeriesId: 0,
+              dateType: 0,//0指标最新日期 1引用日期
+              selectEdbData: null,
+              MoveForward: 0,//期数前移
+              dateTransfData: [],//日期变换数据
+              refrenceDateName: '',//选择的引用日期
+            },
+            {
+              ChartSeriesEdbMappingId: 0,
+              ChartSeriesId: 0,
+              dateType: 0,//0指标最新日期 1引用日期
+              selectEdbData: null,
+              MoveForward: 0,//期数前移
+              dateTransfData: [],//日期变换数据
+              refrenceDateName: '',//选择的引用日期
+            },
+            {
+              ChartSeriesEdbMappingId: 0,
+              ChartSeriesId: 0,
+              dateType: 0,//0指标最新日期 1引用日期
+              selectEdbData: null,
+              MoveForward: 0,//期数前移
+              dateTransfData: [],//日期变换数据
+              refrenceDateName: '',//选择的引用日期
+            }
+          ]
+        }
+      ]
+    }
+  },
+  methods: {
+    initData() {
+      const arr = JSON.parse(JSON.stringify(this.defaultData))
+      this.list = arr
+    },
+
+    cancelHandle() {
+      this.$emit("update:show", false);
+    },
+
+    handleAddSeries() {
+      this.list.push({
+        seriesName: '',
+        seriesNameEn: '',
+        seriesChartType: 'spline',//系列图表展示类型
+        IsAxis: 1,
+        ChartColor: '',
+        ChartWidth: 1,
+        showDataPoint: false,
+        showDataValue: false,
+        edbList: [
+          {
+            ChartSeriesEdbMappingId: 0,
+            ChartSeriesId: 0,
+            dateType: 0,//0指标最新日期 1系统日期
+            selectEdbData: null,
+            MoveForward: 0,//期数前移
+            dateTransfData: [],//日期变换数据
+            refrenceDateName: '',//选择的引用日期
+          },
+          {
+            dateType: 0,//0指标最新日期 1系统日期
+            selectEdbData: null,
+            MoveForward: 0,//期数前移
+            dateTransfData: [],//日期变换数据
+            refrenceDateName: '',//选择的引用日期
+          },
+          {
+            dateType: 0,//0指标最新日期 1系统日期
+            selectEdbData: null,
+            MoveForward: 0,//期数前移
+            dateTransfData: [],//日期变换数据
+            refrenceDateName: '',//选择的引用日期
+          }
+        ]
+      })
+
+      this.$nextTick(() => {
+        this.activeIndex = this.list.length - 1
+      })
+
+    },
+
+    handleDelListItem(){
+      this.list.splice(this.activeIndex,1)
+      this.activeIndex=0
+    },
+
+    // 处理复制情况
+    handleCopySeries() {
+      this.$nextTick(() => {
+        this.activeIndex = this.list.length - 1
+      })
+    },
+
+    handleChangeSeries(index) {
+      this.activeIndex = index
+    },
+
+    checkArray(arr) {
+      if (!Array.isArray(arr) || arr.length === 0) return false;
+
+      // 用于检查重复的 seriesName
+      const seriesNameSet = new Set();
+
+      // 检查所有 edbList 是否一样长，并且 selectEdbData 都不是 null
+      const edbListLength = arr[0].edbList.length;
+      for (let item of arr) {
+        // 检查 seriesName 是否重复
+        if (seriesNameSet.has(item.seriesName)) {
+          this.$message.warning('系列名称重复,请调整')
+          return false;
+        }
+        seriesNameSet.add(item.seriesName);
+
+        // 检查 edbList 长度
+        if (item.edbList.length !== edbListLength) {
+          this.$message.warning('系列指标数量不一致，请调整 ')
+          return false;
+        }
+
+        // 检查 selectEdbData 是否都不是 null
+        for (let edbItem of item.edbList) {
+          if (edbItem.selectEdbData === null) {
+            this.$message.warning('指标为空，请检查')
+            return false;
+          }
+        }
+      }
+
+      return true;
+    },
+
+
+    handleSave() {
+      // 校验系列名称
+      if (!this.checkArray(this.list)) return
+
+      const arr = JSON.parse(JSON.stringify(this.list))
+      // 处理图表配置
+      let themeOpt = this.chartInfo.ChartThemeStyle ? JSON.parse(this.chartInfo.ChartThemeStyle) : null;
+      arr.forEach((item, index) => {
+        item.ChartColor = item.ChartColor || (themeOpt && themeOpt.colorsOptions[index] || defaultOpts.colors[index]);
+        item.ChartWidth = item.ChartWidth || (themeOpt && themeOpt.lineOptionList[index].lineWidth || 1);
+      });
+      this.$emit('change', arr)
+      this.cancelHandle()
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.series-set-dialog {
+  .content-wrap {
+    .top-nav-wrap {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 10px;
+      padding-bottom: 10px;
+      border-bottom: 1px solid #efefef;
+      margin-bottom: 10px;
+      .el-button {
+        margin-left: 0 !important;
+      }
+      .add-btn {
+        background: #ffffff;
+        border-color: #0052d9;
+        color: #0052d9;
+      }
+    }
+  }
+  .btn-bottom {
+    padding: 30px;
+    text-align: center;
+    position: relative;
+    .tips-btn {
+      position: absolute;
+      right: 0;
+    }
+  }
+}
+</style>

src/views/dataEntry_manage/components/sectionalCombination/seriesItemWrap.vue

@@ -0,0 +1,283 @@
+<template>
+  <div class="series-item-wrap">
+    <div class="series-content-wrap">
+      <div class="top-box">
+        <el-input
+          style="width: 200px"
+          placeholder="系列名称"
+          v-model="compData.seriesName"
+        ></el-input>
+        <div style="width: 200px">
+          <span style="margin-right: 3px"
+            ><!-- 生成样式 -->{{ $t("Chart.label_create_sty") }}：</span
+          >
+          <el-select
+            v-model="compData.seriesChartType"
+            placeholder="请选择生成样式"
+            style="width: 120px"
+          >
+            <el-option
+              v-for="item in chartItemStyleArr"
+              :key="item.key"
+              :label="item.label"
+              :value="item.value"
+            >
+            </el-option>
+          </el-select>
+        </div>
+        <el-radio-group v-model="compData.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="disRightTwoAxis"
+            ><!-- 右2轴 -->{{ $t("Chart.Detail.rtwo_axis") }}</el-radio-button
+          >
+        </el-radio-group>
+        <!-- 批量设置日期 -->
+        <el-button
+          type="text"
+          style="margin-left: auto"
+          @click="showBatchModifyDate = true"
+          >批量设置日期</el-button
+        >
+      </div>
+      <div class="edb-list-wrap">
+        <div class="edb-item-box" v-for="(item, index) in compData.edbList" :key="index">
+          <img
+            class="btn-del"
+            src="~@/assets/img/icons/delete-red.png"
+            alt=""
+            @click="handleDelListItem(index)"
+          />
+          <div class="top-flex-box">
+            <div style="width: 300px">
+              <selectTarget
+                ref="selectRef"
+                :defaultId="
+                  item.selectEdbData ? item.selectEdbData.EdbInfoId : ''
+                "
+                :defaultOpt="item.selectEdbData ? [item.selectEdbData] : []"
+                :selectStyleType="3"
+                selectBoxWidth="105px"
+                @select="chooseEdb($event, index)"
+              />
+            </div>
+            <div style="display: flex; align-items: center">
+              <el-radio v-model="item.dateType" :label="0"
+                >指标最新日期</el-radio
+              >
+              <div>
+                <label class="el-form-item__label">{{
+                  $t("ETableChildren.advance_the_term")
+                }}</label>
+                <el-input
+                  class="number-input"
+                  v-model="item.MoveForward"
+                  type="number"
+                  :min="0"
+                  style="margin-right: 10px; width: 60px"
+                  @change="
+                    (e) => {
+                      item.MoveForward = Number(e);
+                    }
+                  "
+                />{{ $t("ETableChildren.term_ipt") }}
+              </div>
+            </div>
+            <div>
+              <el-radio v-model="item.dateType" :label="1">引用日期</el-radio>
+              <el-select v-model="item.refrenceDateName" placeholder="请选择日期" style="width: 120px">
+                <el-option v-for="opt in referenceDateOpts" :key="opt.name" :label="opt.name" :value="opt.name"></el-option>
+              </el-select>
+            </div>
+          </div>
+          <div v-if="item.dateType === 0">
+            <dateTrans
+              v-model="item.dateTransfData"
+            />
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="add-more-btn" @click="handleAddListItem">
+      <img src="~@/assets/img/icons/add_blue_new.png" alt="" />
+      <span>添加更多指标{{canRightTwoAxis}}</span>
+    </div>
+
+    <batchModifyDate :show.sync="showBatchModifyDate" :referenceDateOpts="referenceDateOpts" @apply="handleBatchModifyDate"/>
+  </div>
+</template>
+
+<script>
+import dateTrans from './dateTrans.vue'
+import selectTarget from '@/views/chartRelevance_manage/components/selectTarget.vue';
+import batchModifyDate from './batchModifyDate.vue';
+export default {
+  name:"SeriesItemWrap",
+  components: { selectTarget,dateTrans,batchModifyDate },
+  props:{
+    value:null,
+    disRightTwoAxis:{
+      type:Boolean,
+      default:false
+    },
+    referenceDateOpts:[]
+  },
+  data() {
+    return {
+      chartItemStyleArr: [
+        { label: '曲线图', key: 1, value: 'spline' },
+        { label: '折线图', key: 2, value: 'line' },
+        { label: '柱状图', key: 4, value: 'column' },
+      ],//可选样式
+      showBatchModifyDate:false,// 批量设置日期
+
+      compData:this.value,
+    }
+  },
+  watch: {
+    value: {
+      handler(newValue) {
+        this.compData = newValue;        
+      },
+      immediate: true // 在组件创建时立即执行处理函数
+    },
+    compData:{
+      handler(newValue) {
+        this.$emit('input', newValue);
+      },
+      deep: true
+    }
+  },
+  methods: {
+    chooseEdb(e, index) {
+      console.log('选择的指标', e);
+      this.compData.edbList[index].selectEdbData = e || null
+      if(e&&!this.compData.seriesName){//设置系列名称
+        this.compData.seriesName=e.LatestDate
+      }
+    },
+
+    handleDelListItem(index) {
+      this.compData.edbList.splice(index, 1)
+      if(this.compData.edbList.length===0){
+        this.$emit('del')
+      }
+    },
+
+    handleAddListItem(){
+      this.compData.edbList.push({
+        dateType: 0,//0指标最新日期 1系统日期
+        selectEdbData: null,
+        MoveForward: 0,//期数前移
+        dateTransfData: [],//日期变换数据
+        refrenceDateName:'',//选择的引用日期
+      })
+    },
+
+    // 批量覆盖日期变换
+    handleBatchModifyDate(data){
+      this.compData.edbList.forEach((item,index) => {
+        item.dateType=data.dateType
+        item.MoveForward=data.MoveForward
+        item.dateTransfData=data.dateTransfData
+        item.refrenceDateName=data.refrenceDateName
+      });
+    }
+  },
+}
+</script>
+
+<style lang="scss">
+.series-content-wrap{
+  .edb-list-wrap{
+    .edb-item-box{
+      .top-flex-box{
+          .el-radio{
+            margin-right: 10px !important;
+          }
+      }
+      .date-change-ways {
+        margin-top: 20px;
+        padding-left: 0;
+        .header {
+          label {
+            width: auto;
+            margin-left: 0;
+          }
+        }
+        .date-change-list {
+          padding-left: 0;
+          .el-tag.el-tag--info {
+            background-color: #dae8ff;
+            border-color: #dae8ff;
+            color: #075eee;
+          }
+        }
+      }
+    }
+  }
+}
+</style>
+<style lang="scss" scoped>
+.series-item-wrap {
+    .add-more-btn {
+      display: inline-block;
+      cursor: pointer;
+      color: #075eee;
+      img {
+        width: 20px;
+        height: 20px;
+        margin-right: 5px;
+        vertical-align: middle;
+      }
+      span {
+        display: inline-block;
+        line-height: 20px;
+        position: relative;
+        top: 2px;
+      }
+    }
+     
+  .series-content-wrap{
+    .top-box{
+      display: flex;
+      gap: 0 20px;
+      align-items: center;
+    }
+    .edb-list-wrap{
+      margin: 30px 0;
+      max-height: 600px;
+      overflow-y: auto;
+      .edb-item-box{
+        padding: 20px;
+        background-color: #F5F7F9;
+        border-radius: 4px;
+        width: 90%;
+        position: relative;
+        margin-bottom: 20px;
+        .btn-del {
+          position: absolute;
+          right: -25px;
+          width: 20px;
+          height: 20px;
+          top: 50%;
+          transform: translateY(-50%);
+          cursor: pointer;
+        }
+        .top-flex-box{
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+          gap: 0 10px;
+        }
+      }
+    }
+    
+  }
+}
+</style>

src/views/dataEntry_manage/components/sectionalCombinationOption.vue

@@ -1,107 +0,0 @@
-<template>
-  <div class="sectionalCombination-option-wrap">
-    <div class="sort-wrap">
-      <div>
-        <el-tooltip
-          effect="dark"
-          content="默认排序为每个系列添加指标的顺序，切换升序/降序时，需选择基准系列，按照该系列的数值大小对横轴重排"
-          placement="top-start"
-        >
-          <span>
-            <span>排序规则</span>
-            <i class="el-icon-info"></i>
-          </span>
-        </el-tooltip>
-        <el-radio-group v-model="sortType" style="margin-left: 20px">
-          <el-radio :label="0">默认</el-radio>
-          <el-radio :label="1">升序</el-radio>
-          <el-radio :label="2">降序</el-radio>
-        </el-radio-group>
-      </div>
-      <el-select
-        class="select-box"
-        v-model="sortBasisEdb"
-        placeholder="请选择基准"
-      >
-        <el-option
-          v-for="item in sortBasisOpts"
-          :key="item.value"
-          :label="item.label"
-          :value="item.value"
-        >
-        </el-option>
-      </el-select>
-    </div>
-    <div class="date-set-wrap">
-      <span @click="showReferenceDate=true">引用日期设置</span>
-      <span>横纵轴设置</span>
-    </div>
-    <div class="add-cont">
-      <img
-        src="~@/assets/img/set_m/add_ico.png"
-        alt=""
-        style="width: 16px; height: 16px; margin-right: 10px"
-      />
-      <span>添加系列</span>
-    </div>
-
-    <!-- 引用日期设置 -->
-    <referenceDateSet 
-      :show.sync="showReferenceDate" 
-    />
-  </div>
-</template>
-
-<script>
-import referenceDateSet from './referenceDateSet.vue'
-export default {
-  components: { referenceDateSet },
-  data() {
-    return {
-      sortType: 0,
-      sortBasisEdb: '',
-      sortBasisOpts: [],
-
-      showReferenceDate: false,
-
-    }
-  },
-}
-</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;
-  }
-}
-</style>

src/views/dataEntry_manage/editChart.vue

@@ -33,7 +33,8 @@
 					:rules="chartRules"
 				>
 					<el-form-item :label="$t('EtaChartAddPage.label_chart_type')" prop="ChartType">
-						<el-select
+						<chartTypeSelect v-model="chartInfo.ChartType" style="width:90%"/>
+						<!-- <el-select
 							v-model="chartInfo.ChartType"
 							placeholder="请选择生成样式"
 							style="width: 90%"
@@ -46,7 +47,7 @@
 								:value="item.key"
 							>
 							</el-option>
-						</el-select>
+						</el-select> -->
 					</el-form-item>
 
 					<el-form-item :label="$t('EtaChartAddPage.label_chart_theme')" prop="Theme">
@@ -67,7 +68,7 @@
 					</el-form-item>
 
 					<el-form-item label="">
-						<div class="search-cont" v-if="chartInfo.ChartType!==10">
+						<div class="search-cont" v-if="![10,14].includes(chartInfo.ChartType)">
 							<div>
 								<label><!-- 选择指标 -->{{$t('Edb.choose_edb')}}：</label>
 								<el-radio-group v-model="edbFromType">
@@ -208,7 +209,7 @@
 						<el-checkbox v-model="tableData[0].IsOrder"><!-- 逆序 -->{{$t('Chart.Detail.re_order')}}</el-checkbox>
 					</div>
 
-          <el-collapse v-model="activeNames" class="target-list" v-if="tableData.length&&![7,10,11].includes(chartInfo.ChartType)">
+          <el-collapse v-model="activeNames" class="target-list" v-if="tableData.length&&![7,10,11,14].includes(chartInfo.ChartType)">
             <el-collapse-item v-for="(item,index) in tableData" :key="item.EdbInfoId" :disabled="[2,5].includes(chartInfo.ChartType)">
               <template slot="title">
                 <span class="text_oneLine">{{currentLang==='en'?(item.EdbNameEn||item.EdbName):item.EdbName}}</span>
@@ -359,6 +360,17 @@
 						@modifySeriesName="IsNameDefault = false"
 					/>
 
+					<!-- 截面组合图 -->
+					<sectional-combination-option 
+						ref="sectionalCombinationIns"
+						v-if="chartInfo.ChartType===14"
+						:chartInfo="chartInfo"
+						:defaultData="sectionalCombinationData"
+						@getData="getSectionalCombination"
+						@hideChart="tableData=[];"
+						@updateChart="handleUpdateSectionalCombinationChart"
+					/>
+
 					<!-- 标识区 标记线 图表说明 -->
 					<markersSection
 						ref="markerSectionRef"
@@ -598,6 +610,23 @@
 								<span class="editsty" @click="isShowSourceDialog=true"><!-- 编辑 -->{{$t('Chart.chart_edit_btn')}}</span>
 							</div>
 
+							<!-- 是否堆积 -->
+							<div v-if="showIsHeap">
+								<span>柱形堆积</span>
+								<el-tooltip
+                  content="开启时，该系列上展示数据点"
+                  placement="top"
+                >
+                  <i class="el-icon-info"></i>
+                </el-tooltip>
+                <el-switch
+                  style="margin-left: 20px"
+                  v-model="IsHeap"
+									@change="handleHeapChange"
+                >
+                </el-switch> 
+							</div>
+
 							<!-- 公历农历切换 只用于季节性图 -->
 							<el-radio-group
 								v-model="calendar_type"
@@ -690,8 +719,20 @@ import LegendEditDia from './components/LegendEditDia.vue';
 import markersSection from './components/markersSection.vue';
 import chartSourceEditDia from './components/chartSourceEditDialog.vue';
 import chartRelationEdbList from './components/chartReleationEdbTable.vue';
+import sectionalCombinationOption from './components/sectionalCombination/sectionalCombinationOption.vue';
 export default {
-  components: { Chart,DateChooseDia,SaveChartOther,barOption,sectionalScatterOption,LegendEditDia,markersSection,chartSourceEditDia,chartRelationEdbList },
+  components: { 
+		Chart,
+		DateChooseDia,
+		SaveChartOther,
+		barOption,
+		sectionalScatterOption,
+		LegendEditDia,
+		markersSection,
+		chartSourceEditDia,
+		chartRelationEdbList,
+		sectionalCombinationOption
+	},
 	directives: {
     drag(el, bindings) {
       el.onmousedown = function (e) {
@@ -820,6 +861,13 @@ export default {
 
 					//雷达图
 					this.chartInfo.ChartType === 11 && this.initRadarData(res.Data);
+
+					// 时间序列组合图
+					if(this.chartInfo.ChartType===6){
+						this.IsHeap=res.Data.DataResp.IsHeap===1?true:false
+					}
+					// 截面组合图
+					this.chartInfo.ChartType===14&&this.initSectionalCombinationChart(res.Data);
 					
 					this.getThemeList();
 					//初始化上下限
@@ -987,6 +1035,7 @@ export default {
 										? this.select_date[0]
 										: '',
 							EndDate: this.year_select === 5 ? this.select_date[1] : '',
+							ExtraConfig:JSON.stringify({IsHeap:this.IsHeap?1:0})//时间序列组合图是否堆积控制
 						} 
 					: typePrams
 					

src/views/dataEntry_manage/mixins/addOreditMixin.js

@@ -98,6 +98,27 @@ export default {
 		//是否需要更新上下限
 		updateLimit(){
 			return this.isModifyEdb||this.isChangeEdbAxis
+		},
+		// 判断是否显示堆积控制按钮
+		showIsHeap(){
+			let flag=false
+			if(!this.chartInfo) return flag
+			// 堆积组合图
+			if(this.chartInfo.ChartType==14&&this.sectionalCombinationData.SeriesList){
+				const arr=this.sectionalCombinationData.SeriesList.filter(item=>item.ChartStyle==='column')
+				if(arr.length>1){
+					flag=true
+				}
+			}
+			// 时序组合图
+			if(this.chartInfo.ChartType==6){
+				const arr=this.tableData.filter(item=>item.ChartStyle==='column')
+				if(arr.length>1){
+					flag=true
+				}
+			}
+
+			return flag
 		}
 	},
 	watch: {
@@ -621,6 +642,7 @@ export default {
 				rightTwoMax:'',
 			};
       this.sectionScatterData = {};
+			this.sectionalCombinationData={}
 
 			this.$nextTick(()=>{
 				// 等待 tableData的 监听里面的获取到 起始时间和最近日期
@@ -794,6 +816,117 @@ export default {
 			})
 		},
 
+		//截面组合图参数处理
+		getSectionalCombinationParams(opt){
+			const params={
+				DateConfList:[],// 引用日期配置
+				IsHeap:this.IsHeap?1:0,//是否堆积（1.堆积，0不堆积）
+				XDataList:[],
+				UnitList:{
+					LeftName:opt.UnitList.LeftName||'',
+					RightName:opt.UnitList.RightName||'',
+					RightTwoName:opt.UnitList.RightTwoName||''
+				},
+				BaseChartSeriesName:opt.sortBasisEdb,
+				SortType:opt.sortType,
+				SeriesList:[],
+			}
+			params.XDataList=opt.XDataList.map(i=> {
+				return {Name:i.Name}
+			})
+			params.DateConfList=opt.referenceDateOpts.map(item=>{
+				return {
+					MoveForward:item.MoveForward,
+					EdbInfoId:item.selectEdbData?item.selectEdbData.EdbInfoId:0,
+					DateType:item.dateType,
+					DateConfName:item.name,
+					DateChange:item.dateTransfData.map(_item=>{
+						return {
+							Year:_item.Year,
+							Month:_item.Month,
+							Day:_item.Day,
+							Frequency:_item.Frequency,
+							FrequencyDay:_item.FrequencyDay,
+							ChangeType:_item.ChangeType
+						}
+					})
+				}
+			})
+			params.SeriesList=opt.seriesData.map(item=>{
+				let edbArr=item.edbList.map(_item=>{
+					return {
+						ChartSeriesEdbMappingId:_item.ChartSeriesEdbMappingId||0,
+						ChartSeriesId:_item.ChartSeriesId||0,
+						EdbInfoId:_item.selectEdbData.EdbInfoId,
+						DateConfName:_item.refrenceDateName,
+						DateConfType:_item.dateType,
+						DateConf:{
+							MoveForward:_item.MoveForward,
+							DateChange:_item.dateTransfData.map(_e=>{
+								return {
+									Year:_e.Year,
+									Month:_e.Month,
+									Day:_e.Day,
+									Frequency:_e.Frequency,
+									FrequencyDay:_e.FrequencyDay,
+									ChangeType:_e.ChangeType
+								}
+							})
+						}
+					}
+				})
+				return {
+					ChartSeriesId:0,
+					SeriesName:item.seriesName,
+					ChartStyle:item.seriesChartType,
+					ChartColor:item.ChartColor,
+					ChartWidth:Number(item.ChartWidth)||1,
+					IsPoint:item.showDataPoint?1:0,
+					IsNumber:item.showDataValue?1:0,
+					IsAxis:item.IsAxis,
+					// MaxData:'',
+					// MinData:'',
+					EdbInfoList:edbArr
+				}
+			})
+
+			return params
+		},
+		// 截面组合图预览数据
+		getSectionalCombination(opt){
+			console.log('截面组合图模块数据',opt);
+			const params=this.getSectionalCombinationParams(opt)
+			console.log('截面组合图数据params',params);
+
+			dataBaseInterface.sectionalCombinationPreviewData({
+				ExtraConfig: JSON.stringify(params)
+			}).then(res=>{
+				if(res.Ret!==200) return 
+
+				const { EdbInfoList,DataResp,ChartInfo } = res.Data;
+				this.chartInfo = {
+					...this.chartInfo,
+					ChartSource: ChartInfo.ChartSource
+				}
+
+				this.sectionalCombinationData = DataResp;
+				this.tableData = EdbInfoList;
+
+				this.chartLimit = {
+					min:DataResp.LeftMin, //左轴上下限
+					max:DataResp.LeftMax,
+					rightMin:DataResp.RightMin,//右轴上下限
+					rightMax:DataResp.RightMax,
+					rightTwoMin:DataResp.Right2Min,//右二轴上下限
+					rightTwoMax:DataResp.Right2Max,
+				}
+
+
+				//默认来源搞一下
+				this.setDefaultSourceFrom();
+			})
+		},
+
 		/* 添加图表参数 */
 		getSaveParamsByChartType(public_param) {
 			switch(this.chartInfo.ChartType) {
@@ -890,6 +1023,12 @@ export default {
 							})),
 						})
 					}
+				case 14://截面组合图
+					return {
+						...public_param,
+						ChartEdbInfoList:[],
+						ExtraConfig:JSON.stringify(this.getSectionalCombinationParams(this.$refs.sectionalCombinationIns.$data))
+					}
 			}
 		},
 

src/views/dataEntry_manage/mixins/chartPublic.js

@@ -153,7 +153,11 @@ export const chartSetMixin = {
       radarChartData: {},
 
       /* 修改对应版本信息弹窗  替换原有设置英文*/
-			isLangInfoDia: false
+			isLangInfoDia: false,
+
+      sectionalCombinationData:{},//截面组合图数据
+
+      IsHeap:false,//是否堆积
 		}
 	},
   computed:{
@@ -235,6 +239,14 @@ export const chartSetMixin = {
 			deep: true
     },
 
+    // 截面组合图
+    sectionalCombinationData: {
+      handler(newval) {
+				newval.SeriesList && this.setSectionalCombinationChart();
+			},
+			deep: true
+    },
+
     currentLang() {
       this.changeLanguage()
     }
@@ -1044,7 +1056,8 @@ export const chartSetMixin = {
           borderWidth: 1,
           borderColor: item.ChartColor,
           zIndex: (this.chartInfo.ChartType === 6 && ['line','spline'].includes(item.ChartStyle)) ? 1 : 0, //防止组合图曲线被遮住
-          ...predict_params
+          ...predict_params,
+          stacking:this.chartInfo.ChartType==6&&!this.IsHeap?undefined:'normal',
         };
         item.DataList = item.DataList || [];
         for (let i of item.DataList) {
@@ -2093,6 +2106,225 @@ export const chartSetMixin = {
       this.currentLang=='en' && this.changeOptions()
     },
 
+    // 截面组合图渲染配置
+    setSectionalCombinationChart(){
+      const {XDataList,UnitList,SeriesList,IsHeap}=this.sectionalCombinationData
+      /* 主题样式*/
+      const chartTheme =  this.chartInfo.ChartThemeStyle ? JSON.parse(this.chartInfo.ChartThemeStyle) : null;
+      
+      this.leftIndex = SeriesList.findIndex((item) => item.IsAxis===1);
+      this.rightIndex = SeriesList.findIndex((item) => !item.IsAxis);
+      this.rightTwoIndex = SeriesList.findIndex((item) => item.IsAxis ===2);
+
+      //x轴
+      const xAxis={
+        categories:XDataList.map(_=>this.currentLang=='en'?_.NameEn:_.Name),
+        tickWidth: 1,
+        labels: {
+          style:{
+            ...chartTheme&&chartTheme.xAxisOptions.style
+          },
+        },
+        plotBands: this.setAxisPlotAreas(3),
+        plotLines: this.setAxisPlotLines(3)
+      }
+
+      let yAxis=[]
+      let seriesData=[]
+
+      //有右二轴时排个序 按照左 右 右2的顺序
+      const chartData = SeriesList.some(_ =>_.IsAxis===2) ? this.changeEdbOrder(SeriesList) : _.cloneDeep(SeriesList);
+      chartData.forEach((item,index)=>{
+        //轴位置值相同的下标
+        const sameSideIndex = chartData.findIndex(
+          (i) => i.IsAxis === item.IsAxis
+        );
+
+        const yTitleMap={
+          1:['LeftName','LeftNameEn'],
+          0:['RightName','RightNameEn'],
+          2:['RightTwoName','RightTwoNameEn'],
+        }
+
+        let minLimit = 0,maxLimit = 0
+        const limitMap = {
+            0:['rightMin','rightMax'],
+            1:['min','max'],
+            2:['rightTwoMin','rightTwoMax']
+        }
+        if(limitMap[item.IsAxis]){
+            minLimit = this.chartLimit[`${limitMap[item.IsAxis][0]}`]||0
+            maxLimit = this.chartLimit[`${limitMap[item.IsAxis][1]}`]||0
+        }
+
+        let yItem = {
+          ...basicYAxis,
+          title: {
+            text: UnitList[yTitleMap[item.IsAxis][0]],
+            textCh:UnitList[yTitleMap[item.IsAxis][0]], // 中文
+            // 中文不存在，无论英文有无都显示空
+            textEn:UnitList[yTitleMap[item.IsAxis][0]]?UnitList[yTitleMap[item.IsAxis][1]]:'', // 英文
+            style:{
+              ...chartTheme&&chartTheme.yAxisOptions.style
+            },
+            align: 'high',
+            rotation: 0,
+            y: -12,
+            // x: (item.IsAxis===0 && this.rightTwoIndex>-1) ? -chartData[this.rightTwoIndex].Unit.length*12 : 0,
+            textAlign: item.IsAxis===1 ? 'left' : 'right',
+            reserveSpace: false
+          },
+          labels: {
+            formatter: function (ctx) {
+              return ctx.value;
+            },
+            align: 'center',
+            x: [0,2].includes(item.IsAxis) ? 5 : -5,
+            style: {
+              ...chartTheme&&chartTheme.yAxisOptions.style,
+            }
+          },
+          opposite: [0,2].includes(item.IsAxis),
+          min: Number(minLimit),
+          max: Number(maxLimit),
+          tickWidth: 1,
+          visible: sameSideIndex === index,
+          plotBands: this.setAxisPlotAreas(item.IsAxis),
+          plotLines: this.setAxisPlotLines(item.IsAxis)
+        };
+
+        //堆叠图的yAxis必须一致 数据列所对应的y轴
+        let serie_yIndex = index;
+        if(IsHeap==1) {
+          // 类型为堆叠图时公用第一个指标y轴 
+          serie_yIndex =  0;
+        }
+
+        //数据列
+        let dataArr=item.DataList||[]
+        // 根据NoDataEdbIndex 将对应位置的值置为null
+        dataArr.forEach((i,index)=>{
+          if(item.NoDataEdbIndex.includes(index)){
+            dataArr[index]=null
+          }
+        })
+        let obj={
+          data:dataArr,
+          type: item.ChartStyle||'',
+          chartType:'linear',
+          yAxis: serie_yIndex,
+          name:item.SeriesName,
+          nameCh:item.SeriesName,
+          nameEn:item.SeriesNameEn,
+          color: item.ChartColor,
+          lineWidth: Number(item.ChartWidth)||(chartTheme&&chartTheme.lineOptionList[index].lineWidth),
+          borderWidth: 1,
+          borderColor: item.ChartColor,
+          marker: {//展示数据点
+            enabled:item.ChartStyle!='column'&&item.IsPoint?true:false,
+            radius: (chartTheme&&chartTheme.lineOptionList[index].radius)||5,
+          },
+          dataLabels: {//展示数值
+            enabled: item.IsNumber?true:false,
+            align:item.ChartStyle=='column'?'center':undefined,
+            y:item.ChartStyle=='column'?-20:0,
+            inside: item.ChartStyle=='column'?false:undefined,
+            crop: item.ChartStyle=='column'?false:true,
+          },
+          stacking:IsHeap==1?'normal':undefined,
+          zIndex: ['line','spline'].includes(item.ChartStyle) ? 1 : 0, //防止组合图曲线被遮住
+        }
+
+        yAxis.push(yItem)
+        seriesData.push(obj)
+      })
+
+      this.options = {
+        title: {
+          text:''
+        },
+        series: seriesData,
+        yAxis: yAxis,
+        xAxis,
+      };
+      if(this.currentLang=='en') this.changeOptions()
+
+    },
+    // 截面组合图初始化
+    initSectionalCombinationChart(data){
+      const { EdbInfoList,DataResp,ChartInfo } = data;
+      this.sectionalCombinationData = DataResp;
+      this.chartLimit = {
+        min:DataResp.LeftMin, //左轴上下限
+        max:DataResp.LeftMax,
+        rightMin:DataResp.RightMin,//右轴上下限
+        rightMax:DataResp.RightMax,
+        rightTwoMin:DataResp.Right2Min,//右二轴上下限
+        rightTwoMax:DataResp.Right2Max,
+      }
+      this.IsHeap=DataResp.IsHeap?true:false
+
+
+      //默认来源搞一下
+      this.setDefaultSourceFrom();
+      this.setSectionalCombinationChart()
+    },
+    // 截面组合图渲染更新
+    handleUpdateSectionalCombinationChart(e){
+      // console.log(e);
+      if(e.type==='isAxis'){
+        e.data.seriesData.forEach(item=>{
+          this.sectionalCombinationData.SeriesList.forEach(_item=>{
+            if(item.seriesName===_item.SeriesName){
+              _item.IsAxis=item.IsAxis
+            }
+          })
+        })
+      }else if(e.type==='chartType'){
+        e.data.seriesData.forEach(item=>{
+          this.sectionalCombinationData.SeriesList.forEach(_item=>{
+            if(item.seriesName===_item.SeriesName){
+              _item.ChartStyle=item.seriesChartType
+            }
+          })
+        })
+      }else if(e.type==='dataPoint'){
+        e.data.seriesData.forEach(item=>{
+          this.sectionalCombinationData.SeriesList.forEach(_item=>{
+            if(item.seriesName===_item.SeriesName){
+              _item.IsPoint=item.showDataPoint?1:0
+            }
+          })
+        })
+      }else if(e.type==='dataValue'){
+        e.data.seriesData.forEach(item=>{
+          this.sectionalCombinationData.SeriesList.forEach(_item=>{
+            if(item.seriesName===_item.SeriesName){
+              _item.IsNumber=item.showDataValue?1:0
+            }
+          })
+        })
+      }else if(e.type==='ChartColor'){
+        e.data.seriesData.forEach(item=>{
+          this.sectionalCombinationData.SeriesList.forEach(_item=>{
+            if(item.seriesName===_item.SeriesName){
+              _item.ChartColor=item.ChartColor
+            }
+          })
+        })
+      }else if(e.type==='ChartWidth'){
+        e.data.seriesData.forEach(item=>{
+          this.sectionalCombinationData.SeriesList.forEach(_item=>{
+            if(item.seriesName===_item.SeriesName){
+              _item.ChartWidth=item.ChartWidth
+            }
+          })
+        })
+      }
+
+      this.setSectionalCombinationChart()
+    },
+
     //雷达图数据初始化
     initRadarData(data) {
       const { DataResp,EdbInfoList,ChartInfo } = data;
@@ -2753,7 +2985,8 @@ export const chartSetMixin = {
         6: this.setStackOrCombinChart,
         7: this.setBarChart,
         10: this.setSectionScatterChart,
-        11: this.setRadarChart
+        11: this.setRadarChart,
+        14: this.setSectionalCombinationChart
       }
       //其他source
       const sourceMap = {
@@ -2977,7 +3210,7 @@ export const chartSetMixin = {
         },
         //图表详情-设置图表上下限
         setLimitData(tableData=[]){
-            if([7,10,11].includes(this.chartInfo.ChartType)) return
+            if([7,10,11,14].includes(this.chartInfo.ChartType)) return
             const {
                 //左右轴极值字段 
                 LeftMin=0,LeftMax=0,
@@ -3039,6 +3272,13 @@ export const chartSetMixin = {
                 }
             }
         },
+
+    // 柱形堆积控制
+    handleHeapChange(){
+      this.options.series.forEach(item=>{
+        item.stacking=this.IsHeap?'normal':undefined
+      })
+    },
     /*-------------------- */
 	}
 }

src/views/system_manage/chartTheme/components/optionsSection.vue

@@ -138,6 +138,42 @@
                     />
                   </li>
                 </template>
+                <!-- 组合图配置 -->
+                <template v-else-if="[6,14].includes(chartType)">
+                  <li class="option-item" style="position: relative;">
+                    <label class="el-form-item__label">{{$t('SystemManage.ChartSet.config_opt03')}}</label>
+                    <el-tooltip content="线型设置只针对线条类型" placement="top">
+                      <i class="el-icon-info" style="position:absolute;left:35px"></i>
+                    </el-tooltip>
+                    <el-select 
+                      v-model="themeOptions[key][lineIndex].dashStyle"
+                      style="width: 90px"
+                    >
+                      <el-option 
+                        v-for="item in lineStylesOpts" 
+                        :key="item.value"
+                        :value="item.value"
+                        :label="item.label"
+                      >
+                        <svg width="60" height="10" viewBox="0 0 60 10" fill="none" xmlns="http://www.w3.org/2000/svg" v-html="item.svg">
+                        </svg>
+                      </el-option>
+                    </el-select>
+                  </li>
+                  <li class="option-item" style="position: relative;">
+                    <label class="el-form-item__label">{{$t('SystemManage.ChartSet.config_opt04')}}</label>
+                    <el-tooltip content="粗细设置只针对线条类型" placement="top">
+                      <i class="el-icon-info" style="position:absolute;left:35px"></i>
+                    </el-tooltip>
+                    <el-input
+                      v-model="themeOptions[key][lineIndex].lineWidth"
+                      style="width: 90px"
+                      type="number"
+                      :min="1"
+                      @change="val => { themeOptions[key][lineIndex].lineWidth=Number(val)}"
+                    />
+                  </li>
+                </template>
             </template>
 
              <!-- 图例设置 -->
@@ -291,6 +327,7 @@ export default {
         7: {label:this.$t('SystemManage.ChartSet.opt_label09'),lineLabel: this.$t('SystemManage.ChartSet.unit02')},
         10: {label:this.$t('SystemManage.ChartSet.opt_label02'),lineLabel: this.$t('SystemManage.ChartSet.unit03')},
         11: {label:this.$t('SystemManage.ChartSet.opt_label01'),lineLabel: this.$t('SystemManage.ChartSet.unit01')},
+        14: {label:this.$t('SystemManage.ChartSet.opt_label10'),lineLabel: this.$t('SystemManage.ChartSet.unit03')},
       }
     }
   },

src/views/system_manage/chartTheme/index.vue

@@ -23,14 +23,28 @@
         <div class="select-item">
           <div class="select-item">
             <label>{{$t('SystemManage.ChartSet.label01')}}</label>
-            <el-select v-model="formData.chartType" style="margin-left: 15px;" @change="getThemeList();">
+            <el-cascader
+              v-model="formData.chartType"
+              :options="chartTypeOpts"
+              :show-all-levels="false"
+              :props="{
+                emitPath:false,
+                label:'ChartTypeName',
+                value:'ChartThemeTypeId',
+                children:'Child'
+              }"
+              @change="getThemeList();"
+              style="margin-left: 15px;"
+              popper-class="chart-type-select-wrap"
+            />
+            <!-- <el-select v-model="formData.chartType" style="margin-left: 15px;" @change="getThemeList();">
               <el-option
                 v-for="item in chartTypeOpts"
                 :key="item.ChartThemeTypeId"
                 :label="item.ChartTypeName"
                 :value="item.ChartThemeTypeId"
               />
-            </el-select>
+            </el-select> -->
           </div>
         </div>
         <div class="select-item">

src/views/system_manage/chartTheme/themeSetting.vue

@@ -2,14 +2,27 @@
   <div class="themeSet-page">
     <div class="header">
       <div class="header-option">
-        <el-select v-model="formData.chartType" @change="getThemeList('init');">
+        <el-cascader
+              v-model="formData.chartType"
+              :options="chartTypeOpts"
+              :show-all-levels="false"
+              :props="{
+                emitPath:false,
+                label:'ChartTypeName',
+                value:'ChartThemeTypeId',
+                children:'Child'
+              }"
+              @change="getThemeList('init');"
+              popper-class="chart-type-select-wrap"
+        />
+        <!-- <el-select v-model="formData.chartType" @change="getThemeList('init');">
             <el-option
               v-for="item in chartTypeOpts"
               :key="item.ChartThemeTypeId"
               :label="item.ChartTypeName"
               :value="item.ChartThemeTypeId"
             />
-          </el-select>
+          </el-select> -->
 
         <el-select v-model="formData.theme" style="margin-left: 10px;" @change="changeThemeHandle">
           <el-option
@@ -150,6 +163,7 @@ export default {
       else if(this.chartInfo.ChartType === 10) return this.initSectionScatterData(res.Data);
       
       else if(this.chartInfo.ChartType === 11) return this.initRadarData(res.Data);
+      else if(this.chartInfo.ChartType === 14) return this.initSectionalCombinationChart(res.Data);
 
       this.setChartOptionHandle(this.tableData)
     },