bigDataApp/pages/waterandfernew/details -新设计图无动态接入.vue

<template>
  <view class="box">
    <!-- 上面要素值 -->
    <view :class="`bigBox ${show ? 'bigOpen' : ''}`">
      <view class="topInfo">
        <u-row gutter="10">
          <u-col span="3" v-for="item in ElementList">
            <view class="item">
              <view>{{ item.value }}</view>
              <view>{{ item.unit }}</view>
              <view>{{ item.name }}</view>
            </view>
          </u-col>
        </u-row>
        <view
          class="readmore"
          v-if="!show"
          @click="
            show = true;
            getHistoryData();
          "
        >
          查看详情<u-icon name="arrow-down" color="#93FFDE" size="28"></u-icon>
        </view>
      </view>
      <!-- 统计图 -->
      <view class="hisBox" v-show="show">
        <view class="axiosBox">
          <view class="title"> 历史数据 </view>
          <view class="histimeBox">
            <u-icon name="calendar" color="#C1C1C1" size="24"></u-icon>
            <view class="time" @click="calendarshow = true">
              {{
                historyTime.startDate
                  ? historyTime.startDate
                  : timestampToDateTime(new Date().getTime() / 1000)
              }}
            </view>
            <view class="">至</view>
            <view class="time" @click="calendarshow = true">
              {{
                historyTime.endDate
                  ? historyTime.endDate
                  : timestampToDateTime(new Date().getTime() / 1000)
              }}
            </view>
            <u-icon
              name="close-circle"
              color="#C1C1C1"
              size="28"
              @click="
                historyTime = {};
                getHistoryData();
              "
              v-if="historyTime.startDate"
            ></u-icon>
          </view>
          <u-calendar
            v-model="calendarshow"
            mode="range"
            @change="changeDate"
          ></u-calendar>
          <view class="chartBox">
            <canvas
              canvas-id="canvasColumnA"
              id="canvasColumnA"
              class="charts"
              @touchstart="touchLineA($event)"
              @touchmove="moveLineA($event)"
              @touchend="touchEndLineA($event)"
            ></canvas>
          </view>
        </view>
        <view class="readmoreHIs" @click="show = false">
          收起详情<u-icon name="arrow-up" color="#14A478" size="28"></u-icon>
        </view>
      </view>
    </view>
    <view class="" v-if="!show">
      <!-- 历史记录弹框 -->
      <u-tabs
        :list="list"
        active-color="#14A478"
        bar-width="100"
        :is-scroll="false"
        :current="current"
        @change="change"
      ></u-tabs>
      <!-- 设备图 -->
      <view class="devicePhoto" v-if="current == 0">
        <view class="titleBox">
          <u-alert-tips
            type="primary"
            :title-style="alertTipColor"
            title="点击按钮可对应控制阀门开关，开即打开，关即关闭"
            :show-icon="true"
          ></u-alert-tips>
          <!-- <view class="btn" @click="statusPanel=true">控制面板</view> -->
          <!-- <u-popup v-model="statusPanel" mode="bottom">
						<view class="consoleBox">
							<view class="swichBox">
								<u-row :gutter="16" justify="space-between">
									<u-col span="6" v-for="(item, index) in buttonList" v-if="(index + 1) % 2 == 1">
										<view class="preSwich">
											<view>肥料{{ (index + 1) / 2 > 1 ? (index + 2) / 2 : 1 }}</view>
											<u-switch v-model="item.off" active-color="#14A478" inactive-color="#AEB4C2"
												:loading="item.disabled"
												@change="switchchange($event, item.number, item, index, true)"></u-switch>
										</view>
									</u-col>
									<u-col span="6" v-for="(item, index) in facilityvalve"
										v-if="index > buttonList.length - 1">
										<view class="preSwich">
											<view>{{item.name}}</view>
											<u-switch v-model="item.off" active-color="#14A478" inactive-color="#AEB4C2"
												:loading="item.disabled"
												@change="switchchange($event, item.number, item, index)"></u-switch>
										</view>
									</u-col>
								</u-row>
							</view>
							<u-button type="success" @click="statusPanel=false">确定</u-button>
						</view>
					</u-popup> -->
        </view>
        <view class="main">
          <image
            class="mainContent"
            src="../../static/images/waterandfernew/mainNew.png"
          ></image>
          <!-- <view class="sourceBox">
						<view class="smallBox">
							水源
						</view>
					</view> -->
          <!-- 桶 -->
          <view class="colList">
            <view
              class="preClo"
              v-for="(item, index) in buttonList"
              v-if="(index + 1) % 2 == 1"
              :key="`fei${index}`"
            >
              <view> 肥料{{ (index + 1) / 2 > 1 ? (index + 2) / 2 : 1 }} </view>
              <image
                src="../../static/images/waterandfernew/colNew.png"
                v-if="buttonList.length == 2"
              >
              </image>
              <image
                src="../../static/images/waterandfernew/colLeft.png"
                v-else-if="buttonList.length > 2 && index == 0"
              ></image>
              <image
                src="../../static/images/waterandfernew/colRight.png"
                v-else-if="
                  buttonList.length > 2 && index == buttonList.length - 2
                "
              ></image>
              <image
                src="../../static/images/waterandfernew/colCenter.png"
                v-else
              ></image>
              <view class="jiaoBtn" v-if="facilityvalve.length > 0">
                <u-switch
                  v-model="
                    facilityvalve[`${index == 0 ? 10 : index == 2 ? 9 : 8}`][
                      'off'
                    ]
                  "
                  active-color="#14A478"
                  inactive-color="#AEB4C2"
                  :loading="
                    facilityvalve[`${index == 0 ? 10 : index == 2 ? 9 : 8}`][
                      'disabled'
                    ]
                  "
                  @change="
                    switchchange(
                      $event,
                      facilityvalve[`${index == 0 ? 10 : index == 2 ? 9 : 8}`][
                        'number'
                      ],
                      facilityvalve[`${index == 0 ? 10 : index == 2 ? 9 : 8}`],
                      index == 0 ? 10 : index == 2 ? 9 : 8
                    )
                  "
                ></u-switch>
              </view>
              <view class="shanBox" v-if="facilityvalve.length > 0">
                <image
                  v-if="
                    !facilityvalve[`${index == 0 ? 10 : index == 2 ? 9 : 8}`][
                      'off'
                    ]
                  "
                  src="../../static/images/waterandfernew/shan.png"
                ></image>
                <image
                  v-else
                  class="circleAnm"
                  src="../../static/images/waterandfernew/shanannimate.png"
                ></image>
              </view>
              <view
                class="btnBox"
                @click="switchchange($event, item.number, item, index, true)"
              >
                <image
                  v-if="item.off"
                  src="../../static/images/waterandfernew/feiopen.png"
                ></image>
                <image
                  v-else
                  src="../../static/images/waterandfernew/feiclose.png"
                ></image>
              </view>
            </view>
          </view>
          <!-- 废料管口 -->
          <view class="exit">
            <image src="../../static/images/waterandfernew/exit.png"></image>
          </view>
          <!-- 注肥泵 -->
          <view
            class="feiLight"
            @click="
              switchchange(
                !feiBeng,
                facilityvalve[6].number,
                facilityvalve[6],
                6
              )
            "
          >
            <image
              v-if="feiBeng"
              src="../../static/images/waterandfernew/feiAllopen.png"
            ></image>
            <image
              v-else
              src="../../static/images/waterandfernew/feiAllclose.png"
            ></image>
          </view>
          <!-- 控制柜 -->
          <view class="kongBox">
            <image
              v-if="feiBeng"
              src="../../static/images/waterandfernew/kongclose.png"
            ></image>
            <image
              v-else
              src="../../static/images/waterandfernew/kongopen.png"
            ></image>
          </view>
          <!-- 进水泵 -->
          <view
            class="warterIn"
            @click="
              switchchange(
                !mainBeng,
                facilityvalve[7].number,
                facilityvalve[7],
                7
              )
            "
          >
            <image
              v-if="mainBeng"
              src="../../static/images/waterandfernew/feiopen.png"
            ></image>
            <image
              v-else
              src="../../static/images/waterandfernew/feiclose.png"
            ></image>
          </view>
          <!-- 进水指示 -->
          <view class="warterLight">
            <image
              v-if="mainBeng"
              src="../../static/images/waterandfernew/bengopen.png"
            ></image>
            <image
              v-else
              src="../../static/images/waterandfernew/bengclose.png"
            ></image>
          </view>
          <!-- 电风扇 -->
          <!-- <view class="fengBox">
						<view class="relativeBox">
							<image src="../../static/images/waterandfernew/fengmain.png"></image>
							<image :class="feiBeng ? 'circleAnm' : ''"
								src="../../static/images/waterandfernew/fengleafs.png"></image>
						</view>
					</view> -->
          <!-- 水管控制阀 -->
          <view class="benList">
            <!-- <view class="preBen" v-for="item, index in buttonList" v-if="(index + 1) % 2 == 1"
							@click="switchchange(!item.off, item.number, item, index, true)">
							<image class="daoguan" src="../../static/images/waterandfernew/bottomNew.png"
								v-if="(index + 1) % 2 < 4"></image>
							<view class="info">
								肥料{{ (index + 1) / 2 > 1 ? (index + 2) / 2 : 1 }}开关
							</view>
							<image class="status" v-if="item.off" src="../../static/images/waterandfernew/open.png">
							</image>
							<image class="status" v-else src="../../static/images/waterandfernew/close.png"></image>
						</view> -->
            <view
              class="preBen"
              v-for="(item, index) in facilityvalve"
              v-if="index > 10"
              @click="switchchange(!item.off, item.number, item, index)"
            >
              <image
                class="daoguan"
                src="../../static/images/waterandfernew/bottomNew.png"
                v-if="index > 10"
              ></image>
              <view class="info">
                {{ item.name }}
              </view>
              <image
                class="status"
                v-if="item.off"
                src="../../static/images/waterandfernew/open.png"
              >
              </image>
              <image
                class="status"
                v-else
                src="../../static/images/waterandfernew/close.png"
              ></image>
            </view>
          </view>
        </view>
      </view>
      <!-- 操作记录 -->
      <view class="consoleList" v-else>
        <view class="histimeBox">
          <u-icon name="calendar" color="#C1C1C1" size="24"></u-icon>
          <view class="time" @click="consoleshow = true">
            {{ consoleTime.startDate ? consoleTime.startDate : '开始' }}
          </view>
          <view class="">至</view>
          <view class="time" @click="consoleshow = true"
            >{{ consoleTime.endDate ? consoleTime.endDate : '结束' }}
          </view>
          <u-icon
            name="close-circle"
            color="#C1C1C1"
            size="28"
            @click="clearContime"
            v-if="consoleTime.startDate"
          ></u-icon>
        </view>
        <u-calendar
          v-model="consoleshow"
          mode="range"
          @change="changeConsoleDate"
        ></u-calendar>
        <view class="tableList tableTitle">
          <view>设备名称</view>
          <view>操作内容</view>
          <view>操作时间</view>
        </view>
        <view
          class="tableList"
          v-for="(item, index) in tableData"
          :key="item.uptime + index"
        >
          <view>{{ item.device_name }}</view>
          <view :class="item.status ? 'success' : 'error'">{{
            item.operation_content
          }}</view>
          <view>{{ item.uptime }}</view>
        </view>
        <u-loadmore :status="status" />
      </view>
    </view>
  </view>
