EvenManage/src/components/pages/race/eventCenter/anliDetail.vue

<template>
  <div
    class="center_content"
    ref="cenBox"
    @scroll.passive="allScrollTop($event)"
  >
    <div class="detaBox">
      <div class="anliMiddle">
        <div class="anliBox">
          <div class="anliImg">
            <img
              :src="
                anliBox[0] && anliBox[0].info && anliBox[0].info.cover.length
                  ? anliBox[0].info.cover[0].url
                  : noBanner
              "
              alt=""
            />
          </div>
          <div class="anliNav">
            <div>
              项目名称：{{
                anliBox[0] && anliBox[0].info ? anliBox[0].info.title : ""
              }}
            </div>
            <div>创建人：{{ anliBox[0] ? anliBox[0].name : "" }}</div>
            <div>
              <div>单位：{{ anliBox[0] ? anliBox[0].schoolName : "" }}</div>
              <div>
                分类：{{
                  anliBox[0] && anliBox[0].typename
                    ? anliBox[0].typename
                    : "暂无分类"
                }}
              </div>
            </div>
            <div class="personAndAutor">
              <div>总人数：</div>
              <div class="people">
                <div class="man">
                  <img src="../../../../assets/people.png" alt />
                </div>
                <div class="person">
                  {{
                    anliBox[0]
                      ? anliBox[0].info.autor.length +
                        anliBox[0].info.tableData.length
                      : 0
                  }}人
                </div>
              </div>
              <div
                class="autorBox"
                style="margin-left: 15px"
                v-if="anliBox[0].info.autor.length"
              >
                <div>联系人：</div>
                <div v-for="(a, aIndex) in anliBox[0].info.autor" :key="aIndex">
                  {{ a.sn }}
                </div>
              </div>
              <div class="autorBox" v-if="anliBox[0].info.tableData.length">
                <div>协作者：</div>
                <div
                  class="Autor"
                  v-for="(a, aIndex) in anliBox[0].info.tableData"
                  :key="aIndex"
                >
                  {{ a.sn }}
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="navBox" :class="{ isNavBox: isNavTop >= 300 }">
        <div class="navTop" @click="jump('first')">
          <div class="navImg" style="width: 27px">
            <img src="../../../../assets/icon/anliDetail/proOver.png" alt="" />
          </div>
          <div>项目基础信息</div>
        </div>
        <div class="navTop" @click="jump('second')">
          <div class="navImg">
            <img
              src="../../../../assets/icon/anliDetail/proOverTwo.png"
              alt=""
            />
          </div>
          <div>项目概况</div>
        </div>
        <div class="navTop" @click="jump('third')">
          <div class="navImg">
            <img src="../../../../assets/icon/anliDetail/learnObj.png" alt="" />
          </div>
          <div>项目安排</div>
        </div>
        <div class="navTop" @click="jump('fouth')">
          <div class="navImg">
            <img src="../../../../assets/icon/anliDetail/process.png" alt="" />
          </div>
          <div>项目活动过程</div>
        </div>
        <div class="navTop" @click="jump('fivth')">
          <div class="navImg">
            <img src="../../../../assets/icon/anliDetail/proEva.png" alt="" />
          </div>
          <div>项目成果交流与评价</div>
        </div>
        <div class="navTop" @click="jump('sixth')">
          <div class="navImg">
            <img src="../../../../assets/icon/anliDetail/proEff.png" alt="" />
          </div>
          <div>项目成效与反思</div>
        </div>
      </div>

      <div
        class="isNoMessage"
        v-if="
          anliBox[0].info.courseText == '' &&
          anliBox[0].info.imgBox.length == 0 &&
          anliBox[0].info.data.length == 0 &&
          anliBox[0].overview.driQuestion.brief == '' &&
          anliBox[0].overview.driQuestion.imgBox.length == 0 &&
          anliBox[0].overview.tarDesign.brief == '' &&
          anliBox[0].overview.tarDesign.imgBox.length == 0 &&
          anliBox[0].overview.actiDesign.brief == '' &&
          anliBox[0].overview.actiDesign.imgBox.length == 0 &&
          anliBox[0].process.stageBox[0].staTitle == '' &&
          anliBox[0].process.stageBox[0].actBox[0].actName == '' &&
          anliBox[0].process.stageBox[0].brief == '' &&
          anliBox[0].process.stageBox[0].data.length == 0 &&
          anliBox[0].proexc.brief == '' &&
          anliBox[0].proexc.imgBox.length == 0 &&
          anliBox[0].results.brief == '' &&
          anliBox[0].results.imgBox.length == 0
        "
      >
        <img src="../../../../assets/icon/race/isNoMessage.png" alt />
      </div>
      <div class="messageBox" v-else :class="{ isMessageBox: isNavTop >= 300 }">
        <div
          class="jdTopBox"
          id="first"
          v-if="
            anliBox[0].info.courseText != '' ||
            anliBox[0].info.imgBox.length > 0 ||
            (anliBox &&
              anliBox[0].info &&
              anliBox[0].info.data &&
              anliBox[0].info.data.length)
          "
        >
          <div class="jdTopNav" style="font-size: 18px">
            <div class="jdLeftNav">
              <div class="jdImg">
                <img
                  src="../../../../assets/icon/anliDetail/jdTitle.png"
                  alt=""
                />
              </div>
              <div class="jdLeftTitle">
                <div>项目基础信息</div>
              </div>
            </div>
          </div>
        </div>
        <div
          class="proOverCss"
          v-if="
            anliBox[0].info.courseText != '' ||
            anliBox[0].info.imgBox.length > 0 ||
            (anliBox &&
              anliBox[0].info &&
              anliBox[0].info.data &&
              anliBox[0].info.data.length)
          "
        >
          <div class="whiteBg whiteLeft">
            <div class="navBgTop">
              <div class="navBg">基础信息</div>
              <el-button
                v-if="anliBox[0].info.courseText != ''"
                @click="selectNav(anliBox[0].info.courseText)"
                >查看更多</el-button
              >
            </div>
            <div
              v-if="
                anliBox[0].info.courseText != '' ||
                anliBox[0].info.imgBox.length > 0
              "
              class="imgAndNav"
            >
              <div
                class="leftBox"
                v-if="
                  anliBox[0].info.imgBox.length > 0 &&
                  anliBox[0].info.imgBox[0].type == 3
                "
              >
                <div
                  class="leftImg"
                  @click="
                    lookFile1(
                      anliBox[0].info.imgBox[0].url,
                      anliBox[0].info.imgBox[0].type
                    )
                  "
                  v-if="anliBox[0].info.imgBox[0].type == 3"
                >
                  <img :src="anliBox[0].info.imgBox[0].url" alt="" />
                </div>
              </div>

              <div
                :class="
                  anliBox[0].info.imgBox.length > 0 ? 'proOverNav' : 'noImg'
                "
                v-html="anliBox[0].info ? anliBox[0].info.courseText : ''"
              ></div>
            </div>
            <div class="noFile" v-else>
              <img src="../../../../assets/icon/anliDetail/noFile.jpg" alt="" />
            </div>
          </div>
          <div
            class="fileLook"
            v-if="
              pptImgUrl2.infoData != undefined &&
              Object.keys(pptImgUrl2.infoData).length
            "
          >
            <div class="look_file">
              <pdf
                v-if="pptImgUrl2.infoData.showType == 1"
                :pdfUrl="pptImgUrl2.infoData.url"
                style="width: 100%; height: 400px; overflow: auto"
                :class="{ fullStyle: full }"
              ></pdf>
              <iframe
                v-else-if="pptImgUrl2.infoData.showType == 2"
                :src="pptImgUrl2.infoData.url"
                frameborder="0"
                width="100%"
                height="400"
                :class="{ fullStyle: full }"
              ></iframe>
              <div
                class="workd_media"
                style="height: 400px"
                v-else-if="pptImgUrl2.infoData.showType == 3"
              >
                <video-player
                  class="video-player vjs-custom-skin"
                  :playsinline="true"
                  :options="pptImgUrl2.infoData.playerO"
                  @play="onPlayerPlay($event)"
                  style="width: 70%; height: 400px; margin: 0 auto"
                ></video-player>
              </div>
              <div
                class="leftImg"
                style="height: 400px"
                v-else-if="pptImgUrl2.infoData.showType == 4"
              >
                <img :src="pptImgUrl2.infoData.url" alt="" />
              </div>
            </div>
            <div class="whiteRight">
              <div class="fileTop">
                <div class="fileListImg">
                  <img
                    src="../../../../assets/icon/anliDetail/onePic.png"
                    alt=""
                  />
                </div>
                <div>项目方案与活动案例</div>
              </div>
              <div class="fileBox">
                <div
                  class="fileList"
                  v-if="
                    anliBox &&
                    anliBox[0].info &&
                    anliBox[0].info.data &&
                    anliBox[0].info.data.length
                  "
                >
                  <div
                    class="file"
                    v-for="(f, fIndex) in anliBox[0].info.data"
                    :key="fIndex"
                  >
                    <div class="fileCss">
                      <div>
                        1.{{
                          f.type == 1 ? "文档" : f.type == 2 ? "视频" : "图片"
                        }}
                      </div>
                      <div>
                        <div @click="lookFile2(f.url, f.type, 0)">
                          {{ f.name }}
                        </div>
                        <!-- <div class="downFile" @click="downloadFile(f.url)">
                        <img
                          src="../../../../assets/icon/anliDetail/down.png"
                          alt=""
                        />
                      </div> -->
                      </div>
                    </div>
                  </div>
                </div>
                <div class="noFile" v-else>
                  <img
                    src="../../../../assets/icon/anliDetail/noFile.jpg"
                    alt=""
                  />
                </div>
              </div>
            </div>
          </div>
        </div>
        <div>
          <div
            class="jdTopBox"
            id="second"
            v-if="
              (anliBox[0].overview.driQuestion.brief != '' ||
                anliBox[0].overview.driQuestion.imgBox.length > 0 ||
                anliBox[0].overview.driQuestion.data.length) &&
              (anliBox[0].overview.tarDesign.brief != '' ||
                anliBox[0].overview.tarDesign.imgBox.length > 0 ||
                anliBox[0].overview.tarDesign.data.length) &&
              (anliBox[0].overview.actiDesign.brief != '' ||
                anliBox[0].overview.actiDesign.imgBox.length > 0 ||
                anliBox[0].overview.actiDesign.data.length > 0)
            "
          >
            <div class="jdTopNav" style="font-size: 18px">
              <div class="jdLeftNav">
                <div class="jdImg">
                  <img
                    src="../../../../assets/icon/anliDetail/jdTitle.png"
                    alt=""
                  />
                </div>
                <div class="jdLeftTitle">
                  <div>项目概况</div>
                </div>
              </div>
            </div>
          </div>
          <div
            class="proOverCss"
            v-if="
              anliBox[0].overview.driQuestion.brief != '' ||
              anliBox[0].overview.driQuestion.imgBox.length > 0 ||
              anliBox[0].overview.driQuestion.data.length
            "
          >
            <div class="whiteBg whiteLeft">
              <div class="navBgTop">
                <div class="navBg">驱动问题</div>
                <el-button
                  v-if="anliBox[0].overview.driQuestion.brief != ''"
                  @click="selectNav(anliBox[0].overview.driQuestion.brief)"
                  >查看更多</el-button
                >
              </div>
              <div
                v-if="
                  anliBox[0].overview.driQuestion.brief != '' ||
                  anliBox[0].overview.driQuestion.imgBox.length > 0
                "
                class="imgAndNav"
              >
                <div
                  class="leftBox"
                  v-if="
                    anliBox[0].overview.driQuestion.imgBox.length > 0 &&
                    anliBox[0].overview.driQuestion.imgBox[0].type == 3
                  "
                >
                  <div
                    class="leftImg"
                    @click="
                      lookFile1(
                        anliBox[0].overview.driQuestion.imgBox[0].url,
                        anliBox[0].overview.driQuestion.imgBox[0].type
                      )
                    "
                    v-if="anliBox[0].overview.driQuestion.imgBox[0].type == 3"
                  >
                    <img
                      :src="anliBox[0].overview.driQuestion.imgBox[0].url"
                      alt=""
                    />
                  </div>
                </div>

                <div
                  :class="
                    anliBox[0].overview.driQuestion.imgBox.length > 0
                      ? 'proOverNav'
                      : 'noImg'
                  "
                  v-html="
                    anliBox[0].overview.driQuestion
                      ? anliBox[0].overview.driQuestion.brief
                      : ''
                  "
                ></div>
              </div>
              <div class="noFile" v-else>
                <img
                  src="../../../../assets/icon/anliDetail/noFile.jpg"
                  alt=""
                />
              </div>
            </div>
            <div
              class="fileLook"
              v-if="
                pptImgUrl2.overData.driData != undefined &&
                Object.keys(pptImgUrl2.overData.driData).length
              "
            >
              <div class="look_file">
                <pdf
                  v-if="pptImgUrl2.overData.driData.showType == 1"
                  :pdfUrl="pptImgUrl2.overData.driData.url"
                  style="width: 100%; height: 400px; overflow: auto"
                  :class="{ fullStyle: full }"
                ></pdf>
                <iframe
                  v-else-if="pptImgUrl2.overData.driData.showType == 2"
                  :src="pptImgUrl2.overData.driData.url"
                  frameborder="0"
                  width="100%"
                  height="400"
                  :class="{ fullStyle: full }"
                ></iframe>
                <div
                  class="workd_media"
                  style="height: 400px"
                  v-else-if="pptImgUrl2.overData.driData.showType == 3"
                >
                  <video-player
                    class="video-player vjs-custom-skin"
                    :playsinline="true"
                    :options="pptImgUrl2.overData.driData.playerO"
                    @play="onPlayerPlay($event)"
                    style="width: 70%; height: 400px; margin: 0 auto"
                  ></video-player>
                </div>
                <div
                  class="leftImg"
                  style="height: 400px"
                  v-else-if="pptImgUrl2.overData.driData.showType == 4"
                >
                  <img :src="pptImgUrl2.overData.driData.url" alt="" />
                </div>
              </div>
              <div class="whiteRight">
                <div class="fileTop">
                  <div class="fileListImg">
                    <img
                      src="../../../../assets/icon/anliDetail/fileList.png"
                      alt=""
                    />
                  </div>
                  <div>佐证材料</div>
                </div>
                <div class="fileBox">
                  <div
                    class="fileList"
                    v-if="anliBox[0].overview.driQuestion.data.length"
                  >
                    <div
                      class="file"
                      v-for="(f, fIndex) in anliBox[0].overview.driQuestion
                        .data"
                      :key="fIndex"
                    >
                      <div class="fileCss">
                        <div>
                          1.{{
                            f.type == 1 ? "文档" : f.type == 2 ? "视频" : "图片"
                          }}
                        </div>
                        <div>
                          <div @click="lookFile2(f.url, f.type, 1)">
                            {{ f.name }}
                          </div>
                          <!-- <div class="downFile" @click="downloadFile(f.url)">
                          <img
                            src="../../../../assets/icon/anliDetail/down.png"
                            alt=""
                          />
                        </div> -->
                        </div>
                      </div>
                    </div>
                  </div>
                  <div class="noFile" v-else>
                    <img
                      src="../../../../assets/icon/anliDetail/noFile.jpg"
                      alt=""
                    />
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div
            class="proOverCss"
            v-if="
              anliBox[0].overview.tarDesign.brief != '' ||
              anliBox[0].overview.tarDesign.imgBox.length > 0 ||
              anliBox[0].overview.tarDesign.data.length
            "
          >
            <div class="whiteBg whiteLeft">
              <div class="navBgTop">
                <div class="navBg">学习目标</div>
                <el-button
                  v-if="anliBox[0].overview.tarDesign.brief != ''"
                  @click="selectNav(anliBox[0].overview.tarDesign.brief)"
                  >查看更多</el-button
                >
              </div>
              <div
                v-if="
                  anliBox[0].overview.tarDesign.brief != '' ||
                  anliBox[0].overview.tarDesign.imgBox.length > 0
                "
                class="imgAndNav"
              >
                <div
                  class="leftBox"
                  v-if="
                    anliBox[0].overview.tarDesign.imgBox.length > 0 &&
                    anliBox[0].overview.tarDesign.imgBox[0].type == 3
                  "
                >
                  <div
                    class="leftImg"
                    @click="
                      lookFile1(
                        anliBox[0].overview.tarDesign.imgBox[0].url,
                        anliBox[0].overview.tarDesign.imgBox[0].type
                      )
                    "
                    v-if="anliBox[0].overview.tarDesign.imgBox[0].type == 3"
                  >
                    <img
                      :src="anliBox[0].overview.tarDesign.imgBox[0].url"
                      alt=""
                    />
                  </div>
                </div>

                <div
                  :class="
                    anliBox[0].overview.tarDesign.imgBox.length > 0
                      ? 'proOverNav'
                      : 'noImg'
                  "
                  v-html="
                    anliBox[0].overview.tarDesign
                      ? anliBox[0].overview.tarDesign.brief
                      : ''
                  "
                ></div>
              </div>
              <div class="noFile" v-else>
                <img
                  src="../../../../assets/icon/anliDetail/noFile.jpg"
                  alt=""
                />
              </div>
            </div>
            <div
              class="fileLook"
              v-if="
                pptImgUrl2.overData.tarData != undefined &&
                Object.keys(pptImgUrl2.overData.tarData).length
              "
            >
              <div class="look_file">
                <pdf
                  v-if="pptImgUrl2.overData.tarData.showType == 1"
                  :pdfUrl="pptImgUrl2.overData.tarData.url"
                  style="width: 100%; height: 400px; overflow: auto"
                  :class="{ fullStyle: full }"
                ></pdf>
                <iframe
                  v-else-if="pptImgUrl2.overData.tarData.showType == 2"
                  :src="pptImgUrl2.overData.tarData.url"
                  frameborder="0"
                  width="100%"
                  height="400"
                  :class="{ fullStyle: full }"
                ></iframe>
                <div
                  class="workd_media"
                  style="height: 400px"
                  v-else-if="pptImgUrl2.overData.tarData.showType == 3"
                >
                  <video-player
                    class="video-player vjs-custom-skin"
                    :playsinline="true"
                    :options="pptImgUrl2.overData.tarData.playerO"
                    @play="onPlayerPlay($event)"
                    style="width: 70%; height: 400px; margin: 0 auto"
                  ></video-player>
                </div>
                <div
                  class="leftImg"
                  style="height: 400px"
                  v-else-if="pptImgUrl2.overData.tarData.showType == 4"
                >
                  <img :src="pptImgUrl2.overData.tarData.url" alt="" />
                </div>
              </div>
              <div class="whiteRight">
                <div class="fileTop">
                  <div class="fileListImg">
                    <img
                      src="../../../../assets/icon/anliDetail/fileList.png"
                      alt=""
                    />
                  </div>
                  <div>佐证材料</div>
                </div>
                <div class="fileBox">
                  <div
                    class="fileList"
                    v-if="anliBox[0].overview.tarDesign.data.length"
                  >
                    <div
                      class="file"
                      v-for="(f, fIndex) in anliBox[0].overview.tarDesign.data"
                      :key="fIndex"
                    >
                      <div class="fileCss">
                        <div>
                          1.{{
                            f.type == 1 ? "文档" : f.type == 2 ? "视频" : "图片"
                          }}
                        </div>
                        <div>
                          <div @click="lookFile2(f.url, f.type, 2)">
                            {{ f.name }}
                          </div>
                          <!-- <div class="downFile" @click="downloadFile(f.url)">
                          <img
                            src="../../../../assets/icon/anliDetail/down.png"
                            alt=""
                          />
                        </div> -->
                        </div>
                      </div>
                    </div>
                  </div>
                  <div class="noFile" v-else>
                    <img
                      src="../../../../assets/icon/anliDetail/noFile.jpg"
                      alt=""
                    />
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div
            class="proOverCss"
            v-if="
              anliBox[0].overview.actiDesign.brief != '' ||
              anliBox[0].overview.actiDesign.imgBox.length > 0 ||
              anliBox[0].overview.actiDesign.data.length
            "
          >
            <div class="whiteBg whiteLeft">
              <div class="navBgTop">
                <div class="navBg">评价设计</div>
                <el-button
                  v-if="anliBox[0].overview.actiDesign.brief != ''"
                  @click="selectNav(anliBox[0].overview.actiDesign.brief)"
                  >查看更多</el-button
                >
              </div>
              <div
                v-if="
                  anliBox[0].overview.actiDesign.brief != '' ||
                  anliBox[0].overview.actiDesign.imgBox.length > 0
                "
                class="imgAndNav"
              >
                <div
                  class="leftBox"
                  v-if="
                    anliBox[0].overview.actiDesign.imgBox.length > 0 &&
                    anliBox[0].overview.actiDesign.imgBox[0].type == 3
                  "
                >
                  <div
                    class="leftImg"
                    @click="
                      lookFile1(
                        anliBox[0].overview.actiDesign.imgBox[0].url,
                        anliBox[0].overview.actiDesign.imgBox[0].type
                      )
                    "
                    v-if="anliBox[0].overview.actiDesign.imgBox[0].type == 3"
                  >
                    <img
                      :src="anliBox[0].overview.actiDesign.imgBox[0].url"
                      alt=""
                    />
                  </div>
                </div>

                <div
                  :class="
                    anliBox[0].overview.actiDesign.imgBox.length > 0
                      ? 'proOverNav'
                      : 'noImg'
                  "
                  v-html="
                    anliBox[0].overview.actiDesign
                      ? anliBox[0].overview.actiDesign.brief
                      : ''
                  "
                ></div>
              </div>
              <div class="noFile" v-else>
                <img
                  src="../../../../assets/icon/anliDetail/noFile.jpg"
                  alt=""
                />
              </div>
            </div>
            <div
              class="fileLook"
              v-if="
                pptImgUrl2.overData.actData != undefined &&
                Object.keys(pptImgUrl2.overData.actData).length
              "
            >
              <div class="look_file">
                <pdf
                  v-if="pptImgUrl2.overData.actData.showType == 1"
                  :pdfUrl="pptImgUrl2.overData.actData.url"
                  style="width: 100%; height: 400px; overflow: auto"
                  :class="{ fullStyle: full }"
                ></pdf>
                <iframe
                  v-else-if="pptImgUrl2.overData.actData.showType == 2"
                  :src="pptImgUrl2.overData.actData.url"
                  frameborder="0"
                  width="100%"
                  height="400"
                  :class="{ fullStyle: full }"
                ></iframe>
                <div
                  class="workd_media"
                  style="height: 400px"
                  v-else-if="pptImgUrl2.overData.actData.showType == 3"
                >
                  <video-player
                    class="video-player vjs-custom-skin"
                    :playsinline="true"
                    :options="pptImgUrl2.overData.actData.playerO"
                    @play="onPlayerPlay($event)"
                    style="width: 70%; height: 400px; margin: 0 auto"
                  ></video-player>
                </div>
                <div
                  class="leftImg"
                  style="height: 400px"
                  v-else-if="pptImgUrl2.overData.actData.showType == 4"
                >
                  <img :src="pptImgUrl2.overData.actData.url" alt="" />
                </div>
              </div>
              <div class="whiteRight">
                <div class="fileTop">
                  <div class="fileListImg">
                    <img
                      src="../../../../assets/icon/anliDetail/fileList.png"
                      alt=""
                    />
                  </div>
                  <div>佐证材料</div>
                </div>
                <div class="fileBox">
                  <div
                    class="fileList"
                    v-if="anliBox[0].overview.actiDesign.data.length"
                  >
                    <div
                      class="file"
                      v-for="(f, fIndex) in anliBox[0].overview.actiDesign.data"
                      :key="fIndex"
                    >
                      <div class="fileCss">
                        <div>
                          1.{{
                            f.type == 1 ? "文档" : f.type == 2 ? "视频" : "图片"
                          }}
                        </div>
                        <div>
                          <div @click="lookFile2(f.url, f.type, 3)">
                            {{ f.name }}
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                  <div class="noFile" v-else>
                    <img
                      src="../../../../assets/icon/anliDetail/noFile.jpg"
                      alt=""
                    />
                  </div>
                </div>
              </div>
            </div>
          </div>

          <div
            class="jdTopBox"
            v-if="anliBox[0].process.stageBox[0].staTitle != ''"
            id="third"
          >
            <div class="jdTopNav" style="font-size: 18px">
              <div class="jdLeftNav">
                <div class="jdImg">
                  <img
                    src="../../../../assets/icon/anliDetail/jdTitle.png"
                    alt=""
                  />
                </div>
                <div class="jdLeftTitle">
                  <div>项目安排</div>
                </div>
              </div>
            </div>
          </div>
          <div
            v-for="(jd, jdIndex) in anliBox[0].process.stageBox"
            :key="jdIndex"
            style="margin-top: 20px"
          >
            <div class="jdTopBox" v-if="jd.staTitle != ''">
              <div class="jdTopNav">
                <div class="jdLeftNav">
                  <div
                    class="jdImg"
                    style="width: 25px; height: 25px; padding-left: 3px"
                  >
                    <img
                      src="../../../../assets/icon/anliDetail/jdNewTitle.png"
                      alt=""
                    />
                  </div>
                  <div class="jdLeftTitle">
                    <div>阶段{{ jdIndex + 1 }}</div>
                    <div>{{ jd.staTitle }}</div>
                  </div>
                </div>
                <div class="jdRightNav" v-if="jd.allTime">
                  {{ jd.allTime }}课时
                </div>
                <div class="funBlock" style="padding: 0; bottom: 2px">
                  <div
                    class="fold"
                    @click="fold1(jdIndex, $event, 1)"
                    v-if="jd.isFold == 0"
                  >
                    <div>折叠</div>
                  </div>
                  <div
                    class="fold"
                    @click="fold1(jdIndex, $event, 0)"
                    v-if="jd.isFold == 1"
                  >
                    <div>展开</div>
                  </div>
                </div>
              </div>
            </div>
            <div
              v-for="(hd, hdIndex) in jd.actBox"
              :key="hdIndex"
              style="margin-top: 20px"
            >
              <div
                class="jdTopBox"
                style="padding: 10px 20px"
                v-if="hd.actName != ''"
              >
                <div class="jdTopNav">
                  <div class="jdLeftNav">
                    <div class="jdImg">
                      <img
                        src="../../../../assets/icon/anliDetail/rwTitle.png"
                        alt=""
                      />
                    </div>
                    <div class="jdLeftTitle">
                      <div>任务{{ hdIndex + 1 }}</div>
                      <div>{{ hd.actName }}</div>
                    </div>
                  </div>
                  <div class="jdRightNav" v-if="hd.actTime">
                    {{ hd.actTime }}课时
                  </div>
                  <div class="funBlock" style="padding: 0">
                    <div
                      class="fold"
                      @click="fold(hdIndex, jdIndex, $event, 1)"
                      v-if="hd.isFold == 0"
                    >
                      <div>折叠</div>
                    </div>
                    <div
                      class="fold"
                      @click="fold(hdIndex, jdIndex, $event, 0)"
                      v-if="hd.isFold == 1"
                    >
                      <div>展开</div>
                    </div>
                  </div>
                </div>
              </div>
              <div
                class="proOverCss"
                v-if="
                  (hd.driQuestion.imgBox.length > 0 &&
                    hd.driQuestion.imgBox[0].type == 3) ||
                  hd.driQuestion.data.length
                "
              >
                <div class="whiteBg whiteLeft">
                  <div class="navBgTop">
                    <div class="jdNavBg">活动目标</div>
                    <el-button
                      v-if="hd.driQuestion.brief != ''"
                      @click="selectNav(hd.driQuestion.brief)"
                      >查看更多</el-button
                    >
                  </div>
                  <div
                    v-if="
                      hd.driQuestion.brief != '' ||
                      hd.driQuestion.imgBox.length > 0
                    "
                    class="imgAndNav"
                  >
                    <div
                      class="leftBox"
                      style="padding: 10px 0 0 35px"
                      v-if="
                        hd.driQuestion.imgBox.length > 0 &&
                        hd.driQuestion.imgBox[0].type == 3
                      "
                    >
                      <div
                        class="leftImg"
                        @click="
                          lookFile1(
                            hd.driQuestion.imgBox[0].url,
                            hd.driQuestion.imgBox[0].type
                          )
                        "
                        v-if="hd.driQuestion.imgBox[0].type == 3"
                      >
                        <img :src="hd.driQuestion.imgBox[0].url" alt="" />
                      </div>
                    </div>

                    <div
                      :class="
                        hd.driQuestion.imgBox.length > 0
                          ? 'proOverNav'
                          : 'noImg'
                      "
                      v-html="hd.driQuestion ? hd.driQuestion.brief : ''"
                      style="margin: 10px 0 0 20px"
                    ></div>
                  </div>
                  <div class="noFile" v-else>
                    <img
                      src="../../../../assets/icon/anliDetail/noFile.jpg"
                      alt=""
                    />
                  </div>
                </div>
              </div>

              <div
                class="proOverCss"
                v-if="
                  hd.tarDesign.brief != '' ||
                  hd.tarDesign.imgBox.length > 0 ||
                  hd.tarDesign.data.length
                "
              >
                <div class="whiteBg whiteLeft">
                  <div class="navBgTop">
                    <div class="jdNavBg">活动内容</div>
                    <el-button
                      v-if="hd.tarDesign.brief != ''"
                      @click="selectNav(hd.tarDesign.brief)"
                      >查看更多</el-button
                    >
                  </div>
                  <div
                    v-if="
                      hd.tarDesign.brief != '' || hd.tarDesign.imgBox.length > 0
                    "
                    class="imgAndNav"
                  >
                    <div
                      class="leftBox"
                      style="padding: 10px 0 0 35px"
                      v-if="
                        hd.tarDesign.imgBox.length > 0 &&
                        hd.tarDesign.imgBox[0].type == 3
                      "
                    >
                      <div
                        class="leftImg"
                        @click="
                          lookFile1(
                            hd.tarDesign.imgBox[0].url,
                            hd.tarDesign.imgBox[0].type
                          )
                        "
                        v-if="hd.tarDesign.imgBox[0].type == 3"
                      >
                        <img :src="hd.tarDesign.imgBox[0].url" alt="" />
                      </div>
                    </div>

                    <div
                      :class="
                        hd.tarDesign.imgBox.length > 0 ? 'proOverNav' : 'noImg'
                      "
                      v-html="hd.tarDesign ? hd.tarDesign.brief : ''"
                      style="margin: 10px 0 0 20px"
                    ></div>
                  </div>
                  <div class="noFile" v-else>
                    <img
                      src="../../../../assets/icon/anliDetail/noFile.jpg"
                      alt=""
                    />
                  </div>
                </div>
              </div>

              <div
                class="proOverCss"
                v-if="
                  hd.actiDesign.brief != '' ||
                  hd.actiDesign.imgBox.length > 0 ||
                  hd.actiDesign.data.length
                "
              >
                <div class="whiteBg whiteLeft">
                  <div class="navBgTop">
                    <div class="jdNavBg">预期成果</div>
                    <el-button
                      v-if="hd.actiDesign.brief != ''"
                      @click="selectNav(hd.actiDesign.brief)"
                      >查看更多</el-button
                    >
                  </div>
                  <div
                    v-if="
                      hd.actiDesign.brief != '' ||
                      hd.actiDesign.imgBox.length > 0
                    "
                    class="imgAndNav"
                  >
                    <div
                      class="leftBox"
                      style="padding: 10px 0 0 35px"
                      v-if="
                        hd.actiDesign.imgBox.length > 0 &&
                        hd.actiDesign.imgBox[0].type == 3
                      "
                    >
                      <div
                        class="leftImg"
                        @click="
                          lookFile1(
                            hd.actiDesign.imgBox[0].url,
                            hd.actiDesign.imgBox[0].type
                          )
                        "
                        v-if="hd.actiDesign.imgBox[0].type == 3"
                      >
                        <img :src="hd.actiDesign.imgBox[0].url" alt="" />
                      </div>
                    </div>

                    <div
                      :class="
                        hd.actiDesign.imgBox.length > 0 ? 'proOverNav' : 'noImg'
                      "
                      v-html="hd.actiDesign ? hd.actiDesign.brief : ''"
                      style="margin: 10px 0 0 20px"
                    ></div>
                  </div>
                  <div class="noFile" v-else>
                    <img
                      src="../../../../assets/icon/anliDetail/noFile.jpg"
                      alt=""
                    />
                  </div>
                </div>
              </div>

              <div
                class="proOverCss"
                v-if="
                  hd.evaDesign.brief != '' ||
                  hd.evaDesign.imgBox.length > 0 ||
                  hd.evaDesign.data.length
                "
              >
                <div class="whiteBg whiteLeft">
                  <div class="navBgTop">
                    <div class="jdNavBg">活动评价</div>
                    <el-button
                      v-if="hd.evaDesign.brief != ''"
                      @click="selectNav(hd.evaDesign.brief)"
                      >查看更多</el-button
                    >
                  </div>
                  <div
                    v-if="
                      hd.evaDesign.brief != '' || hd.evaDesign.imgBox.length > 0
                    "
                    class="imgAndNav"
                  >
                    <div
                      class="leftBox"
                      style="padding: 10px 0 0 35px"
                      v-if="
                        hd.evaDesign.imgBox.length > 0 &&
                        hd.evaDesign.imgBox[0].type == 3
                      "
                    >
                      <div
                        class="leftImg"
                        @click="
                          lookFile1(
                            hd.evaDesign.imgBox[0].url,
                            hd.evaDesign.imgBox[0].type
                          )
                        "
                        v-if="hd.evaDesign.imgBox[0].type == 3"
                      >
                        <img :src="hd.evaDesign.imgBox[0].url" alt="" />
                      </div>
                    </div>

                    <div
                      :class="
                        hd.evaDesign.imgBox.length > 0 ? 'proOverNav' : 'noImg'
                      "
                      v-html="hd.evaDesign ? hd.evaDesign.brief : ''"
                      style="margin: 10px 0 0 20px"
                    ></div>
                  </div>
                  <div class="noFile" v-else>
                    <img
                      src="../../../../assets/icon/anliDetail/noFile.jpg"
                      alt=""
                    />
                  </div>
                </div>
              </div>
            </div>
          </div>

          <div
            class="jdTopBox"
            id="fouth"
            v-if="anliBox[0].process.stageBox[0].brief != ''"
          >
            <div class="jdTopNav" style="font-size: 18px">
              <div class="jdLeftNav">
                <div class="jdImg">
                  <img
                    src="../../../../assets/icon/anliDetail/jdTitle.png"
                    alt=""
                  />
                </div>
                <div class="jdLeftTitle">
                  <div>项目活动过程</div>
                </div>
              </div>
            </div>
          </div>
          <div
            v-for="(jd, jdIndex) in anliBox[0].process.stageBox"
            :key="jdIndex"
          >
            <div
              class="proOverCss"
              v-if="jd.brief != '' || jd.imgBox.length > 0 || jd.data.length"
            >
              <div class="whiteBg whiteLeft">
                <div class="navBgTop">
                  <div class="navBg">阶段{{ jdIndex + 1 }}</div>
                  <el-button v-if="jd.brief != ''" @click="selectNav(jd.brief)"
                    >查看更多</el-button
                  >
                </div>
                <div
                  v-if="jd.brief != '' || jd.imgBox.length > 0"
                  class="imgAndNav"
                >
                  <div
                    class="leftBox"
                    v-if="jd.imgBox.length > 0 && jd.imgBox[0].type == 3"
                  >
                    <div
                      class="leftImg"
                      @click="lookFile1(jd.imgBox[0].url, jd.imgBox[0].type)"
                      v-if="jd.imgBox[0].type == 3"
                    >
                      <img :src="jd.imgBox[0].url" alt="" />
                    </div>
                  </div>

                  <div
                    :class="jd.imgBox.length > 0 ? 'proOverNav' : 'noImg'"
                    v-html="jd ? jd.brief : ''"
                  ></div>
                </div>
                <div class="noFile" v-else>
                  <img
                    src="../../../../assets/icon/anliDetail/noFile.jpg"
                    alt=""
                  />
                </div>
              </div>
              <div class="fileLook" v-if="pptImgUrl2.proData[jdIndex]">
                <div class="look_file">
                  <pdf
                    v-if="pptImgUrl2.proData[jdIndex].showType == 1"
                    :pdfUrl="pptImgUrl2.proData[jdIndex].url"
                    style="width: 100%; height: 400px; overflow: auto"
                    :class="{ fullStyle: full }"
                  ></pdf>
                  <iframe
                    v-else-if="pptImgUrl2.proData[jdIndex].showType == 2"
                    :src="pptImgUrl2.proData[jdIndex].url"
                    frameborder="0"
                    width="100%"
                    height="400"
                    :class="{ fullStyle: full }"
                  ></iframe>
                  <div
                    class="workd_media"
                    style="height: 400px"
                    v-else-if="pptImgUrl2.proData[jdIndex].showType == 3"
                  >
                    <video-player
                      class="video-player vjs-custom-skin"
                      :playsinline="true"
                      :options="pptImgUrl2.proData[jdIndex].playerO"
                      @play="onPlayerPlay($event)"
                      style="width: 70%; height: 400px; margin: 0 auto"
                    ></video-player>
                  </div>
                  <div
                    class="leftImg"
                    style="height: 400px"
                    v-else-if="pptImgUrl2.proData[jdIndex].showType == 4"
                  >
                    <img :src="pptImgUrl2.proData[jdIndex].url" alt="" />
                  </div>
                </div>
                <div class="whiteRight">
                  <div class="fileTop">
                    <div class="fileListImg">
                      <img
                        src="../../../../assets/icon/anliDetail/fileList.png"
                        alt=""
                      />
                    </div>
                    <div>佐证材料</div>
                  </div>
                  <div class="fileBox">
                    <div class="fileList" v-if="jd.data.length">
                      <div
                        class="file"
                        v-for="(f, fIndex) in jd.data"
                        :key="fIndex"
                      >
                        <div class="fileCss">
                          <div>
                            1.{{
                              f.type == 1
                                ? "文档"
                                : f.type == 2
                                ? "视频"
                                : "图片"
                            }}
                          </div>
                          <div>
                            <div @click="lookFile2(f.url, f.type, 4, jdIndex)">
                              {{ f.name }}
                            </div>
                            <!-- <div class="downFile" @click="downloadFile(f.url)">
                            <img
                              src="../../../../assets/icon/anliDetail/down.png"
                              alt=""
                            />
                          </div> -->
                          </div>
                        </div>
                      </div>
                    </div>
                    <div class="noFile" v-else>
                      <img
                        src="../../../../assets/icon/anliDetail/noFile.jpg"
                        alt=""
                      />
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>

          <div
            class="jdTopBox"
            id="fivth"
            v-if="
              anliBox[0].proexc.brief != '' ||
              anliBox[0].proexc.imgBox.length > 0 ||
              anliBox[0].proexc.data.length
            "
          >
            <div class="jdTopNav" style="font-size: 18px">
              <div class="jdLeftNav">
                <div class="jdImg">
                  <img
                    src="../../../../assets/icon/anliDetail/jdTitle.png"
                    alt=""
                  />
                </div>
                <div class="jdLeftTitle">
                  <div>项目成果交流与评价</div>
                </div>
              </div>
            </div>
          </div>
          <div
            class="proOverCss"
            v-if="
              anliBox[0].proexc.brief != '' ||
              anliBox[0].proexc.imgBox.length > 0 ||
              anliBox[0].proexc.data.length
            "
          >
            <div class="whiteBg whiteLeft">
              <div class="navBgTop">
                <div class="navBg">活动成效</div>
                <el-button
                  v-if="anliBox[0].proexc.brief != ''"
                  @click="selectNav(anliBox[0].proexc.brief)"
                  >查看更多</el-button
                >
              </div>
              <div
                v-if="
                  anliBox[0].proexc.brief != '' ||
                  anliBox[0].proexc.imgBox.length > 0
                "
                class="imgAndNav"
              >
                <div
                  class="leftBox"
                  v-if="
                    anliBox[0].proexc.imgBox.length > 0 &&
                    anliBox[0].proexc.imgBox[0].type == 3
                  "
                >
                  <div
                    class="leftImg"
                    @click="
                      lookFile1(
                        anliBox[0].proexc.imgBox[0].url,
                        anliBox[0].proexc.imgBox[0].type
                      )
                    "
                    v-if="anliBox[0].proexc.imgBox[0].type == 3"
                  >
                    <img :src="anliBox[0].proexc.imgBox[0].url" alt="" />
                  </div>
                </div>

                <div
                  :class="
                    anliBox[0].proexc.imgBox.length > 0 ? 'proOverNav' : 'noImg'
                  "
                  v-html="anliBox[0].proexc ? anliBox[0].proexc.brief : ''"
                ></div>
              </div>
              <div class="noFile" v-else>
                <img
                  src="../../../../assets/icon/anliDetail/noFile.jpg"
                  alt=""
                />
              </div>
            </div>
            <div
              class="fileLook"
              v-if="
                pptImgUrl2.excData != undefined &&
                Object.keys(pptImgUrl2.excData).length
              "
            >
              <div class="look_file">
                <pdf
                  v-if="pptImgUrl2.excData.showType == 1"
                  :pdfUrl="pptImgUrl2.excData.url"
                  style="width: 100%; height: 400px; overflow: auto"
                  :class="{ fullStyle: full }"
                ></pdf>
                <iframe
                  v-else-if="pptImgUrl2.excData.showType == 2"
                  :src="pptImgUrl2.excData.url"
                  frameborder="0"
                  width="100%"
                  height="400"
                  :class="{ fullStyle: full }"
                ></iframe>
                <div
                  class="workd_media"
                  style="height: 400px"
                  v-else-if="pptImgUrl2.excData.showType == 3"
                >
                  <video-player
                    class="video-player vjs-custom-skin"
                    :playsinline="true"
                    :options="pptImgUrl2.excData.playerO"
                    @play="onPlayerPlay($event)"
                    style="width: 70%; height: 400px; margin: 0 auto"
                  ></video-player>
                </div>
                <div
                  class="leftImg"
                  style="height: 400px"
                  v-else-if="pptImgUrl2.excData.showType == 4"
                >
                  <img :src="pptImgUrl2.excData.url" alt="" />
                </div>
              </div>
              <div class="whiteRight">
                <div class="fileTop">
                  <div class="fileListImg">
                    <img
                      src="../../../../assets/icon/anliDetail/fileList.png"
                      alt=""
                    />
                  </div>
                  <div>佐证材料</div>
                </div>
                <div class="fileBox">
                  <div class="fileList" v-if="anliBox[0].proexc.data.length">
                    <div
                      class="file"
                      v-for="(f, fIndex) in anliBox[0].proexc.data"
                      :key="fIndex"
                    >
                      <div class="fileCss">
                        <div>
                          1.{{
                            f.type == 1 ? "文档" : f.type == 2 ? "视频" : "图片"
                          }}
                        </div>
                        <div>
                          <div @click="lookFile2(f.url, f.type, 5)">
                            {{ f.name }}
                          </div>
                          <!-- <div class="downFile" @click="downloadFile(f.url)">
                          <img
                            src="../../../../assets/icon/anliDetail/down.png"
                            alt=""
                          />
                        </div> -->
                        </div>
                      </div>
                    </div>
                  </div>
                  <div class="noFile" v-else>
                    <img
                      src="../../../../assets/icon/anliDetail/noFile.jpg"
                      alt=""
                    />
                  </div>
                </div>
              </div>
            </div>
          </div>

          <div
            class="jdTopBox"
            id="sixth"
            v-if="
              anliBox[0].results.brief != '' ||
              anliBox[0].results.imgBox.length > 0 ||
              anliBox[0].results.data.length
            "
          >
            <div class="jdTopNav" style="font-size: 18px">
              <div class="jdLeftNav">
                <div class="jdImg">
                  <img
                    src="../../../../assets/icon/anliDetail/jdTitle.png"
                    alt=""
                  />
                </div>
                <div class="jdLeftTitle">
                  <div>项目成效与反思</div>
                </div>
              </div>
            </div>
          </div>
          <div
            class="proOverCss"
            v-if="
              anliBox[0].results.brief != '' ||
              anliBox[0].results.imgBox.length > 0 ||
              anliBox[0].results.data.length
            "
          >
            <div class="whiteBg whiteLeft">
              <div class="navBgTop">
                <div class="navBg">活动反思</div>
                <el-button
                  v-if="anliBox[0].results.brief != ''"
                  @click="selectNav(anliBox[0].results.brief)"
                  >查看更多</el-button
                >
              </div>
              <div
                v-if="
                  anliBox[0].results.brief != '' ||
                  anliBox[0].results.imgBox.length > 0
                "
                class="imgAndNav"
              >
                <div
                  class="leftBox"
                  v-if="
                    anliBox[0].results.imgBox.length > 0 &&
                    anliBox[0].results.imgBox[0].type == 3
                  "
                >
                  <div
                    class="leftImg"
                    @click="
                      lookFile1(
                        anliBox[0].results.imgBox[0].url,
                        anliBox[0].results.imgBox[0].type
                      )
                    "
                    v-if="anliBox[0].results.imgBox[0].type == 3"
                  >
                    <img :src="anliBox[0].results.imgBox[0].url" alt="" />
                  </div>
                </div>

                <div
                  :class="
                    anliBox[0].results.imgBox.length > 0
                      ? 'proOverNav'
                      : 'noImg'
                  "
                  v-html="anliBox[0].results ? anliBox[0].results.brief : ''"
                ></div>
              </div>
              <div class="noFile" v-else>
                <img
                  src="../../../../assets/icon/anliDetail/noFile.jpg"
                  alt=""
                />
              </div>
            </div>
            <div
              class="fileLook"
              v-if="
                pptImgUrl2.effData != undefined &&
                Object.keys(pptImgUrl2.effData).length
              "
            >
              <div class="look_file">
                <pdf
                  v-if="pptImgUrl2.effData.showType == 1"
                  :pdfUrl="pptImgUrl2.effData.url"
                  style="width: 100%; height: 400px; overflow: auto"
                  :class="{ fullStyle: full }"
                ></pdf>
                <iframe
                  v-else-if="pptImgUrl2.effData.showType == 2"
                  :src="pptImgUrl2.effData.url"
                  frameborder="0"
                  width="100%"
                  height="400"
                  :class="{ fullStyle: full }"
                ></iframe>
                <div
                  class="workd_media"
                  style="height: 400px"
                  v-else-if="pptImgUrl2.effData.showType == 3"
                >
                  <video-player
                    class="video-player vjs-custom-skin"
                    :playsinline="true"
                    :options="pptImgUrl2.effData.playerO"
                    @play="onPlayerPlay($event)"
                    style="width: 70%; height: 400px; margin: 0 auto"
                  ></video-player>
                </div>
                <div
                  class="leftImg"
                  style="height: 400px"
                  v-else-if="pptImgUrl2.effData.showType == 4"
                >
                  <img :src="pptImgUrl2.effData.url" alt="" />
                </div>
              </div>
              <div class="whiteRight">
                <div class="fileTop">
                  <div class="fileListImg">
                    <img
                      src="../../../../assets/icon/anliDetail/fileList.png"
                      alt=""
                    />
                  </div>
                  <div>佐证材料</div>
                </div>
                <div class="fileBox">
                  <div class="fileList" v-if="anliBox[0].results.data.length">
                    <div
                      class="file"
                      v-for="(f, fIndex) in anliBox[0].results.data"
                      :key="fIndex"
                    >
                      <div class="fileCss">
                        <div>
                          1.{{
                            f.type == 1 ? "文档" : f.type == 2 ? "视频" : "图片"
                          }}
                        </div>
                        <div>
                          <div @click="lookFile2(f.url, f.type, 6)">
                            {{ f.name }}
                          </div>
                          <!-- <div class="downFile" @click="downloadFile(f.url)">
                          <img
                            src="../../../../assets/icon/anliDetail/down.png"
                            alt=""
                          />
                        </div> -->
                        </div>
                      </div>
                    </div>
                  </div>
                  <div class="noFile" v-else>
                    <img
                      src="../../../../assets/icon/anliDetail/noFile.jpg"
                      alt=""
                    />
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- <div class="fixBottom">
        <div class="returnAnLi" style="width: 100px" @click="goToX()">
          前往评分
        </div>
        <div class="returnAnLi" @click="returnWhere">返回</div>
      </div> -->
    </div>
    <el-dialog
      title="查看详情"
      :visible.sync="dialogVisibleBrief"
      :append-to-body="true"
      width="1000px"
      height="80%"
      :before-close="handleClose"
      class="add_student"
    >
      <div class="detailTable" v-html="briefNav"></div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisibleBrief = false">关 闭</el-button>
      </span>
    </el-dialog>
    <el-dialog
      title="文件预览"
      :visible.sync="dialogVisible"
      width="50%"
      :before-close="handleClose"
      class="dialog_diy"
      :class="{ fullStyle: full }"
    >
      <div slot="title" class="header-title">
        <div style="color: #fff">文件预览</div>
        <div style="position: absolute; top: 19px; right: 50px">
          <img
            src="../../../../assets/full.png"
            style="height: 16px; cursor: pointer"
            alt=""
            @click="fullTools"
          />
        </div>
      </div>
      <pdf
        v-if="showPDF"
        :pdfUrl="pptImgUrl"
        style="width: 100%; height: 520px; overflow: auto"
        :class="{ fullStyle: full }"
      ></pdf>
      <iframe
        v-else
        :src="pptImgUrl"
        frameborder="0"
        width="100%"
        height="600"
        :class="{ fullStyle: full }"
      ></iframe>
    </el-dialog>
    <el-dialog
      title="查看视频"
      :visible.sync="videoVisible"
      :append-to-body="true"
      width="1000px"
      :before-close="handleClose"
      class="dialog_diy1"
    >
      <div class="workd_media" style="height: 100%" v-if="videoDetail.sources">
        <video-player
          class="video-player vjs-custom-skin"
          :playsinline="true"
          :options="videoDetail"
          @play="onPlayerPlay($event)"
          style="width: 100%; height: 100%"
        ></video-player>
      </div>
      <div slot="footer">
        <el-button
          style="background: #409efe; color: #fff"
          @click="(videoVisible = false), (videoDetail.sources[0].src = '')"
        >
          关 闭</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>

