bigDataApp/pages/cb/xylps/detail.vue

<template>
  <view class="bigBox">
    <u-tabs
      :list="list"
      :is-scroll="false"
      :current="current"
      @change="change"
      active-color="#14A478"
    ></u-tabs>
    <view class="infoBox" v-if="current == 0">
      <view :class="['info', equipInfo.status == 1 ? 'on' : 'off']">
        <p @click="copy(equipInfo.imei || equipInfo.device_id || equipInfo.id)">
          设备ID：{{ equipInfo.imei || equipInfo.device_id || equipInfo.id }}
          <image
            :src="$imageURL+'/bigdata_app/image/environment/fuzhi.png'"
            mode=""
            class="tishi"
          >
          </image>
        </p>
        <p>
          设备名称：{{
            equipInfo.device_name || equipInfo.name || '无'
          }}
        </p>
        <p>最新上报时间：{{ equipInfo.addtime | timeFormat }}</p>
        <p>最新地址：{{ equipInfo.address }}</p>
        <p class="fillin">诱芯名称：{{ equipInfo.decoy }}</p>
        <!-- <p @click="glass_show=true">诱芯更换时间：<span style="margin:0 20rpx;">{{yxchangetime}}</span><u-icon
						name="edit-pen" color="#f0ad4e" size="28"></u-icon></p> -->
        <p>诱芯到期时间：{{ equipInfo.xy_expire }}</p>
        <!-- <u-calendar v-model="glass_show" mode="date" :max-date="date" @change="timeChange"></u-calendar>
				<u-calendar v-model="glass_showtwo" mode="date" :max-date="date" @change="timeChangetwo"></u-calendar> -->
      </view>
      <view class="cardInfo">
        <text class="title">设备控制</text>
        <view class="controlCard">
          <view class="preBtn" v-for="btn in btnList" :key="btn.class">
            <view :class="`btnBox ${btn.class}`" @click="btnFun(btn.code)">
              <text :class="btn.icon"></text>
            </view>
            <view>{{ btn.text }}</view>
          </view>
        </view>
      </view>
      <view class="cardInfo">
        <text class="title">监测数据</text>
        <view class="controlCard noBg">
          <u-row gutter="30" justify="between">
            <u-col
              span="5.8"
              class="preInfo"
              v-for="btn in dataList"
              :key="btn.icon"
            >
              <view class="btnBox">
                <text :class="btn.icon"></text>
              </view>
              <view class="textBox">
                <view>
                  {{ newDataObj[btn.unit] || ''}}
                </view>
                <view class="name">{{ btn.text }}</view>
              </view>
            </u-col>
          </u-row>
        </view>
      </view>
      <view class="cardInfo" v-if="JSON.stringify(deviceObj) != '{}'">
        <text class="title">设备信息</text>
        <view class="controlCard noBg">
          <u-cell-group>
            <u-cell-item
              v-for="btn in deviceDataList"
              :key="btn.text"
              :title="btn.text"
              :value="deviceObj[btn.key]"
              :arrow="false"
              :border-bottom="true"
            ></u-cell-item>
          </u-cell-group>
        </view>
      </view>
    </view>
    <!-- 数据统计 -->
    <view class="infoBox" v-if="current == 1">
      <view class="cardInfo">
        <text class="title">统计数据</text>
        <view class="chartBox">
          <view class="timeBox">
            <u-icon name="calendar" size="30" class="iconBox"></u-icon>
            <view class="text" @click="showRangeTime = true">{{
              photoTimeRangeText
            }}</view>
            <u-icon
              name="arrow-right"
              v-if="photoTimeRangeText == '请选择日期'"
            ></u-icon>
            <u-icon name="close" v-else @click="clearTimeFun('chart')"></u-icon>
          </view>
          <u-calendar
            v-model="showRangeTime"
            mode="range"
            range-color="#999"
            btn-type="success"
            active-bg-color="#0BBC58"
            range-bg-color="rgba(11,188,88,0.13)"
            @change="(e) => changePhotoTime(e, 'chart')"
          ></u-calendar>
          <canvas
            v-if="showCanvas"
            canvas-id="canvasColumnA"
            id="canvasColumnA"
            class="charts"
            @touchstart="touchLineA($event)"
            @touchmove="moveLineA($event)"
            @touchend="touchEndLineA($event)"
            disable-scroll="true"
            :style="{
              width: cWidth * pixelRatio + 'px',
              height: cHeight * pixelRatio + 'px',
              transform: 'scale(' + 1 / pixelRatio + ')',
              'margin-left': (-cWidth * (pixelRatio - 1)) / 2 + 'px',
              'margin-top': (-cHeight * (pixelRatio - 1)) / 2 + 'px',
            }"
          >
          </canvas>
          <view class="noEmpty" v-else> 暂无数据 </view>
        </view>
      </view>
      <view class="cardInfo">
        <text class="title">虫情分析</text>
        <view class="chartBox">
          <view class="pestInfo">
            <view class="pest">
              <text>害虫种类</text>
              <text class="name">{{ analyInfo.decoy }}</text>
            </view>
            <view class="pest">
              <text>日杀虫数量</text>
              <text class="name">{{ analyInfo.count }}头</text>
            </view>
            <view class="pest">
              <text>处理意见</text>
              <text class="name">{{ analyInfo.advice }}</text>
            </view>
          </view>
          <view class="pestStatus">
            <view :class="['block', analyInfo.count < 30 ? 'active' : '']">
              <view class="iconBox green">
                <text class="yficonfont icon-small"></text>
              </view>
              <view class="blueText">
                <view>平静期</view>
                <view>0-30</view>
              </view>
            </view>
            <view
              :class="[
                'block',
                analyInfo.count >= 30 && analyInfo.count < 60 ? 'active' : '',
              ]"
            >
              <view class="iconBox yellow">
                <text class="yficonfont icon-middle"></text>
              </view>
              <view class="yellowText">
                <view>始发期</view>
                <view>30-60</view>
              </view>
            </view>
            <view :class="['block', analyInfo.count >= 60 ? 'active' : '']">
              <view class="iconBox danger">
                <text class="yficonfont icon-most"></text>
              </view>
              <view class="redText">
                <view>爆发期</view>
                <view>≥60</view>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
    <!-- 图片列表 -->
    <view class="infoBox" v-if="current == 2">
      <view class="imgList">
        <view
          class="preImg"
          v-for="(img, index) in photoList"
          :key="img.addtime"
        >
          <text class="text">{{ img.addtime }}</text>
          <u-image
            width="100%"
            height="226rpx"
            :src="img.addr"
            @click="examine(index)"
          ></u-image>
        </view>
        <u-loadmore
          class="loadBox"
          :status="loadStatus"
          :icon-type="iconType"
          :load-text="loadText"
          @loadmore="loadMore"
        />
      </view>
      <view class="timeBox">
        <u-icon name="calendar" size="30" class="iconBox"></u-icon>
        <view class="text" @click="showRangeTime = true">{{
          photoTimeRangeText
        }}</view>
        <u-icon
          name="arrow-right"
          v-if="photoTimeRangeText == '请选择日期'"
        ></u-icon>
        <u-icon name="close" v-else @click="clearTimeFun('photo')"></u-icon>
      </view>
      <u-calendar
        v-if="showRangeTime"
        v-model="showRangeTime"
        mode="range"
        range-color="#999"
        btn-type="success"
        active-bg-color="#0BBC58"
        range-bg-color="rgba(11,188,88,0.13)"
        @change="(e) => changePhotoTime(e, 'photo')"
      ></u-calendar>
    </view>
    <!-- 设备控制 -->
    <view class="bgColor" v-if="current == 3">
      <u-form :model="equipContrlForm1" :label-width="180">
        <view class="" v-if="myuser_type">
          <u-divider>管理员操作</u-divider>
          <u-form-item label="升级文件地址" :label-width="220">
            <u-input v-model="ota_url" />
          </u-form-item>
          <u-button
            size="mini"
            type="primary"
            @click="equipBtnControl('reboot')"
            >重启</u-button
          >
          <u-button
            size="mini"
            class="btn"
            type="primary"
            @click="equipBtnControl('update')"
            >升级</u-button
          >
          <u-divider>设备控制</u-divider>
        </view>
        <!-- <u-form-item label="设备名称"><u-input v-model="equipContrlForm1.devname" /></u-form-item> -->
        <u-form-item label="高压包开关状态" :label-width="240">
          <u-radio-group v-model="equipContrlForm1.dev_work_onoff">
            <u-radio :name="1">开</u-radio>
            <u-radio :name="0">关</u-radio>
          </u-radio-group>
        </u-form-item>
        <u-form-item label="工作模式" :label-width="240">
          <u-radio-group v-model="equipContrlForm1.dev_work_mode">
            <u-radio :name="1">自动</u-radio>
            <u-radio :name="2">手动</u-radio>
            <u-radio :name="3">定时</u-radio>
          </u-radio-group>
        </u-form-item>
        <u-form-item
          label="定时时长"
          :label-width="240"
          v-if="equipContrlForm1.dev_work_mode == 3"
        >
          <text @click="equipContrlForm1.show_st = true">{{
            equipContrlForm1.st
          }}</text
          >-
          <text @click="equipContrlForm1.show_et = true">{{
            equipContrlForm1.et
          }}</text>
          <u-picker
            mode="time"
            v-model="equipContrlForm1.show_st"
            :default-time="equipContrlForm1.st"
            :params="params"
            @confirm="(e) => changeControlTime(e, 'st')"
          ></u-picker>
          <u-picker
            mode="time"
            v-model="equipContrlForm1.show_et"
            :default-time="equipContrlForm1.et"
            :params="params"
            @confirm="(e) => changeControlTime(e, 'et')"
          ></u-picker>
        </u-form-item>
        <!-- <u-form-item label="SIM卡号" :label-width="200">
					<u-input v-model="equipContrlForm1.sim" />
				</u-form-item> -->
        <u-form-item label="心跳间隔(S)" :label-width="200">
          <u-input v-model="equipContrlForm1.heart_time" type="number" />
        </u-form-item>
        <u-form-item label="太阳能电压阈值(V)" :label-width="280">
          <u-input v-model="equipContrlForm1.solar_threshold" type="number" />
        </u-form-item>
        <u-form-item label="太阳能电压最大值(V)" :label-width="300">
          <u-input v-model="equipContrlForm1.solarmax" type="number" />
        </u-form-item>
        <u-form-item label="数据上传频率(min)" :label-width="300">
          <u-input v-model="equipContrlForm1.upload_time" type="number" />
        </u-form-item>
        <u-button size="medium " type="primary" @click="equipControlSubm"
          >保存</u-button
        >
      </u-form>
    </view>
    <!-- 拍照定时 -->
    <u-modal
      v-model="photoTimeLayer"
      width="80%"
      :async-close="true"
      :show-cancel-button="true"
      @confirm="devicePhotoTime"
    >
      <view class="slot-content">
        <view class="expireBox">
          <u-tag text="注意：00:00为不拍照" mode="dark" type="warning" />
          <u-form>
            <u-form-item
              :label="`时间${index + 1}`"
              :label-width="180"
              v-for="(time, index) in photoTimeArray"
              :key="time.key"
            >
              <text @click="time.show = true">{{ time.value }}</text>
              <u-picker
                mode="time"
                v-model="time.show"
                :default-time="time.value"
                :params="params"
                @confirm="(e) => changeSnapTime(e, time.key, index)"
              ></u-picker>
            </u-form-item>
            <!-- <u-button size="mini" type="primary" @click="addTime(photoTimeArray.length)">添加</u-button> -->
          </u-form>
        </view>
      </view>
    </u-modal>
    <!-- 信息素弹框 -->
    <u-modal
      v-model="expireInfoLayer"
      width="90%"
      :async-close="true"
      :show-cancel-button="true"
      @confirm="changeExpireFun"
    >
      <view class="slot-content">
        <view class="expireBox">
          <u-form ref="uForm">
            <u-form-item label="信息素名称" :label-width="180">
              <u-input
                v-model="decoy"
                type="text"
                :border="true"
                placeholder="请输入信息素名称"
              />
            </u-form-item>
            <u-form-item label="新信息素可使用时间" :label-width="280">
              <u-radio-group v-model="xy_expire_time">
                <u-radio
                  v-for="(item, index) in expireTimeList"
                  :key="index"
                  :name="item.value"
                >
                  {{ item.label }}
                </u-radio>
              </u-radio-group>
            </u-form-item>
          </u-form>
        </view>
      </view>
    </u-modal>
  </view>
