xytSk-App/pages/homeIndex/index.vue

978 lines
26 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters!

This file contains ambiguous Unicode characters that may be confused with others in your current locale. If your use case is intentional and legitimate, you can safely ignore this warning. Use the Escape button to highlight these characters.

<template>
<view class="container">
<!-- 个人信息 -->
<view class="info">
<div class="left">
<div class="icon">
<image
style="width: 100%; height: 100%; border-radius: 50%"
:src="default_src"
mode="aspectFill"
></image>
</div>
<div class="info_name">
<div v-if="userList.data">{{ userList.data.userName }}</div>
<div v-if="userList.data">
{{ userList.data.orgList[0].orgName || '' }}
</div>
</div>
</div>
<div class="right">
<div>{{ monthDay }}</div>
<div>{{ dataType[dayOfWeek] }}</div>
</div>
</view>
<!-- nav -->
<view class="navBar">
<div class="navList" v-for="(item, index) in getNavList" :key="index">
<div @click="myNavigateTo(item.url)">
<div class="navIcon">
<image
style="width: 100%; height: 100%"
:src="item.icon"
mode="aspectFit"
></image>
<div
class="readStatus"
v-show="
(readStatus && item.key == 3) ||
(limit == 1 && readYjStatus && item.key == 5)
"
></div>
</div>
<div class="navTxt">{{ item.value }}</div>
</div>
</div>
</view>
<view class="warn">
<image
style="
width: 18rpx;
height: 22rpx;
margin-right: 16rpx;
vertical-align: middle;
"
src="../../static/tabs/ld.png"
mode="aspectFit"
></image
><span style="color: #000">当前防汛应急响应:</span>
<span style="color: #59a7ff">{{ level }}</span>
</view>
<!-- 24小时综述 -->
<view v-show="limit == 1">
<view class="info_24">
<div class="heart">
<p class="title">
<span class="line"></span><span class="h4">24小时综述</span>
</p>
<div class="time">{{ ydate }}至{{ date }}</div>
</div>
<div class="info_con" v-if="list.data">
<span class="g1">{{ list.data.yesterday }}</span
>至<span class="g1">{{ list.data.today }}</span
>24小时中共有<span class="ye">{{ list.data.stationNum }}</span
>个降雨测站(山洪测站<span class="ye">{{
list.data.shStationNum
}}</span
>个),其中最大降雨测站为<span class="ye">{{
list.data.maxRain ? list.data.maxRain.stnm : '-'
}}</span
>,降雨量<span class="ye">{{
list.data.maxRain ? list.data.maxRain.drp : '-'
}}</span
>mm
<template v-if="list.data.cntDrp10 != 0"
><span class="b1">10mm</span>以下测站数为<span class="ye">{{
list.data.cntDrp10
}}</span
>个。</template
><template v-if="list.data.cntDrp25 != 0"
><span class="b1">10mm至25mm</span>以下测站数为<span class="ye">{{
list.data.cntDrp25
}}</span
>个。</template
>
<template v-if="list.data.cntDrp50 != 0">
<span class="b1">25mm至50mm</span>以下测站数为<span class="ye">{{
list.data.cntDrp50
}}</span
>个。
</template>
<template v-if="list.data.cntDrp100 != 0">
<span class="b1">50mm至100mm</span>以下测站数为<span class="ye">{{
list.data.cntDrp100
}}</span
>个。
</template>
<template v-if="list.data.cntDrp250 != 0">
<span class="b1">100mm至250mm</span>以下测站数为<span class="ye">{{
list.data.cntDrp250
}}</span
>个。
</template>
<template v-if="list.data.cntDrpg250 != 0"
><span class="b1">250mm以上</span>以下测站数为<span class="ye">{{
list.data.cntDrpg250
}}</span
>个。</template
>
</div>
</view>
<view class="info_24">
<div class="heart">
<p class="title">
<span class="line"></span><span class="h4">24小时天气预报</span>
</p>
<div>
<span class="time">{{ imgData[0] }}至{{ imgData[1] }}</span>
<!-- <image
style="width: 16px; height: 16px; vertical-align: middle"
src="../../static/tabs/panelTitle.png"
mode="aspectFit"
@click="changeTable"
></image> -->
</div>
</div>
<div class="chartChange fl">
<div class="chart_tit" @click="changeTable">
<image
style="vertical-align: middle"
src="../../static/tabs/chartcolumn@2x.png"
mode="aspectFit"
></image>
<span>图表</span>
</div>
<div v-if="changeBool" class="table_h">
<div
class="leftTab"
:class="{ activetextTypeTab: showTextTypeTab == 1 }"
@click="tabChange(1)"
>
水库降雨
</div>
<div
class="rightTab"
:class="{ activetextTypeTab: showTextTypeTab == 2 }"
@click="tabChange(2)"
>
区域降雨
</div>
</div>
</div>
<div class="imgs" style="height: 100%; text-align: center">
<!-- 24h天气预报图像-->
<image
v-if="!changeBool && imgList.img24h"
:src="imgList.img24h.url"
mode="aspectFit"
></image>
<!-- 表格-->
<div v-else class="tableBox">
<div class="table_div">
<div class="table_cur">
<table style="width: 100%; margin-top: -10%">
<tr>
<th style="width: 50px; color: #59a7ff">序号</th>
<th
v-if="showTextTypeTab == 1"
style="width: 70%; color: #59a7ff"
>
水库
</th>
<th v-else style="width: 70%; color: #59a7ff">区域</th>
<th style="width: 50%; color: #59a7ff">降雨量(mm)</th>
</tr>
<div style="max-height: 260px; overflow-y: auto">
<tr
v-for="(item, index) in tableData.data.data"
:key="index"
>
<td style="width: 62px">{{ index + 1 }}</td>
<td style="width: 70%">
{{ item.name }}
</td>
<td style="width: 50%">{{ item.drp }}</td>
</tr>
</div>
<!-- <tr>
<td style="width: 62px">1</td>
<td style="width: 70%">水库水库</td>
<td style="width: 50%">11</td>
</tr> -->
</table>
</div>
</div>
</div>
</div>
</view>
<view class="info_24">
<div class="heart">
<p class="title">
<span class="line"></span><span class="h4">短时天气预报</span>
</p>
<div class="time">{{ imgHourstm[0] }} 至 {{ imgHourstm[1] }}</div>
</div>
<div class="imgs" style="height: 100%; text-align: center">
<image :src="imgHours.url" mode="aspectFit"></image>
</div>
</view>
</view>
<view v-show="limit != 1">
<view class="info_24">
<div class="heart">
<p class="title">
<span class="line"></span><span class="h4">雨情</span>
</p>
<div class="time" style="width: 50%; color: #000">
<uni-data-select
v-model="value1"
:localdata="timeList"
@change="changeTime"
:clear="false"
>
</uni-data-select>
</div>
</div>
<div class="info_icon" style="height: 260px; width: 100%">
<qiun-data-charts
:chartData="chartData.chartData"
:echartsApp="true"
:eopts="chartData.eopts"
/>
</div>
</view>
<view class="info_24">
<div class="heart" style="margin-bottom: 10px">
<p class="title">
<span class="line"></span><span class="h4">水情</span>
</p>
<div class="time" style="width: 50%; color: #000">
<u-subsection
:list="subList"
:current="current"
@change="subChange"
mode="subsection"
></u-subsection>
</div>
</div>
<div class="info_icon" v-if="current == 0">
<div
v-for="(item, i) in hdList"
:key="i"
@click="jumpHdDetail(item)"
style="
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 10px;
"
>
<div>
<div style="font-size: 32rpx">{{ item.stnm }}</div>
<div style="font-size: 24rpx">实时水位:{{ item.z }}m</div>
</div>
<div style="color: #91939b">监测时间:{{ item.tm }}</div>
</div>
</div>
<div class="info_icon" v-else>
<div
v-for="(item, i) in skList"
:key="i"
style="
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 10px;
"
@click="jumpSkDetail(item)"
>
<div>
<div style="font-size: 32rpx">{{ item.stnm }}</div>
<div style="font-size: 24rpx">
实时水位:{{ item.normWatLev }}m
</div>
</div>
<div style="color: #91939b">{{ item.tm }}</div>
</div>
</div>
</view>
</view>
</view>
</template>
<script>
const dataType = {
Monday: '星期一',
Tuesday: '星期二',
Wednesday: '星期三',
Thursday: '星期四',
Thursday: '星期五',
Saturday: '星期六',
Sunday: '星期天'
}
import moment from 'moment'
import { level } from '../../pages/utils/dicType'
import { disType } from '../utils/dicType.js'
import drpOption from './chartOption.js'
import { restm } from '../utils/tool'
export default {
data () {
return {
monthDay: '',
dayOfWeek: '',
dataType,
userList: {},
changeBool: false,
tableData: [],
loading: false,
list: {},
date: '',
ydate: '',
showTextTypeTab: 1,
tableData: {},
tm: '',
level: '',
limit: disType(uni.getStorageSync('value').adcd),
timeList: [
{ text: '昨天08:00~当前时间', value: 1 },
{ text: '今天08:00~当前时间', value: 2 },
{ text: '昨天08:00~今天08:00', value: 3 },
{ text: '最近1小时', value: 4 },
{ text: '最近3小时', value: 5 },
{ text: '最近6小时', value: 6 },
{ text: '最近12小时', value: 7 },
{ text: '最近24小时', value: 8 }
],
value1: 3,
rainChartData: [],
formData: {
stm: moment()
.subtract(1, 'days')
.startOf('day')
.set({ hour: 8, minute: 0 }),
etm: moment().startOf('day').set({ hour: 8, minute: 0 })
},
rainChartData: [],
chartData: {},
subList: ['河道水情', '水库水情'],
current: 0,
hdList: [],
skList: [],
readStatus: false,
readYjStatus: false,
default_src: uni.getStorageSync('avatar'),
imgList: {},
imgtm: moment().format('YYYYMMDD'),
imgData: [],
imgHours: '',
imgHourstm: []
}
},
computed: {
getNavList () {
const adcd = uni.getStorageSync('value').adcd
let lever = 0
if (adcd.endsWith('000000000')) {
//县
return [
{
value: '雨情',
key: 1,
icon: '../../static/tabs/xingzhuang2.png',
url: '/pages/rain/rain'
},
{
value: '水情',
key: 2,
icon: '../../static/tabs/water2.png',
url: '/pages/water/water'
},
{
value: '工情灾情',
key: 3,
icon: '../../static/tabs/gongqing2.png',
url: '/pages/gqzq/index'
},
{
value: '信息上报',
key: 4,
icon: '../../static/tabs/xinxi_icon@2x2.png',
url: '/pages/xxsb/index'
},
{
value: '预警',
key: 5,
icon: '../../static/tabs/yujing_icon@2x2.png',
url: '/pages/forewarning/forewarning'
}
]
} else {
//乡镇
return [
{
value: '雨情',
key: 1,
icon: '../../static/tabs/xingzhuang2.png',
url: '/pages/rain/rain'
},
{
value: '水情',
key: 2,
icon: '../../static/tabs/water2.png',
url: '/pages/water/water'
},
{
value: '工情灾情',
key: 3,
icon: '../../static/tabs/gongqing2.png',
url: '/pages/gqzq/index'
},
{
value: '调令反馈',
key: 5,
icon: '../../static/tabs/yujing_icon@2x2.png',
url: '/pages/orderFeedback/orderFeedback'
},
{
value: '信息上报',
key: 4,
icon: '../../static/tabs/xinxi_icon@2x2.png',
url: '/pages/xxsb/index'
}
]
}
}
},
watch: {
rainChartData (newValue) {
this.chartData = { ...drpOption(newValue) }
},
limit: {
handler (newValue) {
if (!newValue) {
this.getRainList()
}
},
immediate: true
},
current: {
handler (newValue) {
if (newValue == 0) {
this.getHdList()
} else {
this.getSkList()
}
},
immediate: true
}
},
methods: {
async getImgs () {
uni.request({
url: 'http://223.75.53.124:8005/grb/rainimglist',
data: {
tm: `${this.imgtm}08`
},
success: res => {
console.log(res.data.data)
this.imgList = res.data.data
let h = moment().format('HH') - 1
let inx = restm(h)
this.imgHours = res.data.data.imgHours[inx]
let tm = moment().subtract(1, 'days').format('MM月DD日')
let tm2 = moment().format('MM月DD日')
this.imgData = [`${tm}08时`, `${tm2}08时`]
this.imgHourstm = [`${tm2}${h}`, `${tm2}${h + 1}`]
}
})
},
async getYjRead () {
try {
const { data } = await uni.$http.get(
'/gunshiApp/xfflood/current/situation/flag'
)
if (data.code == 200) {
this.readYjStatus = data.data
}
} catch (error) {
uni.$showMsg()
}
},
async getReadStatus () {
try {
const { data } = await uni.$http.get(
'/gunshiApp/xfflood/xfProjectRun/has/read'
)
if (data.code == 200) {
this.readStatus = Object.values(data.data).some(item => item == true)
}
} catch (error) {
uni.$showMsg()
}
},
jumpHdDetail (params) {
uni.navigateTo({
url: `/pages/hdDetail/hdDetail?stcd=${params.stcd}&stnm=${params.stnm}&source=${params.source}&wrz=${params.wrz}&grz=${params.grz}`
})
},
jumpSkDetail (params) {
uni.navigateTo({
url: `/pages/skDetail/skDetail?stcd=${params.stcd}&stnm=${params.stnm}&source=${params.source}&afsltdz=${params.afsltdz}&flLowLimLev=${params.flLowLimLev}&desFloodLev=${params.desFloodLev}&calFloodLev=${params.calFloodLev}&resCode=${params.resCode}`
})
},
async getSkList () {
try {
const { data } = await uni.$http.post(
'/gunshiApp/xfflood/reservoir/water/list',
{
sources: ['SW', 'SK'],
adcd: uni.getStorageSync('value').adcd
}
)
if (data.code == 200) {
this.skList = data.data
}
} catch (error) {
uni.$showMsg()
}
},
async getHdList () {
try {
const { data } = await uni.$http.post(
'/gunshiApp/xfflood/river/water/list',
{
sources: ['SH', 'SW'],
adcd: uni.getStorageSync('value').adcd
}
)
if (data.code == 200) {
this.hdList = data.data
}
} catch (error) {
uni.$showMsg()
}
},
subChange (e) {
this.current = e
},
async getRainList () {
try {
const { data } = await uni.$http.post(
'/gunshiApp/xfflood/real/rain/home/list',
{
start: this.formData.stm.format('YYYY-MM-DD HH:mm:ss'),
end: this.formData.etm.format('YYYY-MM-DD HH:mm:ss')
}
)
if (data.code == 200) {
this.rainChartData = data.data
}
} catch (error) {
uni.$showMsg()
}
},
changeTime (params) {
let tmValue = []
if (params === 1) {
tmValue = [
moment()
.subtract(1, 'days')
.startOf('day')
.set({ hour: 8, minute: 0 }),
moment()
]
} else if (params === 2) {
tmValue = [
moment().startOf('day').set({ hour: 8, minute: 0 }),
moment()
]
} else if (params === 3) {
tmValue = [
moment()
.subtract(1, 'days')
.startOf('day')
.set({ hour: 8, minute: 0 }),
moment().startOf('day').set({ hour: 8, minute: 0 })
]
} else if (params === 4) {
tmValue = [moment().subtract(1, 'hours'), moment()]
} else if (params === 5) {
tmValue = [moment().subtract(3, 'hours'), moment()]
} else if (params === 6) {
tmValue = [moment().subtract(6, 'hours'), moment()]
} else if (params === 7) {
tmValue = [moment().subtract(12, 'hours'), moment()]
} else if (params === 8) {
tmValue = [moment().subtract(24, 'hours'), moment()]
}
this.formData.stm = tmValue[0]
this.formData.etm = tmValue[1]
this.getRainList()
},
todetail (val) {
console.log('val', val)
if (val == 1) {
uni.navigateTo({
url: '/pages/rain/index'
})
}
if (val == 3) {
uni.navigateTo({
url: '/pages/gqzq/index'
})
}
},
tabChange (val) {
this.showTextTypeTab = val
if (val == 1) {
this.getWeather()
} else {
this.getWeatherArea()
}
},
changeTable (val) {
this.changeBool = !this.changeBool
if (val) {
this.getWeather()
}
console.log('this.changeBool', this.changeBool)
},
// 区域 /weather/area
async getWeatherArea () {
try {
const res = await uni.$http.post('/gunshiApp/xfflood/weather/area', {
tm: this.tm
})
console.log('--44-', res)
this.tableData = res
// this.userList = res.data
// console.log('--333-', this.tableData)
} catch (e) {
uni.$showMsg()
}
},
// 水库 /weather/res
async getWeather () {
try {
const res = await uni.$http.post('/gunshiApp/xfflood/weather/res', {
tm: this.tm
})
console.log('--3-', res)
this.tableData = res
// this.userList = res.data
console.log('--333-', this.tableData)
} catch (e) {
uni.$showMsg()
}
},
async getSwiperList () {
try {
const res = await uni.$http.get('/gunshiApp/xfflood/getLoginInfo')
console.log('--1-', res.data)
this.userList = res.data
console.log('--1-', this.userList)
} catch (e) {
uni.$showMsg()
}
},
async getOverview () {
try {
let res = await uni.$http.get('/gunshiApp/xfflood/real/rain/overview')
console.log('--2-', res)
this.list = res.data
console.log('--2-', res)
} catch (e) {
uni.$showMsg()
}
},
getDataTime () {
this.monthDay = moment().format('MM月DD日')
this.dayOfWeek = moment().format('dddd')
this.date = moment().format('MM月DD日HH时')
this.ydate = moment().subtract(1, 'days').format('MM月DD日HH时')
console.log('moment11', this.date, this.ydate)
let d1 = moment().format('YYYYMMDD')
let h1 = moment().format('HH') >= 20 ? '20' : '08'
this.tm = d1 + h1
},
async getResponseLevel () {
try {
const { data } = await uni.$http.post(
'/gunshiApp/xfflood/xfEmerRespR/page',
{
pageSo: { pageSize: 10, pageNumber: 1 },
year: moment().format('YYYY')
}
)
if (data.code == 200) {
if (data.data.records.length > 0) {
this.level = level(data.data.records[0].level)
} else {
this.level = '无'
}
}
} catch (e) {
uni.$showMsg()
}
},
myNavigateTo (url) {
uni.navigateTo({
url: url // 跳转到对应路径的页面
})
}
// 响应级别
},
onLoad () {
this.getSwiperList()
this.getOverview()
this.getDataTime()
this.getResponseLevel()
this.getImgs()
},
onShow () {
this.getReadStatus()
if (this.limit == 1) {
this.getYjRead()
}
}
}
</script>
<style lang="scss" scoped>
.container {
font-size: 14px;
line-height: 24px;
background-color: #f3f5f8;
}
.info {
height: 100rpx;
background-color: #007afd;
display: flex;
align-items: center;
justify-content: space-between;
padding: 20px;
color: #fff;
}
.left {
display: flex;
justify-content: space-around;
align-items: center;
}
.icon {
width: 50px;
height: 50px;
border-radius: 50%;
background-color: #fff;
text-align: center;
color: #007afd;
line-height: 50px;
}
.info_name {
margin-left: 16rpx;
}
.right {
text-align: center;
}
.navBar {
height: 100%;
background-color: #fff;
margin-bottom: 12rpx;
/* background-color: pink; */
}
.navBar {
padding: 20px;
/* text-align: center; */
display: flex;
justify-content: space-between;
align-items: center;
}
.navList {
text-align: center;
}
.navIcon {
position: relative;
width: 50px;
height: 50px;
/* border-radius: 10px;
background-color: #007afd; */
display: flex;
justify-content: center;
align-items: center;
}
.readStatus {
position: absolute;
top: 0;
right: 0;
width: 10px;
height: 10px;
border-radius: 50%;
background: #de2433;
}
.warn {
background-color: #fff;
color: #de2433;
padding: 18rpx 20rpx;
text-align: left;
margin-bottom: 12rpx;
}
/* 24小时 */
.chartChange {
text-align: center;
margin: 16rpx 0;
}
.chart_tit {
width: 129rpx;
height: 43rpx;
background: #d3e1ff;
border-radius: 20rpx;
color: #3380ff;
}
.chart_tit image {
margin-right: 10rpx;
width: 36rpx;
height: 30rpx;
}
.table_h {
display: flex;
text-align: center;
height: 24px;
/* position: absolute;
top: 0;
right: 0; */
}
/* info_24 */
.info_24 {
padding: 15px;
background-color: #fff;
margin-bottom: 12rpx;
}
.heart {
display: flex;
justify-content: space-between;
align-items: center;
}
.fl {
display: flex;
justify-content: space-between;
align-items: center;
}
.title .line {
border: 2px solid #3380ff;
border-radius: 3rpx;
margin-right: 20rpx;
}
.title .h4 {
font-weight: 400;
font-size: 32rpx;
color: #121b3d;
}
.time {
font-weight: 400;
font-size: 24rpx;
color: #a2a2a2;
}
.g1 {
color: #545556;
}
.ye {
color: #ff1717;
/* font-weight: 600; */
}
.b1 {
color: #3380ff;
padding: 0 2px;
}
.uni-group {
display: flex;
align-items: center;
}
/* 表格 */
.tableBox {
width: 100%;
position: relative;
}
.leftTab {
width: 80px;
/* border-bottom: 1px solid #ccc; */
}
.rightTab {
width: 80px;
/* border: 1px solid #ccc;
border-radius: 0 3px 3px 0;
border-left: 0; */
}
.activetextTypeTab,
.activetextTypeTab:hover {
border-bottom: 3rpx solid #2286f6;
color: #026be0;
}
.table_div {
widows: 100%;
height: 100%;
max-width: calc(100% - 0px);
max-height: calc(100vh - 24px);
flex: 1;
padding-top: 30px;
overflow-x: scroll;
}
/*table样式*/
.table_cur {
width: 100%;
empty-cells: show;
border-collapse: collapse;
font-size: 14px;
}
.table_cur tr {
display: flex;
line-height: 56rpx;
}
.table_cur th {
height: 56rpx;
color: #2f4056;
background: #f5f6f8;
font-size: 14px;
font-weight: bold;
padding: 0 10px;
box-sizing: border-box;
white-space: nowrap;
text-align: center !important;
}
.table_cur td {
height: 56rpx;
border-bottom: 1px solid #e5e9f2;
font-size: 14px;
color: #2f4056;
padding: 0 10px;
box-sizing: border-box;
white-space: nowrap;
text-align: center !important;
}
/*table样式 end*/
</style>