【vue】医疗色盲实现

前言：色盲是一种先天性色觉障碍疾病。色觉障碍有多种类型，最常见的是红绿色盲。

在生活中，我们处处会用到色盲检测，所以就有了以下小demo

需求：题库总共12道，题以及答案出现的顺序随机。

1.随机定义两组数据 ，一个为题目和选项，一个为正确答案，还有一些判断

import { reactive, onMounted, ref } from "vue";
let imgdata = reactive({ values: {} });
const resultRes = reactive({ values: "" });
const centerDialogVisible = ref(false);
const illustrate = ref(false);
const data = reactive([
  {
    photo: new URL(`./img/colorblindness1.png`, import.meta.url).href,
    select: ["9", "8", "6"],
    id: 1,
  },
  {
    photo: new URL(`./img/colorblindness2.png`, import.meta.url).href,
    select: ["689", "898", "698"],
    id: 2,
  },
  {
    photo: new URL(`./img/colorblindness3.png`, import.meta.url).href,
    select: ["6", "86", "36"],
    id: 3,
  },
  {
    photo: new URL(`./img/colorblindness4.png`, import.meta.url).href,
    select: ["看不清", "6", "66"],
    id: 4,
  },
  {
    photo: new URL(`./img/colorblindness5.png`, import.meta.url).href,
    select: ["6", "0", "看不清"],
    id: 5,
  },
  {
    photo: new URL(`./img/colorblindness6.png`, import.meta.url).href,
    select: ["8", "9", "看不清"],
    id: 6,
  },
  {
    photo: new URL(`./img/colorblindness7.png`, import.meta.url).href,
    select: ["886", "看不清", "806"],
    id: 7,
  },
  {
    photo: new URL(`./img/colorblindness8.png`, import.meta.url).href,
    select: ["3", "2", "8"],
    id: 8,
  },
  {
    photo: new URL(`./img/colorblindness9.png`, import.meta.url).href,
    select: ["0", "看不清", "5"],
    id: 9,
  },
  {
    photo: new URL(`./img/colorblindness10.png`, import.meta.url).href,
    select: ["689", "680", "089"],
    id: 10,
  },
  {
    photo: new URL(`./img/colorblindness11.png`, import.meta.url).href,
    select: ["看不清", "鸡", "金鱼"],
    id: 11,
  },
  {
    photo: new URL(`./img/colorblindness12.png`, import.meta.url).href,
    select: ["鸭", "鸭、兔", "兔"],
    id: 12,
  },
]);

const accurate = reactive([
  {
    id: 3,
    index: "36",
    content: "红色盲",
  },
  {
    id: 4,
    index: "66",
    content: "红绿色盲",
  },
  {
    id: 5,
    index: "6",
    content: "绿色弱",
  },
  {
    id: 7,
    index: "806",
    content: "红色盲",
  },
  {
    id: 8,
    index: "3",
    content: "红色弱",
  },
  {
    id: 10,
    index: "689",
    content: "绿色盲",
  },
  {
    id: 12,
    index: "鸭、兔",
    content: "红绿色觉异常",
  },
]);
let radio = reactive({ values: "" });
const codeType = ref(false);
const SelectedList = reactive({ values: [] });

const exitBlindness = ref(false);

const selectedOptionIndex = ref(0); // 当前选中选项的索引
var numbers = data;

2.挂载后执行了一些初始化操作，包括设置随机数、设置代码类型、注册键盘事件监听器等。

onMounted(() => {
  getRandomNumber();
  codeType.value = true;
  window.addEventListener("keydown", handleMouseDown);
  window.addEventListener("keyup", handleKeydown);
  window.handleKeydown = handleKeydown;
});

2.将data中的顺序和data中select的顺序打乱。

  // 随机选择一个数并从数组中移除
