ProjectOverview.js 11.1 KB
let action = null;
layui.config({
    base: "/js/",
    version: 1
}).use(['system',"vue"], function () {
    var form = layui.form,
        $ = layui.jquery,
        element = layui.element,
        table = layui.table,
        system = layui.system,
        sysU = new system.u(),
        sendDataWhere = null,
        sendDataDescWhere = null,
        areaName = "configure",
        controllerName = "BaseProject",
        projectKeys = null,
        projectName = "",
        vueApp=null,
        app = null;

    action = {

    }

    app = {
        data: {
            cols: [[
                { field: "zizeng", width: 80, title: "序号", fixed: "left", type: "numbers" },
                {
                    field: "equipmentName", width: 220, title: "设备"
                },
                {
                    field: "Status", width: 150, title: "ip地址(5min无数据)", templet: function (d) {
                        //if (d.Status == "" || d.Status == null) return "";
                        var bg = "layui-badge-dot layui-bg-green",
                            statusText = "在线";
                        if (d.Status == "Failure") {
                            statusText = "故障";
                            bg = "layui-badge-dot layui-bg-red";
                        }
                        if (d.seconds > 300 || d.seconds==-1) {
                            statusText = "离线";
                            bg = "layui-badge-dot layui-bg-gray";
                        }
                        return `<span class="${bg}" style=" left: 7px;"></span> <span style="padding-left: 8px;">${statusText}</span`;
                    }
                }
            ]],

            colsFailure: [[
                { field: "zizeng", width: 80, title: "序号", fixed: "left", type: "numbers" },
                { field: "equipmentName", width: 220, title: "设备" },
                { field: "alarmMessage", width: 300, title: "报警信息" },
                { field: "createTime", width: 150, title: "开始时间" },
                { field: "updateTime", width: 150, title: "结束时间" },
                {
                    field: "errorduration", width: 200, title: "故障时间(分)", templet: function (d) {
                        var minutes = Math.floor(d.errorduration / 60); // 获取整数分钟
                        var remainingSeconds = d.errorduration % 60; // 获取剩余的秒数
                        return minutes + "分钟" + remainingSeconds + "秒";
                    }
                },
                
            ]],
            tableIns: null,
            tableElem: "mainList",
            refreshDataTimeEle: document.getElementById('refreshDataTime'),
            echartOpt: {
                eqTuoShanRateEle: document.getElementById("eqTuoShanRate"),
                eqAlarmsNumberEle: document.getElementById("eqAlarmsNumber"),
                tuoShanRatelegendData: "".GetTimeRange("","",7)
            }
        },
        methods: {
            initTable: function (opt) {
                var config = { projectKeys: projectKeys }
              
                if (opt != undefined) $.extend(config, opt);
                let options = {
                    elem: "#" + app.data.tableElem,
                    url: `/configure/BaseProject/GetEqInfoByProjectKeys`,
                    cols: app.data.cols,
                    height: 'full-400', // 最大高度减去其他容器已占有的高度差
                    where: config,
                    page: false
                }
                app.data.tableIns = sysU.initTable(options);
            },

            //每台设备妥善率
            initEchartsTuoShanRate: function (failureTime) {
                let legendDataTemp = failureTime.uniqueFunc("equipmentName")
                let legendData = []
              
                window.eqTuoShanRateOpt.xAxis[0].data = app.data.echartOpt.tuoShanRatelegendData
                window.eqTuoShanRateOpt.series = [];
                for (let i = 0; i < legendDataTemp.length; i++) {
                    legendData.push(legendDataTemp[i].equipmentName)

                    var seriesItem = {
                        name: legendDataTemp[i].equipmentName,
                        type: 'line',
                        data: []
                    };
                    for (let j = 0; j < app.data.echartOpt.tuoShanRatelegendData.length; j++) {
                        const timeVal = app.data.echartOpt.tuoShanRatelegendData[j];
                        const result = failureTime.GetArrValueRows({ key: 'Date', val: timeVal }, {
                            key: 'equipmentName', val: seriesItem.name
                        });
                        
                        let data = 0;
                        if (result.length == 1) {
                            data = (1 - (result[0].sumTime / 86400)) * 100
                        } else {
                            //console.log(`ProjectOverview 文件 GetArrValueRows 读取到:${result.length}条数据`)
                        }
                        seriesItem.data.push(data.toFixed(2));
                    }
                    window.eqTuoShanRateOpt.series.push(seriesItem)
                }
                window.eqTuoShanRateOpt.legend.data = legendData
                let myChart = echarts.init(app.data.echartOpt.eqTuoShanRateEle)
                myChart.clear()
                myChart.setOption(window.eqTuoShanRateOpt)
            },

            initEchartsAlarmsNumber: function (failureCount) {             
                var xaxisdata = [];
                var faultFrequency = []
                let totalCount = 0;

                // 计算所有 x.count 的总和 
                failureCount.forEach(x => {
                    totalCount += x.count;
                });
                const relativeCount = []
                failureCount.forEach(x => {
                    let totalCountNum = (x.count / totalCount) * 100
                    relativeCount.push(totalCountNum.toFixed(2))
                    xaxisdata.push(x.equipmentName)
                    faultFrequency.push(x.count)
                })
                if (failureCount.length <= 15) {
                    window.eqAlarmsNumber.dataZoom[0].end = 99
                } else {
                    window.eqAlarmsNumber.dataZoom[0].end = 20
                }
                window.eqAlarmsNumber.xAxis[0].data =[]
                window.eqAlarmsNumber.xAxis[0].data = xaxisdata;
                window.eqAlarmsNumber.series[0].data = faultFrequency;
                window.eqAlarmsNumber.series[1].data = relativeCount;

                let myChart = echarts.init(app.data.echartOpt.eqAlarmsNumberEle)
                myChart.clear()
                myChart.setOption(window.eqAlarmsNumber)
            },

            initTableFailure40: function (failureOverFourty) {
                let options = {
                    elem: "#mainAlarms" ,
                    cols: app.data.colsFailure,
                    data: failureOverFourty,
                    height: 'full-400', // 最大高度减去其他容器已占有的高度差
                    page: false
                }
                app.data.tableIns = sysU.initTable(options);
            },

            refreshDataMethod: function () {              
                let currenttime = parseInt(app.data.refreshDataTimeEle.innerHTML);
                if (currenttime === 0) {
                    currenttime = 20;
                    app.methods.getEquipmentDataList();
                    app.methods.getEqEchartsDataList();
                } else {
                    currenttime--;
                }
                app.data.refreshDataTimeEle.innerHTML = currenttime;
            },

            /**
              * 初始化vue
              */
            initVue: function () {
                vueApp = new Vue({
                    el: '.vueApp',
                    data: {
                        head: {
                            projectName: 0
                        },
                        body: {
                            eqCount: 0,
                            eqOnline: 0,
                            eqStandBy: 0,
                            eqOffline: 0,
                            eqError:0,

                            eqOnlineRate:0,
                        },
                    },
                    methods: {

                    },
                    ready: function () {
                        this.head.projectName = `${projectName}`;
                    }
                });
            },
            /**
              * vue 集合赋值 result.Result.eqCount
              */
            initVueDataValue: function (result) {
                var res = result.Result;
                vueApp.body.eqCount = res.eqSumCount;
                vueApp.body.eqOnline = res.eqOnLineCount;
                vueApp.body.eqStandBy = res.eqStandByCount;
                vueApp.body.eqError = res.eqErrorCount;
                vueApp.body.eqOffline = res.eqOffLineCount;

                vueApp.body.eqOnlineRate = res.runningRate;
            },

            getUrlParam: function () {
                projectKeys = localStorage.getItem("projectMapKeys");
                projectName = localStorage.getItem("projectMapName");
            },

            getEquipmentDataList() {
                var ajaxConfig = {
                    data: { pageRequest: null, entity: { flag: "projectMapList", keys: projectKeys } },
                    url: `/configure/BaseProject/LoadProjectOverview`,
                    success: function (result) {
                        if (sysU.successBefore(result)) return false;
                        app.methods.initVueDataValue(result);
                    }
                };
                sysU.ajax(ajaxConfig);
            },
            //妥善率/故障次数/设备故 障统一数据请求接口
            getEqEchartsDataList() {
                var ajaxConfig = {
                    data: { projectKeys: projectKeys },
                    url: `/configure/BaseProject/GetFailureList`,
                    success: function (result) {
                        if (sysU.successBefore(result)) return false;
                        app.methods.initEchartsTuoShanRate(result.Result.failureTime);
                        app.methods.initEchartsAlarmsNumber(result.Result.failureCount);
                        app.methods.initTableFailure40(result.Result.failureOverFourty);
                    }
                };
                sysU.ajax(ajaxConfig);
            },
            init: function () {
                var tempElem = $(".sys-a-det");
                tempElem.attr("href", tempElem.data("scr") + `?projectKeys=${projectKeys}`)

                app.methods.getEquipmentDataList();
                app.methods.getEqEchartsDataList();
                setInterval(app.methods.refreshDataMethod, 1000);
            }
        },
        registerEvent: function () {

        },
        init: function () {
            app.methods.getUrlParam();
            app.methods.initVue();
            app.methods.initTable();
            app.methods.init();            
        }
    };
    app.init();
});