Skip to content

D
datamanage
Commit f810a2a7 by shenjinzhu
Options

页面修改

parent c8a5ab3a
Showing with 2824 additions and 731 deletions
src/main/resources/servletContext.xml
...@@ -13,13 +13,14 @@ ...@@ -13,13 +13,14 @@
"> ">
<context:annotation-config /> <context:annotation-config />
<context:component-scan base-package="com.zhiwei.manage.servlet" /> <context:component-scan base-package="com.zhiwei.manage.servlet" />
<mvc:default-servlet-handler /> <mvc:default-servlet-handler />
<mvc:annotation-driven /> <mvc:annotation-driven />
<mvc:resources mapping="./static/**" location="/datamanage/dist/static/" />
<!-- ViewResolver --> <!-- ViewResolver -->
<bean class="org.springframework.web.servlet.view.InternalResourceViewResolver" > <bean
<property name="viewClass" value="org.springframework.web.servlet.view.JstlView" /> class="org.springframework.web.servlet.view.InternalResourceViewResolver">
<property name="viewClass"
value="org.springframework.web.servlet.view.JstlView" />
<property name="prefix" value="/" /> <property name="prefix" value="/" />
<property name="suffix" value=".html" /> <property name="suffix" value=".html" />
</bean> </bean>
......
src/main/webapp/WEB-INF/web.xml
...@@ -46,7 +46,7 @@ ...@@ -46,7 +46,7 @@
</filter-mapping> </filter-mapping>
<welcome-file-list> <welcome-file-list>
<welcome-file>index.html</welcome-file> <welcome-file>datamanage/dist/index.html</welcome-file>
</welcome-file-list> </welcome-file-list>
<servlet-mapping> <servlet-mapping>
......
src/main/webapp/datamanage/config/index.js
...@@ -11,11 +11,11 @@ module.exports = { ...@@ -11,11 +11,11 @@ module.exports = {
assetsSubDirectory: 'static', assetsSubDirectory: 'static',
assetsPublicPath: '/', assetsPublicPath: '/',
proxyTable: { proxyTable: {
'/api': { '/datamanage': {
target: 'http://192.168.0.245:8081', target: 'http://192.168.0.245:8081',
changeOrigin: true, changeOrigin: true,
pathRewrite: { pathRewrite: {
'^/api': '/' '^/datamanage': '/datamanage'
} }
} }
}, },
......
src/main/webapp/datamanage/index.html
...@@ -4,11 +4,25 @@ ...@@ -4,11 +4,25 @@
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0"> <meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>数据管理系统</title> <title>数据管理系统</title>
<link rel="stylesheet" href="./static/css/style.ini.css">
<link rel="stylesheet" href="./static/datepicker/css/datepicker.css">
<link rel="stylesheet" href="./static/datepicker/css/layout.css">
</head> </head>
<body> <body>
<div id="app"></div> <div id="app"></div>
<!-- built files will be auto injected --> <!-- built files will be auto injected -->
</body> </body>
<!-- jquery -->
<script src="./static/js/jquery-1.12.4.min.js"></script>
<!-- jquery 过渡函数插件 -->
<script src="./static/js/jquery.easing-master/jquery.easing.min.js"></script>
<!-- jquery 过渡插件 -->
<script src="./static/js/jquery.transit.js"></script>
<!-- 自定义时间选择框样式插件 -->
<script src="./static/datepicker/js/datepicker.js"></script>
<script src="./static/datepicker/js/eye.js"></script>
<script src="./static/datepicker/js/utils.js"></script>
<!-- <script src="./static/datepicker/js/layout.js?ver=1.0.2"></script> -->
<!-- <script src="./static/js/kiccerJS.min.js"></script> --> <!-- <script src="./static/js/kiccerJS.min.js"></script> -->
<!-- 如果不清楚kiccerJS的方法，使用 jk.help() 查看介绍。 --> <!-- 如果不清楚kiccerJS的方法，使用 jk.help() 查看介绍。 -->
</html> </html>
src/main/webapp/datamanage/package.json
...@@ -14,11 +14,21 @@ ...@@ -14,11 +14,21 @@
"build": "node build/build.js" "build": "node build/build.js"
}, },
"dependencies": { "dependencies": {
"axios": "^0.17.1",
"css-loader": "^0.28.7",
"echarts": "^3.8.2",
"eslint": "^3.19.0",
"eslint-config-standard": "^10.2.1",
"extract-text-webpack-plugin": "^3.0.2",
"file-loader": "^1.1.5", "file-loader": "^1.1.5",
"jquery": "^3.2.1", "jquery": "^3.2.1",
"less-loader": "^4.0.5",
"lodash": "^4.17.4", "lodash": "^4.17.4",
"moment": "^2.19.1",
"node-sass": "^4.6.1", "node-sass": "^4.6.1",
"postcss-loader": "^2.0.9",
"sass-loader": "^6.0.6", "sass-loader": "^6.0.6",
"style-loader": "^0.19.0",
"vue": "^2.5.2", "vue": "^2.5.2",
"vue-loader": "^13.5.0", "vue-loader": "^13.5.0",
"vue-router": "^3.0.1" "vue-router": "^3.0.1"
...@@ -27,53 +37,53 @@ ...@@ -27,53 +37,53 @@
"autoprefixer": "^7.1.2", "autoprefixer": "^7.1.2",
"babel-core": "^6.22.1", "babel-core": "^6.22.1",
"babel-eslint": "^7.1.1", "babel-eslint": "^7.1.1",
"babel-jest": "^21.0.2",
"babel-loader": "^7.1.1", "babel-loader": "^7.1.1",
"babel-plugin-dynamic-import-node": "^1.2.0",
"babel-plugin-transform-es2015-modules-commonjs": "^6.26.0",
"babel-plugin-transform-runtime": "^6.22.0", "babel-plugin-transform-runtime": "^6.22.0",
"babel-preset-env": "^1.3.2", "babel-preset-env": "^1.3.2",
"babel-preset-stage-2": "^6.22.0", "babel-preset-stage-2": "^6.22.0",
"babel-register": "^6.22.0", "babel-register": "^6.22.0",
"chalk": "^2.0.1", "chalk": "^2.0.1",
"chromedriver": "^2.27.2",
"copy-webpack-plugin": "^4.0.1", "copy-webpack-plugin": "^4.0.1",
"cross-spawn": "^5.0.1",
"css-loader": "^0.28.0", "css-loader": "^0.28.0",
"eslint": "^3.19.0", "eslint": "^3.19.0",
"eslint-config-standard": "^10.2.1",
"eslint-friendly-formatter": "^3.0.0", "eslint-friendly-formatter": "^3.0.0",
"eslint-loader": "^1.7.1", "eslint-loader": "^1.7.1",
"eslint-plugin-html": "^3.0.0", "eslint-plugin-html": "^3.0.0",
"eslint-config-standard": "^10.2.1",
"eslint-plugin-promise": "^3.4.0",
"eslint-plugin-standard": "^3.0.1",
"eslint-plugin-import": "^2.7.0", "eslint-plugin-import": "^2.7.0",
"eslint-plugin-node": "^5.2.0", "eslint-plugin-node": "^5.2.0",
"eslint-plugin-promise": "^3.4.0",
"eslint-plugin-standard": "^3.0.1",
"eventsource-polyfill": "^0.9.6", "eventsource-polyfill": "^0.9.6",
"extract-text-webpack-plugin": "^3.0.0", "extract-text-webpack-plugin": "^3.0.2",
"file-loader": "^1.1.4", "file-loader": "^1.1.4",
"friendly-errors-webpack-plugin": "^1.6.1", "friendly-errors-webpack-plugin": "^1.6.1",
"html-webpack-plugin": "^2.30.1", "html-webpack-plugin": "^2.30.1",
"webpack-bundle-analyzer": "^2.9.0",
"babel-jest": "^21.0.2",
"babel-plugin-dynamic-import-node": "^1.2.0",
"babel-plugin-transform-es2015-modules-commonjs": "^6.26.0",
"jest": "^21.2.0", "jest": "^21.2.0",
"jest-serializer-vue": "^0.3.0", "jest-serializer-vue": "^0.3.0",
"vue-jest": "^1.0.2",
"node-notifier": "^5.1.2",
"chromedriver": "^2.27.2",
"cross-spawn": "^5.0.1",
"nightwatch": "^0.9.12", "nightwatch": "^0.9.12",
"selenium-server": "^3.0.1", "node-notifier": "^5.1.2",
"optimize-css-assets-webpack-plugin": "^3.2.0",
"ora": "^1.2.0",
"portfinder": "^1.0.13",
"postcss-import": "^11.0.0", "postcss-import": "^11.0.0",
"postcss-loader": "^2.0.8", "postcss-loader": "^2.0.8",
"rimraf": "^2.6.0",
"selenium-server": "^3.0.1",
"semver": "^5.3.0", "semver": "^5.3.0",
"shelljs": "^0.7.6", "shelljs": "^0.7.6",
"optimize-css-assets-webpack-plugin": "^3.2.0",
"ora": "^1.2.0",
"rimraf": "^2.6.0",
"url-loader": "^0.5.8", "url-loader": "^0.5.8",
"vue-jest": "^1.0.2",
"vue-loader": "^13.3.0", "vue-loader": "^13.3.0",
"vue-style-loader": "^3.0.1", "vue-style-loader": "^3.0.1",
"vue-template-compiler": "^2.5.2", "vue-template-compiler": "^2.5.2",
"portfinder": "^1.0.13",
"webpack": "^3.6.0", "webpack": "^3.6.0",
"webpack-bundle-analyzer": "^2.9.0",
"webpack-dev-server": "^2.9.1", "webpack-dev-server": "^2.9.1",
"webpack-merge": "^4.1.0" "webpack-merge": "^4.1.0"
}, },
......
src/main/webapp/datamanage/src/App.vue
<template> <template>
<div id="app"> <div id="app">
<!-- <img src="./assets/logo.png"> --> <!-- <img src="./assets/logo.png"> -->
<header> <header v-if="$route.path !== '/'">
<span class="pageTitle">{{ $route.meta.pageTitle }}</span> <span class="pageTitle">{{ $route.meta.pageTitle }}</span>
<div class="right"> <div class="right">
<span class="userInfo">username</span> <span class="userInfo">{{ userInfo.username || 'username' }}</span>
<span class="logout">退出</span> <span class="logout" @click="logout()">退出</span>
</div> </div>
</header> </header>
<nav> <nav v-if="$route.path !== '/'">
<div class="sysTitle"> <div class="sysTitle">
数据管理系统 数据管理系统
</div> </div>
<div class="selectPt" @click="toggle.ptList = !toggle.ptList">
<p>当前渠道：{{ ptSelectedData.pt }}</p>
<ul :class="{ 'active': toggle.ptList }">
<li v-for="n,i in ptListData" @click="selectPtChange(n)">{{ n.pt }}</li>
</ul>
</div>
<div class="list"> <div class="list">
<div class="list-title" :class="{ 'active': toggle.listTitle === 0 }" @click="toggle.listTitle = 0"> <!-- 如果修改了 nav 中的 list 列表，不要忘了重新配置一下 navAutoShow 方法（就在下面） -->
<div v-if="userInfo.lv >= 2" class="list-title icon-1" :class="{ 'active': toggle.listTitle === 0 }" @click="toggle.listTitle = 0">
<a href="javascirpt:void(0)">检测模块</a> <a href="javascirpt:void(0)">检测模块</a>
<img src="static/img/xiala.png" alt=""> <img src="static/img/xiala.png" alt="">
</div> </div>
<div class="list-item"> <div v-if="userInfo.lv >= 2" class="list-item">
<router-link :class="{ 'active': $route.path === '/checkInfo' }" :to="{ path: '/checkInfo' }">检测信息</router-link> <router-link :class="{ 'active': $route.path === '/checkInfo' }" :to="{ path: '/checkInfo' }">检测信息</router-link>
<router-link :class="{ 'active': $route.path === '/checkTemplate' }" :to="{ path: '/checkTemplate' }">检测模板</router-link> <router-link :class="{ 'active': $route.path === '/checkTemplate' }" :to="{ path: '/checkTemplate' }">检测模板</router-link>
<router-link :class="{ 'active': $route.path === '/processingRecord' }" :to="{ path: '/processingRecord' }">处理记录</router-link> <router-link :class="{ 'active': $route.path === '/processingRecord' }" :to="{ path: '/processingRecord' }">处理记录</router-link>
</div> </div>
<div class="list-title" :class="{ 'active': toggle.listTitle === 1 }" @click="toggle.listTitle = 1"> <div class="list-title icon-2" :class="{ 'active': toggle.listTitle === 1 }" @click="toggle.listTitle = 1">
<a href="javascirpt:void(0)">数据模块</a> <a href="javascirpt:void(0)">数据模块</a>
<img src="static/img/xiala.png" alt=""> <img src="static/img/xiala.png" alt="">
</div> </div>
...@@ -30,40 +37,207 @@ ...@@ -30,40 +37,207 @@
<router-link :class="{ 'active': $route.path === '/channelData' }" :to="{ path: '/channelData' }">渠道数据</router-link> <router-link :class="{ 'active': $route.path === '/channelData' }" :to="{ path: '/channelData' }">渠道数据</router-link>
<router-link :class="{ 'active': $route.path === '/detailedData' }" :to="{ path: '/detailedData' }">详细数据</router-link> <router-link :class="{ 'active': $route.path === '/detailedData' }" :to="{ path: '/detailedData' }">详细数据</router-link>
</div> </div>
<div class="list-title" :class="{ 'active': toggle.listTitle === 2 }" @click="toggle.listTitle = 2"> <div v-if="userInfo.lv >= 3" class="list-title icon-3" :class="{ 'active': toggle.listTitle === 2 }" @click="toggle.listTitle = 2">
<a href="javascirpt:void(0)">用户管理</a> <a href="javascirpt:void(0)">用户模块</a>
<img src="static/img/xiala.png" alt=""> <img src="static/img/xiala.png" alt="">
</div> </div>
<div class="list-item"> <div v-if="userInfo.lv >= 3" class="list-item">
<router-link :class="{ 'active': $route.path === '/userManage' }" :to="{ path: '/userManage' }">用户管理</router-link> <router-link :class="{ 'active': $route.path === '/userManage' }" :to="{ path: '/userManage' }">用户管理</router-link>
</div> </div>
<div v-if="userInfo.lv >= 3" class="list-title icon-4" :class="{ 'active': toggle.listTitle === 3 }" @click="toggle.listTitle = 3">
<a href="javascirpt:void(0)">配置模块</a>
<img src="static/img/xiala.png" alt="">
</div>
<div v-if="userInfo.lv >= 3" class="list-item">
<router-link :class="{ 'active': $route.path === '/databaseInfo' }" :to="{ path: '/databaseInfo' }">数据库信息</router-link>
<router-link :class="{ 'active': $route.path === '/fieldTableInfo' }" :to="{ path: '/fieldTableInfo' }">字段表信息</router-link>
<router-link :class="{ 'active': $route.path === '/channelTableInfo' }" :to="{ path: '/channelTableInfo' }">渠道表信息</router-link>
</div>
</div> </div>
</nav> </nav>
<section> <section :class="{ 'loginPage': $route.path === '/' }">
<router-view/> <router-view :user-info="userInfo" :all-fields="allFields" :pt-selected-data="ptSelectedData" v-if="ptSelectedData.pt" />
<!-- <footer>&copy;2012-2017 zhiweidata.com, All Rights Reserved.京ICP备13015804号-1备案京公网安备11010502034130号</footer> --> <!-- <footer>&copy;2012-2017 zhiweidata.com, All Rights Reserved.京ICP备13015804号-1备案京公网安备11010502034130号</footer> -->
</section> </section>
<!-- 自定义 alert 弹框 -->
<div class="mask" v-show="alert.toggle">
<div id="alert" class="popup">
<div class="alert-title">
{{ alert.title }}
</div>
<div class="alert-content">
<span>{{ alert.content }}</span>
</div>
<div class="alert-btn">
<button type="button" class="btn1" @click="alertClose()">确定</button>
</div>
</div>
</div>
</div> </div>
</template> </template>
<script> <script>
import { bus, requestLeave, requestGetShowChannel, requestChangePt, requestGetAllFields } from '@/vuex/request.js'
export default { export default {
name: 'app', name: 'app',
data () { data () {
return { return {
toggle: { toggle: {
listTitle: 0 listTitle: 0,
} ptList: false
},
alert: {
toggle: false,
title: '测试标题',
content: '测试内容'
},
userInfo: {},
ptListData: [],
ptSelectedData: {},
allFields: []
} }
}, },
mounted () { mounted () {
// 页面刷新后，左侧导航依然正确显示当前页 // 刷新后重新获取用户信息
if (this.$route.path.search(/^(\/checkInfo|\/checkTemplate|\/processingRecord)$/g) !== -1) { if (!window.sessionStorage.getItem('userInfo')) {
this.$router.push({'path': '/'})
} else {
this.userInfo = JSON.parse(window.sessionStorage.getItem('userInfo'))
}
// 页面刷新后，左侧 nav 仍能正确显示当前页
this.navAutoShow()
// 获取渠道列表
this.getPtList()
},
created () {
// 全局函数
bus.$on('setUserInfo', (userInfo) => {
// 左侧 nav 正确显示当前页 （用于防止退出登陆后再次登陆时可能会出的BUG）
this.navAutoShow()
// 登陆后保存用户信息到缓存
this.userInfo = userInfo
// 将用户信息保存到session （用于刷新后重新获取用户信息）
window.sessionStorage.setItem('userInfo', JSON.stringify(userInfo))
})
bus.$on('pop-up-show', (selector) => {
window.$(selector).transition({
translate: '-50%, -50%',
scale: 1,
opacity: 1
}, 500, 'easeOutBack')
})
bus.$on('pop-up-close', (selector) => {
window.$(selector).transition({
translate: '-50%, -50%',
scale: 0,
opacity: 0
}, 500, 'ease')
})
bus.$on('alert', (str, title) => {
let s = str
let t = title || '来自 ' + window.location.host + ' 的消息'
this.alert.content = s
this.alert.title = t
this.alert.toggle = true
setTimeout(() => {
bus.$emit('pop-up-show', '#alert.popup')
})
})
},
methods: {
selectPtChange (n) {
this.ptSelectedData = n
let params = {
pt: n.pt
}
requestChangePt(params, {}, (response) => {
if (response.data) {
if (response.data.state) {
this.ptSelectedData = n
this.$router.push({ path: '/reload' })
} else {
bus.$emit('alert', response.data.message)
}
} else {
bus.$emit('alert', response + '.')
}
})
},
getPtList () {
requestGetShowChannel((response) => {
if (response.data) {
if (response.data.state) {
this.ptListData = response.data.data
this.ptSelectedData = response.data.data[0]
} else {
bus.$emit('alert', response.data.message)
}
} else {
bus.$emit('alert', response + '.')
}
})
},
navAutoShow () {
if (this.$route.path.search(/^(\/checkInfo|\/checkTemplate|\/processingRecord|\/)$/g) !== -1) {
this.toggle.listTitle = 0 this.toggle.listTitle = 0
} else if (this.$route.path.search(/^(\/channelData|\/detailedData)$/g) !== -1) { } else if (this.$route.path.search(/^(\/channelData|\/detailedData)$/g) !== -1) {
this.toggle.listTitle = 1 this.toggle.listTitle = 1
} else { } else if (this.$route.path.search(/^(\/userManage)$/g) !== -1) {
this.toggle.listTitle = 2 this.toggle.listTitle = 2
} else if (this.$route.path.search(/^(\/fieldTableInfo|\/databaseInfo|\/channelTableInfo)$/g) !== -1) {
this.toggle.listTitle = 3
}
},
alertClose () {
bus.$emit('pop-up-close', '#alert.popup')
setTimeout(() => {
this.alert.toggle = false
}, 500)
},
logout () {
let params = {
username: this.userInfo.username
}
requestLeave(params, {}, (response) => {
if (response.data) {
if (response.data.state) {
bus.$emit('alert', response.data.message)
window.sessionStorage.removeItem('userInfo')
this.$router.push({'path': '/'})
} else {
bus.$emit('alert', response.data.message)
}
} else {
bus.$emit('alert', response + '.')
}
})
}
},
watch: {
$route (val, oldVal) {
this.navAutoShow()
},
ptSelectedData (val, oldVal) {
if (val === undefined) {
return false
}
let params = {
pt: this.ptSelectedData.pt
}
requestGetAllFields(params, {}, (response) => {
if (response.data) {
if (response.data.state) {
this.allFields = response.data.data
} else {
bus.$emit('alert', response.data.message)
}
} else {
bus.$emit('alert', response + '.')
}
})
} }
} }
} }
...@@ -86,6 +260,10 @@ body{ ...@@ -86,6 +260,10 @@ body{
min-height: 100%; min-height: 100%;
background-color: #394048; background-color: #394048;
line-height: 1.5; line-height: 1.5;
text-align: left;
select{
padding-right: 41px;
}
&>header{ &>header{
position: absolute; position: absolute;
right: 0; right: 0;
...@@ -108,6 +286,7 @@ body{ ...@@ -108,6 +286,7 @@ body{
padding: 0 10px 0 35px; padding: 0 10px 0 35px;
background-repeat: no-repeat; background-repeat: no-repeat;
background-position: 5px center; background-position: 5px center;
background-size: 24px auto;
&:nth-of-type(1){ background-image: url('/static/img/user.png'); } &:nth-of-type(1){ background-image: url('/static/img/user.png'); }
&:nth-of-type(2){ background-image: url('/static/img/exit.png'); } &:nth-of-type(2){ background-image: url('/static/img/exit.png'); }
} }
...@@ -139,6 +318,7 @@ body{ ...@@ -139,6 +318,7 @@ body{
height: 100%; height: 100%;
background-color: #282D33; background-color: #282D33;
color: #9ea9b9; color: #9ea9b9;
user-select: none;
.sysTitle{ .sysTitle{
height: 50px; height: 50px;
line-height: 180px; line-height: 180px;
...@@ -148,12 +328,65 @@ body{ ...@@ -148,12 +328,65 @@ body{
background-position: center; background-position: center;
margin-bottom: 20px; margin-bottom: 20px;
} }
.selectPt{
border: 1px solid #454c56;
margin: 0 20px 20px;
height: 40px;
line-height: 40px;
text-align: center;
box-shadow: 0 0 7px rgba(0, 0, 0, .9);
position: relative;
cursor: pointer;
z-index: 1;
p{
height: 40px;
line-height: 40px;
color: #ccc;
background-color: #282D33;
font-size: 16px;
font-weight: bold;
position: relative;
z-index: 1;
}
ul{
position: absolute;
width: calc(100% + 2px);
left: -1px;
line-height: 40px;
border: 1px solid #454c56;
border-top: none;
box-shadow: 0 0 7px rgba(0, 0, 0, .9);
li{
background-color: #282D33;
transition: all .3s ease;
margin-top: -40px;
&:hover{
background-color: #14181B;
}
}
&.active li{
margin-top: 0px;
}
&:before{
display: block;
content: "";
width: 100%;
height: 1px;
position: absolute;
left: -1px;
top: -1px;
border: 1px solid #454c56;
border-top: none;
border-bottom: none;
}
}
}
.list-title a, .list-item a{ .list-title a, .list-item a{
display: block; display: block;
text-align: center; text-align: center;
line-height: 50px; line-height: 50px;
text-indent: -15px; text-indent: -15px;
transition: all 0.2s ease; transition: all .2s ease;
&:hover, &.active{ &:hover, &.active{
color: #fff; color: #fff;
} }
...@@ -161,10 +394,12 @@ body{ ...@@ -161,10 +394,12 @@ body{
.list-title{ .list-title{
position: relative; position: relative;
background-repeat: no-repeat; background-repeat: no-repeat;
background-size: 40px 40px;
background-position: 20px center; background-position: 20px center;
&:nth-of-type(1){ background-image: url('/static/img/list-1.png'); } &.icon-1{ background-image: url('/static/img/list-1.png'); }
&:nth-of-type(3){ background-image: url('/static/img/list-2.png'); } &.icon-2{ background-image: url('/static/img/list-2.png'); }
&:nth-of-type(5){ background-image: url('/static/img/list-3.png'); } &.icon-3{ background-image: url('/static/img/list-3.png'); }
&.icon-4{ background-image: url('/static/img/list-4.png'); }
img{ img{
position: absolute; position: absolute;
right: 20px; right: 20px;
...@@ -198,6 +433,11 @@ body{ ...@@ -198,6 +433,11 @@ body{
width: calc(100% - 230px); width: calc(100% - 230px);
height: calc(100% - 50px); height: calc(100% - 50px);
overflow-y: auto; overflow-y: auto;
&.loginPage{
top: 0;
width: 100%;
height: 100%;
}
/*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/ /*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/
&::-webkit-scrollbar{ &::-webkit-scrollbar{
width: 8px; width: 8px;
...@@ -222,6 +462,7 @@ body{ ...@@ -222,6 +462,7 @@ body{
position: relative; position: relative;
padding-bottom: 150px; padding-bottom: 150px;
min-height: 100%; min-height: 100%;
color: #c0c7cd;
&:after{ &:after{
display: block; display: block;
content: "©2012-2017 zhiweidata.com, All Rights Reserved.京ICP备13015804号-1备案京公网安备11010502034130号"; content: "©2012-2017 zhiweidata.com, All Rights Reserved.京ICP备13015804号-1备案京公网安备11010502034130号";
...@@ -238,6 +479,53 @@ body{ ...@@ -238,6 +479,53 @@ body{
} }
} }
} }
#alert{
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%) scale(0);
width: 470px;
height: 270px;
background-color: #394048;
border: 1px solid #454E57;
color: #828991;
border-radius: 5px;
overflow: hidden;
.alert-title{
line-height: 40px;
border-bottom: 1px solid #4E5560;
padding: 0 20px;
font-size: 18px;
}
.alert-content{
height: 170px;
padding: 20px 20px 0 20px;
overflow-y: auto;
/*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/
&::-webkit-scrollbar{
width: 8px;
height: 8px;
background-color: #F5F5F5;
}
/*定义滚动条轨道 内阴影+圆角*/
&::-webkit-scrollbar-track{
// border-radius: 10px;
background-color: #282D33;
// border-left: 1px solid #121315;
}
/*定义滑块 内阴影+圆角*/
&::-webkit-scrollbar-thumb{
border-radius: 2px;
background-color: rgba(73,175,247,0.3);
&:hover{
background-color: rgba(73,175,247,0.7);
}
}
}
.alert-btn{
text-align: center;
}
}
</style> </style>
<!-- 项目公共样式 --> <!-- 项目公共样式 -->
...@@ -252,20 +540,351 @@ body{ ...@@ -252,20 +540,351 @@ body{
background-image: url('/static/img/search.png'); background-image: url('/static/img/search.png');
background-repeat: no-repeat; background-repeat: no-repeat;
background-position: 10px center; background-position: 10px center;
padding: 3px 6px 3px 50px; padding: 3px 6px 3px 45px;
color: #d4d4d4; color: #d4d4d4;
transition: all .3s ease;
font-size: 16px;
&:focus{ &:focus{
border-color: #49B0F7; border-color: #49B0F7;
background-image: url('/static/img/search_focus.png');
}
&::-webkit-input-placeholder { /* WebKit browsers */
color: #868D93;
}
&:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
color: #868D93;
}
&::-moz-placeholder { /* Mozilla Firefox 19+ */
color: #868D93;
}
&:-ms-input-placeholder { /* Internet Explorer 10+ */
color: #868D93;
} }
} }
.btn1{ .btn1{
transition: all .3s ease;
&:not([disabled]){ &:not([disabled]){
width: 122px; width: 122px;
height: 33px; height: 33px;
border: 1px solid #4E5560; border: 1px solid #4E5560;
background-color: #262D33; background-color: #262D33;
color: #c0c7cd;
border-radius: 2px;
&:hover{
background-color: #49AFF7;
color: #fff;
border-color: #49AFF7;
}
}
}
.btn2{
transition: all .3s ease;
&:not([disabled]){
width: 84px;
height: 33px;
border: 1px solid #4E5560;
// background-color: #262D33;
background-color: transparent;
color: #c0c7cd;
border-radius: 2px;
&:hover{
background-color: #49AFF7;
color: #fff;
border-color: #49AFF7;
}
}
}
.btn3{
transition: all .3s ease;
&:not([disabled]){
width: 125px;
height: 39px;
border: 2px solid #242C2F;
background-color: transparent;
letter-spacing: 5px;
text-indent: 5px;
color: #c0c7cd;
border-radius: 2px;
&:hover{
background-color: #49AFF7;
color: #fff;
border-color: #242C2F;
}
}
}
.btn4{
transition: all .3s ease;
&:not([disabled]){
display: block;
width: 80%;
height: 50px;
margin: auto;
border: 2px solid #48515A;
background-color: transparent;
letter-spacing: 20px;
text-indent: 20px;
color: #49515C;
border-radius: 2px;
&:hover{
background-color: #49AFF7;
color: #fff;
border-color: #49AFF7;
}
}
}
.table{
background-color: #282D33;
padding: 15px;
table{
// color: #868D93;
line-height: 50px;
border-collapse:collapse;
tr{
td{
border: 1px solid #394048;
padding: 0 10px;
position: relative;
}
&:nth-of-type(2n+3) td{ background-color: #262B31; }
&.empty>td:after{
display: inline;
content: "-";
color: #383F47;
}
}
}
}
label.checkbox{
display: inline-block;
line-height: 1;
input[type=checkbox]{
&+span{
width: 25px;
height: 25px;
line-height: 22px;
border-radius: 0;
transition: all .3s ease;
overflow: hidden;
border-color: #383F47;
position: relative;
top: 7px;
}
&:checked+span:after{
display: inline-block;
content: "✔";
width: 100%;
height: 100%;
font-size: 26px;
color: #49B0F7;
}
&+span:hover{
border: 1px solid #49B0F7;
}
&:checked+span{
border: 1px solid #49B0F7;
}
}
}
label.toggle{
display: inline-block;
line-height: 1;
input[type=checkbox]{
display: none;
&+span{
display: inline-block;
width: 45px;
height: 25px;
line-height: 22px;
border-radius: 25px;
transition: all .3s ease;
overflow: hidden;
border: 1px solid #383F47;
position: relative;
top: 7px;
box-shadow: 0 0 0 1px #262B31 inset;
}
&+span:after{
display: inline-block;
content: "";
width: 21px;
height: 21px;
border-radius: 21px;
// background-color: #49B0F7;
background-color: #383F47;
position: absolute;
left: 1px;
top: 1px;
transition: all .3s ease;
box-shadow: 0 0 0 1px #262B31;
}
&+span:before{
display: inline-block;
content: "";
width: 21px;
height: 21px;
background-color: #14171a;
position: absolute;
left: 1px;
top: 1px;
border-radius: 21px;
transition: all .3s ease;
}
&:checked+span{
border: 1px solid #49B0F7;
&:after{
background-color: #49B0F7;
left: 21px;
}
&:before{
width: 42px;
}
}
&+span:hover{
border: 1px solid #49B0F7;
&:after{
background-color: #49B0F7;
}
}
}
}
.pageList{
text-align: center;
user-select: none;
color: #68757D;
div{
display: inline-block;
padding: 0 10px;
min-width: 34px;
height: 34px;
line-height: 34px;
color: #68757D;
cursor: pointer;
transition: all .3s ease;
border-radius: 2px;
&:hover{
color: #fff;
}
&.active{
background-color: #49AFF7;
color: #fff;
}
}
}
.mask{
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
background-color: rgba(37, 43, 48, .5);
z-index: 10;
.pop-up{
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%) scale(0);
opacity: 0;
width: 710px;
background-color: #394048;
border: 1px solid #515B65;
color: #828991;
.title{
line-height: 40px;
font-size: 18px;
padding-left: 10px;
border-bottom: 1px solid #515B65;
i.close{
display: block;
width: 40px;
height: 40px;
background-image: url('/static/img/close.png');
background-repeat: no-repeat;
background-position: center;
float: right;
cursor: pointer;
}
}
.main{
padding: 20px 30px;
input{
padding: 3px 6px;
&::-webkit-input-placeholder { /* WebKit browsers */
color: #848D94;
}
&:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
color: #848D94;
}
&::-moz-placeholder { /* Mozilla Firefox 19+ */
color: #848D94; color: #848D94;
}
&:-ms-input-placeholder { /* Internet Explorer 10+ */
color: #848D94;
}
}
}
.btns{
text-align: center;
margin-bottom: 40px;
button{
&:nth-of-type(n + 2){
margin-left: 70px;
}
}
}
}
}
.dateInput{
cursor: pointer;
}
.lengthLimit{
display: inline-block;
line-height: 1;
max-width: 250px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.lengthLimit-new{
display: inline-block;
line-height: 1;
max-width: 130px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
z-index: 1;
&:hover{
background-color: #c0c7cd;
color: #333;
padding: 3px;
border-radius: 3px;
overflow: visible;
white-space: nowrap;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
max-width: 9999px!important;
}
}
/*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/
::-webkit-scrollbar{
width: 8px;
height: 8px;
background-color: #F5F5F5;
}
/*定义滚动条轨道 内阴影+圆角*/
::-webkit-scrollbar-track{
// border-radius: 10px;
background-color: #394048;
// border-left: 1px solid #292E34;
}
/*定义滑块 内阴影+圆角*/
::-webkit-scrollbar-thumb{
border-radius: 2px; border-radius: 2px;
background-color: rgba(73,175,247,0.3);
&:hover{
background-color: rgba(73,175,247,0.7);
} }
} }
</style> </style>
src/main/webapp/datamanage/src/components/ChannelData/ChannelData.vue
<template lang="html"> <template lang="html">
<div class="channelDataVue"> <div class="channelDataVue">
channelDataVue <div class="title">
选择时间段：
<input type="text" name="" :value="defaultTimeLine" class="dateInput" placeholder="2017-12-12" id="selectTimeSegment" readonly>
<!-- 选择渠道：
<select class="" name="">
<option value="" v-for="n,i in 10">{{ n }}</option>
</select> -->
<!-- <button type="button" class="btn2" @click="echartsUpdate()">搜索</button> -->
</div>
<div class="table">
<div id="myECharts"></div>
<div class="select">
(单位：天)
<!-- <select class="" name="">
<option value="day">天</option>
<option value="hours">小时</option>
</select> -->
</div>
</div>
</div> </div>
</template> </template>
<script> <script>
import echarts from 'echarts'
import moment from 'moment'
import _ from 'lodash'
import { bus, requestGetDataAll } from '@/vuex/request.js'
export default { export default {
data () {
return {
myChart: null,
option: {},
startTime: (new Date(moment().format('YYYY-MM-DD'))).getTime() - 1000 * 60 * 60 * 24 * 7,
endTime: (new Date(moment().format('YYYY-MM-DD'))).getTime(),
colorList: ['#4FCF94', '#F8656B', '#ffbb22', '#4CB1F5', '#ED1941', '#F47920', '#F173AC', '#5c7a29', '#6950a1', '#cd9a5b'],
data: [],
defaultTimeLine: moment(new Date().getTime() - 1000 * 60 * 60 * 24 * 7).format('YYYY/MM/DD') + ' - ' + moment(new Date()).format('YYYY/MM/DD')
}
},
mounted () {
// 自定义日历插件
let self = this
setTimeout(() => {
window.$('#selectTimeSegment').DatePicker({
format: 'Y-m-d',
mode: 'range',
date: window.$('#selectTimeSegment').val().replace(/\//g, '-').split(' - '),
current: moment().format('YYYY/MM/DD'),
starts: 1,
position: 'bottom',
onBeforeShow: function () {
window.$('#selectTimeSegment').DatePickerSetDate(window.$('#selectTimeSegment').val(), true)
},
onChange: function (formated, dates) {
window.$('#selectTimeSegment').val(formated[0].split('-').join('/') + ' - ' + formated[1].split('-').join('/'))
if (formated[0] !== formated[1]) {
self.startTime = dates[0].getTime()
self.endTime = dates[1].getTime()
setTimeout(() => {
window.$('#selectTimeSegment').DatePickerHide()
self.echartsUpdate()
}, 500)
}
}
})
})
// 初始化 ECharts
// 基于准备好的dom，初始化echarts实例
this.myChart = echarts.init(document.getElementById('myECharts'))
// 指定图表的配置项和数据
this.option = {
title: {
text: '渠道信息数量折线图',
textStyle: {
color: '#fff'
},
left: 'center',
top: 10
},
tooltip: {},
toolbox: {
feature: {
dataView: {},
saveAsImage: {
pixelRatio: 2
},
restore: {}
}
},
grid: {
show: true,
borderColor: '#515B65',
left: 60,
right: 60,
top: 100
},
axisPointer: {
show: true,
snap: true,
triggerTooltip: false,
lineStyle: {
type: 'dashed'
}
},
xAxis: {
type: 'time',
axisLine: {
lineStyle: {
color: '#515B65'
}
},
splitLine: {
lineStyle: {
color: '#515B65'
}
},
maxInterval: 3600 * 24 * 1000,
axisLabel: {
formatter: (n, i) => {
return moment(n).format('MM-DD')
}
}
},
yAxis: {
type: 'value',
axisLine: {
lineStyle: {
color: '#515B65'
}
},
splitLine: {
lineStyle: {
color: '#515B65'
}
}
},
legend: {
// data: ['微博', '微信', '网媒'],
x: 60,
y: '10%',
textStyle: {
color: '#ccc'
}
// selected: {
// '微博': true,
// '微信': true,
// '网媒': true
// }
},
series: []
}
// 使用刚指定的配置项和数据显示图表。
setTimeout(() => {
window.$(window).on('resize', () => { this.myChart.resize() })
})
this.echartsUpdate()
},
methods: {
echartsUpdate () {
this.option.legend.data = []
this.option.legend.selected = {}
this.option.series = []
let params = {
start: this.startTime,
end: this.endTime
}
requestGetDataAll(params, {}, (response) => {
if (response.data) {
if (response.data.state) {
this.data = response.data.data
for (let i = 0; i < this.data.length; i++) {
this.option.legend.data.push(this.data[i].pt)
// this.option.legend.selected[this.data[i].pt] = this.data[i].pt.search(/^(微博|微信|网媒)$/) !== -1
this.option.legend.selected[this.data[i].pt] = i < 3
this.option.series.push({
name: this.data[i].pt,
type: 'line',
smooth: true,
symbolSize: 10,
itemStyle: {
normal: {
borderWidth: 3,
color: this.colorList[i]
}
},
lineStyle: {
normal: {
width: 3,
color: this.colorList[i]
}
},
data: _.sortBy(this.data[i].list, (n) => {
return moment(n.time)
}).map((n, i) => {
return [n.time, n.count]
})
})
}
this.myChart.setOption(this.option)
} else {
bus.$emit('alert', response.data.message)
}
} else {
bus.$emit('alert', response + '.')
}
})
}
}
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.channelDataVue{ .channelDataVue{
padding: 0 50px;
max-width: 1600px;
margin: auto;
.title{
padding: 15px 0;
color: #868D93;
input, select{
height: 33px;
background-color: #282D33;
border: 1px solid #525A65;
color: #4F5762;
text-align: center;
background-image: url('/static/img/select_01.png');
background-repeat: no-repeat;
background-size: contain;
background-position: right;
padding-right: 33px;
margin-right: 20px;
}
&>button{
letter-spacing: 5px;
}
}
.table{
position: relative;
.select{
position: absolute;
right: 10%;
top: 60px;
color: #fff;
select{
height: 31px;
background-color: #000;
border: 1px solid #394048;
background-image: url('/static/img/select_02.png');
}
}
}
#myECharts{
width: 100%;
height: 620px;
}
} }
</style> </style>
src/main/webapp/datamanage/src/components/CheckInfo/CheckInfo.vue
<template lang="html"> <template lang="html">
<div class="checkInfoVue"> <div class="checkInfoVue">
<div class="title"> <div class="title">
<input type="text" name="" value="" class="searchInput" spellcheck="false"> <input type="text" name="" value="" class="searchInput" spellcheck="false" placeholder="模板名" v-model="tempName" @keydown.enter="findAllMsg()">
<div class="right"> <div class="right">
<button type="button" class="btn1">删除信息</button> <button type="button" class="btn1" @click="del()" v-if="userInfo.lv>=2">删除信息</button>
</div> </div>
</div> </div>
<div class="table">
<table>
<tr>
<td>编号</td>
<td>模板名</td>
<td>渠道</td>
<td>产生时间</td>
<td>检测信息</td>
<td v-if="userInfo.lv>=2">详细信息</td>
<td v-if="userInfo.lv>=2">标记</td>
</tr>
<tr v-for="n,i in MsgData.data" :class="'lv-' + n.templateLv">
<td>{{ i + 1 + (page - 1) * 10 }}.</td>
<td>
<p class="lengthLimit-new">{{ n.templateName }}</p>
</td>
<td>网媒</td>
<td>{{ n.handleDate | format1 }}</td>
<td><span class="maxLen" :title="n.errorMsg">{{ n.errorMsg }}</span></td>
<td v-if="userInfo.lv>=2">
<button type="button" class="btn2" @click="popup.checkInfoDetails = true, childrenData = n">详情</button>
</td>
<td v-if="userInfo.lv>=2">
<label :for="'checkbox' + i" class="checkbox">
<input type="checkbox" name="" value="" :id="'checkbox' + i" v-model="checkbox[i]">
<span></span>
</label>
</td>
</tr>
<tr class="empty" v-for="n,i in freeList">
<td><!-- 编号 --></td>
<td><!-- 模板名 --></td>
<td><!-- 渠道 --></td>
<td><!-- 产生时间 --></td>
<td><!-- 检测信息 --></td>
<td v-if="userInfo.lv>=2"><!-- 详细信息 --></td>
<td v-if="userInfo.lv>=2"><!-- 标记 --></td>
</tr>
</table>
<div class="pageList">
<div @click="page = page - 1 < 1 ? 1 : page - 1">Provious</div>
<div @click="page = n" :class="{ 'active': page === n }" v-for="n,i in pageList">{{ n }}</div>
<div @click="page = page + 1 > pages ? pages : page + 1">Next</div> / 总共 {{ MsgData.pageCount || 1 }} 页
</div>
</div>
<!-- 检测信息详情 -->
<div class="mask" v-if="popup.checkInfoDetails">
<check-info-details @close="popup.checkInfoDetails = false" :children-data="childrenData" @update="findAllMsg()" :userInfo="userInfo" :pt-selected-data="ptSelectedData" />
</div>
<!-- 删除信息 -->
<div class="mask" v-if="popup.checkInfoDelete">
<check-info-delete @close="popup.checkInfoDelete = false" :checked-message="checkedMessage" @update="findAllMsg()" @clear-checkbox="clearCheckbox()" :pt-selected-data="ptSelectedData" />
</div>
</div> </div>
</template> </template>
<script> <script>
import checkInfoDetails from '@/components/module/checkInfoDetails'
import checkInfoDelete from '@/components/module/checkInfoDelete'
import { bus, requestFindAllMsg } from '@/vuex/request.js'
import { getPageList } from '@/assets/js/get-page-list.js'
import moment from 'moment'
export default { export default {
components: {
checkInfoDetails,
checkInfoDelete
},
data () {
return {
page: 0,
pages: 7,
pageList: [1],
popup: {
checkInfoDetails: false,
checkInfoDelete: false
},
checkbox: [false, false, false, false, false, false, false, false, false, false],
tempName: '',
MsgData: {},
freeList: 10,
pageSize: 10,
childrenData: {},
checkedMessage: []
}
},
props: ['userInfo', 'ptSelectedData'],
mounted () {
this.page = 1
},
methods: {
clearCheckbox () {
this.checkbox = [false, false, false, false, false, false, false, false, false, false]
},
del () {
if (!this.checkbox.some((n, i) => { return n === true })) {
bus.$emit('alert', '您没有选择任何选项！')
} else {
this.popup.checkInfoDelete = true
this.checkedMessage = []
this.checkbox.forEach((n, i) => {
if (n) {
this.checkedMessage.push(this.MsgData.data[i])
}
})
}
},
findAllMsg () {
let pageSize = this.pageSize
let params = {
pageNo: this.page,
pageSize: pageSize,
tempName: this.tempName,
pt: this.ptSelectedData.pt
}
requestFindAllMsg(params, {}, (response) => {
if (response.data) {
if (response.data.state) {
this.MsgData = response.data.data
this.pages = response.data.data.pageCount
this.pageList = getPageList({
displayCount: 7, // 显示的页面总数（最大值）
page: Math.max(this.page, 1), // 当前页面
pages: Math.max(response.data.data.pageCount, 1) // 总页数
})
this.freeList = this.page === response.data.data.pageCount ? pageSize - (response.data.data.dataCount % pageSize === 0 ? pageSize : response.data.data.dataCount % pageSize) : 0
if (!response.data.data.data.length) {
this.freeList = 10
}
} else {
bus.$emit('alert', response.data.message)
}
} else {
bus.$emit('alert', response + '.')
}
})
}
},
watch: {
page (val, oldVal) {
this.findAllMsg()
},
ptSelectedData (val, oldVal) {
this.findAllMsg()
}
},
filters: {
format1 (timestemp) {
return moment(timestemp).format('YYYY-MM-DD hh:mm')
}
}
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.checkInfoVue{ .checkInfoVue{
padding: 0 50px; padding: 0 50px;
max-width: 1440px; max-width: 1600px;
margin: auto; margin: auto;
.title{ .title{
padding: 10px 0; padding: 15px 0;
.right{ .right{
float: right; float: right;
height: 100%; height: 100%;
...@@ -30,4 +179,48 @@ export default { ...@@ -30,4 +179,48 @@ export default {
} }
} }
} }
.maxLen{
display: inline-block;
max-width: 410px;
line-height: 1;
overflow: hidden;
text-overflow:ellipsis;
white-space: nowrap;
}
.pageList{
margin-top: 30px;
margin-bottom: 10px;
}
tr:not(:first-child){
td:first-child:before{
display: none;
content: "";
position: absolute;
left: 0;
top: 50%;
line-height: 1;
font-size: 12px;
padding: 4px;
border-radius: 10px;
background-color: #000;
color: #fff;
transform: translate(-70%, -50%);
box-shadow: 0 0 10px rgba(0, 0, 0, .7), -2px 3px 5px rgba(255, 255, 255, .5) inset;
}
&.lv-1 td:first-child:before{
display: block;
content: "紧急";
background-color: red;
}
&.lv-2 td:first-child:before{
display: block;
content: "略急";
background-color: yellow;
}
&.lv-3 td:first-child:before{
display: block;
content: "不急";
background-color: green;
}
}
</style> </style>
src/main/webapp/datamanage/src/components/CheckTemplate/CheckTemplate.vue
<template lang="html"> <template lang="html">
<div class="checkTemplateVue"> <div class="checkTemplateVue">
checkTemplateVue <div class="title">
<input type="text" name="" value="" class="searchInput" spellcheck="false" placeholder="模板名" v-model="tempName" @keydown.enter="findAllTmp()">
<div class="right">
<button type="button" class="btn1" @click="popup.checkTemplateAdd = true" v-if="userInfo.lv>=2">新建模板</button>
<button type="button" class="btn1" @click="del()" v-if="userInfo.lv>=2">删除模板</button>
</div>
</div>
<div class="table">
<table>
<tr>
<td>编号</td>
<td>模板名</td>
<td>渠道</td>
<td>创建者</td>
<td v-if="userInfo.lv>=2">详细信息</td>
<td v-if="userInfo.lv>=2">开关(off/on)</td>
<td v-if="userInfo.lv>=2">标记</td>
</tr>
<tr v-for="n,i in tempData.data">
<td>{{ i + 1 + (page - 1) * 10 }}.</td>
<td>
<p class="lengthLimit" :title="n.tempName">{{ n.tempName }}</p>
</td>
<td>{{ n.pt }}</td>
<td>{{ n.creator }}</td>
<td v-if="userInfo.lv>=2">
<button type="button" class="btn2" @click="popup.checkInfoDetails = true, childrenData = n">详情</button>
</td>
<td v-if="userInfo.lv>=2">
<label :for="'toggle' + i" class="toggle">
<input type="checkbox" name="" value="" :id="'toggle' + i" v-model="toggle[i]">
<span @click="tempToggle(i)"></span>
</label>
</td>
<td v-if="userInfo.lv>=2">
<label :for="'checkbox' + i" class="checkbox">
<input type="checkbox" name="" value="" :id="'checkbox' + i" v-model="checkbox[i]">
<span></span>
</label>
</td>
</tr>
<tr class="empty" v-for="n,i in freeList">
<td><!-- 编号 --></td>
<td><!-- 模板名 --></td>
<td><!-- 渠道 --></td>
<td><!-- 创建者 --></td>
<td v-if="userInfo.lv>=2"><!-- 详细信息 --></td>
<td v-if="userInfo.lv>=2"><!-- 开关(off/on) --></td>
<td v-if="userInfo.lv>=2"><!-- 标记 --></td>
</tr>
</table>
<div class="pageList">
<div @click="page = page - 1 < 1 ? 1 : page - 1">Provious</div>
<div @click="page = n" :class="{ 'active': page === n }" v-for="n,i in pageList">{{ n }}</div>
<div @click="page = page + 1 > pages ? pages : page + 1">Next</div> / 总共 {{ tempData.pageCount || 1 }} 页
</div>
</div>
<!-- 检测模板详情 -->
<div class="mask" v-if="popup.checkInfoDetails">
<check-template-details
@close="popup.checkInfoDetails = false"
:user-info="userInfo"
:children-data="childrenData"
@update="findAllTmp()"
:all-fields="allFields"
:pt-selected-data="ptSelectedData" />
</div>
<!-- 删除模板 -->
<div class="mask" v-if="popup.checkTemplateDelete">
<check-template-delete
@close="popup.checkTemplateDelete = false"
:children-data="childrenData"
@update="findAllTmp()"
:checked-template="checkedTemplate"
@clear-checkbox="clearCheckbox()"
:pt-selected-data="ptSelectedData" />
</div>
<!-- 新建模板 -->
<div class="mask" v-if="popup.checkTemplateAdd">
<check-template-add
@close="popup.checkTemplateAdd = false"
:user-info="userInfo"
@update="findAllTmp()"
:all-fields="allFields"
:pt-selected-data="ptSelectedData" />
</div>
</div> </div>
</template> </template>
<script> <script>
import checkTemplateDetails from '@/components/module/checkTemplateDetails'
import checkTemplateDelete from '@/components/module/checkTemplateDelete'
import checkTemplateAdd from '@/components/module/checkTemplateAdd'
import { bus, requestFindAllTmp, requestStartTmp, requestStopTmp } from '@/vuex/request.js'
import { getPageList } from '@/assets/js/get-page-list.js'
export default { export default {
components: {
checkTemplateDetails,
checkTemplateDelete,
checkTemplateAdd
},
data () {
return {
page: 0,
pages: 7,
pageList: [1],
popup: {
checkInfoDetails: false,
checkTemplateDelete: false,
checkTemplateAdd: false
},
toggle: [false, false, false, false, false, false, false, false, false, false],
checkbox: [false, false, false, false, false, false, false, false, false, false],
tempName: '',
tempData: {},
freeList: 10,
pageSize: 10,
childrenData: {},
checkedTemplate: []
}
},
props: ['userInfo', 'allFields', 'ptSelectedData'],
mounted () {
this.page = 1
},
methods: {
clearCheckbox () {
this.checkbox = [false, false, false, false, false, false, false, false, false, false]
},
tempToggle (i) {
let params = {
templateId: this.tempData.data[i].templateId
}
if (!this.toggle[i]) {
requestStartTmp(params, {}, (response) => {
if (response.data) {
if (response.data.state) {
this.findAllTmp()
} else {
bus.$emit('alert', response.data.message)
}
} else {
bus.$emit('alert', response + '.')
}
})
} else {
requestStopTmp(params, {}, (response) => {
if (response.data) {
if (response.data.state) {
this.findAllTmp()
} else {
bus.$emit('alert', response.data.message)
}
} else {
bus.$emit('alert', response + '.')
}
})
}
},
del () {
if (!this.checkbox.some((n, i) => { return n === true })) {
bus.$emit('alert', '您没有选择任何选项！')
} else {
this.popup.checkTemplateDelete = true
this.checkedTemplate = []
this.checkbox.forEach((n, i) => {
if (n) {
this.checkedTemplate.push(this.tempData.data[i])
}
})
}
},
findAllTmp () {
let pageSize = this.pageSize
let params = {
pageNo: this.page,
pageSize: pageSize,
tempName: this.tempName,
pt: this.ptSelectedData.pt
}
requestFindAllTmp(params, {}, (response) => {
if (response.data) {
if (response.data.state) {
this.tempData = response.data.data
this.pages = response.data.data.pageCount
this.pageList = getPageList({
displayCount: 7, // 显示的页面总数（最大值）
page: Math.max(this.page, 1), // 当前页面
pages: Math.max(response.data.data.pageCount, 1) // 总页数
})
this.freeList = this.page === response.data.data.pageCount ? pageSize - (response.data.data.dataCount % pageSize === 0 ? pageSize : response.data.data.dataCount % pageSize) : 0
if (!response.data.data.data.length) {
this.freeList = 10
}
this.toggle = response.data.data.data.map((n, i) => {
return n.open
})
} else {
bus.$emit('alert', response.data.message)
}
} else {
bus.$emit('alert', response + '.')
}
})
}
},
watch: {
page (val, oldVal) {
this.findAllTmp()
},
ptSelectedData (val, oldVal) {
this.findAllTmp()
}
}
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.checkTemplateVue{ .checkTemplateVue{
padding: 0 50px;
max-width: 1600px;
margin: auto;
.title{
padding: 15px 0;
.right{
float: right;
height: 100%;
vertical-align: middle;
text-align: right;
line-height: 36px;
button:nth-of-type(n + 2){
margin-left: 10px;
}
}
}
}
.pageList{
margin-top: 30px;
margin-bottom: 10px;
} }
</style> </style>
src/main/webapp/datamanage/src/components/DetailedData/DetailedData.vue
<template lang="html"> <template lang="html">
<div class="detailedDataVue"> <div class="detailedDataVue">
detailedDataVue <div class="title">
选择时间段：
<input type="text" name="" class="dateInput" placeholder="2017-12-12" id="detailedDataStartTime" readonly>
<select class="" name="" v-model="startHours" @change="echartsUpdate()">
<option v-for="n,i in 24" :value="i">{{ i < 10 ? '0' + i : i }}</option>
</select> 小时 ——
<input type="text" name="" class="dateInput" placeholder="2017-12-12" id="detailedDataEndTime" readonly>
<select class="" name="" v-model="endHours" @change="echartsUpdate()">
<option v-for="n,i in 24" :value="i">{{ i < 10 ? '0' + i : i }}</option>
</select> 小时
<select class="" name="" class="method" v-model="method">
<option value="source">来源</option>
<option value="tempName">模板</option>
<option value="type">type</option>
</select> ：
<input type="text" name=""
v-model="methodValue"
class="channel"
spellcheck="false"
@blur="toggle.matchingList = false"
@focus="searchValue(), toggle.matchingList = true"
@keyup="searchValue()"
@keydown.enter="echartsUpdate()">
<!-- <button type="button" class="btn2" @click="echartsUpdate()">搜索</button> -->
<ul class="matchingList" v-show="toggle.matchingList">
<li v-for="n,i in matchingWord" @mousedown="inputToSearch(n)">{{ n }}</li>
</ul>
</div>
<div class="table">
<div id="myECharts"></div>
<div class="select">
单位：
<select class="" name="" v-model="timeType" @change="echartsUpdate()">
<option value="day">天</option>
<option value="hour">小时</option>
</select>
</div>
</div>
</div> </div>
</template> </template>
<script> <script>
import echarts from 'echarts'
import moment from 'moment'
import _ from 'lodash'
import { bus, requestGetDataByTempName, requestGetSource } from '@/vuex/request.js'
export default { export default {
data () {
return {
myChart: null,
option: {},
startTime: (new Date(moment().format('YYYY-MM-DD'))).getTime() - 1000 * 60 * 60 * 24 * 7,
endTime: (new Date(moment().format('YYYY-MM-DD'))).getTime(),
startHours: 0,
endHours: 0,
colorList: ['#4FCF94', '#F8656B', '#ffbb22', '#4CB1F5', '', '', '', '', '', ''],
data: [],
timeType: 'day',
methodValue: 'IT时报',
method: 'tempName',
matchingWord: [],
toggle: {
matchingList: false
}
}
},
mounted () {
// 自定义日历插件
let self = this
setTimeout(() => {
// startTime
window.$('#detailedDataStartTime').val(moment(self.startTime).format('YYYY-MM-DD'))
window.$('#detailedDataStartTime').DatePicker({
format: 'Y-m-d',
date: window.$('#detailedDataStartTime').val(),
current: window.$('#detailedDataStartTime').val(),
starts: 1,
position: 'bottom',
onBeforeShow: function () {
window.$('#detailedDataStartTime').DatePickerSetDate(window.$('#detailedDataStartTime').val(), true)
},
onChange: function (formated, dates) {
console.log(formated, dates)
self.startTime = dates.getTime()
self.echartsUpdate()
window.$('#detailedDataStartTime').val(formated)
window.$('#detailedDataStartTime').DatePickerHide()
}
})
// endTime
window.$('#detailedDataEndTime').val(moment(self.endTime).format('YYYY-MM-DD'))
window.$('#detailedDataEndTime').DatePicker({
format: 'Y-m-d',
date: window.$('#detailedDataEndTime').val(),
current: window.$('#detailedDataEndTime').val(),
starts: 1,
position: 'bottom',
onBeforeShow: function () {
window.$('#detailedDataEndTime').DatePickerSetDate(window.$('#detailedDataEndTime').val(), true)
},
onChange: function (formated, dates) {
console.log(formated, dates)
self.endTime = dates.getTime()
self.echartsUpdate()
window.$('#detailedDataEndTime').val(formated)
window.$('#detailedDataEndTime').DatePickerHide()
}
})
})
// 初始化 ECharts
// 基于准备好的dom，初始化echarts实例
this.myChart = echarts.init(document.getElementById('myECharts'))
// 指定图表的配置项和数据
this.option = {
title: {
text: '渠道信息数量折线图',
textStyle: {
color: '#fff'
},
left: 'center',
top: 10
},
tooltip: {},
toolbox: {
feature: {
dataView: {},
saveAsImage: {
pixelRatio: 2
},
restore: {}
}
},
grid: {
show: true,
borderColor: '#515B65',
left: 60,
right: 60,
top: 100
},
axisPointer: {
show: true,
snap: true,
triggerTooltip: false,
lineStyle: {
type: 'dashed'
}
},
xAxis: {
type: 'time',
axisLine: {
lineStyle: {
color: '#515B65'
}
},
splitLine: {
lineStyle: {
color: '#515B65'
}
},
maxInterval: 3600 * 24 * 1000,
axisLabel: {
formatter: () => {}
}
},
yAxis: {
type: 'value',
axisLine: {
lineStyle: {
color: '#515B65'
}
},
splitLine: {
lineStyle: {
color: '#515B65'
}
}
},
legend: {
// data: ['微博', '微信', '网媒'],
x: 60,
y: '10%',
textStyle: {
color: '#ccc'
}
// selected: {
// '微博': true,
// '微信': true,
// '网媒': true
// }
},
series: []
}
// 使用刚指定的配置项和数据显示图表。
setTimeout(() => {
window.$(window).on('resize', () => { this.myChart.resize() })
})
this.echartsUpdate()
},
methods: {
inputToSearch (str) {
this.methodValue = str
this.matchingWord = []
this.echartsUpdate()
},
searchValue () {
let params = {
method: this.method,
value: this.methodValue
}
requestGetSource(params, {}, (response) => {
if (response.data) {
if (response.data.state) {
this.matchingWord = response.data.data
this.toggle.matchingList = true
} else {
// bus.$emit('alert', response.data.message)
console.log(response.data.message)
}
} else {
// bus.$emit('alert', response + '.')
console.log(response + '.')
}
})
},
echartsUpdate () {
let params = {
start: 0,
end: 0,
timeType: this.timeType,
method: this.method
}
params[this.method] = this.methodValue
if (this.timeType === 'day') {
params.start = this.startTime
params.end = this.endTime
this.option.xAxis.maxInterval = 1000 * 60 * 60 * 24
this.option.xAxis.axisLabel.formatter = (n, i) => { return moment(n).format('MM-DD') }
} else if (this.timeType === 'hour') {
params.start = this.startTime + this.startHours * 1000 * 60 * 60
params.end = this.endTime + this.endHours * 1000 * 60 * 60
this.option.xAxis.maxInterval = 1000 * 60 * 24 * 2
this.option.xAxis.axisLabel.formatter = (n, i) => { return moment(n).format('HH:00') }
if (Math.abs(params.start - params.end) > 1000 * 60 * 60 * 24) {
bus.$emit('alert', '单位为小时则时间段不可超过一天(即：1000 * 60 * 60 * 24 = ' + (1000 * 60 * 60 * 24) + 'ms)(current: ' + (Math.abs(params.start - params.end)) + ')')
this.timeType = 'day'
this.option.xAxis.maxInterval = 1000 * 60 * 60 * 24
this.option.xAxis.axisLabel.formatter = (n, i) => { return moment(n).format('MM-DD') }
return false
}
} else {
bus.$emit('alert', '选择时间段错误！(Error code: 159)')
return false
}
requestGetDataByTempName(params, {}, (response) => {
if (response.data) {
if (response.data.state) {
// 清空
this.option.legend.data = []
this.option.legend.selected = {}
this.option.series = []
// 赋值
this.data = response.data.data
this.option.legend.data.push(this.data.value)
this.option.legend.selected[this.data.value] = true
this.option.series.push({
name: this.data.value,
type: 'line',
smooth: true,
symbolSize: 10,
itemStyle: {
normal: {
borderWidth: 3,
color: this.colorList[0]
}
},
lineStyle: {
normal: {
width: 3,
color: this.colorList[0]
}
},
data: _.sortBy(this.data.list, (n) => {
return moment(n.time)
}).map((n, i) => {
return [n.time, n.count]
})
})
this.myChart.setOption(this.option)
} else {
bus.$emit('alert', response.data.message)
}
} else {
bus.$emit('alert', response + '.')
}
})
}
}
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.detailedDataVue{ .detailedDataVue{
padding: 0 50px;
max-width: 1600px;
margin: auto;
.title{
padding: 15px 0;
color: #868D93;
position: relative;
z-index: 10;
input, select{
max-width: 130px;
height: 33px;
background-color: #282D33;
border: 1px solid #525A65;
color: #4F5762;
text-align: center;
background-image: url('/static/img/select_01.png');
background-repeat: no-repeat;
background-size: contain;
background-position: right;
padding-right: 33px;
margin-right: 20px;
&.dateInput{
margin-right: 0;
&+select{
margin-right: 0;
cursor: pointer;
}
}
&.channel{
background-image: none;
text-align: left;
padding: 3px 6px;
}
&.method{
margin-right: 0;
margin-left: 40px;
color: #868D93;
}
}
select{
position: relative;
top: -1px;
}
&>button{
letter-spacing: 5px;
}
.matchingList{
position: absolute;
left: 753px;
top: 47px;
background-color: #282D33;
border: 1px solid #525A65;
max-height: 500px;
overflow-y: auto;
li{
padding: 5px;
cursor: pointer;
transition: all .5s ease;
max-width: 300px;
overflow: hidden;
text-overflow:ellipsis;
white-space: nowrap;
&:hover{
color: #4CB1F5;
background-color: #525A65;
}
}
}
}
.table{
position: relative;
.select{
position: absolute;
right: 10%;
top: 60px;
color: #fff;
select{
height: 31px;
background-color: #000;
border: 1px solid #394048;
background-image: url('/static/img/select_02.png');
}
}
}
#myECharts{
width: 100%;
height: 620px;
}
} }
</style> </style>
src/main/webapp/datamanage/src/components/Login/Login.vue
<template lang="html"> <template lang="html">
<div class="loginVue"> <div class="loginVue">
Login <img src="static/img/logo.png" alt="" class="logo">
<div class=""> <div class="loginForm">
lorem <div class="title">
<img src="static/img/login_title.png" alt="">
</div>
<div class="form">
<input type="text" name="username" class="username" v-model="username" spellcheck="false" placeholder="User name" @keydown.enter="login()">
<input type="password" name="password" class="password" v-model="password" spellcheck="false" placeholder="Password" @keydown.enter="login()">
<div class="remember">
<label for="loginCheckbox" class="checkbox">
<input type="checkbox" name="" v-model="isRemember" id="loginCheckbox">
<span></span>
Remember me
</label>
</div>
<button type="button" class="btn4" @click="login()">登录</button>
</div>
</div> </div>
</div> </div>
</template> </template>
<script> <script>
import { bus, requestLogin } from '@/vuex/request.js'
export default { export default {
data () {
return {
username: 'user',
password: '123456',
isRemember: false
}
},
mounted () {
},
methods: {
login () {
if (this.username === '' || this.password === '') {
bus.$emit('alert', '用户名和密码不可为空！')
return false
}
let params = {
username: this.username,
password: this.password,
isRemember: this.isRemember
}
// this.$router.push({'path': '/checkInfo'})
requestLogin(params, {}, (response) => {
if (response.data) {
if (response.data.state) {
bus.$emit('setUserInfo', response.data.data)
bus.$emit('alert', response.data.message)
this.$router.push({'path': '/channelData'})
} else {
bus.$emit('alert', response.data.message)
}
} else {
bus.$emit('alert', response + '.')
}
})
}
}
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.loginVue{ .loginVue{
padding: 15px 45px 0 45px;
background-image: url('/static/img/bg.png');
.loginForm{
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
.title{
margin-bottom: 20px;
img{
margin: auto;
}
}
.form{
width: 500px;
height: 400px;
border: 2px solid #3B444D;
border-radius: 3px;
background-color: #23282E;
padding: 60px 30px;
color: #49515C;
box-shadow: 0 0 40px 0 rgba(11, 3, 5, .75), 0 0 10px 0 rgba(11, 3, 5, .75) inset;
&>input{
display: block;
width: 100%;
height: 40px;
border-color: transparent;
border-bottom-color: #49515C;
transition: all .5s ease;
font-size: 18px;
background-repeat: no-repeat;
background-position: right center;
&.username{
margin-bottom: 30px;
background-image: url('/static/img/username_1.png');
&:focus{
border-bottom-color: #49AFF7;
background-image: url('/static/img/username_2.png');
}
}
&.password{
margin-bottom: 10px;
background-image: url('/static/img/password_1.png');
&:focus{
border-bottom-color: #49AFF7;
background-image: url('/static/img/password_2.png');
}
}
&::-webkit-input-placeholder { /* WebKit browsers */
color: #49515C;
}
&:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
color: #49515C;
}
&::-moz-placeholder { /* Mozilla Firefox 19+ */
color: #49515C;
}
&:-ms-input-placeholder { /* Internet Explorer 10+ */
color: #49515C;
}
}
.remember{
padding-left: 20px;
span{
margin-right: 10px;
}
}
button.btn4:not([disabled]){
margin-top: 75px;
font-size: 18px;
}
}
}
} }
</style> </style>
src/main/webapp/datamanage/src/components/ProcessingRecord/ProcessingRecord.vue
<template lang="html"> <template lang="html">
<div class="processingRecordVue"> <div class="processingRecordVue">
processingRecordVue <div class="title">
<input type="text" name="" value="" class="searchInput" spellcheck="false" placeholder="模板名" v-model="tempName" @keydown.enter="findAllHandleMsg()">
<div class="right">
<button type="button" class="btn1" @click="del()" v-if="userInfo.lv>=2">删除信息</button>
</div>
</div>
<div class="table">
<table>
<tr>
<td>编号</td>
<td>模板名</td>
<td>渠道</td>
<td>产生时间</td>
<td>检测信息</td>
<td>处理人</td>
<td v-if="userInfo.lv>=2">详细信息</td>
<td v-if="userInfo.lv>=2">标记</td>
</tr>
<tr v-for="n,i in handleData.data">
<td>{{ i + 1 + (page - 1) * 10 }}.</td>
<td>
<p class="lengthLimit-new">{{ n.templateName }}</p>
</td>
<td>网媒</td>
<td>{{ n.handleDate | format1 }}</td>
<td><span class="maxLen">{{ n.errorMsg }}</span></td>
<td>{{ n.handler }}</td>
<td v-if="userInfo.lv>=2">
<button type="button" class="btn2" @click="popup.processingRecordDetails = true, childrenData = n">详情</button>
</td>
<td v-if="userInfo.lv>=2">
<label :for="'checkbox' + i" class="checkbox">
<input type="checkbox" name="" value="" :id="'checkbox' + i" v-model="checkbox[i]">
<span></span>
</label>
</td>
</tr>
<tr class="empty" v-for="n,i in freeList">
<td><!-- 编号 --></td>
<td><!-- 模板名 --></td>
<td><!-- 渠道 --></td>
<td><!-- 产生时间 --></td>
<td><!-- 检测信息 --></td>
<td><!-- 处理人 --></td>
<td v-if="userInfo.lv>=2"><!-- 详细信息 --></td>
<td v-if="userInfo.lv>=2"><!-- 标记 --></td>
</tr>
</table>
<div class="pageList">
<div @click="page = page - 1 < 1 ? 1 : page - 1">Provious</div>
<div @click="page = n" :class="{ 'active': page === n }" v-for="n,i in pageList">{{ n }}</div>
<div @click="page = page + 1 > pages ? pages : page + 1">Next</div> / 总共 {{ handleData.pageCount || 1 }} 页
</div>
</div>
<!-- 检测信息详情 -->
<div class="mask" v-if="popup.processingRecordDetails">
<processing-record-details @close="popup.processingRecordDetails = false" :children-data="childrenData" />
</div>
<!-- 删除处理记录 -->
<div class="mask" v-if="popup.processingRecordDelete">
<processing-record-delete @close="popup.processingRecordDelete = false" :children-data="childrenData" :checked-message="checkedMessage" @update="findAllHandleMsg()" @clear-checkbox="clearCheckbox()" />
</div>
</div> </div>
</template> </template>
<script> <script>
import processingRecordDetails from '@/components/module/processingRecordDetails'
import processingRecordDelete from '@/components/module/processingRecordDelete'
import { bus, requestFindHandleMsg } from '@/vuex/request.js'
import { getPageList } from '@/assets/js/get-page-list.js'
import moment from 'moment'
export default { export default {
components: {
processingRecordDetails,
processingRecordDelete
},
data () {
return {
page: 0,
pages: 7,
pageList: [1],
popup: {
processingRecordDetails: false,
processingRecordDelete: false
},
checkbox: [false, false, false, false, false, false, false, false, false, false],
tempName: '',
handleData: {},
freeList: 10,
pageSize: 10,
childrenData: {},
checkedMessage: []
}
},
props: ['userInfo', 'ptSelectedData'],
mounted () {
this.page = 1
},
methods: {
clearCheckbox () {
this.checkbox = [false, false, false, false, false, false, false, false, false, false]
},
del () {
if (!this.checkbox.some((n, i) => { return n === true })) {
bus.$emit('alert', '您没有选择任何选项！')
} else {
this.popup.processingRecordDelete = true
this.checkedMessage = []
this.checkbox.forEach((n, i) => {
if (n) {
this.checkedMessage.push(this.handleData.data[i])
}
})
}
},
findAllHandleMsg () {
let pageSize = this.pageSize
let params = {
pageNo: this.page,
pageSize: pageSize,
tempName: this.tempName,
pt: this.ptSelectedData.pt
}
requestFindHandleMsg(params, {}, (response) => {
if (response.data) {
if (response.data.state) {
this.handleData = response.data.data
this.pages = response.data.data.pageCount
this.pageList = getPageList({
displayCount: 7, // 显示的页面总数（最大值）
page: Math.max(this.page, 1), // 当前页面
pages: Math.max(response.data.data.pageCount, 1) // 总页数
})
this.freeList = this.page === response.data.data.pageCount ? pageSize - (response.data.data.dataCount % pageSize === 0 ? pageSize : response.data.data.dataCount % pageSize) : 0
if (!response.data.data.data.length) {
this.freeList = 10
}
} else {
bus.$emit('alert', response.data.message)
}
} else {
bus.$emit('alert', response + '.')
}
})
}
},
watch: {
page (val, oldVal) {
this.findAllHandleMsg()
},
ptSelectedData (val, oldVal) {
this.findAllHandleMsg()
}
},
filters: {
format1 (timestemp) {
return moment(timestemp).format('YYYY-MM-DD hh:mm')
}
}
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.processingRecordVue{ .processingRecordVue{
padding: 0 50px;
max-width: 1600px;
margin: auto;
.title{
padding: 15px 0;
.right{
float: right;
height: 100%;
vertical-align: middle;
text-align: right;
line-height: 36px;
}
}
}
.maxLen{
display: inline-block;
max-width: 410px;
line-height: 1;
overflow: hidden;
text-overflow:ellipsis;
white-space: nowrap;
}
.lengthLimit{
display: inline-block;
line-height: 1;
max-width: 250px;
overflow: hidden;
text-overflow:ellipsis;
white-space: nowrap;
}
.pageList{
margin-top: 30px;
margin-bottom: 10px;
}
.lengthLimit-new{
max-width: 90px;
} }
</style> </style>
src/main/webapp/datamanage/src/components/UserManage/UserManage.vue
<template lang="html"> <template lang="html">
<div class="userManageVue"> <div class="userManageVue">
userManageVue <div class="title">
<input type="text" name="" value="" class="searchInput" spellcheck="false" placeholder="搜索用户" v-model="username" @keydown.enter="getUserList()">
<div class="right">
<button type="button" class="btn1" @click="popup.userAdd = true" v-if="userInfo.lv>=3">新建用户</button>
<button type="button" class="btn1" @click="del()" v-if="userInfo.lv>=3">删除用户</button>
</div>
</div>
<div class="table">
<table>
<tr>
<td>编号</td>
<td>用户名</td>
<td>密码</td>
<td>等级</td>
<td>最后一次登录</td>
<td>创建时间</td>
<td>创建者</td>
<td v-if="userInfo.lv>=3">修改用户</td>
<td v-if="userInfo.lv>=3">标记</td>
</tr>
<tr v-for="n,i in userData.data">
<td>{{ i + 1 + (page - 1) * 10 }}.</td>
<td>
<p class="lengthLimit" :title="n.username">{{ n.username }}</p>
</td>
<td>{{ n.password }}</td>
<td>{{ n.lv }}</td>
<td>{{ n.lastLogin | format1 }}</td>
<td>{{ n.createDate | format1 }}</td>
<td>{{ n.creator }}</td>
<td v-if="userInfo.lv>=3">
<button type="button" class="btn2" @click="popup.userEdit = true, childrenData = n" v-if="n.personId !== userInfo.personId">修改</button>
</td>
<td v-if="userInfo.lv>=3">
<label :for="'checkbox' + i" class="checkbox" v-if="n.personId !== userInfo.personId">
<input type="checkbox" name="" value="" :id="'checkbox' + i" v-model="checkbox[i]">
<span></span>
</label>
</td>
</tr>
<tr class="empty" v-for="n,i in freeList">
<td><!-- 编号 --></td>
<td><!-- 用户名 --></td>
<td><!-- 密码 --></td>
<td><!-- 等级 --></td>
<td><!-- 最后一次登录 --></td>
<td><!-- 创建时间 --></td>
<td><!-- 创建者 --></td>
<td v-if="userInfo.lv>=3"><!-- 修改用户 --></td>
<td v-if="userInfo.lv>=3"><!-- 标记 --></td>
</tr>
</table>
<div class="pageList">
<div @click="page = page - 1 < 1 ? 1 : page - 1">Provious</div>
<div @click="page = n" :class="{ 'active': page === n }" v-for="n,i in pageList">{{ n }}</div>
<div @click="page = page + 1 > pages ? pages : page + 1">Next</div> / 总共 {{ userData.pageCount || 1 }} 页
</div>
</div>
<!-- 删除用户 -->
<div class="mask" v-if="popup.userDelete">
<user-delete @close="popup.userDelete = false" @update="getUserList()" :checked-users="checkedUsers" @clear-checkbox="clearCheckbox()" />
</div>
<!-- 新建用户 -->
<div class="mask" v-if="popup.userAdd">
<user-add @close="popup.userAdd = false" @update="getUserList()" :userInfo="userInfo" />
</div>
<!-- 修改用户 -->
<div class="mask" v-if="popup.userEdit">
<user-edit @close="popup.userEdit = false" @update="getUserList()" :children-data="childrenData" />
</div>
</div> </div>
</template> </template>
<script> <script>
import moment from 'moment'
import { bus, requestGetPerson } from '@/vuex/request.js'
import { getPageList } from '@/assets/js/get-page-list.js'
import userDelete from '@/components/module/userDelete'
import userAdd from '@/components/module/userAdd'
import userEdit from '@/components/module/userEdit'
export default { export default {
components: {
userDelete,
userAdd,
userEdit
},
data () {
return {
page: 0,
pages: 7,
pageList: [1],
checkbox: [false, false, false, false, false, false, false, false, false, false],
popup: {
userDelete: false,
userAdd: false,
userEdit: false
},
username: '',
userData: {},
freeList: 10,
pageSize: 10,
childrenData: {},
checkedUsers: []
}
},
props: ['userInfo'],
mounted () {
this.page = 1
},
methods: {
clearCheckbox () {
this.checkbox = [false, false, false, false, false, false, false, false, false, false]
},
del () {
if (!this.checkbox.some((n, i) => { return n === true })) {
bus.$emit('alert', '您没有选择任何选项！')
} else {
this.popup.userDelete = true
this.checkedUsers = []
this.checkbox.forEach((n, i) => {
if (n) {
this.checkedUsers.push(this.userData.data[i])
}
})
}
},
getUserList () {
let pageSize = this.pageSize
let params = {
pageNo: this.page,
pageSize: pageSize,
username: this.username,
lv: this.userInfo.lv
}
requestGetPerson(params, {}, (response) => {
if (response.data) {
if (response.data.state) {
this.userData = response.data.data
this.pages = response.data.data.pageCount
this.pageList = getPageList({
displayCount: 7, // 显示的页面总数（最大值）
page: Math.max(this.page, 1), // 当前页面
pages: Math.max(response.data.data.pageCount, 1) // 总页数
})
this.freeList = this.page === response.data.data.pageCount ? pageSize - (response.data.data.dataCount % pageSize === 0 ? pageSize : response.data.data.dataCount % pageSize) : 0
if (!response.data.data.data.length) {
this.freeList = 10
}
} else {
bus.$emit('alert', response.data.message)
}
} else {
bus.$emit('alert', response + '.')
}
})
}
},
watch: {
page (val, oldVal) {
this.getUserList()
}
},
filters: {
format1 (timestemp) {
return moment(timestemp).format('YYYY-MM-DD HH:mm:ss')
}
}
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.userManageVue{ .userManageVue{
padding: 0 50px;
max-width: 1600px;
margin: auto;
.title{
padding: 15px 0;
.right{
float: right;
height: 100%;
vertical-align: middle;
text-align: right;
line-height: 36px;
button:nth-of-type(n + 2){
margin-left: 10px;
}
}
}
}
.pageList{
margin-top: 30px;
margin-bottom: 10px;
} }
</style> </style>
src/main/webapp/datamanage/src/main.js
...@@ -15,4 +15,4 @@ new Vue({ ...@@ -15,4 +15,4 @@ new Vue({
}) })
/* 初始化CSS样式，并定义默认样式 */ /* 初始化CSS样式，并定义默认样式 */
require('static/css/style.ini.css') // require('static/css/style.ini.css')
src/main/webapp/datamanage/src/router/index.js
...@@ -7,73 +7,146 @@ import ProcessingRecord from '@/components/ProcessingRecord/ProcessingRecord' ...@@ -7,73 +7,146 @@ import ProcessingRecord from '@/components/ProcessingRecord/ProcessingRecord'
import ChannelData from '@/components/ChannelData/ChannelData' import ChannelData from '@/components/ChannelData/ChannelData'
import DetailedData from '@/components/DetailedData/DetailedData' import DetailedData from '@/components/DetailedData/DetailedData'
import UserManage from '@/components/UserManage/UserManage' import UserManage from '@/components/UserManage/UserManage'
import NotFoundComponent from '@/components/NotFoundComponent/NotFoundComponent'
import FieldTableInfo from '@/components/FieldTableInfo/FieldTableInfo'
import DatabaseInfo from '@/components/DatabaseInfo/DatabaseInfo'
import ChannelTableInfo from '@/components/ChannelTableInfo/ChannelTableInfo'
import Reload from '@/components/module/Reload'
Vue.use(Router) Vue.use(Router)
let router = new Router({
export default new Router({
routes: [ routes: [
{ {
path: '/', path: '/',
name: 'Login', name: 'Login',
component: Login, component: Login,
pageTitle: '用户登录',
meta: { meta: {
pageTitle: '用户登录' pageTitle: '用户登录',
accessAllowLv: 1
} }
}, },
{ {
path: '/CheckInfo', path: '/checkInfo',
name: 'CheckInfo', name: 'CheckInfo',
component: CheckInfo, component: CheckInfo,
pageTitle: '检测信息',
meta: { meta: {
pageTitle: '检测信息' pageTitle: '检测信息',
accessAllowLv: 2
} }
}, },
{ {
path: '/CheckTemplate', path: '/checkTemplate',
name: 'CheckTemplate', name: 'CheckTemplate',
component: CheckTemplate, component: CheckTemplate,
pageTitle: '检测模板',
meta: { meta: {
pageTitle: '检测模板' pageTitle: '检测模板',
accessAllowLv: 2
} }
}, },
{ {
path: '/ProcessingRecord', path: '/processingRecord',
name: 'ProcessingRecord', name: 'ProcessingRecord',
component: ProcessingRecord, component: ProcessingRecord,
pageTitle: '处理记录',
meta: { meta: {
pageTitle: '处理记录' pageTitle: '处理记录',
accessAllowLv: 2
} }
}, },
{ {
path: '/ChannelData', path: '/channelData',
name: 'ChannelData', name: 'ChannelData',
component: ChannelData, component: ChannelData,
pageTitle: '渠道数据',
meta: { meta: {
pageTitle: '渠道数据' pageTitle: '渠道数据',
accessAllowLv: 1
} }
}, },
{ {
path: '/DetailedData', path: '/detailedData',
name: 'DetailedData', name: 'DetailedData',
component: DetailedData, component: DetailedData,
pageTitle: '详细数据',
meta: { meta: {
pageTitle: '详细数据' pageTitle: '详细数据',
accessAllowLv: 1
} }
}, },
{ {
path: '/UserManage', path: '/userManage',
name: 'UserManage', name: 'UserManage',
component: UserManage, component: UserManage,
meta: {
pageTitle: '用户管理', pageTitle: '用户管理',
accessAllowLv: 3
}
},
{
path: '/fieldTableInfo',
name: 'FieldTableInfo',
component: FieldTableInfo,
meta: {
pageTitle: '字段表信息',
accessAllowLv: 3
}
},
{
path: '/databaseInfo',
name: 'DatabaseInfo',
component: DatabaseInfo,
meta: {
pageTitle: '数据库信息',
accessAllowLv: 3
}
},
{
path: '/channelTableInfo',
name: 'ChannelTableInfo',
component: ChannelTableInfo,
meta: { meta: {
pageTitle: '用户管理' pageTitle: '渠道表信息',
accessAllowLv: 3
}
},
{
path: '/reload',
name: 'Reload',
component: Reload,
meta: {
pageTitle: 'reload',
accessAllowLv: 1
}
},
{
path: '*',
name: 'NotFoundComponent',
component: NotFoundComponent,
meta: {
pageTitle: '404',
accessAllowLv: 1
} }
} }
] ]
}) })
let userInfo = JSON.parse(window.sessionStorage.getItem('userInfo'))
router.afterEach((to, from) => {
// 登录状态判断
if (to.path !== '/' && !window.sessionStorage.getItem('userInfo')) {
// 未登陆 跳转到登录页
router.push({'path': '/'})
} else if (to.path === '/' && window.sessionStorage.getItem('userInfo')) {
// 已登录 不能手动跳转到登录页
router.go(-1)
} else if (userInfo && userInfo.lv < to.meta.accessAllowLv) {
// 访问权限不足
router.go(-1)
}
// 返回页面顶端
setTimeout(() => {
window.$('#app>section').scrollTop(0)
})
// 修改 title
document.title = to.meta.pageTitle + ' | 数据管理系统'
})
export default router
src/main/webapp/datamanage/src/vuex/request.js
...@@ -3,25 +3,476 @@ import Vue from 'Vue' ...@@ -3,25 +3,476 @@ import Vue from 'Vue'
// 非父子组件之间通信 // 非父子组件之间通信
export const bus = new Vue() export const bus = new Vue()
// http://192.168.0.239:8080/api/ // http://192.168.0.245:8081/datamanage/
export const dataUrl = '/api/' export const dataUrl = '/datamanage/'
// -------------------- 危机案例可视化后台 - 修改token ------------------ // -------------------- 数据管理系统 - 修改token ------------------
// export let token = '' // export let token = ''
// export let reToken = (tok) => { // export let reToken = (tok) => {
// token = tok // token = tok
// } // }
// -------------------- 危机案例可视化后台 - 管理员登录 ------------------ login
// export let requestLogin = (params, data, callback) => {
// axios({
// url: dataUrl + 'login',
// method: 'post',
// params: params,
// data: data,
// headers: {'Content-type': 'application/json;charset=utf8', 'token': token} // headers: {'Content-type': 'application/json;charset=utf8', 'token': token}
// }).then((response) => {
// callback(response) // -------------------- 数据管理系统 - 用户登录 ------------------ login
// }).catch((response) => { export let requestLogin = (params, data, callback) => {
// callback(response) axios({
// }) url: dataUrl + 'login',
// } method: 'get',
params: params,
data: data
}).then((response) => {
callback(response)
}).catch((response) => {
callback(response)
})
}
// -------------------- 数据管理系统 - 用户退出登录 ------------------ leave
export let requestLeave = (params, data, callback) => {
axios({
url: dataUrl + 'leave',
method: 'get',
params: params,
data: data
}).then((response) => {
callback(response)
}).catch((response) => {
callback(response)
})
}
// -------------------- 数据管理系统 - 渠道数据 ------------------ getDataAll?start=0&end=0
export let requestGetDataAll = (params, data, callback) => {
axios({
url: dataUrl + 'getDataAll',
method: 'get',
params: params,
data: data
}).then((response) => {
callback(response)
}).catch((response) => {
callback(response)
})
}
// -------------------- 数据管理系统 - 详细数据 ------------------ getDataByTempName?start=0&end=0
export let requestGetDataByTempName = (params, data, callback) => {
axios({
url: dataUrl + 'getDataByTempName',
method: 'get',
params: params,
data: data
}).then((response) => {
callback(response)
}).catch((response) => {
callback(response)
})
}
// -------------------- 数据管理系统 - 详细数据 - 搜索词模糊匹配列表 ------------------ getSource
export let requestGetSource = (params, data, callback) => {
axios({
url: dataUrl + 'getSource',
method: 'get',
params: params,
data: data
}).then((response) => {
callback(response)
}).catch((response) => {
callback(response)
})
}
// -------------------- 数据管理系统 - 检测模板 - 获取列表信息 ------------------ findAllTmp
export let requestFindAllTmp = (params, data, callback) => {
axios({
url: dataUrl + 'findAllTmp',
method: 'get',
params: params,
data: data
}).then((response) => {
callback(response)
}).catch((response) => {
callback(response)
})
}
// -------------------- 数据管理系统 - 检测模板 - 新建模板 ------------------ saveTmp
export let requestSaveTmp = (params, data, callback) => {
axios({
url: dataUrl + 'saveTmp',
method: 'get',
params: params,
data: data
}).then((response) => {
callback(response)
}).catch((response) => {
callback(response)
})
}
// -------------------- 数据管理系统 - 检测模板 - 更新模板 ------------------ updateTmp
export let requestUpdateTmp = (params, data, callback) => {
axios({
url: dataUrl + 'updateTmp',
method: 'get',
params: params,
data: data
}).then((response) => {
callback(response)
}).catch((response) => {
callback(response)
})
}
// -------------------- 数据管理系统 - 检测模板 - 删除模板 ------------------ deleteTmp
export let requestDeleteTmp = (params, data, callback) => {
axios({
url: dataUrl + 'deleteTmp',
method: 'get',
params: params,
data: data
}).then((response) => {
callback(response)
}).catch((response) => {
callback(response)
})
}
// -------------------- 数据管理系统 - 检测模板 - 开关/on ------------------ startTmp
export let requestStartTmp = (params, data, callback) => {
axios({
url: dataUrl + 'startTmp',
method: 'get',
params: params,
data: data
}).then((response) => {
callback(response)
}).catch((response) => {
callback(response)
})
}
// -------------------- 数据管理系统 - 检测模板 - 开关/off ------------------ stopTmp
export let requestStopTmp = (params, data, callback) => {
axios({
url: dataUrl + 'stopTmp',
method: 'get',
params: params,
data: data
}).then((response) => {
callback(response)
}).catch((response) => {
callback(response)
})
}
// -------------------- 数据管理系统 - 检测信息 - 获取所有信息列表 ------------------ findAllMsg
export let requestFindAllMsg = (params, data, callback) => {
axios({
url: dataUrl + 'findAllMsg',
method: 'get',
params: params,
data: data
}).then((response) => {
callback(response)
}).catch((response) => {
callback(response)
})
}
// -------------------- 数据管理系统 - 检测信息 - 详情 - 处理 ------------------ handle
export let requestHandle = (params, data, callback) => {
axios({
url: dataUrl + 'handle',
method: 'get',
params: params,
data: data
}).then((response) => {
callback(response)
}).catch((response) => {
callback(response)
})
}
// -------------------- 数据管理系统 - 检测信息 - 删除信息 ------------------ deleteMsg
export let requestDeleteMsg = (params, data, callback) => {
axios({
url: dataUrl + 'deleteMsg',
method: 'get',
params: params,
data: data
}).then((response) => {
callback(response)
}).catch((response) => {
callback(response)
})
}
// -------------------- 数据管理系统 - 处理记录 - 获取记录列表 ------------------ findHandleMsg
export let requestFindHandleMsg = (params, data, callback) => {
axios({
url: dataUrl + 'findHandleMsg',
method: 'get',
params: params,
data: data
}).then((response) => {
callback(response)
}).catch((response) => {
callback(response)
})
}
// -------------------- 数据管理系统 - 用户管里 - 获取用户列表 ------------------ getPerson
export let requestGetPerson = (params, data, callback) => {
axios({
url: dataUrl + 'getPerson',
method: 'get',
params: params,
data: data
}).then((response) => {
callback(response)
}).catch((response) => {
callback(response)
})
}
// -------------------- 数据管理系统 - 用户管里 - 修改用户信息 ------------------ updatePerson
export let requestUpdatePerson = (params, data, callback) => {
axios({
url: dataUrl + 'updatePerson',
method: 'get',
params: params,
data: data
}).then((response) => {
callback(response)
}).catch((response) => {
callback(response)
})
}
// -------------------- 数据管理系统 - 用户管里 - 新建用户 ------------------ savePerson
export let requestSavePerson = (params, data, callback) => {
axios({
url: dataUrl + 'savePerson',
method: 'get',
params: params,
data: data
}).then((response) => {
callback(response)
}).catch((response) => {
callback(response)
})
}
// -------------------- 数据管理系统 - 用户管里 - 删除用户 ------------------ deletePerson
export let requestDeletePerson = (params, data, callback) => {
axios({
url: dataUrl + 'deletePerson',
method: 'get',
params: params,
data: data
}).then((response) => {
callback(response)
}).catch((response) => {
callback(response)
})
}
// -------------------- 数据管理系统 - 数据库信息 - 获取列表信息 ------------------ getServer
export let requestGetServer = (params, data, callback) => {
axios({
url: dataUrl + 'getServer',
method: 'get',
params: params,
data: data
}).then((response) => {
callback(response)
}).catch((response) => {
callback(response)
})
}
// -------------------- 数据管理系统 - 数据库信息 - 删除数据库 ------------------ deleteServer
export let requestDeleteServer = (params, data, callback) => {
axios({
url: dataUrl + 'deleteServer',
method: 'get',
params: params,
data: data
}).then((response) => {
callback(response)
}).catch((response) => {
callback(response)
})
}
// -------------------- 数据管理系统 - 数据库信息 - 新建数据库 ------------------ insertServer
export let requestInsertServer = (params, data, callback) => {
axios({
url: dataUrl + 'insertServer',
method: 'get',
params: params,
data: data
}).then((response) => {
callback(response)
}).catch((response) => {
callback(response)
})
}
// -------------------- 数据管理系统 - 数据库信息 - 更新数据库 ------------------ updateServer
export let requestUpdateServer = (params, data, callback) => {
axios({
url: dataUrl + 'updateServer',
method: 'get',
params: params,
data: data
}).then((response) => {
callback(response)
}).catch((response) => {
callback(response)
})
}
// -------------------- 数据管理系统 - 渠道表信息 - 获取列表 ------------------ getChannel
export let requestGetChannel = (params, data, callback) => {
axios({
url: dataUrl + 'getChannel',
method: 'get',
params: params,
data: data
}).then((response) => {
callback(response)
}).catch((response) => {
callback(response)
})
}
// -------------------- 数据管理系统 - 渠道表信息 - 新建列表 ------------------ insertChannel
export let requestInsertChannel = (params, data, callback) => {
axios({
url: dataUrl + 'insertChannel',
method: 'get',
params: params,
data: data
}).then((response) => {
callback(response)
}).catch((response) => {
callback(response)
})
}
// -------------------- 数据管理系统 - 渠道表信息 - 修改列表 ------------------ updateChannel
export let requestUpdateChannel = (params, data, callback) => {
axios({
url: dataUrl + 'updateChannel',
method: 'get',
params: params,
data: data
}).then((response) => {
callback(response)
}).catch((response) => {
callback(response)
})
}
// -------------------- 数据管理系统 - 渠道表信息 - 删除列表 ------------------ deleteChannel
export let requestDeleteChannel = (params, data, callback) => {
axios({
url: dataUrl + 'deleteChannel',
method: 'get',
params: params,
data: data
}).then((response) => {
callback(response)
}).catch((response) => {
callback(response)
})
}
// -------------------- 数据管理系统 - 字段表信息 - 获取列表 ------------------ getFields
export let requestGetFields = (params, data, callback) => {
axios({
url: dataUrl + 'getFields',
method: 'get',
params: params,
data: data
}).then((response) => {
callback(response)
}).catch((response) => {
callback(response)
})
}
// -------------------- 数据管理系统 - 字段表信息 - 新建列表 ------------------ insertFields
export let requestInsertFields = (params, data, callback) => {
axios({
url: dataUrl + 'insertFields',
method: 'get',
params: params,
data: data
}).then((response) => {
callback(response)
}).catch((response) => {
callback(response)
})
}
// -------------------- 数据管理系统 - 字段表信息 - 更新列表 ------------------ updateFields
export let requestUpdateFields = (params, data, callback) => {
axios({
url: dataUrl + 'updateFields',
method: 'get',
params: params,
data: data
}).then((response) => {
callback(response)
}).catch((response) => {
callback(response)
})
}
// -------------------- 数据管理系统 - 字段表信息 - 更新列表 ------------------ deleteFields
export let requestDeleteFields = (params, data, callback) => {
axios({
url: dataUrl + 'deleteFields',
method: 'get',
params: params,
data: data
}).then((response) => {
callback(response)
}).catch((response) => {
callback(response)
})
}
// -------------------- 数据管理系统 - 渠道列表 ------------------ getShowChannel
export let requestGetShowChannel = (callback) => {
axios({
url: dataUrl + 'getShowChannel',
method: 'get'
}).then((response) => {
callback(response)
}).catch((response) => {
callback(response)
})
}
// -------------------- 数据管理系统 - 修改渠道 ------------------ changePt
export let requestChangePt = (params, data, callback) => {
axios({
url: dataUrl + 'changePt',
method: 'get',
params: params,
data: data
}).then((response) => {
callback(response)
}).catch((response) => {
callback(response)
})
}
// -------------------- 数据管理系统 - 数据库信息 - 获取参数说明列表 ------------------ getParam
export let requestGetParam = (callback) => {
axios({
url: dataUrl + 'getParam',
method: 'get'
}).then((response) => {
callback(response)
}).catch((response) => {
callback(response)
})
}
// -------------------- 数据管理系统 - 字段表信息 - 获取渠道信息列表 ------------------ getDisChannel
export let requestGetDisChannel = (callback) => {
axios({
url: dataUrl + 'getDisChannel',
method: 'get'
}).then((response) => {
callback(response)
}).catch((response) => {
callback(response)
})
}
// -------------------- 数据管理系统 - 检测模板 - 获取字段信息 ------------------ getAllFields
export let requestGetAllFields = (params, data, callback) => {
axios({
url: dataUrl + 'getAllFields',
method: 'get',
params: params,
data: data
}).then((response) => {
callback(response)
}).catch((response) => {
callback(response)
})
}
src/test/java/com/zhiwei/DBTest.java deleted 100644 → 0
package com.zhiwei;
import java.util.ArrayList;
import java.util.Calendar;
import java.util.Iterator;
import java.util.List;
import java.util.Map;
import java.util.Set;
import javax.annotation.Resource;
import org.junit.runner.RunWith;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.data.mongodb.core.MongoTemplate;
import org.springframework.data.mongodb.core.query.Criteria;
import org.springframework.data.mongodb.core.query.Query;
import org.springframework.stereotype.Component;
import org.springframework.test.context.ContextConfiguration;
import org.springframework.test.context.junit4.SpringJUnit4ClassRunner;
import com.mongodb.BasicDBObject;
import com.mongodb.DBCursor;
import com.mongodb.DBObject;
import com.zhiwei.manage.bean.Channel;
import com.zhiwei.manage.bean.ServerBean;
import com.zhiwei.manage.dao.ServerDao;
@RunWith(SpringJUnit4ClassRunner.class)
@ContextConfiguration({ "classpath:applicationContext.xml" })
@Component
public class DBTest {
@Resource(name = "mongoTemplate")
private MongoTemplate mongo;
@Autowired
private ServerDao sd;
public void insert(){
ServerBean sb=new ServerBean();
sb.setCollection("Data");
sb.setDataType("数据量");
sb.setDbHost("192.168.0.245");
sb.setDbUsername("");
sb.setDbPassword("");
sb.setDbPort(27017);
sb.setDbType("mongo");
sb.setEffect("数据量的统计");
sb.setOther("Message");
sb.setDbName("dataTest");
sb.setPt("网媒");
mongo.insert(sb);
}
public void find(){
Calendar c=Calendar.getInstance();
c.add(Calendar.DATE, -6);
ServerBean sben=mongo.findOne(Query.query(Criteria.where("_id").is("5a24e4cd60a2fea23897d326")), ServerBean.class);
List<Map<String,Object>> list=new ArrayList<>();
DBObject obj=new BasicDBObject();
obj.put("time", new BasicDBObject("$gt",c.getTime()));
DBCursor dc=mongo.getCollection(sben.getCollection()).find(obj);
while(dc.hasNext()){
list.add((Map<String,Object>)dc.next());
}
for(Map<String,Object> map:list){
Set<String> keys=map.keySet();
for(Iterator<String> it=keys.iterator();it.hasNext();){
String key=it.next();
System.out.print(key+":"+map.get(key)+",");
}
System.out.println();
}
}
public void update(){
ServerBean sb=new ServerBean();
}
}
src/test/java/com/zhiwei/DataTest.java deleted 100644 → 0
package com.zhiwei;
import java.text.SimpleDateFormat;
import java.util.Calendar;
import java.util.Date;
import java.util.List;
import javax.annotation.Resource;
import org.junit.runner.RunWith;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.data.annotation.AccessType;
import org.springframework.data.mongodb.core.MongoTemplate;
import org.springframework.data.mongodb.core.query.Criteria;
import org.springframework.data.mongodb.core.query.Query;
import org.springframework.stereotype.Component;
import org.springframework.test.context.ContextConfiguration;
import org.springframework.test.context.junit4.SpringJUnit4ClassRunner;
import com.mongodb.BasicDBObject;
import com.mongodb.DBCursor;
import com.mongodb.DBObject;
import com.zhiwei.manage.bean.Data;
import com.zhiwei.manage.bean.EasyNews;
import com.zhiwei.manage.bean.Weibo;
import com.zhiwei.manage.dao.DataDao;
import com.zhiwei.manage.service.DataService;
import com.zhiwei.manage.util.TimeUtil;
@RunWith(SpringJUnit4ClassRunner.class)
@ContextConfiguration({ "classpath:applicationContext.xml" })
@Component
public class DataTest {
@Resource(name = "newmongoTemplate")
private MongoTemplate mongoTemplate;
@Resource(name = "mongoTemplate")
private MongoTemplate mongo;
@Resource(name = "weibomongoTemplate")
private MongoTemplate weibo;
@Resource
private DataDao dataDao;
@Autowired
private DataService ds;
public void insert() {
Date d = new Date();
for (int i = 0; i < 70; i++) {
d.setDate(d.getDate()-1);
Data data = new Data();
data.setCount((int) (Math.random() * 190));
data.setPt("网媒");
data.setSource("uc");
data.setTime(d);
// data.setSpyderInfoId(cr.getId());
dataDao.insert(data);
}
}
public void getDatas(){
long count =weibo.count(Query.query(Criteria.where("time").gt("2017-11-25 00:00")), Weibo.class,"status_201711");
System.out.println(count);
}
public void getcount(){
Date d=new Date();
d.setDate(25);
Date d2=new Date();
d2.setDate(26);
Calendar c = Calendar.getInstance();
c.setTime(d);
int year = c.get(Calendar.YEAR);
int month = c.get(Calendar.MONTH) + 1;
List<EasyNews> list= ds.findBySourceFromLibrary(d, d2, "东方财富网");//mongoTemplate.find(Query.query(Criteria.where("time").gte(d).lt(d2).and("source").is("东方财富网")),
// EasyNews.class, "net_media_" + year + month);
System.out.println(list.size());
}
public void getLike(){
Calendar c = Calendar.getInstance();
int year = c.get(Calendar.YEAR);
int month = c.get(Calendar.MONTH) + 1;
List<String> list=dataDao.findTmpNameByLikeParam("东方");
for(String l:list){
System.out.println(l);
}
}
@org.junit.Test
public void find(){
Calendar c=Calendar.getInstance();
c.add(Calendar.DATE, -5);
DBObject db=new BasicDBObject();
db.put("time", new BasicDBObject("$gte",c.getTime()));
DBCursor dbc=mongo.getCollection("Data").find();
while(dbc.hasNext()){
System.out.println(dbc.next().get("tempName"));
}
}
}
src/test/java/com/zhiwei/FieldTest.java deleted 100644 → 0
package com.zhiwei;
import javax.annotation.Resource;
import org.junit.runner.RunWith;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.data.mongodb.core.MongoTemplate;
import org.springframework.stereotype.Component;
import org.springframework.test.context.ContextConfiguration;
import org.springframework.test.context.junit4.SpringJUnit4ClassRunner;
import com.zhiwei.manage.bean.Channel;
import com.zhiwei.manage.bean.FieldBean;
import com.zhiwei.manage.dao.FieldBeanDao;
@RunWith(SpringJUnit4ClassRunner.class)
@ContextConfiguration({ "classpath:applicationContext.xml" })
@Component
public class FieldTest {
@Resource(name="mongoTemplate")
private MongoTemplate mongo;
@Autowired
private FieldBeanDao fd;
public void insert(){
FieldBean f=new FieldBean();
f.setCollection("data");
f.setDbName("dataTest");
f.setField("id,type");
f.setFieldSize(2);
f.setPt("网媒");
f.setDbId("5a265ede60a2feb6dc575436");
fd.insert(f);
}
@org.junit.Test
public void inserssssst(){
Channel c=new Channel();
c.setPt("微信");
c.setValue("wechat");
mongo.insert(c);
}
}
src/test/java/com/zhiwei/NewsTest.java deleted 100644 → 0
package com.zhiwei;
import java.io.UnsupportedEncodingException;
import java.text.SimpleDateFormat;
import java.util.Calendar;
import java.util.Date;
import java.util.List;
import javax.annotation.Resource;
import org.eclipse.jdt.internal.compiler.ast.SynchronizedStatement;
import org.junit.runner.RunWith;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.data.domain.Sort;
import org.springframework.data.domain.Sort.Direction;
import org.springframework.data.domain.Sort.Order;
import org.springframework.data.mongodb.core.MongoTemplate;
import org.springframework.data.mongodb.core.query.Criteria;
import org.springframework.data.mongodb.core.query.Query;
import org.springframework.stereotype.Component;
import org.springframework.test.context.ContextConfiguration;
import org.springframework.test.context.junit4.SpringJUnit4ClassRunner;
import com.mongodb.BasicDBObject;
import com.zhiwei.manage.bean.CrawTemplate;
import com.zhiwei.manage.bean.EasyNews;
import com.zhiwei.manage.bean.News;
import com.zhiwei.manage.dao.NewsDao;
import com.zhiwei.manage.service.CrawTemplateService;
@RunWith(SpringJUnit4ClassRunner.class)
@ContextConfiguration({ "classpath:applicationContext.xml" })
@Component
public class NewsTest {
@Resource(name = "newmongoTemplate")
private MongoTemplate mongoTemplate;
@Autowired
private NewsDao nd;
@Autowired
private CrawTemplateService cd;
public void find() throws UnsupportedEncodingException {
Query query = new Query();
query.addCriteria(Criteria.where("source").is("凤凰网"));
query.with(new Sort(new Order(Direction.DESC, "time")));
query.limit(10);
List<News> list = mongoTemplate.find(query, News.class, "net_media_201711");
int sum = 0;
for (News nes : list) {
sum += nes.getSavetime() - nes.getTime().getTime();
}
System.out.println(sum / 10.0 / 1000 / 60 / 60);
}
public void findCount() {
Calendar c = Calendar.getInstance();
c.add(Calendar.DATE, -1);
Criteria criteria = new Criteria();
criteria.and("source").is("凤凰网");
criteria.and("time").gt(c.getTime());
System.out.println(c.getTime());
// query.addCriteria(Criteria.where("source").is("凤凰网").orOperator(Criteria.where("time").lt(c.getTime())));
long count = mongoTemplate.count(Query.query(criteria), News.class, "net_media_201711");
System.out.println(count);
}
public void findNews() {
Calendar c = Calendar.getInstance();
c.add(Calendar.DATE, -1);
Criteria criteria = new Criteria();
criteria.and("source").is("凤凰网");
Date d = new Date();
d.setHours(10);
;
criteria.and("time").gt(c.getTime()).lt(d);
// query.addCriteria(Criteria.where("source").is("凤凰网").orOperator(Criteria.where("time").lt(c.getTime())));
List<News> list = mongoTemplate.find(Query.query(criteria), News.class, "net_media_201711");
for (News l : list) {
System.out.println(l);
}
}
public void finddis() {
List<Object> list = mongoTemplate.getCollection("net_media_201711").distinct("source");
for (Object obj : list) {
System.out.println(obj);
}
}
public void findcount() {
// List<CrawTemplate> list=cd.findAll();
// Calendar start=Calendar.getInstance();
// start.add(Calendar.DATE, -1);
// Calendar end=Calendar.getInstance();
// int num=0;
// //每日的数据量入库（对应模板）
// for(CrawTemplate cr:list){
// System.out.println(cr.toString());
// System.out.println(TimeUtil.yearToDay(start.getTime())+","+TimeUtil.yearToDay(end.getTime()));
// int count=(int) nd.findCount(cr.getId(), start.getTime(),
// end.getTime());
// Data data=new Data();
// data.setCount(count);
// data.setPt("网媒");
// data.setTempName(cr.getConfigName());
// data.setTime(TimeUtil.yearToDay(start.getTime()));
// data.setSpyderInfoId(cr.getId());
// data.toString();
// System.out.println(data);
// if(num++>10){
// break;
// }
// }
}
public void testfindCount() {
Calendar c = Calendar.getInstance();
int month = c.get(Calendar.MONTH) + 1;
int year = c.get(Calendar.YEAR);
System.out.println("net_media_" + year + month);
Criteria criteria = new Criteria();
criteria.and("spyderInfoId").is("UrlListDetail29ae234f-4f47-4b1e-935f-ae8c18621d74");
Date d = new Date();
d.setDate(10);
long l = mongoTemplate.count(Query.query(Criteria.where("spyderInfoId")
.is("UrlListDetail29ae234f-4f47-4b1e-935f-ae8c18621d74").andOperator(Criteria.where("time").gt(d))),
News.class, "net_media_" + year + month);
System.out.println(l);
}
public void findConfigName() {
List<CrawTemplate> list = mongoTemplate.findAll(CrawTemplate.class);
for (CrawTemplate c : list) {
System.out.println(c.getConfigName());
}
}
}
src/test/java/com/zhiwei/ServerTest.java deleted 100644 → 0
package com.zhiwei;
import org.junit.runner.RunWith;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Component;
import org.springframework.test.context.ContextConfiguration;
import org.springframework.test.context.junit4.SpringJUnit4ClassRunner;
import com.zhiwei.manage.bean.Channel;
import com.zhiwei.manage.dao.ServerDao;
@RunWith(SpringJUnit4ClassRunner.class)
@ContextConfiguration({ "classpath:applicationContext.xml" })
@Component
public class ServerTest {
@Autowired
private ServerDao sd;
@org.junit.Test
public void insert() {
Channel c=new Channel();
c.setPt("微博");
c.setValue("weibo");
sd.insertChannels(c);
}
}
src/test/java/com/zhiwei/Test.java deleted 100644 → 0
package com.zhiwei;
import java.util.Date;
import java.util.List;
import javax.annotation.Resource;
import org.junit.runner.RunWith;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.data.mongodb.core.MongoTemplate;
import org.springframework.data.mongodb.core.query.Criteria;
import org.springframework.data.mongodb.core.query.Query;
import org.springframework.data.mongodb.core.query.Update;
import org.springframework.stereotype.Component;
import org.springframework.test.context.ContextConfiguration;
import org.springframework.test.context.junit4.SpringJUnit4ClassRunner;
import com.mongodb.WriteResult;
import com.zhiwei.manage.bean.Person;
import com.zhiwei.manage.bean.Template;
import com.zhiwei.manage.dao.PersonDao;
import com.zhiwei.manage.dao.TemplateDao;
@RunWith(SpringJUnit4ClassRunner.class)
@ContextConfiguration({ "classpath:applicationContext.xml" })
@Component
public class Test {
@Resource(name="mongoTemplate")
private MongoTemplate mongo;
@Autowired
private PersonDao dao;
@Autowired
private TemplateDao ts;
@org.junit.Test
public void insert() {
Person p = new Person();
p.setLv(3);
p.setPassword("123456");
p.setUsername("user");
p.setCreateDate(new Date());
p.setLastLogin(new Date());
p.setCreator("夏卡");
mongo.insert(p);
}
public void find(){
Person p=mongo.findById(0, Person.class);
System.out.println(p.getUsername());
}
public void update(){
Query query=Query.query(Criteria.where("_id").is(0));
Update update=new Update();
update.set("username","us");
update.set("password", "pd");
update.set("lv","1");
WriteResult wr=mongo.updateFirst(query,update, Person.class);
int result=wr.getN();
System.out.println(result);
}
public void delete(){
WriteResult wr=mongo.remove(Query.query(Criteria.where("_id").is(0)),Person.class);
int result=wr.getN();
System.out.println(result);
}
public void findAll(){
List<Person> list=mongo.findAll(Person.class);
for(Person p:list){
System.out.println(p.getUsername());
}
}
public void findUserName(){
Person p=dao.findByUsername("users");
if(p!=null)
System.out.println(p.getUsername());
}
public void insertTemp(){
Template t=new Template();
t.setCreateDate(new Date());
t.setCreator("sjz");
t.setFieldIntegrityRate(0.66);
t.setFieldInterval(4);
t.setMail("949131080@qq.com");
t.setNewsDelayed(4);
t.setNewsNumber(40);
t.setPingInterval(4);
t.setTemplateLv(1);
t.setTempName("mi");
ts.insert(t);
}
}
src/test/java/com/zhiwei/TestMessage.java deleted 100644 → 0
package com.zhiwei;
import java.util.Date;
import java.util.List;
import org.junit.runner.RunWith;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Component;
import org.springframework.test.context.ContextConfiguration;
import org.springframework.test.context.junit4.SpringJUnit4ClassRunner;
import com.zhiwei.manage.bean.Message;
import com.zhiwei.manage.bean.Template;
import com.zhiwei.manage.dao.MessageDao;
import com.zhiwei.manage.dao.TemplateDao;
@RunWith(SpringJUnit4ClassRunner.class)
@ContextConfiguration({ "classpath:applicationContext.xml" })
@Component
public class TestMessage {
@Autowired
private MessageDao md;
@Autowired
private TemplateDao td;
}
src/test/java/com/zhiwei/TestTemp.java deleted 100644 → 0
package com.zhiwei;
import java.util.Date;
import java.util.List;
import javax.annotation.Resource;
import org.junit.runner.RunWith;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.data.mongodb.core.MongoTemplate;
import org.springframework.data.mongodb.core.query.Criteria;
import org.springframework.data.mongodb.core.query.Query;
import org.springframework.stereotype.Component;
import org.springframework.test.context.ContextConfiguration;
import org.springframework.test.context.junit4.SpringJUnit4ClassRunner;
import com.mongodb.BasicDBObject;
import com.mongodb.DBObject;
import com.zhiwei.manage.bean.Template;
import com.zhiwei.manage.dao.TemplateDao;
@RunWith(SpringJUnit4ClassRunner.class)
@ContextConfiguration({ "classpath:applicationContext.xml" })
@Component
public class TestTemp {
@Autowired
private TemplateDao ts;
@Resource(name = "mongoTemplate")
private MongoTemplate mongo;
public void insertTemp() {
String[] arr = { "新", "客", "端", "万", "mua", "ge", "千", "财", "能", "于", "土", "报", "日", "晚", "微", "公" };
for (int i = 0; i < 6; i++) {
Template t = new Template();
t.setCreateDate(new Date());
t.setCreator("栋宝宝");
t.setFieldIntegrityRate(Math.random());
t.setFieldInterval((int) (Math.random() * 50));
t.setMail("949131080@qq.com");
t.setNewsDelayed(4);
t.setNewsNumber(40);
t.setNeedPing(true);
t.setPingInterval(4);
t.setTemplateLv(1);
t.setTempName(arr[(int) (Math.random() * 16)] + arr[(int) (Math.random() * 16)] + "网");
t.setPt("网媒");
ts.insert(t);
}
}
public void findAll() {
List<Template> list = mongo.find(Query.query(Criteria.where("templateName").regex("u")), Template.class);
for (Template tp : list) {
System.out.println(tp);
}
}
public void findByid() {
Template t = ts.findById("5a0d327a60a2fefec491dd4a");
System.out.println(t.getTempName());
}
@org.junit.Test
public void delete() {
ts.delete("5a1faea360a2fe58e4edff16");
}
public void findBypage() {
long count = mongo.count(Query.query(Criteria.where("creator").is("栋宝宝")), Template.class);
System.out.println(count);
for (int i = 0; i < count / 10; i++) {
List<Template> list = mongo.find(Query.query(Criteria.where("creator").is("栋宝宝")).skip(i).limit(10),
Template.class);
for (Template tp : list) {
System.out.println(tp);
}
System.out.println(
"--------------------------------------------------------------------------------------------");
}
}
}
src/test/java/easyTest/EasyTest.java deleted 100644 → 0
package easyTest;
import java.lang.reflect.Field;
import org.junit.Test;
import com.zhiwei.manage.bean.ServerBean;
public class EasyTest {
@Test
public void test(){
Field[] list=ServerBean.class.getDeclaredFields();
System.out.println(list.length);
for(Field f:list){
System.out.println(f.getName());
}
}
}
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment