量表计算公式

src/routes.js

@@ -235,12 +235,21 @@ import TermSet from '@components/knowledgeExtra/TermSet.vue';
 import AddTermSet from '@components/knowledgeExtra/AddTermSet.vue';
 
 
+
 export default [
     {
         path: '/',
         name: 'login',
         component: Login,
     },
+    {
+        name: "newpage",
+        path: '/newpage',
+        component: () => import("@/views/NewPage.vue"),
+        meta: {
+            requireAuth: false,
+        },
+    },
     {
         path: '/register',
         name: 'Register',

src/views/NewPage.vue

@@ -0,0 +1,207 @@
+
+<template>
+  <div class="new-page">
+    <div class="table">
+      <el-table
+        :data="tableData"
+        style="width: 500px"
+        :border="true"
+        stripe
+        :span-method="objectSpanMethod"
+        :cell-style="{ borderColor: '#C5C8C9', borderWidth: '2px' }"
+        :header-cell-style="{ borderColor: '#C5C8C9', borderWidth: '2px' }"
+      >
+        <el-table-column label="属" class-name="genus" width="50%">
+          <el-table-column prop="type" label="类型" class-name="genus-column">
+            <template slot-scope=""></template>
+          </el-table-column>
+          <el-table-column
+            prop="genericName"
+            label="属名"
+            class-name="genus-column"
+          >
+          </el-table-column>
+          <el-table-column
+            prop="relativeRate"
+            label="相对丰度"
+            class-name="genus-column"
+          >
+          </el-table-column>
+          <el-table-column prop="num" label="序列数" class-name="genus-column">
+          </el-table-column>
+        </el-table-column>
+        <el-table-column label="种" class-name="species">
+          <el-table-column
+            prop="kindName"
+            label="种名"
+            class-name="species-column"
+          >
+          </el-table-column>
+          <el-table-column
+            prop="trustRate"
+            label="鉴定置信度"
+            class-name="species-column"
+          >
+          </el-table-column>
+          <el-table-column
+            prop="speciesNum"
+            label="序列数"
+            class-name="species-column"
+          ></el-table-column>
+        </el-table-column>
+      </el-table>
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  data() {
+    return {
+      tableData: [],
+      tData: [
+        {
+          type: "Bacillus",
+          genericName: "属名1",
+          relativeRate: 0.45,
+          num: 100,
+          strain: [
+            {
+              kindName: "Bacillus subtilis",
+              trustRate: 0.98,
+              num: 50,
+            },
+            {
+              kindName: "Bacillus cereus",
+              trustRate: 0.85,
+              num: 30,
+            },
+            {
+              kindName: "Bacillus cereus",
+              trustRate: 0.85,
+              num: 30,
+            },
+          ],
+        },
+        {
+          type: "Bacillus",
+          genericName: "属名2",
+          relativeRate: 0.45,
+          num: 100,
+          strain: [
+            {
+              kindName: "Bacillus subtilis",
+              trustRate: 0.98,
+              num: 50,
+            },
+            {
+              kindName: "Bacillus cereus",
+              trustRate: 0.85,
+              num: 30,
+            },
+          ],
+        },
+      ],
+    };
+  },
+  methods: {
+    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
+      if (columnIndex < 4) {
+        const { spanStartIndex, spanNum } = this.tableSpan[row.genericName];
+        if (spanStartIndex === rowIndex) {
+          return [spanNum, 1];
+        } else {
+          return [0, 0];
+        }
+      } else {
+        return [1, 1];
+      }
+      // console.log(row, column, rowIndex, columnIndex);
+      // return [1, 1];
+    },
+  },
+  computed: {
+    tableSpan() {
+      const spanObj = {};
+      let genericName;
+      this.tableData.forEach((el, index) => {
+        if (!spanObj.hasOwnProperty(el.genericName)) {
+          genericName = el.genericName;
+          spanObj[genericName] = { spanStartIndex: index, spanNum: 1 };
+        } else {
+          spanObj[genericName].spanNum++;
+        }
+      });
+      return spanObj;
+    },
+  },
+  watch: {
+    tData: {
+      immediate: true,
+      deep: true,
+      handler(newVal, oldVal) {
+        newVal.forEach((d) => {
+          d.strain.forEach((el) => {
+            this.tableData.push({
+              type: d.type,
+              genericName: d.genericName,
+              relativeRate: d.relativeRate,
+              num: d.num,
+              kindName: el.kindName,
+              trustRate: el.trustRate,
+              speciesNum: el.num,
+            });
+          });
+        });
+      },
+    },
+  },
+  created: function () {},
+  mounted: function () {},
+};
+</script>
+
+<style lang="less" scoped>
+.new-page {
+  .table {
+    & /deep/ .genus {
+      background-color: #81d2e5;
+      color: white;
+      font-size: 20px;
+      font-weight: 800;
+    }
+    & /deep/ .species {
+      background-color: #008cd6;
+      color: white;
+      font-size: 20px;
+      font-weight: 800;
+    }
+    & /deep/ .el-table__header-wrapper .genus-column {
+      background-color: #dceef6;
+      font-size: 16px;
+      padding: 5px 0px;
+      .cell {
+        min-height: 30px;
+        vertical-align: middle;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+      }
+    }
+    & /deep/ .el-table__header-wrapper .species-column {
+      background-color: #d5edff;
+      font-size: 16px;
+      padding: 5px 0px;
+      .cell {
+        min-height: 30px;
+        vertical-align: middle;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+      }
+    }
+    & /deep/.el-table__body-wrapper .species-column {
+      // background: skyblue;
+    }
+  }
+}
+</style>

vue.config.js

@@ -1,8 +1,8 @@
 const path = require('path');
 // const proxy_path = 'http://192.168.2.241:88';
 
-const proxy_path = 'http://173.18.12.192:5050';
-// const proxy_path = 'http://192.168.65.95:5050';    //沙雅线上地址
+// const proxy_path = 'http://173.18.12.195:5050';
+const proxy_path = 'http://192.168.65.95:5050';    //沙雅线上地址
 
 // const proxy_path = 'http://192.168.3.117:5050';//周铁刚
 // const proxy_path = 'http://192.168.3.113:5050'; //王峰