Merge branch 'qzc-dev'
commit
2bc1030ae3
6
App.vue
6
App.vue
|
|
@ -30,11 +30,13 @@
|
||||||
<style lang="scss">
|
<style lang="scss">
|
||||||
/*每个页面公共css */
|
/*每个页面公共css */
|
||||||
@import '@/uni_modules/uni-scss/index.scss';
|
@import '@/uni_modules/uni-scss/index.scss';
|
||||||
@import "@/uni_modules/uview-ui/index.scss";
|
@import "@/uni_modules/uview-ui/index.scss";
|
||||||
/* #ifndef APP-NVUE */
|
/* #ifndef APP-NVUE */
|
||||||
@import '@/static/customicons.css';
|
@import '@/static/customicons.css';
|
||||||
// 设置整个项目的背景色
|
// 设置整个项目的背景色
|
||||||
page {
|
page{
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
// background: linear-gradient(-180deg, #64acf0 0%, #ffffff 62%,#EEF3F6 70%);
|
// background: linear-gradient(-180deg, #64acf0 0%, #ffffff 62%,#EEF3F6 70%);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
2
main.js
2
main.js
|
|
@ -9,8 +9,8 @@ import {
|
||||||
|
|
||||||
Vue.config.productionTip = false
|
Vue.config.productionTip = false
|
||||||
uni.$http = $http
|
uni.$http = $http
|
||||||
// $http.baseUrl = 'http://local.gunshiiot.com:18083'
|
|
||||||
$http.baseUrl = 'http://36.139.207.50:18083'
|
$http.baseUrl = 'http://36.139.207.50:18083'
|
||||||
|
// $http.baseUrl = 'http://223.75.53.124:8002/chibirsvr/sys'
|
||||||
// 请求拦截器
|
// 请求拦截器
|
||||||
$http.beforeRequest = function(options) {
|
$http.beforeRequest = function(options) {
|
||||||
// uni.showLoading({
|
// uni.showLoading({
|
||||||
|
|
|
||||||
14
pages.json
14
pages.json
|
|
@ -152,6 +152,14 @@
|
||||||
},
|
},
|
||||||
"onMessage": "handleMessage"
|
"onMessage": "handleMessage"
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
"path": "pages/videoPage/index",
|
||||||
|
"style": {
|
||||||
|
"navigationBarTitleText": "",
|
||||||
|
"enablePullDownRefresh": false
|
||||||
|
},
|
||||||
|
"onMessage": "handleMessage"
|
||||||
|
},
|
||||||
{
|
{
|
||||||
"path": "pages/rainDetail/rainDetail",
|
"path": "pages/rainDetail/rainDetail",
|
||||||
"style": {
|
"style": {
|
||||||
|
|
@ -259,12 +267,6 @@
|
||||||
"selectedIconPath": "static/tabs/home2.png",
|
"selectedIconPath": "static/tabs/home2.png",
|
||||||
"text": "首页"
|
"text": "首页"
|
||||||
},
|
},
|
||||||
{
|
|
||||||
"pagePath": "pages/addressBook/addressBook",
|
|
||||||
"iconPath": "/static/tabs/phone_icon@2x.png",
|
|
||||||
"selectedIconPath": "static/tabs/phone_icon@2x2.png",
|
|
||||||
"text": "通讯录"
|
|
||||||
},
|
|
||||||
{
|
{
|
||||||
"pagePath": "pages/mypage/mypage",
|
"pagePath": "pages/mypage/mypage",
|
||||||
"iconPath": "/static/images/my2_icon@2x.png",
|
"iconPath": "/static/images/my2_icon@2x.png",
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,296 @@
|
||||||
|
<template>
|
||||||
|
<view class="info_24">
|
||||||
|
<div class="heart">
|
||||||
|
<p class="title">
|
||||||
|
<span class="line"></span><span class="h4">24小时天气预报</span>
|
||||||
|
</p>
|
||||||
|
</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>
|
||||||
|
|
||||||
|
<div class="imgs" style="height: 100%; text-align: center">
|
||||||
|
<!-- 24h天气预报图像-->
|
||||||
|
<image
|
||||||
|
v-if="!changeBool && imgList.img24h"
|
||||||
|
:src="imgList.img24h.url"
|
||||||
|
mode="aspectFit"
|
||||||
|
@click="previewImage(imgList.img24h.url)"
|
||||||
|
></image>
|
||||||
|
<!-- 表格-->
|
||||||
|
<div v-else class="tableBox">
|
||||||
|
<div v-if="!loading" class="table_div">
|
||||||
|
<div class="table_cur">
|
||||||
|
<table style="width: 100%">
|
||||||
|
<tr>
|
||||||
|
<th style="width: 50px; color: #59a7ff">序号</th>
|
||||||
|
<th style="width: 70%; color: #59a7ff">水库</th>
|
||||||
|
<th style="width: 50%; color: #59a7ff">24小时降雨量(mm)</th>
|
||||||
|
</tr>
|
||||||
|
<div
|
||||||
|
style="max-height: 260px; overflow-y: auto"
|
||||||
|
v-if="tableData.data"
|
||||||
|
>
|
||||||
|
<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>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div v-else style="color: #b8b8b8; width: 100%; margin: 130px auto;">加载中...</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
|
||||||
|
|
||||||
|
import moment from "moment";
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
changeBool: false,
|
||||||
|
imgList: {},
|
||||||
|
tableData: [],
|
||||||
|
loading:false,
|
||||||
|
tm:null,
|
||||||
|
};
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
async getWeatherArea(tm) {
|
||||||
|
this.loading = true
|
||||||
|
try {
|
||||||
|
const res = await uni.$http.post("/gunshiApp/xfflood/weather/area", { tm });
|
||||||
|
console.log(res);
|
||||||
|
this.tableData = res;
|
||||||
|
this.loading = false
|
||||||
|
} catch (e) {
|
||||||
|
uni.$showMsg();
|
||||||
|
}
|
||||||
|
},
|
||||||
|
async getImgs() {
|
||||||
|
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) => {
|
||||||
|
this.imgList = res.data.data;
|
||||||
|
let tm = moment().add(1, "days").format("MM月DD日");
|
||||||
|
let tm2 = moment().format("MM月DD日");
|
||||||
|
this.imgData = [`${tm2}08时`, `${tm}08时`];
|
||||||
|
},
|
||||||
|
});
|
||||||
|
}
|
||||||
|
},
|
||||||
|
});
|
||||||
|
},
|
||||||
|
changeTable(val) {
|
||||||
|
this.changeBool = !this.changeBool;
|
||||||
|
if (val && this.tm) {
|
||||||
|
this.getWeatherArea(this.tm);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
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);
|
||||||
|
},
|
||||||
|
},
|
||||||
|
});
|
||||||
|
},
|
||||||
|
getDataTime() {
|
||||||
|
let d1 = moment().format("YYYYMMDD");
|
||||||
|
let h1 = moment().format("HH") >= 20 ? "20" : "08";
|
||||||
|
this.tm = d1 + h1;
|
||||||
|
},
|
||||||
|
},
|
||||||
|
// 在组件实例被创建后立即调用。此时可以访问到 data 和 methods，但模板还未被渲染成 HTML，$el 属性不可用。适合做数据初始化
|
||||||
|
created() {
|
||||||
|
this.getImgs();
|
||||||
|
this.getDataTime();
|
||||||
|
},
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
/* 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>
|
||||||
|
|
||||||
|
|
@ -0,0 +1,103 @@
|
||||||
|
<template>
|
||||||
|
<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>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
const dataType = {
|
||||||
|
Monday: "星期一",
|
||||||
|
Tuesday: "星期二",
|
||||||
|
Wednesday: "星期三",
|
||||||
|
Thursday: "星期四",
|
||||||
|
Friday: "星期五",
|
||||||
|
Saturday: "星期六",
|
||||||
|
Sunday: "星期天",
|
||||||
|
};
|
||||||
|
|
||||||
|
import moment from "moment";
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
monthDay: "",
|
||||||
|
dayOfWeek:"",
|
||||||
|
dataType,
|
||||||
|
default_src: uni.getStorageSync("avatar"),
|
||||||
|
userList: {},
|
||||||
|
};
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
async getSwiperList() {
|
||||||
|
try {
|
||||||
|
const res = await uni.$http.get("/gunshiApp/xfflood/getLoginInfo");
|
||||||
|
console.log("--c-", res.data);
|
||||||
|
this.userList = res.data;
|
||||||
|
|
||||||
|
console.log("--cb-", this.userList);
|
||||||
|
} catch (e) {
|
||||||
|
uni.$showMsg();
|
||||||
|
}
|
||||||
|
},
|
||||||
|
getDataTime() {
|
||||||
|
this.monthDay = moment().format("MM月DD日");
|
||||||
|
this.dayOfWeek = moment().format("dddd");
|
||||||
|
},
|
||||||
|
},
|
||||||
|
// 在组件实例被创建后立即调用。此时可以访问到 data 和 methods，但模板还未被渲染成 HTML，$el 属性不可用。适合做数据初始化
|
||||||
|
created() {
|
||||||
|
this.getSwiperList();
|
||||||
|
this.getDataTime();
|
||||||
|
},
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.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;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
|
|
@ -0,0 +1,329 @@
|
||||||
|
<template>
|
||||||
|
<view class="info_24">
|
||||||
|
<div class="heart">
|
||||||
|
<p class="title">
|
||||||
|
<span class="line"></span><span class="h4">今日雨量</span>
|
||||||
|
</p>
|
||||||
|
</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>
|
||||||
|
|
||||||
|
<div class="imgs" style="height: 100%; text-align: center">
|
||||||
|
<!-- 24h天气预报图像-->
|
||||||
|
<qiun-data-charts v-if="!changeBool" type="pie" :opts="opts" :chartData="echartsOptios" />
|
||||||
|
<!-- 表格-->
|
||||||
|
<div v-else class="tableBox">
|
||||||
|
<div v-if="!loading" class="table_div">
|
||||||
|
<div class="table_cur">
|
||||||
|
<table style="width: 100%">
|
||||||
|
<tr>
|
||||||
|
<th style="width: 50px; color: #59a7ff">序号</th>
|
||||||
|
<th style="width: 30%; color: #59a7ff">水库</th>
|
||||||
|
<th style="width: 80%; color: #59a7ff">监测点</th>
|
||||||
|
<th style="width: 30%; color: #59a7ff">今日雨量(mm)</th>
|
||||||
|
</tr>
|
||||||
|
<div style="max-height: 260px; overflow-y: auto" v-if="tableData">
|
||||||
|
<tr v-for="(item, index) in tableData" :key="index">
|
||||||
|
<td style="width: 50px">{{ index + 1 }}</td>
|
||||||
|
<td style="width: 30%">{{ item.reservoir }}</td>
|
||||||
|
<td style="width: 80%">{{ item.station }}</td>
|
||||||
|
<td style="width: 30%">{{ item.rainfall }}</td>
|
||||||
|
</tr>
|
||||||
|
</div>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div v-else style="color: #b8b8b8; width: 100%; margin: 130px auto;">加载中...</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
|
||||||
|
|
||||||
|
import moment from "moment";
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
changeBool: false,
|
||||||
|
tableData: [],
|
||||||
|
loading:false,
|
||||||
|
tm:null,
|
||||||
|
opts:{
|
||||||
|
update: true,
|
||||||
|
color: ["#678ef2","#7dd5a9","#616f8f","#edbf45","#6c5ff0","#83c6e8","#8c61b4"],
|
||||||
|
padding: [20,30,20,0],
|
||||||
|
enableScroll: false,
|
||||||
|
extra: {
|
||||||
|
pie: {
|
||||||
|
activeOpacity: 0.5,
|
||||||
|
activeRadius: 10,
|
||||||
|
offsetAngle: 0,
|
||||||
|
labelWidth: 15,
|
||||||
|
border: false,
|
||||||
|
borderWidth: 3,
|
||||||
|
borderColor: "#FFFFFF"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
legend: {
|
||||||
|
show: true,
|
||||||
|
position: "right",
|
||||||
|
lineHeight: 25
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
},
|
||||||
|
computed: {
|
||||||
|
echartsOptios() {
|
||||||
|
const groups = {
|
||||||
|
'0mm': [],
|
||||||
|
'0.1~10mm': [],
|
||||||
|
'10~25mm': [],
|
||||||
|
'25~50mm': [],
|
||||||
|
'50~100mm': [],
|
||||||
|
'100~250mm': [],
|
||||||
|
'≥250mm': []
|
||||||
|
};
|
||||||
|
this.tableData.forEach(item => {
|
||||||
|
const r = item.rainfall;
|
||||||
|
if (r === 0) groups['0mm'].push(item);
|
||||||
|
else if (r > 0 && r < 10) groups['0.1~10mm'].push(item);
|
||||||
|
else if (r >= 10 && r < 25) groups['10~25mm'].push(item);
|
||||||
|
else if (r >= 25 && r < 50) groups['25~50mm'].push(item);
|
||||||
|
else if (r >= 50 && r < 100) groups['50~100mm'].push(item);
|
||||||
|
else if (r >= 100 && r < 250) groups['100~250mm'].push(item);
|
||||||
|
else groups['≥250mm'].push(item);
|
||||||
|
});
|
||||||
|
const chartData = []
|
||||||
|
for(let key in groups){
|
||||||
|
chartData.push({
|
||||||
|
name:key,
|
||||||
|
value:groups[key].length,
|
||||||
|
labelText:groups[key].length
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
let res = {
|
||||||
|
series: [
|
||||||
|
{ data: chartData }
|
||||||
|
]
|
||||||
|
};
|
||||||
|
return JSON.parse(JSON.stringify(res));
|
||||||
|
},
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
async getData() {
|
||||||
|
this.loading = true
|
||||||
|
try {
|
||||||
|
// const res = await uni.$http.post("/gunshiApp/xfflood/weather/area", { tm });
|
||||||
|
this.tableData = [
|
||||||
|
{ id: 1, reservoir: '思姑井水库', station: '思姑井水库雨量站', rainfall: 0.0 },
|
||||||
|
{ id: 2, reservoir: '四清水库', station: '四清水库雨量站', rainfall: 3.2 },
|
||||||
|
{ id: 3, reservoir: '曾家塘水库', station: '曾家塘水库雨量站', rainfall: 0.0 },
|
||||||
|
{ id: 4, reservoir: '双塘水库', station: '双塘水库雨量站', rainfall: 3.1 },
|
||||||
|
{ id: 5, reservoir: '东风水库', station: '东风水库雨量站', rainfall: 0.0 },
|
||||||
|
{ id: 6, reservoir: '红旗水库', station: '红旗水库雨量站', rainfall: 12.5 },
|
||||||
|
{ id: 7, reservoir: '胜利水库', station: '胜利水库雨量站', rainfall: 0.0 },
|
||||||
|
{ id: 8, reservoir: '团结水库', station: '团结水库雨量站', rainfall: 0.0 },
|
||||||
|
{ id: 9, reservoir: '跃进水库', station: '跃进水库雨量站', rainfall: 8.7 },
|
||||||
|
{ id: 10, reservoir: '光明水库', station: '光明水库雨量站', rainfall: 0.0 },
|
||||||
|
{ id: 11, reservoir: '五一水库', station: '五一水库雨量站', rainfall: 25.3 },
|
||||||
|
{ id: 12, reservoir: '向阳水库', station: '向阳水库雨量站', rainfall: 0.0 },
|
||||||
|
{ id: 13, reservoir: '永丰水库', station: '永丰水库雨量站', rainfall: 1.5 },
|
||||||
|
{ id: 14, reservoir: '新生水库', station: '新生水库雨量站', rainfall: 0.0 },
|
||||||
|
{ id: 15, reservoir: '和平水库', station: '和平水库雨量站', rainfall: 42.0 },
|
||||||
|
{ id: 16, reservoir: '红星水库', station: '红星水库雨量站', rainfall: 0.0 },
|
||||||
|
{ id: 17, reservoir: '卫星水库', station: '卫星水库雨量站', rainfall: 6.8 },
|
||||||
|
{ id: 18, reservoir: '先锋水库', station: '先锋水库雨量站', rainfall: 0.0 },
|
||||||
|
{ id: 19, reservoir: '东风二库', station: '东风二库雨量站', rainfall: 98.4 },
|
||||||
|
{ id: 20, reservoir: '红旗二库', station: '红旗二库雨量站', rainfall: 0.0 },
|
||||||
|
{ id: 21, reservoir: '长岭水库', station: '长岭水库雨量站', rainfall: 0.0 },
|
||||||
|
{ id: 22, reservoir: '青松水库', station: '青松水库雨量站', rainfall: 15.2 },
|
||||||
|
{ id: 23, reservoir: '翠屏水库', station: '翠屏水库雨量站', rainfall: 0.0 },
|
||||||
|
{ id: 24, reservoir: '碧云水库', station: '碧云水库雨量站', rainfall: 3.8 },
|
||||||
|
{ id: 25, reservoir: '龙潭水库', station: '龙潭水库雨量站', rainfall: 0.0 },
|
||||||
|
{ id: 26, reservoir: '凤鸣水库', station: '凤鸣水库雨量站', rainfall: 156.7 },
|
||||||
|
{ id: 27, reservoir: '鹤翔水库', station: '鹤翔水库雨量站', rainfall: 0.0 },
|
||||||
|
{ id: 28, reservoir: '鹭影水库', station: '鹭影水库雨量站', rainfall: 0.0 },
|
||||||
|
{ id: 29, reservoir: '麒麟水库', station: '麒麟水库雨量站', rainfall: 289.3 },
|
||||||
|
{ id: 30, reservoir: '玄武水库', station: '玄武水库雨量站', rainfall: 0.0 }
|
||||||
|
];
|
||||||
|
this.loading = false
|
||||||
|
} catch (e) {
|
||||||
|
uni.$showMsg();
|
||||||
|
}
|
||||||
|
},
|
||||||
|
changeTable(val) {
|
||||||
|
this.changeBool = !this.changeBool;
|
||||||
|
},
|
||||||
|
getDataTime() {
|
||||||
|
let d1 = moment().format("YYYYMMDD");
|
||||||
|
let h1 = moment().format("HH") >= 20 ? "20" : "08";
|
||||||
|
this.tm = d1 + h1;
|
||||||
|
},
|
||||||
|
},
|
||||||
|
// 在组件实例被创建后立即调用。此时可以访问到 data 和 methods，但模板还未被渲染成 HTML，$el 属性不可用。适合做数据初始化
|
||||||
|
created() {
|
||||||
|
this.getDataTime();
|
||||||
|
this.getData()
|
||||||
|
},
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
/* 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>
|
||||||
|
|
||||||
|
|
@ -0,0 +1,192 @@
|
||||||
|
<template>
|
||||||
|
<view class="info_24">
|
||||||
|
<div class="heart">
|
||||||
|
<p class="title">
|
||||||
|
<span class="line"></span><span class="h4">实时汛情</span>
|
||||||
|
</p>
|
||||||
|
<div>{{ tm }}</div>
|
||||||
|
</div>
|
||||||
|
<div class="chartChange fl">
|
||||||
|
<div class="tabItem tabLf" :class="{ bgBlue: tabKey === 1 }" @click="tabChange(1)">
|
||||||
|
<div class="tabNum">131</div>
|
||||||
|
<div class="tabText">水库</div>
|
||||||
|
</div>
|
||||||
|
<!-- <div class="borderLine"></div> -->
|
||||||
|
<div class="tabItem tabRf" :class="{ bgYellow: tabKey === 2 }" @click="tabChange(2)">
|
||||||
|
<div class="tabNum">9</div>
|
||||||
|
<div class="tabText">超汛限</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<qiun-data-charts type="column" :opts="opts" :chartData="echartsOptios" />
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
|
||||||
|
|
||||||
|
import moment from "moment";
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
tm:null,
|
||||||
|
tabOptions:['水库', '超汛限水库'],
|
||||||
|
tabKey:1,
|
||||||
|
opts:{
|
||||||
|
update: true,
|
||||||
|
color: ["#6e93f2","#efa161"],
|
||||||
|
padding: [15,15,0,5],
|
||||||
|
enableScroll: false,
|
||||||
|
legend: {
|
||||||
|
show:false,
|
||||||
|
},
|
||||||
|
xAxis: {
|
||||||
|
disableGrid: true
|
||||||
|
},
|
||||||
|
yAxis: {
|
||||||
|
showTitle: true,
|
||||||
|
data: [
|
||||||
|
{
|
||||||
|
position: "left",
|
||||||
|
title: "座",
|
||||||
|
titleOffsetX: -10, // 向左偏移 10px
|
||||||
|
titleOffsetY: -5, // 向上偏移 5px
|
||||||
|
min: 0,
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
extra: {
|
||||||
|
column: {
|
||||||
|
type: "group",
|
||||||
|
width: 30,
|
||||||
|
activeBgColor: "#000000",
|
||||||
|
activeBgOpacity: 0.08
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
data: [],
|
||||||
|
loading:false,
|
||||||
|
tm:null,
|
||||||
|
};
|
||||||
|
},
|
||||||
|
computed: {
|
||||||
|
echartsOptios() {
|
||||||
|
let res = {
|
||||||
|
categories: this.data.map(i=>i.type),
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
name: "水库",
|
||||||
|
show: this.tabKey===1?true:false,
|
||||||
|
data: this.data.map(i=>i.sk)
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "超汛限水库",
|
||||||
|
show: this.tabKey===2?true:false,
|
||||||
|
data: this.data.map(i=>i.cxx)
|
||||||
|
}
|
||||||
|
]
|
||||||
|
};
|
||||||
|
return JSON.parse(JSON.stringify(res));
|
||||||
|
},
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
async getData() {
|
||||||
|
this.loading = true
|
||||||
|
try {
|
||||||
|
// const res = await uni.$http.post("/gunshiApp/xfflood/weather/area", { tm });
|
||||||
|
this.data = [
|
||||||
|
{ type:'大(1)型',sk:4,cxx:0 },
|
||||||
|
{ type:'大(2)型',sk:2,cxx:1 },
|
||||||
|
{ type:'中型',sk:7,cxx:0 },
|
||||||
|
{ type:'小(1)型',sk:31,cxx:3 },
|
||||||
|
{ type:'小(2)型',sk:22,cxx:1 },
|
||||||
|
];
|
||||||
|
this.loading = false
|
||||||
|
} catch (e) {
|
||||||
|
uni.$showMsg();
|
||||||
|
}
|
||||||
|
},
|
||||||
|
tabChange(val) {
|
||||||
|
this.tabKey = val
|
||||||
|
},
|
||||||
|
getDataTime() {
|
||||||
|
this.tm = moment().format("YYYY-MM-DD HH");
|
||||||
|
},
|
||||||
|
},
|
||||||
|
// 在组件实例被创建后立即调用。此时可以访问到 data 和 methods，但模板还未被渲染成 HTML，$el 属性不可用。适合做数据初始化
|
||||||
|
created() {
|
||||||
|
this.getDataTime();
|
||||||
|
this.getData()
|
||||||
|
},
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.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: center;
|
||||||
|
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;
|
||||||
|
}
|
||||||
|
.chartChange {
|
||||||
|
text-align: center;
|
||||||
|
margin: 16rpx 0;
|
||||||
|
}
|
||||||
|
.tabItem{
|
||||||
|
width: 200px;
|
||||||
|
padding: 5px 0;
|
||||||
|
border: 1px solid #eee;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
.tabLf{
|
||||||
|
border-right: 0;
|
||||||
|
}
|
||||||
|
.tabRf{
|
||||||
|
border-left: 0;
|
||||||
|
}
|
||||||
|
.bgBlue{
|
||||||
|
border: 1px solid #6e93f2;
|
||||||
|
color: #6e93f2;
|
||||||
|
}
|
||||||
|
.bgYellow{
|
||||||
|
border: 1px solid #efa161;
|
||||||
|
color: #efa161;
|
||||||
|
}
|
||||||
|
.tabNum{
|
||||||
|
padding: 3px 0;
|
||||||
|
font-size: 14px;
|
||||||
|
line-height: 14px;
|
||||||
|
font-weight: 800;
|
||||||
|
}
|
||||||
|
.tabText{
|
||||||
|
padding: 3px 0;
|
||||||
|
font-size: 14px;
|
||||||
|
line-height: 14px;
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
|
||||||
|
</style>
|
||||||
|
|
||||||
|
|
@ -1,11 +1,11 @@
|
||||||
<template>
|
<template>
|
||||||
<view class="container">
|
<view class="container">
|
||||||
<div class="img">
|
<div class="img">
|
||||||
<image
|
<!-- <image
|
||||||
style="width: 100%; height: 100%"
|
style="width: 100%; height: 100%"
|
||||||
src="../../static/images/u8.png"
|
src="../../static/images/u8.png"
|
||||||
mode="scaleToFill"
|
mode="scaleToFill"
|
||||||
></image>
|
></image> -->
|
||||||
</div>
|
</div>
|
||||||
<uni-forms :modelValue="formData" class="form">
|
<uni-forms :modelValue="formData" class="form">
|
||||||
<uni-forms-item>
|
<uni-forms-item>
|
||||||
|
|
@ -128,6 +128,7 @@ export default {
|
||||||
|
|
||||||
//MD5加密
|
//MD5加密
|
||||||
const encryptData = data => {
|
const encryptData = data => {
|
||||||
|
console.log('777777',data);
|
||||||
const encryptedData = CryptoJS.MD5(data).toString()
|
const encryptedData = CryptoJS.MD5(data).toString()
|
||||||
return encryptedData
|
return encryptedData
|
||||||
}
|
}
|
||||||
|
|
@ -168,42 +169,14 @@ export default {
|
||||||
console.log('-----value------', res.data.data)
|
console.log('-----value------', res.data.data)
|
||||||
})
|
})
|
||||||
|
|
||||||
//获取userId并获取头像
|
uni.setStorageSync('avatar', '../../static/tabs/touxiang.png')
|
||||||
uni.$http
|
setTimeout(function () {
|
||||||
.get('/gunshiApp/xfflood/my/info/getByUserId')
|
uni.hideLoading()
|
||||||
.then(res => {
|
uni.reLaunch({
|
||||||
console.log('-----avatar1------', res.data)
|
url: '/pages/homeIndex/index'
|
||||||
if (res.data.data) {
|
|
||||||
let url =
|
|
||||||
'/gunshiApp/xfflood/bzProjectManipulationRecord/file/get/'
|
|
||||||
url = url + res.data.data.fileId
|
|
||||||
uni.$http.get(url).then(res => {
|
|
||||||
uni.setStorageSync(
|
|
||||||
'avatar',
|
|
||||||
'http://223.75.53.141:9102/test.by-lyf.tmp' +
|
|
||||||
res.data.data.filePath
|
|
||||||
)
|
|
||||||
console.log(
|
|
||||||
'-----avatar------',
|
|
||||||
uni.getStorageSync('avatar')
|
|
||||||
)
|
|
||||||
})
|
|
||||||
} else {
|
|
||||||
uni.setStorageSync('avatar', '../../static/tabs/touxiang.png')
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
// uni.showLoading({title:'努力登录中...', mask:true});
|
|
||||||
//登录成功后跳转界
|
|
||||||
setTimeout(function () {
|
|
||||||
uni.hideLoading()
|
|
||||||
uni.reLaunch({
|
|
||||||
url: '/pages/homeIndex/index'
|
|
||||||
})
|
|
||||||
}, 1000)
|
|
||||||
clearTimeout()
|
|
||||||
})
|
})
|
||||||
|
}, 1000)
|
||||||
|
clearTimeout()
|
||||||
}
|
}
|
||||||
} else if (res.data.code === 400) {
|
} else if (res.data.code === 400) {
|
||||||
//登录失败后弹出信息
|
//登录失败后弹出信息
|
||||||
|
|
@ -221,7 +194,7 @@ export default {
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
onLoad() {
|
onLoad() {
|
||||||
this.init();
|
// this.init();
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
@ -235,6 +208,12 @@ export default {
|
||||||
height: 100vh;
|
height: 100vh;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
background-color: #f3f5f8;
|
background-color: #f3f5f8;
|
||||||
|
|
||||||
|
background-image: url('/static/images/loginBg.png');
|
||||||
|
background-size: cover;
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
background-position: center;
|
||||||
|
|
||||||
}
|
}
|
||||||
.img {
|
.img {
|
||||||
width: 100vw;
|
width: 100vw;
|
||||||
|
|
@ -248,6 +227,11 @@ export default {
|
||||||
height: 8vh;
|
height: 8vh;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
|
|
||||||
|
color: #ffffff;
|
||||||
|
}
|
||||||
|
.custom-input-bg{
|
||||||
|
background-color: red!important;
|
||||||
}
|
}
|
||||||
.button {
|
.button {
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -9,7 +9,7 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="info">
|
<div class="info">
|
||||||
<uni-forms :modelValue="formData" >
|
<uni-forms :modelValue="formData" style="width: 100%;height: 100%;">
|
||||||
<uni-forms-item label="原密码" :required="true" class="form">
|
<uni-forms-item label="原密码" :required="true" class="form">
|
||||||
<uni-easyinput type="password" v-model="formData.oldSecretKey" placeholder="请输入原密码" class="password"/>
|
<uni-easyinput type="password" v-model="formData.oldSecretKey" placeholder="请输入原密码" class="password"/>
|
||||||
</uni-forms-item>
|
</uni-forms-item>
|
||||||
|
|
@ -85,11 +85,21 @@
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
|
.container{
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
.info{
|
||||||
|
display: flex;
|
||||||
|
flex:1;
|
||||||
|
}
|
||||||
.userinfo{
|
.userinfo{
|
||||||
border-radius: 5px;
|
border-radius: 5px;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: row;
|
flex-direction: row;
|
||||||
margin-top: 5vh;
|
margin-top: 4vh;
|
||||||
margin-left: 2vw;
|
margin-left: 2vw;
|
||||||
margin-bottom: 2vh;
|
margin-bottom: 2vh;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
|
@ -116,7 +126,8 @@
|
||||||
height: 50px;
|
height: 50px;
|
||||||
width: 95%;
|
width: 95%;
|
||||||
/* background-color: red; */
|
/* background-color: red; */
|
||||||
margin-left: 1vw;
|
/* margin-left: 2vw; */
|
||||||
|
margin: 0 11px;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
}
|
}
|
||||||
.password{
|
.password{
|
||||||
|
|
@ -128,12 +139,15 @@
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
flex-direction: column-reverse;
|
flex-direction: column-reverse;
|
||||||
margin-top: 50vh;
|
/* margin-top: 50vh; */
|
||||||
width: 92%;
|
width: 90%;
|
||||||
|
margin: 0 5%;
|
||||||
height: 6vh;
|
height: 6vh;
|
||||||
font-size: 20px;
|
font-size: 20px;
|
||||||
color: white;
|
color: white;
|
||||||
background-color: #007afd;
|
background-color: #007afd;
|
||||||
|
position: absolute;
|
||||||
|
bottom: 20px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -47,7 +47,7 @@
|
||||||
<script>
|
<script>
|
||||||
|
|
||||||
const func = [
|
const func = [
|
||||||
{img: '../../static/images/info.png', name: '个人信息', url:'/pages/personInfo/personInfo'},
|
// {img: '../../static/images/info.png', name: '个人信息', url:'/pages/personInfo/personInfo'},
|
||||||
{img: '../../static/images/password.png', name: '修改密码', url:'/pages/modifyPassword/modifyPassword'},
|
{img: '../../static/images/password.png', name: '修改密码', url:'/pages/modifyPassword/modifyPassword'},
|
||||||
]
|
]
|
||||||
|
|
||||||
|
|
@ -72,7 +72,7 @@
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
onShow() {
|
onShow() {
|
||||||
this.setInsert()
|
// this.setInsert()
|
||||||
},
|
},
|
||||||
mounted() {
|
mounted() {
|
||||||
this.default_src = uni.getStorageSync('avatar')
|
this.default_src = uni.getStorageSync('avatar')
|
||||||
|
|
@ -231,9 +231,11 @@
|
||||||
margin-right: 10px;
|
margin-right: 10px;
|
||||||
}
|
}
|
||||||
.null{
|
.null{
|
||||||
height: 45vh;
|
/* height: 45vh; */
|
||||||
|
flex: 1;
|
||||||
}
|
}
|
||||||
.button{
|
.button{
|
||||||
|
margin-bottom: 65px;
|
||||||
border-radius: 10px;
|
border-radius: 10px;
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,253 @@
|
||||||
|
<template>
|
||||||
|
<u-popup :show="this.popupOpen" mode="right" @close="closeBtn" >
|
||||||
|
<view style="padding: 30px 20px; ">
|
||||||
|
<text style="font-weight: bold;">溢洪道是否有闸</text>
|
||||||
|
<view class="searchBox">
|
||||||
|
<u-button
|
||||||
|
v-for="(item, index) in gateTypeOptions"
|
||||||
|
class="itemBtn"
|
||||||
|
:class="{ itemActive: formData.isGate === item.value }"
|
||||||
|
size="small"
|
||||||
|
:plain="true"
|
||||||
|
:key="item.value"
|
||||||
|
:text="item.name"
|
||||||
|
@click="formData.isGate = item.value"
|
||||||
|
></u-button>
|
||||||
|
</view>
|
||||||
|
<text style="font-weight: bold;">是否病险</text>
|
||||||
|
<view class="searchBox">
|
||||||
|
<u-button
|
||||||
|
v-for="(item, index) in isDangerOptions"
|
||||||
|
class="itemBtn"
|
||||||
|
:class="{ itemActive: formData.isDanger === item.value }"
|
||||||
|
size="small"
|
||||||
|
:plain="true"
|
||||||
|
:key="item.value"
|
||||||
|
:text="item.name"
|
||||||
|
@click="formData.isDanger = item.value"
|
||||||
|
></u-button>
|
||||||
|
</view>
|
||||||
|
<text style="font-weight: bold;">设备使用状态</text>
|
||||||
|
<view class="searchBox">
|
||||||
|
<u-button
|
||||||
|
v-for="(item, index) in equipmentStatusOptions"
|
||||||
|
class="itemBtn"
|
||||||
|
:class="{ itemActive: formData.equipmentStatus === item.value }"
|
||||||
|
size="small"
|
||||||
|
:plain="true"
|
||||||
|
:key="item.value"
|
||||||
|
:text="item.name"
|
||||||
|
@click="formData.equipmentStatus = item.value"
|
||||||
|
></u-button>
|
||||||
|
</view>
|
||||||
|
<text style="font-weight: bold;">是否视频</text>
|
||||||
|
<view class="searchBox">
|
||||||
|
<u-button
|
||||||
|
v-for="(item, index) in isVideoOptions"
|
||||||
|
class="itemBtn"
|
||||||
|
:class="{ itemActive: formData.isVideo === item.value }"
|
||||||
|
size="small"
|
||||||
|
:plain="true"
|
||||||
|
:key="item.value"
|
||||||
|
:text="item.name"
|
||||||
|
@click="formData.isVideo = item.value"
|
||||||
|
></u-button>
|
||||||
|
</view>
|
||||||
|
<text style="font-weight: bold;">水位状态</text>
|
||||||
|
<view class="searchBox">
|
||||||
|
<u-button
|
||||||
|
class="itemBtn2"
|
||||||
|
:class="{ itemActive: formData.waterStageCxx }"
|
||||||
|
size="small"
|
||||||
|
:plain="true"
|
||||||
|
text="超汛限水位"
|
||||||
|
@click="formData.waterStageCxx = !formData.waterStageCxx"
|
||||||
|
></u-button>
|
||||||
|
<u-button
|
||||||
|
class="itemBtn2"
|
||||||
|
:class="{ itemActive: formData.underSsw }"
|
||||||
|
size="small"
|
||||||
|
:plain="true"
|
||||||
|
text="低于死水位"
|
||||||
|
@click="formData.underSsw = !formData.underSsw"
|
||||||
|
></u-button>
|
||||||
|
|
||||||
|
<u-button
|
||||||
|
class="itemBtn2"
|
||||||
|
:class="{ itemActive: formData.waterStageCjh }"
|
||||||
|
size="small"
|
||||||
|
:plain="true"
|
||||||
|
text="超校核水位"
|
||||||
|
@click="formData.waterStageCjh = !formData.waterStageCjh"
|
||||||
|
></u-button>
|
||||||
|
<u-button
|
||||||
|
class="itemBtn2"
|
||||||
|
:class="{ itemActive: formData.waterStageCsj }"
|
||||||
|
size="small"
|
||||||
|
:plain="true"
|
||||||
|
text="超设计水位"
|
||||||
|
@click="formData.waterStageCsj = !formData.waterStageCsj"
|
||||||
|
></u-button>
|
||||||
|
|
||||||
|
<u-button
|
||||||
|
class="itemBtn2"
|
||||||
|
:class="{ itemActive: formData.underJh }"
|
||||||
|
size="small"
|
||||||
|
:plain="true"
|
||||||
|
text="低于校核水位"
|
||||||
|
@click="formData.underJh = !formData.underJh"
|
||||||
|
></u-button>
|
||||||
|
<u-button
|
||||||
|
class="itemBtn2"
|
||||||
|
:class="{ itemActive: formData.underSj }"
|
||||||
|
size="small"
|
||||||
|
:plain="true"
|
||||||
|
text="低于设计水位"
|
||||||
|
@click="formData.underSj = !formData.underSj"
|
||||||
|
></u-button>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<view class="footerBox">
|
||||||
|
<u-button text="重置" class="bottom-btn1" @click="reset"></u-button>
|
||||||
|
<u-button text="确认" color="#d9001b" class="bottom-btn2" @click="submitForm"></u-button>
|
||||||
|
</view>
|
||||||
|
</u-popup>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: 'ToolBar',
|
||||||
|
props:{
|
||||||
|
popupOpen:Boolean,
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
gateTypeOptions:[
|
||||||
|
{ name: '全部',value: '0' },
|
||||||
|
{ name: '有闸',value: '1' },
|
||||||
|
{ name: '无闸',value: '2' },
|
||||||
|
{ name: '其他',value: '3' },
|
||||||
|
],
|
||||||
|
isDangerOptions:[
|
||||||
|
{ name: '全部',value: '0' },
|
||||||
|
{ name: '是',value: '1' },
|
||||||
|
{ name: '否',value: '2' },
|
||||||
|
],
|
||||||
|
equipmentStatusOptions:[
|
||||||
|
{ name: '全部',value: '0' },
|
||||||
|
{ name: '正常',value: '1' },
|
||||||
|
{ name: '维护中',value: '2' },
|
||||||
|
{ name: '弃用',value: '3' },
|
||||||
|
],
|
||||||
|
isVideoOptions:[
|
||||||
|
{ name: '全部',value: '0' },
|
||||||
|
{ name: '有',value: '1' },
|
||||||
|
{ name: '无',value: '2' },
|
||||||
|
],
|
||||||
|
|
||||||
|
formData:{
|
||||||
|
isGate:'0',//溢洪道是否有闸
|
||||||
|
isDanger:'0',//是否病险
|
||||||
|
equipmentStatus:'0',//设备使用状态
|
||||||
|
isVideo:'0',//是否视频
|
||||||
|
isVideo:'0',//是否视频
|
||||||
|
waterStageCxx:false,//超汛限
|
||||||
|
waterStageCjh:false,//超校核
|
||||||
|
waterStageCsj:false,//超设计
|
||||||
|
underJh:false,//低于校核
|
||||||
|
underSsw:false,//低于死水位
|
||||||
|
underSj:false,//低于设计
|
||||||
|
}
|
||||||
|
};
|
||||||
|
},
|
||||||
|
computed: {
|
||||||
|
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
submitForm() {
|
||||||
|
// 将子组件的 formData 传递给父组件
|
||||||
|
this.$emit('form-submit', this.formData);
|
||||||
|
},
|
||||||
|
closeBtn() {
|
||||||
|
this.$emit('form-submit', null);
|
||||||
|
this.reset()
|
||||||
|
},
|
||||||
|
reset(){
|
||||||
|
this.formData = {
|
||||||
|
isGate:'0',//溢洪道是否有闸
|
||||||
|
isDanger:'0',//是否病险
|
||||||
|
equipmentStatus:'0',//设备使用状态
|
||||||
|
isVideo:'0',//是否视频
|
||||||
|
isVideo:'0',//是否视频
|
||||||
|
waterStageCxx:false,//超汛限
|
||||||
|
waterStageCjh:false,//超校核
|
||||||
|
waterStageCsj:false,//超设计
|
||||||
|
underJh:false,//低于校核
|
||||||
|
underSsw:false,//低于死水位
|
||||||
|
underSj:false,//低于设计
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
// 在组件实例被创建后立即调用。此时可以访问到 data 和 methods，但模板还未被渲染成 HTML，$el 属性不可用。适合做数据初始化
|
||||||
|
created() {
|
||||||
|
},
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.container {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
.searchBox{
|
||||||
|
margin: 10px 0 20px 0;
|
||||||
|
width: 300px;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
|
||||||
|
.itemBtn{
|
||||||
|
margin: 0 10px 0 0;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
width: 50px;
|
||||||
|
height: 26px;
|
||||||
|
border: 1px solid #eee;
|
||||||
|
color: #82848a;
|
||||||
|
}
|
||||||
|
.itemBtn2{
|
||||||
|
margin: 0 10px 10px 0;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
width: 120px;
|
||||||
|
height: 26px;
|
||||||
|
border: 1px solid #eee;
|
||||||
|
color: #82848a;
|
||||||
|
}
|
||||||
|
.itemActive{
|
||||||
|
background: #3c9cff;
|
||||||
|
border-color: #3c9cff;
|
||||||
|
color: #ffffff;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.footerBox{
|
||||||
|
display: flex;
|
||||||
|
position: absolute;
|
||||||
|
bottom: 20px;
|
||||||
|
right: 20px;
|
||||||
|
}
|
||||||
|
.bottom-btn1{
|
||||||
|
width: 80px;
|
||||||
|
height: 32px;
|
||||||
|
margin-right: 10px;
|
||||||
|
}
|
||||||
|
.bottom-btn2{
|
||||||
|
width: 80px;
|
||||||
|
height: 32px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
|
@ -0,0 +1,213 @@
|
||||||
|
<template>
|
||||||
|
<view class="page">
|
||||||
|
<view class="container">
|
||||||
|
<u-status-bar ></u-status-bar>
|
||||||
|
<view class="nav-bar">
|
||||||
|
<u-icon name="arrow-left" color="#000" size="20" @click="backTo" style="margin-left:10px"></u-icon>
|
||||||
|
<view style="font-size:18px">视频监控</view>
|
||||||
|
<view style="margin-right:10px;margin-top: 5px;">
|
||||||
|
<image @click="popupOpen = true" src="../../static/images/filter.png" style="width: 20px; height: 20px"></image>
|
||||||
|
<image src="../../static/images/star.svg" style="width: 19px; height: 19px;position: absolute;right: 37px;top: 11px;"></image>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="search-box">
|
||||||
|
<view class="search-item">
|
||||||
|
<view style="display:flex; justify-content: space-between; width: 18%;">
|
||||||
|
<view @click="handleClick" class="search-item-text">{{ getSkTypeName }}</view>
|
||||||
|
<u-icon name="arrow-down-fill" color="#000" size="16" v-show="switchIcon"></u-icon>
|
||||||
|
<u-icon name="arrow-up-fill" color="#000" size="16" v-show="!switchIcon"></u-icon>
|
||||||
|
</view>
|
||||||
|
<view class="rain-input" style="width: 82%;">
|
||||||
|
<u-input
|
||||||
|
placeholder="请输入站点"
|
||||||
|
prefixIcon="search"
|
||||||
|
prefixIconStyle="font-size: 22px;color: #909399"
|
||||||
|
@change="changeForm"
|
||||||
|
:value="searchVal"
|
||||||
|
></u-input>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<div class="scrollBox">
|
||||||
|
<div
|
||||||
|
class="itemBox"
|
||||||
|
v-for="(item, index) in skData"
|
||||||
|
:key="index"
|
||||||
|
>
|
||||||
|
<itemBox :data="item"/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</view>
|
||||||
|
<ToolBar :popupOpen="popupOpen" @form-submit="handleFormSubmit"/>
|
||||||
|
<u-picker
|
||||||
|
:show="show"
|
||||||
|
ref="uPicker"
|
||||||
|
:columns="columns"
|
||||||
|
keyName="label"
|
||||||
|
@confirm="confirm"
|
||||||
|
@cancel="cancel"
|
||||||
|
>
|
||||||
|
</u-picker>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import moment from "moment";
|
||||||
|
import ToolBar from "../toolBar"
|
||||||
|
import itemBox from "./itemBox.vue"
|
||||||
|
const skTypeOptions = [
|
||||||
|
{ label:'全部',value:0 },
|
||||||
|
{ label:'大(1)型',value:1 },
|
||||||
|
{ label:'大(2)型',value:2 },
|
||||||
|
{ label:'中型',value:3 },
|
||||||
|
{ label:'小(1)型',value:4 },
|
||||||
|
{ label:'小(2)型',value:5 },
|
||||||
|
]
|
||||||
|
const skTypeObj = {
|
||||||
|
0:'全部',
|
||||||
|
1:'大(1)型',
|
||||||
|
2:'大(2)型',
|
||||||
|
3:'中型',
|
||||||
|
4:'小(1)型',
|
||||||
|
5:'小(2)型',
|
||||||
|
}
|
||||||
|
|
||||||
|
export default {
|
||||||
|
components: {
|
||||||
|
ToolBar,
|
||||||
|
itemBox
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
skData:[],
|
||||||
|
popupOpen:false, //抽屉打开
|
||||||
|
show: false,
|
||||||
|
switchIcon:true,
|
||||||
|
skType:0,//水库类型
|
||||||
|
searchVal:'',//搜索文字
|
||||||
|
columns:[
|
||||||
|
skTypeOptions
|
||||||
|
],
|
||||||
|
};
|
||||||
|
},
|
||||||
|
computed: {
|
||||||
|
getSkTypeName() {
|
||||||
|
return skTypeObj[this.skType]
|
||||||
|
},
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
async getSkData(){
|
||||||
|
// const res = await uni.$http.get("/gunshiApp/xfflood/getLoginInfo");
|
||||||
|
this.skData = [
|
||||||
|
{name:'AA水库',danger:true, isStar:false,videoList:[{name:'摄像头1'},{name:'摄像头2'}]},
|
||||||
|
{name:'AB水库',danger:true, isStar:true,videoList:[{name:'摄像头1'},{name:'摄像头2'},{name:'摄像头3'},{name:'摄像头4'},{name:'摄像头7'},]},
|
||||||
|
{name:'BB水库',danger:false, isStar:true,videoList:[{name:'摄像头1'}]},
|
||||||
|
{name:'BB水库',danger:false, isStar:true,videoList:[{name:'摄像头1'}]},
|
||||||
|
{name:'BB水库',danger:false, isStar:true,videoList:[{name:'摄像头1'}]},
|
||||||
|
{name:'BB水库',danger:false, isStar:true,videoList:[{name:'摄像头1'}]},
|
||||||
|
{name:'BB水库',danger:false, isStar:true,videoList:[{name:'摄像头1'}]},
|
||||||
|
];
|
||||||
|
|
||||||
|
console.log("--1-", this.userList);
|
||||||
|
},
|
||||||
|
backTo(){
|
||||||
|
uni.navigateBack({delta:1})
|
||||||
|
},
|
||||||
|
handleClick(e){
|
||||||
|
// if(this.selecetItem1.basName && this.selecetItem1.basName != "全部"){
|
||||||
|
// e.stopPropagation();
|
||||||
|
// return
|
||||||
|
// }
|
||||||
|
this.show = true;
|
||||||
|
this.switchIcon = !this.switchIcon
|
||||||
|
},
|
||||||
|
changeForm(e){
|
||||||
|
this.searchVal = e
|
||||||
|
},
|
||||||
|
confirm(e) {
|
||||||
|
console.log('confirm', e)
|
||||||
|
this.show = false
|
||||||
|
this.switchIcon=true;
|
||||||
|
this.skType = e.value[0].value
|
||||||
|
},
|
||||||
|
cancel(e) {
|
||||||
|
this.show = false
|
||||||
|
},
|
||||||
|
handleFormSubmit(data) {
|
||||||
|
console.log('接收到子组件的 formData：', data);
|
||||||
|
this.popupOpen = false;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
// 在组件实例被创建后立即调用。此时可以访问到 data 和 methods，但模板还未被渲染成 HTML，$el 属性不可用。适合做数据初始化
|
||||||
|
created() {
|
||||||
|
this.getSkData()
|
||||||
|
},
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.page{
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
.container {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
.nav-bar{
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
width: 100%;
|
||||||
|
height: 44px;
|
||||||
|
border-bottom: 1px solid #dfdfdf;
|
||||||
|
}
|
||||||
|
.search-box{
|
||||||
|
width: 100%;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
flex-direction: column;
|
||||||
|
height: 70px;
|
||||||
|
.search-item{
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
width: 90%;
|
||||||
|
padding: 5px;
|
||||||
|
height: 30px;
|
||||||
|
background-color: #ececec;
|
||||||
|
border-radius: 5px;
|
||||||
|
|
||||||
|
.search-item-text{
|
||||||
|
display: flex;
|
||||||
|
flex: 1;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
.rain-input{
|
||||||
|
.u-border{
|
||||||
|
border-color: #ececec !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.scrollBox{
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
flex: 1;
|
||||||
|
overflow-y: auto;
|
||||||
|
background: #eee;
|
||||||
|
padding: 5px;
|
||||||
|
|
||||||
|
.itemBox{
|
||||||
|
background: #ffffff;
|
||||||
|
border-radius: 3px;
|
||||||
|
margin-bottom: 5px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
|
@ -0,0 +1,163 @@
|
||||||
|
<template>
|
||||||
|
<div class="itemBox">
|
||||||
|
<div class="itemBoxHead">
|
||||||
|
<u-icon name="file-text"></u-icon>
|
||||||
|
<div class="text" :class="{ danger: this.data.danger }">
|
||||||
|
{{ this.data.name + (this.data.danger?'「汛」':'')}}
|
||||||
|
</div>
|
||||||
|
<image v-if="this.data.isStar" src="../../static/images/star.svg" class="starImg"></image>
|
||||||
|
<image v-else src="../../static/images/star2.svg" class="starImg"></image>
|
||||||
|
<div class="rl" @click="myNavigateTo">
|
||||||
|
更多
|
||||||
|
<u-icon name="arrow-right-double" size="16"></u-icon>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="itemBoxBody">
|
||||||
|
<view class="image-wrapper">
|
||||||
|
<image src="../../static/images/skImg.png" class="skImg"></image>
|
||||||
|
</view>
|
||||||
|
<view class="image-wrapper-rl">
|
||||||
|
<div class="videoList">
|
||||||
|
<div v-for="item in this.data.videoList" class="videoListItem">
|
||||||
|
<image src="../../static/images/video.svg" class="videoImg"></image>
|
||||||
|
<div style="flex:1">{{ item.name }}</div>
|
||||||
|
<image src="../../static/images/videoPlay.svg" class="videoPlayImg"></image>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</view>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import moment from "moment";
|
||||||
|
|
||||||
|
export default {
|
||||||
|
components: {
|
||||||
|
},
|
||||||
|
props:{
|
||||||
|
data:Object,
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
|
||||||
|
};
|
||||||
|
},
|
||||||
|
computed: {
|
||||||
|
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
myNavigateTo() {
|
||||||
|
uni.navigateTo({
|
||||||
|
url: '/pages/rain/rain', // 跳转到对应路径的页面
|
||||||
|
});
|
||||||
|
},
|
||||||
|
},
|
||||||
|
// 在组件实例被创建后立即调用。此时可以访问到 data 和 methods，但模板还未被渲染成 HTML，$el 属性不可用。适合做数据初始化
|
||||||
|
created() {
|
||||||
|
},
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.itemBox{
|
||||||
|
padding: 5px;
|
||||||
|
.itemBoxHead{
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
position: relative;
|
||||||
|
font-size: 14px;
|
||||||
|
height: 30px;
|
||||||
|
// padding: 10px 0;
|
||||||
|
.text{
|
||||||
|
margin: 0 5px;
|
||||||
|
}
|
||||||
|
.danger{
|
||||||
|
color: #F59823;
|
||||||
|
}
|
||||||
|
.starImg{
|
||||||
|
width: 14px;
|
||||||
|
height: 14px;
|
||||||
|
}
|
||||||
|
.rl{
|
||||||
|
position: absolute;
|
||||||
|
font-size: 12px;
|
||||||
|
padding: 0 5px;
|
||||||
|
right: 0px;
|
||||||
|
top: 3px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
.rl:active {
|
||||||
|
background-color: #eee; /* 变深色 */
|
||||||
|
transform: scale(0.97); /* 轻微缩小 */
|
||||||
|
opacity: 0.8;
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
.itemBoxBody{
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
align-items: start;
|
||||||
|
justify-content: center;
|
||||||
|
padding: 5px 10px;
|
||||||
|
.image-wrapper{
|
||||||
|
width: 35%; /* 父元素宽度的30% */
|
||||||
|
position: relative;
|
||||||
|
/* 关键：padding-top 百分比相对于父元素宽度，100% 表示高度 = 宽度 */
|
||||||
|
padding-top: 35%;
|
||||||
|
.skImg{
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.image-wrapper-rl{
|
||||||
|
display: flex;
|
||||||
|
flex: 1;
|
||||||
|
position: relative;
|
||||||
|
padding-top: 35%;
|
||||||
|
margin-right: 10px;
|
||||||
|
|
||||||
|
.videoList{
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 10px;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
overflow-y: auto;
|
||||||
|
// display: flex;
|
||||||
|
// flex-direction: column;
|
||||||
|
// justify-content: start;
|
||||||
|
|
||||||
|
.videoListItem{
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
border-bottom: 1px solid #eee;
|
||||||
|
height: 28px;
|
||||||
|
|
||||||
|
.videoImg{
|
||||||
|
width: 16px;
|
||||||
|
height: 12px;
|
||||||
|
margin-right: 5px;
|
||||||
|
}
|
||||||
|
.videoPlayImg{
|
||||||
|
width: 12px;
|
||||||
|
height: 12px;
|
||||||
|
margin-right: 5px;
|
||||||
|
}
|
||||||
|
.videoPlayImg:active {
|
||||||
|
background-color: #eee; /* 变深色 */
|
||||||
|
transform: scale(0.97); /* 轻微缩小 */
|
||||||
|
opacity: 0.8;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
</style>
|
||||||
|
|
||||||
Binary file not shown.
|
After Width: | Height: | Size: 76 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 48 KiB |
|
|
@ -0,0 +1,12 @@
|
||||||
|
<?xml version="1.0" encoding="utf-8"?>
|
||||||
|
<svg version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" width="20px" height="20px" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<defs>
|
||||||
|
<mask fill="white" id="clip14">
|
||||||
|
<path d="M 14.17 18.83 L 10.487 16.803 C 9.963 16.514 9.11 16.516 8.589 16.803 L 4.907 18.83 C 3.86 19.407 3.173 18.88 3.373 17.662 L 4.076 13.369 C 4.176 12.757 3.911 11.909 3.489 11.479 L 0.511 8.437 C -0.337 7.572 -0.069 6.725 1.097 6.547 L 5.213 5.922 C 5.799 5.832 6.488 5.306 6.749 4.753 L 8.59 0.848 C 9.114 -0.263 9.966 -0.259 10.487 0.848 L 12.327 4.754 C 12.59 5.31 13.282 5.834 13.864 5.923 L 17.98 6.549 C 19.152 6.727 19.41 7.576 18.567 8.438 L 15.588 11.478 C 15.164 11.911 14.902 12.761 15.001 13.369 L 15.704 17.662 C 15.904 18.884 15.213 19.404 14.17 18.83 Z " fill-rule="evenodd" />
|
||||||
|
</mask>
|
||||||
|
</defs>
|
||||||
|
<g transform="matrix(1 0 0 1 -355 -122 )">
|
||||||
|
<path d="M 14.17 18.83 L 10.487 16.803 C 9.963 16.514 9.11 16.516 8.589 16.803 L 4.907 18.83 C 3.86 19.407 3.173 18.88 3.373 17.662 L 4.076 13.369 C 4.176 12.757 3.911 11.909 3.489 11.479 L 0.511 8.437 C -0.337 7.572 -0.069 6.725 1.097 6.547 L 5.213 5.922 C 5.799 5.832 6.488 5.306 6.749 4.753 L 8.59 0.848 C 9.114 -0.263 9.966 -0.259 10.487 0.848 L 12.327 4.754 C 12.59 5.31 13.282 5.834 13.864 5.923 L 17.98 6.549 C 19.152 6.727 19.41 7.576 18.567 8.438 L 15.588 11.478 C 15.164 11.911 14.902 12.761 15.001 13.369 L 15.704 17.662 C 15.904 18.884 15.213 19.404 14.17 18.83 Z " fill-rule="nonzero" fill="#ffffff" stroke="none" transform="matrix(1 0 0 1 355 122 )" />
|
||||||
|
<path d="M 14.17 18.83 L 10.487 16.803 C 9.963 16.514 9.11 16.516 8.589 16.803 L 4.907 18.83 C 3.86 19.407 3.173 18.88 3.373 17.662 L 4.076 13.369 C 4.176 12.757 3.911 11.909 3.489 11.479 L 0.511 8.437 C -0.337 7.572 -0.069 6.725 1.097 6.547 L 5.213 5.922 C 5.799 5.832 6.488 5.306 6.749 4.753 L 8.59 0.848 C 9.114 -0.263 9.966 -0.259 10.487 0.848 L 12.327 4.754 C 12.59 5.31 13.282 5.834 13.864 5.923 L 17.98 6.549 C 19.152 6.727 19.41 7.576 18.567 8.438 L 15.588 11.478 C 15.164 11.911 14.902 12.761 15.001 13.369 L 15.704 17.662 C 15.904 18.884 15.213 19.404 14.17 18.83 Z " stroke-width="2" stroke="#000000" fill="none" transform="matrix(1 0 0 1 355 122 )" mask="url(#clip14)" />
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
|
@ -0,0 +1,6 @@
|
||||||
|
<?xml version="1.0" encoding="utf-8"?>
|
||||||
|
<svg version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" width="16px" height="16px" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<g transform="matrix(1 0 0 1 -148 -15 )">
|
||||||
|
<path d="M 11.336 15.064 L 8.3896 13.4424 C 7.9704 13.2112 7.288 13.2128 6.8712 13.4424 L 3.9256 15.064 C 3.088 15.5256 2.5384 15.104 2.6984 14.1296 L 3.2608 10.6952 C 3.3408 10.2056 3.1288 9.5272 2.7912 9.1832 L 0.4088 6.7496 C -0.2696 6.0576 -0.0552 5.38 0.8776 5.2376 L 4.1704 4.7376 C 4.6392 4.6656 5.1904 4.2448 5.3992 3.8024 L 6.872 0.6784 C 7.2912 -0.2104 7.9728 -0.2072 8.3896 0.6784 L 9.8616 3.8032 C 10.072 4.248 10.6256 4.6672 11.0912 4.7384 L 14.384 5.2392 C 15.3216 5.3816 15.528 6.0608 14.8536 6.7504 L 12.4704 9.1824 C 12.1312 9.5288 11.9216 10.2088 12.0008 10.6952 L 12.5632 14.1296 C 12.7232 15.1072 12.1704 15.5232 11.336 15.064 Z " fill-rule="nonzero" fill="#259dff" stroke="none" transform="matrix(1 0 0 1 148 15 )" />
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
File diff suppressed because one or more lines are too long
|
|
@ -0,0 +1,6 @@
|
||||||
|
<?xml version="1.0" encoding="utf-8"?>
|
||||||
|
<svg version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" width="14px" height="9px" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<g transform="matrix(1 0 0 1 -144 -54 )">
|
||||||
|
<path d="M 14 1.23913043478261 C 14 0.788898301768375 13.6082491561019 0.423913043478261 13.125 0.423913043478261 L 12.7369375 0.423913043478261 C 12.50725 0.423913043478261 12.28675 0.508288043478261 12.1226875 0.658695652173913 L 10.9375 1.74782608695652 L 10.9375 1.23913043478261 C 10.9375 0.563782235261258 10.3498737341529 0.0163043478260874 9.625 0.016304347826087 L 1.3125 0.016304347826087 C 0.588875 0.016304347826087 0 0.564538043478261 0 1.23913043478261 L 0 7.76086956521739 C 0 8.43621776473874 0.587626265847084 8.98369565217391 1.3125 8.98369565217391 L 9.625 8.98369565217391 C 10.3495 8.98369565217391 10.9375 8.43586956521739 10.9375 7.76086956521739 L 10.9375 7.26317934782609 L 12.1226875 8.3523097826087 C 12.28675 8.50271739130435 12.50725 8.58709239130435 12.7369375 8.58709239130435 L 13.125 8.58709239130435 C 13.6082491561019 8.58709239130435 14 8.22210713301423 14 7.771875 L 14 1.23913043478261 Z M 9.625 8.16847826086957 L 1.3125 8.16847826086957 C 1.071 8.16847826086957 0.875 7.98546195652174 0.875 7.76086956521739 L 0.875 1.23913043478261 C 0.875 1.01401436827549 1.07087542194903 0.831521739130435 1.3125 0.831521739130435 L 9.625 0.831521739130435 C 9.8660625 0.831521739130435 10.0625 1.01413043478261 10.0625 1.23913043478261 L 10.0625 7.76086956521739 C 10.0625 7.98546195652174 9.8660625 8.16847826086957 9.625 8.16847826086957 Z M 13.125 1.23913043478261 L 13.125 7.771875 L 12.6875 7.771875 L 10.9375 6.14144021739131 L 10.9375 6.1304347826087 L 10.5 5.72282608695652 L 10.5 3.27717391304348 L 12.6875 1.23913043478261 L 13.125 1.23913043478261 Z " fill-rule="nonzero" fill="#409eff" stroke="none" transform="matrix(1 0 0 1 144 54 )" />
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
|
@ -0,0 +1,6 @@
|
||||||
|
<?xml version="1.0" encoding="utf-8"?>
|
||||||
|
<svg version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" width="16px" height="16px" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<g transform="matrix(1 0 0 1 -344 -50 )">
|
||||||
|
<path d="M 7.99999715909091 15.9545397727273 C 3.60696843039773 15.9545397727273 0.0454545454545455 12.3930258877841 0.0454545454545455 7.99999715909091 C 0.0454545454545455 3.60696843039773 3.60696843039773 0.0454545454545455 7.99999715909091 0.0454545454545455 C 12.3930258877841 0.0454545454545455 15.9545397727273 3.60696843039773 15.9545397727273 7.99999715909091 C 15.9545397727273 12.3930258877841 12.3930258877841 15.9545397727273 7.99999715909091 15.9545397727273 Z M 11.8542382102273 7.48825491832386 L 6.27492201704545 4.408786328125 C 5.76371008522727 4.1271955078125 5.34848295454545 4.37007421875 5.34848295454545 4.95340733309659 L 5.34848295454545 11.0460566761364 C 5.34848295454545 11.6251473721591 5.76317977627841 11.8727988103693 6.27492201704545 11.5906776988636 L 11.8542382102273 8.51120909090909 C 12.3643895419034 8.22908797940341 12.3654501420455 7.77090633877841 11.8542382102273 7.48825491832386 Z " fill-rule="nonzero" fill="#037bfb" stroke="none" transform="matrix(1 0 0 1 344 50 )" />
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
Binary file not shown.
|
After Width: | Height: | Size: 5.6 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 5.3 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 4.6 KiB |
Loading…
Reference in New Issue