624 lines
17 KiB
Vue
624 lines
17 KiB
Vue
<template>
|
|
<div class="yp—home flex">
|
|
<!-- 左边 -->
|
|
<div class="leftbox">
|
|
<div class="title">
|
|
<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>
|
|
</div>
|
|
<div class="commCnt">
|
|
<div class="hh50">
|
|
<div class="comm-title">类型统计</div>
|
|
<div class="echartsBox">
|
|
<MoreBarEcharts echartsId="cztjEcharts" :data="obj.data_lxtj"></MoreBarEcharts>
|
|
</div>
|
|
</div>
|
|
<div class="hh50">
|
|
<div class="comm-title">会商统计</div>
|
|
<div class="echartsBox">
|
|
<LineEcharts echartsId="hstjEcharts" :data="obj.data_hstj"></LineEcharts>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- 右边 -->
|
|
<div class="rightbox">
|
|
<div class="title">
|
|
<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>
|
|
<el-button class="btn" type="primary" @click="handleYP">研判报告</el-button>
|
|
</div>
|
|
<div class="commCnt">
|
|
<div ref="searchBox">
|
|
<el-form :model="searchList" ref="searchFormRef" :inline="true">
|
|
<el-form-item label="类型">
|
|
<el-cascader ref="cascaRef" v-model="searchList.lx" @change="changeCascader" collapse-tags
|
|
:disabled="readonly_lx" :options="cascaderList" :props="{ 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-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-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>
|
|
</div>
|
|
</el-form-item> -->
|
|
<el-form-item label="时间">
|
|
<el-date-picker v-model="searchList.datetimes" type="daterange" unlink-panels :range-separator="'至'"
|
|
start-placeholder="开始日期时间" end-placeholder="结束日期时间" format="YYYY-MM-DD HH:mm:ss"
|
|
value-format="YYYY-MM-DD HH:mm:ss" />
|
|
</el-form-item>
|
|
<el-form-item>
|
|
<el-button type="primary" @click="onSearch">查询</el-button>
|
|
<el-button type="primary" @click="resetForm">重置</el-button>
|
|
</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">
|
|
<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>
|
|
<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>
|
|
</div>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- <YpModel v-model="showModel" :textContent="textContent"></YpModel> -->
|
|
<!-- 弹窗 -->
|
|
<!-- <DetailDialog ref="detaileRef"></DetailDialog> -->
|
|
<!-- 研判报告弹窗 -->
|
|
<JudgmentReport v-model="visible" :search="search"></JudgmentReport>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { lzJcjPjdbSelectPage } from '@/api/semanticAnalysis.js'
|
|
import { ElMessage } from "element-plus";
|
|
// import DetailDialog from './components/detailDialog.vue'
|
|
import JudgmentReport from './components/judgmentReport.vue'
|
|
// import YpModel from '@/components/ypModel/index.vue'
|
|
import { qcckPost, qcckGet } from "@/api/qcckApi.js";
|
|
import MoreBarEcharts from "@/views/home/echarts/moreBarEcharts.vue";
|
|
import LineEcharts from "@/views/home/echarts/moreLineEcharts.vue";
|
|
import MyTable from "@/components/aboutTable/DarkTable.vue";
|
|
import Pages from "@/components/aboutTable/Pages.vue";
|
|
import { useRoute, useRouter } from 'vue-router';
|
|
import {tbJqGetPageList } from '@/api/yj.js'
|
|
const router = useRouter();
|
|
import { nextTick, onMounted, reactive, getCurrentInstance, ref, watch } from 'vue';
|
|
const { proxy } = getCurrentInstance();
|
|
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();
|
|
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_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 },
|
|
])
|
|
// 每个列表对应的值
|
|
const list = reactive([
|
|
{
|
|
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 },
|
|
],
|
|
},
|
|
{
|
|
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 },
|
|
],
|
|
},
|
|
{
|
|
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 },
|
|
],
|
|
},
|
|
{
|
|
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 },
|
|
],
|
|
},
|
|
])
|
|
const searchForm = ref({}) //赛选
|
|
|
|
// 列表公用
|
|
const pageData = reactive({
|
|
keyCount: 0,
|
|
tableConfiger: {
|
|
rowHieght: 61,
|
|
showSelectType: "null",
|
|
loading: 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()
|
|
getJqList() //警情列表
|
|
});
|
|
|
|
const getCount = () => {
|
|
// 获取处置状态统计
|
|
qcckPost({}, '/mosty-gsxt/qbcj/getXscjTjByXslx').then(res => {
|
|
let arr = res || [];
|
|
obj.data_lxtj.xData = arr.map(v => v.zdmc);
|
|
obj.data_lxtj.list = [{ label: '总数', val: arr.map(v => v.count) }];
|
|
});
|
|
// 会商统计
|
|
qcckPost({}, '/mosty-gsxt/wshs/getWshyZttj').then(res => {
|
|
let arr = res || [];
|
|
obj.data_hstj.xData = arr.map(v => v.zdmc);
|
|
obj.data_hstj.list = [{ label: '总数', val: arr.map(v => v.count) }];
|
|
});
|
|
};
|
|
|
|
// 分页
|
|
const changeNo = (e, type) => {
|
|
switch (type) {
|
|
case '网络舆情':
|
|
list[0].pageConfiger.page = e;
|
|
break;
|
|
case '警情':
|
|
list[1].pageConfiger.page = e;
|
|
getJqList()
|
|
break;
|
|
case '案件':
|
|
list[2].pageConfiger.page = e;
|
|
break;
|
|
case '风险隐患':
|
|
list[3].pageConfiger.page = e;
|
|
break;
|
|
}
|
|
getJqList()
|
|
}
|
|
const changeSize = (e, type) => {
|
|
switch (type) {
|
|
case '网络舆情':
|
|
list[0].pageConfiger.pageSize = e;
|
|
break;
|
|
case '警情':
|
|
list[1].pageConfiger.pageSize = e;
|
|
getJqList()
|
|
break;
|
|
case '案件':
|
|
list[2].pageConfiger.pageSize = e;
|
|
break;
|
|
case '风险隐患':
|
|
list[3].pageConfiger.pageSize = e;
|
|
break;
|
|
}
|
|
|
|
}
|
|
|
|
// 警情列表
|
|
const getJqList = () => {
|
|
let params = {
|
|
pageCurrent: list[1].pageConfiger.page,
|
|
pageSize: list[1].pageConfiger.pageSize,
|
|
}
|
|
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] }];
|
|
})
|
|
}
|
|
|
|
|
|
|
|
|
|
const handleHs = (val) => {
|
|
router.push({ path: '/MeetingRoom', query: { tsypid: val.id } })
|
|
}
|
|
const visible = ref(false)
|
|
const search = ref({})
|
|
const handleYP = () => {
|
|
console.log(searchList.value);
|
|
visible.value = true
|
|
let data = []
|
|
if (searchList.value.lx) {
|
|
data = searchList.value.lx.map(item => {
|
|
return item[item.length - 1]
|
|
})
|
|
|
|
}
|
|
search.value = {
|
|
lx: searchList.value.lx ? data : '',
|
|
startTime: searchList.value.datetimes ? searchList.value.datetimes[0] : '',
|
|
endTime: searchList.value.datetimes ? searchList.value.datetimes[1] : '',
|
|
}
|
|
|
|
// let arr=cascaRef.value.getCheckedNodes()
|
|
// searchForm.value.jqlbdms=arr.map((el)=>{
|
|
// return el.value
|
|
// })
|
|
// let params = {
|
|
// hskssj: searchForm.value.kssj,
|
|
// hsjssj: searchForm.value.jssj,
|
|
// jqlbdms:searchForm.value.jqlbdms
|
|
// }
|
|
// 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>`
|
|
// textContent.value = html;
|
|
// showModel.value = true;
|
|
// })
|
|
}
|
|
|
|
// 选择类型
|
|
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
|
|
searchList.value.ry = ''
|
|
searchList.value.ssbm = ''
|
|
}
|
|
|
|
// 选择人员
|
|
const changeRy = (val) => {
|
|
readonly_ry.value = false;
|
|
readonly_lx.value = val ? true : false
|
|
readonly_dd.value = val ? true : false
|
|
searchList.value.lx = ''
|
|
searchList.value.ssbm = ''
|
|
}
|
|
// 选择地点
|
|
const changeBm = (val) => {
|
|
readonly_dd.value = false;
|
|
readonly_lx.value = val ? true : false
|
|
readonly_ry.value = val ? true : false
|
|
searchList.value.lx = ''
|
|
searchList.value.ry = ''
|
|
}
|
|
// 重置
|
|
const resetForm = () => {
|
|
searchList.value = {}
|
|
searchForm.value = {}
|
|
readonly_lx.value = false
|
|
readonly_ry.value = false
|
|
readonly_dd.value = false
|
|
}
|
|
|
|
// 搜索
|
|
const onSearch = () => {
|
|
if (searchList.value.lx || searchList.value.ry || searchList.value.dd) {
|
|
const data= searchList.value.lx.map(item => {
|
|
return item[item.length - 1]
|
|
})
|
|
console.log(searchList.value);
|
|
|
|
const promes = {
|
|
startTime: searchList.value.datetimes ? searchList.value.datetimes[0] : '',
|
|
endTime: searchList.value.datetimes ? searchList.value.datetimes[1] : '',
|
|
bjlbs: searchList.value.lx ? data.join(',') : '',
|
|
}
|
|
console.log(promes);
|
|
|
|
tbJqGetPageList(promes).then(res => {
|
|
list[1].tableList = res.records || [];
|
|
list[1].pageConfiger.total = res.total;
|
|
})
|
|
|
|
|
|
|
|
} else {
|
|
ElMessage.warning('请选择查询条件')
|
|
}
|
|
}
|
|
|
|
|
|
// 表格高度计算
|
|
const tabHeightFn = () => {
|
|
pageData.boxHeight = window.innerHeight - searchBox.value.offsetHeight - 250
|
|
nextTick(() => {
|
|
pageData.tableHeight = listBoxRef.value[0].offsetHeight - 70;
|
|
});
|
|
window.onresize = function () {
|
|
tabHeightFn();
|
|
};
|
|
};
|
|
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.yp—home {
|
|
width: 100%;
|
|
height: 100%;
|
|
padding-top: 15px;
|
|
box-sizing: border-box;
|
|
color: #000;
|
|
|
|
.leftbox {
|
|
width: 500px;
|
|
height: 100%;
|
|
margin-right: 10px;
|
|
background: #fff;
|
|
}
|
|
|
|
.rightbox {
|
|
flex: 1 0 0;
|
|
background: #fff;
|
|
}
|
|
}
|
|
|
|
@mixin common($width: 16px, $opacity: 1) {
|
|
height: $width;
|
|
width: $width;
|
|
border-radius: 50%;
|
|
background: #0386FB;
|
|
opacity: $opacity;
|
|
}
|
|
|
|
// 共同
|
|
.title {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
height: 60px;
|
|
font-size: 24px;
|
|
position: relative;
|
|
|
|
.sircle {
|
|
display: inline-block;
|
|
}
|
|
|
|
.sircleL1 {
|
|
@include common(8px, 0.5);
|
|
}
|
|
|
|
.sircleL2 {
|
|
@include common(12px, 0.75);
|
|
}
|
|
|
|
.sircleL3 {
|
|
@include common(16px);
|
|
}
|
|
|
|
.sircleR1 {
|
|
@include common(16px);
|
|
}
|
|
|
|
.sircleR2 {
|
|
@include common(12px, 0.75);
|
|
}
|
|
|
|
.sircleR3 {
|
|
@include common(8px, 0.5);
|
|
}
|
|
|
|
.btn {
|
|
position: absolute;
|
|
top: 50%;
|
|
right: 10px;
|
|
transform: translateY(-50%);
|
|
}
|
|
}
|
|
|
|
.commCnt {
|
|
height: calc(100% - 60px);
|
|
overflow: hidden;
|
|
overflow-y: auto;
|
|
padding: 10px 20px;
|
|
box-sizing: border-box;
|
|
|
|
.comm-title {
|
|
position: relative;
|
|
font-size: 20px;
|
|
|
|
&::before {
|
|
content: '';
|
|
position: absolute;
|
|
bottom: 0;
|
|
left: 0;
|
|
width: 78px;
|
|
height: 4px;
|
|
background: linear-gradient(90deg, #3596F9 0%, rgba(53, 150, 249, 0) 100%);
|
|
border-radius: 4px 4px 4px 4px;
|
|
}
|
|
}
|
|
|
|
.echartsBox {
|
|
height: calc(100% - 30px);
|
|
margin-top: 4px;
|
|
}
|
|
|
|
}
|
|
|
|
.listBox {
|
|
height: calc(100% - 110px);
|
|
margin-top: 4px;
|
|
border-radius: 10px;
|
|
box-sizing: border-box;
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
overflow: hidden;
|
|
|
|
.list-item {
|
|
width: 49.5%;
|
|
height: calc(100% / 2 - 5px);
|
|
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 {
|
|
font-size: 16px;
|
|
}
|
|
|
|
.list-table {
|
|
margin-top: 5px;
|
|
overflow: hidden;
|
|
}
|
|
}
|
|
|
|
.list-item:nth-child(2n+1) {
|
|
margin-right: 1%;
|
|
}
|
|
}
|
|
|
|
::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 {
|
|
font-size: 13px;
|
|
background: #EFF5F7;
|
|
}
|
|
|
|
::v-deep .el-table__empty-block {
|
|
width: 100% !important;
|
|
}
|
|
|
|
::v-deep .el-scrollbar__view {
|
|
border-right: none;
|
|
}
|
|
|
|
::v-deep .el-table .el-table__cell {
|
|
padding: 0;
|
|
|
|
}
|
|
|
|
::v-deep .el-table th.el-table__cell>.cell {
|
|
padding: 8px 0;
|
|
}
|
|
|
|
::v-deep .el-link {
|
|
margin: 3px;
|
|
}
|
|
|
|
.html_bt>>>p {
|
|
color: red;
|
|
}
|
|
|
|
::v-deep .el-date-editor .el-range-separator {
|
|
color: #333;
|
|
}
|
|
</style>
|