指标库部分，完成

src/api/modules/chartApi.js

@@ -872,6 +872,23 @@ const dataBaseInterface = {
 	 */
 	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,768 @@
+<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">{{ 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){
+			newval && 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.MinValue) ? {
+						...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 {
+		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/edbDetailData.vue

@@ -0,0 +1,121 @@
+<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">
+					<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>
+</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 []}
+		}
+	},
+	data() {
+		return {
+
+		};
+	},
+	methods: {
+		scrollHandle(){}
+	},
+};
+</script>
+
+<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;
+	}
+}
+</style>

src/views/dataEntry_manage/databaseList.vue

@@ -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
+									v-if="!data.EdbCode&&(data.Button.OpButton)"
-										?(data.Button.OpButton&&permissionBtn.checkPermissionBtn(permissionBtn.edbDataPermission.edbData_edit))
-										:(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,115 +173,8 @@
 			<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"
-								@click="editNode({
-									level: 4,
-									parent: {
-										data: { ClassifyId:edb_levels[2].ClassifyId },
-										parent:{
-											data: { ClassifyId:edb_levels[1].ClassifyId },
-											parent:{
-												data: { ClassifyId:edb_levels[0].ClassifyId },
-											}
-										},
-									}
-								},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>
-							<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"/>
-					</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="main-right right list" id="right" v-show="!showAssociateChart&&!showAssociateComputeData&&!selected_edbid">
+			<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">
@@ -290,7 +182,7 @@
 							<span v-show="currentLang=='ch'">{{ item.EdbName }}</span> 
 							<span v-show="currentLang=='en'">{{ item.EdbNameEn || item.EdbName }}</span>
 						</div>
-						<div class="image" @click="selected_edbid = item.EdbInfoId">
+						<div class="image" @click="selectCurrentNode({ code:item.UniqueCode, id:item.EdbInfoId, classifyId:item.ClassifyId })">
 							<img :src="item.ChartImage" alt=""/>
 						</div>
 						<div class="info">
@@ -304,17 +196,19 @@
 				</div>
 			</div>
 			<!-- 指标详情 -->
-			<div class="main-right right detail" id="right" v-show="!showAssociateChart&&!showAssociateComputeData&&selected_edbid">
+			<div class="main-right right detail" id="right" v-show="isShowDetail">
 				<div class="header">
-					<el-tabs v-model="activeTab">
+					<el-tabs v-model="activeTab" @tab-click="rePainChart">
-						<el-tab-pane label="走势图" name="走势图"></el-tab-pane>
+						<el-tab-pane label="走势图" name="Chart">
-						<el-tab-pane label="数据详情" name="数据详情"></el-tab-pane>
+						</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="!(tableData[0]?tableData[0].Button.OpButton:true)"
+								type="text" :disabled="!(EdbData.Button.OpButton)"
 								@click="editNode({
 									level: 4,
 									parent: {
@@ -326,23 +220,64 @@
 											}
 										},
 									}
-								},tableData[0])"
+								},EdbData)"
 							>编辑</el-button>
-						<el-button v-if="tableData[0]?tableData[0].EdbType===2:false"
+						<!-- 指保存指标的上下限，在走势图才显示 -->
+						<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')"
-						<!-- <el-button v-if="isEdbBtnShow('toImg')"
+							type="text" @click="isLookHistory=true;lookEdbId=selected_edbid">指标溯源</el-button>
-							size="mini" type="text" @click.stop="createChartHandle(scope.row.EdbInfoId)">一键成图</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="tableData[0]?tableData[0].EdbType===2:false&&isEdbBtnShow('toSource')"
+						<el-button v-if="EdbData.Button.DeleteButton"
-							type="text" @click="isLookHistory=true;lookEdbId=selected_edbid">指标溯源</el-button>
+							type="text" @click="removeNode(_,EdbData)">删除</el-button>
-						<el-button v-if="isEdbBtnShow('setEn')"
+					</div>
-							type="text" @click="openEnNameDia">设置英文名称</el-button>
+				</div>
-						<el-button v-if="tableData[0]?tableData[0].Button.InsertNewDataButton:false&&isEdbBtnShow('newValue')"
+				<div class="container" id="detail-container">
-							type="text" @click.stop="updateNewestDataHandle" >{{(tableData[0]?tableData[0].DataInsertConfig.Date:'')?'编辑最新值':'添加最新值'}}</el-button>
+					<div class="chart" v-show="activeTab==='Chart'">
-						<el-button v-if="tableData[0]?tableData[0].EdbType===1:false&&isEdbBtnShow('refreshAll')"
+						<chart-trend-render
-							type="text" @click.stop="refreshBaseHandler"  :loading="refreshLoading">全部刷新</el-button>
+							: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">
+									<span>日期（频度：{{EdbData.Frequency}}）</span>
+									<span style="min-width:200px;text-align:center;">值</span>
+								</li>
+								<li class="value-item"
+									v-for="item in dataList.slice(0,3)"
+									:key="item.EdbDataId">
+									<span class="value-label">
+										<i class="new-tag" v-if="EdbData.LatestDate===item.DataTime"></i>
+										{{item.DataTime}}
+									</span>
+									<span :class="['value-label',{'predict-act': EdbData.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="list" v-show="activeTab==='Data'">
+						<edb-detail-data 
+							:current-lang="currentLang"
+							:table-data="tableData"
+							:table-colums-one="tableColumsOne"
+							:table-colums-two="tableColumsTwo"
+							:data-list="dataList"
+						/>
 					</div>
 				</div>
 			</div>
