更新页面
This commit is contained in:
@ -1,68 +1,268 @@
|
||||
<template>
|
||||
<div class="container">
|
||||
<div class="header flex just-between">
|
||||
<span>情报研判分析</span>
|
||||
<span class="pointer"><el-icon><Close /></el-icon></span>
|
||||
</div>
|
||||
<div class="seachsBox">
|
||||
<Search :searchArr="searchConfiger" @submit="onSearch"/>
|
||||
</div>
|
||||
<div class="contant">
|
||||
<div class="contant-left aside">
|
||||
<div></div>
|
||||
<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">
|
||||
<template #defaultSlot>
|
||||
<div class="flex align-center">
|
||||
<span class="marks" @click="active = idex" :class="active == idex ? 'activeBtn' : ''" v-for="(it, idex) in time" :key="idex">{{ it.label }}</span>
|
||||
<el-date-picker 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></Hot_xs>
|
||||
</div>
|
||||
</div>
|
||||
<div class="model">
|
||||
<div class="modelTitle">热点组织</div>
|
||||
<div class="cnt">
|
||||
<Hot_zz></Hot_zz>
|
||||
</div>
|
||||
</div>
|
||||
<div class="model">
|
||||
<div class="modelTitle">热点人员</div>
|
||||
<div class="cnt">
|
||||
<Hot_ry></Hot_ry>
|
||||
</div>
|
||||
</div>
|
||||
<div class="model">
|
||||
<div class="modelTitle">热点号码</div>
|
||||
<div class="cnt">
|
||||
<Hot_hm></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></Zqfl>
|
||||
</div>
|
||||
</div>
|
||||
<div class="model">
|
||||
<div class="modelTitle">重点线索分类</div>
|
||||
<div class="cnt">
|
||||
<Zdxsfl></Zdxsfl>
|
||||
</div>
|
||||
</div>
|
||||
<div class="model">
|
||||
<div class="modelTitle">指令次数</div>
|
||||
<div class="cnt">
|
||||
<Zlcs></Zlcs>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="contant-right aside"></div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
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 } from 'vue';
|
||||
const searchConfiger = reactive([
|
||||
{ label: "所属部门", prop: 'ssbmdm', placeholder: "请输入所属部门", showType: "department" },
|
||||
{ label: "内容关键字", prop: 'xsNr', placeholder: "请输入语义关键字", showType: "input" },
|
||||
{ label: "线索类型", prop: 'xlLx', placeholder: "请选择线索类型", showType: "select"},
|
||||
{ label: "线索来源", prop: 'qbLy', placeholder: "请选择线索来源", showType: "select"},
|
||||
{ label: "指向地点", prop: 'zxdz', placeholder: "请输入指向地点", showType: "input" },
|
||||
import { reactive, ref } from "vue";
|
||||
const emits = defineEmits(['close'])
|
||||
const listQuery = ref({});
|
||||
const active = ref(0);
|
||||
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: "jfdw",
|
||||
placeholder: "请选择",
|
||||
showType: "select"
|
||||
},
|
||||
{
|
||||
label: "行为特征",
|
||||
prop: "xwtz",
|
||||
placeholder: "请选择",
|
||||
showType: "select"
|
||||
},
|
||||
{ label: "指向地点", prop: "zxdz", placeholder: "请输入", showType: "input" },
|
||||
{
|
||||
label: "事件诱因类型",
|
||||
prop: "yxlx",
|
||||
placeholder: "请选择",
|
||||
showType: "select"
|
||||
},
|
||||
{ label: "诉求类型", prop: "sqlx", placeholder: "请选择", showType: "select" }
|
||||
]);
|
||||
|
||||
// 关闭
|
||||
function close(){
|
||||
emits('close')
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.container{
|
||||
.container {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: #fff;
|
||||
background: rgb(232, 237, 246);
|
||||
color: #333;
|
||||
padding: 10px;
|
||||
box-sizing: border-box;
|
||||
.header{
|
||||
|
||||
.header {
|
||||
height: 60px;
|
||||
font-size: 30px;
|
||||
font-weight: 600;
|
||||
background: #fff;
|
||||
padding: 0 15px;
|
||||
box-sizing: border-box;
|
||||
border-radius: 4px;
|
||||
}
|
||||
.seachsBox{
|
||||
|
||||
.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{
|
||||
position: relative;
|
||||
height: calc(100% - 65px);
|
||||
|
||||
.contant {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
width: 100%;
|
||||
height: calc(100% - 160px);
|
||||
overflow: hidden;
|
||||
overflow-y: auto;
|
||||
.aside{
|
||||
position: absolute;
|
||||
width: 400px;
|
||||
.aside {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 450px;
|
||||
height: 100%;
|
||||
top: 0;
|
||||
background: red;
|
||||
.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;
|
||||
}
|
||||
}
|
||||
}
|
||||
.contant-left{
|
||||
left: 0;
|
||||
}
|
||||
.contant-right{
|
||||
right: 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>
|
||||
Reference in New Issue
Block a user