Skip to content

2
2001_0033_neuromorphic_user
Commit 9ed3eb2f by SHINDAESUB
Options

graphQL 연동

parent f8a4c4ae
Showing with 201 additions and 86 deletions
frontend/package-lock.json
This source diff could not be displayed because it is too large. You can view the blob instead.
frontend/package.json
...@@ -12,11 +12,14 @@ ...@@ -12,11 +12,14 @@
"build2": "npm run build" "build2": "npm run build"
}, },
"dependencies": { "dependencies": {
"apollo-boost": "^0.4.9",
"chart.js": "^2.9.4", "chart.js": "^2.9.4",
"core-js": "^3.6.5", "core-js": "^3.6.5",
"graphql": "^15.5.1",
"konva": "^7.1.3", "konva": "^7.1.3",
"register-service-worker": "^1.7.1", "register-service-worker": "^1.7.1",
"vue": "^2.6.11", "vue": "^2.6.11",
"vue-apollo": "^3.0.7",
"vue-chartjs": "^3.5.1", "vue-chartjs": "^3.5.1",
"vue-konva": "^2.1.6", "vue-konva": "^2.1.6",
"vue-router": "^3.2.0", "vue-router": "^3.2.0",
...@@ -34,12 +37,14 @@ ...@@ -34,12 +37,14 @@
"@vue/cli-plugin-vuex": "~4.5.0", "@vue/cli-plugin-vuex": "~4.5.0",
"@vue/cli-service": "~4.5.0", "@vue/cli-service": "~4.5.0",
"@vue/test-utils": "^1.0.3", "@vue/test-utils": "^1.0.3",
"graphql-tag": "^2.9.0",
"babel-eslint": "^10.1.0", "babel-eslint": "^10.1.0",
"chromedriver": "85", "chromedriver": "85",
"eslint": "^6.7.2", "eslint": "^6.7.2",
"eslint-plugin-vue": "^6.2.2", "eslint-plugin-vue": "^6.2.2",
"sass": "^1.26.5", "sass": "^1.26.5",
"sass-loader": "^8.0.2", "sass-loader": "^8.0.2",
"vue-cli-plugin-apollo": "^0.20.0",
"vue-cli-plugin-vuetify": "~2.0.7", "vue-cli-plugin-vuetify": "~2.0.7",
"vue-template-compiler": "^2.6.11", "vue-template-compiler": "^2.6.11",
"vuetify-loader": "^1.3.0" "vuetify-loader": "^1.3.0"
......
frontend/src/App.vue
...@@ -22,6 +22,7 @@ ...@@ -22,6 +22,7 @@
<script> <script>
import EventBus from './event-bus' import EventBus from './event-bus'
import gql from 'graphql-tag'
import Alert from './components/Alert.vue' import Alert from './components/Alert.vue'
...@@ -49,11 +50,83 @@ export default { ...@@ -49,11 +50,83 @@ export default {
alertOpen: false , alertOpen: false ,
message:'', message:'',
type:'', type:'',
projects:[],
}), }),
mounted(){ mounted(){
this.$store.dispatch('getProjectList') this.getProjects()
// this.$store.dispatch('getProjectList')
}, },
methods: {
async getProjects(){
await this.$apollo.query({
query: gql`
{
neuroProjects{
uid
name
user
admin
createDate
successDate
counter
listId
state
}
}
`
})
.then((response) => {
this.projects = response.data.neuroProjects
this.projectMerge()
// this.projectMerge(response.data.neuroProjects)
// this.$store.dispatch('getProjectList',response.data.neuroProjects )
})
.catch((error) => { console.error(error) })
},
async getInfos(uid){
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: uid }
})
.then((response) => {
let index = this.projects.findIndex( project => project.uid === uid )
this.projects[index].info = response.data.neuroInfos
})
.catch((error) => { console.error(error)})
},
async projectMerge(){
console.log(this.projects)
await this.projects.forEach(project => {
this.getInfos(project.uid)
});
await this.$store.dispatch('getProjectList',this.projects )
}
}
}; };
</script> </script>
<style lang="scss"> <style lang="scss">
......
frontend/src/main.js
...@@ -6,7 +6,8 @@ import store from './store' ...@@ -6,7 +6,8 @@ import store from './store'
import vuetify from './plugins/vuetify'; import vuetify from './plugins/vuetify';
import axios from 'axios' import axios from 'axios'
import VueKonva from 'vue-konva' import VueKonva from 'vue-konva'
import VueApollo from 'vue-apollo'
import ApolloClient from 'apollo-boost'
Vue.use(VueKonva) Vue.use(VueKonva)
...@@ -25,6 +26,17 @@ axios.interceptors.response.use( //Error 전파하기 위해 인터셉터 응 ...@@ -25,6 +26,17 @@ axios.interceptors.response.use( //Error 전파하기 위해 인터셉터 응
) )
const apolloClient = new ApolloClient({
uri: 'https://www.nemopai.com/graphql',
})
const apolloProvider = new VueApollo({
defaultClient: apolloClient,
})
Vue.use(VueApollo)
//Vue.prototype.$http = axios //vue 컴포넌트에서 this.$http 요청할 수 있게 된다. //Vue.prototype.$http = axios //vue 컴포넌트에서 this.$http 요청할 수 있게 된다.
Vue.config.productionTip = false Vue.config.productionTip = false
...@@ -33,5 +45,6 @@ new Vue({ ...@@ -33,5 +45,6 @@ new Vue({
router, router,
store, store,
vuetify, vuetify,
apolloProvider,
render: h => h(App) render: h => h(App)
}).$mount('#app') }).$mount('#app')
frontend/src/modal/TeachingModal.vue
...@@ -133,7 +133,7 @@ export default { ...@@ -133,7 +133,7 @@ export default {
async neuroStart(){ async neuroStart(){
let msg = new Object() let msg = new Object()
msg.cmd = "neuro_start" msg.cmd = "neuro_start"
msg.project_num = this.info.project_num msg.project_num = this.info.uid
await teachingService.requestManager(msg) await teachingService.requestManager(msg)
.then(data => { .then(data => {
...@@ -180,7 +180,7 @@ export default { ...@@ -180,7 +180,7 @@ export default {
async neuroCheck(){ async neuroCheck(){
let msg = new Object() let msg = new Object()
msg.cmd = "neuro_check" msg.cmd = "neuro_check"
msg.project_num = this.info.project_num msg.project_num = this.info.uid
msg.teaching_info ='(1113,720,1329,840)-(1626,504,1788,651)-(1953,816,2049,978)' msg.teaching_info ='(1113,720,1329,840)-(1626,504,1788,651)-(1953,816,2049,978)'
await teachingService.requestManager(msg) await teachingService.requestManager(msg)
......
frontend/src/modal/TeachungModal/Info.vue
...@@ -7,10 +7,10 @@ ...@@ -7,10 +7,10 @@
<v-card-text> <v-card-text>
<v-row no-gutters> <v-row no-gutters>
<v-col cols='6' class="ma-0 pa-0"> <v-col cols='6' class="ma-0 pa-0">
<div class="text-h5 font-weight-black">{{info.project_name}}</div> <div class="text-h5 font-weight-black">{{info.name}}</div>
<p>{{info.start_date}} - {{info.end_date}} </p> <p>{{info.createDate}} - {{info.successDate}} </p>
<p>관리자 <span>: {{info.project_admin }}</span></p> <p>관리자 <span>: {{info.admin }}</span></p>
<p>작업자 <span >: {{info.project_user }}</span></p> <p>작업자 <span >: {{info.user }}</span></p>
<p>검수 횟수 :<span class="primary--text font-weight-bold"> {{counter }}</span> 회</p> <p>검수 횟수 :<span class="primary--text font-weight-bold"> {{counter }}</span> 회</p>
</v-col> </v-col>
...@@ -78,7 +78,7 @@ export default { ...@@ -78,7 +78,7 @@ export default {
computed:{ computed:{
host(){ host(){
let protocol = location.protocol; let protocol = location.protocol;
let hostName = location.hostname === 'localhost' ? '192.168.53.196': location.hostname let hostName = location.hostname === 'localhost' ? '192.168.50.133': location.hostname
return protocol+'//'+hostName+':'+8081 return protocol+'//'+hostName+':'+8081
} }
......
frontend/src/store/actions.js
import projectService from '@/service/project' // import projectService from '@/service/project'
export const getProjectList = ({commit}) => { // export const getProjectList = ({commit}) => {
projectService.getProjectList() // projectService.getProjectList()
.then(data => { // .then(data => {
commit('projectList',data) // commit('projectList',data)
}) // })
// }
export const getProjectList = ({commit} , projects) => {
console.log(`호출`)
commit('projectList',projects)
} }
export const modifyPoject = ({commit}, info) => { export const modifyPoject = ({commit}, info) => {
......
frontend/src/store/getters.js
export const projectList = state => state.projectList export const projects = state => state.projects
export const projectListS = state => { // export const projectListS = state => {
return state.projectList.filter(s => s.project_state === "success") // return state.projectList.filter(s => s.project_state === "success")
} // }
export const projectListW = state => { // export const projectListW = state => {
return state.projectList.filter(w => w.project_state === "waiting") // return state.projectList.filter(w => w.project_state === "waiting")
} // }
export const projectListP = state => { // export const projectListP = state => {
return state.projectList.filter(p => p.project_state === "proceeding") // return state.projectList.filter(p => p.project_state === "proceeding")
} // }
export const projectListC = state => { // export const projectListC = state => {
return state.projectList.filter(c => c.project_state === "") // return state.projectList.filter(c => c.project_state === "")
} // }
frontend/src/store/index.js
...@@ -10,7 +10,7 @@ import createLogger from 'vuex/dist/logger' ...@@ -10,7 +10,7 @@ import createLogger from 'vuex/dist/logger'
Vue.use(Vuex) Vue.use(Vuex)
const state = { const state = {
projectList : [], projects : [],
} }
......
frontend/src/store/mutations.js
export default { export default {
projectList (state , data){ projectList (state , data){
// state.projectList.push(data) state.projects = data
state.projectList = data
}, },
modifyPoject(state , payload){ modifyPoject(state , payload){
......
frontend/src/views/User/List.vue
...@@ -19,13 +19,13 @@ ...@@ -19,13 +19,13 @@
<v-row> <v-row>
<v-col cols="6"> <v-col cols="6">
<List <List
:projectList="projectList" :projects="projects"
/> />
</v-col> </v-col>
<v-col cols="6"> <v-col cols="6">
<No v-if="Object.keys(selectedProject).length === 0 && JSON.stringify(selectedProject) === JSON.stringify({})"/> <No v-if="Object.keys(project).length === 0 && JSON.stringify(project) === JSON.stringify({})"/>
<Info v-else <Info v-else
:selectedProject="selectedProject" :project="project"
/> />
</v-col> </v-col>
</v-row> </v-row>
...@@ -51,28 +51,17 @@ import Info from '../User/List/Info.vue' ...@@ -51,28 +51,17 @@ import Info from '../User/List/Info.vue'
import No from './List/No.vue' import No from './List/No.vue'
import TeachingModal from '@/modal/TeachingModal' import TeachingModal from '@/modal/TeachingModal'
export default { export default {
data () { data () {
return { return {
projectHeader: [ project:{},
{
text: '이름',
align: 'start',
sortable: false,
value: 'project_name',
},
{ text: '관리자', value: 'project_admin', sortable: false,},
{ text: '사용자', value: 'project_user', sortable: false,},
{ text: '생성일자', value: 'start_date', sortable: false,},
{ text: '완료일자', value: 'end_date', sortable: false, },
{ text: '조회', value: 'actions', sortable: false },
],
selectedProject:{},
teachingInfo:{}, teachingInfo:{},
teachingCounter:0, teachingCounter:0,
teachingModal:false teachingModal:false
} }
}, },
components: { components: {
TeachingModal, TeachingModal,
List, List,
...@@ -83,10 +72,10 @@ export default { ...@@ -83,10 +72,10 @@ export default {
created () { created () {
EventBus.$on('projectSelected',(project) =>{ EventBus.$on('projectSelected',(project) =>{
console.log(project) console.log(project)
this.selectedProject = project this.project = project
}) })
EventBus.$on('projectListReload',() =>{ EventBus.$on('projectListReload',() =>{
this.selectedProject = {} this.project = {}
this.reload() this.reload()
}) })
...@@ -97,11 +86,13 @@ export default { ...@@ -97,11 +86,13 @@ export default {
EventBus.$on('projectModalClose',() => { EventBus.$on('projectModalClose',() => {
this.teachingModal = false this.teachingModal = false
}) })
}, },
computed: { computed: {
...mapGetters([ ...mapGetters([
'projectList' 'projects'
]), ]),
}, },
...@@ -115,17 +106,6 @@ export default { ...@@ -115,17 +106,6 @@ export default {
this.teachingCounter = counter, this.teachingCounter = counter,
this.teachingModal = true this.teachingModal = true
// const msg = new Object()
// msg.cmd = "neuro_start"
// msg.project_num = project.project_num
// await teachingService.requestManager(msg)
// .then((response) => {
// console.log(response)
// })
// .catch((error) => {return EventBus.$emit('openAlert',"ERROR : "+ error , 'error') })
// .finally(() => { this.$store.dispatch('offLoading')})
}, },
start (item) { start (item) {
......
frontend/src/views/User/List/Info.vue
<template> <template>
<v-card class="d-flex flex-column" height="770" light> <v-card class="d-flex flex-column mx-auto" height="770" light>
<v-card-title class="text-h5 font-weight-black"> <v-card-title class="text-h5 font-weight-black">
{{selectedProject.project_name}} {{project.name}}
</v-card-title> </v-card-title>
<v-card-subtitle> <v-card-subtitle>
{{selectedProject.start_date}} - {{selectedProject.end_date}} {{project.createDate}} - {{project.successDate}}
</v-card-subtitle> </v-card-subtitle>
<v-card-text> <v-card-text>
<v-row> <v-row>
...@@ -13,7 +13,7 @@ ...@@ -13,7 +13,7 @@
label="관리자" label="관리자"
readonly readonly
outlined outlined
:value="selectedProject.project_admin" :value="project.admin"
> >
</v-text-field> </v-text-field>
</v-col> </v-col>
...@@ -22,7 +22,7 @@ ...@@ -22,7 +22,7 @@
label="사용자" label="사용자"
readonly readonly
outlined outlined
:value="selectedProject.project_admin" :value="project.user"
> >
</v-text-field> </v-text-field>
</v-col> </v-col>
...@@ -30,7 +30,7 @@ ...@@ -30,7 +30,7 @@
<v-text-field <v-text-field
label="검수 횟수" label="검수 횟수"
ref="counterInput" ref="counterInput"
v-model.number="selectedProject.total_num" v-model.number="project.counter"
outlined outlined
type="number" type="number"
min="0" min="0"
...@@ -38,13 +38,44 @@ ...@@ -38,13 +38,44 @@
</v-text-field> </v-text-field>
</v-col> </v-col>
</v-row> </v-row>
<v-row> <v-sheet
class="mx-auto"
max-width="800"
max-height="500"
>
<v-slide-group
v-model="model"
class="pa-4"
mandatory
show-arrows
>
<v-slide-item
v-for="info in project.info"
:key="info.order"
v-slot="{ active, toggle }"
>
<v-card
:color="active ? 'primary' : 'grey lighten-4'"
class="ma-4"
height="270"
width="250"
@click="toggle"
>
<v-img <v-img
height="500" :contain="true"
width="500" height="100%"
:src="selectedProject.image_path" width="100%"
></v-img>
</v-row> :src="'data:image/gif;base64,'+ info.goodImage"
@click="toggle"
class="grey darken-4 mr-1"
>
</v-img>
</v-card>
</v-slide-item>
</v-slide-group>
</v-sheet>
</v-card-text> </v-card-text>
<v-card-actions> <v-card-actions>
<v-spacer/> <v-spacer/>
...@@ -52,7 +83,7 @@ ...@@ -52,7 +83,7 @@
class="font-weight-bold" class="font-weight-bold"
outlined outlined
color="primary" color="primary"
@click="teaching(selectedProject)" @click="teaching(project)"
> >
Teaching Teaching
</v-btn> </v-btn>
...@@ -65,16 +96,22 @@ import EventBus from '../../../event-bus' ...@@ -65,16 +96,22 @@ import EventBus from '../../../event-bus'
export default { export default {
props:{ props:{
selectedProject:Object project:Object,
},
data () {
return {
model: null,
}
}, },
methods:{ methods:{
teaching(project){ teaching(project){
if(this.selectedProject.total_num === 0){ if(this.project.counter === 0){
EventBus.$emit('openAlert',`검수 횟수를 '0' 이상의 값을 입력해주세요 ` , 'error') EventBus.$emit('openAlert',`검수 횟수를 '0' 이상의 값을 입력해주세요 ` , 'error')
return this.$refs.counterInput.focus() return this.$refs.counterInput.focus()
}else{ }else{
EventBus.$emit('projectTeachingStart',project,this.selectedProject.total_num) EventBus.$emit('projectTeachingStart',project,this.project.counter)
} }
} }
} }
......
frontend/src/views/User/List/List.vue
...@@ -16,7 +16,7 @@ ...@@ -16,7 +16,7 @@
max-height="646" max-height="646"
min-height="646" min-height="646"
:headers="projectHeader" :headers="projectHeader"
:items="projectList" :items="projects"
no-data-text="프로젝트가 없습니다" no-data-text="프로젝트가 없습니다"
sort-by="createDate" sort-by="createDate"
class="elevation-1" class="elevation-1"
...@@ -27,11 +27,13 @@ ...@@ -27,11 +27,13 @@
color="#80d8ff" color="#80d8ff"
@click="selected(item)" @click="selected(item)"
dark dark
:disabled="item.info.length > 0 ? false : true"
> >
선택 조회
</v-chip> </v-chip>
</template> </template>
</v-data-table> </v-data-table>
</v-card> </v-card>
</template> </template>
...@@ -46,19 +48,19 @@ export default { ...@@ -46,19 +48,19 @@ export default {
text: '이름', text: '이름',
align: 'start', align: 'start',
sortable: false, sortable: false,
value: 'project_name', value: 'name',
}, },
{ text: '관리자', value: 'project_admin', sortable: false,}, { text: '관리자', value: 'admin', sortable: false,},
{ text: '사용자', value: 'project_user', sortable: false,}, { text: '사용자', value: 'user', sortable: false,},
{ text: '생성일자', value: 'start_date', sortable: false,}, { text: '생성일자', value: 'createDate', sortable: false,},
{ text: '완료일자', value: 'end_date', sortable: false, }, { text: '완료일자', value: 'successDate', sortable: false, },
{ text: '조회', value: 'actions', sortable: false }, { text: '조회', value: 'actions', sortable: false },
], ],
} }
}, },
props:{ props:{
projectList:Array, projects:Array,
}, },
methods:{ methods:{
......
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