xjc-vue/src/views/xjc-integratedmachine/environment/university_details_video.vue

<template>
  <div class="university_details_video">
    <head-component :headinfo=headinfo></head-component>
    <div class="page-content">
      <div class="page-img-box">
        <div class="top-content">
          <img :src="`${baseUrl}`+ entity.logo"/>
          <!--          <div style="width: 154px;height: 154px;border: 1px solid;margin-left: 48px"></div>-->
          <div class="top-content-right">
            <div class="right-top">
              <p class="title">{{ entity.name }}</p>
              <div class="right-top-icon">
                <collectionComponent :collection="collection_data"></collectionComponent>
              </div>
            </div>
            <div class="school-level-box">
              <p class="school-level" style="background-color: #B3FC7C" v-show="entity.nef==='1'">985</p>
              <p class="school-level" style="background-color: #BBF88D" v-show="entity.too==='1'">211</p>
              <p class="school-level" style="background-color: #8CE349" v-show="entity.istopschool==='1'">一流大学</p>
              <p class="school-level" style="background-color: #9DFF51" v-show="entity.istopsubject==='1'">一流学科</p>
              <p class="school-level" style="background-color: #8ADFC4" v-show="entity.self==='1'">强</p>
              <p class="school-level" style="background-color: #1EC590" v-show="entity.graduate==='1'">研</p>
            </div>
            <div class="text-box">
              <p style="width: 200px">创建时间:{{ entity.ctime }}</p>
              <p style="width: 200px">所在地区:{{ entity.areaname }}</p>
              学历层次:
              <dict-tag style="width: 200px" :options="educationlevel" :value="entity.educationlevel"/>
              办学性质:
              <dict-tag :options="property" :value="entity.property"/>
              院校类型:
              <dict-tag :options="school_category" :value="entity.school_category"/>
            </div>
            <div class="text-box">
              <p style="width: 200px">院校隶属:{{ entity.subjection }}:</p>
              <p>通讯地址:{{ entity.address }}</p>
            </div>
          </div>
        </div>
        <div class="bottom-content">
          <div class="tab-box">
            <div :class="[onePage?'item-box-active':'item-box']" @click="showPage(1)">
              学校简介
            </div>
            <div :class="[twoPage?'item-box-active':'item-box']" @click="showPage(2)">
              院校设置
            </div>
            <div :class="[threePage?'item-box-active':'item-box']" @click="showPage(3)">
              学科专业
            </div>
            <div :class="[fourPage?'item-box-active':'item-box']" @click="showPage(4)">
              奖励资助
            </div>
            <div :class="[fivePage?'item-box-active':'item-box']" @click="showPage(5)">
              考分查询
            </div>
            <div :class="[sixPage?'item-box-active':'item-box']" @click="showPage(6)">
              计划查询
            </div>
            <div :class="[senvenPage?'item-box-active':'item-box']" @click="showPage(7)">
              招生章程
            </div>
            <div :class="[eightPage?'item-box-active':'item-box']" @click="showPage(8)">
              学校视频
            </div>
          </div>
          <div class="one-page" v-show="onePage">
            <p class="title">学校简介</p>
            <p class="info" v-html="entity.summary">
            </p>
          </div>
          <div class="one-page" v-show="twoPage">
            <p class="title">院系设置</p>
            <p class="info" v-html="entity.collegeset">
            </p>
          </div>
          <div class="one-page" v-show="threePage">
            <p class="title">学科专业</p>
            <p class="info" v-html="entity.specialtyintroduction">
            </p>
          </div>
          <div class="one-page" v-show="fourPage">
            <p class="title">奖励资助</p>
            <p class="info" v-html="entity.incentivegrant">
            </p>
          </div>
          <div class="one-page" v-show="fivePage">
            <div class="select-div">
              <p>招生地区:</p>
              <p class="select-box" @click="showAreaChooseHandler">
                <span v-if="form.areaname">{{ form.areaname }}</span>
                <span v-else>请选择</span>
              </p>
              <p style="margin-left: 20px">考生类别：
              </p>
              <p class="select-box" @click="showCategoryHandler">
                <span v-if="form.categoryName">{{ form.categoryName }}</span>
                <span v-else>请选择</span>
              </p>
              <p class="select-box click-search" @click="getScore">点击查询</p>
            </div>
            <el-table :data="kf_tableData">
              <el-table-column label="招生年份" align="center" key="years" prop="years" style="height: 95px"/>
              <el-table-column label="录取批次" align="center" key="batchname" prop="batchname" style="height: 95px"/>
              <el-table-column label="最低分" align="center" key="lowscore" prop="lowscore" style="height: 95px"/>
              <el-table-column label="最低分位次" align="center" key="totalorder" prop="totalorder" style="height: 95px"
                               ya/>
            </el-table>
          </div>
          <div class="one-page" v-show="sixPage">
            <div class="select-div">
              <p>招生地区:</p>
              <p class="select-box" @click="showAreaChooseHandler">
                <span v-if="form.areaname">{{ form.areaname }}</span>
                <span v-else>请选择</span></p>
              <p style="margin-left: 20px">年份:</p>
              <p class="select-box" @click="showGradeHandler">
                <span v-if="form.grade">{{ form.grade }}</span>
                <span v-else>请选择</span></p>
              <p style="margin-left: 20px">考生类别:</p>
              <p class="select-box" @click="showCategoryHandler">
                <span v-if="form.categoryName">{{ form.categoryName }}</span>
                <span v-else>请选择</span>
              </p>
              <p class="select-box click-search" @click="getPlan">点击查询</p>
            </div>
            <el-table :data="jh_tableData">
              <el-table-column label="招生年份" align="center" key="years" prop="years"/>
              <el-table-column label="专业名称" align="center" key="enrollname" prop="enrollname"/>
              <el-table-column label="大学学制" align="center" key="studyyears" prop="studyyears"/>
              <el-table-column label="批次" align="center" key="batch_name" prop="batch_name"/>
              <el-table-column label="计划招生人数" align="center" key="plannum" prop="plannum"/>
              <el-table-column label="学费" align="center" key="fee" prop="fee"/>
            </el-table>
          </div>
          <div class="one-page" v-show="senvenPage">
            <p class="title">学校简介</p>
            <p class="info" v-html="entity.sturecruitmen">
            </p>
          </div>
          <div class="one-page" v-show="eightPage">
            <p class="title">学校视频</p>
          </div>
        </div>
      </div>
      <drag_component></drag_component>
    </div>
  </div>
  <el-dialog
      v-model="sixPage"
      destroy-on-close
      title=""
      width="90%"
      height="910px"
      style="width: 90%;height: 910px;"
      center
      align-center
  >
    <div class="one-page" style="width: 1658px" v-show="sixPage">
      <div class="select-div">
        <p>招生地区:</p>
        <p class="select-box" @click="showAreaChooseHandler">
          <span v-if="form.areaname">{{ form.areaname }}</span>
          <span v-else>请选择</span></p>
        <p style="margin-left: 20px">年份:</p>
        <p class="select-box" @click="showGradeHandler">
          <span v-if="form.grade">{{ form.grade }}</span>
          <span v-else>请选择</span></p>
        <p style="margin-left: 20px">考生类别:</p>
        <p class="select-box" @click="showCategoryHandler">
          <span v-if="form.categoryName">{{ form.categoryName }}</span>
          <span v-else>请选择</span>
        </p>
        <p class="select-box click-search" @click="getPlan">点击查询</p>
      </div>
      <el-table :data="jh_tableData">
        <el-table-column label="招生年份" align="center" key="years" prop="years"/>
        <el-table-column label="专业名称" align="center" key="enrollname" prop="enrollname"/>
        <el-table-column label="大学学制" align="center" key="studyyears" prop="studyyears"/>
        <el-table-column label="批次" align="center" key="batch_name" prop="batch_name"/>
        <el-table-column label="计划招生人数" align="center" key="plannum" prop="plannum"/>
        <el-table-column label="学费" align="center" key="fee" prop="fee"/>
      </el-table>
    </div>
  </el-dialog>
  <el-dialog
      v-model="fivePage"
      destroy-on-close
      title=""
      width="90%"
      height="910px"
      style="width: 90%;height: 910px;"
      center
      align-center
  >
    <div class="one-page" style="width: 1658px" v-show="fivePage">
      <div class="select-div">
        <p>招生地区:</p>
        <p class="select-box" @click="showAreaChooseHandler">
          <span v-if="form.areaname">{{ form.areaname }}</span>
          <span v-else>请选择</span>
        </p>
        <p style="margin-left: 20px">考生类别：
        </p>
        <p class="select-box" @click="showCategoryHandler">
          <span v-if="form.categoryName">{{ form.categoryName }}</span>
          <span v-else>请选择</span>
        </p>
        <p class="select-box click-search" @click="getScore">点击查询</p>
      </div>
      <el-table :data="kf_tableData">
        <el-table-column label="招生年份" align="center" key="years" prop="years" style="height: 95px"/>
        <el-table-column label="录取批次" align="center" key="batchname" prop="batchname" style="height: 95px"/>
        <el-table-column label="最低分" align="center" key="lowscore" prop="lowscore" style="height: 95px"/>
        <el-table-column label="最低分位次" align="center" key="totalorder" prop="totalorder" style="height: 95px"
                         ya/>
      </el-table>
    </div>
  </el-dialog>
  <div>
    <!--招生地区-->
    <el-dialog v-model="showAreaChoose" width="600px" append-to-body>
      <div class="dict-dialog">
        <div class="dict-box" v-for="dict in gk_province" :key="dict.value" @click="chooseArea(dict)">{{
            dict.label
          }}
        </div>
      </div>
    </el-dialog>
    <!--考生类别-->
    <el-dialog v-model="showCategoryChoose" width="600px" append-to-body>
      <div class="dict-dialog">
        <div class="dict-box" v-for="dict in category" :key="dict.value" @click="chooseCategory(dict)">{{
            dict.label
          }}
        </div>
      </div>
    </el-dialog>
    <!--年份-->
    <el-dialog v-model="showGradeChoose" width="600px" append-to-body>
      <div class="dict-dialog">
        <div class="dict-box" v-for="item in grade" :key="item" @click="chooseGrade(item)">{{ item }}</div>
      </div>
    </el-dialog>
    <el-dialog
        v-model="eightPage"
        @before-close="dialogBeforeClose"
        destroy-on-close
        title="学校视频"
        width="1832px"
        height="915px"
        center
        align-center
    >
      <div class="video-content" v-if="entity.path">
        <video ref="videoPlayer" video preload="auto" autoplay muted controls width="1798" height="900">
          <source :src="entity.path" type="video/mp4">
        </video>
      </div>
    </el-dialog>
  </div>
