区间分析

src/api/modules/intervalAnalysis.js

@@ -61,6 +61,6 @@ export default{
   // 图表详情
   chartInfo:params=>{
     return http.get('/range_analysis/chart_info/detail',params)
-  }
+  },
   
 }

src/views/intervalAnalysis/addChart.vue

@@ -27,16 +27,19 @@
       </div>
       <div class="left-content">
         <div class="type-box">
-          <span :class="['item', type == 0 ? 'active' : '']" @click="type = 0"
+          <span
+            :class="['item', computedType == 0 ? 'active' : '']"
+            @click="computedType = 0"
             >单指标</span
           >
-          <span :class="['item', type == 1 ? 'active' : '']" @click="type = 1"
+          <span
+            :class="['item', computedType == 1 ? 'active' : '']"
+            @click="computedType = 1"
             >选择多指标</span
           >
         </div>
         <!-- 单指标模块 -->
-        <singleEdbWrap ref="singleEdbWrap"/>
-
+        <singleEdbWrap ref="singleEdbWrap" />
       </div>
 
       <span class="move-btn resize" v-drag id="resize"></span>
@@ -47,176 +50,233 @@
     <div class="right-wrap" id="right">
       <div class="chart-min-cont" v-if="tableData.length">
         <div class="cont-top">
-					<div class="top-left">
-						<template>
-							<el-button
-								type="primary"
-								v-for="item in yearSelector"
-								:key="item.value"
-								size="medium"
-								:plain="item.value !== year_select"
-								class="year-btn"
-								@click.native="changeYear(item)"
-								>{{ item.name }}</el-button
-							>
-							<el-button type="text" class="btn-sty" @click="openDateDia">{{
-								dateTip
-							}}</el-button>
-						</template>
-					</div>
-					<div class="top-left">
-						<el-button type="primary" size="medium" class="year-btn">保存指标</el-button>
-						<el-button type="primary" size="medium" class="year-btn" @click="showSaveChart=true">保存图</el-button>
-						<el-button type="primary" plain size="medium" class="year-btn">图表设置</el-button>
-					</div>
-				</div>
+          <div class="top-left">
+            <template>
+              <el-button
+                type="primary"
+                v-for="item in yearSelector"
+                :key="item.value"
+                size="medium"
+                :plain="item.value !== year_select"
+                class="year-btn"
+                @click.native="changeYear(item)"
+                >{{ item.name }}</el-button
+              >
+              <el-button type="text" class="btn-sty" @click="openDateDia">{{
+                dateTip
+              }}</el-button>
+            </template>
+          </div>
+          <div class="top-left">
+            <el-button 
+              type="primary" 
+              size="medium" 
+              class="year-btn"
+              @click="handleShowSaveEdb"
+              >保存指标</el-button
+            >
+            <el-dropdown 
+              v-if="$route.query.id"
+              split-button 
+              size="medium"
+              type="primary" 
+              class="year-btn"
+              @click="updateEdbHandle(entryType)" 
+              @command="edbCommandHandle"
+            >
+              {{$t('StatisticAnalysis.ChartRelevance.update_edb')}}
+              <el-dropdown-menu slot="dropdown">
+                <el-dropdown-item :command="{entryType,scence:'saveOther'}">{{$t('Table.save_as')}}</el-dropdown-item>
+              </el-dropdown-menu>
+            </el-dropdown>
+            <el-button
+              v-else
+              type="primary"
+              size="medium"
+              class="year-btn"
+              @click="showSaveChart = true"
+              >保存图</el-button
+            >
+            <el-button 
+              type="primary" 
+              plain 
+              size="medium" 
+              class="year-btn"
+              @click="handleShowChartSet"
+              >图表设置</el-button
+            >
+          </div>
+        </div>
         <div class="cont-bottom">
-					<div class="chart-show-cont" v-show="options.series">
-						<div class="chartWrapper" id="chartWrapper">
-							<h2 
-								class="chart-title" 
-                v-if="false"
-								v-show="chartInfo.ChartName"
-								:style="`
+          <div class="chart-show-cont" v-show="options.series">
+            <div class="chartWrapper" id="chartWrapper">
+              <!-- :style="`
 									textAlign:${JSON.parse(chartInfo.ChartThemeStyle).titleOptions.align};
 									fontSize:${JSON.parse(chartInfo.ChartThemeStyle).titleOptions.style.fontSize}px;
 									color:${JSON.parse(chartInfo.ChartThemeStyle).titleOptions.style.color}
+								`" -->
+              <h2
+                class="chart-title"
+                v-show="chartInfo.ChartName||chartName"
+              >
+                {{ chartInfo.ChartName||chartName }}
+              </h2>
+
+              <Chart :options="options" :chartInfo="chartInfo" ref="chartRef" />
+              <template>
+                <div class="range-cont left" v-if="leftIndex !== -1">
+                  <el-input
+                    style="width: 60px; display: block"
+                    size="mini"
+                    type="number"
+                    placeholder="上限"
+                    v-model="chartLimit.max"
+                    @change="changeLimit"
+                  />
+                  <el-input
+                    class="min-data-input"
+                    size="mini"
+                    type="number"
+                    placeholder="下限"
+                    v-model="chartLimit.min"
+                    @change="changeLimit"
+                  />
+                </div>
+                <div class="range-cont right" v-if="rightIndex !== -1">
+                  <el-input
+                    style="width: 60px; display: block"
+                    size="mini"
+                    type="number"
+                    placeholder="上限"
+                    v-model="chartLimit.rightMax"
+                    @change="changeLimit"
+                  />
+                  <el-input
+                    class="min-data-input"
+                    size="mini"
+                    type="number"
+                    placeholder="下限"
+                    v-model="chartLimit.rightMin"
+                    @change="changeLimit"
+                  />
+                </div>
+                <!-- 右2上下限设置 -->
+                <div class="range-cont rightTwo" v-if="rightTwoIndex !== -1">
+                  <el-input
+                    style="width: 60px; display: block"
+                    size="mini"
+                    type="number"
+                    placeholder="上限"
+                    v-model="chartLimit.rightTwoMax"
+                    @change="changeLimit"
+                  />
+                  <el-input
+                    class="min-data-input"
+                    size="mini"
+                    type="number"
+                    placeholder="下限"
+                    v-model="chartLimit.rightTwoMin"
+                    @change="changeLimit"
+                  />
+                </div>
+              </template>
+            </div>
+
+            <div class="chart-bottom-insruction-info" v-if="false">
+              <div class="chart-source">
+                <span
+                  v-if="chartInfo.SourcesFrom"
+                  :style="`
+									color: ${
+                    JSON.parse(chartInfo.SourcesFrom).isShow
+                      ? JSON.parse(chartInfo.SourcesFrom).color
+                      : '#999'
+                  };
+									fontSize: ${JSON.parse(chartInfo.SourcesFrom).fontSize}px;
 								`"
-							>
-								{{ chartInfo.ChartName }}
-							</h2>
-
-							<Chart :options="options" :chartInfo="chartInfo" ref="chartRef"/>
-							<template>
-								<div class="range-cont left" v-if="leftIndex !== -1">
-									<el-input
-										style="width: 60px; display: block"
-										size="mini"
-										type="number"
-										placeholder="上限"
-										v-model="chartLimit.max"
-										@change="changeLimit"
-									/>
-									<el-input
-										class="min-data-input"
-										size="mini"
-										type="number"
-										placeholder="下限"
-										v-model="chartLimit.min"
-										@change="changeLimit"
-									/>
-								</div>
-								<div class="range-cont right" v-if="rightIndex !== -1">
-									<el-input
-										style="width: 60px; display: block"
-										size="mini"
-										type="number"
-										placeholder="上限"
-										v-model="chartLimit.rightMax"
-										@change="changeLimit"
-									/>
-									<el-input
-										class="min-data-input"
-										size="mini"
-										type="number"
-										placeholder="下限"
-										v-model="chartLimit.rightMin"
-										@change="changeLimit"
-									/>
-								</div>
-								<!-- 右2上下限设置 -->
-								<div class="range-cont rightTwo" v-if="rightTwoIndex !== -1">
-									<el-input
-										style="width: 60px; display: block"
-										size="mini"
-										type="number"
-										placeholder="上限"
-										v-model="chartLimit.rightTwoMax"
-										@change="changeLimit"
-									/>
-									<el-input
-										class="min-data-input"
-										size="mini"
-										type="number"
-										placeholder="下限"
-										v-model="chartLimit.rightTwoMin"
-										@change="changeLimit"
-									/>
-								</div>
-							</template>
-
-						</div>
-
-						<div class="chart-bottom-insruction-info" v-if="false">
-
-							<div class="chart-source">
-								<span
-									v-if="chartInfo.SourcesFrom"
-									:style="`
-									color: ${JSON.parse(chartInfo.SourcesFrom).isShow ? JSON.parse(chartInfo.SourcesFrom).color : '#999'};
-									fontSize: ${ JSON.parse(chartInfo.SourcesFrom).fontSize }px;
-								`"
-								><!-- 来源 -->{{$t('Chart.Detail.source')}}:{{ JSON.parse(chartInfo.SourcesFrom).text}}
-								</span>
-
-								<el-switch
-									v-if="chartInfo.SourcesFrom"
-									v-model="chartInfo.SourcesFromVisable"
-									:active-value="true"
-									:inactive-value="false"
-									style="margin:0 15px;"
-									@change="changeSourceVisable"
-								/>
-								<span class="editsty" @click="isShowSourceDialog=true"><!-- 编辑 -->{{$t('Chart.chart_edit_btn')}}</span>
-							</div>
-
-							<!-- 图表说明 -->
-							<div 
-								class="chart-instruction" 
-								v-if="chartInfo.Instructions&&JSON.parse(chartInfo.Instructions).isShow"
-								v-text="JSON.parse(chartInfo.Instructions).text"
-								:style="`
+                  ><!-- 来源 -->{{ $t("Chart.Detail.source") }}:{{
+                    JSON.parse(chartInfo.SourcesFrom).text
+                  }}
+                </span>
+
+                <el-switch
+                  v-if="chartInfo.SourcesFrom"
+                  v-model="chartInfo.SourcesFromVisable"
+                  :active-value="true"
+                  :inactive-value="false"
+                  style="margin: 0 15px"
+                  @change="changeSourceVisable"
+                />
+                <span class="editsty" @click="isShowSourceDialog = true"
+                  ><!-- 编辑 -->{{ $t("Chart.chart_edit_btn") }}</span
+                >
+              </div>
+
+              <!-- 图表说明 -->
+              <div
+                class="chart-instruction"
+                v-if="
+                  chartInfo.Instructions &&
+                  JSON.parse(chartInfo.Instructions).isShow
+                "
+                v-text="JSON.parse(chartInfo.Instructions).text"
+                :style="`
 									color: ${JSON.parse(chartInfo.Instructions).color};
