eta_front/src/views/dataEntry_manage/databaseList.vue

<template>
	<div class="database_container">
		<div class="database_top">
			<div class="top-left">
				<el-button v-permission="permissionBtn.edbDataPermission.edbData_addEdb"
					type="primary" @click="addHandler">添加指标</el-button>
				<el-button v-permission="permissionBtn.edbDataPermission.edbData_calcuEdb"
					type="primary" @click="addComputedHandler">计算指标</el-button>
				<el-button v-permission="permissionBtn.edbDataPermission.edbData_replaceEdb"
					type="primary" @click="replaceEdbHandler">替换指标</el-button>
				<el-button v-permission="permissionBtn.edbDataPermission.edbData_codeRun"
					type="primary" @click="$router.push({path: '/codecount'})">代码运算</el-button>
				<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> -->
			</div>
			<div class="top-right">

				<change-lang v-permission="permissionBtn.edbDataPermission.edbData_switchEn"
					:lang="currentLang" style="height: 32px;" @changeLang="changeLanguage"/>

				<el-select
					v-model="search_txt"
					v-loadMore="searchLoad"
					ref="searchRef"
					:filterable="!search_txt"
					remote
					clearable
					placeholder="指标ID/指标名称"
					style="width: 260px;"
					:remote-method="searchHandle"
					@click.native="inputFocusHandle"
				>
					<i slot="prefix" class="el-input__icon el-icon-search"></i>
					<el-option
						v-for="item in searchOptions"
						:key="item.EdbInfoId"
						:label="currentLang==='en'?(item.EdbNameEn||item.EdbName):item.EdbName"
						:value="item.EdbInfoId"
					>
					</el-option>
				</el-select>
			</div>
		</div>
		<div class="database-label">
			<edb-label-list 
				:currentLang="currentLang"
				:labelList="labelList"
				:activeLabelId="select_node"
				@clickLabel="changeCurrentLabel"
				@deleteLabel="deleteLabel"
				@moveLabel="({oldIndex,newIndex})=>{labelList[oldIndex] = labelList.splice(newIndex, 1, labelList[oldIndex])[0];}"
				/>
		</div>
		<div class="database_main box" id="box" v-if="showData">
			<!-- 展开收起目录按钮 -->
			<span
				v-show="!isMainLeftShow"
				class="slide-btn-icon slide-right"
				@click="isMainLeftShow = !isMainLeftShow"
			>
				<i :class="{'el-icon-d-arrow-left':isMainLeftShow,'el-icon-d-arrow-right':!isMainLeftShow}"></i>
			</span>
			<!-- <target-tree /> -->
			<div class="main-left left" id="left" v-show="isMainLeftShow">
				<div class="tree-cont">
					<div class="target_tree">
					<el-tree
						ref="menuTree"
						:data="treeData"
						node-key="UniqueCode"
						:props="defaultProp"
						:allow-drag="canDragHandle"
						:allow-drop="canDropHandle"
						:current-node-key="select_node"
						:default-expanded-keys="defaultShowNodes"
						:draggable="isEdbBtnShow('moveCatalog')"
						:expand-on-click-node="false"
						check-strictly
						empty-text="暂无目录"
						lazy
						:load="getLazyTreeData"
						@node-expand="handleNodeExpand"
						@node-collapse="handleNodeCollapse"
						@current-change="nodeChange"
						@node-drop="dropOverHandle"
						@node-drag-end="dropMouseLeave"
						@node-drag-leave="dropMouseLeave"
						@node-drag-enter="dropMouseOver"
					>
						<span
							class="custom-tree-node"
							slot-scope="{ node, data }"
						>
							<el-input
								ref="editVal"
								style="width: 90px"
								placeholder="请输入值"
								class="label-input"
								v-model="new_label"
								v-if="data.isEdit&&isEdbBtnShow('editCatalog')"
								@blur="changeValue(node, data)"
							/>
							<span 
								@dblclick.stop="editNodeLabel(node, data)" 
								v-else 
								class="text_oneLine node_label" 
								:style="`width:${(select_node === data.UniqueCode && node.Nodewidth) || ''}`"
								:id="`node${data.UniqueCode}`"
							>
								<span>{{ currentLang==='en' ? (data.ClassifyNameEn||data.ClassifyName) : data.ClassifyName }}</span>
							</span>
							<span
								style="display: flex; align-items: center"
								v-if="select_node === data.UniqueCode"
							>
								<img
									src="~@/assets/img/data_m/move_ico.png"
									alt=""
									style="width: 14px; height: 14px; margin-right: 8px"
									v-if="data.Button.MoveButton&&isEdbBtnShow('moveCatalog')"
								/>
								<!-- 添加子项 -->
								<img
									src="~@/assets/img/set_m/add.png"
									alt=""
									style="width: 14px; height: 14px; margin-right: 8px"
									@click.stop="addNode(node,data)"
									v-if="data.Button.AddButton&&isEdbBtnShow('editCatalog')&&node.level<6"
								/>
								<!-- 编辑节点 如果是分类，判断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)&&isEdbBtnShow('editCatalog')"
								/>
								<!-- 删除节点 如果是分类，判断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.EdbCode&&(data.Button.DeleteButton)&&isEdbBtnShow('deleteCatalog')"
								/>
								<!-- 查看计算指标 -->
								<i class="el-icon-view" 
									v-if="data.EdbType===2&&![58,59,67,68,74].includes(data.Source)&&isEdbBtnShow('checkCalcChart')" 
									@click.stop="viewNode(node,data)"></i>
								<!-- 查看关联图表 -->
								<img 
									v-if="data.Button.ShowChartRelation&&isEdbBtnShow('checkRelatedChart')" 
									@click.stop="showAssociateChart=true,showAssociateComputeData=false"
									src="~@/assets/img/icons/associate_chart.png" 
									style="width: 14px; height: 14px;margin-left: 8px"
									alt=""
								/>
								<!-- 查看关联指标 -->
								<img 
									v-if="data.Button.ShowEdbRelation&&isEdbBtnShow('checkRelatedEdb')" 
									@click.stop="showAssociateComputeData=true,showAssociateChart=false"
									src="~@/assets/img/icons/associate_data.png" 
									style="width: 14px; height: 14px;margin-left: 8px"
									alt=""
								/>
							</span>
						</span>
					</el-tree>
					</div>
					<div class="noDepart" @click="addLevelOneHandle" v-if="CanOpClassify&&isEdbBtnShow('editCatalog')">
						<img
							src="~@/assets/img/set_m/add_ico.png"
							alt=""
							style="width: 16px; height: 16px; margin-right: 10px"
						/>
						<span>添加一级目录</span>
					</div>
				</div>
				<span class="move-btn resize" v-drag id="resize" @mousemove="dynamicNode&&resetNodeStyle(dynamicNode)">
				</span>
				<span
					v-show="isMainLeftShow"
					class="slide-btn-icon slide-left"
					@click="isMainLeftShow = !isMainLeftShow"
				>
					<i :class="{'el-icon-d-arrow-left':isMainLeftShow,'el-icon-d-arrow-right':!isMainLeftShow}"></i>
				</span>
			</div>
			<!-- 指标关联图模块 -->
			<div class="main-right right" id="right" style="background:transparent;border:none;box-shadow:none" v-if="showAssociateChart">
				<dataAssociateChart :edbInfoId="selected_edbid"></dataAssociateChart>
			</div>
			<div class="main-right right" id="right" style="background:transparent;border:none;box-shadow:none;padding-top: 30px;box-sizing: border-box;" v-if="showAssociateComputeData">
				<dataAssociateComputeData :edbInfoId="selected_edbid"></dataAssociateComputeData>
			</div>
			<!-- 指标图表列表 -->
			<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="chart-list-item-wrap">
						<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)"
								:style="item.ChartImage?{background: `no-repeat top/cover url('${item.ChartImage}')`}:{}">
								<!-- <img :src="item.ChartImage"/> -->
							</div>
							<div class="info">
								创建时间：{{item.CreateTime.substring(0,10)}}
							</div>
						</div>
					</div>
					
				</div>
				<div v-if="!Total" class="nodata">
					<tableNoData text="暂无指标"/>
				</div>
			</div>
			<!-- 指标详情 -->
			<div class="main-right right detail-wrap" id="right" v-show="isShowDetail">
				<div class="detail">
					<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-icon edb-tool" style="align-items: center;">
							<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({},EdbData)">编辑</el-button>
							<!-- 指保存指标的上下限，在走势图才显示 -->
							<el-button v-if="activeTab==='Chart'&&isEdbBtnShow('saveEdb')"
								type="text" @click.stop="saveEdbLimit">保存</el-button>
							<el-button v-if="EdbData.EdbType===2&&isEdbBtnShow('toSource')"
								type="text" @click="toHistoryPage(selected_edbid,$route.matched);lookEdbId=selected_edbid">指标溯源</el-button>
							<el-popover v-if="showPopver"
								placement="bottom-end" 
								trigger="hover"
								popper-class="edb-tool-popover"
								width="300" style="display: inline-block;">
								<div class="edb-tool-wrap">
									<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&&isEdbBtnShow('calculateAgain')"
										type="text" @click.stop="reCalculateHandler" :loading="calculateLoading">重新计算</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&&isEdbBtnShow('deleteEdb')"
										type="text" @click="removeNode(_,EdbData)" style="color:#C54322;">删除</el-button>
								</div>
								<div class="edb-btn" slot="reference">
									<el-button type="text">更多操作</el-button>
									<i class="el-icon-more" style="font-size: 14px;transform: rotate(90deg);cursor: pointer;color: #3375e1;"/>
								</div>
							</el-popover>
						</div>
					</div>
					<div class="container" id="detail-container">
						<div class="chart" v-show="activeTab==='Chart'">
							<chart-trend-render
								:edbid="selected_edbid"
								:chartLang="currentLang"
								:isShowChartBasis="isEdbBtnShow('showChartBasis')"
								:isAllowSwitchSeason="isEdbBtnShow('switchSeason')"
								:isAllowEditLimit="isEdbBtnShow('editLimit')"
								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>
		</div>
		<!-- 输入英文指标弹窗 -->
		<set-en-name-dia :isOpenDialog="setEnName" @cancel="setEnName=false" 
		:formData="formItemArray" @updateEnName="updateEnName" cType="ebd" />

		<!-- 目录弹窗 -->
		<openDialog 
			:isOpenDialog="isOpenDialog"
			:title="dialog_title"
			:formData="dialogForm"
			@closeDia="isOpenDialog=false"
			@sucessCallback="sucessCallback"
		/>
		<!-- 指标弹窗 -->
		<addTargetDiaBase
			ref="addTargetDiaBase"
			:isAddTarget="isAddTarget"
			@cancelHandle="isAddTarget = false"
			@addSuccessHandle="addTargetSuccess"
		/>
		<!-- 完善指标信息 -->
		<completeTargetDia
			:isOpenDialog="isComplete"
			@cancel="cacelCompleteCallback"
			:params="add_params"
			@addTargetCallback="addTargetCallback"
		/>
		<!-- 计算指标弹窗 -->
		<computedDialog
			:isOpenComputed="computed_type === 4"
			:title="computedTit"
			:calulateForm="calulateForm"
			:calulateList="calulateList"
			@cancel="computed_type=0"
			@addCallBack="addComputedCallBack"
			@openPrev="isOpenComputed=true"
			@lookHistory="id => {toHistoryPage(id,$route.matched);lookEdbId=id;}"
		/>
		<!-- 计算弹窗控制 -->
		<el-dialog
		:visible.sync="isOpenComputed"
		:close-on-click-modal="false"
		:modal-append-to-body='false'
		@close="isOpenComputed=false;"
		custom-class="dialog-computed"
		top="6vh"
		center
		width="920px"
		v-dialogDrag>
			<div class="dialog-computed-header">
				<el-radio-group v-model="computed_source" size="medium" @change="computed_type = 0">
					<el-radio-button :label="1">常规计算</el-radio-button>
					<el-radio-button :label="2">批量计算</el-radio-button>
				</el-radio-group>
			</div>
			<ul class="computed-ul">
				<li
					:class="['cpmputed-li',{'act':item.type === computed_type}]" 
					v-for="item in computedTypes" 
					:key="item.type" 
					@click="changeComputedType(item.type)">
					{{item.name}}

					<el-popover
						placement="top-start"
						width="450"
						trigger="hover"
						v-if="tips.get(item.type)"
					>
						<p style="padding:20px;line-height:25px;" v-html="tips.get(item.type)"/>
						<i slot="reference" class="el-icon-warning-outline"/>
					</el-popover>
				</li>
			</ul>
		</el-dialog>
		<!-- 转月值 同比 同差 平均值弹窗 -->
		<operationDialog
			:isOperation="([5,6,7,8,12,13,14,22,35,51,52,61,62,63,75].includes(computed_type) || (computed_type===40&&operationForm.view)) && computed_source===1"
			:type="computed_type"
			:operationForm="operationForm"
			@cancel="computed_type=0"
			@addCallBack="addComputedCallBack"
			@openPrev="isOpenComputed=true"
			@lookHistory="id => {toHistoryPage(id,$route.matched);lookEdbId=id;}"
			@changeSource="changeComputedType"
		/>
		<!-- 一键成图弹窗 -->
		<!-- <create-chart
			:isCreateChart="isCreateChart"
			:edbid="selected_edbid"
			:chartLang="currentLang"
			ref="createChart"
			@close="isCreateChart = false"
			@editEnName="openEnNameDia"
		/> -->

		<!-- 一键更新弹窗 -->
		<update-dialog
			:isUpdate="isUpdate"
			@cancel="isUpdate = false"
		/>

		<!-- 替换指标弹窗 -->
		<replace-dialog
			:isShow="isReplaceDia"
			@cancel="isReplaceDia = false"
		/>

		<!-- 拼接弹窗 -->
		<joint-target-dia
			:isShow="computed_type === 'joint'"
			:params="operationForm"
			@cancel="computed_type=0"
			@addCallBack="addComputedCallBack"
			@openPrev="isOpenComputed=true"
		/>

		<!-- 拟合残差弹窗 -->
		<fittingResidueDia
			:isShow="computed_type === 37 && computed_source===1"
			:type="37"
			:operationForm="operationForm"
			@cancel="computed_type=0"
			@addCallBack="addComputedCallBack"
			@openPrev="isOpenComputed=true"
		/>

		<!-- 批量计算弹窗 -->
		<batchComputedDialog
			:isBatchComputed="[6,7,8,12,13,14,5,61,62,63,75].includes(computed_type) && computed_source===2"
			:type="computed_type"
			@cancel="computed_type=0"
			@addCallBack="addComputedCallBack"
			@openPrev="isOpenComputed=true"
			@lookHistory="id => {toHistoryPage(id,$route.matched);lookEdbId=id;}"
			@changeSource="changeComputedType"
		/>

		<!-- 扩散指数弹窗 -->
		<diffusionIndexDialog
			:isShow="computed_type === 53 && computed_source===1"
			:type="computed_type"
			:operationForm="operationForm"
			@cancel="computed_type=0"
			@addCallBack="addComputedCallBack"
			@openPrev="isOpenComputed=true"
		/>

		<!-- 添加最新值弹窗 -->
		<updateNewestDataDia
			:isShow.sync="isUpdateNewestData"
			:edbinfo="tableData[0]"
			:dataList="dataList"
			@success="updateNewest"
		/>

		 <!-- 指标历史记录 -->
    <!-- <edbHistoryDialog
      :isOpenDialog.sync="isLookHistory"
      :edbId="lookEdbId"
    /> -->
		<!-- 指数修匀弹窗 -->
		<SmoothEdbDialog 
			:is-open-smooth="computed_type==='alpha'"
			:computed-source="computed_source"
			:operationForm="operationForm"
			@cancel="computed_type=0"
			@openPrev="isOpenComputed=true"
			@addCallBack="addComputedCallBack"
			@lookHistory="id => {toHistoryPage(id,$route.matched);lookEdbId=id;}"
		/>
	</div>