</template>
<script setup>
import headComponent from '@/views/xjc-integratedmachine/components/head_component.vue'
import Drag_component from "@/views/xjc-integratedmachine/components/drag_component.vue";
import {
  universityDetail,
  getPlanYearList,
  getScoreList,
  getPlanList,
  getCollection
} from '@/api/xjc-integratedmachine/environment/university.js'
import videojs from 'video.js';
import 'video.js/dist/video-js.css';

import collectionComponent from '@/views/xjc-integratedmachine/components/collection_component.vue'
import {ref} from "vue";
import {getConfigKey} from "@/api/system/config.js";


const showAreaChoose = ref(false)
const showCategoryChoose = ref(false)
const showGradeChoose = ref(false)

const router = useRouter()
const route = useRoute()

const param = route.query
const showIndex = ref(1)
const baseUrl = ref()

const collection_data = ref({
  contentType: 1,
  contentId: param.id
})
const grade = ref([])

const {proxy} = getCurrentInstance()

const {
  gk_province,
  category,
  educationlevel,
  property,
  school_category
} = proxy.useDict('gk_province', 'category', 'educationlevel', 'property', 'school_category')

const form = ref({
  area: null,
  areaname: null,
  university: param.name,
})

const entity = ref({})
const collectionList = ref([])
const headinfo = ref({})
const onePage = ref(true)
const twoPage = ref(false)
const threePage = ref(false)
const fourPage = ref(false)
const fivePage = ref(false)
const sixPage = ref(false)
const senvenPage = ref(false)
const eightPage = ref(false)

