设备日历

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

@@ -42,14 +42,17 @@
             <el-input v-model="currentDbEdit.reportNo" placeholder="请输入报告编号"></el-input>
           </el-form-item>
           <el-form-item label="试验设备" prop="shebeiId">
-            <el-select v-model="currentDbEdit.shebeiId" placeholder="请选择试验设备" style="width: 100%;">
-              <el-option
-                v-for="item in deviceOption"
-                :key="item.value"
-                :label="item.label"
-                :value="item.value">
-              </el-option>
-            </el-select>
+            <div class="eq-rili-view" style="display: flex;">
+              <el-select v-model="currentDbEdit.shebeiId" placeholder="请选择试验设备" style="width: 100%;">
+                <el-option
+                  v-for="item in deviceOption"
+                  :key="item.value"
+                  :label="item.label"
+                  :value="item.value">
+                </el-option>
+              </el-select>
+              <div class="search-btn" @click="handleEqCalendar">查看</div>
+            </div>
           </el-form-item>
           <el-form-item label="传感器" prop="chuanganqiArray">
             <el-select v-model="currentDbEdit.chuanganqiArray" multiple placeholder="请选择传感器" style="width: 100%;">
@@ -101,6 +104,40 @@
         </div> -->
         <!-- 其他需要自定义的弹窗数据 -->
         <!-- <slot/> -->
+        <!-- 日历弹窗 -->
+        <el-dialog title="设备日历" :visible.sync="showCalendarDialog" width="60%" append-to-body>
+          <el-calendar>
+            <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)">
+                    <template v-for="(item, index) in dealMyDate(data.day)">
+                      <el-tag type="danger" :key="index" style="margin-right: 2px;" @click="chooseDevice(item)">
+                        {{ item.deviceName }}
+                      </el-tag>
+                    </template>
+                  </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>
+          <span slot="footer" class="dialog-footer">
+            <el-button @click="showCalendarDialog = false">取 消</el-button>
+            <el-button type="primary" @click="showCalendarDialog = false">确 定</el-button>
+          </span>
+        </el-dialog>
         <span slot="footer" class="dialog-footer">
           <el-popover
             style="margin-right: 10px;"
@@ -126,7 +163,7 @@
 
 <script>
 import uGantt from '@/components/module-iTDM/uGantt/index.vue'
-import {getWeituoClientList, getWeituoInfoListByClient, getDeviceList, getXmjlList, getManagerList, getCgqList, saveProject, ajaxGetDictItems, saveProjectJl, delProjectJl} from '@/api/api'
+import {getWeituoClientList, getWeituoInfoListByClient, getDeviceList, getXmjlList, getManagerList, getCgqList, saveProject, ajaxGetDictItems, saveProjectJl, delProjectJl, getDeviceCalendar} from '@/api/api'
 export default {
   name: '',
   components: { uGantt },
@@ -275,6 +312,9 @@ export default {
       // 表单校验
       rules: {
       },
+      // 日历弹窗
+      showCalendarDialog: false,
+      scheduleData: [],
     }
   },
   created () {
@@ -283,10 +323,33 @@ export default {
     this.getCgqlist()
     this.initDictConfig()
     this.getManagerList()
+    // 获取设备日历
+    this.getDeviceCalendar()
   },
   mounted () {
   },
   methods: {
+    // 获取设备日历
+    getDeviceCalendar(){
+      getDeviceCalendar().then((res) =>{
+        this.scheduleData = res
+      })
+    },
+    handleEqCalendar(){
+      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) =>{
@@ -528,4 +591,22 @@ export default {
   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;
+  }
+}
 </style>