bigDataApp/pages/cb/equip-detail/equip-detail-new.vue

<template>
  <view>
    <view class="title">基本信息</view>
    <view class="info">
      <view class="device-id" @click="copy(equipInfo)">
        <image
          class="logo"
          :src="`${$imageURL}/bigdata_pc/equipdistribute/${equipInfo.type}.png`"
          mode=""
        ></image>
        {{ equipInfo.imei || equipInfo.device_id }}
        <image
          :src="$imageURL+'/bigdata_app/image/environment/fuzhi.png'"
          mode=""
          class="tishi"
        >
        </image>
        <view
          :class="[
            'float-right',
            'yficonfont',
            equipInfo.is_online == 1 ? 'on icon-zaixian' : 'off icon-lixian',
          ]"
        >
          {{ equipInfo.is_online == 1 ? '在线' : '离线' }}
        </view>
      </view>
      <view class="info-list">
        <span class="float-left">设备名称：</span>
        <span class="float-right">{{ equipInfo.device_name }}</span>
      </view>
      <view class="info-list" v-if="equipInfo.type == 32">
        <span class="float-left">诱虫量：</span>
        <span class="float-right">{{
          equipInfo.bug_count ? equipInfo.bug_count.join('/') : '0/0/0'
        }}</span>
      </view>
      <view class="info-list">
        <span class="float-left">最新上报时间：</span>
        <span class="float-right">{{
          equipInfo.addtime || equipInfo.uptime | timeFormat
        }}</span>
      </view>
      <view class="info-list">
        <span class="float-left">设备地址：</span>
        <span class="float-right">{{
          equipInfo.address ? equipInfo.address : '--'
        }}</span>
      </view>
      <view
        class="info-list"
        v-if="equipInfo.type == 34"
        @click="operate('jd')"
      >
        <span class="float-left">卷带到期时间</span>
        <span> </span>
        <span class="float-right">
          <span v-if="equipInfo.jd_expire_time > 0">
            {{ equipInfo.jd_expire_time | timeFormat }}
          </span>
          <span v-else> 暂未设置卷带 </span>
          <u-icon
            class="arrow"
            name="arrow-right"
            color="#666666"
            size="26"
          ></u-icon>
        </span>
      </view>
      <view
        class="info-list"
        v-if="equipInfo.type == 33"
        @click="operate('sb')"
      >
        <span class="float-left">色板到期时间</span>
        <span> </span>
        <span class="float-right">
          <span v-if="equipInfo.sban_expire_time > 0">
            {{ equipInfo.sban_expire_time | timeFormat }}
          </span>
          <span v-else> 暂未设置色板 </span>
          <u-icon
            class="arrow"
            name="arrow-right"
            color="#666666"
            size="26"
          ></u-icon>
        </span>
      </view>
      <view
        class="info-list"
        v-if="
          equipInfo.type == 32 || equipInfo.type == 33 || equipInfo.type == 34
        "
        @click="operate('yx')"
      >
        <span class="float-left">诱芯到期时间</span>
        <span> </span>
        <span class="float-right">
          <span v-if="equipInfo.xy_expire_time > 0">
            {{ equipInfo.xy_expire_time | timeFormat }}
          </span>
          <span v-else> 暂未设置诱芯 </span>
          <u-icon
            class="arrow"
            name="arrow-right"
            color="#666666"
            size="26"
          ></u-icon>
        </span>
      </view>

      <u-calendar
        v-model="calendar_show"
        mode="date"
        :max-date="date"
        @change="timeChange($event)"
      >
      </u-calendar>
      <u-toast ref="toast" />
    </view>
    <view class="title">基本操作</view>
    <view class="newState">
      <view class="item" v-for="item in curEquip" @click="partClick(item.path)">
        <view class="item_info_img">
          <image
            :src="$imageURL+'/bigdata_app' + item.icon"
            mode="widthFix"
          ></image>
        </view>
        <view class="info-text">
          {{ item.tex }}
        </view>
      </view>
    </view>
    <view class="title">实时状态</view>
    <view class="newtishi" v-if="dataloadingtf">
      <p class="dataloading">加载中</p>
    </view>
    <view class="newtishi" v-else-if="newtishitf"> 暂无数据 </view>
    <view class="newState" v-else>
      <view class="item" v-for="item in curState">
        <view class="item_info_img">
          <image
            :src="$imageURL+'/bigdata_app' + item.icon"
            mode="widthFix"
          ></image>
        </view>
        <view class="info-con">
          <view class="active">
            {{ item.value | formatValue(item.txt, type) }}
          </view>
          <view class="val">
            {{ item.txt }}
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import equipState from '../../../static/js/equipState_dict.json';
import {
  QueryPermission,
  getPermissionById,
  getUserPermission,
} from '../../../util/QueryPermission.js';
export default {
  data() {
    return {
      fieldstyle: {
        border: '2rpx solid #f6f6f6',
        'border-radius': '24px',
        'padding-left': '20rpx',
        'background-color': '#f6f6f6',
      },
      city: '',
      type: null, //设备类型
      device_status: null,
      equipInfo: {},
      cbd: [],
      newState: {}, //设备最新状态
      setTimeShow: false,
      calendar_show: false,
      culErr: '',

      decoy: '',
      newtishitf: false, //暂无数据提示
      dataloadingtf: true, //加载中提示
      date: '', //日历最大可选日期
      operateType: '',
    };
  },
  computed: {
    curEquip() {
      this.cbd = [
        {
          icon: '/image/cb/4.png',
          tex: '设备控制',
          path: '/pages/cb/cbd/equip-set/equip-set-new',
          tf: true,
        },
        {
          icon: '/image/cb/6.png',
          tex: 'sim卡详情',
          path: '/pages/prevention/sim',
          tf: true,
        },
        {
          icon: '/image/environment/7.png',
          tex: '一键报修',
          path: '/pages/afterSale/addafter',
          tf: true,
        },
      ];
      let permission = getPermissionById(
        getUserPermission(),
        this.equipInfo.pur_id
      );
      permission.forEach((item) => {
        if (item.purview_name == '查看图片') {
          this.cbd.unshift({
            icon: '/image/cb/1.png',
            tex: item.purview_name,
            path: '/pages/cb/cbd/equip-set/photo',
            tf: true,
          });
        } else if (item.purview_name == '数据详情') {
          this.cbd.unshift({
            icon: '/image/cb/2.png',
            tex: item.purview_name,
            path: '/pages/cb/cbd/equip-set/newhistoryfile',
            tf: true,
          });
        } else if (item.purview_name == '分析') {
          this.cbd.unshift({
            icon: '/image/cb/3.png',
            tex: item.purview_name,
            path: '/pages/cb/cbd/equip-set/new-analyse',
            tf: true,
          });
        }
      });
      return this.cbd;
    },
    curState() {
      return [
        {
          icon: '/image/cb/icon02.png',
          txt: '在线状态',
          value: this.newState.status,
        },
        {
          icon: '/image/cb/icon05.png',
          txt: '开关状态',
          value: Number(this.newState.ds) == 1 ? '开机' : '关机',
        },
        {
          icon: '/image/cb/icon08.png',
          txt: '环境温度(℃)',
          value: this.newState.tem,
        },
        {
          icon: '/image/cb/icon07.png',
          txt: '环境湿度(%)',
          value: this.newState.hum,
        },
        {
          icon: '/image/prevention/icon16.png',
          txt: '信号强度',
          value: this.newState.signal,
        },
        {
          icon: '/image/cb/icon12.png',
          txt: '设备版本',
          value: this.newState.dver_num,
        },
        {
          icon: '/image/cb/icon17.png',
          txt: '雨控状态',
          value: this.newState.rps,
        },
        {
          icon: '/image/cb/icon14.png',
          txt: '温控状态',
          value: this.newState.tps,
        },
        {
          icon: '/image/cb/icon06.png',
          txt: '光控状态',
          value: this.newState.lps,
        },
        {
          icon: '/image/cb/icon18.png',
          txt: '控制模式',
          value: this.newState.control,
        },
      ];
    },
    operateOptions() {
      return {
        yx: {
          title: '诱芯',
          url: '/api/api_gateway?method=new_gateway.device_info.youxin',
          field: 'xy_expire_time',
        },
        sb: {
          title: '色板',
          url: '/api/api_gateway?method=new_gateway.device_info.sban',
          field: 'sban_expire_time',
        },
        jd: {
          title: '卷带',
          url: '/api/api_gateway?method=new_gateway.device_info.syone_jd',
          field: 'jd_expire_time',
        },
      };
    },
  },
  filters: {
    equipType(type) {
      switch (type) {
        case 3:
          return '虫情测报灯';
        case 7:
          return '孢子仪';
        case 4:
          return '性诱测报';
      }
    },
    formatValue(val, a1, a2) {
      if (a2 == 4 && a1 == '电池状态') {
        switch (Number(val)) {
          case 0:
            return '正常';
            break;
          case 1:
            return '欠压';
            break;
          case 2:
            return '过压';
            break;
        }
      } else {
        return val ? val : '无';
      }
    },
  },
  onLoad(option) {
    this.equipInfo = JSON.parse(option.info);
    this.getDeviceStatus();
    this.type =
      Number(this.equipInfo.type) ||
      Number(this.equipInfo.equip_type) ||
      Number(this.equipInfo.device_type_id);
    this.equipInfo.type = this.type;
    this.device_status = this.equipInfo.is_online;

    this.getState();

    // this.selectaddress(Number(this.equipInfo.lat), Number(this.equipInfo.lng))
    var times = new Date();
    this.date =
      times.getFullYear() +
      1 +
      '-' +
      Number(times.getMonth() + 1) +
      '-' +
      times.getDate();
  },
  methods: {
    async getDeviceStatus() {
      const res = await this.$myRequest({
        url: '/api/api_gateway?method=new_gateway.device_info.devices_list',
        data: {
          device_type_id: this.equipInfo.type,
          id: this.equipInfo.imei || this.equipInfo.device_id,
          page: 1,
          size: 999,
        },
      });
      let newRes = res.device[0];
      this.equipInfo = { ...this.equipInfo, ...newRes };
      console.log('响应', this.equipInfo);
    },
    async getState() {
      this.dataloadingtf = true;
      const res = await this.$myRequest({
        url: '/api/api_gateway?method=new_gateway.device_info.device_status',
        data: {
          device_type_id: this.equipInfo.type,
          id: this.equipInfo.d_id,
        },
      });
      this.newState = res;
      this.dataloadingtf = false;
      console.log('res', res);
    },

    partClick(path) {
      console.log(path);
      var device_id = this.equipInfo.device_id || this.equipInfo.imei;
      uni.navigateTo({
        url:
          path +
          '?d_id=' +
          this.equipInfo.d_id +
          '&device_id=' +
          device_id +
          '&device_type=' +
          this.type,
      });
    },

    operate(type) {
      this.calendar_show = true;
      this.operateType = type;
    },
    timeChange(e, filed) {
      // // 根据type_id，执行相应的操作

      // let typeId = this.equipInfo.type
      // let postData = {}
      // if(typeId===32){
      // 	// 添加诱芯
      // }else if(typeId === 33){
      // 	// 添加诱芯，更换色板
      // 	this.sbSubmit(e.result)
      // }else if(typeId === 34){
      // 	// 添加诱芯，更换卷带
      // 	this.jdSubmit(e.result)
      // }
      this.yxSubmit(e.result);
    },

    async yxSubmit(time) {
      let { title, url, field } = this.operateOptions[this.operateType];
      if (!time) {
        this.$refs.toast.show({
          title: '请填写' + title + '到期时间!',
          type: 'warning',
        });
        return false;
      }
      let postData = {
        device_type_id: this.equipInfo.type,
        id: this.equipInfo.device_id,
      };
      postData[field] = +new Date(time) / 1000;
      const res = await this.$myRequest({
        url: url,
        data: postData,
      });
      if (res) {
        this.$refs.toast.show({
          title: title + '时间设置成功!',
          type: 'success',
        });
        this.getDeviceStatus();
      }
    },
    // 色板
    async sbSubmit(time) {
      if (!time) {
        this.$refs.toast.show({
          title: '请填写色板到期时间!',
          type: 'warning',
        });
        return false;
      }
      const res = await this.$myRequest({
        url: '/api/api_gateway?method=new_gateway.device_info.sban',
        data: {
          device_type_id: this.equipInfo.type,
          id: this.equipInfo.device_id,
          sban_expire_time: +new Date(time) / 1000,
        },
      });
      if (res) {
        this.$refs.toast.show({
          title: '设置成功!',
          type: 'success',
        });
        this.getDeviceStatus();
      }
    },
    async jdSubmit(time) {
      if (!time) {
        this.$refs.toast.show({
          title: '请填写卷带到期时间!',
          type: 'warning',
        });
        return false;
      }
      const res = await this.$myRequest({
        url: '/api/api_gateway?method=new_gateway.device_info.syone_jd',
        data: {
          device_type_id: this.equipInfo.type,
          id: this.equipInfo.device_id,
          jd_expire_time: +new Date(time) / 1000,
        },
      });
      if (res) {
        this.$refs.toast.show({
          title: '设置成功!',
          type: 'success',
        });
        this.getDeviceStatus();
      }
    },
    selectaddress(lat, lng) {
      //获取分布位置
      uni.request({
        type: 'GET',
        url:
          'https://restapi.amap.com/v3/geocode/regeo?output=JSON&location=' +
          lng +
          ',' +
          lat +
          '&key=27273b81090f78759e4057f94474516f&radius=1000&extensions=all',
        dataType: 'json',
        complete: (res) => {
          console.log(res);
          this.city = res.data.regeocode.formatted_address;
        },
      });
    },
    copy(item) {
      console.log(item);
      uni.setClipboardData({
        data: item.imei || item.device_id,
        success: function () {
          console.log('success');
        },
      });
    },
  },
};
</script>