function setHeadinfo(){
  headinfo.value = {
    title: '高校信息查询',
    user: {
      avatar: '头像路径',
      nickName: '张三'
    },
    backUrl : '/xjc-integratedmachine/environment/query_universitydb_conditions',
    homeUrl:'/xjc-integratedmachine/environment/index'
  }
}

function detail() {
  universityDetail({
    id: param.id
  }).then(resp => {
    entity.value.oldid = resp.entity.oldid
    //学校信息在这里
    entity.value = resp.entity
    //看看收藏
    queryConnection()
  })
}

function changeShowIndex(index) {
  showIndex.value = index
  if (showIndex.value == 8) {
    const player = videojs(playerId, {autoplay: true});
    player.src(entity.value.path);
    player.on("ended", () => {
    })
  }
}

function showAreaChooseHandler() {
  showAreaChoose.value = true
}

function chooseArea(item) {
  form.value.area = item.value
  form.value.areaname = item.label
  showAreaChoose.value = false
  getPlanYear()
}

function showCategoryHandler() {
  showCategoryChoose.value = true
}

function chooseCategory(item) {
  form.value.category = item.value
  form.value.categoryName = item.label
  showCategoryChoose.value = false
}

function showGradeHandler() {
  showGradeChoose.value = true
}

function chooseGrade(item) {
  form.value.grade = item
  showGradeChoose.value = false
}

