serset
/
Sers


			
							1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798
							<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Api站点管理</title>
    <script src="Scripts/vue/vue.js"></script>
    <script src="Scripts/jquery/jquery.min.js"></script>
 
    <script src="Scripts/Sers/sers.apiClient.js"></script>

    <style>

        .line {
            border: 1px solid #cccccc;
            border-collapse: collapse;
        }
    </style>
</head>

<body>

    <h1>Api站点管理</h1>
    <a href="#" onclick="apiStationFilter=null;reloadStations();" title="显示所有的Api站点">显示所有</a> 
    <a href="#" onclick="apiStationFilter=apiStationFilter_OnlyOnline;reloadStations();" title="仅显示在线的Api站点（apiNodeCount不为0）（默认为仅显示在线）">仅显示在线</a>
    <div id="stations">

        <div v-for="station in stations" style="width:300px;height:250px; float:left;margin:2px;padding:4px;word-wrap:break-word;" class="line">
            {{station.stationName}}     <br />
            calledCount  err/sum:  {{(station.counter||{}).errorCount}}/ {{(station.counter||{}).sumCount}}<br />
            qps:{{station.qps}}     <br />
            apiServiceCount:{{station.apiServiceCount}}     <br />
            apiNodeCount:{{station.apiNodeCount}}     <br />
            activeApiNodeCount:{{station.activeApiNodeCount}}     <br />
            状态：{{station.status}}（正常、暂停）<br />
            操作：  <a href="#" @click="start(station)">打开</a>   <a href="#" @click="pause(station)">暂停</a><br />

        </div>

    </div>
    <script>


        var stations = new Vue({
            el: '#stations',
            data: {
                stations: []
            }, methods: {
                start: function (station) {
                    sers.apiClient.apiStation_start(station.stationName, function (data) {
                        rendStations();
                    });
                }, pause: function (station) {
                    sers.apiClient.apiStation_pause(station.stationName, function (data) {
                        rendStations();
                    });
                }
            }
        });


        function apiStationFilter_OnlyOnline(apiStations) {
            return apiStations.filter(function (item) { return item.apiNodeCount; });
        }

        var apiStationFilter = apiStationFilter_OnlyOnline;

        function reloadStations() {
            sers.apiClient.apiStation_getAll(function (apiRet) {
                var apiStations = apiRet.data;
                if (apiStationFilter) apiStations = apiStationFilter(apiStations);
                stations.stations = apiStations;
            });
        }

        reloadStations();


        var intervals = [];
        function startRefreshTask() {
            var interval = setInterval(reloadStations, 2000);
            intervals.push(interval);
        }
        function stopRefreshTask() {
            for (var t in intervals) {
                clearInterval(intervals[t]);
            }
            intervals = [];
        }

        startRefreshTask();

    </script>
</body>

</html>