|
|
@@ -2,12 +2,12 @@
|
|
|
<div class="relevance-chart-editor-wrap">
|
|
|
<div class="info-wrap content-wrap">
|
|
|
<div class="info-top">
|
|
|
- <el-button>确定</el-button>
|
|
|
+ <el-button @click="testRuleCheck">确定</el-button>
|
|
|
<el-button>取消</el-button>
|
|
|
<span>操作说明</span>
|
|
|
</div>
|
|
|
<div class="info-form-wrap">
|
|
|
- <el-form :model="infoForm" :rules="infoRules" label-width="100px" ref="addForm">
|
|
|
+ <el-form :model="infoForm" :rules="infoRules" label-width="80px" ref="infoFormRef">
|
|
|
<!-- 分析模式 -->
|
|
|
<el-form-item label="分析模式" prop="Model" required>
|
|
|
<el-select v-model="infoForm.Model" style="width: 100%;">
|
|
|
@@ -16,102 +16,242 @@
|
|
|
</el-select>
|
|
|
</el-form-item>
|
|
|
<!-- 单因子模式需要填的 -->
|
|
|
- <div class="single-model-form model-form" v-if="infoForm.Model===1">
|
|
|
- <!-- 指标A -->
|
|
|
- <el-form-item label="指标A" prop="indA" class="select-target" required>
|
|
|
- <selectTarget
|
|
|
- :defaultId="chartInfoData.EdbInfoList?chartInfoData.EdbInfoList[0].EdbInfoId:''"
|
|
|
- :defaultOpt="chartInfoData.EdbInfoList?[chartInfoData.EdbInfoList[0]]:[]"
|
|
|
- :defaultType="chartInfoData.EdbInfoList?chartInfoData.EdbInfoList[0].EdbInfoCategoryType:''"
|
|
|
- @select="handleSelectTargetA"
|
|
|
- />
|
|
|
- </el-form-item>
|
|
|
- <!-- 指标B -->
|
|
|
- <el-form-item label="指标B" prop="indB" class="select-target" required>
|
|
|
- <selectTarget
|
|
|
- :defaultId="chartInfoData.EdbInfoList?chartInfoData.EdbInfoList[1].EdbInfoId:''"
|
|
|
- :defaultOpt="chartInfoData.EdbInfoList?[chartInfoData.EdbInfoList[1]]:[]"
|
|
|
- :defaultType="chartInfoData.EdbInfoList?chartInfoData.EdbInfoList[1].EdbInfoCategoryType:''"
|
|
|
- @select="handleSelectTargetB"
|
|
|
- />
|
|
|
- </el-form-item>
|
|
|
- <div class="form-box">
|
|
|
- <div class="label-title">曲线图</div>
|
|
|
- <el-form-item label="时间："></el-form-item>
|
|
|
- <el-form-item label="左轴："></el-form-item>
|
|
|
- <el-form-item label="右轴："></el-form-item>
|
|
|
- <el-form-item label="指标B："></el-form-item>
|
|
|
- </div>
|
|
|
- <div class="form-box">
|
|
|
- <div class="label-title">相关性</div>
|
|
|
- <el-form-item label="计算窗口" required></el-form-item>
|
|
|
- <el-form-item label="分析周期" required></el-form-item>
|
|
|
- </div>
|
|
|
- <div class="form-box">
|
|
|
- <div class="label-title">滚动相关性1</div>
|
|
|
- <el-form-item label="计算窗口" required></el-form-item>
|
|
|
- <el-form-item label="B领先A" required></el-form-item>
|
|
|
- </div>
|
|
|
- <div class="form-box">
|
|
|
- <div class="label-title">滚动相关性2</div>
|
|
|
- <el-form-item label="计算窗口" required></el-form-item>
|
|
|
- <el-form-item label="B领先A" required></el-form-item>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
+ <singleIndForm
|
|
|
+ v-if="infoForm.Model===1"
|
|
|
+ :info-form="infoForm"
|
|
|
+ :chart-info-data="chartInfoData"
|
|
|
+ @selectTarget="handleSelectTarget"
|
|
|
+ ></singleIndForm>
|
|
|
<!-- 多因子模式需要填的 -->
|
|
|
- <div class="multiple-model-form model-form" v-if="infoForm.Model===2">
|
|
|
- <!-- 标的指标 -->
|
|
|
- <el-form-item label="标的指标" prop="indTarget" class="select-target" required>
|
|
|
- <selectTarget
|
|
|
- :defaultId="chartInfoData.EdbInfoList?chartInfoData.EdbInfoList[1].EdbInfoId:''"
|
|
|
- :defaultOpt="chartInfoData.EdbInfoList?[chartInfoData.EdbInfoList[1]]:[]"
|
|
|
- :defaultType="chartInfoData.EdbInfoList?chartInfoData.EdbInfoList[1].EdbInfoCategoryType:''"
|
|
|
- @select="handleSelectTarget"
|
|
|
- />
|
|
|
- </el-form-item>
|
|
|
- <!-- 因子指标系列 -->
|
|
|
- <div class="factor-form-item">
|
|
|
- <el-form-item label="因子指标系列" required>
|
|
|
- </el-form-item>
|
|
|
- <div class="factor-list">
|
|
|
- <div class="list-item">123</div>
|
|
|
- <div class="list-item">456</div>
|
|
|
- </div>
|
|
|
- <div class="add-factor-btn">
|
|
|
- <img src="~@/assets/img/add-quadrate-blue.png" />
|
|
|
- 添加因子指标系列
|
|
|
- </div>
|
|
|
+ <multipleIndForm
|
|
|
+ v-if="infoForm.Model===2"
|
|
|
+ :info-form="infoForm"
|
|
|
+ :chart-info-data="chartInfoData"
|
|
|
+ ></multipleIndForm>
|
|
|
+ </el-form>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="model-wrap">
|
|
|
+ <!-- 单因子模式 -->
|
|
|
+ <div class="single-model-wrap" v-if="infoForm.Model===1">
|
|
|
+ <div
|
|
|
+ class="chart-min-cont"
|
|
|
+ v-if="chartBatchData"
|
|
|
+ >
|
|
|
+ <div class="card-wrapper">
|
|
|
+ <chartCard
|
|
|
+ :entryType="1"
|
|
|
+ ref="chartCard1"
|
|
|
+ :data="chartBatchData.CurveData"
|
|
|
+ :settings="infoForm"
|
|
|
+ :isChartAdd="buttonAuth.isCurveChartAdd"
|
|
|
+ @saveChart="saveChartToBaseHandle"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ <div class="card-wrapper" v-if="chartBatchData.CorrelationData">
|
|
|
+ <chartCard
|
|
|
+ :entryType="2"
|
|
|
+ ref="chartCard2"
|
|
|
+ :data="chartBatchData.CorrelationData"
|
|
|
+ :settings="infoForm"
|
|
|
+ :isChartAdd="buttonAuth.isRelevanceChartAdd"
|
|
|
+ @saveChart="saveChartToBaseHandle"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ <template v-if="chartBatchData.RollingCorrelationData">
|
|
|
+ <div class="card-wrapper" v-if="chartBatchData.RollingCorrelationData[0]">
|
|
|
+ <chartCard
|
|
|
+ :entryType="3"
|
|
|
+ ref="chartCard3"
|
|
|
+ :data="chartBatchData.RollingCorrelationData[0]"
|
|
|
+ :settings="infoForm"
|
|
|
+ :isChartAdd="buttonAuth.isRollChartAdd"
|
|
|
+ :isEdbAdd="buttonAuth.isRollEdbAdd"
|
|
|
+ @saveChart="saveChartToBaseHandle"
|
|
|
+ @saveEdb="saveEdbToBaseHandle"
|
|
|
+ />
|
|
|
</div>
|
|
|
-
|
|
|
-
|
|
|
- <div class="form-box">
|
|
|
- <div class="label-title">相关性</div>
|
|
|
- <el-form-item label="计算窗口" required></el-form-item>
|
|
|
- <el-form-item label="分析周期" required></el-form-item>
|
|
|
+ <div class="card-wrapper" v-if="chartBatchData.RollingCorrelationData[1]">
|
|
|
+ <chartCard
|
|
|
+ :entryType="4"
|
|
|
+ ref="chartCard4"
|
|
|
+ :data="chartBatchData.RollingCorrelationData[1]"
|
|
|
+ :settings="infoForm"
|
|
|
+ :isChartAdd="buttonAuth.isRollChartTwoAdd"
|
|
|
+ :isEdbAdd="buttonAuth.isRollEdbTwoAdd"
|
|
|
+ @saveChart="saveChartToBaseHandle"
|
|
|
+ @saveEdb="saveEdbToBaseHandle"
|
|
|
+ />
|
|
|
</div>
|
|
|
- </div>
|
|
|
- </el-form>
|
|
|
+ </template>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="nodata" v-else>
|
|
|
+ <tableNoData text="暂无信息"/>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
+ <!-- 多因子模式 -->
|
|
|
+ <div class="multiple-model-wrap" v-if="infoForm.Model===2"></div>
|
|
|
</div>
|
|
|
- <div class="model-wrap content-wrap"></div>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
+/* api */
|
|
|
+import { dataBaseInterface } from '@/api/api.js';
|
|
|
+import * as preDictEdbInterface from '@/api/modules/predictEdbApi.js';
|
|
|
+import chartRelevanceApi from '@/api/modules/chartRelevanceApi';
|
|
|
+
|
|
|
+/*components */
|
|
|
import selectTarget from '../components/selectTarget.vue'
|
|
|
+import singleIndForm from './components/singleIndForm.vue'
|
|
|
+import multipleIndForm from './components/multipleIndForm.vue'
|
|
|
+import chartCard from '../components/chartCard.vue';
|
|
|
export default {
|
|
|
- components:{selectTarget},
|
|
|
+ components:{selectTarget, singleIndForm, multipleIndForm, chartCard},
|
|
|
data() {
|
|
|
return {
|
|
|
- infoForm:{},
|
|
|
- infoRules:{},
|
|
|
+ infoForm:{
|
|
|
+ Model:1,
|
|
|
+ Curve:{
|
|
|
+ DateType:'',
|
|
|
+ Date:'',
|
|
|
+ LeftMin:'',
|
|
|
+ LeftMax:'',
|
|
|
+ RightMin:'',
|
|
|
+ RightMax:'',
|
|
|
+ EdbInfoType:true,//显示为标准指标(true)或领先指标(false)
|
|
|
+ },//曲线图
|
|
|
+ Correlation:{
|
|
|
+ CalculateValue:'',//计算窗口
|
|
|
+ CalculateUnit:'',//计算窗口单位（时间）
|
|
|
+ LeadValue:'',//分析周期
|
|
|
+ LeadUnit:'',//分析周期单位（时间）
|
|
|
+ },//相关性
|
|
|
+ RollingCorrelation:[
|
|
|
+ {
|
|
|
+ CalculateValue:'',
|
|
|
+ CalculateUnit:'',
|
|
|
+ LeadValue:'',
|
|
|
+ LeadUnit:''
|
|
|
+ }
|
|
|
+ ],//滚动相关性
|
|
|
+ },
|
|
|
+ infoRules:{
|
|
|
+ EdbInfoIdA:[{required:true,message:'指标A未选择',trigger:'blur'}],
|
|
|
+ EdbInfoIdB:[{required:true,message:'指标B未选择',trigger:'blur'}],
|
|
|
+ 'Correlation.CalculateValue':[{required:true,message:'计算窗口未填写',trigger:'blur'}],
|
|
|
+ 'Correlation.LeadValue':[{required:true,message:'分析周期未填写',trigger:'blur'}]
|
|
|
+ },
|
|
|
chartInfoData: {},
|
|
|
+ chartBatchData:null,
|
|
|
+ buttonAuth: { //按钮控制
|
|
|
+ isCurveChartAdd: false,
|
|
|
+ isRelevanceChartAdd: false,
|
|
|
+ isRollChartAdd: false,
|
|
|
+ isRollEdbAdd: false,
|
|
|
+ isRollChartTwoAdd: false,
|
|
|
+ isRollEdbTwoAdd: false,
|
|
|
+ },
|
|
|
};
|
|
|
},
|
|
|
+ computed:{
|
|
|
+ yearSelector(){
|
|
|
+ return []
|
|
|
+ },
|
|
|
+ dayOpt(){
|
|
|
+ return []
|
|
|
+ }
|
|
|
+ },
|
|
|
methods: {
|
|
|
- handleSelectTargetA(){},
|
|
|
- handleSelectTargetB(){},
|
|
|
- handleSelectTarget(){}
|
|
|
+ //选择指标后填入上下限
|
|
|
+ async getEdbDetail({EdbInfoId,EdbInfoType}) {
|
|
|
+ const { Data } = EdbInfoType
|
|
|
+ ? await preDictEdbInterface.edbDetail({EdbInfoId})
|
|
|
+ : await dataBaseInterface.calculateDetail({EdbInfoId})
|
|
|
+ return {
|
|
|
+ max: EdbInfoType ? Data.MaxValue : Data.EdbInfoDetail.MaxValue,
|
|
|
+ min: EdbInfoType ? Data.MinValue : Data.EdbInfoDetail.MinValue,
|
|
|
+ }
|
|
|
+ },
|
|
|
+ async handleSelectTarget({type,target}){
|
|
|
+ this.infoForm[type] = target||''
|
|
|
+ if(!target) return
|
|
|
+ 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;
|
|
|
+ }else if(type==='EdbInfoIdB'){
|
|
|
+ this.infoForm.Curve.RightMin = min;
|
|
|
+ this.infoForm.Curve.RightMax = max;
|
|
|
+ }
|
|
|
+ this.getPreviewSplineChart()
|
|
|
+ },
|
|
|
+ //选择指标后生成曲线图
|
|
|
+ async getPreviewSplineChart(){
|
|
|
+ if(!this.infoForm.EdbInfoIdA || !this.infoForm.EdbInfoIdB) return
|
|
|
+ let params = {
|
|
|
+ ...this.infoForm
|
|
|
+ }
|
|
|
+ const res = await chartRelevanceApi.previewSplineChart(params);
|
|
|
+ if(res.Ret !== 200) return
|
|
|
+ this.chartBatchData = this.chartBatchData?{
|
|
|
+ ...this.chartBatchData,
|
|
|
+ CurveData: res.Data.CurveData
|
|
|
+ }:{CurveData: res.Data.CurveData};
|
|
|
+ },
|
|
|
+ /* 曲线配置变化时重绘 */
|
|
|
+ changeSplineOption() {
|
|
|
+ const { LeftMin,LeftMax,RightMin,RightMax,IsOrder } = this.infoForm.Curve;
|
|
|
+ this.$refs.chartCard1.options.yAxis[0].max = Number(LeftMax);
|
|
|
+ this.$refs.chartCard1.options.yAxis[0].min = Number(LeftMin);
|
|
|
+
|
|
|
+ this.$refs.chartCard1.options.yAxis[1].max = Number(RightMax);
|
|
|
+ this.$refs.chartCard1.options.yAxis[1].min = Number(RightMin);
|
|
|
+ this.chartBatchData.CurveData.EdbInfoList[1].IsOrder = IsOrder;
|
|
|
+ },
|
|
|
+ dateChange(){},
|
|
|
+ async testRuleCheck(){
|
|
|
+ await this.$refs.infoFormRef.validate()
|
|
|
+ },
|
|
|
+ //获取相关性图表详情
|
|
|
+ getRelevanceChartDetail(){
|
|
|
+ //判断是单因子or多因子
|
|
|
+ this.getSingleDetail()
|
|
|
+ },
|
|
|
+ async getSingleDetail(){
|
|
|
+ if(!this.$route.query.code) return
|
|
|
+ const res = await chartRelevanceApi.getOptionByCode({ UniqueCode: this.$route.query.code});
|
|
|
+ if(res.Ret !== 200) return
|
|
|
+ this.chartInfoData = {
|
|
|
+ EdbInfoList: res.Data.EdbInfoList
|
|
|
+ }
|
|
|
+ //初始化infoForm
|
|
|
+ const { MultipleGraphConfigId,EdbInfoIdA,EdbInfoIdB,Curve,Correlation,RollingCorrelation } = res.Data.MultipleGraphConfig;
|
|
|
+ this.infoForm = {
|
|
|
+ MultipleGraphConfigId,
|
|
|
+ EdbInfoIdA,
|
|
|
+ EdbInfoIdB,
|
|
|
+ Curve: {
|
|
|
+ ...JSON.parse(Curve),
|
|
|
+ Date: [JSON.parse(Curve).StartDate,JSON.parse(Curve).EndDate],
|
|
|
+ },
|
|
|
+ Correlation: JSON.parse(Correlation),
|
|
|
+ RollingCorrelation: JSON.parse(RollingCorrelation)
|
|
|
+ }
|
|
|
+ //初始化权限
|
|
|
+ this.buttonAuth = {
|
|
|
+ isCurveChartAdd: res.Data.ChartMappingList.some(_ => _.MultipleLocationSource===1),
|
|
|
+ isRelevanceChartAdd: res.Data.ChartMappingList.some(_ => _.MultipleLocationSource===2),
|
|
|
+ isRollChartAdd: res.Data.ChartMappingList.some(_ => _.MultipleLocationSource===3),
|
|
|
+ isRollEdbAdd: res.Data.EdbMappingList.some(_ => _.MultipleLocationSource===3),
|
|
|
+ isRollChartTwoAdd: res.Data.ChartMappingList.some(_ => _.MultipleLocationSource===4),
|
|
|
+ isRollEdbTwoAdd: res.Data.EdbMappingList.some(_ => _.MultipleLocationSource===4)
|
|
|
+ }
|
|
|
+ //初始化chartBatch
|
|
|
+ this.getPreviewSplineChart()
|
|
|
+ }
|
|
|
},
|
|
|
};
|
|
|
</script>
|
|
|
@@ -126,8 +266,6 @@ export default {
|
|
|
background: #fff;
|
|
|
border: 1px solid #ececec;
|
|
|
border-radius: 4px;
|
|
|
- box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.05);
|
|
|
- height: calc(100vh - 120px);
|
|
|
}
|
|
|
.info-wrap{
|
|
|
width:380px;
|
|
|
@@ -135,6 +273,7 @@ export default {
|
|
|
margin-right: 20px;
|
|
|
display: flex;
|
|
|
flex-direction: column;
|
|
|
+ height: calc(100vh - 120px);
|
|
|
.info-top{
|
|
|
padding: 15px 20px;
|
|
|
border-bottom: 1px solid #ececec;
|
|
|
@@ -144,20 +283,32 @@ export default {
|
|
|
flex: 1;
|
|
|
overflow-y: auto;
|
|
|
padding:20px;
|
|
|
+ .el-form-item{
|
|
|
+ margin-bottom: 10px;
|
|
|
+ }
|
|
|
.model-form{
|
|
|
.select-target{
|
|
|
display: flex;
|
|
|
- margin-top: 20px;
|
|
|
+ margin-top: 10px;
|
|
|
.el-form-item__label{
|
|
|
flex-shrink: 0;
|
|
|
}
|
|
|
.el-form-item__content{
|
|
|
margin-left: 0 !important;
|
|
|
+ .el-select{
|
|
|
+ margin-top: 10px !important;
|
|
|
+ }
|
|
|
}
|
|
|
.el-date-editor.el-input, .el-date-editor.el-input__inner{
|
|
|
width: auto;
|
|
|
}
|
|
|
}
|
|
|
+ .flex-form-item{
|
|
|
+ .el-form-item__content{
|
|
|
+ display: flex;
|
|
|
+ gap:0 5px;
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
.multiple-model-form{
|
|
|
.factor-form-item{
|
|
|
@@ -192,6 +343,7 @@ export default {
|
|
|
}
|
|
|
.model-wrap{
|
|
|
flex:1;
|
|
|
+ height: calc(100vh - 120px);
|
|
|
}
|
|
|
}
|
|
|
</style>
|
cxmo