feat(): 安全监测开发

master
李神峰 2025-01-15 17:43:55 +08:00
parent ff3efc5b66
commit 9f9ded1a80
10 changed files with 887 additions and 733 deletions

View File

@ -1,77 +1,111 @@
<template>
<view :style="{height:'100vh',overflow:'hidden',backgroundColor:'#fff'}">
<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
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:50px;padding: 0 10px;">
<view class="uni-input12">
<view>{{profileName}}</view>
<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>
<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">
搜索
<text
@click="showTime1 = true"
style="margin: 0 10%; color: #3399ef"
>{{ etm }}</text
>
<view class="search-btn" @click="searchHandle"> </view>
</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">
<view v-if="dataSources.length">
<view style="width:100%;height:320px">
<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" />
<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>
<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({
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");
const etm = moment().add(1, 'hour').set({
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");
second: 0,
})
.format("YYYY-MM-DD HH:mm:ss");
export default {
data() {
return {
startTime: stm,
@ -80,276 +114,197 @@
etm,
showTime: false,
showTime1: false,
array: [],
profileCode: '',
dbType: '',
trData: [],
watchArr: [
{ name: "结构缝开度", type: 1 },
{ name: "渗压", type: 2 },
],
statiionCodeArray: [],
stationCode: "",
name: "结构缝开度",
dataSources: [],
showImg: "../../static/empty.png",
chartData: {
chartData: {},
eopts: {}
eopts: {},
},
areaStyle: {
left: "-450px"
},
scaleValue: 0.5,
swiper: false,
timer: 100,
columns: [],
cols1: [{
title: '序号',
key: 'index',
width: 60,
align: 'center',
kfdCols: [
{
title: "监测点",
key: "stationCode",
dataIndex: "stationCode",
width: 100,
align: "center",
},
{
title: '时间',
key: 'time',
width: 120,
align: 'center',
title: "缝开度(mm)",
key: "value",
dataIndex: "value",
width: 100,
align: "center",
},
{
title: '库水位(m)',
key: 'rz',
dataIndex: 'rz',
width: 150,
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",
},
],
cols2: [{
title: '结果分析',
key: 'status',
dataIndex: 'status',
syCols: [
{
title: "测点编号",
key: "stationCode",
dataIndex: "stationCode",
width: 120,
align: "center",
},
{
title: "水位(mm)",
key: "value",
dataIndex: "value",
width: 150,
align: "center",
}],
newCol: []
}
},
{
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
},
computed: {
profileName() {
if (this.array.length > 0) {
return this.array.find(item => item.profileCode == this.profileCode).profileName;
} else {
return '';
}
},
JcsjTable,
},
watch: {
profileCode: {
name: {
handler(newVal, oldVal) {
if (newVal) {
let name = this.array.find(item => item.profileCode == newVal).profileName;
this.dbType = name == "大坝B0+060" ? "1" :
name == "大坝B0+090" ? "2" :
name == "大坝B0+120" ? "2" : '1'
this.getDmTree();
}
const type = this.watchArr.find((item) => item.name == newVal)?.type;
this.getStationCode(type);
this.newCol = newVal == "结构缝开度" ? this.kfdCols : this.syCols;
},
immediate: true,
},
trData: {
handler(newVal, oldVal) {
if (newVal) {
this.getTableData()
}
stationCode(newVal) {
this.getList(newVal);
},
deep: true,
},
dataSources: {
handler(newVal, oldVal) {
if (newVal) {
this.chartData = {
...drpOption(newVal[0], this.dbType)
}
}
},
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]);
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;
},
this.chartData = {
...drpOption(data[index % data.length], this.dbType)
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)}
}
index++;
}, 1000)
},
//
play() {
this.swiper = !this.swiper;
},
//
fd() {
if (this.scaleValue == 4) {
return;
} else {
this.scaleValue += 0.1;
} catch (error) {
console.log(error);
}
},
//
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();
this.getList(this.stationCode);
},
handleStartTime(e) {
let time = moment(e.value).format("YYYY-MM-DD HH:mm")
let time = moment(e.value).format("YYYY-MM-DD HH:mm:ss");
console.log("time", time);
this.stm = time
this.showTime = false
this.stm = time;
this.showTime = false;
},
handleEndTime(e) {
let time = moment(e.value).format("YYYY-MM-DD HH:mm")
let time = moment(e.value).format("YYYY-MM-DD HH:mm:ss");
this.etm = time;
this.showTime1 = false
this.showTime1 = false;
},
handleRanger(e) {
console.log(e);
this.tm = [...e]
this.tm = [...e];
},
bindPickerChange(e) {
this.profileCode = this.array[e.target.value].profileCode
},
//
async getMonthData() {
try {
const {
data
} = await uni.$http.post(
`/gunshiApp/tsg/attDamProfile/list`, )
if (data.code == 200) {
this.array = data.data
this.profileCode = data.data[0].profileCode;
}
} catch (e) {
uni.$showMsg();
}
},
//
async getTableData() {
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) {
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);
typeOnChange(e) {
this.name = this.watchArr[e.target.value].name;
},
},
mounted() {
this.getMonthData()
this.getDmTree()
},
}
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: 30px;
column-gap: 10px;
align-items: center;
padding: 5px 0;
border: 1px solid #f2f2f2;
@ -404,7 +359,7 @@
height: 380px;
background-color: #fff;
left: 450px;
top: 10px
top: 10px;
}
}

