ssti-CollegeManage/src/views/projectManage/components/Closingstatement.vue

<template>
  <!-- 结项书组件 -->
  <div>
    <table border="1" cellspacing="0">
      <div class="onePage">
        <div class="titSchool">深圳技师学院</div>
        <div class="title">校级创客项目结题申请书</div>
        <div class="basicInformation">
          <span>项目名称</span>
          <div class="line">{{ myArrayProp[0].title }}</div>
        </div>
        <div class="basicInformation">
          <span>负责人</span>
          <div class="line">{{ myArrayProp[0].pro_leader }}</div>
        </div>
        <div class="basicInformation" style="color: red">
          <span>指导教师</span>
          <div class="line" style="position: relative">
            <span
              v-for="(item, index) in myArrayProp[0].course_teacher"
              :key="index"
              >{{ item.name }}</span
            >
            <span style="position: absolute; right: -100px"
              >{{ myArrayProp[0].course_teacher.length }}(人)</span
            >
          </div>
        </div>
        <div class="basicInformation">
          <span>申请部门</span>
          <div class="line">{{ myArrayProp[0].name }}</div>
        </div>
        <div class="basicInformation">
          <span>申请日期</span>
          <div class="line">{{ myArrayProp[0].applyProjectTime }}</div>
        </div>

        <div
          style="
            font-size: 22px;
            font-family: \4eff\5b8b;
            font-weight: bold;
            margin-bottom: 10px;
          "
        >
          创新创业学院制
        </div>
        <div
          style="font-size: 22px; font-family: \4eff\5b8b; font-weight: bold"
        >
          {{ nowTime }}
        </div>
      </div>

      <tr v-show="false">
        <td v-for="i in 8" :key="i">i</td>
      </tr>
      <tr>
        <td colspan="2">项目名称</td>
        <td colspan="6">
          {{ myArrayProp[0].title }}
        </td>
      </tr>
      <tr>
        <td colspan="2">项目类型</td>
        <td>学生申报</td>
        <td
          colspan="2"
          style="
            text-align: justify;
            text-align-last: justify;
            padding: 0 30px;
            box-sizing: border-box;
          "
        >
          <span
            >{{
              (myArrayProp[0].typeName = "f3068e26-f51d-11ed-a3f6-509a4c5b67cf"
                ? "√"
                : "□")
            }}创意组</span
          >
          <span
            >{{
              (myArrayProp[0].typeName = "f3068e26-f51d-11ed-a3f6-509a4c5b67cf"
                ? "□"
                : "√")
            }}初创组</span
          >
        </td>
        <td>学院申报</td>
        <td colspan="2"><span>□创客空间建设</span></td>
      </tr>
      <tr style="color: red">
        <td colspan="2">项目级别</td>
        <td colspan="8">
          □ 一般资助项目　　　□ 重点资助项目　　　 □ 特别申报项目
        </td>
      </tr>
      <tr>
        <td colspan="2" style="color: red">项目类别</td>
        <td colspan="8">
          □技术创新项目　　　 □ 公益创新项目　　　 □ 非遗文创项目　　　 □
          乡村振兴项目
        </td>
      </tr>
      <tr>
        <td colspan="2">优先支持项目 <br />（可多选）</td>
        <td colspan="8" v-if="myArrayProp[0].multiSelectProject != null">
          {{
            myArrayProp[0].multiSelectProject.includes("1") ? "√" : "□"
          }}大赛选拔项目
          {{ myArrayProp[0].multiSelectProject.includes("2") ? "√" : "□" }}
          落地注册项目
          {{ myArrayProp[0].multiSelectProject.includes("3") ? "√" : "□" }}
          社会征集项目
          {{ myArrayProp[0].multiSelectProject.includes("4") ? "√" : "□" }}
          产业命题项目
        </td>
        <td colspan="8" v-if="myArrayProp[0].multiSelectProject == null">
          □大赛选拔项目 □落地注册项目 □ 社会征集项目 □产业命题项目
        </td>
      </tr>
      <tr>
        <td colspan="2">美丽校园改造项目 <br />（单选）</td>
        <td colspan="8">
          {{ myArrayProp[0].schoolRemould == "1" ? "√" : "□" }}校园安全项目
          {{ myArrayProp[0].schoolRemould == "2" ? "√" : "□" }}环境治理项目
          {{ myArrayProp[0].schoolRemould == "3" ? "√" : "□" }} 校园服务项目
          {{ myArrayProp[0].schoolRemould == "4" ? "√" : "□" }} 文创装置项目
        </td>
      </tr>
      <tr>
        <td colspan="2">项目负责人身份 <br />（单选）</td>
        <td colspan="8">□在校学生 □ 孵化基地创业学生 □ 二级学院项目负责人</td>
      </tr>
      <tr>
        <td colspan="2">项目负责人信息</td>
        <td>姓名</td>
        <td>
          {{ myArrayProp[0].pro_leader }}
        </td>
        <td>所在学院</td>
        <td>
          <el-input
            type="textarea"
            autosize
            style="width: 100%"
            resize="none"
            placeholder=""
            v-model="myArrayProp[0].name"
          >
          </el-input>
        </td>
        <td>联系电话</td>
        <td>
          <!-- 16625153232 -->
          {{ myArrayProp[0].phone }}
        </td>
      </tr>
      <tr>
        <td colspan="2">项目组人数</td>
        <td colspan="2">
          {{
            myArrayProp[0].course_student.length +
            myArrayProp[0].course_teacher.length
          }}人
        </td>
        <td>学生人数</td>
        <td>{{ myArrayProp[0].course_student.length }}</td>
        <td>教师人数</td>
        <td>{{ myArrayProp[0].course_teacher.length }}</td>
      </tr>
      <tr>
        <td colspan="2">项目起始时间</td>
        <td>{{ myArrayProp[0].begin_at }}</td>
        <td colspan="2">项目完成时间</td>
        <td>{{ myArrayProp[0].plannedEnd_at }}</td>
        <td>预算经费</td>
        <td>元</td>
      </tr>
      <tr>
        <td :rowspan="myArrayProp[0].course_student.length + 1">
          学<br />生<br />
          团 <br />队 <br />成 <br />员
        </td>
        <td>姓名</td>
        <td>所在学院及专业</td>
        <td colspan="5">项目分工</td>
      </tr>
      <tr
        v-for="(item, index) in myArrayProp[0].course_student"
        :key="index + 'a'"
      >
        <td><span v-text="item.name"></span></td>
        <td><span v-text="item.class"></span></td>
        <td colspan="5"><span v-text="item.work"></span></td>
      </tr>

      <tr>
        <td :rowspan="myArrayProp[0].course_teacher.length + 1">
          项<br />目<br />
          指 <br />导 <br />教 <br />师
        </td>
      </tr>
      <tr
        v-for="(item, index) in myArrayProp[0].course_teacher"
        :key="index + 'b'"
      >
        <td><span v-text="item.name"></span></td>
        <td></td>
        <td colspan="5"><span v-text="item.work"></span></td>
      </tr>

      <tr>
        <td rowspan="6">
          项 <br />目 <br />研 <br />发 <br />内 <br />容 <br />及 <br />目
          <br />标
        </td>
      </tr>
      <tr>
        <td colspan="7" style="height: 200px">
          <p>一、项目研发内容简介（200字以内）</p>
          <el-input
            type="textarea"
            maxlength="200"
            show-word-limit
            :autosize="{ minRows: 6 }"
            placeholder="请输入内容"
            v-model="myArrayProp[0].brief"
          >
          </el-input>
        </td>
      </tr>
      <tr>
        <td colspan="7" style="height: 200px">
          <p>目标计划：</p>
          <el-input
            type="textarea"
            :autosize="{ minRows: 6 }"
            placeholder="请输入内容"
            v-model="myArrayProp[0]['ClosingstatementData'].plan"
          >
          </el-input>
        </td>
      </tr>
      <tr>
        <td colspan="7" style="height: 200px">
          <p>二、拟解决的关键技术问题</p>
          <el-input
            type="textarea"
            :autosize="{ minRows: 6 }"
            placeholder="请输入内容"
            v-model="myArrayProp[0]['ClosingstatementData'].technology"
          >
          </el-input>
        </td>
      </tr>
      <tr>
        <td colspan="7" style="height: 200px">
          <p>三、项目的商业（公益）价值评估</p>
          <el-input
            type="textarea"
            :autosize="{ minRows: 6 }"
            placeholder="请输入内容"
            v-model="myArrayProp[0]['ClosingstatementData'].business"
          >
          </el-input>
        </td>
      </tr>
      <tr>
        <td colspan="7" style="height: 200px">
          <p>四、项目创新点评估</p>
          <el-input
            type="textarea"
            :autosize="{ minRows: 6 }"
            placeholder="请输入内容"
            v-model="myArrayProp[0]['ClosingstatementData'].innovate"
          >
          </el-input>
        </td>
      </tr>

      <tr>
        <td rowspan="10">
          成 <br />果 <br />及 <br />社 <br />会 <br />价 <br />值
        </td>
      </tr>
      <tr>
        <td colspan="7">
          <p>一、成果（名称、数量及形式,开发产品及取得的专利等）</p>
          <p>专利证书获得（提供专利申请或成果证书附件）：</p>
          <beUpload
            style="position: absolute; right: 10px; top: 5px"
            @getFile="getFile"
            :navName="'上传文件'"
            :accept="accept"
            :progress="progress7"
          ></beUpload>
          <el-progress
            v-show="progress7.show"
            :percentage="progress7.value"
            :format="ProgressFormatresultAccessory"
            style="width: 80%"
          ></el-progress>

          <div
            :class="
              myArrayProp[0]['ClosingstatementData'].resultAccessory.length > 0
                ? 'bigBlock'
                : 'noFileBox'
            "
          >
            <div
              class="fileBlock"
              v-for="(item, index) in myArrayProp[0]['ClosingstatementData']
                .resultAccessory"
              :key="index + 'a'"
            >
              <div class="fileBox">
                <div class="fileBoxLeft" @click="checkFile(item.url)">
                  <div class="chapter_upload_l_i3"></div>
                  <div class="titName">{{ item.fileName }}</div>
                </div>
                <div class="fileBoxRight">
                  <div
                    class="chapter_upload_ic_r"
                    @click="deleteFile(index, 1)"
                  ></div>
                </div>
              </div>
            </div>
          </div>
          <!-- <el-input
                    type="textarea"
                    :autosize="{minRows: 6}"
                    placeholder="请输入内容"
                    v-model="myArrayProp[0].brief">
                </el-input> -->
        </td>
      </tr>
      <tr>
        <td colspan="7" style="height: 200px">
          <p>企业应用实证（提供企业证明或合作协议证明等附件）：</p>
          <beUpload
            style="position: absolute; right: 10px; top: 5px"
            @getFile="getfirmAccessory"
            :navName="'上传文件'"
            :accept="accept"
            :progress="progress1"
          ></beUpload>
          <el-progress
            v-show="progress1.show"
            :percentage="progress1.value"
            :format="ProgressFormatfirmAccessory"
            style="width: 80%"
          ></el-progress>

          <div
            :class="
              myArrayProp[0]['ClosingstatementData'].firmAccessory.length > 0
                ? 'bigBlock'
                : 'noFileBox'
            "
          >
            <div
              class="fileBlock"
              v-for="(item, index) in myArrayProp[0]['ClosingstatementData']
                .firmAccessory"
              :key="index + 'a'"
              style="cursor: pointer"
            >
              <div class="fileBox">
                <div class="fileBoxLeft" @click="checkFile(item.url)">
                  <div class="chapter_upload_l_i3"></div>
                  <div class="titName">{{ item.fileName }}</div>
                </div>
                <div class="fileBoxRight">
                  <div
                    class="chapter_upload_ic_r"
                    @click="deleteFile(index, 2)"
                  ></div>
                </div>
              </div>
            </div>
          </div>
          <!-- <el-input
                    type="textarea"
                    :autosize="{minRows: 6}"
                    placeholder="请输入内容"
                    v-model="myArrayProp[0].brief">
                </el-input> -->
        </td>
      </tr>
      <tr>
        <td colspan="7" style="height: 200px">
          <p>双创竞赛成绩（提供参加师生名单、比赛取得的成绩等附件）：</p>
          <beUpload
            style="position: absolute; right: 10px; top: 5px"
            @getFile="getcompetitionAccessory"
            :navName="'上传文件'"
            :accept="accept"
            :progress="progress2"
          ></beUpload>
          <el-progress
            v-show="progress2.show"
            :percentage="progress2.value"
            :format="ProgressFormatcompetitionAccessory"
            style="width: 80%"
          ></el-progress>

          <div
            :class="
              myArrayProp[0]['ClosingstatementData'].competitionAccessory
                .length > 0
                ? 'bigBlock'
                : 'noFileBox'
            "
          >
            <div
              class="fileBlock"
              v-for="(item, index) in myArrayProp[0]['ClosingstatementData']
                .competitionAccessory"
              :key="index + 'a'"
            >
              <div class="fileBox">
                <div class="fileBoxLeft" @click="checkFile(item.url)">
                  <div class="chapter_upload_l_i3"></div>
                  <div class="titName">{{ item.fileName }}</div>
                </div>
                <div class="fileBoxRight">
                  <div
                    class="chapter_upload_ic_r"
                    @click="deleteFile(index, 3)"
                  ></div>
                </div>
              </div>
            </div>
          </div>
        </td>
      </tr>
      <tr>
        <td colspan="7" style="height: 200px">
          <p>参展或交流活动（提供参加师生名单、活动方案及照片等附件）：</p>
          <beUpload
            style="position: absolute; right: 10px; top: 5px"
            @getFile="getexchangeAccessory"
            :navName="'上传文件'"
            :accept="accept"
            :progress="progress3"
          ></beUpload>
          <el-progress
            v-show="progress3.show"
            :percentage="progress3.value"
            :format="ProgressFormatexchangeAccessory"
            style="width: 80%"
          ></el-progress>

          <div
            :class="
              myArrayProp[0]['ClosingstatementData'].exchangeAccessory.length >
              0
                ? 'bigBlock'
                : 'noFileBox'
            "
          >
            <div
              class="fileBlock"
              v-for="(item, index) in myArrayProp[0]['ClosingstatementData']
                .exchangeAccessory"
              :key="index + 'a'"
            >
              <div class="fileBox">
                <div class="fileBoxLeft" @click="checkFile(item.url)">
                  <div class="chapter_upload_l_i3"></div>
                  <div class="titName">{{ item.fileName }}</div>
                </div>
                <div class="fileBoxRight">
                  <div
                    class="chapter_upload_ic_r"
                    @click="deleteFile(index, 4)"
                  ></div>
                </div>
              </div>
            </div>
          </div>
        </td>
      </tr>
      <tr>
        <td colspan="7" style="height: 200px">
          <p>创业公司转化（提供公司注册资料、营业执照等附件）：</p>
          <beUpload
            style="position: absolute; right: 10px; top: 5px"
            @getFile="getconversionAccessory"
            :navName="'上传文件'"
            :accept="accept"
            :progress="progress4"
          ></beUpload>
          <el-progress
            v-show="progress4.show"
            :percentage="progress4.value"
            :format="ProgressFormatconversionAccessory"
            style="width: 80%"
          ></el-progress>

          <div
            :class="
              myArrayProp[0]['ClosingstatementData'].conversionAccessory
                .length > 0
                ? 'bigBlock'
                : 'noFileBox'
            "
          >
            <div
              class="fileBlock"
              v-for="(item, index) in myArrayProp[0]['ClosingstatementData']
                .conversionAccessory"
              :key="index + 'a'"
            >
              <div class="fileBox">
                <div class="fileBoxLeft" @click="checkFile(item.url)">
                  <div class="chapter_upload_l_i3"></div>
                  <div class="titName">{{ item.fileName }}</div>
                </div>
                <div class="fileBoxRight">
                  <div
                    class="chapter_upload_ic_r"
                    @click="deleteFile(index, 5)"
                  ></div>
                </div>
              </div>
            </div>
          </div>
        </td>
      </tr>
      <tr>
        <td colspan="7" style="height: 200px">
          <p>二、创客人才培养（提供成果、数量、学生名单等附件）</p>
          <beUpload
            style="position: absolute; right: 10px; top: 5px"
            @getFile="gettalentsAccessory"
            :navName="'上传文件'"
            :accept="accept"
            :progress="progress5"
          ></beUpload>
          <el-progress
            v-show="progress5.show"
            :percentage="progress5.value"
            :format="ProgressFormattalentsAccessory"
            style="width: 80%"
          ></el-progress>

          <div
            :class="
              myArrayProp[0]['ClosingstatementData'].talentsAccessory.length > 0
                ? 'bigBlock'
                : 'noFileBox'
            "
          >
            <div
              class="fileBlock"
              v-for="(item, index) in myArrayProp[0]['ClosingstatementData']
                .talentsAccessory"
              :key="index + 'a'"
            >
              <div class="fileBox">
                <div class="fileBoxLeft" @click="checkFile(item.url)">
                  <div class="chapter_upload_l_i3"></div>
                  <div class="titName">{{ item.fileName }}</div>
                </div>
                <div class="fileBoxRight">
                  <div
                    class="chapter_upload_ic_r"
                    @click="deleteFile(index, 6)"
                  ></div>
                </div>
              </div>
            </div>
          </div>
        </td>
      </tr>
      <tr>
        <td colspan="7" style="height: 200px">
          <p>目标计划：</p>
          <el-input
            type="textarea"
            :autosize="{ minRows: 6 }"
            placeholder="请输入内容"
            v-model="myArrayProp[0]['ClosingstatementData'].targetPlan"
          >
          </el-input>
        </td>
      </tr>
      <tr>
        <td colspan="7" style="height: 200px">
          <p>实际结果：</p>
          <el-input
            type="textarea"
            :autosize="{ minRows: 6 }"
            placeholder="请输入内容"
            v-model="myArrayProp[0]['ClosingstatementData'].realityResult"
          >
          </el-input>
        </td>
      </tr>
      <tr>
        <td colspan="7" style="height: 200px">
          <p>三、社会价值（项目实践运用情况及效果评价）</p>
          <el-input
            type="textarea"
            :autosize="{ minRows: 6 }"
            placeholder="请输入内容"
            v-model="myArrayProp[0]['ClosingstatementData'].socialValue"
          >
          </el-input>
        </td>
      </tr>

      <tr>
        <td>附件</td>
        <td colspan="7" style="height: 200px">
          <p>附：课题研究报告、用户评价意见或专家鉴定意见、其它附件等等</p>
          <beUpload
            style="position: absolute; right: 10px; top: 5px"
            @getFile="gettaskAccessory"
            :navName="'上传文件'"
            :accept="accept"
            :progress="progress6"
          ></beUpload>
          <el-progress
            v-show="progress6.show"
            :percentage="progress6.value"
            :format="ProgressFormattaskAccessory"
            style="width: 80%"
          ></el-progress>

          <div
            :class="
              myArrayProp[0]['ClosingstatementData'].taskAccessory.length > 0
                ? 'bigBlock'
                : 'noFileBox'
            "
          >
            <div
              class="fileBlock"
              v-for="(item, index) in myArrayProp[0]['ClosingstatementData']
                .taskAccessory"
              :key="index + 'a'"
            >
              <div class="fileBox">
                <div class="fileBoxLeft" @click="checkFile(item.url)">
                  <div class="chapter_upload_l_i3"></div>
                  <div class="titName">{{ item.fileName }}</div>
                </div>
                <div class="fileBoxRight">
                  <div
                    class="chapter_upload_ic_r"
                    @click="deleteFile(index, 7)"
                  ></div>
                </div>
              </div>
            </div>
          </div>
        </td>
      </tr>

      <tr>
        <td rowspan="12">经 <br /><br />费 <br /><br />使 <br /><br />用</td>
        <td colspan="2">预算总经费</td>
        <td colspan="2">{{ myArrayProp[0].fund }}元</td>
        <td>实际使用</td>
        <td colspan="2">{{ myArrayProp[0].actualuse }}元</td>
      </tr>
      <tr>
        <td>经费大类</td>
        <td>经费小类</td>
        <td>支出科目</td>
        <td>金额（元）</td>
        <td colspan="3">计算依据及理由</td>
      </tr>
      <tr>
        <td rowspan="5">直接经费</td>
      </tr>
      <!-- total：总经费     
              小型仪器设备费：device        deviceRemarks
              材料费：Material             MaterialRemarks
              测试化验加工费：processing    processingRemarks
              项目协作费：Collaboration     CollaborationRemarks
              项目成果鉴定费：APPRAISAL     APPRAISALRemarks
              参展参赛费：entery            enteryRemarks
              创客交流活动费：activities    activitiesRemarks
              知识产权事务费：Transaction   TransactionRemarks -->
      <tr>
        <td>小型仪器设备费</td>
        <td></td>
        <td>
          <el-input
            v-model="myArrayProp[0]['money'].device"
            @change="getPrice"
          ></el-input>
        </td>
        <td colspan="3">
          项目开展所需的小型专用仪器设备、工具、配件购置或租赁费用。
        </td>
      </tr>
      <tr>
        <td>材料费</td>
        <td></td>
        <td>
          <el-input
            v-model="myArrayProp[0]['money'].Material"
            @change="getPrice"
          ></el-input>
        </td>
        <td colspan="3">
          项目开展需消耗的各种原材料、辅助材料等低值易耗品的采购费用。
        </td>
      </tr>
      <tr>
        <td>测试化验加工费</td>
        <td></td>
        <td>
          <el-input
            v-model="myArrayProp[0]['money'].processing"
            @change="getPrice"
          ></el-input>
        </td>
        <td colspan="3">
          项目开展过程中支付给外单位的检验、测试、化验、计算、分析及加工费等费用。
        </td>
      </tr>
      <tr>
        <td>项目协作费</td>
        <td></td>
        <td>
          <el-input
            v-model="myArrayProp[0]['money'].Collaboration"
            @change="getPrice"
          ></el-input>
        </td>
        <td colspan="3">按合同规定支付给协作单位的费用</td>
      </tr>
      <tr>
        <td rowspan="5">间接经费</td>
      </tr>
      <tr>
        <td>项目成果鉴定费</td>
        <td></td>
        <td>
          <el-input
            v-model="myArrayProp[0]['money'].APPRAISAL"
            @change="getPrice"
          ></el-input>
        </td>
        <td colspan="3">学术会务费、评审费、鉴定费、成果集制作费等费用。</td>
      </tr>
      <tr>
        <td>参展参赛费</td>
        <td></td>
        <td>
          <el-input
            v-model="myArrayProp[0]['money'].entery"
            @change="getPrice"
          ></el-input>
        </td>
        <td colspan="3">
          参加创客展会、竞赛等所需的报名费、展位费、布展费、宣传推广费及差旅费等费用。
        </td>
      </tr>
      <tr>
        <td>创客交流活动费</td>
        <td></td>
        <td>
          <el-input
            v-model="myArrayProp[0]['money'].activities"
            @change="getPrice"
          ></el-input>
        </td>
        <td colspan="3">
          创客交流活动中支付给校外专家的指导费、咨询费、授课费等费用。
        </td>
      </tr>
      <tr>
        <td>知识产权事务费</td>
        <td></td>
        <td>
          <el-input
            v-model="myArrayProp[0]['money'].Transaction"
            @change="getPrice"
          ></el-input>
        </td>
        <td colspan="3">论文版面费、专利及其他知识产权事务等费用。</td>
      </tr>

      <tr>
        <td>
          所 <br />在 <br />学 <br />院/ <br />部 <br />门 <br />意 <br />见
        </td>
        <td colspan="7">
          <div style="width: 200px; float: right; margin: 10px 300px">
            负责人签章：
          </div>
          <div style="width: 200px; float: right; margin: 10px 100px">
            年 月 日
          </div>
        </td>
      </tr>

      <tr>
        <td>专 <br />家 <br />验 <br />收 <br />结 <br />论</td>
        <td colspan="7">
          <div style="width: 200px; float: right; margin: 10px 300px">
            负责人签章：
          </div>
          <div style="width: 200px; float: right; margin: 10px 100px">
            年 月 日
          </div>
        </td>
      </tr>

      <tr>
        <td>双 <br />创 <br />学 <br />院 <br />意 <br />见</td>
        <td colspan="7">
          <div style="width: 200px; float: right; margin: 10px 300px">
            负责人签章：
          </div>
          <div style="width: 200px; float: right; margin: 10px 100px">
            年 月 日
          </div>
        </td>
      </tr>

      <tr>
        <td>学 <br />校 <br />审 <br />批 <br />意 <br />见</td>
        <td colspan="7">
          <div style="width: 200px; float: right; margin: 10px 300px">
            负责人签章：
          </div>
          <div style="width: 200px; float: right; margin: 10px 100px">
            年 月 日
          </div>
        </td>
      </tr>
      <div class="ending">
        <p>备注：1、本表一式三份，专家验收后交双创学院</p>
        <p style="text-indent: 3em">
          2、各栏目若不够填写，可自行加页，加页需紧附该栏目之后。
        </p>
      </div>
    </table>

    <!-- 展示文档开始 -->
    <el-dialog
      title="展示文件"
      :visible.sync="showFile"
      top="1vh"
      width="80vw"
      append-to-body
    >
      <div class="showFileArea" style="height: 80vh">
        <!-- <vpdf v-if="/^\s*$/g.test(showFileUrl)&&showFileUrl.split('.')[showFileUrl.split('.').length-1]=='pdf'" :pdfUrl="showFileUrl"></vpdf> -->
        <div
          class="workd_media"
          style="width: 90%; height: 90%"
          v-if="videoDetail.sources"
        >
          <video-player
            class="video-player vjs-custom-skin"
            :playsinline="true"
            :options="videoDetail"
            @play="onPlayerPlay($event)"
            style="width: 90%; height: 90%; margin: 0 auto"
          ></video-player>
        </div>
        <vword
          style="width: 100%; height: 100%; overflow: auto"
          class="fullStyle"
          v-else-if="Wordss['type'] != 'pdf' && Wordss['name'] != '图片'"
          :pdfUrl="
            'https://view.officeapps.live.com/op/view.aspx?src=' + showFileUrl
          "
        ></vword>
        <vpdf
          style="width: 100%; height: 100%; overflow: auto"
          class="fullStyle"
          :pdfUrl="showFileUrl"
          v-else-if="Wordss['type'] == 'pdf'"
        ></vpdf>
        <img
          :src="showFileUrl"
          alt="图片哦"
          v-else-if="Wordss['name'] == '图片'"
          style="width: auto; height: auto; max-width: 100%; max-height: 100%"
        />
      </div>
      <!-- <el-button type="primary" size="mini" @click="downFile(showFileUrl)">下载文件</el-button> -->
    </el-dialog>
  </div>
