29271

src/apps/AppIntelligentSecurity/components/Timeline.vue

@@ -1,19 +1,8 @@
 <template>
   <div :class="wrapper" class="canvas" v-if="isInit" style="height: 52px">
-    <canvas
-      class="canvas"
-      :id="id"
-      :canvas-id="id"
-      :style="{width: canvasWidth + 'px', height: canvasHeight + 'px'}"
-      v-if="canvasWidth"
-      :width="canvasWidth"
-      @click.stop="onClick"
-      :height="canvasHeight">
+    <canvas class="canvas" :id="id" :canvas-id="id" :style="{width: canvasWidth + 'px', height: canvasHeight + 'px'}" v-if="canvasWidth" :width="canvasWidth" @click.stop="onClick" :height="canvasHeight">
     </canvas>
-    <img
-      class="drag-img"
-      :style="{left: x + 'px'}"
-      src="https://cdn.cunwuyun.cn/slw2.0/images/drag.png" />
+    <img class="drag-img" :style="{left: x + 'px'}" src="https://cdn.cunwuyun.cn/slw2.0/images/drag.png" />
   </div>
 </template>
 
@@ -23,20 +12,20 @@
 
     data () {
       return {
+        x: 0,
+        id: `timeline-${new Date().getTime()}`,
         ctx: null,
-        canvasWidth: '',
-        canvasHeight: '',
-        scale: 4,
         time: '',
         left: 0,
-        x: 0,
+        timer: null,
+        scale: 4,
         ratioW: '',
         isHide: true,
         isInit: false,
         isChoose: false,
         wrapper: `canvas-${new Date().getTime()}`,
-        id: `timeline-${new Date().getTime()}`,
-        timer: null
+        canvasWidth: '',
+        canvasHeight: ''
       }
     },