Blame view

web/WebMvc/wwwroot/productjs/configure/ProjectOverview.js 13.8 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
        projectName = "",
18
        intervalTime = null,
19
        vueApp=null,
20
21
22
23
24
25
26
27
        app = null;

    action = {

    }

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

            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: "开始时间" },
56
57
58
59
60
61
62
63
64
                { 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 + "秒";
                    }
                },
赖素文 authored
65
            ]],
66
67
            tableIns: null,
            tableElem: "mainList",
68
            refreshDataTimeEle: document.getElementById('refreshDataTime'),
69
70
71
            echartOpt: {
                eqTuoShanRateEle: document.getElementById("eqTuoShanRate"),
                eqAlarmsNumberEle: document.getElementById("eqAlarmsNumber"),
72
                eqPowerOnTimeEle: document.getElementById("eqPowerOnTime"),
73
                tuoShanRatelegendData: "".GetTimeRange("","",6)
74
            }
75
76
        },
        methods: {
77
            //设备在线状况 表格
78
79
            initTable: function (opt) {
                var config = { projectKeys: projectKeys }
王硕 authored
80
81
82
83
                if (opt != undefined) $.extend(config, opt);
                let options = {
                    elem: "#" + app.data.tableElem,
84
                    url: `/configure/BaseProject/GetEqInfoByProjectKeys`,
85
86
87
88
89
90
91
92
                    cols: app.data.cols,
                    height: 'full-400', // 最大高度减去其他容器已占有的高度差
                    where: config,
                    page: false
                }
                app.data.tableIns = sysU.initTable(options);
            },
93
            //每台设备妥善率 曲线图
王硕 authored
94
            initEchartsTuoShanRate: function (failureTime) {
王硕 authored
95
96
                let legendDataTemp = failureTime.uniqueFunc("equipmentName")
                let legendData = []
97
王硕 authored
98
99
                window.eqTuoShanRateOpt.xAxis[0].data = app.data.echartOpt.tuoShanRatelegendData
                window.eqTuoShanRateOpt.series = [];
王硕 authored
100
101
102
                for (let i = 0; i < legendDataTemp.length; i++) {
                    legendData.push(legendDataTemp[i].equipmentName)
王硕 authored
103
                    var seriesItem = {
王硕 authored
104
                        name: legendDataTemp[i].equipmentName,
王硕 authored
105
106
107
108
109
                        type: 'line',
                        data: []
                    };
                    for (let j = 0; j < app.data.echartOpt.tuoShanRatelegendData.length; j++) {
                        const timeVal = app.data.echartOpt.tuoShanRatelegendData[j];
110
111
112
                        const result = failureTime.GetArrValueRows({ key: 'Date', val: timeVal }, {
                            key: 'equipmentName', val: seriesItem.name
                        });
113
王硕 authored
114
                        let data = 0;
115
116
117
118
                        if (result.length == 1) {
                            data = (1 - (result[0].sumTime / 86400)) * 100
                        } else {
                            //console.log(`ProjectOverview 文件 GetArrValueRows 读取到:${result.length}条数据`)
王硕 authored
119
120
121
122
123
                        }
                        seriesItem.data.push(data.toFixed(2));
                    }
                    window.eqTuoShanRateOpt.series.push(seriesItem)
                }
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
                //新增默认 目标值
                legendData.push("目标值")
                window.eqTuoShanRateOpt.series.push({
                    name: "目标值",
                    symbolSize: 10, //小圆点的大小
                    color: 'red',
                    type: 'line',
                    data: ["99", "99", "99", "99", "99", "99", "99", "99"],
                    lineStyle: {
                        normal: {
                            width: 3,
                            type: 'dashed',
                        },
                    },
                    itemStyle: {
                        normal: {
                            lineStyle: {
                                width: 4, //线条宽度
                            },
                        },
                    },
                });
王硕 authored
146
                window.eqTuoShanRateOpt.legend.data = legendData
王硕 authored
147
                let myChart = echarts.init(app.data.echartOpt.eqTuoShanRateEle)
148
149
150
151
152
                myChart.clear()
                myChart.setOption(window.eqTuoShanRateOpt)
            },
153
154
155
156
157
158
159
160
161
162
            //设备开机时间
            initEchartsPowerOnTime: function (failureTime) {
                var opt = "".copyObj2(window.eqPowerOnTimeOpt)
                let myChart = echarts.init(app.data.echartOpt.eqPowerOnTimeEle)

                myChart.clear()
                myChart.setOption(opt)
            },

            //故障次数 柱状图
163
            initEchartsAlarmsNumber: function (failureCount) {             
王硕 authored
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
                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;
189
190
191
192
                let myChart = echarts.init(app.data.echartOpt.eqAlarmsNumberEle)
                myChart.clear()
                myChart.setOption(window.eqAlarmsNumber)
            },
193
194
            //设备故障超40分钟
赖素文 authored
195
196
197
198
199
200
201
202
203
204
205
            initTableFailure40: function (failureOverFourty) {
                let options = {
                    elem: "#mainAlarms" ,
                    cols: app.data.colsFailure,
                    data: failureOverFourty,
                    height: 'full-400', // 最大高度减去其他容器已占有的高度差
                    page: false
                }
                app.data.tableIns = sysU.initTable(options);
            },
206
            refreshDataMethod: function () {
207
208
                let currenttime = parseInt(app.data.refreshDataTimeEle.innerHTML);
                if (currenttime === 0) {
209
                    currenttime = vueApp.refreshDataTime;
210
211
212
213
214
215
216
217
                    app.methods.getEquipmentDataList();
                    app.methods.getEqEchartsDataList();
                } else {
                    currenttime--;
                }
                app.data.refreshDataTimeEle.innerHTML = currenttime;
            },
赖素文 authored
218
219
220
221
222
223
224
            /**
              * 初始化vue
              */
            initVue: function () {
                vueApp = new Vue({
                    el: '.vueApp',
                    data: {
225
                        refreshDataTime:40,
赖素文 authored
226
227
                        head: {
                            projectName: 0
228
229
230
                        },
                        body: {
                            eqCount: 0,
231
                            eqRunCount: 0,
232
                            eqStandBy: 0,
HuXiYu authored
233
                            eqOffline: 0,
234
235
                            eqError:0,
HuXiYu authored
236
                            eqOnlineRate:0,
237
                        },
赖素文 authored
238
239
240
241
                    },
                    methods: {

                    },
242
                    ready: function () {
HuXiYu authored
243
                        this.head.projectName = `${projectName}`;
244
                    }
赖素文 authored
245
246
247
                });
            },
            /**
248
              * vue 集合赋值 result.Result.eqCount
赖素文 authored
249
              */
250
            initVueDataValue: function (result) {
251
252
                var res = result.Result;
                vueApp.body.eqCount = res.eqSumCount;
253
                vueApp.body.eqRunCount = res.eqRunCount;
HuXiYu authored
254
                vueApp.body.eqStandBy = res.eqStandByCount;
255
256
257
                vueApp.body.eqError = res.eqErrorCount;
                vueApp.body.eqOffline = res.eqOffLineCount;
HuXiYu authored
258
                vueApp.body.eqOnlineRate = res.runningRate;
259
260
261
            },

            getUrlParam: function () {
262
263
                projectKeys = localStorage.getItem("projectMapKeys");
                projectName = localStorage.getItem("projectMapName");
264
            },
265
266
267
268
269
270
271
272
273
274
275
276

            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
277
            //妥善率/故障次数/设备故 障统一数据请求接口
王硕 authored
278
279
280
281
282
283
284
            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
285
                        app.methods.initEchartsAlarmsNumber(result.Result.failureCount);
赖素文 authored
286
                        app.methods.initTableFailure40(result.Result.failureOverFourty);
287
288
                        //设备开机时间
                        app.methods.initEchartsPowerOnTime();                        
王硕 authored
289
290
291
292
                    }
                };
                sysU.ajax(ajaxConfig);
            },
