Skip to content

石磊 / cihai

Go to a project
Commit c259fef8 by 侯昆
Options

commit

1 parent b9eb4137
Inline Side-by-side
Showing 12 changed files with 556 additions and 187 deletions
serverside/cihai-wechat/src/main/webapp/WEB-INF/jsp/portal/theme/detail.jsp
...@@ -4,10 +4,21 @@ ...@@ -4,10 +4,21 @@
<jsp:include page="/WEB-INF/jsp/include/header.jsp"> <jsp:include page="/WEB-INF/jsp/include/header.jsp">
<jsp:param name="pageTitle" value="首页"/> <jsp:param name="pageTitle" value="首页"/>
</jsp:include> </jsp:include>
<div id="app"> <div id="app">
<div class="statusbar"></div> <div class="statusbar"></div>
<div class="view view-main view-init ios-edges" data-url="/"> <div class="view view-main view-init ios-edges" data-url="/">
<div class="page"> <div class="page">
<div class="navbar">
<div class="navbar-inner">
<div class="left">
<a class="link back" href="/">
<i class="iconfont icon-jiantou"></i>
<span class="ios-only">返回</span>
</a>
</div>
</div>
</div>
<div class="page-content special-content"> <div class="page-content special-content">
<!--专题简介--> <!--专题简介-->
<div class="intro-box"> <div class="intro-box">
...@@ -26,15 +37,20 @@ ...@@ -26,15 +37,20 @@
</div> </div>
<h5 class="sub-title">基本信息</h5> <h5 class="sub-title">基本信息</h5>
<div class="basic-msg"> <div class="basic-msg">
<b>中文名称：</b>中国共产党第十九次全国代表大会</div> <b>中文名称：</b>中国共产党第十九次全国代表大会
</div>
<div class="basic-msg"> <div class="basic-msg">
<b>会议简称：</b>党的十九大</div> <b>会议简称：</b>党的十九大
</div>
<div class="basic-msg"> <div class="basic-msg">
<b>会议时间：</b>2017年10月18日-24日</div> <b>会议时间：</b>2017年10月18日-24日
</div>
<div class="basic-msg"> <div class="basic-msg">
<b>会议地点：</b>北京</div> <b>会议地点：</b>北京
</div>
<div class="basic-msg"> <div class="basic-msg">
<b>代表人数：</b>2287（确认2280名代表资格有效）</div> <b>代表人数：</b>2287（确认2280名代表资格有效）
</div>
</div> </div>
</div> </div>
<!--相关词条--> <!--相关词条-->
...@@ -211,8 +227,13 @@ ...@@ -211,8 +227,13 @@
<img src="${ctx}/static/images/special-tip.png"> <img src="${ctx}/static/images/special-tip.png">
</div> </div>
<div class="title">十九大图谱</div> <div class="title">十九大图谱</div>
<div class="special-title-tools">
<a class="js-enable-drag" href="#" data-target="#relation-pic">
<span class="icon icon-drag"></span>
</a>
</div>
</div> </div>
<div id="mynetwork"></div> <div id="relation-pic"></div>
</div> </div>
<!--词云解析--> <!--词云解析-->
<div class="word-analysis"> <div class="word-analysis">
...@@ -221,10 +242,16 @@ ...@@ -221,10 +242,16 @@
<img src="${ctx}/static/images/special-tip.png"> <img src="${ctx}/static/images/special-tip.png">
</div> </div>
<div class="title">词云解析</div> <div class="title">词云解析</div>
<div class="special-title-tools">
<a class="js-refresh" href="#" data-target="#word-analysis">
<i class="iconfont icon-huanyipi"></i>
</a>
<a class="js-enable-drag" href="#" data-target="#word-analysis">
<span class="icon icon-drag"></span>
</a>
</div> </div>
<div class="inner">
<img src="${ctx}/static/images/special-pic-07.png">
</div> </div>
<div id="word-analysis"></div>
</div> </div>
<!--相关新闻--> <!--相关新闻-->
<div class="about-news"> <div class="about-news">
...@@ -255,7 +282,6 @@ ...@@ -255,7 +282,6 @@
</div> </div>
<div class="card-footer">中国共产党第十九次全国代表大会，中国特色社会主义进入新时代的关键时期召开的一次十分重要的大会。</div> <div class="card-footer">中国共产党第十九次全国代表大会，中国特色社会主义进入新时代的关键时期召开的一次十分重要的大会。</div>
</div> </div>
<div class="more-btn">加载更多</div>
</div> </div>
<!--图说十九大--> <!--图说十九大-->
<div class="pic-show"> <div class="pic-show">
...@@ -309,13 +335,78 @@ ...@@ -309,13 +335,78 @@
</div> </div>
</div> </div>
</div> </div>
<jsp:include page="/WEB-INF/jsp/include/footer.jsp"/>
<script src="${ctx}/static/js/swiper.min.js"></script>
<script src="${ctx}/static/js/vis.js"></script>
<script src="${ctx}/static/js/special.js"></script>
<script> <script>
$(function () { function relationPic(id, data) {
return new vis.Network(document.getElementById(id), relationPicData, {
nodes: {
shape: 'dot',
borderWidth: 3,
color: {
border: '#c6c6c6',
background: '#adadad',
highlight: {
border: '#187bb2',
background: '#187bb2'
}
},
font: {
color: '#333'
}
}
});
};
var relationPicData = {
nodes: [{
id: 1,
label: 'Node 1',
value: 15
},
{
id: 2,
label: 'Node 2',
value: 25
},
{
id: 3,
label: 'Node 3',
value: 50
},
{
id: 4,
label: 'Node 4',
value: 30
},
{
id: 5,
label: 'Node 5',
value: 8
}
],
edges: [{
from: 1,
to: 3
},
{
from: 1,
to: 2
},
{
from: 2,
to: 4
},
{
from: 2,
to: 5
}
]
};
relationPic('relation-pic', relationPicData);
relationPicData.edges = [];
var wordAnalysis = relationPic('word-analysis', relationPicData);
}) $('.js-refresh').click(function () {
wordAnalysis.destroy();
wordAnalysis = relationPic('word-analysis', relationPicData);
});
</script> </script>
<jsp:include page="/WEB-INF/jsp/include/footer.jsp"/>
serverside/cihai-wechat/src/main/webapp/static/2-1字语词义.html
...@@ -9,6 +9,16 @@ ...@@ -9,6 +9,16 @@
<link rel="stylesheet" href="css/vendor.css"> <link rel="stylesheet" href="css/vendor.css">
</head> </head>
<body> <body>
<div class="loading" id="loading">
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.0" width="64px" height="64px" viewBox="0 0 128 128" xml:space="preserve">
<g>
<path d="M78.75 16.18V1.56a64.1 64.1 0 0 1 47.7 47.7H111.8a49.98 49.98 0 0 0-33.07-33.08zM16.43 49.25H1.8a64.1 64.1 0 0 1 47.7-47.7V16.2a49.98 49.98 0 0 0-33.07 33.07zm33.07 62.32v14.62A64.1 64.1 0 0 1 1.8 78.5h14.63a49.98 49.98 0 0 0 33.07 33.07zm62.32-33.07h14.62a64.1 64.1 0 0 1-47.7 47.7v-14.63a49.98 49.98 0 0 0 33.08-33.07z"
fill="#494949" fill-opacity="1" />
<animateTransform attributeName="transform" type="rotate" from="0 64 64" to="-90 64 64" dur="400ms" repeatCount="indefinite"></animateTransform>
</g>
</svg>
</div>
<div id="app"> <div id="app">
<div class="statusbar"></div> <div class="statusbar"></div>
<div class="panel panel-right panel-cover panel-nav"> <div class="panel panel-right panel-cover panel-nav">
...@@ -550,7 +560,6 @@ ...@@ -550,7 +560,6 @@
</div> </div>
</div> </div>
<script src="js/vendor.js"></script> <script src="js/vendor.js"></script>
<script src="js/routes.js"></script> <script src="js/main.js"></script>
<script src="js/word.js"></script>
</body> </body>
</html> </html>
\ No newline at end of file \ No newline at end of file
serverside/cihai-wechat/src/main/webapp/static/2-2字百科义.html
...@@ -9,6 +9,16 @@ ...@@ -9,6 +9,16 @@
<link rel="stylesheet" href="css/vendor.css"> <link rel="stylesheet" href="css/vendor.css">
</head> </head>
<body> <body>
<div class="loading" id="loading">
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.0" width="64px" height="64px" viewBox="0 0 128 128" xml:space="preserve">
<g>
<path d="M78.75 16.18V1.56a64.1 64.1 0 0 1 47.7 47.7H111.8a49.98 49.98 0 0 0-33.07-33.08zM16.43 49.25H1.8a64.1 64.1 0 0 1 47.7-47.7V16.2a49.98 49.98 0 0 0-33.07 33.07zm33.07 62.32v14.62A64.1 64.1 0 0 1 1.8 78.5h14.63a49.98 49.98 0 0 0 33.07 33.07zm62.32-33.07h14.62a64.1 64.1 0 0 1-47.7 47.7v-14.63a49.98 49.98 0 0 0 33.08-33.07z"
fill="#494949" fill-opacity="1" />
<animateTransform attributeName="transform" type="rotate" from="0 64 64" to="-90 64 64" dur="400ms" repeatCount="indefinite"></animateTransform>
</g>
</svg>
</div>
<div id="app"> <div id="app">
<div class="statusbar"></div> <div class="statusbar"></div>
<div class="panel panel-right panel-cover panel-nav"> <div class="panel panel-right panel-cover panel-nav">
...@@ -290,13 +300,25 @@ ...@@ -290,13 +300,25 @@
</div> </div>
</div> </div>
<div class="view view-main view-init ios-edges" data-url="/"> <div class="view view-main view-init ios-edges" data-url="/">
<div class="page"> <div class="page page-word-wiki">
<!--.navbar--> <div class="navbar">
<!-- .navbar-inner--> <div class="navbar-inner navbar-word-wiki">
<!-- .left--> <div class="left">
<!-- a.link.back(href='/')--> <a class="link back" href="/">
<!-- i.iconfont.icon-jiantou--> <i class="iconfont icon-jiantou"></i>
<!-- span.ios-only 返回--> <span class="ios-only">返回</span>
</a>
</div>
<div class="right word-navbar-btn">
<a class="panel-open" href="#" data-panel="right">
<span class="icon icon-book"></span>
</a>
<a href="/word-wiki/">
<i class="iconfont icon-qiyeguanxitupu"></i>
</a>
</div>
</div>
</div>
<div class="toolbar"> <div class="toolbar">
<div class="toolbar-cover"> <div class="toolbar-cover">
<a class="link-btn" href="#"> <a class="link-btn" href="#">
...@@ -338,11 +360,11 @@ ...@@ -338,11 +360,11 @@
<div class="single-word"> <div class="single-word">
<div class="word-body"> <div class="word-body">
<div class="word-title"> <div class="word-title">
<a class="word-title-pager prev active">语词 <a class="word-title-pager prev active back">语词
<span class="icon icon-word-prev"></span> <span class="icon icon-word-prev"></span>
</a> </a>
<h1 class="word-title-inner">象</h1> <h1 class="word-title-inner">象</h1>
<a class="word-title-pager next" href="/word-wiki/">百科 <a class="word-title-pager next" href="#">百科
<span class="icon icon-word-next"></span> <span class="icon icon-word-next"></span>
</a> </a>
</div> </div>
...@@ -755,7 +777,6 @@ ...@@ -755,7 +777,6 @@
</div> </div>
</div> </div>
<script src="js/vendor.js"></script> <script src="js/vendor.js"></script>
<script src="js/routes.js"></script> <script src="js/main.js"></script>
<script src="js/word.js"></script>
</body> </body>
</html> </html>
\ No newline at end of file \ No newline at end of file
serverside/cihai-wechat/src/main/webapp/static/css/vendor.css
This diff could not be displayed because it is too large.
serverside/cihai-wechat/src/main/webapp/static/images/icons.png
serverside/cihai-wechat/src/main/webapp/static/images/icons.png

