bigDataApp/pages/distribution/components/AppPopup.vue

<template>
  <u-popup
    :show="layerVisible"
    :safeAreaInsetBottom="true"
    @close="layerClose"
    :round="8"
    @open="layerOpen"
  >
    <view class="layer-popup">
      <view class="layer-popup__header" @click="layerClose">
        <u-icon
          name="arrow-down"
          size="36rpx"
          color="#4e6961"
          class="layer-popup__close"
        ></u-icon>
      </view>
      <view class="layer-popup__content">
        <u-row :gutter="12">
          <u-col :span="3" v-for="item in appList" :key="item.menuId">
            <view class="app-card" @click="toNativePage(item)">
              <image
                mode="aspectFit"
                :src="getDeviceTypeIcon(item)"
                class="app-card__img"
              />
              <view class="app-card__text">{{ item.menuName || '' }}</view>
            </view>
          </u-col>
        </u-row>
        <view
          @click="handleSetting"
          v-if="!appList.length"
          class="layer-popup__empty"
          ><text>暂无应用，请先去</text><text class="primary">设置</text></view
        >
      </view>
      <view class="layer-popup__placeholder"></view>
    </view>
  </u-popup>
</template>

<script>
// 玉米大斑病
import cornLeafBlight from '../../assets/cornLeafBlight.png';
// 水肥
import facilitystatenew from '../../assets/facilitystatenew.png';
// 高空测报灯
import highInsectLamp from '../../assets/highInsectLamp.png';
// 中捷四方性诱
import inducer from '../../assets/inducer.png';
// 性诱2
import inducer2 from '../../assets/inducer2.png';
// 性诱3
import inducer3 from '../../assets/inducer3.png';
// 杀虫灯
import insecticidalLamp from '../../assets/insecticidalLamp.png';
// 虫情测报灯
import insectLamp from '../../assets/insectLamp.png';
// 虫情信息采集VI
import insectLampvi from '../../assets/insectLampvi.png';
// 墒情站
import moisture from '../../assets/moisture.png';
// 管式墒情站
import moisturegssq from '../../assets/moisturegssq.png';
// 管式墒情站1
import moisturegssq1 from '../../assets/moisturegssq1.png';
// 监控
import monitor from '../../assets/monitor.png';
// 水稻稻瘟病
import riceBlast from '../../assets/riceBlast.png';
// 水稻测报灯
import riceInsectLamp from '../../assets/riceInsectLamp.png';
// 孢子仪
import sporograph from '../../assets/sporograph.png';
// 风吸式杀虫灯
import suctionKillinglamp from '../../assets/suctionKillinglamp.png';
// 景观式杀虫灯
import suctionKillinglampJg from '../../assets/suctionKillinglampJg.png';
// 吸虫塔
import trematodeTower from '../../assets/trematodeTower.png';
// 气象站
import weatherStation from '../../assets/weatherStation.png';
// 小麦赤霉病
import wheatScab from '../../assets/wheatScab.png';
// 水位计
import waterMeasure from '../../assets/water-measure.png';
// 大闸门
import waterGate from '../../assets/water-gate.png';
// 农事作业
import fms from '../../assets/fms.png';
// 采收作业
import harvestingoperation from '../../assets/harvestingoperation.png';
// 智能孢子仪1.0
import sporographnew from '../../assets/sporographnew.png';
// 基地图标
import landIcon from '../../assets/landIcon.png';
// 地块列表图标
import blockIcon from '../../assets/blockIcon.png';
// 气象预警
import weatherWarning from '../../assets/weatherWarning.png';
import weatherMenuIcon from '../../assets/weather.png';

// 农技服务
import atsIcon from '../../assets/ats.png';
// 巡检管护
import inspectionManage from '../../assets/inspectionManage.png';

