smScreen/src/views/home/Home.vue

<template>
    <div class="home">
        <section class="top">
            <div class="left">
                <div class="left-1">
                    <div class="chart-tab-title">生物防控</div>
                    <div class="charts">
                        <E-Left1 style="height: 100%"></E-Left1>
                    </div>
                </div>
                <div class="left-2">
                    <div class="chart-tab-title">环保信息</div>
                    <div class="content">
                        <article class="item"><span class="text-white">COD：</span>{{environmentdData.hxxyl}}mg/L</article>
                        <article class="item"><span class="text-white">氨氮：</span>{{environmentdData.ad}}mg/L</article>
                        <article class="item"><span class="text-white">流量：</span>{{environmentdData.ws}}T/H</article>
                        <article class="item"><span class="text-white">累计流量：</span>{{environmentdData.wslj}}T</article>
                        <article class="item"><span class="text-white">总磷：</span>{{environmentdData.zl}}mg/L</article>
                        <article class="item"><span class="text-white">总氮：</span>{{environmentdData.zd}}mg/L</article>
                        <article class="item"><span class="text-white">PH：</span>{{environmentdData.ph}}</article>
                    </div>
                </div>
            </div>
            <div class="center">
                <div class="header_title">
                    <span class="date">
                        {{
                            `${new Date().getFullYear()}-${
                                new Date().getMonth() + 1
                            }-${new Date().getDate()}`
                        }}
                    </span>
                    <div class="title">首 页</div>
<!--                    <img class="icon" src="../../assets/chilun.png" />-->
                </div>
                <div class="number">
                    <div class="item" v-for="(item, i) in listData" :key="i">
                        <div>
                            <span class="title">{{item.name}}：</span>
                            <span class="num">{{item.num}}只</span>
                        </div>
                    </div>
                </div>
                <div class="main_img_box">
                    <imgDragScale :img="img" @openVideo="openVideo"></imgDragScale>
                </div>
            </div>
            <div class="right">
                <div class="right-1">
                    <div class="chart-tab-title">机器人巡逻</div>
                    <div class="content">
                        <img src="../../assets/robot.gif" width="100%" />
                        <div class="describe">
                            <span>1号机器人巡查中</span>
                            <span>当前位置1栋3单元</span>
                        </div>
                    </div>
                </div>
                <div class="right-2">
                    <div class="chart-tab-title">报警信息</div>
                    <div class="msg-tab-body">
                        <div class="cell" v-for="(item, i) in callList" :key="i">
                            <span class="cell-default">{{item.ZSMC}}：</span>
                            <span>{{item.gzxx}}</span>
                            <span style="float: right;">{{item.dates}}</span>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        <footer class="footer">
            <div class="video">
                <div class="video-content" @click="toVideo">
                    <div class="chart-tab-title">视频监控</div>
                    <div class="camera">
                        <iframe ref="iframe" :src="'static/index.html?'+'1'+'&'+ cameraOne +'&'+ cameraTwo + '&' +'100%' + '&' + '0'" style="width: 100%; height: 90%;" frameborder="0"></iframe>
                    </div>
                </div>
            </div>
            <div class="swiper">
                <swiperMulti @onOpen="onOpen" @openItem="openItem"></swiperMulti>
            </div>
            <div class="control-log">
                <div class="control-content">
                    <div class="chart-tab-title">控制日志</div>
                    <div class="msg-tab-body">
                        <div class="cell">
                            <span class="cell-default">位置</span>
                            <span style="margin-left: 80px">照明时长</span>
                            <span style="float: right;">开始时间</span>
                        </div>
                        <div class="cell" v-for="(item, i) in controlLog" :key="i">
                            <span class="cell-default">{{item.zsmc}}</span>
                            <span style="margin-left: 65px">{{item.durations}}分钟</span>
                            <span style="float: right;">{{item.xgsj}}</span>
                        </div>
                    </div>
                </div>
            </div>
        </footer>
        <el-dialog
            :title="item.position + '环境监测曲线'"
            :visible.sync="isShow"
             width="50%"
            >
            <div style="padding: 20px; height: 400px;">
                <e-line1 v-if="num%2 !== 0 && isShow" :id="item.lqid"></e-line1>
                <e-line2 v-else-if="num%2 === 0 && isShow" :id="item.lqid"></e-line2>
            </div>
        </el-dialog>
        <el-dialog
                :title="lists.position + '环境监测曲线'"
                :visible.sync="isQk"
                width="50%">
            <div style="padding: 20px; height: 400px;">
                <chartLine v-if="isQk" :echartsList="echartsList"></chartLine>
            </div>
        </el-dialog>
        <el-dialog
                :title="pList[0] + '栋' + pList[1] +'号舍视频监控'"
                :visible.sync="isVideo"
                width="60%"
        >
            <div style="padding: 20px;">
                <div  style="width: 1100px; height: 580px;">
                    <iframe v-if="isVideo" :src="'static/index.html?'+'0'+'&' + cameraOne  +'&'+ cameraTwo + '&' + '100%' + '&' + '0'" frameborder="0"  style="height: 100%; width: 100%"></iframe>
                </div>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import imgDragScale from "@/components/imgDragScale";
