Index.cshtml 9.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213
  1. 
  2. @{
  3. ViewBag.Title = "实时数据";
  4. Layout = "~/Views/Shared/_LayoutIndex.cshtml";
  5. }
  6. <script>
  7. "use strict"
  8. $(function () {
  9. InitialPage();
  10. GetTree();
  11. device.init();
  12. GetPointGrid();
  13. })
  14. //初始化页面
  15. function InitialPage() {
  16. //layout布局
  17. $('#layout').layout({
  18. applyDemoStyles: true,
  19. onresize: function () {
  20. $(window).resize();
  21. }
  22. });
  23. // resize重设(表格、树形)宽高
  24. $(window).resize(function (e) {
  25. window.setTimeout(function () {
  26. $("#pointGridTable").setGridWidth(($('.gridPanel').width()));
  27. $("#pointGridTable").setGridHeight($(window).height() - 180);
  28. $("#itemTree").setTreeHeight($(window).height() - 52);
  29. }, 200);
  30. e.stopPropagation();
  31. });
  32. }
  33. //获取列表
  34. function GetPointGrid() {
  35. var $gridTable = $('#pointGridTable');
  36. $gridTable.jqGrid({
  37. url: "../../WaterWellManage/RealData/GetListJson",
  38. datatype: "json",
  39. height: $(window).height() - 180,
  40. autowidth: true,
  41. rownumbers: true,
  42. postData: { keyword: "", value: "", isAll: true },
  43. colModel: [
  44. { name: "WaterWellName", label: "水源井名称", width: 130, align: "left", fixed: true },
  45. { name: "ManufacturerCode", label: "厂商编码", width: 100, align: "left", fixed: true },
  46. { name: "WaterWellCode", label: "水源井编号", width: 100, align: "left", fixed: true },
  47. { name: "GetDateTime", label: "采集时间", width: 150, align: "left", fixed: true },
  48. { name: "VoltageA", label: "A相电压", width: 130, align: "right", fixed: true, formatter: 'number' },
  49. { name: "VoltageB", label: "B相电压", width: 130, align: "right", fixed: true, formatter: 'number' },
  50. { name: "VoltageC", label: "C相电压", width: 130, align: "right", fixed: true, formatter: 'number' },
  51. { name: "CurrentA", label: "A相电流", width: 130, align: "right", fixed: true, formatter: 'number' },
  52. { name: "CurrentB", label: "B相电流", width: 100, align: "right", fixed: true, formatter: 'number' },
  53. { name: "CurrentC", label: "C相电流", width: 130, align: "right", fixed: true, formatter: 'number' },
  54. { name: "ActiveElectricalEnergy", label: "有功电能", width: 130, align: "right", fixed: true, formatter: 'number' },
  55. { name: "NetAccumulatedCurrent", label: "净累计流量", width: 130, align: "right", fixed: true, formatter: 'number' },
  56. { name: "Pressure", label: "压力", width: 130, align: "right", fixed: true, formatter: 'number' },
  57. { name: "InstantaneousFlow", label: "瞬时流量", width: 130, align: "right", fixed: true, formatter: 'number' },
  58. { name: "Turbidity", label: "浊度", width: 160, align: "right", fixed: true, formatter: 'number' },
  59. { name: "Temperature", label: "温度", width: 130, align: "right", fixed: true, formatter: 'number' },
  60. { name: "HeightOfLiquidLevel", label: "液位高度", width: 130, align: "right", fixed: true, formatter: 'number' },
  61. { name: "Frequency", label: "泵频率", width: 130, align: "right", fixed: true, formatter: 'number' },
  62. { name: "RunningState", label: "泵运行状态", width: 130, align: "left", fixed: true, formatter: "select", editoptions: { value: "0:停止;1:启动;2:故障" } },
  63. { name: "RunningStateDiscription", label: "泵运行状态故障描述", width: 130, align: "left", fixed: true },
  64. { name: "SoftStarterFault", label: "软启动器状态", width: 130, align: "left", fixed: true, formatter: "select", editoptions: { value: "0:正常;1:故障;" } },
  65. { name: "SoftStarterFaultDiscription", label: "软启动器故障描述", width: 130, align: "left", fixed: true },
  66. { name: "ThermalRelayTripFault", label: "热继电器跳闸状态", width: 130, align: "left", fixed: true, formatter: "select", editoptions: { value: "0:正常;1:故障;" } },
  67. { name: "ThermalRelayTripFaultDiscription", label: "热继电器跳闸故障描述", width: 130, align: "left", fixed: true },
  68. { name: "BoxDoorAlarm", label: "箱门状态", width: 130, align: "left", fixed: true, formatter: "select", editoptions: { value: "0:开;1:关;" } }
  69. ],
  70. pager: '#gridpager',
  71. viewrecords: true,
  72. rowNum: 30,
  73. rowList: [30, 50, 100],
  74. sortable: true,
  75. sortname: '采集时间',
  76. sortorder: 'desc',
  77. gridview: true,
  78. footerrow: true,
  79. gridComplete: function () {
  80. $("#pointGridTable").getDataIDs();
  81. }
  82. });
  83. }
  84. //加载树
  85. var PointTreeCode = 0;
  86. var deviceID = "";
  87. function GetTree() {
  88. var item = {
  89. height: $(window).height() - 52,
  90. url: "../../WaterWellManage/Device/GetNoParentJson",
  91. showcheck: true,
  92. isexpand: true,
  93. onnodeclick: function (item) {
  94. PointTreeCode = item.id;
  95. //展开下级
  96. $(".bbit-tree-selected").children('.bbit-tree-ec-icon').trigger("click");
  97. }
  98. };
  99. //初始化
  100. $("#itemTree").treeview(item);
  101. }
  102. // 数据查询
  103. function searchData() {
  104. var idStr = "";
  105. var nodes = $("#itemTree").getTSNs(true);//获取所有勾选节点包括半勾选
  106. var devnodes = "";
  107. $.each(nodes, function (i, value) {
  108. var id = value.id;
  109. devnodes += (id + ",");
  110. });
  111. var keyword = $("#device").val()
  112. $("#pointGridTable").jqGrid('setGridParam', {
  113. postData: { keyword: keyword, value: devnodes, isAll: false },
  114. page: 1
  115. }).trigger('reloadGrid');
  116. }
  117. //AutoComplete
  118. var device = {
  119. init: function () {
  120. var width = $('#device').width();
  121. $('#device').autocomplete({
  122. source: function (request, response) {
  123. $.ajax({
  124. url: "../../WaterWellManage/Device/SearchWaterWellLikeName",
  125. type: "GET",
  126. data: { name: $('#device').val() },
  127. dataType: "json",
  128. success: function (data) {
  129. response($.map(data, function (item) {
  130. return {
  131. label: item.label,
  132. value: item
  133. }
  134. }));
  135. }
  136. });
  137. },
  138. select: function (event, ui) {
  139. $("#device").val(ui.item.label);
  140. PointTreeCode = ui.item.value;
  141. return false;
  142. }
  143. });
  144. }
  145. };
  146. //导出
  147. function btn_point_export() {
  148. dialogOpen({
  149. id: "ExcelIExportDialog",
  150. title: '导出采购报表',
  151. url: '/Utility/ExcelExportForm?gridId=pointGridTable',
  152. width: "500px",
  153. height: "380px",
  154. callBack: function (iframeId) {
  155. top.frames[iframeId].AcceptClick();
  156. }, btn: ['导出Excel', '关闭']
  157. });
  158. }
  159. </script>
  160. <div class="ui-layout" id="layout" style="height: 100%; width: 100%;">
  161. <div class="ui-layout-west">
  162. <div class="west-Panel">
  163. <div class="panel-Title">测点列表</div>
  164. <div id="itemTree"></div>
  165. </div>
  166. </div>
  167. <div class="ui-layout-center">
  168. <div class="center-Panel">
  169. <div id="tabs">
  170. <div id="tabs-1">
  171. <div class="titlePanel">
  172. <div class="title-search">
  173. <table>
  174. <tr>
  175. <td style="padding-left: 10px;">测点名称:
  176. </td>
  177. <td style="padding-left: 10px;">
  178. <input type="text" id="device" name="device" class="form-control" style="width: 130px;" />
  179. </td>
  180. <td style="padding-left: 10px;">
  181. <a id="btn_point_Search" class="btn btn-primary" onclick="searchData()">&nbsp;查&nbsp;&nbsp;询</a>
  182. </td>
  183. </tr>
  184. </table>
  185. </div>
  186. <div class="toolbar">
  187. <div class="btn-group">
  188. <a id="lr-replace" class="btn btn-default" onclick="reload();"><i class="fa fa-refresh"></i>&nbsp;刷新</a>
  189. <a id="lr-export" class="btn btn-default" onclick="btn_point_export()"><i class="fa fa-sign-out"></i>&nbsp;导出</a>
  190. </div>
  191. </div>
  192. </div>
  193. <div class="gridPanel" id="gridpanel">
  194. <table id="pointGridTable"></table>
  195. <div id="gridpager"></div>
  196. </div>
  197. </div>
  198. </div>
  199. </div>
  200. </div>
  201. </div>