Merge branch 'ETA1.0.3'

src/api/modules/chartApi.js

@@ -870,6 +870,34 @@ const dataBaseInterface = {
 	getDataSource:(params)=>{
 		return http.get('datamanage/edb_source/list',params)
 	},
+	/**
+	 * 指标图表列表
+	 * @param {Number} PageSize 
+	 * @param {Number} CurrentIndex
+	 * @param {Number} ClassifyId
+	 * @param {Number} AdminId
+	 * @param {Boolean} IsOnlyMe
+	 */
+	getEdbChartList:(params)=>{
+		return http.get('/datamanage/edb_info/chart/list',params)
+	},
+	/**
+	 * 保存指标上下限
+	 * @param {*} params 
+	 * @returns 
+	 */
+	saveEdbChartLimit:(params)=>{
+		return http.post('/datamanage/edb_info/modify',params)
+	},
+	/**
+	 * 保存指标缩略图
+	 * @param {Number} EdbInfoId 
+	 * @param {String} ImageUrl 
+	 * @returns 
+	 */
+	saveEdbChartImg:(params)=>{
+		return http.post('/datamanage/edb_info/image/set',params)
+	}
 	
 }
 

src/views/dataEntry_manage/databaseComponents/chartTrendRender.vue

@@ -0,0 +1,776 @@
+<template>
+	<div class="chart-trend-render">
+		<div class="header">
+			<template v-if="chart_type===1">
+				<el-button
+					type="primary"
+					v-for="item in yearSelector"
+					:key="item.value"
+					size="mini"
+					:plain="item.value !== year_select"
+					class="year-btn"
+					@click.native="changeYear(item)"
+					>{{ item.name }}</el-button
+				>
+				<el-button type="primary" plain size="mini" class="btn-sty" @click="openDateDia">{{
+					dateTip
+				}}</el-button>
+				<el-button type="primary" plain size="mini" class="btn-sty" @click="showOnChart('toggle')" v-if="!isOnlyShowBaseChart">
+					<!-- <i class="el-icon-view"></i> -->
+					{{ isShowOnyearData ? '隐藏同比图' : '展示同比图'}}
+				</el-button>
+			</template>
+			<!-- 季节图时间选择 -->
+			<template v-else-if="chart_type===2">
+				<date-picker
+						v-model="season_year"
+						type="month"
+						value-type="format"
+						range
+						placeholder="年份日期选择"
+						@change="getDataByPath"
+				/>
+			</template>
+			<el-button type="primary" plain size="mini" class="btn-sty" style="margin-left:auto;"
+				@click="chartTypeChange" v-if="!isOnlyShowBaseChart">
+				<i class="el-icon-sort" style="transform: rotate(90deg);"></i>
+				切换{{chart_type==1?'季节性图':'曲线图'}}
+			</el-button>
+		</div>
+		<div class="min-wrapper">
+			<div class="chartWrapper" id="chartWrapper" v-if="showChart">
+				<Chart :options="options" ref="chartRef" @clickYAxisTitle="clickYAxisTitle"/>
+				<div class="range-cont left" v-if="leftIndex != -1">
+					<el-input
+						style="width: 80px; display: block"
+						size="mini"
+						type="number"
+						placeholder="上限"
+						v-model="chartInfo.MaxValue"
+						@change="() => { chart_type===1?setOptions():setSeasonOptions() }"
+					/>
+					<el-input
+						class="min-data-input"
+						size="mini"
+						type="number"
+						placeholder="下限"
+						v-model="chartInfo.MinValue"
+						@change="() => { chart_type===1?setOptions():setSeasonOptions() }"
+					/>
+				</div>
+				<div class="range-cont right" v-if="isShowOnyearData">
+					<el-input
+						style="width: 80px; display: block"
+						size="mini"
+						type="number"
+						placeholder="上限"
+						v-model="limitData.rightMax"
+						@change="changeLimit"
+					/>
+					<el-input
+						class="min-data-input"
+						size="mini"
+						type="number"
+						placeholder="下限"
+						v-model="limitData.rightMin"
+						@change="changeLimit"
+					/>
+				</div>
+				<!-- 公历农历切换 只用于季节性图 -->
+				<div style="text-align:center;">
+					<el-radio-group
+							v-model="calendar_type"
+							class="calendar-cont"
+							v-if="chart_type===2"
+							@change="getDataByPath"
+					>
+							<el-radio-button label="公历" />
+							<el-radio-button label="农历" />
+					</el-radio-group>
+				</div>
+			</div>
+		</div>
+		<div class="table-data">
+
+		</div>
+		<!-- 自定义时间段选择弹窗 -->
+		<DateChooseDia
+			:isDateDia="isDateDia"
+			:dateForm="dateForm"
+			@cancel="isDateDia = false"
+			@dateBack="dataChangeBack"
+		/>
+	</div>
+</template>
+
+<script>
+import { dataBaseInterface } from '@/api/api.js';
+import * as supplyApi from '@/api/modules/supplyApi.js';
+import { yearSelector,defaultOpts,seasonOptions } from '@/utils/defaultOptions'
+import Chart from '../components/chart'
+import DateChooseDia from '../components/DateChooseDia';
+import Highcharts from 'highcharts'
+export default {
+	components: { Chart,DateChooseDia },
+	props: {
+		edbid: {
+			type: Number,
+		},
+		// 语言 ch/en
+		chartLang:{
+			type: String,
+			default:()=> 'ch'
+		}
+	},
+	computed: {
+
+		// 同比，环比，环差，超季节性、 残差展示基础图
+		isOnlyShowBaseChart() {
+			return [6,12,13,35,37].includes(this.chartInfo.Source)
+		}
+	},
+	watch: {
+		edbid(newval){
+			if(newval){
+				this.chart_type = 1
+				this.isShowOnyearData = false
+				this.getDataByPath()
+			}
+		}
+	},
+	data () {
+		return {
+			year_select: 10, //年份选择项 默认全部
+			yearSelector: [
+				{
+					name: '全部',
+					value: 10,
+				},
+				...yearSelector,
+			],
+			select_date: [], // 自定义时间段项
+
+			options: {},
+			showChart: false,
+			chart_type: 1,// 1曲线 2季节
+			isShowOnyearData: false, //是否展示同比
+			chartInfo: {},
+			dataList: [],
+			leftIndex: 0,
+
+			season_year:[],//季节图日期选择
+			calendar_type:'公历',
+
+			/* 日期弹窗 */
+			isDateDia: false, // 时间段弹窗
+			dateForm: {},
+			dateTip: '请选择时间段',
+			limitData: {
+				letMin: 0,
+				leftMax: 0,
+				rightMin: 0,
+				rightMax: 0,
+			},
+			oldOptions: {
+				MinValue: 0,
+				MaxValue: 0
+			},
+		};
+	},
+	methods: {
+		
+		getDataByPath() {
+			const apiMap = {
+				'/database': this.getEdbData,
+				'/analyseVariety': this.getPlantEdbData
+			}
+
+			apiMap[this.$route.path]()
+		},
+
+		/* 获取指标所有数据 */
+		async getEdbData() {
+			let params = {
+				EdbInfoId: this.edbid,
+				DateType: this.year_select,
+				StartDate: this.select_date[0] || '',
+				EndDate: this.select_date[1] || ''
+			}
+
+			const res = this.chart_type === 1 
+				? await dataBaseInterface.ebd_data(params)
+				: await dataBaseInterface.ebdSeasonData({
+						EdbInfoId: this.edbid,
+						Calendar: this.calendar_type,
+						StartDate: this.season_year[0] || '',
+						EndDate: this.season_year[1] || '',
+					})
+				
+				if(res.Ret !== 200) return
+					const { DataList,EdbInfo } = res.Data;
+					// DataList 表格数据列表
+					this.chartInfo = (this.oldOptions.MinValue || this.oldOptions.MaxValue) ? {
+						...EdbInfo,
+						...this.oldOptions
+					} : EdbInfo;
+					this.tableData = DataList || [];
+
+					this.chart_type === 1 ? this.setOptions() : this.setSeasonOptions();
+					this.showChart = true;
+					this.$nextTick(()=>{
+						if(!EdbInfo.ChartImage){
+							//设置图表缩略图
+							this.saveEdbImg(EdbInfo)
+						}
+					})
+		},
+		//保存指标缩略图
+		async saveEdbImg(EdbInfo){
+			let svg = this.$refs.chartRef.chart.getSVG({
+				chart: {
+					width: 340,
+					height: 230,
+				},
+			});
+			let form = new FormData();
+			form.append("Img", svg);
+			let { Data } = await dataBaseInterface.uploadImgSvg(form);
+			await dataBaseInterface.saveEdbChartImg({
+				EdbInfoId: EdbInfo.EdbInfoId,
+				ImageUrl: Data.ResourceUrl,
+			});
+		},
+
+		/* 获取装置指标数据 */
+		async getPlantEdbData() {
+			let params = {
+				VarietyEdbId: this.edbid,
+				DateType: this.year_select,
+				StartDate: this.select_date[0] || '',
+				EndDate: this.select_date[1] || ''
+			}
+
+			const res = this.chart_type === 1 
+				? await supplyApi.getEdbDetailData(params)
+				: await supplyApi.getEdbSeasonData({
+						VarietyEdbId: this.edbid,
+						Calendar: this.calendar_type,
+						StartDate: this.season_year[0] || '',
+						EndDate: this.season_year[1] || '',
+					})
+				
+				if(res.Ret !== 200) return
+					const { DataList,EdbInfo } = res.Data;
+					// DataList 表格数据列表
+					this.chartInfo = (this.oldOptions.MinValue || this.oldOptions.MinValue) ? {
+						...EdbInfo,
+						...this.oldOptions
+					} : EdbInfo;
+					this.tableData = DataList || [];
+
+					this.chart_type === 1 ? this.setOptions() : this.setSeasonOptions();
+					this.showChart = true;
+		},
+
+		 /* 年份改变 重新刷新图表接口  保存当前的图表配置和上下限 只改变图表 */
+    changeYear(item) {
+      this.year_select = item.value;
+      this.select_date = [];
+      this.dateTip = '请选择时间段';
+
+			const { MinValue,MaxValue } = this.chartInfo;
+			this.oldOptions = {
+				MinValue: Number(MinValue),
+				MaxValue: Number(MaxValue)
+			}
+      this.getDataByPath()
+    },
+
+		/* 打开时间段弹窗 */
+    openDateDia() {
+      // 自定义时间段回显
+      this.dateForm = {
+        date_type: this.year_select,
+        start_date:
+          this.year_select === 5 || this.year_select === 6
+            ? this.select_date[0]
+            : '',
+        end_date: this.year_select === 5 ? this.select_date[1] : '',
+      };
+      this.isDateDia = true;
+    },
+
+    /* 保存完自定义日期 刷新数据 保存当前的图表配置和上下限 只改变图表*/
+    dataChangeBack(data) {
+      this.year_select = data.dateType;
+      this.isDateDia = false;
+      this.select_date = [data.start_date, data.end_date];
+
+      this.dateTip =
+        data.dateType === 5
+          ? `${data.start_date}~${data.end_date}`
+          : `${data.start_date}~至今`;
+
+			const { MinValue,MaxValue } = this.chartInfo;
+			this.oldOptions = {
+				MinValue,
+				MaxValue
+			}
+      this.getDataByPath();
+    },
+
+		chartTypeChange() {
+			this.chart_type = this.chart_type===1 ? 2 : 1;
+			this.init('no_reset')
+			this.getDataByPath();
+		},
+
+		// 展示同比图
+		async showOnChart(scene='') {
+			if(scene==='toggle') {
+				this.isShowOnyearData = this.isShowOnyearData ? false : true;
+				if(!this.isShowOnyearData){
+					const { MinValue,MaxValue } = this.chartInfo;
+					this.oldOptions = {
+						MinValue: Number(MinValue),
+						MaxValue: Number(MaxValue)
+					}
+					this.getDataByPath();
+				}  
+			}
+			if(!this.isShowOnyearData) return;
+
+			let params = {
+				DateType: this.year_select,
+				StartDate: this.select_date[0] || '',
+				EndDate: this.select_date[1] || ''
+			}
+			const res = this.$route.path === '/analyseVariety' 
+				? await supplyApi.getEdbOnyearData({VarietyEdbId:this.edbid,...params})
+				: await dataBaseInterface.edbOnyearData({EdbInfoId: this.edbid,...params});
+
+			if(res.Ret !== 200) return
+
+			const { EdbInfo,DataList } = res.Data;
+
+			if(!this.limitData.rightMin && !this.limitData.rightMax) {
+				this.limitData.rightMin = Number(EdbInfo.MinValue);
+				this.limitData.rightMax = Number(EdbInfo.MaxValue);
+			}
+
+			this.options.yAxis.push({
+				title: {
+					text: '',
+					align: 'high',
+					rotation: 0,
+					y: -15,
+					offset: 0
+				},
+				labels: {
+					formatter: function (ctx) {
+						return ctx.value;
+					},
+					align: 'center',
+				},
+				min: Number(this.limitData.rightMin),
+				max: Number(this.limitData.rightMax),
+				...seasonOptions.yAxis,
+				opposite: true,
+			})
+
+			this.options.series.push({
+				data: DataList.map(item=>([item.DataTimestamp, item.Value])),
+				type: 'spline',
+				yAxis: 1,
+				name: this.chartLang=='ch'?`${EdbInfo.EdbName}同比`:EdbInfo.EdbNameEn?`${EdbInfo.EdbNameEn}同比`:'无英文名称',
+				lineWidth: 1
+			})
+			console.log(this.options.series)
+		},
+
+		changeLimit() {
+			const { rightMax,rightMin } = this.limitData;
+			this.options.yAxis[1].max = Number(rightMax);
+			this.options.yAxis[1].min = Number(rightMin);
+
+		},
+
+		/* 图表配置 曲线*/
+		setOptions() {
+			const chartData = _.cloneDeep(this.tableData);
+
+      //拼接标题 数据列
+      let data = [],
+        ydata = [];
+
+			//y轴
+
+			// 单位 中文时 为无不显示   英文时 为空提示点击输入
+			// 中文不存在或等于无时 英文显示为空  中文存在且英文不存在时 显示'英文单位'
+			let yTitleText = this.chartLang=='ch'?
+			(this.chartInfo.Unit && this.chartInfo.Unit!='无') ? this.chartInfo.Unit:'':
+			!this.chartInfo.UnitEn && this.chartInfo.Unit && this.chartInfo.Unit!='无' ? '英文单位':this.chartInfo.UnitEn
+			// title样式  英文为空时，提示文字样式  英文可以点击设置
+			let yTitleStyle = {}
+			if(this.chartLang=='en'){
+				yTitleStyle.cursor='pointer'
+				if(yTitleText=='英文单位'){
+					yTitleStyle.color="#999"
+				}
+			}
+			let yItem = {
+				title: {
+					text: yTitleText,
+					align: 'high',
+					rotation: 0,
+					y: -15,
+					offset: 0,
+					style:yTitleStyle
+				},
+				labels: {
+					formatter: function (ctx) {
+						return ctx.value;
+					},
+					align: 'center',
+				},
+				min: Number(this.chartInfo.MinValue),
+				max: Number(this.chartInfo.MaxValue),
+				...seasonOptions.yAxis,
+			};
+			// 图例名称和图例文字样式
+			let dataName = this.chartLang=='ch'?this.chartInfo.EdbName:this.chartInfo.EdbNameEn?this.chartInfo.EdbNameEn:'无英文名称'
+			let color = this.chartLang=='en'&&(!this.chartInfo.EdbNameEn)?'#999':'#333'
+			let legend={
+				...defaultOpts.legend,
+				itemStyle: {
+					color
+				},
+			}
+			//数据列
+			let obj = {
+				data: [],
+				type: 'spline',
+				yAxis: 0,
+				name: dataName,
+				lineWidth: 3
+			};
+			chartData.forEach((item, index) => {
+				obj.data.push([item.DataTimestamp, item.Value]);
+			});
+			
+			data.push(obj);
+			ydata.push(yItem);
+
+      // 范围为1年内 x轴显示为月/日 否则默认年/月
+      let xAxis = {};
+      const bool_time = this.xTimeDiffer();
+      xAxis = bool_time
+        ? {
+            ...defaultOpts.xAxis,
+            labels: {
+              formatter: function (ctx) {
+                return Highcharts.dateFormat('%m/%d', ctx.value);
+              },
+            },
+          }
+        : {
+            ...defaultOpts.xAxis,
+						labels: {
+              formatter: function (ctx) {
+                return Highcharts.dateFormat('%y/%m', ctx.value);
+              },
+            },
+          };
+      this.options = {
+        series: data,
+        yAxis: ydata,
+        xAxis,
+				legend
+      };
+
+			this.showOnChart();
+		},
+
+		/* 季节图 */
+		setSeasonOptions() {
+			console.log(this.tableData)
+      const chartData = _.cloneDeep(this.tableData);
+      let seasonYdata = [],
+        seasonData = [];
+
+        /* 公历数据处理 处理数据列 y轴 */
+        if (this.calendar_type === '公历')
+        for (let j of chartData) {
+          
+          let serie_item = {
+            data: [],
+            type: 'spline',
+            yAxis: 0,
+            name: j.Year,
+          };
+          const data_array = _.cloneDeep(j.DataList);
+          data_array &&
+            data_array.forEach((item) => {
+              serie_item.data.push([item.DataTimestamp, item.Value]);
+            });
+          const index = chartData.findIndex(
+            (item) => item.Year === j.Year
+          );
+          const s_yItem = {
+            labels: {
+              formatter: function () {
+                let val = this.value;
+                return index !== 0 ? '' : val;
+              },
+              align: 'center',
+            },
+            title: {
+              text:  this.chartLang=='ch'?this.chartInfo.Unit:
+							!this.chartInfo.UnitEn && this.chartInfo.Unit && this.chartInfo.Unit!='无' ? '英文单位':this.chartInfo.UnitEn,
+              align: 'high',
+              rotation: 0,
+              y: -15,
+              offset: -(12 * this.chartInfo.Unit.length),
+            },
+            max: Number(this.chartInfo.MaxValue),
+            min: Number(this.chartInfo.MinValue),
+            ...seasonOptions.yAxis,
+          };
+          seasonData.push(serie_item);
+          seasonYdata.push(s_yItem);
+        }
+
+      /* 农历数据处理  */
+      let filterArr =
+        this.calendar_type === '农历'
+          ? chartData.List.filter((item, index) => index > 0)
+          : [];
+      if (this.calendar_type === '农历')
+        for (let j of filterArr) {
+
+          let serie_item = {
+            data: [],
+            type: 'spline',
+            yAxis: 0,
+            name: j.Year
+          };
+          const data_array = _.cloneDeep(j.Items);
+          data_array &&
+            data_array.forEach((item) => {
+              serie_item.data.push([item.DataTimestamp, item.Value]);
+            });
+          const index = filterArr.findIndex((item) => item.Year === j.Year);
+          const s_yItem = {
+            labels: {
+              formatter: function () {
+                let val = this.value;
+                return index !== 0 ? '' : val;
+              },
+              align: 'center',
+            },
+            title: {
+              text:  this.chartLang=='ch'?this.chartInfo.Unit:
+							!this.chartInfo.UnitEn && this.chartInfo.Unit && this.chartInfo.Unit!='无' ? '英文单位':this.chartInfo.UnitEn,
+              align: 'high',
+              rotation: 0,
+              y: -15,
+              offset: -(12 * this.chartInfo.Unit.length),
+            },
+            max: Number(this.chartInfo.MaxValue),
+            min: Number(this.chartInfo.MinValue),
+            ...seasonOptions.yAxis,
+          };
+          seasonData.push(serie_item);
+          seasonYdata.push(s_yItem);
+        }
+
+      /* x轴显示月日  提示框显示月日*/
+      defaultOpts.xAxis.labels = {
+        formatter: function () {
+          return Highcharts.dateFormat('%m/%d', this.value);
+        },
+      };
+      
+      const tooltip = {
+        ...defaultOpts.tooltip,
+        dateTimeLabelFormats: {
+          // 时间格式化字符
+          day: '%m/%d',
+          week: '%m/%d',
+          month: '%m/%d',
+          year: '%m/%d',
+        },
+        xDateFormat: '%m/%d',
+      }
+      let rangeSelector =
+        this.calendar_type === '农历'
+          ? {
+              enabled: true,
+              selected: 0,
+              inputStyle: {
+                display: 'none',
+              },
+              labelStyle: {
+                display: 'none',
+              },
+              buttonTheme: {
+                style: {
+                  display: 'none',
+                },
+              },
+              buttons: [
+                {
+                  type: 'month',
+                  count: 12,
+                  text: '12月',
+                },
+                {
+                  type: 'month',
+                  count: 15,
+                  text: '15月',
+                },
+                {
+                  type: 'all',
+                  text: '全部',
+                  type: 'all',
+                },
+              ],
+            }
+          : {
+              enabled: false,
+            };
+
+      this.options = {
+        colors:
+          this.calendar_type === '公历'
+            ? seasonOptions.colors.slice(-chartData.length)
+            : seasonOptions.colors.slice(-filterArr.length),
+        series: seasonData,
+        yAxis: seasonYdata,
+        rangeSelector,
+        tooltip
+      };
+			console.log(this.options)
+		},
+
+	  /* 查询范围为1年内 x轴显示为月/日 否则默认年/月 */
+    xTimeDiffer() {
+      const end_date =
+        this.year_select === 5
+          ? this.select_date[1]
+          : this.year_select === 6
+          ? new Date()
+          : '';
+      //年限差
+      const year_differ = this.$moment(end_date).diff(
+        this.$moment(this.select_date[0]),
+        'years',
+        true
+      );
+      // console.log(year_differ)
+      if ([5, 6].includes(this.year_select) && year_differ <= 1) {
+        return true;
+      } else {
+        return false;
+      }
+    },
+
+		init(type='') {
+			if(type!=='no_reset') this.chart_type = 1;
+			this.isShowOnyearData = false;
+			this.year_select = 10;
+			this.select_date = [];
+			this.options = {};
+			this.dateTip = '请选择时间段';
+			this.oldOptions = {};
+			this.calendar_type = '公历';
+			this.season_year = [];
+			this.limitData = {
+				letMin: 0,
+				leftMax: 0,
+				rightMin: 0,
+				rightMax: 0,
+			}
+		},
+		// 编辑英文信息弹窗
+		editEnName(){
+			this.$emit('editEnName','chart')
+		},
+		// 竖轴标题点击事件
+		clickYAxisTitle(){
+			console.log(this.chartLang);
+			if(this.chartLang == 'en') this.editEnName()
+		}
+	},
+	created() {},
+	mounted() {},
+}
+</script>
+<style lang='scss'>
+.chart-trend-render {
+	width:100%;
+	box-sizing: border-box;
+	@media screen and (min-width: 1711px) {
+		.min-data-input { margin-top: 300px; }
+	}
+	@media screen and (max-width:1710px) {
+		.min-data-input { margin-top: 210px; }
+	}
+	.header {
+		display: flex;
+		position: relative;
+		.year-btn,.btn-sty {
+			min-width: 98px;
+			font-size: 14px;
+			margin-right: 5px;
+			margin-bottom: 5px;
+		}
+		.btn-sty {
+			background-color: #fff;
+			color: #0052D9;
+		}
+		.change-chart-btn{
+				float: right;
+				color: #409eff;
+				font-size: 16px;
+				cursor: pointer;
+				&::before{
+						content:'';
+						display: inline-block;
+						width: 18px;
+						height: 18px;
+						background-image: url('~@/assets/img/chart_m/change.png');
+						background-size: cover;
+						position: relative;
+						top: 4px;
+						right: 4px;
+				}
+		}
+	}
+	.min-wrapper {
+		.el-input__inner {
+			padding: 0 0 0 5px;
+		}
+		/* margin: 20px 0 0 0; */
+		min-height: 320px;
+		.chartWrapper {
+			position: relative;
+			padding: 0 105px 0 100px;
+			.range-cont {
+				position: absolute;
+				top: 8%;
+				.min-data-input {
+					width: 80px;
+					display: block;
+				}
+				&.left {
+					left: 0px;
+				}
+				&.right {
+					right: 0;
+				}
+			}
+		}
+	}
+}
+</style>

