hb_zhgd_screen/js/operEnvironment/operEnvironment.js

let element, layer, table;
const bidCode = parent.$("#bidPro").val();
var alarmTableIns;
let weatherArray = [];
let weatherIconArray = [];
let temperatureArray = [];
let timeArray = [];
layui.use(["layer", "element", "table"], function () {
    element = layui.element;
    layer = layui.layer;
    table = layui.table;

    // 响应成功后的拦截器
    $.ajaxSetup({
        beforeSend: function (xhr, options) {
            var originalSuccess = options.success;
            options.success = function (data, textStatus, jqXhr) {
                data = modifyResponseData(data);
                // success(data,textStatus, jqXhr);
                originalSuccess.apply(this, arguments);
            };
        },
    });

    //边坡位移监测列表
    DaylightDisplacementList("");
    DaylightDisplacementApi();
    //和风天气API调用
    //  zephyrineWeather();
    //有限空间
    LimitedSpaceApi();
    //GPS安装检测
    GPSInstallationApi();
    //实时监测
    realTimeMonitoring();
    // 智慧手环-table
    loadZhshTable();
});

//实时监测
function realTimeMonitoring() {
    const url =
        commonUrl +
        "screen/largeScreen/operatingEnvironment/RealTimeMonitoring";
    const params = {
        bidCode: bidCode,
        roleCode: roleCode,
        orgId: orgId,
        userId: userId,
    };
    let encryptStr = encryptCBC(JSON.stringify(params));
    ajaxRequest(
        url,
        "POST",
        encryptStr,
        true,
        function () {},
        function (result) {
            if (result.code === 200) {
                setData(result.data);
            } else if (result.code === 500) {
                console.error("实时监测" + result.msg);
                setData(null);
            } else if (result.code === 401) {
                loginout(1);
            }
        },
        function (xhr, status, error) {
            error(xhr, status, error);
            setData(null);
        },
        "application/json",
        aqEnnable
    );

    /* 实时检测赋值 */
    function setData(data) {
        if (data && data.length > 0) {
            $.each(data, function (index, item) {
                var itemHtml = "";
                if (item.isWarn == "0") {
                    itemHtml = `<div class="monitor-item" onclick="onDeviceDoubleClick(1901)">
                                    <p><span id="wd">${item.val}</span><span>${item.unit}</span></p>
                                    <p>${item.dataType}</p>
                                    <div class="item-icon"></div>
                                </div>`;
                } else if (item.isWarn == "1") {
                    itemHtml = `<div class="monitor-item" onclick="onDeviceDoubleClick(1901)">
                                    <p><span id="wd" class="redColor">${item.val}</span><span class="redColor">${item.unit}</span></p>
                                    <p class="redColor">${item.dataType}</p>
                                    <div class="item-icon"></div>
                                </div>`;
                }

                $("#flex-Box").append(itemHtml);
            });
        }
    }
}

//边坡位移监测列表
function DaylightDisplacementList(deviceId) {
    const url =
        commonUrl +
        "screen/largeScreen/operatingEnvironment/getSlopeDisplacementList";

    alarmTableIns = table.render({
        elem: "#demo",
        url: url,
        skin: "line",
        height: "#right-down-right-10",
        headers: {
            decrypt: "decrypt",
            Authorization: token,
        },
        where: {
            roleCode: roleCode,
            orgId: orgId,
            userId: userId,
            bidCode: bidCode,
            deviceId: deviceId,
        },
        cols: [
            [
                {
                    field: "number",
                    width: 80,
                    title: "序号",
                    align: "center",
                    type: "numbers",
                    fixed: "left",
                },
                // {field: 'areaName', title: '区域'},
                { field: "deviceName", title: "设备名称" },
                { field: "moduleName", title: "检测类型" },
                { field: "val", title: "检测值" },
                //  {field: 'sourceData', title: '原数据'},
                { field: "changeVal", title: "变化值" },
                { field: "createTime", title: "检测时间" },
                {
                    field: "isWarn",
                    title: "状态",
                    templet: function (d) {
                        if (d.isWarn == 1) {
                            return '<span style="color: #FF5722;">告警</span>';
                        } else if (d.isWarn == 0) {
                            return '<span style="color: #5FB878;">正常</span>';
                        } else {
                            return '<span style="color: #5FB878;">正常</span>';
                        }
                    },
                },
            ],
        ],
        initComplete: function () {
            // 在表格渲染完成后，重新渲染序号列
            var that = this.elem.next();
            var tool = that
                .children(".layui-table-box")
                .children(".layui-table-fixed")
                .children(".layui-table-body")
                .children(".layui-table");
            tool.find("tr").each(function (index, item) {
                $(this)
                    .find('td[data-field="LAY_TABLE_INDEX"]')
                    .text(index + 1);
            });
        },
        done: function (res, curr, count, origin) {
            console.log(res);
        },
        page: true, //开启分页
        loading: true, //数据加载中。。。
        limits: [5, 10, 20, 100],
        limit: 5,
    });
}

function DaylightDisplacementApi() {
    const url =
        commonUrl + "screen/largeScreen/operatingEnvironment/SlopeDisplacement";
    const params = {
        roleCode: roleCode,
        orgId: orgId,
        userId: userId,
        bidCode: bidCode,
        deviceType: 1908,
    };
    let encryptStr = encryptCBC(JSON.stringify(params));
    ajaxRequest(
        url,
        "POST",
        encryptStr,
        true,
        function () {},
        function (result) {
            console.log(result);
            if (result.code === 200) {
                DaylightDisplacement(result.data);
            } else if (result.code === 500) {
                layer.msg(result.msg, { icon: 2 });
            } else if (result.code === 401) {
                loginout(1);
            }
        },
        function (xhr, status, error) {
            error(xhr, status, error);
        },
        "application/json",
        aqEnnable
    );
}

function DaylightDisplacement(environmentData) {
    let html = "";
    $.each(environmentData, function (index, item) {
        html +=
            '<div class="item layout" dev-id = "' +
            item.deviceId +
            '" ondblclick="onDeviceDoubleClick(1908)" onclick="loadData(this)">' +
            '<img src="../../img/operEnvironment/daylightDisplacement-abnormal.png">' +
            "<p>" +
            item.deviceName +
            "</p>" +
            "</div>";
    });
    $(".right-down-left").empty().append(html);
}

function onDeviceDoubleClick(deviceType) {
    openIframeByParamObj(
        "handleData3",
        "边坡位移监测信息",
        "./dialog.html",
        "72%",
        "95%",
        { deviceType },
        1
    );
}

function loadData(that) {
    const devId = $(that).attr("dev-id");
    $(".right-down-left .item").each(function () {
        $(this)
            .find("img")
            .attr(
                "src",
                "../../img/operEnvironment/daylightDisplacement-abnormal.png"
            );
    });
    $(that)
        .find("img")
        .attr(
            "src",
            "../../img/operEnvironment/daylightDisplacement-normal.png"
        );
    DaylightDisplacementList(devId);
}

function backData(type) {
    if (type === 1) {
        $(".right-down-left .item").each(function () {
            $(this)
                .find("img")
                .attr(
                    "src",
                    "../../img/operEnvironment/daylightDisplacement-abnormal.png"
                );
        });
        DaylightDisplacementList("");
    } else if (type === 2) {
        $(".environment .item").each(function (index, item) {
            $(this)
                .find("img")
                .attr(
                    "src",
                    "../../img/operEnvironment/LimitedMonitoring-abnormal.png"
                );
            if (index === 0) {
                const devId = $(this).attr("dev-id");
                LimitedSpaceEnvironmentApi(devId);
            }
        });
    } else if (type === 3) {
        $(".environments .item").each(function (index, item) {
            $(this)
                .find("img")
                .attr(
                    "src",
                    "../../img/operEnvironment/LimitedMonitoring-abnormal.png"
                );
            if (index === 0) {
                const devId = $(this).attr("dev-id");
                LimitedSpaGPSInstallationEnvironmentApiceEnvironmentApi(devId);
            }
        });
    }
}

