170 lines
3.5 KiB
Vue
170 lines
3.5 KiB
Vue
<template>
|
|
<div class="statistical-analysis">
|
|
<!-- 左侧树形菜单 -->
|
|
<div class="left-menu">
|
|
<leftList />
|
|
</div>
|
|
<!-- 右侧内容区 -->
|
|
<div class="right-content" v-if="showDetails">
|
|
<div class="btnsBox">
|
|
<div class="headerTitle">{{ title }}类语义分析</div>
|
|
</div>
|
|
<div>
|
|
<SearchTool :dict="{ D_GSXT_FXLB }" :title="title" />
|
|
</div>
|
|
<TableType :dict="{ JQLB, JQLX, JQXL, JQZL, D_GS_XS_LX }" :title="title" />
|
|
</div>
|
|
<div class="right-content details" v-else>
|
|
<ShowDetails :listData="listData" :title="title" />
|
|
</div>
|
|
</div>
|
|
<!-- 详情 -->
|
|
|
|
</template>
|
|
|
|
<script setup>
|
|
import leftList from './components/leftList.vue';
|
|
import SearchTool from './components/searchTool.vue'
|
|
import TableType from './components/tableType.vue'
|
|
import { getCurrentInstance, onMounted, ref } from 'vue'
|
|
import ShowDetails from './components/showDetails.vue';
|
|
import emitter from "@/utils/eventBus.js";
|
|
const { proxy } = getCurrentInstance();
|
|
const { D_GSXT_FXLB, JQLB, JQLX, JQXL, JQZL, D_GS_XS_LX } = proxy.$dict("D_GSXT_FXLB", "JQLB", "JQLX", "JQXL", "JQZL", "D_GS_XS_LX")
|
|
const showDetails = ref(true)
|
|
const title = ref('警情')
|
|
const listData = ref()
|
|
onMounted(() => {
|
|
emitter.on('showDetails', (res) => {
|
|
showDetails.value = res
|
|
})
|
|
emitter.on('showDetailsTitle', (res) => {
|
|
title.value = res
|
|
})
|
|
emitter.on('getlistData', (res) => {
|
|
listData.value = res
|
|
})
|
|
})
|
|
|
|
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.statistical-analysis {
|
|
width: 100%;
|
|
height: 100%;
|
|
|
|
.left-menu {
|
|
float: left;
|
|
width: 280px;
|
|
height: calc(100% - 10px);
|
|
padding: 20px 4px;
|
|
margin-top: 20px;
|
|
border-radius: 4px;
|
|
background-color: #fff;
|
|
border-right: 1px solid #e8e8e8;
|
|
color: #333;
|
|
line-height: 32px;
|
|
|
|
::v-deep .checkBox {
|
|
flex-direction: column;
|
|
|
|
.checkall {
|
|
margin: 0;
|
|
}
|
|
}
|
|
|
|
::v-deep .el-checkbox-group {
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
::v-deep .is-checked {
|
|
background: rgb(242, 249, 255);
|
|
margin-bottom: 4px;
|
|
}
|
|
|
|
::v-deep .el-checkbox {
|
|
padding-left: 8px;
|
|
margin-right: 4px;
|
|
}
|
|
|
|
.all {
|
|
width: calc(100% - 4px);
|
|
}
|
|
}
|
|
|
|
.right-content {
|
|
float: left;
|
|
width: calc(100% - 290px);
|
|
height: 100%;
|
|
margin-top: 20px;
|
|
margin-left: 10px;
|
|
border-radius: 4px;
|
|
box-sizing: border-box;
|
|
|
|
.btnsBox {
|
|
background: #fff;
|
|
padding: 10px 5px;
|
|
border-radius: 4px;
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
.cntlsit {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
align-content: start;
|
|
gap: 22px;
|
|
overflow: hidden;
|
|
overflow-y: auto;
|
|
background: #fff;
|
|
padding: 4px;
|
|
box-sizing: border-box;
|
|
|
|
.cntItem {
|
|
width: 300px;
|
|
border: 1px solid #ccc;
|
|
color: #787878;
|
|
border-radius: 4px;
|
|
overflow: hidden;
|
|
|
|
.foot {
|
|
text-align: right;
|
|
margin-top: 4px;
|
|
border-top: 1px solid #ccc;
|
|
padding: 4px;
|
|
box-sizing: border-box;
|
|
}
|
|
}
|
|
|
|
}
|
|
}
|
|
|
|
.details {
|
|
background-color: #fff;
|
|
height: 99%;
|
|
}
|
|
}
|
|
|
|
.headerTitle {
|
|
font-size: 24px;
|
|
padding: 10px;
|
|
font-family: 'verdana';
|
|
color: #000;
|
|
padding-left: 8px;
|
|
position: relative;
|
|
}
|
|
|
|
.headerTitle::after {
|
|
content: "";
|
|
display: block;
|
|
position: absolute;
|
|
top: 14px;
|
|
left: 0px;
|
|
width: 4px;
|
|
border-radius: 5px;
|
|
height: 31px;
|
|
background-color: #0386fb
|
|
}
|
|
</style>
|