disaster_web3/src/view/components/Menuventdoor.vue

<template>
   <div class="l_Dialog bou tablebk">
    <!--风门-->
    <div class="common-layout" style="margin: 0">
      <el-aside
        width="480px"
        class="L_aside L_aside1 asideg asidegbg leftbgimg1"
        v-show="sendialogVisible"
      >
        <div class="demo-collapse">
          <el-collapse accordion>
            <el-collapse-item name="1" class="btnicon">
              <template #title>
                <el-icon class="iconimg Frame3" fit="contain"></el-icon>
                风门<el-icon class="header-icon"> </el-icon>
              </template>
              <div class="asides_content">
                <div class="jc_content tablecolor">
                  <div class="jc_padding font12">
                    <div class="xian btncolor tablefocus bmar">
                      <el-table
                        :data="fmObjs"
                        style="width: 100%"
                        :max-height="tableHeight"
                        :highlight-current-row="currentrow"
                        :row-class-name="tableRowClassName"
                        @row-click="fmtabxz($event)"
                        :header-cell-style="{
                          background: 'rgba(13, 22, 57, 0) '
                        }"
                      >
                        <template v-slot:empty>
                          <p>暂无数据</p>
                        </template>
                        <el-table-column prop="doorname" label="风门名称" />
                        <el-table-column prop="pname" label="巷道名称" />
                        <!-- <el-table-column prop="site" label="相对位置" /> -->
                        <el-table-column property="siteremark" label="位置"/>
                        <el-table-column prop="dragcoe" label="阻力系数" />
                        <el-table-column prop="onoff" label="开启状态">
                          <template #default="scope">
                            {{
                              scope.row.onoff == 0
                                ? "否"
                                : scope.row.onoff == 1
                                ? "是"
                                : "是"
                            }}
                          </template>
                        </el-table-column>
                      </el-table>
                      <div class="dialog-footer footer_div l_btn">
                        <div class="footerbtn flex1">
                            <div class="borderimg"><el-button @click="fmadd();">添加</el-button></div>
                        </div>
                        <div class="footerbtn flex1">
                            <div class="borderimg"><el-button @click="fmupdate();">修改</el-button></div>
                        </div>
                        <div class="footerbtn flex1">
                            <div class="borderimg"><el-button @click="fmdeldialog();">删除</el-button></div>
                        </div>
                        
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </el-collapse-item>
          </el-collapse>

          <!-- 风门的添加 -->
          <el-dialog
            v-model="fmDShow"
            draggable :modal="false" modal-class="summary-dlg"
            @close="clearvtk"
            align-center  :append-to-body="true" width="400" class="dialog_class bgcolor tianjia  foter_l tianjia"
          >
            <template #header="{ titleId, titleClass }">
              <div class="my-header">
                <el-image :src="icon" fit="contain"></el-image>
                <h4 :id="titleId" :class="titleClass">{{ tishi }}</h4>
              </div>
            </template>
            <el-form>
              <!--  只能输入引文oninput ="value=value.replace(/[^a-zA-Z]/g, '');" -->
              <el-form-item label="编码" :label-width="formLabelWidth6">
                <el-input
                  v-model="fmObj.doorcode"
                  maxlength="18"
                  @input="fmObj.doorcode = fmObj.doorcode.replace(/[\u4e00-\u9fa5\s]/g, '')"
                  class="w-50 m-2"
                  placeholder="请输入"
                />
              </el-form-item>
              <el-form-item label="风门名称" :label-width="formLabelWidth6">
                <el-input
                  v-model="fmObj.doorname"
                  maxlength="18"
                  oninput="value=value.replace(/[^\a-\z\A-\Z0-9\u4E00-\u9FA5]/g,'')"
                  class="w-50 m-2"
                  placeholder="请输入"
                />
              </el-form-item>
              <div class="demo-input-suffix firsttitle magintop">
                <el-form-item label="巷道名称" :label-width="formLabelWidth6">
                  <el-input
                    v-model="fmObj.pname"
                    disabled
                    class="w-50 m-2"
                    placeholder="巷道名称"
                  />
                </el-form-item>
                <div class="btn2">
                  <el-button
                    type="primary"
                    @click="fireclick()"
                    >选择巷道</el-button
                  >
                </div>
              </div>
              <div class="input">
                <el-form-item label="相对位置" :label-width="formLabelWidth6">
                  <el-input-number
                    v-model="fmObj.site"
                    :min="0"
                    :max="1"
                    :precision="2"
                    :step="0.1"
                    controls-position="right"
                    class="w-50 m-2"
                    placeholder="相对位置"
                    @change="inputnumberChange"
                  />
                </el-form-item>
              </div>
              <el-form-item label="位置" :label-width="formLabelWidth6">
                <el-input
                  v-model="fmObj.siteremark"
                  class="w-50 m-2"
                  placeholder="请输入位置说明"
                />
              </el-form-item>
              <div style="display: flex">
                <span class="switchppm">开启状态</span>
                <el-switch
                  v-model="fmObj.onoff"
                  inline-prompt
                  active-text="是"
                  inactive-text="否"
                  :active-value="1"
                  :inactive-value="0"
                />
              </div>
              <el-form-item label="阻力系数" :label-width="formLabelWidth6">
                <el-input
                  v-model="fmObj.dragcoe"
                  maxlength="10"
                  oninput="value=value.replace(/[^0-9.]/g,'')"
                  class="w-50 m-2"
                  placeholder="请输入"
                />
              </el-form-item>
            </el-form>
            <div class="dialog-footer footer_div l_btn">
              <div class="footerbtn flex1">
                <div class="borderimg">
                  <el-button
                   @click="clearvtk();fmDShow = false"
                    >取消</el-button
                  >
                </div>
              </div>
              <div class="footerbtn flex1">
                <div class="borderimg">
                  <el-button @click="fmsave()"> 确定 </el-button>
                </div>
              </div>
            </div>
          </el-dialog>
          <!-- 删除框 -->
          <el-dialog v-model="dialogsgdelect" draggable :modal="false" modal-class="summary-dlg" align-center  :append-to-body="true" width="400" class="dialog_class bgcolor tianjia">

           <template #header="{ titleId, titleClass }">
               <div class="my-header ">
                   <el-image :src="icon" fit="contain"></el-image>
                   <h4 :id="titleId" :class="titleClass">删除框</h4>

               </div>
           </template>
           <h4 class="delecttitle"> 是否确认删除： <span class="spanclad">{{ fmdelname }}</span></h4>
           <div class="dialog-footer footer_div l_btn">
               <div class="footerbtn flex1">
                   <div class="borderimg"><el-button @click="dialogsgdelect = false">取消</el-button></div>
               </div>
               <div class="footerbtn flex1">
                   <div class="borderimg"><el-button @click="fmdel(); dialogsgdelect = false">
                           确定
                       </el-button></div>
               </div>
           </div>
          </el-dialog>
     
          <!-- 选择管道 -->
          <pipelines
            ref="pipeline"
            :selectstr="fmObj.pname"
            @pipelineapi="pipelineapi"
          />
        </div>
      </el-aside>
    </div>
  </div>
