disaster_web3/src/view/components/InfoBoundary.vue

<template>
  <!-- 边界条件-->
  <div class="l_Dialog bou tablebk">
    <!--火灾左侧栏-->
    <div class="common-layout" style="margin: 0">
      <el-aside
        width="2.125rem"
        class="L_aside L_aside1 asideg asidegbg leftbgimg1"
        v-show="boun.collfire"
      >
        <div class="demo-collapse">
          <el-collapse v-model="coolactiveName1" accordion>
            <!-- <el-collapse-item name="1"> -->
              <!-- <template #title>
                <el-icon class="iconimg Frame2" fit="contain"></el-icon>
                火灾<el-icon class="header-icon"> </el-icon>
              </template> -->
              <el-collapse-item name="1" class="imgneon">
              <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="ftableData"
                        style="width: 100%"
                        :max-height="tableHeight"
                        :highlight-current-row="currentrow"
                        :row-class-name="tableRowClassName"
                        @row-click="handleDelete($event)"
                        :header-cell-style="{ background: 'rgba(13, 22, 57, 0) ' }"
                      >
                      <template v-slot:empty>
                        <p>暂无数据</p>
                        </template>
                        <el-table-column prop="nname" label="节点选择" />
                        <!-- <el-table-column prop="type" label="边界类型" /> -->

                        <el-table-column
                          label="边界类型"
                          prop="type"
                          align="center"
                        >
                          <template #default="scope">
                            {{
                              scope.row.type == "massflow"
                                ? "流量边界"
                                : scope.row.type == "Pressure"
                                ? "压力边界"
                                : "压力边界"
                            }}
                          </template>
                        </el-table-column>
                        <!-- <el-table-column  width="50">
                                                //         <template #default="scope">{{scope.row.type == massflow ? '流量边界' : scope.row.type ==	Pressure?'压力边界' }} </template>
                                                //     </el-table-column> -->
                        <!-- <el-table-column prop="flow" label="流量(m³/s)" /> -->
                        
                          <el-table-column    prop="flow" label="流量">
                            <!-- <template  #default="{ row }">
                              {{ row.flow }} <br> (m³/s)
                            </template> -->
                            <template v-slot:header>
                              <div >
                            <span >流量</span><br>
                            <span >(m³/s)</span>
                          </div>
                          </template>
                          </el-table-column>
                          <el-table-column  prop="pressure" label="压强"  >
                            <template v-slot:header >
                            <div >
                            <span>压强</span><br>
                            <span >(pa)</span>
                            </div>
                          </template>
                          </el-table-column>
                          <el-table-column prop="temperature" label="温度">
                            <template v-slot:header>
                            <span >温度</span><br>
                            <span >(℃）</span>
                          </template>
                          </el-table-column>
                          <el-table-column prop="polcon1" label="二氧化碳">
                            <template v-slot:header>
                            <span >二氧化碳</span><br>
                            <span >(%)</span>
                          </template>
                          </el-table-column>
                          <el-table-column prop="polcon2" label="二氧化硫">
                            <template v-slot:header>
                            <span >二氧化硫</span><br>
                            <span >(ppm)</span>
                          </template>
                          </el-table-column>
                        <!-- <el-table-column prop="pressure" label="压强(pa)"  />
                        <el-table-column prop="temperature" label="温度(℃）" />
                        <el-table-column prop="polcon1" label="二氧化碳(%)" />
                        <el-table-column prop="polcon2" label="二氧化硫(ppm)" /> -->
                      </el-table>
                      <div class="asdis_btn">
                        <div class="flex_a"   @click="bounadd();
                              dialog.dialogVisible = true;
                            ">
                          <div
                            class="btns"
                            :class="{tabactive: isActive === 1}" @click="changeClass(1)"
                          >
                            <span class="spantext">添加</span>
                          </div>
                        </div>
                        <div class="flex_a"  @click="xiugai()">
                          <div class="btns"  :class="{tabactive: isActive === 2}" @click="changeClass(2)">
                            <span class="spantext">修改</span>
                          </div>
                        </div>
                        <div class="flex_a" @click="xiudelete();">
                          <div class="btns"  :class="{tabactive: isActive === 3}" @click="changeClass(3)">
                            <span class="spantext">删除</span>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </el-collapse-item>
          </el-collapse>
        </div>
      </el-aside>
    </div>
    <!-- 突水 -->
    <div class="common-layout" style="margin: 0" >
      <el-aside
        width="1.6667rem"
        class="L_aside L_aside1 asideg asidegbg leftbgimg1"
        v-show="boun.collwater"
      > 
       <div class="demo-collapse"> 
         <el-collapse v-model="coolactiveName1" accordion>
            <el-collapse-item name="2" class="imgneon">
              <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="ftableData"
                        style="width: 100%"
                        :max-height="tableHeight"
                        :highlight-current-row="currentrow"
                        :row-class-name="tableRowClassName"
                        @row-click="handleDelete($event)"
                        :header-cell-style="{ background: 'rgba(13, 22, 57, 0) ' }"
                      >
                      <template v-slot:empty>
                        <p>暂无数据</p>
                        </template>
                        <el-table-column prop="nname" label="节点选择" />
                        <el-table-column prop="type" label="边界类型" />
                      </el-table>
                    </div>
                  </div>
                  <div class="asdis_btn padingcla">
                    <div class="flex_a"  @click="
                          bounadd();
                          dialog.dialogVisible = true;
                      ">
                      <div
                        class="btns"
                      :class="{tabactive: isActive === 1}" @click="changeClass(1)"
                      >
                        <span class="spantext">添加</span>
                      </div>
                    </div>
                    <div class="flex_a"  @click="xiugai()">
                      <div class="btns"  :class="{tabactive: isActive === 2}" @click="changeClass(2)">
                        <span class="spantext">修改</span>
                      </div>
                    </div>
                    <div class="flex_a"  @click="xiudelete();">
                      <div class="btns"  :class="{tabactive: isActive === 3}" @click="changeClass(3)">
                        <span class="spantext">删除</span>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </el-collapse-item>
          </el-collapse>
         </div> 
    </el-aside>
    </div>
 
    <!-- 添加 -->
    <el-dialog
      v-model="dialog.dialogVisible"
      width="482"
      :modal="false"
      :close-on-click-modal="false"
      :append-to-body="true"
      draggable
      :fullscreen="false"
      :modal-append-to-body="false"
      modal-class="summary-dlg"
      class="dialog_class bgcolor foter_l"
    >
      <template #header="{ titleId, titleClass }">
        <div class="my-header">
          <el-image :src="icon" fit="contain"></el-image>
          <h4 :id="titleId" :class="titleClass">{{ buntext }}</h4>
        </div>
      </template>
      <div class="addye">
        <div class="fireclass" v-if="props.classradio == 'Fire' ||props.classradio == 'Gass'||props.classradio == 'Gass1'">
          <el-form class="demo-form-inline" :inline="true" :model="bformInline">
            <div class="l_padding input" style="padding: 20px 20px 20px 24px">
              <div class="demo-input-suffix firsttitle magintop">
                <el-form-item label="节点名称" :label-width="formLabelWidth6">
                  <el-input
                    v-model="bformInline.nname"
                    class="w-50 m-2"
                    placeholder="节点选择"
                    disabled 
                  />
                </el-form-item>
                <div class="btn2">
                  <el-button
                    type="primary"
                    @click="
                      fireclick();
                      sdialog.dialogVisiblenode = true;
                    "
                    >选择节点</el-button
                  >
                </div>
                <div class="btn2" style="padding-left: 10px">
                  <el-button type="primary" @click="Dclick()">3D节点选择</el-button>
                </div>
              </div>
              <el-form-item label="边界类型" :label-width="formLabelWidth6">
                <el-select v-model="bformInline.type" placeholder="请选择" >
                  <el-option
                    v-for="item in bformInline.options"
                    :key="item.id"
                    :label="item.label"
                    :value="item.value"
                  ></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="流量(m³/s)" :label-width="formLabelWidth6" v-if="bformInline.type=='massflow'">
                <el-input
                  v-model="bformInline.flow"
                  class="w-50 m-2"
                  placeholder="请输入"
                  oninput ="value=value.replace(/[^0-9.]/g,'')" 
                />
              </el-form-item>
              <el-form-item label="压强(pa)" :label-width="formLabelWidth6" v-if="bformInline.type=='Pressure'">
                <el-input
                  v-model="bformInline.pressure"
                  class="w-50 m-2"
                  placeholder="请输入"
                  oninput ="value=value.replace(/[^0-9.]/g,'')" 
                />
              </el-form-item>
              <el-form-item label="温度(℃）" :label-width="formLabelWidth6">
                <el-input
                  v-model="bformInline.temperature"
                  class="w-50 m-2"
                  placeholder="请输入"
                  oninput ="value=value.replace(/[^0-9.]/g,'')" 
                />
              </el-form-item>
              <el-form-item label="二氧化碳(%)" :label-width="formLabelWidth6">
                <el-input
                  v-model="bformInline.polcon1"
                  class="w-50 m-2"
                  placeholder="请输入"
                  oninput ="value=value.replace(/[^0-9.]/g,'')" 
                />
              </el-form-item>
              <el-form-item label="二氧化硫(ppm)" :label-width="formLabelWidth6">
                <el-input
                  v-model="bformInline.polcon2"
                  class="w-50 m-2"
                  placeholder="请输入"
                  oninput ="value=value.replace(/[^0-9.]/g,'')" 
                />
              </el-form-item>
            </div>
          </el-form>
        </div>
        <div class="Waterclass" v-else>
          <el-form class="demo-form-inline" :inline="true" :model="bformInline">
            <div class="l_padding input" style="padding: 20px 20px 20px 24px">
              <div class="demo-input-suffix firsttitle magintop">
                <el-form-item label="节点名称" :label-width="formLabelWidth6">
                  <el-input
                    v-model="bformInline.nname"
                    class="w-50 m-2"
                    placeholder="节点名称"
                  />
                </el-form-item>
                <div class="btn2">
                  <el-button
                    type="primary"
                    @click="
                      fireclick();
                      sdialog.dialogVisiblenode = true;
                    "
                    >选择节点</el-button
                  >
                </div>
                <div class="btn2" style="padding-left: 10px">
                  <el-button type="primary" @click="Dclick()">3D节点选择</el-button>
                </div>
              </div>
              <el-form-item label="边界类型" :label-width="formLabelWidth6">
                <el-select v-model="bformInline.type" placeholder="请选择">
                  <el-option
                    v-for="item in bformInline.options2"
                    :key="item.id"
                    :label="item.label"
                    :value="item.value"
                  ></el-option>
                </el-select>
              </el-form-item>
            </div>
          </el-form>
        </div>

        <div class="dialog-footer footer_div l_btn">
          <div class="footerbtn flex1">
            <div class="borderimg">
              <el-button @click="dialog.dialogVisible = false">取消</el-button>
            </div>
          </div>
          <div class="footerbtn flex1">
            <div class="borderimg">
              <el-button
                @click="
                  accidentboun();
                "
              >
                确定
              </el-button>
            </div>
          </div>
        </div>
      </div>
    </el-dialog>
    <!--  节点选择 -->
    <el-dialog
      v-model="sdialog.dialogVisiblenode"
      width="700"
      :z-index='3000'
        align-center
         :append-to-body="true"
      class="dialog_class bgcolor tianjia asideg asidegbg leftbgimg"
    >
      <template #header="{ titleId, titleClass }">
        <div class="my-header">
          <el-image :src="icon" fit="contain"></el-image>
          <h4 :id="titleId" :class="titleClass">选择节点</h4>
        </div>
      </template>
      <div class="demo-input-suffix firsttitle leftbgimg2">
        <div class="guand_1">
          <el-form-item label="节点选择" :label-width="formLabelWidth5">
            <el-input v-model="searchtaggd" class="w-50 m-2" placeholder="节点名称" />
          </el-form-item>
          <div class="asdis_btn">
            <div class="flex_a">
              <div class="btns" @click="searchgd"><span class="spantext">搜索</span></div>
            </div>
          </div>
        </div>
        <el-table
          :row-class-name="tableRowClassName"
          :max-height="tableHeight"
          ref="multipleTableRef"
          :data="tableData2"
          style="width: 100%"
          @select="projectsSelectionSelect"
           :header-cell-style="{ background: 'rgba(13, 22, 57, 0) ' }"
        >
        <template v-slot:empty>
                        <p>暂无数据</p>
                        </template>
          <el-table-column type="selection" width="55" />
          <el-table-column property="id" label="节点编号" />
          <el-table-column property="name" label="名称" />
          <!-- <el-table-column property="ntype" label="类型" /> -->
          <el-table-column property="x" label="x" />
          <el-table-column property="y" label="y" />
          <el-table-column property="z" label="z" />
        </el-table>
        <div class="demo-pagination-block" style="margin-top: 20px">
          <el-config-provider :locale="zhCn">
          <el-pagination
            v-model:current-page="currentPage4"
            v-model:page-size="pageSize4"
            small
            background
            layout="prev, total,pager, next, jumpe,"
            :total="parseInt(total)"
            class="mt-4"
            @current-change="handleCurrentChange"
          />
        </el-config-provider>
        </div>
        <div class="dialog-footer footer_div l_btn">
          <div class="footerbtn flex1">
            <div class="borderimg">
              <el-button @click="sdialog.dialogVisiblenode = false;searchtaggd=''">取消</el-button>
            </div>
          </div>
          <div class="footerbtn flex1">
            <div class="borderimg">
              <el-button @click="selectfun()"> 确定 </el-button>
            </div>
          </div>
        </div>
      </div>
    </el-dialog>

    <!-- 删除 -->
    <el-dialog
      v-model="sdialog.dialogsgdelect"
      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">{{ zqname }}</span>
      </h4>
      <div class="dialog-footer footer_div l_btn">
        <div class="footerbtn flex1">
          <div class="borderimg">
            <el-button @click="sdialog.dialogsgdelect = false;">取消</el-button>
          </div>
        </div>
        <div class="footerbtn flex1">
          <div class="borderimg">
            <el-button
              @click="
                fundeledata();
                sdialog.dialogsgdelect = false;
              "
            >
              确定
            </el-button>
          </div>
        </div>
      </div>
    </el-dialog>
  </div>
    <selfdialogs ref="dialogtrue" @Dtext="Dtext"></selfdialogs>

</template>

<script setup>
import { computed, ref, onMounted, reactive } from "vue";
import { request, uploadFile } from "@/utils/request";
import icon from "@/assets/img/icon.png";
import closeimg from "@/assets/img/colse.png";
import { ElMessage, ElButton, ElDialog,ElConfigProvider } from "element-plus";
import zhCn from 'element-plus/es/locale/lang/zh-cn'
import { Calendar, Search } from "@element-plus/icons-vue";
import selfdialogs from "./SetNode.vue";
import { vtkmodel } from "@/control/vtkModel.js";
import emitter from "@/utils/emitter";
let isActive=ref(0)
const  changeClass= (i)=>  {
  console.log(i);
 isActive.value = i;
}
// let showmassflow=ref(false);
// let showpressure=ref(true);
let tishi=ref('');
let currentrow=ref();
const changeModel = () => {
  vtkmodel.clearJgAddMode();
  vtkmodel.renderWindow.render();
};
let dialogtrue = ref();
// 3D弹屏
const Dclick = () => {
  dialogtrue.value.dialoglog = true;
  vtkmodel.clearJgAddMode() ;
  vtkmodel.selectNodes();
  dialogtrue.value.jgSelect();
  console.log(dialogtrue.value.dialoglog);
};
// 3D数据显示
const Dtext=(val)=>{
  console.log(val);
  nid.value = val.id;
  bformInline.value.nname = val.name;

}
const props = defineProps({
  classradio: String,
});
let sdialog = ref({
  dialogVisiblenode: false,
  dialogsgdelect: false,
});
let buntext = ref("");
const strResultFormatlist = reactive(
  { id: 0, name: "灾情演化", value: ".vtk" },
  { id: 1, name: "演化过程", value: ".mesh" }
);
let xiugaiobj = ref({});
let zqname = ref("");
let tableHeight = ref(400);
const multipleTableRef = ref();
const multipleSelection = ref([]);
const formLabelWidth5 = ref(77);
const formLabelWidth6 = ref(120);
let tableData2 = ref([]);
let searchtaggd = ref("");
let total = ref(1);
const currentPage4 = ref(1);
const pageSize4 = ref(5);
let nid = ref();
let bid = ref();
let aid = ref();
let bformInline = ref({
  nname: "",
  type: "Pressure",
  flow: "",
  pressure: "",
  temperature: "",
  polcon1: "",
  polcon2: "",
  user: "11",
  nodesel: "1",
  nodesselect: [
    {
      value: "1",
      label: "1",
    },
    {
      value: "2",
      label: "2",
    },
  ],
  region: "massflow",
  options: [
    {
      value: "massflow",
      label: "流量边界",
    },
    {
      value: "Pressure",
      label: " 压力边界",
    },
  ],
  region: "边界出口",
  options2: [
    {
      value: "边界出口",
    },
  ],
});
let coolactiveName1 = ref(["1", "2"]);
const ftableData = ref([]);
const value = ref("");
const dialog = ref({
  dialogVisible: false,
});
const boun = ref({
  collfire: false,
  collwater: false,
  collGass:false,
});
const initisshow=()=>{
  dialogtrue.value.dialoglog=false; 
  sdialog.value.dialogVisiblenode=false;
  sdialog.value.dialogsgdelect=false;
 boun.value.collfire=false;
 boun.value.collwater=false;
 boun.value.collGass=false;
 dialog.value.dialogVisible =false;


}
// emitter.on('handleSelect',(data)=>{
//     initisshow();
// });
// onUnmounted(() =>{
// emitter.off('handleSelect')
// })
// 节点选择
const fireclick = () => {
  pipelinedata("");
};
// 节点搜索
function searchgd() {
  pipelinedata(searchtaggd.value);
}

// 节点分页查询
const handleCurrentChange = (val) => {
  pipelinedata(searchtaggd.value);
};
//节点数据查询
const pipelinedata = (searchtag) => {
  const params = {
    transCode: "D00000",
    count: pageSize4.value,
    page: currentPage4.value,
    searchtag: searchtag,
  };
  request(params)
    .then((res) => {
      tableData2.value = res.rows;
      total.value = res.total;
    })
    .catch((err) => {
      ElMessage.error(err.returnMsg);
    });
};
const selectfun = () => {
  sdialog.value.dialogVisiblenode = false;
  bformInline.value.nname = "";
  searchtaggd.value='';
  currentPage4.value = 1;
  console.log();
  if (multipleSelection.value.length != 0) {
    nid.value = multipleSelection.value[0].id;
    bformInline.value.nname = multipleSelection.value[0].name;
  } else {
    bformInline.value.nname = "";
  }
};
const projectsSelectionSelect = (selection, row) => {
  if (selection.length > 1) {
    multipleTableRef.value.clearSelection();
    multipleTableRef.value.toggleRowSelection(row, true);
    let arrp=[];
        arrp.push(selection[1])
        multipleSelection.value = arrp;
    return;
  }
  if (selection.length == 1) {
    multipleSelection.value = selection;
  } else if (selection.length == 0) {
  }

  // console.log(row)
};
//边界添加前清空
const bounadd = () => {
  currentrow.value=false;
  bid.value = "";
  bformInline.value.nname = "";
  (bformInline.value.type = "Pressure"), (bformInline.value.flow = "0");
  bformInline.value.pressure = "100000";
  bformInline.value.temperature = "25";
  bformInline.value.polcon1 = "0";
  bformInline.value.polcon2 = "0";
  buntext.value = "添加";
  tishi.value= buntext.value;
  xiugaiobj.value={};
  if (props.classradio == "Fire" ||props.classradio == "Gass") {
    bformInline.value.type = "Pressure";
  } else if (props.classradio == "Water") {
    bformInline.value.type = "边界出口";
  } else {
  }
};
const xiudelete = () => {
  if (JSON.stringify(xiugaiobj.value) == "{}") {
    ElMessage.error("你还没有选中删除的项目");
  } else {
    sdialog.value.dialogsgdelect = true
}
}
//修改

const xiugai = () => {
  buntext.value = "修改";
  tishi.value= buntext.value;
  if (JSON.stringify(xiugaiobj.value) == "{}") {
    ElMessage.error("你还没有选中修改的项目");
  } else {
    if (props.classradio == "Fire") {
      bformInline.value.type = "Pressure";
    } else if (props.classradio == "Water") {
      bformInline.value.type = "边界出口";
    } else {
    }
    console.log(xiugaiobj.value);
    bid.value = xiugaiobj.value.bid;
    nid.value = xiugaiobj.value.nid;
    aid.value = xiugaiobj.value.aid;
    dialog.value.dialogVisible = true;
    bformInline.value.nname = xiugaiobj.value.nname;
    bformInline.value.type = xiugaiobj.value.type;
    bformInline.value.flow = xiugaiobj.value.flow;
    bformInline.value.pressure = xiugaiobj.value.pressure;
    bformInline.value.temperature = xiugaiobj.value.temperature;
    bformInline.value.polcon1 = xiugaiobj.value.polcon1;
    bformInline.value.polcon2 = xiugaiobj.value.polcon2;
  }
};
//边界的添加
const accidentboun = () => {
  const params = {
    transCode: "D10008",
    bid: bid.value,
    nid: nid.value,
    nname: bformInline.value.nname,
    type: bformInline.value.type,
    aid: aid.value,
    flow: bformInline.value.flow,
    pressure: bformInline.value.pressure,
    temperature: bformInline.value.temperature,
    polcon1: bformInline.value.polcon1,
    polcon2: bformInline.value.polcon2,
  };
  request(params)
    .then((res) => {
      ElMessage({
        message: tishi.value+"边界设置成功",
        type: "success",
      });
      dialog.value.dialogVisible=false;
      addboundary(aid.value);
    })
    .catch((err) => {
      const regex = /字段\d*/g;
        let Msg=err.returnMsg.replace(regex, '');
         ElMessage.error(Msg)
    });
};
// 边界数据的查询
const addboundary = (valaid) => {
  aid.value = valaid;
  const params = {
    transCode: "D10007",
    aid: aid.value,
  };
  request(params)
    .then((res) => {
      ftableData.value = res.rows;
      xiugaiobj.value={};
      
    })
    .catch((err) => {
      ElMessage.error(err.returnMsg);
    });
};
const handleDelete = (val) => {
  console.log(val);
  currentrow.value=true;
  xiugaiobj.value = val;
  bid.value = val.bid;
  zqname.value = val.nname;
};
const fundeledata = () => {
  const params = {
    transCode: "D10009",
    bid: bid.value,
  };
  console.log(params);
  request(params)
    .then((res) => {
      ElMessage({
        message: "边界删除成功",
        type: "success",
      });
      addboundary(aid.value);
    })
    .catch((err) => {
      ElMessage.error(err.returnMsg);
    });
};
// 表格变色
const tableRowClassName = ({ row, rowIndex }) => {
  if (rowIndex % 2 != 0) {
    return "evenRow";
  }
  return "oddRow";
};
// 弹出框
const accident4 = (key) => {
  if (key == "1"||key == "2"||key == "3"||key == "5") {
    console.log(key);
    if (props.classradio == "Fire"||props.classradio =='Gass'||props.classradio =='Gass1') {
      boun.value.collfire = true;
      boun.value.collwater = false;
      boun.value.collGass = false;
    } else if (props.classradio == "Water") {
      boun.value.collwater = true;
      boun.value.collfire = false;
      boun.value.collGass = false;
    } else if(props.classradio =='Gass'){
      // boun.value.collwater = false;
      // boun.value.collfire = true;
      // boun.value.collGass = false;

    }else{
      
    }
  } else {
    boun.value.collfire = false;
    boun.value.collwater = false;
    boun.value.collGass = false;
  }
};
onMounted(() => {});
defineExpose({ boun, accident4, addboundary, changeModel,initisshow });
</script>