gunter-kgd 1.0.11 → 1.0.13

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

@@ -9,12 +9,13 @@
         :style="{
                     cursor: DragObject.mouseDown ? 'grabbing' : 'grab',
                     width:current_data.width?current_data.width+'px':0,
-                    transform: `translate3d(${current_data.left?current_data.left+'px':0},10px,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:{
@@ -82,7 +108,7 @@
             buildToastContent() {
                 if (!this.current_data || !this.current_data.params) {
                     this.toastClassResolved = (this.toastClass || '').trim();
-                    return '';
+                    return { content: '', canShow: false };
                 }
                 let list = '';
                 for (let i in this.th_data) {
@@ -114,7 +140,8 @@
                 }
 
                 this.toastClassResolved = resolvedClass;
-                return resolvedContent;
+                const canShow = resolvedContent !== '';
+                return { content: resolvedContent, canShow };
             },
             showToast(e) {
                 this.canShow = true;
@@ -124,7 +151,14 @@
                     if(this.current_data && this.canShow){
                         if(this.current_data.params){
                             let toast = document.createElement('div'), add_toast = true
-                            const content = this.buildToastContent();
+                            const toastInfo = this.buildToastContent();
+                            if(!toastInfo.canShow){
+                                if (document.getElementsByClassName('gante-toast-liu')[0]) {
+                                    document.getElementsByClassName('gante-toast-liu')[0].style.display = 'none';
+                                }
+                                return;
+                            }
+                            const content = toastInfo.content;
                             const toastClass = `gante-toast-liu${this.toastClassResolved ? ' ' + this.toastClassResolved : ''}`
                             toast.setAttribute('class', toastClass)
                             if (document.getElementsByClassName('gante-toast-liu')[0]) {
@@ -151,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)
+                                }
                             }
                         }
                     }
@@ -185,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){
@@ -222,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, // 宽度基值
@@ -252,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
@@ -300,9 +349,14 @@
                     if (document.getElementsByClassName('gante-toast-liu')[0]) {
                         toast = document.getElementsByClassName('gante-toast-liu')[0]
                         toast.style.display = 'block';
-                        const content = this.buildToastContent();
-                        if(toast.innerHTML != content || content == ''){
-                            toast.innerHTML = content
+                        const toastInfo = this.buildToastContent();
+                        if(!toastInfo.canShow){
+                            toast.style.display = 'none';
+                            return;
+                        }
+                        const content = toastInfo.content;
+                        if(toast.innerHTML != content){
+                            toast.innerHTML = content;
                         }
                     }
                 }
@@ -323,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,
@@ -338,6 +392,7 @@
                 }
                 this.DragObject = {
                     startX: 0, // 开始的位置
+                    startY: 0,
                     mouseDown: false,// 是否按下了鼠标
                     scale: 0, // 刻度
                     mode: 1, // 默认以小时为单位 1:小时 2 ：天
@@ -348,6 +403,7 @@
                     startAttr: null,// 开始时间的属性名
                     endAttr: null,// 结束时间的属性名
                     move_type: null,
+                    moved: false,
                 };
                 this.hideToast();
                 if(this.justDragged){
@@ -372,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-item.vue

@@ -247,7 +247,7 @@
     }
     .gc-locate-btn{
         position: absolute;
-        top: 9px;
+        top: 13px;
         width: 18px;
         height: 22px;
         border-radius: 4px;

package/components/gante_test/gante-gc.vue

@@ -239,30 +239,119 @@
                 this.todayInfo.left = (new Date(new Date().toLocaleDateString()).getTime() - first_time.getTime())/time;
 
                 var list = [];
-                for (let i = 0; i <= all_width;) {
-                    var old_time = first_time;
-                    var date = '';
+                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 weekStart = cursor;
+                        const weekEnd = new Date(weekStart.getTime() + weekMs);
+                        let partStart = weekStart;
+                        if (partStart.getTime() < firstDay.getTime()) {
+                            partStart = new Date(firstDay);
+                        }
+                        let partEnd = weekEnd;
+                        if (partEnd.getTime() > all_width) {
+                            partEnd = new Date(all_width);
+                        }
+                        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: (partStart.getTime() - this.first_day.getTime()) / time,
+                            width: width,
+                            date: this.format(labelDate, 2)
+                        });
+                        cursor = weekEnd;
+                        this.future_time = partEnd.getTime();
+                    }
+                } else if (time_mode == 2) {
+                    const weekMs = 7 * 24 * 60 * 60 * 1000;
+                    let cursor = new Date(first_time);
+                    while (cursor.getTime() <= all_width) {
+                        const yearEnd = new Date(cursor.getFullYear() + 1, 0, 1);
+                        const remainingWeeks = Math.ceil((yearEnd.getTime() - cursor.getTime()) / weekMs);
+                        if (remainingWeeks < 4 && list.length) {
+                            const prev = list[list.length - 1];
+                            const extraWidth = (yearEnd.getTime() - cursor.getTime()) / time;
+                            prev.width += extraWidth;
+                            this.header_width += extraWidth;
+                            cursor = yearEnd;
+                            continue;
+                        }
+                        let next = new Date(cursor.getFullYear(), cursor.getMonth(), cursor.getDate() + 28);
+                        if (next.getTime() > yearEnd.getTime()) {
+                            next = yearEnd;
+                        }
+                        const width = (next.getTime() - cursor.getTime()) / time;
+                        this.header_width += width;
+                        list.push({
+                            left: (cursor.getTime() - this.first_day.getTime()) / time,
+                            width: width,
+                            date: this.format(cursor, 5)
+                        });
+                        cursor = next;
+                        this.future_time = cursor.getTime();
+                    }
+                } else if (time_mode == 3) {
+                    let cursor = new Date(first_time);
+                    while (cursor.getTime() <= all_width) {
+                        const yearEnd = new Date(cursor.getFullYear() + 1, 0, 1);
+                        const remainingMonths = (yearEnd.getFullYear() - cursor.getFullYear()) * 12 + (yearEnd.getMonth() - cursor.getMonth());
+                        if (remainingMonths < 3 && list.length) {
+                            const prev = list[list.length - 1];
+                            const extraWidth = (yearEnd.getTime() - cursor.getTime()) / time;
+                            prev.width += extraWidth;
+                            this.header_width += extraWidth;
+                            cursor = yearEnd;
+                            continue;
+                        }
+                        let next = new Date(cursor.getFullYear(), cursor.getMonth() + 3, 1);
+                        if (next.getTime() > yearEnd.getTime()) {
+                            next = yearEnd;
+                        }
+                        const width = (next.getTime() - cursor.getTime()) / time;
+                        this.header_width += width;
+                        list.push({
+                            left: (cursor.getTime() - this.first_day.getTime()) / time,
+                            width: width,
+                            date: this.format(cursor, 5)
+                        });
+                        cursor = next;
+                        this.future_time = cursor.getTime();
+                    }
+                } else {
+                    for (let i = 0; i <= all_width;) {
+                        var old_time = first_time;
+                        var date = '';
 
-                    if (time_mode == 1) {
-                        // 月的形式，保留月份显示
-                        date = this.format(old_time, 2); // 格式: YYYY-MM
-                        first_time = new Date(first_time.getFullYear(), first_time.getMonth() + 1, 1);
-                    } else {
                         // 年的形式，只展示年份
                         date = this.format(old_time, 5); // 格式: YYYY
                         first_time = new Date(first_time.getFullYear() + 1, 0, 1);
-                    }
 
-                    var width = (first_time.getTime() - old_time.getTime()) / time;
-                    this.header_width += width;
-                    list.push({
-                        left: (old_time.getTime() - this.first_day.getTime()) / time,
-                        width: width,
-                        date: date
-                    });
+                        var width = (first_time.getTime() - old_time.getTime()) / time;
+                        this.header_width += width;
+                        list.push({
+                            left: (old_time.getTime() - this.first_day.getTime()) / time,
+                            width: width,
+                            date: date
+                        });
 
-                    i = first_time.getTime();
-                    this.future_time = i;
+                        i = first_time.getTime();
+                        this.future_time = i;
+                    }
                 }
 
                 this.top_time_data = list;
@@ -293,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)
@@ -404,6 +493,9 @@
         line-height: 25px;
         position: relative;
         background: #fff;
+        font-size: 14px;
+        font-weight: 800;
+        color: #000000D9;
         /*display: flex;*/
         /*justify-content: flex-start;*/
     }
@@ -415,7 +507,7 @@
 
     .ganteview-toptime .ganteview-headercell {
         padding-left: 4px;
-        text-align: left;
+        text-align: center;
     }
 
     .ganteview-bottomtime .ganteview-headercell {
@@ -437,12 +529,11 @@
         height: calc(100% - 54px);
         z-index: 0;
         box-sizing: border-box;
-        background: #dcecfe;
+        background: #5396e2;
     }
 
     .ganteview-headercell {
         box-sizing: border-box;
-        color: #666;
         border-right: 1px solid #ebeef5;
         border-bottom: 1px solid #ebeef5;
         overflow: hidden;

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)
@@ -332,8 +334,11 @@
 		-ms-user-select: none;
 		user-select: none;
 		text-align: left;
-        background: #fff;
-        box-sizing: border-box;
+    background: #fff;
+    box-sizing: border-box;
+    font-size: 14px;
+    font-weight: 800;
+    color: #000000D9;
 	}
 	/*.gante-tr{*/
 		/*display: table-row;*/

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,12 +477,12 @@
         box-sizing: border-box;
         .gante-menu{
           position: absolute;
-          right: 20px;
+          right: 40px;
           top: 55px;
           display: flex;
           align-items: center;
           justify-content: space-between;
-          z-index: 99999;
+          z-index: 999;
           gap: 10px;
           .today{
             padding: 6px 10px;

package/package.json

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