添加控制面板数据

Author: lpya

.eslintrc.js

@@ -26,6 +26,7 @@ module.exports = {
     }
   ],
   globals: {
-    defineProps: 'readonly'
+    defineProps: 'readonly',
+    defineEmits: 'readonly'
   }
 }

package.json

@@ -8,6 +8,7 @@
   },
   "dependencies": {
     "axios": "^0.24.0",
+    "echarts": "^5.2.2",
     "element-plus": "^1.2.0-beta.6",
     "js-cookie": "^3.0.1",
     "nprogress": "^0.2.0",

src/App.vue

@@ -32,6 +32,9 @@ const test = () => {
     .el-sub-menu {
       .el-menu {
         background: v-bind(subMenuBg);
+        .el-menu-item.is-active {
+          background: v-bind(subMenuHover);
+        }
         li:hover {
           background: v-bind(subMenuHover);
         }

src/assets/iconfont/iconfont.scss

@@ -1,8 +1,8 @@
 @font-face {
   font-family: "iconfont"; /* Project id 3001982 */
-  src: url('//at.alicdn.com/t/font_3001982_lj1qbspdq4m.woff2?t=1640593771185') format('woff2'),
-       url('//at.alicdn.com/t/font_3001982_lj1qbspdq4m.woff?t=1640593771185') format('woff'),
-       url('//at.alicdn.com/t/font_3001982_lj1qbspdq4m.ttf?t=1640593771185') format('truetype');
+  src: url('//at.alicdn.com/t/font_3001982_h7w46xo0a5b.woff2?t=1640829544328') format('woff2'),
+       url('//at.alicdn.com/t/font_3001982_h7w46xo0a5b.woff?t=1640829544328') format('woff'),
+       url('//at.alicdn.com/t/font_3001982_h7w46xo0a5b.ttf?t=1640829544328') format('truetype');
 }
 
 .iconfont {
@@ -13,6 +13,50 @@
   -moz-osx-font-smoothing: grayscale;
 }
 
+.icon-caret-up:before {
+  content: "\e8ed";
+}
+
+.icon-ip:before {
+  content: "\e64f";
+}
+
+.icon-reloadtime:before {
+  content: "\e789";
+}
+
+.icon-adduser:before {
+  content: "\e7b1";
+}
+
+.icon-barchart:before {
+  content: "\e7b3";
+}
+
+.icon-file-text-fill:before {
+  content: "\e858";
+}
+
+.icon-eye-fill:before {
+  content: "\e869";
+}
+
+.icon-guanliyuan:before {
+  content: "\e600";
+}
+
+.icon-home:before {
+  content: "\e7c6";
+}
+
+.icon-delete:before {
+  content: "\e7c3";
+}
+
+.icon-home-fill:before {
+  content: "\e867";
+}
+
 .icon-caret-down:before {
   content: "\e8ec";
 }

src/components/Hamburger/Index.vue

@@ -3,15 +3,14 @@
  * @Author: hutu
  * @Date: 2021-12-22 14:53:31
  * @LastEditors: hutu
- * @LastEditTime: 2021-12-22 16:00:57
+ * @LastEditTime: 2021-12-30 08:46:09
 -->
 <template>
   <div class="hamburger" @click="emitMenuCollapse">
     <el-icon class="iconfont" :class="props.collapse ? 'icon-indent' : 'icon-outdent'"></el-icon>
   </div>
 </template>
 <script lang="ts" setup>
-import { defineEmits } from 'vue'
 const props = defineProps<{
   collapse: boolean
 }>()

src/components/HeaderIcon/Index.vue

@@ -0,0 +1,25 @@
+<!--
+ * @Description: 头部搜索
+ * @Author: hutu
+ * @Date: 2021-12-22 15:59:15
+ * @LastEditors: hutu
+ * @LastEditTime: 2021-12-30 08:48:03
+-->
+<template>
+  <el-tooltip class="item" effect="dark" :content="props.title" placement="bottom">
+    <div class="header-icon">
+      <el-icon class="iconfont" :class="props.icon"></el-icon>
+    </div>
+  </el-tooltip>
+</template>
+<script lang="ts" setup>
+const props = defineProps<{
+  title: string
+  icon: string
+}>()
+</script>
+<style lang="scss">
+.header-icon {
+  @extend .app-icon-hover;
+}
+</style>

src/components/HeaderSetting/Index.vue

@@ -0,0 +1,53 @@
+<!--
+ * @Description: echarts图表
+ * @Author: hutu
+ * @Date: 2021-12-30 10:32:19
+ * @LastEditors: hutu
+ * @LastEditTime: 2021-12-30 14:44:25
+-->
+<template>
+  <div class="init-echarts">
+    <div class="title">{{ prop.data.title }}</div>
+    <div :id="prop.data.id" :style="{ width: prop.data.width, height: prop.data.height }"></div>
+  </div>
+</template>
+<script lang="ts" setup>
+import { onMounted } from 'vue'
+import { IEchartsOption } from '@/interface'
+import * as echarts from 'echarts/core'
+import { BarChart, LineChart, PieChart } from 'echarts/charts'
+import { TitleComponent, TooltipComponent, GridComponent, LegendComponent } from 'echarts/components'
+import { LabelLayout, UniversalTransition } from 'echarts/features'
+import { CanvasRenderer } from 'echarts/renderers'
+echarts.use([BarChart, LineChart, PieChart, TitleComponent, TooltipComponent, GridComponent, LegendComponent, LabelLayout, UniversalTransition, CanvasRenderer])
+interface IData {
+  id: string
+  title: string
+  width: string
+  height: string
+}
+const prop = defineProps<{
+  option: IEchartsOption
+  data: IData
+}>()
+const init = () => {
+  const myChart = echarts.init(document.getElementById(prop.data.id) as HTMLElement)
+  myChart.setOption(prop.option)
+  window.onresize = function () {
+    myChart.resize()
+  }
+}
+onMounted(() => {
+  init()
+})
+</script>
+<style lang="scss">
+.init-echarts {
+  background: #fff;
+  padding: 20px;
+  .title {
+    font-size: 16px;
+    font-weight: bold;
+  }
+}
+</style>

src/components/InitEcharts/Index.vue

@@ -3,14 +3,14 @@
  * @Author: hutu
  * @Date: 2021-12-22 15:24:13
  * @LastEditors: hutu
- * @LastEditTime: 2021-12-27 09:53:16
+ * @LastEditTime: 2021-12-30 08:55:20
 -->
 <template>
-  <div class="screenfull" @click="handleScreenfull">
-    <el-tooltip class="item" effect="dark" :content="state.isScreenfull ? '退出全屏' : '全屏'" placement="bottom">
+  <el-tooltip class="item" effect="dark" :content="state.isScreenfull ? '退出全屏' : '全屏'" placement="bottom">
+    <div class="screenfull" @click="handleScreenfull">
       <el-icon class="iconfont icon-fullscreen" :class="state.isScreenfull ? 'icon-fullscreen-exit' : 'icon-fullscreen'"></el-icon>
-    </el-tooltip>
-  </div>
+    </div>
+  </el-tooltip>
 </template>
 <script lang="ts" setup>
 import screenfull from 'screenfull'

src/components/Screenfull/Index.vue

@@ -1,4 +1,3 @@
-import { RouteRecordRaw } from 'vue-router'
 /**
  * 用户信息
  */
@@ -29,6 +28,7 @@ export interface IAsyncRoutes {
 /**
  * 路由权限[vuex]
  */
+import { RouteRecordRaw } from 'vue-router'
 export interface IPermission {
   accessRoutes: RouteRecordRaw[] //模拟异步路由
   menuCollapse: boolean //折叠菜单
@@ -50,3 +50,14 @@ export interface IThemeStyles {
   subMenuBg: string //子菜单栏背景颜色
   subMenuHover: string //子菜单栏悬浮颜色
 }
+/**
+ * 引入echarts
+ */
+// 引入 echarts 核心模块，核心模块提供了 echarts 使用必须要的接口。
+import * as echarts from 'echarts/core'
+// 引入图表，图表后缀都为 Chart
+import { BarSeriesOption, LineSeriesOption, PieSeriesOption } from 'echarts/charts'
+// 引入提示框，标题，直角坐标系，组件后缀都为 Component
+import { TitleComponentOption, TooltipComponentOption, GridComponentOption } from 'echarts/components'
+// 通过 ComposeOption 来组合出一个只有必须组件和图表的 Option 类型
+export type IEchartsOption = echarts.ComposeOption<BarSeriesOption | LineSeriesOption | PieSeriesOption | TitleComponentOption | TooltipComponentOption | GridComponentOption>