<script>
import pdf from "../../components/vpdf";
export default {
  components: {
    pdf,
  },
  data() {
    return {
      dialogVisibleBrief: false,
      dialogVisible: false,
      showPDF: false,
      showPDF1: false,
      videoVisible: false,
      full: false,
      briefNav: "",
      pptImgUrl: "",
      pptImgUrl1: {
        infoData: [],
        overData: {
          driData: [],
          tarData: [],
          actData: [],
        },
        proData: [],
        excData: [],
        effData: [],
      },
      pptImgUrl2: {
        infoData: {},
        overData: {
          driData: {},
          tarData: {},
          actData: {},
        },
        proData: {},
        excData: {},
        effData: {},
      },
      fileImg: "",
      userid: this.$store.state.userInfo.userid,
      oid: this.$store.state.userInfo.school,
      aid: this.$route.query.aid,
      anliBox: [],
      imgAnliBox: [],
      noBanner: require("../../../../assets/noBanner.jpg"),
      videoDetail: {},
      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: {},
      isNavTop: 0,
    };
  },
  methods: {
    handleClose(done) {
      done();
    },
    goTo(path) {
      this.$router.push(path);
    },
    goToX() {
      this.$message("暂未开放");
      return;
    },
    previewImg(url) {
      this.$hevueImgPreview(url);
    },
    fullTools() {
      this.full = !this.full;
    },
    // returnWhere() {
    //   if (this.type == 0) {
    //     this.goTo("/eventCenter?steps=" + "2");
    //   } else {
    //     this.goTo("/anliList");
    //   }
    // },
    selectAnLi() {
      let params = {
        id: this.aid,
      };
      this.ajax
        .get(this.$store.state.api + "selectRaceDetail", params)
        .then((res) => {
          this.anliBox = res.data[0];
          this.anliBox[0].info = JSON.parse(this.anliBox[0].info);
          this.anliBox[0].overview = JSON.parse(this.anliBox[0].overview);
          this.anliBox[0].process = JSON.parse(this.anliBox[0].process);
          this.anliBox[0].proact = JSON.parse(this.anliBox[0].proact);
          this.anliBox[0].proexc = JSON.parse(this.anliBox[0].proexc);
          this.anliBox[0].results = JSON.parse(this.anliBox[0].results);
          var a = this.anliBox[0].info;
          var b = this.anliBox[0].overview;
          var c = this.anliBox[0].process;
          var d = this.anliBox[0].proact;
          var e = this.anliBox[0].proexc;
          var f = this.anliBox[0].results;
          a.imgBox = [];
          b.driQuestion.imgBox = [];
          b.tarDesign.imgBox = [];
          b.actiDesign.imgBox = [];
          e.imgBox = [];
          f.imgBox = [];
          for (var i = 0; i < a.data.length; i++) {
            if (a.data[i].type == 3) {
              a.imgBox.push({
                url: a.data[i].url,
                type: a.data[i].type,
              });
            }
            this.pptImgUrl1.infoData.push({
              url: a.data[i].url,
              type: a.data[i].type,
            });
          }
          for (var i = 0; i < b.driQuestion.data.length; i++) {
            if (b.driQuestion.data[i].type == 3) {
              b.driQuestion.imgBox.push({
                url: b.driQuestion.data[i].url,
                type: b.driQuestion.data[i].type,
              });
            }
            this.pptImgUrl1.overData.driData.push({
              url: b.driQuestion.data[i].url,
              type: b.driQuestion.data[i].type,
            });
          }
          for (var i = 0; i < b.tarDesign.data.length; i++) {
            if (b.tarDesign.data[i].type == 3) {
              b.tarDesign.imgBox.push({
                url: b.tarDesign.data[i].url,
                type: b.tarDesign.data[i].type,
              });
            }
            this.pptImgUrl1.overData.tarData.push({
              url: b.tarDesign.data[i].url,
              type: b.tarDesign.data[i].type,
            });
          }
          for (var i = 0; i < b.actiDesign.data.length; i++) {
            if (b.actiDesign.data[i].type == 3) {
              b.actiDesign.imgBox.push({
                url: b.actiDesign.data[i].url,
                type: b.actiDesign.data[i].type,
              });
            }
            this.pptImgUrl1.overData.actData.push({
              url: b.actiDesign.data[i].url,
              type: b.actiDesign.data[i].type,
            });
          }
          for (var i = 0; i < c.stageBox.length; i++) {
            c.stageBox[i].imgBox = [];
            this.pptImgUrl1.proData[i] = [];
            c.stageBox[i].isFold = "";
            c.stageBox[i].isFold = 0;
            for (var j = 0; j < c.stageBox[i].data.length; j++) {
              if (c.stageBox[i].data[j].type == 3) {
                c.stageBox[i].imgBox.push({
                  url: c.stageBox[i].data[j].url,
                  type: c.stageBox[i].data[j].type,
                });
              }
              this.pptImgUrl1.proData[i].push({
                url: c.stageBox[i].data[j].url,
                type: c.stageBox[i].data[j].type,
              });
            }
            for (var z = 0; z < c.stageBox[i].actBox.length; z++) {
              c.stageBox[i].actBox[z].driQuestion.imgBox = [];
              c.stageBox[i].actBox[z].tarDesign.imgBox = [];
              c.stageBox[i].actBox[z].actiDesign.imgBox = [];
              c.stageBox[i].actBox[z].evaDesign.imgBox = [];
              c.stageBox[i].actBox[z].isFold = "";
              c.stageBox[i].actBox[z].isFold = 0;
              for (
                var k = 0;
                k < c.stageBox[i].actBox[z].driQuestion.data.length;
                k++
              ) {
                if (c.stageBox[i].actBox[z].driQuestion.data[k].type == 3) {
                  c.stageBox[i].actBox[z].driQuestion.imgBox.push({
                    url: c.stageBox[i].actBox[z].driQuestion.data[k].url,
                    type: c.stageBox[i].actBox[z].driQuestion.data[k].type,
                  });
                }
              }
              for (
                var k = 0;
                k < c.stageBox[i].actBox[z].tarDesign.data.length;
                k++
              ) {
                if (c.stageBox[i].actBox[z].tarDesign.data[k].type == 3) {
                  c.stageBox[i].actBox[z].tarDesign.imgBox.push({
                    url: c.stageBox[i].actBox[z].tarDesign.data[k].url,
                    type: c.stageBox[i].actBox[z].tarDesign.data[k].type,
                  });
                }
              }
              for (
                var k = 0;
                k < c.stageBox[i].actBox[z].actiDesign.data.length;
                k++
              ) {
                if (c.stageBox[i].actBox[z].actiDesign.data[k].type == 3) {
                  c.stageBox[i].actBox[z].actiDesign.imgBox.push({
                    url: c.stageBox[i].actBox[z].actiDesign.data[k].url,
                    type: c.stageBox[i].actBox[z].actiDesign.data[k].type,
                  });
                }
              }
              for (
                var k = 0;
                k < c.stageBox[i].actBox[z].evaDesign.data.length;
                k++
              ) {
                if (c.stageBox[i].actBox[z].evaDesign.data[k].type == 3) {
                  c.stageBox[i].actBox[z].evaDesign.imgBox.push({
                    url: c.stageBox[i].actBox[z].evaDesign.data[k].url,
                    type: c.stageBox[i].actBox[z].evaDesign.data[k].type,
                  });
                }
              }
            }
          }
          for (var i = 0; i < e.data.length; i++) {
            if (e.data[i].type == 3) {
              e.imgBox.push({ url: e.data[i].url, type: e.data[i].type });
            }
            this.pptImgUrl1.excData.push({
              url: e.data[i].url,
              type: e.data[i].type,
            });
          }
          for (var i = 0; i < f.data.length; i++) {
            if (f.data[i].type == 3) {
              f.imgBox.push({ url: f.data[i].url, type: f.data[i].type });
            }
            this.pptImgUrl1.effData.push({
              url: f.data[i].url,
              type: f.data[i].type,
            });
          }
          this.lookFile();
        })
        .catch((err) => {
          console.error(err);
        });
    },
    selectNav(n) {
      this.dialogVisibleBrief = true;
      this.briefNav = n;
    },
    onPlayerPlay() {},
    lookFile1(u, t) {
      //1文档2视频3图片
      if (t == 1) {
        this.pptImgUrl = "";
        var a = ["PPT", "PPTX", "XLSX", "XLS", "DOC", "DOCX"];
        if (
          a.indexOf(
            u.split(".")[u.split(".").length - 1].toLocaleUpperCase()
          ) != -1
        ) {
          this.pptImgUrl =
            "https://view.officeapps.live.com/op/view.aspx?src=" + u;
          this.showPDF = false;
          this.dialogVisible = true;
        } else if (
          u.split(".")[u.split(".").length - 1].toLocaleUpperCase() == "PDF"
        ) {
          this.pptImgUrl = u;
          this.showPDF = true;
          this.dialogVisible = true;
        }
      } else if (t == 2) {
        this.videoDetail = {};
        this.playerOptions.sources[0].src = u;
        this.videoDetail = this.playerOptions;
        this.videoVisible = true;
      } else {
        this.previewImg(u);
      }
    },
    lookFile2(u, t, type, i) {
      var b = [
        "DOC",
        "DOCX",
        "DOCM",
        "DOTM",
        "DOTX",
        "PPTX",
        "PPSX",
        "PPT",
        "PPS",
        "PPTM",
        "POTM",
        "PPAM",
        "POTX",
        "PPSM",
      ];
      var c = [
        "BMP",
        "PJP",
        "APNG",
        "PNG",
        "JPG",
        "GIF",
        "SVG",
        "JPEG",
        "JPG",
        "ICO",
        "PGPEG",
        "AVIF",
      ];
      var d = JSON.parse(JSON.stringify(this.playerOptions));
      if (type == 0) {
        if (
          b.indexOf(
            u.split(".")[u.split(".").length - 1].toLocaleUpperCase()
          ) != -1
        ) {
          this.pptImgUrl2.infoData.url =
            "https://view.officeapps.live.com/op/view.aspx?src=" + u;
          this.pptImgUrl2.infoData.showType = 2;
        } else if (
          u.split(".")[u.split(".").length - 1].toLocaleUpperCase() == "PDF"
        ) {
          this.pptImgUrl2.infoData.url = u;
          this.pptImgUrl2.infoData.showType = 1;
        } else if (
          c.indexOf(
            u.split(".")[u.split(".").length - 1].toLocaleUpperCase()
          ) != -1
        ) {
          this.pptImgUrl2.infoData.url = u;
          this.pptImgUrl2.infoData.showType = 4;
        } else {
          // this.videoDetail = {};
          // this.playerOptions.sources[0].src = u;
          // this.videoDetail = this.playerOptions;
          this.pptImgUrl2.infoData.playerO = d;
          this.pptImgUrl2.infoData.playerO.sources[0].src = u;
          this.pptImgUrl2.infoData.showType = 3;
        }
      } else if (type == 1) {
        if (
          b.indexOf(
            u.split(".")[u.split(".").length - 1].toLocaleUpperCase()
          ) != -1
        ) {
          this.pptImgUrl2.overData.driData.url =
            "https://view.officeapps.live.com/op/view.aspx?src=" + u;
          this.pptImgUrl2.overData.driData.showType = 2;
        } else if (
          u.split(".")[u.split(".").length - 1].toLocaleUpperCase() == "PDF"
        ) {
          this.pptImgUrl2.overData.driData.url = u;
          this.pptImgUrl2.overData.driData.showType = 1;
        } else if (
          c.indexOf(
            u.split(".")[u.split(".").length - 1].toLocaleUpperCase()
          ) != -1
        ) {
          this.pptImgUrl2.overData.driData.url = u;
          this.pptImgUrl2.overData.driData.showType = 4;
        } else {
          this.pptImgUrl2.overData.driData.playerO = d;
          this.pptImgUrl2.overData.driData.playerO.sources[0].src = u;
          this.pptImgUrl2.overData.driData.showType = 3;
        }
      } else if (type == 2) {
        if (
          b.indexOf(
            u.split(".")[u.split(".").length - 1].toLocaleUpperCase()
          ) != -1
        ) {
          this.pptImgUrl2.overData.tarData.url =
            "https://view.officeapps.live.com/op/view.aspx?src=" + u;
          this.pptImgUrl2.overData.tarData.showType = 2;
        } else if (
          u.split(".")[u.split(".").length - 1].toLocaleUpperCase() == "PDF"
        ) {
          this.pptImgUrl2.overData.tarData.url = u;
          this.pptImgUrl2.overData.tarData.showType = 1;
        } else if (
          c.indexOf(
            u.split(".")[u.split(".").length - 1].toLocaleUpperCase()
          ) != -1
        ) {
          this.pptImgUrl2.overData.tarData.url = u;
          this.pptImgUrl2.overData.tarData.showType = 4;
        } else {
          this.pptImgUrl2.overData.tarData.playerO = d;
          this.pptImgUrl2.overData.tarData.playerO.sources[0].src = u;
          this.pptImgUrl2.overData.tarData.showType = 3;
        }
      } else if (type == 3) {
        if (
          b.indexOf(
            u.split(".")[u.split(".").length - 1].toLocaleUpperCase()
          ) != -1
        ) {
          this.pptImgUrl2.overData.actData.url =
            "https://view.officeapps.live.com/op/view.aspx?src=" + u;
          this.pptImgUrl2.overData.actData.showType = 2;
        } else if (
          u.split(".")[u.split(".").length - 1].toLocaleUpperCase() == "PDF"
        ) {
          this.pptImgUrl2.overData.actData.url = u;
          this.pptImgUrl2.overData.actData.showType = 1;
        } else if (
          c.indexOf(
            u.split(".")[u.split(".").length - 1].toLocaleUpperCase()
          ) != -1
        ) {
          this.pptImgUrl2.overData.actData.url = u;
          this.pptImgUrl2.overData.actData.showType = 4;
        } else {
          this.pptImgUrl2.overData.actData.playerO = d;
          this.pptImgUrl2.overData.actData.playerO.sources[0].src = u;
          this.pptImgUrl2.overData.actData.showType = 3;
        }
      } else if (type == 4) {
        if (
          b.indexOf(
            u.split(".")[u.split(".").length - 1].toLocaleUpperCase()
          ) != -1
        ) {
          this.pptImgUrl2.proData[i].url =
            "https://view.officeapps.live.com/op/view.aspx?src=" + u;
          this.pptImgUrl2.proData[i].showType = 2;
        } else if (
          u.split(".")[u.split(".").length - 1].toLocaleUpperCase() == "PDF"
        ) {
          this.pptImgUrl2.proData[i].url = u;
          this.pptImgUrl2.proData[i].showType = 1;
        } else if (
          c.indexOf(
            u.split(".")[u.split(".").length - 1].toLocaleUpperCase()
          ) != -1
        ) {
          this.pptImgUrl2.proData[i].url = u;
          this.pptImgUrl2.proData[i].showType = 4;
        } else {
          this.pptImgUrl2.proData[i].playerO = d;
          this.pptImgUrl2.proData[i].playerO.sources[0].src = u;
          this.pptImgUrl2.proData[i].showType = 3;
        }
      } else if (type == 5) {
        if (
          b.indexOf(
            u.split(".")[u.split(".").length - 1].toLocaleUpperCase()
          ) != -1
        ) {
          this.pptImgUrl2.excData.url =
            "https://view.officeapps.live.com/op/view.aspx?src=" + u;
          this.pptImgUrl2.excData.showType = 2;
        } else if (
          u.split(".")[u.split(".").length - 1].toLocaleUpperCase() == "PDF"
        ) {
          this.pptImgUrl2.excData.url = u;
          this.pptImgUrl2.excData.showType = 1;
        } else if (
          c.indexOf(
            u.split(".")[u.split(".").length - 1].toLocaleUpperCase()
          ) != -1
        ) {
          this.pptImgUrl2.excData.url = u;
          this.pptImgUrl2.excData.showType = 4;
        } else {
          this.pptImgUrl2.excData.playerO = d;
          this.pptImgUrl2.excData.playerO.sources[0].src = u;
          this.pptImgUrl2.excData.showType = 3;
        }
      } else if (type == 6) {
        if (
          b.indexOf(
            u.split(".")[u.split(".").length - 1].toLocaleUpperCase()
          ) != -1
        ) {
          this.pptImgUrl2.effData.url =
            "https://view.officeapps.live.com/op/view.aspx?src=" + u;
          this.pptImgUrl2.effData.showType = 2;
        } else if (
          u.split(".")[u.split(".").length - 1].toLocaleUpperCase() == "PDF"
        ) {
          this.pptImgUrl2.effData.url = u;
          this.pptImgUrl2.effData.showType = 1;
        } else if (
          c.indexOf(
            u.split(".")[u.split(".").length - 1].toLocaleUpperCase()
          ) != -1
        ) {
          this.pptImgUrl2.effData.url = u;
          this.pptImgUrl2.effData.showType = 4;
        } else {
          this.pptImgUrl2.effData.playerO = d;
          this.pptImgUrl2.effData.playerO.sources[0].src = u;
          this.pptImgUrl2.effData.showType = 3;
        }
      }
    },
    lookFile() {
      var a = this.pptImgUrl1;
      var b = [
        "DOC",
        "DOCX",
        "DOCM",
        "DOTM",
        "DOTX",
        "PPTX",
        "PPSX",
        "PPT",
        "PPS",
        "PPTM",
        "POTM",
        "PPAM",
        "POTX",
        "PPSM",
      ];
      var c = [
        "BMP",
        "PJP",
        "APNG",
        "PNG",
        "JPG",
        "GIF",
        "SVG",
        "JPEG",
        "JPG",
        "ICO",
        "PGPEG",
        "AVIF",
      ];
      var d = JSON.parse(JSON.stringify(this.playerOptions));
      this.pptImgUrl2.infoData = a.infoData ? a.infoData[0] : {};
      if (a.infoData.length > 0) {
        if (
          b.indexOf(
            this.pptImgUrl2.infoData.url
              .split(".")
              [
                this.pptImgUrl2.infoData.url.split(".").length - 1
              ].toLocaleUpperCase()
          ) != -1
        ) {
          this.pptImgUrl2.infoData.url =
            "https://view.officeapps.live.com/op/view.aspx?src=" +
            this.pptImgUrl2.infoData.url;
          this.pptImgUrl2.infoData.showType = 2;
        } else if (
          this.pptImgUrl2.infoData.url
            .split(".")
            [
              this.pptImgUrl2.infoData.url.split(".").length - 1
            ].toLocaleUpperCase() == "PDF"
        ) {
          this.pptImgUrl2.infoData.showType = 1;
        } else if (
          c.indexOf(
            this.pptImgUrl2.infoData.url
              .split(".")
              [
                this.pptImgUrl2.infoData.url.split(".").length - 1
              ].toLocaleUpperCase()
          ) != -1
        ) {
          this.pptImgUrl2.infoData.showType = 4;
        } else {
          // this.videoDetail = {};
          // this.playerOptions.sources[0].src = u;
          // this.videoDetail = this.playerOptions;
          this.pptImgUrl2.infoData.playerO = d;
          this.pptImgUrl2.infoData.playerO.sources[0].src =
            this.pptImgUrl2.infoData.url;
          this.pptImgUrl2.infoData.showType = 3;
        }
      }

      this.pptImgUrl2.overData.driData = a.overData.driData
        ? a.overData.driData[0]
        : {};
      if (a.overData.driData.length > 0) {
        if (
          b.indexOf(
            this.pptImgUrl2.overData.driData.url
              .split(".")
              [
                this.pptImgUrl2.overData.driData.url.split(".").length - 1
              ].toLocaleUpperCase()
          ) != -1
        ) {
          this.pptImgUrl2.overData.driData.url =
            "https://view.officeapps.live.com/op/view.aspx?src=" +
            this.pptImgUrl2.overData.driData.url;
          this.pptImgUrl2.overData.driData.showType = 2;
        } else if (
          this.pptImgUrl2.overData.driData.url
            .split(".")
            [
              this.pptImgUrl2.overData.driData.url.split(".").length - 1
            ].toLocaleUpperCase() == "PDF"
        ) {
          this.pptImgUrl2.overData.driData.showType = 1;
        } else if (
          c.indexOf(
            this.pptImgUrl2.overData.driData.url
              .split(".")
              [
                this.pptImgUrl2.overData.driData.url.split(".").length - 1
              ].toLocaleUpperCase()
          ) != -1
        ) {
          this.pptImgUrl2.overData.driData.showType = 4;
        } else {
          this.pptImgUrl2.overData.driData.playerO = d;
          this.pptImgUrl2.overData.driData.playerO.sources[0].src =
            this.pptImgUrl2.overData.driData.url;
          this.pptImgUrl2.overData.driData.showType = 3;
        }
      }

      this.pptImgUrl2.overData.tarData = a.overData.tarData
        ? a.overData.tarData[0]
        : {};
      if (a.overData.tarData.length > 0) {
        if (
          b.indexOf(
            this.pptImgUrl2.overData.tarData.url
              .split(".")
              [
                this.pptImgUrl2.overData.tarData.url.split(".").length - 1
              ].toLocaleUpperCase()
          ) != -1
        ) {
          this.pptImgUrl2.overData.tarData.url =
            "https://view.officeapps.live.com/op/view.aspx?src=" +
            this.pptImgUrl2.overData.tarData.url;
          this.pptImgUrl2.overData.tarData.showType = 2;
        } else if (
          this.pptImgUrl2.overData.tarData.url
            .split(".")
            [
              this.pptImgUrl2.overData.tarData.url.split(".").length - 1
            ].toLocaleUpperCase() == "PDF"
        ) {
          this.pptImgUrl2.overData.tarData.showType = 1;
        } else if (
          c.indexOf(
            this.pptImgUrl2.overData.tarData.url
              .split(".")
              [
                this.pptImgUrl2.overData.tarData.url.split(".").length - 1
              ].toLocaleUpperCase()
          ) != -1
        ) {
          this.pptImgUrl2.overData.tarData.showType = 4;
        } else {
          this.pptImgUrl2.overData.tarData.playerO = d;
          this.pptImgUrl2.overData.tarData.playerO.sources[0].src =
            this.pptImgUrl2.overData.tarData.url;
          this.pptImgUrl2.overData.tarData.showType = 3;
        }
      }

      this.pptImgUrl2.overData.actData = a.overData.actData
        ? a.overData.actData[0]
        : {};
      if (a.overData.actData.length > 0) {
        if (
          b.indexOf(
            this.pptImgUrl2.overData.actData.url
              .split(".")
              [
                this.pptImgUrl2.overData.actData.url.split(".").length - 1
              ].toLocaleUpperCase()
          ) != -1
        ) {
          this.pptImgUrl2.overData.actData.url =
            "https://view.officeapps.live.com/op/view.aspx?src=" +
            this.pptImgUrl2.overData.actData.url;
          this.pptImgUrl2.overData.actData.showType = 2;
        } else if (
          this.pptImgUrl2.overData.actData.url
            .split(".")
            [
              this.pptImgUrl2.overData.actData.url.split(".").length - 1
            ].toLocaleUpperCase() == "PDF"
        ) {
          this.pptImgUrl2.overData.actData.showType = 1;
        } else if (
          c.indexOf(
            this.pptImgUrl2.overData.actData.url
              .split(".")
              [
                this.pptImgUrl2.overData.actData.url.split(".").length - 1
              ].toLocaleUpperCase()
          ) != -1
        ) {
          this.pptImgUrl2.overData.actData.showType = 4;
        } else {
          this.pptImgUrl2.overData.actData.playerO = d;
          this.pptImgUrl2.overData.actData.playerO.sources[0].src =
            this.pptImgUrl2.overData.actData.url;
          this.pptImgUrl2.overData.actData.showType = 3;
        }
      }
      for (var i = 0; i < a.proData.length; i++) {
        this.pptImgUrl2.proData[i] = a.proData[i] ? a.proData[i][0] : {};
        if (a.proData[i].length > 0) {
          if (
            b.indexOf(
              this.pptImgUrl2.proData[i].url
                .split(".")
                [
                  this.pptImgUrl2.proData[i].url.split(".").length - 1
                ].toLocaleUpperCase()
            ) != -1
          ) {
            this.pptImgUrl2.proData[i].url =
              "https://view.officeapps.live.com/op/view.aspx?src=" +
              this.pptImgUrl2.proData[i].url;
            this.pptImgUrl2.proData[i].showType = 2;
          } else if (
            this.pptImgUrl2.proData[i].url
              .split(".")
              [
                this.pptImgUrl2.proData[i].url.split(".").length - 1
              ].toLocaleUpperCase() == "PDF"
          ) {
            this.pptImgUrl2.proData[i].showType = 1;
          } else if (
            c.indexOf(
              this.pptImgUrl2.proData[i].url
                .split(".")
                [
                  this.pptImgUrl2.proData[i].url.split(".").length - 1
                ].toLocaleUpperCase()
            ) != -1
          ) {
            this.pptImgUrl2.proData[i].showType = 4;
          } else {
            this.pptImgUrl2.proData[i].playerO = d;
            this.pptImgUrl2.proData[i].playerO.sources[0].src =
              this.pptImgUrl2.proData[i].url;
            this.pptImgUrl2.proData[i].showType = 3;
          }
        }
      }
      this.pptImgUrl2.excData = a.excData ? a.excData[0] : {};
      if (a.excData.length > 0) {
        if (
          b.indexOf(
            this.pptImgUrl2.excData.url
              .split(".")
              [
                this.pptImgUrl2.excData.url.split(".").length - 1
              ].toLocaleUpperCase()
          ) != -1
        ) {
          this.pptImgUrl2.excData.url =
            "https://view.officeapps.live.com/op/view.aspx?src=" +
            this.pptImgUrl2.excData.url;
          this.pptImgUrl2.excData.showType = 2;
        } else if (
          this.pptImgUrl2.excData.url
            .split(".")
            [
              this.pptImgUrl2.excData.url.split(".").length - 1
            ].toLocaleUpperCase() == "PDF"
        ) {
          this.pptImgUrl2.excData.showType = 1;
        } else if (
          c.indexOf(
            this.pptImgUrl2.excData.url
              .split(".")
              [
                this.pptImgUrl2.excData.url.split(".").length - 1
              ].toLocaleUpperCase()
          ) != -1
        ) {
          this.pptImgUrl2.excData.showType = 4;
        } else {
          this.pptImgUrl2.excData.playerO = d;
          this.pptImgUrl2.excData.playerO.sources[0].src =
            this.pptImgUrl2.excData.url;
          this.pptImgUrl2.excData.showType = 3;
        }
      }

      this.pptImgUrl2.effData = a.effData ? a.effData[0] : {};
      if (a.effData.length > 0) {
        if (
          b.indexOf(
            this.pptImgUrl2.effData.url
              .split(".")
              [
                this.pptImgUrl2.effData.url.split(".").length - 1
              ].toLocaleUpperCase()
          ) != -1
        ) {
          this.pptImgUrl2.effData.url =
            "https://view.officeapps.live.com/op/view.aspx?src=" +
            this.pptImgUrl2.effData.url;
          this.pptImgUrl2.effData.showType = 2;
        } else if (
          this.pptImgUrl2.effData.url
            .split(".")
            [
              this.pptImgUrl2.effData.url.split(".").length - 1
            ].toLocaleUpperCase() == "PDF"
        ) {
          this.pptImgUrl2.effData.showType = 1;
        } else if (
          c.indexOf(
            this.pptImgUrl2.effData.url
              .split(".")
              [
                this.pptImgUrl2.effData.url.split(".").length - 1
              ].toLocaleUpperCase()
          ) != -1
        ) {
          this.pptImgUrl2.effData.showType = 4;
        } else {
          this.pptImgUrl2.effData.playerO = d;
          this.pptImgUrl2.effData.playerO.sources[0].src =
            this.pptImgUrl2.effData.url;
          this.pptImgUrl2.effData.showType = 3;
        }
      }
    },
    // downloadFile(url) {
    //   let _url = "";
    //   if (
    //     url.indexOf("https://view.officeapps.live.com/op/view.aspx?src=") != -1
    //   ) {
    //     _url = url.split(
    //       "https://view.officeapps.live.com/op/view.aspx?src="
    //     )[1];
    //   } else {
    //     _url = url;
    //   }
    //   const x = new XMLHttpRequest();
    //   x.open("GET", _url, true);
    //   x.responseType = "blob";
    //   x.onload = function (e) {
    //     // const url = window.URL.createObjectURL(x.response);
    //     // const a = document.createElement("a");
    //     // a.href = url;
    //     // a.target = "_blank";
    //     // a.download = url;
    //     // a.click();
    //     // a.remove();
    //     let content = x.response;
    //     let elink = document.createElement("a");
    //     elink.download = decodeURI(
    //       _url.split("https://ccrb.s3.cn-northwest-1.amazonaws.com.cn/")[1]
    //     );
    //     elink.style.display = "none";
    //     let blob = new Blob([content]);
    //     elink.href = URL.createObjectURL(blob);
    //     document.body.appendChild(elink);
    //     elink.click();
    //     document.body.removeChild(elink);
    //   };
    //   x.send();
    // },
    jump(t) {
      var a = document.getElementById(t);
      var b = this.$refs["cenBox"];
      if (this.isNavTop >= 300) {
        b.scrollTop = a.offsetTop - 50;
      } else {
        b.scrollTop = a.offsetTop + 50;
      }
    },
    allScrollTop(ev) {
      console.log(ev.target.scrollTop);
      this.isNavTop = ev.target.scrollTop;
    },
    fold(i, j, e, type) {
      var a =
        e.currentTarget.parentElement.parentElement.parentElement.parentElement;
      var b = e.currentTarget.parentElement;
      if (type == 1) {
        this.anliBox[0].process.stageBox[j].actBox[i].isFold = 1;
        a.className += " smallTaskBorder";
        b.className += " funBlockTop";
      } else {
        this.anliBox[0].process.stageBox[j].actBox[i].isFold = 0;
        a.className = "taskBorder";
        b.className = "funBlock";
      }
      this.$forceUpdate();
    },
    fold1(i, e, type) {
      var a =
        e.currentTarget.parentElement.parentElement.parentElement.parentElement;
      var b = e.currentTarget.parentElement;
      if (type == 1) {
        this.anliBox[0].process.stageBox[i].isFold = 1;
        a.className += " smallTaskBorder";
        b.className += " funBlockTop";
      } else {
        this.anliBox[0].process.stageBox[i].isFold = 0;
        a.className = "taskBorder";
        b.className = "funBlock";
      }
      this.$forceUpdate();
    },
  },
  created() {
    this.selectAnLi();
  },
};
</script>

