GeneratorData2.html 37 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963
  1. <!DOCTYPE html>
  2. <html class="x-admin-sm">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta name="renderer" content="webkit">
  6. <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  7. <meta name="viewport"
  8. content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi"/>
  9. <link rel="shortcut icon" href="/static/favicon.ico">
  10. <link rel="bookmark" href="/static/favicon.ico">
  11. <link rel="stylesheet" href="/static/css/font.css">
  12. <link rel="stylesheet" href="/static/css/xadmin.css">
  13. <script src="/static/js/jquery.min.js"></script>
  14. <script src="/static/js/jquery.cookie.min.js"></script>
  15. <script src="/static/lib/layui/layui.js" charset="utf-8"></script>
  16. <script type="text/javascript" src="/static/js/xadmin.js"></script>
  17. <script src="/static/js/echarts.min.js"></script>
  18. </head>
  19. <body>
  20. <div class="x-nav">
  21. <span class="layui-breadcrumb">
  22. <a href="">首页</a>
  23. <a><cite>数据展示</cite></a>
  24. </span>
  25. <a class="layui-btn layui-btn-normal" style="line-height:1.6em;margin-top:3px;float:right"
  26. onclick="location.reload()" title="刷新">
  27. <i class="layui-icon layui-icon-refresh" style="line-height:30px"></i>
  28. </a>
  29. </div>
  30. <div class="layui-fluid">
  31. <div class="layui-row" style="display: flex;">
  32. <!-- 传感器 选择 start-->
  33. <div style="width: 340px;">
  34. <div class="layui-card">
  35. <div class="layui-card-body ">
  36. <form class="layui-form layui-col-space5" οnsubmit="return false;">
  37. <div class="layui-input-inline layui-show-xs-block">
  38. <input value="" type="text" id="D_T_sn" name="D_T_sn" placeholder="请输入 SN"
  39. autocomplete="off"
  40. class="layui-input"></div>
  41. <div class="layui-input-inline layui-show-xs-block">
  42. <input value="" type="text" id="D_Name" name="D_Name" placeholder="请输入 传感器名称"
  43. autocomplete="off"
  44. class="layui-input"></div>
  45. <div class="layui-input-inline layui-show-xs-block" style="width: 168px">
  46. <select id="Class_1" name="Class_1">
  47. <option value=0>所有分类</option>
  48. {{range $index, $elem := .Class_List}}
  49. <option value={{$elem.Id}}>{{$elem.T_name}}</option>
  50. {{end}}
  51. </select>
  52. </div>
  53. <div class="layui-input-inline layui-show-xs-block">
  54. <div class="layui-btn layui-btn-normal"
  55. onclick="get_DeviceSensor_list(0)">
  56. <i class="layui-icon">&#xe615;</i></div>
  57. </div>
  58. </form>
  59. <hr>
  60. </div>
  61. <div class="layui-card-body " style="margin-top: -20px">
  62. <!-- <div class="layui-progress " >-->
  63. <!-- <div id="progress" class="layui-progress-bar layui-bg-blue" lay-percent="80%"></div>-->
  64. <!-- </div>-->
  65. <div id="DeviceSensor_list" style="width: 98%; overflow: hidden;max-height: 616px;overflow-y: auto">
  66. <div style="color: #1E9FFF;text-align: center;font-size: 15px;margin-top: 150px">加载中...</div>
  67. </div>
  68. </div>
  69. <div class="layui-card-body ">
  70. <div style="height: 70px">
  71. <div class="layui-card-body " style="text-align: center">
  72. <div class="layui-input-inline layui-show-xs-block">
  73. <div class="layui-btn layui-btn-normal"
  74. onclick="checkAll()">
  75. <i class="layui-icon">全选择</i>
  76. </div>
  77. </div>
  78. <div class="layui-input-inline layui-show-xs-block">
  79. <div class="layui-btn layui-btn-normal"
  80. onclick="checkCancel()">
  81. <i class="layui-icon">全取消</i>
  82. </div>
  83. </div>
  84. <div class="layui-input-inline layui-show-xs-block">
  85. <div class="layui-btn layui-btn-normal"
  86. onclick="checkReverse()">
  87. <i class="layui-icon">反选</i>
  88. </div>
  89. </div>
  90. <div style="color: #1E9FFF;text-align: center" id="DeviceSensor_list_Pages_x"></div>
  91. </div>
  92. </div>
  93. </div>
  94. </div>
  95. </div>
  96. <!-- 传感器 选择 end-->
  97. <div style="padding-left: 15px; height: 100%;flex:1;">
  98. <div class="layui-card">
  99. <div class="layui-card-body">
  100. <div class="layui-inline">
  101. <div class="layui-input-inline">数据时间:</div>
  102. <div class="layui-input-inline">
  103. <input type="text" class="layui-input" id="startTime" placeholder="开始时间">
  104. </div>
  105. <span style="padding: 5px">~</span>
  106. <div class="layui-input-inline">
  107. <input type="text" class="layui-input" id="endTime" placeholder="结束时间">
  108. </div>
  109. <div class="layui-input-inline">
  110. <a class="layui-btn layui-btn-normal" onclick="loadEcharts()" title="刷新">
  111. <!-- <i class="layui-icon layui-icon-refresh" style="line-height:30px"></i>-->
  112. 加载
  113. </a>
  114. </div>
  115. </div>
  116. <div class="layui-inline " style="padding-left: 15px">
  117. <div class="layui-inline">选择时间:</div>
  118. <div class="layui-input-inline">
  119. <input type="text" class="layui-input" disabled id="selectStartTime" placeholder="开始时间">
  120. </div>
  121. <span style="padding: 5px">~</span>
  122. <div class="layui-input-inline">
  123. <input type="text" class="layui-input " disabled id="selectEndTime" placeholder="结束时间">
  124. </div>
  125. </div>
  126. </div>
  127. <div class="layui-inline">
  128. <!--按钮-->
  129. <div class="layui-clear" style="margin-left: 15px">
  130. <button onclick="offset()" class="layui-btn layui-btn-normal layui-btn-sm">偏移(固定)</button>
  131. <button onclick="offsetRandom()" class="layui-btn layui-btn-normal layui-btn-sm">偏移(随机)
  132. </button>
  133. <!-- <button onclick="copyFrom()" class="layui-btn layui-btn-normal layui-btn-sm">复制到</button>-->
  134. <button onclick="repair()" class="layui-btn layui-btn-normal layui-btn-sm">补漏</button>
  135. <button onclick="smooth()" class="layui-btn layui-btn-normal layui-btn-sm">平滑</button>
  136. <!-- <button onclick="trend()" class="layui-btn layui-btn-normal layui-btn-sm">趋势</button>-->
  137. <button onclick="Delete()" class="layui-btn layui-btn-normal layui-btn-sm">删除</button>
  138. <!-- <button onclick="importExcel()" class="layui-btn layui-btn-normal">导入表格</button>-->
  139. </div>
  140. </div>
  141. <hr>
  142. <div class="layui-card-body" id="echartsBox" style="height: 100%">
  143. </div>
  144. </div>
  145. </div>
  146. </div>
  147. </div>
  148. <!--固定偏移-->
  149. <div style="display: none;padding: 20px" id="offsetFix">
  150. <div class="layui-form">
  151. <div class="layui-form-item">
  152. 温度:
  153. <input type="number" class="layui-input" lay-verify="number" placeholder="固定下调温度" id="fixTemperature"
  154. value="0">
  155. </div>
  156. <div class="layui-form-item">
  157. 湿度:
  158. <input type="number" class="layui-input" lay-verify="number" placeholder="固定下调湿度" id="fixHumidity"
  159. value="0">
  160. </div>
  161. </div>
  162. </div>
  163. <!--随机偏移-->
  164. <div style="display: none;padding: 20px;justify-content: center" id="offsetRand">
  165. <div class="layui-form">
  166. <div class="layui-form-item " style="display: flex;align-items: center">
  167. 温度:
  168. <input type="number" value="0" class="layui-input layui-input-inline" lay-verify="number"
  169. placeholder="温度min"
  170. id="temperatureStart">
  171. <span style="padding-right: 10px">~</span>
  172. <input type="number" value="0" class="layui-input layui-input-inline" lay-verify="number"
  173. placeholder="温度max"
  174. id="temperatureEnd">
  175. </div>
  176. <div class="layui-form-item" style="display: flex;align-items: center">
  177. 湿度:
  178. <input type="number" value="0" class="layui-input layui-input-inline" lay-verify="number"
  179. placeholder="湿度min"
  180. id="humidityStart">
  181. <span style="padding-right: 10px">~</span>
  182. <input type="number" value="0" class="layui-input layui-input-inline" lay-verify="number"
  183. placeholder="湿度max"
  184. id="humidityEnd">
  185. </div>
  186. </div>
  187. </div>
  188. <!--复制移动-->
  189. <div id="copyMove" style="display: none;padding: 20px">
  190. <div class="layui-form" style="display: flex;justify-content: center;flex-direction: column">
  191. <div id="copyInfo">
  192. 您选择的了从 2023-01-01 00:00:00 ~ 2023-01-02 23:59:59 共 100条记录
  193. </div>
  194. <div>
  195. <input class="layui-input" type="text" id="copyPosition" placeholder="拷贝到的开始时间">
  196. </div>
  197. </div>
  198. </div>
  199. <!--数据补漏-->
  200. <div id="dataRepair" style="padding: 20px;display: none">
  201. 发现了缺少100条数据,确认需要补充数据吗?
  202. </div>
  203. <!--数据补漏-->
  204. <div id="Delete" style="padding: 20px;display: none">
  205. 确认删除数据吗?
  206. </div>
  207. <div style="display: none;padding: 20px;justify-content: center" id="smoothBox">
  208. <div class="layui-form">
  209. <div class="layui-form-item " style="display: flex;align-items: center">
  210. 温度浮动范围:
  211. <input type="number" value="0" class="layui-input layui-input-inline" lay-verify="number"
  212. placeholder="温度浮动范围"
  213. id="temperatureRange">
  214. </div>
  215. <div class="layui-form-item" style="display: flex;align-items: center">
  216. 湿度浮动范围:
  217. <input type="number" value="0" class="layui-input layui-input-inline" lay-verify="number"
  218. placeholder="湿度浮动范围" id="humidityRange">
  219. </div>
  220. </div>
  221. </div>
  222. <!--数据导入-->
  223. <div id="importDataBox" style="display: none;padding: 20px;width: 300px">
  224. <div class="layui-form">
  225. <button onclick="document.getElementById('excelInput').click()" class="layui-btn layui-btn-danger">
  226. 选择文件
  227. </button>
  228. <span id="fileName"></span>
  229. <input type="file" id="excelInput" style="display: none" class="layui-input" placeholder="选择上传文件!">
  230. </div>
  231. </div>
  232. <script>
  233. //温度数据
  234. let temperatureData = []
  235. //湿度数据
  236. let humidityData = []
  237. //当页面加载完毕后会执行的函数
  238. $(function () {
  239. //初始化页面元素
  240. layui.use(['laydate', 'form', 'element'], function () {
  241. let laydate = layui.laydate
  242. laydate.render({
  243. elem: '#startTime',
  244. type: 'datetime',
  245. value: new Date(new Date().setUTCDate(new Date().getDate() - 1))
  246. })
  247. laydate.render({
  248. elem: '#endTime',
  249. type: 'datetime',
  250. value: new Date()
  251. })
  252. laydate.render({
  253. elem: '#selectStartTime',
  254. type: 'datetime',
  255. })
  256. laydate.render({
  257. elem: '#selectEndTime',
  258. type: 'datetime',
  259. })
  260. laydate.render({
  261. elem: '#copyPosition',
  262. type: 'datetime',
  263. })
  264. })
  265. //添加图
  266. // addCharts()
  267. //获取设备探头列表
  268. get_DeviceSensor_list(0)
  269. })
  270. //获取设备探头列表
  271. function get_DeviceSensor_list(page) {
  272. T_sn = $("#D_T_sn").val();
  273. T_name = $("#D_Name").val();
  274. T_class_id = $("#Class_1").val();
  275. $.ajax({
  276. type: 'POST',
  277. url: '/Data/Device_Sensor_List',//发送请求
  278. data: {
  279. User_tokey: $.cookie("User_tokey"),
  280. T_sn: T_sn,
  281. T_name: T_name,
  282. T_class_id: parseInt(T_class_id),
  283. page: page,
  284. page_z: 1000,
  285. },
  286. success: function (result) {
  287. console.log(result)
  288. if (result.Code == 200) {
  289. if (page == 0)
  290. $('#DeviceSensor_list').html("")
  291. // $('#DeviceSensor_list_Pages').html("")
  292. // $('#DeviceSensor_list_Pages_x').html("")
  293. DeviceSensor_lite = result.Data.DeviceSensor_lite
  294. if (DeviceSensor_lite.length == 0) {
  295. $('#DeviceSensor_list').html("<div style=\"color: #1E9FFF;text-align: center;font-size: 15px;margin-top: 150px\">没有设备</div>")
  296. return
  297. }
  298. Add_DeviceSensor_list(result.Data.DeviceSensor_lite) // 列表
  299. // Add_DeviceSensor_list_Pages(result.Data.Pages) // 分页
  300. $('#DeviceSensor_list_Pages_x').html(" 传感器 总数:" + result.Data.Num);
  301. if (result.Data.Page_size > result.Data.Page) {
  302. get_DeviceSensor_list(result.Data.Page + 1)
  303. }
  304. } else {
  305. }
  306. }
  307. });
  308. return false
  309. }
  310. var T_name = ""
  311. var T_sn = ""
  312. var T_class_id = 0
  313. var T_id = 0
  314. var T_sn_T_id = ""
  315. var Time_start = ""
  316. var Time_end = ""
  317. //添加设备探头数据
  318. function Add_DeviceSensor_list(DS_lite) {
  319. for (let i = 0; i < DS_lite.length; i++) {
  320. if (T_id == 0) {
  321. T_id = DS_lite[i].T_id;
  322. T_sn_T_id = DS_lite[i].T_sn;
  323. }
  324. $('#DeviceSensor_list').append(`
  325. <div style="display: flex; user-select: none;align-items: center;" class="layui-row">
  326. <input type="checkbox" data-sn="${DS_lite[i].T_sn}" data-id="${DS_lite[i].T_id}" style="width: 18px;height: 18px">
  327. <img src="/static/images/温湿度传感器-1.png" height="50" width="50" alt="">
  328. <div style="display: flex;flex-direction: column;margin-left: 10px">
  329. <div>${DS_lite[i].T_name}</div>
  330. <div>${DS_lite[i].T_sn}</div>
  331. </div>
  332. </div>
  333. `)
  334. }
  335. }
  336. //修改选择状态
  337. function changeCheckStatus(event) {
  338. let check = $(event).find("> input[type='checkbox']");
  339. check.prop('checked', !check.prop('checked'))
  340. }
  341. //全选
  342. function checkAll() {
  343. $('#DeviceSensor_list > div > input[type="checkbox"]').each((index, item) => {
  344. $(item).prop('checked', true)
  345. })
  346. }
  347. //反选
  348. function checkReverse() {
  349. $('#DeviceSensor_list > div > input[type="checkbox"]').each((index, item) => {
  350. $(item).prop('checked', !$(item).prop('checked'))
  351. })
  352. }
  353. //取消全选
  354. function checkCancel() {
  355. $('#DeviceSensor_list > div > input[type="checkbox"]').each((index, item) => {
  356. $(item).prop('checked', false)
  357. })
  358. }
  359. //获取选择的sn
  360. function getSelectedSn() {
  361. let sns = []
  362. $('#DeviceSensor_list > div > input[type="checkbox"]').each((index, item) => {
  363. let dom = $(item)
  364. if (dom.prop('checked')) {
  365. let sn = dom.attr('data-sn')
  366. let id = dom.attr('data-id')
  367. sns.push([sn, id])
  368. }
  369. })
  370. return sns
  371. }
  372. let chartsData = new Map()
  373. //加载图
  374. function loadEcharts() {
  375. //1.获取选中的设备
  376. let sns = getSelectedSn()
  377. //1.1是否选有设备选中
  378. if (sns.length === 0) {
  379. layui.layer.msg('没有选中操作设备!')
  380. return
  381. }
  382. let startTime = $('#startTime').val()
  383. let endTime = $('#endTime').val()
  384. //2.请求对应设备数据
  385. let index = loading();
  386. $.ajax({
  387. type: "POST",
  388. url: "/Data/DeviceSensorData",
  389. data: {
  390. sns: JSON.stringify(sns),
  391. startTime: startTime,
  392. endTime: endTime,
  393. },
  394. success: function (rlt) {
  395. layui.layer.close(index)
  396. if (rlt.Code === 200) {
  397. //2.1清空图
  398. $('#echartsBox').html('');
  399. //2.2添加图
  400. /*
  401. for (let v of rlt.Data) {
  402. chartsData.set(v.sn.join('|'), v)
  403. addCharts(v)
  404. // console.log(v)
  405. }
  406. */
  407. handleEchartData(rlt.Data)
  408. }
  409. layui.layer.msg(rlt.Msg)
  410. }
  411. })
  412. }
  413. //处理图的数据
  414. let temperatureChar = null
  415. let humidityChar = null
  416. function handleEchartData(data) {
  417. //1.将图中数据分开
  418. let temperatureList = []
  419. let humidityList = []
  420. for (let v of data) {
  421. let t = []
  422. let h = []
  423. if (v.data == null) continue
  424. for (let val of v.data) {
  425. t.push([val.t_time, val.t_t])
  426. h.push([val.t_time, val.t_rh])
  427. }
  428. temperatureList.push([v.sn.join(' | '), t])
  429. humidityList.push([v.sn.join(' | '), h])
  430. chartsData.set(v.sn.join(' | '), v)
  431. }
  432. temperatureChar = addCharts(temperatureList, '温度t_t', 'temperature', true)
  433. humidityChar = addCharts(humidityList, '湿度t_rh', 'humidity', false)
  434. }
  435. //添加图
  436. function addCharts(data, name, type, show) {
  437. //没有数据
  438. if (data == null || data.length === 0) {
  439. return null
  440. }
  441. //获取容器
  442. let eChartsBox = $('#echartsBox')[0]
  443. //设置要放置图的框架
  444. let eChar = $(`<div class="layui-row" style="width: 100%;height: 400px"></div>`)[0]
  445. eChartsBox.appendChild(eChar)
  446. //初始化
  447. let myChar = echarts.init(eChar)
  448. //图标配置选项
  449. let options = {
  450. title: {
  451. text: name
  452. },
  453. grid: {
  454. width: '100%',
  455. x: '35px',
  456. y: '40px'
  457. },
  458. xAxis: {
  459. type: 'time',
  460. splitLine: {
  461. show: false
  462. }
  463. },
  464. yAxis: {
  465. type: 'value',
  466. splitLine: {
  467. show: false
  468. }
  469. },
  470. toolbox: {
  471. feature: {
  472. restore: {},
  473. }
  474. },
  475. dataZoom: [
  476. {
  477. type: 'inside',
  478. start: 0,
  479. end: 100
  480. },
  481. {
  482. start: 0,
  483. end: 100
  484. }
  485. ],
  486. tooltip: {
  487. trigger: 'axis',
  488. formatter: function (params) {
  489. let v = params[0]
  490. return `${v.seriesName}\n
  491. 时间:${v.data[0]} 数据:${v.data[1]}`
  492. },
  493. position: function (pt) {
  494. return [pt[0], '10%'];
  495. }
  496. },
  497. brush: {
  498. xAxisIndex: 0,
  499. toolbox: ['lineX', 'keep', 'clear'],
  500. brushMode: 'multiple',
  501. throttleType: 'debounce',
  502. throttleDelay: 600
  503. },
  504. series: []
  505. }
  506. for (let v of data) {
  507. console.log(v)
  508. options.series.push({
  509. name: v[0],
  510. data: v[1],
  511. type: 'line',
  512. })
  513. }
  514. if (!show) {
  515. options.dataZoom[1]["show"] = false
  516. options.toolbox = null
  517. options.brush = null
  518. }
  519. console.log(options)
  520. //设置参数
  521. myChar.setOption(options)
  522. //设置选中后的函数
  523. myChar.on('brushSelected', brushSelected)
  524. myChar.on('dataZoom', brushDataZoom)
  525. return myChar
  526. }
  527. function brushDataZoom(param) {
  528. console.log(param)
  529. let option = humidityChar.getOption();
  530. if (param.start !== undefined) {
  531. option.dataZoom[0].start = param.start
  532. option.dataZoom[0].end = param.end
  533. } else {
  534. option.dataZoom[0].start = param.batch[0].start
  535. option.dataZoom[0].end = param.batch[0].end
  536. }
  537. humidityChar.setOption(option)
  538. }
  539. //图获取选中数据
  540. let timeRange = []
  541. function brushSelected(param) {
  542. if (param.batch[0].areas[0] == null) return
  543. console.log(param)
  544. timeRange = param.batch[0].areas[0].coordRange
  545. timeRange = [Math.floor(timeRange[0]), Math.floor(timeRange[1])]
  546. $("#selectStartTime").val(dateFormat(new Date(timeRange[0])))
  547. $("#selectEndTime").val(dateFormat(new Date(timeRange[1])))
  548. }
  549. //温湿度偏移
  550. function offset() {
  551. if (timeRange.length === 0) {
  552. layui.layer.msg('请在图中选择要操作数据的区域!')
  553. return
  554. }
  555. //2.layer 打开一个窗口设置要统一设置下移的数据
  556. layui.layer.open({
  557. type: 1,
  558. area: ['300px', '270px'],
  559. content: $('#offsetFix'),
  560. btn: '确定',
  561. btnAlign: 'c',
  562. yes: function (index, elem) {
  563. let fixTemperature = $('#fixTemperature').val();
  564. let fixHumidity = $('#fixHumidity').val();
  565. if (fixHumidity === "" || fixTemperature === "") {
  566. //提示消息
  567. layui.layer.msg("没有设置固定温湿度偏移")
  568. return
  569. }
  570. //3.发送修改数据区域进行循环对值进行统一下调
  571. let index2 = loading();
  572. $.ajax({
  573. type: 'POST',
  574. url: '/Data/UpdateFix',
  575. data: JSON.stringify({
  576. fixTemperature: fixTemperature,
  577. fixHumidity: fixHumidity,
  578. sns: getSelectedSn(),
  579. data: timeRange
  580. }),
  581. contentType: 'application/json;charset=utf-8',
  582. processData: false,
  583. success: function (rlt) {
  584. layui.layer.close(index2)
  585. if (rlt.Code === 200) {
  586. //3.1判断是否处理成功
  587. //3.1.1成功更新该设备的数据
  588. timeRange = []
  589. loadEcharts()
  590. layui.layer.close(index)
  591. }
  592. //提示消息
  593. layui.layer.msg(rlt.Msg)
  594. }
  595. })
  596. }
  597. })
  598. }
  599. //删除
  600. function Delete() {
  601. if (timeRange.length === 0) {
  602. layui.layer.msg('请在图中选择要操作数据的区域!')
  603. return
  604. }
  605. //2.layer 打开一个窗口设置要统一设置下移的数据
  606. layui.layer.open({
  607. type: 1,
  608. area: ['300px', '270px'],
  609. content: $('#Delete'),
  610. btn: '确定',
  611. btnAlign: 'c',
  612. yes: function (index, elem) {
  613. //3.发送修改数据区域进行循环对值进行统一下调
  614. let index2 = loading();
  615. $.ajax({
  616. type: 'POST',
  617. url: '/Data/Delete',
  618. data: JSON.stringify({
  619. sns: getSelectedSn(),
  620. data: timeRange
  621. }),
  622. contentType: 'application/json;charset=utf-8',
  623. processData: false,
  624. success: function (rlt) {
  625. layui.layer.close(index2)
  626. if (rlt.Code === 200) {
  627. //3.1判断是否处理成功
  628. //3.1.1成功更新该设备的数据
  629. timeRange = []
  630. loadEcharts()
  631. layui.layer.close(index)
  632. }
  633. //提示消息
  634. layui.layer.msg(rlt.Msg)
  635. }
  636. })
  637. }
  638. })
  639. }
  640. //温湿度随机偏移
  641. function offsetRandom() {
  642. if (timeRange.length === 0) {
  643. layui.layer.msg('请在图中选择要操作数据的区域!')
  644. return
  645. }
  646. layui.layer.open({
  647. type: 1,
  648. area: ['520px', '240px'],
  649. content: $('#offsetRand'),
  650. btn: '确定',
  651. btnAlign: 'c',
  652. yes: function (index, elem) {
  653. let t_s = Number.parseFloat($('#temperatureStart').val()) * 100
  654. let t_e = Number.parseFloat($('#temperatureEnd').val()) * 100
  655. let h_s = Number.parseFloat($('#humidityStart').val()) * 100
  656. let h_e = Number.parseFloat($('#humidityEnd').val()) * 100
  657. if (!t_s && !t_e && !h_s && !h_e) {
  658. layui.layer.msg('随机值设置错误!因该从最小到最大!')
  659. return
  660. }
  661. let index2 = loading();
  662. $.ajax({
  663. type: 'POST',
  664. url: '/Data/UpdateRand',
  665. data: JSON.stringify({
  666. temperatureMax: Math.max(Math.floor(t_e), Math.floor(t_s)),
  667. temperatureMin: Math.min(Math.floor(t_e), Math.floor(t_s)),
  668. humidityMax: Math.max(Math.floor(h_e), Math.floor(h_s)),
  669. humidityMin: Math.min(Math.floor(h_e), Math.floor(h_s)),
  670. sns: getSelectedSn(),
  671. data: timeRange
  672. }),
  673. contentType: "application/json;charset=utf-8",
  674. processData: false,
  675. success: function (rlt) {
  676. layui.layer.close(index2)
  677. if (rlt.Code === 200) {
  678. //操作成功
  679. layui.layer.close(index)
  680. rangeData = []
  681. loadEcharts()
  682. }
  683. layui.layer.msg(rlt.Msg)
  684. }
  685. })
  686. }
  687. })
  688. //2.layer 打开一个窗口设置随机值范围,温湿度
  689. //3.发送修改数据区域进行循环对值进行随机值统一下调(layer点击确定之后)
  690. //3.1判断是否处理成功
  691. //3.1.1成功更新该设备的数据
  692. //3.1.2失败提示
  693. }
  694. //复制时间段内的数据到另一个时间段
  695. function copyFrom() {
  696. if (timeRange.length === 0) {
  697. layui.layer.msg('请在图中选择要操作数据的区域!')
  698. return
  699. }
  700. //2.layer 提示选区的内容条目数,选区内的开始时间和结束时间(可以进行修改)(layer点击确定之后),要复制到的区域时间
  701. $('#copyInfo').html(`<p style="color: red">${dateFormat(new Date(timeRange[0]))} ~ ${dateFormat(new Date(timeRange[1]))}</p>`)
  702. layui.layer.open({
  703. type: 1,
  704. title: '数据复制(指定开始时间)',
  705. areas: ['300px', '200px'],
  706. content: $('#copyMove'),
  707. btn: '确定',
  708. btnAlign: 'c',
  709. yes: function (index, elem) {
  710. let copyPosition = $('#copyPosition').val();
  711. if (copyPosition === '') {
  712. layui.layer.msg('复制到时间节点不能为空!', {icon: 6})
  713. return
  714. }
  715. let index2 = loading();
  716. $.ajax({
  717. type: "POST",
  718. url: "/Data/CopyFromPosition",
  719. data: JSON.stringify({
  720. copyPosition: copyPosition,
  721. sns: getSelectedSn(),
  722. data: timeRange
  723. }),
  724. processData: false,
  725. contentType: "application/json;charset=utf-8",
  726. success: function (rlt) {
  727. layui.layer.close(index2)
  728. if (rlt.Code === 200) {
  729. layui.layer.close(index)
  730. }
  731. layui.layer.msg(rlt.Msg, {icon: 1})
  732. }
  733. })
  734. }
  735. })
  736. }
  737. //补漏数据
  738. function repair() {
  739. if (timeRange.length === 0) {
  740. layui.layer.msg('请在图中选择要操作数据的区域!')
  741. return
  742. }
  743. let index2 = loading();
  744. layui.layer.confirm(`确认对${dateFormat(new Date(timeRange[0]))}~${dateFormat(new Date(timeRange[1]))} 时间的数据进行查询补漏吗?`, function (index) {
  745. $.ajax({
  746. type: "POST",
  747. url: '/Data/RepairSensorData',
  748. data: {
  749. sns: JSON.stringify(getSelectedSn()),
  750. data: JSON.stringify(timeRange)
  751. },
  752. success: function (rlt) {
  753. layui.layer.close(index2)
  754. if (rlt.Code === 200) {
  755. layui.layer.close(index)
  756. loadEcharts()
  757. }
  758. layui.layer.msg(rlt.Msg)
  759. }
  760. })
  761. })
  762. //3.需要补漏,则将数据处理后生成中间缺失的数据发送到服务
  763. //4.提示结果,成功刷新
  764. }
  765. //选区内做平滑
  766. function smooth() {
  767. if (timeRange.length === 0) {
  768. layui.layer.msg('请在图中选择要操作数据的区域!')
  769. return
  770. }
  771. //2.获取选区内的最开始第一条数据和最后一条数据,中间存在多少条数据,
  772. if (timeRange.length === 0) {
  773. layui.layer.msg('请在图中选择要操作数据的区域!')
  774. return
  775. }
  776. layui.layer.open({
  777. type: 1,
  778. area: ['300px', '240px'],
  779. content: $('#smoothBox'),
  780. btn: '提交',
  781. btnAlign: 'c',
  782. yes: function (index, elem) {
  783. let index2 = loading();
  784. $.ajax({
  785. type: "POST",
  786. url: "/Data/DataSensorDataSmooth",
  787. data: {
  788. sns: JSON.stringify(getSelectedSn()),
  789. data: JSON.stringify(timeRange),
  790. tRange: Number.parseFloat($('#temperatureRange').val()),
  791. hRange: Number.parseFloat($('#humidityRange').val()),
  792. },
  793. success: function (rlt) {
  794. layui.layer.close(index2)
  795. if (rlt.Code === 200) {
  796. layui.layer.close(index)
  797. loadEcharts()
  798. }
  799. layui.layer.msg(rlt.Msg)
  800. }
  801. })
  802. }
  803. })
  804. //count = (time_end -time_start) / time_threshold
  805. //(temperature_end - temperature_start) / count
  806. //3.生成数据发送,判断是否发送成功数据
  807. }
  808. //趋势
  809. function trend() {
  810. if (timeRange.length === 0) {
  811. layui.layer.msg('请在图中选择要操作数据的区域!')
  812. return
  813. }
  814. layui.layer.confirm("1.确保数据没有存在遗漏!\n2.确定对选区做数据趋势吗?", function (index) {
  815. let index2 = loading();
  816. $.ajax({
  817. type: "POST",
  818. url: "/Data/DataSensorDataTrend",
  819. data: {
  820. sns: JSON.stringify(getSelectedSn()),
  821. data: JSON.stringify(timeRange),
  822. },
  823. success: function (rlt) {
  824. layui.layer.close(index2)
  825. if (rlt.Code === 200) {
  826. layui.layer.close(index)
  827. loadEcharts()
  828. }
  829. layui.layer.msg(rlt.Msg)
  830. }
  831. })
  832. })
  833. }
  834. //导入excel
  835. function importExcel() {
  836. let sns = getSelectedSn();
  837. if (sns.length === 0) {
  838. //没有选择设备
  839. layui.layer.msg("没有选择设备,请选择设备后再执行导入!")
  840. return
  841. }
  842. $('#excelInput').change(function () {
  843. let f = this.files[0]
  844. let suffix = f.name.split(".")[1];
  845. if (suffix !== 'xlsx' && suffix !== 'xls') {
  846. layui.layer.msg("上传文件必须为 excel 类型的文件")
  847. this.files[0] = null
  848. return
  849. }
  850. $('#fileName').text(f.name)
  851. })
  852. //1.弹出需要导入的页面
  853. layui.layer.open({
  854. type: 1,
  855. title: '导入数据',
  856. areas: ['400px', '300px'],
  857. content: $('#importDataBox'),
  858. btn: '提交',
  859. btnAlign: 'c',
  860. yes: function (index, elem) {
  861. let data = new FormData()
  862. let file = $('#excelInput')[0].files[0];
  863. console.log(file.name)
  864. data.set("file", file)
  865. data.set("sn", sns.join("|"))
  866. let index2 = loading();
  867. $.ajax({
  868. type: "POST",
  869. url: "/Data/ImportSensorData",
  870. data: data,
  871. contentType: false,
  872. processData: false,
  873. success: function (rlt) {
  874. layui.layer.close(index2)
  875. if (rlt.Code === 200) {
  876. layui.layer.close(index)
  877. }
  878. layui.layer.msg(rlt.Msg)
  879. }
  880. })
  881. }
  882. })
  883. //判断是否有存在文件,文件后缀是否正确
  884. //如果正确则上传到服务器处理
  885. //2.提示处理结果
  886. }
  887. function dateFormat(date) {
  888. date.setHours(date.getHours() + 8);
  889. let year = date.getUTCFullYear();
  890. let month = date.getUTCMonth()+1;
  891. month = month < 10 ? `0${month}` : month
  892. let day = date.getUTCDate()
  893. day = day < 10 ? `0${day}` : day
  894. let hour = date.getUTCHours()
  895. hour = hour < 10 ? `0${hour}` : hour
  896. let minute = date.getUTCMinutes()
  897. minute = minute < 10 ? `0${minute}` : minute
  898. let second = date.getUTCSeconds()
  899. second = second < 10 ? `0${second}` : second
  900. return `${year}-${month}-${day} ${hour}:${minute}:${second}`
  901. }
  902. function loading() {
  903. return layui.layer.load("Loading...", {
  904. icon: 16,
  905. shade: 0.2
  906. })
  907. }
  908. </script>
  909. </body>
  910. </html>