</template>

<script setup>
import { computed, ref, onMounted, reactive, toRef } from "vue"
import { request, uploadFile } from "@/utils/request"
import { ElMessage, ElButton, ElDialog, ElSelect } from "element-plus"
import { message } from '@/utils/message';
import zhCn from "element-plus/es/locale/lang/zh-cn"
import icon from "@/assets/img/icon.png"
import pipelines from "./PipeIine.vue"
import { vtkmodel } from "@/control/vtkModel.js"
import { timestampToTime } from "@/js/lindex.js"
let tableHeight = ref(200)
const formLabelWidth6 = ref(100);
let pipeline = ref()
const tableRowClassName = ({ row, rowIndex }) => {
  if (rowIndex % 2 != 0) {
    return "evenRow"
  }
  return "oddRow"
}
let currentrow=ref(false);
let sendialogVisible=ref(false);
let fmDShow =ref(false);
let fmObjs=ref([]);
let fmObj= ref({});
let tishi = ref();

const fmtabxz=(val)=>{
  fmObj.value = val;
  currentrow.value = true
  vtkmodel.delAll();
  vtkmodel.adddoor(val.pid,val.site);
}
const fmupdate=()=>{
  if (JSON.stringify(fmObj.value) == "{}") {
    message.error("你还没有选中修改的项目")
  }else{
    tishi.value = "修改";
    fmDShow.value = true;

    vtkmodel.delAll();
    vtkmodel.clearJgAddMode();
    //选中指定管道
    vtkmodel.selectByPipeId(fmObj.value.pid);
    vtkmodel.addpipdoor(fmObj.value.pid, fmObj.value.site);
  }
}
const fmadd=()=>{
  tishi.value = "添加";
  fmObj.value={};
  currentrow.value = false;
  fmDShow.value = true;

  vtkmodel.delAll();
}

