Skip to content

2
2001_0033_neuromorphic_user
Commit 9ed3eb2f by SHINDAESUB
Options

graphQL 연동

parent f8a4c4ae
Showing with 202 additions and 87 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 @@
"build2": "npm run build"
},
"dependencies": {
"apollo-boost": "^0.4.9",
"chart.js": "^2.9.4",
"core-js": "^3.6.5",
"graphql": "^15.5.1",
"konva": "^7.1.3",
"register-service-worker": "^1.7.1",
"vue": "^2.6.11",
"vue-apollo": "^3.0.7",
"vue-chartjs": "^3.5.1",
"vue-konva": "^2.1.6",
"vue-router": "^3.2.0",
......@@ -34,12 +37,14 @@
"@vue/cli-plugin-vuex": "~4.5.0",
"@vue/cli-service": "~4.5.0",
"@vue/test-utils": "^1.0.3",
"graphql-tag": "^2.9.0",
"babel-eslint": "^10.1.0",
"chromedriver": "85",
"eslint": "^6.7.2",
"eslint-plugin-vue": "^6.2.2",
"sass": "^1.26.5",
"sass-loader": "^8.0.2",
"vue-cli-plugin-apollo": "^0.20.0",
"vue-cli-plugin-vuetify": "~2.0.7",
"vue-template-compiler": "^2.6.11",
"vuetify-loader": "^1.3.0"
......
frontend/src/App.vue
......@@ -22,6 +22,7 @@
<script>
import EventBus from './event-bus'
import gql from 'graphql-tag'
import Alert from './components/Alert.vue'
......@@ -49,11 +50,83 @@ export default {
alertOpen: false ,
message:'',
type:'',
projects:[],
}),
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>
<style lang="scss">
......
frontend/src/main.js
......@@ -6,7 +6,8 @@ import store from './store'
import vuetify from './plugins/vuetify';
import axios from 'axios'
import VueKonva from 'vue-konva'
import VueApollo from 'vue-apollo'
import ApolloClient from 'apollo-boost'
Vue.use(VueKonva)
......@@ -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.config.productionTip = false
......@@ -33,5 +45,6 @@ new Vue({
router,
store,
vuetify,
apolloProvider,
render: h => h(App)
}).$mount('#app')
frontend/src/modal/TeachingModal.vue
......@@ -133,7 +133,7 @@ export default {
async neuroStart(){
let msg = new Object()
msg.cmd = "neuro_start"
msg.project_num = this.info.project_num
msg.project_num = this.info.uid
await teachingService.requestManager(msg)
.then(data => {
......@@ -180,7 +180,7 @@ export default {
async neuroCheck(){
let msg = new Object()
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)'
await teachingService.requestManager(msg)
......
frontend/src/modal/TeachungModal/Info.vue
......@@ -7,10 +7,10 @@
<v-card-text>
<v-row no-gutters>
<v-col cols='6' class="ma-0 pa-0">
<div class="text-h5 font-weight-black">{{info.project_name}}</div>
<p>{{info.start_date}} - {{info.end_date}} </p>
<p>관리자 <span>: {{info.project_admin }}</span></p>
<p>작업자 <span >: {{info.project_user }}</span></p>
<div class="text-h5 font-weight-black">{{info.name}}</div>
<p>{{info.createDate}} - {{info.successDate}} </p>
<p>관리자 <span>: {{info.admin }}</span></p>
<p>작업자 <span >: {{info.user }}</span></p>
<p>검수 횟수 :<span class="primary--text font-weight-bold"> {{counter }}</span> 회</p>
</v-col>
......@@ -78,7 +78,7 @@ export default {
computed:{
host(){
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
}
......
frontend/src/store/actions.js
import projectService from '@/service/project'
// import projectService from '@/service/project'
export const getProjectList = ({commit}) => {
projectService.getProjectList()
.then(data => {
commit('projectList',data)
})
// export const getProjectList = ({commit}) => {
// projectService.getProjectList()
// .then(data => {
// commit('projectList',data)
// })
// }
export const getProjectList = ({commit} , projects) => {
console.log(`호출`)
commit('projectList',projects)
}
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 => {
return state.projectList.filter(s => s.project_state === "success")
}
// export const projectListS = state => {
// return state.projectList.filter(s => s.project_state === "success")
// }
export const projectListW = state => {
return state.projectList.filter(w => w.project_state === "waiting")
}
// export const projectListW = state => {
// return state.projectList.filter(w => w.project_state === "waiting")
// }
export const projectListP = state => {
return state.projectList.filter(p => p.project_state === "proceeding")
}
// export const projectListP = state => {
// return state.projectList.filter(p => p.project_state === "proceeding")
// }
export const projectListC = state => {
return state.projectList.filter(c => c.project_state === "")
}
// export const projectListC = state => {
// return state.projectList.filter(c => c.project_state === "")
// }
frontend/src/store/index.js
......@@ -10,7 +10,7 @@ import createLogger from 'vuex/dist/logger'
Vue.use(Vuex)
const state = {
projectList : [],
projects : [],
}
......
frontend/src/store/mutations.js
export default {
projectList (state , data){
// state.projectList.push(data)
state.projectList = data
state.projects = data
},
modifyPoject(state , payload){
......
frontend/src/views/User/List.vue
......@@ -19,13 +19,13 @@
<v-row>
<v-col cols="6">
<List
:projectList="projectList"
:projects="projects"
/>
</v-col>
<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
:selectedProject="selectedProject"
:project="project"
/>
</v-col>
</v-row>
......@@ -51,28 +51,17 @@ import Info from '../User/List/Info.vue'
import No from './List/No.vue'
import TeachingModal from '@/modal/TeachingModal'
export default {
data () {
return {
projectHeader: [
{
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:{},
project:{},
teachingInfo:{},
teachingCounter:0,
teachingModal:false
}
},
components: {
TeachingModal,
List,
......@@ -83,10 +72,10 @@ export default {
created () {
EventBus.$on('projectSelected',(project) =>{
console.log(project)
this.selectedProject = project
this.project = project
})
EventBus.$on('projectListReload',() =>{
this.selectedProject = {}
this.project = {}
this.reload()
})
......@@ -97,11 +86,13 @@ export default {
EventBus.$on('projectModalClose',() => {
this.teachingModal = false
})
},
computed: {
...mapGetters([
'projectList'
'projects'
]),
},
......@@ -115,17 +106,6 @@ export default {
this.teachingCounter = counter,
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) {
......
frontend/src/views/User/List/Info.vue
<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">
{{selectedProject.project_name}}
{{project.name}}
</v-card-title>
<v-card-subtitle>
{{selectedProject.start_date}} - {{selectedProject.end_date}}
{{project.createDate}} - {{project.successDate}}
</v-card-subtitle>
<v-card-text>
<v-row>
......@@ -13,7 +13,7 @@
label="관리자"
readonly
outlined
:value="selectedProject.project_admin"
:value="project.admin"
>
</v-text-field>
</v-col>
......@@ -22,7 +22,7 @@
label="사용자"
readonly
outlined
:value="selectedProject.project_admin"
:value="project.user"
>
</v-text-field>
</v-col>
......@@ -30,7 +30,7 @@
<v-text-field
label="검수 횟수"
ref="counterInput"
v-model.number="selectedProject.total_num"
v-model.number="project.counter"
outlined
type="number"
min="0"
......@@ -38,13 +38,44 @@
</v-text-field>
</v-col>
</v-row>
<v-row>
<v-img
height="500"
width="500"
:src="selectedProject.image_path"
></v-img>
</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
:contain="true"
height="100%"
width="100%"
: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-actions>
<v-spacer/>
......@@ -52,7 +83,7 @@
class="font-weight-bold"
outlined
color="primary"
@click="teaching(selectedProject)"
@click="teaching(project)"
>
Teaching
</v-btn>
......@@ -65,16 +96,22 @@ import EventBus from '../../../event-bus'
export default {
props:{
selectedProject:Object
project:Object,
},
data () {
return {
model: null,
}
},
methods:{
teaching(project){
if(this.selectedProject.total_num === 0){
if(this.project.counter === 0){
EventBus.$emit('openAlert',`검수 횟수를 '0' 이상의 값을 입력해주세요 ` , 'error')
return this.$refs.counterInput.focus()
}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 @@
max-height="646"
min-height="646"
:headers="projectHeader"
:items="projectList"
:items="projects"
no-data-text="프로젝트가 없습니다"
sort-by="createDate"
class="elevation-1"
......@@ -27,11 +27,13 @@
color="#80d8ff"
@click="selected(item)"
dark
:disabled="item.info.length > 0 ? false : true"
>
선택
조회
</v-chip>
</template>
</v-data-table>
</v-card>
</template>
......@@ -46,19 +48,19 @@ export default {
text: '이름',
align: 'start',
sortable: false,
value: 'project_name',
value: '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: 'admin', sortable: false,},
{ text: '사용자', value: 'user', sortable: false,},
{ text: '생성일자', value: 'createDate', sortable: false,},
{ text: '완료일자', value: 'successDate', sortable: false, },
{ text: '조회', value: 'actions', sortable: false },
],
}
},
props:{
projectList:Array,
projects:Array,
},
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