Merge branch 'main' of http://120.76.84.145:10101/gitblit/r/H5/leshan-labor...

hejianhao

2025-04-21 c49ef334bcb1981d6f13eee4e80e7f54427a2869

Merge branch 'main' of http://120.76.84.145:10101/gitblit/r/H5/leshan-laboratory

 src/assets/public/modalImg1.png

 src/assets/public/modalImg2.png

 src/assets/public/modalImg3.png

 src/assets/public/modalImg4.png

 src/components/AddComponentDialog/index.vue

New file
@@ -0,0 +1,210 @@
<template>
  <el-dialog
    title="新增组件"
    :visible.sync="visible"
    width="70%"
    :close-on-click-modal="false"
    custom-class="add-component-dialog"
    @close="handleClose"
  >
    <div class="component-cards">
      <div
        v-for="(item, index) in componentTypes"
        :key="index"
        class="component-card"
        :class="{ active: selectedType === item.type }"
        :data-type="item.type"
        @click="handleSelect(item)"
      >
        <div class="card-icon">
          <img :src="item.icon" :alt="item.title" />
        </div>
        <div class="card-content">
          <div class="card-title">{{ item.title }}</div>
          <div class="card-desc">{{ item.description }}</div>
        </div>
      </div>
    </div>

    <div slot="footer" class="dialog-footer select-member-footer">
      <el-button @click="handleClose">取消</el-button>
      <el-button type="primary" @click="handleConfirm">保存</el-button>
    </div>
  </el-dialog>
</template>

<script>
export default {
  name: 'AddComponentDialog',
  props: {
    visible: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      selectedType: '',
      componentTypes: [
        {
          type: 'richText',
          title: '富文本',
          icon: require('@/assets/public/modalImg1.png'),
          description: '富文本组件可以支持文本格式化（如字体、颜色、大小等）、图片插入、链接添加等多种功能。'
        },
        {
          type: 'customTable',
          title: '自定义表格',
          icon: require('@/assets/public/modalImg2.png'),
          description: '自定义表格组件可以支持自定义表头（包括配置表头类型、默认值、权限等）'
        },
        {
          type: 'fileUpload',
          title: '文件上传',
          icon: require('@/assets/public/modalImg3.png'),
          description: '支持上传.docx/.pdf/.xlsx/.txt文件'
        },
        {
          type: 'imageUpload',
          title: '图片上传',
          icon: require('@/assets/public/modalImg4.png'),
          description: '富文本组件可以支持文本格式化（如字体、颜色、大小等）、图片插入、链接添加等多种功能。'
        }
      ]
    }
  },
  methods: {
    handleSelect(item) {
      this.selectedType = item.type
    },
    handleClose() {
      this.$emit('update:visible', false)
      this.selectedType = ''
    },
    handleConfirm() {
      if (!this.selectedType) {
        this.$message.warning('请选择要添加的组件类型')
        return
      }
      this.$emit('confirm', this.selectedType)
      this.handleClose()
    }
  }
}
</script>

