<template>
    <div class="eb-container" ref="appRef">
        <MainTitle class="title" :title="title"></MainTitle>
        <div class="left-box">
            <div class="left-top">
                <div class="content-info">
                    <video-one :tree-node="treeItem"></video-one>
                </div>
            </div>
            <div class="left-bottom">
                <div class="chart-box">
                    <div class="title-box-680" style="width: 100%">
                        <span>车流数据趋势</span>
                    </div>
                    <div class="content-info" id="chart1"></div>
                </div>
                <div class="chart-box">
                    <div class="title-box-680" style="width: 100%">
                        <span>车流告警趋势</span>
                    </div>
                    <div class="content-info" id="chart2"></div>
                </div>
            </div>
        </div>
        <div class="right">
            <div class="title-box-680" style="width: 100%">
                <span>预警信息</span>
            </div>
            <div class="content-info">
                <div class="alarm-info-count-box">
                    <div
                        class="alarm-info-count-item"
                        style="background-color: rgba(28, 125, 78, 0.4)"
                    >
                        <div style="width: 100%; margin-top: 20px">
                            当天预警次数
                        </div>
                        <div
                            style="
                                width: 100%;
                                font-size: 30px;
                                font-family: 'shiShangHeiTi';
                            "
                        >
                            {{ conutInfo.dayNum }}
                        </div>
                    </div>
                    <div
                        class="alarm-info-count-item"
                        style="background-color: rgba(40, 132, 146, 0.4)"
                    >
                        <div style="width: 100%; margin-top: 20px">
                            近7日预警次数
                        </div>
                        <div
                            style="
                                width: 100%;
                                font-size: 30px;
                                font-family: 'shiShangHeiTi';
                            "
                        >
                            {{ conutInfo.weekNum }}
                        </div>
                    </div>
                    <div
                        class="alarm-info-count-item"
                        style="background-color: rgba(193, 53, 70, 0.3)"
                    >
                        <div style="width: 100%; margin-top: 20px">
                            近30日预警次数
                        </div>
                        <div
                            style="
                                width: 100%;
                                font-size: 30px;
                                font-family: 'shiShangHeiTi';
                            "
                        >
                            {{ conutInfo.monthNum }}
                        </div>
                    </div>
                </div>
                <div
                    style="width: 100%; height: 735px; margin-top: 20px"
                    @click="openAlarm($event)"
                >
                    <vue-seamless-scroll
                        v-if="warringList.length > 0"
                        :data="warringList"
                        :class-option="optionHover"
                        style="width: 100%; height: 100%; overflow: hidden"
                    >
                        <div
                            style="
                                width: 100%;
                                display: flex;
                                flex-direction: column;
                            "
                        >
                            <div
                                class="data-item"
                                v-for="(item, index) in warringList"
                                :data-index="index"
                                :key="index"
                            >
                                <div class="data-head" :data-index="index">
                                    <img
                                        :src="
                                            require('@/assets/largeScreen/warring-icon.png')
                                        "
                                        :data-index="index"
                                        alt="图片加载失败"
                                    />
                                    <div class="head-text" :data-index="index">
                                        <span
                                            class="position"
                                            :data-index="index"
                                            >{{ item.deviceName }}</span
                                        >
                                        <span
                                            class="date"
                                            :data-index="index"
                                            >{{ item.type }}</span
                                        >
                                    </div>
                                </div>
                                <div
                                    class="data-info"
                                    :data-index="index"
                                    style="
                                        display: flex;
                                        justify-content: space-between;
                                        align-items: end;
                                        flex-direction: row;
                                        margin-top: 20px;
                                    "
                                >
                                    <div :data-index="index">
                                        <div
                                            :data-index="index"
                                            class="info-t1"
                                            style="margin-left: 20px"
                                        >
                                            设备IP：{{ item.deviceIp }}
                                        </div>
                                        <div
                                            class="info-t1"
                                            :data-index="index"
                                            style="margin-left: 20px"
                                        >
                                            告警信息：{{ item.info }}
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </vue-seamless-scroll>
                    <div
                        v-else
                        style="
                            width: 100%;
                            height: 100%;
                            display: flex;
                            justify-content: center;
                            align-items: center;
                            font-size: 18px;
                            color: #ffffff;
                        "
                    >
                        暂无预警
                    </div>
                </div>
            </div>
        </div>
        <div class="page-bottom-bg"></div>
