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:
zy_zr 2025-04-15 18:56:50 +08:00
parent ed4849b193
commit 2703819710
8 changed files with 362 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
src/assets/images/home_btns_active.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 5.1 KiB

44
src/views/KeyPopulations/index.vue Normal file
View File

@ -0,0 +1,44 @@
<template>
<div class="homeBox">
<!-- 头部 -->
<Head type="importantPerson"></Head>
<!-- 内容 -->
<div class="home-contant">
<!-- 左边 -->
<div class="home-aside asideL" style="left:0">
<ImportantPerson></ImportantPerson>
</div>
<!-- 右边 -->
<div class="home-aside asideR" style="right:0">
<div class="aside-middle mt60">
<Zdrqhd></Zdrqhd>
</div>
<div class="aside-middle">
<Yjclqktj></Yjclqktj>
</div>
</div>
</div>
</div>
</template>
<script setup>
import Head from '@/views/home/layout/head.vue';
import ImportantPerson from './model/importantPerson.vue'
import Zdrqhd from './model/zdrqhd.vue'
import Yjclqktj from './model/yjclqktj.vue'
</script>
<style lang="scss" scoped>
@import "@/assets/css/homeScreen.scss";
.asideL{
background: linear-gradient( to right, rgba(78, 98, 132,0.8) 0%, #fff 100%);
}
.asideR{
background: linear-gradient( to left, rgba(78, 98, 132,0.8) 0%, #fff 100%);
}
.homeBox .home-contant .home-aside .aside-middle{
height: calc((100% - 60px)/2);
}
.transition {
transition: all 0.5s;
}
</style>

158
src/views/KeyPopulations/model/importantPerson.vue Normal file
View File

@ -0,0 +1,158 @@
<template>
<div class="personBox" id="zdrxxtj">
<div class="asideTitle mt60">
<div>
<span class="title">重点人信息统计</span>
<span :class="active == it ? 'active'+`${idx}`:''" @click="changeDate(it)" class="tabsBtn pointer" v-for="(it,idx) in btns" :key="it">{{ it }}</span>
</div>
<span style="color:#00B7FF;" class="f12 pointer">查看更多 》</span>
</div>
<div class="asideCnt">
<div class="seachBox flex">
<!-- 搜索 -->
<MOSTY.Select v-model="listQuery.bqm" style="width: 120px;margin-right:10px" :dictEnum="search.xd" clearable placeholder="选择标签" />
<MOSTY.Other v-model="listQuery.nr" clearable placeholder="输入内容" />
<el-button type="primary">搜索</el-button>
</div>
<MyTable @changePage="changePage" customClass="zdy_peo_table" :tableData="pageData.tableData" :tableColumn="pageData.tableColumn" :tableHeight="pageData.tableHeight" :key="pageData.keyCount" :tableConfiger="pageData.tableConfiger" >
</MyTable>
</div>
</div>
</template>
<script setup>
import * as MOSTY from "@/components/MyComponents/index";
import MyTable from "@/components/aboutTable/DarkTable.vue";
import { reactive, ref,onMounted } from "vue";
const btns = ref(['重点人','重点群体'])
const active = ref('重点人');
const pageData = reactive({
tableData: [
{ xm: "王五", sfzh: "330102199505057890", bq: "吸毒人员" },
{ xm: "王五", sfzh: "330102199505057890", bq: "吸毒人员" },
{ xm: "王五", sfzh: "330102199505057890", bq: "吸毒人员" },
{ xm: "王五", sfzh: "330102199505057890", bq: "吸毒人员" },
{ xm: "王五", sfzh: "330102199505057890", bq: "吸毒人员" },
{ xm: "王五", sfzh: "330102199505057890", bq: "吸毒人员" },
{ xm: "王五", sfzh: "330102199505057890", bq: "吸毒人员" },
{ xm: "王五", sfzh: "330102199505057890", bq: "吸毒人员" },
{ xm: "王五", sfzh: "330102199505057890", bq: "吸毒人员" },
{ xm: "王五", sfzh: "330102199505057890", bq: "吸毒人员" },
{ xm: "王五", sfzh: "330102199505057890", bq: "吸毒人员" },
{ xm: "王五", sfzh: "330102199505057890", bq: "吸毒人员" },
{ xm: "王五", sfzh: "330102199505057890", bq: "吸毒人员" },
{ xm: "王五", sfzh: "330102199505057890", bq: "吸毒人员" },
{ xm: "王五", sfzh: "330102199505057890", bq: "吸毒人员" },
{ xm: "王五", sfzh: "330102199505057890", bq: "吸毒人员" },
{ xm: "王五", sfzh: "330102199505057890", bq: "吸毒人员" },
{ xm: "王五", sfzh: "330102199505057890", bq: "吸毒人员" },
{ xm: "王五", sfzh: "330102199505057890", bq: "吸毒人员" },
{ xm: "王五", sfzh: "330102199505057890", bq: "吸毒人员" },
],
keyCount: 0,
tableConfiger: {
loading: false,
rowHieght: 61,
haveControls: false,
showSelectType: "null",
stripe:true
},
total: 0,
pageConfiger: {
pageSize: 20,
pageNum: 1
}, //分页
tableColumn: [
{ label: "姓名", prop: "xm", showOverflowTooltip: true },
{ label: "身份证号码", prop: "sfzh",showOverflowTooltip: true },
{ label: "标签", prop: "bq",showOverflowTooltip: true },
]
});
const search = reactive({
xd: [
{ label: "吸毒", value: "10" },
{ label: "贩毒", value: "20" }
],
});
const listQuery = ref([])
onMounted(() => {
tabHeightFn();
window.onresize = function () {
tabHeightFn();
};
});
const changeDate = (val) =>{
active.value = val;
}
// 滚动分页加载
const changePage = () =>{
}
// 表格高度计算
const tabHeightFn = () => {
pageData.tableHeight = document.getElementById('zdrxxtj').offsetHeight - 160;
};
</script>
<style lang="scss" scoped>
@import "@/assets/css/homeScreen.scss";
.personBox{
width: 100%;
height: 100%;
overflow: hidden;
padding: 0 10px;
box-sizing: border-box;
.seachBox{
height: 40px;
margin: 10px 0;
}
::v-deep .el-input__inner{
background: rgba(0,22,83,0.4);
border-radius: 0;
border: 1px solid #0072FF;
color: #fff;
height: 40px;
}
::v-deep .el-button {
height: 40px;
border-radius: 0 4px 4px 0;
}
}
.tabsBtn{
font-size: 12px;
padding: 5px 10px;
background: #17459E;
border: 1px solid #36A0FF;
box-shadow: inset 0 0 1px #5D82D9;
}
.active0{
background: #36A0FF;
border-radius: 4px 0px 0px 4px;
border: 1px solid #36A0FF;
}
.active1{
background: #36A0FF;
border-radius: 0px 4px 4px 0px;
border: 1px solid #36A0FF;
}
.transition {
transition: all 0.5s;
}
</style>
<style lang="scss">
.zdy_peo_table td.el-table__cell {
color: #ffffff !important;
}
.zdy_peo_table th.el-table__cell {
color: #ffffff !important;
font-size: 15px;
}
.zdy_peo_table .el-table__body tr.el-table__row--striped td.el-table__cell{
background: transparent !important;
}
.zdy_peo_table .table_blue_row{
background: linear-gradient( to right, #001D4B 0%, rgba(0,29,75,0.1) 100%) !important;
}
</style>

91
src/views/KeyPopulations/model/yjclqktj.vue Normal file
View File

@ -0,0 +1,91 @@
<template>
<div class="yjclqkBox" id="yjqktj">
<div class="asideTitle">
<span class="title">预警处理情况统计</span>
<span style="color:#00B7FF;" class="f12 pointer">查看更多 》</span>
</div>
<div class="asideCnt">
<MyTable @changePage="changePage" customClass="zdy_peo_table" :tableData="pageData.tableData" :tableColumn="pageData.tableColumn" :tableHeight="pageData.tableHeight" :key="pageData.keyCount" :tableConfiger="pageData.tableConfiger" >
</MyTable>
</div>
</div>
</template>
<script setup>
import MyTable from "@/components/aboutTable/DarkTable.vue";
import { reactive, ref,onMounted } from "vue";
const pageData = reactive({
tableData: [
{ mc: "聚集事件", rs: "30", sj: "2024-10-10" },
{ mc: "聚集事件", rs: "30", sj: "2024-10-10" },
{ mc: "聚集事件", rs: "30", sj: "2024-10-10" },
{ mc: "聚集事件", rs: "30", sj: "2024-10-10" },
{ mc: "聚集事件", rs: "30", sj: "2024-10-10" },
{ mc: "聚集事件", rs: "30", sj: "2024-10-10" },
{ mc: "聚集事件", rs: "30", sj: "2024-10-10" },
{ mc: "聚集事件", rs: "30", sj: "2024-10-10" },
{ mc: "聚集事件", rs: "30", sj: "2024-10-10" },
{ mc: "聚集事件", rs: "30", sj: "2024-10-10" },
],
keyCount: 0,
tableConfiger: {
loading: false,
rowHieght: 61,
haveControls: false,
showSelectType: "null",
stripe:true
},
total: 0,
pageConfiger: {
pageSize: 20,
pageNum: 1
}, //分页
tableColumn: [
{ label: "任务名称", prop: "mc", showOverflowTooltip: true },
{ label: "已稳控人数", prop: "rs",showOverflowTooltip: true },
{ label: "时间", prop: "sj",showOverflowTooltip: true },
]
});
onMounted(() => {
tabHeightFn();
window.onresize = function () {
tabHeightFn();
};
});
const changeDate = (val) =>{
active.value = val;
}
// 滚动分页加载
const changePage = () =>{
}
// 表格高度计算
const tabHeightFn = () => {
pageData.tableHeight = document.getElementById('yjqktj').offsetHeight - 40;
};
</script>
<style lang="scss" scoped>
@import "@/assets/css/homeScreen.scss";
.homeBox .home-contant .home-aside .asideTitle{
padding: 0 0 0 10px;
}
.yjclqkBox{
width: 100%;
height: 100%;
overflow: hidden;
padding: 0 10px;
box-sizing: border-box;
::v-deep .el-input__inner{
background: rgba(0,22,83,0.4);
border-radius: 0;
border: 1px solid #0072FF;
color: #fff;
height: 40px;
}
}
</style>

56
src/views/KeyPopulations/model/zdrqhd.vue Normal file
View File

@ -0,0 +1,56 @@
<template>
<div class="rqBox" id="zdrxxtj">
<div class="asideTitle">
<span class="title">重点人群活动</span>
<MOSTY.Select v-model="listQuery.time" style="width: 120px;margin-right:10px" :dictEnum="time" clearable placeholder="选择标签" />
</div>
<div class="asideCnt">
<lineEcharts echartsId="zdrqEcharts" :data="listDate"></lineEcharts>
</div>
</div>
</template>
<script setup>
import lineEcharts from "@/views/home/echarts/lineEcharts.vue";
import * as MOSTY from "@/components/MyComponents/index";
import { reactive, ref,onMounted } from "vue";
const time = reactive( [
{ label: "今天", value: "10" },
{ label: "昨天", value: "20" },
{ label: "近三天", value: "30" },
{ label: "近一周", value: "40" },
{ label: "近一月", value: "50" },
]);
const listQuery = ref({})
const listDate = ref([
{label:'2021',value:10},
{label:'2022',value:20},
{label:'2023',value:50},
{label:'2024',value:40},
{label:'2025',value:30},
{label:'2026',value:45},
])
</script>
<style lang="scss" scoped>
@import "@/assets/css/homeScreen.scss";
.homeBox .home-contant .home-aside .asideTitle{
padding: 0 0 0 10px;
}
.rqBox{
width: 100%;
height: 100%;
overflow: hidden;
padding: 0 10px;
box-sizing: border-box;
::v-deep .el-input__inner{
background: rgba(0,22,83,0.4);
border-radius: 0;
border: 1px solid #0072FF;
color: #fff;
height: 40px;
}
}
</style>

31
src/views/home/echarts/lineEcharts.vue
View File

@ -25,7 +25,7 @@ function chartFn() {
grid: {
top: "8%",
right: "2%",
left: "2%",
left: "10%",
bottom: "7%",
containLabel:true
},
@ -46,15 +46,14 @@ function chartFn() {
xAxis: {
type: "category",
data:props.data.map(v=>{return v.label}),
boundaryGap: false,
axisTick: {
show: false
},
axisLine: {
show: false
},
axisTick: { show: false },
axisLine: { show: false },
axisLabel: { color: "#fff" },
axisLabel: {
show: false
show: true,
color: "#fff",
interval: 0, // 强制显示所有标签
// rotate: 15, // 标签旋转角度
}
},
yAxis: {
@ -66,22 +65,16 @@ function chartFn() {
color: "rgba(14,95,255,0.5)"
}
},
axisTick: {
show: false
},
axisLine: {
show: false
},
axisLabel: {
show:false
},
axisTick: { show: false },
axisLine: { show: false },
axisLabel: { color: "#fff" },
},
series: [
{
type: "line",
smooth:true,
showSymbol:false,
data: props.data.map(v=>{return v.val}),
data: props.data.map(v=>{return v.value}),
areaStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{

1
src/views/home/echarts/moreLineEcharts.vue
View File

@ -85,7 +85,6 @@ function chartFn(series) {
xAxis: {
type: "category",
data:props.data.xData,
boundaryGap: false,
axisTick: { show: false },
axisLine: { show: false },
axisLabel: { color: "#fff" },

2
src/views/home/model/yszs.vue
View File

@ -4,7 +4,7 @@
<div class="mr10"><img :src="item.icon" alt=""></div>
<div class="vountItem">
<div style="color:#0072FF" class="f16 lh20">{{ item.label }}</div>
<div class="mt4 f12">{{ item.value }}</div>
<div class="mt4 f12" style="color: #333;">{{ item.value }}</div>
</div>
</div>
</div>