|
@@ -32,7 +32,7 @@ const basicYAxis = {
|
|
|
lineWidth: 1,
|
|
|
lineColor: '#bfbfbf',
|
|
|
tickColor: '#bfbfbf',
|
|
|
- offset: 0,
|
|
|
+ // offset: 0,
|
|
|
visible: true,
|
|
|
gridLineWidth: 0,
|
|
|
tickPosition: 'inside',
|
|
@@ -293,11 +293,14 @@ onBeforeRouteUpdate((nval)=>{
|
|
|
let showLimit=ref(false)
|
|
|
let hasLeftAxis=ref(false)//是否有左轴
|
|
|
let hasRightAxis=ref(false)//是否有右轴
|
|
|
+let hasRightTwoAxis=ref(false)//是否有右2轴
|
|
|
let axisLimitData=reactive({//左右轴极值
|
|
|
leftMin:0,
|
|
|
leftMax:0,
|
|
|
rightMin:0,
|
|
|
- rightMax:0
|
|
|
+ rightMax:0,
|
|
|
+ rightTwoMin:0,
|
|
|
+ rightTwoMax:0,
|
|
|
})
|
|
|
const handleConfirmSetLimit=()=>{//确定修改极值(研究员会调用一次保存)
|
|
|
if(canSave.value){
|
|
@@ -319,18 +322,23 @@ const setSplineOpt=(data)=>{
|
|
|
|
|
|
let temYLeftArr=[]
|
|
|
let temYRightArr=[]
|
|
|
- let temYLeftIndex=data.findIndex((item) => item.IsAxis)
|
|
|
+ let temYRightTwoArr = []
|
|
|
+ let temYLeftIndex=data.findIndex((item) => item.IsAxis===1)
|
|
|
let temYRightIndex=data.findIndex((item) => !item.IsAxis)
|
|
|
+ let temYRightTwoIndex = data.findIndex((item) => item.IsAxis===2)
|
|
|
|
|
|
let minAndMaxTimeTemArr=[]//存放所有指标的最大最小时间
|
|
|
|
|
|
- data.forEach((item,index)=>{
|
|
|
+ //有右二轴时排个序 按照左 右 右2的顺序
|
|
|
+ let newData = data.some(_ =>_.IsAxis===2) ? changeEdbOrder(data) : data;
|
|
|
+
|
|
|
+ newData.forEach((item,index)=>{
|
|
|
|
|
|
//轴位置值相同的下标
|
|
|
- let sameSideIndex = data.findIndex(i => i.IsAxis === item.IsAxis);
|
|
|
+ let sameSideIndex = newData.findIndex(i => i.IsAxis === item.IsAxis);
|
|
|
|
|
|
let dynamic_title = item.EdbName;
|
|
|
- let dynamic_arr = data.filter(
|
|
|
+ let dynamic_arr = newData.filter(
|
|
|
(item) => dynamic_title === item.EdbName
|
|
|
);
|
|
|
//处理数据列name
|
|
@@ -372,6 +380,7 @@ const setSplineOpt=(data)=>{
|
|
|
return sameSideIndex !== index ? '' : ctx.value;
|
|
|
},
|
|
|
align: 'center',
|
|
|
+ x: [0,2].includes(item.IsAxis) ? 5 : -5,
|
|
|
y:5,
|
|
|
},
|
|
|
tickWidth: sameSideIndex !== index ? 0 : 1,
|
|
@@ -380,12 +389,13 @@ const setSplineOpt=(data)=>{
|
|
|
align: 'high',
|
|
|
rotation: 0,
|
|
|
y: -15,
|
|
|
- offset: -(10 * item.Unit.length),
|
|
|
+ offset: 0,
|
|
|
},
|
|
|
- opposite: item.IsAxis === 0,
|
|
|
+ opposite: [0,2].includes(item.IsAxis),
|
|
|
reversed: item.IsOrder,
|
|
|
min: item.MinData,
|
|
|
max: item.MaxData,
|
|
|
+ visible: sameSideIndex === index,
|
|
|
chartEdbInfo:item//指标数据用于在保存时读取指标数据
|
|
|
}
|
|
|
yAxis.push(yItem)
|
|
@@ -431,7 +441,7 @@ const setSplineOpt=(data)=>{
|
|
|
|
|
|
|
|
|
yAxis.forEach(item=>{
|
|
|
- if(item.IsAxis){//左轴
|
|
|
+ if(item.IsAxis===1){//左轴
|
|
|
hasLeftAxis.value=true
|
|
|
|
|
|
// item.min=getAxisMaxOrMin(temYLeftArr,'min')
|
|
@@ -442,6 +452,12 @@ const setSplineOpt=(data)=>{
|
|
|
item.max=data[temYLeftIndex].MaxData
|
|
|
axisLimitData.leftMin=data[temYLeftIndex].MinData
|
|
|
axisLimitData.leftMax=data[temYLeftIndex].MaxData
|
|
|
+ }else if (item.IsAxis===2){ // 右2轴
|
|
|
+ hasRightTwoAxis.value=true
|
|
|
+ item.min=data[temYRightTwoIndex].MinData
|
|
|
+ item.max=data[temYRightTwoIndex].MaxData
|
|
|
+ axisLimitData.rightTwoMin=data[temYRightTwoIndex].MinData
|
|
|
+ axisLimitData.rightTwoMax=data[temYRightTwoIndex].MaxData
|
|
|
}else{
|
|
|
hasRightAxis.value=true
|
|
|
|
|
@@ -478,15 +494,18 @@ const setStackOrCombinChart = data => {
|
|
|
|
|
|
let temYLeftArr=[]
|
|
|
let temYRightArr=[]
|
|
|
- let temYLeftIndex,temYRightIndex;
|
|
|
+ let temYRightTwoArr = []
|
|
|
+ let temYLeftIndex,temYRightIndex,temYRightTwoIndex;
|
|
|
|
|
|
let minAndMaxTimeTemArr=[]//存放所有指标的最大最小时间
|
|
|
|
|
|
+ //有右二轴时排个序 按照左 右 右2的顺序
|
|
|
+ let newData = data.some(_ =>_.IsAxis===2) ? changeEdbOrder(data) : data;
|
|
|
|
|
|
- data.forEach((item,index)=>{
|
|
|
+ newData.forEach((item,index)=>{
|
|
|
|
|
|
//轴位置值相同的下标
|
|
|
- let sameSideIndex = data.findIndex(i => i.IsAxis === item.IsAxis);
|
|
|
+ let sameSideIndex = newData.findIndex(i => i.IsAxis === item.IsAxis);
|
|
|
|
|
|
//堆叠图的yAxis必须一致 数据列所对应的y轴
|
|
|
let serie_yIndex = index;
|
|
@@ -495,21 +514,24 @@ const setStackOrCombinChart = data => {
|
|
|
serie_yIndex = 0;
|
|
|
} else if(resData.value.ChartInfo.ChartType ===6 && ['areaspline','column'].includes(item.ChartStyle)) {
|
|
|
// 组合图找第一个堆叠柱状或面积的作为公用
|
|
|
- serie_yIndex = data.findIndex(i => i.ChartStyle === item.ChartStyle);
|
|
|
+ serie_yIndex = newData.findIndex(i => i.ChartStyle === item.ChartStyle);
|
|
|
}
|
|
|
//数据对应的y轴是公用轴则配置也共享
|
|
|
- item.IsAxis = serie_yIndex === index ? item.IsAxis : data[serie_yIndex].IsAxis;
|
|
|
- item.IsOrder = serie_yIndex === index ? item.IsOrder : data[serie_yIndex].IsOrder;
|
|
|
+ item.IsAxis = serie_yIndex === index ? item.IsAxis : newData[serie_yIndex].IsAxis;
|
|
|
+ item.IsOrder = serie_yIndex === index ? item.IsOrder : newData[serie_yIndex].IsOrder;
|
|
|
|
|
|
temYLeftIndex = [3,4].includes(resData.value.ChartInfo.ChartType)
|
|
|
- ? (data[serie_yIndex].IsAxis ? serie_yIndex : -1)
|
|
|
- : data.findIndex((item) => item.IsAxis);
|
|
|
+ ? (newData[serie_yIndex].IsAxis ? serie_yIndex : -1)
|
|
|
+ : data.findIndex((item) => item.IsAxis===1);
|
|
|
temYRightIndex = [3,4].includes(resData.value.ChartInfo.ChartType)
|
|
|
- ? (data[serie_yIndex].IsAxis ? -1 : serie_yIndex)
|
|
|
+ ? (newData[serie_yIndex].IsAxis ? -1 : serie_yIndex)
|
|
|
: data.findIndex((item) => !item.IsAxis);
|
|
|
+ temYRightTwoIndex = [3,4].includes(resData.value.ChartInfo.ChartType)
|
|
|
+ ? -1
|
|
|
+ : data.findIndex((item) => item.IsAxis===2);
|
|
|
|
|
|
let dynamic_title = item.EdbName;
|
|
|
- let dynamic_arr = data.filter(
|
|
|
+ let dynamic_arr = newData.filter(
|
|
|
(item) => dynamic_title === item.EdbName
|
|
|
);
|
|
|
//处理数据列name
|
|
@@ -552,6 +574,7 @@ const setStackOrCombinChart = data => {
|
|
|
return sameSideIndex !== index ? '' : ctx.value;
|
|
|
},
|
|
|
align: 'center',
|
|
|
+ x: [0,2].includes(item.IsAxis) ? 5 : -5,
|
|
|
y:5,
|
|
|
},
|
|
|
title: {
|
|
@@ -559,9 +582,9 @@ const setStackOrCombinChart = data => {
|
|
|
align: 'high',
|
|
|
rotation: 0,
|
|
|
y: -15,
|
|
|
- offset: -(10 * item.Unit.length),
|
|
|
+ offset: 0,
|
|
|
},
|
|
|
- opposite: item.IsAxis === 0,
|
|
|
+ opposite: [0,2].includes(item.IsAxis),
|
|
|
reversed: item.IsOrder,
|
|
|
min: item.MinData,
|
|
|
max: item.MaxData,
|
|
@@ -609,12 +632,18 @@ const setStackOrCombinChart = data => {
|
|
|
|
|
|
|
|
|
yAxis.forEach(item=>{
|
|
|
- if(item.IsAxis){//左轴
|
|
|
+ if(item.IsAxis === 1){//左轴
|
|
|
hasLeftAxis.value=true
|
|
|
item.min=data[temYLeftIndex].MinData
|
|
|
item.max=data[temYLeftIndex].MaxData
|
|
|
axisLimitData.leftMin=data[temYLeftIndex].MinData
|
|
|
axisLimitData.leftMax=data[temYLeftIndex].MaxData
|
|
|
+ }else if (item.IsAxis===2){ // 右2轴
|
|
|
+ hasRightTwoAxis.value=true
|
|
|
+ item.min=data[temYRightTwoIndex].MinData
|
|
|
+ item.max=data[temYRightTwoIndex].MaxData
|
|
|
+ axisLimitData.rightTwoMin=data[temYRightTwoIndex].MinData
|
|
|
+ axisLimitData.rightTwoMax=data[temYRightTwoIndex].MaxData
|
|
|
}else{
|
|
|
hasRightAxis.value=true
|
|
|
item.min=data[temYRightIndex].MinData
|
|
@@ -629,22 +658,29 @@ const setStackOrCombinChart = data => {
|
|
|
|
|
|
/* 拼接数据列动态name */
|
|
|
const setDyncmicSerieName = (item,dynamic_arr) => {
|
|
|
- // 拼接配置 IsAxis左轴1 右轴0 IsOrder正序false 逆序true EdbInfoType是否是领先指标
|
|
|
- let dynamic_tag =item.IsAxis && item.IsOrder && item.EdbInfoType
|
|
|
- ? '(逆序)'
|
|
|
- : !item.IsAxis && item.IsOrder && item.EdbInfoType
|
|
|
- ? '(右轴,逆序)'
|
|
|
- : !item.IsAxis && !item.IsOrder && item.EdbInfoType
|
|
|
- ? '(右轴)'
|
|
|
- : !item.IsAxis && !item.IsOrder && !item.EdbInfoType
|
|
|
- ? `(右轴,领先${item.LeadValue}${item.LeadUnit})`
|
|
|
- : !item.IsAxis && item.IsOrder && !item.EdbInfoType
|
|
|
- ? `(右轴,逆序,领先${item.LeadValue}${item.LeadUnit})`
|
|
|
- : item.IsAxis && item.IsOrder && !item.EdbInfoType
|
|
|
- ? `(逆序,领先${item.LeadValue}${item.LeadUnit})`
|
|
|
- : item.IsAxis && !item.IsOrder && !item.EdbInfoType
|
|
|
- ? `(领先${item.LeadValue}${item.LeadUnit})`
|
|
|
- : '';
|
|
|
+ const { IsAxis,IsOrder,EdbInfoType,LeadValue,LeadUnit } = item;
|
|
|
+ // IsAxis左轴1 右轴0 2右2轴
|
|
|
+ //IsOrder正序false 逆序true
|
|
|
+ //EdbInfoType是否是领先指标
|
|
|
+ const axisLabelMap = {
|
|
|
+ 0: '右轴',
|
|
|
+ 2: '右2轴'
|
|
|
+ }
|
|
|
+ const orderLabelMap = {
|
|
|
+ 1: '逆序'
|
|
|
+ }
|
|
|
+ const edbInfoMap = {
|
|
|
+ 0: '领先'
|
|
|
+ }
|
|
|
+
|
|
|
+ let axis_tag = axisLabelMap[IsAxis] || '';
|
|
|
+ //逆序拼接
|
|
|
+ let order_tag = orderLabelMap[Number(IsOrder)] ? `${axis_tag ? ',': ''}${orderLabelMap[Number(IsOrder)]}` : ''
|
|
|
+ //领先拼接
|
|
|
+ let edb_tag = edbInfoMap[EdbInfoType] ? `${(axis_tag||order_tag) ? ',' : '' }${edbInfoMap[EdbInfoType]}${LeadValue}${LeadUnit}` : '';
|
|
|
+
|
|
|
+ let dynamic_tag = (axis_tag || order_tag || edb_tag) ? `(${axis_tag}${order_tag}${edb_tag})` : '';
|
|
|
+
|
|
|
let temName = dynamic_arr.length > 1
|
|
|
? `${item.EdbName}(${item.SourceName})${dynamic_tag}`
|
|
|
: `${item.EdbName}${dynamic_tag}`
|
|
@@ -660,6 +696,18 @@ const setDyncmicSerieName = (item,dynamic_arr) => {
|
|
|
return temName
|
|
|
}
|
|
|
|
|
|
+/* 指标顺序调整 IsAxis: 0右轴 1左轴 2右2*/
|
|
|
+const changeEdbOrder = (data) => {
|
|
|
+ // 左轴指标
|
|
|
+ let left_edbs = data.filter(_ => _.IsAxis===1);
|
|
|
+ //右轴指标
|
|
|
+ let right_edbs = data.filter(_ => !_.IsAxis);
|
|
|
+ // 右2轴指标
|
|
|
+ let right_two_edbs = data.filter(_ => _.IsAxis === 2);
|
|
|
+ // 按 左 右 右2顺序排列
|
|
|
+ return [left_edbs,right_edbs,right_two_edbs].flat(Infinity);
|
|
|
+}
|
|
|
+
|
|
|
//设置季节图配置
|
|
|
const setSeasonOpt=(data)=>{
|
|
|
hasLeftAxis.value=true
|
|
@@ -1025,9 +1073,12 @@ watch(
|
|
|
if(!showLimit.value) return
|
|
|
console.log('极值改变');
|
|
|
chartData.value.yAxis.forEach(item=>{
|
|
|
- if(item.IsAxis){//左轴
|
|
|
+ if(item.IsAxis===1){//左轴
|
|
|
item.min=nval.leftMin
|
|
|
item.max=nval.leftMax
|
|
|
+ }else if(item.IsAxis===2){ //右2
|
|
|
+ item.min=nval.rightTwoMin
|
|
|
+ item.max=nval.rightTwoMax
|
|
|
}else{
|
|
|
item.min=nval.rightMin
|
|
|
item.max=nval.rightMax
|
|
@@ -1399,12 +1450,19 @@ const posterParams=computed(()=>{
|
|
|
<span style="margin:0 10px">至</span>
|
|
|
<input type="number" v-model="axisLimitData.leftMin">
|
|
|
</p>
|
|
|
- <p v-if="hasRightAxis">
|
|
|
+ <p v-if="hasRightAxis" style="margin-bottom:25px">
|
|
|
<span style="margin-right:35px">右轴</span>
|
|
|
<input type="number" v-model="axisLimitData.rightMax">
|
|
|
<span style="margin:0 10px">至</span>
|
|
|
<input type="number" v-model="axisLimitData.rightMin">
|
|
|
</p>
|
|
|
+ <!-- 右2上下限 -->
|
|
|
+ <p v-if="hasRightTwoAxis" style="margin-bottom:25px">
|
|
|
+ <span style="margin-right:35px">右2轴</span>
|
|
|
+ <input type="number" v-model="axisLimitData.rightTwoMax">
|
|
|
+ <span style="margin:0 10px">至</span>
|
|
|
+ <input type="number" v-model="axisLimitData.rightTwoMin">
|
|
|
+ </p>
|
|
|
</div>
|
|
|
</div>
|
|
|
</Popup>
|