<style scoped>
@media screen and (max-width: 1280px) {
  .file > div > div:nth-child(2) > div:nth-child(1) {
    width: 160px !important;
  }
  .leftImg {
    height: 230px !important;
  }
  .navTop {
    margin: 0 5px !important;
  }
  /* .navTop > div:nth-child(2) {
    width: 60px !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  } */
  .navBox {
    width: 95% !important;
  }
  .messageBox {
    width: 95% !important;
  }
  .proOverNav {
    width: 52% !important;
  }
}
html,
body {
  background: #e1f1ff !important;
}
.add_student >>> .el-dialog__header {
  padding: 20px 20px 10px;
  text-align: center;
  background: #32455b;
}
.add_student >>> .el-dialog__title {
  font-size: 14px !important;
  color: #fff !important;
}
.add_student >>> .el-dialog__headerbtn {
  font-size: 20px !important;
}
.add_student >>> .el-form-item__label {
  margin-left: 65px;
}
.add_student >>> .el-form-item {
  display: flex;
}
.add_student >>> .el-form-item__content {
  margin: 0 !important;
}
.add_student >>> .el-dialog__footer {
  text-align: center !important;
}
.center_content {
  width: 100%;
  height: 100%;
  background: #e1f1ff;
  overflow: auto;
}
.detaBox {
  padding: 10px 0 0 0;
  background: #e1f1ff;
  position: relative;
  padding-bottom: 50px;
}
.anliMiddle {
  margin: 0 0 15px 0;
  width: 100%;
  background: #fff;
}
.anliImg {
  width: 200px;
}
.anliImg > img {
  width: 100%;
  height: 100%;
}
.people {
  display: flex;
}

