huimv.client.demo2/src/views/deliveryRoomManagement/detail/Detail.vue

<template>
    <div class="Detail">
        <header class="header">
            <el-page-header @back="goBack" content="产床信息" />
            <el-row type="flex" align="middle">
                <el-col :span="8" style="text-align:right;">
                    <h2 class="title" style="color:#444">{{ $route.query.roomNum }}</h2>
                </el-col>
                <el-col :span="6" style="text-align:right;">
                    <div>
                        <!-- <el-date-picker
                            v-model="date"
                            @change="pickerChange"
                            type="date"
                            placeholder="选择日期"
                        ></el-date-picker>-->
                    </div>
                </el-col>
                <el-col :span="2" style="text-align:right;">
                    <!-- <el-link type="primary" @click="toSowDetail">查看母猪信息</el-link> -->
                </el-col>
            </el-row>
        </header>

        <section class="section">
            <article class="video">
                <!-- <div>母猪情况【母猪耳标、上床时间、预计产仔】【断奶时间】</div> -->
                <div class="mainInfo" v-if="bed">
                    <ul>
                        <li>
                            <span class="titel">母猪耳标：</span>
                            <el-link
                                class="content"
                                type="primary"
                                v-if="bed"
                                @click="isShow=true"
                                style="font-size: 25px"
                            >{{bed.litter.mother.earTagNo}}</el-link>
                        </li>
                        <li>
                            <span class="titel">状态：</span>
                            <span
                                class="content"
                                style="font-size:20px"
                            >{{ bed.status==2?"上床":bed.status==3?"分娩":bed.status==4?"断奶":"" }}</span>
                        </li>
                        <li v-if="bed.status == 2">
                            <span class="titel">上床时间：</span>
                            <span class="content">{{ bed.created }}</span>
                        </li>
                        <li v-if="bed.status == 2">
                            <span class="titel">预计产仔：</span>
                            <span class="content">{{ bed.litter.dueDate }}</span>
                        </li>
                        <li v-if="bed.status == 3">
                            <span class="titel">产子时间：</span>
                            <span class="content">{{ bed.litter.deliverTime }}</span>
                        </li>

                        <li v-if="bed.status == 4">
                            <span class="titel">断奶时间：</span>
                            <span class="content">{{ bed.litter.weaningTime }}</span>
                        </li>
                    </ul>
                </div>
                <!-- <div>
                    <ul>99</ul>
                </div>-->
            </article>
            <article class="pigletInfo" v-if="bed && bed.status!=2">
                <h3 class="title">
                    <span>猪仔情况</span>
                    <span>生产时间：{{ bed.litter.deliverTime }}</span>
                </h3>
                <div class="content">
                    <el-progress
                        type="circle"
                        :percentage="100"
                        :stroke-width="22"
                        :format="format.f1"
                        :width="200"
                    ></el-progress>
                    <el-progress
                        type="circle"
                        :percentage="100"
                        :stroke-width="22"
                        :format="format.f2"
                        color="#6AD288"
                        :width="200"
                    ></el-progress>
                    <el-progress
                        type="circle"
                        :percentage="100"
                        :stroke-width="22"
                        :format="format.f3"
                        color="#FCDA56"
                        :width="200"
                    ></el-progress>
                    <el-progress
                        v-if="bed.status < 4"
                        type="circle"
                        :percentage="100"
                        :stroke-width="22"
                        :format="format.f4"
                        color="#FF2727"
                        :width="200"
                    ></el-progress>
                    <el-progress
                        type="circle"
                        :percentage="90"
                        :stroke-width="22"
                        :format="format.f5"
                        color="#FCDA56"
                        :width="200"
                    ></el-progress>
                </div>
            </article>
            <article class="carousel">
                <div class="contianer" v-if="img1" style="height:480px;width:700px; overflow: hidden;">
                    <!-- <el-carousel height="480px" indicator-position="none" :interval="300000">
                        <el-carousel-item v-for="(item, index) in empty[0]" :key="index">
                            <img :src="item" style="width:100%" />
                        </el-carousel-item>
                    </el-carousel>-->
                    <img :src="img1" style="width:700px" />
                </div>
                <div class="contianer" v-if="img2" style="height:480px;700px; overflow: hidden;">
                    <!-- <el-carousel height="480px" indicator-position="none" :interval="300000">
                        <el-carousel-item v-for="(item, index) in empty[1]" :key="index">
                            <img :src="item" style="width:100%" />
                        </el-carousel-item>
                    </el-carousel>-->
                    <img :src="img2" style="width:700px;" />
                </div>
            </article>
            <article class="charts">
                <div>
                    <!-- <E-Con-T :dataArr="containerT" :timeArr="containertime"></E-Con-T> -->
                    <E-Con-T :dataArr="envTemp" :timeArr="time"></E-Con-T>
                </div>
                <div>
                    <E-Sow-T :dataArr="animalTemp" :timeArr="time"></E-Sow-T>
                </div>
                <div>
                    <E-Env-T :dataArr="envTemp" :timeArr="time"></E-Env-T>
                </div>
                <div>
                    <E-Ele-T :dataArr="battery" :timeArr="time"></E-Ele-T>
                </div>
            </article>
        </section>

        <el-dialog title="母猪信息" :visible.sync="isShow" width="40%">
            <ul class="dialog">
                <li class="cell">
                    <span>入场时间：</span>
                    <span>2020-08-19</span>
                </li>
                <li class="cell">
                    <span>品种：</span>
                    <span>大白</span>
                </li>
                <li class="cell">
                    <span>当前状态：</span>
                    <span>怀孕</span>
                </li>
                <li class="cell">
                    <span>窝均活仔：</span>
                    <span>11头</span>
                </li>
                <li class="cell">
                    <span>配种胎次：</span>
                    <span>1次</span>
                </li>
                <li class="cell">
                    <span>日龄：</span>
                    <span>395天</span>
                </li>
                <li class="cell">
                    <span>窝均断奶：</span>
                    <span>10头</span>
                </li>
            </ul>
            <h3 class="hr">分娩情况</h3>
            <article class="dialog_article">
                <el-steps direction="vertical" :active="active" finish-status="success">
                    <el-step title="断奶">
                        <template v-slot:description>
                            <span class="description">2020-08-08 断奶头数:14头 断奶窝重109.80kg</span>
                        </template>
                    </el-step>
                    <el-step title="分娩">
                        <template v-slot:description>
                            <span class="description">总仔：14 健:14 弱:0 活:14 木:0 死:0</span>
                        </template>
                    </el-step>
                    <el-step title="妊检" description="妊检结果:阳性">
                        <template v-slot:description>
                            <span class="description">妊检结果:阳性</span>
                        </template>
                    </el-step>
                    <el-step title="配种">
                        <template v-slot:description>
                            <span
                                class="description"
                            >配种天数:115 配种公猪:27003 配种时间:2020-04-25 预产期:2020-07-17 配种方式:人工授精</span>
                        </template>
                    </el-step>
                </el-steps>
            </article>
        </el-dialog>
    </div>
