deviceManage/ruoyi-ui/src/views/shipinggaoj/shebe/index.vue

<template>
  <div class="app-container" style="padding-top: 20px;height: 120vh;">
    <div class="ntgs">
    <el-row :gutter="10" class="mb8">
     <div class="iuer" style="margin-bottom:10px;">
       <div style="display: flex;align-items: center; " class="ingaqe">
		    <!-- <p class="lqw" style="font-weight: 700;font-size: 15px; margin-bottom: 0;"> <img src="../../../assets/images/icon_yq_htgl_btzs.png" alt="" style="width:10px;height: 10px;margin-right: 10px;"> 门禁信息</p> -->
            <el-select v-model="queryParams.name" placeholder="请选监控名称" clearable>
              <el-option
                v-for="dict in postList"
                :key="dict.indexCode"
                :label="dict.name"
                :value="dict.name"
              />
            </el-select>
			<div class="ksfpofg" @click="handleQuery">
				<!-- <img src="../../../assets/images/icon_sslb_ss.png" alt="" style="width:10px;height: 10px;"> -->
						  搜索
						  </div>
       </div>
	   <!-- <div class="ite">
	      <div class="ksfpo" @click="osge"  v-hasPermi="['system:camera:openDz']">
			  <img src="../../../assets/images/icon_ssjk_kman_open.png" alt="" style="width:10px;height: 10px;">
			  开门</div>
		  <div class="ksfpo ksfpok" @click="osgef" v-hasPermi="['system:camera:closeDz']">
		  			  <img src="../../../assets/images/icon_ssjk_kman_close.png" alt="" style="width:10px;height: 10px;">
		  			  关门</div>
	   </div> -->
