index.vue 1.2 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768
  1. <template>
  2. <view class="content">
  3. <button @click="addDevice1" hover-class="button-hover">添加设备</button>
  4. <device-item v-for="(device,index) in deviceList" :key="index" :device="device" @onclick='goDeviceInfo'></device-item>
  5. </view>
  6. </template>
  7. <script>
  8. import deviceItem from '../../components/device-manager/deviceItem/deviceItem.vue';
  9. export default {
  10. components: { deviceItem },
  11. data() {
  12. return {
  13. title: "Hello",
  14. };
  15. },
  16. onLoad() {},
  17. methods: {
  18. addDevice() {
  19. uni.navigateTo({
  20. url: "../addDevice/selectDevice/selectDevice",
  21. });
  22. },
  23. goDeviceInfo() {
  24. console.log("goDeviceInfo");
  25. uni.navigateTo({
  26. url: "../demo/mqtt/deviceInfo",
  27. complete(res){
  28. console.warn(res);
  29. }
  30. });
  31. },
  32. },
  33. computed:{
  34. deviceList(){
  35. return this.$store.state.moduleMqtt.deviceList;
  36. }
  37. }
  38. };
  39. </script>
  40. <style>
  41. .content {
  42. display: flex;
  43. flex-direction: column;
  44. align-items: center;
  45. justify-content: center;
  46. }
  47. .logo {
  48. height: 200rpx;
  49. width: 200rpx;
  50. margin-top: 200rpx;
  51. margin-left: auto;
  52. margin-right: auto;
  53. margin-bottom: 50rpx;
  54. }
  55. .text-area {
  56. display: flex;
  57. justify-content: center;
  58. }
  59. .title {
  60. font-size: 36rpx;
  61. color: #8f8f94;
  62. }
  63. </style>