项目地址:Every Admin: 用于快速搭建后台管理和其他页面的项目,组件化开发,以及大屏展示.

 

<template>

  <div class="topbox">

    xx海洋管理

  </div>

  <div class="selectbox">

    <div class="title">

      航线列表

    </div>

    <el-table :data="tableData" style="width: 100%;height:230px;" @row-click="row">

      <el-table-column prop="date" label="日期"/>

      <el-table-column prop="name" label="航线名"/>

      <el-table-column prop="address" label="类型" />

    </el-table>

</div>

<div class="selectbox box2">

  <div class="title">

    航线站点

  </div>

  <div>

    <el-steps :space="200" :active="currentnum" finish-status="success">

      <el-step :title="item.name" v-for="(item,index) in arrsp" :key="index"  />

    </el-steps>

  </div>

</div>

<div style="color:#ffffff;position:absolute;top:90px;right:10px;z-index:100;">

  速度:<el-input-number v-model="currents" :min="1" :max="100" @change="handleChange" />

</div>

  <div id="container" class="mainMap2"></div>

  </template>

  <script setup lang="ts">

import { ref, onMounted} from 'vue';

import {hyczData} from "../../../assets/hycz";

import {hyczData1} from "../../../assets/hycz1";

let esc,viewer,scene;

onMounted(async () => {

   esc = new easyCesium.init();

  //  默认加载本地静态图片

    viewer = esc.init({url:"./baseImage.jpg",Cesium:Cesium,id:"container"});

    esc.utils().tools({val:"高程"})

    scene = esc.scenes()

    scene.hideTime()

});

let currents = ref(1)

let arrsp=ref([])

hyczData.forEach((item,index)=>{

  arrsp.value.push({name:"站点"+(index+1),lt:item})

})

const row=(data)=>{

  if(!entity.value){

    scene.addhy({options:{startTime:"2022-03-09T23:10:00Z",modelUrl:"./济阳级护卫舰.gltf",imgUrl:"./帆船.png",stop:value1.value,track:value2.value,multip:textnum.value}},hyczData,callback)

  }else{

    scene.remove(entity.value)

    arrsp.value=[]

    hyczData1.forEach((item,index)=>{

  arrsp.value.push({name:"站点"+(index+1),lt:item})

})

    scene.addhy({options:{startTime:"2022-03-09T23:10:00Z",modelUrl:"./济阳级护卫舰.gltf",imgUrl:"./帆船.png",stop:value1.value,track:value2.value,multip:textnum.value}},hyczData1,callback)

  }

}

const tableData = [

  {

    date: '2016-05-03',

    name: '航线一',

    address: '民一',

  },

  {

    date: '2016-05-02',

    name: '航线三',

    address: '民二',

  },

  {

    date: '2016-05-04',

    name: '航线二',

    address: '民三',

  },

  {

    date: '2016-05-05',

    name: '航线二',

    address: '民三',

  },

  {

    date: '2016-05-02',

    name: '航线三',

    address: '民二',

  },

  {

    date: '2016-05-04',

    name: '航线二',

    address: '民三',

  },

  {

    date: '2016-05-05',

    name: '航线二',

    address: '民三',

  }

]

let isleft = ref(false)

let textnum = ref(1)

let value1 = ref(true)

let value2 = ref(true)

let entity = ref(null)

let currentnum = ref(1)

let callback=(res)=>{

  if(res.entity){

    entity.value = res.entity

  }

  if(res.num){

    currentnum.value = res.num+1

  }

    }

    let   handleChange=(val)=>{

        scene.status({options:{multip:currents.value}})

    }

  let   handleChange1=(val)=>{

    if(isleft.value){

      scene.status({options:{status:value1.value,multip:textnum.value,entity:entity.value,track:value2.value}})

    }

    }

const change = (val)=>{

  if(val=="海洋航行"){

    isleft.value = true

    scene.addhy({options:{startTime:"2022-03-09T23:10:00Z",modelUrl:"./济阳级护卫舰.gltf",imgUrl:"./帆船.png",stop:value1.value,track:value2.value,multip:textnum.value}},hyczData,callback)

    }

    if(val=="暂停"){

    isleft.value = false

      scene.status({options:{status:value1.value,multip:textnum.value,entity:entity,track:value2.value}})

    }

}

const value = ref('')

 

// const num = 0

const options = [

  {

    value: '海洋航行',

    label: '海洋航行',

  },

  {

    value: '暂停',

    label: '暂停',

  }

]

  </script>

  <style scoped>

  @import url("../../../assets/css/scene.css");

  </style>

  <style>

  @import url("../../../assets/css/scenet.css");

  </style>