sgxt_web/src/views/backOfficeSystem/ResearchJudgment/IntelligenceManagement/qbypfx/index.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">
                <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>
</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 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 {
    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>