1. <template>
  2. <div class="dashboard-container">
  3.   <!-- 头部内容 -->
  4.   <el-card class="header-card">
  5.     <div>
  6.       <div class="fl headL">
  7.         <div class="headImg">
  8.           <img src="@/assets/common/head.jpg">
  9.   </div>
  10.         <div class="headInfoTip">
  11.           <p class="firstChild">早安，管理员，祝你开心每一天！</p>
  12.           <p class="lastChild">早安，管理员，祝你开心每一天！</p>
  13.   </div>
  14.   </div>
  15.       <div class="fr" />
  16.   </div>
  17.   </el-card>
  18.   <!-- 主要内容 -->
  19.   <el-row type="flex" justify="space-between">
  20.     <!-- 左侧内容 -->
  21.     <el-col :span="15" style="padding-right: 26px">
  22.       <!-- 工作日历 -->
  23.       <el-card class="box-card">
  24.         <div slot="header" class="header">
  25.           <span>工作日历</span>
  26.   </div>
  27.         <!-- 放置日历组件 -->
  28.   </el-card>
  29.       <!-- 公告 -->
  30.       <el-card class="box-card">
  31.         <div class="advContent">
  32.           <div class="title">公告</div>
  33.           <div class="contentItem">
  34.             <ul class="noticeList">
  35.               <li>
  36.                 <div class="item">
  37.                   <img src="@/assets/common/img.jpeg" alt="">
  38.                   <div>
  39.                     <p>
  40.                       <span class="col">朱继柳</span> 发布了
  41.                       第1期“传智大讲堂”互动讨论获奖名单公布
  42.   </p>
  43.                     <p>2018-07-21 15:21:38</p>
  44.   </div>
  45.   </div>
  46.   </li>
  47.               <li>
  48.                 <div class="item">
  49.                   <img src="@/assets/common/img.jpeg" alt="">
  50.                   <div>
  51.                     <p>
  52.                       <span class="col">朱继柳</span> 发布了
  53.                       第2期“传智大讲堂”互动讨论获奖名单公布
  54.   </p>
  55.                     <p>2018-07-21 15:21:38</p>
  56.   </div>
  57.   </div>
  58.   </li>
  59.               <li>
  60.                 <div class="item">
  61.                   <img src="@/assets/common/img.jpeg" alt="">
  62.                   <div>
  63.                     <p>
  64.                       <span class="col">朱继柳</span> 发布了
  65.                       第3期“传智大讲堂”互动讨论获奖名单公布
  66.   </p>
  67.                     <p>2018-07-21 15:21:38</p>
  68.   </div>
  69.   </div>
  70.   </li>
  71.   </ul>
  72.   </div>
  73.   </div>
  74.   </el-card>
  75.   </el-col>
  76.     <!-- 右侧内容 -->
  77.     <el-col :span="9">
  78.       <el-card class="box-card">
  79.         <div class="header headTit">
  80.           <span>流程申请</span>
  81.   </div>
  82.         <div class="sideNav">
  83.           <el-button class="sideBtn">加班离职</el-button>
  84.           <el-button class="sideBtn">请假调休</el-button>
  85.           <el-button class="sideBtn">审批列表</el-button>
  86.           <el-button class="sideBtn">我的信息</el-button>
  87.   </div>
  88.   </el-card>
  90.       <!-- 绩效指数 -->
  91.       <el-card class="box-card">
  92.         <div slot="header" class="header">
  93.           <span>绩效指数</span>
  94.   </div>
  95.         <!-- 放置雷达图 -->
  96.   </el-card>
  97.       <!-- 帮助连接 -->
  98.       <el-card class="box-card">
  99.         <div class="header headTit">
  100.           <span>帮助链接</span>
  101.   </div>
  102.         <div class="sideLink">
  103.           <el-row>
  104.             <el-col :span="8">
  105.               <a href="#">
  106.                 <span class="icon iconGuide" />
  107.                 <p>入门指南</p>
  108.   </a>
  109.   </el-col>
  110.             <el-col :span="8">
  111.               <a href="#">
  112.                 <span class="icon iconHelp" />
  113.                 <p>在线帮助手册</p>
  114.   </a>
  115.   </el-col>
  116.             <el-col :span="8">
  117.               <a href="#">
  118.                 <span class="icon iconTechnology" />
  119.                 <p>联系技术支持</p>
  120.   </a>
  121.   </el-col>
  122.   </el-row>
  123.   </div>
  124.   </el-card>
  125.   </el-col>
  126.   </el-row>
  127.   </div>
  128. </template>
  130. <script>
  131.   import { mapGetters } from 'vuex'
  133.   export default {
  134.     name: 'Dashboard',
  135.     computed: {
  136.       ...mapGetters([
  137.         'name'
  138.       ])
  139.     }
  140.   }
  141. </script>
  143. <style lang="scss" scoped>
  144.   .dashboard-container {
  145.     margin: 10px;
  146.     li {
  147.       list-style: none;
  148.     }
  149.     .headImg {
  150.       float: left;
  151.       width: 100px;
  152.       height: 100px;
  153.       border-radius: 50%;
  154.       background: #999;
  155.       img {
  156.         width: 100%;
  157.         height: 100%;
  158.         border-radius: 50%;
  159.       }
  160.     }
  162.     .headInfoTip {
  163.       padding: 25px 0 0;
  164.       margin-left: 120px;
  165.       p {
  166.         padding: 0 0 15px;
  167.         margin: 0;
  168.         &.firstChild {
  169.           font-size: 20px;
  170.         }
  171.         &.lastChild {
  172.           font-size: 16px;
  173.           color: #7f8c8d;
  174.         }
  175.       }
  176.     }
  177.   }
  179.   .box-card {
  180.     padding: 5px 10px;
  181.     margin-top: 20px;
  182.     .header {
  183.       span {
  184.         color: #2c3e50;
  185.         font-size: 20px;
  186.       }
  187.       .item {
  188.         color: #97a8be;
  189.         float: right;
  190.         padding: 3px 0;
  191.       }
  192.     }
  193.     .headTit {
  194.       span {
  195.         border-bottom: 4px solid #8a97f8;
  196.         padding-bottom: 10px;
  197.       }
  198.     }
  199.   }
  200.   .header-card {
  201.     position: relative;
  202.     .header {
  203.       position: absolute;
  204.       right: 20px;
  205.       top: 15px;
  206.       z-index: 1;
  207.     }
  208.   }
  210.   .advContent {
  211.     background: #fff;
  212.     border-radius: 5px 5px 0px 0px;
  213.     .title {
  214.       font-size: 16px;
  215.       padding: 20px;
  216.       font-weight: bold;
  217.       border-bottom: solid 1px #ccc;
  218.     }
  219.     .contentItem {
  220.       padding: 0 30px;
  221.       min-height: 350px;
  222.       .item {
  223.         display: flex;
  224.         padding: 18px 0 10px;
  225.         border-bottom: solid 1px #ccc;
  226.         .col {
  227.           color: #8a97f8;
  228.         }
  229.         img {
  230.           width: 56px;
  231.           height: 56px;
  232.           border-radius: 50%;
  233.           margin-right: 10px;
  234.         }
  235.         p {
  236.           padding: 0 0 8px;
  237.         }
  238.       }
  239.     }
  240.   }
  241.   .noticeList {
  242.     margin: 0;
  243.     padding: 0;
  244.   }
  245.   .sideNav,
  246.   .sideLink {
  247.     padding: 30px 0 12px;
  248.     .sideBtn {
  249.       padding: 16px 26px;
  250.       font-size: 16px;
  251.       margin: 10px 5px;
  252.     }
  253.   }
  254.   .sideLink {
  255.     text-align: center;
  256.     .icon {
  257.       display: inline-block;
  258.       width: 76px;
  259.       height: 76px;
  260.       background: url("./../../assets/common/icon.png") no-repeat;
  261.     }
  262.     .iconGuide {
  263.       background-position: 0 0;
  264.     }
  265.     .iconHelp {
  266.       background-position: -224px 0;
  267.     }
  268.     .iconTechnology {
  269.       background-position: -460px 0;
  270.     }
  271.   }
  272. </style>

导入全局getter

Echart

依赖于原生dom的渲染方式初始化必须放在mounted钩子函数里面

安装依赖：npm i echarts --save

全屏功能

使用到浏览器支持的两个api document.exitFullscreen()退出全屏 document.documentElement.requestFullscreen()打开全屏 使用一个

  1. <template>
  2.   <div class="fullBox">
  3.     <!-- 全局svg图表组件 icon-class指定渲染的图标 exit-fullscreen-->
  4.     <svg-icon
  5.       :icon-class="isFullScreen?'exit-fullscreen':'fullscreen'"
  6.       class="fullscreen"
  7.       @click="toggleScreen"
  8.     />
  9.   </div>
  11. </template>
  13. <script>
  14. export default {
  15.   data() {
  16.     return {
  17.       isFullScreen: false // 不是全屏
  18.     }
  19.   },
  20.   mounted() {
  21.     document.addEventListener('fullscreenchange', () => {
  22.       if (document.fullscreenElement === null) {
  23.         this.isFullScreen = false
  24.       }
  25.     })
  26.   },
  27.   methods: {
  28.     toggleScreen () {
  29.       if (this.isFullScreen) {
  30.         // 退出全屏
  31.         document.exitFullscreen()
  32.       } else {
  33.         // 打开全屏
  34.         document.documentElement.requestFullscreen()
  35.       }
  36.       this.isFullScreen = !this.isFullScreen
  37.     }
  38.   }
  40. }
  41. </script>
  43. <style scoped>
  44.   .fullBox{
  45.     display: inline-block;
  46.     margin-right: 20px;
  47.     color: #fff;
  48.   }
  49. </style>

使用插件

网址：https://github.com/sindresorhus/screenfull#readme
下载：npm i screenfull@5 需要装一个稳定的v5版本