prevent_drowning_manage/ruoyi-ui/src/views/shipinggaoj/shebecanshu/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">
            <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">
						  搜索
						  </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 :class="ishge == index ? 'anche' : ''" style=" height: 36px;;line-height: 36px;margin-top: 10px;padding: 0 10px ;"v-for="(item,index) in channelNumberList" :key="index">
                              <div  @click="ishg(item,index)" style="display: flex;align-items: center;justify-content: space-between;">
                                <div style="font-size: 16px;
              color: #333333;"> {{item.channelNum == null?'暂无数据' : item.channelNum}}</div>
                                <img src="../../../assets/images/icon_htgl_zd.png" alt="" style="width: 10px;height: 12px;">
                              </div>
                          </div>
              <div>

              </div>

            </div>
					</el-col>
        <!-- v-if="isshoe" -->
        <el-col :span='19' style="padding-left: 30px; background-color: #fff;border-radius: 10px;padding: 20px; height: 100vh;" >
          <div style="display: flex;align-items: center;justify-content: space-between;margin-bottom: 18px;">
            <p style="margin: 0;border-left: 6px solid #03BF8A;margin-left: -20px;padding-left: 10px;font-weight: 800;">实时预览
              <span style="font-size: 12px; color: red;cursor: pointer;" @click="xiazag">下载插件</span>
              </p>
            </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>

         <div style="width: 100%; height: 480px;">
           <div v-if="isfse" id="divPlugin" style="width: 100%; height: 440px;" ></div>
         </div>


          <!-- <img src="../../../assets/images/pic_ssyl_lt.png" alt="" style="width: 100%; margin-top: 20px;"> -->
          <!-- 344 -->
          <!-- <video id="video" controls autoplay muted width="100%" height="480px"style="margin-top: 20px;"></video> -->
        						<!-- <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-dialog>

    <el-dialog :title="titles" :visible.sync="opens" width="1000px" append-to-body>
    </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 { listChannelNumber, listChannelNumbernopa,getChannelNumber, delChannelNumber, addChannelNumber, updateChannelNumber } from "@/api/system/channelNumber"
  import { listWarnManage, getWarnManage, delWarnManage, addWarnManage, updateWarnManage } from "@/api/manage/warnManage"