</template>

<script>
import EConT from "./charts/EConT";
import EEleT from "./charts/EEleT";
import EEnvT from "./charts/EEnvT";
import ESowT from "./charts/ESowT";

import {
    reqBedInfo,
    reqPiggyData,
    reqEarTagTemp
} from "@/api/deliveryRoomManagement.js";

import { fabric } from "fabric";

// 时间选择器配置
const pickerOptions = {
    // 禁用时间
    disabledDate(time) {
        return time.getTime() > Date.now();
    },
    shortcuts: [
        {
            text: "今天",
            onClick(picker) {
                picker.$emit("pick", new Date());
            }
        },
        {
            text: "昨天",
            onClick(picker) {
                const date = new Date();
                date.setTime(date.getTime() - 3600 * 1000 * 24);
                picker.$emit("pick", date);
            }
        },
        {
            text: "前天",
            onClick(picker) {
                const date = new Date();
                date.setTime(date.getTime() - 3600 * 1000 * 24 * 2);
                picker.$emit("pick", date);
            }
        }
    ]
};

export default {
    name: "Detail",
    components: {
        EConT,
        EEleT,
        EEnvT,
        ESowT
    },
    data() {
        return {
            active: 3,
            bed: null,
            date: "",
            format: {
                f1: percentage => {
                    return `产仔数:${this.bed.litter.deliverNumber}`;
                },
                f2: percentage => {
                    return `活仔数:${this.bed.litter.deliverNumber}`;
                },
                f3: percentage => {
                    return `存活率:${percentage}%`;
                },
                f4: percentage => {
                    return `预计断奶剩余天数:${30}`;
                },
                f5: percentage => {
                    return `仔猪日龄:${30}`;
                }
            },
            empty: [[], []],
            img1: null,
            img2: null,
            isShow: false,
            containerT: [],
            containertime: [],
            time: [],
            envTemp: [],
            animalTemp: [],
            battery: [],
            piggyData: null,
            imgData: null,
            timer: null
        };
    },
    created() {
        //this.$route.query.id   bed.litter.mother.earTagNo
        this.getDeliveryTable(this.$route.query.code);
        this.timer = setInterval(() => {
            //this.getPiggyData(this.bed.deviceId, this.bed.deviceCh);
            this.getDeliveryTable(this.$route.query.code);
        }, 1000 * 30);
    },
    beforeDestroy() {
        clearInterval(this.timer)
    },
    methods: {
        getDeliveryTable(code) {
            let data = { code };
            reqBedInfo(data)
                .then(res => {
                    this.bed = res;
                    // 获取耳标温度
                    this.getEarTagTemp();
                    //加载分析系统 设备数据
                    if (this.bed.deviceId && this.bed.deviceCh >= 0)
                        this.getPiggyData(this.bed.deviceId, this.bed.deviceCh);
                })
                .catch(err => {
                    console.error(err);
                });
        },
        // 获取耳标温度
        getEarTagTemp() {
            reqEarTagTemp({
                deviceId: this.bed.litter.mother.earTagId,
                start: new Date().getTime() - 3600 * 1000,
                end: new Date().getTime()
            })
                .then(res => {
                    this.time = [];
                    this.envTemp = [];
                    this.animalTemp = [];
                    this.battery = [];
                    res.content.forEach(item => {
                        this.time.push(item.time);
                        this.envTemp.push(item.envTemp);
                        this.animalTemp.push(item.animalTemp);
                        this.battery.push(item.battery * 100);
                    });
                    this.time.reverse()
                    this.envTemp.reverse()
                    this.animalTemp.reverse()
                    this.battery.reverse()
                })
                .catch(err => {
                    console.error(err);
                });
        },
        getPiggyData(deviceId, ch) {
            let end = new Date().getTime();
            let start = end - 36000000; //向前一个小时
            let data = { deviceId, ch, start, end };
            reqPiggyData(data)
                .then(res => {
                    this.piggyData = res.content;
                    if (this.piggyData.length > 0) {
                        this.containerT = [];
                        this.containertime = [];
                        //加载一张图片
                        this.loadImage(this.piggyData[0]);
                        for (let i = 0; i < this.piggyData.length; i++) {
                            // this.loadImage(this.piggyData[i], i);
                            //
                            this.containerT.push(this.piggyData[i].temp);
                            this.containertime.push(
                                this.piggyData[i].created
                            );
                        }
                        this.containerT.reverse()
                        this.containertime.reverse()
                    }
                })
                .catch(err => {
                    console.error(err);
                });
        },
        loadImage(piggydata) {
            //每个有两个图片
            let file1 = piggydata.file1;
            let ai1 = JSON.parse(piggydata.aiData1);
            this.drawImage(file1, ai1, 1);
            let file2 = piggydata.file2;
            let ai2 = JSON.parse(piggydata.aiData2);
            this.drawImage(file2, ai2, 2);
        },
        drawImage(file, ai, x) {
            //x一维，y二维
            let canvas = new fabric.Canvas(file);
            canvas.clear();
            let img = document.createElement("img");
            img.onload = () => {
                canvas.setWidth(img.width);
                canvas.setHeight(img.height);
                let ci = new fabric.Image(img);
                canvas.insertAt(ci, 0);
                //画画
                if (ai.result === "success") {
                    for (let i = 0; i < ai.piggy.length; i++) {
                        let o = ai.piggy[i];
                        canvas.insertAt(
                            new fabric.Circle({
                                left: o.point[0] - 5,
                                top: o.point[1] - 5,
                                radius: 10,
                                fill: "red"
                            }),
                            i + 1
                        ); //0被图片占了
                    }
                }
                let tmp = canvas.toDataURL("image/png");
                if (x === 1) this.$set(this, "img1", tmp);
                else this.$set(this, "img2", tmp);
                // this.empty[x][y] = tmp;
                this.$forceUpdate();
            };
            img.crossOrigin = "Anonymous";
            img.src = "http://115.238.57.190:8888/uploads/" + file;
            // console.log("http://115.238.57.190:8888/uploads/"+file)
        },
        // 请求厂房列表
        getDeliveryRoomInfo(data) {
            reqDeliveryRoomInfo(data)
                .then(res => {
                    this.images = res.value.images;
                    this.value = res.value;
                    this.hoursD = [];
                    this.hoursT = [];
                    this.daysD = [];
                    this.daysT = [];
                    res.value.thours.reverse().forEach(item => {
                        this.hoursD.push(item.temperature.toFixed(2));
                        this.hoursT.push(item.timestamp.substr(0, 14) + "时");
                    });
                    res.value.tdays.reverse().forEach(item => {
                        this.daysD.push(item.temperature.toFixed(2));
                        this.daysT.push(item.timestamp.substr(0, 10));
                    });
                })
                .catch(err => {
                    console.error(err);
                });
        },
        // 拿到图片数组
        getImglist() {
            reqImglist()
                .then(res => {
                    this.empty.a = res;
                })
                .catch(err => {
                    console.error(err);
                });
        },
        pickerChange(value) {
            console.log(value);
        },
        toSowDetail() {
            console.log("查看母猪信息");
        },
        goBack() {
            this.$router.go(-1);
        }
    }
};
</script>

