gunter-kgd 1.0.12 → 1.0.13

package/components/gante_test/gante-gc-item-content.vue

@@ -11,10 +11,11 @@
                     width:current_data.width?current_data.width+'px':0,
                     transform: `translate3d(${current_data.left?current_data.left+'px':0},15px,0)`,
                     transition: !DragObject.mouseDown ? 'width .5s linear, opacity .2s ease' : 'null',
-                    background:current_data.bg_color?current_data.bg_color:'#FD8A25',
+                    background: progressColor,
                     borderColor: current_data.bg_color ? `${current_data.bg_color} ${current_data.bg_color} transparent`: '#00b0ff #00b0ff transparent'}"
         class="ganteview-item" :class="{'has-child': current_data.children}">
-      <span class="ganteview-item__label"></span>
+      <div class="ganteview-item__progress" :style="{width: progressWidth, background: taskBackground}"></div>
+      <span class="ganteview-item__label">{{ progressText }}</span>
         <span v-show="current_data.show_drag" @mousedown.stop="dragDown($event,'left')"  data-drag="true" class="left-drag-line"></span>
         <span v-show="current_data.show_drag" @mousedown.stop="dragDown($event,'right')" data-drag="true" class="right-drag-line"></span>
         <div  v-show="current_data.show_drag" data-drag="true" class="ganter_drag_hover"></div>
@@ -35,6 +36,7 @@
                 justDragged: false,
                 DragObject:{
                     startX: 0, // 开始的位置
+                    startY: 0,
                     mouseDown: false,// 是否按下了鼠标
                     scale: 0, // 刻度
                     mode: 1, // 默认以小时为单位 1:小时 2 ：天
@@ -45,6 +47,7 @@
                     startAttr: null,// 开始时间的属性名
                     endAttr: null,// 结束时间的属性名
                     move_type: null, // 拖动的方式 left: 拖动左边时间 right: 拖动右边时间  drag： 拖动整体
+                    moved: false,
                 }
             }
         },
@@ -63,6 +66,29 @@
                 const start = this.current_data && this.current_data.start_time
                 const end = this.current_data && this.current_data.end_time
                 return Number(start) > 0 && Number(end) > 0
+            },
+            progressValue(){
+                if(!this.current_data){
+                    return 0
+                }
+                const raw = this.current_data.progress
+                const num = Number(raw)
+                if(Number.isNaN(num)){
+                    return 0
+                }
+                return Math.max(0, Math.min(100, num))
+            },
+            progressWidth(){
+                return `${this.progressValue}%`
+            },
+            progressText(){
+                return `${this.progressValue}%`
+            },
+            progressColor(){
+              return this.current_data && this.current_data.bg_color ? this.current_data.bg_color : '#989b9c'
+            },
+            taskBackground(){
+                return this.current_data && this.current_data.task_color ? this.current_data.task_color : '#d6721f'
             }
         },
         methods:{
@@ -159,7 +185,13 @@
                             toast.style.left = x + 'px'
                             toast.style.top = y + 'px'
                             if (add_toast) {
-                                document.getElementsByTagName('body')[0].appendChild(toast)
+                                const host = document.fullscreenElement || document.getElementsByTagName('body')[0]
+                                host.appendChild(toast)
+                            } else if (document.fullscreenElement) {
+                                const host = document.fullscreenElement
+                                if (toast.parentNode !== host) {
+                                    host.appendChild(toast)
+                                }
                             }
                         }
                     }
@@ -193,9 +225,11 @@
                         this.justDragged = false;
                         this.DragObject.mouseDown = true;
                         this.DragObject.startX = e.clientX;
+                        this.DragObject.startY = e.clientY;
                         this.DragObject.move_type = type;
                         this.DragObject.start_width = this.current_data.width;
                         this.DragObject.start_left = this.current_data.left;
