更改源泉的颜色变化

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

@@ -223,9 +223,9 @@ export default {
     },
     bindTooltipEvents() {
       console.log('开始执行')
-      const taskLines = this.$refs.ganttContainer.querySelectorAll(".gantt_task_line");
+      const taskLines = this.$refs.ganttContainer && this.$refs.ganttContainer.querySelectorAll(".gantt_task_line");
 
-      taskLines.forEach(line => {
+      (taskLines || []).forEach(line => {
         const taskId = line.getAttribute("task_id");
         if (!taskId || line.dataset.bound === "true") return;
 
@@ -266,7 +266,7 @@ export default {
         return
       }
       const taskLines = this.$refs.ganttContainer.querySelectorAll(".gantt_task_line");
-      taskLines.forEach(line => {
+      (taskLines || []).forEach(line => {
         const taskId = line.getAttribute("task_id");
         if (!taskId) return;
 
@@ -405,12 +405,13 @@ export default {
       }
 
       // 更改为统一的
-      if([3,4,5,6].includes(taskStatus)) {
+      if([2,3,4,5,6].includes(taskStatus)) {
           return `<div class="task_text">
-            ${task.taskStatus == 3 ? `<div class="circle"></div> <div class="circle"></div>` : ''}
-            ${task.taskStatus == 4 ? `<div class="exclamation-circle circle" style="color: #8ecaf8">V</div> <div class="circle"></div>` : ''}
-            ${task.taskStatus == 5 ? `<div class="exclamation-circle circle" style="color: #f56c6c">!</div> <div class="circle"></div>` : ''}
-            ${task.taskStatus == 6 ? `<div class="exclamation-circle circle" style="color: #8ecaf8">V</div> <div class="exclamation-circle circle" style="color: #f56c6c">!</div>` : ''}
+            ${task.taskStatus == 2 ? `<div class="circle greyStr"></div> <div class="circle greyStr"></div>` : ''}
+            ${task.taskStatus == 3 ? `<div class="circle orangeStr"></div> <div class="circle orangeStr"></div>` : ''}
+            ${task.taskStatus == 4 ? `<div class="exclamation-circle circle greenStr" style="color: #8ecaf8">V</div> <div class="circle orangeStr"></div>` : ''}
+            ${task.taskStatus == 5 ? `<div class="exclamation-circle circle redStr" style="color: #f56c6c">!</div> <div class="circle redStr"></div>` : ''}
+            ${task.taskStatus == 6 ? `<div class="exclamation-circle circle greenStr" style="color: #8ecaf8">V</div> <div class="exclamation-circle circle redStr" style="color: #f56c6c">!</div>` : ''}
             <div>${texts}</div>
           </div>`;
       }
@@ -669,4 +670,20 @@ export default {
 .custom-tooltip-customize div:last-child {
   margin-bottom: 0;
 }
+
+.orangeStr {
+  background: #ffa500;
+}
+
+.greenStr {
+  background: #32cd32;
+}
+
+.redStr {
+  background: #ff0000;
+}
+
+.greyStr {
+  background: #e0e0e0;
+}
 </style>

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

@@ -1,6 +1,6 @@
 <template>
   <div class="container">
-    <div class="gantt_head">
+    <!-- <div class="gantt_head">
       <div class="head_RorX">
         <div class="filter-lefts">
           <el-radio-group v-model="radio1" @change="selChange()" size="small">
@@ -10,35 +10,35 @@
           </el-radio-group>
         </div>
       </div>
-      <!-- 时间段筛选  -->
+      时间段筛选 
       <div class="head_date" v-if="isDataLoaded">
-      <span>{{ $t('message.period') }}</span>
-      <el-date-picker
-        style="margin-left:9px;width:15vw"
-        size="small"
-        v-model="valueDate"
-        type="daterange"
-        :range-separator="$t('other.to')"
-        :start-placeholder="$t('time.startDate')"
-        :end-placeholder="$t('time.endDate')"
-        value-format="yyyy-MM-dd"
-        @change="dateupdata()">
-      </el-date-picker>
+        <span>{{ $t('message.period') }}</span>
+        <el-date-picker
+          style="margin-left:9px;width:15vw;margin-right: 8px;"
+          size="small"
+          v-model="valueDate"
+          type="daterange"
+          :range-separator="$t('other.to')"
+          :start-placeholder="$t('time.startDate')"
+          :end-placeholder="$t('time.endDate')"
+          value-format="yyyy-MM-dd"
+          @change="dateupdata()">
+        </el-date-picker>
       </div>
-      <!-- 任务类型筛选 -->
+      任务类型筛选
       <div v-if="radio1 == $t('an-xiang-mu-cha-kan')" class="head_taskType">
         <span>{{ $t('ren-wu-lei-xing') }}</span>
         <el-select clearable filterable v-model="taskType" :placeholder="$t('defaultText.pleaseChoose')" size="small" style="margin-left:9px;width:10vw" @change="taskTypeSel()">
           <el-option v-for="item in typeList" :label="item.name" :value="item.id" :key="item.id">
             <div style="display: flex;justify-content: space-between;align-items: center;">
-                <!--左边是文字，右边是色块(有color的话)-->
+                左边是文字，右边是色块(有color的话)
                 <div style="float: left; ">{{ item.name }}</div>
                 <div v-if="item.color" :style="'width:40px;margin-left:20px;height:20px;background-color:'+item.color"></div>
             </div>
           </el-option>
         </el-select>
       </div>
-      <!-- 任务分组筛选 -->
+      任务分组筛选
       <div v-if="reqpar1" class="head_taskgroup">
         <span>{{ $t('other.taskGroup') }}</span>
         <el-select clearable filterable v-model="valuex2" :placeholder="$t('defaultText.pleaseChoose')" size="small" style="margin-left:9px;width:10vw" @change="taskgroupSel()">
@@ -51,7 +51,7 @@
         </el-option>
       </el-select>
       </div>
-      <!-- 人员/项目筛选 -->
+      人员/项目筛选
       <div class="head_select">
         <span>{{(this.radio1 == $t('an-ren-yuan-cha-kan') ? $t('ren-yuan') : $t('other.project'))}}</span>
           <el-select v-if="reqpar1" clearable filterable v-model="valuex" :placeholder="$t('defaultText.pleaseChoose')" size="small" style="margin-left:9px;width:10vw" @change="optupdata()">
@@ -66,7 +66,7 @@
           </el-select>
           <selectCat v-if="!reqpar1 && user.userNameNeedTranslate == '1'" style="margin-left:9px;" :size="'small'" :widthStr="'153'" :subject="screenList" :subjectId="valuex" :distinction="'1'" @selectCal="selectCal"></selectCat>
       </div>
-      <!-- 资源需求导入/导出 -->
+      资源需求导入/导出
       <div class="head_files" v-if="!isDataLoaded">
         <div style="margin-left:10px;float:left;">
           <el-link type="primary" :underline="false" :href="'./upload/'+$t('zi-yuan-xu-qiu-dao-ru-mo-ban')+'.xlsx'" download="资源需求导入模板.xlsx">{{ $t('Downloadthetemplate') }}</el-link>
@@ -78,18 +78,125 @@
         <el-link type="primary" :underline="false" @click="exportProjectData" download="资源需求导出.xlsx">{{ $t('dao-chu-xu-qiu') }}</el-link>
         </div>
       </div>
+    </div> -->
+
+    <!-- 甘特图表头 -->
+    <div class="ganttChartHeader">
+      <!-- 切换 -->
+      <div class="eachLayout">
+        <el-radio-group v-model="radio1" @change="selChange()" size="small">
+          <el-radio-button :label="$t('an-ren-yuan-cha-kan')" value="renyuan"></el-radio-button>
+          <el-radio-button :label="$t('an-xiang-mu-cha-kan')" value="xiangmu"></el-radio-button>
+          <el-radio-button :label="$t('zi-yuan-xu-qiu')" value="demand"></el-radio-button>
+        </el-radio-group>
+      </div>
+
+      <!-- 时间段 -->
+      <template v-if="radio1 == $t('an-ren-yuan-cha-kan') || radio1 == $t('an-xiang-mu-cha-kan')">
+        <div class="eachLayout">
+          <div class="eachLayout-title">{{ $t('message.period') }}</div>
+          <el-date-picker
+            class="eachLayout-title"
+            size="small"
+            v-model="valueDate"
+            type="daterange"
+            :clearable="false"
+            :range-separator="$t('other.to')"
+            :start-placeholder="$t('time.startDate')"
+            :end-placeholder="$t('time.endDate')"
+            value-format="yyyy-MM-dd"
+            @change="dateupdata()">
+          </el-date-picker>
+
+          <el-button size="small" @click="weekSwitching('prev2')">上上周</el-button>
+          <el-button size="small" @click="weekSwitching('prev')">上周</el-button>
+          <el-button size="small" @click="weekSwitching('next')">下周</el-button>
+        </div>
+
+        <div class="eachLayout">
+          <div class="eachLayout-colorBlock" style="background: #ffa500">待审核</div>
+          <div class="eachLayout-colorBlock" style="background: #32cd32">已通过</div>
+          <div class="eachLayout-colorBlock" style="background: #ff0000">已驳回/漏填</div>
+          <div class="eachLayout-colorBlock" style="background: #e0e0e0">未提交</div>
+        </div>
+      </template>
+
+      <!-- 任务类型 -->
+      <template v-if="radio1 == $t('an-xiang-mu-cha-kan')">
+        <div class="eachLayout">
+          <div class="eachLayout-title">{{ $t('ren-wu-lei-xing') }}</div>
+          <el-select clearable filterable v-model="taskType" :placeholder="$t('defaultText.pleaseChoose')" size="small" style="width: 180px" @change="taskTypeSel()">
+            <el-option v-for="item in typeList" :label="item.name" :value="item.id" :key="item.id">
+              <div style="display: flex;justify-content: space-between;align-items: center;">
+                  <!-- 左边是文字，右边是色块(有color的话) -->
+                  <div style="float: left; ">{{ item.name }}</div>
+                  <div v-if="item.color" :style="'width:40px;margin-left:20px;height:20px;background-color:'+item.color"></div>
+              </div>
+            </el-option>
+          </el-select>
+        </div>
+      </template>
+
+      <!-- 任务分组 -->
+      <template v-if="radio1 == $t('an-xiang-mu-cha-kan') || radio1 == $t('zi-yuan-xu-qiu')">
+        <div class="eachLayout">
+          <div class="eachLayout-title">分组</div>
+          <el-select clearable filterable v-model="valuex2" :placeholder="$t('defaultText.pleaseChoose')" size="small" style="width: 180px"@change="taskgroupSel()">
+            <el-option v-for="item in taskgroupList" :key="item.name" :label="item.name" :value="item.name"></el-option>
+          </el-select>
+        </div>
+      </template>
+
+      <!-- 项目 -->
+      <template v-if="radio1 == $t('an-xiang-mu-cha-kan') || radio1 == $t('zi-yuan-xu-qiu')">
+        <div class="eachLayout">
+          <div class="eachLayout-title">项目</div>
+          <el-select clearable filterable v-model="valuex" :placeholder="$t('defaultText.pleaseChoose')" size="small" style="width:180px" @change="optupdata()">
+            <el-option v-for="item in screenList" :key="item.id" :label="item.projectName" :value="item.id">
+              <span style="float: left;color: #8492a6;">{{ item.projectCode }}</span>
+              <span style="float: right;font-size: 13px;margin-left: 20px">{{ item.projectName }}</span>
+            </el-option>
+          </el-select>
+        </div>
+      </template>
+
+      <!-- 人员 -->
+      <template v-if="radio1 == $t('an-ren-yuan-cha-kan')">
+        <div class="eachLayout">
+          <div class="eachLayout-title">人员</div>
+          <el-select clearable filterable v-model="valuex" :placeholder="$t('defaultText.pleaseChoose')" size="small" style="width: 180px" @change="optupdata()">
+            <el-option v-for="item in screenList" :key="item.id" :label="item.name" :value="item.id"></el-option>
+          </el-select>
+        </div>
+      </template>
+
+      <!-- 其他操作 -->
+      <template v-if="radio1 == $t('zi-yuan-xu-qiu')">
+        <div class="eachLayout">
+          <el-link type="primary" :underline="false" :href="'./upload/'+$t('zi-yuan-xu-qiu-dao-ru-mo-ban')+'.xlsx'" download="资源需求导入模板.xlsx">{{ $t('Downloadthetemplate') }}</el-link>
+          <el-upload ref="upload" style="margin: 0 10px;" action="#" :limit="1" :http-request="importProject" :show-file-list="false">
+            <el-link type="primary" :underline="false" >{{ $t('dao-ru-xu-qiu') }}</el-link>
+          </el-upload>
+          <el-link type="primary" :underline="false" @click="exportProjectData" download="资源需求导出.xlsx">{{ $t('dao-chu-xu-qiu') }}</el-link>
+        </div>
+      </template>
     </div>
 
+    <div :style="`height: ${radio1 == $t('an-xiang-mu-cha-kan') ? '40' : '0'}px`"></div>
+
     <gantt v-if="isDataLoaded && user.userNameNeedTranslate != 1" ref="ganttTable1" class="left-container" :tasks="tasks" 
     :stafforpro="radio1"
     :valueDate="valueDate"
-    :key="updatakey1" @closeBounced="closeBounced"></gantt>
+    :key="updatakey1" 
+    @closeBounced="closeBounced"
+    :style="`height: ${radio1 == $t('an-xiang-mu-cha-kan') ? '84' : '88'}vh`"
+    ></gantt>
     <vueGantt v-if="isDataLoaded && user.userNameNeedTranslate == 1" ref="ganttTable1" :stafforpro="radio1"
     :valueDate="valueDate"
     :key="updatakey1" :tasks="tasks"></vueGantt>
 
   <div class="demand-container" v-if="!isDataLoaded">
-    <el-table height="75vh" :loading="demandListLoading" :data="demandList">
+    <el-table height="84vh" :loading="demandListLoading" :data="demandList" border>
       <el-table-column :label="user.companyId == '7030' ? '项目令号' : $t('Itemno')" prop="projectCode" width="160"></el-table-column>
       <el-table-column :label="$t('headerTop.projectName')" prop="projectName" min-width="240"></el-table-column>
       <el-table-column :label="$t('jin-qi-ri-huo-yue-ren-yuan')" prop="activeUsers" min-width="240">
@@ -253,6 +360,35 @@ export default {
     localStorage.removeItem('ganttChartTaskId')
   },
   methods: {
+    // 周的切换
+    weekSwitching(weekType) {
+      // const now = weekType == 'next' ? this.dayjs(this.valueDate[1]) : this.dayjs(this.valueDate[0]); // 获取当前日期
+      const now = this.dayjs()// 获取当前日期
+
+      let startOfWeek, endOfWeek;
+
+      switch (weekType) {
+        case 'prev2': // 上上周
+          startOfWeek = now.subtract(2, 'week').startOf('week');
+          endOfWeek = startOfWeek.endOf('week');
+          break;
+        case 'prev': // 上周
+          startOfWeek = now.subtract(1, 'week').startOf('week');
+          endOfWeek = startOfWeek.endOf('week');
+          break;
+        case 'next': // 下周
+          startOfWeek = now.add(1, 'week').startOf('week');
+          endOfWeek = startOfWeek.endOf('week');
+          break;
+        default:
+          break;
+      }
+
+      // 设置日期范围
+      this.valueDate = [startOfWeek.format('YYYY-MM-DD'), endOfWeek.format('YYYY-MM-DD')];
+
+      this.dateupdata()
+    },
     getTaskTypeList() {
       this.http.post('/task-type/list', { companyId: this.user.companyId },
         res => {
@@ -565,8 +701,8 @@ export default {
                                   if(res.data[i].id.indexOf(this.$t('other.AskForLeave')) != '-1') {
                                     res.data[i].color = '#F56C6C'
                                   }
-                                  res.data[i].startDateStr = JSON.parse(JSON.stringify(res.data[i].start_date || []))
-                                  res.data[i].endDateStr = JSON.parse(JSON.stringify(res.data[i].end_date || []))
+                                  res.data[i].startDateStr = JSON.parse(JSON.stringify(res.data[i].start_date || ''))
+                                  res.data[i].endDateStr = JSON.parse(JSON.stringify(res.data[i].end_date || ''))
                                 }
                                 this.tasks = {data:res.data};
                                 if(this.user.userNameNeedTranslate != '1') {
@@ -680,7 +816,6 @@ export default {
   .left-container {
     overflow: hidden;
     position: relative;
-    height: 80vh;
   }
   .demand-container{
     overflow: hidden;
@@ -698,7 +833,7 @@ export default {
     width: 380px;
   }
   .gantt_head .head_date{
-    width: 22vw;
+    width: 30vw;
   }
   .gantt_head .head_taskgroup{
     width: 15vw;
@@ -717,5 +852,38 @@ export default {
     height: 8%;
     float: right;
     padding-top: 5px;
-}
+  }
+
+  .container {
+    // 重新修改表头
+    .ganttChartHeader {
+      position: absolute;
+      padding: 14px 50px 14px 20px;
+      width: 100%;
+      box-sizing: border-box;
+      top: 0;
+      left: 0;
+      display: flex;
+      flex-wrap: wrap;
+      line-height: 18px;
+
+      .eachLayout {
+        display: flex;
+        align-items: center;
+        margin-right: 30px;
+        margin-bottom: 12px;
+
+        .eachLayout-title {
+          margin-right: 10px;
+        }
+
+        .eachLayout-colorBlock {
+          padding: 6px 14px;
+          color: #fff;
+          border-radius: 4px;
+          margin-right: 10px;
+        }
+      }
+    }
+  }
 </style>