In02_device_peifang.vue 69 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018101910201021102210231024102510261027102810291030103110321033103410351036103710381039104010411042104310441045104610471048104910501051105210531054105510561057105810591060106110621063106410651066106710681069107010711072107310741075107610771078107910801081108210831084108510861087108810891090109110921093109410951096109710981099110011011102110311041105110611071108110911101111111211131114111511161117111811191120112111221123112411251126
  1. <template>
  2. <div class="dataContent">
  3. <div style="text-align: center;width: 100%;height: 52px;">
  4. <span :class="devDetailIndex==0?'btn active':'btn'" :style="{backgroundImage: devDetailIndex==0?`url(${btnFrontBg})`:''}" @click.stop="LoadDevDetail(openDeviceInfoData.name,0)">告警</span>
  5. <span :class="devDetailIndex==1?'btn active':'btn'" :style="{backgroundImage: devDetailIndex==1?`url(${btnFrontBg})`:''}" @click.stop="LoadDevDetail(openDeviceInfoData.name,1)">产能</span>
  6. <span :class="devDetailIndex==2?'btn active':'btn'" :style="{backgroundImage: devDetailIndex==2?`url(${btnFrontBg})`:''}" @click.stop="LoadDevDetail(openDeviceInfoData.name,2)">产线及设备</span>
  7. <span :class="devDetailIndex==3?'btn active':'btn'" :style="{backgroundImage: devDetailIndex==3?`url(${btnFrontBg})`:''}" @click.stop="LoadDevDetail(openDeviceInfoData.name,3)">配方</span>
  8. <span :class="devDetailIndex==4?'btn active':'btn'" :style="{backgroundImage: devDetailIndex==4?`url(${btnFrontBg})`:''}" @click.stop="LoadDevDetail(openDeviceInfoData.name,4)">设备履历</span>
  9. </div>
  10. <div style="height:90%;width:100%">
  11. <div style="width: 100%" v-show="devDetailIndex==0">
  12. <div v-if="!currendDeviceIsAlarm" class="no_alarm">当前无告警</div>
  13. <div v-if="currendDeviceIsAlarm" class="has_alarm" v-html="currendDeviceAlarmMsg"></div>
  14. <div class="dev_alarm_echarts" ref="dev_alarm_echarts"></div>
  15. </div>
  16. <div style="padding: 15px;width: 100%" v-show="devDetailIndex==1">
  17. <div style="float: left;width: 25%;margin-right: 2%;">
  18. <table cellspacing="0" cellpadding="0" width="100%">
  19. <tbody>
  20. <tr style="background-color: #415683;height: 40px;text-align: center;">
  21. <td colspan="4">班组生产状态</td>
  22. </tr>
  23. <tr style="height: 1px;background-color: #5F6E8D;">
  24. <td colspan="4"></td>
  25. </tr>
  26. <tr style="height: 47px">
  27. <td rowspan="2" width="30%">当前产量</td>
  28. <td rowspan="2" width="10%" style="color: #817e7e;text-align: center;">|</td>
  29. <td width="15%">A组</td>
  30. <td style="text-align: right;padding-right: 10px;" width="45%" class="value"
  31. attr="Capacity_data_39" unit="米">{{ openDeviceInfoData.data.data.Capacity_data_39||'-' }}米
  32. </td>
  33. </tr>
  34. <tr style="height: 48px">
  35. <td>B组</td>
  36. <td style="text-align: right;padding-right: 10px;" width="50%" class="value"
  37. attr="Capacity_data_44" unit="米">{{ openDeviceInfoData.data.data.Capacity_data_44||'-' }}米
  38. </td>
  39. </tr>
  40. <tr style="height: 1px;background-color: #5F6E8D;">
  41. <td colspan="4"></td>
  42. </tr>
  43. <tr style="height: 47px">
  44. <td rowspan="2" width="30%">开机时间</td>
  45. <td rowspan="2" width="10%" style="color: #817e7e;text-align: center;">|</td>
  46. <td width="15%">A组</td>
  47. <td style="text-align: right;padding-right: 10px;" width="45%" class="value"
  48. attr="Capacity_data_37" unit="H">{{ openDeviceInfoData.data.data.Capacity_data_37||'-' }}H
  49. </td>
  50. </tr>
  51. <tr style="height: 48px">
  52. <td>B组</td>
  53. <td style="text-align: right;padding-right: 10px;" width="50%" class="value"
  54. attr="Capacity_data_42" unit="H">{{ openDeviceInfoData.data.data.Capacity_data_42||'-'}}H
  55. </td>
  56. </tr>
  57. <tr style="height: 1px;background-color: #5F6E8D;">
  58. <td colspan="4"></td>
  59. </tr>
  60. <tr style="height: 47px">
  61. <td rowspan="2" width="30%">停机时间</td>
  62. <td rowspan="2" width="10%" style="color: #817e7e;text-align: center;">|</td>
  63. <td width="15%">A组</td>
  64. <td style="text-align: right; padding-right: 10px;" width="45%" class="value"
  65. attr="Capacity_data_38" unit="H">{{ openDeviceInfoData.data.data.Capacity_data_38||'-'}}H
  66. </td>
  67. </tr>
  68. <tr style="height: 48px">
  69. <td>B组</td>
  70. <td style="text-align: right;padding-right: 10px;" width="50%" class="value"
  71. attr="Capacity_data_43" unit="H">{{ openDeviceInfoData.data.data.Capacity_data_43||'-'}}H
  72. </td>
  73. </tr>
  74. <tr style="height: 1px;background-color: #5F6E8D;">
  75. <td colspan="4"></td>
  76. </tr>
  77. <tr style="height: 47px">
  78. <td rowspan="2" width="30%">停机率</td>
  79. <td rowspan="2" width="10%" style="color: #817e7e;text-align: center;">|</td>
  80. <td width="15%">A组</td>
  81. <td style="text-align: right; padding-right: 10px;" width="45%" class="value"
  82. attr="Capacity_data_40" unit="%">{{ openDeviceInfoData.data.data.Capacity_data_40||'-'}}%
  83. </td>
  84. </tr>
  85. <tr style="height: 48px">
  86. <td>B组</td>
  87. <td style="text-align: right;padding-right: 10px;" width="50%" class="value"
  88. attr="Capacity_data_45" unit="%">{{ openDeviceInfoData.data.data.Capacity_data_45||'-'}}%
  89. </td>
  90. </tr>
  91. </tbody>
  92. </table>
  93. </div>
  94. <div style="float: left;width: 25%;margin-right: 2%;">
  95. <table cellspacing="0" cellpadding="0" width="100%">
  96. <tbody>
  97. <tr style="background-color: #415683;height: 40px;text-align: center;">
  98. <td colspan="3">当前设备生产状态</td>
  99. </tr>
  100. <tr style="height: 1px;background-color: #5F6E8D;">
  101. <td colspan="3"></td>
  102. </tr>
  103. <tr style="height: 95px">
  104. <td>主轴运行转速</td>
  105. <td style="color: #817e7e">|</td>
  106. <td style="text-align: right;padding-right: 10px;" width="60%" class="value"
  107. attr="Capacity_data_1" unit="转/分钟">{{ openDeviceInfoData.data.data.Capacity_data_1||'-' }}转/分钟
  108. </td>
  109. </tr>
  110. <tr style="height: 1px;background-color: #5F6E8D;">
  111. <td colspan="3"></td>
  112. </tr>
  113. <tr style="height: 95px">
  114. <td>已织造米数</td>
  115. <td style="color: #817e7e">|</td>
  116. <td style="text-align: right;padding-right: 10px;" width="60%" class="value"
  117. attr="Capacity_data_2" unit="米">{{ openDeviceInfoData.data.data.Capacity_data_2||'-' }}米
  118. </td>
  119. </tr>
  120. <tr style="height: 1px;background-color: #5F6E8D;">
  121. <td colspan="3"></td>
  122. </tr>
  123. <tr style="height: 95px">
  124. <td>剩余落布时间</td>
  125. <td style="color: #817e7e">|</td>
  126. <td style="text-align: right;padding-right: 10px;" width="60%" class="value"
  127. attr="Capacity_data_3" unit="H">{{ openDeviceInfoData.data.data.Capacity_data_3||'-' }}H
  128. </td>
  129. </tr>
  130. <tr style="height: 1px;background-color: #5F6E8D;">
  131. <td colspan="3"></td>
  132. </tr>
  133. <tr style="height: 95px">
  134. <td>设定落布米数</td>
  135. <td style="color: #817e7e">|</td>
  136. <td style="text-align: right;padding-right: 10px;" width="60%" class="value"
  137. attr="Capacity_data_4" unit="米">{{ openDeviceInfoData.data.data.Capacity_data_4||'-' }}米
  138. </td>
  139. </tr>
  140. </tbody>
  141. </table>
  142. </div>
  143. <div style="float: left;width: 44%;">
  144. <table cellspacing="0" cellpadding="0" width="100%">
  145. <tbody>
  146. <tr style="background-color: #415683;height: 40px;text-align: center;">
  147. <td colspan="6">供电</td>
  148. </tr>
  149. <tr style="height: 1px;background-color: #5F6E8D;">
  150. <td colspan="6"></td>
  151. </tr>
  152. <tr style="height: 75px">
  153. <td width="20%">AB相电压监控</td>
  154. <td style="color: #817e7e">|</td>
  155. <td width="20%" class="value" attr="Capacity_data_24" unit="U">{{ openDeviceInfoData.data.data.Capacity_data_24||'-' }}U</td>
  156. <td width="20%">C相电流监控</td>
  157. <td style="color: #817e7e">|</td>
  158. <td width="20%" style="text-align: right;padding-right: 10px;" class="value"
  159. attr="Capacity_data_29" unit="V">{{ openDeviceInfoData.data.data.Capacity_data_29||'-' }}V
  160. </td>
  161. </tr>
  162. <tr style="height: 1px;background-color: #5F6E8D;">
  163. <td colspan="6"></td>
  164. </tr>
  165. <tr style="height: 75px">
  166. <td width="20%">BC相电压监控</td>
  167. <td style="color: #817e7e">|</td>
  168. <td width="20%" class="value" attr="Capacity_data_25" unit="U">{{ openDeviceInfoData.data.data.Capacity_data_25||'-' }}U</td>
  169. <td width="20%">A相功率监控</td>
  170. <td style="color: #817e7e">|</td>
  171. <td width="20%" style="text-align: right;padding-right: 10px;" class="value"
  172. attr="Capacity_data_30" unit="W">{{ openDeviceInfoData.data.data.Capacity_data_30||'-' }}W
  173. </td>
  174. </tr>
  175. <tr style="height: 1px;background-color: #5F6E8D;">
  176. <td colspan="6"></td>
  177. </tr>
  178. <tr style="height: 75px">
  179. <td width="20%">AC相电压监控</td>
  180. <td style="color: #817e7e">|</td>
  181. <td width="20%" class="value" attr="Capacity_data_26" unit="U">{{ openDeviceInfoData.data.data.Capacity_data_26||'-' }}U</td>
  182. <td width="20%">B相功率监控</td>
  183. <td style="color: #817e7e">|</td>
  184. <td width="20%" style="text-align: right;padding-right: 10px;" class="value"
  185. attr="Capacity_data_31" unit="W">{{ openDeviceInfoData.data.data.Capacity_data_31||'-' }}W
  186. </td>
  187. </tr>
  188. <tr style="height: 1px;background-color: #5F6E8D;">
  189. <td colspan="6"></td>
  190. </tr>
  191. <tr style="height: 75px">
  192. <td width="20%">A相电流监控</td>
  193. <td style="color: #817e7e">|</td>
  194. <td width="20%" class="value" attr="Capacity_data_27" unit="V">{{ openDeviceInfoData.data.data.Capacity_data_27||'-' }}V</td>
  195. <td width="20%">C相功率监控</td>
  196. <td style="color: #817e7e">|</td>
  197. <td width="20%" style="text-align: right;padding-right: 10px;" class="value"
  198. attr="Capacity_data_32" unit="W">{{ openDeviceInfoData.data.data.Capacity_data_32||'-' }}W
  199. </td>
  200. </tr>
  201. <tr style="height: 1px;background-color: #5F6E8D;">
  202. <td colspan="6"></td>
  203. </tr>
  204. <tr style="height: 75px">
  205. <td width="20%">B相电流监控</td>
  206. <td style="color: #817e7e">|</td>
  207. <td width="20%" class="value" attr="Capacity_data_28" unit="V">{{ openDeviceInfoData.data.data.Capacity_data_28||'-' }}V</td>
  208. <td width="20%">总功率监控</td>
  209. <td style="color: #817e7e">|</td>
  210. <td width="20%" style="text-align: right;padding-right: 10px;" class="value"
  211. attr="Capacity_data_33" unit="W">{{ openDeviceInfoData.data.data.Capacity_data_33||'-' }}W
  212. </td>
  213. </tr>
  214. </tbody>
  215. </table>
  216. </div>
  217. </div>
  218. <div style="padding: 15px;width: 100%" v-show="devDetailIndex==2">
  219. <div style="float: left;width: 23%;margin-right: 2%;">
  220. <table cellspacing="0" cellpadding="0">
  221. <tbody>
  222. <tr style="height: 60px">
  223. <td>断纱检测开关</td>
  224. <td style="color: #817e7e">|</td>
  225. <td style="text-align: right;padding-right: 10px;" width="45%" class="value"
  226. attr="Capacity_data_46" unit="">{{ (openDeviceInfoData.data.data.Capacity_data_46=='true'?'开':'关')||'-' }}
  227. </td>
  228. </tr>
  229. <tr style="height: 1px;background-color: #5F6E8D;">
  230. <td colspan="3"></td>
  231. </tr>
  232. <tr style="height: 60px">
  233. <td>断纱检测延时</td>
  234. <td style="color: #817e7e">|</td>
  235. <td style="text-align: right;padding-right: 10px;" width="45%" class="value"
  236. attr="Capacity_data_47" unit="s">{{ openDeviceInfoData.data.data.Capacity_data_47||'-' }}s
  237. </td>
  238. </tr>
  239. <tr style="height: 1px;background-color: #5F6E8D;">
  240. <td colspan="3"></td>
  241. </tr>
  242. <tr style="height: 60px">
  243. <td>牵拉罗拉辊周长</td>
  244. <td style="color: #817e7e">|</td>
  245. <td style="text-align: right;padding-right: 10px;" width="45%" class="value"
  246. attr="System_data_15" unit="mm">{{ openDeviceInfoData.data.data.System_data_15||'-' }}mm
  247. </td>
  248. </tr>
  249. <tr style="height: 1px;background-color: #5F6E8D;">
  250. <td colspan="3"></td>
  251. </tr>
  252. <tr style="height: 60px">
  253. <td>卷曲罗拉辊周长</td>
  254. <td style="color: #817e7e">|</td>
  255. <td style="text-align: right;padding-right: 10px;" width="45%" class="value"
  256. attr="System_data_16" unit="mm">{{ openDeviceInfoData.data.data.System_data_16||'-' }}mm
  257. </td>
  258. </tr>
  259. <tr style="height: 1px;background-color: #5F6E8D;">
  260. <td colspan="3"></td>
  261. </tr>
  262. <tr style="height: 60px">
  263. <td>主电机额定转速</td>
  264. <td style="color: #817e7e">|</td>
  265. <td style="text-align: right;padding-right: 10px;" width="45%" class="value"
  266. attr="System_data_38" unit="">{{ openDeviceInfoData.data.data.System_data_38||'-' }}
  267. </td>
  268. </tr>
  269. <tr style="height: 1px;background-color: #5F6E8D;">
  270. <td colspan="3"></td>
  271. </tr>
  272. <tr style="height: 60px">
  273. <td>主电机额定频率</td>
  274. <td style="color: #817e7e">|</td>
  275. <td style="text-align: right;padding-right: 10px;" width="45%" class="value"
  276. attr="System_data_39" unit="">{{ openDeviceInfoData.data.data.System_data_39||'-' }}
  277. </td>
  278. </tr>
  279. <tr style="height: 1px;background-color: #5F6E8D;">
  280. <td colspan="3"></td>
  281. </tr>
  282. <tr style="height: 60px">
  283. <td>电机传动比</td>
  284. <td style="color: #817e7e">|</td>
  285. <td style="text-align: right;padding-right: 10px;" width="45%" class="value"
  286. attr="System_data_40" unit="">{{ openDeviceInfoData.data.data.System_data_40||'-' }}
  287. </td>
  288. </tr>
  289. </tbody>
  290. </table>
  291. </div>
  292. <div style="float: left;width: 23%;margin-right: 2%;">
  293. <table cellspacing="0" cellpadding="0">
  294. <tbody>
  295. <tr style="height: 60px">
  296. <td>GB1减速机减速比</td>
  297. <td style="color: #817e7e">|</td>
  298. <td style="text-align: right;padding-right: 10px;" width="45%" class="value"
  299. attr="System_data_17" unit="">{{ openDeviceInfoData.data.data.System_data_17||'-' }}
  300. </td>
  301. </tr>
  302. <tr style="height: 1px;background-color: #5F6E8D;">
  303. <td colspan="3"></td>
  304. </tr>
  305. <tr style="height: 60px">
  306. <td>GB2减速机减速比</td>
  307. <td style="color: #817e7e">|</td>
  308. <td style="text-align: right;padding-right: 10px;" width="45%" class="value"
  309. attr="System_data_18" unit="">{{ openDeviceInfoData.data.data.System_data_18||'-' }}
  310. </td>
  311. </tr>
  312. <tr style="height: 1px;background-color: #5F6E8D;">
  313. <td colspan="3"></td>
  314. </tr>
  315. <tr style="height: 60px">
  316. <td>GB3减速机减速比</td>
  317. <td style="color: #817e7e">|</td>
  318. <td style="text-align: right;padding-right: 10px;" width="45%" class="value"
  319. attr="System_data_19" unit="">{{ openDeviceInfoData.data.data.System_data_19||'-' }}
  320. </td>
  321. </tr>
  322. <tr style="height: 1px;background-color: #5F6E8D;">
  323. <td colspan="3"></td>
  324. </tr>
  325. <tr style="height: 60px">
  326. <td>GB4减速机减速比</td>
  327. <td style="color: #817e7e">|</td>
  328. <td style="text-align: right;padding-right: 10px;" width="45%" class="value"
  329. attr="System_data_20" unit="">{{ openDeviceInfoData.data.data.System_data_20||'-' }}
  330. </td>
  331. </tr>
  332. <tr style="height: 1px;background-color: #5F6E8D;">
  333. <td colspan="3"></td>
  334. </tr>
  335. <tr style="height: 60px">
  336. <td>GB5减速机减速比</td>
  337. <td style="color: #817e7e">|</td>
  338. <td style="text-align: right;padding-right: 10px;" width="45%" class="value"
  339. attr="System_data_21" unit="">{{ openDeviceInfoData.data.data.System_data_21||'-' }}
  340. </td>
  341. </tr>
  342. <tr style="height: 1px;background-color: #5F6E8D;">
  343. <td colspan="3"></td>
  344. </tr>
  345. <tr style="height: 60px">
  346. <td>牵拉减速机减速比</td>
  347. <td style="color: #817e7e">|</td>
  348. <td style="text-align: right;padding-right: 10px;" width="45%" class="value"
  349. attr="System_data_22" unit="">{{ openDeviceInfoData.data.data.System_data_22||'-' }}
  350. </td>
  351. </tr>
  352. <tr style="height: 1px;background-color: #5F6E8D;">
  353. <td colspan="3"></td>
  354. </tr>
  355. <tr style="height: 60px">
  356. <td>卷曲减速机减速比</td>
  357. <td style="color: #817e7e">|</td>
  358. <td style="text-align: right;padding-right: 10px;" width="45%" class="value"
  359. attr="System_data_23" unit="">{{ openDeviceInfoData.data.data.System_data_23||'-' }}
  360. </td>
  361. </tr>
  362. </tbody>
  363. </table>
  364. </div>
  365. <div style="float: left;width: 23%;margin-right: 2%;">
  366. <table cellspacing="0" cellpadding="0">
  367. <tbody>
  368. <tr style="height: 60px">
  369. <td>GB1被动齿轮数</td>
  370. <td style="color: #817e7e">|</td>
  371. <td style="text-align: right;padding-right: 10px;" width="45%" class="value"
  372. attr="System_data_24" unit="">{{ openDeviceInfoData.data.data.System_data_24||'-' }}
  373. </td>
  374. </tr>
  375. <tr style="height: 1px;background-color: #5F6E8D;">
  376. <td colspan="3"></td>
  377. </tr>
  378. <tr style="height: 60px">
  379. <td>GB2被动齿轮数</td>
  380. <td style="color: #817e7e">|</td>
  381. <td style="text-align: right;padding-right: 10px;" width="45%" class="value"
  382. attr="System_data_25" unit="">{{ openDeviceInfoData.data.data.System_data_25||'-' }}
  383. </td>
  384. </tr>
  385. <tr style="height: 1px;background-color: #5F6E8D;">
  386. <td colspan="3"></td>
  387. </tr>
  388. <tr style="height: 60px">
  389. <td>GB3被动齿轮数</td>
  390. <td style="color: #817e7e">|</td>
  391. <td style="text-align: right;padding-right: 10px;" width="45%" class="value"
  392. attr="System_data_26" unit="">{{ openDeviceInfoData.data.data.System_data_26||'-' }}
  393. </td>
  394. </tr>
  395. <tr style="height: 1px;background-color: #5F6E8D;">
  396. <td colspan="3"></td>
  397. </tr>
  398. <tr style="height: 60px">
  399. <td>GB4被动齿轮数</td>
  400. <td style="color: #817e7e">|</td>
  401. <td style="text-align: right;padding-right: 10px;" width="45%" class="value"
  402. attr="System_data_27" unit="">{{ openDeviceInfoData.data.data.System_data_27||'-' }}
  403. </td>
  404. </tr>
  405. <tr style="height: 1px;background-color: #5F6E8D;">
  406. <td colspan="3"></td>
  407. </tr>
  408. <tr style="height: 60px">
  409. <td>GB5被动齿轮数</td>
  410. <td style="color: #817e7e">|</td>
  411. <td style="text-align: right;padding-right: 10px;" width="45%" class="value"
  412. attr="System_data_28" unit="">{{ openDeviceInfoData.data.data.System_data_28||'-' }}
  413. </td>
  414. </tr>
  415. <tr style="height: 1px;background-color: #5F6E8D;">
  416. <td colspan="3"></td>
  417. </tr>
  418. <tr style="height: 60px">
  419. <td>牵拉被动齿轮数</td>
  420. <td style="color: #817e7e">|</td>
  421. <td style="text-align: right;padding-right: 10px;" width="45%" class="value"
  422. attr="System_data_29" unit="">{{ openDeviceInfoData.data.data.System_data_29||'-' }}
  423. </td>
  424. </tr>
  425. <tr style="height: 1px;background-color: #5F6E8D;">
  426. <td colspan="3"></td>
  427. </tr>
  428. <tr style="height: 60px">
  429. <td>卷曲被动齿轮数</td>
  430. <td style="color: #817e7e">|</td>
  431. <td style="text-align: right;padding-right: 10px;" width="45%" class="value"
  432. attr="System_data_30" unit="">{{ openDeviceInfoData.data.data.System_data_30||'-' }}
  433. </td>
  434. </tr>
  435. </tbody>
  436. </table>
  437. </div>
  438. <div style="float: left;width: 23%;margin-right: 2%;">
  439. <table cellspacing="0" cellpadding="0">
  440. <tbody>
  441. <tr style="height: 60px">
  442. <td>GB1主动齿轮数</td>
  443. <td style="color: #817e7e">|</td>
  444. <td style="text-align: right;padding-right: 10px;" width="45%" class="value"
  445. attr="System_data_31" unit="">{{ openDeviceInfoData.data.data.System_data_31||'-' }}
  446. </td>
  447. </tr>
  448. <tr style="height: 1px;background-color: #5F6E8D;">
  449. <td colspan="3"></td>
  450. </tr>
  451. <tr style="height: 60px">
  452. <td>GB2主动齿轮数</td>
  453. <td style="color: #817e7e">|</td>
  454. <td style="text-align: right;padding-right: 10px;" width="45%" class="value"
  455. attr="System_data_32" unit="">{{ openDeviceInfoData.data.data.System_data_32||'-' }}
  456. </td>
  457. </tr>
  458. <tr style="height: 1px;background-color: #5F6E8D;">
  459. <td colspan="3"></td>
  460. </tr>
  461. <tr style="height: 60px">
  462. <td>GB3主动齿轮数</td>
  463. <td style="color: #817e7e">|</td>
  464. <td style="text-align: right;padding-right: 10px;" width="45%" class="value"
  465. attr="System_data_33" unit="">{{ openDeviceInfoData.data.data.System_data_33||'-' }}
  466. </td>
  467. </tr>
  468. <tr style="height: 1px;background-color: #5F6E8D;">
  469. <td colspan="3"></td>
  470. </tr>
  471. <tr style="height: 60px">
  472. <td>GB4主动齿轮数</td>
  473. <td style="color: #817e7e">|</td>
  474. <td style="text-align: right;padding-right: 10px;" width="45%" class="value"
  475. attr="System_data_34" unit="">{{ openDeviceInfoData.data.data.System_data_34||'-' }}
  476. </td>
  477. </tr>
  478. <tr style="height: 1px;background-color: #5F6E8D;">
  479. <td colspan="3"></td>
  480. </tr>
  481. <tr style="height: 60px">
  482. <td>GB5主动齿轮数</td>
  483. <td style="color: #817e7e">|</td>
  484. <td style="text-align: right;padding-right: 10px;" width="45%" class="value"
  485. attr="System_data_35" unit="">{{ openDeviceInfoData.data.data.System_data_35||'-' }}
  486. </td>
  487. </tr>
  488. <tr style="height: 1px;background-color: #5F6E8D;">
  489. <td colspan="3"></td>
  490. </tr>
  491. <tr style="height: 60px">
  492. <td>牵拉主动齿轮数</td>
  493. <td style="color: #817e7e">|</td>
  494. <td style="text-align: right;padding-right: 10px;" width="45%" class="value"
  495. attr="System_data_36" unit="">{{ openDeviceInfoData.data.data.System_data_36||'-' }}
  496. </td>
  497. </tr>
  498. <tr style="height: 1px;background-color: #5F6E8D;">
  499. <td colspan="3"></td>
  500. </tr>
  501. <tr style="height: 60px">
  502. <td>卷曲主动齿轮数</td>
  503. <td style="color: #817e7e">|</td>
  504. <td style="text-align: right;padding-right: 10px;" width="45%" class="value"
  505. attr="System_data_37" unit="">{{ openDeviceInfoData.data.data.System_data_37||'-' }}
  506. </td>
  507. </tr>
  508. </tbody>
  509. </table>
  510. </div>
  511. </div>
  512. <div style="padding: 15px;width: 100%" v-show="devDetailIndex==3">
  513. <div style="float: left;width: 23%;margin-right: 2%;">
  514. <table cellspacing="0" cellpadding="0" width="100%">
  515. <tbody>
  516. <tr style="height: 45px">
  517. <td>配方号</td>
  518. <td style="color: #817e7e">|</td>
  519. <td style="text-align: right;padding-right: 10px;" width="40%" class="value"
  520. attr="Formula_data_1" unit="">{{ openDeviceInfoData.data.data.Formula_data_1||'-' }}
  521. </td>
  522. </tr>
  523. <tr style="height: 1px;background-color: #5F6E8D;">
  524. <td colspan="3"></td>
  525. </tr>
  526. <tr style="height: 45px">
  527. <td>机台号</td>
  528. <td style="color: #817e7e">|</td>
  529. <td style="text-align: right;padding-right: 10px;" width="40%" class="value"
  530. attr="Formula_data_2" unit="">{{ openDeviceInfoData.data.data.Formula_data_2||'-' }}
  531. </td>
  532. </tr>
  533. <tr style="height: 1px;background-color: #5F6E8D;">
  534. <td colspan="3"></td>
  535. </tr>
  536. <tr style="height: 45px">
  537. <td>米克重</td>
  538. <td style="color: #817e7e">|</td>
  539. <td style="text-align: right;padding-right: 10px;" width="40%" class="value"
  540. attr="Formula_data_3" unit="g/米">{{ openDeviceInfoData.data.data.Formula_data_3||'-' }}g/米
  541. </td>
  542. </tr>
  543. <tr style="height: 1px;background-color: #5F6E8D;">
  544. <td colspan="3"></td>
  545. </tr>
  546. <tr style="height: 45px">
  547. <td>L1、L5纱线规格D</td>
  548. <td style="color: #817e7e">|</td>
  549. <td style="text-align: right;padding-right: 10px;" width="40%" class="value"
  550. attr="Formula_data_4" unit="D">{{ openDeviceInfoData.data.data.Formula_data_4||'-' }}D
  551. </td>
  552. </tr>
  553. <tr style="height: 1px;background-color: #5F6E8D;">
  554. <td colspan="3"></td>
  555. </tr>
  556. <tr style="height: 45px">
  557. <td>L2、L4纱线规格D</td>
  558. <td style="color: #817e7e">|</td>
  559. <td style="text-align: right;padding-right: 10px;" width="40%" class="value"
  560. attr="Formula_data_5" unit="D">{{ openDeviceInfoData.data.data.Formula_data_5||'-' }}D
  561. </td>
  562. </tr>
  563. <tr style="height: 1px;background-color: #5F6E8D;">
  564. <td colspan="3"></td>
  565. </tr>
  566. <tr style="height: 45px">
  567. <td>L3纱线规格D</td>
  568. <td style="color: #817e7e">|</td>
  569. <td style="text-align: right;padding-right: 10px;" width="40%" class="value"
  570. attr="Formula_data_6" unit="D">{{ openDeviceInfoData.data.data.Formula_data_6||'-' }}D
  571. </td>
  572. </tr>
  573. <tr style="height: 1px;background-color: #5F6E8D;">
  574. <td colspan="3"></td>
  575. </tr>
  576. <tr style="height: 45px">
  577. <td>L1、L5纱线规格F</td>
  578. <td style="color: #817e7e">|</td>
  579. <td style="text-align: right;padding-right: 10px;" width="40%" class="value"
  580. attr="Formula_data_7" unit="F">{{ openDeviceInfoData.data.data.Formula_data_7||'-' }}F
  581. </td>
  582. </tr>
  583. <tr style="height: 1px;background-color: #5F6E8D;">
  584. <td colspan="3"></td>
  585. </tr>
  586. <tr style="height: 45px">
  587. <td>L2、L4纱线规格F</td>
  588. <td style="color: #817e7e">|</td>
  589. <td style="text-align: right;padding-right: 10px;" width="40%" class="value"
  590. attr="Formula_data_8" unit="F">{{ openDeviceInfoData.data.data.Formula_data_8||'-' }}F
  591. </td>
  592. </tr>
  593. <tr style="height: 1px;background-color: #5F6E8D;">
  594. <td colspan="3"></td>
  595. </tr>
  596. <tr style="height: 45px">
  597. <td>L3纱线规格F</td>
  598. <td style="color: #817e7e">|</td>
  599. <td style="text-align: right;padding-right: 10px;" width="40%" class="value"
  600. attr="Formula_data_9" unit="F">{{ openDeviceInfoData.data.data.Formula_data_9||'-' }}F
  601. </td>
  602. </tr>
  603. </tbody>
  604. </table>
  605. </div>
  606. <div style="float: left;width: 23%;margin-right: 2%;">
  607. <table cellspacing="0" cellpadding="0" width="100%">
  608. <tbody>
  609. <tr style="height: 45px">
  610. <td>L1、L5盘头根数</td>
  611. <td style="color: #817e7e">|</td>
  612. <td style="text-align: right;padding-right: 10px;" width="45%" class="value"
  613. attr="Formula_data_10" unit="根">{{ openDeviceInfoData.data.data.Formula_data_10||'-' }}根
  614. </td>
  615. </tr>
  616. <tr style="height: 1px;background-color: #5F6E8D;">
  617. <td colspan="3"></td>
  618. </tr>
  619. <tr style="height: 45px">
  620. <td>L2、L4盘头根数</td>
  621. <td style="color: #817e7e">|</td>
  622. <td style="text-align: right;padding-right: 10px;" width="45%" class="value"
  623. attr="Formula_data_11" unit="根">{{ openDeviceInfoData.data.data.Formula_data_11||'-' }}根
  624. </td>
  625. </tr>
  626. <tr style="height: 1px;background-color: #5F6E8D;">
  627. <td colspan="3"></td>
  628. </tr>
  629. <tr style="height: 45px">
  630. <td>L3盘头根数</td>
  631. <td style="color: #817e7e">|</td>
  632. <td style="text-align: right;padding-right: 10px;" width="45%" class="value"
  633. attr="Formula_data_12" unit="根">{{ openDeviceInfoData.data.data.Formula_data_12||'-' }}根
  634. </td>
  635. </tr>
  636. <tr style="height: 1px;background-color: #5F6E8D;">
  637. <td colspan="3"></td>
  638. </tr>
  639. <tr style="height: 45px">
  640. <td>卷曲幅宽</td>
  641. <td style="color: #817e7e">|</td>
  642. <td style="text-align: right;padding-right: 10px;" width="45%" class="value"
  643. attr="Formula_data_13" unit="m">{{ openDeviceInfoData.data.data.Formula_data_13||'-' }}m
  644. </td>
  645. </tr>
  646. <tr style="height: 1px;background-color: #5F6E8D;">
  647. <td colspan="3"></td>
  648. </tr>
  649. <tr style="height: 45px">
  650. <td>下布长度</td>
  651. <td style="color: #817e7e">|</td>
  652. <td style="text-align: right;padding-right: 10px;" width="45%" class="value"
  653. attr="Formula_data_14" unit="m">{{ openDeviceInfoData.data.data.Formula_data_14||'-' }}m
  654. </td>
  655. </tr>
  656. <tr style="height: 1px;background-color: #5F6E8D;">
  657. <td colspan="3"></td>
  658. </tr>
  659. <tr style="height: 45px">
  660. <td>毛高</td>
  661. <td style="color: #817e7e">|</td>
  662. <td style="text-align: right;padding-right: 10px;" width="45%" class="value"
  663. attr="Formula_data_15" unit="m">{{ openDeviceInfoData.data.data.Formula_data_15||'-' }}m
  664. </td>
  665. </tr>
  666. <tr style="height: 1px;background-color: #5F6E8D;">
  667. <td colspan="3"></td>
  668. </tr>
  669. <tr style="height: 45px">
  670. <td>成片长</td>
  671. <td style="color: #817e7e">|</td>
  672. <td style="text-align: right;padding-right: 10px;" width="45%" class="value"
  673. attr="Formula_data_16" unit="m">{{ openDeviceInfoData.data.data.Formula_data_16||'-' }}m
  674. </td>
  675. </tr>
  676. <tr style="height: 1px;background-color: #5F6E8D;">
  677. <td colspan="3"></td>
  678. </tr>
  679. <tr style="height: 45px">
  680. <td>成品宽</td>
  681. <td style="color: #817e7e">|</td>
  682. <td style="text-align: right;padding-right: 10px;" width="45%" class="value"
  683. attr="Formula_data_17" unit="m">{{ openDeviceInfoData.data.data.Formula_data_17||'-' }}m
  684. </td>
  685. </tr>
  686. <tr style="height: 1px;background-color: #5F6E8D;">
  687. <td colspan="3"></td>
  688. </tr>
  689. <tr style="height: 45px">
  690. <td>成品重</td>
  691. <td style="color: #817e7e">|</td>
  692. <td style="text-align: right;padding-right: 10px;" width="45%" class="value"
  693. attr="Formula_data_18" unit="kg">{{ openDeviceInfoData.data.data.Formula_data_18||'-' }}kg
  694. </td>
  695. </tr>
  696. </tbody>
  697. </table>
  698. </div>
  699. <div style="float: left;width: 23%;margin-right: 2%;">
  700. <table cellspacing="0" cellpadding="0" width="100%">
  701. <tbody>
  702. <tr style="height: 45px">
  703. <td>GB1送经量</td>
  704. <td style="color: #817e7e">|</td>
  705. <td style="text-align: right;padding-right: 10px;" width="45%" class="value"
  706. attr="Formula_data_19" unit="mm/腊克">{{ openDeviceInfoData.data.data.Formula_data_19||'-' }}mm/腊克
  707. </td>
  708. </tr>
  709. <tr style="height: 1px;background-color: #5F6E8D;">
  710. <td colspan="3"></td>
  711. </tr>
  712. <tr style="height: 45px">
  713. <td>GB2送经量</td>
  714. <td style="color: #817e7e">|</td>
  715. <td style="text-align: right;padding-right: 10px;" width="45%" class="value"
  716. attr="Formula_data_20" unit="mm/腊克">{{ openDeviceInfoData.data.data.Formula_data_20||'-' }}mm/腊克
  717. </td>
  718. </tr>
  719. <tr style="height: 1px;background-color: #5F6E8D;">
  720. <td colspan="3"></td>
  721. </tr>
  722. <tr style="height: 45px">
  723. <td>GB3送经量</td>
  724. <td style="color: #817e7e">|</td>
  725. <td style="text-align: right;padding-right: 10px;" width="45%" class="value"
  726. attr="Formula_data_21" unit="mm/腊克">{{ openDeviceInfoData.data.data.Formula_data_21||'-' }}mm/腊克
  727. </td>
  728. </tr>
  729. <tr style="height: 1px;background-color: #5F6E8D;">
  730. <td colspan="3"></td>
  731. </tr>
  732. <tr style="height: 45px">
  733. <td>GB4送经量</td>
  734. <td style="color: #817e7e">|</td>
  735. <td style="text-align: right;padding-right: 10px;" width="45%" class="value"
  736. attr="Formula_data_22" unit="mm/腊克">{{ openDeviceInfoData.data.data.Formula_data_22||'-' }}mm/腊克
  737. </td>
  738. </tr>
  739. <tr style="height: 1px;background-color: #5F6E8D;">
  740. <td colspan="3"></td>
  741. </tr>
  742. <tr style="height: 45px">
  743. <td>GB5送经量</td>
  744. <td style="color: #817e7e">|</td>
  745. <td style="text-align: right;padding-right: 10px;" width="45%" class="value"
  746. attr="Formula_data_23" unit="mm/腊克">{{ openDeviceInfoData.data.data.Formula_data_23||'-' }}mm/腊克
  747. </td>
  748. </tr>
  749. <tr style="height: 1px;background-color: #5F6E8D;">
  750. <td colspan="3"></td>
  751. </tr>
  752. <tr style="height: 45px">
  753. <td>奉拉密度</td>
  754. <td style="color: #817e7e">|</td>
  755. <td style="text-align: right;padding-right: 10px;" width="45%" class="value"
  756. attr="Formula_data_24" unit="r/cm">{{ openDeviceInfoData.data.data.Formula_data_24||'-' }}r/cm
  757. </td>
  758. </tr>
  759. <tr style="height: 1px;background-color: #5F6E8D;">
  760. <td colspan="3"></td>
  761. </tr>
  762. <tr style="height: 45px">
  763. <td>卷曲张力系数</td>
  764. <td style="color: #817e7e">|</td>
  765. <td style="text-align: right;padding-right: 10px;" width="45%" class="value"
  766. attr="Formula_data_25" unit="%">{{ openDeviceInfoData.data.data.Formula_data_25||'-' }}%
  767. </td>
  768. </tr>
  769. <tr style="height: 1px;background-color: #5F6E8D;">
  770. <td colspan="3"></td>
  771. </tr>
  772. <tr style="height: 45px">
  773. <td>GB1盘头最大圈数</td>
  774. <td style="color: #817e7e">|</td>
  775. <td style="text-align: right;padding-right: 10px;" width="45%" class="value"
  776. attr="Formula_data_26" unit="r">{{ openDeviceInfoData.data.data.Formula_data_26 }}r
  777. </td>
  778. </tr>
  779. <tr style="height: 1px;background-color: #5F6E8D;">
  780. <td colspan="3"></td>
  781. </tr>
  782. <tr style="height: 45px">
  783. <td>GB2盘头最大圈数</td>
  784. <td style="color: #817e7e">|</td>
  785. <td style="text-align: right;padding-right: 10px;" width="45%" class="value"
  786. attr="Formula_data_27" unit="r">{{ openDeviceInfoData.data.data.Formula_data_27 }}r
  787. </td>
  788. </tr>
  789. </tbody>
  790. </table>
  791. </div>
  792. <div style="float: left;width: 23%;margin-right: 2%;">
  793. <table cellspacing="0" cellpadding="0" width="100%">
  794. <tbody>
  795. <tr style="height: 45px">
  796. <td>GB3盘头最大圈数</td>
  797. <td style="color: #817e7e">|</td>
  798. <td style="text-align: right;padding-right: 10px;" width="45%" class="value"
  799. attr="Formula_data_28" unit="r">{{ openDeviceInfoData.data.data.Formula_data_28 }}r</td>
  800. </tr>
  801. <tr style="height: 1px;background-color: #5F6E8D;">
  802. <td colspan="3"></td>
  803. </tr>
  804. <tr style="height: 45px">
  805. <td>GB4盘头最大圈数</td>
  806. <td style="color: #817e7e">|</td>
  807. <td style="text-align: right;padding-right: 10px;" width="45%" class="value"
  808. attr="Formula_data_29" unit="r">{{ openDeviceInfoData.data.data.Formula_data_29 }}r</td>
  809. </tr>
  810. <tr style="height: 1px;background-color: #5F6E8D;">
  811. <td colspan="3"></td>
  812. </tr>
  813. <tr style="height: 45px">
  814. <td>GB5盘头最大圈数</td>
  815. <td style="color: #817e7e">|</td>
  816. <td style="text-align: right;padding-right: 10px;" width="45%" class="value"
  817. attr="Formula_data_30" unit="r">{{ openDeviceInfoData.data.data.Formula_data_30 }}r</td>
  818. </tr>
  819. <tr style="height: 1px;background-color: #5F6E8D;">
  820. <td colspan="3"></td>
  821. </tr>
  822. <tr style="height: 45px">
  823. <td>GB1盘头最大外周长</td>
  824. <td style="color: #817e7e">|</td>
  825. <td style="text-align: right;padding-right: 10px;" width="45%" class="value"
  826. attr="Formula_data_31" unit="mm">{{ openDeviceInfoData.data.data.Formula_data_31 }}mm</td>
  827. </tr>
  828. <tr style="height: 1px;background-color: #5F6E8D;">
  829. <td colspan="3"></td>
  830. </tr>
  831. <tr style="height: 45px">
  832. <td>GB2盘头最大外周长</td>
  833. <td style="color: #817e7e">|</td>
  834. <td style="text-align: right;padding-right: 10px;" width="45%" class="value"
  835. attr="Formula_data_32" unit="mm">{{ openDeviceInfoData.data.data.Formula_data_32 }}mm</td>
  836. </tr>
  837. <tr style="height: 1px;background-color: #5F6E8D;">
  838. <td colspan="3"></td>
  839. </tr>
  840. <tr style="height: 45px">
  841. <td>GB3盘头最大外周长</td>
  842. <td style="color: #817e7e">|</td>
  843. <td style="text-align: right;padding-right: 10px;" width="45%" class="value"
  844. attr="Formula_data_33" unit="mm">{{ openDeviceInfoData.data.data.Formula_data_33 }}mm</td>
  845. </tr>
  846. <tr style="height: 1px;background-color: #5F6E8D;">
  847. <td colspan="3"></td>
  848. </tr>
  849. <tr style="height: 45px">
  850. <td>GB4盘头最大外周长</td>
  851. <td style="color: #817e7e">|</td>
  852. <td style="text-align: right;padding-right: 10px;" width="45%" class="value"
  853. attr="Formula_data_34" unit="mm">{{ openDeviceInfoData.data.data.Formula_data_34 }}mm</td>
  854. </tr>
  855. <tr style="height: 1px;background-color: #5F6E8D;">
  856. <td colspan="3"></td>
  857. </tr>
  858. <tr style="height: 45px">
  859. <td>GB5盘头最大外周长</td>
  860. <td style="color: #817e7e">|</td>
  861. <td style="text-align: right;padding-right: 10px;" width="45%" class="value"
  862. attr="Formula_data_35" unit="mm">{{ openDeviceInfoData.data.data.Formula_data_35 }}mm</td>
  863. </tr>
  864. </tbody>
  865. </table>
  866. </div>
  867. </div>
  868. <div style="padding: 15px;width: 100%" v-show="devDetailIndex==4">
  869. <img src="../../assets/image/dev_log.png" style="width: 1300px;height: 459px;">
  870. </div>
  871. </div>
  872. </div>
  873. </template>
  874. <script>
  875. import { ref ,watch,onUnmounted,onMounted} from 'vue';
  876. import api from "@/api/system";
  877. import {useRouter} from 'vue-router';
  878. import * as echarts from 'echarts';
  879. export default {
  880. props:{
  881. },
  882. setup(props,{emit}) {
  883. const btnFrontBg = require('@/assets/image/nav_btn_front.png');
  884. const route = useRouter(); // 获取当前路由对象
  885. const devicename = ref(''); // 初始化 hash 值
  886. const openDeviceInfoData = ref({'name':'',data:{data:{}}});
  887. const devDetailIndex=ref(0);
  888. let currendDeviceIsAlarm=ref(false); //当前双击设备是否有告警
  889. let currendDeviceAlarmMsg = ref(''); //当前双击设备的告警内容描述
  890. const dev_alarm_echarts = ref(null);
  891. watch(
  892. () => route.hash,
  893. (newHash) => {
  894. devicename.value = newHash;
  895. }
  896. );
  897. function LoadDevDetail(name, typecode) {
  898. if (typecode == null) typecode = "0";
  899. devDetailIndex.value = typecode*1;
  900. var data = openDeviceInfoData.value.data;
  901. if (typecode == "0") {
  902. //告警周趋势
  903. var alarmWeekTmp = [];
  904. var times = [];
  905. var v_series = [];
  906. for (var i = 0; i < data.alarms.length; i++) {
  907. var v = data.alarms[i]['value'];
  908. var tv = data.alarms[i]['time'].split("-")
  909. times.push([ tv[2],data.alarms[i]['time']]);
  910. if (v != null) alarmWeekTmp.push(v)
  911. }
  912. if (alarmWeekTmp.length == 0) {
  913. //t.html('未获取到告警趋势数据')
  914. } else {
  915. v_series.push({
  916. name: "",
  917. type: 'line',
  918. smooth: true,
  919. //symbol: 'none',
  920. data: alarmWeekTmp,
  921. itemStyle: {
  922. normal: {
  923. color: '#F0F275', // 这里设置折线的颜色
  924. lineStyle: {
  925. color: '#F0F27560' // 这里同时设置线头的颜色
  926. }
  927. }
  928. },
  929. });
  930. var opt = {
  931. title: {
  932. show: false, //不显示标题
  933. text: '',
  934. textStyle: {
  935. color: "rgb(89, 151, 229)",
  936. fontWeight: "bold"
  937. },
  938. top: "0px",
  939. left: "30px"
  940. },
  941. tooltip: {
  942. trigger: 'axis',
  943. formatter: function (params) {
  944. let xv='';
  945. let result = '';
  946. params.forEach(function (item) {
  947. xv=`${item.name}`;
  948. xv = xv.split(',')[1]+'<br/>';
  949. result += ` ${item.marker} ${item.value}(次)<br/>`;
  950. });
  951. return xv+result;
  952. }
  953. },
  954. legend: {
  955. show: false, //不显示图例
  956. inactiveColor: "#04417A",
  957. data: "",
  958. textStyle: {color: "#fff"},
  959. top: "0px"
  960. },
  961. grid: {
  962. left: '1%',
  963. right: '1%',
  964. bottom: '2%',
  965. top: '5%',
  966. containLabel: true
  967. },
  968. xAxis: {
  969. type: 'category',
  970. boundaryGap: false,
  971. axisLabel: {
  972. rotate: 0,
  973. color: "#26e2fb",
  974. formatter:function(v){
  975. return v.split(',')[0];
  976. }
  977. },
  978. data: times
  979. },
  980. yAxis: {
  981. type: 'value',
  982. nameTextStyle: {
  983. color: "#fff"
  984. },
  985. axisLabel: {
  986. color: "#26e2fb"
  987. },
  988. splitLine: {
  989. lineStyle: {
  990. color: "#7DA7CD",
  991. type: "dashed",
  992. width: 1
  993. }
  994. }
  995. },
  996. series: v_series
  997. };
  998. setTimeout(() => {
  999. var echartsEle = echarts.init(dev_alarm_echarts.value);
  1000. echartsEle.setOption(opt);
  1001. },500);
  1002. }
  1003. //当前告警数据加载
  1004. var t1 = [];
  1005. for (var i = 0; i < AlarmData.value.length; i++) {
  1006. if (AlarmData.value[i].code == name) {
  1007. t1.push(AlarmType[AlarmData.value[i].type])
  1008. }
  1009. }
  1010. if (t1.length == 0) {
  1011. currendDeviceIsAlarm.value=false;
  1012. currendDeviceAlarmMsg.value='';
  1013. return
  1014. }
  1015. currendDeviceIsAlarm.value=true;
  1016. var a1 = [];
  1017. for (var i = 0; i < t1.length; i++) {
  1018. a1.push('<span class="alarm_span"><img src="image/alarm_icon.png" style="vertical-align: middle;"><b>' + t1[i] + '</b></span>')
  1019. }
  1020. currendDeviceAlarmMsg.value = a1.join('');
  1021. } else {
  1022. //console.log(data.data)
  1023. }
  1024. }
  1025. onMounted(()=>{
  1026. devicename.value=route.currentRoute.value.hash.slice(1);
  1027. api.GetDeviceInfo(devicename.value ,{week:1}).then(res=> {
  1028. if (res==null || res.code!=0) {
  1029. //NoneDevice(name)
  1030. return
  1031. }
  1032. if(res.data.data==null) res.data.data={};
  1033. openDeviceInfoData.value={name:devicename.value,data:res.data};
  1034. //window.Device_Data = res.data
  1035. setTimeout(() => {
  1036. LoadDevDetail(devicename.value, "0");
  1037. }, 100);
  1038. })
  1039. })
  1040. return{
  1041. btnFrontBg,
  1042. openDeviceInfoData,
  1043. devDetailIndex,
  1044. currendDeviceIsAlarm,
  1045. currendDeviceAlarmMsg,
  1046. LoadDevDetail,
  1047. dev_alarm_echarts,
  1048. }
  1049. }
  1050. }
  1051. </script>
  1052. <style>
  1053. .dataContent{
  1054. color: rgb(255, 255, 255);
  1055. background-color: rgba(2, 62, 81, 0.5);
  1056. font-size: 16px;
  1057. margin: 20px;
  1058. padding: 10px;
  1059. border: 1px solid #007586;
  1060. width: 95%;
  1061. height: 476px;
  1062. }
  1063. .dataContent .btn{
  1064. width: 100px;
  1065. height: 40px;
  1066. border: 1px solid #008899;
  1067. line-height: 40px;
  1068. text-align: center;
  1069. display: inline-block;
  1070. float: left;
  1071. margin: 5px;
  1072. border-radius: 5px;
  1073. cursor: pointer;
  1074. background-size: cover;
  1075. background-repeat: no-repeat;
  1076. background-position: center;
  1077. }
  1078. .dataContent .btn:hover,.content .btn.active{
  1079. color: #ffffff;
  1080. border-color: #0cd7f0 !important;
  1081. }
  1082. .dataContent .no_alarm{
  1083. width: 95%;
  1084. height: 140px;
  1085. color: #ffffff;
  1086. font-size: 32px;
  1087. text-align: center;
  1088. line-height: 140px;
  1089. }
  1090. .dataContent .has_alarm{
  1091. width: 95%;
  1092. height: 140px;
  1093. display: none;
  1094. font-size: 24px;
  1095. text-align: center;
  1096. line-height: 140px;
  1097. }
  1098. .dataContent .has_alarm .alarm_span{
  1099. margin: 0 20px;
  1100. color: red;
  1101. }
  1102. .dataContent .dev_alarm_echarts{
  1103. width: 100%;
  1104. height: 290px;
  1105. text-align: center;
  1106. font-size: 24px;
  1107. color: #ffffff;
  1108. }
  1109. .title_left_line{
  1110. background-image: url('../../assets/image/title_left_line.png');
  1111. width: 6px;
  1112. height: 18px;
  1113. vertical-align: middle;
  1114. margin-right: 10px;
  1115. margin-top: 3px;
  1116. }
  1117. .littleFont{
  1118. font-size: 12px;
  1119. letter-spacing: 2px;
  1120. }
  1121. .value{
  1122. color: #26e1f9;
  1123. }
  1124. </style>