</template>

<script>
import { getNowDate } from "@/components/tool/Date.js";
import beUpload from "@/components/tool/beUpload";
import vpdf from "@/components/vpdf.vue";
import vword from "@/components/vword.vue";
export default {
  props: {
    myArrayProp: {
      type: Array,
      required: true,
    },
    iid: {
      type: String,
      required: true,
    },
  },
  components: { beUpload, vpdf, vword },
  data() {
    return {
      accept: "*",
      nowTime: getNowDate(1),
      file: "",
      progress1: {
        value: 0,
        show: false,
      },
      progress2: {
        value: 0,
        show: false,
      },
      progress3: {
        value: 0,
        show: false,
      },
      progress4: {
        value: 0,
        show: false,
      },
      progress5: {
        value: 0,
        show: false,
      },
      progress6: {
        value: 0,
        show: false,
      },
      progress7: {
        value: 0,
        show: false,
      },
      showFile: false,
      showFileUrl: "",
      Wordss: { type: "", name: "" },
      canonical: {
        Image:
          /^https?:\/\/(.+\/)+.+(\.(gif|png|jpg|jpeg|webp|svg|psd|bmp|tif))$/i,
        File: /^https?:\/\/(.+\/)+.+(\.(docx|xlsx|ppt|pdf))$/i,
      },
      word: [
        "DOC",
        "DOCX",
        "DOCM",
        "DOTM",
        "DOTX",
        "PPTX",
        "PPSX",
        "PPT",
        "PPS",
        "PPTM",
        "POTM",
        "PPAM",
        "POTX",
        "PPSM",
        "XLSX",
        "XLS",
      ],
      pdf: ["PDF"],
      image: [
        "BMP",
        "PJP",
        "APNG",
        "PNG",
        "JPG",
        "GIF",
        "SVG",
        "JPEG",
        "JPG",
        "ICO",
        "PGPEG",
        "AVIF",
      ],
      vedio: [
        "AVI",
        "NAVI",
        "MPEG",
        "ASF",
        "MOV",
        "WMV",
        "3GP",
        "RM",
        "RMVB",
        "FLV",
        "F4V",
        "H.264",
        "H.265",
        "REAL VIDEO",
        "MKV",
        "WebM",
        "HDDVD",
        "MP4",
        "MPG",
        "M4V",
        "MGV",
        "OGV",
        "QTM",
        "STR",
        "AMC",
        "DVX",
        "EVO",
        "DAT",
        "OGG",
        "OGM",
      ],
      playerOptions: {
        playbackRates: [0.7, 1.0, 1.5, 2.0], //播放速度
        autoplay: false, //如果true,浏览器准备好时开始回放。
        muted: false, // 默认情况下将会消除任何音频。
        loop: false, // 导致视频一结束就重新开始。
        preload: "auto", // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）
        language: "zh-CN",
        aspectRatio: "16:9", // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
        fluid: true, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
        sources: [
          {
            type: "video/mp4", //这里的种类支持很多种：基本视频格式、直播、流媒体等，具体可以参看git网址项目   || "video/ogg"|| "video/webm"
            src: "", //url地址require("../../assets/media/aaa.mp4")
          },
        ],
        // poster: require("../../assets/tu31.png"), //你的封面地址
        // poster: dataRes.imgUrl, //你的封面地址
        notSupportedMessage: "此视频暂无法播放，请稍后再试", //允许覆盖Video.js无法播放媒体源时显示的默认信息。
        controlBar: {
          timeDivider: true, //当前时间和持续时间的分隔符
          durationDisplay: true, //显示持续时间
          remainingTimeDisplay: false, //是否显示剩余时间功能
          fullscreenToggle: true, //全屏按钮
        },
      },
      playerO: {},
      videoDetail: {},
    };
  },
  methods: {
    getFile(val) {
      //上传成果文件
      console.log(val);
      this.progress7.show = false;
      this.myArrayProp[0]["ClosingstatementData"].resultAccessory.push(val);
      this.setFile();
    },
    deleteFile(val, t) {
      console.log(val);
      if (t == 1) {
        this.myArrayProp[0]["ClosingstatementData"].resultAccessory.splice(
          val,
          1
        );
      } else if (t == 2) {
        this.myArrayProp[0]["ClosingstatementData"].firmAccessory.splice(
          val,
          1
        );
      } else if (t == 3) {
        this.myArrayProp[0]["ClosingstatementData"].competitionAccessory.splice(
          val,
          1
        );
      } else if (t == 4) {
        this.myArrayProp[0]["ClosingstatementData"].exchangeAccessory.splice(
          val,
          1
        );
      } else if (t == 5) {
        this.myArrayProp[0]["ClosingstatementData"].conversionAccessory.splice(
          val,
          1
        );
      } else if (t == 6) {
        this.myArrayProp[0]["ClosingstatementData"].talentsAccessory.splice(
          val,
          1
        );
      } else {
        this.myArrayProp[0]["ClosingstatementData"].taskAccessory.splice(
          val,
          1
        );
      }
      this.setFile();
    },
    getfirmAccessory(val) {
      //上传企业应用实证
      this.progress1.show = false;
      this.myArrayProp[0]["ClosingstatementData"].firmAccessory.push(val);
      this.setFile();
    },
    getcompetitionAccessory(val) {
      //双创竞赛成绩
      this.progress2.show = false;
      this.myArrayProp[0]["ClosingstatementData"].competitionAccessory.push(
        val
      );
      this.setFile();
    },
    getexchangeAccessory(val) {
      //参展或交流活动
      this.progress3.show = false;
      this.myArrayProp[0]["ClosingstatementData"].exchangeAccessory.push(val);
      this.setFile();
    },
    getconversionAccessory(val) {
      //创业公司转化
      this.progress4.show = false;
      this.myArrayProp[0]["ClosingstatementData"].conversionAccessory.push(val);
      this.setFile();
    },
    gettalentsAccessory(val) {
      //创客人才培养
      this.progress5.show = false;
      this.myArrayProp[0]["ClosingstatementData"].talentsAccessory.push(val);
      this.setFile();
    },
    gettaskAccessory(val) {
      //
      this.progress6.show = false;
      this.myArrayProp[0]["ClosingstatementData"].taskAccessory.push(val);
      this.setFile();
    },

    ProgressFormattaskAccessory(value) {
      //进度条
      return value == 100 ? "100%" : `${value}%`;
    },
    ProgressFormattalentsAccessory(value) {
      //进度条
      return value == 100 ? "100%" : `${value}%`;
    },
    ProgressFormatconversionAccessory(value) {
      //进度条
      return value == 100 ? "100%" : `${value}%`;
    },
    ProgressFormatexchangeAccessory(value) {
      //进度条
      return value == 100 ? "100%" : `${value}%`;
    },
    ProgressFormatcompetitionAccessory(value) {
      //进度条
      return value == 100 ? "100%" : `${value}%`;
    },
    ProgressFormatfirmAccessory(value) {
      //进度条
      return value == 100 ? "100%" : `${value}%`;
    },
    ProgressFormatresultAccessory(value) {
      //进度条
      return value == 100 ? "100%" : `${value}%`;
    },
    //展示文件
    checkFile(url) {
      this.videoDetail = {};
      if (
        this.vedio.indexOf(
          url.split(".")[url.split(".").length - 1].toLocaleUpperCase()
        ) != -1
      ) {
        this.playerOptions.sources[0].src = url;
        this.videoDetail = this.playerOptions;
        this.showFile = true;
      } else {
        if (
          this.word.indexOf(
            url.split(".")[url.split(".").length - 1].toLocaleUpperCase()
          ) == -1 &&
          this.pdf.indexOf(
            url.split(".")[url.split(".").length - 1].toLocaleUpperCase()
          ) == -1 &&
          this.image.indexOf(
            url.split(".")[url.split(".").length - 1].toLocaleUpperCase()
          ) == -1
        ) {
          this.downFile(url);
          return;
        }
        this.showFileUrl = url;
        this.showFile = true;
        if (typeof url == "undefined") return { type: "", name: "" };
        let urlSplit = url.split(".");
        const type = urlSplit[urlSplit.length - 1];
        if (this.canonical.Image.test(url)) {
          this.Wordss = { type: type, name: "图片" };
          return console.log(this.Wordss);
        }
        if (this.canonical.File.test(url)) {
          this.Wordss = { type: type, name: "文档" };
          return console.log(this.Wordss);
        }
        if (this.canonical.vedio.test(url)) {
          this.Wordss = { type: type, name: "视频" };
          return console.log(this.Wordss);
        } else return (this.Wordss = { type: type, name: type });
      }
    },
    //下载文件
    downFile(f) {
      var credentials = {
        accessKeyId: "AKIATLPEDU37QV5CHLMH",
        secretAccessKey: "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",
      }; //秘钥形式的登录上传
      window.AWS.config.update(credentials);
      window.AWS.config.region = "cn-northwest-1"; //设置区域
      let url2 = f;
      let _url2 = "";
      if (
        url2.indexOf("https://view.officeapps.live.com/op/view.aspx?src=") != -1
      ) {
        _url2 = url2.split(
          "https://view.officeapps.live.com/op/view.aspx?src="
        )[1];
      } else {
        _url2 = url2;
      }
      var s3 = new window.AWS.S3({ params: { Bucket: "ccrb" } });
      let name = decodeURIComponent(
        _url2.split("https://ccrb.s3.cn-northwest-1.amazonaws.com.cn/")[1]
      );
      var params = {
        Bucket: "ccrb",
        Key: name,
      };
      s3.getObject(params, function (err, data) {
        if (err) console.log(err, err.stack); // an error occurred
        else {
          let url = window.URL.createObjectURL(new Blob([data.Body]));
          let a = document.createElement("a");
          a.name = name;
          a.href = url;
          a.download = name;
          a.click();
          console.log(data);
        } // sxuccessful response
      });

      return;
    },
    getPrice() {
      var a =
        this.myArrayProp[0]["money"].device != ""
          ? parseInt(this.myArrayProp[0]["money"].device)
          : 0;
      var b =
        this.myArrayProp[0]["money"].Material != ""
          ? parseInt(this.myArrayProp[0]["money"].Material)
          : 0;
      var c =
        this.myArrayProp[0]["money"].processing != ""
          ? parseInt(this.myArrayProp[0]["money"].processing)
          : 0;
      var d =
        this.myArrayProp[0]["money"].Collaboration != ""
          ? parseInt(this.myArrayProp[0]["money"].Collaboration)
          : 0;
      var e =
        this.myArrayProp[0]["money"].APPRAISAL != ""
          ? parseInt(this.myArrayProp[0]["money"].APPRAISAL)
          : 0;
      var f =
        this.myArrayProp[0]["money"].entery != ""
          ? parseInt(this.myArrayProp[0]["money"].entery)
          : 0;
      var g =
        this.myArrayProp[0]["money"].activities != ""
          ? parseInt(this.myArrayProp[0]["money"].activities)
          : 0;
      var h =
        this.myArrayProp[0]["money"].Transaction != ""
          ? parseInt(this.myArrayProp[0]["money"].Transaction)
          : 0;
      this.myArrayProp[0].actualuse = a + b + c + d + e + f + g + h;
      this.$forceUpdate();
    },
    onPlayerPlay() {},
    setFile() {
      this.ajax
        .post(this.$store.state.api + "/updateClosingstatementData", {
          uid: this.$store.state.userInfo.userid,
          pid: this.iid,
          cdata: JSON.stringify(this.myArrayProp[0]["ClosingstatementData"]),
          sta: 2,
        })
        .then(
          (res) => {
            console.log(res);
            this.$forceUpdate();
          },
          (err) => {
            console.log(err);
          }
        );
    },
  },
  mounted() {
    // console.log(this.myArrayProp);
    //    this.getData();
    this.getPrice();
  },
};
</script>