</template>

<script>
import uCharts from '../../components/js_sdk/u-charts/u-charts/u-charts.js';
var canvaColumnA = null;
var canvasRing = null;
export default {
  data() {
    return {
      alertTipColor: {
        color: '#1890FF',
        fontSize: '12px',
      },
      device_id: '',
      mainBeng: false,
      feiBeng: false,
      calendarshow: false,
      historyTime: {},
      cWidth: '350',
      cHeight: '350',
      pixelRatio: 1,
      facilityvalve: [],
      feiNum: 0, //肥料桶实际占据通道个数
      buttonList: [], // 肥料开关列表
      colomRoundList: ['j1', 'j2', 'j3', 'j4', 'j5', 'j6', 'j7', 'j8'], // 废料桶的通道
      ElementList: [],
      typename: [
        '-',
        '风机',
        '水泵',
        '增氧机',
        '湿帘',
        '遮阳',
        '开窗',
        '保温',
        '投食机',
      ],
      show: false,
      list: [
        {
          name: '设备控制',
        },
        {
          name: '执行结果',
        },
        {
          name: '操作记录',
        },
      ],
      statusPanel: false,
      current: 0,
      consoleshow: false,
      consoleTime: {},
      tableData: [],
      page: 1,
      total: 0,
      status: 'loadmore',
    };
  },
  methods: {
    changeTimeStatus(item, changeIndex) {
      this.timer = setTimeout(() => {
        item.disabled = false; // 改变值
        this.facilityvalve[changeIndex].disabled = false;
        this.getEquipstatus();
        this.timer = null; // 清空定时器引用
      }, 15000);
    },
    // 选择日期
    changeDate(e) {
      console.log(e);
      this.historyTime = e;
      this.getHistoryData();
    },
    // 绘制折线图
    showColumn(id, xtitle, xinfo) {
      var _self = this;
      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: {
          disabled: true,
          disableGrid: false,
          type: 'grid',
          gridType: 'dash',
          itemCount: 15, //x轴单屏显示数据的数量，默认为5个
          scrollShow: true, //新增是否显示滚动条，默认false
          scrollAlign: 'right', //滚动条初始位置
          scrollBackgroundColor: '#F7F7FF', //默认为 #EFEBEF
          scrollColor: '#DEE7F7', //默认为 #A6A6A6
        },
        yAxis: {},
        width: _self.cWidth * 1,
        height: _self.cHeight * 1,
        extra: {
          line: {
            type: 'curve',
          },
        },
      });
    },
    touchLineA(e) {
      // console.log(e)
      canvaColumnA.scrollStart(e);
    },
    moveLineA(e) {
      canvaColumnA.scroll(e);
    },
    touchEndLineA(e) {
      canvaColumnA.touchLegend(e);
      // canvaColumnA.showToolTip(e);
      canvaColumnA.scrollEnd(e);
      //下面是toolTip事件，如果滚动后不需要显示，可不填写
      canvaColumnA.showToolTip(e, {
        format: function (item, category) {
          return category + ' ' + item.name + ':' + item.data;
        },
      });
    },
    // 时间戳转换
    timestampToDateTime(timestamp, isTime) {
      var date = new Date(timestamp * 1000); // 将时间戳转换为毫秒并创建一个日期对象
      var year = date.getFullYear(); // 获取年份
      var month = ('0' + (date.getMonth() + 1)).slice(-2); // 获取月份，并补零
      var day = ('0' + date.getDate()).slice(-2); // 获取日期，并补零
      var hours = ('0' + date.getHours()).slice(-2); // 获取小时，并补零
      var minutes = ('0' + date.getMinutes()).slice(-2); // 获取分钟，并补零
      var seconds = ('0' + date.getSeconds()).slice(-2); // 获取秒数，并补零
      if (isTime) {
        return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
      } else {
        return `${year}-${month}-${day}`;
      }
    },
    // 历史数据
    async getHistoryData() {
      uni.showLoading({
        title: '加载中',
      });
      const { historyTime } = this;
      // 获取当前日期
      var currentDate = new Date();
      // 设置时间为 0 点
      currentDate.setHours(0, 0, 0, 0);
      let begin = historyTime.startDate
        ? new Date(historyTime.startDate).getTime() / 1000 - 8 * 3600
        : Math.floor(currentDate.getTime() / 1000);

      // 设置时间为 24 点
      currentDate.setHours(24, 0, 0, 0);
      let end = historyTime.endDate
        ? new Date(historyTime.endDate).getTime() / 1000 - 8 * 3600
        : Math.floor(currentDate.getTime() / 1000);
      //折线图数据
      let res = await this.$myRequest({
        url: '/api/api_gateway?method=weather.weather.sf_data_chart',
        data: {
          device_id: this.device_id,
          begin: begin,
          end: end,
        },
      });
      uni.hideLoading();
      var conf = res.conf.eleName;
      var dat = res.dat.reverse();
      //console.log(dat);
      conf = conf.split('/');
      // var arr1 = [];
      var regroupData = []; //重组数据
      let options = [];
      var timeList = [];
      for (var i = 0; i < conf.length; i++) {
        // var arr = [];
        if (conf[i] != '-') {
          var optionobj = {};
          optionobj.value = i;
          optionobj.label = conf[i];
          options.push(optionobj);
          var reddata = [];
          dat.forEach((item, index) => {
            if (timeList.length < dat.length) {
              timeList.push(this.timestampToDateTime(item.uptime, true));
            }
            var status = item.device_status.split(',');
            // //console.log(status);
            var arr = [];
            for (var j = 0; j < status.length; j++) {
              if (status[j].indexOf('e') + 1) {
                arr.push(status[j]);
              }
            }
            // //console.log(arr)
            var dataobj = {};
            for (var k = 0; k < arr.length; k++) {
              var indexs = arr[k].indexOf(':');
              // //console.log(arr[k])
              if (k == 0) {
                dataobj[arr[k].slice(1, indexs).trim()] = arr[k]
                  .substr(indexs + 1)
                  .trim();
              } else {
                dataobj[arr[k].slice(0, indexs).trim()] = arr[k]
                  .substr(indexs + 1)
                  .trim();
              }
            }
            // //console.log(dataobj)
            for (var key in dataobj) {
              // //console.log(i)
              var str = "'e" + (i + 1) + "'";
              // //console.log(key,str);
              if (key == str) {
                if (Number(dataobj[key]) == 32767) {
                  // reddata.push([]);
                } else {
                  reddata.push(Number(dataobj[key]));
                }
              }
            }
          });
          regroupData.push({
            name: conf[i],
            type: 'spline',
            fillColor: {
              linearGradient: [0, 0, 0, 300],
            },
            data: reddata,
          });
        }
      }
      // console.log(timeList);
      this.showColumn('canvasColumnA', timeList, regroupData);
    },
    // 切换选项卡
    change(index) {
      this.page = 1;
      this.total = 0;
      this.current = index;
      this.status = 'loadmore';
      this.tableData = [];
      this.getEquipcontroldata();
    },
    // 获取要素实时数据
    async getElmentInfo() {
      uni.showLoading({
        title: '加载中',
      });
      let res = await this.$myRequest({
        url: '/api/api_gateway?method=xphsp.views.device_elements',
        data: {
          device_id: this.device_id,
        },
      });
      uni.hideLoading();
      var conf = res.conf.eleName.split('/');
      var dataList = [res.data.device_data];
      if (dataList.length == 0) return;
      this.ElementList = [];
      conf.forEach((item, index) => {
        let obj = {};
        if (item == '-') return;
        obj.name = item;
        let valList = dataList[0][`e${index + 1}`].split('#');
        obj.value = valList[0];
        obj.unit = valList[1];
        obj.time = dataList[0].uptime;
        this.ElementList.push(obj);
      });
      // console.log(this.ElementList)
    },
    async getEquipstatus() {
      uni.showLoading({
        title: '加载中',
      });
      this.facilityvalve = [];
      let res = await this.$myRequest({
        url: '/api/api_gateway?method=xphsp.views.device_info',
        data: {
          device_id: this.device_id,
        },
      });
      uni.hideLoading();
      var conf = res.conf.relayName;
      var dataobj = res.device_status;
      var relayNum = res.conf.relayNum;
      var arr = [];

      function numberToArray(number) {
        // 将数字转换为字符串
        let numString = number.toString();

        // 创建一个空数组，用于存储结果
        let result = [];

        // 遍历字符串的每个字符，并将其转换为对应的数字
        for (let i = 0; i < numString.length; i++) {
          result.push(parseInt(numString.charAt(i)));
        }

        return result;
      }
      for (var i = 0; i < dataobj.length; i++) {
        // if (offobj[i].indexOf("j") + 1) {
        arr.push(offobj[i]);
        // }
      }
      conf = conf.split('/');
      relayNum = relayNum.split('/');
      var arr1 = [];
      var reg = /\d/;
      let totalP = Math.ceil(conf.length / 32); //总圈数
      for (var i = 0; i < conf.length; i++) {
        var obj = {};
        obj.name = conf[i];
        // if (reg.test(conf[i])) {
        //   obj.name2 = conf[i].slice(0, conf[i].length - 1);
        // } else {
        //   obj.name2 = conf[i];
        // }
        obj.name2 = this.typename[relayNum[i]];
        obj.number = i;
        obj.type = `j${i + 1}`;
        obj.disabled = false;
        // "state": 1 继电器打开 ;"state": 0 继电器关闭
        // 处理开关值
        // J开头表示状态，总共只有32长度，超过32则从头赋值 位数多一位
        // 例：1和33是都在J1里面，返回值是一个二进制数 倒数第一位表示第一个 第二位表示33状态 以此类推
        // 根据总长度 为超过32的j赋值
        // 当前是循环的第几轮
        let baseP = Math.ceil((i + 1) / 32);
        if (i > 31) {
          dataobj[`j${i + 1}`] =
            dataobj[`j${(i + 1) % 32 == 0 ? 32 : (i + 1) % 32}`]; // 当前脚标/32取余 当恰好整除的时候  取32
        }
        dataobj[`j${i + 1}`] = dataobj[`j${i + 1}`].slice(-totalP); // 截取当前圈数的最后几位数字
        let baseOff = numberToArray(dataobj[`j${i + 1}`]); // 把当前值根据位数 转换为数组
        obj.off = baseOff[baseP - 1] == '0' ? false : true; // 根据当前圈数，取对应的数组的值
        arr1.push(obj);
      }
      for (var i = 0; i < arr1.length; i++) {
        if (arr1[i].name != '-') {
          this.facilityvalve.push(arr1[i]);
        }
      }
      this.facilityvalve.forEach((item) => {
        item.disabled = false;
        if (item.type == 'j9' && item.off == true) {
          // 判断注水泵是否打开
          this.mainBeng = true;
        }
        if (item.type == 'j10' && item.off == true) {
          // 判断施肥阀是否打开
          this.feiBeng = true;
        }
      });
      let feiNum = 0; // 记录废料桶占据通道个数，两个通道为一个肥料桶
      this.buttonList = [];
      this.facilityvalve.forEach((item, index) => {
        if (this.colomRoundList.indexOf(item.type) > -1) {
          feiNum++;
          this.buttonList.push(item);
        }
        if (item.type == 'j10' && item.off == true) {
          // 判断注水泵是否打开
          this.mainBeng = true;
        }
        if (item.type == 'j9' && item.off == true) {
          // 判断施肥阀是否打开
          this.feiBeng = true;
        }
      });
      this.feiNum = feiNum;
      console.log(this.facilityvalve);
    },
    async getEquipcontrol(num, state, double_order) {
      //设备控制
      uni.showLoading({
        title: '正在下发指令',
      });
      let res = await this.$myRequest({
        url: '/api/api_gateway?method=xphsp.views.control_order',
        data: {
          device_id: this.device_id,
          relayNum: num,
          relayState: state,
          double_order,
        },
      });
      uni.hideLoading();
      if (res.msg_code == 200) {
        uni.showToast({
          title: '指令下发成功',
          duration: 2000,
          icon: 'none',
        });
      } else {
        uni.showToast({
          title: res.msg,
          duration: 2000,
          icon: 'none',
        });
        setTimeout(() => {
          this.getEquipstatus();
        }, 2000);
      }
    },
    // sf_control_data
    // 操作记录日期
    changeConsoleDate(e) {
      this.consoleTime = e;
      this.tableData = [];
      this.page = 1;
      this.getEquipcontroldata();
    },
    clearContime() {
      this.consoleTime = {};
      this.tableData = [];
      this.page = 1;
      this.getEquipcontroldata();
    },
    //操作记录
    async getEquipcontroldata() {
      uni.showLoading({
        title: '加载中',
      });
      const { consoleTime } = this;
      let begin = consoleTime.startDate
        ? new Date(consoleTime.startDate).getTime() / 1000
        : '';
      let end = consoleTime.endDate
        ? new Date(consoleTime.endDate).getTime() / 1000
        : '';
      //操作记录
      let res = await this.$myRequest({
        method: 'POST',
        url: '/api/api_gateway?method=xphsp.views.control_log',
        data: {
          device_id: this.device_id,
          page_num: this.page,
          page_size: 15,
          start: begin,
          end: end,
          sys_control: this.current - 1,
        },
      });
      uni.hideLoading();
      // this.tableData = [];
      var record = res.result;
      this.tableData = [...this.tableData, ...record];
      this.total = res.count;
      if (this.page * 15 > this.total) {
        this.status = 'nomore';
      } else {
        this.status = 'loadmore';
      }
      console.log(this.tableData);
    },
    switchchange(e, state, item, index, isfeiButton) {
      // 是否是肥料开关，是的话 两个合并为一个
      item.disabled = true;
      if (isfeiButton) {
        item.off = e;
        this.changeTimeStatus(item, index);
        // 当前是打开
        if (e) {
          // 打开通道传1，关闭通道传0
          this.getEquipcontrol(state, 1, 1);
          // this.getEquipcontrol(state + 1, 0);
        } else {
          // this.getEquipcontrol(state + 1, 0);
          this.getEquipcontrol(state, 0, 1);
        }
        return;
      }
      item.off = e;
      if (item.type == 'j10') {
        // 判断注水泵是否打开
        this.mainBeng = e;
      }
      if (item.type == 'j9') {
        // 判断施肥阀是否打开
        this.feiBeng = e;
      }
      // if (this.colomRoundList.indexOf(item.type) > -1) {
      //   let changeIndex = index;
      //   if ((index + 1) % 2 == 0) {
      //     // 偶数 往前取值
      //     this.facilityvalve[index - 1].disabled = true;
      //     changeIndex = index - 1;
      //   } else if ((index + 1) % 2 == 1) {
      //     // 基数 往后取值
      //     this.facilityvalve[index + 1].disabled = true;
      //     changeIndex = index + 1;
      //   }
      //   item.disabled = true;
      //   this.changeTimeStatus(item, changeIndex);
      //   this.getEquipcontrol(changeIndex, Number(!e));
      // } else {
      // }
      item.disabled = true;
      this.changeTimeStatus(item, index);
      //console.log(Number(e), state);
      this.getEquipcontrol(state, Number(e));
    },
    currentchange(e) {
      //页码
      if (this.type == 0) {
        this.pageDialog = e;
      } else {
        this.page = e;
      }
      this.getEquipcontroldata(this.type);
    },
  },
  onReachBottom() {
    if (this.current != 0 && this.status == 'loadmore') {
      this.page++;
      this.getEquipcontroldata();
    }
  },
  onLoad(option) {
    let deviceItem = JSON.parse(option.shebei);
    this.device_id = deviceItem.device_id;
    this.getEquipstatus();
    this.getElmentInfo();
    this.getEquipcontroldata();
  },
};
</script>

