|
|
@@ -1,7 +1,7 @@
|
|
|
<template>
|
|
|
<div class="database_container">
|
|
|
<div class="database_top">
|
|
|
- <div>
|
|
|
+ <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"
|
|
|
@@ -28,7 +28,7 @@
|
|
|
remote
|
|
|
clearable
|
|
|
placeholder="指标ID/指标名称"
|
|
|
- style="width: 400px;margin-left:10px;"
|
|
|
+ style="width: 260px;"
|
|
|
:remote-method="searchHandle"
|
|
|
@click.native="inputFocusHandle"
|
|
|
>
|
|
|
@@ -54,8 +54,16 @@
|
|
|
/>
|
|
|
</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">
|
|
|
+ <div class="main-left left" id="left" v-show="isMainLeftShow">
|
|
|
<div class="tree-cont">
|
|
|
<el-tree
|
|
|
ref="menuTree"
|
|
|
@@ -173,6 +181,13 @@
|
|
|
</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">
|
|
|
@@ -185,19 +200,22 @@
|
|
|
<div class="main-right right list" id="right" v-show="isShowList">
|
|
|
<p>共{{Total||0}}个指标</p>
|
|
|
<div class="list-wrap" ref="listRef" @scroll="loadMoreHandle" v-if="Total">
|
|
|
- <div class="list-item" v-for="item in chartList" :key="item.EdbInfoId">
|
|
|
- <div class="header">
|
|
|
- <span v-show="currentLang=='ch'">{{ item.EdbName }}</span>
|
|
|
- <span v-show="currentLang=='en'">{{ item.EdbNameEn || item.EdbName }}</span>
|
|
|
- </div>
|
|
|
- <div class="image" @click="detailShowHandle(item)">
|
|
|
- <img :src="item.ChartImage" alt=""/>
|
|
|
- </div>
|
|
|
- <div class="info">
|
|
|
- 创建时间：{{item.CreateTime.substring(0,10)}}
|
|
|
+ <div 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>
|
|
|
- <p style="height: 40px;line-height:40px;width: 100%;"></p>
|
|
|
+
|
|
|
</div>
|
|
|
<div v-if="!Total" class="nodata">
|
|
|
<tableNoData text="暂无指标"/>
|
|
|
@@ -212,14 +230,50 @@
|
|
|
<el-tab-pane label="数据详情" name="Data">
|
|
|
</el-tab-pane>
|
|
|
</el-tabs>
|
|
|
- <div class="edb-tool">
|
|
|
+ <div class="edb-tool-icon edb-tool" style="align-items: center;">
|
|
|
+ <el-popover
|
|
|
+ placement="left"
|
|
|
+ trigger="click"
|
|
|
+ popper-class="edb-tool-popover"
|
|
|
+ width="320" style="display: inline-block;">
|
|
|
+ <div class="edb-tool-wrap">
|
|
|
+ <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="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===2&&isEdbBtnShow('toSource')"
|
|
|
+ type="text" @click="isLookHistory=true;lookEdbId=selected_edbid">指标溯源</el-button>
|
|
|
+ <el-button v-if="EdbData.EdbType===1&&isEdbBtnShow('refreshAll')"
|
|
|
+ type="text" @click.stop="refreshBaseHandler" :loading="refreshLoading">全部刷新</el-button>
|
|
|
+ <el-button v-if="isEdbBtnShow('copyData')"
|
|
|
+ type="text" @click="copyCode">复制数据</el-button>
|
|
|
+ <el-button v-if="EdbData.Button.DeleteButton&&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 class="edb-tool">
|
|
|
<el-button v-if="isEdbBtnShow('update')"
|
|
|
type="text" @click="refreshTargetHandle" >刷新</el-button>
|
|
|
<el-button v-if="isEdbBtnShow('edit')"
|
|
|
type="text" :disabled="!(EdbData.Button.OpButton)"
|
|
|
@click="editNode({},EdbData)"
|
|
|
>编辑</el-button>
|
|
|
- <!-- 指保存指标的上下限，在走势图才显示 -->
|
|
|
<el-button v-if="activeTab==='Chart'&&isEdbBtnShow('saveEdb')"
|
|
|
type="text" @click.stop="saveEdbLimit">保存</el-button>
|
|
|
<el-button v-if="isEdbBtnShow('setEn')"
|
|
|
@@ -236,7 +290,7 @@
|
|
|
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> -->
|
|
|
</div>
|
|
|
<div class="container" id="detail-container">
|
|
|
<div class="chart" v-show="activeTab==='Chart'">
|
|
|
@@ -332,7 +386,7 @@
|
|
|
:modal-append-to-body='false'
|
|
|
@close="isOpenComputed=false;"
|
|
|
custom-class="dialog-computed"
|
|
|
- top="12vh"
|
|
|
+ top="6vh"
|
|
|
center
|
|
|
width="920px"
|
|
|
v-dialogDrag>
|
|
|
@@ -512,40 +566,39 @@ export default {
|
|
|
SmoothEdbDialog,
|
|
|
},
|
|
|
directives: {
|
|
|
- drag(el, bindings) {
|
|
|
- el.onmousedown = function(e) {
|
|
|
+ drag(el, bindings,vnode) {
|
|
|
+ el.onmousedown = function(e) {
|
|
|
var init = e.clientX;
|
|
|
- // console.log(init);
|
|
|
var box = $("#box")[0]
|
|
|
- // console.log(box.clientWidth)
|
|
|
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;
|
|
|
- // console.log(total_wid,initWidth,end);
|
|
|
+ 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-end+80 +'px'
|
|
|
+ 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";
|
|
|
+ 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;
|
|
|
+ }
|
|
|
+
|
|
|
+ };
|
|
|
+ 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,
|
|
|
@@ -696,7 +749,9 @@ export default {
|
|
|
chartList:[],
|
|
|
|
|
|
activeTab:'',
|
|
|
- activeName:'second'
|
|
|
+ activeName:'second',
|
|
|
+
|
|
|
+ isMainLeftShow:true,
|
|
|
};
|
|
|
},
|
|
|
watch: {
|
|
|
@@ -732,7 +787,10 @@ export default {
|
|
|
this.CurrentIndex = 1
|
|
|
this.getEdbChartList()
|
|
|
}
|
|
|
- }
|
|
|
+ },
|
|
|
+ isMainLeftShow(newVal){
|
|
|
+ this.rePainChart()
|
|
|
+ },
|
|
|
},
|
|
|
computed: {
|
|
|
/* 计算弹窗控制 */
|
|
|
@@ -927,7 +985,7 @@ export default {
|
|
|
let scrollTop = this.$refs.listRef.scrollTop;
|
|
|
let clientHeight = this.$refs.listRef.clientHeight;
|
|
|
let scrollHeight = this.$refs.listRef.scrollHeight;
|
|
|
- if(scrollTop + clientHeight >= scrollHeight-10 && !this.IsListEnd){
|
|
|
+ if(scrollTop + clientHeight >= scrollHeight-210 && !this.IsListEnd){
|
|
|
this.CurrentIndex++;
|
|
|
this.getEdbChartList();
|
|
|
}
|
|
|
@@ -1895,6 +1953,10 @@ export default {
|
|
|
next()
|
|
|
},
|
|
|
mounted() {
|
|
|
+ if (document.body.clientWidth <= 1200) {
|
|
|
+ //小屏适配
|
|
|
+ this.isMainLeftShow = false;
|
|
|
+ }
|
|
|
this.getlabelList()
|
|
|
this.getEdbChartList()
|
|
|
this.$route.query.code
|
|
|
@@ -1960,14 +2022,26 @@ export default {
|
|
|
border: 1px solid #ececec;
|
|
|
border-radius: 4px;
|
|
|
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.05);
|
|
|
- .top-right {
|
|
|
+ .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;
|
|
|
}
|
|
|
@@ -2155,33 +2229,27 @@ export default {
|
|
|
.list-wrap{
|
|
|
flex: 1;
|
|
|
margin-top: 20px;
|
|
|
- display: flex;
|
|
|
- gap: 20px;
|
|
|
- flex-wrap: wrap;
|
|
|
- overflow-x: hidden;
|
|
|
overflow-y: auto;
|
|
|
.dragShdow {
|
|
|
box-shadow: 0 1px 8px rgba(64, 158, 255, 0.8);
|
|
|
opacity: 0.5;
|
|
|
}
|
|
|
.list-item{
|
|
|
- width:23%;
|
|
|
- height:375px;
|
|
|
+ width:31%;
|
|
|
+ min-width: 275px;
|
|
|
background-color: #fff;
|
|
|
display: flex;
|
|
|
flex-direction: column;
|
|
|
box-sizing: border-box;
|
|
|
- /* padding: 0 10px; */
|
|
|
border-radius: 4px;
|
|
|
border:1px solid #DCDFE6;
|
|
|
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
|
|
|
.header,.info{
|
|
|
- padding:20px;
|
|
|
+ padding:10px;
|
|
|
box-sizing: border-box;
|
|
|
text-align: left;
|
|
|
}
|
|
|
.header{
|
|
|
- //border-bottom: 1px solid #DCDFE6;
|
|
|
white-space: nowrap;
|
|
|
overflow: hidden;
|
|
|
text-overflow: ellipsis;
|
|
|
@@ -2190,14 +2258,11 @@ export default {
|
|
|
box-shadow: 0 3px 6px rgba(37, 37, 239, 0.1);
|
|
|
}
|
|
|
.image{
|
|
|
- padding:20px 20px 0 20px;
|
|
|
- flex: 1;
|
|
|
+ margin:10px;
|
|
|
+ margin-bottom: 0;
|
|
|
+ height: 0;
|
|
|
+ padding-bottom: 67%;
|
|
|
cursor: pointer;
|
|
|
- img{
|
|
|
- width:100%;
|
|
|
- height: 230px;
|
|
|
- object-fit: fill !important;
|
|
|
- }
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
@@ -2205,6 +2270,7 @@ export default {
|
|
|
&.detail{
|
|
|
display: flex;
|
|
|
flex-direction: column;
|
|
|
+ min-width: 780px;
|
|
|
>.header{
|
|
|
display: flex;
|
|
|
position: relative;
|
|
|
@@ -2274,6 +2340,14 @@ export default {
|
|
|
}
|
|
|
|
|
|
}
|
|
|
+ .slide-btn-icon{
|
|
|
+ &.slide-left{
|
|
|
+ right:0;
|
|
|
+ }
|
|
|
+ &.slide-right{
|
|
|
+ left: 0;
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
.dialog-computed {
|
|
|
.el-dialog__header {
|
|
|
@@ -2284,6 +2358,7 @@ export default {
|
|
|
}
|
|
|
.computed-ul {
|
|
|
max-height: 600px;
|
|
|
+ height:60vh;
|
|
|
overflow-y: auto;
|
|
|
padding: 40px 92px;
|
|
|
display: flex;
|
|
|
@@ -2315,4 +2390,14 @@ export default {
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
+.edb-tool-popover{
|
|
|
+ .edb-tool-wrap{
|
|
|
+ display: flex;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ gap:0 10px;
|
|
|
+ .el-button + .el-button{
|
|
|
+ margin-left: 0;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
</style>
|
cxmo