监测工具

xiangpei

2024-09-30 5ea910a9712f1409ecee60ee9fff3c95a97dd8dc

监测工具

 src/api/platform/online-util.js

New file
@@ -0,0 +1,10 @@
import request from '@/utils/request'

//
export function check(query) {
  return request({
    url: '/system/util/online',
    method: 'get',
    params: query
  })
}

 src/views/tool/online/index.vue

New file
@@ -0,0 +1,118 @@
<template>
  <div class="app-container">
    <el-tabs v-model="active" @tab-click="changeActive">
      <el-tab-pane label="在线检测" name="1">
        <el-form :model="form" :inline="true">
          <el-form-item label="国标码：">
            <el-input v-model="form.serialNumber"/>
          </el-form-item>
          <el-form-item>
            <el-button @click="check" type="primary">检测</el-button>
          </el-form-item>
        </el-form>
        <div v-loading="loading" v-if="result.status">
          <div class="row">
            <div>检测结果：</div>
            <div>{{ result.status }}</div>
          </div>
          <div style="margin-top: 100px">
            <div v-if="result.img">
              <div>图片：</div>
              <div>
                <el-image
                  style="width: 100px; height: 100px"
                  :src="result.img"
                  fit="fill">
                </el-image>
              </div>
            </div>
            <div v-else>
              <div>取图失败</div>
            </div>
          </div>

        </div>
      </el-tab-pane>
      <el-tab-pane label="ping" name="2">
        <el-form :model="form" :inline="true">
          <el-form-item label="ip：">
            <el-input v-model="form.ip"/>
          </el-form-item>
          <el-form-item>
            <el-button @click="check" type="primary">检测</el-button>
          </el-form-item>
        </el-form>
        <div v-if="result.status" v-loading="loading"  class="row">
          <div>检测结果：</div>
          <div>{{ result.status }}</div>
        </div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import {check} from "@/api/platform/online-util";

export default {
  name: "index",
  data() {
    return {
      loading: false,
      active: '1',
      form: {
        serialNumber: '',
        ip: '',
        type: '1',
      },
      result: {
        status: '',
        img: '',
      },
    }
  },
  methods: {
    changeActive(tab) {
      this.result = {
        status: '',
        img: '',
      },
      this.form.type = tab.name
      if (this.form.type === '1') {
        this.form.ip = ''
      }
      if (this.form.type === '2') {
        this.form.serialNumber = ''
      }
    },
    check() {
      if (this.form.type === '1' && !this.form.serialNumber) {
        this.$message.error("请填写正确的国标码")
        return
      }
      if (this.form.type === '2' && !this.form.ip) {
        this.$message.error("请填写正确的ip")
        return
      }
      this.form.serialNumber = this.form.serialNumber.replace(/^\s+|\s+$/g, '')
      this.form.ip = this.form.ip.replace(/^\s+|\s+$/g, '')
      this.loading = true
      check(this.form).then(res => {
        this.result = res.data
        this.loading = false
      })
    }
  }
}
</script>

<style scoped>
.row {
  display: flex;
  flex-direction: row;
  align-items: center;
}
.app-container {
  color: #5b5b5b;
}
</style>