equipmentControl.vue 12 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543
  1. <!-- 数据看板-设备管控 -->
  2. <template>
  3. <view class="equipmentControl">
  4. <view class="statistics">
  5. <view class="statistics-b">
  6. <view class="statistics-b-li">
  7. <view class="statistics-b-li-t color-A">{{totalDeviceNum}}</view>
  8. <view class="statistics-b-li-b">设备总数</view>
  9. </view>
  10. <view class="line"></view>
  11. <view class="statistics-b-li">
  12. <view class="statistics-b-li-t color-B">{{newlyAddToday}}</view>
  13. <view class="statistics-b-li-b">今日新增设备</view>
  14. </view>
  15. <view class="line"></view>
  16. <view class="statistics-b-li">
  17. <view class="statistics-b-li-t color-C">{{overdueDeviceNum}}</view>
  18. <view class="statistics-b-li-b">超期服役设备</view>
  19. </view>
  20. </view>
  21. </view>
  22. <view class="small-title">
  23. <view class="small-title-l">超期服役排行TOP5</view>
  24. <img class="small-title-r" @click="goPage('overdue')" src="@/pages/images/icon_wdwg_gd.png">
  25. </view>
  26. <view class="chart">
  27. <view class="chart-b">
  28. <qiun-data-charts type="bar" :opts="opts" :echartsH5="true" :chartData="chartData" />
  29. </view>
  30. </view>
  31. <view class="small-title">
  32. <view class="small-title-l">设备使用寿命</view>
  33. <img class="small-title-r" @click="goPage('life')" src="@/pages/images/icon_wdwg_gd.png">
  34. </view>
  35. <view class="chart-tow">
  36. <view class="chart-tow-b">
  37. <qiun-data-charts type="funnel" :opts="optsTow" :echartsH5="true" :chartData="chartDataTow" />
  38. </view>
  39. </view>
  40. <view class="small-title">
  41. <view class="small-title-l">特种设备与常规冷热设备安全隐患统计</view>
  42. </view>
  43. <view class="small-title-tow">
  44. <view class="small-title-tow-l">安全检查校级巡查计划标题标题标题标题标题</view>
  45. <img class="small-title-tow-r" src="@/pages/images/dataBoard/icon_06.png">
  46. </view>
  47. <view class="chart-three">
  48. <view class="chart-three-b">
  49. <qiun-data-charts type="pie" :opts="optsThree" :echartsH5="true" :chartData="chartDataThree" />
  50. </view>
  51. </view>
  52. <view class="chart-title">
  53. <view class="chart-title-l">安全指标</view>
  54. <view class="chart-title-r">占比</view>
  55. </view>
  56. <view class="list" v-for="(item,index) in dataList" :key="index">
  57. <view class="list-title">
  58. <view class="list-title-l">{{item.data1}}</view>
  59. <view class="list-title-r">{{item.data2}}</view>
  60. </view>
  61. <view class="list-li" v-for="(item2,index2) in item.child" :key="index2">{{item2.name}}</view>
  62. </view>
  63. </view>
  64. </template>
  65. <script>
  66. import {
  67. config
  68. } from '@/api/request/config.js'
  69. import {
  70. reportAppletReportApiDeviceStatGetDeviceStat,
  71. reportAppletReportBsEquipDangerCheckList,
  72. } from '@/pages/api/index.js'
  73. export default {
  74. name: "equipmentControl",
  75. components: {
  76. },
  77. data() {
  78. return {
  79. opts: {
  80. color: ["#1890FF", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4",
  81. "#ea7ccc"
  82. ],
  83. padding: [15, 30, 0, 5],
  84. enableScroll: false,
  85. legend: {
  86. show: false,
  87. },
  88. xAxis: {
  89. disabled: true,
  90. disableGrid: true,
  91. axisLine: false,
  92. fontColor: '#fff',
  93. },
  94. yAxis: {
  95. disabled: false,
  96. disableGrid: true,
  97. data: [{
  98. type: 'categories',
  99. fontColor: '#fff',
  100. }],
  101. },
  102. extra: {
  103. bar: {
  104. type: "group",
  105. width: 12,
  106. meterBorde: 1,
  107. meterFillColor: "#FFFFFF",
  108. activeBgColor: "#000000",
  109. activeBgOpacity: 0.08,
  110. linearType: "custom",
  111. barBorderCircle: true,
  112. seriesGap: 2,
  113. categoryGap: 2
  114. }
  115. }
  116. },
  117. chartData: {},
  118. optsTow: {
  119. color: ["#0183FA", "#38F0F0", "#2CCA73", "#FC6E21", "#FF4646", ],
  120. legend: {
  121. show: false,
  122. },
  123. padding: [15, 95, 10, 0],
  124. enableScroll: false,
  125. extra: {
  126. funnel: {
  127. type: 'triangle',
  128. border: false,
  129. labelAlign: "right",
  130. }
  131. }
  132. },
  133. chartDataTow: {},
  134. optsThree: {
  135. color: ["#10C139", "#FF8400", "#00FFE6", "#0183FA", "#73C0DE", "#3CA272", ],
  136. legend: {
  137. show: false,
  138. },
  139. padding: [5, 5, 5, 5],
  140. enableScroll: false,
  141. extra: {
  142. pie: {
  143. offsetAngle: 0,
  144. labelWidth: 15,
  145. border: true,
  146. borderWidth: 3,
  147. borderColor: "#3E414F",
  148. }
  149. }
  150. },
  151. chartDataThree: {},
  152. // 查询参数
  153. queryParams: {
  154. page: 1,
  155. pageSize: 10,
  156. },
  157. dataList: [{
  158. data1: '13.4加热及制冷装置管理',
  159. data2: '40%',
  160. child: [{
  161. name: '13.4.1 冰箱、烘箱、马弗炉等周围堆放杂物',
  162. },
  163. {
  164. name: '13.4.3 烘箱叠放',
  165. },
  166. ]
  167. },
  168. {
  169. data1: '13.4加热及制冷装置管理',
  170. data2: '40%',
  171. child: [{
  172. name: '13.4.1 冰箱、烘箱、马弗炉等周围堆放杂物',
  173. },
  174. {
  175. name: '13.4.3 烘箱叠放',
  176. },
  177. ]
  178. },
  179. ],
  180. total: 0,
  181. newlyAddToday: 0,
  182. overdueDeviceNum: 0,
  183. totalDeviceNum: 0,
  184. }
  185. },
  186. created() {
  187. },
  188. beforeMount() {
  189. },
  190. mounted() {
  191. this.reportAppletReportApiDeviceStatGetDeviceStat();
  192. this.reportAppletReportBsEquipDangerCheckList();
  193. this.getServerData();
  194. this.getServerDataTow();
  195. this.getServerDataThree();
  196. },
  197. methods: {
  198. async reportAppletReportApiDeviceStatGetDeviceStat() {
  199. let self = this;
  200. const {
  201. data
  202. } = await reportAppletReportApiDeviceStatGetDeviceStat();
  203. if (data.code == 200) {
  204. this.$set(self, 'newlyAddToday', data.data.newlyAddToday);
  205. this.$set(self, 'overdueDeviceNum', data.data.overdueDeviceNum);
  206. this.$set(self, 'totalDeviceNum', data.data.totalDeviceNum)
  207. }
  208. },
  209. //安全检查指标
  210. async reportAppletReportBsEquipDangerCheckList() {
  211. let self = this;
  212. const {
  213. data
  214. } = await reportAppletReportBsEquipDangerCheckList();
  215. if (data.code == 200) {
  216. /* this.$set(self, 'newlyAddToday', data.data.newlyAddToday);
  217. this.$set(self, 'overdueDeviceNum', data.data.overdueDeviceNum);
  218. this.$set(self, 'totalDeviceNum', data.data.totalDeviceNum) */
  219. }
  220. },
  221. getServerData() {
  222. //模拟从服务器获取数据时的延时
  223. setTimeout(() => {
  224. //模拟服务器返回数据,如果数据格式和标准格式不同,需自行按下面的格式拼接
  225. let res = {
  226. categories: ["植物保护", "园林艺术", "生命科学", "理学院", "农学院"],
  227. series: [{
  228. name: "目标值",
  229. textColor: '#fff',
  230. data: [62, 37, 20, 41, 32]
  231. }, ]
  232. };
  233. this.chartData = JSON.parse(JSON.stringify(res));
  234. }, 500);
  235. },
  236. getServerDataTow() {
  237. //模拟从服务器获取数据时的延时
  238. setTimeout(() => {
  239. //模拟服务器返回数据,如果数据格式和标准格式不同,需自行按下面的格式拼接
  240. let res = {
  241. series: [{
  242. data: [{
  243. "name": "5年内",
  244. "value": 147,
  245. "labelText": "5年内 147台 26%",
  246. "textColor": "#fff",
  247. }, {
  248. "name": "10年内",
  249. "value": 136,
  250. "labelText": "10年内 136台 24%",
  251. "textColor": "#fff",
  252. }, {
  253. "name": "12年内",
  254. "value": 124,
  255. "labelText": "12年内 124台 22%",
  256. "textColor": "#fff",
  257. }, {
  258. "name": "20年内",
  259. "value": 96,
  260. "labelText": "20年内 96台 17%",
  261. "textColor": "#fff",
  262. }, {
  263. "name": "超期服役",
  264. "value": 67,
  265. "labelText": "超期服役 67台 11%",
  266. "textColor": "#fff",
  267. }]
  268. }]
  269. };
  270. this.chartDataTow = JSON.parse(JSON.stringify(res));
  271. }, 500);
  272. },
  273. getServerDataThree() {
  274. //模拟从服务器获取数据时的延时
  275. setTimeout(() => {
  276. //模拟服务器返回数据,如果数据格式和标准格式不同,需自行按下面的格式拼接
  277. let res = {
  278. series: [{
  279. data: [{
  280. "name": "13.2压力容器30%",
  281. "value": 50,
  282. "textColor": "#fff",
  283. }, {
  284. "name": "13.1起重类设备10%",
  285. "value": 30,
  286. "textColor": "#fff",
  287. }, {
  288. "name": "13.4加热及制冷装置管理40%",
  289. "value": 20,
  290. "textColor": "#fff",
  291. }, {
  292. "name": "13.3场(厂)内专用机动车辆20%",
  293. "value": 18,
  294. "textColor": "#fff",
  295. }]
  296. }]
  297. };
  298. this.chartDataThree = JSON.parse(JSON.stringify(res));
  299. }, 500);
  300. },
  301. dateClick(index) {
  302. this.dateIndex = index;
  303. },
  304. goPage(type) {
  305. if (type == 'overdue') {
  306. uni.navigateTo({
  307. url: '/pages/views/dataBoard/equipmentControlOverdue?pageType=1'
  308. });
  309. } else if (type == 'life') {
  310. uni.navigateTo({
  311. url: '/pages/views/dataBoard/equipmentControlOverdue?pageType=2'
  312. });
  313. }
  314. },
  315. },
  316. }
  317. </script>
  318. <style lang="stylus" scoped>
  319. .equipmentControl {
  320. height: 100%;
  321. width: 100%;
  322. background: #363744;
  323. padding: 2rpx 0rpx 0;
  324. box-sizing: border-box;
  325. .statistics {
  326. width: 750rpx;
  327. height: 120rpx;
  328. background: #3E414F;
  329. .statistics-b {
  330. display: flex;
  331. justify-content: space-between;
  332. align-items: center;
  333. .statistics-b-li {
  334. flex: 1;
  335. text-align: center;
  336. .statistics-b-li-t {
  337. font-weight: 400;
  338. font-size: 36rpx;
  339. line-height: 50rpx;
  340. margin-top: 10rpx;
  341. }
  342. .statistics-b-li-b {
  343. font-weight: 400;
  344. font-size: 24rpx;
  345. color: #FFFFFF;
  346. line-height: 34rpx;
  347. margin-top: 9rpx;
  348. }
  349. }
  350. .line {
  351. width: 2rpx;
  352. height: 30rpx;
  353. background: #D8D8D8;
  354. }
  355. .color-A {
  356. color: #0183FA;
  357. }
  358. .color-B {
  359. color: #FF0000;
  360. }
  361. .color-C {
  362. color: #FFAA00;
  363. }
  364. }
  365. }
  366. .small-title {
  367. display: flex;
  368. justify-content: space-between;
  369. align-items: center;
  370. margin: 0 30rpx;
  371. .small-title-l {
  372. font-weight: 400;
  373. font-size: 32rpx;
  374. color: #FFFFFF;
  375. line-height: 45rpx;
  376. text-align: left;
  377. margin: 28rpx 0;
  378. }
  379. .small-title-r {
  380. width: 15rpx;
  381. height: 18rpx;
  382. }
  383. }
  384. .chart {
  385. width: 690rpx;
  386. height: 476rpx;
  387. background: #3E414F;
  388. border-radius: 20rpx 20rpx 20rpx 20rpx;
  389. margin: 0 30rpx;
  390. .chart-b {
  391. width: 690rpx;
  392. height: 476rpx;
  393. }
  394. }
  395. .chart-tow {
  396. width: 690rpx;
  397. height: 436rpx;
  398. background: #3E414F;
  399. border-radius: 20rpx 20rpx 20rpx 20rpx;
  400. margin: 0 30rpx;
  401. .chart-tow-b {
  402. width: 690rpx;
  403. height: 436rpx;
  404. }
  405. }
  406. .small-title-tow {
  407. width: 750rpx;
  408. height: 80rpx;
  409. background: #3E414F;
  410. display: flex;
  411. justify-content: space-between;
  412. align-items: center;
  413. padding: 0 20rpx 0 30rpx;
  414. box-sizing: border-box;
  415. margin-top: 2rpx;
  416. .small-title-tow-l {
  417. flex: 1;
  418. font-weight: 400;
  419. font-size: 30rpx;
  420. color: #FFFFFF;
  421. line-height: 42rpx;
  422. overflow: hidden;
  423. text-overflow: ellipsis;
  424. white-space: nowrap;
  425. }
  426. .small-title-tow-r {
  427. width: 14rpx;
  428. height: 8rpx;
  429. }
  430. }
  431. .chart-three {
  432. width: 690rpx;
  433. height: 394rpx;
  434. background: #3E414F;
  435. border-radius: 20rpx 20rpx 0rpx 0rpx;
  436. margin: 34rpx 30rpx 0;
  437. .chart-three-b {
  438. width: 690rpx;
  439. height: 394rpx;
  440. }
  441. }
  442. .chart-title {
  443. width: 689rpx;
  444. height: 80rpx;
  445. background: rgba(162, 162, 162, 0.2);
  446. border-radius: 0rpx 0rpx 0rpx 0rpx;
  447. padding: 0 70rpx 0 38rpx;
  448. box-sizing: border-box;
  449. margin: 0 30rpx;
  450. display: flex;
  451. justify-content: space-between;
  452. .chart-title-l {
  453. font-weight: 400;
  454. font-size: 30rpx;
  455. color: #FFFFFF;
  456. line-height: 80rpx;
  457. }
  458. .chart-title-r {
  459. font-weight: 400;
  460. font-size: 30rpx;
  461. color: #FFFFFF;
  462. line-height: 80rpx;
  463. }
  464. }
  465. .list {
  466. margin: 0 30rpx;
  467. padding: 0 30rpx;
  468. box-sizing: border-box;
  469. .list-title {
  470. height: 80rpx;
  471. display: flex;
  472. justify-content: space-between;
  473. border-bottom: 1rpx dashed rgba(216, 216, 216, 0.2);
  474. padding: 0 38rpx 0 10rpx;
  475. box-sizing: border-box;
  476. .list-title-l {
  477. font-weight: 400;
  478. font-size: 28rpx;
  479. color: #FFFFFF;
  480. line-height: 80rpx;
  481. }
  482. .list-title-r {
  483. font-weight: 400;
  484. font-size: 28rpx;
  485. color: #0183FA;
  486. line-height: 80rpx;
  487. }
  488. }
  489. .list-li {
  490. height: 80rpx;
  491. display: flex;
  492. justify-content: space-between;
  493. padding: 0 38rpx 0 10rpx;
  494. box-sizing: border-box;
  495. font-weight: 400;
  496. font-size: 28rpx;
  497. color: #999999;
  498. line-height: 80rpx;
  499. text-align: left;
  500. }
  501. }
  502. }
  503. </style>