feat: first

2022-09-15 19:43:40 +08:00
parent 218bf56edb
commit 74a0c209f6
8 changed files with 314 additions and 72 deletions
--- a/package.json
+++ b/package.json
@ -9,6 +9,7 @@
  },
  "dependencies": {
    "core-js": "^3.8.3",
+    "element-ui": "^2.15.10",
    "vue": "^3.2.13"
  },
  "devDependencies": {
--- a/src/App.vue
+++ b/src/App.vue
@ -1,15 +1,14 @@
 <template>
-  <img alt="Vue logo" src="./assets/logo.png">
-  <HelloWorld msg="Welcome to Your Vue.js App"/>
+	<ObjectDetect />
 </template>

 <script>
-import HelloWorld from './components/HelloWorld.vue'
+import ObjectDetect from './components/ObjectDetect.vue'

 export default {
 	name: 'App',
 	components: {
-    HelloWorld
+		ObjectDetect
 	}
 }
 </script>
@ -19,7 +18,6 @@ export default {
 	font-family: Avenir, Helvetica, Arial, sans-serif;
 	-webkit-font-smoothing: antialiased;
 	-moz-osx-font-smoothing: grayscale;
-  text-align: center;
 	color: #2c3e50;
 	margin-top: 60px;
 }
--- a/src/assets/img.png
+++ b/src/assets/img.png
--- a/src/assets/logo.png
+++ b/src/assets/logo.png
--- a/src/components/HelloWorld.vue
+++ b/src/components/HelloWorld.vue
@ -1,58 +0,0 @@
-<template>
-  <div class="hello">
-    <h1>{{ msg }}</h1>
-    <p>
-      For a guide and recipes on how to configure / customize this project,<br>
-      check out the
-      <a href="https://cli.vuejs.org" target="_blank" rel="noopener">vue-cli documentation</a>.
-    </p>
-    <h3>Installed CLI Plugins</h3>
-    <ul>
-      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel" target="_blank" rel="noopener">babel</a></li>
-      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-eslint" target="_blank" rel="noopener">eslint</a></li>
-    </ul>
-    <h3>Essential Links</h3>
-    <ul>
-      <li><a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a></li>
-      <li><a href="https://forum.vuejs.org" target="_blank" rel="noopener">Forum</a></li>
-      <li><a href="https://chat.vuejs.org" target="_blank" rel="noopener">Community Chat</a></li>
-      <li><a href="https://twitter.com/vuejs" target="_blank" rel="noopener">Twitter</a></li>
-      <li><a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a></li>
-    </ul>
-    <h3>Ecosystem</h3>
-    <ul>
-      <li><a href="https://router.vuejs.org" target="_blank" rel="noopener">vue-router</a></li>
-      <li><a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuex</a></li>
-      <li><a href="https://github.com/vuejs/vue-devtools#vue-devtools" target="_blank" rel="noopener">vue-devtools</a></li>
-      <li><a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener">vue-loader</a></li>
-      <li><a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">awesome-vue</a></li>
-    </ul>
-  </div>
-</template>
-
-<script>
-export default {
-  name: 'HelloWorld',
-  props: {
-    msg: String
-  }
-}
-</script>
-
-<!-- Add "scoped" attribute to limit CSS to this component only -->
-<style scoped>
-h3 {
-  margin: 40px 0 0;
-}
-ul {
-  list-style-type: none;
-  padding: 0;
-}
-li {
-  display: inline-block;
-  margin: 0 10px;
-}
-a {
-  color: #42b983;
-}
-</style>
--- a/src/components/ObjectDetect.vue
+++ b/src/components/ObjectDetect.vue
@ -0,0 +1,159 @@
+<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"></div>
+		</div>
+		<div class="footer">
+			<div class="description">
+				多模型服务管理、实时视频流预测、本地事件记录等更多本地功能，请下载<em>EasyEdge智能边缘控制台</em>体验
+			</div>
+			<button type="button">立即下载</button>
+		</div>
+	</div>
+</template>
+
+<script>
+import Img from '../assets/img.png'
+import originalImgData from './data'
+
+export default {
+	name: 'ObjectDetect',
+	data() {
+		return {
+			img: Img,
+			locationData: []
+		}
+	},
+	mounted() {
+		this.calcLocationData()
+	},
+	methods: {
+		getScalingRatioAndOffset() {
+			return new Promise((resolve) => {
+				const image = new Image()
+				image.onload = () => {
+					const imgDom = this.$refs.img
+					const renderHeight = imgDom.height
+					const renderWidth = imgDom.width
+					resolve({
+						offset: {
+							left: imgDom.offsetLeft
+						},
+						ratio: {
+							height: +(renderHeight / image.height).toFixed(5),
+							width: +(renderWidth / image.width).toFixed(5)
+						}
+					})
+				}
+				image.src = Img
+			})
+		},
+		async calcLocationData() {
+			const { ratio, offset } = await this.getScalingRatioAndOffset()
+			console.log(ratio, offset)
+			this.locationData = originalImgData.map(({ location }) => {
+				console.log(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'
+				}
+			})
+		}
+	}
+}
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style scoped>
+.main-page {
+	width: 1200px;
+	margin: auto;
+}
+
+.header {
+	font-size: 16px;
+	font-weight: 500;
+	line-height: 2.5;
+}
+
+.body {
+	margin-bottom: 25px;
+	display: flex;
+	height: 500px;
+}
+
+.view {
+	width: 784px;
+	background: #e9eef3;
+	margin-right: 16px;
+	position: relative;
+	text-align: center;
+}
+
+.view img {
+	height: 100%;
+	width: auto;
+}
+
+.pin-mark {
+	position: absolute;
+	border: 1px solid #409EFF;
+	background: rgb(179, 216, 255);
+	opacity: 0.5;
+}
+
+.information {
+	background: #e9eef3;
+	width: 400px;
+}
+
+.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;
+}
+
+.footer button {
+	color: #409eff;
+	background: #ecf5ff;
+	border: 1px solid #409eff;
+	display: inline-block;
+	line-height: 1;
+	white-space: nowrap;
+	cursor: pointer;
+	-webkit-appearance: none;
+	text-align: center;
+	box-sizing: border-box;
+	outline: none;
+	margin: 0;
+	transition: .1s;
+	font-weight: 500;
+	-moz-user-select: none;
+	-webkit-user-select: none;
+	-ms-user-select: none;
+	box-shadow: none;
+	padding: 12px 20px;
+	font-size: 18px;
+	width: 120px;
+}
+</style>
--- a/src/components/data.js
+++ b/src/components/data.js
@ -0,0 +1,85 @@
+export default [{
+	"confidence": 0.9197735786437988,
+	"frame": 0,
+	"index": 1,
+	"label": "pin",
+	"location": { "height": 112, "left": 1753, "top": 602, "width": 47 },
+	"modelKind": 2,
+	"name": "pin",
+	"score": 0.9197735786437988,
+	"trackId": 0,
+	"x1": 0.6763395071029663,
+	"x2": 0.6948410868644714,
+	"y1": 0.3101305067539215,
+	"y2": 0.3682047426700592
+}, {
+	"confidence": 0.6852719783782959,
+	"frame": 0,
+	"index": 1,
+	"label": "pin",
+	"location": { "height": 117, "left": 1665, "top": 560, "width": 44 },
+	"modelKind": 2,
+	"name": "pin",
+	"score": 0.6852719783782959,
+	"trackId": 0,
+	"x1": 0.6424813866615295,
+	"x2": 0.6595688462257385,
+	"y1": 0.2883182466030121,
+	"y2": 0.34880363941192627
+}, {
+	"confidence": 0.6165199875831604,
+	"frame": 0,
+	"index": 1,
+	"label": "pin",
+	"location": { "height": 116, "left": 1399, "top": 1126, "width": 47 },
+	"modelKind": 2,
+	"name": "pin",
+	"score": 0.6165199875831604,
+	"trackId": 0,
+	"x1": 0.5399677157402039,
+	"x2": 0.5583382248878479,
+	"y1": 0.5792420506477356,
+	"y2": 0.6391130089759827
+}, {
+	"confidence": 0.605510950088501,
+	"frame": 0,
+	"index": 1,
+	"label": "pin",
+	"location": { "height": 116, "left": 885, "top": 211, "width": 48 },
+	"modelKind": 2,
+	"name": "pin",
+	"score": 0.605510950088501,
+	"trackId": 0,
+	"x1": 0.34153980016708374,
+	"x2": 0.36037907004356384,
+	"y1": 0.10881335288286209,
+	"y2": 0.16865921020507812
+}, {
+	"confidence": 0.527885377407074,
+	"frame": 0,
+	"index": 1,
+	"label": "pin",
+	"location": { "height": 112, "left": 1486, "top": 485, "width": 50 },
+	"modelKind": 2,
+	"name": "pin",
+	"score": 0.527885377407074,
+	"trackId": 0,
+	"x1": 0.5736223459243774,
+	"x2": 0.5929277539253235,
+	"y1": 0.24997079372406006,
+	"y2": 0.3080940842628479
+}, {
+	"confidence": 0.5274372696876526,
+	"frame": 0,
+	"index": 1,
+	"label": "pin",
+	"location": { "height": 113, "left": 1321, "top": 1090, "width": 46 },
+	"modelKind": 2,
+	"name": "pin",
+	"score": 0.5274372696876526,
+	"trackId": 0,
+	"x1": 0.5100294351577759,
+	"x2": 0.5281452536582947,
+	"y1": 0.5610399842262268,
+	"y2": 0.6194328665733337
+}]
--- a/yarn.lock
+++ b/yarn.lock
@ -1945,6 +1945,13 @@ astral-regex@^2.0.0:
  resolved "https://registry.npmmirror.com/astral-regex/-/astral-regex-2.0.0.tgz#483143c567aeed4785759c0865786dc77d7d2e31"
  integrity sha512-Z7tMw1ytTXt5jqMcOP+OQteU1VuNK9Y02uuJtKQ1Sv69jXQKKg5cibLwGJow8yzZP+eAc18EmLGPal0bp36rvQ==

