ssti-CollegeManage/src/views/resultShow/components/resultDetail_student.vue

<template>
  <!-- 成果展示 项目成果展示 -->
  <div class="rs1apply">
    <!-- 头部展示区开始 -->
    <div class="header">
      <div class="headerConcent">
        <div class="rsHead1Tit">
          项目名称：<span>{{ TitleMessage.title }}</span>
        </div>
        <div class="rsHead2Tit rsHead3Tit">
          <div>
            负责人：<span class="titleMessage">{{
              TitleMessage.pro_leader
            }}</span>
          </div>
          <div v-if="TitleMessage.lead_leader">
            学院牵头领导：<span class="titleMessage">{{
              TitleMessage.lead_leader
            }}</span>
          </div>
        </div>
        <div class="rsHead3Tit rsHead2Tit">
          <div>
            学院：<span class="titleMessage">{{ TitleMessage.ClassName }}</span>
          </div>
          <div>
            分类：<span class="titleMessage"
              >{{ TitleMessage.TypeName }} - {{ TitleMessage.tn2 }}</span
            >
          </div>
        </div>

        <div class="rsHead2Tit personListUL">
          <!-- 老师 -->
          <img
            src="@/assets/img/doctorialHat.svg"
            style="margin-right: 10px; width: 25px; height: 25px"
          />
          <el-tooltip
            class="item"
            effect="light"
            :content="
              TitleMessage.teacher.reduce(
                (prev, cur) => (prev += ' ' + cur.name),
                ''
              )
            "
            placement="top-start"
          >
            <div class="personListLI">
              <span
                v-for="(item, index) in TitleMessage.teacher"
                :key="index"
                >{{ item.name }}</span
              >
            </div>
          </el-tooltip>

          <!-- 学生 -->
          <img
            src="@/assets/img/student.svg"
            style="margin: 0px 10px; width: 25px; height: 25px"
          />
          <el-tooltip
            class="item"
            effect="light"
            :content="
              TitleMessage.student.reduce(
                (prev, cur) => (prev += ' ' + cur.name),
                ''
              )
            "
            placement="top-start"
          >
            <div class="personListLI">
              <span
                v-for="(item, index) in TitleMessage.student"
                :key="index"
                >{{ item.name }}</span
              >
            </div>
          </el-tooltip>
        </div>
      </div>
      <!-- <el-button class="backBtn" type="primary" @click="$router.back()">返回</el-button> -->
    </div>
    <!-- 头部展示区结束 -->
    <!--导航栏区域开始-->
    <div id="Nav">
      <div class="navLi" @click="pageState = 0">
        <img src="@/assets/anliDetail/proOver.png" alt="" />
        <span>项目基本内容</span>
      </div>
      <div class="navLi" @click="pageState = 1">
        <img src="@/assets/anliDetail/proOverTwo.png" alt="" />
        <span>项目详细</span>
      </div>
      <div class="navLi" @click="pageState = 2">
        <i
          class="iconStyle iconfont icon-jiegou"
          style="color: #58c2fe; font-size: 22px; margin-right: 7px"
        ></i>
        <span>活动开展</span>
      </div>
      <div class="navLi" @click="pageState = 3">
        <i
          class="iconStyle iconfont icon-wenjian"
          style="color: #58c2fe; font-size: 22px; margin-right: 7px"
        ></i>
        <span>项目附件</span>
      </div>
      <div class="navLi" @click="pageState = 4">
        <i
          class="iconStyle iconfont icon-baogao"
          style="color: #58c2fe; font-size: 22px; margin-right: 7px"
        ></i>
        <span>项目结题报告</span>
      </div>
    </div>
    <!--导航栏区域结束-->
    <!--内容区开始-->
    <!--基础信息开始-->
    <div class="BaseMessage" v-show="pageState == 0">
      <div class="BaseTitle">
        <span>项目基本内容</span>
      </div>
      <div class="brief">
        <div class="brief_title">
          <img src="@/assets/anliDetail/jdTitle.png" alt="" />
          <span>开始时间与结题时间</span>
        </div>
        <div class="beginTime_EndTime">
          <span>{{ TitleMessage.beginTime }}</span>
          <i class="el-icon-arrow-right"></i>
          <span>{{ TitleMessage.EndTime }}</span>
        </div>
      </div>
      <div class="brief">
        <div class="brief_title">
          <img src="@/assets/anliDetail/jdTitle.png" alt="" />
          <span>项目基础信息</span>
        </div>
        <el-descriptions style="width: 100%" :column="2" border>
          <el-descriptions-item label="优先支持项目">
						<div v-for="(item,index) in TitleMessage.multiSelectProject" :key="index">
							{{ classType[item] }}
						</div>
            <!-- {{
              TitleMessage.multiSelectProject.indexOf("1") != -1
                ? "大赛选拔项目"
                : ""
            }}
            {{
              TitleMessage.multiSelectProject.indexOf("2") != -1
                ? "落地注册项目"
                : ""
            }}
            {{
              TitleMessage.multiSelectProject.indexOf("3") != -1
                ? "社会征集项目"
                : ""
            }}
            {{
              TitleMessage.multiSelectProject.indexOf("4") != -1
                ? "产业命题项目"
                : ""
            }} -->
          </el-descriptions-item>
					<el-descriptions-item label="联系电话">{{
            TitleMessage.phone
          }}</el-descriptions-item>
          <el-descriptions-item label="美丽校园改造项目">
            <div>{{ TitleMessage.schoolRemould.includes('1') ? "校园安全项目" : "" }}</div>
            <div>{{ TitleMessage.schoolRemould.includes('2') ? "环境治理项目" : "" }}</div>
            <div>{{ TitleMessage.schoolRemould.includes('3') ? "校园服务项目" : "" }}</div>
            <div>{{ TitleMessage.schoolRemould.includes('4') ? "文创装置项目" : "" }}</div>
          </el-descriptions-item>
          <!-- <el-descriptions-item label="项目申请人">{{
            TitleMessage.projectApplyperson == 1
              ? "在校学生"
              : "入驻学校孵化基地的初创企业法人"
          }}</el-descriptions-item> -->
  
        </el-descriptions>
      </div>
      <div class="brief">
        <div class="brief_title">
          <img src="@/assets/anliDetail/jdTitle.png" alt="" />
          <span>教师组</span>
        </div>
        <div class="projectStudent">
          <el-table :data="TitleMessage.teacher" border style="width: 100%">
            <el-table-column prop="name" label="姓名" align="center">
            </el-table-column>
            <el-table-column
              prop="collage"
              label="所在学院/部门/专业"
              align="center"
            >
            </el-table-column>
            <el-table-column prop="work" label="项目组角色分工" align="center">
            </el-table-column>
          </el-table>
        </div>
      </div>

      <!-- 学生组表格 -->
      <div class="brief">
        <div class="brief_title">
          <img src="@/assets/anliDetail/jdTitle.png" alt="" />
          <span>学生组</span>
        </div>
        <div class="projectStudent">
          <el-table :data="TitleMessage.student" border style="width: 100%">
            <el-table-column prop="name" label="姓名" align="center">
            </el-table-column>
            <el-table-column
              prop="collage"
              label="所在学院/部门/专业"
              align="center"
            >
            </el-table-column>
            <el-table-column prop="work" label="项目组角色分工" align="center">
            </el-table-column>
          </el-table>
        </div>
      </div>

      <div class="brief" v-if="TitleMessage.brief != ''">
        <div class="brief_title">
          <img src="@/assets/anliDetail/jdTitle.png" alt="" />
          <span>简介</span>
        </div>
        <div class="TextView" style="display: block">
          {{ TitleMessage.brief }}
        </div>
      </div>
    </div>
    <!--基础信息结束-->

    <!--项目详细开始-->
    <div class="BaseMessage" v-show="pageState == 1">
      <div class="BaseTitle" type="1">
        <span>研发内容</span>
      </div>

      <div class="brief">
        <div class="brief_title" type="1.1">
          <img src="@/assets/anliDetail/jdTitle.png" alt="" />
          <span>一、项目研发背景</span>
        </div>
        <div class="TextView" v-html="DetailMessage['back']"></div>
      </div>

      <div class="brief">
        <div class="brief_title" type="1.1">
          <img src="@/assets/anliDetail/jdTitle.png" alt="" />
          <span>二、项目创新点</span>
        </div>
        <div class="TextView" v-html="DetailMessage['innovate']"></div>
      </div>

      <div class="brief">
        <div class="brief_title" type="1.1">
          <img src="@/assets/anliDetail/jdTitle.png" alt="" />
          <span>三、技术研发路线</span>
        </div>
        <div class="TextView" v-html="DetailMessage['path']"></div>
      </div>

      <div class="brief">
        <div class="brief_title" type="1.1">
          <img src="@/assets/anliDetail/jdTitle.png" alt="" />
          <span>四、项目应用场景</span>
        </div>
        <div class="TextView" v-html="DetailMessage['scene']"></div>
      </div>

      <div class="BaseTitle" type="1">
        <span>商业模式及社会价值</span>
      </div>
      <div class="brief">
        <div class="brief_title" type="1.1">
          <img src="@/assets/anliDetail/jdTitle.png" alt="" />
          <span>一、项目商业模式/社会价值</span>
        </div>
        <div class="TextView" v-html="DetailMessage['worth']"></div>
      </div>

      <div class="BaseTitle" type="1">
        <span>团队优势</span>
      </div>
      <div class="brief">
        <div class="brief_title" type="1.1">
          <img src="@/assets/anliDetail/jdTitle.png" alt="" />
          <span>一、团队构成及优势</span>
        </div>
        <div class="TextView" v-html="DetailMessage['team']"></div>
      </div>

      <div class="BaseTitle" type="1">
        <span>研发成本</span>
      </div>
      <div class="brief">
        <div class="brief_title" type="1.1">
          <img src="@/assets/anliDetail/jdTitle.png" alt="" />
          <span>一、研发成本来源及构成</span>
        </div>
        <div class="TextView" v-html="DetailMessage['cost']"></div>
      </div>

      <div class="BaseTitle" type="1">
        <span>预期成果</span>
      </div>
      <div class="brief">
        <div class="brief_title" type="1.1">
          <img src="@/assets/anliDetail/jdTitle.png" alt="" />
          <span
            >一、项目预期成果、数量及形式（产品原型/发明专利/双创竞赛/成果转化/社会效益）</span
          >
        </div>
        <div class="TextView" v-html="DetailMessage['expectResults']"></div>
      </div>
      <div class="brief">
        <div class="brief_title" type="1.1">
          <img src="@/assets/anliDetail/jdTitle.png" alt="" />
          <span>二、学生创客人才培养预期成果、数量（教师填写）</span>
        </div>
        <div
          class="TextView"
          v-html="DetailMessage['expectResultsTeacher']"
        ></div>
      </div>
      <div class="brief">
        <div class="brief_title" type="1.1">
          <img src="@/assets/anliDetail/jdTitle.png" alt="" />
          <span>三、项目预期孵化、转化创业项目情况</span>
        </div>
        <div class="TextView" v-html="DetailMessage['expectConversion']"></div>
      </div>
      <div class="BaseTitle" type="1">
        <span>实施计划</span>
      </div>
      <div class="brief">
        <!-- <div class="brief_title" type="1.1">
                        <img src="@/assets/anliDetail/jdTitle.png" alt="">
                        <span>三、项目预期孵化、转化创业项目情况</span>
                    </div> -->
        <div class="TextView" v-html="DetailMessage['plan']"></div>
      </div>
    </div>
    <!-- 项目详细结束 -->
    <!-- 活动开展开始 -->
    <div class="BaseMessage" v-show="pageState == 2">
      <div class="BaseTitle" type="1">
        <span>活动开展</span>
      </div>

      <div
        class="arrangement"
        v-for="(item, index) in AllActivity"
        :key="index"
      >
        <div class="arrangement_assignment">
          <div class="arrangement_assignment_title">
            <span>
              <img src="@/assets/anliDetail/jdNewTitle.png" />
              <span>活动{{ index + 1 }}:</span>
              <span>{{ item.title }}</span>
            </span>
          </div>

          <div class="brief">
            <div class="brief_title">
              <!-- <img src="@/assets/anliDetail/jdTitle.png" alt=""> -->
              <i class="el-icon-tickets"></i>
              <span>基础信息</span>
            </div>
            <div class="ActivityBaseMessage">
              <el-descriptions class="margin-top" :column="3" border>
                <el-descriptions-item>
                  <template slot="label">
                    <i class="el-icon-s-custom"></i>
                    负责人
                  </template>
                  {{ item.pro_leader }}
                </el-descriptions-item>
                <el-descriptions-item>
                  <template slot="label">
                    <i class="el-icon-mobile-phone"></i>
                    联系电话
                  </template>
                  {{ item.phone }}
                </el-descriptions-item>
                <el-descriptions-item>
                  <template slot="label">
                    <i class="el-icon-coordinate"></i>
                    活动创建时间
                  </template>
                  {{ item.create_at }}
                </el-descriptions-item>
                <el-descriptions-item>
                  <template slot="label">
                    <i class="el-icon-date"></i>
                    活动开展时间
                  </template>
                  <!-- {{ JSON.parse(item.begin_at) }} -->
                  {{
                    JSON.parse(item.begin_at)[0].split(" ")[0] +
                    "\t至\t" +
                    JSON.parse(item.begin_at)[1].split(" ")[0]
                  }}
                </el-descriptions-item>
                <el-descriptions-item>
                  <template slot="label">
                    <i class="el-icon-coin"></i>
                    活动预算(元)
                  </template>
                  {{ item.money }}
                </el-descriptions-item>
                <el-descriptions-item>
                  <template slot="label">
                    <i class="el-icon-user"></i>
                    参与学生人数
                  </template>
                  {{ item.students }}
                </el-descriptions-item>
              </el-descriptions>
            </div>

            <div class="brief_title MarginTop30px">
              <!-- <img src="@/assets/anliDetail/jdTitle.png" alt=""> -->
              <i class="el-icon-user-solid"></i>
              <span>指导老师</span>
            </div>
            <div class="projectStudent">
              <el-table
                :data="JSON.parse(item.course_teacher)"
                border
                style="width: 100%"
              >
                <el-table-column prop="name" label="姓名" align="center">
                </el-table-column>
                <el-table-column prop="work" label="工作单位" align="center">
                </el-table-column>
                <el-table-column prop="work" align="center" label="活动分工">
                </el-table-column>
              </el-table>
            </div>
            <!-- <div class="brief_title MarginTop30px">
                                <img src="@/assets/anliDetail/proOverTwo.png" alt="">
                                <span>活动简介</span>
                            </div> -->
            <!-- <div class="TextView" v-text="item.brief"> -->
            <!-- </div> -->

            <div class="brief_title MarginTop30px">
              <!-- <img src="@/assets/anliDetail/jdTitle.png" alt=""> -->
              <i class="el-icon-edit-outline"></i>
              <span>活动计划</span>
            </div>
            <div
              class="TextView"
              v-text="JSON.parse(item.chapters).activityPlan"
            ></div>

            <div class="brief_title MarginTop30px">
              <!-- <img src="@/assets/anliDetail/jdTitle.png" alt=""> -->
              <i class="el-icon-data-line"></i>
              <span>预期目标</span>
            </div>
            <div
              class="TextView"
              v-text="JSON.parse(item.chapters).expectations"
            ></div>

            <div class="brief_title MarginTop30px">
              <!-- <img src="@/assets/anliDetail/jdTitle.png" alt=""> -->
              <i class="el-icon-pie-chart"></i>
              <span>活动受面</span>
            </div>
            <div
              class="TextView"
              v-text="JSON.parse(item.chapters).eventAudience"
            ></div>

            <div class="brief_title MarginTop30px">
              <!-- <img src="@/assets/anliDetail/jdTitle.png" alt=""> -->
              <i class="el-icon-money"></i>
              <span>经费支出计划</span>
            </div>
            <div
              class="TextView"
              v-text="JSON.parse(item.chapters).fundingPlan"
            ></div>
            <div
              class="brief_title MarginTop30px"
              v-if="ActivityLookFile[index].url != ''"
            >
              <img src="@/assets/anliDetail/jdTitle.png" alt="" />
              <!-- <i class="el-icon-money"></i> -->
              <span>活动完结报告</span>
            </div>
            <div class="brief" v-if="ActivityLookFile[index].url != ''">
              <div class="material">
                <div class="material_title">
                  <img src="@/assets/anliDetail/fileList.png" alt="" />
                  <span>活动完结报告</span>
                </div>
                <div class="FileShowArea">
                  <div class="FileShowArea_Left">
                    <vword
                      style="width: 100%; height: 100%; overflow: auto"
                      class="fullStyle"
                      v-if="
                        checkFileType(ActivityLookFile[index].url)['type'] !=
                          'pdf' &&
                        checkFileType(ActivityLookFile[index].url)['name'] !=
                          '图片'
                      "
                      :pdfUrl="
                        'https://view.officeapps.live.com/op/view.aspx?src=' +
                        ActivityLookFile[index].url
                      "
                    ></vword>
                    <vpdf
                      style="width: 100%; height: 100%; overflow: auto"
                      class="fullStyle"
                      :pdfUrl="ActivityLookFile[index].url"
                      v-if="
                        checkFileType(ActivityLookFile[index].url)['type'] ==
                        'pdf'
                      "
                    ></vpdf>
                    <img
                      :src="ActivityLookFile[index].url"
                      alt="图片哦"
                      v-if="
                        checkFileType(ActivityLookFile[index].url)['name'] ==
                        '图片'
                      "
                      style="width: 100%; height: 100%"
                    />
                  </div>
                  <div class="FileShowArea_Right core_dialogue">
                    <div
                      v-for="(i, index2) in item.reportFile"
                      :key="i.url"
                      @click="Object.assign(ActivityLookFile[index], i)"
                      :class="[
                        'FileList',
                        ActivityLookFile[index]['url'] == i.url
                          ? 'lookFile'
                          : '',
                      ]"
                    >
                      <span
                        >{{ index2 + 1 }}.{{
                          checkFileType(i.url)["name"]
                        }}</span
                      >
                      <div>{{ i.fileName }}</div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 活动开展结束 -->
    <!-- 项目附件开始 -->
    <div class="BaseMessage" v-show="pageState == 3">
      <div class="BaseTitle" type="3">
        <span>项目附件</span>
      </div>
      <div class="brief" v-if="ProjectLookFile.url != ''">
        <div class="material">
          <div class="material_title">
            <img src="@/assets/anliDetail/fileList.png" alt="" />
            <span>项目材料</span>
          </div>
          <div class="FileShowArea">
            <div class="FileShowArea_Left">
              <vword
                style="width: 100%; height: 100%; overflow: auto"
                class="fullStyle"
                v-if="
                  checkFileType(ProjectLookFile.url)['type'] != 'pdf' &&
                  checkFileType(ProjectLookFile.url)['name'] != '图片'
                "
                :pdfUrl="
                  'https://view.officeapps.live.com/op/view.aspx?src=' +
                  ProjectLookFile.url
                "
              ></vword>
              <vpdf
                style="width: 100%; height: 100%; overflow: auto"
                class="fullStyle"
                :pdfUrl="ProjectLookFile.url"
                v-if="checkFileType(ProjectLookFile.url)['type'] == 'pdf'"
              ></vpdf>
              <img
                :src="ProjectLookFile.url"
                alt="图片哦"
                v-if="checkFileType(ProjectLookFile.url)['name'] == '图片'"
                style="width: 100%; height: 100%"
              />
            </div>
            <div class="FileShowArea_Right core_dialogue">
              <div
                v-for="(item, index) in ProjectFile"
                :key="item.url"
                @click="ProjectLookFile = item"
                :class="[
                  'FileList',
                  ProjectLookFile['url'] == item.url ? 'lookFile' : '',
                ]"
              >
                <span
                  >{{ index + 1 }}.{{ checkFileType(item.url)["name"] }}</span
                >
                <div>{{ item.fileName }}</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 项目中期报告开始 -->
    <div class="BaseMessage" v-show="pageState == 4">
      <!-- <div class="BaseTitle">
                    <span>结项评价</span>
                </div>
                <div class="brief">
                    <div class="brief_title" type="1.1">
                        <img src="@/assets/anliDetail/jdTitle.png" alt="">
                        <span>科研办</span>
                    </div>
                    <div class="TextView" >
                        <div class="TextView">
                            {{ endProjectRemark['kRem'] }}
                        </div>
                    </div>
                </div>
                <div class="brief">
                    <div class="brief_title" type="1.1">
                        <img src="@/assets/anliDetail/jdTitle.png" alt="">
                        <span>学术委员会</span>
                    </div>
                    <div class="TextView" >
                        <div class="TextView">
                            {{ endProjectRemark["bRem"] }}
                        </div>
                    </div>
                </div>
                <div class="brief">
                    <div class="brief_title" type="1.1">
                        <img src="@/assets/anliDetail/jdTitle.png" alt="">
                        <span>部门审核评语</span>
                    </div>
                    <div class="TextView" >
                        <div class="TextView">
                            {{ endProjectRemark["xRem"] }}
                        </div>
                    </div>
                </div> -->

      <div class="BaseTitle" type="5">
        <span>项目结题报告</span>
      </div>

      <div class="brief">
        <projectSettlementBook></projectSettlementBook>
        <!-- <div class="brief_title">
          <img src="@/assets/anliDetail/jdTitle.png" alt="" />
          <span>项目结题附件</span>
        </div>
        <div class="material" v-if="ProjectEndLookFile.url != ''">
          <div class="material_title">
            <img src="@/assets/anliDetail/fileList.png" alt="" />
            <span>项目结题附件</span>
          </div>
          <div class="FileShowArea">
            <div class="FileShowArea_Left">
              <vword
                style="width: 100%; height: 100%; overflow: auto"
                class="fullStyle"
                v-if="
                  checkFileType(ProjectEndLookFile.url)['type'] != 'pdf' &&
                  checkFileType(ProjectEndLookFile.url)['name'] != '图片'
                "
                :pdfUrl="
                  'https://view.officeapps.live.com/op/view.aspx?src=' +
                  ProjectEndLookFile.url
                "
              ></vword>
              <vpdf
                style="width: 100%; height: 100%; overflow: auto"
                class="fullStyle"
                :pdfUrl="ProjectEndLookFile.url"
                v-if="checkFileType(ProjectEndLookFile.url)['type'] == 'pdf'"
              ></vpdf>
              <img
                :src="ProjectEndLookFile.url"
                alt="图片哦"
                v-if="checkFileType(ProjectEndLookFile.url)['name'] == '图片'"
                style="width: 100%; height: 100%"
              />
            </div>
            <div class="FileShowArea_Right core_dialogue">
              <div
                v-for="(item, index) in ProjectEndFile"
                :key="item.url"
                @click="ProjectEndLookFile = item"
                :class="[
                  'FileList',
                  ProjectEndLookFile['url'] == item.url ? 'lookFile' : '',
                ]"
              >
                <span
                  >{{ index + 1 }}.{{ checkFileType(item.url)["name"] }}</span
                >
                <div>{{ item.fileName }}</div>
              </div>
            </div>
          </div>
        </div> -->
      </div>
    </div>
    <!--项目详结束-->
    <!--内容区结束-->
  </div>
</template>
  
  <script>
import vpdf from "@/components/vpdf.vue";
import vword from "@/components/vword.vue";
import { VueEditor } from "vue2-editor";
// 结项书
import projectSettlementBook from "../../projectSettlement/components/projectSettlementBook.vue";
export default {
  components: { vpdf, vword, VueEditor,projectSettlementBook },
  data() {
    return {
      pageState: 0,
      loading: false,
			classType:{
				"0":"团队合作项目、跨学科合作项目。",
				"1":"科技创新、低空经济、银发经济、乡村振兴、助残助学、非遗文创等新技术、新产业、新业态、新模式方面的项目。",
				"2":"企业真实生产经营项目或外包服务项目。",
				"3":"社会征集项目、产业命题项目。",
				"4":"近两年内参与校级以上创新创业大赛并获奖的项目。",
				"5":"美丽校园改造计划中的校园智能产品及文创产品的研发项目。",
				"6":"企申报人为港澳籍、学校扶贫班及在校贫困生申报的项目"
			},
      //头部信息   项目名称  负责人 学院牵头领导  封面图片  分类   所在部门  优先支持项目   联系电话   项目申请人   美丽校园改造项目
      TitleMessage: {
        title: "",
        pro_leader: "",
        lead_leader: "",
        image: "",
        TypeName: "",
        ClassName: "",
        tn2: 0,
        multiSelectProject: [],
      },
      // TitleMessage:{ClassName:"",EndTime:"",TypeName:"",beginTime:"",brief:"",course_student:[],image:"",pro_leader:"",title:""},
      DetailMessage: [],
      ProjectFile: [],
      ProjectLookFile: { url: "", type: "" },
      ProjectEndFile: [],
      ProjectEndLookFile: { url: "", type: "" },
      AllActivity: [],
      ActivityLookFile: [],
      endProjectRemark: { kRem: "", bRem: "", xRem: "" },
      canonical: {
        Image:
          /^https?:\/\/(.+\/)+.+(\.(gif|png|jpg|jpeg|webp|svg|psd|bmp|tif))$/i,
        File: /^https?:\/\/(.+\/)+.+(\.(docx|xlsx|ppt|pdf))$/i,
      },
    };
  },
  methods: {
    getData() {
      this.loading = true;
      this.ActivityLookFile = [];
      this.ajax
        .get(this.$store.state.api + "/SelectResultDetailStudent", {
          uid: this.$store.state.userInfo.userid,
          pid: this.$route.query["pid"],
        })
        .then((res) => {
          let FormData = res.data;

          console.log(FormData);
          //    return console.log(FormData)
          //     //头部信息
          this.TitleMessage = FormData[0][0];
          // 教师表格
          console.log(this.TitleMessage);
          this.TitleMessage["teacher"] = JSON.parse(
            this.TitleMessage["teacher"]
          );
          // 学生表格
          this.TitleMessage["student"] = JSON.parse(
            this.TitleMessage["student"]
          );
          this.TitleMessage["multiSelectProject"] = JSON.parse(
            this.TitleMessage["multiSelectProject"]
          );
          console.log(this.TitleMessage["multiSelectProject"]);

          this.DetailMessage = JSON.parse(FormData[1][0]["chapters"]);
          //      // //项目附件
          //     this.ProjectFile = JSON.parse(FormData[2][0]['projectFile'])
          //     if(this.ProjectFile!=null)this.ProjectLookFile = this.ProjectFile[0]
          //     else this.ProjectLookFile = {url:'',type:""};

          //     //项目结题附件
          //     console.log(JSON.parse(FormData[3][0]['endFile']));
          //     this.ProjectEndFile = JSON.parse(FormData[3][0]['endFile']!=''?JSON.parse(FormData[3][0]['endFile']):'');
          //     if(this.ProjectEndFile!=null && this.ProjectEndFile.length!=0) this.ProjectEndLookFile = this.ProjectEndFile[0];
          //     else this.ProjectEndLookFile = {url:"",type:""}
          //     console.log(111);

          //     if(FormData[4][0]['title']!=null){
          //         this.AllActivity = FormData[4]
          //         this.AllActivity.forEach(item=>{
          //             if(item['reportFile']!=null&&item['reportFile']!=''){
          //                 item['reportFile'] = JSON.parse(item['reportFile']);
          //                 if(item['reportFile'].length!=0)  this.ActivityLookFile.push({url:item['reportFile'][0].url,fileName:item['reportFile'][0].fileName})
          //                 else this.ActivityLookFile.push({url:"",type:""})
          //             }else this.ActivityLookFile.push({url:"",type:""})
          //         })
          //     };
          //     // if(JSON.parse(FormData[5][0]['endProjectRemark'])!=null)this.endProjectRemark = JSON.parse(FormData[5][0]['endProjectRemark']);
          //    this.loading = false;

          //项目附件
          this.ProjectFile = JSON.parse(FormData[2][0]["projectFile"]);
          if (this.ProjectFile != null)
            this.ProjectLookFile = this.ProjectFile[0];
          else this.ProjectLookFile = { url: "", type: "" };
          //项目结题附件
          this.ProjectEndFile =
            FormData[3][0]["endFile"] != ""
              ? JSON.parse(FormData[3][0]["endFile"])
              : "";
          if (this.ProjectEndFile != null && this.ProjectEndFile != "")
            this.ProjectEndLookFile = this.ProjectEndFile[0];
          else this.ProjectEndLookFile = { url: "", type: "" };
          console.log(FormData[4][0]);

          if (FormData[4][0]["title"] != null) {
            this.AllActivity = FormData[4];
            this.AllActivity.forEach((item) => {
              if (item["reportFile"] != null && item["reportFile"] != "") {
                item["reportFile"] = JSON.parse(item["reportFile"]);
                if (item["reportFile"].length != 0)
                  this.ActivityLookFile.push({
                    url: item["reportFile"][0].url,
                    fileName: item["reportFile"][0].fileName,
                  });
                else this.ActivityLookFile.push({ url: "", type: "" });
              } else this.ActivityLookFile.push({ url: "", type: "" });
            });
          }
          // if(JSON.parse(FormData[5][0]['endProjectRemark'])!=null)this.endProjectRemark = JSON.parse(FormData[5][0]['endProjectRemark']);
          this.loading = false;
        })
        .catch((err) => {
          console.log(err);
        });
    },
    checkFileType(url) {
      if (typeof url == "undefined") return { type: "", name: "" };
      let urlSplit = url.split(".");
      const type = urlSplit[urlSplit.length - 1];
      if (this.canonical.Image.test(url)) return { type: type, name: "图片" };
      if (this.canonical.File.test(url)) return { type: type, name: "文档" };
      else return { type: type, name: type };
    },
    ActivityChangeFileLook(index, item) {
      Object.assign(this.ActivityLookFile[index], item);
    },
  },
  mounted() {
    //监听元素滚动
    document.querySelector(".core_dialogue").addEventListener("scroll", (e) => {
      let Nav = document.querySelector("#Nav");
      let scrollTop = e.target.scrollTop;
      if (scrollTop >= 250) {
        document
          .querySelector(".core_dialogue")
          .querySelector(".el-header").style =
          "position:fixed;z-index:10;width:100%";
        Nav.style = `width:100%;padding:0 20%;box-sizing: border-box;border-radius:0;display:flex;justify-content: space-around;position: fixed;top:calc(70px - 20px);z-index:99;align-items: center;box-shadow: 0 0 5px gray;`;
      } else if (scrollTop <= 100) {
        document
          .querySelector(".core_dialogue")
          .querySelector(".el-header").style = "";
        Nav.style = ``;
      }
    });
    this.getData();
  },
};
</script>
  
  <style lang="less" scoped>
