hb_zhgd_screen/js/pages/towerAssInspect/towerAssInspect.js

let layer, table, form;
let myChart = echarts.init(document.getElementById("tendency"));
const bidCode = parent.$("#bidPro").val();

$("#modelIframe").attr("src", "../../pages/3Dglb/index.html");

layui.use(["layer", "table", "form"], function () {
    layer = layui.layer;
    table = layui.table;
    form = layui.form;
    // 标段工程下拉选监听
    form.on("select(gt)", function (data) {
        getDeviceList(data.value);
    });
    // 响应成功后的拦截器
    $.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);
            };
        },
    });
    //杆塔下拉选
    getGtLists();
});

function getGtLists() {
    const url = commonUrl + "system/sys/select/getGtLists?bidCode=" + bidCode; // 杆塔url
    ajaxRequest(
        url,
        "get",
        null,
        true,
        function () {},
        function (result) {
            if (result.code === 200) {
                let html = "";
                if (
                    result.data &&
                    result.data.length > 0 &&
                    result.data[0] !== null
                ) {
                    $.each(result.data, function (index, item) {
                        html +=
                            '<option value="' +
                            item.gtId +
                            '">' +
                            item.name +
                            "</option>";
                    });
                    // 设备列表
                    getDeviceList(result.data[0].gtId);
                } else {
                    html += '<option value="">无数据</option>';
                    getDeviceList("");
                }
                $("#gt").empty().append(html);
                layui.form.render();
            } else if (result.code === 500) {
                layer.msg(result.msg, { icon: 2 });
            }
        },
        function (xhr) {
            layer.msg(xhr, { icon: 2 });
        }
    );
}

function getDeviceList(gtId) {
    const paramData =
        "bidCode=" +
        bidCode +
        "&roleCode=" +
        roleCode +
        "&orgId=" +
        orgId +
        "&userId=" +
        userId +
        "&gtId=" +
        gtId;
    let montageParam = aqEnnable
        ? encryptCBC(paramData)
        : " &" + encryptCBC(paramData);
    const url =
        commonUrl +
        "screen/largeScreen/towerAssInspect/getDeviceList?params=" +
        montageParam; // url
    ajaxRequestGet(
        url,
        "get",
        true,
        function () {},
        function (result) {
            let html = "";
            if (result.code === 200) {
                if (
                    result.data &&
                    result.data.length > 0 &&
                    result.data[0] !== null
                ) {
                    $.each(result.data, function (index, item) {
                        html +=
                            '<div class="device-list-device" style="cursor: pointer;" ondblclick="onDeviceDoubleClick(\'' +
                            item.deviceId +
                            "')\" onclick=\"getInfo('" +
                            item.deviceId +
                            "')\" >";
                        html +=
                            '<input value = "' +
                            item.deviceId +
                            '" style="display:none;" />';
                        if (item.type == "1") {
                            html += '<div class="img-style normal"></div>';
                        } else if (item.type == "2") {
                            html += '<div class="img-style alarm"></div>';
                        } else if (item.type == "0") {
                            html += '<div class="img-style connection"></div>';
                        }
                        html +=
                            '<div class="device-list-font">' +
                            item.deviceName +
                            "</div>";
                        html += "</div>";
                    });
                    getInfo(result.data[0].deviceId);
                } else {
                    html += '<div style="color:#71757B;">无数据</div>';
                    getInfo("");
                }
            } else if (result.code === 500) {
                layer.msg(result.msg, { icon: 2 });
            }
            $("#deviceList").empty().append(html);
        },
        function (xhr, status, error) {
            error(xhr, status, error);
        },
        aqEnnable
    );
}

//根据点击的设备去查询其他信息
function getInfo(deviceId) {
    //实时检测
    getRealTimeDetection(deviceId);

    //实时告警
    getRealTimeAlarmList(deviceId);

    //历史记录
    getHistoryList(deviceId);
}

// 双击设备列表的设备，打开设备详情
function onDeviceDoubleClick(deviceId) {
    openIframeByParamObj(
        "handleData2",
        "组塔监测信息",
        "./dialog.html",
        "72%",
        "95%",
        null,
        1
    );
}

