feat():水库详情开发
parent
6ce3900702
commit
c8a6ae71e1
|
|
@ -2,7 +2,7 @@
|
||||||
"name" : "赤壁水利",
|
"name" : "赤壁水利",
|
||||||
"appid" : "__UNI__1AC9CFD",
|
"appid" : "__UNI__1AC9CFD",
|
||||||
"description" : "",
|
"description" : "",
|
||||||
"versionName" : "1.0.0",
|
"versionName" : "1.0.2",
|
||||||
"versionCode" : 1,
|
"versionCode" : 1,
|
||||||
"transformPx" : false,
|
"transformPx" : false,
|
||||||
"app-plus" : {
|
"app-plus" : {
|
||||||
|
|
|
||||||
|
|
@ -2,7 +2,14 @@
|
||||||
"easycom": {
|
"easycom": {
|
||||||
"^u-(.*)": "@/uni_modules/uview-ui/components/u-$1/u-$1.vue"
|
"^u-(.*)": "@/uni_modules/uview-ui/components/u-$1/u-$1.vue"
|
||||||
},
|
},
|
||||||
"pages": [{
|
"pages": [
|
||||||
|
{
|
||||||
|
"path": "pages/simpleResviror/index",
|
||||||
|
"style": {
|
||||||
|
"navigationBarTitleText": ""
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
"path": "pages/login/login",
|
"path": "pages/login/login",
|
||||||
"style": {
|
"style": {
|
||||||
"navigationBarTitleText": ""
|
"navigationBarTitleText": ""
|
||||||
|
|
|
||||||
|
|
@ -179,7 +179,7 @@ export default function DrpOption(data=[],wrz,grz) {
|
||||||
lineStyle: {
|
lineStyle: {
|
||||||
type: "dashed"
|
type: "dashed"
|
||||||
},
|
},
|
||||||
data: data.map(o => grz),
|
data: data.map(o => Number(grz)),
|
||||||
symbol: 'none' // 设置标记点为'none'，即去掉圆点
|
symbol: 'none' // 设置标记点为'none'，即去掉圆点
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
|
|
@ -189,7 +189,7 @@ export default function DrpOption(data=[],wrz,grz) {
|
||||||
type: 'line',
|
type: 'line',
|
||||||
color: "#F59A23",
|
color: "#F59A23",
|
||||||
barWidth: '60%',
|
barWidth: '60%',
|
||||||
data: data.map(o => wrz),
|
data: data.map(o => Number(wrz)),
|
||||||
lineStyle: {
|
lineStyle: {
|
||||||
type: "dashed"
|
type: "dashed"
|
||||||
},
|
},
|
||||||
|
|
@ -199,7 +199,7 @@ export default function DrpOption(data=[],wrz,grz) {
|
||||||
name: '降雨量',
|
name: '降雨量',
|
||||||
type: 'bar',
|
type: 'bar',
|
||||||
barWidth: '60%',
|
barWidth: '60%',
|
||||||
data: data.map(o => o.drp).reverse(),
|
data: data.map(o => Number(o.drp)).reverse(),
|
||||||
itemStyle: {
|
itemStyle: {
|
||||||
color: "#007AFD",
|
color: "#007AFD",
|
||||||
},
|
},
|
||||||
|
|
@ -231,7 +231,7 @@ export default function DrpOption(data=[],wrz,grz) {
|
||||||
label: {
|
label: {
|
||||||
show: false,
|
show: false,
|
||||||
},
|
},
|
||||||
data: data.map(o => o.tq),
|
data: data.map(o => Number(o.tq)),
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -26,7 +26,7 @@
|
||||||
</view>
|
</view>
|
||||||
<view class="jcsj-content">
|
<view class="jcsj-content">
|
||||||
<view class="jcsj-charts" v-if="selactOne == 0">
|
<view class="jcsj-charts" v-if="selactOne == 0">
|
||||||
<qiun-data-charts :chartData="chartData.chartData" :echartsApp="true" :eopts="chartData.eopts" />
|
<qiun-data-charts type="line" :chartData="chartData.chartData" :echartsApp="true" :eopts="chartData.eopts" />
|
||||||
</view>
|
</view>
|
||||||
<view style="margin-top: 20px;" v-if="selactOne == 1">
|
<view style="margin-top: 20px;" v-if="selactOne == 1">
|
||||||
<JcsjTable :tableData="tableData" />
|
<JcsjTable :tableData="tableData" />
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,57 @@
|
||||||
|
<template>
|
||||||
|
<view class="aqjc-box">
|
||||||
|
<view class="aqjc-tabs">
|
||||||
|
<u-tabs
|
||||||
|
:list="list"
|
||||||
|
@click="tabsClick"
|
||||||
|
:scrollable="false"
|
||||||
|
:activeStyle="{
|
||||||
|
color: '#34a4fe',
|
||||||
|
}"
|
||||||
|
></u-tabs>
|
||||||
|
</view>
|
||||||
|
<view class="aqjc-content">
|
||||||
|
<Wyjc v-if = "status == 0" :tableData="wyTable"/>
|
||||||
|
<Syjc v-if="status == 1" :tableData="syTable"/>
|
||||||
|
<Sljc v-if="status == 2" :tableData="slTable" />
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
<script>
|
||||||
|
import Sljc from './sljc.vue';
|
||||||
|
import Syjc from './syjc.vue';
|
||||||
|
import Wyjc from './wyjc.vue';
|
||||||
|
export default {
|
||||||
|
components: {
|
||||||
|
Wyjc,
|
||||||
|
Syjc,
|
||||||
|
Sljc
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
list: [{ name: '位移监测' }, { name: '渗压监测' }, { name: '渗流监测' }],
|
||||||
|
status: 0,
|
||||||
|
wyTable: [],
|
||||||
|
syTable: [],
|
||||||
|
slTable:[]
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
tabsClick(e) {
|
||||||
|
this.status = e?.index;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.aqjc-box{
|
||||||
|
padding: 5px;
|
||||||
|
.aqjc-tabs{
|
||||||
|
width: 100%;
|
||||||
|
background-color: #dff0f8;
|
||||||
|
}
|
||||||
|
.gcgk{
|
||||||
|
padding: 5px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,169 @@
|
||||||
|
<template>
|
||||||
|
<view>
|
||||||
|
<view class="search-bar">
|
||||||
|
<view class="time-ranger">
|
||||||
|
<uni-datetime-picker type="daterange" v-model="tm" @change="handleRanger" :clear-icon="false"
|
||||||
|
rangeSeparator="至"></uni-datetime-picker>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 表格容器 - 统一滚动 -->
|
||||||
|
<div class="table-container">
|
||||||
|
<!-- 表头 -->
|
||||||
|
<div class="tableHead">
|
||||||
|
<div class="td fixed-col">序号</div>
|
||||||
|
<div class="td fixed-col">监测点</div>
|
||||||
|
<div class="td fixed-col time-col">监测时间</div>
|
||||||
|
<!-- 动态列 -->
|
||||||
|
<div v-for="(col, index) in dynamicColumns" :key="index" class="td dynamic-col">
|
||||||
|
{{ col.name }}(L/s)
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 表体 -->
|
||||||
|
<div class="tableBody">
|
||||||
|
<div v-for="(item, index) in tableData" :key="index" class="tableRow">
|
||||||
|
<div class="td fixed-col">{{ index+1 }}</div>
|
||||||
|
<div class="td fixed-col">{{ item.pointName }}</div>
|
||||||
|
<div class="td fixed-col time-col">{{ item.monitorTime }}</div>
|
||||||
|
<!-- 动态列数据 -->
|
||||||
|
<div v-for="(col, colIndex) in dynamicColumns" :key="colIndex" class="td dynamic-col">
|
||||||
|
{{ item[col.field] || '--' }}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div :style="{ height: '80px' }"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import moment from "moment"
|
||||||
|
const stm = moment().subtract(3, 'days').format("YYYY-MM-DD");
|
||||||
|
const etm = moment().format("YYYY-MM-DD");
|
||||||
|
|
||||||
|
export default {
|
||||||
|
// props: {
|
||||||
|
// tableData: {
|
||||||
|
// type: Array,
|
||||||
|
// default: () => []
|
||||||
|
// }
|
||||||
|
// },
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
tm: [stm, etm],
|
||||||
|
// 动态列配置，后端返回的数据格式示例：
|
||||||
|
// [
|
||||||
|
// { name: 'we-01', field: 'we01', unit: 'L/s' },
|
||||||
|
// { name: 'we-02', field: 'we02', unit: 'L/s' },
|
||||||
|
// { name: 'we-03', field: 'we03', unit: 'L/s' }
|
||||||
|
// ]
|
||||||
|
dynamicColumns: [],
|
||||||
|
|
||||||
|
tableData:Array(30).fill(0).map(item => ( {pointName:123,monitorTime:'04-16 13:31',we01:1,we02:2,we:3}))
|
||||||
|
}
|
||||||
|
},
|
||||||
|
created() {
|
||||||
|
// 初始化时获取列配置
|
||||||
|
this.fetchColumnConfig()
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
handleRanger(e) {
|
||||||
|
this.tm = [...e]
|
||||||
|
// 时间变化后重新获取数据
|
||||||
|
this.fetchData()
|
||||||
|
},
|
||||||
|
|
||||||
|
// 获取动态列配置
|
||||||
|
fetchColumnConfig() {
|
||||||
|
// 模拟后端返回的列配置
|
||||||
|
// 实际使用时替换为真实接口调用
|
||||||
|
// uni.$http.get('/api/columns').then(res => {
|
||||||
|
// this.dynamicColumns = res.data
|
||||||
|
// })
|
||||||
|
|
||||||
|
// 示例数据
|
||||||
|
this.dynamicColumns = [
|
||||||
|
{ name: 'we-01', field: 'we01', unit: 'L/s' },
|
||||||
|
{ name: 'we-02', field: 'we02', unit: 'L/s' },
|
||||||
|
{ name: 'we-03', field: 'we03', unit: 'L/s' },
|
||||||
|
{ name: 'we-04', field: 'we04', unit: 'L/s' }
|
||||||
|
]
|
||||||
|
},
|
||||||
|
|
||||||
|
// 获取表格数据
|
||||||
|
fetchData() {
|
||||||
|
// 实际使用时调用接口
|
||||||
|
// uni.$http.get('/api/data', { params: { startTime: this.tm[0], endTime: this.tm[1] }})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.search-bar {
|
||||||
|
display: flex;
|
||||||
|
margin: 5px 0;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.time-ranger {
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 表格容器 - 统一横向滚动 */
|
||||||
|
.table-container {
|
||||||
|
width: 100%;
|
||||||
|
overflow-x: auto;
|
||||||
|
overflow-y: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tableHead {
|
||||||
|
width: max-content;
|
||||||
|
min-width: 100%;
|
||||||
|
margin-top: 5px;
|
||||||
|
height: 50px;
|
||||||
|
background-color: #e4f2fe;
|
||||||
|
display: flex;
|
||||||
|
color: #208FEE;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tableBody {
|
||||||
|
width: max-content;
|
||||||
|
min-width: 100%;
|
||||||
|
height: calc(80vh - 130px);
|
||||||
|
overflow-y: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tableRow {
|
||||||
|
width: max-content;
|
||||||
|
min-width: 100%;
|
||||||
|
height: 46px;
|
||||||
|
display: flex;
|
||||||
|
border-bottom: 1px solid #eee;
|
||||||
|
background-color: #ffffff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.td {
|
||||||
|
text-align: center;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
font-size: 13px;
|
||||||
|
flex-shrink: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 固定列样式 */
|
||||||
|
.fixed-col {
|
||||||
|
width: 80px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.time-col {
|
||||||
|
width: 100px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 动态列样式 */
|
||||||
|
.dynamic-col {
|
||||||
|
width: 100px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,155 @@
|
||||||
|
<template>
|
||||||
|
<view>
|
||||||
|
<view class="search-bar">
|
||||||
|
<view class="time-ranger">
|
||||||
|
<uni-datetime-picker type="daterange" v-model="tm" @change="handleRanger"
|
||||||
|
:clear-icon="false" rangeSeparator="至"></uni-datetime-picker>
|
||||||
|
</view>
|
||||||
|
<view class="select-bar">
|
||||||
|
<uni-data-select v-model="value" :localdata="list" @change="change" :clear="false">
|
||||||
|
</uni-data-select>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<!-- 表格容器 - 统一滚动 -->
|
||||||
|
<div class="table-container">
|
||||||
|
<div class="tableHead">
|
||||||
|
<div class="td fixed-col">序号</div>
|
||||||
|
<div class="td fixed-col">监测点</div>
|
||||||
|
<div class="td fixed-col time-col">监测时间</div>
|
||||||
|
<!-- 动态列 -->
|
||||||
|
<div v-for="(col, index) in dynamicColumns" :key="index" class="td dynamic-col">
|
||||||
|
{{ col.name }}(m)
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="tableBody">
|
||||||
|
<div v-for="(item, index) in tableData" :key="index" class="tableRow">
|
||||||
|
<div class="td fixed-col">{{ index+1 }}</div>
|
||||||
|
<div class="td fixed-col">{{ item.pointName }}</div>
|
||||||
|
<div class="td fixed-col time-col">{{ item.monitorTime }}</div>
|
||||||
|
<!-- 动态列数据 -->
|
||||||
|
<div v-for="(col, colIndex) in dynamicColumns" :key="colIndex" class="td dynamic-col">
|
||||||
|
{{ item[col.field] || '--' }}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div :style="{ height: '80px' }">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import moment from "moment"
|
||||||
|
const stm = moment().subtract(3, 'days').format("YYYY-MM-DD");
|
||||||
|
const etm = moment().format("YYYY-MM-DD");
|
||||||
|
export default {
|
||||||
|
// props:{
|
||||||
|
// tableData:{
|
||||||
|
// type:Array,
|
||||||
|
// default:[],
|
||||||
|
// }
|
||||||
|
// },
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
tm: [stm, etm],
|
||||||
|
list: [],
|
||||||
|
value: "",
|
||||||
|
dynamicColumns: [],
|
||||||
|
tableData: [
|
||||||
|
{pointName:123,monitorTime:'04-16 13:31',we01:1,we02:2,we:3},
|
||||||
|
{pointName:123,monitorTime:'04-16 13:31',we01:1,we02:2,we:3},
|
||||||
|
{pointName:123,monitorTime:'04-16 13:31',we01:1,we02:2,we:3},
|
||||||
|
{pointName:123,monitorTime:'04-16 13:31',we01:1,we02:2,we:3},
|
||||||
|
{pointName:123,monitorTime:'04-16 13:31',we01:1,we02:2,we:3},
|
||||||
|
],
|
||||||
|
dynamicColumns : [
|
||||||
|
{ name: 'we-01', field: 'we01', unit: 'L/s' },
|
||||||
|
{ name: 'we-02', field: 'we02', unit: 'L/s' },
|
||||||
|
{ name: 'we-03', field: 'we03', unit: 'L/s' },
|
||||||
|
{ name: 'we-04', field: 'we04', unit: 'L/s' }
|
||||||
|
]
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
handleRanger(e) {
|
||||||
|
this.tm = [...e]
|
||||||
|
},
|
||||||
|
change(e) {
|
||||||
|
this.value = e;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.search-bar {
|
||||||
|
display: flex;
|
||||||
|
margin: 5px 0;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.time-ranger {
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.select-bar {
|
||||||
|
width: 30%;
|
||||||
|
margin-left: 1%;
|
||||||
|
}
|
||||||
|
/* 表格容器 - 统一横向滚动 */
|
||||||
|
.table-container {
|
||||||
|
width: 100%;
|
||||||
|
overflow-x: auto;
|
||||||
|
overflow-y: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tableHead {
|
||||||
|
width: max-content;
|
||||||
|
min-width: 100%;
|
||||||
|
margin-top: 5px;
|
||||||
|
height: 50px;
|
||||||
|
background-color: #e4f2fe;
|
||||||
|
display: flex;
|
||||||
|
color: #208FEE;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tableBody {
|
||||||
|
width: max-content;
|
||||||
|
min-width: 100%;
|
||||||
|
height: calc(80vh - 130px);
|
||||||
|
overflow-y: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tableRow {
|
||||||
|
width: max-content;
|
||||||
|
min-width: 100%;
|
||||||
|
height: 46px;
|
||||||
|
display: flex;
|
||||||
|
border-bottom: 1px solid #eee;
|
||||||
|
background-color: #ffffff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.td {
|
||||||
|
text-align: center;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
font-size: 13px;
|
||||||
|
flex-shrink: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 固定列样式 */
|
||||||
|
.fixed-col {
|
||||||
|
width: 80px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.time-col {
|
||||||
|
width: 100px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 动态列样式 */
|
||||||
|
.dynamic-col {
|
||||||
|
width: 100px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,131 @@
|
||||||
|
<template>
|
||||||
|
<view>
|
||||||
|
<view class="search-bar">
|
||||||
|
<view class="time-ranger">
|
||||||
|
<uni-datetime-picker type="daterange" v-model="tm" @change="handleRanger" :clear-icon="false"
|
||||||
|
rangeSeparator="至"></uni-datetime-picker>
|
||||||
|
</view>
|
||||||
|
<view class="select-bar">
|
||||||
|
<uni-data-select v-model="value" :localdata="list" @change="change" :clear="false">
|
||||||
|
</uni-data-select>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<div class="tableHead">
|
||||||
|
<div class="td t1">监测点</div>
|
||||||
|
<div class="td t2">监测时间</div>
|
||||||
|
<div class="td t3">x方向(mm)</div>
|
||||||
|
<div class="td t4">y方向(mm)</div>
|
||||||
|
<div class="td t5">z方向(mm)</div>
|
||||||
|
</div>
|
||||||
|
<div class="tableBody">
|
||||||
|
<div v-for="(item, index) in tableData" class="tableRow">
|
||||||
|
<div class="td t1">{{ }}</div>
|
||||||
|
<div class="td t2">{{ item.tm ? item.tm.slice(5, 16) : "" }}</div>
|
||||||
|
<div class="td t3">{{}}</div>
|
||||||
|
<div class="td t4">{{}}</div>
|
||||||
|
<div class="td t5">{{}}</div>
|
||||||
|
</div>
|
||||||
|
<div :style="{ height: '80px' }">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import moment from "moment"
|
||||||
|
const stm = moment().subtract(3, 'days').format("YYYY-MM-DD");
|
||||||
|
const etm = moment().format("YYYY-MM-DD");
|
||||||
|
export default {
|
||||||
|
props: {
|
||||||
|
tableData: {
|
||||||
|
type: Array,
|
||||||
|
default: [],
|
||||||
|
}
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
tm: [stm, etm],
|
||||||
|
list: [],
|
||||||
|
value: "",
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
handleRanger(e) {
|
||||||
|
this.tm = [...e]
|
||||||
|
},
|
||||||
|
change(e) {
|
||||||
|
this.value = e;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.search-bar {
|
||||||
|
display: flex;
|
||||||
|
margin: 5px 0;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.time-ranger {
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.select-bar {
|
||||||
|
width: 30%;
|
||||||
|
margin-left: 1%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tableHead {
|
||||||
|
width: 100%;
|
||||||
|
margin-top: 5px;
|
||||||
|
height: 50px;
|
||||||
|
background-color: #e4f2fe;
|
||||||
|
display: flex;
|
||||||
|
color: #208FEE;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tableBody {
|
||||||
|
width: 100%;
|
||||||
|
height: calc(60vh - 214px);
|
||||||
|
// background-color: #f7f7f7; //#ffffff;
|
||||||
|
overflow-y: scroll;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tableRow {
|
||||||
|
width: 100%;
|
||||||
|
height: 46px;
|
||||||
|
display: flex;
|
||||||
|
border-bottom: 1px solid #eee;
|
||||||
|
background-color: #ffffff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.td {
|
||||||
|
text-align: center;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
font-size: 13px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.t1 {
|
||||||
|
width: 20%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.t2 {
|
||||||
|
width: 20%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.t3 {
|
||||||
|
width: 20%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.t4 {
|
||||||
|
width: 20%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.t5 {
|
||||||
|
width: 20%;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,158 @@
|
||||||
|
<template>
|
||||||
|
<view class="resviror-detail-box">
|
||||||
|
<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 class="title">
|
||||||
|
{{ stnm }}
|
||||||
|
<!-- <text style="font-size:12px;margin-left:5px">{{sta}}({{rain}})</text> -->
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="tab-bar">
|
||||||
|
<uni-swiper-dot :info="Array(2).fill(0)" :current="current" field="content" :dotsStyles="dotsStyles">
|
||||||
|
<swiper class="swiper-box" style="height: 30px;" @change="change">
|
||||||
|
<swiper-item>
|
||||||
|
<view style="display: flex;justify-content: space-between;">
|
||||||
|
<view class="jcsj" @click="activeOne = 0" :class="{ 'active': activeOne == 0 }">
|
||||||
|
雨水情信息
|
||||||
|
</view>
|
||||||
|
<!-- style="margin: 0 25px;" -->
|
||||||
|
<view class="tjsj" @click="activeOne = 1" :class="{ 'active': activeOne == 1 }">
|
||||||
|
视频监控
|
||||||
|
</view>
|
||||||
|
<!-- style="margin: 0 25px 0 0;" -->
|
||||||
|
<view class="spjk" @click="activeOne = 2" :class="{ 'active': activeOne == 2 }" >
|
||||||
|
基本信息
|
||||||
|
</view>
|
||||||
|
<view class="zbyq" @click="activeOne = 3" :class="{ 'active': activeOne == 3 }">
|
||||||
|
安全监测
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</swiper-item>
|
||||||
|
<swiper-item>
|
||||||
|
<view style="display: flex; margin-left: 10px;">
|
||||||
|
<view class="zrtx" @click="activeOne = 4" :class="{ 'active': activeOne == 4 }">
|
||||||
|
责任体系
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</swiper-item>
|
||||||
|
</swiper>
|
||||||
|
</uni-swiper-dot>
|
||||||
|
|
||||||
|
</view>
|
||||||
|
<view class="resviror-detail-content">
|
||||||
|
<Ysqxx v-if="activeOne == 0"/>
|
||||||
|
<Spjk stcd="3061" v-else-if="activeOne == 1" />
|
||||||
|
<Aqjc v-else-if="activeOne == 3"/>
|
||||||
|
<Jbxx v-else-if="activeOne == 2" />
|
||||||
|
<Zrtx resCode="42282650003" v-else-if="activeOne == 4" />
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import Ysqxx from './ysqxx'
|
||||||
|
import Spjk from "./spjk/spjk.vue"
|
||||||
|
import Zrtx from "./zrtx/zrtx.vue"
|
||||||
|
import Jbxx from './jbxx'
|
||||||
|
import Aqjc from './aqjc'
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
activeOne: 0,
|
||||||
|
stcd: '',
|
||||||
|
stnm: '',
|
||||||
|
wrz: '',
|
||||||
|
grz: '',
|
||||||
|
calFloodLev: '',
|
||||||
|
desFloodLev: '',
|
||||||
|
flLowLimLev: '',
|
||||||
|
afsltdz: '',
|
||||||
|
resCode: '',
|
||||||
|
current: 0,
|
||||||
|
dotsStyles: {
|
||||||
|
bottom: 0,
|
||||||
|
selectedBackgroundColor: "#d9001b"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
components: {
|
||||||
|
Spjk,
|
||||||
|
Zrtx,
|
||||||
|
Ysqxx,
|
||||||
|
Jbxx,
|
||||||
|
Aqjc
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
backTo() {
|
||||||
|
uni.navigateBack({ delta: 1 })
|
||||||
|
},
|
||||||
|
change(e) {
|
||||||
|
console.log(e.detail.current);
|
||||||
|
this.current = e.detail.current;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
onLoad(option) {
|
||||||
|
this.stcd = option.stcd;
|
||||||
|
this.stnm = option.stnm;
|
||||||
|
this.grz = option.grz;
|
||||||
|
this.wrz = option.wrz;
|
||||||
|
this.afsltdz = option.afsltdz;
|
||||||
|
this.calFloodLev = option.calFloodLev;
|
||||||
|
this.flLowLimLev = option.flLowLimLev;
|
||||||
|
this.desFloodLev = option.desFloodLev;
|
||||||
|
this.resCode = option.resCode;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.resviror-detail-box {
|
||||||
|
height: 100vh;
|
||||||
|
overflow: hidden;
|
||||||
|
position: relative;
|
||||||
|
|
||||||
|
.nav-bar {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
width: 100%;
|
||||||
|
height: 44px;
|
||||||
|
// margin-top: 30px;
|
||||||
|
// padding-top: 20px;
|
||||||
|
// padding-bottom: 10px;
|
||||||
|
border-bottom: 1px solid #dfdfdf;
|
||||||
|
// box-shadow: 0 5px 10px -8px #dfdfdf inset;
|
||||||
|
}
|
||||||
|
|
||||||
|
.title {
|
||||||
|
flex: 1;
|
||||||
|
text-align: center;
|
||||||
|
margin-right: 18px;
|
||||||
|
font-size: 18px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tab-bar {
|
||||||
|
// width: 100%;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
padding: 5px 30px;
|
||||||
|
border-bottom: 1px solid #dfdfdf;
|
||||||
|
// overflow-x: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.active {
|
||||||
|
color: #39a6ff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.resviror-detail-content {
|
||||||
|
/* 最大高度（比如占视口80%），内容超出才显示滚动条 */
|
||||||
|
height: 85vh;
|
||||||
|
/* 纵向滚动：auto=超出显示，scroll=始终显示 */
|
||||||
|
overflow-y: auto;
|
||||||
|
overflow-x: hidden;
|
||||||
|
/* 可选：如果元素是行内元素，需转为块级/行内块级 */
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,52 @@
|
||||||
|
<template>
|
||||||
|
<view class="jbxx-box">
|
||||||
|
<view class="jbxx-tabs">
|
||||||
|
<u-tabs
|
||||||
|
:list="list"
|
||||||
|
@click="tabsClick"
|
||||||
|
:scrollable="false"
|
||||||
|
:activeStyle="{
|
||||||
|
color: '#34a4fe',
|
||||||
|
}"
|
||||||
|
></u-tabs>
|
||||||
|
</view>
|
||||||
|
<view class="jbxx-content">
|
||||||
|
<Jbzz v-if = "status == 0" />
|
||||||
|
<view v-if="status == 1" class="gcgk">黄沙水库位于长江中游南岸，汀泗河上游，该河是赤壁市与咸安区的界河，属西凉湖水系的一条支流</view>
|
||||||
|
<Krqx v-if="status == 2" stcd="3040" />
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
<script>
|
||||||
|
import Jbzz from './jbzz'
|
||||||
|
import Krqx from './krqx'
|
||||||
|
export default {
|
||||||
|
components: {
|
||||||
|
Jbzz,
|
||||||
|
Krqx
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
list: [{ name: '基本资料' }, { name: '工程概况' }, { name: '库容曲线' }],
|
||||||
|
status:0
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
tabsClick(e) {
|
||||||
|
this.status = e?.index;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.jbxx-box{
|
||||||
|
padding: 5px;
|
||||||
|
.jbxx-tabs{
|
||||||
|
width: 100%;
|
||||||
|
background-color: #dff0f8;
|
||||||
|
}
|
||||||
|
.gcgk{
|
||||||
|
padding: 5px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,161 @@
|
||||||
|
<template>
|
||||||
|
<view class="jbzz-box">
|
||||||
|
<!-- 行政区划 -->
|
||||||
|
<view class="region-section">
|
||||||
|
<text class="region-label">行政区划：</text>
|
||||||
|
<text class="region-value">湖北省咸宁市赤壁市官塘镇</text>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<view class="project-des">
|
||||||
|
<view v-for="(item, index) in infoList" :key="index" class="info-item">
|
||||||
|
<view class="info-content">
|
||||||
|
<view class="circle-dot"></view>
|
||||||
|
<view class="label-name">
|
||||||
|
<text class="label-text">{{ item.label }}</text>
|
||||||
|
<text class="value-text">{{ item.value }}{{ item.unit }}</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
const gmObj = {
|
||||||
|
"1": "大 (1)型",
|
||||||
|
"2": "大 (2)型",
|
||||||
|
"3": "中型",
|
||||||
|
"4": "小 (1)型",
|
||||||
|
"5": "小 (2)型",
|
||||||
|
"9": "其他",
|
||||||
|
}
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
// 字段配置：标签、字段名、单位
|
||||||
|
fieldConfig: [
|
||||||
|
{ label: '坝顶高程', field: 'bdgc', unit: 'm' },
|
||||||
|
{ label: '工程规模', field: 'engScal', unit: '' },
|
||||||
|
{ label: '校核洪水位', field: 'jyhsw', unit: 'm' },
|
||||||
|
{ label: '总库容', field: 'zkr', unit: '万m³' },
|
||||||
|
{ label: '设计洪水位', field: 'sjhsw', unit: 'm' },
|
||||||
|
{ label: '防洪库容', field: 'fhkr', unit: '万m³' },
|
||||||
|
{ label: '防洪高水位', field: 'fhgsw', unit: 'm' },
|
||||||
|
{ label: '兴利库容', field: 'xlkr', unit: '万m³' },
|
||||||
|
{ label: '正常蓄水位', field: 'zcxsw', unit: 'm' },
|
||||||
|
{ label: '调洪库容', field: 'thkr', unit: '万m³' },
|
||||||
|
{ label: '汛限水位', field: 'xxsw', unit: 'm' },
|
||||||
|
{ label: '集雨面积', field: 'jymj', unit: 'km²' },
|
||||||
|
{ label: '控制运行水位', field: 'kzyxsw', unit: 'm' },
|
||||||
|
{ label: '死水位', field: 'ssw', unit: 'm' },
|
||||||
|
{ label: '死库容', field: 'skr', unit: '万m³' }
|
||||||
|
],
|
||||||
|
// 后端返回的数据
|
||||||
|
apiData: {
|
||||||
|
bdgc: '80',
|
||||||
|
engScal: "2",
|
||||||
|
jyhsw: '78.44',
|
||||||
|
zkr: '1531',
|
||||||
|
sjhsw: '77.45',
|
||||||
|
fhkr: '359',
|
||||||
|
fhgsw: '76',
|
||||||
|
xlkr: null,
|
||||||
|
zcxsw: '76',
|
||||||
|
thkr: null,
|
||||||
|
xxsw: '75.3',
|
||||||
|
jymj: '2.1',
|
||||||
|
kzyxsw: '',
|
||||||
|
ssw: '',
|
||||||
|
skr: ''
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
computed: {
|
||||||
|
// 处理后的列表数据
|
||||||
|
infoList() {
|
||||||
|
return this.fieldConfig.map(config => {
|
||||||
|
|
||||||
|
const value = config.field != 'engScal' ? this.apiData[config.field] : gmObj[this.apiData[config.field]];
|
||||||
|
return {
|
||||||
|
label: config.label,
|
||||||
|
value: value || '--',
|
||||||
|
unit: value ? config.unit : ''
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.jbzz-box {
|
||||||
|
padding: 20rpx;
|
||||||
|
background-color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.region-section {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
margin-bottom: 12rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.region-label {
|
||||||
|
font-size: 28rpx;
|
||||||
|
color: #999;
|
||||||
|
}
|
||||||
|
|
||||||
|
.region-value {
|
||||||
|
font-size: 28rpx;
|
||||||
|
color: #333;
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
|
||||||
|
.project-des {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
border: 1px solid #f2f2f2;
|
||||||
|
background-color: #ffffff;
|
||||||
|
padding: 0 10px;
|
||||||
|
max-height: calc(100vh - 210px);
|
||||||
|
overflow: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.info-item {
|
||||||
|
width: 50%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.info-content {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
margin: 15px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.circle-dot {
|
||||||
|
width: 10px;
|
||||||
|
height: 10px;
|
||||||
|
border-radius: 50%;
|
||||||
|
background-color: #409eff;
|
||||||
|
margin-left: 10px;
|
||||||
|
flex-shrink: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.label-name {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.label-text {
|
||||||
|
opacity: 0.5;
|
||||||
|
text-align: center;
|
||||||
|
font-size: 26rpx;
|
||||||
|
margin-bottom: 8rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.value-text {
|
||||||
|
font-size: 30rpx;
|
||||||
|
color: #333;
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,80 @@
|
||||||
|
import {GetInterval} from "../../../utils/tool"
|
||||||
|
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,81 @@
|
||||||
|
<template>
|
||||||
|
<view>
|
||||||
|
<view v-if="tableData.length != 0">
|
||||||
|
<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>
|
||||||
|
<view
|
||||||
|
style="
|
||||||
|
height: calc(100vh - 160px);
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
background-color: #fff;
|
||||||
|
margin-top: 10px;
|
||||||
|
"
|
||||||
|
v-else
|
||||||
|
>
|
||||||
|
<image src="../../../../static//empty.png" mode=""></image>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
<script>
|
||||||
|
import drpOptions from "./chartOptions.js";
|
||||||
|
import Table from "./jcsjTable.vue";
|
||||||
|
export default {
|
||||||
|
props: {
|
||||||
|
stcd: String,
|
||||||
|
default:""
|
||||||
|
},
|
||||||
|
components: {
|
||||||
|
Table,
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
show: false,
|
||||||
|
chartData: {},
|
||||||
|
tableData: [],
|
||||||
|
};
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
async getKrData() {
|
||||||
|
uni.showLoading({
|
||||||
|
title: "加载中...",
|
||||||
|
mask: true,
|
||||||
|
});
|
||||||
|
try {
|
||||||
|
const { data } = await uni.$http.get("/gunshiApp/xfflood/reservoir/water/zvarl?stcd="+this.stcd);
|
||||||
|
if (data.code == 200) {
|
||||||
|
this.tableData = [...data.data];
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
uni.$showMsg();
|
||||||
|
}
|
||||||
|
},
|
||||||
|
},
|
||||||
|
watch: {
|
||||||
|
tableData(n, o) {
|
||||||
|
if (n.length > 0) {
|
||||||
|
uni.hideLoading();
|
||||||
|
this.chartData = {
|
||||||
|
...drpOptions(n),
|
||||||
|
};
|
||||||
|
this.show = true;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
this.getKrData();
|
||||||
|
},
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
<style lang="scss">
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,77 @@
|
||||||
|
<template>
|
||||||
|
<view>
|
||||||
|
<div class="tableHead">
|
||||||
|
<div class="td t1">序号</div>
|
||||||
|
<div class="td t2">库水位(m)</div>
|
||||||
|
<div class="td t3">库容(万m³)</div>
|
||||||
|
</div>
|
||||||
|
<div class="tableBody">
|
||||||
|
<div v-for="(item, index) in tableData" class="tableRow">
|
||||||
|
<div class="td t1">{{ index + 1 }}</div>
|
||||||
|
<div class="td t2">{{ item.rz ? item.rz : "" }}</div>
|
||||||
|
<div class="td t3">{{ item.w}}</div>
|
||||||
|
</div>
|
||||||
|
<div :style="{ height: '80px' }">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import moment from "moment"
|
||||||
|
export default {
|
||||||
|
props:{
|
||||||
|
tableData:{
|
||||||
|
type:Array,
|
||||||
|
default:[],
|
||||||
|
}
|
||||||
|
},
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.tableHead {
|
||||||
|
width: 100%;
|
||||||
|
margin-top: 5px;
|
||||||
|
height: 50px;
|
||||||
|
background-color: #e4f2fe;
|
||||||
|
display: flex;
|
||||||
|
color: #208FEE;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tableBody {
|
||||||
|
width: 100%;
|
||||||
|
height: calc(60vh - 200px);
|
||||||
|
// background-color: #f7f7f7; //#ffffff;
|
||||||
|
overflow-y: scroll;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tableRow {
|
||||||
|
width: 100%;
|
||||||
|
height: 46px;
|
||||||
|
display: flex;
|
||||||
|
border-bottom: 1px solid #eee;
|
||||||
|
background-color: #ffffff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.td {
|
||||||
|
text-align: center;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
font-size: 13px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.t1 {
|
||||||
|
width: 25%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.t2 {
|
||||||
|
width: 50%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.t3 {
|
||||||
|
width: 25%;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,127 @@
|
||||||
|
<template>
|
||||||
|
<view class="spjk-box">
|
||||||
|
<view class="select-bar">
|
||||||
|
<text style="margin-right: 10px;">监测点</text>
|
||||||
|
<uni-data-select
|
||||||
|
v-model="value"
|
||||||
|
:localdata="list"
|
||||||
|
@change="change"
|
||||||
|
:clear="false"
|
||||||
|
>
|
||||||
|
</uni-data-select>
|
||||||
|
</view>
|
||||||
|
<view class="video-box" >
|
||||||
|
<iframe :src="webURL" :class="{'normal': show == 0,'active': show == 1}" frameborder="0" ref="videoFrame" :allowfullscreen="true"></iframe>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
props:{
|
||||||
|
stcd:String,
|
||||||
|
default:''
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
value: 1,
|
||||||
|
list:[],
|
||||||
|
webURL:'',
|
||||||
|
show: 0,
|
||||||
|
showPop:false
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
receiveRenderData(e){
|
||||||
|
//接收的值
|
||||||
|
console.log("3333",e.data)
|
||||||
|
this.show = e.data
|
||||||
|
},
|
||||||
|
async getList(){
|
||||||
|
try{
|
||||||
|
const {data} = await uni.$http.get(
|
||||||
|
`/gunshiApp/xfflood/stbprp/cctv/listByStcd/${this.stcd}`)
|
||||||
|
if(data.code == 200){
|
||||||
|
let newData = data.data.map(item => ({...item,value:item.camId,text:item.name}))
|
||||||
|
this.list = [...newData];
|
||||||
|
this.value = newData[0].value
|
||||||
|
this.getVideoSrc(newData[0].camId)
|
||||||
|
}
|
||||||
|
}catch(e){
|
||||||
|
uni.$showMsg()
|
||||||
|
}
|
||||||
|
},
|
||||||
|
async getVideoSrc(id){
|
||||||
|
try{
|
||||||
|
const {data} = await uni.$http.get(
|
||||||
|
`/gunshiApp/xfflood/xfCctvB/preview/${id}`)
|
||||||
|
if(data.code == 200){
|
||||||
|
this.webURL="./static/h5Player/webplayer.html?cameraIndexCode="+id+"&cameraUrl="+data.data
|
||||||
|
}
|
||||||
|
}catch(e){
|
||||||
|
uni.$showMsg()
|
||||||
|
}
|
||||||
|
},
|
||||||
|
change(e) {
|
||||||
|
console.log("e:", e);
|
||||||
|
this.getVideoSrc(e)
|
||||||
|
this.showPop = false;
|
||||||
|
},
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
this.getList()
|
||||||
|
},
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<script module="renderModal" lang="renderjs">
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
dom: '',
|
||||||
|
}
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
this.dom = document.getElementById('iframe')
|
||||||
|
// 接收iframe传过来的值
|
||||||
|
window.addEventListener('message', (e)=> {
|
||||||
|
var data = e.data;
|
||||||
|
this.emitData(data)
|
||||||
|
});
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
emitData(e) {
|
||||||
|
this.$ownerInstance.callMethod('receiveRenderData',e)
|
||||||
|
},
|
||||||
|
},
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.spjk-box{
|
||||||
|
.select-bar{
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
margin: 10px 15px;
|
||||||
|
}
|
||||||
|
.video-box{
|
||||||
|
.normal{
|
||||||
|
position: absolute;
|
||||||
|
// width: 370px;
|
||||||
|
// height: 300px;
|
||||||
|
top: 170px;
|
||||||
|
left: 0;
|
||||||
|
width: 100vw;
|
||||||
|
height: 100vh;
|
||||||
|
}
|
||||||
|
.active{
|
||||||
|
position: absolute;
|
||||||
|
width: 100vw;
|
||||||
|
height: 100vh;
|
||||||
|
top: -30px;
|
||||||
|
left: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,195 @@
|
||||||
|
<template>
|
||||||
|
<view class="" style="padding: 5px;">
|
||||||
|
<txjc />
|
||||||
|
<view class="update-time">
|
||||||
|
<text style="color: #bfbfbf;">行政区划:</text>
|
||||||
|
<text>{{ info.adnm }}</text>
|
||||||
|
</view>
|
||||||
|
<view class="update-time">
|
||||||
|
<text style="color: #bfbfbf;">更新时间:</text>
|
||||||
|
<text>{{ info.tm }}</text>
|
||||||
|
</view>
|
||||||
|
<view class="sk-info">
|
||||||
|
<view class="sk-first-row">
|
||||||
|
<view class="first-item">
|
||||||
|
<text>{{ info.rz }}米</text>
|
||||||
|
<text>水位</text>
|
||||||
|
</view>
|
||||||
|
<view class="first-item">
|
||||||
|
<text>{{ info.nowCap }}万m³</text>
|
||||||
|
<text>蓄水量</text>
|
||||||
|
</view>
|
||||||
|
<view class="first-line"></view>
|
||||||
|
<image style="width: 20px; height: 20px;" src="../../../static/images/first.jpg"></image>
|
||||||
|
</view>
|
||||||
|
<view class="sk-first-row">
|
||||||
|
<view class="first-item">
|
||||||
|
<text>{{ info.crestElev }}米</text>
|
||||||
|
<text>坝顶高程</text>
|
||||||
|
</view>
|
||||||
|
<view class="first-item">
|
||||||
|
<text>{{ info.flLowLimLev }}万m³</text>
|
||||||
|
<text>正常水位</text>
|
||||||
|
</view>
|
||||||
|
<view class="first-item">
|
||||||
|
<text>{{ info.totCap }}万m³</text>
|
||||||
|
<text>总库容</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="sk-second-row">
|
||||||
|
<view class="first-item">
|
||||||
|
<text>{{ rainInfo.today || '-' }}毫米</text>
|
||||||
|
<text>今日降雨</text>
|
||||||
|
</view>
|
||||||
|
<view class="first-item">
|
||||||
|
<text>{{ rainInfo.yesterdayDrp }}毫米</text>
|
||||||
|
<text>昨日降雨</text>
|
||||||
|
</view>
|
||||||
|
<view class="first-line" style="margin-right:17px"></view>
|
||||||
|
<image style="width: 20px; height: 20px;" src="../../../static/images/second.jpg"></image>
|
||||||
|
</view>
|
||||||
|
<view class="sk-thirst-row">
|
||||||
|
<view class=" sk-thirst-item" v-for="(item, index) in stationList" :key="index">
|
||||||
|
<!-- 站名：支持自动换行 -->
|
||||||
|
<view class="sk-thirst-name">{{ item.name }}:</view>
|
||||||
|
<view style="margin: 0 20rpx;">123米</view>
|
||||||
|
<view>时间:</view>
|
||||||
|
<view class="sk-thirst-time">{{ item.time }}</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="real-water">
|
||||||
|
<!-- 实时水位 -->
|
||||||
|
<h4>实时水位</h4>
|
||||||
|
<sssw/>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<view class="real-water">
|
||||||
|
<h4>实时雨量</h4>
|
||||||
|
<ssyl/>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import txjc from './txjc.vue';
|
||||||
|
import sssw from './sssw.vue'
|
||||||
|
import ssyl from './ssyl.vue'
|
||||||
|
export default {
|
||||||
|
components: {
|
||||||
|
txjc,
|
||||||
|
sssw,
|
||||||
|
ssyl
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
rainInfo: {
|
||||||
|
today: 0,
|
||||||
|
yesterdayDrp: 0
|
||||||
|
},
|
||||||
|
info: {
|
||||||
|
tm: '2026-04-13 15:09',
|
||||||
|
rz: '72.65',
|
||||||
|
nowCap: 790,
|
||||||
|
crestElev: '76',
|
||||||
|
flLowLimLev: '76',
|
||||||
|
totCap: 300,
|
||||||
|
adnm: '咸宁市'
|
||||||
|
},
|
||||||
|
stationList: [
|
||||||
|
{ name: "塘沽(东)站", time: "12:21(高平潮)", height: 199 },
|
||||||
|
{ name: "临港工业区站", time: "12:19(高平潮)", height: 198 },
|
||||||
|
{ name: "大神堂站 站名特别特别特别长长长长长长", time: "12:18(高平潮)", height: 197 },
|
||||||
|
{ name: "大港站", time: "12:15(高平潮)", height: 195 },
|
||||||
|
{ name: "南港工业区站", time: "12:10(高平潮)", height: 192 }
|
||||||
|
]
|
||||||
|
}
|
||||||
|
},
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.update-time {
|
||||||
|
display: flex;
|
||||||
|
// justify-content: space-between;
|
||||||
|
column-gap: 10px;
|
||||||
|
align-items: center;
|
||||||
|
padding: 5px 5px;
|
||||||
|
// border-bottom: 1px solid #dfdfdf;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sk-info {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
padding: 2px 5px;
|
||||||
|
margin: 5px 0;
|
||||||
|
|
||||||
|
.sk-first-row,
|
||||||
|
.sk-second-row {
|
||||||
|
display: flex;
|
||||||
|
padding: 5px 10px;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-around;
|
||||||
|
background-color: #f2fafc;
|
||||||
|
|
||||||
|
.first-line {
|
||||||
|
width: 3px;
|
||||||
|
height: 20px;
|
||||||
|
background-color: #c6eae6;
|
||||||
|
}
|
||||||
|
|
||||||
|
.first-item {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.sk-second-row {
|
||||||
|
margin: 5px 0;
|
||||||
|
background-color: #f2f8ff;
|
||||||
|
padding: 5px 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sk-thirst-row {
|
||||||
|
background-color: #f2fafc;
|
||||||
|
padding: 5px 10px;
|
||||||
|
|
||||||
|
.sk-thirst-item {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
padding: 18rpx 0;
|
||||||
|
font-size: 28rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 站名：自动换行、左边固定宽度 */
|
||||||
|
.sk-thirst-name {
|
||||||
|
width: 230rpx;
|
||||||
|
line-height: 1.2;
|
||||||
|
color: #333;
|
||||||
|
word-break: break-all;
|
||||||
|
/* 自动换行 */
|
||||||
|
white-space: pre-wrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 潮时：中间 */
|
||||||
|
.sk-thirst-time {
|
||||||
|
flex: 1;
|
||||||
|
text-align: center;
|
||||||
|
color: #666;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 潮高：右边 */
|
||||||
|
.sk-thirst-height {
|
||||||
|
width: 120rpx;
|
||||||
|
text-align: right;
|
||||||
|
color: #007aff;
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.real-water{
|
||||||
|
padding: 2px 5px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
File diff suppressed because it is too large
Load Diff
|
|
@ -0,0 +1,78 @@
|
||||||
|
<template>
|
||||||
|
<view class="sssw-box">
|
||||||
|
<view class="time-ranger">
|
||||||
|
<uni-datetime-picker
|
||||||
|
type="datetimerange"
|
||||||
|
v-model="tm"
|
||||||
|
@change="handleRanger"
|
||||||
|
@open="onPickerOpen"
|
||||||
|
hide-second
|
||||||
|
:clear-icon="false"
|
||||||
|
rangeSeparator="至"
|
||||||
|
></uni-datetime-picker>
|
||||||
|
<view class="select-bar">
|
||||||
|
<uni-data-select v-model="value" :localdata="list" @change="change" :clear="false">
|
||||||
|
</uni-data-select>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="realWater-content">
|
||||||
|
<qiun-data-charts canvasId="myChart" type="line" :chartData="chartData.chartData" :echartsApp="true" :eopts="chartData.eopts" />
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import moment from "moment"
|
||||||
|
import waterOptions from './swOption'
|
||||||
|
const stm = moment().subtract(1, 'days').set({minute: 0, second: 0}).format("YYYY-MM-DD HH:00:00");
|
||||||
|
const etm = moment().set({minute: 0, second: 0}).format("YYYY-MM-DD HH:00:00");
|
||||||
|
export default {
|
||||||
|
props:{
|
||||||
|
stcd:String,
|
||||||
|
resCode:String,
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
tm:[stm,etm],
|
||||||
|
list:[],
|
||||||
|
value: "",
|
||||||
|
chartData: waterOptions(),
|
||||||
|
chartOpts: {
|
||||||
|
tooltip: {
|
||||||
|
show: true
|
||||||
|
},
|
||||||
|
},
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
onPickerOpen() {
|
||||||
|
this.chartOpts.tooltip.show = false
|
||||||
|
},
|
||||||
|
handleRanger(e){
|
||||||
|
this.tm = [...e]
|
||||||
|
|
||||||
|
},
|
||||||
|
change(e) {
|
||||||
|
this.value = e;
|
||||||
|
this.chartOpts.tooltip.show = false
|
||||||
|
}
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.sssw-box {
|
||||||
|
.time-ranger {
|
||||||
|
margin: 10px 0;
|
||||||
|
}
|
||||||
|
.select-bar{
|
||||||
|
margin: 10px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.realWater-content{
|
||||||
|
height: 320px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,133 @@
|
||||||
|
<template>
|
||||||
|
<view class="sssw-box">
|
||||||
|
<view class="time-ranger">
|
||||||
|
<uni-datetime-picker type="datetimerange" v-model="tm" @change="handleRanger" @open="onPickerOpen" hide-second
|
||||||
|
:clear-icon="false" rangeSeparator="至"></uni-datetime-picker>
|
||||||
|
<view class="select-bar">
|
||||||
|
<uni-data-select v-model="value" :localdata="list" @change="change" :clear="false">
|
||||||
|
</uni-data-select>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="realWater-content">
|
||||||
|
<qiun-data-charts canvasId="myChart1" type="line" :chartData="chartData.chartData" :echartsApp="true"
|
||||||
|
:eopts="chartData.eopts" />
|
||||||
|
</view>
|
||||||
|
<div class="tableHead">
|
||||||
|
<div class="td t1">序号</div>
|
||||||
|
<div class="td t2">时间</div>
|
||||||
|
<div class="td t3">实时雨量(mm)</div>
|
||||||
|
</div>
|
||||||
|
<div class="tableBody">
|
||||||
|
<div v-for="(item, index) in yllist" class="tableRow">
|
||||||
|
<div class="td t1">{{ index + 1 }}</div>
|
||||||
|
<div class="td t2">{{ item.tm ? item.tm.slice(0,16) : "" }}</div>
|
||||||
|
<div class="td t3">{{ item.drp === null ? '-' : item.drp }}</div>
|
||||||
|
</div>
|
||||||
|
<div :style="{ height: '80px' }">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import moment from "moment"
|
||||||
|
import waterOptions from './ylOption'
|
||||||
|
import { sw } from './mock'
|
||||||
|
const stm = moment().subtract(1, 'days').set({ minute: 0, second: 0 }).format("YYYY-MM-DD HH:00:00");
|
||||||
|
const etm = moment().set({ minute: 0, second: 0 }).format("YYYY-MM-DD HH:00:00");
|
||||||
|
export default {
|
||||||
|
props: {
|
||||||
|
stcd: String,
|
||||||
|
resCode: String,
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
tm: [stm, etm],
|
||||||
|
list: [],
|
||||||
|
value: "",
|
||||||
|
chartData: waterOptions(),
|
||||||
|
yllist: sw,
|
||||||
|
chartOpts: {
|
||||||
|
tooltip: {
|
||||||
|
show: true
|
||||||
|
},
|
||||||
|
},
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
onPickerOpen() {
|
||||||
|
this.chartOpts.tooltip.show = false
|
||||||
|
},
|
||||||
|
handleRanger(e) {
|
||||||
|
this.tm = [...e]
|
||||||
|
},
|
||||||
|
change(e) {
|
||||||
|
this.value = e;
|
||||||
|
this.chartOpts.tooltip.show = false
|
||||||
|
}
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.sssw-box {
|
||||||
|
.time-ranger {
|
||||||
|
margin: 10px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.select-bar {
|
||||||
|
margin: 10px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.realWater-content {
|
||||||
|
height: 320px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tableHead {
|
||||||
|
width: 100%;
|
||||||
|
margin-top: 5px;
|
||||||
|
height: 50px;
|
||||||
|
background-color: #e4f2fe;
|
||||||
|
display: flex;
|
||||||
|
color: #208FEE;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tableBody {
|
||||||
|
width: 100%;
|
||||||
|
height: calc(100vh - 214px);
|
||||||
|
background-color: #f7f7f7; //#ffffff;
|
||||||
|
overflow-y: scroll;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tableRow {
|
||||||
|
width: 100%;
|
||||||
|
height: 46px;
|
||||||
|
display: flex;
|
||||||
|
border-bottom: 1px solid #eee;
|
||||||
|
background-color: #ffffff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.td {
|
||||||
|
text-align: center;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
font-size: 13px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.t1 {
|
||||||
|
width: 25%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.t2 {
|
||||||
|
width: 50%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.t3 {
|
||||||
|
width: 25%;
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,193 @@
|
||||||
|
import echarts from 'echarts/lib/echarts';
|
||||||
|
import { sw } from './mock'
|
||||||
|
export default function DrpOption(
|
||||||
|
data = sw,
|
||||||
|
afsltdz,
|
||||||
|
flLowLimLev = 840.3,
|
||||||
|
desFloodLev = 843.23,
|
||||||
|
calFloodLev = 844.12) {
|
||||||
|
const maxVal = Math.max(...data.map(obj => obj.drp))
|
||||||
|
const maxSw = Math.ceil(Math.max(...data.map(obj => obj.rz)))
|
||||||
|
const minSw = Math.floor(Math.min(...data.map(obj => obj.rz)))
|
||||||
|
const maxKr = Math.max(...data.map(obj => obj.w))
|
||||||
|
const minKr = Math.min(...data.map(obj => obj.w))
|
||||||
|
console.log('desFloodLev', desFloodLev);
|
||||||
|
let eopts = {
|
||||||
|
tooltip: {
|
||||||
|
trigger: 'axis',
|
||||||
|
|
||||||
|
appendToBody: false,
|
||||||
|
className: 'echarts-tooltip'
|
||||||
|
},
|
||||||
|
grid: {
|
||||||
|
top: "15%",
|
||||||
|
left: "10%",
|
||||||
|
right: "10%",
|
||||||
|
bottom: "15%"
|
||||||
|
},
|
||||||
|
legend: {
|
||||||
|
show: true,
|
||||||
|
data: ["校核水位", '设计水位', '汛限水位', '水位', '库容'],
|
||||||
|
left: 'center',
|
||||||
|
top: 0,
|
||||||
|
itemWidth: 10,
|
||||||
|
padding: 0
|
||||||
|
},
|
||||||
|
xAxis: [
|
||||||
|
{
|
||||||
|
type: 'category',
|
||||||
|
data: data.map(o => o.tm.substr("2020-".length, 11)),
|
||||||
|
inverse: true,
|
||||||
|
splitLine: {
|
||||||
|
show: false
|
||||||
|
},
|
||||||
|
axisLabel: {
|
||||||
|
color: '#333',
|
||||||
|
fontSize: 12,
|
||||||
|
formatter: val => val.substr('2020-'.length, 11)
|
||||||
|
},
|
||||||
|
axisLine: {
|
||||||
|
lineStyle: {
|
||||||
|
color: '#07a6ff',
|
||||||
|
width: 0.5
|
||||||
|
}
|
||||||
|
},
|
||||||
|
axisTick: {
|
||||||
|
show: false
|
||||||
|
}
|
||||||
|
}
|
||||||
|
],
|
||||||
|
yAxis: [
|
||||||
|
{
|
||||||
|
type: 'value',
|
||||||
|
position: 'left',
|
||||||
|
name: '水位(m)',
|
||||||
|
splitLine: {
|
||||||
|
show: true,
|
||||||
|
lineStyle: {
|
||||||
|
color: '#07a6ff',
|
||||||
|
width: 0.25,
|
||||||
|
type: 'dotted'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
axisLabel: {
|
||||||
|
color: '#333',
|
||||||
|
fontSize: 10
|
||||||
|
},
|
||||||
|
axisLine: {
|
||||||
|
show: true,
|
||||||
|
lineStyle: {
|
||||||
|
color: '#07a6ff',
|
||||||
|
width: 0.5
|
||||||
|
}
|
||||||
|
},
|
||||||
|
axisTick: {
|
||||||
|
show: true
|
||||||
|
},
|
||||||
|
min: minSw,
|
||||||
|
max: maxSw
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: 'value',
|
||||||
|
position: 'right',
|
||||||
|
name: '库容(万m³)',
|
||||||
|
splitLine: {
|
||||||
|
show: false
|
||||||
|
},
|
||||||
|
axisLabel: {
|
||||||
|
color: '#333',
|
||||||
|
fontSize: 10
|
||||||
|
},
|
||||||
|
axisLine: {
|
||||||
|
show: true,
|
||||||
|
lineStyle: {
|
||||||
|
color: '#07a6ff',
|
||||||
|
width: 0.5
|
||||||
|
}
|
||||||
|
},
|
||||||
|
axisTick: {
|
||||||
|
show: true
|
||||||
|
},
|
||||||
|
min: minKr,
|
||||||
|
max: maxKr
|
||||||
|
}
|
||||||
|
],
|
||||||
|
}
|
||||||
|
let chartData = {
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
yAxisIndex: 0,
|
||||||
|
name: '校核水位',
|
||||||
|
type: 'line',
|
||||||
|
color: '#D9001B',
|
||||||
|
lineStyle: {
|
||||||
|
type: 'dashed'
|
||||||
|
},
|
||||||
|
data: data.map(o => calFloodLev),
|
||||||
|
symbol: 'none',
|
||||||
|
showSymbol: false,
|
||||||
|
label: {
|
||||||
|
show: false
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
yAxisIndex: 0,
|
||||||
|
name: '设计水位',
|
||||||
|
type: 'line',
|
||||||
|
color: '#F59A23',
|
||||||
|
data: data.map(o => desFloodLev),
|
||||||
|
lineStyle: {
|
||||||
|
type: 'dashed'
|
||||||
|
},
|
||||||
|
symbol: 'none',
|
||||||
|
showSymbol: false,
|
||||||
|
label: {
|
||||||
|
show: false
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
yAxisIndex: 0,
|
||||||
|
name: '汛限水位',
|
||||||
|
type: 'line',
|
||||||
|
color: '#FDDC9F',
|
||||||
|
data: data.map(o => flLowLimLev),
|
||||||
|
lineStyle: {
|
||||||
|
type: 'dashed'
|
||||||
|
},
|
||||||
|
symbol: 'none',
|
||||||
|
showSymbol: false,
|
||||||
|
label: {
|
||||||
|
show: false
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
yAxisIndex: 0,
|
||||||
|
name: '水位',
|
||||||
|
type: 'line',
|
||||||
|
symbol: 'none',
|
||||||
|
showSymbol: false,
|
||||||
|
color: '#0AE0B5',
|
||||||
|
label: {
|
||||||
|
show: false
|
||||||
|
},
|
||||||
|
data: data.map(o => o.rz ? o.rz.toFixed(2) : null)
|
||||||
|
},
|
||||||
|
{
|
||||||
|
yAxisIndex: 1,
|
||||||
|
name: '库容',
|
||||||
|
type: 'line',
|
||||||
|
color: '#007AFD',
|
||||||
|
symbol: 'none',
|
||||||
|
showSymbol: false,
|
||||||
|
label: {
|
||||||
|
show: false
|
||||||
|
},
|
||||||
|
data: data.map(o => o.w)
|
||||||
|
}
|
||||||
|
],
|
||||||
|
}
|
||||||
|
return {
|
||||||
|
eopts,
|
||||||
|
chartData
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,92 @@
|
||||||
|
<template>
|
||||||
|
<view class="image-preview-container">
|
||||||
|
<!-- 核心：swiper 轮播容器，实现左右滑动 -->
|
||||||
|
<swiper
|
||||||
|
class="swiper-box"
|
||||||
|
:current="currentIndex"
|
||||||
|
@change="onSwiperChange"
|
||||||
|
:indicator-dots="false"
|
||||||
|
>
|
||||||
|
<!-- 遍历图片数组，生成每一张轮播项 -->
|
||||||
|
<swiper-item v-for="(item, index) in imageList" :key="index">
|
||||||
|
<image
|
||||||
|
class="preview-image"
|
||||||
|
:src="item"
|
||||||
|
mode="aspectFill"
|
||||||
|
@load="onImageLoad"
|
||||||
|
></image>
|
||||||
|
</swiper-item>
|
||||||
|
</swiper>
|
||||||
|
|
||||||
|
<!-- 自定义左上角页码指示器（1/2 样式） -->
|
||||||
|
<view class="page-indicator">
|
||||||
|
{{ currentIndex + 1 }} / {{ imageList.length }}
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: "ImageSwiper",
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
// 图片数组，替换成你的实际图片链接/本地路径
|
||||||
|
imageList: [
|
||||||
|
"/static/images/first.jpg", // 第一张图（对应你截图的 1/2）
|
||||||
|
"/static/images/my.png" // 第二张图
|
||||||
|
],
|
||||||
|
currentIndex: 0, // 当前显示的图片索引（从0开始）
|
||||||
|
swiperHeight: 0 // 自适应swiper高度（可选，解决高度塌陷）
|
||||||
|
};
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
// 监听swiper切换，更新当前索引
|
||||||
|
onSwiperChange(e) {
|
||||||
|
this.currentIndex = e.detail.current;
|
||||||
|
},
|
||||||
|
// 图片加载完成后，自适应swiper高度（可选，让图片完整显示）
|
||||||
|
onImageLoad(e) {
|
||||||
|
const { width, height } = e.detail;
|
||||||
|
// 按屏幕宽度计算自适应高度
|
||||||
|
const systemInfo = uni.getSystemInfoSync();
|
||||||
|
const screenWidth = systemInfo.windowWidth;
|
||||||
|
const ratio = height / width;
|
||||||
|
this.swiperHeight = screenWidth * ratio;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.image-preview-container {
|
||||||
|
position: relative; /* 让页码绝对定位生效 */
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.swiper-box {
|
||||||
|
width: 100%;
|
||||||
|
/* 固定高度写法（如果不需要自适应，直接写死高度） */
|
||||||
|
/* height: 750rpx; */
|
||||||
|
/* 自适应高度写法（根据图片高度自动适配） */
|
||||||
|
height: v-bind(swiperHeight + 'px');
|
||||||
|
background-color: #000; /* 图片背景黑底，更美观 */
|
||||||
|
}
|
||||||
|
|
||||||
|
.preview-image {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 左上角页码样式，完全匹配你截图的效果 */
|
||||||
|
.page-indicator {
|
||||||
|
position: absolute;
|
||||||
|
top: 20rpx;
|
||||||
|
left: 20rpx;
|
||||||
|
padding: 8rpx 16rpx;
|
||||||
|
background-color: rgba(0, 0, 0, 0.5); /* 半透明黑底 */
|
||||||
|
color: #fff;
|
||||||
|
font-size: 28rpx;
|
||||||
|
border-radius: 8rpx;
|
||||||
|
z-index: 999; /* 层级最高，不被图片遮挡 */
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,99 @@
|
||||||
|
import echarts from 'echarts/lib/echarts';
|
||||||
|
import { sw } from './mock'
|
||||||
|
export default function DrpOption(data = sw) {
|
||||||
|
const maxVal = Math.max(...data.map(obj => obj.drp))
|
||||||
|
let eopts = {
|
||||||
|
tooltip: {
|
||||||
|
trigger: 'axis',
|
||||||
|
},
|
||||||
|
grid: {
|
||||||
|
top: "15%",
|
||||||
|
left: "10%",
|
||||||
|
right: "10%",
|
||||||
|
bottom: "15%"
|
||||||
|
},
|
||||||
|
legend: {
|
||||||
|
show: true,
|
||||||
|
data: ['降雨量'],
|
||||||
|
left: 'center',
|
||||||
|
top: 0,
|
||||||
|
itemWidth: 10,
|
||||||
|
padding: 0
|
||||||
|
},
|
||||||
|
xAxis: [
|
||||||
|
{
|
||||||
|
type: 'category',
|
||||||
|
data: data.map(o => o.tm.substr("2020-".length, 11)),
|
||||||
|
inverse: true,
|
||||||
|
splitLine: {
|
||||||
|
show: false
|
||||||
|
},
|
||||||
|
axisLabel: {
|
||||||
|
color: '#333',
|
||||||
|
fontSize: 12,
|
||||||
|
formatter: val => val.substr('2020-'.length, 11)
|
||||||
|
},
|
||||||
|
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: 'dotted'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
axisLabel: {
|
||||||
|
color: '#333',
|
||||||
|
fontSize: 10
|
||||||
|
},
|
||||||
|
axisLine: {
|
||||||
|
show: true,
|
||||||
|
lineStyle: {
|
||||||
|
color: '#07a6ff',
|
||||||
|
width: 0.5
|
||||||
|
}
|
||||||
|
},
|
||||||
|
axisTick: {
|
||||||
|
show: true
|
||||||
|
},
|
||||||
|
min: 0,
|
||||||
|
max: maxVal
|
||||||
|
},
|
||||||
|
],
|
||||||
|
}
|
||||||
|
let chartData = {
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
name: '降雨量',
|
||||||
|
type: 'bar',
|
||||||
|
barWidth: '60%',
|
||||||
|
data: data.map(o => o.drp).reverse(),
|
||||||
|
itemStyle: {
|
||||||
|
color: '#007AFD'
|
||||||
|
},
|
||||||
|
label: {
|
||||||
|
show: false
|
||||||
|
}
|
||||||
|
},
|
||||||
|
],
|
||||||
|
}
|
||||||
|
return {
|
||||||
|
eopts,
|
||||||
|
chartData
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,161 @@
|
||||||
|
<template>
|
||||||
|
<view class="zrtx-box">
|
||||||
|
<view class="title" style="text-align: center; font-size: 20px; font-weight: bold;">
|
||||||
|
{{ dic }}
|
||||||
|
</view>
|
||||||
|
<view class="table_cur">
|
||||||
|
<table style="width:100%;display:block">
|
||||||
|
<tr>
|
||||||
|
<th style="width: 50px;">
|
||||||
|
姓名
|
||||||
|
</th>
|
||||||
|
<th style="width: 130px">单位</th>
|
||||||
|
<th style="width: 80px;">
|
||||||
|
职务
|
||||||
|
</th>
|
||||||
|
<th style="width: 100px;">
|
||||||
|
联系方式
|
||||||
|
</th>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td style="width: 50px; white-space: nowrap;">{{ info.personName }}</td>
|
||||||
|
<td style="width: 130px; white-space: pre-wrap; line-height: 1.5;">{{ info.orgName }}</td>
|
||||||
|
<td style="width: 80px; white-space: nowrap;">{{ info.position }}</td>
|
||||||
|
<td style="width: 100px;color: #62bafa; white-space: nowrap;" @click="show = true">{{ info.tel }}</td>
|
||||||
|
</tr>
|
||||||
|
</table>
|
||||||
|
|
||||||
|
</view>
|
||||||
|
<u-action-sheet :actions="list" :title="title" :show="show" :description="info.tel" @select="selectClick"
|
||||||
|
:closeOnClickOverlay="true" :closeOnClickAction="true"></u-action-sheet>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import { repDict } from "../../utils/dicType.js"
|
||||||
|
export default {
|
||||||
|
props: {
|
||||||
|
info: Object,
|
||||||
|
default: {}
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
show: false,
|
||||||
|
title: "",
|
||||||
|
list: [
|
||||||
|
{
|
||||||
|
name: '呼叫'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '复制'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '取消'
|
||||||
|
},
|
||||||
|
],
|
||||||
|
}
|
||||||
|
},
|
||||||
|
computed: {
|
||||||
|
dic() {
|
||||||
|
return repDict(this.info.repType)
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
selectClick(obj) {
|
||||||
|
if (obj.name == "呼叫") {
|
||||||
|
uni.makePhoneCall({
|
||||||
|
phoneNumber: this.info.tel,
|
||||||
|
});
|
||||||
|
this.show = false
|
||||||
|
} else if (obj.name == "复制") {
|
||||||
|
uni.setClipboardData({
|
||||||
|
data: this.info.tel,
|
||||||
|
showToast: true
|
||||||
|
})
|
||||||
|
this.show = false
|
||||||
|
}
|
||||||
|
// else if(obj.name == "保存至手机通讯录"){
|
||||||
|
// uni.addPhoneContact({
|
||||||
|
// lastName: this.info.personName.substr(0,1),
|
||||||
|
// firstName: this.info.personName.substr(1),
|
||||||
|
// mobilePhoneNumber: this.info.tel,
|
||||||
|
// success: function () {
|
||||||
|
// uni.$showMsg("保存成功")
|
||||||
|
// },
|
||||||
|
// fail: function () {
|
||||||
|
// console.log('fail');
|
||||||
|
// }
|
||||||
|
// });
|
||||||
|
// }
|
||||||
|
else {
|
||||||
|
this.show = false
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.zrtx-box {
|
||||||
|
border: 1px solid #c1f2ce;
|
||||||
|
border-radius: 2px;
|
||||||
|
padding: 10px 10px 5px 10px;
|
||||||
|
background-color: #ebfbef;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
|
||||||
|
.table_div {
|
||||||
|
height: 100%;
|
||||||
|
max-width: calc(100% - 0px);
|
||||||
|
max-height: calc(100vh);
|
||||||
|
flex: 1;
|
||||||
|
padding-top: 0px;
|
||||||
|
overflow-x: scroll;
|
||||||
|
}
|
||||||
|
|
||||||
|
/*table样式*/
|
||||||
|
.table_cur {
|
||||||
|
margin-top: 20px;
|
||||||
|
width: 100%;
|
||||||
|
empty-cells: show;
|
||||||
|
border-collapse: collapse;
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.scroll-table {
|
||||||
|
height: calc(100vh - 125px);
|
||||||
|
overflow-y: auto;
|
||||||
|
width: '100%'
|
||||||
|
}
|
||||||
|
|
||||||
|
.table_cur tr {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
min-height: 65rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.table_cur th {
|
||||||
|
height: 65rpx;
|
||||||
|
font-size: 14px;
|
||||||
|
// font-weight: bold;
|
||||||
|
|
||||||
|
font-weight: 100;
|
||||||
|
padding: 0px 10px;
|
||||||
|
box-sizing: border-box;
|
||||||
|
white-space: nowrap;
|
||||||
|
text-align: center !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.table_cur td {
|
||||||
|
min-height: 65rpx;
|
||||||
|
height: auto;
|
||||||
|
// border-bottom: 1px solid #d8ddeb;
|
||||||
|
font-size: 14px;
|
||||||
|
color: #2f4056;
|
||||||
|
padding: 10px;
|
||||||
|
box-sizing: border-box;
|
||||||
|
text-align: center !important;
|
||||||
|
vertical-align: middle;
|
||||||
|
word-break: break-all;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,55 @@
|
||||||
|
<template>
|
||||||
|
<view class="scroll-table">
|
||||||
|
<view v-for="(item,index) in list" :key="index" >
|
||||||
|
<Card :info="item" />
|
||||||
|
</view>
|
||||||
|
<view style="height:50px"></view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import Card from "./card.vue"
|
||||||
|
export default {
|
||||||
|
props:{
|
||||||
|
resCode:String,
|
||||||
|
default:''
|
||||||
|
},
|
||||||
|
components:{
|
||||||
|
Card
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
list:[]
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
methods: {
|
||||||
|
async getData(){
|
||||||
|
try{
|
||||||
|
const {data} = await uni.$http.post(
|
||||||
|
"/gunshiApp/xfflood/reservoir/water/safe/person",
|
||||||
|
{
|
||||||
|
resCode:this.resCode
|
||||||
|
})
|
||||||
|
console.log("data",data);
|
||||||
|
if(data.code == 200){
|
||||||
|
this.list = [...data.data];
|
||||||
|
}
|
||||||
|
}catch(e){
|
||||||
|
uni.$showMsg();
|
||||||
|
}
|
||||||
|
},
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
this.getData()
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.scroll-table{
|
||||||
|
height: calc(100vh - 100px);
|
||||||
|
overflow-y: auto;
|
||||||
|
width:100%;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -51,6 +51,19 @@ export function restm (e) {
|
||||||
}
|
}
|
||||||
return index
|
return index
|
||||||
}
|
}
|
||||||
|
|
||||||
|
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)
|
||||||
|
}
|
||||||
|
}
|
||||||
export const adnmZhen = adcd => {
|
export const adnmZhen = adcd => {
|
||||||
if (!adcd || !nameMap) {
|
if (!adcd || !nameMap) {
|
||||||
return undefined
|
return undefined
|
||||||
|
|
|
||||||
Binary file not shown.
|
After Width: | Height: | Size: 9.3 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 887 B |
Binary file not shown.
|
After Width: | Height: | Size: 1.1 KiB |
Loading…
Reference in New Issue