Foshan4A4.0/src/views/dashboard/index.vue

<!--
 * @Author: your name
 * @Date: 2021-10-14 17:17:53
 * @LastEditTime: 2022-01-12 11:09:08
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \Foshan4A\src\views\dashboard\index.vue
-->
<template>
  <div class="dashboard">
    <!--分类信息-->
    <div class="flex-wrap tu-fl">
      <router-link v-for="(item,index) in flList" :key="index" class="flex fl-list" :to="item.appUrl ? item.appUrl:'/'">
        <div class="fl-list-img">
          <img :src="item.logo">
        </div>
        <div class="fl-list-title flex1">{{item.appName}}</div>
      </router-link>
    </div>
    <!--切换和搜索-->
    <div class="dashboard-tab flex">
      <div class="tab">
        <el-radio-group v-model="radio">
          <el-radio label="1">数据分析</el-radio>
          <el-radio label="2">个人日志</el-radio>
        </el-radio-group>
      </div>
      <div class="search flex-wrap">
        <div class="search-input flex-wrap r24">
          <el-select :style="inputFlag ? 'width:150px;':'width:200px;'" @change="handleChange" v-model="select" placeholder="功能菜单">
            <el-option v-for="(item,index) in selectArr" :key="index" :label="item.name" :value="item.value"></el-option>
          </el-select>
          <el-input v-show="inputFlag" :style="inputFlag ? 'width:330px;':'width:280px;'" placeholder="如需搜索，请输入" v-model="input" class="input-with-select">
          </el-input>
          <!-- <el-select v-model="select" slot="prepend" placeholder="功能菜单">
            <el-option v-for="(item,index) in selectArr" :key="index" :label="item.name" :value="item.value"></el-option>
          </el-select> -->
        </div>
        <div class="search-btn">
          <el-button @click="searchByLink" class="btn" type="primary">进入</el-button>
        </div>
      </div>
    </div>
    <!--数据分析-->
    <Analysis :roleFlag="roleFlag" v-show="radio == 1" />
    <!--个人日志-->
    <Journal v-show="radio == 2" />
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import Analysis from './components/analysis.vue'
import Journal from './components/journal.vue'
import { GetOthSystem } from '@/api/apiHome'
export default {
  name: 'Dashboard',
  components: { Analysis, Journal },
  data () {
    return {
      roleFlag: true,
      inputFlag: false,
      //搜索信息
      selectArr: [
         {
          id: 1,
          name: "账号管理",
          value: 1,
        },
        {
          id: 2,
          name: "账号组管理",
          value: 2,
        },
        {
          id: 3,
          name: "权限项管理",
          value: 3,
        },
        {
          id: 4,
          name: "角色管理",
          value: 4,
        },
        {
          id: 5,
          name: "组织管理",
          value: 5,
        },
        {
          id: 6,
          name: "岗位管理",
          value: 6,
        },
        {
          id: 7,
          name: "职员管理",
          value: 7,
        },

        {
          id: 8,
          name: "登录策略",
          value: 8,
        },
        {
          id: 10,
          name: "系统设置",
          value: 10,
        },
      ],
      //分类信息
      flList: [],
      //切换
      radio: '1',
      flIndex: 0,
      input: '',
      select: ''
    }
  },
  computed: {
    ...mapGetters(['systemSet', 'UserType', 'UserId'])
  },
  created () {
    this.isPower()
    this.getOthSystem()
  },
  methods: {
    //搜索-跳转
    searchByLink () {
      const num = this.select
      switch (num) {
        case 1:
          this.$router.push({ path: '/account', query: { keyWords: this.input } });
          break;
        case 2:
          this.$router.push({ path: '/accountGroup', query: { keyWords: this.input } });
          break;
        case 3:
          this.$router.push({ path: '/authority', query: { keyWords: this.input } });
          break;
        case 4:
          this.$router.push({ path: '/role', query: { keyWords: this.input } });
          break;
        case 5:
          this.$router.push({ path: '/organization', query: { keyWords: this.input } });
          break;
        case 6:
          this.$router.push({ path: '/jobs', query: { keyWords: this.input } });
          break;
        case 7:
          this.$router.push({ path: '/staff', query: { keyWords: this.input } });

          break;
        case 8:
          this.$router.push({ path: '/LoginPolicy', query: { keyWords: this.input } });
          break;
        case 9:
          this.$router.push('/audit');
          break;
        case 10:
          this.$router.push('/systemManagement');
          break;
        default:
          this.$message.warning('请选择');
          break;
      }
    },
    //获取接入系统信息
    async getOthSystem () {
      try {
        const result = await GetOthSystem({
          userId: Number(this.UserId),
          userType: this.UserType
        })
        if (result.code === 0 && result.returnData.length) {
          this.flList = result.returnData
        } else {
          this.$message.error(result.message)
        }
      } catch (error) {
        console.log('网络错误:', error)
      }
    },
    //判断页面展示权限
    isPower () {
      const obj = typeof (this.systemSet) === 'string' ? JSON.parse(this.systemSet) : this.systemSet
      const { OpenGroup, OpenRole } = obj
      if (!OpenGroup) {
        this.selectArr.forEach((item, index) => {
          if (item.id === 2) {
            this.selectArr.splice(index, 1)
          }
        })
      }
      if (!OpenRole) {
        this.selectArr.forEach((item, index) => {
          if (item.id === 4) {
            this.roleFlag = false
            this.selectArr.splice(index, 1)
          }
        })
      }
    },
    handleChange (val) {
      if (val !== 10) {
        this.inputFlag = true
      } else {
        this.inputFlag = false
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.dashboard {
  position: relative;
  width: 100%;
  height: 100%;
  padding: 0 64px;
  padding-top: 32px;
  .tu-fl {
    .fl-list {
      padding: 24px;
      min-width: 240px;
      height: 88px;
      background: #fff;
      cursor: pointer;
      margin-right: 24px;
      box-shadow: 0px 6px 7px 0px rgba(0, 0, 0, 0.06);
      border-radius: 16px;
      margin-bottom: 24px;
      .fl-list-img {
        width: 40px;
        height: 40px;
        overflow: hidden;
        img {
          max-width: 100%;
        }
      }
      .fl-list-title {
        font-size: 16px;
        font-family: Microsoft YaHei;
        font-weight: bold;
        color: #303133;
        line-height: 40px;
        margin-left: 16px;
      }
      &:last-child {
        margin-right: 0;
      }
    }
    .active {
      background: linear-gradient(0deg, #777dba, #6983be);
      .fl-list-title {
        color: #fff;
      }
    }
  }
  .dashboard-tab {
    margin: 24px 0 32px 0;
    line-height: 48px;
    ::v-deep .tab {
      .el-radio__label {
        font-size: 16px;
        font-family: Microsoft YaHei;
        font-weight: bold;
        color: #303133;
      }
    }
    ::v-deep .search {
      .search-input {
        height: 48px;
        background: #ffffff;
        box-shadow: 0px 6px 7px 0px rgba(0, 0, 0, 0.06);
        border-radius: 6px;
        line-height: 48px;
        max-width: 480px;
        .el-input-group__prepend {
          border: none;
          background-color: #fff;
          width: 120px;
        }
        .el-input__inner {
          border: 1px solid #fff;
          font-size: 16px;
        }
      }
      .search-btn {
        .btn {
          height: 48px;
          background: linear-gradient(0deg, #6983be, #777dba);
          box-shadow: 0px 3px 4px 0px rgba(0, 0, 0, 0.18);
          border-radius: 6px;
          font-size: 16px;
          font-family: Microsoft YaHei;
          font-weight: bold;
          color: #ffffff;
          min-width: 96px;
        }
      }
    }
  }
}
</style>