</template>

<script>
import uCharts from '../../../components/js_sdk/u-charts/u-charts/u-charts.js';
var canvaColumnA = null;
export default {
  data() {
    return {
      myuser_type: '',
      equipInfoImei: '',
      equipInfo_d_id: '',
      btnList: [
        {
          text: '更换信息素',
          icon: 'yficonfont icon-weimingming-34',
          class: 'green',
          code: 'changeInfo',
        },
      ],
      list: [
        {
          name: '基本信息',
        },
      ],
      current: 0,
      equipInfo: {},
      dataList: [
        {
          text: '空气温度', // 中文
          unit: 'air_temp', // 对应字段
          data: '',
          icon: 'yficonfont icon-kongqiwendu', // iconclass名称
        },
        {
          text: '空气湿度',
          unit: 'air_humi',
          data: '',
          icon: 'yficonfont icon-shuizhi',
        },
        {
          text: '风力',
          unit: 'wind_force',
          isSmall: true,
          data: '',
          icon: 'yficonfont icon-fengli',
        },
        {
          text: '风向',
          unit: 'wind_dir',
          isSmall: true,
          data: '',
          icon: 'yficonfont icon-fengxiang',
        },
        {
          text: '害虫数量',
          unit: 'bugcnt',
          data: '',
          icon: 'yficonfont icon-chouchongbug',
        },
        {
          text: '光照强度',
          unit: 'light',
          data: '',
          isSmall: true,
          icon: 'yficonfont icon-qingtian',
        },
        {
          text: '降雨',
          unit: 'rain_status',
          data: '',
          icon: 'yficonfont icon-yu',
        },
        {
          text: '电池电量',
          unit: 'bat_level',
          data: '',
          icon: 'yficonfont icon-80dianliang',
        },
        {
          text: '信号强度',
          unit: 'gprs',
          data: '',
          icon: 'yficonfont icon-wifi',
        },
        {
          text: '定位信噪比',
          unit: 'cn0',
          data: '',
          isSmall: true,
          icon: 'yficonfont icon-dingwei1',
        },
        {
          text: '太阳能电压',
          unit: 'solar_voltage',
          data: '',
          icon: 'yficonfont icon-guangfuzujianshuliang',
        },
        {
          text: '蓄电池电压',
          unit: 'bat_val',
          data: '',
          icon: 'yficonfont icon-xudianchi',
        },
      ],
      dataLoading: true,
      newDataObj: {},
      deviceDataList: [
        {
          text: '设备名',
          key: 'devname',
        },
        {
          text: '设备版本号',
          key: 'version',
        },
        {
          text: '心跳间隔',
          key: 'heart_time',
        },
        {
          text: '太阳能电压阀值',
          key: 'solar_threshold',
        },
        {
          text: '太阳能电压最大值',
          key: 'solarmax',
        },
        {
          text: '数据上传频率',
          key: 'upload_time',
        },
        {
          text: '工作模式',
          key: 'dev_work_mode',
        },
        {
          text: '定时模式时间',
          key: 'dev_work_time',
        },
        {
          text: '高压包开关状态',
          key: 'dev_work_onoff',
        },
        {
          text: 'SIM卡号',
          key: 'sim',
        },
      ],
      deviceLoading: true,
      deviceObj: {},
      photoTimeArray: [],
      photoTimeLayer: false,
      expireInfoLayer: false,
      xy_expire_time: 2, // 时间
      decoy: '', // 诱芯名称
      expireTimeList: [
        {
          label: '1个月',
          value: 1,
        },
        {
          label: '2个月',
          value: 2,
        },
        {
          label: '3个月',
          value: 3,
        },
        {
          label: '4个月',
          value: 4,
        },
      ],
      params: {
        year: false,
        month: false,
        day: false,
        hour: true,
        minute: true,
        second: false,
      },
      //设备控制
      equipContrlForm1: {
        devname: '',
        heart_time: '',
        solar_threshold: '',
        solarmax: '',
        upload_time: 0,
        dev_work_mode: '',
        dev_work_timeArray: '',
        dev_work_onoff: '',
        sim: '',
        et: '',
        st: '',
        show_st: false,
        show_et: false,
        // st: '', //时控开始时间
        // et: '', //时控结束时间
        // dat_f: null ,//数据上传时间间隔
        // ds:''//开关，1开机，0关机
      },
      ota_url: '',
      photoList: [],
      photoLoading: true,
      showRangeTime: false,
      photoTimeRange: '',
      photoTimeRangeText: '请选择日期',
      page: 1,
      total: 0,
      loadStatus: '',
      iconType: 'flower',
      loadText: {
        loadmore: '点击加载更多',
        loading: '努力加载中',
        nomore: '没有更多啦~',
      },
      cWidth: '400',
      cHeight: '400',
      pixelRatio: 1,
      showCanvas: false,
      analyInfo: {
        decoy: '',
        count: '',
      },
    };
  },
  onLoad(option) {
    this.cWidth = uni.upx2px(650);
    this.cHeight = uni.upx2px(500);
    uni.getStorage({
      key: 'jurisdiction',
      success: (res) => {
        let items = JSON.parse(res.data).filter((item) => {
          return item.pur_id == 36;
        });
        var arr = items[0].children;
        for (var i = 0; i < arr.length; i++) {
          switch (arr[i].pur_id) {
            case 338:
              let newChildren = arr[i].children;
              let hasImg = newChildren.some((item) => {
                return item.pur_id == 341;
              });
              let hasControl = newChildren.some((item) => {
                return item.pur_id == 340;
              });
              if (hasImg) {
                this.list.push(
                  {
                    name: '数据分析',
                  },
                  {
                    name: '图片列表',
                  }
                );
                this.btnList.push(
                  {
                    text: '拍照定时',
                    icon: 'yficonfont icon-dingshi',
                    class: 'blue',
                    code: 'photoTime',
                  },
                  {
                    text: '一键拍照',
                    icon: 'yficonfont icon-paizhao-xianxing',
                    class: 'yellow',
                    code: 'tackPhoto',
                  }
                );
              }
              if (hasControl) {
                this.list.push({
                  name: '设备控制',
                });
                this.btnList.push({
                  text: '设备清虫',
                  icon: 'yficonfont icon-chouchongbug',
                  class: 'danger',
                  code: 'clear',
                });
              }
              break;
          }
        }
      },
    });
    const detail = JSON.parse(option.detail);
    this.equipInfoImei = detail.imei || detail.device_id || detail.id || '无';
    this.equipInfo_d_id = detail.d_id;
    this.getEquipInfo();
    // console.log(this.equipInfo);
    this.getData();
    this.getDeviceData();
    uni.getStorage({
      key: 'myuser_type',
      success: (res) => {
        if (Number(res.data) == 1) {
          this.myuser_type = true;
        }
      },
    });
  },
  methods: {
    showColumn(id, xtitle, xinfo) {
      var _self = this;
      console.log(_self.cWidth, '_self.cWidth');
      const ctx = uni.createCanvasContext(id, this);
      canvaColumnA = new uCharts({
        context: ctx,
        type: 'line',
        legend: {
          position: 'top',
        },
        fontSize: 11,
        background: '#FFFFFF',
        pixelRatio: 1,
        animation: true,
        dataLabel: false,
        categories: xtitle,
        series: xinfo,
        enableScroll: true, //开启图表拖拽功能
        xAxis: {
          disableGrid: true,
          type: 'grid',
          gridType: 'dash',
          itemCount: 4, //x轴单屏显示数据的数量，默认为5个
          scrollShow: true, //新增是否显示滚动条，默认false
          // scrollAlign: 'left', //滚动条初始位置
          scrollBackgroundColor: '#F7F7FF', //默认为 #EFEBEF
          scrollColor: '#DEE7F7', //默认为 #A6A6A6
        },
        width: _self.cWidth * 1,
        height: _self.cHeight * 1,
        yAxis: {},
        extra: {
          line: {
            type: 'curve',
          },
        },
      });
    },
    touchLineA(e) {
      console.log(e);
      canvaColumnA.scrollStart(e);
    },
    moveLineA(e) {
      canvaColumnA.scroll(e);
    },
    touchEndLineA(e) {
      canvaColumnA.scrollEnd(e);
      //下面是toolTip事件，如果滚动后不需要显示，可不填写
      canvaColumnA.showToolTip(e, {
        format: function (item, category) {
          return category + ' ' + item.name + ':' + item.data;
        },
      });
    },
    async lineChartPest(type) {
      let { photoTimeRange } = this;
      let res = await this.$myRequest({
        method: 'post',
        url: '/api/api_gateway?method=lpsxy.views.pest_count',
        data: {
          d_id: this.equipInfo_d_id,
          start: photoTimeRange ? photoTimeRange[0] / 1000 : '',
          end: photoTimeRange ? photoTimeRange[1] / 1000 : '',
        },
      });
      if (res.length > 0) {
        this.showCanvas = true;
        let name = [];
        let ydata = [];
        res.forEach((item) => {
          name.push(item.date);
          ydata.push(item.total);
        });
        var obj = [
          {
            name: '诱虫数量',
            data: ydata,
            color: '#FF3F3F',
          },
        ];
        if (type == 'search') {
          // 当前是搜索
          this.showColumn('canvasColumnA', name, obj);
        } else {
          this.showColumn('canvasColumnA', name, obj);
        }
      } else {
        this.showCanvas = false;
      }
    },
    examine(index) {
      var imgarr = [];
      for (var i = 0; i < this.photoList.length; i++) {
        imgarr.push(this.photoList[i].addr);
      }
      // console.log(imgarr)
      uni.previewImage({
        urls: imgarr,
        current: index,
      });
    },
    async getEquipInfo() {
      let res = await this.$myRequest({
        method: 'post',
        url: '/api/api_gateway?method=forecast.worm_lamp.lamp_list',
        data: {
          device_id: this.equipInfoImei,
          page: 1,
          page_size: 10,
          device_model: 0,
          device_type_id: 25,
        },
      });
      console.log(res);
      // console.log(res.data.data);
      this.equipInfo = res.data[0];
    },

    async getAnsyInfo() {
      let res = await this.$myRequest({
        method: 'post',
        url: '/api/api_gateway?method=lpsxy.views.pest_info',
        data: {
          d_id: this.equipInfo_d_id,
        },
      });
      console.log(res);
      // console.log(res.data.data);
      this.analyInfo = res;
    },
    btnFun(code) {
      switch (code) {
        case 'clear':
          this.takePhoto(3);
          break;
        case 'tackPhoto':
          this.takePhoto(1);
          break;
        case 'photoTime':
          this.getPhotoTime();
          this.photoTimeLayer = true;
          break;
        case 'changeInfo':
          this.decoy = '';
          this.xy_expire_time = 2;
          this.expireInfoLayer = true;
          break;
        default:
          break;
      }
      // if(code == 'clear') {
      // 	this.takePhoto(3)
      // }
    },
    async getData() {
      let res = await this.$myRequest({
        method: 'post',
        url: '/api/api_gateway?method=lpsxy.views.monitor_data',
        data: {
          device_id: this.equipInfoImei,
        },
      });
      console.log(res);
      // console.log(res.data.data);
      this.newDataObj = res;
    },
    async getDeviceData() {
      let res = await this.$myRequest({
        method: 'post',
        url: '/api/api_gateway?method=lpsxy.views.device_config',
        data: {
          d_id: this.equipInfo_d_id,
        },
      });
      console.log(res);
      this.deviceObj = res;
      console.log(this.deviceObj);
    },
    // 获取当前拍照时间控制
    async getPhotoTime() {
      this.photoTimeLayer = true;
      this.photoTimeArray = [];
      let res = await this.$myRequest({
        method: 'POST',
        url: '/api/api_gateway?method=lpsxy.views.device_config',
        data: {
          d_id: this.equipInfo_d_id,
          config_type: 1,
        },
      });
      if (res && Object.keys(res).length > 0) {
        let data = res;
        for (const key in data) {
          if (key.includes('snaptime')) {
            let text = (data[key] + '').padStart(4, '0');
            // console.log(`${text.substring(0, 2)}${text.substring(2, 4)}`);
            this.photoTimeArray.push({
              value: `${text.substring(0, 2)}:${text.substring(2, 4)}`,
              key,
              show: false,
            });
          }
        }
        // console.log(this.photoTimeArray);
      }
    },
    removeTime(index) {
      this.photoTimeArray.splice(index, 1);
    },
    addTime(index) {
      this.photoTimeArray.push({
        value: `00:00`,
        key: `snaptime${index}`,
        show: false,
      });
    },
    changeSnapTime(e, key, index) {
      this.photoTimeArray[index].value = `${e.hour}:${e.minute}`;
    },
    changeControlTime(e, type) {
      this.equipContrlForm1[type] = `${e.hour}:${e.minute}`;
    },
    async devicePhotoTime() {
      // console.log(this.photoTimeArray);
      let obj = {};
      this.photoTimeArray.forEach((item, index) => {
        if (item.value) {
          obj[`snaptime${index + 1}`] = item.value.replace(/:/g, '') * 1;
        }
      });
      // console.log(obj);
      let res = await this.$myRequest({
        method: 'post',
        url: '/api/api_gateway?method=lpsxy.views.device_control',
        data: {
          device_id: this.equipInfoImei,
          ...obj,
        },
      });
      if (res) {
        uni.showToast({
          title: '指令下发成功',
          duration: 1000,
          icon: 'none',
        });
        // this.$message.success('指令下发成功');
        this.photoTimeLayer = false;
      } else {
        uni.showToast({
          title: '指令下发失败',
          icon: 'none',
          duration: 1000,
        });
        // this.$message.error(res.data.message);
      }
    },
    async takePhoto(order_type) {
      let res = await this.$myRequest({
        method: 'post',
        url: '/api/api_gateway?method=lpsxy.views.send_control',
        data: {
          device_id: this.equipInfoImei,
          order_type,
        },
      });
      if (res) {
        uni.showToast({
          title: '指令下发成功',
          duration: 1000,
          icon: 'none',
        });
        // this.$message.success('指令下发成功');
      } else {
        uni.showToast({
          title: '指令下发失败',
          icon: 'none',
          duration: 1000,
        });
        // this.$message.error(res.data.message);
      }
    },
    async changeExpireFun() {
      if (this.decoy == '') {
        uni.showToast({
          title: '请输入信息素名称',
          duration: 1000,
          icon: 'none',
        });
        // this.$message.error('请输入信息素名称');
        return;
      }
      let res = await this.$myRequest({
        method: 'post',
        url: '/api/api_gateway?method=lpsxy.views.update_xy_expire_time',
        data: {
          device_id: this.equipInfoImei,
          xy_expire_time: this.xy_expire_time,
          decoy: this.decoy,
        },
      });
      if (res) {
        uni.showToast({
          title: '操作成功',
          icon: 'none',
          duration: 1000,
        });
        // this.$message.success('操作成功');
        this.expireInfoLayer = false;
        this.getEquipInfo();
      } else {
        uni.showToast({
          title: '操作失败',
          icon: 'none',
          duration: 1000,
        });
        // this.$message.error(res.data.message);
      }
    },
    async getPhotoList(search) {
      let { photoTimeRange } = this;
      // console.log(photoTimeRange);
      //  if(photoTimeRange) {
      // this.page = 1;
      //  }
      // 当筛选的时候 清空图片列表
      if (search) {
        this.page = 1;
        this.photoList = [];
      }
      let res = await this.$myRequest({
        method: 'post',
        url: '/api/api_gateway?method=lpsxy.views.photo_list',
        data: {
          d_id: this.equipInfo_d_id,
          page: this.page,
          start: photoTimeRange ? photoTimeRange[0] / 1000 : '',
          end: photoTimeRange ? photoTimeRange[1] / 1000 : '',
        },
      });
      this.photoLoading = false;
      if (res) {
        this.photoList = [...this.photoList, ...res.data];
        this.total = res.count;
        if (this.total > this.page * 10) {
          this.loadStatus = 'loadmore';
        } else if (this.total <= this.page * 10) {
          this.loadStatus = 'nomore';
        }
      } else {
        uni.showToast({
          title: '请求失败',
          icon: 'none',
          duration: 1000,
        });
      }
    },
    changePhotoTime(dateObj, type) {
      console.log(dateObj);
      this.photoTimeRangeText = `${dateObj.startDate}~${dateObj.endDate}`;
      this.photoTimeRange = [
        new Date(dateObj.startDate).getTime(),
        new Date(dateObj.endDate).getTime(),
      ];
      if (type == 'photo') {
        this.getPhotoList('search');
      } else {
        this.lineChartPest('search');
      }
    },
    clearTimeFun(type) {
      this.photoTimeRangeText = '请选择日期';
      this.photoTimeRange = '';
      if (type == 'photo') {
        this.getPhotoList('search');
      } else {
        this.lineChartPest('search');
      }
    },
    loadMore() {
      this.page++;
      this.getPhotoList();
    },
    change(index) {
      this.current = index;
      if (index == 3) {
        this.getControlInfo();
      } else if (index == 2) {
        this.photoList = [];
        this.page = 1;
        this.photoTimeRangeText = '请选择日期';
        this.photoTimeRange = '';
        this.getPhotoList();
      } else if (index == 1) {
        this.photoTimeRangeText = '请选择日期';
        this.photoTimeRange = '';
        this.lineChartPest();
        this.getAnsyInfo();
      }
    },
    copy(item) {
      console.log(item);
      uni.setClipboardData({
        data: item,
        success: function () {
          console.log('success');
        },
      });
    },
    async getControlInfo() {
      let res = await this.$myRequest({
        method: 'POST',
        url: '/api/api_gateway?method=lpsxy.views.device_config',
        data: {
          d_id: this.equipInfo_d_id,
          config_type: 1,
        },
      });
      if (res && Object.keys(res).length > 0) {
        let data = res;
        console.log(data);
        let newObj = {
          ...data,
          show_st: false,
          show_et: false,
        };
        newObj.dev_work_time = data.dev_work_time + '';
        newObj.dev_work_time =
          newObj.dev_work_time.length > 7
            ? newObj.dev_work_time
            : newObj.dev_work_time.padStart(8, '0');
        newObj.st = `${newObj.dev_work_time.substring(
          0,
          2
        )}:${newObj.dev_work_time.substring(2, 4)}`;
        newObj.et = `${newObj.dev_work_time.substring(
          4,
          6
        )}:${newObj.dev_work_time.substring(6, 8)}`;
        // console.log(newObj);
        this.equipContrlForm1 = newObj;
      }
    },
    async equipControlSubm() {
      let newForm = Object.assign({}, this.equipContrlForm1); //深拷贝
      newForm.dev_work_time = (newForm.st + newForm.et).replace(/:/g, '') * 1;
      console.log(newForm);
      // console.log(obj);
      let res = await this.$myRequest({
        method: 'POST',
        url: '/api/api_gateway?method=lpsxy.views.device_control',
        data: {
          device_id: this.equipInfoImei,
          ...newForm,
        },
      });
      if (res) {
        uni.showToast({
          title: '指令下发成功',
          duration: 1000,
          icon: 'none',
        });
        // this.$message.success('指令下发成功');
      } else {
        uni.showToast({
          title: '指令下发失败',
          icon: 'none',
          duration: 1000,
        });
        // this.$message.error(res.data.message);
      }
    },
    async equipBtnControl(cmd) {
      if (this.ota_url == '') {
        uni.showToast({
          title: '请输入地址',
          duration: 1000,
          icon: 'none',
        });
        return;
      }
      let op_type = '';
      if (cmd == 'reboot') {
        var name = '重启';
        op_type = 1;
      } else if (cmd == 'update') {
        var name = '升级';
        op_type = 2;
      }
      let res = await this.$myRequest({
        method: 'POST',
        url: '/api/api_gateway?method=lpsxy.views.device_root_control',
        data: {
          op_type,
          d_id: this.equipInfo_d_id,
          ota_url: this.ota_url,
        },
      });
      if (res) {
        uni.showToast({
          title: '指令下发成功',
          duration: 1000,
          icon: 'none',
        });
        // this.$message.success('指令下发成功');
      } else {
        uni.showToast({
          title: '指令下发失败',
          icon: 'none',
          duration: 1000,
        });
        // this.$message.error(res.data.message);
      }
    },
  },
};
</script>