<!--  -->
     </div>
      <!-- <el-col :span="1.5">
        <el-button
          type="primary"
          plain
          icon="el-icon-plus"
          size="mini"
          @click="handleAdd"
          v-hasPermi="['investigate:table:add']"
        >新增</el-button>
      </el-col>

      <el-col :span="1.5">
        <el-button
          type="danger"
          plain
          icon="el-icon-delete"
          size="mini"
          :disabled="multiple"
          @click="handleDelete"
          v-hasPermi="['investigate:table:remove']"
        >删除</el-button>
      </el-col> -->
     <!-- <el-col :span="1.5">
        <el-button
          type="warning"
          plain
          icon="el-icon-download"
          size="mini"
          @click="handleExport"
          v-hasPermi="['investigate:table:export']"
        >导出</el-button>
      </el-col> -->
      <!-- <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar> -->
    </el-row>

	<div>
		<el-row :gutter="20">
          <!-- postList -->
					<el-col :span='5'>
						<div style="background-color: #fff;border-radius: 10px;padding: 20px 20px;height: 100vh;">
              <p style="margin: 0;border-left: 6px solid #03BF8A;margin-left: -20px;padding-left: 10px;font-weight: 800;">通道列表</p>
              <div style=" height: 36px;;line-height: 36px;margin-top: 10px;"v-for="(item,index) in 6">
                              <div style="display: flex;align-items: center;justify-content: space-between;">
                                <div style="font-size: 16px;
              color: #333333;">通道01</div>
                                <img src="../../../assets/images/icon_htgl_zd.png" alt="" style="width: 10px;height: 12px;">
                              </div>
                          </div>
            </div>
					</el-col>
        <!-- v-if="isshoe" -->
        <el-col :span='19' style="padding-left: 30px; background-color: #fff;border-radius: 10px;padding: 20px;" >
          <div style="display: flex;align-items: center;justify-content: space-between;">
            <p style="margin: 0;border-left: 6px solid #03BF8A;margin-left: -20px;padding-left: 10px;font-weight: 800;">实时预览</p>
            <div>
              <el-button type="danger" plain>删除</el-button>
              <el-button type="warning" plain>置顶</el-button>
              <el-button type="success" plain>关闭</el-button>
            </div>
          </div>
          344
        						<!-- <video
        						      class="videosmall"
        						      ref="videosmallone"
        						      preload="auto"
        						      muted
        						      autoplay
        							  width="95%"
        						      type="rtmp/flv"
        						    >
        						      <source src="" />
        						    </video> -->
        					</el-col>

			<!-- <el-col :span="24">
				<div class="ihgswq wrapper"  ref="wrapper" style=" overflow: hidden;">
						  <div class="fijge content nhgwesvq" ref="content" style="width:1610px;">
									<div class='shotw '   v-for="(item,index) in postList" :key="index" @click="isfgw(item)" >
											  <img src="../../../assets/images/fengm.png" alt="">
												<img src="../../../assets/images/icon_spjk_play.png" alt="" class="iges">
											  <p style="font-size: 14px;">{{item.name}}</p>
									</div>
						  </div>
				</div>
			</el-col> -->
		</el-row>


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


	</div>

    <!-- 添加或修改岗位对话框 -->
    <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
      <el-form ref="form" :model="form" :rules="rules" label-width="100px">
		  <el-row>
			  <el-col :span="24">
			  		<el-form-item label="接待人员" prop="receptionId">
			  			<el-select  style="width:100%;" v-model="form.receptionId" placeholder="请选择">
			  			    <el-option
			  			      v-for="item in ksjegsg"
			  			      :key="item.receptionId"
			  			      :label="item.receptionName"
			  			      :value="item.receptionId"
                    @click.native="nhgwel(item)"
			  			      >
			  			    </el-option>
			  			  </el-select>
			  		</el-form-item>
			  </el-col>
		  </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>

    <el-dialog :title="titles" :visible.sync="opens" width="1000px" append-to-body>
      <el-form ref="forms" :model="forms" :rules="ruless" label-width="120px">
      <el-row>
    	  <el-col :span="8">
    	  		<el-form-item label="人员类型" prop="recordType">
    	        <el-select v-model="forms.recordType" placeholder="请选择人员类型" >
    	          <el-option
    	            v-for="dict in dict.type.fange"
    	            :key="dict.value"
    	            :label="dict.label"
    	            :value="dict.value"
    	          />
    	        </el-select>
    	  		 </el-form-item>
    	  </el-col>
    	  <el-col :span="8">
    	  		<el-form-item label="联系人" prop="recordName">
    	  		          <el-input v-model="forms.recordName" placeholder="请输入联系人" />
    	  		        </el-form-item>
    	  </el-col>
    	  <el-col :span="8">
    	  		 <el-form-item label="联系方式" prop="recordPhone">
    	  		          <el-input v-model="forms.recordPhone" placeholder="请输入联系方式" />
    	  		        </el-form-item>
    	  </el-col>

    	  <el-col :span="8">
    	  		<el-form-item label="出入时间" prop="recordDateTime">
    	  		          <el-date-picker style="width:100%" clearable
    	  		            v-model="forms.recordDateTime"
    	  		            type="date"
    	  		            value-format="yyyy-MM-dd"
    	  		            placeholder="请选择	出入时间">
    	  		          </el-date-picker>
    	  		        </el-form-item>
    	  </el-col>
    	  <el-col :span="8">
    	  		<el-form-item label="记录来源" prop="recordSource">
    	        <el-select v-model="forms.recordSource" placeholder="请选择记录来源" >
    	          <el-option
    	            v-for="dict in dict.type.jluly"
    	            :key="dict.value"
    	            :label="dict.label"
    	            :value="dict.value"
    	          />
    	        </el-select>
    	  		 </el-form-item>
    	  </el-col>
    	  <el-col :span="8">
    	  		<el-form-item label="备注" prop="visitRemark">
    	  		          <el-input v-model="forms.visitRemark" placeholder="请输入备注" />
    	  		        </el-form-item>
    	  </el-col>
      </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForms">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>

	<el-dialog title="页面二维码" :visible.sync="opent" width="200px" style="padding: 0;" class="nhgrls" append-to-body>
	  <div v-show="opent" style="display: flex;justify-content: center;align-items: center;">
		  <!-- <span>{{'https://qszdh.qs163.cn/pages/index/index?id=' + this.bg}}</span> -->
			   <!-- <vue-qr   :text="'https://qszdh.qs163.cn/pages/index/index?id=' + this.bg" :size="200"></vue-qr> -->
	  </div>
	</el-dialog>
  </div>