import swiperMulti from "./swiperMulti";
import ELeft1 from "./charts/ELeft1";
import ELine1 from "./charts/Eline1";
import ELine2 from "./charts/Eline2";
import chartLine from "./charts/chartLine";
import img from "@/assets/u62.png";
import utils from "../../utils/utils.js";
let timer, timer1, timer2
export default {
    name: "Home",
    data() {
        return {
            img,
            isShow: false,
            isVideo: false,
            item: {
                position: ''
            },
            num: 0,
            // 栋舍
            pList: [],
            environmentdData: {
                hxxyl: '',
                ad: '',
                ws: '',
                wslj: '',
                zl: '',
                zd: '',
                ph: ''
            },
            // 报警信息
            callList: [],
            // 保育
            listData: [],
            cameraOne: 'ws://183.246.182.241:10080/camera_relay?tcpaddr=admin%3Atx123456%40192.168.1.25',
            cameraTwo: 'rtsp://admin:tx123456@192.168.1.25',
            screenWidth: '',
            // 水量
            echartsList: [],
            isQk: false,
            lists: {},
            // 控制日志
            logList: [],
            setIval: 1,
            controlLog: []
        };
    },
    components: {
        imgDragScale,
        ELeft1,
        swiperMulti,
        ELine1,
        ELine2,
        chartLine
    },
    watch: {
        isShow(newVal) {
            if(newVal == false) {
                clearInterval(timer);
            }
        }
    },
    created() {},
    methods: {
        onOpen(i) {
            this.isShow = true;
            this.item = i;
           this.setInvaler();
        },
        initList() {
            this.$http.post('http://122.112.252.100:8095/dpSjlrSyS/find')
                    .then(res => {
                        if(res.code === 10000) {
                            this.listData= [];
                            Object.keys(res.data).forEach(key => {
                                this.listData.push({name: key, num: res.data[key]});
                            });
                        }
                    })
        },
        init() {
            this.$http.get('/environment/details')
            .then(res => {
                if(res.code === 10000) {
                    this.environmentdData = res.data;
                }
            });
            this.$http.get('http://122.112.252.100:8081/face/alarm')
            .then(res => {
                if(res.code === 10001) {
                    res.data.forEach(item => {
                        let dates = utils.resolverTime(item.FSSJ);
                        item.dates = dates;
                    });
                    this.callList = res.data;
                }
            });
            this.$http.get('http://122.112.252.100:8085/environment/getZMInfo')
            .then(res => {
                if(res.code === 10000) {
                    res.data.forEach(item => {
                        let xgsj = utils.resolverTime(item.xgsj);
                        item.xgsj = xgsj;
                    });
                    this.controlLog = res.data;
                    console.log(res.data);
                }
            });
        },
        openVideo(data) {
            if(data.id == null) {
                this.$message.error('暂无该栋舍的视频信息')
                this.isVideo = false;
            } else {
                this.isVideo = true;
                this.pList = data.position.split('-');
                this.$http.post('http://122.112.252.100:8088/cameraInfo/getCameraDetails', {areaIds: data.id})
                        .then(res => {
                            if(res.status === 10000) {
                                // this.showIfrme = true;
                                let data = null;
                                data = res.data[0];
                                this.cameraOne = data.wsUrl;
                                this.cameraTwo = data.rtspUrl;
                            } else {
                                this.showIfrme = false;
                                this.$message.err(res.msg);
                            }
                        })
            }
        },
        setInvaler() {
            timer = setInterval(() => {
                this.num++;
            }, 8000)
        },
        setInit() {
            let that = this;
            timer1 = setInterval(() => {
                this.init();
            }, 3600000);
        },
        openItem(data) {
            let item = data.item;
            this.lists = item;
            let i = data.index;
            let arr1 = [];
            let arr2 = [];
            let arr3 = [];
                if(i === 1) {
                    arr1 = Object.values(item.slLists);
                    arr2 = Object.keys(item.slLists);
                    arr3  = ['水量', '吨'];
                   this.echartsList = [arr1, arr2, arr3];
                } else if( i === 2) {
                    arr1 = Object.values(item.dlLists);
                    arr2 = Object.keys(item.dlLists);
                    arr3 = ['电量', 'kwh'];
                    this.echartsList = [arr1, arr2, arr3];
                } else if(i===3) {
                    arr1 = Object.values(item.phLists);
                    arr2 = Object.keys(item.phLists);
                    arr3 = ['ph', ''];
                    this.echartsList = [arr1, arr2, arr3];
                } else if(i === 4) {
                    arr1 = Object.values(item.syLists);
                    arr2 = Object.keys(item.syLists);
                    arr3 = ['水压', 'Mpa'];
                    this.echartsList = [arr1, arr2, arr3];
                }
                this.isQk = true;
        },
        // 跳转到监控页面
        toVideo() {
            this.$router.push('/monitor')
            console.log('------------------------------');
        },
        // 首页监控轮播
        setInitCremar() {
            timer2 = setInterval(() => {
                if(this.setIval === 1) {
                    this.cameraOne = "ws://183.246.182.241:10080/camera_relay?tcpaddr=admin%3Atx123456%40192.168.1.25";
                    this.cameraTwo = "rtsp://admin:tx123456@192.168.1.25";
                } else if (this.setIval === 2) {
                    this.cameraOne = "ws://183.246.182.241:10080/camera_relay?tcpaddr=admin%3Atx123456%40192.168.1.31";
                    this.cameraTwo = "rtsp://admin:tx123456@192.168.1.31";
                } else if (this.setIval === 3) {
                    this.setIval = 0;
                    this.cameraOne = "ws://183.246.182.241:10080/camera_relay?tcpaddr=admin%3Atx123456%40192.168.1.50";
                    this.cameraTwo = "rtsp://admin:tx123456@192.168.1.50";
                }
                this.setIval++;
            }, 10000)
        }
    },
    mounted() {
        this.init();
        this.setInit();
        this.initList();
        this.setInitCremar()
    },
    beforeRouteLeave(to, from, next) {
        clearInterval(timer1);
        clearInterval(timer);
        clearInterval(timer2)
        next();
    }
};
</script>

