feat: 完成可视化模块-雷达图

src/graphql/questionnaire.graphql.ts

@@ -3,7 +3,7 @@ import gql from "graphql-tag";
 export const meGQL = gql`
 	query me {
 		me {
-			questionnairesAsOwner {
+			questionnairesAsOwnerAsFriend {
 				questionnaire {
 					id
 					type

src/graphql/show.graphql.ts

@@ -0,0 +1,27 @@
+import gql from "graphql-tag";
+
+export const listAsOwnerGQL = gql`
+	query listAsOwner($questionnaireId: String!) {
+		listAsOwner(questionnaireId: $questionnaireId) {
+			friend {
+				id
+				nickName
+				avatarUrl
+			}
+			visualization
+		}
+	}
+`;
+
+export const listAsFriendGQL = gql`
+	query listAsFriend($questionnaireId: String!) {
+		listAsFriend(questionnaireId: $questionnaireId) {
+			friend {
+				id
+				nickName
+				avatarUrl
+			}
+			visualization
+		}
+	}
+`;

src/pages/questionnaire/index.vue

@@ -89,7 +89,7 @@ onShow(async () => {
 		throw new Error(`获取已填写问卷失败: ${errMe}`);
 	}
 	console.log("dataMe: ", dataMe);
-	completed.value = dataMe?.me.questionnairesAsOwner.map((item: any) => item.questionnaire) || [];
+	completed.value = dataMe?.me.questionnairesAsOwnerAsFriend.map((item: any) => item.questionnaire) || [];
 	// TODO 这里只查了拥有者，后面可以查填写者，把为朋友填写的也可以查出来
 	if (errFindAllQ) {
 		uni.showToast({

src/pages/show/components/radar.vue

@@ -1,14 +1,89 @@
 <template>
-	<view class="charts-box">
-		<qiun-data-charts type="radar" :opts="opts" :chartData="chartData" />
+	<view class="radar-container">
+		<view class="charts-box">
+			<qiun-data-charts type="radar" :opts="opts" :chartData="chartData" />
+		</view>
+		<view class="friend-select">
+			<view class="head">
+				<view class="text">请选择好友(最多两位)</view>
+				<view class="action">
+					<button
+						style="
+							width: 80px;
+							height: 40px;
+							line-height: 34px;
+							margin-left: 10px;
+							background-color: #ffffff;
+							border: 3px solid #0256ff;
+							color: #0256ff;
+						"
+						@click="submit"
+					>
+						查看
+					</button>
+				</view>
+			</view>
+			<view class="friend-list-container">
+				<checkbox-group @change="checkboxChange">
+					<label class="friend-list" v-for="friend in friendList" :key="friend.id">
+						<view class="info">
+							<image
+								style="height: 80%; border-radius: 50%"
+								mode="heightFix"
+								:src="meStore.user?.avatarUrl || userDefaultData.avatarUrl"
+							></image>
+							<view class="nick-name">{{ friend.nickName }}</view>
+						</view>
+						<view>
+							<checkbox :value="friend.id" :disabled="friend.disabled" />
+						</view>
+					</label>
+				</checkbox-group>
+			</view>
+			<view v-if="!friendList.length" class="no-data">
+				<empty info="暂无好友为你填写该问卷"></empty>
+			</view>
+		</view>
 	</view>
 </template>
 <script setup lang="ts">
-import { reactive, ref } from "vue";
+import { reactive, ref, type Ref } from "vue";
 import qiunDataCharts from "@/components/qiun-data-charts/qiun-data-charts.vue";
-import { onReady } from "@dcloudio/uni-app";
+import { useQuery } from "villus";
+import { listAsOwnerGQL } from "@/graphql/show.graphql";
+import type { ListAsOwnerSourceDataI, FriendItemI } from "../show.interface";
+import { watch } from "vue";
+import { useMeStore } from "@/stores/me.store";
+import { onBeforeMount } from "vue";
+import empty from "@/components/empty.vue";
+import { userDefaultData } from "@/const";
 
-const chartData = ref({});
+interface propsI {
+	questionnaireId: string;
+}
+
+const props = defineProps<propsI>();
+
+const meStore = useMeStore();
+
+const chartData = reactive({
+	categories: ["神经质", "外向型", "开放性", "宜人性", "尽责性"],
+	series: [
+		{
+			name: "自己",
+			data: [0, 0, 0, 0, 0],
+		},
+		// TODO 截断名字
+		{
+			name: "未选择",
+			data: [0, 0, 0, 0, 0],
+		},
+		{
+			name: "未选择",
+			data: [0, 0, 0, 0, 0],
+		},
+	],
+});
 const opts = {
 	timing: "easeOut",
 	duration: 1000,
@@ -45,7 +120,7 @@ const opts = {
 			gridColor: "#CCCCCC",
 			gridCount: 3,
 			opacity: 0.2,
-			max: 200,
+			max: 130,
 			labelShow: true,
 			gridEval: 1,
 			radius: 0,
@@ -89,39 +164,122 @@ const opts = {
 	},
 };
 
-onReady(() => {
-	getServerData();
+const sourceData: Ref<ListAsOwnerSourceDataI[]> = ref([]);
+const friendList: Ref<FriendItemI[]> = ref([]);
+const curSelect: Ref<string[]> = ref([]); // friendId Array
+
+watch(sourceData, (newVal) => {
+	newVal.forEach((item) => {
+		if (item.friend.id !== meStore.user?.id) {
+			friendList.value.push({
+				...item.friend,
+				visualization: Object.values(JSON.parse(item.visualization)),
+				disabled: false,
+			});
+		} else {
+			chartData.series[0].data = Object.values(JSON.parse(item.visualization));
+			console.log("chartData: ", chartData);
+		}
+	});
+});
+
+onBeforeMount(async () => {
+	await getFriendListAsOwner();
 });
 
-function getServerData() {
-	//模拟从服务器获取数据时的延时
-	setTimeout(() => {
-		//模拟服务器返回数据，如果数据格式和标准格式不同，需自行按下面的格式拼接
-		let res = {
-			categories: ["神经质", "外向型", "开放性", "宜人性", "尽责性"],
-			series: [
-				{
-					name: "自己",
-					data: [90, 110, 165, 195, 187],
-				},
-				{
-					name: "朋友1",
-					data: [190, 210, 105, 35, 27],
-				},
-        {
-					name: "朋友2",
-					data: [90, 20, 155, 135, 27],
-				},
-			],
-		};
-		chartData.value = JSON.parse(JSON.stringify(res));
-	}, 500);
+async function getFriendListAsOwner() {
+	const { execute } = useQuery({ query: listAsOwnerGQL, variables: { questionnaireId: props.questionnaireId } });
+	const { error, data } = await execute();
+	if (error) {
+		uni.showToast({
+			title: `获取朋友列表失败: ${error}`,
+			icon: "error",
+			duration: 2000,
+		});
+		throw new Error(`获取朋友列表失败: ${error}`);
+	}
+	sourceData.value = data?.listAsOwner || [];
+	console.log("sourceData.value: ", sourceData.value);
+}
+
+function submit() {
+	const friend1 = friendList.value.find((item) => item.id === curSelect.value[0]);
+	chartData.series[1].data = friend1?.visualization || [0, 0, 0, 0, 0];
+  const friend2 = friendList.value.find((item) => item.id === curSelect.value[1]);
+	chartData.series[2].data = friend2?.visualization || [0, 0, 0, 0, 0];
+}
+
+function checkboxChange(e: any) {
+	console.log("checkboxChange: ", e.detail.value);
+	const select: string[] = e.detail.value;
+	curSelect.value = select;
+	// 实现最多复选两位好友
+	if (select.length >= 2) {
+		for (let i = 0; i < friendList.value.length; i++) {
+			if (!select.includes(friendList.value[i].id)) {
+				friendList.value[i].disabled = true;
+			}
+		}
+	} else {
+		for (let i = 0; i < friendList.value.length; i++) {
+			friendList.value[i].disabled = false;
+		}
+	}
 }
 </script>
 <style lang="scss" scoped>
-  .charts-box {
-    background-color: #FFFFFF;
-    width: 100vw;
-    height: 300px;
-  }
+.charts-box {
+	background-color: #ffffff;
+	width: 100vw;
+	height: 300px;
+}
+.radar-container {
+	.friend-select {
+		.head {
+			height: 40px;
+			width: calc(100vw - 40px);
+			display: flex;
+			justify-content: space-between;
+			align-items: center;
+			padding: 10px 20px;
+			background-color: #ffffff;
+			border-top: 1px solid $theme-color-gray-lighter-1;
+		}
+		.text {
+			height: 40px;
+			line-height: 40px;
+			font-weight: 900;
+			font-size: 18px;
+		}
+	}
+
+	.friend-list-container {
+		width: calc(100vw - 40px);
+		padding: 0 20px;
+		background-color: #ffffff;
+		.friend-list {
+			height: 60px;
+			background-color: #ffffff;
+			border-top: 1px solid $theme-color-gray-lighter-1;
+			display: flex;
+			justify-content: space-between;
+			align-items: center;
+
+			.info {
+				height: 60px;
+				width: 50vw;
+				display: flex;
+				align-items: center;
+
+				.nick-name {
+					margin-left: 10px;
+				}
+			}
+		}
+	}
+
+	.no-data {
+		padding-top: 60px;
+	}
+}
 </style>

src/pages/show/index.vue

@@ -8,7 +8,7 @@
 			<view v-if="showType === -1" class="no-data">
 				<empty info="请先选择问卷"></empty>
 			</view>
-			<radar v-if="showType === 0"></radar>
+			<radar v-if="showType === 0" :questionnaire-id="curValue"></radar>
 		</view>
 	</view>
 </template>
@@ -39,7 +39,7 @@ const range = computed(() => {
 */
 const range: Ref<RangeI[]> = ref([]);
 
-const curValue = ref();
+const curValue = ref("");
 const showType = ref(-1);
 
 watch(questionnaires, (newVal) => {
@@ -60,7 +60,7 @@ onShow(async () => {
 		});
 		throw new Error(`获取已填写问卷失败: ${error}`);
 	}
-	questionnaires.value = data?.me.questionnairesAsOwner.map((item: any) => item.questionnaire) || [];
+	questionnaires.value = data?.me.questionnairesAsOwnerAsFriend.map((item: any) => item.questionnaire) || [];
 });
 
 function chooseQuestionnaire(e: any) {

src/pages/show/show.interface.ts

@@ -1,5 +1,22 @@
 export interface RangeI {
-  text: string;
-  value: string;
-  disable?: boolean;
-}
+	text: string;
+	value: string;
+	disable?: boolean;
+}
+
+export interface ListAsOwnerSourceDataI {
+	friend: {
+    id: string;
+		nickName: string;
+		avatarUrl: string;
+	};
+	visualization: string;
+}
+
+export interface FriendItemI {
+	id: string;
+	nickName: string;
+	avatarUrl: string;
+	visualization: number[];
+	disabled: boolean;
+}