<style lang="less" scoped>
.add-component-dialog {
  ::v-deep .el-dialog__header {
    border-bottom: 1px solid #e4e7ed;
    padding: 20px;
    margin: 0;
  }

  ::v-deep .el-dialog__body {
    padding: 30px;
  }

  .component-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 20px;
    padding: 10px;

    .component-card {
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 30px 20px;
      background: #fff;
      border-radius: 10px;
      border: 1px solid #e4e7ed;
      cursor: pointer;
      transition: all 0.3s;

      &[data-type="richText"] {
        background: linear-gradient(180deg, #FFF1DE 0%, rgba(255,249,241,0) 100%);
        border: 1px solid rgba(249,171,20,0.5);
      }

      &[data-type="customTable"] {
        background: linear-gradient(180deg, rgba(5,112,255,0.14) 1%, rgba(234,243,255,0) 100%);
        border: 1px solid rgba(71,145,255,0.5);
      }

      &[data-type="fileUpload"] {
        background: linear-gradient(180deg, #E0FAEA 0%, rgba(224,250,234,0) 100%);
        border: 1px solid rgba(87,180,131,0.5);
      }

      &[data-type="imageUpload"] {
        background: linear-gradient(180deg, #F5EDFF 0%, rgba(234,243,255,0) 100%);
        border: 1px solid rgba(115,83,247,0.5);
      }

      &.active {
        transform: translateY(-4px);
        box-shadow: 0 4px 16px 0 rgba(0, 0, 0, 0.15);

        &[data-type="richText"] {
          border-color: rgba(249,171,20,0.8);
          background: linear-gradient(180deg, #FFF1DE 0%, rgba(255,249,241,0.5) 100%);
        }

        &[data-type="customTable"] {
          border-color: rgba(71,145,255,0.8);
          background: linear-gradient(180deg, rgba(5,112,255,0.2) 1%, rgba(234,243,255,0.5) 100%);
        }

        &[data-type="fileUpload"] {
          border-color: rgba(87,180,131,0.8);
          background: linear-gradient(180deg, #E0FAEA 0%, rgba(224,250,234,0.5) 100%);
        }

        &[data-type="imageUpload"] {
          border-color: rgba(115,83,247,0.8);
          background: linear-gradient(180deg, #F5EDFF 0%, rgba(234,243,255,0.5) 100%);
        }
      }

      .card-icon {
        width: 92px;
        height: 92px;
        margin-bottom: 16px;

        img {
          width: 100%;
          height: 100%;
          object-fit: contain;
        }
      }

      .card-content {
        text-align: center;

        .card-title {
          font-size: 16px;
          font-weight: 500;
          color: #303133;
          margin-bottom: 8px;
        }

        .card-desc {
          font-size: 14px;
          color: #909399;
          line-height: 1.4;
        }
      }
    }
  }

  .dialog-footer {
    text-align: center;
    padding-top: 20px;

    .el-button {
      min-width: 120px;
    }
  }
}
</style> 

 src/components/AiEditor/index.vue

@@ -54,7 +54,7 @@
  watch: {
    value: {
      handler(newVal) {
        if (this.editor && newVal !== this.editor.getContent()) {
        if (this.editor && newVal !== this.editor.getHtml()) {
          this.editor.setContent(newVal)
        }
      },
@@ -95,7 +95,9 @@
        // 禁用 AI 功能
        ai: false,
        // 禁用调整大小功能
        resize: false
        resize: false,
        // 添加唯一标识
        id: `editor-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`
      }

      try {
@@ -112,7 +114,7 @@
    },
    // 获取编辑器内容
    getContent() {
      return this.editor ? this.editor.getContent() : ''
      return this.editor ? this.editor.getHtml() : ''
    },
    // 设置编辑器内容
    setContent(content) {

 src/components/EvaluateTable/index.vue

@@ -149,12 +149,20 @@
            },
            deep: true
        },
        isReadonly: {
        viewJson: {
            handler(newVal, oldVal) {
                if (newVal) {
                    this.activeIndex = JSON.parse(this.viewJson)
                console.log("viewJson changed:", newVal)
                if (newVal && this.isReadonly) {
                    try {
                        const parsedData = JSON.parse(newVal)
                        this.activeIndex = parsedData
                        console.log("activeIndex updated:", this.activeIndex)
                    } catch (e) {
                        console.error("Failed to parse viewJson:", e)
                    }
                }
            },
            immediate: true
        }
    },
    data() {

 src/router/index.js

@@ -298,6 +298,24 @@
                },
                component: () => import("../views/dataManagement/inspectionReport/detail.vue"),
            },
            {
                path: "testResultReport",
                meta: {
                    title: "实验结果汇报",
                    keepAlive: true,
                },
                component: () => import("../views/dataManagement/testResultReport/list.vue"),
            },
            {
                path: "testResultReport/detail",
                name: "testResultReportDetail",
                meta: {
                    title: "实验结果详情",
                    hide: true,
                    keepAlive: true,
                },
                component: () => import("../views/dataManagement/testResultReport/detail.vue"),
            },
        ],
    },
    {

 src/views/dataManagement/approvalPlan/addPlan.vue

@@ -31,6 +31,12 @@
          <div>一 、实验目的</div>
        </div>
      </div>
      <AiEditor
        ref="purposeEditor"
        v-model="editorContents.purpose"
        height="200px"
        placeholder="请输入实验目的..."
      />
      <div class="header-title">
        <div class="header-title-left">
          <img src="@/assets/public/headercard.png" />
@@ -40,43 +46,84 @@
      <div class="item-title">
        <span>1.实验材料</span>
      </div>
      <AiEditor
        ref="materialEditor"
        v-model="editorContents.material"
        height="200px"
        placeholder="请输入实验材料..."
      />
      <div class="item-title">
        <span>2.实验设备</span>
      </div>

      <AiEditor
        ref="equipmentEditor"
        v-model="editorContents.equipment"
        height="200px"
        placeholder="请输入实验设备..."
      />
      <div class="header-title">
        <div class="header-title-left">
          <img src="@/assets/public/headercard.png" />
          <div>三 、检测方法及开发</div>
        </div>
      </div>
      <AiEditor
        ref="methodEditor"
        v-model="editorContents.method"
        height="200px"
        placeholder="请输入检测方法及开发..."
      />
      <div class="header-title">
        <div class="header-title-left">
          <img src="@/assets/public/headercard.png" />
          <div>四 、实验步骤</div>
        </div>
      </div>
      <AiEditor
        ref="stepsEditor"
        v-model="editorContents.steps"
        height="200px"
        placeholder="请输入实验步骤..."
      />
      <div class="header-title">
        <div class="header-title-left">
          <img src="@/assets/public/headercard.png" />
          <div>五 、数据采集及分析</div>
        </div>
      </div>
      <AiEditor
        ref="dataAnalysisEditor"
        v-model="editorContents.dataAnalysis"
        height="200px"
        placeholder="请输入数据采集及分析..."
      />
      <div class="header-title">
        <div class="header-title-left">
          <img src="@/assets/public/headercard.png" />
          <div>六 、结果评估</div>
        </div>
      </div>
      <AiEditor
        ref="evaluationEditor"
        v-model="editorContents.evaluation"
        height="200px"
        placeholder="请输入结果评估..."
      />
      <div class="header-title">
        <div class="header-title-left">
          <img src="@/assets/public/headercard.png" />
          <span>注意事项</span>
        </div>
      </div>
      <AiEditor
        ref="notesEditor"
        v-model="editorContents.notes"
        height="200px"
        placeholder="请输入注意事项..."
      />
      <div class="add-project-footer">
        <el-button type="primary" class="save-btn">保存</el-button>
        <el-button>存草稿</el-button>
        <el-button type="primary" class="save-btn" @click="handleSave">保存</el-button>
        <el-button @click="handleSaveDraft">存草稿</el-button>
      </div>
    </template>
    <SelectMember ref="selectMember" />
@@ -84,11 +131,38 @@
</template>

<script>
import AiEditor from '@/components/AiEditor'
// import { savePlan, saveDraft } from '@/api/approvalPlan'

export default {
  name: "AddProject",
  components: {
    AiEditor
  },
  data() {
    return {
      form: {},
      form: {
        name: '',
        description: '',
        purpose: '',
        material: '',
        equipment: '',
        method: '',
        steps: '',
        dataAnalysis: '',
        evaluation: '',
        notes: ''
      },
      editorContents: {
        purpose: '',
        material: '',
        equipment: '',
        method: '',
        steps: '',
        dataAnalysis: '',
        evaluation: '',
        notes: ''
      },
      rules: {
        name: [
          { required: true, message: "请输入项目组名称", trigger: "blur" },
@@ -96,33 +170,69 @@
        description: [
          { required: true, message: "请输入项目组描述", trigger: "blur" },
        ],
        purpose: [
          { required: true, message: "请输入实验目的", trigger: "blur" },
        ],
        material: [
          { required: true, message: "请输入实验材料", trigger: "blur" },
        ],
        equipment: [
          { required: true, message: "请输入实验设备", trigger: "blur" },
        ],
        method: [
          { required: true, message: "请输入检测方法及开发", trigger: "blur" },
        ],
        steps: [
          { required: true, message: "请输入实验步骤", trigger: "blur" },
        ],
        dataAnalysis: [
          { required: true, message: "请输入数据采集及分析", trigger: "blur" },
        ],
        evaluation: [
          { required: true, message: "请输入结果评估", trigger: "blur" },
        ],
        notes: [
          { required: true, message: "请输入注意事项", trigger: "blur" },
        ],
      },
    };
  },
  methods: {
    submitForm() {
    // 获取所有编辑器的内容
    getAllEditorContent() {
      return {
        purpose: this.$refs.purposeEditor.getContent(),
        material: this.$refs.materialEditor.getContent(),
        equipment: this.$refs.equipmentEditor.getContent(),
        method: this.$refs.methodEditor.getContent(),
        steps: this.$refs.stepsEditor.getContent(),
        dataAnalysis: this.$refs.dataAnalysisEditor.getContent(),
        evaluation: this.$refs.evaluationEditor.getContent(),
        notes: this.$refs.notesEditor.getContent()
      }
    },
    // 保存
    handleSave() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          console.log("submit!");
          const formData = {
            ...this.form,
            ...this.getAllEditorContent()
          }
          console.log('保存数据：', formData)
          this.$message.success('保存成功')
        }
      });
      })
    },
    addMember() {
      this.$refs.selectMember.open();
    },
    memberList(i) {
      switch (i) {
        case 1:
          return [1];
        case 2:
          return [1];
        case 3:
          return [1, 2, 3, 4, 5, 6, 7, 8];
        case 4:
          return [1, 2, 3, 4, 5, 6, 7, 8];
        default:
          break;
    // 保存草稿
    handleSaveDraft() {
      const formData = {
        ...this.form,
        ...this.getAllEditorContent(),
        status: 'draft'
      }
      console.log('草稿数据：', formData)
      this.$message.success('草稿保存成功')
    },
  },
};
@@ -212,4 +322,12 @@
    margin-right: 20px;
  }
}

.ai-editor-container {
  width: 75%;
  margin: 20px 0;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  background: #fff;
}
</style>

 src/views/dataManagement/testResultReport/components/checkout-result.vue

New file
@@ -0,0 +1,108 @@
<template>
    <el-dialog
      title="检验数据结果汇总"
      :visible.sync="visible"
      width="80%"
      :close-on-click-modal="false"
      @close="handleClose"
    >
      <div class="approval-dialog">
        <div class="approval-content">
          <Card class="approval-content-card">
            <template style="position: relative">
              <div class="header-title">
                <div class="header-title-left">
                  <img src="@/assets/public/headercard.png" />
                  <span>本次检验结果总表</span>
                </div>
              </div>
              
              <div class="header-title">
                <div class="header-title-left">
                  <img src="@/assets/public/headercard.png" />
                  <span>本次检验说明</span>
                </div>
              </div>
            </template>
          </Card>
        </div>
      </div>
    </el-dialog>
  </template>
  
  <script>
  export default {
    name: "CheckoutResult",
    props: {
      visible: {
        type: Boolean,
        default: false,
      },
      content: {
        type: Object,
        default: () => ({}),
      },
    },
    methods: {
      handleClose() {
        this.$emit("update:visible", false);
      },
    },
  };
  </script>
  
  <style scoped lang="less">
  ::v-deep .el-dialog__header {
    border-bottom: 1px solid #e4e7ed;
  }
  
  .approval-dialog {
    display: flex;
    height: 300px;
  
    .approval-content {
      flex: 1;
      margin-right: 20px;
      background: #ffffff;
      border-radius: 10px;
    }
  }
  
  .approval-content-card {
    box-shadow: none !important;
  }
  
  .header-title {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 13px;
  
    .header-title-left {
      display: flex;
      align-items: center;
      gap: 13px;
      margin-top: 38px;
  
      img {
        width: 12px;
        height: 19px;
      }
  
      span {
        flex-shrink: 0;
        font-weight: bold;
        font-size: 18px;
        color: #222222;
        line-height: 27px;
        font-family: "Source Han Sans CN Bold Bold";
      }
    }
  }
  
  .header-title:first-child {
    .header-title-left {
      margin-top: 0;
    }
  }
  </style>

 src/views/dataManagement/testResultReport/components/evaluation-dialog.vue

New file
@@ -0,0 +1,84 @@
<template>
  <el-dialog
    :visible.sync="dialogVisible"
    :title="dialogTitle"
    width="79.17%"
    @close="handleClose"
  >
    <EvaluateTable ref="evaluateTable" />
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="handleSubmit" class="submit-btn">确认评定结果</el-button>
    </div>
  </el-dialog>
</template>

<script>
const EVALUATION_TYPES = ['labTechnician', 'experimenter'];

export default {
  name: "EvaluationDialog",
  props: {
    modelValue: {
      type: Boolean,
      default: false,
    },
    type: {
      type: String,
      default: 'labTechnician'
    },
  },
  data() {
    return {
      dialogVisible: false,
    };
  },
  computed: {
    dialogTitle() {
      return this.type === 'labTechnician' ? '化验师工作评定' : '实验员工作评定';
    }
  },
  watch: {
    modelValue: {
      handler(val) {
        this.dialogVisible = val;
      },
      immediate: true,
    },
    dialogVisible(val) {
      if (!val) {
        this.$emit('update:modelValue', false);
      }
    }
  },
  methods: {
    handleClose() {
      this.$emit('update:modelValue', false);
    },
    handleSubmit() {
      const evaluateTable = this.$refs.evaluateTable;
      if (!evaluateTable) {
        this.$message.warning('评价表格未加载完成');
        return;
      }

      const evaluateData = {
        type: this.type,
        activeIndex: evaluateTable.activeIndex
      };
      
      this.$emit('submit', evaluateData);
    },
  },
};
</script>

<style lang="less" scoped>
.dialog-footer {
  padding: 20px;
  border-top: 1px solid #eee;

  .submit-btn {
    min-width: 80px;
  }
}
</style>

 src/views/dataManagement/testResultReport/components/experimental-scheduling.vue

New file
@@ -0,0 +1,75 @@
<template>
    <div>
        <el-dialog title="选择实验调度" :visible.sync="show" width="80%">
            <TableCustom :queryForm="form" :tableData="tableData" :total="total" :height="null">
                <template #search>
                    <el-form :model="form" label-width="140px" inline>
                        <el-form-item label="所属项目课题方案：">
                            <el-input v-model="form.planName" placeholder="请输入"></el-input>
                        </el-form-item>
                        <el-form-item label="实验编号：">
                            <el-input v-model="form.planCode" placeholder="请输入"></el-input>
                        </el-form-item>
                        <el-form-item label="实验名称：">
                            <el-input v-model="form.creator" placeholder="请输入"></el-input>
                        </el-form-item>
                        <el-form-item label="通知时间：">
                            <el-date-picker v-model="form.createTime" type="daterange" range-separator="至"
                                start-placeholder="开始日期" end-placeholder="结束日期"
                                value-format="yyyy-MM-dd"></el-date-picker>
                        </el-form-item>
                        <el-form-item label="状态：">
                            <el-select v-model="form.status" placeholder="请选择">
                                <el-option label="待确认" value="待确认"></el-option>
                                <el-option label="已确认" value="已确认"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="" class="search-btn-box">
                            <el-button type="default" @click="resetForm">重置</el-button>
                            <el-button type="primary" @click="handleSearch">查询</el-button>
                        </el-form-item>
                    </el-form>
                </template>
                
                <template #table>
                    <el-table-column prop="planCode" label="所属项目课题方案"></el-table-column>
                    <el-table-column prop="planName" label="实验编号"></el-table-column>
                    <el-table-column prop="planName" label="实验名称"></el-table-column>
                    <el-table-column prop="stage" label="通知时间"></el-table-column>
                    <el-table-column prop="stage" label="实验开始时间"></el-table-column>
                    <el-table-column prop="stage" label="试验结束时间"></el-table-column>
                    <el-table-column prop="stage" label="参加人员"></el-table-column>
                    <el-table-column prop="creator" label="状态"></el-table-column>
                </template>
            </TableCustom>
            <span slot="footer" class="select-member-footer">
                <el-button @click="show = false">取 消</el-button>
                <el-button type="primary" @click="show = false">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
export default {
    props: ['show'],
    data() {
        return {
            form: {},
            tableData: [],
            total: 0
        }
    },
    methods: {
        resetForm() {

        },
        handleSearch() {
            
        }
    }
}
</script>

<style lang="less" scoped>
</style>

 src/views/dataManagement/testResultReport/detail.vue

New file
@@ -0,0 +1,783 @@
<template>
  <Card>
    <el-form
      ref="form"
      :model="form"
      :rules="rules"
      inline
      label-position="top"
    >
      <div class="header-title">
        <div class="header-title-left">
          <img src="@/assets/public/headercard.png" />
          <div>一 、所属实验调度</div>
        </div>
        <el-button
          type="primary"
          class="el-icon-plus"
          @click="handleSelectScheduling"
          >选择实验调度</el-button
        >
      </div>

      <Table
        :data="[selectedScheduling].filter(Boolean)"
        :total="0"
        :height="null"
        class="rwuTable"
      >
        <el-table-column
          prop="planName"
          label="所属项目课题方案"
          min-width="180"
        ></el-table-column>
        <el-table-column
          prop="planCode"
          label="实验编号"
          min-width="120"
        ></el-table-column>
        <el-table-column
          prop="experimentName"
          label="实验名称"
          min-width="120"
        ></el-table-column>
        <el-table-column
          prop="noticeTime"
          label="通知时间"
          min-width="150"
        ></el-table-column>
        <el-table-column
          prop="startTime"
          label="实验开始时间"
          min-width="150"
        ></el-table-column>
        <el-table-column
          prop="endTime"
          label="实验结束时间"
          min-width="150"
        ></el-table-column>
        <el-table-column
          prop="participants"
          label="参加人员"
          min-width="180"
        ></el-table-column>
        <el-table-column
          prop="status"
          label="状态"
          min-width="100"
        ></el-table-column>
      </Table>

      <div class="header-title">
        <div class="header-title-left">
          <img src="@/assets/public/headercard.png" />
          <div>一 、实验结果</div>
        </div>
      </div>
      <Table
        :data="experimentResultData"
        :total="0"
        :height="null"
        class="rwuTable"
      >
        <el-table-column
          prop="planName"
          label="所属项目课题方案"
          min-width="180"
        ></el-table-column>
        <el-table-column
          prop="experimentCode"
          label="实验编号"
          min-width="120"
        ></el-table-column>
        <el-table-column
          prop="experimentName"
          label="实验名称"
          min-width="120"
        ></el-table-column>
        <el-table-column
          prop="experimentDate"
          label="实验日期"
          min-width="120"
        ></el-table-column>
        <el-table-column
          prop="experimenter"
          label="实验员"
          min-width="100"
        ></el-table-column>
        <el-table-column
          prop="createTime"
          label="创建日期"
          min-width="150"
        ></el-table-column>
        <el-table-column
          prop="creator"
          label="创建人"
          min-width="100"
        ></el-table-column>
        <el-table-column
          prop="status"
          label="当前状态"
          min-width="120"
        ></el-table-column>
        <el-table-column label="操作" min-width="100" fixed="right">
          <template slot-scope="scope">
            <el-button type="text" @click="handleViewDetail(scope.row)"
              >详情</el-button
            >
          </template>
        </el-table-column>
      </Table>

      <div class="header-title">
        <div class="header-title-left">
          <img src="@/assets/public/headercard.png" />
          <div>二 、检验结果</div>
        </div>
      </div>
      <Table
        :data="inspectionResultData"
        :total="0"
        :height="null"
        class="rwuTable"
      >
        <el-table-column
          prop="planName"
          label="所属项目课题方案"
          min-width="180"
        ></el-table-column>
        <el-table-column
          prop="experimentCode"
          label="所属实验编号"
          min-width="120"
        ></el-table-column>
        <el-table-column
          prop="createTime"
          label="创建时间"
          min-width="150"
        ></el-table-column>
        <el-table-column
          prop="creator"
          label="创建人"
          min-width="100"
        ></el-table-column>
        <el-table-column
          prop="status"
          label="状态"
          min-width="100"
        ></el-table-column>
        <el-table-column label="操作" min-width="100" fixed="right">
          <template slot-scope="scope">
            <el-button
              type="text"
              @click="handleViewInspectionDetail(scope.row)"
              >详情</el-button
            >
          </template>
        </el-table-column>
      </Table>

      <div class="header-title">
        <div class="header-title-left">
          <img src="@/assets/public/headercard.png" />
          <div>三 、实验数据分析及结论</div>
        </div>
      </div>

      <div class="header-title">
        <div class="header-title-left">
          <img src="@/assets/public/headercard.png" />
          <div>四 、化验师工作评定</div>
        </div>
      </div>

      <div class="evaluate-card">
        <div class="evaluate-card-people">
          <div
            v-for="technician in labTechnicians"
            :key="technician.id"
            class="evaluate-card-people-item"
            :class="{ 'active-people': selectedLabTechnician?.id === technician.id }"
            @click="handleSelectLabTechnician(technician)"
          >
            {{ technician.name }}
          </div>
        </div>
        <div class="evaluate-card-cotent">
          <template v-if="selectedLabTechnician">
            <template v-if="selectedLabTechnician.data">
              <EvaluateTable 
                class="evaluate-table" 
                :isReadonly="true"
                :type="1"
                :viewJson="JSON.stringify(selectedLabTechnician.data)" 
              />
            </template>
            <template v-else>
              <div class="no-data">暂未评定</div>
              <div class="to-evaluate" @click="handleEvaluate('labTechnician')">去评价</div>
            </template>
          </template>
        </div>
      </div>

      <div class="header-title">
        <div class="header-title-left">
          <img src="@/assets/public/headercard.png" />
          <div>五 、实验员工作评定</div>
        </div>
      </div>

      <div class="evaluate-card">
        <div class="evaluate-card-people">
          <div
            v-for="experimenter in experimenters"
            :key="experimenter.id"
            class="evaluate-card-people-item"
            :class="{ 'active-people': selectedExperimenter?.id === experimenter.id }"
            @click="handleSelectExperimenter(experimenter)"
          >
            {{ experimenter.name }}
          </div>
        </div>
        <div class="evaluate-card-cotent">
          <template v-if="selectedExperimenter">
            <template v-if="selectedExperimenter.data">
              <EvaluateTable 
                ref="experimenterEvaluateTable" 
                class="evaluate-table" 
                :isReadonly="true"
                :viewJson="JSON.stringify(selectedExperimenter.data)" 
              />
            </template>
            <template v-else>
              <div class="no-data">暂未评定</div>
              <div class="to-evaluate" @click="handleEvaluate('experimenter')">去评价</div>
            </template>
          </template>
        </div>
      </div>

      <div class="add-project-footer">
        <el-button type="primary" class="save-btn">发送</el-button>
        <el-button>存草稿</el-button>
      </div>
    </el-form>
    <!-- 选择实验调度弹窗 -->
    <experimental-scheduling
      :show.sync="schedulingDialogVisible"
      @select="handleSchedulingSelect"
    />
    <!-- 评价弹窗 -->
    <evaluation-dialog
      :modelValue="evaluationDialogVisible"
      :type="currentEvaluationType"
      @update:modelValue="updateEvaluationDialogVisible"
      @submit="handleEvaluationSubmit"
    />
    <!-- 检验结果详情弹窗 -->
    <checkout-result
      :visible.sync="checkoutResultVisible"
      :data="currentCheckoutResult"
    />
    <!-- 新增组件弹窗 -->
    <add-component-dialog
      v-if="showNewDialog"
      :visible.sync="showNewDialog"
      @confirm="handleAddComponent"
    />
  </Card>
</template>

<script>
import ExperimentalScheduling from "./components/experimental-scheduling.vue";
import moment from "moment";
import EvaluationDialog from "./components/evaluation-dialog.vue";
import CheckoutResult from "./components/checkout-result.vue";
import AddComponentDialog from "@/components/AddComponentDialog";

export default {
  name: "AddProject",
  components: {
    ExperimentalScheduling,
    EvaluationDialog,
    CheckoutResult,
    AddComponentDialog
  },
  data() {
    return {
      showNewDialog: true,
      dialogVisible: false,
      schedulingDialogVisible: false,
      isEdit: false,
      currentEditIndex: -1,
      selectedScheduling: null,
      form: {
        recordNo: "",
        testItemName: "",
        testItemNo: "",
        testMethodName: "",
        testMethodNo: "",
      },
      rules: {
        recordNo: [
          {
            required: true,
            message: "请输入原始检验记录编号",
            trigger: "blur",
          },
        ],
        testItemName: [
          { required: true, message: "请输入检测项名字", trigger: "blur" },
        ],
        testItemNo: [
          { required: true, message: "请输入检测项编号", trigger: "blur" },
        ],
        testMethodName: [
          { required: true, message: "请输入检测方法名字", trigger: "blur" },
        ],
        testMethodNo: [
          { required: true, message: "请输入检测方法编号", trigger: "blur" },
        ],
      },
      taskTableData: [],
      experimentResultData: [
        {
          planName: "名称名称名称",
          experimentCode: "3814763",
          experimentName: "名称名称22",
          experimentDate: "2024-05-28",
          experimenter: "刘大大",
          createTime: "2025-1-2 16:27:17",
          creator: "周乐心",
          status: "实验员已提交",
        },
      ],
      inspectionResultData: [
        {
          planName: "名称名称名称",
          experimentCode: "31423764",
          createTime: "",
          creator: "",
          status: "已提交",
        },
        {
          planName: "名称名称名称",
          experimentCode: "31423764",
          createTime: "",
          creator: "",
          status: "已提交",
        },
      ],
      // 化验师数据
      labTechnicians: [
        { 
          id: 1, 
          name: '张三', 
          role: '化验师',
          data: null // 评定数据，null 表示未评定
        },
        { 
          id: 2, 
          name: '李四', 
          role: '化验师',
          data: null
        }
      ],
      selectedLabTechnician: null,

      // 实验员数据
      experimenters: [
        { 
          id: 1, 
          name: '王五', 
          role: '实验员',
          data: null
        },
        { 
          id: 2, 
          name: '赵六', 
          role: '实验员',
          data: null
        }
      ],
      selectedExperimenter: null,

      // 弹窗控制
      evaluationDialogVisible: false,
      currentEvaluationType: '',
      checkoutResultVisible: false,
      currentCheckoutResult: null
    };
  },
  watch: {
    selectedLabTechnician: {
      handler(newVal) {
        console.log("selectedLabTechnician", newVal);
      },
    },
  },
  created() {
    // 默认选中第一个人员
    this.selectedLabTechnician = this.labTechnicians[0];
    this.selectedExperimenter = this.experimenters[0];
  },
  methods: {
    handleSelectScheduling() {
      this.schedulingDialogVisible = true;
    },
    handleSchedulingSelect(selectedData) {
      if (selectedData && selectedData.length > 0) {
        this.selectedScheduling = selectedData[0];
        this.$message.success("选择成功");
      }
    },
    handleAddTask() {
      this.isEdit = false;
      this.currentEditIndex = -1;
      this.dialogVisible = true;
    },
    handleEditTask(row) {
      this.isEdit = true;
      this.currentEditIndex = this.taskTableData.findIndex(
        (item) => item === row
      );

      const editData = {
        sampleCode: row.sampleCode,
        testData: row.testData,
        testTypes: [],
        photos: [],
        spectrums: [],
      };

      if (row.photos && row.photos.length > 0) {
        editData.testTypes.push("photo");
        editData.photos = row.photos.map((photo) => ({
          name: photo.name,
          url: photo.url,
          raw: null,
        }));
      }
      if (row.spectrums && row.spectrums.length > 0) {
        editData.testTypes.push("spectrum");
        editData.spectrums = row.spectrums.map((spectrum) => ({
          name: spectrum.name,
          url: spectrum.url,
          raw: null,
        }));
      }

      this.$nextTick(() => {
        this.dialogVisible = true;
        this.$refs.addDialog.setFormData(editData);
      });
    },
    handleDeleteTask(row) {
      this.$confirm("确认删除该检测数据吗？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          const index = this.taskTableData.findIndex((item) => item === row);
          if (index > -1) {
            const item = this.taskTableData[index];
            if (item.photos) {
              item.photos.forEach((photo) => {
                if (photo.url.startsWith("blob:")) {
                  URL.revokeObjectURL(photo.url);
                }
              });
            }
            if (item.spectrums) {
              item.spectrums.forEach((spectrum) => {
                if (spectrum.url.startsWith("blob:")) {
                  URL.revokeObjectURL(spectrum.url);
                }
              });
            }

            this.taskTableData.splice(index, 1);
            this.$message.success("删除成功");
          }
        })
        .catch(() => {});
    },
    handleTaskSubmit(formData) {
      const photos = formData.photos.map((file) => ({
        name: file.name,
        url: file.url || URL.createObjectURL(file.raw),
      }));

      const spectrums = formData.spectrums.map((file) => ({
        name: file.name,
        url: file.url || URL.createObjectURL(file.raw),
      }));

      const newData = {
        sampleCode: formData.sampleCode,
        testData: formData.testData,
        testResult: "",
        photos,
        spectrums,
        createTime: this.isEdit
          ? this.taskTableData[this.currentEditIndex].createTime
          : moment().format("YYYY-MM-DD HH:mm:ss"),
      };

      if (this.isEdit && this.currentEditIndex > -1) {
        const oldData = this.taskTableData[this.currentEditIndex];
        if (oldData.photos) {
          oldData.photos.forEach((photo) => {
            if (
              photo.url.startsWith("blob:") &&
              !photos.find((p) => p.url === photo.url)
            ) {
              URL.revokeObjectURL(photo.url);
            }
          });
        }
        if (oldData.spectrums) {
          oldData.spectrums.forEach((spectrum) => {
            if (
              spectrum.url.startsWith("blob:") &&
              !spectrums.find((s) => s.url === spectrum.url)
            ) {
              URL.revokeObjectURL(spectrum.url);
            }
          });
        }

        this.taskTableData.splice(this.currentEditIndex, 1, newData);
        this.$message.success("更新成功");
      } else {
        this.taskTableData.push(newData);
        this.$message.success("添加成功");
      }

      this.dialogVisible = false;
      this.isEdit = false;
      this.currentEditIndex = -1;
    },
    getPhotoUrls(photos) {
      return photos.map((photo) => photo.url);
    },
    handleViewDetail(row) {
      console.log("查看详情", row);
    },
    handleViewInspectionDetail(row) {
      this.currentCheckoutResult = row;
      this.checkoutResultVisible = true;
    },
    // 选择化验师
    handleSelectLabTechnician(technician) {
      this.selectedLabTechnician = technician;
    },
    // 选择实验员
    handleSelectExperimenter(experimenter) {
      this.selectedExperimenter = experimenter;
    },
    // 去评价
    handleEvaluate(type) {
      this.currentEvaluationType = type;
      this.evaluationDialogVisible = true;
    },
    // 处理评价提交
    handleEvaluationSubmit(evaluationData) {
      const { type, activeIndex } = evaluationData;
      
      if (type === 'labTechnician') {
        // 更新化验师列表中的数据
        const labTechnician = this.labTechnicians.find(item => item.id === this.selectedLabTechnician.id);
        if (labTechnician) {
          labTechnician.data = activeIndex;
          // 更新当前选中的化验师数据
          this.selectedLabTechnician = { ...labTechnician };
        }
      } else if (type === 'experimenter') {
        // 更新实验员列表中的数据
        const experimenter = this.experimenters.find(item => item.id === this.selectedExperimenter.id);
        if (experimenter) {
          experimenter.data = activeIndex;
          // 更新当前选中的实验员数据
          this.selectedExperimenter = { ...experimenter };
        }
      }

      // 这里可以添加数据持久化的逻辑，比如调用API保存到后端
      // this.saveEvaluationData(type, activeIndex);

      this.$message.success('评价提交成功');
      this.evaluationDialogVisible = false;
    },
    // 更新弹窗显示状态
    updateEvaluationDialogVisible(value) {
      this.evaluationDialogVisible = value;
    }
  },
};
</script>

