'保安项目提交'
This commit is contained in:
esacpe
180
src/views/homeMy/modelDialog/warningCenter.vue
Normal file
180
src/views/homeMy/modelDialog/warningCenter.vue
Normal file
@ -0,0 +1,180 @@
|
||||
<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>
|
||||
Reference in New Issue
Block a user