vue3项目根据kabat规则，纯前端解析蛋白质序列

项目场景：

vue3项目根据kabat规则，纯前端解析蛋白质序列

ps: 只解析了一个示例蛋白质，公司最后决定还是由后端去处理，前端调接口就行，写了半天，感觉怪可惜的，分享出来有谁感兴趣可以看一看

---

 描述：将下面的QVQLQQSGGGLVQPGGSLKISCSASGFTFRSYGMHWVRQAPVKGLEHVATISAKGESSFY
ADSAKGRFTISRDNSKNTLHLQMNSLRPEDSAVYYCVKRRRQWLVNSSFDFWGQGTLVTV

解析成：

---

代码：

思路真的懒得写，你可以放ai里面搜一下，用的ant design vue哦

<script setup lang="ts">
import { ref, watch } from 'vue';
const proteinValue = ref<string>('');

type KabatRegions = {
  [key: string]: { start: number; end: number };
};

const kabatRegions: KabatRegions = {
  HFR1: { start: 1, end: 30 },
  'CDR-H1': { start: 31, end: 35 },
  HFR2: { start: 36, end: 49 },
  'CDR-H2': { start: 50, end: 66 },
  HFR3: { start: 67, end: 98 },
  'CDR-H3': { start: 99, end: 111 },
  HFR4: { start: 112, end: 120 },
};
const columns = [
  { title: 'Region', dataIndex: 'region' },
  { title: 'Sequence Fragment', dataIndex: 'squence' },
  { title: 'Residues', dataIndex: 'residues' },
  { title: 'Length', dataIndex: 'length' },
];
const renderData:any = ref([]);
const parsedData = new Map();
const proteinFn = () => {
  const regex = /[^a-zA-Z]/g;
  const proteinString = proteinValue.value.replace(regex, '');
  console.log('proteinString', proteinString);

  for (const region in kabatRegions) {
    if (kabatRegions.hasOwnProperty(region)) {
      const { start, end } = kabatRegions[region];
      parsedData.set(region, proteinString?.substring(start - 1, end));
    }
  }
  console.log('parsedData', parsedData);
};

function fragmentFactory(region: string, squence: string, residues: string) {
  return {
    region,
    squence,
    residues,
    length: squence.length,
  };
}
// 拼装数据
const assemblingDatagram = () => {
  let num = 0;
  const data = []
  for (const [key, value] of parsedData) {
    const residues = `${num + 1} - ${num + value.length}`;
    num += value.length;
    data.push(fragmentFactory(key, value, residues));
  }
  renderData.value = data
  console.log('renderData', data);
};

const ProcessingSequenceFn = async () => {
  await proteinFn();
  await assemblingDatagram();
};

const text = `A dog is a type of domesticated animal.Known for its loyalty and faithfulness,it can be found as a welcome guest in many households across the world.`;
const activeKey = ref(['1', '2', '3']);
const customStyle =
  'background: linear-gradient(348deg, #858585 21%,#767373 48%,#434343 80%);border-radius: 8px;margin-bottom: 24px;border: 0;overflow: hidden';

watch(activeKey, val => {
  console.log(val);
});
</script>

<template>
  <div class="batch-page">
    <a-textarea
      v-model:value="proteinValue"
      placeholder="请输入对应的蛋白质序列"
      :auto-size="{ minRows: 5, maxRows: 10 }"
    />
    <a-space :size="20" style="margin: 20px 0 40px 0">
      <a-button type="primary" @click="ProcessingSequenceFn">处理序列</a-button>
      <a-button>清空</a-button>
    </a-space>
    <a-collapse v-model:activeKey="activeKey">
      <a-collapse-panel key="1" header="Numbering & Regions" :style="customStyle">
        <p>{{ text }}</p>
      </a-collapse-panel>
      <a-collapse-panel key="2" header="Region Sequence Details" :style="customStyle">
        <h4>Regions Definition : Kabat</h4>
        <a-table :columns="columns" :data-source="renderData" size="middle" />
      </a-collapse-panel>
      <a-collapse-panel key="3" header="This is panel header 3" :style="customStyle">
        <p>{{ text }}</p>
      </a-collapse-panel>
    </a-collapse>
  </div>
</template>

<style lang="scss" scoped>
.batch-page {
  margin: 20px 60px;
}

:deep(.ant-collapse) {
  border: none;
  background-color: transparent;
}

:deep(.ant-collapse > .ant-collapse-item > .ant-collapse-header) {
  color: white;
  font-size: 16px;
}
</style>

最近：

最近劝退所有准备入行前端的人，我想三年前，那个写纯纯html页面开心的一批，然后义无返顾深入前端的孩子，怎么也想不到，自己辛辛苦苦这么久，就是这样一个结果，真！ 为爱发电了，准备找不到合适的岗位就先不找了，把毕设雕琢完之后就去度假了。

最近感觉three.js 蛮酷的，等我把毕设搞完就准备去学习一下，要是个人网站上搞个这个真的超级酷的好嘛！！！