wuliguanli/ruoyi-ui-wuguan/src/views/wuguan/yuangongpx/index.vue

<template>
  <div class="app-container">
    <div style="background-color: #fff;padding: 20px;border-radius: 10px;">
      <p style="margin: 0; font-weight: 800;font-size: 16px;color: #343434;display: flex;align-items: center;margin-bottom: 20px;">
        <img src="../../../assets/images/icon_htgl_btzs.png" alt="" style="width: 16px;height: 20px;">
       <span style="margin-left: 10px;">员工培训</span>
      </p>
      <div style="background: #F3F3F3;padding: 20px 15px; padding-bottom: 0;margin-bottom: 20px;">
        <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="88px">
          <el-row>
            <!-- <el-col :span="24">
              <el-form-item label="创建时间:" prop="postCode">
               <el-date-picker
                     v-model="value1"
                     type="date"
                     placeholder="选择日期">
              </el-date-picker>
              <span style="margin: 0  10px;">至</span>
              <el-date-picker
                     v-model="value1"
                     type="date"
                     placeholder="选择日期">
              </el-date-picker>
              </el-form-item>
            </el-col> -->
            <el-col :span="24">
              <el-col :span="11">
                <el-form-item label="标题内容" prop="manualTitle">
                        <el-input
                        style="width: 350px;"
                          v-model="queryParams.manualTitle"
                          placeholder="请输入员工培训手册标题"
                          clearable
                          @keyup.enter.native="handleQuery"
                        />
                      </el-form-item>
              </el-col>
              <el-col :span="8">
               <el-form-item label="手册类型" prop="manualType">
                       <el-select v-model="queryParams.manualType" placeholder="请选择员工培训手册类型" clearable>
                         <el-option
                           v-for="dict in dict.type.publication_type"
                           :key="dict.value"
                           :label="dict.label"
                           :value="dict.value"
                         />
                       </el-select>
                     </el-form-item>
              </el-col>
              <el-col :span="5">
                <el-form-item class="butt">
                  <el-button type="primary" size="mini"  @click="handleQuery">搜索</el-button>
                  <el-button size="mini"  @click="resetQuery">重置</el-button>
                </el-form-item>
              </el-col>
            </el-col>
          </el-row>

        </el-form>
      </div>


      <div class="casr">
        <el-tabs v-model="activeName" type="card" @tab-click="handleClick" >
            <el-tab-pane label="图文" name="1">
              <el-row :gutter="10" class="mb8">
                <el-col :span="1.5">
                  <el-button
                    type="primary"
                    plain
                    size="mini"
                    @click="handleAdd"
                    v-hasPermi="['wuYe:manual:add']"
                  >添加</el-button>
                </el-col>
                <!-- <el-col :span="1.5">
                  <el-button
                    type="success"
                    plain
                    size="mini"
                    :disabled="single"
                    @click="handleUpdate"
                    v-hasPermi="['wuYe:manual:edit']"
                  >修改</el-button>
                </el-col> -->
                <el-col :span="1.5">
                  <el-button
                    type="danger"
                    plain
                    size="mini"
                    :disabled="multiple"
                    @click="handleDelete"
                    v-hasPermi="['wuYe:manual:remove']"
                  >删除</el-button>
                </el-col>
                <el-col :span="1.5">
                  <el-button
                    type="warning"
                    plain
                    size="mini"
                    @click="handleExport"
                    v-hasPermi="['wuYe:manual:export']"
                  >导出</el-button>
                </el-col>
                <el-col :span="1.5">
                  <el-button
                    type="warning"
                    plain
                    size="mini"
                    @click="handleExportyd"
                    v-hasPermi="['wuYe:staffTrainTime:list']"
                  >阅读时长</el-button>
                </el-col>
                <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
              </el-row>
               <el-table :max-height="tableMaxHeight" v-loading="loading" :data="manualList" @selection-change="handleSelectionChange">
                 <el-table-column label="标题" align="center" prop="manualTitle" width="120" show-overflow-tooltip />
                 <el-table-column label="发布时间" align="center" prop="publishTime" width="180">
                   <template slot-scope="scope">
                     <span>{{scope.row.publishTime}}</span>
                   </template>
                 </el-table-column>
                <!-- <el-table-column label="作者" align="center" prop="author" />
                 <el-table-column label="来源" align="center" prop="source" width="100" show-overflow-tooltip/> -->
                 <el-table-column label="封面图片" align="center" prop="coverImage" width="100">
                   <template slot-scope="scope">
                     <image-preview :src="scope.row.coverImage" :width="50" :height="50"/>
                   </template>
                 </el-table-column>
                 <el-table-column label="浏览次数" align="center" prop="viewCount" >
                  <template slot-scope="scope">
                    <el-tooltip class="item"  effect="dark" :content="scope.row.viewCount == 0?'暂无人员查看' : '点击查看详细人员'" placement="top-start">
                     <div @click="isyur(scope.row)" style=" text-decoration: underline; cursor: pointer;color: #fe5a0e ;font-weight: 700;">
                       {{scope.row.viewCount}}
                     </div>
                     </el-tooltip>

                    </template>
                  </el-table-column>
                 <el-table-column label="是否置顶" align="center" prop="isTop">
                         <template slot-scope="scope">
                           <dict-tag :options="dict.type.sys_yes_no" :value="scope.row.isTop"/>
                         </template>
                 </el-table-column>
                 <el-table-column label="操作" width="160" align="center" class-name="small-padding fixed-width">
                   <template slot-scope="scope">
                     <el-button
                       size="mini"
                       type="text"
                       @click="handleUpdategg(scope.row)"
                     >查看</el-button>
                     <el-button
                       size="mini"
                       type="text"
                       @click="handleUpdate(scope.row)"
                       style="color:#28C529;"
                       v-hasPermi="['wuYe:manual:edits']"
                     >修改</el-button>
                     <el-button
                       size="mini"
                       type="text"
                       style="color: red;"
                       @click="handleDelete(scope.row)"
                       v-hasPermi="['wuYe:manual:remove']"
                     >删除</el-button>
                   </template>
                 </el-table-column>
               </el-table>
            </el-tab-pane>
            <el-tab-pane label="视频" name="2">
              <el-row :gutter="10" class="mb8">
                <el-col :span="1.5">
                  <el-button
                    type="primary"
                    plain
                    size="mini"
                    @click="handleAdd"
                    v-hasPermi="['wuYe:manual:add']"
                  >添加</el-button>
                </el-col>
                <el-col :span="1.5">
                  <el-button
                    type="success"
                    plain
                    size="mini"
                    :disabled="singleg"
                    @click="handleUpdateg"
                    v-hasPermi="['wuYe:manual:edits']"
                  >修改</el-button>
                </el-col>
                <el-col :span="1.5">
                  <el-button
                    type="danger"
                    plain
                    size="mini"
                    @click="handleDeleteg"
                    v-hasPermi="['wuYe:manual:remove']"
                  >删除</el-button>
                </el-col>
                <el-col :span="1.5">
                  <el-button
                    type="warning"
                    plain
                    size="mini"
                    @click="handleExport"
                    v-hasPermi="['wuYe:manual:export']"
                  >导出</el-button>
                </el-col>
                <el-col :span="1.5">
                  <el-button
                    type="warning"
                    plain
                    size="mini"
                    :disabled="singleg"
                    @click="handleUpdategy"
                    v-hasPermi="['wuYe:manual:edit']"
                  >阅读人员</el-button>
                </el-col>
                <el-col :span="1.5">
                  <el-button
                     type="primary"
                    plain
                    size="mini"
                    @click="handleExportyd"
                    v-hasPermi="['wuYe:staffTrainTime:list']"
                  >阅读时长</el-button>
                </el-col>
                <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
              </el-row>
              <div class=" infinite-list" :style="dynamicStyle">
                <el-row :gutter="10" v-if="manualList.length !=0" style="width: 100%;margin-left: 0;">
                  <el-col :span="6" v-for="(item,index) in manualList" :key="index" style="cursor: pointer;">
                    <div v-if="isshoe" @click="isac(item)" :class=" item.isnum ==true ? 'ingwe' :'' " style="position: relative; background-color: #fff;box-shadow: 0px 0px 10px 0px #CDCDCD;border-radius: 4px;margin-bottom: 10px;height: 222px;">
                      <div>
                       <video
                                 :id="'myVideo' + (index+1)"
                                 data-setup="{}"
                                 loop="loop"
                                 :autoplay="false"
                                 muted
                                 controls
                                 @play="videoPlay(item)"
                                 poster=""
                                 style="width: 100%;height: 150px;"
                               >
                               <!-- + baseUrl -->
                                 <source  :src="defaultSettings.urls+ item.videoUrl " />
                               </video>
                      </div>
                      <div class="goe">
                        <p>{{item.manualTitle}}</p>
                        <p>
                          <span>{{item.publishTime}}</span>
                          <span>{{item.result}}</span>
                        </p>
                      </div>
                      <img v-if="item.isnum == true" src="../../../assets/images/icon_htgl_kp_gx.png" alt="" style="width: 35px;height: 35px;position: absolute;bottom: 0;right: 0;">
                    </div>
                  </el-col>
                </el-row>
                <div style="margin-top: 20px;display: flex;justify-content: center;align-items: center;" v-if="manualList.length ==0">
                   <img   src="../../../assets/images/zwshjbig.png" alt="" style="">
                </div>
              </div>
            </el-tab-pane>
          </el-tabs>
      </div>


      <pagination
        v-show="total>0"
        :total="total"
        :page.sync="queryParams.pageNum"
        :limit.sync="queryParams.pageSize"
        @pagination="getList"
      />
    </div>

    <!-- 添加或修改岗位对话框 -->
    <el-dialog :title="title" :visible.sync="open" width="1000px" append-to-body>
      <el-form ref="form" :model="form" :rules="rules" label-width="120px">
        <el-row>
          <el-col :span="8">
            <el-form-item label="培训手册标题" prop="manualTitle">
                      <el-input v-model="form.manualTitle" placeholder="请输入员工培训手册标题" />
                    </el-form-item>
          </el-col>
          <!-- <el-col :span="8" v-if="activeName == 1">
            <el-form-item label="作者" prop="author">
              <el-input v-model="form.author" placeholder="请输入作者" />
            </el-form-item>
          </el-col> -->
          <el-col :span="8" v-if="activeName == 1">
           <el-form-item label="是否置顶" prop="isTop">
             <el-select v-model="form.isTop" placeholder="请选择是否置顶">
                         <el-option
                           v-for="dict in dict.type.sys_yes_no"
                           :key="dict.value"
                           :label="dict.label"
                           :value="dict.value"
                         ></el-option>
                       </el-select>
           </el-form-item>
          </el-col>

          <!-- <el-col :span="8" v-if="activeName == 1">
            <el-form-item label="来源" prop="source">
              <el-input v-model="form.source" placeholder="请输入来源，记录资讯的来源" />
            </el-form-item>
          </el-col> -->
          <el-col :span="8" >
            <el-form-item label="发布时间" prop="publishTime">
              <el-date-picker clearable
              style="width:100%"
                v-model="form.publishTime"
                type="date"
                value-format="yyyy-MM-dd"
                placeholder="请选择发布时间">
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="24" v-if="activeName == 1">
            <el-form-item label="员工手册内容">
              <editor v-model="form.manualContent" :min-height="192"/>
            </el-form-item>
          </el-col>
          <el-col :span="24" v-if="activeName == 1 && isredw">
            <el-form-item label="封面图片" prop="coverImage">
              <image-upload v-model="form.coverImage"/>
            </el-form-item>
          </el-col>
          <el-col :span="24" v-if="activeName == 2">
            <el-form-item label="视频地址" prop="videoUrl">
              <!-- <image-uploadyuang v-model="form.videoUrl"/> -->
               <file-uploadvio v-model="form.videoUrl"/>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer" v-if="isredw">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>

    <el-dialog title="阅读人员" :visible.sync="openyy" width="600px" append-to-body class="nghsey">
      <div style="background-color: #fff; padding: 20px; padding-bottom: 0;">
        <el-form ref="formy" :model="formy" :rules="rulesy" label-width="80px">
          <el-row>
            <el-col :span="10">
              <el-form-item label="阅读时间" prop="createTime">
                <el-date-picker clearable
                style="width:100%"
                  v-model="formy.createTime"
                  type="date"
                  value-format="yyyy-MM-dd"
                  placeholder="请选择阅读时间">
                </el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="10">
              <el-form-item label="员工姓名" prop="searchValue">
                <el-input clearable v-model="formy.searchValue" placeholder="请输入员工姓名" />
              </el-form-item>
            </el-col>
            <el-col :span="4" style="text-align: right;">
              <el-button type="primary"   @click="handleQueryy">搜索</el-button>
            </el-col>
          </el-row>
        </el-form>
      </div>
      <div style="padding: 20px;">
        <p style="margin-top: 0;">当前已读人数共 <span style="color: #4671ED;">{{getreadList.length}}</span>人</p>
        <div v-for="(item,index) in getreadList" :key="index" style=" margin-bottom: 20px; display: flex;align-items: center; background: #FFFFFF;border-radius: 20px; border: 1px solid #E6E6E6;padding: 10px 25px;" >
            <img src="../../../assets/images/icon_htgl_rygl_tx_nv.png" alt="" style="width: 50px;height: 50px;border-radius: 50%;" >
            <div style="margin-left: 10px;">
              <p style="font-weight: bold;
