ba_web/src/views/homeMy/modelDialog/warningCenter.vue

<template>
    <el-dialog top="0px" width="100%" v-model="props.visibleDialog" destroy-on-close :show-close="false" :close-on-click-modal="false" custom-class="zdy-dialog">
        <template #title>
        <div class="my-header">
            <div class="left">
                <span>预警中心</span>
                <Search :searchArr="searchArr" @submit="onSearch"></Search>
            </div>
            <el-icon color="#23c3f3" @click="closeDialog"><Close/></el-icon>
        </div>
        </template>
        <div class="contant-dialog">
            <div class="dialogItem">
                <div class="it-title">预警统计</div>
                <div class="it-cnt"> <WarningStatistics :data="dateQuery" /> </div>
            </div>
            <div class="dialogItem">
                <div class="it-title">各时段预警</div>
                <div class="it-cnt"><LineChart :data="dateQuery" /></div>
            </div>
            <div class="dialogItem">
                <div class="it-title">感知源预警排名</div>
                <div class="it-cnt"><Ranking :data="dateQuery" /></div>
            </div>
            <div class="dialogItem">
                <div class="it-title">人员预警排名</div>
                <div class="it-cnt"><PeopleRanking :data="dateQuery" /></div>
            </div>
        </div>
    </el-dialog>
</template>

<script setup>
import Search from "@/components/aboutTable/Search.vue";
import WarningStatistics from  './components/warningStatistics.vue'
import LineChart from  './components/lineChart.vue'
import Ranking from  './components/ranking.vue'
import PeopleRanking from  './components/peopleRanking.vue'
import { ref ,defineProps,defineEmits,reactive} from 'vue'
const emits = defineEmits(["update:modelValue",'closeDialog']);
const props = defineProps({
    visibleDialog:Boolean
})
const searchArr = reactive([
  {
    showType: "datetimerange",
    prop: "timerange",
    rangeSeparator:'至',
    startPlaceholder:'请选择开始时间',
    endPlaceholder:'请选择结束时间',
    label:'时间'
  },
  {
    showType: "department",
    prop: "ssbmdm",
    label:'所属部门'
  },
]);
const dateQuery = ref({}) //搜索
// 搜索
function onSearch(val) {
  dateQuery.value.kssj = val.timerange ? val.timerange[0] :'';
  dateQuery.value.jssj = val.timerange ? val.timerange[1] :'';
  dateQuery.value.ssbmdm = val.ssbmdm || '';
}

// 關閉
function closeDialog(params) {
    emits('update:modelValue',false)
    emits('closeDialog',false)
}
</script>

<style lang="scss" scoped>

.my-header{
    background: url('~@/assets/images/add-title.png') no-repeat center center;
    background-size: 100% 100%;
    display: flex;
    justify-content: space-between;
    height: 80px;
    align-items: center;
    padding: 0 10px 0 20px;
    box-sizing: border-box;
    font-size: 30px;
    .left{
        display: flex;
        align-items: center;
        span{
            font-family: "HANYILINGXINTIJIAN";
        }
    }
}
.contant-dialog{
    height: calc(100vh - 80px);
    overflow: hidden;
    overflow-y: auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    padding: 10px 20px;
    box-sizing: border-box;
    .dialogItem{
        width: 49.5%;
        height: calc(50% - 10px );
        margin-top: 10px;
        .it-title{
            height: 47px;
            line-height: 47px;
            padding-left: 20px;
            font-size: 20px;
            background: url('~@/assets/images/add-title11.png') no-repeat center center;
            background-size: 100% 100%;
            font-family: 'DigifaceWide';
        }
        .it-cnt{
            height: calc(100% - 47px);
            box-sizing: 10px;
            box-sizing: border-box;
            background: #052342;
            position: relative;
            &::after {
                content: "";
                position: absolute;
                bottom: -1px;
                left: -1px;
                width: 10px;
                height: 10px;
                border: solid #6fb2ff;
                border-width: 0 0 2px 2px;
            }

            &::before {
                content: "";
                position: absolute;
                bottom: -1px;
                right: -1px;
                width: 10px;
                height: 10px;
                border: solid #6fb2ff;
                border-width: 0 2px 2px 0;
            }
        }
    }
    .dialogItem:nth-child(2n){
        margin-left: 1%;
    }
}
::v-deep .el-input__inner{
  background-color:transparent;
  border:1px solid #68d0ff;
}
::v-deep .el-date-editor .el-range-input{
  background-color:transparent;
  color:#fff;
}
::v-deep .el-date-editor .el-range-separator{
  color:#e9e9e9;
}

</style>

<style>
.zdy-dialog .el-dialog__body{
    padding: 0 !important;;
}
.zdy-dialog .el-dialog__header{
    padding: 0 !important;
}
.zdy-dialog{
    margin: 0 !important;
}
.searchBox::after{
    content: none;
}
.searchBox::before{
    content: none;
}

</style>