aidlab/aida_front
7
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

管理员页面新增i查看调查问卷信息

Browse Source
This commit is contained in:
X1627315083
2024-07-29 17:30:24 +08:00
parent a9f9fd26ec
commit 509f91ed6c
9 changed files with 2492 additions and 1918 deletions
Download Patch File Download Diff File Expand all files Collapse all files

144
src/views/feedbackSurvey.vue
View File

@@ -1,15 +1,16 @@
<template>
<div class="feedbackSurvey">
<div class="feedbackSurvey" :class="{'active': forbid}">
<main id="main">
<h1 id="title">AiDA 3.0 Feedback Survey</h1>
<p id="description">Please take the survey</p>
<div id="survey-form">
<p id="description" v-if="!forbid">Please take the survey</p>
<div id="survey-form" :class="{'active': !forbid}">
<h2 class="section-title">Personal Information</h2>
<div class="section w40">
<label for="name"
>Name:<span class="fontColor">*</span></label
>
<input
:readonly="forbid"
type="text"
v-model="userName"
placeholder="Enter your name"
@@ -19,7 +20,7 @@
<label for="gender"
>Gender:<span class="fontColor">*</span></label
>
<select name="dropdown" id="dropdown" v-model="gender">
<select :disabled="forbid" name="dropdown" id="dropdown" v-model="gender">
<option selected value='Female'>Female</option>
<option value='Male'>Male</option>
</select>
@@ -37,6 +38,7 @@
<input
type="text"
:readonly="forbid"
v-model="occupation"
placeholder="Enter your occupation"
required
@@ -57,7 +59,7 @@
</div> -->
<div class="section w40">
<label for="dropdown">Country of Origin:<span class="fontColor" >*</span></label>
<select name="dropdown" id="dropdown" v-model="country" required>
<select :disabled="forbid" name="dropdown" id="dropdown" v-model="country" required>
<option disabled selected value> Select an option </option>
<option v-for="item in CountryList" :key="item" :value="item">{{ item }}</option>
</select>
@@ -68,6 +70,7 @@
>
<input
type="email"
:readonly="forbid"
v-model="email"
placeholder="Enter your email"
required
@@ -77,6 +80,7 @@
<p>Age Group:<span class="fontColor">*</span></p>
<label>
<input
:disabled="forbid"
type="radio"
value="below20"
name="age"
@@ -86,15 +90,15 @@
Below 20
</label>
<label>
<input checked type="radio" value="20-30" v-model="age" name="age" />
<input :disabled="forbid" checked type="radio" value="20-30" v-model="age" name="age" />
20-30
</label>
<label>
<input type="radio" value="30-40" v-model="age" name="age" />
<input :disabled="forbid" type="radio" value="30-40" v-model="age" name="age" />
30-40
</label>
<label>
<input type="radio" value="40+" v-model="age" name="age" />
<input :disabled="forbid" type="radio" value="40+" v-model="age" name="age" />
40+
</label>
</div>
@@ -131,6 +135,7 @@
</p>
<label>
<input
:disabled="forbid"
type="checkbox"
name="checkbox-question"
value="1"
@@ -140,6 +145,7 @@
</label>
<label>
<input
:disabled="forbid"
type="checkbox"
name="checkbox-question"
value="2"
@@ -149,6 +155,7 @@
</label>
<label>
<input
:disabled="forbid"
type="checkbox"
name="checkbox-question"
value="3"
@@ -158,6 +165,7 @@
</label>
<label>
<input
:disabled="forbid"
type="checkbox"
name="checkbox-question"
value="4"
@@ -167,6 +175,7 @@
</label>
<label>
<input
:disabled="forbid"
type="checkbox"
name="checkbox-question"
value="5"
@@ -176,6 +185,7 @@
</label>
<label>
<input
:disabled="forbid"
type="checkbox"
name="checkbox-question"
value="6"
@@ -185,6 +195,7 @@
</label>
<label>
<input
:disabled="forbid"
type="checkbox"
name="checkbox-question"
value="7"
@@ -194,6 +205,7 @@
</label>
<label>
<input
:disabled="forbid"
type="checkbox"
name="checkbox-question"
value="8"
@@ -203,6 +215,7 @@
</label>
<label>
<input
:disabled="forbid"
type="checkbox"
name="checkbox-question"
value="9"
@@ -212,6 +225,7 @@
</label>
<label>
<input
:disabled="forbid"
type="checkbox"
name="checkbox-question"
value="10"
@@ -221,6 +235,7 @@
</label>
<label>
<input
:disabled="forbid"
type="checkbox"
name="checkbox-question"
value="11"
@@ -230,6 +245,7 @@
</label>
<label>
<input
:disabled="forbid"
type="checkbox"
name="checkbox-question"
class="marTop1"
@@ -237,6 +253,7 @@
/>
<span> Others:</span>
<textarea
:readonly="forbid"
name="comments"
id="text-area"
placeholder="Please enter..."
@@ -252,6 +269,7 @@
</p>
<label>
<input
:disabled="forbid"
type="checkbox"
name="checkbox-question"
value="1"
@@ -262,6 +280,7 @@
</label>
<label>
<input
:disabled="forbid"
type="checkbox"
name="checkbox-question"
value="2"
@@ -271,6 +290,7 @@
</label>
<label>
<input
:disabled="forbid"
type="checkbox"
name="checkbox-question"
value="3"
@@ -280,6 +300,7 @@
</label>
<label>
<input
:disabled="forbid"
type="checkbox"
name="checkbox-question"
value="4"
@@ -289,6 +310,7 @@
</label>
<label>
<input
:disabled="forbid"
type="checkbox"
name="checkbox-question"
value="5"
@@ -298,6 +320,7 @@
</label>
<label>
<input
:disabled="forbid"
type="checkbox"
name="checkbox-question"
value="6"
@@ -307,6 +330,7 @@
</label>
<label>
<input
:disabled="forbid"
type="checkbox"
name="checkbox-question"
value="7"
@@ -316,6 +340,7 @@
</label>
<label>
<input
:disabled="forbid"
type="checkbox"
name="checkbox-question"
value="8"
@@ -325,6 +350,7 @@
</label>
<label>
<input
:disabled="forbid"
type="checkbox"
name="checkbox-question"
value="9"
@@ -334,6 +360,7 @@
</label>
<label>
<input
:disabled="forbid"
type="checkbox"
name="checkbox-question"
value="10"
@@ -343,6 +370,7 @@
</label>
<label>
<input
:disabled="forbid"
type="checkbox"
name="checkbox-question"
class="marTop1"
@@ -354,6 +382,7 @@
type="text"
/> -->
<textarea
:readonly="forbid"
name="comments"
id="text-area"
v-model="othersImprovel"
@@ -366,6 +395,7 @@
<p>3. Will you subscribe to AiDA 3.0?<span class="fontColor">*</span></p>
<label>
<input
:disabled="forbid"
type="radio"
value="yes"
v-model="isSubscribe"
@@ -374,7 +404,7 @@
Yes
</label>
<label>
<input v-model="isSubscribe" type="radio" value="no" name="radio-question" />
<input :disabled="forbid" v-model="isSubscribe" type="radio" value="no" name="radio-question" />
No
</label>
</div>
@@ -382,6 +412,7 @@
<p>If NO, please share why:<span class="fontColor">*</span></p>
<label>
<input
:disabled="forbid"
type="checkbox"
value="Not useful"
name="reasonForNotSubscribe"
@@ -390,11 +421,12 @@
Not useful
</label>
<label>
<input type="checkbox" value="Too expensive" v-model="reasonForNotSubscribe" name="reasonForNotSubscribe" />
<input :disabled="forbid" type="checkbox" value="Too expensive" v-model="reasonForNotSubscribe" name="reasonForNotSubscribe" />
Too expensive
</label>
<label>
<input
:disabled="forbid"
type="checkbox"
name="reasonForNotSubscribe"
ref="isSubscribeCauseOthers"
@@ -402,6 +434,7 @@
/>
<span> Others:</span>
<textarea
:readonly="forbid"
name="comments"
id="text-area"
v-model="othersIsSubscribeCause"
@@ -416,13 +449,14 @@
list:
</p>
<textarea
:readonly="forbid"
name="comments"
id="text-area"
v-model="designTools"
placeholder="Please enter..."
></textarea>
</div>
<div class="section">
<div v-if="!forbid" class="section">
<button id="submit" @click="setSubmit">Submit</button>
</div>
</div>
@@ -437,7 +471,7 @@ import { Https } from "@/tool/https";
import { defineComponent, toRefs,ref, reactive, createVNode } from "vue";
export default defineComponent({
setup() {
const feedbackData:any = reactive({
let feedbackData:any = reactive({
userName:'',
gender:'Female',
occupation:'',
@@ -684,7 +718,42 @@ export default defineComponent({
).catch(res=>{
});
}
let forbid = ref(false)
let initData = (data:any) => {
// Object.assign(feedbackData,data)
// console.log(JSON.parse(JSON.stringify(feedbackData)));
forbid.value = true
for (const iterator in data) {
if(typeof data[iterator] == 'object'){
data[iterator].forEach((item:any)=>{
if(item*1){
feedbackData[iterator].push(item)
}else{
if(iterator == 'helpful'){
refList.helpfulOthers.checked = true
othersHelpful.value = item
}else if(iterator == 'improve'){
refList.improvelOthers.checked = true
othersImprovel.value = item
}
}
})
}else{
feedbackData[iterator] = data[iterator]
}
}
if(data.othersIsSubscribeCause){
refList.isSubscribeCauseOthers.checked = true
let arr = []
data.reasonForNotSubscribe.forEach((item:any,index:number) => {
if(index <= 1){
arr.push(item)
}
});
othersIsSubscribeCause.value = data.othersIsSubscribeCause[2]
}
// feedbackData = reactive(...data)
}
return {
...toRefs(feedbackData),
...toRefs(refList),
@@ -693,6 +762,8 @@ export default defineComponent({
othersIsSubscribeCause,
CountryList,
setSubmit,
forbid,
initData,
};
},
@@ -710,15 +781,49 @@ export default defineComponent({
@import url("https://fonts.googleapis.com/css2?family=Quicksand:wght@400;700&display=swap");
.feedbackSurvey {
font-family: "Quicksand", sans-serif;
font-family: 'Roboto', sans-serif;
text-align: center;
line-height: 1.5;
// background: linear-gradient(180deg, #f3f3e6 0%, #eee4f3 100%);
margin: 1rem;
height: 100%;
overflow-y: auto;
&.active{
#title {
font-size: 3rem;
}
#description {
font-size: 1.4rem;
}
#survey-form {
width: 90%;
padding: 1.5rem;
font-size: 1.2rem;
}
p{
font-size: 1.4rem;
}
input,
#dropdown {
padding: 5px;
}
textarea {
max-height: 125px;
padding: 5px;
}
input[type="radio"],
input[type="checkbox"] {
width: 1rem;
height: 1rem;
}
input,select{
height: 3.5rem;
}
}
#main{
background: linear-gradient(45deg, #eee4f3, #f3f4e6);
padding: 2rem;
}
#title {
font-size: 6rem;
@@ -730,7 +835,7 @@ export default defineComponent({
font-size: 2.8rem;
font-style: italic;
}
#survey-form {
position: relative;
background: rgba(255, 255, 255, 0.2);
@@ -742,12 +847,14 @@ export default defineComponent({
padding: 3rem;
box-shadow: -1px 1px 5px 0.5px;
font-size: 2.4rem;
transition: width 1s ease;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
&.active{
transition: width 1s ease;
}
}
@media (max-width: 760px) {
form {
width: 75%;
@@ -763,6 +870,9 @@ export default defineComponent({
margin: 1rem;
width: 100%;
}
.section:last-child{
margin-bottom: 4rem;
}
.w40 {
width: 40%;
}