+async-validator@~1.8.1:
+  version "1.8.5"
+  resolved "https://registry.npmmirror.com/async-validator/-/async-validator-1.8.5.tgz#dc3e08ec1fd0dddb67e60842f02c0cd1cec6d7f0"
+  integrity sha512-tXBM+1m056MAX0E8TL2iCjg8WvSyXu0Zc8LNtYqrVeyoL3+esHRZ4SieE9fKQyyU09uONjnMEjrNBMqT0mbvmA==
+  dependencies:
+    babel-runtime "6.x"
+
 async@^2.6.4:
  version "2.6.4"
  resolved "https://registry.npmmirror.com/async/-/async-2.6.4.tgz#706b7ff6084664cd7eae713f6f965433b5504221"
@ -1969,6 +1976,11 @@ autoprefixer@^10.2.4:
    picocolors "^1.0.0"
    postcss-value-parser "^4.2.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"
+  integrity sha512-gsLiKK7Qrb7zYJNgiXKpXblxbV5ffSwR0f5whkPAaBAR4fhi6bwRZxX9wBlIc5M/v8CCkXUbXZL4N/nSE97cqg==
+
 babel-loader@^8.2.2:
  version "8.2.5"
  resolved "https://registry.npmmirror.com/babel-loader/-/babel-loader-8.2.5.tgz#d45f585e654d5a5d90f5350a779d7647c5ed512e"
