Commit 8b08ddd0 by yuhao

完成海南协作平台首页

parent e202ccba
@import './main.scss'; @import './main.scss';
.main_warp {
display: flex;
height: 100%;
.leftMenu {
.el-menu {
// width: 200px;
padding: 12px 8px 0 8px;
box-sizing: border-box;
border-right: none;
}
/deep/.el-tooltip {
padding: 0 0 0 14px !important;
}
}
.queryContent {
width: calc(100% - 200px);
height: 100vh;
overflow: hidden;
.main_top {
height: 56px;
background: #FFFFFF;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 32px 0 24px;
.top_left {
>i:nth-child(1) {
font-size: 16px;
cursor: pointer;
margin-right: 33px;
}
}
.full {
display: inline-block;
}
.iconfont {
cursor: pointer;
}
.icon-zhankaidaohang {
margin-right: 33px;
}
.icon-youjian {
margin: 0 32px;
}
}
.rightContent {
overflow-y: auto;
height: calc(100% - 56px);
.topMenu {
height: 48px;
background: #FFFFFF;
padding: 0 20px;
z-index: -1;
}
}
}
}
.el-submenu .el-menu-item { .el-submenu .el-menu-item {
padding: 0 !important; padding-left: 35px !important;
min-width: 150px !important
} }
.activeClass { .activeClass {
...@@ -9,53 +81,31 @@ ...@@ -9,53 +81,31 @@
} }
.headerTitle { .headerTitle {
height: 64px; display: flex;
// background: #0061F7; align-items: center;
font-size: 18px; height: 56px;
font-weight: bold; background: #2C3645;
line-height: 64px; line-height: 56px;
color: #fff; color: #FFFFFF;
padding: 0 4px; padding-left: 24px;
margin-bottom: 16px;
img { img {
width: 36px; width: 32px;
margin-right: 5px; height: 32px;
margin-right: 8px;
} }
}
.headerUser { >span {
height: 56px; font-weight: bold;
// background: #0061F7; height: 24px;
font-size: 18px; font-size: 20px;
font-weight: bold; line-height: 24px;
line-height: 56px; }
color: #333;
padding: 0 16px 0 43px;
background: rgba(0, 0, 0, 0.2);
// background-color: #fff;
position: sticky;
top: 0;
z-index: 99
} }
.queryContent {
height: calc(100vh - 1px);
// height: 100%;
}
.rightContent {
flex: 1;
height: 100%;
overflow-y: auto;
.topMenu {
height: 48px;
background: #FFFFFF;
padding: 0 20px;
z-index: -1;
}
}
/deep/ .el-tabs__header { /deep/ .el-tabs__header {
margin: 0 !important; margin: 0 !important;
...@@ -87,19 +137,17 @@ ...@@ -87,19 +137,17 @@
.leftMenu { .leftMenu {
width: 220px; width: 220px;
height: 100%; // padding: 0px 8px;
background: linear-gradient(#1C222B, #4B5B76) !important; height: 100vh;
background: #2C3645;
box-shadow: 4px 0px 8px rgba(0, 0, 0, 0.08); box-shadow: 4px 0px 8px rgba(0, 0, 0, 0.08);
opacity: 1; opacity: 1;
font-size: 14px; font-size: 14px;
// padding-top: 12px; // padding-top: 12px;
padding: 0 16px;
box-sizing: border-box;
overflow: hidden;
.iconfont { .iconfont {
margin-right: 18px; margin-right: 14px;
margin-left: 7px; // margin-left: 7px;
} }
/deep/ .el-submenu ul>li { /deep/ .el-submenu ul>li {
...@@ -111,11 +159,11 @@ ...@@ -111,11 +159,11 @@
} }
/deep/ .el-menu-item.is-active { /deep/ .el-menu-item.is-active {
background-color: rgba(33, 150, 243, 0.2) !important; background-color: #4B5B76 !important;
color: #fff; color: #fff;
i { i {
color: #2962FF; // color: #2962FF;
} }
} }
...@@ -126,8 +174,8 @@ ...@@ -126,8 +174,8 @@
/deep/ .el-menu-item, /deep/ .el-menu-item,
/deep/ .el-submenu__title { /deep/ .el-submenu__title {
height: 56px; height: 48px;
line-height: 56px; line-height: 48px;
} }
...@@ -189,4 +237,13 @@ ...@@ -189,4 +237,13 @@
} }
} }
}
.sidebarLogoFade-enter-active {
transition: opacity 1.5s;
}
.sidebarLogoFade-enter,
.sidebarLogoFade-leave-to {
opacity: 0;
} }
\ No newline at end of file
import menuLayout from "@/layout/menuLayout.vue"; import menuLayout from "@/layout/menuLayout.vue";
const menuLayouts = [ const menuLayouts = [
{ {
path: "/statistical", path: "/queryBaxz",
name: "statistical", name: "queryBaxz",
meta: { meta: {
title: '统计分析', title: '办案协作',
auth: "5", auth: "5",
}, },
component: () => import("@/views/statistical/index.vue") component: () => import("@/views/baxz/queryBaxz.vue")
}, },
{
path: "/structure",
name: "structure",
meta: {
title: '统计分析',
auth: "5",
},
component: () => import("@/views/statistical/jgfbt.vue")
},
{
path: "/zcsw",
name: "zcsw",
meta: {
title: '统计分析',
auth: "5",
},
component: () => import("@/views/statistical/zcsw.vue")
},
{
path: "/zarys",
name: "zarys",
meta: {
title: '统计分析',
auth: "5",
},
component: () => import("@/views/statistical/zarys.vue")
},
{
path: "/qfgm",
name: "qfgm",
meta: {
title: '统计分析',
auth: "5",
},
component: () => import("@/views/statistical/qfgm.vue")
},
{
path: "/yzbl",
name: "yzbl",
meta: {
title: '统计分析',
auth: "5",
},
component: () => import("@/views/statistical/yzbl.vue")
},
{
path: "/xxma",
name: "xxma",
meta: {
title: '统计分析',
auth: "5",
},
component: () => import("@/views/statistical/xxma.vue")
},
{
path: "/sqaj",
name: "sqaj",
meta: {
title: '统计分析',
auth: "5",
},
component: () => import("@/views/statistical/sqaj.vue")
},
{
path: "/qjaj",
name: "qjaj",
meta: {
title: '统计分析',
auth: "5",
},
component: () => import("@/views/statistical/qjaj.vue")
},
{
path: "/shaj",
name: "shaj",
meta: {
title: '统计分析',
auth: "5",
},
component: () => import("@/views/statistical/shaj.vue")
},
{
path: "/qfcc",
name: "qfcc",
meta: {
title: '统计分析',
auth: "5",
},
component: () => import("@/views/statistical/qfcc.vue")
},
{
path: "/zpaj",
name: "zpaj",
meta: {
title: '统计分析',
auth: "5",
},
component: () => import("@/views/statistical/zpaj.vue")
},
{
path: "/dxwl",
name: "dxwl",
meta: {
title: '统计分析',
auth: "5",
},
component: () => import("@/views/statistical/dxwl.vue")
},
{
path: "/ctdq",
name: "ctdq",
meta: {
title: '统计分析',
auth: "5",
},
component: () => import("@/views/statistical/ctdq.vue")
},
{
path: "/dqaj",
name: "dqaj",
meta: {
title: '统计分析',
auth: "5",
},
component: () => import("@/views/statistical/dqaj.vue")
},
{
path: "/rsdq",
name: "rsdq",
meta: {
title: '统计分析',
auth: "5",
},
component: () => import("@/views/statistical/rsdq.vue")
},
{
path: "/dqjdc",
name: "dqjdc",
meta: {
title: '统计分析',
auth: "5",
},
component: () => import("@/views/statistical/dqjdc.vue")
},
{
path: "/pqaj",
name: "pqaj",
meta: {
title: '统计分析',
auth: "5",
},
component: () => import("@/views/statistical/pqaj.vue")
},
{
path: "/qjqj",
name: "qjqj",
meta: {
title: '统计分析',
auth: "5",
},
component: () => import("@/views/statistical/qjqj.vue")
},
{
path: "/qdaj",
name: "qdaj",
meta: {
title: '统计分析',
auth: "5",
},
component: () => import("@/views/statistical/qdaj.vue")
},
{
path: "/wwaj",
name: "wwaj",
meta: {
title: '统计分析',
auth: "5",
},
component: () => import("@/views/statistical/wwaj.vue")
},
{
path: "/ajtjb",
name: "ajtjb",
meta: {
title: '统计分析',
auth: "5",
},
component: () => import("@/views/basicInfo/ajtjb.vue")
},
{
path: "/ajlbtj",
name: "ajtajlbtjjb",
meta: {
title: '统计分析',
auth: "5",
},
component: () => import("@/views/ajlb/ajlbtj.vue")
},
{
path: "/ajlbtjcd",
name: "ajlbtjcd",
meta: {
title: '统计分析',
auth: "5",
},
component: () => import("@/views/ajlb/ajlbtjcd.vue")
},
{
path: "/qqqctj",
name: "qqqctj",
meta: {
title: '统计分析',
auth: "5",
},
component: () => import("@/views/qqqc/qqqctj.vue")
},
{
path: "/rxyj",
name: "rxyj",
meta: {
title: '人像预警',
auth: "5",
},
component: () => import("@/views/rxyj/rxyj.vue")
},
{
path: "/rxgl",
name: "rxgl",
meta: {
title: '人像预警',
auth: "5",
},
component: () => import("@/views/rxyj/rxgl.vue")
},
] ]
export default [{ export default [{
path: "/right", path: "/right",
component: menuLayout, component: menuLayout,
children: [...menuLayouts] children: [...menuLayouts]
}, { },
path: "/caseDetail", {
name: "caseDetail", path: "/addBaxz",
meta: { name: "addBaxz",
title: '统计分析',
auth: "5",
},
component: () => import("@/views/statistical/caseDetail.vue")
}, {
path: "/zcswDetail",
name: "zcswDetail",
meta: {
title: '统计分析',
auth: "5",
},
component: () => import("@/views/statistical/zcswDetail.vue")
}, {
path: "/zaryDetail",
name: "zaryDetail",
meta: {
title: '统计分析',
auth: "5",
},
component: () => import("@/views/statistical/zaryDetail.vue")
}, {
path: "/ajtjbDetail",
name: "ajtjbDetail",
meta: {
title: '统计分析',
auth: "5",
},
component: () => import("@/views/basicInfo/ajtjbDetail.vue")
}, {
path: "/ajzztDetail",
name: "ajzztDetail",
meta: {
title: '统计分析',
auth: "5",
},
component: () => import("@/views/basicInfo/ajzztDetail.vue")
}, {
path: "/nlhjDetail",
name: "nlhjDetail",
meta: {
title: '统计分析',
auth: "5",
},
component: () => import("@/views/basicInfo/nlhjDetail.vue")
}, {
path: "/shrDetail",
name: "shrDetail",
meta: {
title: '统计分析',
auth: "5",
},
component: () => import("@/views/basicInfo/shrDetail.vue")
}, {
path: "/xyrDetail",
name: "xyrDetail",
meta: {
title: '统计分析',
auth: "5",
},
component: () => import("@/views/basicInfo/xyrDetail.vue")
}, {
path: "/ajlbtjDetail",
name: "ajlbtjDetail",
meta: {
title: '统计分析',
auth: "5",
},
component: () => import("@/views/ajlb/ajlbtjDetail.vue")
}, {
path: "/qqqctjDetail",
name: "qqqctjDetail",
meta: {
title: '统计分析',
auth: "5",
},
component: () => import("@/views/qqqc/qqqctjDetail.vue")
}, {
path: "/wcnfz",
name: "wcnfc",
meta: {
title: '统计分析',
auth: "5",
},
component: () => import("@/views/wcn/wcnfz.vue")
}, {
path: "/wcnajlbDetail",
name: "wcnajlbDetail",
meta: {
title: '统计分析',
auth: "5",
},
component: () => import("@/views/wcn/wcnajlbDetail.vue")
}, {
path: "/wcnajsDetail",
name: "wcnajsDetail",
meta: {
title: '统计分析',
auth: "5",
},
component: () => import("@/views/wcn/wcnajsDetail.vue")
}, {
path: "/ajlbDetail",
name: "ajlbDetail",
meta: {
title: '统计分析',
auth: "5",
},
component: () => import("@/views/ajlb/ajlbDetail.vue")
}, {
path: "/ajsDetail",
name: "ajsDetail",
meta: {
title: '统计分析',
auth: "5",
},
component: () => import("@/views/ajlb/ajsDetail.vue")
}, {
path: "/wcnrysDetail",
name: "wcnrysDetail",
meta: {
title: '统计分析',
auth: "5",
},
component: () => import("@/views/wcn/wcnrysDetail.vue")
}, {
path: "/wcnshrfz",
name: "wcnshrfz",
meta: {
title: '统计分析',
auth: "5",
},
component: () => import("@/views/wcnshr/wcnfz.vue")
}, {
path: "/wcnshrajlbDetail",
name: "wcnajlbDetail",
meta: {
title: '统计分析',
auth: "5",
},
component: () => import("@/views/wcnshr/wcnajlbDetail.vue")
}, {
path: "/wcnshrajsDetail",
name: "wcnajsDetail",
meta: {
title: '统计分析',
auth: "5",
},
component: () => import("@/views/wcnshr/wcnajsDetail.vue")
}, {
path: "/wcnshrrysDetail",
name: "wcnrysDetail",
meta: {
title: '统计分析',
auth: "5",
},
component: () => import("@/views/wcnshr/wcnrysDetail.vue")
}, {
path: "/rxyjDetail",
name: "rxyj",
meta: {
title: '人像预警',
auth: "5",
},
component: () => import("@/views/rxyj/rxyjDetail.vue")
}, {
path: "/bklb",
name: "bklb",
meta: { meta: {
title: '布控列表', title: '发起协作',
auth: "5", auth: "5",
}, },
component: () => import("@/views/bklb/bklb.vue") component: () => import("@/views/baxz/addBaxz.vue")
},] },
\ No newline at end of file ]
\ No newline at end of file
...@@ -7,6 +7,7 @@ const getters = { ...@@ -7,6 +7,7 @@ const getters = {
roles: state => state.user.roles, roles: state => state.user.roles,
visitedViews: state => state.tagsView.visitedViews, visitedViews: state => state.tagsView.visitedViews,
cachedViews: state => state.tagsView.cachedViews, cachedViews: state => state.tagsView.cachedViews,
userAuth: state => state.user.userAuth
}; };
export default getters; export default getters;
import {removeToken} from "@/utils/auth"; import { removeToken } from "@/utils/auth";
import { login } from "@/api/index";
const state = { const state = {
...@@ -7,10 +8,16 @@ const state = { ...@@ -7,10 +8,16 @@ const state = {
Breadcrumbs: [], Breadcrumbs: [],
leftMenu: [], leftMenu: [],
header: '', header: '',
roles: [] roles: [],
token: '',
userAuth: ""
}; };
const mutations = { const mutations = {
SET_USERINFO: (state, content) => {
state.userAuth = content;
sessionStorage.setItem("userInfo", JSON.stringify(state.userAuth));
},
SET_TOKEN: (state, token) => { SET_TOKEN: (state, token) => {
state.token = token; state.token = token;
}, },
...@@ -32,15 +39,38 @@ const mutations = { ...@@ -32,15 +39,38 @@ const mutations = {
}; };
const actions = { const actions = {
remove_token({ commit }) { remove_token ({ commit }) {
commit("SET_TOKEN", ""); commit("SET_TOKEN", "");
removeToken(); removeToken();
}, },
logout({ commit }) { logout ({ commit }) {
commit('SET_ROLES', []) commit('SET_ROLES', [])
sessionStorage.removeItem("userInfo"); sessionStorage.removeItem("userInfo");
sessionStorage.removeItem('token', '') sessionStorage.removeItem('token', '')
}, },
login ({ commit }, userInfo) {
const { account, password } = userInfo
return new Promise(resolve => {
login({
account: account.trim(),
password: password
}).then((res) => {
if (res.data.code == 200) {
sessionStorage.setItem("token", "bearer " + res.data.data.accessToken);
// sessionStorage.setItem("userInfo", JSON.stringify(res.data.data));
commit('SET_TOKEN', "bearer " + res.data.data.accessToken)
commit('SET_USERINFO', res.data.data)
commit('SET_ROLES', res.data.data.permission.split(','))
}
resolve(res)
}).catch((err) => {
reject(err)
});
})
}
}; };
export default { export default {
......
export default function zoom (id) {
const width = 1920
const height = 1080
let x = window.innerWidth / width
let y = window.innerHeight / height
let scale = 'scale(' + x + ',' + y + ')'
let cssText = 'overflow:hidden;'
cssText += 'width:' + width + 'px;'
cssText += 'height:' + height + 'px;'
let browsers = ['', '-ms-', '-moz-', '-webkit-', '-o-']
browsers.forEach((key) => {
cssText += key + 'transform:' + scale + ' translate3d(0,0,0);'
cssText += key + 'transform-origin: left top 0;'
})
if (id) {
document.getElementById(id) ? document.getElementById(id).style.cssText = cssText : ''
} else {
document.body.style.cssText = cssText
}
}
/* eslint-disable */
// import cfg from '../config/defaultSettings'
//
// let zoom = function zoom(width, height) {
// let x = window.innerWidth / width
// let y = window.innerHeight / height
// let scale = 'scale(' + x + ',' + y + ')'
// let cssText = 'overflow:hidden;'
//
// cssText += 'width:' + width + 'px;'
// cssText += 'height:' + height + 'px;'
//
// let browsers = ['', '-ms-', '-moz-', '-webkit-', '-o-']
// browsers.forEach((key) => {
// cssText += key + 'transform:' + scale + ';'
// cssText += key + 'transform-origin: left top 0;'
// })
// document.body.style.cssText = cssText
// }
// zoom(1920px, cfg.windowHeight)
//
// window.addEventListener('resize', function () {
// zoom(1920px, cfg.windowHeight)
// })
//
// export default {
// zoom
// }
...@@ -71,8 +71,8 @@ axios.interceptors.request.use( ...@@ -71,8 +71,8 @@ axios.interceptors.request.use(
axios.interceptors.response.use( axios.interceptors.response.use(
response => { response => {
const status = response.data.code; const status = response.data && response.data.code;
const message = response.data.message; const message = response.data && response.data.message;
var relUrlIp = window.location.host.substring( var relUrlIp = window.location.host.substring(
0, 0,
window.location.host.length - 5 window.location.host.length - 5
......
<template>
<div>
<!-- 表格 -->
<div class="content_table">
<div class="table-info">
<div class="table-info-left">
<span class="table-title">信息列表</span>
</div>
<div class="table-info-left">
<el-button type="primary"
@click="exportResult"
:loading="exportLoad"
size="small">导出
</el-button>
</div>
</div>
<div class="table_contanier">
<Mytable :tableData="tableData"
:columObj="columObj"
id="vcfResult"
:pageObj="pageObj"
@rowBtn="rowBtn"
@handleSizeChange="handleSizeChange"
@handleCurrentChange="handleCurrentChange"></Mytable>
</div>
</div>
</div>
</template>
<script>
import {
getnewajlbTjByPid,
} from '@/api/statistical.js'
import Mytable from '@/components/Mytable.vue'
import axios from "axios";
import base from "@/api/base";
export default {
components: {
Mytable
},
data () {
return {
exportLoad: false,
pageObj: { //分页对象
total: null,
pageData: {
page: 1,
size: 10
}
},
tableData: [],
columObj: {
visble: false,
loading: false,
pagination: 'noPage',
columnData: [{
text: true,
prop: "dwmc",
editRow: undefined,
label: "单位",
width: "",
align: "center",
}, {
editPart: true,
prop: "name",
editRow: undefined,
label: "案件类别",
width: "",
align: "center",
}, {
edit: true,
prop: "num",
editRow: undefined,
label: "案件数",
width: "",
align: "center",
},
]
},
}
},
created () {
},
mounted () {
this.getDetail()
},
methods: {
rowBtn (row, index) {
// 单位
if (index == 'name') {
this.getDetail(row.code)
} else if (index == 'num') {
this.$router.pushToTab({
path: 'ajsDetail',
query: {
unitcode: this.$route.query.unitcode,
ajlbdm: row.code,
qryType: this.$route.query.qryType,
ajzt: this.$route.query.ajzt || '',
kssj: this.$route.query.kssj || '',
jssj: this.$route.query.jssj || '',
}
})
} else if (index == 'rys') {
this.$router.pushToTab({
path: 'wcnrysDetail',
query: {
unitcode: this.$route.query.unitcode,
ajlbdm: row.code,
qryType: this.$route.query.qryType,
ajzt: this.$route.query.ajzt || '',
kssj: this.$route.query.kssj || '',
jssj: this.$route.query.jssj || '',
}
})
}
},
// 详情列表
async getDetail (code) {
this.columObj.loading = true
let params = new FormData()
params.append('kssj', this.$route.query.kssj)
params.append('jssj', this.$route.query.jssj)
params.append('ajzt', this.$route.query.ajzt)
params.append('ajlbdm', code || this.$route.query.ajlbdm)
params.append('qryType', this.$route.query.qryType)
params.append('unitcode', this.$route.query.unitcode)
params.append('page', this.pageObj.pageData.page)
params.append('limit', this.pageObj.pageData.size)
let res = await getnewajlbTjByPid(params)
if (res) {
this.columObj.loading = false
res.data.rows.forEach((item) => {
item.dwmc = this.$route.query.dwmc
})
this.tableData = res.data.rows
this.pageObj.total = res.data.total
} else {
this.columObj.loading = false
}
},
//页码变化
handleCurrentChange (e) {
this.pageObj.pageData.page = e;
this.getDetail()
},
//条数变化
handleSizeChange (e) {
this.pageObj.pageData.size = e;
this.pageObj.pageData.page = 1;
this.getDetail()
},
exportResult () {
this.htmlToExcels.exportExcel("列表详情.xlsx", "#vcfResult");
},
},
}
</script>
<style lang="scss" scoped>
.content_table {
margin: 20px 48px;
background: #fff;
padding: 16px 24px;
box-sizing: border-box;
.table-info {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 12px;
.table-info-left {
.table-title {
font-style: normal;
font-weight: 500;
font-size: 18px;
line-height: 24px;
color: #383838;
margin-right: 20px;
}
.table-total {
font-size: 16px;
color: #777777;
}
.el-button {
width: 90px;
// height: 32px;
padding: 10px 0;
box-sizing: border-box;
}
}
}
}
.pagination {
margin-top: 20px;
display: flex;
justify-content: center;
height: 48px;
line-height: 48px;
}
.status-success {
background: #30be1a;
width: 12px;
height: 12px;
border-radius: 6px;
margin: 0 auto;
}
.status-error {
// background: #E83334;
// width: 12px;
// height: 12px;
// border-radius: 6px;
// margin: 0 auto;
&::after {
content: "\2714";
color: #e83334;
}
}
.unqualified {
&::after {
// \2716 X 2714 y
content: "\2716";
color: #e83334;
}
}
.status-success-plus {
&::after {
content: "\2714";
color: #30be1a;
}
}
.status-not {
&::after {
content: "\2612";
color: gray;
}
}
</style>
\ No newline at end of file
<template>
<div class="content_box">
<div class="content_form">
<header>
<p>查询条件</p>
</header>
<myForm :labelWidth="labelWidth"
:isActive="true"
:formConfig="formConfig"
:formData="formData"
:searchHandle="searchHandle"
ref="ruleForm"></myForm>
</div>
<div class="content_table">
<header>
<p>查询结果</p>
<!-- <span>{{ pageObj.total || '0' }}</span> -->
<!-- <el-button type="primary"
@click="exportResult"
size="small">导出
</el-button> -->
</header>
<Mytable v-loading="downLoading"
id="vcfResult"
element-loading-text="下载中..."
:tableData="tableData"
:columObj="columObj"
:pageObj="pageObj"
@rowBtn="rowBtn"
@handleSizeChange="handleSizeChange"
@handleCurrentChange="handleCurrentChange"></Mytable>
</div>
</div>
</template>
<script>
import myForm from '@/components/myForm.vue'
import Mytable from '@/components/Mytable.vue'
import {
getAjlbTjByPid,
getXlAjlbTj,
} from '@/api/statistical.js'
import axios from "axios";
import base from "@/api/base";
export default {
components: {
myForm, Mytable
},
data () {
return {
downLoading: false,
// 表单域标签的宽度
labelWidth: '100px',
// 表单配置
formConfig: [
{
label: '立案单位:',
id: 'unitcode',
type: 'codeTreeDialog',
props: [], //字典弹框需要的字段
value: "",
width: '100%',
codeOptions: [],
codeTree: "CODE_UNIT",
}, {
label: '案件状态:',
prop: 'ajzt',
type: 'selectSelf',
width: '100%',
options: [{ name: "全部", value: "" },
{ name: "立案", value: "1" },
{ name: "破案", value: "2" },
{ name: "未破案状态", value: "3" },
]
}, {
label: '立案时间段:',
prop: 'datetime',
type: 'daterange',
},
],
// 表单数据
formData: {
unitcode: '460000000000',
ajzt: '',
datetime: [],
},
searchHandle: [
{
label: '查询',
show: true,
icon: 'el-icon-search',
type: 'primary',
handle: () => {
this.searchData()
},
},
{
label: '重置',
show: true,
handle: () => {
this.resetData()
},
},
],
rules: [],
pageObj: { //分页对象
total: 0,
pageData: {
page: 1,
size: 10
}
},
tableData: [],
columObj: {
visble: false,
loading: false,
pagination: 'noPage',
columnData: [
{
editPart: true,
prop: "name",
editRow: undefined,
label: "案件类别",
width: "",
align: "center",
}, {
edit: true,
prop: "num",
editRow: undefined,
label: "案件数量",
width: "",
align: "center",
},
]
},
}
},
created () {
this.formData.datetime[0] = "2023-01-01"
this.formData.datetime[1] = this.$moment(new Date()).format("YYYY-MM-DD");
},
mounted () {
this.getList();
},
methods: {
async getList (code) {
let dateRange = this.formData.datetime;
if (dateRange && dateRange.length > 0) {
this.formData.sqsjKssj = dateRange[0];
this.formData.sqsjJssj = dateRange[1];
}
this.columObj.loading = true;
let params = new FormData()
params.append('unitcode', this.formData.unitcode)
params.append('ajzt', this.formData.ajzt)
params.append('ajlbdm', code || '')
params.append('kssj', this.formData.sqsjKssj || '')
params.append('jssj', this.formData.sqsjJssj || '')
let res = await getAjlbTjByPid(params)
if (res) {
this.columObj.loading = false;
// this.pageObj.total = res.total;
this.tableData = res.data.rows
}
},
//页码变化
handleCurrentChange (e) {
this.pageObj.pageData.page = e;
this.getList()
},
//条数变化
handleSizeChange (e) {
this.pageObj.pageData.size = e;
this.pageObj.pageData.page = 1;
this.getList()
},
rowBtn (row, index) {
// 单位
if (index == 'name') {
this.getList(row.code)
} else {
this.$router.pushToTab({
path: 'ajlbtjDetail',
query: {
unitcode: this.formData.unitcode,
ajzt: this.formData.ajzt,
code: row.code,
kssj: this.formData.sqsjKssj || '',
jssj: this.formData.sqsjJssj || '',
}
})
}
},
searchData () {
if (this.formData.datetime[0].split('-')[0] != this.formData.datetime[1].split('-')[0]) {
this.$message.error('请选择同一年份查询')
return
}
this.getList()
},
resetData () {
this.formData = {
unitcode: '460000000000',
ajzt: '',
datetime: [],
}
this.formData.datetime[0] = "2023-01-01"
this.formData.datetime[1] = this.$moment(new Date()).format("YYYY-MM-DD");
this.getList()
},
// 导出
exportResult () {
this.htmlToExcels.exportExcel("列表详情.xlsx", "#vcfResult");
},
},
}
</script>
<style lang="scss" scoped>
.content_box {
padding: 24px;
font-weight: 400;
overflow: auto;
width: 100%;
height: 94vh;
box-sizing: border-box;
}
header {
display: flex;
align-items: center;
height: 48px;
line-height: 48px;
border-bottom: 1px solid #dcdcdc;
padding-left: 48px;
padding-right: 24px;
margin-bottom: 16px;
justify-content: space-between;
p {
display: inline-block;
height: 24px;
font-size: 18px;
color: #5e5e5e;
line-height: 24px;
margin-right: 16px;
}
span {
height: 24px;
font-size: 14px;
color: #5e5e5e;
line-height: 24px;
}
}
.content_form {
background: #ffffff;
border-radius: 8px 8px 8px 8px;
margin-bottom: 16px;
padding-bottom: 16px;
/deep/ .el-form {
padding: 0 32px;
.el-form-item__content {
height: 32px;
}
}
}
.content_table {
background: #ffffff;
border-radius: 8px 8px 8px 8px;
/deep/ .tableCon {
padding: 0 20px;
}
}
</style>
\ No newline at end of file
<template>
<div>
<!-- 表格 -->
<div class="content_table">
<div class="table-info">
<div class="table-info-left">
<span class="table-title">信息列表</span>
<span class="table-total">{{pageObj.total||0}}条信息</span>
</div>
<div class="table-info-left">
<el-button type="primary"
@click="exportResult"
:loading="exportLoad"
size="small">导出
</el-button>
</div>
</div>
<div class="table_contanier">
<Mytable :tableData="tableData"
:columObj="columObj"
:pageObj="pageObj"
@handleSizeChange="handleSizeChange"
@handleCurrentChange="handleCurrentChange"></Mytable>
</div>
</div>
</div>
</template>
<script>
import {
getAjlbTjByPidTs,
} from '@/api/statistical.js'
import Mytable from '@/components/Mytable.vue'
import axios from "axios";
import base from "@/api/base";
export default {
components: {
Mytable
},
data () {
return {
exportLoad: false,
pageObj: { //分页对象
total: null,
pageData: {
page: 1,
size: 10
}
},
tableData: [],
columObj: {
visble: false,
loading: false,
columnData: [{
text: true,
prop: "asjbh",
editRow: undefined,
label: "案事件编号",
width: "",
align: "center",
}, {
text: true,
prop: "ajmc",
editRow: undefined,
label: "案件名称",
width: "",
align: "center",
}, {
text: true,
prop: "ladwGajgmc",
editRow: undefined,
label: "立案单位",
width: "",
align: "center",
}, {
text: true,
prop: "larq",
editRow: undefined,
label: "立案日期",
width: "",
align: "center",
}, {
text: true,
prop: "asjfssjAsjfskssj",
editRow: undefined,
label: "发案时间",
width: "",
align: "center",
}, {
text: true,
prop: "ajlbdm",
editRow: undefined,
label: "案件类别",
width: "",
align: "center",
}, {
text: true,
prop: "jyaq",
editRow: undefined,
label: "简要案情",
width: "",
align: "center",
showToolTip: true,
}
]
},
}
},
created () {
if (this.$route.query.types == 'ssje') {
this.columObj.columnData.push({
text: true,
prop: "ssjzrmby",
editRow: undefined,
label: "损失金额",
width: "",
align: "center",
})
};
},
mounted () {
this.getDetail()
},
methods: {
// 详情列表
async getDetail () {
this.columObj.loading = true
let params = new FormData()
params.append('kssj', this.$route.query.kssj)
params.append('jssj', this.$route.query.jssj)
params.append('unitcode', this.$route.query.unitcode)
params.append('ajzt', this.$route.query.ajzt)
params.append('ajlbdm', this.$route.query.code)
params.append('page', this.pageObj.pageData.page)
params.append('limit', this.pageObj.pageData.size)
let res = await getAjlbTjByPidTs(params)
if (res) {
this.columObj.loading = false
this.tableData = res.data.rows
this.pageObj.total = res.data.total
} else {
this.columObj.loading = false
}
},
//页码变化
handleCurrentChange (e) {
this.pageObj.pageData.page = e;
this.getDetail()
},
//条数变化
handleSizeChange (e) {
this.pageObj.pageData.size = e;
this.pageObj.pageData.page = 1;
this.getDetail()
},
exportResult () {
this.exportLoad = true
let params = new FormData();
params.append('kssj', this.$route.query.kssj)
params.append('jssj', this.$route.query.jssj)
params.append('unitcode', this.$route.query.unitcode)
params.append('ajzt', this.$route.query.ajzt)
params.append('ajlbdm', this.$route.query.code)
params.append('page', this.pageObj.pageData.page)
params.append('limit', this.pageObj.pageData.size)
let url = `${base.alyIP}/ajlbtj/exportgetAjlbTjByPidTs`;
axios
.post(url, params, {
responseType: "arraybuffer",
})
.then((res) => {
let blob = new Blob([res.data], { type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet", });
// 组装a标签
let elink = document.createElement("a");
// 设置下载文件名
elink.download = '列表详情';
elink.style.display = "none";
elink.href = URL.createObjectURL(blob);
document.body.appendChild(elink);
elink.click();
document.body.removeChild(elink);
this.exportLoad = false
}).catch(err => { this.exportLoad = false });
},
},
}
</script>
<style lang="scss" scoped>
.content_table {
margin: 20px 48px;
background: #fff;
padding: 16px 24px;
box-sizing: border-box;
.table-info {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 12px;
.table-info-left {
.table-title {
font-style: normal;
font-weight: 500;
font-size: 18px;
line-height: 24px;
color: #383838;
margin-right: 20px;
}
.table-total {
font-size: 16px;
color: #777777;
}
.el-button {
width: 90px;
// height: 32px;
padding: 10px 0;
box-sizing: border-box;
}
}
}
}
.pagination {
margin-top: 20px;
display: flex;
justify-content: center;
height: 48px;
line-height: 48px;
}
.status-success {
background: #30be1a;
width: 12px;
height: 12px;
border-radius: 6px;
margin: 0 auto;
}
.status-error {
// background: #E83334;
// width: 12px;
// height: 12px;
// border-radius: 6px;
// margin: 0 auto;
&::after {
content: "\2714";
color: #e83334;
}
}
.unqualified {
&::after {
// \2716 X 2714 y
content: "\2716";
color: #e83334;
}
}
.status-success-plus {
&::after {
content: "\2714";
color: #30be1a;
}
}
.status-not {
&::after {
content: "\2612";
color: gray;
}
}
</style>
\ No newline at end of file
<template>
<div>
<!-- 表格 -->
<div class="content_table">
<div class="table-info">
<div class="table-info-left">
<span class="table-title">信息列表</span>
<span class="table-total">{{pageObj.total||0}}条信息</span>
</div>
<div class="table-info-left">
<el-button type="primary"
@click="exportResult"
:loading="exportLoad"
size="small">导出
</el-button>
</div>
</div>
<div class="table_contanier">
<Mytable :tableData="tableData"
:columObj="columObj"
:pageObj="pageObj"
@handleSizeChange="handleSizeChange"
@handleCurrentChange="handleCurrentChange"></Mytable>
</div>
</div>
</div>
</template>
<script>
import {
getnewAjlbTjByPidTs,
} from '@/api/statistical.js'
import Mytable from '@/components/Mytable.vue'
import axios from "axios";
import base from "@/api/base";
export default {
components: {
Mytable
},
data () {
return {
exportLoad: false,
pageObj: { //分页对象
total: null,
pageData: {
page: 1,
size: 10
}
},
tableData: [],
columObj: {
visble: false,
loading: false,
columnData: [{
text: true,
prop: "asjbh",
editRow: undefined,
label: "案件编号",
width: "",
align: "center",
}, {
text: true,
prop: "ajmc",
editRow: undefined,
label: "案件名称",
width: "",
align: "center",
}, {
text: true,
prop: "ladwGajgmc",
editRow: undefined,
label: "立案单位",
width: "",
align: "center",
}, {
text: true,
prop: "larq",
editRow: undefined,
label: "立案日期",
width: "",
align: "center",
}, {
text: true,
prop: "asjfssjAsjfskssj",
editRow: undefined,
label: "发案时间",
width: "",
align: "center",
}, {
text: true,
prop: "ajlbdm",
editRow: undefined,
label: "案件类别",
width: "",
align: "center",
}, {
text: true,
prop: "jyaq",
editRow: undefined,
label: "简要案情",
width: "",
align: "center",
showToolTip: true,
},
]
},
}
},
created () {
},
mounted () {
this.getDetail()
},
methods: {
// 详情列表
async getDetail () {
this.columObj.loading = true
let params = new FormData()
params.append('kssj', this.$route.query.kssj)
params.append('jssj', this.$route.query.jssj)
params.append('ajzt', this.$route.query.ajzt)
params.append('ajlbdm', this.$route.query.ajlbdm)
params.append('qryType', this.$route.query.qryType)
params.append('unitcode', this.$route.query.unitcode)
params.append('page', this.pageObj.pageData.page)
params.append('limit', this.pageObj.pageData.size)
let res = await getnewAjlbTjByPidTs(params)
if (res) {
this.columObj.loading = false
this.tableData = res.data.rows
this.pageObj.total = res.data.total
} else {
this.columObj.loading = false
}
},
//页码变化
handleCurrentChange (e) {
this.pageObj.pageData.page = e;
this.getDetail()
},
//条数变化
handleSizeChange (e) {
this.pageObj.pageData.size = e;
this.pageObj.pageData.page = 1;
this.getDetail()
},
exportResult () {
this.exportLoad = true
let params = new FormData();
params.append('kssj', this.$route.query.kssj)
params.append('jssj', this.$route.query.jssj)
params.append('ajzt', this.$route.query.ajzt)
params.append('ajlbdm', this.$route.query.ajlbdm)
params.append('qryType', this.$route.query.qryType)
params.append('unitcode', this.$route.query.unitcode)
params.append('page', this.pageObj.pageData.page)
params.append('limit', this.pageObj.pageData.size)
let url = `${base.alyIP}/newajlb/exportnewAjlbTjByPidTs`;
axios
.post(url, params, {
responseType: "arraybuffer",
})
.then((res) => {
let blob = new Blob([res.data], { type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet", });
// 组装a标签
let elink = document.createElement("a");
// 设置下载文件名
elink.download = '列表详情';
elink.style.display = "none";
elink.href = URL.createObjectURL(blob);
document.body.appendChild(elink);
elink.click();
document.body.removeChild(elink);
this.exportLoad = false
}).catch(err => { this.exportLoad = false });
},
},
}
</script>
<style lang="scss" scoped>
.content_table {
margin: 20px 48px;
background: #fff;
padding: 16px 24px;
box-sizing: border-box;
.table-info {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 12px;
.table-info-left {
.table-title {
font-style: normal;
font-weight: 500;
font-size: 18px;
line-height: 24px;
color: #383838;
margin-right: 20px;
}
.table-total {
font-size: 16px;
color: #777777;
}
.el-button {
width: 90px;
// height: 32px;
padding: 10px 0;
box-sizing: border-box;
}
}
}
}
.pagination {
margin-top: 20px;
display: flex;
justify-content: center;
height: 48px;
line-height: 48px;
}
.status-success {
background: #30be1a;
width: 12px;
height: 12px;
border-radius: 6px;
margin: 0 auto;
}
.status-error {
// background: #E83334;
// width: 12px;
// height: 12px;
// border-radius: 6px;
// margin: 0 auto;
&::after {
content: "\2714";
color: #e83334;
}
}
.unqualified {
&::after {
// \2716 X 2714 y
content: "\2716";
color: #e83334;
}
}
.status-success-plus {
&::after {
content: "\2714";
color: #30be1a;
}
}
.status-not {
&::after {
content: "\2612";
color: gray;
}
}
</style>
\ No newline at end of file
<template>
<div>
<!-- 表格 -->
<div class="content_table">
<div class="table-info">
<div class="table-info-left">
<span class="table-title">信息列表</span>
<span class="table-total">{{pageObj.total||0}}条信息</span>
</div>
<div class="table-info-left">
<el-button type="primary"
@click="exportResult"
:loading="exportLoad"
size="small">导出
</el-button>
</div>
</div>
<div class="table_contanier">
<Mytable :tableData="tableData"
:columObj="columObj"
:pageObj="pageObj"
@handleSizeChange="handleSizeChange"
@handleCurrentChange="handleCurrentChange"></Mytable>
</div>
</div>
</div>
</template>
<script>
import {
getDwTjTs,
} from '@/api/statistical.js'
import Mytable from '@/components/Mytable.vue'
import axios from "axios";
import base from "@/api/base";
export default {
components: {
Mytable
},
data () {
return {
exportLoad: false,
pageObj: { //分页对象
total: null,
pageData: {
page: 1,
size: 10
}
},
tableData: [],
columObj: {
visble: false,
loading: false,
columnData: [{
text: true,
prop: "asjbh",
editRow: undefined,
label: "案事件编号",
width: "",
align: "center",
}, {
text: true,
prop: "ajmc",
editRow: undefined,
label: "案件名称",
width: "",
align: "center",
}, {
text: true,
prop: "ladwGajgmc",
editRow: undefined,
label: "立案单位",
width: "",
align: "center",
}, {
text: true,
prop: "larq",
editRow: undefined,
label: "立案日期",
width: "",
align: "center",
}, {
text: true,
prop: "asjfssjAsjfskssj",
editRow: undefined,
label: "发案时间",
width: "",
align: "center",
}, {
text: true,
prop: "ajlbdm",
editRow: undefined,
label: "案件类别",
width: "",
align: "center",
}, {
text: true,
prop: "jyaq",
editRow: undefined,
label: "简要案情",
width: "",
align: "center",
showToolTip: true,
}
]
},
}
},
created () {
if (this.$route.query.types == 'ssje') {
this.columObj.columnData.push({
text: true,
prop: "ssjzrmby",
editRow: undefined,
label: "损失金额",
width: "",
align: "center",
})
};
},
mounted () {
this.getDetail()
},
methods: {
// 详情列表
async getDetail () {
this.columObj.loading = true
let params = new FormData()
params.append('kssj', this.$route.query.kssj)
params.append('jssj', this.$route.query.jssj)
params.append('tjlb', this.$route.query.tjlb)
params.append('qryType', this.$route.query.qryType)
params.append('unitcode', this.$route.query.unitcode)
params.append('ajzt', this.$route.query.ajzt)
params.append('ajlbdm', this.$route.query.ajlbdm)
params.append('xlajlbdm', this.$route.query.xlajlbdm)
params.append('page', this.pageObj.pageData.page)
params.append('limit', this.pageObj.pageData.size)
let res = await getDwTjTs(params)
if (res) {
this.columObj.loading = false
this.tableData = res.data.rows
this.pageObj.total = res.data.total
} else {
this.columObj.loading = false
}
},
//页码变化
handleCurrentChange (e) {
this.pageObj.pageData.page = e;
this.getDetail()
},
//条数变化
handleSizeChange (e) {
this.pageObj.pageData.size = e;
this.pageObj.pageData.page = 1;
this.getDetail()
},
exportResult () {
this.exportLoad = true
let params = new FormData();
params.append('kssj', this.$route.query.kssj)
params.append('jssj', this.$route.query.jssj)
params.append('tjlb', this.$route.query.tjlb)
params.append('qryType', this.$route.query.qryType)
params.append('unitcode', this.$route.query.unitcode)
params.append('ajzt', this.$route.query.ajzt)
params.append('ajlbdm', this.$route.query.ajlbdm)
params.append('xlajlbdm', this.$route.query.xlajlbdm)
params.append('page', this.pageObj.pageData.page)
params.append('limit', this.pageObj.pageData.size)
let url = `${base.alyIP}/dwtj/exportgetDwTjTs`;
axios
.post(url, params, {
responseType: "arraybuffer",
})
.then((res) => {
let blob = new Blob([res.data], { type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet", });
// 组装a标签
let elink = document.createElement("a");
// 设置下载文件名
elink.download = '列表详情';
elink.style.display = "none";
elink.href = URL.createObjectURL(blob);
document.body.appendChild(elink);
elink.click();
document.body.removeChild(elink);
this.exportLoad = false
}).catch(err => { this.exportLoad = false });
},
},
}
</script>
<style lang="scss" scoped>
.content_table {
margin: 20px 48px;
background: #fff;
padding: 16px 24px;
box-sizing: border-box;
.table-info {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 12px;
.table-info-left {
.table-title {
font-style: normal;
font-weight: 500;
font-size: 18px;
line-height: 24px;
color: #383838;
margin-right: 20px;
}
.table-total {
font-size: 16px;
color: #777777;
}
.el-button {
width: 90px;
// height: 32px;
padding: 10px 0;
box-sizing: border-box;
}
}
}
}
.pagination {
margin-top: 20px;
display: flex;
justify-content: center;
height: 48px;
line-height: 48px;
}
.status-success {
background: #30be1a;
width: 12px;
height: 12px;
border-radius: 6px;
margin: 0 auto;
}
.status-error {
// background: #E83334;
// width: 12px;
// height: 12px;
// border-radius: 6px;
// margin: 0 auto;
&::after {
content: "\2714";
color: #e83334;
}
}
.unqualified {
&::after {
// \2716 X 2714 y
content: "\2716";
color: #e83334;
}
}
.status-success-plus {
&::after {
content: "\2714";
color: #30be1a;
}
}
.status-not {
&::after {
content: "\2612";
color: gray;
}
}
</style>
\ No newline at end of file
<template>
<div class="container">
<div class="top1">
<div class="top1_left"
id="lazzEchart"
v-loading="lazzLoading"
element-loading-text="拼命加载中"
ref="lazzEchart"></div>
</div>
<!-- <div class="top1">
<div class="top1_left"
id="lazxEchart"
v-loading="lazxLoading"
element-loading-text="拼命加载中"
ref="lazxEchart"></div>
</div> -->
</div>
</template>
<script>
import { lazxData, lazzData } from "./echarts";
import {
getSswpslflTs,//
} from "@/api/statistical.js";
export default {
data () {
return {
form: { ssdwcode: '460000000000' },
lazzLoading: false,
lazxLoading: false,
}
},
created () {
this.value2 = this.$moment(new Date()).format("YYYY-MM-DD");
this.$store.commit("user/SET_LeftMenu", this.leftMenus);
// this.value2 = this.$moment(new Date()).format("YYYY-MM-DD");
},
mounted () {
this.$nextTick(() => {
this.getLazzEcharts();
});
},
methods: {
// 立案柱状图
async getLazzEcharts () {
this.lazzLoading = true;
let params = new FormData()
params.append('kssj', this.$route.query.kssj)
params.append('jssj', this.$route.query.jssj)
params.append('tjlb', this.$route.query.tjlb)
params.append('qryType', this.$route.query.qryType)
params.append('unitcode', this.$route.query.unitcode)
params.append('ajzt', this.$route.query.ajzt)
params.append('ajlbdm', this.$route.query.ajlbdm)
params.append('xlajlbdm', this.$route.query.xlajlbdm)
let res = await getSswpslflTs(params);
if (res && res.code == 200) {
let obj = {
x: ['非机动车', '弹药', '枪支', '卡类', '证件', '文物', '其他', '机动车', '移动通讯'],
y: [res.data.rows.ssfjdc, res.data.rows.ssjdc, res.data.rows.ssqz, res.data.rows.sskl, res.data.rows.sszj, res.data.rows.ssww, res.data.rows.ssqtwp, res.data.rows.ssjdc, res.data.rows.ssydtxsb]
};
let lazzEchart = this.$echarts.init(this.$refs.lazzEchart);
window.onresize = () => {
lazzEchart.resize();
};
let cjParams = lazzData(obj);
lazzEchart.setOption(cjParams);
this.lazzLoading = false;
// lazzEchart.off('click');
// lazzEchart.on('click', params => {
// this.$router.pushToTab({
// path: '/caseDetail',
// query: {
// larqQssj: params.dataIndex == 0 ? this.$moment(this.value1).subtract(1, 'year').format('YYYY-MM-DD') : this.value1,
// larqJssj: params.dataIndex == 0 ? this.$moment(this.value2).subtract(1, 'year').format('YYYY-MM-DD') : this.value2,
// jabz: params.seriesIndex != 0 ? params.seriesIndex : '',
// ajType: params.seriesIndex == 0 ? '' : '2',
// unitcode: this.form.ssdwcode,
// type: '',
// month: '',
// }
// })
// })
}
},
},
}
</script>
<style lang="scss" scoped>
.container {
overflow: auto;
width: 100%;
height: calc(100% - 56px);
padding: 8px 48px 48px;
box-sizing: border-box;
.query_data {
display: flex;
height: 56px;
align-items: center;
span {
font-size: 15px;
font-family: SourceHanSansCN-Regular;
font-weight: 400;
color: #4b4b4b;
display: block;
margin: 0 16px;
}
.data_wrap {
}
.query_btn {
width: 48px;
height: 35px;
background: #0087ff;
border-radius: 4px 4px 4px 4px;
opacity: 1;
font-size: 14px;
font-family: SourceHanSansCN-Regular;
font-weight: 400;
color: #ffffff;
text-align: center;
line-height: 35px;
margin-left: 15px;
cursor: pointer;
}
}
.top1 {
width: 100%;
background: #ffffff;
border-radius: 8px 8px 8px 8px;
padding: 18px;
box-sizing: border-box;
margin-bottom: 20px;
.top1_left {
height: 348px;
}
}
}
</style>
\ No newline at end of file
import echarts from 'echarts'
// 采集点注册量
export function lazzData (row) {
let option = {
title: {
text: `损失物品柱状图`,
subtext: ``,
show: true,
textStyle: {
fontFamily: '',
fontSize: 18,
fontWeight: '500',
fontStyle: 'normal',
color: '#242424',
verticalAlign: 'middle',
lineHeight: 24,
rich: {
las: {
color: '#4795FF',
fontSize: 18,
},
pas: {
color: '#fa8c16',
fontSize: 18,
},
a: {
verticalAlign: 'middle',
height: 24,
width: 24,
backgroundColor: {
//添加的图片
},
},
}
},
subtextStyle: { // 设置二级标题的样式
fontSize: 16,
color: "#242424"
}
},
tooltip: {
trigger: 'axis',
},
color: ['#41E4BB'],
legend: {
selectedMode: false,
textStyle: {
fontSize: 14,//字体大小
color: 'A2B3C3',//字体颜色
lineHeight: 25,
background: 'red',
},
data: [{
name: '数量',
icon: 'circle',
}],
right: '2%'
},
xAxis: [
{
type: 'category',
data: row.x,
axisPointer: {
type: 'shadow'
},
axisTick: { show: false, },
axisLabel: {//x轴文字的配置
show: true,
rotate: 0,
textStyle: {
color: "#242424",
}
},
axisLine: {//y轴线的颜色以及宽度
show: true,
lineStyle: {
color: "#E6F7FF",
width: 1,
type: "solid"
},
},
}
],
// row.y[0] || 5
// row.y[0] / 5 || 1
yAxis: [
{
type: 'value',
splitLine: { //网格线
lineStyle: {
type: 'dashed' //设置网格线类型 dotted:虚线 solid:实线
},
show: true //隐藏或显示
},
name: '',
// min: 0,
// max: 150000,
// splitNumber: 5,
// interval: 150000 / 5,
axisLabel: {
formatter: '{value} ',
textStyle: {
color: "#7697B7",
}
},
},
],
series: [
{
barWidth: 80,//柱子宽度
barGap: 0,//柱子间距
name: '数量',
type: 'bar',
label: {
position: 'top',
show: true
},
showBackground: true,
backgroundStyle: {
color: 'rgba(255,255,255,0.1000)'
},
itemStyle: {
normal: {
color: '#4795FF',
}
},
tooltip: {
valueFormatter: function (value) {
return value;
}
},
data: row.y
},
],
grid: {
x: 80,
y: 70,
x2: 5,
y2: 25,
borderWidth: 1,
},
};
return option
}
import echarts from 'echarts'
// 采集点注册量
export function shrnlData (row) {
let option = {
title: {
text: `受害人年龄柱状图`,
subtext: ``,
show: true,
textStyle: {
fontFamily: '',
fontSize: 18,
fontWeight: '500',
fontStyle: 'normal',
color: '#242424',
verticalAlign: 'middle',
lineHeight: 24,
rich: {
las: {
color: '#4795FF',
fontSize: 18,
},
pas: {
color: '#fa8c16',
fontSize: 18,
},
a: {
verticalAlign: 'middle',
height: 24,
width: 24,
backgroundColor: {
//添加的图片
},
},
}
},
subtextStyle: { // 设置二级标题的样式
fontSize: 16,
color: "#242424"
}
},
tooltip: {
trigger: 'axis',
},
color: ['#41E4BB'],
legend: {
selectedMode: false,
textStyle: {
fontSize: 14,//字体大小
color: 'A2B3C3',//字体颜色
lineHeight: 25,
background: 'red',
},
data: [{
name: '数量',
icon: 'circle',
}],
right: '2%'
},
xAxis: [
{
type: 'category',
data: row.x,
axisPointer: {
type: 'shadow'
},
axisTick: { show: false, },
axisLabel: {//x轴文字的配置
show: true,
rotate: 0,
textStyle: {
color: "#242424",
}
},
axisLine: {//y轴线的颜色以及宽度
show: true,
lineStyle: {
color: "#E6F7FF",
width: 1,
type: "solid"
},
},
}
],
// row.y[0] || 5
// row.y[0] / 5 || 1
yAxis: [
{
type: 'value',
splitLine: { //网格线
lineStyle: {
type: 'dashed' //设置网格线类型 dotted:虚线 solid:实线
},
show: true //隐藏或显示
},
name: '',
// min: 0,
// max: 150000,
// splitNumber: 5,
// interval: 150000 / 5,
axisLabel: {
formatter: '{value} ',
textStyle: {
color: "#7697B7",
}
},
},
],
series: [
{
barWidth: 80,//柱子宽度
barGap: 0,//柱子间距
name: '数量',
type: 'bar',
label: {
position: 'top',
show: true
},
showBackground: true,
backgroundStyle: {
color: 'rgba(255,255,255,0.1000)'
},
itemStyle: {
normal: {
color: '#4795FF',
}
},
tooltip: {
valueFormatter: function (value) {
return value;
}
},
data: row.y
},
],
grid: {
x: 80,
y: 70,
x2: 5,
y2: 25,
borderWidth: 1,
},
};
return option
}
// 户籍柱状图
export function shrhjData (row) {
let option = {
title: {
text: `受害人籍贯柱状图`,
subtext: ``,
show: true,
textStyle: {
fontFamily: '',
fontSize: 18,
fontWeight: '500',
fontStyle: 'normal',
color: '#242424',
verticalAlign: 'middle',
lineHeight: 24,
rich: {
las: {
color: '#4795FF',
fontSize: 18,
},
pas: {
color: '#fa8c16',
fontSize: 18,
},
a: {
verticalAlign: 'middle',
height: 24,
width: 24,
backgroundColor: {
//添加的图片
},
},
}
},
subtextStyle: { // 设置二级标题的样式
fontSize: 16,
color: "#242424"
}
},
tooltip: {
trigger: 'axis',
},
color: ['#41E4BB'],
legend: {
selectedMode: false,
textStyle: {
fontSize: 14,//字体大小
color: 'A2B3C3',//字体颜色
lineHeight: 25,
background: 'red',
},
data: [{
name: '数量',
icon: 'circle',
}],
right: '2%'
},
xAxis: [
{
type: 'category',
data: row.x,
axisPointer: {
type: 'shadow'
},
axisTick: { show: false, },
axisLabel: {//x轴文字的配置
show: true,
rotate: 0,
textStyle: {
color: "#242424",
}
},
axisLine: {//y轴线的颜色以及宽度
show: true,
lineStyle: {
color: "#E6F7FF",
width: 1,
type: "solid"
},
},
}
],
// row.y[0] || 5
// row.y[0] / 5 || 1
yAxis: [
{
type: 'value',
splitLine: { //网格线
lineStyle: {
type: 'dashed' //设置网格线类型 dotted:虚线 solid:实线
},
show: true //隐藏或显示
},
name: '',
// min: 0,
// max: 150000,
// splitNumber: 5,
// interval: 150000 / 5,
axisLabel: {
formatter: '{value} ',
textStyle: {
color: "#7697B7",
}
},
},
],
series: [
{
barWidth: 80,//柱子宽度
barGap: 0,//柱子间距
name: '数量',
type: 'bar',
label: {
position: 'top',
show: true
},
showBackground: true,
backgroundStyle: {
color: 'rgba(255,255,255,0.1000)'
},
itemStyle: {
normal: {
color: '#4795FF',
}
},
tooltip: {
valueFormatter: function (value) {
return value;
}
},
data: row.y
},
],
grid: {
x: 80,
y: 70,
x2: 5,
y2: 25,
borderWidth: 1,
},
};
return option
}
import echarts from 'echarts'
// 采集点注册量
export function lazzData (row) {
let option = {
title: {
text: `嫌疑人年龄柱状图`,
subtext: ``,
show: true,
textStyle: {
fontFamily: '',
fontSize: 18,
fontWeight: '500',
fontStyle: 'normal',
color: '#242424',
verticalAlign: 'middle',
lineHeight: 24,
rich: {
las: {
color: '#4795FF',
fontSize: 18,
},
pas: {
color: '#fa8c16',
fontSize: 18,
},
a: {
verticalAlign: 'middle',
height: 24,
width: 24,
backgroundColor: {
//添加的图片
},
},
}
},
subtextStyle: { // 设置二级标题的样式
fontSize: 16,
color: "#242424"
}
},
tooltip: {
trigger: 'axis',
},
color: ['#41E4BB'],
legend: {
selectedMode: false,
textStyle: {
fontSize: 14,//字体大小
color: 'A2B3C3',//字体颜色
lineHeight: 25,
background: 'red',
},
data: [{
name: '数量',
icon: 'circle',
}],
right: '2%'
},
xAxis: [
{
type: 'category',
data: row.x,
axisPointer: {
type: 'shadow'
},
axisTick: { show: false, },
axisLabel: {//x轴文字的配置
show: true,
rotate: 0,
textStyle: {
color: "#242424",
}
},
axisLine: {//y轴线的颜色以及宽度
show: true,
lineStyle: {
color: "#E6F7FF",
width: 1,
type: "solid"
},
},
}
],
// row.y[0] || 5
// row.y[0] / 5 || 1
yAxis: [
{
type: 'value',
splitLine: { //网格线
lineStyle: {
type: 'dashed' //设置网格线类型 dotted:虚线 solid:实线
},
show: true //隐藏或显示
},
name: '',
// min: 0,
// max: 150000,
// splitNumber: 5,
// interval: 150000 / 5,
axisLabel: {
formatter: '{value} ',
textStyle: {
color: "#7697B7",
}
},
},
],
series: [
{
barWidth: 80,//柱子宽度
barGap: 0,//柱子间距
name: '数量',
type: 'bar',
label: {
position: 'top',
show: true
},
showBackground: true,
backgroundStyle: {
color: 'rgba(255,255,255,0.1000)'
},
itemStyle: {
normal: {
color: '#4795FF',
}
},
tooltip: {
valueFormatter: function (value) {
return value;
}
},
data: row.y
},
],
grid: {
x: 80,
y: 70,
x2: 5,
y2: 25,
borderWidth: 1,
},
};
return option
}
// 户籍柱状图
export function lazxData (row) {
let option = {
title: {
text: `嫌疑人籍贯柱状图`,
subtext: ``,
show: true,
textStyle: {
fontFamily: '',
fontSize: 18,
fontWeight: '500',
fontStyle: 'normal',
color: '#242424',
verticalAlign: 'middle',
lineHeight: 24,
rich: {
las: {
color: '#4795FF',
fontSize: 18,
},
pas: {
color: '#fa8c16',
fontSize: 18,
},
a: {
verticalAlign: 'middle',
height: 24,
width: 24,
backgroundColor: {
//添加的图片
},
},
}
},
subtextStyle: { // 设置二级标题的样式
fontSize: 16,
color: "#242424"
}
},
tooltip: {
trigger: 'axis',
},
color: ['#41E4BB'],
legend: {
selectedMode: false,
textStyle: {
fontSize: 14,//字体大小
color: 'A2B3C3',//字体颜色
lineHeight: 25,
background: 'red',
},
data: [{
name: '数量',
icon: 'circle',
}],
right: '2%'
},
xAxis: [
{
type: 'category',
data: row.x,
axisPointer: {
type: 'shadow'
},
axisTick: { show: false, },
axisLabel: {//x轴文字的配置
show: true,
rotate: 0,
textStyle: {
color: "#242424",
}
},
axisLine: {//y轴线的颜色以及宽度
show: true,
lineStyle: {
color: "#E6F7FF",
width: 1,
type: "solid"
},
},
}
],
// row.y[0] || 5
// row.y[0] / 5 || 1
yAxis: [
{
type: 'value',
splitLine: { //网格线
lineStyle: {
type: 'dashed' //设置网格线类型 dotted:虚线 solid:实线
},
show: true //隐藏或显示
},
name: '',
// min: 0,
// max: 150000,
// splitNumber: 5,
// interval: 150000 / 5,
axisLabel: {
formatter: '{value} ',
textStyle: {
color: "#7697B7",
}
},
},
],
series: [
{
barWidth: 80,//柱子宽度
barGap: 0,//柱子间距
name: '数量',
type: 'bar',
label: {
position: 'top',
show: true
},
showBackground: true,
backgroundStyle: {
color: 'rgba(255,255,255,0.1000)'
},
itemStyle: {
normal: {
color: '#4795FF',
}
},
tooltip: {
valueFormatter: function (value) {
return value;
}
},
data: row.y
},
],
grid: {
x: 80,
y: 70,
x2: 5,
y2: 25,
borderWidth: 1,
},
};
return option
}
<template>
<div class="container">
<div class="top1">
<div class="top1_left"
id="lazzEchart"
v-loading="lazzLoading"
element-loading-text="拼命加载中"
ref="lazzEchart"></div>
</div>
<div class="top1">
<div class="top1_left"
id="lazxEchart"
v-loading="lazxLoading"
element-loading-text="拼命加载中"
ref="lazxEchart"></div>
</div>
</div>
</template>
<script>
import { lazzData, lazxData } from "./echarts/xyrEcharts";
import { shrnlData, shrhjData } from "./echarts/shrEcharts";
import {
getXyrhjTj,//嫌疑人户籍柱状图
getXyrNlTj,//嫌疑人年龄柱状图
getShrhjTj,//受害人人户籍柱状图
getShrNlTj,//受害人人年龄柱状图
} from "@/api/statistical.js";
export default {
data () {
return {
form: { ssdwcode: '460000000000' },
lazzLoading: false,
lazxLoading: false,
}
},
created () {
this.value2 = this.$moment(new Date()).format("YYYY-MM-DD");
this.$store.commit("user/SET_LeftMenu", this.leftMenus);
// this.value2 = this.$moment(new Date()).format("YYYY-MM-DD");
},
mounted () {
this.$nextTick(() => {
this.getLazzEcharts();
this.getHjEcharts();
});
},
methods: {
// 年龄柱状图
async getLazzEcharts () {
this.lazzLoading = true;
let params = new FormData()
params.append('kssj', this.$route.query.kssj)
params.append('jssj', this.$route.query.jssj)
params.append('tjlb', this.$route.query.tjlb)
params.append('qryType', this.$route.query.qryType)
params.append('unitcode', this.$route.query.unitcode)
params.append('ajzt', this.$route.query.ajzt)
params.append('ajlbdm', this.$route.query.ajlbdm)
params.append('xlajlbdm', this.$route.query.xlajlbdm)
let res
if (this.$route.query.tjlb == 'cjxyrsl') {
res = await getXyrNlTj(params);
} else if (this.$route.query.tjlb == 'cjshrsl') {
res = await getShrNlTj(params);
}
if (res && res.code == 200) {
let obj = {
x: ['80前', '80后', '90后', '00后', '其他'],
y: [res.data.rows.nl70, res.data.rows.nl80, res.data.rows.nl90, res.data.rows.nl00, res.data.rows.nl10]
};
let lazzEchart = this.$echarts.init(this.$refs.lazzEchart);
window.onresize = () => {
lazzEchart.resize();
};
let cjParams = this.$route.query.tjlb == 'cjxyrsl' ? lazzData(obj) : shrnlData(obj);
lazzEchart.setOption(cjParams);
this.lazzLoading = false;
lazzEchart.off('click');
lazzEchart.on('click', params => {
let nlType
if (params.name == '80前') {
nlType = 'nl70'
} else if (params.name == '80后') {
nlType = 'nl80'
} else if (params.name == '90后') {
nlType = 'nl90'
} else if (params.name == '00后') {
nlType = 'nl00'
} else {
nlType = 'nl10'
}
// console.log(params);
this.$router.pushToTab({
path: this.$route.query.tjlb == 'cjxyrsl' ? '/xyrDetail' : '/shrDetail',
query: {
tjlb: nlType,
xzqhdm: '',
qryType: this.$route.query.qryType,
unitcode: this.$route.query.unitcode,
ajzt: this.$route.query.ajzt,
ajlbdm: this.$route.query.ajlbdm,
xlajlbdm: this.$route.query.xlajlbdm,
kssj: this.$route.query.kssj,
jssj: this.$route.query.jssj,
}
})
})
}
},
// 户籍柱状图
async getHjEcharts () {
this.lazxLoading = true;
let params = new FormData()
params.append('kssj', this.$route.query.kssj)
params.append('jssj', this.$route.query.jssj)
params.append('tjlb', this.$route.query.tjlb)
params.append('qryType', this.$route.query.qryType)
params.append('unitcode', this.$route.query.unitcode)
params.append('ajzt', this.$route.query.ajzt)
params.append('ajlbdm', this.$route.query.ajlbdm)
params.append('xlajlbdm', this.$route.query.xlajlbdm)
let res
if (this.$route.query.tjlb == 'cjxyrsl') {
res = await getXyrhjTj(params);
} else if (this.$route.query.tjlb == 'cjshrsl') {
res = await getShrhjTj(params);
}
if (res && res.code == 200) {
let obj = {
x: [],
y: []
};
res.data.rows.forEach((item, index) => {
obj.x.push(item.name);
obj.y.push(item.num);
});
let lazxEchart = this.$echarts.init(this.$refs.lazxEchart);
window.onresize = () => {
lazxEchart.resize();
};
let cjParams = this.$route.query.tjlb == 'cjxyrsl' ? lazxData(obj) : shrhjData(obj);
lazxEchart.setOption(cjParams);
this.lazxLoading = false;
lazxEchart.off('click');
lazxEchart.on('click', params => {
let hjCode = res.data.rows.filter((item) => {
return item.name == params.name
})
this.$router.pushToTab({
path: this.$route.query.tjlb == 'cjxyrsl' ? '/xyrDetail' : '/shrDetail',
query: {
tjlb: '',
xzqhdm: hjCode[0].code || '',
qryType: this.$route.query.qryType,
unitcode: this.$route.query.unitcode,
ajzt: this.$route.query.ajzt,
ajlbdm: this.$route.query.ajlbdm,
xlajlbdm: this.$route.query.xlajlbdm,
kssj: this.$route.query.kssj,
jssj: this.$route.query.jssj,
}
})
})
}
},
},
}
</script>
<style lang="scss" scoped>
.container {
overflow: auto;
width: 100%;
height: calc(100% - 56px);
padding: 8px 48px 48px;
box-sizing: border-box;
.query_data {
display: flex;
height: 56px;
align-items: center;
span {
font-size: 15px;
font-family: SourceHanSansCN-Regular;
font-weight: 400;
color: #4b4b4b;
display: block;
margin: 0 16px;
}
.data_wrap {
}
.query_btn {
width: 48px;
height: 35px;
background: #0087ff;
border-radius: 4px 4px 4px 4px;
opacity: 1;
font-size: 14px;
font-family: SourceHanSansCN-Regular;
font-weight: 400;
color: #ffffff;
text-align: center;
line-height: 35px;
margin-left: 15px;
cursor: pointer;
}
}
.top1 {
width: 100%;
background: #ffffff;
border-radius: 8px 8px 8px 8px;
padding: 18px;
box-sizing: border-box;
margin-bottom: 20px;
.top1_left {
height: 348px;
}
}
}
</style>
\ No newline at end of file
<template>
<div>
<!-- 表格 -->
<div class="content_table">
<div class="table-info">
<div class="table-info-left">
<span class="table-title">信息列表</span>
<span class="table-total">{{pageObj.total||0}}条信息</span>
</div>
<div class="table-info-left">
<el-button type="primary"
@click="exportResult"
:loading="exportLoad"
size="small">导出
</el-button>
</div>
</div>
<div class="table_contanier">
<Mytable :tableData="tableData"
:columObj="columObj"
:pageObj="pageObj"
@handleSizeChange="handleSizeChange"
@handleCurrentChange="handleCurrentChange"></Mytable>
</div>
</div>
</div>
</template>
<script>
import {
getShrHjorNlTjTs,//
} from '@/api/statistical.js'
import Mytable from '@/components/Mytable.vue'
import axios from "axios";
import base from "@/api/base";
export default {
components: {
Mytable
},
data () {
return {
exportLoad: false,
pageObj: { //分页对象
total: null,
pageData: {
page: 1,
size: 10
}
},
tableData: [],
columObj: {
visble: false,
loading: false,
columnData: [{
text: true,
prop: "asjbh",
editRow: undefined,
label: "案事件编号",
width: "",
align: "center",
}, {
text: true,
prop: "bhrXm",
editRow: undefined,
label: "被害人姓名",
width: "",
align: "center",
}, {
text: true,
prop: "bhrCyzjZjhm",
editRow: undefined,
label: "证件号码",
width: "",
align: "center",
}, {
text: true,
prop: "bhrXbdm",
editRow: undefined,
label: "性别",
width: "",
align: "center",
}, {
text: true,
prop: "bhrHjdzXzqhdm",
editRow: undefined,
label: "户籍地",
width: "",
align: "center",
}, {
text: true,
prop: "bhrXzzXzqhdm",
editRow: undefined,
label: "现住址",
width: "",
align: "center",
showToolTip: true,
}
]
},
}
},
mounted () {
this.getDetail()
},
methods: {
// 详情列表
async getDetail () {
this.columObj.loading = true
let params = new FormData()
params.append('kssj', this.$route.query.kssj)
params.append('jssj', this.$route.query.jssj)
params.append('tjlb', this.$route.query.tjlb)
params.append('xzqhdm', this.$route.query.xzqhdm)
params.append('qryType', this.$route.query.qryType)
params.append('unitcode', this.$route.query.unitcode)
params.append('ajzt', this.$route.query.ajzt)
params.append('ajlbdm', this.$route.query.ajlbdm)
params.append('xlajlbdm', this.$route.query.xlajlbdm)
params.append('page', this.pageObj.pageData.page)
params.append('limit', this.pageObj.pageData.size)
let res = await getShrHjorNlTjTs(params)
if (res) {
this.columObj.loading = false
this.tableData = res.data.rows
this.pageObj.total = res.data.total
} else {
this.columObj.loading = false
}
},
//页码变化
handleCurrentChange (e) {
this.pageObj.pageData.page = e;
this.getDetail()
},
//条数变化
handleSizeChange (e) {
this.pageObj.pageData.size = e;
this.pageObj.pageData.page = 1;
this.getDetail()
},
exportResult () {
this.exportLoad = true
let params = new FormData();
params.append('kssj', this.$route.query.kssj)
params.append('jssj', this.$route.query.jssj)
params.append('tjlb', this.$route.query.tjlb)
params.append('xzqhdm', this.$route.query.xzqhdm)
params.append('qryType', this.$route.query.qryType)
params.append('unitcode', this.$route.query.unitcode)
params.append('ajzt', this.$route.query.ajzt)
params.append('ajlbdm', this.$route.query.ajlbdm)
params.append('xlajlbdm', this.$route.query.xlajlbdm)
params.append('page', this.pageObj.pageData.page)
params.append('limit', this.pageObj.pageData.size)
let url = `${base.alyIP}/dwtj/exportShrHjorNlTjTs`;
axios
.post(url, params, {
responseType: "arraybuffer",
})
.then((res) => {
let blob = new Blob([res.data], { type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet", });
// 组装a标签
let elink = document.createElement("a");
// 设置下载文件名
elink.download = '列表详情';
elink.style.display = "none";
elink.href = URL.createObjectURL(blob);
document.body.appendChild(elink);
elink.click();
document.body.removeChild(elink);
this.exportLoad = false
}).catch(err => { this.exportLoad = false });
},
},
}
</script>
<style lang="scss" scoped>
.content_table {
margin: 20px 48px;
background: #fff;
padding: 16px 24px;
box-sizing: border-box;
.table-info {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 12px;
.table-info-left {
.table-title {
font-style: normal;
font-weight: 500;
font-size: 18px;
line-height: 24px;
color: #383838;
margin-right: 20px;
}
.table-total {
font-size: 16px;
color: #777777;
}
.el-button {
width: 90px;
// height: 32px;
padding: 10px 0;
box-sizing: border-box;
}
}
}
}
.pagination {
margin-top: 20px;
display: flex;
justify-content: center;
height: 48px;
line-height: 48px;
}
.status-success {
background: #30be1a;
width: 12px;
height: 12px;
border-radius: 6px;
margin: 0 auto;
}
.status-error {
// background: #E83334;
// width: 12px;
// height: 12px;
// border-radius: 6px;
// margin: 0 auto;
&::after {
content: "\2714";
color: #e83334;
}
}
.unqualified {
&::after {
// \2716 X 2714 y
content: "\2716";
color: #e83334;
}
}
.status-success-plus {
&::after {
content: "\2714";
color: #30be1a;
}
}
.status-not {
&::after {
content: "\2612";
color: gray;
}
}
</style>
\ No newline at end of file
<template>
<div>
<!-- 表格 -->
<div class="content_table">
<div class="table-info">
<div class="table-info-left">
<span class="table-title">信息列表</span>
<span class="table-total">{{pageObj.total||0}}条信息</span>
</div>
<div class="table-info-left">
<el-button type="primary"
@click="exportResult"
:loading="exportLoad"
size="small">导出
</el-button>
</div>
</div>
<div class="table_contanier">
<Mytable :tableData="tableData"
:columObj="columObj"
:pageObj="pageObj"
@handleSizeChange="handleSizeChange"
@handleCurrentChange="handleCurrentChange"></Mytable>
</div>
</div>
</div>
</template>
<script>
import {
getXyrHjorNlTjTs,//
} from '@/api/statistical.js'
import Mytable from '@/components/Mytable.vue'
import axios from "axios";
import base from "@/api/base";
export default {
components: {
Mytable
},
data () {
return {
exportLoad: false,
pageObj: { //分页对象
total: null,
pageData: {
page: 1,
size: 10
}
},
tableData: [],
columObj: {
visble: false,
loading: false,
columnData: [{
text: true,
prop: "asjbh",
editRow: undefined,
label: "案事件编号",
width: "",
align: "center",
}, {
text: true,
prop: "zhfzxyrXm",
editRow: undefined,
label: "姓名",
width: "",
align: "center",
}, {
text: true,
prop: "zhfzxyrXbdm",
editRow: undefined,
label: "性别",
width: "",
align: "center",
}, {
text: true,
prop: "zhfzxyrCyzjZjhm",
editRow: undefined,
label: "证件号码",
width: "",
align: "center",
}, {
text: true,
prop: "hjdzXzqhdm",
editRow: undefined,
label: "户籍地",
width: "",
align: "center",
showToolTip: true,
}, {
text: true,
prop: "xzdDzmc",
editRow: undefined,
label: "现住址",
width: "",
align: "center",
showToolTip: true,
}, {
text: true,
prop: "zhfzxyrFzxyrdaztdm",
editRow: undefined,
label: "到案状态",
width: "",
align: "center",
}, {
text: true,
prop: "zhrqstr",
editRow: undefined,
label: "抓获日期",
width: "",
align: "center",
showToolTip: true,
}
]
},
}
},
mounted () {
this.getDetail()
},
methods: {
// 详情列表
async getDetail () {
this.columObj.loading = true
let params = new FormData()
params.append('kssj', this.$route.query.kssj)
params.append('jssj', this.$route.query.jssj)
params.append('tjlb', this.$route.query.tjlb)
params.append('xzqhdm', this.$route.query.xzqhdm)
params.append('qryType', this.$route.query.qryType)
params.append('unitcode', this.$route.query.unitcode)
params.append('ajzt', this.$route.query.ajzt)
params.append('ajlbdm', this.$route.query.ajlbdm)
params.append('xlajlbdm', this.$route.query.xlajlbdm)
params.append('page', this.pageObj.pageData.page)
params.append('limit', this.pageObj.pageData.size)
let res = await getXyrHjorNlTjTs(params)
if (res) {
this.columObj.loading = false
this.tableData = res.data.rows
this.pageObj.total = res.data.total
} else {
this.columObj.loading = false
}
},
//页码变化
handleCurrentChange (e) {
this.pageObj.pageData.page = e;
this.getDetail()
},
//条数变化
handleSizeChange (e) {
this.pageObj.pageData.size = e;
this.pageObj.pageData.page = 1;
this.getDetail()
},
exportResult () {
this.exportLoad = true
let params = new FormData();
params.append('kssj', this.$route.query.kssj)
params.append('jssj', this.$route.query.jssj)
params.append('tjlb', this.$route.query.tjlb)
params.append('xzqhdm', this.$route.query.xzqhdm)
params.append('qryType', this.$route.query.qryType)
params.append('unitcode', this.$route.query.unitcode)
params.append('ajzt', this.$route.query.ajzt)
params.append('ajlbdm', this.$route.query.ajlbdm)
params.append('xlajlbdm', this.$route.query.xlajlbdm)
params.append('page', this.pageObj.pageData.page)
params.append('limit', this.pageObj.pageData.size)
let url = `${base.alyIP}/dwtj/exportXyrHjorNlTjTs`;
axios
.post(url, params, {
responseType: "arraybuffer",
})
.then((res) => {
let blob = new Blob([res.data], { type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet", });
// 组装a标签
let elink = document.createElement("a");
// 设置下载文件名
elink.download = '列表详情';
elink.style.display = "none";
elink.href = URL.createObjectURL(blob);
document.body.appendChild(elink);
elink.click();
document.body.removeChild(elink);
this.exportLoad = false
}).catch(err => { this.exportLoad = false });
},
},
}
</script>
<style lang="scss" scoped>
.content_table {
margin: 20px 48px;
background: #fff;
padding: 16px 24px;
box-sizing: border-box;
.table-info {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 12px;
.table-info-left {
.table-title {
font-style: normal;
font-weight: 500;
font-size: 18px;
line-height: 24px;
color: #383838;
margin-right: 20px;
}
.table-total {
font-size: 16px;
color: #777777;
}
.el-button {
width: 90px;
// height: 32px;
padding: 10px 0;
box-sizing: border-box;
}
}
}
}
.pagination {
margin-top: 20px;
display: flex;
justify-content: center;
height: 48px;
line-height: 48px;
}
.status-success {
background: #30be1a;
width: 12px;
height: 12px;
border-radius: 6px;
margin: 0 auto;
}
.status-error {
// background: #E83334;
// width: 12px;
// height: 12px;
// border-radius: 6px;
// margin: 0 auto;
&::after {
content: "\2714";
color: #e83334;
}
}
.unqualified {
&::after {
// \2716 X 2714 y
content: "\2716";
color: #e83334;
}
}
.status-success-plus {
&::after {
content: "\2714";
color: #30be1a;
}
}
.status-not {
&::after {
content: "\2612";
color: gray;
}
}
</style>
\ No newline at end of file
<template>
<div class="content_box">
<div class="box_header">办案协作</div>
<div class="box_form">
<el-form ref="form"
:model="form"
label-width="150px">
<div class="form_line1">
<el-form-item>
<el-input v-model.trim="form.ip"
placeholder="请输入"
size="small"></el-input>
</el-form-item>
</div>
<div class="form_line2">
</div>
<div class="form_lineInner"
v-if="form.checkList.length>0">
<div class="form_line3"
:style="item.visible?'width:25%':''"
v-for="(item ) in formConfig"
:key="item.label1">
<template v-if="item.visible">
<el-form-item :label="item.label1">
<el-select v-model="form[item.prop1]"
style="width:100%"
size="small"
placeholder="请选择">
<el-option v-for="(item,index) in item.option"
:key="index"
:label="item.cjsbname"
:value="item.cjsblx"></el-option>
</el-select>
</el-form-item>
</template>
</div>
</div>
<div class="searchBtn">
<el-button type="primary"
icon="el-icon-search"
@click="clickSearch"
size="small">查询</el-button>
<el-button size="small"
@click="searchReset">重置</el-button>
</div>
</el-form>
</div>
<div class="box_table">
<div class="tableBtn">
<!-- @click="addDevice" -->
<el-button size="small"
@click="addBaxz"
icon="el-icon-plus">发起协作</el-button>
<!-- <el-button size="small"
@click="editDevice"
icon="el-icon-edit-outline">修改设备</el-button>
<el-button size="small"
@click="deleteDevice"
icon="el-icon-delete">删除设备</el-button> -->
</div>
<div class="table_contanier">
<Mytable v-loading="downLoading"
element-loading-text="下载中..."
:tableData="tableData"
:columObj="columObj"
:pageObj="pageObj"
@handleSizeChange="handleSizeChange"
@handleCurrentChange="handleCurrentChange"
@rowOperation="rowOperation"></Mytable>
</div>
</div>
</div>
</template>
<script>
import Mytable from '@/components/Mytable.vue'
import {
selectAll,//线索组查询
} from "@/api/statistical.js"
import SelectTreeDialog from "@c/treeCode_components.vue";
import { mapGetters } from "vuex"
export default {
components: {
SelectTreeDialog, Mytable
},
data () {
return {
leftMenus: [
//左侧导航(模块第一个页面需要)
{
id: "queryBaxz",
label: "办案管理",
newAuth: ["F01"],
index: "/queryBaxz",
className: "iconfont icon-ziyuanliebiao1",
hasChildren: true,
children: [
{
id: "queryBaxz",
label: "办案协作",
newAuth: ["F02"],
index: "/queryBaxz",
className: "iconfont icon-shenpi",
hasChildren: false,
},
]
},
],
value1: true,//启用
value2: false,//禁用
form: {
ip: '',
mac: '',
spzt: '',
sbztstr: '',
ssdwcode: '',
zwcjycode: '',
sftzzzcjycode: '',
sjcjycode: '',
zjcjycode: '',
hmcjycode: '',
swcjycode: '',
checkList: [],
},
page: {
page: 1,
limit: 10,
},
total: null,
collectionConfig: [{ labe: "指纹", value: "1" }, { labe: "身高体重", value: "3" }, { labe: "手机", value: "4" }, { labe: "足迹", value: "5" }, { labe: "声纹", value: "6" }, { labe: "虹膜", value: "7" }],
pageObj: { //分页对象
total: 10,
pageData: {
page: 1,
size: 10
}
},
downLoading: false,
tableData: [],
columObj: {
visble: false,
loading: false,
columnData: [
{
edit: true,
prop: "dzbh",
editRow: undefined,
label: "协作名称",
width: "",
align: "center",
}, {
text: true,
prop: "dzywText",
editRow: undefined,
label: "案件编号",
width: "",
align: "center",
}, {
edit: true,
prop: "asjbh",
editRow: undefined,
label: "提交单位",
width: "",
align: "center",
}, {
text: true,
prop: "ajmc",
editRow: undefined,
label: "提交时间",
width: "",
align: "center",
}, {
text: true,
prop: "ajlbmc",
editRow: undefined,
label: "状态",
width: "",
align: "center",
},
{
isOperation: true,
type: 'basic',
label: "操作",
width: "180",
align: "center",
fixed: "right",
sortable: false,
operation: [
{
operation: "edit",
type: "text",
label: "查看详情",
icon: "",
option: 'tiQingShenPi',
color: '#1a81e1',
}]
}]
},
}
},
created () {
this.$store.commit("user/SET_LeftMenu", this.leftMenus);
this.$store.commit("user/SET_Header", '办案协作');
},
computed: {
...mapGetters(["userInfo"])
},
mounted () {
document.getElementsByClassName("el-pagination__jump")[0].childNodes[0].nodeValue = "跳至";
this.getSysClientVp()
},
methods: {
// 查询
clickSearch () {
this.getSysClientVp()
},
//重置
searchReset () {
this.form = {
ip: '',
mac: '',
spzt: '',
sbztstr: '',
}
this.getSysClientVp()
},
//页码变化
handleCurrentChange (e) {
this.pageObj.pageData.page = e;
this.getSysClientVp()
},
//条数变化
handleSizeChange (e) {
this.pageObj.pageData.size = e;
this.pageObj.pageData.page = 1;
this.getSysClientVp()
},
rowOperation (row, index, item) { },
//列表
async getSysClientVp () {
try {
this.loadings = true;
let params = { ...this.form, ...this.page }
let res = await selectAll(params)
if (res && res.code == 200) {
this.tableData = res.data.rows
this.total = res.data.total
this.loadings = false;
} else {
this.loadings = false;
}
} catch (error) {
this.loadings = false;
// this.$message.error('服务器异常')
}
},
//新增设备
addBaxz () {
this.$router.pushToTab({ path: '/addBaxz' })
},
},
}
</script>
<style lang="scss" scoped>
.content_box {
height: 100%;
overflow-y: auto;
background: #f1f2f5;
padding: 19px 20px;
box-sizing: border-box;
.box_header {
font-size: 14px;
font-weight: 500;
color: #383838;
line-height: 18px;
margin-bottom: 19px;
}
.box_form {
padding: 24px 24px 20px;
background: #ffffff;
margin-bottom: 1px;
.el-form {
/deep/.el-form-item {
display: inline-block;
.el-form-item__label {
height: 32px;
line-height: 32px;
font-size: 16px;
font-weight: 400;
color: #4b4b4b;
}
.el-form-item__content {
height: 32px;
line-height: 32px;
}
}
.form_line1 {
/deep/.el-form-item {
display: inline-block;
width: 25%;
}
}
.form_line2 {
/deep/.el-form-item {
/* margin-bottom: 0; */
}
}
.form_lineInner {
}
.form_line3 {
display: inline-block;
.el-form-item {
width: 100%;
}
}
.searchBtn {
display: flex;
justify-content: center;
.el-button {
width: 98px;
}
}
}
}
.box_table {
background: #ffffff;
padding: 16px 20px 28px;
.tableBtn {
margin-bottom: 16px;
}
.pagination {
margin-top: 20px;
display: flex;
justify-content: space-between;
height: 48px;
line-height: 48px;
/* text-align: center; */
}
}
}
</style>
\ No newline at end of file
<template>
<div>
<!-- 表格 -->
<div class="content_table">
<div class="table-info">
<div class="table-info-left">
<span class="table-title">信息列表</span>
</div>
<div class="table-info-left">
</div>
</div>
<div class="table_contanier">
<Mytable :tableData="tableData"
:columObj="columObj"
id="vcfResult"
:pageObj="pageObj"
@rowBtn="rowBtn"
@handleSizeChange="handleSizeChange"
@handleCurrentChange="handleCurrentChange"
@rowOperation="rowOperation"></Mytable>
</div>
</div>
</div>
</template>
<script>
import {
getBkzpList,
deleteBkzp
} from '@/api/statistical.js'
import Mytable from '@/components/Mytable.vue'
import axios from "axios";
import base from "@/api/base";
export default {
components: {
Mytable
},
data () {
return {
exportLoad: false,
pageObj: { //分页对象
total: null,
pageData: {
page: 1,
size: 10
}
},
tableData: [],
columObj: {
visble: false,
loading: false,
columnData: [{
spwj: true,
prop: "imgFace",
editRow: undefined,
label: "照片",
width: "228",
align: "center",
}, {
text: true,
prop: "name",
editRow: undefined,
label: "姓名",
width: "228",
align: "center",
},
{
text: true,
prop: "certNo",
editRow: undefined,
label: "证件号码",
width: "",
align: "center",
},
{
isOperation: true,
type: 'basic',
label: "操作",
width: "180",
align: "center",
fixed: "right",
sortable: false,
operation: [
{
operation: "edit",
type: "text",
label: "删除",
icon: "",
option: 'shanChu',
color: '#1a81e1',
}]
}
]
},
}
},
created () {
},
mounted () {
this.getDetail()
},
methods: {
rowOperation (row, index, item) {
this.$confirm(`确定要删除${row.name}吗?`, '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(async () => {
let params = new FormData()
params.append('certNo', row.certNo)
let res = await deleteBkzp(params)
if (res && res.code == 200) {
this.$message({
type: 'success',
message: '删除成功!'
});
this.getDetail();
} else {
this.$message.error(res.message);
}
})
},
rowBtn (row, index) {
if (index == 'faceCertNo') {
this.$router.pushToTab({
path: 'rxyjDetail',
query: {
faceCertNo: row.faceCertNo,
}
})
}
},
// 详情列表
async getDetail (code) {
this.columObj.loading = true
let params = new FormData()
params.append('page', this.pageObj.pageData.page)
params.append('limit', this.pageObj.pageData.size)
let res = await getBkzpList(params)
if (res) {
this.columObj.loading = false
this.tableData = res.data.rows
this.pageObj.total = res.data.total
} else {
this.columObj.loading = false
}
},
//页码变化
handleCurrentChange (e) {
this.pageObj.pageData.page = e;
this.getDetail()
},
//条数变化
handleSizeChange (e) {
this.pageObj.pageData.size = e;
this.pageObj.pageData.page = 1;
this.getDetail()
},
exportResult () {
this.htmlToExcels.exportExcel("列表详情.xlsx", "#vcfResult");
},
},
}
</script>
<style lang="scss" scoped>
.content_table {
margin: 20px 48px;
background: #fff;
padding: 16px 24px;
box-sizing: border-box;
.table-info {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 12px;
.table-info-left {
.table-title {
font-style: normal;
font-weight: 500;
font-size: 18px;
line-height: 24px;
color: #383838;
margin-right: 20px;
}
.table-total {
font-size: 16px;
color: #777777;
}
.el-button {
width: 90px;
// height: 32px;
padding: 10px 0;
box-sizing: border-box;
}
}
}
}
.pagination {
margin-top: 20px;
display: flex;
justify-content: center;
height: 48px;
line-height: 48px;
}
.status-success {
background: #30be1a;
width: 12px;
height: 12px;
border-radius: 6px;
margin: 0 auto;
}
.status-error {
// background: #E83334;
// width: 12px;
// height: 12px;
// border-radius: 6px;
// margin: 0 auto;
&::after {
content: "\2714";
color: #e83334;
}
}
.unqualified {
&::after {
// \2716 X 2714 y
content: "\2716";
color: #e83334;
}
}
.status-success-plus {
&::after {
content: "\2714";
color: #30be1a;
}
}
.status-not {
&::after {
content: "\2612";
color: gray;
}
}
</style>
\ No newline at end of file
<template>
<div id="home">
<div class="login-container">
<el-form :model="ruleForm2"
:rules="rules2"
status-icon
ref="ruleForm2"
label-position="left"
label-width="0px"
class="demo-ruleForm login-page">
<div></div>
<div class="el-input el-input-div"
style="position: relative; margin-top: 15px">
<el-form-item prop="account"
class="inputs">
<el-input type="text"
v-model="ruleForm2.account"
auto-complete="off"
placeholder="用户名"></el-input>
</el-form-item>
<span style="position: absolute; top: 8px; left: 12px; height: 100%"><img src="@/assets/img/login/user.png"
alt="" /></span>
</div>
<div class="el-input el-input-div"
style="position: relative">
<el-form-item prop="password"
class="inputs">
<el-input type="password"
v-model="ruleForm2.password"
auto-complete="off"
placeholder="用户密码"></el-input>
</el-form-item>
<span style="position: absolute; top: 8px; left: 12px; height: 100%"><img src="@/assets/img/login/pwd.png"
alt="" /></span>
</div>
<el-form-item style="width: 100%"
class="loginBtn">
<el-button style="
width: 100%;
height: 44px;
background: #2962ff;
color: #fff;
box-shadow: 0px 4px 4px rgba(3, 56, 145, 0.16);
"
:loading="logining"
@click="handleSubmit">登录</el-button>
</el-form-item>
</el-form>
</div>
</div>
</template>
<script>
import { mapGetters } from "vuex";
import { login } from "@/api/index";
export default {
data () {
return {
logining: false,
ruleForm2: {
account: "",
password: "",
},
rules2: {
account: [{ required: true, message: "请输入账号", trigger: "blur" }],
password: [{ required: true, message: "请输入密码", trigger: "blur" }],
},
checked: false,
};
},
methods: {
handleSubmit () {
let self = this;
self.$refs.ruleForm2.validate((valid) => {
if (valid) {
login({
account: this.ruleForm2.account,
password: this.ruleForm2.password,
}).then((res) => {
if (res.data.code == 200) {
sessionStorage.setItem("token", "bearer " + res.data.data.accessToken);
sessionStorage.setItem("userInfo", JSON.stringify(res.data.data));
const roles = res.data.data.permission.split(",");
this.$store.commit("user/SET_ROLES", roles);
this.$router.push("statistical");
} else {
this.$confirm("账号或密码错误!", {
confirmButtonText: "确定",
showCancelButton: false,
type: "warning",
});
}
});
} else {
return false;
}
});
},
},
computed: {
...mapGetters(["token"]),
},
created () {
var lett = this;
document.onkeydown = function (e) {
var key = window.event.keyCode;
if (key == 13) {
lett.handleSubmit();
}
};
},
};
</script>
<style scoped>
.login-container {
position: absolute;
/*top: 138px;*/
bottom: 50px;
right: -20%;
width: 100%;
height: 100%;
/* 登录框上下对齐 */
display: flex;
align-items: center;
}
.login-page {
position: relative;
-webkit-border-radius: 5px;
border-radius: 5px;
margin: 0px auto;
width: 350px;
padding: 20px 35px 35px 15px;
z-index: 100;
padding: 45px;
background-color: rgba(255, 255, 255, 0.3);
}
label.el-checkbox.rememberme {
margin: 0px 0px 15px;
text-align: left;
}
</style>
<style scoped>
@import "../assets/styles/login.scss";
</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