跨品种分析图表放出上下限

src/components/chart/chartDetailHandlesWrap.vue

@@ -23,7 +23,7 @@
         ><i class="el-icon-refresh" style="margin-left: 0" />&nbsp;刷新
       </span>
     </li>
-    <li class="span-item" v-if="['/commordityChartBase'].includes($route.path)">
+    <li class="span-item" v-if="['/commordityChartBase','/crossVarietyChartList'].includes($route.path)">
       <span @click="saveChartHandle">
         <i class="el-icon-collection" />&nbsp;保存
       </span>

src/views/chartRelevance_manage/components/explainText.js

@@ -29,7 +29,9 @@ export const statisticFeatureListTextArr = [
     `<p style='font-weight:bold;'>标准差处理逻辑：</p>
     <p>计算所选时间范围内数据的样本标准差s，s=sqrt(((x1-x)^2 (x2-x)^2 ......(xn-x)^2)/(n-1))，n表示数据个数</p>`,
     `<p style='font-weight:bold;'>百分位处理逻辑：</p>
-    <p>对所选时间范围内的数据，取最大值Max，最小值Min，计算Max-Min，百分位=(现值-Min)/(Max-Min)，Max=Min时不计算</p>`,
+    <p>1、数据个数百分位算法：数据区间第一个(较远日期)和最后一个数据点(较近日期)分别为 (T1,S1)，(T2,S2)。T代表时间。S代表对应的值;N=T1到T2时间段指标数据个数。n=小于等于S2的数据个数。个数百分位=（n-1）/（N-1) ，N=1时不计算。</p>
+    <p>2、数据区间百分位算法：对所选时间范围内的数据，取最大值Max，最小值Min，计算Max-Min，百分位=(现值-Min)/(Max-Min)，Max=Min时不计算
+    </p>`,
     `<p style='font-weight:bold;'>频率分布处理逻辑：</p>
     <p>1、在所选时间范围内，取最大值和最小值；</p>
     <p>2、根据频段数划分多个间距相同的区间（左闭右开，最后一个区间为左闭右闭），统计数据值落在每个区间的数据个数；</p>