//和风天气API调用
function zephyrineWeather() {
    // if (navigator.geolocation) {
    //     navigator.geolocation.getCurrentPosition(function (position) {
    //         let latitude = position.coords.latitude;
    //         let longitude = position.coords.longitude;

    let latitude = "34.007143";
    let longitude = "116.884782";
    console.log("经度：" + longitude + ", 纬度：" + latitude);
    let latLon = "116.747321,33.934215";

    // 百度地图API
    // 创建一个点坐标
    var point = new BMap.Point(longitude, latitude);

    // 根据坐标点获取位置信息
    var geoc = new BMap.Geocoder();
    geoc.getLocation(point, function (rs) {
        var addComp = rs.addressComponents;
        var city = addComp.city;
        var urban = addComp.city + ", " + addComp.district;
        $("#city").text(city);
        $("#urban").text(urban);
    });

    const apiUrl = `https://devapi.qweather.com/v7/weather/now?location=${latLon}&key=b353808cee6649dba8ea4c6838319ea4`;
    fetch(apiUrl)
        .then((response) => response.json())
        .then((data) => {
            const dailyWeather = data.now;
            $("#temp").text(dailyWeather.temp + "°");
            $("#environment").text(dailyWeather.text);
            if (dailyWeather.text === "晴") {
                $("#weather_icon").css(
                    "background-image",
                    "url('../../img/operEnvironment/clearWeather2.png')"
                );
            } else if (dailyWeather.text === "多云") {
                $("#weather_icon").css(
                    "background-image",
                    "url('../../img/operEnvironment/cloudy.png')"
                );
            } else if (dailyWeather.text === "阴") {
                $("#weather_icon").css(
                    "background-image",
                    "url('../../img/operEnvironment/cloudy_sm.png')"
                );
            } else if (
                dailyWeather.text === "中雨" ||
                dailyWeather.text === "大雨" ||
                dailyWeather.text === "雨" ||
                dailyWeather.text === "小雨"
            ) {
                $("#weather_icon").css(
                    "background-image",
                    "url('../../img/operEnvironment/cloudy_sm.png')"
                );
            }
        })
        .catch((error) => {
            console.error("Error fetching weather data:", error);
        });

    const apiUrls = `https://devapi.qweather.com/v7/weather/3d?location=${latLon}&key=b353808cee6649dba8ea4c6838319ea4`;
    fetch(apiUrls)
        .then((response) => response.json())
        .then((data) => {
            // 获取每日天气数据
            const dailyWeather = data.daily;
            if (dailyWeather && Array.isArray(dailyWeather)) {
                dailyWeather.forEach((day, index) => {
                    const dayIndex = index + 1;
                    const dateId = `#date${dayIndex}`;
                    const tempsId = `#temps${dayIndex}`;
                    const airId = `#air${dayIndex}`;
                    const iconId = `#weather_small_icon${dayIndex}`;

                    // 更新HTML元素内容
                    $(dateId).text(day.fxDate);
                    $(tempsId).text(day.tempMin + "°~" + day.tempMax + "°");
                    $(airId).text(day.textDay);

                    // 根据天气情况更新背景图片
                    const weatherIcon = getWeatherIcon(day.textDay);
                    $(iconId).css(
                        "backgroundImage",
                        `url('../../img/operEnvironment/${weatherIcon}')`
                    );
                });
            } else {
                console.log("未能获取有效的天气数据");
            }
        })
        .catch((error) => {
            console.error("Error fetching weather data:", error);
        });

    const apiUrlss = `https://devapi.qweather.com/v7/weather/24h?location=${latLon}&key=b353808cee6649dba8ea4c6838319ea4`;
    fetch(apiUrlss)
        .then((response) => response.json())
        .then((data) => {
            // 获取每小时天气数据
            const dailyWeather = data.hourly;
            if (
                dailyWeather &&
                Array.isArray(dailyWeather) &&
                dailyWeather.length >= 7
            ) {
                dailyWeather.slice(0, 7).map((hourlyData) => {
                    const weather = hourlyData.text; // 天气
                    const temperature = hourlyData.temp; // 温度
                    const time = new Date(hourlyData.fxTime); // 获取时间日期对象
                    let weatherIcon = getWeatherIcon(weather);
                    weatherArray.push(weather);
                    weatherIconArray.push(
                        `../../img/operEnvironment/${weatherIcon}`
                    );
                    temperatureArray.push(temperature);
                    timeArray.push(`${time.getHours()}:${time.getMinutes()}`); // 将小时和分钟以字符串形式存入数组
                });
                console.log("天气数组:", weatherArray);
                console.log("天气图标数组:", weatherIconArray);
                console.log("温度数组:", temperatureArray);
                console.log("时间数组:", timeArray);
                //天气echarts图表
                connect2();
            } else {
                console.log("未能获取有效的天气数据或数据不足7组");
            }
        })
        .catch((error) => {
            console.error("获取天气数据时发生错误:", error);
        });

    // });
    // } else {
    //     console.log("浏览器不支持 Geolocation API");
    // }
}

