重构安保力量的 布局
This commit is contained in:
parent
b5edff437d
commit
40602e2905
|
|
@ -12,12 +12,16 @@ declare module 'vue' {
|
||||||
AButton: typeof import('ant-design-vue/es')['Button']
|
AButton: typeof import('ant-design-vue/es')['Button']
|
||||||
ACascader: typeof import('ant-design-vue/es')['Cascader']
|
ACascader: typeof import('ant-design-vue/es')['Cascader']
|
||||||
AConfigProvider: typeof import('ant-design-vue/es')['ConfigProvider']
|
AConfigProvider: typeof import('ant-design-vue/es')['ConfigProvider']
|
||||||
|
ADivider: typeof import('ant-design-vue/es')['Divider']
|
||||||
ADropdown: typeof import('ant-design-vue/es')['Dropdown']
|
ADropdown: typeof import('ant-design-vue/es')['Dropdown']
|
||||||
AForm: typeof import('ant-design-vue/es')['Form']
|
AForm: typeof import('ant-design-vue/es')['Form']
|
||||||
AFormItem: typeof import('ant-design-vue/es')['FormItem']
|
AFormItem: typeof import('ant-design-vue/es')['FormItem']
|
||||||
AImage: typeof import('ant-design-vue/es')['Image']
|
AImage: typeof import('ant-design-vue/es')['Image']
|
||||||
AInput: typeof import('ant-design-vue/es')['Input']
|
AInput: typeof import('ant-design-vue/es')['Input']
|
||||||
AInputPassword: typeof import('ant-design-vue/es')['InputPassword']
|
AInputPassword: typeof import('ant-design-vue/es')['InputPassword']
|
||||||
|
ALayout: typeof import('ant-design-vue/es')['Layout']
|
||||||
|
ALayoutContent: typeof import('ant-design-vue/es')['LayoutContent']
|
||||||
|
ALayoutSider: typeof import('ant-design-vue/es')['LayoutSider']
|
||||||
AMenu: typeof import('ant-design-vue/es')['Menu']
|
AMenu: typeof import('ant-design-vue/es')['Menu']
|
||||||
AMenuItem: typeof import('ant-design-vue/es')['MenuItem']
|
AMenuItem: typeof import('ant-design-vue/es')['MenuItem']
|
||||||
ASegmented: typeof import('ant-design-vue/es')['Segmented']
|
ASegmented: typeof import('ant-design-vue/es')['Segmented']
|
||||||
|
|
|
||||||
|
|
@ -1,20 +1,17 @@
|
||||||
<template>
|
<template>
|
||||||
<i :class="`${fontClass}`" :title="title" :style="{fontSize:`${size}px`}"/>
|
<i :class="`${fontClass}`" :title="title" :style="{fontSize: `${size}px`}" />
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
interface IconFontProps {
|
interface IconFontProps {
|
||||||
fontClass: string,
|
fontClass: string
|
||||||
size?: number,
|
size?: number
|
||||||
title?: string
|
title?: string
|
||||||
}
|
}
|
||||||
|
|
||||||
withDefaults(defineProps<IconFontProps>(), {
|
withDefaults(defineProps<IconFontProps>(), {
|
||||||
size: 25,
|
size: 25
|
||||||
});
|
})
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style scoped lang="scss">
|
<style scoped lang="scss"></style>
|
||||||
|
|
||||||
</style>
|
|
||||||
|
|
|
||||||
|
|
@ -1,15 +1,8 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="indexx" :id="state.id">
|
<a-layout class="layout">
|
||||||
<Transition name="slide-fade">
|
<!-- 左侧区域 -->
|
||||||
<div class="left-cont" :style="{width: show3 ? '412px' : '0px', border: show3 ? '10px solid #f2f3f5' : '0px'}">
|
<a-layout-sider :collapsed="collapsed.left" width="22%">
|
||||||
<el-button @click="show3 = !show3" style="position: absolute; top: 0px; right: -38px" id="toggle-sidebar" type="info" circle>
|
<div class="left-cont">
|
||||||
<el-icon v-if="show3">
|
|
||||||
<d-arrow-left />
|
|
||||||
</el-icon>
|
|
||||||
<el-icon v-else>
|
|
||||||
<d-arrow-right />
|
|
||||||
</el-icon>
|
|
||||||
</el-button>
|
|
||||||
<h2 class="title" v-show="show3">资源数量</h2>
|
<h2 class="title" v-show="show3">资源数量</h2>
|
||||||
<div class="elBtns" v-show="show3">
|
<div class="elBtns" v-show="show3">
|
||||||
<div @click="qhzty('6')" :class="{active: isActive == '6'}">全部</div>
|
<div @click="qhzty('6')" :class="{active: isActive == '6'}">全部</div>
|
||||||
|
|
@ -68,18 +61,37 @@
|
||||||
</a-tree>
|
</a-tree>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</Transition>
|
</a-layout-sider>
|
||||||
|
<!-- 中间地图区域 -->
|
||||||
<Transition name="slide-fade1">
|
<a-layout-content>
|
||||||
<div class="right-cont" :style="{width: show4 ? '412px' : '0px', border: show4 ? '10px solid #f2f3f5' : '0px'}">
|
<div :id="state.id" class="indexx">
|
||||||
<el-button @click="show4 = !show4" style="position: absolute; top: 0px; left: -38px" id="toggle-sidebar1" type="info" circle>
|
<!-- 左边缩进按钮 -->
|
||||||
<el-icon v-if="show4">
|
<div class="left-close-icon">
|
||||||
<d-arrow-right />
|
<el-button @click="collapsed.left = !collapsed.left" style="position: absolute; top: 0px; right: -38px" id="toggle-sidebar" type="info" circle>
|
||||||
</el-icon>
|
<el-icon v-if="!collapsed.left">
|
||||||
<el-icon v-else>
|
<d-arrow-left />
|
||||||
<d-arrow-left />
|
</el-icon>
|
||||||
</el-icon>
|
<el-icon v-else>
|
||||||
</el-button>
|
<d-arrow-right />
|
||||||
|
</el-icon>
|
||||||
|
</el-button>
|
||||||
|
</div>
|
||||||
|
<!-- 右边缩进按钮 -->
|
||||||
|
<div class="right-close-icon">
|
||||||
|
<el-button @click="collapsed.right = !collapsed.right" style="position: absolute; top: 0px; left: -38px" id="toggle-sidebar" type="info" circle>
|
||||||
|
<el-icon v-if="!collapsed.right">
|
||||||
|
<d-arrow-right />
|
||||||
|
</el-icon>
|
||||||
|
<el-icon v-else>
|
||||||
|
<d-arrow-left />
|
||||||
|
</el-icon>
|
||||||
|
</el-button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</a-layout-content>
|
||||||
|
<!-- 右侧区域 -->
|
||||||
|
<a-layout-sider :collapsed="collapsed.right" width="22%">
|
||||||
|
<div class="right-cont">
|
||||||
<h2 class="title">系统数据</h2>
|
<h2 class="title">系统数据</h2>
|
||||||
<div class="panelBox">
|
<div class="panelBox">
|
||||||
<div>
|
<div>
|
||||||
|
|
@ -182,193 +194,10 @@
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</Transition>
|
</a-layout-sider>
|
||||||
|
</a-layout>
|
||||||
<div v-show="dialogTableVisible" class="dialogTableVisibleClass">
|
|
||||||
<el-popover :visible="visible" :show-arrow="false" placement="left" :width="400" :popper-style="{background: '#06325F', border: '1px solid #60626654'}">
|
|
||||||
<template #reference>
|
|
||||||
<el-icon @click="clickKz(infoData)" style="top: -6px" size="16px" color="#409EFC">
|
|
||||||
<DArrowLeft />
|
|
||||||
</el-icon>
|
|
||||||
</template>
|
|
||||||
<el-icon size="16px" style="margin-left: 350px" color="#409EFC" @click="visible = false">
|
|
||||||
<DArrowRight />
|
|
||||||
</el-icon>
|
|
||||||
<div>
|
|
||||||
<p style="color: rgb(179, 194, 208)">视频点位:</p>
|
|
||||||
<ul v-if="ingrssddata">
|
|
||||||
<li style="text-align: center; color: #fff" v-if="ingrssddata.ipcList.length < 1">暂无数据</li>
|
|
||||||
<li v-else style="margin-left: 20px; margin-top: 10px; color: rgb(1, 216, 226)" v-for="(item, index) in ingrssddata.ipcList" :key="index">{{ item.title }}</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
<div style="margin-top: 10px">
|
|
||||||
<p style="color: rgb(179, 194, 208)">安保点位:</p>
|
|
||||||
<ul v-if="ingrssddata">
|
|
||||||
<li style="text-align: center; color: #fff" v-if="ingrssddata.mobileList.length < 1">暂无数据</li>
|
|
||||||
<li style="margin-left: 20px; margin-top: 10px; color: rgb(1, 216, 226)" v-for="(item, index) in ingrssddata.mobileList" :key="index">{{ item.title }}</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
<div style="margin-top: 10px">
|
|
||||||
<p style="color: rgb(179, 194, 208)">文件列表:</p>
|
|
||||||
<ul v-if="ingrssddata">
|
|
||||||
<li style="text-align: center; color: #fff" v-if="ingrssddata.fileList.length < 1">暂无数据</li>
|
|
||||||
<li style="display: inline-block; margin-right: 5px" v-for="(item, index) in ingrssddata.fileList" :key="index">
|
|
||||||
<el-image
|
|
||||||
style="width: 150px; height: 150px"
|
|
||||||
v-if="item.type == 'image'"
|
|
||||||
:src="item.url"
|
|
||||||
:zoom-rate="1.2"
|
|
||||||
:max-scale="7"
|
|
||||||
:min-scale="0.2"
|
|
||||||
:preview-src-list="[item.url]"
|
|
||||||
:initial-index="4"
|
|
||||||
fit="cover"
|
|
||||||
/>
|
|
||||||
<video width="150" height="150" v-if="item.type == 'video'" :src="item.url" autoplay="true" controls></video>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
</el-popover>
|
|
||||||
<el-icon @click="closee" style="position: absolute; left: 327px; top: 4px" size="23">
|
|
||||||
<close-bold />
|
|
||||||
</el-icon>
|
|
||||||
|
|
||||||
<ul>
|
|
||||||
<li style="margin-bottom: 20px">
|
|
||||||
<span id="" class="c_b3c2d0"> 事件类型: </span>
|
|
||||||
<span id="" class="p10c">
|
|
||||||
{{ infoData.alarmCode }}
|
|
||||||
</span>
|
|
||||||
</li>
|
|
||||||
<li style="margin-bottom: 20px">
|
|
||||||
<span id="" class="c_b3c2d0"> 上报时间: </span>
|
|
||||||
<span id="" class="p10c">
|
|
||||||
{{ infoData.timestamp }}
|
|
||||||
</span>
|
|
||||||
</li>
|
|
||||||
<li style="margin-bottom: 20px">
|
|
||||||
<span id="" class="c_b3c2d0"> 上报地点: </span>
|
|
||||||
<span id="" class="p10c">
|
|
||||||
{{ infoData.address }}
|
|
||||||
</span>
|
|
||||||
</li>
|
|
||||||
<li style="margin-bottom: 20px">
|
|
||||||
<span id="" class="c_b3c2d0"> 上报来源: </span>
|
|
||||||
<span id="" class="p10c">
|
|
||||||
{{ infoData.alarmSource }}
|
|
||||||
</span>
|
|
||||||
</li>
|
|
||||||
<li style="margin-bottom: 20px">
|
|
||||||
<span id="" class="c_b3c2d0"> 核验状态: </span>
|
|
||||||
<span id="" class="p10c">
|
|
||||||
{{ totypecn(infoData.fakeState) }}
|
|
||||||
</span>
|
|
||||||
</li>
|
|
||||||
<li style="margin-bottom: 20px">
|
|
||||||
<span id="" class="c_b3c2d0"> 转发模式: </span>
|
|
||||||
<span id="" class="p10c">
|
|
||||||
{{ infoData.reportMode == '1' ? '自动转发' : infoData.reportMode == '2' ? '核验转发' : '' }}
|
|
||||||
</span>
|
|
||||||
</li>
|
|
||||||
<li style="margin-bottom: 20px">
|
|
||||||
<span id="" class="c_b3c2d0"> 描述信息: </span>
|
|
||||||
<span id="" class="p10c">
|
|
||||||
{{ infoData.description }}
|
|
||||||
</span>
|
|
||||||
</li>
|
|
||||||
<li style="margin-bottom: 20px">
|
|
||||||
<span id="" class="c_b3c2d0"> 设备类型: </span>
|
|
||||||
<span id="" class="p10c">
|
|
||||||
{{ infoData.deviceType }}
|
|
||||||
</span>
|
|
||||||
</li>
|
|
||||||
<li style="margin-bottom: 20px">
|
|
||||||
<span id="" class="c_b3c2d0"> 警报类型: </span>
|
|
||||||
<span id="" class="p10c">
|
|
||||||
{{ infoData.alarmCode }}
|
|
||||||
</span>
|
|
||||||
</li>
|
|
||||||
<li style="margin-bottom: 20px; display: flex">
|
|
||||||
<div style="flex: 1">
|
|
||||||
<span id="" class="c_b3c2d0"> 联系人1: </span>
|
|
||||||
<span id="" class="p10c">
|
|
||||||
{{ infoData.user1Name }}
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
<div style="flex: 1">
|
|
||||||
<span id="" style="color: #b3c2d0; margin-left: 20px"> 电话: </span>
|
|
||||||
<span id="" class="p10c">
|
|
||||||
{{ infoData.user1Phone }}
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
</li>
|
|
||||||
<li style="margin-bottom: 20px; display: flex">
|
|
||||||
<div style="flex: 1">
|
|
||||||
<span id="" class="c_b3c2d0"> 联系人2: </span>
|
|
||||||
<span id="" class="p10c">
|
|
||||||
{{ infoData.user2Name }}
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
<div style="flex: 1">
|
|
||||||
<span id="" style="color: #b3c2d0; margin-left: 20px"> 电话: </span>
|
|
||||||
<span id="" class="p10c">
|
|
||||||
{{ infoData.user2Phone }}
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
</li>
|
|
||||||
<li style="margin-bottom: 20px; display: flex">
|
|
||||||
<div style="flex: 1">
|
|
||||||
<span id="" class="c_b3c2d0"> 联系人3: </span>
|
|
||||||
<span id="" class="p10c">
|
|
||||||
{{ infoData.user3Name }}
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
<div style="flex: 1">
|
|
||||||
<span id="" style="color: #b3c2d0; margin-left: 20px"> 电话: </span>
|
|
||||||
<span id="" class="p10c">
|
|
||||||
{{ infoData.user3Phone }}
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
</li>
|
|
||||||
<li style="margin-bottom: 20px">
|
|
||||||
<span id="" class="c_b3c2d0"> 处置状态: </span>
|
|
||||||
<span id="" class="p10c">
|
|
||||||
{{ infoData.state == 'new' ? '新事件' : infoData.state == 'processing' ? '处置中' : infoData.state == 'processed' ? '处置完成' : infoData.state == 'close' ? '关闭' : '' }}
|
|
||||||
</span>
|
|
||||||
</li>
|
|
||||||
<li style="margin-bottom: 20px">
|
|
||||||
<span id="" style="color: #01d8e2">
|
|
||||||
<div style="display: inline-block; margin-left: 3px">
|
|
||||||
<el-button @click="cz(infoData, upstatuslist)" type="primary" size="small">处置</el-button>
|
|
||||||
</div>
|
|
||||||
<div style="display: inline-block; margin-left: 3px" v-if="infoData.lockState == 'lock'">
|
|
||||||
<el-button @click="jiesuo(infoData)" type="info" size="small">解锁</el-button>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div style="display: inline-block; margin-left: 3px" v-else>
|
|
||||||
<el-button @click="lock(infoData)" type="warning" size="small">锁定</el-button>
|
|
||||||
</div>
|
|
||||||
<div style="display: inline-block; margin-left: 3px">
|
|
||||||
<el-button type="danger" size="small" @click="close(infoData)">关闭</el-button>
|
|
||||||
</div>
|
|
||||||
</span>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
<div style="width: 100%; border-top: 1px solid #fff; margin-top: 10px"></div>
|
|
||||||
<a-timeline style="color: #beceda; overflow-y: auto; height: 248px; padding-top: 10px">
|
|
||||||
<a-timeline-item v-for="(item, index) in upstatuslist" :key="index">
|
|
||||||
<p>{{ toCn(item.operation) }}</p>
|
|
||||||
<p>时间:{{ item.timestamp }}</p>
|
|
||||||
<p>操作者: {{ item.operatorType }}</p>
|
|
||||||
</a-timeline-item>
|
|
||||||
</a-timeline>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div v-if="showIframe" class="iframe-container">
|
|
||||||
<iframe :src="videoUrl" frameborder="0"></iframe>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script lang="ts" setup>
|
<script lang="ts" setup>
|
||||||
import L from 'leaflet'
|
import L from 'leaflet'
|
||||||
import 'leaflet/dist/leaflet.css'
|
import 'leaflet/dist/leaflet.css'
|
||||||
|
|
@ -417,7 +246,10 @@ const isActive1 = ref('1')
|
||||||
const qhzty2 = (data: any) => {
|
const qhzty2 = (data: any) => {
|
||||||
isActive1.value = data
|
isActive1.value = data
|
||||||
}
|
}
|
||||||
|
const collapsed = ref({
|
||||||
|
left: false,
|
||||||
|
right: false
|
||||||
|
})
|
||||||
watch(
|
watch(
|
||||||
() => useUserStore().getsoketData,
|
() => useUserStore().getsoketData,
|
||||||
(newValue: any) => {
|
(newValue: any) => {
|
||||||
|
|
@ -1381,6 +1213,29 @@ const initMap = () => {
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style scoped lang="scss">
|
<style scoped lang="scss">
|
||||||
|
.indexx {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
position: relative;
|
||||||
|
|
||||||
|
.left-close-icon {
|
||||||
|
z-index: 9999;
|
||||||
|
position: absolute;
|
||||||
|
margin-top: 10px;
|
||||||
|
left: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.right-close-icon {
|
||||||
|
z-index: 9999;
|
||||||
|
position: absolute;
|
||||||
|
margin-top: 10px;
|
||||||
|
right: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.layout {
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
.c_b3c2d0 {
|
.c_b3c2d0 {
|
||||||
color: #b3c2d0;
|
color: #b3c2d0;
|
||||||
}
|
}
|
||||||
|
|
@ -1389,7 +1244,7 @@ const initMap = () => {
|
||||||
margin-left: 10px;
|
margin-left: 10px;
|
||||||
}
|
}
|
||||||
.scrollContainer {
|
.scrollContainer {
|
||||||
margin: 10px 20px;
|
margin-top: 10px;
|
||||||
height: 70%;
|
height: 70%;
|
||||||
overflow: auto;
|
overflow: auto;
|
||||||
// position: absolute;
|
// position: absolute;
|
||||||
|
|
@ -1669,58 +1524,43 @@ const initMap = () => {
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
}
|
}
|
||||||
|
|
||||||
.indexx {
|
// overflow: hidden;
|
||||||
|
// position: absolute !important;
|
||||||
|
|
||||||
|
.left-cont {
|
||||||
|
box-sizing: border-box;
|
||||||
|
height: 100%;
|
||||||
|
width: 100%;
|
||||||
|
background-color: #fff;
|
||||||
|
z-index: 999;
|
||||||
|
overflow: hidden;
|
||||||
|
|
||||||
|
.titleLeftBg {
|
||||||
|
width: 100%;
|
||||||
|
line-height: 32px;
|
||||||
|
color: #fff;
|
||||||
|
text-indent: 30px;
|
||||||
|
font-size: 16px;
|
||||||
|
font-family: ysbth;
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.right-cont {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
overflow: hidden;
|
background-color: #fff;
|
||||||
// position: absolute !important;
|
z-index: 999;
|
||||||
|
// border: 10px solid #f2f3f5;
|
||||||
|
|
||||||
.left-cont {
|
.titleLeftBg {
|
||||||
box-sizing: border-box;
|
width: 100%;
|
||||||
// width: 412px;
|
line-height: 32px;
|
||||||
height: 100%;
|
color: #616161;
|
||||||
// background-color: rgb(9 45 84 / 80%);
|
text-indent: 30px;
|
||||||
background-color: #fff;
|
font-size: 16px;
|
||||||
z-index: 999;
|
font-family: ysbth;
|
||||||
// border: 10px solid #f2f3f5;
|
font-weight: 600;
|
||||||
// border-top: 12px solid #f2f3f5;
|
|
||||||
// border-right: 12px solid #f2f3f5;
|
|
||||||
position: absolute;
|
|
||||||
// top: 0;
|
|
||||||
// left: 0;
|
|
||||||
overflow: hidden;
|
|
||||||
|
|
||||||
.titleLeftBg {
|
|
||||||
width: 100%;
|
|
||||||
line-height: 32px;
|
|
||||||
color: #fff;
|
|
||||||
text-indent: 30px;
|
|
||||||
font-size: 16px;
|
|
||||||
font-family: ysbth;
|
|
||||||
font-weight: 600;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.right-cont {
|
|
||||||
width: 412px;
|
|
||||||
height: 100%;
|
|
||||||
background-color: #fff;
|
|
||||||
z-index: 999;
|
|
||||||
position: absolute;
|
|
||||||
right: 0;
|
|
||||||
border: 10px solid #f2f3f5;
|
|
||||||
// border-top: 12px solid #f2f3f5;
|
|
||||||
// border-left: 12px solid #f2f3f5;
|
|
||||||
|
|
||||||
.titleLeftBg {
|
|
||||||
width: 100%;
|
|
||||||
line-height: 32px;
|
|
||||||
color: #616161;
|
|
||||||
text-indent: 30px;
|
|
||||||
font-size: 16px;
|
|
||||||
font-family: ysbth;
|
|
||||||
font-weight: 600;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.gttex {
|
.gttex {
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue