|
|
@@ -1,1419 +0,0 @@
|
|
|
-<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>
|
wangmengwei