多因子-生成相关性图表

src/utils/defaultOptions.js

@@ -376,3 +376,18 @@ export const getTerminal = () => {
   }
 }
 
+//相关性矩阵表头
+export const generateSortedArray = (N)=>{
+    let positiveArr = [];
+    for (let i = 0; i <= N; i++) {
+        positiveArr.push(i);
+    }
+    
+    let negativeArr = [];
+    for (let i = -1; i >= -N; i--) {
+        negativeArr.push(i);
+    }
+    
+    return positiveArr.concat(negativeArr);
+}
+

src/views/chartRelevance_manage/components/chartCard.vue

@@ -34,7 +34,8 @@
           </el-dropdown-menu>
         </el-dropdown>
         <el-button type="primary" @click="saveChart(entryType)" v-show="!isChartAdd">{{$t('Dialog.confirm_save_btn')}}</el-button>
-
+        <!-- 图表设置 -->
+        <el-button type="primary" plain @click="$emit('chartSettingChange')" v-show="isChartSetting">图表设置</el-button>
       </div>
     </div>
     <div class="chartWrapper">
@@ -108,6 +109,10 @@ export default {
     },
     settings: {
       type: Object
+    },
+    isChartSetting:{ //是否显示图表设置
+        type:Boolean,
+        default:false
     }
 
   },

src/views/chartRelevance_manage/relevance/components/batchSelectTable.vue

