晨健视频

src/views/kitchen/staffManage/morningCheck/index.vue

@@ -17,15 +17,15 @@
                 :default-time="['00:00:00', '23:59:59']"
                 :picker-options="pickerOptions" >
             </el-date-picker>
-        </el-form-item> 
+        </el-form-item>
         <el-form-item label="岗位" prop="postName">
             <el-input v-model="queryParams.postName" placeholder="请输入员工岗位" maxlength="20" clearable style="width: 240px"/>
         </el-form-item>
         <el-form-item label="身体状况" prop="checkStatus">
-            <el-select v-model="queryParams.checkStatus" style="width: 240px" clearable> 
+            <el-select v-model="queryParams.checkStatus" style="width: 240px" clearable>
                 <el-option label="正常" value="1"></el-option>
-                <el-option label="异常" value="2"></el-option>   
-            </el-select>   
+                <el-option label="异常" value="2"></el-option>
+            </el-select>
         </el-form-item>
       <el-form-item>
         <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
@@ -33,7 +33,7 @@
       </el-form-item>
     </el-form>
 
-    <el-row :gutter="10" class="mb8"> 
+    <el-row :gutter="10" class="mb8">
       <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
     </el-row>
 
@@ -47,12 +47,12 @@
       <el-table-column label="员工名称" align="center" prop="staffName" :show-overflow-tooltip="true"  />
       <el-table-column label="手机号" align="center" prop="mobile" :show-overflow-tooltip="true">
         <template scope="scope">
-            <span>{{ hidePhone(scope.row.mobile) }}</span> 
-        </template> 
-      </el-table-column>  
+            <span>{{ hidePhone(scope.row.mobile) }}</span>
+        </template>
+      </el-table-column>
       <el-table-column label="岗位名称" align="center" prop="postName" :show-overflow-tooltip="true" />
       <!-- <el-table-column label="晨检视频" align="center" prop="checkVideoUrl" :show-overflow-tooltip="true">
-        <template slot-scope="scope"> 
+        <template slot-scope="scope">
           <span v-if="scope.row.checkVideoUrl" style="" @click="openVideo(scope.row)">查看</span>
           <span v-else>无</span>
         </template>
@@ -65,11 +65,17 @@
       <el-table-column label="身体状况" align="center" prop="checkStatus" :show-overflow-tooltip="true">
           <template slot-scope="scope">
               <span v-if="scope.row.checkStatus==1">正常</span>
-              <span v-if="scope.row.checkStatus==2">异常</span> 
+              <span v-if="scope.row.checkStatus==2">异常</span>
           </template>
       </el-table-column>
-      <el-table-column label="晨检时间" align="center" prop="recordTime" :show-overflow-tooltip="true" width="160" />  
-    </el-table> 
+      <el-table-column label="晨检视频" align="center" prop="checkVideoUrl" :show-overflow-tooltip="true">
+        <template slot-scope="scope">
+          <span v-if="scope.row.checkVideoUrl" style="color: #409EFF; cursor: pointer;" @click="openVideo(scope.row)">查看</span>
+          <span v-else>无</span>
+        </template>
+      </el-table-column>
+      <el-table-column label="晨检时间" align="center" prop="recordTime" :show-overflow-tooltip="true" width="160" />
+    </el-table>
     <pagination
       v-show="total>0"
       :total="total"
@@ -78,13 +84,16 @@
       @pagination="getList"
     />
 
-    <el-dialog :visible.sync="dialogVisible" width="700px">
-      <img style="width: 100%;height: 100%;" :src="dialogImageUrl" alt="">
-    </el-dialog> 
+    <el-dialog :visible.sync="dialogVisible" width="1000px" title="晨检视频">
+      <video v-if="dialogVideoUrl" style="width: 100%; height: 600px; object-fit: contain;" controls>
+        <source :src="dialogVideoUrl" type="video/mp4">
+        您的浏览器不支持视频播放。
+      </video>
+    </el-dialog>
   </div>
 </template>
 
-<script> 
+<script>
 import { getStaffMorningCheckApi,getUserInfoApi } from "@/api/kitchen/staff";
 import { decryptWithSM4,encryptWithSM4 } from '@/utils/sm';
 export default {
@@ -116,19 +125,19 @@ export default {
         postName:undefined,
         checkStatus:undefined
       },
-      dialogVisible:false,//图片弹窗
-      dialogImageUrl:"",//图片弹窗  
+      dialogVisible:false,//视频弹窗
+      dialogVideoUrl:"",//视频弹窗URL
     };
   },
-  created() { 
+  created() {
     this.getPostList();
     this.getList();
   },
-  methods: { 
+  methods: {
       // 岗位选项
       getPostList(){
           getUserInfoApi().then((response) => {
-              this.postOptions = response.posts 
+              this.postOptions = response.posts
           })
       },
       /** 搜索按钮操作 */
@@ -137,11 +146,11 @@ export default {
           this.getList();
       },
       /** 重置按钮操作 */
-      resetQuery() { 
+      resetQuery() {
           this.dateRange = this.defaultDateRange()
           this.queryParams={
             pageNum: 1,
-            pageSize: 10, 
+            pageSize: 10,
             searchValue:undefined,
             postName:undefined,
             checkStatus:undefined
@@ -156,8 +165,8 @@ export default {
             "searchValue":this.queryParams.searchValue,
             "checkStatus":this.queryParams.checkStatus,
             "postName":this.queryParams.postName,
-            "pageNum": this.queryParams.pageNum, 
-            "pageSize": this.queryParams.pageSize,  
+            "pageNum": this.queryParams.pageNum,
+            "pageSize": this.queryParams.pageSize,
           }
           if(this.dateRange&&this.dateRange.length>0){
               param.startDateTime=this.formatDateTime(this.dateRange[0])
@@ -176,20 +185,20 @@ export default {
               this.total = Number(response.total);
               this.loading = false;
           });
-      },  
+      },
       openVideo(row){
-        this.dialogImageUrl = row.checkVideoUrl;
+        this.dialogVideoUrl = row.checkVideoUrl;
         this.dialogVisible = true;
       },
       defaultDateRange() {
           const end = new Date(new Date().toLocaleDateString());
           end.setTime(end.getTime() + 24 * 60 * 60 * 1000 -1);
           const start = new Date((new Date().toLocaleDateString()));
-          start.setTime(start.getTime() - 7 * 24 * 60 * 60 * 1000); 
+          start.setTime(start.getTime() - 7 * 24 * 60 * 60 * 1000);
           this.start = parseInt(start.getTime() / 1000)
           this.end = parseInt(end.getTime() / 1000)
           return [start, end]
-      }, 
+      },
       //日期
       formatDate(date) {
           // 格式化为 YYYY-MM-DD