Pārlūkot izejas kodu

节点管道选择

huangxingxing 1 gadu atpakaļ
vecāks
revīzija
2d05c0632d

+ 941 - 827
src/view/components/InfoBoundary.vue

@@ -1,295 +1,409 @@
 <template>
-    <!-- 所有弹出框 -->
-    <div class="l_Dialog bou">
-        <!--火灾左侧栏-->
-        <div class="common-layout " style="margin: 0;">
-            <el-aside width="591px" class="L_aside L_aside1 asideg asidegbg leftbgimg2" 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>
-                            <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="true" :row-class-name="tableRowClassName"
-                                                @row-click="handleDelete($event)"
-                                                :header-cell-style="{ 'background': 'rgba(13, 22, 57, 0.96) ' }">
-                                                <el-table-column prop="nid" label="节点选择" />
-                                                <!-- <el-table-column prop="type" label="边界类型" /> -->
-              
-                                          <el-table-column label="边界类型" prop="type" align="center" width="80px">
-                                                        <template #default="scope">
-                                                            {{
-                                                            scope.row.type == 'massflow'
-                                                                ? '流量边界'
-                                                                : scope.row.type == 'Pressure'
-                                                                ? '压力边界'
-                                                                : '压力边界'
-                                                            }}
-                                                        </template>
-                                                    </el-table-column> 
-                                              <!-- <el-table-column  width="50">
+  <!-- 所有弹出框 -->
+  <div class="l_Dialog bou">
+    <!--火灾左侧栏-->
+    <div class="common-layout" style="margin: 0">
+      <el-aside
+        width="591px"
+        class="L_aside L_aside1 asideg asidegbg leftbgimg2"
+        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>
+              <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="true"
+                        :row-class-name="tableRowClassName"
+                        @row-click="handleDelete($event)"
+                        :header-cell-style="{ background: 'rgba(13, 22, 57, 0.96) ' }"
+                      >
+                        <el-table-column prop="nid" label="节点选择" />
+                        <!-- <el-table-column prop="type" label="边界类型" /> -->
+
+                        <el-table-column
+                          label="边界类型"
+                          prop="type"
+                          align="center"
+                          width="80px"
+                        >
+                          <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)" width="80" />
-                                                <el-table-column prop="pressure" label="压强(pa)" width="70" />
-                                                <el-table-column prop="temperature" label="温度(℃)" />
-                                                <el-table-column prop="polcon1" label="污染物1浓度" width="95" />
-                                                <el-table-column prop="polcon2" label="污染物2浓度" width="95" />
-                                            </el-table>
-                                            <div class="asdis_btn">
-                                                <div class="flex_a">
-                                                    <div class="btns" @click="bounadd(); dialog.dialogVisible = true;">
-                                                        <span class="spantext">添加</span>
-                                                    </div>
-                                                </div>
-                                                <div class="flex_a">
-                                                    <div class="btns" @click="xiugai();"><span
-                                                            class="spantext">修改</span></div>
-                                                </div>
-                                                <div class="flex_a">
-                                                    <div class="btns" @click="sdialog.dialogsgdelect = true"><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="231px" class="L_aside L_aside1 asideg asidegbg leftbgimg0 " v-show="boun.collwater">
-                <div class="demo-collapse">
-                    <el-collapse v-model="coolactiveName1" accordion>
-                        <el-collapse-item name="2">
-
-                            <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="true" :row-class-name="tableRowClassName"
-                                                @row-click="handleDelete($event)"
-                                                :header-cell-style="{ 'background': 'rgba(13, 22, 57, 0.96) ' }">
-                                                <el-table-column prop="nid" label="节点选择" />
-                                                <el-table-column prop="type" label="边界类型" />
-                                            </el-table>
-                                        </div>
-                                    </div>
-                                    <div class="asdis_btn padingcla">
-                                        <div class="flex_a">
-                                            <div class="btns" @click="bounadd(); dialog.dialogVisible = true;">
-                                                <span class="spantext">添加</span>
-                                            </div>
-                                        </div>
-                                        <div class="flex_a">
-                                            <div class="btns" @click="xiugai();"><span class="spantext">修改</span></div>
-                                        </div>
-                                        <div class="flex_a">
-                                            <div class="btns" @click="sdialog.dialogsgdelect = true"><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" draggable
-            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'">
-                    <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>
-                            <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">
-                                <el-input v-model="bformInline.flow" class="w-50 m-2" placeholder="请输入" />
-                            </el-form-item>
-                            <el-form-item label="压强(pa)" :label-width="formLabelWidth6">
-                                <el-input v-model="bformInline.pressure" class="w-50 m-2" placeholder="请输入" />
-                            </el-form-item>
-                            <el-form-item label="温度(℃)" :label-width="formLabelWidth6">
-                                <el-input v-model="bformInline.temperature" class="w-50 m-2" placeholder="请输入" />
-                            </el-form-item>
-                            <el-form-item label="污染物1浓度" :label-width="formLabelWidth6">
-                                <el-input v-model="bformInline.polcon1" class="w-50 m-2" placeholder="请输入" />
-                            </el-form-item>
-                            <el-form-item label="污染物2浓度" :label-width="formLabelWidth6">
-                                <el-input v-model="bformInline.polcon2" class="w-50 m-2" placeholder="请输入" />
-                            </el-form-item>
+                        <el-table-column prop="flow" label="流量(m³/s)" width="80" />
+                        <el-table-column prop="pressure" label="压强(pa)" width="70" />
+                        <el-table-column prop="temperature" label="温度(℃)" />
+                        <el-table-column prop="polcon1" label="污染物1浓度" width="95" />
+                        <el-table-column prop="polcon2" label="污染物2浓度" width="95" />
+                      </el-table>
+                      <div class="asdis_btn">
+                        <div class="flex_a">
+                          <div
+                            class="btns"
+                            @click="
+                              bounadd();
+                              dialog.dialogVisible = true;
+                            "
+                          >
+                            <span class="spantext">添加</span>
+                          </div>
                         </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>
-                            <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 class="flex_a">
+                          <div class="btns" @click="xiugai()">
+                            <span class="spantext">修改</span>
+                          </div>
                         </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(); dialog.dialogVisible = false">
-                                确定
-                            </el-button></div>
+                        <div class="flex_a">
+                          <div class="btns" @click="sdialog.dialogsgdelect = true">
+                            <span class="spantext">删除</span>
+                          </div>
+                        </div>
+                      </div>
                     </div>
