<template>
|
<view class="container">
|
|
<!--上报信息-->
|
<card class="card">
|
<view slot="insideHead">
|
<boxTitle title="上报信息"></boxTitle>
|
</view>
|
<view class="content" slot="content">
|
<u-form :model="form" :rules="rules" ref="form">
|
<u-form-item :labelWidth="labelWidth" label="水库名称:" @click="disabled?skShow=false:skShow = true">
|
<u--input border="bottom" v-model="resName" disabled disabledColor="#ffffff"
|
placeholder="请选择水库">
|
</u--input>
|
<u-icon slot="right" name="arrow-right"></u-icon>
|
</u-form-item>
|
|
<u-form-item :labelWidth="labelWidth" label="类型:" required prop="type" @click="typeShow = true">
|
<u--input border="bottom" v-model="typeName" disabled disabledColor="#ffffff"
|
placeholder="请选择类型">
|
</u--input>
|
<u-icon slot="right" name="arrow-right"></u-icon>
|
</u-form-item>
|
|
<u-form-item :labelWidth="labelWidth" label="测点:" required @click="stationShow = true"
|
prop="stationId">
|
<u--input border="bottom" v-model="stationName" disabled disabledColor="#ffffff"
|
placeholder="请选择测点">
|
</u--input>
|
<u-icon slot="right" name="arrow-right"></u-icon>
|
</u-form-item>
|
|
<u-form-item :labelWidth="labelWidth" label="记录时间:" @click="timeVisible = true" required
|
prop="recordTime">
|
<u--input border="bottom" v-model="form.recordTime" disabled disabledColor="#ffffff"
|
placeholder="请选择记录时间">
|
</u--input>
|
</u-form-item>
|
|
<u-form-item v-if="form.type !='wy' " :labelWidth="labelWidth" label="监测值:" required prop="val">
|
<u--input border="bottom" v-model="form.val" placeholder="填写监测值">
|
<u--text :text="unit" slot="suffix" margin="0 3px 0 0"></u--text>
|
</u--input>
|
</u-form-item>
|
|
|
<u-form-item v-else :labelWidth="labelWidth" label="监测值:" required>
|
<view>
|
<u-form-item :labelWidth="85" label="水平位移X:" prop="x">
|
<u--input border="bottom" v-model="form.x" placeholder="请输入监测值">
|
<u--text :text="unit" slot="suffix" margin="0 3px 0 0"></u--text>
|
</u--input>
|
</u-form-item>
|
<u-form-item :labelWidth="85" label="水平位移Y:" prop="y">
|
<u--input border="bottom" v-model="form.y" placeholder="请输入监测值">
|
<u--text :text="unit" slot="suffix" margin="0 3px 0 0"></u--text>
|
</u--input>
|
</u-form-item>
|
<u-form-item :labelWidth="85" label="垂直位移:" prop="z">
|
<u--input border="bottom" v-model="form.z" placeholder="请输入监测值">
|
<u--text :text="unit" slot="suffix" margin="0 3px 0 0"></u--text>
|
</u--input>
|
</u-form-item>
|
</view>
|
</u-form-item>
|
|
|
|
<u-form-item :labelWidth="labelWidth" label="描述:" prop="description">
|
<u-textarea confirmType="done" v-model="form.description" placeholder="请填写描述">
|
</u-textarea>
|
</u-form-item>
|
|
|
</u-form>
|
</view>
|
</card>
|
|
<view class="page-footer">
|
<u-button type="primary" text="提交" @click="submit"></u-button>
|
</view>
|
|
<!-- 水库下拉框 -->
|
<my-select v-if="skShow" :show="skShow" v-model="form.reservoirId" type="radio" popupTitle="请选择水库"
|
:dataLists="skSelectList" @cancel="skShow = false" @submit="skSelect">
|
</my-select>
|
|
<!-- 类型下拉框 -->
|
<my-select v-if="typeShow" :show="typeShow" v-model="form.type" type="radio" popupTitle="请选择测站类型"
|
:dataLists="typeSelectList" @cancel="typeShow = false" @submit="typeSelect">
|
</my-select>
|
|
<!-- 测点下拉框 -->
|
<my-select v-if="stationShow" :show="stationShow" v-model="form.stationId" type="radio" popupTitle="请选择测点"
|
:dataLists="stationSelectList" @cancel="stationShow = false" @submit="stationSelect">
|
</my-select>
|
|
<!--时间选择-->
|
<u-datetime-picker :formatter="formatter" :show="timeVisible" mode="datetime" v-model="recordTime"
|
@confirm="timeConfirm" @cancel="timeVisible = false">
|
</u-datetime-picker>
|
|
</view>
|
</template>
|
|
<script>
|
import mySelect from "@/components/my-components/my-select.vue"
|
import card from "@/components/my-components/card.vue"
|
import boxTitle from "@/subPackage/jcsb/components/boxTitle.vue"
|
import {
|
convertTimestampToDate
|
} from "@/utils/date"
|
import {
|
addDb,
|
} from "@/api/jcsb/dangerReport/dangerReport.js"
|
import {
|
reservoirList
|
} from "@/api/dataCenter/reservoir/reservoir.js"
|
import {
|
getStationList
|
} from "@/api/dataCenter/dbSafety/dbSafety"
|
|
function isNumber(val) {
|
let reg = /^\d+(\.\d+)?$/
|
if (reg.test(val)) {
|
return true
|
} else {
|
return false
|
}
|
}
|
|
export default {
|
components: {
|
mySelect,
|
card,
|
boxTitle
|
},
|
data() {
|
return {
|
labelWidth: 70,
|
|
resName: '',
|
typeName: "",
|
stationName: "",
|
recordTime: "",
|
|
skShow: false,
|
typeShow: false,
|
timeVisible: false,
|
stationShow: false,
|
skSelectList: [],
|
typeSelectList: [{
|
value: "sy",
|
name: "渗压站",
|
},
|
{
|
value: "sl",
|
name: "渗流站",
|
},
|
{
|
value: "wy",
|
name: "变形站",
|
},
|
],
|
stationSelectList: [],
|
|
form: {
|
reservoirId: "",
|
type: "",
|
stationId: "",
|
val: "",
|
recordTime: "",
|
description: "",
|
x: "",
|
y: "",
|
z: "",
|
},
|
handleForm: {
|
toImages: [],
|
toDesinfo: "",
|
status: 1
|
},
|
rules: {
|
'type': {
|
required: true,
|
message: '请选择测站类型',
|
trigger: ['blur', 'change']
|
},
|
|
'stationId': {
|
required: true,
|
message: '请选择测点',
|
trigger: ['blur', 'change']
|
},
|
'recordTime': {
|
required: true,
|
message: '请选择上报时间',
|
trigger: ['blur', 'change']
|
},
|
'val': {
|
required: true,
|
message: '请输入监测值',
|
trigger: ['blur', 'change'],
|
// type: 'float',
|
validator: (rule, value, callback) => {
|
// 上面有说，返回true表示校验通过，返回false表示不通过
|
return isNumber(value)
|
},
|
},
|
'x': {
|
required: true,
|
message: '请输入水平位移X监测值',
|
trigger: ['blur', 'change'],
|
// type: 'float',
|
validator: (rule, value, callback) => {
|
// 上面有说，返回true表示校验通过，返回false表示不通过
|
return isNumber(value)
|
},
|
},
|
'y': {
|
required: true,
|
message: '请输入水平位移Y监测值',
|
trigger: ['blur', 'change'],
|
// type: 'float',
|
validator: (rule, value, callback) => {
|
// 上面有说，返回true表示校验通过，返回false表示不通过
|
return isNumber(value)
|
},
|
},
|
'z': {
|
required: true,
|
message: '请输入垂直位移监测值',
|
trigger: ['blur', 'change'],
|
// type: 'float',
|
validator: (rule, value, callback) => {
|
// 上面有说，返回true表示校验通过，返回false表示不通过
|
return isNumber(value)
|
},
|
}
|
|
},
|
disabled: false,
|
unit: "",
|
}
|
},
|
watch: {},
|
onLoad(option) {
|
this.init()
|
this.getReservoirList()
|
},
|
mounted() {
|
|
},
|
methods: {
|
clearValidate() {
|
this.$refs.form.clearValidate()
|
},
|
|
async submit() {
|
const that = this
|
const res = await this.$refs.form.validate()
|
|
if (res) {
|
|
this.form.reservoirName = this.resName
|
|
if (this.form.type == "wy") {
|
let arr = [this.form.x, this.form.y, this.form.z]
|
this.form.val = arr.join(",")
|
}
|
|
addDb(this.form).then(res => {
|
uni.showToast({
|
icon: 'success',
|
title: '提交成功',
|
success() {
|
setTimeout(() => {
|
that.$u.func.globalNavigator(
|
"/pages/home/patrolIndex", "switchTab")
|
}, 1000)
|
}
|
})
|
})
|
}
|
},
|
|
//获取测站数据
|
getStation() {
|
|
if (this.form.reservoirId == "" || this.form.type == "") {
|
return
|
}
|
|
let params = {
|
res_cd: this.form.reservoirId,
|
cd_type: this.form.type
|
}
|
|
this.form.stationId = ""
|
this.stationName = ""
|
|
getStationList(params).then(res => {
|
let data = res.data
|
this.stationSelectList = []
|
|
data.forEach(e => {
|
this.stationSelectList.push({
|
value: e.cd,
|
name: e.cd_nm
|
})
|
})
|
|
})
|
},
|
|
timeConfirm(data) {
|
let timeStamp = data.value
|
let time = convertTimestampToDate(timeStamp, "yyyy-MM-dd hh:mm:ss")
|
this.form.recordTime = time
|
this.timeVisible = false
|
},
|
//时间显示格式化
|
formatter(type, value) {
|
if (type === 'year') {
|
return `${value}年`
|
}
|
if (type === 'month') {
|
return `${value}月`
|
}
|
if (type === 'day') {
|
return `${value}日`
|
}
|
if (type === 'hour') {
|
return `${value}时`
|
}
|
if (type === 'minute') {
|
return `${value}分`
|
}
|
return value
|
},
|
|
init() {
|
this.initTime()
|
let arr = this.userInfo.detail.resIds.split(",")
|
var filterArr = arr.filter(function(item, index) {
|
return arr.indexOf(item) === index; // 因为indexOf 只能查找到第一个
|
});
|
this.resIds = filterArr.join(",")
|
},
|
|
//初始化时间
|
initTime() {
|
this.recordTime = convertTimestampToDate(new Date)
|
},
|
|
// 水库下拉框数据
|
async getReservoirList() {
|
if (this.resIds == "") {
|
return
|
}
|
let params = {
|
res_cds: this.resIds.split(",").map(e => `'${e}'`).join(",")
|
}
|
reservoirList(100, 1, params).then(res => {
|
let data = res.data.data
|
for (let i = 0; i < data.length; i++) {
|
if (i == 0) {
|
this.resName = data[i].res_nm
|
this.form.reservoirId = data[i].res_cd
|
}
|
let skRes = {
|
value: data[i].res_cd,
|
name: data[i].res_nm
|
}
|
this.skSelectList.push(skRes)
|
}
|
})
|
},
|
|
//水库选择
|
skSelect(data) {
|
this.form.reservoirId = data.value
|
this.resName = data.name
|
this.skShow = false
|
this.getStation()
|
},
|
|
typeSelect(data) {
|
this.form.type = data.value
|
this.typeName = data.name
|
this.typeShow = false
|
|
if (data.value == "sy") {
|
this.unit = '(m)'
|
} else if (data.value == "sl") {
|
this.unit = '(L/s)'
|
} else if (data.value == "wy") {
|
this.unit = '(mm)'
|
}
|
|
this.clearValidate()
|
this.getStation()
|
},
|
|
stationSelect(data) {
|
this.form.stationId = data.value
|
this.stationName = data.name
|
this.stationShow = false
|
},
|
|
/** 数组去重
|
* 思路：利用数组的 indexOf 下标属性来查询
|
* @param arr 需要去重的数组
|
* @param t 根据 t 字段(指定)进行去重
|
* @returns {*[]} 已去重后的数据
|
*/
|
deduplicate(arr, t = "") {
|
const newArr = [],
|
assignList = []
|
// 有指定字段
|
if (t) {
|
for (let i = 0; i < arr.length; i++) {
|
if (assignList.indexOf(arr[i][t]) === -1) {
|
assignList.push(arr[i][t])
|
newArr.push(arr[i])
|
}
|
}
|
}
|
// 无指定字段
|
else {
|
for (let i = 0; i < arr.length; i++) {
|
if (newArr.indexOf(arr[i]) === -1) newArr.push(arr[i])
|
}
|
}
|
return newArr
|
}
|
}
|
}
|
</script>
|
|
<style scoped lang="scss">
|
.container {
|
overflow: hidden;
|
// padding: 0 14rpx;
|
|
.page-footer {
|
position: fixed;
|
bottom: 0;
|
width: 100%;
|
}
|
}
|
|
.card {
|
.content {
|
padding: 0 30rpx;
|
border: 5rpx solid #edf6ff;
|
|
.item {
|
display: flex;
|
align-items: center;
|
|
.label {
|
width: 150rpx;
|
}
|
|
}
|
|
}
|
|
.image {
|
width: 100rpx;
|
height: 100rpx;
|
}
|
}
|
</style>
|
