|
@@ -29,6 +29,29 @@
|
|
|
/>
|
|
|
</el-select>
|
|
|
</el-form-item>
|
|
|
+ <el-form-item label="百分位" prop="PercentType">
|
|
|
+ <el-select
|
|
|
+ v-model="form.PercentType"
|
|
|
+ style="width: 240px"
|
|
|
+ placeholder="请选择"
|
|
|
+ @change="changeParams"
|
|
|
+ >
|
|
|
+ <el-option
|
|
|
+ v-for="item in percentOptions"
|
|
|
+ :key="item.val"
|
|
|
+ :label="item.label"
|
|
|
+ :value="item.val"
|
|
|
+ />
|
|
|
+ </el-select>
|
|
|
+ <el-tooltip effect="dark" placement="right">
|
|
|
+ <div
|
|
|
+ slot="content"
|
|
|
+ v-html="tips.percent"
|
|
|
+ style="line-height: 20px;width:300px"
|
|
|
+ ></div>
|
|
|
+ <i class="el-icon-question" style="color: #666" />
|
|
|
+ </el-tooltip>
|
|
|
+ </el-form-item>
|
|
|
<el-form-item label="X轴坐标" prop="TagX">
|
|
|
<el-select
|
|
|
v-model="form.TagX"
|
|
@@ -41,6 +64,7 @@
|
|
|
:key="item.ChartTagId"
|
|
|
:label="item.ChartTagName"
|
|
|
:value="item.ChartTagId"
|
|
|
+ :disabled="item.ChartTagId===form.TagY"
|
|
|
/>
|
|
|
</el-select>
|
|
|
</el-form-item>
|
|
@@ -56,6 +80,7 @@
|
|
|
:key="item.ChartTagId"
|
|
|
:label="item.ChartTagName"
|
|
|
:value="item.ChartTagId"
|
|
|
+ :disabled="item.ChartTagId===form.TagX"
|
|
|
/>
|
|
|
</el-select>
|
|
|
</el-form-item>
|
|
@@ -75,7 +100,7 @@
|
|
|
<li class="date-li" v-for="(item,index) in form.DateConfigList" :key="index">
|
|
|
<el-select
|
|
|
v-model="item.DateType"
|
|
|
- style="width: 150px"
|
|
|
+ style="width: 140px"
|
|
|
placeholder="请选择"
|
|
|
@change="changeParams"
|
|
|
>
|
|
@@ -96,6 +121,21 @@
|
|
|
@change="(val) => {item.Num = Number(val);changeParams()}"
|
|
|
/>
|
|
|
|
|
|
+ <el-date-picker
|
|
|
+ v-model="item.FixDate"
|
|
|
+ v-else-if="item.DateType===3"
|
|
|
+ value-format="yyyy-MM-dd"
|
|
|
+ type="date"
|
|
|
+ placeholder="选择日期"
|
|
|
+ style="width: 150px"
|
|
|
+ @change="changeParams"
|
|
|
+ />
|
|
|
+
|
|
|
+ <span>
|
|
|
+ <i class="el-icon-view" v-if="item.ShowTips===1" @click="()=>{item.ShowTips=item.ShowTips===1?0:1;changeParams()}"/>
|
|
|
+ <img :src="$icons.no_view" v-else style="width:24px;height:24px" @click="()=>{item.ShowTips=item.ShowTips===1?0:1;changeParams()}">
|
|
|
+ </span>
|
|
|
+
|
|
|
<el-button type="text" v-if="index===0" @click="addDateHandle">
|
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 -2 16 16" fill="none">
|
|
|
<path d="M5.23966 8.48046H7.51966V10.7605C7.51966 10.8265 7.57366 10.8805 7.63966 10.8805H8.35966C8.42566 10.8805 8.47966 10.8265 8.47966 10.7605V8.48046H10.7597C10.8257 8.48046 10.8797 8.42646 10.8797 8.36046V7.64046C10.8797 7.57446 10.8257 7.52046 10.7597 7.52046H8.47966V5.24046C8.47966 5.17446 8.42566 5.12046 8.35966 5.12046H7.63966C7.57366 5.12046 7.51966 5.17446 7.51966 5.24046V7.52046H5.23966C5.17366 7.52046 5.11966 7.57446 5.11966 7.64046V8.36046C5.11966 8.42646 5.17366 8.48046 5.23966 8.48046Z" fill="#0052D9"/>
|
|
@@ -130,12 +170,13 @@ export default {
|
|
|
form: {
|
|
|
ChartName:'',
|
|
|
Source: 10,
|
|
|
+ PercentType: 1,
|
|
|
CalculateValue: 6,
|
|
|
CalculateUnit: '月',
|
|
|
TagX: '',
|
|
|
TagY: '',
|
|
|
DateConfigList: [
|
|
|
- { DateType: 1,Num: 0 },
|
|
|
+ { DateType: 1,Num: 0,FixDate:'',ShowTips: 1 },
|
|
|
],
|
|
|
},
|
|
|
unitOpt: [
|
|
@@ -149,7 +190,17 @@ export default {
|
|
|
dateOptions: [
|
|
|
{ label: '最新日期',val: 1 },
|
|
|
{ label: 'N天前',val: 2 },
|
|
|
- ]
|
|
|
+ { label: '固定日期',val: 3 },
|
|
|
+ ],
|
|
|
+
|
|
|
+ percentOptions: [
|
|
|
+ { label: '数据个数',val: 1 },
|
|
|
+ { label: '数据区间',val: 0 },
|
|
|
+ ],
|
|
|
+ tips: {
|
|
|
+ 'percent':`1、数据个数百分位算法:数据区间第一个(较远日期)和最后一个数据点(较近日期)分别为 (T1,S1),(T2,S2)。T代表时间。S代表对应的值,N=T1到T2时间段指标数据个数。n=小于等于S2的数据个数。个数百分位=(n-1)/(N-1) ,N=1时不计算。<br>
|
|
|
+ 2、数据区间百分位算法:对所选时间范围内的数据,取最大值Max,最小值Min,计算Max-Min,百分位=(现值-Min)/(Max-Min),Max=Min时不计算`
|
|
|
+ }
|
|
|
};
|
|
|
},
|
|
|
methods: {
|
|
@@ -157,21 +208,25 @@ export default {
|
|
|
if(this.form.DateConfigList.length === 5) return this.$message.warning('日期数量已达上限')
|
|
|
|
|
|
this.form.DateConfigList.push({
|
|
|
- DateType: 1,Num: 1
|
|
|
+ DateType: 1,Num: 1,FixDate:'',ShowTips: 1
|
|
|
})
|
|
|
|
|
|
this.changeParams()
|
|
|
},
|
|
|
|
|
|
initData(data) {
|
|
|
- const { ChartName,CalculateValue,CalculateUnit,TagX,TagY,DateConfigList } = data;
|
|
|
+ const { ChartName,CalculateValue,CalculateUnit,TagX,TagY,DateConfigList,PercentType } = data;
|
|
|
this.form = {
|
|
|
ChartName,
|
|
|
CalculateValue,
|
|
|
CalculateUnit,
|
|
|
TagX,
|
|
|
TagY,
|
|
|
- DateConfigList
|
|
|
+ DateConfigList: DateConfigList.map(_ =>({
|
|
|
+ ..._,
|
|
|
+ ShowTips: _.ShowTips || 0
|
|
|
+ })),
|
|
|
+ PercentType: PercentType||0
|
|
|
}
|
|
|
},
|
|
|
|
|
@@ -202,6 +257,14 @@ export default {
|
|
|
align-items: center;
|
|
|
gap: 10px;
|
|
|
margin-bottom: 20px;
|
|
|
+ .el-icon-view {
|
|
|
+ width: 24px;
|
|
|
+ height: 24px;
|
|
|
+ line-height: 24px;
|
|
|
+ text-align: center;
|
|
|
+ font-size: 20px;
|
|
|
+ color: #409EFF;
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
}
|