图片编辑组件修改

package.json

@@ -32,21 +32,22 @@
     "element-resize-detector": "^1.2.3",
     "element-ui": "^2.13.2",
     "fabric": "^5.3.0",
+    "fabric-with-erasing": "^1.0.1",
     "file-saver": "^2.0.5",
+    "fontfaceobserver": "^2.1.0",
     "hammerjs": "^2.0.8",
+    "hotkeys-js": "^3.8.8",
     "jquery": "^3.6.0",
     "js-audio-recorder": "^1.0.7",
     "js-base64": "^3.6.1",
     "js-cookie": "^2.2.1",
     "jszip-utils": "^0.1.0",
     "less": "^4.0.0",
-    "fontfaceobserver": "^2.1.0",
     "less-loader": "^5.0.0",
     "lodash": "^4.17.19",
+    "lodash-es": "^4.17.21",
     "moment": "^2.29.1",
     "node-sass": "^6.0.1",
-    "hotkeys-js": "^3.8.8",
-    "lodash-es": "^4.17.21",
     "pdfjs-dist": "^2.6.347",
     "pizzip": "^3.1.1",
     "qs": "^6.9.4",

src/assets/scss/reset.scss

@@ -177,7 +177,7 @@ legend {
 
 input,
 textarea {
-  -webkit-appearance: none;
+  //-webkit-appearance: none;
   border: none;
   outline: none;
   background: none;

src/components/360View/commonForm/deveopmentFIle.vue

@@ -678,7 +678,7 @@ export default {
   }
 }
 </script>
-<style lang="scss">
+<style lang="scss" scoped>
 #threeFunc {
   .el-input__suffix, .el-input__prefix {
     //display: none;

src/components/360View/commonForm/eyesVision.vue

@@ -1127,19 +1127,19 @@ export default {
   }
 }
 </style>
-<style lang="scss">
+<style lang="scss" scoped>
 #eyesFunc{
   .operation-record-table{
     .center {
       text-align: left;
     }
-    .el-input__inner {
+    ::v-deep .el-input__inner {
       padding: 0;
       border: none;
       text-align: center;
       border-radius: 0;
     }
-    .el-textarea__inner{
+    ::v-deep .el-textarea__inner{
       border: none;
     }
   }
@@ -1152,21 +1152,21 @@ export default {
       margin-right: 5px !important;
     }
   }
-  .el-table th {
+  ::v-deep .el-table th {
     border-color: #8e8c8c !important;
   }
-  .el-table td {
+  ::v-deep .el-table td {
     border-color: #8e8c8c !important;
   }
-  .el-table--group,
-  .el-table--border {
+  ::v-deep .el-table--group,
+  ::v-deep .el-table--border {
     border: 1px solid #8e8c8c !important;
     border-bottom: none !important;
   }
-  .el-icon-arrow-up{
+  ::v-deep .el-icon-arrow-up{
     display: none;
   }
-  .el-input-group__append, .el-input-group__prepend{
+  ::v-deep .el-input-group__append, .el-input-group__prepend{
     padding: 0 5px !important;
   }
 }

src/components/360View/commonForm/optometryForm.vue

@@ -1103,5 +1103,91 @@ export default {
     -webkit-print-color-adjust: exact;
   }
 }
+#threeFunc{
+  .operation-record-table{
+    .el-input__inner {
+      padding: 0;
+      border: none;
+      text-align: center;
+      border-radius: 0;
+    }
+    .machineBox{
+      .el-table__cell {
+        height: 24px;
+      }
+      .el-table td {
+        border-color: #cbc8c8;
+      }
+      .el-table tr{
+        td:nth-child(1) {
+          border-right: 1px solid #212020;
+        }
+        td:nth-child(2) {
+          border-right: 1px solid #212020;
+        }
+
+      }
+      .el-table tbody {
+        tr:nth-child(2) {
+          td{
+            border-bottom: 1px solid #212020;
+          }
+        }
+        tr:nth-child(4) {
+          td{
+            border-bottom: 1px solid #212020;
+          }
+        }
+        tr:nth-child(6) {
+          td{
+            border-bottom: 1px solid #212020;
+          }
+        }
+      }
+
+    }
+  }
+  .el-table__cell{
+    padding: 6px 0 !important;
+  }
+  .el-input-group__append, .el-input-group__prepend{
+    padding: 0 5px !important;
+  }
+  .el-input__prefix {
+    //display: none;
+  }
+  .el-icon-arrow-up{
+    display: none;
+  }
+  .el-textarea__inner{
+    border: none;
+  }
+  .el-table--enable-row-hover .el-table__body tr:hover>td.el-table__cell {
+    background: none !important;
+  }
+  .has-gutter {
+    display: none;
+    .cell {
+      font-weight: 700;
+    }
+    .el-table__cell {
+      background: #ced4d9;
+    }
+  }
+  .el-table__header-wrapper{
+    display: none;
+  }
+  .el-table th {
+    border-color: #8e8c8c;
+  }
+  .el-table td {
+    border-color: #8e8c8c;
+  }
+  .el-table--group,
+  .el-table--border {
+    border: 1px solid #8e8c8c !important;
+    border-bottom: none !important;
+  }
+}
 </style>
 

src/components/360View/commonForm/threeVision.vue

@@ -1637,8 +1637,6 @@ export default {
     font-weight: 400;
   }
 }
-</style>
-<style lang="scss">
 #threeFunc{
   .operation-record-table{
     .el-input__inner {

src/components/360View/img-editor.vue

@@ -1,11 +1,11 @@
 <template>
   <el-dialog
-    title="图片编辑3"
     top="1vh"
     width="95%"
     :visible.sync="visible"
     fullscreen
     append-to-body
+    :show-close="false"
     class="img-editor"
     @closed="closeDialog"
   >
@@ -53,6 +53,16 @@ export default {
 }
 </script>
 <style lang="scss" scoped>
+::v-deep .el-dialog__header{
+  padding: 0;
+}
+::v-deep .el-dialog__body{
+  padding: 0;
+  background: #515a6e;
+}
+::v-deep .el-dialog.is-fullscreen{
+  background: #515a6e;
+}
 .img-editor{
   .replace-picture {
     z-index: 999;

src/page-subspecialty/views/modules/imgEditorFabric/img-editor/bgBar.vue

@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div class="baBar">
     <el-divider orientation="left" plain>背景</el-divider>
     <div>
       <img
@@ -22,6 +22,7 @@
 
 <script>
 import { getImgStr } from '@/utils/utils'
+import eventBus from '@/page-subspecialty/utils/eventBus'
 export default {
   name: 'BgBar',
   inject: ['canvas', 'fabric'],
@@ -37,21 +38,25 @@ export default {
       imgFile: ''
     }
   },
-  created() {
-    if (this.isOdOrOs === 'OD') {
+  mounted() {
     this.$nextTick(() => {
-        this.setBgImg(this.$refs.od)
+      this.setBgImg()
+      eventBus.$off('clearCanvas')
+      eventBus.$on('clearCanvas', () => {
+        this.setBgImg()
       })
-    } else {
-      this.$nextTick(() => {
-        this.setBgImg(this.$refs.os)
     })
-    }
   },
   methods: {
     // 设置背景图片
     setBgImg(target) {
-      const imgEl = target.cloneNode(true)
+      let imgContent = target
+      if (this.isOdOrOs === 'OD') {
+        imgContent = this.$refs.od
+      } else {
+        imgContent = this.$refs.os
+      }
+      const imgEl = imgContent.cloneNode(true)
       // console.log(imgEl)
       imgEl.onload = () => {
         // 可跨域设置
@@ -116,14 +121,18 @@ export default {
   margin-bottom: 0;
 }
 .img {
-  width: 60px;
+  width: 360px*0.2;
+  height: 400px*0.2;
   padding: 5px;
-  background: #f5f5f5;
-  margin-left: 2px;
-  height: 70px;
+  margin-left: 5px;
   cursor: pointer;
 }
 
+::v-deep .el-divider__text{
+  background: #29292a !important;
+  color: #fff;
+}
+
 .color-list {
   padding: 10px 0;
   .item {

src/page-subspecialty/views/modules/imgEditorFabric/img-editor/layer.vue

@@ -27,13 +27,15 @@
       </div>
     </div>
     <!-- 层级调整按钮 -->
-    <el-button-group v-show="mSelectMode === 'one'" size="small">
+    <div>
+      <el-button-group v-show="mSelectMode === 'one'">
         <el-button @click="up"><span v-html="btnIconType('up')" /></el-button>
         <el-button @click="down"><span v-html="btnIconType('down')" /></el-button>
         <el-button @click="upTop"><span v-html="btnIconType('upTop')" /></el-button>
         <el-button @click="downTop"><span v-html="btnIconType('downTop')" /></el-button>
       </el-button-group>
     </div>
+  </div>
 </template>
 
 <script>
@@ -180,6 +182,10 @@ export default {
 svg {
   vertical-align: text-top;
 }
+::v-deep .el-divider__text{
+  background: #29292a;
+  color: #fff;
+}
 </style>
 
 <style lang="less">

src/page-subspecialty/views/modules/imgEditorFabric/img-editor/save.vue

@@ -8,6 +8,7 @@
 <script>
 import select from '@/mixins/select'
 import { v4 as uuid } from 'uuid'
+import eventBus from '@/page-subspecialty/utils/eventBus'
 export default {
   name: 'SaveBar',
   mixins: [select],
@@ -21,6 +22,7 @@ export default {
     },
     clear() {
       this.canvas.c.clear()
+      eventBus.$emit('clearCanvas')
       this.canvas.c.setBackgroundColor('#ffffff', this.canvas.c.renderAll.bind(this.canvas.c))
     },
     close() {

src/page-subspecialty/views/modules/imgEditorFabric/img-editor/setSize.vue

@@ -11,24 +11,24 @@
     <el-divider plain orientation="left">尺寸</el-divider>
     <div>
       宽度
-      <el-input-number v-model="width" :max="2000" :min="1" size="small" @on-change="setSize" />
+      <el-input-number id="numberInput" v-model="width" :max="2000" :min="1" size="small" @change="setSize" />
     </div>
     <div style="margin-top: 10px">
       高度
-      <el-input-number v-model="height" :max="2000" :min="1" size="small" @on-change="setSize" />
+      <el-input-number id="numberInput" v-model="height" :max="2000" :min="1" size="small" @change="setSize" />
     </div>
-    <el-divider plain orientation="left">预设尺寸</el-divider>
-    <el-button-group vertical>
-      <el-button
-        v-for="(item, i) in presetSize"
-        :key="i + 'presetSize'"
-        size="small"
-        style="text-align:left;margin-bottom: 5px"
-        @click="setSizeBy(item.width * item.scale, item.height * item.scale)"
-      >
-        {{ item.label }}:{{ item.width }}x{{ item.height }}*{{ item.scale }}
-      </el-button>
-    </el-button-group>
+    <!--    <el-divider plain orientation="left">预设尺寸</el-divider>-->
+    <!--    <el-button-group vertical>-->
+    <!--      <el-button-->
+    <!--        v-for="(item, i) in presetSize"-->
+    <!--        :key="i + 'presetSize'"-->
+    <!--        size="small"-->
+    <!--        style="text-align:left;margin-bottom: 5px"-->
+    <!--        @click="setSizeBy(item.width * item.scale, item.height * item.scale)"-->
+    <!--      >-->
+    <!--        {{ item.label }}:{{ item.width }}x{{ item.height }}*{{ item.scale }}-->
+    <!--      </el-button>-->
+    <!--    </el-button-group>-->
   </div>
 </template>
 
@@ -38,8 +38,8 @@ export default {
   inject: ['canvas', 'fabric'],
   data() {
     return {
-      width: 900 * 0.5,
-      height: 1200 * 0.5,
+      width: 360 * 1.5,
+      height: 400 * 1.5,
       presetSize: [{
         label: '红书竖版',
         width: 900,
@@ -80,3 +80,14 @@ export default {
   }
 }
 </script>
+<style lang="less" scoped>
+::v-deep .el-divider__text{
+  background: #29292a !important;
+  color: #fff;
+}
+#numberInput{
+  ::v-deep .el-input__inner{
+    height: 30px !important;
+  }
+}
+</style>

src/page-subspecialty/views/modules/imgEditorFabric/img-editor/tools.vue

@@ -197,6 +197,10 @@ export default {
 </script>
 
 <style scoped lang="less">
+::v-deep .el-divider__text{
+  background: #29292a !important;
+  color: #fff;
+}
 .tool-box {
   display: flex;
   justify-content: space-around;
@@ -207,6 +211,7 @@ export default {
     background: #f6f6f6;
     margin-left: 2px;
     cursor: pointer;
+    border-radius: 6px;
     &:hover {
       background: #edf9ff;
       svg {

src/page-subspecialty/views/modules/imgEditorFabric/img-editor/zoom.vue

@@ -6,10 +6,10 @@
  * @Description: file content
 -->
 <template>
-  <ButtonGroup>
-    <Button icon="el-icon-zoom-in" size="small" @click="big">放大</Button>
-    <Button icon="el-icon-zoom-out" size="small" @click="small">缩小</Button>
-    <Button size="small" @click="rSet">还原</Button>
+  <ButtonGroup class="zoom">
+    <Button icon="el-icon-zoom-in" size="medium" @click="big">放大</Button>
+    <Button icon="el-icon-zoom-out" size="medium" @click="small">缩小</Button>
+    <Button size="medium" @click="rSet">还原</Button>
   </ButtonGroup>
 </template>
 
@@ -40,8 +40,7 @@ export default {
   methods: {
     rSet() {
       this.canvas.c.zoomToPoint(
-        new this.fabric.Point(this.canvas.c.getWidth() / 2, this.canvas.c.getHeight() / 2),
-			  1
+        new this.fabric.Point(this.canvas.c.getWidth() / 2, this.canvas.c.getHeight() / 2), 1
       )
       this.zoom = `${Math.round(100)}%`
     },
@@ -49,8 +48,7 @@ export default {
       let zoomRatio = this.canvas.c.getZoom()
       zoomRatio += 0.05
       this.canvas.c.zoomToPoint(
-        new this.fabric.Point(this.canvas.c.getWidth() / 2, this.canvas.c.getHeight() / 2),
-			  zoomRatio
+        new this.fabric.Point(this.canvas.c.getWidth() / 2, this.canvas.c.getHeight() / 2), zoomRatio
       )
       this.zoom = `${Math.round(zoomRatio * 100)}%`
     },
@@ -58,8 +56,7 @@ export default {
       let zoomRatio = this.canvas.c.getZoom()
       zoomRatio -= 0.05
       this.canvas.c.zoomToPoint(
-        new this.fabric.Point(this.canvas.c.getWidth() / 2, this.canvas.c.getHeight() / 2),
-			  zoomRatio
+        new this.fabric.Point(this.canvas.c.getWidth() / 2, this.canvas.c.getHeight() / 2), zoomRatio
       )
       this.zoom = `${Math.round(zoomRatio * 100)}%`
     }
@@ -67,4 +64,7 @@ export default {
 }
 </script>
 <style scoped lang="less">
+.zoom{
+  margin: 10px;
+}
 </style>

src/page-subspecialty/views/modules/imgEditorFabric/index.vue

@@ -1,17 +1,16 @@
 <template>
   <div class="home">
     <div>
-      <div v-if="show" style="display: flex;justify-content: space-between;align-items: center;margin-bottom: 10px">
-        <!-- 对齐方式 -->
-        <zoom />
+      <div v-if="show" class="img_header">
+        <div style="font-size: 20px; font-weight: bold">眼底绘图</div>
         <div>
           <save @fullImgBack="fullImgBack" />
           <el-button size="small" @click="closeDialog">关闭</el-button>
         </div>
       </div>
-      <div style=" display: flex; height: calc(100vh - 120px);">
+      <div style=" display: flex; height: calc(100vh - 70px);">
         <div style="width: 380px; height: 100%; background:#fff; display: flex">
-          <el-tabs v-model="menuActive" tab-position="left" style="height: 200px;">
+          <el-tabs v-model="menuActive" tab-position="left">
             <el-tab-pane label="元素" name="2" />
             <el-tab-pane label="背景" name="3" />
             <el-tab-pane label="画笔" name="4" />
@@ -28,40 +27,35 @@
               </div>
             </template>
             <!-- 画笔设置 -->
-            <div v-show="menuActive === '4'">
-              <div style="display: inline-block; margin-left: 10px">
-                <button id="drawing-mode" class="btn btn-info">Cancel drawing mode</button><br>
-                <button id="clear-canvas" class="btn btn-info">Clear</button><br>
-
-                <div id="drawing-mode-options">
-                  <label for="drawing-mode-selector">Mode:</label>
-                  <select id="drawing-mode-selector">
-                    <option>Pencil</option>
-                    <!--                    <option>Circle</option>-->
-                    <!--                    <option>Spray</option>-->
-                    <!--                    <option>Pattern</option>-->
-
-                    <!--                    <option>hline</option>-->
-                    <!--                    <option>vline</option>-->
-                    <!--                    <option>square</option>-->
-                    <option>diamond</option>
-                    <!--                    <option>texture</option>-->
-                  </select><br>
-
-                  <label for="drawing-line-width">Line width:</label>
-                  <span class="info">30</span><input id="drawing-line-width" type="range" value="30" min="30" max="150"><br>
-
-                  <label for="drawing-color">Line color:</label>
-                  <input id="drawing-color" type="color" value="#005E7A"><br>
-
-                  <label for="drawing-shadow-color">Shadow color:</label>
-                  <input id="drawing-shadow-color" type="color" value="#005E7A"><br>
-
-                  <label for="drawing-shadow-width">Shadow width:</label>
-                  <span class="info">0</span><input id="drawing-shadow-width" type="range" value="0" min="0" max="50"><br>
-
-                  <label for="drawing-shadow-offset">Shadow offset:</label>
-                  <span class="info">0</span><input id="drawing-shadow-offset" type="range" value="0" min="0" max="50"><br>
+            <div v-show="menuActive === '4'" class="left-panel">
+              <div style="display: inline-block">
+                <el-button type="primary" class="btn btn-info" size="small" @click="changeDrawing">{{ controlBtn }}</el-button>
+
+                <div v-if="controlDrawing">
+                  <div class="drawing_item" style="display: flex">
+                    <span for="drawing-mode-selector">风格:</span>
+                    <el-select id="drawing-mode-selector" v-model="model" class="modeStyle" style="flex: 1" @change="changeModel">
+                      <el-option :value="'Pencil'">Pencil</el-option>
+                      <el-option :value="'钻石'">钻石</el-option>
+                    </el-select>
+                  </div>
+
+                  <div class="drawing_item">
+                    <div for="drawing-line-width">线条宽度:<span class="info">{{ lineWidth }}</span></div>
+                    <el-slider v-model="lineWidth" :min="0" :max="150" @change="changeLineWidth" />
+                    <input id="drawing-line-width" type="range" value="30" min="0" max="150">
+                  </div>
+
+                  <div class="drawing_item" style="display: flex;align-items: center">
+                    <div for="drawing-color">线条颜色:</div>
+                    <el-input id="drawing-color" class="toolStyle" type="color" value="#FF0000" />
+                  </div>
+
+                  <!--                  <div class="drawing_item" style="display: flex;align-items: center">-->
+                  <!--                    <div>橡皮擦:</div>-->
+                  <!--                    <el-button @click="setEarser">橡皮擦</el-button>-->
+                  <!--                  </div>-->
+
                 </div>
               </div>
             </div>
@@ -72,9 +66,10 @@
           <div class="canvas-box">
             <canvas id="canvas" />
           </div>
+          <zoom />
         </div>
         <!-- 属性区域 -->
-        <div style="width: 380px; height: 100%; padding:10px; overflow-y: auto; background:#fff">
+        <div class="rightTools">
           <layer v-if="show" />
         </div>
       </div>
@@ -100,6 +95,7 @@ import layer from '@/page-subspecialty/views/modules/imgEditorFabric/img-editor/
 import EventHandle from '@/utils/eventHandler'
 
 import { fabric } from 'fabric'
+import 'fabric/src/mixins/eraser_brush.mixin'
 
 // 对齐辅助线
 import initAligningGuidelines from '@/core/initAligningGuidelines'
@@ -133,7 +129,11 @@ export default {
     return {
       menuActive: '4',
       show: false,
-      select: null
+      select: null,
+      model: '钻石',
+      controlBtn: '取消绘图模式',
+      controlDrawing: true,
+      lineWidth: 30
     }
   },
   mounted() {
@@ -149,6 +149,7 @@ export default {
     initControls(canvas.c)
     this.$nextTick(() => {
       this.setBrush()
+      this.changeModel('钻石')
     })
   },
   methods: {
@@ -158,33 +159,10 @@ export default {
     closeDialog() {
       this.$emit('closeDialog')
     },
-    setBrush() {
+    // 改变画笔样式
+    changeModel(value, canvas = this.canvas) {
       var $ = function(id) { return document.getElementById(id) }
-      var canvas = this.canvas
-      fabric.Object.prototype.transparentCorners = false
-
-      var drawingModeEl = $('drawing-mode')
-      var drawingOptionsEl = $('drawing-mode-options')
       var drawingColorEl = $('drawing-color')
-      var drawingShadowColorEl = $('drawing-shadow-color')
-      var drawingLineWidthEl = $('drawing-line-width')
-      var drawingShadowWidth = $('drawing-shadow-width')
-      var drawingShadowOffset = $('drawing-shadow-offset')
-      var clearEl = $('clear-canvas')
-
-      clearEl.onclick = function() { canvas.clear() }
-
-      drawingModeEl.onclick = function() {
-        canvas.isDrawingMode = !canvas.isDrawingMode
-        if (canvas.isDrawingMode) {
-          drawingModeEl.innerHTML = 'Cancel drawing mode'
-          drawingOptionsEl.style.display = ''
-        } else {
-          drawingModeEl.innerHTML = 'Enter drawing mode'
-          drawingOptionsEl.style.display = 'none'
-        }
-      }
-
       if (fabric.PatternBrush) {
         var vLinePatternBrush = new fabric.PatternBrush(canvas)
         vLinePatternBrush.getPatternSrc = function() {
@@ -262,39 +240,58 @@ export default {
         var texturePatternBrush = new fabric.PatternBrush(canvas)
         texturePatternBrush.source = img
       }
-
-      $('drawing-mode-selector').onchange = function() {
-        if (this.value === 'hline') {
+      if (value === 'hline') {
         canvas.freeDrawingBrush = vLinePatternBrush
-        } else if (this.value === 'vline') {
+      } else if (value === 'vline') {
         canvas.freeDrawingBrush = hLinePatternBrush
-        } else if (this.value === 'square') {
+      } else if (value === 'square') {
         canvas.freeDrawingBrush = squarePatternBrush
-        } else if (this.value === 'diamond') {
+      } else if (value === '钻石') {
         canvas.freeDrawingBrush = diamondPatternBrush
-        } else if (this.value === 'texture') {
+      } else if (value === 'texture') {
         canvas.freeDrawingBrush = texturePatternBrush
       } else {
-          canvas.freeDrawingBrush = new fabric[this.value + 'Brush'](canvas)
+        canvas.freeDrawingBrush = new fabric[value + 'Brush'](canvas)
       }
-
       if (canvas.freeDrawingBrush) {
         var brush = canvas.freeDrawingBrush
         brush.color = drawingColorEl.value
         if (brush.getPatternSrc) {
           brush.source = brush.getPatternSrc.call(brush)
         }
-          brush.width = parseInt(drawingLineWidthEl.value, 10) || 1
-          brush.shadow = new fabric.Shadow({
-            blur: parseInt(drawingShadowWidth.value, 10) || 0,
-            offsetX: 0,
-            offsetY: 0,
-            affectStroke: true,
-            color: drawingShadowColorEl.value
-          })
+        brush.width = parseInt(this.lineWidth, 10) || 1
       }
+    },
+    // setEarser() {
+    //   // canvas.isDrawingMode = true // 启用绘图模式
+    //
+    //   // 设置橡皮擦样式
+    //   canvas.freeDrawingBrush = new fabric.PencilBrush(canvas)
+    //   canvas.freeDrawingBrush.color = 'rgba(0,0,0,0)' // 设置颜色为透明
+    //   canvas.freeDrawingBrush.width = 20 // 设置橡皮擦的大小
+    // },
+    // 打开或关闭绘画模式
+    changeDrawing() {
+      this.canvas.isDrawingMode = !this.canvas.isDrawingMode
+      if (this.canvas.isDrawingMode) {
+        this.controlBtn = '取消绘图模式'
+        this.controlDrawing = true
+      } else {
+        this.controlBtn = '开启绘图模式'
+        this.controlDrawing = false
       }
+    },
+    // 改变线宽
+    changeLineWidth(value) {
+      this.lineWidth = value
+      this.canvas.freeDrawingBrush.width = parseInt(this.lineWidth, 10) || 1
+    },
+    setBrush() {
+      var $ = function(id) { return document.getElementById(id) }
+      var canvas = this.canvas
+      fabric.Object.prototype.transparentCorners = false
 
+      var drawingColorEl = $('drawing-color')
       drawingColorEl.onchange = function() {
         var brush = canvas.freeDrawingBrush
         brush.color = this.value
@@ -302,34 +299,10 @@ export default {
           brush.source = brush.getPatternSrc.call(brush)
         }
       }
-      drawingShadowColorEl.onchange = function() {
-        canvas.freeDrawingBrush.shadow.color = this.value
-      }
-      drawingLineWidthEl.onchange = function() {
-        canvas.freeDrawingBrush.width = parseInt(this.value, 10) || 1
-        this.previousSibling.innerHTML = this.value
-      }
-      drawingShadowWidth.onchange = function() {
-        canvas.freeDrawingBrush.shadow.blur = parseInt(this.value, 10) || 0
-        this.previousSibling.innerHTML = this.value
-      }
-      drawingShadowOffset.onchange = function() {
-        canvas.freeDrawingBrush.shadow.offsetX = parseInt(this.value, 10) || 0
-        canvas.freeDrawingBrush.shadow.offsetY = parseInt(this.value, 10) || 0
-        this.previousSibling.innerHTML = this.value
-      }
-
       if (canvas.freeDrawingBrush) {
         canvas.freeDrawingBrush.color = drawingColorEl.value
         canvas.freeDrawingBrush.source = canvas.freeDrawingBrush.getPatternSrc && canvas.freeDrawingBrush.getPatternSrc.call(this)
-        canvas.freeDrawingBrush.width = parseInt(drawingLineWidthEl.value, 10) || 1
-        canvas.freeDrawingBrush.shadow = new fabric.Shadow({
-          blur: parseInt(drawingShadowWidth.value, 10) || 0,
-          offsetX: 0,
-          offsetY: 0,
-          affectStroke: true,
-          color: drawingShadowColorEl.value
-        })
+        canvas.freeDrawingBrush.width = parseInt(this.lineWidth, 10) || 1
       }
       var mainScriptEl = document.getElementById('main')
       if (!mainScriptEl) return
@@ -357,16 +330,70 @@ export default {
 }
 </script>
 <style lang="scss" scoped>
+.toolStyle{
+  flex: 1;
+  margin-left: 10px;
+  background: none;
+  ::v-deep .el-input__inner{
+    border: 0 !important;
+    background-color: #29292a !important;
+  }
+}
+.modeStyle{
+  margin-left:10px;
+  ::v-deep .el-input__inner{
+    border-radius: 5px;
+    overflow: hidden !important;
+  }
+}
 
+input{
+  margin-right: 5px;
+}
+::v-deep .el-tabs--left{
+  background: #151515;
+  color: #fff;
+}
+::v-deep .el-tabs__nav-wrap.is-right::after{
+  background: #151515;
+}
+::v-deep .el-tabs__item{
+  color: #fff;
+}
+::v-deep .el-tabs__item.is-active{
+  color: #409EFF;
+}
+::v-deep .el-tabs__nav-wrap.is-left::after{
+  background: #151515 !important;
+}
 ::v-deep .ivu-layout-header {
   padding: 0 10px;
 }
 .home,.ivu-layout{
-  height: calc( 100vh - 70px );
+  height: calc( 100vh - 30px );
+}
+.img_header{
+  padding: 10px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  background: #515a6e;
+  color: #fff;
+}
+.info{
+  margin-left: 10px;
 }
 .icon{
   display: block;
 }
+.rightTools{
+  width: 380px;
+  height: 100%;
+  padding:10px;
+  overflow-y: auto;
+  background:#fff;
+  background: #29292a;
+}
 .canvas-box{
   position: absolute;
   top: 50%;
@@ -380,7 +407,16 @@ export default {
   background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAHUlEQVQ4jWNgYGAQIYAJglEDhoUBg9+FowbQ2gAARjwKARjtnN8AAAAASUVORK5CYII=");
   background-size: 30px 30px;
 }
+.left-panel{
+  padding: 10px;
+}
+.drawing_item{
+  margin: 10px 0;
+  font-size: 16px;
+}
 .content{
+  background: #29292a;
+  color: #fff;
   flex: 1;
   width: 200px;
   padding:10px;

src/page-subspecialty/views/modules/nurseManagement/reservation/subList/index.vue

@@ -43,11 +43,12 @@
         </div>
         <div>
           <el-button type="primary" icon="el-icon-edit" size="small" @click="changeOrder">改约</el-button>
-          <el-button type="primary" icon="el-icon-edit" size="small" @click="changeOrder">打印</el-button>
+          <el-button v-print="'#multipleTable'" type="primary" icon="el-icon-edit" size="small">打印</el-button>
         </div>
       </div>
       <div class="scheduled-patient-content">
         <el-table
+          id="multipleTable"
           ref="multipleTable"
           :data="dataList"
           tooltip-effect="dark"