Blame view

web/WebMvc/wwwroot/productjs/configure/ProjectOverview.js 11.1 KB
1
2
3
4
let action = null;
layui.config({
    base: "/js/",
    version: 1
5
}).use(['system',"vue"], function () {
6
7
8
9
10
11
12
13
14
15
16
    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,
17
18
        projectName = "",
        vueApp=null,
19
20
21
22
23
24
25
26
        app = null;

    action = {

    }

    app = {
        data: {
27
28
29
30
31
32
            cols: [[
                { field: "zizeng", width: 80, title: "序号", fixed: "left", type: "numbers" },
                {
                    field: "equipmentName", width: 220, title: "设备"
                },
                {
33
                    field: "Status", width: 150, title: "ip地址(5min无数据)", templet: function (d) {
34
                        //if (d.Status == "" || d.Status == null) return "";
35
36
37
38
39
40
                        var bg = "layui-badge-dot layui-bg-green",
                            statusText = "在线";
                        if (d.Status == "Failure") {
                            statusText = "故障";
                            bg = "layui-badge-dot layui-bg-red";
                        }
41
                        if (d.seconds > 300 || d.seconds==-1) {
42
43
44
45
46
47
48
                            statusText = "离线";
                            bg = "layui-badge-dot layui-bg-gray";
                        }
                        return `<span class="${bg}" style=" left: 7px;"></span> <span style="padding-left: 8px;">${statusText}</span`;
                    }
                }
            ]],
49
50
51
52
53
54

            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: "开始时间" },
55
56
57
58
59
60
61
62
63
                { 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 + "秒";
                    }
                },
64
            ]],
65
66
            tableIns: null,
            tableElem: "mainList",
67
            refreshDataTimeEle: document.getElementById('refreshDataTime'),
68
69
70
71
72
            echartOpt: {
                eqTuoShanRateEle: document.getElementById("eqTuoShanRate"),
                eqAlarmsNumberEle: document.getElementById("eqAlarmsNumber"),
                tuoShanRatelegendData: "".GetTimeRange("","",7)
            }
73
74
        },
        methods: {
75
76
            initTable: function (opt) {
                var config = { projectKeys: projectKeys }
王硕 authored
77
78
79
80
                if (opt != undefined) $.extend(config, opt);
                let options = {
                    elem: "#" + app.data.tableElem,
81
                    url: `/configure/BaseProject/GetEqInfoByProjectKeys`,
82
83
84
85
86
87
88
89
                    cols: app.data.cols,
                    height: 'full-400', // 最大高度减去其他容器已占有的高度差
                    where: config,
                    page: false
                }
                app.data.tableIns = sysU.initTable(options);
            },
王硕 authored
90
91
            //每台设备妥善率
            initEchartsTuoShanRate: function (failureTime) {
王硕 authored
92
93
94
                let legendDataTemp = failureTime.uniqueFunc("equipmentName")
                let legendData = []
王硕 authored
95
96
                window.eqTuoShanRateOpt.xAxis[0].data = app.data.echartOpt.tuoShanRatelegendData
                window.eqTuoShanRateOpt.series = [];
王硕 authored
97
98
99
                for (let i = 0; i < legendDataTemp.length; i++) {
                    legendData.push(legendDataTemp[i].equipmentName)
王硕 authored
100
                    var seriesItem = {
王硕 authored
101
                        name: legendDataTemp[i].equipmentName,
王硕 authored
102
103
104
105
106
                        type: 'line',
                        data: []
                    };
                    for (let j = 0; j < app.data.echartOpt.tuoShanRatelegendData.length; j++) {
                        const timeVal = app.data.echartOpt.tuoShanRatelegendData[j];
107
108
109
110
                        const result = failureTime.GetArrValueRows({ key: 'Date', val: timeVal }, {
                            key: 'equipmentName', val: seriesItem.name
                        });
王硕 authored
111
                        let data = 0;
112
113
114
115
                        if (result.length == 1) {
                            data = (1 - (result[0].sumTime / 86400)) * 100
                        } else {
                            //console.log(`ProjectOverview 文件 GetArrValueRows 读取到:${result.length}条数据`)
王硕 authored
116
117
118
119
120
                        }
                        seriesItem.data.push(data.toFixed(2));
                    }
                    window.eqTuoShanRateOpt.series.push(seriesItem)
                }
王硕 authored
121
                window.eqTuoShanRateOpt.legend.data = legendData
王硕 authored
122
                let myChart = echarts.init(app.data.echartOpt.eqTuoShanRateEle)
123
124
125
126
                myChart.clear()
                myChart.setOption(window.eqTuoShanRateOpt)
            },
127
            initEchartsAlarmsNumber: function (failureCount) {             
王硕 authored
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
                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;
153
154
155
156
                let myChart = echarts.init(app.data.echartOpt.eqAlarmsNumberEle)
                myChart.clear()
                myChart.setOption(window.eqAlarmsNumber)
            },
157
158
159
160
161
162
163
164
165
166
167
168
            initTableFailure40: function (failureOverFourty) {
                let options = {
                    elem: "#mainAlarms" ,
                    cols: app.data.colsFailure,
                    data: failureOverFourty,
                    height: 'full-400', // 最大高度减去其他容器已占有的高度差
                    page: false
                }
                app.data.tableIns = sysU.initTable(options);
            },
169
170
171
172
173
174
175
176
177
178
179
180
            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;
            },
