wennn
/
wdkl_screen


			
							1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018101910201021102210231024102510261027102810291030103110321033103410351036103710381039104010411042104310441045104610471048104910501051105210531054105510561057105810591060106110621063106410651066106710681069107010711072107310741075107610771078107910801081108210831084108510861087108810891090109110921093109410951096109710981099110011011102110311041105110611071108110911101111111211131114111511161117111811191120112111221123112411251126112711281129113011311132113311341135113611371138113911401141114211431144114511461147114811491150115111521153115411551156115711581159116011611162116311641165116611671168116911701171117211731174117511761177117811791180118111821183118411851186118711881189119011911192119311941195119611971198119912001201120212031204120512061207120812091210121112121213121412151216121712181219122012211222122312241225122612271228122912301231123212331234123512361237123812391240124112421243124412451246124712481249125012511252125312541255125612571258125912601261126212631264126512661267126812691270127112721273127412751276127712781279128012811282128312841285128612871288128912901291129212931294129512961297129812991300130113021303130413051306130713081309131013111312131313141315131613171318131913201321132213231324132513261327132813291330133113321333133413351336133713381339134013411342134313441345134613471348134913501351135213531354135513561357135813591360136113621363136413651366136713681369137013711372137313741375137613771378
							<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <!-- <title>{{$t('board.wdkl')}}</title> -->

    <link rel="stylesheet" href="./css/index.css">
    <link rel="stylesheet" href="./fonts/icomoon.css">
    <!-- elementui   -->
    <link rel="stylesheet" href="./css/element-ui.css">
    <!-- <link rel="stylesheet" href="./css/flipclock.css"> -->
    <script src="./js/scoket.js"></script>
    <script src="./js/api.js"></script>
    <!-- // 引入 Vue.js -->
    <script src="./js/vue.js"></script>
    <script src="./js/element-ui.js"></script>
    <!-- 先加载 ECharts -->
    <script src="./js/echarts.min.js"></script>
    <!-- 再加载百度地图 API 和 ECharts 的百度地图扩展 -->
    <script type="text/javascript" src="https://api.map.baidu.com/api?v=3.0&ak=4lgYDZ9MWQMbTvjX5R5M5pZG"></script>
    <script type="text/javascript" src="./js/MarkerClusterer_min.js"></script>
    <script type="text/javascript" src="./js/TextIconOverlay_min.js"></script>

    <script type="text/javascript" src="./js/bmap.min.js"></script>

    <script src="./js/axios.min.js"></script>
    <!-- 自定义 JS -->
    <script src="./js/mapStyleJson.js"></script>
    <!-- i18 -->
    <script src="./js/vue-i18n.min.js"></script>
    <script src="./js/i18n.js"></script>

</head>

