饼状图

hdw

2018-10-24 c73e68680f1884ed9e2260ea9c5dcde8e4d48615

 gx_tieta/WebRoot/index.jsp

@@ -34,6 +34,8 @@
   <link rel="stylesheet" href="css/img-change.css">

   <link rel="stylesheet" href="css/confirm.css">

   <link rel="stylesheet" href="css/loading.css">

   <link rel="stylesheet" href="src/css/layui.css">

   <link rel="stylesheet" href="pages/css/mylayui.css">

   <style type="text/css">

      #map .explain-header:hover {

         cursor: pointer;

@@ -81,6 +83,9 @@
         overflow-y: auto; 

         overflow-x: hidden;

       }

       body .layui-layer-dialog {

          min-width:400px;

       }

   </style>

   <script type="text/javascript" src="js/jquery-1.8.3.js"></script>

   

@@ -97,6 +102,20 @@
      <jsp:include page="nav.jsp" flush="true"/>

      <!--导航结束-->

      <div id="content">

         <!-- <div id="mapStatusOpts" class="map-status-container">

            <div class="layui-form layui-form-pane">

               <label class="layui-form-label">机房类型</label>

               <div class="layui-input-inline">

                  <select name="warnType" id="warnType">

                      <option value="0">全部</option>

                      <option value="1">落后</option>

                      <option value="2">告警</option>

                      <option value="3">延时</option>

                      <option value="4">正常</option>

                  </select>

               </div>

            </div>

         </div> -->

         <div class="nav-map small">

            <!-- 电池分布图 -->

            <div class="china-map" id="map">

@@ -137,7 +156,11 @@
         

         <!-- 电池故障与电池告警饼状图 -->

         <div class="pie-con">



            <div class="pie-conf">

               <a href="javascript:;" class="pie-btn" id="faCog"  title="图表配置">

                  <i class="fa fa-cog"></i>

               </a>

            </div>

            <!-- 电池故障饼状图 -->

            <div class="brdn-pie module"></div>

            <!-- 电池告警饼状图 -->

@@ -314,12 +337,14 @@
   <script type="text/javascript" src="pages/js/base.js"></script>

   <script type="text/javascript" src="pages/js/common.js"></script>

   <script type="text/javascript" src="pages/js/pages/siderbar.js"></script>

   <script type="text/javascript" src="pages/js/pages/index-common.js"></script>

   <script type="text/javascript" src="js/panel.js"></script>

   <script type="text/javascript" src="js/search.js"></script>

   <script type="text/javascript" src="js/changePinYin.js"></script>

   <script type="text/javascript" src="js/createMap.js"></script>

   <script type="text/javascript" src="js/myConfirm.js"></script>

   <script type="text/javascript" src="js/loading.js"></script>

   <script type="text/javascript" src="src/layui.js"></script>

   <script type="text/javascript">

   var permits;

   <%   Object obj=session.getAttribute("permits");

@@ -3311,5 +3336,89 @@
         addrAnalyze(posTxt);

      });

   });

	
   layui.use(['form', 'layer', 'laytpl'], function() {

      var form = layui.form;

      var layer = layui.layer;		
      var laytpl = layui.laytpl;

		
      // 点击饼状图配置

      $('#faCog').click(function() {

         searchUserBieState();   // 查询当前饼状图的配置状态

      });

		
      var layerMsg;

		
      // 点击配置项复选框

      $('body').on('click', '#tplTblOpts .tpl-tbl-opts-header input[type=checkbox]', function(event) {

         layer.close(layerMsg);

         var iptList = $('#tplTblOpts .tpl-tbl-opts-header input[type=checkbox]');

         var num = 0;

         iptList.each(function() {

            if($(this).is(':checked')) {

               num++;

            }

         });

         if(num>4) {

            layerMsg = layer.msg("最多选择四个！", {

               type: 1

            });

            $(this).prop('checked', false);

         }

			
      });

		
		
      var pie = GLOBAL.Index.Pie;

      var pieType = pie.pieType;

      var pieConfTpl =  getTpl('iframe/pie-config.html');

      //查询当前用户设置饼状图的使能状态

      function searchUserBieState(){

         $.ajax({ 	
              type:"post", 								
              url: "Echarts_usrAction!serchByCondition",						
              async:true,				
              dataType:'json',

              data:null,		
              success: function(data){ 
               var model = eval('('+data.result+')');

               if(model.code == 1) {

                  var result = model.data;

                  var formatData = formatPieRsData(result[0]);

                  laytpl(pieConfTpl).render(formatData, function(html) {

                     layer.open({

                        id: 'pie',

                        title: '饼状图配置',

                        maxHeight: 450,

                        yes: function(index, kk) {

									
                        },

                        content: html

                     });

                  });

               }

					
                } 				
         });

      }

		
      // 格式化查询结果

      function formatPieRsData(result) {

         var data={};

         data.tblData=[];

         // 遍历pieType的类型

         for(var i=0; i<pieType.length; i++) {

            var tmp = {};

            var num = i+1;

            var key = 'echarts'+num+'_enable';

            console.log(key);

            tmp.name = pieType[i].name;

            tmp.status = result[key];

            data.tblData.push(tmp);

         }

			
         return data;

      }

   });

   </script> 

</html>