<template>
<div>
<common-function/>
<freedo-map map-key="csdz"/>
<!-- <div id="map" style="position:fixed;top:0;left:0;width:500px;height:500px;"/>-->
<div class="csdz-menu" :style="`bottom: ${Number(size)/3}rem`">
<menu-btn id="geoBtn" :bg="geo" :bg-hover="geoHover" :width="size" :height="size" text="地理信息" @btnClick="btnClick" />
<menu-btn id="videoBtn" :bg="video" :bg-hover="videoHover" :width="size" :height="size" text="视频云" @btnClick="btnClick" />
<menu-btn id="iotBtn" :bg="iot" :bg-hover="iotHover" :width="size" :height="size" text="物联网" @btnClick="btnClick" />
<menu-btn id="cardBtn" :bg="card" :bg-hover="cardHover" :width="size" :height="size" text="一卡通" @btnClick="btnClick" />
<!-- <menu-btn id="dataBtn" :bg="data" :bg-hover="dataHover" :width="size" :height="size" text="数据中台" @btnClick="btnClick" />-->
</div>
<transition mode="out-in" class="function-menu" v-show="currentComp!==''">
<component :is="currentComp"/>
</transition>
<!-- <list-page :list="pageList" :type="pageType" :has-urge="true"/>-->
<!-- <list-info :data="pageInfo" :list="flowList"/>-->
</div>
</template>
<script>
import MenuBtn from "@/components/MenuBtn";
import Geo from "./geo";
import VideoCloud from "./videoCloud";
import Iot from "./iot";
import SmartCard from "./smartCard";
import CommonFunction from "@/components/CommonFunction";
import ListPage from "@/components/ListPage";
import ListInfo from "@/components/ListInfo";
import FreedoMap from "@/components/Freedo/Freedo";
import { clearUpMap } from "@/utils/freedo/index"
import mapJson from "@/assets/mapJson/map.json";
export default {
components: {Geo, FreedoMap, SmartCard, ListInfo, ListPage, CommonFunction, MenuBtn, VideoCloud, Iot },
data() {
var pmtsManager
return {
pageInfo: {
id: '1',
alarmId: '告警id',
orderId: '工单id',
lotId: '点位id',
lon: '经度',
lat: '纬度',
code: '统一编码',
deviceName: '点位设备名称',
eventName: '事件名称事件名称',
urgency: '2',
urgencyName: '紧急事件',
eventSource: '事件来源',
dutyDept: '责任部门',
dutyDeptName: '责任部门名称',
eventType: '事件类型',
eventTypeName: '事件类型名称',
eventStatus: '0',
eventStatusName: '处置中',
createTime: '2023-05-23 11:12:42',
location: '位置',
imgUrl: '图片地址',
report: '上报人',
cover: '覆盖范围',
sender: '发送人',
receiver: '接收人',
details: '处置详情',
},
pageType: 'case',
flowList: [
{
time: '2022-12-12 12:12:12',
sendPerson:'发送人',
receivePerson: '接收人',
detail: '处置详情',
picUrl: '处置图片',
title: '流程标题',
id: '1'
}, {
time: '2023-01-12 12:12:12',
sendPerson:'发送人',
receivePerson: '接收人',
detail: '处置详情',
picUrl: '处置图片',
title: '流程标题',
id: '2'
}, {
time: '2023-02-12 12:12:12',
sendPerson:'发送人',
receivePerson: '接收人',
detail: '处置详情',
picUrl: '处置图片',
title: '流程标题',
id: '2'
},
],
pageList: [
{
id: '1',
alarmId: '告警id',
orderId: '工单id',
lotId: '点位id',
lon: '经度',
lat: '纬度',
code: '统一编码',
deviceName: '点位设备名称',
eventName: '事件名称事件名称',
urgency: '2',
urgencyName: '紧急事件',
eventSource: '事件来源',
dutyDept: '责任部门',
dutyDeptName: '责任部门名称',
eventType: '事件类型',
eventTypeName: '事件类型名称',
eventStatus: '0',
eventStatusName: '处置中',
createTime: '2023-05-23 11:12:42',
location: '位置',
imgUrl: '图片地址',
report: '上报人',
cover: '覆盖范围',
sender: '发送人',
receiver: '接收人',
details: '处置详情',
},
{
id: '2',
alarmId: '告警id',
orderId: '工单id',
lotId: '点位id',
lon: '经度',
lat: '纬度',
code: '统一编码',
deviceName: '点位设备名称',
eventName: '事件名称事件名称',
urgency: '2',
urgencyName: '紧急事件',
eventSource: '事件来源',
dutyDept: '责任部门',
dutyDeptName: '责任部门名称',
eventType: '事件类型',
eventTypeName: '事件类型名称',
eventStatus: '事件状态',
eventStatusName: '处置中',
createTime: '2023-05-23 11:12:42',
location: '位置',
imgUrl: '图片地址',
report: '上报人',
cover: '覆盖范围',
sender: '发送人',
receiver: '接收人',
details: '处置详情',
},
],
size: '8',
currentComp: '',
comps: {
geoBtn: 'geo',
videoBtn : 'video-cloud',
iotBtn: 'iot',
cardBtn: 'smart-card',
dataBtn: 'data-center'
},
geo: require('../../assets/images/menubtn/地理信息未选中.png'),
geoHover: require('../../assets/images/menubtn/地理信息选中.png'),
video: require('../../assets/images/menubtn/视频云未选中.png'),
videoHover: require('../../assets/images/menubtn/视频云选中.png'),
iot: require('../../assets/images/menubtn/物联网未选中.png'),
iotHover: require('../../assets/images/menubtn/物联网选中.png'),
card: require('../../assets/images/menubtn/一卡通未选中.png'),
cardHover: require('../../assets/images/menubtn/一卡通选中.png'),
data: require('../../assets/images/menubtn/数据中台未选中.png'),
dataHover: require('../../assets/images/menubtn/数据中台选中.png'),
}
},
created() {
// window.imageryManager = new Freedo.FdTools.FdImageryLayersManager(window.viewer);
},
mounted(){
const that = this
that.calSize()
window.onload = () => {
that.calSize()
}
window.onresize = () => {
that.calSize()
}
setTimeout(() => {
for(let i = window.imageryManager.length-1; i>0; i--) {
window.imageryManager.remove(i)
}
// CIM2 楼
// window.pmtsManager.add({
// url: mapJson['CIM2']['CIM2建筑（纯白色）'],
// show: true,
// name: 'CIM2建筑（纯白色）',
// autoFlyto: false,
// alpha: 0.5,
// color: '#002d7a'
// })
// // 特效：波
// let graph1 = new GraphAnimation(window.viewer, {
// color: new Freedo.Color(120/255, 150/255, 215/255, 1.0),
// // 114.877759, 25.773393
// center: Freedo.Cartographic.fromDegrees(114.877759, 25.773393, 1000),
// radius: 200.0
// });
// graph1.create();
}, 100)
},
methods: {
calSize () {
const width = document.body.clientWidth
if (width >= 1920) {
this.size = '8'
} else {
this.size = '5'
}
},
btnClick(id) {
clearUpMap()
this.currentComp = this.comps[id]
}
}
};
</script>
<style scoped>
.csdz-menu {
position: absolute;
left: 30%;
display: flex;
justify-content: space-between;
width: 40%;
z-index: 1111111111;
}
/*.function-menu {*/
/* position: absolute;*/
/* left: 20px;*/
/* top: 20px;*/
/*}*/
</style>
