新增延迟测试，允许测试指定服务器之间或指定服务器到自定义公网ip的延迟

src/views/site-manage/index.vue

@@ -7,6 +7,8 @@ import axios from "axios";
 import {ElMessage, ElMessageBox} from "element-plus";
 import qs from "qs";
 import Util from "../../Util/index.js";
+import { Chart, registerables } from 'chart.js';
+Chart.register(...registerables);
 
 let router = useRouter()
 let currentSiteId = ref()
@@ -16,9 +18,23 @@ let reverseProxyPrefix = ref('')
 let size = ref(0)
 let sizeUnit = ref("GB")
 let storagePath = ref("")
+let targetIp = ref("")
+let targetId = ref(0)
+let isDelayTesting = ref(false)
+let isDelayTested = ref(false)
+let delayTestResult = ref("")
+let delayChartData = ref()
 let sites = computed(() => {
   return store.getters.getSites
 })
+let otherSites = computed(() => {
+  let s = []
+  sites.value.forEach((site) => {
+    if(site.id !== currentSiteId.value)
+      s.push(site)
+  })
+  return s;
+})
 let currentSite = computed(() => {
   let s
   sites.value.forEach((site) => {
@@ -109,6 +125,53 @@ function unpair(){
           ElMessage.error(res.data.data)
       })
 }
+function getSite(siteId){
+  let site
+  sites.value.forEach((s) => {
+    if(s.id === siteId)
+      site = s
+  })
+  return site
+}
+function delayTestById(){
+  delayTestByIp(getSite(targetId.value).ip)
+}
+function delayTestByIp(ip){
+  isDelayTested.value = true
+  isDelayTesting.value = true
+  axios.post(store.state.config.host + "manage/site/delayTest?" + qs.stringify({source:currentSiteId.value, targetIp:ip}))
+      .then((res) => {
+        isDelayTesting.value = false
+        if(res.data.result === 'success') {
+          delayChartData.value = {
+            labels: ["1", "2", "3", "4", "5", "平均"],
+            datasets: [{
+              label: "延迟测试结果",
+              data: JSON.parse(res.data.data),
+              fill: false,
+              borderColor: "rgb(75, 192, 192)",
+              lineTension: 0.1
+            }]
+          };
+          let ctx = document.getElementById('delayTestChart').getContext('2d');
+          console.log(window.delayTestChartInstance)
+          if(window.delayTestChartInstance !== undefined)
+            window.delayTestChartInstance.destroy()
+
+          window.delayTestChartInstance = new Chart(ctx, {
+            type: 'line',
+            data: delayChartData.value,
+            option: {
+              responsive: false,
+              maintainAspectRatio: false,
+            }
+          })
+        } else {
+          isDelayTested.value = false
+          ElMessage.error(res.data.data)
+        }
+      })
+}
 
 watch(router.currentRoute , (value, oldValue)=>{
   if(value.path !== oldValue.path && value.path.startsWith('/index/siteManage/')) {
@@ -215,19 +278,73 @@ onMounted(() => {
         </el-input>
       </el-col>
     </el-row>
-
     <el-row>
       <el-col :span="8">
-
+        指定服务器延迟测试:
       </el-col>
+      <el-col :span="8">
+        <el-select v-model="targetId">
+          <el-option v-for="site in otherSites" :value="site.id" :label="site.hostname"/>
+        </el-select>
+      </el-col>
+      <el-col :span="4">
+        <el-button @click="delayTestById" :disabled="isDelayTested">开始测试</el-button>
+      </el-col>
+    </el-row>
+    <el-row>
+      <el-col :span="8">
+        自定义ip延迟测试:
+      </el-col>
+      <el-col :span="8">
+        <el-input v-model="targetIp">
+          <template #prepend>
+            自定义ip地址
+          </template>
+        </el-input>
+      </el-col>
+      <el-col :span="4">
+        <el-button @click="() => {targetId=0; delayTestByIp(targetIp)}" :disabled="isDelayTested">开始测试</el-button>
+      </el-col>
+    </el-row>
+
+    <el-row>
+      <el-col :span="8"/>
       <el-col :span="5">
         <el-button type="danger" v-if="currentSiteId !== 1" @click="unpair">删除服务器</el-button>
         <el-button type="primary" @click="submit">提交修改</el-button>
       </el-col>
     </el-row>
   </div>
+
+  <el-dialog title="延迟测试" v-model="isDelayTested" @close="() => {isDelayTested = false;}"
+             width="600px" style="height: 400px">
+    源服务器:{{currentSite.hostname}} ==>
+    <span v-if="targetId === 0">目的ip地址:{{targetIp}}</span>
+    <span v-if="targetId !== 0">目的服务器:{{getSite(targetId).hostname}}</span>
+    <canvas v-show="!isDelayTesting" id="delayTestChart"/>
+    <div class="loader" v-show="isDelayTesting"/>
+    {{delayTestResult}}
+  </el-dialog>
 </template>
 
 <style scoped>
 
+  /* 创建一个加载图标的容器 */
+  .loader {
+    border: 8px solid #f3f3f3; /* 边框颜色 */
+    border-top: 8px solid #3498db; /* 顶部边框颜色，即动画部分 */
+    border-radius: 50%; /* 边框圆角 */
+    width: 50px; /* 宽度 */
+    height: 50px; /* 高度 */
+    animation: spin 1s linear infinite; /* 旋转动画 */
+    /* 居中 */
+    /* 距离上方的距离 */
+    margin: 50px auto auto;
+  }
+
+  /* 旋转动画 */
+  @keyframes spin {
+    0% { transform: rotate(0deg); }
+    100% { transform: rotate(360deg); }
+  }
 </style>