<template>
<!-- 预警信息 -->
<div class="warningContent">
<div class="warningTitle" @click="showAll">
<el-tooltip
class="item"
effect="dark"
content="点击展示全部预警信息"
placement="top"
>
<span>预警信息</span>
</el-tooltip>
<span>(</span><span>{{ warningList.length == 4 ? "0" : numberAll }}</span
><span>)</span>
</div>
<!-- 全部列表弹框 -->
<div class="quanbuAll" v-if="isShowAll">
<div class="quanTitle">
<div class="titleName">预警信息</div>
<ul class="quanTitle_ul">
<!-- <li v-for="(item,index) in titleList" :key="index">{{item.name}}</li> -->
<li :class="{ activeLi: showUlLiIndex == 0 }" @click="clickYuJing(0)">
全部预警<span>(</span><span>{{ numberAll }}</span
><span>)</span>
</li>
<li :class="{ activeLi: showUlLiIndex == 1 }" @click="clickYuJing(1)">
天气预警<span>(</span><span>{{ numberTQ }}</span
><span>)</span>
</li>
<li :class="{ activeLi: showUlLiIndex == 2 }" @click="clickYuJing(2)">
建筑评分预警<span>(</span><span>{{ numberJZ }}</span
><span>)</span>
</li>
</ul>
<div class="shutImg" @click="handleClose">
<img src="@/assets/secondPage/shut.png" alt="" />
</div>
</div>
<div class="quanbuContent">
<div
class="rdyqlistItemFa"
v-for="(item, index) in warningList"
:key="index"
@click="handleMouserOver(item)"
>
<div class="quanbuNumber">{{ index + 1 }}</div>
<img src="../../assets/image/rightImage/warning/yujing_icon.png" />
<div class="warningSub2">
{{
item.html
? item.html
: `${item.buildingName}消防安全综合评分下降${item.scoreV1Diff}分，请及时关注`
}}
</div>
<!-- <div class="quanDetail">详情</div> -->
</div>
</div>
</div>
<ul class="warningCont">
<marquee
:scrollamount="warningList.length > 3 ? 1.5 : 0"
direction="up"
Align="Middle"
Behaviour="Scroll"
onMouseOver="this.stop()"
onMouseOut="this.start()"
>
<li
v-for="(item, index) in warningList"
:key="index"
@click="handleMouserOver(item)"
>
<img src="../../assets/image/rightImage/warning/yujing_icon.png" />
<div class="warningSub">
{{
item.html
? item.html
: `${item.buildingName}消防安全综合评分下降${item.scoreV1Diff}分，请及时关注`
}}
</div>
</li>
</marquee>
</ul>
<div class="warningDetaile" v-if="isShowWarningDetail">
<div class="shut" @click="handleShut">
<img src="../../assets/image/rightImage/shut.png" />
</div>
<div
class="stateImg"
v-if="warningDetaile.name == item.name"
v-for="(item, index) in warningImg"
:key="index"
>
<img :src="item.img" />
</div>
<div style="font-size: 20px">{{ warningDetaile.fbsj }}</div>
<div style="font-size: 20px">
{{ warningDetaile.name }}<span>(</span
><span>{{ warningDetaile.fbtype }}</span
><span>)</span>
</div>
<div class="warningContHtml">
{{ warningDetaile.html }}
</div>
<div style="font-size: 20px">防御指引:</div>
<div class="subwarningDetaile">
<div>
{{ warningDetaile.fyzy }}
</div>
</div>
</div>
<!-- 建筑评分预警弹框 -->
<div class="warningBuidingDetaile" v-if="showScoreWarning">
<div class="shut" @click="handleShutScore">
<img src="../../assets/image/rightImage/shut.png" />
</div>
<div class="title">
{{ `${buildingName}消防安全综合评分下降${scoreV1Diff}分，请及时关注` }}
</div>
<div class="tableCont">
<div class="tableContHead">
<div></div>
<div>上次评分</div>
<div>本次评分</div>
</div>
<div class="tableLi">
<div>消防综合</div>
<div style="color: #eabb00">{{ leftScore }}</div>
<div style="color: #eabb00">{{ rightScore }}</div>
</div>
<div class="tableLi2">
<div class="tableItemO">消防安全</div>
<div class="tableItemOne">
<div class="scoreCont">
<div
class="SubscoreCont"
v-for="(item, index) in leftData"
:key="index"
>
<span>{{ item.itemName }}</span
><span>: </span
><span style="color: #eabb00"> {{ item.scoreV2 }}</span>
</div>
</div>
</div>
<div class="tableItemTwo">
<div class="scoreCont">
<div
class="SubscoreCont"
v-for="(item, index) in rightData"
:key="index"
>
<span>{{ item.itemName }}</span
><span>: </span
><span style="color: #eabb00"> {{ item.scoreV2 }}</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
import {
getHistoryWarningInfo,
getFireIotScoreLogBoApi,
getFireIotScoreLogBoByBuildingIdApi,
} from "../../api/rightApi";
export default {
data() {
return {
warningDetaile: {},
isShowWarningDetail: false, // 详情默认隐藏，鼠标移入显示
showScoreWarning: false, // 建筑评分预警
isShowAll: false, // 全部预警列表
scoreWarning: [], // 建筑评分预警项
leftScore: "",
rightScore: "",
buildingName: "",
scoreV1Diff: "",
numberAll: "",
numberTQ: "",
numberJZ: "",
showUlLiIndex: 0,
titleList: [
{
name: "全部预警",
},
{
name: "天气预警",
},
{
name: "建筑评分预警",
},
],
leftData: [
{
name: "消防设施状态运行",
score: 20,
},
{
name: "消防管理",
score: 35,
},
{
name: "消防设施维护保养",
score: 15,
},
{
name: "灭火救援能力",
score: 5,
},
{
name: "消防监督检查情况",
score: 5,
},
{
name: "火灾发生情况",
score: 10,
},
],
rightData: [
{
name: "消防设施状态运行",
score: 10,
},
{
name: "消防管理",
score: 35,
},
{
name: "消防设施维护保养",
score: 15,
},
{
name: "灭火救援能力",
score: 12,
},
{
name: "消防监督检查情况",
score: 5,
},
{
name: "火灾发生情况",
score: 10,
},
],
warningList: [
{
html: "高温黄色预警：预计未来连续三天我市将出现35℃以上的高温天气",
},
{
html: "雷电黄色预警：预计未来6小时我市城区有雷电活动",
},
{
html: "高温黄色预警：预计未来连续三天我市将出现35℃以上的高温天气",
},
{
html: "雷电黄色预警：预计未来6小时我市城区有雷电活动",
},
],
warningImg: [
{
name: "高温黄色",
img: require("../../assets/image/rightImage/warningEn/gaowenhuang.png"),
},
{
name: "高温红色",
img: require("../../assets/image/rightImage/warningEn/gaowenhong.png"),
},
{
name: "高温橙色",
img: require("../../assets/image/rightImage/warningEn/gaowencehng.png"),
},
{
name: "雷电黄色",
img: require("../../assets/image/rightImage/warningEn/leidianhuang.png"),
},
{
name: "雷电红色",
img: require("../../assets/image/rightImage/warningEn/leidianhong.png"),
},
{
name: "雷电橙色",
img: require("../../assets/image/rightImage/warningEn/leidiancheng.png"),
},
{
name: "大风黄色",
img: require("../../assets/image/rightImage/warningEn/dafenghunag.png"),
},
{
name: "大风蓝色",
img: require("../../assets/image/rightImage/warningEn/dafenglan.png"),
},
{
name: "大风红色",
img: require("../../assets/image/rightImage/warningEn/dafenghong.png"),
},
{
name: "大风橙色",
img: require("../../assets/image/rightImage/warningEn/dafengcheng.png"),
},
{
name: "暴雨黄色",
img: require("../../assets/image/rightImage/warningEn/baoyuhuang.png"),
},
{
name: "暴雨红色",
img: require("../../assets/image/rightImage/warningEn/baoyuhong.png"),
},
{
name: "暴雨蓝色",
img: require("../../assets/image/rightImage/warningEn/baoyulan.png"),
},
{
name: "台风蓝色",
img: require("../../assets/image/rightImage/warningEn/taifenglan.png"),
},
{
name: "台风黄色",
img: require("../../assets/image/rightImage/warningEn/taifenghuang.png"),
},
{
name: "台风红色",
img: require("../../assets/image/rightImage/warningEn/taifenghong.png"),
},
{
name: "台风橙色",
img: require("../../assets/image/rightImage/warningEn/taifengcheng.png"),
},
],
};
},
created() {
this.getHistoryWarningInfo();
this.getHistoryWarningInfo2();
// this.getFireIotScoreLogBoApi2(); // 初始化不单独调用建筑评分接口
setInterval(() => {
this.getHistoryWarningInfo();
}, 5 * 60 * 1000);
},
mounted() {
this.$emit("showWarningInformation", this.warningList.length);
this.$Bus.$on("closeShowWarningDetail", () => {
// this.isShowWarningDetail = false;
this.isShowAll = false;
this.isShowWarningDetail = false;
this.showScoreWarning = false;
});
},
methods: {
handleMouserOver(item) {
this.$Bus.$emit("closeToday_JQ"); // 关闭今日警情
if (item.html) {
// 天气预警详情弹框
this.isShowWarningDetail = true;
this.showScoreWarning = false;
this.warningDetaile = item;
} else {
// 建筑评分预警详情弹框
this.isShowWarningDetail = false;
this.showScoreWarning = true;
this.buildingName = item.buildingName;
this.scoreV1Diff = item.scoreV1Diff;
this.getFireIotScoreLogBoByBuildingIdApi(item.buildingId);
}
},
async getHistoryWarningInfo() {
await this.getFireIotScoreLogBoApi();
getHistoryWarningInfo({ fbDw: "上海中心气象台" }).then((res) => {
this.warningList = [];
if (res.status == 200) {
this.warningList = res.data.data;
this.warningList = this.warningList.concat(this.scoreWarning);
this.numberAll = this.warningList.length;
}
});
},
// 联合天气调用 建筑评分预警
async getFireIotScoreLogBoApi() {
await getFireIotScoreLogBoApi().then((res) => {
this.scoreWarning = [];
if (res.data.code == 200) {
res.data.data.forEach((v) => {
if (v.scoreV1Trend == "fall" && v.scoreV1Diff >= 1) {
this.scoreWarning.push(v);
}
});
this.numberJZ = this.scoreWarning.length;
}
});
},
// 单独调用天气预警
getHistoryWarningInfo2() {
getHistoryWarningInfo({ fbDw: "上海中心气象台" }).then((res) => {
this.warningList = [];
this.scoreWarning = [];
if (res.status == 200) {
this.warningList = res.data.data;
this.numberTQ = this.warningList.length;
}
});
},
// 单独调用建筑评分预警2
async getFireIotScoreLogBoApi2() {
// this.scoreWarning = []; // error
await getFireIotScoreLogBoApi().then((res) => {
this.scoreWarning = [];
if (res.data.code == 200) {
res.data.data.forEach((v) => {
if (v.scoreV1Trend == "fall" && v.scoreV1Diff >= 1) {
this.scoreWarning.push(v);
}
});
// this.scoreWarning = Array.from(new Set(this.scoreWarning));
this.numberJZ = this.scoreWarning.length;
this.warningList = this.scoreWarning;
}
});
},
// 评分详情弹框数据
getFireIotScoreLogBoByBuildingIdApi(id) {
getFireIotScoreLogBoByBuildingIdApi(id).then((res) => {
if (res.data.code == 200) {
this.leftScore = res.data.dataJson.left.score;
this.rightScore = res.data.dataJson.right.score;
this.leftData = res.data.dataJson.left.buildingList;
this.rightData = res.data.dataJson.right.buildingList;
}
});
},
showAll() {
this.isShowAll = true;
this.showUlLiIndex = 0;
this.$Bus.$emit("closeToday_JQ"); // 关闭今日警情
},
handleClose() {
this.isShowAll = false;
this.isShowWarningDetail = false;
this.showScoreWarning = false;
this.getHistoryWarningInfo();
},
handleShut() {
this.isShowWarningDetail = false;
},
handleShutScore() {
this.showScoreWarning = false;
},
clickYuJing(index) {
this.showUlLiIndex = index;
switch (index) {
case 0:
// 全部预警
this.getHistoryWarningInfo();
break;
case 1:
// 天气预警
this.getHistoryWarningInfo2();
break;
case 2:
// 建筑评分预警
this.getFireIotScoreLogBoApi2();
break;
}
},
},
};
</script>
<style lang="less" scoped>
.warningContent {
width: 720px;
height: 150px;
// opacity: 0.85;
opacity: 1;
background: #003a5f;
border: 1px solid #00fcff;
border-radius: 8px;
box-sizing: border-box;
padding: 10px 20px;
position: absolute;
top: 15px;
left: 150px;
.warningTitle {
font-size: 20px;
font-family: Source Han Sans CN, Source Han Sans CN-Bold;
font-weight: 700;
margin-bottom: 5px;
color: #ff6f00;
cursor: pointer;
}
.warningCont {
height: 100px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: flex-start;
overflow-x: hidden;
overflow-y: scroll;
color: #ff6f00;
li {
width: 680px;
height: 30px;
line-height: 30px;
list-style: none;
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: center;
font-size: 18px;
cursor: pointer;
.warningSub {
margin-left: 20px;
white-space: nowrap;
text-overflow: ellipsis;
overflow-x: hidden;
}
}
}
.warningCont::-webkit-scrollbar {
/*滚动条整体样式*/
width: 5px; /*高宽分别对应横竖滚动条的尺寸*/
height: 5px;
}
.warningCont::-webkit-scrollbar-thumb {
border-radius: 10px;
width: 1px;
background: #05cff3;
}
.warningBuidingDetaile {
position: absolute;
// top: 165px;
// left: 20px;
top: -2px;
left: 729px;
width: 686px;
height: 448px;
background: #041c31;
border: 1px solid #00bbff;
border-radius: 5px;
box-shadow: rgb(0, 187, 255) 0px 0px 32px inset !important;
box-sizing: border-box;
padding: 30px 20px;
font-size: 18px;
color: #fff !important;
z-index: 999;
.shut {
width: 32px;
height: 32px;
position: absolute;
top: 20px;
right: 20px;
cursor: pointer;
}
.title {
width: 560px;
margin-left: 30px;
}
.tableCont {
width: 650px;
height: 325px;
margin-top: 20px;
border: 1px solid #004f82;
.tableContHead {
height: 40px;
line-height: 40px;
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
background: #033b6e;
text-align: center;
div:nth-of-type(1) {
width: 20%;
}
div:nth-of-type(2) {
width: 40%;
border-left: 1px solid #004f82;
border-right: 1px solid #004f82;
}
div:nth-of-type(3) {
width: 40%;
}
}
.tableLi {
height: 40px;
line-height: 40px;
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
// background: #033B6E;
text-align: center;
// padding-top: 15px;
div:nth-of-type(1) {
width: 20%;
}
div:nth-of-type(2) {
width: 40%;
border-left: 1px solid #004f82;
border-right: 1px solid #004f82;
}
div:nth-of-type(3) {
width: 40%;
}
}
.tableLi2 {
height: 40px;
line-height: 40px;
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
// background: #033B6E;
text-align: center;
.tableItemO {
width: 19.8%;
height: 245px;
line-height: 245px;
margin-top: 203px;
border: 1px solid #004f82;
border-left: none;
border-bottom: none;
}
.tableItemOne {
width: 40%;
height: 245px;
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
margin-right: -1px;
.score {
width: 20%;
height: 245px;
line-height: 245px;
margin-top: 203px;
border: 1px solid #004f82;
border-left: none;
border-right: none;
border-bottom: none;
}
.scoreCont {
width: 92%;
height: 245px;
border: 1px solid #004f82;
margin-top: 203px;
padding-left: 20px;
border-bottom: none;
border-left: none;
border-right: none;
.SubscoreCont {
font-size: 16px;
text-align: left;
padding-left: 20px;
margin-left: -20px;
}
.SubscoreCont:nth-child(2n + 1) {
background: #042645;
}
}
}
.tableItemTwo {
width: 40%;
height: 245px;
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
.score {
width: 20%;
height: 245px;
line-height: 245px;
margin-top: 203px;
border: 1px solid #004f82;
border-left: none;
border-right: none;
border-bottom: none;
}
.scoreCont {
width: 92%;
height: 245px;
border: 1px solid #004f82;
margin-top: 203px;
padding-left: 20px;
border-bottom: none;
.SubscoreCont {
font-size: 16px;
text-align: left;
padding-left: 20px;
margin-left: -20px;
}
.SubscoreCont:nth-child(2n + 1) {
background: #042645;
}
}
}
}
}
}
.warningDetaile {
position: absolute;
// top: 165px;
// left: 120px;
top: -2px;
left: 729px;
width: 512px;
height: 372px;
// opacity: 0.9;
background: #041c31;
border: 1px solid #00bbff;
border-radius: 5px;
box-shadow: rgb(0, 187, 255) 0px 0px 32px inset !important;
box-sizing: border-box;
padding: 30px 20px;
font-size: 18px;
color: #fff !important;
z-index: 999;
.warningContHtml {
height: 80px;
overflow-y: scroll;
overflow-x: hidden;
}
.warningContHtml::-webkit-scrollbar {
/*滚动条整体样式*/
width: 5px; /*高宽分别对应横竖滚动条的尺寸*/
height: 20px;
}
.warningContHtml::-webkit-scrollbar-thumb {
border-radius: 10px;
width: 1px;
background: #05cff3;
}
.shut {
width: 32px;
height: 32px;
position: absolute;
top: 20px;
right: 20px;
cursor: pointer;
}
.stateImg {
img {
width: 88px;
height: 74px;
}
}
.subwarningDetaile {
height: 90px;
overflow-y: scroll;
overflow-x: hidden;
}
.subwarningDetaile::-webkit-scrollbar {
/*滚动条整体样式*/
width: 5px; /*高宽分别对应横竖滚动条的尺寸*/
height: 5px;
}
.subwarningDetaile::-webkit-scrollbar-thumb {
border-radius: 10px;
width: 1px;
background: #05cff3;
}
}
.quanbuAll {
width: 723px;
height: 400px;
background: #041c31;
border: 1px solid #00bbff;
border-radius: 5px;
opacity: 1;
position: absolute;
// top: -3px;
// left: 729px;
// top: 165px;
top: -3px;
left: -2px;
z-index: 999;
box-sizing: border-box;
padding: 15px;
box-shadow: rgb(0, 187, 255) 0px 0px 32px inset !important;
.quanTitle {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
margin-bottom: 10px;
.quanTitle_ul {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
margin-top: -8px;
li {
height: 30px;
// line-height: 30px;
background-color: #112842;
color: #9e9e9e;
box-sizing: border-box;
padding: 5px 10px;
margin: 0 10px;
cursor: pointer;
}
.activeLi {
color: #67e3ec;
box-shadow: rgb(0, 187, 255) 0px 0px 10px inset !important;
}
}
.titleName {
font-size: 20px;
font-family: SourceHanSansCN, SourceHanSansCN-Medium;
font-weight: 500;
color: #94c5ff;
margin-bottom: 10px;
}
}
.quanbuContent {
width: 700px;
height: 315px;
overflow-x: hidden;
overflow-y: scroll;
.rdyqlistItemFa {
width: 700px;
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: center;
cursor: pointer;
.warningSub2 {
width: 650px;
margin-left: 10px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.quanbuNumber {
// width: 30px;
min-width: 20px;
height: 20px;
line-height: 20px;
text-align: center;
font-size: 16px;
color: #fff;
// background: #3ef2ff;
background: #034768;
border-radius: 5px;
padding: 3px;
margin: 5px;
margin-right: 10px;
}
.quanDetail {
width: 60px;
height: 30px;
text-align: center;
line-height: 22px;
color: #58e3ec;
border: 2px solid #58e3ec;
border-radius: 15px;
box-sizing: border-box;
padding: 3px;
margin: 7px;
margin-right: 10px;
cursor: pointer;
}
// .rdyqlistItem2 {
// width: 85%;
// height: 36px;
// line-height: 36px;
// overflow: hidden;
// cursor: pointer;
// white-space: nowrap;
// text-overflow: ellipsis;
// padding: 0 5px;
// // background: rgba(44, 162, 219, 0.4) !important;
// }
// .rdyqlistItem2:nth-of-type(2n) {
// background: transparent;
// // background: rgba(44, 162, 219, 0.4);
// }
// .rdyqlistItem2:nth-of-type(2n + 1) {
// background: rgba(44, 162, 219, 0.4);
// }
}
}
.quanbuContent::-webkit-scrollbar {
/*滚动条整体样式*/
width: 5px; /*高宽分别对应横竖滚动条的尺寸*/
height: 20px;
}
.quanbuContent::-webkit-scrollbar-thumb {
border-radius: 10px;
width: 5px;
height: 100px;
background: #05cff3;
}
}
}
</style>
