Foshan4A4.0/src/views/dashboard/components/analysis.vue

<!--
 * @Author: your name
 * @Date: 2021-11-25 10:40:42
 * @LastEditTime: 2022-03-02 10:37:43
 * @LastEditors: Please set LastEditors
 * @Description: 数据分析
 * @FilePath: \Foshan4A2.0\src\views\dashboard\components\analysis.vue
-->
<template>
  <div class="dashboard-analysis">
    <div class="dashboard-list">
      <!--账号信息分布-->
      <div class="tu-account box-public-shadow">
        <div class="tu-account-content h100 flex">
          <div class="tu-account-content-left relative">
            <commonChartsPie :option="accountOption" id="tu-account-content" />
          </div>
          <div class="tu-account-content-right relative">
            <dateType @getTypeData="checkAccountType" :arrs="tuArrs" />
            <commonChartsNum :arrs="accountTeamsOne" />
          </div>
        </div>
      </div>
      <!--角色概览-->
      <div v-if="OpenRole" class="tu-user box-public-shadow l22">
        <div class="tu-user-content h100 flex">
          <div class="tu-user-content-left relative">
            <commonChartsPie :option="userOption" id="tu-user-content" />
          </div>
          <div class="tu-user-content-right">
            <commonChartsNum :arrs="userTeams" />
          </div>
        </div>
      </div>
      <!--权限概览-->
      <div class="tu-power box-public-shadow flex1 l22">
        <div class="tu-power-content-left relative">
          <commonChartsBar :option="towerOption" id="tu-tower-content" />
        </div>
      </div>
    </div>
    <div class="dashboard-list">
      <!--异常操作情况-->
      <div class="tu-unusual box-public-shadow flex1">
        <div class="tu-unusual-content h100 flex">
          <div class="tu-unusual-content-left w160 relative">
            <commonChartsPie :option="unusualOption" id="tu-unusual-content" />
          </div>
          <div class="tu-unusual-content-right">
            <commonChartsNum style="margin-top:0;" :arrs="unusualTeams" />
          </div>
        </div>
      </div>
      <!--登录情况-->
      <div class="tu-login box-public-shadow flex1 l22">
        <div class="tu-login-content h100 flex">
          <div class="tu-login-content-left w160 relative">
            <commonChartsPie :option="loginOption" id="tu-login-content" />
          </div>
          <div class="tu-login-content-right">
            <commonChartsNum :arrs="loginTeams" />
          </div>
        </div>
      </div>
      <!--授权情况-->
      <div class="tu-authorize box-public-shadow flex1 l22">
        <div class="tu-authorize-content h100 flex">
          <div class="tu-authorize-content-left w160 relative">
            <commonChartsPie :option="authorizeOption" id="tu-authorize-content" />
          </div>
          <div class="tu-authorize-content-right">
            <div v-for="(item,index) in authorizeArr" :key="index" class="behavior-list">
              <span :style="{'background':item.color}" class="icon"></span>
              <span class="name">{{item.name}}：</span>
              <span class="num">{{item.num}}</span>
            </div>
          </div>
        </div>
      </div>
      <!--行为情况-->
      <div class="tu-behavior box-public-shadow flex1 l22">
        <div class="tu-behavior-content h100 flex">
          <div class="tu-behavior-content-left w160 relative">
            <commonChartsPie :option="behaviorOption" id="tu-behavior-content" />
          </div>
          <div class="tu-behavior-content-right">
            <div v-for="(item,index) in behaviorArr" :key="index" class="behavior-list">
              <span :style="{'background':item.color}" class="icon"></span>
              <span class="name">{{item.name}}：</span>
              <span class="num">{{item.num}}</span>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="dashboard-list">
      <!--API调用情况-->
      <div class="tu-api box-public-shadow flex1">
        <div class="tu-api-content h100 flex">
          <div class="tu-api-content-left flex1 relative">
            <dateType @getTypeData="checkApiType" />
            <commonChartsLine :option="apiOption" id="tu-api-content" />
          </div>
          <div class="tu-api-content-right">
            <commonChartsNum :arrs="apiTeams" />
          </div>
        </div>
      </div>
      <!--系统运行异常情况-->
      <div class="tu-system box-public-shadow l22 flex1">
        <div class="tu-system-content h100 flex">
          <div class="tu-system-content-left flex1 relative">
            <dateType @getTypeData="checkSysType" />
            <commonChartsLine :option="systemOption" id="tu-system-content" />
          </div>
          <div class="tu-system-content-right">
            <commonChartsNum :arrs="systemTeams" />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import commonChartsPie from '@/layout/components/Echarts/commonChartsPie.vue'
