healthLineChart2.vue 12 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464
  1. <template>
  2. <div class="health-7">
  3. <wt-chooser @change="switchWt" :wpId="wpId" :wtId="wtId"></wt-chooser>
  4. <div class="power-info mg-b-16">
  5. <div class="info-tab">
  6. <div
  7. class="tab"
  8. v-for="(item, index) in infoList"
  9. :key="index"
  10. :class="item.active ? 'active' : ''"
  11. @click="onClickInfo(item)"
  12. >
  13. <i class="svg-icon svg-icon svg-icon-sm">
  14. <svg-icon :svgid="item.svgid" />
  15. </i>
  16. <span> {{ item.title }} </span>
  17. </div>
  18. <div class="empty"></div>
  19. </div>
  20. <div class="info-chart">
  21. <panel class="info-chart-panel" :title="'健康趋势'">
  22. <vertival-bar-line-chart
  23. :height="'310px'"
  24. :bardata="bardata"
  25. :lineData="lineData"
  26. />
  27. </panel>
  28. </div>
  29. </div>
  30. <div class="fc-info mg-b-16">
  31. <panel :title="'健康走势图'" :showLine="false">
  32. <normal-line-chart :height="'150px'" />
  33. </panel>
  34. </div>
  35. <div class="data-list">
  36. <Table :data="tableData" :canScroll="true" />
  37. </div>
  38. </div>
  39. </template>
  40. <script>
  41. import VertivalBarLineChart from "../../components/chart/combination/health-bar-line-chart.vue";
  42. import NormalLineChart from "../../components/chart/line/normal-line-chart.vue";
  43. import SvgIcon from "../../components/coms/icon/svg-icon.vue";
  44. import Panel from "../../components/coms/panel/panel.vue";
  45. import Table from "../../components/coms/table/table.vue";
  46. import WtChooser from "@com/coms/wt-chooser/wt-chooser.vue";
  47. import api from "@api/wisdomOverhaul/health/index.js";
  48. export default {
  49. setup() {},
  50. components: {
  51. SvgIcon,
  52. Panel,
  53. VertivalBarLineChart,
  54. NormalLineChart,
  55. Table,
  56. WtChooser,
  57. },
  58. data() {
  59. return {
  60. infoList: [
  61. // {title: '24小时健康趋势', svgid: 'svg-24-houre', active: false, type: 'houre'},
  62. { title: "7日健康趋势", svgid: "svg-h-day", active: true, type: "day" },
  63. {
  64. title: "30日健康趋势",
  65. svgid: "svg-h-month",
  66. active: false,
  67. type: "month",
  68. },
  69. ],
  70. tableData: {
  71. column: [
  72. { name: "部件名称", field: "name" },
  73. { name: "MTBF(h)", field: "v1", is_num: true },
  74. { name: "MTTR(h)", field: "v2", is_num: true },
  75. { name: "损失电量(kw/h)", field: "v3", is_num: true },
  76. {
  77. name: "当前状态",
  78. field: "v4",
  79. template: function (data) {
  80. if (data == 1) return "<div class='dot green'></div>";
  81. else if (data == 2) return "<div class='dot purple'></div>";
  82. else if (data == 3) return "<div class='dot yellow'></div>";
  83. else if (data == 4) return "<div class='dot orange'></div>";
  84. },
  85. },
  86. ],
  87. data: [],
  88. },
  89. bardata: { area: [], legend: [], data: [] }, // 损失电量分析echart数值
  90. lineData: [],
  91. wtId: undefined,
  92. wpId: undefined,
  93. hisValue: {}, //健康走势图
  94. };
  95. },
  96. created() {
  97. this.init();
  98. },
  99. methods: {
  100. init() {
  101. this.wtId = this.$route.params.wtId;
  102. this.wpId = this.$route.params.wpId;
  103. this.requestCoulometry(2);
  104. this.requestHisValue();
  105. this.requestMttrrand();
  106. },
  107. switchWt(data) {
  108. this.$router.push(
  109. `/health/health4/healthLineChart2/${data.wpId}/${data.wtId}`
  110. );
  111. this.init();
  112. },
  113. // 未确认缺陷按钮下的健康趋势选项
  114. onClickInfo(item) {
  115. this.infoList.forEach((element) => {
  116. if (item.type == element.type) {
  117. item.active = true;
  118. switch (item.type) {
  119. case "day":
  120. this.requestCoulometry(2);
  121. break;
  122. case "month":
  123. this.requestCoulometry(3);
  124. }
  125. } else {
  126. element.active = false;
  127. }
  128. });
  129. },
  130. // 损失电量分析 type:1 表示24小时健康趋势,2 表示七天健康趋势 3 表示30天健康趋势
  131. requestCoulometry(type) {
  132. api
  133. .findAllChartjz({
  134. wpId: 0,
  135. type: type,
  136. })
  137. .then((res) => {
  138. if (res.code == 200) {
  139. this.bardata.legend = ["优数量", "良数量", "差数量"];
  140. this.lineData = res.data.lvchart;
  141. this.bardata.area = res.data.datechart;
  142. this.bardata.data[2] = res.data.cslchart;
  143. this.bardata.data[1] = res.data.lslchart;
  144. this.bardata.data[0] = res.data.yslchart;
  145. }
  146. });
  147. // let that = this;
  148. // that.API.requestData({
  149. // method: "POST",
  150. // timeout: 8000,
  151. // subUrl: "recommen/findAllChartjz",
  152. // data: { wpId: 0, type: type },
  153. // success(res) {
  154. // if (res.code == 200) {
  155. // that.bardata.legend = ["优数量", "良数量", "差数量"];
  156. // that.lineData = res.data.lvchart;
  157. // that.bardata.area = res.data.datechart;
  158. // that.bardata.data[2] = res.data.cslchart;
  159. // that.bardata.data[1] = res.data.lslchart;
  160. // that.bardata.data[0] = res.data.yslchart;
  161. // }
  162. // },
  163. // });
  164. },
  165. //风机健康走势图
  166. requestHisValue() {
  167. api
  168. .healthsubFindWtHisValueForBj({
  169. wtId: this.wtId,
  170. })
  171. .then((res) => {
  172. if (res.code == 200) {
  173. let data = res.data;
  174. data.time = data.time.slice(0, 65);
  175. this.hisValue = data;
  176. }
  177. });
  178. // let that = this;
  179. // that.API.requestData({
  180. // method: "POST",
  181. // subUrl: "healthsub/findWtHisValueForBj",
  182. // data: { wtId: that.wtId },
  183. // success(res) {
  184. // if (res.code == 200) {
  185. // let data = res.data;
  186. // data.time = data.time.slice(0, 65);
  187. // that.hisValue = data;
  188. // }
  189. // },
  190. // });
  191. },
  192. //部件健康情况
  193. requestMttrrand() {
  194. api
  195. .healthsubGetWtMttrandMtbfByBj({
  196. wtId: this.wtId,
  197. })
  198. .then((res) => {
  199. if (res.code == 200) {
  200. let data = res.data;
  201. this.tableData.data = [
  202. {
  203. name: data.clx[1],
  204. v1: data.clx[4],
  205. v2: data.clx[5],
  206. v3: data.clx[6],
  207. v4: data.clx[0],
  208. },
  209. {
  210. name: data.fdj[1],
  211. v1: data.fdj[4],
  212. v2: data.fdj[5],
  213. v3: data.fdj[6],
  214. v4: data.fdj[0],
  215. },
  216. {
  217. name: data.bj[1],
  218. v1: data.bj[4],
  219. v2: data.bj[5],
  220. v3: data.bj[6],
  221. v4: data.bj[0],
  222. },
  223. {
  224. name: data.zk[1],
  225. v1: data.zk[4],
  226. v2: data.zk[5],
  227. v3: data.zk[6],
  228. v4: data.zk[0],
  229. },
  230. {
  231. name: data.zz[1],
  232. v1: data.zz[4],
  233. v2: data.zz[5],
  234. v3: data.zz[6],
  235. v4: data.zz[0],
  236. },
  237. {
  238. name: data.ph[1],
  239. v1: data.ph[4],
  240. v2: data.ph[5],
  241. v3: data.ph[6],
  242. v4: data.ph[0],
  243. },
  244. {
  245. name: data.jc[1],
  246. v1: data.jc[4],
  247. v2: data.jc[5],
  248. v3: data.jc[6],
  249. v4: data.jc[0],
  250. },
  251. {
  252. name: data.bpq[1],
  253. v1: data.bpq[4],
  254. v2: data.bpq[5],
  255. v3: data.bpq[6],
  256. v4: data.bpq[0],
  257. },
  258. ];
  259. }
  260. });
  261. // let that = this;
  262. // that.API.requestData({
  263. // method: "POST",
  264. // subUrl: "healthsub/getWtMttrandMtbfByBj",
  265. // data: { wtId: that.wtId },
  266. // success(res) {
  267. // if (res.code == 200) {
  268. // let data = res.data;
  269. // that.tableData.data = [
  270. // {
  271. // name: data.clx[1],
  272. // v1: data.clx[4],
  273. // v2: data.clx[5],
  274. // v3: data.clx[6],
  275. // v4: data.clx[0],
  276. // },
  277. // {
  278. // name: data.fdj[1],
  279. // v1: data.fdj[4],
  280. // v2: data.fdj[5],
  281. // v3: data.fdj[6],
  282. // v4: data.fdj[0],
  283. // },
  284. // {
  285. // name: data.bj[1],
  286. // v1: data.bj[4],
  287. // v2: data.bj[5],
  288. // v3: data.bj[6],
  289. // v4: data.bj[0],
  290. // },
  291. // {
  292. // name: data.zk[1],
  293. // v1: data.zk[4],
  294. // v2: data.zk[5],
  295. // v3: data.zk[6],
  296. // v4: data.zk[0],
  297. // },
  298. // {
  299. // name: data.zz[1],
  300. // v1: data.zz[4],
  301. // v2: data.zz[5],
  302. // v3: data.zz[6],
  303. // v4: data.zz[0],
  304. // },
  305. // {
  306. // name: data.ph[1],
  307. // v1: data.ph[4],
  308. // v2: data.ph[5],
  309. // v3: data.ph[6],
  310. // v4: data.ph[0],
  311. // },
  312. // {
  313. // name: data.jc[1],
  314. // v1: data.jc[4],
  315. // v2: data.jc[5],
  316. // v3: data.jc[6],
  317. // v4: data.jc[0],
  318. // },
  319. // {
  320. // name: data.bpq[1],
  321. // v1: data.bpq[4],
  322. // v2: data.bpq[5],
  323. // v3: data.bpq[6],
  324. // v4: data.bpq[0],
  325. // },
  326. // ];
  327. // }
  328. // },
  329. // });
  330. },
  331. },
  332. };
  333. </script>
  334. <style lang="less">
  335. .health-7 {
  336. // 电量健康情况
  337. .power-info {
  338. display: flex;
  339. .info-tab {
  340. flex: 0 0 156px;
  341. display: flex;
  342. flex-direction: column;
  343. height: 350px;
  344. margin-right: 1.4815vh;
  345. .tab {
  346. position: relative;
  347. flex: 0 0 auto;
  348. text-align: center;
  349. line-height: 33px;
  350. margin-right: 8px;
  351. color: @gray-l;
  352. font-size: 12px;
  353. background: fade(@gray, 20);
  354. border: 1px solid fade(@gray, 20);
  355. display: flex;
  356. align-items: center;
  357. i {
  358. margin: 0 1.4815vh;
  359. svg use {
  360. fill: @gray-l;
  361. }
  362. }
  363. &:hover,
  364. &.active {
  365. background: fade(@green, 20);
  366. border: 1px solid @green;
  367. color: @green;
  368. cursor: pointer;
  369. i {
  370. svg use {
  371. fill: @green;
  372. }
  373. }
  374. }
  375. &.active::after {
  376. box-sizing: content-box;
  377. width: 0px;
  378. height: 0px;
  379. position: absolute;
  380. right: -19px;
  381. padding: 0;
  382. border-bottom: 9px solid @green;
  383. border-top: 9px solid transparent;
  384. border-left: 9px solid transparent;
  385. border-right: 9px solid transparent;
  386. display: block;
  387. content: "";
  388. z-index: 10;
  389. transform: rotate(90deg);
  390. }
  391. &.active::before {
  392. box-sizing: content-box;
  393. width: 0px;
  394. height: 0px;
  395. position: absolute;
  396. right: -17px;
  397. padding: 0;
  398. border-bottom: 9px solid #063319;
  399. border-top: 9px solid transparent;
  400. border-left: 9px solid transparent;
  401. border-right: 9px solid transparent;
  402. display: block;
  403. content: "";
  404. z-index: 12;
  405. transform: rotate(90deg);
  406. }
  407. & + .tab {
  408. margin-top: 0.7407vh;
  409. }
  410. &:last-child {
  411. text-align: center;
  412. justify-content: center;
  413. }
  414. }
  415. .empty {
  416. flex: 1 0 auto;
  417. }
  418. }
  419. .info-chart {
  420. flex: 1 0 auto;
  421. }
  422. }
  423. .data-list {
  424. .dot {
  425. width: 12px;
  426. height: 12px;
  427. margin: auto;
  428. &.green {
  429. background: @green;
  430. }
  431. &.purple {
  432. background: @purple;
  433. }
  434. &.yellow {
  435. background: @yellow;
  436. }
  437. &.orange {
  438. background: @orange;
  439. }
  440. }
  441. }
  442. }
  443. </style>