<body>
    <!-- 星空特效 -->
    <canvas id="canvas" style="position: absolute;top: 0;left: 0;"></canvas>
    <script src="./js/bg.js"></script>
    <div id="app">
        <title>{{$t('wdklScreen.wdkl')}}</title>
        <div class="header">
            <div class="title" id="title">{{title}}</div>
            <!-- 添加语言切换按钮 -->
            <div style="position: absolute;top:25px; right: 80px;margin: auto 0;">
                <el-dropdown @command="handleLanguageChange">
                    <el-button type="primary" size="mini" style="background-color: rgba(255, 255, 255, 0.05);font-size: 10px;padding: 3px 8px; height: 22px;
                color: rgba(255, 255, 255, 0.6); border: 1px solid rgba(255, 255, 255, 0.15);">
                        {{ getLanguageName }}

                    </el-button>
                    <el-dropdown-menu slot="dropdown">
                        <el-dropdown-item command="zh">中文</el-dropdown-item>
                        <el-dropdown-item command="en">English</el-dropdown-item>
                        <el-dropdown-item command="es">Español</el-dropdown-item>
                        <el-dropdown-item command="ru">Русский</el-dropdown-item>
                    </el-dropdown-menu>
                </el-dropdown>
            </div>
            <div id="muteImg" style="top:20px;right: 20px;position: absolute;">
                <image src="./images/mute.png" style="height: 30px;width: 30px"></image>
            </div>
        </div>
        <div class="clearfix"></div>
        <div class="viewport">
            <div class="column">
                <div class="overview panel">
                    <div class="inner">
                        <div class="item">
                            <h4>{{ allCount }}</h4>
                            <span>
                                <i class="icon-dot" style="color: #006cff"></i>
                                {{$t('wdklScreen.totalUsers')}}
                            </span>
                        </div>
                        <div class="item">
                            <h4>{{quarterlyAddition}}</h4>
                            <span>
                                <i class="icon-dot" style="color: #6acca3"></i>
                                {{$t('wdklScreen.quarterlyNew')}}
                            </span>
                        </div>
                        <div class="item">
                            <h4>{{monthlyAddition}}</h4>
                            <span>
                                <i class="icon-dot" style="color: #ed3f35"></i>
                                {{$t('wdklScreen.monthlyNew')}}
                            </span>
                        </div>
                    </div>
                </div>
                <!--监控-->
                <div class="monitor panel">
                    <div class="inner">
                        <div class="tabs">
                            <a href="javascript:;" data-index="0" class="active">{{$t('wdklScreen.latestAlarms')}}</a>
                        </div>
                        <div class="content" style="display: block;">
                            <div class="head">
                                <span class="col"> {{$t('wdklScreen.time')}}</span>
                                <span class="col"> {{$t('wdklScreen.user')}}</span>
                                <span class="col"> {{$t('wdklScreen.project')}}</span>
                                <!--                            <span class="col">值</span>-->
                            </div>
                            <div class="marquee-view">
                                <div id="vsLogTable" class="marquee">
                                    <div class="row" v-for="(item,index) in sosInfo.actionList" :key="index">
                                        <span class="col">{{unixToDate(item.create_date, "MM-dd hh:mm")}}</span>
                                        <span class="col">{{item.from_member_name}}</span>
                                        <!-- from_device_type -->
                                        <!-- <span class="col">{{item.from_device_type}}</span> -->
                                        <span class="col">{{deviceTypeGetter(item.from_device_type)}}</span>
                                        <span class="icon-dot"></span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <!--点位-->
                <div class="point panel">
                    <div class="inner">
                        <h3> {{$t('wdklScreen.ageDistribution')}}</h3>
                        <div class="chart">
                            <div class="pie"></div>
                            <div class="data">
                                <div class="item">
                                    <h4>{{manCount}}</h4>
                                    <span>
                                        <i class="icon-dot" style="color: #ed3f35"></i>
                                        {{$t('wdklScreen.male')}}
                                    </span>
                                </div>
                                <div class="item">
                                    <h4>{{womanCount}}</h4>
                                    <span>
                                        <i class="icon-dot" style="color: #eacf19"></i>
                                        {{$t('wdklScreen.female')}}
                                    </span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="column">
                <!-- 地图 -->
                <div class="map">
                    <div class="chart">
                        <div class="geo"></div>
                    </div>
                </div>
                <!-- 用户 -->
                <div class="users panel">
                    <div class="inner">
                        <h3> {{$t('wdklScreen.alarmDistribution')}}</h3>
                        <div class="chart">
                            <div class="bar"></div>
                            <div class="data">
                                <div class="item">
                                    <h4>{{dayCount}}</h4>
                                    <span>
                                        <i class="icon-dot" style="color: #ed3f35"></i>
                                        {{$t('wdklScreen.todayMeasureCount')}}
                                    </span>
                                </div>
                                <div class="item">
                                    <h4>{{hourCount}}</h4>
                                    <span>
                                        <i class="icon-dot" style="color: #eacf19"></i>
                                        {{$t('wdklScreen.lastHour')}}
                                    </span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="column">
                <div class="order panel">
                    <div class="inner">
                        <!-- 筛选 -->
                        <div class="filter">
                            <a href="javascript:;" v-for="(days, index) in ['365', '90', '30', '7']" :key="index"
                                :class="{ active: activeTimeFilter === 'day' + days }"
                                @click="handleMeasureFilter('day' + days)">
                                {{days}}{{$t('wdklScreen.days')}}
                            </a>
                        </div>
                        <!-- 数据 -->
                        <div class="data">
                            <div class="item">
                                <h4>{{currentMeasureData.count}}</h4>
                                <span>
                                    <i class="icon-dot" style="color: #ed3f35;"></i>
                                    {{$t('wdklScreen.measurement')}}
                                </span>
                            </div>
                            <div class="item">
                                <h4>{{currentMeasureData.errCount}}</h4>
                                <span>
                                    <i class="icon-dot" style="color: #eacf19;"></i>
                                    {{$t('wdklScreen.alarm')}}
                                </span>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- 报警统计 -->
                <div class="alarms panel">
                    <div class="inner">
                        <div class="caption">
                            <h3>{{$t('wdklScreen.alarmStatistics')}}</h3>
                            <a v-for="(item, index) in alarmTabs" :key="index"
                                :class="{ active: activeAlarmType === getDataType(index) }"
                                @click="handleAlarmTabClick(index)">
                                {{ item }}
                            </a>

                        </div>
                        <div class="chart">
                            <div class="label"></div>
                            <div class="line"></div>
                        </div>
                    </div>
                </div>
                <!--异常-->
                <div class="monitor panel">
                    <div class="inner">
                        <div class="tabs">
                            <a href="javascript:;" data-index="0"
                                class="active">{{$t('wdklScreen.vitalSignsAlarm')}}</a>
                        </div>
                        <div class="content" style="display: block;">
                            <div class="head">
                                <span class="col">{{$t('wdklScreen.time')}}</span>
                                <span class="col">{{$t('wdklScreen.user')}}</span>
                                <span class="col">{{$t('wdklScreen.project')}}</span>
                                <span class="col">{{$t('wdklScreen.value')}}</span>
                            </div>
                            <div class="marquee-view">
                                <div id="errVsLogTable" class="marquee alarms-list">
                                    <div class="row" v-for="(item,index) in logInfo.errVsLogList" :key="index">
                                        <span class="col">{{unixToDate(item.log_time, "MM-dd hh:mm")}}</span>
                                        <span class="col">{{item.member_nickname}}</span>
                                        <span class="col">{{item.param_name}}</span>
                                        <span class="col">{{item.vs_value}}</span>
                                        <span class="icon-dot"></span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

    </div>
