feat: update
This commit is contained in:
EleanorMao
parent
f44f850c55
commit
dfb53f12ef
|
|
@ -8,6 +8,7 @@
|
|||
"lint": "vue-cli-service lint"
|
||||
},
|
||||
"dependencies": {
|
||||
"axios": "^0.27.2",
|
||||
"core-js": "^3.8.3",
|
||||
"element-plus": "^2.2.16",
|
||||
"element-ui": "^2.15.10",
|
||||
|
|
|
|||
|
|
@ -1,54 +1,123 @@
|
|||
<template>
|
||||
<div class="main-page">
|
||||
<div class="header">【物体检测】 209684 EasyEdge 0368V2</div>
|
||||
<div class="body">
|
||||
<div class="view" ref="view">
|
||||
<img :src="img" alt="" ref="img">
|
||||
<span class="pin-mark" v-for="(style, index) in locationData" :key="index" :style="style"></span>
|
||||
</div>
|
||||
<div class="information">
|
||||
<el-row :gutter="8">
|
||||
<el-col :span="8">调整阈值</el-col>
|
||||
<el-col :span="16">
|
||||
<el-slider v-model="threshold" show-tooltip :max="1" :step="0.01" />
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="8">
|
||||
<el-col :span="8">pin</el-col>
|
||||
<el-col :span="16">0.920</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="8">
|
||||
<el-col :span="8">label</el-col>
|
||||
<el-col :span="16">置信度</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
<div class="actions">
|
||||
<el-button type="primary" size="large" v-loading.fullscreen.lock="fullscreenLoading" @click="getPinData">引脚
|
||||
</el-button>
|
||||
<el-button type="primary" plain size="large" v-loading.fullscreen.lock="fullscreenLoading"
|
||||
@click="getScratchData">划痕
|
||||
</el-button>
|
||||
</div>
|
||||
<div class="footer">
|
||||
<div class="description">
|
||||
多模型服务管理、实时视频流预测、本地事件记录等更多本地功能，请下载<em>EasyEdge智能边缘控制台</em>体验
|
||||
<div class="body">
|
||||
<el-empty v-if="!viewPin && !viewScratch" :description="emptyDescription" />
|
||||
<div class="pin-view" v-else>
|
||||
<div class="view" ref="view">
|
||||
<img :src="imgUrl" v-if="imgUrl" alt="" ref="img">
|
||||
<span class="pin-mark" v-for="(style, index) in locationData" :key="index" :style="style"></span>
|
||||
</div>
|
||||
<div class="information">
|
||||
<div :class="{'result':true, pass: result === 'PASS', ng: result!=='PASS'}">{{ result }}</div>
|
||||
<div class="table" v-if="viewPin">
|
||||
<el-row :gutter="8">
|
||||
<el-col :span="8">调整阈值</el-col>
|
||||
<el-col :span="16">
|
||||
<el-slider v-model="confidence" show-tooltip :max="1" :step="0.01" />
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="8">
|
||||
<el-col :span="8">pin</el-col>
|
||||
<el-col :span="16">0.920</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="8">
|
||||
<el-col :span="8">label</el-col>
|
||||
<el-col :span="16">置信度</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<el-button type="primary" size="large">立即下载</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import axios from 'axios'
|
||||
import Img from '../assets/img.png'
|
||||
import originalImgData from './data'
|
||||
import { ElMessage } from 'element-plus'
|
||||
|
||||
export default {
|
||||
name: 'ObjectDetect',
|
||||
data() {
|
||||
return {
|
||||
img: Img,
|
||||
// 全局Loading
|
||||
fullscreenLoading: false,
|
||||
// 查看的页面
|
||||
viewPin: true,
|
||||
viewScratch: false,
|
||||
// empty页面的描述
|
||||
emptyDescription: '点击按钮查看结果',
|
||||
// 图片
|
||||
imgUrl: Img,
|
||||
// 结果，PASS or NG
|
||||
result: 'PASS',
|
||||
// 接口里面返回的针脚数据
|
||||
resLocationData: [],
|
||||
// 我计算过后的针脚数据
|
||||
locationData: [],
|
||||
threshold: 0.75,
|
||||
// 阈值
|
||||
confidence: 0.75,
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.calcLocationData()
|
||||
watch: {
|
||||
confidence() {
|
||||
this.calcLocationData()
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
resetData() {
|
||||
this.confidence = 0.75
|
||||
this.locationData = []
|
||||
this.resLocationData = []
|
||||
this.imgUrl = ''
|
||||
},
|
||||
async getPinData() {
|
||||
this.resetData()
|
||||
this.fullscreenLoading = true
|
||||
try {
|
||||
const response = await axios({
|
||||
method: 'get',
|
||||
url: '/pin?id=123',
|
||||
})
|
||||
this.imgUrl = response.data.image_url
|
||||
this.resLocationData = response.data.data
|
||||
this.calcLocationData()
|
||||
this.viewPin = true
|
||||
this.viewScratch = false
|
||||
} catch (e) {
|
||||
ElMessage.error('接口错误')
|
||||
this.emptyDescription = '啊哦，查询失败'
|
||||
} finally {
|
||||
this.fullscreenLoading = false
|
||||
}
|
||||
},
|
||||
async getScratchData() {
|
||||
this.resetData()
|
||||
this.fullscreenLoading = true
|
||||
try {
|
||||
const response = await axios({
|
||||
method: 'get',
|
||||
url: '/scratch?id=123',
|
||||
})
|
||||
this.imgUrl = response.data.image_url
|
||||
this.result = response.data.result
|
||||
this.viewPin = false
|
||||
this.viewScratch = true
|
||||
} catch (e) {
|
||||
ElMessage.error('接口错误')
|
||||
this.emptyDescription = '啊哦，查询失败'
|
||||
} finally {
|
||||
this.fullscreenLoading = false
|
||||
}
|
||||
},
|
||||
getScalingRatioAndOffset() {
|
||||
return new Promise((resolve) => {
|
||||
const image = new Image()
|
||||
|
|
@ -71,14 +140,17 @@ export default {
|
|||
},
|
||||
async calcLocationData() {
|
||||
const { ratio, offset } = await this.getScalingRatioAndOffset()
|
||||
this.locationData = originalImgData.map(({ location }) => {
|
||||
return {
|
||||
height: location.height * ratio.height + 'px',
|
||||
width: location.width * ratio.width + 'px',
|
||||
top: location.top * ratio.height + 'px',
|
||||
left: (offset.left + location.left * ratio.width) + 'px'
|
||||
}
|
||||
})
|
||||
this.locationData = this.resLocationData
|
||||
.filter(({ confidence }) => confidence <= this.confidence)
|
||||
.map(({ location }) => {
|
||||
return {
|
||||
height: location.height * ratio.height + 'px',
|
||||
width: location.width * ratio.width + 'px',
|
||||
top: location.top * ratio.height + 'px',
|
||||
left: (offset.left + location.left * ratio.width) + 'px'
|
||||
}
|
||||
})
|
||||
this.result = this.locationData.length < 48 ? 'NG' : 'PASS'
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -92,17 +164,26 @@ export default {
|
|||
}
|
||||
|
||||
.header {
|
||||
font-size: 16px;
|
||||
font-size: 20px;
|
||||
font-weight: 500;
|
||||
line-height: 2.5;
|
||||
border-bottom: 1px solid #DCDFE6;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.actions {
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.body {
|
||||
margin-bottom: 25px;
|
||||
display: flex;
|
||||
height: 500px;
|
||||
}
|
||||
|
||||
.pin-view {
|
||||
display: flex;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.view {
|
||||
width: 784px;
|
||||
background: #e9eef3;
|
||||
|
|
@ -124,31 +205,37 @@ export default {
|
|||
}
|
||||
|
||||
.information {
|
||||
width: 400px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.information .result {
|
||||
padding: 24px;
|
||||
font-size: 24px;
|
||||
font-weight: 500;
|
||||
background: #e9eef3;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.result.pass {
|
||||
color: #67c23a;
|
||||
background: #f0f9eb;
|
||||
}
|
||||
|
||||
.result.ng {
|
||||
color: #f56c6c;
|
||||
background: #fef0f0;
|
||||
}
|
||||
|
||||
.information .table {
|
||||
flex: 1;
|
||||
background: #e9eef3;
|
||||
padding: 24px;
|
||||
width: 400px;
|
||||
margin-top: 16px;
|
||||
}
|
||||
|
||||
.information >>> .el-row {
|
||||
.table >>> .el-row {
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.footer {
|
||||
display: flex;
|
||||
padding: 20px 35px;
|
||||
background: #ecf5ff;
|
||||
border: 1px solid #b3d8ff;
|
||||
}
|
||||
|
||||
.description {
|
||||
flex: 1;
|
||||
font-size: 18px;
|
||||
padding-right: 16px;
|
||||
}
|
||||
|
||||
.description em {
|
||||
font-style: normal;
|
||||
font-size: 22px;
|
||||
font-weight: 500;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
38
yarn.lock
38
yarn.lock
|
|
@ -2030,6 +2030,11 @@ async@^2.6.4:
|
|||
dependencies:
|
||||
lodash "^4.17.14"
|
||||
|
||||
asynckit@^0.4.0:
|
||||
version "0.4.0"
|
||||
resolved "https://registry.npmmirror.com/asynckit/-/asynckit-0.4.0.tgz#c79ed97f7f34cb8f2ba1bc9790bcc366474b4b79"
|
||||
integrity sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==
|
||||
|
||||
at-least-node@^1.0.0:
|
||||
version "1.0.0"
|
||||
resolved "https://registry.npmmirror.com/at-least-node/-/at-least-node-1.0.0.tgz#602cd4b46e844ad4effc92a8011a3c46e0238dc2"
|
||||
|
|
@ -2047,6 +2052,14 @@ autoprefixer@^10.2.4:
|
|||
picocolors "^1.0.0"
|
||||
postcss-value-parser "^4.2.0"
|
||||
|
||||
axios@^0.27.2:
|
||||
version "0.27.2"
|
||||
resolved "https://registry.npmmirror.com/axios/-/axios-0.27.2.tgz#207658cc8621606e586c85db4b41a750e756d972"
|
||||
integrity sha512-t+yRIyySRTp/wua5xEr+z1q60QmLq8ABsS5O9Me1AsE5dfKqgnCFzwiCZZ/cGNd1lq4/7akDWMxdhVlucjmnOQ==
|
||||
dependencies:
|
||||
follow-redirects "^1.14.9"
|
||||
form-data "^4.0.0"
|
||||
|
||||
babel-helper-vue-jsx-merge-props@^2.0.0:
|
||||
version "2.0.3"
|
||||
resolved "https://registry.npmmirror.com/babel-helper-vue-jsx-merge-props/-/babel-helper-vue-jsx-merge-props-2.0.3.tgz#22aebd3b33902328e513293a8e4992b384f9f1b6"
|
||||
|
|
@ -2426,6 +2439,13 @@ colorette@^2.0.10:
|
|||
resolved "https://registry.npmmirror.com/colorette/-/colorette-2.0.19.tgz#cdf044f47ad41a0f4b56b3a0d5b4e6e1a2d5a798"
|
||||
integrity sha512-3tlv/dIP7FWvj3BsbHrGLJ6l/oKh1O3TcgBqMn+yyCagOxc23fyzDS6HypQbgxWbkpDnf52p1LuR4eWDQ/K9WQ==
|
||||
|
||||
combined-stream@^1.0.8:
|
||||
version "1.0.8"
|
||||
resolved "https://registry.npmmirror.com/combined-stream/-/combined-stream-1.0.8.tgz#c3d45a8b34fd730631a110a8a2520682b31d5a7f"
|
||||
integrity sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==
|
||||
dependencies:
|
||||
delayed-stream "~1.0.0"
|
||||
|
||||
commander@^2.20.0:
|
||||
version "2.20.3"
|
||||
resolved "https://registry.npmmirror.com/commander/-/commander-2.20.3.tgz#fd485e84c03eb4881c20722ba48035e8531aeb33"
|
||||
|
|
@ -2770,6 +2790,11 @@ define-properties@^1.1.4:
|
|||
has-property-descriptors "^1.0.0"
|
||||
object-keys "^1.1.1"
|
||||
|
||||
delayed-stream@~1.0.0:
|
||||
version "1.0.0"
|
||||
resolved "https://registry.npmmirror.com/delayed-stream/-/delayed-stream-1.0.0.tgz#df3ae199acadfb7d440aaae0b29e2272b24ec619"
|
||||
integrity sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==
|
||||
|
||||
depd@2.0.0:
|
||||
version "2.0.0"
|
||||
resolved "https://registry.npmmirror.com/depd/-/depd-2.0.0.tgz#b696163cc757560d09cf22cc8fad1571b79e76df"
|
||||
|
|
@ -3378,11 +3403,20 @@ flatted@^3.1.0:
|
|||
resolved "https://registry.npmmirror.com/flatted/-/flatted-3.2.7.tgz#609f39207cb614b89d0765b477cb2d437fbf9787"
|
||||
integrity sha512-5nqDSxl8nn5BSNxyR3n4I6eDmbolI6WT+QqR547RwxQapgjQBmtktdP+HTBb/a/zLsbzERTONyUB5pefh5TtjQ==
|
||||
|
||||
follow-redirects@^1.0.0:
|
||||
follow-redirects@^1.0.0, follow-redirects@^1.14.9:
|
||||
version "1.15.2"
|
||||
resolved "https://registry.npmmirror.com/follow-redirects/-/follow-redirects-1.15.2.tgz#b460864144ba63f2681096f274c4e57026da2c13"
|
||||
integrity sha512-VQLG33o04KaQ8uYi2tVNbdrWp1QWxNNea+nmIB4EVM28v0hmP17z7aG1+wAkNzVq4KeXTq3221ye5qTJP91JwA==
|
||||
|
||||
form-data@^4.0.0:
|
||||
version "4.0.0"
|
||||
resolved "https://registry.npmmirror.com/form-data/-/form-data-4.0.0.tgz#93919daeaf361ee529584b9b31664dc12c9fa452"
|
||||
integrity sha512-ETEklSGi5t0QMZuiXoA/Q6vcnxcLQP5vdugSpuAyi6SVGi2clPPp+xgEhuMaHC+zGgn31Kd235W35f7Hykkaww==
|
||||
dependencies:
|
||||
asynckit "^0.4.0"
|
||||
combined-stream "^1.0.8"
|
||||
mime-types "^2.1.12"
|
||||
|
||||
forwarded@0.2.0:
|
||||
version "0.2.0"
|
||||
resolved "https://registry.npmmirror.com/forwarded/-/forwarded-0.2.0.tgz#2269936428aad4c15c7ebe9779a84bf0b2a81811"
|
||||
|
|
@ -4248,7 +4282,7 @@ mime-db@1.52.0, "mime-db@>= 1.43.0 < 2":
|
|||
resolved "https://registry.npmmirror.com/mime-db/-/mime-db-1.52.0.tgz#bbabcdc02859f4987301c856e3387ce5ec43bf70"
|
||||
integrity sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==
|
||||
|
||||
mime-types@^2.1.27, mime-types@^2.1.31, mime-types@~2.1.17, mime-types@~2.1.24, mime-types@~2.1.34:
|
||||
mime-types@^2.1.12, mime-types@^2.1.27, mime-types@^2.1.31, mime-types@~2.1.17, mime-types@~2.1.24, mime-types@~2.1.34:
|
||||
version "2.1.35"
|
||||
resolved "https://registry.npmmirror.com/mime-types/-/mime-types-2.1.35.tgz#381a871b62a734450660ae3deee44813f70d959a"
|
||||
integrity sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==
|
||||
|
|
|
|||
Loading…
Reference in New Issue