bigDataApp/pages/distribution/components/DevicePopup.vue

<template>
  <u-popup
    :show="layerVisible"
    @close="layerClose"
    :round="8"
    @open="layerOpen"
  >
    <view class="layer-popup">
      <view class="layer-popup__header">
        <view class="layer-popup__close">
          <u-icon
            name="close"
            size="36rpx"
            color="#4e6961"
            @click="layerClose"
          ></u-icon>
        </view>
        <view class="layer-popup__title">{{ dataSource.devName || '-' }}</view>
      </view>
      <view class="layer-popup__content">
        <DescriptionItem>
          <view slot="title">设备ID</view>
          <view slot="content">{{ dataSource.devCode || '-' }}</view>
        </DescriptionItem>
        <DescriptionItem>
          <view slot="title">在线状态</view>
          <view slot="content">{{
            dataSource.devStatus == '1' ? '在线' : '离线'
          }}</view>
        </DescriptionItem>
        <DescriptionItem>
          <view slot="title">上报时间</view>
          <view slot="content">{{ dataSource.devUpdateddate || '-' }}</view>
        </DescriptionItem>
        <DescriptionItem>
          <view slot="title">位置</view>
          <view slot="content">{{
            `${dataSource.devProvincealign || dataSource.devProvince || ''}${
              dataSource.devCityalign || dataSource.devCity || ''
            }${dataSource.devDistrictalign || dataSource.devDistrict || ''}`
          }}</view>
        </DescriptionItem>
        <view class="layer-popup__link" @click="nativeToWeb">详情</view>
      </view>
    </view>
  </u-popup>
</template>

<script>
import DescriptionItem from '@/components/Descriptions/DescriptionItem.vue';
import { DEVICE_TYPES } from '@/util/constants';

