smScreen/src/views/robot/robot.vue

<template>
    <div class="robot">
        <div class="flex">
            <div class="left">
                <!-- 人脸识别   -->
                <div class="box">
                    <div class="tab-t">
                        <div class="tab-title">人脸识别记录</div>
                    </div>
                    <div class="box-content">
                        <div>
                            <img class="img-size" src="../../assets/u525.png" alt="">
                        </div>
                        <div class="person-text">
                            <p>识别时间：{{dateValue}}</p>
                            <p>识别地点：1栋3单元 </p>
                            <p>姓名：张一力</p>
                            <p>职位：饲养员</p>
                            <p>体温：36.6℃</p>
                        </div>
                    </div>
                </div>
                <!-- 机器人操控 -->
                <div class="control">
                    <div class="tab-t">
                        <div class="tab-title">机器人操控</div>
                    </div>
                    <div class="box-content">
                        <div class="control-left">
                            <img class="img-position img-top" @click="onDirection(1)" src="../../assets/u532.svg" alt="">
                            <img class="img-position img-right" @click="onDirection(4)" src="../../assets/u532.svg" alt="">
                            <img class="img-position img-bottom" @click="onDirection(2)" src="../../assets/u532.svg" alt="">
                            <img class="img-position img-left"  @click="onDirection(3)" src="../../assets/u532.svg" alt="">
                            <button class="button button-red" @click="stop">停止</button>
                        </div>
                        <div class="control-right">
                            <div>
                                <button class="button button-green" @click="start">自动</button>
                                <button class="button button-blue">拉近</button>
                            </div>
                            <div>
                                <button class="button button-gray" @click="operation">手动</button>
                                <button class="button button-blue">拉远</button>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- 报警信息 -->
                <div class="box box_height">
                    <div class="tab-t">
                        <div class="tab-title">报警信息</div>
                    </div>
                    <div class="call-text">
                        <p class="call-detail" v-for="(item, i) in arr" :key="i">
                            <span>{{item.date}}</span>
                            <span style="padding-left: 15px;">{{item.position}}</span>
                            <span style="padding-left: 15px;">{{item.asl}}</span>
                        </p>
                    </div>
                </div>
            </div>
            <div class="right">
                <div class="container">
                    <div class="container-left">
                        <div class="line1">
                            <div class="today">{{date}}</div>
                            <div class="test">机器人巡查</div>
                        </div>
                        <div class="container-content">
                            <div class="line2">
                                <select name="1" class="select-robot">
                                    <option value ="1">1号机器人(巡查中-1栋)</option>
                                    <option value ="2">2号机器人(充电中)</option>
                                    <option value="3">3号机器人(故障)</option>
                                </select>
                            </div>
                            <div class="container-video">
                                <video src="../../assets/robot.mp4" controls style="width: 785px; height: 430px;">您的浏览器暂不支持Video播放</video>
                            </div>
                        </div>
                    </div>
                    <div class="container-right">
                        <!-- 温度统计图  -->
                        <div class="wrapper">
                            <div class="tab-t">
                                <div class="tab-title">温度走势图</div>
                            </div>
                            <div class="wrapper-content">
                                <div ref="chartRight1" style="width: 100%; height: 100%"></div>
                            </div>
                        </div>
                        <!-- 湿度统计图  -->
                        <div class="wrapper">
                            <div class="tab-t">
                                <div class="tab-title">湿度走势图</div>
                            </div>
                            <div class="wrapper-content">
                                <div ref="chartRight2" style="width: 100%; height: 100%"></div>
                            </div>
                        </div>
                        <!-- 温度统计图  -->
                        <div class="wrapper">
                            <div class="tab-t">
                                <div class="tab-title">氨气浓度走势图</div>
                            </div>
                            <div class="wrapper-content">
                                <div ref="chartRight3" style="width: 100%; height: 100%"></div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="robot-path">
                    <div class="robot-title">机器人实时路线</div>
                    <!-- canvas画图 -->
                    <div class="robot-canvas">
                        <robot-canvas ref="rb_canvas"></robot-canvas>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import utils from '../../utils/utils';
