zy_oyj/sgxt_web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

优化代码

Browse Source
This commit is contained in:
13684185576
2025-07-08 19:50:28 +08:00
parent a1ac6938f1
commit e0ae89616b
6 changed files with 626 additions and 20721 deletions
Download Patch File Download Diff File Expand all files Collapse all files

210
src/views/backOfficeSystem/IntelligentControl/warningControl/components/yjComponents.vue Normal file
View File

@ -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>