+                        this.DragObject.moved = false;
                         for (let i in this.th_data) {
                             if (this.current_data.params[i] != undefined) {
                                 if(this.th_data[i].time_mode == 1){
@@ -230,6 +264,14 @@
             // 拖动时间
             doc_move(e){
                 if(this.DragObject.mouseDown){
+                    const moveX = Math.abs(e.clientX - this.DragObject.startX)
+                    const moveY = Math.abs(e.clientY - this.DragObject.startY)
+                    if(!this.DragObject.moved){
+                        if(moveX + moveY < 3){
+                            return;
+                        }
+                        this.DragObject.moved = true;
+                    }
                     this.justDragged = true;
                     this.hideToast();
                     let move_mode_width = 0, // 宽度基值
@@ -260,8 +302,7 @@
                             move_mode_width = -1
                         }
                     }
-                    let moveX = Math.abs(e.clientX - this.DragObject.startX), // 移动的距离
-                        move_unit = move_mode_width * (Math.ceil(moveX/this.DragObject.scale)), // 移动的时间
+                    let move_unit = move_mode_width * (Math.ceil(moveX/this.DragObject.scale)), // 移动的时间
                         time_mode = 60*60*1000 // 时间类型
                     let start_time = this.DragObject.start_time,
                         end_time = this.DragObject.end_time
@@ -336,7 +377,7 @@
                 document.removeEventListener('mouseup',this.doc_up,false);
                 document.body.classList.remove('unselecttable');
                 document.body.style.cursor = null;
-                if(this.DragObject.startX != e.clientX){
+                if(this.DragObject.moved){
                     emitter.$emit('onDragChangeTime',
                         {
                             gunter_id: this.current_data.gunter_id,
@@ -351,6 +392,7 @@
                 }
                 this.DragObject = {
                     startX: 0, // 开始的位置
+                    startY: 0,
                     mouseDown: false,// 是否按下了鼠标
                     scale: 0, // 刻度
                     mode: 1, // 默认以小时为单位 1:小时 2 ：天
@@ -361,6 +403,7 @@
                     startAttr: null,// 开始时间的属性名
                     endAttr: null,// 结束时间的属性名
                     move_type: null,
+                    moved: false,
                 };
                 this.hideToast();
                 if(this.justDragged){
@@ -385,11 +428,23 @@
         /*transition: width .5s linear, opacity .2s ease;*/
         opacity: 0.5;
         position: relative;
+        display: flex;
+        align-items: center;
+        .ganteview-item__progress{
+            position: absolute;
+            left: 0;
+            top: 0;
+            height: 100%;
+            border-radius: 3px;
+            z-index: 0;
+        }
         .ganteview-item__label{
             display: block;
             white-space: nowrap;
             overflow: hidden;
             text-overflow: ellipsis;
+            position: relative;
+            z-index: 1;
         }
         .left-drag-line,.right-drag-line{
             position: absolute;

package/components/gante_test/gante-gc.vue

@@ -241,31 +241,41 @@
                 var list = [];
                 if (time_mode == 1) {
                     const dayMs = 24 * 60 * 60 * 1000;
+                    const weekMs = 7 * dayMs;
+                    const firstDay = new Date(this.first_day);
                     let cursor = new Date(first_time);
+                    const offset = (cursor.getDay() + 6) % 7;
+                    cursor = new Date(cursor.getFullYear(), cursor.getMonth(), cursor.getDate() - offset);
                     while (cursor.getTime() <= all_width) {
-                        const monthEnd = new Date(cursor.getFullYear(), cursor.getMonth() + 1, 1);
-                        const remainingDays = Math.ceil((monthEnd.getTime() - cursor.getTime()) / dayMs);
-                        if (remainingDays < 7 && list.length) {
-                            const prev = list[list.length - 1];
-                            const extraWidth = (monthEnd.getTime() - cursor.getTime()) / time;
-                            prev.width += extraWidth;
-                            this.header_width += extraWidth;
-                            cursor = monthEnd;
-                            continue;
+                        const weekStart = cursor;
+                        const weekEnd = new Date(weekStart.getTime() + weekMs);
+                        let partStart = weekStart;
+                        if (partStart.getTime() < firstDay.getTime()) {
+                            partStart = new Date(firstDay);
                         }
-                        let next = new Date(cursor.getFullYear(), cursor.getMonth(), cursor.getDate() + 7);
-                        if (next.getTime() > monthEnd.getTime()) {
-                            next = monthEnd;
+                        let partEnd = weekEnd;
+                        if (partEnd.getTime() > all_width) {
+                            partEnd = new Date(all_width);
                         }
-                        const width = (next.getTime() - cursor.getTime()) / time;
+                        if (partEnd.getTime() <= partStart.getTime()) {
+                            break;
+                        }
+                        const monthBoundary = new Date(partStart.getFullYear(), partStart.getMonth() + 1, 1);
+                        let labelDate = partStart;
+                        if (monthBoundary.getTime() > partStart.getTime() && monthBoundary.getTime() < partEnd.getTime()) {
+                            const beforeDays = Math.round((monthBoundary.getTime() - partStart.getTime()) / dayMs);
+                            const afterDays = Math.round((partEnd.getTime() - monthBoundary.getTime()) / dayMs);
+                            labelDate = afterDays > beforeDays ? monthBoundary : partStart;
+                        }
+                        const width = (partEnd.getTime() - partStart.getTime()) / time;
                         this.header_width += width;
                         list.push({
-                            left: (cursor.getTime() - this.first_day.getTime()) / time,
+                            left: (partStart.getTime() - this.first_day.getTime()) / time,
                             width: width,
-                            date: this.format(cursor, 2)
+                            date: this.format(labelDate, 2)
                         });
-                        cursor = next;
-                        this.future_time = cursor.getTime();
+                        cursor = weekEnd;
+                        this.future_time = partEnd.getTime();
                     }
                 } else if (time_mode == 2) {
                     const weekMs = 7 * 24 * 60 * 60 * 1000;
@@ -372,13 +382,13 @@
                     //  | `4`   | 星期四  |
                     //  | `5`   | 星期五  |
                     //  | `6`   | 星期六  |
-                      if (old_time.getDay() == 0 || old_time.getDay() == 6) {
-                            is_rest = true
-                        }
+                    //   if (old_time.getDay() == 0 || old_time.getDay() == 6) {
+                    //         is_rest = true
+                    //     }
                     } else if (mode == 2) {
                         first_time = new Date(first_time.getFullYear(), first_time.getMonth(), first_time.getDate() + 7)
                         const weekNumber = this.get_week_number(old_time)
-                        date = `W${weekNumber}`
+                        date = `第${weekNumber}周`
                         title = this.format(old_time, 1) + '~' + this.format(new Date(first_time.getFullYear(), first_time.getMonth(), first_time.getDate() - 1), 1)
                     } else if (mode == 3) {
                         first_time = new Date(first_time.getFullYear(), first_time.getMonth() + 1, 1)

package/components/gante_test/gante-split.vue

@@ -1,6 +1,6 @@
 <!--中间分割线，分割左侧表格和右侧图表-->
 <template>
-	<div @mousedown="down"  ref="split_liu" :style="{left:Number(left)?left+'px':left}" class="gante-split-liu">
+	<div @mousedown.prevent="down" ref="split_liu" :style="{left:Number(left)?left+'px':left}" class="gante-split-liu">
 		<div v-show="show_split" :style="{left:split_resize_left+'px'}" class="gante-split-liu-resize"></div>
 	</div>
 </template>

package/components/gante_test/gante-table.vue

@@ -232,6 +232,7 @@
 					this.tTD.current_index = target.dataset.key //记录拖动的是哪个th
 					this.proxy_left = this.oldx+3 //必须要加上3像素,不然拖动会有问题
 					this.tTD.mouseDown = true
+                    document.getElementsByTagName('body')[0].classList.add('unselecttable')
                     // 给document绑定事件
 					document.addEventListener('mousemove',this.doc_move,{passive:false})
 					document.addEventListener('mouseup',this.doc_up,{passive:false})
@@ -267,6 +268,7 @@
 					this.oldx = 0
 					this.old_width = 0
 					this.tTD.current_index = null
+                    document.getElementsByTagName('body')[0].classList.remove('unselecttable')
 					// 给document移除绑定事件
 					document.removeEventListener('mousemove',this.doc_move,false)
 					document.removeEventListener('mouseup',this.doc_up,false)

package/components/gante_test/gante.vue

@@ -10,6 +10,10 @@
                 class="gante-dropdown"
                 @input="(val)=> trickMode(val)"
             ></dropdown>
+            <div @click="toFullScreen" class="fullScreen">
+              <img v-if="fullScreen" src="../../assets/outScreen.png" alt="">
+              <img v-else src="../../assets/fullScreen.png" alt="">
+            </div>
 
           </div>
             <!--左边表格-->
@@ -460,7 +464,7 @@
         box-sizing: border-box;
         .gante-menu{
           position: absolute;
-          right: 20px;
+          right: 40px;
           top: 55px;
           display: flex;
           align-items: center;

package/components/gante_test/gante_op.js

@@ -34,9 +34,10 @@ export default {
     methods: {
         // 回到今天
         toToday(){
-            let today = document.getElementById('today-ganteview-column');
-            let ganteview = document.getElementsByClassName('ganteview')[0];
-            if(ganteview){
+            const container = this.$refs && this.$refs.gante_box ? this.$refs.gante_box : this.$el;
+            const today = container ? container.querySelector('#today-ganteview-column') : null;
+            const ganteview = container ? container.querySelector('.ganteview') : null;
+            if(ganteview && today){
                 let left = today.offsetLeft - ganteview.clientHeight/2;
                 if(left<0){
                     left = 0
@@ -65,7 +66,7 @@ export default {
         },
         //全屏 退出全屏
         toFullScreen(){
-            let element = document.documentElement;
+            let element = this.$refs && this.$refs.gante_box ? this.$refs.gante_box : this.$el;
             // 判断是否已经是全屏
             // 如果是全屏，退出
             if (this.fullScreen) {

package/gante.vue

@@ -10,7 +10,10 @@
                 class="gante-dropdown"
                 @input="(val)=> trickMode(val)"
             ></dropdown>
-
+            <div @click="toFullScreen" class="fullScreen">
+              <img v-if="fullScreen" src="../../assets/outScreen.png" alt="">
+              <img v-else src="../../assets/fullScreen.png" alt="">
+            </div>
           </div>
             <!--左边表格-->
             <div :style="{width: Number(tabe_width)? tabe_width+'px' : tabe_width }" class="gante-table-box">
@@ -474,7 +477,7 @@
         box-sizing: border-box;
         .gante-menu{
           position: absolute;
-          right: 20px;
+          right: 40px;
           top: 55px;
           display: flex;
           align-items: center;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "gunter-kgd",
-  "version": "1.0.12",
+  "version": "1.0.13",
   "main": "gante-vue.common.js",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1"