<style lang="less" scoped>
::v-deep .u-calendar__action {
  display: flex;
  justify-content: space-between;
}
.green {
  background: #14a478;
}

.yellow {
  background: #f4a72f;
}

.danger {
  background: #ff5951;
}

.blue {
  background: #1890ff;
}
.bigBox {
  position: relative;
  width: 100vw;
  height: calc(100vh);
  background: #f7f7f7;
  overflow: hidden;
}

.info {
  padding: 20rpx 40rpx;
  color: #fff;
  line-height: 50rpx;
  font-size: 26rpx;
  background-size: 100% auto;
  background-repeat: no-repeat;
  background-color: #0dc6b6;
  background-position: top left;
  box-sizing: border-box;
  width: 100%;
  border-radius: 5rpx;
  margin: 0 auto;

  p:first-child {
    font-size: 32rpx;
  }

  .expiretishi {
    font-size: 24rpx;
    color: #ff0000;
  }

  .tishi {
    width: 28rpx;
    height: 28rpx;
    margin: 0rpx 0 0 20rpx;
  }

  .fillin {
    display: flex;

    input {
      width: 200rpx;
      font-size: 24rpx;
      height: 50rpx;
      line-height: 50rpx;
      text-indent: 1em;
    }
  }
}

.on {
  background-image: url('https://s3.hnyfwlw.com/webstaticimg/bigdata_app/image/cb/onBg.png');
}

