status.vue

<template>
    <div class="web_bg"></div>
    <div class="container" v-if="error">
        <div class="github">
            <div class="rep" v-for="v in servers">
                <div class="info">
                    <div>
                        <h2>{{ v.name }}
                            <span v-if="v.server !== '404' && v.server !== null">
                                <span style="font-size: 12px;" v-html="osIco(v.server.system)" />
                                <span style="font-size: 12px; margin-left: 10px;">
                                    <i class="fa-solid fa-clock"></i> {{ v.server.uptime }}
                                </span>
                            </span>

                        </h2>
                        <span v-if="v.server !== '404' && v.server !== null"
                         class="allinfo" style="font-size: 12px; margin-right: 20px;">
                            <i @click="terminal" title="打开终端" class="fa-solid fa-terminal pointer"></i>
                        </span>
                        <el-tooltip v-if="v.server !== '404' && v.server !== null">
                            <template #content>
                                <p style="max-width: 340px;">{{ v.server.system }} {{ `${v.server?.platformVersion ? ' - '+ v.server.platformVersion : ''}` }}</p>
                                CPU:{{ v.server.cpuModel }} <br>
                                <p v-if="v.server.loada">负载:
                                    {{ v.server.loada.load1.toFixed(2) }}/{{ v.server.loada.load5.toFixed(2) }}/{{
                                        v.server.loada.load15.toFixed(2) }}</p>
                                硬盘:{{ v.server.diskUse }}/{{
                                    v.server.diskSize }} <br>
                                内存: {{ v.server.memoryUsed }}/{{
                                    v.server.memoryTotal
                                }} <br>
                                虚拟内存: {{ v.server.swapUsed }}/{{
                                    v.server.swapTotal
                                }} <br>
                                流量: <i class="fa-regular fa-circle-down stream"></i>{{ v.server.received }} <i
                                    class="fa-regular fa-circle-up stream"></i>{{ v.server.send }} <br>
                                进程数: {{ v.server.process }} <br>
                                线程数: {{ v.server.thread }} <br>
                                TCP连接数: {{ v.server.tcpCount }} <br>
                                UDP连接数: {{ v.server.udpCount }} <br>
                            </template>
                            <div class="allinfo">
                                <i class="fa-solid fa-circle-check" style="color: #37b003;"></i>
                            </div>
                        </el-tooltip>
                    </div>
                    <div v-if="v.server == null || v.server == 404">
                        <p style="margin-top:10px">已离线</p>
                    </div>
                    <div v-else>
                        <div class="server">
                            <p :title="v.server?.platformVersion">{{ v.server.system }} {{ v.server.arch }}
                                {{ v.server.virtualization ? `[${v.server.virtualization}]` : '' }}</p>
                            <div class="name" title="负载"><i class="fa-solid fa-scale-balanced"></i></div>
                            <div class="progress">
                                <el-progress :text-inside="true" :stroke-width="troke"
                                    :percentage="parseFloat(v.server.loadavg) > 100 ? 100 : parseFloat(v.server.loadavg)"
                                    :color=colors>
                                    <span>{{ v.server.loadavg }}</span>
                                </el-progress>

                            </div>
                            <div class="name" title="CPU使用率"><i class="fa-solid fa-microchip"></i></div>
                            <div class="progress"><el-progress :text-inside="true" :stroke-width="troke"
                                    :percentage=parseFloat(v.server.cpuUsage) :color=colors /></div>
                            <div class="name" title="内存使用率"><i class="fa-solid fa-memory"></i></div>
                            <div class="progress"><el-progress :text-inside="true" :stroke-width="troke"
                                    :percentage=parseFloat(v.server.memoryPer) :color=colors>
                                    <span>({{ v.server.memoryPer }}) {{ v.server.memoryUsed }}/{{
                                        v.server.memoryTotal
                                    }}</span>
                                </el-progress>
                            </div>
                            <div class="name" title="硬盘使用率"><i class="fa-solid fa-hard-drive"></i></div>
                            <div class="progress"><el-progress :text-inside="true" :stroke-width="troke"
                                    :percentage=parseFloat(v.server.diskPercent) :color=colors>
                                    <span>({{ v.server.diskPercent }}) {{ v.server.diskUse }}/{{
                                        v.server.diskSize
                                    }}</span>
                                </el-progress>
                            </div>
                            <p>
                                <i class="fa-solid fa-download"></i> {{ v.server.downStream }}({{ v.server.received }})
                                &nbsp;&nbsp;<i class="fa-solid fa-upload"></i> {{ v.server.upStream }}({{ v.server.send }})
                            </p>
                            <p>
                                {{ v.server.cpuModel }} * {{ v.server.cores }}
                                {{ v.server.temp ? ` * ${(v.server.temp / 1000).toFixed(2)}℃` : '' }}</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="container" v-if="loading">
        <div class="github">
            <div class="rep" v-for="_v in 3">
                <el-skeleton animated :rows="5" style="width: 90%;margin:10px;" />
            </div>
        </div>
    </div>