View File

@ -1,24 +1,19 @@
<template>
<div class="table_div">
<div class="table_div" :style="{display:'block',width:name == '结构缝开度'? 500:730 ,overflowX:'scroll'}">
<div class="table_cur">
<table style="display:block;width:700px;overflow-x:auto">
<table >
<tr>
<th v-for="(cols,i) in columns" :key="i" :style="getStyle(cols)">
{{ cols.title }}
</th>
</tr>
<!-- style="max-height: 480px; overflow-y: auto" -->
<!-- <view>{{JSON.stringify(data)}}</view> -->
<div class="scroll-table" >
<tr v-for="(item, index) in data" :key="index">
<td style="width:100px;text-align:center">{{ index + 1 }}</td>
<td style="width:200px;text-align:center">{{ item.tm }}</td>
<td style="width:100px;text-align:center">{{ item.rz }}</td>
<td v-for="(col,i) in newCol" :key="i" style="width:100px;text-align:center;">
<td v-for="(col,i) in columns" :key="i" style="width:100px;text-align:center;">
{{item[col.key] }}
</td>
<td style="width:100px;">
{{item.status == 1 ? "正常" : rec == 0 ? "异常" : ''}}
</td>
</tr>
</div>
<div style="height:180px"></div>
@ -41,9 +36,9 @@
type:Array,
default:[],
},
cols2:{
type:Array,
default:[],
name:{
type:String,
default:'',
},
newCol:{
type:Array,
@ -60,7 +55,7 @@
methods:{
getStyle(row){
return {
width:row.title == "时间" ? "200px": "100px"
width:"100px"
}
}
}
@ -86,7 +81,7 @@
.scroll-table{
height: calc(100vh - 180px);
overflow-y: auto;
overflow-x: auto;
// overflow-x: auto;
width:'100%'
}
.table_cur tr {

View File

@ -1,320 +1,196 @@
import { imageUrl060,imageUrl090,rule } from './dataUrl'
export default function jrxOptions(data = {}, type = "1") {
const yMin = type == "1" ? 70 : type == "2" ? 70 : 70;
const yMax = type == "1" ? 154 : type == "2" ? 150 : 150;
const type1 = ["SY05", "SY06", "SY07", "SY08"]
const type2 = ["SY09","SY10","SY11","SY12"]
const alltype = type == "1" ? type1 : type == "2" ? type2 : type2;
// 字体颜色
const textColor = '#666'
const imageUrl = type == "1" ? imageUrl060:
type == "2" ? imageUrl090 : imageUrl090;
const xValue = type == "1" ? (((data?.rz - 99) + 1.1 * 13) / 1.1):
type == "2" ? (((data?.rz - 99) + 1 * 14) / 1) : (((data?.rz - 99) + 1 * 14) / 1)
const rz = data?.rz ?
[[xValue, data?.rz], [0, data?.rz], ] :
[]
const rz1 = data?.rz ?
type == "1" ?
[[0, 99], [13, 99], [xValue, data?.rz]]:
type == "2" ?
[[0, 99], [14, 99], [xValue, data?.rz]]
: [[0, 99], [14, 99], [xValue, data?.rz]]
:
[]
const gz1 = data[alltype[0]] ?
type == "1" ? [[51.6, 85], [51.6, data[alltype[0]]]] :
type == "2" ? [[47.5, 85], [47.5, data[alltype[0]]]] :
[[47.5, 158], [85, data[alltype[0]]]]
: [];
const gz2 = data[alltype[1]] ?
type == "1" ? [[53.6, 85], [53.6, data[alltype[1]]]] :
type == "2" ? [[49.5, 85], [49.5, data[alltype[1]]]] :
[[53.6, 158], [53.6, data[alltype[1]]]] :
[];
export default function jrxOptions(data ) {
// 缝开度
const kdMin = Math.floor(Math.min(...data.map(item => item.value)));
const kdMax = Math.ceil(Math.max(...data.map(item => item.value)));
const gz3 = data[alltype[2]] ?
type == "1" ? [[72.5, 90], [72.5, data[alltype[2]]]] :
type == "2" ? [[66.5, 90], [66.5, data[alltype[2]]]] :
[[73, 161], [73, data[alltype[2]]]] : [];
// 温度
const tempMin = Math.floor(Math.min(...data.map(item => item.temp)));
const tempMax = Math.ceil(Math.max(...data.map(item => item.temp)));
const gz4 = data[alltype[3]] ?
type == "1" ? [[84.5, 96], [84.5, data[alltype[3]]]] :
type == "2" ? [[77, 96], [77, data[alltype[3]]]] :
[[85, 166], [85, data[alltype[3]]]] : [];
const line = data?.rz ?
type == "1" ?
[
[xValue, data?.rz],
[51.6, data[alltype[0]]],
[53.6, data[alltype[1]]],
[72.5, data[alltype[2]]],
[84.5, data[alltype[3]]]
] :
type == "2" ?
[
[xValue, data?.rz],
[47.5, data[alltype[0]]],
[49.5, data[alltype[1]]],
[66.5, data[alltype[2]]],
[77, data[alltype[3]]]
] :
[
[xValue, data?.rz],
[51.6, data[alltype[0]]],
[53.6, data[alltype[1]]],
[73, data[alltype[2]]],
[85, data[alltype[3]]]
]
: []
// 模数
const modulusMin = Math.floor(Math.min(...data.map(item => item.modulus)));
const modulusMax = Math.ceil(Math.max(...data.map(item => item.modulus)));
let eopts = {
toolbox: {
show: true,
feature: {
saveAsImage: {
show: true,
excludeComponents: ['toolbox'],
pixelRatio: 2,
name:"测值图"
tooltip: {
trigger: 'axis',
},
legend: {
top:'0%',
data: ['缝开度', '温度', '模数']
},
right: "10%",
top:"4%"
grid: {
left: 35,
right:120
},
graphic: [
xAxis: [
{
type: 'image',
left: '5%',
top: 0,
bottom:0,
z: 1,
bounding: 'raw',
style: {
image: imageUrl,
width: 1310,
height: 380
type: 'category',
data: data.map(o => o.tm),
inverse: false,
splitLine: {
show: false
},
axisLabel: {
padding: [0, 0, 100, 0],
color: '#333',
fontSize: 12,
format:'ykzXAxisFormat'
},
axisLine: {
lineStyle: {
color: '#8c8c8c',
width: 1,
}
},
{
type: 'image',
// id: 'background',
left: '5%',
bottom:"5%",
z: 1,
bounding: 'all',
style: {
image: rule,
width: 10,
height: 450
}
axisTick: {
show: false,
},
}
],
grid: {
top: '0%',
left: '2%',
right: '5%',
bottom: '0%',
containLabel: true
},
xAxis: {
min: 0,
max:100,
axisLabel: {
show:false,
// 坐标轴字体颜色
color: textColor,
fontSize: 18
},
axisLine: {
show:false,
lineStyle: {
color: textColor
}
},
axisTick: {
// y轴刻度线
show: false
},
splitLine: {
// 网格
show: false
},
boundaryGap: false
},
yAxis: {
yAxis: [
{
type: 'value',
min: yMin,
max: yMax,
interval:5,
// data:[155,160,180,190,210],
position: 'left',
name: "缝开度(mm)",
nameTextStyle: {
color: '#333',
fontSize: 18,
padding: [0, 0, 0, 80]
},
axisLabel: {
// 坐标轴字体颜色
color: textColor,
fontSize: 18,
showMinLabel: false,
showMaxLabel: false
},
axisLine: {
show: false
},
axisTick: {
// y轴刻度线
show: false
padding: [-10, 0, 10, 10],
color: '#333333',
fontSize: 14
},
splitLine: {
// 网格
show: false,
show: true,
lineStyle: {
color: '#CCCCCC',
type: 'dashed'
}
color: '#bfbfbf',
width: 0.5,
type: 'dotted'
}
},
axisLabel: {
color: '#333',
fontSize: 12,
},
axisLine: {
// show: false
lineStyle: {
color: '#8c8c8c',
width: 1,
}
},
axisTick: {
show: false,
},
min: kdMin,
max: kdMax,
},
{
type: 'value',
position: 'right',
offset: 80,
name: "温度(°℃)",
nameTextStyle: {
padding: [0, 0, 10, 10],
color: '#333333',
fontSize: 14
},
splitLine: {
show: false,
lineStyle: {
color: '#07a6ff',
width: 0.25,
type: 'dotted'
}
},
axisLabel: {
color: '#333',
fontSize: 12,
},
axisLine: {
// show: false
lineStyle: {
color: '#8c8c8c',
width: 1,
}
},
axisTick: {
show: false,
},
min: tempMin,
max: tempMax,
},
{
type: 'value',
position: 'right',
name: "模数(F)",
nameTextStyle: {
padding: [0, 0, 10, 10],
color: '#333333',
fontSize: 14
},
splitLine: {
show: false,
lineStyle: {
color: '#07a6ff',
width: 0.25,
type: 'dotted'
}
},
axisLabel: {
color: '#333',
fontSize: 12,
},
axisLine: {
// show: false
lineStyle: {
color: '#8c8c8c',
width: 1,
}
},
axisTick: {
show: false,
},
min: modulusMin,
max: modulusMax,
}
],
}
let chartData = {
series: [
// 和大坝坡面重合的线 斜率为0.75
{
yAxisIndex: 0,
name: '缝开度',
type: 'line',
symbol: 'none',
symbolSize: 10,
z: 1,
itemStyle: {
color: '#fff'
},
lineStyle: {
color: '#fff'
},
areaStyle: {
origin: "end",
color: 'rgba(0, 128, 255, 0.3)' // 设置区域填充颜色
},
data:[...rz,...rz1]
color: "#d6eaec",
data: data.map(o => o.value),
symbol: 'none', // 设置标记点为'none',即去掉圆点
smooth: 0.5
},
{
// xAxisIndex: 1,
yAxisIndex: 1,
name: '温度',
type: 'line',
symbol: 'none',
symbolSize: 10,
z: 1,
itemStyle: {
color: '#5487FF'
},
color: "#60a0f8",
lineStyle: {
color: '#5487FF'
// type: "dashed"
},
markPoint: {
data: [{ type: 'max',x:"20%", coord: [xValue, data?.rz] }],
symbol: 'pin',
symbolSize: [30, 10],
itemStyle: {
color: '#fff', // 标注点颜色
borderColor: '#ffa500', // 标注点边框颜色
borderWidth: 0 // 标注点边框宽度
},
label: {
show: true, // 是否显示标签
formatter: "库水位" +data?.rz + "m", // 标签格式
color: '#5487FF', // 标签文字颜色
fontSize: 12, // 标签文字大小
}
},
data:rz
data: data.map(o => o.temp),
symbol: 'none', // 设置标记点为'none',即去掉圆点
smooth: 0.5
},
{
yAxisIndex: 2,
name: '模数',
type: 'line',
symbol: 'none',
symbolSize: 10,
z: 1,
itemStyle: {
color: '#5487FF'
},
// color: "#60a0f8",
lineStyle: {
color: '#5487FF'
// type: "dashed"
},
data:rz1
},
// 管位
{
type: 'line',
symbol: 'none',
symbolSize: 10,
z: 1,
itemStyle: {
color: '#5487FF'
},
lineStyle: {
color: '#5487FF',
width:6
},
data: gz1
},
{
type: 'line',
symbol: 'none',
symbolSize: 10,
z: 1,
itemStyle: {
color: '#5487FF'
},
lineStyle: {
color: '#5487FF',
width:6
},
data: gz2
},
{
type: 'line',
symbol: 'none',
symbolSize: 10,
z: 1,
itemStyle: {
color: '#5487FF'
},
lineStyle: {
color: '#5487FF',
width:6
},
data: gz3
},
{
type: 'line',
symbol: 'none',
symbolSize: 10,
z: 1,
itemStyle: {
color: '#5487FF'
},
lineStyle: {
color: '#5487FF',
width:6
},
data: gz4
},
// 管位连接线
{
type: 'line',
symbol: 'none',
symbolSize: 10,
z: 1,
itemStyle: {
color: '#5487FF'
},
lineStyle: {
color: '#5487FF',
},
data: line
data: data.map(o => o.modulus),
symbol: 'none', // 设置标记点为'none',即去掉圆点
smooth: 0.5
},
]
}

300
pages/aqjc/syOptions.js Normal file
View File

@ -0,0 +1,300 @@
export default function syOptions(data) {
// 水位
const rzMin = Math.floor(Math.min(...data.map(item => item.value)));
const rzMax = Math.ceil(Math.max(...data.map(item => item.value)));
// 水压
const pressMin = Math.floor(Math.min(...data.map(item => item.press)));
const pressMax = Math.ceil(Math.max(...data.map(item => item.press)));
// 高程
const waterEleMin = Math.floor(Math.min(...data.map(item => item.waterEle)));
const waterEleMax = Math.ceil(Math.max(...data.map(item => item.waterEle)));
// 温度
const tempMin = Math.floor(Math.min(...data.map(item => item.temp)));
const tempMax = Math.ceil(Math.max(...data.map(item => item.temp)));
// 模数
const modulusMin = Math.floor(Math.min(...data.map(item => item.modulus)));
const modulusMax = Math.ceil(Math.max(...data.map(item => item.modulus)));
let chartData = {
series: [
{
yAxisIndex: 0,
name: '水位',
type: 'line',
color: "#d6eaec",
data: data.map(o => o.value),
symbol: 'none', // 设置标记点为'none',即去掉圆点
smooth: 0.5
},
{
yAxisIndex: 1,
name: '水压',
type: 'line',
color: "#60a0f8",
lineStyle: {
// type: "dashed"
},
data: data.map(o => o.press),
symbol: 'none', // 设置标记点为'none',即去掉圆点
smooth: 0.5
},
{
yAxisIndex: 2,
name: '水位高程',
type: 'line',
// color: "#60a0f8",
lineStyle: {
// type: "dashed"
},
data: data.map(o => o.waterEle),
symbol: 'none', // 设置标记点为'none',即去掉圆点
smooth: 0.5
},
{
yAxisIndex: 3,
name: '温度',
type: 'line',
// color: "#60a0f8",
lineStyle: {
// type: "dashed"
},
data: data.map(o => o.temp),
symbol: 'none', // 设置标记点为'none',即去掉圆点
smooth: 0.5
},
{
yAxisIndex: 4,
name: '模数',
type: 'line',
// color: "#60a0f8",
lineStyle: {
// type: "dashed"
},
data: data.map(o => o.modulus),
symbol: 'none', // 设置标记点为'none',即去掉圆点
smooth: 0.5
},
]
}
let eopts = {
tooltip: {
trigger: 'axis',
},
legend: {
top: '0%',
left:-10,
data: ['水位','水压','水位高程','温度', '模数']
},
grid: {
left: 35,
right: 120
},
xAxis: [
{
type: 'category',
data: data.map(o => o.tm),
inverse: false,
splitLine: {
show: false
},
axisLabel: {
padding: [0, 0, 100, 0],
color: '#333',
fontSize: 12,
format:'ykzXAxisFormat'
},
axisLine: {
lineStyle: {
color: '#8c8c8c',
width: 1,
}
},
axisTick: {
show: false,
},
}
],
yAxis: [
{
type: 'value',
position: 'left',
name: "水位(mm)",
nameTextStyle: {
padding: [0, 0, 10, 10],
color: '#333333',
fontSize: 14
},
splitLine: {
show: true,
lineStyle: {
color: '#bfbfbf',
width: 0.5,
type: 'dotted'
}
},
axisLabel: {
color: '#333',
fontSize: 12,
},
axisLine: {
// show: false
lineStyle: {
color: '#8c8c8c',
width: 1,
}
},
axisTick: {
show: false,
},
min: rzMin,
max: rzMax,
},
{
type: 'value',
position: 'right',
name: "水压(KPa)",
offset: -40,
nameTextStyle: {
padding: [0, 0, 10, 10],
color: '#333333',
fontSize: 14
},
splitLine: {
show: false,
lineStyle: {
color: '#07a6ff',
width: 0.25,
type: 'dotted'
}
},
axisLabel: {
color: '#333',
fontSize: 12,
},
axisLine: {
// show: false
lineStyle: {
color: '#8c8c8c',
width: 1,
}
},
axisTick: {
show: false,
},
min: pressMin,
max: pressMax,
},
{
type: 'value',
position: 'right',
name: "水位高程(m)",
offset: -115,
nameTextStyle: {
padding: [0, 0, 10, 10],
color: '#333333',
fontSize: 14
},
splitLine: {
show: false,
lineStyle: {
color: '#07a6ff',
width: 0.25,
type: 'dotted'
}
},
axisLabel: {
color: '#333',
fontSize: 12,
},
axisLine: {
// show: false
lineStyle: {
color: '#8c8c8c',
width: 1,
}
},
axisTick: {
show: false,
},
min: waterEleMin,
max: waterEleMax,
},
{
type: 'value',
position: 'right',
name: "温度(℃)",
offset: 25,
nameTextStyle: {
padding: [0, 0, 10, 10],
color: '#333333',
fontSize: 14
},
splitLine: {
show: false,
lineStyle: {
color: '#07a6ff',
width: 0.25,
type: 'dotted'
}
},
axisLabel: {
color: '#333',
fontSize: 12,
},
axisLine: {
// show: false
lineStyle: {
color: '#8c8c8c',
width: 1,
}
},
axisTick: {
show: false,
},
min: tempMin,
max: tempMax,
},
{
type: 'value',
position: 'right',
name: "模数(F)",
offset: 80,
nameTextStyle: {
padding: [0, 0, 10, 10],
color: '#333333',
fontSize: 14
},
splitLine: {
show: false,
lineStyle: {
color: '#07a6ff',
width: 0.25,
type: 'dotted'
}
},
axisLabel: {
color: '#333',
fontSize: 12,
},
axisLine: {
// show: false
lineStyle: {
color: '#8c8c8c',
width: 1,
}
},
axisTick: {
show: false,
},
min: modulusMin,
max: modulusMax,
}
]
}
return {
eopts,
chartData
}
}

View File

@ -107,7 +107,7 @@ export default {
};
},
onPullDownRefresh() {
this.getYjData();
this.getAllList();
uni.$showMsg("刷新成功");
setTimeout(function () {
uni.stopPullDownRefresh();
@ -119,7 +119,7 @@ export default {
{
value: "工程概况",
key: 1,
icon: "../../static/tabs/zhjs.png",
icon: "../../static/tabs/wxyh.png",
url: "/pages/gcgk/index",
},
{
@ -149,7 +149,7 @@ export default {
{
value: "水雨情",
key: 6,
icon: "../../static/tabs/spjk.png",
icon: "../../static/tabs/xingzhuang2.png",
url: "/pages/syq/index",
},
];
@ -206,25 +206,41 @@ export default {
});
this.setInsert(menu2);
},
//
async getYjData() {
const params = {
//
getZqList() {
return uni.$http.post("/gunshiApp/ykz/warnRecord/page", {
pageSo: {
pageSize: 999,
pageNumber: 1,
},
dateTimeRangeSo: {
start: warnStm,
end: warnetm,
};
try {
const res = await uni.$http.post(
"/gunshiApp/tsg/stQxWarnR/home/warn",
params
);
const { flowWarn, pressWarn, qxWarn, shiftWarn } = res.data.data;
const arr = [...flowWarn, ...pressWarn, ...qxWarn, ...shiftWarn];
if (arr.length > 0) {
},
});
},
//
getAqList() {
return uni.$http.post("/gunshiApp/ykz/osmoticWarnRecord/page", {
pageSo: {
pageSize: 999,
pageNumber: 1,
},
dateTimeRangeSo: {
start: warnStm,
end: warnetm,
},
});
},
getAllList() {
Promise.all([this.getZqList(), this.getAqList()]).then((res) => {
const result = res.map((item) => item.data?.data?.records).flat();
if (result.length > 0) {
this.warnStatus = true;
}
} catch (error) {
uni.$showMsg();
}
});
},
},
@ -240,7 +256,7 @@ export default {
}, 10000);
this.setInsert();
this.getYjData();
this.getAllList();
this.getSwList();
},
onHide() {

View File

@ -1,12 +1,13 @@
<template>
<view class="container">
<div class="img">
<image style="width: 100%; height: 100%" src="../../static/images/bg_img.png" mode="scaleToFill"></image>
</div>
<view class="user-title">
<text class="sub">用户登录</text>
<text class="line"></text>
<text class="sub" >荆州新建盐卡闸信息化系统</text>
<!-- <text class="line"></text> -->
</view>
<div class="img">
<image style="width: 100%; height: 100%" src="../../static/images/loinBg.png" mode="scaleToFill"></image>
</div>
<uni-forms :modelValue="formData" class="form">
<uni-forms-item>
<uni-easyinput type="text" v-model="formData.username" placeholder="请输入用户名" />
@ -193,8 +194,9 @@
.img {
width: 100vw;
height: 40vh;
margin-top: 0vh;
// height: 40vh;
height: 30vh;
margin-top: 2vh;
/* background-color: red; */
}
@ -214,8 +216,9 @@
flex-direction: column;
.sub {
font-size: 28px;
color: #000;
font-size: 22px;
color: #102e9e;
margin-top: 3vh;
}
.line {

View File

@ -2,7 +2,7 @@
<view :style="{ height: '100vh', overflow: 'hidden' }">
<u-status-bar></u-status-bar>
<u-navbar
title="预警"
title="预(报)警"
:autoBack="true"
:titleStyle="{
fontSize: '18px',
@ -24,7 +24,7 @@
padding: 0 10px;
"
>
警时间{{ model.start }} {{ model.end }}
()警时间{{ model.start }} {{ model.end }}
</view>
<view class="itemYj">
<view class="itemYjCont" v-for="(value, key) of list" :key="key">
@ -147,6 +147,9 @@ export default {
pageSize: 999,
pageNumber: 1,
},
dateTimeRangeSo:{
...this.model
}
})
},
@ -158,6 +161,9 @@ export default {
pageSize: 999,
pageNumber: 1,
},
dateTimeRangeSo:{
...this.model
}
})
},

BIN
static/images/loinBg.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 72 KiB

View File

@ -56,6 +56,9 @@ const cfe = {
},
"xAxisFormat": function (value) {
return value.substr('2020--'.length, 11)
},
"ykzXAxisFormat": function (value) {
return value.slice(0, 10)
},
"projectFormat":function (value) {
return value + 'mm';