12.20

src/style/style.css

@@ -2103,7 +2103,7 @@ background-color: #52C6FF  !important;
 /* background-image: linear-gradient(to top, #41c0ff,#1D86E5, #00ABFF,#52C6FF) ; */
 }
 .jcshijian{
-  margin-top: 20px;
+  margin-top: .1042rem;
 }
 .zongji .img4{
   flex: 1;

src/view/appmian.vue

@@ -45,8 +45,10 @@
    
     </div>
     </div>
-    <div class="vtkmodel1" id="infomodel" v-show="modelshow"><InfoVtkmodel ref="vtkmodel" /></div>
-     
+    <div class="vtkmodel1" id="infomodel" v-show="modelshow"><InfoVtkmodel ref="vtkmodel" />
+    
+    </div>
+    <tool  v-show="modelshow"></tool>
       </el-main>
       <div class=" bgk3" v-show="bgk2false">
         <div class="bgk4"></div>
@@ -106,6 +108,7 @@ import SourceDisaster from "./components/InfoDisaster.vue";
 import InfoBoundary from "./components/InfoBoundary.vue";
 import InfoAnimation from "./components/InfoAnimation.vue";
 import InfoVtkmodel from "./components/InfoVtkmodel.vue";
+import tool from "./components/tool.vue";
 // import configurator  from "./components/configurator.vue"
 import reheader  from "@/components/header.vue"
 import result from "./result.vue";

src/view/components/tool.vue

@@ -0,0 +1,121 @@
+<template>
+    <!-- 工具栏 -->
+    <div class="vktool">
+      <ul>
+        <li class="list" v-for="(item,index) in toolarr" :key="index" @click="clicklist(index)">{{ item.name }}</li>
+      </ul>
+      <div>
+        <el-checkbox v-model="checked1" label="巷道" size="large" />
+        <el-checkbox v-model="checked2" label="灾源" size="large" />
+  </div>
+    </div>
+  </template>
+  <script setup>
+  import { ref, onMounted, reactive } from "vue";
+  import { RouterView, RouterLink } from "vue-router";
+  import { request, uploadFile } from "@/utils/request";
+  import { vtkmodel } from "@/control/vtkModel.js";
+
+  
+  onMounted(() => {
+
+  });
+  let checked1=ref(false);
+  let checked2=ref(false);
+  let toolarr=ref([
+    {
+      name:'X+'
+    },
+    {
+      name:'X-'
+    },
+    {
+      name:'Y+'
+    },
+    {
+      name:'Y-'
+    },
+    {
+      name:'Z+'
+    },
+    {
+      name:'Z-'
+    },
+    {
+      name:'复位'
+    },
+  ])
+ 
+   const clicklist=(index)=>{
+   switch(index){
+    case 0:
+    vtkmodel.x_up();
+    break;
+    case 1:
+    vtkmodel.x_down();
+    break;
+    case 2:
+    vtkmodel.y_up();
+    break;
+    case 3:
+    vtkmodel.y_down();
+    break;
+    case 4:
+    vtkmodel.z_up();
+    break;
+    case 5:
+    vtkmodel.z_down();
+    break;
+    case 6:
+    vtkmodel.xyz_back();
+    break;
+    default:
+
+   }
+   }
+  
+  </script>
+  <style scoped>
+.vktool{
+    position: absolute;
+    top: 90px;
+    left: 30%;
+    z-index: 200;
+    
+  }
+  .vktool ul{
+    display: flex;
+  }
+  .vktool .list{
+ 
+    font-size: 14px;
+    text-align: center;
+    color: #fff;
+    /* line-height: 30px; */
+    background-color: rgba(61, 219, 252, 0.20) !important;
+    position: relative;
+    margin-left: 5px;
+    padding: 3px 6px;
+  
+  
+  }
+  .vktool .list::before {
+      content: " ";
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 200%;
+      height: 200%;
+      border: 1px solid rgba(61, 219, 252, 1);
+      transform-origin: 0 0;
+      transform: scale(0.5);
+  }
+
+  </style>
+  <style>
+  
+  .vktool .el-checkbox.el-checkbox--large .el-checkbox__label{
+      color: #fff !important;
+    }
+  </style>
+