.off {
  background-image: url('https://s3.hnyfwlw.com/webstaticimg/bigdata_app/image/cb/offBg.png');
}

.infoBox {
  width: 100%;
  padding: 10rpx 24rpx;
  height: calc(100vh - 80rpx);
  box-sizing: border-box;
  overflow: auto;
  .timeBox {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 30rpx 32rpx;
    border: 1rpx #e5ebe9 solid;
    background: #fff;
    color: #666;
    font-size: 30rpx;
    height: 100rpx;
    box-sizing: border-box;
    .iconBox {
      display: flex;
      align-items: center;
      margin-top: 4rpx;
    }
    .text {
      width: 80vw;
      margin-left: 16rpx;
    }
  }
}

.cardInfo {
  margin-top: 24rpx;
  width: 100%;
  .title {
    font-size: 28rpx;
    color: #999;
  }

  .controlCard {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    margin-top: 30rpx;
    background: #fff;
    box-sizing: border-box;

    .preBtn {
      display: flex;
      align-items: center;
      justify-content: space-around;
      flex-direction: column;
      width: 22%;
      padding: 20rpx;
      height: 80px;
      font-size: 24rpx;
    }

    .btnBox {
      display: flex;
      align-items: center;
      justify-content: center;
      height: 48px;
      width: 48px;
      border-radius: 48px;
      color: #fff;

      .text {
        display: inline-block;
        width: 80vw;
        font-size: 20px;
      }
    }

    .preInfo {
      display: flex;
      align-items: center;
      box-sizing: border-box;
      padding: 32rpx !important;
      background: #fff;
      margin-bottom: 32rpx;

      .btnBox {
        width: 72rpx;
        height: 72rpx;
        background: #14a478;
      }

      .textBox {
        margin-left: 40rpx;
        font-size: 32rpx;

        .name {
          font-size: 24rpx;
          color: #999;
        }
      }
    }
  }

  .noBg {
    background: none;
  }

  .u-border-bottom:after,
  .u-border-left:after,
  .u-border-right:after,
  .u-border-top-bottom:after,
  .u-border-top:after,
  .u-border:after {
    content: ' ';
    position: absolute;
    left: 0;
    top: 0;
    pointer-events: none;
    box-sizing: border-box;
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0;
    width: 199.8%;
    height: 199.7%;
    -webkit-transform: scale(0.5);
    transform: scale(0.5);
    border: 0.5px solid #e5ebe9;
    z-index: 2;
  }
}

