ninglu-frontt/src/pages/forecasting/nlcb/xydatainfo.vue

<!-- 性诱2.0 数据详情 -->
<template>
  <div class="xydatabox">
    <!-- 数据的详情 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item>测报系统</el-breadcrumb-item>
      <el-breadcrumb-item>数据详情</el-breadcrumb-item>
    </el-breadcrumb>
    <div class="basicsbox">
      <div class="basicsbox_title">
        <div class="basicsbox_title_left">
          <p class="title">基础数据</p>
          <el-button type="primary" size="mini" @click="refresh">更新数据</el-button>
        </div>
        <div class="basicsbox_title_box">
          <el-select
            v-model="yservalue"
            placeholder="请选择"
            size="small"
            @change="yearchange"
            style="width: 80px"
          >
            <el-option
              v-for="item in yesroptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
          <el-slider
            v-model="slidervalue"
            range
            :max="slidermax"
            :marks="marks"
            :format-tooltip="formatTooltip"
            @change="sliderchange"
          ></el-slider>

          <el-date-picker
            v-model="datePickerValue"
            type="datetimerange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            @change="datePickerChange"
            :default-time="['00:00:00', '23:59:59']"
            align="right"
          >
          </el-date-picker>
        </div>
      </div>
      <div class="basicsbox_text">
        <p>设备ID：{{ baseinfo.device_id }}</p>
        <p>设备名称：{{ baseinfo.device_name }}</p>
        <p>设备位置：{{ baseinfo.address }}</p>
        <!-- <p>最新上传时间：{{ (baseinfo.uptime * 1000) | formatTime }}</p> -->
      </div>
    </div>
    <div class="monitordatabox">
      <div class="monitordatabox_title">
        <p class="title">监测数据</p>
        <div class="btn" @click="setbait">设置诱芯</div>
      </div>
      <div class="monitordatabox_text">
        <div v-for="(item, index) in monitordata" :key="index" class="monitordatabox_text_item">
          <p
            v-if="
              (item.key == 'xy_uptime' || item.key == 'xy_expire_time') && timedata[item.key] != ''
            "
          >
            {{ (timedata[item.key] * 1000) | formatTime }}
          </p>
          <p v-else-if="item.key == 'xy_expire_time' && timedata[item.key] == ''">
            <span>未设置诱芯到期时间</span>
          </p>
          <p v-else>
            {{ timedata[item.key] == '' ? '暂无' : timedata[item.key] }}
          </p>
          <p>{{ item.name }}</p>
        </div>
      </div>
    </div>
    <div class="highbox">
      <!-- <div class="anahbox" v-loading="linetf">
        <p class="title">环境温湿度变化</p>
        <highcharts :options="options" class="highcharts"></highcharts>
        <div class="tishi" v-show="linedatatf">暂无数据</div>
      </div> -->
      <div class="wormbox" v-loading="linetf2">
        <div class="title_box">
          <p class="title">害虫数据分析</p>
          <div class="btn" @click="wormexportxy">导 出</div>
        </div>
        <highcharts :options="options2" class="highcharts"></highcharts>
        <div class="tishi" v-show="linedatatf2">暂无数据</div>
      </div>
    </div>
    <div class="tablebox">
      <div class="tablebox_title">
        <p class="title">实时表单</p>
        <div class="btn" @click="exportxy">导 出</div>
      </div>
      <div class="tablebox_text" v-loading="tabletf">
        <el-table :data="tableData" stripe style="width: 100%" v-if="$QueryPermission(266)">
          <el-table-column
            v-for="(item, index) in tableHeadTxt"
            :key="index"
            :prop="item[1]"
            :label="item[0]"
            :width="setWidth(item)"
          >
            <template slot-scope="scope">
              <span v-if="scope.column.property == 'xy_addtime'">{{
                (scope.row[scope.column.property] * 1000) | formatTime
              }}</span>
              <span v-else>{{ scope.row[scope.column.property] }}</span>
            </template>
          </el-table-column>
        </el-table>
        <el-table :data="tableData" stripe style="width: 100%" v-else>
          <el-table-column
            v-for="(item, index) in tableHeadTxt2"
            :key="index"
            :prop="item[1]"
            :label="item[0]"
            :width="setWidth(item)"
          >
            <template slot-scope="scope">
              <span v-if="scope.column.property == 'xy_addtime'">{{
                (scope.row[scope.column.property] * 1000) | formatTime
              }}</span>
              <span v-else>{{ scope.row[scope.column.property] }}</span>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          background
          layout="prev, pager, next, jumper"
          :current-page="currentPage"
          :total="total"
          @current-change="currentchange"
        >
        </el-pagination>
      </div>
    </div>
    <el-dialog
      title="设置诱芯"
      :visible.sync="dialogVisible"
      :close-on-click-modal="false"
      width="500px"
    >
      <div class="baitbox">
        <el-form ref="form" :rules="rules" :model="baitdata" label-width="120px">
          <el-form-item label="诱芯名称" prop="name">
            <el-input v-model="baitdata.name" size="mini" maxlength="10"></el-input>
          </el-form-item>
          <el-form-item label="诱芯到期时间">
            <el-date-picker
              v-model="baitdata.time"
              type="datetime"
              placeholder="选择日期时间"
              size="mini"
            >
            </el-date-picker>
          </el-form-item>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false" size="mini">取 消</el-button>
        <el-button type="primary" @click="sumbit" size="mini">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