<style scoped lang="less">
.circleAnm {
  animation: ancirle 1s linear infinite;
}

// 旋转
@keyframes ancirle {
  0% {
    transform: rotate(360deg);
  }

  100% {
    transform: rotate(0);
  }
}

.box {
  position: relative;
  width: 100%;
  min-height: 100vh;
  overflow: auto;
}

.bigBox {
  width: 100%;
}

.bigOpen {
  height: 100vh;
}

::v-deep .u-flex {
  display: flex;
  justify-content: center;
}

.topInfo {
  background: #14a478;
  color: #fff;
  font-size: 28rpx;
  padding-bottom: 32rpx;
  box-sizing: border-box;
  border-bottom-left-radius: 16rpx;
  border-bottom-right-radius: 16rpx;

  .u-col {
    box-sizing: border-box;
    margin-top: 32rpx;

    .item {
      text-align: center;

      view:first-child {
        font-size: 40rpx;
      }

      view:nth-child(2) {
        font-size: 24rpx;
        line-height: 40rpx;
        opacity: 0.72;
      }
    }
  }
}

.readmore {
  text-align: center;
  font-size: 26rpx;
  line-height: 40rpx;
  margin-top: 32rpx;
  color: #93ffde;

  .u-icon {
    margin-left: 15rpx;
  }
}

.histimeBox {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 56rpx;
  padding: 6rpx 24rpx;
  box-sizing: border-box;
  border-radius: 8rpx;
  margin-top: 54rpx;
  border: 2rpx solid var(--neutral-color-border-light, #e4edea);

  .u-icon {
    z-index: 10;
  }

  .time {
    width: 280rpx;
    color: #c1c1c1;
  }

  view {
    color: #333333;
    text-align: center;
  }
}

.consoleBox {
  position: relative;
  max-height: 75vh;
  padding-bottom: 80rpx;
  overflow: auto;

  .u-row {
    box-sizing: border-box;

    .u-col {
      box-sizing: border-box;
    }
  }

  .u-btn {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: #14a478;
  }

  .swichBox {
    position: relative;
    padding: 32rpx;
    overflow: hidden;

    .preSwich {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 24rpx 18rpx;
      border-radius: 8rpx;
      background: #eff2fa;
      margin-bottom: 32rpx;

      view {
        color: #333333;
        font-size: 28rpx;
      }
    }
  }
}

.hisBox {
  position: relative;
  width: 100vw;
  padding-bottom: 100rpx;
  box-sizing: border-box;
  overflow-y: scroll;

  .axiosBox {
    position: relative;
    padding: 48rpx 32rpx;

    .title {
      color: #333333;
      font-size: 28rpx;
      font-weight: 700;
    }

    .chartBox {
      position: relative;
      margin-top: 32rpx;
      height: 800rpx;
      overflow: hidden;

      #canvasColumnA {
        width: 100%;
        height: 800rpx;
      }
    }
  }

  .readmoreHIs {
    position: absolute;
    bottom: 60rpx;
    left: 50%;
    transform: translate(-50%);
    color: #14a478;
    z-index: 5;
  }
}

