更新大屏
This commit is contained in:
138
src/views/home/model/bkcz.vue
Normal file
138
src/views/home/model/bkcz.vue
Normal file
@ -0,0 +1,138 @@
|
||||
<template>
|
||||
<div class="comom-title">
|
||||
<div class="title">
|
||||
<span class="mr12 pointer nowrap" :style="{fontSize:activeIndex == idx ? '22px':'18px'} " v-for="(it,idx) in btns" :key="idx" @click="activeIndex = idx">{{ it }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="comom-cnt" id="qcbk">
|
||||
<MyTable @changePage="changePage" customClass="zdy_bkcz_table" :tableData="pageData.tableData" :tableColumn="pageData.tableColumn" :tableHeight="pageData.tableHeight" :key="pageData.keyCount" :tableConfiger="pageData.tableConfiger" >
|
||||
<template #tp="{row}">
|
||||
<img width="30" src="@/assets/images/icon100.png" alt="">
|
||||
</template>
|
||||
<template #czzt="{row}">
|
||||
<span style="color:#FDBC3A">{{ row.czzt }}</span>
|
||||
</template>
|
||||
</MyTable>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import MyTable from "@/components/aboutTable/DarkTable.vue";
|
||||
import { reactive, ref,onMounted } from "vue";
|
||||
const btns = reactive(["全域布控处置重点人员", "全域布控处置重点群体"]);
|
||||
const activeIndex = ref(0);
|
||||
const pageData = reactive({
|
||||
tableData: [
|
||||
{
|
||||
tp: "https://example.com/photo1.jpg",
|
||||
xm: "张三",
|
||||
xb: "男",
|
||||
sfzh: "330102199001011234",
|
||||
gkdw: "城东派出所",
|
||||
hdsj: "2023-12-25 14:30",
|
||||
sfdz: "杭州市上城区平海路123号",
|
||||
czzt: "已处置"
|
||||
},
|
||||
{
|
||||
tp: "https://example.com/photo2.jpg",
|
||||
xm: "李四",
|
||||
xb: "女",
|
||||
sfzh: "330102199203034567",
|
||||
gkdw: "城西派出所",
|
||||
hdsj: "2023-12-25 16:45",
|
||||
sfdz: "杭州市西湖区文三路456号",
|
||||
czzt: "待处置"
|
||||
},
|
||||
{
|
||||
tp: "https://example.com/photo3.jpg",
|
||||
xm: "王五",
|
||||
xb: "男",
|
||||
sfzh: "330102199505057890",
|
||||
gkdw: "城北派出所",
|
||||
hdsj: "2023-12-25 09:15",
|
||||
sfdz: "杭州市拱墅区莫干山路789号",
|
||||
czzt: "处置中"
|
||||
},
|
||||
{
|
||||
tp: "https://example.com/photo3.jpg",
|
||||
xm: "王五",
|
||||
xb: "男",
|
||||
sfzh: "330102199505057890",
|
||||
gkdw: "城北派出所",
|
||||
hdsj: "2023-12-25 09:15",
|
||||
sfdz: "杭州市拱墅区莫干山路789号",
|
||||
czzt: "处置中"
|
||||
},
|
||||
],
|
||||
keyCount: 0,
|
||||
tableConfiger: {
|
||||
loading: false,
|
||||
rowHieght: 61,
|
||||
haveControls: false,
|
||||
showSelectType: "null",
|
||||
showIndex: false,
|
||||
stripe:true
|
||||
},
|
||||
total: 0,
|
||||
pageConfiger: {
|
||||
pageSize: 20,
|
||||
pageNum: 1
|
||||
}, //分页
|
||||
tableColumn: [
|
||||
{ label: "照片", prop: "tp", showSolt: true },
|
||||
{ label: "姓名", prop: "xm", showOverflowTooltip: true },
|
||||
{ label: "性别", prop: "xb" ,showOverflowTooltip: true},
|
||||
{ label: "身份证号码", prop: "sfzh",showOverflowTooltip: true },
|
||||
{ label: "管控单位", prop: "gkdw" ,showOverflowTooltip: true},
|
||||
{ label: "活动时间", prop: "hdsj" ,showOverflowTooltip: true},
|
||||
{ label: "活动发生地址", prop: "sfdz" ,showOverflowTooltip: true},
|
||||
{ label: "处置状态", prop: "czzt",showOverflowTooltip: true,showSolt: true },
|
||||
]
|
||||
});
|
||||
|
||||
onMounted(() => {
|
||||
tabHeightFn();
|
||||
});
|
||||
|
||||
const changePage = () => {
|
||||
console.log('触底加载==========');
|
||||
};
|
||||
|
||||
const tabHeightFn = () => {
|
||||
pageData.tableHeight = document.getElementById('qcbk').offsetHeight - 10;
|
||||
window.onresize = function () {
|
||||
tabHeightFn();
|
||||
};
|
||||
};
|
||||
|
||||
</script>
|
||||
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import "@/assets/css/homeScreen.scss";
|
||||
::v-deeep .comom-title{
|
||||
background: url("~@/assets/images/bg18.png") no-repeat center center;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
::v-deeep .comom-cnt{
|
||||
background: url("~@/assets/images/bg18.png") no-repeat center center;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
|
||||
::v-deep .el-table td.el-table__cell{
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
::v-deep .el-table--striped .el-table__body tr.el-table__row--striped td.el-table__cell{
|
||||
background: rgba(0,61,130,0.75);
|
||||
}
|
||||
</style>
|
||||
<style lang="scss">
|
||||
.zdy_bkcz_table td.el-table__cell {
|
||||
color: #ffffff !important;
|
||||
}
|
||||
.zdy_bkcz_table th.el-table__cell {
|
||||
color: #ffffff !important;
|
||||
font-size: 15px;
|
||||
}
|
||||
</style>
|
||||
40
src/views/home/model/dbCount.vue
Normal file
40
src/views/home/model/dbCount.vue
Normal file
@ -0,0 +1,40 @@
|
||||
<template>
|
||||
<div class="comom-title">
|
||||
<span class="title">线索研判盯办统计</span>
|
||||
</div>
|
||||
<ul class="comom-cnt xsBox flex flex-warp just-between align-center">
|
||||
<li class="xs-item" v-for="(item, idx) in contentItem" :key="idx">
|
||||
{{ item.label }}:{{ item.value }}条
|
||||
</li>
|
||||
</ul>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from 'vue';
|
||||
const contentItem = ref([
|
||||
{label:'线索总数',value:'892'},
|
||||
{label:'下发总数',value:'892'},
|
||||
{label:'已处置总数',value:'892'},
|
||||
{label:'反馈总数',value:'892'},
|
||||
{label:'未反馈总数',value:'892'},
|
||||
{label:'未处置总数',value:'892'},
|
||||
])
|
||||
</script>
|
||||
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import "@/assets/css/homeScreen.scss";
|
||||
.xsBox{
|
||||
background: url("~@/assets/images/bg_12.png") no-repeat center center;
|
||||
background-size: 100% 100%;
|
||||
.xs-item{
|
||||
width: 31%;
|
||||
height: 36px;
|
||||
line-height: 36px;
|
||||
text-align: center;
|
||||
background: url("~@/assets/images/content-item.png") no-repeat center center;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
139
src/views/home/model/fjqk.vue
Normal file
139
src/views/home/model/fjqk.vue
Normal file
@ -0,0 +1,139 @@
|
||||
<template>
|
||||
<div class="comom-title">
|
||||
<div class="title">重点人发掘情况</div>
|
||||
</div>
|
||||
<div class="comom-cnt" id="fjfk">
|
||||
<MyTable
|
||||
@changePage="changePage"
|
||||
customClass="zdy_bkcz_table"
|
||||
:tableData="pageData.tableData"
|
||||
:tableColumn="pageData.tableColumn"
|
||||
:tableHeight="pageData.tableHeight"
|
||||
:key="pageData.keyCount"
|
||||
:tableConfiger="pageData.tableConfiger"
|
||||
>
|
||||
<template #tp="{ row }">
|
||||
<img width="30" src="@/assets/images/icon100.png" alt="" />
|
||||
</template>
|
||||
</MyTable>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import MyTable from "@/components/aboutTable/DarkTable.vue";
|
||||
import { reactive, onMounted } from "vue";
|
||||
const pageData = reactive({
|
||||
tableData: [
|
||||
{
|
||||
tp: "https://example.com/photo1.jpg",
|
||||
xm: "张三",
|
||||
xb: "男",
|
||||
sfzh: "330102199001011234",
|
||||
gkyy: "抢劫xxxxx"
|
||||
},
|
||||
{
|
||||
tp: "https://example.com/photo2.jpg",
|
||||
xm: "李四",
|
||||
xb: "女",
|
||||
sfzh: "330102199203034567",
|
||||
gkyy: "抢劫xxxxx"
|
||||
},
|
||||
{
|
||||
tp: "https://example.com/photo3.jpg",
|
||||
xm: "王五",
|
||||
xb: "男",
|
||||
sfzh: "330102199505057890",
|
||||
gkyy: "抢劫xxxxx"
|
||||
},
|
||||
{
|
||||
tp: "https://example.com/photo3.jpg",
|
||||
xm: "王五",
|
||||
xb: "男",
|
||||
sfzh: "330102199505057890",
|
||||
gkyy: "抢劫xxxxx"
|
||||
},
|
||||
{
|
||||
tp: "https://example.com/photo3.jpg",
|
||||
xm: "王五",
|
||||
xb: "男",
|
||||
sfzh: "330102199505057890",
|
||||
gkyy: "抢劫xxxxx"
|
||||
},
|
||||
{
|
||||
tp: "https://example.com/photo3.jpg",
|
||||
xm: "王五",
|
||||
xb: "男",
|
||||
sfzh: "330102199505057890",
|
||||
gkyy: "抢劫xxxxx"
|
||||
}
|
||||
],
|
||||
keyCount: 0,
|
||||
tableConfiger: {
|
||||
loading: false,
|
||||
rowHieght: 61,
|
||||
haveControls: false,
|
||||
showSelectType: "null",
|
||||
showIndex: false,
|
||||
stripe: true
|
||||
},
|
||||
total: 0,
|
||||
pageConfiger: {
|
||||
pageSize: 20,
|
||||
pageNum: 1
|
||||
}, //分页
|
||||
tableColumn: [
|
||||
{ label: "照片", prop: "tp", showSolt: true },
|
||||
{ label: "姓名", prop: "xm", showOverflowTooltip: true },
|
||||
{ label: "性别", prop: "xb", showOverflowTooltip: true },
|
||||
{ label: "身份证号码", prop: "sfzh", showOverflowTooltip: true },
|
||||
{ label: "管控原因", prop: "gkyy", showOverflowTooltip: true }
|
||||
]
|
||||
});
|
||||
|
||||
onMounted(() => {
|
||||
tabHeightFn();
|
||||
});
|
||||
|
||||
const changePage = () => {
|
||||
console.log("触底加载==========");
|
||||
};
|
||||
|
||||
// 表格高度计算
|
||||
const tabHeightFn = () => {
|
||||
pageData.tableHeight = document.getElementById('fjfk').offsetHeight - 10;
|
||||
window.onresize = function () {
|
||||
tabHeightFn();
|
||||
};
|
||||
};
|
||||
|
||||
</script>
|
||||
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import "@/assets/css/homeScreen.scss";
|
||||
::v-deeep .comom-title {
|
||||
background: url("~@/assets/images/bg18.png") no-repeat center center;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
::v-deep .el-table td.el-table__cell {
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
::v-deep
|
||||
.el-table--striped
|
||||
.el-table__body
|
||||
tr.el-table__row--striped
|
||||
td.el-table__cell {
|
||||
background: rgba(0, 61, 130, 0.75);
|
||||
}
|
||||
</style>
|
||||
<style lang="scss">
|
||||
|
||||
.zdy_bkcz_table td.el-table__cell {
|
||||
color: #ffffff !important;
|
||||
}
|
||||
.zdy_bkcz_table th.el-table__cell {
|
||||
color: #ffffff !important;
|
||||
font-size: 15px;
|
||||
}
|
||||
</style>
|
||||
174
src/views/home/model/qbfkCount.vue
Normal file
174
src/views/home/model/qbfkCount.vue
Normal file
@ -0,0 +1,174 @@
|
||||
<template>
|
||||
<div class="comom-title">
|
||||
<span class="title">情报反馈统计</span>
|
||||
</div>
|
||||
<div class="comom-cnt">
|
||||
<div id="qbfk" class="qbfkBox" style="width: 100%; height: 100%"></div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, onMounted } from 'vue';
|
||||
import * as echarts from 'echarts';
|
||||
import 'echarts-gl';
|
||||
import { fa } from 'element-plus/es/locale.mjs';
|
||||
|
||||
const initChart = () => {
|
||||
const chartDom = document.getElementById('qbfk');
|
||||
const myChart = echarts.init(chartDom);
|
||||
|
||||
const option = {
|
||||
backgroundColor: 'transparent',
|
||||
tooltip: {
|
||||
trigger: 'item',
|
||||
formatter: '{a} <br/>{b}: {c} ({d}%)',
|
||||
backgroundColor: 'rgba(0,0,0,0.7)',
|
||||
borderColor: '#0C2E5A',
|
||||
textStyle: {
|
||||
color: '#fff'
|
||||
}
|
||||
},
|
||||
legend: {
|
||||
top: 'middle',
|
||||
right: '5%',
|
||||
orient: 'vertical',
|
||||
itemGap: 20,
|
||||
textStyle: {
|
||||
color: '#fff',
|
||||
fontSize: 14
|
||||
},
|
||||
itemWidth: 15,
|
||||
itemHeight: 15,
|
||||
icon: 'roundRect',
|
||||
formatter: function(name) {
|
||||
const data = option.series[0].data;
|
||||
const target = data.find(item => item.name === name);
|
||||
if (target) {
|
||||
return `${name} ${target.value} ${(target.value / 50 * 100).toFixed(0)}%`;
|
||||
}
|
||||
return name;
|
||||
}
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: '情报反馈统计',
|
||||
type: 'pie',
|
||||
radius: ['40%', '75%'],
|
||||
center: ['30%', '50%'],
|
||||
startAngle: 90,
|
||||
zlevel: 10,
|
||||
itemStyle: {
|
||||
borderRadius: 10,
|
||||
borderWidth: 2,
|
||||
borderColor: '#0C2E5A'
|
||||
},
|
||||
selectedMode: 'single',
|
||||
selectedOffset: 30,
|
||||
animation: true,
|
||||
animationType: 'scale',
|
||||
animationEasing: 'elasticOut',
|
||||
animationDelay: function (idx) {
|
||||
return Math.random() * 200;
|
||||
},
|
||||
label: {
|
||||
show: false,
|
||||
},
|
||||
labelLine: {
|
||||
show: false,
|
||||
},
|
||||
itemStyle: {
|
||||
borderWidth: 2,
|
||||
borderColor: '#0C2E5A',
|
||||
opacity: 0.8,
|
||||
shadowBlur: 20,
|
||||
shadowColor: 'rgba(0,0,0,0.5)'
|
||||
},
|
||||
data: [
|
||||
{
|
||||
value: 18,
|
||||
name: '实反馈',
|
||||
itemStyle: {
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{ offset: 0, color: '#FF6B9A' },
|
||||
{ offset: 1, color: '#FF4B7A' }
|
||||
])
|
||||
}
|
||||
},
|
||||
{
|
||||
value: 13,
|
||||
name: '超时反馈',
|
||||
itemStyle: {
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{ offset: 0, color: '#FFAA33' },
|
||||
{ offset: 1, color: '#FF8A00' }
|
||||
])
|
||||
}
|
||||
},
|
||||
{
|
||||
value: 17,
|
||||
name: '处置下发',
|
||||
itemStyle: {
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{ offset: 0, color: '#FFE699' },
|
||||
{ offset: 1, color: '#FFD666' }
|
||||
])
|
||||
}
|
||||
},
|
||||
{
|
||||
value: 2,
|
||||
name: '未反馈',
|
||||
itemStyle: {
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{ offset: 0, color: '#66B5FF' },
|
||||
{ offset: 1, color: '#3AA1FF' }
|
||||
])
|
||||
}
|
||||
}
|
||||
],
|
||||
zlevel: 10,
|
||||
emphasis: {
|
||||
scale: true,
|
||||
scaleSize: 10,
|
||||
itemStyle: {
|
||||
shadowBlur: 30,
|
||||
shadowColor: 'rgba(0,0,0,0.6)'
|
||||
}
|
||||
}
|
||||
}
|
||||
],
|
||||
|
||||
};
|
||||
|
||||
option && myChart.setOption(option);
|
||||
|
||||
// 监听窗口大小变化
|
||||
window.addEventListener('resize', () => {
|
||||
myChart.resize();
|
||||
});
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
initChart();
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import "@/assets/css/homeScreen.scss";
|
||||
.xsBox{
|
||||
background: #052249;
|
||||
.xs-item{
|
||||
width: 31%;
|
||||
height: 36px;
|
||||
line-height: 36px;
|
||||
text-align: center;
|
||||
background: url("~@/assets/images/content-item.png") no-repeat center center;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.qbfkBox {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
}
|
||||
</style>
|
||||
171
src/views/home/model/qblyType.vue
Normal file
171
src/views/home/model/qblyType.vue
Normal file
@ -0,0 +1,171 @@
|
||||
<template>
|
||||
<div class="comom-title">
|
||||
<span class="title">情报来源类型</span>
|
||||
</div>
|
||||
<div class="comom-cnt">
|
||||
<div id="qbltBox" class="qbltBox" style="width: 100%; height: 100%"></div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import LineEcharts from "../echarts/moreLineEcharts.vue";
|
||||
import * as echarts from "echarts";
|
||||
import { ref, onMounted, watch, defineProps } from "vue";
|
||||
|
||||
onMounted(() => {
|
||||
lineChartFn();
|
||||
});
|
||||
|
||||
function lineChartFn() {
|
||||
var chartDom = document.getElementById("qbltBox");
|
||||
var myChart = echarts.init(chartDom);
|
||||
var option;
|
||||
option = {
|
||||
legend: {
|
||||
type: "plain",
|
||||
show: true,
|
||||
right: 0,
|
||||
textStyle: { color: "#ddd" },
|
||||
data: [
|
||||
{ name: "总数" },
|
||||
{ name: "已处置" }
|
||||
]
|
||||
},
|
||||
tooltip: {
|
||||
trigger: "axis",
|
||||
axisPointer: {
|
||||
type: "shadow"
|
||||
}
|
||||
},
|
||||
grid: {
|
||||
top: "25%",
|
||||
right: "5%",
|
||||
left: "5%",
|
||||
bottom: "22%"
|
||||
},
|
||||
xAxis: [
|
||||
{
|
||||
type: "category",
|
||||
data: ['110警情','人力情报','系统采集','民警处置单'],
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: "rgba(255,255,255,0.12)"
|
||||
}
|
||||
},
|
||||
axisLabel: {
|
||||
margin: 10,
|
||||
color: "#e2e9ff",
|
||||
textStyle: {
|
||||
fontSize: 14
|
||||
}
|
||||
}
|
||||
}
|
||||
],
|
||||
yAxis: [
|
||||
{
|
||||
axisLabel: {
|
||||
formatter: "{value}",
|
||||
color: "#e2e9ff"
|
||||
},
|
||||
axisLine: {
|
||||
show: false,
|
||||
lineStyle: {
|
||||
color: "rgba(255,255,255,1)"
|
||||
}
|
||||
},
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
color: "rgba(255,255,255,0.12)"
|
||||
}
|
||||
}
|
||||
}
|
||||
],
|
||||
series: [
|
||||
{
|
||||
name: "总数",
|
||||
type: "bar",
|
||||
data: [10,20,30,40],
|
||||
barWidth: "10px",
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: new echarts.graphic.LinearGradient(0,0,0,1,[
|
||||
{
|
||||
offset: 0,
|
||||
color: "rgba(0,244,255,1)" // 0% 处的颜色
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: "rgba(0,77,167,1)" // 100% 处的颜色
|
||||
}
|
||||
],
|
||||
false
|
||||
),
|
||||
}
|
||||
},
|
||||
markPoint: {
|
||||
symbol: 'path://M62 62h900v900h-900v-900z', // 使用 SVG path 绘制扁圆形状
|
||||
symbolSize: [11, 4], // 设置扁圆的宽和高
|
||||
itemStyle: {
|
||||
color: '#087df9' // 圆盘颜色
|
||||
},
|
||||
data: [10,20,30,40].map((obj, index) => ({
|
||||
xAxis: index, // 对应柱子的横坐标
|
||||
yAxis: obj + 0 // 柱子的值加上一些偏移量
|
||||
}))
|
||||
},
|
||||
},
|
||||
{
|
||||
name: "已处置",
|
||||
type: "bar",
|
||||
data: [40,50,60,70],
|
||||
barWidth: "10px",
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: new echarts.graphic.LinearGradient(0,0,0,1,
|
||||
[
|
||||
{
|
||||
offset: 0,
|
||||
color: "rgba(24, 232, 229, 1)" // 0% 处的颜色
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: "rgba(3, 110, 83, 1)" // 100% 处的颜色
|
||||
}
|
||||
],
|
||||
false
|
||||
),
|
||||
}
|
||||
},
|
||||
markPoint: {
|
||||
symbol: 'path://M62 62h900v900h-900v-900z', // 使用 SVG path 绘制扁圆形状
|
||||
symbolSize: [11, 4], // 设置扁圆的宽和高
|
||||
itemStyle: {
|
||||
color: '#00FFFF' // 圆盘颜色
|
||||
},
|
||||
data: [40,50,60,70].map((obj, index) => ({
|
||||
xAxis: index, // 对应柱子的横坐标
|
||||
yAxis: obj + 0 // 柱子的值加上一些偏移量
|
||||
}))
|
||||
},
|
||||
},
|
||||
]
|
||||
};
|
||||
|
||||
option && myChart.setOption(option);
|
||||
window.onresize = function () {
|
||||
myChart.resize();
|
||||
};
|
||||
document.getElementById("qbltBox").setAttribute("_echarts_instance_", "");
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import "@/assets/css/homeScreen.scss";
|
||||
.qbltBox {
|
||||
height: 100%;
|
||||
background: rgba(0,29,75,0.6);
|
||||
border-radius: 0 0 4px 4px;
|
||||
}
|
||||
</style>
|
||||
29
src/views/home/model/qbsbCount.vue
Normal file
29
src/views/home/model/qbsbCount.vue
Normal file
@ -0,0 +1,29 @@
|
||||
<template>
|
||||
<div class="comom-title">
|
||||
<span class="title">情报上报数量统计</span>
|
||||
</div>
|
||||
<div class="comom-cnt qxsbBox">
|
||||
<LineEcharts echartsId="qbsbEcharts" :data="dataList"></LineEcharts>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { values } from "lodash";
|
||||
import LineEcharts from "../echarts/moreLineEcharts.vue";
|
||||
import { reactive, ref } from 'vue';
|
||||
|
||||
const dataList = reactive({
|
||||
xData:['巴宜区','工布江达县','米林县','墨脱县','波密县','察隅县','朗县'],
|
||||
color:['#0386FB','#00FFFF'],
|
||||
list:[
|
||||
{label:'总数',val:[30,20,10,60,50,60,35]},
|
||||
{label:'已处置',val:[40,30,20,50,30,44,50]},
|
||||
]
|
||||
});
|
||||
</script>
|
||||
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import "@/assets/css/homeScreen.scss";
|
||||
|
||||
</style>
|
||||
29
src/views/home/model/yszs.vue
Normal file
29
src/views/home/model/yszs.vue
Normal file
@ -0,0 +1,29 @@
|
||||
<template>
|
||||
<div class="ww100 h100 flex just-between align-center pl10 pr10">
|
||||
<div class="flex align-center" v-for="(item, idx) in contentItem" :key="idx">
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, reactive, onMounted } from "vue";
|
||||
const contentItem = ref([
|
||||
{ label: "线索总数", value: "892" ,icon:require('@/assets/images/top-1.png')},
|
||||
{ label: "已处置线索总数", value: "892",icon:require('@/assets/images/top-2.png') },
|
||||
{ label: "重点人总数", value: "892",icon:require('@/assets/images/top-3.png') },
|
||||
{ label: "重点群体总数", value: "892" ,icon:require('@/assets/images/top-4.png')},
|
||||
]);
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.vountItem{
|
||||
width: 128px;
|
||||
height: 50px;
|
||||
background: url('~@/assets/images/line.png') no-repeat bottom center;
|
||||
}
|
||||
</style>
|
||||
148
src/views/home/model/zdgk.vue
Normal file
148
src/views/home/model/zdgk.vue
Normal file
@ -0,0 +1,148 @@
|
||||
<template>
|
||||
<div class="comom-title">
|
||||
<div class="title">
|
||||
<span
|
||||
class="mr12 pointer nowrap"
|
||||
:style="{ fontSize: activeIndex == idx ? '22px' : '18px' }"
|
||||
v-for="(it, idx) in btns"
|
||||
:key="idx"
|
||||
@click="activeIndex = idx"
|
||||
>{{ it }}</span
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
<div id="zdgk" class="comom-cnt">
|
||||
<MyTable
|
||||
@changePage="changePage"
|
||||
customClass="zdy_bkcz_table"
|
||||
:tableData="pageData.tableData"
|
||||
:tableColumn="pageData.tableColumn"
|
||||
:tableHeight="pageData.tableHeight"
|
||||
:key="pageData.keyCount"
|
||||
:tableConfiger="pageData.tableConfiger"
|
||||
>
|
||||
<template #tp="{ row }">
|
||||
<img width="30" src="@/assets/images/icon100.png" alt="" />
|
||||
</template>
|
||||
</MyTable>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import MyTable from "@/components/aboutTable/DarkTable.vue";
|
||||
import { reactive, ref,onMounted } from "vue";
|
||||
const btns = reactive(["重点人管控信息", "重点全体管控信息"]);
|
||||
const activeIndex = ref(0);
|
||||
const pageData = reactive({
|
||||
tableData: [
|
||||
{
|
||||
tp: "https://example.com/photo1.jpg",
|
||||
xm: "张三",
|
||||
xb: "男",
|
||||
sfzh: "330102199001011234",
|
||||
gkyy: "抢劫xxxxx"
|
||||
},
|
||||
{
|
||||
tp: "https://example.com/photo2.jpg",
|
||||
xm: "李四",
|
||||
xb: "女",
|
||||
sfzh: "330102199203034567",
|
||||
gkyy: "抢劫xxxxx"
|
||||
},
|
||||
{
|
||||
tp: "https://example.com/photo3.jpg",
|
||||
xm: "王五",
|
||||
xb: "男",
|
||||
sfzh: "330102199505057890",
|
||||
gkyy: "抢劫xxxxx"
|
||||
},
|
||||
{
|
||||
tp: "https://example.com/photo3.jpg",
|
||||
xm: "王五",
|
||||
xb: "男",
|
||||
sfzh: "330102199505057890",
|
||||
gkyy: "抢劫xxxxx"
|
||||
},
|
||||
{
|
||||
tp: "https://example.com/photo3.jpg",
|
||||
xm: "王五",
|
||||
xb: "男",
|
||||
sfzh: "330102199505057890",
|
||||
gkyy: "抢劫xxxxx"
|
||||
},
|
||||
{
|
||||
tp: "https://example.com/photo3.jpg",
|
||||
xm: "王五",
|
||||
xb: "男",
|
||||
sfzh: "330102199505057890",
|
||||
gkyy: "抢劫xxxxx"
|
||||
}
|
||||
],
|
||||
keyCount: 0,
|
||||
tableConfiger: {
|
||||
loading: false,
|
||||
rowHieght: 61,
|
||||
haveControls: false,
|
||||
showSelectType: "null",
|
||||
showIndex: false,
|
||||
stripe: true
|
||||
},
|
||||
total: 0,
|
||||
pageConfiger: {
|
||||
pageSize: 20,
|
||||
pageNum: 1
|
||||
}, //分页
|
||||
tableColumn: [
|
||||
{ label: "照片", prop: "tp", showSolt: true },
|
||||
{ label: "姓名", prop: "xm", showOverflowTooltip: true },
|
||||
{ label: "性别", prop: "xb", showOverflowTooltip: true },
|
||||
{ label: "身份证号码", prop: "sfzh", showOverflowTooltip: true },
|
||||
{ label: "管控原因", prop: "gkyy", showOverflowTooltip: true }
|
||||
]
|
||||
});
|
||||
|
||||
onMounted(() => {
|
||||
tabHeightFn();
|
||||
window.onresize = function () {
|
||||
tabHeightFn();
|
||||
};
|
||||
});
|
||||
|
||||
// 表格高度计算
|
||||
const tabHeightFn = () => {
|
||||
pageData.tableHeight = document.getElementById('zdgk').offsetHeight - 10;
|
||||
};
|
||||
|
||||
const changePage = () => {
|
||||
console.log("触底加载==========");
|
||||
};
|
||||
</script>
|
||||
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import "@/assets/css/homeScreen.scss";
|
||||
::v-deeep .comom-title {
|
||||
background: url("~@/assets/images/bg18.png") no-repeat center center;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
::v-deep .el-table td.el-table__cell {
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
::v-deep
|
||||
.el-table--striped
|
||||
.el-table__body
|
||||
tr.el-table__row--striped
|
||||
td.el-table__cell {
|
||||
background: rgba(0, 61, 130, 0.75);
|
||||
}
|
||||
</style>
|
||||
<style lang="scss">
|
||||
.zdy_bkcz_table td.el-table__cell {
|
||||
color: #ffffff !important;
|
||||
}
|
||||
.zdy_bkcz_table th.el-table__cell {
|
||||
color: #ffffff !important;
|
||||
font-size: 15px;
|
||||
}
|
||||
</style>
|
||||
153
src/views/home/model/zdryWarning.vue
Normal file
153
src/views/home/model/zdryWarning.vue
Normal file
@ -0,0 +1,153 @@
|
||||
<template>
|
||||
<div class="comom-title">
|
||||
<span class="title">重点人员动态预警</span>
|
||||
</div>
|
||||
<div class="comom-cnt zdryBox">
|
||||
<div style="height:33px;">
|
||||
<CheckBox :data="checkData" @changeData="changeData"></CheckBox>
|
||||
</div>
|
||||
<ul class="ryBox" v-loading="loading">
|
||||
<li :class="item.isChecked ? 'active':''" v-for="item in personList" :key="item.id" >
|
||||
<YjItem :item="item"></YjItem>
|
||||
</li>
|
||||
<MOSTY.Empty :show="!loading && personList.length <= 0" :imgSize="120"></MOSTY.Empty>
|
||||
</ul>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import YjItem from "@/views/home/components/yjItem.vue";
|
||||
import * as MOSTY from "@/components/MyComponents/index";
|
||||
import CheckBox from "@/components/checkBox/index.vue";
|
||||
import { ref ,reactive} from 'vue';
|
||||
const checkData = reactive({
|
||||
list: ["红", "橙", "黄", "蓝"],
|
||||
hasChoose: ["红"]
|
||||
});
|
||||
const loading = ref(false); // 加载中
|
||||
const personList = ref([
|
||||
{
|
||||
image: require("@/assets/images/person.png"),
|
||||
name: "张三",
|
||||
gender: "男",
|
||||
similarity: 85,
|
||||
sfzh:'11010119900307121X',
|
||||
age: 25,
|
||||
mz:'汉',
|
||||
warningTime: "2025-02-15 13: 00",
|
||||
location: "林艺市八宫区天山路宫区天山路宫区天山路",
|
||||
yjjb:'10',
|
||||
yjnr:'2024-02-05 12:10:10 默默人在在某某公园持枪抢劫'
|
||||
},
|
||||
{
|
||||
image: require("@/assets/images/person.png"),
|
||||
name: "张三",
|
||||
gender: "男",
|
||||
age: 25,
|
||||
sfzh:'11010119900307121X',
|
||||
mz:'汉',
|
||||
similarity: 85,
|
||||
warningTime: "2025-02-15 13: 00",
|
||||
location: "林艺市八宫区天山路宫区天山路宫区天山路",
|
||||
yjjb:'20',
|
||||
yjnr:'2024-02-05 12:10:10 默默人在在某某公园持枪抢劫'
|
||||
},
|
||||
{
|
||||
image: require("@/assets/images/person.png"),
|
||||
name: "张三",
|
||||
gender: "男",
|
||||
age: 25,
|
||||
mz:'汉',
|
||||
sfzh:'11010119900307121X',
|
||||
similarity: 85,
|
||||
warningTime: "2025-02-15 13: 00",
|
||||
location: "林艺市八宫区天山路...",
|
||||
yjjb:'30',
|
||||
yjnr:'2024-02-05 12:10:10 默默人在在某某公园持枪抢劫'
|
||||
},
|
||||
{
|
||||
image: require("@/assets/images/person.png"),
|
||||
name: "张三",
|
||||
gender: "男",
|
||||
age: 25,
|
||||
mz:'汉',
|
||||
sfzh:'11010119900307121X',
|
||||
similarity: 85,
|
||||
warningTime: "2025-02-15 13: 00",
|
||||
location: "林艺市八宫区天山路...",
|
||||
yjjb:'40',
|
||||
yjnr:'2024-02-05 12:10:10 默默人在在某某公园持枪抢劫'
|
||||
},
|
||||
]);
|
||||
// 复选框切换
|
||||
function changeData(){
|
||||
console.log('切换');
|
||||
}
|
||||
|
||||
|
||||
const contentItem = ref([
|
||||
{label:'线索总数',value:'892'},
|
||||
{label:'下发总数',value:'892'},
|
||||
{label:'已处置总数',value:'892'},
|
||||
{label:'反馈总数',value:'892'},
|
||||
{label:'未反馈总数',value:'892'},
|
||||
{label:'未处置总数',value:'892'},
|
||||
])
|
||||
</script>
|
||||
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import "@/assets/css/homeScreen.scss";
|
||||
.zdryBox{
|
||||
background: #052249;
|
||||
.ryBox{
|
||||
height: calc(100% - 33px);
|
||||
overflow: hidden;
|
||||
overflow-y: auto;
|
||||
}
|
||||
}
|
||||
|
||||
::-webkit-scrollbar {
|
||||
background-color: #263b70;
|
||||
}
|
||||
::-webkit-scrollbar-thumb {
|
||||
background-color: #146bbe;
|
||||
}
|
||||
::-webkit-scrollbar-track {
|
||||
background-color: #263b70;
|
||||
}
|
||||
::-webkit-scrollbar-corner {
|
||||
background-color: #142141;
|
||||
}
|
||||
|
||||
::v-deep .el-checkbox__label{
|
||||
color:#fff;
|
||||
}
|
||||
::v-deep .el-checkbox__input.is-checked+.el-checkbox__label{
|
||||
color:#00FFFF;
|
||||
}
|
||||
::v-deep .el-checkbox__inner{
|
||||
background:rgba(0,144,255,0.2);
|
||||
border:1px solid #0072FF;
|
||||
}
|
||||
::v-deep .el-checkbox__input.is-checked .el-checkbox__inner{
|
||||
background-color: #00FFFF;
|
||||
border-color:#00FFFF;
|
||||
}
|
||||
::v-deep .el-checkbox__input.is-indeterminate .el-checkbox__inner{
|
||||
background-color: #00FFFF;
|
||||
border-color:#00FFFF;
|
||||
}
|
||||
::v-deep .el-checkbox__inner::after{
|
||||
border:2px solid #000;
|
||||
border-left:0;
|
||||
border-top:0;
|
||||
left:3px;
|
||||
top:0px;
|
||||
}
|
||||
::v-deep .el-checkbox__input.is-indeterminate .el-checkbox__inner::before{
|
||||
background: #000;
|
||||
}
|
||||
|
||||
|
||||
</style>
|
||||
Reference in New Issue
Block a user