当前仓库属于关闭状态,部分功能使用受限,详情请查阅 仓库状态说明
1 Star 0 Fork 4

沉淀/JG001
关闭

forked from Leng/jg001 
加入 Gitee
与超过 1200万 开发者一起发现、参与优秀开源项目,私有仓库也完全免费 :)
免费加入
文件
该仓库未声明开源许可证文件(LICENSE),使用请关注具体项目描述及其代码上游依赖。
克隆/下载
index.html 19.74 KB
一键复制 编辑 原始数据 按行查看 历史
Leng 提交于 2019-09-26 14:31 . 说明:
<!DOCTYPE html>
<html>
<head>
<title>3D可视化综合管理平台</title>
<!-- 公共样式 -->
<link rel="stylesheet" href="common/css/public.css">
<!--告警提示面板-->
<link rel="stylesheet" href="common/css/report.css">
<!-- element-ui -->
<link rel="stylesheet" href="plugin/element/element.css">
<!-- iconfont -->
<link rel="stylesheet" href="common/iconfont/iconfont.css">
<meta charset="UTF-8">
<style>
</style>
<!-- ht -->
<script src="plugin/ht/ht.js"></script>
<script src="plugin/ht/ht-obj.js"></script>
<script src="plugin/ht/ht-form.js"></script>
<script src="plugin/ht/texture.js"></script>
<script src="plugin/ht/ht-overview.js"></script>
<script src="plugin/ht/ht-animation.js"></script>
<script src="plugin/ht/ht-flow.js"></script>
<!-- vue -->
<script src="plugin/vue/vue.js"></script>
<!-- jquert -->
<script src="plugin/jquery/jquery-3.3.1.min.js"></script>
<!-- element -->
<script src="plugin/element/element-ui2.11.1.js"></script>
<!-- echarts -->
<script src="plugin/echarts/echarts-gl.min.js"></script>
</head>
<body onload="init()" onmousemove="getmouse(event)">
<div id="htforweb" v-cloak>
<!-- 进入模型提示 -->
<div class="mleft"><i class="iconfont icon-shouye mr5"></i><span>{{tipname}}</span><span v-show="tshow">1层</span></div>
<!-- 提示音 -->
<div class="playmp3">
<audio :src="'static/audio/'+item.src" v-for="(item,index) in voiceArr" :class="'vioce'+(index+1)">
您的浏览器不支持 audio 标签。
</audio>
<audio class="vioceHigh" src="static/specialAudio/highpoint.mp3"></audio>
<audio class="vioceInvade" src="static/specialAudio/invade.mp3"></audio>
</div>
<!-- 视频轮播,电子巡更监控视频 -->
<div class="listvideos tdrag" v-show="isvideolist">
<p class="vlname">{{vlistname}}<i class="iconfont icon-guanbi fr mr5" @click="isvideolist=false"></i></p>
<div v-for="(item,index) in listvideo" :key="index">
<!-- <p class="listvp dnone">{{item.name}}</p> -->
<object type='application/x-vlc-plugin' width="100%" height="40%">
<param name='mrl' :value='item.url' />
<param name='volume' value='50' />
<param name='autoplay' value='true' />
<param name='loop' value='false' />
<param name="wmode" value="transparent">
</object>
</div>
</div>
<!-- 告警定位提示 -->
<div class="warntips tdrag" v-show="closewarntrue">
<h3 class="warntitle"><span class="fl ml10">{{warntipsdata2.deviceName}}({{wname}})</span><span class="fr mr15"><i
class="iconfont icon-guanbi" @click="closewarntrue=!closewarntrue"></i></span></h3>
<el-tabs type="border-card" v-model="activeName">
<el-tab-pane name="pane1" v-if="pane1show">
<span slot="label"><i class="iconfont mr5" :class="paneicon1"></i>{{panename1}}</span>
<div v-for="item in warntipsdata1">
<!-- <p>视频流地址:{{item.url}}</p> -->
<div style="width: 464px; height: 200px;">
<object type='application/x-vlc-plugin' width="100%" height="100%">
<param name='mrl' :value='item.url' />
<param name='volume' value='50' />
<param name='autoplay' value='true' />
<param name='loop' value='false' />
<param name="wmode" value="transparent">
</object>
</div>
</div>
</el-tab-pane>
<el-tab-pane name="pane2">
<span slot="label"><i class="iconfont mr5" :class="paneicon2"></i>{{panename2}}</span>
<div>
<p v-show="warntipsdata2.deviceId!=''">设备ID:{{warntipsdata2.deviceId}}</p>
<p v-show="warntipsdata2.hostIp!=''">IP:{{warntipsdata2.hostIp}}</p>
<p>房间:{{warntipsdata2.address}}</p>
<p v-show="warntipsdata2.rtsp_url!=''">url:{{warntipsdata2.rtsp_url}}</p>
<p>名称:{{warntipsdata2.deviceName}}</p>
</div>
</el-tab-pane>
<el-tab-pane name="pane3" v-if="pane3show">
<span slot="label"><i class="iconfont mr5" :class="paneicon3"></i>{{panename3}}</span>
<div v-for="item in warntipsdata3">
<p v-if="warntipsdata3==''">
暂无告警信息
</p>
<div v-else>
<p>告警详情:{{item.alarmMessage}}</p>
<p>告警时间:{{item.alarmTime}}</p>
</div>
</div>
<el-button type="primary" class="fr" @click="warningdetermination(warntipsdata3[0].alarmId)" v-if="warntipsdata3!=''">处理告警</el-button>
</el-tab-pane>
</el-tabs>
<el-tabs v-if="warntipsdata3!=''">
<el-tab-pane>
<span slot="label" class="ml10">{{panename4}}</span>
<div style="height: 200px;" v-if="linkdata4!=''">
<object type='application/x-vlc-plugin' width="100%" height="100%">
<param name='mrl' :value='linkdata4' />
<param name='volume' value='50' />
<param name='autoplay' value='true' />
<param name='loop' value='false' />
<param name="wmode" value="transparent">
</object>
</div>
<p v-else>暂无关联视频</p>
</el-tab-pane>
</el-tabs>
</div>
<!-- 统计图start -->
<!-- <transition name="el-zoom-in-top"> -->
<div id="canvasmain" v-if="canvashow">
</div>
<!-- <transition> -->
<!-- 统计图end -->
<!-- 头部start -->
<div class="header">
<!-- 平台 -->
<img src="static/icon/logo.png">
<h2>3D可视化综合管理平台</h2>
<!-- 概览 -->
<div class="gailan">
<i class="iconfont icon-shouye"></i>
<span class="cp" v-text="level1" @click="FirstAngleView(32)"></span>
<i v-show="level2==''?level2hide:!level2hide" class="iconfont icon-titleyou"></i>
<span v-text="level2"></span>
<i v-show="level3==''?level3hide:!level3hide" class="iconfont icon-titleyou"></i>
<span v-text="level3"></span>
</div>
<div class="saveView">
<el-checkbox v-model="isSaveView">保存外景视角</el-checkbox>
</div>
<!-- login -->
<div class="logininfo">
<!-- 全屏显示 -->
<div onclick="fullScreen()">
<i class="iconfont icon-quanping"></i>
<a class="item" title="全屏显示,按ESC键可退出全屏显示">全屏显示</a>
</div>
<!-- 管理后台 -->
<div onclick="consoleOpen()">
<i class="iconfont icon-houtaiguanli"></i>
<a class="item" title="打开3D可视化管理后台登录页面">管理后台</a>
</div>
<!-- 操作说明 -->
<div onclick="helpDocOpen()">
<i class="iconfont icon-caozuoshouce"></i>
<a class="item" title="打开在线操作说明">操作说明</a>
</div>
<div class="logininfonext" @click.stop="showsignout">
<i class="iconfont icon-yonghu"></i>
<span>{{user}}</span>
<i class="iconfont icon-you"></i>
</div>
</div>
<!-- signout -->
<div class="signout" v-show="sshow" @click="signout">退出登录</div>
</div>
<!-- 左侧 -->
<div class="leftcontent" v-show="leftcontentshow">
<ul class="ful">
<li v-for="(item,index) in leftlist" :key="item.id" @click="leftlistclick(item)">
<i class="iconfont" :class="item.icon"></i>
<span v-text="item.name"></span>
</li>
</ul>
<div class="morecontent" v-show="morecontentshow">
<ul>
<li v-for="item in morecontent" :key="item.id" @click="moreclick(item)">
<i class="iconfont" :class="item.icon"></i>
</li>
</ul>
</div>
</div>
<!-- 左侧详细 -->
<div class="leftdetail" v-show="leftdetailshow">
<!--告警面板-->
<div class="reportPanel" v-show="dnone">
<div v-for="(item,index) in getReportArr" :key="index">
<span class="closed" @click="closedPanel">&times;</span>
<div class="panel_caption">
{{item.deviceName}}
</div>
<div class="panel_content">
<p>告警详情:{{item.alarmMessage}}</p>
<p>告警时间:{{item.alarmTime}} </p>
</div>
</div>
</div>
<!-- 告警信息 -->
<div class="warninfo" v-show="warnshow">
<h3>告警筛选</h3>
<ul>
<li v-for="item in warninfodata" :key="item.id">
<span class="fl">{{item.name}}:{{item.num==''?0:item.num}}</span>
<div @click="warncheck(item)" class="mr30 fr">
<el-switch v-model="item.flag" active-color="#4D9EFF" inactive-color="#999">
</el-switch>
</div>
</li>
</ul>
<div class="warnnext">
<span class="fl">告警信息</span>
<div class="warnright" v-show="warnlistdata!='' && warnlistdata!=undefined">
<div>
<el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox>
</div>
<span class="ml10 cursorp" @click="batch">批量处理</span>
</div>
</div>
<div class="warnlistcontent scrollbar">
<div class="warnlist" v-for="(item,index) in warnlistdata" :key="item.alarmId" :title="item.alarmMessage">
<span class="fl pt6">
<el-checkbox-group v-model="checkedCities" @change="handleCheckedCitiesChange">
<el-checkbox :label="item.alarmId" :key="item.alarmId">{{index+1}}.</el-checkbox>
</el-checkbox-group>
</span>
<div class="warnlistleft" @click="warningposition(item)">
<span class="elips">
{{item.deviceName}}
</span>
<div class="bottom clearfix">
<time class="time">{{item.alarmTime}}</time>
</div>
</div>
<div class="warnlistright">
<div @click="warningposition(item)">
<i class="iconfont icon-dingwei"></i>
<span>告警定位</span>
</div>
<div @click="warningdetermination(item)">
<i class="iconfont icon-queding"></i>
<span>告警确认</span>
</div>
</div>
</div>
</div>
</div>
<!-- 设备搜索 -->
<div class="device" v-show="deviceshow">
<h3>设备查询</h3>
<div class="seldevice">
<el-input placeholder="请输入设备名称" v-model="seldevice" class="input-with-select" @keyup.enter.native="seldevicedata(seldevice)">
<el-select v-model="seldeviceprev" slot="prepend" placeholder="请选择">
<el-option label="设备ID" value="devid"></el-option>
<el-option label="设备名称" value="devname"></el-option>
<!-- <el-option label="设备类别" value="devtype"></el-option> -->
</el-select>
<el-button slot="append" icon="el-icon-search" @click="seldevicedata(seldevice)"></el-button>
</el-input>
</div>
<div class="mt20">搜索结果共:{{deviceselnum}}</div>
<el-row>
<el-col :span="9">
<div class="grid-content bg-purple">设备名称</div>
</el-col>
<el-col :span="9">
<div class="grid-content bg-purple-light">所在位置</div>
</el-col>
</el-row>
<!-- 查询设备列表 -->
<div class="seldevicelist scrollbar" v-infinite-scroll="seldevicedataload">
<h1 class="seldevnull" v-if="deviceselnum===0">暂无数据</h1>
<el-row type="flex" class="row-bg" justify="space-between" v-for="item in seldevicelist" :key="item.id">
<el-col :span="6">
<div class="grid-content bg-purple elips" :title="item.deviceName">{{item.deviceName}}</div>
</el-col>
<el-col :span="6">
<div class="grid-content bg-purple-light elips" :title="item.address">{{item.address}}</div>
</el-col>
<el-col :span="6" v-if="deviceselnum">
<div class="grid-content bg-purple devicedetail" @click="warningposition(item)">
<i class="iconfont icon-dingwei fl"></i>
<span>设备定位</span>
</div>
</el-col>
</el-row>
</div>
</div>
<!-- 电子巡更 -->
<div class="patrol" v-show="patrolshow">
<h3>巡更采集</h3>
<el-row type="flex" justify="center">
<el-button type="primary" plain @click="startpatrol">开始采集</el-button>
</el-row>
<div class="tpatrol">巡更路线:{{patrolcount}} 条
<el-input placeholder="请输入查询名称,按Enter搜索" v-model="selpatrol" class="input-with-select" @keyup.enter.native="getPatrolLineList(selpatrol)">
</el-input>
</div>
<div class="patrolcontent scrollbar">
<h1 class="seldevnull" v-if="patrolcount==0">暂无数据</h1>
<div class="patrollist" v-for="item in patrollistdata" :key="item.lineId">
<div class="patrollistleft" :title="item.lineName">
<span class="elips">
{{item.lineName}}
</span>
</div>
<div class="patrollistright">
<div @click="getPatrolLineInfo(item.lineId)">
<i class="iconfont icon-luxian"></i>
<span>巡更</span>
</div>
<div @click="patroldel(item.lineId)">
<i class="iconfont icon-shanchu"></i>
<span>删除</span>
</div>
</div>
</div>
</div>
</div>
<!-- 视频轮播 -->
<div class="videos" v-show="videoshow">
<h3><span>视频方案</span><span class="fr cp" @click="addprogramme"><i class="iconfont icon-tianjia mr5"></i>新建</span></h3>
<div class="scrollbar autoh">
<!-- <el-collapse accordion v-for="(item,index) in videodata" :key="item.groupId" v-model="activeNames" @change="handleChange"> -->
<el-collapse accordion v-for="(item,index) in videodata" :key="item.groupId" v-model="activeNames">
<el-collapse-item :name="item.groupId">
<template slot="title">
<span class="vtitle">
<span class="fl elips w90s">{{index+1}}. {{item.groupName}}</span>
<span class="fr">({{item.vdata==undefined?0:item.vdata.length}})</span>
</span>
<div class="videofunction">
<div @click.stop="videoedit(item)" v-show="item.videostate">
<i class="iconfont icon-bianji"></i>
<span>编辑</span>
</div>
<div @click.stop="videosave(item)" v-show="!item.videostate" :class="item.groupId">
<i class="iconfont icon-baocun"></i>
<span>保存</span>
</div>
<div @click.stop="videolistdel(item.groupId)">
<i class="iconfont icon-shanchu"></i>
<span>删除</span>
</div>
<div @click.stop="videoplay(item.groupName,item.vdata)">
<i class="iconfont icon-bofang"></i>
<span>播放</span>
</div>
</div>
</template>
<div class="videolist" v-for="itemlist in item.vdata" :key="itemlist.groupId" @click="videoaddress(itemlist)">
<i class="iconfont icon-icon-video mr15"></i>
<span>{{itemlist.deviceName}}</span>
<i class="iconfont icon-shanchu delvideo" @click.stop="delvideo(itemlist)" v-show="!item.videostate"></i>
</div>
<div v-if="item.vdata=='' || item.vdata==undefined">
暂无视频
</div>
</el-collapse-item>
</el-collapse>
</div>
</div>
</div>
<!-- 巡更开始操作界面 -->
<div class="patrolstart tdrag" v-show="patrolstartshow">
<div class="nextclose">
<!-- <span class="fl">操作状态</span> -->
<icon class="iconfont icon-guanbi fr" @click="closepatrolui()"></icon>
</div>
<div class="block">
<span>巡更速度 </span>
<el-slider :max="maxspeed" class="elslider nodrag" v-model="startslider" @change="sliderval($event,maxspeed)"></el-slider>
</div>
<div class="mt10">
<ul>
<li v-for="item in startpatroldata" :class="item.color" :key="item.id" v-show="item.flag" @click="patrolui(item)">
<i class="iconfont" :class="item.icon"></i>
<span v-text="item.name"></span>
</li>
</ul>
</div>
</div>
<!-- 开始采集 -->
<!-- 保存采集,取消采集 -->
<div class="collectionstart tdrag" v-show="collectionstartshow">
<ul>
<li v-for="item in startcollectiondata" :key="item.id" @click="collectionui(item)">
<i class="iconfont" :class="item.icon"></i>
<span v-text="item.name"></span>
</li>
</ul>
</div>
<!-- 保存采集弹出界面 -->
<div class="dialogcontent">
<el-dialog title="巡更方案" :visible.sync="dialogFormVisible" :destroy-on-close=true>
<el-form :model="PatrolFormData" ref="PatrolFormData" label-width="100px" class="demo-ruleForm">
<el-form-item
label="巡更名称"
prop="name"
:rules="[
{ required: true, message: '巡更名称不能为空'}
]"
>
<el-input type="text" placeholder="请输入巡更名称" v-model="PatrolFormData.name" autocomplete="off"></el-input>
</el-form-item>
<el-form-item
label="巡更范围"
prop="range"
:rules="[
{ required: true, message: '巡更范围不能为空'},
{ type: 'number', message: '巡更范围必须为数字'}
]"
>
<el-input type="age" placeholder="请输入数字,单位默认为米" v-model.number="PatrolFormData.range" autocomplete="off"></el-input>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click="dialogFormVisible = false">取 消</el-button>
<el-button type="primary" @click="submitForm('PatrolFormData')">确 定</el-button>
<!-- @click="dialogFormVisible = false" -->
</div>
<!-- <el-form-item>
<el-button type="primary" @click="submitForm('numberValidateForm')">提交</el-button>
<el-button @click="resetForm('numberValidateForm')">重置</el-button>
</el-form-item> -->
</el-dialog>
</div>
<!-- 右侧 -->
<!-- 隐藏 -->
<transition name="el-fade-in-linear">
<div class="arrow rightshow" v-show="arrow" @click="arrow = false">
<i class="iconfont icon-titleyou"></i>
</div>
</transition>
<!-- 列表 -->
<transition name="el-fade-in-linear">
<div class="rightcontent" v-show="arrow">
<ul class="rul">
<li v-for="(item,index) in rightcontentdata" :key="item.id" @click="allhighlight(item,index)" ref="rli">
<i class="iconfont" :class="item.icon"></i>
<span v-text="item.name"></span>
</li>
</ul>
</div>
</transition>
<!-- 显示 -->
<transition name="el-fade-in-linear">
<div class="arrow righthide" v-show="!arrow" @click="arrow = true">
<i class="iconfont icon-titleyou"></i>
</div>
</transition>
</div>
<!-- 头部end -->
<!-- H5页面逻辑 -->
<script src="common/js/index-logic.js"></script>
<!-- 监控告警接收 -->
<script src="common/js/monitoring-reception.js"></script>
<!-- 模型逻辑 -->
<script src="common/js/model-logic.js"></script>
<!-- 公共方法 -->
<script src="common/js/public.js"></script>
<!-- 模型文件名称映射 -->
<script src="common/js/modelMap.js"></script>
<!-- 模型高亮设置 -->
<script src="common/js/model-highLight.js"></script>
<!-- 常规告警 -->
<script src="common/js/public-alarm.js"></script>
<!-- 定时任务 -->
<script src="common/js/task.js"></script>
<!-- 电子巡更 -->
<script src="common/js/ele-patrol.js"></script>
<script type="text/javascript">
//全屏
function fullScreen() {
var el = document.documentElement;
var rfs = el.requestFullScreen || el.webkitRequestFullScreen || el.mozRequestFullScreen || el.msRequestFullscreen;
if (typeof rfs != "undefined" && rfs) {
rfs.call(el);
};
return;
}
//退出全屏
function exitScreen() {
if (document.exitFullscreen) {
document.exitFullscreen();
} else if (document.mozCancelFullScreen) {
document.mozCancelFullScreen();
} else if (document.webkitCancelFullScreen) {
document.webkitCancelFullScreen();
} else if (document.msExitFullscreen) {
document.msExitFullscreen();
}
if (typeof cfs != "undefined" && cfs) {
cfs.call(el);
}
}
//打开3D可视化平台管理后台
function consoleOpen() {
//新窗体中打开页面用
window.open(manageUrl);
}
//打开在线操作说明
function helpDocOpen() {
//新窗体中打开页面用
window.open(operatInstruct);
}
</script>
</body>
</html>
马建仓 AI 助手
尝试更多
代码解读
代码找茬
代码优化
JavaScript
1
https://gitee.com/complete_info/JG001.git
git@gitee.com:complete_info/JG001.git
complete_info
JG001
JG001
master

搜索帮助

0d507c66 1850385 C8b1a773 1850385