thridLargeScreen/src/views/physical/Components/DialogViewSurveyResult.vue

<template>
  <div>
    <el-dialog
      :title="`查看问卷结果: ${props.rowData?.surveyMechanism?.name}(ID: ${props.rowData?.surveyMechanism?.id})`"
      v-model="visible"
    >
      <div class="page-logic-result">
        <div class="p-2 text-sm">
          <div v-for="(item, index) in state.surveyResultData" :key="index">
            <!-- <div>{{ item }}</div> -->
            <Component :is="comps[item.type]" :item="item" class="mb-2" />
          </div>
        </div>
      </div>
    </el-dialog>
  </div>
</template>
<script setup>
import { request, msToDate, parseJsonData } from "@/utils";
import {
  computed,
  onMounted,
  reactive,
  ref,
  defineProps,
  defineEmits,
  watch
} from "vue";
import { useRoute, useRouter } from "vue-router";
import Text from "@/components/Survey/Text.vue";
import TitleAndContents from "@/components/Survey/TitleAndContents.vue";
import RichText from "@/components/Survey/RichText.vue";

const route = useRoute();
const router = useRouter();
const key = ref(Date.now());
const emits = defineEmits(["update:show"]);
const props = defineProps({
  rowData: {
    type: Object,
    default: () => {}
  },
  show: Boolean
});
watch(
  () => props.show,
  (n, o) => {
    if (n) {
      console.log("监听成功");
      init();
    }
  }
);
const comps = {
  text: Text,
  titleAndContents: TitleAndContents,
  richText: RichText
};
const visible = computed({
  get() {
    return props.show;
  },
  set(n) {
    emits("update:show", n);
  }
});

const areaSelectRef = ref();
const state = reactive({
  detail: {
    id: "",
    title: "",
    needPassword: false,
    canSaveArchives: ""
  },

  surveyResultData: []
});

let repeatCount = 0;
const init = async () => {
  const { data } = await request.get(
    "/surveyService/mechanism/surveyResult/detail",
    {
      params: {
        id: props.rowData.id
      }
    }
  );
  console.log(data);
  if (!data.detail.resultRaw && repeatCount <= 5) {
    repeatCount++;
    setTimeout(() => {
      init();
    }, 5e2 * 2 ** repeatCount);
    return;
  }
  state.surveyResultData =
    parseJsonData(data.detail.resultRaw, {}).result?.surveyResultData || [];
  key.value = Date.now();
  console.log(state.surveyResultData);
};
// init();
const reset = () => {
  router.replace({
    name: "decisionQuestion",
    query: {
      id: route.query.surveyMechanismId,
      _r: Date.now()
    }
  });
};
</script>
<style lang="scss" scoped>
.block {
  display: block;
  box-shadow: 0 0 2px #ddd;
  margin: 10px 0;
  box-sizing: border-box;
  padding: 10px;
  overflow: hidden;
  &.primary {
    background: #fefaeb;
  }
}
.block-title {
  font-size: 16px;
  color: #903128;
}
.block-tag {
  display: inline-block;
  background: #fcfcf9;
  border-radius: 4px;
  border: 1px solid #eeeeee;
  padding: 8px 15px;
  margin: 0 6px 6px 0;
}
.dot-item {
  padding-left: 16px;
  box-sizing: border-box;
  position: relative;
  font-size: 14px;
  color: #999;
  line-height: 1.8;
  margin-bottom: 10px;
  word-break: break-all;
  &::before {
    content: "";
    position: absolute;
    top: 8px;
    left: 4px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #903128;
  }
}
.block-table {
  border-collapse: collapse;
  margin: 10px 0;
  width: 100%;
  tbody {
    width: 100%;
  }
  th {
    color: #903128;
    line-height: 40px;
    background: #f3eae0;
  }
  td {
    color: #888;
    width: 60%;
  }
  th:not(:last-of-type),
  td:not(:last-of-type) {
    border-right: 1px solid #eee;
    text-align: center;
  }
  td:not(:last-of-type) {
    color: #333;
    width: 40%;
  }
  tr:nth-child(even) {
    background: #fcfcf9;
  }
  tr:nth-child(odd) {
    background: #f4f0e1;
  }
  td {
    padding: 10px;
  }
}
.block-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
}
.charts-style {
  width: 100%;
  height: 360px;
}
.exponent-item {
  display: flex;
  align-items: center;
}
</style>