// 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
import { Debounce } from '../../../util/anitthro'
import HighCharts from 'highcharts'
import Circulation from '../../../../static/js/equipState_dict.json'
export default {
  // import引入的组件需要注入到对象中才能使用
  components: {},
  data() {
    // 这里存放数据
    return {
      user_tag: null, // 1超级管理员，2经销商，3农林政府单位，4普通用户，5销售用户
      device_id: '',
      d_id: '',
      baseinfo: {},
      yesroptions: [], // 年份选择器
      yservalue: '', // 选择的年份
      marks: '', // 格式化滑块节点
      slidervalue: [], // 滑块默认值
      slidermax: 365,
      start_time: '', // 开始时间
      end_time: '', // 结束时间
      monitordata: [
        {
          name: '诱芯名称',
          key: 'decoy'
        },
        {
          name: '杀虫数量(头)',
          key: 'pest_count'
        },
        {
          name: '温度(℃)',
          key: 'at'
        },
        {
          name: '湿度(%)',
          key: 'ah'
        },
        {
          name: '风力风向(°)',
          key: 'wind'
        },
        {
          name: '是否下雨',
          key: 'rain'
        },
        // {
        //   name: '设备状态',
        //   key: 'state',
        // },
        {
          name: '今天天气',
          key: 'type'
        },
        {
          name: '诱芯到期时间',
          key: 'xy_expire_time'
        }
      ],
      timedata: {},
      tableData: [],
      ChartData: [],
      ChartData2: [],
      tableHeadTxt: [
        ['设备号', 'device_id'],
        ['环境温度(℃)', 'at'],
        ['环境湿度(%)', 'ah'],
        ['电池电压(V)', 'b_V'],
        ['电池电流', 'b_c'],
        ['太阳能板电压', 'p_v'],
        ['太阳能板电流', 'p_c'],
        ['上传时间', 'xy_addtime']
      ],
      tableHeadTxt2: [
        ['设备号', 'device_id'],
        ['环境温度(℃)', 'at'],
        ['环境湿度(%)', 'ah'],
        ['上传时间', 'xy_addtime']
      ],
      equipStateDict: {},
      currentPage: 1,
      total: 10,
      dialogVisible: false,
      baitdata: {
        name: '',
        time: ''
      },
      rules: {
        name: [{ required: true, message: '请输入诱芯名称', trigger: 'blur' }]
      },
      pest_count: 0,
      tabletf: false, // 表格loading
      linetf: false, // 折线图1loading
      linetf2: false, // 折线图2loading
      linedatatf: false,
      linedatatf2: false,
      datePickerValue: [new Date(), new Date()],
      pickerOptions: {
        shortcuts: [
          {
            text: '最近一周',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
              picker.$emit('pick', [start, end])
            }
          },
          {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
              picker.$emit('pick', [start, end])
            }
          },
          {
            text: '最近三个月',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
              picker.$emit('pick', [start, end])
            }
          }
        ]
      }
    }
  },
  // 监听属性 类似于data概念
  computed: {
    options() {
      return {
        chart: {
          zoomType: 'x'
          // zoomType: 'y'
        },
        title: {
          text: '',
          align: 'left'
        },
        subtitle: {
          text: ''
        },
        xAxis: {
          crosshair: true, // 十字基准线
          type: 'datetime',
          dateTimeLabelFormats: {
            // 根据时间间距X轴自动显示哪种格式
            millisecond: '%H:%M:%S',
            second: '%H:%M:%S',
            minute: '%H:%M',
            hour: '%H:%M',
            day: '%m-%d',
            week: '%m-%d',
            month: '%Y-%m',
            year: '%Y'
          }
        },
        yAxis: {
          title: {
            text: ''
          }
        },
        legend: {
          // layout: 'vertical',
          align: 'center',
          verticalAlign: 'top'
        },
        plotOptions: {
          series: {
            label: {
              connectorAllowed: false
            },
            pointStart: 2010
          }
        },
        series: this.ChartData,
        colors: ['#00e29d', '#6cbbff', '#ff3f3f'],
        credits: {
          // 去掉默认的highcharts.com
          enabled: false
        },
        tooltip: {
          // crosshairs: true,
          shared: true, // 折线共享
          headerFormat: '<b>{point.x:%Y-%m-%e %H:%M:%S}</b><br>'
        },
        responsive: {
          rules: [
            {
              condition: {
                maxWidth: 500
              },
              chartOptions: {
                legend: {
                  layout: 'horizontal',
                  align: 'center',
                  verticalAlign: 'bottom'
                }
              }
            }
          ]
        }
      }
    },
    options2() {
      return {
        chart: {
          zoomType: 'x'
          // zoomType: 'y'
        },
        title: {
          text: '',
          align: 'left'
        },
        subtitle: {
          text: ''
        },
        xAxis: {
          crosshair: true, // 十字基准线
          type: 'datetime',
          dateTimeLabelFormats: {
            // 根据时间间距X轴自动显示哪种格式
            millisecond: '%H:%M:%S',
            second: '%H:%M:%S',
            minute: '%H:%M',
            hour: '%H:%M',
            day: '%m-%d',
            week: '%m-%d',
            month: '%Y-%m',
            year: '%Y'
          }
        },
        yAxis: {
          title: {
            text: ''
          }
        },
        legend: {
          // layout: 'vertical',
          align: 'center',
          verticalAlign: 'top'
        },
        plotOptions: {
          series: {
            label: {
              connectorAllowed: false
            },
            pointStart: 2010
          }
        },
        series: this.ChartData2,
        colors: ['#00e29d', '#6cbbff', '#ff3f3f'],
        credits: {
          // 去掉默认的highcharts.com
          enabled: false
        },
        tooltip: {
          // crosshairs: true,
          shared: true, // 折线共享
          headerFormat: '<b>{point.x:%Y-%m-%e %H:%M:%S}</b><br>'
        },
        responsive: {
          rules: [
            {
              condition: {
                maxWidth: 500
              },
              chartOptions: {
                legend: {
                  layout: 'horizontal',
                  align: 'center',
                  verticalAlign: 'bottom'
                }
              }
            }
          ]
        }
      }
    }
  },
  // 监控data中的数据变化
  watch: {},
  // 方法集合
  methods: {
    datePickerChange(e) {
      // console.log(+new Date(e[0]).getTime()/1000)
      // console.log(+new Date(e[1]).getTime()/1000)
      if (!e) {
        return
      }
      const oldMonth = new Date(e[0]).getMonth()
      const olddate = new Date(e[0]).getDate()
      const Month = new Date(e[1]).getMonth()
      const date = new Date(e[1]).getDate()
      if (Month == 0) {
        this.slidervalue = [0, this.getsliserindex(Month, date)]
      } else {
        this.slidervalue = [
          this.getsliserindex(oldMonth, olddate),
          this.getsliserindex(Month, date)
        ]
      }

      this.linetf = true
      this.linetf2 = true
      this.tabletf = true
      this.total = 10
      this.currentPage = 1

      this.start_time = +new Date(e[0]).getTime() / 1000
      this.end_time = +new Date(e[1]).getTime() / 1000
      this.gethighatdata()
      this.gethighatdata2()
      this.getHisDataList()
    },
    dateTimeFormat(timestamp) {
      // 时间戳转 yyyy-MM-dd hh:mm:ss
      let time = new Date(timestamp * 1000)
      let year = time.getFullYear()
      let month = time.getMonth() + 1
      let date = time.getDate()
      let hours = time.getHours()
      let minute = time.getMinutes()
      let second = time.getSeconds()

      if (month < 10) {
        month = '0' + month
      }
      if (date < 10) {
        date = '0' + date
      }
      if (hours < 10) {
        hours = '0' + hours
      }
      if (minute < 10) {
        minute = '0' + minute
      }
      if (second < 10) {
        second = '0' + second
      }
      return year + '-' + month + '-' + date + ' ' + hours + ':' + minute + ':' + second
    },
    // 年份发生改变
    yearchange(e) {
      // console.log(e);
      this.leapyear(e)
    },
    // 计算闰年和平年
    leapyear(year) {
      var Month = new Date().getMonth()
      var date = new Date().getDate()
      var time = new Date(new Date().setMonth(Month - 1))
      var oldMonth = time.getMonth()
      var olddate = time.getDate()
      this.slidermax = ''
      if ((year % 400 == 0 || year % 4 == 0) && year % 100 != 0) {
        this.slidermax = 366
      } else {
        this.slidermax = 365
      }
      if (this.slidermax == 366) {
        this.marks = {
          0: '1月1日',
          31: '1月31日',
          60: '2月29日',
          91: '3月31日',
          121: '4月30日',
          152: '5月31日',
          182: '6月30日',
          213: '7月31日',
          244: '8月31日',
          274: '9月30日',
          305: '10月31日',
          335: '11月30日',
          366: '12月31日'
        }
      } else if (this.slidermax == 365) {
        this.marks = {
          0: '1月1日',
          31: '1月31日',
          59: '2月28日',
          90: '3月31日',
          120: '4月30日',
          151: '5月31日',
          181: '6月30日',
          212: '7月31日',
          243: '8月31日',
          273: '9月30日',
          304: '10月31日',
          334: '11月30日',
          365: '12月31日'
        }
      }
      if (Month == 0) {
        this.slidervalue = [0, this.getsliserindex(Month, date)]
      } else {
        this.slidervalue = [
          this.getsliserindex(oldMonth, olddate),
          this.getsliserindex(Month, date)
        ]
      }
      var state = this.formatTooltip(this.slidervalue[0])
      var end = this.formatTooltip(this.slidervalue[1])
      state = state.replace('月', '-')
      state = state.replace('日', '')
      state = this.yservalue + '-' + state + ' 00:00:00'
      end = end.replace('月', '-')
      end = end.replace('日', '')
      end = this.yservalue + '-' + end + ' 23:59:59'
      this.start_time = +new Date(state) / 1000
      this.end_time = +new Date(end) / 1000
      this.datePickerValue = [
        new Date(this.dateTimeFormat(this.start_time)),
        new Date(this.dateTimeFormat(this.end_time))
      ]
      // console.log(this.start_time, this.end_time);
      //   this.getallwormlist();
      //   this.search();
      this.gethighatdata()
      this.gethighatdata2()
      this.getHisDataList()
    },
    // 格式化滑块标签
    formatTooltip(val) {
      for (var key in this.marks) {
        if (val < key) {
          // //console.log(key);
          var index = key - val
          var monindex = this.marks[key].indexOf('月')
          var dataindex = this.marks[key].indexOf('日')
          var data = this.marks[key].slice(monindex + 1, dataindex)
          var str = this.marks[key].slice(0, monindex + 1)
          return str + (data - index + 1) + '日'
        } else if (val == 365 || val == 366) {
          return '12月31日'
        }
      }
    },
    getsliserindex(month, date) {
      // //console.log(month);
      var arr = []
      for (var key in this.marks) {
        arr.push(key)
      }
      if (month == 0) {
        return Number(date) - 1
      } else {
        return Number(arr[month]) + Number(date) - 1
      }
    },
    sliderchange(e) {
      this.linetf = true
      this.linetf2 = true
      this.tabletf = true
      this.total = 10
      this.currentPage = 1
      this.sliderchange2(e)
    },
    // 滑块更改后地值
    sliderchange2: Debounce(function (e) {
      var state = this.formatTooltip(e[0])
      var end = this.formatTooltip(e[1])
      state = state.replace('月', '-')
      state = state.replace('日', '')
      state = this.yservalue + '-' + state + ' 00:00:00'
      end = end.replace('月', '-')
      end = end.replace('日', '')
      end = this.yservalue + '-' + end + ' 23:59:59'
      this.start_time = +new Date(state) / 1000
      this.end_time = +new Date(end) / 1000
      this.datePickerValue = [
        new Date(this.dateTimeFormat(this.start_time)),
        new Date(this.dateTimeFormat(this.end_time))
      ]
      // //console.log(this.start_time, this.end_time);
      this.page = 1
      // this.currentPage = 1;
      this.gethighatdata()
      this.gethighatdata2()
      this.getHisDataList()
    }, 2000),
    getbaseinfo() {
      this.$axios({
        method: 'post',
        url: '/api/api_gateway?method=sex_lure_nl.sex_lure.nl_device_list',
        data: this.qs.stringify({
          page_size: 8,
          device_id: this.device_id,
          page: 1
        })
      }).then((res) => {
        if (res.data.message == '') {
          if (res.data.data) {
            // //console.log(res.data.data)
            this.baseinfo = res.data.data.data[0]
            // this.monitordata[0].key = this.baseinfo.decoy
            // this.getweather();
          }
        } else {
          this.$message.error(res.data.message)
        }
      })
    },
    gethighatdata() {
      this.linetf = true
      this.$axios({
        method: 'post',
        url: '/api/api_gateway?method=sex_lure_nl.sex_lure.nl_device_line_chart',
        data: this.qs.stringify({
          device_id: this.device_id,
          start_time: this.start_time,
          end_time: this.end_time,
          status: 'at_ah',
          device_code: this.device_code
        })
      }).then((res) => {
        this.linetf = false
        if (res.data.message == '') {
          if (res.data.data) {
            var data = res.data.data
            if (data.length == 0) {
              this.linedatatf = true
            } else {
              this.linedatatf = false
            }
            if (data.length != 0) {
              var arr = []
              var arr2 = []
              for (var i = 0; i < data.length; i++) {
                arr.push([+new Date(data[i].xy_addtime) + 8 * 60 * 60 * 1000, Number(data[i].at)])
                arr2.push([+new Date(data[i].xy_addtime) + 8 * 60 * 60 * 1000, Number(data[i].ah)])
              }
              // console.log(arr);
              this.ChartData = [
                {
                  name: '温度',
                  data: arr
                },
                {
                  name: '湿度',
                  data: arr2
                }
              ]
              // //console.log(this.ChartData)
            } else {
              this.ChartData = [
                {
                  name: '温度',
                  data: []
                },
                {
                  name: '湿度',
                  data: []
                }
              ]
            }
          }
        } else {
          this.$message.error(res.data.message)
        }
      })
    },
    gethighatdata2() {
      this.linetf2 = true
      this.$axios({
        method: 'post',
        url: '/api/api_gateway?method=sex_lure_nl.sex_lure.nl_device_line_chart',
        data: this.qs.stringify({
          device_id: this.device_id,
          start_time: this.start_time,
          end_time: this.end_time,
          status: 'pest',
          device_code: this.device_code
        })
      }).then((res) => {
        this.linetf2 = false
        if (res.data.message == '') {
          if (res.data.data) {
            // console.log(res.data.data);
            var data = res.data.data.data
            if (data.length == 0) {
              this.linedatatf2 = true
            } else {
              this.linedatatf2 = false
            }
            this.pest_count = res.data.data.pest_count
            this.timedata['pest_count'] = this.pest_count
            var arr = []
            if (data.length != 0) {
              for (var i = 0; i < data.length; i++) {
                arr.push([+new Date(data[i].xy_addtime), Number(data[i].pest_num)])
              }

              // console.log(this.ChartData2);
            }
            this.ChartData2 = [
              {
                name: '诱虫次数',
                data: arr
              }
            ]
          }
        } else {
          this.$message.error(res.data.message)
        }
      })
    },
    setWidth(item) {
      if (item[1] == 'addtime') {
        return 180 + 'px'
      } else if (item[1] == 'proj') {
        return 150 + 'px'
      }
    },
    currentchange(e) {
      this.page = e
      this.getHisDataList()
    },
    // 获取表格数据
    getHisDataList() {
      this.tabletf = true
      this.$axios({
        method: 'POST',
        url: '/api/api_gateway?method=sex_lure_nl.sex_lure.nl_device_history',
        data: this.qs.stringify({
          device_id: this.device_id,
          start_time: this.start_time,
          end_time: this.end_time,
          page: this.page,
          page_size: 10,
          device_code: this.device_code
        })
      }).then((res) => {
        this.tabletf = false
        console.log('res.data')
        if (res.data.message == '') {
          // console.log(res.data.data.data);
          var arr = res.data.data.data
          // var list = []
          // for (var i = 0; i < arr.length; i++) {
          //   var obj = {}
          //   // obj['device_id'] = res.data.data.data[0].device_id
          //   obj['device_id'] = res.data.data.data[i].device_id
          //   obj['at'] = res.data.data.data[i].at
          //   obj['ah'] = res.data.data.data[i].ah
          //   obj['warn'] =
          //     res.data.data.data[i].warn == ''
          //       ? '无'
          //       : res.data.data.data[0].warn
          //   obj['b_V'] = res.data.data.data[i].b_V
          //   obj['b_c'] = res.data.data.data[i].b_c
          //   obj['p_v'] = res.data.data.data[i].p_v
          //   obj['p_c'] = res.data.data.data[i].p_c
          //   obj['xy_addtime'] = this.formatTime(
          //     res.data.data.data[i].xy_addtime * 1000
          //   )
          //   list.push(obj)
          // }

          if (arr.length > 0) {
            let obj = arr[0]
            let newHeader = []
            Object.keys(obj).forEach((key) => {
              let matchItem = this.tableHeadTxt.filter((item) => {
                return item[1] === key
              })
              if (matchItem.length > 0) {
                newHeader.push(matchItem[0])
              }
            })

            this.tableHeadTxt = newHeader
            this.tableHeadTxt2 = newHeader
          }
          this.tableData = arr
          // console.log(this.tableData);
          this.total = res.data.data.nums
        }
      })
    },
    gettimedata() {
      this.$axios({
        method: 'post',
        url: '/api/api_gateway?method=sex_lure_nl.sex_lure.nl_device_details',
        data: this.qs.stringify({
          d_id: this.d_id
        })
      }).then((res) => {
        if (res.data.message == '') {
          if (res.data.data) {
            // console.log(res.data.data);
            this.timedata = res.data.data[0]
            this.timedata['state'] = this.baseinfo.is_online == 0 ? '离线' : '在线'
            this.timedata['pest_count'] = this.pest_count
          }
        }
      })
    },
    setbait() {
      this.dialogVisible = true
      // console.log(this.baseinfo);
      this.baitdata.name = this.baseinfo.decoy
    },
    sumbit() {
      // console.log(this.baitdata.time);
      this.$refs['form'].validate((valid) => {
        if (valid) {
          var time = ''
          if (this.baitdata.time == '') {
            time = ''
          } else {
            time = Math.floor(+new Date(this.baitdata.time) / 1000)
          }
          this.$axios({
            method: 'POST',
            url: '/api/api_gateway?method=forecast.worm_lamp.set_decopy',
            data: this.qs.stringify({
              device_type_id: 10,
              device_id: this.device_id,
              decoy: this.baitdata.name,
              expire_time: time
            })
          }).then((res) => {
            this.dialogVisible = false
            if (res.data.message == '') {
              if (res.data.data.status) {
                if (document.getElementsByClassName('el-message').length == 0) {
                  this.$message.success('设置诱芯成功')
                }
              } else {
                if (document.getElementsByClassName('el-message').length == 0) {
                  this.$message.warning('设置诱芯失败')
                }
              }
            }
          })
        } else {
          // console.log('error submit!!');
          return false
        }
      })
    },
    // 表格数据导出
    exportxy() {
      const permission = this.$QueryPermission(266)
      let arr = []
      let table_header = ''
      if (permission) {
        arr = this.tableHeadTxt
      } else {
        arr = this.tableHeadTxt2
      }
      arr.forEach((item) => {
        table_header = table_header + '' + item[1] + '|'
      })
      table_header = table_header.substring(0, table_header.length - 1)

      window.location.href =
        this.$deriveData +
        // "http://192.168.1.23:8000" +
        '/api/nl_export?device_id=' +
        this.device_id +
        '&filename=' +
        '性诱2.0表单数据' +
        '&start_time=' +
        this.start_time +
        '&end_time=' +
        this.end_time +
        '&table_header=' +
        table_header
    },
    // 害虫折线图数据导出
    wormexportxy() {
      var username = localStorage.getItem('cUsername')
      window.location.href =
        this.$deriveData +
        // "http://192.168.1.77:8002" +
        '/api/nl_pest_export?device_id=' +
        this.device_id +
        '&filename=' +
        '性诱2.0诱虫次数' +
        '&start_time=' +
        this.start_time +
        '&end_time=' +
        this.end_time +
        '&username=' +
        username
    },
    refresh() {
      this.page = 1
      this.currentPage = 1
      if (document.getElementsByClassName('el-message').length == 0) {
        this.$message.success('刷新成功')
      }
      this.gethighatdata()
      this.gethighatdata2()
      this.getHisDataList()
    }
  },
  beforeCreate() {}, // 生命周期 - 创建之前
  // 生命周期 - 创建完成（可以访问当前this实例）
  created() {
    this.device_id = this.$route.query.e_id
    this.d_id = this.$route.query.d_id
    this.device_code = this.$route.query.device_code
    var Year = new Date().getFullYear()
    var num = Year - 2019
    for (var i = 0; i < num + 1; i++) {
      var obj = {
        value: 2019 + i,
        label: 2019 + i
      }
      this.yesroptions.push(obj)
    }
    this.yservalue = this.yesroptions[this.yesroptions.length - 1].label
    this.leapyear(Year)
    this.getbaseinfo()
    this.gettimedata()
  },
  beforeMount() {}, // 生命周期 - 挂载之前
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    this.equipStateDict = Circulation
  },
  beforeUpdate() {}, // 生命周期 - 更新之前
  updated() {}, // 生命周期 - 更新之后
  beforeDestroy() {}, // 生命周期 - 销毁之前
  destroyed() {}, // 生命周期 - 销毁完成
  activated() {} // 如果页面有keep-alive缓存功能，这个函数会触发
}
</script>
<style lang="less" scoped>
.basicsbox {
  width: 100%;
  background-color: #fff;
  padding: 20px 30px;
  box-sizing: border-box;
  .basicsbox_title {
    display: flex;
    justify-content: space-between;
    .title {
      font-weight: 700;
    }
    .basicsbox_title_left {
      display: flex;
      height: 26px;
      /deep/.el-button {
        margin-left: 15px;
      }
    }
    .basicsbox_title_box {
      width: 90%;
      display: flex;
      align-items: center;
      justify-content: flex-end;
      /deep/.el-slider {
        margin-left: 40px;
        margin-right: 40px;
        width: 50%;
        .el-slider__marks-text:last-child {
          display: none;
        }
      }
    }
  }
  .basicsbox_text {
    display: flex;
    margin-top: 30px;
    p {
      margin-right: 25px;
      font-size: 14px;
      color: #909399;
    }
  }
}
.monitordatabox {
  width: 100%;
  background-color: #fff;
  padding: 20px 30px;
  box-sizing: border-box;
  margin-top: 16px;
  .monitordatabox_title {
    display: flex;
    justify-content: space-between;
    .title {
      font-weight: 700;
    }
    .btn {
      width: 100px;
      height: 32px;
      background-color: #14a478;
      font-size: 14px;
      text-align: center;
      line-height: 32px;
      border-radius: 5px;
      color: #fff;
      cursor: pointer;
    }
  }
  .monitordatabox_text {
    display: flex;
    flex-wrap: wrap;
    .monitordatabox_text_item {
      width: 20%;
      text-align: center;
      margin-top: 20px;
      p:first-child {
        font-size: 18px;
        font-weight: 700;
        height: 24px;
      }
      p:last-child {
        font-size: 14px;
        margin-top: 10px;
      }
    }
  }
}
.highbox {
  width: 100%;
  //   background-color: #fff;
  margin-top: 15px;
  display: flex;
  justify-content: space-between;
  .title {
    font-weight: 700;
  }

  .wormbox {
    background-color: #fff;
    padding: 20px 30px;
    box-sizing: border-box;
    width: 100%;
    position: relative;
    .title_box {
      width: 100%;
      display: flex;
      justify-content: space-between;
      .btn {
        width: 100px;
        height: 32px;
        background-color: #14a478;
        font-size: 14px;
        text-align: center;
        line-height: 32px;
        border-radius: 5px;
        color: #fff;
        cursor: pointer;
      }
    }
    .tishi {
      position: absolute;
      top: 45%;
      left: 45%;
    }
    .highcharts {
      width: 100%;
      height: 300px;
      /deep/.highcharts-credits {
        display: none;
      }
    }
  }
}
.tablebox {
  width: 100%;
  background-color: #fff;
  padding: 20px 30px;
  box-sizing: border-box;
  margin-top: 15px;
  .tablebox_title {
    display: flex;
    justify-content: space-between;
    .title {
      font-weight: 700;
    }
    .btn {
      width: 100px;
      height: 32px;
      background-color: #14a478;
      font-size: 14px;
      text-align: center;
      line-height: 32px;
      border-radius: 5px;
      color: #fff;
      cursor: pointer;
    }
  }
  .tablebox_text {
    /deep/.cell {
      text-align: center;
    }
  }
}
.baitbox {
  width: 100%;
  /deep/.el-date-editor {
    width: 100%;
  }
}
</style>