feat(): 雨量站模块开发
parent
40db662861
commit
b9c766102d
2
App.vue
2
App.vue
|
|
@ -13,7 +13,7 @@
|
|||
} else {
|
||||
uni.reLaunch({
|
||||
// url: '/pages/login/login'
|
||||
url:'/pages/skInfo/detail/index'
|
||||
url:'/pages/ylzList/detail/index'
|
||||
})
|
||||
console.log(token.secretKey,'App Launch2')
|
||||
}
|
||||
|
|
|
|||
|
|
@ -323,6 +323,12 @@
|
|||
"style": {
|
||||
"navigationBarTitleText": ""
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/ylzList/detail/index",
|
||||
"style": {
|
||||
"navigationBarTitleText": ""
|
||||
}
|
||||
}
|
||||
|
||||
],
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
<template>
|
||||
<view class="scroll-table">
|
||||
<view v-for="(item,index) in list" :key="index" >
|
||||
<view v-for="(item,index) in list" :key="index" style="margin:5px 20px 5px 10px">
|
||||
<Card :info="item" />
|
||||
</view>
|
||||
<view style="height:50px"></view>
|
||||
|
|
@ -46,5 +46,6 @@
|
|||
height: calc(100vh - 100px);
|
||||
overflow-y: auto;
|
||||
width:100%;
|
||||
padding: 10px 5px;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,148 @@
|
|||
<template>
|
||||
<view class="project-cotent">
|
||||
|
||||
<view class="project-basic">
|
||||
<view class="project-loc">
|
||||
<text style="opacity:0.5">工程位置：{{skInfo.resLoc}}</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="project-des" >
|
||||
<view v-for="(item,index) in tableData" :key="index" :style="index % 2 == 0 ? 'width:150px;':'width:197px;'">
|
||||
<view style="display:flex;align-items:center;margin:15px 0px;">
|
||||
<view class="circle-dot"></view>
|
||||
<view class="label-name">
|
||||
<text style="opacity:0.5">{{item.name}}</text>
|
||||
<text>{{item.value||"-"}}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="total-des">
|
||||
<view style="opacity:0.5">工程概况：</view>
|
||||
<view>{{skInfo.projOverview}}</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
<script>
|
||||
import moment from 'moment'
|
||||
const gmObj = {
|
||||
"1":"大 (1)型",
|
||||
"2":"大 (2)型",
|
||||
"3":"中型",
|
||||
"4":"小 (1)型",
|
||||
"5":"小 (2)型",
|
||||
"9":"其他",
|
||||
}
|
||||
const bxObj = {
|
||||
1:"是",
|
||||
0:"否",
|
||||
}
|
||||
export default {
|
||||
props:{
|
||||
skInfo:{
|
||||
type:Object,
|
||||
default:{}
|
||||
}
|
||||
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
list:[
|
||||
{
|
||||
name:"注册登记号",
|
||||
key:"regSn"
|
||||
},
|
||||
{
|
||||
name:"所在河流(水系)名称",
|
||||
key:"rvName"
|
||||
},
|
||||
{
|
||||
name:"水库模型",
|
||||
key:"engScal"
|
||||
},
|
||||
{
|
||||
name:"设计灌溉面积(亩)",
|
||||
key:'designIrrArea'
|
||||
},
|
||||
{
|
||||
name:"受益人口(人)",
|
||||
key:"feedPop"
|
||||
},
|
||||
{
|
||||
name:"是否病险",
|
||||
key:"isDanger"
|
||||
},
|
||||
{
|
||||
name:"开工日期",
|
||||
key:"startDate"
|
||||
},
|
||||
{
|
||||
name:"竣工日期",
|
||||
key:"compDate"
|
||||
},
|
||||
]
|
||||
}
|
||||
},
|
||||
computed:{
|
||||
tableData(){
|
||||
return this.list.map(item=>{
|
||||
if(item.key == "engScal"){
|
||||
this.skInfo[item.key] = gmObj[this.skInfo[item.key]]
|
||||
}
|
||||
if(item.key == "isDanger"){
|
||||
this.skInfo[item.key] = bxObj[this.skInfo[item.key]]
|
||||
}
|
||||
if(item.key == "startDate"){
|
||||
this.skInfo[item.key] = moment(this.skInfo[item.key]).format("YYYY-MM-DD")
|
||||
}
|
||||
if(item.key == "compDate"){
|
||||
this.skInfo[item.key] = moment(this.skInfo[item.key]).format("YYYY-MM-DD")
|
||||
}
|
||||
return {
|
||||
name:item.name,
|
||||
value:this.skInfo[item.key]
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss">
|
||||
.project-cotent{
|
||||
padding: 0px 3px;
|
||||
background-color: #f7f7f7;
|
||||
max-height: calc(100vh - 40px);
|
||||
overflow-y: auto;
|
||||
.project-basic{
|
||||
background-color: #ffffff;
|
||||
padding: 5px;
|
||||
margin: 5px 0;
|
||||
}
|
||||
.project-des{
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
border: 1px solid #f2f2f2;
|
||||
background-color: #ffffff;
|
||||
padding: 0 10px;
|
||||
.circle-dot{
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
border-radius: 50%;
|
||||
background-color: #409eff;
|
||||
margin-left: 10px;
|
||||
}
|
||||
.label-name{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
|
||||
flex:1
|
||||
}
|
||||
}
|
||||
}
|
||||
.total-des{
|
||||
margin-top: 10px;
|
||||
background-color: #ffffff;
|
||||
padding: 10px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -4,9 +4,12 @@
|
|||
fontSize:'18px'
|
||||
}" :height='44' :safeAreaInsetTop=true leftIconSize='20' leftIconColor='rgb(153, 153, 153)'>
|
||||
</u-navbar>
|
||||
<u-tabs :list="list1" @click="click" style="background-color: #fff;margin-top: 60px;"></u-tabs>
|
||||
<Jcxx v-show="tabs == 0"></Jcxx>
|
||||
<Zrtx v-show="tabs == 4"></Zrtx>
|
||||
<u-tabs :list="list1" @click="click" :current="tabs" style="background-color: #fff;margin-top: 60px;"></u-tabs>
|
||||
<Jcxx v-if="tabs == 0"></Jcxx>
|
||||
<BasicInfo v-if="tabs == 1" :skInfo="skInfo"></BasicInfo>
|
||||
<Tzcs v-if="tabs == 2" :skInfo="skInfo"></Tzcs>
|
||||
<Krqx v-if="tabs == 3"></Krqx>
|
||||
<Zrtx v-if="tabs == 4"></Zrtx>
|
||||
|
||||
</view>
|
||||
</template>
|
||||
|
|
@ -15,6 +18,9 @@
|
|||
import moment from 'moment'
|
||||
import Jcxx from "./jcxx.vue"
|
||||
import Zrtx from "../../skDetail/zrtx/zrtx.vue"
|
||||
import Krqx from "./krqx/index.vue"
|
||||
import BasicInfo from "./basicInfo.vue"
|
||||
import Tzcs from "./tzcs.vue"
|
||||
export default {
|
||||
|
||||
data() {
|
||||
|
|
@ -24,9 +30,7 @@
|
|||
stm: '',
|
||||
etm: ''
|
||||
},
|
||||
customStyle: {
|
||||
background: '#000'
|
||||
},
|
||||
|
||||
list1: [{
|
||||
name: '监测信息',
|
||||
}, {
|
||||
|
|
@ -38,12 +42,15 @@
|
|||
}, {
|
||||
name: '责任人'
|
||||
}],
|
||||
skInfo:{}
|
||||
skInfo:{},
|
||||
};
|
||||
},
|
||||
components:{
|
||||
Jcxx,
|
||||
Zrtx
|
||||
Zrtx,
|
||||
Krqx,
|
||||
BasicInfo,
|
||||
Tzcs
|
||||
},
|
||||
onLoad() {
|
||||
this.getList();
|
||||
|
|
|
|||
|
|
@ -68,14 +68,14 @@
|
|||
</view>
|
||||
</view>
|
||||
<view class="switch-btn">
|
||||
<u-subsection :list="subsectionList" :current="current" mode="subsection" @change="subsectionChange"></u-subsection>
|
||||
<u-subsection :list="subsectionList" :current="curNow" mode="subsection" @change="subsectionChange"></u-subsection>
|
||||
</view>
|
||||
<view class="show-content">
|
||||
<view style=" height: 500px; overflow-y: auto; padding:0" v-show="current == 0">
|
||||
<view style=" height: 500px; overflow-y: auto; padding:0" v-if="curNow == 0">
|
||||
<qiun-data-charts :chartData="chartData.chartData" :echartsApp="true" :eopts="chartData.eopts" />
|
||||
</view>
|
||||
<JcTable v-show="current == 1" :tableData='jcTableData'/>
|
||||
<Tjsj v-show="current == 2" />
|
||||
<JcTable v-if="curNow == 1" :tableData='jcTableData'/>
|
||||
<Tjsj v-if="curNow == 2" />
|
||||
</view>
|
||||
</view>
|
||||
|
||||
|
|
@ -124,7 +124,7 @@
|
|||
showTime:false,
|
||||
showTime1:false,
|
||||
subsectionList: ['图', '表', '统计值'],
|
||||
current:0,
|
||||
curNow:0,
|
||||
jcTableData:[],
|
||||
chartData: {},
|
||||
}
|
||||
|
|
@ -210,8 +210,8 @@
|
|||
this.etm = time;
|
||||
this.showTime1 = false
|
||||
},
|
||||
subsectionChange(e){
|
||||
this.current = e
|
||||
subsectionChange(e){
|
||||
this.curNow = e
|
||||
}
|
||||
},
|
||||
watch:{
|
||||
|
|
|
|||
|
|
@ -0,0 +1,80 @@
|
|||
import {GetInterval} from "../../../../utils/tools"
|
||||
export default function DrpOption(data) {
|
||||
const maxVal = Math.ceil(Math.max(...data.map(obj => obj.rz)))
|
||||
const minVal = Math.floor(Math.min(...data.map(obj => obj.rz)))
|
||||
const maxValX = Math.max(...data.map(obj => obj.w))
|
||||
const minValX = Math.min(...data.map(obj => obj.w))
|
||||
let arr = []
|
||||
|
||||
data.forEach(item=>{
|
||||
arr.push([item.w,item.rz])
|
||||
})
|
||||
let eopts = {
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
},
|
||||
grid: [
|
||||
{
|
||||
top: "12%",
|
||||
left: "12%",
|
||||
right: "18%",
|
||||
bottom: "8%"
|
||||
},
|
||||
],
|
||||
xAxis: [
|
||||
{
|
||||
name: "库容(万m³)",
|
||||
nameGap: 5,
|
||||
type: 'value',
|
||||
min:Math.floor(minValX / 5) *5,
|
||||
max:Math.ceil(maxValX / 5) *5,
|
||||
interval:GetInterval(minValX,maxValX),
|
||||
data: data.map(o => o.w),
|
||||
splitLine: {
|
||||
show: false
|
||||
},
|
||||
}
|
||||
],
|
||||
yAxis: [
|
||||
{
|
||||
type: 'value',
|
||||
name: "库水位(m)",
|
||||
minInterval:1,
|
||||
splitLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: '#07a6ff',
|
||||
width: 0.25,
|
||||
type: 'dotted'
|
||||
}
|
||||
},
|
||||
axisLabel: {
|
||||
color: '#333',
|
||||
fontSize: 12,
|
||||
},
|
||||
axisLine: {
|
||||
show: true
|
||||
},
|
||||
axisTick: {
|
||||
show: true,
|
||||
},
|
||||
min: minVal,
|
||||
max: maxVal
|
||||
}
|
||||
],
|
||||
};
|
||||
let chartData = {
|
||||
series: [
|
||||
{
|
||||
type: 'line',
|
||||
color: "#007AFD",
|
||||
data: arr,
|
||||
smooth: true
|
||||
},
|
||||
]
|
||||
};
|
||||
return {
|
||||
eopts,
|
||||
chartData
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,56 @@
|
|||
<template>
|
||||
<view>
|
||||
<view style="height: 250px; ">
|
||||
<qiun-data-charts :chartData="chartData.chartData" :echartsApp="true" :eopts="chartData.eopts" />
|
||||
</view>
|
||||
<view style="margin-top: 20px;">
|
||||
<Table :tableData="tableData"/>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
|
||||
</template>
|
||||
<script>
|
||||
import drpOptions from "./chartOptions.js"
|
||||
import Table from "./jcsjTable.vue"
|
||||
export default {
|
||||
components:{
|
||||
Table
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
show:false,
|
||||
chartData:{},
|
||||
tableData:[]
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
async getKrData(){
|
||||
try {
|
||||
const {data} = await uni.$http.post(
|
||||
"/gunshiApp/xyt/stZvarlB/list")
|
||||
if(data.code == 200){
|
||||
this.tableData = [...data.data];
|
||||
|
||||
}
|
||||
} catch (error) {
|
||||
uni.$showMsg();
|
||||
}
|
||||
}
|
||||
},
|
||||
watch:{
|
||||
tableData(n,o){
|
||||
if(n.length > 0){
|
||||
this.chartData = {...drpOptions(n)}
|
||||
this.show=true
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.getKrData()
|
||||
},
|
||||
}
|
||||
</script>
|
||||
<style lang="scss">
|
||||
|
||||
</style>
|
||||
|
|
@ -0,0 +1,85 @@
|
|||
<template>
|
||||
<div class="table_div">
|
||||
<div class="table_cur">
|
||||
<table style="width:100%;display:block">
|
||||
<tr>
|
||||
<th style="width: 50%;">
|
||||
水位(m)
|
||||
</th>
|
||||
<th style="width: 50%;">库容(万m³)</th>
|
||||
</tr>
|
||||
<!-- style="max-height: 480px; overflow-y: auto" -->
|
||||
<div class="scroll-table">
|
||||
<tr v-for="(item, index) in tableData" :key="index">
|
||||
<td style="width: 50%;">{{ item.rz}}</td>
|
||||
<td style="width:50%;">{{ item.w }}</td>
|
||||
</tr>
|
||||
<div style="height:180px"></div>
|
||||
</div>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import moment from "moment"
|
||||
export default {
|
||||
props:{
|
||||
tableData:{
|
||||
type:Array,
|
||||
default:[],
|
||||
}
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.table_div {
|
||||
height: 100%;
|
||||
max-width: calc(100% - 0px);
|
||||
max-height: calc(100vh);
|
||||
flex: 1;
|
||||
padding-top: 0px;
|
||||
overflow-x: scroll;
|
||||
}
|
||||
/*table样式*/
|
||||
.table_cur {
|
||||
width: 100%;
|
||||
empty-cells: show;
|
||||
border-collapse: collapse;
|
||||
font-size: 14px;
|
||||
}
|
||||
.scroll-table{
|
||||
height: calc(100vh - 180px);
|
||||
overflow-y: auto;
|
||||
width:'100%'
|
||||
}
|
||||
.table_cur tr {
|
||||
display: flex;
|
||||
line-height: 75rpx;
|
||||
}
|
||||
.table_cur th {
|
||||
height: 85rpx;
|
||||
color: #3399ef;
|
||||
background: #e1f3ff;
|
||||
font-size: 14px;
|
||||
// font-weight: bold;
|
||||
padding: 0px 10px;
|
||||
box-sizing: border-box;
|
||||
white-space: nowrap;
|
||||
text-align: center !important;
|
||||
}
|
||||
|
||||
.table_cur td {
|
||||
height: 65rpx;
|
||||
// border-bottom: 1px solid #d8ddeb;
|
||||
font-size: 14px;
|
||||
color: #2f4056;
|
||||
padding: 0 10px;
|
||||
box-sizing: border-box;
|
||||
white-space: nowrap;
|
||||
text-align: center !important;
|
||||
}
|
||||
/*table样式 end*/
|
||||
</style>
|
||||
|
|
@ -0,0 +1,119 @@
|
|||
<template >
|
||||
<view class="project-des" >
|
||||
<view v-for="(item,index) in tableData" :key="index" :style="index % 2 != 0 ? 'width:150px;':'width:197px;'">
|
||||
<view style="display:flex;align-items:center;margin:15px 0px;">
|
||||
<view class="circle-dot"></view>
|
||||
<view class="label-name">
|
||||
<text style="opacity:0.5">{{item.name}}</text>
|
||||
<text>{{item.value||"-"}}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
props:{
|
||||
skInfo:{
|
||||
type:Object,
|
||||
default:{}
|
||||
}
|
||||
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
list:[
|
||||
{
|
||||
name:"坝址以上流域面积(km²)",
|
||||
key:"watShedArea"
|
||||
},
|
||||
{
|
||||
name:"坝顶高程(m)",
|
||||
key:"crestElev"
|
||||
},
|
||||
{
|
||||
name:"校核洪水位(m)",
|
||||
key:"calFloodLev"
|
||||
},
|
||||
{
|
||||
name:"总库容(万m³)",
|
||||
key:"totCap"
|
||||
},
|
||||
{
|
||||
name:"设计洪水位(m)",
|
||||
key:"desFloodLev"
|
||||
},
|
||||
{
|
||||
name:"调洪库容(万m³)",
|
||||
key:"storFlCap"
|
||||
},
|
||||
{
|
||||
name:"正常蓄水位(m)",
|
||||
key:"normWatLev"
|
||||
},
|
||||
{
|
||||
name:"兴利库容(万m³)",
|
||||
key:"benResCap"
|
||||
},
|
||||
{
|
||||
name:"防洪高水位(m)",
|
||||
key:"uppLevFlco"
|
||||
},
|
||||
{
|
||||
name:"防洪库容(万m³)",
|
||||
key:"flcoCap"
|
||||
},
|
||||
{
|
||||
name:"汛限水位(m)",
|
||||
key:"flLowLimLev"
|
||||
},
|
||||
{
|
||||
name:"死水位(m)",
|
||||
key:"deadLev"
|
||||
},
|
||||
{
|
||||
name:"死库容(万m³)",
|
||||
key:"deadCap"
|
||||
},
|
||||
{
|
||||
name:"堰顶高程(m)",
|
||||
key:"wcrstel"
|
||||
},
|
||||
]
|
||||
}
|
||||
},
|
||||
computed:{
|
||||
tableData(){
|
||||
return this.list.map(item=>{
|
||||
return {
|
||||
name:item.name,
|
||||
value:this.skInfo[item.key]
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss">
|
||||
.project-des{
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
border: 1px solid #f2f2f2;
|
||||
background-color: #ffffff;
|
||||
padding: 0 10px;
|
||||
.circle-dot{
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
border-radius: 50%;
|
||||
background-color: #409eff;
|
||||
margin-left: 10px;
|
||||
}
|
||||
.label-name{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
|
||||
flex:1
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,172 @@
|
|||
<template>
|
||||
<view :style="{height:'100vh',overflow:'auto'}">
|
||||
<u-navbar :title="123" :autoBack="true" :titleStyle="{
|
||||
fontSize:'18px'
|
||||
}" :height='40' :safeAreaInsetTop=true leftIconSize='20' leftIconColor='rgb(153, 153, 153)'>
|
||||
</u-navbar>
|
||||
<view class="tab-bar" style="margin-top:70px">
|
||||
<view class="jcsj" @click="activeOne = 0" :class="{'active':activeOne == 0}">
|
||||
监测数据
|
||||
</view>
|
||||
<view class="tjsj" @click="activeOne = 1" :class="{'active':activeOne == 1}">
|
||||
统计数据
|
||||
</view>
|
||||
</view>
|
||||
<view style="padding:10px" v-if="activeOne == 0">
|
||||
<view class="time-ranger" >
|
||||
<view class="start-time">
|
||||
<text>开始时间</text>
|
||||
<text @click="showTime=true" style="margin-left:15%;color:#3399ef">{{stm}}</text>
|
||||
</view>
|
||||
<view class="end-time">
|
||||
<text>结束时间</text>
|
||||
<text @click="showTime1=true" style="margin:0 15%;color:#3399ef">{{etm}}</text>
|
||||
<view class="search-btn" @click="searchHandle">
|
||||
搜索
|
||||
</view>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
<view class="ylz-chart-area">
|
||||
<qiun-data-charts :chartData="chartData.chartData" :echartsApp="true" :eopts="chartData.eopts" />
|
||||
</view>
|
||||
<view class="ylz-table-area">
|
||||
<YlzTable :tableData="ylzData"></YlzTable>
|
||||
</view>
|
||||
</view>
|
||||
<view v-if="activeOne == 1" style="padding:10px">
|
||||
<Table></Table>
|
||||
</view>
|
||||
<u-datetime-picker
|
||||
:show="showTime"
|
||||
v-model="startTime"
|
||||
mode="datetime"
|
||||
@confirm="handleStartTime"
|
||||
@cancel="showTime=false"
|
||||
></u-datetime-picker>
|
||||
<u-datetime-picker
|
||||
:show="showTime1"
|
||||
v-model="endTime"
|
||||
mode="datetime"
|
||||
@confirm="handleEndTime"
|
||||
@cancel="showTime1=false"
|
||||
></u-datetime-picker>
|
||||
</view>
|
||||
</template>
|
||||
<script>
|
||||
import moment from'moment';
|
||||
import Table from "./tjsjTable.vue"
|
||||
import YlzTable from "./jcTable.vue"
|
||||
import drpOptions from './jcOptions'
|
||||
const stm = moment().subtract(7, 'days').set({minute: 0, second: 0}).format("YYYY-MM-DD HH:mm");
|
||||
const etm = moment().set({minute: 0, second: 0}).format("YYYY-MM-DD HH:mm");
|
||||
export default {
|
||||
components:{
|
||||
Table,
|
||||
YlzTable
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
startTime:stm,
|
||||
endTime:etm,
|
||||
stm,
|
||||
etm,
|
||||
showTime:false,
|
||||
showTime1:false,
|
||||
activeOne:0,
|
||||
ylzData:[],
|
||||
chartData1:{},
|
||||
chartData:{}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
|
||||
// 获取雨量信息
|
||||
async getrainInfo(){
|
||||
try {
|
||||
const {data} = await uni.$http.post(
|
||||
"/gunshiApp/xyt/attResBase/rainBasinDivision/queryStStbprpPerHour/StcdAndStartTimeAndEndTime",{
|
||||
stcd:"716164061",
|
||||
startTime:moment(this.stm).format("YYYY-MM-DD HH:mm:ss"),
|
||||
endTime:moment(this.etm).format("YYYY-MM-DD HH:mm:ss")
|
||||
})
|
||||
if(data.code == 200){
|
||||
this.ylzData = data.data;
|
||||
}
|
||||
} catch (error) {
|
||||
uni.$showMsg();
|
||||
}
|
||||
},
|
||||
|
||||
// 获取雨量图表信息
|
||||
async getrainChartInfo(){
|
||||
try {
|
||||
const {data} = await uni.$http.post(
|
||||
"/gunshiApp/xyt/attResBase/rainBasinDivision/queryStStbprpPerHourChart/StcdAndStartTimeAndEndTime",{
|
||||
stcd:"716164061",
|
||||
startTime:moment(this.stm).format("YYYY-MM-DD HH:mm:ss"),
|
||||
endTime:moment(this.etm).format("YYYY-MM-DD HH:mm:ss")
|
||||
})
|
||||
|
||||
if(data.code == 200){
|
||||
this.chartData1 = {...data.data}
|
||||
}
|
||||
} catch (error) {
|
||||
uni.$showMsg();
|
||||
}
|
||||
},
|
||||
handleStartTime(e){
|
||||
let time = moment(e.value).format("YYYY-MM-DD HH:mm")
|
||||
this.stm = time
|
||||
this.showTime = false
|
||||
},
|
||||
handleEndTime(e){
|
||||
let time = moment(e.value).format("YYYY-MM-DD HH:mm")
|
||||
this.etm = time;
|
||||
this.showTime1 = false
|
||||
},
|
||||
|
||||
searchHandle(){
|
||||
this.getrainInfo();
|
||||
this.getrainChartInfo();
|
||||
}
|
||||
},
|
||||
watch:{
|
||||
chartData1(n,o){
|
||||
this.chartData = {...drpOptions(n)}
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.getrainInfo();
|
||||
this.getrainChartInfo();
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.time-ranger{
|
||||
margin-bottom: 10px;
|
||||
.start-time, .end-time{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 10px 0;
|
||||
border-bottom: 1px solid #dfdfdf;
|
||||
}
|
||||
}
|
||||
.tab-bar{
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
padding: 10px 40px;
|
||||
border-bottom: 1px solid #dfdfdf;
|
||||
}
|
||||
.active{
|
||||
color: #39a6ff;
|
||||
}
|
||||
.ylz-chart-area{
|
||||
width: 100%;
|
||||
height: 230px;
|
||||
}
|
||||
.ylz-chart-table{
|
||||
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,181 @@
|
|||
|
||||
import echarts from 'echarts/lib/echarts';
|
||||
export default function DrpOption(echartData) {
|
||||
console.log("echartData",echartData);
|
||||
|
||||
let totalDrp = 0;
|
||||
const DRPLEVEL = [10, 20, 50, 100, 250];
|
||||
const maxVal = DRPLEVEL.find(o => o > totalDrp);
|
||||
const xMaxVal = echartData?.actual ? DRPLEVEL.find(o => {
|
||||
let max = Math.max(...echartData?.actual || [])
|
||||
return o > max
|
||||
}):maxVal
|
||||
// const xMaxVal = Math.ceil(Math.max(...echartData.actual)) + 2
|
||||
const yMaxVal = echartData?.actual ? DRPLEVEL.find(o => {
|
||||
let max = Math.max(...echartData?.total)
|
||||
return o > max
|
||||
}): maxVal
|
||||
let eopts = {
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
},
|
||||
grid: {
|
||||
x: 40,
|
||||
y: 30,
|
||||
x2: 30,
|
||||
y2: 28,
|
||||
borderWidth: 0
|
||||
},
|
||||
legend: {
|
||||
// 显示图例
|
||||
show: true,
|
||||
// 图例的位置
|
||||
data: ['实测', '累计']
|
||||
},
|
||||
calculable: true,
|
||||
xAxis: [
|
||||
{
|
||||
type: 'category',
|
||||
data: echartData.time,
|
||||
splitLine: {
|
||||
show: false
|
||||
},
|
||||
axisLabel: {
|
||||
color: '#333',
|
||||
fontSize: 12,
|
||||
format:"jcDataFormat"
|
||||
},
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: '#07a6ff',
|
||||
width: 0.5,
|
||||
}
|
||||
},
|
||||
axisTick: {
|
||||
show: false,
|
||||
},
|
||||
}
|
||||
],
|
||||
yAxis: [
|
||||
{
|
||||
type: 'value',
|
||||
position: 'left',
|
||||
name:"雨量mm",
|
||||
splitLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: '#07a6ff',
|
||||
width: 0.25,
|
||||
type: 'dashed'
|
||||
}
|
||||
},
|
||||
axisLabel: {
|
||||
color: '#333',
|
||||
fontSize: 12,
|
||||
},
|
||||
axisLine: {
|
||||
show: false
|
||||
},
|
||||
axisTick: {
|
||||
show: false,
|
||||
},
|
||||
min: 0,
|
||||
max: xMaxVal
|
||||
},
|
||||
{
|
||||
type: 'value',
|
||||
position: 'right',
|
||||
name:"累计mm",
|
||||
splitLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: '#07a6ff',
|
||||
width: 0.25,
|
||||
type: 'dashed'
|
||||
}
|
||||
},
|
||||
axisLabel: {
|
||||
color: '#333',
|
||||
fontSize: 12,
|
||||
},
|
||||
axisLine: {
|
||||
show: false
|
||||
},
|
||||
axisTick: {
|
||||
show: false,
|
||||
},
|
||||
min: 0,
|
||||
max: yMaxVal
|
||||
}
|
||||
],
|
||||
};
|
||||
let chartData = {
|
||||
series: [
|
||||
{
|
||||
name: '实测',
|
||||
type: 'bar',
|
||||
barWidth: '60%',
|
||||
data: echartData.actual,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
barBorderRadius: [3, 3, 0, 0],
|
||||
color: new echarts.graphic.LinearGradient(
|
||||
0, 0, 0, 1,
|
||||
[
|
||||
{ offset: 0, color: '#3876cd' },
|
||||
{ offset: 0.5, color: '#45b4e7' },
|
||||
{ offset: 1, color: '#54ffff' }
|
||||
]
|
||||
),
|
||||
},
|
||||
},
|
||||
label: {
|
||||
show: false,
|
||||
},
|
||||
markPoint: {
|
||||
data: [
|
||||
{ type: 'max', name: '最大值', symbol: 'circle', symbolSize: 1, symbolOffset: [0, -12] },
|
||||
]
|
||||
},
|
||||
},
|
||||
{
|
||||
yAxisIndex: 1,
|
||||
name: '累计',
|
||||
type: 'line',
|
||||
showSymbol: false,
|
||||
label: {
|
||||
show: false,
|
||||
},
|
||||
data: echartData.total,
|
||||
lineStyle: {
|
||||
normal: {
|
||||
width: 1,
|
||||
}
|
||||
},
|
||||
areaStyle: {
|
||||
normal: {
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
|
||||
offset: 0,
|
||||
color: 'rgba(3, 194, 236, 0.3)'
|
||||
}, {
|
||||
offset: 0.8,
|
||||
color: 'rgba(3, 194, 236, 0)'
|
||||
}
|
||||
], false),
|
||||
shadowColor: 'rgba(0, 0, 0, 0.1)',
|
||||
shadowBlur: 10
|
||||
}
|
||||
},
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: '#03C2EC'
|
||||
}
|
||||
},
|
||||
}
|
||||
]
|
||||
};
|
||||
return {
|
||||
eopts,
|
||||
chartData
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,89 @@
|
|||
<template>
|
||||
<div class="table_div">
|
||||
<div class="table_cur">
|
||||
<table style="width:100%;display:block">
|
||||
<tr>
|
||||
<th style="width: 12%;">
|
||||
序号
|
||||
</th>
|
||||
<th style="width: 50%;">
|
||||
时间
|
||||
</th>
|
||||
<th style="width: 38%;">小时雨量(mm)</th>
|
||||
</tr>
|
||||
<!-- style="max-height: 480px; overflow-y: auto" -->
|
||||
<div class="scroll-table">
|
||||
<tr v-for="(item, index) in tableData" :key="index">
|
||||
<td style="width: 12%;">{{index + 1}}</td>
|
||||
<td style="width: 50%;">{{ item.time}}</td>
|
||||
<td style="width:38%;">{{ item.sumDrp }}</td>
|
||||
</tr>
|
||||
<div style="height:180px"></div>
|
||||
</div>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import moment from "moment"
|
||||
export default {
|
||||
props:{
|
||||
tableData:{
|
||||
type:Array,
|
||||
default:[],
|
||||
}
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.table_div {
|
||||
height: 100%;
|
||||
max-width: calc(100% - 0px);
|
||||
// max-height: calc(80vh);
|
||||
flex: 1;
|
||||
padding-top: 0px;
|
||||
// overflow-x: scroll;
|
||||
}
|
||||
/*table样式*/
|
||||
.table_cur {
|
||||
width: 100%;
|
||||
empty-cells: show;
|
||||
border-collapse: collapse;
|
||||
font-size: 14px;
|
||||
}
|
||||
.scroll-table{
|
||||
height: calc(55vh - 180px);
|
||||
overflow-y: auto;
|
||||
width:'100%'
|
||||
}
|
||||
.table_cur tr {
|
||||
display: flex;
|
||||
line-height: 75rpx;
|
||||
}
|
||||
.table_cur th {
|
||||
height: 85rpx;
|
||||
color: #3399ef;
|
||||
background: #e1f3ff;
|
||||
font-size: 14px;
|
||||
// font-weight: bold;
|
||||
padding: 0px 10px;
|
||||
box-sizing: border-box;
|
||||
white-space: nowrap;
|
||||
text-align: center !important;
|
||||
}
|
||||
|
||||
.table_cur td {
|
||||
height: 65rpx;
|
||||
// border-bottom: 1px solid #d8ddeb;
|
||||
font-size: 14px;
|
||||
color: #2f4056;
|
||||
padding: 0 10px;
|
||||
box-sizing: border-box;
|
||||
white-space: nowrap;
|
||||
text-align: center !important;
|
||||
}
|
||||
/*table样式 end*/
|
||||
</style>
|
||||
|
|
@ -0,0 +1,139 @@
|
|||
<template>
|
||||
<view class="tjsj-box">
|
||||
<uni-row class="tjsj-row" :width="700">
|
||||
<uni-col :span="12">
|
||||
<view class="first-row">近1h雨量(mm)</view>
|
||||
</uni-col>
|
||||
<uni-col :span="12">
|
||||
<view class="second-row">{{tableData.h1||0}}</view>
|
||||
</uni-col>
|
||||
<uni-col :span="12">
|
||||
<view class="first-row">近3h雨量(mm)</view>
|
||||
</uni-col>
|
||||
<uni-col :span="12">
|
||||
<view class="second-row">{{tableData.h3||0}}</view>
|
||||
</uni-col>
|
||||
<uni-col :span="12">
|
||||
<view class="first-row">近6h雨量(mm)</view>
|
||||
</uni-col>
|
||||
<uni-col :span="12">
|
||||
<view class="second-row">{{tableData.h6||0}}</view>
|
||||
</uni-col>
|
||||
<uni-col :span="12">
|
||||
<view class="first-row">近12h雨量(mm)</view>
|
||||
</uni-col>
|
||||
<uni-col :span="12">
|
||||
<view class="second-row">{{tableData.h12||0}}</view>
|
||||
</uni-col>
|
||||
<uni-col :span="12">
|
||||
<view class="first-row">近24h雨量(mm)</view>
|
||||
</uni-col>
|
||||
<uni-col :span="12">
|
||||
<view class="second-row">{{tableData.h24||0}}</view>
|
||||
</uni-col>
|
||||
<uni-col :span="12">
|
||||
<view class="first-row">近48h雨量(mm)</view>
|
||||
</uni-col>
|
||||
<uni-col :span="12">
|
||||
<view class="second-row">{{tableData.h48||0}}</view>
|
||||
</uni-col>
|
||||
<uni-col :span="12">
|
||||
<view class="first-row">今日雨量(mm)</view>
|
||||
</uni-col>
|
||||
<uni-col :span="12">
|
||||
<view class="second-row">{{tableData.today||0}}</view>
|
||||
</uni-col>
|
||||
<uni-col :span="12">
|
||||
<view class="first-row">昨日雨量(mm)</view>
|
||||
</uni-col>
|
||||
<uni-col :span="12">
|
||||
<view class="second-row">{{tableData.yesterdayDrp||0}}</view>
|
||||
</uni-col>
|
||||
<uni-col :span="12">
|
||||
<view class="first-row">本月雨量(mm)</view>
|
||||
</uni-col>
|
||||
<uni-col :span="12">
|
||||
<view class="second-row">{{tableData.monthDrp||0}}</view>
|
||||
</uni-col>
|
||||
<uni-col :span="12">
|
||||
<view class="first-row">本年雨量(mm)</view>
|
||||
</uni-col>
|
||||
<uni-col :span="12">
|
||||
<view class="second-row">{{tableData.yearDrp||0}}</view>
|
||||
</uni-col>
|
||||
<uni-col :span="12">
|
||||
<view class="first-row">本年降雨天数</view>
|
||||
</uni-col>
|
||||
<uni-col :span="12">
|
||||
<view class="second-row">{{tableData.yearDrpDay||0}}/{{days}}</view>
|
||||
</uni-col>
|
||||
<uni-col :span="12">
|
||||
<view class="first-row" style="border-bottom: 1px solid #dfdfdf;">本年最大日雨量(mm)</view>
|
||||
</uni-col>
|
||||
<uni-col :span="12">
|
||||
<view class="second-row" style="display: flex; justify-content: center;border-bottom: 1px solid #dfdfdf;">
|
||||
<text>{{tableData.maxDrp||0}}</text>
|
||||
<text style="color: #E69224;">({{maxDrpTime}})</text>
|
||||
</view>
|
||||
</uni-col>
|
||||
|
||||
</uni-row>
|
||||
<view style="height:150px"></view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import moment from "moment"
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
tableData:{},
|
||||
days:moment().diff(moment().startOf('year'),'days')+1
|
||||
}
|
||||
},
|
||||
computed:{
|
||||
maxDrpTime(){
|
||||
if(this.tableData.maxDrpTime){
|
||||
return moment(this.tableData.maxDrpTime).format("YYYY-MM-DD")
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
async getTableData(){
|
||||
try{
|
||||
const {data} = await uni.$http.get(
|
||||
"/gunshiApp/xyt/attResBase/rainBasinDivision/queryStPptnDetails/stcd?stcd=716164061")
|
||||
if(data.code == 200){
|
||||
this.tableData = {...data.data};
|
||||
}
|
||||
}catch(e){
|
||||
uni.$showMsg()
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.getTableData()
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.tjsj-box{
|
||||
max-height: 100vh;
|
||||
.tjsj-row{
|
||||
.first-row{
|
||||
line-height: 40px;
|
||||
text-align: center;
|
||||
border-top: 1px solid #dfdfdf;
|
||||
border-left: 1px solid #dfdfdf;
|
||||
}
|
||||
.second-row{
|
||||
line-height: 40px;
|
||||
text-align: center;
|
||||
border-top: 1px solid #dfdfdf;
|
||||
border-left: 1px solid #dfdfdf;
|
||||
border-right: 1px solid #dfdfdf;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<view class="skinfo">
|
||||
<view class="skinfo" @click="toDetail()">
|
||||
<view class="title">
|
||||
<view class="left">
|
||||
<text>{{123}}</text>
|
||||
|
|
@ -36,8 +36,14 @@
|
|||
},
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
methods:{
|
||||
toDetail(){
|
||||
uni.navigateTo({
|
||||
url:'/pages/ylzList/detail/index'
|
||||
})
|
||||
},
|
||||
}}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
|
|
|||
|
|
@ -85,6 +85,9 @@ const cfe = {
|
|||
let val = value.data.coord[1]
|
||||
return `${months}月核定生态流量${val}m³/s`
|
||||
},
|
||||
"jcDataFormat": function (val) {
|
||||
return val.substr('2020-'.length, 11)
|
||||
},
|
||||
"yhidden": function (value, index, axis) {
|
||||
console.log("axis",axis);
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,12 @@
|
|||
export const GetInterval=(min,max,step=10)=>{
|
||||
const distance = Math.ceil(max) - Math.floor(min)
|
||||
console.log(distance);
|
||||
let s = (distance / step);
|
||||
console.log(s);
|
||||
if (s > 5){
|
||||
s = Math.ceil(s / 5) *5;
|
||||
return s;
|
||||
}else{
|
||||
return Math.ceil(s)
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue