index.vue 5.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215
  1. <template>
  2. <div class="big">
  3. <el-row>
  4. <div class="card">
  5. <el-col :xs="24" :lg="16" :md="16">
  6. <div class="car-left">
  7. <el-row>
  8. <div>
  9. <el-col :xs="4" :md="3" :lg="3">
  10. <span class="card-img">
  11. <img :src="userInfo.headerImg" alt="">
  12. </span>
  13. </el-col>
  14. <el-col :xs="20" :lg="12" :md="12">
  15. <div class="text">
  16. <h4>早安,管理员, 请开始您一天的工作吧!</h4>
  17. <p class="tips-text">
  18. <i class="el-icon-sunny el-icon" />
  19. <span>今日晴,0℃ - 10℃,天气寒冷,注意添加衣物。</span>
  20. </p>
  21. </div>
  22. </el-col>
  23. </div>
  24. </el-row>
  25. </div>
  26. </el-col>
  27. <el-col :xs="24" :lg="8" :md="8">
  28. <div class="car-right">
  29. <el-row>
  30. <el-col :span="8">
  31. <div class="car-item">
  32. <span class="flow"><i class="el-icon-s-grid" /></span>
  33. <span>今日流量 </span>
  34. <b>13260</b>
  35. </div>
  36. </el-col>
  37. <el-col :span="8">
  38. <div class="car-item">
  39. <span class="user-number">
  40. <i class="el-icon-s-custom" />
  41. </span>
  42. <span>总用户 </span>
  43. <b>48286</b>
  44. </div>
  45. </el-col>
  46. <el-col :span="8">
  47. <div class="car-item">
  48. <span class="feedback">
  49. <i class="el-icon-star-on" />
  50. </span>
  51. <span>好评率 </span>
  52. <b>98%</b>
  53. </div>
  54. </el-col>
  55. </el-row>
  56. </div>
  57. </el-col>
  58. </div>
  59. </el-row>
  60. <el-row>
  61. <el-card shadow="hover">
  62. <h2>
  63. 使用教学:<a style="color:#409EFF" target="view_window" href="https://www.bilibili.com/video/BV1fV411y7dT/">https://www.bilibili.com/video/BV1fV411y7dT/</a>
  64. </h2>
  65. <br>
  66. <h2>
  67. 工作流教学:<a style="color:#409EFF" target="view_window" href="https://www.bilibili.com/video/BV1Ka411F7Ji/">https://www.bilibili.com/video/BV1Ka411F7Ji/</a>
  68. </h2>
  69. <div />
  70. </el-card>
  71. </el-row>
  72. <div class="shadow">
  73. <el-row :gutter="20">
  74. <el-col
  75. v-for="(card, key) in toolCards"
  76. :key="key"
  77. :span="4"
  78. :xs="8"
  79. @click.native="toTarget(card.name)"
  80. >
  81. <el-card shadow="hover" class="grid-content">
  82. <i :class="card.icon" :style="{ color: card.color }" />
  83. <p>{{ card.label }}</p>
  84. </el-card>
  85. </el-col>
  86. </el-row>
  87. </div>
  88. <div class="bottom">
  89. <el-row :gutter="32">
  90. <el-col :xs="24" :sm="24" :lg="12">
  91. <div class="chart-player">
  92. <music-player />
  93. </div>
  94. </el-col>
  95. <el-col :xs="24" :sm="24" :lg="12">
  96. <div class="chart-player">
  97. <todo-list />
  98. </div>
  99. </el-col>
  100. </el-row>
  101. </div>
  102. </div>
  103. </template>
  104. <script>
  105. import musicPlayer from './component/musicPlayer'
  106. import TodoList from './component/todoList'
  107. import { mapGetters } from 'vuex'
  108. export default {
  109. name: 'Dashboard',
  110. components: {
  111. musicPlayer, // 音乐播放器
  112. TodoList // TodoList
  113. // RaddarChart, //雷达图
  114. // stackMap, //堆叠图
  115. // Sunburst, //旭日图
  116. },
  117. data() {
  118. return {
  119. toolCards: [
  120. {
  121. label: '用户管理',
  122. icon: 'el-icon el-icon-monitor',
  123. name: 'user',
  124. color: '#ff9c6e'
  125. },
  126. {
  127. label: '角色管理',
  128. icon: 'el-icon el-icon-setting',
  129. name: 'authority',
  130. color: '#69c0ff'
  131. },
  132. {
  133. label: '菜单管理',
  134. icon: 'el-icon el-icon-menu',
  135. name: 'menu',
  136. color: '#b37feb'
  137. },
  138. {
  139. label: '代码生成器',
  140. icon: 'el-icon el-icon-cpu',
  141. name: 'autoCode',
  142. color: '#ffd666'
  143. },
  144. {
  145. label: '表单生成器',
  146. icon: 'el-icon el-icon-document-checked',
  147. name: 'formCreate',
  148. color: '#ff85c0'
  149. },
  150. {
  151. label: '关于我们',
  152. icon: 'el-icon el-icon-user',
  153. name: 'about',
  154. color: '#5cdbd3'
  155. }
  156. ]
  157. }
  158. },
  159. computed: {
  160. ...mapGetters('user', ['userInfo'])
  161. },
  162. methods: {
  163. toTarget(name) {
  164. this.$router.push({ name })
  165. }
  166. }
  167. }
  168. </script>
  169. <style lang="scss" scoped>
  170. .big {
  171. margin: 100px 0 0 0;
  172. padding-top: 0;
  173. background-color: rgb(243, 243, 243);
  174. padding-top: 15px;
  175. .top {
  176. width: 100%;
  177. height: 360px;
  178. margin-top: 20px;
  179. overflow: hidden;
  180. .chart-container {
  181. position: relative;
  182. width: 100%;
  183. height: 100%;
  184. padding: 20px;
  185. background-color: #fff;
  186. }
  187. }
  188. .mid {
  189. width: 100%;
  190. height: 380px;
  191. .chart-wrapper {
  192. height: 340px;
  193. background: #fff;
  194. padding: 16px 16px 0;
  195. margin-bottom: 32px;
  196. }
  197. }
  198. .bottom {
  199. width: 100%;
  200. height: 300px;
  201. // margin: 20px 0;
  202. .el-row {
  203. margin-right: 4px !important;
  204. }
  205. .chart-player {
  206. width: 100%;
  207. height: 270px;
  208. padding: 10px;
  209. background-color: #fff;
  210. }
  211. }
  212. }
  213. </style>