设备日历

itdmWeb/src/views/module-iTDM/itdmGongdanMaster/uGantt.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="container">
+  <div class="gdDetail-container">
     <el-form :model="queryParams" ref="queryForm" :inline="true" label-width="70px">
         <el-form-item label="委托单位" prop="weituoClient">
           <el-select v-model="queryParams.weituoClient" clearable placeholder="请选择委托单位" @change="getWeituoClientOptions">
@@ -64,11 +64,14 @@
                   <!-- <div :class="(date.getDay()==6 || date.getDay()==0)?'weeked' :'notweeked'">{{data.day.split('-').slice(2).join('-')}}</div> -->
                   <!-- 方法二：在方法中判断设置返回 -->
                   <template v-if="dealMyDate(data.day)">
-                    <template v-for="(item, index) in dealMyDate(data.day)">
-                      <el-tag type="danger" :key="index" style="margin-right: 2px;" @click="chooseDevice(item)">
+                    <div v-for="(item, index) in dealMyDate(data.day)" :key="index" class="eqCalendar-item">
+                      <!-- <el-tag type="danger" :key="index" style="margin-right: 2px;" @click="chooseDevice(item)">
                         {{ item.deviceName }}
-                      </el-tag>
-                    </template>
+                      </el-tag> -->
+                      <div>
+                        {{ item.deviceName }}
+                      </div>
+                    </div>
                   </template>
                   <!-- <el-tag type="danger" v-if="dealMyDate(data.day).length > 0">
                     {{ dealMyDate(data.day)[0].deviceName }}
@@ -594,31 +597,65 @@ export default {
 }
 </script>
 