font-size: 16px;
color: #272727;">{{item.name == null?'暂无数据' : item.name}}</p>
              <p style="font-weight: 500;font-size: 14px;color: #666666;">阅读时间 | {{item.time == null?'暂无数据' : item.time}}</p>
            </div>
            <!-- <img src="../../../assets/images/icon_htgl_rygl_tx_nan.png" alt="" style="width: 50px;height: 50px;border-radius: 50%;" v-if="item.residentGender == 2"> -->
        </div>
      </div>
      <!-- <div style="background-color: ;">

      </div> -->
    </el-dialog>
    <el-dialog title="阅读时长统计" :visible.sync="openyys" width="600px" append-to-body class="nghsey">
          <div style="background-color: #fff; padding: 20px; padding-bottom: 0;">
            <el-form ref="formys" :model="formys" :rules="rulesys" label-width="80px">
              <el-row>

                <el-col :span="10">
                  <el-form-item label="员工姓名" prop="staffName">
                    <el-input clearable v-model="formys.staffName" placeholder="请输入员工姓名" />
                  </el-form-item>
                </el-col>
                <el-col :span="4" style="text-align: right;">
                  <el-button type="primary"   @click="handleQueryytime">搜索</el-button>
                </el-col>
              </el-row>
            </el-form>
          </div>
          <div style="padding: 20px;">
            <div style="margin-top: 0;display: flex;justify-content: space-between;align-items: center;">
              <p style="margin: 0;">当前统计人数共 <span style="color: #4671ED; ">{{staffTrainTimeList.length}}</span>人</p>
               <div style="font-weight: 500;font-size: 16px;color: #FE5A0E; display: flex;align-items: center; cursor: pointer;" v-if="yutim" @click="yuretimecl">
                 从高到低
                 <img src="../../../assets/images/icon_ydtj_px_zdg_selected.png" alt="" style="margin-right: 5px;margin-left: 5px;">
                 <img src="../../../assets/images/icon_ydtj_px_ygd_normal.png" alt="">
               </div>
               <div style="font-weight: 500;font-size: 16px;color: #FE5A0E; display: flex;align-items: center; cursor: pointer;" v-if="!yutim" @click="yuretimecl">
                 从低到高
                 <img src="../../../assets/images/icon_ydtj_px_zdg_normal.png" alt="" style="margin-right: 5px;margin-left: 5px;">
                 <img src="../../../assets/images/icon_ydtj_px_ydg_selected.png" alt="">
               </div>
              </div>
            <div v-for="(item,index) in staffTrainTimeList" :key="index" style=" margin-top: 20px; display: flex;align-items: center; background: #FFFFFF;border-radius: 20px; border: 1px solid #E6E6E6;padding: 10px 25px;" >
                <img src="../../../assets/images/icon_htgl_rygl_tx_nv.png" alt="" style="width: 50px;height: 50px;border-radius: 50%;" >
                <div style="margin-left: 10px;">
                  <p style="font-weight: bold;
                              font-size: 16px;
    color: #272727;">{{item.staffName == null?'暂无数据' : item.staffName}}</p>
                  <p style="font-weight: 500;font-size: 14px;color: #666666;display:flex;align-items: center;">阅读总时长 | {{item.time == null?'暂无数据' : item.time}}</p>
                </div>
                <!-- <img src="../../../assets/images/icon_htgl_rygl_tx_nan.png" alt="" style="width: 50px;height: 50px;border-radius: 50%;" v-if="item.residentGender == 2"> -->
            </div>
          </div>
          <!-- <div style="background-color: ;">

          </div> -->
        </el-dialog>
  </div>
