feat(): 首页开发
parent
1bc56086b8
commit
edd7d8cc34
|
|
@ -0,0 +1,100 @@
|
|||
|
||||
import echarts from 'echarts/lib/echarts';
|
||||
import moment from 'moment';
|
||||
|
||||
export default function DrpOption(data=[]) {
|
||||
const maxY = Math.max(...data.map(item => item.sumDrp))
|
||||
let eopts = {
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
},
|
||||
grid: {
|
||||
x: 18,
|
||||
y: 24,
|
||||
x2: 28,
|
||||
y2: 36,
|
||||
borderWidth: 0,
|
||||
bottom: '10%',
|
||||
left: '8%',
|
||||
width: '90%',
|
||||
},
|
||||
calculable: true,
|
||||
xAxis: [
|
||||
{
|
||||
type: 'category',
|
||||
data: data.map(o => moment(o.time).format("HH:mm")),
|
||||
splitLine: {
|
||||
show: false
|
||||
},
|
||||
axisLabel: {
|
||||
color: '#bbb',
|
||||
fontSize: 14,
|
||||
overflow: 'truncate',
|
||||
},
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: '#dfdfdf',
|
||||
width: 0.5
|
||||
}
|
||||
},
|
||||
axisTick: {
|
||||
show: false
|
||||
}
|
||||
}
|
||||
],
|
||||
yAxis: [
|
||||
{
|
||||
type: 'value',
|
||||
position: 'left',
|
||||
splitLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: '#07a6ff',
|
||||
width: 0.25,
|
||||
type: 'dashed'
|
||||
}
|
||||
},
|
||||
axisLabel: {
|
||||
color: '#bbb',
|
||||
fontSize: 10,
|
||||
},
|
||||
axisLine: {
|
||||
show: false
|
||||
},
|
||||
axisTick: {
|
||||
show: false
|
||||
},
|
||||
min: 0,
|
||||
max:maxY
|
||||
}
|
||||
],
|
||||
// dataZoom: [
|
||||
// {
|
||||
// type: 'slider', // 设置为滑动条类型
|
||||
// xAxisIndex: 0, // 指定控制第一个 x 轴
|
||||
// start: 0, // 初始窗口的起始位置（百分比）
|
||||
// end: 100, // 初始窗口的结束位置（百分比）
|
||||
|
||||
// }
|
||||
// ],
|
||||
}
|
||||
let chartData = {
|
||||
series: [
|
||||
{
|
||||
name: '面雨量(mm)',
|
||||
type: 'bar',
|
||||
barWidth: '60%',
|
||||
data: data.map(o => o.sumDrp),
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: "#6395f9"
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
return {
|
||||
eopts,
|
||||
chartData
|
||||
}
|
||||
}
|
||||
|
|
@ -13,7 +13,7 @@
|
|||
<div class="info_name">
|
||||
<div v-if="userList.data">{{ userList.data.userName }}</div>
|
||||
<div v-if="userList.data">
|
||||
{{ userList.data.orgList[0].positionList[0].orgName || '' }}
|
||||
{{ userList.data.orgList[0].orgName || '' }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -32,6 +32,8 @@
|
|||
: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>
|
||||
|
|
@ -48,10 +50,12 @@
|
|||
src="../../static/tabs/ld.png"
|
||||
mode="aspectFit"
|
||||
></image
|
||||
><span>当前防汛应急响应：IV级</span>
|
||||
><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">
|
||||
|
|
@ -160,19 +164,21 @@
|
|||
<div v-else class="tableBox">
|
||||
<div class="table_div">
|
||||
<div class="table_cur">
|
||||
<table>
|
||||
<table style="width:100%;margin-top:-10%">
|
||||
<tr>
|
||||
<th style="width: 50px">序号</th>
|
||||
<th style="width: 50px;color:#59A7FF">序号</th>
|
||||
|
||||
<th v-if="showTextTypeTab == 1" style="width: 70%">水库</th>
|
||||
<th v-else style="width: 70%">区域</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%">降雨量(mm)</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: 70%;">
|
||||
{{ item.name }}
|
||||
</td>
|
||||
<td style="width: 50%">{{ item.drp }}</td>
|
||||
</tr>
|
||||
</div>
|
||||
|
|
@ -188,7 +194,6 @@
|
|||
</div>
|
||||
</div>
|
||||
</view>
|
||||
|
||||
<view class="info_24">
|
||||
<div class="heart">
|
||||
<p class="title">
|
||||
|
|
@ -200,6 +205,67 @@
|
|||
<image src="../../static/tabs/bigImg.png" 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>
|
||||
|
||||
|
|
@ -215,7 +281,9 @@ const dataType = {
|
|||
}
|
||||
|
||||
import moment from 'moment'
|
||||
|
||||
import {level} from "../../pages/utils/dicType"
|
||||
import {disType} from "../utils/dicType.js"
|
||||
import drpOption from "./chartOption.js"
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
|
|
@ -231,7 +299,38 @@ export default {
|
|||
ydate: '',
|
||||
showTextTypeTab: 1,
|
||||
tableData: {},
|
||||
tm: ''
|
||||
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
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
|
|
@ -307,9 +406,156 @@ export default {
|
|||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
},
|
||||
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 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) {
|
||||
|
|
@ -402,17 +648,43 @@ export default {
|
|||
|
||||
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()
|
||||
|
||||
},
|
||||
onShow(){
|
||||
this.getReadStatus()
|
||||
if(this.limit == 1){
|
||||
this.getYjRead()
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -469,6 +741,7 @@ export default {
|
|||
text-align: center;
|
||||
}
|
||||
.navIcon {
|
||||
position: relative;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
/* border-radius: 10px;
|
||||
|
|
@ -477,6 +750,15 @@ export default {
|
|||
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;
|
||||
|
|
@ -515,7 +797,7 @@ export default {
|
|||
|
||||
/* info_24 */
|
||||
.info_24 {
|
||||
padding: 20px;
|
||||
padding: 15px;
|
||||
background-color: #fff;
|
||||
margin-bottom: 12rpx;
|
||||
}
|
||||
|
|
@ -565,6 +847,7 @@ export default {
|
|||
|
||||
/* 表格 */
|
||||
.tableBox {
|
||||
width: 100%;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
|
|
@ -584,6 +867,7 @@ export default {
|
|||
color: #026be0;
|
||||
}
|
||||
.table_div {
|
||||
widows: 100%;
|
||||
height: 100%;
|
||||
max-width: calc(100% - 0px);
|
||||
max-height: calc(100vh - 24px);
|
||||
|
|
@ -616,7 +900,7 @@ export default {
|
|||
|
||||
.table_cur td {
|
||||
height: 56rpx;
|
||||
border-bottom: 1px solid #d8ddeb;
|
||||
border-bottom: 1px solid #E5E9F2;
|
||||
font-size: 14px;
|
||||
color: #2f4056;
|
||||
padding: 0 10px;
|
||||
|
|
|
|||
|
|
@ -27,13 +27,13 @@
|
|||
<u-icon name="arrow-up-fill" color="#000" size="20" v-show="!switchIcon"></u-icon>
|
||||
</view>
|
||||
<view class="rain-input" style="width: 50%;">
|
||||
<u--input
|
||||
<u-input
|
||||
placeholder="请输入站点"
|
||||
prefixIcon="search"
|
||||
prefixIconStyle="font-size: 22px;color: #909399"
|
||||
@change="formData = {...formData,stArg:e}"
|
||||
@change="changeForm"
|
||||
:value="formData.stArg"
|
||||
></u--input>
|
||||
></u-input>
|
||||
</view>
|
||||
<view style="display:flex" v-show="limit == 1">
|
||||
<view class="" @click="handleClick1" >
|
||||
|
|
@ -253,6 +253,9 @@
|
|||
}
|
||||
},
|
||||
methods: {
|
||||
changeForm(e){
|
||||
this.formData = {...this.formData,stArg:e}
|
||||
},
|
||||
handleJiangyu(e){
|
||||
if(this.rainTime){
|
||||
e.stopPropagation();
|
||||
|
|
|
|||
|
|
@ -24,4 +24,20 @@ export function disType(e) {
|
|||
type = 0;
|
||||
}
|
||||
return type;
|
||||
}
|
||||
}
|
||||
|
||||
// 响应等级判断
|
||||
// 县，乡镇判断
|
||||
export function level(e) {
|
||||
let name;
|
||||
if (e == 1) {
|
||||
name = "Ⅰ级";
|
||||
} else if (e == 2) {
|
||||
name = "Ⅱ级";
|
||||
} else if (e == 3) {
|
||||
name = "Ⅲ级";
|
||||
} else if (e == 4) {
|
||||
name = "Ⅳ级";
|
||||
}
|
||||
return name
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue