Files
ylst-pc/src/views/Answer/questions/components/AnswerViewerMatrix.vue
2022-10-21 10:32:45 +08:00

190 lines
4.1 KiB
Vue

<template>
<div v-if="config.is_three_dimensions" class="answerviewer">
<SceneSurveyViewer v-if="shopData"
:shopData="shopData"
:page="page"
:sceneAction="sceneAction"
:surveyId="surveyId"
:defaultWare="defaultWare"
:isLocked="!!config.is_initialize"
@onLoadingCompletion="onLoadingCompletion"
@onFromSceneHoldToShelf="onFromSceneHoldToShelf"
@onBehaviorFlush="onBehaviorFlush"
/>
<div class="page pageNext" @click="next">
<i class="iconfont">&#xe680;</i>
</div>
<div class="page pagePre" @click="previous">
<i class="iconfont">&#xe67f;</i>
</div>
<div class="q-content-top">
<div class="title">{{stem}}</div>
<slot name="page" :rowIndex="rowIndex"></slot>
</div>
</div>
<div v-else>
<slot></slot>
</div>
</template>
<script>
import { defineComponent } from "vue";
import SceneSurveyViewer from "@/views/planetDesign/Design/components/config/Viewer3D/SceneSurveyViewer";
import { buildShopDataDemo } from "@/views/planetDesign/Design/components/config/config3d.utils";
import BrowsingRecordApi from "./api.js";
export default defineComponent({
components: {
SceneSurveyViewer
},
props: {
isStemMiddle: {
type: Boolean,
default: false
},
// 题干
stem: {
type: String,
default: "",
},
// 配置
config: {
type: Object,
default: () => {},
},
// 行数-3D模块的分页数
rowLength: {
type: Number,
default: 0
},
// 样本SN
answerSn: {
type: String,
default: "",
},
// 样本SN
answerSurveySn: {
type: String,
default: "",
},
question: {
type: Object,
default: () => ({}),
},
},
computed: {
surveyId() {
return this.config.scene;
},
shelfId() {
return this.config.shelf || this.scene.shelves[0].planetid;
},
scene() {
return this.config.scene_information;
},
shelves() {
if (!this.scene) return [];
return this.scene.shelves;
},
shelf() {
return this.shelves.find(
(x) => x.planetid == this.config.shelf
);
},
wares() {
if (!this.shelf) return [];
return this.shelf.wares;
},
ware() {
return this.wares.find(
(x) => x.planetid == this.config.ware
);
},
defaultWare() {
return this.ware;
},
},
data(){
return {
shopData: null,
page: null,
rowIndex: 0,
sceneAction: null
};
},
mounted() {
this.$emit("update:answer", {});
this.shopData = buildShopDataDemo(this.scene);
this.rowIndex = 0;
},
methods: {
next(){
if(this.rowIndex + 1 >= this.rowLength){
this.$emit("custom-next");
return;
}
this.rowIndex += 1;
},
previous(){
if(this.rowIndex <= 0){
this.$emit("custom-previous");
return;
}
this.rowIndex -= 1;
},
onLoadingCompletion(){
// if(this.config.scene_information.arrangeType == "col"){
this.page = {
cells: this.shelf.cells.map((cell, index) => {
return {
...cell,
...this.wares[index % this.wares.length]
}
})
};
// }
},
onFromSceneHoldToShelf(){
this.sceneAction = {
action: "hold_to_shelf",
}
},
// 用户行为记录
onBehaviorFlush(data) {
// 判断是否记录
if(!this.config.is_behavior) return;
if(!data[0]) return;
// BrowsingRecordApi.browsingRecordSurveys({
// sn: this.answerSurveySn,
// data: {
// sn: this.answerSn,
// question_index: this.question.question_index,
// question_type: this.question.question_type,
// planet_id: data[0].wareId,
// shelve_planet_id: this.shelfId,
// action_info: data,
// },
// }).catch((e) => console.error(e));
},
}
});
</script>
<style lang="scss" scoped>
@import url("./viewer.utils.scss");
.answerviewer {
top: 0;
left: 0;
width: 100vw;
height: 100vh;
position: fixed;
background-color: #fff;
z-index: 99;
}
</style>