.expireBox {
  width: 80%;
  margin: 0 auto;
  padding: 20rpx;
  box-sizing: border-box;
  max-height: 60vh;
  overflow: auto;
}

.bgColor {
  width: 100%;
  box-sizing: border-box;
  background: #fff;
  padding: 0 20rpx;
  .u-form {
    height: calc(100vh - 68rpx);
    overflow: auto;
    box-sizing: border-box;
    padding: 20rpx 0;
  }
  .btn {
    margin-left: 20rpx;
  }
}
.chartBox {
  min-height: 400rpx;
  background: #fff;
  margin: 20rpx 0;
  padding: 32rpx;
  box-sizing: border-box;
  background: #fff;
  width: 100%;
  .noEmpty {
    height: 400rpx;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .pestInfo {
    padding: 32rpx 0;
    box-sizing: border-box;
    .pest {
      font-size: 24rpx;
      color: #666;
      margin-bottom: 16rpx;
      .name {
        margin-left: 10rpx;
        color: #333;
        font-weight: 600;
      }
    }
  }
  .pestStatus {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #fff;
    height: 284rpx;
    .block {
      display: flex;
      align-items: center;
      flex-direction: column;
      justify-content: space-around;
      width: 33%;
      height: 100%;
      text-align: center;
    }
    .active {
      background: #f7f7f7;
    }
    .iconBox {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 128rpx;
      height: 128rpx;
      border-radius: 128rpx;
      color: #fff;
      .yficonfont {
        font-size: 80rpx;
      }
    }
    .blueText {
      color: #14a478;
    }
    .yellowText {
      color: #f4a72f;
    }
    .redText {
      color: #ff0000;
    }
  }
}
.imgList {
  height: calc(100vh - 220rpx);
  overflow: auto;
  box-sizing: border-box;
  padding: 20rpx 0;
  .preImg {
    position: relative;
    float: left;
    width: 49%;
    margin-right: 2%;
    margin-bottom: 20rpx;
    .text {
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
      height: 40rpx;
      line-height: 40rpx;
      text-align: center;
      color: #fff;
      background: rgba(0, 0, 0, 0.4);
      font-size: 24rpx;
      z-index: 2;
    }
  }
  .preImg:nth-child(2n) {
    margin-right: 0; /* 每个第 3 个元素的右边距为 0 */
  }
  .loadBox {
    width: 100%;
  }
  ::v-deep .u-calendar__action {
    display: flex;
    justify-content: space-between;
  }
}
</style>