<style lang="scss">
page {
  padding: 0rpx 48rpx;
  box-sizing: border-box;
  background: #f7f7f7;
  .title {
    color: #999999;
    margin: 32rpx 0;
  }
  .logo {
    width: 36rpx;
    height: 36rpx;
    margin-right: 12rpx;
    position: relative;
    top: 8rpx;
  }
  .device-id {
    height: 60rpx;
    line-height: 60rpx;
    margin-bottom: 18rpx;
    color: #5c5c5c;
    .float-right {
      float: right;
      width: 88px;
      height: 30px;
      text-align: center;
      position: absolute;
      top: 0;
      right: 0;
      border-top-right-radius: 24rpx;
    }
  }

  .on {
    background-image: url('/static/images/cb/online.png');
    color: #fff;
  }

  .off {
    background-image: url('/static/images/cb/outline.png');
    color: #999999;
  }
  .info {
    position: relative;
    padding: 8rpx 32rpx 32rpx 32rpx;

    line-height: 50rpx;
    font-size: 26rpx;
    border-radius: 24rpx;

    background-color: #fff;

    box-sizing: border-box;
    width: 100%;
    .info-list {
      overflow: hidden;
      font-size: 12px;
      .float-right {
        float: right;
        color: #666;
        .arrow {
          margin-left: 10rpx;
        }
      }
      .float-left {
        float: left;
        color: #999;
      }
    }
    .tishi {
      width: 28rpx;
      height: 28rpx;
      margin: 0rpx 0 0 12rpx;
      position: relative;
      top: 6rpx;
    }
  }

  .tit {
    font-weight: 800;
    height: 50rpx;
    font-size: 30rpx;
    margin-bottom: 20rpx;
    display: flex;
    justify-content: space-between;

    .span {
      color: #6e6c76;
      font-size: 24rpx;
      display: flex;
      justify-content: space-between;
      /* margin-top: 12rpx; */
    }
  }

  .newtishi {
    width: 90%;
    margin: 0 auto;
    text-align: center;
    padding-top: 40rpx;
    font-size: 32rpx;

    .dataloading:after {
      overflow: hidden;
      display: inline-block;
      vertical-align: bottom;
      animation: ellipsis 2s infinite;
      content: '\2026';
    }

    @keyframes ellipsis {
      from {
        width: 2px;
      }

      to {
        width: 15px;
      }
    }
  }

  .newState {
    display: flex;
    flex-wrap: wrap;
    text-align: center;
    margin: 0 -10rpx;

    .item {
      display: flex;
      flex-wrap: nowrap;
      margin: 10rpx;
      width: 316rpx;
      justify-content: flex-start;
      padding: 20rpx 10rpx;
      box-sizing: border-box;
      border-radius: 4px;

      background-color: #fff;
      font-size: 24rpx;
      .info-text {
        line-height: 76rpx;
        padding-left: 30rpx;
        font-size: 14px;
        color: #666666;
      }
      .info-con {
        padding-left: 30rpx;
        text-align: left;
        line-height: 40rpx;
        color: #666666;
        .active {
          font-size: 36rpx;
        }
        .val {
          font-size: 24rpx;
        }
      }

      .item_info_img {
        width: 30%;
        text-align: center;

        image {
          width: 64rpx;
          height: 64rpx;
          margin-top: 10rpx;
        }
      }
    }
  }

  .btn-box {
    text-align: center;
    padding: 30rpx;
  }

  .field {
    ::v-deep .uni-input-input {
      border: 2rpx solid #ff0000;
      border-radius: 24rpx;
      width: 140px;
      padding-left: 10rpx;
      box-sizing: border-box;
    }
  }
}

::v-deep .u-calendar__action {
  display: flex;
  justify-content: space-around;

  .u-calendar__action__text {
    line-height: 25px;
  }
}

.red {
  color: rgb(235, 103, 101);
}
</style>