import RobotCanvas from '../../components/robotCanvas';
export default {
    name: "robot",
    components: {
        RobotCanvas
    },
    data() {
		return {
		    optionsWd: {
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    animation: false
                }
            },
            xAxis: [
                {
                    type: 'category',
                    boundaryGap: false,
                    axisLine: {onZero: true},
                    data: [],
                    name: '时间',
                    nameTextStyle: {
                        color: '#ffffff',
                    },
                    axisLabel: {
                        color: '#ffffff'
                    },
                    axisLine: {
                        lineStyle: {
                            color: '#ffffff'
                        }
                    }
                },
            ],
            yAxis: [
                {
                    name: '摄氏度：℃',
                    type: 'value',
                    max: 35,
                    nameTextStyle: {
                        color: '#ffffff'
                    },
                    axisLabel: {
                        color: '#ffffff'
                    },
                    axisLine: {
                        lineStyle: {
                            color: '#ffffff'
                        }
                    }
                },
            ],
            series: [
                {
                    name: '摄氏度：℃',
                    type: 'line',
                    symbolSize: 8,
                    hoverAnimation: false,
                    data: [15, 20, 20, 21, 22, 26, 24, 28, 25, 26, 21, 22, 23, 24, 26, 26, 26, 24, 25, 22, 20, 19, 18, 25, 26, 27, 26, 25, 25, 21,
                            20, 21, 20, 22, 23, 25, 24, 26, 28, 27, 26, 24, 21, 20, 24, 24, 25, 28
                    ]
                },
            ]
        },
        optionsSd: {
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    animation: false
                }
            },
            xAxis: [
                {
                    type: 'category',
                    boundaryGap: false,
                    axisLine: {onZero: true},
                    data: ['00:00', '00:30', '01:00', '01:30', "02:00", "02:30", "03:00", "03:30", "04:00", "04:30","05:00","05:30","06:00","06:30","07:00",
                        "07:30", "08:00", "08:30", "09:00", "09:30", "10:00", "10:30", "11:00", "11:30", "12:00", "12:30", "13:00", "13:30", "14:00", "14:30",
                        "15:00", "15:30", "16:00", "16:30", "17:00", "17:30", "18:00", "18:30", "19:00", "19:30", "20:00", "20:30", "21:00", "21:30", "22:00",
                        "22:30", "23:00", "23:30"
                    ],
                    name: '时间',
                    nameTextStyle: {
                        color: '#ffffff',
                    },
                    axisLabel: {
                        color: '#ffffff'
                    },
                    axisLine: {
                        lineStyle: {
                            color: '#ffffff'
                        }
                    }
                },
            ],
            yAxis: [
                {
                    name: 'RH',
                    type: 'value',
                    max: 100,
                    nameTextStyle: {
                        color: '#ffffff'
                    },
                    axisLabel: {
                        color: '#ffffff'
                    },
                    axisLine: {
                        lineStyle: {
                            color: '#ffffff'
                        }
                    }
                },
            ],
            series: [
                {
                    name: 'RH',
                    type: 'line',
                    symbolSize: 8,
                    hoverAnimation: false,
                    data: [70, 80, 75, 60, 52, 76, 84, 88, 75, 66, 71, 72, 73, 74, 76, 76, 67, 74, 75, 72, 80, 79, 78, 75, 76, 77, 67, 75, 85, 71,
                        70, 71, 70, 72, 73, 75, 74, 76, 78, 77, 76, 74, 71, 70, 74, 74, 77, 78
                    ]
                },
            ]
        },
        optionsAq: {
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    animation: false
                }
            },
            xAxis: [
                {
                    type: 'category',
                    boundaryGap: false,
                    axisLine: {onZero: true},
                    data: ['00:00', '00:30', '01:00', '01:30', "02:00", "02:30", "03:00", "03:30", "04:00", "04:30","05:00","05:30","06:00","06:30","07:00",
                        "07:30", "08:00", "08:30", "09:00", "09:30", "10:00", "10:30", "11:00", "11:30", "12:00", "12:30", "13:00", "13:30", "14:00", "14:30",
                        "15:00", "15:30", "16:00", "16:30", "17:00", "17:30", "18:00", "18:30", "19:00", "19:30", "20:00", "20:30", "21:00", "21:30", "22:00",
                        "22:30", "23:00", "23:30"
                    ],
                    name: '时间',
                    nameTextStyle: {
                        color: '#ffffff',
                    },
                    axisLabel: {
                        color: '#ffffff'
                    },
                    axisLine: {
                        lineStyle: {
                            color: '#ffffff'
                        }
                    }
                },
            ],
            yAxis: [
                {
                    name: 'mg/m³',
                    type: 'value',
                    max: 5,
                    nameTextStyle: {
                        color: '#ffffff'
                    },
                    axisLabel: {
                        color: '#ffffff'
                    },
                    axisLine: {
                        lineStyle: {
                            color: '#ffffff'
                        }
                    }
                },
            ],
            series: [
                {
                    name: 'mg/m³',
                    type: 'line',
                    symbolSize: 8,
                    hoverAnimation: false,
                    data: [
                            0.5, 1.2, 2.8, 3, 2.1, 2.4, 2.3, 1.2, 1.1, 1, 0.8, 2.1, 2.2, 2.3, 2.4, 2.7, 2.1, 1.5, 1.4, 2.3, 2.4, 1.1, 1.2, 1.3, 1.4, 1.6, 2.2,
                            2.8, 2.1, 1.5, 1.1, 1.2, 1.2, 1.4, 1.5, 1.1, 0.9, 0.8, 0.7, 0.5, 0.9, 1.2, 1.9, 1.4, 1.5, 1.6, 1.7, 1.5, 1.2, 1
                    ]
                },
            ]
        },
        date: '',
        dateValue: '',
        arr: [ {date: '10-30 08:38:28', position: '1栋3单元', asl: '1号栏出现猪只体温异常'} ],
    }
    },
    created() {},
	  methods: {
        getEchartData() {
            const chartRight1 = this.$refs.chartRight1;
            const chartRight2 = this.$refs.chartRight2;
            const chartRight3 = this.$refs.chartRight3;

            const myChartRight1 = this.$echarts.init(chartRight1);
            const myChartRight2 = this.$echarts.init(chartRight2);
            const myChartRight3 = this.$echarts.init(chartRight3);

            myChartRight1.setOption(this.optionsWd);
            myChartRight2.setOption(this.optionsSd);
            myChartRight3.setOption(this.optionsAq);

            window.addEventListener("resize", function () {
                myChartRight1.resize();
                myChartRight2.resize();
                myChartRight3.resize();
            });
            this.$on('hook:destroyed:', () => {
                window.removeEventListener("resize", function() {
                    myChartRight1.resize();
                    myChartRight2.resize();
                    myChartRight3.resize();
                });
            })
        },
        onDirection(data) {
            if(data == 1) {
                // this.$refs.rb_canvas.goUp();
            } else if(data == 2){
                // this.$refs.rb_canvas.goBottom();
            } else if (data == 3) {
                // this.$refs.rb_canvas.goLeft();
            } else {
                // this.$refs.rb_canvas.goRight();
            }
            this.$message.error('暂时无法点击！');
        },
        start() {
            // this.$message.error('自动操作暂时关闭！');
            this.$refs.rb_canvas.startInterval();
        },
        stop() {
            // this.$message.error('停止操作暂时关闭');
            this.$refs.rb_canvas.stopInterval();
        },
        operation() {
            this.$message.error('手动操作暂时关闭！');
        },
        getRandomIntInclusive(min, max) {
            // min = Math.ceil(min);
            // max = Math.floor(max);
            return Math.floor(Math.random() * (max - min + 1)) + min; //含最大值，含最小值
        },
        setInter() {
            let that = this;
            setInterval(() => {
                let date = Date.parse(new Date());
                let dateNum = utils.timeMount(date);
                let num = this.getRandomIntInclusive(1, 3);
                let dan = this.getRandomIntInclusive(1, 4);
                let position = num + '栋' + dan + '单元';
                let asl = num + '号栏出现猪只体温异常';
                that.$nextTick(() => {
                    that.arr.unshift({date: dateNum, position: position, asl: asl});
                });
            }, 60000);
        },
        randomData(i) {
            let now = new Date();
            now = new Date(now - 60000 * i);
            let mm = now.getHours() < 10 ? '0' + now.getHours() : now.getHours();
            let ss = now.getMinutes() < 10 ? '0' + now.getMinutes() : now.getMinutes();
            return mm + ':' + ss;
        },
        wendu() {
            return Math.floor(Math.random() * 11) + 18;
        },
        shidu() {
            return Math.floor(Math.random() * 40) + 40;
        },
        anqi() {
            return Math.floor(Math.random() * 6);
        },
        setTime() {
            this.optionsWd.xAxis[0].data= [];
            this.optionsWd.series[0].data = [];
            for (var i = 0; i <= 10; i++) {
                // this.$nextTick(() => {
                    this.optionsWd.xAxis[0].data.unshift(this.randomData(i));
                    this.optionsSd.xAxis[0].data = this.optionsWd.xAxis[0].data;
                    this.optionsAq.xAxis[0].data = this.optionsWd.xAxis[0].data;
                    // 温度
                    this.optionsWd.series[0].data.unshift(this.wendu());
                    // 湿度
                    this.optionsSd.series[0].data.unshift(this.shidu());
                    // 氨气
                    this.optionsAq.series[0].data.unshift(this.anqi());
                // })
            }
            this.getEchartData();
        },
        setcommit() {
            setInterval(() => {
                this.setTime();
            }, 60000)
        }
    },
    mounted() {
        let date = Date.parse(new Date());
        this.date = utils.timestamp(date);
        let dates = utils.timestamp(date).split('-')[0];
        this.dateValue =  utils.timeMount(date);
        // this.getEchartData();
        this.setInter();
        this.setTime();
        this.setcommit();
    },
    // 离开这个页面 关掉定时器
    beforeRouteLeave (to, from, next) {
        this.stop();
        next();
    }
};
</script>