export default {
  name: 'DevicePopup',
  components: {
    DescriptionItem
  },
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    dataSource: {
      type: Object,
      default: () => ({})
    }
  },
  data() {
    return {
      layerVisible: false
    };
  },
  watch: {
    visible(newVal) {
      if (newVal !== this.layerVisible) {
        this.layerVisible = newVal;
      }
    }
  },
  methods: {
    nativeToWeb() {
      const item = this.dataSource;
      if (
        item.devtypeBid == DEVICE_TYPES.JKSB ||
        item.devtypeBid == DEVICE_TYPES.YRJKSB
      ) {
        uni.navigateTo({
          url: `/iotmPages/device/monitoring?id=${item.devBid}&code=${
            item.devCode
          }&name=${item.devName || '视频监控'}&sub=${item.devSubtype}&type=${
            item.devtypeBid
          }&devtypeBid=${item.devtypeBid}`,
          success(res) {
            // 通过eventChannel向被打开页面传送数据
            res.eventChannel.emit('acceptDataFromOpenerPage', item);
          }
        });
      } else if (
        item.devtypeBid === DEVICE_TYPES.XMCMB ||
        item.devtypeBid === DEVICE_TYPES.SDDWB ||
        item.devtypeBid === DEVICE_TYPES.YMDBB ||
        item.devtypeBid === DEVICE_TYPES.XMTXB
      ) {
        let deviceType = DEVICE_TYPES.SDDWB;
        if (item.devtypeBid === DEVICE_TYPES.XMCMBYJJC) {
          deviceType = DEVICE_TYPES.XMCMB;
        } else if (item.devtypeBid === DEVICE_TYPES.YMDBBYJJC) {
          deviceType = DEVICE_TYPES.YMDBB;
        } else {
          deviceType = DEVICE_TYPES.SDDWB;
        }
        const extInfo = JSON.parse(item?.extInfo || '{}');
        const time = extInfo.collectTime ? extInfo.collectTime : '';
        uni.navigateTo({
          url: `/iotmPages/device/diseasesPest?id=${item.devBid}&code=${item.devCode}&name=${item.devName}&type=${item.devtypeBid}&deviceType=${deviceType}&time=${time}`,
          success(res) {
            // 通过eventChannel向被打开页面传送数据
            res.eventChannel.emit('acceptDataFromOpenerPage', item);
          }
        });
        return;
      } else if (item.devtypeBid === DEVICE_TYPES.SFYTJ) {
        uni.navigateTo({
          url: `/pages/views/facilitystatenew/index?devBid=${
            item.devBid
          }&code=${item.devCode}&name=${item.devName}&type=${
            item.devtypeBid
          }&devStatus=${item.devStatus}&devStatusName=${
            item.devStatusName || (item.devStatus == '1' ? '在线' : '离线')
          }`,
          success(res) {
            // 通过eventChannel向被打开页面传送数据
            res.eventChannel.emit('acceptDataFromOpenerPage', item);
          }
        });
      } else if (item.devtypeBid === DEVICE_TYPES.HPSFYTJ) {
        uni.navigateTo({
          url: `/pages/views/facilitystate/index?devBid=${item.devBid}&code=${
            item.devCode
          }&name=${item.devName}&type=${item.devtypeBid}&devStatus=${
            item.devStatus
          }&devStatusName=${
            item.devStatusName || (item.devStatus == '1' ? '在线' : '离线')
          }`,
          success(res) {
            // 通过eventChannel向被打开页面传送数据
            res.eventChannel.emit('acceptDataFromOpenerPage', item);
          }
        });
      } else if (
        item.devtypeBid === DEVICE_TYPES.DZM ||
        item.devtypeBid === DEVICE_TYPES.DZM2 ||
        item.devtypeBid === DEVICE_TYPES.XZM
      ) {
        uni.navigateTo({
          url: `/sicsPages/gate/detail?devBid=${item.devBid}&code=${item.devCode}&name=${item.devName}&type=${item.devtypeBid}`,
          success(res) {
            // 通过eventChannel向被打开页面传送数据
            res.eventChannel.emit('acceptDataFromOpenerPage', item);
          }
        });
      } else if (item.devtypeBid === DEVICE_TYPES.SWJ) {
        uni.navigateTo({
          url: `/iotmPages/device/detail?id=${item.devBid}&code=${item.devCode}&name=${item.devName}&type=${item.devtypeBid}`,
          success(res) {
            // 通过eventChannel向被打开页面传送数据
            res.eventChannel.emit('acceptDataFromOpenerPage', item);
          }
        });
      } else if (
        item.devtypeBid === DEVICE_TYPES.CBD ||
        item.devtypeBid === DEVICE_TYPES.SDCBD ||
        item.devtypeBid == DEVICE_TYPES.CQXXCJ ||
        item.devtypeBid == DEVICE_TYPES.CQXXCJVI ||
        item.devtypeBid === DEVICE_TYPES.GKCBD ||
        item.devtypeBid === DEVICE_TYPES.XCT
      ) {
        uni.navigateTo({
          url: `/iotmPages/device/pestDetail?id=${item.devBid}&code=${item.devCode}&name=${item.devName}&type=${item.devtypeBid}`,
          success(res) {
            // 通过eventChannel向被打开页面传送数据
            res.eventChannel.emit('acceptDataFromOpenerPage', item);
          }
        });

        return;
      } else if (item.devtypeBid === DEVICE_TYPES.JKSB) {
        uni.navigateTo({
          url: `/iotmPages/device/monitoring?id=${item.devBid}&code=${
            item.devCode
          }&name=${item.devName || '视频监控'}&type=${item.devtypeBid}&sub=${
            item.devSubtype
          }&devtypeBid=${item.devtypeBid}`,
          success(res) {
            // 通过eventChannel向被打开页面传送数据
            res.eventChannel.emit('acceptDataFromOpenerPage', item);
          }
        });

        return;
      } else if (
        item.devtypeBid === DEVICE_TYPES.BZY ||
        item.devtypeBid === DEVICE_TYPES.DDBZY
      ) {
        uni.navigateTo({
          url: `/iotmPages/device/bzyDetail?id=${item.devBid}&code=${
            item.devCode
          }&name=${item.devName}&type=${item.devtypeBid}&devtypeBid=${
            item.devtypeBid
          }&time=${item.devUpdateddate ? item.devUpdateddate : ''}`,
          success(res) {
            // 通过eventChannel向被打开页面传送数据
            res.eventChannel.emit('acceptDataFromOpenerPage', item);
          }
        });
      } else {
        uni.navigateTo({
          url: `/iotmPages/device/detail?id=${item.devBid}&code=${
            item.devCode
          }&name=${item.devName}&type=${item.devtypeBid}&devtypeBid=${
            item.devtypeBid
          }&time=${item.devUpdateddate ? item.devUpdateddate : ''}`,
          success(res) {
            // 通过eventChannel向被打开页面传送数据
            res.eventChannel.emit('acceptDataFromOpenerPage', item);
          }
        });
      }
    },
    layerClose() {
      this.$emit('update:visible', false);
      this.$emit('close');
    },
    layerOpen() {
      this.$emit('layerOpen');
    }
  }
};
</script>

<style lang="scss" scoped>
.layer-popup {
  background-color: #fff;

  &__header {
    position: relative;
    height: 96rpx;
    padding: 0 32rpx;
    color: #fff;
    border-bottom: 1rpx solid #e4e7ed;
  }

  &__title {
    text-align: left;
    font-size: 32rpx;
    line-height: 96rpx;
    color: #042118;
    max-width: 80%;
  }

  &__close {
    position: absolute;
    top: 0;
    right: 0;
    padding: 20rpx;
    color: #4e6961;
  }

  &__content {
    padding: 32rpx;
    background-color: #fff;
  }

  &__footer {
    display: flex;
    justify-content: center;
    padding: 16rpx 32rpx;
    background-color: #fff;
    box-shadow: 0 -2px 4px 0 #0000001a;
  }

  &__link {
    color: #14a478;
    font-size: 28rpx;
    text-align: center;
    line-height: 40rpx;
    margin-top: 16rpx;
  }
}
</style>