ETA1.2.2

src/routes/modules/dataRoutes.js

@@ -192,6 +192,11 @@ export default [
         name: "期货数据库",
         component: () => import("@/views/futures_manage/futuresBase.vue"),
       },
+      {
+        path: "dataSource",
+        name: "数据源管理",
+        component: () => import("@/views/dataSource_manage/dataSourceList.vue"),
+      },
     ],
   },
 ];

src/routes/modules/oldRoutes.js

@@ -306,6 +306,12 @@ export default [
         name: "外部链接配置",
         hidden: true,
       },
+      {
+        path: "dataSourceAccountList",
+        component: () => import("@/views/dataSource_manage/accountList.vue"),
+        name: "数据源终端管理",
+        hidden: true,
+      },
     ],
   },
   // 外部链接

src/views/dataSource_manage/accountList.vue

@@ -0,0 +1,86 @@
+<template>
+    <div class="account-list-page">
+        <el-button type="primary" @click="showEditAccount=true">新增终端账号</el-button>
+        <el-table
+            style="margin-top:30px"
+            :data="tableData"
+            border
+        >
+            <el-table-column
+                v-for="col in tableColOpts"
+                :key="col.key"
+                :label="col.name"
+                :prop="col.key"
+                :sortable="col.sortable"
+                align="center"
+            />
+            <el-table-column label="操作" align="center">
+                <template slot-scope="scope">
+                    <span>编辑</span>
+                    <span>禁用</span>
+                </template>
+            </el-table-column>
+            <div slot="empty">
+                <tableNoData text="暂无数据"/>
+            </div>
+        </el-table>
+
+        <!-- 新增/编辑终端账号 -->
+        <EditAccount v-model="showEditAccount"/>
+    </div>
+</template>
+
+<script>
+import EditAccount from './components/EditAccount.vue'
+export default {
+    components:{EditAccount},
+    data() {
+        return {
+            tableData:[],
+            tableColOpts:[
+                {
+                    name:'终端编号',
+                    key:'',
+                },
+                {
+                    name:'终端名称',
+                    key:'',
+                },
+                {
+                    name:'终端地址/token',
+                    key:'',
+                },
+                {
+                    name:'数据源类型',
+                    key:'',
+                },
+                {
+                    name:'状态',
+                    key:'',
+                },
+                {
+                    name:'指标数据量',
+                    key:'',
+                },
+                {
+                    name:'更新时间',
+                    key:'',
+                    sortable:'custom'
+                },
+            ],
+
+            showEditAccount:false
+        }
+    },
+}
+</script>
+
+<style lang="scss" scoped>
+.account-list-page{
+    padding: 30px;
+    border-radius: 4px;
+    border: 1px solid #DCDFE6; 
+    background-color: #fff;
+    min-height: calc(100vh - 260px);
+}
+</style>

src/views/dataSource_manage/components/DelEDBTable.vue

@@ -0,0 +1,15 @@
+<template>
+    <div class="detail-table-wrap">
+        指标删除表
+    </div>
+</template>
+
+<script>
+export default {
+
+}
+</script>
+
+<style>
+
+</style>

src/views/dataSource_manage/components/DetailTable.vue

