闸机管理全部完成，增加查看设备历史曲线

src/router/routes.js

@@ -4,6 +4,7 @@ import Index from '../views/index/Index.vue'
 import DeviceType from '../views/deviceManagement/DeviceType.vue'
 import DeviceInfo from '../views/deviceManagement/DeviceInfo.vue'
 import CameraManagement from '../views/deviceManagement/CameraManagement.vue'
+import deviceHumiture from '../views/deviceManagement/deviceHumiture/deviceHumiture.vue'
 import SubDeviceAdmin from '../views/deviceManagement/SubDeviceAdmin.vue'
 /* 区域管理 */
 import AreaInfo from '../views/areaManagement/AreaInfo.vue'
@@ -63,6 +64,11 @@ export default [
 				component: CameraManagement
 			},
 			{
+				path: '/deviceHumiture',
+				name: 'deviceHumiture',
+				component: deviceHumiture
+			},
+			{
 				path: '/subDeviceAdmin',
 				name: 'subDeviceAdmin',
 				component: SubDeviceAdmin

src/views/areaManagement/AreaQuery.vue

@@ -23,7 +23,7 @@
                         v-model="searchValue"
                         class="input-with-select"
                     >
-                        <el-button @click="search" slot="append" icon="el-icon-search"></el-button>
+                        <el-button slot="append" icon="el-icon-search"></el-button>
                     </el-input>
                 </el-col>
             </el-row>
@@ -31,6 +31,16 @@
         <section class="section">
             <div v-for="item in childres" :key="item.id" class="item">
                 <p>{{ item.nodeName }}</p>
+                <div v-if="item.data">
+                    <div>
+                        <span>温度：</span>
+                        <span>{{ item.data.temperature }}℃</span>
+                    </div>
+                    <div>
+                        <span>湿度：</span>
+                        <span>{{ item.data.humidity }}</span>
+                    </div>
+                </div>
             </div>
         </section>
     </div>
@@ -43,37 +53,27 @@ import { mapActions } from "vuex";
 const arearCode = "area-info";
 // unit
 const units = {
-    // 查找子类  传入 树形data 和 级联选择的 value 的id数组
-    findChildres(tree, idArr) {
-        let result = tree;
-        idArr.forEach((item1, index1) => {
-            find(result);
-            function find(arr) {
-                arr.forEach(item2 => {
-                    if (item2["id"] == item1) {
-                        result = item2["childs"];
-                    } else {
-                        return;
-                    }
-                });
-            }
-        });
-        return result;
-    },
     // 扁平化 树
     flatTree(tree) {
-        let result = []
-        loop(tree)
+        let result = [];
+        loop(tree);
         function loop(treeArr) {
             treeArr.forEach(item => {
-                if(item['childs'] && item['childs'].length > 0) {
-                    loop(item['childs'])
+                if (item["childs"] && item["childs"].length > 0) {
+                    loop(item["childs"]);
                 }
-                delete item['childs']
-                result.push(item)
-            })
+                delete item["childs"];
+                result.push(item);
+            });
         }
-        return result
+        return result;
+    },
+    // 查找苏沪
+    findMeAndChildres(arr, id) {
+        let result = arr.filter(item => {
+            return item["id"] == id || item["parentId"] == id;
+        });
+        return result;
     }
 };
 
@@ -84,11 +84,14 @@ export default {
             areaTree: [],
             areaId: "",
             childres: "",
-            searchValue: ""
+            searchValue: "",
+            flatTreeArr: []
         };
     },
     created() {
         this.getTreeByCode(arearCode);
+        // this.getAreaHumiture("555")
+        this.getAreaHumiture("733344131971813376");
     },
     methods: {
         ...mapActions(["fetch"]),
@@ -124,6 +127,9 @@ export default {
                 },
                 success: res => {
                     this.areaTree = res;
+                    this.flatTreeArr = units.flatTree(
+                        JSON.parse(JSON.stringify(res))
+                    );
                     console.log(res);
                 },
                 fail: err => {
@@ -132,14 +138,56 @@ export default {
                 }
             });
         },
+        // 根据区域id查找 区域温湿度
+        getAreaHumiture(areaId, nodeName) {
+            this.fetch({
+                api: "/device/device-mount-point/get-by-areaId",
+                method: "GET",
+                data: { areaId },
+                success: res => {
+                    console.log(nodeName + "==>", res);
+                    this.childres.forEach((item,index) => {
+                        // debugger
+                        if (item.id == areaId) {
+                            // item.data = res[0].data;
+                            let temp = JSON.parse(JSON.stringify(item))
+                            temp.data = res[0].data
+                            this.$set(this.childres,index,temp)
+                        }
+                    });
+                    
+                },
+                fail: err => {
+                    if (err.errMsg) this.$message.error(err.errMsg);
+                    else this.$message.error("服务器发生异常");
+                }
+            });
+        },
         // 区域选择 改变
         selectAreaChange(value) {
             console.log(value);
-            this.childres = units.findChildres(this.areaTree, value);
+            this.childres = units.findMeAndChildres(
+                this.flatTreeArr,
+                value[value.length - 1]
+            );
+            // 循环查找 自己区域下的温湿度信息
+            this.childres.forEach(item => {
+                this.getAreaHumiture(item.id, item.nodeName);
+            });
         },
         // 搜索
         search() {
-            console.log(this.searchValue);
+            console.log(this.searchValue.trim());
+            // debugger
+            if (this.searchValue.trim() == "") return;
+            let exp = eval("/" + this.searchValue + "/g");
+            let tempArr = this.flatTreeArr.filter(item => {
+                return exp.test(item.nodeName);
+                // debugger
+                // console.log(exp.test(item.nodeName))
+            });
+            console.log(tempArr);
+            this.childres = tempArr;
         }
     }
 };