</template>
<script>
export default {
    data() {
        return {
            servers: [],
            error: false,
            loading: true,
            socket: '',
            isConnect: false,
            path: '', //wss地址
            colors: [
                { color: '#5cb87a', percentage: 30 },
                { color: '#1989fa', percentage: 60 },
                { color: '#e6a23c', percentage: 70 },
                { color: '#f5980d', percentage: 80 },
                { color: '#f56c6c', percentage: 100 },
            ],
            troke: 15,
            ico: ''
        }
    },
    mounted() {
        this.init()
    },
    methods: {
        terminal() {
            ElMessage({
                message: '抱歉,你没有权限操作',
                type: 'warning',
            })
        },
        osIco(os) {
            if (os.includes('Ubuntu')) {
                return '<svg t="1695745142531" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7025" width="16" height="16"><path d="M512 512m-512 0a512 512 0 1 0 1024 0 512 512 0 1 0-1024 0Z" fill="#DD4814" p-id="7026"></path><path d="M251.716267 512c0 36.932267-29.5936 66.833067-66.116267 66.833067S119.466667 548.9152 119.466667 512c0-36.9152 29.610667-66.833067 66.133333-66.833067 36.5056 0 66.116267 29.917867 66.116267 66.833067zM627.882667 836.983467a65.7408 65.7408 0 0 0 90.333866 24.439466c31.573333-18.432 42.4448-59.306667 24.1664-91.2896a65.706667 65.706667 0 0 0-90.282666-24.439466c-31.624533 18.466133-42.461867 59.323733-24.2176 91.2896z m114.517333-583.133867c18.261333-31.9488 7.441067-72.823467-24.183467-91.2896a65.757867 65.757867 0 0 0-90.333866 24.456533c-18.261333 31.965867-7.406933 72.8576 24.200533 91.306667a65.6896 65.6896 0 0 0 90.299733-24.4736z m-223.7952 67.549867c98.542933 0 179.370667 76.356267 187.835733 173.704533L802.133333 493.602133a287.607467 287.607467 0 0 0-83.4048-185.429333c-25.361067 9.898667-54.7328 8.533333-80.0768-6.263467a93.917867 93.917867 0 0 1-45.431466-67.037866 281.770667 281.770667 0 0 0-74.581334-10.001067c-45.226667 0-88.0128 10.683733-126.0032 29.730133l46.557867 84.514134a186.026667 186.026667 0 0 1 79.428267-17.7152zM330.069333 512c0-64.494933 31.6928-121.480533 80.1792-155.989333l-49.134933-82.9952a287.505067 287.505067 0 0 0-117.1968 165.717333A94.242133 94.242133 0 0 1 278.6304 512a94.242133 94.242133 0 0 1-34.7136 73.2672 287.573333 287.573333 0 0 0 117.1968 165.717333l49.134933-82.9952A190.976 190.976 0 0 1 330.069333 512zM518.621867 702.634667a186.368 186.368 0 0 1-79.428267-17.698134l-46.557867 84.514134a280.405333 280.405333 0 0 0 125.986134 29.713066 281.258667 281.258667 0 0 0 74.5984-10.001066 93.9008 93.9008 0 0 1 45.431466-67.037867 91.989333 91.989333 0 0 1 80.0768-6.263467A287.744 287.744 0 0 0 802.133333 530.414933l-95.675733-1.536c-8.448 97.3824-89.2928 173.738667-187.835733 173.738667z" fill="#FFFFFF" p-id="7027"></path></svg>'
            }
            if (os.includes('Debian')) {
                return '<svg t="1695745084964" class="icon" viewBox="0 0 1058 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5986" width="16" height="16"><path d="M865.080497 433.171694c0 25.223693-8.533049 42.050865-17.066097 63.11043l-17.066098 8.430652c-12.765441 25.223693 0 12.628912-8.533049 33.654345-17.066098 16.827172-55.362421 50.515649-68.127863 54.679777-8.533049 0 4.232392-8.430652 8.533049-12.628912-25.530882 16.861305-21.29849 25.257825-59.594813 37.886737v-4.164128c-93.761141 46.249125-225.818606-42.084997-225.818606-164.073464 0 8.430652-4.232392 4.19826-4.232392 8.430652-4.232392-63.11043 29.831539-121.988467 85.228092-147.246291 55.362421-29.490217 119.257891-21.059565 161.889004 16.827172-21.332622-29.456085-63.929602-58.843905-115.059632-54.679777-51.130029 0-97.959401 33.654345-115.025499 67.308689-25.565014 16.861305-29.865671 63.11043-42.631112 71.541082-17.066098 109.359555 29.831539 155.642812 102.225926 214.554982 12.765441 8.430652 4.232392 8.430652 4.232392 16.861305a188.614513 188.614513 0 0 1-63.89547-50.51565c8.533049 12.628912 21.29849 29.490217 34.063931 37.886737-21.29849-8.39652-55.362421-54.679777-63.89547-58.843905 38.364588 71.541082 161.854872 121.988467 225.784474 96.764774-29.865671 0-68.161995 0-102.225926-12.628912-12.765441-8.39652-34.063931-21.025432-29.831539-25.18956 85.19396 33.620213 178.852705 25.18956 251.315356-33.654345 21.29849-16.861305 38.364588-37.886737 46.829372-42.084997-8.533049 12.628912 0 8.430652-4.232392 16.861304 17.066098-29.490217-8.533049-12.628912 21.29849-54.679777l8.533049 12.59478c-4.232392-25.223693 29.865671-54.679777 29.865671-96.764774 8.533049-12.628912 8.533049 12.628912 0 42.084997 12.765441-29.490217 4.232392-37.886737 4.232392-63.144562 4.232392 8.464785 8.533049 16.895437 8.533049 25.257825-4.232392-21.059565 12.765441-42.084997 17.066098-58.878038-4.232392 0-12.765441 12.628912-12.765441-21.059564 0-16.827172 4.232392-8.39652 4.232392-12.594781-4.232392 0-12.765441-12.628912-17.066098-37.886737 4.232392-4.19826 8.533049 12.628912 12.765442 12.628913-4.232392-16.895437-8.533049-33.688477-8.533049-46.283258-12.765441-29.456085-4.232392 4.164128-17.066098-12.628912-17.066098-46.249125 12.765441-12.59478 12.765441-33.620213 21.29849 33.620213 34.063931 84.135862 42.59698 105.195427-4.232392-25.257825-12.765441-50.515649-21.29849-75.773474 8.533049 4.19826-12.765441-50.481517 8.533049-16.827172-21.29849-79.90347-93.761141-151.444552-157.588347-185.098897 12.765441 12.628912 21.29849 21.025432 21.29849 25.223692-34.063931-21.025432-25.530882-21.025432-29.831539-29.456084-25.530882-12.628912-29.831539 0-46.829372 0C677.524083 25.291957 669.059298 25.291957 622.195793 12.663045v8.39652c-34.098063-12.628912-38.39872 4.19826-72.462651 0-4.232392 0 12.765441-4.164128 21.29849-8.430653-29.831539 4.19826-29.831539-4.164128-59.594813 0L536.967701 0.034132c-25.530882 0-63.89547 16.861305-51.130029 4.19826-42.59698 16.827172-119.292024 46.249125-157.588347 84.135862v-8.430652c-21.29849 21.059565-85.228092 67.30869-89.426352 96.764775h-4.266525c-17.066098 16.861305-21.29849 37.886737-29.831539 54.679777-12.765441 21.059565-21.29849 8.430652-17.066098 12.628912C162.127929 294.526716 149.294224 336.577581 136.528782 374.396053c8.533049 12.628912 0 71.575214 4.232393 117.82434-12.765441 231.348022 166.121396 458.60018 357.841938 509.047565 29.831539 8.430652 72.428519 8.430652 106.49245 12.628912-42.59698-12.628912-46.829372-8.464785-89.426352-21.059565-29.831539-12.628912-38.364588-29.490217-59.628946-46.283257l8.533049 12.628913c-42.59698-12.628912-25.530882-16.861305-59.594813-29.456085l8.533049-12.628913c-12.765441 0-34.063931-21.025432-42.59698-33.654344h-12.765442c-12.765441-21.025432-21.29849-37.886737-21.29849-50.51565l-4.232392 8.464785c-4.232392-8.430652-63.929602-79.937602-34.063931-63.144562-4.266524-4.164128-12.799573-8.39652-21.332622-25.189561l4.232392-8.430652c-12.765441-16.861305-25.530882-42.084997-25.530882-50.515649 8.533049 12.628912 12.765441 12.628912 17.066097 12.628912-38.364588-92.600647-38.364588-4.19826-68.127862-92.600647h4.232392c-4.232392-8.430652-8.533049-12.628912-12.765441-21.025432l4.232392-25.257825c-25.530882-29.456085-8.533049-130.384987-4.232392-185.064764 4.232392-21.059565 21.29849-46.283257 38.364588-84.169995h-8.533049c17.066098-29.456085 102.225926-121.988467 140.590514-117.790207 17.066098-21.059565-4.232392 0-8.533049-4.19826 42.59698-42.084997 55.362421-29.456085 80.893303-37.886737 29.831539-16.861305-25.530882 8.430652-12.765441-8.430652 51.130029-12.628912 38.364588-29.456085 102.225926-37.886737 8.533049 4.164128-17.066098 4.164128-21.29849 12.628912 42.59698-21.059565 136.255725-16.895437 195.918803 12.59478 68.161995 33.654345 149.157695 126.220859 153.355954 218.753242h4.232393c0 33.620213 4.232392 75.70521-8.533049 113.591947l12.765441-16.827173h0.068264z" fill="#C42222" p-id="5987"></path></svg>'
            }
            if (os.includes('Windows')) {
                return '<svg t="1695745299662" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="12154" width="16" height="16"><path d="M456 484V160.1l-335.9 72V484H456zM512 484h391.8V64.2l-391.8 84V484zM456 540H120.2v251.9l335.9 72V540zM512 540v335.9l391.8 84V540H512z" fill="#00adef" p-id="12155"></path></svg>'
            }
            if (os.includes('Alpine')) {
                return '<svg t="1695744659706" class="icon" viewBox="0 0 1178 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4031" width="16" height="16"><path d="M0 517.399808L303.125599 0h577.043145L1178.139981 517.399808 890.96836 1024H303.125599z" fill="#3385B3" p-id="4032"></path><path d="M133.03164 583.915628L470.765101 245.445829l337.733461 338.469799a171.812081 171.812081 0 0 1-66.51582 32.153404 245.445829 245.445829 0 0 1-63.815916 5.154362l-207.401725-210.592522-215.501438 213.292426a121.25024 121.25024 0 0 1-63.815916-2.699904 122.722915 122.722915 0 0 1-58.416107-37.307766z m186.047938 2.699904l90.569511-93.269415v130.577181a325.706616 325.706616 0 0 1-49.089166-13.254075A325.46117 325.46117 0 0 1 319.079578 586.615532z m385.595398-301.407478L613.614573 377.25024l82.224353 82.715244 9.326942-9.326941 171.81208 175.984659a239.555129 239.555129 0 0 0 63.815916-5.399808A180.64813 180.64813 0 0 0 1008.046021 589.06999z" fill="#FFFFFF" p-id="4033"></path></svg>'
            }
            return '<svg t="1695745245118" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="9471" width="16" height="16"><path d="M527.693487 153.011494c-7.846743 7.846743-15.693487 15.693487-19.616859 27.463602-3.923372 15.693487-3.923372 27.463602 0 43.157088 3.923372 11.770115 11.770115 27.463602 23.54023 35.310345 7.846743 3.923372 11.770115 7.846743 19.616858 7.846743s15.693487 0 23.54023-3.923372c7.846743-3.923372 15.693487-11.770115 15.693487-19.616858 3.923372-7.846743 3.923372-15.693487 7.846743-27.463601 0-11.770115 0-23.54023-3.923371-35.310345-3.923372-11.770115-11.770115-23.54023-23.54023-31.386973-3.923372-3.923372-11.770115-3.923372-15.693487-7.846744-7.846743 0-11.770115 0-19.616858 3.923372-3.923372 3.923372-7.846743 3.923372-7.846743 7.846743" fill="#FFFFFF" p-id="9472"></path><path d="M849.409962 615.969349c-3.923372-31.386973-15.693487-62.773946-27.463602-94.16092-7.846743-23.54023-19.616858-43.157088-35.310345-62.773946s-31.386973-35.310345-47.080459-54.927203c-7.846743-11.770115-11.770115-19.616858-19.616859-31.386973-3.923372-7.846743-7.846743-11.770115-7.846743-19.616859-7.846743-19.616858-15.693487-39.233716-27.463602-58.850574 0-3.923372-3.923372-7.846743-3.923371-7.846744 0-19.616858-3.923372-35.310345-3.923372-54.927203 0-35.310345-3.923372-74.544061-7.846743-109.854406-3.923372-15.693487-11.770115-35.310345-23.54023-47.08046-11.770115-19.616858-27.463602-31.386973-43.157088-47.080459-27.463602-15.693487-58.850575-27.463602-94.16092-27.463602-23.54023 0-51.003831 3.923372-70.620689 15.693487-23.54023 11.770115-43.157088 31.386973-54.927203 54.927203-7.846743 23.54023-15.693487 51.003831-15.693487 78.467433s0 51.003831 3.923372 78.467433c0 27.463602 0 54.927203 3.923371 78.467433v39.233716c-11.770115 19.616858-23.54023 39.233716-39.233716 54.927203-7.846743 11.770115-19.616858 23.54023-31.386973 35.310345-11.770115 15.693487-23.54023 31.386973-31.386973 47.08046-3.923372 15.693487-11.770115 31.386973-15.693487 47.080459-3.923372 19.616858-11.770115 35.310345-19.616858 51.003832v11.770115c-3.923372 11.770115-11.770115 19.616858-15.693487 31.386973l-7.846743 11.770115c-3.923372 7.846743-7.846743 15.693487-11.770115 19.616858 0 3.923372-3.923372 7.846743-3.923372 11.770115v31.386973c0 3.923372 0 3.923372 3.923372 7.846744 3.923372 7.846743 3.923372 15.693487 7.846743 19.616858 0 3.923372 3.923372 7.846743 3.923372 7.846743v3.923372c0 3.923372 3.923372 3.923372 3.923371 7.846743 3.923372 3.923372 3.923372 7.846743 7.846744 7.846743 7.846743 3.923372 11.770115 7.846743 11.770115 11.770115 7.846743 31.386973 23.54023 62.773946 47.080459 90.237548-3.923372 3.923372-7.846743 11.770115-7.846743 15.693487-11.770115 15.693487-19.616858 35.310345-27.463601 54.927203-3.923372 7.846743-3.923372 19.616858-3.923372 31.386973 0 11.770115 7.846743 19.616858 15.693487 27.463602 3.923372 3.923372 11.770115 7.846743 19.616858 7.846743s11.770115 3.923372 19.616858 0c23.54023-3.923372 51.003831-7.846743 74.544061-15.693487 15.693487-3.923372 27.463602-7.846743 43.157088-11.770115 15.693487-3.923372 31.386973-3.923372 47.08046-7.846743H519.846743c19.616858 0 39.233716 3.923372 54.927203 3.923372 15.693487 3.923372 31.386973 3.923372 47.08046 7.846743 23.54023 7.846743 51.003831 11.770115 78.467433 15.693487h19.616858c7.846743 0 11.770115-3.923372 19.616859-7.846744 7.846743-7.846743 11.770115-15.693487 15.693486-27.463601 0-11.770115 0-19.616858-3.923372-31.386973-7.846743-19.616858-15.693487-35.310345-27.463601-54.927204-3.923372-7.846743-7.846743-15.693487-11.770115-19.616858 19.616858-19.616858 31.386973-43.157088 47.08046-62.773946 7.846743 0 15.693487 0 23.54023-3.923372 19.616858-7.846743 39.233716-19.616858 51.003831-35.310345 3.923372-3.923372 7.846743-11.770115 7.846743-15.693486 7.846743-11.770115 11.770115-27.463602 15.693487-39.233717 0-19.616858 0-47.08046-7.846743-70.620689z" fill="#020204" p-id="9473"></path><path d="M413.915709 294.252874c-3.923372 3.923372-7.846743 11.770115-7.846743 15.693486 0 3.923372-3.923372 11.770115-3.923372 15.693487 0 11.770115 0 23.54023-3.923372 35.310345 0 11.770115-7.846743 23.54023-15.693486 31.386973-11.770115 15.693487-23.54023 35.310345-31.386974 54.927203-3.923372 11.770115-3.923372 23.54023-3.923371 39.233716-15.693487 19.616858-27.463602 43.157088-35.310345 62.773947-15.693487 35.310345-23.54023 70.62069-27.463602 105.931034-3.923372 47.08046 0 90.237548 19.616859 133.394636 11.770115 31.386973 31.386973 58.850575 58.850574 78.467433 11.770115 11.770115 27.463602 19.616858 43.157089 27.463602 54.927203 27.463602 113.777778 23.54023 168.70498 0 27.463602-15.693487 51.003831-35.310345 70.62069-54.927203 11.770115-11.770115 27.463602-27.463602 35.310345-39.233717 15.693487-31.386973 27.463602-66.697318 31.386973-102.007663 11.770115-62.773946 3.923372-125.547893-19.616858-180.475096-7.846743-19.616858-19.616858-35.310345-35.310345-51.003831-3.923372-27.463602-11.770115-51.003831-23.54023-78.467433-7.846743-19.616858-19.616858-35.310345-27.463601-51.003831-3.923372-7.846743-3.923372-15.693487-7.846744-23.54023-3.923372-7.846743-7.846743-15.693487-11.770115-19.616858-7.846743-3.923372-11.770115-7.846743-19.616858-11.770115-7.846743-3.923372-15.693487-3.923372-23.54023-3.923372h-51.003831c-11.770115 0-27.463602-3.923372-39.233717-3.923372-7.846743 0-11.770115 0-19.616858 3.923372-11.770115 7.846743-15.693487 11.770115-19.616858 15.693487m3.923371-141.24138c-7.846743 0-11.770115 3.923372-15.693486 7.846744-3.923372 3.923372-7.846743 7.846743-11.770115 15.693486 0 11.770115-3.923372 23.54023 0 35.310345 0 11.770115 0 23.54023 3.923372 31.386973 3.923372 3.923372 3.923372 11.770115 7.846743 15.693487 3.923372 3.923372 7.846743 7.846743 15.693486 7.846743h15.693487c3.923372 0 7.846743-3.923372 11.770115-7.846743 3.923372-3.923372 7.846743-11.770115 11.770115-19.616859 3.923372-7.846743 3.923372-15.693487 3.923372-23.540229 0-7.846743 0-19.616858-3.923372-27.463602-3.923372-7.846743-7.846743-15.693487-15.693487-23.54023-3.923372-3.923372-7.846743-7.846743-11.770115-7.846743-3.923372-3.923372-7.846743-3.923372-11.770115-3.923372m109.854407 0c-7.846743 7.846743-15.693487 15.693487-19.616859 27.463602-3.923372 15.693487-3.923372 27.463602 0 43.157088 3.923372 11.770115 11.770115 27.463602 23.54023 35.310345 7.846743 3.923372 11.770115 7.846743 19.616858 7.846743s15.693487 0 23.54023-3.923372c7.846743-3.923372 15.693487-11.770115 15.693487-19.616858 3.923372-7.846743 3.923372-15.693487 7.846743-27.463601 0-11.770115 0-23.54023-3.923371-35.310345-3.923372-11.770115-11.770115-23.54023-23.54023-31.386973-3.923372-3.923372-11.770115-3.923372-15.693487-7.846744-7.846743 0-11.770115 0-19.616858 3.923372-3.923372 3.923372-7.846743 3.923372-7.846743 7.846743" fill="#FFFFFF" p-id="9474"></path><path d="M547.310345 180.475096c-3.923372 0-7.846743 0-11.770115 3.923371-3.923372 0-3.923372 3.923372-7.846743 7.846744-3.923372 7.846743-7.846743 11.770115-7.846744 19.616858 0 3.923372 0 11.770115 3.923372 15.693487 0 3.923372 3.923372 7.846743 7.846743 11.770114 3.923372 3.923372 7.846743 3.923372 15.693487 7.846744 3.923372 0 11.770115 0 15.693486-3.923372 3.923372-3.923372 7.846743-7.846743 7.846744-11.770115 3.923372-3.923372 3.923372-7.846743 3.923371-11.770115 0-7.846743 0-15.693487-3.923371-23.54023-3.923372-7.846743-7.846743-11.770115-15.693487-15.693486h-7.846743" fill="#020204" p-id="9475"></path><path d="M417.83908 153.011494c-7.846743 0-11.770115 3.923372-15.693486 7.846744-3.923372 3.923372-7.846743 7.846743-11.770115 15.693486 0 11.770115-3.923372 23.54023 0 35.310345 0 11.770115 0 23.54023 3.923372 31.386973 3.923372 3.923372 3.923372 11.770115 7.846743 15.693487 3.923372 3.923372 7.846743 7.846743 15.693486 7.846743h15.693487c3.923372 0 7.846743-3.923372 11.770115-7.846743 3.923372-3.923372 7.846743-11.770115 11.770115-19.616859 3.923372-7.846743 3.923372-15.693487 3.923372-23.540229 0-7.846743 0-19.616858-3.923372-27.463602-3.923372-7.846743-7.846743-15.693487-15.693487-23.54023-3.923372-3.923372-7.846743-7.846743-11.770115-7.846743-3.923372-3.923372-7.846743-3.923372-11.770115-3.923372" fill="#FFFFFF" p-id="9476"></path><path d="M402.145594 204.015326v23.54023c0 3.923372 3.923372 7.846743 7.846743 11.770114l7.846743 7.846744c3.923372 0 7.846743 3.923372 11.770115 0 3.923372 0 3.923372-3.923372 7.846744-3.923372 0-3.923372 3.923372-3.923372 3.923371-7.846743 3.923372-7.846743 3.923372-19.616858 0-27.463602 0-7.846743-3.923372-11.770115-11.770115-15.693486-3.923372-3.923372-3.923372-3.923372-7.846743-3.923372h-7.846743c-3.923372 0-3.923372 3.923372-7.846743 7.846743 0 0-3.923372 3.923372-3.923372 7.846744" fill="#020204" p-id="9477"></path><path d="M390.375479 298.176245s0 3.923372 0 0c0 3.923372 3.923372 7.846743 3.923372 7.846744s3.923372 0 3.923371 3.923371c7.846743 3.923372 15.693487 11.770115 19.616858 19.616858 7.846743 11.770115 15.693487 19.616858 23.54023 27.463602 7.846743 3.923372 15.693487 7.846743 23.54023 7.846743 11.770115 0 19.616858 0 31.386973-3.923371 7.846743-3.923372 19.616858-7.846743 27.463602-11.770115 15.693487-11.770115 31.386973-23.54023 47.08046-31.386974 3.923372 0 7.846743-3.923372 11.770115-3.923371 3.923372 0 7.846743-3.923372 7.846743-7.846743s3.923372-7.846743 3.923372-11.770115c0-3.923372 0-7.846743 3.923371-11.770115v-11.770115c0-3.923372-3.923372-3.923372-7.846743-7.846744-3.923372 0-7.846743-3.923372-11.770115-3.923371-7.846743 0-15.693487 0-19.616858 3.923371h-27.463602c-11.770115 0-23.54023 3.923372-35.310345 3.923372h-54.927203c-3.923372 0-11.770115 3.923372-15.693486 7.846743l-11.770115 11.770115c-3.923372 0-3.923372 3.923372-7.846743 3.923372h-7.846744-3.923371-3.923372v7.846743" fill="#D99A03" p-id="9478"></path><path d="M417.83908 270.712644c-3.923372 3.923372-7.846743 3.923372-15.693486 7.846743-3.923372 0-3.923372 3.923372-3.923372 3.923372v15.693486h7.846744c3.923372 0 7.846743 3.923372 11.770114 7.846744 3.923372 3.923372 3.923372 7.846743 7.846744 7.846743 7.846743 7.846743 19.616858 11.770115 31.386973 11.770115 11.770115 0 23.54023 0 31.386973-3.923372 7.846743 0 15.693487-3.923372 23.54023-7.846743 11.770115-3.923372 23.54023-11.770115 35.310345-19.616858 3.923372-3.923372 7.846743-7.846743 15.693486-11.770115 3.923372-3.923372 11.770115-3.923372 15.693487-7.846744v-3.923371-3.923372-3.923372c-3.923372-3.923372-11.770115-7.846743-19.616858-7.846743h-19.616858c-7.846743 0-11.770115-3.923372-15.693487-3.923372-7.846743-3.923372-11.770115-3.923372-19.616858-3.923371-15.693487-3.923372-31.386973-3.923372-43.157088 0-19.616858 11.770115-31.386973 15.693487-43.157089 23.54023" fill="#604405" p-id="9479"></path><path d="M417.83908 255.019157c-7.846743 3.923372-11.770115 11.770115-15.693486 15.693487-7.846743 3.923372-7.846743 7.846743-11.770115 11.770115 0 3.923372 0 7.846743-3.923372 11.770115v7.846743h7.846744c3.923372 0 7.846743 3.923372 15.693486 3.923372 3.923372 3.923372 7.846743 7.846743 11.770115 7.846743 7.846743 3.923372 19.616858 7.846743 31.386973 7.846743 11.770115 0 23.54023 0 31.386973-3.923372 7.846743 0 15.693487-3.923372 23.54023-7.846743 11.770115-3.923372 23.54023-11.770115 35.310345-19.616858 3.923372-3.923372 7.846743-7.846743 15.693487-11.770115l3.923371-3.923372 3.923372-3.923371h19.616858s3.923372 0 3.923372-3.923372v-3.923372-3.923371c0-3.923372-3.923372-3.923372-7.846743-3.923372s-7.846743-3.923372-11.770115-3.923372l-35.310345-11.770115c-3.923372-3.923372-11.770115-7.846743-15.693487-7.846743-7.846743-3.923372-11.770115-7.846743-19.616858-7.846743-15.693487-3.923372-31.386973-3.923372-43.157088 3.923372-15.693487 3.923372-31.386973 15.693487-39.233717 27.463601" fill="#F5BD0C" p-id="9480"></path><path d="M488.45977 235.402299c0 3.923372 3.923372 3.923372 7.846743 3.923371s3.923372 3.923372 7.846744 3.923372 3.923372 0 7.846743-3.923372c0-3.923372-3.923372-3.923372-7.846743-3.923371-3.923372-3.923372-7.846743-3.923372-15.693487 0 3.923372 0 0 0 0 0z m-39.233716 0c-3.923372 0-7.846743 3.923372-7.846744 7.846743h3.923372c3.923372 0 3.923372-3.923372 3.923372-7.846743 3.923372 3.923372 3.923372 0 0 0z" fill="#CD8907" p-id="9481"></path><path d="M939.64751 870.988506c-3.923372 7.846743-3.923372 11.770115-7.846744 15.693486-7.846743 11.770115-19.616858 19.616858-35.310345 23.54023-23.54023 11.770115-43.157088 19.616858-62.773946 35.310345-11.770115 7.846743-27.463602 19.616858-39.233716 31.386973-7.846743 11.770115-19.616858 19.616858-31.386974 27.463602-11.770115 7.846743-23.54023 11.770115-39.233716 15.693486-15.693487 3.923372-35.310345 0-51.003831-7.846743-11.770115-3.923372-19.616858-11.770115-27.463602-19.616858-3.923372-11.770115-7.846743-23.54023-7.846743-35.310345 0-19.616858 3.923372-43.157088 7.846743-62.773946 3.923372-15.693487 7.846743-35.310345 7.846743-51.003832 3.923372-31.386973 3.923372-62.773946 0-94.160919v-15.693487c0-11.770115 7.846743-19.616858 19.616859-19.616858h15.693486c11.770115 0 23.54023 3.923372 35.310345 7.846743 7.846743 0 15.693487 3.923372 19.616858 7.846743 11.770115 3.923372 23.54023 3.923372 35.310345 3.923372 11.770115-3.923372 27.463602-3.923372 39.233717-7.846743 3.923372 0 11.770115 0 15.693486 3.923371 3.923372 0 11.770115 3.923372 15.693487 7.846744 3.923372 3.923372 3.923372 7.846743 7.846743 11.770115 3.923372 3.923372 3.923372 11.770115 3.923372 19.616858v15.693487l11.770115 23.540229 19.616858 19.616859c7.846743 3.923372 15.693487 11.770115 19.616858 15.693486 3.923372 3.923372 7.846743 3.923372 11.770115 7.846744 3.923372 3.923372 7.846743 3.923372 7.846743 7.846743 7.846743 0 7.846743 7.846743 7.846744 11.770115" fill="#F5BD0C" p-id="9482"></path><path d="M939.64751 870.988506c-3.923372 7.846743-3.923372 11.770115-7.846744 15.693486-7.846743 11.770115-19.616858 19.616858-35.310345 23.54023-23.54023 11.770115-43.157088 19.616858-62.773946 35.310345-11.770115 7.846743-27.463602 19.616858-39.233716 31.386973-7.846743 11.770115-19.616858 19.616858-31.386974 27.463602-11.770115 7.846743-23.54023 11.770115-39.233716 15.693486-15.693487 3.923372-35.310345 0-51.003831-7.846743-11.770115-3.923372-19.616858-11.770115-27.463602-19.616858-3.923372-11.770115-7.846743-23.54023-7.846743-35.310345 0-19.616858 3.923372-43.157088 7.846743-62.773946 3.923372-15.693487 7.846743-35.310345 7.846743-51.003832 3.923372-31.386973 3.923372-62.773946 0-94.160919v-15.693487c0-11.770115 7.846743-19.616858 19.616859-19.616858h15.693486c11.770115 0 23.54023 3.923372 35.310345 7.846743 7.846743 0 15.693487 3.923372 19.616858 7.846743 11.770115 3.923372 23.54023 3.923372 35.310345 3.923372 11.770115-3.923372 27.463602-3.923372 39.233717-7.846743 3.923372 0 11.770115 0 15.693486 3.923371 3.923372 0 11.770115 3.923372 15.693487 7.846744 3.923372 3.923372 3.923372 7.846743 7.846743 11.770115 3.923372 3.923372 3.923372 11.770115 3.923372 19.616858v15.693487l11.770115 23.540229 19.616858 19.616859c7.846743 3.923372 15.693487 11.770115 19.616858 15.693486 3.923372 3.923372 7.846743 3.923372 11.770115 7.846744 3.923372 3.923372 7.846743 3.923372 7.846743 7.846743 7.846743 0 7.846743 7.846743 7.846744 11.770115M221.670498 698.360153c3.923372-3.923372 11.770115-3.923372 15.693487 0 7.846743 0 11.770115 3.923372 15.693486 7.846744 7.846743 7.846743 15.693487 15.693487 23.54023 27.463601 15.693487 23.54023 31.386973 43.157088 47.08046 66.697318 11.770115 19.616858 23.54023 39.233716 35.310345 54.927203 7.846743 11.770115 19.616858 23.54023 27.463601 35.310345 7.846743 11.770115 15.693487 23.54023 19.616859 39.233716 3.923372 19.616858 3.923372 39.233716-3.923372 54.927204-7.846743 11.770115-15.693487 23.54023-27.463602 27.463601-11.770115 7.846743-23.54023 11.770115-39.233716 11.770115-19.616858-3.923372-39.233716-7.846743-58.850575-19.616858-39.233716-15.693487-82.390805-19.616858-125.547893-31.386973-11.770115-3.923372-23.54023-7.846743-39.233716-11.770115-3.923372 0-11.770115-3.923372-15.693487-3.923372-3.923372-3.923372-11.770115-7.846743-11.770115-11.770115-3.923372-3.923372-3.923372-7.846743-3.923371-11.770115 0-3.923372 0-7.846743 3.923371-11.770115l11.770115-23.54023c3.923372-15.693487 7.846743-27.463602 3.923372-43.157088 0-15.693487-3.923372-27.463602-3.923372-43.157088v-19.616858c0-11.770115 11.770115-23.54023 23.54023-23.54023h39.233717c7.846743 0 11.770115-3.923372 15.693486-3.923372l11.770115-11.770115c3.923372-3.923372 7.846743-7.846743 7.846744-15.693486 3.923372-3.923372 3.923372-11.770115 7.846743-15.693487 11.770115-19.616858 15.693487-23.54023 19.616858-23.54023" fill="#F5BD0C" p-id="9483"></path><path d="M221.670498 698.360153c3.923372-3.923372 11.770115-3.923372 15.693487 0 7.846743 0 11.770115 3.923372 15.693486 7.846744 7.846743 7.846743 15.693487 15.693487 23.54023 27.463601 15.693487 23.54023 31.386973 43.157088 47.08046 66.697318 11.770115 19.616858 23.54023 39.233716 35.310345 54.927203 7.846743 11.770115 19.616858 23.54023 27.463601 35.310345 7.846743 11.770115 15.693487 23.54023 19.616859 39.233716 3.923372 19.616858 3.923372 39.233716-3.923372 54.927204-7.846743 11.770115-15.693487 23.54023-27.463602 27.463601-11.770115 7.846743-23.54023 11.770115-39.233716 11.770115-19.616858-3.923372-39.233716-7.846743-58.850575-19.616858-39.233716-15.693487-82.390805-19.616858-125.547893-31.386973-11.770115-3.923372-23.54023-7.846743-39.233716-11.770115-3.923372 0-11.770115-3.923372-15.693487-3.923372-3.923372-3.923372-11.770115-7.846743-11.770115-11.770115-3.923372-3.923372-3.923372-7.846743-3.923371-11.770115 0-3.923372 0-7.846743 3.923371-11.770115l11.770115-23.54023c3.923372-15.693487 7.846743-27.463602 3.923372-43.157088 0-15.693487-3.923372-27.463602-3.923372-43.157088v-19.616858c0-11.770115 11.770115-23.54023 23.54023-23.54023h39.233717c7.846743 0 11.770115-3.923372 15.693486-3.923372l11.770115-11.770115c3.923372-3.923372 7.846743-7.846743 7.846744-15.693486 3.923372-3.923372 3.923372-11.770115 7.846743-15.693487 11.770115-19.616858 15.693487-23.54023 19.616858-23.54023" fill="#F5BD0C" p-id="9484"></path><path d="M233.440613 706.206897h15.693487c3.923372 0 11.770115 3.923372 15.693486 7.846743 7.846743 7.846743 15.693487 15.693487 19.616858 23.54023 11.770115 23.54023 27.463602 43.157088 39.233717 66.697318 7.846743 15.693487 19.616858 35.310345 31.386973 51.003831 7.846743 11.770115 15.693487 19.616858 23.54023 31.386973 7.846743 11.770115 15.693487 23.54023 19.616858 35.310345 3.923372 15.693487 3.923372 35.310345-3.923371 47.08046-3.923372 11.770115-15.693487 19.616858-23.54023 27.463601-11.770115 7.846743-23.54023 7.846743-35.310345 7.846744-19.616858-3.923372-39.233716-7.846743-54.927203-15.693487-35.310345-11.770115-70.62069-15.693487-105.931035-23.54023-11.770115-3.923372-23.54023-7.846743-39.233716-11.770115-3.923372 0-11.770115-3.923372-15.693487-3.923371-3.923372-3.923372-11.770115-7.846743-11.770115-11.770115-3.923372-3.923372-3.923372-7.846743-3.923371-11.770115 0-3.923372 0-7.846743 3.923371-11.770115l11.770115-23.54023c3.923372-11.770115 3.923372-27.463602 3.923372-39.233716 0-11.770115-3.923372-27.463602-3.923372-39.233717v-15.693487c0-3.923372 3.923372-11.770115 7.846744-15.693486 3.923372-3.923372 11.770115-7.846743 15.693486-7.846743h39.233717c7.846743 0 11.770115-3.923372 19.616858-3.923372l11.770115-11.770115c3.923372-3.923372 3.923372-11.770115 7.846743-15.693487 0-3.923372 3.923372-11.770115 7.846743-15.693486-7.846743-11.770115-3.923372-15.693487 3.923372-19.616858" fill="#F5BD0C" p-id="9485"></path></svg>'

        },
        init() {
            if (typeof (WebSocket) === "undefined") {
                alert("您的浏览器不支持socket")
            } else {
                // 实例化socket
                this.socket = new WebSocket(this.path)
                // 监听socket连接
                this.socket.onopen = this.open
                // 监听socket错误信息
                this.socket.onerror = this.err
                // 监听socket消息
                this.socket.onmessage = this.getMessage
            }
        },
        open() {
            ElNotification({
                message: "实时通道已建立,等待连接",
                type: "success",
            });
            this.send()
        },
        err() {
            ElNotification({
                title: "错误",
                message: "连接发生错误",
                type: "error",
            });
        },
        getMessage(msg) {
            this.servers = JSON.parse(msg.data)
            this.error = true
            this.loading = false
            console.log(JSON.parse(msg.data))
        },
        send() {
        },
        close() {
            console.log("socket已经关闭")
        },
        onClose() {
            ElNotification({
                message: "通道已关闭",
                type: "info",
            });
            this.socket.close()
        }
    },
    beforeUnmount() {
        this.onClose()
    }
}
</script>