.rs1apply {
  width: 100%;
  height: 100%;
  // height: auto;
  display: flex;

  flex-direction: column;
  align-items: center;
  background-color: #e6eaf0;
  box-sizing: border-box;
  padding-bottom: 50px;
}
.header {
  width: 100%;
  min-height: 200px;
  background-color: white;
  margin-top: 10px;
  display: flex;
  align-items: center;
  box-sizing: border-box;
  padding-left: 5%;
  position: relative;
  .imgBlock {
    width: 230px;
    height: 130px;
    margin-right: 20px;

    img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
  }
  .headerConcent {
    line-height: 40px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    // width: ;
    .rsHead1Tit {
      font-size: 22px;
      font-weight: bold;
    }
    .rsHead2Tit {
      font-size: 16px;
    }
    .rsHead3Tit {
      display: flex;
      div {
        margin-right: 30px;
      }
    }
  }
  .backBtn {
    position: absolute;
    right: 10%;
    width: 100px;
    top: 10%;
    box-sizing: border-box;
    padding: 9px 0;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 16px;
    cursor: pointer;
  }
}
#Nav {
  box-sizing: border-box;
  padding: 0 80px 0 70px;
  width: 60%;
  min-height: 50px;
  background-color: white;
  margin-top: 20px;
  border-radius: 5px;
  display: flex;
  justify-content: space-around;
  align-items: center;
  .navLi {
    // width: 150px;
    height: 100%;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    font-size: 18px;
    // margin-left: 20px;
    cursor: pointer;
    img {
      height: 40px;
    }
  }
  .navLi:hover span {
    color: gray;
  }
}
.BaseMessage {
  width: 60%;
  position: relative;
  box-sizing: border-box;
  // margin-bottom: 20px;
  .BaseTitle {
    width: 100%;
    height: 85px;
    background-color: white;
    border-radius: 5px;
    margin-top: 20px;
    display: flex;
    align-items: center;
    margin-bottom: 20px;
    span {
      display: flex;
      align-items: center;
      // width: 160px;

      height: 50px;
      box-sizing: border-box;
      justify-content: center;
      padding-right: 2%;
      padding-left: 4%;
      align-items: center;
      background-image: url("@/assets/anliDetail/longNavBg.png");
      background-size: 100% 100%;
      margin-left: 20px;
      color: white;
      font-size: 18px;
    }
  }
  .brief {
    width: 100%;
    height: auto;
    border-radius: 5px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: white;
    padding: 10px 10px 20px 10px;
    margin-bottom: 20px;
    position: relative;
  }
  .brief_title {
    width: 100%;
    height: 40px;
    display: flex;
    align-items: center;
    // margin-top: 10px;
    font-size: 18px;
    i {
      width: 30px;
      height: 30px;
      font-size: 1.5em;
      color: #50c5ff;
    }
    img {
      width: 30px;
      height: 30px;
    }
    span {
      margin-left: 10px;
      color: gray;
    }
  }
  .TextView {
    width: 100%;
    min-height: 200px;
    box-sizing: border-box;
    padding: 10px;
    border-radius: 5px;
    background-color: rgb(240, 240, 240);
    line-height: 2em;
    word-wrap: break-word;
    word-break: break-all;
  }
  .FileView {
    width: 100%;
    box-sizing: border-box;
    padding: 0px 10px 10px 10px;
    border-radius: 10px;
    background-color: rgb(240, 240, 240);
    .FileList {
      width: 100%;
      height: 50px;
      border-radius: 10px;
      background-color: white;
      display: flex;
      overflow: hidden;
      cursor: pointer;
      box-shadow: 0px 0px 4px rgb(185, 185, 185);
      margin-top: 10px;
      .FileType {
        width: 15%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        color: white;
        font-size: 18px;
        background-color: #0c74ab;
      }
      .FileTitle {
        display: flex;
        height: 100%;
        flex: 1;
        align-items: center;
        box-sizing: border-box;
        padding-left: 2%;
      }
    }
  }
  .FileShow {
    width: 100%;
    height: 200px;
    background-color: gray;
  }
}
.material {
  width: 100%;
  height: 900px;
  // height: 1000px;
  margin-top: 20px;
  border-radius: 5px;
  box-sizing: border-box;
  border: 1px solid #2f89dd;
  overflow: hidden;
  .material_title {
    width: 100%;
    height: 40px;
    display: flex;
    align-items: center;
    box-sizing: border-box;
    padding-left: 10px;
    color: white;
    background-color: #2f89dd;
  }
  .FileShowArea {
    width: 100%;
    height: calc(100% - 40px);
    display: flex;
    justify-content: space-around;
    align-items: center;
    .FileShowArea_Left {
      width: 60%;
      height: 95%;
      background-color: white;
    }
    .FileShowArea_Right {
      width: 35%;
      height: 95%;
      display: flex;
      flex-direction: column;
      align-items: center;
      background-color: #f6f9fe;
      border-radius: 5px;
      .FileList {
        width: 95%;
        height: 45px;
        background-color: white;
        margin-top: 20px;
        border-radius: 10px;
        font-size: 18px;
        cursor: pointer;
        display: flex;
        align-items: center;
        overflow: hidden;
        div {
          height: auto;
          width: 70%;
          display: block;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
        }
        span {
          max-width: 20%;
          min-width: 20%;
          height: 100%;
          display: flex;
          align-items: center;
          justify-content: center;
          color: white;
          background-color: #0c74ab;
          margin-right: 10px;
          float: left;
        }
      }
      .FileList:hover {
        color: gray;
      }
    }
  }
}

.arrangement {
  width: 100%;
  margin-top: 10px;
  background-color: white;
  border-radius: 5px;
  padding: 10 px;
  box-sizing: border-box;
  .arrangement_assignment_title {
    width: 100%;
    height: 50px;
    display: flex;
    box-sizing: border-box;
    padding: 0px 20px 0px 10px;
    justify-content: space-between;
    font-size: 18px;
    align-items: center;
    span {
      display: flex;
      align-items: center;
      color: black;
      font-weight: 600;
      span:nth-of-type(2) {
        margin-left: 10px;
      }
      img {
        width: 30px;
        height: 30px;
        margin-right: 10px;
      }
    }
  }
  .assignment {
    width: 100%;
    display: flex;
    box-sizing: border-box;
    padding: 0px 20px 0px 20px;
    justify-content: center;
    font-size: 18px;
    align-items: space-between;
    flex-direction: column;
    span {
      display: flex;
      align-items: center;
      color: gray;
      img {
        width: 30px;
        height: 30px;
        margin-right: 10px;
      }
    }
    .assignment_message {
      width: 100%;
    }
  }
}
.fullStyle {
  width: 100% !important;
  max-width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
}
.personListUL {
  width: 100%;
  display: flex;
  align-items: center;
  .personListLI {
    width: 80%;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    span {
      margin-right: 10px;
      color: darkgray;
    }
  }
}
.titleMessage {
  color: darkgray;
}
.projectStudent {
  width: 100%;
  cursor: default;
}
.beginTime_EndTime {
  width: 100%;
  height: 40px;
  display: flex;
  align-items: center;
  font-size: 18px;
  box-sizing: border-box;
  padding-left: 20px;
  i {
    margin: 0 20px 0 20px;
    font-size: 22px;
  }
  // background-color: red;
}
/deep/ .ql-toolbar {
  display: none !important;
}
/deep/ .ql-container.ql-snow {
  border: none !important;
}
.lookFile {
  color: grey;
}
.ActivityBaseMessage {
  width: 100%;
  height: auto;
}
.MarginTop30px {
  margin-top: 30px;
}
</style>