308 lines
10 KiB
Vue
308 lines
10 KiB
Vue
<template>
|
|
<div class="container">
|
|
<div class="header flex just-between">
|
|
<span>情报研判分析</span>
|
|
<span class="pointer" @click="close"><el-icon><Close /></el-icon></span>
|
|
</div>
|
|
<div class="seachsBox">
|
|
<Search :searchArr="searchConfiger" @submit="onSearch" @reset="reset">
|
|
<template #defaultSlot>
|
|
<div class="flex align-center">
|
|
<span class="marks" @click="changeTime(idex)" :class="active == idex ? 'activeBtn' : ''" v-for="(it, idex) in time" :key="idex">{{ it.label }}</span>
|
|
<el-date-picker @change="handleDateChange" v-model="listQuery.dateRange" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" format="YYYY-MM-DD" value-format="YYYY-MM-DD" />
|
|
</div>
|
|
</template>
|
|
</Search>
|
|
</div>
|
|
<div class="contant">
|
|
<div class="contant-left aside">
|
|
<div class="model">
|
|
<div class="modelTitle">热点线索</div>
|
|
<div class="cnt">
|
|
<Hot_xs ref="RedRdxs"></Hot_xs>
|
|
</div>
|
|
</div>
|
|
<div class="model">
|
|
<div class="modelTitle">热点组织</div>
|
|
<div class="cnt">
|
|
<Hot_zz ref="RedRdzz"></Hot_zz>
|
|
</div>
|
|
</div>
|
|
<div class="model">
|
|
<div class="modelTitle">热点人员</div>
|
|
<div class="cnt">
|
|
<Hot_ry ref="RedRdry"></Hot_ry>
|
|
</div>
|
|
</div>
|
|
<div class="model">
|
|
<div class="modelTitle">热点号码</div>
|
|
<div class="cnt">
|
|
<Hot_hm ref="RedRdhm"></Hot_hm>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="map">
|
|
<GdMap></GdMap>
|
|
<ul class="btns">
|
|
<li><span>热点集访单位</span></li>
|
|
<li><span>点位图</span></li>
|
|
<li><span>指令分布</span></li>
|
|
</ul>
|
|
</div>
|
|
<div class="contant-right aside">
|
|
<div class="model">
|
|
<div class="modelTitle">诉求分类</div>
|
|
<div class="cnt">
|
|
<Zqfl ref="RedSqfl"></Zqfl>
|
|
</div>
|
|
</div>
|
|
<div class="model">
|
|
<div class="modelTitle">重点线索分类</div>
|
|
<div class="cnt">
|
|
<Zdxsfl ref="RedZdxsfl"></Zdxsfl>
|
|
</div>
|
|
</div>
|
|
<div class="model">
|
|
<div class="modelTitle">指令次数</div>
|
|
<div class="cnt">
|
|
<Zlcs ref="RedZlcs"></Zlcs>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { timeSlotChange } from "@/utils/tools.js";
|
|
import GdMap from "@/components/GdMap/index.vue";
|
|
import Hot_xs from './hot_xs/index.vue'
|
|
import Hot_zz from './hot_zz/index.vue'
|
|
import Hot_ry from './hot_ry/index.vue'
|
|
import Hot_hm from './hot_hm/index.vue'
|
|
import Zqfl from './zqfl/index.vue'
|
|
import Zlcs from './zlcs/index.vue'
|
|
import Zdxsfl from './zdxsfl/index.vue'
|
|
import Search from "@/components/aboutTable/Search.vue";
|
|
import { reactive, ref, getCurrentInstance } from "vue";
|
|
const { proxy } = getCurrentInstance();
|
|
const { SGXTQTSQLX } = proxy.$dict("SGXTQTSQLX"); //获取字典数据
|
|
const emits = defineEmits(['close'])
|
|
const listQuery = ref({});
|
|
const active = ref(-1);
|
|
const time = reactive([
|
|
{ label: "今天", value: "10" },
|
|
{ label: "本周", value: "20" },
|
|
{ label: "本月", value: "30" },
|
|
{ label: "本季度", value: "40" },
|
|
{ label: "本年", value: "50" }
|
|
]);
|
|
const searchConfiger = reactive([
|
|
{ label: "所属部门", prop: "ssbmdm", placeholder: "请选择", showType: "department" },
|
|
{ label: "数据周期", prop: "sjzq", placeholder: "请选择", showType: "defaultSlot"},
|
|
{ label: "指向地点", prop: "zxdz", placeholder: "请输入", showType: "input" },
|
|
{ label: "诉求类型", prop: "qtsq", placeholder: "请选择", showType: "select",options:SGXTQTSQLX }
|
|
]);
|
|
const RedRdxs = ref()
|
|
const RedRdzz = ref()
|
|
const RedRdry = ref()
|
|
const RedRdhm = ref()
|
|
const RedSqfl = ref()
|
|
const RedZlcs = ref()
|
|
const RedZdxsfl = ref()
|
|
const changeTime = (idex) =>{
|
|
active.value = idex;
|
|
switch(idex){
|
|
case 0: //日
|
|
listQuery.value.dateRange = timeSlotChange('天')
|
|
break;
|
|
case 1: //周
|
|
listQuery.value.dateRange = timeSlotChange('本周')
|
|
break;
|
|
case 2: //月
|
|
listQuery.value.dateRange = timeSlotChange('本月')
|
|
break;
|
|
case 3: //季度
|
|
listQuery.value.dateRange = timeSlotChange('本季度')
|
|
break;
|
|
case 4: //年
|
|
listQuery.value.dateRange = timeSlotChange('本年')
|
|
break;
|
|
}
|
|
listQuery.value.hskssj = listQuery.value.dateRange[0] +' 00:00:00';
|
|
listQuery.value.hsjssj = listQuery.value.dateRange[1] +' 23:59:59';;
|
|
}
|
|
|
|
const handleDateChange = (val) => {
|
|
active.value = -1;
|
|
if(!val) return;
|
|
listQuery.value.hskssj = val[0] +' 00:00:00';
|
|
listQuery.value.hsjssj = val[1]+' 23:59:59';
|
|
if(val[0] == timeSlotChange('天')[0] && val[1] == timeSlotChange('天')[1]) active.value = 0;
|
|
if(val[0] == timeSlotChange('本周')[0] && val[1] == timeSlotChange('本月')[1]) active.value = 1;
|
|
if(val[0] == timeSlotChange('本月')[0] && val[1] == timeSlotChange('本月')[1]) active.value = 2;
|
|
if(val[0] == timeSlotChange('本季度')[0] && val[1] == timeSlotChange('本季度')[1]) active.value = 3;
|
|
if(val[0] == timeSlotChange('本年')[0] && val[1] == timeSlotChange('本年')[1]) active.value = 4;
|
|
};
|
|
|
|
const onSearch = (val) =>{
|
|
listQuery.value = {...listQuery.value,...val}
|
|
loadDate()
|
|
}
|
|
const reset = (val) =>{
|
|
listQuery.value = {};
|
|
active.value = -1;
|
|
listQuery.value.dateRange = '';
|
|
listQuery.value.hskssj = '';
|
|
listQuery.value.hsjssj = '';
|
|
loadDate()
|
|
}
|
|
|
|
const loadDate = () =>{
|
|
RedRdxs.value.init(listQuery.value)
|
|
RedRdzz.value.init(listQuery.value)
|
|
RedRdry.value.init(listQuery.value)
|
|
RedRdhm.value.init(listQuery.value)
|
|
RedSqfl.value.init(listQuery.value)
|
|
RedZlcs.value.init(listQuery.value)
|
|
RedZdxsfl.value.init(listQuery.value)
|
|
}
|
|
|
|
|
|
// 关闭
|
|
function close(){
|
|
emits('close')
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.container {
|
|
width: 100%;
|
|
height: 100%;
|
|
background: rgb(232, 237, 246);
|
|
color: #333;
|
|
padding: 10px;
|
|
box-sizing: border-box;
|
|
|
|
.header {
|
|
height: 60px;
|
|
font-size: 30px;
|
|
font-weight: 600;
|
|
background: #fff;
|
|
padding: 0 15px;
|
|
box-sizing: border-box;
|
|
border-radius: 4px;
|
|
}
|
|
|
|
.seachsBox {
|
|
margin-bottom: 10px;
|
|
.marks {
|
|
padding: 5px 6px;
|
|
box-sizing: border-box;
|
|
border-radius: 4px;
|
|
margin-right: 5px;
|
|
border: 1px solid #e1e1e1;
|
|
color: #333;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.activeBtn {
|
|
border: 1px solid #0072ff;
|
|
background: #0072ff;
|
|
color: #fff;
|
|
}
|
|
|
|
::v-deep .el-form-item--default {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
::v-deep .pageSearch {
|
|
margin-bottom: 0 !important;
|
|
}
|
|
|
|
.searchBox {
|
|
padding: 0px 15px 0px;
|
|
}
|
|
}
|
|
|
|
.contant {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
width: 100%;
|
|
height: calc(100% - 160px);
|
|
overflow: hidden;
|
|
overflow-y: auto;
|
|
.aside {
|
|
display: flex;
|
|
flex-direction: column;
|
|
width: 450px;
|
|
height: 100%;
|
|
top: 0;
|
|
.model {
|
|
background: #fff;
|
|
flex: 1 0 0;
|
|
margin-bottom: 10px;
|
|
border-radius: 4px;
|
|
|
|
.modelTitle {
|
|
position: relative;
|
|
padding: 0 4px;
|
|
box-sizing: border-box;
|
|
height: 30px;
|
|
line-height: 30px;
|
|
color: #333;
|
|
&::before{
|
|
position: absolute;
|
|
content: '';
|
|
left: 4px;
|
|
bottom: 4px;
|
|
width:50px ;
|
|
height: 4px;
|
|
background: linear-gradient(to right,#0072ff,#fff);
|
|
}
|
|
}
|
|
.cnt{
|
|
height: calc(100% - 30px);
|
|
padding: 0 4px;
|
|
box-sizing: border-box;
|
|
overflow: hidden;
|
|
overflow-y: auto;
|
|
}
|
|
|
|
&:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
}
|
|
}
|
|
.map{
|
|
flex: 1 0 0;
|
|
margin: 0 10px;
|
|
position: relative;
|
|
.btns{
|
|
position: absolute;
|
|
bottom:0 ;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
display: flex;
|
|
z-index: 99;
|
|
li{
|
|
white-space: nowrap;
|
|
padding: 10px 30px;
|
|
margin: 0 10px;
|
|
background: #004597;
|
|
color: #fff;
|
|
transform: skewX(-30deg);
|
|
cursor: pointer;
|
|
span{
|
|
display: inline-block;
|
|
transform: skewX(30deg);
|
|
}
|
|
&:nth-child(2){
|
|
background: #ee8134;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style> |