feat: update

package.json

@@ -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",

src/components/ObjectDetect.vue

@@ -1,54 +1,123 @@
 <template>
 	<div class="main-page">
 		<div class="header">【物体检测】 209684 EasyEdge 0368V2</div>
-		<div class="body">
+		<div class="actions">
-			<div class="view" ref="view">
+			<el-button type="primary" size="large" v-loading.fullscreen.lock="fullscreenLoading" @click="getPinData">引脚
-				<img :src="img" alt="" ref="img">
+			</el-button>
-				<span class="pin-mark" v-for="(style, index) in locationData" :key="index" :style="style"></span>
+			<el-button type="primary" plain size="large" v-loading.fullscreen.lock="fullscreenLoading"
-			</div>
+					@click="getScratchData">划痕
-			<div class="information">
+			</el-button>
-				<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>
-		<div class="footer">
+		<div class="body">
-			<div class="description">
+			<el-empty v-if="!viewPin && !viewScratch" :description="emptyDescription" />
-				多模型服务管理、实时视频流预测、本地事件记录等更多本地功能，请下载<em>EasyEdge智能边缘控制台</em>体验
+			<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() {
+	watch: {
-		this.calcLocationData()
+		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 }) => {
+			this.locationData = this.resLocationData
-				return {
+					.filter(({ confidence }) => confidence <= this.confidence)
-					height: location.height * ratio.height + 'px',
+					.map(({ location }) => {
-					width: location.width * ratio.width + 'px',
+						return {
-					top: location.top * ratio.height + 'px',
+							height: location.height * ratio.height + 'px',
-					left: (offset.left + location.left * ratio.width) + '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>

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==