@@ -104,9 +104,13 @@ export default {
         /* isSelectAll(newValue){
             this.listCheckAllChange(newValue)
         }, */
-        factorData(newValue){
-            this.selectData = newValue.selectList||[]
+        factorData:{
+            handler(newValue){
+                this.selectData = newValue.selectList||[]
+            },
+            immediate:true
         }
+        
     },
     data() {
         return {

src/views/chartRelevance_manage/relevance/components/relevanceChart.vue

@@ -0,0 +1,113 @@
+<template>
+    <div class="relevance-chart-wrap">
+      <div class="chart-wrapper">
+        <div class="title">
+          <span>{{chartTitle}}</span>
+        </div>
+        <Chart
+          v-if="options.series"
+          :options="options"
+          height="300px"
+          :ref="`chartRef`"
+        />
+      </div>
+      <div class="tool-wrap">
+        <el-button>保存</el-button>
+        <el-button>图表设置</el-button>
+      </div>
+    </div>
+  </template>
+  
+  <script>
+  import { chartSetMixin } from '@/views/dataEntry_manage/mixins/chartPublic';
+  import Chart from '@/views/dataEntry_manage/components/chart';
+  export default {
+    components: { Chart },
+    mixins: [chartSetMixin],
+    computed: {
+        chartTitle(){
+            //中英文转换
+            return `${this.chartInfo.EdbName}相关性分析（xxx）`
+        },
+    },
+    watch: {
+      data:{
+        handler(nval){
+            this.setRenderChartData(nval)
+        },
+        deep:true
+        
+      }
+    },
+    props: {
+      data: {
+        type:Object
+      },
+      isChartAdd: {
+        type:Boolean,
+        default: false
+      },
+      isEdbAdd: {
+        type:Boolean,
+        default: false
+      },
+      settings: {
+        type: Object
+      }
+  
+    },
+    data() {
+      return {
+        chartInfo: {}
+      }
+    },
+  
+    methods: {
+        setRenderChartData(data){
+            this.chartInfo = data.ChartInfo;
+            this.relevanceChartData={
+            ChartInfo:data.ChartInfo,
+            EdbInfoList:data.EdbInfoList,
+            XEdbIdValue:data.XEdbIdValue || data.XDateTimeValue,
+            CorrelationChartInfo:data.CorrelationChartInfo,
+            YDataList:data.YDataList
+            }
+            this.tableData=data.EdbInfoList||[]
+            this.initRelevanceChartData()
+        },
+        //所有事件都抛出让外层组件处理
+        //保存/更新/另存为/图表设置
+        //处理完成后会更新this.data，自动重新渲染图表
+    },
+  
+    mounted() {
+      this.setRenderChartData(this.data);
+    }
+  }
+  </script>
+  
+  <style lang="scss" scoped>
+  .relevance-chart-wrap{
+    display: flex;
+    padding:20px;
+    .chart-wrapper{
+        width:90%;
+        .title{
+            margin-bottom: 20px;
+            text-align: center;
+        }
+    }
+    .tool-wrap{
+        flex:1;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        gap:10px;
+        padding-left:10px;
+        .el-button{
+            width:100%;
+            margin-left: 0;
+        }
+    }
+  }
+  </style>

src/views/chartRelevance_manage/relevance/relevanceChartEditorV2.vue

@@ -32,6 +32,7 @@
                         v-if="infoForm.Model===2"
                         :info-form="infoForm"
                         :chart-info-data="chartInfoData"
+                        @selectTarget="handleSelectTarget"
                     ></multipleIndForm>
                 </el-form>
             </div>
@@ -60,8 +61,11 @@
                             :data="chartBatchData.CorrelationData"
                             :settings="infoForm"
                             :isChartAdd="buttonAuth.isRelevanceChartAdd"
+                            :isChartSetting="true"
                             @saveChart="saveChartToBaseHandle"
+                            @chartSettingChange="handleChangeChartSetting(chartBatchData.CorrelationData)"
                         />
+                        <!-- 图表数据来源 -->
                     </div>
                     <template v-if="chartBatchData.RollingCorrelationData">
                         <div class="card-wrapper content-wrap" v-if="chartBatchData.RollingCorrelationData[0]">
@@ -98,20 +102,21 @@
             <!-- 多因子模式 -->
             <div class="multiple-model-wrap" v-if="infoForm.Model===2">
                 <!-- 相关性矩阵 -->
-                <div class="relevant-matrix-table-box">
+                <div class="relevant-matrix-table-box" v-if="factorTableData.length">
                     <el-table style="width: 100%;" max-height="400" :data="factorTableData">
                         <el-table-column 
                             fixed
                             label="与标的指标的相关性矩阵"
                             width="220px"
                             align="center"
+                            class-name="zip-cell"
                             >
                             <el-table-column
                                 width="80px" align="center"
                                 class-name="zip-cell"
                                 label="操作">
-                               <template slot-scope="{row}">
-                                    <span>添加曲线</span>
+                               <template slot-scope="{row,$index}">
+                                    <span @click="addCurve(row,$index)">添加曲线</span>
                                     <!-- <span style="color:red;">删除曲线</span> -->
                                </template>
                             </el-table-column>
@@ -123,13 +128,14 @@
                             </el-table-column>
                         </el-table-column>
                         <el-table-column
-                            label="领先期数（天）">
-                            <el-table-column v-for="(num,index) in 20" :key="num"
+                            class-name="zip-cell"
+                            :label="LeadLabelName">
+                            <el-table-column v-for="(num,index) in SortedArray" :key="num"
                                 min-width="45px"
                                 sortable
                                 align="center"
                                 class-name="zip-cell"
-                                :label="index">
+                                :label="num">
                                 <template slot-scope="{row}">
                                     {{ row.dataList[index] }}
                                 </template>
@@ -138,8 +144,19 @@
                     </el-table>
                 </div>
                 <!-- 相关性图表 -->
-                <div class="relevant-chart-box">
-                    相关性图表
+                <div class="relevant-chart-box" v-if="showMultipleChart">
+                    <!-- <multiPleChart 
+                        :data="multipleChartData"
+                        :settings="infoForm"
+                    /> -->
+                    <relevanceChart 
+                        :data="multipleChartData"
+                        :settings="infoForm"
+                    />
+                </div>
+
+                <div class="nodata" v-if="!factorTableData.length">
+                    <tableNoData text="暂无信息"/>
                 </div>
             </div>
         </div>
@@ -157,12 +174,16 @@ import selectTarget from '../components/selectTarget.vue'
 import singleIndForm from './components/singleIndForm.vue'
 import multipleIndForm from './components/multipleIndForm.vue'
 import chartCard from '../components/chartCard.vue';
+import relevanceChart from './components/relevanceChart.vue'
+/* untils */
+import {generateSortedArray} from '@/utils/defaultOptions'
 export default {
-    components:{selectTarget, singleIndForm, multipleIndForm, chartCard},
+    components:{selectTarget, singleIndForm, multipleIndForm, chartCard, relevanceChart},
     data() {
         return {
+            typeModel:0,
             infoForm:{
-                Model:1,//模式
+                Model:2,//模式
                 EdbInfoIdA:'',//指标A
                 EdbInfoIdB:'',//指标B
                 IndTarget:'',//标的指标
@@ -201,10 +222,11 @@ export default {
             infoRules:{
                 EdbInfoIdA:[{required:true,message:'指标A未选择',trigger:'blur'}],
                 EdbInfoIdB:[{required:true,message:'指标B未选择',trigger:'blur'}],
+                IndTarget:[{required:true,message:'标的指标未选择',trigger:'blur'}],
                 'Correlation.CalculateValue':[{required:true,message:'计算窗口未填写',trigger:'blur'}],
                 'Correlation.LeadValue':[{required:true,message:'分析周期未填写',trigger:'blur'}]
             },
-            chartInfoData: {},
+            chartInfoData: {},//单因子图表信息
             chartBatchData:null,
             buttonAuth: { //按钮控制
                 isCurveChartAdd: false,
@@ -215,19 +237,62 @@ export default {
                 isRollEdbTwoAdd: false,
             },
 
+            SortedArray:[],//多因子-领先期数数组
             factorTableData:[
-                {
+                /* {
                     name:'aaa',
                     dataList:[0.22,0.15,0.96,0.45,0.45,0.33,0.96,0.14,0.12,0.47,0.11,0.63]
                 },
                 {
                     name:'bbb',
                     dataList:[0.22,0.15,0.96,0.45,0.45,0.33,0.96,0.14,0.12,0.47,0.11,0.63]
+                }, */
+            ],//多因子-相关性矩阵表格
+            multipleChartData:{
+                ChartInfo:{
+                    Source:3,
                 },
-            ]
+                EdbInfoList:[],//第一项为标的指标，其他项为添加的指标
+                XEdbIdValue:[],//SourtedArray
+                CorrelationChartInfo:{
+                    LeadValue:0,//分析周期
+                    LeadUnit:'天',//分析周期单位（时间）
+                },
+                YDataList:[
+                    /* {
+                        Value:[],//factorTableData.dataList
+                        Color:'#00f',
+                        Name:'',//factorTableData.name
+                        NameEn:''
+                    } */
+                ],
+
+            },//多因子图表信息,不用chartCard渲染了
+            showMultipleChart:false,
         };
     },
+    watch:{
+        'infoForm.Model'(newval){
+            //单多因子切换时，重置表单
+            this.typeModel = newval
+            this.resetForm()
+        }
+    },
+    computed:{
+        LeadLabelName(){
+            return `领先期数(${this.infoForm.Correlation.LeadUnit})` //LeadUnit需中英文转换 relevanceUnitEnMap
+        }
+    },
     methods: {
+        resetForm(){
+            this.infoForm = this.$options.data().infoForm
+            this.chartBatchData = null
+            this.factorTableData = []
+            this.showMultipleChart = false
+            const model = this.typeModel
+            this.typeModel = 0
+            this.infoForm.Model = model
+        },
         //选择指标后填入上下限
         async getEdbDetail({EdbInfoId,EdbInfoType}) {
             const { Data } = EdbInfoType 
@@ -236,13 +301,17 @@ export default {
             return { 
                 max: EdbInfoType ? Data.MaxValue : Data.EdbInfoDetail.MaxValue,
                 min: EdbInfoType ? Data.MinValue : Data.EdbInfoDetail.MinValue,
+                data:EdbInfoType ? Data : Data.EdbInfoDetail,
             }
         },
         async handleSelectTarget({type,target}){
             if(!target) return
             this.infoForm[type] = target.EdbInfoId||''
+            const {max,min,data} = await this.getEdbDetail(target)
+            if(type==='IndTarget'){
+                this.multipleChartData.ChartInfo = data
+            }
             if(!['EdbInfoIdA','EdbInfoIdB'].includes(type)) return 
-            const {max,min} = await this.getEdbDetail(target)
             if(type==='EdbInfoIdA'){
                 this.infoForm.Curve.LeftMin = min;
                 this.infoForm.Curve.LeftMax = max;
@@ -276,21 +345,22 @@ export default {
             this.chartBatchData.CurveData.EdbInfoList[1].IsOrder = IsOrder;
         },
         dateChange(){},
-        //确定-预览相关性图表
+        //点击确定-预览相关性图表/相关性矩阵
         async previewChart(){
             //表单校验
             await this.$refs.infoFormRef.validate()
             //相关性值校验
             if(!this.checkValue()) return 
-            //单因子：渲染相关性图表，需要保存MultipleGraphConfigId
+            
             if(this.infoForm.Model===1){
+                //单因子：渲染相关性图表，需要保存MultipleGraphConfigId
                 const res = await chartRelevanceApi.chartOptionsSet({...this.infoForm});
                 if(res.Ret !== 200) return
                 const { MultipleGraphConfigId } = res.Data;
                 this.infoForm.MultipleGraphConfigId = MultipleGraphConfigId;
                 this.previewSingleChart()
             }else{
-                //多因子：仅渲染标的指标+添加曲线的指标
+                //多因子：根据分析周期生成相关性矩阵，在未添加曲线前不生成图表
                 this.previewMultipleChart()
             }
         },
@@ -318,7 +388,48 @@ export default {
             if(res.Ret !== 200) return
             this.chartBatchData = res.Data;
         },
-        previewMultipleChart(){},
+        previewMultipleChart(){
+            //获取分析周期，生成±分析周期的数组
+            const {LeadValue} = this.infoForm.Correlation
+            this.SortedArray = generateSortedArray(LeadValue)
+            this.factorTableData = [
+                {
+                    name:'aaa',
+                    dataList:[0.22,0.15,0.96,0.45,0.45,0.33,0.96,0.14,0.12,0.47,0.11,0.63]
+                },
+                {
+                    name:'bbb',
+                    dataList:[0.22,0.15,0.96,0.45,0.45,0.33,0.96,0.14,0.12,0.47,0.11,0.63]
+                },
+                {name:'ccc',dataList:[]},{name:'ddd',dataList:[]},{name:'eee',dataList:[]},{name:'ggg',dataList:[]},
+                {name:'hhh',dataList:[]},{name:'iii',dataList:[]},{name:'jjj',dataList:[]},{name:'kkk',dataList:[]},
+                {name:'lll',dataList:[]},{name:'mmm',dataList:[]},{name:'nnn',dataList:[]},{name:'ooo',dataList:[]},
+                {name:'ppp',dataList:[]},{name:'qqq',dataList:[]},{name:'rrr',dataList:[]},{name:'sss',dataList:[]},
+                {name:'ttt',dataList:[]},{name:'uuu',dataList:[]},{name:'vvv',dataList:[]},{name:'www',dataList:[]},
+                {name:'xxx',dataList:[]},{name:'yyy',dataList:[]},{name:'zzz',dataList:[]}
+            ]
+        },
+        //相关性矩阵-添加曲线
+        addCurve(row,index){
+            this.showMultipleChart = true
+            this.multipleChartData.ChartInfo.Source = 3
+            this.multipleChartData.CorrelationChartInfo = {
+                LeadValue:this.infoForm.Correlation.LeadValue,
+                LeadUnit:this.infoForm.Correlation.LeadUnit
+            }
+            this.multipleChartData.XEdbIdValue = this.SortedArray
+            const colors = ['#00f','#f00','#999','#000','#7cb5ec', '#90ed7d', '#f7a35c', '#8085e9', '#f15c80', '#e4d354', '#2b908f', '#f45b5b', '#91e8e1']
+            this.multipleChartData.YDataList.push({
+                Value:row.dataList,
+                Color:colors[index%colors.length],
+                Name:row.name,
+                NameEn:''
+            })
+        },
+        //打开图表设置弹窗
+        handleChangeChartSetting(data){
+            //单多因子的data结构是相同的 单因子需重新调整一下YDataList
+        },
         //获取相关性图表详情
         getRelevanceChartDetail(){
             //判断是单因子or多因子
@@ -542,6 +653,29 @@ export default {
                     padding:0;
                     font-size: 12px;
                     background-color: #fff !important;
+                    .cell{
+                        padding:0;
+                        line-height: 23px;//调整单元格高度
+                    }
+                }
+            }
+            /* .relevant-matrix-table-box{
+                height: 45%;
+            } */
+            .relevant-chart-box{
+                .card-item {
+                    padding: 20px;
+                    .top {
+                        display: flex;
+                        justify-content: space-between;
+                        align-items: center;
+                        margin-bottom: 15px;
+                    }
+                    .title {
+                        font-size: 15px;
+                        text-align: left;
+                        margin: 10px 0;
+                    }
                 }
             }
         }