This commit is contained in:
13684185576
2025-09-22 15:38:33 +08:00
parent b1e9518952
commit 2f82dcfccf
2 changed files with 205 additions and 183 deletions

View File

@ -3,9 +3,9 @@
<!-- 左边 -->
<div class="leftbox">
<div class="title">
<span v-for="idx in 3" :key="idx" :class="'sircleL'+idx" class="sircle mr5"></span>
<span v-for="idx in 3" :key="idx" :class="'sircleL' + idx" class="sircle mr5"></span>
<span class="ml10 mr10">专题统计</span>
<span v-for="idx in 3" :key="idx" :class="'sircleR'+idx" class="sircle ml5"></span>
<span v-for="idx in 3" :key="idx" :class="'sircleR' + idx" class="sircle ml5"></span>
</div>
<div class="commCnt">
<div class="hh50">
@ -26,39 +26,36 @@
<!-- 右边 -->
<div class="rightbox">
<div class="title">
<span v-for="idx in 3" :key="idx" :class="'sircleL'+idx" class="sircle mr5"></span>
<span v-for="idx in 3" :key="idx" :class="'sircleL' + idx" class="sircle mr5"></span>
<span class="ml10 mr10">专题研判</span>
<span v-for="idx in 3" :key="idx" :class="'sircleR'+idx" class="sircle ml5"></span>
<span v-for="idx in 3" :key="idx" :class="'sircleR' + idx" class="sircle ml5"></span>
<el-button class="btn" type="primary" @click="handleYP">研判报告</el-button>
</div>
<div class="commCnt" >
<div class="commCnt">
<div ref="searchBox">
<el-form :model="searchList" ref="searchFormRef" :inline="true">
<el-form-item label="类型">
<el-cascader @change="changeCascader" :disabled="readonly_lx" v-model="searchList.lx" clearable :options="cascaderList" :props="{ checkStrictly: true }" placeholder="请选择类型"/>
<el-cascader ref="cascaRef" @change="changeCascader" :disabled="readonly_lx" v-model="searchList.lx" clearable
:options="cascaderList" :props="{ checkStrictly: true,multiple: true }" placeholder="请选择类型" />
</el-form-item>
<el-form-item label="人员">
<el-input @change="changeRy" v-model="searchList.ry" :disabled="readonly_ry" clearable placeholder="请输入姓名或身份证"></el-input>
<el-input @change="changeRy" v-model="searchList.ry" :disabled="readonly_ry" clearable
placeholder="请输入姓名或身份证"></el-input>
</el-form-item>
<el-form-item label="地点">
<div class="flex align-center">
<el-select v-model="searchList.dd" @change="changeBm" style="width: 180px;" :disabled="readonly_dd" placeholder="行政区划">
<el-select v-model="searchList.dd" @change="changeBm" style="width: 180px;" :disabled="readonly_dd"
placeholder="行政区划">
<el-option label="区域" value="1"></el-option>
<el-option label="部门" value="2"></el-option>
</el-select>
<el-input @change="changeRy" :disabled="readonly_dd" v-model="searchList.xxdz" clearable placeholder="请输入详细地址"></el-input>
<el-input @change="changeRy" :disabled="readonly_dd" v-model="searchList.xxdz" clearable
placeholder="请输入详细地址"></el-input>
</div>
</el-form-item>
<el-form-item label="时间">
<el-date-picker
v-model="searchList.datetimes"
type="datetimerange"
unlink-panels
:range-separator="'至'"
start-placeholder="开始日期时间"
end-placeholder="结束日期时间"
value-format="YYYY-MM-DD HH:mm:ss"
/>
<el-date-picker v-model="searchList.datetimes" type="datetimerange" unlink-panels :range-separator="'至'"
start-placeholder="开始日期时间" end-placeholder="结束日期时间" value-format="YYYY-MM-DD HH:mm:ss" />
</el-form-item>
<el-form-item>
<el-button type="primary" @click="onSearch">查询</el-button>
@ -66,40 +63,29 @@
</el-form-item>
</el-form>
</div>
<ul class="listBox" :style="{ height:pageData.boxHeight +'px'}">
<li class="list-item" ref="listBoxRef" v-for="(it,idx) in list" :key="idx">
<ul class="listBox" :style="{ height: pageData.boxHeight + 'px' }">
<li class="list-item" ref="listBoxRef" v-for="(it, idx) in list" :key="idx">
<div class="comm-title title-s">{{ it.title }}</div>
<div class="list-table" >
<MyTable
:tableData="it.tableList"
:tableColumn="it.tableColumn"
:key="idx+''+it.keyCount"
:fixed="false"
:tableHeight="pageData.tableHeight"
:tabelModel="it.title"
:tableConfiger="pageData.tableConfiger"
:controlsWidth="pageData.controlsWidth"
>
<template #jqlbdm="{ row }">
<DictTag :tag="false" :value="row.jqlbdm" :options="JQLB" />
</template>
<div class="list-table">
<MyTable :tableData="it.tableList" :tableColumn="it.tableColumn" :key="idx + '' + it.keyCount" :fixed="false"
:tableHeight="pageData.tableHeight" :tabelModel="it.title" :tableConfiger="pageData.tableConfiger"
:controlsWidth="pageData.controlsWidth">
<template #jqlbdm="{ row }">
<DictTag :tag="false" :value="row.jqlbdm" :options="JQLB" />
</template>
<template #controls="{ row }">
<el-link type="primary" size="small" @click="handleHs(row)">网上会商</el-link>
</template>
</MyTable>
<Pages
@changeNo="changeNo($event,it.title)"
@changeSize="changeSize($event,it.title)"
:tableHeight="pageData.tableHeight"
:pageConfiger="{ ...it.pageConfiger }"
></Pages>
<Pages @changeNo="changeNo($event, it.title)" @changeSize="changeSize($event, it.title)"
:tableHeight="pageData.tableHeight" :pageConfiger="{ ...it.pageConfiger }"></Pages>
</div>
</li>
</ul>
</div>
</div>
</div>
<YpModel v-model="showModel" :textContent="textContent" ></YpModel>
<YpModel v-model="showModel" :textContent="textContent"></YpModel>
<!-- 弹窗 -->
<DetailDialog ref="detaileRef"></DetailDialog>
</template>
@ -116,13 +102,13 @@ import MyTable from "@/components/aboutTable/DarkTable.vue";
import Pages from "@/components/aboutTable/Pages.vue";
import { useRoute, useRouter } from 'vue-router';
const router = useRouter();
import { nextTick, onMounted, reactive,getCurrentInstance ,ref, watch } from 'vue';
import { nextTick, onMounted, reactive, getCurrentInstance, ref, watch } from 'vue';
const { proxy } = getCurrentInstance();
const { JQLB} = proxy.$dict("JQLB"); //获取字典数据
const { JQLB } = proxy.$dict("JQLB"); //获取字典数据
const readonly_lx = ref(false)
const readonly_ry = ref(false)
const readonly_dd = ref(false)
const cascaRef=ref()
const showModel = ref(false);
const detaileRef = ref();
const searchBox = ref();
@ -130,99 +116,101 @@ const listBoxRef = ref();
const textContent = ref('');
// 图数据
const obj = reactive({
data_lxtj:{
xData:['网络舆情','警情','案件','风险隐患'],
color:[['#0DBAC5','#28EEBF'],['#F06C0D','#EEB416']],
labelColor:'#000',
list:[
{label:'总数',val:[0,0,0,0]},
data_lxtj: {
xData: ['网络舆情', '警情', '案件', '风险隐患'],
color: [['#0DBAC5', '#28EEBF'], ['#F06C0D', '#EEB416']],
labelColor: '#000',
list: [
{ label: '总数', val: [0, 0, 0, 0] },
]
},
data_hstj:{
xData:['网络舆情','警情','案件','风险隐患'],
color:['#0386FB','#00FFFF'],
labelColor:'#000',
list:[
{label:'总数',val:[0,0,10,0]},
data_hstj: {
xData: ['网络舆情', '警情', '案件', '风险隐患'],
color: ['#0386FB', '#00FFFF'],
labelColor: '#000',
list: [
{ label: '总数', val: [0, 0, 10, 0] },
]
}
})
const searchList = ref({})
let cascaderList = ref([
{ value: '01', label: '网络舆情',leaf: true },
{ value: '02', label: '警情',children:[
{ value: '021', label: '治安警情',leaf: true },
{ value: '022', label: '刑事警情',leaf: true },
{ value: '023', label: '交通警情',leaf: true },
] },
{ value: '03', label: '案件',leaf: true },
{ value: '04', label: '风险隐患',leaf: true },
{ value: '01', label: '网络舆情', leaf: true },
{
value: '02', label: '警情', children: [
{ value: '021', label: '治安警情', leaf: true },
{ value: '022', label: '刑事警情', leaf: true },
{ value: '023', label: '交通警情', leaf: true },
]
},
{ value: '03', label: '案件', leaf: true },
{ value: '04', label: '风险隐患', leaf: true },
])
// 每个列表对应的值
const list = reactive([
{
title:'网络舆情', //标题
tableList:[],
keyCount:0,
pageConfiger:{
page:1,
total:0,
pageSize:6,
title: '网络舆情', //标题
tableList: [],
keyCount: 0,
pageConfiger: {
page: 1,
total: 0,
pageSize: 6,
},
tableColumn:[
{ label: "舆情标题", prop: "yqbt",showOverflowTooltip: true},
{ label: "舆情内容", prop: "yqnr",showOverflowTooltip: true},
{ label: "舆情来源", prop: "yqly",showOverflowTooltip: true},
{ label: "舆情时间", prop: "yqsj",showOverflowTooltip: true},
tableColumn: [
{ label: "舆情标题", prop: "yqbt", showOverflowTooltip: true },
{ label: "舆情内容", prop: "yqnr", showOverflowTooltip: true },
{ label: "舆情来源", prop: "yqly", showOverflowTooltip: true },
{ label: "舆情时间", prop: "yqsj", showOverflowTooltip: true },
],
},
{
title:'警情', //标题
tableList:[],
keyCount:1,
pageConfiger:{
page:1,
total:0,
pageSize:6,
title: '警情', //标题
tableList: [],
keyCount: 1,
pageConfiger: {
page: 1,
total: 0,
pageSize: 6,
},
tableColumn:[
{ label: "接警单编号", prop: "jjdbh",showOverflowTooltip: true},
{ label: "报警电话", prop: "bjdh",showOverflowTooltip: true},
{ label: "报警时间", prop: "bjsj",showOverflowTooltip: true},
{ label: "报警内容", prop: "bjnr",showOverflowTooltip: true},
{ label: "警情类型", prop: "jqlbdm",showSolt:true,showOverflowTooltip: true},
tableColumn: [
{ label: "接警单编号", prop: "jjdbh", showOverflowTooltip: true },
{ label: "报警电话", prop: "bjdh", showOverflowTooltip: true },
{ label: "报警时间", prop: "bjsj", showOverflowTooltip: true },
{ label: "报警内容", prop: "bjnr", showOverflowTooltip: true },
{ label: "警情类型", prop: "jqlbdm", showSolt: true, showOverflowTooltip: true },
],
},
{
title:'案件', //标题
tableList:[],
keyCount:2,
pageConfiger:{
page:1,
total:0,
pageSize:6,
title: '案件', //标题
tableList: [],
keyCount: 2,
pageConfiger: {
page: 1,
total: 0,
pageSize: 6,
},
tableColumn:[
{ label: "案件编号", prop: "ajbh",showOverflowTooltip: true},
{ label: "案件内容", prop: "ajnr",showOverflowTooltip: true},
{ label: "案件类型", prop: "ajlx",showOverflowTooltip: true},
{ label: "案件时间", prop: "ajsj",showOverflowTooltip: true},
tableColumn: [
{ label: "案件编号", prop: "ajbh", showOverflowTooltip: true },
{ label: "案件内容", prop: "ajnr", showOverflowTooltip: true },
{ label: "案件类型", prop: "ajlx", showOverflowTooltip: true },
{ label: "案件时间", prop: "ajsj", showOverflowTooltip: true },
],
},
{
title:'风险隐患', //标题
tableList:[],
keyCount:3,
pageConfiger:{
page:1,
total:0,
pageSize:6,
title: '风险隐患', //标题
tableList: [],
keyCount: 3,
pageConfiger: {
page: 1,
total: 0,
pageSize: 6,
},
tableColumn:[
{ label: "隐患标题", prop: "yhbt",showOverflowTooltip: true},
{ label: "隐患内容", prop: "yhnr",showOverflowTooltip: true},
{ label: "隐患类型", prop: "yhlx",showOverflowTooltip: true},
{ label: "上报时间", prop: "sbsj",showOverflowTooltip: true},
tableColumn: [
{ label: "隐患标题", prop: "yhbt", showOverflowTooltip: true },
{ label: "隐患内容", prop: "yhnr", showOverflowTooltip: true },
{ label: "隐患类型", prop: "yhlx", showOverflowTooltip: true },
{ label: "上报时间", prop: "sbsj", showOverflowTooltip: true },
],
},
])
@ -235,12 +223,21 @@ const pageData = reactive({
rowHieght: 61,
showSelectType: "null",
loading: false,
showIndex:false,
showIndex: false,
rowHeight: 30,
},
controlsWidth: 120, //操作栏宽度
});
watch(() => JQLB.value, (val) => {
if (val) {
cascaderList.value[1].children = val.map((el) => {
return { value: el.dm, label: el.zdmc, leaf: true }
})
}
},
{
deep: true, immediate: true
})
onMounted(() => {
// getCount(); //获取统计数据
tabHeightFn()
@ -263,8 +260,8 @@ const getCount = () => {
};
// 分页
const changeNo = (e,type) =>{
switch(type){
const changeNo = (e, type) => {
switch (type) {
case '网络舆情':
list[0].pageConfiger.page = e;
break;
@ -281,8 +278,8 @@ const changeNo = (e,type) =>{
}
getJqList()
}
const changeSize = (e,type) =>{
switch(type){
const changeSize = (e, type) => {
switch (type) {
case '网络舆情':
list[0].pageConfiger.pageSize = e;
break;
@ -301,47 +298,55 @@ const changeSize = (e,type) =>{
}
// 警情列表
const getJqList = () =>{
const getJqList = () => {
let params = {
pageCurrent: list[1].pageConfiger.page,
pageSize: list[1].pageConfiger.pageSize,
}
lzJcjPjdbSelectPage(params).then(res=>{
lzJcjPjdbSelectPage(params).then(res => {
list[1].tableList = res.records || [];
list[1].pageConfiger.total = res.total;
//模拟的统计警情接口
obj.data_lxtj.list = [{ label: '总数', val: [0,res.total,0,0] }];
obj.data_hstj.list = [{ label: '总数', val: [0,res.total,0,0] }];
obj.data_lxtj.list = [{ label: '总数', val: [0, res.total, 0, 0] }];
obj.data_hstj.list = [{ label: '总数', val: [0, res.total, 0, 0] }];
})
}
const handleHs = (val) =>{
router.push({path:'/MeetingRoom',query:{tsypid:val.id}})
const handleHs = (val) => {
router.push({ path: '/MeetingRoom', query: { tsypid: val.id } })
}
const handleYP = () =>{
const handleYP = () => {
let arr=cascaRef.value.getCheckedNodes()
searchForm.value.jqlbdms=arr.map((el)=>{
return el.value
})
let params = {
hskssj:searchForm.value.kssj,
hsjssj:searchForm.value.jssj,
hskssj: searchForm.value.kssj,
hsjssj: searchForm.value.jssj,
jqlbdms:searchForm.value.jqlbdms
}
qcckPost(params,'/mosty-gsxt/wshs/getDcypbg').then(res=>{
qcckPost(params, '/mosty-gsxt/lzJcjPjdb/getJqDcypbg').then(res => {
let data = res || {};
let html = `<p class="html_bt">${data.bt}</p>`
html+=`<p>${data.head}</p>`
html+=`<p>${data.nr}</p>`
html+=`<p>${data.bc}</p>`
html+=`<p>${data.end}</p>`
html += `<p>${data.head}</p>`
html += `<p>${data.nr}</p>`
html += `<p>${data.bc}</p>`
html += `<p>${data.end}</p>`
textContent.value = html;
showModel.value = true;
})
}
// 选择类型
const changeCascader = (val) =>{
const changeCascader = (val) => {
console.log(val,'val');
console.log(cascaRef.value.getCheckedNodes(),'++++++++');
readonly_lx.value = false;
readonly_ry.value = val ? true : false
readonly_dd.value = val ? true : false
@ -350,7 +355,7 @@ const changeCascader = (val) =>{
}
// 选择人员
const changeRy = (val) =>{
const changeRy = (val) => {
readonly_ry.value = false;
readonly_lx.value = val ? true : false
readonly_dd.value = val ? true : false
@ -358,7 +363,7 @@ const changeRy = (val) =>{
searchList.value.ssbm = ''
}
// 选择地点
const changeBm = (val) =>{
const changeBm = (val) => {
readonly_dd.value = false;
readonly_lx.value = val ? true : false
readonly_ry.value = val ? true : false
@ -366,7 +371,7 @@ const changeBm = (val) =>{
searchList.value.ry = ''
}
// 重置
const resetForm = () =>{
const resetForm = () => {
searchForm.value = {}
readonly_lx.value = false
readonly_ry.value = false
@ -374,10 +379,10 @@ const resetForm = () =>{
}
// 搜索
const onSearch = () =>{
if(searchList.value.lx || searchList.value.ry || searchList.value.dd){
const onSearch = () => {
if (searchList.value.lx || searchList.value.ry || searchList.value.dd) {
detaileRef.value.init(searchList.value)
}else{
} else {
ElMessage.warning('请选择查询条件')
}
}
@ -397,25 +402,27 @@ const tabHeightFn = () => {
</script>
<style lang="scss" scoped>
.yphome{
.yphome {
width: 100%;
height: 100%;
padding-top: 15px;
box-sizing: border-box;
color: #000;
.leftbox{
width:500px;
.leftbox {
width: 500px;
height: 100%;
margin-right: 10px;
background: #fff;
}
.rightbox{
.rightbox {
flex: 1 0 0;
background: #fff;
}
}
@mixin common($width: 16px,$opacity:1){
@mixin common($width: 16px, $opacity: 1) {
height: $width;
width: $width;
border-radius: 50%;
@ -424,35 +431,43 @@ const tabHeightFn = () => {
}
// 共同
.title{
.title {
display: flex;
align-items: center;
justify-content: center;
height: 60px;
font-size: 24px;
position: relative;
.sircle{
.sircle {
display: inline-block;
}
.sircleL1{
@include common(8px,0.5);
.sircleL1 {
@include common(8px, 0.5);
}
.sircleL2{
@include common(12px,0.75);
.sircleL2 {
@include common(12px, 0.75);
}
.sircleL3{
.sircleL3 {
@include common(16px);
}
.sircleR1{
.sircleR1 {
@include common(16px);
}
.sircleR2{
@include common(12px,0.75);
.sircleR2 {
@include common(12px, 0.75);
}
.sircleR3{
@include common(8px,0.5);
.sircleR3 {
@include common(8px, 0.5);
}
.btn{
.btn {
position: absolute;
top: 50%;
right: 10px;
@ -460,35 +475,37 @@ const tabHeightFn = () => {
}
}
.commCnt{
.commCnt {
height: calc(100% - 60px);
overflow: hidden;
overflow-y: auto;
padding: 10px 20px;
box-sizing: border-box;
.comm-title{
.comm-title {
position: relative;
font-size: 20px;
&::before{
&::before {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 78px;
height: 4px;
background: linear-gradient( 90deg, #3596F9 0%, rgba(53,150,249,0) 100%);
background: linear-gradient(90deg, #3596F9 0%, rgba(53, 150, 249, 0) 100%);
border-radius: 4px 4px 4px 4px;
}
}
.echartsBox{
.echartsBox {
height: calc(100% - 30px);
margin-top: 4px;
}
}
.listBox{
.listBox {
height: calc(100% - 110px);
margin-top: 4px;
border-radius: 10px;
@ -496,66 +513,71 @@ const tabHeightFn = () => {
display: flex;
flex-wrap: wrap;
overflow: hidden;
.list-item{
.list-item {
width: 49.5%;
height: calc(100% / 2 - 5px);
box-shadow: 0px 0px 4px 0px rgba(0,0,0,0.02);
box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.02);
border-radius: 8px 8px 8px 8px;
border: 1px solid #E8EDF6;
padding: 4px 4px;
box-sizing: border-box;
margin-bottom: 5px;
.title-s{
.title-s {
font-size: 16px;
}
.list-table{
.list-table {
margin-top: 5px;
overflow: hidden;
}
}
.list-item:nth-child(2n+1){
.list-item:nth-child(2n+1) {
margin-right: 1%;
}
}
::v-deep .searchBox{
margin-bottom:0 !important;
::v-deep .searchBox {
margin-bottom: 0 !important;
padding: 2px !important;
}
::v-deep .el-table .table_blue_row {
background: #fff !important;
}
::v-deep .el-table th.el-table__cell{
::v-deep .el-table th.el-table__cell {
font-size: 13px;
background: #EFF5F7;
}
::v-deep .el-table__empty-block{
width: 100%!important;
::v-deep .el-table__empty-block {
width: 100% !important;
}
::v-deep .el-scrollbar__view{
::v-deep .el-scrollbar__view {
border-right: none;
}
::v-deep .el-table .el-table__cell{
::v-deep .el-table .el-table__cell {
padding: 0;
}
::v-deep .el-table th.el-table__cell>.cell{
::v-deep .el-table th.el-table__cell>.cell {
padding: 8px 0;
}
::v-deep .el-link {
margin: 3px;
}
.html_bt >>>p{
.html_bt>>>p {
color: red;
}
::v-deep .el-date-editor .el-range-separator {
color: #333;
}
</style>

View File

@ -5,9 +5,9 @@ function resolve(dir) {
}
// const serverHost = "http://47.108.232.77:9537"//波哥
const serverHost = "http://192.168.0.231:8006"//线上
// const serverHost = "http://192.168.0.231:8006"//线上
// const serverHost = "http://192.168.1.117:8006"//周
// const serverHost = "http://192.168.1.98:8006"//毛毛
const serverHost = "http://192.168.1.98:8006"//毛毛
module.exports = {
// configureWebpack: {