HealthTab2.vue 8.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303
  1. <template>
  2. <div class="health-tab-2">
  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 class="health-report-panel" :title="'已推荐风机'" :showLine="false">
  31. <div class="report-items scroll">
  32. <div class="item" v-for="(item, index) in recommenList" :key="index">
  33. <div class="title">
  34. <div>风机编号:{{ item.wtid }}</div>
  35. <span @click="onClickReport(item)">健康报告</span>
  36. </div>
  37. <div class="info">
  38. <p>推荐理由:{{ item.reason }}</p>
  39. <p>推荐检修时间:{{ new Date(item.recodedate).formatDate("yyyy-MM-dd hh:mm:ss") }}</p>
  40. <p>推荐时间对应风速:{{ item.speed }} m/s</p>
  41. <p>判断时间:{{ new Date(item.createdate).formatDate("yyyy-MM-dd hh:mm:ss")}}</p>
  42. </div>
  43. </div>
  44. </div>
  45. </panel>
  46. </div>
  47. </div>
  48. <health-report :show="reportshow" :params="reportparams" @closed="closed"/>
  49. </template>
  50. <script>
  51. import VertivalBarLineChart from "../../components/chart/combination/health-bar-line-chart.vue";
  52. import SvgIcon from "../../components/coms/icon/svg-icon.vue";
  53. import Panel from "../../components/coms/panel/panel.vue";
  54. import HealthReport from "../../components/other/healthReport/index.vue";
  55. export default {
  56. components: { SvgIcon, Panel, VertivalBarLineChart, HealthReport },
  57. data() {
  58. return {
  59. infoList: [
  60. // {title: '24小时健康趋势', svgid: 'svg-24-houre', active: false, type: 'houre'},
  61. { title: "7日健康趋势", svgid: "svg-h-day", active: true, type: "day" },
  62. { title: "30日健康趋势", svgid: "svg-h-month", active: false, type: "month"},
  63. ],
  64. bardata: { area: [], legend: [], data: [] }, // 损失电量分析echart数值
  65. lineData: [],
  66. recommenList: [], // 健康报告推荐
  67. reportshow: false, //是否显示健康报告
  68. reportparams: undefined,
  69. };
  70. },
  71. created() {
  72. this.requestCoulometry(2);
  73. this.requestRecommen();
  74. },
  75. methods: {
  76. // 未确认缺陷按钮下的健康趋势选项
  77. onClickInfo(item) {
  78. this.infoList.forEach((element) => {
  79. if (item.type == element.type) {
  80. item.active = true;
  81. switch (item.type) {
  82. case "day":
  83. this.requestCoulometry(2);
  84. break;
  85. case "month":
  86. this.requestCoulometry(3);
  87. }
  88. } else {
  89. element.active = false;
  90. }
  91. });
  92. },
  93. // 查看健康报告
  94. onClickReport(item) {
  95. this.reportshow = true;
  96. this.reportparams = {
  97. wtId: item.wtid,
  98. recorddate: new Date(item.createdate).formatDate("yyyy-MM-dd"),
  99. };
  100. },
  101. // 损失电量分析 type:1 表示24小时健康趋势,2 表示七天健康趋势 3 表示30天健康趋势
  102. requestCoulometry(type) {
  103. let that = this;
  104. that.API.requestData({
  105. method: "POST",
  106. timeout: 8000,
  107. subUrl: "recommen/findAllChartjz",
  108. data: { wpId: 0, type: type },
  109. success(res) {
  110. if (res.code == 200) {
  111. that.bardata.legend = ["优数量", "良数量", "差数量"];
  112. that.lineData = res.data.lvchart;
  113. that.bardata.area = res.data.datechart;
  114. that.bardata.data[2] = res.data.cslchart;
  115. that.bardata.data[1] = res.data.lslchart;
  116. that.bardata.data[0] = res.data.yslchart;
  117. }
  118. },
  119. });
  120. },
  121. // 已确认健康报告推荐
  122. requestRecommen() {
  123. let that = this;
  124. that.API.requestData({
  125. method: "POST",
  126. subUrl: 'recommen/recommenConfirmedList',
  127. success(res) {
  128. if (res.code == 200) that.recommenList = res.data;
  129. },
  130. });
  131. },
  132. },
  133. };
  134. </script>
  135. <style lang="less" scoped>
  136. .health-tab-2 {
  137. .power-info {
  138. display: flex;
  139. .info-tab {
  140. flex: 0 0 156px;
  141. display: flex;
  142. flex-direction: column;
  143. height: 350px;
  144. margin-right: 1.4815vh;
  145. .tab {
  146. position: relative;
  147. flex: 0 0 auto;
  148. text-align: center;
  149. line-height: 33px;
  150. margin-right: 8px;
  151. color: @gray-l;
  152. font-size: 12px;
  153. background: fade(@gray, 20);
  154. border: 1px solid fade(@gray, 20);
  155. display: flex;
  156. align-items: center;
  157. i {
  158. margin: 0 1.4815vh;
  159. svg use {
  160. fill: @gray-l;
  161. }
  162. }
  163. &:hover,
  164. &.active {
  165. background: fade(@green, 20);
  166. border: 1px solid @green;
  167. color: @green;
  168. cursor: pointer;
  169. i svg use {
  170. fill: @green;
  171. }
  172. }
  173. &.active::after {
  174. box-sizing: content-box;
  175. width: 0px;
  176. height: 0px;
  177. position: absolute;
  178. right: -19px;
  179. padding: 0;
  180. border-bottom: 9px solid @green;
  181. border-top: 9px solid transparent;
  182. border-left: 9px solid transparent;
  183. border-right: 9px solid transparent;
  184. display: block;
  185. content: "";
  186. z-index: 10;
  187. transform: rotate(90deg);
  188. }
  189. &.active::before {
  190. box-sizing: content-box;
  191. width: 0px;
  192. height: 0px;
  193. position: absolute;
  194. right: -17px;
  195. padding: 0;
  196. border-bottom: 9px solid #063319;
  197. border-top: 9px solid transparent;
  198. border-left: 9px solid transparent;
  199. border-right: 9px solid transparent;
  200. display: block;
  201. content: "";
  202. z-index: 12;
  203. transform: rotate(90deg);
  204. }
  205. & + .tab {
  206. margin-top: 0.7407vh;
  207. }
  208. &:last-child {
  209. text-align: center;
  210. justify-content: center;
  211. }
  212. }
  213. .empty {
  214. flex: 1 0 auto;
  215. }
  216. }
  217. .info-chart {
  218. flex: 1 0 auto;
  219. }
  220. }
  221. .health-report {
  222. .report-items {
  223. display: flex;
  224. flex-wrap: wrap;
  225. height: calc(100vh - 592px);
  226. .item {
  227. flex: 0 0 calc(100% / 6 - 16px);
  228. margin-bottom: 16px;
  229. & + .item {
  230. margin-left: 16px;
  231. }
  232. &:nth-child(6n + 1) {
  233. margin-left: 0px;
  234. }
  235. .title {
  236. background: fade(@gray, 40);
  237. // color: fade(@white, 75);
  238. color: @gray-l;
  239. line-height: 37px;
  240. padding-left: 16px;
  241. padding-right: 16px;
  242. font-size: @fontsize-s;
  243. display: flex;
  244. flex-direction: row;
  245. justify-content: space-between;
  246. span {
  247. cursor: pointer;
  248. }
  249. }
  250. .info {
  251. background: fade(@gray, 20);
  252. padding: 16px;
  253. font-size: @fontsize-s;
  254. color: @font-color;
  255. line-height: 1.5;
  256. p {
  257. margin: 0;
  258. line-height: 2;
  259. overflow:hidden;
  260. text-overflow:ellipsis;
  261. display:-webkit-box;
  262. -webkit-box-orient:vertical;
  263. -webkit-line-clamp:2;
  264. }
  265. .actions {
  266. display: flex;
  267. align-items: center;
  268. justify-content: center;
  269. .success {
  270. border-color: #05bb4c;
  271. color: #05bb4c;
  272. background: rgba(5, 187, 76, 0.2);
  273. }
  274. }
  275. }
  276. }
  277. }
  278. }
  279. }
  280. </style>