function getRandomNumber() {
  if (codeType.value) {
    //保存用户选中的值
    SelectedList.values.push({
      select: radio.values,
      id: imgdata?.values?.id,
    });
    radio.values = null;
  }
  if (numbers.length != 0) {
    // 生成随机索引
    var randomIndex = Math.floor(Math.random() * numbers.length);
    // 获取随机数
    var randomNumber = numbers[randomIndex];

    // 从数组中移除已选择的数
    numbers.splice(randomIndex, 1);

    imgdata.values = randomNumber;

    //随机每一项
    shuffleArray(imgdata?.values?.select);

    //答案每次设置第一个值
    radio.values = imgdata?.values?.select?.[0];
    selectedOptionIndex.value = 0;
  } else {
    centerDialogVisible.value = true;
    exitBlindness.value = true;
    codeType.value = false;
  }
}

 //确保该项的答案不会重复
 function shuffleArray(array) {
  // 随机生成两个不同的索引
  //随机从题库生成某题
  const index1 = Math.floor(Math.random() * array.length);
  //随机从某题中生成答案
  let index2 = Math.floor(Math.random() * array.length);
  while (index2 === index1) {
    index2 = Math.floor(Math.random() * array.length);
  }
  // 交换数组元素
  [array[index1], array[index2]] = [array[index2], array[index1]];
  return array;
}

3.遥控器选项。注意用户一直按往左或者往右我们得做限制，并且用户按了下一步之后，我们要将默认值初始化。

  //遥控器用来存储选中的值
function handleKeydown(event) {
  if (event.key === "ArrowLeft") {
    // 按上箭头键并且不是最后一个选项，向右切换选项
    if (selectedOptionIndex.value > 0) {
      selectedOptionIndex.value--;
    } else {
      selectedOptionIndex.value = 2;
    }
  } else if (event.key === "ArrowRight") {
    if (selectedOptionIndex.value < 2) {
      selectedOptionIndex.value++;
    } else {
      selectedOptionIndex.value = 0;
    }
    // 按下箭头键并且不是弟一个选项，向左切换选项
  }

  radio.values = imgdata?.values?.select?.[selectedOptionIndex.value];

  if (event.key === "Enter") {
    if (exitBlindness.value) {
      result();
      if (centerDialogVisible.value === true) {
        centerDialogVisible.value = false;
        jumpIntroduction();
      }
      //回车抬起效果

      //跳转逻辑
    } else {
      document.querySelector(".el-button").style.backgroundColor = "";
      getRandomNumber();
    }
  }
}

4.将错误的选项收集起来，并和正确的做对比。最后返回辨认结果

//收集错误的选项
const result = () => {
  let container = [];
  SelectedList.values.map((v) => {
    accurate.map((v1) => {
      if (v.id == v1.id && v.select != v1.index) {
        container.push(v1.content);
      }
    });
  });
  console.log(container);
  if (container.length == 0) {
    resultRes.values = "正常";
  }
  if (container.length == 1) {
    resultRes.values = container[0];
  }
  if (container.length >= 2) {
    //收集后进行逻辑判断
    resultRes.values = getColorVisionType(container);
  }
  console.log('最终答案',resultRes.values);
};
//获取色盲类型
function getColorVisionType(colorVisionTypes) {
  if (colorVisionTypes.includes("红绿色盲")) {
    return "红绿色盲";
  }
  if (
    colorVisionTypes.includes("红色盲") &&
    colorVisionTypes.includes("绿色盲")
  ) {
    return "红绿色盲";
  } else if (
    colorVisionTypes.includes("红色盲") &&
    colorVisionTypes.includes("绿色弱")
  ) {
    return "红色盲、绿色弱";
  } else if (
    colorVisionTypes.includes("红色盲") &&
    colorVisionTypes.includes("红绿色觉异常")
  ) {
    return "红色盲、绿色弱";
  } else if (
    colorVisionTypes.includes("绿色盲") &&
    colorVisionTypes.includes("红绿色觉异常")
  ) {
    return "绿色盲、红色弱";
  } else if (
    colorVisionTypes.includes("绿色盲") &&
    colorVisionTypes.includes("红色弱")
  ) {
    return "绿色盲、红色弱";
  } else if (
    colorVisionTypes.includes("绿色盲") &&
    colorVisionTypes.includes("绿色弱")
  ) {
    return "绿色盲";
  } else if (
    colorVisionTypes.includes("红色盲") &&
    colorVisionTypes.includes("红色弱")
  ) {
    return "红色盲";
  } else if (colorVisionTypes.includes("红绿色觉异常")) {
    return "红绿色觉异常";
  } else if (
    colorVisionTypes.includes("红色弱") &&
    colorVisionTypes.includes("绿色弱")
  ) {
    return "红绿色觉异常";
  }
}

html部分：

