|
|
|
@ -1,7 +1,8 @@ |
|
|
|
|
<template> |
|
|
|
|
<div class="wrap"> |
|
|
|
|
<div class="left"> |
|
|
|
|
<el-menu class="menu" ref="type" @open="selectType" @select="selectType" unique-opened :default-active="defaultType" :default-openeds="defaultOpenType"> |
|
|
|
|
<el-menu class="menu" ref="type" @open="selectType" @select="selectType" unique-opened |
|
|
|
|
:default-active="defaultType" :default-openeds="defaultOpenType"> |
|
|
|
|
<menuTree :menuList="typeList"></menuTree> |
|
|
|
|
</el-menu> |
|
|
|
|
</div> |
|
|
|
@ -17,9 +18,11 @@ |
|
|
|
|
<div class="desc">{{ introduce }}</div> |
|
|
|
|
<div class="source"><img src="@/assets/img/data2.png" alt=""> 数据来源:{{ dataSource }}</div> |
|
|
|
|
<div class="page-content"> |
|
|
|
|
<el-table :data="listData" class="table" ref="table" stripe header-align="center" row-key="id" highlight-current-row @current-change="previewCurrentChange"> |
|
|
|
|
<el-table :data="listData" class="table" ref="table" stripe header-align="center" row-key="id" |
|
|
|
|
highlight-current-row @current-change="previewCurrentChange"> |
|
|
|
|
<el-table-column type="index" width="60" label="序号" align="center"></el-table-column> |
|
|
|
|
<el-table-column prop="showName" label="数据表名称" min-width="220" align="center" :show-overflow-tooltip="true"></el-table-column> |
|
|
|
|
<el-table-column prop="showName" label="数据表名称" min-width="220" align="center" |
|
|
|
|
:show-overflow-tooltip="true"></el-table-column> |
|
|
|
|
<el-table-column prop="dataTotal" label="数据总量" width="90" align="center"></el-table-column> |
|
|
|
|
<el-table-column prop="timeRange" label="起止时间" width="175" align="center"></el-table-column> |
|
|
|
|
<el-table-column prop="dataSize" label="数据大小" width="90" align="center"> |
|
|
|
@ -36,13 +39,15 @@ |
|
|
|
|
</el-table-column> |
|
|
|
|
</el-table> |
|
|
|
|
<div class="pagination"> |
|
|
|
|
<el-pagination background @current-change="handleCurrentChange" :current-page="page" layout="total, prev, pager, next, jumper" :total="total"></el-pagination> |
|
|
|
|
<el-pagination background @current-change="handleCurrentChange" :current-page="page" |
|
|
|
|
layout="total, prev, pager, next, jumper" :total="total"></el-pagination> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
|
|
|
|
|
<el-dialog title="下载" :visible.sync="downloadVisible" width="540px" @close="closeDownload" :close-on-click-modal="false"> |
|
|
|
|
<el-dialog title="下载" :visible.sync="downloadVisible" width="540px" @close="closeDownload" |
|
|
|
|
:close-on-click-modal="false"> |
|
|
|
|
<el-form ref="form" label-width="100px" label-suffix=":"> |
|
|
|
|
<el-form-item label="数据筛选"> |
|
|
|
|
<div class="checkboxs"> |
|
|
|
@ -53,14 +58,19 @@ |
|
|
|
|
</div> |
|
|
|
|
</el-form-item> |
|
|
|
|
<el-form-item label="开始时间"> |
|
|
|
|
<el-date-picker v-model="startTime" type="date" placeholder="请选择开始时间" size="small" format="yyyy-MM-dd" value-format="yyyy-MM-dd" :picker-options="timeOptions" :disabled="startTimeDisabled" :default-value="startTimeDefault" @change="timeChange"></el-date-picker> |
|
|
|
|
<el-date-picker v-model="startTime" type="date" placeholder="请选择开始时间" size="small" format="yyyy-MM-dd" |
|
|
|
|
value-format="yyyy-MM-dd" :picker-options="timeOptions" :disabled="startTimeDisabled" |
|
|
|
|
:default-value="startTimeDefault" @change="timeChange"></el-date-picker> |
|
|
|
|
</el-form-item> |
|
|
|
|
<el-form-item label="结束时间"> |
|
|
|
|
<el-date-picker v-model="endTime" type="date" placeholder="请选择结束时间" size="small" format="yyyy-MM-dd" value-format="yyyy-MM-dd" :picker-options="timeOptions" :disabled="endTimeDisabled" :default-value="endTimeDefault" @change="timeChange"></el-date-picker> |
|
|
|
|
<el-date-picker v-model="endTime" type="date" placeholder="请选择结束时间" size="small" format="yyyy-MM-dd" |
|
|
|
|
value-format="yyyy-MM-dd" :picker-options="timeOptions" :disabled="endTimeDisabled" |
|
|
|
|
:default-value="endTimeDefault" @change="timeChange"></el-date-picker> |
|
|
|
|
</el-form-item> |
|
|
|
|
<el-form-item label="数据频率"> |
|
|
|
|
<el-select v-model="frequency" placeholder="请选择数据频率" size="small"> |
|
|
|
|
<el-option v-for="(item,index) in frequencyList" :key="index" :label="item.name" :value="item.id"></el-option> |
|
|
|
|
<el-option v-for="(item, index) in frequencyList" :key="index" :label="item.name" |
|
|
|
|
:value="item.id"></el-option> |
|
|
|
|
</el-select> |
|
|
|
|
</el-form-item> |
|
|
|
|
</el-form> |
|
|
|
@ -71,11 +81,7 @@ |
|
|
|
|
</span> |
|
|
|
|
</el-dialog> |
|
|
|
|
|
|
|
|
|
<el-drawer |
|
|
|
|
custom-class="preview-dia" |
|
|
|
|
size="950px" |
|
|
|
|
:with-header="false" |
|
|
|
|
:visible.sync="previewVisible"> |
|
|
|
|
<el-drawer custom-class="preview-dia" size="950px" :with-header="false" :visible.sync="previewVisible"> |
|
|
|
|
<div class="flex j-between"> |
|
|
|
|
<div class="l-title" style="margin-bottom: 0"> |
|
|
|
|
<img src="@/assets/img/data3.png" alt=""> |
|
|
|
@ -86,7 +92,8 @@ |
|
|
|
|
<div class="preview-wrap"> |
|
|
|
|
<el-table :data="previewData" class="table" id="previewTable" stripe header-align="center" row-key="id"> |
|
|
|
|
<el-table-column type="index" width="100" label="序号" align="center"></el-table-column> |
|
|
|
|
<el-table-column v-for="(item,index) in previewHead" :prop="item.field" :key="index" :label="item.comment" align="center"></el-table-column> |
|
|
|
|
<el-table-column v-for="(item, index) in previewHead" :prop="item.field" :key="index" :label="item.comment" |
|
|
|
|
align="center"></el-table-column> |
|
|
|
|
</el-table> |
|
|
|
|
</div> |
|
|
|
|
</el-drawer> |
|
|
|
@ -486,40 +493,50 @@ export default { |
|
|
|
|
.wrap { |
|
|
|
|
display: flex; |
|
|
|
|
padding-bottom: 20px !important; |
|
|
|
|
|
|
|
|
|
/deep/.left { |
|
|
|
|
width: 239px; |
|
|
|
|
height: calc(100vh - 190px); |
|
|
|
|
margin-right: 20px; |
|
|
|
|
overflow: auto; |
|
|
|
|
|
|
|
|
|
&::-webkit-scrollbar { |
|
|
|
|
display: none; |
|
|
|
|
width: 8px; |
|
|
|
|
height: 8px; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
&::-webkit-scrollbar-thumb { |
|
|
|
|
display: none; |
|
|
|
|
width: 5px; |
|
|
|
|
border-radius: 6px; |
|
|
|
|
background: rgba(173, 173, 173, .7); |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.menu { |
|
|
|
|
width: 240px; |
|
|
|
|
overflow: hidden; |
|
|
|
|
&>.el-menu-item,.el-submenu__title{ |
|
|
|
|
|
|
|
|
|
&>.el-menu-item, |
|
|
|
|
.el-submenu__title { |
|
|
|
|
span { |
|
|
|
|
font-size: 15px; |
|
|
|
|
color: #3381d2; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
&>.el-submenu>.el-menu { |
|
|
|
|
background-color: #FAFAFA !important; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.el-submenu__title i { |
|
|
|
|
font-size: 14px; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.el-submenu .el-menu { |
|
|
|
|
background-color: #fff; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.el-submenu.is-active { |
|
|
|
|
.el-submenu__title { |
|
|
|
|
&+.el-menu .el-submenu__title { |
|
|
|
@ -527,25 +544,31 @@ export default { |
|
|
|
|
line-height: 50px; |
|
|
|
|
background-color: rgba(147, 184, 255, .15); |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
i { |
|
|
|
|
color: #006EFF; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.el-menu-item { |
|
|
|
|
overflow: hidden; |
|
|
|
|
text-overflow: ellipsis; |
|
|
|
|
white-space: nowrap; |
|
|
|
|
|
|
|
|
|
&.is-active { |
|
|
|
|
color: #fff; |
|
|
|
|
background-color: #0070FF; |
|
|
|
|
|
|
|
|
|
span { |
|
|
|
|
color: #fff; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.level-6 { |
|
|
|
|
padding-right: 0; |
|
|
|
|
|
|
|
|
|
.el-submenu__title { |
|
|
|
|
padding-left: 10px !important; |
|
|
|
|
color: #fff; |
|
|
|
@ -553,19 +576,24 @@ export default { |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.right { |
|
|
|
|
width: calc(100% - 260px); |
|
|
|
|
|
|
|
|
|
.page { |
|
|
|
|
margin-bottom: 20px; |
|
|
|
|
|
|
|
|
|
.source { |
|
|
|
|
margin-bottom: 12px; |
|
|
|
|
color: #7EB1F3; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
/deep/.el-table__body tr.current-row>td { |
|
|
|
|
background-color: #daeaff; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.desc { |
|
|
|
|
padding: 9px 12px; |
|
|
|
|
margin: 20px 0 10px; |
|
|
|
@ -574,6 +602,7 @@ export default { |
|
|
|
|
background-color: #FAFAFA; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.search { |
|
|
|
|
z-index: 2; |
|
|
|
|
position: absolute; |
|
|
|
@ -597,22 +626,36 @@ export default { |
|
|
|
|
color: #333; |
|
|
|
|
background-color: transparent; |
|
|
|
|
border: 0; |
|
|
|
|
&::-webkit-input-placeholder{color: #999} |
|
|
|
|
&::-moz-placeholder{color: #999} |
|
|
|
|
&:-moz-placeholder{color: #999} |
|
|
|
|
|
|
|
|
|
&::-webkit-input-placeholder { |
|
|
|
|
color: #999 |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
&::-moz-placeholder { |
|
|
|
|
color: #999 |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
&:-moz-placeholder { |
|
|
|
|
color: #999 |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
&:focus { |
|
|
|
|
outline: none; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.remove { |
|
|
|
|
cursor: pointer; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.search-icon { |
|
|
|
|
width: 18px; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
/deep/.preview-dia { |
|
|
|
|
padding: 20px; |
|
|
|
|
|
|
|
|
|
.preview-wrap { |
|
|
|
|
height: calc(100vh - 80px); |
|
|
|
|
overflow: auto; |
|
|
|
|