.devicePhoto {
  padding: 32rpx;

  .titleBox {
    display: flex;
    align-items: center;
    justify-content: space-between;

    .btn {
      padding: 10rpx 14rpx;
      border-radius: 8rpx;
      background: #14a478;
      color: #fff;
      font-size: 28rpx;
    }
  }

  .main {
    position: relative;
    width: 678rpx;
    height: 612rpx;
    margin-top: 10px;

    .mainContent {
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
      width: 678rpx;
      top: 10rpx;
      height: 602rpx;
      z-index: 1;
    }

    .sourceBox {
      position: absolute;
      left: 20rpx;
      z-index: 2;
      display: flex;
      align-items: center;
      justify-content: center;
      width: 112rpx;
      height: 112rpx;
      background: #e3fdff;
      border-radius: 112rpx;
      color: #fff;

      view {
        width: 85rpx;
        height: 85rpx;
        background: #1890ff;
        border-radius: 85rpx;
        text-align: center;
        line-height: 85rpx;
        font-size: 28rpx;
      }
    }

    .colList {
      position: absolute;
      z-index: 2;
      top: 44rpx;
      left: 154rpx;
      width: 528rpx;
      display: flex;
      justify-content: center;
      overflow: hidden;

      .preClo {
        position: relative;
        float: left;
        width: 88rpx;
        // margin-left: 40rpx;

        view {
          text-align: center;
          color: #333333;
          font-size: 28rpx;
          margin-bottom: 20rpx;
        }

        image {
          width: 88rpx;
          height: 272rpx;
        }

        .shanBox {
          position: absolute;
          width: 64rpx;
          height: 64rpx;
          top: 116rpx;
          left: 50%;
          transform: translateX(-50%);
          z-index: 2;

          image {
            width: 64rpx;
            height: 64rpx;
          }
        }

        .jiaoBtn {
          position: absolute;
          width: 64rpx;
          height: 32rpx;
          top: 72rpx;
          left: 50%;
          transform: translateX(-50%);
          z-index: 2;

          .u-switch {
            width: 64rpx;
            height: 32rpx;

            ::v-deep .u-switch__node {
              width: 28rpx !important;
              height: 28rpx !important;
              top: 2rpx !important;
            }

            ::v-deep .u-switch__loading {
              height: 20rpx !important;
            }
          }

          ::v-deep .u-switch--on .u-switch__node {
            transform: translateX(36rpx) !important;
          }
        }

        .btnBox {
          position: absolute;
          width: 66rpx;
          height: 72rpx;
          bottom: 40rpx;
          left: 22rpx;
          z-index: 2;

          image {
            width: 66rpx;
            height: 72rpx;
          }
        }
      }
    }

    .benList {
      position: absolute;
      width: 678rpx;
      left: 50%;
      transform: translateX(-50%);
      top: 610rpx;

      .preBen {
        float: left;
        text-align: center;
        width: 20%;

        .daoguan {
          width: 20rpx;
          height: 40rpx;
        }

        .info {
          color: #333333;
          font-size: 12px;
          font-weight: 400;
        }

        .status {
          width: 76rpx;
          height: 100rpx;
          margin-top: 10rpx;
        }
      }
    }

    .lineExit {
    }

    .exit {
      position: absolute;
      width: 22rpx;
      height: 20rpx;
      top: 360rpx;
      right: 252rpx;
      z-index: 2;

      image {
        width: 22rpx;
        height: 20rpx;
      }
    }

    .warterIn {
      position: absolute;
      width: 66rpx;
      height: 72rpx;
      top: 190rpx;
      left: 52rpx;
      z-index: 3;

      image {
        width: 66rpx;
        height: 72rpx;
      }
    }

    .warterLight {
      position: absolute;
      width: 72rpx;
      height: 48rpx;
      top: 506rpx;
      left: 110rpx;
      z-index: 3;

      image {
        width: 72rpx;
        height: 48rpx;
      }
    }

    .feiLight {
      position: absolute;
      width: 72rpx;
      height: 66rpx;
      top: 424rpx;
      right: 140rpx;
      z-index: 3;

      image {
        width: 72rpx;
        height: 66rpx;
      }
    }

    .kongBox {
      position: absolute;
      width: 84rpx;
      height: 108rpx;
      top: 390rpx;
      right: 228rpx;
      z-index: 3;

      image {
        width: 84rpx;
        height: 108rpx;
      }
    }

    .fengBox {
      position: absolute;
      right: 12rpx;
      top: 270rpx;
      width: 55rpx;
      height: 44rpx;
      z-index: 2;

      .relativeBox {
        position: relative;
        width: 100%;
        height: 100%;

        image:nth-child(1) {
          width: 16rpx;
          height: 32rpx;
        }

        image:nth-child(2) {
          position: absolute;
          right: 0;
          top: -6rpx;
          width: 44rpx;
          height: 44rpx;
        }
      }
    }
  }
}

.consoleList {
  padding: 0 32rpx;

  .histimeBox {
    margin: 32rpx 0;
  }

  .tableTitle {
    background: #e8f3f0;
    color: #333;
    font-weight: 600;
  }

  .tableList {
    font-size: 28rpx;
    height: 78rpx;
    color: #666666;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 2rpx solid var(--neutral-color-border-base, #dce6e3);

    view {
      text-align: center;
    }
    .success {
      color: #14a478;
    }
    .error {
      color: #ff5951;
    }
    view:nth-child(1) {
      width: 120rpx;
      text-align: left;
    }

    view:nth-child(2) {
      width: 280rpx;
    }

    view:nth-child(3) {
      width: 280rpx;
    }
  }
}
</style>