import commonChartsBar from '@/layout/components/Echarts/commonChartsBar.vue'
import commonChartsLine from '@/layout/components/Echarts/commonChartsLine.vue'
import commonProgress from '@/layout/components/Echarts/commonProgress.vue'
import commonChartsNum from '@/layout/components/EchartsNum/index.vue'
import dateType from '@/layout/components/dateType/index.vue'
import { GetUserAna, GetOfficerAna, GetRoleAna, GetAuthAna } from '@/api/apiHome'
import { mapGetters } from 'vuex'
export default {
  name: 'Analysis',
  components: { commonChartsPie, commonChartsBar, commonChartsNum, commonChartsLine, commonProgress, dateType },
  data () {
    return {
      OpenRole: 1,
      // 账号信息分析饼图数据
      accountOption: {
        color: ['#94C6E0', '#F4C23A', '#8969BE', '#E752A3'],
        legend: {
          show: false
        },
        title: {
          text: '账号信息分析'
        },
        series: [
          {
            top: 43,
            name: '账号',
            type: 'pie',
            radius: ['30%', '50%'],
            label: {
              position: 'inner',
              fontSize: 14,
              show: false
            },
            hoverAnimation: false,
            data: [
              { value: 0, name: '账号数' },
              { value: 0, name: '账号组数' },
            ]
          },
          {
            top: 43,
            name: '账号',
            type: 'pie',
            radius: ['60%', '100%'],
            label: {
              position: 'inner',
              fontSize: 14,
              show: false
            },
            hoverAnimation: false,
            data: [
              { value: 0, name: '日活跃度' },
              { value: 0, name: '月活跃度' }
            ]
          }
        ]
      },
      //账号信息分析切换
      tuArrs: [
        {
          name: '账号',
          value: 1
        },
        {
          name: '职员',
          value: 2
        }
      ],
      // 账号信息分析数字
      accountTeamsOne: [
        {
          number: 0,
          txt: '账号数',
          color: '#94C6E0',
          key: 'userCount',
          ana: 'officeCount'
        },
        {
          number: 0,
          txt: '账号分组',
          color: '#F4C23A',
          key: 'groupCount',
          ana: 'groupCount'
        },
        {
          number: 0,
          txt: '日活跃度',
          color: '#8969BE',
          key: 'dayAct',
          ana: 'dayAct'
        },
        {
          number: 0,
          txt: '月活跃度',
          color: '#E752A3',
          key: 'monthAct',
          ana: 'monthAct'
        }
      ],
      // 权限类型分析柱状图数据
      towerOption: {
        title: {
          text: '权限概览'
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            // Use axis to trigger tooltip
            type: 'shadow' // 'shadow' as default; can also be 'line' or 'shadow'
          }
        },
        legend: {
          data: ['前端权限', 'API权限', '数据权限'],
          itemWidth: 12,
          itemHeight: 12,
          itemGap: 24,
          right: 0,
          textStyle: {
            color: '#303133',
            fontSize: 14,
            fontWeight: 'bold'
          }
        },
        xAxis: {
          data: [],
          axisLabel: {
            formatter: function (val) {
              const str = val.split('')
              if (str.length <= 3) {
                return str.join('')
              } else {
                for (let i = 0; i < str.length; i++) {
                  if (i % 3 === 0 && i !== 0) {
                    str.splice(i, 0, '\n')
                  }
                }
                return str.join('')
              }
            }
          }
        },
        color: ['#7569BE', '#F4C23A', '#E752A3'],
        series: [
          {
            name: '前端权限',
            type: 'bar',
            stack: 'total',
            label: {
              show: false
            },
            data: []
          },
          {
            name: 'API权限',
            type: 'bar',
            stack: 'total',
            label: {
              show: false
            },
            data: []
          },
          {
            name: '数据权限',
            type: 'bar',
            stack: 'total',
            label: {
              show: false
            },
            data: []
          }
        ]
      },
      // 系统运行异常情况折线图数据
      systemOption: {
        title: {
          text: '系统运行异常情况'
        },
        color: ['#EC3535', '#FA9F63', '#C462A7'],
        xAxis: {
          data: ['1月', '2月', '3月', '4月', '5月', '6月']
        },
        series: [
          {
            name: 'Email',
            type: 'line',
            stack: 'Total',
            showSymbol: false,
            data: [120, 132, 101, 134, 90, 230, 210]
          },
          {
            name: 'Union',
            type: 'line',
            stack: 'Total',
            showSymbol: false,
            data: [20, 32, 1, 34, 9, 23, 21]
          },
          {
            name: 'Video',
            type: 'line',
            stack: 'Total',
            showSymbol: false,
            data: [120, 132, 101, 134, 90, 230, 210]
          }
        ]
      },
      // 系统运行异常情况数字
      systemTeams: [
        {
          number: null,
          txt: '高危异常',
          color: '#EC3535'
        },
        {
          number: null,
          txt: '中危异常',
          color: '#C462A7'
        },
        {
          number: null,
          txt: '低危异常',
          color: '#FA9F63'
        }
      ],
      // API调用情况折线图数据
      apiOption: {
        title: {
          text: 'API调用情况'
        },
        color: ['#30A3D8', '#F25555', '#F4C23A', '#E752A3', '#8969BE', '#85EAC8'],
        xAxis: {
          data: ['1月', '2月', '3月', '4月', '5月', '6月']
        },
        series: [
          {
            name: '企业微信',
            type: 'line',
            stack: 'Total',
            showSymbol: false,
            data: [120, 132, 101, 134, 90, 230, 210]
          },
          {
            name: 'OA系统',
            type: 'line',
            stack: 'Total',
            showSymbol: false,
            data: [20, 32, 1, 34, 9, 23, 21]
          },
          {
            name: '项目建设',
            type: 'line',
            stack: 'Total',
            showSymbol: false,
            data: [120, 132, 101, 134, 90, 230, 210]
          },
          {
            name: '勘察设计',
            type: 'line',
            stack: 'Total',
            showSymbol: false,
            data: [120, 132, 101, 134, 90, 230, 210]
          },
          {
            name: '4A平台',
            type: 'line',
            stack: 'Total',
            showSymbol: false,
            data: [20, 32, 1, 34, 9, 23, 21]
          },
          {
            name: '智慧工地',
            type: 'line',
            stack: 'Total',
            showSymbol: false,
            data: [120, 132, 101, 134, 90, 230, 210]
          }
        ]
      },
      // API调用情况数字
      apiTeams: [
        {
          number: null,
          txt: '企业微信',
          color: '#30A3D8'
        },
        {
          number: null,
          txt: 'OA系统',
          color: '#F25555'
        },
        {
          number: null,
          txt: '项目建设',
          color: '#F4C23A'
        },
        {
          number: null,
          txt: '勘察建设',
          color: '#E752A3'
        },
        {
          number: null,
          txt: '4A平台',
          color: '#8969BE'
        },
        {
          number: null,
          txt: '智慧工地',
          color: '#85EAC8'
        }
      ],
      // 登录情况数据
      loginOption: {
        title: {
          text: '登录情况'
        },
        color: ['#8969BE', '#F4C23A', '#E752A3'],
        series: [
          {
            name: '登录情况',
            radius: ['40%', '100%'],
            data: [
              { value: 2780, name: '正常登录' },
              { value: 735, name: '异常登录' },
              { value: 165, name: '登陆失败' }
            ]
          }
        ]
      },
      //角色概览
      userOption: {
        title: {
          text: '角色概览'
        },
        color: ['#8969BE', '#F4C23A', '#E752A3'],
        series: [
          {
            name: '角色概览',
            top: 43,
            radius: ['40%', '100%'],
            data: [
              { value: 1048, key: 'roleCount', name: '角色总数' },
              { value: 735, key: 'defRoleCunt', name: '互斥角色数' },
              { value: 735, key: 'unuseRole', name: '未使用角色数' }
            ]
          }
        ]
      },
      // 登录情况数字
      userTeams: [
        {
          number: 2780,
          txt: '角色总数',
          color: '#8969BE',
          key: 'roleCount'
        },
        {
          number: 2136,
          txt: '互斥角色数',
          color: '#F4C23A',
          key: 'defRoleCunt'
        },
        {
          number: 1355,
          txt: '未使用角色数',
          color: '#E752A3',
          key: 'unuseRole'
        }
      ],
      // 登录情况数字
      loginTeams: [
        {
          number: 2780,
          txt: '正常登录',
          color: '#8969BE'
        },
        {
          number: 735,
          txt: '异常登录',
          color: '#F4C23A'
        },
        {
          number: 165,
          txt: '非系统异常',
          color: '#E752A3'
        }
      ],
      // 授权情况数据
      authorizeOption: {
        title: {
          text: '授权情况'
        },
        color: ['#8969BE', '#94C6E0', '#85EAC8', '#F4C23A', '#E752A3'],
        series: [
          {
            name: '授权情况',
            radius: ['40%', '100%'],
            data: [
              { value: 1276, name: '账号授权' },
              { value: 126, name: '分组授权' },
              { value: 1236, name: '职员授权' },
              { value: 12736, name: '组织授权' },
              { value: 127, name: '角色授权' }
            ]
          }
        ]
      },
      // 授权情况数字
      authorizeArr: [
        {
          color: '#8969BE',
          name: '账号授权',
          num: '1276'
        },
        {
          color: '#94C6E0',
          name: '分组授权',
          num: '126'
        },
        {
          color: '#85EAC8',
          name: '职员授权',
          num: '1236'
        },
        {
          color: '#F4C23A',
          name: '组织授权',
          num: '12736'
        },
        {
          color: '#E752A3',
          name: '角色授权',
          num: '127'
        }
      ],
      // 行为情况数据
      behaviorOption: {
        title: {
          text: '行为情况'
        },
        color: ['#8969BE', '#F25555', '#F4C23A', '#E752A3', '#94C6E0', '#85EAC8'],
        series: [
          {
            name: '行为情况',
            radius: ['40%', '100%'],
            data: [
              { value: 1275, name: '4A平台' },
              { value: 2210, name: 'OA系统' },
              { value: 2220, name: '项目建设' },
              { value: 2230, name: '勘察设计' },
              { value: 2210, name: '企业微信' },
              { value: 2250, name: '智慧工程' }
            ]
          }
        ]
      },
      // 授权情况数字
      behaviorArr: [
        {
          color: '#8969BE',
          name: '4A平台',
          num: '1275'
        },
        {
          color: '#F25555',
          name: 'OA系统',
          num: '2210'
        },
        {
          color: '#F4C23A',
          name: '项目建设',
          num: '2220'
        },
        {
          color: '#E752A3',
          name: '勘察设计',
          num: '2230'
        },
        {
          color: '#94C6E0',
          name: '企业微信',
          num: '2210'
        },
        {
          color: '#85EAC8',
          name: '智慧工地',
          num: '2250'
        }
      ],
      // 数据概况
      unusualOption: {
        title: {
          text: '数据概况'
        },
        color: ['#F56C6C', '#F4C23A', '#E752A3', '#8969BE'],
        series: [
          {
            name: '数据',
            type: 'pie',
            radius: ['30%', '50%'],
            label: {
              position: 'inner',
              fontSize: 14,
              show: false
            },
            hoverAnimation: false,
            data: [
              { value: 1275, name: '下发有效' },
              { value: 220, name: '接收有效' },
            ]
          },
          {
            name: '数据',
            type: 'pie',
            radius: ['60%', '100%'],
            label: {
              position: 'inner',
              fontSize: 14,
              show: false
            },
            hoverAnimation: false,
            data: [
              { value: 220, name: '下发无效' },
              { value: 220, name: '接收无效' }
            ]
          }
        ]
      },
      // 数据概况数字
      unusualTeams: [
        {
          number: 1275,
          txt: '下发有效',
          color: '#8969BE'
        },
        {
          number: 220,
          txt: '下发无效',
          color: '#E752A3'
        },
        {
          number: 220,
          txt: '接收有效',
          color: '#F4C23A'
        },
        {
          number: 220,
          txt: '接收无效',
          color: '#F56C6C'
        }
      ],
      // 权限概览切换
      barArrs: [
        {
          name: '应用分析',
          value: 1
        },
        {
          name: '权限分析',
          value: 2
        }
      ]
    }
  },
  computed: {
    ...mapGetters(['systemSet']),
  },
  created () {
    const { OpenRole } = typeof this.systemSet === "string" ? JSON.parse(this.systemSet) : this.systemSet; //1是请求角色 0是请求用户
    this.OpenRole = OpenRole
    this.pageInit()
  },
  methods: {
    //账号信息切换
    checkAccountType (params) {
      if (params.value === 1 && params.name === '账号') {
        this.accountOption.title.text = '账号信息分析'
        this.accountTeamsOne[0].txt = '账号数'
        this.accountTeamsOne[1].txt = '账号分组'
        this.getUserAna()
      } else {
        this.accountOption.title.text = '职员信息分析'
        this.accountTeamsOne[0].txt = '职员数'
        this.accountTeamsOne[1].txt = '组织及岗位数'
        this.getOfficerAna()
      }
    },
    // 系统运行异常情况-日期选择
    checkSysType (params) {
      //console.log(`系统运行异常情况---->name:${params.name}，value:${params.value}`)
    },
    // API调用情况-日期选择
    checkApiType (params) {
      //console.log(`API调用情况---->name:${params.name}，value:${params.value}`)
    },
    //---------------获取数据方法------------------
    //获取账号信息分析
    async getUserAna () {
      try {
        const result = await GetUserAna()
        if (result.code === 0) {
          const res = result.returnData
          const keys = Object.entries(res)
          this.accountOption.series[0].name = '账号'
          this.accountOption.series[1].name = '账号'
          this.accountTeamsOne.forEach(item => {
            keys.filter(p => {
              if (item.key === p[0]) {
                item.number = p[1]
              }
            })
          })
          this.accountOption.series[0].data[0].value = res.userCount
          this.accountOption.series[0].data[1].value = res.groupCount
          this.accountOption.series[1].data[0].value = res.dayAct
          this.accountOption.series[1].data[1].value = res.monthAct
        } else {
          this.$message.error(result.message)
        }
      } catch (error) {
        console.log('网络错误:', error)
      }
    },
    //获取职员信息分析
    async getOfficerAna () {
      try {
        const result = await GetOfficerAna()
        if (result.code === 0) {
          const res = result.returnData
          const keys = Object.entries(res)
          this.accountOption.series[0].name = '职员'
          this.accountOption.series[1].name = '职员'
          this.accountTeamsOne.forEach(item => {
            keys.filter(p => {
              if (item.ana === p[0]) {
                item.number = p[1]
              }
            })
          })
          this.accountOption.series[0].data[0].value = res.officeCount
          this.accountOption.series[0].data[1].value = res.groupCount
          this.accountOption.series[1].data[0].value = res.dayAct
          this.accountOption.series[1].data[1].value = res.monthAct
        } else {
          this.$message.error(result.message)
        }
      } catch (error) {
        console.log('网络错误:', error)
      }
    },
    //获取角色信息分析
    async getRoleAna () {
      try {
        const result = await GetRoleAna()
        if (result.code === 0) {
          const res = result.returnData
          const keys = Object.entries(res)
          this.userTeams.forEach(item => {
            keys.filter(p => {
              if (item.key === p[0]) {
                item.number = p[1]
              }
            })
          })
          this.userOption.series[0].data.forEach(item => {
            keys.filter(p => {
              if (item.key === p[0]) {
                item.value = p[1]
              }
            })
          })
        } else {
          this.$message.error(result.message)
        }
      } catch (error) {
        console.log('网络错误:', error)
      }
    },
    //获取权限信息分析
    async getAuthAna () {
      try {
        const result = await GetAuthAna()
        if (result.code === 0) {
          const res = result.returnData
          const [appName, frontAuth, apiAuth, dataAuth] = [[], [], [], []]
          for (const p of res) {
            appName.push(p.appName)
            frontAuth.push(p.frontAuth)
            apiAuth.push(p.apiAuth)
            dataAuth.push(p.dataAuth)
          }
          this.towerOption.xAxis.data = appName
          this.towerOption.series[0].data = frontAuth
          this.towerOption.series[1].data = apiAuth
          this.towerOption.series[2].data = dataAuth
        } else {
          this.$message.error(result.message)
        }
      } catch (error) {
        console.log('网络错误:', error)
      }
    },
    pageInit () {
      this.getUserAna()
      this.getRoleAna()
      this.getAuthAna()
    }
  }
}
</script>

