HealthTab1.vue 12 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453
  1. <template>
  2. <div class="health-tab-1">
  3. <div class="power-info mg-b-16">
  4. <div class="info-tab">
  5. <div
  6. class="tab"
  7. v-for="(item, index) in infoList"
  8. :key="index"
  9. :class="item.active ? 'active' : ''"
  10. @click="onClickInfo(item)"
  11. >
  12. <i class="svg-icon svg-icon svg-icon-sm">
  13. <svg-icon :svgid="item.svgid" />
  14. </i>
  15. <span> {{ item.title }} </span>
  16. </div>
  17. <div class="empty"></div>
  18. </div>
  19. <div class="info-chart">
  20. <panel class="info-chart-panel" :title="'健康趋势'">
  21. <vertival-bar-line-chart
  22. :height="'310px'"
  23. :bardata="bardata"
  24. :lineData="lineData"
  25. />
  26. </panel>
  27. </div>
  28. </div>
  29. <div class="health-report">
  30. <panel
  31. class="health-report-panel"
  32. :title="'推荐检修风机'"
  33. :showLine="false"
  34. >
  35. <div class="actions mg-b-16">
  36. <button class="btn" :class="{ active: recommenIndex == 1 }" @click="onClickRecommon(1)">当日内推荐</button>
  37. <button class="btn" :class="{ active: recommenIndex == 2 }" @click="onClickRecommon(2)">三日内推荐</button>
  38. <button class="btn" :class="{ active: recommenIndex == 3 }" @click="onClickRecommon(3)">超三日推荐</button>
  39. <div style="margin-left: 450px">
  40. <button class="btn" @click="onClickCofirmAll()">全部确认</button>
  41. <button class="btn" @click="onClickIgnoreAll()">全部忽略</button>
  42. </div>
  43. </div>
  44. <div class="report-items scroll">
  45. <div class="item" v-for="(item, index) in recommenList" :key="index">
  46. <div class="title">
  47. <div>风机编号:{{ item.wtid }}</div>
  48. <span @click="onClickReport(item)">健康报告</span>
  49. </div>
  50. <div class="info">
  51. <p>推荐理由:{{ item.reason }}</p>
  52. <p>
  53. 推荐检修时间:{{
  54. new Date(item.recodedate).formatDate("yyyy-MM-dd hh:mm:ss")
  55. }}
  56. </p>
  57. <p>推荐时间对应风速:{{ item.speed }} m/s</p>
  58. <p>
  59. 判断时间:{{
  60. new Date(item.createdate).formatDate("yyyy-MM-dd hh:mm:ss")
  61. }}
  62. </p>
  63. <div class="actions mg-t-16">
  64. <button class="btn success" @click="onClickCofirm(item)">
  65. <i class="fa fa-check"></i>
  66. 提交
  67. </button>
  68. <button class="btn" @click="onClickIgnore(item)">
  69. <i class="fa fa-close"></i>
  70. 取消
  71. </button>
  72. </div>
  73. </div>
  74. </div>
  75. </div>
  76. </panel>
  77. </div>
  78. <health-report :show="reportshow" :params="reportparams" @closed="closed" ref="eport"/>
  79. </div>
  80. </template>
  81. <script>
  82. import VertivalBarLineChart from "../../components/chart/combination/health-bar-line-chart.vue";
  83. import SvgIcon from "../../components/coms/icon/svg-icon.vue";
  84. import Panel from "../../components/coms/panel/panel.vue";
  85. import HealthReport from "../../components/other/healthReport/index.vue";
  86. export default {
  87. components: { SvgIcon, Panel, VertivalBarLineChart, HealthReport },
  88. data() {
  89. return {
  90. infoList: [
  91. // {title: '24小时健康趋势', svgid: 'svg-24-houre', active: false, type: 'houre'},
  92. { title: "7日健康趋势", svgid: "svg-h-day", active: true, type: "day" },
  93. {
  94. title: "30日健康趋势",
  95. svgid: "svg-h-month",
  96. active: false,
  97. type: "month",
  98. },
  99. ],
  100. bardata: { area: [], legend: [], data: [] }, // 损失电量分析echart数值
  101. lineData: [],
  102. recommenList: [], // 健康报告推荐
  103. recommenIndex: 1, // 记录当前是那个推荐
  104. reportshow: false, //是否显示健康报告
  105. reportparams: undefined,
  106. };
  107. },
  108. created() {
  109. this.requestCoulometry(2);
  110. this.requestRecommen("recommen/getRecommenmainDay1");
  111. },
  112. methods: {
  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. // 健康报告推荐
  131. onClickRecommon(day) {
  132. this.recommenIndex = day;
  133. switch (day) {
  134. case 1:
  135. this.requestRecommen("recommen/getRecommenmainDay1");
  136. break;
  137. case 2:
  138. this.requestRecommen("recommen/getRecommenmainDay3");
  139. break;
  140. case 3:
  141. this.requestRecommen("recommen/getRecommenmainDay7");
  142. break;
  143. }
  144. },
  145. // 查看健康报告
  146. onClickReport(item) {
  147. let recorddate = new Date(item.createdate).formatDate("yyyy-MM-dd");
  148. this.reportshow = true;
  149. this.reportparams = {
  150. wtId: item.wtid,
  151. recorddate: new Date(item.createdate).formatDate("yyyy-MM-dd"),
  152. };
  153. this.$refs.eport.getReport(item.wtid,recorddate);
  154. },
  155. // 关闭健康报告
  156. closed() {
  157. this.reportshow = false;
  158. },
  159. // 健康推荐提交
  160. onClickCofirm(item) {
  161. let that = this;
  162. that
  163. .$confirm("确认提交?")
  164. .then((_) => {
  165. that.requestOption("recommen/confirpush", item.rid);
  166. })
  167. .catch((_) => {});
  168. },
  169. // 健康推荐取消
  170. onClickIgnore(item) {
  171. this.requestOption("recommen/ignorepush", item.rid);
  172. },
  173. // 健康推荐提交全部
  174. onClickCofirmAll() {
  175. let that = this;
  176. that
  177. .$confirm("确认全部提交?")
  178. .then((_) => {
  179. that.requestOptionAll("recommen/confirpushAll");
  180. })
  181. .catch((_) => {});
  182. },
  183. // 健康推荐取消全部
  184. onClickIgnoreAll() {
  185. let that = this;
  186. that
  187. .$confirm("确认全部取消?")
  188. .then((_) => {
  189. that.requestOptionAll("recommen/ignorepushAll");
  190. })
  191. .catch((_) => {});
  192. },
  193. // 健康报告推荐
  194. requestRecommen(url) {
  195. let that = this;
  196. that.API.requestData({
  197. method: "POST",
  198. subUrl: url,
  199. success(res) {
  200. if (res.code == 200) that.recommenList = res.data;
  201. },
  202. });
  203. },
  204. // 操作推荐内容(提交/取消)
  205. requestOption(url, rid) {
  206. let that = this;
  207. that.API.requestData({
  208. method: "POST",
  209. subUrl: url,
  210. data: { rid: rid },
  211. success(res) {
  212. if (res.code == 200) that.onClickRecommon(that.recommenIndex);
  213. },
  214. });
  215. },
  216. // 操作推荐内容全部(提交/取消)
  217. requestOptionAll(url) {
  218. let that = this;
  219. that.API.requestData({
  220. method: "POST",
  221. subUrl: url,
  222. data: { typeid: that.recommenIndex },
  223. success(res) {
  224. if (res.code == 200) that.onClickRecommon(that.recommenIndex);
  225. },
  226. });
  227. },
  228. // 损失电量分析 type:1 表示24小时健康趋势,2 表示七天健康趋势 3 表示30天健康趋势
  229. requestCoulometry(type) {
  230. let that = this;
  231. that.API.requestData({
  232. method: "POST",
  233. timeout: 8000,
  234. subUrl: "recommen/findAllChartjz",
  235. data: { wpId: 0, type: type },
  236. success(res) {
  237. if (res.code == 200) {
  238. that.bardata.legend = ["优数量", "良数量", "差数量"];
  239. that.lineData = res.data.lvchart;
  240. that.bardata.area = res.data.datechart;
  241. that.bardata.data[2] = res.data.cslchart;
  242. that.bardata.data[1] = res.data.lslchart;
  243. that.bardata.data[0] = res.data.yslchart;
  244. }
  245. },
  246. });
  247. },
  248. },
  249. };
  250. </script>
  251. <style lang="less" scope>
  252. .health-tab-1 {
  253. .power-info {
  254. display: flex;
  255. .info-tab {
  256. flex: 0 0 156px;
  257. display: flex;
  258. flex-direction: column;
  259. height: 350px;
  260. margin-right: 1.4815vh;
  261. .tab {
  262. position: relative;
  263. flex: 0 0 auto;
  264. text-align: center;
  265. line-height: 33px;
  266. margin-right: 8px;
  267. color: @gray-l;
  268. font-size: 12px;
  269. background: fade(@gray, 20);
  270. border: 1px solid fade(@gray, 20);
  271. display: flex;
  272. align-items: center;
  273. i {
  274. margin: 0 1.4815vh;
  275. svg use {
  276. fill: @gray-l;
  277. }
  278. }
  279. &:hover,
  280. &.active {
  281. background: fade(@green, 20);
  282. border: 1px solid @green;
  283. color: @green;
  284. cursor: pointer;
  285. i svg use {
  286. fill: @green;
  287. }
  288. }
  289. &.active::after {
  290. box-sizing: content-box;
  291. width: 0px;
  292. height: 0px;
  293. position: absolute;
  294. right: -19px;
  295. padding: 0;
  296. border-bottom: 9px solid @green;
  297. border-top: 9px solid transparent;
  298. border-left: 9px solid transparent;
  299. border-right: 9px solid transparent;
  300. display: block;
  301. content: "";
  302. z-index: 10;
  303. transform: rotate(90deg);
  304. }
  305. &.active::before {
  306. box-sizing: content-box;
  307. width: 0px;
  308. height: 0px;
  309. position: absolute;
  310. right: -17px;
  311. padding: 0;
  312. border-bottom: 9px solid #063319;
  313. border-top: 9px solid transparent;
  314. border-left: 9px solid transparent;
  315. border-right: 9px solid transparent;
  316. display: block;
  317. content: "";
  318. z-index: 12;
  319. transform: rotate(90deg);
  320. }
  321. & + .tab {
  322. margin-top: 0.7407vh;
  323. }
  324. &:last-child {
  325. text-align: center;
  326. justify-content: center;
  327. }
  328. }
  329. .empty {
  330. flex: 1 0 auto;
  331. }
  332. }
  333. .info-chart {
  334. flex: 1 0 auto;
  335. }
  336. }
  337. .health-report {
  338. // 健康报告 按钮样式
  339. .actions {
  340. display: flex;
  341. .item {
  342. flex: 0 0 102px;
  343. text-align: center;
  344. line-height: 33px;
  345. margin-right: 8px;
  346. color: fade(@white, 75);
  347. font-size: @fontsize-s;
  348. cursor: pointer;
  349. &.green {
  350. background: @green;
  351. }
  352. &.purple {
  353. background: @purple;
  354. }
  355. &.gray {
  356. background: @gray;
  357. }
  358. }
  359. .active {
  360. background: fade(@green, 20);
  361. border: 1px solid @green;
  362. color: @green;
  363. cursor: pointer;
  364. }
  365. }
  366. .report-items {
  367. display: flex;
  368. flex-wrap: wrap;
  369. height: calc(100vh - 592px);
  370. .item {
  371. flex: 0 0 calc(100% / 6 - 16px);
  372. margin-bottom: 16px;
  373. & + .item {
  374. margin-left: 16px;
  375. }
  376. &:nth-child(6n + 1) {
  377. margin-left: 0px;
  378. }
  379. .title {
  380. background: fade(@gray, 40);
  381. // color: fade(@white, 75);
  382. color: @gray-l;
  383. line-height: 37px;
  384. padding-left: 16px;
  385. padding-right: 16px;
  386. font-size: @fontsize-s;
  387. display: flex;
  388. flex-direction: row;
  389. justify-content: space-between;
  390. span {
  391. cursor: pointer;
  392. }
  393. }
  394. .info {
  395. background: fade(@gray, 20);
  396. padding: 16px;
  397. font-size: @fontsize-s;
  398. color: @font-color;
  399. line-height: 1.5;
  400. p {
  401. margin: 0;
  402. line-height: 2;
  403. overflow: hidden;
  404. text-overflow: ellipsis;
  405. display: -webkit-box;
  406. -webkit-box-orient: vertical;
  407. -webkit-line-clamp: 2;
  408. }
  409. .actions {
  410. display: flex;
  411. align-items: center;
  412. justify-content: center;
  413. .success {
  414. border-color: #05bb4c;
  415. color: #05bb4c;
  416. background: rgba(5, 187, 76, 0.2);
  417. }
  418. }
  419. }
  420. }
  421. }
  422. }
  423. }
  424. </style>