Merge branch 'master-mj-yuanjinpeng' into 'master-mj'

fix:数据库恢复验证概况优化



See merge request !1153

+/** 应急演练 */
+layui.define(['table', 'form', 'sessions', 'admin', 'common', 'echarts', 'laydate', 'element'], function (exports) {
+    var $ = layui.$;
+    var form = layui.form;
+    var table = layui.table;
+    var admin = layui.admin;
+    var common = layui.common;
+    var laydate = layui.laydate;
+
+    exports('prediction', function () {
+        var sessions = layui.sessions;
+        var accessToken = localStorage.getItem("accessToken");
+        var domainName = common.domainName;
+
+        form.render();
+        renderpredictionListTable();
+
+        // 回车搜索
+        $('[lay-filter="form-prediction-condition"] input').keydown(function (e) {
+            if (e.keyCode === 13) {
+                reloadAllChange();
+            }
+        });
+        // 加载设备出入表格
+        function renderpredictionListTable() {
+            var conditions = form.val('form-prediction-condition');
+            Object.assign(conditions, {
+                access_token: accessToken,
+                keyword: $("#keyword").val(),
+                viewMode: 'true'
+            });
+            table.render({
+                elem: '#prediction-table',
+                url: domainName + '/api-web/prediction/list',
+                where: conditions,
+                height: 'full-360',
+                page: {
+                    layout: ['count', 'prev', 'page', 'next', 'limit', 'skip'],
+                    theme: '#1E9FFF'
+                },
+                end: function (e) {
+                    form.render()
+                },
+                limit: common.limit,
+                limits: common.limits,
+                even: true,
+                cols: [[
+                    {
+                        type: 'numbers', title: '序号'
+                    }, {
+                        field: 'resName', title: '预测资源', align: 'center',
+                    }, {
+                        field: 'kpiName', title: '预测指标', align: 'center',
+                    }, {
+                        field: 'flag', title: '标识flag', align: 'center'
+                    },
+                    {
+                        title: '预测效果', align: 'center',
+                        templet: '<div><span data-resid="{{d.resId}}" data-kpiid="{{d.kpiId}}" data-flag="{{d.flag}}" data-kpiname="{{d.kpiName}}" data-predictnum="{{d.predictNum}}" class="layui-table-link view-prediction-detail">查看</span></div>'
+                    }
+                ]],
+                done: function () {
+                    //获取预测效果展示
+                    $('.view-prediction-detail').on('click', function () {
+                        var resId = $(this).data('resid');
+                        var kpiId = $(this).data('kpiid');
+                        var flag = $(this).data('flag');
+                        var kpiName =$(this).data('kpiname');
+                        var predictNum = $(this).data('predictnum');
+                        openpredictionDetail(resId, kpiId,flag,kpiName,predictNum)
+                    })
+
+                }
+            });
+        }
+
+        //查看预测效果信息
+        function openpredictionDetail(resId, kpiId,flag,kpiName,predictNum) {
+            var title = "预测效果";
+            common.openWin('prediction/detail', title, {resId: resId, kpiId: kpiId,flag:flag,kpiName:kpiName,predictNum:predictNum}, ['确定', '取消'])
+        }
+
+        // 图表，表格重新加载
+        function reloadAllChange() {
+            renderpredictionListTable();
+        }
+    });
+});

+//性能曲线图
+layui.define(['element', 'admin', 'form', 'echarts', 'commonDetail'], function (exports) {
+    var $ = layui.$;
+    var echarts = layui.echarts;
+    var admin = layui.admin;
+    var common = layui.common;
+    var commonDetail = layui.commonDetail;
+    //对外暴露的接口
+    exports('predictionDetail', function (data) {
+        var resId = ''; //资源ID
+        var kpiId = ''; //指标ID
+        var flag = '';//二级资源标识
+        var kpiName = '';
+        var predictNum = 24;
+        resId = data.resId; //资源ID
+        kpiId = data.kpiId; //指标ID
+        flag = data.flag;//二级资源标识
+        kpiName = data.kpiName;//指标名称
+        predictNum = data.predictNum;//预测值数量
+        //性能走势
+        var zshiLoadIndex = null;
+        var bizyshixiaoChart = null;
+
+        renderLineChart();
+
+        //性能曲线图
+        function renderLineChart() {
+            zshiLoadIndex = layer.load(2);//加载loading
+            var url = common.domainName + '/api-web/prediction/line/chart?&resId=' + resId + '&kpiId=' + kpiId + '&flag=' + flag;
+            //获取性能曲线图数据
+            admin.req({
+                url: url
+            }).done(function (res) {
+                layer.close(zshiLoadIndex);
+                //var kpiUnit = res.data.kpiUnit == null ? "" : res.data.kpiUnit;
+                var data = [];
+                if (res.object == null || res.object.timeList.length == 0) {
+                    data = {
+                        timeList: ['00:00', '01:00', '02:00', '03:00', '04:00', '05:00', '06:00', '07:00', '08:00', '09:00', '10:00', '11:00', '12:00', '13:00', '14:00', '15:00', '16:00', '17:00', '18:00', '19:00', '20:00', '21:00', '22:00', '23:00'],
+                        predictionList: [
+                            0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0
+                        ],
+                        performanceList: [
+                            0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0
+                        ],
+                    }
+                } else {
+                    data = res.object;
+                }
+
+                (function () {
+                    var series = [];
+
+                    series.push({
+                        name: kpiName,
+                        type: 'line',
+                        data: data.performanceList,
+                        symbolSize: "none",
+                        symbol: 'circle',
+                        markLine: {
+                            silent: true,
+                            symbol: ["none","none"],
+                            lineStyle:{
+                                color: "#ccc"
+                            },
+                            animation: false,
+                            label:{
+                                show:false
+                            },
+                            data:[
+                                {
+                                 xAxis: data.timeList.length-predictNum
+                                },
+                            ]
+                        }
+                    })
+
+                    var option = {
+                        tooltip: {
+                            trigger: 'axis',
+                            backgroundColor: 'rgba(50,50,50,0.7)',
+                            borderColor: "#333",
+                            formatter: function (params) {
+                                let str = '<div>' + params[0].name + '</div>';
+                                let unit = '';
+                                for (let i = 0; i < params.length; i++) {
+                                    let dataVal = 0;
+                                    if (params[i].data && params[i].data != undefined && params[i].data != 'undefined') {
+                                        dataVal = params[i].data.toFixed(2);
+                                    }
+                                    str += "<div style='display:flex;justify-content: space-between'><span>" + params[i].marker  + params[i].seriesName +  "</span><span style='margin-left:10px;'>" + dataVal + unit + "</span></div>"
+                                }
+                                return str
+                            },
+                            textStyle: {
+                                color: "#fff",
+                                align: 'left'
+                            }
+
+                        },
+                        legend: {
+                            show: true
+                        },
+                        grid: {
+                            top: '10%',
+                            left: '3%',
+                            right: '4%',
+                            bottom: '3%',
+                            containLabel: true
+                        },
+                        toolbox: {
+                            feature: {
+                                saveAsImage: {
+                                    show: false
+                                }
+                            }
+                        },
+                        xAxis: {
+                            type: 'category',
+                            data: data.timeList,
+                            axisLine: {
+                                lineStyle: {
+                                    color: '#c9c9c9'
+                                }
+                            },
+                            axisLabel: {
+                                color: '#232425',
+                                showMaxLabel: true,
+                                fontSize: 12,
+                                formatter: function (params) {
+                                    let val = params
+                                    if(params.indexOf(' ' != -1)){
+                                        //console.log(params.split(' ')[0].substr(5,5));
+                                        return params.split(' ')[0].substr(5,5) +" "+params.split(' ')[1].substr(0,5);
+                                    }
+                                    return val;
+                                }
+                            },
+                            splitArea: {
+                                show: true,
+                                areaStyle: {
+                                    color: ['rgba(200,200,200,0.1)', 'transparent'
+                                    ]
+                                }
+                            }
+                        },
+                        yAxis: {
+                            type: 'value',
+                            axisLine: {
+                                lineStyle: {
+                                    color: '#232425'
+                                },
+                                show: false
+                            },
+                            axisTick: {
+                                show: false
+                            },
+                            splitLine: {
+                                lineStyle: {
+                                    color: ['#ccc']
+                                }
+                            }
+                        },
+                        visualMap: {
+                            type: "piecewise",
+                            show: false,
+                            dimension: 0,
+                            seriesIndex: 0,
+                            pieces: [
+                                {
+                                    gt: 0,
+                                    lt: data.timeList.length-predictNum,
+                                    color: "rgba(41,11,236,0.68)",//大于0小于12为蓝色
+                                },
+                                {
+                                    gt: data.timeList.length-predictNum,
+                                    color: "rgba(229,27,88,0.68)",//大于12区间为红色
+                                },
+                            ],
+                        },
+                        series: series
+                    };
+                    // 使用刚指定的配置项和数据显示图表
+                    if (bizyshixiaoChart === null) {
+                        bizyshixiaoChart = echarts.init(document.getElementById('predictionKpiLineChart'));
+                    } else {
+                        bizyshixiaoChart.clear();
+                    }
+
+                    bizyshixiaoChart.setOption(option);
+
+                    //性能曲线图的点击事件
+                    bizyshixiaoChart.off("click");
+
+                })();
+            }).error(function () {
+                layer.close(zshiLoadIndex);
+
+            });
+        }
+
+
+    });
+});

