DeviceList.cshtml 12 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236
  1. @{
  2. ViewBag.Title = "设备管理";
  3. Layout = "~/Views/Shared/_LayoutIndex.cshtml";
  4. }
  5. <script>
  6. $(function () {
  7. InitialPage();
  8. GetGrid();
  9. });
  10. //初始化页面
  11. function InitialPage() {
  12. //resize重设(表格、树形)宽高
  13. $(window).resize(function (e) {
  14. window.setTimeout(function () {
  15. $('#gridTable').setGridWidth(($('.gridPanel').width()));
  16. //$("#gridTable").setGridHeight($(window).height() - 136.5);
  17. }, 200);
  18. e.stopPropagation();
  19. });
  20. }
  21. //加载表格
  22. function GetGrid() {
  23. var $gridTable = $('#gridTable');
  24. $gridTable.jqGrid({
  25. url: "/SecondaryWaterSupply/Device/GetDeviceList",
  26. datatype: "json",
  27. height: $(window).height() - 140.5,
  28. autowidth: true,
  29. colModel: [
  30. { label: '设备ID', name: 'SecondaryWaterSupplyId', hidden: true, frozen: true },
  31. { label: '泵房名称', name: 'PumpHouseName', width: 100, frozen: true, align: 'center' },
  32. {
  33. label: '厂商编码', name: 'ManufacturerCode', width: 280, align: 'center',frozen: true,
  34. formatter: function (cellvalue, options, rowObject) {
  35. return cellvalue.trim();
  36. }
  37. },
  38. {
  39. label: '泵站编码', name: 'PumpingStationNumber', width: 100, align: 'center', frozen: true,
  40. formatter: function (cellvalue, options, rowObject) {
  41. return cellvalue.trim();
  42. }
  43. },
  44. { label: '经度', name: 'longitude', width: 100, frozen: true, align: 'center' },
  45. { label: '纬度', name: 'latitude', width: 100, frozen: true, align: 'center' },
  46. {
  47. label: '采集时间', name: 'GetDateTime', width: 100, align: 'center', frozen: true,
  48. formatter: "date", formatoptions: { srcformat: 'Y-m-d H:i', newformat: 'Y-m-d H:i' }
  49. },
  50. { label: '净累计流量', name: 'NetCumulativeFlow', width: 100, frozen: true, align: 'center' },
  51. { label: '进水压力', name: 'InletPressure', width: 80, frozen: true, align: 'center' },
  52. { label: '出水压力', name: 'OutletPressure', width: 80, frozen: true, align: 'center' },
  53. { label: '瞬时流量', name: 'InstantaneousFlow', width: 80, frozen: true, align: 'center' },
  54. { label: '余氯', name: 'ResidualChlorine', width: 80, frozen: true, align: 'center' },
  55. { label: '浊度', name: 'Turbidity', width: 80, frozen: true, align: 'center' },
  56. { label: '温度', name: 'Temperature', align: 'center', frozen: true, width: 80 },
  57. { label: '工频/变频', name: 'PressureUpAlarm', width: 80, frozen: true, align: 'center' },
  58. { label: 'A相电压', name: 'VoltageA_1', width: 80, align: 'center' },
  59. { label: 'B相电压', name: 'VoltageB_1', width: 80, align: 'center' },
  60. { label: 'C相电压', name: 'VoltageC_1', width: 80, align: 'center' },
  61. { label: 'A相电流', name: 'CurrentA_1', width: 80, align: 'center' },
  62. { label: 'B相电流', name: 'CurrentB_1', width: 80, align: 'center' },
  63. { label: 'C相电流', name: 'CurrentC_1', width: 80, align: 'center' },
  64. { label: '有功电能', name: 'ActiveElectricalEnergy_1', width: 80, align: 'center' },
  65. { label: '频率', name: 'Frequency_1', width: 80, align: 'center' },
  66. { label: '运行状态', name: 'RunningState_1', width: 80, align: 'center' },
  67. { label: 'A相电压', name: 'VoltageA_2', width: 80, align: 'center' },
  68. { label: 'B相电压', name: 'VoltageB_2', width: 80, align: 'center' },
  69. { label: 'C相电压', name: 'VoltageC_2', width: 80, align: 'center' },
  70. { label: 'A相电流', name: 'CurrentA_2', width: 80, align: 'center' },
  71. { label: 'B相电流', name: 'CurrentB_2', width: 80, align: 'center' },
  72. { label: 'C相电流', name: 'CurrentC_2', width: 80, align: 'center' },
  73. { label: '有功电能', name: 'ActiveElectricalEnergy_2', width: 80, align: 'center' },
  74. { label: '频率', name: 'Frequency_2', width: 80, align: 'center' },
  75. { label: '运行状态', name: 'RunningState_2', width: 80, align: 'center' },
  76. { label: 'A相电压', name: 'VoltageA_3', width: 80, align: 'center' },
  77. { label: 'B相电压', name: 'VoltageB_3', width: 80, align: 'center' },
  78. { label: 'C相电压', name: 'VoltageC_3', width: 80, align: 'center' },
  79. { label: 'A相电流', name: 'CurrentA_3', width: 80, align: 'center' },
  80. { label: 'B相电流', name: 'CurrentB_3', width: 80, align: 'center' },
  81. { label: 'C相电流', name: 'CurrentC_3', width: 80, align: 'center' },
  82. { label: '有功电能', name: 'ActiveElectricalEnergy_3', width: 80, align: 'center' },
  83. { label: '频率', name: 'Frequency_3', width: 80, align: 'center' },
  84. { label: '运行状态', name: 'RunningState_3', width: 80, align: 'center' },
  85. { label: 'A相电压', name: 'VoltageA_4', width: 80, align: 'center' },
  86. { label: 'B相电压', name: 'VoltageB_4', width: 80, align: 'center' },
  87. { label: 'C相电压', name: 'VoltageC_4', width: 80, align: 'center' },
  88. { label: 'A相电流', name: 'CurrentA_4', width: 80, align: 'center' },
  89. { label: 'B相电流', name: 'CurrentB_4', width: 80, align: 'center' },
  90. { label: 'C相电流', name: 'CurrentC_4', width: 80, align: 'center' },
  91. { label: '有功电能', name: 'ActiveElectricalEnergy_4', width: 80, align: 'center' },
  92. { label: '频率', name: 'Frequency_4', width: 80, align: 'center' },
  93. { label: '运行状态', name: 'RunningState_4', width: 80, align: 'center' },
  94. { label: 'A相电压', name: 'VoltageA_5', width: 80, align: 'center' },
  95. { label: 'B相电压', name: 'VoltageB_5', width: 80, align: 'center' },
  96. { label: 'C相电压', name: 'VoltageC_5', width: 80, align: 'center' },
  97. { label: 'A相电流', name: 'CurrentA_5', width: 80, align: 'center' },
  98. { label: 'B相电流', name: 'CurrentB_5', width: 80, align: 'center' },
  99. { label: 'C相电流', name: 'CurrentC_5', width: 80, align: 'center' },
  100. { label: '有功电能', name: 'ActiveElectricalEnergy_5', width: 80, align: 'center' },
  101. { label: '频率', name: 'Frequency_5', width: 80, align: 'center' },
  102. { label: '运行状态', name: 'RunningState_5', width: 80, align: 'center' }
  103. ],
  104. viewrecords: true,
  105. rowNum: 30,
  106. rowList: [30, 50, 100],
  107. pager: "#gridPager",
  108. rownumbers: true,
  109. shrinkToFit: false,
  110. gridview: true,
  111. gridComplete: function () {
  112. }
  113. });
  114. $gridTable.jqGrid('setGroupHeaders', {
  115. useColSpanStyle: true,
  116. groupHeaders: [
  117. { startColumnName: 'VoltageA_1', numberOfColumns: 9, titleText: '1号泵' },
  118. { startColumnName: 'VoltageA_2', numberOfColumns: 9, titleText: '2号泵' },
  119. { startColumnName: 'VoltageA_3', numberOfColumns: 9, titleText: '3号泵' },
  120. { startColumnName: 'VoltageA_4', numberOfColumns: 9, titleText: '4号泵' },
  121. { startColumnName: 'VoltageA_5', numberOfColumns: 9, titleText: '5号泵' }
  122. ]
  123. });
  124. //$gridTable.jqGrid('setFrozenColumns');
  125. //查询条件
  126. $("#queryCondition .dropdown-menu li").click(function () {
  127. var text = $(this).find('a').html();
  128. var value = $(this).find('a').attr('data-value');
  129. $("#queryCondition .dropdown-text").html(text).attr('data-value', value)
  130. });
  131. //查询事件
  132. $("#btn_Search").click(function () {
  133. var queryJson = {
  134. condition: $("#queryCondition").find('.dropdown-text').attr('data-value'),
  135. keyword: $("#txt_Keyword").val()
  136. }
  137. $gridTable.jqGrid('setGridParam', {
  138. postData: { queryJson: JSON.stringify(queryJson) },
  139. page: 1
  140. }).trigger('reloadGrid');
  141. });
  142. //查询回车
  143. $('#txt_Keyword').bind('keypress', function (event) {
  144. if (event.keyCode == "13") {
  145. $('#btn_Search').trigger("click");
  146. }
  147. });
  148. }
  149. //新增
  150. function btn_add() {
  151. dialogOpen({
  152. id: "Form",
  153. title: '添加设备',
  154. url: '/SecondaryWaterSupply/Device/DeviceForm',
  155. width: "750px",
  156. height: "460px",
  157. callBack: function (iframeId) {
  158. top.frames[iframeId].AcceptClick();
  159. }
  160. });
  161. };
  162. //编辑
  163. function btn_edit() {
  164. var keyValue = $("#gridTable").jqGridRowValue("SecondaryWaterSupplyId");
  165. if (checkedRow(keyValue)) {
  166. dialogOpen({
  167. id: "Form",
  168. title: '编辑设备',
  169. url: '/SecondaryWaterSupply/Device/DeviceForm?keyValue=' + keyValue,
  170. width: "750px",
  171. height: "460px",
  172. callBack: function (iframeId) {
  173. top.frames[iframeId].AcceptClick();
  174. }
  175. });
  176. }
  177. }
  178. //删除
  179. function btn_delete() {
  180. var keyValue = $("#gridTable").jqGridRowValue("SecondaryWaterSupplyId");
  181. if (keyValue) {
  182. $.RemoveForm({
  183. url: "/SecondaryWaterSupply/Device/DelteDevice",
  184. param: { deviceId: keyValue },
  185. success: function (data) {
  186. $("#gridTable").trigger("reloadGrid");
  187. }
  188. })
  189. } else {
  190. dialogMsg('请选择需要删除的数据项!', 0);
  191. }
  192. }
  193. </script>
  194. <div class="titlePanel">
  195. <div class="title-search">
  196. <table>
  197. <tr>
  198. <td>
  199. <div id="queryCondition" class="btn-group">
  200. <a class="btn btn-default dropdown-text" data-toggle="dropdown">选择条件</a>
  201. <a class="btn btn-default dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></a>
  202. <ul class="dropdown-menu">
  203. <li><a data-value="EnCode">角色编号</a></li>
  204. <li><a data-value="FullName">角色名称</a></li>
  205. </ul>
  206. </div>
  207. </td>
  208. <td style="padding-left: 2px;">
  209. <input id="txt_Keyword" type="text" class="form-control" placeholder="请输入要查询关键字" style="width: 200px;" />
  210. </td>
  211. <td style="padding-left: 5px;">
  212. <a id="btn_Search" class="btn btn-primary"><i class="fa fa-search"></i>&nbsp;查询</a>
  213. </td>
  214. </tr>
  215. </table>
  216. </div>
  217. <div class="toolbar">
  218. <div class="btn-group">
  219. <a id="lr-replace" class="btn btn-default" onclick="reload();"><i class="fa fa-refresh"></i>&nbsp;刷新</a>
  220. <a id="lr-add" class="btn btn-default" onclick="btn_add()"><i class="fa fa-plus"></i>&nbsp;新增</a>
  221. <a id="lr-edit" class="btn btn-default" onclick="btn_edit()"><i class="fa fa-pencil-square-o"></i>&nbsp;编辑</a>
  222. <a id="lr-delete" class="btn btn-default" onclick="btn_delete()"><i class="fa fa-trash-o"></i>&nbsp;删除</a>
  223. </div>
  224. </div>
  225. </div>
  226. <div class="gridPanel">
  227. <table id="gridTable"></table>
  228. <div id="gridPager"></div>
  229. </div>