院校库--列表 && 详情

src/api/webApi/career-course.js

@@ -122,3 +122,21 @@ export function evaluateType(params) {
     params: params
   })
 }
+
+// 排名筛选
+export function rankingFilter(params) {
+  return request({
+    url: '/front/university/getUniversitiesRankingFilter',
+    method: 'get',
+    params: params
+  })
+}
+
+// 排名列表
+export function universitiesRanking(params) {
+  return request({
+    url: '/front/university/getUniversitiesRanking',
+    method: 'get',
+    params: params
+  })
+}

src/views/career/plan/UniversitiesColleges.vue

@@ -1,5 +1,5 @@
 <template>
-  <div ref="UniversitiesColleges" class="app-container" v-loading="loading">
+  <div ref="UniversitiesColleges" class="app-container" >
     <el-card :style="{'background-image':backimg}" style="padding:30px;margin:10px 0;background-color:white;background-repeat: no-repeat;background-position: bottom right;">
       <p style="color:#A6A6A6;font-size:24px;font-weight:bold;">UNIVERSITIES AND COLLECGES</p>
       <p style="color:#414141;font-size:24px;font-weight:bold;">院校库</p>
@@ -7,82 +7,33 @@
     </el-card>
     <el-card style="background-color: #ffffff;font-size: 14px;padding:5px;">
       <div slot="header" class="radioInput" >
-        <span class="radioTitle" :class="filter_type == 'all'?'active' : ''">全部院校</span>
-        <span class="radioTitle" :class="filter_type == 'top'?'active' : ''">大学排名</span>
+        <span class="radioTitle" :class="filter_type == 'all'?'active' : ''" @click="filter_type= 'all'">全部院校</span>
+        <span class="radioTitle" :class="filter_type == 'top'?'active' : ''" @click="filter_type= 'top'">大学排名</span>
       </div>
-      <filter-form :filter="filter_form"></filter-form>
-      <mx-search-group justify="end"  v-model="collegeName" @search="clickSuffix">
-        <p>共 <span class="f-primary">{{pageForm.total}}</span> 条</p>
-      </mx-search-group>
-      <el-row class="mt10 ">
-        <div v-if="pageForm.total > 0">
-          <div class="list-wrap pl30">
-            <div class="list-item fx-row mb30" v-for="item in collegeList">
-              <div class="img" >
-                <img style="width: 100%;height: 100%" :src="item.logo" alt="">
-              </div>
-              <div class="info ml20">
-                <div class="college_name pointer f-333 f20 mb5" @click="toDetail(item)">{{item.name}}</div>
-                <div class="tags" v-if="item.features">
-                  <span class="mr5 el-tag el-tag--info el-tag--plain" v-for="feature in item.features.split(',')">{{ feature }}</span>
-                </div>
-                <div class="college-desc mt5 f14 f-666">
-                  <p>{{`${item.location} ${item.cityName} ${item.type} / ${item.natureTypeCN} / ${item.managerType} `}}</p>
-                </div>
-              </div>
-              <div class="heat f12 f-666">
-                <p>排名</p>
-                <p class="mt3">{{ `第${item.ranking}名 / 综合指数${item.comScore}` }}</p>
-              </div>
-              <div class="heat f12  f-666">
-                <p>热度</p>
-                <p class="mt3">{{ (item.hits/10000).toFixed(1) }}万</p>
-              </div>
-            </div>
-          </div>
-          <pagination class="mt10" :total="pageForm.total" :autoScroll="false" @pagination="onChangePage"
-                      :page.sync="pageForm.pageNum"
-                      :limit.sync="pageForm.pageSize"
-          ></pagination>
-        </div>
-
-        <evaluation-empty v-else shadow title="暂无数据"></evaluation-empty>
-      </el-row>
+      <keep-alive>
+        <all-university v-if="filter_type == 'all'"></all-university>
+      </keep-alive>
+      <keep-alive>
+        <rank-university v-if="filter_type == 'top'"></rank-university>
+      </keep-alive>
     </el-card>
   </div>
 </template>
 
 <script>
 import { mapState } from 'vuex';
-import UniversitiesTable from '@/views/career/components/UniversitiesTable';
-import FilterForm from '@/views/career/components/FilterForm';
-import { selectUniversityList } from '@/api/webApi/career-course'
-import MxSearchGroup from '@/components/MxSearch/mx-search-group'
+import AllUniversity from '@/views/career/plan/compoents/AllUniversity';
+import RankUniversity from '@/views/career/plan/compoents/RankUniversity';
 export default {
   name: "UniversitiesColleges",
-  components: { MxSearchGroup, UniversitiesTable,FilterForm },
+  components:{
+    AllUniversity,
+    RankUniversity
+  },
   data() {
     return {
       backimg: 'url(' + require('@/assets/images/career/icon_colleges.png') + ')',
-      filter_form:{
-        location:'',
-        natureTypeCN:'',
-        type:'',
-        level:'',
-        features:'',
-        name:''
-      },
-      filter_type:'all',
-      loading:false,
-      collegeName:'',
-      pageForm:{
-        pageSize:10,
-        pageNum:1,
-        total:0
-      },
-      filter_list:{},
-      collegeList:[],
-      headerFixed: true
+      filter_type:'all'
     }
   },
   computed: {
@@ -97,40 +48,9 @@ export default {
         })
       }
     },