@ -2010,6 +2022,14 @@ babel-plugin-polyfill-regenerator@^0.4.0:
  dependencies:
    "@babel/helper-define-polyfill-provider" "^0.3.3"

+babel-runtime@6.x:
+  version "6.26.0"
+  resolved "https://registry.npmmirror.com/babel-runtime/-/babel-runtime-6.26.0.tgz#965c7058668e82b55d7bfe04ff2337bc8b5647fe"
+  integrity sha512-ITKNuq2wKlW1fJg9sSW52eepoYgZBggvOAHC0u/CYu/qxQ9EVzThCgR69BnSXLHjy2f7SY5zaQ4yt7H9ZVxY2g==
+  dependencies:
+    core-js "^2.4.0"
+    regenerator-runtime "^0.11.0"
+
 balanced-match@^1.0.0:
  version "1.0.2"
  resolved "https://registry.npmmirror.com/balanced-match/-/balanced-match-1.0.2.tgz#e83e3a7e3f300b34cb9d87f615fa0cbf357690ee"
@ -2440,6 +2460,11 @@ core-js-compat@^3.21.0, core-js-compat@^3.22.1, core-js-compat@^3.8.3:
  dependencies:
    browserslist "^4.21.3"

+core-js@^2.4.0:
+  version "2.6.12"
+  resolved "https://registry.npmmirror.com/core-js/-/core-js-2.6.12.tgz#d9333dfa7b065e347cc5682219d6f690859cc2ec"
+  integrity sha512-Kb2wC0fvsWfQrgk8HU5lW6U/Lcs8+9aaYcy4ZFc6DDlo4nZ7n70dEgE5rtR0oG6ufKDUnrwfWL1mXR5ljDatrQ==
+
 core-js@^3.8.3:
  version "3.25.1"
  resolved "https://registry.npmmirror.com/core-js/-/core-js-3.25.1.tgz#5818e09de0db8956e16bf10e2a7141e931b7c69c"