src/views/dataEntry_manage/databaseComponents/createChart.vue

@@ -217,7 +217,7 @@ export default {
 				if(res.Ret !== 200) return
 					const { DataList,EdbInfo } = res.Data;
 					// DataList 表格数据列表
-					this.chartInfo = (this.oldOptions.MinValue || this.oldOptions.MinValue) ? {
+					this.chartInfo = (this.oldOptions.MinValue || this.oldOptions.MaxValue) ? {
 						...EdbInfo,
 						...this.oldOptions
 					} : EdbInfo;

src/views/dataEntry_manage/databaseComponents/edbDetailData.vue

@@ -0,0 +1,150 @@
+<template>
+	<div class="edb-detail-data-wrap">
+		<el-table
+			:data="tableData"
+			class="firstColumTable" border>
+			<el-table-column
+				v-for="item in tableColumsOne"
+				:key="item.label"
+				:width="item.widthsty"
+				:min-width="item.minwidthsty"
+				align="center">
+				<template slot="header" slot-scope="scope">
+					<div class="chartEn-mark" style="top: -10px;" v-show="scope.$index ==0 && tableData[0] && tableData[0].IsEnEdb" >En</div>
+					<span>{{item.label}}</span>
+				</template>	
+				<template slot-scope="scope">
+					<span v-show="currentLang=='ch'">{{ scope.row[item.key] }}</span> 
+					<span v-show="currentLang=='en'">{{scope.row[item.enKey||item.key] || scope.row[item.key]}}</span>
+				</template>
+			</el-table-column>
+		</el-table>
+		<el-table
+			:data="tableData"
+			style="box-shadow: 0px 3px 6px rgba(155, 170, 219, 0.2);"
+			border>
+			<el-table-column
+				v-for="item in tableColumsTwo"
+				:key="item.label"
+				:label="item.label"
+				:width="item.widthsty"
+				:min-width="item.minwidthsty"
+				align="center"
+			>
+				<template #header>
+					<span>{{ item.label }}</span>
+				</template>
+				<template slot-scope="scope">
+					<span>{{ scope.row[item.key] }}</span>
+				</template>
+			</el-table-column>
+			<div slot="empty" style="padding: 50px 0 320px;">
+					<tableNoData :text="defaultWarn"/>
+			</div>
+		</el-table>
+		<ul 
+			class="value-ul" 
+			ref="valueUl" 
+			@scroll="scrollHandle" 
+			v-show="dataList.length">
+			<li
+				class="value-item"
+				v-for="item in dataList"
+				:key="item.EdbDataId"
+			>
+				<span class="value-label">
+					<span style="position: relative;">
+						<i class="new-tag" v-if="tableData[0].LatestDate===item.DataTime"></i>
+						{{item.DataTime}}
+					</span>
+				</span>
+				<span :class="['value-label',{'predict-act': tableData[0].DataInsertConfig.Date===item.DataTime}]" style="min-width:200px;text-align:center;">
+					<span :class="['value-style',{'predict-act': tableData[0].DataInsertConfig.Date===item.DataTime}]">{{item.Value}}</span>
+				</span>
+			</li>
+			<li class="nodata value-item" v-if="!dataList.length">暂无数据</li>
+		</ul>
+	</div>
+</template>
+
+<script>
+export default {
+	props:{
+		currentLang:{
+			type:String,
+			default:'ch'
+		},
+		tableData:{
+			type:Array,
+			default:()=>{return []}
+		},
+		tableColumsOne:{
+			type:Array,
+			default:()=>{return []}
+		},
+		tableColumsTwo:{
+			type:Array,
+			default:()=>{return []}
+		},
+		defaultWarn:{
+			type:String,
+			default:'暂无数据'
+		},
+		dataList:{
+			type:Array,
+			default:()=>{return []}
+		},
+		haveMore:{
+			type:Boolean,
+			default:false
+		}
+	},
+	data() {
+		return {
+
+		};
+	},
+	methods: {
+		/* 数值滚动加载 */
+		scrollHandle: _.throttle(function() {
+			let scrollTop = this.$refs.valueUl.scrollTop;
+			let clientHeight = this.$refs.valueUl.clientHeight;
+			let scrollHeight = this.$refs.valueUl.scrollHeight;
+			if(scrollTop===0) return
+			if(scrollTop + clientHeight >= scrollHeight-10 && this.haveMore){
+				this.$emit('getNextData')
+			}
+		},200),
+	},
+};
+</script>
+
+<style lang="scss">
+.edb-detail-data-wrap{
+    .el-table--enable-row-transition .el-table__body td{
+        background: #fff !important;
+    }
+    .el-table td, .el-table th.is-leaf {
+        background: #F2F6FA !important;
+    }
+
+}
+</style>
+<style scoped lang="scss">
+.edb-detail-data-wrap{
+	display: flex;
+	flex-direction: column;
+	height: 100%;
+	.firstColumTable{
+		box-shadow: 0px 3px 6px rgba(155, 170, 219, 0.2);
+	}
+	.el-table{
+		flex: none;
+	}
+	.value-ul{
+		/* flex: 1;
+		overflow-y: auto; */
+        overflow-y: auto;
+	}
+}
+</style>

src/views/dataEntry_manage/databaseList.vue

@@ -13,7 +13,7 @@
 				<el-button v-permission="permissionBtn.edbDataPermission.edbData_dataAdjust"
 					type="primary" @click="$router.push({path: '/adjustdata'})">数据调整</el-button>
 				<el-button v-permission="permissionBtn.edbDataPermission.edbData_batchUpdate"
-					type="primary" plain @click="updateHandler">一键更新</el-button>
+					type="primary" plain @click="updateHandler">一键刷新</el-button>
 			</div>
 			<div class="top-right">
 
@@ -119,23 +119,22 @@
 									@click.stop="addNode(node,data)"
 									v-if="data.Button.AddButton"
 								/>
-								<!--如果是分类，判断data.Button.OpButton不变；如果是指标，再加上checkPermissionBtn判断-->
+								<!--如果是分类，判断data.Button.OpButton不变；如果是指标，不显示(ETA1.0.3)-->
 								<img
 									src="~@/assets/img/set_m/edit.png"
 									alt=""
 									style="width: 15px; height: 14px; margin-right: 8px"
 									@click.stop="editNode(node,data)"
-									v-if="data.EdbCode
-										?(data.Button.OpButton&&permissionBtn.checkPermissionBtn(permissionBtn.edbDataPermission.edbData_edit))
-										:(data.Button.OpButton)"
+									v-if="!data.EdbCode&&(data.Button.OpButton)"
 								/>
+								<!--如果是分类，判断data.Button.DeleteButton不变；如果是指标，不显示(ETA1.0.3)-->
 								<img
 									slot="reference"
 									src="~@/assets/img/set_m/del.png"
 									alt=""
 									style="width: 14px; height: 14px;"
 									@click.stop="removeNode(node,data)"
-									v-if="data.Button.DeleteButton"
+									v-if="!data.EdbCode&&(data.Button.DeleteButton)"
 								/>
 								<i class="el-icon-view" v-if="data.EdbType===2&&![58,59,67,68].includes(data.Source)" @click.stop="viewNode(node,data)"></i>
 								<img 
@@ -174,62 +173,42 @@
 			<div class="main-right right" id="right" style="background:transparent;border:none;box-shadow:none" v-if="showAssociateComputeData">
 				<dataAssociateComputeData :edbInfoId="selected_edbid"></dataAssociateComputeData>
 			</div>
-			<div class="main-right right" id="right" v-show="!showAssociateChart&&!showAssociateComputeData">
-				<el-table
-				:data="tableData"
-				style="box-shadow: 0px 3px 6px rgba(155, 170, 219, 0.2);"
-				class="firstColumTable"
-				border>
-					<el-table-column
-						v-for="item in tableColumsOne"
-						:key="item.label"
-						:width="item.widthsty"
-						:min-width="item.minwidthsty"
-						align="center"
-					>
-						<template slot="header" slot-scope="scope">
-							<div class="chartEn-mark" style="top: -10px;" v-show="scope.$index ==0 && tableData[0] && tableData[0].IsEnEdb" >En</div>
-							<span>{{item.label}}</span>
-						</template>	
-						<template slot-scope="scope">
-							<!-- 中文 -->
-							<span v-show="currentLang=='ch'">{{ scope.row[item.key] }}</span> 
-							<span v-show="currentLang=='en'">{{scope.row[item.enKey||item.key] || scope.row[item.key]}}</span>
-						</template>
-					</el-table-column>
-				</el-table>
-				<el-table
-				:data="tableData"
-				style="box-shadow: 0px 3px 6px rgba(155, 170, 219, 0.2);"
-				border>
-					<el-table-column
-						v-for="item in tableColumsTwo"
-						:key="item.label"
-						:label="item.label"
-						:width="item.widthsty"
-						:min-width="item.minwidthsty"
-						align="center"
-					>
-						<template #header>
-							<span>{{ item.label }}</span>
-						</template>
-						<template slot-scope="scope">
-							<span>{{ scope.row[item.key] }}</span>
-						</template>
-					</el-table-column>
-					<el-table-column
-						width="260"
-						align="center"
-						label="操作"
-					>
-						<template slot-scope="scope">
-							<el-button v-permission="permissionBtn.edbDataPermission.edbData_update"
-								size="mini" type="text" @click="refreshTargetHandle" >更新</el-button>
-							<el-button 
-								v-permission="permissionBtn.edbDataPermission.edbData_edit"
-								size="mini" 
-								type="text" 
-								:disabled="!scope.row.Button.OpButton"
+			<!-- 指标图表列表 -->
+			<div class="main-right right list" id="right" v-show="isShowList">
+				<p>共{{Total||0}}个指标</p>
+				<div class="list-wrap" ref="listRef" @scroll="loadMoreHandle" v-if="Total">
+					<div class="list-item" v-for="item in chartList" :key="item.EdbInfoId">
+						<div class="header">
+							<span v-show="currentLang=='ch'">{{ item.EdbName }}</span> 
+							<span v-show="currentLang=='en'">{{ item.EdbNameEn || item.EdbName }}</span>
+						</div>
+						<div class="image" @click="detailShowHandle(item)">
+							<img :src="item.ChartImage" alt=""/>
+						</div>
+						<div class="info">
+							创建时间：{{item.CreateTime.substring(0,10)}}
+						</div>
+					</div>
+					<p style="height: 40px;line-height:40px;width: 100%;"></p>
+				</div>
+				<div v-if="!Total" class="nodata">
+					<tableNoData text="暂无指标"/>
+				</div>
+			</div>
+			<!-- 指标详情 -->
+			<div class="main-right right detail" id="right" v-show="isShowDetail">
+				<div class="header">
+					<el-tabs v-model="activeTab" @tab-click="rePainChart">
+						<el-tab-pane label="走势图" name="Chart">
+						</el-tab-pane>
+						<el-tab-pane label="数据详情" name="Data">
+						</el-tab-pane>
+					</el-tabs>
+					<div class="edb-tool">
+						<el-button v-if="isEdbBtnShow('update')"
+							type="text" @click="refreshTargetHandle" >刷新</el-button>
+						<el-button v-if="isEdbBtnShow('edit')"
+								type="text" :disabled="!(EdbData.Button.OpButton)"
 								@click="editNode({
 									level: 4,
 									parent: {
@@ -241,47 +220,73 @@
 											}
 										},
 									}