<style scoped lang="less">
.el-form--inline .el-form-item {
  margin-right: 83px;
}

.header-title {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 13px;
  margin-top: 38px;
  margin-bottom: 38px;

  .header-title-left {
    display: flex;
    align-items: center;
    gap: 13px;

    img {
      width: 12px;
      height: 19px;
    }

    span {
      flex-shrink: 0;
      font-weight: bold;
      font-size: 18px;
      color: #222222;
      line-height: 27px;
      font-family: "Source Han Sans CN Bold Bold";
    }

    div {
      flex-shrink: 0;
      font-weight: bold;
      font-size: 18px;
      color: #222222;
      line-height: 27px;
      font-family: "Source Han Sans CN Bold Bold";

      &:before {
        content: "*";
        color: #f56c6c;
        margin-right: 4px;
      }
    }
  }
}

.rwuTable {
  width: 85%;
  padding-left: 40px;
}

.add-project-footer {
  margin-top: 43px;

  button {
    width: 220px;
  }

  .save-btn {
    margin-right: 20px;
  }
}

.image-preview {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;

  .preview-image {
    width: 50px;
    height: 50px;
    border-radius: 4px;
    cursor: pointer;
  }

  .image-slot {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    background: #f5f7fa;
    color: #909399;
  }
}

.spectrum-link {
  display: block;
  margin-bottom: 5px;

  &:last-child {
    margin-bottom: 0;
  }
}