src/views/deviceManagement/DeviceInfo.vue

@@ -39,6 +39,7 @@
                 <el-table-column fixed="right" label="操作" width="200">
                     <template slot-scope="scope">
                         <el-button @click="mount(scope.row)" type="text" size="small">挂载</el-button>
+                        <el-button @click="look(scope.row)" type="text" size="small">查看</el-button>
                         <el-button @click="edit(scope.row)" type="text" size="small">编辑</el-button>
                         <el-popconfirm title="是否删除此设备的信息？" @onConfirm="del(scope.row)">
                             <el-button slot="reference" type="text" size="small">删除</el-button>
@@ -313,6 +314,12 @@ export default {
                 }
             });
         },
+        // 
+        look(row) {
+            this.$router.push({
+                path: "deviceHumiture"
+            })
+        },
 
         // 请求 区域树
         getAreaTree(parentId) {
@@ -421,7 +428,6 @@ export default {
             let areaId = value[value.length - 1];
             let areaTree = this.areaTree;
             this.mountform.areaName = findName(areaId);
-            console.log(areaName);
 
             function findName(id) {
                 let nodeName = undefined;
@@ -445,6 +451,7 @@ export default {
             console.log(row);
             this.isShowDialogMount = true;
             this.mountform.id = row.id;
+            this.mountform.categoryId = row.categoryId;
         },
 
         // 编辑

src/views/deviceManagement/deviceHumiture/charts/chart_a.vue

@@ -0,0 +1,114 @@
+<template>
+    <div class="chart_a">
+        
+        <div id="chart_a" style="width: 80%;height:400px;"></div>
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            orgOptions: {},
+            // subtext: "副标题"
+        };
+    },
+    props: {
+         dateArr:{type:Array},
+         data:{type:Array}
+     },
+    created() {
+        
+    },
+    watch: {
+        dateArr(nVal,oVal) {
+            this.drawChart();
+        }
+    },
+    mounted() {
+        this.drawChart();
+    },
+    methods: {
+        drawChart() {
+            // 基于准备好的dom，初始化echarts实例
+            let myChart = this.$echarts.init(
+                document.getElementById('chart_a')
+            );
+            // 指定图表的配置项和数据
+            let option = {
+                title: {
+                    text: "温度",
+                    // subtext: this.subtext,
+                    left: 100
+                },
+                tooltip: {
+                    trigger: "axis"
+                },
+                toolbox: {
+                    show: true,
+                    feature: {
+                        dataZoom: {
+                            yAxisIndex: "none"
+                        },
+                        dataView: { readOnly: false },
+                        magicType: { type: ["line", "bar"] },
+                        restore: {},
+                        saveAsImage: {}
+                    }
+                },
+                color: {
+                    type: "linear",
+                    x: 0,
+                    y: 0,
+                    x2: 0,
+                    y2: 1,
+                    colorStops: [
+                        {
+                            offset: 0,
+                            color: "red" // 0% 处的颜色
+                        },
+                        {
+                            offset: 1,
+                            color: "blue" // 100% 处的颜色
+                        }
+                    ]
+                },
+                xAxis: {
+                    type: "category",
+                    boundaryGap: false,
+                    data: this.dateArr
+                },
+                yAxis: {
+                    type: "value",
+                    axisLabel: {
+                        formatter: "{value} °C"
+                    },
+                    scale: true
+                },
+                series: [
+                    {
+                        name: "耳温",
+                        type: "line",
+                        data: this.data,
+                        markPoint: {
+                            data: [
+                                { type: "max", name: "最大值" },
+                                { type: "min", name: "最小值" }
+                            ]
+                        },
+                        markLine: {
+                            data: [{ type: "average", name: "平均值" }]
+                        }
+                    }
+                ]
+            };
+            // 使用刚指定的配置项和数据显示图表。
+            myChart.setOption(option);
+        }
+    }
+};
+</script>
+
+<style lang="scss" scoped>
+
+</style>

src/views/deviceManagement/deviceHumiture/charts/chart_b.vue