-								},scope.row)"
-								>编辑</el-button>
-							<el-button size="mini" type="text" @click.stop="reCalculateHandler" v-if="scope.row.EdbType===2" :loading="calculateLoading">重新计算</el-button>
-							<el-button v-if="permissionBtn.checkPermissionBtn(permissionBtn.edbDataPermission.edbData_toImgs)"
-								size="mini" type="text" @click.stop="createChartHandle(scope.row.EdbInfoId)">一键成图</el-button>
-							<el-button v-if="permissionBtn.checkPermissionBtn(permissionBtn.edbDataPermission.edbData_copyData)"
-								size="mini" type="text" @click="copyCode">复制数据</el-button>
-							<!-- <lookEdbHistory :showType="2" :edbId="selected_edbid" v-if="scope.row.EdbType===2"/> -->
-							<el-button size="mini" type="text"
-							v-if="scope.row.EdbType===2&&permissionBtn.checkPermissionBtn(permissionBtn.edbDataPermission.edbData_edbSource)" @click="isLookHistory=true;lookEdbId=selected_edbid">指标溯源</el-button>
-							
-							<el-button v-if="permissionBtn.checkPermissionBtn(permissionBtn.edbDataPermission.edbData_enNameSetting)"
-								size="mini" type="text" @click="openEnNameDia">设置英文名称</el-button>
-							<el-button size="mini" type="text" @click.stop="updateNewestDataHandle" 
-							v-if="scope.row.Button.InsertNewDataButton&&permissionBtn.checkPermissionBtn(permissionBtn.edbDataPermission.edbData_newestValue)" >{{scope.row.DataInsertConfig.Date?'编辑最新值':'添加最新值'}}</el-button>
-							<el-button size="mini" type="text" @click.stop="refreshBaseHandler" 
-								v-if="scope.row.EdbType===1&&permissionBtn.checkPermissionBtn(permissionBtn.edbDataPermission.edbData_refreshAll)" :loading="refreshLoading">全部刷新</el-button>
-						</template>
-					</el-table-column>
-					<div slot="empty" style="padding: 50px 0 320px;">
-						 <tableNoData :text="defaultWarn"/>
+								},EdbData)"
+							>编辑</el-button>
+						<!-- 指保存指标的上下限，在走势图才显示 -->
+						<el-button v-if="activeTab==='Chart'"
+							type="text" @click.stop="saveEdbLimit">保存</el-button>
+						<el-button v-if="isEdbBtnShow('setEn')"
+							type="text" @click="openEnNameDia">设置英文名称</el-button>
+						<el-button v-if="EdbData.Button.InsertNewDataButton&&isEdbBtnShow('newValue')"
+							type="text" @click.stop="updateNewestDataHandle" >{{(EdbData.DataInsertConfig.Date)?'编辑最新值':'添加最新值'}}</el-button>
+						<el-button v-if="EdbData.EdbType===2"
+							type="text" @click.stop="reCalculateHandler" :loading="calculateLoading">重新计算</el-button>
+						<el-button v-if="EdbData.EdbType===2&&isEdbBtnShow('toSource')"
+							type="text" @click="isLookHistory=true;lookEdbId=selected_edbid">指标溯源</el-button>
+						<el-button v-if="EdbData.EdbType===1&&isEdbBtnShow('refreshAll')"
+							type="text" @click.stop="refreshBaseHandler" :loading="refreshLoading">全部刷新</el-button>
+						<el-button v-if="isEdbBtnShow('copyData')"
+							type="text" @click="copyCode">复制数据</el-button>
+						<el-button v-if="EdbData.Button.DeleteButton"
+							type="text" @click="removeNode(_,EdbData)" style="color:#C54322;">删除</el-button>
 					</div>