王硕 authored
293
294
295
296
            init: function () {
                var tempElem = $(".sys-a-det");
                tempElem.attr("href", tempElem.data("scr") + `?projectKeys=${projectKeys}`)
297
298

                app.methods.getEquipmentDataList();
王硕 authored
299
                app.methods.getEqEchartsDataList();
300
                intervalTime=setInterval(app.methods.refreshDataMethod, 1000);
301
            }
302
303
        },
        registerEvent: function () {
304
305
306
            $(".sys-a-det").click(function () {
                if (intervalTime != null) clearInterval(intervalTime)
            })
307
        },
王硕 authored
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
        clickEvent: function () {
            $('#clickToClickSuccessRate').click(function () {

                sysU.openPage({
                    title: "妥善率",
                    area: ["900px", "600px"],
                    type:1,
                    btn: ['关闭'],
                    content: $('#tuoshanlv')
                });
            });
            $('#clickToClickMTTR').click(function () {

                sysU.openPage({
                    title: "MTTR",
                    area: ["900px", "600px"],
                    type: 1,
                    btn: ['关闭'],
                    content: $('#eleMTTR')
                });
            });
            $('#clickToClickMTBF').click(function () {

                sysU.openPage({
                    title: "MTBF",
                    area: ["900px", "600px"],
                    type:1,
                    btn: ['关闭'],
                    content: $('#eleMTBF')
                });
            });  
        },
340
341
        init: function () {
            app.methods.getUrlParam();
赖素文 authored
342
            app.methods.initVue();
343
            app.methods.initTable();
王硕 authored
344
345
            app.methods.init();  
            app.clickEvent();
346
347
348
349
        }
    };
    app.init();
});