@@ -0,0 +1,110 @@
+<template>
+    <div class="chart_b">
+        <div id="chart_b" style="width: 80%;height:400px;"></div>
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            orgOptions: {},
+            // subtext: "副标题"
+        };
+    },
+    created() {},
+    props: {
+        dateArr:{type:Array},
+        data:{type:Array}
+    },
+    watch: {
+        dateArr(nVal,oVal) {
+            this.drawChart();
+        }
+    },
+
+    mounted() {
+        this.drawChart();
+    },
+    methods: {
+        drawChart() {
+            // 基于准备好的dom，初始化echarts实例
+            let myChart = this.$echarts.init(document.getElementById("chart_b"));
+            // 指定图表的配置项和数据
+            let option = {
+                title: {
+                    text: "湿度",
+                    // subtext: this.subtext,
+                    left: 100
+                },
+                tooltip: {
+                    trigger: "axis"
+                },
+                toolbox: {
+                    show: true,
+                    feature: {
+                        dataZoom: {
+                            yAxisIndex: "none"
+                        },
+                        dataView: { readOnly: false },
+                        magicType: { type: ["line", "bar"] },
+                        restore: {},
+                        saveAsImage: {}
+                    }
+                },
+                color: {
+                    type: "linear",
+                    x: 0,
+                    y: 0,
+                    x2: 0,
+                    y2: 1,
+                    colorStops: [
+                        {
+                            offset: 0,
+                            color: "red" // 0% 处的颜色
+                        },
+                        {
+                            offset: 1,
+                            color: "blue" // 100% 处的颜色
+                        }
+                    ]
+                },
+                xAxis: {
+                    type: "category",
+                    boundaryGap: false,
+                    data: this.dateArr || []
+                },
+                yAxis: {
+                    type: "value",
+                    axisLabel: {
+                        formatter: "{value} °C"
+                    },
+                    scale: true
+                },
+                series: [
+                    {
+                        name: "耳温",
+                        type: "line",
+                        // data: [32.5, 32.6, 32.4, 32.5, 32.4, 32.6, 32.4],
+                        data: this.data,
+                        markPoint: {
+                            data: [
+                                { type: "max", name: "最大值" },
+                                { type: "min", name: "最小值" }
+                            ]
+                        },
+                        markLine: {
+                            data: [{ type: "average", name: "平均值" }]
+                        }
+                    }
+                ]
+            };
+            // 使用刚指定的配置项和数据显示图表。
+            myChart.setOption(option);
+        }
+    }
+};
+</script>
+
+<style lang="scss" scoped>
+</style>

src/views/deviceManagement/deviceHumiture/deviceHumiture.vue

@@ -0,0 +1,229 @@
+<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>
+            </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";
+
+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
+    },
+    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 * 60);
+    },
+    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>

src/views/gateMachineManagement/EnterOut.vue

@@ -7,12 +7,11 @@
             </el-button-group>
         </header>
         <section class="section">
-            <el-table :data="EnterOutList">
+            <el-table :data="EnterOutList.content">
                 <el-table-column prop="recordInfo.id" label="序号" width="120px"></el-table-column>
                 <el-table-column prop="deviceInfo.description" label="机器名字"></el-table-column>
                 <el-table-column prop="useInfo.name" label="出入者"></el-table-column>
                 <el-table-column prop="useInfo.idCardNum" label="出入者身份证号"></el-table-column>
-                <el-table-column prop="useInfo.name" label="出入者"></el-table-column>
                 <el-table-column prop="recordInfo.updated" label="进出时间"></el-table-column>
                 <el-table-column fixed="right" label="操作" width="200">
                     <template slot-scope="scope">
@@ -30,7 +29,7 @@
                         @current-change="pageChange"
                         background
                         layout="prev, pager, next"
-                        :page-count="5"
+                        :page-count="EnterOutList.totalPages"
                     ></el-pagination>
                 </el-col>
             </el-row>
@@ -60,7 +59,7 @@ export default {
         return {
             EnterOutList: [],
             isLookOut: true,
-            showDialog: true,
+            showDialog: false,
             userImgUrl: "",
             pageSize,
             page: 1
@@ -77,11 +76,11 @@ export default {
                 : "/analyse/uface/in";
             let data = {
                 pageSize: this.pageSize,
-                page: this.page
+                pageNum: this.page
             };
             this.fetch({
                 api,
-                method: "GET",
+                method: "POST",
                 data,
                 success: res => {
                     console.log(res);
@@ -98,17 +97,17 @@ export default {
         pageChange(p) {
             console.log(p);
             this.page = p;
-            // this.getEnterOutList();
+            this.getEnterOutList();
         },
         // 点击 查看出
         lookOut() {
             this.isLookOut = false;
-            // this.getEnterOutList();
+            this.getEnterOutList();
         },
         // 点击 查看入
         lookEnter() {
             this.isLookOut = true;
-            // this.getEnterOutList();
+            this.getEnterOutList();
         },
         // 查看出入者照片
         look(imgUrl) {