-									fontSize: ${ JSON.parse(chartInfo.Instructions).fontSize }px
+									fontSize: ${JSON.parse(chartInfo.Instructions).fontSize}px
 								`"
-							></div>
-						</div>
-
-
-						<span class="chart-author"
-							><!-- 作者 -->{{$t('Chart.Detail.author')}}:{{ chartInfo.SysUserRealName || roleName }}</span
-						>
-					</div>
-					
-					<!-- 关联指标 -->
-					<edbTableSection :tableData="tableData"/>
-				</div>
-
+              ></div>
+            </div>
+
+            <span class="chart-author"
+              ><!-- 作者 -->{{ $t("Chart.Detail.author") }}:{{
+                chartInfo.SysUserRealName || roleName
+              }}</span
+            >
+          </div>
+
+          <!-- 关联指标 -->
+          <edbTableSection :tableData="tableData" />
+        </div>
       </div>
       <div class="nodata" v-else>
-				<tableNoData :text="$t('Common.no_info_msg')"/>
-			</div>
-
-
+        <tableNoData :text="$t('Common.no_info_msg')" />
+      </div>
     </div>
 
-		<!-- 日期端选择弹窗 -->
+    <!-- 日期端选择弹窗 -->
     <DateChooseDia
       :isDateDia="isDateDia"
       :dateForm="dateForm"
-			:earliestDate="earliestDate"
+      :earliestDate="earliestDate"
       @cancel="isDateDia = false"
       @dateBack="dataChangeBack"
     />
 
-		<!-- 保存图表 -->
-		<saveChart 
-			:isShow="showSaveChart"
-			:edbType="type"
+    <!-- 保存图表 -->
+    <saveChart
+      :isShow="showSaveChart"
+      :computedType="computedType"
+      :chartName="chartName"
+      @saveChart="handleSaveChart"
+      @close="showSaveChart = false"
+    />
+
+    <!-- 单指标计算保存指标 -->
+    <saveSingleEdb 
+      :isShow="showSingleEdbSave"
+      :singleEdbData="intervalAnalysisChartData"
+      :tableData="tableData"
+      @close="showSingleEdbSave = false"
+    />
 
-			@saveChart="handleSaveChart"
-			@close="showSaveChart=false"
-		/>
+    <!-- 图表设置 -->
+    <chartSetWrap 
+      :isShow="showChartSet"
+      :chartName="chartName"
+      :chartInfo="chartInfo"
+      :tableData="tableData"
+      @close="showChartSet = false"
+    />
   </div>
 </template>
 
@@ -228,14 +288,18 @@ import { chartSetMixin } from '@/views/dataEntry_manage/mixins/chartPublic';
 import edbTableSection from '@/views/chartRelevance_manage/crossVarietyAnalysis/components/edbTableSection.vue';
 import DateChooseDia from '@/views/dataEntry_manage/components/DateChooseDia';
 import saveChart from './components/saveChart.vue'
+import saveSingleEdb from './components/saveSingleEdb.vue';
+import chartSetWrap from './components/chartSetWrap.vue'
 export default {
-  components:{
-		singleEdbWrap,
-		Chart,
-		edbTableSection,
-		DateChooseDia,
-		saveChart
-	},
+  components: {
+    singleEdbWrap,
+    Chart,
+    edbTableSection,
+    DateChooseDia,
+    saveChart,
+    saveSingleEdb,
+    chartSetWrap
+  },
   directives: {
     drag(el, bindings) {
       el.onmousedown = function (e) {
@@ -262,135 +326,179 @@ export default {
       };
     },
   },
-  mixins: [ chartSetMixin ],
-	computed:{
-		roleName() {
-			return localStorage.getItem('userName');
-		},
-	},
+  mixins: [chartSetMixin],
+  computed: {
+    roleName() {
+      return localStorage.getItem('userName');
+    },
+  },
   data() {
     return {
+      chartInfo:null,
+
       isSlideLeft: false,
-      type: 0,//类型 0单指标 1多指标
+      computedType: 0,//类型 0单指标 1多指标
 
+      chartName: '',
+      showSaveChart: false,//保存图
 
-			showSaveChart:false,//保存图
+      showSingleEdbSave:false,//单指标计算保存指标
+      singleEdbData:null,
 
+      showChartSet:false,//图表设置
     }
   },
   methods: {
-		// 保存图
-		handleSaveChart(e){
-			console.log(e);
-			const edbParams=this.$refs.singleEdbWrap.getParams()
-			const params={
-				ChartEdbInfoList:edbParams.ChartEdbInfoList,
-				ExtraConfig:JSON.stringify(edbParams.ExtraConfig),
-				ChartClassifyId:e.classify,
-				ChartName:e.name,
-				ChartType:1,
-				DateType:this.year_select,
-			}
-			apiIntervalAnalysis.chartAdd(params).then(res=>{
-				if(res.Ret===200){
-					this.showSaveChart=false
-					// {
-					// 		"Ret": 200,
-					// 		"Msg": "保存成功",
-					// 		"ErrMsg": "",
-					// 		"ErrCode": "",
-					// 		"Data": {
-					// 				"ChartInfoId": 2581,
-					// 				"UniqueCode": "96984be7b1681a6f9f5aa762191c3ed6",
-					// 				"ChartType": 9,
-					// 				"ClassifyId": 0
-					// 		},
-					// 		"Success": true
-					// }
-				}
-			})
-		},
+    // 保存指标
+    handleShowSaveEdb(){
+      if(this.computedType===0){
+        this.singleEdbData=this.$refs.singleEdbWrap.getParams()
+        this.showSingleEdbSave=true
+      }
+    },
+
+    handleShowChartSet(){
+      this.showChartSet=true
+    },
+
+    // 保存图
+    handleSaveChart(e) {
+      console.log(e);
+      const edbParams = this.$refs.singleEdbWrap.getParams()
+      const params = {
+        ChartEdbInfoList: edbParams.ChartEdbInfoList,
+        ExtraConfig: JSON.stringify(edbParams.ExtraConfig),
+        ChartClassifyId: e.classify,
+        ChartName: e.name,
+        ChartType: 1,
+        DateType: this.year_select,
+      }
+      apiIntervalAnalysis.chartAdd(params).then(res => {
+        if (res.Ret === 200) {
+					this.$message.success('MsgPrompt.saved_msg')
+          this.showSaveChart = false
+        }
+      })
+    },
 
     //计算绘图
-    async handleComputed(){
-			
-      const edbParams=this.$refs.singleEdbWrap.getParams()
-			const params={
-				...edbParams,
-				DateType: this.year_select,
-				StartDate: [5 , 6].includes(this.year_select)
-					? dateArray[0]
-					: '',
-				EndDate: this.year_select === 5 ? dateArray[1]: '',
-				StartYear:this.count_year || 0,
-			}
+    async handleComputed() {
+
+      const edbParams = this.$refs.singleEdbWrap.getParams()
+      const params = {
+        ...edbParams,
+        DateType: this.year_select,
+        StartDate: [5, 6].includes(this.year_select)
+          ? dateArray[0]
+          : '',
+        EndDate: this.year_select === 5 ? dateArray[1] : '',
+        StartYear: this.count_year || 0,
+      }
       console.log(params);
-      if(!params.ChartEdbInfoList.length||!params.ChartEdbInfoList[0].EdbInfoId){
+      if (!params.ChartEdbInfoList.length || !params.ChartEdbInfoList[0].EdbInfoId) {
         this.$message.warning('请选择指标')
         return
       }
 
-      const res=await apiIntervalAnalysis.chartPreview(params)
-      if(res.Ret===200){
+      const res = await apiIntervalAnalysis.chartPreview(params)
+      if (res.Ret === 200) {
+        this.initChartName(res.Data)
         this.initIntervalAnalysisChartData(res.Data)
       }
     },
 
-		/* 年份改变 重新刷新图表接口  保存当前的图表配置和上下限 只改变图表 */
-		changeYear(item) {
-			this.year_select = item.value;
-			this.select_date = '';
-			this.dateTip =/* '请选择时间段' */ this.$t('Chart.choose_time');
+    initChartName(data) {
+      if (this.computedType === 0) {//单指标计算
+				const calculateTypeMap={
+					0:'Average()',
+					1:'Sum()',
+					2:'Growth Rate()',
+					3:'Annualized Growth Rate()',
+					4:'Max()',
+					5:'Min()'
+				}
+				const edbName=this.$i18nt.locale==='zh'?data.EdbInfoList[0].EdbName:data.EdbInfoList[0].EdbNameEn||data.EdbInfoList[0].EdbName
+				this.chartName=`${edbName}${calculateTypeMap[data.DataResp.CalculateType]}`
+      }
+    },
+
+    /* 年份改变 重新刷新图表接口  保存当前的图表配置和上下限 只改变图表 */
+    changeYear(item) {
+      this.year_select = item.value;
+      this.select_date = '';
+      this.dateTip =/* '请选择时间段' */ this.$t('Chart.choose_time');
 
-			this.handleComputed();
-		},
+      this.handleComputed();
+    },
 
-		/* 打开时间段弹窗 */
-		openDateDia() {
-			// 自定义时间段回显
-			let selectDateStart = this.chartInfo.ChartType === 2?this.season_year[0]:this.select_date[0]
-			let selectDateEnd = this.chartInfo.ChartType === 2?this.season_year[1]:this.select_date[1]
-
-			this.dateForm = {
-				date_type: this.year_select,
-				start_date:
-					this.year_select === 5 || this.year_select === 6
-						? selectDateStart
-						: '',
-				end_date: this.year_select === 5 ? selectDateEnd : '',
-				count_year: this.year_select === 20 ? this.count_year : ''
-			};
-			this.isDateDia = true;
-		},
-		/* 保存完自定义日期 刷新数据  保存当前的图表配置和上下限 只改变图表*/
-		dataChangeBack(data) {
-			this.year_select = data.dateType;
-			this.isDateDia = false;
+    /* 打开时间段弹窗 */
+    openDateDia() {
+      // 自定义时间段回显
+      let selectDateStart = this.chartInfo.ChartType === 2 ? this.season_year[0] : this.select_date[0]
+      let selectDateEnd = this.chartInfo.ChartType === 2 ? this.season_year[1] : this.select_date[1]
+
+      this.dateForm = {
+        date_type: this.year_select,
+        start_date:
+          this.year_select === 5 || this.year_select === 6
+            ? selectDateStart
+            : '',
+        end_date: this.year_select === 5 ? selectDateEnd : '',
+        count_year: this.year_select === 20 ? this.count_year : ''
+      };
+      this.isDateDia = true;
+    },
+    /* 保存完自定义日期 刷新数据  保存当前的图表配置和上下限 只改变图表*/
+    dataChangeBack(data) {
+      this.year_select = data.dateType;
+      this.isDateDia = false;
       this.count_year = data.count_year
 
-			let dateStart = data.start_date
-			let dateEnd = data.end_date
-			let latestYear = parseInt(this.latestDate.substring(0,4))
-			if(data.dateType==20){
-				dateStart = `${latestYear-data.count_year+1}-01-01`
-				dateEnd = `${latestYear}-12-31`
-			}
+      let dateStart = data.start_date
+      let dateEnd = data.end_date
+      let latestYear = parseInt(this.latestDate.substring(0, 4))
+      if (data.dateType == 20) {
+        dateStart = `${latestYear - data.count_year + 1}-01-01`
+        dateEnd = `${latestYear}-12-31`
+      }
 
 
-			// 因为原本季节性图不支持 DateType为5和6的 所以季节性也将StartDate和EndDate传过去
-			this.select_date = [dateStart, dateEnd];
+      // 因为原本季节性图不支持 DateType为5和6的 所以季节性也将StartDate和EndDate传过去
+      this.select_date = [dateStart, dateEnd];
 
-			if(data.dateType==20){
-				this.dateTip = /* `最近${data.count_year}年` */ this.$t('Chart.date_tip_count',{year:data.count_year})
-			}else if (data.dateType === 5) {
-				this.dateTip = `${data.start_date}~${data.end_date}`;
-			} else {
-				this.dateTip = /* `${data.start_date}~至今` */ this.$t('Chart.data_tip_since',{date:data.start_date});
-			}
+      if (data.dateType == 20) {
+        this.dateTip = /* `最近${data.count_year}年` */ this.$t('Chart.date_tip_count', { year: data.count_year })
+      } else if (data.dateType === 5) {
+        this.dateTip = `${data.start_date}~${data.end_date}`;
+      } else {
+        this.dateTip = /* `${data.start_date}~至今` */ this.$t('Chart.data_tip_since', { date: data.start_date });
+      }
 
-			this.handleComputed();
+      this.handleComputed();
+    },
+
+		// 获取图表详情
+		getChartInfo(){
+			apiIntervalAnalysis.chartInfo({
+        ChartInfoId: Number(this.$route.query.id)
+      }).then(res=>{
+				if(res.Ret===200){
+          this.initEditData(res.Data)
+					this.initIntervalAnalysisChartData(res.Data)
+				}
+			})
 		},
 
+    // 编辑时初始化表单数据
+    initEditData(data){
+      const {ChartInfo,DataResp,EdbInfoList}=data
+      this.computedType=DataResp.EdbInfoMode
+      this.chartName=this.$i18nt.locale==='zh'?ChartInfo.ChartName:ChartInfo.ChartNameEn
+      if(DataResp.EdbInfoMode===0){
+        this.$refs.singleEdbWrap.initData(data)
+      }
+    },
+
 
     reloadRightWid() {
       let total_wid = $('#box')[0].offsetWidth;
@@ -401,6 +509,9 @@ export default {
   },
 
   mounted() {
+		if(this.$route.query.id){
+			this.getChartInfo()
+		}
     window.addEventListener('resize', this.reloadRightWid);
   },
   destroyed() {
@@ -474,14 +585,14 @@ export default {
           display: inline-block;
         }
         .active {
-          color: #409eff;
-          border-bottom: 2px solid #409eff;
+          color: #0052D9;
+          border-bottom: 2px solid #0052D9;
         }
       }
     }
   }
   .right-wrap {
-    $font-small: 12px; 
+    $font-small: 12px;
     $font-normal: 14px;
     flex: 1;
     background: #fff;
@@ -494,199 +605,199 @@ export default {
     .mx-datepicker {
       width: 220px !important;
     }
-		 /* =================== */
-		.chart-min-cont {
-			background: #fff;
-			border: 1px solid #ececec;
-			height: calc(100vh - 118px);
-			overflow: auto;
-			/* overflow: hidden; */
-			border-radius: 4px;
-			box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.05);
-			.cont-top {
-				padding: 12px 30px;
-				border-bottom: 1px solid #ececec;
-				display: flex;
-				justify-content: space-between;
-				align-items: center;
-				box-shadow: 0px 3px 6px rgba(167, 167, 167, 0.09);
-				.top-left {
-					.year-btn {
-						margin-right: 5px;
-						margin-bottom: 5px;
-					}
-					.btn-sty {
-						border: 1px solid #409eff;
-					}
-					.date-setting{
-						border: 1px solid #DCDFE6;
-						border-radius: 4px;
-						cursor: pointer;
-						color: #333333;
-						line-height: 16px;
-					}
-				}
-				.top-right {
-					font-size: 16px;
-					.join_txt {
-						color: #409eff;
-						cursor: pointer;
-						&:hover {
-							text-decoration: underline;
-						}
-					}
-					.collected {
-						color: #f00;
-						cursor: pointer;
-						&:hover {
-							text-decoration: underline;
-						}
-					}
-					.span-item {
-						color: #409eff;
-						cursor: pointer;
-						&:hover {
-							text-decoration: underline;
-						}
-						.el-icon-collection,
-						.el-icon-document-copy {
-							color: #409eff;
-						}
-					}
-				}
-			}
-			.cont-bottom {
-				padding: 20px 30px;
-				/* height: calc(100vh - 250px);
+    /* =================== */
+    .chart-min-cont {
+      background: #fff;
+      border: 1px solid #ececec;
+      height: calc(100vh - 118px);
+      overflow: auto;
+      /* overflow: hidden; */
+      border-radius: 4px;
+      box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.05);
+      .cont-top {
+        padding: 12px 30px;
+        border-bottom: 1px solid #ececec;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        box-shadow: 0px 3px 6px rgba(167, 167, 167, 0.09);
+        .top-left {
+          .year-btn {
+            margin-right: 5px;
+            margin-bottom: 5px;
+          }
+          .btn-sty {
+            border: 1px solid #409eff;
+          }
+          .date-setting {
+            border: 1px solid #dcdfe6;
+            border-radius: 4px;
+            cursor: pointer;
+            color: #333333;
+            line-height: 16px;
+          }
+        }
+        .top-right {
+          font-size: 16px;
+          .join_txt {
+            color: #409eff;
+            cursor: pointer;
+            &:hover {
+              text-decoration: underline;
+            }
+          }
+          .collected {
+            color: #f00;
+            cursor: pointer;
+            &:hover {
+              text-decoration: underline;
+            }
+          }
+          .span-item {
+            color: #409eff;
+            cursor: pointer;
+            &:hover {
+              text-decoration: underline;
+            }
+            .el-icon-collection,
+            .el-icon-document-copy {
+              color: #409eff;
+            }
+          }
+        }
+      }
+      .cont-bottom {
+        padding: 20px 30px;
+        /* height: calc(100vh - 250px);
 				overflow: auto; */
-				.el-input__inner {
-					height: 27px;
-					line-height: 27px;
-					padding: 0 4px;
-				}
-				.el-input-number .el-input__inner {
-					padding: 0 34px 0 4px;
-				}
-				.highcharts-range-selector-group {
-					display: none;
-					.highcharts-input-group {
-						display: none;
-					}
-				}
-				.highcharts-axis-title {
-					display: block;
-				}
-				/* =================== */
-				.chart-show-cont {
-					min-height: 300px;
-					padding: 0 150px 60px 120px;
-					position: relative;
-					.chart-title {
-						font-size: 16px;
-						font-weight: normal;
-						text-align: center;
-						margin-bottom: 10px;
-					}
-					.chart-author {
-						font-size: 14px;
-						color: #333;
-						position: absolute;
-						bottom: 20px;
-						right: 50px;
-					}
-					.chartWrapper {
-						position: relative;
-						.range-cont {
-							position: absolute;
-							top: 15%;
-							.min-data-input {
-								width: 60px;
-								display: block;
-							}
-							&.left {
-								left: -80px;
-							}
-							&.right {
-								right: -65px;
-							}
-							&.rightTwo {
-								right: -130px;
-							}
-							&.bottom {
-								width: 100%;
-								display: flex;
-								justify-content: space-between;
-								top: auto;
-								right: 0;
-								bottom: -2%;
-								.left {
-									width: 60px;
-									display: block;
-									flex-shrink: 0;
-								}
-							}
-						}
-					}
-				}
-				.options-cont {
-					display: flex;
-					flex-wrap: wrap;
-					justify-content: space-between;
-				}
-			}
-
-		}
+        .el-input__inner {
+          height: 27px;
+          line-height: 27px;
+          padding: 0 4px;
+        }
+        .el-input-number .el-input__inner {
+          padding: 0 34px 0 4px;
+        }
+        .highcharts-range-selector-group {
+          display: none;
+          .highcharts-input-group {
+            display: none;
+          }
+        }
+        .highcharts-axis-title {
+          display: block;
+        }
+        /* =================== */
+        .chart-show-cont {
+          min-height: 300px;
+          padding: 0 150px 60px 120px;
+          position: relative;
+          .chart-title {
+            font-size: 16px;
+            font-weight: normal;
+            text-align: center;
+            margin-bottom: 10px;
+          }
+          .chart-author {
+            font-size: 14px;
+            color: #333;
+            position: absolute;
+            bottom: 20px;
+            right: 50px;
+          }
+          .chartWrapper {
+            position: relative;
+            .range-cont {
+              position: absolute;
+              top: 15%;
+              .min-data-input {
+                width: 60px;
+                display: block;
+              }
+              &.left {
+                left: -80px;
+              }
+              &.right {
+                right: -65px;
+              }
+              &.rightTwo {
+                right: -130px;
+              }
+              &.bottom {
+                width: 100%;
+                display: flex;
+                justify-content: space-between;
+                top: auto;
+                right: 0;
+                bottom: -2%;
+                .left {
+                  width: 60px;
+                  display: block;
+                  flex-shrink: 0;
+                }
+              }
+            }
+          }
+        }
+        .options-cont {
+          display: flex;
+          flex-wrap: wrap;
+          justify-content: space-between;
+        }
+      }
+    }
     .nodata {
       height: calc(100vh - 120px);
-			background-color: #fff;
+      background-color: #fff;
       text-align: center;
       font-size: 16px;
       color: #666;
-			padding: 100px 0;
+      padding: 100px 0;
     }
-		
-		@media screen and (min-width: 1711px){
-			.min-data-input {
-				margin-top: 310px;
-			}
-			.btn-sty {
-				padding: 10px;
-			}
-			.year-btn,.btn-sty {
-				font-size: $font-normal;
-			}
-			.date-setting{
-				width: 210px;
-				height: 40px;
-				padding: 12px;
-				font-size: $font-normal;
-			}
-		}
 
-		@media screen and (max-width: 1710px){
-			.min-data-input {
-				margin-top: 230px;
-			}
-			.year-btn {
-				font-size: $font-small;
-				margin-left: 5px;
-				margin-right: 5px;
-				margin-bottom: 5px;
-				padding: 6px 12px;
-			}
-			.btn-sty {
-				font-size: $font-small;
-				margin-left: 5px;
-				padding: 6px;
-				border: 1px solid #409eff;
-			}
-			.date-setting{
-				width: 180px;
-				height: 36px;
-				padding: 10px;
-				font-size: $font-small;
-			}
-		}
+    @media screen and (min-width: 1711px) {
+      .min-data-input {
+        margin-top: 310px;
+      }
+      .btn-sty {
+        padding: 10px;
+      }
+      .year-btn,
+      .btn-sty {
+        font-size: $font-normal;
+      }
+      .date-setting {
+        width: 210px;
+        height: 40px;
+        padding: 12px;
+        font-size: $font-normal;
+      }
+    }
+
+    @media screen and (max-width: 1710px) {
+      .min-data-input {
+        margin-top: 230px;
+      }
+      .year-btn {
+        font-size: $font-small;
+        margin-left: 5px;
+        margin-right: 5px;
+        margin-bottom: 5px;
+        padding: 6px 12px;
+      }
+      .btn-sty {
+        font-size: $font-small;
+        margin-left: 5px;
+        padding: 6px;
+        border: 1px solid #409eff;
+      }
+      .date-setting {
+        width: 180px;
+        height: 36px;
+        padding: 10px;
+        font-size: $font-small;
+      }
+    }
   }
 }
 </style>

src/views/intervalAnalysis/components/batchSelectEdb.vue

@@ -0,0 +1,268 @@
+<template>
+  <el-dialog
+    :visible.sync="isShow"
+    :close-on-click-modal="false"
+    :modal-append-to-body="false"
+    @close="handleClose"
+    custom-class="batch-computed-dialog fit-screen-dialog"
+    center
+    top="5vh"
+    v-dialogDrag
+    title="批量选择指标"
+  >
+    <div class="batch-computed-wrap">
+      <div class="filter-wrap" style="margin-top: 20px">
+        <p style="margin-bottom: 10px">
+          {{ $t("EtaBasePage.pending_metrics", { num: 100 }) }}
+        </p>
+        <div>
+          <el-cascader
+            v-model="filter.classify"
+            :options="classifyOpt"
+            :props="classifyProps"
+            clearable
+            collapse-tags
+            :placeholder="$t('EtaBasePage.label_classify')"
+            style="width: 240px"
+            @change="handleFilter"
+          />
+          <el-select
+            v-model="filter.frequency"
+            :placeholder="$t('EtaBasePage.select_frequency')"
+            style="width: 140px"
+            clearable
+            multiple
+            collapse-tags
+            @change="handleFilter"
+            :disabled="[5, 61].includes(subComputedType)"
+          >
+            <el-option
+              v-for="item in frequencyArr"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value"
+            >
+            </el-option>
+          </el-select>
+          <el-cascader
+            v-model="filter.user"
+            :placeholder="$t('EtaBasePage.table_col_creator')"
+            :options="sysUserOpts"
+            :props="sysUserProps"
+            collapse-tags
+            :show-all-levels="false"
+            clearable
+            filterable
+            style="width: 240px"
+            @change="handleFilter"
+          />
+          <el-input
+            :placeholder="$t('Edb.InputHolderAll.input_name_orid')"
+            v-model="filter.keyword"
+            style="width: 200px"
+            @keydown.enter.native="handleFilter"
+          >
+            <i slot="prefix" class="el-input__icon el-icon-search"></i>
+          </el-input>
+          <el-checkbox
+            :label="$t('EtaBasePage.label_all_check')"
+            v-model="isCheckAll"
+            :indeterminate="isCheckIndeterminate"
+            style="margin-left: 10px"
+            @change="listCheckAllChange"
+            :disabled="operationForm.view"
+          />
+        </div>
+      </div>
+      <div class="table-wrap">
+        <div class="left-box">
+          <el-table
+            :data="list"
+            border
+            @sort-change="sortChange"
+            @selection-change="selectionChange"
+            ref="edbDataRef"
+            @select="selectHandle"
+            @select-all="selectAllHandle"
+            height="500px"
+            v-loading="listLoading"
+          >
+            <el-table-column
+              type="selection"
+              min-width="50"
+              align="center"
+              :selectable="filterEdbAuth"
+            />
+            <el-table-column
+              :label="$t('EtaBasePage.full_metric_name')"
+              show-overflow-tooltip
+              align="center"
+              :prop="$parent.currentLang === 'en' ? 'EdbNameEn' : 'EdbName'"
+            />
+            <el-table-column
+              :label="$t('Edb.Detail.e_latest_date')"
+              align="center"
+              prop="EndDate"
+              width="120px"
+            />
+            <el-table-column
+              :label="$t('Edb.Detail.e_latest_value')"
+              align="center"
+              show-overflow-tooltip
+              prop="EndValue"
+              width="80px"
+            />
+            <el-table-column
+              :label="$t('EtaBasePage.table_col_creator')"
+              align="center"
+              show-overflow-tooltip
+              prop="SysUserRealName"
+              width="80px"
+            />
+            <el-table-column
+              :label="$t('Edb.Detail.e_fre')"
+              align="center"
+              prop="Frequency"
+              width="50px"
+            >
+              <template slot-scope="scope">
+                <span>{{ getFrequencyTrans(scope.row.Frequency) }}</span>
+              </template>
+            </el-table-column>
+            <el-table-column
+              :label="$t('Edb.Detail.e_unit')"
+              show-overflow-tooltip
+              align="center"
+              :prop="$parent.currentLang === 'en' ? 'UnitEn' : 'Unit'"
+              width="50px"
+            >
+              <template slot-scope="scope">
+                <span>{{ getUnitTrans(scope.row.Unit) }}</span>
+              </template>
+            </el-table-column>
+          </el-table>
+          <m-page
+            style="margin-top: 10px"
+            class="table-page"
+            v-show="total"
+            :total="total"
+            :pageSize="pageSize"
+            :page_no="page"
+            :pagercount="5"
+            @handleCurrentChange="pageNumberChange"
+          />
+        </div>
+        <div style="padding-top: 200px; margin: 0 30px">
+          <el-button
+            type="primary"
+            :disabled="operationForm.view"
+            :loading="addLoading"
+            @click="getAddEdbListData"
+          >
+            <!-- 加入已选指标 -->
+            {{ $t("EtaBasePage.add_to_selections") }}
+          </el-button>
+        </div>
+        <div class="right-box">
+          <el-table :data="selectList" border height="500px">
+            <el-table-column
+              :label="$t('EtaBasePage.full_metric_name')"
+              show-overflow-tooltip
+              align="center"
+              :prop="$parent.currentLang === 'en' ? 'EdbNameEn' : 'EdbName'"
+            />
+            <el-table-column
+              width="50px"
+              align="center"
+              v-if="!operationForm.view"
+            >
+              <template slot="header" slot-scope="scope">
+                <img
+                  @click="handleDelSelect('all')"
+                  style="width: 15px; height: 15px; cursor: pointer"
+                  src="~@/assets/img/ai_m/delete.png"
+                  alt=""
+                />
+              </template>
+              <template slot-scope="scope">
+                <img
+                  @click="handleDelSelect(scope)"
+                  style="width: 15px; height: 15px; cursor: pointer"
+                  src="~@/assets/img/ai_m/delete.png"
+                  alt=""
+                />
+              </template>
+            </el-table-column>
+          </el-table>
+        </div>
+      </div>
+      <div style="text-align: center; margin: 60px 0 40px 0">
+        <el-button type="primary" plain @click="handleCloseSelf">{{
+          $t("Dialog.cancel_btn")
+        }}</el-button>
+        <el-button type="primary" @click="handleNextStep">{{
+          $t("Dialog.next_step")
+        }}</el-button>
+      </div>
+    </div>
+  </el-dialog>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      select_target: '',
+      searchOptions: [],//指标列表
+      search_have_more: false,
+      search_page: 1,
+      current_search: '',
+
+      filter: {
+        classify: '',
+        frequency: '',
+        user: '',
+        keyword: ''
+      },
+
+      classifyOpt: [],
+      classifyProps: {
+        label: 'ClassifyName',
+        value: 'ClassifyId',
+        children: 'Children',
+        multiple: true,
+        emitPath: false
+      },
+      sysUserOpts: [],
+      sysUserProps: {
+        value: "AdminId",
+        label: "RealName",
+        children: "ChildrenList",
+        multiple: true,
+        emitPath: false
+      },
+
+      isCheckAll: false,//是否全选
+      isCheckIndeterminate: false,// 标志列表当前是全选状态还是不是全选状态和 isCheckAll不一样
+      checkAllStatus: false,
+      selectionReactCancel: false,// 是否不触发 selection的逻辑
+
+      listLoading: false,
+      page: 1,
+      pageSize: 20,
+      total: 0,
+      list: [],
+
+      tableDataCheckedList: [],
+      tableDataIds: [],
+
+      selectList: [],//添加到右侧的数据
+      addLoading: false,
+
+    }
+  },
+}
+</script>
+
+<style>
+</style>

src/views/intervalAnalysis/components/chartSetWrap.vue

@@ -0,0 +1,193 @@
+<template>
+  <el-dialog
+    :modal-append-to-body="false"
+    title="图表设置"
+    :visible.sync="isShow"
+    :close-on-click-modal="false"
+    @close="cancelHandle"
+    center
+    v-dialogDrag
+    width="750px"
+  >
+    <div class="chart-set-wrap">
+      <el-form ref="diaForm" :model="formData" label-width="100px">
+        <el-form-item :label="$t('Chart.Detail.chart_name')" prop="name">
+          <el-input
+            :placeholder="$t('Chart.Detail.chart_name')"
+            v-model="formData.name"
+            style="width: 90%"
+          ></el-input>
+        </el-form-item>
+        <el-form-item
+          :label="$t('EtaChartAddPage.label_chart_theme')"
+          prop="themeId"
+        >
+          <el-select
+            v-model="formData.themeId"
+            placeholder="请选择图表主题"
+            style="width: 90%"
+            @change="changeThemeHandle"
+          >
+            <el-option
+              v-for="item in chartThemeArr"
+              :key="item.ChartThemeId"
+              :label="item.ChartThemeName"
+              :value="item.ChartThemeId"
+            >
+            </el-option>
+          </el-select>
+        </el-form-item>
+        <div class="series-list-wrap">
+          <div class="item-box">
+            <div class="label-box">图例</div>
+            <div class="content-box">指标名称</div>
+            <div class="right-box">坐标轴</div>
+          </div>
+          <div class="item-box" v-for="item,index in seriesArr" :key="item.EdbInfoId">
+            <div class="label-box">
+              <div class="line-box"></div>
+            </div>
+            <div class="content-box">
+              <el-input
+                v-model="item.EdbName"
+                style="width:100%"
+              ></el-input>
+            </div>
+            <div class="right-box">
+              <el-radio-group
+                v-model="item.IsAxis"
+                size="mini"
+              >
+                <el-radio-button :label="1"
+                  ><!-- 左轴 -->{{ $t("Chart.Detail.l_axis") }}</el-radio-button
+                >
+                <el-radio-button :label="0"
+                  ><!-- 右轴 -->{{ $t("Chart.Detail.r_axis") }}</el-radio-button
+                >
+
+                <!-- 指标有右轴时才可以选右2轴 不然没有右2这个概念的意义 -->
+                <el-radio-button
+                  :label="2"
+                  :disabled="
+                    seriesArr.findIndex((_) => _.IsAxis === 0) === -1 ||
+                    (seriesArr.findIndex((_) => _.IsAxis === 0) === index &&
+                      seriesArr.filter((_) => _.IsAxis === 0).length === 1)
+                  "
+                  ><!-- 右2轴 -->{{
+                    $t("Chart.Detail.rtwo_axis")
+                  }}</el-radio-button
+                >
+              </el-radio-group>
+            </div>
+          </div>
+        </div>
+        <el-form-item :label="$t('Edb.Detail.source')" prop="source">
+          <el-input v-model="formData.source" style="width:80%"></el-input>
+          <el-switch v-model="formData.showSource"></el-switch>
+        </el-form-item>
+      </el-form>
+      <div class="dia-bot">
+        <el-button type="primary" style="margin-right: 20px" @click="saveHandle"
+          ><!-- 保存 -->{{ $t("Dialog.confirm_save_btn") }}</el-button
+        >
+        <el-button type="primary" plain @click="cancelHandle"
+          ><!-- 取消 -->{{ $t("Dialog.cancel_btn") }}</el-button
+        >
+      </div>
+    </div>
+  </el-dialog>
+</template>
+
+<script>
+import * as chartThemeInterface from '@/api/modules/chartThemeApi';
+export default {
+  props: {
+    isShow: {
+      type: Boolean,
+      default: false
+    },
+    chartName:'',
+    chartInfo: {},
+    tableData: [],
+  },
+  watch: {
+    isShow(n){
+      if(n){
+        this.formData.name=this.chartName
+        this.seriesArr=this.tableData||[]
+        this.getThemeList()
+      }
+    }
+  },
+  data() {
+    return {
+      formData: {
+        name: '',
+        themeId: '',
+        source: '',
+        showSource: false
+      },
+      seriesArr:[],
+
+      chartThemeArr: [],//主题列表
+    }
+  },
+  methods: {
+    async saveHandle() {
+      
+    },
+
+    cancelHandle() {
+      this.$emit("close");
+    },
+
+    /* 获取主题列表  type init时重新设置默认样式和主题*/
+    async getThemeList(type = null) {
+      let res = await chartThemeInterface.getThemeBySource({ ChartType: this.chartInfo.ChartType, Source: 1 })
+
+      if (res.Ret !== 200) return
+      this.chartThemeArr = res.Data || []
+
+      if (type === 'init') {
+        // this.chartInfo.ChartThemeId = res.Data[0].DefaultChartThemeId;
+        // this.chartInfo.ChartThemeStyle = this.chartThemeArr.find(_ => _.ChartThemeId === this.chartInfo.ChartThemeId).Config
+
+        // this.reLoadChartOption();
+      }
+    },
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+div{
+  box-sizing: border-box;
+}
+.chart-set-wrap{
+  .series-list-wrap{
+    margin-bottom: 22px;
+    .item-box{
+      display: flex;
+      align-items: center;
+      margin-bottom: 10px;
+      .label-box{
+        width: 100px;
+        padding-right: 12px;
+        text-align: right;
+      }
+      .content-box{
+        flex: 1;
+        text-align: center;
+      }
+      .right-box{
+        width: 250px;
+        text-align: center;
+      }
+    }
+  }
+  .dia-bot {
+    margin: 30px 0;
+    text-align: center;
+  }
+}
+</style>

src/views/intervalAnalysis/components/saveChart.vue

@@ -10,7 +10,7 @@
     width="550px"
   >
     <div class="save-chart-wrap">
-      <el-form ref="diaForm" :model="formData">
+      <el-form ref="diaForm" :model="formData" :rules="rules">
         <el-form-item :label="$t('Chart.Detail.chart_name')" prop="name">
           <el-input
             :placeholder="$t('Chart.Detail.chart_name')"
@@ -52,6 +52,15 @@ export default {
     isShow: {
       type: Boolean,
       default: false
+    },
+    chartName:"",//图表名称
+    computedType:0,//0单指标 1多指标
+  },
+  watch: {
+    isShow(n){
+      if(n){
+        this.formData.name=this.chartName||''
+      }
     }
   },
   data() {

src/views/intervalAnalysis/components/saveSingleEdb.vue

@@ -0,0 +1,176 @@
+<template>
+  <el-dialog
+    :modal-append-to-body="false"
+    title="保存指标"
+    :visible.sync="isShow"
+    :close-on-click-modal="false"
+    @close="cancelHandle"
+    center
+    v-dialogDrag
+    width="550px"
+  >
+    <div class="save-chart-wrap">
+      <el-form ref="diaForm" :model="formData" :rules="rules" label-width="100px">
+        <el-form-item :label="$t('Edb.Detail.e_name')" prop="name">
+          <el-input
+            :placeholder="$t('Chart.Detail.chart_name')"
+            v-model="formData.name"
+            style="width:80%"
+          ></el-input>
+        </el-form-item>
+        <el-form-item :label="$t('Edb.Detail.e_menu')" prop="classify">
+          <el-cascader
+            v-model="formData.classify"
+            :options="classifyOpts"
+            :props="classifyProps"
+            clearable
+            :placeholder="$t('Chart.InputHolderAll.input_classify')"
+            style="width:80%"
+          />
+        </el-form-item>
+        <el-form-item :label="$t('Edb.Detail.e_fre')" prop="frequency">
+          <el-select
+            v-model="formData.frequency"
+            :placeholder="$t('Edb.InputHolderAll.input_fre')"
+            clearable
+            style="width:80%"
+          >
+            <el-option
+              v-for="item in frequencyArr"
+              :key="item"
+              :label="item"
+              :value="item"
+            >
+            </el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item :label="$t('Edb.Detail.e_unit')" prop="unit">
+          <selectUnit v-model="formData.unit" style="width:80%"/>
+        </el-form-item>
+      </el-form>
+
+      <div class="dia-bot">
+        <el-button type="primary" style="margin-right: 20px" @click="saveHandle"
+          ><!-- 保存 -->{{ $t("Dialog.confirm_save_btn") }}</el-button
+        >
+        <el-button type="primary" plain @click="cancelHandle"
+          ><!-- 取消 -->{{ $t("Dialog.cancel_btn") }}</el-button
+        >
+      </div>
+    </div>
+  </el-dialog>
+</template>
+
+<script>
+import { dataBaseInterface } from '@/api/api.js';
+import apiIntervalAnalysis from '@/api/modules/intervalAnalysis'
+import { frequencyArr } from '@/views/dataEntry_manage/databaseComponents/util'
+export default {
+  props: {
+    isShow: {
+      type: Boolean,
+      default: false
+    },
+    singleEdbData: {},
+    tableData: [],
+  },
+  watch: {
+    isShow(n) {
+      if (n) {
+        const edbData=this.tableData[0]||null
+        if(edbData){
+          const calculateTypeMap={
+            0:'Average()',
+            1:'Sum()',
+            2:'Growth Rate()',
+            3:'Annualized Growth Rate()',
+            4:'Max()',
+            5:'Min()'
+          }
+          this.formData.name=`${this.$i18nt.locale==='zh'?edbData.EdbName:edbData.EdbNameEn}${calculateTypeMap[this.singleEdbData.CalculateType]}`
+          this.formData.classify=edbData.ClassifyId
+          this.formData.frequency=edbData.Frequency
+          this.formData.unit=edbData.Unit
+
+          this.getClassifyOpts()
+
+        }
+        
+      }
+    }
+  },
+  data() {
+    return {
+      rules: {
+        name: [
+          { required: true, message: this.$t('Edb.Valids.name_msg'), trigger: 'blur' }
+        ],
+        classify: [
+          { required: true, message: this.$t('Edb.Valids.menu_msg'), trigger: 'change' }
+        ],
+        frequency: [
+          { required: true, message: this.$t('Edb.Valids.fre_msg'), trigger: 'change' }
+        ]
+      },
+      formData: {
+        name: '',
+        classify: '',
+        frequency: '',
+        unit: ''
+      },
+      classifyOpts: [],
+      classifyProps: {
+        label: 'ClassifyName',
+				value: 'ClassifyId',
+				children: 'Children',
+				checkStrictly: true,
+        emitPath: false
+      },
+      frequencyArr
+
+    }
+  },
+  methods: {
+    async saveHandle() {
+      await this.$refs.diaForm.validate();
+      
+    },
+
+    cancelHandle() {
+      this.$emit("close");
+    },
+
+    // 递归改变第三级目录结构
+		filterNodes(arr) {
+			arr.length && arr.forEach(item => {
+				item.Children.length && this.filterNodes(item.Children)
+				if(!item.Children.length) {
+					delete item.Children
+				}
+			})
+		},
+
+    async getClassifyOpts() {
+      const res=this.tableData[0].EdbType===1?await preDictEdbInterface.classifyListV2():await dataBaseInterface.menuListV3()
+			if(res.Ret === 200) {
+				this.filterNodes(res.Data.AllNodes||[]);
+				this.classifyOpts = res.Data.AllNodes || [];
+			}
+    }
+
+
+  }
+}
+</script>
+
+<style lang="scss">
+.save-chart-wrap {
+  .el-input {
+    width: 100%;
+  }
+  .dia-bot {
+    margin: 30px 0;
+    text-align: center;
+  }
+}
+</style>

src/views/intervalAnalysis/components/singleEdbWrap.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="single-edb-wrap">
-    <div class="search-cont">
+    <div class="search-cont section">
       <div>
         <label><!-- 选择指标 -->{{ $t("Edb.choose_edb") }}：</label>
         <el-radio-group v-model="edbFromType">
@@ -54,7 +54,7 @@
       </el-select>
     </div>
     <!-- 区间划分 -->
-    <div class="item-box">
+    <div class="item-box section">
       <span class="label">区间划分</span>
       <div class="con-box">
         <el-select v-model="dateRangeType" style="width: 90%">
@@ -70,7 +70,7 @@
     <!-- 智能划分模块 -->
     <template v-if="dateRangeType === 0">
       <!-- 起始日期 -->
-      <div class="item-box" style="align-items: flex-start">
+      <div class="item-box section" style="align-items: flex-start">
         <span class="label" style="position: relative; top: 10px"
           >起始日期</span
         >
@@ -145,7 +145,7 @@
         <dateMoveWaySec ref="startDateMoveWaySec" class="date-trans-box" />
       </div>
       <!-- 生成指标截止时间 -->
-      <div class="item-box" style="flex-wrap: wrap">
+      <div class="item-box section" style="flex-wrap: wrap">
         <span class="label">生成指标截止时间</span>
         <div class="con-box" style="width: 100%">
           <div>
@@ -190,7 +190,7 @@
       </div>
     </template>
     <!-- 手工划分模块 -->
-    <template v-if="dateRangeType === 1">
+    <div class="section" v-if="dateRangeType === 1">
       <!-- 时间段列表 -->
       <div class="item-box" v-for="(item, index) in dateList" :key="index">
         <span class="label">时间段{{ index + 1 }}</span>
@@ -225,11 +225,11 @@
         />
         <span style="font-size: 16px">添加更多</span>
       </div>
-    </template>
+    </div>
 
     <!-- 跨年划分模块 -->
     <template v-if="dateRangeType === 2">
-      <div class="item-box">
+      <div class="item-box section">
         <span class="label">前一年&nbsp;&nbsp;&nbsp;</span>
         <div class="con-box">
           <el-date-picker
@@ -256,7 +256,7 @@
     </template>
 
     <!-- 计算公式 -->
-    <div class="item-box" style="align-items: flex-start">
+    <div class="item-box section" style="align-items: flex-start">
       <span class="label" style="position: relative; top: 10px">计算公式</span>
       <div class="con-box">
         <el-select v-model="calculateType" style="width: 90%">
@@ -271,7 +271,7 @@
     </div>
 
     <!-- 原指标异常值处理 -->
-    <div class="item-box">
+    <div class="item-box section">
       <div class="con-box">
         <el-checkbox v-model="unNormalDataDeal.isDeal"
           >原指标异常值处理</el-checkbox
@@ -347,7 +347,7 @@
     </div>
 
     <!-- 计算结果数据转换 -->
-    <div class="item-box">
+    <div class="item-box section">
       <div class="con-box">
         <el-checkbox v-model="dataConvert.isConvert"
           >计算结果数据转换</el-checkbox
@@ -520,7 +520,7 @@ export default {
         ChartEdbInfoList: [
           {
             EdbInfoId: this.edbInfoId||0,
-            IsAxis: 0,
+            IsAxis: 1,
             EdbAliasName: '',
           }
         ],
@@ -531,6 +531,7 @@ export default {
           AutoDateConf: {//智能划分数据
             IsAutoStartDate: this.startDateConfig.startDateType,
             StartDate: this.startDateConfig.startDateVal,
+            EndDate: this.endDateConfig.endDateVal,
             StartDateConf: {
               BaseDateType: this.startDateConfig.baseDateType,
               MoveForward: this.startDateConfig.MoveForward,
@@ -609,6 +610,52 @@ export default {
       if (!this.search_have_more) return;
       this.searchApi(this.current_search, ++this.search_page);
     },
+
+    // 初始化数据
+    initData(data){
+      const {ChartInfo,DataResp,EdbInfoList}=data
+      this.dateRangeType=DataResp.DateRangeType
+      this.startDateConfig={
+        startDateType:DataResp.AutoDateConf.IsAutoStartDate||0,//起始日期类型 0固定 1动态
+        startDateVal: DataResp.AutoDateConf.StartDate||'2020-01-01',
+        baseDateType: DataResp.AutoDateConf.StartDateConf.BaseDateType||0,//基准日期类型：0指标日期，1系统日期，2固定日期
+        MoveForward: DataResp.AutoDateConf.StartDateConf.MoveForward||0,
+        dateTransfData: DataResp.AutoDateConf.StartDateConf.DateChange||[],//日期变换数据
+      }
+      this.endDateConfig={
+        baseDateType: DataResp.AutoDateConf.EndDateConf.BaseDateType||0,//准日期类型：0指标日期，1系统日期，2固定日期
+        endDateVal: DataResp.AutoDateConf.EndDate||'2020-01-01',
+        MoveForward: DataResp.AutoDateConf.EndDateConf.MoveForward||0,
+        dateTransfData: DataResp.AutoDateConf.EndDateConf.DateChange||[],//日期变换数据
+      }
+
+      this.calculateType=DataResp.CalculateType
+
+      this.unNormalDataDeal={
+        isDeal: DataResp.UnNormalDataDealType===0?false:true,
+        type: DataResp.UnNormalDataDealType||1,//1:剔除，2替换
+        formula_out: DataResp.UnNormalDataDealType===1?DataResp.UnNormalDataConf.Formula:'=',
+        value_out: DataResp.UnNormalDataDealType===1?DataResp.UnNormalDataConf.Value:0,
+        formula_replace: DataResp.UnNormalDataDealType===2?DataResp.UnNormalDataConf.Formula:'=',
+        value_replace: DataResp.UnNormalDataDealType===2?DataResp.UnNormalDataConf.Value:0,
+        endValue: DataResp.UnNormalDataDealType===2?DataResp.UnNormalDataConf.ReplaceValue:0,
+      }
+
+      this.dataConvert={
+        isConvert: DataResp.DataConvertType===0?false:true,
+        convertType: DataResp.DataConvertType||1,//0不转, 1乘 2除 3对数
+        value: DataResp.DataConvertConf.Value||100,
+        unit: this.$i18nt.locale==='zh'?DataResp.DataConvertConf.Unit:DataResp.DataConvertConf.EnUnit,
+      }
+
+      this.dateList=DataResp.ManualDateConf.map(item=>{
+        return [item.StartDate,item.EndDate]
+      })
+
+      this.yearDateStart=DataResp.YearDateConf.StartDay
+      this.yearDateEnd=DataResp.YearDateConf.EndDay
+
+    },
   },
 }
 </script>
@@ -616,6 +663,11 @@ export default {
 <style lang="scss" scoped>
 .single-edb-wrap {
   margin-top: 20px;
+  .section{
+    border-top: 1px dashed #DCDFE6;
+    margin-top: 20px;
+    padding-top: 15px;
+  }
   .item-box {
     margin-top: 20px;
     display: flex;

src/views/intervalAnalysis/list.vue

@@ -182,6 +182,25 @@
       >
         <!-- 图表详情 -->
         <div class="chart-detail-wrapper" v-if="chartInfo.ChartInfoId">
+          <div class="cont-top">
+            <div class="top-left">
+              <template>
+                <el-button
+                  type="primary"
+                  v-for="item in yearSelector"
+                  :key="item.value"
+                  size="medium"
+                  :plain="item.value !== year_select"
+                  class="year-btn"
+                  @click.native="changeYear(item)"
+                  >{{ item.name }}</el-button
+                >
+                <el-button type="text" class="btn-sty" @click="openDateDia">{{
+                  dateTip
+                }}</el-button>
+              </template>
+            </div>
+          </div>
           <el-row class="bottom-min">
             <el-col :span="21" style="padding: 20px 0">
               <div class="chart-show-cont" v-if="!chartInfo.WarnMsg">
@@ -271,8 +290,11 @@
                             ? JSON.parse(chartInfo.SourcesFrom).color
                             : '#999'
                         };
-                        fontSize: ${JSON.parse(chartInfo.SourcesFrom).fontSize}px;
-                      `"><!-- 来源 -->{{ $t("Chart.Detail.source") }}:{{
+                        fontSize: ${
+                          JSON.parse(chartInfo.SourcesFrom).fontSize
+                        }px;
+                      `"
+                      ><!-- 来源 -->{{ $t("Chart.Detail.source") }}:{{
                         JSON.parse(chartInfo.SourcesFrom).text
                       }}
                     </span>
@@ -318,16 +340,15 @@
                 :linkUrl="linkUrl"
                 @copyChartConfirm="copyChartConfirm"
                 @addMychartHandle="addMychartHandle"
-                @refreshHandle="refreshHandle"
-                @saveChartOtherHandle="saveChartOtherHandle"
-                @editChartHandle="editChartHandle"
-                @openLangInfoDia="openLangInfoDia"
-                @delChartHandle="delChartHandle"
+                @refreshHandle="handleChartRefresh('detail')"
+                @saveChartOtherHandle="handleSaveOther(chartInfo)"
+                @editChartHandle="editChartHandle(chartInfo)"
+                @delChartHandle="handleDeleteChart(chartInfo)"
               />
             </el-col>
           </el-row>
           <!-- 指标列表 -->
-					<edbTableSection :tableData="tableData"/>
+          <edbTableSection :tableData="tableData" />
         </div>
         <!-- 列表 -->
         <chartListTableWrap
@@ -340,6 +361,7 @@
           @loadMoreHandle="loadMoreHandle"
           @detailShowHandle="detailShowHandle"
           @addMychartHandle="addMychartHandle"
+          @edit="editChartHandle"
         />
       </div>
     </div>
@@ -370,6 +392,15 @@
       @cancel="isAddMyChart = false"
       @addSuccess="addMySuccess"
     />
+
+    <!-- 日期端选择弹窗 -->
+    <DateChooseDia
+      :isDateDia="isDateDia"
+      :dateForm="dateForm"
+      :earliestDate="earliestDate"
+      @cancel="isDateDia = false"
+      @dateBack="dataChangeBack"
+    />
   </div>
 </template>
 
@@ -380,10 +411,9 @@ import Chart from '@/views/dataEntry_manage/components/chart';
 import openDialog from '@/views/dataEntry_manage/databaseComponents/openDialog';
 import addMyClassifyDia from '@/views/dataEntry_manage/components/addMyClassifyDia';
 import SaveChartOther from '@/views/dataEntry_manage/components/SaveChartOther';
-import setEnNameDia from '@/views/dataEntry_manage/components/setEnNameDia.vue'
 import { chartSetMixin } from '@/views/dataEntry_manage/mixins/chartPublic';
 import { copyOtherOptions } from '@/utils/defaultOptions';
-import setLangInfoDia from '@/views/dataEntry_manage/components/setLangInfo.vue'
+import DateChooseDia from '@/views/dataEntry_manage/components/DateChooseDia';
 import edbTableSection from '@/views/chartRelevance_manage/crossVarietyAnalysis/components/edbTableSection.vue';
 export default {
   components: {
@@ -391,15 +421,14 @@ export default {
     Chart,
     addMyClassifyDia,
     SaveChartOther,
-    setEnNameDia,
-    setLangInfoDia,
-    edbTableSection
+    edbTableSection,
+    DateChooseDia
   },
   mixins: [leftMixin, chartSetMixin],
-  computed:{
+  computed: {
     /* 分享地址 */
     linkUrl() {
-      const LINK_CHART_URL = this.$setting.dynamicOutLinks.ChartViewUrl+'/chartshow';
+      const LINK_CHART_URL = this.$setting.dynamicOutLinks.ChartViewUrl + '/chartshow';
       return `${LINK_CHART_URL}?code=${this.chartInfo.UniqueCode}&fromType=share?&lang=${this.currentLang}`
     }
   },
@@ -436,7 +465,7 @@ export default {
 
       isAddMyChart: false, //加入图库弹窗
       add_chart_id: 0, //要加入的图表
-			add_ids:[],//加入时已有的分类
+      add_ids: [],//加入时已有的分类
 
     };
   },
@@ -517,18 +546,73 @@ export default {
       this.getPublicList()
     },
 
-    detailShowHandle(e){
-      this.select_id=e.ChartInfoId
+    detailShowHandle(e) {
+      this.select_id = e.ChartInfoId
     },
 
     handleInitList() {
       this.listFinished = false
       this.chart_page = 1
       this.chartList = []
-      this.chart_total=0
+      this.chart_total = 0
       this.getPublicList()
     },
 
+    /* 年份改变 重新刷新图表接口  保存当前的图表配置和上下限 只改变图表 */
+    changeYear(item) {
+      this.year_select = item.value;
+      this.select_date = '';
+      this.dateTip =/* '请选择时间段' */ this.$t('Chart.choose_time');
+
+      
+    },
+
+    /* 打开时间段弹窗 */
+    openDateDia() {
+      // 自定义时间段回显
+      let selectDateStart = this.chartInfo.ChartType === 2 ? this.season_year[0] : this.select_date[0]
+      let selectDateEnd = this.chartInfo.ChartType === 2 ? this.season_year[1] : this.select_date[1]
+
+      this.dateForm = {
+        date_type: this.year_select,
+        start_date:
+          this.year_select === 5 || this.year_select === 6
+            ? selectDateStart
+            : '',
+        end_date: this.year_select === 5 ? selectDateEnd : '',
+        count_year: this.year_select === 20 ? this.count_year : ''
+      };
+      this.isDateDia = true;
+    },
+    /* 保存完自定义日期 刷新数据  保存当前的图表配置和上下限 只改变图表*/
+    dataChangeBack(data) {
+      this.year_select = data.dateType;
+      this.isDateDia = false;
+      this.count_year = data.count_year
+
+      let dateStart = data.start_date
+      let dateEnd = data.end_date
+      let latestYear = parseInt(this.latestDate.substring(0, 4))
+      if (data.dateType == 20) {
+        dateStart = `${latestYear - data.count_year + 1}-01-01`
+        dateEnd = `${latestYear}-12-31`
+      }
+
+
+      // 因为原本季节性图不支持 DateType为5和6的 所以季节性也将StartDate和EndDate传过去
+      this.select_date = [dateStart, dateEnd];
+
+      if (data.dateType == 20) {
+        this.dateTip = /* `最近${data.count_year}年` */ this.$t('Chart.date_tip_count', { year: data.count_year })
+      } else if (data.dateType === 5) {
+        this.dateTip = `${data.start_date}~${data.end_date}`;
+      } else {
+        this.dateTip = /* `${data.start_date}~至今` */ this.$t('Chart.data_tip_since', { date: data.start_date });
+      }
+
+      // this.handleComputed();
+    },
+
     getChartInfo() {
       this.getDetailHandle();
     },
@@ -542,13 +626,13 @@ export default {
 
         this.initIntervalAnalysisChartData(res.Data)
         // 展开左侧目录树
-        this.defaultShowNodes=res.Data.ClassifyLevels||[]
+        this.defaultShowNodes = res.Data.ClassifyLevels || []
         //设置tree高亮
-				this.$nextTick(()=>{
-					setTimeout(() => {
-						this.$refs.menuTree.setCurrentKey(res.Data.ChartInfo.UniqueCode);
-					}, 1000);
-				})
+        this.$nextTick(() => {
+          setTimeout(() => {
+            this.$refs.menuTree.setCurrentKey(res.Data.ChartInfo.UniqueCode);
+          }, 1000);
+        })
 
       })
     },
@@ -575,11 +659,15 @@ export default {
         spinner: 'el-icon-loading',
         background: 'rgba(255, 255, 255, 0.8)',
       });
-      apiIntervalAnalysis.chartRefresh({
-        ChartInfoId: e.ChartInfoId,
-      }).then((res) => {
+      const params = {
+        ChartInfoId: e === 'detail' ? this.chartInfo.ChartInfoId : e.ChartInfoId
+      }
+      apiIntervalAnalysis.chartRefresh(params).then((res) => {
         this.refreshLoading.close();
         if (res.Ret === 200) {
+          if (e === 'detail') {
+            this.getChartInfo()
+          }
           this.$message.success(res.Msg);
         }
       });
@@ -592,12 +680,12 @@ export default {
     },
 
     /* 编辑图表 */
-    editChartHandle() {
+    editChartHandle(e) {
       this.$router.push({
         path: '/rangeAnalysisChartEditor',
         query: {
-          code: this.chartInfo.UniqueCode,
-          id: this.chartInfo.ChartInfoId
+          code: e.UniqueCode,
+          id: e.ChartInfoId
         }
       })
     },
@@ -624,22 +712,22 @@ export default {
       }
     },
 
-    copyChartHandle:_.debounce(function(type){
-      let chartsName = this.currentLang=='zh'?this.chartInfo.ChartName:this.chartInfo.ChartNameEn
-      let { heightNum, widthNum , newTitle , dynamic_copyOptions} = this.dynamicWidthAndHeight(type,this.chartInfo.ChartType,chartsName,1)
+    copyChartHandle: _.debounce(function (type) {
+      let chartsName = this.currentLang == 'zh' ? this.chartInfo.ChartName : this.chartInfo.ChartNameEn
+      let { heightNum, widthNum, newTitle, dynamic_copyOptions } = this.dynamicWidthAndHeight(type, this.chartInfo.ChartType, chartsName, 1)
       const chartType = 'seasonLegend';
       // 英文转SVG设置变动
-      if(this.currentLang == 'en'){
+      if (this.currentLang == 'en') {
         // 如果竖轴坐标单位为'英文单位'，表示客户没填，转成svg时置为空
         this.$refs.chartRef.chart.options.yAxis.forEach(it => {
-          if(it.title.text == '英文单位') it.title.text='' 
+          if (it.title.text == '英文单位') it.title.text = ''
         });
       }
       let svg = this.$refs.chartRef.chart.getSVG({
-        chart:{
-          width:widthNum,
-          height:heightNum,
-          backgroundColor:"rgba(255, 255, 255, 0)",
+        chart: {
+          width: widthNum,
+          height: heightNum,
+          backgroundColor: "rgba(255, 255, 255, 0)",
         },
         title: {
           text: newTitle,
@@ -648,17 +736,17 @@ export default {
             fontSize: '18px'
           }
         },
-        legend:{
+        legend: {
           ...copyOtherOptions[chartType],
           ...dynamic_copyOptions[chartType]
-          }
+        }
       });
-      this.copyBlobItem(widthNum,heightNum,svg,type);
-    },500),
+      this.copyBlobItem(widthNum, heightNum, svg, type);
+    }, 500),
 
     copyChartConfirm(type) {
       type !== "url" && this.copyChartHandle(type);
-      
+
       type == "url" && this.shareUrl();
     },
 
@@ -700,6 +788,96 @@ export default {
 .pub-chart-box .data-sheet-main .main-left {
   width: 400px;
 }
+.main-right {
+  .chart-detail-wrapper {
+    .cont-top {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      box-shadow: 0px 3px 6px rgba(167, 167, 167, 0.09);
+      .top-left {
+        .year-btn {
+          margin-right: 5px;
+          margin-bottom: 5px;
+        }
+        .btn-sty {
+          border: 1px solid #409eff;
+        }
+        .date-setting {
+          border: 1px solid #dcdfe6;
+          border-radius: 4px;
+          cursor: pointer;
+          color: #333333;
+          line-height: 16px;
+        }
+      }
+      .top-right {
+        font-size: 16px;
+        .join_txt {
+          color: #409eff;
+          cursor: pointer;
+          &:hover {
+            text-decoration: underline;
+          }
+        }
+        .collected {
+          color: #f00;
+          cursor: pointer;
+          &:hover {
+            text-decoration: underline;
+          }
+        }
+        .span-item {
+          color: #409eff;
+          cursor: pointer;
+          &:hover {
+            text-decoration: underline;
+          }
+          .el-icon-collection,
+          .el-icon-document-copy {
+            color: #409eff;
+          }
+        }
+      }
+    }
+    @media screen and (min-width: 1711px) {
+      .min-data-input {
+        margin-top: 310px;
+      }
+      .btn-sty {
+        padding: 10px;
+      }
+      .year-btn,
+      .btn-sty {
+        font-size: 14px;
+      }
+    }
+    @media screen and (max-width: 1710px) {
+      .min-data-input {
+        margin-top: 230px;
+      }
+      .year-btn {
+        font-size: 12px;
+        margin-left: 5px;
+        margin-right: 5px;
+        margin-bottom: 5px;
+        padding: 6px 12px;
+      }
+      .btn-sty {
+        font-size: 12px;
+        margin-left: 5px;
+        padding: 6px;
+        border: 1px solid #409eff;
+      }
+      .date-setting {
+        width: 180px;
+        height: 36px;
+        padding: 10px;
+        font-size: 12px;
+      }
+    }
+  }
+}
 </style>
 
 <style lang="scss">