预测指标库模块样式调整

src/styles/global.scss

@@ -97,4 +97,40 @@ button:-moz-focusring,[type="button"]:-moz-focusring,[type="reset"]:-moz-focusri
     gap: 20px;
     flex-wrap: wrap;
     overflow-x: hidden;
+    .chart-list-item{
+        //width,min-width在页面内设置
+        background-color: #FFFFFF;
+        overflow: hidden;
+        border: 1px solid #EBEEF5;
+        border-radius: 4px;
+        .chart-item-top,.chart-item-bottom{
+            padding:10px;
+            text-align: left;
+        }
+        .chart-item-top{
+            //ellipsis在页面内设置
+            font-size: 16px;
+            font-weight: 600;
+            box-shadow: 0 3px 6px rgba(37, 37, 239, 0.1);
+        }
+        .chart-item-img{
+            margin:10px;
+            margin-bottom: 0;
+            height: 0;
+            padding-bottom: 67%;
+            cursor: pointer;
+        }
+        .chart-item-bottom{
+            font-size: 12px;
+            color: #666;
+        }
+    }
+}
+
+//el-dialog，适应小屏样式
+.fit-screen-dialog{
+    //max-width在页面设置
+    width:85vw;
+    margin-top:6vh;
+    margin-bottom: 0;
 }

src/views/dataEntry_manage/databaseComponents/addTargetDiaBase.vue

@@ -1,7 +1,7 @@
 <template>
 	<div class="addTargtDia-box" v-if="isAddTarget">
 		<el-dialog :visible.sync="isAddTarget" :close-on-click-modal="false" :modal-append-to-body='false'
-			@close="cancelHandle" custom-class="custom-dialog" top="11vh" center width="85vw" v-dialogDrag>
+			@close="cancelHandle" custom-class="custom-dialog fit-screen-dialog" top="5vh" center width="85vw" v-dialogDrag>
 			<div slot="title" style="display:flex;alignItems:center;">
 				<img :src="$icons.add" style="color:#fff;width:16px;height:16px;marginRight:5px;">
 				<span style="fontSize:16px;">添加指标</span>
@@ -239,11 +239,15 @@ export default {
 	},
 }
 </script>