<style lang="scss" scoped>
.dashboard-analysis {
  // height: calc(100vh - 395px);
  // overflow-x: hidden;
  // overflow-y: scroll;
  .w160 {
    width: 160px;
  }
  .titleMsg {
    position: absolute;
    left: 0;
    top: 0;
    font-size: 24px;
    font-weight: bold;
  }
  .progressScale {
    top: 25px;
    transform: scale(1.2);
  }
  .dashboard-list {
    display: flex;
    margin-bottom: 24px;
    .tu-account {
      .tu-account-content-left {
        width: 212px;
      }
      .tu-account-content-right {
        flex: 1;
        margin-left: 50px;
        width: 150px;
        .account-team {
          margin-top: 36px;
          .account-team-list {
            font-size: 14px;
            font-family: Microsoft YaHei;
            font-weight: 400;
            color: #909399;
            margin-top: 18px;
          }
        }
      }
    }
    .tu-user {
      .tu-user-content-left {
        width: 212px;
        margin-right: 50px;
      }
    }
    .tu-sync {
      height: 280px;
    }
    .tu-system {
      height: 392px;
    }
    .behavior-list {
      margin-top: 16px;
      .icon {
        display: inline-block;
        width: 3px;
        height: 12px;
        background: #8969be;
        margin-right: 9px;
      }
      .name {
        font-size: 14px;
        font-family: Microsoft YaHei;
        font-weight: bold;
        color: #303133;
      }
      .num {
        font-size: 16px;
        font-family: DIN;
        font-weight: 500;
        color: #909399;
      }
      &:first-child {
        margin-top: 59px;
      }
    }
  }
}
</style>