饼状图

hdw

2018-10-24 c73e68680f1884ed9e2260ea9c5dcde8e4d48615

 gx_tieta/WebRoot/index.jsp

@@ -83,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>

   

@@ -153,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>

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

@@ -330,6 +337,7 @@
   <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>

@@ -3329,8 +3337,88 @@
      });

   });

   

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

      var form = layui.form();

   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>