优化代码
This commit is contained in:
13684185576
20636
package-lock.json
generated
20636
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
@ -5,11 +5,7 @@
|
||||
</div>
|
||||
<!-- 搜索 -->
|
||||
<div ref="searchBox">
|
||||
<Search
|
||||
:searchArr="searchConfiger"
|
||||
@submit="onSearch"
|
||||
:key="pageData.keyCount"
|
||||
/>
|
||||
<Search :searchArr="searchConfiger" @submit="onSearch" :key="pageData.keyCount" />
|
||||
</div>
|
||||
<!-- 按钮组 -->
|
||||
<div class="content">
|
||||
@ -19,34 +15,18 @@
|
||||
<el-button type="primary">导出</el-button>
|
||||
<el-button type="danger">批量删除</el-button>
|
||||
<el-button type="primary" icon="CirclePlus">添加标签模型</el-button>
|
||||
<el-button type="primary" icon="CirclePlus" @click="drawerModel"
|
||||
>添加范围模型</el-button
|
||||
>
|
||||
<el-button type="primary" icon="CirclePlus" @click="personNum"
|
||||
>涉及人数</el-button
|
||||
>
|
||||
<el-button type="primary" icon="CirclePlus" @click="drawerModel">添加范围模型</el-button>
|
||||
<el-button type="primary" icon="CirclePlus" @click="personNum">涉及人数</el-button>
|
||||
</div>
|
||||
<el-input
|
||||
v-model="input2"
|
||||
style="max-width: 300px"
|
||||
placeholder="请输入关键字"
|
||||
>
|
||||
<template #append
|
||||
><el-button type="primary" icon="Search"></el-button
|
||||
></template>
|
||||
<el-input v-model="input2" style="max-width: 300px" placeholder="请输入关键字">
|
||||
<template #append><el-button type="primary" icon="Search"></el-button></template>
|
||||
</el-input>
|
||||
</div>
|
||||
<!-- 表格 -->
|
||||
<div class="tabBox">
|
||||
<MyTable
|
||||
:tableData="pageData.tableData"
|
||||
:tableColumn="pageData.tableColumn"
|
||||
:tableHeight="pageData.tableHeight"
|
||||
:key="pageData.keyCount"
|
||||
:tableConfiger="pageData.tableConfiger"
|
||||
:controlsWidth="pageData.controlsWidth"
|
||||
@chooseData="chooseData"
|
||||
>
|
||||
<MyTable :tableData="pageData.tableData" :tableColumn="pageData.tableColumn" :tableHeight="pageData.tableHeight"
|
||||
:key="pageData.keyCount" :tableConfiger="pageData.tableConfiger" :controlsWidth="pageData.controlsWidth"
|
||||
@chooseData="chooseData">
|
||||
<template #bkDj="{ row }">
|
||||
<DictTag :tag="false" :value="row.bkDj" :options="D_GS_BK_DJ" />
|
||||
</template>
|
||||
@ -69,39 +49,19 @@
|
||||
</template>
|
||||
<!-- 操作 -->
|
||||
<template #controls="{ row }">
|
||||
<el-button
|
||||
v-if="row.bkZt == '01' || row.bkZt == '03' || row.bkZt == '06'"
|
||||
size="small"
|
||||
@click="editControl('edit', row)"
|
||||
>编辑</el-button
|
||||
>
|
||||
<el-button
|
||||
v-if="row.bkZt == '01' || row.bkZt == '03' || row.bkZt == '06'"
|
||||
size="small"
|
||||
@click="openDetail(row)"
|
||||
>送审</el-button
|
||||
>
|
||||
<el-button size="small" @click="info('detail', row)"
|
||||
>详情</el-button
|
||||
>
|
||||
<el-button v-if="row.bkZt == '01' || row.bkZt == '03' || row.bkZt == '06'" size="small"
|
||||
@click="editControl('edit', row)">编辑</el-button>
|
||||
<el-button v-if="row.bkZt == '01' || row.bkZt == '03' || row.bkZt == '06'" size="small"
|
||||
@click="openDetail(row)">送审</el-button>
|
||||
<el-button size="small" @click="info('detail', row)">详情</el-button>
|
||||
</template>
|
||||
</MyTable>
|
||||
<Pages
|
||||
@changeNo="changeNo"
|
||||
@changeSize="changeSize"
|
||||
:tableHeight="pageData.tableHeight"
|
||||
:pageConfiger="{
|
||||
...pageData.pageConfiger,
|
||||
total: pageData.total
|
||||
}"
|
||||
></Pages>
|
||||
<Pages @changeNo="changeNo" @changeSize="changeSize" :tableHeight="pageData.tableHeight" :pageConfiger="{
|
||||
...pageData.pageConfiger,
|
||||
total: pageData.total
|
||||
}"></Pages>
|
||||
</div>
|
||||
<el-dialog
|
||||
v-model="dialogVisible"
|
||||
title="发起送审"
|
||||
width="500px"
|
||||
:before-close="handleClose"
|
||||
>
|
||||
<el-dialog v-model="dialogVisible" title="发起送审" width="500px" :before-close="handleClose">
|
||||
<span>是否要发起送审</span>
|
||||
<template #footer>
|
||||
<div class="dialog-footer">
|
||||
@ -373,10 +333,12 @@ const tabHeightFn = () => {
|
||||
.el-loading-mask {
|
||||
background: rgba(0, 0, 0, 0.5) !important;
|
||||
}
|
||||
|
||||
.content {
|
||||
background-color: #fff;
|
||||
border-radius: 4px;
|
||||
padding-top: 10px;
|
||||
|
||||
.btns {
|
||||
padding: 0 10px;
|
||||
}
|
||||
|
||||
@ -0,0 +1,202 @@
|
||||
<template>
|
||||
<div class="systemBox">
|
||||
<!-- 左边列表 -->
|
||||
<div class="leftList">
|
||||
<div class="hed flex just-between align center">
|
||||
<span class="f14">布控列表</span>
|
||||
<span style="color: #00b7ff" class="pointer" @click="seeMoreFn">查看更多》</span>
|
||||
</div>
|
||||
<div class="ml10 mr10 mt10">
|
||||
<el-input v-model="searchForm.keyword" placeholder="姓名、证件号码搜索">
|
||||
<template #append><el-icon><Search /></el-icon ></template>
|
||||
</el-input>
|
||||
</div>
|
||||
<ul class="listContent noScollLine mt10">
|
||||
<li v-for="(item, index) in personList" :key="index">
|
||||
<YjItem :item="item" type="bk"></YjItem>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<!-- 右边模块 -->
|
||||
<div class="rightList">
|
||||
<!-- 第一部门 -->
|
||||
<div class="model-commom">
|
||||
<div class="hed flex align-center">区域统计</div>
|
||||
<div class="comm-cnt">
|
||||
<BarHatEcharts echartsId="qylxEcharts" :data="list.QylxDate"></BarHatEcharts>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 第二部分 -->
|
||||
<div class="model-commom mt10">
|
||||
<div class="hed flex align-center">人员类型统计</div>
|
||||
<div class="comm-cnt">
|
||||
<BarHatEcharts echartsId="rylxEcharts" :data="list.RylxDate"></BarHatEcharts>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 第三部分 -->
|
||||
<div class="model-commom mt10">
|
||||
<div class="hed flex align-center">感知源统计</div>
|
||||
<div class="comm-cnt">
|
||||
<BarHatEcharts echartsId="gzyEcharts" :data="list.GzyDate"></BarHatEcharts>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 第四部分 -->
|
||||
<div class="model-commom mt10">
|
||||
<div class="hed flex align-center">预警等级统计</div>
|
||||
<div class="comm-cnt">
|
||||
<WarningCount></WarningCount>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import YjItem from "./yjItem.vue";
|
||||
import WarningCount from "./WarningCount.vue";
|
||||
import BarHatEcharts from "@/views/home/echarts/barHatEcharts.vue";
|
||||
import { reactive, ref } from "vue";
|
||||
import { useRouter } from "vue-router";
|
||||
const router = useRouter()
|
||||
const searchForm = ref({
|
||||
keyword: ""
|
||||
});
|
||||
const list = reactive({
|
||||
GzyDate: {
|
||||
xDate: ['巴宜区', '工布江达县', '波密县', '朗县', '墨脱县', '察隅县', '米林县'],
|
||||
list:[
|
||||
{ name: "总数", value: [10,20,30,40,50,60,70] ,color:['rgba(0,244,255,1)','rgba(0,77,167,1)'] ,hatColor:'#087df9'},
|
||||
{ name: "已处置", value: [10,20,30,40,50,60,70],color:['rgba(24, 232, 229, 1)','rgba(3, 110, 83, 1)'],hatColor:'#00FFFF' },
|
||||
],
|
||||
},
|
||||
RylxDate: {
|
||||
xDate: ['类型1', '类型2', '类型3', '类型4', '类型5', '类型6'],
|
||||
list:[
|
||||
{ name: "总数", value: [10,20,30,40,50,60] ,color:['rgba(0,244,255,1)','rgba(0,77,167,1)'] ,hatColor:'#087df9'},
|
||||
{ name: "已处置", value: [10,20,30,40,50,60],color:['rgba(24, 232, 229, 1)','rgba(3, 110, 83, 1)'],hatColor:'#00FFFF' },
|
||||
],
|
||||
},
|
||||
QylxDate: {
|
||||
xDate: ['区域1', '区域2', '区域3', '区域4', '区域5', '区域6'],
|
||||
list:[
|
||||
{ name: "总数", value: [10,20,30,40,50,60] ,color:['rgba(0,244,255,1)','rgba(0,77,167,1)'] ,hatColor:'#087df9'},
|
||||
{ name: "已处置", value: [10,20,30,40,50,60],color:['rgba(24, 232, 229, 1)','rgba(3, 110, 83, 1)'],hatColor:'#00FFFF' },
|
||||
],
|
||||
},
|
||||
})
|
||||
const personList = ref([
|
||||
{
|
||||
name: "张三",
|
||||
idCard: "330102199001011234",
|
||||
gender: "男",
|
||||
sspcs: "xxx上城区派出所",
|
||||
address: "xxxx上城区",
|
||||
yjjb: "10",
|
||||
yjbq: "吸贩毒",
|
||||
age:20,
|
||||
yy: "2023-01-01 12:00:00"
|
||||
},
|
||||
{
|
||||
name: "张三",
|
||||
idCard: "330102199001011234",
|
||||
gender: "男",
|
||||
sspcs: "xxx上城区派出所",
|
||||
address: "xxxx上城区",
|
||||
yjjb: "40",
|
||||
age:20,
|
||||
yjbq: "吸贩毒",
|
||||
yy: "2023-01-01 12:00:00"
|
||||
},
|
||||
{
|
||||
name: "张三",
|
||||
idCard: "330102199001011234",
|
||||
gender: "男",
|
||||
age:20,
|
||||
sspcs: "xxx上城区派出所",
|
||||
address: "xxxx上城区",
|
||||
yjjb: "20",
|
||||
yjbq: "吸贩毒",
|
||||
yy: "2023-01-01 12:00:00"
|
||||
},
|
||||
{
|
||||
name: "张三",
|
||||
idCard: "330102199001011234",
|
||||
gender: "男",
|
||||
age:20,
|
||||
sspcs: "xxx上城区派出所",
|
||||
address: "xxxx上城区",
|
||||
yjjb: "30",
|
||||
yjbq: "吸贩毒",
|
||||
yy: "2023-01-01 12:00:00"
|
||||
}
|
||||
]);
|
||||
const seeMoreFn = () => {
|
||||
router.push('/ControlApproval')
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import "@/assets/css/layout.scss";
|
||||
@import "@/assets/css/element-plus.scss";
|
||||
|
||||
.systemBox {
|
||||
position: relative;
|
||||
left: -20px;
|
||||
top: 0;
|
||||
width: calc(100% + 40px);
|
||||
height: calc(100% + 20px);
|
||||
background: #e9edf6;
|
||||
.leftList {
|
||||
position: absolute;
|
||||
left: 20px;
|
||||
top: 10px;
|
||||
width: 427px;
|
||||
height: calc(100% - 20px);
|
||||
border-radius: 6px 6px 6px 6px;
|
||||
background: rgba(0, 29, 75, 0.4);
|
||||
z-index: 9;
|
||||
.listContent {
|
||||
height: calc(100% - 96px);
|
||||
overflow: hidden;
|
||||
overflow-y: auto;
|
||||
padding: 10px 10px 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
::v-deep .el-input__inner {
|
||||
background: rgba(0, 22, 83, 0.4);
|
||||
border: 1px solid #0072ff;
|
||||
}
|
||||
::v-deep .el-input-group__append {
|
||||
background: #0386fb;
|
||||
color: #fff;
|
||||
border: 1px solid #0072ff;
|
||||
}
|
||||
}
|
||||
.rightList {
|
||||
position: absolute;
|
||||
right: 10px;
|
||||
top: 10px;
|
||||
width: 427px;
|
||||
height: calc(100% - 20px);
|
||||
z-index: 9;
|
||||
.model-commom{
|
||||
height: calc((100% / 4) - 10px);
|
||||
}
|
||||
.comm-cnt{
|
||||
height: calc(100% - 40px);
|
||||
background: rgba(0,29,75,0.6);
|
||||
}
|
||||
}
|
||||
.hed {
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
padding-left: 10px;
|
||||
background: linear-gradient(
|
||||
90deg,
|
||||
#124cb3 0%,
|
||||
rgba(18, 76, 179, 0.23) 77%,
|
||||
rgba(18, 76, 179, 0) 100%
|
||||
);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,210 @@
|
||||
<template>
|
||||
<div class="systemBox">
|
||||
<!-- 左边列表 -->
|
||||
<div class="leftList">
|
||||
<div class="hed flex just-between align center">
|
||||
<span class="f14">预警列表</span>
|
||||
<span style="color: #00b7ff" class="pointer" @click="seeMoreFn">查看更多》</span>
|
||||
</div>
|
||||
<div class="ml10 mr10 mt10">
|
||||
<el-input v-model="searchForm.keyword" placeholder="姓名、证件号码搜索">
|
||||
<template #append><el-icon>
|
||||
<Search />
|
||||
</el-icon></template>
|
||||
</el-input>
|
||||
</div>
|
||||
<ul class="listContent noScollLine mt10">
|
||||
<li v-for="(item, index) in personList" :key="index">
|
||||
<YjItem :item="item" type="yj"></YjItem>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<!-- 右边模块 -->
|
||||
<div class="rightList">
|
||||
<!-- 第一部门 -->
|
||||
<div class="model-commom">
|
||||
<div class="hed flex align-center">区域统计</div>
|
||||
<div class="comm-cnt">
|
||||
<BarHatEcharts echartsId="qylxEcharts" :data="list.QylxDate"></BarHatEcharts>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 第二部分 -->
|
||||
<div class="model-commom mt10">
|
||||
<div class="hed flex align-center">人员类型统计</div>
|
||||
<div class="comm-cnt">
|
||||
<BarHatEcharts echartsId="rylxEcharts" :data="list.RylxDate"></BarHatEcharts>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 第三部分 -->
|
||||
<div class="model-commom mt10">
|
||||
<div class="hed flex align-center">感知源统计</div>
|
||||
<div class="comm-cnt">
|
||||
<BarHatEcharts echartsId="gzyEcharts" :data="list.GzyDate"></BarHatEcharts>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 第四部分 -->
|
||||
<div class="model-commom mt10">
|
||||
<div class="hed flex align-center">预警等级统计</div>
|
||||
<div class="comm-cnt">
|
||||
<WarningCount></WarningCount>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import YjItem from "./yjItem.vue";
|
||||
import WarningCount from "./WarningCount.vue";
|
||||
import BarHatEcharts from "@/views/home/echarts/barHatEcharts.vue";
|
||||
import { reactive, ref } from "vue";
|
||||
import { useRouter } from "vue-router";
|
||||
const router = useRouter()
|
||||
const searchForm = ref({
|
||||
keyword: ""
|
||||
});
|
||||
const list = reactive({
|
||||
GzyDate: {
|
||||
xDate: ['巴宜区', '工布江达县', '波密县', '朗县', '墨脱县', '察隅县', '米林县'],
|
||||
list: [
|
||||
{ name: "总数", value: [10, 20, 30, 40, 50, 60, 70], color: ['rgba(0,244,255,1)', 'rgba(0,77,167,1)'], hatColor: '#087df9' },
|
||||
{ name: "已处置", value: [10, 20, 30, 40, 50, 60, 70], color: ['rgba(24, 232, 229, 1)', 'rgba(3, 110, 83, 1)'], hatColor: '#00FFFF' },
|
||||
],
|
||||
},
|
||||
RylxDate: {
|
||||
xDate: ['类型1', '类型2', '类型3', '类型4', '类型5', '类型6'],
|
||||
list: [
|
||||
{ name: "总数", value: [10, 20, 30, 40, 50, 60], color: ['rgba(0,244,255,1)', 'rgba(0,77,167,1)'], hatColor: '#087df9' },
|
||||
{ name: "已处置", value: [10, 20, 30, 40, 50, 60], color: ['rgba(24, 232, 229, 1)', 'rgba(3, 110, 83, 1)'], hatColor: '#00FFFF' },
|
||||
],
|
||||
},
|
||||
QylxDate: {
|
||||
xDate: ['区域1', '区域2', '区域3', '区域4', '区域5', '区域6'],
|
||||
list: [
|
||||
{ name: "总数", value: [10, 20, 30, 40, 50, 60], color: ['rgba(0,244,255,1)', 'rgba(0,77,167,1)'], hatColor: '#087df9' },
|
||||
{ name: "已处置", value: [10, 20, 30, 40, 50, 60], color: ['rgba(24, 232, 229, 1)', 'rgba(3, 110, 83, 1)'], hatColor: '#00FFFF' },
|
||||
],
|
||||
},
|
||||
})
|
||||
const personList = ref([
|
||||
{
|
||||
name: "张三",
|
||||
idCard: "330102199001011234",
|
||||
gender: "男",
|
||||
sspcs: "xxx上城区派出所",
|
||||
address: "xxxx上城区",
|
||||
yjjb: "10",
|
||||
yjbq: "吸贩毒",
|
||||
age: 20,
|
||||
yy: "2023-01-01 12:00:00"
|
||||
},
|
||||
{
|
||||
name: "张三",
|
||||
idCard: "330102199001011234",
|
||||
gender: "男",
|
||||
sspcs: "xxx上城区派出所",
|
||||
address: "xxxx上城区",
|
||||
yjjb: "40",
|
||||
age: 20,
|
||||
yjbq: "吸贩毒",
|
||||
yy: "2023-01-01 12:00:00"
|
||||
},
|
||||
{
|
||||
name: "张三",
|
||||
idCard: "330102199001011234",
|
||||
gender: "男",
|
||||
age: 20,
|
||||
sspcs: "xxx上城区派出所",
|
||||
address: "xxxx上城区",
|
||||
yjjb: "20",
|
||||
yjbq: "吸贩毒",
|
||||
yy: "2023-01-01 12:00:00"
|
||||
},
|
||||
{
|
||||
name: "张三",
|
||||
idCard: "330102199001011234",
|
||||
gender: "男",
|
||||
age: 20,
|
||||
sspcs: "xxx上城区派出所",
|
||||
address: "xxxx上城区",
|
||||
yjjb: "30",
|
||||
yjbq: "吸贩毒",
|
||||
yy: "2023-01-01 12:00:00"
|
||||
}
|
||||
]);
|
||||
const seeMoreFn = () => {
|
||||
router.push('/ControlApproval')
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import "@/assets/css/layout.scss";
|
||||
@import "@/assets/css/element-plus.scss";
|
||||
|
||||
.systemBox {
|
||||
position: relative;
|
||||
left: -20px;
|
||||
top: 0;
|
||||
width: calc(100% + 40px);
|
||||
height: calc(100% + 20px);
|
||||
background: #e9edf6;
|
||||
|
||||
.leftList {
|
||||
position: absolute;
|
||||
left: 20px;
|
||||
top: 10px;
|
||||
width: 427px;
|
||||
height: calc(100% - 20px);
|
||||
border-radius: 6px 6px 6px 6px;
|
||||
background: rgba(0, 29, 75, 0.4);
|
||||
z-index: 9;
|
||||
|
||||
.listContent {
|
||||
height: calc(100% - 96px);
|
||||
overflow: hidden;
|
||||
overflow-y: auto;
|
||||
padding: 10px 10px 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
::v-deep .el-input__inner {
|
||||
background: rgba(0, 22, 83, 0.4);
|
||||
border: 1px solid #0072ff;
|
||||
}
|
||||
|
||||
::v-deep .el-input-group__append {
|
||||
background: #0386fb;
|
||||
color: #fff;
|
||||
border: 1px solid #0072ff;
|
||||
}
|
||||
}
|
||||
|
||||
.rightList {
|
||||
position: absolute;
|
||||
right: 10px;
|
||||
top: 10px;
|
||||
width: 427px;
|
||||
height: calc(100% - 20px);
|
||||
z-index: 9;
|
||||
|
||||
.model-commom {
|
||||
height: calc((100% / 4) - 10px);
|
||||
}
|
||||
|
||||
.comm-cnt {
|
||||
height: calc(100% - 40px);
|
||||
background: rgba(0, 29, 75, 0.6);
|
||||
}
|
||||
}
|
||||
|
||||
.hed {
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
padding-left: 10px;
|
||||
background: linear-gradient(90deg,
|
||||
#124cb3 0%,
|
||||
rgba(18, 76, 179, 0.23) 77%,
|
||||
rgba(18, 76, 179, 0) 100%);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -1,11 +1,15 @@
|
||||
<template>
|
||||
<div class="personCard relative flex mb10 pointer">
|
||||
<div class="cxbq f14 lh50 tc absolute">已完成</div>
|
||||
<el-button v-if="props.type == 'yj'" type="primary" class="btn_qs f14 lh50 tc absolute">签收</el-button>
|
||||
<div class="avatarBox relative">
|
||||
<div class="marks f12 absolute" :class="changeBg(props.item.yjjb)">
|
||||
处置
|
||||
</div>
|
||||
<div><img width="76" height="96" :src="pro" alt=""></div>
|
||||
<div>
|
||||
<el-image :preview-teleported="true" style="width: 76px; height: 96px" :src="pro" :preview-src-list="[pro]">
|
||||
</el-image>
|
||||
</div>
|
||||
<span class="smallbtn">全息档案</span>
|
||||
</div>
|
||||
<div class="infoBox">
|
||||
@ -43,6 +47,10 @@ const props = defineProps({
|
||||
item: {
|
||||
type: Object,
|
||||
default: () => ({})
|
||||
},
|
||||
type: {
|
||||
type: String,
|
||||
default: ""
|
||||
}
|
||||
});
|
||||
// 切换背景
|
||||
@ -71,9 +79,11 @@ const changeBg = (type) => {
|
||||
padding: 10px;
|
||||
box-sizing: border-box;
|
||||
transition: all 0.3s;
|
||||
|
||||
&:hover {
|
||||
background: rgba(17, 66, 96, 0.8);
|
||||
}
|
||||
|
||||
.cxbq {
|
||||
right: 5px;
|
||||
top: 5px;
|
||||
@ -85,9 +95,16 @@ const changeBg = (type) => {
|
||||
color: #00ffff;
|
||||
transform: rotate(-48deg);
|
||||
}
|
||||
|
||||
.btn_qs {
|
||||
right: 5px;
|
||||
bottom: 5px;
|
||||
}
|
||||
|
||||
.avatarBox {
|
||||
margin-right: 15px;
|
||||
overflow: hidden;
|
||||
|
||||
.marks {
|
||||
width: 70px;
|
||||
height: 32px;
|
||||
@ -97,20 +114,26 @@ const changeBg = (type) => {
|
||||
top: -4px;
|
||||
left: -24px;
|
||||
transform: rotate(-45deg);
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.marks_red {
|
||||
background: rgba(255, 62, 62, 0.75);
|
||||
}
|
||||
|
||||
.marks_orange {
|
||||
background: rgba(255, 155, 62, 0.75);
|
||||
}
|
||||
|
||||
.marks_yellow {
|
||||
background: rgba(255, 239, 62, 0.75);
|
||||
}
|
||||
|
||||
.marks_blue {
|
||||
background: rgba(0, 114, 255, 0.75);
|
||||
}
|
||||
}
|
||||
|
||||
.bqbox {
|
||||
color: #ff0000;
|
||||
padding: 4px 6px;
|
||||
@ -119,24 +142,30 @@ const changeBg = (type) => {
|
||||
border: 1px solid #ff0000;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.infoBox {
|
||||
flex: 1;
|
||||
|
||||
.basicInfo {
|
||||
.name {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.idCard {
|
||||
color: #89afcf;
|
||||
}
|
||||
}
|
||||
|
||||
.detailInfo {
|
||||
.infoItem {
|
||||
color: #89afcf;
|
||||
font-size: 14px;
|
||||
margin-bottom: 5px;
|
||||
|
||||
.label {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.value {
|
||||
color: #89afcf;
|
||||
}
|
||||
@ -144,6 +173,7 @@ const changeBg = (type) => {
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.smallbtn {
|
||||
display: inline-block;
|
||||
padding: 4px 10px;
|
||||
|
||||
@ -11,70 +11,27 @@
|
||||
<MOSTY.Select v-model="listQuery.dz" :dictEnum="search.dz" />
|
||||
</el-form>
|
||||
<el-button type="primary">搜索</el-button>
|
||||
<el-button v-if="bottomActive == 1" type="success" @click="sendControl">发起布控</el-button>
|
||||
</div>
|
||||
<!-- 左边列表 -->
|
||||
<div class="leftList">
|
||||
<div class="hed flex just-between align center">
|
||||
<span class="f14">布控列表</span>
|
||||
<span style="color: #00b7ff" class="pointer">查看更多》</span>
|
||||
</div>
|
||||
<div class="ml10 mr10 mt10">
|
||||
<el-input v-model="searchForm.keyword" placeholder="姓名、证件号码搜索">
|
||||
<template #append><el-icon><Search /></el-icon ></template>
|
||||
</el-input>
|
||||
</div>
|
||||
<ul class="listContent noScollLine mt10">
|
||||
<li v-for="(item, index) in personList" :key="index">
|
||||
<YjItem :item="item"></YjItem>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<!-- 右边模块 -->
|
||||
<div class="rightList">
|
||||
<!-- 第一部门 -->
|
||||
<div class="model-commom">
|
||||
<div class="hed flex align-center">区域统计</div>
|
||||
<div class="comm-cnt">
|
||||
<BarHatEcharts echartsId="qylxEcharts" :data="list.QylxDate"></BarHatEcharts>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 第二部分 -->
|
||||
<div class="model-commom mt10">
|
||||
<div class="hed flex align-center">人员类型统计</div>
|
||||
<div class="comm-cnt">
|
||||
<BarHatEcharts echartsId="rylxEcharts" :data="list.RylxDate"></BarHatEcharts>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 第三部分 -->
|
||||
<div class="model-commom mt10">
|
||||
<div class="hed flex align-center">感知源统计</div>
|
||||
<div class="comm-cnt">
|
||||
<BarHatEcharts echartsId="gzyEcharts" :data="list.GzyDate"></BarHatEcharts>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 第四部分 -->
|
||||
<div class="model-commom mt10">
|
||||
<div class="hed flex align-center">预警等级统计</div>
|
||||
<div class="comm-cnt">
|
||||
<WarningCount></WarningCount>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<YjComponents v-if="bottomActive == 0" />
|
||||
<BkComponents v-else />
|
||||
<!-- 底部按钮 -->
|
||||
<ul class="footBox">
|
||||
<li class="footItem" v-for="it in btn.footBtn" :key="it"> {{ it }} </li>
|
||||
<li class="footItem" @click="bottomBtnFn(idx)" v-for="(it, idx) in btn.footBtn" :key="it"> {{ it }} </li>
|
||||
</ul>
|
||||
<!-- 发起布控 -->
|
||||
<SendControl ref="sendControlRef"></SendControl>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import SendControl from "@/views/backOfficeSystem/IntelligentControl/myControl/components/sendControl.vue";
|
||||
import GdMap from "@/components/GdMap/index.vue";
|
||||
import * as MOSTY from "@/components/MyComponents/index";
|
||||
import YjItem from "./components/yjItem.vue";
|
||||
import WarningCount from "./components/WarningCount.vue";
|
||||
import BarHatEcharts from "@/views/home/echarts/barHatEcharts.vue";
|
||||
import YjComponents from "./components/yjComponents.vue";
|
||||
import BkComponents from "./components/bkComponents.vue";
|
||||
import { reactive, ref } from "vue";
|
||||
const sendControlRef = ref();
|
||||
const listQuery = ref({
|
||||
keyword: ""
|
||||
});
|
||||
@ -97,85 +54,19 @@ const search = reactive({
|
||||
{ label: "酒馆", value: "20" }
|
||||
]
|
||||
});
|
||||
const searchForm = ref({
|
||||
keyword: ""
|
||||
});
|
||||
const list = reactive({
|
||||
GzyDate: {
|
||||
xDate: ['巴宜区', '工布江达县', '波密县', '朗县', '墨脱县', '察隅县', '米林县'],
|
||||
list:[
|
||||
{ name: "总数", value: [10,20,30,40,50,60,70] ,color:['rgba(0,244,255,1)','rgba(0,77,167,1)'] ,hatColor:'#087df9'},
|
||||
{ name: "已处置", value: [10,20,30,40,50,60,70],color:['rgba(24, 232, 229, 1)','rgba(3, 110, 83, 1)'],hatColor:'#00FFFF' },
|
||||
],
|
||||
},
|
||||
RylxDate: {
|
||||
xDate: ['类型1', '类型2', '类型3', '类型4', '类型5', '类型6'],
|
||||
list:[
|
||||
{ name: "总数", value: [10,20,30,40,50,60] ,color:['rgba(0,244,255,1)','rgba(0,77,167,1)'] ,hatColor:'#087df9'},
|
||||
{ name: "已处置", value: [10,20,30,40,50,60],color:['rgba(24, 232, 229, 1)','rgba(3, 110, 83, 1)'],hatColor:'#00FFFF' },
|
||||
],
|
||||
},
|
||||
QylxDate: {
|
||||
xDate: ['区域1', '区域2', '区域3', '区域4', '区域5', '区域6'],
|
||||
list:[
|
||||
{ name: "总数", value: [10,20,30,40,50,60] ,color:['rgba(0,244,255,1)','rgba(0,77,167,1)'] ,hatColor:'#087df9'},
|
||||
{ name: "已处置", value: [10,20,30,40,50,60],color:['rgba(24, 232, 229, 1)','rgba(3, 110, 83, 1)'],hatColor:'#00FFFF' },
|
||||
],
|
||||
},
|
||||
})
|
||||
const personList = ref([
|
||||
{
|
||||
name: "张三",
|
||||
idCard: "330102199001011234",
|
||||
gender: "男",
|
||||
sspcs: "xxx上城区派出所",
|
||||
address: "xxxx上城区",
|
||||
yjjb: "10",
|
||||
yjbq: "吸贩毒",
|
||||
age:20,
|
||||
yy: "2023-01-01 12:00:00"
|
||||
},
|
||||
{
|
||||
name: "张三",
|
||||
idCard: "330102199001011234",
|
||||
gender: "男",
|
||||
sspcs: "xxx上城区派出所",
|
||||
address: "xxxx上城区",
|
||||
yjjb: "40",
|
||||
age:20,
|
||||
yjbq: "吸贩毒",
|
||||
yy: "2023-01-01 12:00:00"
|
||||
},
|
||||
{
|
||||
name: "张三",
|
||||
idCard: "330102199001011234",
|
||||
gender: "男",
|
||||
age:20,
|
||||
sspcs: "xxx上城区派出所",
|
||||
address: "xxxx上城区",
|
||||
yjjb: "20",
|
||||
yjbq: "吸贩毒",
|
||||
yy: "2023-01-01 12:00:00"
|
||||
},
|
||||
{
|
||||
name: "张三",
|
||||
idCard: "330102199001011234",
|
||||
gender: "男",
|
||||
age:20,
|
||||
sspcs: "xxx上城区派出所",
|
||||
address: "xxxx上城区",
|
||||
yjjb: "30",
|
||||
yjbq: "吸贩毒",
|
||||
yy: "2023-01-01 12:00:00"
|
||||
}
|
||||
]);
|
||||
const btn = reactive({
|
||||
bkBtn: ["布控人员", "布控群体"],
|
||||
yrBtn: ["人员身份标签统计", "人员行为标签统计"],
|
||||
footBtn:['预警','布控']
|
||||
footBtn: ['预警', '布控']
|
||||
});
|
||||
const active = ref("布控人员");
|
||||
const active1 = ref("人员身份标签统计");
|
||||
const bottomActive = ref(0)
|
||||
const bottomBtnFn = (idx) => {
|
||||
bottomActive.value = idx;
|
||||
}
|
||||
// 发起
|
||||
const sendControl = () => {
|
||||
sendControlRef.value.init();
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@ -189,6 +80,7 @@ const active1 = ref("人员身份标签统计");
|
||||
width: calc(100% + 40px);
|
||||
height: calc(100% + 20px);
|
||||
background: #e9edf6;
|
||||
|
||||
.topSearch {
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
@ -198,15 +90,18 @@ const active1 = ref("人员身份标签统计");
|
||||
display: flex;
|
||||
align-items: center;
|
||||
z-index: 9;
|
||||
|
||||
.el-form {
|
||||
display: flex;
|
||||
::v-deep .el-input__inner{
|
||||
|
||||
::v-deep .el-input__inner {
|
||||
background: rgba(0, 22, 83, 0.4);
|
||||
border: 1px solid #0072ff;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.leftList {
|
||||
position: absolute;
|
||||
left: 20px;
|
||||
@ -216,6 +111,7 @@ const active1 = ref("人员身份标签统计");
|
||||
border-radius: 6px 6px 6px 6px;
|
||||
background: rgba(0, 29, 75, 0.4);
|
||||
z-index: 9;
|
||||
|
||||
.listContent {
|
||||
height: calc(100% - 96px);
|
||||
overflow: hidden;
|
||||
@ -223,16 +119,19 @@ const active1 = ref("人员身份标签统计");
|
||||
padding: 10px 10px 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
::v-deep .el-input__inner {
|
||||
background: rgba(0, 22, 83, 0.4);
|
||||
border: 1px solid #0072ff;
|
||||
}
|
||||
|
||||
::v-deep .el-input-group__append {
|
||||
background: #0386fb;
|
||||
color: #fff;
|
||||
border: 1px solid #0072ff;
|
||||
}
|
||||
}
|
||||
|
||||
.rightList {
|
||||
position: absolute;
|
||||
right: 10px;
|
||||
@ -240,15 +139,18 @@ const active1 = ref("人员身份标签统计");
|
||||
width: 427px;
|
||||
height: calc(100% - 20px);
|
||||
z-index: 9;
|
||||
.model-commom{
|
||||
|
||||
.model-commom {
|
||||
height: calc((100% / 4) - 10px);
|
||||
}
|
||||
.comm-cnt{
|
||||
|
||||
.comm-cnt {
|
||||
height: calc(100% - 40px);
|
||||
background: rgba(0,29,75,0.6);
|
||||
background: rgba(0, 29, 75, 0.6);
|
||||
}
|
||||
}
|
||||
.footBox{
|
||||
|
||||
.footBox {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
bottom: 10px;
|
||||
@ -256,31 +158,32 @@ const active1 = ref("人员身份标签统计");
|
||||
display: flex;
|
||||
align-items: center;
|
||||
z-index: 9;
|
||||
.footItem{
|
||||
|
||||
.footItem {
|
||||
width: 195px;
|
||||
height: 42px;
|
||||
text-align: center;
|
||||
line-height: 42px;
|
||||
margin: 0 10px;
|
||||
background-image: linear-gradient( 95deg,#0072ff 0%, #0072ff 100%);
|
||||
background-image: linear-gradient(95deg, #0072ff 0%, #0072ff 100%);
|
||||
transform: skew(-20deg);
|
||||
font-size: 16px;
|
||||
border-radius: 4px;
|
||||
&:nth-child(2){
|
||||
background-image: linear-gradient( 95deg,#FFA800 0%, #FFA800 100%);
|
||||
|
||||
&:nth-child(2) {
|
||||
background-image: linear-gradient(95deg, #FFA800 0%, #FFA800 100%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.hed {
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
padding-left: 10px;
|
||||
background: linear-gradient(
|
||||
90deg,
|
||||
#124cb3 0%,
|
||||
rgba(18, 76, 179, 0.23) 77%,
|
||||
rgba(18, 76, 179, 0) 100%
|
||||
);
|
||||
background: linear-gradient(90deg,
|
||||
#124cb3 0%,
|
||||
rgba(18, 76, 179, 0.23) 77%,
|
||||
rgba(18, 76, 179, 0) 100%);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user