You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

512 lines
26 KiB

This file contains ambiguous Unicode characters!

This file contains ambiguous Unicode characters that may be confused with others in your current locale. If your use case is intentional and legitimate, you can safely ignore this warning. Use the Escape button to highlight these characters.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>高校信息综合查询</title>
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link rel="stylesheet" href="./lib/layui/css/layui.css" media="all">
<link rel="stylesheet" href="./css/style.css?v=1.0.0.2108200838" media="all">
</head>
<body>
<div class="layui-carousel" id="carousel" lay-filter="carousel">
<div id="btn_search" data-state="closed"><img src="img/search_black.svg" style="width:100%"></div>
</div>
<script src="./lib/layui/layui.js" charset="utf-8"></script>
<script src="lib/md5.js"></script>
<script>
var MODE = 'Resource'; // 1: University 2: Resource
var COUNT = 110; // 初始化图片数量
layui.use(['jquery', 'laytpl', 'carousel', 'form'], function(){
// 由于layer弹层依赖jQuery所以可以直接得到
var $ = layui.$, layer = layui.layer;
var laytpl = layui.laytpl;
var carousel = layui.carousel, form = layui.form;
var ins; // 首页轮播实例的对象
// 首页按学校轮播初始化照片墙
if(MODE === 'University'){
$.post("/api/data", {query: 'SELECT u.Id,u.Name,r.Address FROM t_zygh_ytj_University AS u LEFT JOIN t_zygh_ytj_ResourceFile AS r ON u.Id = r.UniversityId GROUP BY u.id', pageIndex: 0, pageSize: COUNT}, function(result){
//console.log('t_zygh_ytj_University', result)
laytpl($('#carousel_tpl').html()).render(result, function(html){
$('#carousel').prepend(html);
});
// 轮播
ins = carousel.render({
elem: '#carousel',
width: '100%',
height: '100%',
// arrow: 'always'
indicator: 'none', // 指示器位置可选值为inside容器内部| outside容器外部| none不显示
full: true, // 是否全屏轮播
});
});
}
// 首页按资源随机轮播初始化照片墙
if(MODE === 'Resource'){
$.post("/api/data", {query: 'SELECT Address, Desc, UniversityId AS Id, Id AS RId FROM t_zygh_ytj_ResourceFile WHERE 1 ORDER BY RANDOM()', pageIndex: 0, pageSize: COUNT}, function(result){
//
laytpl($('#carousel_tpl').html()).render(result, function(html){
$('#carousel').prepend(html);
});
// 轮播
ins = carousel.render({
elem: '#carousel',
width: '100%',
height: '100%',
// arrow: 'always'
indicator: 'none', // 指示器位置可选值为inside容器内部| outside容器外部| none不显示
//full: true, // 是否全屏轮播
});
});
}
carousel.on('change(carousel)', function(obj){ // test1来源于对应HTML容器的 lay-filter="test1" 属性值
console.log('change', obj.index); // 当前条目的索引
if(obj.index === 0){
$.post("/api/data", {query: 'SELECT Address, Desc, UniversityId AS Id, Id AS RId FROM t_zygh_ytj_ResourceFile WHERE 1 ORDER BY RANDOM()', pageIndex: 0, pageSize: COUNT}, function(result){
//
laytpl($('#carousel_tpl').html()).render(result, function(html){
$('#carousel').prepend(html);
});
// 轮播
ins = carousel.render({
elem: '#carousel',
width: '100%',
height: '100%',
// arrow: 'always'
indicator: 'none', // 指示器位置可选值为inside容器内部| outside容器外部| none不显示
//full: true, // 是否全屏轮播
});
});
}
//console.log('change', obj.prevIndex); // 上一个条目的索引
//console.log('change', obj.item); // 当前条目的元素对象
});
$('#btn_search').click(function(){
layer.closeAll(); // 关闭所有层
if($(this).data('state') === 'closed'){
// 页面层-自定义
layer.open({
type: 1,
title: false,
closeBtn: 0,
shadeClose: false,
skin: 'searchSkin',
content: $('#search_tpl').html(),
success: function(layerObj, index){
//console.log(layerObj, index);
$('#btn_search img').attr('src', 'img/close_black.svg') //
}
});
$(this).data('state', 'open')
}else{
layer.close(layer.index); // 它获取的始终是最新弹出的某个层值是由layer内部动态递增计算的
$('#btn_search img').attr('src', 'img/search_black.svg') //
$(this).data('state', 'closed')
}
});
// 搜索点击事件委托
$("body").on("click", "#btn_search_form", function(event){
var keyword = $('#keyword').val();
//console.log('SELECT Id,Name FROM t_zygh_ytj_University WHERE Name=\''+ keyword + '\'')
$.post("/api/data", {query: 'SELECT Id,Name FROM t_zygh_ytj_University WHERE Name=\''+ keyword + '\'', pageIndex: 0, pageSize: 1}, function(result){
if(result.total === 0){
layer.tips('未能检索到相关内容', '#keyword', {tips: 1});
}else if(result.total === 1){
var target = result.data[0];
var id = target.Id;
var name = target.Name;
$('body').data('id', id);
$('body').data('name', name);
// 页面层-自定义
layer.open({
type: 1,
title: false,
closeBtn: 1,
shadeClose: false,
skin: 'modalSkin',
content: $('#modal_tpl').html(),
success: function(layerObj, index){
console.log('modalSkin', $(layerObj).find('.modal-menu [data-key="intro"]').html());
// 自动触发"校园风采"展示
$('.modal-menu [data-key="intro"] img').trigger("click");
}
});
}
});
});
// 照片墙点击事件委托
$("body").on("click", ".wall-item img", function(event){
// 从DOM标签获取属性值
var target = $(event.target).parent('div.wall-item');
var id = target.data('id'); // 学校Id
var name = target.data('name'); // 学校Name
var rid = target.data('rid'); // 资源Id
$('body').data('id', id);
$('body').data('name', name);
$('body').data('rid', rid);
// 页面层-自定义
layer.open({
type: 1,
title: false,
closeBtn: 1,
shadeClose: false,
skin: 'modalSkin',
content: $('#modal_tpl').html(),
success: function(layerObj, index){
//console.log('modalSkin', $(layerObj).find('.modal-menu [data-key="intro"]').html());
// 自动触发"校园风采"展示
$('.modal-menu [data-key="intro"] img').trigger("click");
}
});
});
// 校园风采轮播图片点击事件委托
$("body").on("click", ".pic-item img", function(event){
//console.log('pic:', $(event.target).parent('.pic-item').html());
layer.open({
type: 1,
title: false,
closeBtn: 1,
area: ['auto'],
skin: 'layui-layer-nobg', //没有背景色
shadeClose: true,
content: $(event.target).parent('.pic-item').html(),
});
});
// 菜单点击
$("body").on("click", ".modal-menu dt img", function(event){
$('dt.active').removeClass('active');
var target = $(event.target).parent('dt');
target.addClass('active');
var id = $('body').data('id');
var name = $('body').data('name');
var rid = $('body').data('rid'); // 资源Id
/**
* 学部 / 学院 / 专业
* 采用key方式保存层级关系
*/
var departments = []; // 学部
var colleges = []; // 学院
var majors = []; // 专业
switch(target.data('key')) {
case 'intro':
// 校园风采
$.post("/api/data", {query: "SELECT r.*,u.Name FROM t_zygh_ytj_ResourceFile AS r LEFT JOIN t_zygh_ytj_University AS u ON r.UniversityId = u.Id WHERE r.UniversityId = " + id, pageIndex: 0, pageSize: 100}, function(result){
if(result.total === 0){
$('.modal-content').html('<div class="none"></div><span class="text">暂无内容</span>');
}else if(result.total > 0){
laytpl($('#intro_tpl').html()).render(result, function(html){
$('.modal-content').html(html);
});
console.log('rid', rid);
// 获取索引
var idx = result.data.findIndex(function(item){
console.log('item', item);
return Number(item.Id) === Number(rid);
}) || 0;
console.log('idx', idx);
// 轮播
carousel.render({
elem: '#intro-carousel',
width: '100%',
height: $('#intro').height(),
arrow: 'always',
autoplay: false, // 自动播放
indicator: 'none', // 指示器位置可选值为inside容器内部| outside容器外部| none不显示
index: idx,
});
// $('.pic-item > img').css('min-width','110%'); // 设置宽度100%
}
});
break;
case 'summary':
// 学校概况
/**
* 分类(固定), 全为必填项,如果有一项为空则不显示?
* ---------------------------------------
* Key: | 院校所属 | 院校类型 | 办学类型 | 学历类别
* ---------------------------------------
* Val: | 北京 | 综合类 | 公办院校 | 本科
* ---------------------------------------
* */
$.when(
$.post("/api/data", {query: "SELECT * FROM t_zygh_ytj_University WHERE Id = '" + id + "'", pageIndex: 0, pageSize: 1}),
$.post("/api/data", {query: "SELECT t.Name FROM t_zygh_ytj_UniversityTag AS ut LEFT JOIN t_zygh_ytj_Tag AS t ON ut.TagId = t.Id WHERE ut.UniversityId = '" + id + "'", pageIndex: 0, pageSize: 100}),
$.post("/api/data", {query: "SELECT c.Key,c.Name FROM t_zygh_ytj_UniversityCategory AS uc LEFT JOIN t_zygh_ytj_Category AS c ON uc.CategoryId = c.Id WHERE UniversityId = '" + id + "'", pageIndex: 0, pageSize: 100}),
$.post("/api/data", {query: "SELECT * FROM t_zygh_ytj_Subject WHERE UniversityId = '" + id + "'", pageIndex: 0, pageSize: 1000})
).then(function(u, t, c, s) { // 或者也可以使用 ".done"
// Yay, 加载完成,此处我们可以执行一些依赖操作。。。
var base = u[0].data[0];
var categories = {affiliated: null, classification: null, property: null, type: null};
// 格式化分类
$.each(c[0].data, function(idx, item){
switch(item.Key) {
case '院校所属':
categories.affiliated = item.Name;
break;
case '院校类型':
categories.classification = item.Name;
break;
case '办学类型':
categories.property = item.Name;
break;
case '学历类别':
categories.type = item.Name;
break;
default:
// 默认
}
});
var categorie = laytpl('{{# if(d.affiliated !== null){ }}{{ d.affiliated }}{{# } }} {{# if(d.classification !== null){ }}/ {{ d.classification }}{{# } }} {{# if(d.property !== null){ }}/ {{ d.property }}{{# } }} {{# if(d.type !== null){ }}/ {{ d.type }}{{# } }}').render(categories);
var result = {
Id: base.Id,
Name: base.Name,
Logo: base.Logo,
Desc: base.Desc,
Tags: t[0].data,
Categorie: categorie,
Subjects: s[0].data,
}
if(result.Name === null || result.Name === undefined || result.Name === ''){ // 学校名称必填否则不显示
$('.modal-content').html('<div class="none"></div><span class="text">暂无内容</span>');
}else{
laytpl($('#summary_tpl').html()).render(result, function(html){
$('.modal-content').html(html);
});
}
//console.log('result', result);
});
/*
$.post("/api/data", {query: "SELECT u.*, GROUP_CONCAT(t.Name) AS TagName FROM t_zygh_ytj_University AS u LEFT JOIN t_zygh_ytj_UniversityTag AS ut LEFT JOIN t_zygh_ytj_Tag AS t ON ut.TagId = t.Id WHERE u.Name = '" + name +"'", pageIndex: 0, pageSize: 1}, function(result){
if(result.total === 0){
$('.modal-content').html('<div class="none"></div><span class="text">暂无内容</span>');
}else if(result.total > 0){
laytpl($('#summary_tpl').html()).render(result, function(html){
$('.modal-content').html(html);
});
}
}); */
break;
case 'specialty':
// 院系专业
$.post("/api/data", {query: "SELECT * FROM t_zygh_ytj_Major WHERE UniversityId = '" + id +"'", pageIndex: 0, pageSize: 1000}, function(result){
if(result.total === 0){
$('.modal-content').html('<div class="none"></div><span class="text">暂无内容</span>');
}else if(result.total > 0){
var departments = [];
var colleges = [];
var majors = [];
var history_keys = []; // 历史键HASH防重复
var key;
$.each(result.data, function(idx,val){
// 学部
k = hex_md5(val.Department);
if(history_keys.indexOf(k) === -1){
departments.push({key: k, name: val.Department});
history_keys.push(k); // 追加历史记录
}
k = k + '-' + hex_md5(val.College);
if(history_keys.indexOf(k) === -1){
colleges.push({key: k, name: val.College});
history_keys.push(k); // 追加历史记录
}
k = k + '-' + hex_md5(val.Name);
if(history_keys.indexOf(k) === -1){
majors.push({key: k, name: val.Name});
history_keys.push(k); // 追加历史记录
}
});
// 学院
$.each(result.data, function(idx,val){
//console.log(idx, val);
});
// 专业
$.each(result.data, function(idx,val){
//console.log(idx, val);
});
laytpl($('#specialty_tpl').html()).render(data = {departments: departments, colleges: colleges, majors: majors}, function(html){
$('.modal-content').html(html);
});
}
});
break;
default:
// 默认
}
})
});
</script>
</body>
<!-- 搜索模板 -->
<script id="search_tpl" type="text/html">
<form class="search-form" action="">
<input type="text" id="keyword" name="keyword" required lay-verify="required" placeholder="输入学校名称" autocomplete="off" class="search-form-keyword">
<a id="btn_search_form">
<img src='img/search_black.svg' class="inverted">
</a>
</form>
</script>
<!-- 首页轮播模板 -->
<script id="carousel_tpl" type="text/html">
<div carousel-item="" class="layui-anim layui-anim-fadein">
{{# layui.each(d.data, function(index, item){ }}
{{# if(index % 15 === 0){ }}
<div class="wall" data-index="{{ index }}">
{{# } }}
<div class="wall-item" data-name="{{ item.Name }}" data-id="{{ item.Id }}" data-rid="{{ item.RId }}"><img src="resource/{{ item.Address }}" onerror="this.src='img/picture-ghost.svg'" ></div>
{{# if((index+1) % 15 === 0){ }}
</div>
{{# } }}
{{# }); }}
</div>
</script>
<!-- 弹出层拟态框模板 -->
<script id="modal_tpl" type="text/html">
<div class="modal-container">
<div class="modal-content"></div>
<div class="modal-menu">
<dl style="font-size: 16px; padding:15px;">
<dt data-key="intro"><img src="img/intro.svg" style="width:64px;"></dt>
<dd>校园风采</dd>
<dt data-key="summary"><img src="img/summary.svg" style="width:64px;"></dt>
<dd>学校概况</dd>
<dt data-key="specialty"><img src="img/specialty.svg" style="width:64px;"></dt>
<dd>院系专业</dd>
</dl>
</div>
</div>
</script>
<!-- 校园风采模板 -->
<script id="intro_tpl" type="text/html">
<div id="intro" >
<div class="layui-carousel" id="intro-carousel">
<div carousel-item>
{{# layui.each(d.data, function(index, item){ }}
<div>
<div class="pic-item"><img src="resource/{{ item.Address }}" onerror="this.src='img/picture.svg'" ></div>
<p class="txt-item"><span>{{ item.Desc }}</span></p>
</div>
{{# }); }}
</div>
</div>
</div>
</script>
<!-- 学校概况模板 -->
<script id="summary_tpl" type="text/html">
<div id="summary" >
<div class="header">
<div style="width: 150px; max-width: 200px; max-height: 150px; float:left">
<img src="./resource/{{ d.Logo }}" onerror="this.src='img/picture.svg'" style="min-width:100px; min-height:100px; max-width: 200px; max-height: 130px;">
</div>
<div style="float: left;">
<div class="title">{{ d.Name }}</div>
<div class="text">{{ d.Categorie }}</div>
<div class="tags">
{{# layui.each(d.Tags, function(index, item){ }}
<span>{{ item.Name }}</span>
{{# }); }}
</div>
</div>
</div>
<div class="intro card" style="clear: both;">
<h3>院校介绍</h3>
<p>
{{# if(d.Desc){ }}
{{ d.Desc }}
{{# }else{ }}
<span class="none">-暂无内容-</span>
{{# } }}
</p>
</div>
<div class="specialty card">
<h3>优势专业</h3>
{{# if(d.Subjects.length > 0){ }}
<div>
{{# layui.each(d.Subjects, function(index, item){ }}
{{# if(index % 5 === 0){ }}
<div style="width:50%;float:left;">
<table class="layui-table" style="display:block; margin:5px">
<colgroup>
<col width="60">
<col width="200">
<col width="100">
</colgroup>
<thead>
<tr>
<th>序号</th>
<th>专业名称</th>
<th>学科评估</th>
</tr>
</thead>
<tbody>
{{# } }}
<tr>
<td>{{ index + 1 }}</td>
<td>{{ item.Name }}</td>
<td>{{ item.Level }}</td>
</tr>
{{# if((index+1) % 5 === 0){ }}
</tbody>
</table>
</div>
{{# } }}
{{# }); }}
</div>
{{# }else{ }}
<span class="none">-暂无内容-</span>
{{# } }}
</div>
</div>
</script>
<!-- 院系专业模板 -->
<script id="specialty_tpl" type="text/html">
<div id="specialty">
{{# layui.each(d.departments, function(index, department){ }}
<h2 data-key="{{ department.key }}">
<i>
<img src="img/campus_white.svg" style="width: 100%;" >
</i>
<span class="department-name">{{ department.name }}</span>
<span class="triangle"></span>
</h2>
<div style="clear:both;margin-bottom: 20px;">
{{# layui.each(d.colleges, function(index, college){ }}
{{# if(college.key.indexOf(department.key) === 0){ }}
<div class="card" data-department="{{department.key}}" data-key="{{ college.key }}">
<h3>{{ college.name }}</h3>
<ul>
{{# layui.each(d.majors, function(index, major){ }}
{{# if(major.key.indexOf(college.key) != -1){ }}
<li style="width:25%;float:left;"><span data-college="{{college.key}}" data-key="{{ major.key }}">{{ major.name }}</span></li>
{{# } }}
{{# }); }}
</ul>
</div>
{{# }; }}
{{# }); }}
</div>
{{# }); }}
</div>
</script>
</html>