const fmsave=()=>{
   const params = {
    transCode: "D50011",
    doorbaseid:fmObj.value.doorbaseid,
    doorcode:fmObj.value.doorcode,
    pid:fmObj.value.pid,
    doorname:fmObj.value.doorname,
    site:fmObj.value.site,
    dragcoe:parseFloat(fmObj.value.dragcoe),
    onoff:fmObj.value.onoff,
    siteremark: fmObj.value.siteremark,
  }
  request(params)
    .then((res) => {
     fmfind();
     fmDShow.value = false;
     fmObj.value={};
     message.success("风门"+ tishi.value + "成功");
     clearvtk();
    })
    .catch((err) => {
      message.error(err.returnMsg)
    })
}


let dialogsgdelect=ref(false);
let fmdelname=ref("");

const fmdeldialog=()=>{
  if (JSON.stringify(fmObj.value) == "{}") {
    message.error("你还没有选中删除的项目")
  }else{
    dialogsgdelect.value = true;
    fmdelname.value = fmObj.value.doorname;
  }
}

const fmdel=()=>{
  if (JSON.stringify(fmObj.value) == "{}") {
    message.error("你还没有选中删除的项目")
  }else{
  const params = {
    transCode: "D50012",
    doorbaseid:fmObj.value.doorbaseid,
  }
  request(params)
    .then((res) => {
      fmfind();
      message.success("风门删除成功")

      vtkmodel.delAll();
    })
    .catch((err) => {
      message.error(err.returnMsg)
    })
  }
}
const fmfind=()=>{
   const params = {
    transCode: "D50010"
  }
  request(params)
    .then((res) => {
      fmObjs.value = res.rows
    })
    .catch((err) => {
      message.error(err.returnMsg)
    })
}
onMounted(() => {
  fmfind()
})
// 选择巷道
const fireclick = () => {
  pipeline.value.searchtaggd = ""
  pipeline.value.dialogVisiblenode = true
  pipeline.value.pipelinedata("")

}

//点击确定
const pipelineapi = (row) => {
  fmObj.value.pid = row.id
  fmObj.value.pcode = row.code
  fmObj.value.pname = row.name

  vtkmodel.clearJgAddMode();
  //选中指定管道
  vtkmodel.selectByPipeId(row.id);
  vtkmodel.addpipdoor(row.id, 0.0);
}


const inputnumberChange = (val) => {
  console.log("fmObj.value",fmObj.value)
  vtkmodel.addpipdoor(fmObj.value.pid, val);
}

const clearvtk = () => {
  vtkmodel.clearpipdoor();
  vtkmodel.selectNoting();
}
defineExpose({ sendialogVisible })
</script>