<div class="page-left-bg"></div>
<div class="page-right-bg"></div>
        <emergency-modal
            v-model="alarmShow"
            width="988px"
            @close="alarmShow = false"
        >
            <alarmDig :alarmInfo="currentAlarm"></alarmDig>
        </emergency-modal>
        <common-modal
            v-model="alarmInfoModal"
            width="988px"
            @close="alarmInfoModal = false"
            :title="diaAlarmInfo.deviceName"
        >
            <BaseAlarmDig :alarmInfo="diaAlarmInfo"></BaseAlarmDig>
        </common-modal>
    </div>
</template>

<script>
import { useIndex } from "../../utils/utilsDramAdmin";
import MainTitle from "./components/MainTitle.vue";
import vueSeamlessScroll from "vue-seamless-scroll";
import moment from "moment";
import * as echarts from "echarts";
import EmergencyModal from "@/views/common-components/emergency-modal.vue";
import alarmDig from "@/views/screen/components/alarm/alarm-dig.vue";
import CommonLivePlayer from "@/views/common-components/common-live-player.vue";
import { echartsFocus, echartsClear } from "@/utils/autoEcharts";
import VideoOne from "./components/video-monitor/video-one.vue";
import CommonModal from "@/views/common-components/common-modal.vue";
import BaseAlarmDig from "@/views/screen/components/alarm/baseAlarmDig.vue";

