balancePressHome2.vue 15 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560
  1. <template>
  2. <a-spin tip="Loading..." :spinning="loading">
  3. <div class="monitor-container">
  4. <ModuleCommon
  5. v-for="cfg in configs"
  6. :key="cfg.deviceType"
  7. :show-style="cfg.showStyle"
  8. :module-data="cfg.moduleData"
  9. :module-name="cfg.moduleName"
  10. :device-type="cfg.deviceType"
  11. :data="selectData"
  12. :visible="true"
  13. /> </div
  14. ></a-spin>
  15. </template>
  16. <script setup lang="ts">
  17. import { ref, onMounted, onUnmounted, defineProps } from 'vue';
  18. import { mountedThree, destroy, setModelType, updateText, play } from '../balancePress.threejs';
  19. import { list } from '../balancePress.api';
  20. import ModuleCommon from '../../../home/configurable/components/ModuleCommon.vue';
  21. import { useInitConfigs } from '../../../home/configurable/hooks/useInit';
  22. import { useGlobSetting } from '/@/hooks/setting';
  23. // import { Config } from '../../../deviceManager/configurationTable/types';
  24. const props = defineProps({
  25. deviceId: {
  26. type: String,
  27. require: true,
  28. },
  29. });
  30. const { sysOrgCode } = useGlobSetting();
  31. const loading = ref(false);
  32. // 监测数据
  33. const selectData = ref();
  34. // https获取监测数据
  35. let timer: any = null;
  36. function getMonitor(flag?) {
  37. if (Object.prototype.toString.call(timer) === '[object Null]') {
  38. timer = setTimeout(
  39. async () => {
  40. if (props.deviceId) {
  41. const data = await getDataSource(props.deviceId);
  42. // Object.assign(selectData, data);
  43. updateText(selectData);
  44. selectData.value = data;
  45. }
  46. if (timer) {
  47. timer = null;
  48. }
  49. await getMonitor();
  50. loading.value = false;
  51. },
  52. flag ? 0 : 1000
  53. );
  54. }
  55. }
  56. async function getDataSource(systemID) {
  57. const res = await list({ devicetype: 'sys', systemID });
  58. const result = Array.from(res.msgTxt).reduce(
  59. (obj: any, e: any) => {
  60. obj[e.type] = e;
  61. // if (true) {
  62. if (sysOrgCode === 'sdmtjtswmk') {
  63. if (e.type.startsWith('fanlocal')) {
  64. obj.fanlocal.datalist.push(...e.datalist);
  65. }
  66. if (e.type.startsWith('safetymonitor')) {
  67. e.datalist.forEach((ele) => {
  68. if (ele.strinstallpos.includes('风门')) {
  69. obj.gate.datalist.push(ele);
  70. } else if (ele.strinstallpos.includes('风窗')) {
  71. obj.window.datalist.push(ele);
  72. } else if (ele.strinstallpos.includes('工作面')) {
  73. obj.work_surface.datalist.push(ele);
  74. } else {
  75. obj.others.datalist.push(ele);
  76. }
  77. });
  78. }
  79. }
  80. return obj;
  81. },
  82. {
  83. /** 用于归类fanlocal */
  84. fanlocal: { datalist: [] },
  85. /** 用于归类gate */
  86. gate: { datalist: [] },
  87. /** 用于归类window */
  88. window: { datalist: [] },
  89. /** 用于归类work_surface */
  90. work_surface: { datalist: [] },
  91. others: { datalist: [] },
  92. }
  93. );
  94. return result;
  95. }
  96. // const configs = ref<Config[]>([
  97. // {
  98. // deviceType: 'fanlocal',
  99. // moduleName: '局部风机',
  100. // pageType: 'balancePressHome',
  101. // moduleData: {
  102. // header: {
  103. // show: true,
  104. // readFrom: 'datalist',
  105. // selector: {
  106. // show: true,
  107. // value: '${deviceID}',
  108. // trans: {
  109. // '1910221332833665026': '主机',
  110. // '1910221283626090497': '备机',
  111. // },
  112. // },
  113. // slot: {
  114. // show: false,
  115. // value: '',
  116. // },
  117. // },
  118. // background: {
  119. // show: false,
  120. // type: 'image',
  121. // link: '',
  122. // },
  123. // layout: {
  124. // direction: 'column',
  125. // items: [
  126. // {
  127. // name: 'tabs',
  128. // basis: '100%',
  129. // },
  130. // ],
  131. // },
  132. // complex_list: [],
  133. // chart: [],
  134. // table: [],
  135. // gallery: [],
  136. // list: [],
  137. // tabs: [
  138. // {
  139. // type: 'K',
  140. // readFrom: '',
  141. // mapFromData: false,
  142. // items: [
  143. // {
  144. // title: '电机1',
  145. // contents: [
  146. // {
  147. // label: '输出功率',
  148. // value: '${readData.Fan1StartStatus}',
  149. // color: 'blue',
  150. // },
  151. // {
  152. // label: '输出电压',
  153. // value: '${readData.Fan1StartStatus}',
  154. // color: 'blue',
  155. // },
  156. // ],
  157. // },
  158. // {
  159. // title: '电机2',
  160. // contents: [
  161. // {
  162. // label: '输出功率',
  163. // value: '${readData.Fan2StartStatus}',
  164. // color: 'blue',
  165. // },
  166. // {
  167. // label: '输出电压',
  168. // value: '${readData.Fan2StartStatus}',
  169. // color: 'blue',
  170. // },
  171. // {
  172. // label: '输出电压',
  173. // value: '${readData.Fan2StartStatus}',
  174. // color: 'blue',
  175. // },
  176. // {
  177. // label: '输出电压',
  178. // value: '${readData.Fan2StartStatus}',
  179. // color: 'blue',
  180. // },
  181. // ],
  182. // },
  183. // ],
  184. // },
  185. // ],
  186. // gallery_list: [],
  187. // preset: [],
  188. // to: '',
  189. // },
  190. // showStyle: {
  191. // size: 'width:470px;height:260px;',
  192. // version: '原版',
  193. // position: 'top:20px;left:0;',
  194. // },
  195. // },
  196. // {
  197. // deviceType: '',
  198. // moduleName: '风门',
  199. // pageType: 'balancePressHome',
  200. // moduleData: {
  201. // header: {
  202. // show: false,
  203. // readFrom: '',
  204. // selector: {
  205. // show: false,
  206. // value: '',
  207. // },
  208. // slot: {
  209. // show: false,
  210. // value: '',
  211. // },
  212. // },
  213. // background: {
  214. // show: false,
  215. // type: 'image',
  216. // link: '',
  217. // },
  218. // layout: {
  219. // direction: 'column',
  220. // items: [
  221. // {
  222. // name: 'complex_list',
  223. // basis: '100%',
  224. // },
  225. // ],
  226. // },
  227. // complex_list: [
  228. // {
  229. // type: 'G',
  230. // readFrom: 'gate.datalist',
  231. // mapFromData: true,
  232. // items: [
  233. // {
  234. // title: '${deviceID}',
  235. // trans: {
  236. // '1915631893453004802': '22107胶运顺槽入口自动风门2',
  237. // '1915631893478170626': '22107胶运顺槽入口自动风门1',
  238. // '1915631897043329025': '22107辅回撤通道自动风门1',
  239. // '1915631895088783362': '22107辅回撤通道自动风门2',
  240. // },
  241. // contents: [
  242. // {
  243. // label: '状态',
  244. // value: '${readData.V}',
  245. // color: 'blue',
  246. // },
  247. // ],
  248. // },
  249. // ],
  250. // },
  251. // ],
  252. // chart: [],
  253. // table: [],
  254. // gallery: [],
  255. // list: [],
  256. // gallery_list: [],
  257. // preset: [],
  258. // to: '',
  259. // },
  260. // showStyle: {
  261. // size: 'width:470px;height:320px;',
  262. // version: '原版',
  263. // position: 'top:290px;left:0;',
  264. // },
  265. // },
  266. // {
  267. // deviceType: '',
  268. // moduleName: '综采工作面推进度',
  269. // pageType: 'balancePressHome',
  270. // moduleData: {
  271. // header: {
  272. // show: false,
  273. // readFrom: '',
  274. // selector: {
  275. // show: false,
  276. // value: '',
  277. // },
  278. // slot: {
  279. // show: false,
  280. // value: '',
  281. // },
  282. // },
  283. // background: {
  284. // show: false,
  285. // type: 'image',
  286. // link: '',
  287. // },
  288. // layout: {
  289. // direction: 'column',
  290. // items: [
  291. // {
  292. // name: 'list',
  293. // basis: '100%',
  294. // },
  295. // ],
  296. // },
  297. // complex_list: [],
  298. // chart: [],
  299. // table: [],
  300. // gallery: [],
  301. // list: [
  302. // {
  303. // type: 'K',
  304. // readFrom: '',
  305. // items: [
  306. // {
  307. // label: '进度',
  308. // value: '50%',
  309. // color: 'blue',
  310. // },
  311. // {
  312. // label: '埋深',
  313. // value: '2000km',
  314. // color: 'blue',
  315. // },
  316. // ],
  317. // },
  318. // ],
  319. // gallery_list: [],
  320. // preset: [],
  321. // to: '',
  322. // },
  323. // showStyle: {
  324. // size: 'width:470px;height:130px;',
  325. // version: '原版',
  326. // position: 'top:620px;left:0;',
  327. // },
  328. // },
  329. // {
  330. // deviceType: '',
  331. // moduleName: '重点监控传感器',
  332. // pageType: 'balancePressHome',
  333. // moduleData: {
  334. // header: {
  335. // show: false,
  336. // readFrom: '',
  337. // selector: {
  338. // show: false,
  339. // value: '',
  340. // },
  341. // slot: {
  342. // show: false,
  343. // value: '',
  344. // },
  345. // },
  346. // background: {
  347. // show: false,
  348. // type: 'image',
  349. // link: '',
  350. // },
  351. // layout: {
  352. // direction: 'column',
  353. // items: [
  354. // {
  355. // name: 'complex_list',
  356. // basis: '100%',
  357. // },
  358. // ],
  359. // },
  360. // complex_list: [
  361. // {
  362. // type: 'G',
  363. // readFrom: 'avgpressure_lowoxygen_normal.datalist',
  364. // mapFromData: true,
  365. // items: [
  366. // {
  367. // title: '${strinstallpos}',
  368. // contents: [
  369. // {
  370. // label: '网络状态',
  371. // value: '${readData.netStatus_str}',
  372. // color: 'blue',
  373. // },
  374. // ],
  375. // },
  376. // ],
  377. // },
  378. // ],
  379. // chart: [],
  380. // table: [],
  381. // gallery: [],
  382. // list: [],
  383. // gallery_list: [],
  384. // preset: [],
  385. // to: '',
  386. // },
  387. // showStyle: {
  388. // size: 'width:470px;height:230px;',
  389. // version: '原版',
  390. // position: 'top:20px;right:0;',
  391. // },
  392. // },
  393. // {
  394. // deviceType: '',
  395. // moduleName: '辅助巡检传感器',
  396. // pageType: 'balancePressHome',
  397. // moduleData: {
  398. // header: {
  399. // show: false,
  400. // readFrom: '',
  401. // selector: {
  402. // show: false,
  403. // value: '',
  404. // },
  405. // slot: {
  406. // show: false,
  407. // value: '',
  408. // },
  409. // },
  410. // background: {
  411. // show: false,
  412. // type: 'image',
  413. // link: '',
  414. // },
  415. // layout: {
  416. // direction: 'column',
  417. // items: [
  418. // {
  419. // name: 'complex_list',
  420. // basis: '100%',
  421. // },
  422. // ],
  423. // },
  424. // complex_list: [
  425. // {
  426. // type: 'G',
  427. // readFrom: 'others.datalist',
  428. // mapFromData: true,
  429. // items: [
  430. // {
  431. // title: '${strinstallpos}',
  432. // contents: [
  433. // {
  434. // label: '网络状态',
  435. // value: '${readData.netStatus_str}',
  436. // color: 'blue',
  437. // },
  438. // ],
  439. // },
  440. // ],
  441. // },
  442. // ],
  443. // chart: [],
  444. // table: [],
  445. // gallery: [],
  446. // list: [],
  447. // gallery_list: [],
  448. // preset: [],
  449. // to: '',
  450. // },
  451. // showStyle: {
  452. // size: 'width:470px;height:230px;',
  453. // version: '原版',
  454. // position: 'top:260px;right:0;',
  455. // },
  456. // },
  457. // {
  458. // deviceType: '',
  459. // moduleName: '地面大气压',
  460. // pageType: 'balancePressHome',
  461. // moduleData: {
  462. // header: {
  463. // show: false,
  464. // readFrom: '',
  465. // selector: {
  466. // show: false,
  467. // value: '',
  468. // },
  469. // slot: {
  470. // show: false,
  471. // value: '',
  472. // },
  473. // },
  474. // background: {
  475. // show: false,
  476. // type: 'image',
  477. // link: '',
  478. // },
  479. // layout: {
  480. // direction: 'column',
  481. // items: [
  482. // {
  483. // name: 'chart',
  484. // basis: '100%',
  485. // },
  486. // ],
  487. // },
  488. // complex_list: [],
  489. // chart: [
  490. // {
  491. // type: 'line_smooth',
  492. // readFrom: 'surface_history.datalist',
  493. // legend: { show: true },
  494. // xAxis: [{ show: true }],
  495. // yAxis: [
  496. // { show: true, name: '压力1(Pa)', position: 'left' },
  497. // { show: true, name: '压力2(Pa)', position: 'right' },
  498. // ],
  499. // series: [
  500. // { readFrom: '', xprop: 'time', yprop: 'pressure1', label: '压力1' },
  501. // // { readFrom: 'datalist', xprop: 'strinstallpos', yprop: 'readData.va', label: '风速' },
  502. // ],
  503. // },
  504. // ],
  505. // table: [],
  506. // gallery: [],
  507. // list: [],
  508. // gallery_list: [],
  509. // preset: [],
  510. // to: '',
  511. // },
  512. // showStyle: {
  513. // size: 'width:470px;height:250px;',
  514. // version: '原版',
  515. // position: 'top:500px;right:0;',
  516. // },
  517. // },
  518. // ]);
  519. const { configs, fetchConfigs } = useInitConfigs();
  520. onMounted(() => {
  521. // getMonitor()
  522. fetchConfigs('balancePressHome');
  523. loading.value = true;
  524. mountedThree().then(async () => {
  525. await setModelType('balancePressBase'); //balancePressBase
  526. loading.value = false;
  527. timer = null;
  528. await getMonitor(true);
  529. play('startSmoke', 'top', 30, 'open', 0);
  530. });
  531. });
  532. onUnmounted(() => {
  533. destroy();
  534. if (timer) {
  535. clearTimeout(timer);
  536. }
  537. });
  538. </script>
  539. <style lang="less" scoped>
  540. @import '/@/design/vent/modal.less';
  541. @import '../../comment/less/workFace.less';
  542. @ventSpace: zxm;
  543. .monitor-container {
  544. margin-top: 60px;
  545. }
  546. </style>