.person {
  margin-left: 10px;
  line-height: 18px;
}
.man {
  width: 16px;
  height: 16px;
}

.man > img {
  width: 100%;
  height: 100%;
}
.anliBox {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  padding: 25px 0 25px 60px;
  position: relative;
}
.anliNav {
  padding-left: 30px;
}
.anliNav > div:nth-child(1) {
  font-size: 20px;
  font-weight: bold;
}
.anliNav > div:nth-child(2) {
  margin: 10px 0 10px 0;
}
.anliNav > div:nth-child(3) {
  display: flex;
  margin-bottom: 10px;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
}
.anliNav > div:nth-child(3) > div:nth-child(2) {
  /* color: #aba8a8; */
  margin-left: 30px;
}
.navBox {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  background: #fff;
  width: 75%;
  margin: 0 auto;
  height: 70px;
  border-radius: 10px;
}
.isNavBox {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  top: 5%;
  box-shadow: 2px 2px 11px 1px #bdbdbd;
  width: 100%;
  border-radius: 0 !important;
  z-index: 999;
}
.isNavBox > div > div:nth-child(2):hover {
  color: #5e5e5e;
}
.isMessageBox {
  margin: 11% auto !important;
}
.navBox > div:nth-child(5) > div:nth-child(2) {
  width: 150px;
}
.navBox > div:nth-child(6) > div:nth-child(2) {
  width: 120px;
}
.navBox > div:nth-child(2) > div:nth-child(2),
.navBox > div:nth-child(3) > div:nth-child(2) {
  width: 70px;
}
.navTop {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  margin: 0 20px;
  cursor: pointer;
}
.navTop > div:nth-child(2) {
  width: 100px;
}
.navImg {
  width: 35px;
}
.navImg > img {
  width: 100%;
  height: 100%;
}
.messageBox {
  width: 75%;
  margin: 1% auto;
}
.whiteBg {
  width: 100%;
  background: #fff;
  margin: 20px 0;
  padding-top: 15px;
  border-radius: 10px;
  box-sizing: border-box;
}
.whiteLeft {
  /* width: 64%; */
  margin: 0;
  min-height: 400px;
  max-height: 400px;
}
.navBg,
.jdNavBg {
  width: 130px;
  height: 50px;
  background-image: url("../../../../assets/icon/anliDetail/navBg.png");
  background-size: 100% 100%;
  color: #fff;
  text-align: center;
  line-height: 47px;
  margin: 0 0 5px 20px;
  text-indent: 20px;
}
.jdNavBg {
  background-image: url("../../../../assets/icon/anliDetail/jdNavBg.png");
}
.detaBrief {
  padding: 0 0 20px 40px;
  text-indent: 25px;
  width: 90%;
  height: 100px;
  overflow: auto;
  word-break: break-word;
}
.proOverCss {
  width: 100%;
  display: flex;
  margin: 20px 0;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: flex-start;
}
.fileLook {
  display: flex;
  width: 100%;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  margin: 20px 0px;
}
.look_file {
  background: #fff;
  /* margin: 20px 0; */
  /* padding-top: 15px; */
  border-radius: 10px;
  box-sizing: border-box;
  width: 64%;
  /* margin: 0; */
  min-height: 400px;
  max-height: 400px;
}
.whiteRight {
  width: 35%;
  margin-left: 2%;
}
.proOverNav {
  overflow: auto;
  word-break: break-word;
  margin-left: 10px;
  width: 55%;
  background: #f6f9fe;
  padding: 10px 10px 10px 10px;
  border-radius: 10px;
  text-indent: 20px;
  height: 280px;
}
.noImg {
  max-height: 300px;
  min-height: 300px;
  overflow: auto;
  word-break: break-word;
  min-width: 90%;
  padding-left: 30px;
  width: 90%;
}
.fileTop {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  background: #398fc0;
  color: #fff;
  height: 50px;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  padding: 0 0 0 19px;
  font-size: 15px;
}
.fileListImg {
  width: 25px;
}
.fileListImg > img {
  width: 100%;
  height: 100%;
}
.fileBox {
  height: calc(400px - 50px);
  background: #fff;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
}
.fileList {
  width: 98%;
  background: #f6f9fe;
  margin: 0 auto;
  border-radius: 10px;
  height: 340px;
  overflow: auto;
}
.file {
  padding: 10px;
}
.file > .fileCss {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  box-shadow: 2px 2px 13px 1px #e1e1e1;
}
.file > div > div:nth-child(1) {
  background: #286a8d;
  color: #fff;
  width: 95px;
  min-width: 95px;
  height: 45px;
  text-align: center;
  line-height: 45px;
  border-top-left-radius: 10px;
  border-bottom-left-radius: 10px;
}
.file > div > div:nth-child(2) {
  background: #fff;
  height: 45px;
  width: 100%;
  line-height: 45px;
  padding-left: 10px;
  border-top-right-radius: 10px;
  border-bottom-right-radius: 10px;
  position: relative;
}
.file > div > div:nth-child(2) > div:nth-child(1) {
  width: 250px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
}
.hdTop {
  position: relative;
  width: 100%;
  height: 60px;
}
.longNavBg {
  width: calc(100% - 30px);
  background-image: linear-gradient(90deg, #52c6ff, #18adff);
  color: #fff;
  height: 60px;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  font-size: 18px;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  padding-left: 30px;
  position: absolute;
  z-index: 999;
}
.longNavBg > div:nth-child(1) {
  width: 8px;
  height: 8px;
  background: #ffeb24;
  border-radius: 50%;
  margin-right: 15px;
}
.longNavBg > div:nth-child(2) {
  width: 95%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  word-break: break-word;
}
.bottomBg {
  width: 98%;
  height: 40px;
  background: #d6f0ff;
  position: absolute;
  bottom: -10px;
  left: 50%;
  z-index: 9;
  transform: translate(-50%);
  border-radius: 10px;
}
.returnAnLi {
  background: #205cc6;
  width: 70px;
  height: 30px;
  color: #fff;
  text-align: center;
  line-height: 32px;
  margin-right: 20px;
  cursor: pointer;
  border-radius: 5px;
  font-size: 14px;
}
.fixBottom {
  position: fixed;
  width: 100%;
  height: 50px;
  background: #fff;
  bottom: 0;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-end;
  box-shadow: 2px 2px 13px 1px #e1e1e1;
  z-index: 999;
}
.noFile {
  width: 200px;
  margin: 0 auto;
  padding: 20px 0 0 0;
}
.noFile > img {
  width: 100%;
  height: 100%;
}
.navBgTop {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: baseline;
  justify-content: space-between;
  width: 95%;
}
.header-title {
  display: flex;
}
.logoImg {
  width: 30px;
}
.logoImg > img {
  width: 100%;
  height: 100%;
}
.title_add_student {
  margin: 0 auto;
  color: #fff;
}
.fullStyle >>> .el-dialog__body {
  height: 100% !important;
}

.fullStyle >>> .el-dialog,
.fullStyle {
  width: 100% !important;
  max-width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
}
.dialog_diy >>> .el-dialog__header,
.dialog_diy1 >>> .el-dialog__header {
  background: #454545 !important;
  padding: 15px 20px;
}

.dialog_diy >>> .el-dialog__title,
.dialog_diy1 >>> .el-dialog__title {
  color: #fff;
}

.dialog_diy >>> .el-dialog__headerbtn,
.dialog_diy1 >>> .el-dialog__headerbtn {
  top: 19px;
}

.dialog_diy >>> .el-dialog__headerbtn .el-dialog__close,
.dialog_diy1 >>> .el-dialog__headerbtn .el-dialog__close {
  color: #fff;
}

.dialog_diy >>> .el-dialog__headerbtn .el-dialog__close:hover,
.dialog_diy1 >>> .el-dialog__headerbtn .el-dialog__close:hover {
  color: #fff;
}

.dialog_diy1 >>> .el-dialog__body {
  padding: 0;
}

.dialog_diy >>> .el-dialog__body,
.dialog_diy >>> .el-dialog__footer,
.dialog_diy1 >>> .el-dialog__footer {
  background: #fafafa;
}
.video-player >>> .video-js {
  height: 400px;
}
.video-player >>> .video-js .vjs-tech {
  height: 400px;
}
.downFile {
  width: 25px;
  height: 25px;
  position: absolute;
  right: 8px;
  cursor: pointer;
  top: 8px;
}
.leftBox {
  width: 40%;
  padding: 0 0 0 35px;
}
.leftImg {
  width: 100%;
  height: 300px;
  cursor: pointer;
}
.downFile > img,
.leftImg > img {
  width: 100%;
  height: 100%;
}
.imgAndNav {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: flex-start;
  width: 100%;
  margin: 10px auto 0;
}
.jdTopBox {
  background: #fff;
  border-radius: 10px;
  padding: 20px;
}
.jdTopNav {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: space-between;
  position: relative;
}
.jdLeftNav {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
}
.jdImg {
  width: 30px;
  height: 30px;
}
.jdImg > img {
  width: 100%;
  height: 100%;
}
.jdLeftTitle {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  margin-left: 10px;
}
.jdLeftTitle > div:nth-child(2) {
  margin-left: 5px;
}
.jdRightNav {
  padding-right: 95px;
  color: #7e7e7e;
}
.personAndAutor {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: flex-end;
}
.autorBox {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: baseline;
  margin-left: 10px;
}
.Autor {
  margin: 0 5px;
}
.isNoMessage {
  width: 20%;
  margin: 5% auto 0;
}

.isNoMessage > img {
  width: 100%;
  height: 100%;
}
/* code 样式 */
.noImg >>> code,
.detailTable >>> code,
.proOverNav >>> code {
  display: inline-block;
  *display: inline;
  *zoom: 1;
  background-color: #f1f1f1;
  border-radius: 3px;
  padding: 3px 5px;
  margin: 0 3px;
}

.noImg >>> pre code,
.detailTable >>> pre code,
.proOverNav >>> pre code {
  display: block;
}

/* ul ol 样式 */
.noImg >>> ul,
ol,
.detailTable >>> ul,
ol,
.proOverNav >>> ul,
ol {
  margin: 10px 0 10px 20px;
}
/* table 样式 */
.noImg >>> table,
.detailTable >>> table,
.proOverNav >>> table {
  border-top: 1px solid #ccc;
  border-left: 1px solid #ccc;
}

.noImg >>> table td,
.noImg >>> table th,
.detailTable >>> table td,
.detailTable >>> table th,
.proOverNav >>> table td,
.proOverNav >>> table th {
  border-bottom: 1px solid #ccc;
  border-right: 1px solid #ccc;
  padding: 15px 5px;
  max-width: 0px;
}

.noImg >>> table th,
.detailTable >>> table th,
.proOverNav >>> table th {
  border-bottom: 2px solid #ccc;
  text-align: center;
}

/* blockquote 样式 */
.noImg >>> blockquote,
.detailTable >>> blockquote,
.proOverNav >>> blockquote {
  display: block;
  border-left: 8px solid #d0e5f2;
  padding: 5px 10px;
  margin: 10px 0;
  line-height: 1.4;
  font-size: 100%;
  background-color: #f1f1f1;
}

.smallTaskBorder {
  height: 170px;
  min-height: 170px !important;
  overflow: hidden;
}

.funBlock {
  display: flex;
  padding: 15px 0;
  flex-direction: row;
  justify-content: flex-end;
  align-items: center;
  position: absolute;
  right: 0;
  bottom: 5px;
}

.fold {
  margin-right: 10px;
  cursor: pointer;
}

.arrow > img {
  width: 100%;
  height: 100%;
}

.arrow {
  width: 15px;
  height: 15px;
  margin-left: 10px;
}
</style>