export default {
    name: "DutySystem",
    components: {
        MainTitle,
        VideoOne,
        vueSeamlessScroll,
        EmergencyModal,
        alarmDig,
        CommonLivePlayer,
        CommonModal,
        BaseAlarmDig,
    },
    data() {
        return {
            title: "车流预警",
            areaCode: "",
            conutInfo: {
                dayNum: 0,
                weekNum: 0,
                monthNum: 0,
            },
            alarmShow: false,
            currentAlarm: {},
            isLive: true,
            videoUrl: "",
            videoList: [],
            optionHover: {
                step: 0.2, // 数值越大速度滚动越快
                limitMoveNum: 4, // 开始无缝滚动的数据量 this.dataList.length
                hoverStop: true, // 是否开启鼠标悬停stop
                direction: 1, // 0向下 1向上 2向左 3向右
                openWatch: true, // 开启数据实时监控刷新dom
                singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
                singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
                waitTime: 1000, // 单步运动停止的时间(默认值1000ms)
            },
            treeItem: {},
            warringList: [],
            alarmInfoList: [],
            diaAlarmInfo: {},
            alarmInfoModal: false
        };
    },
    computed: {},
    created() {
        let params = this.$route.query;
        if (params) {
            this.areaCode = params.areaCode;
            this.title = params.areaName + "-车流预警";
        }
    },
    mounted() {
        const { calcRate, windowDraw } = useIndex(this.$refs.appRef);
        calcRate();
        windowDraw();
        this.queryMonitorList();
        this.subscribeTopic()
    },
    watch: {
        "$route.query.areaCode": {
            immediate: false,
            handler(newVal, oldVal) {
                if (newVal) {
                    location.reload();
                }
            },
        },
    },
    beforeDestroy() {
        echartsClear();
        this.sockets.unsubscribe("TRAFFIC_ALARM");
        this.sockets.unsubscribe("TRAFFIC_DATA");
    },
    methods: {
        // 订阅主题
        subscribeTopic () {
            console.log("车流socket")
            // 车流告警
            this.sockets.subscribe("TRAFFIC_ALARM", (data) => {
                console.log("车流告警", data);
                if (data.deviceIp == this.treeItem.deviceIp) {
                    this.currentAlarm = data;
                    if (this.currentAlarm.picture) {
                        this.currentAlarm.picture = JSON.parse(
                            this.currentAlarm.picture
                        );
                    }
                    this.alarmShow = true;
                    this.queryCount([this.treeItem]);
                    this.queryAlarmRecord([this.treeItem]);
                }
            });
            // 车流统计
            this.sockets.subscribe("TRAFFIC_DATA", (data) => {
                console.log("车流统计", data);
                this.countCarDataByTime([this.treeItem])

            });
        },
        // 打开查看预警记录
        openAlarm(e) {
            let index = e.target.dataset.index;
            let data = this.warringList[index];
            if (data.picture) {
                data.picture = JSON.parse(data.picture);
            }
            this.diaAlarmInfo = data;
            console.log(index, data);
            this.alarmInfoModal = true;
        },
        // 查询监控列表
        queryMonitorList() {
            this.$http
                .post(
                    "device/queryDeviceInfoPage",
                    this.common.request({
                        pageNum: 1,
                        pageSize: 10,
                        areaCode: this.areaCode,
                        deviceType: "车流分析",
                    })
                )
                .then((res) => {
                    if (res.data.code === 200) {
                        if (res.data.data.records && res.data.data.records[0]) {
                            this.treeItem = res.data.data.records[0];
                            this.treeItem.title = this.treeItem.deviceName;
                            this.queryCount(res.data.data.records);
                            this.queryAlarmRecord(res.data.data.records);
                            this.countCarDataByTime(res.data.data.records);
                            this.countCarAlarmTime(res.data.data.records);
                        }
                    }
                });
        },
        // 查询数字统计
        queryCount(list) {
            let ips = list.map((item) => item.deviceIp);
            this.$http
                .post(
                    "alarm/base/countAlarmInfoByIps",
                    this.common.request({ ips })
                )
                .then((res) => {
                    if (res.data.code == 200) {
                        let data = res.data.data;
                        this.conutInfo.dayNum = data.alarmByDay;
                        this.conutInfo.weekNum = data.alarmByWeek;
                        this.conutInfo.monthNum = data.alarmByMonth;
                    }
                });
        },
        // 查询告警记录
        queryAlarmRecord(list) {
            let ips = list.map((item) => item.deviceIp);
            this.$http
                .post(
                    "alarm/base/queryBaseAlarmPage",
                    this.common.request({
                        page: 1,
                        pageSize: 10,
                        deviceIpList: ips,
                        type: "车流预警",
                    })
                )
                .then((res) => {
                    if (res.data.code == 200) {
                        this.warringList = res.data.data.records;
                    }
                });
        },
        // 查询车流告警数据
        countCarDataByTime(list) {
            let ips = list.map((item) => item.deviceIp);
            this.$http
                .post(
                    "alarm/car/countCarDataByTime",
                    this.common.request({
                        deviceIpList: ips,
                    })
                )
                .then((res) => {
                    if (res.data.code === 200) {
                        let data = res.data.data;
                        this.initWSD(data.xData, data.yData);
                    }
                });
        },
        // 查询车流告警数据
        countCarAlarmTime(list) {
            let ips = list.map((item) => item.deviceIp);
            this.$http
                .post(
                    "alarm/base/countAlarmDataByTime",
                    this.common.request({
                        deviceIpList: ips,
                    })
                )
                .then((res) => {
                    if (res.data.code === 200) {
                        let data = res.data.data;
                        this.initWSDGJ(data.xData, data.yData);
                    }
                });
        },

        initWSD(xData, yData1, yData2) {
            let myChart = echarts.init(document.getElementById("chart1"));
            let option = {
                tooltip: {
                    trigger: "axis",
                    axisPointer: {
                        lineStyle: {
                            color: {
                                type: "linear",
                                x: 0,
                                y: 0,
                                x2: 0,
                                y2: 1,
                                colorStops: [
                                    {
                                        offset: 0,
                                        color: "rgba(126,199,255,0)", // 0% 处的颜色
                                    },
                                    {
                                        offset: 0.5,
                                        color: "rgba(126,199,255,1)", // 100% 处的颜色
                                    },
                                    {
                                        offset: 1,
                                        color: "rgba(126,199,255,0)", // 100% 处的颜色
                                    },
                                ],
                                global: false, // 缺省为 false
                            },
                        },
                    },
                },
                grid: {
                    top: "12%",
                    left: "6%",
                    right: "4%",
                    bottom: "15%",
                    // containLabel: true
                },
                xAxis: [
                    {
                        type: "category",
                        boundaryGap: false,
                        axisLine: {
                            //坐标轴轴线相关设置。数学上的x轴
                            show: true,
                            lineStyle: {
                                color: "#233653",
                            },
                        },
                        axisLabel: {
                            //坐标轴刻度标签的相关设置
                            textStyle: {
                                color: "#ffffff",
                                fontSize: 14,
                            },
                            formatter: function (data) {
                                return data;
                            },
                        },
                        splitLine: {
                            show: false,
                            lineStyle: {
                                color: "#192a44",
                            },
                        },
                        axisTick: {
                            show: false,
                        },
                        data: xData,
                    },
                ],
                yAxis: [
                    {
                        name: "",
                        axisLine: {
                            show: true,
                            lineStyle: {
                                color: "#233653",
                            },
                        },
                        axisLabel: {
                            show: true,
                            textStyle: {
                                color: "#ffffff",
                            },
                        },
                        splitLine: {
                            show: true,
                            lineStyle: {
                                type: "dashed",
                                color: "#192a44",
                            },
                        },
                        axisTick: {
                            show: false,
                        },
                    },
                ],
                series: [
                    {
                        name: "次数",
                        type: "line",
                        symbol: "circle", // 默认是空心圆（中间是白色的），改成实心圆
                        showAllSymbol: true,
                        symbolSize: 0,
                        smooth: true,
                        lineStyle: {
                            normal: {
                                width: 3,
                                color: "rgba(25,163,223,1)", // 线条颜色
                            },
                            borderColor: "rgba(0,0,0,.4)",
                        },
                        itemStyle: {
                            color: "rgba(25,163,223,1)",
                            borderColor: "#646ace",
                            borderWidth: 2,
                        },
                        tooltip: {
                            show: true,
                        },
                        areaStyle: {
                            //区域填充样式
                            normal: {
                                //线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。
                                color: new echarts.graphic.LinearGradient(
                                    0,
                                    0,
                                    0,
                                    1,
                                    [
                                        {
                                            offset: 0,
                                            color: "rgba(25,163,223,.3)",
                                        },
                                        {
                                            offset: 1,
                                            color: "rgba(25,163,223, 0)",
                                        },
                                    ],
                                    false
                                ),
                                shadowColor: "rgba(25,163,223, 0.5)", //阴影颜色
                                shadowBlur: 20, //shadowBlur设图形阴影的模糊大小。配合shadowColor,shadowOffsetX/Y, 设置图形的阴影效果。
                            },
                        },
                        data: yData1,
                    },
                ],
            };
            myChart.setOption(option);
            echartsFocus(myChart, xData.length);
        },
        initWSDGJ(xData, yData1, yData2) {
            let myChart = echarts.init(document.getElementById("chart2"));
            let option = {
                tooltip: {
                    trigger: "axis",
                    axisPointer: {
                        lineStyle: {
                            color: {
                                type: "linear",
                                x: 0,
                                y: 0,
                                x2: 0,
                                y2: 1,
                                colorStops: [
                                    {
                                        offset: 0,
                                        color: "rgba(126,199,255,0)", // 0% 处的颜色
                                    },
                                    {
                                        offset: 0.5,
                                        color: "rgba(126,199,255,1)", // 100% 处的颜色
                                    },
                                    {
                                        offset: 1,
                                        color: "rgba(126,199,255,0)", // 100% 处的颜色
                                    },
                                ],
                                global: false, // 缺省为 false
                            },
                        },
                    },
                },
                grid: {
                    top: "12%",
                    left: "6%",
                    right: "4%",
                    bottom: "15%",
                    // containLabel: true
                },
                xAxis: [
                    {
                        type: "category",
                        boundaryGap: false,
                        axisLine: {
                            //坐标轴轴线相关设置。数学上的x轴
                            show: true,
                            lineStyle: {
                                color: "#233653",
                            },
                        },
                        axisLabel: {
                            //坐标轴刻度标签的相关设置
                            textStyle: {
                                color: "#ffffff",
                                fontSize: 14,
                            },
                            formatter: function (data) {
                                return data;
                            },
                        },
                        splitLine: {
                            show: false,
                            lineStyle: {
                                color: "#192a44",
                            },
                        },
                        axisTick: {
                            show: false,
                        },
                        data: xData,
                    },
                ],
                yAxis: [
                    {
                        name: "",
                        axisLine: {
                            show: true,
                            lineStyle: {
                                color: "#233653",
                            },
                        },
                        axisLabel: {
                            show: true,
                            textStyle: {
                                color: "#ffffff",
                            },
                        },
                        splitLine: {
                            show: true,
                            lineStyle: {
                                type: "dashed",
                                color: "#192a44",
                            },
                        },
                        axisTick: {
                            show: false,
                        },
                    },
                ],
                series: [
                    {
                        name: "次数",
                        type: "line",
                        symbol: "circle", // 默认是空心圆（中间是白色的），改成实心圆
                        showAllSymbol: true,
                        symbolSize: 0,
                        smooth: true,
                        lineStyle: {
                            normal: {
                                width: 3,
                                color: "rgba(25,163,223,1)", // 线条颜色
                            },
                            borderColor: "rgba(0,0,0,.4)",
                        },
                        itemStyle: {
                            color: "rgba(25,163,223,1)",
                            borderColor: "#646ace",
                            borderWidth: 2,
                        },
                        tooltip: {
                            show: true,
                        },
                        areaStyle: {
                            //区域填充样式
                            normal: {
                                //线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。
                                color: new echarts.graphic.LinearGradient(
                                    0,
                                    0,
                                    0,
                                    1,
                                    [
                                        {
                                            offset: 0,
                                            color: "rgba(25,163,223,.3)",
                                        },
                                        {
                                            offset: 1,
                                            color: "rgba(25,163,223, 0)",
                                        },
                                    ],
                                    false
                                ),
                                shadowColor: "rgba(25,163,223, 0.5)", //阴影颜色
                                shadowBlur: 20, //shadowBlur设图形阴影的模糊大小。配合shadowColor,shadowOffsetX/Y, 设置图形的阴影效果。
                            },
                        },
                        data: yData1,
                    },
                ],
            };
            myChart.setOption(option);
            echartsFocus(myChart, xData.length);
        },
    },
};
</script>