<template>
  <div v-if="!illustrate" style="width: 100%; height: 100%">
    <div class="logo">
      <img src="./img/logo.png" alt="" />
    </div>
    <div class="ColorOptionsBox">
      <!-- <div class="ColorOptionsCenterimg"> -->
      <img
        :src="`./img/colorblindness${imgdata?.values?.id}.png`"
        alt=""
        class="ColorOptions"
      />
      <!-- </div> -->
      <div
        class="ColorOptionsCenter mb-2 flex items-center text-sm"
        @focus="true"
      >
        <el-radio-group
          v-model="radio.values"
          :default="imgdata?.values?.select?.[0]"
          style="width: 100%; text-align: center; justify-content: center"
          size="large"
        >
          <el-radio :label="imgdata?.values?.select?.[0]">{{
            imgdata?.values?.select?.[0]
          }}</el-radio>
          <el-radio :label="imgdata?.values?.select?.[1]">{{
            imgdata?.values?.select?.[1]
          }}</el-radio>
          <el-radio :label="imgdata?.values?.select?.[2]">{{
            imgdata?.values?.select?.[2]
          }}</el-radio>
        </el-radio-group>
      </div>
      <div
        style="display: flex; justify-content: center"
        @keyup.enter.prevent="getRandomNumber"
      >
        <el-row
          ><el-button
            type="primary"
            @click="getRandomNumber"
            style="
              width: 20.2rem;
              height: 6rem;
              font-size: 2rem;
              border-radius: 10px;
            "
            >下一页</el-button
          ></el-row
        >
      </div>
      <el-dialog
        v-model="centerDialogVisible"
        width="60%"
        height="140px"
        center
        style="
          height: 16%;
          border-radius: 10px;
          position: absolute;
          left: 50%;
          top: 50%;
          transform: translate(-50%, -150%);
        "
        :show-close="false"
      >
        <div style="text-align: center; font-size: 3.125rem">答题完毕</div>
        <template #footer>
          <span class="dialog-footer">
            <el-button type="primary" class="btnOk" @click="jumpIntroduction">
              ok
            </el-button>
          </span>
        </template>
      </el-dialog>
    </div>
  </div>
  <div class="introduction" v-else style="width: 100%; height: 100%">
    <div>
      <div>色盲的分类</div>
      <div>
        全色盲：分辨不出任何的颜色，眼中看到的颜色只有黑白灰之分。不同的颜色在眼中表现出来的是明暗之分。
      </div>
      <div>
        红色盲：俗称的第一色盲。患者表现为不能准确分辨红色，对红色与深绿色、蓝色与紫红色以及紫色不能准确的分辨。会把绿色当作黄色，紫色看成蓝色，将绿色和蓝色视为白色。
      </div>
      <div>
        绿色盲：第二色盲，患者表现为不能分辨淡绿色与深红色、紫色与青蓝色、紫红色与灰色，会把绿色视为灰色或暗黑色。医学上常把红色盲与绿色盲统称为红绿色盲。我们平常说的色盲一般指的就是红绿色盲。
      </div>
      <div>
        蓝黄色盲：第三色盲。患者表现为对蓝黄色混淆不清，而对红、绿色分辨清晰，这种色盲较为少见。
      </div>
      <div>
        全色弱：又称红绿蓝黄色弱。这类患者色觉障碍比全色盲程度要低，视力完全正常，也不存在全色盲的其他并发症。具体表现为在物体颜色深且鲜明时则能够正常分辨；如果颜色浅而不饱和时则分辨困难，这种患者很少见。
      </div>
      <div>
        部分色弱：分为红色弱（第一色弱）、绿色弱（第二色弱）和蓝黄色弱（第三色弱）等几种，其中以红绿色弱最为多见，具体表现为患者对红、绿色感受力差，在光照条件不好时，患者辨色能力近于红绿色盲；但物质色深、鲜明且光照条件好时，其辨色能力接近正常。
      </div>
      <div>
        色盲是一种先天性色觉障碍疾病。色觉障碍有多种类型，最常见的是红绿色盲。
      </div>
    </div>
  </div>
</template>

 效果图：

为了更好的阅读。我将我认为比较重要的代码分了好几部分并加以注释便于学习，想要直接用可能还需要微微修改一下哈。。。

如果想要源码的小伙伴可以关注私信我哦！！

最后还是希望大家看见能点个赞。。。路过也可以帮我点赞。。

原创不易，，大佬勿喷，，您的点赞是我最大的动力！！！