.evaluate-card {
  width: calc(95% - 40px);
  background: #eff8fa;
  padding: 30px;
  margin-left: 29px;

  .evaluate-card-people {
    display: flex;
    align-items: center;
    gap: 16px;

    .evaluate-card-people-item {
      width: 125px;
      background: #ffffff;
      border-radius: 6px;
      padding: 10px 5px;
      font-family: PingFangSC, PingFang SC;
      font-weight: 400;
      font-size: 16px;
      color: #333333;
      line-height: 22px;
      text-align: center;
    }

    .active-people {
      background: #ebffff;
      border-radius: 6px;
      border: 1px solid #049c9a;
      color: rgba(4, 156, 154, 1);
    }
  }
  .evaluate-card-cotent {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    .no-data {
      font-family: PingFangSC, PingFang SC;
      font-weight: 500;
      font-size: 20px;
      color: #909399;
      line-height: 28px;
      margin-top: 58px;
      margin-bottom: 30px;
    }
    .to-evaluate {
      width: 65px;
      background: #049c9a;
      border-radius: 4px;
      font-family: SourceHanSansCN, SourceHanSansCN;
      font-weight: 400;
      font-size: 14px;
      color: #ffffff;
      line-height: 32px;
      text-align: center;
      margin-bottom: 12px;
    }
    .evaluate-table{
      width: 100%;
      margin-top: 29px;
    }
  }
}
</style>

 src/views/dataManagement/testResultReport/list.vue