function getPlanYear() {
  getPlanYearList({
    university: param.name,
    area: form.value.area
  }).then(resp => {
    grade.value = resp.list
  })
}

const kf_tableData = ref([])

function getScore() {
  let data = {
    area: form.value.area,
    university: entity.value.oldid,
    category: form.value.category
  }
  getScoreList(data).then(resp => {
    kf_tableData.value = resp.list
  })
}

function dialogBeforeClose() {
  onePage.value = true;
  twoPage.value = false;
  threePage.value = false;
  fourPage.value = false;
  fivePage.value = false;
  sixPage.value = false
  senvenPage.value = false
  eightPage.value = false;
}

const jh_tableData = ref([])

function getPlan() {
  let data = {
    university: param.name,
    area: form.value.area,
    category: form.value.category,
    year: form.value.grade
  }
  getPlanList(data).then(resp => {
    jh_tableData.value = resp.list
  })
}

function collection() {
  let data = {
    contentType: 1,
    contentId: param.id,
  }
  addCollection(data).then(resp => {
    queryConnection()
  })
}

function queryConnection() {
  let data = {
    contentType: 1,
    contentId: param.id,
  }
  getCollection(data).then(resp => {
    collectionList.value = resp.collection
  })
}

function cancle_collection() {
  let data = {
    id: collectionList.value[0].id,
  }
  removeCollection(data).then(resp => {
    queryConnection()
  })
}