@ -2637,7 +2662,7 @@ deep-is@^0.1.3:
  resolved "https://registry.npmmirror.com/deep-is/-/deep-is-0.1.4.tgz#a6f2dce612fadd2ef1f519b73551f17e85199831"
  integrity sha512-oIPzksmTg4/MriiaYGO+okXDT7ztn/w3Eptv/+gSIdMdKsJo0u4CfYNFJPy+4SKMuCqGw2wxnA+URMg3t8a/bQ==

-deepmerge@^1.5.2:
+deepmerge@^1.2.0, deepmerge@^1.5.2:
  version "1.5.2"
  resolved "https://registry.npmmirror.com/deepmerge/-/deepmerge-1.5.2.tgz#10499d868844cdad4fee0842df8c7f6f0c95a753"
  integrity sha512-95k0GDqvBjZavkuvzx/YqVLv/6YYa17fz6ILMSf7neqQITCPbnfEnQvEgMPNjH4kgobe7+WIL0yJEHku+H3qtQ==
@ -2790,6 +2815,18 @@ electron-to-chromium@^1.4.202:
  resolved "https://registry.npmmirror.com/electron-to-chromium/-/electron-to-chromium-1.4.249.tgz#49c34336c742ee65453dbddf4c84355e59b96e2c"
  integrity sha512-GMCxR3p2HQvIw47A599crTKYZprqihoBL4lDSAUmr7IYekXFK5t/WgEBrGJDCa2HWIZFQEkGuMqPCi05ceYqPQ==

+element-ui@^2.15.10:
+  version "2.15.10"
+  resolved "https://registry.npmmirror.com/element-ui/-/element-ui-2.15.10.tgz#fde0ff5cb4c30e8eb166d617f85916defe5948f1"
+  integrity sha512-jmD++mU2wKXbisvx4fxOl2mHaU+HWHTAq/3Wf8x9Bwyu4GdDZPLABb+CGi3DWN6fPqdgRcd74aX39DO+YHObLw==
+  dependencies:
+    async-validator "~1.8.1"
+    babel-helper-vue-jsx-merge-props "^2.0.0"
+    deepmerge "^1.2.0"
+    normalize-wheel "^1.0.1"
+    resize-observer-polyfill "^1.5.0"
+    throttle-debounce "^1.0.1"
+
 emoji-regex@^8.0.0:
  version "8.0.0"
  resolved "https://registry.npmmirror.com/emoji-regex/-/emoji-regex-8.0.0.tgz#e818fd69ce5ccfcb404594f842963bf53164cc37"
@ -4281,6 +4318,11 @@ normalize-url@^6.0.1:
  resolved "https://registry.npmmirror.com/normalize-url/-/normalize-url-6.1.0.tgz#40d0885b535deffe3f3147bec877d05fe4c5668a"
  integrity sha512-DlL+XwOy3NxAQ8xuC0okPgK46iuVNAK01YN7RueYBqqFeGsBjV9XmCAzAdgt+667bCl5kPh9EqKKDwnaPG1I7A==

