huimv.client.demo/src/views/groupManagment/UnityTrace/UnityTrace.vue

<template>
    <div class="UnityTrace">
        <header class="header">
            <h5>基本信息</h5>
            <ul>
                <el-row type="flex" class="row">
                    <el-col :span="8" class="col">
                        <span class="title">猪编号：</span>
                        <span class="content">1540</span>
                    </el-col>
                    <el-col class="col">
                        <span class="title">出生天数：</span>
                        <span class="content">51</span>
                    </el-col>
                </el-row>
                <el-row type="flex" class="row">
                    <el-col :span="8" class="col">
                        <span class="title">出生日期：</span>
                        <span class="content">2020-05-01</span>
                    </el-col>
                    <el-col class="col">
                        <span class="title">耳标号：</span>
                        <span class="content">A3525DF3542</span>
                    </el-col>
                </el-row>
                <el-row type="flex" class="row">
                    <el-col :span="8" class="col">
                        <span class="title">批次：</span>
                        <span class="content">13543</span>
                    </el-col>
                    <el-col class="col">
                        <span class="title">当前位置：</span>
                        <span class="content">育肥舍四栋</span>
                    </el-col>
                </el-row>
                <el-row type="flex" class="row">
                    <el-col :span="8" class="col">
                        <span class="title">品种：</span>
                        <span class="content">大白</span>
                    </el-col>
                    <el-col class="col">
                        <span class="title">饲养员：</span>
                        <span class="content">某某某</span>
                    </el-col>
                </el-row>
            </ul>
        </header>
        <section class="section">
            <el-date-picker
                v-model="value2"
                type="datetimerange"
                :picker-options="pickerOptions"
                @change="pickerChange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                align="right"
                class="date-picker"
            ></el-date-picker>
            <article v-if="dateArr.length > 0">
                <chart-a :dateArr="dateArr" :data="animalTempArr" class="charts"></chart-a>
                <chart-b :dateArr="dateArr" :data="envTempArr" class="charts"></chart-b>
                <chart-c :dateArr="dateArr" :data="batteryArr" class="charts"></chart-c>
            </article>
            <p v-else class="hint"> 当前时间段无数据... </p>
        </section>
        
    </div>
</template>

<script>
import { reqReportList } from "@/api/groupManagment";

import chart_a from "./charts/chart_a";
import chart_b from "./charts/chart_b";
import chart_c from "./charts/chart_c";

const pickerOptions = {
    shortcuts: [
        {
            text: "最近一小时",
            onClick(picker) {
                const end = new Date();
                const start = new Date();
                start.setTime(start.getTime() - 3600 * 1000 * 1);
                picker.$emit("pick", [start, end]);
            }
        },
        {
            text: "最近半天",
            onClick(picker) {
                const end = new Date();
                const start = new Date();
                start.setTime(start.getTime() - 3600 * 1000 * 12);
                picker.$emit("pick", [start, end]);
            }
        },
         {
            text: "最近一天",
            onClick(picker) {
                const end = new Date();
                const start = new Date();
                start.setTime(start.getTime() - 3600 * 1000 * 24);
                picker.$emit("pick", [start, end]);
            }
        },
        {
            text: "最近三天",
            onClick(picker) {
                const end = new Date();
                const start = new Date();
                start.setTime(start.getTime() - 3600 * 1000 * 24 * 3);
                picker.$emit("pick", [start, end]);
            }
        },
        {
            text: "最近一周",
            onClick(picker) {
                const end = new Date();
                const start = new Date();
                start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                picker.$emit("pick", [start, end]);
            }
        }
    ]
};

export default {
    name: "UnityTrace",
    components: {
        "chart-a": chart_a,
        "chart-b": chart_b,
        "chart-c": chart_c
    },
    data() {
        return {
            dateArr: [],
            animalTempArr: [],
            envTempArr: [],
            batteryArr: [],
            pickerOptions,
            value2: null,
            timer_1: null,
            SData: Math.floor(( new Date().getTime() - 3600 * 1000 * 6 ) / 1000), // 默认最近六小时 
            EData: Math.ceil(new Date().getTime() / 1000)
        };
    },
    created() {
        // 一分钟更新一次   后端10分钟更新一次数据
        this.getReportList()
        this.timer_1 = setInterval(() => {
            this.getReportList()
            console.log("getReportList")
        }, 1000 * 3);
    },
    mounted() {},
    beforeDestroy() {
        window.clearInterval(this.timer_1)
    },
    methods: {
        // 事件选择器值改变
        pickerChange(value) {
            console.log(value)
            this.SData = Math.floor(new Date(value[0]).getTime() / 1000)
            this.EData = Math.ceil(new Date(value[1]).getTime() / 1000)
            console.log(this.SData, this.EData)
            this.getReportList()
        },
        // 请求个体数据  id  825   826 830
        getReportList() {
            reqReportList({ deviceId:825, start:this.SData, end:this.EData })
                .then(res => {
                    let dateArr = [], 
                        animalTempArr = [],
                        envTempArr = [],
                        batteryArr = []
                    res.forEach((item, index) => {
                        dateArr.push(item.created)
                        animalTempArr.push(item.animalTemp)
                        batteryArr.push(item.battery*100)
                        envTempArr.push(item.envTemp)
                    });
                    this.dateArr = dateArr
                    this.animalTempArr = animalTempArr
                    this.envTempArr = envTempArr
                    this.batteryArr = batteryArr

                })
                .catch(err => {
                    console.log( err);
                });
        },
    }
};
</script>

<style lang="scss" scoped>
.UnityTrace {
    .header {
        border: 1px solid #eee;
        padding: 10px;
        h5 {
            font-size: 18px;
        }
        .row {
            padding-left: 100px;
            margin-bottom: 10px;
            .col {
                overflow: ellipsis;
                .title {
                    font-size: 15px;
                }
                .content {
                    font-size: 14px;
                    color: #555;
                }
            }
        }
    }
    .section {
        .date-picker {
            margin-left: 48%;
            margin-top: 30px;
            margin-bottom: 20px;
        }
        .charts{
            border-top: 1px solid #ccc;
            padding-top: 25px;
        }
    }
}
</style>