<style scoped lang="scss">
.web_bg {
    background: #f4f4f4;
    position: fixed;
    z-index: -999;
    width: 100%;
    height: 100%;
    top: 0px;
}

.github {
    display: flex;
    align-items: center;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    position: relative;
    margin-top: 20px;
    margin-bottom: 60px;
}

.rep {
    position: relative;
    width: 400px;
    min-height: 240px;
    margin: 10px;
    border-radius: 10px;
    overflow: hidden;
    background-color: rgb(186 233 251 / 10%);
    transition: all .2s ease;
    /* 添加一个好看的阴影 */
    box-shadow: 0 0 10px rgba(0, 0, 0, .2);
}
.stream{
    margin-right: 3px;
    &:last-of-type{
    margin-left: 5px;
}
}
.info {
    padding: 10px;
}

.info div h2 {
    font-weight: initial;
}

.info p {
    margin-bottom: 10px;
}

.allinfo {
    position: absolute;
    top: 10px;
    right: 15px;
}

.progress {
    margin-bottom: 10px;
}

.name {
    float: left;
    margin-right: 10px;

    i {
        width: 12px;
        // vertical-align: middle;
    }
}

.server {
    margin-top: 10px;
}

:deep(.el-progress-bar__inner) {
    max-width: 100%;
}

:deep(.el-progress-bar__outer) {
    background-color: #9f9f9f99;
}

@media (max-width: 847px) {
    .rep {
        width: 90%;
    }
}

@media (min-width: 847px) {
    .container {
        width: 840px;
        margin: 0 auto;
    }
    .github {
        justify-content: left;
    }
}

@media (min-width: 1300px) {
    .container {
        width: 1260px;
        margin: 0 auto;
    }

    .github {
        justify-content: left;
    }
}
</style>