pilotLamp.vue 1.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109
  1. <template>
  2. <view class="pilotLamp">
  3. <view class="item" v-for="item in list" :key="item.name">
  4. <view class="image">
  5. <image
  6. style="height: 100%"
  7. src="/static/img/pilot-lamp.png"
  8. mode="heightFix"
  9. />
  10. <view
  11. v-if="item.value || (item.params.lastvalue==1)"
  12. class="bg"
  13. :class="item.warn ? 'red' : 'green'"
  14. />
  15. </view>
  16. <view class="name" v-if="item.name"> {{ item.name }} </view>
  17. </view>
  18. </view>
  19. </template>
  20. <script>
  21. export default {
  22. name: "pilotLamp",
  23. props: {
  24. trItem: Object,
  25. },
  26. watch: {
  27. trItem: {
  28. handler(newV) {
  29. this.list = [newV];
  30. },
  31. deep: true,
  32. immediate: true,
  33. },
  34. },
  35. data() {
  36. return {
  37. list: [],
  38. };
  39. },
  40. };
  41. </script>
  42. <style lang="scss" scoped>
  43. .pilotLamp {
  44. display: flex;
  45. flex-wrap: wrap;
  46. .item {
  47. display: flex;
  48. flex-direction: column;
  49. align-items: center;
  50. width: 20%;
  51. .image {
  52. position: relative;
  53. height: 20px;
  54. .bg {
  55. width: 14px;
  56. height: 14px;
  57. border-radius: 50%;
  58. background: #cccccc;
  59. position: absolute;
  60. top: 3px;
  61. left: 3px;
  62. }
  63. .red {
  64. animation: lampBackground 0.5s infinite alternate ease-in-out;
  65. }
  66. .green {
  67. animation: lampBackground1 0.5s infinite alternate ease-in-out;
  68. }
  69. @keyframes lampBackground {
  70. from {
  71. background-color: #ff8f4a;
  72. }
  73. to {
  74. background-color: red;
  75. }
  76. }
  77. @keyframes lampBackground1 {
  78. from {
  79. background-color: rgb(0, 255, 0);
  80. }
  81. to {
  82. background-color: green;
  83. }
  84. }
  85. }
  86. .name {
  87. font-size: 12px;
  88. color: #fff;
  89. margin-top: 6px;
  90. }
  91. }
  92. .item:nth-of-type(n + 6) {
  93. margin-top: 10px;
  94. }
  95. }
  96. </style>