<template>
<div>
<common-function/>
<freedo-map map-key="ywts"/>
<div class="csdz-menu" :style="`bottom: ${Number(size)/3}rem`">
<menu-btn v-for="(item, index) of menus" :key="index"
:id="`${item}Btn`"
:bg="bg[index]"
:bg-hover="bgHover[index]"
:text="menuName[index]"
:hasChildren="showChildren[index]"
:children="children[index]"
@menuHover="menuHover"
@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="false"/>-->
<!-- <list-info :data="pageInfo" :list="flowList"/>-->
</div>
</template>
<script>
import MenuBtn from "@/components/MenuBtn";
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 Jy from "./shms/jy";
import Gd from "./cszl/gd";
import Jxh from "./cszl/jxh";
import Hw from "./cszl/hw";
import Yl from "./zyhj/yl";
import Hb from "./zyhj/hb";
import Gw from "./cszl/gw";
import Jt from "./cszl/jt";
import Yj from "./cszl/yj";
export default {
components: {Yj, Jt, Gw, Yl, Hw, Jxh, Gd, Jy,Hb, FreedoMap, ListInfo, ListPage, CommonFunction, MenuBtn },
data() {
var pmtsManager
return {
menus: ['cszl','shms', 'zyhj', 'cyjj'],
menuName: ['城市治理','社会民生', '资源环境', '产业经济'],
showChildren: [false, false, false, false],
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: '10',
currentComp: '',
children: [[
{name: '应急',value: 'yj'},
{name: '管网',value: 'gw'},
{name: '精细化',value: 'jxh'},
{name: '交通',value: 'jt'},
{name: '工地',value: 'gd'},
{name: '环卫',value: 'hw'},
], [
{name: '社区',value: 'sq'},
{name: '教育',value: 'jy'}
], [
{name: '环保',value: 'hb'},
{name: '园林',value: 'yl'}
], [
{name: '产业',value: 'cy'}
]],
bg: [
require('../../assets/images/menubtn/城市治理未选中.png'),
require('../../assets/images/menubtn/社会民生未选中.png'),
require('../../assets/images/menubtn/资源环境未选中.png'),
require('../../assets/images/menubtn/产业经济未选中.png'),
],
bgHover: [
require('../../assets/images/menubtn/城市治理选中.png'),
require('../../assets/images/menubtn/社会民生选中.png'),
require('../../assets/images/menubtn/资源环境选中.png'),
require('../../assets/images/menubtn/产业经济选中.png')
]
}
},
mounted(){
},
methods: {
calSize () {
const width = document.body.clientWidth
if (width >= 1920) {
this.size = '10'
} else {
this.size = '10'
}
},
menuHover(id) {
this.showChildren = [false, false, false, false]
switch(id) {
case "cszlBtn":
this.showChildren[0] = true
break
case "shmsBtn":
this.showChildren[1] = true
break
case "zyhjBtn":
this.showChildren[2] = true
break
case "cyjjBtn":
this.showChildren[3] = true
break
}
},
btnClick(item) {
clearUpMap()
this.showChildren = [false, false, false, false]
this.currentComp = item.value
}
}
};
</script>
<style scoped>
.csdz-menu {
position: absolute;
left: 28%;
display: flex;
justify-content: space-between;
width: 44%;
z-index: 1111111111;
}
/*.function-menu {*/
/* position: absolute;*/
/* left: 20px;*/
/* top: 20px;*/
/*}*/
</style>
