index.vue 38 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018101910201021102210231024102510261027102810291030103110321033103410351036103710381039104010411042104310441045104610471048104910501051105210531054105510561057105810591060106110621063106410651066106710681069107010711072107310741075107610771078107910801081108210831084108510861087108810891090109110921093109410951096109710981099110011011102110311041105110611071108110911101111111211131114111511161117111811191120112111221123112411251126112711281129113011311132113311341135113611371138113911401141114211431144114511461147114811491150115111521153115411551156115711581159116011611162116311641165116611671168116911701171117211731174117511761177117811791180118111821183118411851186118711881189119011911192119311941195119611971198119912001201120212031204120512061207120812091210121112121213121412151216121712181219122012211222122312241225122612271228122912301231123212331234123512361237123812391240124112421243124412451246124712481249125012511252125312541255125612571258125912601261
  1. <template>
  2. <div>
  3. <d2-container>
  4. <div class="main">
  5. <div class="zt_right">
  6. <!-- <template slot="header">首页/数据查询</template> -->
  7. <div class="nav">
  8. 当前所在位置:<a href="#/index">首页</a
  9. ><a href="#/equipment">>设备管理>设备</a>>设备详情
  10. </div>
  11. <div class="">
  12. <div class="nameTitle">
  13. <i
  14. @click="goBack"
  15. style="color: #008775; font-weight: bold"
  16. class="el-icon-arrow-left"
  17. ></i>
  18. <span class="name"><span>设备名称:</span>{{ info.eqName }}</span>
  19. <!-- <span style="font-size:14px;margin-left:40px">设备数:<span style="color:#008775">30</span>
  20. </span> -->
  21. </div>
  22. <el-tabs v-model="activeName" @tab-click="tabsClick">
  23. <el-tab-pane label="基本信息" name="first">
  24. <div class="infoTitle">
  25. <h5>设备信息</h5>
  26. <el-button
  27. icon="fa fa-edit"
  28. size="mini"
  29. type="primary"
  30. @click="edit"
  31. >编辑</el-button
  32. >
  33. </div>
  34. <detailTable
  35. ref="detailTable"
  36. :detail-table="basicInfo"
  37. :title="''"
  38. />
  39. </el-tab-pane>
  40. <el-tab-pane label="定时任务" name="second">
  41. <div class="infoTitle">
  42. <h5>定时任务</h5>
  43. <!-- <el-button
  44. type="primary"
  45. size="mini"
  46. @click="$router.push({ path: '/timingTask' })"
  47. >修改定时任务</el-button
  48. > -->
  49. </div>
  50. <div
  51. class="taskDiv"
  52. v-for="(item, index) in rwList"
  53. :key="index"
  54. >
  55. <el-tooltip
  56. class="item"
  57. effect="dark"
  58. :content="item.taskName"
  59. placement="top"
  60. >
  61. <span class="gdWidth">{{
  62. item.taskName
  63. }}</span> </el-tooltip
  64. >:
  65. <span class="normalBtn">{{
  66. JSON.parse(item.objTime).timeType
  67. }}</span>
  68. <span
  69. class="normalBtn"
  70. v-if="JSON.parse(item.objTime).timeType != '每小时'"
  71. >{{ JSON.parse(item.objTime).time }}</span
  72. >
  73. <span
  74. class="normalBtn"
  75. v-if="JSON.parse(item.objTime).timeType == '每周'"
  76. >{{ JSON.parse(item.objTime).week.toString() }}</span
  77. >
  78. <span
  79. class="normalBtn"
  80. v-if="JSON.parse(item.objTime).timeType == '每月'"
  81. >{{ JSON.parse(item.objTime).month.toString() }}</span
  82. >
  83. <span
  84. class="normalBtn"
  85. v-if="JSON.parse(item.objTime).timeType == '每年'"
  86. >{{ JSON.parse(item.objTime).dateTime }}</span
  87. >
  88. </div>
  89. </el-tab-pane>
  90. <el-tab-pane label="运行数据" name="third">
  91. <!-- <span slot="label">
  92. <el-dropdown trigger="click">
  93. <span class="el-dropdown-link">
  94. 运行数据<i class="el-icon-arrow-down el-icon--right"></i>
  95. </span>
  96. <el-dropdown-menu slot="dropdown">
  97. <el-dropdown-item>黄金糕</el-dropdown-item>
  98. <el-dropdown-item>狮子头</el-dropdown-item>
  99. <el-dropdown-item>螺蛳粉</el-dropdown-item>
  100. </el-dropdown-menu>
  101. </el-dropdown>
  102. </span> -->
  103. <!-- <div class="topType">
  104. <span>测温湿度设备(原粮、原油)数据如下:</span>
  105. <span>测温湿度设备(成品原油)数据如下:</span>
  106. <span>空调设备参数如下:</span>
  107. <span>流量称设备参数如下:</span>
  108. </div> -->
  109. <h5 style="margin: 20px 0">实时数据</h5>
  110. <div class="nowData">
  111. <div>
  112. <div>温度</div>
  113. <div>{{ rightTempValue }}℃</div>
  114. </div>
  115. <div>
  116. <div>湿度</div>
  117. <div>{{ rightWetValue }}%</div>
  118. </div>
  119. <div>
  120. <div>露点温度</div>
  121. <div>{{ rightDewValue }}℃</div>
  122. </div>
  123. </div>
  124. <h5 style="margin: 20px 0">历史定时任务数据</h5>
  125. <div class="flex-between">
  126. <el-form
  127. :inline="true"
  128. :model="formTime"
  129. class="demo-form-inline"
  130. id="formLabel"
  131. >
  132. <el-form-item label="时间:">
  133. <el-date-picker
  134. size="mini"
  135. v-model="formTime.time"
  136. type="date"
  137. placeholder="请选择"
  138. >
  139. </el-date-picker>
  140. </el-form-item>
  141. <el-form-item>
  142. <el-button
  143. size="mini"
  144. type="primary"
  145. icon="el-icon-search"
  146. @click="getPoints()"
  147. >查询</el-button
  148. >
  149. </el-form-item>
  150. <el-form-item>
  151. <el-button
  152. size="mini"
  153. type="primary"
  154. icon="el-icon-refresh-left"
  155. @click="
  156. formTime.time = '';
  157. getPoints();
  158. "
  159. >重置</el-button
  160. >
  161. </el-form-item>
  162. </el-form>
  163. <!-- <div style="line-height: 40px">
  164. <el-button size="mini" type="primary" @click="checkStart()"
  165. >开始检测</el-button
  166. >
  167. </div> -->
  168. </div>
  169. <el-table
  170. :data="pintsPageList"
  171. border
  172. stripe
  173. style="width: 100%"
  174. >
  175. <el-table-column
  176. align="center"
  177. label="序号"
  178. type="index"
  179. width="100px"
  180. :index="indexMethod"
  181. show-overflow-tooltip
  182. ></el-table-column>
  183. <el-table-column prop="time" label="检测时间" align="center">
  184. </el-table-column>
  185. <el-table-column
  186. prop="device"
  187. label="设备编号"
  188. align="center"
  189. >
  190. </el-table-column>
  191. <el-table-column
  192. prop="tempValue"
  193. label="温度(℃)"
  194. align="center"
  195. >
  196. </el-table-column>
  197. <el-table-column
  198. prop="wetValue"
  199. label="湿度(%)"
  200. align="center"
  201. >
  202. </el-table-column>
  203. <el-table-column
  204. prop="dewValue"
  205. label="露点温度(℃)"
  206. align="center"
  207. >
  208. </el-table-column>
  209. <!-- <el-table-column
  210. prop="houseName"
  211. label="检测时间"
  212. align="center"
  213. >
  214. </el-table-column>
  215. <el-table-column
  216. prop="labelName"
  217. label="设备标签"
  218. align="center"
  219. >
  220. </el-table-column>
  221. <el-table-column
  222. prop="houseCode"
  223. label="所属仓房编码"
  224. align="center"
  225. >
  226. </el-table-column>
  227. <el-table-column prop="scanNum" label="最高温度(℃)" align="center">
  228. </el-table-column>
  229. <el-table-column prop="scanNum" label="最低温度(℃)" align="center">
  230. </el-table-column>
  231. <el-table-column prop="scanNum" label="平均温度(℃)" align="center">
  232. </el-table-column>
  233. <el-table-column prop="scanNum" label="最高湿度(%RH)" align="center">
  234. </el-table-column>
  235. <el-table-column prop="scanNum" label="最低湿度(%RH)" align="center">
  236. </el-table-column>
  237. <el-table-column prop="scanNum" label="平均湿度(%RH)" align="center">
  238. </el-table-column>
  239. <el-table-column prop="scanNum" label="平均露点温度(℃)" align="center">
  240. </el-table-column>
  241. <el-table-column label="操作" width="140" align="center">
  242. <template slot-scope="scope">
  243. <el-button
  244. type="text"
  245. size="mini"
  246. @click="checkDetail(scope.row)"
  247. >查看</el-button
  248. >
  249. </template>
  250. </el-table-column> -->
  251. </el-table>
  252. <el-pagination
  253. @size-change="handleSizeChange2"
  254. @current-change="handleCurrentChange2"
  255. :current-page="1"
  256. :page-sizes="[10, 20, 30, 40]"
  257. :page-size="pagination2.pageSize"
  258. layout="total, sizes, prev, pager, next, jumper"
  259. :total="pagination2.total"
  260. >
  261. </el-pagination>
  262. </el-tab-pane>
  263. <el-tab-pane label="报警记录" name="fourth"></el-tab-pane>
  264. </el-tabs>
  265. </div>
  266. </div>
  267. </div>
  268. <el-dialog
  269. title="添加关联设备"
  270. width="800px"
  271. :visible.sync="dialogTableVisible"
  272. >
  273. <el-form
  274. :inline="true"
  275. :model="formInline"
  276. class="demo-form-inline"
  277. id="formLabel"
  278. >
  279. <el-form-item label="设备ID:">
  280. <el-input
  281. size="mini"
  282. v-model="formInline.scanTime"
  283. placeholder="请输入"
  284. ></el-input>
  285. </el-form-item>
  286. <el-form-item label="设备名称:">
  287. <el-select
  288. size="mini"
  289. v-model="formInline.houseName"
  290. multiple
  291. placeholder="请选择"
  292. >
  293. <el-option label="1号仓" value="first"></el-option>
  294. <el-option label="2号仓" value="second"></el-option>
  295. <el-option label="3号仓" value="third"></el-option>
  296. </el-select>
  297. </el-form-item>
  298. <el-form-item>
  299. <el-button
  300. size="mini"
  301. type="primary"
  302. icon="el-icon-search"
  303. @click="search()"
  304. >查询</el-button
  305. >
  306. </el-form-item>
  307. <el-form-item>
  308. <el-button
  309. type="primary"
  310. size="mini"
  311. icon="el-icon-refresh-left"
  312. @click="reset()"
  313. >重置</el-button
  314. >
  315. </el-form-item>
  316. </el-form>
  317. <el-table :data="alarmRecord" border style="width: 100%">
  318. <el-table-column type="selection" align="center" width="55">
  319. </el-table-column>
  320. <el-table-column prop="zskName" label="设备ID"> </el-table-column>
  321. <el-table-column prop="houseName" label="设备名称" align="center">
  322. </el-table-column>
  323. <el-table-column prop="operName" label="产品名称" align="center">
  324. </el-table-column>
  325. <el-table-column prop="phoneO" label="设备标识" align="center">
  326. </el-table-column>
  327. </el-table>
  328. <el-pagination
  329. @size-change="handleSizeChange1"
  330. @current-change="handleCurrentChange1"
  331. :current-page="1"
  332. :page-sizes="[10, 20, 30, 40]"
  333. :page-size="pagination1.pageSize"
  334. layout="total, sizes, prev, pager, next, jumper"
  335. :total="pagination1.total"
  336. >
  337. </el-pagination>
  338. <div slot="footer" class="dialog-footer">
  339. <el-button @click="dialogTableVisible = false">取 消</el-button>
  340. <el-button type="primary" @click="sure">确 定</el-button>
  341. </div>
  342. </el-dialog>
  343. <addDialog :dialogTitle="'设备基本信息'" ref="addDialog" />
  344. <el-dialog
  345. title="检测详情"
  346. id="dialogStyle"
  347. width="800px"
  348. :visible.sync="checkDialog"
  349. >
  350. <!-- <detailTable ref="detailTable" :detail-table="checkInfo" :title="''" /> -->
  351. <div class="panel-height-add">
  352. <div style="padding: 2px">
  353. <div class="detBox">
  354. <div
  355. v-for="(item, i) in checkInfo"
  356. :key="i"
  357. class="divF"
  358. :style="{
  359. 'line-height':
  360. (item.val.length == 0 ? 1 : item.val.length) * 48 + 'px',
  361. height:
  362. (item.val.length == 0 ? 1 : item.val.length) * 48 + 'px',
  363. }"
  364. >
  365. <div>
  366. <div>{{ item.name }}</div>
  367. </div>
  368. <div :class="item.name1 == undefined ? 'long' : ''">
  369. <el-tooltip
  370. v-for="(data, len) in item.val"
  371. :key="len"
  372. effect="dark"
  373. :content="data"
  374. :disabled="(data + '').length < 20"
  375. placement="top"
  376. >
  377. <div>{{ data == null ? "" : data }}</div>
  378. </el-tooltip>
  379. </div>
  380. <div v-if="item.name1 != undefined">
  381. <el-tooltip
  382. effect="dark"
  383. :content="item.name1"
  384. :disabled="(item.name1 + '').length < 13"
  385. placement="top"
  386. >
  387. <div>{{ item.name1 }}</div>
  388. </el-tooltip>
  389. </div>
  390. <div v-if="item.name1 != undefined">
  391. <el-tooltip
  392. v-for="(data, index) in item.val1"
  393. :key="index"
  394. effect="dark"
  395. :content="data"
  396. :disabled="(data + '').length < 22"
  397. placement="top"
  398. >
  399. <div>{{ data == null ? "" : data }}</div>
  400. </el-tooltip>
  401. </div>
  402. <div v-if="item.name1 != undefined">
  403. <el-tooltip
  404. effect="dark"
  405. :content="item.name2"
  406. :disabled="(item.name2 + '').length < 13"
  407. placement="top"
  408. >
  409. <div>{{ item.name2 }}</div>
  410. </el-tooltip>
  411. </div>
  412. <div v-if="item.name1 != undefined">
  413. <el-tooltip
  414. v-for="(data, index) in item.val2"
  415. :key="index"
  416. effect="dark"
  417. :content="data"
  418. :disabled="(data + '').length < 22"
  419. placement="top"
  420. >
  421. <div>{{ data == null ? "" : data }}</div>
  422. </el-tooltip>
  423. </div>
  424. </div>
  425. </div>
  426. </div>
  427. </div>
  428. <div class="panel-height-add">
  429. <div style="padding: 2px">
  430. <div class="detBox">
  431. <div class="title" v-for="(item, i) in checkInfo1" :key="i">
  432. {{ item.title }}
  433. </div>
  434. <div
  435. v-for="(item, i) in checkInfo1"
  436. :key="i"
  437. class="divF"
  438. :style="{
  439. 'line-height':
  440. (item.val.length == 0 ? 1 : item.val.length) * 48 + 'px',
  441. height:
  442. (item.val.length == 0 ? 1 : item.val.length) * 48 + 'px',
  443. }"
  444. >
  445. <div>
  446. <div>{{ item.name }}</div>
  447. </div>
  448. <div :class="item.name1 == undefined ? 'long' : ''">
  449. <el-tooltip
  450. v-for="(data, len) in item.val"
  451. :key="len"
  452. effect="dark"
  453. :content="data"
  454. :disabled="(data + '').length < 20"
  455. placement="top"
  456. >
  457. <div>{{ data == null ? "" : data }}</div>
  458. </el-tooltip>
  459. </div>
  460. <div v-if="item.name1 != undefined">
  461. <el-tooltip
  462. effect="dark"
  463. :content="item.name1"
  464. :disabled="(item.name1 + '').length < 13"
  465. placement="top"
  466. >
  467. <div>{{ item.name1 }}</div>
  468. </el-tooltip>
  469. </div>
  470. <div v-if="item.name1 != undefined">
  471. <el-tooltip
  472. v-for="(data, index) in item.val1"
  473. :key="index"
  474. effect="dark"
  475. :content="data"
  476. :disabled="(data + '').length < 22"
  477. placement="top"
  478. >
  479. <div>{{ data == null ? "" : data }}</div>
  480. </el-tooltip>
  481. </div>
  482. <div v-if="item.name1 != undefined">
  483. <el-tooltip
  484. effect="dark"
  485. :content="item.name2"
  486. :disabled="(item.name2 + '').length < 13"
  487. placement="top"
  488. >
  489. <div>{{ item.name2 }}</div>
  490. </el-tooltip>
  491. </div>
  492. <div v-if="item.name1 != undefined">
  493. <el-tooltip
  494. v-for="(data, index) in item.val2"
  495. :key="index"
  496. effect="dark"
  497. :content="data"
  498. :disabled="(data + '').length < 22"
  499. placement="top"
  500. >
  501. <div>{{ data == null ? "" : data }}</div>
  502. </el-tooltip>
  503. </div>
  504. </div>
  505. </div>
  506. </div>
  507. </div>
  508. </el-dialog>
  509. </d2-container>
  510. </div>
  511. </template>
  512. <script>
  513. import addDialog from "../compontents/addDialog.vue";
  514. import api from "@/api";
  515. import mqtt from "mqtt";
  516. import detailTable from "@/components/detailTable/index.vue";
  517. import log from "@/libs/util.log";
  518. export default {
  519. name: "productInfo",
  520. components: { detailTable, addDialog },
  521. data() {
  522. return {
  523. rightDewValue: null,
  524. rightTempValue: null,
  525. rightWetValue: null,
  526. alarmRecord: [],
  527. pintsPageList: [],
  528. rwList: [],
  529. client: {},
  530. info: {},
  531. checkDialog: false,
  532. dialogTableVisible: false,
  533. formInline: {},
  534. formTime: {},
  535. tableData: [{}],
  536. runData: [{}],
  537. productData: [{}],
  538. activeName: "first",
  539. basicInfo: [
  540. {
  541. name: "设备ID",
  542. val: [""],
  543. name1: "设备名称",
  544. val1: [""],
  545. },
  546. {
  547. name: "产品名称",
  548. val: [""],
  549. name1: "产品分类",
  550. val1: [""],
  551. },
  552. {
  553. name: "所属组织机构",
  554. val: [""],
  555. name1: "设备状态",
  556. val1: [""],
  557. },
  558. {
  559. name: "最后上线时间",
  560. val: [""],
  561. name1: "设备标签",
  562. val1: [""],
  563. },
  564. {
  565. name: "最后上线时间",
  566. val: [""],
  567. name1: "创建时间",
  568. val1: [""],
  569. },
  570. {
  571. name: "描述",
  572. val: [""],
  573. },
  574. ],
  575. checkInfo: [
  576. {
  577. name: "检测时间",
  578. val: [""],
  579. },
  580. {
  581. name: "最高温度(℃)",
  582. val: [""],
  583. name1: "最低温度(℃)",
  584. val1: [""],
  585. name2: "平均温度(℃)",
  586. val2: [""],
  587. },
  588. {
  589. name: "最高湿度(%RH)",
  590. val: [""],
  591. name1: "最低湿度(%RH)",
  592. val1: [""],
  593. name2: "平均湿度(%RH)",
  594. val2: [""],
  595. },
  596. {
  597. name: "最高露点温度(℃)",
  598. val: [""],
  599. name1: "最低露点温度(℃)",
  600. val1: [""],
  601. name2: "平均露点温度(℃)",
  602. val2: [""],
  603. },
  604. ],
  605. checkInfo1: [
  606. {
  607. title: "设备1(编号/标识/设备名称)",
  608. name: "温度(℃)",
  609. val: [""],
  610. name1: "湿度(%RH)",
  611. val1: [""],
  612. name2: "露点温度(℃)",
  613. val2: [""],
  614. },
  615. ],
  616. //分页
  617. pagination: {
  618. // 每页显示的条数
  619. pageSize: 10,
  620. // 当前页
  621. curPage: 1,
  622. // 总数
  623. total: 20,
  624. },
  625. //弹框分页
  626. pagination1: {
  627. // 每页显示的条数
  628. pageSize: 10,
  629. // 当前页
  630. curPage: 1,
  631. // 总数
  632. total: 20,
  633. },
  634. //弹框分页
  635. pagination2: {
  636. // 每页显示的条数
  637. pageSize: 10,
  638. // 当前页
  639. curPage: 1,
  640. // 总数
  641. total: 20,
  642. },
  643. };
  644. },
  645. created() {
  646. this.getBasic();
  647. this.connect();
  648. },
  649. destroyed() {
  650. this.unconnect();
  651. },
  652. methods: {
  653. connect() {
  654. let options = {
  655. //本地
  656. username: "admin",
  657. password: "public",
  658. //测试
  659. // username: "admin",
  660. // password: "admin@123",
  661. //生产
  662. // username: "admin",
  663. // password: "admin@2Ld&DDrsk",
  664. cleanSession: true,
  665. keepAlive: 60,
  666. clientId: "mqttjs_" + Math.random().toString(16).substr(2, 8),
  667. connectTimeout: 4000,
  668. };
  669. //本地开发环境
  670. this.client = mqtt.connect("ws://192.168.50.169:8083/mqtt", options);
  671. //测试环境
  672. // this.client = mqtt.connect('ws://172.16.0.5:8083/mqtt',options);
  673. //正式环境
  674. // this.client = mqtt.connect('ws://10.105.101.61:8083/mqtt',options);
  675. this.client.on("connect", (e) => {
  676. console.log("成功连接服务器:", e);
  677. //订阅三个名叫'top/#', 'three/#'和'#'的主题
  678. this.client.subscribe(
  679. [
  680. // "/PUSH/c89512024085/DPUT/upload",
  681. // "/PUSH/X1XXXQ2206090069/DPUT/upload",
  682. "/PUSH/8951DQ2207200018/DPUT/upload",
  683. ],
  684. { qos: 1 },
  685. (err) => {
  686. if (!err) {
  687. console.log("订阅成功");
  688. //向主题叫“pubtop”发布一则内容为'hello,this is a nice day!'的消息
  689. this.publish("pubtop", "hello,this is a nice day!");
  690. } else {
  691. console.log("消息订阅失败!");
  692. }
  693. }
  694. );
  695. });
  696. //重新连接
  697. this.reconnect();
  698. //是否已经断开连接
  699. this.mqttError();
  700. //监听获取信息
  701. this.getMessage();
  702. },
  703. //发布消息@topic主题 @message发布内容
  704. publish(topic, message) {
  705. if (!this.client.connected) {
  706. console.log("客户端未连接");
  707. return;
  708. }
  709. this.client.publish(topic, message, { qos: 1 }, (err) => {
  710. if (!err) {
  711. console.log("主题为" + topic + "发布成功");
  712. }
  713. });
  714. },
  715. //监听接收消息
  716. getMessage() {
  717. this.client.on("message", (topic, message) => {
  718. if (message) {
  719. console.log("收到来着", topic, "的信息", message.toString());
  720. const res = JSON.parse(message.toString());
  721. this.runData = res.data;
  722. console.log(res, "res", this.runData, "runData");
  723. this.calcAve(this.runData);
  724. // switch(topic) {
  725. // case 'top/lll' :
  726. // this.msg = res.msg
  727. // break;
  728. // case 'three/#' :
  729. // this.msg = res
  730. // break;
  731. // case 'three/#' :
  732. // this.msg = res
  733. // break;
  734. // default:
  735. // return
  736. // this.msg = res
  737. // }
  738. // this.msg = message
  739. }
  740. });
  741. },
  742. //监听服务器是否连接失败
  743. mqttError() {
  744. this.client.on("error", (error) => {
  745. console.log("连接失败:", error);
  746. this.client.end();
  747. });
  748. },
  749. unsubscribe() {
  750. this.client.unsubscribe(this.mtopic, (error) => {
  751. console.log("主题为" + this.mtopic + "取消订阅成功", error);
  752. });
  753. },
  754. //断开连接
  755. unconnect() {
  756. this.client.end();
  757. this.client = null;
  758. console.log("服务器已断开连接!");
  759. },
  760. //监听服务器重新连接
  761. reconnect() {
  762. this.client.on("reconnect", (error) => {
  763. console.log("正在重连:", error);
  764. });
  765. },
  766. //公共方法计算平均值
  767. calcAve(arr) {
  768. //计算平均值
  769. let avgNum = 0;
  770. this.rightDewValue = 0;
  771. this.rightTempValue = 0;
  772. this.rightWetValue = 0;
  773. arr.forEach((item) => {
  774. avgNum++;
  775. console.log(item, "item");
  776. item.dewValue = parseInt(item.dewValue);
  777. item.tempValue = parseInt(item.tempValue);
  778. item.wetValue = parseInt(item.wetValue);
  779. //露点均温
  780. this.rightDewValue += item.dewValue;
  781. //温度均温
  782. this.rightTempValue += item.tempValue;
  783. //湿度均温
  784. this.rightWetValue += item.wetValue;
  785. console.log(
  786. this.rightDewValue,
  787. this.rightTempValue,
  788. this.rightWetValue
  789. );
  790. });
  791. //取整
  792. console.log(this.rightDewValue, avgNum, "wwwwww");
  793. this.rightDewValue = parseInt(this.rightDewValue / avgNum);
  794. this.rightTempValue = parseInt(this.rightTempValue / avgNum);
  795. this.rightWetValue = parseInt(this.rightWetValue / avgNum);
  796. console.log(this.rightDewValue, "//////");
  797. },
  798. //获取列表数据
  799. getList() {
  800. var condition = {};
  801. condition.org_code = localStorage.getItem("orgCode");
  802. condition = JSON.stringify(condition);
  803. var data = {
  804. pageIndex: this.pagination.curPage,
  805. pageSize: this.pagination.pageSize,
  806. condition: condition,
  807. };
  808. api
  809. .equipmentList(data)
  810. .then((res) => {
  811. if (res.code == 200) {
  812. this.tableData = res.data.records;
  813. this.pagination.pageSize = res.data.size;
  814. this.pagination.total = res.data.total;
  815. }
  816. })
  817. .catch((err) => {
  818. console.log(err);
  819. });
  820. },
  821. edit() {
  822. this.$refs.addDialog.dialogFormVisible = true;
  823. // this.$refs.addDialog.ckList();
  824. this.$refs.addDialog.getInfo(this.info);
  825. },
  826. getBasic() {
  827. api.equipmentDetail(this.$route.query.id).then((res) => {
  828. if (res.code == 200) {
  829. this.info = res.data;
  830. this.basicInfo = [
  831. {
  832. name: "设备ID",
  833. val: [this.info.eqCode],
  834. name1: "设备名称",
  835. val1: [this.info.eqName],
  836. },
  837. {
  838. name: "产品名称",
  839. val: [this.info.proName],
  840. // name: "产品分类",
  841. // val: [this.info.proName],
  842. name1: "所属组织机构",
  843. val1: [this.info.orgName],
  844. },
  845. {
  846. name: "设备状态",
  847. val: [this.info.eqStatus],
  848. name1: "最后上线时间",
  849. val1: [this.info.lastOnlineTime],
  850. },
  851. {
  852. name: "设备标签",
  853. val: [this.info.labelName],
  854. name1: "创建时间",
  855. val1: [this.info.registerTime],
  856. },
  857. {
  858. name: "所属仓房编码",
  859. val: [this.info.houseCode],
  860. name1: "描述",
  861. val1: [this.info.eqRemark],
  862. },
  863. ];
  864. }
  865. });
  866. },
  867. // 查看检测信息
  868. checkDetail(row) {
  869. console.log(12);
  870. this.$set(this, "checkDialog", true);
  871. this.checkDialog = true;
  872. },
  873. //检测开始
  874. checkStart() {
  875. this.$confirm("确认发送温湿度检测请求?", "检测操作提示", {
  876. confirmButtonText: "确定",
  877. cancelButtonText: "取消",
  878. type: "warning",
  879. }).then(() => {
  880. this.$message({
  881. type: "success",
  882. message: "发送成功",
  883. });
  884. });
  885. },
  886. //取消关联
  887. cancelMatch(row) {
  888. this.$confirm("确认进行取消关联操作吗?", "取消关联提示", {
  889. confirmButtonText: "确定",
  890. cancelButtonText: "取消",
  891. type: "warning",
  892. }).then(() => {
  893. this.$message({
  894. type: "success",
  895. message: "取消关联成功",
  896. });
  897. });
  898. },
  899. // 返回
  900. goBack() {
  901. this.$router.go(-1);
  902. },
  903. tabsClick(v) {
  904. if (v.name == "fourth") {
  905. this.$router.push({
  906. path: "alarmRecord",
  907. query: { eqCode: this.$route.query.eqCode },
  908. });
  909. } else if (v.name == "second") {
  910. this.getRwList();
  911. } else if (v.name == "third") {
  912. this.getPoints();
  913. }
  914. },
  915. getPoints() {
  916. // var condition = this.formTime;
  917. var condition = {
  918. orgCode: localStorage.getItem("orgCode"),
  919. labelCode: this.$route.query.labelCode,
  920. device: this.$route.query.eqCode,
  921. dataTime: this.formTime.time,
  922. };
  923. condition = JSON.stringify(condition);
  924. var data = {
  925. pageIndex: this.pagination2.curPage,
  926. pageSize: this.pagination2.pageSize,
  927. condition: condition,
  928. };
  929. api
  930. .getPintsPageList(data)
  931. .then((res) => {
  932. if (res.code == 200) {
  933. this.pintsPageList = res.data.records;
  934. this.pagination2.pageSize = res.data.size;
  935. this.pagination2.total = res.data.total;
  936. if (this.pintsPageList.length > 0) {
  937. this.calcAve(this.pintsPageList);
  938. } else {
  939. this.rightDewValue = 0;
  940. this.rightTempValue = 0;
  941. this.rightWetValue = 0;
  942. }
  943. }
  944. })
  945. .catch((err) => {
  946. console.log(err);
  947. });
  948. },
  949. //获取定时任务列表数据
  950. getRwList() {
  951. // var condition = { orgCode: localStorage.getItem("orgCode") };
  952. // condition = JSON.stringify(condition);
  953. // var data = {
  954. // pageIndex: 1,
  955. // pageSize: 999999,
  956. // condition: condition,
  957. // };
  958. api
  959. .timingTaskEq(this.info.eqCode, localStorage.getItem("orgCode"))
  960. .then((res) => {
  961. if (res.code == 200) {
  962. this.rwList = res.data;
  963. } else {
  964. this.$message.error(res.msg);
  965. }
  966. })
  967. .catch((err) => {
  968. console.log(err);
  969. });
  970. },
  971. //查询
  972. search() {},
  973. //重置
  974. reset() {
  975. this.formInline = {};
  976. },
  977. //确定
  978. sure() {},
  979. //表格序号
  980. indexMethod(index) {
  981. return (
  982. (this.pagination.curPage - 1) * this.pagination.pageSize + index + 1
  983. );
  984. },
  985. // 每页条数改变
  986. handleSizeChange(val) {
  987. this.pagination.pageSize = val;
  988. this.getList();
  989. },
  990. // 当前页改变
  991. handleCurrentChange(val) {
  992. this.pagination.curPage = val;
  993. this.getList();
  994. },
  995. // 每页条数改变
  996. handleSizeChange1(val) {
  997. this.pagination1.pageSize = val;
  998. this.getList();
  999. },
  1000. // 当前页改变
  1001. handleCurrentChange1(val) {
  1002. this.pagination1.curPage = val;
  1003. this.getList();
  1004. },
  1005. // 每页条数改变
  1006. handleSizeChange2(val) {
  1007. this.pagination2.pageSize = val;
  1008. this.getPoints();
  1009. },
  1010. // 当前页改变
  1011. handleCurrentChange2(val) {
  1012. this.pagination2.curPage = val;
  1013. this.getPoints();
  1014. },
  1015. },
  1016. mounted() {},
  1017. };
  1018. </script>
  1019. <style lang="scss" scoped>
  1020. .main {
  1021. height: 100%;
  1022. display: flex;
  1023. .zt_right {
  1024. width: 100%;
  1025. // margin-left: 20px;
  1026. // width: calc(100% - 250px);
  1027. .nav {
  1028. padding: 10px 0 10px 10px;
  1029. font-size: 14px;
  1030. background: #fff;
  1031. cursor: pointer;
  1032. }
  1033. .nameTitle {
  1034. // width: 100%;
  1035. font-size: 14px;
  1036. background: #fff;
  1037. padding: 20px 0 30px 20px;
  1038. margin-top: 10px;
  1039. i {
  1040. font-weight: bold;
  1041. font-size: 16px;
  1042. cursor: pointer;
  1043. }
  1044. .name {
  1045. // border-bottom: 2px solid #008775;
  1046. // color: #008775;
  1047. span {
  1048. font-weight: bold;
  1049. color: #000000;
  1050. }
  1051. }
  1052. }
  1053. .taskDiv {
  1054. padding-bottom: 30px;
  1055. padding-left: 100px;
  1056. .normalBtn {
  1057. padding: 7px 15px;
  1058. border-radius: 3px;
  1059. border: 1px solid #dcdfe6;
  1060. margin-right: 10px;
  1061. }
  1062. .gdWidth {
  1063. display: inline-block;
  1064. position: absolute;
  1065. text-align: right;
  1066. left: 0;
  1067. width: 100px;
  1068. overflow: hidden; /*超出部分隐藏*/
  1069. white-space: nowrap; /*不换行*/
  1070. text-overflow: ellipsis; /*超出部分文字以...显示*/
  1071. }
  1072. }
  1073. }
  1074. }
  1075. ::v-deep .el-tabs {
  1076. background: #fff;
  1077. padding: 0 20px;
  1078. padding-bottom: 20px;
  1079. }
  1080. ::v-deep .el-table--border {
  1081. border-color: none !important ;
  1082. }
  1083. .infoTitle {
  1084. width: 100%;
  1085. // border-bottom: 1px solid #e6e6e6;
  1086. display: flex;
  1087. align-items: center;
  1088. justify-content: space-between;
  1089. padding-bottom: 10px;
  1090. h5 {
  1091. margin: 0;
  1092. // padding-left:20px;
  1093. }
  1094. i {
  1095. color: #008775;
  1096. padding-right: 20px;
  1097. padding-top: 10px;
  1098. font-size: 14px;
  1099. cursor: pointer;
  1100. }
  1101. }
  1102. .topType {
  1103. color: #f56c6c;
  1104. margin-bottom: 20px;
  1105. span {
  1106. margin-right: 30px;
  1107. display: inline-block;
  1108. padding-right: 50px;
  1109. background-color: #fbc4c4;
  1110. cursor: pointer;
  1111. }
  1112. }
  1113. .flex-between {
  1114. display: flex;
  1115. // align-items: center;
  1116. justify-content: space-between;
  1117. margin-bottom: -10px;
  1118. }
  1119. .panel-height-add {
  1120. // overflow: auto;
  1121. background-color: #ffffff;
  1122. // box-shadow: 0px 4px 12px 0px rgba(0, 0, 0, 0.3);
  1123. margin-bottom: 20px;
  1124. .infoTitle {
  1125. width: 100%;
  1126. // border-bottom: 1px solid #e6e6e6;
  1127. display: flex;
  1128. align-items: center;
  1129. justify-content: space-between;
  1130. h5 {
  1131. margin: 0;
  1132. padding-left: 20px;
  1133. }
  1134. i {
  1135. color: #008775;
  1136. padding-right: 20px;
  1137. padding-top: 10px;
  1138. font-size: 14px;
  1139. cursor: pointer;
  1140. }
  1141. }
  1142. .detBox {
  1143. width: 100%;
  1144. border-left: 1px solid #e6e6e6;
  1145. border-top: 1px solid #e6e6e6;
  1146. margin-bottom: 30px;
  1147. .title {
  1148. background: #f3f3f3;
  1149. line-height: 40px;
  1150. border-bottom: 1px solid #e6e6e6;
  1151. border-right: 1px solid #e6e6e6;
  1152. }
  1153. .one {
  1154. line-height: 48px;
  1155. }
  1156. .two {
  1157. line-height: 96px;
  1158. }
  1159. .divF {
  1160. width: 100%;
  1161. display: flex;
  1162. // align-items: center;
  1163. border-bottom: 1px solid #e6e6e6;
  1164. > div {
  1165. > div:last-child {
  1166. border-bottom: none !important;
  1167. }
  1168. div {
  1169. line-height: 48px;
  1170. height: 48px;
  1171. border-bottom: 1px solid #e6e6e6;
  1172. // padding-left: 10px;
  1173. }
  1174. }
  1175. }
  1176. .divF > div > div:last-child {
  1177. border: none;
  1178. }
  1179. .divF > div:nth-child(odd) {
  1180. width: 27%;
  1181. text-align: center;
  1182. background: #f3f3f3;
  1183. font-size: 14px;
  1184. div {
  1185. width: 100%;
  1186. overflow: hidden; /*超出部分隐藏*/
  1187. white-space: nowrap; /*不换行*/
  1188. text-overflow: ellipsis; /*超出部分文字以...显示*/
  1189. font-weight: bold;
  1190. color: #505050;
  1191. }
  1192. }
  1193. .divF > div:nth-child(even) {
  1194. width: 27%;
  1195. border-right: 1px solid #e6e6e6;
  1196. border-left: 1px solid #e6e6e6;
  1197. text-align: center;
  1198. font-size: 14px;
  1199. div {
  1200. width: 100%;
  1201. overflow: hidden; /*超出部分隐藏*/
  1202. white-space: nowrap; /*不换行*/
  1203. text-overflow: ellipsis; /*超出部分文字以...显示*/
  1204. color: #505050;
  1205. }
  1206. }
  1207. .long {
  1208. width: 136% !important;
  1209. }
  1210. }
  1211. }
  1212. .nowData {
  1213. display: flex;
  1214. > div {
  1215. width: 200px;
  1216. position: relative;
  1217. text-align: center;
  1218. > div:nth-child(2) {
  1219. color: #008775;
  1220. font-weight: bold;
  1221. margin-top: 10px;
  1222. }
  1223. }
  1224. > div:not(:last-child)::after {
  1225. content: "";
  1226. width: 1px;
  1227. height: 20px;
  1228. background-color: #ebeef5;
  1229. position: absolute;
  1230. right: 0;
  1231. top: 50%;
  1232. margin-top: -10px;
  1233. }
  1234. }
  1235. </style>