serset
/
Sers


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141
							<!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>服务器站点管理</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>服务站点管理</h1>

    <div id="stations">

        <div v-for="station in stations" style="width:300px;height:500px; float:left;margin:2px;padding:4px;word-wrap:break-word;" class="line">
            {{ (station.serviceStationInfo||{}).serviceStationName }} <br />
            {{station.apiStationNames}} <br />
            stationVersion：{{ (station.serviceStationInfo||{}).stationVersion }}<br />
            startTime：{{station.startTime}}<br />
            状态：{{station.status}}（正常、暂停）<br />
            操作：  <a href="#" @click="start(station)">打开</a>   <a href="#" @click="pause(station)">暂停</a>  <a href="#" @click="stop(station)">强制关闭</a> <br />
            -----------------------<br />
            qps:{{station.qps}} <br />
            apiNodeCount:{{station.apiNodeCount}} <br />
            activeApiNodeCount:{{station.activeApiNodeCount}}     <br />
            calledCount  err/sum:  {{(station.counter||{}).errorCount}}/ {{(station.counter||{}).sumCount}}<br />
            -----------------------<br />
            MachineName：{{ getStringByPath(station,'deviceInfo.MachineName')}}<br />
            cpuUsage：{{ getFloatByPath(station,'usageStatus.cpuUsage') }} %<br />
            memoryUsage：{{ getFloatByPath(station,'usageStatus.memoryUsage') }} % <br />
            -----------------------<br />
            <table>
                <tr>
                    <td>deviceKey:</td>
                    <td>  <font :title="(station.deviceInfo||{}).deviceKey">{{((station.deviceInfo||{}).deviceKey||'').substr(0,4) }} </font></td>
                </tr>
                <tr>
                    <td>serviceStationKey: </td>
                    <td><font :title="(station.serviceStationInfo||{}).serviceStationKey">{{((station.serviceStationInfo||{}).serviceStationKey||'').substr(0,4) }} </font></td>
                </tr>
                <tr>
                    <td>connKey:</td>
                    <td>  <font :title="station.connKey">{{(station.connKey||'').substr(0,4) }} </font></td>
                </tr>
            </table>
            <br /> <!--{{station.deviceInfo}}-->
        </div>

    </div>
    <script>

        // getFloatByPath({a:{b:'12.525'}},'a.b');
        function getFloatByPath(obj, path,fixed) {
            var items = path.split('.');
            for (var i in items) {
                if (!obj) return '';
                obj = obj[items[i]];                
            }
            obj = parseFloat(obj);
            return isNaN(obj) ? '' : obj.toFixed(isNaN(fixed)?2:fixed);            
        }

         function getStringByPath(obj, path) {
            var items = path.split('.');
            for (var i in items) {
                if (!obj) return '';
                obj = obj[items[i]];                
            }            
            return ''+obj;            
        }


        var stations = new Vue({
            el: '#stations',
            data: {
                stations: [
                    {                         
                    }
                ]
            }, methods: {
                getFloatByPath: getFloatByPath,
                getStringByPath: getStringByPath,

                start: function (station) {
                    sers.apiClient.serviceStation_start(station.connKey, function (data) {
                        rendStations();
                    });
                }, pause: function (station) {
                    sers.apiClient.serviceStation_pause(station.connKey, function (data) {
                        rendStations();
                    });
                }, stop: function (station) {
                    if (!confirm('手动关闭服务站点后，服务站点不一定会自动重新连接，确定继续吗？')) return;
                    sers.apiClient.serviceStation_stop(station.connKey, function (data) {
                        rendStations();
                    });
                }
            }
        });


        function rendStations() {
            sers.apiClient.serviceStation_getAll(function (data) {
                stations.stations = data.data;
            });
        }

        rendStations();


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

        startRefreshTask();
    </script>
</body>

</html>