<!--
|
* @Author: shuishen 1109946754@qq.com
|
* @Date: 2022-08-18 16:18:17
|
* @LastEditors: shuishen 1109946754@qq.com
|
* @LastEditTime: 2023-04-21 15:37:04
|
* @FilePath: \web\bigScreen\src\views\home\index_03.vue
|
* @Description: 小区-栋-层-房屋
|
*
|
* Copyright (c) 2022 by shuishen 1109946754@qq.com, All Rights Reserved.
|
-->
|
|
<template>
|
<div class="pageContainer ">
|
<div class="left-container">
|
<div class="one">
|
<div class="title-box">
|
<div class="title">水库概况</div>
|
</div>
|
<div class="content-box detail-box">
|
<el-image fit="fill"
|
:src="'https://img2.baidu.com/it/u=4176068029,1540480464&fm=253&fmt=auto&app=120&f=JPEG?w=600&h=337'"
|
:preview-src-list="['https://img2.baidu.com/it/u=4176068029,1540480464&fm=253&fmt=auto&app=120&f=JPEG?w=600&h=337']">
|
</el-image>
|
<div class="all-text common-text">
|
{{ currentSiteDetails.summary }}
|
</div>
|
</div>
|
</div>
|
|
<div class="two">
|
<div class="title-box">
|
<div class="title">监测设备统计</div>
|
</div>
|
<div class="content-box device-box flex justify-between">
|
<div class="device-item">
|
<div class="item-title">水文监测站</div>
|
<div class="item-num">6060</div>
|
</div>
|
<div class="device-item">
|
<div class="item-title">监控视频</div>
|
<div class="item-num">2048</div>
|
</div>
|
<div class="device-item">
|
<div class="item-title">安全监测</div>
|
<div class="item-num">456</div>
|
</div>
|
</div>
|
</div>
|
|
<div class="three">
|
<div class="title-box">
|
<div class="title">预警情况</div>
|
</div>
|
<div class="content-box">
|
<div class="warning-box">
|
<el-carousel trigger="click" height="115px" arrow="never" :autoplay="false">
|
<el-carousel-item v-for="item in 2" :key="item">
|
<div class="flex">
|
<div class="warning-item flex">
|
<img src="images/warn_01.png" alt="">
|
<div class="item-text">
|
<div class="item-title common-text">入侵</div>
|
<div class="item-num flex"><span>1024</span></div>
|
</div>
|
</div>
|
<div class="warning-item flex">
|
<img src="images/warn_01.png" alt="">
|
<div class="item-text">
|
<div class="item-title common-text">巡查</div>
|
<div class="item-num flex"><span>865</span></div>
|
</div>
|
</div>
|
</div>
|
</el-carousel-item>
|
</el-carousel>
|
</div>
|
<div class="scroll-table">
|
<div class="scroll-table-head flex">
|
<div style="flex: 2">序号</div>
|
<div style="flex: 4">报警名称</div>
|
<div style="flex: 4">所属水库</div>
|
<div style="flex: 4">报警类型</div>
|
<div style="flex: 7">报警时间</div>
|
</div>
|
<vue-seamless-scroll :class-option="classOption" :data="listData" class="scroll-table-body"
|
style="height: 210px">
|
<ul class="item">
|
<li class="scroll-item flex" v-for="(item, index) in listData" :key="index">
|
<div style="flex: 2">{{ index + 1 }}</div>
|
<div style="flex: 4">{{ item.name }}</div>
|
<div style="flex: 4">{{ item.reservoir }}</div>
|
<div style="flex: 4">{{ item.type }}</div>
|
<div style="flex: 7;white-space: nowrap;">{{ item.time }}</div>
|
</li>
|
</ul>
|
</vue-seamless-scroll>
|
</div>
|
</div>
|
</div>
|
</div>
|
|
<div class="right-container">
|
<div class="one">
|
<div class="title-box">
|
<div class="title">雨水情监测</div>
|
</div>
|
<div class="content-box rain-monitor-box">
|
<div class="flex justify-between">
|
<div class="rain-monitor-item">
|
<div class="item-title">水情监测</div>
|
<div style="width: 190px; height: 180px">
|
<waterMonitorLine></waterMonitorLine>
|
</div>
|
</div>
|
<div class="monitor-tab-section">
|
<div class="tab-wrap flex">
|
<div class="tab-item">当前水位</div>
|
<div class="tab-item">水位曲线</div>
|
</div>
|
<div class="info-section">
|
<div class="info-item">当前汛期：主汛期</div>
|
<div class="info-item">汛限水位：20m</div>
|
<div class="info-item">蓄水量：45m<sup>3</sup></div>
|
<div class="info-item">入库流量：11m<sup>3</sup>/s</div>
|
<div class="info-item">出库流量：11m<sup>3</sup>/s</div>
|
</div>
|
</div>
|
</div>
|
<div class="rain-monitor-item box-bottom">
|
<div class="item-title">雨情监测</div>
|
<div class="flex justify-between">
|
<div class="info-section">
|
<div class="info-item">今日降水：6.6 mm</div>
|
<div class="info-item">降水状态：小雨</div>
|
<div class="info-item">本月总蓄水：25241 万m<sup>3</sup></div>
|
</div>
|
<div style="width: 160px; height: 100px">
|
<rainMonitorLine></rainMonitorLine>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
|
<div class="two">
|
<div class="title-box">
|
<div class="title">基础信息</div>
|
</div>
|
<div class="content-box">
|
<div class="base-tab flex">
|
<div class="tab-item" :class="{ 'active': baseTabActive == 0 }" @click="baseTabActive = 0">四个责任人
|
</div>
|
<div class="tab-item" :class="{ 'active': baseTabActive == 1 }" @click="baseTabActive = 1">库容曲线
|
</div>
|
<div class="tab-item" :class="{ 'active': baseTabActive == 2 }" @click="baseTabActive = 2">泄流曲线
|
</div>
|
</div>
|
<div class="scroll-table" v-if="baseTabActive == 0">
|
<div class="scroll-table-head flex">
|
<div style="flex: 2">水库名称</div>
|
<div style="flex: 1">姓名</div>
|
<div style="flex: 2">联系方式</div>
|
<div style="flex: 2">身份</div>
|
</div>
|
<vue-seamless-scroll :class-option="classOption_01" :data="listData_01" class="scroll-table-body"
|
style="height: 130px">
|
<ul class="item">
|
<li class="scroll-item flex" v-for="(item, index) in listData_01" :key="index">
|
<div style="flex: 2">{{ item.reservoir }}</div>
|
<div style="flex: 1">{{ item.name }}</div>
|
<div style="flex: 2">{{ item.phone }}</div>
|
<div style="flex: 2; text-align: left;" :class="'colorText_' + item.roleType">{{
|
item.roleName }}</div>
|
</li>
|
</ul>
|
</vue-seamless-scroll>
|
</div>
|
<reservoir-capacity-line v-if="baseTabActive == 1"></reservoir-capacity-line>
|
<water-flow-line v-if="baseTabActive == 2"></water-flow-line>
|
</div>
|
</div>
|
|
<div class="three">
|
<div class="title-box">
|
<div class="title">图片监测</div>
|
</div>
|
<div class="content-box video-box">
|
<el-image fit="fill"
|
:src="'https://img2.baidu.com/it/u=4176068029,1540480464&fm=253&fmt=auto&app=120&f=JPEG?w=600&h=337'"
|
:preview-src-list="['https://img2.baidu.com/it/u=4176068029,1540480464&fm=253&fmt=auto&app=120&f=JPEG?w=600&h=337']">
|
</el-image>
|
</div>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import reservoirCapacityLine from "./components/reservoirCapacityLine.vue"
|
import waterFlowLine from "./components/waterFlowLine.vue"
|
import rainMonitorLine from "./components/rainMonitorLine.vue"
|
import waterMonitorLine from "./components/waterMonitorLine.vue"
|
import vueSeamlessScroll from "vue-seamless-scroll"
|
|
import { getDwsRainResRecentA } from '@/api/sk/sk'
|
import { getSkSiteDetail } from '@/api/detail/'
|
|
export default {
|
components: { vueSeamlessScroll, reservoirCapacityLine, waterFlowLine, rainMonitorLine, waterMonitorLine },
|
|
data () {
|
return {
|
baseTabActive: 0,
|
listData: [
|
{
|
reservoir: "汪店水库",
|
name: '水位超汛限 ',
|
type: "监测点1",
|
time: '2023-3-29 16:49:49'
|
},
|
{
|
reservoir: "汪店水库",
|
name: '水位超汛限 ',
|
type: "监测点2",
|
time: '2023-3-29 16:49:49'
|
},
|
{
|
reservoir: "汪店水库",
|
name: '水位超汛限 ',
|
type: "监测点3",
|
time: '2023-3-29 16:49:49'
|
},
|
{
|
reservoir: "汪店水库",
|
name: '水位超汛限 ',
|
type: "监测点4",
|
time: '2023-3-29 16:49:49'
|
},
|
{
|
reservoir: "汪店水库",
|
name: '水位超汛限 ',
|
type: "监测点5",
|
time: '2023-3-29 16:49:49'
|
},
|
{
|
reservoir: "汪店水库",
|
name: '水位超汛限 ',
|
type: "监测点6",
|
time: '2023-3-29 16:49:49'
|
},
|
],
|
classOption: {
|
step: .2,
|
limitMoveNum: 6
|
},
|
listData_01: [
|
{
|
reservoir: "汪店水库",
|
name: '李涛',
|
phone: "18808690016",
|
roleName: '行政负责人',
|
roleType: '0'
|
},
|
{
|
reservoir: "汪店水库",
|
name: '鲁常绕 ',
|
phone: "15972378858",
|
roleName: '行政负责人',
|
roleType: '0'
|
},
|
{
|
reservoir: "汪店水库",
|
name: '汪再根 ',
|
phone: "监测点3",
|
roleName: '主管部门负责人',
|
roleType: '1'
|
},
|
{
|
reservoir: "汪店水库",
|
name: '鲁常绕 ',
|
phone: "13508675616",
|
roleName: '主管部门负责人',
|
roleType: '1'
|
},
|
],
|
classOption_01: {
|
step: .2,
|
limitMoveNum: 4
|
},
|
|
currentSiteDetails: {}
|
}
|
},
|
|
created () {
|
this.currentId = this.$route.params.guid
|
|
this.$EventBus.$emit('setCurrentClickName', this.$route.params.name)
|
|
this.getSkSiteDetail()
|
|
this.getDwsRainResRecentA()
|
},
|
|
mounted () {
|
|
},
|
|
methods: {
|
getSkSiteDetail () {
|
getSkSiteDetail().then(res => {
|
console.log(res, 233336)
|
})
|
},
|
|
getDwsRainResRecentA () {
|
getDwsRainResRecentA({ res_cd: this.currentId }).then(res => {
|
this.currentSiteDetails = res.data.resultList[0]
|
})
|
}
|
},
|
|
destroyed () { },
|
}
|
</script>
|
<style lang="scss" scoped>
|
.pageContainer {
|
.left-container {
|
left: 0;
|
|
.one {
|
height: 340px;
|
}
|
|
.two {
|
height: 210px;
|
}
|
|
.three {
|
flex: 1;
|
}
|
}
|
|
.right-container {
|
right: 0;
|
|
.one {
|
height: 470px;
|
}
|
|
.two {
|
height: 275px;
|
}
|
|
.three {
|
flex: 1;
|
}
|
}
|
|
.color-num {
|
// color: #EDB058;
|
font-size: 16px !important;
|
font-family: Roboto-Bold;
|
background: linear-gradient(to right, RGBA(228, 134, 41, 1) 60%, #fff 100%);
|
-webkit-background-clip: text;
|
-webkit-text-fill-color: transparent
|
}
|
|
.colorText_0 {
|
color: #81B4FF !important;
|
}
|
|
.colorText_1 {
|
color: #0CBAC5 !important;
|
}
|
}
|
</style>
|