@@ -63,7 +63,7 @@ layui.define(['table', 'form', 'sessions', 'admin', 'common', 'echarts', 'laydat
         function renderrecoverycountListTable() {
         function renderrecoverycountListTable() {
             var conditions = form.val('form-recoverycount-condition');
             var conditions = form.val('form-recoverycount-condition');
             Object.assign(conditions, {
             Object.assign(conditions, {
-                access_token: accessToken,
+                accessToken: accessToken,
                 period: period,
                 period: period,
                 busId: $("#slt-recoverycount-biz").val()
                 busId: $("#slt-recoverycount-biz").val()
             });
             });
@@ -139,7 +139,7 @@ layui.define(['table', 'form', 'sessions', 'admin', 'common', 'echarts', 'laydat
 
 
         $("#recoverycount-export-excel").on('click', function () {
         $("#recoverycount-export-excel").on('click', function () {
 
 
-            let href = common.domainName + '/api-web/recoverycount/export?access_token=' + accessToken + "&createtime=" + createTime + '&dateLimit=' + dateLimit + '&limit=1000';
+            let href = common.domainName + '/api-web/recoverycount/export?accessToken=' + accessToken + "&createtime=" + createTime + '&dateLimit=' + dateLimit + '&limit=1000';
 
 
             window.open(href)
             window.open(href)
         })
         })

+<!--性能曲线图-->
+<article class="page-container template">
+    <div class="page-panel">
+        <div class="main">
+            <div class="layui-card" id="predictionDetailContent">
+                <div class="layui-card-body">
+
+                            <!--预测跟实际曲线-->
+                                <div class="lay-row">
+                                    <div class="lay-row-item">
+                                        <div class="detail_linechart" id="predictionKpiLineChart" style="margin-top:35px;"></div>
+                                    </div>
+                                </div>
+
+
+                </div>
+            </div>
+        </div>
+    </div>
+</article>
+
+<script>
+    layui.use('predictionDetail', function (fn) {
+        fn({{d}})
+    });
+</script>

+<title>指标预测概况</title>
+<article class="page-container">
+    <div class="page-panel ">
+        <div class="main">
+            <div class="layui-card">
+                <div class="layui-card-body" style="margin-top: 10px;">
+                    <div style="display: flex">
+                        <form class="layui-form layui-card-header" onsubmit="return false"
+                              lay-filter="form-prediction-condition">
+                            <div class="layui-form-item">
+                                <div class="layui-inline">
+                                    <div class="layui-input-inline layui-input-inline--long">
+                                        <input type="text" name="keyword" lay-tips="关键字检索包含: </br>资源名称 </br>指标名称</br>flag" placeholder="输入关键字，回车搜索" autocomplete="off" class="layui-input">
+                                    </div>
+                                </div>
+                            </div>
+                        </form>
+
+                    </div>
+                    <table id="prediction-table" class="layui-table" lay-filter="prediction-table"></table>
+                </div>
+            </div>
+        </div>
+    </div>
+</article>
+<script>
+    layui.use('prediction', function (fn) {
+        fn();
+    });
+</script>