EqRight.vue 11 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379
  1. <template>
  2. <div class="eqS-right">
  3. <div class="atten-content">
  4. <p>重点关注的内容</p>
  5. <div><span></span><li>此区域暂时没有数据!</li></div>
  6. </div>
  7. <div class="info-center">
  8. <div class="i-top" v-if="flag==3">
  9. <div class="top-left">
  10. <div class="i-box">优</div>
  11. <p>环境健康指数</p>
  12. </div>
  13. <div class="top-right">
  14. <p>空气温度: <span>{{envData.Tdb}}℃</span></p>
  15. <p>空气湿度: <span>{{envData.RH }}%</span></p>
  16. <p>CO2浓度: <span>{{envData.CO }} ppm</span></p>
  17. <p>PM2.5: <span>{{envData.PM}} μg/m³</span></p>
  18. </div>
  19. </div>
  20. <div class="i-top2" v-if="flag==1">
  21. <p><img src="/static/img/yongxing.png" alt=""> 设备运行状态 <span class="grade">{{RunStatusData || '--'}}</span></p>
  22. </div>
  23. <div class="i-top2" v-if="flag==4">
  24. <p><img src="/static/img/yongxing.png" alt=""> 系统运行状态 <span class="grade">{{RunStatusData || '--'}}</span></p>
  25. </div>
  26. <div class="i-top2" v-if="flag==2">
  27. <p><img src="/static/img/yongxing.png" alt=""> 使用状态 <span class="grade" v-if="linkEq">使用中</span><span v-else>暂无使用</span></p>
  28. </div>
  29. <div class="i-bottom" v-if="flag==1 || flag==3 || flag==4">
  30. <div class="bottom-left">
  31. <p><img src="/static/img/elePower.png"> <strong>{{ElecConsumPData || '--'}}</strong> kW</p>
  32. <p class="readmine">耗电功率</p>
  33. </div>
  34. <div class="bottom-right">
  35. <p><img src="/static/img/eleCon.png" alt=""> <strong>{{AccElecConsumData|| '--'}}</strong> kW/h</p>
  36. <p class="readmine">累计用电量</p>
  37. </div>
  38. </div>
  39. </div>
  40. <div v-if="flag==1" class="fault-rate">
  41. <div>
  42. <p class="rate-num">{{subsetCount}}</p>
  43. <p class="rate-name">同类设备数量</p>
  44. </div>
  45. <!-- <div>
  46. <p class="rate-num">2<span style="font-size:14px">%</span> </p>
  47. <p class="rate-name">平均故障率</p>
  48. </div> -->
  49. <div>
  50. <p class="rate-num">{{repairRadio}}<span style="font-size:14px">%</span> </p>
  51. <p class="rate-name">同类设备故障率</p>
  52. </div>
  53. </div>
  54. <div class="detail-info" >
  55. <ul>
  56. <a :href="`/equipment?pid=${this.$store.state.projId}&${Info.infos.EquipID}&${Info.infos.EquipLocalName}`" target="_black">
  57. <li v-if="flag==1">
  58. <a><img src="/static/img/alarmAandS.png" alt="">未恢复的报警 </a>
  59. <span class="type-number">{{noAlarmNum}}<img src="/static/img/left.png" alt=""></span>
  60. </li>
  61. </a>
  62. <a :href="`/rooms?pid=${this.$store.state.projId}&${Info.infos.RoomID}&${Info.infos.RoomLocalName}`" target="_black">
  63. <li v-if="flag==3">
  64. <a><img src="/static/img/alarmAandS.png" alt="">未恢复的报警 </a>
  65. <span class="type-number">{{noAlarmNum}}<img src="/static/img/left.png" alt=""></span>
  66. </li>
  67. </a>
  68. <li v-if="flag!=2">
  69. <a><img src="/static/img/order.png" alt="">进行中的工单 </a>
  70. <span class="type-number">{{orderCount}}<img src="/static/img/left.png" alt=""></span>
  71. </li>
  72. <li @click="getMoreMonitor" v-if="flag==3">
  73. <a><img src="/static/img/video.png" alt="">查看空间监控</a>
  74. <span class="type-number" style="font-size:14px">{{moniData}}个机位<img src="/static/img/left.png" alt=""></span>
  75. </li>
  76. <li @click="getMoreMonitor" v-if="flag==2 || flag==1">
  77. <a><img src="/static/img/video.png" alt="">查看设备相关视频</a>
  78. <span class="type-number" style="font-size:14px">{{moniData}}个机位<img src="/static/img/left.png" alt=""></span>
  79. </li>
  80. <li @click="getMoreMonitor" v-if="flag==4">
  81. <a><img src="/static/img/video.png" alt="">系统内相关视频</a>
  82. <span class="type-number" style="font-size:14px">{{moniData}}个机位<img src="/static/img/left.png" alt=""></span>
  83. </li>
  84. </ul>
  85. <!-- <div class="video-box">
  86. <video class="my-video" ></video>
  87. <p><button class="my-button" v-for="(item ,index ) in btn" :key="index" :class="{btnClass:type==item.type}" @click="changeVideo(item)">{{item.name}}</button></p>
  88. </div> -->
  89. </div>
  90. </div>
  91. </template>
  92. <script>
  93. export default {
  94. components: {
  95. },
  96. mixins: [],
  97. props: {
  98. envData: {
  99. type: Object,
  100. default: () => {}
  101. },
  102. Info: {
  103. type: Object,
  104. default: () => {}
  105. },
  106. noAlarmNum: {
  107. type: Number,
  108. default: 0
  109. },
  110. AccElecConsumData: {
  111. type: String
  112. },
  113. ElecConsumPData: {
  114. type: String
  115. },
  116. orderCount: {
  117. type: Number
  118. },
  119. linkEq: {
  120. type: String
  121. },
  122. RunStatusData: {
  123. type: String
  124. },
  125. subsetCount: {
  126. type: Number
  127. },
  128. repairRadio: {
  129. type: Number
  130. },
  131. moniData: {
  132. type: Number
  133. }
  134. },
  135. data () {
  136. return {
  137. btn: [{type: 1, name: 'f001'}, {type: 2, name: 'f002'}, {type: 3, name: 'f003'}, {type: 4, name: 'f004'}],
  138. type: 1
  139. }
  140. },
  141. computed: {
  142. flag () {
  143. if (location.pathname === '/spread') {
  144. return 1
  145. } else if (location.pathname === '/asset') {
  146. return 2
  147. } else if (location.pathname === '/vr') {
  148. return 3
  149. } else if (location.pathname === '/system') {
  150. return 4
  151. }
  152. },
  153. RunStatus () {
  154. if (this.Info.infos.RunStatus) {
  155. return this.Info.infos.RunStatus
  156. } else {
  157. return '--'
  158. }
  159. }
  160. },
  161. mounted () {
  162. },
  163. methods: {
  164. getMoreMonitor () {
  165. this.$router.push('monitoring')
  166. },
  167. changeVideo (item) {
  168. this.type = item.type
  169. }
  170. }
  171. }
  172. </script>
  173. <style scoped lang="less" >
  174. .eqS-right {
  175. min-width: 300px;
  176. .atten-content {
  177. background: #FFFFFF;
  178. box-shadow: 0 2px 10px 0 rgba(44,48,62,0.06);
  179. border-radius: 2px;
  180. padding: 20px;
  181. >p {
  182. font-size: 18px;
  183. color: #212830;
  184. }
  185. div {
  186. span {
  187. background: #728DEE;
  188. width: 8px;
  189. height: 8px;
  190. border-radius: 50%;
  191. //margin-top: 8px;
  192. display: inline-block;
  193. }
  194. li {
  195. font-size: 14px;
  196. color: #6D747C;
  197. list-style: none;
  198. padding-left: 14px;
  199. display: inline;
  200. }
  201. }
  202. }
  203. .info-center{
  204. margin: 20px 0;
  205. background: #FFFFFF;
  206. box-shadow: 0 2px 10px 0 rgba(44,48,62,0.06);
  207. border-radius: 2px;
  208. .i-top {
  209. display: flex;
  210. padding: 20px;
  211. justify-content: space-evenly;
  212. .top-left {
  213. .i-box {
  214. background: #3BC6A1;
  215. border-radius: 6px;
  216. width: 80px;
  217. height: 80px;
  218. text-align: center;
  219. line-height: 80px;
  220. font-size: 20px;
  221. color: #FFFFFF;
  222. }
  223. >p{
  224. margin-top: 14px;
  225. font-size: 14px;
  226. color: #6D747C;
  227. }
  228. }
  229. .top-right {
  230. font-size: 14px;
  231. color: #6D747C;
  232. >p {
  233. margin-bottom: 10px;
  234. }
  235. }
  236. }
  237. .i-top2 {
  238. padding: 10px 0 15px 20px;
  239. p{
  240. >img {
  241. padding-right: 8px;
  242. }
  243. }
  244. .grade {
  245. font-size: 32px;
  246. color: #3BC6A1;
  247. margin-left: 10%;
  248. }
  249. }
  250. .i-bottom {
  251. display: flex;
  252. padding: 0 20px 20px 20px;
  253. justify-content:space-between;
  254. img {
  255. //margin-left: -42px;
  256. margin-top: -5px;
  257. }
  258. strong {
  259. font-family: 'DIN-Medium';
  260. font-size: 18px;
  261. color: #212830;
  262. }
  263. .readmine {
  264. font-size: 14px;
  265. color: #6D747C;
  266. }
  267. }
  268. }
  269. .fault-rate{
  270. display: flex;
  271. justify-content:space-between;
  272. background: #FFFFFF;
  273. box-shadow: 0 2px 10px 0 rgba(44,48,62,0.06);
  274. border-radius: 2px;
  275. padding:20px 20px;
  276. margin-bottom:20px;
  277. >div{
  278. .rate-num {
  279. font-size: 36px;
  280. color: #212830;
  281. text-align: center;
  282. }
  283. .rate-name {
  284. font-size: 14px;
  285. color: #6D747C;
  286. }
  287. }
  288. }
  289. .detail-info {
  290. background: #FFFFFF;
  291. box-shadow: 0 2px 10px 0 rgba(44,48,62,0.06);
  292. border-radius: 2px;
  293. ul {
  294. margin-bottom: 0;
  295. li {
  296. padding-left: 24px;
  297. height: 65px;
  298. line-height: 65px;
  299. font-size: 14px;
  300. color: #6D747C;
  301. display: flex;
  302. align-items:center;
  303. justify-content:space-between;
  304. cursor: pointer;
  305. &:hover {
  306. background: #f5f5f5;
  307. }
  308. .type-number {
  309. color: #212830;
  310. font-size: 32px;
  311. cursor: pointer;
  312. >img {
  313. margin-left: 14px;
  314. }
  315. }
  316. img {
  317. //vertical-align: middle;
  318. margin-right:20px;
  319. margin-top: -2px;
  320. }
  321. }
  322. }
  323. .video-box{
  324. width: 93%;
  325. margin: 0 10px;
  326. //height: 240px;
  327. background: #F5F5F5;
  328. border-radius: 2px;
  329. .my-video {
  330. margin: 10px;
  331. width: 95%;
  332. //height: 180px;
  333. background: rgba(0,0,0,0.30);
  334. border-radius: 2px;
  335. }
  336. >p {
  337. padding-left: 10px;
  338. .my-button {
  339. width: 52px;
  340. height: 28px;
  341. background: #FFFFFF;
  342. border: 1px solid #728DEE;
  343. border-radius: 2px;
  344. font-size: 14px;
  345. color: #728DEE;
  346. display: inline-block;
  347. margin-right: 10px;
  348. text-align: center;
  349. border-radius: 2px;
  350. margin-bottom: 10px;
  351. &:hover {
  352. background: #728DEE;
  353. color: #fff;
  354. }
  355. }
  356. .btnClass{
  357. background: #728DEE;
  358. color: #fff;
  359. }
  360. }
  361. }
  362. }
  363. }
  364. </style>