赖素文 authored
181
182
183
184
185
186
187
188
189
            /**
              * 初始化vue
              */
            initVue: function () {
                vueApp = new Vue({
                    el: '.vueApp',
                    data: {
                        head: {
                            projectName: 0
190
191
192
193
194
                        },
                        body: {
                            eqCount: 0,
                            eqOnline: 0,
                            eqStandBy: 0,
HuXiYu authored
195
                            eqOffline: 0,
196
197
                            eqError:0,
HuXiYu authored
198
                            eqOnlineRate:0,
199
                        },
赖素文 authored
200
201
202
203
                    },
                    methods: {

                    },
204
                    ready: function () {
HuXiYu authored
205
                        this.head.projectName = `${projectName}`;
206
                    }
赖素文 authored
207
208
209
                });
            },
            /**
210
              * vue 集合赋值 result.Result.eqCount
赖素文 authored
211
              */
212
            initVueDataValue: function (result) {
213
214
                var res = result.Result;
                vueApp.body.eqCount = res.eqSumCount;
HuXiYu authored
215
216
                vueApp.body.eqOnline = res.eqOnLineCount;
                vueApp.body.eqStandBy = res.eqStandByCount;
217
218
219
                vueApp.body.eqError = res.eqErrorCount;
                vueApp.body.eqOffline = res.eqOffLineCount;
HuXiYu authored
220
                vueApp.body.eqOnlineRate = res.runningRate;
221
222
223
            },

            getUrlParam: function () {
224
225
                projectKeys = localStorage.getItem("projectMapKeys");
                projectName = localStorage.getItem("projectMapName");
226
            },
227
228
229
230
231
232
233
234
235
236
237
238

            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);
            },
王硕 authored
239
            //妥善率/故障次数/设备故 障统一数据请求接口
王硕 authored
240
241
242
243
244
245
246
            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);
王硕 authored
247
                        app.methods.initEchartsAlarmsNumber(result.Result.failureCount);
248
                        app.methods.initTableFailure40(result.Result.failureOverFourty);
王硕 authored
249
250
251
252
                    }
                };
                sysU.ajax(ajaxConfig);
            },
253
254
255
            init: function () {
                var tempElem = $(".sys-a-det");
                tempElem.attr("href", tempElem.data("scr") + `?projectKeys=${projectKeys}`)
256
257

                app.methods.getEquipmentDataList();
王硕 authored
258
                app.methods.getEqEchartsDataList();
259
                setInterval(app.methods.refreshDataMethod, 1000);
260
            }
261
262
        },
        registerEvent: function () {
263
264
265
266
        },
        init: function () {
            app.methods.getUrlParam();
赖素文 authored
267
            app.methods.initVue();
268
            app.methods.initTable();
269
            app.methods.init();            
270
271
272
273
        }
    };
    app.init();
});