<style lang="less" scoped>
table {
  position: relative;
  color: black;
  width: 1200px;
  margin: 0 auto;
  margin-top: 800px;
  margin-bottom: 100px;
  font-size: 16px;
  font-family: \5b8b\4f53;
  .onePage {
    height: 300px;
    width: 100%;
    position: absolute;
    text-align: center;
    top: -700px;
    .titSchool {
      font-weight: 600;
      font-size: 25px;
      margin-bottom: 30px;
      font-family: \6977\4f53;
    }
    .title {
      font-weight: 600;
      font-size: 32px;
      margin-bottom: 30px;
      font-family: \9ed1\4f53;
      margin-bottom: 100px;
    }
    .line {
      width: 300px;
      border-bottom: 1px black solid;
    }
    .basicInformation {
      display: flex;
      justify-content: center;
      font-size: 22px;
      font-family: \4eff\5b8b;
      font-weight: bold;
      margin-bottom: 50px;

      span {
        width: 100px;
        text-align: justify;
        text-align-last: justify;
        /*兼容ie*/
        text-justify: distribute-all-lines;
        margin-right: 10px;
      }
    }
  }
  tr {
    width: 100%;
    border: none;
  }
  tr td {
    height: 60px;
    width: 10%;
    text-align: center;
    box-sizing: border-box;
    padding: 10px;
    position: relative;
    .noFileBox {
      width: 98%;
      min-height: 200px;
      display: flex;
      flex-direction: column;
      flex-wrap: nowrap;
      align-items: flex-start;
    }
    .bigBlock {
      width: 98%;
      min-height: 200px;
      display: flex;
      flex-direction: column;
      flex-wrap: nowrap;
      align-items: flex-start;
      border: 1px solid #cad1dc;
      border-radius: 4px;
      padding: 10px;
      margin: 20px 0 0 0;
      max-height: 200px;
      overflow: auto;
      .fileBlock {
        width: 98%;
        margin-right: 20px;
        position: relative;
        border-radius: 5%;
        padding: 5px 0 5px 0;
        border-bottom: 1px solid #cad1dc;
        .fileBox {
          display: flex;
          flex-direction: row;
          flex-wrap: nowrap;
          justify-content: space-between;
          align-items: center;

          .fileBoxLeft {
            cursor: pointer;
            display: flex;
            flex-direction: row;
            flex-wrap: nowrap;
            align-items: center;
            .chapter_upload_l_i3 {
              width: 15px;
              height: 15px;
              background-repeat: no-repeat;
              background-size: 100% 100%;
              background-image: url("../../../assets/img/u_video.png");
            }
            .titName {
              width: calc(100% - 15px);
              white-space: nowrap;
              overflow: hidden;
              text-overflow: ellipsis;
              word-break: break-word;
              text-align: left;
              margin-left: 10px;
              max-width: 800px;
            }
          }
          .fileBoxRight {
            cursor: pointer;
            display: flex;
            flex-direction: row;
            flex-wrap: nowrap;
            align-items: center;
            .chapter_upload_ic_r {
              width: 18px;
              height: 18px;
              background-repeat: no-repeat;
              background-size: 100% 100%;
              background-image: url("../../../assets/img/delete_u.png");
            }
          }
        }
      }
      .masking-out {
        width: 100px;
        height: 135px;
        position: absolute;
        top: 0;
        left: 0;
        display: none;
        border-radius: 5%;
        background: #00000053;
        .delete {
          cursor: pointer;
          margin-left: 50%;
          margin-top: 50%;
          transform: translate(-50%, -50%);
        }
        .delete:hover {
          color: #fff;
        }
      }
      .fileBlock:hover .masking-out {
        display: block;
      }
    }
    p {
      text-align: left;
    }
    :deep(.el-textarea__inner) {
      border: none;
      resize: none;
      font-size: 18px;
    }
  }
  .ending {
    position: absolute;
    left: 0;
    bottom: -60px;
    p {
      line-height: 1.5em;
    }
  }
}
</style>