[feat] 环境探索

src/router/router_environment.js

@@ -158,9 +158,15 @@ const router = [
         path: '/xjc-integratedmachine/environment/ai_career_interview2',
         component: () => import('@/views/xjc-integratedmachine/environment/ai_career_interview2.vue'),
     },
+    //高校对比
     {
-        path: '/xjc-integratedmachine/environment/contrast_data',
-        component: () => import('@/views/xjc-integratedmachine/environment/contrast_data.vue'),
+        path: '/xjc-integratedmachine/environment/contrast_university',
+        component: () => import('@/views/xjc-integratedmachine/environment/contrast_university.vue'),
+    },
+    //专业对比
+    {
+        path: '/xjc-integratedmachine/environment/contrast_major',
+        component: () => import('@/views/xjc-integratedmachine/environment/contrast_major.vue'),
     }
 ]
 export default {

src/views/xjc-integratedmachine/components/collection_component.vue

@@ -1,6 +1,4 @@
 <template>
-
-
     <div class="item-img" v-if="collectionList.length == 0">
       <img @click="collection" v-if="collectionList.length == 0" src="@/assets/images/environment/collage.png">
       <p @click="collection" v-if="collectionList.length == 0">收藏</p>
@@ -21,11 +19,13 @@ import {addCollection, getCollection, removeCollection} from '@/api/xjc-integrat
 import {ElMessage} from "element-plus";
 import {handleThemeStyle} from "@/utils/theme.js";
 import useSettingsStore from "@/store/modules/settings.js";
+import { defineExpose } from 'vue';
 const props = defineProps({
   collection: {
     contentType: null,
     contentId: null,
     contentVal:null,
+    source:null
   }
 })
 
@@ -40,71 +40,68 @@ function collection() {
     queryConnection()
   })
 }