export default {
  name: 'DevicePopup',
  components: {},
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    dataSource: {
      type: Object,
      default: () => ({})
    }
  },
  data() {
    return {
      layerVisible: false,
      appList: []
    };
  },
  watch: {
    visible(newVal) {
      if (newVal !== this.layerVisible) {
        this.layerVisible = newVal;

        if (newVal) {
          this.initData();
        }
      }
    }
  },
  methods: {
    initData() {
    },
    layerClose() {
      this.$emit('update:visible', false);
      this.$emit('close');
    },
    layerOpen() {
      this.$emit('layerOpen');
    },
    handleSetting() {
      this.layerClose();
      uni.setStorageSync('serverType', 'setting');
      uni.switchTab({
        url: '/pages/iotm/server'
      });
    },
    toNativePage(item) {
      console.log(item, 'item');
      const menuRemark = JSON.parse(item?.menuRemark || "{}");
      const typeCode = menuRemark?.typeCode || '';
      if(typeCode === 'pis'){
        uni.setStorageSync('serverType', 'pis');
        uni.switchTab({
          url: '/pages/iotm/server'
        });

        return
      }
      uni.navigateTo({
        url:
          `${item.menuPath}?menuId=${item.menuOrginPid}&currentMenuId=${item.menuOrginid}&title=${item.menuOrginPname}` ||
          ''
      });
    },
    getDeviceTypeIcon(row) {
      console.log(row, 'row');
      const menuRemark = row?.menuRemark && JSON.parse(row?.menuRemark || '');
      let typeCodeArr = menuRemark?.typeCode || '';
      const typeCode = typeCodeArr.split(',')[0];

      const iconMap = {
        HS_YBQ_DBB00001: cornLeafBlight,
        SF00001: facilitystatenew,
        SF00002: facilitystatenew,
        CQCBD00003: highInsectLamp,
        XYCB00005: inducer,
        XYCB00004: inducer2,
        XYCB00003: inducer3,
        SCD00001: insecticidalLamp,
        CQCBD00001: insectLamp,
        CQCBD00005: insectLamp,
        CQCBD00006: insectLampvi,
        SQZ00001: moisture,
        SQZ00002: moisture,
        SQZ00003: moisturegssq,
        SQZ00004: moisturegssq1,
        JK00001: monitor,
        JK00002: monitor,
        HS_YBQ_DWB00001: riceBlast,
        CQCBD00002: riceInsectLamp,
        BZY00001: sporograph,
        BZY00002: sporographnew,
        SCD00002: suctionKillinglamp,
        SCD00003: suctionKillinglampJg,
        CQCBD00004: trematodeTower,
        QXZ00001: weatherStation,
        QXZ00002: weatherStation,
        HS_YBQ_CMB00001: wheatScab,
        HS_YBQ_TXB00001: wheatScab,
        SWJ00001: waterMeasure,
        SZ00001: waterGate,
        SZ00002: waterGate,
        SZ00003: waterGate,
        FM00001: fms,
        CS00001: harvestingoperation,
        land00001: landIcon,
        block00001: blockIcon,
        QX00001: weatherWarning,
        QX00002: weatherMenuIcon,
        ATS00001: atsIcon,
        pis: inspectionManage
      };

      return iconMap[typeCode] || '';
    }
  }
};
</script>

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

  &__header {
    position: relative;
    width: 180rpx;
    height: 60rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
    margin-top: -60rpx;
    background-color: #fff;
    border-radius: 16rpx 16rpx 0 0;
  }

  &__close {
  }

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

  &__placeholder {
    height: var(--window-bottom);
  }

  &__empty {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-size: 32rpx;
    padding: 32rpx;
    color: #9ba6a3;

    .primary {
      color: #14a478;
    }
  }
}

.app-card {
  text-align: center;

  &__img {
    width: 112rpx;
    height: 112rpx;
    margin: 0 auto;
    border-radius: 16rpx;
    margin-bottom: 16rpx;
  }

  &__text {
    font-size: 28rpx;
    color: #042118;
    text-align: center;
  }
}
</style>