</template>

<script>
import { listManual, getManual, delManual, addManual, updateManual,staffTrainTime,getRead,staffTrainTimere } from "@/api/wuguan/manual";
import 'videojs-flash'
const defaultSettings = require("@/settings.js");
export default {
  name: "Post",
  dicts: ['sys_normal_disable','publication_type','sys_yes_no'],
  data() {
    return {
      // 遮罩层
      loading: true,
      defaultSettings:defaultSettings,
      baseUrl: process.env.VUE_APP_BASE_API,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 岗位表格数据
      postList: [],
       // 员工培训手册表格数据
       manualList: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      openyy:false,
      openyys:false,
      // 查询参数
      queryParams: {
         pageNum: 1,
          pageSize: 10,
          manualTitle: null,
          manualType: '1',
          manualContent: null,
          status: null,
          publishTime: null,
          videoUrl: null,
          coverImage: null,
          author: null,
          source: null,
          viewCount: null,
          isTop: null,
      },
      // 表单参数
      form: {},
      formy:{},
      formys:{},
      // 表单校验
      rules: {
        manualTitle: [
                  { required: true, message: "员工培训手册标题不能为空", trigger: "blur" }
                ],
                manualType: [
                  { required: true, message: "员工培训手册类型不能为空", trigger: "change" }
        ],
      },
      rulesy:{},
      rulesys:{},
      activeName:'1',
      videoState: false, // 视频播放状态
      poster:true,
      controls:true,
      videoData:{},
       player: null,
       isshoe:true,
       isredw:true,
       singleg:true,
       manid:0,
       getreadList:[],
       startTime: 0,
       yutim:true,
       staffTrainTimeList:[],
       tableMaxHeight:'200',
      };
    },
    computed: {
      dynamicStyle() {
        return {
          overflowY:'auto',
          height: this.tableMaxHeight+ 'px',
           paddingTop:'10px'
        }
      }
      },
  created() {
    this.startTime = Date.now()
    this.getList();
  window.onresize = () => {
  	      this.changeTableMaxHeight()
  	    }
  	    this.changeTableMaxHeight()
  },
  mounted() {
  	window.onresize = () => {
  	          this.changeTableMaxHeight()
  	        }
  	        this.changeTableMaxHeight()
  },
  beforeRouteLeave(to, from, next) {
  		    let stayTime = Date.now() - this.startTime
          let nsd={'staffTime':this.convertMillisecondsToMinutes(stayTime)}
          staffTrainTimere(nsd).then(response => {
            // console.log(4)
            next()
          });
  		    console.log(`停留时间：${stayTime}ms`)

  	  },

  beforeDestroy() {
      if (this.player) {
        this.player.dispose()
      }
    },
  methods: {
    convertMillisecondsToMinutes(milliseconds) {
        if (milliseconds) {
          var minutes = Math.floor(milliseconds / 60000);
          if(minutes == 0){
            minutes = 0
          }
          // console.log(minutes)
          // this.minToHm(minutes)
          return minutes;
        }
      },
       minToHm(min) {
          let h = Math.floor(min / 60);
          let m = min % 60;
          let hDisplay = h ? `${h}小时` : '';
          let mDisplay = m ? `${m}分钟` : '';
          console.log(`${hDisplay}${mDisplay}`.trim())
          return `${hDisplay}${mDisplay}`.trim();
        },
    /** 查询岗位列表 */
    getList() {
      this.loading = true;
      this.isshoe = false
      listManual(this.queryParams).then(response => {
        this.manualList  = response.rows;
        this.manualList.filter(rou=>{
          rou.isnum = false
        })
        this.isshoe = true
        if(this.activeName == '2'){
          this.getge(this.manualList )
        }
        this.total = response.total;
        this.loading = false;
      });
    },
    getge(valy){
        this.$nextTick(() => {
             setTimeout(() => {
        for(var i =0; i < valy.length;i++){
          let du = document.getElementById("myVideo" + (i+1)) //获取组件下的video
                 var hour = parseInt((du.duration) / 3600);
                 var minute = parseInt((du.duration % 3600) / 60);
                 var second = parseInt(du.duration % 60);
                 let result = ''
                 if (hour > 0) {
                 result = this.formatTimeStr(hour) + ':' + this.formatTimeStr(minute) + ':' + this
                 .formatTimeStr(second)
                           } else {
                              result = this.formatTimeStr(minute) + ':' + 
                            this.formatTimeStr(second)
                            }

                       this.isshoe = false
                       valy[i].result = result
                       this.isshoe = true
                       console.log(valy[i],result,du)
          //                   return result //转化成分，秒
                       }
                      }, 1200)

                    })
    },
    formatTimeStr(val) {
            if (val > 9) {
              return val
            } else {
              return '0' + val
            }
          },
    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
    // 表单重置
    reset() {
       this.form = {
          manualId: null,
          manualTitle: null,
          manualType: null,
          manualContent: null,
          status: null,
          publishTime: null,
          videoUrl: null,
          coverImage: null,
          author: null,
          source: null,
          viewCount: null,
          isTop: null,
          createBy: null,
          createTime: null,
          updateBy: null,
          updateTime: null,
          remark: null
        };
      this.resetForm("form");
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      if(this.queryParams.manualType != null && this.queryParams.manualType!=''){
        this.activeName =  this.queryParams.manualType
        }
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.manualId)
      this.single = selection.length!=1
      this.multiple = !selection.length
    },
    /** 新增按钮操作 */
    handleAdd() {
      this.reset();
      this.open = true;
      this.title = "添加培训手册";
      this.isredw = true;
    },

    /** 修改按钮操作 */
    handleUpdate(row) {
      this.reset();
            const manualId = row.manualId || this.ids
            getManual(manualId).then(response => {
              this.form = response.data;
              this.open = true;
              this.isredw = true;
              this.title = "修改员工培训手册";
    });
    },

    /** 修改按钮操作 */
    handleUpdateg(row) {
      this.reset();
            const manualId = row.manualId
            getManual(manualId).then(response => {
              this.form = response.data;
              this.open = true;
              this.isredw = true;
              this.title = "员工培训手册";
    });
    },
    handleUpdategg(row){
      this.reset();
              const manualId = row.manualId || this.ids
              getManual(manualId).then(response => {
                this.form = response.data;
                this.open = true;
                this.isredw = false;
                this.title = "员工培训手册";
      });
    },
     // 阅读视频人员
    handleUpdategy(row){
     this.openyy = true
     this.formy.createTime = null
     let sngs={'manualId':this.manid,'searchValue':null,'createTime':null}
     this.isrestwo(sngs)
    },
    /** 提交按钮 */
    submitForm: function() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          if(this.activeName == 2){
            if(this.form.videoUrl == null || this.form.videoUrl == ''){
              this.$message.error('请上传视频');
              return false
            }
          }
          if (this.form.manualId  != undefined) {
           updateManual(this.form).then(response => {
                         this.$modal.msgSuccess("修改成功");
                         this.open = false;
                         this.getList();
            });
          } else {
            this.form.manualType = this.activeName
            addManual(this.form).then(response => {
                          this.$modal.msgSuccess("新增成功");
                          this.open = false;
                          this.getList();
          });
          }
        }
      });
    },
    /** 删除按钮操作 */
     handleDelete(row) {
          const manualIds = row.manualId || this.ids;
          this.$modal.confirm('是否确认删除员工培训手册编号为"' + manualIds + '"的数据项？').then(function() {
            return delManual(manualIds);
          }).then(() => {
            this.getList();
            this.$modal.msgSuccess("删除成功");
          }).catch(() => {});
        },
    /** 导出按钮操作 */
    handleExport() {
      this.download('wuYe/manual/export', {
        ...this.queryParams
      }, `post_${new Date().getTime()}.xlsx`)
    },
      handleClick(tab, event){
        this.queryParams.manualType = tab.name
        this.form.manualType = this.activeName
        this.queryParams.pageNum = 1;
        this.ids = []
        this.getList()
         console.log(tab.name, event,this.activeName);
      },
    isac(val){
      console.log(5,val)
      val.isnum = !val.isnum
      this.isshoe = false
      this.isshoe = true
      let nhde = []
      let nsg = ''
      this.manualList.filter(rou=>{
        if(rou.isnum == true){
          nhde.push(rou.manualId)
        }
      })
      if(nhde.length == 1){
        this.manualList.filter(rou=>{
          if(rou.isnum == true){
            console.log(rou.manualId)
            this.manid = rou.manualId
            console.log(this.manid)
          }
        })
        this.singleg = false
      }else{
        // this.manid  = row.
        this.singleg = true
      }

    },
    isyur(row){
      this.openyy = true
      this.manid = row.manualId
      let sngs={'manualId':row.manualId,'searchValue':null,'createTime':null}
      this.isrestwo(sngs)
    },
    handleQueryy(){
      this.formy.manualId = this.manid
      if(this.formy.createTime != null && this.formy.createTime !=''){
        this.formy.createTime = this.formy.createTime+ ' ' + '00:00:00'
      }

      this.isrestwo(this.formy)
    },
    isrestwo(row){
      getRead(row).then(response => {
        this.getreadList = response.data
      });
    },
    isrestwotim(row){
      staffTrainTime(this.formys).then(response => {
        this.staffTrainTimeList = response.rows
        this.staffTrainTimeList.filter(rou=>{
          rou.time = this.minToHm(rou.staffTime)
        })

      });
    },
    // 阅读时长
    handleExportyd(){
      this.openyys = true
      this.yutim = true
      this.isrestwotim()
    },
    // 点击阅读时长排序
    yuretimecl(){
      this.yutim = !this.yutim
      this.staffTrainTimeList = this.staffTrainTimeList.reverse()
    },
    handleQueryytime(){
      this.isrestwotim()
    },

    handleDeleteg() {
        let nhde = []
        let nsg = ''
        this.manualList.filter(rou=>{
          if(rou.isnum == true){
            nhde.push(rou.manualId)
          }
        })
        console.log(nhde)
        nsg = nhde.join(',')
         // return
         this.$modal.confirm('是否确认删除数据项？').then(function() {
           return delManual(nsg);
         }).then(() => {
           this.getList();
           this.$modal.msgSuccess("删除成功");
         }).catch(() => {});
       },
       videoPlay(val){
          getManual(val.manualId).then(response => {

          });

       },
    // 获取屏幕高度
    showFilterForm () {
          this.filterActive = !this.filterActive
          this.changeTableMaxHeight()
        },

        changeTableMaxHeight () {
          let height = document.body.offsetHeight // 网页可视区域高度
          // if (this.filterActive) {
          //   this.tableMaxHeight = height - 320
          // } else {
            this.tableMaxHeight = height - 150
          // }
          console.log(height)
        }

  }
};
</script>
<style  lang="scss">
  .nghsey{
    .el-dialog__body{
      padding: 0;
      background-color: #F2F3FD;
    }
  }
  .butt{
    .el-button--small{
      padding: 9px 23px !important;
      font-size: 14px;
    }
  }
  .casr{
    .el-tabs__item.is-active{
      color: #196CFF;
    }
    .el-tabs--card > .el-tabs__header .el-tabs__item{
      padding: 0  30px !important;
    }
  }
  .el-table .el-table__header-wrapper th{
    background-color:#F5F6F8;
    color:#343434;
  }
  .el-table{
    color:#343434;
  }
</style>
<style scoped lang="scss">
  .goe{
    p{
      margin: 0;
      font-weight: 800;
      font-size: 16px;
      color: #161616;
      margin-top: 10px;
      margin-bottom: 3px;
      padding: 0 10px;
      overflow: hidden;
      text-overflow: ellipsis;
      display:-webkit-box; //作为弹性伸缩盒子模型显示。
      -webkit-box-orient:vertical; //设置伸缩盒子的子元素排列方式--从上到下垂直排列
      -webkit-line-clamp:1; //显示的行
    }
    p:nth-child(2){
      // margin-bottom: 10px;
      margin-top: 0;
     font-weight: 400;
     font-size: 14px;
     color: #AAAAAA;
     display: flex;
     justify-content: space-between;
     align-items: center;
     padding-bottom: 10px;
     span:nth-child(2){
       padding: 3px 5px;
       background: #EDEDED;
       border-radius: 10px;
     }
    }
  }
  .ingwe{
    border: 2px solid #196CFF;
  }
  </style>