+<style lang="scss">
+.addTargtDia-box {
+    .custom-dialog{
+        max-width: 1200px !important;
+    }
+}
+</style>
 <style lang='scss' scoped>
 .addTargtDia-box {
-	.el-dialog{
-		max-width: 1200px !important;
-	}
 	.dialog-top {
 		padding: 20px 30px;
 		display: flex;
@@ -277,7 +281,7 @@ export default {
 	}
 
 	.dia-bot {
-		margin: 60px 0;
+		margin: 30px 0;
 		display: flex;
 		justify-content: center;
 	}

src/views/dataEntry_manage/databaseComponents/computedDialog.vue

@@ -4,9 +4,9 @@
 		:close-on-click-modal="false"
 		:modal-append-to-body="false"
 		@close="cancelHandle"
-		custom-class="computed-dialog"
+		custom-class="computed-dialog fit-screen-dialog"
 		center
-		top="8vh"
+		top="6vh"
 		v-dialogDrag
 	>
 		<div slot="title" style="display: flex; align-items: center">
@@ -443,7 +443,7 @@ export default {
 </script>
 <style lang="scss">
 .computed-dialog {
-    max-width: 1200px;
+    max-width: 1200px !important;
     width:85vw;
 	overflow: hidden;
 	div::-webkit-scrollbar {
@@ -455,6 +455,11 @@ export default {
 	}
 	.dialog-main {
 		padding: 25px 42px 25px 25px;
+		@media screen and (max-height:850px){
+			box-sizing: border-box;
+			height: 65vh;
+			overflow-y: auto;
+		}
 		.el-cascader .el-input {
 			width: 340px;
 		}

src/views/dataEntry_manage/databaseComponents/dataAssociateChart.vue

@@ -4,14 +4,30 @@
             <tableNoData text="该指标暂无关联图"/>
         </div>
         <template v-else>
-        <p style="position:relative;top:-20px;font-size:16px">共 {{chartTotal}} 张图表</p>
+        <p style="position:relative;font-size:16px">共 {{chartTotal}} 张图表</p>
         <div
             class="chart-public-list"
             v-infinite-scroll="load"
             infinite-scroll-immediate="false"
             :infinite-scroll-disabled="finished"
         >
-            <el-col
+            <div class="chart-list-item-wrap">
+                <div class="chart-list-item" v-for="chart in list" :key="chart.ChartInfoId">
+                    <div class="chart-item-top text_oneLine"><span class="text_oneLine">{{ chart.ChartName }}</span></div>
+                    <div class="chart-item-img" @click="detailShowHandle(chart)"
+                        :style="chart.ChartImage?{background: `no-repeat top/cover url('${chart.ChartImage}')`}:{}"></div>
+                    <div class="chart-item-bottom">
+                        <span>创建时间: {{ chart.CreateTime.slice(0,10) }}</span>
+                        <span class="join_txt" @click="addMychartHandle(chart)">
+                            <img :src="$icons.chart_join_ico"
+                                style="width: 13px; height: 12px; vertical-align: middle"/>
+                            加入我的图库
+                        </span>
+                    </div>
+                </div>
+
+            </div>
+            <!-- <el-col
                 :span="6"
                 style="margin-bottom: 20px; padding-right: 20px"
                 v-for="chart in list"
@@ -42,7 +58,7 @@
                         </span>
                     </div>
                 </el-card>
-            </el-col>
+            </el-col> -->
         </div>
         </template>
 
@@ -180,6 +196,12 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+.associate-chart{
+    height: 100%;
+    overflow: hidden;
+    display: flex;
+    flex-direction: column;
+}
 .empty-list{
     min-height: calc(100vh - 300px);
     background-color: #fff;
@@ -187,11 +209,20 @@ export default {
     padding-top: 100px;
 }
 .chart-public-list{
-    display: flex;
-      flex-wrap: wrap;
-      max-height: calc(100vh - 143px);
-      overflow: hidden;
-      overflow-y: auto;
+    flex: 1;
+    width: 100%;
+    margin-top:20px;
+    /* max-height: calc(100vh - 220px); */
+    overflow-y: auto;
+      .chart-list-item{
+          width:31%;
+          min-width: 235px;
+          .join_txt {
+            float: right;
+            color: #409eff;
+            cursor: pointer;
+          }
+      }
 }
 .public-chart-item {
         .item-top {

src/views/dataEntry_manage/databaseComponents/operationDialog.vue

@@ -4,9 +4,8 @@
 		:close-on-click-modal="false"
 		:modal-append-to-body="false"
 		@close="cancelHandle"
-		custom-class="operation-dialog"
+		custom-class="operation-dialog fit-screen-dialog"
 		center
-		width="1200px"
 		top="5vh"
 		v-dialogDrag
 	>
@@ -729,6 +728,7 @@ export default {
 </script>
 <style lang='scss'>
 .operation-dialog {
+	max-width: 1200px !important;
 	position: relative;
 	div::-webkit-scrollbar {
 		width: 6px !important;

src/views/dataEntry_manage/databaseList.vue

@@ -222,125 +222,104 @@
 				</div>
 			</div>
 			<!-- 指标详情 -->
-			<div class="main-right right detail" id="right" v-show="isShowDetail">
-				<div class="header">
-					<el-tabs v-model="activeTab" @tab-click="rePainChart">
-						<el-tab-pane label="走势图" name="Chart">
-						</el-tab-pane>
-						<el-tab-pane label="数据详情" name="Data">
-						</el-tab-pane>
-					</el-tabs>
-					<div class="edb-tool-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')"
-							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>
-				<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 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-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>
-						<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 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>
 		<!-- 输入英文指标弹窗 -->
@@ -1953,7 +1932,7 @@ export default {
 		next()
 	},
 	mounted() {
-		if (document.body.clientWidth <= 1200) {
+		if (document.body.clientWidth <= 1300) {
 			//小屏适配
 			this.isMainLeftShow = false;
 		}
@@ -2236,7 +2215,7 @@ export default {
 					}
 					.list-item{
 						width:31%;
-						min-width: 275px;
+						min-width: 210px;
 						background-color: #fff;
 						display: flex;
 						flex-direction: column;
@@ -2267,10 +2246,14 @@ export default {
 					}
 				}
 			}
-			&.detail{
+			&.detail-wrap{
+				overflow-x:auto;
+			}
+			.detail{
 				display: flex;
 				flex-direction: column;
 				min-width: 780px;
+				height:100%;
 				>.header{
 					display: flex;
 					position: relative;
@@ -2357,8 +2340,9 @@ export default {
 			}
 		}
 		.computed-ul {
+			box-sizing: border-box;
 			max-height: 600px;
-			height:60vh;
+			height:65vh;
 			overflow-y: auto;
 			padding: 40px 92px;
 			display: flex;
@@ -2366,6 +2350,8 @@ export default {
 			.cpmputed-li {
 				width: 180px;
 				padding: 19px 0;
+				height: 60px;
+				box-sizing: border-box;
 				color: $theme-color;
 				font-size: 16px;
 				background:#ECF5FF;

src/views/predictEdb_manage/addPredicEdb.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="add-predicedb-page">
-    <div class="aside-warp">
+    <div class="aside-warp" v-show="isAsideShow">
       <div class="btn-box">
         <el-button type="primary" @click="saveHandle">保存</el-button>
         <el-button type="primary" plain @click="$router.back()">取消</el-button>
@@ -378,17 +378,27 @@
     <div class="main-wrap" id="right">
       <div class="con-box" v-show="edbData.DataList">
         <div class="top-title">{{ formData.edbName }}</div>
-        <chartInfo
-          :edbData="edbData"
-          :isAllowEditLimit="true"
-          @refreshData="refreshData"
-          ref="chartInfo"
-        />
+        <div class="chart-wrap">
+            <chartInfo
+                :edbData="edbData"
+                :isAllowEditLimit="true"
+                @refreshData="refreshData"
+                ref="chartInfo"
+                />
+        </div>
+        
       </div>
       <div class="empty-box" v-show="!edbData.DataList">
         <tableNoData text="暂无信息"/>
       </div>
     </div>
+    <span
+        class="slide-icon slide-btn-icon"
+        :class="{'slide-left':isAsideShow,'slide-right':!isAsideShow}"
+        @click="isAsideShow = !isAsideShow"
+    >
+        <i :class="{'el-icon-d-arrow-left':isAsideShow,'el-icon-d-arrow-right':!isAsideShow}"></i>
+    </span>
 
     <!-- 设置动态环差弹窗 -->
     <dynamic-differ
@@ -569,6 +579,8 @@ export default {
       /* 查看历史弹窗 */
 			isLookHistory: false,
 			lookEdbId: 0,
+      
+      isAsideShow:true,
     };
   },
   created() {
@@ -1146,6 +1158,7 @@ export default {
 
 <style lang="scss">
 .add-predicedb-page {
+    overflow-y: auto;
   .aside-warp {
     /* .el-form-item {
       margin-bottom: 0;
@@ -1180,6 +1193,7 @@ div {
 .add-predicedb-page {
   display: flex;
   min-height: calc(100vh - 150px);
+  position: relative;
   .aside-warp {
     flex-shrink: 0;
     width: 300px;
@@ -1222,12 +1236,21 @@ div {
   }
   .main-wrap {
     flex: 1;
-    width: 80%;
     background: #ffffff;
     border-radius: 4px;
     border: 1px solid #ececec;
+    overflow-x: auto;
   }
 
+  .slide-icon{
+    position: absolute;
+    &.slide-left {
+        left: 290px;
+    }
+    &.slide-right {
+        left: 0px;
+    }
+  }
   .rules-ul {
     border: 1px solid #dcdfe6;
     .del-icon {
@@ -1280,6 +1303,10 @@ div {
       padding-left: 30px;
       align-items: center;
     }
+    .chart-wrap{
+        box-sizing: border-box;
+        padding:30px;
+    }
   }
 }
 </style>

src/views/predictEdb_manage/components/chartInfo.vue

@@ -3,7 +3,7 @@
         <div class="header">
             <!-- 曲线图时间筛选 -->
             <template v-if="chartInfo.ChartType==1">
-			<el-button
+			<!-- <el-button
 				type="primary"
 				v-for="item in yearSelector"
 				:key="item.value"
@@ -11,13 +11,30 @@
 				:plain="item.value !== year_select"
 				class="year-btn"
 				@click.native="changeYear(item)"
-				>{{ item.name }}</el-button
-			>
-			<el-button 
-                type="primary" size="mini"
-                class="btn-sty" 
-                @click="openDateDia"
-            >{{dateTip}}</el-button>
+				>{{ item.name }}</el-button> -->
+                <el-popover 
+                    placement="bottom" 
+                    trigger="click" 
+                    popper-class="btn-select-popover"
+                    width="460" style="display: inline-block;">
+                    <div class="btn-wrap">
+                        <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>
+                    </div>
+                    <el-button type="primary" plain size="mini" class="year-btn" slot="reference" style="margin-right:15px;background-color: #e6eefb;color:#0052D9;">时间段</el-button>
+                </el-popover>
+                <el-button 
+                    type="primary" size="mini"
+                    class="btn-sty" 
+                    @click="openDateDia"
+                >{{dateTip}}</el-button>
             </template>
             <!-- 季节图时间选择 -->
             <!-- <template v-if="chartInfo.ChartType==2">

src/views/predictEdb_manage/components/childData.vue

@@ -229,7 +229,7 @@ export default {
     border-bottom: 1px solid #dcdfe6;
     border-top: 1px solid #dcdfe6;
     /* max-height: 520px; */
-    max-height: calc(100vh - 430px);
+    max-height: calc(100vh - 445px);
     overflow-y: auto;
     .value-item {
       /* width: 100%; */

src/views/predictEdb_manage/mixins/mixin.js

@@ -7,34 +7,34 @@ export default {
   },
   directives: {
     drag(el, bindings) {
-      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-end+80 +'px'
-						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();
+        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-end+80 +'px'
+                    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();
+            };
+            e.setCapture && e.setCapture();
+            return false;
         };
-				e.setCapture && e.setCapture();
-				return false;
-      };
     }
   },
 

src/views/predictEdb_manage/predictEdb.vue

@@ -172,10 +172,12 @@
 				</span>
       </div>
 
-			<div class="main-right" id="right" :style="isSlideLeft ? 'width:100%' : 'width:80%'">
+			<div class="main-right" id="right" :style="isSlideLeft ? 'width:100%' : 'width:80%'"
+				:class="{'detail-main':select_id&&!showAssociateChart&&!showAssociateComputeData}"
+			>
 
 				<!-- 详情 -->
-				<div class="edb-detail-wrapper" v-if="select_id&&!showAssociateChart&&!showAssociateComputeData">
+				<div class="edb-detail-wrapper main-min-width" v-if="select_id&&!showAssociateChart&&!showAssociateComputeData">
 					<div class="detail-header">
 						<el-tabs v-model="activeTab" @tab-click="changeShowType">
 							<el-tab-pane label="走势图" name="Chart">
@@ -183,7 +185,39 @@
 							<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-permission="permissionBtn.predictEdbPermission.edbPreData_enNameSetting"
+										type="text" @click="clickEdbNameHandle" v-if="currentLang==='ch'||!edb_nameEn">
+										设置英文名称
+									</el-button>
+									<el-button v-permission="permissionBtn.predictEdbPermission.edbPreData_edbSource"
+									type="text" @click="isLookHistory=true;lookEdbId=select_id">指标溯源</el-button>
+									<el-button v-permission="permissionBtn.predictEdbPermission.edbPreData_update"
+										type="text" @click="updateEdbPartHandle">刷新</el-button>
+									<el-button type="text" @click="editEdbHandle('')" 
+										v-if="edbButton.OpButton&&isEdbBtnShow('edbPreData_edit')">编辑</el-button>
+									<el-button type="text" @click="saveEdbHandle" 
+										v-if="detail_show_chart&&isEdbBtnShow('edbPreData_save')">保存</el-button>
+									<el-button v-permission="permissionBtn.predictEdbPermission.edbPreData_recalcu"
+										type="text" @click="updateEdbHandle">重新计算</el-button>
+									<el-button class="deletesty" @click="delEdbHandle" type="text"
+										v-if="edbButton.DeleteButton&&isEdbBtnShow('edbPreData_del')">删除</el-button>
+									<el-button v-permission="permissionBtn.predictEdbPermission.edbPreData_copyData"
+										type="text" @click="copyData">复制数据</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-permission="permissionBtn.predictEdbPermission.edbPreData_enNameSetting"
 								type="text" @click="clickEdbNameHandle" v-if="currentLang==='ch'||!edb_nameEn">
 								设置英文名称
@@ -202,9 +236,7 @@
 								v-if="edbButton.DeleteButton&&isEdbBtnShow('edbPreData_del')">删除</el-button>
 							<el-button v-permission="permissionBtn.predictEdbPermission.edbPreData_copyData"
 								type="text" @click="copyData">复制数据</el-button>
-							<!-- <el-button v-permission="permissionBtn.predictEdbPermission.edbPreData_viewData"
-								type="text" @click="detail_show_chart=!detail_show_chart">{{detail_show_chart ? '查看数据' : '查看图表'}} </el-button> -->
-						</div>
+						</div> -->
 					</div>
 
 					<!--  -->
@@ -235,8 +267,20 @@
 						ref="listRef"
 						@scroll="loadMoreHandle"
 					>
-						<el-col
-						:span="6"
+						<div class="chart-list-item-wrap">
+							<div class="sheet-item" v-for="item in edbChartList" :key="item.EdbInfoId">
+								<div class="item-top">
+									<span class="text_oneLine">{{ currentLang === 'en' ? (item.EdbNameEn||item.EdbName) : item.EdbName }}</span>
+								</div>
+								<div class="chart-img" @click="detailShowHandle(item)"
+								:style="item.ChartImage?{background: `no-repeat top/cover url('${item.ChartImage}')`}:{}"></div>
+								<div class="item-bottom">
+									<span>创建时间: {{ item.CreateTime.slice(0,10) }}</span>
+								</div>
+							</div>
+						</div>
+						<!-- <el-col
+						:span="8"
 						style="margin-bottom: 20px; padding-right: 20px"
 						v-for="item in edbChartList"
 						:key="item.EdbInfoId"
@@ -255,7 +299,7 @@
 							<span>创建时间: {{ item.CreateTime.slice(0,10) }}</span>
 							</div>
 						</el-card>
-						</el-col>
+						</el-col> -->
 					</div>
 					<div v-if="!edb_total" class="nodata">
 						<tableNoData text="暂无指标"/>
@@ -279,9 +323,9 @@
 		:modal-append-to-body='false'
 		@close="isOpenComputed=false;"
 		custom-class="dialog-computed"
-		top="12vh"
+		top="6vh"
 		center
-		width="950px"
+		width="85vw"
 		v-dialogDrag>
 			<div class="dialog-computed-header">
 				<el-radio-group v-model="computed_source" size="medium" @change="computed_type = 0">
@@ -1394,6 +1438,10 @@ export default {
 		}
 	},
 	mounted() {
+		if (document.body.clientWidth <= 1300) {
+			//小屏适配
+			this.isSlideLeft = true;
+		}
 		const obj=sessionStorage.getItem('predictEdbTreeData')
 		if(obj||this.$route.query.code){
 			let code=obj?JSON.parse(obj).code:this.$route.query.code
@@ -1568,13 +1616,20 @@ $mini-font: 12px; $normal-font: 14px;
 
 		.main-right {
 			width: 80%;
+			height: calc(100vh - 120px);
+			&.detail-main{
+				overflow-x:auto;
+			}
 			.edb-detail-wrapper {
 				height: 100%;
 				border: 1px solid #ececec;
 				border-radius: 4px;
 				box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.05);
-				overflow: auto;
+				overflow: hidden;
 				background: #fff;
+				&.main-min-width{
+					min-width: 780px;
+				}
 				.detail-top {
 					padding: 20px;
 					display: flex;
@@ -1636,21 +1691,38 @@ $mini-font: 12px; $normal-font: 14px;
 						opacity: 0.5;
 					}
 					.sheet-item {
+						width:31%;
+						min-width: 255px;
+						border-radius: 4px;
+						box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+						border: 1px solid #EBEEF5;
+						background-color: #FFFFFF;
+						overflow: hidden;
+						color: #303133;
+						transition: 0.3s;
+						.item-top,.item-bottom{
+							padding:10px;
+							text-align: left;
+						}
 						.item-top {
 							display: flex;
 							justify-content: space-between;
 							align-items: center;
 							font-size: 16px;
 							font-weight: 600;
+							box-shadow: 0 3px 6px rgba(37, 37, 239, 0.1);
 						}
 						.chart-img {
-							width: 100%;
+							/* width: 100%;
 							height: 230px;
-							object-fit: fill !important;
+							object-fit: fill !important; */
+							margin:10px;
+							margin-bottom: 0;
+							height: 0;
+							padding-bottom: 67%;
 							cursor: pointer;
 						}
 						.item-bottom {
-							margin-top: 10px;
 							display: flex;
 							justify-content: space-between;
 							font-size: 12px;
@@ -1676,6 +1748,7 @@ $mini-font: 12px; $normal-font: 14px;
 
 	.computed-ul {
 		max-height: 600px;
+		height: 70vh;
 		overflow-y: auto;
 		padding: 40px 92px;
 		display: flex;
@@ -1683,6 +1756,7 @@ $mini-font: 12px; $normal-font: 14px;
 		.cpmputed-li {
 			width: 180px;
 			padding: 19px 0;
+			height:60px;
 			color: $theme-color;
 			font-size: 16px;
 			background:#ECF5FF;
@@ -1760,6 +1834,7 @@ $mini-font: 12px; $normal-font: 14px;
 	}
 
 	.dialog-computed {
+		max-width:950px !important;
 		.el-dialog__header {
 			background-color: #fff;
 			.el-dialog__close {