function getWeatherIcon(weatherText) {
    switch (weatherText) {
        case "晴":
            return "clearWeather2.png";
        case "多云":
            return "cloudy.png";
        case "阴":
            return "cloudy_sm.png";
        case "雨":
        case "小雨":
        case "中雨":
        case "大雨":
            return "cloudy_sm.png";
        default:
            return "default.png";
    }
}

//天气echarts图表
function connect2() {
    var myChart = echarts.init(document.getElementById("weather_time"));
    var rich = {
        b: {
            color: "white",
            fontSize: 12,
            lineHeight: 30,
            height: 20,
        },
    };

    for (var i = 0; i < weatherIconArray.length; i++) {
        rich[i] = {
            backgroundColor: {
                image: weatherIconArray[i],
            },
            height: 30,
            width: 30,
        };
    }
    var option = {
        grid: {
            show: true,
            backgroundColor: "transparent",
            opacity: 0.3,
            borderWidth: "0",
            top: "150",
            bottom: "0",
        },
        tooltip: {
            trigger: "axis",
        },
        legend: {
            show: false,
        },
        xAxis: [
            // 日期
            {
                type: "category",
                boundaryGap: false,
                position: "top",
                offset: 100,
                zlevel: 100,
                axisLine: {
                    show: false,
                },
                axisTick: {
                    show: false,
                },
                axisLabel: {
                    interval: 0,
                    formatter: ["{a|{value}}"].join("\n"),
                    rich: {
                        a: {
                            color: "white",
                            fontSize: 11,
                        },
                    },
                },
                nameTextStyle: {},
                data: timeArray,
            },
            // 天气图标
            {
                type: "category",
                boundaryGap: false,
                position: "top",
                offset: 20,
                zlevel: 100,
                axisLine: {
                    show: false,
                },
                axisTick: {
                    show: false,
                },
                axisLabel: {
                    interval: 0,
                    formatter: function (value, index) {
                        return "{" + index + "| }\n{b|" + value + "}";
                    },
                    rich: rich,
                },
                nameTextStyle: {
                    fontWeight: "bold",
                    fontSize: 19,
                },
                data: weatherArray,
            },
        ],
        yAxis: {
            type: "value",
            show: false,
            axisLabel: {
                formatter: "{value} °C",
                color: "white",
            },
        },
        series: [
            {
                name: "最高气温",
                type: "line",
                data: temperatureArray,
                symbol: "emptyCircle",
                symbolSize: 10,
                showSymbol: true,
                smooth: true,
                itemStyle: {
                    normal: {
                        color: "#C95843",
                    },
                },
                label: {
                    show: true,
                    position: "top",
                    color: "white",
                    formatter: "{c} °C",
                },
                lineStyle: {
                    width: 1,
                    // shadowOffsetY: -10,
                    // color: 'white'
                },
                areaStyle: {
                    opacity: 1,
                    // shadowOffsetY: -10,
                    color: "transparent",
                },
            },
        ],
    };

    myChart.setOption(option);
}

