From f000aa1fea823c92a343a5f3f3e8bc385d06fd34 Mon Sep 17 00:00:00 2001
From: whycq <10027870+whycq@user.noreply.gitee.com>
Date: 星期五, 24 三月 2023 17:13:40 +0800
Subject: [PATCH] #
---
src/main/webapp/views/monitor.html | 148 +++++++++++++++++++++++++++++++++++++++++++------
1 files changed, 129 insertions(+), 19 deletions(-)
diff --git a/src/main/webapp/views/monitor.html b/src/main/webapp/views/monitor.html
index 4072bec..f00f584 100644
--- a/src/main/webapp/views/monitor.html
+++ b/src/main/webapp/views/monitor.html
@@ -2,7 +2,7 @@
<html lang="en">
<head>
<meta charset="UTF-8">
- <title>WCS杈撻�佽澶囩鐞�</title>
+ <title>鏄剧ず鍣�</title>
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
@@ -15,24 +15,47 @@
<script src="../static/layui/layui.js"></script>
<script src="../static/js/common.js"></script>
<script src="monitor/js/monitor.js"></script>
+ <style>
+ .abc {
+ border-top: 3px solid rgb(239, 177, 102);
+ border-right: 1px solid #FFF;
+ border-left: 1px solid #FFF;
+ }
+ </style>
</head>
<body>
<div style="padding: 10px;height: 100%;float: left;width: 6%">
- <div class="button-window">111</div>
+ <div class="button-window"></div>
</div>
<div style="height: 100%;padding-left: 6%">
<div style="padding: 10px;height: 100%">
- <div style="width: 100%;height: 100%;background-color: #93D1FF">
+ <div style="width: 100%;height: 100%;">
<div class="head">
- <label for="">TV1</label>
- <label for="">TV2</label>
- <label for="">TV3</label>
+ <label for="" class="label ">TV1</label>
+ <label for="" class="label">TV2</label>
+ <label for="" class="label">TV3</label>
</div>
<div class="body">
- <div class="time-tools">
- <span id="bar-year"></span>-<span id="bar-month"></span>-<span id="bar-day"></span> <span id="bar-hour"></span>:<span id="bar-minute"></span>:<span id="bar-second"></span> <span id="bar-week"></span>
+ <!--<div class="time-tools">-->
+ <!-- <span id="bar-year"></span>-<span id="bar-month"></span>-<span id="bar-day"></span> <span id="bar-hour"></span>:<span id="bar-minute"></span>:<span id="bar-second"></span> <span id="bar-week"></span>-->
+ <!--</div>-->
+ <div class="canves1">
+ <div style="width: 30%;height: 100%;font-size: 30px;display: flex;flex-direction: column;justify-content: space-around">
+ <div style="width: 100%;height: 100px;line-height: 100px;text-align: center">绱琛岃蛋锛�10869绫�</div>
+ <div style="width: 100%;height: 100px;line-height: 100px;text-align: center">绱琛岃蛋锛�10869绫�</div>
+ <div style="width: 100%;height: 100px;line-height: 100px;text-align: center">绱琛岃蛋锛�10869绫�</div>
+ <div style="width: 100%;height: 100px;line-height: 100px;text-align: center">绱琛岃蛋锛�10869绫�</div>
+ </div>
+ <div style="width: 70%;height: 100%;display: flex;flex-direction: column;align-items: center;justify-content: center">
+ <div style="width: 80%;height: 40%">
+ <div id="line-charts"></div>
+ </div>
+ <div style="width: 80%;height: 40%">
+ <div id="pie-charts"></div>
+ </div>
+ </div>
</div>
<div class="canves" style="display: none">
<!--澶撮儴-->
@@ -173,7 +196,7 @@
</div>
</div>
<!--鎶樼嚎鍥�-->
- <div id="line-charts"></div>
+ <!--<div id="line-charts"></div>-->
</div>
<div class="container-side-box right-middle">
<div class="image-border image-border1"></div>
@@ -191,7 +214,7 @@
</div>
</div>
<div class="top-main">
- <div id="pie-charts"></div>
+ <!--<div id="pie-charts"></div>-->
</div>
<div class="top-footer">
<div class="top-footer-elem">
@@ -255,7 +278,7 @@
</div>
</div>
- <div class="canves">
+ <div class="canves" style="display: none">
<div class="canves-header" >
<div class="button-left"></div>
<div class="button-right"></div>
@@ -277,13 +300,100 @@
</div>
</div>
</div>
-
+ <div class="monitor-operate">
+ <!--鏄剧ず鍣ㄩ�夋嫨-->
+ <div class="monitor-operate-item">
+ <div style="width: 100%" class="item-top">
+ <button id="selectAll">鍏ㄩ��</button>
+ <button id="unSelectAll">鍙栨秷鍏ㄩ��</button>
+ </div>
+ <div id="checked" style="overflow-y: scroll;height: 80%;border: 1px solid #888" >
+ <label for=""><input type="checkbox" name="monitor" checked="checked" value="1">1鍙锋樉绀哄櫒</label>
+ <label for=""><input type="checkbox" name="monitor" >2鍙锋樉绀哄櫒</label>
+ <label for=""><input type="checkbox" name="monitor">3鍙锋樉绀哄櫒</label>
+ <label for=""><input type="checkbox" name="monitor">4鍙锋樉绀哄櫒</label>
+ <label for=""><input type="checkbox" name="monitor">5鍙锋樉绀哄櫒</label>
+ <label for=""><input type="checkbox" name="monitor">6鍙锋樉绀哄櫒</label>
+ <label for=""><input type="checkbox" name="monitor">7鍙锋樉绀哄櫒</label>
+ <label for=""><input type="checkbox" name="monitor">1鍙锋樉绀哄櫒</label>
+ <label for=""><input type="checkbox" name="monitor">2鍙锋樉绀哄櫒</label>
+ <label for=""><input type="checkbox">3鍙锋樉绀哄櫒</label>
+ <label for=""><input type="checkbox">4鍙锋樉绀哄櫒</label>
+ <label for=""><input type="checkbox">5鍙锋樉绀哄櫒</label>
+ <label for=""><input type="checkbox">6鍙锋樉绀哄櫒</label>
+ <label for=""><input type="checkbox">7鍙锋樉绀哄櫒</label>
+ <label for=""><input type="checkbox">1鍙锋樉绀哄櫒</label>
+ <label for=""><input type="checkbox">2鍙锋樉绀哄櫒</label>
+ <label for=""><input type="checkbox">3鍙锋樉绀哄櫒</label>
+ <label for=""><input type="checkbox">4鍙锋樉绀哄櫒</label>
+ <label for=""><input type="checkbox">5鍙锋樉绀哄櫒</label>
+ <label for=""><input type="checkbox">6鍙锋樉绀哄櫒</label>
+ <label for=""><input type="checkbox">7鍙锋樉绀哄櫒</label>
+ <label for=""><input type="checkbox">1鍙锋樉绀哄櫒</label>
+ <label for=""><input type="checkbox">2鍙锋樉绀哄櫒</label>
+ <label for=""><input type="checkbox">3鍙锋樉绀哄櫒</label>
+ <label for=""><input type="checkbox">4鍙锋樉绀哄櫒</label>
+ <label for=""><input type="checkbox">5鍙锋樉绀哄櫒</label>
+ <label for=""><input type="checkbox">6鍙锋樉绀哄櫒</label>
+ <label for=""><input type="checkbox">7鍙锋樉绀哄櫒</label>
+ </div>
+ </div>
+ <!--鏂囨湰鍐呭-->
+ <div class="monitor-operate-item" style="height: 100%;min-width: 200px;display: flex;align-items: center;">
+ <textarea name="textarea" id="sendContent" cols="50" rows="3" style="font-size: 20px" placeholder="鏄剧ず鍐呭"></textarea>
+ </div>
+ <!--鎿嶄綔-->
+ <div class="monitor-operate-item" style="height: 100%;min-width: 260px;display: flex;justify-content: space-around">
+ <button id="sendMessage">鍙戦��</button>
+ <button id="removeMessage">閲嶇疆</button>
+ </div>
+ </div>
</div>
</div>
</div>
</body>
</html>
<script>
+ $(function() {
+ $(".label").click(function() {
+ $(this).addClass("abc").siblings().removeClass("abc");
+ });
+ });
+ $("#selectAll").click(function(){
+ $('input:checkbox[name=monitor]').each(function () {
+ $(this).prop("checked",true);
+ })
+ });
+ $("#unSelectAll").click(function(){
+ $('input:checkbox[name=monitor]').each(function () {
+ $(this).prop("checked",false);
+ })
+ });
+ $('#sendMessage').click(function () {
+ var sendMessage = $('#sendContent').val()
+ $('input:checkbox[name=monitor]').each(function () {
+ if ($(this).is(':checked')) {
+ console.log(sendMessage)
+ } else {
+ console.log('m')
+ }
+ })
+
+ })
+ $('#removeMessage').click(function () {
+ var sendMessage = 'K'
+ $('input:checkbox[name=monitor]').each(function () {
+ if ($(this).is(':checked')) {
+ console.log(sendMessage)
+ } else {
+ console.log('m')
+ }
+ })
+
+ })
+</script>
+<script>
+
layui.use(['element', 'carousel'], function(){
var carousel = layui.carousel;
var element = layui.element;
@@ -634,13 +744,13 @@
data: ['1', '2', '3', '4', '5', '6', '7'],
axisLabel: {
textStyle:{
- color:'#aaa', //鍧愭爣鐨勫瓧浣撻鑹�
- fontSize: 6,
+ color:'#ffffff', //鍧愭爣鐨勫瓧浣撻鑹�
+ fontSize: 20,
},
},
axisLine:{
lineStyle:{
- color:'#3590ac', // 鍧愭爣杞撮鑹�
+ color:'#ffffff', // 鍧愭爣杞撮鑹�
}
}
},
@@ -648,19 +758,19 @@
type: 'value',
axisLabel: {
textStyle:{
- color:'#aaa', //鍧愭爣鐨勫瓧浣撻鑹�
- fontSize: 5
+ color:'#ffffff', //鍧愭爣鐨勫瓧浣撻鑹�
+ fontSize: 20
},
},
axisLine:{
lineStyle:{
- color:'#3590ac', // 鍧愭爣杞撮鑹�
+ color:'#ffffff', // 鍧愭爣杞撮鑹�
}
},
splitLine:{
show: true,
lineStyle:{
- color:'#517a9b', // 鍒嗗壊绾块鑹�
+ color:'#ffffff', // 鍒嗗壊绾块鑹�
}
}
--
Gitblit v1.9.1