|
|
@@ -12,7 +12,6 @@
|
|
|
v-model="date"
|
|
|
@change="pickerChange"
|
|
|
type="date"
|
|
|
- value-format="yyyy-MM-dd"
|
|
|
placeholder="选择日期"
|
|
|
></el-date-picker>
|
|
|
</div>
|
|
|
@@ -30,25 +29,45 @@
|
|
|
<ul>
|
|
|
<li>
|
|
|
<span class="titel">母猪耳标：</span>
|
|
|
- <el-link class="content" type="primary" v-if="bed" @click="isShow=true">
|
|
|
- {{bed.litter.mother.earTagNo}}
|
|
|
- </el-link>
|
|
|
+ <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>
|
|
|
+ <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> -->
|
|
|
+ </div>-->
|
|
|
</article>
|
|
|
- <article class="pigletInfo" v-if="bed">
|
|
|
+ <article class="pigletInfo" v-if="bed && bed.status!=2">
|
|
|
<h3 class="title">
|
|
|
<span>猪仔情况</span>
|
|
|
<span>生产时间：{{ bed.litter.deliverTime }}</span>
|
|
|
@@ -78,7 +97,7 @@
|
|
|
:width="200"
|
|
|
></el-progress>
|
|
|
<el-progress
|
|
|
- v-if="bed.status < 4"
|
|
|
+ v-if="bed.status < 4"
|
|
|
type="circle"
|
|
|
:percentage="100"
|
|
|
:stroke-width="22"
|
|
|
@@ -98,15 +117,15 @@
|
|
|
</article>
|
|
|
<article class="carousel">
|
|
|
<div class="contianer" v-if="empty[0].length>0">
|
|
|
- <el-carousel height="400px" indicator-position="none" :interval="3000">
|
|
|
- <el-carousel-item v-for="(item, index) in empty[0]" :key="item + index">
|
|
|
+ <el-carousel height="360px" indicator-position="none" :interval="3000">
|
|
|
+ <el-carousel-item v-for="(item, index) in empty[0]" :key="index">
|
|
|
<img :src="item" style="width:100%" />
|
|
|
</el-carousel-item>
|
|
|
</el-carousel>
|
|
|
</div>
|
|
|
<div class="contianer" v-if="empty[1].length>0">
|
|
|
- <el-carousel height="400px" indicator-position="none" :interval="3000">
|
|
|
- <el-carousel-item v-for="(item, index) in empty[1]" :key="item + index">
|
|
|
+ <el-carousel height="360px" indicator-position="none" :interval="3000">
|
|
|
+ <el-carousel-item v-for="(item, index) in empty[1]" :key="index">
|
|
|
<img :src="item" style="width:100%" />
|
|
|
</el-carousel-item>
|
|
|
</el-carousel>
|
|
|
@@ -114,22 +133,78 @@
|
|
|
</article>
|
|
|
<article class="charts">
|
|
|
<div>
|
|
|
- <E-Con-T :dataArr="dataArr" :timeArr="timeArr"></E-Con-T>
|
|
|
+ <E-Con-T :dataArr="containerT" :timeArr="containertime"></E-Con-T>
|
|
|
</div>
|
|
|
<div>
|
|
|
- <E-Sow-T :dataArr="dataArr" :timeArr="timeArr"></E-Sow-T>
|
|
|
+ <E-Sow-T :dataArr="animalTemp" :timeArr="time"></E-Sow-T>
|
|
|
</div>
|
|
|
<div>
|
|
|
- <E-Env-T :dataArr="dataArr" :timeArr="timeArr"></E-Env-T>
|
|
|
+ <E-Env-T :dataArr="envTemp" :timeArr="time"></E-Env-T>
|
|
|
</div>
|
|
|
<div>
|
|
|
- <E-Ele-T :dataArr="dataArr" :timeArr="timeArr"></E-Ele-T>
|
|
|
+ <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>
|
|
|
@@ -148,10 +223,11 @@ import empty5 from "../../../assets/img/empty5.jpg";
|
|
|
|
|
|
import {
|
|
|
reqBedInfo,
|
|
|
- reqPiggyData
|
|
|
+ reqPiggyData,
|
|
|
+ reqEarTagTemp
|
|
|
} from "@/api/deliveryRoomManagement.js";
|
|
|
|
|
|
-import {fabric} from "fabric"
|
|
|
+import { fabric } from "fabric";
|
|
|
|
|
|
// 时间选择器配置
|
|
|
const pickerOptions = {
|
|
|
@@ -212,87 +288,131 @@ export default {
|
|
|
},
|
|
|
data() {
|
|
|
return {
|
|
|
- bed:null,
|
|
|
+ active: 3,
|
|
|
+ bed: null,
|
|
|
date: "",
|
|
|
format,
|
|
|
- empty: [[],[]],
|
|
|
+ empty: [[], []],
|
|
|
isShow: false,
|
|
|
- timeArr: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12],
|
|
|
- dataArr: [32, 32, 31, 35, 30, 29, 36, 32, 31, 35, 35, 36],
|
|
|
- piggyData:null,
|
|
|
- imgData:null,
|
|
|
+ containerT: [],
|
|
|
+ containertime: [],
|
|
|
+ time: [],
|
|
|
+ envTemp: [],
|
|
|
+ animalTemp: [],
|
|
|
+ battery: [],
|
|
|
+ piggyData: null,
|
|
|
+ imgData: null
|
|
|
};
|
|
|
},
|
|
|
created() {
|
|
|
- //this.$route.query.id
|
|
|
- this.getDeliveryTable(this.$route.query.code)
|
|
|
+ //this.$route.query.id bed.litter.mother.earTagNo
|
|
|
+ this.getDeliveryTable(this.$route.query.code);
|
|
|
},
|
|
|
beforeDestroy() {},
|
|
|
methods: {
|
|
|
- getDeliveryTable(code){
|
|
|
- let data = {code}
|
|
|
- reqBedInfo(data).then(res=>{
|
|
|
- console.log(res)
|
|
|
- this.bed = res
|
|
|
- //加载分析系统 设备数据
|
|
|
- if(this.bed.deviceId && this.bed.deviceCh)
|
|
|
- this.getPiggyData(this.bed.deviceId,this.bed.deviceCh)
|
|
|
- }).catch(err=>{
|
|
|
- console.error(err);
|
|
|
+ getDeliveryTable(code) {
|
|
|
+ let data = { code };
|
|
|
+ reqBedInfo(data)
|
|
|
+ .then(res => {
|
|
|
+ console.log(res);
|
|
|
+ this.bed = res;
|
|
|
+ console.log(99999999999999);
|
|
|
+ // 获取耳标温度
|
|
|
+ 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 => {
|
|
|
+ console.log(res);
|
|
|
+ this.time = []
|
|
|
+ this.envTemp = []
|
|
|
+ this.animalTemp = []
|
|
|
+ this.battery = []
|
|
|
+ res.content.forEach(item => {
|
|
|
+ this.time.unshift(item.time)
|
|
|
+ this.envTemp.unshift(item.envTemp)
|
|
|
+ this.animalTemp.unshift(item.animalTemp)
|
|
|
+ this.battery.unshift(item.battery * 100)
|
|
|
+ })
|
|
|
+ })
|
|
|
+ .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=>{
|
|
|
- console.log(res)
|
|
|
- this.piggyData = res.content
|
|
|
- if(this.piggyData.length>0){
|
|
|
- for(let i=0;i<this.piggyData.length;i++){
|
|
|
- this.loadImage(this.piggyData[i],i)
|
|
|
+ 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 = [];
|
|
|
+ for (let i = 0; i < this.piggyData.length; i++) {
|
|
|
+ this.loadImage(this.piggyData[i], i);
|
|
|
+ //
|
|
|
+ this.containerT.unshift(this.piggyData[i].temp);
|
|
|
+ this.containertime.unshift(this.piggyData[i].created);
|
|
|
+ }
|
|
|
}
|
|
|
- }
|
|
|
- }).catch(err=>{
|
|
|
- console.error(err)
|
|
|
- })
|
|
|
+ })
|
|
|
+ .catch(err => {
|
|
|
+ console.error(err);
|
|
|
+ });
|
|
|
},
|
|
|
- loadImage(piggydata,y){
|
|
|
+ loadImage(piggydata, y) {
|
|
|
//每个有两个图片
|
|
|
- let file1 = piggydata.file1
|
|
|
- let ai1 = JSON.parse(piggydata.aiData1)
|
|
|
- this.drawImage(file1,ai1,0,y)
|
|
|
- let file2 = piggydata.file2
|
|
|
- let ai2 = JSON.parse(piggydata.aiData2)
|
|
|
- this.drawImage(file2,ai2,1,y)
|
|
|
+ let file1 = piggydata.file1;
|
|
|
+ let ai1 = JSON.parse(piggydata.aiData1);
|
|
|
+ this.drawImage(file1, ai1, 0, y);
|
|
|
+ let file2 = piggydata.file2;
|
|
|
+ let ai2 = JSON.parse(piggydata.aiData2);
|
|
|
+ this.drawImage(file2, ai2, 1, y);
|
|
|
},
|
|
|
- drawImage(file,ai,x,y){//x一维，y二维
|
|
|
+ drawImage(file, ai, x, y) {
|
|
|
+ //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)
|
|
|
+ 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被图片占了
|
|
|
+ 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");
|
|
|
- this.empty[x][y] = tmp
|
|
|
- this.$forceUpdate()
|
|
|
- }
|
|
|
- img.crossOrigin='Anonymous'
|
|
|
- img.src = "http://115.238.57.190:8888/uploads/"+file
|
|
|
+ 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)
|
|
|
},
|
|
|
// 请求厂房列表
|
|
|
@@ -347,17 +467,18 @@ export default {
|
|
|
.video {
|
|
|
margin: 30px;
|
|
|
.mainInfo {
|
|
|
+ font-size: 17px;
|
|
|
> ul {
|
|
|
background-color: #eee;
|
|
|
border-radius: 10px;
|
|
|
padding: 15px;
|
|
|
- >li{
|
|
|
+ > li {
|
|
|
margin: 5px 15px;
|
|
|
- >.titel{
|
|
|
+ > .titel {
|
|
|
font-weight: 600;
|
|
|
color: #444;
|
|
|
}
|
|
|
- >.content{
|
|
|
+ > .content {
|
|
|
font-size: 16px;
|
|
|
}
|
|
|
}
|
|
|
@@ -394,6 +515,26 @@ export default {
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
+.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>
|
linan