feat: 新增查看实验方案功能

src/views/processing/carTest/execution-test-plan/components/SchemeView.vue

+<template>
+  <el-drawer
+    title="实验方案"
+    :visible.sync="dialogManger.dialogVisible"
+    direction="rtl"
+    size="80%"
+    :before-close="handleClose"
+    :wrapper-closable="false"
+  >
+    <template slot="title">
+      <div class="custom_title">实验方案</div>
+    </template>
+
+    <div class="main-content-style">
+      <!--card统计值-->
+      <div class="message-list">
+        <div class="message-box" style="background-color: #2eba3c">
+          <div class="message-detail">
+            <div class="detail-title">审查细则(条)</div>
+            <div class="detail-num mt10">
+              <!-- {{ model.systemReviewTask.details }} -->
+            </div>
+          </div>
+          <svg-icon
+            class="message-icon"
+            width="64px"
+            height="64px"
+            icon-class="tag_shechaxize"
+          ></svg-icon>
+        </div>
+        <div class="message-box" style="background-color: #477bba">
+          <div class="message-detail">
+            <div class="detail-title">审查细则符合率（%）</div>
+            <div class="detail-num mt10">
+              <!-- {{ model.systemReviewTask.detailsPass }}% -->
+            </div>
+          </div>
+          <svg-icon
+            class="message-icon"
+            width="64px"
+            height="64px"
+            icon-class="tag_fuhelv"
+          ></svg-icon>
+        </div>
+        <div class="message-box" style="background-color: #eca740">
+          <div class="message-detail">
+            <div class="detail-title">标准条款(条)</div>
+            <div class="detail-num mt10">
+              <!-- {{ model.systemReviewTask.standards }} -->
+            </div>
+          </div>
+          <svg-icon
+            class="message-icon"
+            width="64px"
+            height="64px"
+            icon-class="tag_biaozhuntiaokuan"
+          ></svg-icon>
+        </div>
+        <div class="message-box" style="background-color: #47baba">
+          <div class="message-detail">
+            <div class="detail-title">标准条款通过率(%)</div>
+            <div class="detail-num mt10">
+              <!-- {{ model.systemReviewTask.standardsPass }}% -->
+            </div>
+          </div>
+          <svg-icon
+            class="message-icon"
+            width="64px"
+            height="64px"
+            icon-class="tag_biaozhuntiaokuan"
+          ></svg-icon>
+        </div>
+        <div class="message-box" style="background-color: #6c47ba">
+          <div class="message-detail">
+            <div class="detail-title">参与审查人数（人）</div>
+            <div class="detail-num mt10">
+              <!-- {{ model.systemReviewTask.person }} -->
+            </div>
+          </div>
+          <svg-icon
+            class="message-icon"
+            icon-class="tag_shenehrenshu"
+            width="64px"
+            height="64px"
+          ></svg-icon>
+        </div>
+      </div>
+
+      <!--审查表单概要-->
+
+      <div class="form-review-questionnaire">
+        <div class="title-display">
+          <span class="title-i"></span>
+          <span class="title-content">审查表单概要</span>
+          <div class="control-btns">
+            <div class="control-btn" @click="openAll()">
+              <icon-park
+                type="down-c"
+                theme="outline"
+                size="16"
+                style="margin-right: 5px"
+                fill="#303133"
+              />
+              全部展开
+            </div>
+            <div class="control-btn" @click="closeAll()">
+              <icon-park
+                type="up-c"
+                theme="outline"
+                size="16"
+                style="margin-right: 5px"
+                fill="#303133"
+              />
+              全部收起
+            </div>
+          </div>
+        </div>
+        <!--审查表单概要-->
+        <collapse v-model="activeNames" class="mt10">
+          <collapse-item
+            v-for="(item, key) in model"
+            :key="key"
+            :name="item.chapter"
+          >
+            <span slot="title" style="width: 100%">
+              <div class="standard-box">
+                <div class="standard-left">
+                  <div class="standard">标准：</div>
+                  <div class="standard-title">
+                    {{ item.chapter + item.text }}
+                  </div>
+                </div>
+                <!-- <div class="standard-result">
+                    审查结果：
+                    <span v-if="item.passed == 1" class="green">符合</span>
+                    <span v-else class="orange">不符合</span>
+                  </div> -->
+              </div>
+            </span>
+            <table class="table">
+              <tr>
+                <th>测试场景</th>
+                <th>测试方法</th>
+                <th>用例编号</th>
+                <th>用例名称</th>
+                <th>对应输入</th>
+                <th class="investigate-result">测试结果</th>
+              </tr>
+              <template v-for="(v, k) in item.testCaseList">
+                <tr :key="k">
+                  <td>
+                    {{ v.testScenario }}
+                  </td>
+                  <td>
+                    {{ v.testScenario }}
+                  </td>
+                  <td>
+                    {{ v.usecaseNo }}
+                  </td>
+                  <td>
+                    {{ v.testScenario }}
+                  </td>
+                  <td></td>
+                  <td align="center" class="investigate-result">
+                    <!-- <el-tag
+                        v-if="reviewDetail.result.passed === 1"
+                        size="medium"
+                        type="success"
+                        >通过</el-tag
+                      > -->
+                    <el-tag size="medium" type="warning">不通过</el-tag>
+                  </td>
+                </tr>
+              </template>
+            </table>
+          </collapse-item>
+        </collapse>
+      </div>
+    </div>
+  </el-drawer>
+</template>
+<script>
+import { testDetail } from '@/api/task/test'
+import collapse from '@/components/Collapse/collapse'
+import collapseItem from '@/components/Collapse/collapse-item'
+export default {
+  components: {
+    collapse: collapse,
+    'collapse-item': collapseItem
+  },
+  props: {
+    dialogManger: {
+      type: Object,
+      default: () => {
+        return {
+          dialogVisible: false,
+          source: {},
+          dialogEditId: undefined
+        }
+      }
+    }
+  },
+  data() {
+    return {
+      loading: true,
+      model: [],
+      activeNames: []
+    }
+  },
+  watch: {
+    async 'dialogManger.dialogVisible'(newValue) {
+      if (newValue) {
+        await this.getTestDetail(this.dialogManger.dialogEditId)
+        this.openAll()
+      }
+    }
+  },
+  methods: {
+    /** 关闭抽屉 */
+    handleClose() {
+      this.dialogManger.dialogVisible = false
+    },
+    /** 获取任务详情 */
+    async getTestDetail(id) {
+      this.loading = true
+      const res = await testDetail({ taskId: id })
+      this.model = res.data
+      this.loading = false
+    },
+    /** 全部展开 */
+    openAll() {
+      this.activeNames = this.model.map(i => {
+        return i.chapter
+      })
+    },
+    /** 全部收起 */
+    closeAll() {
+      this.activeNames = []
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.form-review-questionnaire {
+  padding: 0 38px;
+}
+.el-table {
+  width: auto;
+}
+::v-deep .el-drawer__header {
+  margin-bottom: 0px !important;
+}
+.custom_title {
+  color: #303133 !important;
+  font-size: 18px;
+  font-weight: 400;
+}
+</style>

src/views/processing/carTest/execution-test-plan/index.vue

 <!-- 测试用例详情 -->
 <template>
   <task-standard>
+    <div slot="header-right">
+      <header-button icon="preview-open" type="default" @click="handlePreview">
+        查看实验方案
+      </header-button>
+      <header-button
+        icon="arrow-left"
+        class="back-btn"
+        type="no-line"
+        @click="goBack"
+      >
+        返回
+      </header-button>
+    </div>
     <div class="web-page">
       <iframe
         :src="url"
         frameborder="0"
         style="width: 100%; height: 100%"
       ></iframe>
+      <scheme-view :dialog-manger="dialogManger"></scheme-view>
     </div>
   </task-standard>
 </template>
 
 <script>
-import { NewFileTestProject } from '@/api/graphql/client.graphql'
+import SchemeView from './components/SchemeView.vue'
+import routerMixins from '@/mixins/router'
 export default {
-  name: 'Index',
+  name: 'Scheme',
+  components: {
+    SchemeView: SchemeView
+  },
+  mixins: [routerMixins],
   data() {
     return {
-      id: this.$route.query,
-      url: ''
+      url: '',
+      dialogManger: {
+        dialogVisible: false,
+        dialogEditId: null
+      }
     }
   },
   mounted() {
     const id = this.$route.query.id
+    this.dialogManger.dialogEditId = this.$route.query.taskid
     this.url = `https://10.12.48.78:8090/car/complianceTestingCenter/projectOverView/${id}`
   },
-  methods: {}
+  methods: {
+    handlePreview() {
+      this.dialogManger.dialogVisible = true
+    }
+  }
 }
 </script>
 

src/views/processing/unprocessed-review/index.vue

@@ -594,7 +594,7 @@ export default {
         // 执行试验方案
         case 'PENDING':
           this.$router.push({
-            path: `/processing/carTest/execution-test-plan?id=${testSchemeId}`
+            path: `/processing/carTest/execution-test-plan?taskid=${id}&id=${testSchemeId}`
           })
           break
         // 确认测试结果