469 lines
10 KiB
Vue
469 lines
10 KiB
Vue
<template>
|
|
<view class="container">
|
|
<!-- 滚动 -->
|
|
<view class="scrollBox">
|
|
<!-- 个人信息 -->
|
|
<HeaderUser />
|
|
<!-- 菜单 -->
|
|
<view class="navBar">
|
|
<div class="navList" v-for="(item, index) in menu" :key="index">
|
|
<div class="navItem" @click="myNavigateTo(item.url, item.value)">
|
|
<div class="navIcon">
|
|
<image
|
|
style="width: 100%; height: 100%"
|
|
:src="item.icon"
|
|
mode="aspectFit"
|
|
></image>
|
|
</div>
|
|
<div class="navTxt">{{ item.value }}</div>
|
|
</div>
|
|
</div>
|
|
</view>
|
|
<SkWarn />
|
|
<SkMaxDrp/>
|
|
<Forecast24 />
|
|
</view>
|
|
|
|
|
|
<!-- 底部 -->
|
|
<view
|
|
class="info_24"
|
|
:style="{
|
|
display: 'flex',
|
|
justifyContent: 'center',
|
|
alignItems: 'center',
|
|
padding: '5px 0',
|
|
margin: '0',
|
|
zIndex:'1',
|
|
boxShadow: '0px 0px 1px #eee',
|
|
}"
|
|
>
|
|
<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 HeaderUser from './headerUser.vue'
|
|
import Forecast24 from './forecast24.vue'
|
|
import SkWarn from './skWarn.vue'
|
|
import SkMaxDrp from './skMaxDrp.vue'
|
|
|
|
import moment from "moment";
|
|
export default {
|
|
components: {
|
|
// WarnSwiper,
|
|
HeaderUser,
|
|
Forecast24,
|
|
SkWarn,
|
|
SkMaxDrp,
|
|
},
|
|
data() {
|
|
return {
|
|
monthDay: "",
|
|
dataType,
|
|
default_src: uni.getStorageSync("avatar"),
|
|
tableData: [],
|
|
changeBool: false,
|
|
imgList: {},
|
|
menu:[
|
|
{
|
|
value: "视频监视",
|
|
key: 1,
|
|
icon: "../../static/tabs/spjk.png",
|
|
url: "/pages/videoPage/index",
|
|
},
|
|
{
|
|
value: "雨水情监测",
|
|
key: 2,
|
|
icon: "../../static/tabs/yq.png",
|
|
url: "/pages/water/water",
|
|
},
|
|
{
|
|
value: "安全监测",
|
|
key: 3,
|
|
icon: "../../static/tabs/aqjc.png",
|
|
url: "/pages/gqzq/index",
|
|
}
|
|
],
|
|
userList: {},
|
|
|
|
};
|
|
},
|
|
onPullDownRefresh() {
|
|
// this.getImgs();
|
|
},
|
|
computed: {
|
|
},
|
|
watch: {
|
|
},
|
|
methods: {
|
|
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();
|
|
}
|
|
},
|
|
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;
|
|
},
|
|
myNavigateTo(url, menu2) {
|
|
uni.navigateTo({
|
|
url: url, // 跳转到对应路径的页面
|
|
});
|
|
this.setInsert(menu2);
|
|
},
|
|
// 区域 /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();
|
|
}
|
|
},
|
|
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}时`]
|
|
},
|
|
});
|
|
}
|
|
},
|
|
});
|
|
},
|
|
previewImage(item) {
|
|
uni.previewImage({
|
|
urls: [item],
|
|
longPressActions: {
|
|
itemList: ["发送给朋友", "保存图片", "收藏"],
|
|
success: function (data) {
|
|
console.log(
|
|
"选中了第" +
|
|
(data.tapIndex + 1) +
|
|
"个按钮,第" +
|
|
(data.index + 1) +
|
|
"张图片"
|
|
);
|
|
},
|
|
fail: function (err) {
|
|
console.log(err.errMsg);
|
|
},
|
|
},
|
|
});
|
|
},
|
|
changeTable(val) {
|
|
this.changeBool = !this.changeBool;
|
|
if (val) {
|
|
this.getWeatherArea();
|
|
}
|
|
console.log("this.changeBool", this.changeBool);
|
|
},
|
|
},
|
|
onLoad() {
|
|
this.getSwiperList();
|
|
this.getDataTime();
|
|
},
|
|
onShow() {
|
|
this.getImgs();
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.container {
|
|
height: 100%;
|
|
overflow: hidden;
|
|
font-size: 14px;
|
|
line-height: 24px;
|
|
background-color: #f3f5f8;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-content: space-between
|
|
}
|
|
.scrollBox{
|
|
flex: 1;
|
|
overflow-y: scroll;
|
|
}
|
|
.footerBox{
|
|
|
|
}
|
|
.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 {
|
|
margin-bottom: 10px;
|
|
background: #ffffff;
|
|
padding: 20px 0;
|
|
box-shadow: 0px 0px 5px #eee;
|
|
/* text-align: center; */
|
|
display: flex;
|
|
justify-content: start;
|
|
align-items: center;
|
|
}
|
|
.navList {
|
|
// margin-right: 25px;
|
|
text-align: center;
|
|
}
|
|
.navItem{
|
|
width: 90px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
}
|
|
.navIcon {
|
|
position: relative;
|
|
width: 30px;
|
|
height: 30px;
|
|
|
|
padding: 10px;
|
|
background-color: #437cf2;
|
|
border-radius: 10px;
|
|
/* 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 {
|
|
padding: 15px;
|
|
background-color: #fff;
|
|
margin-bottom: 12rpx;
|
|
box-shadow: 0px 0px 5px #eee;
|
|
}
|
|
.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>
|
|
|