@@ -0,0 +1,157 @@
+<template>
+    <div class="detail-table-wrap">
+        <div class="top-wrap">
+        <div class="filter-box">
+            <el-select
+                placeholder="数据源"
+                multiple
+                clearable
+                style="width:200px"
+            >
+
+            </el-select>
+            <el-select
+                placeholder="数据账号"
+                multiple
+                clearable
+                style="width:200px"
+            >
+
+            </el-select>
+            <el-cascader
+                placeholder="创建人"
+                :props="{multiple: true}"
+                collapse-tags
+                clearable
+                style="width:200px"
+            />
+            <el-select
+                v-model="filterState.frequency"
+                placeholder="频度"
+                multiple
+                clearable
+                collapse-tags
+                style="width:200px"
+            >
+                <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:200px"
+            />
+            <el-checkbox v-model="checkAll">列表全选</el-checkbox>
+        </div>
+        <div class="right-opt-box">
+            <el-button type="primary" plain>一键刷新</el-button>
+            <el-button type="primary" @click="handleShowSetRefreshTime">设置刷新时间</el-button>
+            <img class="set-icon" src="~@/assets/img/data_m/set_icon.png" alt="" @click="showSetTableCols=true">
+        </div>
+        </div>
+        <el-table
+            ref="multipleTable"
+            :data="tableData"
+            border
+            @selection-change="handleSelectionChange"
+        >
+            <el-table-column
+                type="selection"
+                width="55"
+                fixed="left"
+                align="center"
+            />
+            <el-table-column
+                v-for="col in tableColOpts"
+                :key="col.key"
+                :label="col.name"
+                :prop="col.key"
+                :sortable="col.sortable"
+                align="center"
+            />
+            <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" />
+        <!-- 设置刷新时间 -->
+        <SetRefreshTime v-model="showSetRefreshTime"/> 
+    </div>
+</template>
+
+<script>
+import {frequencyOpt} from '../utils/config'
+import SetRefreshTime from './SetRefreshTime.vue'
+import SetTableCols from './SetTableCols.vue'
+export default {
+    components:{SetTableCols,SetRefreshTime},
+    data() {
+        return {
+            frequencyOpt,
+            filterState:{
+                frequency:'',
+                keyword:''
+            },
+            checkAll:false,
+            tableColOpts:[],
+            tableData:[],
+            pageSize:15,
+            page:1,
+            total:0,
+
+            showSetTableCols:false,
+
+            showSetRefreshTime:false
+        }
+    },
+    created() {
+    },
+    methods: {
+        handleShowSetRefreshTime(){
+            this.showSetRefreshTime=true
+        }
+    },
+}
+</script>
+
+<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>

src/views/dataSource_manage/components/EDBInfoChangeTable.vue

@@ -0,0 +1,15 @@
+<template>
+    <div class="detail-table-wrap">
+        信息变更表
+    </div>
+</template>
+
+<script>
+export default {
+
+}
+</script>
+
+<style>
+
+</style>

src/views/dataSource_manage/components/EditAccount.vue

@@ -0,0 +1,85 @@
+<template>
+    <el-dialog
+      title="终端账号"
+      :visible.sync="show"
+      :modal-append-to-body="false"
+      :close-on-click-modal="false"
+      :center="true"
+      v-dialogDrag
+      custom-class="dialogclass"
+      width="540px"
+      @close="handleClose"
+    >
+        <el-form 
+            :model="formState" 
+            :rules="rules" 
+            ref="formIns" 
+            label-width="120px" 
+            class="demo-ruleForm"
+        >
+            <el-form-item label="终端名称" prop="name">
+                <el-input placeholder="请输入终端名称" v-model="formState.name" style="width:300px"></el-input>
+            </el-form-item>
+            <el-form-item label="终端地址/token" prop="url">
+                <el-input placeholder="请输入终端地址/token" v-model="formState.url"  style="width:300px"></el-input>
+            </el-form-item>
+            <el-form-item label="数据源类型" prop="type">
+                <el-select 
+                    v-model="formState.type" 
+                    placeholder="请选择数据源类型"
+                     style="width:300px"
+                >
+                    <el-option 
+                        v-for="item in dataSourceTypeOpt"
+                        :key="item"
+                        :label="item"
+                        :value="item"
+                    />
+                </el-select>
+            </el-form-item>
+            <el-form-item label="指标数据量" prop="num">
+                <el-input placeholder="请输入指标数据量" type="number" min="0" v-model.number="formState.num"  style="width:300px"></el-input>
+            </el-form-item>
+        </el-form>
+        <div style="text-align:center;margin:30px 0">
+            <el-button type="primary" plain @click="handleClose">取消</el-button>
+            <el-button type="primary">确定</el-button>
+        </div>
+    </el-dialog>
+</template>
+
+<script>
+import {dataSourceTypeOpt} from '../utils/config'
+export default {
+    model:{
+        prop:"show",
+        event:'close'
+    },
+    props:{
+        show:{
+            type:Boolean,
+            default:false
+        }
+    },
+    data() {
+        return {
+            dataSourceTypeOpt,
+            formState:{
+                name:'',
+                url:'',
+                type:'',
+                num:''
+            }
+        }
+    },
+    methods: {
+        handleClose(){
+            this.$emit('close', false)
+        }
+    },
+}
+</script>
+
+<style>
+
+</style>

