|
@@ -0,0 +1,313 @@
|
|
|
+<template>
|
|
|
+ <div class="detail-table-wrap">
|
|
|
+ <div class="top-wrap">
|
|
|
+ <div class="filter-box">
|
|
|
+ <el-select
|
|
|
+ v-model="filterState.terminalCode"
|
|
|
+ placeholder="终端编码"
|
|
|
+ multiple
|
|
|
+ clearable
|
|
|
+ collapse-tags
|
|
|
+ style="width:250px"
|
|
|
+ @change="handleRefreshList"
|
|
|
+ >
|
|
|
+ <el-option
|
|
|
+ v-for="item in terminalCodeOpts"
|
|
|
+ :key="item.TerminalCode"
|
|
|
+ :label="item.Name"
|
|
|
+ :value="item.TerminalCode"
|
|
|
+ />
|
|
|
+ </el-select>
|
|
|
+ <el-cascader
|
|
|
+ v-model="filterState.user"
|
|
|
+ placeholder="创建人"
|
|
|
+ :options="sysUserOpts"
|
|
|
+ :props="props"
|
|
|
+ collapse-tags
|
|
|
+ :show-all-levels="false"
|
|
|
+ clearable
|
|
|
+ @change="handleRefreshList"
|
|
|
+ filterable
|
|
|
+ style="width:250px"
|
|
|
+ />
|
|
|
+ <el-select
|
|
|
+ v-model="filterState.frequency"
|
|
|
+ placeholder="频度"
|
|
|
+ multiple
|
|
|
+ clearable
|
|
|
+ collapse-tags
|
|
|
+ style="width:250px"
|
|
|
+ @change="handleRefreshList"
|
|
|
+ >
|
|
|
+ <el-option
|
|
|
+ v-for="item in frequencyOpt"
|
|
|
+ :key="item"
|
|
|
+ :label="item"
|
|
|
+ :value="item"
|
|
|
+ />
|
|
|
+ </el-select>
|
|
|
+ <el-input
|
|
|
+ placeholder="指标ID/指标名称"
|
|
|
+ prefix-icon="el-icon-search"
|
|
|
+ v-model="filterState.keyword"
|
|
|
+ clearable
|
|
|
+ style="width:250px"
|
|
|
+ @input="handleRefreshList"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ <img src="~@/assets/img/data_m/set_icon.png" alt="" style="cursor: pointer;" @click="showSetTableCols=true">
|
|
|
+ </div>
|
|
|
+ <el-table
|
|
|
+ v-loading="tableLoading"
|
|
|
+ ref="tableIns"
|
|
|
+ :data="tableData"
|
|
|
+ border
|
|
|
+ @sort-change="handleTableSortChange"
|
|
|
+ >
|
|
|
+ <el-table-column
|
|
|
+ v-for="col in tableColOpts"
|
|
|
+ :key="col.ColumnKey"
|
|
|
+ :column-key="col.ColumnKey"
|
|
|
+ :label="col.ColumnName"
|
|
|
+ :prop="col.ColumnKey"
|
|
|
+ :sortable="col.IsSort===1?'custom':false"
|
|
|
+ align="center"
|
|
|
+ :width="getColWidth(col.ColumnKey)"
|
|
|
+ >
|
|
|
+ <template slot="header" slot-scope="scope">
|
|
|
+ <span>{{col.ColumnName}}</span>
|
|
|
+ <el-tooltip
|
|
|
+ effect="dark"
|
|
|
+ :content="getTableHeadTips(col.ColumnKey)"
|
|
|
+ placement="top-start"
|
|
|
+ >
|
|
|
+ <i class="el-icon-info" v-if="tipsKeysArr.includes(col.ColumnKey)"></i>
|
|
|
+ </el-tooltip>
|
|
|
+ </template>
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <span v-if="col.ColumnKey==='IsAdd'">{{scope.row.IsAdd===1?'是':'否'}}</span>
|
|
|
+ <span v-else-if="col.ColumnKey==='NeedRefresh'">{{scope.row.NeedRefresh===1?'是':'否'}}</span>
|
|
|
+ <span v-else-if="col.ColumnKey==='HasRefresh'">{{scope.row.HasRefresh===1?'是':'否'}}</span>
|
|
|
+ <span v-else-if="col.ColumnKey==='DataUpdateResult'">{{scope.row.DataUpdateResult===1?'是':'否'}}</span>
|
|
|
+
|
|
|
+ <span v-else>{{scope.row[col.ColumnKey]}}</span>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <div slot="empty">
|
|
|
+ <tableNoData text="暂无数据"/>
|
|
|
+ </div>
|
|
|
+ </el-table>
|
|
|
+ <el-pagination
|
|
|
+ layout="total,prev,pager,next,jumper"
|
|
|
+ background
|
|
|
+ @current-change="handleCurrentChange"
|
|
|
+ :page-size="pageSize"
|
|
|
+ @size-change="handleSizeChange"
|
|
|
+ :total="total"
|
|
|
+ style="float: right;margin-top:20px"
|
|
|
+ />
|
|
|
+ <!-- 自定义列表 -->
|
|
|
+ <SetTableCols v-model="showSetTableCols" :ColumnType="1" @change="handleTableColChange"/>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import {apiDataSource} from '@/api/modules/dataSource'
|
|
|
+import {frequencyOpt} from '../utils/config'
|
|
|
+import SetTableCols from './SetTableCols.vue'
|
|
|
+import { departInterence } from "@/api/api.js";
|
|
|
+export default {
|
|
|
+ components:{SetTableCols},
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ tipsKeysArr:['EdbNameSource','DataUpdateTime','ErDataUpdateDate','NeedRefresh','HasRefresh','UpdateTime'],
|
|
|
+ frequencyOpt,
|
|
|
+ terminalCodeOpts:[],
|
|
|
+ sysUserOpts:[],
|
|
|
+ props: {
|
|
|
+ value: "AdminId",
|
|
|
+ label: "RealName",
|
|
|
+ children: "ChildrenList",
|
|
|
+ multiple: true,
|
|
|
+ emitPath:false
|
|
|
+ },
|
|
|
+ filterState:{
|
|
|
+ frequency:'',
|
|
|
+ keyword:'',
|
|
|
+ sortKey:'',
|
|
|
+ sortType:'',
|
|
|
+ terminalCode:'',
|
|
|
+ user:[],
|
|
|
+ dateVal:this.$moment().format('YYYY-MM-DD')||''
|
|
|
+ },
|
|
|
+ checkAll:false,
|
|
|
+ tableColOpts:[],
|
|
|
+ tableData:[],
|
|
|
+ pageSize:15,
|
|
|
+ page:1,
|
|
|
+ total:0,
|
|
|
+ tableLoading:false,
|
|
|
+
|
|
|
+ showSetTableCols:false,
|
|
|
+
|
|
|
+ }
|
|
|
+ },
|
|
|
+ created() {
|
|
|
+ this.getTableColOpts()
|
|
|
+ this.getTerminalCodeOpts()
|
|
|
+ this.getSysUserList()
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ //获取表格数据
|
|
|
+ getTableList(){
|
|
|
+ this.tableLoading=true
|
|
|
+ apiDataSource.GLDetailTableList({
|
|
|
+ CurrentIndex:this.page,
|
|
|
+ PageSize:this.pageSize,
|
|
|
+ SortParam:this.filterState.sortKey,
|
|
|
+ SortType:this.filterState.sortType,
|
|
|
+ CreateTime:this.filterState.dateVal,
|
|
|
+ TerminalCode:this.filterState.terminalCode?this.filterState.terminalCode.join(','):'',
|
|
|
+ SysUserId:this.filterState.user?this.filterState.user.join(','):'',
|
|
|
+ Frequency:this.filterState.frequency?this.filterState.frequency.join(','):'',
|
|
|
+ KeyWord:this.filterState.keyword
|
|
|
+ }).then(res=>{
|
|
|
+ this.tableLoading=false
|
|
|
+ if(res.Ret===200){
|
|
|
+ const arr=res.Data.List||[]
|
|
|
+ this.tableData=arr
|
|
|
+ this.total=res.Data.Paging.Totals
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+
|
|
|
+ handleCurrentChange(e){
|
|
|
+ this.page=e
|
|
|
+ this.getTableList()
|
|
|
+ },
|
|
|
+
|
|
|
+ // 筛选项刷新列表
|
|
|
+ handleRefreshList(){
|
|
|
+ this.page=1
|
|
|
+ this.getTableList()
|
|
|
+ },
|
|
|
+
|
|
|
+ // 获取表格列配置项
|
|
|
+ getTableColOpts(){
|
|
|
+ this.tableLoading=true
|
|
|
+ this.tableColOpts=[]
|
|
|
+ apiDataSource.GLTableColOpts({ColumnType:1}).then(res=>{
|
|
|
+ if(res.Ret===200){
|
|
|
+ const arr=res.Data.List||[]
|
|
|
+ this.tableColOpts=arr.filter(item=>item.IsShow===1)
|
|
|
+ this.$nextTick(()=>{
|
|
|
+ // this.$refs.tableIns.doLayout()
|
|
|
+ this.tableLoading=false
|
|
|
+ })
|
|
|
+ this.getTableList()
|
|
|
+
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+
|
|
|
+ // 表格配置项变更
|
|
|
+ handleTableColChange(){
|
|
|
+ this.getTableColOpts()
|
|
|
+ },
|
|
|
+
|
|
|
+ // 排序
|
|
|
+ handleTableSortChange({column, prop, order}){
|
|
|
+ console.log(column, prop, order);
|
|
|
+ this.filterState.sortKey=prop
|
|
|
+ this.filterState.sortType=order==='descending'?'desc':order==='ascending'?'asc':''
|
|
|
+ this.handleRefreshList()
|
|
|
+ },
|
|
|
+
|
|
|
+ // 获取终端编码数据
|
|
|
+ getTerminalCodeOpts(){
|
|
|
+ apiDataSource.terminalCodeArr().then(res=>{
|
|
|
+ if(res.Ret===200){
|
|
|
+ this.terminalCodeOpts=res.Data.List||[]
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+
|
|
|
+ // 获取所有系统用户
|
|
|
+ async getSysUserList() {
|
|
|
+ const res = await departInterence.getQuestionAdminList();
|
|
|
+ if (res.Ret === 200) {
|
|
|
+ this.sysUserOpts = res.Data.List||[];
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
+ handleShowSetTableCol(){
|
|
|
+ this.showSetTableCols=true
|
|
|
+ },
|
|
|
+
|
|
|
+ // table说明文案
|
|
|
+ getTableHeadTips(key){
|
|
|
+ const tipsMap={
|
|
|
+ EdbNameSource:'指标在数据源的全称',
|
|
|
+ DataUpdateTime:'指标最近一次数据发生变化的时间',
|
|
|
+ ErDataUpdateDate:'指标数据发生变化的最早日期',
|
|
|
+ NeedRefresh:'该指标今日是否设置了定时刷新任务',
|
|
|
+ HasRefresh:'该指标是否发起了刷新任务',
|
|
|
+ UpdateTime:'指标最近一次执行刷新任务的时间'
|
|
|
+ }
|
|
|
+ return tipsMap[key]
|
|
|
+ },
|
|
|
+
|
|
|
+ // 设置列的宽度
|
|
|
+ getColWidth(key){
|
|
|
+ const widthMap={
|
|
|
+ EdbNameSource:'120px',
|
|
|
+ DataUpdateTime:'120px',
|
|
|
+ ErDataUpdateDate:'200px',
|
|
|
+ NeedRefresh:'200px',
|
|
|
+ HasRefresh:'200px',
|
|
|
+ SourceUpdateTime:'120px',
|
|
|
+ DataUpdateResult:'120px',
|
|
|
+ SourceUpdateFailedReason:'120px'
|
|
|
+ }
|
|
|
+
|
|
|
+ return widthMap[key]
|
|
|
+ }
|
|
|
+ },
|
|
|
+}
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss">
|
|
|
+.detail-table-wrap{
|
|
|
+ .top-wrap{
|
|
|
+ .el-cascader__search-input{
|
|
|
+ min-width: 30px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+</style>
|
|
|
+<style lang="scss" scoped>
|
|
|
+.top-wrap{
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: flex-start;
|
|
|
+ margin-bottom: 30px;
|
|
|
+ .filter-box{
|
|
|
+ margin-right: 100px;
|
|
|
+ display: flex;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ align-items: center;
|
|
|
+ gap: 10px 20px;
|
|
|
+ }
|
|
|
+ .right-opt-box{
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ gap: 20px;
|
|
|
+ .set-icon{
|
|
|
+ width: 40px;
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+</style>
|