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.css | 86 ++++++++++++++++++++-
src/main/webapp/views/monitor.html | 148 ++++++++++++++++++++++++++++++++----
2 files changed, 211 insertions(+), 23 deletions(-)
diff --git a/src/main/webapp/views/monitor.css b/src/main/webapp/views/monitor.css
index 6748561..ffc73b1 100644
--- a/src/main/webapp/views/monitor.css
+++ b/src/main/webapp/views/monitor.css
@@ -7,7 +7,7 @@
height: 5%;
display: flex;
}
-label {
+.head label {
display: flex;
flex-direction: column;
align-items: center;
@@ -19,7 +19,7 @@
color: #FFF;
}
-label:active {
+.head label:active {
border-top: 3px solid rgb(239, 177, 102);
border-right: 1px solid #FFF;
border-left: 1px solid #FFF;
@@ -30,11 +30,12 @@
/* border-left: 1px solid #FFF;*/
/*}*/
.body {
- height: 75%;
+ height: 73%;
width: 100%;
border-top: 1px solid #FFF;
- background-color: #5D7677;
+ /*background-color: #d0d0d0;*/
display: flex;
+ flex-direction: column;
align-items: center;
justify-content: center;
}
@@ -46,6 +47,13 @@
background-image: url("monitor/img/background.png");
background-repeat: no-repeat;
background-size:100% 100%;
+}
+.canves1 {
+ width: 100%;
+ height: 100%;
+ /*background-color: #f1f1f1;*/
+ color: #ffffff;
+ display: flex;
}
.canves-header {
position: relative;
@@ -662,4 +670,74 @@
font-size: 35px;
font-weight: bold;
/*color: #FF5722;*/
+}
+.monitor-operate {
+ display: flex;
+ height: 20%;
+ justify-content: space-around;
+ background-color: #FFF;
+
+}
+.monitor-operate-item {
+ height: 100%;
+ min-width: 320px;
+ max-width: 600px;
+ /*background-color: #888888;*/
+ display: flex;
+ flex-wrap: wrap;
+ align-items: center;
+ color: #282828;
+}
+.item-top {
+ margin-left: 25px;
+}
+.monitor-operate-item button{
+ width: 100px;
+}
+.operate-label {
+ /*display: flex;*/
+ /*flex-direction: column;*/
+ /*flex-wrap: wrap;*/
+ /*height: 50%;*/
+}
+.monitor-operate-item label{
+ display: inline-block;
+ text-align: center;
+ height: 30px;
+ /*line-height: 30px;*/
+ width: 100px;
+ padding: 5px;
+ /*background-color: #01AAED;*/
+ margin-top: 10px;
+ margin-left: 10px;
+}
+.operator-item {
+ display: inline-block;
+ /*height: 100%;*/
+ height: 40%;
+ min-width: 300px;
+ text-align: center;
+ position: relative;
+ vertical-align: middle;
+ /*padding: 10px 0px 10px 50px;*/
+}
+.operator-item .select-title {
+ display: inline-block;
+ position: absolute;
+ top: -11px;
+ left: 50%;
+ transform: translate(-50%, 0);
+ background-color: #fff;
+ color: #2e95d3;
+ font-size: 12px;
+ border: 1px solid #8d8d8d;
+ border-radius: 5px;
+ padding: 5px;
+ z-index: 999;
+}
+.operator-item .select-container {
+ padding: 10px 0;
+ height: 100%;
+ border: 1px solid #8d8d8d;
+ border-radius: 5px;
}
\ No newline at end of file
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