feat():水库详情开发
parent
6ce3900702
commit
c8a6ae71e1
|
|
@ -2,7 +2,7 @@
|
|||
"name" : "赤壁水利",
|
||||
"appid" : "__UNI__1AC9CFD",
|
||||
"description" : "",
|
||||
"versionName" : "1.0.0",
|
||||
"versionName" : "1.0.2",
|
||||
"versionCode" : 1,
|
||||
"transformPx" : false,
|
||||
"app-plus" : {
|
||||
|
|
|
|||
|
|
@ -2,7 +2,14 @@
|
|||
"easycom": {
|
||||
"^u-(.*)": "@/uni_modules/uview-ui/components/u-$1/u-$1.vue"
|
||||
},
|
||||
"pages": [{
|
||||
"pages": [
|
||||
{
|
||||
"path": "pages/simpleResviror/index",
|
||||
"style": {
|
||||
"navigationBarTitleText": ""
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/login/login",
|
||||
"style": {
|
||||
"navigationBarTitleText": ""
|
||||
|
|
|
|||
|
|
@ -179,7 +179,7 @@ export default function DrpOption(data=[],wrz,grz) {
|
|||
lineStyle: {
|
||||
type: "dashed"
|
||||
},
|
||||
data: data.map(o => grz),
|
||||
data: data.map(o => Number(grz)),
|
||||
symbol: 'none' // 设置标记点为'none'，即去掉圆点
|
||||
},
|
||||
{
|
||||
|
|
@ -189,7 +189,7 @@ export default function DrpOption(data=[],wrz,grz) {
|
|||
type: 'line',
|
||||
color: "#F59A23",
|
||||
barWidth: '60%',
|
||||
data: data.map(o => wrz),
|
||||
data: data.map(o => Number(wrz)),
|
||||
lineStyle: {
|
||||
type: "dashed"
|
||||
},
|
||||
|
|
@ -199,7 +199,7 @@ export default function DrpOption(data=[],wrz,grz) {
|
|||
name: '降雨量',
|
||||
type: 'bar',
|
||||
barWidth: '60%',
|
||||
data: data.map(o => o.drp).reverse(),
|
||||
data: data.map(o => Number(o.drp)).reverse(),
|
||||
itemStyle: {
|
||||
color: "#007AFD",
|
||||
},
|
||||
|
|
@ -231,7 +231,7 @@ export default function DrpOption(data=[],wrz,grz) {
|
|||
label: {
|
||||
show: false,
|
||||
},
|
||||
data: data.map(o => o.tq),
|
||||
data: data.map(o => Number(o.tq)),
|
||||
}
|
||||
]
|
||||
}
|
||||
|
|
|
|||
|
|
@ -26,7 +26,7 @@
|
|||
</view>
|
||||
<view class="jcsj-content">
|
||||
<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 style="margin-top: 20px;" v-if="selactOne == 1">
|
||||
<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
|
||||
}
|
||||
|
||||
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 => {
|
||||
if (!adcd || !nameMap) {
|
||||
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