<style lang="scss" scope>
.home {
    box-sizing: border-box;
    flex-grow: 1;
    color: #eee;
    display: flex;
    flex-direction: column;
    > .top {
        // border: 1px solid rgb(13, 165, 212);
        height: 67%;
        display: flex;
        > .left {
            width: 21%;
            > div {
                height: calc(50% - 5px);
                /*background: url(../../assets/box_bg.png) no-repeat;*/
                /*background-size: 100% 100%;*/
                display: flex;
                flex-direction: column;
                border-radius: 8px;
                overflow: hidden;

            }
            > .left-1 {
                margin: 0 10px 10px 10px;
                .charts {
                    flex-grow: 1;
                    background-color: #001346;
                }
            }
            > .left-2 {
                margin: 0 10px;
                .content {
                    padding: 20px;
                    flex-grow: 1;
                    display: flex;
                    flex-wrap: wrap;
                    justify-content: space-around;
                    background-color: #001346;
                    > .item {
                        width: 44%;
                        background-color: #060a2d;
                        color: #81d3f8;
                        padding: 5px;
                        margin-left: 6px;
                        height: 25px;
                        line-height: 25px;
                        font-size: 0.9rem;
                        overflow: hidden;
                        text-overflow: ellipsis;
                        white-space: nowrap;
                        .text-white {
                            color: white;
                        }
                    }
                }
            }
        }
        > .center {
            // border: 1px solid rgb(212, 13, 195);
            width: 58%;
            max-width: 1250px;
            flex-grow: 2.6;
            flex-shrink: 0;
            display: flex;
            flex-direction: column;
            align-items: center;
            > .header_title {
                width: 90%;
                color: #fff;
                display: flex;
                justify-content: space-around;
                margin: 5px 3%;
                .date {
                    vertical-align: middle;
                    font-size: 1.2rem;
                    // display: flex;
                    // align-items: center;

                    display: -webkit-box;
                    -webkit-box-align: center;
                    -webkit-box-pack: center;
                }
                .title {
                    flex-grow: 1;
                    font-size: 1.4rem;
                    text-align: center;
                    display: flex;
                    align-items: center;
                    &::before {
                        content: "";
                        border: 1px solid #06dfff;
                        box-sizing: border-box;
                        height: 0px;
                        flex-grow: 1;
                        margin: 0 30px;
                    }
                    &::after {
                        content: "";
                        border: 1px solid #06dfff;
                        box-sizing: border-box;
                        height: 0px;
                        flex-grow: 1;
                        margin: 0 30px;
                    }
                }
                .icon {
                    width: 30px;
                    height: 30px;
                }
            }
            > .number {
                // border: 1px solid rgb(212, 13, 195);
                width: 92%;
                display: flex;
                justify-content: space-around;
                margin: 10px 0;
                .item {
                    height: 50px;
                    width: 26%;
                    // min-width: 200px;
                    // max-width: 280px;
                    // flex: 1 1 10%;
                    box-sizing: border-box;
                    border: 2px solid #53bafd;
                    border-radius: 12px;
                    background-color: #001346;
                    font-size: 1.1vw;
                    font-weight: 600;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    .title {
                        color: #fff;
                    }
                    .num {
                        color: #53bafd;
                        font-size: 1vw;
                    }
                }
            }
            > .main_img_box {
                // border: 1px solid rgb(212, 13, 195);
                flex-grow: 1;
                width: 93%;
            }
        }
        > .right {
            width: 21%;
            flex-grow: 1;
            > .right-1 {
                height: calc(50% - 5px);
                /*background: url(../../assets/box_bg.png) no-repeat;*/
                /*background-size: 100% 100%;*/
                margin: 0 10px 10px 10px;
                border-radius: 8px;
                overflow: hidden;
                display: flex;
                flex-direction: column;
                .content {
                    flex-grow: 1;
                    /*margin: 10px 15px;*/
                    overflow: hidden;
                    background-color: #001346;
                    padding: 10px 15px;
                    > img {
                        box-sizing: border-box;
                        border: 1px solid #eee;
                        border-radius: 10px;
                    }
                    > .describe {
                        color: #04d919;
                        display: flex;
                        justify-content: space-around;
                        align-items: center;
                        height: 20%;
                        min-height: 20px;
                    }
                }
            }
            > .right-2 {
                height: calc(50% - 5px);
                /*background: url(../../assets/box_bg.png) no-repeat;*/
                /*background-size: 100% 100%;*/
                margin: 0 10px;
                display: flex;
                border-radius: 8px;
                overflow: hidden;
                flex-direction: column;
                .msg-tab-body {
                    overflow-y: scroll;
                    flex-grow: 1;
                    padding: 15px 20px;
                    /*overflow: hidden;*/
                    background-color: #001346;
                    > .cell {
                        background-color: #060a2d;
                        overflow: hidden;
                        text-overflow: ellipsis;
                        white-space: nowrap;
                        margin: 3px 0;
                        padding: 5px;
                        color: #F56C6C;
                        .cell-default {
                            color: #81d3f8;
                        }
                    }
                }
                .msg-tab-body::-webkit-scrollbar {
                    /*滚动条整体样式*/
                    width : 5px;  /*高宽分别对应横竖滚动条的尺寸*/
                    height: 1px;
                }
                .msg-tab-body::-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
                    );
                }
                .msg-tab-body::-webkit-scrollbar-track {
                    /*滚动条里面轨道*/
                    box-shadow   : inset 0 0 5px rgba(0, 0, 0, 0.2);
                    /*background   : #ededed;*/
                    border-radius: 10px;
                }
            }
        }
    }
    > .footer {
        display: flex;
        margin-top: 10px;
        height: 33.3%;
        justify-content: space-between;
        > .video {
            width: 21%;
            height: 100%;
            margin: 0 10px;
            > .video-content {
                cursor: pointer;
                width: 100%;
                height: 100%;
                border-radius: 8px;
                // margin: 0 10px;
                background-color: #001346;
                // display: flex;
                // flex-direction: column;
                overflow: hidden;
                > .camera {
                    padding: 35px 0;
                    width: 100%;
                    height: 100%;
                }
            }
        }
        > .swiper {
            width: 61%;
        }
        > .control-log {
            width: 21%;
            height: 100%;
            margin: 0 10px;
            > .control-content {
                display: flex;
                border-radius: 8px;
                overflow: hidden;
                flex-direction: column;
                background-color: #001346;
                width: 100%;
                height: 100%;
                overflow: auto;
                .msg-tab-body {
                    overflow-y: scroll;
                    flex-grow: 1;
                    padding: 15px 20px;
                    /*overflow: hidden;*/
                    background-color: #001346;
                    > .cell {
                        background-color: #060a2d;
                        overflow: hidden;
                        text-overflow: ellipsis;
                        white-space: nowrap;
                        margin: 3px 0;
                        padding: 5px;
                        color: #F56C6C;
                        .cell-default {
                            color: #81d3f8;
                        }
                    }
                }
                .msg-tab-body::-webkit-scrollbar {
                    /*滚动条整体样式*/
                    width : 5px;  /*高宽分别对应横竖滚动条的尺寸*/
                    height: 1px;
                }
                .msg-tab-body::-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
                    );
                }
                .msg-tab-body::-webkit-scrollbar-track {
                    /*滚动条里面轨道*/
                    box-shadow   : inset 0 0 5px rgba(0, 0, 0, 0.2);
                    /*background   : #ededed;*/
                    border-radius: 10px;
                }
            }
        }
    }
}

.chart-tab-title {
    position: relative;
    padding: 5px 0 5px 90px ;
    background-color: rgb(14,30,81);
}
.chart-tab-title:before {
    content: "";
    width: 14px;
    height: 14px;
    border-radius: 50%;
    position: absolute;
    left: 70px;
    top: 50%;
    background-color: #fff;
    transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -o-transform: translateY(-50%);
}

.footer {
    overflow: hidden;
}

.my-swipe .van-swipe-item {
    color: #fff;
    font-size: 20px;
    line-height: 150px;
    text-align: center;
    background-color: #39a9ed;
}
    .el-dialog {
        background-color: #021429 !important;
    }
    .el-dialog__title {
        color: white !important;
    }
</style>