device-param.js 23 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686
  1. var logicalCode;
  2. var groupId;// 批量选择组进行编辑
  3. var port;
  4. //解决mui 输入框失去焦点后滚动条跳至顶部bug
  5. // function inputBlurBug() {
  6. // $("input,textarea").off("blur");
  7. // $("input,textarea").on("blur", function () {
  8. // $("body").removeClass("mui-focusin")
  9. // window.scroll(0, $('html').scrollTop() - 1)
  10. // });
  11. // }
  12. // inputBlurBug();
  13. // 设置值到普通的输入框
  14. function setVal(key, para) {
  15. if (para[key] != null) {
  16. var dom = $('#' + key)
  17. // 目前只支持 input和textarea
  18. if (dom.length > 0 && (dom[0].tagName === 'INPUT' || dom[0].tagName === 'TEXTAREA')) {
  19. dom.val(para[key]);
  20. } else {
  21. dom.text(para[key]);
  22. }
  23. }
  24. }
  25. // 设置单选框
  26. function setRadio(key, para) {
  27. if (para[key] != null) {
  28. var dom = $("[name='" + key + "'][value='" + para[key] + "']");
  29. if (dom.length > 0) {
  30. dom[0].checked = true;
  31. }
  32. }
  33. }
  34. // switch
  35. function setSwitch(key, para) {
  36. var sDom = $('[key="' + key + '"]')
  37. var trueValue = sDom.attr("true-value");
  38. // 后台返回的开关值很多都是数字,如果dom表明了是数字,则按数字加载; 注意:如果是字符串必须是:true-value='"isOn"'这样的形式
  39. if (trueValue) {
  40. trueValue = JSON.parse(trueValue);
  41. } else {
  42. trueValue = true
  43. }
  44. if (para[key] != null && para[key] === trueValue) {
  45. sDom.addClass("active");
  46. }
  47. }
  48. //获取懒加载的属性值
  49. var QueryCacheData = null;
  50. var getDevParam = function (key, query, callback) {
  51. if (!$.isArray(key)) {
  52. key = [key]
  53. }
  54. var queryData = {
  55. logicalCode: logicalCode,
  56. groupId: groupId,
  57. key: key,
  58. }
  59. if (query && $.isPlainObject(query)) {
  60. queryData = $.extend(queryData, query)
  61. QueryCacheData = query
  62. }
  63. sendRequest({
  64. url: "/dealer/getDeviceFunctionByKey",
  65. type: "POST",
  66. mask: "正在获取参数...",
  67. contentType: "json",
  68. data: queryData,
  69. success: function (response) {
  70. if (response.result === 1) {
  71. var payload = response.payload;
  72. for (var key in ParamKeyMap) {
  73. var type = ParamKeyMap[key];
  74. if (type === 'switch') {
  75. setSwitch(key, payload);
  76. } else if (type === 'value') {
  77. setVal(key, payload);
  78. } else if (type === 'radio') {
  79. setRadio(key, payload);
  80. } else {
  81. setVal(key, payload);// 默认是value
  82. }
  83. }
  84. if(callback){
  85. callback(payload)
  86. }
  87. } else {
  88. mui.toast(response.description);
  89. }
  90. }
  91. });
  92. };
  93. function batchConfirm(callback) {
  94. // 由于 confirm 回调参数 e是指 mui-popup-button元素,而不是子元素,所以需要加事件穿透noClick
  95. if (logicalCode instanceof Array && logicalCode.length > 1) {
  96. let btnArr = ['<span class="font-12 font-b-8">取消</span>', '<span class="font-12 noClick">修改的参数</span>', '<span class="font-12 c-red noClick">全部参数</span>']
  97. mui.confirm('<span class="c-red">' + "您可以选择将所有参数设置到被选择设备,</span>或者只将修改过的参数设置到被选择设备。请谨慎选择。", '谨慎保存', btnArr, function (e) {
  98. if (e.index === 1) {
  99. if (callback) {
  100. callback('diff')
  101. }
  102. } else if (e.index === 2) {
  103. if (callback) {
  104. callback('all')
  105. }
  106. }
  107. });
  108. } else {
  109. callback()
  110. }
  111. }
  112. function initTitle() {
  113. logicalCode = getQueryString("logicalCode") || "";
  114. if (logicalCode.indexOf('[') > -1) {
  115. logicalCode = JSON.parse(logicalCode)
  116. } else if (logicalCode) {
  117. logicalCode = [logicalCode]
  118. }
  119. groupId = getQueryString("groupId") || "";
  120. if (groupId.indexOf('[') > -1) {
  121. groupId = JSON.parse(groupId)
  122. } else if (groupId) {
  123. groupId = [groupId]
  124. }
  125. port = getQueryString("port") || "";
  126. var type = getQueryString("type");//设备类型
  127. $("#device").html("<i class='c-primary iconfont " + getDevIconName(type) + "'></i> " + type + logicalCode + (port ? ' 端口' + port : ''));
  128. }
  129. function setDevResultShow(res) {
  130. if (res.description) {
  131. mui.alert(res.description);
  132. } else {
  133. mui.toast("操作成功");
  134. }
  135. }
  136. // 将要合并发送的数据
  137. var mergeSubmitData = {}
  138. var mergeSubmitOption = {
  139. prev: function () {
  140. }
  141. }
  142. var ParamKeyMap = {};
  143. var ParamLazy = false;
  144. function initParam(option, callback, lazy) {
  145. var getDeviceParamsUrl = "/dealer/getDeviceFunction";
  146. var level = 'device'
  147. var dialogSubmitSuccess = null
  148. if (option && (option.params || option.lazy)) {
  149. ParamKeyMap = option.params;
  150. callback = option.callback;
  151. dialogSubmitSuccess = option.dialogSubmitSuccess;
  152. lazy = option.lazy;
  153. level = option.level
  154. if (level === 'port') {
  155. getDeviceParamsUrl = "/dealer/getPortParam";
  156. }
  157. option.getDeviceParamsUrl && (getDeviceParamsUrl = option.getDeviceParamsUrl);
  158. } else {
  159. ParamKeyMap = option;// 缓存keymap,懒加载时,用来确定数据展现方式
  160. }
  161. initTitle();
  162. //懒加载的属性使用不同的模式
  163. if (lazy) {
  164. ParamLazy = lazy
  165. } else {
  166. var data = {logicalCode: logicalCode, groupId: groupId}
  167. if (level === 'port') {
  168. data.port = port
  169. }
  170. //获取 设备功能设置
  171. sendRequest({
  172. url: getDeviceParamsUrl,
  173. type: "POST",
  174. mask: "正在获取参数...",
  175. data: JSON.stringify(data),
  176. success: function (response) {
  177. if (response.result == 1) {
  178. var para = response.para;
  179. for (var key in ParamKeyMap) {
  180. var type = ParamKeyMap[key];
  181. if (type === 'switch') {
  182. setSwitch(key, para);
  183. } else if (type === 'value') {
  184. setVal(key, para);
  185. } else if (type === 'radio') {
  186. setRadio(key, para);
  187. } else {
  188. setVal(key, para);// 默认是value
  189. }
  190. // 缓存一下,用于全部保存
  191. mergeSubmitData[key] = para[key]
  192. }
  193. if (callback) {
  194. callback(response.para)
  195. }
  196. } else {
  197. mui.toast(response.description);
  198. }
  199. }
  200. });
  201. }
  202. var mergeSubmit = $('.mergeSubmit').length > 0;// 合并发送的模式,主要用于jinneng
  203. $("form.edit-content").on("submit", function (ev) {
  204. var dialog = $(this).closest('.edit-back');
  205. var submitPre = $(this).attr("submitPre");
  206. var data = {};
  207. var domList = $(this).find(".save-data");
  208. domList.each(function () {
  209. var key = "";
  210. var val = "";
  211. if ($(this).attr("type") == "radio") {
  212. key = $(this).attr("name");
  213. val = $("[name='" + key + "']:checked").val()
  214. } else {
  215. key = $(this).attr("id");
  216. val = $("#" + key).val();
  217. }
  218. data[key] = val;
  219. });
  220. // 合并数据准备一起发送
  221. if (mergeSubmit) {
  222. mergeSubmitData = $.extend(true, mergeSubmitData, data)
  223. dialog.addClass('mui-hidden');
  224. } else {
  225. // 单独发送参数。如果发现有需要额外带的参数,都给带上,目前来说只有非合并模式用到,比如真谷多
  226. var url = "/dealer/setDeviceFunctionParam";
  227. if (submitPre) {
  228. var dataTemp = window[submitPre](data)
  229. if (dataTemp) {
  230. data = dataTemp
  231. }
  232. }
  233. var sendData = $.extend({"logicalCode": logicalCode, groupId: groupId}, data)
  234. if (QueryCacheData) {
  235. sendData = $.extend(sendData, QueryCacheData)
  236. }
  237. if (level === 'port') {
  238. url = "/dealer/setPortParam";
  239. sendData.port = port
  240. }
  241. sendRequest({
  242. url: url,
  243. type: "POST",
  244. mask: "正在设置参数...",
  245. data: JSON.stringify(sendData),// 带上逻辑编号
  246. success: function (res) {
  247. if (res.result == 1) {
  248. // 清空窗口的附带参数
  249. closeBoxCallback()
  250. dialog.addClass('mui-hidden');
  251. setDevResultShow(res)
  252. if (dialogSubmitSuccess) {
  253. dialogSubmitSuccess()
  254. }
  255. } else {
  256. mui.toast(res.description);
  257. }
  258. }
  259. });
  260. }
  261. //阻止submit表单提交的默认行为
  262. ev.preventDefault();
  263. });
  264. //开关
  265. $('.mui-table-view-cell').on('tap', '.switch', function () {
  266. var that = $(this);
  267. that.toggleClass('active');
  268. var key = that.attr("key");
  269. var trueValue = that.attr("true-value") || true;
  270. var falseValue = that.attr("false-value") || false;
  271. var interfaceName = that.attr("interfaceName") || "setDeviceFunction";
  272. var confirmText = that.attr("confirmText");
  273. var callback = that.attr("callback");
  274. var switchFun = falseValue;
  275. if (that.hasClass("active")) {
  276. switchFun = trueValue;
  277. }
  278. var data = {};
  279. data[key] = switchFun;
  280. function ok() {
  281. // 合并发送的模式,缓存数据
  282. if (mergeSubmit) {
  283. mergeSubmitData = $.extend(true, mergeSubmitData, data)
  284. } else {
  285. sendRequest("/dealer/" + interfaceName, "POST", JSON.stringify($.extend({"logicalCode": logicalCode, groupId: groupId,}, data)), function (res) {
  286. if (res.result == 1) {
  287. setDevResultShow(res)
  288. if (callback) {
  289. window[callback]()
  290. }
  291. } else {
  292. that.toggleClass('active');//设置失败还原开关
  293. mui.toast(res.description);
  294. }
  295. });
  296. }
  297. }
  298. if (confirmText) {
  299. mui.confirm(confirmText, '温馨提示', function (e) {
  300. if (e.index === 1) {
  301. ok()
  302. } else {
  303. // 虽然语法表意上好像一样 但是测试结果 toggleClass 好像没有生效 暂时不明为什么
  304. if (that.hasClass('active')) {
  305. that.remove("active")
  306. }else{
  307. that.addClass("active")
  308. }
  309. // that.toggleClass('active');//取消设置还原开关
  310. }
  311. });
  312. } else {
  313. ok()
  314. }
  315. });
  316. bindBtnEvent()
  317. // 合并保存所有参数模式;各个弹窗各自校验;
  318. $("#submitAll").on('click', function () {
  319. batchConfirm(function (modifyMode) {
  320. // 合并数据预处理
  321. if (mergeSubmitOption.prev) {
  322. mergeSubmitOption.prev()
  323. }
  324. var url = "/dealer/setDeviceFunctionParam";
  325. var data = $.extend({"logicalCode": logicalCode, groupId: groupId, modifyMode: modifyMode}, mergeSubmitData)
  326. if (level === 'port') {
  327. url = "/dealer/setPortParam";
  328. data.port = port
  329. }
  330. sendRequest(url, "POST", JSON.stringify(data), function (res) {
  331. if (res.result == 1) {
  332. setDevResultShow(res)
  333. } else {
  334. mui.toast(res.description);
  335. }
  336. // 如果有操作记录,则直接调到设置的结果页面
  337. if (res.payload.operationId != null) {
  338. var url = "/dealer/index.html#/device/paramsResult"
  339. var option = {operationId: res.payload.operationId}
  340. goPage(url, option);
  341. }
  342. });
  343. })
  344. })
  345. // 全局一个表单,优点:用户操作方便。 缺点:一个表单装下所有参数,速度慢,如果业务复杂或是参数多就需要拆分到弹窗。
  346. // 可以配置class = mergeSubmit ,这样switch数据就会合并到此处,可以不用submitAll按钮。
  347. $("form.device-param-form").on("submit", function (ev) {
  348. var data = {};
  349. var that = $(this)
  350. batchConfirm(function (modifyMode) {
  351. var validateFun = that.attr('validate')
  352. if (validateFun) {
  353. var re = window[validateFun]()
  354. if (re === false) {
  355. return false
  356. }
  357. }
  358. var domList = that.find(".save-data");
  359. domList.each(function () {
  360. var that2 = $(this)
  361. var key = "";
  362. var val = "";
  363. // 主要是文本框或是单选框,switch比较特殊
  364. if (that2.attr("type") == "radio") {
  365. key = that2.attr("name");
  366. val = $("[name='" + key + "']:checked").val()
  367. } else {
  368. key = that2.attr("id");
  369. val = $("#" + key).val();
  370. }
  371. data[key] = val;
  372. });
  373. var interfaceName = that.attr("interfaceName") || "setDeviceFunctionParam";
  374. var interfaceBase = that.attr("interfaceBase") || "/dealer/";
  375. // 合并数据准备一起发送,合并的主要是switch, mergeSubmitData 合并(比如配置mergeSubmit后的 switch)
  376. var sendData = $.extend(true, {"logicalCode": logicalCode, groupId: groupId,modifyMode: modifyMode}, mergeSubmitData, data)
  377. // 合并数据预处理
  378. if (mergeSubmitOption.prev) {
  379. mergeSubmitOption.prev(sendData)// 这里直接去修改 sendData还靠谱些
  380. }
  381. var url = interfaceBase + interfaceName
  382. if (level === 'port') {
  383. url = "/dealer/setPortParam";
  384. sendData.port = port
  385. }
  386. sendRequest({
  387. url: url,
  388. type: "POST",
  389. mask: "正在设置参数...",
  390. data: JSON.stringify(sendData),// 带上逻辑编号
  391. success: function (res) {
  392. if (res.result == 1) {
  393. // 保存结果提示
  394. setDevResultShow(res)
  395. } else {
  396. mui.toast(res.description);
  397. }
  398. }
  399. });
  400. })
  401. //阻止submit表单提交的默认行为
  402. ev.preventDefault();
  403. });
  404. $("form.service-param-form").on("submit", function (ev) {
  405. var data = {};
  406. var that = $(this)
  407. var validateFun = that.attr('validate')
  408. if (validateFun) {
  409. var re = window[validateFun]()
  410. if (re === false) {
  411. return false
  412. }
  413. }
  414. var domList = that.find(".save-data");
  415. domList.each(function () {
  416. var that2 = $(this)
  417. var key = "";
  418. var val = "";
  419. // 主要是文本框或是单选框,switch比较特殊
  420. if (that2.attr("type") == "radio") {
  421. key = that2.attr("name");
  422. val = $("[name='" + key + "']:checked").val()
  423. } else {
  424. key = that2.attr("id");
  425. val = $("#" + key).val();
  426. }
  427. data[key] = val;
  428. });
  429. var sendData = $.extend(true, {
  430. "logicalCode": logicalCode
  431. }, mergeSubmitData, data)
  432. // 合并数据预处理
  433. if (mergeSubmitOption.prev) {
  434. mergeSubmitOption.prev(sendData)// 这里直接去修改 sendData还靠谱些
  435. }
  436. var interfaceName = that.attr("interfaceName") || "device/serverSetting/set";
  437. var interfaceBase = that.attr("interfaceBase") || "/dealer/";
  438. var url = interfaceBase + interfaceName
  439. sendRequest({
  440. url: url,
  441. type: "POST",
  442. mask: "正在设置服务器侧参数...",
  443. data: JSON.stringify(sendData),// 带上逻辑编号
  444. success: function (res) {
  445. if (res.result == 1) {
  446. setDevResultShow(res)
  447. } else {
  448. mui.toast(res.description);
  449. }
  450. if (res.payload.operationId != null) {
  451. var url = "/dealer/index.html#/device/paramsResult"
  452. var option = {operationId: res.payload.operationId}
  453. goPage(url, option);
  454. }
  455. }
  456. });
  457. ev.preventDefault();
  458. });
  459. }
  460. function bindBtnEvent() {
  461. //按钮
  462. $('.dev-fun-btn').on('tap', function () {
  463. var that = $(this);
  464. var key = that.attr("key");
  465. var callback = that.attr("callback");
  466. var data = {logicalCode: logicalCode, groupId: groupId,};
  467. if (!logicalCode) {
  468. alert('没有获取到逻辑编号!')
  469. }
  470. var needConfirm = true
  471. var value = this.dataset['paramValue'];
  472. var paramTips = this.dataset['paramTips'];
  473. if (paramTips == null) {
  474. paramTips = '确定继续?';
  475. } else if (paramTips === 'false') {
  476. needConfirm = false
  477. }
  478. if (value !== undefined) {
  479. data[key] = value;
  480. } else {
  481. data[key] = true
  482. }
  483. var interfaceName = 'setDeviceFunction'
  484. if ($(this).closest('[interfaceName]').length) {
  485. interfaceName = $(this).closest('[interfaceName]').attr('interfaceName')
  486. }
  487. var url = ""
  488. if (interfaceName.includes('/')) {
  489. url = interfaceName
  490. } else {
  491. url = "/dealer/" + interfaceName
  492. }
  493. function next() {
  494. sendRequest(url, "POST", JSON.stringify(data), function (res) {
  495. if (res.result == 1) {
  496. setDevResultShow(res)
  497. setTimeout(function () {
  498. if (callback) {
  499. if (!callback.includes('(')) {
  500. window[callback](res)
  501. } else {
  502. eval(callback)
  503. }
  504. }
  505. }, 1000)
  506. } else {
  507. mui.toast(res.description);
  508. }
  509. });
  510. }
  511. if (needConfirm) {
  512. mui.confirm(paramTips, '温馨提示', function (e) {
  513. if (e.index === 1) {
  514. next()
  515. }
  516. });
  517. } else {
  518. next()
  519. }
  520. });
  521. }
  522. // 某些设备有懒加载的属性,此函数清空懒加载查询的条件
  523. function closeBoxCallback() {
  524. // 清空QueryCacheData
  525. QueryCacheData = null
  526. }
  527. //设置属性框:打开; query为一些额外的参数,比如101100的端口号
  528. function toSetParam(_index, _lazyKey, _query) {
  529. var index = _index
  530. var lazyKey = _lazyKey
  531. var query = _query
  532. var callback = null
  533. if($.isPlainObject(_index)){
  534. index = _index.dialogName
  535. lazyKey = _index.lazyParams
  536. query = _index.queryParams
  537. callback = _index.callback
  538. }
  539. $('#paramPanel' + index).removeClass('mui-hidden');
  540. function goLazyLoadParam(lazyKey) {
  541. getDevParam(lazyKey, query, callback)
  542. }
  543. // 如果有传递过来,表明是懒加载
  544. if (lazyKey) {
  545. if ($.isPlainObject(lazyKey)) {
  546. // 多个属性,传进来是Object,不是数组
  547. var idList = []
  548. for (var key in lazyKey) {
  549. idList.push(key)
  550. }
  551. goLazyLoadParam(idList);
  552. } else {
  553. // 单个属性
  554. goLazyLoadParam(lazyKey);
  555. }
  556. } else if (ParamLazy) {
  557. // 如果没有传递key,但是配置了懒加载,则寻找该弹窗内的 所有输入框,找到对应的key;
  558. var keyDomList = $('#paramPanel' + index).find('.save-data')
  559. var idList = []
  560. keyDomList.each(function () {
  561. var dom = $(this)
  562. var id = dom.attr('id')
  563. if (dom.attr('type') === "radio") {
  564. id = dom.attr('name')
  565. }
  566. // 不重复插入
  567. if (idList.indexOf(id) === -1) {
  568. idList.push(id)
  569. }
  570. })
  571. goLazyLoadParam(idList);
  572. }
  573. $('#paramPanel' + index).off().click(function (evt) {
  574. if ($(evt.target).closest('.edit-content').length == 0) {
  575. $('#paramPanel' + index).addClass('mui-hidden');
  576. closeBoxCallback()
  577. }
  578. });
  579. // 使用tap会造成事件穿透,所以用click 必须是>.edit-content>.mui-popup-buttons 否则内部vue的二层弹窗取消按钮会有问题
  580. $('#paramPanel' + index + ' > .edit-content>.mui-popup-buttons span').off().click(function () {
  581. if ($(this).index() == 0) {
  582. //点击取消
  583. $('#paramPanel' + index).addClass('mui-hidden');
  584. closeBoxCallback()
  585. } else {
  586. }
  587. });
  588. }
  589. // 去下一级的参数设置
  590. function goNextPage(pageNo) {
  591. goPage(pageConfig[pageNo], {
  592. logicalCode: getQueryString("logicalCode"),
  593. type: getQueryString("type"),
  594. code: getQueryString("code"),
  595. })
  596. }