</body>
<script>
    // 配置 axios 全局默认值
    axios.defaults.baseURL = window.api.base; // 设置默认的请求地址
    // http://192.168.1.199:7000
    axios.defaults.timeout = 5000; // 设置请求超时时间
    // axios.defaults.headers.common['Content-Type'] = 'application/json';
    // 将 axios 挂载到 Vue 原型上
    Vue.prototype.$http = axios;
    new Vue({
        el: '#app',
        i18n,
        data() {
            return {
                deviceTypeList: [],
                currentLang: localStorage.getItem('language') === null ? 'zh' : localStorage.getItem('language'),// 默认语言
                //右上第一个数据显示
                currentMeasureData: {
                    count: 0,
                    errCount: 0
                },
                //中间第二个图测量数据
                dayCount: 0,
                hourCount: 0,

                showTime: null,
                breakTime: null,
                heartbeatTime: null,

                partId: null,// 将 partId 
                title: this.$t('wdklScreen.wdkl'),

                socket: null,  // 添加 socket 实例变量

                mapHeight: 0,//地图高度

                host_port: window.api.base.replace('http://', ''),
                // host_port: "119.23.151.229:8006/",
                allCount: 0,
                quarterlyAddition: 0,
                monthlyAddition: 0,
                manCount: 0,
                womanCount: 0,

                vsLogs: [],
                errVsLogs: [],
                activeTimeFilter: 'day365',
                alarmTabs: [
                    this.$t('wdklScreen.week'),
                    this.$t('wdklScreen.month'),
                    this.$t('wdklScreen.year')
                ],
                activeAlarmType: 'week',
                measureData: {
                    day365: {
                        count: 0,
                        errCount: 0
                    },
                    day90: {
                        count: 0,
                        errCount: 0
                    },
                    day30: {
                        count: 0,
                        errCount: 0
                    },
                    day7: {
                        count: 0,
                        errCount: 0
                    }
                },

                charts: {
                    pie: null,
                    line: null,
                    bar: null,
                    map: null
                },
                mapOption: null,
                timers: {
                    heartbeat: null,
                    break: null,
                    show: null
                },
                colorList: ['#00f2f1', '#006cff', '#eab408', '#ed8884', '#ff9f7f', '#0096ff', '#9fe6b8', '#32c5e9', '#1d9dff'],
                // 数据
                userInfo: {
                    allCount: 0,
                    quarterlyCount: 0,
                    monthCount: 0,
                    manCount: 0,
                    womanCount: 0,
                },
                sosInfo: {
                    actionList: [],
                    barList: []
                },
                chartData: {
                    year: null,  // 初始化为空数组而不是 null
                    month: null,
                    week: null
                },
                logInfo: {
                    dayCount: 0,
                    hourCount: 0,
                    errVsLogList: []
                },
                // 当前激活的筛选
                activeFilters: {
                    timeFilter: 'day365',
                    alarmType: 'week'
                }
            }
        },
        created() {
            this.getDeviceTypeList();
        },
        mounted() {
            this.$nextTick(() => {
                this.partId = this.getQuery("partId");
                // 初始化各个图表实例
                this.myPieEchart = echarts.init(document.querySelector('.pie'));
                this.myLineEchart = echarts.init(document.querySelector('.line'));
                this.myBarEchart = echarts.init(document.querySelector('.bar'));
                this.myMapChart = echarts.init(document.querySelector('.geo'));
                // 初始化设置
                this.setFont();
                this.setGeoHeight();
                // 初始化监控面板
                this.initMonitor();


                if (this.partId) {

                    // 连接webSocket
                    this.initWebSocket();
                    // 打开定时器
                    this.openTimer();
                    let image = document.getElementById('muteImg');
                    image.addEventListener('click', function () {
                        image.style.display = "none";
                    })
                }
                const debouncedResize = this.debounce(this.handleResize, 300);
                window.addEventListener('resize', debouncedResize);
                this.handleResize();
            });
        },
        beforeDestroy() {
            // 关闭 WebSocket 连接
            if (this.ws) {
                this.ws.close();
                this.ws = null;
            }
            // 清除所有定时器
            if (this.heartbeatTime) {
                clearInterval(this.heartbeatTime);
                this.heartbeatTime = null;
            }
            if (this.breakTime) {
                clearInterval(this.breakTime);
                this.breakTime = null;
            }
            if (this.showTime) {
                clearTimeout(this.showTime);
                this.showTime = null;
            }
            if (this.debouncedResize) {
                window.removeEventListener('resize', this.debouncedResize);
            }
        },
        computed: {
            getLanguageName() {
                return this.$t('wdklScreen.languageSelector')
            }
        },
        methods: {
            //切换语言
            handleLanguageChange(lang) {
                this.currentLang = lang;
                this.$i18n.locale = lang;
                // 可以存储到 localStorage 以保持语言选择
                localStorage.setItem('language', lang);
                if (!this.partId || this.title === this.$t('wdklScreen.wdkl')) {
                    this.title = this.$t('wdklScreen.wdkl');
                }
                this.getDeviceTypeList()
                this.alarmTabs = [
                    this.$t('wdklScreen.week'),
                    this.$t('wdklScreen.month'),
                    this.$t('wdklScreen.year')
                ];
                // this.getDeviceTypeList();
                // this.getUserInfo();
                this.getSOSInfo();
                this.getLogInfo();

            },
            //设备类型转化
            deviceTypeGetter(item) {
                if (item === undefined || item === null) {
                    console.warn('设备类型值无效:', item);
                    return '未知设备';
                }

                const deviceType = this.deviceTypeList.find(type => type.value === item);
                if (!deviceType) {
                    console.warn('未找到匹配的设备类型:', item);
                    return '未知设备';
                }
                return deviceType.title;
            },
            // 获取设备类型列表
            getDeviceTypeList() {
                let data = []
                this.$http.post('/arrange/getDeviceTypeChildrenVO', { lg: this.$i18n.locale }, {
                    headers: { 'Content-Type': 'application/x-www-form-urlencoded' }
                }).then(res => {
                    // 过滤并展平设备类型数据
                    // console.log('333333333deviceTypeList', res)
                    res.data.forEach(item => {
                        if (item.bool_device) {
                            data.push(item)
                        }
                        if (item.children) {
                            item.children.forEach(t => {
                                if (t.bool_device) {
                                    data.push(t)
                                }
                            })
                        }
                    })

                    this.deviceTypeList = data
                    // console.log('77777883deviceTypeList', data)
                }).catch(error => {
                    // console.error('获取设备类型列表失败:', error);
                });
            },

            renderMapData(memberList) {
                if (!memberList || !memberList.length || !memberList[0].lng_lat) {
                    console.log('memberList或经纬度为空');
                    return;
                }

                this.mapOption = this.initMap();

                // console.log('悬停获取地图数据,data==== ', data);
                const d = [];
                if (memberList.length > 0) {
                    memberList.forEach(item => {
                        // console.log('悬停获取地图数据,item==== ', item.lng_lat);
                        if (item.lng_lat) {
                            const coordinates = item.lng_lat.split(',');
                            const time = this.unixToDate(item.create_time, "MM-dd hh:mm");
                            d.push({
                                name: item.nickname,
                                value: coordinates,
                                size: 10,
                                text: `${item.address}<br>${item.member_name},${time}`
                            });
                        }
                    });
                }

                // 更新地图配置
                this.mapOption.series = [
                    {
                        name: "体征告警",
                        type: 'effectScatter',
                        coordinateSystem: 'bmap',
                        data: [], // 用于显示报警点
                        symbolSize: 10,
                        showEffectOn: "render", // 配置何时显示特效。 render 绘制完成后显示特效。emphasis 高亮（hover）的时候显示特效。
                        rippleEffect: {
                            brushType: "stroke", // 波纹的绘制方式 stroke 和 fill
                            number: 3, // 波纹的数量
                            scale: 5, // 波纹放大的倍数
                            color: "#8FD1C3",
                        },
                        hoverAnimation: true,
                        label: {
                            formatter: "{b}",
                            position: "right",
                            show: true,
                        },
                        itemStyle: {
                            color: "#f37b1d",
                            shadowBlur: 10,
                            shadowColor: "#333",
                        },
                        zlevel: 1,
                    },
                    {
                        name: '正常体征',
                        type: 'scatter',
                        coordinateSystem: 'bmap',
                        data: d,
                        symbolSize: 10,
                        label: {
                            formatter: '{b}',
                            position: 'right',
                            show: false
                        },
                        itemStyle: {
                            color: "#ddb926",
                        },
                        emphasis: {
                            label: {
                                show: true
                            }
                        }
                    }];

                // 设置地图中心和缩放级别
                if (d.length > 0) {
                    this.mapOption.bmap.center = d[0].value;
                    this.mapOption.bmap.zoom = 14;
                }
                // 应用配置
                this.myMapChart.setOption(this.mapOption, true);
                // 获取百度地图实例
                const bmap = this.myMapChart.getModel().getComponent('bmap').getBMap();
                //  转换为百度地图点位
                const points = d.map(item => {
                    const point = new BMap.Point(item.value[0], item.value[1]);
                    const marker = new BMap.Marker(point);
                    // marker.setTitle(item.name);  /
                    return marker;
                });
                // 清除已有的聚合点
                if (this.markerClusterer) {
                    this.markerClusterer.clearMarkers();
                }

                // 创建新的聚合实例
                this.markerClusterer = new BMapLib.MarkerClusterer(bmap, {
                    markers: points,
                    maxZoom: 16,
                    minClusterSize: 2,

                    styles: [{
                        url: 'https://api.map.baidu.com/library/MarkerClusterer/1.2/examples/images/m1.png',
                        size: new BMap.Size(53, 53),
                        backgroundColor: '#1890FF',
                        textColor: '#fff',
                        textSize: '16'
                    }],

                });

                // 计算所有点的边界
                const bounds = new BMap.Bounds();
                points.forEach(marker => { bounds.extend(marker.getPosition()); });

                // 根据边界自动调整视野
                bmap.setViewport(bounds, {
                    enableAnimation: true,
                    margins: [50, 50, 50, 50]  // 设置上、右、下、左的边距，确保点不会太靠近边缘
                });

                window.addEventListener("resize", this.myMapChart.resize);


            },
            // 添加防抖函数
            debounce(fn, delay) {
                let timer = null;
                return function () {
                    if (timer) clearTimeout(timer);
                    timer = setTimeout(() => {
                        fn.apply(this, arguments);
                    }, delay);
                }
            },

            getDataType(index) {
                const types = ['week', 'month', 'year'];
                return types[index];
            },
            handleAlarmTabClick(index) {
                const type = this.getDataType(index);
                this.activeAlarmType = type;
                this.handleChartTypeChange(type);
            },
            // 获取看板用户信息
            getUserInfo() {
                const partId = this.getQuery('partId');
                this.$http.get("bulletinBoard/user_info/" + partId).then(response => {
                    const data = response.data;

                    this.title = data.partInfo.shop_name;
                    this.allCount = data.userCount.all_count;
                    this.quarterlyAddition = data.userCount.quarterly_count;
                    this.monthlyAddition = data.userCount.month_count;
                    this.manCount = data.userCount.man_count || 0;
                    this.womanCount = data.userCount.woman_count || 0;


                    // 渲染地图
                    this.renderMapData(data.memberList);


                    // 年龄段饼图
                    const pieOption = this.initPieChar();
                    pieOption.series[0].data = data.pieData;
                    // console.log('饼图数据', pieOption.series[0].data);
                    this.myPieEchart.setOption(pieOption);

                }).catch(error => {
                    console.error('获取用户信息失败', error);
                });
            },
            // 获取看板事件报警信息 左二
            getSOSInfo() {
                const partId = this.getQuery('partId');
                this.$http.get("bulletinBoard/sos_info/" + partId)
                    .then(response => {
                        const data = response.data;

                        // 更新数据
                        this.sosInfo.actionList = data.actionList;
                        console.log('获取看板事件报警信息', this.sosInfo.actionList);
                        // 报警分布
                        const xData = data.barList.map(item => item.name);
                        const yData = data.barList.map(item => item.value);
                        const barOption = this.initBarChar();
                        barOption.xAxis[0].data = xData;
                        barOption.series[0].data = yData;
                        this.myBarEchart.setOption(barOption);

                        // 动态报警折线图
                        this.initDynamicAlarm(data);
                    })
                    .catch(error => {
                        console.error('获取报警信息失败', error);
                    });
            },
            // 获取体征看板信息 中三
            getLogInfo() {
                const partId = this.getQuery('partId');
                this.$http.get("bulletinBoard/log_info/" + partId)
                    .then(response => {
                        const data = response.data;
                        // console.log('体征看板信息', data);
                        // 更新今日测量数和近1小时测量数
                        this.dayCount = data.logCount.day_count;
                        this.hourCount = data.logCount.hour_count;

                        // 动态测量项
                        this.initMeasureItem(data);
                        this.logInfo.errVsLogList = data.errVsLogList;
                    })
                    .catch(error => {
                        console.error('获取体征信息失败', error);
                    });
            },
            initWebSocket() {
                const that = this;
                if (!this.partId) {
                    console.warn('partId 不存在，WebSocket 未初始化');
                    return;
                }
                var time = Math.round(new Date()) + "" + Math.round(Math.random() * 100);
                console.log(time, this.partId)
                // var s = "ws://127.0.0.1:8006/bulletinBoard/" + time + "/" + partId;
                var s = "ws://" + this.host_port + "/" + "bulletinBoard/" + time + "/" + this.partId;
                console.log(s)
                var ws = new WebSocket(s);
                ws.onopen = function (evt) {
                    console.log("webSocket连接成功 ...");
                    clearInterval(that.breakTime);
                    that.breakTime = null;
                    that.heartbeatTime = setInterval(function () {
                        ws.send("ping");
                    }, 55000);   // 55秒心跳包
                    // 获取看板用户信息
                    that.getUserInfo();
                    // 获取看板事件报警信息
                    that.getSOSInfo();
                    // 获取看板体征信息
                    that.getLogInfo();
                };
                ws.onmessage = function (e) {
                    console.log("收到消息: " + e.data);
                    if (e.data === 'pong') {
                        return
                    }
                    // {"address":"广东省深圳市南山区留仙大道大学城创客小镇","ageUnit":"岁","birthday":-189417600,"createTime":1661990011,"data":"15秒红外报警",
                    // "frameId":1155,"id":457,"lngLat":"113.961957,22.579848","memberId":54658,"mobile":"18174091244","named":"小米面","partId":2,
                    // "renewType":"SOS","sex":1,"status":0}
                    const data = JSON.parse(e.data);
                    if (data.renewType === 'SOS') {
                        console.log('有人报警...')
                        let mp3 = new Audio('./music/sos.mp3')
                        mp3.loop = false
                        mp3.play()
                        that.openSOSMap(data); // 地图高亮
                        that.getSOSInfo(); // 刷新看板
                    } else if (data.renewType === 'LOG') {
                        console.log('体征异常...')
                        that.openSOSMap(data); // 地图高亮
                        that.getLogInfo(); // 刷新体征
                    } else { // USER
                        that.getUserInfo(); // 刷新用户
                    }
                };
                ws.onclose = function (evt) {
                    console.log("webSocket连接关闭.", that.breakTime);
                    if (!that.breakTime) {
                        console.log('新的定时任务....')
                        clearInterval(that.heartbeatTime);
                        that.breakTime = setInterval(function () {
                            console.log('正在重连...')
                            that.initWebSocket();
                        }, 5000);   // 5秒重连一次
                    }
                    // heartbeatTime.
                };
            },
            // 地图高亮
            openSOSMap(data) {
                if (data.lngLat) {
                    var d = []
                    d.push({
                        name: data.named,
                        value: data.lngLat.split(","),
                        size: 20,
                        text: formatSOSText(data),
                    })
                    this.mapOption.series[0].data = d;
                    this.mapOption.bmap.center = d[0].value;
                    this.mapOption.bmap.zoom = 18;
                    this.myMapChart.setOption(this.mapOption);
                    this.myMapChart.dispatchAction({
                        type: 'showTip',
                        seriesIndex: 0,
                        dataIndex: 0
                    });
                    clearTimeout(this.showTime);
                    this.showTime = setTimeout(() => this.clearSOSMap(), 15000);
                }
            },
            // 清除百度地图报警点
            clearSOSMap() {
                console.log("我要清除报警高亮点了", this.mapOption.series[0].data, this.mapOption.series[1].data[0].value)
                this.mapOption.series[0].data = [];
                this.mapOption.bmap.center = this.mapOption.series[1].data[0].value;
                this.mapOption.bmap.zoom = 16;
                this.myMapChart.setOption(this.mapOption);
            },
            openTimer() {
                // 测量时间段定时器
                let i = 0;
                const aclick = document.querySelectorAll('.order a');
                setInterval(() => {
                    i = (i + 1) % 4; // 循环 0-3
                    aclick[i].click(); // 触发点击事件
                }, 3000);

                // 报警统计折线图定时器
                let ii = 0;
                const alarmLinks = document.querySelectorAll('.alarms .caption a');
                setInterval(() => {
                    ii = (ii + 1) % alarmLinks.length; // 根据实际元素数量循环
                    alarmLinks[ii].click(); // 触发点击事件
                }, 5000);
                // setInterval(() => {
                //     ii = (ii + 1) % 5; // 循环 0-4
                //     alarmLinks[ii].click(); // 触发点击事件
                // }, 5000);
            },
            // 自调用函数设置字体大小
            setFont() {
                let html = document.documentElement
                let width = html.clientWidth
                if (width < 1024) width = 1024
                if (width > 1920) width = 1920
                let fontSize = width / 80 + 'px'
                html.style.fontSize = fontSize
            },
            setGeoHeight() {
                this.$nextTick(() => {
                    let mapHeight = document.querySelector('.map').offsetHeight;
                    document.querySelector('.geo').style.height = mapHeight + 'px';
                    // console.log('地图高度!!:', mapHeight)
                });
            },
            // 窗口调整处理函数
            handleResize() {
                this.setFont();
                this.setGeoHeight();
            },

            initMonitor() {
                // 获取所有 marquee 元素并复制内容
                this.$nextTick(() => {
                    const marquees = document.querySelectorAll('.monitor .marquee');
                    if (!marquees || marquees.length === 0) return;

                    marquees.forEach(marquee => {
                        const clone = Array.from(marquee.children).map(child => child.cloneNode(true));
                        clone.forEach(item => marquee.appendChild(item));
                    });
                });
            },
            // 报警分布柱状图
            initBarChar() {
                return {
                    // 工具提示
                    tooltip: {
                        // 触发类型  经过轴触发axis  经过轴触发item
                        trigger: 'item',
                        // 轴触发提示才有效
                        axisPointer: {
                            // 默认为直线，可选为：'line' 线效果 | 'shadow' 阴影效果
                            type: 'shadow'
                        }
                    },
                    // 图表边界控制
                    grid: {
                        // 距离 上右下左 的距离
                        left: '0',
                        right: '3%',
                        bottom: '3%',
                        top: '5%',
                        // 大小是否包含文本【类似于boxsizing】
                        containLabel: true,
                        //显示边框
                        show: true,
                        //边框颜色
                        borderColor: 'rgba(0, 240, 255, 0.3)'
                    },
                    // 控制x轴
                    xAxis: [
                        {
                            // 使用类目，必须有data属性
                            type: 'category',
                            // 使用 data 中的数据设为刻度文字
                            data: [],
                            // 刻度设置
                            axisTick: {
                                // true意思：图形在刻度中间
                                // false意思：图形在刻度之间
                                alignWithLabel: false,
                                show: false
                            },
                            //文字
                            axisLabel: {
                                color: '#4c9bfd'
                            }
                        }
                    ],
                    // 控制y轴
                    yAxis: [
                        {
                            // 使用数据的值设为刻度文字
                            type: 'value',
                            axisTick: {
                                // true意思：图形在刻度中间
                                // false意思：图形在刻度之间
                                alignWithLabel: false,
                                show: false
                            },
                            //文字
                            axisLabel: {
                                color: '#4c9bfd'
                            },
                            splitLine: {
                                lineStyle: {
                                    color: 'rgba(0, 240, 255, 0.3)'
                                }
                            },
                        }
                    ],
                    // 控制x轴
                    series: [
                        {
                            // series配置
                            // 颜色
                            itemStyle: {
                                // 提供的工具函数生成渐变颜色
                                color: new echarts.graphic.LinearGradient(
                                    // (x1,y2) 点到点 (x2,y2) 之间进行渐变
                                    0, 0, 0, 1,
                                    [
                                        { offset: 0, color: '#00fffb' }, // 0 起始颜色
                                        { offset: 1, color: '#0061ce' }  // 1 结束颜色
                                    ]
                                )
                            },
                            // 图表数据名称
                            name: this.$t('wdklScreen.alarmDistribution'),
                            // 图表类型
                            type: 'bar',
                            // 柱子宽度
                            barWidth: '60%',
                            // 数据
                            data: []
                        }
                    ]
                };
            },
            // 性别饼图
            initPieChar() {
                return {
                    // 控制提示
                    tooltip: {
                        trigger: 'item',         // 非轴图形，使用item的意思是放到数据对应图形上触发提示
                        // 格式化提示内容：
                        // a 代表图表名称 b 代表数据名称 c 代表数据  d代表  当前数据/总数据的比例
                        formatter: "{a} <br/>{b} : {c} ({d}%)"
                    },
                    // 控制图表
                    series: [
                        {
                            // 图表名称
                            name: this.$t('wdklScreen.ageGroup'),
                            // 图表类型
                            type: 'pie',
                            // 南丁格尔玫瑰图 有两个圆  内圆半径10%  外圆半径70%
                            // 百分比基于  图表DOM容器的半径
                            radius: ['10%', '70%'],
                            // 图表中心位置 left 50%  top 50% 距离图表DOM容器
                            center: ['50%', '50%'],
                            // 半径模式，另外一种是 area 面积模式
                            roseType: 'radius',
                            // 数据集 value 数据的值 name 数据的名称
                            data: [],
                            //文字调整
                            label: {
                                fontSize: 10
                            },
                            //引导线
                            labelLine: {
                                length: 8,
                                length2: 10
                            }
                        },
                    ],
                    color: ['#006cff', '#60cda0', '#ed8884', '#ff9f7f', '#0096ff', '#9fe6b8', '#32c5e9', '#1d9dff']
                };
            },
            //报警统计折线图
            initLineChar() {
                return {
                    tooltip: {
                        trigger: 'axis'
                    },
                    xAxis: {
                        type: 'category',
                        data: [],
                        axisTick: {
                            show: false
                        },
                        axisLabel: {
                            color: '#4c9bfd',

                        },
                        axisLine: {
                            show: false
                        },
                        boundaryGap: false
                    },
                    yAxis: {
                        // 数据作为刻度文字
                        type: 'value',
                        axisTick: {
                            show: false//去除刻度线
                        },
                        axisLabel: {
                            color: '#4c9bfd'//文本颜色
                        },
                        axisLine: {
                            show: false//去除轴线
                        },
                        boundaryGap: false//去除轴内间距
                    },
                    legend: {
                        textStyle: {
                            color: '#4c9bfd' // 图例文字颜色
                        },
                        type: 'scroll',
                        right: '10%'//距离右边10%
                    },
                    grid: {
                        show: true,// 显示边框
                        top: '20%',
                        left: '3%',
                        right: '8%',
                        bottom: '3%',
                        borderColor: '#012f4a',// 边框颜色
                        containLabel: true // 包含刻度文字在内
                    },
                    series: [{
                        data: [],   // 数据
                        type: 'line',  // 图表类型
                        smooth: true,  // 圆滑连接
                        itemStyle: {
                            color: '#00f2f1'
                        }
                    }]
                };
            },

            // 动态测量项365天、90、30、7天测量
            initMeasureItem(data) {
                // console.log('动态测量项365天、90、30、7天测量',data);
                this.measureData = {
                    day365: {
                        count: data.logCount.year_count + data.logCount.year_err_count,
                        errCount: data.logCount.year_err_count
                    },
                    day90: {
                        count: data.logCount.season_count + data.logCount.season_err_count,
                        errCount: data.logCount.season_err_count
                    },
                    day30: {
                        count: data.logCount.month_count + data.logCount.month_err_count,
                        errCount: data.logCount.month_err_count
                    },
                    day7: {
                        count: data.logCount.week_count + data.logCount.week_err_count,
                        errCount: data.logCount.week_err_count
                    }
                };

                // 更新初始数据
                this.handleMeasureFilter('day365');

            },
            handleMeasureFilter(key) {
                // console.log('!99989974854',key);
                this.activeTimeFilter = key;
                this.currentMeasureData = this.measureData[key];

            },
            // 报警统计折线图
            initDynamicAlarm(item) {
                this.myLineEchart.resize({ height: document.querySelector('.line').offsetHeight - 10 });
                console.log('!动态报警折线图', item);
                // 先处理周数据的国际化
                if (item.week && item.week[1]) {
                    item.week[1] = item.week[1].map(day => {
                        return this.$t(`wdklScreen.${day.toLowerCase()}`);
                    });
                }
                // 保存数据到 Vue 实例中
                this.chartData = {
                    year: item.year,
                    month: item.month,
                    week: item.week
                };
                // 初始化显示周数据
                this.handleChartTypeChange('week');
            },
            // 添加独立的图表类型切换处理方法
            handleChartTypeChange(type) {

                this.activeAlarmType = type;
                let lineOption = this.initLineChar();
                const key = this.chartData[type];

                // 先清空现有的图表
                this.myLineEchart.clear();
                this.myLineEchart.setOption(lineOption);
                // console.log('2添加独立的图表类型切换处理方法', key);

                if (key && key[0] && key[0].length > 0) {
                    key[0].forEach((t, i) => {

                        const d = {
                            name: this.deviceTypeGetter(Number(key[2][i])),
                            // name: key[2][i],
                            type: 'line',
                            stack: type + '总量' + i,
                            data: t,
                            smooth: true,
                            emphasis: {
                                focus: 'series',
                                blurScope: 'coordinateSystem'
                            },
                            itemStyle: {
                                color: this.colorList[i]
                            }
                        };
                        lineOption.series.push(d)
                    });
                } else {
                    const dd = []
                    key[1].forEach((t, i) => {
                        dd.push('0');
                    });
                    lineOption.series.push({
                        name: '',
                        type: 'line',
                        stack: type + '总量0',
                        data: dd,
                        smooth: true,
                        emphasis: {
                            focus: 'series',
                            blurScope: 'coordinateSystem'
                        },
                        itemStyle: {
                            color: '#00f2f1'
                        }
                    });
                    key[2] = [''];
                }
                lineOption.legend.data = key[2].map(item => this.deviceTypeGetter(Number(item)));
                lineOption.xAxis.data = key[1]


                this.myLineEchart.setOption(lineOption);
            },
            // 初始化百度地图
            initMap() {
                return {
                    backgroundColor: 'transparent',
                    title: {
                        text: this.$t('wdklScreen.userMapOverview'),
                        left: 'center',
                        textStyle: {
                            color: '#fff'
                        }
                    },
                    tooltip: {
                        trigger: 'item',
                        formatter: (params) => {
                            return params.data.text;
                        }
                    },
                    bmap: {
                        center: [114.25, 30.34],
                        zoom: 11,
                        roam: true,
                        geo: {
                            aspectScale: 0.3
                        },
                        mapStyleV2: {
                            styleJson: returnMapStyleJson()
                        }
                    },
                    series: [
                        {
                            name: '体征告警',
                            type: 'effectScatter',
                            coordinateSystem: 'bmap',
                            data: [],
                            symbolSize: (val1, val2) => val2.data.size,
                            showEffectOn: 'render',
                            rippleEffect: {
                                brushType: 'stroke',
                                number: 3,
                                scale: 5,
                                color: '#8FD1C3'
                            },
                            hoverAnimation: true,
                            label: {
                                formatter: '{b}',
                                position: 'right',
                                show: true
                            },
                            itemStyle: {
                                color: '#f37b1d',
                                shadowBlur: 10,
                                shadowColor: '#333'
                            },
                            zlevel: 1
                        },
                        {
                            name: '正常体征',
                            type: 'scatter',
                            coordinateSystem: 'bmap',
                            data: [],
                            symbolSize: (val1, val2) => val2.data.size,
                            label: {
                                formatter: '{b}',
                                position: 'right'
                            },
                            itemStyle: {
                                color: '#ddb926'
                            },
                            emphasis: {
                                label: {
                                    show: true
                                }
                            }
                        }
                    ]
                };
            },
            // 获取网页链接参数
            getQuery(name) {
                let reg = new RegExp('(^|&)' + name + "=([^&]*)", "i");
                let r = decodeURI(window.location.search.substr(1)).match(reg);
                if (r != null) return r[2]; return null;
            },

            // 用户显示文字
            formatText(item) {
                var str = "";
                if (item.address) {
                    str = item.address + "<br/>";
                }
                str += item.nickname + "，" + this.formatSex(item.sex) + (item.birthday ? ("，" + this.formatAge(item.birthday)) : "");
                return str;
            },
            // SOS显示报警文字
            formatSOSText(item) {
                var str = "";
                if (item.address) {
                    str = item.address + "<br/>";
                }
                str += item.named + "，" + this.formatSex(item.sex);
                if (item.birthday) {
                    str += "，" + formatAge(item.birthday);
                }
                str += "<br/>";
                str += "报警内容：" + item.data + "<br/>";
                if (item.relativeMobile) {
                    str += "联系亲属：" + item.relativeMobile + "<br/>";
                }
                if (item.sOSLngLat) {
                    str += "报警位置：" + item.sOSLngLat;
                }
                return str;
            },
            // 时间转换
            unixToDate(unix, format) {
                if (!unix) return unix
                var _format = format || 'yyyy-MM-dd hh:mm:ss'
                const d = new Date(unix * 1000)
                const o = {
                    'M+': d.getMonth() + 1,
                    'd+': d.getDate(),
                    'h+': d.getHours(),
                    'm+': d.getMinutes(),
                    's+': d.getSeconds(),
                    'q+': Math.floor((d.getMonth() + 3) / 3),
                    S: d.getMilliseconds()
                }
                if (/(y+)/.test(_format)) _format = _format.replace(RegExp.$1, (d.getFullYear() + '').substr(4 - RegExp.$1.length))
                for (const k in o) if (new RegExp('(' + k + ')').test(_format)) _format = _format.replace(RegExp.$1, (RegExp.$1.length === 1) ? (o[k]) : (('00' + o[k]).substr(('' + o[k]).length)))
                return _format
            },
            // 性别转换
            formatSex(sex) {
                return sex === 1 ? '男' : sex === 0 ? '女' : '未知'
            },
            // 生日转换
            formatAge(birthday) {
                const data = this.formatBirthdayToAge(birthday * 1000)
                return data.age + data.ageunit
            },
            // 将生日转换成年龄
            formatBirthdayToAge(birthday) {
                const birth = new Date(birthday)
                const birthYear = birth.getFullYear() // 出生年
                const birthMonth = birth.getMonth() + 1 // 出生月
                const birthDay = birth.getDate() // 出生日
                const nowYear = new Date().getFullYear() // 出生年
                const nowMonth = new Date().getMonth() + 1 // 出生月
                const nowDay = new Date().getDate() // 出生日
                if (nowYear === birthYear) { // 同年
                    if (nowMonth === birthMonth) { // 同月
                        return {
                            age: nowDay - birthDay,
                            ageunit: '天'
                        }
                    } else {
                        return {
                            age: nowMonth - birthMonth,
                            ageunit: '月'
                        }
                    }
                } else { // 计算周岁
                    const ageDiff = nowYear - birthYear // 年之差
                    if (ageDiff > 0) {
                        if (nowMonth === birthMonth) { // 同月
                            const dayDiff = nowDay - birthDay// 日之差
                            if (dayDiff < 0) {
                                return {
                                    age: ageDiff - 1,
                                    ageunit: '岁'
                                }
                            } else {
                                return {
                                    age: ageDiff,
                                    ageunit: '岁'
                                }
                            }
                        } else {
                            const monthDiff = nowMonth - birthMonth // 月之差
                            if (monthDiff < 0) {
                                return {
                                    age: ageDiff - 1,
                                    ageunit: '岁'
                                }
                            } else {
                                return {
                                    age: ageDiff,
                                    ageunit: '岁'
                                }
                            }
                        }
                    }
                }
            }
        },

    }
    )
</script>
<script src="./js/mymap.js"></script>

</html>