detail()
const showPage = (val) => {
  if (val === 1) {
    onePage.value = true;
    twoPage.value = false;
    threePage.value = false;
    fourPage.value = false;
    fivePage.value = false;
    sixPage.value = false
    senvenPage.value = false
    eightPage.value = false;
  } else if (val === 2) {
    onePage.value = false;
    twoPage.value = true;
    threePage.value = false;
    fourPage.value = false;
    fivePage.value = false;
    sixPage.value = false
    senvenPage.value = false
    eightPage.value = false;
  } else if (val === 3) {
    onePage.value = false;
    twoPage.value = false;
    threePage.value = true;
    fourPage.value = false;
    fivePage.value = false;
    sixPage.value = false
    senvenPage.value = false
    eightPage.value = false;
  } else if (val === 4) {
    onePage.value = false;
    twoPage.value = false;
    threePage.value = false;
    fourPage.value = true;
    fivePage.value = false;
    sixPage.value = false
    senvenPage.value = false
    eightPage.value = false;
  } else if (val === 5) {
    onePage.value = false;
    twoPage.value = false;
    threePage.value = false;
    fourPage.value = false;
    fivePage.value = true;
    sixPage.value = false
    senvenPage.value = false
    eightPage.value = false;
  } else if (val === 6) {
    onePage.value = false;
    twoPage.value = false;
    threePage.value = false;
    fourPage.value = false;
    fivePage.value = false;
    sixPage.value = true
    senvenPage.value = false
    eightPage.value = false;
  } else if (val === 7) {
    onePage.value = false;
    twoPage.value = false;
    threePage.value = false;
    fourPage.value = false;
    fivePage.value = false;
    sixPage.value = false
    senvenPage.value = true
    eightPage.value = false;
  } else if (val === 8) {
    onePage.value = false;
    twoPage.value = false;
    threePage.value = false;
    fourPage.value = false;
    fivePage.value = false;
    sixPage.value = false
    senvenPage.value = false;
    eightPage.value = true;
  }
  //清空数据
  form.area = '';
  form.areanam = '';
  form.university = '';
  form.categoryName = '';
}

onMounted(() => {
  proxy.getConfigKey('sys_resource_root2').then(res => {
    baseUrl.value = res.msg;
  })
  setHeadinfo()
})
</script>

<style scoped lang="scss">
p, div {
  margin: 0;
  padding: 0;
}

.university_details_video {
  background: url('@/assets/images/environment/university-detail.png') no-repeat;
  background-size: 1920px 1080px;
  z-index: 10;
  width: 100%;
  height: 1080px;

  .page-content {
    width: 100%;
    position: absolute;
    top: 100px;
    bottom: 0;
    display: flex;
    justify-content: center;
  }

  .page-img-box {
    width: 1832px;
    height: 922px;
    margin-top: 13px;
    background: rgba(255, 255, 255, 0.4);
    border-radius: 35px 35px 35px 35px;
    display: flex;
    //justify-content: space-around;
    flex-direction: column;
    //align-items: center;

    .top-content {
      width: 1832px;
      height: 282px;
      border: 1px solid;
      display: flex;
      justify-content: space-between;
      align-items: center;

      .top-content-right {
        margin-left: 45px;
        width: 1630px;
        height: 281px;
        border: 1px solid;
        margin-left: 45px;

        .title {
          font-weight: bold;
          font-size: 36px;
          color: #1E410E;
          line-height: 24px;
          //margin-top: 63px;
        }

        .school-level-box {
          display: flex;
          justify-content: left;
          //margin-top: 32px;

          .school-level {
            margin-right: 20px;
            width: 174px;
            height: 54px;
            background: #B3FC7C;
            border-radius: 5px 5px 5px 5px;
            font-weight: bold;
            font-size: 20px;
            color: #000000;
            line-height: 54px;
            text-align: center;
          }
        }

        .text-box {
          width: 1124px;
          display: flex;
          //justify-content: space-between;
          align-items: center;
          flex-wrap: wrap;
          margin-top: 14px;

          p {
            margin-right: 20px;
          }
        }

        .right-top {
          display: flex;
          justify-content: space-between;
          align-items: center;

          .right-top-icon {
            width: 200px;
            height: 68px;
            border: 1px solid;
            display: flex;
            justify-content: space-between;
            margin-top: 24px;

            .item-img {
              display: flex;
              flex-direction: column;
              align-items: center;

              p {
                font-weight: 400;
                font-size: 20px;
                color: #515F6A;

              }

              img {
                width: 36px;
                height: 36px;
                border: 1px solid;
              }
            }
          }
        }

      }
    }

  }


  .bottom-content {
    margin-top: 25px;
    //width:100px;
    .tab-box {
      display: flex;
      padding-right: 279px;

      img {
        width: 36px;
        height: 36px;
        margin-right: 12px;
      }
    }


    .item-box {
      text-align: center;
      display: flex;
      justify-content: center;
      align-items: center;
      width: 202px;
      height: 65px;
      box-shadow: 0px 0px 4px 1px rgba(0, 0, 0, 0.09);
      border-radius: 5px 5px 0px 0px;
      font-weight: 400;
      font-size: 32px;
      color: #979797;
    }

    .item-box-active {
      text-align: center;
      color: #000000;
      background: #FFFFFF;
      font-weight: bold;
      font-size: 32px;
      display: flex;
      justify-content: center;
      align-items: center;
      width: 202px;
      height: 65px;
      background: #FFFFFF;
      box-shadow: 0px 0px 4px 1px rgba(0, 0, 0, 0.09);
      border-radius: 5px 5px 0px 0px;
    }
  }

  .editor-content div,
  .editor-content span,
  .editor-content p,
  .editor-content h1,
  .editor-content h2,
  .editor-content h3,
  .editor-content h4,
  .editor-content h5,
  .editor-content h6 {
    font-size: 26px !important;
    line-height: 37px !important;
  }

  .editor-content div,
  .editor-content span,
  .editor-content p {
    text-indent: 2em !important;
    text-align: left !important;
  }
}