@@ -40,7 +42,9 @@ export const statisticFeatureListTextArr = [
 //跨品种分析
 export const crossVarietyAnalisisTextArr = [
     `<p style="font-weight:bold;">一、处理逻辑</p>
-    <p>1、百分位计算公式：对所选时间范围内的数据，取最大值Max，最小值Min，计算Max-Min，百分位=(现值-Min)/(Max-Min)，Max=Min时不计算</p>
+    <p>1、百分位计算公式：</p>
+    <p>（1）数据个数百分位算法：数据区间第一个(较远日期)和最后一个数据点(较近日期)分别为 (T1,S1)，(T2,S2)。T代 表时间。S代表对应的值。 N=T1到T2时间段指标数据个数。n=小于等于S2的数据个数。个数百分位=（n-1）/（N-1) ，N=1时不计算。</p>
+    <p>（2）数据区间百分位算法：对所选时间范围内的数据，取最大值Max，最小值Min，计算Max-Min，百分位=(现值-Min)/(Max-Min)，Max=Min时不计算</p>
     <p>2、取值方式：</p>
     <p>（1）通过“选择日期”和“时间长度”，时间范围为“选择日期”至选择的日期往过去推“时间长度”，在这个时间段找出指标最大值和最小值，进行百分位计算。</p>
     <p>（2）若在（1）的时间范围下找不到值，则继续往过去找，直到找到值。</p>

src/views/chartRelevance_manage/crossVarietyAnalysis/components/chartFormSection.vue

@@ -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"
@@ -75,7 +98,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 +119,20 @@
             @change="(val) => {item.Num = Number(val);changeParams()}"
           />
 
+          <el-date-picker
+            v-model="item.Date"
+            v-else-if="item.DateType===3"
+            value-format="yyyy-MM-dd"
+            type="date"
+            placeholder="选择日期"
+            style="width: 150px"
+          />
+
+          <span>
+            <i class="el-icon-view" v-if="item.IsShowTag" @click="item.IsShowTag=!item.IsShowTag"/>
+            <img :src="$icons.no_view" v-else style="width:24px;height:24px" @click="item.IsShowTag=!item.IsShowTag">
+          </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 +167,13 @@ export default {
       form: {
         ChartName:'',
         Source: 10,
+        PercentType: 1,
         CalculateValue: 6,
         CalculateUnit: '月',
         TagX: '',
         TagY: '',
         DateConfigList: [
-          { DateType: 1,Num: 0 },
+          { DateType: 1,Num: 0,Date:'',IsShowTag: true },
         ],
       },
       unitOpt: [
@@ -149,7 +187,18 @@ export default {
       dateOptions: [
         { label: '最新日期',val: 1 },
         { label: 'N天前',val: 2 },
-      ]
+        { label: '固定日期',val: 3 },
+      ],
+
+      percentOptions: [
+        { label: '数据个数',val: 1 },
+        { label: '数据区间',val: 2 },
+      ],
+      tips: {
+        'percent':`1、数据个数百分位算法：数据区间第一个(较远日期)和最后一个数据点(较近日期)分别为 (T1,S1)，(T2,S2)。T代表时间。S代表对应的值<br>
+        N=T1到T2时间段指标数据个数。n=小于等于S2的数据个数。个数百分位=（n-1）/（N-1) ，N=1时不计算。<br>
+        2、数据区间百分位算法：对所选时间范围内的数据，取最大值Max，最小值Min，计算Max-Min，百分位=(现值-Min)/(Max-Min)，Max=Min时不计算`
+      }
     };
   },
   methods: {
@@ -157,7 +206,7 @@ export default {
       if(this.form.DateConfigList.length === 5) return this.$message.warning('日期数量已达上限')
 
       this.form.DateConfigList.push({
-        DateType: 1,Num: 1
+        DateType: 1,Num: 1,Date:'',IsShowTag: true
       })
       
       this.changeParams()
@@ -202,6 +251,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;
+      }
     }
   }
 }

src/views/chartRelevance_manage/crossVarietyAnalysis/list.vue

@@ -143,8 +143,57 @@
 											height="500px"
 											ref="chartRef"
 										/>
+										<!-- 上下限 -->
+										<template>	
+											<div class="range-cont left">
+												<el-input
+													style="width: 60px; display: block"
+													size="mini"
+													type="number"
+													:min="0"
+													:max="100"
+													placeholder="上限"
+													v-model="chartLimit.max"
+													@change="changeLimit"
+												/>
+												<el-input
+													class="min-data-input"
+													size="mini"
+													type="number"
+													:min="0"
+													:max="100"
+													placeholder="下限"
+													v-model="chartLimit.min"
+													@change="changeLimit"
+												/>
+											</div>
+											<!-- x轴上下限 -->
+											<div class="range-cont bottom" > 
+												<el-input
+													class="left"
+													size="mini"
+													type="number"
+													:min="0"
+													:max="100"
+													placeholder="下限"
+													v-model="chartLimit.x_min"
+													@change="changeLimit"
+												/>
+												<el-input
+													class="left"
+													size="mini"
+													type="number"
+													:min="0"
+													:max="100"
+													placeholder="上限"
+													v-model="chartLimit.x_max"
+													@change="changeLimit"
+												/>
+											</div>
+										</template>
                   </div>
                   <span class="chart-author">作者:{{ chartInfo.SysUserRealName}}</span>
+
                 </div>
 
                 <!-- 异常显示 -->
@@ -158,6 +207,7 @@
 									@copyChartConfirm="copyChartConfirm"
 									@addMychartHandle="addMychartHandle"
 									@refreshHandle="refreshHandle"
+									@saveChartHandle="saveChartHandle"
 									@saveChartOtherHandle="saveChartOtherHandle"
 									@editChartHandle="editChartHandle"
 									@openEnNameDia="openEnNameDia"
@@ -415,6 +465,11 @@ export default {
       }
 		},
 
+		/* 保存上下限 */
+		async saveChartHandle() {
+			let res = await crossVarietyInterface.saveChart();
+		},
+
 		/* 获取图表列表 */
 		getPublicList() {
 			crossVarietyInterface.getChartList({

src/views/chartRelevance_manage/css/index.scss

@@ -136,7 +136,7 @@ $normal-font: 14px;
           margin-bottom: 20px;
 
           .chart-show-cont {
-            padding: 0 160px 0 100px;
+            padding: 0 160px 50px 120px;
             position: relative;
             min-height: 400px;
             .chart-title {
@@ -162,7 +162,7 @@ $normal-font: 14px;
                   display: block;
                 }
                 &.left {
-                  left: -80px;
+                  left: -70px;
                 }
                 &.right {
                   right: -65px;
@@ -170,6 +170,19 @@ $normal-font: 14px;
                 &.rightTwo {
                   right: -130px;
                 }
+                &.bottom {
+                  width: 100%;
+                  display: flex;
+                  justify-content: space-between;
+                  top: auto;
+                  right: 0;
+                  bottom: -4%;
+                  .left {
+                    width: 60px;
+                    display: block;
+                    flex-shrink: 0;
+                  }
+                }
               }
             }
           }

src/views/chartRelevance_manage/statistic/statisticFeatureChartEditor.vue

@@ -108,6 +108,29 @@
               <i class="el-icon-question" style="color: #666" />
             </el-tooltip> -->
           </div>
+          <div class="section-item">
+            <span style="flex-shrink:0;min-width:70px">百分位:</span>
+            <el-select
+              v-model="chartInfo.Percentile.PercentType"
+              style="width: 120px"
+              placeholder="请选择"
+            >
+              <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>
+          </div>
           <div class="section-item">
             <span style="flex-shrink:0;min-width:70px">时间长度:</span>
             <el-input
@@ -361,7 +384,8 @@ export default {
         },
         Percentile: {
           CalculateValue: 0,
-          CalculateUnit: '天'
+          CalculateUnit: '天',
+          PercentType: 1
         },
         FrequencyDistribution: {
           DateType: 1,
@@ -394,6 +418,16 @@ export default {
         FrequencyDistribution: `在所选时间范围内，取最大值和最小值，根据频段数划分多个间距相同的区间（左闭右开，最后一个区间为左闭右闭），统计数据值落在每个区间的数据个数，频率=落在某区间数据个数/所选时间段内数据总个数，累计频率为从最小值所在区间对应的频率开始累加。`
       },
 
+      percentOptions: [
+        { label: '数据个数',val: 1 },
+        { label: '数据区间',val: 2 },
+      ],
+      tips: {
+        'percent':`1、数据个数百分位算法：数据区间第一个(较远日期)和最后一个数据点(较近日期)分别为 (T1,S1)，(T2,S2)。T代表时间。S代表对应的值<br>
+        N=T1到T2时间段指标数据个数。n=小于等于S2的数据个数。个数百分位=（n-1）/（N-1) ，N=1时不计算。<br>
+        2、数据区间百分位算法：对所选时间范围内的数据，取最大值Max，最小值Min，计算Max-Min，百分位=(现值-Min)/(Max-Min)，Max=Min时不计算`
+      },
+
       /* 图表入库 */
       isSaveChartToBase: false,
       saveSource:0,//图表位置1 2 3 4

src/views/mychart_manage/components/chartDetailDia.vue

@@ -122,7 +122,7 @@
               class="span-item"
               style="margin-left: 7px"
               @click="saveChartMapHandle"
-              v-if="[1,2,5].includes(chartInfo.Source)"
+              v-if="[1,2,5,10].includes(chartInfo.Source)"
             >
               <span> <i class="el-icon-collection" />&nbsp;保存 </span>
             </span>
@@ -272,7 +272,7 @@
                 </div>
 
                   <!-- 后续新图专用上下限 和其他数据依赖不公用 柱形图 截面散点-->
-                <template v-if="[7,10,11].includes(chartInfo.ChartType)">	
+                <template v-if="[7,10,11].includes(chartInfo.ChartType)||[2,5,10].includes(chartInfo.Source)">	
                   <div class="range-cont left">
                     <el-input
                       style="width: 60px; display: block"
@@ -1104,6 +1104,7 @@ export default {
         1: this.saveChartHandle,
         2: this.saveCommodityChart,
         5: this.saveCommodityChart,//利润曲线
+        10: this.saveCrossVarietyChart
       }
       sourceMap[this.chartInfo.Source]&&sourceMap[this.chartInfo.Source]();
     },
@@ -1122,6 +1123,10 @@ export default {
 			this.setChartImage();
 		},300),
 
+    saveCrossVarietyChart: _.debounce(async function() {
+
+    },300),
+
     /* 保存当前图表配置 */
     saveChartHandle: _.debounce(function () {
       //遍历每条线的指标配置