|
@@ -111,9 +111,47 @@
|
|
|
:placeholder="$t('ToolBox.CommodityPriceChart.please_select_classify')"
|
|
|
/>
|
|
|
</el-form-item>
|
|
|
+ <el-form-item :label="$t('ToolBox.CommodityPriceChart.date_reference')" prop="basisEdb">
|
|
|
+ <el-select
|
|
|
+ :placeholder="$t('ToolBox.CommodityPriceChart.tips_msg09')"
|
|
|
+ v-model="chartInfo.basisEdb"
|
|
|
+ style="width: 90%"
|
|
|
+ @change="handleBasisEdbChange"
|
|
|
+ >
|
|
|
+ <el-option
|
|
|
+ v-for="item in tableData"
|
|
|
+ :key="item.EdbInfoId"
|
|
|
+ :label="item.EdbName"
|
|
|
+ :value="item.EdbInfoId"
|
|
|
+ />
|
|
|
+ </el-select>
|
|
|
+ <el-tooltip class="item" effect="dark" :content="$t('ToolBox.CommodityPriceChart.tips_msg08')" placement="top">
|
|
|
+ <i class="el-icon-info"></i>
|
|
|
+ </el-tooltip>
|
|
|
+ </el-form-item>
|
|
|
</el-form>
|
|
|
|
|
|
<div class="targetset-cont">
|
|
|
+ <!-- 选择的指标模块 -->
|
|
|
+ <div class="basis-edb-wrap" v-if="tableData.length>0">
|
|
|
+ <div class="label-btn" @click="isShowxAxisSet=true">{{$t('ToolBox.CommodityPriceChart.xAxis_set_name')}}</div>
|
|
|
+ <div
|
|
|
+ class="item-basis-edb"
|
|
|
+ v-for="item,index in tableData"
|
|
|
+ :key="item.EdbInfoId"
|
|
|
+ >
|
|
|
+ <span class="name">{{$i18n.locale == 'zh'?item.EdbName:item.EdbNameEn||item.EdbName}}</span>
|
|
|
+ <div class="opt-box">
|
|
|
+ <img
|
|
|
+ class="icon"
|
|
|
+ :src="item.isHide?require('@/assets/img/icons/eyes-hide-active.png') : require('@/assets/img/icons/eyes-show-active.png')"
|
|
|
+ alt=""
|
|
|
+ @click="handleChangeBasisEdbHide(item,index)"
|
|
|
+ >
|
|
|
+ <img class="icon" src="~@/assets/img/icons/delete-red.png" alt="" @click="handleBasisEdbDel(index,item)">
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
|
|
|
<!-- 价格曲线日期配置 -->
|
|
|
<bar-option
|
|
@@ -190,6 +228,12 @@
|
|
|
:data="profitInfo"
|
|
|
@ensure="setProfitBack"
|
|
|
/>
|
|
|
+ <!-- 横坐标设置 -->
|
|
|
+ <xAxisSet
|
|
|
+ :isShow.sync="isShowxAxisSet"
|
|
|
+ :opts="xAxisList"
|
|
|
+ @change="handleXAxisDataChange"
|
|
|
+ />
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
@@ -200,8 +244,9 @@ import { chartSetMixin } from '@/views/dataEntry_manage/mixins/chartPublic';
|
|
|
import Chart from '@/views/dataEntry_manage/components/chart';
|
|
|
import barOption from '@/views/dataEntry_manage/components/barOptionSection.vue';
|
|
|
import plateProfitDia from './components/plateProfitDia.vue';
|
|
|
+import xAxisSet from './components/xAxisSet.vue';
|
|
|
export default {
|
|
|
- components: { Chart,barOption,plateProfitDia },
|
|
|
+ components: { Chart,barOption,plateProfitDia,xAxisSet },
|
|
|
directives: {
|
|
|
drag(el, bindings) {
|
|
|
el.onmousedown = function (e) {
|
|
@@ -246,6 +291,9 @@ export default {
|
|
|
classify:[
|
|
|
{ required: true, message: this.$t('ToolBox.CommodityPriceChart.tips_msg03')||'图表分类不能为空', trigger: 'blur' },
|
|
|
],
|
|
|
+ basisEdb:[
|
|
|
+ { required: true, message: this.$t('ToolBox.CommodityPriceChart.tips_msg07')||'日期基准不能为空', trigger: 'blur' },
|
|
|
+ ]
|
|
|
}
|
|
|
}
|
|
|
},
|
|
@@ -262,6 +310,7 @@ export default {
|
|
|
futures_id: '',
|
|
|
classify: '',
|
|
|
Source: this.$route.query.scence==='profit' ? 5 : 2,
|
|
|
+ basisEdb:'',//选择的基准指标
|
|
|
},
|
|
|
|
|
|
classifyOptions: [],//分类option
|
|
@@ -278,11 +327,21 @@ export default {
|
|
|
profitInfo: {
|
|
|
list: [],
|
|
|
formula: ''
|
|
|
- }
|
|
|
+ },
|
|
|
|
|
|
+ // 横坐标设置
|
|
|
+ isShowxAxisSet:false,
|
|
|
+ xAxisList:[],
|
|
|
};
|
|
|
},
|
|
|
methods: {
|
|
|
+ // 刷新数据
|
|
|
+ handleRefreshChartData(){
|
|
|
+ // 价格曲线判断 this.chartInfo.futures_id
|
|
|
+ if(this.chartInfo.Source===2&&!this.chartInfo.futures_id) return
|
|
|
+ this.tableData.length && this.$refs.BarOptRef.getBarData();
|
|
|
+ console.log('刷新图表');
|
|
|
+ },
|
|
|
|
|
|
/* 获取图表详情 */
|
|
|
getChartInfo() {
|
|
@@ -291,22 +350,41 @@ export default {
|
|
|
})
|
|
|
.then((res) => {
|
|
|
if (res.Ret !== 200) return;
|
|
|
- const { ChartInfo,BarChartInfo,EdbInfoList,DataResp } = res.Data;
|
|
|
+ let { ChartInfo,BarChartInfo,EdbInfoList,DataResp,XDataList } = res.Data;
|
|
|
|
|
|
this.chartInfo = ChartInfo.Source===5 ? {
|
|
|
...ChartInfo,
|
|
|
classify: ChartInfo.ChartClassifyId,
|
|
|
ProfitNameEn: DataResp.ProfitNameEn,
|
|
|
ProfitName: DataResp.ProfitName,
|
|
|
+ basisEdb:DataResp.Extra.BaseEdbInfoId
|
|
|
} : {
|
|
|
...ChartInfo,
|
|
|
classify: ChartInfo.ChartClassifyId,
|
|
|
- futures_id: BarChartInfo.EdbInfoIdList.find(_ => _.Source===2).EdbInfoId
|
|
|
+ futures_id: BarChartInfo.EdbInfoIdList.find(_ => _.Source===2).EdbInfoId,
|
|
|
+ basisEdb:BarChartInfo.BaseEdbInfoId
|
|
|
};
|
|
|
+ if(ChartInfo.Source===5){
|
|
|
+ XDataList=DataResp.Extra.XDataList
|
|
|
+ }
|
|
|
+
|
|
|
+ // this.tableData = [EdbInfoList[0]];
|
|
|
+ this.tableData=EdbInfoList.filter(_e=>_e.Source).map((_e,index)=>{
|
|
|
+ return{
|
|
|
+ EdbInfoId:_e.EdbInfoId,
|
|
|
+ EdbName:_e.EdbName,
|
|
|
+ EdbNameEn:_e.EdbNameEn,
|
|
|
+ isHide:XDataList[index].IsHide?true:false
|
|
|
+ }
|
|
|
+ })
|
|
|
+ this.xAxisList=XDataList.map((_item,index)=>{
|
|
|
+ return {
|
|
|
+ ..._item,
|
|
|
+ // 判断是否为选择的指标
|
|
|
+ EdbInfoId:EdbInfoList[index]&&EdbInfoList[index].Source?EdbInfoList[index].EdbInfoId:0,
|
|
|
+ }
|
|
|
+ })
|
|
|
|
|
|
- this.search_txt = EdbInfoList[0].EdbInfoId;
|
|
|
- this.tableData = [EdbInfoList[0]];
|
|
|
- this.searchOptions = this.tableData;
|
|
|
|
|
|
this.initDateOptions = ChartInfo.Source===5 ? {
|
|
|
DateList: DataResp.Extra.DateList,
|
|
@@ -326,23 +404,118 @@ export default {
|
|
|
/* 选择指标 获取指标详情并push到表格中*/
|
|
|
selectTarget(edb) {
|
|
|
if(!edb){
|
|
|
- this.tableData = [];
|
|
|
+ // this.tableData = [];
|
|
|
return
|
|
|
}
|
|
|
+ // 不允许添加重复的指标
|
|
|
+ if(this.tableData.some(_=>_.EdbInfoId===edb.EdbInfoId)){
|
|
|
+ this.$message.warning(this.$t('OnlineExcelPage.already_exists_msg'))
|
|
|
+ return
|
|
|
+ }
|
|
|
|
|
|
- this.tableData = [edb];
|
|
|
- this.commodityChartData.length && this.chartInfo.futures_id && this.$refs.BarOptRef.getBarData();
|
|
|
+ this.tableData.push({...edb,isHide:false});
|
|
|
+ console.log(this.xAxisList);
|
|
|
+ // 向横坐标配置项中插入值
|
|
|
+ if(this.xAxisList.length){
|
|
|
+ const index=this.xAxisList.findIndex(i=>i.EdbInfoId===0)
|
|
|
+ console.log(index);
|
|
|
+ if(index!=-1){
|
|
|
+ this.xAxisList.splice(index,0,{
|
|
|
+ EdbInfoId:edb.EdbInfoId,
|
|
|
+ IsHide:0,
|
|
|
+ Name:edb.EdbName,
|
|
|
+ NameEn:edb.EdbNameEn
|
|
|
+ })
|
|
|
+ }else{
|
|
|
+ this.xAxisList.push({
|
|
|
+ EdbInfoId:edb.EdbInfoId,
|
|
|
+ IsHide:0,
|
|
|
+ Name:edb.EdbName,
|
|
|
+ NameEn:edb.EdbNameEn
|
|
|
+ })
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+ this.search_txt=''
|
|
|
+ this.search_page = 1;
|
|
|
+ this.searchOptions=[]
|
|
|
+ if(!this.chartInfo.basisEdb){
|
|
|
+ this.chartInfo.basisEdb=this.tableData[0].EdbInfoId
|
|
|
+ }
|
|
|
+ this.handleRefreshChartData()
|
|
|
+ },
|
|
|
+
|
|
|
+ // 选择的指标显示隐藏状态改变
|
|
|
+ handleChangeBasisEdbHide(item,index){
|
|
|
+ item.isHide=!item.isHide
|
|
|
+ this.xAxisList[index].IsHide=item.isHide?1:0
|
|
|
+ this.handleRefreshChartData()
|
|
|
+ },
|
|
|
+ // 删除选择的指标
|
|
|
+ async handleBasisEdbDel(index,item){
|
|
|
+ if(this.tableData.length===1){
|
|
|
+
|
|
|
+ await this.$confirm(this.$t('ToolBox.CommodityPriceChart.del_edb_empty_tips'),this.$t('Dialog.warn_tit'),{
|
|
|
+ type:'warning'
|
|
|
+ })
|
|
|
+ }
|
|
|
+
|
|
|
+ this.tableData.splice(index,1)
|
|
|
+ this.xAxisList.splice(index,1)
|
|
|
+ if(this.chartInfo.basisEdb===item.EdbInfoId){
|
|
|
+ this.chartInfo.basisEdb=''
|
|
|
+ this.xAxisList=[]
|
|
|
+ return
|
|
|
+ }
|
|
|
+ this.handleRefreshChartData()
|
|
|
+ },
|
|
|
+ // 横坐标设置修改回调
|
|
|
+ handleXAxisDataChange(arr){
|
|
|
+ console.log('横坐标修改回调',arr);
|
|
|
+ this.xAxisList=arr
|
|
|
+ // 修改tableData
|
|
|
+ const temArr=this.tableData.filter(_e=>arr.some(_i=>_i.EdbInfoId===_e.EdbInfoId))
|
|
|
+ console.log(temArr)
|
|
|
+
|
|
|
+ temArr.forEach(item=>{
|
|
|
+ arr.forEach(_item=>{
|
|
|
+ if(_item.EdbInfoId===item.EdbInfoId){
|
|
|
+ item.isHide=_item.IsHide?true:false
|
|
|
+ }
|
|
|
+ })
|
|
|
+ })
|
|
|
+
|
|
|
+ this.tableData=temArr
|
|
|
+ if(temArr.length===0){
|
|
|
+ this.chartInfo.basisEdb=''
|
|
|
+ this.xAxisList=[]
|
|
|
+ return
|
|
|
+ }
|
|
|
+ this.handleRefreshChartData()
|
|
|
+
|
|
|
},
|
|
|
|
|
|
/* 选择期货 */
|
|
|
changeFuturesHandle(val) {
|
|
|
if(!val) return
|
|
|
- this.commodityChartData.length && this.tableData.length && this.$refs.BarOptRef.getBarData();
|
|
|
+ this.xAxisList=[]
|
|
|
+ this.handleRefreshChartData()
|
|
|
+ },
|
|
|
+
|
|
|
+ // 日期基准变更
|
|
|
+ handleBasisEdbChange(val){
|
|
|
+ if(!val) return
|
|
|
+ this.xAxisList=[]
|
|
|
+ this.handleRefreshChartData()
|
|
|
},
|
|
|
|
|
|
/* 获取数据 */
|
|
|
async getPreviewData({sort,dateList}) {
|
|
|
- if(!dateList.length) this.commodityChartData = [];
|
|
|
+ if(!dateList.length) {
|
|
|
+ this.commodityChartData = []
|
|
|
+ this.xAxisList=[]
|
|
|
+ };
|
|
|
if(!this.tableData.length || !dateList.length) return
|
|
|
|
|
|
this.chartInfo.Source===2
|
|
@@ -353,6 +526,22 @@ export default {
|
|
|
|
|
|
/* 价格曲线预览 */
|
|
|
async getCommodityPreview(dateList) {
|
|
|
+ if(!this.chartInfo.basisEdb){
|
|
|
+ this.$message.warning(this.$t('ToolBox.CommodityPriceChart.tips_msg09')||'请选择日期基准');
|
|
|
+ return
|
|
|
+ }
|
|
|
+ if(!this.chartInfo.futures_id){
|
|
|
+ this.$message.warning(this.$t('ToolBox.CommodityPriceChart.please_select_future')||'请选择期货');
|
|
|
+ return
|
|
|
+ }
|
|
|
+
|
|
|
+ const xDataListArr=this.xAxisList.map(_item=>{
|
|
|
+ return {
|
|
|
+ Name:_item.Name,
|
|
|
+ NameEn:_item.NameEn,
|
|
|
+ IsHide:_item.IsHide
|
|
|
+ }
|
|
|
+ })
|
|
|
let params = {
|
|
|
EdbInfoIdList: [
|
|
|
...this.tableData.map(_ => ({EdbInfoId: _.EdbInfoId,Name:'',Source: 1})),
|
|
@@ -365,6 +554,8 @@ export default {
|
|
|
Name: '',
|
|
|
Color: _.Color
|
|
|
})),
|
|
|
+ BaseEdbInfoId:this.chartInfo.basisEdb,
|
|
|
+ XDataList:xDataListArr||[]
|
|
|
}
|
|
|
|
|
|
const res = await futuresInterface.getChartData(params);
|
|
@@ -374,6 +565,13 @@ export default {
|
|
|
this.commodityEdbList = EdbInfoList;
|
|
|
this.commodityChartData = YDataList;
|
|
|
this.commodityXData = XDataList;
|
|
|
+ this.xAxisList=XDataList.map((_item,index)=>{
|
|
|
+ return {
|
|
|
+ ..._item,
|
|
|
+ // 判断是否为选择的指标
|
|
|
+ EdbInfoId:EdbInfoList[index]&&EdbInfoList[index].Source?EdbInfoList[index].EdbInfoId:0,
|
|
|
+ }
|
|
|
+ })
|
|
|
|
|
|
//初始状态设置上下限极值
|
|
|
if(!this.chartInfo.LeftMin) {
|
|
@@ -389,12 +587,22 @@ export default {
|
|
|
/* 利润曲线预览 */
|
|
|
async getProfitPreview(dateList) {
|
|
|
if(!this.profitInfo.list.length) return this.$message.warning(this.$t('ToolBox.CommodityPriceChart.tips_msg04')||'请先设置盘面利润配置')
|
|
|
-
|
|
|
+ if(!this.chartInfo.basisEdb){
|
|
|
+ this.$message.warning(this.$t('ToolBox.CommodityPriceChart.tips_msg09')||'请选择日期基准');
|
|
|
+ return
|
|
|
+ }
|
|
|
+ const xDataListArr=this.xAxisList.map(_item=>{
|
|
|
+ return {
|
|
|
+ Name:_item.Name,
|
|
|
+ NameEn:_item.NameEn,
|
|
|
+ IsHide:_item.IsHide
|
|
|
+ }
|
|
|
+ })
|
|
|
const { list,formula } = this.profitInfo;
|
|
|
let params = {
|
|
|
FutureGoodEdbInfoIdList: list,
|
|
|
CalculateFormula: formula,
|
|
|
- BaseEdbInfoId: this.tableData[0].EdbInfoId,
|
|
|
+ BaseEdbInfoId: this.chartInfo.basisEdb,
|
|
|
DateList: dateList.map(_ => ({
|
|
|
Type: _.Type,
|
|
|
Date: _.Date,
|
|
@@ -402,7 +610,10 @@ export default {
|
|
|
Name: '',
|
|
|
Color: _.Color
|
|
|
})),
|
|
|
+ EdbInfoIdList:this.tableData.map(i=>i.EdbInfoId),
|
|
|
+ XDataList:xDataListArr||[]
|
|
|
}
|
|
|
+ console.log('刷新利润曲线');
|
|
|
|
|
|
const res = await futuresInterface.previewProfitData(params);
|
|
|
if(res.Ret !== 200) return
|
|
@@ -413,6 +624,13 @@ export default {
|
|
|
this.commodityEdbList = EdbInfoList;
|
|
|
this.commodityChartData = YDataList;
|
|
|
this.commodityXData = XDataList;
|
|
|
+ this.xAxisList=XDataList.map((_item,index)=>{
|
|
|
+ return {
|
|
|
+ ..._item,
|
|
|
+ // 判断是否为选择的指标
|
|
|
+ EdbInfoId:EdbInfoList[index]&&EdbInfoList[index].Source?EdbInfoList[index].EdbInfoId:0,
|
|
|
+ }
|
|
|
+ })
|
|
|
this.chartInfo = {
|
|
|
...this.chartInfo,
|
|
|
ProfitName,
|
|
@@ -499,19 +717,26 @@ export default {
|
|
|
ChartType:8,
|
|
|
DateType: 6,
|
|
|
}
|
|
|
-
|
|
|
+
|
|
|
this.chartInfo.Source === 2 ? this.handleSaveCommodity(public_param) : this.handleSaveProfit(public_param);
|
|
|
},
|
|
|
|
|
|
/* 商品价格曲线保存 */
|
|
|
async handleSaveCommodity(public_param) {
|
|
|
+ const xDataListArr=this.xAxisList.map(_item=>{
|
|
|
+ return {
|
|
|
+ Name:_item.Name,
|
|
|
+ NameEn:_item.NameEn,
|
|
|
+ IsHide:_item.IsHide
|
|
|
+ }
|
|
|
+ })
|
|
|
let params = {
|
|
|
...public_param,
|
|
|
LeftMin: String(this.chartLimit.min),
|
|
|
LeftMax: String(this.chartLimit.max),
|
|
|
BarChartInfo: {
|
|
|
EdbInfoIdList: [
|
|
|
- ...this.tableData.map(_ => ({EdbInfoId: _.EdbInfoId,Name:'',Source: 1})),
|
|
|
+ ...this.tableData.map(_ => ({EdbInfoId: _.EdbInfoId,Source: 1})),
|
|
|
{ EdbInfoId: this.chartInfo.futures_id,Name: '',Source: 2 }
|
|
|
],
|
|
|
DateList: this.$refs.BarOptRef.dateList.map(item => ({
|
|
@@ -520,8 +745,10 @@ export default {
|
|
|
Value: item.Value,
|
|
|
Name: '',
|
|
|
Color: item.Color
|
|
|
- }))
|
|
|
- }
|
|
|
+ })),
|
|
|
+ BaseEdbInfoId:this.chartInfo.basisEdb,
|
|
|
+ XDataList:xDataListArr||[]
|
|
|
+ },
|
|
|
}
|
|
|
|
|
|
const { Ret,Data } = this.chart_code
|
|
@@ -536,6 +763,13 @@ export default {
|
|
|
async handleSaveProfit(public_param) {
|
|
|
if(!this.profitInfo.list.length) return this.$message.warning(this.$t('ToolBox.CommodityPriceChart.tips_msg04')||'请先设置盘面利润配置');
|
|
|
const { list,formula } = this.profitInfo;
|
|
|
+ const xDataListArr=this.xAxisList.map(_item=>{
|
|
|
+ return {
|
|
|
+ Name:_item.Name,
|
|
|
+ NameEn:_item.NameEn,
|
|
|
+ IsHide:_item.IsHide
|
|
|
+ }
|
|
|
+ })
|
|
|
let params = {
|
|
|
...public_param,
|
|
|
LeftMin: String(this.chartLimit.min),
|
|
@@ -543,7 +777,7 @@ export default {
|
|
|
Extra: {
|
|
|
FutureGoodEdbInfoIdList: list,
|
|
|
CalculateFormula: formula,
|
|
|
- BaseEdbInfoId: this.tableData[0].EdbInfoId,
|
|
|
+ BaseEdbInfoId: this.chartInfo.basisEdb,
|
|
|
DateList: this.$refs.BarOptRef.dateList.map(_ => ({
|
|
|
Type: _.Type,
|
|
|
Date: _.Date,
|
|
@@ -551,6 +785,8 @@ export default {
|
|
|
Name: '',
|
|
|
Color: _.Color
|
|
|
})),
|
|
|
+ EdbInfoIdList:this.tableData.map(i=>i.EdbInfoId),
|
|
|
+ XDataList:xDataListArr||[]
|
|
|
}
|
|
|
}
|
|
|
|
|
@@ -601,7 +837,11 @@ export default {
|
|
|
/* 盘面利润数据 */
|
|
|
setProfitBack(obj) {
|
|
|
this.profitInfo = obj;
|
|
|
- this.tableData.length && this.$refs.BarOptRef.dateList.length && this.getPreviewData({sort:null,dateList:this.$refs.BarOptRef.dateList});
|
|
|
+ if(this.tableData.length && this.$refs.BarOptRef.dateList.length){
|
|
|
+ // 重置x轴
|
|
|
+ this.xAxisList=[]
|
|
|
+ this.getPreviewData({sort:null,dateList:this.$refs.BarOptRef.dateList});
|
|
|
+ }
|
|
|
},
|
|
|
},
|
|
|
mounted() {
|
|
@@ -754,6 +994,34 @@ export default {
|
|
|
display: flex;
|
|
|
margin-bottom: 20px;
|
|
|
}
|
|
|
+
|
|
|
+ .basis-edb-wrap{
|
|
|
+ .label-btn{
|
|
|
+ cursor: pointer;
|
|
|
+ color: #409eff;
|
|
|
+ margin-bottom: 10px;
|
|
|
+ }
|
|
|
+ .item-basis-edb{
|
|
|
+ background-color: #F0F2F5;
|
|
|
+ border: 1px solid #DCDFE6;
|
|
|
+ padding: 10px 5px;
|
|
|
+ margin-bottom: 5px;
|
|
|
+ display: flex;
|
|
|
+ .name{
|
|
|
+ flex: 1;
|
|
|
+ }
|
|
|
+ .opt-box{
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ gap: 0 5px;
|
|
|
+ .icon{
|
|
|
+ width: 16px;
|
|
|
+ height: 16px;
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
.move-btn {
|