交付前的最后版本

public/index.html

@@ -17,4 +17,5 @@
   </body>
 </html>
 <style>
+
 </style>

src/router/index.js

@@ -5,9 +5,34 @@ const router = new VueRouter({
     routes:[
         {
           path:"/",
+          name:'homePage',
+          component:() => import('../views/page')
+        },
+        {
+          path:"/mainPage",
+          name:'mainPage',
+          component:() => import('../views/page/mainPage')
+        },
+        {
+          path:"/simulationSystem",
+          name:'simulationSystem',
+          component:() => import('../views/page/simulationSystem')
+        },
+        {
+          path:"/technicalIndicator",
+          name:'technicalIndicator',
+          component:() => import('../views/page/technicalIndicator')
+        },
+        {
+          path:"/assessmentSystem",
+          name:'assessmentSystem',
+          component:() => import('../views/page/assessmentSystem')
+        },
+        {
+          path:"/3dDemo",
+          name:'threeDemo',
           component:() => import('../views/3dDemo')
-          // component:() => import('../views/newDemo')
-        }
+        },
     ]
 })
 export default router

src/views/3dDemo/index.vue

@@ -34,6 +34,7 @@
         <p v-for="(item, index) in senceInfo" :key="index">{{ item }}</p>
       </div>
       <div class="tool">
+        <button class="btn" style="width: 120px;" @click="goback">返 回 上 一 级</button>
         <el-select v-model="fileName" :disabled="selectDisabled" placeholder="请选择文件" @change="getFileContext">
           <el-option v-for="item in fileList" :key="item.value" :label="item.label" :value="item.value"> </el-option>
         </el-select>
