456 lines
11 KiB
Vue
456 lines
11 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> -->
|
||
<picker @change="bindPickerChange" :range="array" range-key="profileName" style="margin-top:0px;padding: 0 10px;">
|
||
<view class="uni-input12">
|
||
<view>{{ profileName }}</view>
|
||
<u-icon name="arrow-down-fill" color="#000" size="15"></u-icon>
|
||
</view>
|
||
</picker>
|
||
|
||
<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 class="tool-btn">
|
||
<view class="scale-btn">
|
||
<u-button style="margin-right:10px" @click="fd" class="aqjc-custom-style">+</u-button>
|
||
<u-button @click="sx" class="aqjc-custom-style">-</u-button>
|
||
</view>
|
||
<view class="play-btn">
|
||
<uni-icons type="videocam" size="40" :color="swiper ? '#2979ff' : '#909399'" @click="play"></uni-icons>
|
||
</view>
|
||
</view>
|
||
<view class="jcsj-charts">
|
||
<movable-area :style="areaStyle">
|
||
<movable-view @scale="scale" direction="all" :scale-value="scaleValue" scale-min="0.5" scale="true"
|
||
scale-max="4" out-of-bounds="true">
|
||
<qiun-data-charts :chartData="chartData.chartData" :echartsApp="true" :eopts="chartData.eopts" />
|
||
</movable-view>
|
||
</movable-area>
|
||
</view>
|
||
<view style="margin-top: 20px;">
|
||
<JcsjTable :columns="columns" :data="dataSources" :newCol="newCol" :cols2="cols2" />
|
||
</view>
|
||
|
||
</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 JcsjTable from "./jcsjTable"
|
||
const stm = moment().subtract(1, 'days').add(1, 'hour').set({
|
||
minute: 0,
|
||
second: 0
|
||
}).format("YYYY-MM-DD HH:mm");
|
||
const etm = moment().add(1, 'hour').set({
|
||
minute: 0,
|
||
second: 0
|
||
}).format("YYYY-MM-DD HH:mm");
|
||
const typeName = {
|
||
'ZB0+130': '1',
|
||
'ZB0+132': '2',
|
||
'ZB0+250': '3',
|
||
'ZB0+252': '4',
|
||
'ZB0+370': '5',
|
||
'ZB0+372': '6',
|
||
'FB0+010': '7',
|
||
'FB0+030': '8',
|
||
}
|
||
export default {
|
||
|
||
data() {
|
||
return {
|
||
startTime: stm,
|
||
endTime: etm,
|
||
stm,
|
||
etm,
|
||
showTime: false,
|
||
showTime1: false,
|
||
array: [],
|
||
profileCode: '',
|
||
dbType: '',
|
||
type1: '',
|
||
trData: [],
|
||
dataSources: [],
|
||
chartData: {
|
||
chartData: {},
|
||
eopts: {}
|
||
},
|
||
areaStyle: {
|
||
left: "-450px"
|
||
},
|
||
scaleValue: 0.5,
|
||
swiper: false,
|
||
timer: 100,
|
||
columns: [],
|
||
cols1: [{
|
||
title: '序号',
|
||
key: 'index',
|
||
width: 60,
|
||
align: 'center',
|
||
},
|
||
{
|
||
title: '时间',
|
||
key: 'time',
|
||
width: 120,
|
||
align: 'center',
|
||
},
|
||
{
|
||
title: '库水位(m)',
|
||
key: 'rz',
|
||
dataIndex: 'rz',
|
||
width: 150,
|
||
align: "center"
|
||
},
|
||
],
|
||
cols2: [{
|
||
title: '结果分析',
|
||
key: 'status',
|
||
dataIndex: 'status',
|
||
width: 150,
|
||
align: "center",
|
||
}],
|
||
newCol: []
|
||
}
|
||
},
|
||
components: {
|
||
JcsjTable
|
||
},
|
||
computed: {
|
||
profileName() {
|
||
if (this.array.length > 0) {
|
||
return this.array.find(item => item.profileCode == this.profileCode).profileName;
|
||
} else {
|
||
return '';
|
||
}
|
||
},
|
||
},
|
||
watch: {
|
||
profileCode: {
|
||
handler(newVal, oldVal) {
|
||
if (newVal) {
|
||
let name = this.array.find(item => item.profileCode == newVal).profileName;
|
||
this.dbType = (name == "ZB0+130" || name == "ZB0+132") ? "1" :
|
||
(name == "ZB0+250" || name == "ZB0+252") ? "2" :
|
||
(name == "ZB0+370" || name == "ZB0+372") ? "3" :
|
||
(name == "FB0+010" || name == "FB0+030") ? '4' : '';
|
||
this.type1 = typeName[name];
|
||
this.getDmTree();
|
||
}
|
||
},
|
||
immediate: true,
|
||
},
|
||
trData: {
|
||
handler(newVal, oldVal) {
|
||
if (newVal) {
|
||
this.getTableData()
|
||
}
|
||
},
|
||
deep: true,
|
||
},
|
||
dataSources: {
|
||
handler(newVal, oldVal) {
|
||
if (newVal) {
|
||
this.chartData = {
|
||
...drpOption(newVal[0], this.dbType, this.type1)
|
||
}
|
||
}
|
||
},
|
||
deep: true,
|
||
immediate: true,
|
||
},
|
||
swiper(newVal) {
|
||
console.log("ww", newVal);
|
||
|
||
if (newVal) {
|
||
this.InitialScroll(this.dataSources)
|
||
} else {
|
||
clearInterval(this.timer)
|
||
}
|
||
}
|
||
},
|
||
methods: {
|
||
InitialScroll(data) {
|
||
let index = 0;
|
||
this.timer = setInterval(() => {
|
||
console.log("data", data[index % data.length]);
|
||
|
||
this.chartData = {
|
||
...drpOption(data[index % data.length], this.dbType, this.type1)
|
||
}
|
||
index++;
|
||
}, 1000)
|
||
},
|
||
// 播放
|
||
play() {
|
||
this.swiper = !this.swiper;
|
||
},
|
||
// 放大回调
|
||
fd() {
|
||
if (this.scaleValue == 4) {
|
||
return;
|
||
} else {
|
||
this.scaleValue += 0.1;
|
||
}
|
||
},
|
||
// 缩小回调
|
||
sx() {
|
||
if (this.scaleValue == 0.5) {
|
||
return ''
|
||
} else {
|
||
this.scaleValue -= 0.1;
|
||
}
|
||
},
|
||
// 缩放
|
||
scale(e) {
|
||
this.areaStyle.left = -(e.detail.scale + 1) * 450 + 'px';
|
||
},
|
||
searchHandle() {
|
||
this.getTableData();
|
||
},
|
||
handleStartTime(e) {
|
||
let time = moment(e.value).format("YYYY-MM-DD HH:mm")
|
||
console.log("time", time);
|
||
|
||
this.stm = time
|
||
this.showTime = false
|
||
},
|
||
handleEndTime(e) {
|
||
let time = moment(e.value).format("YYYY-MM-DD HH:mm")
|
||
this.etm = time;
|
||
this.showTime1 = false
|
||
},
|
||
handleRanger(e) {
|
||
console.log(e);
|
||
this.tm = [...e]
|
||
},
|
||
bindPickerChange(e) {
|
||
this.profileCode = this.array[e.target.value].profileCode
|
||
},
|
||
// 获取监测点数据
|
||
async getMonthData() {
|
||
uni.showLoading({
|
||
title: "加载中...",
|
||
mask: true,
|
||
});
|
||
try {
|
||
const {
|
||
data
|
||
} = await uni.$http.post(
|
||
`/gunshiApp/tsg/attDamProfile/list`,)
|
||
if (data.code == 200) {
|
||
uni.hideLoading();
|
||
const filterData = data.data.filter(item => (item?.profileName?.split('+')[0] == 'ZB0' || item?.profileName?.split('+')[0] == 'FB0'))
|
||
console.log("filterData", filterData);
|
||
const sortedData = filterData.sort((a, b) => {
|
||
// 判断a、b是否为ZB0开头
|
||
const isAZB0 = a.profileCode.startsWith('ZB0');
|
||
const isBZB0 = b.profileCode.startsWith('ZB0');
|
||
|
||
// 规则：ZB0开头的排前面；同类型（都ZB0/都非ZB0）保持原顺序
|
||
if (isAZB0 && !isBZB0) return -1; // a是ZB0，b不是 → a在前
|
||
if (!isAZB0 && isBZB0) return 1; // a不是ZB0，b是 → b在前
|
||
return 0; // 同类型，保持原始相对顺序
|
||
});
|
||
this.array = sortedData
|
||
this.profileCode = sortedData[0].profileCode;
|
||
}
|
||
} catch (e) {
|
||
uni.$showMsg();
|
||
}
|
||
},
|
||
|
||
// 获取坝面上点位数据
|
||
async getTableData() {
|
||
uni.showLoading({
|
||
title: "加载中...",
|
||
mask: true,
|
||
});
|
||
try {
|
||
const {
|
||
data
|
||
} = await uni.$http.post(
|
||
"/gunshiApp/tsg/osmoticPressR/infiltra/line", {
|
||
stationCodes: this.trData,
|
||
dateTimeRangeSo: {
|
||
start: moment(this.stm).format("YYYY-MM-DD HH:mm:00"),
|
||
end: moment(this.etm).format("YYYY-MM-DD HH:mm:00"),
|
||
}
|
||
}
|
||
)
|
||
if (data.code == 200) {
|
||
uni.hideLoading();
|
||
let newArr = [];
|
||
let newData = data.data.map((s, i) => {
|
||
newArr.push(s.list.map(c => ({
|
||
[c.stationCode]: c.value || '-',
|
||
tm: c.tm,
|
||
|
||
})))
|
||
return {
|
||
tm: s.tm,
|
||
rz: s.rz,
|
||
status: s.status || '',
|
||
inx: i + 1
|
||
}
|
||
})
|
||
let filterData = newArr.filter(s => s.length > 0).flat()
|
||
let result = newData.map(s => {
|
||
let tm1 = s.tm;
|
||
let r = filterData.filter(t => {
|
||
return t.tm == tm1
|
||
})
|
||
let obj = {};
|
||
r.forEach(s1 => {
|
||
obj = {
|
||
...s1,
|
||
...obj
|
||
}
|
||
})
|
||
return {
|
||
...s,
|
||
...obj,
|
||
}
|
||
})
|
||
this.dataSources = [...result];
|
||
}
|
||
} catch (error) {
|
||
uni.$showMsg();
|
||
}
|
||
},
|
||
// 获取各点
|
||
async getDmTree() {
|
||
try {
|
||
const {
|
||
data
|
||
} = await uni.$http.post("/gunshiApp/tsg/attDamProfile/tree")
|
||
if (data.code == 200) {
|
||
console.log("data", data);
|
||
|
||
let filterData = data.data.filter(s => s.profileCode == this.profileCode)
|
||
this.trData = filterData[0].children;
|
||
const newCol = filterData[0].children.map(s => ({
|
||
title: `${s}(m)`,
|
||
key: s,
|
||
dataIndex: s,
|
||
width: 150,
|
||
align: "center",
|
||
}))
|
||
this.columns = [...this.cols1, ...newCol, ...this.cols2]
|
||
this.newCol = newCol;
|
||
}
|
||
} catch (error) {
|
||
uni.$showMsg();
|
||
}
|
||
},
|
||
|
||
// 拖动回调
|
||
onChange(e) {
|
||
console.log(e);
|
||
},
|
||
},
|
||
mounted() {
|
||
this.getMonthData()
|
||
this.getDmTree()
|
||
},
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.uni-input12 {
|
||
display: flex;
|
||
justify-content: center;
|
||
column-gap: 30px;
|
||
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> |