|
|
|
|
@ -1,96 +1,103 @@ |
|
|
|
|
<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"> |
|
|
|
|
<menuTree :menuList="typeList"></menuTree> |
|
|
|
|
</el-menu> |
|
|
|
|
<div class="wrap"> |
|
|
|
|
<div class="left"> |
|
|
|
|
<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> |
|
|
|
|
<div class="right"> |
|
|
|
|
<div class="page"> |
|
|
|
|
<h6 class="l-title"><img src="@/assets/img/data1.png" alt=""> 数据介绍</h6> |
|
|
|
|
<div> |
|
|
|
|
<div class="search"> |
|
|
|
|
<input v-model="keyword" type="text" placeholder="请输入数据表名称"> |
|
|
|
|
<img src="../../../assets/img/search-gray.png" alt="" class="search-icon"> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
<div class="right"> |
|
|
|
|
<div class="page"> |
|
|
|
|
<h6 class="l-title"><img src="@/assets/img/data1.png" alt=""> 数据介绍</h6> |
|
|
|
|
<div> |
|
|
|
|
<div class="search"> |
|
|
|
|
<input v-model="keyword" type="text" placeholder="请输入数据表名称"> |
|
|
|
|
<img src="../../../assets/img/search-gray.png" alt="" class="search-icon"> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
<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-column type="index" width="100" label="序号" align="center"></el-table-column> |
|
|
|
|
<el-table-column prop="showName" label="数据表名称" min-width="300" 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="220" align="center"></el-table-column> |
|
|
|
|
<el-table-column prop="dataSize" label="数据大小" width="90" align="center"> |
|
|
|
|
<template slot-scope="scope"> |
|
|
|
|
{{scope.row.dataSize}}M |
|
|
|
|
</template> |
|
|
|
|
</el-table-column> |
|
|
|
|
<el-table-column prop="updateTime" label="更新时间" width="170" align="center"></el-table-column> |
|
|
|
|
<el-table-column label="操作" width="200" align="center"> |
|
|
|
|
<template slot-scope="scope"> |
|
|
|
|
<el-button type="text" @click="preview(scope.row)" v-auth>预览</el-button> |
|
|
|
|
<el-button type="text" @click="download(scope.row)" v-auth>下载</el-button> |
|
|
|
|
</template> |
|
|
|
|
</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> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
<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-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="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"> |
|
|
|
|
<template slot-scope="scope"> |
|
|
|
|
{{ scope.row.dataSize }}M |
|
|
|
|
</template> |
|
|
|
|
</el-table-column> |
|
|
|
|
<el-table-column prop="updateTime" label="更新时间" width="155" align="center"></el-table-column> |
|
|
|
|
<el-table-column label="操作" width="100" align="center"> |
|
|
|
|
<template slot-scope="scope"> |
|
|
|
|
<el-button type="text" @click="preview(scope.row)" v-auth>预览</el-button> |
|
|
|
|
<el-button type="text" @click="download(scope.row)" v-auth>下载</el-button> |
|
|
|
|
</template> |
|
|
|
|
</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> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
|
|
|
|
|
<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"> |
|
|
|
|
<el-checkbox v-model="checkAllFields" @change="checkAllFieldsChange">全选</el-checkbox> |
|
|
|
|
<el-checkbox-group v-model="fields"> |
|
|
|
|
<el-checkbox v-for="(item,index) in fieldsList" :key="index" :label="item.comment"></el-checkbox> |
|
|
|
|
</el-checkbox-group> |
|
|
|
|
</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-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-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-select> |
|
|
|
|
</el-form-item> |
|
|
|
|
</el-form> |
|
|
|
|
|
|
|
|
|
<span slot="footer" class="dialog-footer"> |
|
|
|
|
<el-button size="small" @click="downloadVisible = false">取消</el-button> |
|
|
|
|
<el-button size="small" type="primary" @click="confirmDown">确定</el-button> |
|
|
|
|
</span> |
|
|
|
|
</el-dialog> |
|
|
|
|
|
|
|
|
|
<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=""> |
|
|
|
|
数据预览 |
|
|
|
|
</div> |
|
|
|
|
<img width="52" src="@/assets/img/close.png" style="cursor: pointer" alt="" @click="previewVisible = false"> |
|
|
|
|
</div> |
|
|
|
|
<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> |
|
|
|
|
<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"> |
|
|
|
|
<el-checkbox v-model="checkAllFields" @change="checkAllFieldsChange">全选</el-checkbox> |
|
|
|
|
<el-checkbox-group v-model="fields"> |
|
|
|
|
<el-checkbox v-for="(item, index) in fieldsList" :key="index" :label="item.comment"></el-checkbox> |
|
|
|
|
</el-checkbox-group> |
|
|
|
|
</div> |
|
|
|
|
</el-drawer> |
|
|
|
|
</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-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-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-select> |
|
|
|
|
</el-form-item> |
|
|
|
|
</el-form> |
|
|
|
|
|
|
|
|
|
<span slot="footer" class="dialog-footer"> |
|
|
|
|
<el-button size="small" @click="downloadVisible = false">取消</el-button> |
|
|
|
|
<el-button size="small" type="primary" @click="confirmDown">确定</el-button> |
|
|
|
|
</span> |
|
|
|
|
</el-dialog> |
|
|
|
|
|
|
|
|
|
<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=""> |
|
|
|
|
数据预览 |
|
|
|
|
</div> |
|
|
|
|
<img width="52" src="@/assets/img/close.png" style="cursor: pointer" alt="" @click="previewVisible = false"> |
|
|
|
|
</div> |
|
|
|
|
<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> |
|
|
|
|
</div> |
|
|
|
|
</el-drawer> |
|
|
|
|
</div> |
|
|
|
|
</template> |
|
|
|
|
|
|
|
|
|
<script> |
|
|
|
|
@ -105,7 +112,7 @@ export default { |
|
|
|
|
components: { |
|
|
|
|
menuTree |
|
|
|
|
}, |
|
|
|
|
data() { |
|
|
|
|
data () { |
|
|
|
|
return { |
|
|
|
|
that: this, |
|
|
|
|
token: util.local.get(Setting.tokenKey), |
|
|
|
|
@ -140,7 +147,7 @@ export default { |
|
|
|
|
startTimeDefault: '', |
|
|
|
|
endTimeDefault: '', |
|
|
|
|
timeOptions: { |
|
|
|
|
disabledDate(time) { |
|
|
|
|
disabledDate (time) { |
|
|
|
|
return time.getTime() < startTimeLimit || time.getTime() > endTimeLimit |
|
|
|
|
}, |
|
|
|
|
}, |
|
|
|
|
@ -173,7 +180,7 @@ export default { |
|
|
|
|
]), |
|
|
|
|
}, |
|
|
|
|
watch: { |
|
|
|
|
keyword: function(val) { |
|
|
|
|
keyword: function (val) { |
|
|
|
|
clearTimeout(this.searchTimer) |
|
|
|
|
if (!this.rendered) { |
|
|
|
|
this.searchTimer = setTimeout(() => { |
|
|
|
|
@ -183,7 +190,7 @@ export default { |
|
|
|
|
this.rendered = false |
|
|
|
|
}, |
|
|
|
|
}, |
|
|
|
|
mounted() { |
|
|
|
|
mounted () { |
|
|
|
|
this.getType() |
|
|
|
|
// 如果是从首页点下载按钮跳转过来的,就直接显示下载弹框 |
|
|
|
|
if (this.$route.query.download) { |
|
|
|
|
@ -195,7 +202,7 @@ export default { |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
methods: { |
|
|
|
|
getType() { |
|
|
|
|
getType () { |
|
|
|
|
// 获取分类 |
|
|
|
|
this.$post(this.api.getTableByClassification).then(res => { |
|
|
|
|
let typeId = this.typeId // 取得传值的id |
|
|
|
|
@ -204,7 +211,7 @@ export default { |
|
|
|
|
let action |
|
|
|
|
let isFirst = true // 判断是否是第一条数据 |
|
|
|
|
// 取得选中的那一栏 |
|
|
|
|
function actionId(arr) {//传入res |
|
|
|
|
function actionId (arr) {//传入res |
|
|
|
|
arr && arr.map((e, i) => { |
|
|
|
|
e.id = String(e.id) |
|
|
|
|
if (!i && isFirst) { |
|
|
|
|
@ -237,7 +244,7 @@ export default { |
|
|
|
|
this.getData() |
|
|
|
|
}).catch(res => { }) |
|
|
|
|
}, |
|
|
|
|
getData() { |
|
|
|
|
getData () { |
|
|
|
|
this.$post(`${this.api.getIdQueryTable}?categoryId=${this.defaultType}&showName=${this.keyword}&pageNum=${this.page}&pageSize=${this.pageSize}&updateTime=`).then(res => { |
|
|
|
|
const list = res.pageList.records |
|
|
|
|
list.map(e => { |
|
|
|
|
@ -262,26 +269,26 @@ export default { |
|
|
|
|
}) |
|
|
|
|
this.$router.replace('list') |
|
|
|
|
} |
|
|
|
|
}).catch(res => {}) |
|
|
|
|
}).catch(res => { }) |
|
|
|
|
}, |
|
|
|
|
initData() { |
|
|
|
|
initData () { |
|
|
|
|
this.page = 1 |
|
|
|
|
this.getData() |
|
|
|
|
}, |
|
|
|
|
handleCurrentChange(val) { |
|
|
|
|
handleCurrentChange (val) { |
|
|
|
|
this.page = val |
|
|
|
|
this.$refs.table.clearSelection() |
|
|
|
|
this.getData() |
|
|
|
|
}, |
|
|
|
|
// 分类展开及点击回调 |
|
|
|
|
selectType(index, indexPath) { |
|
|
|
|
selectType (index, indexPath) { |
|
|
|
|
let introduce = '' |
|
|
|
|
let dataSource = '' |
|
|
|
|
this.keyword = '' |
|
|
|
|
let list = this.typeList |
|
|
|
|
let select = '' |
|
|
|
|
// 获取最里层的第一个子级id |
|
|
|
|
function getDeepest(data) { |
|
|
|
|
function getDeepest (data) { |
|
|
|
|
if (data[0].children && data[0].children.length) { |
|
|
|
|
getDeepest(data[0].children) |
|
|
|
|
} else { |
|
|
|
|
@ -290,7 +297,7 @@ export default { |
|
|
|
|
if (data[0].dataSource) dataSource = data[0].dataSource |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
function handleData(data) { |
|
|
|
|
function handleData (data) { |
|
|
|
|
data.map((n, i) => { |
|
|
|
|
// 匹配到点击的分类，默认展开子级第一个分类 |
|
|
|
|
if (n.id == index) { |
|
|
|
|
@ -317,10 +324,10 @@ export default { |
|
|
|
|
this.previewData = [] |
|
|
|
|
this.initData() |
|
|
|
|
}, |
|
|
|
|
previewCurrentChange(val) { |
|
|
|
|
previewCurrentChange (val) { |
|
|
|
|
this.currentRow = val |
|
|
|
|
}, |
|
|
|
|
preview(row) { |
|
|
|
|
preview (row) { |
|
|
|
|
this.$get(`${this.api.previewData}?tableName=${row.name}&tableId=${row.id}`).then(res => { |
|
|
|
|
// 查询次数+1 |
|
|
|
|
this.$post(this.api.saveRecord, { |
|
|
|
|
@ -347,11 +354,11 @@ export default { |
|
|
|
|
this.previewVisible = true |
|
|
|
|
}).catch(res => { }) |
|
|
|
|
}, |
|
|
|
|
checkAllFieldsChange(val) { |
|
|
|
|
checkAllFieldsChange (val) { |
|
|
|
|
this.fields = val ? this.fieldsList.map(n => n.comment) : [] |
|
|
|
|
}, |
|
|
|
|
// 显示下载弹框 |
|
|
|
|
download(row) { |
|
|
|
|
download (row) { |
|
|
|
|
// 查询是否购买了该数据,只有购买了才能下载 |
|
|
|
|
this.$get(`${this.api.isDownload}`, { |
|
|
|
|
tableId: row.id, |
|
|
|
|
@ -386,11 +393,11 @@ export default { |
|
|
|
|
}).catch(res => { }) |
|
|
|
|
}, |
|
|
|
|
// 开始结束时间选择回调 |
|
|
|
|
timeChange() { |
|
|
|
|
timeChange () { |
|
|
|
|
// 如果开始时间大于结束时间，则提示 |
|
|
|
|
if (this.startTime && this.endTime && new Date(this.startTime) > new Date(this.endTime)) util.warningMsg('结束时间不能小于开始时间') |
|
|
|
|
}, |
|
|
|
|
closeDownload() { |
|
|
|
|
closeDownload () { |
|
|
|
|
this.checkAllFields = false |
|
|
|
|
this.fields = [] |
|
|
|
|
this.startTime = '' |
|
|
|
|
@ -398,7 +405,7 @@ export default { |
|
|
|
|
this.frequency = '' |
|
|
|
|
this.$router.push('/data').catch(err => { }) |
|
|
|
|
}, |
|
|
|
|
confirmDown() { |
|
|
|
|
confirmDown () { |
|
|
|
|
let fields = this.fields |
|
|
|
|
if (!fields.length) return util.warningMsg('请选择字段') |
|
|
|
|
if (!this.startTime) return util.warningMsg('请选择开始时间') |
|
|
|
|
@ -483,139 +490,175 @@ export default { |
|
|
|
|
</script> |
|
|
|
|
|
|
|
|
|
<style lang="scss" scoped> |
|
|
|
|
.wrap{ |
|
|
|
|
display: flex; |
|
|
|
|
padding-bottom: 20px !important; |
|
|
|
|
/deep/.left{ |
|
|
|
|
height: calc(100vh - 166px); |
|
|
|
|
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{ |
|
|
|
|
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{ |
|
|
|
|
height: 50px; |
|
|
|
|
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; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
.right{ |
|
|
|
|
flex: 1; |
|
|
|
|
max-width: calc(100% - 220px); |
|
|
|
|
.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; |
|
|
|
|
font-size: 12px; |
|
|
|
|
color: #333; |
|
|
|
|
background-color: #FAFAFA; |
|
|
|
|
} |
|
|
|
|
.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; |
|
|
|
|
} |
|
|
|
|
.search{ |
|
|
|
|
z-index: 2; |
|
|
|
|
position: absolute; |
|
|
|
|
top: 10px; |
|
|
|
|
right: 16px; |
|
|
|
|
display: flex; |
|
|
|
|
justify-content: space-between; |
|
|
|
|
align-items: center; |
|
|
|
|
width: 345px; |
|
|
|
|
height: 34px; |
|
|
|
|
padding: 7px 10px; |
|
|
|
|
margin: 0 auto; |
|
|
|
|
|
|
|
|
|
&::-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 { |
|
|
|
|
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; |
|
|
|
|
border: 1px solid #e6e6e6; |
|
|
|
|
border-radius: 5px; |
|
|
|
|
|
|
|
|
|
input{ |
|
|
|
|
width: 260px; |
|
|
|
|
margin-left: 10px; |
|
|
|
|
font-size: 14px; |
|
|
|
|
color: #333; |
|
|
|
|
background-color: transparent; |
|
|
|
|
border: 0; |
|
|
|
|
&::-webkit-input-placeholder{color: #999} |
|
|
|
|
&::-moz-placeholder{color: #999} |
|
|
|
|
&:-moz-placeholder{color: #999} |
|
|
|
|
&:focus{ |
|
|
|
|
outline: none; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.el-submenu.is-active { |
|
|
|
|
.el-submenu__title { |
|
|
|
|
&+.el-menu .el-submenu__title { |
|
|
|
|
height: 50px; |
|
|
|
|
line-height: 50px; |
|
|
|
|
background-color: rgba(147, 184, 255, .15); |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
i { |
|
|
|
|
color: #006EFF; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
.remove{ |
|
|
|
|
cursor: pointer; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.el-menu-item { |
|
|
|
|
overflow: hidden; |
|
|
|
|
text-overflow: ellipsis; |
|
|
|
|
white-space: nowrap; |
|
|
|
|
|
|
|
|
|
&.is-active { |
|
|
|
|
color: #fff; |
|
|
|
|
background-color: #0070FF; |
|
|
|
|
|
|
|
|
|
span { |
|
|
|
|
color: #fff; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
.search-icon{ |
|
|
|
|
width: 18px; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.level-6 { |
|
|
|
|
padding-right: 0; |
|
|
|
|
|
|
|
|
|
.el-submenu__title { |
|
|
|
|
padding-left: 10px !important; |
|
|
|
|
color: #fff; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
/deep/.preview-dia{ |
|
|
|
|
padding: 20px; |
|
|
|
|
.preview-wrap{ |
|
|
|
|
height: calc(100vh - 80px); |
|
|
|
|
overflow: auto; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.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; |
|
|
|
|
font-size: 12px; |
|
|
|
|
color: #333; |
|
|
|
|
background-color: #FAFAFA; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.search { |
|
|
|
|
z-index: 2; |
|
|
|
|
position: absolute; |
|
|
|
|
top: 10px; |
|
|
|
|
right: 16px; |
|
|
|
|
display: flex; |
|
|
|
|
justify-content: space-between; |
|
|
|
|
align-items: center; |
|
|
|
|
width: 345px; |
|
|
|
|
height: 34px; |
|
|
|
|
padding: 7px 10px; |
|
|
|
|
margin: 0 auto; |
|
|
|
|
background-color: #fff; |
|
|
|
|
border: 1px solid #e6e6e6; |
|
|
|
|
border-radius: 5px; |
|
|
|
|
|
|
|
|
|
input { |
|
|
|
|
width: 260px; |
|
|
|
|
margin-left: 10px; |
|
|
|
|
font-size: 14px; |
|
|
|
|
color: #333; |
|
|
|
|
background-color: transparent; |
|
|
|
|
border: 0; |
|
|
|
|
|
|
|
|
|
&::-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; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
</style> |
yujialong
