income_payments_client/src/views/dashboard/Analysis.vue

<template>
  <div style="min-width: 1100px" class="analysis-container">
    <!-- 其他人展示消息-->
    <template v-if="roleCoe">
      <user-announcement-list :is-show-seach="true"></user-announcement-list>
      <div class="download">
        点击下载<span class="primary-color" @click="downloadManual">管理端使用手册</span>
        <span style="margin-left: 10px">技术支持电话：022-84379290</span>
      </div>
    </template>
    <!--    所领导 部门领导展示统计图 -->
    <template v-else>
      <div class="screen-btn" >
<!--         v-has="'wholePaymentsStatistics:search'"-->
        <a-button type="primary" @click="goScreen">大屏</a-button>
      </div>

      <!-- 全所收入统计 累计-->
      <single-month-total-echarts class="single-month-total "></single-month-total-echarts>
      <!-- 全所收入统计 累计-->

      <!--  全所收入统计 单月-->
      <single-month-echarts class="single-month m-t-10"></single-month-echarts>
      <!-- 全所收入统计 单月-->

      <!-- 科室总体统计 -->
      <department-total-echarts class="three-year m-t-10"></department-total-echarts>
      <!-- 科室总体统计 -->

      <section class="wrap">
        <!-- 收入分类统计 -->
        <income-sort-echarts class="income-sort m-t-10"></income-sort-echarts>
        <!-- 收入分类统计 -->

        <!-- 营收账款统计 -->
        <not-received-echarts class="m-t-10 not-receiced"></not-received-echarts>
        <!--  营收账款统计 -->

      </section>

      <!--年度待确收金额统计 -->
      <three-year-echarts class="all-money m-t-10"></three-year-echarts>
      <!-- 年度待确收金额统计 -->


      <!-- 企业客户统计（年度待确收金额前二十）-->
      <all-money-ten-echarts class="all-money m-t-10"></all-money-ten-echarts>
      <!-- 企业客户统计（年度待确收金额前二十）-->
    </template>
    <!--    所领导 部门领导展示统计图 -->

  </div>
</template>

<script>

import UserAnnouncementList from '@views/system/UserAnnouncementList'
import SingleMonthEcharts from '@views/dashboard/SingleMonthEcharts'
import SingleMonthTotalEcharts from '@views/dashboard/SingleMonthTotalEcharts'
import DepartmentTotalEcharts from '@views/dashboard/DepartmentTotalEcharts'
import IncomeSortEcharts from '@views/dashboard/IncomeSortEcharts'
import AllMoneyTenEcharts from '@views/dashboard/AllMoneyTenEcharts'
import ThreeYearEcharts from '@views/dashboard/ThreeYearEcharts'
import NotReceivedEcharts from '@views/dashboard/NotReceivedEcharts'

export default {
  name: 'Analysis',
  components: {
    UserAnnouncementList,
    SingleMonthEcharts,
    SingleMonthTotalEcharts,
    DepartmentTotalEcharts,
    IncomeSortEcharts,
    AllMoneyTenEcharts,
    ThreeYearEcharts,
    NotReceivedEcharts
  },
  computed: {
    // 所领导 部门负责人 还是其他角色
    roleCoe() {
      return !(this.$store.getters.userInfo.roleCode.includes('bmfzr') || this.$store.getters.userInfo.roleCode.includes('sld') || this.$store.getters.userInfo.roleCode.includes('admin'))
    }
  },
  data() {
    return {}
  },
  created() {
    console.log()
  },
  mounted() {
  },
  methods: {
    downloadManual() {
      window.open('http://cwp.catarc.org.cn:8066/管理端使用手册.docx', '_self')
    },
    goScreen() {
      let routerUrl = this.$router.resolve({
        path: '/screen',
      })
      window.open(routerUrl.href, '_blank')
    }
  }
}
</script>

<style lang="less" scoped>
// 全所收入统计 单月
.single-month,
.single-month-total,
.three-year {
  width: 100%;
  height: auto;
  background: #fff;
}

//.three-year {
//  height: 620px;
//}

.m-t-10 {
  margin-top: 10px;
}

.wrap {
  width: 100%;
  height: auto;
  display: flex;
  justify-content: space-between;
}

// 科室总体统计
.depart-total {
  width: 60%;
  min-width: 650px;
  height: auto;
  background: #fff;
}
// 未收入账款统计
.not-receiced {
  width: 49.6%;
  min-width: 480px;
  height: auto;
  background: #fff;
}

// 分类统计
.income-sort {
  //margin-left: 8px;
  width: 49.6%;
  min-width: 480px;
  height: auto;
  background: #fff;
}

// 合同金额前十
.all-money {
  width: 100%;
  height: auto;
  background: #fff;
}

.download {
  margin-top: 8px;
  font-size: 16px;
  text-align: center;
}

.primary-color {
  color: #069F99;
  cursor: pointer;
}

.analysis-container{
  position: relative;
}
.screen-btn{
  padding-bottom: 10px;
  display: flex;
  justify-content: flex-end;
}
</style>