knowledge-base.vue 13 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489
  1. <template>
  2. <div class="knowledge-base">
  3. <el-row class="mg-b-16">
  4. <el-col :span="8">
  5. <panel class="outline" :title="'故障体系'" :icon="'fa fa-warning'" :subTitle="3347" :showLine="false">
  6. <div class="table">
  7. <div>
  8. <table style="width:100%;" border="0" cellspacing="0">
  9. <tbody>
  10. <tr>
  11. <td style="width:150px;">
  12. UP77
  13. </td>
  14. <td class="green num" style="width:105px;">
  15. 409
  16. </td>
  17. <td style="width:350px;">
  18. <div class="percent-item">
  19. 完成度
  20. <div class="percent-bar" style="">
  21. <div class="percent-value" style="width: 12%"></div>
  22. </div>
  23. <span class="perent-num">12%</span>
  24. </div>
  25. </td>
  26. </tr>
  27. <tr>
  28. <td style="width:150px;">
  29. UP82
  30. </td>
  31. <td class="green num" style="width:105px;">
  32. 409
  33. </td>
  34. <td style="width:350px;">
  35. <div class="percent-item">
  36. 完成度
  37. <div class="percent-bar" style="">
  38. <div class="percent-value" style="width: 12%"></div>
  39. </div>
  40. <span class="perent-num">12%</span>
  41. </div>
  42. </td>
  43. </tr>
  44. <tr>
  45. <td style="width:150px;">
  46. UP86
  47. </td>
  48. <td class="green num" style="width:105px;">
  49. 0
  50. </td>
  51. <td style="width:350px;">
  52. <div class="percent-item">
  53. 完成度
  54. <div class="percent-bar" style="">
  55. <div class="percent-value" style="width: 0%"></div>
  56. </div>
  57. <span class="perent-num">0%</span>
  58. </div>
  59. </td>
  60. </tr>
  61. <tr>
  62. <td style="width:150px;">
  63. UP97
  64. </td>
  65. <td class="green num" style="width:105px;">
  66. 0
  67. </td>
  68. <td style="width:350px;">
  69. <div class="percent-item">
  70. 完成度
  71. <div class="percent-bar" style="">
  72. <div class="percent-value" style="width: 0%"></div>
  73. </div>
  74. <span class="perent-num">0%</span>
  75. </div>
  76. </td>
  77. </tr>
  78. <tr>
  79. <td style="width:150px;">
  80. UP105
  81. </td>
  82. <td class="green num" style="width:105px;">
  83. 0
  84. </td>
  85. <td style="width:350px;">
  86. <div class="percent-item">
  87. 完成度
  88. <div class="percent-bar" style="">
  89. <div class="percent-value" style="width: 0%"></div>
  90. </div>
  91. <span class="perent-num">0%</span>
  92. </div>
  93. </td>
  94. </tr>
  95. <tr>
  96. <td style="width:150px;">
  97. 华创
  98. </td>
  99. <td class="green num" style="width:105px;">
  100. 2529
  101. </td>
  102. <td style="width:350px;">
  103. <div class="percent-item">
  104. 完成度
  105. <div class="percent-bar" style="">
  106. <div class="percent-value" style="width: 76%"></div>
  107. </div>
  108. <span class="perent-num">76%</span>
  109. </div>
  110. </td>
  111. </tr>
  112. </tbody>
  113. </table>
  114. </div>
  115. </div>
  116. </panel>
  117. </el-col>
  118. <el-col :span="8">
  119. <panel class="outline" :title="'预警知识'" :icon="'fa fa-warning'" :subTitle="173" :showLine="false">
  120. <div class="warning-item">
  121. <div class="sub-item">
  122. <div class="text">发电机:</div>
  123. <div class="value">91</div>
  124. </div>
  125. <div class="sub-item">
  126. <div class="text">偏航:</div>
  127. <div class="value">0</div>
  128. </div>
  129. </div>
  130. <div class="warning-item">
  131. <div class="sub-item">
  132. <div class="text">齿轮箱:</div>
  133. <div class="value">45</div>
  134. </div>
  135. <div class="sub-item">
  136. <div class="text">机舱:</div>
  137. <div class="value">12</div>
  138. </div>
  139. </div>
  140. <div class="warning-item">
  141. <div class="sub-item">
  142. <div class="text">主轴:</div>
  143. <div class="value">5</div>
  144. </div>
  145. <div class="sub-item">
  146. <div class="text">变频:</div>
  147. <div class="value">0</div>
  148. </div>
  149. </div>
  150. <div class="warning-item">
  151. <div class="sub-item">
  152. <div class="text">变桨:</div>
  153. <div class="value">9</div>
  154. </div>
  155. <div class="sub-item">
  156. <div class="text">主控:</div>
  157. <div class="value">9</div>
  158. </div>
  159. </div>
  160. </panel>
  161. </el-col>
  162. <el-col :span="8">
  163. <panel class="outline" :title="'特征参数'" :icon="'fa fa-id-card-o'" :subTitle="248" :showLine="false">
  164. <div class="feature-item">
  165. <div class="title">
  166. <i class="svg-icon svg-icon-sm svg-icon-gray">
  167. <svg-icon :svgid="'svg-knowledge-bar'" />
  168. </i>
  169. 基于数据统计
  170. </div>
  171. <div class="value">28</div>
  172. </div>
  173. <div class="feature-item">
  174. <div class="title">
  175. <i class="svg-icon svg-icon-sm svg-icon-gray">
  176. <svg-icon :svgid="'svg-knowledge-nerve-net'" />
  177. </i>
  178. 神经网络整理
  179. </div>
  180. <div class="value">77</div>
  181. </div>
  182. <div class="feature-item">
  183. <div class="title">
  184. <i class="svg-icon svg-icon-sm svg-icon-gray">
  185. <svg-icon :svgid="'svg-knowledge-file'" />
  186. </i>
  187. 文档整理
  188. </div>
  189. <div class="value">124</div>
  190. </div>
  191. <div class="feature-item">
  192. <div class="title">
  193. <i class="svg-icon svg-icon-sm svg-icon-gray">
  194. <svg-icon :svgid="'svg-knowledge-professor'" />
  195. </i>
  196. 专家知识分析
  197. </div>
  198. <div class="value">19</div>
  199. </div>
  200. </panel>
  201. </el-col>
  202. </el-row>
  203. <el-row>
  204. <el-col :span="8">
  205. <panel class="outline" :title="'排查、检修方案'" :icon="'fa fa-warning'" :subTitle="4344" :showLine="false">
  206. <div class="circle-items">
  207. <div class="circle-item">
  208. <div class="inner">
  209. <div class="text">排查方法</div>
  210. <div class="value">431</div>
  211. </div>
  212. </div>
  213. <div class="circle-item">
  214. <div class="inner">
  215. <div class="text">检修方案</div>
  216. <div class="value">3913</div>
  217. </div>
  218. </div>
  219. </div>
  220. </panel>
  221. </el-col>
  222. <el-col :span="8">
  223. <panel class="outline" :title="'评价体系'" :icon="'fa fa-warning'" :subTitle="7" :showLine="false">
  224. <div class="circle-items">
  225. <div class="circle-item">
  226. <div class="inner">
  227. <div class="text">性能评价体系</div>
  228. <div class="value">3</div>
  229. </div>
  230. </div>
  231. <div class="circle-item">
  232. <div class="inner">
  233. <div class="text">健康评价体系</div>
  234. <div class="value">2</div>
  235. </div>
  236. </div>
  237. <div class="circle-item">
  238. <div class="inner">
  239. <div class="text">故障诊断体系</div>
  240. <div class="value">2</div>
  241. </div>
  242. </div>
  243. </div>
  244. </panel>
  245. </el-col>
  246. <el-col :span="8">
  247. <panel class="outline" :title="'人工智能'" :icon="'fa fa-id-card-o'" :subTitle="9" :showLine="false">
  248. <div class="circle-items">
  249. <div class="circle-item">
  250. <div class="inner">
  251. <div class="text">决策树</div>
  252. <div class="value">2</div>
  253. </div>
  254. </div>
  255. <div class="circle-item">
  256. <div class="inner">
  257. <div class="text">神经网络</div>
  258. <div class="value">7</div>
  259. </div>
  260. </div>
  261. </div>
  262. </panel>
  263. </el-col>
  264. </el-row>
  265. </div>
  266. </template>
  267. <script>
  268. import SvgIcon from "../../components/coms/icon/svg-icon.vue";
  269. import panel from "../../components/coms/panel/panel.vue";
  270. export default {
  271. components: { panel, SvgIcon },
  272. setup() {},
  273. data() {
  274. return {
  275. gztx: [
  276. {
  277. id: "UP77",
  278. name: "409",
  279. wsd: "12%",
  280. },
  281. {
  282. id: "UP82",
  283. name: "409",
  284. wsd: "12%",
  285. },
  286. {
  287. id: "UP86",
  288. name: "0",
  289. wsd: "0%",
  290. },
  291. {
  292. id: "UP97",
  293. name: "0",
  294. wsd: "0%",
  295. },
  296. {
  297. id: "UP105",
  298. name: "0",
  299. wsd: "0%",
  300. },
  301. {
  302. id: "华创",
  303. name: "2529",
  304. wsd: "76%",
  305. },
  306. ],
  307. };
  308. },
  309. };
  310. </script>
  311. <style lang="less">
  312. .knowledge-base {
  313. .com-panel .panel-header {
  314. margin-bottom: 0px;
  315. .panel-tools {
  316. color: @green;
  317. font-family: @font-family-num;
  318. }
  319. }
  320. .outline {
  321. outline: 1px solid fade(@gray, 50);
  322. }
  323. .warning-item {
  324. display: flex;
  325. justify-content: space-around;
  326. height: 54px;
  327. line-height: 54px;
  328. font-size: 12px;
  329. &:nth-child(2n) {
  330. background-color: fade(@gray, 20%);
  331. }
  332. .title {
  333. display: flex;
  334. align-items: center;
  335. color: @gray;
  336. i {
  337. margin-right: 16px;
  338. }
  339. }
  340. .sub-item {
  341. display: flex;
  342. .text {
  343. color: gray;
  344. margin-right: 16px;
  345. }
  346. .value {
  347. color: @green;
  348. font-family: @font-family-num;
  349. }
  350. }
  351. }
  352. .feature-item {
  353. display: flex;
  354. justify-content: space-between;
  355. height: 54px;
  356. line-height: 54px;
  357. font-size: 12px;
  358. padding: 0 24px;
  359. &:nth-child(2n) {
  360. background-color: fade(@gray, 20%);
  361. }
  362. .title {
  363. display: flex;
  364. align-items: center;
  365. color: @gray;
  366. i {
  367. margin-right: 16px;
  368. }
  369. }
  370. .value {
  371. color: @green;
  372. font-family: @font-family-num;
  373. }
  374. }
  375. .circle-items {
  376. display: flex;
  377. justify-content: space-around;
  378. padding: 48px 0;
  379. .circle-item {
  380. display: flex;
  381. flex: 0 0 146px;
  382. width: 146px;
  383. height: 146px;
  384. background: fade(@green, 10);
  385. border-radius: 50%;
  386. justify-content: center;
  387. align-items: center;
  388. .inner {
  389. width: 124px;
  390. height: 124px;
  391. border: 1px solid #05bb4c;
  392. border-radius: 50%;
  393. display: flex;
  394. flex-direction: column;
  395. justify-content: center;
  396. align-items: center;
  397. box-shadow: inset -15px 20px 30px -30px #05bb4c;
  398. .text {
  399. color: @green;
  400. font-size: 12px;
  401. margin-bottom: 8px;
  402. }
  403. .value {
  404. color: @white;
  405. font-size: 34px;
  406. }
  407. }
  408. }
  409. }
  410. .table {
  411. tbody {
  412. tr:nth-child(2n) td {
  413. background-color: fade(@gray, 20%);
  414. &.item {
  415. background-color: transparent;
  416. }
  417. }
  418. }
  419. td {
  420. color: @gray;
  421. text-align: center;
  422. height: 26px;
  423. line-height: 26px;
  424. font-size: 12px;
  425. &.green {
  426. color: @green;
  427. }
  428. &.num {
  429. font-family: @font-family-num;
  430. }
  431. }
  432. .percent-item {
  433. display: flex;
  434. align-items: center;
  435. justify-content: center;
  436. height: 34px;
  437. .percent-bar {
  438. height: 12px;
  439. width: 170px;
  440. background: transparent;
  441. border: 1px solid @gray;
  442. margin-left: 16px;
  443. .percent-value {
  444. height: calc(100% - 4px);
  445. background: @green;
  446. margin: 2px;
  447. }
  448. }
  449. .perent-num {
  450. color: @green;
  451. margin-left: 16px;
  452. font-family: @font-family-num;
  453. }
  454. }
  455. }
  456. }
  457. </style>