|
|
@@ -0,0 +1,357 @@
|
|
|
+<template>
|
|
|
+ <el-drawer
|
|
|
+ :title="title"
|
|
|
+ :modal-append-to-body="false"
|
|
|
+ :modal="false"
|
|
|
+ :wrapper-closable="false"
|
|
|
+ size="35%"
|
|
|
+ :visible.sync="dialogVisible"
|
|
|
+ >
|
|
|
+ <div class="content-container goaf">
|
|
|
+ <vuescroll :ops="ops" style="height: calc(100vh - 220px)">
|
|
|
+ <el-form ref="ruleForm" :model="formData" :rules="rules" label-position="right" label-width="160px">
|
|
|
+ <el-form-item label="采空区名称" prop="goafName">
|
|
|
+ <el-input v-model="formData.goafName" style="width:90%" />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="矿带">
|
|
|
+ <el-input-number v-model="formData.goafOrebelt" placeholder="矿带" :controls="false" />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="矿体">
|
|
|
+ <el-input-number v-model="formData.goafOrebody" placeholder="矿体" :controls="false" />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="中段">
|
|
|
+ <el-input-number v-model="formData.goafOreheight" placeholder="中段" :controls="false" />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="水平断面均暴露面积">
|
|
|
+ <el-input-number v-model="formData.goafAvexArea" placeholder="水平断面均暴露面积" :controls="false" />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="平均倾向宽度">
|
|
|
+ <el-input-number v-model="formData.goafAvinWidth" placeholder="平均倾向宽度" :controls="false" />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="平均暴露高度">
|
|
|
+ <el-input-number v-model="formData.goafAvexHeight" placeholder="平均暴露高度 0.0表示“已填充”" :controls="false" />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="体积">
|
|
|
+ <el-input-number v-model="formData.goafVoidVolume" placeholder="体积 0表示“已填充”" :controls="false" />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="倾向">
|
|
|
+ <el-input-number v-model="formData.goafKeyTrend" placeholder="倾向" :controls="false" />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="倾角（度）">
|
|
|
+ <el-input-number v-model="formData.goafKeyDipangle" placeholder="倾角（度）" :controls="false" />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="顶板矿柱厚度">
|
|
|
+ <el-input-number v-model="formData.goafRoofpillarThickness" placeholder="顶板矿柱厚度" :controls="false" />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="保安间柱平均厚度">
|
|
|
+ <el-input-number v-model="formData.goafIncoavThickness" placeholder="保安间柱平均厚度" :controls="false" />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="顶板矿柱厚度">
|
|
|
+ <el-input-number v-model="formData.goafRoofpillarThickness" placeholder="顶板矿柱厚度" :controls="false" />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="保安间柱平均厚度">
|
|
|
+ <el-input-number v-model="formData.goafIncoavThickness" placeholder="保安间柱平均厚度" :controls="false" />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="勘探位置">
|
|
|
+ <el-input v-model="formData.goafExpLocation" style="width:200px" />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="围岩岩性">
|
|
|
+ <el-input v-model="formData.goafRockLithology" style="width:200px" />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="围岩稳定性">
|
|
|
+ <el-input v-model="formData.goafRockStability" style="width:200px" />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="形成时间">
|
|
|
+ <el-date-picker
|
|
|
+ v-model="formData.goafFormationTime"
|
|
|
+ type="date"
|
|
|
+ placeholder="请选择形成时间"
|
|
|
+ class="date"
|
|
|
+ :default-value="new Date(2010, 9, 1)"
|
|
|
+ style="width:200px"
|
|
|
+ />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="可充填体积（m³）">
|
|
|
+ <el-input-number v-model="formData.goafCanfillVolume" placeholder="可充填体积（m³）" :controls="false" />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="剩余可充填体积（m³）">
|
|
|
+ <el-input-number v-model="formData.goafRemainVolume" placeholder="剩余可充填体积（m³）" :controls="false" />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="充填方式">
|
|
|
+ <el-select v-model="formData.riskLevel" style="width:200px">
|
|
|
+ <el-option :value="0" label="废石" />
|
|
|
+ <el-option :value="1" label="尾矿" />
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="是否填充">
|
|
|
+ <el-select v-model="formData.goafIsFill" style="width:200px">
|
|
|
+ <el-option :value="0" label="是" />
|
|
|
+ <el-option :value="1" label="否" />
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="备注">
|
|
|
+ <el-input v-model="formData.goafInfoRemak" type="textarea" rows="5" style="width:90%" />
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+ </vuescroll>
|
|
|
+ <div class="btn-group">
|
|
|
+ <el-button type="primary" @click="submitForm('ruleForm')">确定</el-button>
|
|
|
+ <el-button class="cancel-btn" @click="dialogVisible = false">取消</el-button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </el-drawer>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import { createHazardRisk, getHazardRiskById, updateHazardRisk } from '@/api/aqpt/hazardRiskApi'
|
|
|
+import { strArr2NumArr } from '@/utils'
|
|
|
+import Vuescroll from 'vuescroll'
|
|
|
+
|
|
|
+export default {
|
|
|
+ components: {
|
|
|
+ Vuescroll
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ title: '采空区信息',
|
|
|
+ ops: {
|
|
|
+ bar: {
|
|
|
+ keepShow: false,
|
|
|
+ background: 'rgba(144, 147, 153, 0.4)',
|
|
|
+ onlyShowBarOnScroll: false
|
|
|
+ }
|
|
|
+ },
|
|
|
+ dialogVisible: false,
|
|
|
+ formData: {
|
|
|
+ 'goafId': '',
|
|
|
+ 'ocId': '',
|
|
|
+ 'goafOrebelt': 0,
|
|
|
+ 'goafOrebody': 0,
|
|
|
+ 'goafOreheight': 0,
|
|
|
+ 'goafName': '',
|
|
|
+ 'goafAvexArea': 0,
|
|
|
+ 'goafAvinWidth': 0,
|
|
|
+ 'goafAvexHeight': 0,
|
|
|
+ 'goafVoidVolume': 0,
|
|
|
+ 'goafKeyTrend': 0,
|
|
|
+ 'goafKeyDipangle': 0,
|
|
|
+ 'goafRoofpillarThickness': 0,
|
|
|
+ 'goafIncoavThickness': 0,
|
|
|
+ 'goafExpLocation': '',
|
|
|
+ 'goafRockLithology': '',
|
|
|
+ 'goafRockStability': '',
|
|
|
+ 'goafFormationTime': '',
|
|
|
+ 'goafCanfillVolume': 0,
|
|
|
+ 'goafRemainVolume': 0,
|
|
|
+ 'goafFillMethod': 0,
|
|
|
+ 'goafIsFill': 0,
|
|
|
+ 'goafInfoRemak': ''
|
|
|
+ },
|
|
|
+ rules: {
|
|
|
+ goafName: [
|
|
|
+ { required: true, message: '采空区名称不能为空', trigger: 'blur' }
|
|
|
+ ]
|
|
|
+ },
|
|
|
+ ctrlLevelList: [],
|
|
|
+ positionList: [],
|
|
|
+ viewData: {},
|
|
|
+ actionType: ''
|
|
|
+ }
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+
|
|
|
+ // Show Add Dialog
|
|
|
+ showAddModel(hazardId, hazardTitle) {
|
|
|
+ this.resetFormData()
|
|
|
+ this.actionType = 'ADD'
|
|
|
+ this.dialogVisible = true
|
|
|
+ this.formData.hazardId = hazardId
|
|
|
+ this.formData.hazardTitle = hazardTitle
|
|
|
+ },
|
|
|
+
|
|
|
+ // Show Edit Dialog
|
|
|
+ showEditModel(hazardId, riskId) {
|
|
|
+ this.resetFormData()
|
|
|
+ this.actionType = 'UPDATE'
|
|
|
+ this.dialogVisible = true
|
|
|
+ getHazardRiskById(hazardId, riskId).then((resp) => {
|
|
|
+ const { code, data, msg } = resp
|
|
|
+ if (code === 0) {
|
|
|
+ this.formData = data
|
|
|
+ this.formData.positionId = strArr2NumArr(data.positionIdList.split(','))
|
|
|
+ console.log('this.formData.positionId', this.formData.positionId.toString())
|
|
|
+ } else {
|
|
|
+ this.$message.error(msg)
|
|
|
+ }
|
|
|
+ }).catch((error) => {
|
|
|
+ console.log(error)
|
|
|
+ })
|
|
|
+ },
|
|
|
+
|
|
|
+ // Reset Form Data
|
|
|
+ resetFormData() {
|
|
|
+ this.formData = {
|
|
|
+ 'ocId': '',
|
|
|
+ 'goafOrebelt': 0,
|
|
|
+ 'goafOrebody': 0,
|
|
|
+ 'goafOreheight': 0,
|
|
|
+ 'goafName': '',
|
|
|
+ 'goafAvexArea': 0,
|
|
|
+ 'goafAvinWidth': 0,
|
|
|
+ 'goafAvexHeight': 0,
|
|
|
+ 'goafVoidVolume': 0,
|
|
|
+ 'goafKeyTrend': 0,
|
|
|
+ 'goafKeyDipangle': 0,
|
|
|
+ 'goafRoofpillarThickness': 0,
|
|
|
+ 'goafIncoavThickness': 0,
|
|
|
+ 'goafExpLocation': '',
|
|
|
+ 'goafRockLithology': '',
|
|
|
+ 'goafRockStability': '',
|
|
|
+ 'goafFormationTime': '',
|
|
|
+ 'goafCanfillVolume': 0,
|
|
|
+ 'goafRemainVolume': 0,
|
|
|
+ 'goafFillMethod': 0,
|
|
|
+ 'goafIsFill': 0,
|
|
|
+ 'goafInfoRemak': ''
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
+ // 提交
|
|
|
+ submitForm(formName) {
|
|
|
+ this.$refs[formName].validate((valid) => {
|
|
|
+ if (valid) {
|
|
|
+ switch (this.actionType) {
|
|
|
+ case 'ADD':
|
|
|
+ this.formData.positionIdList = this.formData.positionId.toString()
|
|
|
+ createHazardRisk(this.formData).then((resp) => {
|
|
|
+ const { code, msg } = resp
|
|
|
+ if (code === 0) {
|
|
|
+ this.dialogVisible = false
|
|
|
+ this.$message.success(msg)
|
|
|
+ this.formSuccess()
|
|
|
+ } else {
|
|
|
+ this.$message.error(msg)
|
|
|
+ }
|
|
|
+ }).catch((error) => {
|
|
|
+ console.log(error)
|
|
|
+ })
|
|
|
+ break
|
|
|
+
|
|
|
+ case 'UPDATE':
|
|
|
+ this.formData.positionIdList = this.formData.positionId.toString()
|
|
|
+ updateHazardRisk(this.formData).then((resp) => {
|
|
|
+ const { code, msg } = resp
|
|
|
+ if (code === 0) {
|
|
|
+ this.dialogVisible = false
|
|
|
+ this.$message.success(msg)
|
|
|
+ this.formSuccess()
|
|
|
+ } else {
|
|
|
+ this.$message.error(msg)
|
|
|
+ }
|
|
|
+ }).catch((error) => {
|
|
|
+ console.log(error)
|
|
|
+ })
|
|
|
+ break
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ console.log('error submit!!')
|
|
|
+ return false
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ formSuccess() {
|
|
|
+ this.$emit('formSuccess')
|
|
|
+ },
|
|
|
+ resetFormField(formName) {
|
|
|
+ this.$refs[formName].resetFields()
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</script>
|
|
|
+
|
|
|
+ <style lang="scss">
|
|
|
+ /* 修复input 背景不协调 和光标变色 */
|
|
|
+ /* Detail see https://github.com/PanJiaChen/vue-element-admin/pull/927 */
|
|
|
+
|
|
|
+ $bg: #283443;
|
|
|
+ $light_gray: #fff;
|
|
|
+ $cursor: #fff;
|
|
|
+
|
|
|
+ @supports (-webkit-mask: none) and (not (cater-color: $cursor)) {
|
|
|
+ .login-container .el-input input {
|
|
|
+ color: $cursor;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ /* reset element-ui css */
|
|
|
+ .content-container {
|
|
|
+ .el-input, .el-textarea {
|
|
|
+ display: inline-block;
|
|
|
+ width: 100%;
|
|
|
+ border: 1px solid rgba(255, 255, 255, 0.1);
|
|
|
+ background: rgba(0, 0, 0, 0.1);
|
|
|
+ border-radius: 5px;
|
|
|
+
|
|
|
+ input, textarea {
|
|
|
+ background: transparent;
|
|
|
+ border: 0px;
|
|
|
+ -webkit-appearance: none;
|
|
|
+ border-radius: 0px;
|
|
|
+ padding: 12px 5px 12px 15px;
|
|
|
+ color: $light_gray;
|
|
|
+ min-height: 47px;
|
|
|
+ caret-color: $cursor;
|
|
|
+
|
|
|
+ &:-webkit-autofill {
|
|
|
+ box-shadow: 0 0 0px 1000px $bg inset !important;
|
|
|
+ -webkit-text-fill-color: $cursor !important;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .el-form-item__label {
|
|
|
+ color: #ffffff;
|
|
|
+ font-size: 14px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .content-container .el-date-editor.date .el-input__inner{
|
|
|
+ padding-left: 30px;
|
|
|
+ min-height:unset;
|
|
|
+ }
|
|
|
+ </style>
|
|
|
+ <style lang="scss" scoped>
|
|
|
+
|
|
|
+ .content-container {
|
|
|
+ margin: 15px;
|
|
|
+ position: relative;
|
|
|
+ height: calc(100% - 15px);
|
|
|
+
|
|
|
+ .btn-group {
|
|
|
+ width: 100%;
|
|
|
+ padding:20px 0 0 160px;
|
|
|
+
|
|
|
+ .el-button {
|
|
|
+ margin: 0 15px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .cancel-btn {
|
|
|
+ background: #004F7B;
|
|
|
+ border-color: #004F7B;
|
|
|
+ color: #FFF;
|
|
|
+
|
|
|
+ &:hover {
|
|
|
+ background: #026197;
|
|
|
+ border-color: #026197;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ .el-form-item {
|
|
|
+ margin-bottom: 5px;
|
|
|
+ }
|
|
|
+ </style>
|
|
|
+
|