-				</el-table>
-				<ul 
-				class="value-ul" 
-				ref="valueUl" 
-				@scroll="scrollHandle" 
-				v-show="showTable&&dataList.length">
-					<li
-						class="value-item"
-						v-for="item in dataList"
-						:key="item.EdbDataId"
-					>
-						<span class="value-label">
-							<i class="new-tag" v-if="tableData[0].LatestDate===item.DataTime"></i>
-							{{item.DataTime}}
-						</span>
-						<span :class="['value-label',{'predict-act': tableData[0].DataInsertConfig.Date===item.DataTime}]" style="min-width:200px;text-align:center;">{{item.Value}}</span>
-					</li>
-					<li class="nodata value-item" v-if="!dataList.length">暂无数据</li>
-				</ul>
+				</div>
+				<div class="container" id="detail-container">
+					<div class="chart" v-show="activeTab==='Chart'">
+						<chart-trend-render
+							:edbid="selected_edbid"
+							:chartLang="currentLang"
+							ref="createChart"
+							@editEnName="openEnNameDia"/>
+						<div class="info">
+							<span>数据来源：{{EdbData.SourceName}}</span>
+							<span>添加人：{{EdbData.SysUserRealName}}</span>
+						</div>
+						<ul class="value-ul"
+							v-show="showTable&&dataList.length">
+							<li class="value-item" style="background-color: #EBEFF6;">
+								<span style="width:240px">日期（频度：{{EdbData.Frequency}}）</span>
+								<span style="flex:1;">值</span>
+							</li>
+							<li class="value-item"
+								v-for="item in dataList.slice(0,3)"
+								:key="item.EdbDataId">
+								<span class="value-label date" style="width:240px">
+									<span style="position: relative;">
+										<i class="new-tag" v-if="EdbData.LatestDate===item.DataTime"></i>
+										{{item.DataTime}}
+									</span>
+								</span>
+								<span :class="['value-label',{'predict-act': EdbData.DataInsertConfig.Date===item.DataTime}]" style="flex:1;">
+									<span :class="['value-style',{'predict-act': EdbData.DataInsertConfig.Date===item.DataTime}]">{{item.Value}}</span>
+								</span>
+							</li>
+							<li class="nodata value-item" v-if="!dataList.length">暂无数据</li>
+						</ul>
+					</div>
+					<div class="list" v-show="activeTab==='Data'">
+						<edb-detail-data 
+							ref="edb_detail_data"
+							:current-lang="currentLang"
+							:table-data="tableData"
+							:table-colums-one="tableColumsOne"
+							:table-colums-two="tableColumsTwo"
+							:data-list="dataList"
+							:haveMore="haveMore"
+							@getNextData="()=>{page_no++;getDataList();}"
+						/>
+					</div>
+				</div>
 			</div>
 		</div>
 		<!-- 输入英文指标弹窗 -->
