|
|
@@ -0,0 +1,1498 @@
|
|
|
+<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=" infinite-list" style="overflow:auto;height: 93vh" >
|
|
|
+ <div class="head-container">
|
|
|
+ <el-input
|
|
|
+ v-model="equipmentName"
|
|
|
+ placeholder="请输入设备名称"
|
|
|
+ clearable
|
|
|
+ size="small"
|
|
|
+ @blur="nsdfse"
|
|
|
+ prefix-icon="el-icon-search"
|
|
|
+ style="margin-bottom: 20px"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ <div class="head-container">
|
|
|
+ <el-tree
|
|
|
+ :data="deptOptions"
|
|
|
+ :props="defaultProps"
|
|
|
+ :expand-on-click-node="false"
|
|
|
+ :filter-node-method="filterNode"
|
|
|
+ ref="tree"
|
|
|
+ default-expand-all
|
|
|
+ highlight-current
|
|
|
+ @node-click="ishg"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <!-- <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>
|
|
|
+ </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-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 { listEquipmentManageNoPage, } from "@/api/manage/equipmentManage"
|
|
|
+// 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: [],
|
|
|
+ // 部门树选项
|
|
|
+ deptOptions: undefined,
|
|
|
+ defaultProps: {
|
|
|
+ children: "children",
|
|
|
+ label: "equipmentName",
|
|
|
+ value:'equipmentId'
|
|
|
+ },
|
|
|
+ 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,
|
|
|
+ equipmentName:null
|
|
|
+
|
|
|
+ };
|
|
|
+ },
|
|
|
+ created() {
|
|
|
+ this.isfse = false
|
|
|
+ // this.getList();
|
|
|
+ // this.getListtd()
|
|
|
+ this.getTreeselect()
|
|
|
+ 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: {
|
|
|
+ // 筛选节点
|
|
|
+ filterNode(value, data) {
|
|
|
+ if (!value) return true;
|
|
|
+ return data.label.indexOf(value) !== -1;
|
|
|
+ },
|
|
|
+ nsdfse(){
|
|
|
+ this.getTreeselect()
|
|
|
+ },
|
|
|
+ /** 查询部门下拉树结构 */
|
|
|
+ getTreeselect() {
|
|
|
+ // this.queryParams
|
|
|
+ let sngse={'equipmentName':this.equipmentName}
|
|
|
+ console.log(sngse)
|
|
|
+ listEquipmentManageNoPage(sngse).then(response => {
|
|
|
+ this.deptOptions = response.rows
|
|
|
+ this.deptOptions.filter(rou=>{
|
|
|
+ if(rou.children.length !=0){
|
|
|
+ for(var i=0;i < rou.children.length; i++){
|
|
|
+ rou.children[i].equipmentName = rou.children[i].channelNum
|
|
|
+ rou.children[i].equipmentId = rou.children[i].channelId
|
|
|
+ }
|
|
|
+ getChannelNumber(rou.children[0].channelId).then(response => {
|
|
|
+ let sgse = {
|
|
|
+ 'ip': response.data.equipmentIp,
|
|
|
+ 'account': response.data.account,
|
|
|
+ 'password': response.data.password,
|
|
|
+ 'port': response.data.port
|
|
|
+ }
|
|
|
+ WebVideoCtrl.I_Logout(this.szDeviceIdentify)
|
|
|
+ // WebVideoCtrl.I_StopAllPlay()
|
|
|
+ // WebVideoCtrl.I_DestroyPlugin()
|
|
|
+ // WebVideoCtrl.I_Resize()
|
|
|
+ this.getVideo(sgse)
|
|
|
+ // this.clickAddSnapPolygon()
|
|
|
+ var that = this
|
|
|
+ WebVideoCtrl.I_ShowPlugin()
|
|
|
+ })
|
|
|
+ }
|
|
|
+ this.loading = false
|
|
|
+ })
|
|
|
+ })
|
|
|
+ },
|
|
|
+ /** 查询通道管理列表 */
|
|
|
+ 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
|
|
|
+ console.log(val,row)
|
|
|
+ if(WebVideoCtrl){
|
|
|
+ console.log(this.szDeviceIdentify)
|
|
|
+ this.clickDelAllSnapPolygon()
|
|
|
+ WebVideoCtrl.I_Logout(this.szDeviceIdentify)
|
|
|
+ WebVideoCtrl.I_StopAllPlay()
|
|
|
+ WebVideoCtrl.I_DestroyPlugin()
|
|
|
+ WebVideoCtrl.I_Resize()
|
|
|
+ }
|
|
|
+ if(val.videoAddress == undefined){
|
|
|
+ let snghs = val.equipmentAddress.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()
|
|
|
+ }else{
|
|
|
+ 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>
|
wangmengwei