<style lang="scss" scope>
.robot {
    box-sizing: border-box;
    flex-grow: 1;
    color: #eee;
    .button {
        width: 95px;
        height: 38px;
        font-size: 16px;
        margin-right: 10px;
        margin-bottom: 10px;
        color: white;
        border: 0;
        background-color: transparent;
        outline: none;
        border-radius: 5px;
        cursor: pointer;
    }
    .flex {
        height: calc(100% - 40px);
        display: flex;
        padding: 20px 20px 0 20px;
        .left {
            width: 500px;
            .box {
                border-radius: 20px;
                overflow: hidden;
                margin-bottom: 30px;
                .tab-t {
                    height: 40px;
                    position: relative;
                    line-height: 40px;
                    padding-left: 80px;
                    background-color: rgba(14, 30, 81, 1);
                    .tab-title {
                        font-size: 18px;
                    }
                    .tab-title:before {
                        /*<!--content: '';-->*/
                        /*<!--width: 16px;-->*/
                        /*<!--height: 16px;-->*/
                        /*<!--background: #1eff00;-->*/
                        /*<!--border: 1px solid #1eff00;-->*/
                        /*<!--transform: rotate(-45deg);-->*/
                        /*<!--position: absolute;-->*/
                        /*<!--top: 10px;-->*/
                        /*<!--left: 30px;-->*/
                        content: "";
                        width: 14px;
                        height: 14px;
                        border-radius: 50%;
                        position: absolute;
                        left: 8%;
                        top: 50%;
                        background-color: #fff;
                        transform: translateY(-50%);
                        -ms-transform: translateY(-50%);
                        -moz-transform: translateY(-50%);
                        -webkit-transform: translateY(-50%);
                        -o-transform: translateY(-50%);
                    }
                }
                .box-content {
                    padding: 10px;
                    background-color: rgb(13, 25, 67);
                    text-align: center;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    .img-size {
                        width: 210px;
                    }
                    .person-text {
                        text-align: left;
                        padding-left: 20px;
                        color: #81D3F8;
                        font-size: 20px;
                    }
                }
                .call-text {
                    background-color: rgb(13, 25, 67);
                    padding: 10px;
                    overflow-y: scroll;
                    height: 195px;
                    .call-detail {
                        background-color: rgb(6, 10, 45);
                        color: #F56C6C;
                        margin-bottom: 10px;
                        font-size: 20px;
                    }
                }
                .call-text::-webkit-scrollbar {
                    /*滚动条整体样式*/
                    width : 5px;  /*高宽分别对应横竖滚动条的尺寸*/
                    height: 1px;
                }
                .call-text::-webkit-scrollbar-thumb {
                    /*滚动条里面小方块*/
                    border-radius   : 8px;
                    background-color: #535353;
                    background-image: -webkit-linear-gradient(
                                    45deg,
                                    rgba(255, 255, 255, 0.2) 25%,
                                    transparent 25%,
                                    transparent 50%,
                                    rgba(255, 255, 255, 0.2) 50%,
                                    rgba(255, 255, 255, 0.2) 75%,
                                    transparent 75%,
                                    transparent
                    );
                }
                .call-text::-webkit-scrollbar-track {
                    /*滚动条里面轨道*/
                    box-shadow   : inset 0 0 5px rgba(0, 0, 0, 0.2);
                    /*background   : #ededed;*/
                    border-radius: 10px;
                }
            }
            .box_height {
                height: calc(100% - 642px);
                margin-bottom: 0;
            }
            .control {
                border-radius: 20px;
                overflow: hidden;
                margin-bottom: 30px;
                .tab-t {
                    height: 40px;
                    position: relative;
                    line-height: 40px;
                    padding-left: 80px;
                    background-color: rgba(14, 30, 81, 1);
                    .tab-title {
                        font-size: 18px;
                    }
                    .tab-title:before {
                        /*content: '';
                        width: 16px;
                        height: 16px;
                        background: #1eff00;
                        border: 1px solid #1eff00;
                        transform: rotate(-45deg);
                        position: absolute;
                        top: 10px;
                        left: 30px;*/
                        content: "";
                        width: 14px;
                        height: 14px;
                        border-radius: 50%;
                        position: absolute;
                        left: 8%;
                        top: 50%;
                        background-color: #fff;
                        transform: translateY(-50%);
                        -ms-transform: translateY(-50%);
                        -moz-transform: translateY(-50%);
                        -webkit-transform: translateY(-50%);
                        -o-transform: translateY(-50%);
                    }
                }
                .box-content {
                    padding: 30px 15px;
                    background-color: rgb(13, 25, 67);
                    display: flex;
                    .control-left {
                        width: 55%;
                        position: relative;
                        .img-position {
                            position: absolute;
                            width: 50px;
                            cursor: pointer;
                        }
                        .img-top {
                            transform: rotate(90deg);
                            top: 10px;
                            left: 130px;
                        }
                        .img-right {
                            transform: rotate(180deg);
                            right: 45px;
                            top: 50px;
                        }
                        .img-bottom {
                            transform: rotate(-90deg);
                            bottom: 20px;
                            left: 130px;
                        }
                        .img-left {
                            top: 50px;
                            left: 90px;
                        }
                        .button-red {
                            background-color: #ee0a24;
                        }
                    }
                    .control-right {
                        padding: 20px 0;
                        .button-blue {
                            background-color: rgb(2, 167, 240);
                        }
                        .button-gray {
                            background-color: rgb(170, 170, 170);
                        }
                        .button-green {
                            background-color: #07c160;
                        }
                    }
                }
            }
        }
        .right {
            width: calc(100% - 500px);
            .container {
                display: flex;
                .container-left {
                    flex-grow: 1;
                    .line1 {
                        width: 100%;
                        /*text-align: center;*/
                        font-size: 1.3em;
                        display: flex;
                        margin-bottom: 10px;
                        .today {
                            width: 50%;
                            padding-left: 5%;
                            position: relative;
                            /*box-sizing: content-box;*/
                        }
                        .today:after {
                            content: '';
                            height: 0px;
                            width: 52%;
                            border: 1px solid #06dfff;
                            position: absolute;         /*定位背景横线的位置*/
                            top: 40%;
                            left: 40%;
                        }
                        .test {
                            width: 50%;
                            position: relative;
                            /*box-sizing: content-box;*/
                        }
                        .test:after {
                            content: '';
                            height: 0px;
                            width: 52%;
                            border: 1px solid #06dfff;
                            position: absolute;         /*定位背景横线的位置*/
                            top: 40%;
                            left: 30%;
                        }
                    }
                    .container-content {
                        box-sizing: border-box;
                        height: calc(100% - 50px);
                        padding: 0 20px;
                        .line2 {
                            height: 50px;
                            border-radius: 20px 20px 0 0;
                            background-color: #0e1e51;
                            margin-bottom: 5px;
                            padding-top: 10px;
                            box-sizing: border-box;
                            .select-robot {
                                /*-webkit-appearance:none;*/
                                /*-webkit-tap-highlight-color: rgba(0, 0, 0, 0);*/
                                height: 35px;
                                margin-left: 50px;
                                border: solid 1px #000;
                                /*很关键：将默认的select选择框样式清除*/
                                /*appearance:none;*/
                                /*-moz-appearance:none;*/
                                /*-webkit-appearance:none;*/
                                /*outline: none;*/
                                /*加padding防止文字覆盖*/
                                padding-right: 14px;
                                padding-left: 15px;
                                /*height: 40px;*/
                                width: 200px;
                                margin-right: 20px;
                                background-color: #393d41;
                                cursor: pointer;
                                color: #ccc;
                                option {
                                    background-color: #ffffff;
                                    padding: 10px 0;
                                    color: #ddd;
                                }
                            }
                        }
                        .container-video {
                            height: calc(100% - 55px);
                            background-color: #0d1943;
                            border-radius: 0 0 20px 20px;
                            box-sizing: border-box;
                            padding: 20px;
                        }
                    }
                }
                .container-right {
                    width: 500px;
                    .wrapper {
                        border-radius: 6px;
                        height: 175px;
                        /*background-color: #001346;*/
                        overflow: hidden;
                        margin-bottom: 10px;

                        .tab-t {
                            height: 40px;
                            position: relative;
                            line-height: 40px;
                            padding-left: 80px;
                            background-color: rgba(14, 30, 81, 1);

                            .tab-title {
                                font-size: 18px;
                            }

                            .tab-title:before {
                                /*content: '';
                                width: 8px;
                                height: 8px;
                                background: #1eff00;
                                border: 1px solid #1eff00;
                                transform: rotate(-45deg);
                                position: absolute;
                                top: 15px;
                                left: 50px;*/
                                content: "";
                                width: 14px;
                                height: 14px;
                                border-radius: 50%;
                                position: absolute;
                                left: 8%;
                                top: 50%;
                                background-color: #fff;
                                transform: translateY(-50%);
                                -ms-transform: translateY(-50%);
                                -moz-transform: translateY(-50%);
                                -webkit-transform: translateY(-50%);
                                -o-transform: translateY(-50%);
                            }
                        }

                        .wrapper-content {
                            height: calc(100% - 20px);
                            background-color: #0d1943;
                            position: relative;
                        }
                    }
                }
            }
            .robot-path {
                height: 330px;
                padding: 0 0 0 20px;
                .robot-title {
                    height: 30px;
                    background-color: rgb(14, 30, 81);
                    line-height: 30px;
                    padding-left: 50px;
                }
                .robot-canvas {
                    height: 280px;
                    background-color: #0d1943;
                    padding-top: 10px;
                    position: relative;
                    .canvas {
                        width: 1200px;
                        height: 100%;
                        position: absolute;
                        left: 90px;
                        top: 10px;
                    }
                }
            }
        }
    }
}
option{
    -moz-appearance:none; /* Firefox */
    -webkit-appearance:none; /* Safari 和 Chrome */
    appearance:none;
}
/* --背景色字体颜色--*/
option:hover{
    color:#fff;
    background-color:#1E90FF;
}
</style>