ui修改-颜色等

src/layouts/header/index.vue

@@ -1,13 +1,8 @@
 <template>
     <div class="header">
         <a class="logo" @click="toIndex">
-            <!-- <img width="180" v-if="isLogin || (isManager && showSetting) || !isUser" src="@/assets/img/logo.png" alt=""> -->
             <span v-if="token && isManager && !showSetting">{{schoolName}}</span>
         </a>
-        <!-- <div class="search" v-if="isData">
-            <input v-model="keyword" type="text" placeholder="请输入数据表名称">
-            <img src="../../assets/img/search.png" alt="" class="search-icon">
-        </div> -->
         <div class="inner">
             <div style="height: 70px;"></div>
             <navbar ref="nav"></navbar>
@@ -57,169 +52,169 @@
 </template>
 <script>
 import navbar from '../navbar'
-import { mapState,mapActions } from 'vuex'
+import { mapState, mapActions } from 'vuex'
 import Setting from '@/setting'
 import util from '@/libs/util'
 import bus from '@/libs/bus'
 export default {
-    data() {
-        return {
-            token: util.local.get(Setting.tokenKey),
-            isLogin: this.$route.path == '/login',
-            isData: this.$route.path == '/data/list',
-            customer: this.$route.query.customer,
-            rendered: false,
-            keyword: '',
-            searchTimer: null,
-            userName: '',
-            isUser: false,
-            showSetting: true,
-            id: '',
-            schoolName: '',
-            passwordVisible: false,
-            passwordForm: {
-                password: '',
-                newPassword: '',
-                reNewPassword: ''
-            },
-        };
+  data() {
+    return {
+      token: util.local.get(Setting.tokenKey),
+      isLogin: this.$route.path == '/login',
+      isData: this.$route.path == '/data/list',
+      customer: this.$route.query.customer,
+      rendered: false,
+      keyword: '',
+      searchTimer: null,
+      userName: '',
+      isUser: false,
+      showSetting: true,
+      id: '',
+      schoolName: '',
+      passwordVisible: false,
+      passwordForm: {
+        password: '',
+        newPassword: '',
+        reNewPassword: ''
+      },
+    };
+  },
+  components: { navbar },
+  computed: {
+    ...mapState('user', [
+      'avatar', 'isManager', 'schoolId', 'isCustomer'
+    ]),
+    ...mapState('auth', [
+      'routes'
+    ])
+  },
+  watch: {
+    keyword: function(val) {
+      clearTimeout(this.searchTimer)
+      if (!this.rendered) {
+        this.searchTimer = setTimeout(() => {
+          bus.$emit('initData', this.keyword)
+        }, 500)
+      }
+      this.rendered = false
     },
-    components: { navbar },
-    computed: {
-        ...mapState('user', [
-            'avatar','isManager','schoolId','isCustomer'
-        ]),
-        ...mapState('auth', [
-            'routes'
-        ])
-    },
-    watch: {
-        keyword: function(val) {
-            clearTimeout(this.searchTimer)
-            if(!this.rendered){
-                this.searchTimer = setTimeout(() => {
-                    bus.$emit('initData',this.keyword)
-                },500)
-            }
-            this.rendered = false
-        },
-        '$route'(to,from) {
-            let isData = this.$route.path == '/data/list'
-            if(isData){
-                this.rendered = true
-                this.keyword = ''
-            }
-            this.isData = isData
+    '$route'(to, from) {
+      let isData = this.$route.path == '/data/list'
+      if (isData) {
+        this.rendered = true
+        this.keyword = ''
+      }
+      this.isData = isData
+    }
+  },
+  mounted() {
+    // 如果是客户,则存到store里去,因为客户是没有用户信息的,上面要根据这个值来判断显示与否
+    if (this.customer) {
+      let customer = atob(decodeURI(this.customer)) == 'false' ? false : true
+      this.setCustomer(customer)
+    }
+
+    // 如果登录了,才调用用户信息的接口
+    this.token && this.getUserInfo()
+  },
+  methods: {
+    ...mapActions('user', [
+      'setInfo', 'logout', 'setManager', 'setCustomer'
+    ]),
+    getUserInfo() {
+      this.$get(this.api.userInfo).then(res => {
+        let userInfo = res.userInfo ? res.userInfo : {}
+        let userAccount = res.userAccount
+        let isManager = userAccount.roleId != '0'
+        this.isUser = isManager
+        let mg = this.$route.query.mg
+        // 如果是管理员
+        if (mg && atob(decodeURI(mg)) === 'true') {
+          this.showSetting = false
         }
+        this.userName = userAccount.account
+        this.id = userAccount.id
+        this.schoolName = res.schoolName
+        this.setInfo({
+          avatar: userInfo.userAvatars,
+          schoolId: userAccount.schoolId,
+        })
+        this.setManager(isManager)
+      }).catch(err => { })
     },
-    mounted(){
-        // 如果是客户,则存到store里去,因为客户是没有用户信息的,上面要根据这个值来判断显示与否
-        if(this.customer){
-            let customer = atob(decodeURI(this.customer)) == 'false' ? false : true
-            this.setCustomer(customer)
-        }
-        
-        // 如果登录了,才调用用户信息的接口
-        this.token && this.getUserInfo()
+    toIndex() {
+      this.$refs.nav.jump({
+        index: '/index/list',
+        title: '首页'
+      })
     },
-    methods: {
-        ...mapActions('user', [
-            'setInfo','logout','setManager','setCustomer'
-        ]),
-        getUserInfo(){
-            this.$get(this.api.userInfo).then(res => {
-                let userInfo = res.userInfo ? res.userInfo : {}
-                let userAccount = res.userAccount
-                let isManager = userAccount.roleId != '0'
-                this.isUser = isManager
-                let mg = this.$route.query.mg
-                // 如果是管理员
-                if(mg && atob(decodeURI(mg)) === 'true'){
-                    this.showSetting = false
-                }
-                this.userName = userAccount.account
-                this.id = userAccount.id
-                this.schoolName = res.schoolName
-                this.setInfo({
-                    avatar: userInfo.userAvatars,
-                    schoolId: userAccount.schoolId,
-                })
-                this.setManager(isManager)
-            }).catch(err => {})
-        },
-        toIndex(){
-            this.$refs.nav.jump({
-                index: '/index/list',
-                title: '首页'
-            })
-        },
-        toSearch(){
-            this.$refs.nav.jump({
-                index: '/index/list',
-                title: '首页'
-            })
-        },
-        toLogin(){
-            this.$refs.nav.jump({
-                index: '/login',
-                title: '登录'
-            })
-        },
-        // 跳转到管理员后台
-        toManager(){
-            let routes = this.routes
-            if(routes.length){
-                let route = this.$router.resolve({
-                    path: this.routes[0].name,
-                    query: {
-                        mg: btoa(true),
-                        schoolId: btoa(this.schoolId),
-                        customer: btoa(this.isCustomer)
-                    }
-                })
-                window.open(route.href)
-            }else{
-                // 如果接口返回的角色权限为空,则表示没有给该角色开放任何模块权限,直接提示用户未开放
-                util.warningMsg('该角色未开放模块，请联系管理员')
-            }
-        },
-        userCommand(command){
-            if(command == 'person'){
-                this.$router.push('/setting/person').catch(err => {})
-            }else if(command == 'resetPw'){
-                this.showPassword()
-            }else if(command == 'myDownload'){
-                this.$router.push('/setting/download').catch(err => {})
-            }else{
-                this.logout()
-            }
-        },
-        showPassword() {
-            this.passwordVisible = true
-        },
-        editPassword() {
-            if(!this.passwordForm.password) return util.warningMsg('请输入原密码')
-            if(!this.passwordForm.newPassword) return util.warningMsg('请输入新密码')
-            if(!this.passwordForm.reNewPassword) return util.warningMsg('请确认新密码')
-            if(this.passwordForm.newPassword.length < 6 || this.passwordForm.reNewPassword.length < 6) return util.warningMsg('请输入6位数以上的密码')
-            if(this.passwordForm.newPassword !== this.passwordForm.reNewPassword) return util.warningMsg('输入的新密码不一致，请重新确认')
-            if(this.passwordForm.password === this.passwordForm.newPassword) return util.warningMsg('原密码跟新密码不能一致')
+    toSearch() {
+      this.$refs.nav.jump({
+        index: '/index/list',
+        title: '首页'
+      })
+    },
+    toLogin() {
+      this.$refs.nav.jump({
+        index: '/login',
+        title: '登录'
+      })
+    },
+    // 跳转到管理员后台
+    toManager() {
+      let routes = this.routes
+      if (routes.length) {
+        let route = this.$router.resolve({
+          path: this.routes[0].name,
+          query: {
+            mg: btoa(true),
+            schoolId: btoa(this.schoolId),
+            customer: btoa(this.isCustomer)
+          }
+        })
+        window.open(route.href)
+      } else {
+        // 如果接口返回的角色权限为空,则表示没有给该角色开放任何模块权限,直接提示用户未开放
+        util.warningMsg('该角色未开放模块，请联系管理员')
+      }
+    },
+    userCommand(command) {
+      if (command == 'person') {
+        this.$router.push('/setting/person').catch(err => { })
+      } else if (command == 'resetPw') {
+        this.showPassword()
+      } else if (command == 'myDownload') {
+        this.$router.push('/setting/download').catch(err => { })
+      } else {
+        this.logout()
+      }
+    },
+    showPassword() {
+      this.passwordVisible = true
+    },
+    editPassword() {
+      if (!this.passwordForm.password) return util.warningMsg('请输入原密码')
+      if (!this.passwordForm.newPassword) return util.warningMsg('请输入新密码')
+      if (!this.passwordForm.reNewPassword) return util.warningMsg('请确认新密码')
+      if (this.passwordForm.newPassword.length < 6 || this.passwordForm.reNewPassword.length < 6) return util.warningMsg('请输入6位数以上的密码')
+      if (this.passwordForm.newPassword !== this.passwordForm.reNewPassword) return util.warningMsg('输入的新密码不一致，请重新确认')
+      if (this.passwordForm.password === this.passwordForm.newPassword) return util.warningMsg('原密码跟新密码不能一致')
 
-            let data = this.passwordForm
-            data.accountId = this.id
-            this.$post(this.api.examinePassword,data).then(res => {
-                util.successMsg('修改成功')
-                this.passwordVisible = false
-            }).catch(err => {})
-        },
-        closePassword() {
-            this.passwordForm = {
-                password: '',
-                newPassword: '',
-                reNewPassword: ''
-            }
-        },
+      let data = this.passwordForm
+      data.accountId = this.id
+      this.$post(this.api.examinePassword, data).then(res => {
+        util.successMsg('修改成功')
+        this.passwordVisible = false
+      }).catch(err => { })
+    },
+    closePassword() {
+      this.passwordForm = {
+        password: '',
+        newPassword: '',
+        reNewPassword: ''
+      }
     },
+  },
 };
 </script>
 <style lang="scss" scoped>

src/layouts/navbar/index.vue

@@ -7,104 +7,104 @@
 </template>
 
 <script>
-import { mapState,mapActions } from 'vuex'
+import { mapState, mapActions } from 'vuex'
 import addRoutes from '@/libs/route/addRoutes'
 import Setting from '@/setting'
 import util from '@/libs/util'
 export default {
-    data() {
-        return {
-            managerStr: this.$route.query.mg,
-            isManager: false,
-            active: this.$route.path,
-            defaultMenus: [],
-            // 前台菜单
-            dataMenu: [{
-                index: '/index/list',
-                title: '首页'
-            },{
-                index: '/data/list',
-                title: '数据'
-            }],
-            // 后台菜单（下面要根据获取到的该角色拥有的权限来显示哪些菜单）
-            managerMenus: [
-                {
-                    index: '/stat/list',
-                    title: '数据统计'
-                },{
-                    index: '/user/list',
-                    title: '用户管理'
-                },{
-                    index: '/role/list',
-                    title: '角色权限'
-                }
-            ],
-            menus: [],
-            actives: {}
-        };
-    },
-    computed: {
-        ...mapState('auth', [
-            'routes'
-        ])
-    },
-    watch: {
-        '$route'(to,from) {
-            let actives = this.actives
-            for(let i in this.actives){
-                if(actives[i].includes(this.$route.name)) this.active = `/${i}/list`
-            }
-            this.active = this.$route.path
+  data() {
+    return {
+      managerStr: this.$route.query.mg,
+      isManager: false,
+      active: this.$route.path,
+      defaultMenus: [],
+      // 前台菜单
+      dataMenu: [{
+        index: '/index/list',
+        title: '首页'
+      }, {
+        index: '/data/list',
+        title: '数据'
+      }],
+      // 后台菜单（下面要根据获取到的该角色拥有的权限来显示哪些菜单）
+      managerMenus: [
+        {
+          index: '/stat/list',
+          title: '数据统计'
+        }, {
+          index: '/user/list',
+          title: '用户管理'
+        }, {
+          index: '/role/list',
+          title: '角色权限'
         }
-    },
-    mounted() {
-        if(util.local.get(Setting.tokenKey)){// 如果是登录状态
-            this.getPer()
-            if(this.managerStr && atob(decodeURI(this.managerStr)) === 'true'){
-                this.isManager = true
-                this.setManager(false)
-            }
-        }else{
-            this.menus = this.defaultMenus
+      ],
+      menus: [],
+      actives: {}
+    };
+  },
+  computed: {
+    ...mapState('auth', [
+      'routes'
+    ])
+  },
+  watch: {
+    '$route'(to, from) {
+      let actives = this.actives
+      for (let i in this.actives) {
+        if (actives[i].includes(this.$route.name)) this.active = `/${i}/list`
+      }
+      this.active = this.$route.path
+    }
+  },
+  mounted() {
+    if (util.local.get(Setting.tokenKey)) {// 如果是登录状态
+      this.getPer()
+      if (this.managerStr && atob(decodeURI(this.managerStr)) === 'true') {
+        this.isManager = true
+        this.setManager(false)
+      }
+    } else {
+      this.menus = this.defaultMenus
+    }
+  },
+  methods: {
+    ...mapActions('user', [
+      'setManager'
+    ]),
+    initMenu() {
+      if (this.isManager) {// 该值为true，则表示当前是在后台（是否是后台是通过url上面的managerStr来判断的）
+        this.defaultMenus = this.managerMenus
+        if (Setting.dynamicRoute) {
+          let routes = this.routes
+          let menus = []
+          this.defaultMenus.map(e => {
+            routes.find(n => n.name == e.index) && menus.push(e)
+          })
+          this.menus = menus
+        } else {
+          this.menus = this.defaultMenus
         }
+      } else {
+        // 如果不是在后台,则显示默认的菜单和数据两个菜单
+        this.menus = [...this.defaultMenus, ...this.dataMenu]
+      }
     },
-    methods: {
-        ...mapActions('user', [
-            'setManager'
-        ]),
-        initMenu(){
-            if(this.isManager){// 该值为true，则表示当前是在后台（是否是后台是通过url上面的managerStr来判断的）
-                this.defaultMenus = this.managerMenus
-                if(Setting.dynamicRoute){
-                    let routes = this.routes
-                    let menus = []
-                    this.defaultMenus.map(e => {
-                        routes.find(n => n.name == e.index) && menus.push(e)
-                    })
-                    this.menus = menus
-                }else{
-                    this.menus = this.defaultMenus
-                }
-            }else{
-                // 如果不是在后台,则显示默认的菜单和数据两个菜单
-                this.menus = [...this.defaultMenus,...this.dataMenu]
-            }
-        },
-        jump(item){
-            this.active = item.index
-            this.$router.push(item.index).catch(err => {})
-        },
-        // 获取权限列表
-        getPer(){
-            this.$get(`${this.api.getPermissions}?platformId=${Setting.platformId}`).then(res => {
-                let routes = res.permissionMenu[0].children
-                Setting.dynamicRoute && addRoutes(routes)
-                this.initMenu()
-            }).catch(err => {
-                this.menus = this.defaultMenus
-            })
-        },
-    }
+    jump(item) {
+      this.active = item.index
+      this.$router.push(item.index).catch(err => { })
+    },
+    // 获取权限列表
+    getPer() {
+      this.$get(`${this.api.getPermissions}?platformId=${Setting.platformId}`).then(res => {
+        let routes = res.permissionMenu[0].children
+        Setting.dynamicRoute && addRoutes(routes)
+        this.initMenu()
+      }).catch(err => {
+        this.menus = this.defaultMenus
+      })
+    },
+  }
 };
 </script>
 
@@ -112,18 +112,19 @@ export default {
     .nav{
         position: absolute;
         top: 0;
-        left: 50%;
-        transform: translateX(-50%);
+        left: 250px;
         display: flex;
         li{
-            padding: 0 25px;
+            padding: 0 15px;
+            margin: 0 20px;
             font-size: 16px;
-            line-height: 70px;
-            color: #0d0d0d;
+            line-height: 66px;
+            color: #3F3F3F;
             cursor: pointer;
+            border-bottom: 4px solid transparent;
             &.active{
-                color: #fff;
-                background-color: #568df2;
+                color: #0076FF;
+                border-bottom-color: #0070FF;
             }
         }
     }

src/pages/data/list/index.vue

@@ -181,340 +181,340 @@ import Setting from '@/setting'
 let startTimeLimit = ''
 let endTimeLimit = ''
 export default {
-    data() {
-        return {
-            that: this,
-            token: util.local.get(Setting.tokenKey),
-            typeId: this.$route.query.typeId, // 从首页跳转过来传的分类id
-            typeList: [],
-            defaultType: '',
-            defaultOpenType: [],
-            introduce: '',
-            dataSource: '',
-            keyword: '',
-            search:'',
-            listData: [],
-            listDataAll: [],
-            searchListData: [],
-            page: 1,
-            pageSize: 10,
-            total: 0,
-            previewHead: [],
-            previewData: [],
-            downloadVisible: false,
-            curRow: {},
-            checkAllFields: false,
-            fields: [],
-            fieldsList: [],
-            startTime: '',
-            endTime: '',
-            startTimeLimit: '',
-            startTimeDisabled: false,
-            endTimeLimit: '',
-            endTimeDisabled: false,
-            timeDefault: '',
-            timeOptions: {
-                disabledDate(time) {
-                    return time.getTime() < startTimeLimit || time.getTime() > endTimeLimit
-                },
-            },
-            frequency: '',
-            frequencyList: [
-                {
-                    id: 1,
-                    name: '日频'
-                },{
-                    id: 2,
-                    name: '周频'
-                },{
-                    id: 3,
-                    name: '月频'
-                },{
-                    id: 4,
-                    name: '季频'
-                },{
-                    id: 5,
-                    name: '年频'
-                },
-            ],
-            currentRow: null,
-            searchTimer:null
+  data() {
+    return {
+      that: this,
+      token: util.local.get(Setting.tokenKey),
+      typeId: this.$route.query.typeId, // 从首页跳转过来传的分类id
+      typeList: [],
+      defaultType: '',
+      defaultOpenType: [],
+      introduce: '',
+      dataSource: '',
+      keyword: '',
+      search: '',
+      listData: [],
+      listDataAll: [],
+      searchListData: [],
+      page: 1,
+      pageSize: 10,
+      total: 0,
+      previewHead: [],
+      previewData: [],
+      downloadVisible: false,
+      curRow: {},
+      checkAllFields: false,
+      fields: [],
+      fieldsList: [],
+      startTime: '',
+      endTime: '',
+      startTimeLimit: '',
+      startTimeDisabled: false,
+      endTimeLimit: '',
+      endTimeDisabled: false,
+      timeDefault: '',
+      timeOptions: {
+        disabledDate(time) {
+          return time.getTime() < startTimeLimit || time.getTime() > endTimeLimit
+        },
+      },
+      frequency: '',
+      frequencyList: [
+        {
+          id: 1,
+          name: '日频'
+        }, {
+          id: 2,
+          name: '周频'
+        }, {
+          id: 3,
+          name: '月频'
+        }, {
+          id: 4,
+          name: '季频'
+        }, {
+          id: 5,
+          name: '年频'
+        },
+      ],
+      currentRow: null,
+      searchTimer: null
+    }
+  },
+  computed: {
+    ...mapState('user', [
+      'schoolId'
+    ]),
+  },
+  watch: {
+    keyword: function(val) {
+      clearTimeout(this.searchTimer)
+      if (!this.rendered) {
+        this.searchTimer = setTimeout(() => {
+          this.initData()
+        }, 500)
+      }
+      this.rendered = false
+    },
+  },
+  mounted() {
+    this.getType()
+    // 如果是从首页点下载按钮跳转过来的,就直接显示下载弹框
+    if (this.$route.query.download) {
+      this.download({
+        id: this.$route.query.id,
+        name: this.$route.query.name,
+        showName: this.$route.query.showName,
+      })
+    }
+  },
+  methods: {
+    getType() {
+      // 获取分类
+      this.$post(this.api.getTableByClassification).then(res => {
+        let typeId = this.typeId // 取得传值的id
+        let introduce = ''// 对应股票的介绍，规则为无children则取上级
+        let dataSource = '' // 数据来源，同上
+        let action
+        // 取得选中的那一栏
+        function actionId(arr) {//传入res
+          arr && arr.map((e, i) => {
+            e.id = String(e.id)
+            if (!i) {
+              // 获取介绍和来源
+              if (e.introduce) introduce = e.introduce
+              if (e.dataSource) dataSource = e.dataSource
+              if (!action) action = e.children[0].children.length ? String(e.children[0].children[0].id) : String(e.children[0].id)
+            }
+            if (typeId && e.id == typeId) {// 若id匹配
+              action = String(e.id)
+              if (e.children.length) {// 若有下级
+                if (!e.children[0].children.length) {// 找到下级的下级若无子级，则赋值勾选
+                  action = String(e.children[0].id)
+                } else {// 直接赋值
+                  action = String(e.children[0].children[0].id)
+                }
+              }
+            } else if (e.children.length) {// id不匹配，递归找
+              actionId(e.children)
+            }
+          })
         }
+        this.typeList = res
+        actionId(res)
+        this.defaultType = action
+        this.introduce = introduce
+        this.dataSource = dataSource
+        this.getData()
+      }).catch(res => { })
     },
-    computed: {
-        ...mapState('user', [
-            'schoolId'
-        ]),
+    getData() {
+      this.$post(`${this.api.getIdQueryTable}?categoryId=${this.defaultType}&showName=${this.keyword}&pageNum=${this.page}&pageSize=${this.pageSize}&updateTime=`).then(res => {
+        this.listData = res.pageList.records
+        this.total = res.pageList.total
+        // 默认显示第一条数据的字段
+        this.listData.length && this.preview(this.listData[0], 1)
+      }).catch(res => { })
     },
-    watch:{
-        keyword: function(val) {
-            clearTimeout(this.searchTimer)
-            if(!this.rendered){
-                this.searchTimer = setTimeout(() => {
-                    this.initData()
-                },500)
-            }
-            this.rendered = false
-        },
+    initData() {
+      this.page = 1
+      this.getData()
     },
-    mounted() {
-        this.getType()
-        // 如果是从首页点下载按钮跳转过来的,就直接显示下载弹框
-        if(this.$route.query.download){
-            this.download({
-                id: this.$route.query.id,
-                name: this.$route.query.name,
-                showName: this.$route.query.showName,
-            })
-        }
+    handleCurrentChange(val) {
+      this.page = val
+      this.$refs.table.clearSelection()
+      this.getData()
     },
-    methods: {
-        getType(){
-            // 获取分类
-            this.$post(this.api.getTableByClassification).then(res => {
-                let typeId = this.typeId // 取得传值的id
-                let introduce = ''// 对应股票的介绍，规则为无children则取上级
-                let dataSource = '' // 数据来源，同上
-                let action
-                // 取得选中的那一栏
-                function actionId(arr){//传入res
-                    arr && arr.map((e, i) => {
-                        e.id = String(e.id)
-                        if (!i) {
-                            // 获取介绍和来源
-                            if (e.introduce) introduce = e.introduce
-                            if (e.dataSource) dataSource = e.dataSource
-                            if (!action) action = e.children[0].children.length ? String(e.children[0].children[0].id) : String(e.children[0].id)
-                        }
-                        if(typeId && e.id == typeId) {// 若id匹配
-                            action = String(e.id)
-                            if(e.children.length){// 若有下级
-                                if(!e.children[0].children.length){// 找到下级的下级若无子级，则赋值勾选
-                                    action = String(e.children[0].id)
-                                }else{// 直接赋值
-                                    action = String(e.children[0].children[0].id)
-                                }
-                            }    
-                        }else if(e.children.length){// id不匹配，递归找
-                            actionId(e.children)
-                        }
-                    })
-                }
-                this.typeList = res
-                actionId(res)
-                this.defaultType = action
-                this.introduce = introduce
-                this.dataSource = dataSource
-                this.getData()
-            }).catch(res => {})
-        },
-        getData(){
-            this.$post(`${this.api.getIdQueryTable}?categoryId=${this.defaultType}&showName=${this.keyword}&pageNum=${this.page}&pageSize=${this.pageSize}&updateTime=`).then(res => {
-                this.listData = res.pageList.records
-                this.total = res.pageList.total
-                // 默认显示第一条数据的字段
-                this.listData.length && this.preview(this.listData[0],1)
-            }).catch(res => {})
-        },
-        initData(){
-            this.page = 1
-            this.getData()
-        },
-        handleCurrentChange(val) {
-            this.page = val
-            this.$refs.table.clearSelection()
-            this.getData()
-        },
-        // 分类展开及点击回调
-        selectType(index,indexPath){
-            let introduce = ''
-            let dataSource = ''
-            this.keyword = ''
-            let list = this.typeList
-            let select = ''
-            function handleData(data) {
-                data.map((n, i) => {
-                    // 匹配到点击的分类，默认展开子级第一个分类
-                    if(n.id == index){
-                        if (n.introduce) introduce = n.introduce
-                        if (n.dataSource) dataSource = n.dataSource
-                        if (!select) select = n.children.length ? (n.children[0].children.length ? n.children[0].children[0].id : n.children[0].id) : n.id
-                    }else{
-                        handleData(n.children)
-                    }
-                })
-            }
-            handleData(list)
-            if(!introduce) introduce = list.find(n => n.id == indexPath[0]).introduce
-            if(!dataSource) dataSource = list.find(n => n.id == indexPath[0]).dataSource
-            this.defaultType = select
-            this.introduce = introduce
-            this.dataSource = dataSource
-            this.previewHead = []
-            this.previewData = []
-            this.initData()
-        },
-        previewCurrentChange(val){
-            this.currentRow = val
-        },
-        preview(row,isDefault){
-            this.$get(`${this.api.previewData}?tableName=${row.name}&tableId=${row.id}`).then(res => {
-                // 查询次数+1
-                this.$post(this.api.saveRecord,{
-                    tableId: row.id,
-                    type: 2,
-                }).then(res => {}).catch(res => {})
+    // 分类展开及点击回调
+    selectType(index, indexPath) {
+      let introduce = ''
+      let dataSource = ''
+      this.keyword = ''
+      let list = this.typeList
+      let select = ''
+      function handleData(data) {
+        data.map((n, i) => {
+          // 匹配到点击的分类，默认展开子级第一个分类
+          if (n.id == index) {
+            if (n.introduce) introduce = n.introduce
+            if (n.dataSource) dataSource = n.dataSource
+            if (!select) select = n.children.length ? (n.children[0].children.length ? n.children[0].children[0].id : n.children[0].id) : n.id
+          } else {
+            handleData(n.children)
+          }
+        })
+      }
+      handleData(list)
+      if (!introduce) introduce = list.find(n => n.id == indexPath[0]).introduce
+      if (!dataSource) dataSource = list.find(n => n.id == indexPath[0]).dataSource
+      this.defaultType = select
+      this.introduce = introduce
+      this.dataSource = dataSource
+      this.previewHead = []
+      this.previewData = []
+      this.initData()
+    },
+    previewCurrentChange(val) {
+      this.currentRow = val
+    },
+    preview(row, isDefault) {
+      this.$get(`${this.api.previewData}?tableName=${row.name}&tableId=${row.id}`).then(res => {
+        // 查询次数+1
+        this.$post(this.api.saveRecord, {
+          tableId: row.id,
+          type: 2,
+        }).then(res => { }).catch(res => { })
 
-                let comment = res.comment
-                let previewHead = []
-                comment.map(n => {
-                    // id和操作时间不用显示
-                    n.field != 'id' && n.field != 'operation_time' && previewHead.push(n)
-                })
-                this.previewHead = previewHead
+        let comment = res.comment
+        let previewHead = []
+        comment.map(n => {
+          // id和操作时间不用显示
+          n.field != 'id' && n.field != 'operation_time' && previewHead.push(n)
+        })
+        this.previewHead = previewHead
 
-                let data = res.data
-                data.map(n => {
-                    for(let i in n){
-                        // 如果是以+0000结尾的,就表明这个是时间,则转化为正常的时间格式
-                        if(typeof n[i] == 'string' && n[i].endsWith('+0000')) n[i] = util.formatDate('yyyy-MM-dd hh:mm:ss',new Date(n[i]))
-                    }
-                })
-                this.previewData = data
-                // 如果不是加载完数据默认显示的情况,就滚动到页面可视位置
-                isDefault || this.$nextTick(() => {
-                    document.querySelector('#previewTable').scrollIntoView()
-                })
+        let data = res.data
+        data.map(n => {
+          for (let i in n) {
+            // 如果是以+0000结尾的,就表明这个是时间,则转化为正常的时间格式
+            if (typeof n[i] == 'string' && n[i].endsWith('+0000')) n[i] = util.formatDate('yyyy-MM-dd hh:mm:ss', new Date(n[i]))
+          }
+        })
+        this.previewData = data
+        // 如果不是加载完数据默认显示的情况,就滚动到页面可视位置
+        isDefault || this.$nextTick(() => {
+          document.querySelector('#previewTable').scrollIntoView()
+        })
 
-            }).catch(res => {})
-        },
-        checkAllFieldsChange(val) {
-            this.fields = val ? this.fieldsList.map(n => n.comment) : []
-        },
-        download(row){
-            // 查询是否购买了该数据,只有购买了才能下载
-            this.$get(`${this.api.isDownload}`,{
-                tableId: row.id,
-                schoolId: this.schoolId,
-            }).then(res => {
-                this.curRow = row
-                this.downloadVisible = true
+      }).catch(res => { })
+    },
+    checkAllFieldsChange(val) {
+      this.fields = val ? this.fieldsList.map(n => n.comment) : []
+    },
+    download(row) {
+      // 查询是否购买了该数据,只有购买了才能下载
+      this.$get(`${this.api.isDownload}`, {
+        tableId: row.id,
+        schoolId: this.schoolId,
+      }).then(res => {
+        this.curRow = row
+        this.downloadVisible = true
 
-                // 查询有数据的时间段,接口会返回开始时间和结束时间,但也有写数据是没有这两个时间的
-                this.$get(`${this.api.getTableTime}`,{
-                    tableId: row.id
-                }).then(res => {
-                    let list = res.message
-                    if(list.startTime){
-                        startTimeLimit = new Date(list.startTime).getTime()
-                    }else{
-                        // 如果没有开始时间,则禁止选择开始时间
-                        this.startTimeDisabled = true
-                    }
-                    if(list.endTime){
-                        endTimeLimit = new Date(list.endTime).getTime()
-                        this.timeDefault = list.endTime
-                    }else{
-                        // 如果没有结束时间,则禁止选择结束时间
-                        this.endTimeDisabled = true
-                    }
-                }).catch(res => {})
+        // 查询有数据的时间段,接口会返回开始时间和结束时间,但也有写数据是没有这两个时间的
+        this.$get(`${this.api.getTableTime}`, {
+          tableId: row.id
+        }).then(res => {
+          let list = res.message
+          if (list.startTime) {
+            startTimeLimit = new Date(list.startTime).getTime()
+          } else {
+            // 如果没有开始时间,则禁止选择开始时间
+            this.startTimeDisabled = true
+          }
+          if (list.endTime) {
+            endTimeLimit = new Date(list.endTime).getTime()
+            this.timeDefault = list.endTime
+          } else {
+            // 如果没有结束时间,则禁止选择结束时间
+            this.endTimeDisabled = true
+          }
+        }).catch(res => { })
 
-                this.$get(`${this.api.previewData}?tableName=${row.name}&tableId=${row.id}`).then(res => {
-                    let comment = res.comment
-                    let fieldsList = []
-                    comment.map(n => {
-                        n.field != 'id' && n.field != 'operation_time' && fieldsList.push(n)
-                    })
-                    this.fieldsList = fieldsList
-                }).catch(res => {})
-            }).catch(res => {})
-        },
-        closeDownload(){
-            this.checkAllFields = false
-            this.fields = []
-            this.startTime = ''
-            this.endTime = ''
-            this.frequency = ''
-            this.$router.push('/data').catch(err => {})
-        },
-        confirmDown(){
-            let fields = this.fields
-            if(!fields.length) return util.warningMsg('请选择字段')
-            if(!this.startTime) return util.warningMsg('请选择开始时间')
-            if(!this.endTime) return util.warningMsg('请选择结束时间')
-            if(!this.frequency) return util.warningMsg('请选择数据频率')
-            let invalid = false
+        this.$get(`${this.api.previewData}?tableName=${row.name}&tableId=${row.id}`).then(res => {
+          let comment = res.comment
+          let fieldsList = []
+          comment.map(n => {
+            n.field != 'id' && n.field != 'operation_time' && fieldsList.push(n)
+          })
+          this.fieldsList = fieldsList
+        }).catch(res => { })
+      }).catch(res => { })
+    },
+    closeDownload() {
+      this.checkAllFields = false
+      this.fields = []
+      this.startTime = ''
+      this.endTime = ''
+      this.frequency = ''
+      this.$router.push('/data').catch(err => { })
+    },
+    confirmDown() {
+      let fields = this.fields
+      if (!fields.length) return util.warningMsg('请选择字段')
+      if (!this.startTime) return util.warningMsg('请选择开始时间')
+      if (!this.endTime) return util.warningMsg('请选择结束时间')
+      if (!this.frequency) return util.warningMsg('请选择数据频率')
+      let invalid = false
 
-            if(this.startTime && this.endTime){
-                let startTime = new Date(this.startTime)
-                let endTime = new Date(this.endTime)
-                let frequency = this.frequency
+      if (this.startTime && this.endTime) {
+        let startTime = new Date(this.startTime)
+        let endTime = new Date(this.endTime)
+        let frequency = this.frequency
 
-                // 只要选择的不是日频,则要判断选择的日期区间有没有包含这段频率对应的完整交易日段
-                // 比如选的是周频,则判断选择的时间区间有没有包含一段完整的星期交易日,即星期1~5,
-                // 选的是月频的话,则判断选择的时间区间有没有包含一个完整的月份,即30天;年份同理
-                if(frequency == 2){
-                    let week = []
-                    while(startTime <= endTime){
-                        let weekNum = startTime.getDay()
-                        if(weekNum == 0) weekNum = 7
-                        week.push(weekNum)
-                        startTime.setTime(startTime.getTime() + 86400000)
-                    }
-                    // 如果没有包含1~5,则提示请选择完整区间,下面同理
-                    for(let i = 1;i <= 5;i++){
-                        if(!week.includes(i)){
-                            invalid = true
-                            break
-                        }
-                    }
-                }else if(frequency == 3){
-                    if((endTime.getTime() - startTime.getTime()) / 86400000 < 30) invalid = true
-                }else if(frequency == 4){
-                    if((endTime.getTime() - startTime.getTime()) / 86400000 < 90) invalid = true
-                }else if(frequency == 5){
-                    if((endTime.getTime() - startTime.getTime()) / 86400000 < 365) invalid = true
-                }
+        // 只要选择的不是日频,则要判断选择的日期区间有没有包含这段频率对应的完整交易日段
+        // 比如选的是周频,则判断选择的时间区间有没有包含一段完整的星期交易日,即星期1~5,
+        // 选的是月频的话,则判断选择的时间区间有没有包含一个完整的月份,即30天;年份同理
+        if (frequency == 2) {
+          let week = []
+          while (startTime <= endTime) {
+            let weekNum = startTime.getDay()
+            if (weekNum == 0) weekNum = 7
+            week.push(weekNum)
+            startTime.setTime(startTime.getTime() + 86400000)
+          }
+          // 如果没有包含1~5,则提示请选择完整区间,下面同理
+          for (let i = 1; i <= 5; i++) {
+            if (!week.includes(i)) {
+              invalid = true
+              break
             }
+          }
+        } else if (frequency == 3) {
+          if ((endTime.getTime() - startTime.getTime()) / 86400000 < 30) invalid = true
+        } else if (frequency == 4) {
+          if ((endTime.getTime() - startTime.getTime()) / 86400000 < 90) invalid = true
+        } else if (frequency == 5) {
+          if ((endTime.getTime() - startTime.getTime()) / 86400000 < 365) invalid = true
+        }
+      }
 
-            if(invalid) return util.warningMsg('请选择完整区间')
+      if (invalid) return util.warningMsg('请选择完整区间')
 
-            let newFields = []
-            let fieldsList = this.fieldsList
-            fields.map(n => {
-                newFields.push(fieldsList.find(e => e.comment == n).field)
-            })
-            let msgObj = util.successMsg('数据正在生成中，请稍等片刻，生成后会自动下载，您可以先访问其他页面。',5000)
-            this.downloadVisible = false
+      let newFields = []
+      let fieldsList = this.fieldsList
+      fields.map(n => {
+        newFields.push(fieldsList.find(e => e.comment == n).field)
+      })
+      let msgObj = util.successMsg('数据正在生成中，请稍等片刻，生成后会自动下载，您可以先访问其他页面。', 5000)
+      this.downloadVisible = false
 
-            let startTime = this.startTime ? this.startTime : ''
-            let endTime = this.endTime ? this.endTime : ''
-            let frequency = this.frequency
-            axios.get(`${this.api.downloadData}?tableName=${this.curRow.name}&table_id=${this.curRow.id}&fields=${newFields.join()}&startTime=${startTime}&endTime=${endTime}&frequency=${frequency}`,{
-                headers: {
-                    token: this.token
-                },
-                responseType: 'blob'
-            }).then((res) => {
-                msgObj.close()
-                if(res.data.type != 'multipart/form-data') return util.warningMsg('数据总数为零！')
-                // 统一调用该方法去下载excel
-                util.downloadFileDirect(`${this.curRow.showName}.xls`,new Blob([res.data]))
+      let startTime = this.startTime ? this.startTime : ''
+      let endTime = this.endTime ? this.endTime : ''
+      let frequency = this.frequency
+      axios.get(`${this.api.downloadData}?tableName=${this.curRow.name}&table_id=${this.curRow.id}&fields=${newFields.join()}&startTime=${startTime}&endTime=${endTime}&frequency=${frequency}`, {
+        headers: {
+          token: this.token
+        },
+        responseType: 'blob'
+      }).then((res) => {
+        msgObj.close()
+        if (res.data.type != 'multipart/form-data') return util.warningMsg('数据总数为零！')
+        // 统一调用该方法去下载excel
+        util.downloadFileDirect(`${this.curRow.showName}.xls`, new Blob([res.data]))
 
-                // 下载记录
-                this.$get(`${this.api.downloadRecord}?tableId=${this.curRow.id}&fields=${newFields.join()}` + (startTime ? `&startTime=${startTime}` : '') + (endTime ? `&endTime=${endTime}` : '') + `&frequency=${frequency}`).then(res => {}).catch(res => {})
+        // 下载记录
+        this.$get(`${this.api.downloadRecord}?tableId=${this.curRow.id}&fields=${newFields.join()}` + (startTime ? `&startTime=${startTime}` : '') + (endTime ? `&endTime=${endTime}` : '') + `&frequency=${frequency}`).then(res => { }).catch(res => { })
 
-                // 下载次数+1
-                this.$post(this.api.saveRecord,{
-                    tableId: this.curRow.id,
-                    type: 1,
-                }).then(res => {}).catch(res => {})
-            }).catch(res => {
-                msgObj.close()
-            })
-        }
+        // 下载次数+1
+        this.$post(this.api.saveRecord, {
+          tableId: this.curRow.id,
+          type: 1,
+        }).then(res => { }).catch(res => { })
+      }).catch(res => {
+        msgObj.close()
+      })
     }
+  }
 };
 </script>
 
@@ -526,10 +526,8 @@ export default {
             
             .menu{
                 width: 200px;
-                border-radius: 8px;
                 overflow: hidden;
                 &>.el-menu-item,.el-submenu__title{
-                    background-color: rgba(228,237,255,.4);
                     span{
                         font-size: 15px;
                         color: #3381d2;
@@ -540,14 +538,13 @@ export default {
                 }
                 .el-submenu.is-active{
                     .el-submenu__title{
-                        background-color: rgba(147,184,255,.3);
                         &+.el-menu .el-submenu__title{
                             background-color: rgba(147,184,255,.15);
                         }
                     }
                 }
                 .el-menu-item.is-active{
-                    color: $main-color;
+                    background-color: #0070FF;
                 }
                 .level-6 {
                     padding-right: 0;

src/styles/common.scss

@@ -16,7 +16,7 @@
 ::-webkit-scrollbar-thumb {
     width: 5px;
     border-radius: 6px;
-    background: rgba(86,141,242,.7);
+    background: rgba(173,173,173,.7);
 }
 
 .required{
@@ -72,7 +72,6 @@
     position: relative;
     padding: 24px 10px;
     background-color: #fff;
-    border-radius: 8px;
     .page-content{
         padding: 26px 36px 0;
         .tool{
@@ -163,7 +162,7 @@
 }
 
 .el-table{
-    border-radius: 8px;
+    border-radius: 4px;
     border: 1px solid rgba(0, 0, 0, 0.06);
     border-bottom: 0;
     .cell{
@@ -181,7 +180,7 @@
     th{
         background: $--color-primary !important;
         .cell{
-            color: #fff;
+            color: #222326;
             font-size: 14px;
             font-weight: normal;
             .el-checkbox{

src/styles/default/index.scss

@@ -1,6 +1,6 @@
 /* 改变主题色变量 */
 
-$--color-primary: #568DF2;
+$--color-primary: #E6F0FF;
 
 /* 改变 icon 字体路径变量，必需 */
 $--font-path: '~element-ui/lib/theme-chalk/fonts';