更新
This commit is contained in:
@ -204,7 +204,7 @@ export const publicRoutes = [
|
|||||||
name: "warningControl",
|
name: "warningControl",
|
||||||
component: () => import("@/views/backOfficeSystem/IntelligentControl/warningControl/index"),
|
component: () => import("@/views/backOfficeSystem/IntelligentControl/warningControl/index"),
|
||||||
meta: {
|
meta: {
|
||||||
title: "预警布控",
|
title: "预警中心",
|
||||||
icon: "article"
|
icon: "article"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|||||||
@ -1,202 +0,0 @@
|
|||||||
<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: 460px;
|
|
||||||
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: 5px 5px 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: 460px;
|
|
||||||
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,208 +0,0 @@
|
|||||||
<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: 460px;
|
|
||||||
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: 5px 5px 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: 460px;
|
|
||||||
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>
|
|
||||||
@ -11,24 +11,75 @@
|
|||||||
</el-form>
|
</el-form>
|
||||||
<el-button type="primary">搜索</el-button>
|
<el-button type="primary">搜索</el-button>
|
||||||
</div>
|
</div>
|
||||||
<YjComponents v-if="bottomActive == 0" />
|
<div class="systemBox">
|
||||||
<BkComponents v-else />
|
<!-- 左边列表 -->
|
||||||
<!-- 底部按钮 -->
|
<div class="leftList">
|
||||||
<ul class="footBox">
|
<div class="hed flex just-between align center">
|
||||||
<li class="footItem" @click="bottomBtnFn(idx)" v-for="(it, idx) in btn.footBtn" :key="it"> {{ it }} </li>
|
<span class="f14">预警列表</span>
|
||||||
</ul>
|
<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>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup>
|
<script setup>
|
||||||
import GdMap from "@/components/GdMap/index.vue";
|
import GdMap from "@/components/GdMap/index.vue";
|
||||||
import * as MOSTY from "@/components/MyComponents/index";
|
import * as MOSTY from "@/components/MyComponents/index";
|
||||||
import YjComponents from "./components/yjComponents.vue";
|
import YjItem from "./components/yjItem.vue";
|
||||||
import BkComponents from "./components/bkComponents.vue";
|
import WarningCount from "./components/WarningCount.vue";
|
||||||
|
import BarHatEcharts from "@/views/home/echarts/barHatEcharts.vue";
|
||||||
import { reactive, ref } from "vue";
|
import { reactive, ref } from "vue";
|
||||||
|
import { useRouter } from "vue-router";
|
||||||
|
const router = useRouter()
|
||||||
const listQuery = ref({
|
const listQuery = ref({
|
||||||
keyword: ""
|
keyword: ""
|
||||||
});
|
});
|
||||||
|
const searchForm = ref({
|
||||||
|
keyword: ""
|
||||||
|
});
|
||||||
|
|
||||||
const search = reactive({
|
const search = reactive({
|
||||||
xd: [
|
xd: [
|
||||||
@ -48,16 +99,79 @@ const search = reactive({
|
|||||||
{ label: "酒馆", value: "20" }
|
{ label: "酒馆", value: "20" }
|
||||||
]
|
]
|
||||||
});
|
});
|
||||||
const btn = reactive({
|
|
||||||
bkBtn: ["布控人员", "布控群体"],
|
|
||||||
yrBtn: ["人员身份标签统计", "人员行为标签统计"],
|
|
||||||
footBtn: ['预警', '布控']
|
|
||||||
});
|
|
||||||
const bottomActive = ref(0)
|
|
||||||
const bottomBtnFn = (idx) => {
|
|
||||||
bottomActive.value = idx;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
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>
|
</script>
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
@ -141,31 +255,6 @@ const bottomBtnFn = (idx) => {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.footBox {
|
|
||||||
position: absolute;
|
|
||||||
left: 50%;
|
|
||||||
bottom: 10px;
|
|
||||||
transform: translateX(-50%);
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
z-index: 9;
|
|
||||||
|
|
||||||
.footItem {
|
|
||||||
width: 195px;
|
|
||||||
height: 42px;
|
|
||||||
text-align: center;
|
|
||||||
line-height: 42px;
|
|
||||||
margin: 0 10px;
|
|
||||||
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%);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.hed {
|
.hed {
|
||||||
height: 40px;
|
height: 40px;
|
||||||
|
|||||||
Reference in New Issue
Block a user