Skip to content

2
2001_0033_neuromorphic_user
Commit 126b6cd7 by SHINDAESUB
Options

UI 변경

parent 3c6f2a7c
Showing with 678 additions and 199 deletions
frontend/package-lock.json
......@@ -2406,6 +2406,17 @@
"unique-filename": "^1.1.1"
}
},
"chalk": {
"version": "4.1.2",
"resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
"integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
"dev": true,
"optional": true,
"requires": {
"ansi-styles": "^4.1.0",
"supports-color": "^7.1.0"
}
},
"cliui": {
"version": "6.0.0",
"resolved": "https://registry.npmjs.org/cliui/-/cliui-6.0.0.tgz",
......@@ -2498,6 +2509,18 @@
"supports-color": "^7.0.0"
}
},
"loader-utils": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-2.0.0.tgz",
"integrity": "sha512-rP4F0h2RaWSvPEkD7BLDFQnvSf+nK+wr3ESUjNTyAGobqrijmW92zc+SO6d4p4B1wh7+B/Jg1mkQe5NYUEHtHQ==",
"dev": true,
"optional": true,
"requires": {
"big.js": "^5.2.2",
"emojis-list": "^3.0.0",
"json5": "^2.1.2"
}
},
"locate-path": {
"version": "5.0.0",
"resolved": "https://registry.npmjs.org/locate-path/-/locate-path-5.0.0.tgz",
......@@ -2599,6 +2622,18 @@
"webpack-sources": "^1.4.3"
}
},
"vue-loader-v16": {
"version": "npm:vue-loader@16.5.0",
"resolved": "https://registry.npmjs.org/vue-loader/-/vue-loader-16.5.0.tgz",
"integrity": "sha512-WXh+7AgFxGTgb5QAkQtFeUcHNIEq3PGVQ8WskY5ZiFbWBkOwcCPRs4w/2tVyTbh2q6TVRlO3xfvIukUtjsu62A==",
"dev": true,
"optional": true,
"requires": {
"chalk": "^4.1.0",
"hash-sum": "^2.0.0",
"loader-utils": "^2.0.0"
}
},
"wrap-ansi": {
"version": "6.2.0",
"resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-6.2.0.tgz",
......@@ -16368,87 +16403,6 @@
}
}
},
"vue-loader-v16": {
"version": "npm:vue-loader@16.5.0",
"resolved": "https://registry.npmjs.org/vue-loader/-/vue-loader-16.5.0.tgz",
"integrity": "sha512-WXh+7AgFxGTgb5QAkQtFeUcHNIEq3PGVQ8WskY5ZiFbWBkOwcCPRs4w/2tVyTbh2q6TVRlO3xfvIukUtjsu62A==",
"dev": true,
"optional": true,
"requires": {
"chalk": "^4.1.0",
"hash-sum": "^2.0.0",
"loader-utils": "^2.0.0"
},
"dependencies": {
"ansi-styles": {
"version": "4.3.0",
"resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
"integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
"dev": true,
"optional": true,
"requires": {
"color-convert": "^2.0.1"
}
},
"chalk": {
"version": "4.1.2",
"resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
"integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
"dev": true,
"optional": true,
"requires": {
"ansi-styles": "^4.1.0",
"supports-color": "^7.1.0"
}
},
"color-convert": {
"version": "2.0.1",
"resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
"integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
"dev": true,
"optional": true,
"requires": {
"color-name": "~1.1.4"
}
},
"color-name": {
"version": "1.1.4",
"resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
"integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
"dev": true,
"optional": true
},
"has-flag": {
"version": "4.0.0",
"resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
"integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
"dev": true,
"optional": true
},
"loader-utils": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-2.0.0.tgz",
"integrity": "sha512-rP4F0h2RaWSvPEkD7BLDFQnvSf+nK+wr3ESUjNTyAGobqrijmW92zc+SO6d4p4B1wh7+B/Jg1mkQe5NYUEHtHQ==",
"dev": true,
"optional": true,
"requires": {
"big.js": "^5.2.2",
"emojis-list": "^3.0.0",
"json5": "^2.1.2"
}
},
"supports-color": {
"version": "7.2.0",
"resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
"integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
"dev": true,
"optional": true,
"requires": {
"has-flag": "^4.0.0"
}
}
}
},
"vue-router": {
"version": "3.4.3",
"resolved": "https://registry.npmjs.org/vue-router/-/vue-router-3.4.3.tgz",
......
frontend/src/App.vue
......@@ -6,15 +6,6 @@
:message="message"
:type="type"
/>
<!-- <Progress
:update="progressUpdate"
:open="progressOpen"
:number="progressNumber"
:label="progressLabel"
/> -->
<router-view/>
</v-main>
</v-app>
......@@ -54,7 +45,6 @@ export default {
}),
mounted(){
this.getProjects()
// this.$store.dispatch('getProjectList')
},
......@@ -79,12 +69,7 @@ export default {
`
})
.then((response) => {
this.projects = response.data.neuroProjects
this.projectMerge()
// this.projectMerge(response.data.neuroProjects)
// this.$store.dispatch('getProjectList',response.data.neuroProjects )
this.projects = response.data.neuroProjects
})
.catch((error) => { console.error(error) })
},
......@@ -131,23 +116,6 @@ export default {
</script>
<style lang="scss">
:root{
/* Color */
--admin-color: #0091ea;
--user-color: #338a3e; //338a3e
--white : #f2f2f2;
--gray: #6A79A6;
--red: #ff1744;
/* Font Size */
--font-l: 24px;
--font-r: 20px;
--font-m: 18px;
--font-s: 16px;
--font-mc: 14px;
}
html,body{
padding: 0;
margin: 0;
......@@ -156,8 +124,18 @@ html,body{
}
#app {
background-color:#CFD8DC;
height: 100%;
width: 100%;
}
html {
-ms-overflow-style: none; /* IE and Edge */
scrollbar-width: none; /* Firefox */
}
html::-webkit-scrollbar {
display: none; /* Chrome, Safari, Opera*/
}
</style>
frontend/src/views/Home.vue
<template>
<div class="select-page">
<div class="select-page-admin">
<div class="content">
<h1>뉴로모픽<br>관리자</h1>
<p>프로젝트를 생성하고 관리한다.<br><br></p>
<a href="https://www.nemopai.com/neuro/single/neuro/">시작</a>
</div>
</div>
<div class="select-page-user">
<div class="content">
<h1>뉴로모픽<br>사용자</h1>
<p>관리자가 만든 프로젝트를 선택하여<br>검수를 시작한다.<br> </p>
<router-link class="user" to="/list">시작</router-link>
</div>
</div>
</div>
<v-container >
<v-row class="mt-12" >
<v-col col="2">
<Stepper
:wpo="wpo"
:step="step"
:infos="infos"
:project="project"
/>
</v-col>
<v-col cols=7 class="mx-auto" >
<Card
:wpo="wpo"
:step="step"
:infos="infos"
:project="project"
/>
</v-col>
<v-col>
<Chart
:wpo="wpo"
:step="step"
:infos="infos"
:project="project"
/>
<List
:wpo="wpo"
:step="step"
:infos="infos"
:project="project"
/>
</v-col>
</v-row>
</v-container>
</template>
<script>
import Stepper from '../views/main/Stepper.vue'
import Chart from '../views/main/Chart.vue'
import Card from '../views/main/Card.vue'
import List from '../views/main/List.vue'
import gql from 'graphql-tag'
export default {
name: 'Home',
data () {
return {
step:1,
loading:true,
wpo:'1003_AOI01',
}
</script>
project:{},
<style lang="scss">
aoi:{},
infos:[],
}
},
components:{
Stepper,
Card,
List,
Chart
},
mounted(){
// this.getAoi()
this.step =2
},
methods: {
async getAoi(){
try{
const response = await this.$apollo.query({
query: gql`
query neuroAoi($name: String!) {
neuroAoi(name: $name) {
uid
name
aoi
aoiName
createDate
}
}`,
variables: { name: this.wpo }
})
let aoi = response.data.neuroAoi
console.log('aoi', aoi)
if (!aoi) return ''
if (aoi.errors) throw new Error(aoi.errors[0])
this.aoi = aoi
return true
}catch (e) {
console.log(e)
throw e
}
},
async getProject(){
try{
const response = await this.$apollo.query({
query: gql`
query neuroProject($aoiUid:Int!) {
neuroProject(aoiUid:$aoiUid) {
uid
name
user
admin
createDate
successDate
counter
aoiUid
state
}
}`,
variables: { aoiUid: this.aoi.uid }
})
let project = response.data.neuroProject
console.log('project', project)
if (!project) return ''
if (project.errors) throw new Error(project.errors[0])
this.project = project
return true
}catch (e) {
console.log(e)
throw e
}
},
/* common */
.content {
font-family: 'Source Sans Pro';
color: var(--white);
line-height: 1.5; /* 줄의 높이*/
text-align: center;
img{
max-width: 100px;
min-height: 100px;
}
h1{
font-size: 60px;
}
a{
background-color: var(--white);
border-radius: 50px;
line-height: 50px; /* a태그 높이는 지정 */
width: 200px;
display: inline-block;
margin: 20px 0;
font-size: var(--font-large);
font-weight: bold;
font-size: var(--font-l);
text-decoration: none;
}
}
.select-page{
display: flex;
height: 100vh;
.select-page-admin{
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
background-color: var(--admin-color);
width: 100%;
height: 100%;
// &:hover{
// background-color: #9cff57;
// }
.content{
a{
color:var(--admin-color);
}
async getInfos(){
try{
const response = await this.$apollo.query({
query: gql`
query neuroInfos($projectUid: Int!) {
neuroInfos(projectUid: $projectUid) {
projectUid
order
type
startX
startY
lastX
lastY
width
height
goodImage
missingImage
goodPath
missingPath
}
}`,
variables: { projectUid: this.project.uid }
})
let infos = response.data.neuroInfos
console.log('infos', infos)
if (!infos) return ''
if (infos.errors) throw new Error(infos.errors[0])
this.infos = infos
return true
}catch (e) {
console.log(e)
throw e
}
},
async getData(){
let result1 = await this.getAoi()
let result2 = await this.getProject()
let result3 = await this.getInfos()
console.log(result1)
console.log(result2)
console.log(result3)
if(result1 === true && result2 === true && result3 === true ) this.step = 3
}
.select-page-user{
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: 100%;
height: 100%;
background-color: var(--user-color);
// &:hover{
// background-color: #9cff57;
// }
.content{
a{
color:var(--user-color);
}
},
watch:{
step(current) {
console.log("현재 스텝 :", current)
if(current === 1){
console.log("1번 입니다.")
}else if(current === 2){
console.log("2번 입니다.")
this.getData()
}else if(current === 3){
console.log("3번 입니다.")
}else if(current === 4){
console.log("4번 입니다.")
}else if(current === 5){
console.log("5번 입니다.")
}else if(current === 6){
console.log("6번 입니다.")
}
}
},
}
</script>
<style lang="scss">
</style>
\ No newline at end of file
frontend/src/views/main/Card.vue 0 → 100644
<template>
<v-card
:loading="loading"
:disabled="loading"
width="100%"
max-width="100%"
height="900"
max-height="900"
>
<template slot="progress">
<v-progress-linear
color="deep-purple"
height="10"
indeterminate
></v-progress-linear>
</template>
<v-img
height="540"
max-height="540"
width="100%"
max-width="100%"
src="https://bad.src/not/valid"
lazy-src="../../../public/image/lazy.png"
contain
class="grey darken-4"
>
<template v-slot:placeholder>
<v-row
class="fill-height ma-0"
align="center"
justify="center"
>
<v-progress-circular
indeterminate
color="grey lighten-5"
></v-progress-circular>
</v-row>
</template>
</v-img>
<v-card-title>{{project.name}}</v-card-title>
<v-card-subtitle>{{project.createDate}} - {{project.successDate}}</v-card-subtitle>
<v-card-text>
<v-list-item >
<v-list-item-subtitle> 관리자 </v-list-item-subtitle>
<v-list-item-title>{{project.admin}} </v-list-item-title>
</v-list-item>
<v-list-item>
<v-list-item-subtitle> 사용자 </v-list-item-subtitle>
<v-list-item-title>{{project.user}} </v-list-item-title>
</v-list-item>
</v-card-text>
<v-divider class="mx-4"></v-divider>
<v-card-title>진행률</v-card-title>
<v-card-text>
<!-- <v-chip-group
v-model="selection"
active-class="deep-purple accent-4 white--text"
column
>
<v-chip>5:30PM</v-chip>
<v-chip>7:30PM</v-chip>
<v-chip>8:00PM</v-chip>
<v-chip>9:00PM</v-chip>
</v-chip-group> -->
</v-card-text>
</v-card>
</template>
<script>
export default {
data () {
return {
loading: true,
}
},
props: {
step:Number,
wpo:String,
infos:Array,
project:Object,
},
}
</script>
<style>
</style>
\ No newline at end of file
frontend/src/views/main/Chart.vue 0 → 100644
<template>
<v-card color="red">
wqkeqwekjqw
</v-card>
</template>
<script>
export default {
data () {
return {
e13: 2,
loading: true,
headers: [
{ text: '횟수', align: 'start', sortable: false, value: 'counter',},
{ text: '상태', value: 'state' },
{ text: '응답 속도', value: 'response' },
],
}
},
}
</script>
<style>
</style>
\ No newline at end of file
frontend/src/views/main/List.vue 0 → 100644
<template>
<v-data-table
:loading="loading"
:disabled="loading"
height="300"
dense
max-height="300"
:headers="headers"
:items="list"
:items-per-page="100"
no-data-text="검수 이력이 없습니다."
:sort-by="['counter']"
:sort-desc="[true]"
class="elevation-0 "
hide-default-footer
>
<template v-slot:[`item.state`]="{ item }">
<v-chip
:color="item.state === 0 ? 'error' : 'success'"
dark
>
{{ item.state === 0 ? 'Fail' : 'Success' }}
</v-chip>
</template>
</v-data-table>
</template>
<script>
export default {
data () {
return {
e13: 2,
loading: true,
headers: [
{ text: '횟수', align: 'start', sortable: false, value: 'counter',},
{ text: '상태', value: 'state' },
{ text: '응답 속도', value: 'response' },
],
list:[],
}
},
}
</script>
<style>
</style>
\ No newline at end of file
frontend/src/views/main/Stepper.vue 0 → 100644
<template>
<v-stepper
v-model="step"
vertical
style="height:100%"
class="font-weight-black"
>
<v-toolbar
color="indigo"
dark
>
<v-toolbar-title>{{wpo}}</v-toolbar-title>
<v-spacer></v-spacer>
</v-toolbar>
<v-stepper-step
:color="step > 1 ? 'success' : 'primary'"
:complete="step > 1"
step="1"
class="font-weight-black"
>
<small class="font-weight-bold">Step 1</small>
WPO ID 확인
</v-stepper-step>
<v-stepper-content step="1" >
<div class="text-center">
<v-progress-circular
:size="150"
color="primary"
indeterminate
></v-progress-circular>
</div>
<v-btn
color="primary"
@click="step = 2"
>
Continue
</v-btn>
</v-stepper-content>
<v-stepper-step
:color="step > 2 ? 'success' : 'primary'"
:complete="step > 2"
step="2"
class="font-weight-black"
>
<small class="font-weight-bold">Step 2</small>
데이터 불러오기
</v-stepper-step>
<v-stepper-content step="2" >
<v-list>
<v-list-item-group
multiple
>
<v-list-item>
<v-list-item-action>
<v-checkbox
:input-value="Object.keys(project).length !== 0 ? true : false"
color="primary"
></v-checkbox>
</v-list-item-action>
<v-list-item-content>
<v-list-item-title>프로젝트</v-list-item-title>
</v-list-item-content>
</v-list-item>
<v-list-item>
<v-list-item-action>
<v-checkbox
:input-value="infos.length !== 0 ? true : false"
color="primary"
></v-checkbox>
</v-list-item-action>
<v-list-item-content>
<v-list-item-title>검수 정보</v-list-item-title>
</v-list-item-content>
</v-list-item>
<v-list-item>
<v-list-item-action>
<v-checkbox
:input-value="step === 2 ? true : false"
color="primary"
></v-checkbox>
</v-list-item-action>
<v-list-item-content>
<v-list-item-title>데이터 저장</v-list-item-title>
</v-list-item-content>
</v-list-item>
</v-list-item-group>
</v-list>
<v-btn
color="primary"
@click="step = 3"
>
Continue
</v-btn>
</v-stepper-content>
<v-stepper-step
:color="step > 3 ? 'success' : 'primary'"
:complete="step > 3"
step="3"
>
<small class="font-weight-bold">Step 3</small>
매니저 티칭 정보 확인
</v-stepper-step>
<v-stepper-content step="3">
<div class="text-center">
<v-progress-circular
:size="50"
color="primary"
indeterminate
></v-progress-circular>
</div>
<v-btn
color="primary"
@click="step = 4"
>
Continue
</v-btn>
</v-stepper-content>
<v-stepper-step
:color="step > 4 ? 'success' : 'primary'"
:complete="step > 4"
step="3"
>
<small class="font-weight-bold">Step 4</small>
보드 사진 촬영
</v-stepper-step>
<v-stepper-content step="4">
<div class="text-center">
<v-progress-circular
:size="50"
color="primary"
indeterminate
></v-progress-circular>
</div>
<v-btn
color="primary"
@click="step = 5"
>
Continue
</v-btn>
<v-btn text>
Cancel
</v-btn>
</v-stepper-content>
<v-stepper-step
:color="step > 5 ? 'success' : 'primary'"
:complete="step > 5"
step="5"
>
<small class="font-weight-bold">Step 5</small>
검수
</v-stepper-step>
<v-stepper-content step="5">
<div class="text-center">
<v-progress-circular
:size="50"
color="primary"
indeterminate
></v-progress-circular>
</div>
<v-btn
color="primary"
@click="step = 6"
>
Continue
</v-btn>
</v-stepper-content>
<v-stepper-step
:color="step > 6 ? 'success' : 'primary'"
:complete="step > 6"
step="5"
>
<small class="font-weight-bold">Step 6</small>
결과
</v-stepper-step>
<v-stepper-content step="6">
<v-btn
block
color="primary"
@click="step = 1"
>
재시작
</v-btn>
</v-stepper-content>
</v-stepper>
</template>
<script>
export default {
props: {
step:Number,
wpo:String,
infos:Array,
project:Object,
},
}
</script>
<style>
</style>
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment