更新重点人员大屏
This commit is contained in:
parent
ed4849b193
commit
2703819710
BIN
src/assets/images/home_btns_active.png
Normal file
BIN
src/assets/images/home_btns_active.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 5.1 KiB |
44
src/views/KeyPopulations/index.vue
Normal file
44
src/views/KeyPopulations/index.vue
Normal 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
158
src/views/KeyPopulations/model/importantPerson.vue
Normal 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
91
src/views/KeyPopulations/model/yjclqktj.vue
Normal 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
56
src/views/KeyPopulations/model/zdrqhd.vue
Normal 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>
|
||||||
|
|
@ -25,7 +25,7 @@ function chartFn() {
|
||||||
grid: {
|
grid: {
|
||||||
top: "8%",
|
top: "8%",
|
||||||
right: "2%",
|
right: "2%",
|
||||||
left: "2%",
|
left: "10%",
|
||||||
bottom: "7%",
|
bottom: "7%",
|
||||||
containLabel:true
|
containLabel:true
|
||||||
},
|
},
|
||||||
|
|
@ -46,15 +46,14 @@ function chartFn() {
|
||||||
xAxis: {
|
xAxis: {
|
||||||
type: "category",
|
type: "category",
|
||||||
data:props.data.map(v=>{return v.label}),
|
data:props.data.map(v=>{return v.label}),
|
||||||
boundaryGap: false,
|
axisTick: { show: false },
|
||||||
axisTick: {
|
axisLine: { show: false },
|
||||||
show: false
|
axisLabel: { color: "#fff" },
|
||||||
},
|
|
||||||
axisLine: {
|
|
||||||
show: false
|
|
||||||
},
|
|
||||||
axisLabel: {
|
axisLabel: {
|
||||||
show: false
|
show: true,
|
||||||
|
color: "#fff",
|
||||||
|
interval: 0, // 强制显示所有标签
|
||||||
|
// rotate: 15, // 标签旋转角度
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
yAxis: {
|
yAxis: {
|
||||||
|
|
@ -66,22 +65,16 @@ function chartFn() {
|
||||||
color: "rgba(14,95,255,0.5)"
|
color: "rgba(14,95,255,0.5)"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
axisTick: {
|
axisTick: { show: false },
|
||||||
show: false
|
axisLine: { show: false },
|
||||||
},
|
axisLabel: { color: "#fff" },
|
||||||
axisLine: {
|
|
||||||
show: false
|
|
||||||
},
|
|
||||||
axisLabel: {
|
|
||||||
show:false
|
|
||||||
},
|
|
||||||
},
|
},
|
||||||
series: [
|
series: [
|
||||||
{
|
{
|
||||||
type: "line",
|
type: "line",
|
||||||
smooth:true,
|
smooth:true,
|
||||||
showSymbol:false,
|
showSymbol:false,
|
||||||
data: props.data.map(v=>{return v.val}),
|
data: props.data.map(v=>{return v.value}),
|
||||||
areaStyle: {
|
areaStyle: {
|
||||||
normal: {
|
normal: {
|
||||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
|
||||||
|
|
|
||||||
|
|
@ -85,7 +85,6 @@ function chartFn(series) {
|
||||||
xAxis: {
|
xAxis: {
|
||||||
type: "category",
|
type: "category",
|
||||||
data:props.data.xData,
|
data:props.data.xData,
|
||||||
boundaryGap: false,
|
|
||||||
axisTick: { show: false },
|
axisTick: { show: false },
|
||||||
axisLine: { show: false },
|
axisLine: { show: false },
|
||||||
axisLabel: { color: "#fff" },
|
axisLabel: { color: "#fff" },
|
||||||
|
|
|
||||||
|
|
@ -4,7 +4,7 @@
|
||||||
<div class="mr10"><img :src="item.icon" alt=""></div>
|
<div class="mr10"><img :src="item.icon" alt=""></div>
|
||||||
<div class="vountItem">
|
<div class="vountItem">
|
||||||
<div style="color:#0072FF" class="f16 lh20">{{ item.label }}</div>
|
<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>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue
Block a user