482 lines
15 KiB
Vue
482 lines
15 KiB
Vue
<template>
|
||
<div class="content">
|
||
<div class="search-box">
|
||
<el-button type="primary" size="medium" @click="addTunnel">新增隧道</el-button>
|
||
<!-- <el-button type="warning" plain size="medium" @click="refresh">刷新</el-button> -->
|
||
</div>
|
||
<div class="table-box">
|
||
<el-table :data="tableData" class="tables" height="560" style="width: 100%">
|
||
<el-table-column align="center" label="隧道名称" prop="tunnelName"></el-table-column>
|
||
<el-table-column align="center" label="隧道方向" prop="direction">
|
||
<template slot-scope="scoped">{{ scoped.row.direction == 1 ? '从左到右' : '从右到左' }}</template>
|
||
</el-table-column>
|
||
<el-table-column align="center" label="隧道ID" prop="tunnelId"> </el-table-column>
|
||
<el-table-column align="center" label="隧道长度（m）" prop="tunnelLength"> </el-table-column>
|
||
<el-table-column align="center" label="施工进度（m）" prop="constructionProgressBegin">
|
||
<template slot-scope="scoped">{{ scoped.row.constructionProgressBegin }}/{{ scoped.row.constructionProgressEnd }}</template>
|
||
</el-table-column>
|
||
<el-table-column align="center" label="隧道图" prop="createTime">
|
||
<template slot-scope="scoped">
|
||
<img
|
||
v-if="scoped.row.planarGraph"
|
||
:src="$store.state.FILEURL + JSON.parse(scoped.row.planarGraph)[0].url"
|
||
:preview="$store.state.FILEURL + JSON.parse(scoped.row.planarGraph)[0].url"
|
||
class="tunnel-img"
|
||
/>
|
||
<span v-else>暂无</span>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column align="center" label="操作">
|
||
<template slot-scope="scoped">
|
||
<!-- <el-button type="text" @click="editTunnel(scoped.row)">编辑</el-button>
|
||
<el-button type="text" @click="deleteTunnel(scoped.row)">删除</el-button> -->
|
||
<div class="tableBtns">
|
||
<div @click="editTunnel(scoped.row)" class="operationText">
|
||
<img src="@/assets/images/icon-edit.png" width="15px" height="15px" />
|
||
<span>编辑</span>
|
||
</div>
|
||
<div @click="deleteTunnel(scoped.row)" class="operationText">
|
||
<img src="@/assets/images/icon-delete.png" width="15px" height="15px" />
|
||
<span>删除</span>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
</el-table-column>
|
||
</el-table>
|
||
<el-pagination
|
||
class="pagerBox"
|
||
@size-change="handleSizeChange"
|
||
@current-change="handleCurrentChange"
|
||
:current-page="pageNo"
|
||
:page-sizes="$store.state.PAGESIZRS"
|
||
:page-size="pageSize"
|
||
layout="total, sizes, prev, pager, next"
|
||
:total="Number(total)"
|
||
background
|
||
></el-pagination>
|
||
</div>
|
||
|
||
<!-- 新增隧道弹框 -->
|
||
<el-dialog :modal-append-to-body="false" @close="close" :title="title" :visible.sync="tunnelDialog" width="667px">
|
||
<div class="dialog_content">
|
||
<el-form size="medium" ref="addEditForm" :model="addEditForm" :rules="addEditRules" label-width="90px" class="dialogFormBox">
|
||
<el-form-item label="隧道名称" prop="tunnelName">
|
||
<el-input v-model="addEditForm.tunnelName" placeholder="请输入"></el-input>
|
||
</el-form-item>
|
||
<el-form-item label="隧道方向" prop="direction">
|
||
<el-radio-group v-model="addEditForm.direction">
|
||
<el-radio :label="1">从左到右</el-radio>
|
||
<el-radio :label="2">从右到左</el-radio>
|
||
</el-radio-group>
|
||
</el-form-item>
|
||
<el-form-item label="隧道ID" prop="tunnelId">
|
||
<el-input v-model="addEditForm.tunnelId" placeholder="请输入"></el-input>
|
||
</el-form-item>
|
||
<el-form-item label-width="115px" label="隧道长度（m）" prop="tunnelLength" style="margin-left: -15px">
|
||
<el-input style="margin-left: -10px" v-model="addEditForm.tunnelLength" placeholder="请输入" type="number"></el-input>
|
||
</el-form-item>
|
||
<el-form-item label-width="115px" label="施工进度（m）" prop="constructionProgressBegin" style="margin-left: -15px">
|
||
<el-input class="smallInput1" type="number" v-model="addEditForm.constructionProgressBegin"></el-input>/
|
||
<el-input class="smallInput2" type="number" v-model="addEditForm.constructionProgressEnd"></el-input>
|
||
</el-form-item>
|
||
<el-form-item class="labeInput" label="Y值随机范围（px）" prop="yvalueRandomRangeStart" style="margin-left: -10px">
|
||
<el-input
|
||
style="margin-left: -10px"
|
||
class="smallInput1"
|
||
v-model="addEditForm.yvalueRandomRangeStart"
|
||
@change="inputNumber"
|
||
type="number"
|
||
></el-input>
|
||
-
|
||
<el-input class="smallInput2" v-model="addEditForm.yvalueRandomRangeEnd" @change="inputNumber2" type="number"></el-input>
|
||
</el-form-item>
|
||
<el-form-item label-width="155px" label="矫正人员图标x方向" prop="correctorIconXDirection" style="margin-left: -55px">
|
||
<el-input
|
||
oninput="if(value<=0)value=''"
|
||
style="margin-left: -10px"
|
||
v-model="addEditForm.correctorIconXDirection"
|
||
placeholder="请输入"
|
||
type="number"
|
||
></el-input>
|
||
</el-form-item>
|
||
<el-form-item label="比例尺" prop="scale">
|
||
<el-input v-model="addEditForm.scale" placeholder="请输入" type="number"></el-input>
|
||
</el-form-item>
|
||
<!-- 隧道图 -->
|
||
<el-form-item label="隧道图" prop="tunnelGraph">
|
||
<el-upload
|
||
:action="$store.state.UPLOADURL"
|
||
:show-file-list="false"
|
||
:limit="1"
|
||
name="files"
|
||
:file-list="fileList"
|
||
:on-success="handleSuccess"
|
||
>
|
||
<div class="tunnel-img-box" v-if="fileList.length > 0">
|
||
<img :src="$store.state.FILEURL + fileList[0].url" class="tunnel-img" />
|
||
<i class="el-icon-circle-close close-img" @click.stop="handleRemove"></i>
|
||
</div>
|
||
<el-button v-else type="primary" size="medium">上传隧道图</el-button>
|
||
</el-upload>
|
||
</el-form-item>
|
||
<el-form-item label="备注" prop="remark">
|
||
<el-input v-model="addEditForm.remark" placeholder="请输入" clearable=""></el-input>
|
||
</el-form-item>
|
||
|
||
<div class="dialog-footer">
|
||
<el-button class="cancleBtn" @click="tunnelDialog = false" icon="el-icon-circle-close" size="medium">取消 </el-button>
|
||
<el-button type="primary" icon="el-icon-circle-check" @click="submit" size="medium">确定 </el-button>
|
||
</div>
|
||
</el-form>
|
||
</div>
|
||
</el-dialog>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import {
|
||
addLocationTunnelApi, //隧道列表
|
||
deleteLocationTunnelApi,
|
||
editLocationTunnelApi,
|
||
getLocationTunnelPageApi,
|
||
getRealTimeLocationWorkerApi, //查询实时定位人数
|
||
getcountRealTimeLocationWorkerApi //查询实时定位班组人员
|
||
} from '@/assets/js/api/tunnelPositioning'
|
||
export default {
|
||
data() {
|
||
return {
|
||
projectSn: '',
|
||
tableData: [],
|
||
pageNo: 1,
|
||
pageSize: 10,
|
||
total: 0,
|
||
tunnelDialog: false,
|
||
addEditForm: {
|
||
tunnelName: '',
|
||
direction: 1,
|
||
tunnelId: '',
|
||
tunnelLength: '',
|
||
constructionProgressBegin: '',
|
||
constructionProgressEnd: '',
|
||
yvalueRandomRangeStart: null,
|
||
yvalueRandomRangeEnd: null,
|
||
remark: '',
|
||
planarGraph: '',
|
||
id: '',
|
||
correctorIconXDirection: '',
|
||
scale: undefined
|
||
},
|
||
addEditRules: {
|
||
tunnelName: [
|
||
{
|
||
required: true,
|
||
message: '必填',
|
||
trigger: 'change'
|
||
}
|
||
],
|
||
direction: [
|
||
{
|
||
required: true,
|
||
message: '必填',
|
||
trigger: 'change'
|
||
}
|
||
],
|
||
correctorIconXDirection: [
|
||
{
|
||
required: true,
|
||
message: '必填',
|
||
trigger: 'change'
|
||
}
|
||
],
|
||
scale: [
|
||
{
|
||
required: true,
|
||
message: '必填',
|
||
trigger: 'change'
|
||
}
|
||
],
|
||
tunnelId: [
|
||
{
|
||
required: true,
|
||
message: '必填',
|
||
trigger: 'change'
|
||
}
|
||
],
|
||
tunnelLength: [
|
||
{
|
||
required: true,
|
||
message: '必填',
|
||
trigger: 'change'
|
||
}
|
||
],
|
||
constructionProgressBegin: [
|
||
{
|
||
required: true,
|
||
message: '必填',
|
||
trigger: 'change'
|
||
}
|
||
],
|
||
yvalueRandomRangeStart: [
|
||
{
|
||
required: true,
|
||
message: '必填',
|
||
trigger: 'change'
|
||
}
|
||
]
|
||
},
|
||
title: '',
|
||
fileList: []
|
||
}
|
||
},
|
||
created() {
|
||
this.projectSn = this.$store.state.projectSn
|
||
this.getTunnrlData()
|
||
},
|
||
|
||
methods: {
|
||
quertData() {
|
||
this.pageNo = 1
|
||
this.pageSize = 10
|
||
this.getTunnrlData()
|
||
},
|
||
refresh() {
|
||
this.pageNo = 1
|
||
this.pageSize = 10
|
||
this.total = 0
|
||
this.getTunnrlData()
|
||
},
|
||
getTunnrlData() {
|
||
let data = {
|
||
pageNo: this.pageNo,
|
||
pageSize: this.pageSize,
|
||
projectSn: this.projectSn
|
||
}
|
||
getLocationTunnelPageApi(data).then(res => {
|
||
console.log(res)
|
||
if (res.code == 200 && res.result) {
|
||
this.tableData = res.result.records
|
||
console.log(this.tableData)
|
||
this.total = res.result.total
|
||
}
|
||
})
|
||
},
|
||
addTunnel() {
|
||
this.title = '新增隧道'
|
||
this.tunnelDialog = true
|
||
this.fileList = []
|
||
this.addEditForm = {
|
||
tunnelName: '',
|
||
direction: 1,
|
||
tunnelId: '',
|
||
tunnelLength: '',
|
||
constructionProgressBegin: '',
|
||
constructionProgressEnd: '',
|
||
yvalueRandomRangeStart: '',
|
||
yvalueRandomRangeEnd: '',
|
||
remark: '',
|
||
planarGraph: '',
|
||
id: ''
|
||
}
|
||
this.$nextTick(() => {
|
||
this.$refs.addEditForm.clearValidate()
|
||
})
|
||
},
|
||
//编辑隧道
|
||
editTunnel(obj) {
|
||
this.tunnelDialog = true
|
||
this.title = '编辑隧道'
|
||
this.addEditForm = JSON.parse(JSON.stringify(obj))
|
||
this.fileList = this.addEditForm.planarGraph ? JSON.parse(this.addEditForm.planarGraph) : []
|
||
},
|
||
deleteTunnel(obj) {
|
||
this.$confirm('此操作将永久删除, 是否继续?', '提示', {
|
||
confirmButtonText: '确定',
|
||
cancelButtonText: '取消',
|
||
type: 'warning'
|
||
})
|
||
.then(() => {
|
||
deleteLocationTunnelApi({ id: obj.id }).then(result => {
|
||
if (result.success) {
|
||
this.$message.success(result.message)
|
||
this.addEditForm.id = ''
|
||
this.refresh()
|
||
}
|
||
})
|
||
})
|
||
.catch(() => {})
|
||
},
|
||
//新增/编辑
|
||
submit() {
|
||
let params = JSON.parse(JSON.stringify(this.addEditForm))
|
||
params.projectSn = this.projectSn
|
||
this.$refs.addEditForm.validate(valid => {
|
||
if (valid) {
|
||
if (this.title == '新增隧道') {
|
||
addLocationTunnelApi(params).then(result => {
|
||
if (result.success) {
|
||
this.$message.success(result.message)
|
||
this.refresh()
|
||
}
|
||
})
|
||
} else if (this.title == '编辑隧道') {
|
||
editLocationTunnelApi(params).then(result => {
|
||
if (result.success) {
|
||
this.$message.success(result.message)
|
||
this.refresh()
|
||
}
|
||
})
|
||
}
|
||
this.tunnelDialog = false
|
||
} else {
|
||
return false
|
||
}
|
||
})
|
||
},
|
||
handleSuccess(response, file, fileList) {
|
||
this.addEditForm.planarGraph = []
|
||
fileList.map(item => {
|
||
if (!item.response) {
|
||
this.addEditForm.planarGraph.push(item)
|
||
// console.log('符合的结构', item)
|
||
} else if (item.response) {
|
||
// console.log('不符合的结构', item)
|
||
this.addEditForm.planarGraph.push({
|
||
name: item.response.data[0].filename,
|
||
url: item.response.data[0].imageUrl
|
||
})
|
||
}
|
||
})
|
||
this.fileList = this.addEditForm.planarGraph
|
||
this.addEditForm.planarGraph = JSON.stringify(this.addEditForm.planarGraph)
|
||
},
|
||
handleRemove() {
|
||
this.fileList = []
|
||
this.addEditForm.planarGraph = ''
|
||
},
|
||
close() {
|
||
this.$nextTick(() => {
|
||
this.$refs.addEditForm.clearValidate()
|
||
})
|
||
},
|
||
inputNumber(value) {
|
||
console.log('输入框的值---', value, this.addEditForm.yvalueRandomRangeEnd)
|
||
// if (value >= 310 && value <= 530) {
|
||
// this.addEditForm.yvalueRandomRangeStart = value;
|
||
// } else {
|
||
// this.$message.error('请输入符合范围内的数值:310-530')
|
||
// this.addEditForm.yvalueRandomRangeStart = ''
|
||
// }
|
||
if (this.addEditForm.yvalueRandomRangeEnd == '' || value < this.addEditForm.yvalueRandomRangeEnd) {
|
||
this.addEditForm.yvalueRandomRangeStart = value
|
||
} else {
|
||
this.$message.error('请输入正确的范围数值')
|
||
this.addEditForm.yvalueRandomRangeStart = ''
|
||
}
|
||
},
|
||
inputNumber2(value) {
|
||
if (value > this.addEditForm.yvalueRandomRangeStart) {
|
||
this.addEditForm.yvalueRandomRangeEnd = value
|
||
} else {
|
||
this.$message.error('请输入正确的范围数值')
|
||
this.addEditForm.yvalueRandomRangeEnd = ''
|
||
}
|
||
},
|
||
handleSizeChange(value) {
|
||
this.pageSize = value
|
||
this.getTunnrlData()
|
||
},
|
||
handleCurrentChange(value) {
|
||
this.pageNo = value
|
||
this.getTunnrlData()
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="less" scoped>
|
||
.content {
|
||
display: flex;
|
||
flex-direction: column;
|
||
height: 100%;
|
||
|
||
.search-box {
|
||
background: #fff;
|
||
padding: 25px;
|
||
margin-bottom: 14px;
|
||
|
||
.search-item {
|
||
display: inline-block;
|
||
margin-right: 26px;
|
||
}
|
||
}
|
||
|
||
.table-box {
|
||
flex: 1;
|
||
background: #fff;
|
||
|
||
/deep/.el-table {
|
||
td {
|
||
vertical-align: top;
|
||
}
|
||
|
||
.cell {
|
||
padding-left: 44px;
|
||
}
|
||
}
|
||
|
||
.f-2 {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
|
||
.table-item {
|
||
width: 50%;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.smallInput1 {
|
||
width: 110px !important;
|
||
margin-left: -10px;
|
||
/deep/.el-input__inner {
|
||
width: 100%;
|
||
display: inline-block;
|
||
}
|
||
}
|
||
.smallInput2 {
|
||
width: 195px !important;
|
||
/deep/.el-input__inner {
|
||
width: 100%;
|
||
display: inline-block;
|
||
}
|
||
}
|
||
.labeInput {
|
||
/deep/.el-form-item__label {
|
||
width: 150px !important;
|
||
margin-left: -40px;
|
||
}
|
||
}
|
||
::v-deep .el-input__inner {
|
||
line-height: 1px !important;
|
||
}
|
||
::v-deep .el-upload .el-upload-list__item {
|
||
display: none;
|
||
}
|
||
.tunnel-img-box {
|
||
position: relative;
|
||
}
|
||
.tunnel-img {
|
||
width: auto;
|
||
height: 60px;
|
||
cursor: pointer;
|
||
}
|
||
.close-img {
|
||
position: absolute;
|
||
right: -8px;
|
||
top: -8px;
|
||
font-size: 16px;
|
||
color: red;
|
||
cursor: pointer;
|
||
}
|
||
</style>
|