home.vue 25 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763
  1. <template>
  2. <view class="container">
  3. <view v-if="!menushow" class="main">
  4. <view class="u-page">
  5. <u-list :class="{ empty: showList.length === 0 }">
  6. <template v-if="showList.length > 0">
  7. <u-list-item
  8. class="itemback"
  9. v-for="(item, index) in showList"
  10. :key="index"
  11. >
  12. <div>
  13. <u-row gutter="5" customStyle="margin-bottom: 10px">
  14. <u-col span="24">
  15. <image
  16. style="position: absolute; width: 18px; height: 18px"
  17. class="icon"
  18. :src="getIcon(TabCur)"
  19. alt="Icon"
  20. />
  21. <span class="title">{{ item.strinstallpos }}</span>
  22. </u-col>
  23. </u-row>
  24. <u-row gutter="5" customStyle="margin-bottom: 10px">
  25. <u-col span="3" style="margin-right: 5rpx">
  26. <div v-if="item.netStatus == 0" class="error-tag1">
  27. <image
  28. src="/static/model/connectFalse.svg"
  29. alt=""
  30. class="icon-style"
  31. />
  32. <span style="float: right">断开</span>
  33. </div>
  34. <div v-else class="success-tag">
  35. <image
  36. src="/static/model/connectTrue.svg"
  37. alt=""
  38. class="icon-style"
  39. />
  40. <span style="float: right">连接</span>
  41. </div>
  42. </u-col>
  43. <u-col span="6">
  44. <div v-if="item.warnFlag == 0" class="success-tag">
  45. <image
  46. src="/static/model/alarmTrue.svg"
  47. alt=""
  48. class="icon-style"
  49. />
  50. <span style="float: right">正常</span>
  51. </div>
  52. <div v-else class="error-tag" @click="toggleWarn()">
  53. <image
  54. v-show="!isWarnVisible"
  55. src="/static/model/alarmFalse.svg"
  56. alt=""
  57. class="icon-style"
  58. />
  59. <span
  60. v-show="isWarnVisible"
  61. style="text-overflow: ellipsis; text-algin: center"
  62. >{{ item.warnDes }}</span
  63. >
  64. </div>
  65. </u-col>
  66. <u-col span="3">
  67. <u--text class="timetext" :text="item.readTime"></u--text>
  68. </u-col>
  69. </u-row>
  70. <view v-if="TabCur != 'fanmain' && TabCur != 'fanlocal'">
  71. <div @tap="openNewPage(item)">
  72. <view
  73. class="datacard"
  74. v-for="(showitem, index) in deviceShowList"
  75. :key="index"
  76. v-show="
  77. showitem.appShow == 1 &&
  78. showitem.monitorcode != 'strinstallpos' &&
  79. showitem.monitorcode != 'netStatus' &&
  80. showitem.monitorcode != 'warnFlag' &&
  81. showitem.monitorcode != 'readTime' &&
  82. showitem.monitorcode != ''
  83. "
  84. >
  85. <view
  86. :class="TabCur"
  87. style="
  88. padding-top: 10rpx;
  89. padding-bottom: 10rpx;
  90. display: flex;
  91. flex-direction: column;
  92. align-items: center;
  93. height: 100%;
  94. "
  95. >
  96. <view
  97. v-if="showitem.monitorcode == 'doorUse'"
  98. class="demo-layout bg-purple-light"
  99. style="
  100. margin-top: 10rpx;
  101. color: #3787fe;
  102. font-size: 30rpx;
  103. margin-top: 20rpx;
  104. "
  105. >
  106. {{
  107. item[showitem.monitorcode] == "2"
  108. ? "行人"
  109. : item[showitem.monitorcode] == "1"
  110. ? "行车"
  111. : item[showitem.monitorcode] == "3"
  112. ? "短路"
  113. : item[showitem.monitorcode] == "3"
  114. ? "行车/短路"
  115. : "-"
  116. }}
  117. </view>
  118. <view
  119. v-else
  120. class="demo-layout bg-purple-light"
  121. style="
  122. color: #3787fe;
  123. font-size: 30rpx;
  124. margin-top: 20rpx;
  125. "
  126. >
  127. {{
  128. item[showitem.monitorcode] == null ||
  129. item[showitem.monitorcode] == ""
  130. ? "-"
  131. : item[showitem.monitorcode]
  132. }}
  133. </view>
  134. <view
  135. class="demo-layout bg-purple-light"
  136. style="
  137. margin-top: 20rpx;
  138. color: #677799;
  139. margin-top: 20rpx;
  140. "
  141. >
  142. {{ showitem.des }}
  143. </view>
  144. </view>
  145. </view>
  146. </div>
  147. </view>
  148. <div class="fanContent" @tap="openNewPage(item)" v-else>
  149. <div class="top">
  150. <view>主机</view>
  151. <view
  152. class="datacard"
  153. v-for="(showitem, index) in deviceShowList"
  154. :key="index"
  155. v-show="
  156. showitem.appShow == 1 &&
  157. showitem.monitorcode != 'strinstallpos' &&
  158. showitem.monitorcode != 'netStatus' &&
  159. showitem.monitorcode != 'warnFlag' &&
  160. showitem.monitorcode != 'readTime' &&
  161. showitem.monitorcode != ''
  162. "
  163. >
  164. <view
  165. :class="TabCur"
  166. style="
  167. padding-top: 10rpx;
  168. padding-bottom: 10rpx;
  169. display: flex;
  170. flex-direction: column;
  171. align-items: center;
  172. height: 100%;
  173. "
  174. >
  175. <view
  176. class="demo-layout bg-purple-light"
  177. style="
  178. margin-top: 10rpx;
  179. color: #3787fe;
  180. font-size: 30rpx;
  181. margin-top: 20rpx;
  182. "
  183. >
  184. {{
  185. item[
  186. showitem.monitorcode.startsWith("fan")
  187. ? showitem.monitorcode.replace(/^fan/, "fan1")
  188. : showitem.monitorcode.startsWith("Fan")
  189. ? showitem.monitorcode.replace(/^Fan/, "Fan1")
  190. : showitem.monitorcode
  191. ] !== undefined &&
  192. item[
  193. showitem.monitorcode.startsWith("fan")
  194. ? showitem.monitorcode.replace(/^fan/, "fan1")
  195. : showitem.monitorcode.startsWith("Fan")
  196. ? showitem.monitorcode.replace(/^Fan/, "Fan1")
  197. : showitem.monitorcode
  198. ] !== null
  199. ? item[
  200. showitem.monitorcode.startsWith("fan")
  201. ? showitem.monitorcode.replace(
  202. /^fan/,
  203. "fan1"
  204. )
  205. : showitem.monitorcode.startsWith("Fan")
  206. ? showitem.monitorcode.replace(
  207. /^Fan/,
  208. "Fan1"
  209. )
  210. : showitem.monitorcode
  211. ]
  212. : "-"
  213. }}
  214. </view>
  215. <!-- <view
  216. v-else-if="showitem.datatype == 2"
  217. class="demo-layout bg-purple-light"
  218. style="
  219. color: #3787fe;
  220. font-size: 30rpx;
  221. margin-top: 20rpx;
  222. "
  223. >
  224. {{
  225. item.readData[
  226. showitem.monitorcode.startsWith("Fan")
  227. ? showitem.monitorcode.replace(/^Fan/, "Fan1")
  228. : showitem.monitorcode
  229. ] !== undefined &&
  230. item.readData[
  231. showitem.monitorcode.startsWith("Fan")
  232. ? showitem.monitorcode.replace(/^Fan/, "Fan1")
  233. : showitem.monitorcode
  234. ] !== null
  235. ? item.readData[
  236. showitem.monitorcode.startsWith("Fan")
  237. ? showitem.monitorcode.replace(
  238. /^Fan/,
  239. "Fan1"
  240. )
  241. : showitem.monitorcode
  242. ]
  243. : "-"
  244. }}
  245. </view> -->
  246. <view
  247. class="demo-layout bg-purple-light"
  248. style="
  249. margin-top: 20rpx;
  250. color: #677799;
  251. margin-top: 20rpx;
  252. "
  253. >
  254. {{ showitem.des }}
  255. </view>
  256. </view>
  257. </view>
  258. </div>
  259. <div class="bottom">
  260. <view>备机</view>
  261. <view
  262. class="datacard"
  263. v-for="(showitem, index) in deviceShowList"
  264. :key="index"
  265. v-show="
  266. showitem.appShow == 1 &&
  267. showitem.monitorcode != 'strinstallpos' &&
  268. showitem.monitorcode != 'netStatus' &&
  269. showitem.monitorcode != 'warnFlag' &&
  270. showitem.monitorcode != 'readTime' &&
  271. showitem.monitorcode != ''
  272. "
  273. >
  274. <view
  275. :class="TabCur"
  276. style="
  277. padding-top: 10rpx;
  278. padding-bottom: 10rpx;
  279. display: flex;
  280. flex-direction: column;
  281. align-items: center;
  282. height: 100%;
  283. "
  284. >
  285. <view
  286. class="demo-layout bg-purple-light"
  287. style="
  288. margin-top: 10rpx;
  289. color: #3787fe;
  290. font-size: 30rpx;
  291. margin-top: 20rpx;
  292. "
  293. >
  294. {{
  295. item[
  296. showitem.monitorcode.startsWith("fan")
  297. ? showitem.monitorcode.replace(/^fan/, "fan2")
  298. : showitem.monitorcode.startsWith("Fan")
  299. ? showitem.monitorcode.replace(/^Fan/, "Fan2")
  300. : showitem.monitorcode
  301. ] !== undefined &&
  302. item[
  303. showitem.monitorcode.startsWith("fan")
  304. ? showitem.monitorcode.replace(/^fan/, "fan2")
  305. : showitem.monitorcode.startsWith("Fan")
  306. ? showitem.monitorcode.replace(/^Fan/, "Fan2")
  307. : showitem.monitorcode
  308. ] !== null
  309. ? item[
  310. showitem.monitorcode.startsWith("fan")
  311. ? showitem.monitorcode.replace(
  312. /^fan/,
  313. "fan2"
  314. )
  315. : showitem.monitorcode.startsWith("Fan")
  316. ? showitem.monitorcode.replace(
  317. /^Fan/,
  318. "Fan2"
  319. )
  320. : showitem.monitorcode
  321. ]
  322. : "-"
  323. }}
  324. </view>
  325. <!-- <view
  326. v-else-if="showitem.datatype == 2"
  327. class="demo-layout bg-purple-light"
  328. style="
  329. color: #3787fe;
  330. font-size: 30rpx;
  331. margin-top: 20rpx;
  332. "
  333. >
  334. {{
  335. item.readData[
  336. showitem.monitorcode.startsWith("Fan")
  337. ? showitem.monitorcode.replace(/^Fan/, "Fan2")
  338. : showitem.monitorcode
  339. ] !== undefined &&
  340. item.readData[
  341. showitem.monitorcode.startsWith("Fan")
  342. ? showitem.monitorcode.replace(/^Fan/, "Fan2")
  343. : showitem.monitorcode
  344. ] !== null
  345. ? item.readData[
  346. showitem.monitorcode.startsWith("Fan")
  347. ? showitem.monitorcode.replace(
  348. /^Fan/,
  349. "Fan2"
  350. )
  351. : showitem.monitorcode
  352. ]
  353. : "-"
  354. }}
  355. </view> -->
  356. <view
  357. class="demo-layout bg-purple-light"
  358. style="
  359. margin-top: 20rpx;
  360. color: #677799;
  361. margin-top: 20rpx;
  362. "
  363. >
  364. {{ showitem.des }}
  365. </view>
  366. </view>
  367. </view>
  368. </div>
  369. </div>
  370. </div>
  371. </u-list-item>
  372. </template>
  373. <template v-else>
  374. <div class="empty-message">数据为空</div>
  375. </template>
  376. </u-list>
  377. </view>
  378. </view>
  379. </view>
  380. </template>
  381. <script>
  382. import api from "@/api/api";
  383. import { computed } from "vue";
  384. export default {
  385. data() {
  386. return {
  387. deviceShow1: false,
  388. menushow: false,
  389. TabCur: "",
  390. curlist: [],
  391. deviceList: {},
  392. List: [],
  393. colums: {},
  394. typeList: [], //详情页展示数据
  395. deviceShowList: [], //设备展示字段
  396. isWarnVisible: false,
  397. deviceType1: "",
  398. devices1: [],
  399. showList: [],
  400. };
  401. },
  402. props: ["showColum", "deviceType"],
  403. watch: {
  404. showColum(data) {
  405. this.colums = data;
  406. },
  407. deviceType: {
  408. async handler(data) {
  409. if (data) {
  410. this.TabCur = data;
  411. this.curlist = this.deviceList[this.TabCur];
  412. if (this.curlist == null) {
  413. this.curlist = [];
  414. }
  415. // 选择设备分类,重新获取数据
  416. await this.loadData(this.TabCur);
  417. this.$emit("setMenushow", {
  418. menushow: false,
  419. });
  420. }
  421. },
  422. immediate: true,
  423. },
  424. },
  425. created() {
  426. this.colums = this.showColum;
  427. // this.deviceShowList = this.colums[key];
  428. },
  429. mounted() {
  430. this.startTimer();
  431. },
  432. methods: {
  433. toggleWarn() {
  434. console.log("测试");
  435. this.isWarnVisible = !this.isWarnVisible;
  436. },
  437. startTimer() {
  438. // 每隔一段时间执行某个操作
  439. this.timer = setInterval(async () => {
  440. // 执行定时任务
  441. await this.loadData(this.deviceType);
  442. console.log("定时任务执行中...");
  443. }, 5000);
  444. },
  445. stopTimer() {
  446. // 停止定时器
  447. clearInterval(this.timer);
  448. },
  449. getIcon(itemValue) {
  450. // 根据itemValue获取对应的图标路径,如果找不到对应关系则返回默认图标
  451. return "/static/sidebar/" + itemValue + ".svg";
  452. },
  453. getValueIcon(itemValue) {
  454. // 根据itemValue获取对应的图标路径,如果找不到对应关系则返回默认图标
  455. return "/static/sidebar/" + itemValue + ".svg";
  456. },
  457. loadData(type) {
  458. return new Promise((resolve, reject) => {
  459. api
  460. .getDeviceMonitor({
  461. devicetype: type,
  462. pagetype: "normal",
  463. })
  464. .then((response) => {
  465. if (response.data.code == 200) {
  466. this.deviceList[type] = response.data.result.msgTxt[0].datalist;
  467. this.curlist = this.deviceList[type];
  468. const processedList = this.curlist.map((item) => {
  469. const { readData, ...baseFields } = item;
  470. return { ...baseFields, ...readData };
  471. });
  472. this.showList = processedList;
  473. this.showList.forEach((item) => {
  474. if (item.frontGateOpen == 1) {
  475. item.frontGateOpen = "打开";
  476. } else {
  477. item.frontGateOpen = "关闭";
  478. }
  479. if (item.midGateOpen == 1) {
  480. item.midGateOpen = "打开";
  481. } else {
  482. item.midGateOpen = "关闭";
  483. }
  484. if (item.rearGateOpen == 1) {
  485. item.rearGateOpen = "打开";
  486. } else {
  487. item.rearGateOpen = "关闭";
  488. }
  489. if (item.midGateOpen == 1) {
  490. item.midGateOpen = "打开";
  491. } else {
  492. item.midGateOpen = "关闭";
  493. }
  494. this.deviceType1 = item.deviceType;
  495. let original = this.TabCur;
  496. let newName = original.startsWith("sys_")
  497. ? original.substring(4)
  498. : original;
  499. const key = newName + "_monitor";
  500. const key1 = this.deviceType1 + "_monitor";
  501. if (this.showColum?.[key1]?.length > 0) {
  502. this.deviceShowList = this.showColum[key1];
  503. } else {
  504. this.deviceShowList = this.showColum[key] ?? [];
  505. }
  506. });
  507. if (this.TabCur == "sys_pulping") {
  508. this.loadNewData(this.curlist[0].deviceID);
  509. }
  510. } else {
  511. resolve(response);
  512. }
  513. })
  514. .catch((error) => {
  515. // console.log("catch===>response", response);
  516. reject(error);
  517. });
  518. });
  519. },
  520. loadNewData(ID) {
  521. return new Promise((resolve, reject) => {
  522. api
  523. .getDeviceMonitor({
  524. devicetype: "sys",
  525. systemID: ID,
  526. })
  527. .then((response) => {
  528. if (response.data.code == 200) {
  529. this.curlist = [];
  530. this.List = response.data.result.msgTxt;
  531. this.List.forEach((item) => {
  532. if (item.type === "pulping_auto") {
  533. this.curlist.push(item.datalist[0]);
  534. }
  535. });
  536. } else {
  537. resolve(response);
  538. }
  539. })
  540. .catch((error) => {
  541. // console.log("catch===>response", response);
  542. reject(error);
  543. });
  544. });
  545. },
  546. devicemenuShow(e) {
  547. this.menushow = !this.menushow;
  548. },
  549. //获取app展示字段数据
  550. getShowList(type) {
  551. const params = {
  552. devicekind: type,
  553. pagetype: "monitor",
  554. pageNo: 1,
  555. pageSize: 100,
  556. };
  557. return new Promise((resolve, reject) => {
  558. api
  559. .getShowColumList(params)
  560. .then((response) => {
  561. if (response.data.code == 200) {
  562. this.typeList = response.data.result.records;
  563. resolve(response);
  564. } else {
  565. resolve(response);
  566. }
  567. })
  568. .catch((error) => {
  569. reject(error);
  570. });
  571. });
  572. },
  573. openNewPage(params) {
  574. const reqData = {
  575. id: params.deviceID,
  576. name: params.strinstallpos,
  577. type: this.TabCur,
  578. };
  579. const reqparams = uni.$u.queryParams(reqData);
  580. // const key = this.deviceType1 + "_monitor";
  581. if (this.deviceShowList.length > 0) {
  582. this.$destroy();
  583. uni.navigateTo({
  584. url: `/pages/home/detail/autodoor/autodoor${reqparams}`,
  585. });
  586. }
  587. // this.$destroy();
  588. // uni.navigateTo({
  589. // url: `/pages/home/detail/autodoor/autodoor?id=${params.deviceID}&name=${params.strinstallpos}&type=${this.TabCur}`,
  590. // });
  591. // },
  592. },
  593. },
  594. destroyed() {
  595. // 停止定时器
  596. this.stopTimer();
  597. },
  598. };
  599. </script>
  600. <style>
  601. .empty {
  602. background: url("/static/empty.png") no-repeat;
  603. background-size: 100% 50%;
  604. }
  605. .empty-message {
  606. display: flex;
  607. justify-content: center;
  608. align-items: center;
  609. font-size: 16px;
  610. line-height: 80vh;
  611. color: #333;
  612. }
  613. >>> .u-navbar--fixed {
  614. /* margin-top: 20px; */
  615. }
  616. .main {
  617. /* margin-top: 100rpx; */
  618. display: flex;
  619. flex-direction: column;
  620. }
  621. .card {
  622. background-color: #ffffff;
  623. margin: auto;
  624. margin-top: 20rpx;
  625. width: 10%;
  626. height: 280rpx;
  627. border: 1rpx solid #000000;
  628. border-radius: 20rpx;
  629. }
  630. .menupage {
  631. position: absolute;
  632. z-index: 2;
  633. width: 100%;
  634. }
  635. .timetext {
  636. text-align: right;
  637. float: right;
  638. }
  639. .itemback {
  640. padding: 20rpx;
  641. background-color: #ffffff;
  642. margin-bottom: 5rpx;
  643. }
  644. .fanContent {
  645. display: flex;
  646. flex-direction: column;
  647. margin-top: 10rpx;
  648. margin-bottom: 10rpx;
  649. }
  650. .top,
  651. .bottom {
  652. flex: 1; /* 各占 50% */
  653. }
  654. .datacard .content {
  655. width: 30rpx;
  656. height: 30rpx;
  657. left: 0rpx;
  658. top: 0rpx;
  659. position: absolute;
  660. }
  661. .datacard {
  662. border-radius: 10rpx;
  663. border: rgba(55, 135, 254, 0.28);
  664. width: 30%;
  665. margin: 1%;
  666. float: left;
  667. height: 190rpx;
  668. text-align: center;
  669. background: linear-gradient(
  670. to right,
  671. rgba(55, 135, 254, 0.08),
  672. rgba(4, 184, 255, 0.08),
  673. rgba(60, 161, 237, 0.08)
  674. );
  675. }
  676. .datacard .gate {
  677. background: linear-gradient(
  678. to right,
  679. rgba(75, 135, 254, 0.08),
  680. rgba(24, 184, 255, 0.08),
  681. rgba(80, 161, 237, 0.08)
  682. );
  683. }
  684. .datacard .window {
  685. background: linear-gradient(
  686. to right,
  687. rgba(55, 125, 254, 0.08),
  688. rgba(4, 164, 255, 0.08),
  689. rgba(60, 131, 237, 0.08)
  690. );
  691. }
  692. .datacard .windrect {
  693. background: linear-gradient(
  694. to right,
  695. rgba(85, 125, 254, 0.08),
  696. rgba(34, 164, 255, 0.08),
  697. rgba(90, 131, 237, 0.08)
  698. );
  699. }
  700. .error-tag {
  701. border-radius: 10%;
  702. display: inline-block;
  703. color: #e90000;
  704. line-height: 50rpx;
  705. font-size: 14px;
  706. text-align: center;
  707. width: 240rpx;
  708. height: 50rpx;
  709. padding-right: 30rpx;
  710. background-color: rgba(233, 0, 0, 0.2);
  711. }
  712. .error-tag1 {
  713. border-radius: 10%;
  714. display: inline-block;
  715. color: #696969;
  716. line-height: 50rpx;
  717. font-size: 14px;
  718. text-align: center;
  719. margin-top: 10rpx;
  720. width: 120rpx;
  721. height: 50rpx;
  722. background-color: rgba(105, 105, 105, 0.2);
  723. }
  724. .success-tag {
  725. border-radius: 10%;
  726. color: #42c000;
  727. line-height: 25px;
  728. font-size: 14px;
  729. width: 60px;
  730. height: 26px;
  731. padding-right: 15px;
  732. background-color: rgba(226, 250, 214);
  733. }
  734. .icon-style {
  735. margin: 7px;
  736. width: 14px;
  737. height: 14px;
  738. }
  739. .title {
  740. margin-left: 40rpx;
  741. float: left;
  742. font-size: 28rpx;
  743. font-weight: 400;
  744. }
  745. </style>