项目地址: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>