<style lang="less" scoped>
@import "../../styles/pbStyle.less";

.eb-container {
    width: 1920px;
    height: 1080px;
    transform: scale(var(--scale)) translate(-50%, -50%);
    transform-origin: 0 0;
    position: absolute;
    left: 50%;
    top: 50%;
    background-image: url("../../assets/largeScreen/page-bg.png");
    background-size: 100%;

    .left-box {
        position: fixed;
        left: 100px;
        top: 100px;
        width: 1050px;
        height: 950px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;

        .left-top {
            width: 100%;
            height: 680px;
            display: flex;
            flex-direction: column;

            .content-info {
                .content-pub-style(100%, 100%);
                display: flex;
            }
        }

        .left-bottom {
            width: 100%;
            height: 250px;
            display: flex;
            justify-content: space-between;

            .chart-box {
                width: 49%;
                height: 100%;
                display: flex;
                flex-direction: column;

                .content-info {
                    .content-pub-style(100%, calc(100% - 44px));
                }
            }
        }
    }

    .right {
        position: fixed;
        top: 100px;
        right: 100px;
        width: 630px;
        height: 950px;
        display: flex;
        flex-direction: column;

        .content-info {
            .content-pub-style(100%, calc(100% - 44px));
            display: flex;
            flex-direction: column;
            padding: 0 10px;
            color: #ffffff;

            .alarm-info-count-box {
                width: 100%;
                display: flex;
                justify-content: space-between;
                margin-top: 10px;

                .alarm-info-count-item {
                    width: 183px;
                    height: 120px;
                    background-color: #00feff;
                    text-align: center;
                    font-size: 22px;
                    border-radius: 5px;
                }
            }
        }
    }
}
.data-item {
    width: 100%;
    background-color: rgba(42, 60, 87, 0.5);
    padding: 10px;
    display: flex;
    border-radius: 5px;
    flex-direction: column;
    margin-bottom: 20px;

    /* Frame 4799 */

    background: linear-gradient(
        180deg,
        rgba(0, 125, 165, 0.24) 0%,
        rgba(1, 10, 43, 0) 100%
    );
    border-radius: 4px;

    .data-head {
        width: 100%;
        height: 22px;
        display: flex;
        justify-content: space-between;
        align-items: center;

        img {
            width: 20px;
            height: 20px;
            margin-right: 20px;
        }

        .head-text {
            flex: 1;
            height: 22px;
            display: flex;
            justify-content: space-between;
            align-items: center;

            .position {
                font-family: "PingFang SC";
                font-style: normal;
                font-weight: 400;
                font-size: 16px;
                line-height: 22px;
                color: #ffffff;
            }

            .date {
                font-family: "PingFang SC";
                font-style: normal;
                font-weight: 400;
                font-size: 14px;
                line-height: 20px;
                /* identical to box height */
                text-align: right;
                text-transform: uppercase;
                color: #ffffff;
            }
        }
    }

    .data-info {
        width: 100%;
        height: 40px;
        display: flex;
        flex-direction: column;

        .info-t1,
        .info-t2 {
            margin-top: 5px;
            font-family: "PingFang SC";
            font-style: normal;
            font-weight: 400;
            font-size: 14px;
            line-height: 20px;
            text-transform: uppercase;
            color: #ffffff;
        }
    }
}

/deep/ .el-slider__marks-text {
    color: #ffffff !important;
}
</style>