New file
@@ -0,0 +1,344 @@
<template>
  <div class="list">
    <TableCustom :queryForm="form" :tableData="tableData" :total="total" :height="null">
      <template #search>
        <el-form :model="form" labelWidth="auto" inline>
          <el-form-item label="所属项目课题方案：">
            <el-input v-model="form.projectPlan" placeholder="请输入"></el-input>
          </el-form-item>
          <el-form-item label="实验编号：">
            <el-input v-model="form.experimentNo" placeholder="请输入"></el-input>
          </el-form-item>
          <el-form-item label="实验名称：">
            <el-input v-model="form.experimentName" placeholder="请输入"></el-input>
          </el-form-item>
          <el-form-item label="创建日期：">
            <el-date-picker
              v-model="form.createTime"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              value-format="yyyy-MM-dd"
            ></el-date-picker>
          </el-form-item>
          <el-form-item label="状态：">
            <el-select v-model="form.status" placeholder="请选择">
              <el-option label="待提交" value="pending"></el-option>
              <el-option label="已提交" value="submitted"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="">
            <el-button type="default" @click="resetForm">重置</el-button>
            <el-button type="primary" style="margin-left: 10px;" @click="handleSearch">查询</el-button>
          </el-form-item>
        </el-form>
      </template>
      <template #setting>
        <div class="tableTitle">
          <div class="flex a-center">
            <div
              class="title"
              :class="{ active: currentType === 'list' }"
              @click="handleTypeChange('list')"
            >
              实验结果汇报列表
            </div>
            <div
              class="drafts"
              :class="{ active: currentType === 'draft' }"
              @click="handleTypeChange('draft')"
            >
              草稿箱
            </div>
          </div>
          <el-button @click="handleAddResult" class="el-icon-plus" type="primary">
            新增实验结果
          </el-button>
        </div>
      </template>
      <template #table>
        <el-table-column prop="projectPlan" label="所属项目课题方案"></el-table-column>
        <el-table-column prop="experimentNo" label="实验编号"></el-table-column>
        <el-table-column prop="experimentName" label="实验名称"></el-table-column>
        <el-table-column prop="engineer" label="工艺工程师"></el-table-column>
        <el-table-column prop="chemist" label="化验师"></el-table-column>
        <el-table-column prop="engineerApproved" label="是否评定">
          <template slot-scope="scope">
            <el-tag :type="scope.row.engineerApproved === '是' ? 'success' : 'danger'">
              {{ scope.row.engineerApproved }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="experimenter" label="实验员"></el-table-column>
        <el-table-column prop="experimenterApproved" label="是否评定">
          <template slot-scope="scope">
            <el-tag :type="scope.row.experimenterApproved === '是' ? 'success' : 'danger'">
              {{ scope.row.experimenterApproved }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="createTime" label="创建日期"></el-table-column>
        <el-table-column prop="status" label="状态">
          <template slot-scope="scope">
            <el-tag :type="scope.row.status === '已提交' ? 'success' : 'warning'">
              {{ scope.row.status }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="280">
          <template slot-scope="scope">
            <template v-if="currentType === 'list'">
              <!-- 待提交状态 -->
              <template v-if="scope.row.status === '待提交'">
                <el-button type="text" @click="handleSubmit(scope.row)">提交</el-button>
                <el-button type="text" @click="handleEdit(scope.row)">编辑</el-button>
                <el-button type="text" @click="handleDetail(scope.row.id)">详情</el-button>
                <el-button type="text" @click="handleDelete(scope.row)">删除</el-button>
              </template>
              <!-- 待评定状态 -->
              <template v-else-if="scope.row.status === '待评定'">
                <el-button type="text" @click="handleEvaluate(scope.row)">评定</el-button>
                <el-button type="text" @click="handleDetail(scope.row.id)">详情</el-button>
              </template>
              <!-- 已提交状态 -->
              <template v-else-if="scope.row.status === '已提交'">
                <el-button type="text" @click="handleDetail(scope.row.id)">详情</el-button>
              </template>
            </template>
            <!-- 草稿箱 -->
            <template v-else>
              <el-button type="text" @click="handleEdit(scope.row)">编辑</el-button>
              <el-button type="text" @click="handleDetail(scope.row.id)">详情</el-button>
              <el-button type="text" @click="handleDelete(scope.row)">删除</el-button>
            </template>
          </template>
        </el-table-column>
      </template>
    </TableCustom>
  </div>
</template>

<script>
export default {
  name: "TestResultReport",
  data() {
    return {
      currentType: "list", // 当前显示类型：list-列表，draft-草稿箱
      form: {
        projectPlan: "",
        experimentNo: "",
        experimentName: "",
        createTime: [],
        status: ""
      },
      tableData: [],
      total: 0,
      // 正式列表数据
      mockListData: [
        {
          id: '1',
          projectPlan: '名称名称名称',
          experimentNo: '31423764',
          experimentName: '名称名称名称',
          engineer: '李治悦',
          chemist: '刘大大',
          engineerApproved: '否',
          experimenter: '周乐心; 张瑞瑞',
          experimenterApproved: '否',
          createTime: '2025-1-2 16:27:17',
          status: '待提交'
        },
        {
          id: '2',
          projectPlan: '高性能材料研究',
          experimentNo: '31423765',
          experimentName: '材料强度测试',
          engineer: '赵雨',
          chemist: '王泽',
          engineerApproved: '是',
          experimenter: '李明; 张华',
          experimenterApproved: '是',
          createTime: '2025-1-2 16:30:17',
          status: '已提交'
        },
        {
          id: '3',
          projectPlan: '新型合金开发',
          experimentNo: '31423766',
          experimentName: '合金性能分析',
          engineer: '杨静',
          chemist: '陈亮',
          engineerApproved: '是',
          experimenter: '王刚',
          experimenterApproved: '否',
          createTime: '2025-1-2 16:35:17',
          status: '待评定'
        }
      ],
      // 草稿箱数据
      mockDraftData: [
        {
          id: '4',
          projectPlan: '环保材料研究',
          experimentNo: '31423767',
          experimentName: '材料降解测试',
          engineer: '张伟',
          chemist: '李强',
          engineerApproved: '否',
          experimenter: '王芳',
          experimenterApproved: '否',
          createTime: '2025-1-2 16:40:17',
          status: '草稿'
        },
        {
          id: '5',
          projectPlan: '纳米材料开发',
          experimentNo: '31423768',
          experimentName: '纳米结构分析',
          engineer: '刘洋',
          chemist: '周杰',
          engineerApproved: '否',
          experimenter: '孙明',
          experimenterApproved: '否',
          createTime: '2025-1-2 16:45:17',
          status: '草稿'
        }
      ]
    };
  },
  created() {
    this.getTableData();
  },
  methods: {
    resetForm() {
      this.form = {
        projectPlan: "",
        experimentNo: "",
        experimentName: "",
        createTime: [],
        status: ""
      };
    },
    handleSearch() {
      this.getTableData();
    },
    handleAddResult() {
      this.$router.push({
        path: "/dataManagement/testResultReport/detail",
        query: { 
          id: 'new',
          type: 'add'
        }
      });
    },
    handleEdit(row) {
      this.$router.push({
        path: "/dataManagement/testResultReport/detail",
        query: { 
          id: row.id,
          type: 'edit'
        }
      });
    },
    handleDetail(id) {
      this.$router.push({
        path: "/dataManagement/testResultReport/detail",
        query: { 
          id: id,
          type: 'view'
        }
      });
    },
    handleSubmit(row) {
      this.$confirm('确认提交该实验结果？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        // TODO: 调用提交接口
        this.$message.success('提交成功');
        this.getTableData();
      }).catch(() => {});
    },
    handleDelete(row) {
      this.$confirm('确认删除该实验结果？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        // TODO: 调用删除接口
        this.$message.success('删除成功');
        this.getTableData();
      }).catch(() => {});
    },
    handleEvaluate(row) {
      this.$router.push({
        path: "/dataManagement/testResultReport/detail",
        query: { 
          id: row.id,
          type: 'evaluate'
        }
      });
    },
    handleTypeChange(type) {
      this.currentType = type;
      this.getTableData();
    },
    getTableData() {
      // 根据currentType获取不同的数据
      if (this.currentType === 'list') {
        this.tableData = this.mockListData;
        this.total = this.mockListData.length;
      } else {
        this.tableData = this.mockDraftData;
        this.total = this.mockDraftData.length;
      }
    }
  }
};
</script>

<style scoped lang="less">
.list {
  height: 100%;
}
.flex {
  display: flex;
  align-items: center;
}
.tableTitle {
  display: flex;
  padding-bottom: 20px;
  justify-content: space-between;
  align-items: center;
  .title {
    background: #fafafc;
    border-radius: 8px 8px 0px 0px;
    border: 1px solid #dcdfe6;
    padding: 16px 29px;
    font-weight: bold;
    font-size: 18px;
    color: #606266;
    width: unset;
    cursor: pointer;
  }
  .drafts {
    padding: 16px 65px;
    background: #fafafc;
    border-radius: 8px 8px 0px 0px;
    border: 1px solid #dcdfe6;
    font-weight: 400;
    font-size: 18px;
    color: #606266;
    margin-left: 16px;
    cursor: pointer;
  }
  .active {
    color: #049c9a;
    background: #ffffff;
    border-radius: 8px 8px 0px 0px;
    border: 1px solid #049c9a;
  }
}
</style>