Skip to content

F
founder_vue
Commit 6ca7572f by chenqiang
Options

栏目、模型、门户,首页

parent 2cdbc8ae
Showing with 863 additions and 427 deletions
public/index.html
......@@ -7,7 +7,7 @@
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<title><%= htmlWebpackPlugin.options.title %></title>
</head>
<body>
<body style="height: 100vh;">
<noscript>
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>
......
src/assets/img/login_bg.png
src/assets/img/login_bg.png

17.9 KB | W: | H:

src/assets/img/login_bg.png

17.4 KB | W: | H:

src/assets/img/login_bg.png
src/assets/img/login_bg.png
src/assets/img/login_bg.png
src/assets/img/login_bg.png
  • 2-up
  • Swipe
  • Onion skin
src/components/headerBox.vue
......@@ -10,16 +10,72 @@
<el-badge :value="12" class="item">
<div class="iconfont iconxiaoxitongzhi paddingLeft32"></div>
</el-badge>
<div class="iconfont icontuichuzhuxiao paddingLeft32">
<div style="padding-left: 10px;cursor: pointer;" title="退出" @click="LoginOut" v-if="isFalg">
<span class="iconfont icontuichuzhuxiao paddingLeft32"></span>
欢迎您：{{userInfo.unitname}}&nbsp;&nbsp;&nbsp;{{userInfo.true_name}}
</div>
<div @click="getLogin" style="margin-left: 32px;cursor: pointer;" v-else>
<img src="@/assets/img/tb_login.png" alt="">
<span style="padding-left: 5px;">登录</span>
</div>
<div style="padding-left: 10px;">欢迎您：重庆市公安局 系统管理员</div>
</div>
<!--登录弹窗-->
<login v-show="sptc" @sptcFn="sptcFn"/>
</div>
</template>
<script>
import login from '@c/login.vue'
export default {
name: 'headerBox'
name: 'headerBox',
components:{login},
data() {
return {
sptc: false,
isFalg: localStorage.getItem('isFalg') || false,
userInfo: JSON.parse(localStorage.getItem('userInfo')) || {}
}
},
created() {
console.log(localStorage.getItem('isFalg'))
},
methods: {
sptcFn(val){
this.sptc = val
this.isFalg = true
this.userInfo = JSON.parse(localStorage.getItem('userInfo'))
},
// 点击登录按钮
getLogin() {
this.sptc = true
},
// 点击退出登录
LoginOut() {
let self = this
self.$confirm('此操作将退出登录状态, 是否继续?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
self.$message({
type: 'success',
message: '退出登录成功!'
});
self.isFalg = false
localStorage.clear()
self.$router.push('/sy')
self.userInfo = {}
self.$forceUpdate()
// window.opener.location.reload()
// window.close()
}).catch(() => {
self.$message({
type: 'info',
message: '已取消退出登录'
});
});
}
}
}
</script>
......
src/components/headerBoxMh.vue
......@@ -2,23 +2,73 @@
<div class="header_box">
<div class="header_box_left">
<img src="@/assets/img/jc.png" alt="">
<span style="padding-left: 12px;">欢迎您：重庆市公安局<span style="padding-left: 15px;">系统管理员</span></span>
<span style="padding-left: 12px;">欢迎您：{{userInfo.unitname}}<span style="padding-left: 15px;">{{userInfo.true_name}}</span></span>
</div>
<div class="header_box_right">
<!-- <div class="paddingRight60">当前登录人数：4</div>-->
<div class="iconfont iconlianjie paddingLeft32"></div>
<el-badge :value="12" class="item">
<div class="iconfont iconxiaoxitongzhi paddingLeft32"></div>
</el-badge>
<!-- <div class="iconfont icondapingzhongduan paddingLeft32"></div>-->
<div class="iconfont icontuichuzhuxiao paddingLeft32"></div>
<div @click="LoginOut" class="iconfont icontuichuzhuxiao paddingLeft32" v-if="isFalg"></div>
<div @click="getLogin" style="margin-left: 32px;cursor: pointer;" v-else>
<img src="@/assets/img/tb_login.png" alt="">
<span style="padding-left: 5px;">登录</span>
</div>
</div>
<!--登录弹窗-->
<login v-show="sptc" @sptcFn="sptcFn"/>
</div>
</template>
<script>
import login from '@c/login.vue'
export default {
name: 'headerBox'
name: 'headerBox',
components:{login},
data() {
return {
sptc: false,
isFalg: localStorage.getItem('isFalg') || false,
userInfo: JSON.parse(localStorage.getItem('userInfo')) || {}
}
},
methods: {
sptcFn(val){
this.sptc = val
this.isFalg = true
this.userInfo = JSON.parse(localStorage.getItem('userInfo'))
},
// 点击登录按钮
getLogin() {
this.sptc = true
},
// 点击退出登录
LoginOut() {
let self = this
self.$confirm('此操作将退出登录状态, 是否继续?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
self.$message({
type: 'success',
message: '退出登录成功!'
});
self.isFalg = false
localStorage.clear()
self.$router.push('/sy')
self.userInfo = {}
self.$forceUpdate()
// window.opener.location.reload()
// window.close()
}).catch(() => {
self.$message({
type: 'info',
message: '已取消退出登录'
});
});
}
}
}
</script>
......@@ -49,12 +99,13 @@ export default {
height: 17px;
cursor: pointer;
}
.paddingRight60{
.paddingRight60 {
padding-right: 60px;
cursor: pointer;
}
/deep/.el-badge__content {
/deep/ .el-badge__content {
background-color: #F56C6C;
border-radius: 10px;
color: #FFF;
......@@ -70,7 +121,7 @@ export default {
/deep/ .is-fixed {
position: absolute;
top: 17px;
top: 17px;
right: 10px;
transform: translateY(-5%) translateX(100%);
}
......
src/components/login.vue 0 → 100644
<template>
<!--登录弹窗-->
<div class="sptc">
<div class="sptc_content">
<div class="account">
<div class="count_bg">
<img src="@/assets/img/login/user.png" alt="">
</div>
<input type="text" placeholder="账号" v-model="formLogin.account">
</div>
<div class="password">
<div class="pwd_bg">
<img src="@/assets/img/login/pwd.png" alt="">
</div>
<input type="password" placeholder="密码" v-model="formLogin.password">
</div>
<div class="tip">*“账号登陆异常，请联系管理员”</div>
<div class="loginBtn" @click="login">登录</div>
<div class="pkiloginBtn" @click="PKIlogin">PKI登录</div>
</div>
</div>
</template>
<script>
import axios from 'axios'
export default {
name: 'login',
data() {
return {
formLogin: {
account: '',
password: ''
}
}
},
methods: {
/**
* @description: 登录
* @param {*}
* @return {*}
*/
login() {
let self = this
let param = new URLSearchParams()
// 嫌疑人
param.append('userName', self.formLogin.account)
param.append('password', self.formLogin.password)
axios.post('/xzz/loginCq', param).then(res => {
if (res.state == 'success') {
localStorage.setItem('isFalg', true)
localStorage.setItem('userInfo', JSON.stringify(res.list))
self.$emit('sptcFn', false)
self.$router.push('/mhgl')
// let routeData = self.$router.resolve({
// path: '/mhgl',
// })
// window.open(routeData.href, '_blank')
self.$forceUpdate()
}
})
},
login1() {
let self = this
let param = {
userId: localStorage.getItem('userInfo').identitycard,
perurl: localStorage.getItem('userInfo').username,
clientIp: 'ip'
}
axios.post('http://77.1.24.81:9101/login', param).then(res => {
})
},
login2() {
let self = this
let param = {
zjhm: localStorage.getItem('userInfo').identitycard
}
axios.post('http://77.1.24.81:9047/doLogin', param).then(res => {
})
},
login3() {
let self = this
let param = {
zjhm: localStorage.getItem('userInfo').identitycard
}
axios.post('77.1.24.81:9105/xzxt_solr/login', param).then(res => {
})
},
// PKI登录
PKIlogin() {
// this.sptc = false
}
}
}
</script>
<style scoped lang="scss">
.sptc {
position: absolute;
top: 0;
left: 0;
z-index: 9999;
width: 1920px;
height: 1080px;
background-color: rgba(0, 0, 0, 0.5);
.sptc_content {
width: 565px;
height: 558px;
position: relative;
top: 200px;
left: calc(50% - 282.5px);
background-image: url(../assets/img/login/bg.png);
background-position: center;
background-size: cover;
background-repeat: no-repeat;
.account {
width: 400px;
height: 50px;
background: rgba(34, 115, 225, 0);
position: absolute;
top: 170px;
left: 85px;
display: flex;
.count_bg {
width: 50px;
height: 50px;
background-image: url(../assets/img/login/icon_bg.png);
background-position: center;
background-size: cover;
background-repeat: no-repeat;
display: flex;
justify-content: center;
align-items: center;
img {
width: 26px;
height: 26px;
}
}
input {
width: 350px;
height: 50px;
border: 1px solid #246ac2;
outline: none;
box-sizing: border-box;
padding: 0 14px;
}
}
.password {
width: 400px;
height: 50px;
background: rgba(34, 115, 225, 0);
position: absolute;
top: 240px;
left: 85px;
display: flex;
.pwd_bg {
width: 50px;
height: 50px;
background-image: url(../assets/img/login/icon_bg.png);
background-position: center;
background-size: cover;
background-repeat: no-repeat;
display: flex;
justify-content: center;
align-items: center;
img {
width: 26px;
height: 26px;
}
}
input {
width: 350px;
height: 50px;
border: 1px solid #246ac2;
outline: none;
box-sizing: border-box;
padding: 0 14px;
}
}
.tip {
position: absolute;
top: 300px;
left: 82px;
font-size: 14px;
font-family: PingFang SC;
font-weight: 400;
color: #f63737;
}
.loginBtn {
cursor: pointer;
position: absolute;
top: 370px;
left: 84px;
width: 400px;
height: 53px;
background: linear-gradient(-90deg, #0787ff, #00d8ff);
border-radius: 5px 5px 5px 5px;
display: flex;
justify-content: center;
align-items: center;
font-size: 22px;
font-family: PingFang SC;
font-weight: 400;
color: #ffffff;
}
.pkiloginBtn {
cursor: pointer;
position: absolute;
top: 445px;
left: 84px;
width: 400px;
height: 53px;
border: 1px solid #0787FF;
//background: linear-gradient(-90deg, #0787ff, #00d8ff);
border-radius: 5px 5px 5px 5px;
display: flex;
justify-content: center;
align-items: center;
font-size: 22px;
font-family: PingFang SC;
font-weight: 400;
color: #0787FF;
}
.options {
position: absolute;
top: 397px;
left: 84px;
width: 400px;
display: flex;
justify-content: space-between;
align-items: center;
.left {
cursor: pointer;
height: 16px;
font-size: 16px;
font-family: PingFang SC;
font-weight: 400;
color: #0070d5;
line-height: 5px;
border-bottom: 1px solid #0070d5;
}
.right {
display: flex;
.lxwm,
.help {
cursor: pointer;
height: 16px;
font-size: 16px;
font-family: PingFang SC;
font-weight: 400;
color: #0070d5;
line-height: 5px;
border-bottom: 1px solid #0070d5;
}
.lxwm {
margin-right: 22px;
}
}
}
}
}
</style>
src/views/sy/index.scss
#syBox /deep/ {
.tztgClassLogin {
width: 565px;
height: 461px;
background-image: url("../../assets/img/login/bg.png");
background-size: 565px 461px;
.el-dialog__header {
padding: 0;
height: 0;
}
.el-dialog__body {
width: 565px;
height: 461px;
padding: 0 !important;
.tztgClassLogin_nr {
width: 400px;
margin: 0 auto;
padding-top: 125px;
.el-form {
.el-form-item {
height: 50px;
.el-input-group {
display: flex;
}
.el-input-group__prepend {
padding: 0;
width: 50px;
height: 50px;
background-color: transparent;
}
.el-input__inner {
width: 400px !important;
height: 50px !important;
background-color: transparent;
border: 1px solid #246ac2;
}
}
}
}
}
}
}
.sy_box {
height: 100%;
background: url("../../assets/img/bg1.png") no-repeat center center;
......@@ -171,9 +123,9 @@
width: 460px;
height: 453px;
background: linear-gradient(
180deg,
rgba(0, 38, 81, 0.4),
rgba(2, 18, 43, 0.8)
180deg,
rgba(0, 38, 81, 0.4),
rgba(2, 18, 43, 0.8)
);
margin-top: 24px;
background: url(../../assets/img/sy_3.png);
......@@ -328,9 +280,9 @@
width: 460px;
height: 220px;
background: linear-gradient(
180deg,
rgba(0, 38, 81, 0.4),
rgba(2, 18, 43, 0.8)
180deg,
rgba(0, 38, 81, 0.4),
rgba(2, 18, 43, 0.8)
);
background: url("../../assets/img/sy_2.png");
margin-top: 25px;
......@@ -829,10 +781,18 @@
}
.sy_box_content_r_b_content {
//overflow-x: scroll;
overflow-y: scroll;
height: 385px;
.sy_box_content_r_b_content_p {
height: 48px;
display: flex;
margin-left: 17px;
padding-bottom: 10px;
border-bottom: 1px solid #7CB0F1;
margin-right: 14px;
padding-top: 3px;
.sy_box_content_r_b_content_bj {
width: 48px;
......@@ -844,8 +804,9 @@
font-family: PingFang SC;
font-weight: 500;
color: #cee7f7;
width: 32px;
height: 32px;
width: 38px;
height: 48px;
padding: 0 5px;
margin: auto;
}
}
......@@ -860,6 +821,14 @@
font-family: PingFang SC;
font-weight: 500;
color: #cee7f7;
width: 350px;
overflow: hidden;
display: -webkit-box;
//text-overflow: ellipsis;
//white-space: nowrap;
-webkit-line-clamp: 2;
//-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
}
}
......@@ -868,152 +837,188 @@
}
}
.sptc {
position: absolute;
top: 0;
left: 0;
z-index: 9999;
width: 1920px;
height: 1080px;
background-color: rgba(0, 0, 0, 0.5);
.sptc_content {
width: 565px;
height: 461px;
position: relative;
top: 200px;
left: calc(50% - 282.5px);
background-image: url(../../assets/img/login/bg.png);
background-position: center;
background-size: cover;
background-repeat: no-repeat;
.account {
width: 400px;
height: 50px;
background: rgba(34, 115, 225, 0);
position: absolute;
top: 125px;
left: 85px;
display: flex;
.count_bg {
width: 50px;
height: 50px;
background-image: url(../../assets/img/login/icon_bg.png);
background-position: center;
background-size: cover;
background-repeat: no-repeat;
display: flex;
justify-content: center;
align-items: center;
img {
width: 26px;
height: 26px;
}
}
input {
width: 350px;
height: 50px;
border: 1px solid #246ac2;
outline: none;
box-sizing: border-box;
padding: 0 14px;
}
}
.password {
width: 400px;
height: 50px;
background: rgba(34, 115, 225, 0);
position: absolute;
top: 195px;
left: 85px;
display: flex;
.pwd_bg {
width: 50px;
height: 50px;
background-image: url(../../assets/img/login/icon_bg.png);
background-position: center;
background-size: cover;
background-repeat: no-repeat;
display: flex;
justify-content: center;
align-items: center;
img {
width: 26px;
height: 26px;
}
}
input {
width: 350px;
height: 50px;
border: 1px solid #246ac2;
outline: none;
box-sizing: border-box;
padding: 0 14px;
}
}
.tip {
position: absolute;
top: 262px;
left: 82px;
font-size: 14px;
font-family: PingFang SC;
font-weight: 400;
color: #f63737;
}
.loginBtn {
cursor: pointer;
position: absolute;
top: 327px;
left: 84px;
width: 400px;
height: 53px;
background: linear-gradient(-90deg, #0787ff, #00d8ff);
border-radius: 5px 5px 5px 5px;
display: flex;
justify-content: center;
align-items: center;
font-size: 24px;
font-family: PingFang SC;
font-weight: 400;
color: #ffffff;
}
.options {
position: absolute;
top: 397px;
left: 84px;
width: 400px;
display: flex;
justify-content: space-between;
align-items: center;
.left {
cursor: pointer;
height: 16px;
font-size: 16px;
font-family: PingFang SC;
font-weight: 400;
color: #0070d5;
line-height: 5px;
border-bottom: 1px solid #0070d5;
}
.right {
display: flex;
.lxwm,
.help {
cursor: pointer;
height: 16px;
font-size: 16px;
font-family: PingFang SC;
font-weight: 400;
color: #0070d5;
line-height: 5px;
border-bottom: 1px solid #0070d5;
}
.lxwm {
margin-right: 22px;
}
}
}
}
}
//.sptc {
// position: absolute;
// top: 0;
// left: 0;
// z-index: 9999;
// width: 1920px;
// height: 1080px;
// background-color: rgba(0, 0, 0, 0.5);
//
// .sptc_content {
// width: 565px;
// height: 558px;
// position: relative;
// top: 200px;
// left: calc(50% - 282.5px);
// background-image: url(../../assets/img/login/bg.png);
// background-position: center;
// background-size: cover;
// background-repeat: no-repeat;
//
// .account {
// width: 400px;
// height: 50px;
// background: rgba(34, 115, 225, 0);
// position: absolute;
// top: 170px;
// left: 85px;
// display: flex;
//
// .count_bg {
// width: 50px;
// height: 50px;
// background-image: url(../../assets/img/login/icon_bg.png);
// background-position: center;
// background-size: cover;
// background-repeat: no-repeat;
// display: flex;
// justify-content: center;
// align-items: center;
//
// img {
// width: 26px;
// height: 26px;
// }
// }
//
// input {
// width: 350px;
// height: 50px;
// border: 1px solid #246ac2;
// outline: none;
// box-sizing: border-box;
// padding: 0 14px;
// }
// }
//
// .password {
// width: 400px;
// height: 50px;
// background: rgba(34, 115, 225, 0);
// position: absolute;
// top: 240px;
// left: 85px;
// display: flex;
//
// .pwd_bg {
// width: 50px;
// height: 50px;
// background-image: url(../../assets/img/login/icon_bg.png);
// background-position: center;
// background-size: cover;
// background-repeat: no-repeat;
// display: flex;
// justify-content: center;
// align-items: center;
//
// img {
// width: 26px;
// height: 26px;
// }
// }
//
// input {
// width: 350px;
// height: 50px;
// border: 1px solid #246ac2;
// outline: none;
// box-sizing: border-box;
// padding: 0 14px;
// }
// }
//
// .tip {
// position: absolute;
// top: 300px;
// left: 82px;
// font-size: 14px;
// font-family: PingFang SC;
// font-weight: 400;
// color: #f63737;
// }
//
// .loginBtn {
// cursor: pointer;
// position: absolute;
// top: 370px;
// left: 84px;
// width: 400px;
// height: 53px;
// background: linear-gradient(-90deg, #0787ff, #00d8ff);
// border-radius: 5px 5px 5px 5px;
// display: flex;
// justify-content: center;
// align-items: center;
// font-size: 22px;
// font-family: PingFang SC;
// font-weight: 400;
// color: #ffffff;
// }
//
// .pkiloginBtn {
// cursor: pointer;
// position: absolute;
// top: 445px;
// left: 84px;
// width: 400px;
// height: 53px;
// border: 1px solid #0787FF;
// //background: linear-gradient(-90deg, #0787ff, #00d8ff);
// border-radius: 5px 5px 5px 5px;
// display: flex;
// justify-content: center;
// align-items: center;
// font-size: 22px;
// font-family: PingFang SC;
// font-weight: 400;
// color: #0787FF;
// }
//
// .options {
// position: absolute;
// top: 397px;
// left: 84px;
// width: 400px;
// display: flex;
// justify-content: space-between;
// align-items: center;
//
// .left {
// cursor: pointer;
// height: 16px;
// font-size: 16px;
// font-family: PingFang SC;
// font-weight: 400;
// color: #0070d5;
// line-height: 5px;
// border-bottom: 1px solid #0070d5;
// }
//
// .right {
// display: flex;
//
// .lxwm,
// .help {
// cursor: pointer;
// height: 16px;
// font-size: 16px;
// font-family: PingFang SC;
// font-weight: 400;
// color: #0070d5;
// line-height: 5px;
// border-bottom: 1px solid #0070d5;
// }
//
// .lxwm {
// margin-right: 22px;
// }
// }
// }
// }
//}
.txl, .wdxz {
position: absolute;
top: 0;
......@@ -1022,6 +1027,7 @@
width: 1920px;
height: 1080px;
background-color: rgba(0, 0, 0, 0.5);
.txl_content {
width: 565px;
height: 461px;
......@@ -1033,78 +1039,95 @@
background-size: cover;
background-repeat: no-repeat;
padding: 35px 60px;
.top {
display: flex;
align-items: center;
justify-content: space-between;
.title {
font-size: 16px;
font-family: PingFang SC;
font-weight: 600;
color: #cee7f7;
}
.close {
width: 18px;
height: 18px;
display: flex;
img {
object-fit: contain;
cursor: pointer;
}
}
}
.dashed_line {
margin-top: 20px;
width: 384px;
height: 2px;
display: flex;
img {
object-fit: contain;
}
}
.table {
display: flex;
justify-content: center;
width: 530px;
margin-top: 30px;
.tableData {
border: 1px solid #092f5f;
}
.rowClass {
background-color: transparent !important;
}
/deep/.el-table tr {
/deep/ .el-table tr {
background-color: #051629;
}
.el-table td,
.el-table th.is-leaf,
.el-table--border,
.el-table--group {
border-color: #092f5f;
}
.el-table--border::after,
.el-table--group::after,
.el-table::before {
background-color: #092f5f;
}
/deep/.el-table td.el-table__cell,
/deep/ .el-table td.el-table__cell,
.el-table th.el-table__cell.is-leaf {
border-right: 2px solid #092f5f;
}
/deep/ .el-table td.el-table__cell,
.el-table th.el-table__cell.is-leaf {
border-bottom: 2px solid #092f5f;
}
/deep/ .el-table td.el-table__cell,
.el-table th.el-table__cell.is-leaf {
border-bottom: 2px solid #092f5f;
}
/deep/ .el-table--border .el-table__cell,
.el-table__body-wrapper
.el-table--border.is-scrolling-left
~ .el-table__fixed {
.el-table--border.is-scrolling-left
~ .el-table__fixed {
border-right: 2px solid #092f5f;
}
/deep/ .cell {
font-size: 14px;
font-family: PingFang SC;
......@@ -1115,12 +1138,14 @@
}
}
}
/deep/ .el-table td.el-table__cell,
/deep/.el-table th.el-table__cell.is-leaf {
/deep/ .el-table th.el-table__cell.is-leaf {
border-bottom: 2px solid #092f5f !important;
}
/deep/.el-table tbody tr:hover>td {
background-color: #092f5f !important
/deep/ .el-table tbody tr:hover > td {
background-color: #092f5f !important
}
......
src/views/sy/index.vue
......@@ -11,10 +11,22 @@
<img src="@/assets/img/tb_wdxz.png" alt="">
<span style="padding-left: 5px;">文档下载</span>
</div>
<div class="sy_box_head_right_nr" @click="getLogin">
<div class="sy_box_head_right_nr" v-if="isFalg">
<el-dropdown trigger="click" style="color:#64a2d6; font-size: 14px;" @command="LoginOut">
<span class="el-dropdown-link">
<img src="@/assets/img/tb_tc.png" alt="">
<span style="padding-left: 5px;">欢迎您：{{userInfo.unitname}}&nbsp;&nbsp;&nbsp;{{userInfo.true_name}}</span>
</span>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item command="a">退出</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</div>
<div class="sy_box_head_right_nr" @click="getLogin" v-else>
<img src="@/assets/img/tb_login.png" alt="">
<span style="padding-left: 5px;">登录</span>
</div>
</div>
</div>
<div class="sy_box_content">
......@@ -23,14 +35,14 @@
<!-- 常用工具 -->
<div class="sy_box_content_l_t">
<div class="sy_box_content_l_t_title">
<img src="@/assets/img/sy_1.png" alt="" />
<img src="@/assets/img/sy_1.png" alt=""/>
<span class="sy_box_content_l_t_title_span">常用工具</span>
</div>
<div class="sy_box_content_l_t_box">
<div v-for="(item, index) in list1" class="sy_box_content_l_t_box_nr" :key="index">
<div class="sy_box_content_l_t_box_nr_img">
<div class="sy_box_content_l_t_box_nr_img_border_div">
<img :src="item.imgUrl" alt="" />
<img :src="item.imgUrl" alt=""/>
</div>
</div>
<span class="sy_box_content_l_t_box_nr_text">{{
......@@ -44,7 +56,7 @@
<!-- 鲜活展示 -->
<div class="sy_box_content_l_m_t">
<div class="sy_box_content_l_m_title">
<img src="@/assets/img/sy_1.png" alt="" />
<img src="@/assets/img/sy_1.png" alt=""/>
<span class="sy_box_content_l_m_title_span">鲜活展示</span>
</div>
<div class="sy_box_content_l_m_show">
......@@ -125,7 +137,7 @@
<!-- 访问统计 -->
<div class="sy_box_content_l_m_b">
<div class="sy_box_content_l_m_b_title">
<img src="@/assets/img/sy_1.png" alt="" />
<img src="@/assets/img/sy_1.png" alt=""/>
<span class="sy_box_content_l_m_b_title_span">访问统计</span>
</div>
<div class="sy_box_content_l_m_b_echarts">
......@@ -136,7 +148,7 @@
<!-- 动态感知采集 -->
<div class="sy_box_content_l_b">
<div class="sy_box_content_l_b_title">
<img src="@/assets/img/sy_1.png" alt="" />
<img src="@/assets/img/sy_1.png" alt=""/>
<span class="sy_box_content_l_b_title_span">动态感知采集</span>
</div>
<div class="sy_box_content_l_b_d">
......@@ -145,11 +157,11 @@
</div>
<div class="sy_box_content_l_b_d_r">
<div v-for="(item, index) in list2" :key="index" class="sy_box_content_l_b_d_item">
<img :src="item.imgUrl" class="sy_box_content_l_b_d_item_img" />
<img :src="item.imgUrl" class="sy_box_content_l_b_d_item_img"/>
<div class="sy_box_content_l_b_d_item_r">
<span style="color:#FEFEFE;">{{ item.name }}</span>
<span class="sy_box_content_l_b_d_item_r_content">{{
item.number
item.total
}}</span>
</div>
</div>
......@@ -162,48 +174,15 @@
<!-- 上方统计部分 -->
<div class="sy_box_content_m_t">
<div class="top">
<div class="item">
<div class="name">
<div class="icon">
<img src="../../assets/img/center/jztj.png" alt="">
</div>
<div class="txt">卷宗统计</div>
</div>
<div class="num">
<span class="count">293</span>个
</div>
</div>
<div class="item">
<div class="name">
<div class="icon">
<img src="../../assets/img/center/sqdtj.png" alt="">
</div>
<div class="txt">申请单统计</div>
</div>
<div class="num">
<span class="count">293</span>个
</div>
</div>
<div class="item">
<div class="item" v-for="(item,index) in list4" :key="index">
<div class="name">
<div class="icon">
<img src="../../assets/img/center/xstj.png" alt="">
<img :src="item.imgUrl" alt="">
</div>
<div class="txt">线索统计</div>
<div class="txt">{{item.name}}</div>
</div>
<div class="num">
<span class="count">293</span>个
</div>
</div>
<div class="item">
<div class="name">
<div class="icon">
<img src="../../assets/img/center/sptj.png" alt="">
</div>
<div class="txt">审批统计</div>
</div>
<div class="num">
<span class="count">293</span>个
<span class="count">{{item.total}}</span>个
</div>
</div>
</div>
......@@ -247,17 +226,17 @@
<!-- 下方基础数据统计 -->
<div class="sy_box_content_m_b">
<div class="sy_box_content_m_b_title">
<img src="@/assets/img/sy_1.png" alt="" />
<img src="@/assets/img/sy_1.png" alt=""/>
<span class="sy_box_content_m_b_title_span">基础数据统计</span>
</div>
<div class="sy_box_content_m_b_total">
<div class="sy_box_content_m_b_content" v-for="(item,i) in statistics" :key="i">
<div class="top">
{{item.num}}
{{item.total}}
</div>
<div class="bottom">
<div class="title">
{{item.title}}
{{item.name}}
</div>
</div>
</div>
......@@ -269,7 +248,7 @@
<!-- 人员通讯录 -->
<div class="sy_box_content_r_t">
<div class="sy_box_content_r_t_title">
<img src="@/assets/img/sy_1.png" alt="" />
<img src="@/assets/img/sy_1.png" alt=""/>
<span class="sy_box_content_r_t_title_span">人员通讯录</span>
</div>
<!-- 下面的 table 部分 -->
......@@ -302,16 +281,21 @@
</div>
<div class="sy_box_content_r_b">
<div class="sy_box_content_r_b_title">
<img src="@/assets/img/sy_1.png" alt="" />
<span class="sy_box_content_r_b_title_span">人员通讯录</span>
<img src="@/assets/img/sy_1.png" alt=""/>
<span class="sy_box_content_r_b_title_span">最新公告</span>
</div>
<div class="sy_box_content_r_b_content">
<div class="sy_box_content_r_b_content_p">
<div class="sy_box_content_r_b_content_p" v-for="(item,index) in tableDataTztg" :key="index">
<div class="sy_box_content_r_b_content_bj">
<div class="sy_box_content_r_b_content_span">08月31日</div>
<div class="sy_box_content_r_b_content_span">{{item.fbsj}}</div>
</div>
<div class="sy_box_content_r_b_content_text">
<span class="sy_box_content_r_b_content_text_span">比利时欧洲学院欧中研究中心主任门镜认为，欧盟高度重视发展对华关系，无论是双边还是多边议题，欧盟都...</span>
<el-tooltip placement="top" effect="light">
<div slot="content">{{item.wbggnr}}</div>
<div
class="sy_box_content_r_b_content_text_span">{{item.wbggnr}}
</div>
</el-tooltip>
</div>
</div>
</div>
......@@ -331,7 +315,9 @@
<img src="../../assets/img/txl/dashed.png" alt="">
</div>
<div class="table">
<el-table :highlight-current-row="false" ref="table" class="tableData" border max-height="320" :header-cell-style="{'background':'#053878', 'color':'#CEE7F7'}" :data="txlData" style="width: 100%" :row-class-name="tableRowClassName">
<el-table :highlight-current-row="false" ref="table" class="tableData" border max-height="320"
:header-cell-style="{'background':'#053878', 'color':'#CEE7F7'}" :data="txlData" style="width: 100%"
:row-class-name="tableRowClassName">
<el-table-column prop="date" label="部门" width="auto" align="center">
</el-table-column>
<el-table-column prop="name" label="姓名" width="auto" align="center">
......@@ -357,7 +343,9 @@
<img src="../../assets/img/txl/dashed.png" alt="">
</div>
<div class="table">
<el-table :highlight-current-row="false" ref="table" class="tableData" border max-height="320" :header-cell-style="{'background':'#053878', 'color':'#CEE7F7'}" :data="wdxzData" style="width: 100%" :row-class-name="tableRowClassName">
<el-table :highlight-current-row="false" ref="table" class="tableData" border max-height="320"
:header-cell-style="{'background':'#053878', 'color':'#CEE7F7'}" :data="wdxzData" style="width: 100%"
:row-class-name="tableRowClassName">
<el-table-column prop="date" label="文档名称" width="441">
</el-table-column>
<el-table-column prop="name" label="操作" width="auto" align="center">
......@@ -367,70 +355,28 @@
</div>
</div>
<!--登录弹窗-->
<div class="sptc" @click.self="closeSptc" v-show="sptc">
<div class="sptc_content">
<div class="account">
<div class="count_bg">
<img src="../../assets/img/login/user.png" alt="">
</div>
<input type="text" placeholder="账号">
</div>
<div class="password">
<div class="pwd_bg">
<img src="../../assets/img/login/pwd.png" alt="">
</div>
<input type="text" placeholder="密码">
</div>
<div class="tip">*“账号登陆异常，请联系管理员”</div>
<div class="loginBtn" @click="login">登录</div>
<div class="options">
<div class="left">忘记密码</div>
<div class="right">
<div class="lxwm">联系我们</div>
<div class="help">帮助</div>
</div>
</div>
</div>
</div>
<!-- <el-dialog
:visible.sync="dialogFormVisible"
:modal-append-to-body='false'
ref="ruleFormLogin"
custom-class="tztgClassLogin">
<div class="tztgClassLogin_nr">
<el-form>
<el-form-item>
<el-input placeholder="账号">
<template slot="prepend">
<img src="@/assets/img/tb_input.png" alt="">
</template>
</el-input>
</el-form-item>
<el-form-item>
<el-input placeholder="密码">
<template slot="prepend">
<img src="@/assets/img/tb_input.png" alt="">
</template>
</el-input>
</el-form-item>
</el-form>
</div>
</el-dialog> -->
<login v-show="sptc" @sptcFn="sptcFn"/>
</div>
</template>
<script>
import zoom from '@/utils/autosize.js'
import echarts from 'echarts'
import login from '@c/login.vue'
import * as am4core from '@amcharts/amcharts4/core'
import * as am4charts from '@amcharts/amcharts4/charts'
import am4themes_animated from '@amcharts/amcharts4/themes/animated'
import axios from 'axios'
import moment from 'moment'
am4core.useTheme(am4themes_animated)
export default {
name: 'index',
data () {
components:{ login },
data() {
return {
userInfo: JSON.parse(localStorage.getItem('userInfo')) || {},
isFalg: localStorage.getItem('isFalg') || false,
txlData: [{
date: '刑侦总队',
name: '下载',
......@@ -469,31 +415,31 @@ export default {
}],
wdxzData: [{
date: '重庆市***区公安局市xxx文档',
name: '下载',
name: '下载'
}, {
date: '重庆市***区公安局市xxx文档',
name: '下载',
name: '下载'
}, {
date: '重庆市***区公安局市xxx文档',
name: '下载',
name: '下载'
}],
dialogFormVisible: false,
list1: [
{
name: '刑事案件',
imgUrl: require('@/assets/img/jc.png')
name: '用户手册',
imgUrl: require('@/assets/img/cygj_yhsc.png')
},
{
name: '行政案件',
imgUrl: require('@/assets/img/jc.png')
name: '数字证书',
imgUrl: require('@/assets/img/cygj_szzs.png')
},
{
name: '矛盾纠纷',
imgUrl: require('@/assets/img/jc.png')
name: '浏览器',
imgUrl: require('@/assets/img/cygj_llq.png')
},
{
name: '警情',
imgUrl: require('@/assets/img/jc.png')
name: '空间转换',
imgUrl: require('@/assets/img/cygj_kjzh.png')
}
],
label: [233, 233, 200, 180, 199, 233, 210, 180],
......@@ -502,50 +448,25 @@ export default {
{
imgUrl: require('@/assets/img/sy_kk.png'),
name: '卡口',
number: 129
total: 129
},
{
imgUrl: require('@/assets/img/sy_sp.png'),
name: '视频',
number: 129
total: 129
},
{
imgUrl: require('@/assets/img/sy_wb.png'),
name: '网吧',
number: 129
total: 129
},
{
imgUrl: require('@/assets/img/sy_ld.png'),
name: '旅店',
number: 129
}
],
list3: [
{
name: '案件总数',
total: 3566
},
{
name: '嫌疑人数',
total: 3481
},
{
name: '重点人员数',
total: 3292
},
{
name: '可疑人员数',
total: 4630
},
{
name: '可疑车辆数',
total: 4200
},
{
name: '可疑标识号',
total: 2440
total: 129
}
],
list4: [],
tableData: [
{
department: '2016-05-02',
......@@ -574,75 +495,162 @@ export default {
],
statistics: [
{
title: '案件总数',
num: 3566
name: '案件总数',
total: 3566
},
{
title: '嫌疑人数',
num: 3481
name: '嫌疑人数',
total: 3481
},
{
title: '重点人员数',
num: 3292
name: '重点人员数',
total: 3292
},
{
title: '可疑人员数',
num: 4630
name: '可疑人员数',
total: 4630
},
{
title: '可疑车辆数',
num: 4200
name: '可疑车辆数',
total: 4200
},
{
title: '可疑标识数',
num: 2440
name: '可疑标识数',
total: 2440
}
],
sptc: false,
txl: false,
wdxz: false
wdxz: false,
tableDataTztg: [],
}
},
mounted () {
mounted() {
this.getData()
this.getDataTztg()
this.initLineEcharts()
this.$refs.table.clearSort()
// 屏幕自适应
zoom('syBox')
window.addEventListener('resize', function () {
zoom('syBox')
})
this.initLineEcharts()
this.initPieEcharts()
this.$refs.table.clearSort();
},
methods: {
tableRowClassName ({ row, rowIndex }) {
return 'rowClass';
sptcFn(val){
this.sptc = val
},
/**
* @description: 登录
* @param {*}
* @return {*}
*/
login () {
this.sptc = false
// 通知通告
getDataTztg() {
let self = this
axios.get('/xzz/getXtgxxPage', {
params: {
mbbt: '',
page: 1,
row: 9999
}
}).then(res => {
if (res.state == 'success') {
self.tableLoading = false
self.tableDataTztg = res.data
// self.total = res.count
if (self.tableDataTztg.length > 0) {
self.tableDataTztg.forEach(item => {
if (item.fbsj) {
item.fbsj = moment(item.fbsj).format('MM月DD日')
}
})
}
}
})
},
closeSptc () {
// 接口1
getData() {
let self = this
axios.post('/xxyy/selectCounts').then(res => {
self.list2 = res.list2
self.list2.forEach(item => {
switch (item.name) {
case '卡口':
item.imgUrl = require('@/assets/img/sy_kk.png')
break
case '视频':
item.imgUrl = require('@/assets/img/sy_sp.png')
break
case '网吧':
item.imgUrl = require('@/assets/img/sy_wb.png')
break
case '旅店':
item.imgUrl = require('@/assets/img/sy_ld.png')
break
}
})
self.statistics = res.list3
self.list4 = res.list1
self.list4.forEach(item => {
switch (item.name) {
case '卷宗统计':
item.imgUrl = require('@/assets/img/center/jztj.png')
break
case '申请单统计':
item.imgUrl = require('@/assets/img/center/sqdtj.png')
break
case '线索统计':
item.imgUrl = require('@/assets/img/center/xstj.png')
break
case '审批统计':
item.imgUrl = require('@/assets/img/center/sptj.png')
break
}
})
self.initPieEcharts()
})
},
tableRowClassName({ row, rowIndex }) {
return 'rowClass'
},
closeSptc() {
this.sptc = false
this.txl = false
this.wdxz = false
},
// 点击通讯录按钮
getTxl () {
getTxl() {
this.txl = true
},
// 点击文档下载按钮
getWdxz () {
getWdxz() {
this.wdxz = true
},
// 点击登录按钮
getLogin () {
getLogin() {
this.sptc = true
// let self = this
// self.dialogFormVisible = true
},
// 点击退出登录
LoginOut() {
let self = this
self.$confirm('此操作将退出登录状态, 是否继续?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
self.$message({
type: 'success',
message: '退出登录成功!'
});
self.isFalg = false
localStorage.clear()
// self.$router.push('/sy')
self.userInfo = {}
self.$forceUpdate()
// window.opener.location.reload()
// window.close()
}).catch(() => {
self.$message({
type: 'info',
message: '已取消退出登录'
});
});
},
/**
* @description: 初始化线echarts图
......@@ -651,7 +659,7 @@ export default {
* @author: 赵鹏龙
*/
initLineEcharts () {
initLineEcharts() {
let self = this
let myChart = echarts.init(document.getElementById('line-echarts'))
let option = {
......@@ -791,43 +799,43 @@ export default {
}
myChart.setOption(option)
},
initPieEcharts () {
initPieEcharts() {
// Themes begin
let self = this
am4core.useTheme(am4themes_animated)
// Themes end
var chart = am4core.create('pie-charts', am4charts.PieChart3D)
chart.data = []
chart.hiddenState.properties.opacity = 0 // this creates initial fade-in
chart.data = [
{
country: '网吧',
litres: 1,
color: am4core.color('#773efd')
},
{
country: '卡口',
litres: 2,
color: am4core.color('#dd22fa')
},
{
country: '视频',
litres: 3,
color: am4core.color('#1dadd4')
},
{
country: '旅店',
litres: 4,
color: am4core.color('#172cdb')
self.list2.forEach(item => {
let obj = {}
switch (item.name) {
case '卡口':
obj.color = am4core.color('#CD2EF8')
break
case '视频':
obj.color = am4core.color('#0BBAE6')
break
case '网吧':
obj.color = am4core.color('#904AFD')
break
case '旅店':
obj.color = am4core.color('#3764FC')
break
}
]
obj.country = item.name
obj.litres = item.total
chart.data.push(obj)
})
chart.depth = 100
chart.depth = 50
var series = chart.series.push(new am4charts.PieSeries3D())
series.dataFields.value = 'litres'
series.dataFields.depthValue = 'litres'
series.dataFields.category = 'country'
series.angle = 50
series.angle = 45
series.slices.template.cornerRadius = 5
series.ticks.template.disabled = true
series.alignLabels = false
......@@ -835,13 +843,26 @@ export default {
series.labels.template.radius = am4core.percent(-40)
series.labels.template.fill = am4core.color('white')
series.colors.step = 3
console.log(series)
}
}
}
</script>
<style scoped lang="scss">
@import './index.scss';
@import './index.scss';
</style>
<style lang="scss">
.sy_box_content_r_b_content::-webkit-scrollbar-track {
background-color: #072550;
}
.sy_box_content_r_b_content::-webkit-scrollbar {
width: 5px;
}
.sy_box_content_r_b_content::-webkit-scrollbar-thumb {
background-color: #000;
/*border-radius: 50%;*/
}
</style>
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