src/views/dataSource_manage/components/SetRefreshTime.vue

@@ -0,0 +1,114 @@
+<template>
+    <el-dialog
+      title="设置刷新时间"
+      :visible.sync="show"
+      :modal-append-to-body="false"
+      :close-on-click-modal="false"
+      :center="true"
+      v-dialogDrag
+      custom-class="dialogclass"
+      width="660px"
+      @close="handleClose"
+    >
+        <div class="set-refresh-wrap">
+            <el-radio-group v-model="refreshType">
+                <el-radio :label="1">正常刷新</el-radio>
+                <el-radio :label="2">终止刷新</el-radio>
+            </el-radio-group>
+            <div class="select-time-wrap">
+                <div class="select-item" v-for="item,index in list" :key="index">
+                    <span>刷新时间{{index+1}}</span>
+                    <el-select
+                        :disabled="refreshType==2"
+                        placeholder="请选择频率"
+                        v-model="item.date"
+                        clearable
+                        style="width:200px"
+                    >
+                        <el-option 
+                            v-for="item in refreshFrequencyOpt" 
+                            :key="item"
+                            :label="item"
+                            :value="item"
+                        />
+                    </el-select>
+                    <el-time-select
+                        :disabled="refreshType==2"
+                        style="width:200px"
+                        clearable
+                        :editable="false"
+                        v-model="item.time"
+                        :picker-options="{
+                            start: '00:00',
+                            step: '01:00',
+                            end: '23:00'
+                        }"
+                        value-format="HH:mm"
+                        placeholder="请选择时间"
+                    />
+                </div>
+            </div>
+            <div style="text-align:center;margin:30px 0">
+                <el-button type="primary" plain @click="handleClose">取消</el-button>
+                <el-button type="primary">确定</el-button>
+            </div>
+        </div>
+    </el-dialog>
+</template>
+
+<script>
+import {refreshFrequencyOpt} from '../utils/config'
+export default {
+    model:{
+        prop:"show",
+        event:'close'
+    },
+    props:{
+        show:{
+            type:Boolean,
+            default:false
+        }
+    },
+    data() {
+        return {
+            refreshFrequencyOpt,
+            refreshType:1,
+            list:[
+                {
+                    date:'',
+                    time:''
+                },
+                {
+                    date:'',
+                    time:''
+                },
+                {
+                    date:'',
+                    time:''
+                }
+            ]
+        }
+    },
+    methods: {
+        handleClose(){
+            this.$emit('close', false)
+        }
+    },
+}
+</script>
+
+<style lang="scss" scoped>
+.set-refresh-wrap{
+    padding: 10px 30px;
+    .select-time-wrap{
+        margin-top: 30px;
+        .select-item{
+            display: flex;
+            align-items: center;
+            gap: 20px;
+            margin-bottom: 30px;
+        }
+    }
+    
+}
+</style>

src/views/dataSource_manage/components/SetTableCols.vue

@@ -0,0 +1,70 @@
+<template>
+    <el-dialog
+      title="自定义列"
+      :visible.sync="show"
+      :modal-append-to-body="false"
+      :close-on-click-modal="false"
+      :center="true"
+      v-dialogDrag
+      custom-class="dialogclass"
+      width="700px"
+      @close="handleClose"
+    >
+        <draggable
+            v-model="list"
+            class="list-wrap"
+            animation="300"
+            tag="div"
+            handle=".drag"
+        >
+            <div class="list-item">
+                <el-checkbox><span class="name">名好处呢</span></el-checkbox>
+                <img class="drag" src="~@/assets/img/data_m/move_ico2.png" alt="">
+            </div>
+        </draggable>
+        <div style="text-align:center;margin:30px 0">
+            <el-button type="primary" plain @click="handleClose">取消</el-button>
+            <el-button type="primary">确定</el-button>
+        </div>
+    </el-dialog>
+</template>
+
+<script>
+import draggable from 'vuedraggable';
+export default {
+    components:{draggable},
+    model:{
+        prop:"show",
+        event:'close'
+    },
+    props:{
+        show:{
+            type:Boolean,
+            default:false
+        }
+    },
+    methods: {
+        handleClose(){
+            this.$emit('close', false)
+        }
+    },
+}
+</script>
+
+<style lang="scss" scoped>
+.list-wrap{
+    .list-item{
+        padding: 5px 0;
+        border-bottom: 1px solid #000;
+        display: flex;
+        justify-content: space-between;
+        .name{
+            font-size: 16px;
+            color: #000;
+        }
+        .drag{
+            cursor: move;
+        }
+    }
+}
+</style>

src/views/dataSource_manage/components/StatisticTable.vue

@@ -0,0 +1,27 @@
+<template>
+    <div class="statistic-table-wrap">
+        <div class="top-wrap">
+            <img class="set-icon" src="~@/assets/img/data_m/set_icon.png" alt="" @click="showSetTableCols=true">
+        </div>
+        
+    </div>
+</template>
+
+<script>
+export default {
+
+}
+</script>
+
+<style lang="scss" scoped>
+.statistic-table-wrap{
+    .top-wrap{
+        display: flex;
+        justify-content: flex-end;
+        .set-icon{
+            width: 40px;
+            cursor: pointer;
+        }
+    }
+}
+</style>

src/views/dataSource_manage/dataSourceList.vue

@@ -0,0 +1,86 @@
+<template>
+    <div class="data-source-list-page">
+        <div class="top-wrap">
+            <ul class="nav-box">
+                <li 
+                    :class="['nav-item',item.key===activeNav?'active':'']" 
+                    v-for="item in navOpt" 
+                    :key="item.key"
+                    @click="activeNav=item.key"
+                >{{item.name}}</li>
+            </ul>
+            <el-date-picker
+                v-model="dateVal"
+                type="date"
+                placeholder="选择日期"
+                 value-format="yyyy-MM-dd"
+            />
+        </div>
+        <div class="main-box">
+            <component :is='activeNav'></component>
+        </div>
+    </div>
+</template>
+
+<script>
+import DelEDBTable from './components/DelEDBTable.vue'
+import DetailTable from './components/DetailTable.vue'
+import EDBInfoChangeTable from './components/EDBInfoChangeTable.vue'
+import StatisticTable from './components/StatisticTable.vue'
+export default {
+    components:{DelEDBTable,DetailTable,EDBInfoChangeTable,StatisticTable},
+    data() {
+        return {
+            navOpt:[
+                {name:'数据源明细表',key:'DetailTable'},
+                {name:'数据源统计表',key:'StatisticTable'},
+                {name:'删除指标表',key:'DelEDBTable'},
+                {name:'指标信息变更表',key:'EDBInfoChangeTable'}
+            ],
+            activeNav:'DetailTable',
+            dateVal:''
+        }
+    },
+}
+</script>
+
+<style lang="scss" scoped>
+.data-source-list-page{
+    .top-wrap{
+        padding: 30px;
+        border-radius: 4px;
+        border: 1px solid #DCDFE6; 
+        background-color: #fff;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        .nav-box{
+            display: flex;
+            border: 1px solid #DCDFE6;
+            border-radius: 4px;
+            overflow: hidden;
+            &:last-child{
+                border-right: none;
+            }
+            .nav-item{
+                padding: 10px;
+                color: #666;
+                border-right: 1px solid #DCDFE6;
+                cursor: pointer;
+                &.active{
+                    background-color: #0052D9;
+                    color: #fff;
+                }
+            }
+        }
+    }
+    .main-box{
+        margin-top: 30px;
+        padding: 30px;
+        border-radius: 4px;
+        border: 1px solid #DCDFE6; 
+        background-color: #fff;
+        min-height: calc(100vh - 380px);
+    }
+}
+</style>

src/views/dataSource_manage/utils/config.js

@@ -0,0 +1,5 @@
+export const frequencyOpt=['日度','周度','旬度','月度','季度','年度']
+
+export const refreshFrequencyOpt=['每工作日','周一','周二','周三','周四','周五','周六','周日','每月',]
+
+export const dataSourceTypeOpt=['钢联','wind','同花顺','彭博','路透']