+normalize-wheel@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.npmmirror.com/normalize-wheel/-/normalize-wheel-1.0.1.tgz#aec886affdb045070d856447df62ecf86146ec45"
+  integrity sha512-1OnlAPZ3zgrk8B91HyRj+eVv+kS5u+Z0SCsak6Xil/kmgEia50ga7zfkumayonZrImffAxPU/5WcyGhzetHNPA==
+
 npm-run-path@^2.0.0:
  version "2.0.2"
  resolved "https://registry.npmmirror.com/npm-run-path/-/npm-run-path-2.0.2.tgz#35a9232dfa35d7067b4cb2ddf2357b1871536c5f"
@ -4980,6 +5022,11 @@ regenerate@^1.4.2:
  resolved "https://registry.npmmirror.com/regenerate/-/regenerate-1.4.2.tgz#b9346d8827e8f5a32f7ba29637d398b69014848a"
  integrity sha512-zrceR/XhGYU/d/opr2EKO7aRHUeiBI8qjtfHqADTwZd6Szfy16la6kqD0MIUs5z5hx6AaKa+PixpPrR289+I0A==

+regenerator-runtime@^0.11.0:
+  version "0.11.1"
+  resolved "https://registry.npmmirror.com/regenerator-runtime/-/regenerator-runtime-0.11.1.tgz#be05ad7f9bf7d22e056f9726cee5017fbf19e2e9"
+  integrity sha512-MguG95oij0fC3QV3URf4V2SDYGJhJnJGqvIIgdECeODCT98wSWDAJ94SSuVpYQUoTcGUIL6L4yNB7j1DFFHSBg==
+
 regenerator-runtime@^0.13.4:
  version "0.13.9"
  resolved "https://registry.npmmirror.com/regenerator-runtime/-/regenerator-runtime-0.13.9.tgz#8925742a98ffd90814988d7566ad30ca3b263b52"
@ -5052,6 +5099,11 @@ requires-port@^1.0.0:
  resolved "https://registry.npmmirror.com/requires-port/-/requires-port-1.0.0.tgz#925d2601d39ac485e091cf0da5c6e694dc3dcaff"
  integrity sha512-KigOCHcocU3XODJxsu8i/j8T9tzT4adHiecwORRQ0ZZFcp7ahwXuRU1m+yuO90C5ZUyGeGfocHDI14M3L3yDAQ==

+resize-observer-polyfill@^1.5.0:
+  version "1.5.1"
+  resolved "https://registry.npmmirror.com/resize-observer-polyfill/-/resize-observer-polyfill-1.5.1.tgz#0e9020dd3d21024458d4ebd27e23e40269810464"
+  integrity sha512-LwZrotdHOo12nQuZlHEmtuXdqGoOD0OhaxopaNFxWzInpEgaLWoVuAMbTzixuosCx2nEG58ngzW3vxdWoxIgdg==
+
 resolve-from@^4.0.0:
  version "4.0.0"
  resolved "https://registry.npmmirror.com/resolve-from/-/resolve-from-4.0.0.tgz#4abcd852ad32dd7baabfe9b40e00a36db5f392e6"
@ -5607,6 +5659,11 @@ thread-loader@^3.0.0:
    neo-async "^2.6.2"
    schema-utils "^3.0.0"

+throttle-debounce@^1.0.1:
+  version "1.1.0"
+  resolved "https://registry.npmmirror.com/throttle-debounce/-/throttle-debounce-1.1.0.tgz#51853da37be68a155cb6e827b3514a3c422e89cd"
+  integrity sha512-XH8UiPCQcWNuk2LYePibW/4qL97+ZQ1AN3FNXwZRBNPPowo/NRU5fAlDCSNBJIYCKbioZfuYtMhG4quqoJhVzg==
+
 thunky@^1.0.2:
  version "1.1.0"
  resolved "https://registry.npmmirror.com/thunky/-/thunky-1.1.0.tgz#5abaf714a9405db0504732bbccd2cedd9ef9537d"