controlItem.vue 2.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687
  1. <template>
  2. <view class="controlItem" hover-class="navigator-hover">
  3. <view class="funcname u-line-1" :style="{ paddingRight: item.isfeedback ? '10px' : '' }">
  4. {{ item.funcname }}
  5. </view>
  6. <view class="row">
  7. <view v-if="item.inputType == 'switch'" class="value u-line-1">
  8. {{ switchRes(item) }}
  9. </view>
  10. <view v-else class="value u-line-1">{{ item.showValue || item.params.lastvalue || ' --' }}</view>
  11. <view class="unit u-line-1">{{ item.params.unit }}</view>
  12. </view>
  13. <view v-if="item.isfeedback" class="dot" />
  14. </view>
  15. </template>
  16. <script>
  17. export default {
  18. name: "ControlItem",
  19. props: {
  20. item: Object
  21. },
  22. computed: {
  23. switchRes: function () {
  24. return item => {
  25. try {
  26. if (item.showValue) return item.showValue;
  27. let value = item.paramValue || item.params.lastvalue,
  28. res = item.params.options.find(v => v.value == value);
  29. return res ? res.label : '暂未设置'
  30. } catch (error) {
  31. }
  32. }
  33. }
  34. }
  35. }
  36. </script>
  37. <style lang="scss" scoped>
  38. .controlItem {
  39. position: relative;
  40. width: 175px;
  41. height: 60px;
  42. border-radius: 4px;
  43. padding: 4px 6px 0;
  44. box-sizing: border-box;
  45. background-color: #fff;
  46. margin-top: 5px;
  47. .funcname {
  48. font-size: 15px;
  49. color: #333;
  50. }
  51. .dot {
  52. position: absolute;
  53. right: 2px;
  54. top: 2px;
  55. width: 10px;
  56. height: 10px;
  57. background: #D9001B;
  58. border-radius: 50%;
  59. }
  60. .row {
  61. display: flex;
  62. margin-top: 10px;
  63. align-items: flex-end;
  64. .value {
  65. width: 0;
  66. flex: 1;
  67. color: #333;
  68. font-size: 16px;
  69. flex-shrink: 0;
  70. font-weight: bold;
  71. }
  72. .unit {
  73. font-size: 12px;
  74. color: #666;
  75. flex-shrink: 0;
  76. max-width: 50px;
  77. }
  78. }
  79. }
  80. </style>