2022.3.23移动端添加自动计时模块

fhKeeper/formulahousekeeper/timesheet/src/views/project/gantt.vue

@@ -84,7 +84,7 @@ export default {
         years: "年"
     }
 };
-    gantt.config.autosize = true;
+    // gantt.config.autosize = true;
     gantt.config.duration_unit = "hour";
     gantt.config.fit_tasks = true;
       gantt.config.drag_move = false;

fhKeeper/formulahousekeeper/timesheet/src/views/project/list.vue

@@ -50,7 +50,7 @@
                     <!-- <router-link to="/projectGantt"> -->
                         <el-link type="primary" :underline="false" @click="isganttshow = true">甘特图</el-link>
                     <!-- </router-link> -->
-                    <el-dialog v-if="isganttshow" :visible.sync="isganttshow" width="1280px" style="height:90%" class="ganttdialog">
+                    <el-dialog v-if="isganttshow" :visible.sync="isganttshow" width="1480px" top="3vh" style="height:96%" class="ganttdialog">
                         <projectgantt></projectgantt>
                     </el-dialog>
                 </el-form-item>

fhKeeper/formulahousekeeper/timesheet/src/views/project/project_gantt.vue

@@ -4,7 +4,7 @@
     <div class="gantt_head">
       <div class="head_RorX">
         
-      <el-radio-group v-model="radio1" @change="selChange()" size="small" style="margin-left:9px;margin-right:9px">
+      <el-radio-group v-model="radio1" @change="selChange()" size="small" style="margin-right:9px">
         <el-radio-button label="按人员查看" value="renyuan"></el-radio-button>
         <el-radio-button label="按项目查看" value="xiangmu"></el-radio-button>
       </el-radio-group>
@@ -26,15 +26,28 @@
       </div>
       <div class="head_select">
         <span>{{(this.radio1 == "按人员查看" ? "人员" : "项目")}}</span>
-      <el-select v-model="valuex" placeholder="请选择" size="small" style="margin-left:9px;width:120px">
+        <span v-if="!reqpar1">
+      <el-select ref="screenchg1" v-model="valuex" placeholder="请选择" size="small" style="margin-left:9px;width:200px" @change="optupdata()">
         <el-option
-          v-for="item in options"
-          :key="item.value"
-          :label="item.label"
-          :value="item.value"
-          @change="optupdata()">
+          v-for="item in screenList"
+          :key="item.id"
+          :label="item.name"
+          :value="item.id"
+          >
         </el-option>
       </el-select>
+      </span>
+      <span v-if="reqpar1">
+      <el-select ref="screenchg2" v-model="valuex" placeholder="请选择" size="small" style="margin-left:9px;width:200px" @change="optupdata()">
+        <el-option
+          v-for="item in screenList"
+          :key="item.id"
+          :label="item.projectName"
+          :value="item.id"
+          >
+        </el-option>
+      </el-select>
+      </span>
       </div>
     </div>
     <gantt v-if="isDataLoaded" ref="ganttTable1" class="left-container" :tasks="tasks" 
@@ -49,6 +62,7 @@
 </template>
  
 <script>