</template>

<script>
// import { listPost, getPost, delPost, addPost, updatePost,updateFs,updateGx } from "@/api/kaoch/renyuan";
// import { listReservat,camera,cameraIndexCode, listReservatd, getReservat, delReservat, addReservat, updateReservat,setPass,delReservathx,openDz,closeDz } from "@/api/tonggi/houtai";
// import vueQr from "vue-qr";
// import videojs from 'video.js'
// import 'video.js/dist/video-js.css'
// import {videoPlayer} from 'vue-video-player'
// import 'videojs-flash'
// import flvjs from 'flv.js/dist/flv.min.js'
// import flvjs from "flv.js";
import Bscroll from "better-scroll";
export default {
  name: "Post",
  dicts: ['sys_normal_disable','sys_yes_no','youke','tjzh','youkes','lafafen','fange','jluly'],
  // components: {
  //     vueQr,
	 //  videoPlayer
  //   },
  data() {
    return {
      // 遮罩层
      loading: true,
	  opent:false,
	  bg:null,
    titles:'',
	editableTabsValue:'6',
    opens:false,
	  imageUrl:'@/assets/logo/logo.png',
	  printObj: {
	           id: "nhgrew", // 这里是要打印元素的ID
	           popTitle: "", // 打印的标题
	         },
	  pickerOptions:{
	            disabledDate (time) {
	              //disabledDate 文档上：设置禁用状态，参数为当前日期，要求返回 Boolean
	              // return time.getTime() > Date.now()//选当前时间之前的时间
	              return time.getTime() < Date.now()  - 8.64e7;//选当前时间之后的时间
	            }
	        },
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
	  checkedScoreDataDetails: [],
	  scoreDataDetailsList:[],
	  tabPosition:'left',
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 岗位表格数据
      postList: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 查询参数
      queryParams: {
        pageNo: 1,
        pageSize:500,
		name:null,
        postCode: undefined,
        postName: undefined,
        status: undefined,
        reservatType:undefined
      },
      // 表单参数
      form: {},
      // 表单校验
      rules: {
        receptionId: [
          { required: true, message: "不能为空", trigger: "blur" }
        ],


      },
      ruless:{
        visitName: [
          { required: true, message: "不能为空", trigger: "blur" }
        ],
        visitPhone: [
          { required: true, message: "不能为空", trigger: "blur" }
        ],
        visitNum: [
          { required: true, message: "不能为空", trigger: "blur" }
        ],
        visitDate: [
          { required: true, message: "不能为空", trigger: "blur" }
        ],
        visitTime: [
          { required: true, message: "不能为空", trigger: "blur" }
        ],

      },
      forms:{},
			tableMaxHeight:'200',
      kje:0,
      ksjegsg:[],
	   Scroll: null,
	   videoShow: false,
	flvPlayer:null,
	player: null,
	name:null,
	isshiwa:false,
	isjfwe:{},
	isshoe:false


    };
  },
  created() {
    // this.getList();
  window.onresize = () => {
  	      this.changeTableMaxHeight()
  	    }
  	    this.changeTableMaxHeight()
  },
  mounted() {
  	window.onresize = () => {
  	          this.changeTableMaxHeight()
  	        }
  	        this.changeTableMaxHeight()

		this.$nextTick(() => {
		        this.initScroll()
		    })

  },
   beforeDestroy() {
      this.destoryVideo()
    },
  methods: {


	  init(val) { //这个val 就是一个地址，例如： http://192.168.2.201:85/live/9311272c49b845baa2b2810ad9bf3f68.flv 这是个服务器返回给我的一个监控视频流地址
	        setTimeout(() => { //使用定时器是因为，在mounted声明周期里调用，可能会出现DOM没加载出来的原因
	          var videoElement = this.$refs.videosmallone; // 获取到html中的video标签
			  this.isshiwa = true
	          if (flvjs.isSupported()) {
	          //因为我这个是复用组件，进来先判断 player是否存在，如果存在，销毁掉它，不然会占用TCP名额
	            if (this.player !== null) {
	              this.player.pause();
	              this.player.unload();
	              this.player.detachMediaElement();
	              this.player.destroy();
	              this.player = null;
	            }
	            this.player = flvjs.createPlayer( //创建直播流，加载到DOM中去
	              {
	                type: "flv",
	                url: val, //你的url地址
	                isLive: true, //数据源是否为直播流
	                hasAudio: false, //数据源是否包含有音频
	                hasVideo: true, //数据源是否包含有视频
	                enableStashBuffer: true, //是否启用缓存区
	              },
	              {
	                enableWorker: false, //不启用分离线程
	                enableStashBuffer: false, //关闭IO隐藏缓冲区
	                autoCleanupSourceBuffer: true, //自动清除缓存
	                lazyLoad: false,
	              }
	            );
				this.isshoe = true
	            this.player.attachMediaElement(videoElement); //放到dom中去

	            //!!!!!!这里需要注意，有的时候load加载完成不一定可以播放，要是播放不成功，用settimeout 给下面的this.player.play() 延时几百毫秒再播放
	            // setTimeout(this.player.play(), 48000);
				setTimeout(() =>{
					//到时间时只执行一次就停止
					this.player.load();//准备完成
					this.player.play()
					console.log('播放')
				},900)


	          }
	        }, 500);
	      },

	  createVideo() {
	        if (flvjs.isSupported()) {
				console.log(1)
	          var videoElement = document.getElementById('myFlvVideo')
			  console.log(videoElement,flvjs)
	          this.flvPlayer = flvjs.createPlayer(
	            {
	              type: 'application/x-mpegURL',
	              isLive: true,
	              hasAudio: false,
	              url:'https://stream1.freetv.fun/86d463c0006da643e45e26b34875df87059dcba13e69d0a5471b185793c122a2.m3u8'
	            },
	            {
	              cors: true, // 是否跨域
	              enableWorker: false, // 是否多线程工作
	              enableStashBuffer: false, // 是否启用缓存
	              stashInitialSize: 400, // 缓存大小(kb)  默认384kb
	              autoCleanupSourceBuffer: true // 是否自动清理缓存
	            }
	          )
	          this.flvPlayer.attachMediaElement(videoElement)
	          this.flvPlayer.load()
	          this.flvPlayer.play()
			  console.log(1244)
	          // 报错重连
	          this.flvPlayer.on(flvjs.Events.ERROR, (errType, errDetail) => {
	            console.log('errorType:', errType)
	            console.log('errorDetail:', errDetail)
	            if (this.flvPlayer) {
	              this.destoryVideo()
	              this.createVideo()
	            }
	          })
	        }

			console.log(this.flvPlayer.play())
	      },
	      destoryVideo() {
	        this.player.pause()
	        this.player.unload()
	        this.player.detachMediaElement()
	        this.player.destroy()
	        this.player = null
	      },

	  initScroll() {
	    	  // 给内层盒子设置宽度，不设置宽度的话无法滚动
	    	  // let width = this.goods.length * 60
	    	  // // 如果有外边距，可以这样写。需要去掉最后一个元素的外边距，在后面减一下
	    	  // let width = this.goodslength * (60 + 10) - 10
			  let width = 6 * (200 + 10) - 10
	        // this.$refs.content.style.width = width + 'px'
	        this.$nextTick(()=>{
	          if(!this.Scroll) {
	            this.Scroll = new Bscroll(this.$refs.wrapper,{
	              click: true,      // 配置允许点击事件
	              scrollX: true,    // 开启横向滚动
	              eventPassthrough: 'vertical',  // 当设置 eventPassthrough 为 'vertical' 的时候，scrollY 无效
				  mouseWheel: true,
				  scrollbar: { // 滚动条, 要加相对位置
				              fade: true
				            }
	            })
	          } else {
	            this.Scroll.refresh()     // 重新计算 better-scroll，当 DOM 结构发生变化的时确保滚动效果正常
	          }
	        })
	      },

    /** 查询岗位列表 */
    getList() {
      this.loading = true;
	  // this.queryParams
      camera(this.queryParams).then(response => {
        this.postList = response.data.data.list;
		if(response.data.data != null){
		if(response.data.data.list.length != 0){
			let ne = response.data.data.list[0]
			response.data.data.list.filter(rtu=>{
				if(rtu.name == '后门道闸'){
					console.log(3,rtu)
					ne = rtu
					return
				}
			})
			this.isfgw(ne)
			this.isjfwe =ne

		}
		}
        // this.postList=[{'nsje':null,'visitPhone':null,'isReception':'Y'}]
        this.total = response.data.data.total;
        this.loading = false;
      });
    },
    getListh() {
      this.loading = true;
      listReservatd().then(response => {
        // this.postList = response.rows;
        this.ksjegsg= response.data
        // this.total = response.total;
        this.loading = false;
      });
    },
	isfgw(val){
		this.isjfwe = val
		let nhge={cameraIndexCode:val.indexCode}
		this.isshiwa = false
		this.isshoe= false
	   cameraIndexCode(nhge.cameraIndexCode).then(response => {
		   console.log(response.data.data.url)
		   this.isshoe= true
		  this.init(response.data.data.url)
		   this.isshiwa = true
	  // this.postList = response.rows;
	  // this.total = response.total;
	  });
		console.log(val,4)
	},
	osge(){
		console.log(this.isjfwe,45)
		if(this.isjfwe.name == '后门道闸'){
			this.isjfwe.name ='后门抓拍一体机1'
		}
		let nge={equipmentName:this.isjfwe.name}
		openDz(nge).then(response => {

		});
	},
	osgef(){
		if(this.isjfwe.name == '后门道闸'){
			this.isjfwe.name ='后门抓拍一体机1'
		}
		let nge={equipmentName:this.isjfwe.name}
		closeDz(nge).then(response => {
		  // this.postList = response.rows;
		});
	},

    ilw(row,val){
      this.kje = val
      // console.log(row)
      if(row.value == 0){
          this.queryParams.reservatType = undefined
      }else{
        this.queryParams.reservatType = row.value
      }
    console.log(this.kje)
      this.queryParams.pageNum  = 1
      this.getList()
    },
  nhgwel(item){
    this.form.receptionId = item.receptionId
    this.form.receptionName = item.receptionName
    this.form.receptionPhone = item.phonenumber

  },
    getPass(row) {
      const _this = this
      this.$confirm('是否审核通过', "提醒", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(function() {
        return setPass({
        visitType: 3,
        reservatId: row.reservatId,
        // xmStatus:row.xmStatus
      })
      }).then(() => {
    	   _this.getList();
        _this.msgSuccess("提交成功");
      })
    },
    infoBtn(row) {
    	const _this = this
    	this.$confirm('是否拒绝', "提醒", {
    	  confirmButtonText: "确定",
    	  cancelButtonText: "取消",
    	  type: "warning"
    	}).then(function() {
    	  return setPass({
    	  visitType: 2,
    	   reservatId: row.reservatId,
    	  // xmStatus:row.xmStatus
    	})
    	}).then(() => {
    	  _this.getList();
    	  _this.msgSuccess("提交成功");
    	})

    },
    // 取消按钮
    cancel() {
      this.open = false;
	  this.opens = false;
      this.reset();
    },
    // 表单重置
    reset() {
      this.form = {
		receptionId:undefined,
        receptionPhone:undefined,
        // postSort: 0,
        // status: "0",
        receptionName: undefined
      };
      this.resetForm("form");
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.reservatId)
      this.single = selection.length!=1
      this.multiple = !selection.length
    },
    nhgeo(row){
      this.reset();
     this.open = true;
     this.title = "分配接待人员";
     this.form.reservatId = row.reservatId;
     this.form.reservatConfigTimeId=row.reservatConfigTimeId;
     this.form.visitDate=row.visitDate
    },
    handleDeleteh(row){
      this.$router.push({
        path: '/bjqs',
      		query: {
      			'id':row.reservatId,
      			'name':null,
      			'names':null,
      			'isxz':1
      		}
      })
    },
    /** 新增按钮操作 */
    handleAdd() {
      this.forms = {
        reservatType:'1'
      }
      this.opens = true;
      this.titles = "添加预约人员";
	  // this.scoreDataDetailsList = []
	  // this.$router.push({
	  //   path: '/system/bjq',
	  // })
	  // this.$router.push({
	  //   path: '/bjqs',
	  // 		query: {
	  // 			'id':null,
	  // 			'name':null,
	  // 			'names':null,
	  // 			'isxz':1
	  // 		}
	  // })
    },
    /** 修改按钮操作 */
    handleUpdate(row) {
      this.reset();
           const recordId = row.recordId || this.ids
           getReservat(recordId).then(response => {
             this.forms = response.data;
             this.opens = true;
             this.title = "修改访问记录";
           });
    },
    /** 提交按钮 */
    submitForm: function() {
      this.$refs["form"].validate(valid => {
              if (valid) {
                // if (this.form.reservatId != null) {
                  updateReservat(this.form).then(response => {
                    this.$modal.msgSuccess("操作成功");
                    this.open = false;
                    this.getList();
                  });
                // } else {
                //   addReservat(this.form).then(response => {
                //     this.$modal.msgSuccess("新增成功");
                //     this.open = false;
                //     this.getList();
                //   });
                // }
              }
            });
    },
    submitForms: function() {
      this.$refs["forms"].validate(valid => {
              if (valid) {
                // if (this.form.reservatId != null) {
                  // updateReservat(this.forms).then(response => {
                  //   this.$modal.msgSuccess("操作成功");
                  //   this.open = false;
                  //   this.getList();
                  // });
                // } else {
                  this.forms.visitTime = this.forms.visitTime + '-' + this.forms.visitTime
                  addReservat(this.forms).then(response => {
                    this.$modal.msgSuccess("新增成功");
                    this.opens = false;
                    this.getList();
                  });
                // }
              }
            });
    },

	nglqw(val){
		this.opent = true
		this.bg = val.investigateTableId
	},


	iszheg(event){
	 console.log(event);


	 // 校验身份证：
	 console.log(reg.test(this.form.idCard),23741)
	 		if ( reg.test(this.form.idCard)|| _IDre15.test(this.form.idCard)) {
	 			// this.idea();
	 			this.go(this.form.idCard);
	 			// callback()
	 		} else {
	   if(ncjsle.test(this.form.idCard) || nhyeli.test(this.form.idCard)){
	      console.log(3)
	   }else{
	     if(gnse.test(this.form.idCard)  ){
	         console.log(4)
	     }else{
	       if(tw.test(this.form.idCard) || twe.test(this.form.idCard)){
	         console.log(5)
	       }else{
	         this.$message.error('证件格式不正确');
	       }
	     }

	   }
	 		}
	},
	erw(row){
		this.$router.push({
		  path: '/reny/ewm',
		  query:{
			   'tenantId':row.investigateTableId
			  }
		})
	},

	hussar_17Click(val) {
	        const _this = this
	        var url =process.env.VUE_APP_BASE_API + 'pages/index/index?id=' + val.investigateTableId;
			 console.log(url,this.$refs.canvas,6)
			this.opent = true
	        QRCode.toCanvas(
	                      canvas,
	                      url,//生成二维码的数据
	                      {width: 100, height:100, margin: 1.5},//margin调整二维码的白边大小
	                      function (error) {
	                        if (error) {
	                          console.log(error);
	                        }
	                      }
	                    );

	        // console.log(qrcode,987)
	      },
	/** 成绩_子添加按钮操作 */
	handleAddScoreDataDetails() {

	  let obj = {};
	  obj.duty = "";
	  obj.idCard = "";
	  obj.phonenumber = "";
	  obj.userName = "";
	  this.scoreDataDetailsList.push(obj);
	  console.log(this.scoreDataDetailsList)
	},
	/** 成绩_子删除按钮操作 */
	handleDeleteScoreDataDetails() {
	  if (this.checkedScoreDataDetails.length == 0) {
	    this.$modal.msgError("请先选择要删除的数据");
	  } else {
	    const scoreDataDetailsList = this.scoreDataDetailsList;
	    const checkedScoreDataDetails = this.checkedScoreDataDetails;
	    this.scoreDataDetailsList = scoreDataDetailsList.filter(function(item) {
	      return checkedScoreDataDetails.indexOf(item.index) == -1
	    });
	  }
	},
	/** 复选框选中数据 */
	handleScoreDataDetailsSelectionChange(selection) {
	  this.checkedScoreDataDetails = selection.map(item => item.index)
	},
	/** 成绩_子序号 */
	rowScoreDataDetailsIndex({ row, rowIndex }) {
	  row.index = rowIndex + 1;
	},
    /** 删除按钮操作 */
    handleDelete(row) {
      const postIds = row.recordId || this.ids;
      delReservat(postIds).then(response => {
       this.$modal.msgSuccess("操作成功");
        this.getList();
      });

      // this.$modal.confirm('是否确认删除数据项？').then(function() {
      //   return delPost(postIds);
      // }).then(() => {
      //   this.getList();
      //   this.$modal.msgSuccess("删除成功");
      // }).catch(() => {});
    },
    handleDeletehx(row) {
      const postIds = row.reservatId || this.ids;
      let nhg={}
      nhg.reservatId = postIds
      delReservathx(nhg).then(response => {
       this.$modal.msgSuccess("操作成功");
        this.getList();
      });

      // this.$modal.confirm('是否确认删除数据项？').then(function() {
      //   return delPost(postIds);
      // }).then(() => {
      //   this.getList();
      //   this.$modal.msgSuccess("删除成功");
      // }).catch(() => {});
    },
	// 发送短信
	handleUpdatefas(row){
		updateFs(row).then(response => {
		 this.$modal.msgSuccess("发送成功");
		  // this.getList();
		});
	},
	handleDeletegx(row){
		updateGx(row).then(response => {
		  this.$modal.msgSuccess("发送成功");
		  // this.getList();
		});
	},
    /** 导出按钮操作 */
    handleExport() {
      this.download('system/reservat/export', {
        ...this.queryParams
      }, `预约人员.xlsx`)
    },
		// 获取屏幕高度
		showFilterForm () {
		      this.filterActive = !this.filterActive
		      this.changeTableMaxHeight()
		    },

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

<style lang="scss">
	.isjses{
		.el-tabs--left .el-tabs__nav-wrap.is-left::after{
			width:6px;
		}
		.el-tabs--left .el-tabs__active-bar.is-left,{
			width:6px;
		}
	}
	.ingaqe{
		.el-input--medium{
			width:100%;
		}
	}
	.nhgrls{
		.el-dialog__body{
			padding: 0;
		}
	}
  .hyr{
    span{
      text-decoration:underline;
    }
  }
</style>
<style scoped lang="scss">
	.nghwgq{
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		margin-top: 90px;
		div{
			color:#aaa;
		}
	}
	.ihgswq{
		// width:100%;
		// overflow-x: hidden;
		// margin-top: 30px;
	}
	.fijge{
		// width: 110%;
		display: flex;
		display: -webkit-flex;
		justify-content: space-between;
		.shotw{
			position: relative;
			// width:32%;
			width: 238px;
			height: 140px;
			margin-left: 0;
			margin-right: 20px;
			margin-bottom: 15px;
			img{
				height: 100%;
				cursor:pointer;
			}
		  p{
			  // bottom:-10px;
			  margin: 0;
			  font-weight: bold;
			  font-size: 16px;
			   padding: 5px  10px;
			   cursor:pointer;
		  }
		  .iges{
			position: absolute;
			top:50%;
			left:50%;
			width:30px;
			height: 30px;
			transform: translate(-50%,-50%);
			cursor:pointer;
		  }
		}
	}
	.nhgwesvq{
		width:1610px !important;
	}
	.shotw{
		position: relative;
		margin-left: -20px;
		margin-right: -20px;
		img{
			width:100%;
			height: 80vh;
		}
	  p{
	     position: absolute;
		 bottom: 0;
		 left:0;
		 background-color: rgba(0, 0, 0, .5);
		 width: 100%;
		 padding: 13px  5px;
		 color:#fff;
		 font-weight: bold;
		 font-size: 18px;
	  }
	  .p{
		  top:0px;
		  height: 60px;
		  margin: 0;
		  padding-left: 20px;
	  }
	}


	.ksfpo{
		background-color: #3464EB;
		padding: 6px 12px;
		border-radius: 4px ;
		color:#fff;
		cursor:pointer;
	}
	.ksfpok{
		background-color: #FFFFFF;
		padding: 5px 11px;
		border-radius: 4px;
		color:#3464EB;
		border: 1px solid #3464EB;
		margin-left: 10px;
		cursor:pointer;
	}
	.ksfpofg{
		background-color: #75DB75;
		padding: 5px 11px;
		border-radius: 4px;
		color:#FFFFFF;
		border: 1px solid #75DB75;
		margin-left: 10px;
		cursor:pointer;
	}
  .iuer{
    display: flex;
    justify-content: space-between;
    align-items: center;
    .ite{
      display: flex;
      justify-content: space-between;
      align-items: center;
      p{
        cursor:pointer;
        margin: 0;
        font-size: 15px;
        font-family: PingFang SC;
        font-weight: 500;
        color:#666666;
        padding: 4px 12px;
        background: #Fff;
        border-radius: 4px;
        margin-right: 20px;
		position: relative;
      }
      .actt{
        background: #fff;
        // border-bottom: 3px solid #5974E0;
        // border-radius: 0;
		// border-bottom-right-radius: 4px;
        color: #5974E0;
      }
	  .actt{
		    &::after {
		          content: "";
		          width: 40%;
		          height: 5px;
				  border-radius: 3px;
		          transform: translate(-50%);
		          background-color: #5974E0;
		          position: absolute;
		          left: 50%;
		          bottom:-3px;
		        }

	  }

    }
  }
  .lqw{
    padding: 0 10px;
    margin: 0;
    margin-bottom: 20px;
  }
.nhgel{
  height: 170px;
  background-color: #313b61;
  width: 100%;
  position: absolute;
  top:0;
  left:0;
  z-index: 0;
}
	.app-container{
		background-color: #f3f4f6;
		padding-top: 10px;
		height: 180vh;

	}
	.ntgs{
	position: relative;
		// background-color: #fff;
		padding: 5px;
		// border-radius: 5px;
		padding-top: 10px;
	     padding: 10px 20px;
		.pagination-container{
			height: 50px;
		}
	}
	.nghfs{
	position: relative;
		background-color: #fff;
		padding-top: 18px !important;
		padding: 5px;
		// border-radius: 5px;
		// margin-bottom: 20px;
	}
	.ksf{
		img{
			width:100%;
			height: 100%;
		}
	}
   .ingwfaq{
	   font-weight: bold;
	   font-size: 16px;
   }
</style>