-//查询详情中学校是否被加入对比列表
-function isContrast (){
-  let isValA = sessionStorage.getItem('contrastA') && JSON.parse(sessionStorage.getItem('contrastA')) || false
-  let isValB = sessionStorage.getItem('contrastB') && JSON.parse(sessionStorage.getItem('contrastB')) || false
-  // console.log('isValA',isValA.id,isValB.id,"isValB",props.collection.contentId)
-  // debugger;
-  if(isValA && props.collection.contentId === isValA.id){
-    isContrastVal.value = true;
-  }else if(isValB && props.collection.contentId === isValB.id){
-    isContrastVal.value = true;
+let SESSION_COLLECT_KEY = 'contrastList'
+function getSource (source){
+  console.log("11111",source);
+  if(props.collection.source === 'pro_details_video' || source ===  'pro_details_video'){
+    SESSION_COLLECT_KEY = 'majorList'
   }else {
+    SESSION_COLLECT_KEY = 'contrastList'
+  }
+}
+//查询详情中学校是否被加入对比列表
+function isContrast (val,source){
+  let collectArrayStr = window.sessionStorage.getItem(SESSION_COLLECT_KEY);
+  // 如果有值
+  if(collectArrayStr){
+    let collectArray = JSON.parse(collectArrayStr);
+    isContrastVal.value = collectArrayStr.includes(JSON.stringify(val.value));
+  }
+  // 如果没有值
+  else{
     isContrastVal.value = false;
   }
-  // console.log("isContrastVal.value",isContrastVal.value)
 }
+
 function contrastAdd(){
-  let isValA = sessionStorage.getItem('contrastA') || false;
-  let isValB = sessionStorage.getItem('contrastB')|| false;
-//加入对比；
- if(isValA && isValB){
-   ElMessage({
-     type: 'success',
-     message: '对比列表已有两组学校数据',
-   })
- }else if(isValA && !isValB){
-   sessionStorage.setItem('contrastB',JSON.stringify(props.collection.contentVal));
-   ElMessage({
-     type: 'success',
-     message: '加入对比成功，可以去对比列表查看',
-   })
- }else if(!isValA){
-   sessionStorage.setItem('contrastA',JSON.stringify(props.collection.contentVal));
-   ElMessage({
-     type: 'success',
-     message: '成功加入对比列表',
-   })
- }
-  isContrast()
+  let contrastArrayStr = sessionStorage.getItem(SESSION_COLLECT_KEY)
+  if(contrastArrayStr){
+    let contrastArray = JSON.parse(contrastArrayStr);
+    if(contrastArray.includes(JSON.stringify(props.collection.contentVal))){
+      ElMessage.error('已加入，不可以在加入对比列表')
+    }else{
+      if(contrastArray.length == 2){
+        ElMessage.error('对比列表已满')
+      }else{
+        contrastArray.push(props.collection.contentVal);
+        window.sessionStorage.setItem(SESSION_COLLECT_KEY,  JSON.stringify(contrastArray));
+        isContrastVal.value = true;
+        ElMessage.success('加入对比成功');
+      }
+    }
+  }
+  // 如果没有值
+  else{
+    let contrastArray = new Array();
+  contrastArray.push(props.collection.contentVal);
+  window.sessionStorage.setItem(SESSION_COLLECT_KEY, JSON.stringify(contrastArray));
+  isContrastVal.value = true;
+  ElMessage.success('加入对比成功');
+  }
 }
 function contrastCancel(){
-  let isValA = sessionStorage.getItem('contrastA') && JSON.parse(sessionStorage.getItem('contrastA')) || false;
-  let isValB = sessionStorage.getItem('contrastB') && JSON.parse(sessionStorage.getItem('contrastB'))|| false;
-  //取消对比；
-
-  if(isContrastVal.value){
-    // console.log("1",isValA,props.collection.contentId,)
-    if(isValA && props.collection.contentId === isValA.id){
-      sessionStorage.removeItem('contrastA');
+  let collectArrayStr = window.sessionStorage.getItem(SESSION_COLLECT_KEY);
+  // 如果有值
+  if(collectArrayStr){
+    let collectArray = JSON.parse(collectArrayStr);
+    if(collectArrayStr.includes(JSON.stringify(props.collection.contentVal))){
+      let index = collectArray.indexOf(props.collection.contentVal);
+      collectArray.splice(index, 1);
+      window.sessionStorage.setItem(SESSION_COLLECT_KEY, JSON.stringify(collectArray));
       isContrastVal.value = false;
-      // console.log("1")
-      ElMessage({
-        type: 'info',
-        message: '已取消对比',
-      })
-    }else if(isValB && props.collection.contentId === isValB.id){
-      sessionStorage.removeItem('contrastB');
-      isContrastVal.value = false;
-      // console.log("2")
-      ElMessage({
-        type: 'info',
-        message: '已取消对比',
-      })
+      ElMessage.success('取消对比成功')
     }
-  }console.log("isContrastVal",isContrastVal.value)
-  isContrast()
+  }
 }
 function queryConnection() {
   let data = {
@@ -116,9 +113,7 @@ function queryConnection() {
   })
 }
 onMounted(() => {
-  nextTick(() => {
-    isContrast()
-  })
+  getSource()
 })
 function cancle_collection() {
   let data = {
@@ -128,6 +123,9 @@ function cancle_collection() {
     queryConnection()
   })
 }
+defineExpose({
+  isContrast,getSource
+})
 
 </script>
 

src/views/xjc-integratedmachine/components/head_component.vue

@@ -16,13 +16,10 @@
         <el-button class="head-right-btn1" v-else @click="homeUrlTo">首页</el-button>
         <el-button class="head-right-btn2" @click="exit">退出登录</el-button>
       </div>
-<!--      </div>-->
     </div>
-
 </template>
 
 <script setup>
-
     import {ElMessage} from "element-plus";
     import {defineEmits} from "vue";
     const {proxy} = getCurrentInstance()
@@ -40,7 +37,6 @@
         router.go(-1);
       }
       emit('backTo');
-
     }
     function homeUrlTo() {
         router.push({
@@ -48,9 +44,15 @@
         })
     }
     function contrastTo(){
-      const isValA = sessionStorage.getItem('contrastA');
-      const isValB = sessionStorage.getItem('contrastB');
-      if(isValA && isValB){
+      let contrastList = [];
+      if(props.headinfo.contrastType === 'major'){
+        console.log("major")
+         contrastList = JSON.parse(sessionStorage.getItem('majorList'));
+      }else if(props.headinfo.contrastType === 'university'){
+        console.log("university")
+         contrastList = JSON.parse(sessionStorage.getItem('contrastList'));
+      }
+      if(contrastList.length <= 2 ){
        //暂无
       }else {
         ElMessage({
@@ -59,10 +61,20 @@
         })
         return;
       }
-      router.push({
-        path: '/xjc-integratedmachine/environment/contrast_data'
-      })
+
+      if(props.headinfo.contrastType === 'major'){
+        router.push({
+          path: '/xjc-integratedmachine/environment/contrast_major'
+        })
+      }else if(props.headinfo.contrastType === 'university'){
+        router.push({
+          path: '/xjc-integratedmachine/environment/contrast_university'
+        })
+      }
+
+
     }
+
     function exit() {
         proxy.$modal.confirm('您确认退出吗').then(function () {
             router.push({

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

@@ -1,5 +1,5 @@
 <template>
-  <div class="contrast_data">
+  <div class="contrast_university">
     <head-component :headinfo=headinfo @backTo="backTo"></head-component>
     <div class="page-content">
       <div class="content-left">
@@ -7,81 +7,84 @@
           <div :class="[onePage?'item-box-active':'item-box']" @click="showPage(1)">
             <img v-if="onePage" src="@/assets/images/environment/condition-search-h.png">
             <img v-else src="@/assets/images/environment/condition-search.png">
-            院校数据
+            基本信息
           </div>
           <div :class="[twoPage?'item-box-active':'item-box']" @click="showPage(2)">
             <img v-if="twoPage" src="@/assets/images/environment/score-h.png">
             <img v-else src="@/assets/images/environment/score.png">
-            录取分数线
+            主修课程
+          </div>
+          <div :class="[twoPage?'item-box-active':'item-box']" @click="showPage(3)">
+            <img v-if="twoPage" src="@/assets/images/environment/score-h.png">
+            <img v-else src="@/assets/images/environment/score.png">
+            专业解读
+          </div>
+          <div :class="[twoPage?'item-box-active':'item-box']" @click="showPage(4)">
+            <img v-if="twoPage" src="@/assets/images/environment/score-h.png">
+            <img v-else src="@/assets/images/environment/score.png">
+            就业前景与方向
+          </div>
+          <div :class="[twoPage?'item-box-active':'item-box']" @click="showPage(5)">
+            <img v-if="twoPage" src="@/assets/images/environment/score-h.png">
+            <img v-else src="@/assets/images/environment/score.png">
+            开设院校
           </div>
         </div>
       </div>
       <div class="content-right">
         <div class="one-page" v-show="onePage">
-          <table class="table">
-            <tr>
-              <td>大学名称</td>
-              <td>{{ contrastA.name }}</td>
-              <td>{{ contrastB.name }}</td>
+          <table class="table table-bordered">
+            <thead>
+            <tr class="one-tr">
+              <td class="first-title">专业名称</td>
+              <td v-for="(item,index) in contrastData" :key="index">{{ item.name }}</td>
             </tr>
-            <tr>
-              <td>基本信息</td>
-              <td class="text-td">
-                <p>创建时间：<span>{{ contrastA.ctime }}</span></p>
-                <p>所在地区：<span>{{ contrastA.areaname }}</span></p>
-                <p>院校隶属：<span>{{ contrastA.subjection }}</span></p>
-                <p class="text-td-p">院校类型：<span>  <dict-tag :options="school_category" :value="contrastA.categoryid"/></span></p>
-              </td>
-              <td class="text-td">
-                <p>创建时间：<span>{{ contrastA.ctime }}</span></p>
-                <p>所在地区：<span>{{ contrastA.areaname }}</span></p>
-                <p>院校隶属：<span>{{ contrastA.subjection }}</span></p>
-                <p class="text-td-p">院校类型：<span>  <dict-tag :options="school_category" :value="contrastA.categoryid"/></span></p>
+            </thead>
+            <tbody>
+            <tr v-show="false"></tr>
+            <tr class="two-tr">
+              <td>专业代码</td>
+              <td class="text-td" v-for="(item,index) in contrastData" :key="index">
+                <p>创建时间：<span>{{ item.ctime }}</span></p>
+                <p>所在地区：<span>{{ item.areaname }}</span></p>
+                <p>院校隶属：<span>{{ item.subjection }}</span></p>
+                <p class="text-td-p">院校类型：<span>  <dict-tag :options="school_category"
+                                                                :value="item.categoryid"/></span></p>
               </td>
-
             </tr>
             <tr>
-              <td>院校特色</td>
-              <td>
+              <td>学科门类</td>
+              <td v-for="(item,index) in contrastData" :key="index">
                 <div class="school-level-box">
-                  <p class="school-level" style="background-color: #B3FC7C" v-show="contrastA.nef==='1'">985</p>
-                  <p class="school-level" style="background-color: #BBF88D" v-show="contrastA.too==='1'">211</p>
-                  <p class="school-level" style="background-color: #8CE349" v-show="contrastA.istopschool==='1'">
+                  <p class="school-level" style="background-color: #B3FC7C" v-show="item.nef==='1'">985</p>
+                  <p class="school-level" style="background-color: #BBF88D" v-show="item.too==='1'">211</p>
+                  <p class="school-level" style="background-color: #8CE349" v-show="item.istopschool==='1'">
                     一流大学</p>
-                  <p class="school-level" style="background-color: #9DFF51" v-show="contrastA.istopsubject==='1'">
+                  <p class="school-level" style="background-color: #9DFF51" v-show="item.istopsubject==='1'">
                     一流学科</p>
-                  <p class="school-level" style="background-color: #8ADFC4" v-show="contrastA.self==='1'">强</p>
-                  <p class="school-level" style="background-color: #1EC590" v-show="contrastA.graduate==='1'">研</p>
+                  <p class="school-level" style="background-color: #8ADFC4" v-show="item.self==='1'">强</p>
+                  <p class="school-level" style="background-color: #1EC590" v-show="item.graduate==='1'">研</p>
                 </div>
               </td>
-              <td>
-                <div class="school-level-box">
-                  <p class="school-level" style="background-color: #B3FC7C" v-show="contrastA.nef==='1'">985</p>
-                  <p class="school-level" style="background-color: #BBF88D" v-show="contrastA.too==='1'">211</p>
-                  <p class="school-level" style="background-color: #8CE349" v-show="contrastA.istopschool==='1'">
-                    一流大学</p>
-                  <p class="school-level" style="background-color: #9DFF51" v-show="contrastA.istopsubject==='1'">
-                    一流学科</p>
-                  <p class="school-level" style="background-color: #8ADFC4" v-show="contrastA.self==='1'">强</p>
-                  <p class="school-level" style="background-color: #1EC590" v-show="contrastA.graduate==='1'">研</p>
-                </div>
+            </tr>
+            <tr>
+              <td>一级学科</td>
+              <td v-for="(item,index) in contrastData" class="text-td ">
+                <dict-tag :options="property" :value="item.property"/>
               </td>
             </tr>
             <tr>
-              <td>学校性质</td>
-              <td class="text-td "><dict-tag :options="property" :value="contrastA.property"/></td>
-              <td class="text-td"><dict-tag :options="property" :value="contrastA.property"/></td>
+              <td>授权学位</td>
+              <td v-for="(item,index) in contrastData" :key="index" class="text-td">{{ item.address }}</td>
             </tr>
             <tr>
-              <td>学校地址</td>
-              <td class="text-td">{{ contrastA.address }}</td>
-              <td class="text-td">{{ contrastA.address }}</td>
+              <td>修学年限</td>
+              <td v-for="(item,index) in contrastData" :key="index" class="text-td">{{ item.address }}</td>
             </tr>
+            </tbody>
           </table>
         </div>
         <div class="two-page" v-show="twoPage">
-       ///////
-          录取分数线
         </div>
       </div>
       <drag_component></drag_component>
@@ -188,23 +191,22 @@ function jumpTo(path) {
     query: {name: 123}
   })
 }
-function  backTo(){
+
+function backTo() {
   sessionStorage.removeItem('contrastA');
   sessionStorage.removeItem('contrastB');
 }
+
 onMounted(() => {
   setHeadinfo()
 
 })
-const contrastA = ref({})
-const contrastB = ref({})
 
+const contrastData = ref({})
 function getData() {
-  const isValA = sessionStorage.getItem('contrastA') && JSON.parse(sessionStorage.getItem('contrastA'));
-  const isValB = sessionStorage.getItem('contrastB') && JSON.parse(sessionStorage.getItem('contrastB'));
-  contrastA.value = isValA;
-  contrastB.value = isValB;
-  console.log("{{contrastA.name}}", contrastA.value, contrastB.value)
+  const contrastList = sessionStorage.getItem('contrastList') && JSON.parse(sessionStorage.getItem('contrastList'));
+  contrastData.value = contrastList;
+  console.log("{{contrastA.name}}", contrastData.value)
 }
 
 const universityList = ref([])
@@ -261,8 +263,13 @@ const showEducationlevel = ref(false)
 const showCharacteristic = ref(false)
 
 const {proxy} = getCurrentInstance()
-const {gk_province, educationlevel, characteristic,school_category,property} = proxy.useDict('gk_province', 'educationlevel','school_category', 'characteristic','property')
-
+const {
+  gk_province,
+  educationlevel,
+  characteristic,
+  school_category,
+  property
+} = proxy.useDict('gk_province', 'educationlevel', 'school_category', 'characteristic', 'property')
 
 
 function showAreaChooseHandler() {
@@ -319,7 +326,7 @@ p, div {
   padding: 0;
 }
 
-.contrast_data {
+.contrast_university {
   background: url('@/assets/images/login/login-home-background.png') no-repeat;
   background-size: 1920px 1080px;
   z-index: 10;
@@ -400,7 +407,9 @@ p, div {
           width: 1526px;
           height: 887px;
           margin-top: 25px;
-
+          tr>td{
+            height:119px !important;
+          }
           tr:nth-child(1) {
             font-weight: 400;
             font-size: 32px;
@@ -409,7 +418,6 @@ p, div {
 
             td:nth-child(1) {
               width: 290px;
-              height: 100px;
               background: #1E410E;
               border-radius: 32px 4px 4px 4px;
               border: 8px solid #E0EEF4;
@@ -418,7 +426,6 @@ p, div {
 
             td:nth-child(2) {
               width: 620px;
-              height: 100px;
               background: #1EC590;
               border-top: 8px solid #E0EEF4;
               border-right: 8px solid #E0EEF4;
@@ -427,7 +434,6 @@ p, div {
 
             td:nth-child(3) {
               width: 616px;
-              height: 119px;
               background: #8CE349;
               border-radius: 4px 32px 4px 4px;
               border-top: 8px solid #E0EEF4;
@@ -439,7 +445,6 @@ p, div {
 
           tr:nth-child(2) {
             td:nth-child(1) {
-              height: 290px;
               border-radius: 0px 0px 0px 0px;
               background: #1E410E;
               border-left: 8px solid #E0EEF4;
@@ -453,7 +458,6 @@ p, div {
 
             td:nth-child(2) {
               width: 620px;
-              height: 290px;
               background: #FFFFFF;
               border-radius: 4px 4px 4px 4px;
               //border-top: 8px solid #E0EEF4;
@@ -467,7 +471,6 @@ p, div {
 
             td:nth-child(3) {
               width: 620px;
-              height: 290px;
               background: #FFFFFF;
               border-radius: 4px 4px 4px 4px;
               border-bottom: 8px solid #E0EEF4;
@@ -482,7 +485,6 @@ p, div {
           tr:nth-child(3) {
             td:nth-child(1) {
               width: 290px;
-              height: 180px;
               background: #1E410E;
               border-radius: 4px 4px 4px 4px;
               border-left: 8px solid #E0EEF4;
@@ -496,7 +498,6 @@ p, div {
 
             td:nth-child(2) {
               width: 620px;
-              height: 210px;
               background: #FFFFFF;
               border-radius: 4px 4px 4px 4px;
               border-bottom: 8px solid #E0EEF4;
@@ -505,7 +506,6 @@ p, div {
 
             td:nth-child(3) {
               width: 620px;
-              height: 210px;
               background: #FFFFFF;
               border-radius: 4px 4px 4px 4px;
               border-bottom: 8px solid #E0EEF4;
@@ -516,7 +516,6 @@ p, div {
           tr:nth-child(4) {
             td:nth-child(1) {
               width: 290px;
-              height: 110px;
               background: #1E410E;
               border-radius: 4px 4px 4px 4px;
               border-left: 8px solid #E0EEF4;
@@ -531,7 +530,6 @@ p, div {
 
             td:nth-child(2) {
               width: 620px;
-              height: 119px;
               background: #FFFFFF;
               border-radius: 4px 4px 4px 4px;
               border-bottom: 8px solid #E0EEF4;
@@ -544,7 +542,6 @@ p, div {
 
             td:nth-child(3) {
               width: 620px;
-              height: 119px;
               background: #FFFFFF;
               border-radius: 4px 4px 4px 4px;
               border-bottom: 8px solid #E0EEF4;
@@ -559,7 +556,42 @@ p, div {
           tr:nth-child(5) {
             td:nth-child(1) {
               width: 290px;
-              height: 100px;
+              background: #1E410E;
+              //border-radius: 4px 4px 4px 32px;
+              border-left: 8px solid #E0EEF4;
+              border-right: 8px solid #E0EEF4;
+              border-bottom: 8px solid #E0EEF4;
+              font-weight: 400;
+              font-size: 32px;
+              color: #FFFFFF;
+              line-height: 16px;
+              text-align: center;
+            }
+
+            td:nth-child(2) {
+              width: 290px;
+              border-right: 8px solid #E0EEF4;
+              border-bottom: 8px solid #E0EEF4;
+              font-weight: 400;
+              font-size: 32px;
+              color: #333333;
+              line-height: 52px;
+            }
+
+            td:nth-child(3) {
+              width: 290px;
+              border-right: 8px solid #E0EEF4;
+              border-bottom: 8px solid #E0EEF4;
+              border-radius: 4px 4px 32px 4px;
+              font-weight: 400;
+              font-size: 32px;
+              color: #333333;
+              line-height: 52px;
+            }
+          }
+          tr:nth-child(6) {
+            td:nth-child(1) {
+              width: 290px;
               background: #1E410E;
               border-radius: 4px 4px 4px 32px;
               border-left: 8px solid #E0EEF4;
@@ -595,7 +627,6 @@ p, div {
               line-height: 52px;
             }
           }
-
           .school-level-box {
             display: flex;
             justify-content: left;
@@ -620,10 +651,13 @@ p, div {
           }
 
           .text-td {
-            text-align: center;
-            .text-td-p{
+            //text-align: center;
+            width: 300px;
+            //border: 1px solid;
+            padding-left: 150px;
+            .text-td-p {
               display: flex;
-              justify-content: center;
+              //justify-content: center;
             }
           }
         }
@@ -633,12 +667,13 @@ p, div {
         display: flex;
         flex-direction: column;
         align-items: center;
+
         .table {
           width: 1526px;
           height: 887px;
           margin-top: 25px;
 
-          tr:nth-child(1) {
+          .one-tr {
             font-weight: 400;
             font-size: 32px;
             color: #FFFFFF;
@@ -674,9 +709,9 @@ p, div {
             }
           }
 
-          tr:nth-child(2) {
+          .two-tr {
             td:nth-child(1) {
-              height: 290px;
+              height: 100px;
               border-radius: 0px 0px 0px 0px;
               background: #1E410E;
               border-left: 8px solid #E0EEF4;
@@ -687,7 +722,6 @@ p, div {
               color: #FFFFFF;
               text-align: center;
             }
-
             td:nth-child(2) {
               width: 620px;
               height: 290px;
@@ -701,7 +735,6 @@ p, div {
               color: #333333;
               line-height: 52px;
             }
-
             td:nth-child(3) {
               width: 620px;
               height: 290px;
@@ -792,10 +825,48 @@ p, div {
               line-height: 52px;
             }
           }
-
           tr:nth-child(5) {
             td:nth-child(1) {
               width: 290px;
+              height: 110px;
+              background: #1E410E;
+              border-radius: 4px 4px 4px 4px;
+              border-left: 8px solid #E0EEF4;
+              border-right: 8px solid #E0EEF4;
+              border-bottom: 8px solid #E0EEF4;
+              font-weight: 400;
+              font-size: 32px;
+              color: #FFFFFF;
+              line-height: 16px;
+              text-align: center;
+            }
+
+            td:nth-child(2) {
+              width: 290px;
+              height: 100px;
+              border-right: 8px solid #E0EEF4;
+              border-bottom: 8px solid #E0EEF4;
+              font-weight: 400;
+              font-size: 32px;
+              color: #333333;
+              line-height: 52px;
+            }
+
+            td:nth-child(3) {
+              width: 290px;
+              height: 100px;
+              border-right: 8px solid #E0EEF4;
+              border-bottom: 8px solid #E0EEF4;
+              border-radius: 4px 4px 32px 4px;
+              font-weight: 400;
+              font-size: 32px;
+              color: #333333;
+              line-height: 52px;
+            }
+          }
+          tr:nth-child(6) {
+            td:nth-child(1) {
+              width: 290px;
               height: 100px;
               background: #1E410E;
               border-radius: 4px 4px 4px 32px;
@@ -858,7 +929,8 @@ p, div {
 
           .text-td {
             text-align: center;
-            .text-td-p{
+
+            .text-td-p {
               display: flex;
               justify-content: center;
             }

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

@@ -8,7 +8,7 @@
             <div class="right-top">
               <p class="title">{{ entity.name }}</p>
               <div class="right-top-icon">
-<!--                <collectionComponent :collection="collection_data"></collectionComponent>-->
+                <collectionComponent ref="collectionRef" :collection="collection_data"></collectionComponent>
               </div>
             </div>
             <div class="content-info">
@@ -55,28 +55,28 @@
           </div>
           <div class="one-page" v-show="onePage">
             <p class="title">专业解读</p>
-            <div  v-html="entity.describe"></div>
+            <div class="info"  v-html="entity.describe"></div>
           </div>
           <div class="one-page" v-show="twoPage">
             <p class="title">开设院校</p>
-            <div v-for="(item,index) in kaishe_list">
+            <div class="info"  v-for="(item,index) in kaishe_list">
               {{ entity.name }}
             </div>
           </div>
           <div class="one-page" v-show="threePage">
             <p class="title">学科评估</p>
-            <div v-for="(item,index) in pinggu_list">
+            <div class="info"   v-for="(item,index) in pinggu_list">
               {{ item.name }}
             </div>
           </div>
           <div class="one-page" v-show="fourPage">
             <p class="title">就业前景</p>
-            <div v-html="entity.employment">
+            <div class="info"   v-html="entity.employment">
             </div>
           </div>
           <div class="one-page" v-show="fivePage">
             <p class="title">专业视频</p>
-            <div ref="videoContainer" class="video-container">
+            <div  ref="videoContainer" class="video-container"  v-if="entity.path">
               <video ref="videoPlayer" id="playerId" class="video-js vjs-default-skin" controls preload="auto"
                      :data-setup="{}">
                 <!-- 可以在这里插入source标签以指定你的视频源 -->
@@ -86,61 +86,24 @@
           </div>
         </div>
         </div>
-
-<!--      专业详情视频-->
-<!--      <collectionComponent :collection="collection"></collectionComponent>-->
-<!--      <br>-->
-<!--      <div>-->
-<!--        专业代码:{{ entity.code }},-->
-<!--        学历层次:-->
-<!--        <dict-tag :options="educationlevel" :value="entity.bkzk"/>-->
-<!--        ,休学年限{{ entity.years }},{{ entity.degree }}-->
-<!--      </div>-->
-<!--      <br>-->
-<!--      开设课程-->
-<!--      <br>-->
-<!--      <div>-->
-<!--        {{ entity.course }}-->
-<!--      </div>-->
-<!--      <br>-->
-<!--      相近专业-->
-<!--      <br>-->
-<!--      <div v-for="(item,index) in similar_list">-->
-<!--        {{ item.name }}-->
-<!--      </div>-->
-<!--      <br>-->
-
-<!--      <el-card style="width:80%;">-->
-<!--        <div @click="changeTab('zyjd')">专业解读</div>-->
-<!--        <div @click="changeTab('ksyx')">开设院校</div>-->
-<!--        <div @click="changeTab('xkpg')">学科评估</div>-->
-<!--        <div @click="changeTab('jyqj')">就业前景</div>-->
-<!--        <div @click="changeTab('zysp')">专业视频</div>-->
-<!--      </el-card>-->
-
-<!--      <div v-show="tabIndex == 'zyjd'" v-html="entity.describe"></div>-->
-<!--      <div v-show="tabIndex == 'ksyx'">-->
-<!--        <div v-for="(item,index) in kaishe_list">-->
-<!--          {{ entity.name }}-->
-<!--        </div>-->
-<!--      </div>-->
-<!--      <div v-show="tabIndex == 'xkpg'">-->
-<!--        <div v-for="(item,index) in pinggu_list">-->
-<!--          {{ item.name }}-->
-<!--        </div>-->
-<!--      </div>-->
-<!--      <div v-show="tabIndex == 'jyqj'" v-html="entity.employment">-->
-<!--      </div>-->
-<!--      <div v-show="tabIndex == 'zysp'">-->
-<!--        <div ref="videoContainer" class="video-container">-->
-<!--          <video ref="videoPlayer" id="playerId" class="video-js vjs-default-skin" controls preload="auto"-->
-<!--                 :data-setup="{}">-->
-<!--            &lt;!&ndash; 可以在这里插入source标签以指定你的视频源 &ndash;&gt;-->
-<!--            <source :src="entity.path" type="video/mp4">-->
-<!--          </video>-->
-<!--        </div>-->
-<!--      </div>-->
     </div>
+    <el-dialog
+        v-model="fivePage"
+        @before-close="dialogBeforeClose"
+        destroy-on-close
+        title="学校视频"
+        width="1832px"
+        height="915px"
+        center
+        align-center
+        v-if="entity.path"
+    >
+      <div class="video-content" >
+        <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>
 
@@ -152,6 +115,8 @@ import {specialtyDetail} from '@/api/xjc-integratedmachine/environment/specialty
 import {ref} from "vue";
 import headComponent from '@/views/xjc-integratedmachine/components/head_component.vue'
 import Drag_component from "@/views/xjc-integratedmachine/components/drag_component.vue";
+import {handleThemeStyle} from "@/utils/theme.js";
+import useSettingsStore from "@/store/modules/settings.js";
 
 const {proxy} = getCurrentInstance()
 const {educationlevel} = proxy.useDict('educationlevel')
@@ -176,34 +141,34 @@ function setHeadinfo(){
     backUrl : '/xjc-integratedmachine/environment/query_universitydb_conditions',
     homeUrl:'/xjc-integratedmachine/environment/index',
     contrast:true,
+    contrastType:'major'
   }
 }
+
 onMounted(() => {
   setHeadinfo()
+
 })
-function changeTab(path) {
-  tabIndex.value = path
-  if (path == 'zysp') {
-    const player = videojs(playerId, {autoplay: true});
-    player.src(entity.value.path);
-    player.on("ended", () => {
-    })
-  }
-}
 
 const param = route.query
 
-const collection = ref({
-  contentType: 2,
-  contentId: param.id
-})
 
 
 const entity = ref({})
 const kaishe_list = ref([])
 const pinggu_list = ref([])
 const similar_list = ref([])
-
+const collectionRef = ref(null)
+const collection_data = ref({})
+function setCollection_data(){
+  collection_data.value = {
+    contentType: 2,
+    contentId: param.id,
+    contentVal: entity.value,
+    source:'pro_details_video'
+  }
+  console.log("entity.value",entity.value)
+}
 function detail() {
   specialtyDetail({
     id: param.id
@@ -213,7 +178,14 @@ function detail() {
     pinggu_list.value = resp.pinggu_list
     similar_list.value = resp.similar_list
   })
+setTimeout(() => {
+    setCollection_data();
+    collectionRef.value.isContrast(entity.value);
+    collectionRef.value.getSource('pro_details_video');
+  }, 500);
 }
+
+
 const showPage = (val) => {
   if (val === 1) {
     onePage.value = true;
@@ -268,13 +240,18 @@ const showPage = (val) => {
     fourPage.value = false;
     fivePage.value = false;
   }
-  //清空数据
-  form.area = '';
-  form.areanam = '';
-  form.university = '';
-  form.categoryName = '';
 }
 detail()
+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;
+}
 
 
 </script>
@@ -308,20 +285,15 @@ p, div {
     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: 300px;
       display: flex;
-      justify-content: space-between;
-      //align-items: center;
       flex-direction: column;
       .top-content-right {
         margin-left: 45px;
-        width: 1630px;
+        width: 1782px;
         margin-left: 45px;
 
         .title {
@@ -329,14 +301,11 @@ p, div {
           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;
@@ -353,13 +322,6 @@ p, div {
 
         .text-box {
           width: 1124px;
-          border:1px solid;
-          //display: flex;
-          ////justify-content: space-between;
-          //align-items: center;
-          //flex-wrap: wrap;
-          //margin-top: 14px;
-
           p {
             margin-right: 20px;
           }
@@ -373,7 +335,6 @@ p, div {
           .right-top-icon {
             width: 200px;
             height: 68px;
-            border: 1px solid;
             display: flex;
             justify-content: space-between;
             margin-top: 24px;
@@ -393,7 +354,6 @@ p, div {
               img {
                 width: 36px;
                 height: 36px;
-                border: 1px solid;
               }
             }
           }
@@ -403,8 +363,6 @@ p, div {
 
       .content-info{
         display: flex;
-
-        //justify-content: space-around;
         p{
           width: 200px;
           margin-right: 10px;
@@ -416,7 +374,6 @@ p, div {
       }
       .info-box{
         margin-left: 33px;
-        height: 300px;
         .title {
           height: 40px;
           border-left: 8px #8CE349 solid;
@@ -432,13 +389,14 @@ p, div {
            font-weight: 400;
            font-size: 20px;
            color: #333333;
-          display: flex;
-          justify-content: space-around;
-          flex-wrap: wrap;
+           display: flex;
+           //justify-content: space-around;
+           flex-wrap: wrap;
 
           .info-item{
             width: 244px;
             height: 80px;
+            margin-left: 10px;
             background: #FFFFFF;
             border-radius: 5px 5px 5px 5px;
             border: 1px solid #A2F57F;
@@ -465,14 +423,10 @@ p, div {
 
   .bottom-content {
     margin-top: 10px;
-    //border: 1px solid;
-    //margin-top: 25px;
-    //width:100px;
-    height: 30px;
+    height: 500px;
     .tab-box {
       display: flex;
       padding-right: 279px;
-
       img {
         width: 36px;
         height: 36px;
@@ -526,13 +480,13 @@ p, div {
   //  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;
-  //}
+
+  .editor-content div,
+  .editor-content span,
+  .editor-content p {
+    text-indent: 2em !important;
+    text-align: left !important;
+  }
 }
 
 .one-page {
@@ -542,10 +496,8 @@ p, div {
   border-radius: 0px 0px 35px 35px;
   border: 1px solid #FFFFFF;
   overflow: auto;
-  padding-left: 33px;
-  padding-right: 33px;
   line-height: 32px;
-
+  padding-top: 10px;
   .title {
     height: 40px;
     border-left: 8px #8CE349 solid;
@@ -627,8 +579,6 @@ p, div {
   height: 800px;
   overflow: auto;
   .dict-box {
-    //border: 1px solid red;
-    //background: #1ab394;
     font-size: 24px;
     line-height: 34px;
     color: #333333;

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

@@ -106,7 +106,7 @@ div,p{
       .two-page-result {
         display: flex;
         flex-wrap: wrap;
-        justify-content: space-between;
+        //justify-content: space-between;
         align-items: center;
 
         .item-result-box-active {

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

@@ -103,7 +103,7 @@ div,p{
       .two-page-result {
         display: flex;
         flex-wrap: wrap;
-        justify-content: space-between;
+        //justify-content: space-between;
         align-items: center;
 
         .item-result-box-active {

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

@@ -9,7 +9,7 @@
             <div class="right-top">
               <p class="title">{{ entity.name }}</p>
               <div class="right-top-icon">
-                <collectionComponent :collection="collection_data"></collectionComponent>
+                <collectionComponent ref="collectionRef" :collection="collection_data"></collectionComponent>
               </div>
             </div>
             <div class="school-level-box">
@@ -154,6 +154,7 @@
       style="width: 90%;height: 910px;"
       center
       align-center
+      close-on-click-modal="false"
   >
     <div class="one-page" style="width: 1658px" v-show="sixPage">
       <div class="select-div">
@@ -191,6 +192,7 @@
       style="width: 90%;height: 910px;"
       center
       align-center
+      close-on-click-modal="false"
   >
     <div class="one-page" style="width: 1658px" v-show="fivePage">
       <div class="select-div">
@@ -218,7 +220,7 @@
   </el-dialog>
   <div>
     <!--招生地区-->
-    <el-dialog v-model="showAreaChoose" width="600px" append-to-body>
+    <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
@@ -329,6 +331,7 @@ function setHeadinfo(){
     backUrl : '/xjc-integratedmachine/environment/query_universitydb_conditions',
     homeUrl:'/xjc-integratedmachine/environment/index',
     contrast:true,
+    contrastType:'university',
   }
 }
 
@@ -338,6 +341,7 @@ function setCollection_data(){
     contentType: 1,
     contentId: param.id,
     contentVal: entity.value,
+    source:'university_details_video'
   }
 }
 
@@ -351,6 +355,7 @@ function detail() {
     //看看收藏
     queryConnection()
     setCollection_data()
+    collectionRef.value.isContrast(entity,);
   })
 }
 
@@ -552,14 +557,12 @@ const showPage = (val) => {
   form.university = '';
   form.categoryName = '';
 }
-
+const collectionRef = ref(null)
 onMounted(() => {
   proxy.getConfigKey('sys_resource_root2').then(res => {
     baseUrl.value = res.msg;
   })
-
   setHeadinfo()
-
 })
 </script>
 

vite.config.js

@@ -47,7 +47,7 @@ export default defineConfig(({ mode, command }) => {
         // https://cn.vitejs.dev/config/#server-proxy
         '/dev-api': {
           // target: 'http://localhost:8080',
-          target: 'http://192.168.3.100:8080',//临时11
+          target: 'http://192.168.3.169:8080',//临时11
           changeOrigin: true,
           rewrite: (p) => p.replace(/^\/dev-api/, '')
         }