From 208878c0623c631f64c23e0619409d993cdf7c19 Mon Sep 17 00:00:00 2001
From: wangjiahao <1522128093@qq.com>
Date: Fri, 26 Mar 2021 12:26:48 +0800
Subject: [PATCH] =?UTF-8?q?feat:=E6=81=A2=E5=A4=8D=E6=A0=B7=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/components/Toolbar.vue        | 130 ++++++++++-----------
 frontend/src/custom-component/UserView.vue |   5 +-
 frontend/src/main.js                       |   4 -
 frontend/src/views/panel/edit/index.vue    |  43 ++++---
 4 files changed, 91 insertions(+), 91 deletions(-)

diff --git a/frontend/src/components/Toolbar.vue b/frontend/src/components/Toolbar.vue
index 8170b5e3d8..458100aeeb 100644
--- a/frontend/src/components/Toolbar.vue
+++ b/frontend/src/components/Toolbar.vue
@@ -1,29 +1,23 @@
 <template>
   <div>
     <div class="toolbar">
-
-      <el-tooltip content="撤消">
-        <el-button class="el-icon-refresh-left" size="mini" circle @click="undo" />
-      </el-tooltip>
-      <el-tooltip content="重做">
-        <el-button class="el-icon-refresh-left" size="mini" circle @click="redo" />
-      </el-tooltip>
-      <el-tooltip content="插入图片">
-        <el-button class="el-icon-refresh-left" for="input" size="mini" circle />
-        <input id="input" type="file" hidden @change="handleFileChange">
-      </el-tooltip>
-      <el-tooltip content="预览">
-        <el-button class="el-icon-refresh-left" size="mini" circle @click="preview" />
-      </el-tooltip>
-      <el-tooltip content="清空">
-        <el-button class="el-icon-refresh-left" size="mini" circle @click="clearCanvas" />
-      </el-tooltip>
-      <el-tooltip content="保存">
-        <el-button class="el-icon-circle-check" size="mini" circle @click="save" />
-      </el-tooltip>
-      <el-tooltip content="预览">
-        <el-button class="el-icon-view" size="mini" circle @click="preview" />
-      </el-tooltip>
+      <el-button @click="undo">撤消</el-button>
+      <el-button @click="redo">重做</el-button>
+      <label for="input" class="insert">插入图片</label>
+      <input id="input" type="file" hidden @change="handleFileChange">
+      <el-button style="margin-left: 10px;" @click="preview">预览</el-button>
+      <el-button @click="save">保存</el-button>
+      <el-button @click="clearCanvas">清空画布</el-button>
+      <div class="canvas-config">
+        <span>画布大小</span>
+        <input v-model="canvasStyleData.width">
+        <span>*</span>
+        <input v-model="canvasStyleData.height">
+      </div>
+      <div class="canvas-config">
+        <span>画布比例</span>
+        <input v-model="scale" @input="handleScaleChange"> %
+      </div>
     </div>
 
     <!-- 预览 -->
@@ -193,62 +187,62 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.toolbar {
-    height: 35px;
-    line-height: 35px;
+  .toolbar {
+    height: 50px;
+    line-height: 50px;
     background: #fff;
     border-bottom: 1px solid #ddd;
 
     .canvas-config {
-        display: inline-block;
+      display: inline-block;
+      margin-left: 10px;
+      font-size: 14px;
+      color: #606266;
+
+      input {
+        width: 50px;
         margin-left: 10px;
-        font-size: 14px;
+        outline: none;
+        padding: 0 5px;
+        border: 1px solid #ddd;
         color: #606266;
+      }
 
-        input {
-            width: 50px;
-            margin-left: 10px;
-            outline: none;
-            padding: 0 5px;
-            border: 1px solid #ddd;
-            color: #606266;
-        }
-
-        span {
-            margin-left: 10px;
-        }
+      span {
+        margin-left: 10px;
+      }
     }
 
     .insert {
-        display: inline-block;
-        line-height: 1;
-        white-space: nowrap;
-        cursor: pointer;
-        background: #FFF;
-        border: 1px solid #DCDFE6;
-        color: #606266;
-        -webkit-appearance: none;
-        text-align: center;
-        box-sizing: border-box;
+      display: inline-block;
+      line-height: 1;
+      white-space: nowrap;
+      cursor: pointer;
+      background: #FFF;
+      border: 1px solid #DCDFE6;
+      color: #606266;
+      -webkit-appearance: none;
+      text-align: center;
+      box-sizing: border-box;
+      outline: 0;
+      margin: 0;
+      transition: .1s;
+      font-weight: 500;
+      padding: 9px 15px;
+      font-size: 12px;
+      border-radius: 3px;
+      margin-left: 10px;
+
+      &:active {
+        color: #3a8ee6;
+        border-color: #3a8ee6;
         outline: 0;
-        margin: 0;
-        transition: .1s;
-        font-weight: 500;
-        padding: 9px 15px;
-        font-size: 12px;
-        border-radius: 3px;
-        margin-left: 10px;
+      }
 
-        &:active {
-            color: #3a8ee6;
-            border-color: #3a8ee6;
-            outline: 0;
-        }
-
-        &:hover {
-            background-color: #ecf5ff;
-            color: #3a8ee6;
-        }
+      &:hover {
+        background-color: #ecf5ff;
+        color: #3a8ee6;
+      }
     }
-}
+  }
 </style>
diff --git a/frontend/src/custom-component/UserView.vue b/frontend/src/custom-component/UserView.vue
index 0dae19e444..fc90653875 100644
--- a/frontend/src/custom-component/UserView.vue
+++ b/frontend/src/custom-component/UserView.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="rect-shape">
-    <chart-component v-if="showCard" :ref="element.propValue.id" :chart-id="element.propValue.id" :chart="chart" />
+    <chart-component v-if="showCard" :ref="element.propValue.id" class="chart-class" :chart-id="element.propValue.id" :chart="chart" />
   </div>
 </template>
 
@@ -54,4 +54,7 @@ export default {
     height: 100%;
     overflow: auto;
 }
+.chart-class{
+  height: 100%;
+}
 </style>
diff --git a/frontend/src/main.js b/frontend/src/main.js
index 0e264907d2..b33e828134 100644
--- a/frontend/src/main.js
+++ b/frontend/src/main.js
@@ -17,10 +17,6 @@ import directives from './directive'
 import VueClipboard from 'vue-clipboard2'
 
 import '@/custom-component' // 注册自定义组件
-import '@/assets/iconfont/iconfont.css'
-import '@/styles/animate.css'
-import 'element-ui/lib/theme-chalk/index.css'
-import '@/styles/reset.css'
 Vue.config.productionTip = false
 Vue.use(VueClipboard)
 
diff --git a/frontend/src/views/panel/edit/index.vue b/frontend/src/views/panel/edit/index.vue
index 1cf2140cb2..3446639efe 100644
--- a/frontend/src/views/panel/edit/index.vue
+++ b/frontend/src/views/panel/edit/index.vue
@@ -3,30 +3,29 @@
     <!-- <de-header>Header</de-header> -->
     <el-header class="de-header">
       <el-row class="panel-design-head">
-        <span style="float: left;line-height: 35px; color: gray">
-
+        <span style="float: left;line-height: 50px; color: gray">
           <span>名称：测试仪表板</span>
-
         </span>
-        <span style="float: right;line-height: 35px;">
+        <Toolbar />
+        <!--        <span style="float: right;line-height: 35px;">-->
 
-          <el-tooltip content="返回目录">
-            <el-button class="el-icon-refresh-left" size="mini" circle @click="toDir" />
-          </el-tooltip>
+        <!--          <el-tooltip content="返回目录">-->
+        <!--            <el-button class="el-icon-refresh-left" size="mini" circle @click="toDir" />-->
+        <!--          </el-tooltip>-->
 
-          <el-tooltip content="背景图">
-            <el-button class="el-icon-full-screen" size="mini" circle />
-          </el-tooltip>
+        <!--          <el-tooltip content="背景图">-->
+        <!--            <el-button class="el-icon-full-screen" size="mini" circle />-->
+        <!--          </el-tooltip>-->
 
-          <el-tooltip content="保存">
-            <el-button class="el-icon-circle-check" size="mini" circle @click="saveDrawing" />
-          </el-tooltip>
+        <!--          <el-tooltip content="保存">-->
+        <!--            <el-button class="el-icon-circle-check" size="mini" circle @click="saveDrawing" />-->
+        <!--          </el-tooltip>-->
 
-          <el-tooltip content="预览">
-            <el-button class="el-icon-view" size="mini" circle @click="preViewShow" />
-          </el-tooltip>
+        <!--          <el-tooltip content="预览">-->
+        <!--            <el-button class="el-icon-view" size="mini" circle @click="preViewShow" />-->
+        <!--          </el-tooltip>-->
 
-        </span>
+        <!--        </span>-->
       </el-row>
     </el-header>
     <de-container>
@@ -113,6 +112,13 @@ import componentList from '@/custom-component/component-list' // 左侧列表数
 import { listenGlobalKeyDown } from '@/utils/shortcutKey'
 import { mapState } from 'vuex'
 import { uuid } from 'vue-uuid'
+import Toolbar from '@/components/Toolbar'
+
+// 引入样式
+import '@/assets/iconfont/iconfont.css'
+import '@/styles/animate.css'
+import 'element-ui/lib/theme-chalk/index.css'
+import '@/styles/reset.css'
 
 export default {
   components: {
@@ -121,7 +127,8 @@ export default {
     DeAsideContainer,
     FilterGroup,
     ViewSelect,
-    Editor
+    Editor,
+    Toolbar
 
   },
   data() {