device.vue 1.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107
  1. <template>
  2. <view>
  3. <view class="device" v-for="item in devices" :key="item.code">
  4. <view class="col">
  5. <view class="switch">
  6. <switch checked color="#007AFE" @change="switchChange" />
  7. </view>
  8. <view class="list" @tap="showDetail" :data-code="item.code">查看 ></view>
  9. </view>
  10. <text class="title">{{item.name}}</text>
  11. <view class="content">
  12. <text>设备SN:{{item.sn}}</text>
  13. <text>设备类型:{{item.type}}</text>
  14. </view>
  15. </view>
  16. </view>
  17. </template>
  18. <script>
  19. export default {
  20. data() {
  21. return {
  22. devices: [],
  23. }
  24. },
  25. onLoad(e) {
  26. console.log(e);
  27. uni.request({
  28. url: 'http://127.0.0.1:9999/device/list?gatewayCode=' + e.code,
  29. method: 'GET',
  30. data: {},
  31. success: res => {
  32. this.devices = res.data.data.devices;
  33. console.log(this.devices);
  34. },
  35. });
  36. },
  37. methods: {
  38. showDetail(e) {
  39. console.log(e);
  40. var code = e.currentTarget.dataset.code;
  41. uni.navigateTo({
  42. url: '/pages/device/deviceInfo/deviceInfo?code=' + code,
  43. });
  44. }
  45. }
  46. }
  47. </script>
  48. <style>
  49. .list {
  50. font-size: 28rpx;
  51. color: #007AFF;
  52. margin-right: 20rpx;
  53. margin-top: 85rpx;
  54. }
  55. .switch {
  56. transform: scale(0.6);
  57. }
  58. .col {
  59. float: right;
  60. }
  61. .device {
  62. width: 702rpx;
  63. height: 230rpx;
  64. background-color: white;
  65. margin-top: 30rpx;
  66. margin-left: 24rpx;
  67. border-radius: 10rpx;
  68. padding-top: 30rpx;
  69. }
  70. .content {
  71. display: flex;
  72. flex-direction: column;
  73. margin-top: 30rpx;
  74. margin-left: 30rpx;
  75. line-height: 60rpx;
  76. color: #444546;
  77. font-size: 28rpx;
  78. }
  79. .title {
  80. font-size: 36rpx;
  81. margin-left: 30rpx;
  82. color: #282828;
  83. font-weight: 600;
  84. }
  85. </style>