|
@@ -0,0 +1,1089 @@
|
|
|
|
+<template>
|
|
|
|
+ <div class="relevance-chart-editor-wrap" v-loading="previewMatrixLoading" element-loading-text="正在计算相关性矩阵...">
|
|
|
|
+ <div class="info-wrap content-wrap">
|
|
|
|
+ <div class="info-top">
|
|
|
|
+ <el-button type="primary" @click="previewChart">{{$t('Dialog.calculate_btn')}}</el-button>
|
|
|
|
+ <el-button type="primary" plain @click="$router.back()">{{$t('Dialog.cancel_btn')}}</el-button>
|
|
|
|
+ <!-- 操作说明 -->
|
|
|
|
+ <span @click="showExplain = true">
|
|
|
|
+ <img style="width:15px;height:15px;" src="~@/assets/img/icons/formula-add.png" alt="">
|
|
|
|
+ {{$t('StatisticAnalysis.ChartRelevance.opt_tip_btn')}}
|
|
|
|
+ </span>
|
|
|
|
+ </div>
|
|
|
|
+ <div class="info-form-wrap">
|
|
|
|
+ <el-form :model="infoForm" :rules="infoRules" label-width="80px" ref="infoFormRef">
|
|
|
|
+ <!-- 分析模式 -->
|
|
|
|
+ <el-form-item
|
|
|
|
+ :label="$t('StatisticAnalysis.ChartRelevance.analytical_model')"
|
|
|
|
+ prop="Model" required>
|
|
|
|
+ <el-select v-model="infoForm.Model" style="width: 100%;"
|
|
|
|
+ :disabled="$route.query.code||isMultipleChartAdd||buttonAuth.isRelevanceChartAdd"
|
|
|
|
+ @change="changeModel">
|
|
|
|
+ <el-option :label="$t('StatisticAnalysis.ChartRelevance.single_indicator')" :value="1"></el-option>
|
|
|
|
+ <el-option :label="$t('StatisticAnalysis.ChartRelevance.multiple_indicators')" :value="2"></el-option>
|
|
|
|
+ </el-select>
|
|
|
|
+ </el-form-item>
|
|
|
|
+ <!-- 单因子模式需要填的 -->
|
|
|
|
+ <singleIndForm
|
|
|
|
+ v-if="infoForm.Model===1"
|
|
|
|
+ :info-form="infoForm"
|
|
|
|
+ :chart-info-data="chartInfoData"
|
|
|
|
+ @selectTarget="handleSelectTarget"
|
|
|
|
+ @previewChart="getPreviewSplineChart"
|
|
|
|
+ @changeSpline="changeSplineOption"
|
|
|
|
+ ></singleIndForm>
|
|
|
|
+ <!-- 多因子模式需要填的 -->
|
|
|
|
+ <multipleIndForm
|
|
|
|
+ v-if="infoForm.Model===2"
|
|
|
|
+ ref="multipleIndForm"
|
|
|
|
+ :info-form="infoForm"
|
|
|
|
+ :isMultipleChartAdd="isMultipleChartAdd"
|
|
|
|
+ :chart-info-data="chartInfoData"
|
|
|
|
+ :SeriesList="SeriesList"
|
|
|
|
+ @selectTarget="handleSelectTarget"
|
|
|
|
+ @checkRecalculate="checkRecalculate"
|
|
|
|
+ ></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 content-wrap">
|
|
|
|
+ <chartCard
|
|
|
|
+ :entryType="1"
|
|
|
|
+ ref="chartCard1"
|
|
|
|
+ :data="chartBatchData.CurveData"
|
|
|
|
+ :settings="infoForm"
|
|
|
|
+ :isChartAdd="buttonAuth.isCurveChartAdd"
|
|
|
|
+ @saveChart="(params)=>{handleSave(params);isSaveChartToBase = true;}"
|
|
|
|
+ @saveEdb="(params)=>{handleSave(params);isSaveEdbToBase = true;}"
|
|
|
|
+ />
|
|
|
|
+ </div>
|
|
|
|
+ <!-- 相关性图表 -->
|
|
|
|
+ <div class="card-wrapper content-wrap" v-if="chartBatchData.CorrelationData">
|
|
|
|
+ <chartCard
|
|
|
|
+ :entryType="2"
|
|
|
|
+ ref="chartCard2"
|
|
|
|
+ :data="chartBatchData.CorrelationData"
|
|
|
|
+ :settings="infoForm"
|
|
|
|
+ :isChartAdd="buttonAuth.isRelevanceChartAdd"
|
|
|
|
+ :isChartSetting="true"
|
|
|
|
+ @chartSettingChange="handleChangeChartSetting"
|
|
|
|
+ @saveChart="(params)=>{handleSave(params);isSaveChartToBase = true;}"
|
|
|
|
+ @saveEdb="(params)=>{handleSave(params);isSaveEdbToBase = true;}"
|
|
|
|
+ />
|
|
|
|
+ <!-- 图表数据来源 -->
|
|
|
|
+ <div class="source" v-if="chartBatchData.SourcesFrom.text&&chartBatchData.SourcesFrom.isShow">
|
|
|
|
+ {{ $t('Edb.Detail.source') }}:{{ chartBatchData.SourcesFrom.text }}
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
|
|
+ <!-- 滚动相关性1 -->
|
|
|
|
+ <template v-if="chartBatchData.RollingCorrelationData">
|
|
|
|
+ <div class="card-wrapper content-wrap" v-if="chartBatchData.RollingCorrelationData[0]">
|
|
|
|
+ <chartCard
|
|
|
|
+ :entryType="3"
|
|
|
|
+ ref="chartCard3"
|
|
|
|
+ :data="chartBatchData.RollingCorrelationData[0]"
|
|
|
|
+ :settings="infoForm"
|
|
|
|
+ :isChartAdd="buttonAuth.isRollChartAdd"
|
|
|
|
+ :isEdbAdd="buttonAuth.isRollEdbAdd"
|
|
|
|
+ @saveChart="(params)=>{handleSave(params);isSaveChartToBase = true;}"
|
|
|
|
+ @saveEdb="(params)=>{handleSave(params);isSaveEdbToBase = true;}"
|
|
|
|
+ />
|
|
|
|
+ </div>
|
|
|
|
+ <!-- 滚动相关性2 -->
|
|
|
|
+ <div class="card-wrapper content-wrap" v-if="chartBatchData.RollingCorrelationData[1]">
|
|
|
|
+ <chartCard
|
|
|
|
+ :entryType="4"
|
|
|
|
+ ref="chartCard4"
|
|
|
|
+ :data="chartBatchData.RollingCorrelationData[1]"
|
|
|
|
+ :settings="infoForm"
|
|
|
|
+ :isChartAdd="buttonAuth.isRollChartTwoAdd"
|
|
|
|
+ :isEdbAdd="buttonAuth.isRollEdbTwoAdd"
|
|
|
|
+ @saveChart="(params)=>{handleSave(params);isSaveChartToBase = true;}"
|
|
|
|
+ @saveEdb="(params)=>{handleSave(params);isSaveEdbToBase = true;}"
|
|
|
|
+ />
|
|
|
|
+ </div>
|
|
|
|
+ </template>
|
|
|
|
+ </div>
|
|
|
|
+
|
|
|
|
+ <div class="nodata" v-else>
|
|
|
|
+ <tableNoData text="暂无信息"/>
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
|
|
+ <!-- 多因子模式 -->
|
|
|
|
+ <div class="multiple-model-wrap" v-if="infoForm.Model===2">
|
|
|
|
+ <!-- 相关性矩阵表格 -->
|
|
|
|
+ <div class="relevant-matrix-table-box" v-if="factorTableData.length">
|
|
|
|
+ <el-table style="width: 100%;" height="100%" :data="factorTableData" :row-class-name="getTableRowClassname" @sort-change="sortChange">
|
|
|
|
+ <el-table-column
|
|
|
|
+ fixed
|
|
|
|
+ :label="$t('StatisticAnalysis.ChartRelevance.multiple_table_head_01')"
|
|
|
|
+ width="220px"
|
|
|
|
+ align="center"
|
|
|
|
+ class-name="zip-cell"
|
|
|
|
+ >
|
|
|
|
+ <el-table-column
|
|
|
|
+ width="80px" align="center"
|
|
|
|
+ class-name="zip-cell"
|
|
|
|
+ :label="$t('Edb.Detail.e_opera')">
|
|
|
|
+ <template slot-scope="{row}">
|
|
|
|
+ <template v-if="row.isSuccess">
|
|
|
|
+ <span style="color:#0052D9;cursor: pointer;" @click="addCurve(row)" v-if="!row.isAdd">{{$t('StatisticAnalysis.ChartRelevance.multiple_table_btn_add')}}</span>
|
|
|
|
+ <span style="color:#D54941;cursor: pointer;" @click="deleteCurve(row)" v-else>{{$t('StatisticAnalysis.ChartRelevance.multiple_table_btn_del')}}</span>
|
|
|
|
+ </template>
|
|
|
|
+ </template>
|
|
|
|
+ </el-table-column>
|
|
|
|
+ <el-table-column
|
|
|
|
+ width="140px" align="center"
|
|
|
|
+ class-name="zip-cell"
|
|
|
|
+ show-overflow-tooltip
|
|
|
|
+ prop="EdbName"
|
|
|
|
+ :label="$t('StatisticAnalysis.ChartRelevance.multiple_table_head_02')">
|
|
|
|
+ </el-table-column>
|
|
|
|
+ </el-table-column>
|
|
|
|
+ <!-- 领先天数 -->
|
|
|
|
+ <el-table-column
|
|
|
|
+ v-if="SortedArray.length"
|
|
|
|
+ class-name="zip-cell"
|
|
|
|
+ :label="LeadLabelName">
|
|
|
|
+ <el-table-column v-for="(num,index) in SortedArray" :key="num"
|
|
|
|
+ min-width="45px"
|
|
|
|
+ sortable="custom"
|
|
|
|
+ prop="LeadValue"
|
|
|
|
+ align="center"
|
|
|
|
+ class-name="zip-cell"
|
|
|
|
+ :label="num">
|
|
|
|
+ <template slot-scope="{row}">
|
|
|
|
+ {{ row.dataList[index] }}
|
|
|
|
+ </template>
|
|
|
|
+ </el-table-column>
|
|
|
|
+ </el-table-column>
|
|
|
|
+ </el-table>
|
|
|
|
+ </div>
|
|
|
|
+ <!-- 相关性图表 -->
|
|
|
|
+ <div class="relevant-chart-box content-wrap" v-if="showMultipleChart">
|
|
|
|
+ <chartCard
|
|
|
|
+ ref="chartCard2"
|
|
|
|
+ :data="multipleChartData"
|
|
|
|
+ :settings="infoForm"
|
|
|
|
+ :entryType="2"
|
|
|
|
+ :isChartSetting="true"
|
|
|
|
+ :isChartAdd="isMultipleChartAdd"
|
|
|
|
+ height="300"
|
|
|
|
+ @handleEdit="saveMultipleChart"
|
|
|
|
+ @saveChart="(params)=>{handleSave(params);isSaveChartToBase = true;}"
|
|
|
|
+ @saveEdb="(params)=>{handleSave(params);isSaveEdbToBase = true;}"
|
|
|
|
+ @chartSettingChange="handleChangeChartSetting"
|
|
|
|
+ />
|
|
|
|
+ <!-- 数据来源 -->
|
|
|
|
+ <div class="source" v-if="multipleChartData.SourcesFrom.text&&multipleChartData.SourcesFrom.isShow">
|
|
|
|
+ {{ $t('Edb.Detail.source') }}:{{ multipleChartData.SourcesFrom.text }}
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
|
|
+
|
|
|
|
+ <div class="nodata" v-if="!factorTableData.length">
|
|
|
|
+ <tableNoData :text="$t('Common.no_info_msg')"/>
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
|
|
+ <!-- 图表保存/另存为 -->
|
|
|
|
+ <saveChartToBase
|
|
|
|
+ :isShow.sync="isSaveChartToBase"
|
|
|
|
+ :source="saveSource"
|
|
|
|
+ :saveScence="saveScence"
|
|
|
|
+ :chartData="chartData"
|
|
|
|
+ @saveBack="saveChartBack"
|
|
|
|
+ @handleSave="saveMultipleChart"
|
|
|
|
+ />
|
|
|
|
+
|
|
|
|
+ <!-- 指标保存/另存为 -->
|
|
|
|
+ <saveEdbToBase
|
|
|
|
+ :isShow.sync="isSaveEdbToBase"
|
|
|
|
+ :source="saveSource"
|
|
|
|
+ :saveScence="saveScence"
|
|
|
|
+ :chartData="chartData"
|
|
|
|
+ @saveBack="saveEdbBack"
|
|
|
|
+ />
|
|
|
|
+ <!-- 图例设置 -->
|
|
|
|
+ <saveChartSetting
|
|
|
|
+ :isSettingChartShow="isSettingChartShow"
|
|
|
|
+ :settingData="settingData"
|
|
|
|
+ @saveChartSetting="changeChartSettingBack"
|
|
|
|
+ @close="isSettingChartShow = false"
|
|
|
|
+ />
|
|
|
|
+ <!-- 操作说明 -->
|
|
|
|
+ <ExplainDialog
|
|
|
|
+ :show-explain="showExplain"
|
|
|
|
+ @close="showExplain = false"
|
|
|
|
+ />
|
|
|
|
+ </div>
|
|
|
|
+</template>
|
|
|
|
+
|
|
|
|
+<script>
|
|
|
|
+/* api */
|
|
|
|
+import { dataBaseInterface } from '@/api/api.js'
|
|
|
|
+import * as preDictEdbInterface from '@/api/modules/predictEdbApi.js'
|
|
|
|
+import chartRelevanceApi from '@/api/modules/chartRelevanceApi'
|
|
|
|
+import {etaBaseConfigInterence} from '@/api/modules/etaBaseConfigApi.js';
|
|
|
|
+
|
|
|
|
+/*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'
|
|
|
|
+import saveChartToBase from '../components/saveChartTobaseDia.vue'
|
|
|
|
+import saveEdbToBase from '../components/saveEdbToBaseDia.vue'
|
|
|
|
+import saveChartSetting from './../components/saveChartSetting.vue'
|
|
|
|
+import ExplainDialog from '../components/explainDialog.vue'
|
|
|
|
+/* utils */
|
|
|
|
+import {generateSortedArray,generateXEdbValue,generateYDataValue} from './utils/index'
|
|
|
|
+import { baseForm, baseChartInfo,baseSourcesFrom } from './utils/config'
|
|
|
|
+export default {
|
|
|
|
+ components:{
|
|
|
|
+ selectTarget, singleIndForm, multipleIndForm,
|
|
|
|
+ chartCard,saveChartToBase,saveEdbToBase,saveChartSetting,
|
|
|
|
+ ExplainDialog
|
|
|
|
+ },
|
|
|
|
+ data() {
|
|
|
|
+ return {
|
|
|
|
+ typeModel:0,
|
|
|
|
+ infoForm:_.cloneDeep(baseForm),
|
|
|
|
+ chartInfoData: {},//单因子指标信息,新增时为空,编辑时有值,用于回显selectTarget,多因子取第一项
|
|
|
|
+ chartBatchData:null,//单因子图表信息
|
|
|
|
+ buttonAuth: { //单因子图表按钮控制
|
|
|
|
+ isCurveChartAdd: false,
|
|
|
|
+ isRelevanceChartAdd: false,
|
|
|
|
+ isRollChartAdd: false,
|
|
|
|
+ isRollEdbAdd: false,
|
|
|
|
+ isRollChartTwoAdd: false,
|
|
|
|
+ isRollEdbTwoAdd: false,
|
|
|
|
+ },
|
|
|
|
+ isMultipleChartAdd:false,//多因子图表按钮控制
|
|
|
|
+ SeriesList:[],//多因子系列列表,编辑时有值
|
|
|
|
+ SortedArray:[],//多因子-领先期数数组 ±N
|
|
|
|
+ factorTableData:[],//多因子-相关性矩阵表格
|
|
|
|
+ factorTableDataSortCopy:[],//复制一份,用于还原排序
|
|
|
|
+ multipleChartData:_.cloneDeep(baseChartInfo),//多因子图表信息
|
|
|
|
+ IndTarget:{},//存储标的指标信息
|
|
|
|
+ showMultipleChart:false,//是否显示多因子相关性图表
|
|
|
|
+
|
|
|
|
+ isSaveChartToBase:false,
|
|
|
|
+ isSaveEdbToBase:false,
|
|
|
|
+ saveScence:'',
|
|
|
|
+ saveSource:0,
|
|
|
|
+ chartData:'',
|
|
|
|
+
|
|
|
|
+ settingData:{SourcesFrom:{}},//图例信息
|
|
|
|
+ isSettingChartShow:false,
|
|
|
|
+
|
|
|
|
+ showExplain:false,//显示操作说明
|
|
|
|
+ SourcesFromVisable:false,//数据来源的默认值,仅在新增时生效
|
|
|
|
+ previewMatrixLoading:false,//计算相关性矩阵loading
|
|
|
|
+ };
|
|
|
|
+ },
|
|
|
|
+ computed:{
|
|
|
|
+ //领先期数label
|
|
|
|
+ LeadLabelName(){
|
|
|
|
+ const UnitEnMap = {
|
|
|
|
+ '年': 'Year',
|
|
|
|
+ '季': 'Season',
|
|
|
|
+ '月': 'Month',
|
|
|
|
+ '周': 'Week',
|
|
|
|
+ '天': 'Day',
|
|
|
|
+ }
|
|
|
|
+ return this.$t('StatisticAnalysis.ChartRelevance.multiple_table_head_03',{unit:UnitEnMap[this.infoForm.Correlation.LeadUnit]})
|
|
|
|
+ },
|
|
|
|
+ infoRules(){
|
|
|
|
+ return {
|
|
|
|
+ EdbInfoIdA:[{
|
|
|
|
+ required:true,
|
|
|
|
+ message:/* '指标A未选择' */this.$t('StatisticAnalysis.ChartRelevance.infoform_rules_hint_01'),
|
|
|
|
+ trigger:'blur'
|
|
|
|
+ }],
|
|
|
|
+ EdbInfoIdB:[{
|
|
|
|
+ required:true,
|
|
|
|
+ message:/* '指标B未选择' */this.$t('StatisticAnalysis.ChartRelevance.infoform_rules_hint_02'),
|
|
|
|
+ trigger:'blur'
|
|
|
|
+ }],
|
|
|
|
+ IndTarget:[{
|
|
|
|
+ required:true,
|
|
|
|
+ message:/* '标的指标未选择' */this.$t('StatisticAnalysis.ChartRelevance.infoform_rules_hint_03'),
|
|
|
|
+ trigger:'blur'
|
|
|
|
+ }],
|
|
|
|
+ 'Correlation.CalculateValue':[{
|
|
|
|
+ required:true,
|
|
|
|
+ message:/* '计算窗口未填写' */this.$t('StatisticAnalysis.ChartRelevance.infoform_rules_hint_04'),
|
|
|
|
+ trigger:'blur'}],
|
|
|
|
+ 'Correlation.LeadValue':[{
|
|
|
|
+ required:true,
|
|
|
|
+ message:/* '分析周期未填写' */this.$t('StatisticAnalysis.ChartRelevance.infoform_rules_hint_05'),
|
|
|
|
+ trigger:'blur'
|
|
|
|
+ }]
|
|
|
|
+ }
|
|
|
|
+ },
|
|
|
|
+ chartInfo(){ //单因子系列保存/更新/另存为会用到
|
|
|
|
+ return this.infoForm
|
|
|
|
+ }
|
|
|
|
+ },
|
|
|
|
+ mounted(){
|
|
|
|
+ this.getRelevanceChartDetail()
|
|
|
|
+ this.getChartBaseSetting()
|
|
|
|
+ },
|
|
|
|
+ methods: {
|
|
|
|
+ //获取图表全局设置
|
|
|
|
+ async getChartBaseSetting(){
|
|
|
|
+ //目前是用基本配置的接口,后续有多个配置再改
|
|
|
|
+ const res = await etaBaseConfigInterence.getBaseConfig()
|
|
|
|
+ if(res.Ret!==200) return
|
|
|
|
+ const {ChartSourceDisplay} = res.Data||{}
|
|
|
|
+ this.SourcesFromVisable = ChartSourceDisplay==='true'?true:false
|
|
|
|
+ //多因子的配置一开始就初始化,在这里设置默认值
|
|
|
|
+ if(!this.$route.query.code){
|
|
|
|
+ this.multipleChartData.SourcesFrom.isShow = this.SourcesFromVisable
|
|
|
|
+ }
|
|
|
|
+ },
|
|
|
|
+ sortChange({column,prop,order}){
|
|
|
|
+ const {label} = column
|
|
|
|
+ this.factorTableData.sort((a,b)=>{
|
|
|
|
+ if(order==='ascending'){
|
|
|
|
+ return a.dataList[label] - b.dataList[label]
|
|
|
|
+ }else{
|
|
|
|
+ return b.dataList[label] - a.dataList[label]
|
|
|
|
+ }
|
|
|
|
+ })
|
|
|
|
+ //取消order 排序还原为factorTableDataSortCopy的顺序
|
|
|
|
+ if(!order){
|
|
|
|
+ const table = this.factorTableDataSortCopy.map(copyItem=>{
|
|
|
|
+ return this.factorTableData.find(i=>i.EdbInfoId===copyItem.EdbInfoId&&i.SeriesId===copyItem.SeriesId)
|
|
|
|
+ })
|
|
|
|
+ this.factorTableData = table
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+
|
|
|
|
+ },
|
|
|
|
+ //禁用表格行的样式
|
|
|
|
+ getTableRowClassname({row}){
|
|
|
|
+ if(!row.isSuccess){
|
|
|
|
+ return 'disable-row'
|
|
|
|
+ }
|
|
|
|
+ return ''
|
|
|
|
+ },
|
|
|
|
+ changeModel(){
|
|
|
|
+ this.typeModel = this.infoForm.Model
|
|
|
|
+ this.resetForm()
|
|
|
|
+ },
|
|
|
|
+ //重置表单
|
|
|
|
+ resetForm(){
|
|
|
|
+ this.infoForm = _.cloneDeep(baseForm)
|
|
|
|
+ this.chartBatchData = null
|
|
|
|
+ this.factorTableData = []
|
|
|
|
+ this.factorTableDataSortCopy=[]
|
|
|
|
+ this.showMultipleChart = false
|
|
|
|
+ this.infoForm.Model = this.typeModel
|
|
|
|
+ this.typeModel = 0
|
|
|
|
+ },
|
|
|
|
+ //选择指标后获取指标详情
|
|
|
|
+ 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,
|
|
|
|
+ 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.IndTarget = data
|
|
|
|
+ //点计算时,才真正赋值ChartInfo
|
|
|
|
+ //this.multipleChartData.ChartInfo = data
|
|
|
|
+ }
|
|
|
|
+ //若为单因子,选择AB指标后预览曲线图
|
|
|
|
+ if(!['EdbInfoIdA','EdbInfoIdB'].includes(type)) return
|
|
|
|
+ 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
|
|
|
|
+ if(this.infoForm.Curve.DateType===5&&!this.infoForm.Curve.Date[0]) 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;
|
|
|
|
+ },
|
|
|
|
+ //预览相关性图表/相关性矩阵
|
|
|
|
+ async previewChart(){
|
|
|
|
+ //表单校验
|
|
|
|
+ await this.$refs.infoFormRef.validate()
|
|
|
|
+ //相关性值校验
|
|
|
|
+ if(!this.checkValue()) return
|
|
|
|
+
|
|
|
|
+ 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{
|
|
|
|
+ //已添加指标后重新计算
|
|
|
|
+ if(this.isMultipleChartAdd){
|
|
|
|
+ const {ChartInfoId,UniqueCode,ClassifyId} = this.multipleChartData.ChartInfo
|
|
|
|
+ this.multipleChartData.ChartInfo = this.IndTarget
|
|
|
|
+ this.multipleChartData.ChartInfo.ChartInfoId = ChartInfoId
|
|
|
|
+ this.multipleChartData.ChartInfo.UniqueCode = UniqueCode
|
|
|
|
+ this.multipleChartData.ChartInfo.ClassifyId = ClassifyId
|
|
|
|
+ }else{
|
|
|
|
+ this.multipleChartData.ChartInfo = this.IndTarget
|
|
|
|
+ }
|
|
|
|
+ //多因子:根据分析周期生成相关性矩阵,在未添加曲线前不生成图表
|
|
|
|
+ this.previewMultipleTable()
|
|
|
|
+ }
|
|
|
|
+ },
|
|
|
|
+ //校验规则
|
|
|
|
+ checkValue() {
|
|
|
|
+ //只用于校验规则条件大小
|
|
|
|
+ let checkBool = true;
|
|
|
|
+ const valueMap = {
|
|
|
|
+ '年': 365,
|
|
|
|
+ '季': 90,
|
|
|
|
+ '月': 30,
|
|
|
|
+ '周': 7,
|
|
|
|
+ '天': 1
|
|
|
|
+ }
|
|
|
|
+ const { Correlation } = this.infoForm;
|
|
|
|
+ if(Correlation.CalculateValue*valueMap[Correlation.CalculateUnit] < Correlation.LeadValue*valueMap[Correlation.LeadUnit]*2) {
|
|
|
|
+ this.infoForm.Correlation.CalculateValue = 0;
|
|
|
|
+ this.$message.warning(/* '相关性计算窗口必须≥2*分析周期' */this.$t('StatisticAnalysis.ChartRelevance.check_value_hint'))
|
|
|
|
+ checkBool = false
|
|
|
|
+ }
|
|
|
|
+ return checkBool
|
|
|
|
+ },
|
|
|
|
+ //预览单因子图表 初始化 chartBatchData
|
|
|
|
+ async previewSingleChart(initConfig=null){
|
|
|
|
+ const res = await chartRelevanceApi.previewChartBatch({...this.infoForm});
|
|
|
|
+ if(res.Ret !== 200) return
|
|
|
|
+ this.chartBatchData = res.Data;
|
|
|
|
+ //第一次初始化时,需初始化图例和数据来源信息
|
|
|
|
+ if(initConfig){
|
|
|
|
+ const {CorrelationExtraConfig,SourcesFrom} = initConfig
|
|
|
|
+ try{
|
|
|
|
+ this.chartBatchData.SourcesFrom = SourcesFrom?JSON.parse(SourcesFrom):_.cloneDeep(baseSourcesFrom)
|
|
|
|
+ }catch(e){
|
|
|
|
+ this.chartBatchData.SourcesFrom = _.cloneDeep(baseSourcesFrom)
|
|
|
|
+ }
|
|
|
|
+ //新增时 来源与基本配置设置的一致
|
|
|
|
+ if(!this.$route.query.code){
|
|
|
|
+ this.chartBatchData.SourcesFrom.isShow = this.SourcesFromVisable
|
|
|
|
+ }
|
|
|
|
+ //拼接来源
|
|
|
|
+ const {EdbInfoList} = res.Data.CorrelationData
|
|
|
|
+ const tempStr = EdbInfoList[0].SourceName+','+EdbInfoList[1].SourceName
|
|
|
|
+ this.chartBatchData.SourcesFrom.text += `${this.chartBatchData.SourcesFrom.text.length?',':''}${tempStr}`
|
|
|
|
+ //拼接后去重
|
|
|
|
+ let concatSourceArr = `${this.chartBatchData.SourcesFrom.text}`.split(',');
|
|
|
|
+ let sourceStr = Array.from(new Set(concatSourceArr)).join(',');
|
|
|
|
+ this.chartBatchData.SourcesFrom.text = sourceStr
|
|
|
|
+ try{
|
|
|
|
+ const {LegendConfig} = CorrelationExtraConfig?JSON.parse(CorrelationExtraConfig):{LegendConfig:[]}
|
|
|
|
+ this.chartBatchData.CorrelationData.YDataList[0].Color = LegendConfig[0].Color
|
|
|
|
+ this.chartBatchData.CorrelationData.YDataList[0].Name = LegendConfig[0].Legendlame
|
|
|
|
+ }catch(e){
|
|
|
|
+
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ },
|
|
|
|
+ //预览多因子矩阵 初始化 factorTableData
|
|
|
|
+ previewMultipleTable(){
|
|
|
|
+ //全局loading
|
|
|
|
+ this.previewMatrixLoading = true
|
|
|
|
+ const {IndTarget,Correlation} = this.infoForm
|
|
|
|
+ const SeriesIds = this.$refs.multipleIndForm.factorList.map(i=>i.SeriesId)
|
|
|
|
+ //清空表格和图表
|
|
|
|
+ this.factorTableData = []
|
|
|
|
+ this.factorTableDataSortCopy=[]
|
|
|
|
+ this.multipleChartData.YDataList=[]
|
|
|
|
+ this.showMultipleChart = false
|
|
|
|
+ chartRelevanceApi.getCorrelationMatrix({
|
|
|
|
+ BaseEdbInfoId:IndTarget,
|
|
|
|
+ Correlation,
|
|
|
|
+ SeriesIds,
|
|
|
|
+ }).then(res=>{
|
|
|
|
+ //loading结束
|
|
|
|
+ this.previewMatrixLoading = false
|
|
|
|
+ if(res.Ret!==200) return
|
|
|
|
+
|
|
|
|
+ const {Fail=[],Success=[]} = res.Data
|
|
|
|
+ if(!Success||Success&&!Success.length){
|
|
|
|
+ this.$message.warning('所有指标计算失败,请重新选择指标')
|
|
|
|
+ return
|
|
|
|
+ }
|
|
|
|
+ //标记失败的
|
|
|
|
+ const FailList = Fail?Fail.map(i=>{
|
|
|
|
+ return {
|
|
|
|
+ ...i,
|
|
|
|
+ isSuccess:false,
|
|
|
|
+ dataList:[]
|
|
|
|
+ }
|
|
|
|
+ }):[]
|
|
|
|
+ const SuccessList = Success.map(i=>{
|
|
|
|
+ return {
|
|
|
|
+ ...i,
|
|
|
|
+ isSuccess:true,
|
|
|
|
+ isAdd:false,
|
|
|
|
+ dataList:i.Values.map(v=>v.YData)
|
|
|
|
+ }
|
|
|
|
+ })
|
|
|
|
+ this.factorTableData = [...SuccessList,...FailList]
|
|
|
|
+ this.factorTableDataSortCopy = _.cloneDeep(this.factorTableData)
|
|
|
|
+ //获取分析周期,生成±分析周期的数组
|
|
|
|
+ const {LeadValue,LeadUnit,CalculateUnit,CalculateValue} = this.infoForm.Correlation
|
|
|
|
+ this.SortedArray = generateSortedArray(LeadValue)
|
|
|
|
+ //设置图表默认值
|
|
|
|
+ this.multipleChartData.ChartInfo.Source = 3
|
|
|
|
+ this.multipleChartData.ChartInfo.ChartName = this.multipleChartData.ChartInfo.EdbName+`相关性分析(${CalculateValue}${CalculateUnit})`
|
|
|
|
+ this.multipleChartData.CorrelationChartInfo = {
|
|
|
|
+ LeadValue:LeadValue,
|
|
|
|
+ LeadUnit:LeadUnit
|
|
|
|
+ }
|
|
|
|
+ this.multipleChartData.XEdbIdValue = generateXEdbValue(LeadValue)
|
|
|
|
+ })
|
|
|
|
+ },
|
|
|
|
+ checkRecalculate(){
|
|
|
|
+ //若当前已预览过图表/矩阵,则重新请求矩阵接口,初始化矩阵和图表数据
|
|
|
|
+ if(this.showMultipleChart||this.factorTableData.length){
|
|
|
|
+ this.previewMultipleTable()
|
|
|
|
+ }
|
|
|
|
+ },
|
|
|
|
+ //相关性矩阵-添加曲线
|
|
|
|
+ addCurve(row){
|
|
|
|
+ const length = this.multipleChartData.YDataList.length
|
|
|
|
+ if(length>=10) return this.$message.warning('最多只支持添加10条曲线')
|
|
|
|
+ this.showMultipleChart = true
|
|
|
|
+
|
|
|
|
+ const colors = ['#00f','#f00','#999','#000','#7cb5ec', '#90ed7d', '#f7a35c', '#8085e9', '#f15c80', '#e4d354', '#2b908f', '#f45b5b', '#91e8e1']
|
|
|
|
+ this.multipleChartData.YDataList.push({
|
|
|
|
+ Id:row.EdbInfoId,
|
|
|
|
+ SeriesId:row.SeriesId,
|
|
|
|
+ Value:generateYDataValue(row.dataList,this.infoForm.Correlation.LeadValue),
|
|
|
|
+ Color:colors[length%colors.length],
|
|
|
|
+ Name:row.EdbName,
|
|
|
|
+ NameEn:row.EdbNameEn
|
|
|
|
+ })
|
|
|
|
+ row.isAdd = true
|
|
|
|
+ //数据来源拼接
|
|
|
|
+ this.multipleChartData.SourcesFrom.text += `${this.multipleChartData.SourcesFrom.text.length?',':''}${row.SourceName}`
|
|
|
|
+ //拼接后去重
|
|
|
|
+ let concatSourceArr = `${this.multipleChartData.SourcesFrom.text}`.split(',');
|
|
|
|
+ let sourceStr = Array.from(new Set(concatSourceArr)).join(',');
|
|
|
|
+ this.multipleChartData.SourcesFrom.text = sourceStr
|
|
|
|
+ },
|
|
|
|
+ //相关性矩阵-删除曲线
|
|
|
|
+ deleteCurve(row){
|
|
|
|
+ const index = this.multipleChartData.YDataList.findIndex(i=>i.Id===row.EdbInfoId&&i.SeriesId===row.SeriesId)
|
|
|
|
+ index!==-1&&this.multipleChartData.YDataList.splice(index,1)
|
|
|
|
+ row.isAdd = false
|
|
|
|
+ if(!this.multipleChartData.YDataList.length){
|
|
|
|
+ this.showMultipleChart = false
|
|
|
|
+ }
|
|
|
|
+ },
|
|
|
|
+ //打开图例设置弹窗
|
|
|
|
+ handleChangeChartSetting(data){
|
|
|
|
+ //单多因子的data结构是相同的
|
|
|
|
+ /**
|
|
|
|
+ * 图表名称:data.ChartName/en
|
|
|
|
+ * 图例:data.YDataList.Color data.YDataList.Name
|
|
|
|
+ * 数据来源:新字段 SourcesFrom.text
|
|
|
|
+ * 数据来源开关:新字段 SourcesFrom.isShow
|
|
|
|
+ */
|
|
|
|
+ const SourcesFrom = this.infoForm.Model===1?_.cloneDeep(this.chartBatchData.SourcesFrom):_.cloneDeep(this.multipleChartData.SourcesFrom)
|
|
|
|
+ this.settingData = {
|
|
|
|
+ SourcesFrom,
|
|
|
|
+ chartName:data.ChartName,
|
|
|
|
+ YDataList:_.cloneDeep(data.YDataList)
|
|
|
|
+ }
|
|
|
|
+ this.isSettingChartShow = true
|
|
|
|
+ },
|
|
|
|
+ //图例设置回调
|
|
|
|
+ changeChartSettingBack(){
|
|
|
|
+ const {chartName,YDataList,SourcesFrom} = this.settingData
|
|
|
|
+ if(this.infoForm.Model===1){
|
|
|
|
+ this.chartBatchData.CorrelationData.ChartInfo.ChartName = chartName
|
|
|
|
+ this.chartBatchData.CorrelationData.YDataList = YDataList
|
|
|
|
+ this.chartBatchData.SourcesFrom = SourcesFrom
|
|
|
|
+ }else{
|
|
|
|
+ //多因子
|
|
|
|
+ this.multipleChartData.ChartInfo.ChartName = chartName
|
|
|
|
+ this.multipleChartData.YDataList = YDataList
|
|
|
|
+ this.multipleChartData.SourcesFrom = SourcesFrom
|
|
|
|
+ }
|
|
|
|
+ this.isSettingChartShow = false
|
|
|
|
+ },
|
|
|
|
+ //打开保存/另存为图表/指标弹窗
|
|
|
|
+ handleSave({type,chartData,scence}){
|
|
|
|
+ this.saveSource = type
|
|
|
|
+ this.chartData = chartData;
|
|
|
|
+ this.saveScence = scence;
|
|
|
|
+ /* this.isSaveEdbToBase = true;
|
|
|
|
+ this.isSaveChartToBase = true; */
|
|
|
|
+ },
|
|
|
|
+ //单因子-保存/另存为指标回调
|
|
|
|
+ saveEdbBack({source}){
|
|
|
|
+ if(source===3) this.buttonAuth.isRollEdbAdd = true;
|
|
|
|
+ else if(source===4) this.buttonAuth.isRollEdbTwoAdd = true;
|
|
|
|
+ },
|
|
|
|
+ //单因子-保存/另存为图表回调
|
|
|
|
+ saveChartBack({source,id}){
|
|
|
|
+ this.$message.success(this.$t('MsgPrompt.saved_msg'));
|
|
|
|
+ this.setButtonAuth(source);
|
|
|
|
+ //设置封面图
|
|
|
|
+ this.$refs[`chartCard`+source].setChartImage(source,id)
|
|
|
|
+ },
|
|
|
|
+ //单因子-保存图表后按钮控制
|
|
|
|
+ setButtonAuth(source) {
|
|
|
|
+ const sourceMap = {
|
|
|
|
+ 1: 'isCurveChartAdd',
|
|
|
|
+ 2: 'isRelevanceChartAdd',
|
|
|
|
+ 3: 'isRollChartAdd',
|
|
|
|
+ 4: 'isRollChartTwoAdd'
|
|
|
|
+ }
|
|
|
|
+ this.buttonAuth[sourceMap[source]] = true;
|
|
|
|
+ },
|
|
|
|
+ //编辑-获取相关性图表详情
|
|
|
|
+ getRelevanceChartDetail(){
|
|
|
|
+ //判断是单因子or多因子
|
|
|
|
+ if(this.$route.query.type!=1){
|
|
|
|
+ this.getSingleDetail()
|
|
|
|
+ }else{
|
|
|
|
+ this.getMultiplyDetail()
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ },
|
|
|
|
+ //获取单因子图表详情
|
|
|
|
+ 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 = {
|
|
|
|
+ Model:1,
|
|
|
|
+ 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
|
|
|
|
+ const RelevanceInfo = res.Data.ChartMappingList.find(_=>_.MultipleLocationSource===2)||{}
|
|
|
|
+ const {CorrelationExtraConfig,SourcesFrom} = RelevanceInfo
|
|
|
|
+ this.previewSingleChart({CorrelationExtraConfig,SourcesFrom})
|
|
|
|
+ },
|
|
|
|
+ //获取多因子图表详情
|
|
|
|
+ getMultiplyDetail(){
|
|
|
|
+ if(!this.$route.query.code) return
|
|
|
|
+ //获取图表详情
|
|
|
|
+ chartRelevanceApi.getMultipleChartDetail({
|
|
|
|
+ UniqueCode:this.$route.query.code
|
|
|
|
+ }).then(res=>{
|
|
|
|
+ if(res.Ret!==200) return
|
|
|
|
+ const {ChartName,ChartClassifyId,ChartInfoId,UniqueCode,ExtraConfig,SourcesFrom} = res.Data.ChartInfo
|
|
|
|
+ this.multipleChartData.ChartInfo = {
|
|
|
|
+ ClassifyId:ChartClassifyId,ChartName,ChartInfoId,UniqueCode,Source:3
|
|
|
|
+ }
|
|
|
|
+ const {EdbInfoList,XEdbIdValue,YDataList,CorrelationChartInfo} = res.Data
|
|
|
|
+ const {LeadValue,LeadUnit} = CorrelationChartInfo
|
|
|
|
+ this.multipleChartData.CorrelationChartInfo = {
|
|
|
|
+ LeadValue,LeadUnit
|
|
|
|
+ }
|
|
|
|
+ this.multipleChartData.XEdbIdValue = XEdbIdValue
|
|
|
|
+ this.multipleChartData.EdbInfoList = EdbInfoList
|
|
|
|
+ this.multipleChartData.YDataList = YDataList.map(i=>{
|
|
|
|
+ return {
|
|
|
|
+ ...i,
|
|
|
|
+ Id:i.SeriesEdb.EdbInfoId,
|
|
|
|
+ SeriesId:i.SeriesEdb.SeriesId
|
|
|
|
+ }
|
|
|
|
+ })
|
|
|
|
+ try{
|
|
|
|
+ this.multipleChartData.SourcesFrom = SourcesFrom?JSON.parse(SourcesFrom):_.cloneDeep(baseSourcesFrom)
|
|
|
|
+ }catch(e){
|
|
|
|
+ this.multipleChartData.SourcesFrom = _.cloneDeep(baseSourcesFrom)
|
|
|
|
+ }
|
|
|
|
+ this.showMultipleChart = true
|
|
|
|
+ this.isMultipleChartAdd = true
|
|
|
|
+
|
|
|
|
+ })
|
|
|
|
+ //获取表单及矩阵详情
|
|
|
|
+ chartRelevanceApi.getMultipleFactorDetail({
|
|
|
|
+ UniqueCode:this.$route.query.code
|
|
|
|
+ }).then(res=>{
|
|
|
|
+ if(res.Ret!==200) return
|
|
|
|
+ const {BaseEdbInfo,CorrelationConfig,EdbSeries,CorrelationMatrix} = res.Data
|
|
|
|
+ const {LeadValue,LeadUnit,CalculateValue,CalculateUnit} = CorrelationConfig
|
|
|
|
+ this.infoForm.Model = 2
|
|
|
|
+ //基础信息表单
|
|
|
|
+ this.infoForm = {
|
|
|
|
+ Model:2,
|
|
|
|
+ IndTarget:BaseEdbInfo.EdbInfoId,
|
|
|
|
+ Correlation:{
|
|
|
|
+ LeadValue,LeadUnit,CalculateValue,CalculateUnit
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ //标的因子信息
|
|
|
|
+ this.IndTarget = _.cloneDeep(BaseEdbInfo)
|
|
|
|
+ this.chartInfoData = {
|
|
|
|
+ EdbInfoList:[BaseEdbInfo]
|
|
|
|
+ }
|
|
|
|
+ //因子列表
|
|
|
|
+ this.SeriesList = EdbSeries
|
|
|
|
+ //相关性矩阵
|
|
|
|
+ this.factorTableData = CorrelationMatrix.map(i=>{
|
|
|
|
+ return {
|
|
|
|
+ ...i,
|
|
|
|
+ isSuccess:true,
|
|
|
|
+ isAdd:i.Used,
|
|
|
|
+ dataList:i.Values.map(v=>v.YData)
|
|
|
|
+ }
|
|
|
|
+ })
|
|
|
|
+ this.factorTableDataSortCopy = _.cloneDeep(this.factorTableData)
|
|
|
|
+ this.SortedArray = generateSortedArray(LeadValue)
|
|
|
|
+ })
|
|
|
|
+ },
|
|
|
|
+ //多因子-保存/更新/另存为图表
|
|
|
|
+ async saveMultipleChart({ChartName,ClassifyId,type}){
|
|
|
|
+ const {IndTarget,Correlation} = this.infoForm
|
|
|
|
+ const {SourcesFrom,YDataList} = this.multipleChartData
|
|
|
|
+ const SeriesEdb = YDataList.map(i=>{
|
|
|
|
+ return {
|
|
|
|
+ SeriesId:i.SeriesId,
|
|
|
|
+ EdbInfoId:i.Id
|
|
|
|
+ }
|
|
|
|
+ })
|
|
|
|
+ //BaseEdbInfoId优先取当前图表内的EdbInfoId,若没有值取表单内的
|
|
|
|
+ const BaseEdbInfoId = this.multipleChartData.ChartInfo.EdbInfoId||IndTarget
|
|
|
|
+ const SeriesIds = this.$refs.multipleIndForm.factorList.map(i=>i.SeriesId)
|
|
|
|
+ const LegendConfig = YDataList.map(i=>{
|
|
|
|
+ return {
|
|
|
|
+ LegendName:i.Name,
|
|
|
|
+ SeriesId:i.SeriesId,
|
|
|
|
+ EdbInfoId:i.Id,
|
|
|
|
+ Color:i.Color
|
|
|
|
+ }
|
|
|
|
+ })
|
|
|
|
+ let params = {
|
|
|
|
+ ChartName,ClassifyId,
|
|
|
|
+ AnalysisMode:1,
|
|
|
|
+ BaseEdbInfoId:BaseEdbInfoId/* IndTarget */,
|
|
|
|
+ FactorCorrelation:{
|
|
|
|
+ ...Correlation,
|
|
|
|
+ SeriesEdb,
|
|
|
|
+ SeriesIds
|
|
|
|
+ },
|
|
|
|
+ ExtraConfig:{
|
|
|
|
+ LegendConfig,
|
|
|
|
+ },
|
|
|
|
+ SourcesFrom,
|
|
|
|
+ }
|
|
|
|
+ const {ChartInfoId} = this.multipleChartData.ChartInfo
|
|
|
|
+ const isEdit = ChartInfoId&&type!=='saveOther'
|
|
|
|
+ //另存为/新增->add 更新->edit
|
|
|
|
+ const res = isEdit
|
|
|
|
+ ?await chartRelevanceApi.editMultipleFactor({...params,ChartInfoId})
|
|
|
|
+ :await chartRelevanceApi.addMultipleFactor({...params,SaveAs:type==='saveOther'})
|
|
|
|
+ //计算中...
|
|
|
|
+ if(res.Ret!==200) return
|
|
|
|
+ if(!isEdit){
|
|
|
|
+ this.isMultipleChartAdd = true
|
|
|
|
+ this.multipleChartData.ChartInfo.ChartInfoId = res.Data.ChartInfoId
|
|
|
|
+ this.multipleChartData.ChartInfo.UniqueCode = res.Data.UniqueCode
|
|
|
|
+ this.multipleChartData.ChartInfo.ClassifyId = res.Data.ClassifyId
|
|
|
|
+ }
|
|
|
|
+ //更新图表名称
|
|
|
|
+ this.multipleChartData.ChartInfo.ChartName = ChartName
|
|
|
|
+ this.$message.success(`${isEdit?'更新':'保存'}成功`)
|
|
|
|
+ //设置缩略图
|
|
|
|
+ this.$refs[`chartCard`+2].setChartImage(2,res.Data.ChartInfoId)
|
|
|
|
+ this.isSaveChartToBase = false
|
|
|
|
+ },
|
|
|
|
+ },
|
|
|
|
+};
|
|
|
|
+</script>
|
|
|
|
+
|
|
|
|
+<style lang="scss">
|
|
|
|
+.relevance-chart-editor-wrap{
|
|
|
|
+ display: flex;
|
|
|
|
+ *{
|
|
|
|
+ box-sizing: border-box;
|
|
|
|
+ }
|
|
|
|
+ .content-wrap{
|
|
|
|
+ background: #fff;
|
|
|
|
+ border: 1px solid #ececec;
|
|
|
|
+ border-radius: 4px;
|
|
|
|
+ .source{
|
|
|
|
+ padding-left: 20px;
|
|
|
|
+ padding-bottom:20px;
|
|
|
|
+ margin-top: -20px;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ .info-wrap{
|
|
|
|
+ width:380px;
|
|
|
|
+ min-width: 380px;
|
|
|
|
+ margin-right: 20px;
|
|
|
|
+ display: flex;
|
|
|
|
+ flex-direction: column;
|
|
|
|
+ height: calc(100vh - 120px);
|
|
|
|
+ .info-top{
|
|
|
|
+ padding: 15px 20px;
|
|
|
|
+ border-bottom: 1px solid #ececec;
|
|
|
|
+ box-shadow: 0px 3px 6px rgba(167, 167, 167, 0.09);
|
|
|
|
+ display: flex;
|
|
|
|
+ align-items: center;
|
|
|
|
+ >span{
|
|
|
|
+ color:#0052D9;
|
|
|
|
+ cursor: pointer;
|
|
|
|
+ flex: 1;
|
|
|
|
+ text-align: right;
|
|
|
|
+ img{
|
|
|
|
+ vertical-align: middle;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ .info-form-wrap{
|
|
|
|
+ flex: 1;
|
|
|
|
+ overflow-y: auto;
|
|
|
|
+ padding:20px;
|
|
|
|
+ .el-form-item{
|
|
|
|
+ margin-bottom: 10px;
|
|
|
|
+ }
|
|
|
|
+ .form-box{
|
|
|
|
+ margin-top: 10px;
|
|
|
|
+ padding-top: 10px;
|
|
|
|
+ border-top:1px dashed #DCDFE6;
|
|
|
|
+ }
|
|
|
|
+ .model-form{
|
|
|
|
+ .select-target{
|
|
|
|
+ display: flex;
|
|
|
|
+ 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{
|
|
|
|
+ .el-form-item {
|
|
|
|
+ margin-bottom: 0;
|
|
|
|
+ }
|
|
|
|
+ .el-form-item__label{
|
|
|
|
+ width:auto !important;
|
|
|
|
+ }
|
|
|
|
+ .factor-list{
|
|
|
|
+ .list-item{
|
|
|
|
+ padding:10px 20px;
|
|
|
|
+ background-color: #EBEFF6;
|
|
|
|
+ border:1px solid #C8CDD9;
|
|
|
|
+ cursor: pointer;
|
|
|
|
+ display: flex;
|
|
|
|
+ justify-content: space-between;
|
|
|
|
+ align-items: center;
|
|
|
|
+ border-bottom: none;
|
|
|
|
+ &:last-child{
|
|
|
|
+ border-bottom: 1px solid #C8CDD9;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ .add-factor-btn{
|
|
|
|
+ margin-top: 20px;
|
|
|
|
+ display: flex;
|
|
|
|
+ gap:10px;
|
|
|
|
+ align-items: center;
|
|
|
|
+ cursor: pointer;
|
|
|
|
+ color:#0052D9;
|
|
|
|
+ img{
|
|
|
|
+ width: 15px;
|
|
|
|
+ height: 15px;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ .model-wrap{
|
|
|
|
+ flex:1;
|
|
|
|
+ height: calc(100vh - 120px);
|
|
|
|
+ overflow-x: hidden;
|
|
|
|
+ .single-model-wrap{
|
|
|
|
+ width: 100%;
|
|
|
|
+ overflow: hidden;
|
|
|
|
+ }
|
|
|
|
+ .chart-min-cont {
|
|
|
|
+ height: calc(100vh - 120px);
|
|
|
|
+ overflow-y: auto;
|
|
|
|
+ display: flex;
|
|
|
|
+ flex-wrap: wrap;
|
|
|
|
+ gap:15px;
|
|
|
|
+ .card-wrapper {
|
|
|
|
+ width: 48%;
|
|
|
|
+ min-height: 350px;
|
|
|
|
+ min-width:410px;
|
|
|
|
+ .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;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ .nodata {
|
|
|
|
+ height: calc(100vh - 120px);
|
|
|
|
+ background-color: #fff;
|
|
|
|
+ text-align: center;
|
|
|
|
+ font-size: 16px;
|
|
|
|
+ color: #666;
|
|
|
|
+ padding: 100px 0;
|
|
|
|
+ }
|
|
|
|
+ .multiple-model-wrap{
|
|
|
|
+ display: flex;
|
|
|
|
+ flex-direction: column;
|
|
|
|
+ justify-content: space-between;
|
|
|
|
+ height: calc(100vh - 120px);
|
|
|
|
+ .relevant-matrix-table-box,.relevant-chart-box{
|
|
|
|
+ height: 49%;
|
|
|
|
+ overflow: auto;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .relevant-matrix-table-box{
|
|
|
|
+ display: flex;
|
|
|
|
+ .el-table{
|
|
|
|
+ flex:1;
|
|
|
|
+ thead{
|
|
|
|
+ color:#333;
|
|
|
|
+ }
|
|
|
|
+ th.zip-cell{
|
|
|
|
+ padding:0;
|
|
|
|
+ font-size: 12px;
|
|
|
|
+ background: #F5F7FA !important;
|
|
|
|
+ .cell{
|
|
|
|
+ padding:0;
|
|
|
|
+ .caret-wrapper{
|
|
|
|
+ height:24px;
|
|
|
|
+ width:20px;
|
|
|
|
+ .sort-caret.ascending{
|
|
|
|
+ top:0;
|
|
|
|
+ }
|
|
|
|
+ .sort-caret.descending{
|
|
|
|
+ bottom:0;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ td.zip-cell{
|
|
|
|
+ padding:0;
|
|
|
|
+ font-size: 12px;
|
|
|
|
+ background-color: #fff !important;
|
|
|
|
+ .cell{
|
|
|
|
+ padding:0;
|
|
|
|
+ line-height: 23px;//调整单元格高度
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ .relevant-chart-box{
|
|
|
|
+ .card-item {
|
|
|
|
+ padding: 20px;
|
|
|
|
+ .top {
|
|
|
|
+ display: flex;
|
|
|
|
+ justify-content: space-between;
|
|
|
|
+ align-items: center;
|
|
|
|
+ .title {
|
|
|
|
+ font-size: 15px;
|
|
|
|
+ text-align: left;
|
|
|
|
+ margin: 10px 0;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ .disable-row{
|
|
|
|
+ pointer-events: none;
|
|
|
|
+ opacity: 0.5;
|
|
|
|
+ cursor: default;
|
|
|
|
+ }
|
|
|
|
+}
|
|
|
|
+</style>
|