magic-csb/xd-pin
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

feat: first

Browse Source
This commit is contained in:
EleanorMao
2022-09-15 19:43:40 +08:00
parent 218bf56edb
commit 74a0c209f6
8 changed files with 314 additions and 72 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
package.json
View File

@ -9,6 +9,7 @@
},
"dependencies": {
"core-js": "^3.8.3",
"element-ui": "^2.15.10",
"vue": "^3.2.13"
},
"devDependencies": {

24
src/App.vue
View File

@ -1,26 +1,24 @@
<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
}
name: 'App',
components: {
ObjectDetect
}
}
</script>
<style>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
color: #2c3e50;
margin-top: 60px;
}
</style>

BIN
src/assets/img.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.8 MiB

BIN
src/assets/logo.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 6.7 KiB

58
src/components/HelloWorld.vue
View File

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

159
src/components/ObjectDetect.vue Normal file
View File

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

85
src/components/data.js Normal file
View File

@ -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
}]

59
yarn.lock
View File

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