+                  </div>
                 </div>
-            </div>
-        </el-dialog>
-            <!--  节点选择 -->
-            <el-dialog v-model="sdialog.dialogVisiblenode" width="600px"
-                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>
+            </el-collapse-item>
+          </el-collapse>
+        </div>
+      </el-aside>
+    </div>
+    <!-- 突水 -->
+    <div class="common-layout" style="margin: 0">
+      <el-aside
+        width="231px"
+        class="L_aside L_aside1 asideg asidegbg leftbgimg0"
+        v-show="boun.collwater"
+      >
+        <div class="demo-collapse">
+          <el-collapse v-model="coolactiveName1" accordion>
+            <el-collapse-item name="2">
+              <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="true"
+                        :row-class-name="tableRowClassName"
+                        @row-click="handleDelete($event)"
+                        :header-cell-style="{ background: 'rgba(13, 22, 57, 0.96) ' }"
+                      >
+                        <el-table-column prop="nid" label="节点选择" />
+                        <el-table-column prop="type" label="边界类型" />
+                      </el-table>
                     </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>
+                  <div class="asdis_btn padingcla">
+                    <div class="flex_a">
+                      <div
+                        class="btns"
+                        @click="
+                          bounadd();
+                          dialog.dialogVisible = true;
+                        "
+                      >
+                        <span class="spantext">添加</span>
+                      </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.96) ' }">
-                        <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-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" />
+                    <div class="flex_a">
+                      <div class="btns" @click="xiugai()">
+                        <span class="spantext">修改</span>
+                      </div>
                     </div>
-                    <div class="dialog-footer footer_div l_btn">
-                        <div class="footerbtn flex1">
-                            <div class="borderimg"><el-button @click=" sdialog.dialogVisiblenode = false">取消</el-button>
-                            </div>
-                        </div>
-                        <div class="footerbtn flex1">
-                            <div class="borderimg"><el-button @click="selectfun();">
-                                    确定
-                                </el-button></div>
-                        </div>
+                    <div class="flex_a">
+                      <div class="btns" @click="sdialog.dialogsgdelect = true">
+                        <span class="spantext">删除</span>
+                      </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>
+            </el-collapse-item>
+          </el-collapse>
+        </div>
+      </el-aside>
+    </div>
+    <!-- 添加 -->
+    <el-dialog
+      v-model="dialog.dialogVisible"
+      width="482"
+      :modal="false"
+      :close-on-click-modal="false"
+      draggable
+      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'">
+          <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>
-            </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>
+              <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">
+                <el-input
+                  v-model="bformInline.flow"
+                  class="w-50 m-2"
+                  placeholder="请输入"
+                />
+              </el-form-item>
+              <el-form-item label="压强(pa)" :label-width="formLabelWidth6">
+                <el-input
+                  v-model="bformInline.pressure"
+                  class="w-50 m-2"
+                  placeholder="请输入"
+                />
+              </el-form-item>
+              <el-form-item label="温度(℃)" :label-width="formLabelWidth6">
+                <el-input
+                  v-model="bformInline.temperature"
+                  class="w-50 m-2"
+                  placeholder="请输入"
+                />
+              </el-form-item>
+              <el-form-item label="污染物1浓度" :label-width="formLabelWidth6">
+                <el-input
+                  v-model="bformInline.polcon1"
+                  class="w-50 m-2"
+                  placeholder="请输入"
+                />
+              </el-form-item>
+              <el-form-item label="污染物2浓度" :label-width="formLabelWidth6">
+                <el-input
+                  v-model="bformInline.polcon2"
+                  class="w-50 m-2"
+                  placeholder="请输入"
+                />
+              </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="footerbtn flex1">
-                    <div class="borderimg"><el-button @click="fundeledata(); sdialog.dialogsgdelect = false">
-                            确定
-                        </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-dialog>
-    </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();
+                  dialog.dialogVisible = false;
+                "
+              >
+                确定
+              </el-button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </el-dialog>
+    <!--  节点选择 -->
+    <el-dialog
+      v-model="sdialog.dialogVisiblenode"
+      width="600px"
+      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.96) ' }"
+        >
+          <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-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"
+          />
+        </div>
+        <div class="dialog-footer footer_div l_btn">
+          <div class="footerbtn flex1">
+            <div class="borderimg">
+              <el-button @click="sdialog.dialogVisiblenode = false">取消</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>
@@ -297,770 +411,770 @@ 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 } from 'element-plus'
-import { Calendar, Search } from '@element-plus/icons-vue'
+import { ElMessage, ElButton, ElDialog } from "element-plus";
+import { Calendar, Search } from "@element-plus/icons-vue";
+import selfdialogs from "./SetNode.vue";
 import { vtkmodel } from "@/control/vtkModel.js";
-const changeModel= ()=>  {
+
+const changeModel = () => {
   vtkmodel.clearJgAddMode();
   vtkmodel.renderWindow.render();
+};
+let dialogtrue = ref();
+// 3D弹屏
+const Dclick = () => {
+  dialogtrue.value.dialoglog = true;
+  vtkmodel.selectNodes();
+  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,
+  classradio: String,
 });
 let sdialog = ref({
-    dialogVisiblenode: false,
-    dialogsgdelect: false,
-})
-let buntext = ref("")
+  dialogVisiblenode: false,
+  dialogsgdelect: false,
+});
+let buntext = ref("");
 const strResultFormatlist = reactive(
-
-    { id: 0, name: "灾情演化", value: ".vtk" },
-    { id: 1, name: "演化过程", value: ".mesh" }
+  { 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([])
+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)
+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: '边界出口',
-        },
-    ]
-
-})
+  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 ftableData = ref([]);
+const value = ref("");
 const dialog = ref({
-    dialogVisible: false,
+  dialogVisible: false,
 });
 const boun = ref({
-    collfire: false,
-    collwater: false,
+  collfire: false,
+  collwater: false,
 });
 // 节点选择
 const fireclick = () => {
-    pipelinedata('');
-}
+  pipelinedata("");
+};
 // 节点搜索
 function searchgd() {
-    pipelinedata(searchtaggd.value);
+  pipelinedata(searchtaggd.value);
 }
 
