feat: 接口对接

pages/cb/wenshizs/components/DeviceCard.vue

@@ -35,9 +35,6 @@
 </template>
 
 <script>
-import successImg from '../assets/success.png';
-import errorImg from '../assets/error.png';
-
 export default {
   name: 'DeviceCard',
   props: {
@@ -50,8 +47,10 @@ export default {
   },
   data() {
     return {
-      successImg,
-      errorImg,
+      successImg:
+        'https://webstaticimg.oss-cn-hangzhou.aliyuncs.com/bigdata_app/image/zhongshui/success.png',
+      errorImg:
+        'https://webstaticimg.oss-cn-hangzhou.aliyuncs.com/bigdata_app/image/zhongshui/error.png',
     };
   },
   methods: {

pages/cb/wenshizs/components/OperationCard.vue

@@ -1,11 +1,46 @@
 <template>
   <view class="operation">
-    <view class="operation__header">{{ dourceData.name }}</view>
+    <view
+      class="operation__header"
+      :class="
+        dourceData.local_model == '0'
+          ? 'operation__header--info'
+          : 'operation__header--warn'
+      "
+      >{{ dourceData.name }}
+      <view
+        :class="
+          dourceData.local_model == '0'
+            ? 'operation__header--infoing'
+            : 'operation__header--warning'
+        "
+      >
+        {{ dourceData.local_model == '0' ? '本地' : '远程' }}
+      </view>
+    </view>
+    <view class="operation__model">
+      模式
+      <view class="operation__model--container">
+        <view
+          class="hand"
+          @click="changeClick('hand')"
+          :class="{ active: dourceData.local_model == '0' }"
+          >手动</view
+        >
+        <view
+          class="auto"
+          @click="changeClick('auto')"
+          :class="{ active: dourceData.local_model == '1' }"
+          >自动</view
+        >
+      </view>
+    </view>
     <view class="operation__body">
       <view class="operation__body-content">
         <view class="operation__body-content--title">展开</view>
         <view class="operation__body-content--desc">
           <u-switch
+            :disabled="this.dourceData.local_model == '0'"
             v-model="runStatus"
             active-color="#14A478"
             inactive-color="#C3CAD8"
@@ -17,6 +52,7 @@
         <view class="operation__body-content--title">收拢</view>
         <view class="operation__body-content--desc">
           <u-switch
+            :disabled="this.dourceData.local_model == '0'"
             v-model="closeStatus"
             active-color="#14A478"
             inactive-color="#C3CAD8"
@@ -33,7 +69,7 @@ export default {
   props: {
     dourceData: {
       type: Object,
-      default: () => {},
+      default: () => ({}),
     },
   },
   computed: {
@@ -58,11 +94,22 @@ export default {
   },
   data() {
     return {
-      checked: true,
-      checked1: false,
+      info: 'https://webstaticimg.oss-cn-hangzhou.aliyuncs.com/bigdata_app/image/zhongshui/info.png',
+      warning:
+        'https://webstaticimg.oss-cn-hangzhou.aliyuncs.com/bigdata_app/image/zhongshui/warning.png',
     };
   },
-  methods: {},
+  methods: {
+    changeClick(type) {
+      if (this.dourceData.local_model == '0') {
+        return;
+      }
+      this.$emit('change-click', {
+        type,
+        dourceData: this.dourceData,
+      });
+    },
+  },
 };
 </script>
 <style scoped lang="scss">
@@ -71,6 +118,7 @@ export default {
   border-radius: 4px;
   background: #eff2fa;
   margin-bottom: 32rpx;
+  position: relative;
   &__header {
     height: 64rpx;
     line-height: 64rpx;
@@ -78,14 +126,105 @@ export default {
     font-family: 'Source Han Sans CN VF';
     font-size: 28rpx;
     font-weight: 500;
-    border-bottom: 2rpx solid #e4e7ed;
     padding: 0 32rpx;
+    position: relative;
+    &--infoing {
+      width: 150rpx;
+      height: 56rpx;
+      line-height: 50rpx;
+      position: absolute;
+      right: 0rpx;
+      top: 0rpx;
+      background: url('https://webstaticimg.oss-cn-hangzhou.aliyuncs.com/bigdata_app/image/zhongshui/info.png')
+        no-repeat center center;
+      background-size: 100%;
+      color: #0085ff;
+      text-align: center;
+      font-family: 'Source Han Sans CN VF';
+      font-size: 28rpx;
+      font-weight: 400;
+    }
+    &--warning {
+      width: 150rpx;
+      height: 56rpx;
+      line-height: 50rpx;
+      position: absolute;
+      right: 0rpx;
+      top: 0rpx;
+      background: url('https://webstaticimg.oss-cn-hangzhou.aliyuncs.com/bigdata_app/image/zhongshui/warning.png')
+        no-repeat center center;
+      background-size: 100%;
+      text-align: center;
+      font-family: 'Source Han Sans CN VF';
+      font-size: 28rpx;
+      font-weight: 400;
+      color: #eeac19;
+    }
+  }
+  &__header--info {
+    background: linear-gradient(180deg, #eff4ff 20.24%, #eff2fa 100%);
+  }
+  &__header--warn {
+    background: linear-gradient(180deg, #fffaef 20.24%, #eff2fa 100%);
+  }
+  &__model {
+    display: flex;
+    height: 80rpx;
+    align-items: center;
+    justify-content: space-between;
+    border-radius: 16rpx;
+    background: #e4ebf6;
+    color: #333333;
+    font-family: 'Source Han Sans CN VF';
+    font-size: 28rpx;
+    font-weight: 500;
+    padding: 0 32rpx;
+    color: #333333;
+    font-family: 'Source Han Sans CN VF';
+    font-size: 28rpx;
+    margin: 0 24rpx;
+    margin-top: 16rpx;
+    &--container {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      width: 164rpx;
+      height: 48rpx;
+      background: #ffffff;
+      border-radius: 8rpx;
+      padding: 0 4rpx;
+      .hand {
+        width: 50%;
+        border-radius: 8rpx;
+        text-align: center;
+        height: 40rpx;
+        font-family: 'Source Han Sans CN VF';
+        font-size: 24rpx;
+        font-weight: 400;
+        color: #687a74;
+      }
+      .auto {
+        width: 50%;
+        border-radius: 8rpx;
+        text-align: center;
+        height: 40rpx;
+        font-family: 'Source Han Sans CN VF';
+        font-size: 24rpx;
+        font-weight: 400;
+        color: #687a74;
+      }
+      .active {
+        background: #14a478;
+        color: #ffffff;
+      }
+    }
   }
   &__body {
     display: grid;
     grid-template-columns: repeat(2, 1fr);
     grid-gap: 24rpx;
     padding: 30rpx;
+    padding-top: 24rpx;
     &-content {
       height: 72rpx;
       background: #ffffff;

pages/cb/wenshizs/components/element.vue

@@ -22,57 +22,49 @@
   </view>
 </template>
 <script>
-import airhumidity from '../assets/air-humidity.png';
-import airtemperature from '../assets/air-temperature.png';
-import co2 from '../assets/co2.png';
-import illumination from '../assets/illumination.png';
-import ph from '../assets/ph.png';
-import soilhumidity from '../assets/soil-humidity.png';
-import soiltemperature from '../assets/soil-temperature.png';
-
 export default {
   name: 'Element',
   data() {
     return {
       list: [
         {
-          url: airhumidity,
+          url: 'https://webstaticimg.oss-cn-hangzhou.aliyuncs.com/bigdata_app/image/zhongshui/air-humidity.png',
           title: '空气温度',
           unit: '℃',
           content: '12',
         },
         {
-          url: airtemperature,
+          url: 'https://webstaticimg.oss-cn-hangzhou.aliyuncs.com/bigdata_app/image/zhongshui/air-temperature.png',
           title: '空气湿度',
           unit: '%',
           content: '80',
         },
         {
-          url: soiltemperature,
+          url: 'https://webstaticimg.oss-cn-hangzhou.aliyuncs.com/bigdata_app/image/zhongshui/soil-temperature.png',
           title: '土壤温度',
           unit: '℃',
           content: '80',
         },
         {
-          url: soilhumidity,
+          url: 'https://webstaticimg.oss-cn-hangzhou.aliyuncs.com/bigdata_app/image/zhongshui/soil-humidity.png',
           title: '土壤湿度',
           unit: '%',
           content: '80',
         },
         {
-          url: co2,
+          url: 'https://webstaticimg.oss-cn-hangzhou.aliyuncs.com/bigdata_app/image/zhongshui/co2.png',
           title: '二氧化碳',
           unit: 'ppm',
           content: '80',
         },
         {
-          url: illumination,
+          url: 'https://webstaticimg.oss-cn-hangzhou.aliyuncs.com/bigdata_app/image/zhongshui/illumination.png',
           title: '光照',
           unit: 'LUX',
           content: '80',
         },
         {
-          url: ph,
+          url: 'https://webstaticimg.oss-cn-hangzhou.aliyuncs.com/bigdata_app/image/zhongshui/ph.png',
           title: '土壤PH值',
           unit: '',
           content: '80',

pages/cb/wenshizs/detail.vue

@@ -16,9 +16,14 @@
     </view>
     <view class="greenhouse-bottom">
       <!-- <Element /> -->
+      <view class="greenhouse-bottom-header">
+        卷膜控制
+        <u-icon name="reload" class="reload" @click="reloadHandler" />
+      </view>
       <operation-card
         @run-status="runStatusHandler"
         @close-status="closeStatusHandler"
+        @change-click="changeClickHandler"
         v-for="(item, index) in juanmoList"
         :key="index"
         :dourceData="item"
@@ -28,7 +33,6 @@
 </template>
 
 <script>
-import location from './assets/location.svg';
 import Element from './components/element.vue';
 import deviceCard from './components/DeviceCard.vue';
 import OperationCard from './components/OperationCard.vue';
@@ -41,7 +45,8 @@ export default {
   },
   data() {
     return {
-      location,
+      location:
+        'https://webstaticimg.oss-cn-hangzhou.aliyuncs.com/bigdata_app/image/zhongshui/location.svg',
       juanmoList: [],
       dataSource: {
         devStatus: '1',
@@ -58,6 +63,31 @@ export default {
       this.getDpdevicedpkzgjuanmoList();
       this.getDataSource();
     },
+    async reloadHandler() {
+      const res = await this.$myRequest({
+        url: '/api/v2/iot/mobile/device/dpkzg/refresh/',
+        method: 'post',
+        data: {
+          devBid: this.devBid,
+        },
+      });
+      uni.showToast({
+        title: res?.msg || '',
+        icon: 'none',
+        duration: 3000,
+      });
+      this.getDpdevicedpkzgjuanmoList();
+    },
+    changeClickHandler(prop) {
+      const { type, dourceData } = prop;
+      const payload = {
+        code: dourceData.code,
+        type: 'juanmo',
+        op_type: 'run_model',
+        value: type === 'auto' ? '1' : '0',
+      };
+      this.optDevctl(payload);
+    },
     async optDevctl(payload) {
       const res = await this.$myRequest({
         url: '/api/v2/iot/mobile/device/dpkzg/devctl/',
@@ -76,6 +106,7 @@ export default {
         icon: 'none',
         duration: 3000,
       });
+      this.getDpdevicedpkzgjuanmoList();
     },
     async getDataSource() {
       const res = await this.$myRequest({
@@ -212,6 +243,20 @@ uni-page-body {
     border-radius: 16rpx;
     margin: 0 auto;
     margin-top: 32rpx;
+    .greenhouse-bottom-header {
+      display: flex;
+      justify-content: space-between;
+      color: #042118;
+      font-family: 'Source Han Sans CN VF';
+      font-size: 28rpx;
+      font-weight: 700;
+      margin-bottom: 24rpx;
+      .reload {
+        color: #14a478;
+        font-size: 38rpx;
+        font-weight: 700;
+      }
+    }
   }
 }
 </style>