378 lines
9.0 KiB
Vue
378 lines
9.0 KiB
Vue
<template>
|
|
<div class="list-detail" v-if="showDialog && mapsDetail.length == 0">
|
|
<div
|
|
:class="postData.type == 1 ? 'dialog-content' : postData.type == 2 ? 'dialog-content-show' : 'dialog-content-more'"
|
|
:style="
|
|
postData.index == 98
|
|
? { left: '5%', width: '90%', top: '5%', height: '90%' }
|
|
: postData.index == 9
|
|
? { left: '10%', top: '10%', width: '80%', height: '70%' }
|
|
: {}
|
|
"
|
|
>
|
|
<div class="dialog-title">
|
|
<!-- <div class="title-img"><img src="@/assets/images/titleIcon.png" alt="" /></div> -->
|
|
<div class="title-text" :class="{ flex: showIndex == 7 }">
|
|
<i>{{ postData.title }}</i>
|
|
<div class="title-tabs" v-if="showIndex == 7">
|
|
<div
|
|
:class="{ 'title-color': item.enumType == tableTabInfo.tableTabActive }"
|
|
v-for="item in tableTabInfo.tableTabs"
|
|
:key="item.enumType"
|
|
@click="onClickTab(item)"
|
|
>
|
|
{{ item.tabName }}
|
|
</div>
|
|
<!-- <div>较大</div>
|
|
<div>一般</div>
|
|
<div>低</div> -->
|
|
</div>
|
|
</div>
|
|
<div class="close-icon" @click="closeDialog">
|
|
<el-icon>
|
|
<Close />
|
|
</el-icon>
|
|
</div>
|
|
</div>
|
|
<div class="political-outlook" v-if="showIndex == 1">
|
|
<memberCountList ref="historyAlarmList" :tip="postData.tip"></memberCountList>
|
|
</div>
|
|
<div class="political-outlook" v-if="showIndex == 2">
|
|
<safeInfo ref="historyAlarmList" tip="安全教育"></safeInfo>
|
|
</div>
|
|
<div class="political-outlook" v-if="showIndex == 3">
|
|
<weatherInfo ref="historyAlarmList" tip="安全教育"></weatherInfo>
|
|
</div>
|
|
<div class="political-outlook" v-if="showIndex == 4">
|
|
<riskCount ref="historyAlarmList" tip="安全教育"></riskCount>
|
|
</div>
|
|
<div class="political-outlook" v-if="showIndex == 5">
|
|
<safeHidden ref="historyAlarmList" tip="安全教育"></safeHidden>
|
|
</div>
|
|
<div class="political-outlook" v-if="showIndex == 99">
|
|
<qualityManage ref="historyAlarmList" tip="安全教育"></qualityManage>
|
|
</div>
|
|
<!-- 人员总览 -->
|
|
<!-- <div class="political-outlook" v-if="showIndex == 98">
|
|
<personOverview ref="historyAlarmList" tip="安全教育"></personOverview>
|
|
</div> -->
|
|
<div class="political-outlook" v-if="showIndex == 6">
|
|
<aiAlarm ref="historyAlarmList" tip="安全教育"></aiAlarm>
|
|
</div>
|
|
<div class="political-outlook" v-if="showIndex == 7">
|
|
<majorHidder ref="historyAlarmList" :majorInfo="majorInfo" :tip="'重大隐患未销项目'"></majorHidder>
|
|
</div>
|
|
<div class="political-outlook" v-if="showIndex == 8">
|
|
<safeEducationDialog ref="historyAlarmList" tip="安全教育"></safeEducationDialog>
|
|
</div>
|
|
<div class="political-outlook" v-if="showIndex == 9">
|
|
<monthSafeScore ref="historyAlarmList" tip="月度安全综合评分"></monthSafeScore>
|
|
</div>
|
|
<div class="political-outlook" v-if="showIndex == 11">
|
|
<radarMapList ref="historyAlarmList" :randerDetail="postData" :tip="postData.title"></radarMapList>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div v-else-if="showIndex == 10">
|
|
<div class="list-detail" v-for="ele in mapsDetail.filter((option: any) => option.show)" :key="ele.id">
|
|
<div :class="postData.type == 1 ? 'dialog-content' : postData.type == 2 ? 'dialog-content-show' : 'dialog-content-more'">
|
|
<div class="warning-bg"></div>
|
|
<div class="dialog-title">
|
|
<!-- <div class="title-img"><img src="@/assets/images/titleIcon.png" alt="" /></div> -->
|
|
<div class="title-text">
|
|
<i>{{ ele.title }}</i>
|
|
</div>
|
|
<div class="title-time">
|
|
{{ timeOutUp(ele) }}
|
|
</div>
|
|
<div class="close-icon" @click.stop="closeDialog1(ele.id)">
|
|
<el-icon>
|
|
<Close />
|
|
</el-icon>
|
|
</div>
|
|
</div>
|
|
<div class="political-outlook">
|
|
<myMap :mapsDetail="ele" :key="ele.id" :tip="ele.title"></myMap>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script lang="ts" setup>
|
|
import { ref, onMounted, reactive, computed } from "vue";
|
|
import memberCountList from "./member-count-list.vue";
|
|
import safeInfo from "./safe-info.vue";
|
|
import weatherInfo from "./weather-info.vue";
|
|
import riskCount from "./risk-count.vue";
|
|
import safeHidden from "./safe-hidden.vue";
|
|
import qualityManage from "./quality-manage.vue";
|
|
import personOverview from "./person-overview.vue";
|
|
import aiAlarm from "./ai-alarm.vue";
|
|
import safeEducationDialog from "./safe-education-dialog.vue";
|
|
import majorHidder from "./major-hidder.vue";
|
|
import monthSafeScore from "./month-safe-score.vue";
|
|
import myMap from "./my-map.vue";
|
|
import radarMapList from "./radar-map-list.vue";
|
|
import { log } from "console";
|
|
|
|
// import { GlobalStore } from "@/stores";
|
|
let showDialog = ref(false as any);
|
|
const showIndex = ref(0);
|
|
const postData = ref({} as any);
|
|
// let dialogTitle = ref("危大工程" as any);
|
|
const majorInfo = ref({} as any);
|
|
const mapsDetail = ref([] as any);
|
|
const tableTabInfo = reactive({
|
|
tableTabs: [
|
|
{
|
|
tabName: "重大",
|
|
enumType: "1"
|
|
},
|
|
{
|
|
tabName: "较大",
|
|
enumType: "2"
|
|
},
|
|
{
|
|
tabName: "一般",
|
|
enumType: "3"
|
|
},
|
|
{
|
|
tabName: "低",
|
|
enumType: "4"
|
|
}
|
|
],
|
|
tableTabActive: "1"
|
|
});
|
|
const onClickTab = (item: any) => {
|
|
majorInfo.value.enumType = item.enumType;
|
|
tableTabInfo.tableTabActive = item.enumType;
|
|
};
|
|
|
|
const closeDialog = () => {
|
|
showDialog.value = false;
|
|
postData.value = {};
|
|
};
|
|
const closeDialog1 = (id: string) => {
|
|
// const findIndex = mapsDetail.value.findIndex((item: any) => item.id == id);
|
|
// if (findIndex > -1) {
|
|
// mapsDetail.value.splice(findIndex, 1);
|
|
// }
|
|
const find = mapsDetail.value.find((item: any) => item.id == id);
|
|
if (find) {
|
|
find.show = false;
|
|
}
|
|
if (mapsDetail.value.filter((item: any) => item.show).length == 0) {
|
|
showDialog.value = false;
|
|
postData.value = {};
|
|
mapsDetail.value = [];
|
|
}
|
|
};
|
|
function openDialog(obj: any) {
|
|
postData.value = obj;
|
|
showIndex.value = obj.index;
|
|
if (obj.index == 7) {
|
|
majorInfo.value = {
|
|
...obj.majorInfo,
|
|
title: obj.title,
|
|
enumType: tableTabInfo.tableTabActive
|
|
};
|
|
}
|
|
if (obj.index == 10) {
|
|
mapsDetail.value.push({
|
|
...obj.mapsDetail,
|
|
timeOut: obj.timeOut,
|
|
title: obj.title,
|
|
show: obj.show
|
|
});
|
|
}
|
|
showDialog.value = true;
|
|
}
|
|
|
|
const timeOutUp = computed(() => {
|
|
return (ele: any) => {
|
|
if (ele.timeOut <= 0) {
|
|
closeDialog1(ele.id);
|
|
return;
|
|
}
|
|
ele.timeFlag = setTimeout(() => {
|
|
if (ele.timeFlag) {
|
|
clearTimeout(ele.timeFlag);
|
|
}
|
|
const find = mapsDetail.value.find((item: any) => item.id == ele.id);
|
|
if (find) {
|
|
find.timeOut--;
|
|
}
|
|
}, 1000);
|
|
|
|
return ele.timeOut;
|
|
};
|
|
});
|
|
|
|
// 暴露给父组件的参数和方法(外部需要什么，都可以从这里暴露出去)
|
|
defineExpose({
|
|
openDialog
|
|
});
|
|
|
|
onMounted(async () => {});
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.warning-bg {
|
|
width: 200px;
|
|
height: 200px;
|
|
background-image: url(@/assets/images/warning.gif);
|
|
background-repeat: no-repeat;
|
|
background-size: 100% 100%;
|
|
position: absolute;
|
|
top: -190px;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
}
|
|
.flex {
|
|
display: -webkit-box;
|
|
}
|
|
|
|
.title-tabs {
|
|
display: flex;
|
|
align-items: center;
|
|
margin-left: 4%;
|
|
|
|
> div {
|
|
width: 60px;
|
|
text-align: center;
|
|
background-color: #315296;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.title-color {
|
|
background-color: #1449b6;
|
|
}
|
|
}
|
|
|
|
.list-detail {
|
|
position: absolute;
|
|
width: 100%;
|
|
height: 100%;
|
|
top: 0%;
|
|
left: 0%;
|
|
background: rgba(7, 28, 49, 0.5);
|
|
z-index: 100;
|
|
|
|
.dialog-content {
|
|
position: absolute;
|
|
box-sizing: border-box;
|
|
padding: 1%;
|
|
left: 15%;
|
|
top: 21%;
|
|
width: 70%;
|
|
height: 60%;
|
|
background: url("@/assets/images/commandScreen/dialog-bg.png") no-repeat;
|
|
background-size: 100% 100%;
|
|
z-index: 21;
|
|
}
|
|
|
|
.dialog-content-show {
|
|
position: absolute;
|
|
box-sizing: border-box;
|
|
padding: 1%;
|
|
left: 15%;
|
|
top: 1%;
|
|
width: 70%;
|
|
height: 98%;
|
|
background: url("@/assets/images/commandScreen/dialog-bg.png") no-repeat;
|
|
background-size: 100% 100%;
|
|
z-index: 21;
|
|
}
|
|
|
|
.dialog-content-more {
|
|
position: absolute;
|
|
box-sizing: border-box;
|
|
padding: 1%;
|
|
left: 15%;
|
|
top: 21%;
|
|
width: 70%;
|
|
height: 60%;
|
|
background: url("@/assets/images/commandScreen/dialog-bg.png") no-repeat;
|
|
background-size: 100% 100%;
|
|
z-index: 21;
|
|
}
|
|
|
|
.dialog-content,
|
|
.dialog-content-show,
|
|
.dialog-content-more {
|
|
padding-top: 50px;
|
|
position: relative;
|
|
|
|
.political-outlook {
|
|
height: 100%;
|
|
}
|
|
|
|
.dialog-article {
|
|
height: 95%;
|
|
}
|
|
|
|
.close-icon {
|
|
// position: absolute;
|
|
// right: 3%;
|
|
// top: 3%;
|
|
cursor: pointer;
|
|
color: #ffffff;
|
|
font-size: 18px;
|
|
}
|
|
|
|
.dialog-title {
|
|
color: #ffffff;
|
|
font-weight: bold;
|
|
font-size: 18px;
|
|
font-family: "OPPOSans-Bold";
|
|
display: flex;
|
|
align-items: center;
|
|
margin: 0 40px;
|
|
|
|
.title-time {
|
|
font-size: 30px;
|
|
color: #f34234;
|
|
position: absolute;
|
|
top: 3%;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
}
|
|
|
|
.title-img {
|
|
width: 3%;
|
|
height: 3%;
|
|
|
|
img {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
}
|
|
|
|
.title-text {
|
|
margin-left: 1%;
|
|
margin-right: auto;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.notoDta {
|
|
top: 73%;
|
|
width: 12%;
|
|
left: 44%;
|
|
position: absolute;
|
|
|
|
img {
|
|
width: 40%;
|
|
margin: 5% 30%;
|
|
}
|
|
|
|
p {
|
|
color: #fff;
|
|
font-size: 14px;
|
|
margin: -6% 37%;
|
|
}
|
|
}
|
|
</style>
|