.one-page {
  width: 1832px;
  height: 547px;
  background: #FFFFFF;
  border-radius: 0px 0px 35px 35px;
  border: 1px solid #FFFFFF;
  overflow: auto;
  padding-left: 33px;
  padding-right: 33px;
  line-height: 32px;

  .title {
    height: 40px;
    border-left: 8px #8CE349 solid;
    margin-top: 33px;
    margin-left: 33px;
    font-weight: 400;
    font-size: 28px;
    color: #333333;
    line-height: 40px;
    padding-left: 11px;
  }

  .info {
    text-indent: 2em;
    font-weight: 400;
    font-size: 28px;
    color: #333333;
    line-height: 40px;
  }

  .select-div {
    width: 100%;
    height: 100px;
    font-weight: 400;
    font-size: 30px;
    color: #333333;
    line-height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 21px;

    .select-box {
      width: 300px;
      height: 90px;
      border: 1px solid #CCCCCC;
      line-height: 90px;
      text-align: center;
      margin-left: 10px;
    }

    .click-search {
      width: 170px;
      height: 90px;
      background: linear-gradient(180deg, #73EE71 0%, #0ACB63 100%);
      border-radius: 5px;
      font-weight: 400;
      font-size: 24px;
      color: #FFFFFF;
      margin-left: 20px;
    }
  }

  ::v-deep .el-table .el-table__header-wrapper th, .el-table .el-table__fixed-header-wrapper th {
    height: 74px !important;
    font-size: 24px;
    color: #1E410E;
  }

  ::v-deep .el-table tr {
    height: 74px !important;
    font-size: 20px;
  }

  ::v-deep .el-dialog__title {
    font-size: 34px !important;
  }

  ::v-deep .el-dialog {
    margin-top: 0px !important;
  }

  ::v-deep .el-dialog__headerbtn .el-dialog__close {
    font-size: 30px !important;
  }

}
.dict-dialog{
  max-width: 570px;
  height: 800px;
  overflow: auto;
  .dict-box {
    //border: 1px solid red;
    //background: #1ab394;
    font-size: 24px;
    line-height: 34px;
    color: #333333;
  }
}

</style>