<template>
<!-- 预警回顾 -->
<div class="WarningReview">
<div class="ListBoxHeader">
<div class="ListBoxHeader_font">预警回顾</div>
<div class="ListBoxHeader_Sel">
<div class="tabs flex">
<div
class="tabItem"
v-for="(item, index) in ListBox"
:key="item"
:class="{ active: activedname === item.name }"
@click="Listclick(item, index)"
>
{{ item.name }}
</div>
</div>
</div>
</div>
<div class="Warning_Box" v-if="activedname == '水雨情'">
<div class="flex flex-r button_box_list">
<div
class="button_box flex flex-1 flex-justcontent-center flex-align-center"
v-for="(item, index) in munuList"
:key="index"
:class="[activeIndex == index ? 'activeClass' : '']"
@click="activeIndex = index"
>
{{ item.name }}
</div>
</div>
<div class="Warning_Echarts">
<WarningEcharts :data="chartData1" :refresh="chartData1.refresh1" />
</div>
</div>
<div class="Warning_Box_tp" v-if="activedname == '险情'">
<yhhsqEch :data="YhList" :refresh="ryRefresh3" />
</div>
<div class="Warning_Box_gq" v-if="activedname == '工情'">
<div class="flex flex-justcontent-spacebetween">
<div class="drcpl">
<div class="percent" style="width: 70%">
<div class="round"></div>
<div class="text">当日抽排量</div>
<div class="value">878.9m³</div>
</div>
</div>
<div class="percentVal flex-1">70%</div>
</div>
<div class="info flex flex-justcontent-spacebetween">
<div class="flex">
<div class="circle"></div>
<div>累计抽排量</div>
<div class="value">108.9</div>
<div>万m³</div>
</div>
<div class="flex">
<div class="circle"></div>
<div>前水池水位</div>
<div class="value">8.9</div>
<div>m</div>
</div>
</div>
<div class="StationList flex flex-justcontent-start">
<div class="item" v-for="item in list" :key="item.name">
<div class="img">
<img :src="bengzhanyunxing" alt="" v-if="item.status == 1" />
<img :src="bengzhantingzhi" alt="" v-else />
</div>
<div class="name">{{ item.name }}</div>
</div>
</div>
</div>
</div>
<!-- 监测告警 -->
<div class="MonitoringAlarms">
<div class="ListBoxHeader">
<div class="ListBoxHeader_font">监测告警</div>
</div>
<div class="csyld">
<div class="tabs flex flex-justcontent-spacebetween">
<div class="tabItem">管网报警(8个)</div>
<div class="tabItem">积水报警(2个)</div>
<div class="tabItem">排口告警(1个)</div>
</div>
<div class="table_content">
<div class="tableHeader">
<span class="tableHeaderList tableList1">告警位置</span>
<span class="tableHeaderList tableList2">监测数值</span>
<span class="tableHeaderList tableList3">设防阈值</span>
<span class="tableHeaderList tableList4">告警时间</span>
</div>
<Vue3SeamlessScroll
:list="FXJCData"
:singleHeight="34"
:singleWaitTime="1500"
:hover="true"
class="tableBody"
>
<div class="tableBodyList" v-for="item in FXJCData">
<span class="tableBodyList_span1">{{ item.zb }}</span>
<span class="tableBodyList_span2"> {{ item.zt }}</span>
<span class="tableBodyList_span3">{{ item.szzt }}</span>
<span class="tableBodyList_span4">
{{ item.sz }}
</span>
</div>
</Vue3SeamlessScroll>
</div>
</div>
</div>
<!-- 警情动态 -->
<div class="PoliceSituation">
<div class="ListBoxHeader">
<div class="ListBoxHeader_font">警情动态</div>
<!-- <div class="ListBoxHeader_Sel">
<div class="tabs flex">
<div
class="tabItem"
v-for="(item, index) in ListBoxJq"
:key="item"
:class="{ active: activedJq === item.name }"
@click="ListclickJq(item, index)"
>
{{ item.name }}
</div>
</div>
</div> -->
</div>
<div class="PoliceLisy">
<div class="jqtabs flex flex-justcontent-spacebetween">
<div
class="tabItem flex"
v-for="(item, index) in jqdtList"
:key="index"
:class="{ active: jqdtname === item.name }"
@click="jqdtclick(item, index)"
>
<div class="tabItem_one">
<span class="ycl">
<img :src="item.Imgurl" class="upImg" />
</span>
<span style="margin-left: 5px">{{ item.name }}</span>
</div>
<div
class="tabItem_two"
:style="{
color:
item.value == 30
? '#00F294FF'
: item.value == 9
? '#00E7FCFF'
: '#FFC30EFF',
}"
>
{{ item.value }}
</div>
</div>
</div>
<div class="problem">
<div class="problemItem" v-for="item in problemList">
<div class="problemOne flex flex-align-center flex-justcontent-center">
<div>{{ item.num }}</div>
</div>
<div class="problemText">
<div class="problemTextTop">
<div class="problemContent">{{ item.remark }}</div>
<div class="problemContent">{{ item.address }}</div>
<div class="problemContent">{{ item.person }} {{ item.phone }}</div>
</div>
<div class="problemTextBottom">
<div class="problemContent">上报：{{ item.startTime }}</div>
<div class="problemContent">截止：{{ item.endTime }}</div>
</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script setup>
import { ref, reactive, toRefs, onMounted, onBeforeUnmount } from "vue";
import yhhsqEch from "@/views/oneMap/floodPrevention/yhhsqEch.vue";
import WarningEcharts from "@/views/oneMap/Echarts/WarningEcharts.vue";
import { Vue3SeamlessScroll } from "vue3-seamless-scroll";
import bengzhantingzhi from "@/assets/images/fhpl/bengzhantingzhi.png";
import bengzhanyunxing from "@/assets/images/fhpl/bengzhanyunxing.png";
import clz from "@/assets/images/fhpl/clz.png"; //
import wcl from "@/assets/images/fhpl/wcl.png"; //
import ycl from "@/assets/images/fhpl/ycl.png"; //
const YhList = ref({});
const ryRefresh3 = ref("");
const list = [
{
name: "1#泵",
status: 1,
},
{
name: "2#泵",
status: 0,
},
{
name: "3#泵",
status: 0,
},
{
name: "4#泵",
status: 1,
},
];
const problemList = ref([
{
remark: "雨水箅子堵塞",
address: "王家坪路",
person: "陈先生",
phone: "13700210026",
startTime: "2024-10-17 10:13:43",
endTime: "2024-10-19 10:13:43",
num: "01",
},
{
remark: "道路积水",
address: "百米大道",
person: "刘先生",
phone: "15991561185",
startTime: "2024-10-17 10:13:43",
endTime: "2024-10-19 10:13:43",
num: "02",
},
{
remark: "雨水箅子堵塞",
address: "凤凰广场",
person: "张小姐",
phone: "15191105280",
startTime: "2024-10-17 10:13:43",
endTime: "2024-10-19 10:13:43",
num: "03",
},
{
remark: "雨水井盖丢失",
address: "百合花园",
person: "黄先生",
phone: "13638648812",
startTime: "2024-10-17 13:24:41",
endTime: "2024-10-17 13:24:41",
num: "04",
},
]);
const ListBox = ref([
{ name: "水雨情", value: 1 },
{ name: "险情", value: 2 },
{ name: "工情", value: 3 },
]);
const ListBoxJq = ref([
{ name: "值守上报", value: 1 },
{ name: "公众电话", value: 2 },
]);
const activedname = ref("水雨情");
const activedJq = ref("值守上报");
const jqdtname = ref("已处理");
const jqdtList = ref([
{ name: "已处理", value: 4, Imgurl: ycl },
{ name: "未处理", value: 1, Imgurl: wcl },
{ name: "处理中", value: 3, Imgurl: clz },
]);
// 点击事件
function Listclick(val) {
console.log(val, "val");
activedname.value = val.name;
console.log(activedname.value, " activedname.value");
}
function jqdtclick(val) {
jqdtname.value = val.name;
if (jqdtname.value == "已处理") {
problemList.value = [
{
remark: "雨水箅子堵塞",
address: "王家坪路",
person: "陈先生",
phone: "13700210026",
startTime: "2024-10-17 10:13:43",
endTime: "2024-10-19 10:13:43",
num: "01",
},
{
remark: "道路积水",
address: "百米大道",
person: "刘先生",
phone: "15991561185",
startTime: "2024-10-17 10:13:43",
endTime: "2024-10-19 10:13:43",
num: "02",
},
{
remark: "雨水箅子堵塞",
address: "凤凰广场",
person: "张小姐",
phone: "15191105280",
startTime: "2024-10-17 10:13:43",
endTime: "2024-10-19 10:13:43",
num: "03",
},
{
remark: "雨水井盖丢失",
address: "百合花园",
person: "黄先生",
phone: "13638648812",
startTime: "2024-10-17 13:24:41",
endTime: "2024-10-17 13:24:41",
num: "04",
},
];
} else if (jqdtname.value == "未处理") {
problemList.value = [
{
remark: "水域不洁",
address: "延河彩虹桥处",
person: "鲁先生",
phone: "15592914583",
startTime: "2024-10-17 14:24:41",
endTime: "2024-10-19 14:24:41",
num: "01",
},
];
} else {
problemList.value = [
{
remark: "排水管道堵塞",
address: "大砭沟与北大街",
person: "张先生",
phone: "18391128539",
startTime: "2024-10-17 14:24:48",
endTime: "2024-10-17 14:24:48",
num: "01",
},
{
remark: "雨水箅子堵塞",
address: "大砭沟与北大街",
person: "张先生",
phone: "18391128539",
startTime: "2024-10-17 14:24:48",
endTime: "2024-10-17 14:24:48",
num: "02",
},
{
remark: "排水管道堵塞",
address: "百米大道",
person: "陈女生",
phone: "13700210026",
startTime: "2024-10-19 14:43:15",
endTime: "2024-10-19 14:43:15",
num: "03",
},
];
}
}
function ListclickJq(val) {
activedJq.value = val.name;
}
const activeIndex = ref(0);
const munuList = [
{
name: "管网(29)",
},
{
name: "积水点(16)",
},
{
name: "排口(24)",
},
];
const chartData1 = ref({
xAxis: [
"1号点",
"2号点",
"3号点",
"4号点",
"5号点",
"6号点",
"7号点",
"8号点",
"9号点",
],
yAxis: [1.1, 1.3, 2, 1.25, 1.1, 3, 3.5, 1.3, 3.8, 1.2, 2, 1], //最高流量
yAxis2: [0.1, 0.2, 0.3, 0.2, 0.1, 0.4, 0.5, 0.23, 0.6, 0.1, 0.2, 0.1], //最高水位
refresh: 1,
});
const FXJCData = ref([
{
zb: "延河西路管网",
sz: "11-12 14:23:12",
szzt: "300mm",
zt: "水深:450mm",
},
{
zb: "二道街管网",
sz: "11-12 14:23:13",
szzt: "300mm",
zt: "水深:345mm",
},
{
zb: "王家坪旧址门口",
sz: "11-12 14:23:14",
szzt: "30mm",
zt: "水深:55mm",
},
{
zb: "东三巷排口",
sz: "11-12 14:23:15",
szzt: "10m³/h",
zt: "流量:43m³/h",
},
]);
// 延河
function getDataYh() {
let obj = {
listName: ["安塞水文站", "延安水文站", "甘谷驿水文站"],
diduan: ["1200", "1600", "2000"],
zhengzhi: ["100", "120", "130"],
};
YhList.value = obj;
ryRefresh3.value = Math.random();
}
onMounted(() => {
getDataYh();
});
</script>
<style lang="scss" scoped>
.WarningReview {
width: 450px;
height: 33%;
// background: rgb(204, 184, 184);
.Warning_Box {
margin: 5px auto;
width: 435px;
height: calc(100% - 60px);
.button_box_list {
width: 100%;
height: 40px;
background: url("@/assets/images/fhpl/bj_img.png") no-repeat;
background-size: 100% 100%;
margin-top: 10px;
padding: 0 10px;
.button_box {
position: relative;
left: 5px;
top: 2px;
height: 36px;
width: 120px;
// background: #00344f;
border-radius: 6px;
font-family: Source Han Sans CN;
font-weight: 500;
font-size: 16px;
color: #ffffff;
margin-right: 9px;
cursor: pointer;
}
.activeClass {
background: url("@/assets/images/fhpl/Select_img.png") no-repeat;
background-size: 100% 100%;
// background: red;
color: #fdffff;
}
}
.Warning_Echarts {
margin-top: 8px;
height: calc(100% - 50px);
// background: rgb(228, 223, 223);
}
}
.Warning_Box_tp {
margin: 10px auto;
width: 420px;
height: calc(100% - 65px);
// background: url("@/assets/images/fhpl/sqjca.png") no-repeat;
// background-size: 100% 100%;
}
.Warning_Box_gq {
margin: 5px auto;
width: 435px;
height: calc(100% - 65px);
// background: yellow;
.drcpl {
width: 360px;
height: 22px;
background: #155a89;
border-radius: 11px;
color: #fff;
margin-top: 15px;
.percent {
position: relative;
height: 100%;
background: linear-gradient(90deg, #0066e5, #00b6ff);
border-radius: 11px;
.round {
position: absolute;
left: 4px;
top: 3px;
width: 16px;
height: 16px;
background: #02fff0;
border-radius: 50%;
}
.text {
position: absolute;
left: 36px;
top: 3px;
}
.value {
position: absolute;
right: 10px;
top: 4px;
}
}
}
.percentVal {
margin-top: 15px;
color: #fff;
font-size: 18px;
font-weight: 400;
color: #ffffff;
margin-left: 30px;
}
.info {
color: #fff;
height: 32px;
background: linear-gradient(
0deg,
rgba(26, 109, 255, 0.2) 0%,
rgba(40, 193, 250, 0.2) 100%
);
border-radius: 3px;
padding: 0 20px;
margin-top: 15px;
line-height: 30px;
> div {
.circle {
width: 7px;
height: 7px;
border-radius: 50%;
margin-right: 5px;
}
.value {
font-size: 18px;
margin-left: 5px;
margin-right: 3px;
}
&:nth-of-type(1) {
.circle {
background-color: rgba(58, 255, 248, 1);
position: relative;
top: 11px;
}
.value {
color: rgba(58, 255, 248, 1);
}
}
&:nth-of-type(2) {
.circle {
background-color: rgba(24, 232, 122, 1);
position: relative;
top: 11px;
}
.value {
color: rgba(24, 232, 122, 1);
}
}
}
}
.StationList {
height: calc(100% - 100px);
margin-top: 15px;
// background: red;
.item {
padding-left: 5px;
margin-top: 15px;
margin-left: 48px;
&:first-of-type {
margin-left: 0;
}
.img {
width: 66px;
height: 66px;
cursor: pointer;
img {
display: block;
width: 100%;
height: 100%;
}
}
.name {
text-align: center;
color: #fff;
font-size: 16px;
}
}
}
}
}
.MonitoringAlarms {
width: 450px;
height: 32%;
// background: rgb(199, 28, 28);
.csyld {
margin: 5px auto;
width: 430px;
height: calc(100% - 55px);
// background: rgb(204, 184, 184);
.tabs {
height: 36px;
color: #fff;
margin-bottom: 5px;
// background: red;
font-family: Source Han Sans CN;
font-weight: 500;
font-size: 14px;
.tabItem {
width: 135px;
line-height: 36px;
height: 100%;
border-radius: 6px;
text-align: center;
cursor: pointer;
font-size: 16px;
// border: 1px solid;
&:nth-of-type(1) {
background: linear-gradient(0deg, #8e1e1e 0%, #ca5656 100%);
border-image: linear-gradient(0deg, #fd4d62, #ac241a) 10 10;
}
&:nth-of-type(2) {
background: linear-gradient(0deg, #f1b500 0%, #d6a564 100%);
border-image: linear-gradient(0deg, #ffb61a, #f5a100) 10 10;
}
&:nth-of-type(3) {
background: linear-gradient(0deg, #0e91d5 0%, #4b7bc9 100%);
border-image: linear-gradient(0deg, #00fcff, #0f6dc1) 10 10;
}
}
}
.table_content {
width: 430px;
height: calc(100% - 43px);
.tableHeader {
width: 100%;
height: 34px;
background: linear-gradient(
0deg,
rgba(74, 164, 255, 0.6392156863) 0%,
rgba(0, 251, 255, 0) 100%
);
border-radius: 2px;
border: 1px solid #004285;
display: flex;
.tableHeaderList {
font-family: Source Han Sans CN;
font-weight: 400;
font-size: 14px;
color: #ffffff;
height: 34px;
line-height: 34px;
// padding-left: 5px;
// text-align: center;
}
.tableList1 {
width: 30%;
// text-align: center;
padding-left: 10px;
}
.tableList2 {
width: 20%;
text-align: center;
}
.tableList3 {
width: 20%;
text-align: center;
}
.tableList4 {
width: 30%;
text-align: center;
}
}
.tableBody {
width: 100%;
height: calc(100% - 35px);
overflow: hidden;
.tableBodyList {
height: 34px;
line-height: 34px;
width: 100%;
display: flex;
/* 选择偶数行 */
&:nth-child(even) {
background: linear-gradient(
0deg,
rgba(21, 141, 253, 0.2) 0%,
rgba(21, 141, 253, 0.05) 100%
);
}
.tableBodyList_span1 {
font-family: Source Han Sans CN;
font-weight: 400;
font-size: 14px;
color: #ffffff;
height: 34px;
line-height: 34px;
width: 30%;
padding-left: 10px;
}
.tableBodyList_span2 {
font-family: Source Han Sans CN;
font-weight: 400;
font-size: 14px;
color: #ffffff;
height: 34px;
line-height: 34px;
text-align: center;
width: 20%;
}
.tableBodyList_span3 {
font-family: Source Han Sans CN;
font-weight: 400;
font-size: 14px;
color: #ffffff;
height: 34px;
line-height: 34px;
text-align: center;
width: 20%;
}
.YJClass {
color: #ffe243;
}
.tableBodyList_span4 {
font-family: Source Han Sans CN;
font-weight: 400;
font-size: 14px;
color: #ffffff;
height: 34px;
line-height: 43px;
text-align: center;
width: 30%;
// background: red;
// cursor: pointer;
}
}
}
}
}
}
.PoliceSituation {
width: 450px;
height: 32%;
.PoliceLisy {
margin: 5px auto;
width: 430px;
height: calc(100% - 55px);
// background: url('@/assets/images/fhpl/normsadal.png') no-repeat;
// background-size: 100% 100%;
.jqtabs {
height: 36px;
color: #fff;
margin-bottom: 5px;
.tabItem {
width: 135px;
line-height: 32px;
height: 32px;
border-radius: 6px;
text-align: center;
cursor: pointer;
// border: 1px solid;
background: #00344f;
border-radius: 2px;
border: 1px solid #004285;
font-family: Source Han Sans CN;
font-weight: 400;
font-size: 16px;
color: #d3f6ff;
.tabItem_one {
// background: red;
width: 65%;
display: flex;
.ycl {
margin-left: 5px;
width: 20px;
height: 20px;
}
}
.tabItem_two {
// background: rgb(202, 185, 185);
width: 35%;
}
&.active {
border: 1px solid #1c8aff;
color: #e4f5ff;
background: #004285;
}
}
}
.problem {
width: 430px;
height: calc(100% - 55px);
overflow: auto;
.problemItem {
display: flex;
height: 45px;
background: linear-gradient(
0deg,
rgba(21, 141, 253, 0.2) 0%,
rgba(21, 141, 253, 0.05) 100%
);
border-radius: 3px;
margin-top: 5px;
// opacity: 0.6;
.problemOne {
width: 10%;
font-family: DIN;
font-weight: 500;
font-size: 16px;
color: #ffffff;
text-align: center;
background: rgba(0, 36, 114, 0.8);
}
.problemText {
width: 90%;
display: flex;
flex-direction: column;
// background: yellow;
.problemTextTop {
display: flex;
align-items: center;
height: 50%;
width: 98%;
margin: 0 auto;
// background: yellow;
// text-align: center;
.problemContent {
width: 130px;
flex-direction: row;
flex-wrap: nowrap;
font-weight: 300;
font-family: Source Han Sans CN;
font-size: 13px;
color: #ffffff;
}
}
.problemTextBottom {
display: flex;
justify-content: space-around;
align-items: center;
font-family: Source Han Sans CN;
font-weight: 320;
font-size: 12px;
color: #ffffff;
height: 50%;
.problemContent {
.problemContent {
width: 130px;
flex-direction: row;
flex-wrap: nowrap;
text-align: center;
}
}
}
}
}
// background: yellow;
// background: url('@/assets/images/fhpl/normsadal.png') no-repeat;
// background-size: 100% 100%;
}
}
}
.ListBoxHeader {
height: 44px;
line-height: 50px;
width: 98%;
background: url("@/assets/newImgs/partBg.png") no-repeat;
background-size: 100% 100%;
display: flex;
align-items: center;
justify-content: space-between;
margin: 7px 0px 0px 8px;
.ListBoxHeader_font {
font-family: PangMenZhengDao;
font-weight: 400;
font-size: 23px;
color: #ebfeff;
padding-left: 34px;
}
.ListBoxHeader_Sel {
height: 30px;
}
.tabs {
.tabItem {
position: relative;
right: 20px;
line-height: 30px;
width: 60px;
height: 30px;
background: #00344f;
margin-left: 10px;
font-size: 14px;
color: #ffffff;
text-align: center;
cursor: pointer;
&.active {
border: 1px solid #1c8aff;
color: #e4f5ff;
background: #004285;
}
}
}
}
::-webkit-scrollbar {
width: 5px; /* 设置滚动条的宽度 */
}
</style>