-    filter_form:{
-      immediate: true,
-      deep:true,
-      handler(val) {
-          this.getUniversityList()
-      }
-    },
   },
   methods: {
-    toDetail(item) {
-      console.log(item)
-      this.$router.push({path:'/career/plan/UniversityDetail',query: {code:item.code}})
-    },
-    onChangePage(page) {
-      this.pageForm.pageSize = page.limit
-      this.pageForm.pageNum = page.page
-      this.getUniversityList()
-    },
-    clickSuffix() {
-      this.filter_form.name = this.collegeName
-    },
-    getUniversityList(){
-      this.loading = true
-      // console.log(params)
-      selectUniversityList({ ...this.filter_form,
-        pageNum:this.pageForm.pageNum,
-        pageSize:this.pageForm.pageSize,
-      }).then(res=>{
-        this.pageForm.total =res.total
-        this.collegeList =res.rows
-      }).finally(() => {
-        this.loading = false
-      })
-    },
+
   }
 }
 </script>
@@ -140,37 +60,16 @@ export default {
   background-color: var(--themeColor);
   margin-left: 0;
 }
-.heat{
-  width: 200px;
-  height: 72px;
-  padding-top: 22px;
-  color: #666;
-}
-.info{
-  width: 400px;
-}
-.img{
-  flex-shrink: 0;
-  width: 72px;
-  height: 72px;
-}
-.tags {
-  .el-tag{
-    height: 16px;
-    line-height: 16px;
-    font-size: 12px;
-    color: #909399;
-  }
-}
 .radioInput{
   background-color: #ffffff;
   padding:5px;
+  padding-left: 30px;
   .radioTitle{
     cursor: pointer;
     display: inline-block;
     width: 80px;
     font-size: 14px;
-    text-align: right;
+    text-align: center;
     &.active{
       color: #fff;
       border-radius: 4px ;
@@ -180,8 +79,5 @@ export default {
       background: #42b983;
     }
   }
-
 }
-
-
 </style>

src/views/career/plan/UniversitiesDetail.vue

@@ -1,5 +1,5 @@
 <template>
-  <div ref="universityDetail" id="universityDetail" class="app-container">
+  <div ref="universityDetail" id="universityDetail" class="app-container" v-loading="loading">
     <el-row :gutter="10" class="mt20 mb30">
       <el-col :span="12" class="fx-row ai-center">
         <div class="mr30">
@@ -8,9 +8,12 @@
         <div>
           <span class="f28 ">{{ baseInfo.name }}</span>
           <div class="mt5 mb5">
-            <el-tag class="mr5" size="mini" v-for="item in baseInfo.features ? baseInfo.features.split(',') : []">{{ item }}</el-tag>
+            <el-tag class="mr5" size="mini" v-for="item in baseInfo.features ? baseInfo.features.split(',') : []">
+              {{ item }}
+            </el-tag>
           </div>
-          <span class="f14 f-666 ">{{`${baseInfo.location} ${baseInfo.cityName} ${baseInfo.type} / ${baseInfo.natureTypeCN} / ${baseInfo.managerType} `}}</span>
+          <span class="f14 f-666 "
+          >{{ `${baseInfo.location} ${baseInfo.cityName} ${baseInfo.type} / ${baseInfo.natureTypeCN} / ${baseInfo.managerType} ` }}</span>
         </div>
       </el-col>
       <el-col :span="12" class="text-right">
@@ -18,112 +21,121 @@
       </el-col>
     </el-row>
     <div>
-        <div class="tabs-wrap mb20">
-          <span class="tabs-item" @click="tabActive = 0" :class="{'bg-primary':tabActive == 0}">院校概况</span>
-          <span class="tabs-item" @click="tabActive = 1" :class="{'bg-primary':tabActive == 1}">招生简章</span>
-          <span class="tabs-item" @click="tabActive = 2" :class="{'bg-primary':tabActive == 2}">院校风采</span>
-        </div>
-        <div v-if="tabActive == 0">
-          <el-row  class="fx-row">
-            <el-col :span="8"> <img src="https://i6.youzy.cn/basiclib/college/images/10003-647784f7.jpg" width="100%" alt=""></el-col>
-            <el-col :span="16">
-              <div class="f14 f-666 text-center fx-row">
-                <el-col :span="24" v-for="item in iconList">
-                  <img width="50px" :src="item.img" :alt="item.desc">
-                  <p class="mt10">{{ item.value }}</p>
-                </el-col>
-                <el-col :span="24" >
-                  <img width="50px" src="https://pv4y-pc.youzy.cn/static/img/icon_shijian@2x.8463f33f.png" alt="">
-                  <p class="mt10">{{`${baseInfo.location} ${baseInfo.cityName}`}}</p>
-                </el-col>
-              </div>
-              <div class="mt10  pl10 f14">
+      <div class="tabs-wrap mb20">
+        <span class="tabs-item" @click="tabActive = 0" :class="{'bg-primary':tabActive == 0}">院校概况</span>
+        <span class="tabs-item" @click="tabActive = 1" :class="{'bg-primary':tabActive == 1}">招生简章</span>
+        <span class="tabs-item" @click="tabActive = 2" :class="{'bg-primary':tabActive == 2}">院校风采</span>
+      </div>
+      <div v-if="tabActive == 0">
+        <el-row class="fx-row">
+          <el-col :span="8"><img src="https://i6.youzy.cn/basiclib/college/images/10003-647784f7.jpg" width="100%"
+                                 alt=""
+          ></el-col>
+          <el-col :span="16">
+            <div class="f14 f-666 text-center fx-row">
+              <el-col :span="24" v-for="item in iconList">
+                <img width="50px" :src="item.img" :alt="item.desc">
+                <p class="mt10">{{ item.value }}</p>
+              </el-col>
+              <el-col :span="24">
+                <img width="50px" src="https://pv4y-pc.youzy.cn/static/img/icon_shijian@2x.8463f33f.png" alt="">
+                <p class="mt10">{{ `${baseInfo.location} ${baseInfo.cityName}` }}</p>
+              </el-col>
+            </div>
+            <div class="mt10  pl10 f14">
                 <span class="info-tips"> {{
                     baseInfo.introduction
                   }}</span>
-                <p class="text-right mr10"><el-button type="text" @click="dialogVisible = true">全部</el-button></p>
-              </div>
-            </el-col>
-          </el-row>
-          <div style="width:70%">
-            <div class="mt20"  v-if="formatProfessions.length">
-              <p class="format-tit">特色专业</p>
-              <mx-table border :propDefines="professionsProps" :rows="formatProfessions">
-                <template #tmp="{row}">
-                  <p class="major-wrap">
-                    <a v-for="item in row.majors" @click="toMajorDetail(item.code)">{{item.name}}</a>
-                  </p>
-                </template>
-              </mx-table>
-            </div>
-            <div class="mt20" v-if="Object.keys(subjects).length">
-              <p class="format-tit">重点学科</p>
-              <mx-table border :prop-defines="keySubjectProp" :rows="subjects.keySubjects">
-                <template #tmp="{row}">
-                  <p class="major-wrap">
-                    <span v-for="item in row.subjects">{{item}}</span>
-                  </p>
-                </template>
-              </mx-table>
-            </div>
-            <div class="mt20" v-if="Object.keys(subjects).length">
-              <p class="format-tit">双一流学科</p>
-              <el-select v-model="activeSylId" placeholder="placeholder">
-                <el-option
-                  v-for="item in subjects.sylSubjectsGroup"
-                  :key="item.id"
-                  :label="item.evaluations"
-                  :value="item.id"
-                >
-                </el-option>
-              </el-select>
-              <mx-table border class="mt10" :prop-defines="activeSyl.col"   :rows="activeSyl.row">
-                <template #tmp="{row}">
-                  <p class="major-wrap">
-                    <span v-for="item in row.subjects">{{item}}</span>
-                  </p>
-                </template>
-              </mx-table>
-            </div>
-            <div class="mt20" v-if="subjectevaluates.length">
-              <p class="format-tit">学科评估</p>
-              <el-select v-model="evaluate_type" placeholder="placeholder">
-                <el-option
-                  v-for="item in evaluateTypes"
-                  :key="item.dictValue"
-                  :label="item.dictLabel"
-                  :value="item.dictValue"
-                >
-                </el-option>
-              </el-select>
-              <mx-table border class="mt10" :prop-defines="activeEvaluate.col" :rows="activeEvaluate.row">
-                <template #level="{row}">
-                  <p class="major-wrap" v-if="row.level.length">
-                    <span v-for="item in row.level">{{item.name}}{{item.level}}</span>
-                  </p>
-                  <p v-else>
-                    暂无数据
-                  </p>
-                </template>
-              </mx-table>
-            </div>
-            <div class="mt20">
-              <p class="format-tit">院系设置</p>
-              <mx-table border :propDefines="collegeProps" :rows="departments">
-                <template #tmp="{row}">
-                  <p class="major-wrap">
-                    <span v-for="item in row.departmentMajor">{{item.name}}</span>
-                  </p>
-                </template>
-              </mx-table>
+              <p class="text-right mr10">
+                <el-button type="text" @click="dialogVisible = true">全部</el-button>
+              </p>
             </div>
+          </el-col>
+        </el-row>
+        <div style="width:70%">
+          <div class="mt20" v-if="formatProfessions.length">
+            <p class="format-tit">特色专业</p>
+            <mx-table border :propDefines="professionsProps" :rows="formatProfessions">
+              <template #tmp="{row}">
+                <p class="major-wrap">
+                  <a v-for="item in row.majors" @click="toMajorDetail(item.code)">{{ item.name }}</a>
+                </p>
+              </template>
+            </mx-table>
+          </div>
+          <div class="mt20" v-if="Object.keys(subjects).length">
+            <p class="format-tit">重点学科</p>
+            <mx-table border :prop-defines="keySubjectProp" :rows="subjects.keySubjects">
+              <template #tmp="{row}">
+                <p class="major-wrap">
+                  <span v-for="item in row.subjects">{{ item }}</span>
+                </p>
+              </template>
+            </mx-table>
+          </div>
+          <div class="mt20" v-if="Object.keys(subjects).length">
+            <p class="format-tit">双一流学科</p>
+            <el-select v-model="activeSylId" placeholder="placeholder">
+              <el-option
+                v-for="item in subjects.sylSubjectsGroup"
+                :key="item.id"
+                :label="item.evaluations"
+                :value="item.id"
+              >
+              </el-option>
+            </el-select>
+            <mx-table border class="mt10" :prop-defines="activeSyl.col" :rows="activeSyl.row">
+              <template #tmp="{row}">
+                <p class="major-wrap">
+                  <span v-for="item in row.subjects">{{ item }}</span>
+                </p>
+              </template>
+            </mx-table>
+          </div>
+          <div class="mt20" v-if="subjectevaluates.length">
+            <p class="format-tit">学科评估</p>
+            <el-select v-model="evaluate_type" placeholder="placeholder">
+              <el-option
+                v-for="item in evaluateTypes"
+                :key="item.dictValue"
+                :label="item.dictLabel"
+                :value="item.dictValue"
+              >
+              </el-option>
+            </el-select>
+            <mx-table border class="mt10" :prop-defines="activeEvaluate.col" :rows="activeEvaluate.row">
+              <template #level="{row}">
+                <p class="major-wrap" v-if="row.level.length">
+                  <span v-for="item in row.level">{{ item.name }}{{ item.level }}</span>
+                </p>
+                <p v-else>
+                  暂无数据
+                </p>
+              </template>
+            </mx-table>
+          </div>
+          <div class="mt20">
+            <p class="format-tit">院系设置</p>
+            <mx-table border :propDefines="collegeProps" :rows="departments">
+              <template #tmp="{row}">
+                <p class="major-wrap">
+                  <span v-for="item in row.departmentMajor">{{ item.name }}</span>
+                </p>
+              </template>
+            </mx-table>
           </div>
-
         </div>
-        <!--  招生简章-->
+
+      </div>
+      <!--  招生简章-->
+      <keep-alive>
         <enroll-list :code="code" v-if="tabActive == 1"></enroll-list>
-        <!--  院校风采-->
-        <university-style  :code="code" v-if="tabActive == 2"></university-style>
+      </keep-alive>
+      <!--  院校风采-->
+      <keep-alive>
+        <university-style :code="code" v-if="tabActive == 2"></university-style>
+      </keep-alive>
+
     </div>
     <el-dialog
       :visible.sync="dialogVisible"
@@ -131,7 +143,7 @@
     >
       <span class="f20 f-666">{{ baseInfo.name }}院校介绍</span>
       <div>
-        {{baseInfo.introduction}}
+        {{ baseInfo.introduction }}
       </div>
       <span slot="footer" class="dialog-footer">
         <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
@@ -147,60 +159,61 @@ import { evaluateType, saveUniversitiesHits, selectUniversityDetail } from '@/ap
 
 export default {
   name: 'UniversityDetail',
-  components: {EnrollList,UniversityStyle},
+  components: { EnrollList, UniversityStyle },
   data() {
     return {
       tabActive: 0,
-      baseInfo:'',
-      departments:[],
+      baseInfo: '',
+      departments: [],
       dialogVisible: false,
-      professions:{},
-      subjectevaluates:[],
-      evaluateTypes:[],
-      evaluate_type:'',
-      professionsProps:{
+      professions: {},
+      subjectevaluates: [],
+      evaluateTypes: [],
+      evaluate_type: '',
+      loading:false,
+      professionsProps: {
         level: {
-          label:'专业层次',
-          width:'200'
+          label: '专业层次',
+          width: '200'
         },
         count: {
-          label:'数量',
-          width:'100'
+          label: '数量',
+          width: '100'
         },
         majors: {
-          label:'专业',
+          label: '专业',
           slot: 'tmp',
-          align:"left"
-        },
+          align: 'left'
+        }
       },
-      subjects:'',
-      code:'',
+      subjects: '',
+      code: '',
       activeSylId: '',
-      collegeProps:{
+      collegeProps: {
         name: {
-          label:'学院',
-          width:'200'
+          label: '学院',
+          width: '200'
         },
         departmentMajor: {
-          label:'包含专业',
+          label: '包含专业',
           slot: 'tmp',
-          align:"left"
-        },
+          align: 'left'
+        }
       },
-      keySubjectProp:{
-        typeName:{
-          label:'类别',
-          width:'100'
-        },
-        subjects:{
-          label:'专业',
-          slot:'tmp',
-          align:'left'
+      keySubjectProp: {
+        typeName: {
+          label: '类别',
+          width: '100'
         },
-        category:{
-          label:'学科类别',
-          width:'100'
+        subjects: {
+          label: '专业',
+          slot: 'tmp',
+          align: 'left'
         },
+        category: {
+          label: '学科类别',
+          width: '100'
+        }
       }
     }
   },
@@ -211,7 +224,7 @@ export default {
     this.getEvaluateType()
   },
   computed: {
-    formatProfessions(){
+    formatProfessions() {
       const arr = []
       for (const key in this.professions) {
         console.log(key)
@@ -225,81 +238,85 @@ export default {
       return arr
     },
     activeEvaluate() {
-      const currentRow = this.subjectevaluates.filter(item => {return item.extTypeId == this.evaluate_type})
+      const currentRow = this.subjectevaluates.filter(item => {
+        return item.extTypeId == this.evaluate_type
+      })
       const row = {
         count: currentRow.length || '-',
-        level: currentRow,
+        level: currentRow
       }
       return {
         row: [row],
         col: {
-          count:{
-            label:'数量',
-            width:'100'
+          count: {
+            label: '数量',
+            width: '100'
           },
-          level:{
-            label:' 专业评级',
-            align:'left',
-            slot:'level'
+          level: {
+            label: ' 专业评级',
+            align: 'left',
+            slot: 'level'
           }
         }
       }
     },
     activeSyl() {
-      if(!Object.keys(this.subjects).length) return {}
+      if (!Object.keys(this.subjects).length) return {}
       // const col = this.
-      const row = this.subjects.sylSubjectsGroup.find(item => {return item.id == this.activeSylId})
+      const row = this.subjects.sylSubjectsGroup.find(item => {
+        return item.id == this.activeSylId
+      })
       return {
         col: {
           subjectCount: {
-            label:'数量',
-            width: 100,
+            label: '数量',
+            width: 100
           },
           subjects: {
-            label:'学科',
-            slot:'tmp',
-            align:"left"
+            label: '学科',
+            slot: 'tmp',
+            align: 'left'
           },
           typeName: {
-            label:'类别',
-            width:'100'
+            label: '类别',
+            width: '100'
           }
         },
-        row:[row]
+        row: [row]
       }
     },
     iconList() {
-      const baseInfo  = this.baseInfo
+      const baseInfo = this.baseInfo
       return [
         {
           img: 'https://pv4y-pc.youzy.cn/static/img/icon_shijian@2x.8463f33f.png',
           value: `${baseInfo.createdYear}年`,
-          desc:'创办时间'
+          desc: '创办时间'
         },
         {
           img: 'https://pv4y-pc.youzy.cn/static/img/icon_shijian@2x.8463f33f.png',
           value: baseInfo.natureTypeCN,
-          desc:'办学类型'
+          desc: '办学类型'
         },
         {
           img: 'https://pv4y-pc.youzy.cn/static/img/icon_shijian@2x.8463f33f.png',
           value: baseInfo.type,
-          desc:'院校类型'
+          desc: '院校类型'
         },
         {
           img: 'https://pv4y-pc.youzy.cn/static/img/icon_shijian@2x.8463f33f.png',
           value: baseInfo.managerType,
-          desc:'所属部门'
+          desc: '所属部门'
         },
         {
           img: 'https://pv4y-pc.youzy.cn/static/img/icon_shijian@2x.8463f33f.png',
           value: baseInfo.level,
-          desc:'学历层次'
+          desc: '学历层次'
         },
         {
           img: 'https://pv4y-pc.youzy.cn/static/img/icon_shijian@2x.8463f33f.png',
           value: `${baseInfo.location} ${baseInfo.cityName}`,
-          desc:'所处地'
+          desc: '所处地'
         }
       ]
     }
@@ -307,29 +324,32 @@ export default {
   watch: {},
   methods: {
     getEvaluateType() {
-      evaluateType({code:this.code}).then(res => {
+      evaluateType({ code: this.code }).then(res => {
         this.evaluateTypes = res.data
         this.evaluate_type = res.data[0].dictValue
         console.log(res)
       })
     },
     toMajorDetail(code) {
-      this.$router.push({path:'/career/plan/MajorDetail',query:{code:code}})
+      this.$router.push({ path: '/career/plan/MajorDetail', query: { code: code } })
     },
     getHit() {
-      saveUniversitiesHits({code:this.code}).then(res => {
+      saveUniversitiesHits({ code: this.code }).then(res => {
         console.log(res)
       })
     },
     getDetail() {
-      selectUniversityDetail({code: this.code}).then(res => {
+      this.loading = true
+      selectUniversityDetail({ code: this.code }).then(res => {
         this.baseInfo = res.data.baseInfo
         this.departments = res.data.departments
         this.professions = res.data.professions
         this.subjects = res.data.subjects
         this.subjectevaluates = res.data.subjectevaluates
-        this.activeSylId = this.subjects.sylSubjectsGroup? this.subjects.sylSubjectsGroup[0].id : ''
+        this.activeSylId = this.subjects.sylSubjectsGroup ? this.subjects.sylSubjectsGroup[0].id : ''
         console.log(res)
+      }).finally(_=>{
+        this.loading = false
       })
     }
   }
@@ -341,6 +361,7 @@ export default {
   .tabs-wrap {
     border-bottom: 1px solid #42b983;
     height: 40px;
+
     .tabs-item {
       cursor: pointer;
       padding: 0 33px;
@@ -358,34 +379,40 @@ export default {
       }
     }
   }
-  .format-tit{
+
+  .format-tit {
     border-left: 4px solid #47C6A2;
     padding-left: 10px;
     margin-bottom: 20px;
     font-size: 20px;
   }
-  .info-tips{
-    overflow : hidden;
+
+  .info-tips {
+    overflow: hidden;
     text-overflow: ellipsis;
     display: -webkit-box;
     -webkit-line-clamp: 4;
     -webkit-box-orient: vertical;
     word-wrap: break-word;
   }
-  .major-wrap{
+
+  .major-wrap {
     text-align: left;
-    span{
+
+    span {
       display: inline-block;
       margin-right: 20px;
       margin-top: 10px;
       margin-bottom: 10px;
     }
-    a{
+
+    a {
       display: inline-block;
       margin-right: 20px;
       margin-top: 10px;
       margin-bottom: 10px;
-      &:hover{
+
+      &:hover {
         color: #42b983;
       }
     }

src/views/career/plan/compoents/AllUniversity.vue

@@ -0,0 +1,135 @@
+<template>
+  <div v-loading="loading">
+      <filter-form :filter="filter_form"></filter-form>
+      <mx-search-group justify="end"  v-model="collegeName" @search="clickSuffix">
+        <p>共 <span class="f-primary">{{pageForm.total}}</span> 条</p>
+      </mx-search-group>
+      <el-row class="mt10 ">
+        <div v-if="pageForm.total > 0">
+          <div class="list-wrap pl30">
+            <div class="list-item fx-row mb30" v-for="item in collegeList">
+              <div class="img" >
+                <img style="width: 100%;height: 100%" :src="item.logo" alt="">
+              </div>
+              <div class="info ml20">
+                <div class="college_name pointer f-333 f20 mb5" @click="toDetail(item)">{{item.name}}</div>
+                <div class="tags" v-if="item.features">
+                  <span class="mr5 el-tag el-tag--info el-tag--plain" v-for="feature in item.features.split(',')">{{ feature }}</span>
+                </div>
+                <div class="college-desc mt5 f14 f-666">
+                  <p>{{`${item.location} ${item.cityName} ${item.type} / ${item.natureTypeCN} / ${item.managerType} `}}</p>
+                </div>
+              </div>
+              <div class="heat f12 f-666">
+                <p>排名</p>
+                <p class="mt3">{{ `第${item.ranking}名 / 综合指数${item.comScore}` }}</p>
+              </div>
+              <div class="heat f12  f-666">
+                <p>热度</p>
+                <p class="mt3">{{ (item.hits/10000).toFixed(1) }}万</p>
+              </div>
+            </div>
+          </div>
+          <pagination class="mt10" :total="pageForm.total" :autoScroll="false" @pagination="onChangePage"
+                      :page.sync="pageForm.pageNum"
+                      :limit.sync="pageForm.pageSize"
+          ></pagination>
+        </div>
+
+        <evaluation-empty v-else shadow title="暂无数据"></evaluation-empty>
+      </el-row>
+  </div>
+</template>
+
+<script>
+import FilterForm from '@/views/career/components/FilterForm';
+import { selectUniversityList } from '@/api/webApi/career-course'
+import MxSearchGroup from '@/components/MxSearch/mx-search-group'
+export default {
+  components: { MxSearchGroup,FilterForm },
+  data() {
+    return {
+      filter_form:{
+        location:'',
+        natureTypeCN:'',
+        type:'',
+        level:'',
+        features:'',
+        name:''
+      },
+      loading:false,
+      collegeName:'',
+      pageForm:{
+        pageSize:10,
+        pageNum:1,
+        total:0
+      },
+      filter_list:{},
+      collegeList:[],
+    }
+  },
+  watch: {
+    filter_form:{
+      immediate: true,
+      deep:true,
+      handler(val) {
+        this.getUniversityList()
+      }
+    },
+  },
+  methods: {
+    toDetail(item) {
+      console.log(item)
+      this.$router.push({path:'/career/plan/UniversityDetail',query: {code:item.code}})
+    },
+    onChangePage(page) {
+      this.pageForm.pageSize = page.limit
+      this.pageForm.pageNum = page.page
+      this.getUniversityList()
+    },
+    clickSuffix() {
+      this.filter_form.name = this.collegeName
+    },
+    getUniversityList(){
+      this.loading = true
+      // console.log(params)
+      selectUniversityList({ ...this.filter_form,
+        pageNum:this.pageForm.pageNum,
+        pageSize:this.pageForm.pageSize,
+      }).then(res=>{
+        this.pageForm.total =res.total
+        this.collegeList =res.rows
+      }).finally(() => {
+        this.loading = false
+      })
+    },
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.heat{
+  width: 200px;
+  height: 72px;
+  padding-top: 22px;
+  color: #666;
+}
+.info{
+  width: 400px;
+}
+.img{
+  flex-shrink: 0;
+  width: 72px;
+  height: 72px;
+}
+.tags {
+  .el-tag{
+    height: 16px;
+    line-height: 16px;
+    font-size: 12px;
+    color: #909399;
+  }
+}
+
+
+</style>

src/views/career/plan/compoents/EnrollList.vue

@@ -1,6 +1,6 @@
 <template>
-   <div v-loading="loading">
-     <div v-if="!showDetail">
+   <div >
+     <div v-if="!showDetail" v-loading="loading">
        <mx-search-group v-model="title" :span="8" placeholder="请输入内容" @search="getEnrollBrochure">
          <div class="f-666 f14 ml10">
            共 <span class="f-primary">{{ total }}</span>  条

src/views/career/plan/compoents/RankUniversity.vue

@@ -0,0 +1,211 @@
+<template>
+  <div  v-loading="loading">
+    <div class="filter">
+      <el-row class="radioInput">
+        <div>
+          <span class="radiaTitle">排名类型:</span>
+        </div>
+        <el-radio-group v-model="filter_form.type">
+          <el-radio-button v-for="item in filter_list.types" :key="item" :label="item" style="margin-bottom:10px"
+          ></el-radio-button>
+        </el-radio-group>
+      </el-row>
+      <el-row class="radioInput">
+        <div>
+          <span class="radiaTitle">排名年份:</span>
+        </div>
+        <el-radio-group v-model="filter_form.year">
+          <el-radio-button v-for="item in filter_list.years" :key="item" :label="item" style="margin-bottom:10px"
+          ></el-radio-button>
+        </el-radio-group>
+      </el-row>
+      <mx-search-group justify="end"  v-model="collegeName" @search="clickSuffix">
+        <p>共 <span class="f-primary">{{pageForm.total}}</span> 条</p>
+      </mx-search-group>
+    </div>
+    <el-row class="mt10 ">
+      <div v-if="pageForm.total > 0">
+        <div class="list-wrap pl30">
+          <div class="list-item fx-row mb30" v-for="item in collegeList">
+            <div class="img" >
+              <img style="width: 100%;height: 100%" :src="item.universities.logo" alt="">
+            </div>
+            <div class="info ml20">
+              <div class="college_name pointer f-333 f20 mb5" @click="toDetail(item)">{{item.collegeName}}</div>
+              <div class="tags" v-if="item.universities.features">
+                <span class="mr5 el-tag el-tag--info el-tag--plain" v-for="feature in item.universities.features.split(',')">{{ feature }}</span>
+              </div>
+              <div class="college-desc mt5 f14 f-666">
+                <p>{{`${item.universities.location} ${item.universities.cityName} ${item.universities.type} / ${item.universities.natureTypeCN} / ${item.universities.managerType} `}}</p>
+              </div>
+            </div>
+            <div class="heat f12 f-666">
+              <p>综合指数</p>
+              <p class="mt3">{{item.universities.comScore }}</p>
+            </div>
+            <div class="heat f12  f-666">
+              <p>热度</p>
+              <p class="mt3">{{ (item.universities.hits/10000).toFixed(1) }}万</p>
+            </div>
+          </div>
+        </div>
+        <pagination class="mt10" :total="pageForm.total" :autoScroll="false" @pagination="onChangePage"
+                    :page.sync="pageForm.pageNum"
+                    :limit.sync="pageForm.pageSize"
+        ></pagination>
+      </div>
+
+      <evaluation-empty v-else shadow title="暂无数据"></evaluation-empty>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import { mapState } from 'vuex';
+import { rankingFilter,universitiesRanking } from '@/api/webApi/career-course'
+import MxSearchGroup from '@/components/MxSearch/mx-search-group'
+export default {
+  components: { MxSearchGroup },
+  data() {
+    return {
+      filter_form:{
+        type:'',
+        year:'',
+        name:''
+      },
+      loading:false,
+      pageForm:{
+        pageSize:10,
+        pageNum:1,
+        total:0
+      },
+      collegeName: '',
+      filter_list:{},
+      collegeList:[],
+    }
+  },
+  created() {
+    this.getRankingFilter()
+  },
+  watch: {
+    filter_form:{
+      immediate:false,
+      deep:true,
+      handler(val) {
+        console.log(111111111)
+        console.log(val)
+        this.getUniversitiesRanking()
+      }
+    },
+  },
+  methods: {
+    clickSuffix() {
+      this.filter_form.name = this.collegeName
+    },
+     getRankingFilter() {
+       rankingFilter().then(res =>{
+        this.filter_list = res.data
+        this.filter_form.type = res.data.types[0]
+        this.filter_form.year = res.data.years[0]
+        console.log(res)
+      })
+    },
+    getUniversitiesRanking(){
+      this.loading = true
+      universitiesRanking({...this.filter_form, pageNum:this.pageForm.pageNum,
+        pageSize:this.pageForm.pageSize,}).then(res =>{
+          this.collegeList  =res.rows
+          this.pageForm.total = res.total
+        console.log(res)
+      }).finally(_=>{
+        this.loading = false
+      })
+    },
+    toDetail(item) {
+      console.log(item)
+      this.$router.push({path:'/career/plan/UniversityDetail',query: {code:item.collegeCode}})
+    },
+    onChangePage(page) {
+      this.pageForm.pageSize = page.limit
+      this.pageForm.pageNum = page.page
+      this.getUniversitiesRanking()
+    },
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.heat{
+  width: 200px;
+  height: 72px;
+  padding-top: 22px;
+  color: #666;
+}
+.info{
+  width: 400px;
+}
+.img{
+  flex-shrink: 0;
+  width: 72px;
+  height: 72px;
+}
+.tags {
+  .el-tag{
+    height: 16px;
+    line-height: 16px;
+    font-size: 12px;
+    color: #909399;
+  }
+}
+.radioInput ::v-deep {
+  display: flex;
+
+  .el-radio-button .el-radio-button__inner {
+    border-radius: 4px !important;
+    border: none;
+    padding: 5px 10px !important;
+    font-weight: 400;
+    font-family: PingFangSC-Regular, PingFang SC;
+  }
+
+  .el-radio-button__orig-radio:checked + .el-radio-button__inner {
+    box-shadow: none;
+  }
+
+  .radiaTitle {
+    display: inline-block;
+    width: 80px;
+    font-size: 14px;
+    text-align: right;
+    margin-top: 2px;
+    margin-right: 10px;
+  }
+}.radioInput ::v-deep {
+   display: flex;
+
+   .el-radio-button .el-radio-button__inner {
+     border-radius: 4px !important;
+     border: none;
+     padding: 5px 10px !important;
+     font-weight: 400;
+     font-family: PingFangSC-Regular, PingFang SC;
+   }
+
+   .el-radio-button__orig-radio:checked + .el-radio-button__inner {
+     box-shadow: none;
+   }
+
+   .radiaTitle {
+     display: inline-block;
+     width: 80px;
+     font-size: 14px;
+     text-align: right;
+     margin-top: 2px;
+     margin-right: 10px;
+   }
+ }
+.radioInput ::v-deep {
+  background-color: #ffffff;font-size: 14px;padding:5px;
+}
+
+</style>

src/views/career/plan/compoents/UniversityStyle.vue

@@ -1,26 +1,26 @@
 <template>
   <div class="univerty" v-loading="loading">
     <!-- VR -->
-<!--    <div class="image-item">-->
-<!--      <div class="cover-image vr" >-->
-<!--          <div class="colleges-imgs-mask">-->
-<!--            <i class="iconfont icon-vr" style="font-size: 28px"></i>-->
-<!--          </div>-->
-<!--      </div>-->
-<!--      <p class="mt15 text-overflow-ellipsis f14 lh20">VR校园</p>-->
-<!--    </div>-->
-<!--    &lt;!&ndash; 视频 &ndash;&gt;-->
-<!--    <div class="image-item">-->
-<!--      <div class="cover-image video" >-->
-<!--        <div class="colleges-imgs-mask">-->
-<!--          <i class="iconfont icon-bofang" style="font-size: 28px"></i>-->
-<!--        </div>-->
-<!--      </div>-->
-<!--      <p class="mt15 text-overflow-ellipsis f14 lh20">清华大学</p>-->
-<!--    </div>-->
-<!--     图片列表-->
+    <!--    <div class="image-item">-->
+    <!--      <div class="cover-image vr" >-->
+    <!--          <div class="colleges-imgs-mask">-->
+    <!--            <i class="iconfont icon-vr" style="font-size: 28px"></i>-->
+    <!--          </div>-->
+    <!--      </div>-->
+    <!--      <p class="mt15 text-overflow-ellipsis f14 lh20">VR校园</p>-->
+    <!--    </div>-->
+    <!--    &lt;!&ndash; 视频 &ndash;&gt;-->
+    <!--    <div class="image-item">-->
+    <!--      <div class="cover-image video" >-->
+    <!--        <div class="colleges-imgs-mask">-->
+    <!--          <i class="iconfont icon-bofang" style="font-size: 28px"></i>-->
+    <!--        </div>-->
+    <!--      </div>-->
+    <!--      <p class="mt15 text-overflow-ellipsis f14 lh20">清华大学</p>-->
+    <!--    </div>-->
+    <!--     图片列表-->
     <div class="image-item" v-for="item in senceList">
-        <el-image class="cover-image"  fit="fill" :src="item.url" :preview-src-list="srcList"></el-image>
+      <el-image class="cover-image" fit="fill" :src="item.url" :preview-src-list="srcList"></el-image>
       <p class="mt15 text-overflow-ellipsis f14 lh20">{{ item.description }}</p>
     </div>
   </div>
@@ -31,10 +31,10 @@
 import { universitiesStyle } from '@/api/webApi/career-course'
 
 export default {
-  props:{
-    code:{
-      type:String || Number,
-      default:'',
+  props: {
+    code: {
+      type: String || Number,
+      default: ''
     }
   },
   created() {
@@ -43,46 +43,45 @@ export default {
   data() {
     return {
       senceList: [],
-      loading:false
+      loading: false
     }
   },
-  computed:{
+  computed: {
     srcList() {
-      if(!this.senceList.length) return []
+      if (!this.senceList.length) return []
       return this.senceList.map(item => {
         return item.url
       })
     }
   },
-  methods:{
-    getUniversitiesStyle(){
+  methods: {
+    getUniversitiesStyle() {
       this.loading = true
-      universitiesStyle({code:this.code}).then(res =>{
+      universitiesStyle({ code: this.code }).then(res => {
         this.senceList = res.data
         console.log(res)
       })
-        .finally(_=>{
-        this.loading = false
-      })
+        .finally(_ => {
+          this.loading = false
+        })
     }
   }
 }
 </script>
 
 <style scoped lang="scss">
-.univerty{
-  overflow: hidden;
-}
-.image-item:nth-of-type(5n) {
-  margin-right: 0;
+.univerty {
+  //overflow: hidden;
 }
-.image-item{
+
+.image-item {
   width: 217px;
   cursor: pointer;
-  margin-right: 30px;
+  margin-right: 28px;
   margin-top: 20px;
   float: left;
   color: #333;
+
   .cover-image {
     width: 217px;
     height: 120px;
@@ -93,27 +92,32 @@ export default {
     position: relative;
     cursor: pointer;
   }
-  .vr{
-    background-image: url("http://toc.cn-bj.ufileos.com/media/files/20210414/9d02bb82.png");
-  }
-  .video {
-    background-image: url("http://img1.youzy.cn/content/media/thumbs/p00176063.jpeg");
-  }
-  .colleges-imgs-mask {
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 217px;
-    height: 120px;
-    background: rgba(0,0,0,.5);
-    color: #fff;
-    text-align: center;
-    line-height: 120px;
-    border-radius: 4px;
-    overflow: hidden;
+
+  .image-item:nth-of-type(5n) {
+    margin-right: 0;
   }
-  &:hover{
-      color: #42b983;
+
+  //.vr{
+  //  background-image: url("http://toc.cn-bj.ufileos.com/media/files/20210414/9d02bb82.png");
+  //}
+  //.video {
+  //  background-image: url("http://img1.youzy.cn/content/media/thumbs/p00176063.jpeg");
+  //}
+  //.colleges-imgs-mask {
+  //  position: absolute;
+  //  top: 0;
+  //  left: 0;
+  //  width: 217px;
+  //  height: 120px;
+  //  background: rgba(0,0,0,.5);
+  //  color: #fff;
+  //  text-align: center;
+  //  line-height: 120px;
+  //  border-radius: 4px;
+  //  overflow: hidden;
+  //}
+  &:hover {
+    color: #42b983;
   }
 }
 </style>