3.39 KB | W: | H:

serverside/cihai-wechat/src/main/webapp/static/images/icons.png

4.67 KB | W: | H:

serverside/cihai-wechat/src/main/webapp/static/images/icons.png
serverside/cihai-wechat/src/main/webapp/static/images/icons.png
serverside/cihai-wechat/src/main/webapp/static/images/icons.png
serverside/cihai-wechat/src/main/webapp/static/images/icons.png
  • 2-up
  • Swipe
  • Onion skin
serverside/cihai-wechat/src/main/webapp/static/index.html
...@@ -21,6 +21,284 @@ ...@@ -21,6 +21,284 @@
</div> </div>
<div id="app"> <div id="app">
<div class="statusbar"></div> <div class="statusbar"></div>
<div class="panel panel-right panel-cover panel-nav">
<div class="page navbar-fixed page-side-nav">
<div class="navbar">
<div class="navbar-inner">
<div class="center" style="left:0">“象”在其他百科辞典的解释</div>
</div>
</div>
<div class="page-content">
<div class="page-side">
<div class="list-block accordion-list">
<ul>
<li class="accordion-item">
<a class="item-content item-link" href="#">
<div class="item-inner">
<div class="item-title">辞海</div>
</div>
</a>
<div class="accordion-item-content">
<div class="content-block">
<p>
<a class="nav-list" href="#">第六版-2009年版典藏本</a>
</p>
<p>
<a class="nav-list" href="#">第五版-2002年版典藏本</a>
</p>
<p>
<a class="nav-list" href="#">第四版-1995年版典藏本</a>
</p>
<p>
<a class="nav-list" href="#">第三版-1987年版典藏本</a>
</p>
<p>
<a class="nav-list" href="#">第二版-1980年版典藏本</a>
</p>
<p>
<a class="nav-list" href="#">第一版-1976年版典藏本</a>
</p>
</div>
</div>
</li>
<li class="accordion-item">
<a class="item-content item-link" href="#">
<div class="item-inner">
<div class="item-title">中国人名大词典（历史人物卷）</div>
</div>
</a>
<div class="accordion-item-content">
<div class="content-block">
<p>
<a class="nav-list" href="#">第六版-2009年版典藏本</a>
</p>
<p>
<a class="nav-list" href="#">第五版-2002年版典藏本</a>
</p>
<p>
<a class="nav-list" href="#">第四版-1995年版典藏本</a>
</p>
<p>
<a class="nav-list" href="#">第三版-1987年版典藏本</a>
</p>
<p>
<a class="nav-list" href="#">第二版-1980年版典藏本</a>
</p>
<p>
<a class="nav-list" href="#">第一版-1976年版典藏本</a>
</p>
</div>
</div>
</li>
<li class="accordion-item">
<a class="item-content item-link" href="#">
<div class="item-inner">
<div class="item-title">历代名人并称辞典</div>
</div>
</a>
<div class="accordion-item-content">
<div class="content-block">
<p>
<a class="nav-list" href="#">第六版-2009年版典藏本</a>
</p>
<p>
<a class="nav-list" href="#">第五版-2002年版典藏本</a>
</p>
<p>
<a class="nav-list" href="#">第四版-1995年版典藏本</a>
</p>
<p>
<a class="nav-list" href="#">第三版-1987年版典藏本</a>
</p>
<p>
<a class="nav-list" href="#">第二版-1980年版典藏本</a>
</p>
<p>
<a class="nav-list" href="#">第一版-1976年版典藏本</a>
</p>
</div>
</div>
</li>
<li class="accordion-item">
<a class="item-content item-link" href="#">
<div class="item-inner">
<div class="item-title">哲学大辞典（修订本）</div>
</div>
</a>
<div class="accordion-item-content">
<div class="content-block">
<p>
<a class="nav-list" href="#">第六版-2009年版典藏本</a>
</p>
<p>
<a class="nav-list" href="#">第五版-2002年版典藏本</a>
</p>
<p>
<a class="nav-list" href="#">第四版-1995年版典藏本</a>
</p>
<p>
<a class="nav-list" href="#">第三版-1987年版典藏本</a>
</p>
<p>
<a class="nav-list" href="#">第二版-1980年版典藏本</a>
</p>
<p>
<a class="nav-list" href="#">第一版-1976年版典藏本</a>
</p>
</div>
</div>
</li>
<li class="accordion-item">
<a class="item-content item-link" href="#">
<div class="item-inner">
<div class="item-title">中国哲学大辞典</div>
</div>
</a>
<div class="accordion-item-content">
<div class="content-block">
<p>
<a class="nav-list" href="#">第六版-2009年版典藏本</a>
</p>
<p>
<a class="nav-list" href="#">第五版-2002年版典藏本</a>
</p>
<p>
<a class="nav-list" href="#">第四版-1995年版典藏本</a>
</p>
<p>
<a class="nav-list" href="#">第三版-1987年版典藏本</a>
</p>
<p>
<a class="nav-list" href="#">第二版-1980年版典藏本</a>
</p>
<p>
<a class="nav-list" href="#">第一版-1976年版典藏本</a>
</p>
</div>
</div>
</li>
<li class="accordion-item">
<a class="item-content item-link" href="#">
<div class="item-inner">
<div class="item-title">中国历史大辞典（全六卷）</div>
</div>
</a>
<div class="accordion-item-content">
<div class="content-block">
<p>
<a class="nav-list" href="#">第六版-2009年版典藏本</a>
</p>
<p>
<a class="nav-list" href="#">第五版-2002年版典藏本</a>
</p>
<p>
<a class="nav-list" href="#">第四版-1995年版典藏本</a>
</p>
<p>
<a class="nav-list" href="#">第三版-1987年版典藏本</a>
</p>
<p>
<a class="nav-list" href="#">第二版-1980年版典藏本</a>
</p>
<p>
<a class="nav-list" href="#">第一版-1976年版典藏本</a>
</p>
</div>
</div>
</li>
<li class="accordion-item">
<a class="item-content item-link" href="#">
<div class="item-inner">
<div class="item-title">世界近代史词典</div>
</div>
</a>
<div class="accordion-item-content">
<div class="content-block">
<p>
<a class="nav-list" href="#">第六版-2009年版典藏本</a>
</p>
<p>
<a class="nav-list" href="#">第五版-2002年版典藏本</a>
</p>
<p>
<a class="nav-list" href="#">第四版-1995年版典藏本</a>
</p>
<p>
<a class="nav-list" href="#">第三版-1987年版典藏本</a>
</p>
<p>
<a class="nav-list" href="#">第二版-1980年版典藏本</a>
</p>
<p>
<a class="nav-list" href="#">第一版-1976年版典藏本</a>
</p>
</div>
</div>
</li>
<li class="accordion-item">
<a class="item-content item-link" href="#">
<div class="item-inner">
<div class="item-title">东南亚历史词典</div>
</div>
</a>
<div class="accordion-item-content">
<div class="content-block">
<p>
<a class="nav-list" href="#">第六版-2009年版典藏本</a>
</p>
<p>
<a class="nav-list" href="#">第五版-2002年版典藏本</a>
</p>
<p>
<a class="nav-list" href="#">第四版-1995年版典藏本</a>
</p>
<p>
<a class="nav-list" href="#">第三版-1987年版典藏本</a>
</p>
<p>
<a class="nav-list" href="#">第二版-1980年版典藏本</a>
</p>
<p>
<a class="nav-list" href="#">第一版-1976年版典藏本</a>
</p>
</div>
</div>
</li>
<li class="accordion-item">
<a class="item-content item-link" href="#">
<div class="item-inner">
<div class="item-title">中国文学大辞典（修订本）</div>
</div>
</a>
<div class="accordion-item-content">
<div class="content-block">
<p>
<a class="nav-list" href="#">第六版-2009年版典藏本</a>
</p>
<p>
<a class="nav-list" href="#">第五版-2002年版典藏本</a>
</p>
<p>
<a class="nav-list" href="#">第四版-1995年版典藏本</a>
</p>
<p>
<a class="nav-list" href="#">第三版-1987年版典藏本</a>
</p>
<p>
<a class="nav-list" href="#">第二版-1980年版典藏本</a>
</p>
<p>
<a class="nav-list" href="#">第一版-1976年版典藏本</a>
</p>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="view view-main view-init ios-edges" data-url="/"> <div class="view view-main view-init ios-edges" data-url="/">
<div class="page bg-blank"> <div class="page bg-blank">
<div class="toolbar tabbar tabbar-labels toolbar-index"> <div class="toolbar tabbar tabbar-labels toolbar-index">
...@@ -57,7 +335,6 @@ ...@@ -57,7 +335,6 @@
</div> </div>
</div> </div>
<script src="js/vendor.js"></script> <script src="js/vendor.js"></script>
<script src="js/routes.js"></script> <script src="js/main.js"></script>
<script src="js/index.js"></script>
</body> </body>
</html> </html>
\ No newline at end of file \ No newline at end of file
serverside/cihai-wechat/src/main/webapp/static/js/index.js
...@@ -3,79 +3,28 @@ var myApp = new Framework7({ ...@@ -3,79 +3,28 @@ var myApp = new Framework7({
root: '#app', root: '#app',
theme: 'ios', theme: 'ios',
routes: routes, routes: routes,
modalButtonOk:'去顶'
}); });
var $loading = $('#loading'); var $loading = $('#loading');
$loading.addClass('fade-out'); $loading.addClass('fade-out');
setTimeout(function () { setTimeout(function () {
$loading.remove(); $loading.remove();
}, 300); },300);
$('.search-area-inner').on('click', function () { $('.search-area-inner').on('click', function () {
wx.startRecord();
myApp.dialog.create({ myApp.dialog.create({
title: '正在录音...', title: '正在录音...',
buttons: [ buttons: [
{ {
text: '完成', text: '完成',
onClick: function () { onClick:function () {
wx.stopRecord({
success: function (res) {
myApp.dialog.preloader();
var localId = res.localId;
wx.translateVoice({
localId: localId, // 需要识别的音频的本地Id，由录音相关接口获得
isShowProgressTips: 0, // 默认为1，显示进度提示
success: function (res) {
jQuery.get("/home/search", {keyword: res.translateResult}, function (data) {
myApp.dialog.close();
if (data.code == "OK") {
// myApp.view.main.router.load({
// url:data.data
// });
location.href = data.data;
} else {
myApp.dialog.alert(data.message);
$('.j_search_input').val(res.translateResult);
}
})
}
});
}
myApp.view.main.router.load({
url:'/2-1字语词义.html'
}); });
} }
} }
] ]
}).open(); }).open();
}); });
$('.brand-index').on('click', function () {
wx.chooseImage({
count: 1, // 默认9
sizeType: ['compressed'], // 可以指定是原图还是压缩图，默认二者都有
sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
success: function (res) {
var localIds = res.localIds; // 返回选定照片的本地ID列表，localId可以作为img标签的src属性显示图片
wx.getLocalImgData({
localId: localIds[0], // 图片的localID
success: function (res) {
var localData = res.localData; // localData是图片的base64数据，可以用img标签显示
alert(localData);
}
});
}
});
})
serverside/cihai-wechat/src/main/webapp/static/js/special.js
var $ = Dom7; var $ = Dom7;
var app = new Framework7({ // var app = new Framework7({
root: '#app', // root: '#app',
theme: 'ios', // theme: 'ios',
routes: routes // routes: routes
}); // });
var numSwiper = new Swiper('.num-swiper', { var numSwiper = new Swiper('.num-swiper', {
loop: false, loop: false,
...@@ -43,93 +43,6 @@ var topicSwiper = new Swiper('.topic-swiper', { ...@@ -43,93 +43,6 @@ var topicSwiper = new Swiper('.topic-swiper', {
} }
}); });
//关系图
var DIR = 'img/soft-scraps-icons/';
var nodes = null;
var edges = null;
var network = null;
// Called when the Visualization API is loaded.
function draw() {
// create people.
// value corresponds with the age of the person
var DIR = 'images/special-pic-0';
nodes = [
{id: 1, shape: 'circularImage', image: DIR + '1.png'},
{id: 2, shape: 'circularImage', image: DIR + '2.png'},
{id: 3, shape: 'circularImage', image: DIR + '1.png'},
{id: 4, shape: 'circularImage', image: DIR + '2.png', label: "pictures by this guy!"},
{id: 5, shape: 'circularImage', image: DIR + '1.png'},
{id: 6, shape: 'circularImage', image: DIR + '2.png'},
{id: 7, shape: 'circularImage', image: DIR + '1.png'},
{id: 8, shape: 'circularImage', image: DIR + '2.png'},
{id: 9, shape: 'circularImage', image: DIR + '1.png'},
{id: 10, shape: 'circularImage', image: DIR + '2.png'},
{id: 11, shape: 'circularImage', image: DIR + '1.png'},
{id: 12, shape: 'circularImage', image: DIR + '2.png'},
{id: 13, shape: 'circularImage', image: DIR + '1.png'},
{id: 14, shape: 'circularImage', image: DIR + '2.png'},
{
id: 15,
shape: 'circularImage',
image: DIR + 'missing.png',
brokenImage: DIR + 'missingBrokenImage.png',
label: "when images\nfail\nto load"
},
{
id: 16,
shape: 'circularImage',
image: DIR + 'anotherMissing.png',
brokenImage: DIR + '9.png',
label: "fallback image in action"
}
];
// create connections between people
// value corresponds with the amount of contact between two people
edges = [
{from: 1, to: 2},
{from: 2, to: 3},
{from: 2, to: 4},
{from: 4, to: 5},
{from: 4, to: 10},
{from: 4, to: 6},
{from: 6, to: 7},
{from: 7, to: 8},
{from: 8, to: 9},
{from: 8, to: 10},
{from: 10, to: 11},
{from: 11, to: 12},
{from: 12, to: 13},
{from: 13, to: 14},
{from: 9, to: 16}
];
// create a network
var container = document.getElementById('mynetwork');
var data = {
nodes: nodes,
edges: edges
};
var options = {
nodes: {
borderWidth: 4,
size: 30,
color: {
border: '#222222',
background: '#666666'
},
font: {color: '#eeeeee'}
},
edges: {
color: 'lightgray'
}
};
network = new vis.Network(container, data, options);
}
draw();
$('.js-read-more').click(function () { $('.js-read-more').click(function () {
if($(this).hasClass('active')){ if($(this).hasClass('active')){
$('.special-content .txt-content').css('height','190px'); $('.special-content .txt-content').css('height','190px');
...@@ -139,3 +52,10 @@ $('.js-read-more').click(function () { ...@@ -139,3 +52,10 @@ $('.js-read-more').click(function () {
$(this).addClass('active') $(this).addClass('active')
} }
}); });
$('.js-enable-drag').click(function () {
var $this = $(this);
$this.hasClass('active')?$this.removeClass('active'):$this.addClass('active');
var $target = $($this.data('target'));
$target.hasClass('enable')?$target.removeClass('enable'):$target.addClass('enable');
});
\ No newline at end of file \ No newline at end of file
serverside/cihai-wechat/src/main/webapp/static/js/vendor.js
This diff could not be displayed because it is too large.
serverside/cihai-wechat/src/main/webapp/static/js/vis.js deleted 100644 → 0
This diff could not be displayed because it is too large.
serverside/cihai-wechat/src/main/webapp/static/专题.html
...@@ -9,10 +9,30 @@ ...@@ -9,10 +9,30 @@
<link rel="stylesheet" href="css/vendor.css"> <link rel="stylesheet" href="css/vendor.css">
</head> </head>
<body> <body>
<div class="loading" id="loading">
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.0" width="64px" height="64px" viewBox="0 0 128 128" xml:space="preserve">
<g>
<path d="M78.75 16.18V1.56a64.1 64.1 0 0 1 47.7 47.7H111.8a49.98 49.98 0 0 0-33.07-33.08zM16.43 49.25H1.8a64.1 64.1 0 0 1 47.7-47.7V16.2a49.98 49.98 0 0 0-33.07 33.07zm33.07 62.32v14.62A64.1 64.1 0 0 1 1.8 78.5h14.63a49.98 49.98 0 0 0 33.07 33.07zm62.32-33.07h14.62a64.1 64.1 0 0 1-47.7 47.7v-14.63a49.98 49.98 0 0 0 33.08-33.07z"
fill="#494949" fill-opacity="1" />
<animateTransform attributeName="transform" type="rotate" from="0 64 64" to="-90 64 64" dur="400ms" repeatCount="indefinite"></animateTransform>
</g>
</svg>
</div>
<div id="app"> <div id="app">
<div class="statusbar"></div> <div class="statusbar"></div>
<div class="view view-main view-init ios-edges" data-url="/"> <div class="view view-main view-init ios-edges" data-url="/">
<div class="page"> <div class="page">
<div class="navbar">
<div class="navbar-inner">
<div class="left">
<a class="link back" href="/">
<i class="iconfont icon-jiantou"></i>
<span class="ios-only">返回</span>
</a>
</div>
</div>
</div>
<div class="page-content special-content"> <div class="page-content special-content">
<!--专题简介--> <!--专题简介-->
<div class="intro-box"> <div class="intro-box">
...@@ -216,8 +236,13 @@ ...@@ -216,8 +236,13 @@
<img src="images/special-tip.png"> <img src="images/special-tip.png">
</div> </div>
<div class="title">十九大图谱</div> <div class="title">十九大图谱</div>
<div class="special-title-tools">
<a class="js-enable-drag" href="#" data-target="#relation-pic">
<span class="icon icon-drag"></span>
</a>
</div>
</div> </div>
<div id="mynetwork"></div> <div id="relation-pic"></div>
</div> </div>
<!--词云解析--> <!--词云解析-->
<div class="word-analysis"> <div class="word-analysis">
...@@ -226,10 +251,16 @@ ...@@ -226,10 +251,16 @@
<img src="images/special-tip.png"> <img src="images/special-tip.png">
</div> </div>
<div class="title">词云解析</div> <div class="title">词云解析</div>
<div class="special-title-tools">
<a class="js-refresh" href="#" data-target="#word-analysis">
<i class="iconfont icon-huanyipi"></i>
</a>
<a class="js-enable-drag" href="#" data-target="#word-analysis">
<span class="icon icon-drag"></span>
</a>
</div> </div>
<div class="inner">
<img src="images/special-pic-07.png">
</div> </div>
<div id="word-analysis"></div>
</div> </div>
<!--相关新闻--> <!--相关新闻-->
<div class="about-news"> <div class="about-news">
...@@ -260,7 +291,6 @@ ...@@ -260,7 +291,6 @@
</div> </div>
<div class="card-footer">中国共产党第十九次全国代表大会，中国特色社会主义进入新时代的关键时期召开的一次十分重要的大会。</div> <div class="card-footer">中国共产党第十九次全国代表大会，中国特色社会主义进入新时代的关键时期召开的一次十分重要的大会。</div>
</div> </div>
<div class="more-btn">加载更多</div>
</div> </div>
<!--图说十九大--> <!--图说十九大-->
<div class="pic-show"> <div class="pic-show">
...@@ -315,9 +345,81 @@ ...@@ -315,9 +345,81 @@
</div> </div>
</div> </div>
<script src="js/vendor.js"></script> <script src="js/vendor.js"></script>
<script src="js/routes.js"></script> <script src="js/main.js"></script>
<script src="js/swiper.min.js"></script>
<script src="js/vis.js"></script>
<script src="js/special.js"></script> <script src="js/special.js"></script>
<script>
function relationPic(id, data) {
return new vis.Network(document.getElementById(id), relationPicData, {
nodes: {
shape: 'dot',
borderWidth: 3,
color: {
border: '#c6c6c6',
background: '#adadad',
highlight: {
border: '#187bb2',
background: '#187bb2'
}
},
font: {
color: '#333'
}
}
});
};
var relationPicData = {
nodes: [{
id: 1,
label: 'Node 1',
value: 15
},
{
id: 2,
label: 'Node 2',
value: 25
},
{
id: 3,
label: 'Node 3',
value: 50
},
{
id: 4,
label: 'Node 4',
value: 30
},
{
id: 5,
label: 'Node 5',
value: 8
}
],
edges: [{
from: 1,
to: 3
},
{
from: 1,
to: 2
},
{
from: 2,
to: 4
},
{
from: 2,
to: 5
}
]
};
relationPic('relation-pic', relationPicData);
relationPicData.edges = [];
var wordAnalysis = relationPic('word-analysis', relationPicData);
$('.js-refresh').click(function() {
wordAnalysis.destroy();
wordAnalysis = relationPic('word-analysis', relationPicData);
});
</script>
</body> </body>
</html> </html>
\ No newline at end of file \ No newline at end of file
Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!