index.vue 19 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595
  1. <template>
  2. <div class="safetyList">
  3. <customHeader>监控分站管理</customHeader>
  4. <div class="content">
  5. <div class="left-box">
  6. <div class="left-title">
  7. <div class="title-fz">
  8. <span>分站:</span>
  9. <span>
  10. [通讯正常]
  11. <span class="zd-open">{{ openNum || 0 }}</span>
  12. </span>
  13. <span>
  14. [通讯中断]
  15. <span class="zd-close">{{ clsoeNum || 0 }}</span>
  16. </span>
  17. </div>
  18. <!-- <div class="title-cd">
  19. <span>测点:</span>
  20. <span>
  21. [通讯正常]
  22. <span class="zd-open">407</span>
  23. </span>
  24. <span>
  25. [通讯中断]
  26. <span class="zd-close">0</span>
  27. </span>
  28. </div> -->
  29. </div>
  30. <div class="left-content">
  31. <div class="card-box" v-for="(item, index) in cardList" :key="index">
  32. <div :class="item.isNewAccess ? 'card-itemN' : item.linkstatus ? 'card-itemL' : 'card-itemD'" @click="cardClick(item, index)">
  33. <div class="card-item-label">{{ item.strname }}</div>
  34. </div>
  35. <div :class="activeIndex % 4 == 3 ? 'card-modal1' : 'card-modal'" v-if="activeIndex == index && isShow">
  36. <div class="modal-name">站点名称:</div>
  37. <a-input v-model:value="stationName" size="small" placeholder="请输入" @blur="changeName" />
  38. <div class="modal-lj">连接状态:</div>
  39. <a-radio-group v-model:value="stationStatus" size="small" :options="ljList" @change="changeStatus" />
  40. </div>
  41. </div>
  42. </div>
  43. </div>
  44. <div class="right-box">
  45. <div class="right-title">详细信息:</div>
  46. <a-table size="small" :scroll="{ y: 710 }" :columns="columns" :data-source="tableData" :pagination="pagination" @change="pageChange">
  47. <template #action="{ record }">
  48. <a-button
  49. v-if="!record.devInfoList"
  50. type="primary"
  51. :disabled="record.linkId != '0'"
  52. size="small"
  53. @click="handlerunDeviceMonitor(record, '启动')"
  54. >启动</a-button
  55. >
  56. <a-button type="success" size="small" style="margin: 0px 10px" @click="handlerunDeviceMonitor(record, '编辑')">编辑</a-button>
  57. <a-button type="primary" size="small" @click="debugClick(record)">{{ record.debugTitle }}</a-button>
  58. </template>
  59. <template #bodyCell="{ column, text }">
  60. <template v-if="column.dataIndex === 'valueJc' && text">
  61. <div v-for="item in text.split(',')" :key="item">
  62. <span
  63. v-if="item.substring(item.indexOf(':') + 1) && !isNaN(parseFloat(item.substring(item.indexOf(':') + 1)))"
  64. style="display: inline-block; width: 45%; text-align: right; color: rgb(0, 242, 255); margin-right: 5px"
  65. >{{ item.substring(0, item.indexOf(':') + 1) }}</span
  66. >
  67. <span
  68. v-if="item.substring(item.indexOf(':') + 1) && !isNaN(parseFloat(item.substring(item.indexOf(':') + 1)))"
  69. style="display: inline-block; width: 50%; text-align: left; color: #fff"
  70. >{{
  71. item.substring(item.indexOf(':') + 1) === '1'
  72. ? '正风'
  73. : item.substring(item.indexOf(':') + 1) === '2'
  74. ? '反风'
  75. : item.substring(item.indexOf(':') + 1)
  76. }}
  77. </span>
  78. </div>
  79. </template>
  80. </template>
  81. </a-table>
  82. <!-- 一键启动弹窗 -->
  83. <a-modal style="top: 300px; left: 360px" v-model:visible="visibleModal" :width="450" title="一键启动" @ok="handleOk" @cancel="handleCancel">
  84. <a-form :model="startupData" labelAlign="right" :label-col="{ span: 8 }" :wrapper-col="{ span: 16 }">
  85. <a-form-item label="安装位置">
  86. <a-input v-model:value="startupData.address" placeholder="请输入" style="width: 260px" />
  87. </a-form-item>
  88. </a-form>
  89. </a-modal>
  90. <!-- 编辑弹窗 -->
  91. <a-modal
  92. style="top: 300px; left: 360px"
  93. v-model:visible="visibleModalEdit"
  94. :width="450"
  95. title="编辑信息"
  96. @ok="handleOkEdit"
  97. @cancel="handleCancelEdit"
  98. >
  99. <a-form :model="startupDataEdit" labelAlign="right" :label-col="{ span: 8 }" :wrapper-col="{ span: 16 }">
  100. <a-form-item label="安装位置">
  101. <a-input v-model:value="startupDataEdit.address" placeholder="请输入" style="width: 260px" />
  102. </a-form-item>
  103. </a-form>
  104. </a-modal>
  105. <!-- 调试弹窗 -->
  106. <a-modal
  107. style="top: 300px; left: 360px"
  108. v-model:visible="visibleModalDebug"
  109. :width="450"
  110. title="调试信息"
  111. @ok="handleOkDebug"
  112. @cancel="handleCancelDebug"
  113. >
  114. <a-form :model="startupDataDebug" labelAlign="right" :label-col="{ span: 8 }" :wrapper-col="{ span: 16 }">
  115. <a-form-item label="风速">
  116. <a-input v-model:value="startupDataDebug.speed" placeholder="请输入" style="width: 260px" />
  117. </a-form-item>
  118. <a-form-item label="风向">
  119. <a-select v-model:value="startupDataDebug.direction" style="width: 260px">
  120. <a-select-option v-for="file in derictList" :key="file.label" :value="file.value">{{ file.label }}</a-select-option>
  121. </a-select>
  122. </a-form-item>
  123. </a-form>
  124. </a-modal>
  125. </div>
  126. </div>
  127. </div>
  128. </template>
  129. <script setup lang="ts">
  130. import { ref, nextTick, reactive, onMounted, onUnmounted } from 'vue';
  131. import customHeader from '/@/components/vent/customHeader.vue';
  132. import { subStationList, getList, getEdit, runDeviceMonitor, update158DevName, updateDebugStatus } from './safetyList.api';
  133. import { columns } from './safetyList.data';
  134. let visibleModalDebug = ref(false);
  135. let debugFlag = ref('');
  136. let debugStationId = ref('');
  137. let debugDeviceId = ref('');
  138. let startupDataDebug = reactive({
  139. speed: '',
  140. direction: '',
  141. });
  142. let derictList = reactive<any[]>([
  143. { label: '正向', value: '1' },
  144. { label: '反向', value: '0' },
  145. ]);
  146. let paramId = ref('');
  147. let isShow = ref(false);
  148. let stationName = ref('');
  149. let stationStatus = ref(null);
  150. let stationId = ref(null);
  151. let ljList = reactive<any[]>([
  152. { value: 0, label: '断开' },
  153. { value: 1, label: '连接' },
  154. ]);
  155. let activeIndex = ref(null);
  156. let cardList = ref<any[]>();
  157. let openNum = ref(0);
  158. let clsoeNum = ref(0);
  159. //分页参数配置
  160. let pagination = reactive({
  161. current: 1, // 当前页码
  162. pageSize: 20, // 每页显示条数
  163. total: 0, // 总条目数,后端返回
  164. // showTotal: (total, range) => `${range[0]}-${range[1]} 条,总共 ${total} 条`, // 分页右下角显示信息
  165. showSizeChanger: true, // 是否可改变每页显示条数
  166. pageSizeOptions: ['10', '20', '30', '40', '50', '100'], // 可选的每页显示条数
  167. });
  168. let tableData = ref<any[]>([]);
  169. //一键启动弹窗
  170. let visibleModal = ref(false);
  171. let startupData = reactive({
  172. address: '',
  173. });
  174. let devId = ref('');
  175. //编辑弹窗
  176. let visibleModalEdit = ref(false);
  177. let startupDataEdit = reactive({
  178. address: '',
  179. });
  180. // // https获取监测数据
  181. // let timer: null | NodeJS.Timeout = null;
  182. // function getMonitor(flag = false) {
  183. // timer = setTimeout(
  184. // async () => {
  185. // // await getSubStationList()
  186. // await getStationList()
  187. // if (timer) {
  188. // timer = null;
  189. // }
  190. // getMonitor();
  191. // },
  192. // flag ? 0 : 5000
  193. // );
  194. // }
  195. //获取分站信息
  196. async function getSubStationList() {
  197. let res = await subStationList({ strtype: 'modbus' });
  198. if (res.length != 0) {
  199. cardList.value = res;
  200. openNum.value = cardList.value?.filter((v) => v.linkstatus == 1)['length'];
  201. clsoeNum.value = cardList.value?.filter((v) => v.linkstatus == 0)['length'];
  202. } else {
  203. cardList.value = [];
  204. }
  205. }
  206. //站点选项点击
  207. function cardClick(item, index) {
  208. activeIndex.value = item.isNewAccess ? index : null;
  209. stationName.value = item.strname;
  210. stationStatus.value = item.linkstatus;
  211. stationId.value = item.id;
  212. isShow.value = true;
  213. getStationList();
  214. }
  215. //站点名称编辑
  216. function changeName(val) {
  217. getChangeStation();
  218. }
  219. //站点连接状态修改
  220. function changeStatus(val) {
  221. getChangeStation();
  222. }
  223. async function getChangeStation() {
  224. let res = await getEdit({ id: stationId.value, strname: stationName.value, linkstatus: stationStatus.value });
  225. getSubStationList();
  226. isShow.value = false;
  227. }
  228. //获取详细信息列表
  229. async function getStationList() {
  230. let res = await getList({ subId: stationId.value, pageNo: pagination.current, pageSize: pagination.pageSize });
  231. res.forEach((el) => {
  232. el.key = el.id;
  233. el.gdmsC = el.gdms == '1' ? '直流供电' : el.gdms == '0' ? '交流供电' : '';
  234. el.linkIdC = el.linkId || '';
  235. el.linkstatusC = el.linkstatus ? '连接' : '断开';
  236. el.debugTitle = '调试';
  237. el.children = el.devInfoList;
  238. el.children.forEach((v) => {
  239. v.key = v.id;
  240. v.debugTitle = '调试';
  241. v.linkstatusC = v.netStatus ? '连接' : '断开';
  242. v.linkIdC = v.linkId == '0' ? '未启用' : v.linkId == '1' ? '启用' : v.linkId == '2' ? '设备异常' : '';
  243. v.updateTime = v.time;
  244. v.gdmsC = v.gdms == '1' ? '直流供电' : v.gdms == '0' ? '交流供电' : '';
  245. v.valueJc = `风向:${v.forward || ''},风量:${v.m3 || ''}m³/min,风速:${v.windSpeed || ''}m/s,气压:${v.pa || ''}Pa,压差:${
  246. v.difPress || ''
  247. }Pa,温度:${v.temperature || ''}℃,湿度:${v.humidity || ''}%,断面积:${v.area || ''}㎡`;
  248. });
  249. });
  250. tableData.value = res;
  251. pagination.total = res.total;
  252. }
  253. //分页切换
  254. function pageChange(val) {
  255. pagination.current = val.current;
  256. pagination.pageSize = val.pageSize;
  257. getStationList();
  258. }
  259. //启动新设备
  260. function handlerunDeviceMonitor(record, val) {
  261. devId.value = record.id;
  262. switch (val) {
  263. case '编辑':
  264. visibleModalEdit.value = true;
  265. startupDataEdit.address = record.strinstallpos;
  266. paramId.value = record.devInfoList ? 'subId' : 'devId';
  267. break;
  268. case '启动':
  269. visibleModal.value = true;
  270. startupData.address = record.strinstallpos;
  271. break;
  272. }
  273. }
  274. //分站,设备调试
  275. function debugClick(record) {
  276. if (record.debugTitle == '调试') {
  277. //正在调试中
  278. startupDataDebug.speed = '';
  279. startupDataDebug.direction = '';
  280. visibleModalDebug.value = true;
  281. if (record.devInfoList) {
  282. debugFlag.value = 'station';
  283. debugStationId.value = record.id;
  284. tableData.value.forEach((el) => {
  285. el.debugTitle = '结束调试';
  286. el.devInfoList.forEach((v) => {
  287. v.debugTitle = '结束调试';
  288. });
  289. });
  290. } else {
  291. debugFlag.value = 'device';
  292. debugDeviceId.value = record.id;
  293. tableData.value.forEach((el) => {
  294. el.devInfoList.forEach((v) => {
  295. if (v.id == debugDeviceId.value) {
  296. debugStationId.value = el.id;
  297. }
  298. });
  299. });
  300. record.debugTitle = '结束调试';
  301. }
  302. } else {
  303. if (record.devInfoList) {
  304. debugFlag.value = 'station';
  305. debugStationId.value = record.id;
  306. tableData.value.forEach((el) => {
  307. el.debugTitle = '调试';
  308. el.devInfoList.forEach((v) => {
  309. v.debugTitle = '调试';
  310. });
  311. });
  312. stopDebug();
  313. } else {
  314. debugFlag.value = 'device';
  315. debugDeviceId.value = record.id;
  316. tableData.value.forEach((el) => {
  317. el.devInfoList.forEach((v) => {
  318. if (v.id == debugDeviceId.value) {
  319. debugStationId.value = el.id;
  320. }
  321. });
  322. });
  323. record.debugTitle = '调试';
  324. stopDebug();
  325. }
  326. }
  327. }
  328. //调试确认
  329. async function handleOkDebug() {
  330. if (debugFlag.value == 'station') {
  331. let res = await updateDebugStatus({
  332. stationId: debugStationId.value,
  333. speed: startupDataDebug.speed,
  334. direction: startupDataDebug.direction,
  335. debugFlag: '1',
  336. });
  337. visibleModalDebug.value = false;
  338. getStationList();
  339. } else {
  340. let res = await updateDebugStatus({
  341. stationId: debugStationId.value,
  342. deviceId: debugDeviceId.value,
  343. speed: startupDataDebug.speed,
  344. direction: startupDataDebug.direction,
  345. debugFlag: '1',
  346. });
  347. visibleModalDebug.value = false;
  348. getStationList();
  349. }
  350. }
  351. //调试取消
  352. function handleCancelDebug() {
  353. visibleModalDebug.value = false;
  354. tableData.value.forEach((el) => {
  355. el.debugTitle = '调试';
  356. el.devInfoList.forEach((v) => {
  357. v.debugTitle = '调试';
  358. });
  359. });
  360. debugFlag.value = '';
  361. debugStationId.value = '';
  362. debugDeviceId.value = '';
  363. }
  364. //停止调试
  365. async function stopDebug() {
  366. if (debugFlag.value == 'station') {
  367. let res = await updateDebugStatus({ stationId: debugStationId.value, debugFlag: '0' });
  368. getStationList();
  369. } else {
  370. let res = await updateDebugStatus({ stationId: debugStationId.value, deviceId: debugDeviceId.value, debugFlag: '0' });
  371. getStationList();
  372. }
  373. }
  374. async function handleOk() {
  375. let res = await runDeviceMonitor({ devId: devId.value, devName: startupData.address });
  376. visibleModal.value = false;
  377. getStationList();
  378. }
  379. function handleCancel() {
  380. visibleModal.value = false;
  381. startupData.address = '';
  382. }
  383. //编辑
  384. async function handleOkEdit() {
  385. if (paramId.value == 'subId') {
  386. let res = await update158DevName({ subId: devId.value, devName: startupDataEdit.address });
  387. console.log(res, '设备名称编辑---');
  388. visibleModalEdit.value = false;
  389. getStationList();
  390. } else {
  391. let res = await update158DevName({ devId: devId.value, devName: startupDataEdit.address });
  392. console.log(res, '设备名称编辑---');
  393. visibleModalEdit.value = false;
  394. getStationList();
  395. }
  396. }
  397. //取消编辑
  398. function handleCancelEdit() {
  399. visibleModalEdit.value = false;
  400. startupDataEdit.address = '';
  401. }
  402. onMounted(() => {
  403. getSubStationList();
  404. // getMonitor(true);
  405. getStationList();
  406. });
  407. onUnmounted(() => {
  408. if (timer) {
  409. clearTimeout(timer);
  410. timer = undefined;
  411. }
  412. });
  413. </script>
  414. <style lang="less" scoped>
  415. .safetyList {
  416. width: calc(100% - 20px);
  417. height: calc(100% - 90px);
  418. position: relative;
  419. margin: 80px 10px 10px 10px;
  420. .content {
  421. position: relative;
  422. width: 100%;
  423. height: 100%;
  424. display: flex;
  425. justify-content: space-between;
  426. align-items: center;
  427. .left-box {
  428. width: 40%;
  429. height: 100%;
  430. margin-right: 15px;
  431. padding: 10px;
  432. box-sizing: border-box;
  433. background: url('/@/assets/images/fire/bj1.png') no-repeat center;
  434. background-size: 100% 100%;
  435. .left-title {
  436. display: flex;
  437. height: 30px;
  438. align-items: center;
  439. font-size: 14px;
  440. margin-bottom: 10px;
  441. span {
  442. color: #fff;
  443. }
  444. .zd-open {
  445. color: rgb(0, 242, 255);
  446. }
  447. .zd-close {
  448. color: #ff0000;
  449. }
  450. .title-fz {
  451. margin-right: 25px;
  452. }
  453. }
  454. .left-content {
  455. display: flex;
  456. justify-content: flex-start;
  457. align-items: flex-start;
  458. flex-wrap: wrap;
  459. height: calc(100% - 40px);
  460. overflow-y: auto;
  461. .card-box {
  462. position: relative;
  463. // width: 242px;
  464. width: 182px;
  465. height: 110px;
  466. margin-bottom: 15px;
  467. display: flex;
  468. justify-content: center;
  469. .card-itemN {
  470. position: relative;
  471. width: 85px;
  472. height: 110px;
  473. background: url('/@/assets/images/zd-2.png') no-repeat center;
  474. background-size: 100% 100%;
  475. cursor: pointer;
  476. .card-item-label {
  477. width: 100%;
  478. position: absolute;
  479. bottom: 5px;
  480. font-size: 12px;
  481. color: #fff;
  482. text-align: center;
  483. }
  484. }
  485. .card-itemL {
  486. position: relative;
  487. width: 85px;
  488. height: 110px;
  489. background: url('/@/assets/images/zd-3.png') no-repeat center;
  490. background-size: 100% 100%;
  491. cursor: pointer;
  492. .card-item-label {
  493. width: 100%;
  494. position: absolute;
  495. bottom: 5px;
  496. font-size: 12px;
  497. color: #fff;
  498. text-align: center;
  499. }
  500. }
  501. .card-itemD {
  502. position: relative;
  503. width: 85px;
  504. height: 110px;
  505. background: url('/@/assets/images/zd-1.png') no-repeat center;
  506. background-size: 100% 100%;
  507. cursor: pointer;
  508. .card-item-label {
  509. width: 100%;
  510. position: absolute;
  511. bottom: 5px;
  512. font-size: 12px;
  513. color: #fff;
  514. text-align: center;
  515. }
  516. }
  517. .card-modal {
  518. width: 86px;
  519. position: absolute;
  520. left: 140px;
  521. color: #fff;
  522. top: 50%;
  523. transform: translate(0, -50%);
  524. font-size: 12px;
  525. }
  526. .card-modal1 {
  527. width: 86px;
  528. position: absolute;
  529. left: -42px;
  530. color: #fff;
  531. top: 50%;
  532. transform: translate(0, -50%);
  533. font-size: 12px;
  534. }
  535. }
  536. }
  537. }
  538. .right-box {
  539. width: calc(60% - 15px);
  540. height: 100%;
  541. padding: 10px;
  542. box-sizing: border-box;
  543. background: url('/@/assets/images/fire/bj1.png') no-repeat center;
  544. background-size: 100% 100%;
  545. .right-title {
  546. display: flex;
  547. height: 30px;
  548. align-items: center;
  549. font-size: 14px;
  550. color: #fff;
  551. margin-bottom: 10px;
  552. }
  553. }
  554. }
  555. }
  556. .zxm-form {
  557. padding-top: 20px !important;
  558. box-sizing: border-box;
  559. }
  560. ::v-deep(.zxm-radio-wrapper) {
  561. font-size: 12px;
  562. }
  563. ::v-deep(.zxm-input) {
  564. font-size: 12px;
  565. }
  566. </style>