+import { error } from 'dingtalk-jsapi';
 import Gantt from './gantt.vue';
  
 export default {
@@ -71,7 +85,8 @@ export default {
       radio1:"按人员查看",
       valueDate:[],
       options:[{value:"选项1",label:"全部"},{value:"选项2",label:"人员1"}],
-      valuex:'全部',
+      valuex:'',
+      screenList:[],
 
       // 请求参数
       reqpar1:0,
@@ -93,16 +108,20 @@ export default {
         if (this.radio1 == "按人员查看") {
           this.reqpar1 = 0
           this.getList()
+          this.getScreen()
           // this.tasks1 = this.tasks
           // this.updatakey1 += 1
           // this.isDataLoaded = true
         }else{
           this.reqpar1 = 1
           this.getList()
+          this.getXmScreen()
           // this.tasks2 = this.tasks
           // this.updatakey2 -= 1
           // this.isDataLoaded = false
         }
+        // console.log(this.valuex1);
+        this.valuex == ''
         
         
       },
@@ -123,22 +142,78 @@ export default {
       // 人员/项目筛选改变
       optupdata(){
         this.reqpar3 = this.valuex
+        console.log("reqpar3",this.valuex);
         this.getList()
-        if (this.reqpar1 = 0) {
-          this.updatakey1 += 1
-        } else {
-          this.updatakey2 -= 1
-        }
+        // if (this.reqpar1 = 0) {
+        //   console.log(this.valuex);
+        //   this.getList()
+        //   // this.updatakey1 += 1
+        // } else {
+        //   // this.updatakey2 -= 1
+        // }
+      },
+
+      // 获取人员项目筛选列表
+      getScreen(){
+        this.http.get('/project/getMyUsers',
+            res => {
+              if (res.code == "ok") {
+                this.screenList = res.data
+              }else{
+                this.$message({
+                  message: res.msg,
+                  type: "error"
+                });
+              }
+            },
+            error => {
+              this.$message({
+                message : error,
+                type : "error"
+              })
+            }
+        )
+      },
+      getXmScreen(){
+        this.http.get('/project/getProjectList',
+            res => {
+              if (res.code == "ok") {
+                this.screenList = res.data
+                console.log("screen",this.screenList);
+              }else{
+                this.$message({
+                  message: res.msg,
+                  type: "error"
+                });
+              }
+            },
+            error => {
+              this.$message({
+                message : error,
+                type : "error"
+              })
+            }
+        )
       },
 
       getList() {
-        this.http.post('/project/getGanttData',
-        { type : this.reqpar1 , startDate : this.reqpar2[0] , endDate : this.reqpar2[1] },
+        let getlistcs = {}
+        if (this.valuex != ''){
+          if (!this.reqpar1) {
+            getlistcs = {type : 0 , startDate : this.reqpar2[0] , endDate : this.reqpar2[1], userId : this.reqpar3}
+          }else{
+            getlistcs = {type : 1 , startDate : this.reqpar2[0] , endDate : this.reqpar2[1], projectId : this.reqpar3}
+          }
+        }else{
+          getlistcs = {type : this.reqpar1 , startDate : this.reqpar2[0] , endDate : this.reqpar2[1]}
+        }
+        
+        this.http.post('/project/getGanttData', getlistcs ,
                         res => {
                             if (res.code == "ok") {
                                 this.tasks = {data:res.data};
                                 this.isDataLoaded = true;
-                                console.log("getlist",res.data);
+                                // console.log("getlist",res.data);
                                 
                                 this.$nextTick(()=>{
                                   // if (this.reqpar1 = 0) {
@@ -180,6 +255,7 @@ export default {
     this.reqpar2 = this.valueDate
     console.log("date",this.valueDate);
     this.getList();
+    this.getScreen()
     // this.tasks1 = this.tasks
     this.isDataLoaded = true
   }
@@ -214,7 +290,7 @@ export default {
     width: 30%;
     display: flex;
     align-items: center;
-    justify-content: center;
+    justify-content: left;
   }
   .gantt_head .head_date{
     height: 60px;
@@ -222,7 +298,7 @@ export default {
     width: 35%;
     display: flex;
     align-items: center;
-    justify-content: center;
+    justify-content: left;
   }
   .gantt_head .head_select{
     height: 60px;

fhKeeper/formulahousekeeper/timesheet_h5/package.json

@@ -28,7 +28,7 @@
     "@vue/cli-service": "^4.5.13",
     "amfe-flexible": "^2.2.1",
     "autoprefixer": "^9.8.6",
-    "axios": "^0.18.1",
+    "axios": "^0.26.1",
     "babel-eslint": "^10.1.0",
     "eslint": "^5.16.0",
     "eslint-plugin-vue": "^5.2.3",

fhKeeper/formulahousekeeper/timesheet_h5/src/main.js

@@ -13,13 +13,15 @@ import "@/components/Vant";
 
 import { Form , Toast , Grid, GridItem , DatetimePicker ,
 Picker , Dialog , NumberKeyboard , Sticky , Skeleton ,
-Panel , Divider , List , pullRefresh , SwipeCell, Checkbox, Search, Slider,Stepper,Tag, Calendar, Row, Col, RadioGroup, Radio, Loading } from 'vant';
+Panel , Divider , List , pullRefresh , SwipeCell, Checkbox, 
+Search, Slider,Stepper,Tag, Calendar, Row, Col, RadioGroup, Radio, 
+Loading ,DropdownMenu, DropdownItem,Button} from 'vant';
 
 Vue.use(Form).use(Toast).use(Grid).use(GridItem).use(DatetimePicker)
 .use(Picker).use(Dialog).use(NumberKeyboard).use(Sticky).use(Skeleton)
 .use(Panel).use(Divider).use(List).use(pullRefresh).use(SwipeCell)
 .use(Checkbox).use(Search).use(Slider).use(Stepper).use(Tag).use(Calendar).use(RadioGroup).use(Radio)
-.use(Row).use(Col).use(Loading);
+.use(Row).use(Col).use(Loading).use(DropdownMenu).use(DropdownItem).use(Button);
 
 // rem
 import "amfe-flexible";

fhKeeper/formulahousekeeper/timesheet_h5/src/router/index.js

@@ -123,6 +123,13 @@ const router = new Router({
         },
         component: () => import("@/views/test/list")
     },
+    {
+        path: "/timetool",
+        meta: {
+            title: "自动计时"
+        },
+        component: () => import("@/views/timetool/timetool")
+    },
     {
         path: "/my",
         component: () => import("@/views/my/index"),

fhKeeper/formulahousekeeper/timesheet_h5/src/views/index/index.vue

@@ -169,7 +169,17 @@
             if (localStorage.userInfo != null) {
                 this.getAccountInfo();
             }
-            
+            this.routers.push({
+                                name: '自动计时',
+                                url: '/timetool',
+                                icon: 'clock-o',
+                                info: this.unreadNum
+                            });
+            this.getMessage();
+            this.bindIfNessary();
+            if (localStorage.userInfo != null) {
+                this.getAccountInfo();
+            }
         },
         components: {
             Footer

fhKeeper/formulahousekeeper/timesheet_h5/src/views/timetool/timetool.vue

@@ -0,0 +1,240 @@
+<template>
+  <div>
+    <van-nav-bar
+      title="自动计时"
+      left-text="返回"
+      @click-left="back"
+      fixed
+      left-arrow
+    />
+
+    <div class="content">
+      <div class="select">
+        <span>选择项目</span>
+        <van-dropdown-menu>
+          <van-dropdown-item
+            v-model="selectValue"
+            :options="selectOpt"
+            @change="selectX()"
+          />
+        </van-dropdown-menu>
+      </div>
+      <div class="selectgx">
+        <div>选择工序</div>
+        <van-grid :border="false" :column-num="3">
+          <van-grid-item v-for="(item, index) in selectG" :key="index">
+            <van-button
+              type="default"
+              size="small"
+              @click="selectGx(item.index)"
+              >{{ item.name }}</van-button
+            >
+          </van-grid-item>
+        </van-grid>
+      </div>
+      <div class="timingBtn">
+        <van-button
+          type="default"
+          size="large"
+          block
+          style="height: 100px"
+          @click="startTiming()"
+        >
+          <div v-show="tBtnText">
+            {{ timingH < 10 ? "0" + timingH : timingH }}:{{
+              timingM < 10 ? "0" + timingM : timingM
+            }}:{{ timingS < 10 ? "0" + timingS : timingS }}
+          </div>
+          <span>{{ tBtnText ? "停止计时" : "开始计时" }}</span>
+        </van-button>
+      </div>
+      <ul class="recordList">
+        <li v-for="(item, index) in record" :key="index" class="">
+          <div class="upper">
+            <!-- 条目 -->
+            <div class="entry">{{ item.data1 }}</div>
+            <!-- 日期 -->
+            <div class="date">{{ item.data3 }}</div>
+          </div>
+          <div class="below">
+            <!-- 工序 -->
+            <div class="procedure">{{ item.data2 }}</div>
+            <!-- 计时时长 -->
+            <div class="duration">{{ item.data5 }}</div>
+            <!-- 计时区间 -->
+            <div class="timeinterval">{{ item.data4 }}</div>
+          </div>
+        </li>
+      </ul>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      selectValue: "项目1",
+      // 条目选择
+      selectOpt: [
+        { text: "项目1", value: "项目1" },
+        { text: "项目2", value: "项目2" },
+        { text: "项目3", value: "项目3" },
+      ],
+      // 工序数据
+      selectG: [
+        { name: "工序1", index: "99" },
+        { name: "工序2", index: "98" },
+        { name: "工序3", index: "97" },
+        { name: "工序4", index: "96" },
+        { name: "工序5", index: "95" },
+      ],
+      // 计时器   计时数据
+      timingFun: null,
+      tBtnText: 0,
+      // 时分秒
+      timingH: 0,
+      timingM: 0,
+      timingS: 0,
+      // 记录数据
+      record: [
+        {
+          data1: "汽车电池一号v1234",
+          data2: "组装",
+          data3: "2022-03-23",
+          data4: "11:40-11:50",
+          data5: "0.1h",
+        },
+        {
+          data1: "条目名称",
+          data2: "工序名称",
+          data3: "计时日期",
+          data4: "计时区间",
+          data5: "计时时长",
+        },
+      ],
+      loadata1: "",
+      startime:"",
+      endtime:""
+    };
+  },
+
+  methods: {
+    back() {
+      history.back();
+    },
+    // 选择项目
+    selectX() {
+      console.log(this.selectValue);
+    },
+    // 选择工序
+    selectGx(e) {
+      console.log(e);
+      this.loadata1 = e;
+      
+    },
+    // 计时器
+    startTiming() {
+        let date = new Date()
+        let nowH = date.getHours()
+        let nowM = date.getMinutes()
+      if (!this.tBtnText) {
+        this.tBtnText = 1;
+        this.startime = (nowH < 10 ? "0" + nowH : nowH) + ":" + (nowM < 10 ? "0" + nowM : nowM)
+        this.timingFun = setInterval(() => {
+          this.timingS += 1;
+          if (this.timingS == 60) {
+            this.timingS = 0;
+            this.timingM += 1;
+            if (this.timingM == 60) {
+              this.timingM = 0;
+              this.timingH += 1;
+            }
+          }
+        }, 1000);
+      } else {
+        this.tBtnText = 0;
+        this.endtime = (nowH < 10 ? "0" + nowH : nowH) + ":" + (nowM < 10 ? "0" + nowM : nowM)
+        clearInterval(this.timingFun);
+        this.timingFun = null;
+        this.timingH = 0;
+        this.timingM = 0;
+        this.timingS = 0;
+        this.setRecord()
+      }
+    },
+    // 添加计时记录
+    setRecord() {
+        let date = new Date();
+        let nmon = date.getMonth() + 1;
+        let today =
+        date.getFullYear() +
+        "-" +
+        (nmon < 10 ? "0" + nmon : nmon) +
+        "-" +
+        (date.getDate() < 10 ? "0" + date.getDate() : date.getDate());
+        console.log("today", today);
+      let addR = {data1:this.selectValue,data2:this.loadata1,data3:today,data4:this.startime + "-" + this.endtime,data5:"timingbtn"}
+        this.record.push(addR)
+        console.log(this.record);
+    },
+  },
+  mounted() {},
+};
+</script>
+
+<style lang="less" scoped>
+.content {
+  margin-top: 46px;
+}
+.select {
+  span {
+    float: left;
+    width: 30%;
+    height: 50px;
+    line-height: 50px;
+    text-align: center;
+    background-color: #fff;
+  }
+}
+.selectgx {
+  background-color: #fff;
+}
+.van-dropdown-menu {
+  float: right;
+  width: 70%;
+}
+.recordList {
+  padding-left: 2%;
+  padding-right: 2%;
+  background-color: #fff;
+  li {
+    width: 100%;
+    padding-top: 2%;
+    border-bottom: 1px solid #eee;
+    .upper {
+      height: 0.56rem;
+      .entry {
+        float: left;
+      }
+      .date {
+        float: right;
+      }
+    }
+    .below {
+      margin-top: 0.4rem;
+      height: 0.7rem;
+      .procedure {
+        float: left;
+      }
+      .timeinterval {
+        float: right;
+      }
+      .duration {
+        margin-left: 0.3rem;
+        float: right;
+      }
+    }
+  }
+}
+</style>