@@ -202,6 +203,8 @@ export default {
   },
   mounted() {
     this.getFile()
+    this.fileName=this.$route.params.fileName
+    this.getFileContext()
     this.initContainer()
     this.initSmall()
     this.initOrbitControls()
@@ -209,6 +212,12 @@ export default {
     this.createWave()
     this.waveModel()
   },
+  beforeDestroy() {
+    window.removeEventListener('mousemove', this.onMouseMove);
+    this.clearSence()
+    cancelAnimationFrame(this.animationId);
+    
+  },
   methods: {
     getFile() {
       this.$axios.get(`/api/`).then((res) => {
@@ -230,6 +239,17 @@ export default {
       containerWidth = document.getElementById('container').clientWidth
       containerHeight = document.getElementById('container').clientHeight
     },
+    goback(){
+      window.removeEventListener('mousemove', this.onMouseMove);
+      this.isAnimation = false
+      cancelAnimationFrame(this.animationId);
+      this.renderer.dispose();
+      this.renderer.forceContextLoss();
+      this.renderer.content = null;
+      this.renderer = null;
+      this.clearSence()
+      this.$router.push({ name:'simulationSystem'})
+    },
     // 初始化场景
     initContainer() {
       let container = this.$refs.box
@@ -365,6 +385,7 @@ export default {
     },
     // 动画
     animate(modelInfo) {
+      console.log("222");
       if (this.isAnimation) {
         setTimeout(() => {
           this.animationId = requestAnimationFrame(() => this.animate(modelInfo))
@@ -372,7 +393,7 @@ export default {
           // 渲染场景
           this.tween?.update()
           // this.tween1?.update();
-          this.renderer.render(scene, camera)
+          this.renderer?.render(scene, camera)
           this.smallRenderer.render(sceneSmall, camera)
         }, 150)
       }
@@ -603,6 +624,10 @@ export default {
       }
     },
     getFileContext() {
+      if(!this.fileName){
+        this.$message.warning('请手动选择回放的数据')
+        return
+      }
       const data = { fileName: this.fileName }
       this.$axios.post('/api/fileContent', data).then((res) => {
         // console.log("11",res);
@@ -649,7 +674,7 @@ export default {
       const rawData = rawData1.filter((item, index) => {
         return index % 10 === 0 || item[1].events.length !== 0 || item[1].report
       })
-      console.log('rawData', rawData)
+      // console.log('rawData', rawData)
       const color = [0xc1232b, 0x5470c6, 0xfac858, 0xee6666]
       this.models = []
       this.allTimes = []
@@ -748,7 +773,6 @@ export default {
         target.coordinate.push([targetX - beginCoordinate[0], targetY - beginCoordinate[1]])
         maxData = Math.max(targetX, targetY, maxData)
       })
-      console.log('rawDatarawDatarawDatarawData', rawData)
       this.maxNum = Math.ceil(maxData)
       this.models = [].concat(...[Object.values(agents), target])
 
@@ -794,8 +818,8 @@ export default {
       }
     },
     showDistance(time, name) {
-      const filterData = this.distance[name].filter((item) => item[0] <= parseFloat(time))
-      if (filterData.length !== this.propsDistance[name].length) {
+      const filterData = this.distance[name]?.filter((item) => item[0] <= parseFloat(time))
+      if (filterData?.length !== this.propsDistance[name]?.length) {
         this.propsDistance[name] = filterData
       }
       //console.log('propsDistance', this.propsDistance)
@@ -956,7 +980,7 @@ export default {
   justify-content: space-around;
 }
 .one {
-  background: url('../../assets/武器速度.jpg') center no-repeat;
+  background: url('../../assets/鱼雷速度.png') center no-repeat;
 }
 
 .two {
@@ -1047,7 +1071,7 @@ export default {
   font-family: Simsun;
 }
 .tool {
-  width: 1000px;
+  width: 1100px;
   height: 80px;
   line-height: 80px;
   position: absolute;

src/views/page/assessmentSystem.vue

@@ -0,0 +1,216 @@
+<template>
+  <div class="bigBox">
+    <div class="top">
+      <el-button icon="el-icon-arrow-left" style="margin: 20px;" @click="goback">返回上一级</el-button>
+      <h2 style="font-size: 42px;color: #0f0f0f;display: inline-block;margin: 0;">评估系统</h2>
+    </div>
+    <div class="main">
+      <div class="mainLeft">
+        <el-form ref="form" :model="form" label-width="150px">
+         <el-form-item label="智能化等级标准" prop="standard">
+           <el-select v-model="form.standard" placeholder="请选择标准" @change="handleStandard">
+             <el-option label="标准一" value="one"></el-option>
+             <el-option label="标准二" value="two"></el-option>
+             <el-option label="标准三" value="three"></el-option>
+           </el-select>
+           <span class="check" id="check" style="display: none;" @click="handleCheck">查看</span>
+         </el-form-item>
+         <el-form-item label="评估技术" prop="region">
+           <el-select v-model="form.region" placeholder="请选择评估技术" >
+             <el-option label="技术一" value="one"></el-option>
+             <el-option label="技术二" value="two"></el-option>
+             <el-option label="技术三" value="three"></el-option>
+           </el-select>
+         </el-form-item>
+         <el-form-item label="评估数据">
+           <el-upload
+             class="upload-demo"
+             drag
+             action=""
+             :on-preview="handlePreview"
+             :on-remove="handleRemove"
+             :before-remove="beforeRemove"
+             accept=".xlsx,.xls"
+             multiple
+             :file-list="fileList">
+             <i class="el-icon-upload"></i>
+             <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
+             <div slot="tip" class="el-upload__tip">只能上传.xlsx,.xls文件，且不超过5MB</div>
+           </el-upload>
+         </el-form-item>
+         <el-form-item>
+           <el-button type="primary" @click="onSubmit">开始评估</el-button>
+           <el-button  @click="resetForm('form')">重置</el-button>
+         </el-form-item>
+        </el-form>
+      </div>
+      <div class="mainRight">
+        <el-card class="box-card">
+          <div slot="header" class="clearfix">
+            <span>内容标题</span>
+          </div>
+          <p>内容</p>
+        </el-card>
+      </div>
+    </div>
+    <el-dialog
+      title="标准信息"
+      :visible.sync="checkDialogVisible"
+      width="800px">
+      <span>这是一段等级标准信息</span>
+      <span slot="footer" class="dialog-footer">
+        <el-button @click="checkDialogVisible = false">取 消</el-button>
+        <el-button type="primary" @click="checkDialogVisible = false">确 定</el-button>
+      </span>
+    </el-dialog>
+    <el-dialog
+      title="评估报告"
+      :visible.sync="beginDialogVisible"
+      width="800px">
+      <span>这是一段评估报告</span>
+      <span slot="footer" class="dialog-footer">
+        <el-button @click="beginDialogVisible = false">取 消</el-button>
+        <el-button type="primary" @click="beginDialogVisible = false">确 定</el-button>
+      </span>
+    </el-dialog>
+    <div class="transparent">
+      <el-dialog
+        :visible.sync="progressnDialogVisible"
+        :show-close="false"
+        :modal="false"
+        :close-on-click-modal="false"
+        custom-class="custom-progress-dialog"
+        width="300px">
+        <el-progress :width="200"  type="circle" :percentage="progress"></el-progress>
+      </el-dialog>
+    </div>
+
+  </div>
+</template>
+<script>
+export default {
+  name:'assessmentSystem',
+  data() {
+    return {
+      form: {
+        name: '',
+        region: '',
+        standard:'',
+      },
+      fileList:[],
+      checkDialogVisible:false,
+      beginDialogVisible:false,
+      progressnDialogVisible:false,
+      progress: 0,
+      timer: null,
+      // rules: {
+      //   standard: [
+      //     { required: true, message: '请选择等级标准', trigger: 'change', }
+      //   ],
+      //   region: [
+      //     { required: true, message: '请选择评估技术', trigger: 'change' }
+      //   ],
+      // }
+    }
+  },
+  beforeDestroy() {
+    if (this.timer) {
+      clearInterval(this.timer);
+    }
+  },
+  methods:{
+    goback(){
+      this.$router.push({ name:'mainPage' })
+    },
+    onSubmit() {
+      this.progressnDialogVisible=true
+      this.timer = setInterval(() => {
+        if (this.progress >= 100) {
+          this.progressnDialogVisible=false
+          clearInterval(this.timer); // 进度到达100%时停止定时器
+          this.progress=0
+          this.beginDialogVisible=true
+        } else {
+          this.progress += 10; // 每次增加1%
+        }
+      }, 200);
+    },
+    resetForm(formName) {
+      this.$refs[formName].resetFields();
+    },
+    handleRemove(file, fileList) {
+      console.log(file, fileList);
+    },
+    handlePreview(file) {
+      console.log(file);
+    },
+    beforeRemove(file, fileList) {
+      return this.$confirm(`确定移除 ${ file.name }？`);
+    },
+    handleStandard(val){
+      var checkSpan = document.getElementById("check");
+      if (this.form.standard === "") {
+        checkSpan.style.display = "none";
+      }else{
+        checkSpan.style.display = "inline-block";
+      }
+    },
+    handleCheck(){
+      this.checkDialogVisible=true
+    }
+  },
+}
+</script>
+<style scoped>
+.bigBox{
+  width: 1920px;
+  height: 1080px;
+  position: absolute;
+  left: 1920px;
+  top: 0;
+  background-color: white;
+  box-sizing: border-box;
+}
+.main{
+  padding: 20px 100px;
+  width: 100%;
+  height: calc(100% - 80px);
+  display: flex;
+  justify-content: space-between;
+  box-sizing: border-box;
+}
+.mainLeft{
+  width: 30%;
+}
+.mainRight{
+  width: 30%;
+  height: 100%;
+}
+.box-card {
+  width: 480px;
+  min-height: 400px;
+}
+::v-deep(.el-form-item__label){
+    font-weight: 700;
+}
+.check{
+  margin-left: 15px;
+  color: blue;
+  cursor: pointer;
+  text-decoration: underline;
+}
+.transparent  /deep/ .el-dialog__body{
+  background-color: #fff0;
+  border: 0;
+}
+.transparent  /deep/ .el-dialog{
+  background: #fff0;
+  border: 0;
+  box-shadow:none
+}
+.transparent /deep/ .el-dialog__wrapper{
+  background:#fff0;
+}
+
+</style>
+  

src/views/page/index.vue

@@ -0,0 +1,68 @@
+<template>
+  <div class="bigBox">
+    <div class="box">
+        <p class="title">深海智能鱼雷</p>
+        <p class="title" style="margin: 30px 0px;">智能化技术演示平台</p>
+        <p class="version">1.0版</p>
+        <router-link to="/mainPage">
+            <el-button type="primary">进入主程序</el-button>
+        </router-link>
+        
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  name:'homePage',
+  data() {
+    return {
+        fu:''
+    }
+  },
+  mounted(){
+    
+  },
+  computed:{
+
+  },
+  methods:{
+    goMainPage(){
+        
+    }
+  },
+}
+</script>
+<style scoped>
+*{
+  box-sizing: border-box;
+}
+.bigBox{
+  width: 1920px;
+  height: 1080px;
+  position: absolute;
+  left: 1920px;
+  top: 0;
+  /* background-color: white; */
+  background-image: url('/public/homeImg.jpg');
+  background-repeat: no-repeat;
+  background-size: 1920px 1080px;
+  background-position: center top;
+  text-align: center;
+}
+.box{
+    width: 100%;
+    height: 100%;
+    padding-top: 250px;
+}
+.title{
+    font-size: 108px;
+    font-family: STXinwei;
+    color: #57d0f5;
+}
+.version{
+    font-size: 30px;
+    margin-bottom: 180px;
+    color:white
+}
+
+</style>

src/views/page/mainPage.vue

@@ -0,0 +1,118 @@
+<template>
+    
+  <div class="bigBox">
+    <el-button icon="el-icon-arrow-left" style="margin: 20px;" @click="goback">返回上一级</el-button>
+    <div class="btn">
+      <div class="box left" @click="goSimulation">仿真系统</div>
+      <div class="box center" @click="goTechnicalIndicator">技术指标体系</div>
+      <div class="box right" @click="goAssessmentSystem">评估系统</div>
+    </div>
+    
+  </div>
+</template>
+<script>
+export default {
+  name:'mainPage',
+  data() {
+    return {
+    }
+  },
+  mounted(){
+  },
+  computed:{
+
+  },
+  methods:{
+    goSimulation(){
+      this.$router.push({ name:'simulationSystem' })
+    },
+    goback(){
+      this.$router.push({ name:'homePage' })
+    },
+    goTechnicalIndicator(){
+      this.$router.push({ name:'technicalIndicator' })
+    },
+    goAssessmentSystem(){
+      this.$router.push({ name:'assessmentSystem' })
+    }
+  },
+}
+</script>
+<style scoped>
+.bigBox{
+  width: 1920px;
+  height: 1080px;
+  position: absolute;
+  left: 1920px;
+  top: 0;
+  /* background-color: white; */
+  background-image: url('/public/homeImg.jpg');
+  background-repeat: no-repeat;
+  background-size: 1920px 1080px;
+  background-position: center top;
+  box-sizing:border-box;
+  /* text-align: center; */
+  
+}
+.btn{
+  width: 100%;
+  height: calc(100% - 80px);
+  display: flex;
+  justify-content: space-evenly;
+  align-items: center;
+}
+.box{
+  width: 25%;
+  height: 200px;
+  /* border: 1px solid #000; */
+  border-radius: 20px;
+  /* box-shadow: 0 0 5px 1px #999; */
+  box-shadow: inset 0 0 40px 5px #aaa;
+  background-color: white;
+  text-align: center;
+  font-size: 60px;
+  line-height: 185px;
+}
+.left{
+  color: #00f;
+}
+.center{
+  color: #0f0;
+}
+.right{
+  color: #f00;
+}
+.box {
+  background: #eceff7;
+  /* 创建渐变 */
+  background-image: -webkit-linear-gradient(top, #eceff7, #274eab);
+  background-image: -moz-linear-gradient(top, #eceff7, #274eab);
+  background-image: -ms-linear-gradient(top, #eceff7, #274eab);
+  background-image: -o-linear-gradient(top, #eceff7, #274eab);
+  background-image: linear-gradient(to bottom, #eceff7, #274eab);
+  /* 给按钮添加圆角 */
+  -webkit-border-radius: 28;
+  -moz-border-radius: 28;
+  border-radius: 28px;
+  text-shadow: 3px 2px 1px #9daef5;
+  -webkit-box-shadow: 6px 5px 24px #666666;
+  -moz-box-shadow: 6px 5px 24px #666666;
+  box-shadow: 6px 5px 24px #666666;
+  font-family: Arial;
+  color: #fafafa;
+  /* font-size: 27px; */
+  /* padding: 19px; */
+  text-decoration: none;
+}
+/* 悬停样式 */
+.box:hover {
+  background: #274eab;
+  background-image: -webkit-linear-gradient(top, #274eab, #eceff7);
+  background-image: -moz-linear-gradient(top, #274eab, #eceff7);
+  background-image: -ms-linear-gradient(top, #274eab, #eceff7);
+  background-image: -o-linear-gradient(top, #274eab, #eceff7);
+  background-image: linear-gradient(to bottom, #274eab, #eceff7);
+  text-decoration: none;
+}
+</style>
+  

src/views/page/simulationSystem.vue

@@ -0,0 +1,717 @@
+<template>
+  <div class="bigBox">
+    <div class="top">
+      <el-button icon="el-icon-arrow-left" style="margin: 20px;" @click="goback">返回上一级</el-button>
+      <h2 style="font-size: 42px;color: #0f0f0f;display: inline-block;margin: 0;">仿真系统</h2>
+    </div>
+    <div class="main">
+      <div class="mainTop">
+        <el-radio-group v-model="radio" @change="changeRadio">
+          <el-radio :label="1" border><span class="radioText">数学仿真</span></el-radio>
+          <el-radio :label="2" border><span class="radioText">数实仿真</span></el-radio>
+          <el-radio :label="3" border><span class="radioText">数据回放</span></el-radio>
+        </el-radio-group>
+      </div>
+      <el-divider content-position="left">参数设置</el-divider>
+      <!-- sxfz:数学仿真、ssfz：数实仿真 -->
+      <div class="mainCenter">
+        <div class="mainCenterTop">
+          <div class="mainCenterTopLeft">
+            <el-card class="box-card" :shadow="form.mathFZ?'never':'always'">
+              <span :class="[form.mathFZ ? 'disabledColor' :'normalColor']">基础参数</span>
+              <el-form ref="form"  :model="form" label-width="90px" size="small" :disabled="form.mathFZ" :class="[form.mathFZ ? 'labelColor' :'']">
+                  <el-form-item label="仿真名称：">
+                    <el-input v-model="form.FZname" placeholder="格式：环境-作战目标-序号"></el-input>
+                  </el-form-item>
+                  <el-form-item label="海洋环境：">
+                    <div class="seaEnv">
+                      <el-row>
+                        <el-col :span="13">
+                          <el-form-item label="海洋深度" label-width="80px" >
+                            <el-input v-model="form.deep" placeholder="请输入海深(范围：0-1200m)" @change="seaDeepChange"></el-input>
+                            <span class="spanStyle">(m)</span>
+                            <span style="margin-left: 10px;color: blue;text-decoration:underline; cursor: pointer;" @click="setSeaDeep">设置</span>
+                          </el-form-item>
+                        </el-col>
+                        <el-col :span="11">
+                          <el-form-item label="海洋地质" label-width="80px" >
+                           <el-select v-model="form.geology" placeholder="请选择海洋地质">
+                             <el-option label="泥沙" value="泥沙"></el-option>
+                             <el-option label="砾石" value="砾石"></el-option>
+                             <el-option label="砂岩" value="砂岩"></el-option>
+                             </el-select>
+                          </el-form-item>
+                        </el-col>
+                      </el-row>
+                      <el-row>
+                        <el-col :span="13">
+                          <el-form-item label="海况等级" label-width="80px" >
+                           <el-select v-model="form.grade" placeholder="请选择海况等级">
+                             <el-option label="1级" value="1"></el-option>
+                             <el-option label="2级" value="2"></el-option>
+                             <el-option label="3级" value="3"></el-option>
+                             <el-option label="4级" value="4"></el-option>
+                             <el-option label="5级" value="5"></el-option>
+                             <el-option label="6级" value="6"></el-option>
+                             </el-select>
+                          </el-form-item>
+                        </el-col>
+                        <el-col :span="11">
+                          <el-form-item label="声速剖面" label-width="80px" >
+                           <el-select v-model="form.profile" placeholder="请选择声速剖面">
+                             <el-option label="典型深海梯度剖面" value="典型深海梯度剖面"></el-option>
+                             <el-option label="正梯度剖面" value="正梯度剖面"></el-option>
+                             <el-option label="负梯度剖面" value="负梯度剖面"></el-option>
+                             </el-select>
+                          </el-form-item>
+                        </el-col>
+                      </el-row>
+                    </div>
+                  </el-form-item>
+                  <el-form-item label="洋流环境：">
+                    <div class="seaEnv">
+                      <el-row>
+                        <el-form-item label="是否有洋流" label-width="100px">
+                          <el-radio-group v-model="form.yangLiu">
+                            <el-radio label="是"></el-radio>
+                            <el-radio label="否"></el-radio>
+                          </el-radio-group>
+                        </el-form-item>
+                      </el-row>
+                      <el-row>
+                        <el-col :span="12">
+                          <el-form-item label="深度" label-width="80px">
+                            <el-input v-model="form.yangLiuDeep" placeholder="请输入洋流深度" :disabled="form.yangLiu=='否'" ></el-input>
+                            <span class="spanStyle">(m)</span>
+                          </el-form-item>
+                        </el-col>
+                        <el-col :span="12">
+                          <el-form-item label="速度" label-width="80px" >
+                            <el-input v-model="form.yangLiuSpeed" placeholder="请输入洋流速度" :disabled="form.yangLiu=='否'"></el-input>
+                            <span class="spanStyle">(m/s)</span>
+                          </el-form-item>
+                        </el-col>
+                      </el-row>
+                      <el-row>
+                        <el-col :span="12">
+                          <el-form-item label="厚度" label-width="80px" >
+                            <el-input v-model="form.yangLiuThickness" placeholder="请输入洋流厚度" :disabled="form.yangLiu=='否'"></el-input>
+                            <span class="spanStyle">(m)</span>
+                          </el-form-item>
+                        </el-col>
+                        <el-col :span="12">
+                          <el-form-item label="方向" label-width="80px" >
+                            <el-input v-model="form.yangLiuDirection" placeholder="请输入洋流方向" :disabled="form.yangLiu=='否'"></el-input>
+                          </el-form-item>
+                        </el-col>
+                      </el-row>
+                    </div>
+                  </el-form-item>
+                  <el-row>
+                    <el-col :span="12">
+                      <el-form-item label="任务雷数：">
+                        <el-select v-model="form.number" placeholder="请选择任务雷数">
+                          <el-option label="1" value="1"></el-option>
+                          <el-option label="2" value="2"></el-option>
+                          <el-option label="3" value="3"></el-option>
+                          <el-option label="4" value="4"></el-option>
+                        </el-select>
+                        <span class="spanStyle">(条)</span>
+                      </el-form-item>
+                    </el-col>
+                    <el-col :span="12">
+                      <el-form-item label="发射时间间隔：" label-width="120px" >
+                        <el-input v-model="form.time" placeholder="请输入雷的发射时间间隔"></el-input>
+                        <span class="spanStyle">(s)</span>
+                      </el-form-item>
+                    </el-col>
+                  </el-row>
+                  <el-form-item label="作战任务：">
+                    <el-radio-group v-model="form.task">
+                      <el-radio label="反潜"></el-radio>
+                      <el-radio label="反舰"></el-radio>
+                    </el-radio-group>
+                  </el-form-item>
+              </el-form>
+            </el-card>
+            <el-card class="box-card" style="margin-top: 20px;" :shadow="form.mathFZ?'never':'always'">
+              <span :class="[form.mathFZ ? 'disabledColor' :'normalColor']">信息簇参数</span>
+              <el-form ref="form" :model="form" label-width="100px" size="small" :disabled="form.mathFZ" :class="[form.mathFZ ? 'labelColor' :'']">
+                <el-row>
+                  <el-col :span="12">
+                    <el-form-item label="有无信息簇：">
+                      <el-radio-group v-model="form.infoCluster">
+                        <el-radio label="有"></el-radio>
+                        <el-radio label="无"></el-radio>
+                      </el-radio-group>
+                    </el-form-item>
+                  </el-col>
+                  <el-col :span="12">
+                    <el-form-item label="更新周期：">
+                      <el-input v-model="form.updateCycle" :disabled="form.infoCluster=='无'" placeholder="请输入信息簇的更新周期"></el-input>
+                      <span class="spanStyle">(s)</span>
+                    </el-form-item>
+                  </el-col>
+                </el-row>
+              </el-form>
+            </el-card>
+          </div>
+          <div class="mainCenterTopRight">
+            <el-card class="box-card" :shadow="form.mathFZ?'never':'always'">
+              <span :class="[form.mathFZ ? 'disabledColor' :'normalColor']">鱼雷参数</span>
+              <el-form ref="form" :model="form" label-width="90px" size="small" :disabled="form.mathFZ" :class="[form.mathFZ ? 'labelColor' :'']">
+                <el-row>
+                  <el-col :span="12">
+                    <el-form-item label="初始速度：">
+                      <el-input v-model="form.torpedoSpeed" placeholder="请输入鱼雷初始速度"></el-input>
+                      <span class="spanStyle">(km/h)</span>
+                    </el-form-item>
+                  </el-col>
+                  <el-col :span="12">
+                    <el-form-item label="速度范围：">
+                      <el-input v-model="form.torpedoSpeedLow" style="width: 50px;"></el-input>
+                      <span style="margin:0px 10px;">-</span>
+                      <el-input v-model="form.torpedoSpeedHigh" style="width: 50px;"></el-input>
+                      <span class="spanStyle" style="margin-left:10px;">(km/h)</span>
+                    </el-form-item>
+                  </el-col>
+                </el-row>
+                <el-row>
+                  <el-col :span="12">
+                    <el-form-item label="初始航向：">
+                      <el-input v-model="form.torpedoCourse" placeholder="请输入鱼雷初始航向"></el-input>
+                    </el-form-item>
+                  </el-col>
+                  <el-col :span="12">
+                    <el-form-item label="初始深度：">
+                      <el-input v-model="form.torpedoDepth" placeholder="请输入鱼雷初始深度"></el-input>
+                      <span class="spanStyle">(m)</span>
+                    </el-form-item>
+                  </el-col>
+                </el-row>
+                <el-row>
+                  <el-col :span="12">
+                    <el-form-item label="制导模式：">
+                      <el-select v-model="form.guidance" placeholder="请选择制导模式">
+                        <el-option label="主动声制导" value="主动声制导"></el-option>
+                        <el-option label="主被动声制导" value="主被动声制导"></el-option>
+                        <el-option label="尾流制导" value="尾流制导"></el-option>
+                      </el-select>
+                    </el-form-item>
+                  </el-col>
+                  <el-col :span="12">
+                    <el-form-item label="初始位置：">
+                      <el-input v-model="form.torpedoPositionE" placeholder="经度" style="width: 80px;"></el-input>
+                      <span class="spanStyle" style="margin:0px 30px 0px 10px;">E</span>
+                      <el-input v-model="form.torpedoPositionN" placeholder="纬度" style="width: 80px;"></el-input>
+                      <span class="spanStyle">N</span>
+                    </el-form-item>
+                  </el-col>
+                </el-row>
+              </el-form>
+            </el-card>
+            <el-card class="box-card" style="margin-top: 15px;" :shadow="form.mathFZ?'never':'always'">
+            <span :class="[form.mathFZ ? 'disabledColor' :'normalColor']">目标参数</span>
+            <el-form ref="form" :model="form" label-width="90px" size="small" :disabled="form.mathFZ" :class="[form.mathFZ ? 'labelColor' :'']">
+              <el-form-item label="对抗能力：">
+                <el-radio-group v-model="form.resist">
+                  <el-radio label="有对抗能力"></el-radio>
+                  <el-radio label="无对抗能力"></el-radio>
+                </el-radio-group>
+              </el-form-item>
+              <el-row>
+                <el-col :span="12">
+                  <el-form-item label="初始速度：">
+                    <el-input v-model="form.targetSpeed" placeholder="请输入目标初始速度"></el-input>
+                    <span class="spanStyle">(km/h)</span>
+                  </el-form-item>
+                </el-col>
+                <el-col :span="12">
+                  <el-form-item label="速度范围：">
+                    <el-input v-model="form.targetSpeedLow" style="width: 50px;"></el-input>
+                    <span style="margin:0px 10px;">-</span>
+                    <el-input v-model="form.targetSpeedHigh" style="width: 50px;"></el-input>
+                    <span class="spanStyle" style="margin-left:10px;">(km/h)</span>
+                  </el-form-item>
+                </el-col>
+              </el-row>
+              <el-row>
+                <el-col :span="12">
+                  <el-form-item label="初始深度：">
+                    <el-input v-model="form.targetDepth" placeholder="请输入目标初始深度"></el-input>
+                    <span class="spanStyle">(m)</span>
+                  </el-form-item>
+                </el-col>
+                <el-col :span="12">
+                  <el-form-item label="初始位置：">
+                    <el-input v-model="form.targetPositionE" placeholder="经度" style="width: 80px;"></el-input>
+                    <span class="spanStyle" style="margin:0px 30px 0px 10px;">E</span>
+                    <el-input v-model="form.targetPositionN" placeholder="纬度" style="width: 80px;"></el-input>
+                    <span class="spanStyle">N</span>
+                  </el-form-item>
+                </el-col>
+              </el-row>
+            </el-form>
+            </el-card>
+            <el-card class="box-card" style="margin-top: 15px;" :shadow="form.mathFZ?'never':'always'">
+              <span :class="[form.mathFZ ? 'disabledColor' :'normalColor']">数据注入</span>
+              <el-form ref="form" :model="form" label-width="90px" size="small" :disabled="form.mathFZ" :class="[form.mathFZ ? 'labelColor' :'']">
+                <el-form-item label="数据类型：">
+                  <el-radio-group v-model="form.injectType">
+                    <el-radio label="环境参数"></el-radio>
+                    <el-radio label="目标参数"></el-radio>
+                    <el-radio label="干扰参数"></el-radio>
+                  </el-radio-group>
+                </el-form-item>
+                <el-form-item label="注入文件：">
+                  <el-upload
+                    class="upload-demo"
+                    action=""
+                    accept=".xlsx,.xls"
+                    :on-preview="handlePreview"
+                    :on-remove="handleRemove"
+                    :before-remove="beforeRemove"
+                    multiple
+                    :file-list="fileList">
+                    <el-button size="small" type="primary">点击上传</el-button>
+                    <div slot="tip" class="el-upload__tip" style="color:#c0c7da">只能上传.xlsx,.xls文件，且不超过500kb</div>
+                  </el-upload>
+                </el-form-item>
+              </el-form>
+            </el-card>
+          </div>
+        </div>
+        <div class="mainCenterBottom">
+          <div class="mainCenterBottomLeft">
+            <el-card class="box-card" style="margin-top: 20px;" :shadow="form.SSFZ?'never':'always'">
+              <span :class="[form.SSFZ ? 'disabledColor' :'normalColor']">外部实物链接</span>
+              <el-form ref="form" :model="form" label-width="20px" size="small" :disabled="form.SSFZ" :class="[form.SSFZ ? 'labelColor' :'']">
+                <el-form-item label="">
+                  <el-radio-group v-model="form.link">
+                    <el-radio label="链接制导系统"></el-radio>
+                    <el-radio label="链接全雷系统"></el-radio>
+                  </el-radio-group>
+                </el-form-item>
+              </el-form>
+            </el-card>
+            <el-card class="box-card" style="margin-top: 20px;" :shadow="form.playback?'never':'always'">
+              <span :class="[form.playback ? 'disabledColor' :'normalColor']">数据回放信息设置</span>
+              <el-form ref="form" :model="form" label-width="80px" size="small" :disabled="form.playback" :class="[form.playback ? 'labelColor' :'']">
+                <el-form-item label="">
+                  <el-radio-group v-model="form.dataType">
+                    <el-radio label="算法数据"></el-radio>
+                    <el-radio label="试验数据"></el-radio>
+                    <el-radio label="仿真数据"></el-radio>
+                    <el-radio label="对比分析"></el-radio>
+                  </el-radio-group>
+                </el-form-item>
+                <el-row>
+                  <el-col :span="12">
+                    <el-form-item label="回放数据"  prop="playbackData">
+                      <el-select v-model="form.playbackData" placeholder="请选择回放数据" @change="playbackChange">
+                        <el-option
+                          v-for="item in playbackList"
+                          :key="item.value"
+                          :label="item.label"
+                          :value="item.value">
+                        </el-option>
+                      </el-select>
+                    </el-form-item>
+                  </el-col>
+                  <el-col :span="12">
+                    <el-form-item label="对比数据">
+                      <el-select v-model="form.contrastData" :disabled="!(form.dataType=='对比分析')" placeholder="请选择对比数据" @change="playbackChange">
+                        <el-option
+                          v-for="item in contrastList"
+                          :key="item.value"
+                          :label="item.label"
+                          :value="item.value">
+                        </el-option>
+                      </el-select>
+                    </el-form-item>
+                  </el-col>
+                </el-row>
+              </el-form>
+            </el-card>
+          </div>
+          <div class="mainCenterBottomRight">
+            <el-form ref="form" :model="form" label-width="80px">
+              <el-form-item>
+                <el-button type="primary" style="margin-right:50px" @click="onSubmit()">{{ title }}</el-button>
+              </el-form-item>
+            </el-form>
+          </div>
+        </div>
+      </div>
+    </div>
+    <el-dialog
+      title="参数确认"
+      :visible.sync="dialogVisible"
+      custom-class="descriptionsDialog"
+      width="1000px">
+      <el-descriptions title="基础参数" border size="mini">
+          <el-descriptions-item label="仿真名称">{{ form.FZname?form.FZname:'-' }}</el-descriptions-item>
+          <el-descriptions-item label="海洋环境">海洋深度：{{form.deep?`${form.deep}米`:'-' }}<br>海洋地质：{{ form.geology?form.geology:'-' }}<br>海况等级：{{ form.grade?`${form.grade}级`:'-' }}<br>声速剖面：{{ form.profile?form.profile:'-' }}</el-descriptions-item>
+          <el-descriptions-item label="洋流环境">是否有洋流：{{ form.yangLiu }}<br>深度：{{ form.yangLiu=='是'?`${form.yangLiuDeep}m`:'-' }}<br>
+            速度：{{ form.yangLiu=='是'?`${form.yangLiuSpeed}m/s`:'-' }}<br>
+            厚度：{{ form.yangLiu=='是'?`${form.yangLiuThickness}m`:'-' }}<br>
+            方向：{{ form.yangLiu=='是'?`${form.yangLiuDirection}`:'-' }}
+          </el-descriptions-item>
+          <el-descriptions-item label="任务雷数">{{ form.number?`${form.number}条`:'-' }}</el-descriptions-item>
+          <el-descriptions-item label="发射时间间隔">{{ form.time?`${form.time}秒`:'-' }}</el-descriptions-item>
+          <el-descriptions-item label="作战任务">{{ form.task }}</el-descriptions-item>
+      </el-descriptions>
+      <el-descriptions title="信息簇参数" border size="mini">
+          <el-descriptions-item label="有无信息簇">{{ form.infoCluster }}</el-descriptions-item>
+          <el-descriptions-item label="更新周期">{{ form.infoCluster=='有'?`${form.updateCycle}s`:'-' }}</el-descriptions-item>
+      </el-descriptions>
+      <el-descriptions title="鱼雷参数" border size="mini">
+          <el-descriptions-item label="初始速度">{{ form.torpedoSpeed?`${form.torpedoSpeed}km/h`:'-' }}</el-descriptions-item>
+          <el-descriptions-item label="速度范围">{{ form.torpedoSpeedLow?`${form.torpedoSpeedLow}km/h`:' ' }} - {{ form.torpedoSpeedHigh?`${form.torpedoSpeedHigh}km/h`:' ' }}</el-descriptions-item>
+          <el-descriptions-item label="初始航向">{{ form.torpedoCourse?form.torpedoCourse:' ' }}</el-descriptions-item>
+          <el-descriptions-item label="初始深度">{{ form.torpedoDepth?`${form.torpedoDepth}m`:'-' }}</el-descriptions-item>
+          <el-descriptions-item label="制导模式">{{ form.guidance?`${form.guidance}`:'-' }}</el-descriptions-item>
+          <el-descriptions-item label="初始位置">{{ form.torpedoPositionE?`${form.torpedoPositionE}E`:'' }},{{ form.torpedoPositionN?`${form.torpedoPositionN}N`:'' }}</el-descriptions-item>
+      </el-descriptions>
+      <el-descriptions title="目标参数" border size="mini">
+          <el-descriptions-item label="对抗能力">{{ form.resist }}</el-descriptions-item>
+          <el-descriptions-item label="初始速度">{{ form.targetSpeed?`${form.targetSpeed}km/h`:'-' }}</el-descriptions-item>
+          <el-descriptions-item label="速度范围">{{ form.targetSpeedLow?`${form.targetSpeedLow}km/h`:' ' }} - {{ form.targetSpeedHigh?`${form.targetSpeedHigh}km/h`:' ' }}</el-descriptions-item>
+          <el-descriptions-item label="初始深度">{{ form.targetDepth?`${form.number}m`:'-' }}</el-descriptions-item>
+          <el-descriptions-item label="初始位置">{{ form.targetPositionE?`${form.targetPositionE}E`:'' }},{{ form.targetPositionN?`${form.targetPositionN}N`:'' }}</el-descriptions-item>
+      </el-descriptions>
+      <el-descriptions title="数据注入" border size="mini">
+          <el-descriptions-item label="数据类型">{{ form.resist }}</el-descriptions-item>
+          <el-descriptions-item label="注入文件">{{ fileList?`${fileList}`:'-' }}</el-descriptions-item>
+      </el-descriptions>
+      <el-descriptions title="外部实物链接" border size="mini" v-if="!form.SSFZ">
+          <el-descriptions-item label="链接系统">{{ form.link }}</el-descriptions-item>
+      </el-descriptions>
+      <span slot="footer" class="dialog-footer">
+        <el-button @click="dialogVisible = false">取 消</el-button>
+        <el-button type="primary" @click="paramsSubmit">确 定</el-button>
+      </span>
+    </el-dialog>
+    <el-dialog
+      title="设置海深"
+      :visible.sync="seaDeepVisible"
+      width="30%">
+      <el-row>
+        <el-col :span="12" style="text-align:center">海深(m)</el-col>
+        <el-col :span="12" style="text-align:center">声速(m/s)</el-col>
+      </el-row>
+      <el-row v-for="item in seaDeepList" :key="item.index">
+        <el-col :span="12" class="seaDialog seaDialogText">
+          {{ item.index }}m
+        </el-col>
+        <el-col :span="12" class="seaDialog">
+          <el-input v-model="item.soundVelocity" size="small" placeholder="请输入声速"></el-input>
+        </el-col>
+      </el-row>
+      <span slot="footer" class="dialog-footer">
+        <el-button @click="seaDeepVisible = false">取 消</el-button>
+        <el-button type="primary" @click="seaDeepVisible = false">确 定</el-button>
+      </span>
+    </el-dialog>
+  </div>
+</template>
+<script>
+export default {
+    name:'simulationSystem',
+  data() {
+    return {
+      radio:1,
+      form: {
+        FZname: '',
+        geology: '',
+        deep:'',
+        grade:'',
+        profile:'',
+        yangLiu:"否",
+        yangLiuDeep:'',
+        yangLiuSpeed:'',
+        yangLiuThickness:'',
+        yangLiuDirection:'',
+        number:'',
+        time:'',
+        task:'反潜',
+        injectType:'环境参数',
+        guidance:'',
+        resist:'有对抗能力',
+        torpedoSpeed:'',
+        torpedoDepth:'',
+        torpedoSpeedLow:'',
+        torpedoSpeedHigh:'',
+        torpedoCourse:'0',
+        torpedoPositionE:'',
+        torpedoPositionN:'',
+        targetSpeed:'',
+        targetDepth:'',
+        targetSpeedLow:'',
+        targetSpeedHigh:'',
+        targetPositionE:'',
+        targetPositionN:'',
+        infoCluster:'有',
+        updateCycle:'600',
+        link:'链接制导系统',
+        dataType: '算法数据',
+        playbackData: '',
+        contrastData:'',
+        mathFZ:false,
+        SSFZ:true,
+        playback:true
+      },
+      fileList:[],
+      playbackList:[],
+      contrastList:[],
+      fileName:'',
+      dialogVisible:false,
+      paramsConfirm:false,
+      title:"参数预览",
+      seaDeepVisible:false,
+      // deepNumber:0,
+      seaDeepList:[]
+    }
+  },
+  mounted(){
+    this.getFile()
+  },
+  methods:{
+    getFile(){
+      this.$axios.get(`/api/`).then((res) => {
+        if (res.status === 200) {
+          if (res.data.length === 0) {
+            this.$message.error('文件夹下暂无回放数据，请添加数据')
+          }
+          res.data.forEach((item, index) => {
+            this.playbackList.push({
+              label: item,
+              value: item
+            })
+          })
+        } else {
+          this.$message.warning('读文件列表有误')
+        }
+      })
+    },
+    goback(){
+      this.$router.push({ name:'mainPage' })
+    },
+    onSubmit() {
+      if(!this.form.playback){
+        if (this.form.playbackData && this.form.dataType!=='对比分析') {
+          this.$router.push({ name:'threeDemo',params:{ fileName:this.fileName } })
+        }else if(!this.form.contrastData){
+          this.$message.warning('暂无对比数据')
+        }else {
+          this.$message.warning('请选择要回放的数据')
+          return
+        }
+      }else if(this.paramsConfirm){
+        return
+      }else{
+        this.dialogVisible=true
+      }
+    },
+    paramsSubmit(){
+      this.dialogVisible=false
+      this.paramsConfirm = true
+      this.title="开始运行"
+    },
+    handleRemove(file, fileList) {
+      console.log(file, fileList);
+    },
+    handlePreview(file) {
+      console.log(file);
+    },
+    beforeRemove(file, fileList) {
+      return this.$confirm(`确定移除 ${ file.name }？`);
+    },
+    changeRadio(value){
+      switch (value) {
+        case 1:
+          this.form.mathFZ=false
+          this.form.SSFZ=true
+          this.form.playback=true
+          this.title="参数预览"
+          break;
+        case 2:
+          this.form.mathFZ=false
+          this.form.SSFZ=false
+          this.form.playback=true
+          this.title="参数预览"
+          break;
+        case 3:
+          this.form.mathFZ=true
+          this.form.SSFZ=true
+          this.form.playback=false
+          this.title="开始运行"
+          break;
+        default:
+          break;
+      }
+    },
+    playbackChange(val){
+      console.log(val);
+      this.fileName=val
+    },
+    setSeaDeep(){
+      if(this.form.deep<0 || this.form.deep>1200){
+        this.$message.warning('请输入正确深度')
+        return
+      }
+      if(this.form.deep){
+        if(this.seaDeepList.length==0){
+          let deepNumber=0
+          if(Number(this.form.deep)%100==0){
+            deepNumber=parseInt(Number(this.form.deep)/100)+1;
+          }else{
+            deepNumber=parseInt(Number(this.form.deep)/100)+2;
+          }
+          for(let i=0;i<=deepNumber-1;i++){
+            if(i==0){
+              this.seaDeepList.push({
+                index:i,
+                soundVelocity:''
+              })
+            }else if(i==deepNumber-1){
+              this.seaDeepList.push({
+                index:Number(this.form.deep),
+                soundVelocity:''
+              })
+            }else{
+              this.seaDeepList.push({
+                index:i*100,
+                soundVelocity:''
+              })
+            }
+          }
+        }
+        this.seaDeepVisible=true
+      }else{
+        this.$message.warning('请输入海洋深度')
+      }
+    },
+    seaDeepChange(){
+      this.seaDeepList=[]
+    }
+  },
+}
+</script>
+<style scoped>
+*{
+  box-sizing: border-box;
+}
+.bigBox{
+  width: 1920px;
+  height: 1080px;
+  position: absolute;
+  left: 1920px;
+  top: 0;
+  background-color: white;
+  padding: 10px 50px;
+  box-sizing: border-box;
+  /* margin-left: 20px; */
+}
+.radioText{
+  font-weight: 700;
+  /* font-size: 18px; */
+}
+.mainTop{
+  /* margin-left: 50px; */
+  text-align: center;
+}
+.mainTop >>> .el-radio.is-bordered{
+  height: 50px;
+}
+.mainTop >>> .el-radio__label{
+  font-size: 22px;
+}
+.mainTop >>> .el-radio{
+  margin-right: 100px;
+}
+
+.seaEnv{
+  padding-top: 10px;
+  border: 1px solid #eeeeee;
+}
+/* .title{
+  font-weight: 700;
+} */
+.mainCenter{
+  width: 100%;
+  height: 819px;
+  /* display: flex; */
+}
+.mainCenterTop,
+.mainCenterBottom{
+  width: 100%;
+  display: flex;
+}
+.mainCenterTopLeft,
+.mainCenterTopRight,
+.mainCenterBottomLeft,
+.mainCenterBottomRight{
+  width: 46%;
+  margin-left: 45px;
+}
+.mainCenterBottomRight{
+  display:flex;
+  justify-content:flex-end;
+  align-items:flex-end;
+}
+::v-deep(.el-card__body){
+  padding: 10px 20px;
+}
+.mainFooter{
+  margin-top: 20px;
+  margin-left: -100px;
+  text-align: center;
+}
+::v-deep(.el-divider__text){
+  font-size: 20px;
+}
+::v-deep(.el-form-item){
+  margin-bottom: 8px;
+}
+::v-deep(.el-input){
+  width: 200px;
+}
+::v-deep(.el-input__inner){
+  width: 100%;
+}
+.disabledColor{
+  color:#c0c7da;
+  font-weight: 700;
+}
+.normalColor{
+  color:black;
+  font-weight: 700;
+}
+.labelColor >>> .el-form-item__label{
+  color:#c0c7da;
+}
+::v-deep(.el-descriptions-item__label) {
+  width: 100px; /* 设置 label 宽度为 100px */
+}
+::v-deep(.el-descriptions-item__cell){
+  border: 1px solid #ced2db;
+}
+::v-deep(.descriptionsDialog .el-dialog__body) {
+  padding: 0px 20px;
+}
+::v-deep(.descriptionsDialog .el-descriptions__header) {
+  margin: 10px 0px 5px 0px;
+}
+.seaDialog{
+  text-align:center;
+  margin:10px 0px 0px 0px;
+}
+.seaDialogText{
+  padding-top:7px
+}
+.spanStyle{
+  margin-left: 10px;
+  color:#c0c7da
+}
+</style>

src/views/page/technicalIndicator.vue

@@ -0,0 +1,127 @@
+<template>
+  <div class="bigBox">
+    <div class="top">
+      <el-button icon="el-icon-arrow-left" style="margin: 20px;" @click="goback">返回上一级</el-button>
+      <h2 style="font-size: 42px;color: #0f0f0f;display: inline-block;margin: 0;">技术指标体系</h2>
+    </div>
+    <div class="imgBox">
+      <el-image :src="url"></el-image>
+      <el-button class="imgBtnOne" @click="check(1)"></el-button>
+      <el-button class="imgBtnTwo" @click="check(2)"></el-button>
+      <el-button class="imgBtnThree" @click="check(3)"></el-button>
+    </div>
+    <el-dialog
+      :title=title
+      :visible.sync="dialogVisible"
+      class="dialog"
+      width="900px">
+      <div v-html="text" style="font-size: 18px;line-height: 30px;" v-if="!threeShow"></div>
+      <el-image style="width: 800px" :src="urlImg" v-if="threeShow"></el-image>
+      <span slot="footer" class="dialog-footer">
+        <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
+      </span>
+    </el-dialog>
+  </div>
+</template>
+<script>
+export default {
+    name:'technicalIndicator',
+  data() {
+    return {
+      url:require('../../assets/tree.png'),
+      text:'',
+      dialogVisible:false,
+      title:'',
+      urlImg:require('../../assets/12.png'),
+      threeShow:false
+    }
+  },
+  methods:{
+    goback(){
+      this.$router.push({ name:'mainPage' })
+    },
+    check(num){
+      switch (num) {
+        case 1:
+          this.title='目标感知能力';
+          this.threeShow=false
+          this.text=`分为<span style="color:red;font-size:20px">目标智能探测技术</span>和<span style="color:red;font-size:20px">目标智能识别技术</span><br>`
+          this.dialogVisible=true;
+          break;
+        case 2:
+          this.title='目标智能探测';
+          this.threeShow=false
+          this.text=`<span style="color:red;font-size:20px">通用指标——识别准确率</span><br>
+            <span style="font-weight:700">1)指标介绍</span><br>
+            在已知目标类型时，识别系统输出结果正确数与总输入样本数的比值<br>
+            <span style="font-weight:700">2)指标计算</span><br>
+            记输出结果正确数为 A，错误数为 B，总样本数为 A+B，则<br>
+            <span style="font-weight:700">3)指标分析</span><br>
+            准确率越高，表明探测效果越好<br>`
+          this.dialogVisible=true;
+          break;
+        case 3:
+          this.title='基于被动声学信号的目标智能探测技术指标';
+          this.threeShow=true
+          this.dialogVisible=true;
+          break;
+        default:
+          break;
+      }
+    }
+  },
+}
+</script>
+<style scoped>
+.bigBox{
+  width: 1920px;
+  height: 1080px;
+  position: absolute;
+  left: 1920px;
+  top: 0;
+  background-color: white;
+  /* background-image: url('/public/homeImg.jpg');
+  background-repeat: no-repeat;
+  background-size: 1920px 1080px;
+  background-position: center top; */
+  /* text-align: center; */
+  
+}
+.imgBox{
+  width: 100%;
+  height:100%;
+  position: relative;
+}
+::v-deep(.dialog .el-dialog__body) {
+  height: 400px;
+  overflow: hidden;
+  overflow-y: scroll;
+}
+::v-deep(::-webkit-scrollbar) {
+  display: none;
+}
+.imgBtnOne{
+  opacity: 0;
+  position:absolute;
+  left:690px;
+  top:136px;
+  width:100px;
+  height:30px;
+}
+.imgBtnTwo{
+  opacity: 0;
+  position:absolute;
+  left:560px;
+  top:50px;
+  width:100px;
+  height:30px;
+}
+.imgBtnThree{
+  opacity: 0;
+  position:absolute;
+  left:300px;
+  top:33px;
+  width:250px;
+  height:30px;
+}
+</style>