</template>

<script>
import { dataBaseInterface } from '@/api/api.js';
import { computedTypes,computedBatchTypes,formulaTip } from './databaseComponents/util';

import openDialog from './databaseComponents/openDialog';
import addTargetDiaBase from './databaseComponents/addTargetDiaBase';
import completeTargetDia from './databaseComponents/completeTargetDia'
import computedDialog from './databaseComponents/computedDialog';
import operationDialog from './databaseComponents/operationDialog';
import createChart from './databaseComponents/createChart';
import updateDialog from './databaseComponents/updateDialog';
import replaceDialog from './databaseComponents/replaceDialog';
import jointTargetDia from './databaseComponents/jointTargetDia';
import changeLang from "./components/changeLang.vue"
import setEnNameDia from "./components/setEnNameDia.vue"
import dataAssociateChart from './databaseComponents/dataAssociateChart.vue'
import dataAssociateComputeData from './databaseComponents/dataAssociateComputeData.vue'
import fittingResidueDia from './databaseComponents/fittingResidueDia.vue';
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';
import SmoothEdbDialog from './databaseComponents/smoothEdbDialog.vue';
export default {
	name: '',
	components: {
		openDialog,
		addTargetDiaBase,
		completeTargetDia,
		computedDialog,
		operationDialog,
		createChart,
		updateDialog,
		replaceDialog,
		jointTargetDia,
		changeLang,
		setEnNameDia,
		dataAssociateChart,
		dataAssociateComputeData,
		fittingResidueDia,
		batchComputedDialog,
		diffusionIndexDialog,
		updateNewestDataDia,
		EdbLabelList,
		chartTrendRender,
		edbDetailData,
		SmoothEdbDialog,
	},
	directives: {
		drag(el, bindings,vnode) {
			el.onmousedown = function(e) {
				var init = e.clientX;
				var box = $("#box")[0]
				let total_wid = box.offsetWidth
				var left = $("#left")[0];
				var right = $("#right")[0];
				var initWidth = left.offsetWidth;
				document.onmousemove = function(e) {
					var end = e.clientX;
					if(end > 310){
						var newWidth = end - init + initWidth;
						right.style.width = total_wid - newWidth + 'px'
						left.style.width = newWidth + "px";
					}else{
						end = 350;
						// 最小宽度300
						left.style.width = 300 + "px";
						// right.style.width = total_wid-300-20 +'px'
					}
					
				};
				document.onmouseup = function() {
					document.onmousemove = document.onmouseup = null;
					e.releaseCapture && e.releaseCapture();
					//移动结束触发重绘
					vnode.context.rePainChart()
				};
				e.setCapture && e.setCapture();
				return false;
			};
		}
	},
	data() {
		return {
			showData: false,
			search_txt: '', //搜索词
			searchOptions:[],//搜索到的筛选列表
			treeData: [], //树形数据
			defaultShowNodes:[], //默认展开的节点
			defaultProp: {
				label: 'ClassifyName',
				children: 'Children',
				isLeaf:'isLeaf'
			},//树结构配置项
			tableData: [],
			loading:null,
			showTable:false,
			page_no: 1,
			/*表格列 */
			tableColumsOne: [
				{
					label: '指标ID',
					key: 'EdbCode',
					minwidthsty: '150px'
				},
				{
					label: '指标名称',
					key: 'EdbName',
					enKey:'EdbNameEn',
					inputTip:'点击输入英文指标名称',
					minwidthsty: '200px'
				},
				{
					label: '频度',
					key: 'Frequency',
					enKey:'FrequencyEn',
					widthsty: '100px'
				},
				{
					label: '单位',
					key: 'Unit',
					enKey:'UnitEn',
					inputTip:'英文单位',
					// minwidthsty: '50px'
					widthsty: '100px'
				},
				{
					label: '数据来源',
					key: 'SourceName',
					widthsty: '160px'
				},
			],
			tableColumsTwo: [
				{
					label: '指标目录',
					key: 'Menu',
					minwidthsty: '150px',
				},
				{
					label: '起始时间',
					key: 'StartDate',
					minwidthsty: '115px',
				},
				{
					label: '更新时间',
					key: 'ModifyTime',
					minwidthsty: '120px',
				},
				{
					label: '添加人',
					key: 'SysUserRealName',
					widthsty: '160px',
				}
			],
			haveMore: true,
			selected_edbid: 0,//选中的指标id
			dataList: [],//指标数值
			new_label: '',//新的节点label值
			select_node:'',//当前选中的节点
			/* 新增编辑目录弹窗 */
			isOpenDialog:false,
			dialog_title: '',
			dialogForm:{
				level:''
			},
			/* 新增指标弹窗 */
			isAddTarget: false,
			/* 完善信息 */
			isComplete:false,
			add_params:{},
			defaultWarn:'请在左侧选择指标',//缺省文字
			/* 计算指标弹窗 */
			isOpenComputed:false,
			computedTit:'',
			calulateForm:{},
			calulateList:[],
			computed_type:0,//打开弹窗的类型
			operationForm:{},
			dynamicNode:null,
		
			edb_source:0,//指标来源 显示计算按钮
			calculateLoading: false,//计算指标刷新loading
			refreshLoading: false,//基础指标刷新loading
			/* 一键成图弹窗 */
			isCreateChart: false,
			/* 一键更新弹窗 */
			isUpdate:false,
			/* 替换指标弹窗 */
			isReplaceDia: false,
			/* 拼接指标弹窗 */
			isJoint: false,

			search_page: 1,
			search_have_more: false,
			current_search:'',
			currentLang:'ch', // 语言 ch 中文 en 英文
			// -----------------设置英文指标弹窗
			setEnName:false,
			// 传入的formItem所需内容
			formItemArray:[],
			// 在哪里更新的英文指标 table(表格上) chart(图表里)
			updateType:'table',
			// ----------------------
			edb_levels:[],//指标的父级分类id

			showAssociateChart:false,//显示指标关联的图
			showAssociateComputeData:false,//显示指标关联的引用计算指标

			tips: formulaTip,//公式说明

			computedBatchTypes,
			computed_source: 1,//计算类型 1常规 2批量
			isBatchComputed: false,//批量计算弹窗

			//添加最新值弹窗
			isUpdateNewestData: false,

			/* 查看历史弹窗 */
			isLookHistory: false,
			lookEdbId: 0,
			labelList:[],//标签列表

			CanOpClassify: false,

			select_classifyId:0,//指标分类id
			PageSize:20,
			CurrentIndex:1,
			Total:0,
			IsListEnd:false,//是不是到底了
			chartList:[],

			activeTab:'',
			activeName:'second',

			isMainLeftShow:true,
		};
	},
	watch: {
		selected_edbid(newval) {
			if(!newval) {
				this.tableData = [];
				this.dataList = [];
				this.defaultWarn = '请在左侧选择指标';
				this.activeTab=''
			}else {
				console.log('new val')
				this.activeTab='Chart'
				this.initGetData();
			}
		},
		/* 选中搜索指标 展开目录 选中指标 展示数据 */
		search_txt(newval) {
			if (newval) {
				let [search_obj] = this.searchOptions.filter(
					(item) => item.EdbInfoId === newval
				);
				this.page_no = 1;
				if(this.$refs.edb_detail_data){
					this.$refs.edb_detail_data.$refs.valueUl.scrollTop=0
				}
				this.select_node = search_obj.UniqueCode;
				this.selected_edbid = newval;
			}
		},
		select_classifyId(newval){
			if(this.$refs.listRef) this.$refs.listRef.scrollTop = 0;
			if(newval){
				this.CurrentIndex = 1
				this.getEdbChartList()
			}
		},
		isMainLeftShow(newVal){
			this.rePainChart()
		},
	},
	computed: {
			/* 计算弹窗控制 */
		computedTypes() {
			return this.computed_source===1 ? computedTypes : computedBatchTypes;
		},
		role() {
			let role = localStorage.getItem('Role') || '';
			if (['rai_researcher', 'ficc_researcher', 'researcher','ficc_seller','rai_seller','seller'].includes(role)) {
				return 'researcher'
			}else if(['rai_admin','ficc_admin'].includes(role)) {
				return 'admin'
			}
			else {
				return role;
			}
		},
		/* 登录角色id */
		roleId() {
			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
		},
		//是否显示更多操作
		showPopver(){
			return this.isEdbBtnShow('setEn')||
			this.EdbData.Button.InsertNewDataButton&&this.isEdbBtnShow('newValue')||
			this.EdbData.EdbType===2&&this.isEdbBtnShow('calculateAgain')||
			this.EdbData.EdbType===1&&this.isEdbBtnShow('refreshAll')||
			this.isEdbBtnShow('copyData')||
			this.EdbData.Button.DeleteButton&&this.isEdbBtnShow('deleteEdb')
		}
	},
	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,//全部刷新
				'saveEdb':edbDataPermission.edbData_saveEdb,//保存指标
				'deleteEdb':edbDataPermission.edbData_deleteEdb,//删除指标
				'showChartBasis':edbDataPermission.edbData_showChartBasis,//展示/隐藏同比图
				'switchSeason':edbDataPermission.edbData_switchSeason,//切换季节性图
				'editLimit':edbDataPermission.edbData_editLimit,//编辑上下限
				'calculateAgain':edbDataPermission.edbData_calculateAgain,//重新计算

				'editCatalog':edbDataPermission.edbData_classifyOpt_add,//添加编辑目录
				'deleteCatalog':edbDataPermission.edbData_classifyOpt_delete,//删除目录
				'moveCatalog':edbDataPermission.edbData_classifyOpt_move,//删除目录
				'checkRelatedChart':edbDataPermission.edbData_checkRelatedChart,//查看关联图表
				'checkRelatedEdb':edbDataPermission.edbData_checkRelatedEdb,//查看关联指标
				'checkCalcChart':edbDataPermission.edbData_checkCalcChart,//查看计算指标
			}
			return checkPermissionBtn(BtnMap[type])
		},
		/* 获取树分类数据 */
		getTreeData(params) {
			
			dataBaseInterface.targetCatalog({ParentId:0}).then(res=>{
				if(res.Ret===200){
					const arr=res.Data.AllNodes || []
					this.treeData=arr.map(item=>{
						return {
							...item,
							// isLeaf:item.Children.length?false:true
						}
					})
					this.CanOpClassify = res.Data.CanOpClassify;
					this.currentLang = res.Data.Language === 'EN' ? 'en' : 'ch';
					this.setLangIntoStore()
					this.showData = true;
					/* 处理树展开和选中图表 */
					params && this.selectCurrentNode(params);
					!params && this.select_node && this.$refs.menuTree.setCurrentKey(this.select_node);
				}
			})
		},
		/* 获取最新的指标 默认展示 */
		getNewTargetList: _.throttle(function() {
			dataBaseInterface.targetNew().then(res => {
				if(res.Ret === 200) {
					/* 默认选中 默认指标id */
						this.select_node = res.Data ? res.Data.UniqueCode : '';
						this.selected_edbid = res.Data ? res.Data.EdbInfoId : 0;
						this.getTreeData();
				}
			})
		}),
		/* 获取指标数据 */
		getDataList: _.throttle(function(type) {
			dataBaseInterface.targetList({
				PageSize: 20,
				CurrentIndex: this.page_no,
				EdbInfoId: this.selected_edbid,
				// KeyWord: this.search_txt,
			}).then(res => {
				if(res.Ret === 200) {
					this.showTable = true;
					if(res.Data) {
						// res.Data.Item.ModifyTime = res.Data.Item.ModifyTime.substr(0,10);
						let classify_arr = res.Data.ClassifyList || [];
						let str = '';
						classify_arr.length && classify_arr.reverse().map((item) => str += item.ClassifyName + '/');
						this.edb_levels = classify_arr;
						this.$set(res.Data.Item,'Menu',str);
						this.tableData = [res.Data.Item] || [];
						this.edb_source = res.Data.Item.Source;
						this.haveMore =  this.page_no < res.Data.Paging.Pages ? true : false;
						this.dataList = this.page_no === 1 ? (res.Data.Item.DataList || []) : this.dataList.concat(res.Data.Item.DataList);
						
						//将指标添加进标签列表中
						const {EdbNameEn,EdbName,EdbInfoId,UniqueCode,ClassifyId}=res.Data.Item
						this.addLabel({code:UniqueCode,id:EdbInfoId,classifyId:ClassifyId,EdbName,EdbNameEn})
						// 展开目录
						this.defaultShowNodes=classify_arr.map(item=>item.UniqueCode)
						//设置tree高亮
						this.$nextTick(()=>{
							setTimeout(() => {
								this.$refs.menuTree.setCurrentKey(UniqueCode);
							}, 1000);
						})
						

					}else {
						this.tableData = [];
						this.dataList = [];
						this.defaultWarn = type=== 'search' ? '未搜索到该指标' : '请在左侧选择指标'

						this.$refs.menuTree.setCurrentKey(null)
						// 清除当前的label
						this.$message.warning('该图表已删除，自动查看下一图表')
						this.deleteLabel({code:this.select_node,id:this.selected_edbid,classifyId:''})
						
					}
					if(type==='refresh') {
						if(this.$refs.edb_detail_data){
							this.$refs.edb_detail_data.$refs.valueUl.scrollTop=0
						}
					}
					this.$nextTick(()=>{
						const _node = this.$refs.menuTree.getNode(this.select_node)
						this.dynamicNode = _node;
						this.dynamicNode&&this.resetNodeStyle(this.dynamicNode)
						//滚动到高亮位置
						setTimeout(() => {
							let node = document.getElementById(`node${this.select_node}`)||{}
							let parent = document.getElementsByClassName('target_tree')[0];
							//parent可视区间：[scrollTop,scrollTop+offsetHeight]
							//node位置:node.offsetTop
							const overTop = node.offsetTop+node.clientHeight+30<parent.scrollTop
							const overBottom = node.offsetTop+node.clientHeight+30>parent.scrollTop+parent.offsetHeight
							if(overTop){
								parent.scrollTop = node.offsetTop-60
							}
							if(overBottom){
								parent.scrollTop =  node.offsetTop - parent.offsetHeight/2
							}
						},1500)
					})
					
				}
			})
		}),
		//获取指标图表列表
		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-210 && !this.IsListEnd){
				this.CurrentIndex++;
				this.getEdbChartList();
			}
			},300),
		/* 搜索 */
		searchHandle(query) {
			this.search_page = 1;
			this.current_search = query;
			this.searchApi(this.current_search)
		},

		searchApi(query,page=1) {
			dataBaseInterface.targetSearchByPage({
				KeyWord:query,
				CurrentIndex: page
			}).then(res => {
				if(res.Ret !== 200) return

				const { List,Paging } = res.Data;
				this.search_have_more = page < Paging.Pages;
				this.searchOptions = page === 1 ? List : this.searchOptions.concat(List);
					
			})
		},

		/* 聚焦获取当前检索 */
		inputFocusHandle(e) {
			this.search_page = 1;
			this.current_search = e.target.value;
			this.searchApi(this.current_search);
		},

		searchLoad() {
			if(!this.search_have_more) return;
			this.searchApi(this.current_search,++this.search_page);
		},

		/* 存储中英文状态 */
		setLangIntoStore() {
			this.$store.commit('edb/SET_LANG',this.currentLang)
		},

		/* 数值滚动加载 */
		scrollHandle: _.throttle(function() {
			let scrollTop = this.$refs.valueUl.scrollTop;
      let clientHeight = this.$refs.valueUl.clientHeight;
      let scrollHeight = this.$refs.valueUl.scrollHeight;
      console.log('scrollTop:',scrollTop)
      console.log('clientHeight:',clientHeight)
      console.log('scrollHeight:',scrollHeight)
			if(scrollTop + clientHeight >= scrollHeight-10 && this.haveMore){
				this.page_no ++;
				this.getDataList();
			}
		},200),
		/* 切换中英文 */
		changeLanguage: _.debounce(async function (lang){
			this.search_txt = '';
			this.currentLang = lang;
			await dataBaseInterface.setUserLang({
				ConfigCode: 'edb_language',
				ConfigValue: lang === 'en' ? 'EN' : 'CN'
			})

			this.setLangIntoStore()
		},200),
		// 打开 编辑英文名称弹窗
		openEnNameDia(type='table'){
			this.updateType = type
			this.formItemArray=[{
				label:'指标名称',
				value:this.tableData[0].EdbName,
				key:'EdbName',
				notEdit:true
			}]
			// 中文单位有 才能编辑英文单位
			if(this.tableData[0].Unit && this.tableData[0].Unit!='无'){
				this.formItemArray.push({
					label:'单位',
					value:this.tableData[0].Unit,
					key:'Unit',
					notEdit:true
				},
				{
					label:'英文指标名称',
					value:this.tableData[0].EdbNameEn,
					key:'EdbNameEn',
					placeholder:'请输入英文指标名称'
				},
				{
					label:'英文单位',
					value:this.tableData[0].UnitEn,
					key:'UnitEn',
					placeholder:'请输入英文单位'
				})
			}else{
				this.formItemArray.push({
					label:'英文指标名称',
					value:this.tableData[0].EdbNameEn,
					key:'EdbNameEn',
					placeholder:'请输入英文指标名称'
				})
			}

			this.setEnName = true
		},
		updateEnName(item){
			let params={
				EdbInfoId: Number(this.selected_edbid),
				...item
			}
			dataBaseInterface.edbInfoEditEn(params).then(res=>{
				if(res.Ret ==200){
					this.$message({
						message:res.Msg,
						type:"success"
					})
					/* this.tableData[0].EdbNameEn = params.EdbNameEn
					this.tableData[0].UnitEn = params.UnitEn
					// 判断图表英文名称和英文单位是否都有，都有需要打上 英文标记
					console.log(this.tableData[0].EdbNameEn,this.tableData[0].UnitEn);
					if(this.tableData[0].EdbNameEn && (this.tableData[0].UnitEn || this.tableData[0].Unit == '无')){
						this.tableData[0].IsEnEdb=true
					}else{
						this.tableData[0].IsEnEdb=false
					} */
					this.getTreeData()
					this.getDataList()
					if(this.updateType=='chart'){
						// 重绘图表，刷新数据
						this.$refs.createChart.getEdbData()
					}
					this.setEnName = false
				}
			})
		},
		/* 新增指标 */
		addHandler() {
			this.isAddTarget = true;
		},
		/* 完善指标信息 */
		completeTargetHandle(params) {
			this.add_params = params;
			this.isComplete = true;
		},
		/* 新增指标成功回调 */
		addTargetCallback(params) {
			this.$refs.addTargetDiaBase.init();
			this.isComplete = false;
			this.isAddTarget = false;
			this.getTreeData(params);
			this.changeTreeNode()
			// this.getNewTargetList();
		},
		/* 取消新增回调 */
		cacelCompleteCallback() {
			this.isComplete = false
			this.add_params = {}
		},
		/* 节点变化时 */
		nodeChange(data,node) {
			this.search_txt = '';
			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];
			let width = tree.offsetWidth;
			console.log(width)
			// let label_wid = width > 500 ? 'auto' : (width <= 300 && width < 360) ?  100 : 0.7*width;
			let label_wid =
				width > 500
					? 'auto'
					: width <= 260
					? 80
					: 0.4 * width;
			this.$set(node, 'Nodewidth', label_wid + 'px');
		},200),
		/* 双击label出现input修改框 */
		editNodeLabel(node, data) {
			//目录名称可以双击修改 指标不能
			if(!data.EdbCode && this.role === 'admin'&&this.isEdbBtnShow('editCatalog')) {
				this.$set(data,'isEdit',true)
				this.new_label = data.ClassifyName;
				this.$nextTick(() => {
					this.$refs.editVal.focus();
				});
			}
		},
		/* input失去焦点恢复node 修改最新的值*/
		changeValue(node, data) {
			if(this.new_label) {
				this.$set(data,'isEdit',false)
				this.new_label !== data.ClassifyName && dataBaseInterface.nodeEdit({
						ClassifyId: data.ClassifyId,
						ClassifyName: this.new_label
					}).then(res => {
						if(res.Ret === 200) {
							this.getTreeData();
						}
					})
			}else {
				this.$message.warning('名称不能为空')
			}
		},
		/* 添加一级目录 */
		addLevelOneHandle() {
			this.dialog_title = '添加';
			this.dialogForm = {
				level_1: '',
				parent_id: '',
				level: 0
			}
			this.isOpenDialog = true;
		},
		// 递归节点
		getNodeParentData(data,arr){
			if(data.level===0) return
			arr.push({classifyName:data.data.ClassifyName,classifyId:data.data.ClassifyId})
			this.getNodeParentData(data.parent,arr)
			return arr
		},
		/* 添加节点 */
		addNode(node,data) {
			console.log(node);
			this.dialog_title = '添加';
			let arr=[]
			arr=this.getNodeParentData(node,arr)
			// console.log(arr);
			
				/* 添加目录 */
			this.dialogForm = {
				parentArr:arr,
				parent_id: data.ClassifyId,
				level: node.level,
				levelVal:'',
				isEDB:false
			}
			//存储当前要新增子级的目录code
			sessionStorage.setItem('expandCode', data.UniqueCode);
			this.isOpenDialog = true;
		},
		/* 编辑节点 */
		editNode(node,data) {
			// console.log(node);
			this.dialog_title = '编辑';
			if(data.EdbCode) {
				/* 编辑指标 基础弹窗 */
				
				(data.EdbType===1 || [58,59,67,68,74].includes(data.Source)) && dataBaseInterface.targetDetail({
					EdbInfoId: data.EdbInfoId
				}).then(res => {
					if(res.Ret === 200) {
						// 处理所在目录
						let menuArrId=res.Data.ClassifyList&&res.Data.ClassifyList.map(item=>{
							return item.ClassifyId
						}).reverse()
						this.dialogForm = {
							parentArr:[],
							level: 0,
							levelVal: res.Data.EdbName,
							level_menu:menuArrId||[],
							edbinfo_id: res.Data.EdbInfoId,
							frequency:res.Data.Frequency,
							unit:res.Data.Unit,
							isEDB:true
						}
						this.isOpenDialog = true;
					}
				});

				/* 编辑计算指标 同比同差转月 */
				(data.EdbType === 2 && ![27,40,58,59].includes(data.Source)) && dataBaseInterface.calculateDetail({
					EdbInfoId: data.EdbInfoId
				}).then(res => {
					if(res.Ret === 200) {
						this.setComputedDialogForm(data.Source,res.Data);
						
						switch (data.Source) {
							case 23: 
							case 24: 
								this.computed_type = 'joint';
								break
							case 72:
							case 73:
								this.computed_type = 'alpha';
								break
							default:
								this.computed_type = data.Source;
								break
						}
						// this.computed_type = [23,24].includes(data.Source) ? 'joint' : data.Source;
						// this.computed_type = [72,73].includes(data.Source)? 'alpha': data.Source;
					}
				})

				/* 代码运算 */
				data.Source === 27 && this.$router.push({
					path: '/codecount',
					query: {
						edbid: data.EdbInfoId
					}
				})

				/* 数据调整 */
				data.Source === 40 && this.$router.push({
					path: '/adjustdata',
					query: {
						edbid: data.EdbInfoId,
					}
				})


			}else {
				let arr=[]
				arr=this.getNodeParentData(node.parent,arr)
				/* 编辑目录 */
				this.dialogForm = {
					isEDB:false,
					parentArr:arr,
					levelVal: data.ClassifyName||'',
					classify_id: data.ClassifyId,
					level: node.level-1
				}
				this.isOpenDialog = true;
			}
		},
		/* 保存成功 */
		sucessCallback(type) {
			this.isOpenDialog = false;
			this.getTreeData();
			type==='update' && this.getDataList();
			if(type === 'add') {
				//新增分类完成之后，展开父节点显示刚新增的分类，若已展开节点则不做处理
				let code = sessionStorage.getItem('expandCode');
				let flag = 	this.defaultShowNodes.some((item) => {
					return item === code
				});
				// console.log(flag)
				!flag &&code&& this.defaultShowNodes.push(code);
				sessionStorage.removeItem('expandCode');
			}
		},
		/* 刷新获取指标最新数据 */
		refreshTargetHandle: _.debounce(function() {
			if(this.selected_edbid) {
				this.loading = this.$loading({
					lock: true,
					target:'.detail',
					text: '刷新数据中...',
					spinner: 'el-icon-loading',
					background: 'rgba(255, 255, 255, 0.8)'
				});
				dataBaseInterface.targetRefresh({
					EdbInfoId: this.selected_edbid
				}).then(res => {
					if(res.Ret === 200) {
						this.loading.close();
						this.$message.success(res.Msg);

						this.page_no = 1;
						this.getDataList('refresh')
					}else{
						this.loading.close();
					}
				})
			}
		},500), 
		/* 删除节点校验 */
		removeNode(node,data) {
			dataBaseInterface.nodeDelCheck({
				ClassifyId: data.ClassifyId,
				EdbInfoId: data.EdbInfoId
			}).then(res => {
				if(res.Ret === 200) {
					/**
					 * 0 可删除
					 * 1 关联指标
					 * 2 有子目录无指标
					*/
					const deleteLabelMap = {
						1: '该目录关联指标不可删除',
						2: '确认删除当前目录及包含的子目录吗？',
						3: '当前指标已用作画图，不可删除',
						4: res.Data.TipsMsg
					}

					if([1,3,4].includes(res.Data.DeleteStatus)) this.$confirm(
							deleteLabelMap[res.Data.DeleteStatus],
							'删除失败',
							{
							confirmButtonText: '知道了',
							showCancelButton:false,
							type: 'error'
						})
					else if([0,2].includes(res.Data.DeleteStatus)) this.$confirm(
							res.Data.DeleteStatus === 2 
							? deleteLabelMap[res.Data.DeleteStatus]
							: data.EdbCode?'删除后指标和指标值均不可使用，确认删除吗？':'确定删除当前目录吗?', 
							'提示',
							{
							confirmButtonText: '确定',
							cancelButtonText: '取消',
							type: 'warning'
						}).then(() => {
							this.delHandle(data.ClassifyId,data.EdbInfoId);
						}).catch(() => {         
						});
				}
			})

		},
		/* 删除方法 */
		delHandle(ClassifyId,EdbInfoId) {
			dataBaseInterface.nodeDelete({
				ClassifyId,
				EdbInfoId
			}).then(res => {
				if(res.Ret === 200) {
					this.$message.success(res.Msg);
					this.getTreeData();
					this.selected_edbid = 0;
					this.deleteLabel({code:this.select_node,id:EdbInfoId,classifyId:ClassifyId})
					// this.getNewTargetList();
				}
			})
		},
		/* 判断节点是否能被拖拽 */
		canDragHandle({data}) {
      		return data.Button.MoveButton;
		},
		/* 判断节点是否能被拖入 */
		canDropHandle(draggingNode, dropNode, type) {
			let canDrop=false
			
			// 如果拖动的是指标
			if(draggingNode.data.EdbCode){
				if(!(dropNode.level===1&&type!=='inner')){
					canDrop=true
				}
			}else{//拖动的是目录
				// console.log(dropNode.level,draggingNode.level);
				//目录层级不能改变
				if((dropNode.level+1==draggingNode.level&&type==='inner'&&!dropNode.data.EdbCode)||(dropNode.level===draggingNode.level&&type!=='inner')){
					canDrop=true
				}
			}
			return canDrop
		},
		/* 拖拽完成 */
		dropOverHandle(b,a,i,e) {
			// 被拖拽节点对应的 Node、结束拖拽时最后进入的节点、被拖拽节点的放置位置
			console.log(b,a,i);
			const isEDB=b.data.EdbCode?true:false
			let list=a.parent.childNodes;
			let targetIndex=0,PrevClassifyId=0,NextClassifyId=0,ParentClassifyId=0;
			let ClassifyId=0,EdbInfoId=0,PrevEdbInfoId=0,NextEdbInfoId=0;

			ClassifyId=isEDB?0:b.data.ClassifyId
			EdbInfoId=isEDB?b.data.EdbInfoId:0
			

			if(i!=='inner'){
				ParentClassifyId=a.parent.data.ClassifyId||0
				list.forEach((item,index)=>{
					if(isEDB){
						if(item.data.EdbInfoId===b.data.EdbInfoId){
							targetIndex=index
						}
					}else{
						if(item.data.ClassifyId===b.data.ClassifyId){
							targetIndex=index
						}
					}
					
				})

				console.log(targetIndex);
				
				
				if(targetIndex===0){
					const data=list[targetIndex+1].data
					NextClassifyId=data.EdbCode?0:data.ClassifyId
					NextEdbInfoId=data.EdbCode?data.EdbInfoId:0
				}else if(targetIndex===list.length-1){
					const data=list[targetIndex-1].data
					PrevClassifyId=data.EdbCode?0:data.ClassifyId
					PrevEdbInfoId=data.EdbCode?data.EdbInfoId:0
				}else{
					const pData=list[targetIndex-1].data
					PrevClassifyId=pData.EdbCode?0:pData.ClassifyId

					PrevEdbInfoId=pData.EdbCode?pData.EdbInfoId:0

					const nData=list[targetIndex+1].data
					NextClassifyId=nData.EdbCode?0:nData.ClassifyId
					NextEdbInfoId=nData.EdbCode?nData.EdbInfoId:0
				}
			}else{
				ParentClassifyId=a.data.ClassifyId||0
			}

			const params={
				ClassifyId,
				ParentClassifyId,
				EdbInfoId,
				PrevClassifyId,
				NextClassifyId,
				PrevEdbInfoId,
				NextEdbInfoId
			}
			console.log(params);
			dataBaseInterface.classifyMoveSort(params).then(res=>{
				if(res.Ret===200){
					this.$message.success('移动成功!')
				}
				this.getTreeData()
				if(this.selected_edbid){
					this.getDataList();
				}
				
			})
		},

		/* 拖拽覆盖添加背景色 */
		dropMouseOver(node1,node2,e) {
			// console.log(e.layerY);
			
			// 被拖拽节点对应的 Node、所进入节点对应的 Node、event
			if(!node2.data.EdbInfoId&&(node1.level>node2.level||(node1.data.EdbInfoId>0&&!node2.data.EdbInfoId)) && (e.target.childNodes[0].className.includes('el-tree-node__content') 
			|| e.target.className.includes('el-tree-node__content'))) {
				// console.log(e.target.childNodes[0])
				e.target.childNodes[0].className.includes('el-tree-node__content') 
				? e.target.childNodes[0].style.backgroundColor = '#409eff' 
				: e.target.style.backgroundColor = '#409eff';
			}
			
		},
		/* 拖拽离开/拖拽完成重置背景色 */
		dropMouseLeave(node1,node2,e) {
			let arrs = $('.el-tree-node__content');
			for( let a of arrs ) {
				a.style.backgroundColor = 'transparent';
			}
		},
		// 树节点展开
		handleNodeExpand (data) {
			// 保存当前展开的节点
			let flag = this.defaultShowNodes.some((item) => item === data.UniqueCode);
			if (!flag) { // 不存在则存到数组里
				this.defaultShowNodes.push(data.UniqueCode)
			}
		},
		// 树节点关闭
		handleNodeCollapse (data) {
			this.defaultShowNodes.some((item, index) => {
				if (item === data.UniqueCode) {
					// 删除关闭节点
					this.defaultShowNodes.length = index
				}
			})
		},
		/* 根据unicode展开树结构并选中指标 */
		selectCurrentNode({ code, id,classifyId }) {
			console.log(code, id,classifyId);
			this.select_node = code;
			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];
					//console.log('滚动',node,parent);
					if(node.offsetTop > parent.offsetHeight) {
						parent.scrollTop =  node.offsetTop - parent.offsetHeight/2
					}
				},400)
			}) */
		},
		// 查找树节点所有父节点
		findParentNodeHandle(arr, id) {
			// 遍历取父级code push数组
			for (let i of arr) {
				if (i.ClassifyId === id) {
					return [i.UniqueCode];
				}
				if (i.Children) {
					let node = this.findParentNodeHandle(i.Children, id);
					if (node) {
						return node.concat(i.UniqueCode);
					}
				}
			}
		},
		// 通过分类id找到指标所属的分类
		findParentNodeForClassifyId(id,code){
			let arr=[]
			this.treeData.forEach(item=>{
				if(item.Children){
					item.Children.forEach(_item=>{
						if(_item.ClassifyId==id){
							arr=[item.UniqueCode,_item.UniqueCode]
						}
					})
				}
			})
			return [...arr,code]
		},
		/* 添加计算指标 */
		addComputedHandler() {
			this.computedTit = '计算指标';
			this.calulateList = [];
			this.calulateForm = {};
			this.operationForm = {};
			this.isOpenComputed = true;
		},
		/* 新增计算指标回调 */
		addComputedCallBack(type, params) {
			this.computed_type = 0;
			this.computed_source = 1;
			this.showAssociateChart=false
			this.showAssociateComputeData=false
			// this.getTreeData();
			type === 'add' ? this.getTreeData(params) : this.getTreeData();
			type === 'edit' && this.initGetData()
		},

		initGetData() {
			this.page_no = 1;
			if(this.$refs.edb_detail_data){
				this.$refs.edb_detail_data.$refs.valueUl.scrollTop=0
			}
			this.getDataList();
		},

		/* 选择计算类型 */
		changeComputedType(type) {
			//保证source的对应关系
			let typeMapSource = {
				'toMonthSeason': 5,
				'accumulate': 62
			}
			this.computed_type = typeMapSource[type] || type;
			this.isOpenComputed = false;
		},
		/* 重新计算 */
		reCalculateHandler() {
			this.calculateLoading = true;
			dataBaseInterface.reCalculateTarget({
				EdbInfoId: Number(this.selected_edbid)
			}).then(res => {
				this.calculateLoading = false;
				if(res.Ret !== 200) return;
				this.$message.success(res.Msg);
				this.initDataStatus();
			}).catch(() => {
				this.calculateLoading = false;
			})
		},

		/* 查看计算公式 打开弹窗 */
		viewNode(node,data) {
			const { EdbInfoId,Source } = data;

			//代码运算指标
			if( Source === 27 ) return this.$router.push({
				path: '/codecount',
				query: {
					edbid: EdbInfoId,
					isView: true
				}
			})

			dataBaseInterface.calculateDetail({
				EdbInfoId,
			}).then(res => {
				if(res.Ret !== 200) return
				this.setComputedDialogForm(Source,res.Data,true);
				switch (data.Source) {
					case 23: 
					case 24: 
						this.computed_type = 'joint';
						break
					case 72:
					case 73:
						this.computed_type = 'alpha';
						break
					default:
						this.computed_type = data.Source;
						break
				}
			})
		},

		/* 设置回显计算指标的表单 */
		setComputedDialogForm(type,res,view=false) {
			//指标运算 or 其他计算类型指标

			// 处理所在目录
			let menuArrId=res.EdbInfoDetail.ClassifyList&&res.EdbInfoDetail.ClassifyList.map(item=>{
				return item.ClassifyId
			}).reverse()

			if( type === 4 ) {
				/* 回显指标和表单 */
				const list = res.CalculateList;
				this.computedTit = view ? '查看计算指标' : '编辑计算指标';
				/* 依赖的指标列表 */
				this.calulateList = list.map(item => {
					return {
						tag: item.FromTag,
						edb_name: item.FromEdbName,
						target: item.FromEdbInfoId,
						start_date: item.StartDate,
						end_date: item.EndDate
					}
				})
				const { EdbInfoId,CalculateFormula,EdbName,Unit,Frequency,EmptyType,MaxEmptyType } = res.EdbInfoDetail;
				/* 公式和表单 */
				this.calulateForm =  {
					edb_id: EdbInfoId,
					formula: CalculateFormula,
					menu: menuArrId||[],
					targetName: EdbName,
					unit: Unit,
					frequency: Frequency,
					emptyType: EmptyType,
					maxEmptyType: MaxEmptyType,
					view
				};
			} else  {
				let dataInfo = res.EdbInfoDetail;
				let old_edb = res.CalculateList;

				let public_params = {
					edb_id: dataInfo.EdbInfoId,
					targetName: dataInfo.EdbName,
					frequency: dataInfo.Frequency,
					unit: dataInfo.Unit,
					menu: menuArrId||[],
					view
				}

				this.operationForm = [23,24,37,53].includes(type)
					? {
							...public_params,
							source: dataInfo.Source,
							date: dataInfo.CalculateFormula,
							pre_edb: type === 23 ? old_edb.find(item => item.FromTag === 'A').FromEdbInfoId : '', //俺也不懂为什么这么定义都是江西老表的锅
							after_edb: type === 23 ? old_edb.find(item => item.FromTag === 'B').FromEdbInfoId : '',
							old_stay_edb: type === 24 ? old_edb.find(item => item.FromTag === 'A').FromEdbInfoId : '',
							concat_edb: type === 24 ? old_edb.find(item => item.FromTag === 'B').FromEdbInfoId : '',
							from_arr: old_edb,
							correlationStr: dataInfo.CorrelationStr
						} 
					: {
							...public_params,
							oldedb_id: old_edb[0].FromEdbInfoId,
							oldEdb_name: old_edb[0].FromEdbName,
							formula: dataInfo.CalculateFormula || '',
							moveType: dataInfo.MoveType,
							moveUnit: dataInfo.MoveFrequency,
							moveVal: type === 22 ? dataInfo.CalculateFormula : '',
							calendar_type: type === 35 ? dataInfo.Calendar : '',
					}

				if([72,73].includes(type)){
					const {EdbName,EdbInfoId,Frequency,Unit,ClassifyId,CalculateFormula} = dataInfo
					this.operationForm = {
						edb_id: EdbInfoId,
						oldedb_id: old_edb[0].FromEdbInfoId,
						oldEdb_name: old_edb[0].FromEdbName,
						EdbName,Frequency,Unit,ClassifyId,Formula:CalculateFormula,
						view
					}
				}
			}
		},

		/* 基础指标刷新 */
		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();
			}).catch(() => {
				this.refreshLoading = false;
			})
		},

		/* 	一键成图 */
		createChartHandle() {
			this.isCreateChart = true;
		},
		
		/* 重新刷新 重新计算后重置刷数据 */
		initDataStatus() {
			this.page_no = 1;
			if(this.$refs.edb_detail_data){
				this.$refs.edb_detail_data.$refs.valueUl.scrollTop=0
			}
			this.getDataList();
		},
		/* 用于复制指标 */
		async copyCode(){
			const res = await dataBaseInterface.targetList({
				PageSize: 100000,
				CurrentIndex: 1,
				EdbInfoId: this.selected_edbid,
			})
			if (res.Ret===200){
				let arr = res.Data.Item.DataList ||[]
				let str = '日期\t 值\n'
				arr.forEach((item=> str += `${item.DataTime}\t${item.Value}\n`))
				this.$copyText(str).then(
		        res => {
		          this.$message.success("已成功复制!");
		        },
		        err => {
		         this.$message.error("复制失败!");
		        } )
		 	}
		},

		/* 一键更新 */
		updateHandler() {
			this.isUpdate = true;
		},

		/* 替换指标 */
		async replaceEdbHandler () {

			const { Data } = await dataBaseInterface.replaceCheck();
      Data === 2 
      ? this.isReplaceDia = true
      : await this.$confirm('当前正在替换中，请耐心等待', '提示', {
          type: 'warning',
          showCancelButton: false,
        })
		},

		/* 添加最新值 */
		updateNewestDataHandle() {
			this.isUpdateNewestData = true;
		},
		updateNewest(){
				this.initGetData()
				this.rePainChart()
		},
		/* 获取标签列表 */
		getlabelList(){
			const List = JSON.parse(sessionStorage.getItem('database'))||[]
			this.labelList = List
		},
		/* 添加标签  params :{code,id,classifyId,EdbName,EdbNameEn}*/
		addLabel(params){
			const index = this.labelList.findIndex(i=>i.code===params.code)
			//标签已存在列表中,更新标签的值
			if(index!==-1){
				this.labelList.splice(index,1,params)
				return
			}
			//根据页面宽度 判断标签数量是否达到上限
			const listWidth = document.querySelector('.database-label').offsetWidth
			const minWidth=170+20
			const maxNum = Math.floor(listWidth/minWidth)
			if(this.labelList.length>=maxNum){
				//达到上限则挤出第一个,再添加
				this.labelList.shift()
			}
			this.labelList.push(params)
			sessionStorage.setItem('database',JSON.stringify(this.labelList))
		},
		//改变选中标签,
		changeCurrentLabel(params){
			if(params.code!==this.select_node){
				this.selectCurrentNode(params)
			}
		},
		//删除标签
		deleteLabel(params){
			const index = this.labelList.findIndex(i=>i.code===params.code)
			//如果删除的标签是选中状态
			if(this.select_node===params.code){
				//删除的是唯一一个标签
				if(this.labelList.length===1){
					this.selected_edbid=0
					this.select_node = ''
					this.$refs.menuTree.setCurrentKey(null)
				//不是唯一的标签,则默认选中上一个/下一个
				}else{
					index===0&&this.changeCurrentLabel(this.labelList[1])
					index!==0&&index!==-1&&this.changeCurrentLabel(this.labelList[index-1])
				}
			}
			index!==-1&&this.labelList.splice(index,1)
			sessionStorage.setItem('database',JSON.stringify(this.labelList))
		},
		changeTreeNode(){
			this.$refs.menuTree.setCurrentKey(this.select_node);
			this.$nextTick(()=>{
				const _node = this.$refs.menuTree.getCurrentNode()
				this.dynamicNode = _node;
				this.dynamicNode&&this.resetNodeStyle(this.dynamicNode)
			})
		},
		//绑定el-tree的load属性
		async getLazyTreeData (node,resolve){
			if(node.level===0){
				resolve(this.treeData)
			}else{
				let arr=[]
				const res=await dataBaseInterface.targetCatalog({ParentId:node.data.ClassifyId})
				if (res.Ret === 200) {
					const temarr = res.Data.AllNodes || [];
					arr=temarr.map(item=>{
						return {
							...item,
							isLeaf:item.EdbInfoId?true:false
						}
					})
				}
				resolve(arr)
			}
		},
		//保存指标上下限
		saveEdbLimit(){
			if(!this.$refs.createChart) return
			//获取指标的上下限
			const {MaxValue=0,MinValue=0} = this.$refs.createChart.chartInfo
			dataBaseInterface.saveEdbChartLimit({
				EdbInfoId:this.EdbData.EdbInfoId,
				MaxValue:Number(MaxValue),
				MinValue:Number(MinValue)
			}).then(res=>{
				if(res.Ret!==200) return 
				this.$message.success('保存成功')

				this.$refs.createChart.saveEdbImg(this.EdbData)
				this.$refs.createChart.oldOptions = {}
			})
		},
		//重绘指标图表
		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;
		},
		// 添加wind wsd指标成功
		addTargetSuccess(params){
			this.getTreeData(params);
		}
	},
	//离开页面时保存标签
	beforeRouteLeave(to,from,next){
		sessionStorage.setItem('database',JSON.stringify(this.labelList))
		next()
	},
	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();

		//离开页面时保存标签
		window.onbeforeunload = ()=>{
			sessionStorage.setItem('database',JSON.stringify(this.labelList))
		}
	},
	destroyed(){
		window.onbeforeunload = null
	}
};
</script>
<style lang="scss">
@import "~@/styles/theme-vars.scss";
.database_container {
	$mini_font: 12px;
	$normal_font: 14px;
	.firstColumTable .el-table__empty-block {
		display: none;
	}
	.firstColumTable .el-table__header th:first-child .cell{
		overflow: visible;
	}
	.el-table td,.el-table th {
		padding: 10px 0;
	}

	.el-checkbox__input.is-disabled.is-checked .el-checkbox__inner {
		background-color: $theme-color !important;
		border-color: $theme-color;
	}
	.el-checkbox__input.is-disabled.is-indeterminate .el-checkbox__inner {
		background-color: $theme-color !important;
		border-color: $theme-color;
	}
	.el-icon-refresh {
		font-size: 17px;
		margin-left: 5px;
		cursor: pointer;
	}
	@media screen and (min-width: 1711px) {
		.target_tree { 
			font-size: $normal_font; 
		}
	}
	@media screen and (max-width: 1710px) {
		.target_tree { 
			font-size: $mini_font; 
		}
	}

	.database_top {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 20px;
		padding: 20px 30px;
		background: #fff;
		border: 1px solid #ececec;
		border-radius: 4px;
		box-shadow: 0 3px 6px rgba(0, 0, 0, 0.05);
		.top-right,.top-left{
			display: flex;
			align-items: center;
			gap:20px;
			flex-wrap: wrap;
			.el-button + .el-button{
				margin-left: 0;
			}
		}
		/* .top-left{
			display: flex;
			
		} */
	}
	.database_main {
		display: flex;
		margin-top: 20px;
		position:relative;
		width:100%;
		overflow-x: auto;
		div::-webkit-scrollbar {
			width: 5px !important;
		}
		.main-left {
			width: 400px;
			min-width: 300px;
			background: #fff;
			margin-right: 20px;
			border: 1px solid #ececec;
			border-radius: 4px;
			box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.05);
			height: calc(100vh - 225px);
			overflow: hidden;
			position: relative;
			box-sizing: border-box;
			.tree-cont {
				padding: 30px 0 30px 30px;
				/* 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;
				}
				.custom-tree-node {
					display: flex !important;
					justify-content: space-between;
					align-items: center;
					display: block;
					flex: 1;
					.node_label {
						margin-right: 2px;
					}
					.el-icon-view {
						color: #409eff;
						font-size: 18px;
						margin-left: 5px;
					}
				}
				.el-tree__drop-indicator{
					/* position:absolute; */
					/* left:0;
					right:0; */
					height:3px;
					// margin-top: 8px;
					background-color:$theme-color;
				}
				.el-tree-node__content {
					margin-bottom: 14px !important;
				}
				.el-tree-node__children {
					.el-tree-node {
						/* margin-bottom: 8px !important; */
						margin-bottom: 0px !important;
						padding-left: 18px;
					}
					.el-tree-node__content {
						margin-bottom: 5px !important;
						padding-left: 0 !important;
					}
				}
				.expanded.el-icon-caret-right:before {
					content: url('../../assets/img/set_m/down.png') !important;
				}
				.el-icon-caret-right:before {
					content: url('../../assets/img/set_m/slide.png') !important;
				}
				.el-tree-node__expand-icon.is-leaf.el-icon-caret-right:before {
					content: '' !important;
				}
				.el-tree-node__expand-icon.expanded {
					-webkit-transform: rotate(0deg);
					transform: rotate(0deg);
				}
				.el-tree-node.is-current > .el-tree-node__content {
					background-color: #f0f4ff !important;
				}
				.el-tree-node__content {
					padding-right: 10px !important;
				}
			}
			.noDepart {
				margin: 30px 0;
				display: flex;
				align-items: center;
				justify-content: center;
				color: $theme-color;
				font-size: 16px;
				cursor: pointer;
			}
			.move-btn {
				height: 100%;
				width: 4px;
				/* opacity: 0; */
				position: absolute;
				right: 0px;
				top: 0;
				&:hover {
				cursor: col-resize;
					/* background-color: orange */
				}
			}
		}
		.main-right {
			flex: 1;
			/* width:70%; */
			height: calc(100vh - 225px);
			background: #fff;
			border: 1px solid #ececec;
			border-radius: 4px;
			box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.05);
			overflow: hidden;
			.value-ul {
				margin-top: 10px;
				border-bottom: 1px solid #EBEFF6;
				//max-height: calc(100vh - 495px);
				//overflow-y: auto;
				.value-item {
					/* width: 100%; */
					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;
					}
					.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;
				}
			}
			&.list{
				background-color: transparent;
				box-shadow: none;
				border:none;
				padding-left:30px;
				display: flex;
				flex-direction: column;
				.list-wrap{
					flex: 1;
					margin-top: 20px;
					overflow-y: auto;
					.dragShdow {
						box-shadow: 0 1px 8px rgba(64, 158, 255, 0.8);
						opacity: 0.5;
					}
					.list-item{
						width:23%;
						min-width: 210px;
						background-color: #fff;
						display: flex;
						flex-direction: column;
						box-sizing: border-box;
						border-radius: 4px;
						border:1px solid #DCDFE6;
						box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
						.header,.info{
							padding:10px;
							box-sizing: border-box;
							text-align: left;
						}
						.header{
							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{
							margin:10px;
							margin-bottom: 0;
							height: 0;
							padding-bottom: 67%;
							cursor: pointer;
						}
					}
				}
			}
			&.detail-wrap{
				overflow-x:auto;
			}
			.detail{
				display: flex;
				flex-direction: column;
				min-width: 780px;
				height:100%;
				>.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%;
					}
				}
			}

		}
		.slide-btn-icon{
			&.slide-left{
				right:0;
			}
			&.slide-right{
				left: 0;
			}
		}
	}
	.dialog-computed {
		.el-dialog__header {
			background-color: #fff;
			.el-dialog__close {
				color: #333;
			}
		}
		.computed-ul {
			box-sizing: border-box;
			max-height: 600px;
			height:65vh;
			overflow-y: auto;
			padding: 40px 92px;
			display: flex;
			flex-wrap: wrap;
			.cpmputed-li {
				width: 180px;
				padding: 19px 0;
				height: 60px;
				box-sizing: border-box;
				color: $theme-color;
				font-size: 16px;
				background:#ECF5FF;
				border-radius: 8px;
				border: 1px solid #99baf0;
				text-align: center;
				cursor: pointer;
				margin-right: 65px;
				margin-bottom: 55px;
				&:nth-child(3n) {
					margin-right:0;
				}
				&:hover {
					background: $theme-color;
					color: #fff;
				}
				&.act {
					background: $theme-color;
					color: #fff;
				}
			}
		}
	}
}
.edb-tool-popover{
	.edb-tool-wrap{
		display: flex;
		flex-wrap: wrap;
		gap:10px;
		.el-button + .el-button{
			margin-left: 0;
		}
	}
}
</style>