@@ -369,14 +374,14 @@
 			@changeSource="changeComputedType"
 		/>
 		<!-- 一键成图弹窗 -->
-		<create-chart
+		<!-- <create-chart
 			:isCreateChart="isCreateChart"
 			:edbid="selected_edbid"
 			:chartLang="currentLang"
 			ref="createChart"
 			@close="isCreateChart = false"
 			@editEnName="openEnNameDia"
-		/>
+		/> -->
 
 		<!-- 一键更新弹窗 -->
 		<update-dialog
@@ -469,6 +474,8 @@ import batchComputedDialog from './databaseComponents/batchComptedDialog.vue';
 import diffusionIndexDialog from './databaseComponents/diffusionIndexDia.vue';
 import updateNewestDataDia from './databaseComponents/updateNewestDia.vue';
 import EdbLabelList from '@/components/edbLabelList.vue';
+import chartTrendRender from './databaseComponents/chartTrendRender.vue';
+import edbDetailData from './databaseComponents/edbDetailData.vue';
 export default {
 	name: '',
 	components: { 
@@ -489,7 +496,9 @@ export default {
 		batchComputedDialog,
 		diffusionIndexDialog,
 		updateNewestDataDia,
-		EdbLabelList
+		EdbLabelList,
+		chartTrendRender,
+		edbDetailData
 	},
 	directives: {
     drag(el, bindings) {
@@ -580,7 +589,7 @@ export default {
 				{
 					label: '指标目录',
 					key: 'Menu',
-					minwidthsty: '117px',
+					minwidthsty: '150px',
 				},
 				{
 					label: '起始时间',
@@ -590,12 +599,12 @@ export default {
 				{
 					label: '更新时间',
 					key: 'ModifyTime',
-					minwidthsty: '118px',
+					minwidthsty: '120px',
 				},
 				{
 					label: '添加人',
 					key: 'SysUserRealName',
-					widthsty: '100px',
+					widthsty: '160px',
 				}
 			],
 			haveMore: true,
@@ -666,7 +675,17 @@ export default {
 			lookEdbId: 0,
 			labelList:[],//标签列表
 
-			CanOpClassify: false
+			CanOpClassify: false,
+
+			select_classifyId:0,//指标分类id
+			PageSize:20,
+			CurrentIndex:1,
+			Total:0,
+			IsListEnd:false,//是不是到底了
+			chartList:[],
+
+			activeTab:'',
+			activeName:'second'
 		};
 	},
 	watch: {
@@ -675,7 +694,12 @@ export default {
 				this.tableData = [];
 				this.dataList = [];
 				this.defaultWarn = '请在左侧选择指标';
+				this.activeTab=''
 			}else {
+				this.activeTab='Chart'
+				this.page_no = 1
+				this.$refs.edb_detail_data.$refs.valueUl.scrollTop=0
+				console.log('scroll 置0')
 				this.initGetData();
 			}
 		},
@@ -685,26 +709,19 @@ export default {
 				let [search_obj] = this.searchOptions.filter(
 					(item) => item.EdbInfoId === newval
 				);
-				
 				this.page_no = 1;
-				this.$refs.valueUl.scrollTop = 0;
-				// 查找图表的父级code
-				//this.defaultShowNodes = this.findParentNodeHandle(this.treeData,search_obj.ClassifyId);
+				this.$refs.valueUl&&(this.$refs.valueUl.scrollTop = 0);
 				this.select_node = search_obj.UniqueCode;
 				this.selected_edbid = newval;
-
-				//滚动到高亮节点位置
-				/* setTimeout(() => {
-					this.$refs.menuTree.setCurrentKey(this.select_node);
-					let node = document.getElementById(`node${this.select_node}`);
-					let parent = document.getElementsByClassName('tree-cont')[0];
-
-					if(node.offsetTop > parent.offsetHeight) {
-						parent.scrollTop =  node.offsetTop - parent.offsetHeight/2
-					}
-				},400) */
 			}
 		},
+		select_classifyId(newval){
+			if(this.$refs.listRef) this.$refs.listRef.scrollTop = 0;
+			if(newval){
+				this.CurrentIndex = 1
+				this.getEdbChartList()
+			}
+		}
 	},
 	computed: {
 			/* 计算弹窗控制 */
@@ -727,8 +744,35 @@ export default {
 			let id = parseInt(localStorage.getItem('AdminId'));
 			return id;
 		},
+		//指标详情，也就是tableData[0]
+		EdbData(){
+			return this.tableData[0]?this.tableData[0]:{Button:{},DataInsertConfig:{},DataList:[]}
+		},
+		//是否显示指标列表
+		isShowList(){
+			return !this.showAssociateChart&&!this.showAssociateComputeData&&!this.selected_edbid
+		},
+		//是否显示指标详情
+		isShowDetail(){
+			return !this.showAssociateChart&&!this.showAssociateComputeData&&this.selected_edbid
+		}
 	},
 	methods: {
+		//控制指标详情操作按钮
+		isEdbBtnShow(type){
+			const {edbDataPermission,checkPermissionBtn}=this.permissionBtn
+			const BtnMap = {
+				'update':edbDataPermission.edbData_update,
+				'edit':edbDataPermission.edbData_edit,
+				'toImg':edbDataPermission.edbData_toImgs,
+				'copyData':edbDataPermission.edbData_copyData,
+				'toSource':edbDataPermission.edbData_edbSource,
+				'setEn':edbDataPermission.edbData_enNameSetting,
+				'newValue':edbDataPermission.edbData_newestValue,
+				'refreshAll':edbDataPermission.edbData_refreshAll,
+			}
+			return checkPermissionBtn(BtnMap[type])
+		},
 		/* 获取树分类数据 */
 		getTreeData(params) {
 			
@@ -787,7 +831,8 @@ export default {
 						//将指标添加进标签列表中
 						const {EdbNameEn,EdbName,EdbInfoId,UniqueCode,ClassifyId}=res.Data.Item
 						this.addLabel({code:UniqueCode,id:EdbInfoId,classifyId:ClassifyId,EdbName,EdbNameEn})
-						this.defaultShowNodes=this.findParentNodeHandle(this.treeData,ClassifyId)
+						let deep_arr = _.cloneDeep(this.treeData);
+						this.defaultShowNodes=this.findParentNodeHandle(deep_arr,ClassifyId).reverse()||[]
 						//设置tree高亮
 						this.$refs.menuTree.setCurrentKey(UniqueCode);
 
@@ -799,7 +844,7 @@ export default {
 						this.$refs.menuTree.setCurrentKey(null)
 					}
 					if(type==='refresh') {
-						this.$refs.valueUl.scrollTop = 0;
+						this.$refs.valueUl&&(this.$refs.valueUl.scrollTop = 0);
 					}
 					this.$nextTick(()=>{
 						const _node = this.$refs.menuTree.getNode(this.select_node)
@@ -808,7 +853,7 @@ export default {
 						//滚动到高亮位置
 						setTimeout(() => {
 							let node = document.getElementById(`node${this.select_node}`)||{}
-							let parent = document.getElementsByClassName('tree-cont')[0];
+							let parent = document.getElementsByClassName('target_tree')[0];
 							//parent可视区间：[scrollTop,scrollTop+offsetHeight]
 							//node位置:node.offsetTop
 							const overTop = node.offsetTop+node.clientHeight+30<parent.scrollTop
@@ -825,6 +870,33 @@ export default {
 				}
 			})
 		}),
+		//获取指标图表列表
+		getEdbChartList(){
+			dataBaseInterface.getEdbChartList({
+				PageSize:this.PageSize,
+				CurrentIndex:this.CurrentIndex,
+				ClassifyId:this.select_classifyId,
+			}).then(res=>{
+				if(res.Ret!==200) return
+				if(res.Data){
+					this.chartList = this.CurrentIndex===1?res.Data.List:[...this.chartList,...res.Data.List]
+					this.Total = res.Data.Paging.Totals||0
+					this.IsListEnd = res.Data.Paging.IsEnd
+				}
+
+
+			})
+		},
+		//指标图表列表-加载更多
+		loadMoreHandle: _.throttle(function() {
+			let scrollTop = this.$refs.listRef.scrollTop;
+			let clientHeight = this.$refs.listRef.clientHeight;
+			let scrollHeight = this.$refs.listRef.scrollHeight;
+			if(scrollTop + clientHeight >= scrollHeight-10 && !this.IsListEnd){
+				this.CurrentIndex++;
+				this.getEdbChartList();
+			}
+			},300),
 		/* 搜索 */
 		searchHandle(query) {
 			this.search_page = 1;
@@ -982,17 +1054,14 @@ export default {
 		},
 		/* 节点变化时 */
 		nodeChange(data,node) {
-			this.dynamicNode = node;
 			this.search_txt = '';
-			this.showAssociateChart=false
-			this.showAssociateComputeData=false
-			// this.page_no = 1;
-			// this.$refs.valueUl.scrollTop = 0;
+			this.select_classifyId = !data.EdbInfoId?data.ClassifyId:0;
 			this.select_node = data.UniqueCode;
 			this.selected_edbid = data.EdbInfoId;
 			this.resetNodeStyle(node);
-			
-			
+			this.dynamicNode = node;
+			this.showAssociateChart=false
+			this.showAssociateComputeData=false
 		},
 		resetNodeStyle: _.debounce(function(node) {
 			const tree = $('.target_tree')[0];
@@ -1166,7 +1235,7 @@ export default {
 			if(this.selected_edbid) {
 				this.loading = this.$loading({
 					lock: true,
-					target:'.main-right',
+					target:'.detail',
 					text: '刷新数据中...',
 					spinner: 'el-icon-loading',
 					background: 'rgba(255, 255, 255, 0.8)'
@@ -1434,6 +1503,8 @@ export default {
 			this.selected_edbid = id;
 
 			//this.defaultShowNodes=this.findParentNodeForClassifyId(classifyId,code)
+			const containerDom = document.getElementById('detail-container')
+			containerDom&&(containerDom.scrollTop = 0)
 			
 			 //滚动到高亮节点位置
 			/* this.$nextTick(()=>{
@@ -1660,10 +1731,18 @@ export default {
 		/* 基础指标刷新 */
 		refreshBaseHandler() {
 			this.refreshLoading = true;
+			this.loading = this.$loading({
+					lock: true,
+					target:'.detail',
+					text: '刷新数据中...',
+					spinner: 'el-icon-loading',
+					background: 'rgba(255, 255, 255, 0.8)'
+				});
 			dataBaseInterface.refreshBaseTarget({
 				EdbInfoId: Number(this.selected_edbid)
 			}).then(res => {
 				this.refreshLoading = false;
+				this.loading&&this.loading.close()
 				if(res.Ret !== 200) return;
 				this.$message.success(res.Msg);
 				this.initDataStatus();
@@ -1778,7 +1857,7 @@ export default {
 		changeTreeNode(){
 			this.$refs.menuTree.setCurrentKey(this.select_node);
 			this.$nextTick(()=>{
-				const _node = this.$refs.menuTree.getNode(this.select_node)
+				const _node = this.$refs.menuTree.getCurrentNode()
 				this.dynamicNode = _node;
 				this.dynamicNode&&this.resetNodeStyle(this.dynamicNode)
 			})
@@ -1813,8 +1892,38 @@ export default {
 			if(node.level>maxLevel){
 				resolve([])
 			}
-		}
 		},
+		//保存指标上下限
+		saveEdbLimit(){
+			if(!this.$refs.createChart) return
+			//获取指标的上下限
+			const {MaxValue=0,MinValue=0} = this.$refs.createChart.chartInfo
+			dataBaseInterface.saveEdbChartLimit({
+				EdbInfoId:this.EdbData.EdbInfoId,
+				MaxValue,MinValue
+			}).then(res=>{
+				if(res.Ret!==200) return 
+				this.$message.success('保存成功')
+			})
+		},
+		//重绘指标图表
+		rePainChart(){
+			if(this.activeTab!=='Chart') return
+			this.$nextTick(()=>{
+				this.$refs.createChart.getDataByPath()
+			})
+		},
+		/* 展开对应菜单 显示详情 */
+		detailShowHandle({ UniqueCode, EdbInfoId,ClassifyId}) {
+			let params = {
+				code: UniqueCode,
+				id: EdbInfoId,
+				classifyId:ClassifyId
+			};
+			this.selectCurrentNode(params);
+			this.select_classifyId = 0;
+		},
+	},
 	//离开页面时保存标签
 	beforeRouteLeave(to,from,next){
 		sessionStorage.setItem('database',JSON.stringify(this.labelList))
@@ -1822,7 +1931,7 @@ export default {
 	},
 	mounted() {
 		this.getlabelList()
-
+		this.getEdbChartList()
 		this.$route.query.code 
 		? this.getTreeData({code: this.$route.query.code,id: this.$route.query.id,classifyId:this.$route.query.classifyId})
 		: this.getTreeData();
@@ -1898,7 +2007,7 @@ export default {
 			width: 5px !important;
 		}
 		.main-left {
-			width: 500px;
+			width: 400px;
 			min-width: 300px;
 			background: #fff;
 			margin-right: 20px;
@@ -1911,11 +2020,13 @@ export default {
 			box-sizing: border-box;
 			.tree-cont {
 				padding: 30px;
-				height: calc(100vh - 290px);
-				overflow: auto;
+				/* height: calc(100vh - 290px);
+				overflow: auto; */
 			}
 			.target_tree {
 				color: #333;
+				height: calc(100vh - 350px);
+				overflow: auto;
 				.label-input .el-input__inner {
 					height: 25px;
 					line-height: 25px;
@@ -1978,7 +2089,7 @@ export default {
 				}
 			}
 			.noDepart {
-				margin: 60px 0;
+				margin: 30px 0;
 				display: flex;
 				align-items: center;
 				justify-content: center;
@@ -2002,28 +2113,51 @@ export default {
 		.main-right {
 			flex: 1;
 			/* width:70%; */
-			height: calc(100vh - 288px);
+			height: calc(100vh - 225px);
 			background: #fff;
 			border: 1px solid #ececec;
 			border-radius: 4px;
 			box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.05);
-			padding: 30px;
 			overflow: hidden;
 			.value-ul {
 				margin-top: 10px;
-				border-bottom: 1px solid #dcdfe6;
-				max-height: calc(100vh - 560px);
-				overflow-y: auto;
+				border-bottom: 1px solid #EBEFF6;
+				//max-height: calc(100vh - 495px);
+				//overflow-y: auto;
 				.value-item {
 					/* width: 100%; */
-					padding: 14px 0;
+					padding: 10px 0;
 					border: 1px solid #dcdfe6;
 					border-bottom: none;
 					display: flex;
 					justify-content: space-around;
+					>span{
+						padding:0 16px;
+						box-sizing: border-box;
+					}
 					.value-label {
 						position: relative;
 						color: #666;
+						.value-style{
+							/* background-color: #ECF2FE;
+							color: #0052D9; */
+							padding:5px;
+							border-radius: 4px;
+							&.predict-act {
+								color: orange;
+							}
+						}
+						&.date{
+							&::after{
+								content: '';
+								position:absolute;
+								right:0;
+								top:-14px;
+								height:calc(100% + 28px);
+								width:1px;
+								background-color: #dcdfe6;
+							}
+						}
 					}
 					.predict-act {
 						color: orange;
@@ -2046,6 +2180,134 @@ export default {
 					color: #999;
 				}
 			}
+			&.list{
+				background-color: transparent;
+				box-shadow: none;
+				border:none;
+				padding:0 30px;
+				display: flex;
+				flex-direction: column;
+				.list-wrap{
+					flex: 1;
+					margin-top: 20px;
+					display: flex;
+					gap: 20px;
+					flex-wrap: wrap;
+					overflow-x: hidden;
+					overflow-y: auto;
+					.dragShdow {
+						box-shadow: 0 1px 8px rgba(64, 158, 255, 0.8);
+						opacity: 0.5;
+					}
+					.list-item{
+						width:23%;
+						/* height:280px; */
+						background-color: #fff;
+						display: flex;
+						flex-direction: column;
+						box-sizing: border-box;
+						/* padding: 0 10px; */
+						border-radius: 4px;
+						border:1px solid #DCDFE6;
+						box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+						.header,.info{
+							padding:20px;
+							box-sizing: border-box;
+							text-align: left;
+						}
+						.header{
+							//border-bottom: 1px solid #DCDFE6;
+							white-space: nowrap;
+							overflow: hidden;
+							text-overflow: ellipsis;
+							font-size: 16px;
+							font-weight: 600;
+							box-shadow: 0 3px 6px rgba(37, 37, 239, 0.1);
+						}
+						.image{
+							padding:20px 20px 0 20px;
+							flex: 1;
+							cursor: pointer;
+							img{
+								width:100%;
+								height: 230px;
+								object-fit: cover !important;
+							}
+						}
+					}
+				}
+			}
+			&.detail{
+				display: flex;
+				flex-direction: column;
+				>.header{
+					display: flex;
+					position: relative;
+					height: 60px;
+					.el-tabs{
+						width:200px;
+						.el-tabs__header{
+							margin-bottom: 0;
+						}
+						.el-tabs__nav{
+							display: flex;
+							width: 100%;
+							.el-tabs__item{
+								flex: 1;
+								text-align: center;
+								font-size: 16px;
+								height: 60px;
+								line-height: 60px;
+							}
+						}
+					}
+					.edb-tool{
+						flex: 1;
+						text-align: right;
+						display: flex;
+						gap: 16px;
+						justify-content: flex-end;
+						padding-right: 15px;
+						position: relative;
+						&::after{
+							position: absolute;
+							content:'';
+							width:100%;
+							left: 0;
+							bottom: 0;
+							height:2px;
+							background-color: #E4E7ED;
+						}
+					}
+				}
+				.container{
+					flex: 1;
+					overflow-y: auto;
+					padding:15px;
+					.chart{
+						.info{
+							display: flex;
+							justify-content: space-between;
+						}
+						.table{
+							margin-top: 16px;
+							border:1px solid #E7E7E7 ;
+							.table-header{
+								display: flex;
+								padding:6px;
+								span{
+									flex: 1;
+									border-bottom: 1px solid #E7E7E7;
+								}
+							}
+						}
+					}
+					.list{
+						height: 100%;
+					}
+				}
+			}
+
 		}
 	}
 	.dialog-computed {

src/views/predictEdb_manage/components/chartInfo.vue

@@ -7,14 +7,14 @@
 				type="primary"
 				v-for="item in yearSelector"
 				:key="item.value"
-				size="medium"
+				size="mini"
 				:plain="item.value !== year_select"
 				class="year-btn"
 				@click.native="changeYear(item)"
 				>{{ item.name }}</el-button
 			>
 			<el-button 
-                type="text" 
+                type="primary" size="mini"
                 class="btn-sty" 
                 @click="openDateDia"
             >{{dateTip}}</el-button>
@@ -30,8 +30,14 @@
                     @change="seasonYearChange"
                 />
             </template>
-            <span v-permission="permissionBtn.predictEdbPermission.edbPreData_switchSeason"
-                class="change-chart-btn" @click="chartTypeChange">切换{{chartInfo.ChartType==1?'季节性图':'曲线图'}}</span>
+            <!-- <span v-permission="permissionBtn.predictEdbPermission.edbPreData_switchSeason"
+                class="change-chart-btn" @click="chartTypeChange">切换{{chartInfo.ChartType==1?'季节性图':'曲线图'}}</span> -->
+            <el-button type="primary" size="mini" class="btn-sty" style="margin-left:auto;"
+                v-permission="permissionBtn.predictEdbPermission.edbPreData_switchSeason"
+                @click="chartTypeChange">
+                <i class="el-icon-sort" style="transform: rotate(90deg);"></i>
+                    切换{{chartInfo.ChartType==1?'季节性图':'曲线图'}}
+            </el-button>
         </div>
         <div class="chartWrapper">
             <Chart 
@@ -185,20 +191,20 @@ export default {
 
 <style lang="scss" scoped>
 .predicedb-chart-wrap{
-    padding: 30px;
+    /* padding: 30px; */
     .header {
+        display: flex;
         position: relative;
         margin-bottom: 30px;
-        .year-btn {
+        .year-btn,.btn-sty {
             min-width: 90px;
             font-size: 14px;
             margin-right: 5px;
             margin-bottom: 5px;
         }
         .btn-sty {
-            font-size: 16px;
-            padding: 9px;
-            border: 1px solid #409eff;
+            background-color: #fff;
+			color: #0052D9;
         }
         .change-chart-btn{
             float: right;
@@ -219,7 +225,7 @@ export default {
         }
     }
     .calendar-cont {
-        margin: 30px auto;
+        /* margin: 30px auto; */
         text-align: center;
         display: block;
         .el-radio-button__inner {

src/views/predictEdb_manage/components/childData.vue

@@ -34,6 +34,29 @@
         <tableNoData text="暂无数据" size="mini"/>
       </div>
     </el-table>
+    <el-table
+			:data="tableData"
+			style="box-shadow: 0px 3px 6px rgba(155, 170, 219, 0.2);"
+			border>
+			<el-table-column
+				v-for="item in tableColumsTwo"
+				:key="item.label"
+				:label="item.label"
+				:width="item.widthsty"
+				:min-width="item.minwidthsty"
+				align="center"
+			>
+				<template #header>
+					<span>{{ item.label }}</span>
+				</template>
+				<template slot-scope="scope">
+					<span>{{ scope.row[item.key] }}</span>
+				</template>
+			</el-table-column>
+			<div slot="empty" style="padding: 50px 0 320px;">
+					<tableNoData :text="defaultWarn"/>
+			</div>
+		</el-table>
     <ul
       class="value-ul"
       ref="valueUl"
@@ -46,13 +69,15 @@
         :key="item.EdbDataId"
       >
         <span class="value-label">
-          <i class="new-tag" v-if="tableData[0].LatestDate===item.DataTime"></i>
-          {{ item.DataTime }}
+            <span style="position: relative;">
+                <i class="new-tag" v-if="tableData[0].LatestDate===item.DataTime"></i>
+                {{item.DataTime}}
+            </span>
         </span>
         <span
           :class="['value-label',{'predict-act': item.isPredic}]"
           style="min-width: 200px; text-align: center"
-          >{{ item.Value }}</span
+          ><span :class="['value-style',{'predict-act': item.isPredic}]">{{item.Value}}</span></span
         >
       </li>
       <li class="nodata value-item" v-if="!dataList.length">暂无数据</li>
@@ -81,42 +106,54 @@ export default {
   data() {
     return {
       tableColums: [
-				{
-					label: '指标ID',
-					key: 'EdbCode',
-					minwidthsty: '150px'
-				},
-				{
-					label: '频度',
-					key: 'Frequency',
-					widthsty: '80px'
-				},
-				{
-					label: '单位',
-					key: 'Unit',
-					widthsty: '80px'
-				},
-				{
-					label: '起始时间',
-					key: 'StartDate',
-					widthsty: '160px'
-				},
-				{
-					label: '预测截止日期',
-					key: 'EndDate',
-					widthsty: '160px'
-				},
-				{
-					label: '更新时间',
-					key: 'ModifyTime',
-					widthsty: '160px'
-				},
-				{
-					label: '添加人',
-					key: 'SysUserRealName',
-					widthsty: '100px'
-				},
-			],
+        {
+            label: '指标ID',
+            key: 'EdbCode',
+            widthsty: '280px'
+        },
+        {
+            label: '指标名称',
+            key: 'EdbName',
+            minwidthsty: '200px'
+        },
+        {
+            label: '频度',
+            key: 'Frequency',
+            widthsty: '100px'
+        },
+        {
+            label: '单位',
+            key: 'Unit',
+            widthsty: '140px'
+        },
+      ],
+      tableColumsTwo:[
+        {
+            label: '指标目录',
+            key: 'Menu',
+            widthsty: '280px',
+        },
+        {
+            label: '起始时间',
+            key: 'StartDate',
+            minwidthsty: '100px',
+        },
+        {
+            label: '预测截止日期',
+            key: 'EndDate',
+            minwidthsty: '100px'
+        },
+        {
+            label: '更新时间',
+            key: 'ModifyTime',
+            minminwidthsty: '120px',
+        },
+        {
+            label: '添加人',
+            key: 'SysUserRealName',
+            widthsty: '140px',
+        }
+      ],
       showData: false,
       tableData: [],
       page_no: 1,
@@ -137,6 +174,10 @@ export default {
         Item.PredictDataList && Item.PredictDataList.forEach(_ => {
           _.isPredic = true;
         })
+        const classify_arr = res.Data.ClassifyList || [];
+        let str = '';
+        classify_arr.length && classify_arr.reverse().map((item) => str += item.ClassifyName + '/');
+        this.$set(Item,'Menu',str);
         this.haveMore =  this.page_no < res.Data.Paging.Pages;
         this.dataList = this.page_no === 1 ? [...Item.PredictDataList,...Item.DataList] : [...this.dataList,...Item.DataList];
 
@@ -171,15 +212,24 @@ export default {
   },
 };
 </script>
+<style lang="scss">
+.data-wrapper {
+    .el-table--enable-row-transition .el-table__body td{
+        background: #fff !important;
+    }
+    .el-table td, .el-table th.is-leaf {
+        background: #F2F6FA !important;
+    }
+}
+</style>
 <style scoped lang="scss">
 .data-wrapper {
-  padding-top: 40px;
   .value-ul {
     margin-top: 10px;
     border-bottom: 1px solid #dcdfe6;
     border-top: 1px solid #dcdfe6;
     /* max-height: 520px; */
-    max-height: calc(100vh - 450px);
+    max-height: calc(100vh - 430px);
     overflow-y: auto;
     .value-item {
       /* width: 100%; */
@@ -189,9 +239,22 @@ export default {
       display: flex;
       justify-content: space-around;
       &:first-child { border-top: none; }
+      span{
+        flex: 1;
+        text-align: center;
+      }
       .value-label {
         position: relative;
         color: #666;
+        .value-style{
+            /* background-color: #ECF2FE;
+            color: #0052D9; */
+            padding:5px;
+            border-radius: 4px;
+            &.predict-act{
+                color: orange;
+            }
+        }
       }
       .predict-act {
         color: orange;

src/views/predictEdb_manage/components/classifyDia.vue

@@ -32,7 +32,7 @@
 					</el-form-item>
 				</template>
 
-				<el-form-item label="分类名称" prop="classify_name">
+				<el-form-item label="目录名称" prop="classify_name">
 					<el-input
 					v-model="formData.classify_name"
 					style="width: 80%"
@@ -78,7 +78,7 @@ export default {
 			formData: {},
       formRules: {
         classify_name:[
-          { required: true, message: '分类名称不能为空', trigger: 'blur' },
+          { required: true, message: '目录名称不能为空', trigger: 'blur' },
         ]
       },
 

src/views/predictEdb_manage/components/edbDetail.vue

@@ -6,7 +6,40 @@
             @refreshData="refreshData"
             ref="chartInfo"
         />
-        <div class="author" style="float:right">添加人：{{edbData.EdbInfo.SysUserRealName}}</div>
+        <div class="info" style="display: flex;justify-content: flex-end;">
+          <!--   <span>数据来源：{{edbData.EdbInfo.SourceName}}</span> -->
+            <span>添加人：{{edbData.EdbInfo.SysUserRealName}}</span>
+        </div>
+        <ul
+            class="value-ul"
+            v-show="showData&&dataList.length"
+            >
+            <li class="value-item" style="background-color: #EBEFF6;">
+                <span style="width:240px">日期（频度：{{EdbData.Frequency}}）</span>
+                <span style="flex:1;">值</span>
+            </li>
+            <li
+                class="value-item"
+                v-for="item in dataList.slice(0,3)"
+                :key="item.EdbDataId"
+            >
+                <span class="value-label date" style="width:240px">
+                    <span>
+                        <i class="new-tag" v-if="EdbData.LatestDate===item.DataTime"></i>
+                        {{ item.DataTime }}
+                    </span>
+                </span>
+                <span
+                    :class="['value-label',{'predict-act': item.isPredic}]"
+                    style="flex:1;"
+                >
+                    <span :class="['value-style',{'predict-act': item.isPredic}]">{{item.Value}}</span>
+                </span
+                >
+            </li>
+            <li class="nodata value-item" v-if="!dataList.length">暂无数据</li>
+        </ul>
+
     </div>
 </template>
 
@@ -45,6 +78,9 @@ export default {
                 DataList:null,
                 EdbInfo:{}
             },
+            showData:false,
+            dataList: [],
+            EdbData:{}
         }
     },
     methods: {
@@ -90,6 +126,7 @@ export default {
                         this.setChartImage()
                     })
                 }
+                this.getData()
             })
         },
         refreshData(type=''){
@@ -119,12 +156,84 @@ export default {
                 ImageUrl: Data.ResourceUrl,
             });
         },
+        getData(){
+            preDictEdbInterface.edbDataInfo({
+                EdbInfoId: this.id,
+                CurrentIndex: 1
+            }).then(res => {
+                this.showData = true;
+                if(res.Ret!==200) return 
+                const {Item} = res.Data
+                Item.PredictDataList && Item.PredictDataList.forEach(_ => {
+                    _.isPredic = true;
+                })
+                this.EdbData = Item
+                this.dataList = [...Item.PredictDataList,...Item.DataList]
+            })
+        },
 
     },
 
 }
 </script>
 
-<style>
-
+<style lang="scss" scoped>
+.value-ul {
+    margin-top: 10px;
+    border-bottom: 1px solid #EBEFF6;
+    .value-item {
+        padding: 10px 0;
+        border: 1px solid #EBEFF6;
+        border-bottom: none;
+        display: flex;
+        justify-content: space-around;
+        >span{
+            padding:0 16px;
+            box-sizing: border-box;
+        }
+        .value-label {
+            position: relative;
+            color: #666;
+            .value-style{
+                /* background-color: #ECF2FE;
+                color: #0052D9; */
+                padding:5px;
+                border-radius: 4px;
+                &.predict-act {
+                    color: orange;
+                }
+            }
+            &.date{
+                &::after{
+                    content: '';
+                    position:absolute;
+                    right:0;
+                    top:-14px;
+                    height:calc(100% + 28px);
+                    width:1px;
+                    background-color: #EBEFF6;
+                }
+            }
+        }
+        .predict-act {
+            color: orange;
+        }
+        .new-tag {
+            width: 6px;
+            height: 6px;
+            display: inline-block;
+            position: absolute;
+            left: -12px;
+            top: 50%;
+            transform: translateY(-50%);
+            border-radius: 50%;
+            background: #f00;
+        }
+    }
+    .nodata {
+        text-align: center;
+        padding: 40px 0;
+        color: #999;
+    }
+}
 </style>

src/views/predictEdb_manage/predictEdb.vue

@@ -149,7 +149,7 @@
 							alt=""
 							style="width: 16px; height: 16px; margin-right: 10px"
 						/>
-						<span>添加分类</span>
+						<span>添加一级目录</span>
 					</div>
 				</div>
 				<span
@@ -167,30 +167,35 @@
 
 				<!-- 详情 -->
 				<div class="edb-detail-wrapper" v-if="select_id&&!showAssociateChart&&!showAssociateComputeData">
-					<div class="detail-top">
-						<span class="title">{{ currentLang==='en'?(edb_nameEn||edbName):edbName }}</span>
-						<ul class="action-ul">
-							<li v-permission="permissionBtn.predictEdbPermission.edbPreData_enNameSetting"
-								class="editsty" @click="clickEdbNameHandle" v-if="currentLang==='ch'||!edb_nameEn">
+					<div class="detail-header">
+						<el-tabs v-model="activeTab" @tab-click="changeShowType">
+							<el-tab-pane label="走势图" name="Chart">
+							</el-tab-pane>
+							<el-tab-pane label="数据详情" name="Data">
+							</el-tab-pane>
+						</el-tabs>
+						<div class="edb-tool">
+							<el-button v-permission="permissionBtn.predictEdbPermission.edbPreData_enNameSetting"
+								type="text" @click="clickEdbNameHandle" v-if="currentLang==='ch'||!edb_nameEn">
 								设置英文名称
-							</li>
-							<li v-permission="permissionBtn.predictEdbPermission.edbPreData_edbSource"
-								class="editsty" @click="isLookHistory=true;lookEdbId=select_id">指标溯源</li>
-							<li v-permission="permissionBtn.predictEdbPermission.edbPreData_update"
-								class="editsty" @click="updateEdbPartHandle">更新</li>
-							<li class="editsty" @click="editEdbHandle('')" 
-								v-if="edbButton.OpButton&&permissionBtn.checkPermissionBtn(permissionBtn.predictEdbPermission.edbPreData_edit)">编辑</li>
-							<li class="editsty" @click="saveEdbHandle" 
-								v-if="detail_show_chart&&permissionBtn.checkPermissionBtn(permissionBtn.predictEdbPermission.edbPreData_save)">保存</li>
-							<li v-permission="permissionBtn.predictEdbPermission.edbPreData_recalcu"
-								class="editsty" @click="updateEdbHandle">重新计算</li>
-							<li class="deletesty" @click="delEdbHandle" 
-								v-if="edbButton.DeleteButton&&permissionBtn.checkPermissionBtn(permissionBtn.predictEdbPermission.edbPreData_del)">删除</li>
-							<li v-permission="permissionBtn.predictEdbPermission.edbPreData_copyData"
-								class="editsty" @click="copyData">复制数据</li>
-							<li v-permission="permissionBtn.predictEdbPermission.edbPreData_viewData"
-								class="editsty" @click="detail_show_chart=!detail_show_chart">{{detail_show_chart ? '查看数据' : '查看图表'}} </li>
-						</ul>
+							</el-button>
+							<el-button v-permission="permissionBtn.predictEdbPermission.edbPreData_edbSource"
+							type="text" @click="isLookHistory=true;lookEdbId=select_id">指标溯源</el-button>
+							<el-button v-permission="permissionBtn.predictEdbPermission.edbPreData_update"
+								type="text" @click="updateEdbPartHandle">刷新</el-button>
+							<el-button type="text" @click="editEdbHandle('')" 
+								v-if="edbButton.OpButton&&permissionBtn.checkPermissionBtn(permissionBtn.predictEdbPermission.edbPreData_edit)">编辑</el-button>
+							<el-button type="text" @click="saveEdbHandle" 
+								v-if="detail_show_chart&&permissionBtn.checkPermissionBtn(permissionBtn.predictEdbPermission.edbPreData_save)">保存</el-button>
+							<el-button v-permission="permissionBtn.predictEdbPermission.edbPreData_recalcu"
+								type="text" @click="updateEdbHandle">重新计算</el-button>
+							<el-button class="deletesty" @click="delEdbHandle" type="text"
+								v-if="edbButton.DeleteButton&&permissionBtn.checkPermissionBtn(permissionBtn.predictEdbPermission.edbPreData_del)">删除</el-button>
+							<el-button v-permission="permissionBtn.predictEdbPermission.edbPreData_copyData"
+								type="text" @click="copyData">复制数据</el-button>
+							<!-- <el-button v-permission="permissionBtn.predictEdbPermission.edbPreData_viewData"
+								type="text" @click="detail_show_chart=!detail_show_chart">{{detail_show_chart ? '查看数据' : '查看图表'}} </el-button> -->
+						</div>
 					</div>
 
 					<!--  -->
@@ -589,6 +594,8 @@ export default {
 
 			showAssociateChart:false,//显示指标关联的图
 			showAssociateComputeData:false,//显示指标关联的引用计算指标
+
+			activeTab:'',
 		};
 	},
 	computed: {
@@ -622,6 +629,7 @@ export default {
 		// /* 表格id */
 		select_id(newval) {
 			this.detail_show_chart = true;
+			this.activeTab='Chart'
 			this.$nextTick(()=>{
 				//切换为曲线图 重置选择状态
 				if(this.$refs.detailComponentRef){
@@ -639,6 +647,7 @@ export default {
 		select_classify(newval) {
 			if(this.$refs.listRef) this.$refs.listRef.scrollTop = 0;
 			if(newval) {
+				this.activeTab = ''
 				this.public_page = 1;
 				this.getPublicList()
 			}
@@ -673,7 +682,7 @@ export default {
 			this.$nextTick(()=>{
 				setTimeout(() => {
 				const dom = document.querySelector(".el-tree-node.is-current");
-				const parentDom = document.querySelector(".tree-cont");
+				const parentDom = document.querySelector(".target_tree");
 				if (!dom || !parentDom) {
 					this.searchLoading = false;
 					return;
@@ -1329,6 +1338,10 @@ export default {
 				this.dynamicNode = _node;
 				this.dynamicNode&&this.resetNodeStyle(this.dynamicNode)
 			})
+		},
+		changeShowType(){
+			if(!this.activeTab) return
+			this.detail_show_chart = this.activeTab==='Chart'?true:false
 		}
 	},
 	mounted() {
@@ -1356,6 +1369,50 @@ export default {
 	}
 }
 </script>
+<style lang="scss">
+.predictEdb-container{
+	.detail-header{
+		display: flex;
+		position: relative;
+		height: 60px;
+		.el-tabs{
+			width:200px;
+			.el-tabs__header{
+				margin-bottom: 0;
+			}
+			.el-tabs__nav{
+				display: flex;
+				width: 100%;
+				.el-tabs__item{
+					flex: 1;
+					text-align: center;
+					font-size: 16px;
+					height: 60px;
+					line-height: 60px;
+				}
+			}
+		}
+	}
+	.edb-tool{
+		flex: 1;
+		text-align: right;
+		display: flex;
+		gap: 16px;
+		justify-content: flex-end;
+		padding-right: 15px;
+		position: relative;
+		&::after{
+			position: absolute;
+			content:'';
+			width:100%;
+			left: 0;
+			bottom: 0;
+			height:2px;
+			background-color: #E4E7ED;
+		}
+	}
+}
+</style>
 <style lang='scss' scoped>
 @import "~@/styles/theme-vars.scss";
 *{ box-sizing: border-box;}
@@ -1414,11 +1471,13 @@ $mini-font: 12px; $normal-font: 14px;
 
 			.tree-cont {
 				padding: 0 20px 30px 20px;
-				max-height: calc(100vh - 280px);
-				overflow: auto;
+				/* max-height: calc(100vh - 280px);
+				overflow: auto; */
 			}
 			.target_tree {
 				color: #333;
+				max-height: calc(100vh - 400px);
+				overflow-y:auto;
 				.custom-tree-node {
 					display: flex !important;
 					justify-content: space-between;
@@ -1436,7 +1495,7 @@ $mini-font: 12px; $normal-font: 14px;
 				}
 			}
 			.noDepart {
-				margin: 60px 0;
+				margin: 30px 0;
 				display: flex;
 				align-items: center;
 				justify-content: center;
@@ -1484,8 +1543,9 @@ $mini-font: 12px; $normal-font: 14px;
 				}
 				.detail-wrap {
 					position: relative;
-					padding: 30px 20px;
-					height: calc(100vh - 190px);
+					padding: 16px;
+					height: calc(100vh - 180px);
+					overflow-y: auto;
 					.toggle-text {
 						position: absolute;
 						right: 20px;