@@ -432,14 +367,14 @@
 			@changeSource="changeComputedType"
 		/>
 		<!-- 一键成图弹窗 -->
-		<create-chart
+		<!-- <create-chart
 			:isCreateChart="isCreateChart"
 			:edbid="selected_edbid"
 			:chartLang="currentLang"
 			ref="createChart"
 			@close="isCreateChart = false"
 			@editEnName="openEnNameDia"
-		/>
+		/> -->
 
 		<!-- 一键更新弹窗 -->
 		<update-dialog
@@ -532,6 +467,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: { 
@@ -552,7 +489,9 @@ export default {
 		batchComputedDialog,
 		diffusionIndexDialog,
 		updateNewestDataDia,
-		EdbLabelList
+		EdbLabelList,
+		chartTrendRender,
+		edbDetailData
 	},
 	directives: {
     drag(el, bindings) {
@@ -643,7 +582,7 @@ export default {
 				{
 					label: '指标目录',
 					key: 'Menu',
-					minwidthsty: '117px',
+					minwidthsty: '150px',
 				},
 				{
 					label: '起始时间',
@@ -653,12 +592,12 @@ export default {
 				{
 					label: '更新时间',
 					key: 'ModifyTime',
-					minwidthsty: '118px',
+					minwidthsty: '120px',
 				},
 				{
 					label: '添加人',
 					key: 'SysUserRealName',
-					widthsty: '100px',
+					widthsty: '160px',
 				}
 			],
 			haveMore: true,
@@ -738,7 +677,8 @@ export default {
 			IsListEnd:false,//是不是到底了
 			chartList:[],
 
-			activeTab:'走势图'
+			activeTab:'',
+			activeName:'second'
 		};
 	},
 	watch: {
@@ -747,7 +687,9 @@ export default {
 				this.tableData = [];
 				this.dataList = [];
 				this.defaultWarn = '请在左侧选择指标';
+				this.activeTab=''
 			}else {
+				this.activeTab='Chart'
 				this.initGetData();
 			}
 		},
@@ -757,24 +699,10 @@ export default {
 				let [search_obj] = this.searchOptions.filter(
 					(item) => item.EdbInfoId === newval
 				);
-				
 				this.page_no = 1;
 				this.$refs.valueUl&&(this.$refs.valueUl.scrollTop = 0);
-				// 查找图表的父级code
-				//this.defaultShowNodes = this.findParentNodeHandle(this.treeData,search_obj.ClassifyId);
 				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){
@@ -806,6 +734,18 @@ 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: {
 		//控制指标详情操作按钮
@@ -902,7 +842,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];
 							if(node.offsetTop > parent.offsetHeight) {
 								parent.scrollTop =  node.offsetTop - parent.offsetHeight/2
 							}
@@ -1549,15 +1489,17 @@ export default {
 			this.selected_edbid = id;
 
 			//this.defaultShowNodes=this.findParentNodeForClassifyId(classifyId,code)
-			
+			const containerDom = document.getElementById('detail-container')
+			containerDom&&(containerDom.scrollTop = 0)
 			 //滚动到高亮节点位置
 			this.$nextTick(()=>{
 				setTimeout(() => {
 					let node = document.getElementById(`node${this.select_node}`)||{}
-					let parent = document.getElementsByClassName('tree-cont')[0];
+					let parent = document.getElementsByClassName('target_tree')[0];
-					//console.log('滚动',node,parent);
 					if(node.offsetTop > parent.offsetHeight) {
 						parent.scrollTop =  node.offsetTop - parent.offsetHeight/2
+					}else{
+						parent.scrollTop = 0
 					}
 				},400)
 			})
@@ -1928,8 +1870,28 @@ 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()
+			})
+		}
+	},
 	//离开页面时保存标签
 	beforeRouteLeave(to,from,next){
 		sessionStorage.setItem('database',JSON.stringify(this.labelList))
@@ -1937,7 +1899,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();
@@ -2026,11 +1988,13 @@ export default {
 			box-sizing: border-box;
 			.tree-cont {
 				padding: 30px;
-				height: calc(100vh - 290px);
+				/* height: calc(100vh - 290px);
-				overflow: auto;
+				overflow: auto; */
 			}
 			.target_tree {
 				color: #333;
+				height: calc(100vh - 350px);
+				overflow: auto;
 				.label-input .el-input__inner {
 					height: 25px;
 					line-height: 25px;
@@ -2093,7 +2057,7 @@ export default {
 				}
 			}
 			.noDepart {
-				margin: 60px 0;
+				margin: 30px 0;
 				display: flex;
 				align-items: center;
 				justify-content: center;
@@ -2165,12 +2129,14 @@ export default {
 				box-shadow: none;
 				border:none;
 				padding:0 30px;
+				display: flex;
+				flex-direction: column;
 				.list-wrap{
+					flex: 1;
 					margin-top: 20px;
 					display: flex;
 					gap: 20px 4%;
 					flex-wrap: wrap;
-					max-height: calc(100vh - 225px);
 					overflow-x: hidden;
 					overflow-y: auto;
 					.list-item{
@@ -2197,13 +2163,21 @@ export default {
 						.image{
 							flex: 1;
 							cursor: pointer;
+							img{
+								width:100%;
+								height: 100%;
+								object-fit: cover !important;
+							}
 						}
 					}
 				}
 			}
 			&.detail{
+				display: flex;
+				flex-direction: column;
 				.header{
 					display: flex;
+					position: relative;
 					.el-tabs{
 						width:200px;
 						.el-tabs__header{
@@ -2238,6 +2212,32 @@ export default {
 						}
 					}
 				}
+				.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%;
+					}
+				}
 			}
 
 		}