xytSk-App/pages/homeIndex/index.vue

1046 lines
23 KiB
Vue

<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.userName">{{ userList.userName }}</div>
<div v-if="userList.dept">
{{ userList.dept.deptName || '' }}
</div>
</div>
</div>
<div class="right">
<!-- <div>{{ monthDay }}</div>
<div>{{ dataType[dayOfWeek] }}</div> -->
<u-icon name="bell-fill" size="30" color="#fff" @click="todetailmessgae()">
</u-icon>
<u-badge bgColor=" #de2433" :offset='[25,20]' :value="6" :absolute='true'></u-badge>
</div>
</view>
<!-- nav -->
<view class="navBar" style="display: flex;flex-wrap: wrap;">
<div class="navList" v-for="(item, index) in getNavList" :key="index">
<div @click="myNavigateTo(item.url,item.value)">
<div class="navIcon">
<image style="width: 100%; height: 100%" :src="item.icon" mode="aspectFit"></image>
<div class="readStatus" v-show="
(readStatus && item.key == 3) || (dispatchStatus && item.key ==5 && limit == 0) ||
(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 || !yjStatus ? '无' : level }}</span> -->
<sk-info />
</view>
<view class="warn">
<ylz-list />
</view>
<view class="warn">
<ylz-list />
</view>
<view class="info_24"
:style="{display:'flex',justifyContent:'center',alignItems:'center',padding:'5px 0',margin:'0'}">
<image :style="{width:'20px',height:'20px',marginRight:'10px'}" src="../../static/logoc.png"></image>
<div>技术支持: 湖北鲧石物联科技有限公司</div>
</view>
</view>
</template>
<script>
const dataType = {
Monday: '星期一',
Tuesday: '星期二',
Wednesday: '星期三',
Thursday: '星期四',
Friday: '星期五',
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'
import SkInfo from '../skInfo/index.vue'
import YlzList from '../ylzList/index.vue'
export default {
components: {
SkInfo,
YlzList
},
data() {
return {
monthDay: '',
dayOfWeek: '',
dataType,
userList: uni.getStorageSync('value').data,
changeBool: false,
tableData: [],
loading: false,
list: {},
date: '',
ydate: '',
showTextTypeTab: 1,
tableData: {},
tm: '',
level: '',
yjStatus: 0,
// limit: disType(uni.getStorageSync('value').adcd),
limit: 1,
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, //预警状态
dispatchStatus: false, //调令状态
default_src: uni.getStorageSync('avatar'),
imgList: {},
imgtm: moment().format('YYYYMMDD'),
imgData: [],
imgHours: '',
imgHourstm: [],
imgHoursList: {
url: ''
},
interval: null,
numPic: 0,
allStatus: false
}
},
onPullDownRefresh() {
// this.getSwiperList()
this.getOverview()
this.getDataTime()
this.getResponseLevel()
this.getDispatchStatus()
this.getReadStatus()
if (this.limit == 1) {
this.getYjRead()
// this.getInterval()
this.getImgs()
this.getHoursImg()
}
setTimeout(function() {
uni.stopPullDownRefresh();
}, 1000);
},
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'
},
{
value: '维修养护111',
key: 6,
icon: '../../static/tabs/yujing_icon@2x2.png',
url: '/pages/wxyh/index'
},
{
value: '问题处理111',
key: 7,
icon: '../../static/tabs/yujing_icon@2x2.png',
url: '/pages/wtcl/index'
},
{
value: '预警111',
key: 7,
icon: '../../static/tabs/yujing_icon@2x2.png',
url: '/pages/yj/index'
},
]
// } 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
},
allStatus: {
handler(newValue) {
const newArr = this.getNavList()
},
immediate: true
}
},
methods: {
todetailmessgae() {
uni.navigateTo({
url: '/pages/messageList/index'
})
},
async getImgs() {
let h = moment().format('HH')
let m = moment().format('mm')
uni.request({
url: 'http://223.75.53.124:8005/grb/latest',
success: res => {
const myTm = res.data.data.tm
if (myTm) {
uni.request({
url: 'http://223.75.53.124:8005/grb/rainimglist',
data: {
tm: moment(myTm).format('YYYYMMDDHH')
},
success: res => {
console.log(res.data.data)
this.imgList = res.data.data
// let inx = restm(h)
// this.imgHours = res.data.data.imgHours[inx]
let tm = moment().add(1, 'days').format('MM月DD日')
let tm2 = moment().format('MM月DD日')
this.imgData = [`${tm2}08时`, `${tm}08时`]
// this.imgHourstm = [`${tm2}${h + 1}时`, `${tm2}${h + 2}时`]
}
})
}
}
})
},
getTmData() {
let hn = this.numPic > 0 ? this.numPic : 1
let h = moment().subtract(hn, 'hours').format()
let m = moment().format('mm')
console.log('hhh--', h, m, this.numPic)
let tms = null,
mm = null
let h1 = Number(h) - 1
if (h1 < 9) {
h1 = Number(h) - this.numPic
}
if (h1 < 10) {
h1 = `0${h1}`
}
if (m > 30) {
h1 = Number(h) - 1
let m1 = h > 10 ? h : `0${h}`
tms = `${this.imgtm}${m1}30`
mm = '30'
} else if (m < 10) {
tms = `${this.imgtm}${h1}`
mm = '00'
} else {
tms = `${this.imgtm}${h1}30`
mm = '30'
}
},
async getHoursImg() {
let h = moment().format('HH')
let m = moment().format('mm')
console.log('hhh--', h, m, this.numPic)
let tms = null,
mm = null
let h1 = Number(h) - 1
if (h1 < 10) {
let t = Number(h1) - Number(this.numPic)
h1 = `0${t}`
}
if (m > 30) {
h1 = Number(h) - 1
let t3 = Number(h) - this.numPic
if (this.numPic <= 0) {
let m3 = h1 > 10 ? h1 : `0${h1}`
tms = `${this.imgtm}${m3}30`
} else {
t3 = t3 < 10 ? `0${t3}` : t3
tms = `${this.imgtm}${t3}30`
}
mm = '30'
} else if (m < 10) {
tms = `${this.imgtm}${h1}00`
mm = '00'
} else {
tms = `${this.imgtm}${h1}30`
mm = '30'
}
console.log('小时', h1)
console.log('需要参数', tms)
uni.request({
url: 'http://223.75.53.124:8005/radar/latest',
success: res => {
let tm = moment(res.data.data.tm);
let subfix = '?rainFile=' + res.data.data.rainFile;
let url =
`http://shqxjs.cloudowr.cn/yj_folder/rain/radar/${tm.format('YYYYMM')}/${tm.format('DD')}/${tm.format('YYYYMMDDHHmm')}+00.02.jpg${subfix}`;
console.log(222222222227, url)
console.log('pic---', tms, res.data.data)
this.imgHoursList = {
'url': url
}
let m = moment().format('MM月DD日')
console.log('am222', this.imgHoursList)
let m1 = Number(h1) + 2
this.imgHourstm = [`${m}${h1}${mm}`, `${m}${m1}${mm}`]
if (url == null) {
this.numPic++
setTimeout(() => {
this.getHoursImg()
}, 10 * 1000)
} else {
this.numPic = 0
return
}
}
})
},
// async getInterval () {
// this.interval = setInterval(() => {
// this.getHoursImg()
// }, 60 * 1000)
// },
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()
}
},
async getDispatchStatus() {
try {
const res = await uni.$http.post('/gunshiApp/xfflood/xfEmerDispatchR/app/list', {
status: 1,
dispatchTypeList: ["0", "1"]
})
if (res.data.code == 200) {
this.dispatchStatus = res.data.data.length > 0 ? true : false
}
} catch (error) {
console.log(error);
}
},
async setInsert(menu2) {
try {
const params = {
createId: uni.getStorageSync('value').userId,
loginType: 1,
menu1: '首页',
menu2: menu2 || '首页',
}
const {
data
} = await uni.$http.post('/gunshiApp/xfflood/visitMenuLog/insert', params)
console.log('用户行为', params, data)
} catch (error) {}
},
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:00:00')
}
)
if (data.code == 200) {
console.log('rainChartData0,', data)
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) {
console.log('1111111data', data)
this.level = level(data.data.records[0].level)
this.yjStatus = data.data.records[0].status
} else {
this.level = '无'
}
}
} catch (e) {
uni.$showMsg()
}
},
myNavigateTo(url, menu2) {
uni.navigateTo({
url: url // 跳转到对应路径的页面
})
console.log(url);
this.setInsert(menu2)
}
// 响应级别
},
onLoad() {
// this.getSwiperList()
this.getOverview()
this.getDataTime()
this.getResponseLevel()
this.userList = uni.getStorageSync('value')
console.log(this.userList.userName, uni.getStorageSync('value'), '=============777777');
},
onShow() {
this.getReadStatus()
this.getResponseLevel()
this.getDispatchStatus()
this.setInsert()
// this.userList=uni.getStorageSync('value')
//
// console.log(this.userList.userName,uni.getStorageSync('value'),'=============777777');
if (this.limit == 1) {
this.getYjRead()
// this.getInterval()
this.getImgs()
this.getHoursImg()
}
}
// onUnload () {
// clearInterval(this.interval)
// this.interval = null
// }
}
</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;
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*/
.noData {
width: 100px;
}
</style>