//有限空间
function LimitedSpaceApi() {
    const url =
        commonUrl + "screen/largeScreen/operatingEnvironment/FiniteSpace";
    const params = {
        roleCode: roleCode,
        orgId: orgId,
        userId: userId,
        bidCode: bidCode,
    };
    let encryptStr = encryptCBC(JSON.stringify(params));
    ajaxRequest(
        url,
        "POST",
        encryptStr,
        true,
        function () {},
        function (result) {
            console.log(result);
            if (result.code === 200) {
                LimitedSpace(result.data);
            } else if (result.code === 500) {
                layer.msg(result.msg, { icon: 2 });
            } else if (result.code === 401) {
                loginout(1);
            }
        },
        function (xhr, status, error) {
            error(xhr, status, error);
        },
        "application/json",
        aqEnnable
    );
}

function LimitedSpace(environmentData) {
    let html = "";
    $.each(environmentData, function (index, item) {
        if (index === 0) {
            LimitedSpaceEnvironmentApi(item.deviceId);
        }
        html +=
            '<div class="item layout" dev-id = "' +
            item.deviceId +
            '" onclick="loadData2(this)">' +
            '<img src="../../img/operEnvironment/LimitedMonitoring-abnormal.png">' +
            "<p>" +
            item.deviceName +
            "</p>" +
            "</div>";
    });
    $(".environment").empty().append(html);
}

function loadData2(that) {
    const devId = $(that).attr("dev-id");
    $(".environment .item").each(function () {
        $(this)
            .find("img")
            .attr(
                "src",
                "../../img/operEnvironment/LimitedMonitoring-abnormal.png"
            );
    });
    $(that)
        .find("img")
        .attr("src", "../../img/operEnvironment/LimitedMonitoring-normal.png");
    LimitedSpaceEnvironmentApi(devId);
}

function LimitedSpaceEnvironmentApi(deviceId) {
    const url =
        commonUrl +
        "screen/largeScreen/operatingEnvironment/getFiniteSpaceEnvironment";
    const params = {
        roleCode: roleCode,
        orgId: orgId,
        userId: userId,
        bidCode: bidCode,
        deviceId: deviceId,
    };
    let encryptStr = encryptCBC(JSON.stringify(params));
    ajaxRequest(
        url,
        "POST",
        encryptStr,
        true,
        function () {},
        function (result) {
            console.log(result);
            if (result.code === 200) {
                const data = result.data;
                if (data && data.length > 0) {
                    console.log(data);
                    $("#yxkjId").empty();
                    $.each(data, function (index, item) {
                        let div =
                            '<div class=" layout monitor-data " onclick="onDeviceDoubleClick(1909)"><p><span>' +
                            item.val +
                            "</span><span>" +
                            item.unit +
                            "</span></p><p>" +
                            item.modeName +
                            "</p><div id='logo' class=\"monitor-icon\"></div>";
                        $("#yxkjId").append(div);
                    });
                }
            } else if (result.code === 500) {
                layer.msg(result.msg, { icon: 2 });
            } else if (result.code === 401) {
                loginout(1);
            }
        },
        function (xhr, status, error) {
            error(xhr, status, error);
        },
        "application/json",
        aqEnnable
    );
}

//GPS安装检测
function GPSInstallationApi() {
    const url =
        commonUrl +
        "screen/largeScreen/operatingEnvironment/getGPSInstallation";
    const params = {
        roleCode: roleCode,
        orgId: orgId,
        userId: userId,
        bidCode: bidCode,
        deviceType: "1910",
    };
    let encryptStr = encryptCBC(JSON.stringify(params));
    ajaxRequest(
        url,
        "POST",
        encryptStr,
        true,
        function () {},
        function (result) {
            console.log(result);
            if (result.code === 200) {
                GPSInstallation(result.data);
            } else if (result.code === 500) {
                layer.msg(result.msg, { icon: 2 });
            } else if (result.code === 401) {
                loginout(1);
            }
        },
        function (xhr, status, error) {
            error(xhr, status, error);
        },
        "application/json",
        aqEnnable
    );
}

function GPSInstallation(environmentData) {
    let html = "";
    $.each(environmentData, function (index, item) {
        if (index === 0) {
            GPSInstallationEnvironmentApi(item.deviceId);
        }
        html +=
            '<div class="item layout" dev-id = "' +
            item.deviceId +
            '" onclick="loadData3(this)">' +
            '<img src="../../img/operEnvironment/LimitedMonitoring-abnormal.png">' +
            "<p>" +
            item.deviceName +
            "</p>" +
            "</div>";
    });
    $(".environments").empty().append(html);
}

function loadData3(that) {
    const devId = $(that).attr("dev-id");
    $(".environments .item").each(function () {
        $(this)
            .find("img")
            .attr(
                "src",
                "../../img/operEnvironment/LimitedMonitoring-abnormal.png"
            );
    });
    $(that)
        .find("img")
        .attr("src", "../../img/operEnvironment/LimitedMonitoring-normal.png");
    GPSInstallationEnvironmentApi(devId);
}

function GPSInstallationEnvironmentApi(deviceId) {
    const url =
        commonUrl +
        "screen/largeScreen/operatingEnvironment/GPSInstallationEnvironment";
    const params = {
        roleCode: roleCode,
        orgId: orgId,
        userId: userId,
        bidCode: bidCode,
        deviceId: deviceId,
    };
    let encryptStr = encryptCBC(JSON.stringify(params));
    ajaxRequest(
        url,
        "POST",
        encryptStr,
        true,
        function () {},
        function (result) {
            console.log(result);
            if (result.code === 200) {
                const data = result.data;
                $("#gisId").empty();
                if (data && data.length > 0) {
                    $.each(data, function (index, item) {
                        let gisDiv =
                            ' <div class="layout monitor-data wd" onclick="onDeviceDoubleClick(1910)"><p><span id="gis_wd">' +
                            item.val +
                            "</span><span>" +
                            item.unit +
                            "</span></p>" +
                            " <p>" +
                            item.modeName +
                            "</p>" +
                            " <div id='logo' class=\"monitor-icon\"></div>";
                        $("#gisId").append(gisDiv);
                    });
                }
            } else if (result.code === 500) {
                layer.msg(result.msg, { icon: 2 });
            } else if (result.code === 401) {
                loginout(1);
            }
        },
        function (xhr, status, error) {
            error(xhr, status, error);
        },
        "application/json",
        aqEnnable
    );
}

/* 智慧手环-table */
function loadZhshTable() {
    const url =
        commonUrl + "screen/largeScreen/operatingEnvironment/getUserShList";
    alarmTableIns = table.render({
        elem: "#zhsh-table",
        url: url,
        height: "#zhsh-table-box-20",
        // skin: 'line',
        // height: 'full',
        headers: {
            decrypt: "decrypt",
            Authorization: token,
        },
        where: {
            roleCode: roleCode,
            orgId: orgId,
            userId: userId,
            bidCode: bidCode,
        },
        cols: [
            [
                {
                    field: "number",
                    width: "5%",
                    title: "序号",
                    align: "center",
                    type: "numbers",
                    fixed: "left",
                },
                { field: "deviceName", title: "设备名称", width: "25%" },
                { field: "userName", title: "姓名", width: "20%" },
                { field: "xl", title: "心率", width: "15%" },
                { field: "xy", title: "血压", width: "20%" },
                { field: "wd", title: "温度", width: "15%" },
            ],
        ],
        initComplete: function () {
            // 在表格渲染完成后，重新渲染序号列
            var that = this.elem.next();
            var tool = that
                .children(".layui-table-box")
                .children(".layui-table-fixed")
                .children(".layui-table-body")
                .children(".layui-table");
            tool.find("tr").each(function (index, item) {
                $(this)
                    .find('td[data-field="LAY_TABLE_INDEX"]')
                    .text(index + 1);
            });
        },
        done: function (res, curr, count, origin) {
            console.log(res);
        },
        page: true, //开启分页
        loading: true, //数据加载中。。。
        limits: [5, 10, 20, 100],
        limit: 5,
    });
}