-<style lang="scss" scoped>
-::v-deep .el-table th.el-table__cell>.cell{
-  padding-left: 0;
-  padding-right: 0;
-}
-::v-deep .el-table .cell{
-  padding-left: 0;
-  padding-right: 0;
-}
-.eq-rili-view{
-  .el-select{
-    ::v-deep .el-input__inner{
-      border-top-right-radius: 0;
-      border-bottom-right-radius: 0;
-      border-right: 0;
+<style lang="scss">
+.gdDetail-container{
+  ::v-deep .el-table th.el-table__cell>.cell{
+    padding-left: 0;
+    padding-right: 0;
+  }
+  ::v-deep .el-table .cell{
+    padding-left: 0;
+    padding-right: 0;
+  }
+  .eq-rili-view{
+    .el-select{
+      ::v-deep .el-input__inner{
+        border-top-right-radius: 0;
+        border-bottom-right-radius: 0;
+        border-right: 0;
+      }
+    }
+    .search-btn{
+      width: 60px;
+      background-color: #1890ff;
+      // padding: 0 22px;
+      color: #fff;
+      border-top-right-radius: 4px;
+      border-bottom-right-radius: 4px;
+      text-align: center;
     }
   }
-  .search-btn{
-    width: 60px;
-    background-color: #1890ff;
-    // padding: 0 22px;
-    color: #fff;
-    border-top-right-radius: 4px;
-    border-bottom-right-radius: 4px;
-    text-align: center;
+  // 日历
+  .el-calendar{
+    .el-calendar-table .el-calendar-day{
+      padding: 0;
+      min-height: 65px;
+      height: 100%;
+      .weeked{
+        text-align: center;
+      }
+      .notweeked{
+        text-align: center;
+      }
+    }
+    .eqCalendar-item{
+      // width: ;
+      background-color: #EBF4FE;
+      position: relative;
+      padding: 2px 6px;
+      font-size: 12px;
+      margin-bottom: 4px;
+      overflow: auto;
+    }
+    .eqCalendar-item::after{
+      content: '';
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 2px;
+      height: 100%;
+      background-color: #4F9AF6;
+    }
   }
 }
 </style>

itdmWeb/src/views/module-iTDM/itdmGongdanMaster/uGantt2.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="container">
+  <div class="gdPlan-container">
     <el-form :model="queryParams" ref="queryForm" :inline="true" label-width="70px">
         <el-form-item label="委托单位" prop="weituoClient">
           <el-select v-model="queryParams.weituoClient" clearable placeholder="请选择委托单位" @change="getWeituoClientOptions">
@@ -61,6 +61,36 @@
               </el-option>
             </el-select>
           </el-form-item>
+          <el-calendar v-if="openRl == 1">
+            <template slot="dateCell" slot-scope="{date, data}">
+              <!-- <div> -->
+                <!-- 如果是当前选择月 -->
+                <template v-if="data.type === 'current-month'">
+                  <!-- 这里加了周六周天的判断 -->
+                  <div :class="(date.getDay()==6 || date.getDay()==0)?'weeked' :'notweeked'">{{data.day.substring(8,10)}}</div>
+                  <!-- <div :class="(date.getDay()==6 || date.getDay()==0)?'weeked' :'notweeked'">{{data.day.split('-').slice(2).join('-')}}</div> -->
+                  <!-- 方法二：在方法中判断设置返回 -->
+                  <template v-if="dealMyDate(data.day)">
+                    <div v-for="(item, index) in dealMyDate(data.day)" :key="index" class="eqCalendar-item">
+                      <!-- <el-tag type="danger" :key="index" style="margin-right: 2px;" @click="chooseDevice(item)">
+                        {{ item.deviceName }}
+                      </el-tag> -->
+                      <div>
+                        {{ item.deviceName }}
+                      </div>
+                    </div>
+                  </template>
+                  <!-- <el-tag type="danger" v-if="dealMyDate(data.day).length > 0">
+                    {{ dealMyDate(data.day)[0].deviceName }}
+                  </el-tag> -->
+                </template>
+                <!-- 不是 -->
+                <template v-else>
+                  <div style="text-align: right;">{{ data.day.split('-').slice(1).join('-') }}</div>
+                </template>
+              <!-- </div> -->
+            </template>
+          </el-calendar>
           <el-form-item label="传感器" prop="chuanganqiArray">
             <el-select v-model="currentDbEdit.chuanganqiArray" multiple placeholder="请选择传感器" style="width: 100%;">
               <el-option
@@ -96,7 +126,7 @@
 
 <script>
 import uGantt from '@/components/module-iTDM/uGantt/index.vue'
-import {getWeituoClientList, getWeituoInfoListByClient, getDeviceList, getJhList, getManagerList, getCgqList, saveProject, ajaxGetDictItems, saveProjectJl, delProjectJl} from '@/api/api'
+import {getWeituoClientList, getWeituoInfoListByClient, getDeviceList, getJhList, getManagerList, getCgqList, saveProject, ajaxGetDictItems, saveProjectJl, delProjectJl, getDeviceCalendar} from '@/api/api'
 export default {
   name: '',
   components: { uGantt },
@@ -249,6 +279,10 @@ export default {
       // 表单校验
       rules: {
       },
+      // 日历弹窗
+      openRl: 1,
+      showCalendarDialog: false,
+      scheduleData: [],
     }
   },
   created () {
@@ -258,10 +292,35 @@ export default {
     this.getCgqlist()
     this.initDictConfig()
     this.getManagerList()
+    // 获取设备日历
+    this.getDeviceCalendar()
   },
   mounted () {
   },
   methods: {
+    // 获取设备日历
+    getDeviceCalendar(){
+      getDeviceCalendar().then((res) =>{
+        console.log(res)
+        this.scheduleData = res
+      })
+    },
+    handleEqCalendar(){
+      this.openRl = -this.openRl
+      // this.showCalendarDialog = true
+    },
+    dealMyDate(v) {
+      let res = ''
+      for (let index = 0; index < this.scheduleData.length; index++) {
+        const element = this.scheduleData[index];
+        if(element.workDate === v){
+          res = this.scheduleData[index].deviceList
+          break
+        }
+      }
+      console.log(res)
+      return res
+    },
     // 获取委托单位下拉列表
     getClientList(){
       getWeituoClientList().then((res) =>{
@@ -398,6 +457,7 @@ export default {
     // 双击事件
     rowDblclick(current){
       console.log(current)
+      this.openRl = 1
       this.currentDbEdit = current
       this.title = this.currentDbEdit.sampleName + '-' + this.currentDbEdit.testItems + '-' + this.currentDbEdit.pm
       // 根据开始时间结束时间计算持续时间
@@ -480,13 +540,47 @@ export default {
 }
 </script>
 
-<style lang="scss" scoped>
-::v-deep .el-table th.el-table__cell>.cell{
-  padding-left: 0;
-  padding-right: 0;
-}
-::v-deep .el-table .cell{
-  padding-left: 0;
-  padding-right: 0;
+<style lang="scss">
+.gdPlan-container{
+  ::v-deep .el-table th.el-table__cell>.cell{
+    padding-left: 0;
+    padding-right: 0;
+  }
+  ::v-deep .el-table .cell{
+    padding-left: 0;
+    padding-right: 0;
+  }
+  // 日历
+  .el-calendar{
+    .el-calendar-table .el-calendar-day{
+      padding: 0;
+      min-height: 65px;
+      height: 100%;
+      .weeked{
+        text-align: center;
+      }
+      .notweeked{
+        text-align: center;
+      }
+    }
+    .eqCalendar-item{
+      // width: ;
+      background-color: #EBF4FE;
+      position: relative;
+      padding: 2px 6px;
+      font-size: 12px;
+      margin-bottom: 4px;
+      overflow: auto;
+    }
+    .eqCalendar-item::after{
+      content: '';
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 2px;
+      height: 100%;
+      background-color: #4F9AF6;
+    }
+  }
 }
 </style>