wszhyWx/src/views/insectPest/detail.vue

<template>
  <div class="insectPestDetail">
    <div class="detail-info">
      <div class="table-title" style="font-size:50px">设备详情</div>
      <div class="detail-div">
        <!-- <div class="detail-img">
          <img src="../../assets/image/pest.png" alt="" />
        </div> -->
        <div class="detail-detail" v-if="detail">
            <div class="detail-detail-div">
              <div class="title">设备名称:</div>
              <div class="text">{{detail.deviceName}}</div>
            </div>
            <div class="detail-detail-div">
              <div class="title">设备地址码:</div>
              <div class="text">{{detail.imei}}</div>
            </div>
            <div class="detail-detail-div">
              <div class="title">创建时间:</div>
              <div class="text">{{detail.createTime}}</div>
            </div>
            <div class="detail-detail-div">
              <div class="title">经纬度:</div>
              <div class="text">{{detail.lonLat}}</div>
            </div>
            <div class="detail-detail-div">
              <div class="title">安装地址:</div>
              <div class="text">{{detail.installAddress}}</div>
            </div>
            <div class="detail-detail-div">
              <div class="title">质保日期:</div>
              <div class="text">{{detail.warrantyDate}}</div>
            </div>
            <div class="detail-detail-div">
              <div class="title">设备所属sim卡:</div>
              <div class="text">{{detail.simCardNo}}</div>
            </div>
               <div @click="toMore" class="detail-detail-div to-more">
              <div class="text"> <img src="../../assets/image/more.png" alt="" />更多操作</div>
            </div>
        </div>
      </div>
    </div>
    <div class="detail-data">
      <div class="detail-image">
        <div class="table-title flex-between">虫情图片 <div class="look-all" @click="toImageList">查看全部></div></div>
        <div class="image-list">
          <div
            class="image-div"
            v-for="(item, index) in imageList"
            :key="index"
          >
            <el-image :src="item.thumbnailUrl" :preview-src-list="srcList">
              <div slot="error" class="image-slot">
                <i class="el-icon-picture-outline"></i>
              </div>
            </el-image>
            <div class="image-time">{{ item.shootTime }}</div>
          </div>
        </div>
      </div>
      <div class="detail-charts">
        <div class="table-title">虫情趋势图</div>
        <div class="charts" id="pest-charts"></div>
      </div>
    </div>
  </div>
</template>
<script>
import axios from "axios";

import { pestLine } from "@/assets/js/charts";
export default {
  data() {
    return {
      id: 613,
      detail: null,
      imageList: [],
      chartsData: null,
      srcList: [],
    };
  },
  mounted() {
    this.id = this.$route.query.id ? this.$route.query.id : 613;
    this.dataInit(this.id);
  },
  methods: {
    dataInit() {
      this.getDetail();
      this.getImage();
      this.getCharts();
    },
    toImageList(){
         this.$router.push({ path:'insectPestImageList',query:{id:this.id} })
    },
    // 获取设备详情
    getDetail() {
      var data = { deviceId: this.id };
      this.api.getDeviceDetailById(data).then((res) => {
          if (res.data.code == 200) {
            this.detail = res.data.data.data;
          }
        });
    },
    toMore(){
      window.open('https://zdny.zznongyeyiqi.com/index', '_blank');
      
    },
    getTimeNew() {
      // 获取当前日期（格式：YYYY-MM-DD）
      const today = new Date().toISOString().split("T")[0];

      return today;
    },
    getTime7() {
      // 获取一周前的日期（格式：YYYY-MM-DD）
      const oneWeekAgo = new Date();
      oneWeekAgo.setDate(oneWeekAgo.getDate() - 7);
      const formattedOneWeekAgo = oneWeekAgo.toISOString().split("T")[0];
      return formattedOneWeekAgo;
    },
    // 获取图片列表
    getImage() {
      var data = {
        beginTime: this.getTime7(),
        endTime: this.getTimeNew(),
        deviceId: this.id,
        pageNum: 1,
        pageSize: 6,
      };
     this.api.getDeviceImages(data).then((res) => {
          if (res.data.code == 200) {
            this.imageList = res.data.data.list;
            this.srcList = this.imageList.map((item) => item.imageUrl);
          }
        });
    },
    // 左下角虫情趋势图
    getCharts() {
      var data = {
        beginTime: this.getTime7(),
        endTime: this.getTimeNew(),
        deviceId: this.id,
      };
     this.api.getInsectChartData(data).then((res) => {
          if (res.data.code == 200) {
            this.chartsData = res.data;
            pestLine("pest-charts", this.chartsData);
          }
        });
    },
  },
};
</script>
<style lang="scss">
</style>