<template>
|
<view class="container">
|
|
<!--上报信息-->
|
<card class="card">
|
<view slot="insideHead">
|
<boxTitle title="上报信息"></boxTitle>
|
</view>
|
<view class="content" slot="content">
|
<u-form labelWidth="70" :model="form" :rules="rules" ref="form">
|
<u-form-item labelWidth="100" label="水库名称:" @click="isDetail?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 v-if="is_gate.indexOf('有闸')>-1" labelWidth="80" required label="闸门状态:"
|
prop="gateStatus">
|
<view class="btn-group">
|
<view class="value-item"
|
:class="{'border-left-none':index==1||index==2,'active':item.value==form.gateStatus,'disabled':isDetail}"
|
v-for="(item,index) in gateStatusOption" :key="item.value"
|
@click="changeGateStatus(item)">
|
{{item.text}}
|
</view>
|
</view>
|
</u-form-item>
|
|
|
<u-form-item labelWidth="100" label="情况说明:">
|
<u-textarea :disabled="isDetail" confirmType="done" v-model="form.content"
|
placeholder="请填写情况说明">
|
</u-textarea>
|
</u-form-item>
|
|
<u-form-item labelWidth="100" label="现场图片:">
|
<u-upload :disabled="isDetail" :fileList="form.images"
|
:previewFullImage="uploadConfig.previewFullImage" :accept="uploadConfig.acceptImg"
|
:multiple="uploadConfig.multiple" :maxCount="uploadConfig.maxCount"
|
:capture="uploadConfig.capture" @afterRead="afterReadImg" @delete="deletePic">
|
</u-upload>
|
</u-form-item>
|
|
|
</u-form>
|
</view>
|
</card>
|
|
<view class="page-footer">
|
<u-button v-if="!isDetail" 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>
|
|
</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 {
|
add,
|
} from "@/api/modules/modules.js"
|
import {
|
reservoirList
|
} from "@/api/dataCenter/reservoir/reservoir.js"
|
import {
|
devUrl,
|
clientId,
|
clientSecret
|
} from '@/common/setting'
|
import {
|
Base64
|
} from '@/utils/base64.js';
|
import {
|
fileUrlConvert
|
} from "@/subPackage/patrol/util/fileUtil.js"
|
export default {
|
components: {
|
mySelect,
|
card,
|
boxTitle
|
},
|
data() {
|
return {
|
resName: '',
|
skShow: false,
|
typeShow: false,
|
selectShow: {
|
type: false,
|
},
|
selectList: [],
|
skSelectList: [],
|
typeList: [],
|
timeVisible: false,
|
form: {
|
images: [],
|
reservoirId: "",
|
content: "",
|
gateStatus: "2"
|
},
|
is_gate: "",
|
gateStatusOption: [{
|
text: "开启",
|
value: "1"
|
},
|
{
|
text: "关闭",
|
value: "2"
|
},
|
],
|
rules: {
|
'gateStatus': {
|
required: true,
|
message: '请选择闸门状态',
|
trigger: ['blur', 'change']
|
}
|
},
|
uploadConfig: {
|
acceptImg: "image",
|
acceptVideo: 'video',
|
capture: ['album', 'camera'],
|
multiple: true,
|
maxCount: "5",
|
previewFullImage: true,
|
uploadText: "上传中",
|
url: devUrl + "/api/blade-resource/oss/endpoint/put-file-attach",
|
header: {},
|
},
|
isDetail: false
|
}
|
},
|
onLoad(option) {
|
|
if (option.detail) {
|
this.form = JSON.parse(option.detail)
|
this.resName = this.form.reservoirName
|
|
if (this.form.gateStatus) {
|
this.is_gate = "有闸控制"
|
}
|
|
this.isDetail = true
|
} else {
|
this.isDetail = false
|
this.getHeader()
|
|
this.init()
|
this.getReservoirList()
|
}
|
|
},
|
mounted() {
|
|
},
|
methods: {
|
//改变闸门关闭状态
|
changeGateStatus(item) {
|
if (this.isDetail) return
|
if (this.form.gateStatus == item.value) return
|
this.form.gateStatus = item.value
|
},
|
|
init() {
|
let arr = this.userInfo.detail.resIds.split(",")
|
var filterArr = arr.filter(function(item, index) {
|
return arr.indexOf(item) === index; // 因为indexOf 只能查找到第一个
|
});
|
this.resIds = filterArr.join(",")
|
},
|
// 水库下拉框数据
|
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
|
console.log(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
|
this.is_gate = data[i].is_gate
|
}
|
let skRes = {
|
value: data[i].res_cd,
|
name: data[i].res_nm,
|
is_gate: data[i].is_gate
|
}
|
this.skSelectList.push(skRes)
|
}
|
})
|
},
|
//获取头部
|
getHeader() {
|
let accessToken = uni.getStorageSync('accessToken');
|
let myHeader = {}
|
if (accessToken) {
|
myHeader['Blade-Auth'] = 'bearer ' + accessToken;
|
}
|
// 客户端认证参数
|
myHeader['Authorization'] = 'Basic ' + Base64.encode(clientId + ':' + clientSecret);
|
this.header = myHeader
|
this.uploadConfig.header = myHeader
|
},
|
|
//上传方法
|
uploadFilePromise(url) {
|
return new Promise((resolve, reject) => {
|
let a = uni.uploadFile({
|
url: this.uploadConfig.url, //接口地址
|
filePath: url,
|
name: 'file',
|
header: this.uploadConfig.header,
|
success: (res) => {
|
let data = JSON.parse(res.data)
|
setTimeout(() => {
|
resolve(data)
|
}, 1000)
|
}
|
});
|
})
|
},
|
showLoading() {
|
uni.showLoading({
|
mask: true,
|
title: '上传中'
|
})
|
},
|
loadingClose() {
|
uni.hideLoading()
|
},
|
|
//读取后的处理函数
|
async afterReadImg(event) {
|
this.showLoading()
|
// 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
|
let lists = [].concat(event.file)
|
let fileListLen = this.form.images.length
|
lists.map((item) => {
|
this.form.images.push({
|
...item,
|
status: 'uploading',
|
message: '上传中'
|
})
|
})
|
for (let i = 0; i < lists.length; i++) {
|
const result = await this.uploadFilePromise(lists[i].url)
|
this.form.images.splice(fileListLen, 1, Object.assign({}, {
|
url: fileUrlConvert(result.data.link)
|
}))
|
fileListLen++
|
}
|
this.loadingClose()
|
},
|
|
//删除图片
|
deletePic(event) {
|
this.form.images.splice(event.index, 1)
|
},
|
|
async submit() {
|
const that = this
|
const res = await this.$refs.form.validate()
|
|
|
if (res) {
|
if (this.form.images.length == 0) {
|
this.form.images = undefined
|
}
|
if (this.is_gate.indexOf('无闸') > -1) {
|
this.form.gateStatus = ""
|
}
|
add(this.form).then(res => {
|
uni.showToast({
|
icon: 'success',
|
title: '提交成功',
|
success() {
|
setTimeout(() => {
|
that.$u.func.globalNavigator(
|
"/pages/home/patrolIndex", "switchTab")
|
}, 1000)
|
}
|
})
|
})
|
}
|
},
|
//水库选择
|
skSelect(data) {
|
this.form.reservoirId = data.value
|
this.resName = data.name
|
this.is_gate = data.is_gate
|
this.skShow = false
|
},
|
}
|
}
|
</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;
|
}
|
|
.image {
|
width: 100rpx;
|
height: 100rpx;
|
}
|
}
|
|
.btn-group {
|
display: flex;
|
margin-left: 40rpx;
|
|
.value-item {
|
padding: 10rpx 40rpx;
|
background-color: #ffffff;
|
border: 2rpx solid #333333;
|
height: 70rpx;
|
box-sizing: border-box;
|
}
|
|
|
.active {
|
background-color: #1180ff !important;
|
color: #ffffff !important;
|
border: 2rpx solid #1180ff !important;
|
}
|
|
.border-left-none {
|
border-left: 0;
|
}
|
|
|
.disabled {
|
background-color: #dddddd;
|
border: 2rpx solid #dddddd;
|
color: #ffffff;
|
}
|
|
.sys-over {
|
font-size: 50rpx;
|
font-weight: 800;
|
color: #ff8610;
|
}
|
}
|
</style>
|
