<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 Sq from './shms/sq';
import Tcy from './shms/tcy';
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";
import cy from './cyjj/cy';
export default {
components: { Yj, Jt, Gw, Yl, Hw, Jxh, Tcy, Gd, Jy, Hb, Sq, FreedoMap, ListInfo, ListPage, CommonFunction, MenuBtn, cy },
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: 'tcy' },
], [
{ 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]
console.log(id);
console.log(this.showChildren);
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) {
console.log(item, 'item')
clearUpMap()
this.showChildren = [false, false, false, false]
this.currentComp = item.value
console.log(item.value, '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>