function getRealTimeDetection(deviceId) {
    let paramData =
        "bidCode=" +
        bidCode +
        "&roleCode=" +
        roleCode +
        "&orgId=" +
        orgId +
        "&userId=" +
        userId +
        "&deviceId=" +
        deviceId;
    let montageParam = aqEnnable
        ? encryptCBC(paramData)
        : " &" + encryptCBC(paramData);
    const url =
        commonUrl +
        "screen/largeScreen/towerAssInspect/getRealTimeDetection?params=" +
        montageParam; // url
    ajaxRequestGet(
        url,
        "get",
        true,
        function () {},
        function (result) {
            let html = "";
            if (result.code === 200) {
                if (
                    result.data &&
                    result.data.length > 0 &&
                    result.data[0] !== null
                ) {
                    $.each(result.data, function (index, item) {
                        let modeName = nullToEmpty(item.modeName);
                        let val = nullToEmpty(item.val);
                        html +=
                            '<div style="cursor: pointer;" class="detection-style detection-incline" onclick="getTrend(\'' +
                            deviceId +
                            "', '" +
                            item.id +
                            "')\">";
                        html += '<div class="detection-style-font">';
                        html +=
                            '<div class="detection-style-font-top">' +
                            modeName +
                            "</div>";
                        html +=
                            '<div class="detection-style-font-bot">' +
                            val +
                            "</div>";
                        html += "</div>";
                        html += "</div>";
                    });
                    //当日检测变化趋势
                    getTrend(deviceId, result.data[0].id);
                } else {
                    html += '<div style="color:#71757B;">无数据</div>';
                }
            } else if (result.code === 500) {
                layer.msg(result.msg, { icon: 2 });
            }
            $("#detection").empty().append(html);
        },
        function (xhr, status, error) {
            error(xhr, status, error);
            setData(null);
        },
        aqEnnable
    );
}

function nullToEmpty(name) {
    if (name === null || name === undefined) {
        name = "";
    }
    return name;
}

function getTrend(deviceId, id) {
    let paramData =
        "bidCode=" +
        bidCode +
        "&roleCode=" +
        roleCode +
        "&orgId=" +
        orgId +
        "&userId=" +
        userId +
        "&deviceId=" +
        deviceId +
        "&id=" +
        id;
    let montageParam = aqEnnable
        ? encryptCBC(paramData)
        : " &" + encryptCBC(paramData);
    const url =
        commonUrl +
        "screen/largeScreen/towerAssInspect/getTrend?params=" +
        montageParam; // url
    ajaxRequestGet(
        url,
        "GET",
        true,
        function () {},
        function (result) {
            let html = "";
            if (result.code === 200) {
                if (
                    result.data &&
                    result.data.length > 0 &&
                    result.data[0] !== null
                ) {
                    let xLabel = [];
                    let dataValue = [];
                    $.each(result.data, function (index, item) {
                        xLabel.push(item.time);
                        dataValue.push(item.changeVal);
                    });
                    initEchartsOne(xLabel, dataValue);
                } else {
                    initEchartsOne([], []);
                }
            } else if (result.code === 500) {
                layer.msg(result.msg, { icon: 2 });
            }
        },
        function (xhr, status, error) {
            error(xhr, status, error);
            setData(null);
        },
        aqEnnable
    );
}

function getRealTimeAlarmList(deviceId) {
    const url =
        commonUrl + "screen/largeScreen/towerAssInspect/getRealTimeAlarmList"; // 建管单位url
    table.render({
        elem: "#demo1",
        height: "full-530",
        url: url,
        skin: "line",
        page: true,
        headers: {
            decrypt: "decrypt",
            Authorization: token,
        },
        where: {
            deviceId: deviceId,
        },
        cols: [
            [
                { type: "numbers", title: "序号" }, // 添加序号列
                { field: "warnContent", title: "告警内容", align: "center" },
                { field: "warnTime", title: "预警时间", align: "center" },
            ],
        ],
        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);
        },
    });
}

function getHistoryList(deviceId) {
    const url = commonUrl + "screen/largeScreen/towerAssInspect/getHistoryList"; // 建管单位url
    table.render({
        elem: "#demo2",
        height: "full-560",
        url: url,
        skin: "line",
        page: true,
        headers: {
            decrypt: "decrypt",
            Authorization: token,
        },
        where: {
            deviceId: deviceId,
        },
        cols: [
            [
                { type: "numbers", title: "序号" }, // 添加序号列
                //{field: 'areaName', align: 'center', title: '区域名称'},
                { field: "deviceName", align: "center", title: "设备名称" },
                { field: "modeName", align: "center", title: "施工工艺" },
                { field: "changeVal", align: "center", title: "变化值" },
                { field: "val", align: "center", title: "检测值" },
                { field: "createTime", align: "center", title: "检测时间" },
                { field: "isWarn", align: "center", title: "是否告警" },

                // {field: 'areaName', title: '区域名称',align:'center'},
                // {field: 'modeName', title: '检测点名称',align:'center'},
                // {field: 'val', title: '检测值',align:'center'},
                // {field: 'thisChangeVal', title: '本次变化值',align:'center'},
                // {field: 'changeVal', title: '累计变化值',align:'center'},
                // {field: 'updateTime', title: '检测时间',align:'center'},
                // {field: 'isWarn', title: '状态',align:'center'}
            ],
        ],
        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);
        },
    });
}

/* 变化趋势 */
function initEchartsOne(xLabel, dataValue) {
    let fontSize = "14",
        fontFamily = "Alibaba PuHuiTi R",
        fontColor = "#fff";
    // let xLabel = ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'];
    // let dataValue = [20, 30, 40, 35, 34, 15, 56, 15, 12, 25, 34, 42];
    const tooltip = {
        show: true,
        trigger: "axis",
        axisPointer: {
            type: "shadow",
        },
        backgroundColor: "rgba(75, 79, 82, 0.80)", //设置背景颜色
        textStyle: {
            color: fontColor,
            fontFamily: fontFamily,
        },
        borderColor: "rgba(255,255,255, .5)",
    };
    let option = {
        backgroundColor: "transparent",
        tooltip,
        legend: {
            show: false,
        },
        grid: {
            top: "25%",
            left: "5%",
            right: "5%",
            bottom: "15%",
        },
        xAxis: [
            {
                type: "category",
                boundaryGap: true,
                axisLine: {
                    //坐标轴轴线相关设置。数学上的x轴
                    show: true,
                    lineStyle: {
                        color: "#5A6E71",
                    },
                },
                axisLabel: {
                    //坐标轴刻度标签的相关设置
                    textStyle: {
                        color: fontColor,
                        fontSize: fontSize,
                        fontFamily: fontFamily,
                    },
                },
                splitLine: {
                    show: false,
                    lineStyle: {
                        color: "#233653",
                    },
                },
                axisTick: {
                    show: false,
                },
                data: xLabel,
            },
        ],
        yAxis: [
            {
                name: "",
                nameTextStyle: {
                    color: fontColor,
                    fontSize: fontSize,
                    padding: [0, 60, 0, 0],
                    fontFamily: fontFamily,
                },
                // minInterval: 1,
                type: "value",
                splitLine: {
                    show: true,
                    lineStyle: {
                        color: "#25393B",
                        type: "dashed",
                    },
                },
                axisLine: {
                    show: false,
                    lineStyle: {
                        color: "#008de7",
                    },
                },
                axisLabel: {
                    show: true,
                    textStyle: {
                        color: fontColor,
                        fontSize: fontSize,
                        fontFamily: fontFamily,
                    },
                },
                axisTick: {
                    show: false,
                },
            },
        ],
        series: [
            {
                name: "采集值",
                type: "line",
                symbol: "circle", // 默认是空心圆（中间是白色的），改成实心圆
                smooth: true,
                lineStyle: {
                    normal: {
                        width: 3,
                        // color: '#1ED6FF', // 线条颜色
                        color: new echarts.graphic.LinearGradient(
                            0,
                            0,
                            0,
                            1,
                            [
                                {
                                    offset: 0,
                                    color: "#0DF0FD",
                                },
                                {
                                    offset: 0.6,
                                    color: "#00F1D4",
                                },
                                {
                                    offset: 1,
                                    color: "#0EEEFC",
                                },
                            ],
                            false
                        ),
                    },
                },
                itemStyle: {
                    normal: {
                        color: "#1ED6FF", //拐点颜色
                        // borderColor: '#fff600',//拐点边框颜色
                        // borderWidth: 13//拐点边框大小
                        label: {
                            show: true, //开启显示
                            color: fontColor,
                            fontFamily: fontFamily,
                            position: "top", //在上方显示
                            formatter: function (res) {
                                if (res.value) {
                                    return res.value;
                                } else {
                                    return 0;
                                }
                            },
                        },
                    },
                },
                symbolSize: 8, //设定实心点的大小
                areaStyle: {
                    normal: {
                        //线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。
                        color: new echarts.graphic.LinearGradient(
                            0,
                            0,
                            0,
                            1,
                            [
                                {
                                    offset: 0,
                                    color: "#01DDE9",
                                },
                                {
                                    offset: 0.6,
                                    color: "#086A79",
                                },
                                {
                                    offset: 1,
                                    color: "#0D3134",
                                },
                            ],
                            false
                        ),
                    },
                },
                data: dataValue,
            },
        ],
    };
    myChart.setOption(option, true);
    window.addEventListener("resize", function () {
        myChart.resize();
    });
}