376 lines
8.6 KiB
Vue
376 lines
8.6 KiB
Vue
<template>
|
|
<view
|
|
:style="{ height: '100vh', overflow: 'hidden', backgroundColor: '#fff' }"
|
|
>
|
|
<u-status-bar></u-status-bar>
|
|
<u-navbar
|
|
title="安全监测"
|
|
:autoBack="true"
|
|
:titleStyle="{
|
|
fontSize: '18px',
|
|
}"
|
|
:height="44"
|
|
:safeAreaInsetTop="true"
|
|
leftIconSize="20"
|
|
leftIconColor="rgb(153, 153, 153)"
|
|
>
|
|
</u-navbar>
|
|
<view class="picker-sel">
|
|
<picker @change="typeOnChange" :range="watchArr" range-key="name">
|
|
<view class="uni-input12" style="margin-right: 10px">
|
|
<view>{{ name }}</view>
|
|
<u-icon name="arrow-down-fill" color="#000" size="15"></u-icon>
|
|
</view>
|
|
</picker>
|
|
<picker
|
|
@change="stationCodeChange"
|
|
:range="statiionCodeArray"
|
|
range-key="stationCode"
|
|
>
|
|
<view class="uni-input12">
|
|
<view>{{ stationCode }}</view>
|
|
<u-icon name="arrow-down-fill" color="#000" size="15"></u-icon>
|
|
</view>
|
|
</picker>
|
|
</view>
|
|
|
|
<view class="jcsj-box">
|
|
<view class="time-ranger">
|
|
<view class="start-time">
|
|
<text>开始时间</text>
|
|
<text
|
|
@click="showTime = true"
|
|
style="margin-left: 10%; color: #3399ef"
|
|
>{{ stm }}</text
|
|
>
|
|
</view>
|
|
<view class="end-time">
|
|
<text>结束时间</text>
|
|
<text
|
|
@click="showTime1 = true"
|
|
style="margin: 0 10%; color: #3399ef"
|
|
>{{ etm }}</text
|
|
>
|
|
<view class="search-btn" @click="searchHandle"> 搜索 </view>
|
|
</view>
|
|
</view>
|
|
<view class="jcsj-content">
|
|
<view v-if="dataSources.length">
|
|
<view style="width:100%;height:320px">
|
|
<qiun-data-charts :chartData="chartData.chartData" :echartsApp="true" :eopts="chartData.eopts" />
|
|
</view>
|
|
<JcsjTable :columns="newCol" :data="dataSources" :type="name" />
|
|
</view>
|
|
<image
|
|
:src="showImg"
|
|
style="width: 60%; height: 220px; margin: 50%;transform: translate(-50%,-50%)"
|
|
v-else
|
|
></image>
|
|
</view>
|
|
<u-datetime-picker
|
|
:show="showTime"
|
|
v-model="startTime"
|
|
mode="datetime"
|
|
@confirm="handleStartTime"
|
|
@cancel="showTime = false"
|
|
></u-datetime-picker>
|
|
<u-datetime-picker
|
|
:show="showTime1"
|
|
v-model="endTime"
|
|
mode="datetime"
|
|
@confirm="handleEndTime"
|
|
@cancel="showTime1 = false"
|
|
></u-datetime-picker>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import moment from "moment";
|
|
import drpOption from "./jrxOptions";
|
|
import syOption from "./syOptions";
|
|
import JcsjTable from "./jcsjTable";
|
|
const stm = moment()
|
|
.subtract(1, "days")
|
|
.add(1, "hour")
|
|
.set({
|
|
minute: 0,
|
|
second: 0,
|
|
})
|
|
.format("YYYY-MM-DD HH:mm:ss");
|
|
const etm = moment()
|
|
.add(1, "hour")
|
|
.set({
|
|
minute: 0,
|
|
second: 0,
|
|
})
|
|
.format("YYYY-MM-DD HH:mm:ss");
|
|
export default {
|
|
data() {
|
|
return {
|
|
startTime: stm,
|
|
endTime: etm,
|
|
stm,
|
|
etm,
|
|
showTime: false,
|
|
showTime1: false,
|
|
watchArr: [
|
|
{ name: "结构缝开度", type: 1 },
|
|
{ name: "渗压", type: 2 },
|
|
],
|
|
statiionCodeArray: [],
|
|
stationCode: "",
|
|
name: "结构缝开度",
|
|
dataSources: [],
|
|
showImg: "../../static/empty.png",
|
|
chartData: {
|
|
chartData: {},
|
|
eopts: {},
|
|
},
|
|
kfdCols: [
|
|
{
|
|
title: "监测点",
|
|
key: "stationCode",
|
|
dataIndex: "stationCode",
|
|
width: 100,
|
|
align: "center",
|
|
},
|
|
{
|
|
title: "缝开度(mm)",
|
|
key: "value",
|
|
dataIndex: "value",
|
|
width: 100,
|
|
align: "center",
|
|
},
|
|
{
|
|
title: "温度(℃)",
|
|
key: "temp",
|
|
dataIndex: "temp",
|
|
width: 100,
|
|
align: "center",
|
|
},
|
|
{
|
|
title: "模数(F)",
|
|
key: "modulus",
|
|
dataIndex: "modulus",
|
|
width: 100,
|
|
align: "center",
|
|
},
|
|
{
|
|
title: "监测时间",
|
|
key: "tm",
|
|
dataIndex: "tm",
|
|
width: 100,
|
|
align: "center",
|
|
},
|
|
],
|
|
syCols: [
|
|
{
|
|
title: "测点编号",
|
|
key: "stationCode",
|
|
dataIndex: "stationCode",
|
|
width: 120,
|
|
align: "center",
|
|
},
|
|
{
|
|
title: "水位(mm)",
|
|
key: "value",
|
|
dataIndex: "value",
|
|
width: 150,
|
|
align: "center",
|
|
},
|
|
{
|
|
title: "水压(KPa)",
|
|
key: "press",
|
|
dataIndex: "press",
|
|
width: 100,
|
|
align: "center",
|
|
},
|
|
{
|
|
title: "水位高程(m)",
|
|
key: "waterEle",
|
|
dataIndex: "waterEle",
|
|
width: 100,
|
|
align: "center",
|
|
},
|
|
{
|
|
title: "温度(℃)",
|
|
key: "temp",
|
|
dataIndex: "temp",
|
|
width: 100,
|
|
align: "center",
|
|
},
|
|
{
|
|
title: "模数(F)",
|
|
key: "modulus",
|
|
dataIndex: "modulus",
|
|
width: 100,
|
|
align: "center",
|
|
},
|
|
{
|
|
title: "监测时间",
|
|
key: "tm",
|
|
dataIndex: "tm",
|
|
width: 100,
|
|
align: "center",
|
|
},
|
|
],
|
|
newCol: [],
|
|
};
|
|
},
|
|
components: {
|
|
JcsjTable,
|
|
},
|
|
watch: {
|
|
name: {
|
|
handler(newVal, oldVal) {
|
|
const type = this.watchArr.find((item) => item.name == newVal)?.type;
|
|
this.getStationCode(type);
|
|
this.newCol = newVal == "结构缝开度" ? this.kfdCols : this.syCols;
|
|
},
|
|
immediate: true,
|
|
},
|
|
stationCode(newVal) {
|
|
this.getList(newVal);
|
|
},
|
|
},
|
|
methods: {
|
|
getStationCode(type) {
|
|
uni.$http
|
|
.get("/gunshiApp/ykz/osmoticStationInfo/list/" + type)
|
|
.then((res) => {
|
|
this.statiionCodeArray = res.data.data;
|
|
this.stationCode = res.data.data[0].stationCode;
|
|
});
|
|
},
|
|
stationCodeChange(e) {
|
|
this.stationCode = this.statiionCodeArray[e.target.value].stationCode;
|
|
},
|
|
|
|
async getList(code) {
|
|
const url =
|
|
this.name == "结构缝开度"
|
|
? "/gunshiApp/ykz/osmoticJointR/list"
|
|
: "/gunshiApp/ykz/osmoticPressR/list";
|
|
try {
|
|
const { data } = await uni.$http.post(url, {
|
|
dateTimeRangeSo: { start: this.stm, end: this.etm },
|
|
stationCode: code,
|
|
});
|
|
if (data.code == 200) {
|
|
this.dataSources = data.data;
|
|
this.chartData = this.name == "结构缝开度"? {...drpOption(data.data)} : {...syOption(data.data)}
|
|
}
|
|
} catch (error) {
|
|
console.log(error);
|
|
}
|
|
},
|
|
|
|
searchHandle() {
|
|
this.getList(this.stationCode);
|
|
},
|
|
handleStartTime(e) {
|
|
let time = moment(e.value).format("YYYY-MM-DD HH:mm:ss");
|
|
console.log("time", time);
|
|
|
|
this.stm = time;
|
|
this.showTime = false;
|
|
},
|
|
handleEndTime(e) {
|
|
let time = moment(e.value).format("YYYY-MM-DD HH:mm:ss");
|
|
this.etm = time;
|
|
this.showTime1 = false;
|
|
},
|
|
handleRanger(e) {
|
|
console.log(e);
|
|
this.tm = [...e];
|
|
},
|
|
typeOnChange(e) {
|
|
this.name = this.watchArr[e.target.value].name;
|
|
},
|
|
},
|
|
mounted() {},
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.picker-sel {
|
|
display: flex;
|
|
justify-content: center;
|
|
// column-gap: 10px;
|
|
margin-top: 50px;
|
|
padding: 0 10px;
|
|
}
|
|
.uni-input12 {
|
|
display: flex;
|
|
justify-content: center;
|
|
column-gap: 10px;
|
|
align-items: center;
|
|
padding: 5px 0;
|
|
border: 1px solid #f2f2f2;
|
|
border-left: none;
|
|
border-right: none;
|
|
// background-image: '../../static/images/';
|
|
}
|
|
|
|
.jcsj-box {
|
|
padding: 0 10px;
|
|
|
|
.jcsj-content {
|
|
max-height: 100vh;
|
|
width: 100%;
|
|
overflow-y: auto;
|
|
overflow-x: hidden;
|
|
|
|
.tool-btn {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: "center";
|
|
padding: 5px;
|
|
|
|
.scale-btn {
|
|
display: flex;
|
|
|
|
button {
|
|
height: 40px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.jcsj-charts {
|
|
width: 1310px;
|
|
height: 250px;
|
|
overflow-y: auto;
|
|
|
|
// margin-top: 20px;
|
|
& > movable-area {
|
|
height: 250px;
|
|
width: 3000px;
|
|
// position:fixed;
|
|
overflow: hidden;
|
|
z-index: 1;
|
|
background-color: #efefef;
|
|
|
|
movable-view {
|
|
display: flex;
|
|
justify-content: center;
|
|
width: 1310px;
|
|
height: 380px;
|
|
background-color: #fff;
|
|
left: 450px;
|
|
top: 10px;
|
|
}
|
|
}
|
|
|
|
.active {
|
|
border-color: #68bbff !important;
|
|
color: #68bbff;
|
|
}
|
|
}
|
|
|
|
.aqjc-custom-style {
|
|
width: 80rpx;
|
|
}
|
|
}
|
|
</style> |