bigDataApp/pages/cb/wenshizs/detail.vue

<template>
  <view class="greenhouse-page">
    <custom-card>
      <block slot="backText">
        <view class="greenhouse-top__title">
          {{ dataSource.devName }}
        </view> </block
      ><view slot="right">
        <view class="ntoNative" @tap="toNavigation">
          <image :src="location" class="icon"></image>
        </view>
      </view>
    </custom-card>
    <view class="greenhouse-top">
      <device-card :dataSource="dataSource" />
    </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"
      />
    </view>
  </view>
</template>

<script>
import Element from './components/element.vue';
import deviceCard from './components/DeviceCard.vue';
import OperationCard from './components/OperationCard.vue';

export default {
  components: {
    Element,
    deviceCard,
    OperationCard,
  },
  data() {
    return {
      location:
        'https://webstaticimg.oss-cn-hangzhou.aliyuncs.com/bigdata_app/image/zhongshui/location.svg',
      juanmoList: [],
      dataSource: {
        devStatus: '1',
        devStatusName: '在线',
        devName: '-',
        devCode: '-',
        devUpdateddate: '-',
        devProvincealign: '-',
      },
      page: 1,
      size: 99999,
    };
  },
  methods: {
    init() {
      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/',
        method: 'post',
        data: {
          devBid: this.devBid,
          data: payload,
        },
        header: {
          'Content-Type': 'application/json',
        },
      });
      // 提示
      uni.showToast({
        title: res?.msg || '',
        icon: 'none',
        duration: 3000,
      });
      setTimeout(() => {
        this.getDpdevicedpkzgjuanmoList();
      }, 1000);
    },
    async getDataSource() {
      const res = await this.$myRequest({
        url: '/api/v2/iot/mobile/device/dpkzg/info/',
        method: 'post',
        data: {
          devBid: this.devBid,
        },
      });
      this.dataSource = res;
    },
    runStatusHandler(dourceData) {
      if (dourceData.down_status === '0' && dourceData.up_status === '1') {
        this.$set(dourceData, 'up_status', '0');
      }
      this.$set(
        dourceData,
        'down_status',
        dourceData.down_status === '1' ? '0' : '1'
      );
      const payload = {
        code: dourceData.code,
        type: 'juanmo',
        op_type: 'down',
        value: dourceData.down_status,
      };
      this.optDevctl(payload);
    },
    closeStatusHandler(dourceData) {
      if (dourceData.up_status === '0' && dourceData.down_status === '1') {
        this.$set(dourceData, 'down_status', '0');
      }
      this.$set(
        dourceData,
        'up_status',
        dourceData.up_status === '1' ? '0' : '1'
      );
      const payload = {
        code: dourceData.code,
        type: 'juanmo',
        op_type: 'up',
        value: dourceData.up_status,
      };
      this.optDevctl(payload);
    },
    toNavigation() {
      const roundedLongitude =
        this.dataSource.devLngalign || this.dataSource.devLng;
      const roundedLatitude =
        this.dataSource.devLatalign || this.dataSource.devLat;
      if (!roundedLongitude) {
        uni.showToast({
          title: '当前设备无定位信息',
          icon: 'none',
          duration: 3000,
        });
        return;
      }
      if (
        plus.runtime.isApplicationExist({
          pname: 'com.autonavi.minimap',
          action: 'iosamap://',
        })
      ) {
        let url = `amapuri://route/plan?sourceApplication=yourAppName&dlat=${roundedLatitude}&dlon=${roundedLongitude}&dev=0&t=0&style=0&start=&auto=1&rtdType=1&coordinate=wgs84`;
        plus.runtime.openURL(url);
      } else if (
        plus.runtime.isApplicationExist({
          pname: 'com.baidu.BaiduMap',
          action: 'baidumap://',
        })
      ) {
        let url = `baidumap://map/direction?destination=${roundedLongitude},${roundedLatitude}&mode=navigation&output=html&coord_type=wgs84`;
        plus.runtime.openURL(url);
      } else {
        uni.showToast({
          title: '当前未安装 高德地图或百度地图 无法导航',
          icon: 'none',
          duration: 3000,
        });
      }
    },
    // 获取卷膜设备列表
    async getDpdevicedpkzgjuanmoList(tf) {
      const res = await this.$myRequest({
        url: '/api/v2/iot/mobile/device/dpkzg/juanmo/list/',
        method: 'post',
        data: {
          pageSize: this.size,
          pageNum: this.page,
          devBid: this.devBid,
        },
      });
      this.juanmoList = res;
    },
  },
  onLoad(query) {
    this.devBid = query.devBid;
    this.devBid && this.init();
  },
};
</script>
<style scoped lang="scss">
uni-page-body {
  position: relative;
  height: 100%;
}
.icon {
  width: 40rpx;
  height: 40rpx;
}
.greenhouse-page {
  background: linear-gradient(
      180deg,
      #ffffff00 0%,
      #eff2fa 23.64%,
      #eff2fa 100%
    ),
    linear-gradient(102deg, #bfeadd 6.77%, #b8f1e7 40.15%, #b9eef5 84.02%);
  min-height: 100vh;
  width: 100%;
  overflow-x: hidden;
  overflow-y: scroll;
  .greenhouse-top {
    text-align: center;
    margin: 0 auto;
    margin-top: 18rpx;
    padding: 0 30rpx;
  }
  .greenhouse-bottom {
    width: calc(100% - 128rpx);
    padding: 32rpx 32rpx 1rpx 32rpx;
    background: #ffffff;
    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>