From c73e68680f1884ed9e2260ea9c5dcde8e4d48615 Mon Sep 17 00:00:00 2001
From: hdw <496960745@qq.com>
Date: 星期三, 24 十月 2018 15:50:01 +0800
Subject: [PATCH] 饼状图
---
gx_tieta/WebRoot/iframe/pie-config.html | 33 ++++++
gx_tieta/WebRoot/pages/js/pages/index-common.js | 78 +++++++++++++++
gx_tieta/WebRoot/index.jsp | 94 ++++++++++++++++++
gx_tieta/WebRoot/css/index_layout.css | 16 +++
gx_tieta/WebRoot/css/common.css | 25 +++++
5 files changed, 243 insertions(+), 3 deletions(-)
diff --git a/gx_tieta/WebRoot/css/common.css b/gx_tieta/WebRoot/css/common.css
index f93a87f..ca62ed6 100644
--- a/gx_tieta/WebRoot/css/common.css
+++ b/gx_tieta/WebRoot/css/common.css
@@ -71,4 +71,29 @@
}
.whyc-sider-menu .treeView-progressBar-container {
display: none;
+}
+
+.tpl-tbl-opts-tbl {
+ margin-top: -20px;
+ margin-left: -15px;
+ margin-right: -15px;
+}
+.tpl-tbl-opts-header {
+ position: relative;
+}
+.tpl-tbl-opts-header table {
+ width: 100%;
+}
+.tpl-tbl-opts-header table th{
+ padding-left: 8px;
+ padding-right: 8px;
+ line-height: 32px;
+ text-align: center;
+ background-image: url('../image/table_th_bg.gif');
+ background-repeat: repeat-x;
+ border: 1px solid #ccc;
+}
+.tpl-tbl-opts-header table td {
+ text-align: center;
+ border: 1px solid #ccc;
}
\ No newline at end of file
diff --git a/gx_tieta/WebRoot/css/index_layout.css b/gx_tieta/WebRoot/css/index_layout.css
index 80f8985..bb33e29 100644
--- a/gx_tieta/WebRoot/css/index_layout.css
+++ b/gx_tieta/WebRoot/css/index_layout.css
@@ -45,6 +45,7 @@
/*鏁呴殰鍜屽憡璀﹂ゼ鐘跺浘*/
#content .pie-con{
float:right;
+ position: relative;
width:20%;
background-color:#F3F0F0;
border-top:#ddd;
@@ -73,6 +74,21 @@
height:100px;
background-color:#F3F0F0;
}
+
+.pie-conf {
+ position: absolute;
+ top: 2px;
+ right: 8px;
+ z-index: 99;
+}
+.pie-conf .pie-btn {
+ color: #bbbbbb;
+ font-size: 18px;
+ cursor: pointer;
+}
+.pie-conf .pie-btn:hover {
+ color: #000000;
+}
/*鎴戠殑浣滀笟*/
#content .my-work{
width:100%;
diff --git a/gx_tieta/WebRoot/iframe/pie-config.html b/gx_tieta/WebRoot/iframe/pie-config.html
new file mode 100644
index 0000000..e27927f
--- /dev/null
+++ b/gx_tieta/WebRoot/iframe/pie-config.html
@@ -0,0 +1,33 @@
+<div class="tpl-tbl-opts-tbl" id="tplTblOpts">
+ <div class="tpl-tbl-opts-header">
+ <table>
+ <thead>
+ <tr>
+ <th>缂栧彿</th>
+ <th>閫夐」鍚嶇О</th>
+ <th>閫夋嫨</th>
+ </tr>
+ </thead>
+ <tbody>
+ {{#
+ var rsCheck = function(status) {
+ var rs = '<input type="checkbox"/>';
+ if(status) {
+ rs = '<input type="checkbox"/ checked="checked">';
+ }
+
+ return rs;
+ }
+ }}
+
+ {{# layui.each(d.tblData, function(index, item){ }}
+ <tr>
+ <td>{{= index+1 }}</td>
+ <td>{{ item.name }}</td>
+ <td>{{ rsCheck(item.status) }}</td>
+ </tr>
+ {{# }); }}
+ </tbody>
+ </table>
+ </div>
+</div>
diff --git a/gx_tieta/WebRoot/index.jsp b/gx_tieta/WebRoot/index.jsp
index 2a46a8c..d81e5ce 100644
--- a/gx_tieta/WebRoot/index.jsp
+++ b/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>
diff --git a/gx_tieta/WebRoot/pages/js/pages/index-common.js b/gx_tieta/WebRoot/pages/js/pages/index-common.js
new file mode 100644
index 0000000..5223704
--- /dev/null
+++ b/gx_tieta/WebRoot/pages/js/pages/index-common.js
@@ -0,0 +1,78 @@
+;(function($, window, document, gl, undefined) {
+ // 棣栭〉楗肩姸鍥�
+ gl.namespace('Index.Pie');
+
+ var pieType = [
+ {
+ name: '鐢垫睜鐘舵��',
+ action: 'Batt_rtstateAction!serchBattStateRate',
+ formatData: eleStatus
+ },
+ {
+ name: '鐢垫睜鍛婅鐜�',
+ action: 'Battalarm_dataAction!serchAlm',
+ formatData: eleWarn
+ },
+ {
+ name: '鏈烘埧鍋滅數',
+ action: 'BattPower_offAction!serchPowerOff',
+ formatData: homeCut
+ },
+ {
+ name: '鍗曚綋瀹归噺鍋ュ悍鐜�',
+ action: 'Battalarm_dataAction!serchGood',
+ formatData: monCapGood
+ }
+ ];
+
+ // 灏唒ieType缁戝畾鍒癐ndex.Pie鍛藉悕绌洪棿涓�
+ gl.Index.Pie.pieType = pieType;
+
+ // 鏍规嵁鏁扮粍璋冪敤鏌ヨ鍐呭
+ function search(arr) {
+ for(var i=0; i<arr.length; i++) {
+ if(arr[i]) {
+ ajax(pieType[i]);
+ }
+ }
+ }
+
+ // 灏唖earch缁戝畾鍒癐ndex.Pie鍛藉悕绌洪棿涓�
+ gl.Index.Pie.search = search;
+
+ // 璇锋眰鍚庡彴
+ function ajax(obj) {
+ // ajax璇锋眰鍚庡彴
+ $.ajax({
+ type: 'post',
+ url: obj.action,
+ data: null,
+ async: true,
+ dataType: 'json',
+ success:function(result) {
+ var rs = JSON.parse(result.result);
+ var pieData = obj.formatData(rs);
+
+ }
+ });
+ }
+
+ // 鐢垫睜鐘舵��
+ function eleStatus(data) {
+ console.log(data);
+ }
+
+ // 鐢垫睜鍛婅
+ function eleWarn(data) {
+ console.log(data);
+ }
+
+ // 鏈烘埧鍋滅數
+ function homeCut(data) {
+ console.log(data);
+ }
+ // 鍗曚綋瀹归噺鍋ュ悍鐜�
+ function monCapGood(data) {
+ console.log(data);
+ }
+})(jQuery, window, document, GLOBAL);
\ No newline at end of file
--
Gitblit v1.9.1