<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"
|
:preview-src-list="[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 => {
|
if (res.data.img) {
|
res.data.img = this.$img + res.data.img
|
}
|
this.result = res.data
|
this.loading = false
|
})
|
}
|
}
|
}
|
</script>
|
|
<style scoped>
|
.row {
|
display: flex;
|
flex-direction: row;
|
align-items: center;
|
}
|
.app-container {
|
color: #5b5b5b;
|
}
|
</style>
|