<style lang="scss" scoped>
.Detail {
    .section {
        .video {
            margin: 30px;
            .mainInfo {
                font-size: 17px;
                > ul {
                    background-color: #eee;
                    border-radius: 10px;
                    padding: 15px;
                    > li {
                        margin: 5px 15px;
                        > .titel {
                            font-weight: 600;
                            color: #444;
                        }
                        > .content {
                            font-size: 16px;
                        }
                    }
                }
            }
        }
        .pigletInfo {
            padding: 0 200px 40px 100px;
            .title {
                display: flex;
                justify-content: space-between;
                margin: 0 0 30px 0;
                color: #444;
            }
            .content {
                display: flex;
                justify-content: space-around;
            }
        }
        .carousel {
            display: flex;
            justify-content: space-around;
            margin: 30px;
            > div {
                width: 700px;
                height: 500px;
                // border: 1px solid #00f;
            }
        }
        .charts {
            > div {
                margin: 60px;
            }
        }
    }
}
.dialog {
    display: flex;
    flex-wrap: wrap;
    font-size: 18px;
    padding: 25px;
    .cell {
        width: 45%;
        margin: 4px;
    }
}
.hr {
    margin: 25px;
}
.dialog_article {
    height: 300px;
    margin: 20px;
    .description {
        font-size: 17px;
    }
}

// border: 1px solid #00f;
</style>