twoduty/src/main/resources/templates/index.html
dong_bo0602 946dc504ee 0901
2021-09-01 17:03:43 +08:00

420 lines
18 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<base href="/twoduty/">
<meta charset="UTF-8">
<title>乡镇街道综合办公平台</title>
<link rel="stylesheet" href="assets/web/css/reset.css">
<link rel="stylesheet" href="assets/web/css/index.css">
</head>
<body>
<div id="app">
<div class="header">
<div class="date">
<div class="day" v-cloak>
<span>今天是:</span>{{today}}
</div>
<div class="weather" v-cloak>
今天:{{weatherInfo.city}}
<img :src="weatherInfo.image" alt="">
{{weatherInfo.text}}{{weatherInfo.temperature}}℃
</div>
</div>
<div class="logo-nav">
<div class="logo-nav-content">
<div class="logo">
<img src="assets/web/images/logo.png" alt="">
</div>
<div class="nav">
<ul>
<li>
<a href="javascript: void(0);">首页</a>
</li>
<li>
<a href="route/web/news-list-column.html?pageId=04988903-8948-4645-9024-6c97f770c8d7">党纪法规</a>
</li>
<li>
<a href="javascript: void(0);">
办公平台
<div class="child">
<span @click="goPublicPage('6f0ec363-49a9-4174-a48f-290b69495dfc')">四个清单</span>
<span @click="goPublicPage('cdd5ffd5-ebd7-4901-afce-f2e98d506c97')">五项流程</span>
<span @click="goPublicPage('c912f0ff-d1e6-4346-a0cd-c955ea559a0b')">六本台账</span>
</div>
</a>
</li>
<li>
<a href="route/web/news-list.html?pageId=3c0d1478-f75a-42a6-9bb5-7fa30d854b9b">通知公告</a>
</li>
<li>
<a href="route/web/news-list-column.html?pageId=68167be6-3dbd-49d3-a956-d07e3e4384e5">警示教育</a>
</li>
<li>
<a href="route/web/news-list-column.html?pageId=79da7965-1bff-4471-babe-7874474cb418">学习园地</a>
</li>
<li>
<span th:text="${userParams.userName}"></span>
<div class="child">
<a href="default-main">后台</a>
<a href="oauth/logout">退出</a>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="news">
<div class="head-news" v-cloak>
<a :href="'route/web/detail.html?contentId=' + headNews.articleContentId" :title="headNews.articleContentTitle">
<img src="assets/web/images/head-news.png" alt="">
{{headNews.articleContentTitle}}
</a>
<p>{{headNews.articleContentSubTitle}}</p>
</div>
<div class="news-box">
<div class="news-box-title">
<div class="news-tile-img">
<img src="assets/web/images/news-icon.png" alt="">
<div class="title-line"></div>
<a href="javascript:void(0);">更多+</a>
</div>
</div>
<div class="news-slide">
<div class="news-left">
<ul v-cloak>
<li v-for="(news,idx) in newsList">
<a :href="'route/web/detail.html?contentId=' + news.articleContentId" :title="news.articleContentTitle">
{{news.articleContentTitle}}
</a>
<p v-if="idx == 0">{{news.articleContentSubTitle}}</p>
</li>
</ul>
</div>
<div class="news-right">
<div class="bd">
<ul v-cloak>
<li v-for="banner in newsBanner">
<a href="javascript:void(0);">
<img :src="'route/file/download/true/' + banner.articleContentCoverPhotos" alt="" v-if="banner.articleContentCoverPhotos">
<p>{{banner.articleContentTitle}}</p>
</a>
</li>
</ul>
</div>
<div class="hd">
<ul>
<li v-for="banner in newsBanner"></li>
</ul>
</div>
</div>
</div>
</div>
<div class="three">
<div class="three-box">
<div class="three-box-title">
<span>四个清单</span>
<a href="route/web/public.html?id=6f0ec363-49a9-4174-a48f-290b69495dfc">更多+</a>
</div>
<div class="three-box-list">
<ul v-cloak>
<li v-for="(news,idx) in fourList">
<a :href="'route/web/public.html?id=' + news.pId + '&contentId=' + news.id +'&idx=' + idx" :title="news.name">{{news.name}}</a>
</li>
</ul>
</div>
</div>
<div class="three-box">
<div class="three-box-title">
<span>五项流程</span>
<a href="route/web/public.html?id=cdd5ffd5-ebd7-4901-afce-f2e98d506c97">更多+</a>
</div>
<div class="three-box-list">
<ul v-cloak>
<li v-for="(news,idx) in fiveStep">
<a :href="'route/web/public.html?id=' + news.pId + '&contentId=' + news.id +'&idx=' + idx" :title="news.name">{{news.name}}</a>
</li>
</ul>
</div>
</div>
<div class="three-box">
<div class="three-box-title">
<span>六本台账</span>
<a href="route/web/public.html?id=c912f0ff-d1e6-4346-a0cd-c955ea559a0b">更多+</a>
</div>
<div class="three-box-list">
<ul v-cloak>
<li v-for="(news,idx) in sixBook">
<a :href="'route/web/public.html?id=' + news.pId + '&contentId=' + news.id +'&idx=' + idx" :title="news.name">{{news.name}}</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="street">
<div class="street-content">
<div class="street-title">
<img src="assets/web/images/street-logo.png" alt="">
</div>
<div class="street-list">
<ul v-cloak>
<li v-for="(item,idx) in streetList" :title="item.departmentName">
<span>0{{idx+1}}/</span>
<div class="street-img-name">
<a :href="'route/web/street.html?departmentId=' + item.departmentId">
<img src="assets/web/images/header-bg.png" alt="">
<p>{{item.departmentName}}</p>
</a>
</div>
</li>
</ul>
</div>
</div>
</div>
<div class="base">
<div class="base-content">
<div class="base-title">
<img src="assets/web/images/base-logo.png" alt="">
<!-- <a href="javascript:void(0);">更多+</a>-->
</div>
<div class="base-news">
<div class="base-news-left">
<div class="bd">
<ul>
<li v-for="(news,idx) in baseList">
<a :href="'route/web/detail.html?contentId=' + news.articleContentId">
<img :src="'route/file/download/true/' + news.articleContentCoverPhotos" alt="">
</a>
</li>
</ul>
</div>
</div>
<div class="base-news-right">
<ul>
<li v-for="(news,idx) in baseList">
<a :href="'route/web/detail.html?contentId=' + news.articleContentId" :title="news.articleContentTitle">
<span v-if="idx <= 2">最新</span>
{{news.articleContentTitle}}
</a>
</li>
</ul>
</div>
</div>
<div class="bottom-nav">
<div class="bottom-nav-title">
门户导航
</div>
<div class="bottom-nav-list" v-cloak>
<a :href="nav.dataSummary" v-for="nav in bottomNavList" target="_blank">{{nav.dataName}}</a>
</div>
</div>
</div>
</div>
<div class="footer">
版权所有:沧州纪委监察局 备案号冀ICP备 14000612 技术支持:山西腾狮科技有限公司
</div>
</div>
<script src="assets/web/js/jquery-2.1.4.min.js"></script>
<script src="assets/web/js/jquery.SuperSlide.2.1.1.js"></script>
<script src="assets/web/js/vue.js"></script>
<script src="assets/web/js/ajax.js"></script>
<script src="assets/js/restajax.js"></script>
<script src="assets/web/layer-v3.3.0/layer/layer.js"></script>
<script src="assets/web/js/nicescroll.js"></script>
<script src="assets/web/js/echarts.js"></script>
<script>
var vue = new Vue({
el: '#app',
data: {
fourList: [],
fiveStep: [],
sixBook: [],
streetList: [],
bottomNavList: [],
headNews: {},
newsList: [],
newsBanner: [],
baseList: [],
weatherInfo: {},
today: ''
},
methods: {
// 头部导航跳转四五六
goPublicPage: function (id) {
window.location.href = 'route/web/public.html?id=' + id
},
// 获取四个清单
getFourList: function () {
var self = this
top.restAjax.get(top.restAjax.path('api/indexlib/listztreeweb/{indexLibParentId}', ['6f0ec363-49a9-4174-a48f-290b69495dfc']), {}, null, function(code, data) {
self.fourList = data
}, function(code, data) {
layer.msg(data.msg);
}, function() {
// loadLayerIndex1 = layer.load(0, {shade: false});
}, function() {
// layer.close(loadLayerIndex1);
});
},
// 获取五项流程
getFiveStep: function () {
var self = this
top.restAjax.get(top.restAjax.path('api/indexlib/listztreeweb/{indexLibParentId}', ['cdd5ffd5-ebd7-4901-afce-f2e98d506c97']), {}, null, function(code, data) {
self.fiveStep = data
}, function(code, data) {
layer.msg(data.msg);
}, function() {
// loadLayerIndex1 = layer.load(0, {shade: false});
}, function() {
// layer.close(loadLayerIndex1);
});
},
// 获取六本台账
getSixBook: function () {
var self = this
top.restAjax.get(top.restAjax.path('api/indexlib/listztreeweb/{indexLibParentId}', ['c912f0ff-d1e6-4346-a0cd-c955ea559a0b']), {}, null, function(code, data) {
self.sixBook = data
}, function(code, data) {
layer.msg(data.msg);
}, function() {
// loadLayerIndex1 = layer.load(0, {shade: false});
}, function() {
// layer.close(loadLayerIndex1);
});
},
// 获取街道
getStreet: function () {
var self = this
top.restAjax.get(top.restAjax.path('api/departmentBase/list-jur', []), {}, null, function(code, data) {
self.streetList = data
}, function(code, data) {
layer.msg(data.msg);
}, function() {
}, function() {
});
},
// 获取门户导航
getGateNav: function () {
var self = this
top.restAjax.get(top.restAjax.path('api/data/listbyparentid/{dataParentId}', ['3a32e7d5-a2ee-4cdf-959d-70d0e50e4389']), {}, null, function(code, data) {
self.bottomNavList = data
}, function(code, data) {
layer.msg(data.msg);
}, function() {
// loadLayerIndex = layer.load(0, {shade: false});
}, function() {
// layer.close(loadLayerIndex);
});
},
// 获取新闻资讯
getNews: function () {
var self = this
var info = {
page: 1,
rows: 6,
articleTypeId: '256caf34-c00e-4524-8de6-3803c0a4dff7'
}
top.restAjax.get(top.restAjax.path('api/articlecontent/listpage-publish', []), info, null, function(code, data) {
var result = []
for (let i = 0; i < data.rows.length; i++) {
if (i == 0) {
self.headNews = data.rows[i]
} else {
result.push(data.rows[i])
}
}
self.newsList = result
}, function(code, data) {
layer.msg(data.msg);
}, function() {
// loadLayerIndex = layer.load(0, {shade: false});
}, function() {
// layer.close(loadLayerIndex);
});
},
// 获取新闻轮播
getNewsBanner: function () {
var self = this
var info = {
page: 1,
rows: 3,
articleTypeId: 'ed2fae3a-c89d-4a2d-9c4c-defc250f1436'
}
top.restAjax.get(top.restAjax.path('api/articlecontent/listpage-publish', []), info, null, function(code, data) {
console.log(data)
self.newsBanner = data.rows
self.$nextTick(function () {
jQuery(".news-right").slide({mainCell:".bd ul",effect:"left",autoPlay:true,trigger:"click"});
})
}, function(code, data) {
layer.msg(data.msg);
}, function() {
// loadLayerIndex = layer.load(0, {shade: false});
}, function() {
// layer.close(loadLayerIndex);
});
},
// 获取基层风采
getBaseNews: function () {
var self = this
var info = {
page: 1,
rows: 8,
articleTypeId: 'ccb93228-d911-4384-ad7d-26fda5182105'
}
top.restAjax.get(top.restAjax.path('api/articlecontent/listpage-publish', []), info, null, function(code, data) {
self.baseList = data.rows
self.$nextTick(function () {
jQuery(".base-news-left").slide({mainCell:".bd ul",effect:"left",autoPlay:true,trigger:"click"});
})
}, function(code, data) {
layer.msg(data.msg);
}, function() {
// loadLayerIndex = layer.load(0, {shade: false});
}, function() {
// layer.close(loadLayerIndex);
});
},
// 获取天气
getWeahther: function () {
var self = this
top.restAjax.get(top.restAjax.path('api/weather/get-weather-now', []), {}, null, function(code, data) {
self.weatherInfo = data
}, function(code, data) {
layer.msg(data.msg);
}, function() {
// loadLayerIndex = layer.load(0, {shade: false});
}, function() {
// layer.close(loadLayerIndex);
});
},
// 获取日期
getDate: function () {
var myDate = new Date;
var year = myDate.getFullYear(); //获取当前年
var mon = myDate.getMonth() + 1; //获取当前月
var date = myDate.getDate(); //获取当前日
var week = myDate.getDay();
var weeks = ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"];
this.today = year + "年" + mon + "月" + date + "日 " + weeks[week]
}
},
mounted: function () {
this.getFourList()
this.getFiveStep()
this.getSixBook()
this.getStreet()
this.getGateNav()
this.getNews()
this.getNewsBanner()
this.getBaseNews()
this.getWeahther()
this.getDate()
}
})
</script>
</body>
</html>