<!DOCTYPE html>
|
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
|
<head>
|
<th:block th:include="include :: header('弹层组件')" />
|
<link href="../static/css/bootstrap.min.css" th:href="@{/css/bootstrap.min.css}" rel="stylesheet" />
|
<link href="../static/css/font-awesome.min.css" th:href="@{/css/font-awesome.min.css}" rel="stylesheet" />
|
<link href="../static/css/main/animate.min.css" th:href="@{/css/main/animate.min.css}" rel="stylesheet" />
|
<link href="../static/css/main/style.min862f.css" th:href="@{/css/main/style.min862f.css}" rel="stylesheet" />
|
<link rel="stylesheet" th:href="@{/css/custom/main.css}" />
|
<link href="../static/js/elementUI/index.css" th:href="@{/js/elementUI/index.css}" rel="stylesheet" />
|
|
<style type="text/css">
|
.custom-icon {
|
font-size: 120px;
|
margin-right: 5px;
|
margin-left: -5px;
|
}
|
.icon-container:hover .custom-icon,
|
.icon-container:hover .custom-font{
|
color: #0981ea;
|
cursor: pointer;
|
}
|
</style>
|
</head>
|
|
<body class="gray-bg">
|
<div class="content" id="app" v-cloak>
|
<el-row>
|
<el-col :span="4" v-for="(item, index) in cameraData" :key="item.projectId">
|
<div class="icon-container" style="margin-left: 40px;">
|
<li @click="handleClick(item.projectId)" class="el-icon-video-camera-solid custom-icon"></li>
|
<h2 @click="handleClick(item.projectId)" class="custom-font" style="margin-top: 0px;margin-left: 0px;margin-bottom: 0px">{{item.projectName}}({{item.projectCode}})</h2>
|
</div>
|
</el-col>
|
</el-row>
|
</div>
|
|
<script th:src="@{/js/jquery.min.js}"></script>
|
<script th:src="@{/js/bootstrap.min.js}"></script>
|
<script th:src="@{/ajax/libs/flot/jquery.flot.js}"></script>
|
<script th:src="@{/js/custom/main.js}"></script>
|
<script th:src="@{/js/vue.min.js}"></script>
|
<script th:src="@{/js/elementUI/index.js}"></script>
|
<th:block th:include="include :: sparkline-js" />
|
<th:block th:include="include :: footer" />
|
|
<script th:inline="javascript">
|
$(function() {
|
// 获取摄像头列表
|
getCareraList();
|
})
|
|
var vm = new Vue({
|
el: "#app",
|
data() {
|
return {
|
cameraData: [],
|
};
|
},
|
methods: {
|
// 摄像头点击事件
|
handleClick(projectId) {
|
$.modal.open('视频播放', ctx + "/player?projectId="+projectId , 1300,580);
|
},
|
handleClose(done) {
|
this.$confirm('确认关闭？')
|
.then(_ => {
|
done();
|
})
|
.catch(_ => {
|
$("#palyerIframe0").attr("src",'about:blank');
|
$("#palyerIframe1").attr("src",'about:blank');
|
});
|
},
|
}
|
});
|
|
function getCareraList() {
|
let url = ctx + "/system/stat/cameraData";
|
$.ajaxSettings.async = false;
|
$.get(url,{},function(res){
|
vm.cameraData = res.cameraData;
|
})
|
$.ajaxSettings.async = false;
|
}
|
</script>
|
|
</body>
|
</html>
|