-
 // 节点分页查询
 const handleCurrentChange = (val) => {
-    pipelinedata(searchtaggd.value)
-}
+  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 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 = '';
-    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 = '';
-
-    }
-}
+  sdialog.value.dialogVisiblenode = false;
+  bformInline.value.nname = "";
+  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);
-        multipleSelection.value = selection[1];
-        return;
-    }
-    if (selection.length == 1) {
-        multipleSelection.value = selection;
-
-    } else if (selection.length == 0) {
-
-    }
-
-    // console.log(row)
-}
+  if (selection.length > 1) {
+    multipleTableRef.value.clearSelection();
+    multipleTableRef.value.toggleRowSelection(row, true);
+    multipleSelection.value = selection[1];
+    return;
+  }
+  if (selection.length == 1) {
+    multipleSelection.value = selection;
+  } else if (selection.length == 0) {
+  }
+
+  // console.log(row)
+};
 //边界添加前清空
 const bounadd = () => {
-    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 = '添加';
-    if (props.classradio == "Fire") {
-        bformInline.value.type = 'Pressure'
-    } else if (props.classradio == "Water") {
-        bformInline.value.type = '边界出口'
-    } else {
-
-    }
-
-}
+  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 = "添加";
+  if (props.classradio == "Fire") {
+    bformInline.value.type = "Pressure";
+  } else if (props.classradio == "Water") {
+    bformInline.value.type = "边界出口";
+  } else {
+  }
+};
 //修改
 const xiugai = () => {
-    buntext.value = '修改';
-    if (JSON.stringify(xiugaiobj.value) == '{}') {
-        ElMessage.error("你还没有选中修改的项目")
+  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 {
-        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
     }
-}
+    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) => {
-            addboundary(aid.value);
-
-        })
-        .catch((err) => {
-            ElMessage.error(err.returnMsg)
-        })
-}
+  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) => {
+      addboundary(aid.value);
+    })
+    .catch((err) => {
+      ElMessage.error(err.returnMsg);
+    });
+};
 // 边界数据的查询
 const addboundary = (valaid) => {
-
-    aid.value = valaid;
-    const params = {
-        transCode: 'D10007',
-        aid: aid.value,
-    }
-    request(params)
-        .then((res) => {
-            ftableData.value = res.rows;
-
-        })
-        .catch((err) => {
-            ElMessage.error(err.returnMsg)
-        })
-}
+  aid.value = valaid;
+  const params = {
+    transCode: "D10007",
+    aid: aid.value,
+  };
+  request(params)
+    .then((res) => {
+      ftableData.value = res.rows;
+    })
+    .catch((err) => {
+      ElMessage.error(err.returnMsg);
+    });
+};
 //火灾边界条件删除
 const handleDelete = (val) => {
-    console.log(val);
-    xiugaiobj.value = val;
-    bid.value = val.bid;
-    zqname.value = val.nname;
-
-}
+  console.log(val);
+  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 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';
-
-}
+  if (rowIndex % 2 != 0) {
+    return "evenRow";
+  }
+  return "oddRow";
+};
 // 弹出框
 const accident4 = (key) => {
-    if (key == '2') {
-        if (props.classradio == "Fire") {
-            boun.value.collfire = true;
-        } else if (props.classradio == "Water") {
-            boun.value.collwater = true;
-        } else {
-
-        }
-
+  if (key == "2") {
+    if (props.classradio == "Fire") {
+      boun.value.collfire = true;
+    } else if (props.classradio == "Water") {
+      boun.value.collwater = true;
     } else {
-        boun.value.collfire = false;
-        boun.value.collwater = false;
     }
-
-}
-onMounted(() => {
-});
-defineExpose({ boun, accident4, addboundary,changeModel });
+  } else {
+    boun.value.collfire = false;
+    boun.value.collwater = false;
+  }
+};
+onMounted(() => {});
+defineExpose({ boun, accident4, addboundary, changeModel });
 </script>
 
 <style lang="scss" scoped>
 .bounclass .flex_a {
-    display: flex;
-    justify-content: center;
-
+  display: flex;
+  justify-content: center;
 }
 
 .bmar .el-table__header {
-    margin: 0 !important;
+  margin: 0 !important;
 }
 
 .jc_padding .el-table tr {
-    height: 30px !important;
-    background: rgba(104, 173, 255, 0.3);
-    box-shadow: inset 0px 0px 17px 5px rgba(12, 97, 197, 0.2);
-    border-radius: 0px 0px 0px 0px;
-    border: 1px solid;
-    border-image: linear-gradient(180deg, rgba(31, 107, 255, 1), rgba(31, 107, 255, 0.48)) 1 1;
+  height: 30px !important;
+  background: rgba(104, 173, 255, 0.3);
+  box-shadow: inset 0px 0px 17px 5px rgba(12, 97, 197, 0.2);
+  border-radius: 0px 0px 0px 0px;
+  border: 1px solid;
+  border-image: linear-gradient(180deg, rgba(31, 107, 255, 1), rgba(31, 107, 255, 0.48)) 1
+    1;
 }
 
 .flex_a {
-    flex: 1;
-    padding: 0 19px;
+  flex: 1;
+  padding: 0 19px;
 }
 
 .padingcla .flex_a {
-    padding: 0 2px !important;
+  padding: 0 2px !important;
 }
 
 .btns {
-    width: 72px;
-    height: 30px;
-    background-image: url(../../assets/img/Rectangle399.png);
-    background-repeat: no-repeat;
-    line-height: 30px;
-    overflow: hidden;
-    margin: 10px 0;
-
-    .spantext {
-        font-weight: bold;
-        font-size: 12px;
-        color: #FFFFFF;
-        text-align: left;
-        font-style: normal;
-        text-transform: none;
-    }
+  width: 72px;
+  height: 30px;
+  background-image: url(../../assets/img/Rectangle399.png);
+  background-repeat: no-repeat;
+  line-height: 30px;
+  overflow: hidden;
+  margin: 10px 0;
+
+  .spantext {
+    font-weight: bold;
+    font-size: 12px;
+    color: #ffffff;
+    text-align: left;
+    font-style: normal;
+    text-transform: none;
+  }
 }
 
 .header_z {
-    box-shadow: none !important;
-    padding: 10px 20px !important;
+  box-shadow: none !important;
+  padding: 10px 20px !important;
 }
 
 .header_l {
-    line-height: 10px;
-    // height: 40px;
+  line-height: 10px;
+  // height: 40px;
+  text-align: left;
+  padding: 0 20px;
+  // border-bottom: 1px solid;
+  border-image: linear-gradient(180deg, rgba(31, 107, 255, 1), rgba(31, 107, 255, 0.48)) 1
+    1;
+  box-shadow: inset 0px 0px 17px 5px rgba(12, 97, 197, 0.2);
+  border-radius: 0px 0px 0px 0px;
+
+  .el-image {
+    padding: 10px 10px 0 0;
+  }
+
+  h4 {
+    font-weight: bold;
+    font-size: 12px;
+    color: #68adff;
+    line-height: 14px;
     text-align: left;
-    padding: 0 20px;
-    // border-bottom: 1px solid;
-    border-image: linear-gradient(180deg, rgba(31, 107, 255, 1), rgba(31, 107, 255, 0.48)) 1 1;
-    box-shadow: inset 0px 0px 17px 5px rgba(12, 97, 197, 0.2);
-    border-radius: 0px 0px 0px 0px;
-
-    .el-image {
-        padding: 10px 10px 0 0;
-    }
-
-    h4 {
-        font-weight: bold;
-        font-size: 12px;
-        color: #68ADFF;
-        line-height: 14px;
-        text-align: left;
-        font-style: normal;
-        text-transform: none;
-    }
-
+    font-style: normal;
+    text-transform: none;
+  }
 }
 
 .tianjia {
-    display: inline-block;
+  display: inline-block;
 }
 
 .jc_padding {
-    padding: 18px 10px;
+  padding: 18px 10px;
 }
 
 .line {
-    border-bottom: 1px solid rgba(255, 255, 255, 0.20);
-    box-sizing: border-box;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
+  box-sizing: border-box;
 }
 
 .L_aside {
-    .iconimg {
-        width: 37px;
-        height: 36px;
-        margin: 0 7px 0 24px;
+  .iconimg {
+    width: 37px;
+    height: 36px;
+    margin: 0 7px 0 24px;
+  }
+
+  .Frame2 {
+    background-image: url(../../assets/img/Frame2.png);
+    background-repeat: no-repeat;
+    background-position: center;
+  }
 
+  .el-collapse,
+  .el-collapse-item__header {
+    border: none;
+
+    ul li {
+      text-align: left;
     }
 
-    .Frame2 {
-        background-image: url(../../assets/img/Frame2.png);
-        background-repeat: no-repeat;
-        background-position: center;
+    .inputkuang {
+      height: 30px;
+      width: 100%;
+      background: rgba(13, 22, 57, 0.4);
+      position: relative;
+
+      .righttext {
+        display: inline-block;
+        position: absolute;
+        right: 10px;
+        top: 3px;
+        color: rgba($color: #ffffff, $alpha: 0.8);
+      }
     }
 
-    .el-collapse,
-    .el-collapse-item__header {
-        border: none;
-
-        ul li {
-            text-align: left;
-        }
-
-        .inputkuang {
-            height: 30px;
-            width: 100%;
-            background: rgba(13, 22, 57, 0.4);
-            position: relative;
-
-            .righttext {
-                display: inline-block;
-                position: absolute;
-                right: 10px;
-                top: 3px;
-                color: rgba($color: #FFFFFF, $alpha: 0.8);
-            }
-        }
-
-        .inputtext_1 {
-            font-weight: 400;
-            font-size: 13px;
-            color: #FFFFFF;
-            line-height: 14px;
-            text-align: left;
-            font-style: normal;
-            text-transform: none;
-            padding: 13px 0 7px 0;
-            display: inline-block;
-
-        }
+    .inputtext_1 {
+      font-weight: 400;
+      font-size: 13px;
+      color: #ffffff;
+      line-height: 14px;
+      text-align: left;
+      font-style: normal;
+      text-transform: none;
+      padding: 13px 0 7px 0;
+      display: inline-block;
     }
+  }
 }
 
 .ddd {
-    margin-top: 20px;
+  margin-top: 20px;
 
-    .ddd_div {
-        padding: 20px 0;
-        position: relative;
-    }
+  .ddd_div {
+    padding: 20px 0;
+    position: relative;
+  }
 
-    .class_btn {
-        position: absolute;
-        right: 0;
-        top: 21px;
+  .class_btn {
+    position: absolute;
+    right: 0;
+    top: 21px;
+  }
+
+  .header_l {
+    line-height: 10px;
+    // height: 40px;
+    text-align: left;
+    padding: 0 20px;
+    // border-bottom: 1px solid;
+    border-image: linear-gradient(180deg, rgba(31, 107, 255, 1), rgba(31, 107, 255, 0.48))
+      1 1;
+    box-shadow: inset 0px 0px 17px 5px rgba(12, 97, 197, 0.2);
+    border-radius: 0px 0px 0px 0px;
+
+    .el-image {
+      padding: 10px 10px 0 0;
     }
 
-    .header_l {
-        line-height: 10px;
-        // height: 40px;
-        text-align: left;
-        padding: 0 20px;
-        // border-bottom: 1px solid;
-        border-image: linear-gradient(180deg, rgba(31, 107, 255, 1), rgba(31, 107, 255, 0.48)) 1 1;
-        box-shadow: inset 0px 0px 17px 5px rgba(12, 97, 197, 0.2);
-        border-radius: 0px 0px 0px 0px;
-
-        .el-image {
-            padding: 10px 10px 0 0;
-        }
-
-        h4 {
-            font-weight: bold;
-            font-size: 12px;
-            color: #68ADFF;
-            line-height: 14px;
-            text-align: left;
-            font-style: normal;
-            text-transform: none;
-        }
+    h4 {
+      font-weight: bold;
+      font-size: 12px;
+      color: #68adff;
+      line-height: 14px;
+      text-align: left;
+      font-style: normal;
+      text-transform: none;
     }
+  }
 }
 
 .tianjia {
-    display: inline-block;
+  display: inline-block;
 }
 
 .el-dialog__title {
-    display: inline-block;
+  display: inline-block;
 }
 
 .bgcolor {
-    // width: 482px;
-    box-shadow: inset 0px 0px 17px 5px rgba(12, 97, 197, 0.2);
-    border-radius: 0px 0px 0px 0px;
-    border: 1px solid;
-    border-image: linear-gradient(180deg, rgba(31, 107, 255, 1), rgba(31, 107, 255, 0.48)) 1 1;
+  // width: 482px;
+  box-shadow: inset 0px 0px 17px 5px rgba(12, 97, 197, 0.2);
+  border-radius: 0px 0px 0px 0px;
+  border: 1px solid;
+  border-image: linear-gradient(180deg, rgba(31, 107, 255, 1), rgba(31, 107, 255, 0.48)) 1
+    1;
 }
 
 .dialog_class {
-    .my-header {
-        line-height: 10px;
-        height: 40px;
-        text-align: left;
-        padding: 0 20px;
-        border-bottom: 1px solid;
-        border-image: linear-gradient(180deg, rgba(31, 107, 255, 1), rgba(31, 107, 255, 0.48)) 1 1;
-        box-shadow: inset 0px 0px 17px 5px rgba(12, 97, 197, 0.2);
-        border-radius: 0px 0px 0px 0px;
-
-        .el-image {
-            padding: 10px 10px 0 0;
-        }
-
-        h4 {
-            font-weight: bold;
-            font-size: 12px;
-            color: #68ADFF;
-            line-height: 14px;
-            text-align: left;
-            font-style: normal;
-            text-transform: none;
-        }
-    }
+  .my-header {
+    line-height: 10px;
+    height: 40px;
+    text-align: left;
+    padding: 0 20px;
+    border-bottom: 1px solid;
+    border-image: linear-gradient(180deg, rgba(31, 107, 255, 1), rgba(31, 107, 255, 0.48))
+      1 1;
+    box-shadow: inset 0px 0px 17px 5px rgba(12, 97, 197, 0.2);
+    border-radius: 0px 0px 0px 0px;
 
-    .my_content {
-        width: 100%;
-        height: 90px;
-        box-shadow: inset 0px 0px 17px 5px rgba(12, 97, 197, 0.2);
-        border-radius: 0px 0px 0px 0px;
-        position: relative;
+    .el-image {
+      padding: 10px 10px 0 0;
+    }
 
-        .radio-group {
-            display: flex;
-            justify-content: center;
+    h4 {
+      font-weight: bold;
+      font-size: 12px;
+      color: #68adff;
+      line-height: 14px;
+      text-align: left;
+      font-style: normal;
+      text-transform: none;
+    }
+  }
 
-            .el-radio {
-                flex: 1;
-                justify-content: center;
-                font-weight: bold;
-                font-size: 12px;
-                color: #FFFFFF;
-                line-height: 14px;
+  .my_content {
+    width: 100%;
+    height: 90px;
+    box-shadow: inset 0px 0px 17px 5px rgba(12, 97, 197, 0.2);
+    border-radius: 0px 0px 0px 0px;
+    position: relative;
 
-            }
+    .radio-group {
+      display: flex;
+      justify-content: center;
 
-        }
+      .el-radio {
+        flex: 1;
+        justify-content: center;
+        font-weight: bold;
+        font-size: 12px;
+        color: #ffffff;
+        line-height: 14px;
+      }
     }
+  }
 
-    .el-dialog__footer {
-        position: absolute;
-        bottom: 17px;
-        display: flex;
+  .el-dialog__footer {
+    position: absolute;
+    bottom: 17px;
+    display: flex;
 
-        .footerbtn {
-            flex: 1;
-            text-align: center;
-        }
+    .footerbtn {
+      flex: 1;
+      text-align: center;
     }
+  }
 }
 
 .my_content1 {
-    .el-table .cell {
-        font-weight: 400;
-        font-size: 12px;
-        color: #FFFFFF !important;
-        line-height: 14px;
-        text-align: left;
-        font-style: normal;
-        text-transform: none;
-    }
-
+  .el-table .cell {
+    font-weight: 400;
+    font-size: 12px;
+    color: #ffffff !important;
+    line-height: 14px;
+    text-align: left;
+    font-style: normal;
+    text-transform: none;
+  }
 }
 
 .l_btn .borderimg {
-    width: 109px;
-    height: 30px;
-    background: rgba(104, 173, 255, 0.3);
-    box-shadow: inset 0px 0px 17px 5px rgba(12, 97, 197, 0.2);
-    /* border: 1px solid rgba(31, 107, 255, 1); */
-    border-image: linear-gradient(180deg, rgba(31, 107, 255, 1), rgba(31, 107, 255, 0.48)) 1 1;
-
-    border-radius: 4px;
-    display: flex;
-    display: inline-block;
-    box-sizing: border-box;
+  width: 109px;
+  height: 30px;
+  background: rgba(104, 173, 255, 0.3);
+  box-shadow: inset 0px 0px 17px 5px rgba(12, 97, 197, 0.2);
+  /* border: 1px solid rgba(31, 107, 255, 1); */
+  border-image: linear-gradient(180deg, rgba(31, 107, 255, 1), rgba(31, 107, 255, 0.48)) 1
+    1;
+
+  border-radius: 4px;
+  display: flex;
+  display: inline-block;
+  box-sizing: border-box;
 }
 
 .borderimg {
-    width: 109px;
-    height: 30px;
-    background: rgba(104, 173, 255, 0.3);
-    box-shadow: inset 0px 0px 17px 5px rgba(12, 97, 197, 0.2);
-    /* border: 1px solid rgba(31, 107, 255, 1); */
-    -o-border-image: linear-gradient(180deg, rgba(31, 107, 255, 1), rgba(31, 107, 255, 0.48)) 1 1;
-    border-image: linear-gradient(180deg, rgba(31, 107, 255, 1), rgba(31, 107, 255, 0.48)) 1 1;
-    border-radius: 4px;
-    display: flex;
-    display: inline-block;
-    box-sizing: border-box
+  width: 109px;
+  height: 30px;
+  background: rgba(104, 173, 255, 0.3);
+  box-shadow: inset 0px 0px 17px 5px rgba(12, 97, 197, 0.2);
+  /* border: 1px solid rgba(31, 107, 255, 1); */
+  -o-border-image: linear-gradient(
+      180deg,
+      rgba(31, 107, 255, 1),
+      rgba(31, 107, 255, 0.48)
+    )
+    1 1;
+  border-image: linear-gradient(180deg, rgba(31, 107, 255, 1), rgba(31, 107, 255, 0.48)) 1
+    1;
+  border-radius: 4px;
+  display: flex;
+  display: inline-block;
+  box-sizing: border-box;
 }
 
 .el-table,
 .el-table thead th {
-    background-color: rgba(13, 22, 57, 0.96) !important;
+  background-color: rgba(13, 22, 57, 0.96) !important;
 }
 
 .L_aside {
-    height: calc(100vh - 70px);
-    position: absolute;
-    top: 70px;
-    overflow: hidden;
+  height: calc(100vh - 70px);
+  position: absolute;
+  top: 70px;
+  overflow: hidden;
 }
 
 .el-form-item__label {
-    color: #FFFFFF !important;
+  color: #ffffff !important;
 }
 
 .asdis_btn {
-    display: flex;
-    margin-top: 9px;
+  display: flex;
+  margin-top: 9px;
 
-    .btn {
-        flex: 1;
-        width: 145px;
-        height: 54px;
-        background-image: url(../../assets/img/Rectangle5.png);
-        background-size: cover;
-        background-position-x: center !important;
-        line-height: 54px;
-
-        .spantext {
-            font-weight: bold;
-            font-size: 12px;
-            color: #FFFFFF;
-            text-align: center;
-            font-style: normal;
-            text-transform: none;
-
-        }
+  .btn {
+    flex: 1;
+    width: 145px;
+    height: 54px;
+    background-image: url(../../assets/img/Rectangle5.png);
+    background-size: cover;
+    background-position-x: center !important;
+    line-height: 54px;
+
+    .spantext {
+      font-weight: bold;
+      font-size: 12px;
+      color: #ffffff;
+      text-align: center;
+      font-style: normal;
+      text-transform: none;
     }
+  }
 }
 
-
-
 .jiancedian {
-    width: 380px;
-    position: absolute;
-    right: 0;
-    top: 70px;
-    box-shadow: inset 0px 0px 17px 5px rgba(12, 97, 197, 0.2);
-    border-radius: 4px 4px 4px 4px;
-    border: 1px solid;
-    border-image: linear-gradient(180deg, rgba(31, 107, 255, 1), rgba(31, 107, 255, 0.48)) 1 1;
+  width: 380px;
+  position: absolute;
+  right: 0;
+  top: 70px;
+  box-shadow: inset 0px 0px 17px 5px rgba(12, 97, 197, 0.2);
+  border-radius: 4px 4px 4px 4px;
+  border: 1px solid;
+  border-image: linear-gradient(180deg, rgba(31, 107, 255, 1), rgba(31, 107, 255, 0.48)) 1
+    1;
 }
 </style>
 
 <style>
 .leftbgimg2 .el-collapse-item__header {
-    background-image: url(../../assets/img/b1.png) !important;
-    background-size: cover;
-    background-position-x: center !important;
+  background-image: url(../../assets/img/b1.png) !important;
+  background-size: cover;
+  background-position-x: center !important;
 }
 
 .leftbgimg0 .el-collapse-item__header {
-    background-image: url(../../assets/img/b0.png) !important;
-    background-size: cover;
-    background-position-x: center !important;
+  background-image: url(../../assets/img/b0.png) !important;
+  background-size: cover;
+  background-position-x: center !important;
 }
 
 .xian {
-    border: 1px solid;
-    -o-border-image: linear-gradient(180deg, rgba(31, 107, 255, 1), rgba(31, 107, 255, 0.48)) 1 1;
-    border-image: linear-gradient(180deg, rgba(31, 107, 255, 1), rgba(31, 107, 255, 0.48)) 1 1;
-    box-shadow: inset 0px 0px 17px 5px rgba(12, 97, 197, 0.2);
-    border-radius: 0px 0px 0px 0px;
-    background-color: rgba(13, 22, 57, 0.4);
+  border: 1px solid;
+  -o-border-image: linear-gradient(
+      180deg,
+      rgba(31, 107, 255, 1),
+      rgba(31, 107, 255, 0.48)
+    )
+    1 1;
+  border-image: linear-gradient(180deg, rgba(31, 107, 255, 1), rgba(31, 107, 255, 0.48)) 1
+    1;
+  box-shadow: inset 0px 0px 17px 5px rgba(12, 97, 197, 0.2);
+  border-radius: 0px 0px 0px 0px;
+  background-color: rgba(13, 22, 57, 0.4);
 }
 
 .header_l {
-    position: relative;
+  position: relative;
 }
 
 .header_l .closeimg {
-
-    position: absolute;
-    top: 10px;
-    right: 0;
-
+  position: absolute;
+  top: 10px;
+  right: 0;
 }
 
-
 .leftbgimg2 .el-table tr {
-    height: 30px !important;
-    background: rgba(104, 173, 255, 0.3);
-    box-shadow: inset 0px 0px 17px 5px rgba(12, 97, 197, 0.2);
-    border-radius: 0px 0px 0px 0px;
-    border: 1px solid;
-    border-image: linear-gradient(180deg, rgba(31, 107, 255, 1), rgba(31, 107, 255, 0.48)) 1 1;
-
-
+  height: 30px !important;
+  background: rgba(104, 173, 255, 0.3);
+  box-shadow: inset 0px 0px 17px 5px rgba(12, 97, 197, 0.2);
+  border-radius: 0px 0px 0px 0px;
+  border: 1px solid;
+  border-image: linear-gradient(180deg, rgba(31, 107, 255, 1), rgba(31, 107, 255, 0.48)) 1
+    1;
 }
 
 .leftbgimg0 .el-table tr {
-    height: 30px !important;
-    background: rgba(104, 173, 255, 0.3);
-    box-shadow: inset 0px 0px 17px 5px rgba(12, 97, 197, 0.2);
-    border-radius: 0px 0px 0px 0px;
-    border: 1px solid;
-    border-image: linear-gradient(180deg, rgba(31, 107, 255, 1), rgba(31, 107, 255, 0.48)) 1 1;
-
-
+  height: 30px !important;
+  background: rgba(104, 173, 255, 0.3);
+  box-shadow: inset 0px 0px 17px 5px rgba(12, 97, 197, 0.2);
+  border-radius: 0px 0px 0px 0px;
+  border: 1px solid;
+  border-image: linear-gradient(180deg, rgba(31, 107, 255, 1), rgba(31, 107, 255, 0.48)) 1
+    1;
 }
 
 .font12 .el-table .cell {
-    font-size: 12px !important;
+  font-size: 12px !important;
 }
 
 .addye {
-    width: 100%;
-    box-shadow: inset 0px 0px 17px 5px rgba(12, 97, 197, 0.2);
-    border-radius: 0px 0px 0px 0px;
-    position: relative;
+  width: 100%;
+  box-shadow: inset 0px 0px 17px 5px rgba(12, 97, 197, 0.2);
+  border-radius: 0px 0px 0px 0px;
+  position: relative;
 }
-.log_class{
-    background-color: rgba(13, 22, 57, 0.96) !important;   
+.log_class {
+  background-color: rgba(13, 22, 57, 0.96) !important;
 }
 </style>
 
 <style>
 .inputtext_1 {
-    font-weight: 400;
-    font-size: 13px;
-    color: #FFFFFF;
-    line-height: 14px;
-    text-align: left;
-    font-style: normal;
-    text-transform: none;
-    padding: 13px 0 7px 0;
-    display: inline-block;
+  font-weight: 400;
+  font-size: 13px;
+  color: #ffffff;
+  line-height: 14px;
+  text-align: left;
+  font-style: normal;
+  text-transform: none;
+  padding: 13px 0 7px 0;
+  display: inline-block;
 }
 
 .input ul li {
-    text-align: left;
+  text-align: left;
 }
 
 .input .el-form-item__label {
-    color: #FFFFFF;
+  color: #ffffff;
 }
 
 .input .el-input__inner {
-    color: #FFFFFF;
+  color: #ffffff;
 }
 
 .foter_l .el-dialog__footer {
-    height: 40px;
+  height: 40px;
 }
 
 .addye .footer_div {
-    height: auto;
-    padding-bottom: 30px;
+  height: auto;
+  padding-bottom: 30px;
 }
 
 .Frame3 {
-    background-image: url(../../assets/img/Frame3.png);
-    background-repeat: no-repeat;
-    background-position: center;
+  background-image: url(../../assets/img/Frame3.png);
+  background-repeat: no-repeat;
+  background-position: center;
 }
 
 .guand_1 .asdis_btn {
-    margin-top: -9px !important;
+  margin-top: -9px !important;
 }
 
 .bou .el-table__header {
-    margin: 0 !important;
+  margin: 0 !important;
 }
-</style>
+</style>

+ 3 - 2
src/view/components/InfoDisaster.vue

@@ -591,7 +591,7 @@ import {
 } from "element-plus";
 import { Calendar, Search } from "@element-plus/icons-vue";
 import { c } from "@kitware/vtk.js/macros2";
-import selfdialogs from "./SetNode.vue";
+import selfdialogs from "./SetPipe.vue";
 import { vtkmodel } from "@/control/vtkModel.js";
 
 const changeModel= ()=>  {
@@ -686,7 +686,8 @@ const accident3 = (key) => {
 // 3D数据显示
 const Dtext=(val)=>{
   console.log(val);
-  selectstr.value=val.name
+  selectstr.value=val.name;
+  firepid.value=val.id;
 }
 // 3D弹屏
 const Dclick = () => {

+ 1 - 1
src/view/components/SetNode.vue

@@ -43,7 +43,7 @@ import { vtkmodel } from "@/control/vtkModel.js";
 let emit = defineEmits(['Dtext',])
 
 let dialoglog = ref(false);
-let texttitle = ref("管道信息");
+let texttitle = ref("节点信息");
 let msg = ref("内容");
 defineExpose({ dialoglog });
 let timing = ref(null);

+ 356 - 0
src/view/components/SetPipe.vue

@@ -0,0 +1,356 @@
+<template>
+  <div>
+    <el-dialog
+      width="300px"
+      v-model="dialoglog"
+      :modal="false"
+      :close-on-click-modal="false"
+      draggable
+      :fullscreen="false"
+      :modal-append-to-body="false"
+      modal-class="summary-dlg"
+      class="right log_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">{{ texttitle }}</h4>
+        </div>
+      </template>
+      <div>{{ msg }}</div>
+      <div class="dialog-footer footer_div l_btn">
+        <div class="footerbtn flex1">
+          <div class="borderimg">
+            <el-button @click="dialoglog = false">取消</el-button>
+          </div>
+        </div>
+        <div class="footerbtn flex1">
+          <div class="borderimg">
+            <el-button @click="textclick(); dialoglog = false"> 确定 </el-button>
+          </div>
+        </div>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+<script setup>
+import { ref, onMounted, onBeforeUnmount,reactive,onUnmounted } from "vue";
+import { RouterView, RouterLink } from "vue-router";
+import { request, uploadFile } from "@/utils/request";
+import { ElMessage, ElButton, ElDialog, ElSelect } from "element-plus";
+import icon from "@/assets/img/icon.png";
+import { vtkmodel } from "@/control/vtkModel.js";
+let emit = defineEmits(['Dtext',])
+
+let dialoglog = ref(false);
+let texttitle = ref("管道信息");
+let msg = ref("内容");
+defineExpose({ dialoglog });
+let timing = ref(null);
+//管道节点选择对象
+let selectObj =  ref(null);
+const textclick=()=>{
+  emit('Dtext',selectObj.value);
+}
+onBeforeUnmount(() => {
+  clearInterval(timing.value);
+});
+onMounted(() => {
+    jgSelect();
+});
+onUnmounted(() => {
+    clearInterval(timing.value);
+})
+//选择结果定时器
+function jgSelect(){
+    timing.value = setInterval(() => {//定时器
+    selectObj.value=vtkmodel.selectObj;
+    msg.value=selectObj.value;
+  }, 200);
+}
+
+</script>
+<style lang="scss" scoped>
+.vtk {
+  position: absolute;
+  z-index: 150;
+  top: 70px;
+}
+.jc_padding .el-table tr {
+  height: 30px !important;
+  background: rgba(104, 173, 255, 0.3);
+  box-shadow: inset 0px 0px 17px 5px rgba(12, 97, 197, 0.2);
+  border-radius: 0px 0px 0px 0px;
+  border: 1px solid;
+  border-image: linear-gradient(180deg, rgba(31, 107, 255, 1), rgba(31, 107, 255, 0.48)) 1
+    1;
+}
+
+.flex_a {
+  flex: 1;
+  padding: 0 19px;
+}
+
+.btns {
+  width: 72px;
+  height: 30px;
+  background-image: url(../../assets/img/Rectangle399.png);
+  background-repeat: no-repeat;
+  line-height: 30px;
+  overflow: hidden;
+  margin: 10px 0;
+
+  .spantext {
+    font-weight: bold;
+    font-size: 12px;
+    color: #ffffff;
+    text-align: left;
+    font-style: normal;
+    text-transform: none;
+  }
+}
+
+.header_z {
+  box-shadow: none !important;
+  padding: 10px 20px !important;
+}
+
+.header_l {
+  line-height: 10px;
+  text-align: left;
+  padding: 0 20px;
+  border-image: linear-gradient(180deg, rgba(31, 107, 255, 1), rgba(31, 107, 255, 0.48)) 1
+    1;
+  box-shadow: inset 0px 0px 17px 5px rgba(12, 97, 197, 0.2);
+  border-radius: 0px 0px 0px 0px;
+
+  .el-image {
+    padding: 10px 10px 0 0;
+  }
+
+  h4 {
+    font-weight: bold;
+    font-size: 12px;
+    color: #68adff;
+    line-height: 14px;
+    text-align: left;
+    font-style: normal;
+    text-transform: none;
+  }
+}
+
+.jc_padding {
+  padding: 18px 10px;
+}
+
+.line {
+  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
+  box-sizing: border-box;
+}
+
+.L_aside {
+  .iconimg {
+    width: 37px;
+    height: 36px;
+    margin: 0 7px 0 24px;
+  }
+}
+
+.ddd {
+  margin-top: 20px;
+
+  .ddd_div {
+    padding: 20px 0;
+    position: relative;
+  }
+
+  .class_btn {
+    position: absolute;
+    right: 0;
+    top: 21px;
+  }
+
+  .header_l {
+    line-height: 10px;
+    text-align: left;
+    padding: 0 20px;
+    border-image: linear-gradient(180deg, rgba(31, 107, 255, 1), rgba(31, 107, 255, 0.48))
+      1 1;
+    box-shadow: inset 0px 0px 17px 5px rgba(12, 97, 197, 0.2);
+    border-radius: 0px 0px 0px 0px;
+
+    .el-image {
+      padding: 10px 10px 0 0;
+    }
+
+    h4 {
+      font-weight: bold;
+      font-size: 12px;
+      color: #68adff;
+      line-height: 14px;
+      text-align: left;
+      font-style: normal;
+      text-transform: none;
+    }
+  }
+}
+
+.el-dialog__title {
+  display: inline-block;
+}
+
+.bgcolor {
+  box-shadow: inset 0px 0px 17px 5px rgba(12, 97, 197, 0.2);
+  border-radius: 0px 0px 0px 0px;
+  border: 1px solid;
+  border-image: linear-gradient(180deg, rgba(31, 107, 255, 1), rgba(31, 107, 255, 0.48)) 1
+    1;
+}
+
+.log_class {
+  .my-header {
+    line-height: 10px;
+    height: 40px;
+    text-align: left;
+    padding: 0 20px;
+    border-bottom: 1px solid;
+    border-image: linear-gradient(180deg, rgba(31, 107, 255, 1), rgba(31, 107, 255, 0.48))
+      1 1;
+    box-shadow: inset 0px 0px 17px 5px rgba(12, 97, 197, 0.2);
+    border-radius: 0px 0px 0px 0px;
+
+    .el-image {
+      padding: 10px 10px 0 0;
+    }
+
+    h4 {
+      font-weight: bold;
+      font-size: 12px;
+      color: #68adff;
+      line-height: 14px;
+      text-align: left;
+      font-style: normal;
+      text-transform: none;
+    }
+  }
+
+  .my_content {
+    width: 100%;
+    height: 90px;
+    box-shadow: inset 0px 0px 17px 5px rgba(12, 97, 197, 0.2);
+    border-radius: 0px 0px 0px 0px;
+    position: relative;
+
+    .radio-group {
+      display: flex;
+      justify-content: center;
+
+      .el-radio {
+        flex: 1;
+        justify-content: center;
+        font-weight: bold;
+        font-size: 12px;
+        color: #ffffff;
+        line-height: 14px;
+      }
+    }
+  }
+
+  .el-dialog__footer {
+    position: absolute;
+    bottom: 17px;
+    display: flex;
+
+    .footerbtn {
+      flex: 1;
+      text-align: center;
+    }
+  }
+}
+
+.my_content1 {
+  .el-table .cell {
+    font-weight: 400;
+    font-size: 12px;
+    color: #ffffff !important;
+    line-height: 14px;
+    text-align: left;
+    font-style: normal;
+    text-transform: none;
+  }
+}
+
+.l_btn .borderimg {
+  width: 70px;
+  height: 30px;
+  font-size: 12px;
+  background: rgba(104, 173, 255, 0.3);
+  box-shadow: inset 0px 0px 17px 5px rgba(12, 97, 197, 0.2);
+  /* border: 1px solid rgba(31, 107, 255, 1); */
+  border-image: linear-gradient(180deg, rgba(31, 107, 255, 1), rgba(31, 107, 255, 0.48)) 1
+    1;
+  font-weight: bold;
+  border-radius: 4px;
+  display: flex;
+  display: inline-block;
+  box-sizing: border-box;
+}
+
+.borderimg {
+  width: 109px;
+  height: 30px;
+  background: rgba(104, 173, 255, 0.3);
+  box-shadow: inset 0px 0px 17px 5px rgba(12, 97, 197, 0.2);
+  /* border: 1px solid rgba(31, 107, 255, 1); */
+  -o-border-image: linear-gradient(
+      180deg,
+      rgba(31, 107, 255, 1),
+      rgba(31, 107, 255, 0.48)
+    )
+    1 1;
+  border-image: linear-gradient(180deg, rgba(31, 107, 255, 1), rgba(31, 107, 255, 0.48)) 1
+    1;
+  border-radius: 4px;
+  display: flex;
+  display: inline-block;
+  box-sizing: border-box;
+}
+
+.el-table,
+.el-table thead th {
+  background-color: rgba(13, 22, 57, 0.96) !important;
+}
+
+.L_aside {
+  height: calc(100vh - 70px);
+  position: absolute;
+  top: 70px;
+  overflow: hidden;
+}
+
+.el-form-item__label {
+  color: #ffffff !important;
+}
+
+.jiancedian {
+  width: 380px;
+  position: absolute;
+  right: 0;
+  top: 70px;
+  box-shadow: inset 0px 0px 17px 5px rgba(12, 97, 197, 0.2);
+  border-radius: 4px 4px 4px 4px;
+  border: 1px solid;
+  border-image: linear-gradient(180deg, rgba(31, 107, 255, 1), rgba(31, 107, 255, 0.48)) 1
+    1;
+}
+</style>
+<style>
+.log_class {
+  background-color: rgba(13, 22, 57, 0.96) !important;
+}
+.right {
+  right: 0px;
+  position: absolute;
+  top: -7vh;
+}
+</style>