添加grafana图像风格支持

leemgk · Apr 30, 2017 · 9d0fbe1 · 9d0fbe1
1 parent 3cdaa7a
commit 9d0fbe1
Show file tree

Hide file tree

Showing 7 changed files with 396 additions and 18 deletions.
diff --git a/README.md b/README.md
@@ -64,6 +64,8 @@
 <br>
 ![image](https://raw.githubusercontent.com/AsuraTeam/monitor/master/images/23.png)
 <br>
+![image](https://raw.githubusercontent.com/AsuraTeam/monitor/master/images/24.png)
+<br>
 <b>多维数据显示(任何机器任何数据组合对比)</b></br>
 <br>
 ![image](https://raw.githubusercontent.com/AsuraTeam/monitor/master/images/img11.png)

diff --git a/images/24.png b/images/24.png
diff --git a/server/src/main/webapp/WEB-INF/views/monitor/graph/merger/graph.vm b/server/src/main/webapp/WEB-INF/views/monitor/graph/merger/graph.vm
@@ -1,6 +1,6 @@
 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
 <http://play.grafana.org/dashboard/db/graph-styles>
-<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
+<script src="/static/js/jquery-3.1.1.min.js"></script>
 <script src="/static/js/plugins/echarts.js"></script>
 <script src="/static/js/public.js"></script>
 <link href="/static/css/bootstrap.min.css?v=3.3.6" rel="stylesheet">
@@ -530,7 +530,6 @@ function get_max_min_avg_last_value(data,opts, name){
                 make_image_id(opt);
                 if(opt["color"]) {
                     colors = opt["color"].split(",")
-                    colors =  ['#fAB839','#E26742', '#A5F78F', '#83CEDA','#ff0066', '#eeaaee', '#55BF3B', '#DF5353', '#7798BF', '#aaeeee', '#2b908f', '#90ee7e'];
                 }else{
                     colors =  ['#fAB839','#E26742', '#A5F78F', '#83CEDA','#ff0066', '#eeaaee', '#55BF3B', '#DF5353', '#7798BF', '#aaeeee', '#2b908f', '#90ee7e'];
                 }
@@ -571,6 +570,7 @@ function get_max_min_avg_last_value(data,opts, name){
                         pie: {
                             allowPointSelect: true,
                             cursor: 'pointer',
+                            //size: 180,
                             dataLabels: {
                                 enabled: true,
                                 color: '#FFFFFF',
@@ -580,6 +580,10 @@ function get_max_min_avg_last_value(data,opts, name){
                     },
                     series: getDatas(opt)
                 });
+		var names = opt["name"].split(",")
+                for(namei= 0 ; namei< names.length; namei ++){
+                   change_series(namei, opt, charts, names)
+                }
             }
 
 

diff --git a/server/src/main/webapp/WEB-INF/views/monitor/graph/merger/images/add.vm b/server/src/main/webapp/WEB-INF/views/monitor/graph/merger/images/add.vm
@@ -41,9 +41,22 @@
          <div class="form-group">
              <label class="col-sm-4 control-label">线条颜色:</label>
              <div class="col-sm-8">
-                 <input type="text" name="imageColor_#id" id="imageColor_#id"
-                        onchange="change_color($(this).val(), #id)" class="form-control" value="#color" style="width:50%;float:left;" >
-                 <span class="form-control" id="image_line_color_#id" style="background-color:#color;width:50%;float:left;">&nbsp;&nbsp;</span>
+                 <input type="text" class="color form-control" id="imageColor_#id" name="imageColor_#id" value="#color" style="width:50%;float:left;background-color:#color"/>
+                 <div id="picker#id" class="pickerhide" style="float:left;"></div>
+                 <script>
+                   $("#imageColor_#id").click(function(){
+                      $(".pickerhide").hide(); 
+                      $("#picker#id").show(); 
+                      $('#picker#id').farbtastic('#imageColor_#id');
+                      setTimeout(function(){
+                         $("#picker#id").hide(); 
+                      }, 8000)
+                   })
+                  setTimeout(function(){
+                      $('#picker#id').farbtastic('#imageColor_#id');
+                      $(".pickerhide").hide(); 
+                  }, 100)
+                 </script>
              </div>
          </div>
      </div>
@@ -224,7 +237,7 @@
                                 <label class="col-sm-6 control-label">图像宽度(1-12):</label>
                                 <div class="col-sm-6">
                                     <input type="number" name="width" class="form-control" id="width" max="12" min="2"
-                                           value="$!{imagesGson.get("width")}"">
+                                           value="$!{imagesGson.get("width")}">
                                 </div>
                             </div>
                         </div>
@@ -353,7 +366,7 @@
                                 </div>
                             </div>
                         </div>
-                        <div id="alarm_base_html_id" style="#if(!$!{imagesGson.get("baselineShow")})display:none;#end ">
+                        <div id="alarm_base_html_id" style="#if(!$!{imagesGson.get("baselineShow").equals("1")})display:none;#end ">
                             <div class="col-md-6" title="为图像添加报警基线">
                                 <div class="form-group">
                                     <label class="col-sm-4 control-label">报警基线上限:</label>
@@ -368,9 +381,22 @@
                                 <div class="form-group">
                                     <label class="col-sm-4 control-label">线条颜色:</label>
                                     <div class="col-sm-8">
-                                        <input type="text" name="alarmBaseColor" onchange="change_color($(this).val(), 'base_line', 7)" class="form-control" value="red" style="width:50%;float:left;"
-                                               value="$!{imagesGson.get("alarmBaseColor")}">
-                                        <span class="form-control" id="image_line_color_base_line" style="background-color:red;width:50%;float:left;">&nbsp;&nbsp;</span>
+
+                                    <input type="text" id="alarmBaseColor" name="alarmBaseColor" onchange="change_color($(this).val(), 'base_line', 7)" class="form-control"  style="width:50%;float:left;background-color:$!{imagesGson.get("alarmBaseColor")}" value="$!{imagesGson.get("alarmBaseColor")}">
+                 <div id="pickerbasecolor" style="float:left;"></div>
+                 <script>
+                   $("#alarmBaseColor").click(function(){
+                      v= $("#alarmBaseColor").val()
+                      if(!v){
+                          $("#alarmBaseColor").val("#ff4776")
+                      }
+                      $('#pickerbasecolor').farbtastic('#alarmBaseColor');
+                      $("#pickerbasecolor").show(); 
+                      setTimeout(function(){
+                         $("#pickerbasecolor").hide(); 
+                      }, 8000)
+                   })
+                 </script>
                                     </div>
                                 </div>
                             </div>
@@ -407,13 +433,8 @@
             <div class="col-md-12"
                  style="border: 1px solid #d0d0d0;margin-left: 0px;margin-right: 130px;margin-top: 1px;">
                 <span style="position:fixed;margin-top: 0px;margin-left: 25px;"></span>
-                <button style="margin-left: 70%;margin-top: 15px;margin-bottom: 10px;float:left;"
-                        onclick="saveConfig($!{configs.imageId});" class="btn btn-warning btn-lg"
-                        type="button">
-                    <i class="fa fa-line-chart"></i>&nbsp;预览
-                </button>
-                <button style="margin-left: 84%;margin-top: -56px;margin-bottom: 10px;float:left;"
-                        onclick="saveConfig($!{configs.graphId});" class="btn btn-primary btn-lg"
+                <button style="margin-left: 84%;margin-top: 9px;margin-bottom: 8px;float:left;"
+                        onclick="saveConfig(#if(!$!{clone})$!{configs.graphId}#end);" class="btn btn-primary btn-lg"
                         type="button">
                     <i class="fa fa-check"></i>&nbsp;保存
                 </button>

diff --git a/server/src/main/webapp/WEB-INF/views/monitor/graph/merger/images/list.vm b/server/src/main/webapp/WEB-INF/views/monitor/graph/merger/images/list.vm
@@ -5,7 +5,9 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>监控图像自定义配置</title><body class="gray-bg top-navigation">
     #include("/index/include.vm")
+<link rel="stylesheet" href="/static/css/farbtastic.css" type="text/css" />
 <script type="application/javascript" src="/static/js/monitor.js"></script>
+<script type="text/javascript" src="/static/js/farbtastic.js"></script>
 <div id="">
     <div id="page-wrapper" class="gray-bg">
         #include("/index/header.vm")
@@ -171,4 +173,4 @@
 
         </script>
         </body>
-</html>
+</html>