// 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 mqtt from 'mqtt';
import { MqttClient } from 'mqtt'
// 状态变量
 // const client = mqtt.connect('ws://13.229.167.76:1884/mqtt')
 var client = MqttClient||null
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,
    // 通道管理表格数据
    channelNumberList: [],
	  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,
   webRtcServer: null,
   camera_ip: '127.0.0.1:8000',
   g_iWndIndex:0,
   iRtspPort:'',//预览中的ip
   szDeviceIdentify:'',//ip_port,
   isfse:false,

   g_bEnableDraw:false,
    // 所有绘制的图形
    shapes: [],
    // 禁用
    isdisflag:false,
    connectionStatus:'',
    isConnected:false,
    connecting:false,
    messages:[{ type: 'sent' , content: '', timestamp: '' }],
    messageToSend:[],
    mqttConfig:{
    	url: 'ws://13.229.167.76:1884/mqtt',
    	topic: 'detection/rect'
    },
    mqttThemeName:{
    	url: 'ws://13.229.167.76:1884/mqtt',
    	topic: 'detection/rect'
    },
    ishge:0

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

  },
  mounted() {
  // this.toggleConnection()
     // this.webRtcServer = new WebRtcStreamer('video', location.protocol + '//' + this.camera_ip)
     //      //需要查看的rtsp地址,根据自己的摄像头传入对应的rtsp地址即可。注意：视频编码格式必须是H264的，否则无法正常显示，编码格式可在摄像头的后台更改
     //      this.webRtcServer.connect('rtsp://admin:zxy123456@192.168.101.64:554/h264/ch1/main/av_stream')
  	window.onresize = () => {
  	          this.changeTableMaxHeight()
  	        }
  	        this.changeTableMaxHeight()

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

   beforeDestroy() {
      // this.destoryVideo()
      if(WebVideoCtrl){
        console.log(this.szDeviceIdentify)
      	WebVideoCtrl.I_Logout(this.szDeviceIdentify)
        WebVideoCtrl.I_StopAllPlay()
      	WebVideoCtrl.I_DestroyPlugin()
        WebVideoCtrl.I_Resize()
      }
    },
  methods: {
    /** 查询通道管理列表 */
    getListtd() {
      this.loading = true
      let queryParams = {}
      listChannelNumbernopa().then(response => {
        this.channelNumberList = response.rows
        if(this.channelNumberList.length !=0){
                  let snghs = this.channelNumberList[0].videoAddress.split('@')
                  let snghst = snghs[1].split(':')
                  let snsgduan = snghst[1].split('/')
                   console.log(snghs,snghst,snsgduan)
                  let sgse={'ip':snghst[0],'duank':snsgduan[0],
                  'account':this.channelNumberList[0].account,
                  'password':this.channelNumberList[0].password,
                  'port':this.channelNumberList[0].port
                  }
           this.getVideo(sgse)
           WebVideoCtrl.I_ShowPlugin()
           this.loading = false
        }
        // getWarnManage(this.$route.query.id).then(response => {
          // this.form = response.data
        this.loading = false
      })
    },
    clickEnableDraw() {
        WebVideoCtrl.I_SetDrawStatus(true).then(() => {
            this.g_bEnableDraw = true;
            // showOPInfo("启用绘制成功！");
        }, (oError) => {
            // showOPInfo("启用绘制失败！", oError.errorCode, oError.errorMsg);
        });
    },
    getdrawFn(){
      this.isdisflag=!this.isdisflag;
      if(this.isdisflag){
        this.clickDisableDraw()
      }else{
        this.clickEnableDraw()
      }
    },
    // 禁用多边形绘制
    clickDisableDraw() {
        WebVideoCtrl.I_SetDrawStatus(false).then(() => {
            this.g_bEnableDraw = false;
            // showOPInfo("禁用绘制成功！");
            this.clickAddSnapPolygon()
        }, (oError) => {
            // showOPInfo("禁用绘制失败！", oError.errorCode, oError.errorMsg);
        });
    },
    clickGetSnapPolygon() {
      var that=this;
        WebVideoCtrl.I_GetSnapPolygonInfo(this.g_iWndIndex).then((szXml) => {
            console.log('获取图形:', szXml);
            that.getpoint(szXml)
        });
    },
    //获取x，y轴
    getpoint(xmlString){
      var that=this;
        const parser = new DOMParser();
            const xmlDoc = parser.parseFromString(xmlString, "text/xml");

            // 获取所有 SnapPolygon 节点
            const polygonNodes = xmlDoc.querySelectorAll("SnapPolygon");
             var newArr=[];
             var arr1=JSON.parse(JSON.stringify(this.shapes))
            // 提取每个多边形的 id 和坐标点
            this.polygons = Array.from(polygonNodes).map((polygonNode) => {
              const id = polygonNode.querySelector("id").textContent;
              const pointNodes = polygonNode.querySelectorAll("point");

              const points = Array.from(pointNodes).map((pointNode) => ({
                x: pointNode.querySelector("x").textContent,
                y: pointNode.querySelector("y").textContent,
              }));
              var newobj={
                id:id,
                points:points
              }
              newArr.push(newobj)
              // return { id, points };
            });
           this.shapes = arr1.map(item1 => {
             const matchedItem = newArr.find(item2 => item2.id == item1.id);
             return {
               id: item1.id,
               points: matchedItem ? matchedItem.points : item1.points
             };
           });
        // this.shapes=JSON.parse(JSON.stringify(newArr))
        this.messageToSend = this.shapes
        this.sendMessage()
        console.log(this.shapes)
    },
    toggleConnection(){
      if (this.isConnected) {
        // 断开连接
        client.end()
        this.isConnected= false
        this.connectionStatus = 'Disconnected'
        return
      }

      // 建立连接
      this.connecting = true
      try {
        client= mqtt.connect(this.mqttConfig.url, {
          clientId: 'mqttjs_' + Math.random().toString(16).substr(2, 8),
          keepalive: 60,
          clean: true,
          connectTimeout: 4000,
          reconnectPeriod: 1000
        })
        client.on('connect', () => {
          this.isConnected = true
          this.connectionStatus= 'Connected'
          this.connecting = false
          console.log(3)
          // 订阅主题
          client.subscribe(this.mqttConfig.topic, (err) => {
            if (err) {
              console.error('Subscribe error:', err)
            }else{
               console.log('成功订阅 detection/rect 主题！')
            }

          })
        })
        client.on('message', (topic, message) => {
          // 接受信息
          console.log(topic,message)
          this.messages.unshift({
            type: 'received',
            content: message.toString(),
            timestamp: new Date().toLocaleTimeString()
          })
        })
        client.on('error', (err) => {
          console.error('MQTT Error:', err)
          this.connectionStatus= 'Error'
          this.connecting = false
        })
      } catch (error) {
        console.error('Connection error:', error)
        this.connectionStatus= 'Error'
        this.connecting = false
      }
    },
    sendMessage(){
      if (!client || !this.messageToSend) return
      this.messageToSend = JSON.stringify(this.messageToSend)
      console.log(this.messageToSend)
      client.publish(this.mqttConfig.topic, this.messageToSend)
      this.messages.unshift({
        type: 'sent',
        content: this.messageToSend,
        timestamp: new Date().toLocaleTimeString()
      })
      this.messageToSend = []
    },
    // 添加图形，最多不超过16个图形
    clickAddSnapPolygon() {
      var that=this;
        if (!this.g_bEnableDraw) {
            return;
        }
        var shapes=JSON.parse(JSON.stringify(this.shapes))
        let szId = 1; // 默认从 1 开始
        if(shapes&&shapes.length>0){
          const ids  = shapes.map(item => item.id).sort((a, b) => a - b);
          for (const id of ids) {
            if (id > szId) {
              // 如果当前 id > szId，说明 szId 未被使用
              break;
            }
            szId = Number(id) + 1; // 否则，继续检查下一个
          }
        }
        if (!/^[1-9]\d*$/.test(szId)) {
            alert("图形ID只能为正整数！");
            return
        }
        if (Number(szId) > 32) {
            alert("图形ID范围1-32！");
            return
        }
        console.log(szId)
        // var szName = encodeString($("#snapName").val());
        var szName = '';
        var szInfo={

        }
        var szInfo = "<?xml version='1.0' encoding='utf-8'?>";
        szInfo += "<SnapPolygonList>";
        szInfo += "<SnapPolygon>";
        szInfo += "<id>" + szId + "</id>";          // [1, 32]
        szInfo += "<polygonType>0</polygonType>"; //如果想绘制多边形，polygonType指需要改为1
        szInfo += "<PointNumMax>17</PointNumMax>";  // [MinClosed, 17]
        szInfo += "<MinClosed>4</MinClosed>";       // [4, 17]
        szInfo += "<tips>#" + szId + "#" + szName + "</tips>";
        szInfo += "<isClosed>false</isClosed>";
        szInfo += "<color><r>0</r><g>255</g><b>0</b></color>";
        szInfo += "<pointList/>";
        szInfo += "</SnapPolygon>";
        szInfo += "</SnapPolygonList>";

        WebVideoCtrl.I_SetSnapPolygonInfo(this.g_iWndIndex, szInfo).then(() => {
            // showOPInfo("添加图形成功！");
            var obj={
              id:szId,
              points:[]
            }
            if(this.shapes&&this.shapes.length){
              this.shapes.splice(Number(szId)-1,0,obj)
            }else{
              this.shapes.push(obj)
            }
        });
        WebVideoCtrl.I_SetSnapDrawMode(this.g_iWndIndex, 2);
    },
    //删除图形
    clickDelSnapPolygon(szId,idx) {
        if (!this.g_bEnableDraw) {
            return;
        }

        var aShapes = [];
        aShapes.push({
            polygonType: 0,
            id: szId
        });
        this.shapes.splice(idx,1)
        WebVideoCtrl.I_ClearSnapInfo(this.g_iWndIndex, aShapes);
    },
    // 清空图形
    clickDelAllSnapPolygon() {
        if (!this.g_bEnableDraw) {
            return;
        }
        WebVideoCtrl.I_ClearSnapInfo(this.g_iWndIndex).then(() => {
            // showOPInfo("清空图形成功！");
             this.shapes=[];
        }, (oError) => {
            // showOPInfo("清空图形失败！", oError.errorCode, oError.errorMsg);
        });
    },



    // 通道点击
    ishg(val,row){
      this.ishge = row
      this.isfse = false
      if(WebVideoCtrl){
        console.log(this.szDeviceIdentify)
        this.clickDelAllSnapPolygon()
      	WebVideoCtrl.I_Logout(this.szDeviceIdentify)
        WebVideoCtrl.I_StopAllPlay()
      	WebVideoCtrl.I_DestroyPlugin()
        WebVideoCtrl.I_Resize()
      }
      let snghs = val.videoAddress.split('@')
             let snghst = snghs[1].split(':')
             let snsgduan = snghst[1].split('/')
              console.log(snghs,snghst,snsgduan)
             let sgse={'ip':snghst[0],'duank':snsgduan[0],
             'account':val.account,
             'password':val.password,
             'port':val.port
             }
      this.getVideo(sgse)
      WebVideoCtrl.I_ShowPlugin()
      // this.clickStartRealPlay('192.168.101.64', '80',1, 0, 1);

    },


	  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 结构发生变化的时确保滚动效果正常
	          }
	        })
	      },
    // 取消按钮
    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");
    },

	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)
		    },
    // 播放摄像头
    getVideo(row) {
    	var that=this;
       this.isfse  = true
       console.log(row)
    	this.initVideoPlay(row.ip, row.port, row.account, row.password,'divPlugin')
    },
    // 有插件
    initVideoPlay(ip, port, username, password,id) {
    	var that = this;
    	var g_iWndIndex = 0; //可以不用设置这个变量，有窗口参数的接口中，不用传值，开发包会默认使用当前选择窗口
    	var g_oLocalConfig = null; //本地配置
    	// let ip = this.szIP //硬盘录像机ip
    	// let port = this.szPort //默认为80端口
    	// let username = this.szUsername //账号：
    	// let password = this.szPassword // 密码
    	var iRtspPort = ''
    	// 1.初始化插件参数及插入插件
    	WebVideoCtrl.I_InitPlugin({
    		bWndFull: true, //是否支持单窗口双击全屏，默认支持 true:支持 false:不支持
    		iWndowType: 1,
    		bDebugMode: true,
    		cbSelWnd: function(xmlDoc) {
    			g_iWndIndex = parseInt($(xmlDoc).find("SelectWnd").eq(0).text(), 10);
    			const szInfo = "当前选择的窗口编号：" + g_iWndIndex;
    			this.g_iWndIndex = g_iWndIndex;
    			console.log(szInfo, "szInfo");
    		},
    		cbDoubleClickWnd: function(iWndIndex, bFullScreen) {
    			let szInfo = "当前放大的窗口编号：" + iWndIndex;
    			if (!bFullScreen) {
    				szInfo = "当前还原的窗口编号：" + iWndIndex;
    			}
    			// console.log(szInfo, "szInfo");
    		},
    		cbEvent: function(iEventType, iParam1, iParam2) {
    			if (2 == iEventType) {
    				// 回放正常结束
    				console.log("窗口" + iParam1 + "回放结束！");
    			} else if (-1 == iEventType) {
    				console.log("设备" + iParam1 + "网络错误！");
    			} else if (3001 == iEventType) {
    				clickStopRecord(g_szRecordType, iParam1);
    			}
    		},
    		//2.登录摄像头
    		cbInitPluginComplete: function() {
    			const oLiveView = {
    				iProtocol: 1, // protocol 1：http, 2:https
    				szIP: ip, // protocol ip
    				szPort: port, // protocol port
    				szUsername: username, // device username
    				szPassword: password, // device password
    				iStreamType: 1, // stream 1：main stream  2：sub-stream  3：third stream  4：transcode stream
    				iChannelID: 1, // channel no
    				bZeroChannel: false, // zero channel
    			};
    			// var swidth=Number((that.width*Number(that.scale))).toFixed(2)
    			// var sheight=Number((that.height*Number(that.scale))).toFixed(2)
    			// that.swidth=swidth
    			// that.sheight=sheight
    			WebVideoCtrl.I_InsertOBJECTPlugin(id).then(
    				() => {
    					// setTimeout(function(){
    					// 	WebVideoCtrl.I_Resize(swidth,sheight)
    					// },300)
    					WebVideoCtrl.I_Login(
    						oLiveView.szIP,
    						oLiveView.iProtocol,
    						oLiveView.szPort,
    						oLiveView.szUsername,
    						oLiveView.szPassword, {
    							timeout: 3000,
    							async: false,
    							success: function(xmlDoc) {
    								console.log(" 登录成功！");
    								let a = ip
    								let b = port
    								setTimeout(function() {
    									//延迟方法
    									setTimeout(function() {
    										//调用预览摄像头这里可以循环创建
    										that.clickStartRealPlay(a, b,1, 0, 1);
    										// that.clickStartRealPlay(a, b, 1, 1,2);
    										// that.clickStartRealPlay(a, b, 1, 2,3);
    										// clickStartRealPlay(a,b, 1, 3, 4);
    										// clickStartRealPlay(a,b, 1, 4, 5);
    										// clickStartRealPlay(a,b, 1, 5, 6);
    										// clickStartRealPlay(a,b, 1, 6, 7);
    										// clickStartRealPlay(a,b, 1, 7, 8);
    									}, 1000);


    									setTimeout(function() {
    										// 获取通道 (如果多个摄像头需要获取多个通道需要调用)
    										// getChannelInfo(a);
    										//获取端口 （在这里获取RTSP 端口号 预览时传入）
    										getDevicePort(a);
    									}, 10)

    								}, 10);
    							},
    							error: function(oError) {
    								console.log(" 登录失败！", oError);
    							},
    						}
    					);
    					// 检查插件是否最新
    					WebVideoCtrl.I_CheckPluginVersion().then((bFlag) => {
    						if (bFlag) {
    							alert(
    								"检测到新的插件版本，双击开发包目录里的HCWebSDKPlugin.exe升级！"
    							);

    						}
    					});
    				},
    				() => {
    					alert(
    						"插件初始化失败，请确认是否已安装插件；如果未安装，请双击开发包目录里的HCWebSDKPlugin.exe安装！"
    					);

    				}
    			);

    		},
    	});
    	// 3.获取通道
    	function getChannelInfo(a) {
    		var szDeviceIdentify = a,
    			oSel = null; //通道列表
    		if (null == szDeviceIdentify) {
    			return;
    		}

    		// 模拟通道 有
    		WebVideoCtrl.I_GetAnalogChannelInfo(szDeviceIdentify, {
    			success: function(xmlDoc) {
    				var oChannels = $(xmlDoc).find("VideoInputChannel");

    				$.each(oChannels, function(i) {
    					var id = $(this).find("id").eq(0).text(),
    						name = $(this).find("name").eq(0).text();
    					if ("" == name) {
    						name = "Camera " + (i < 9 ? "0" + (i + 1) : (i + 1));
    					}

    					// console.log(id + "通道id是")
    					// console.log(name + "通道name是")
    				});
    				console.log(szDeviceIdentify + " 获取模拟通道成功！");
    			},
    			error: function(oError) {
    				console.log(szDeviceIdentify + " 获取模拟通道失败！", oError.errorCode, oError.errorMsg);
    			}
    		});
    		// 数字通道
    		WebVideoCtrl.I_GetDigitalChannelInfo(szDeviceIdentify, {
    			success: function(xmlDoc) {
    				var oChannels = $(xmlDoc).find("InputProxyChannelStatus");

    				$.each(oChannels, function(i) {
    					var id = $(this).find("id").eq(0).text(),
    						name = $(this).find("name").eq(0).text(),
    						online = $(this).find("online").eq(0).text();
    					if ("false" == online) { // 过滤禁用的数字通道
    						return true;
    					}
    					if ("" == name) {
    						name = "IPCamera " + (i < 9 ? "0" + (i + 1) : (i + 1));
    					}
    				});
    				console.log(szDeviceIdentify + " 获取数字通道成功！");
    			},
    			error: function(oError) {
    				console.log(szDeviceIdentify + " 获取数字通道失败！", oError.errorCode, oError.errorMsg);
    			}
    		});
    		// 零通道
    		WebVideoCtrl.I_GetZeroChannelInfo(szDeviceIdentify, {
    			success: function(xmlDoc) {
    				var oChannels = $(xmlDoc).find("ZeroVideoChannel");

    				$.each(oChannels, function(i) {
    					var id = $(this).find("id").eq(0).text(),
    						name = $(this).find("name").eq(0).text();
    					if ("" == name) {
    						name = "Zero Channel " + (i < 9 ? "0" + (i + 1) : (i + 1));
    					}
    					if ("true" == $(this).find("enabled").eq(0).text()) { // 过滤禁用的零通道

    					}
    				});
    				console.log(szDeviceIdentify + " 获取零通道成功！");
    			},
    			error: function(oError) {
    				console.log(szDeviceIdentify + " 获取零通道失败！", oError.errorCode, oError.errorMsg);
    			}
    		});
    	};

    	//4.获取端口
    	function getDevicePort(a) {
    		var szDeviceIdentify = a;

    		if (null == szDeviceIdentify) {
    			return;
    		}
    		WebVideoCtrl.I_GetDevicePort(szDeviceIdentify).then((oPort) => {
    			// console.log(oPort.iDevicePort + "iDevicePort的值是")
    			// console.log(oPort.iRtspPort + "iRtspPort的值是")
    			console.log(szDeviceIdentify + " 获取端口成功！");
    			iRtspPort = oPort.iRtspPort
    			that.iRtspPort = iRtspPort
    		}, (oError) => {
    			var szInfo = "获取端口失败！";
    			console.log(szDeviceIdentify + szInfo, oError.errorCode, oError.errorMsg);
    		});
    	};
    },
    // 5.开始预览
    clickStartRealPlay(szIP, szPort, iStreamType, iWndIndex, iChannelID) {
      var that=this;
    	var oWndInfo = WebVideoCtrl.I_GetWindowStatus(this.g_iWndIndex),
    		szDeviceIdentify = szIP + "_" + szPort, //ip
    		iChannelID = iChannelID,
    		bZeroChannel = false,
    		iPort = this.iRtspPort,
    		szInfo = "";
    	iStreamType = iStreamType;
    	if (null == szDeviceIdentify) {
    		return null;
    	}
    	this.szDeviceIdentify = szDeviceIdentify;
    	var startRealPlay = function() {
    		WebVideoCtrl.I_StartRealPlay(szDeviceIdentify, {
    			iStreamType: iStreamType,
    			iChannelID: iChannelID,
    			bZeroChannel: bZeroChannel,
    			iWndIndex: iWndIndex, //要播放的窗口
    			iPort: iPort, //如果多个摄像头需要必填 （RTSP 端口号）
    			success: function() {
    				szInfo = "开始预览窗口" + iWndIndex + "成功！";
    				console.log(szDeviceIdentify + " " + szInfo);
    			},
    			error: function(oError) {
    				console.log(szDeviceIdentify + " 开始预览窗口" + iWndIndex + "失败！", oError
    					.errorCode, oError.errorMsg);
    			}
    		});
    	};

    	if (oWndInfo != null) { // 已经在播放了，先停止
    		WebVideoCtrl.I_Stop({
    			success: function() {
    				startRealPlay();
    			}
    		});
    	} else {
    		startRealPlay();
    	}
    },
    xiazag(){
    var loadUrl = 'http://172.28.195.154:15010/prod-api/profile/HCWebSDKPluginsUserSetup.exe'
    window.open(loadUrl, );
    }
  }
};
</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;
   }
.dflex{display: flex;}
.dflext{display: flex;align-items: flex-start;}
.drawings-list{width: 100%;flex: 0 0 auto;padding-left: 10px;line-height:36px ;
  .delimg{width: 15px;height: 15px;margin-left: 5px;}
  .txt{font-size: 12px;padding-left: 5px;flex: 1;}
  .tflex{display: flex;align-items: center;}
}
.disbtn{display: flex;align-items: center;flex: 0 0 auto;min-height: 34px;cursor: pointer;
  img{width: 14px;height: 14px;margin-right: 10px;}
  font-weight: 500;
  font-size: 14px;
  color: #444444;
}
.anche{
  background: #E7F1EE !important;
  border-radius: 4px  !important;
}
</style>