lcw
This commit is contained in:
250
src/views/home/model/WarningDistrict.vue
Normal file
250
src/views/home/model/WarningDistrict.vue
Normal file
@ -0,0 +1,250 @@
|
||||
<template>
|
||||
<div class="comom-title">
|
||||
<span class="title">预警地域统计</span>
|
||||
</div>
|
||||
<div class="comom-cnt zdryBox">
|
||||
<!-- 滚动容器 -->
|
||||
<div class="scroll-container" @mouseenter="mEnter" @mouseleave="mLeave">
|
||||
<div class="scroll-wrapper" :style="{ transform: `translateY(-${scrollTop}px)` }">
|
||||
<ul ref="scrollItemBox" class="scroll-content">
|
||||
<!-- 数据项 -->
|
||||
<li v-for="(item, index) in dataList" :key="`first-${index}`" class="warning-item">
|
||||
<div class="rank-number"> {{ `${index >= 10 ? index : '0' + (index + 1)}` }}</div>
|
||||
<div class="bar">
|
||||
<div class="qymc">{{ item.name }}</div>
|
||||
<div class="jutz">
|
||||
<div class="jutf">
|
||||
<div class="jutf-bar" :style="{ width: item.bfb }"></div>
|
||||
</div>
|
||||
<div class="numbers">
|
||||
{{ item.value }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<!-- 复制的数据项用于无缝滚动 -->
|
||||
<li v-for="(item, index) in dataList" :key="`first-${index}`" class="warning-item">
|
||||
<div class="rank-number">
|
||||
{{ `${index >= 10 ? index : '0' + (index + 1)}` }}</div>
|
||||
<div class="bar">
|
||||
<div class="qymc">{{ item.name }}</div>
|
||||
<div class="jutz">
|
||||
<div class="jutf">
|
||||
<div class="jutf-bar" :style="{ width: item.bfb }"></div>
|
||||
</div>
|
||||
<div class="numbers">
|
||||
{{ item.value }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, onMounted, onUnmounted } from 'vue'
|
||||
import { tbYjxxGetBmtj } from '@/api/yj'
|
||||
// 滚动相关变量
|
||||
const scrollTop = ref(0); // 列表滚动高度
|
||||
const speed = ref(60); // 滚动速度
|
||||
const copyHtml = ref(''); // 复制的HTML内容
|
||||
const scrollItemBox = ref(null); // 滚动项容器引用
|
||||
let timer = null;
|
||||
|
||||
// 生命周期钩子
|
||||
onMounted(() => {
|
||||
// 初始化滚动
|
||||
initScroll();
|
||||
});
|
||||
|
||||
// 组件卸载时清除定时器
|
||||
onUnmounted(() => {
|
||||
if (timer) {
|
||||
clearInterval(timer);
|
||||
}
|
||||
});
|
||||
|
||||
// 初始化滚动
|
||||
function initScroll() {
|
||||
setTimeout(() => {
|
||||
if (scrollItemBox.value) {
|
||||
copyHtml.value = scrollItemBox.value.innerHTML;
|
||||
startScroll();
|
||||
}
|
||||
}, 100);
|
||||
}
|
||||
const dataList = ref([])
|
||||
// 鼠标移入停止滚动
|
||||
function mEnter() {
|
||||
if (timer) {
|
||||
clearInterval(timer);
|
||||
timer = null;
|
||||
}
|
||||
}
|
||||
|
||||
// 鼠标移出继续滚动
|
||||
function mLeave() {
|
||||
startScroll();
|
||||
}
|
||||
const gettbYjxxGetBmtj = () => {
|
||||
tbYjxxGetBmtj({}).then(res => {
|
||||
const total = res.reduce((acc, cur) => acc + Number(cur.sl), 0);
|
||||
dataList.value = res.map(item => {
|
||||
let bfb = total > 0 ? item.sl / total * 100 : 0
|
||||
if (bfb > 100) {
|
||||
bfb = 100
|
||||
}
|
||||
return {
|
||||
value: item.sl,
|
||||
name: item.ssbmmc,
|
||||
bfb: bfb + '%'
|
||||
}
|
||||
})
|
||||
})
|
||||
}
|
||||
gettbYjxxGetBmtj()
|
||||
// 开始滚动
|
||||
function startScroll() {
|
||||
if (timer) return;
|
||||
timer = setInterval(() => {
|
||||
scrollTop.value++;
|
||||
// 获取需要滚动的盒子的高度
|
||||
if (scrollItemBox.value) {
|
||||
const scrollHeight = scrollItemBox.value.offsetHeight / 2; // 因为有两份相同数据
|
||||
// 当滚动高度大于等于盒子高度时，从头开始滚动
|
||||
if (scrollTop.value >= scrollHeight) {
|
||||
scrollTop.value = 0;
|
||||
}
|
||||
}
|
||||
}, speed.value);
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import "@/assets/css/homeScreen.scss";
|
||||
|
||||
.zdryBox {
|
||||
background: #052249;
|
||||
height: 100%;
|
||||
padding: 10px;
|
||||
|
||||
// 滚动容器样式
|
||||
.scroll-container {
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
border-radius: 8px;
|
||||
background: rgba(8, 42, 85, 0.5);
|
||||
// padding: 10px;
|
||||
}
|
||||
|
||||
// 滚动包装器
|
||||
.scroll-wrapper {
|
||||
width: 100%;
|
||||
transition: transform 0s linear;
|
||||
}
|
||||
|
||||
// 滚动内容样式
|
||||
.scroll-content {
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
// 警告列表项样式
|
||||
.warning-item {
|
||||
display: flex;
|
||||
// align-items: center;
|
||||
margin-top: 12px;
|
||||
margin-bottom: 12px;
|
||||
padding: 5px 10px;
|
||||
justify-content: space-between;
|
||||
list-style: none;
|
||||
background: linear-gradient(90deg, rgba(10, 45, 90, 0.8), rgba(15, 50, 100, 0.5));
|
||||
border-left: 3px solid transparent;
|
||||
border-radius: 6px;
|
||||
// transition: all 0.3s ease;
|
||||
backdrop-filter: blur(4px);
|
||||
|
||||
// // 排名1-3的特殊样式
|
||||
// &:nth-child(1),
|
||||
// &:nth-child(11) {
|
||||
// border-left-color: #FFD700; // 金色
|
||||
// background: linear-gradient(90deg, rgba(255, 215, 0, 0.15), rgba(15, 50, 100, 0.5));
|
||||
// }
|
||||
|
||||
// &:nth-child(2),
|
||||
// &:nth-child(12) {
|
||||
// border-left-color: #C0C0C0; // 银色
|
||||
// background: linear-gradient(90deg, rgba(192, 192, 192, 0.15), rgba(15, 50, 100, 0.5));
|
||||
// }
|
||||
|
||||
// &:nth-child(3),
|
||||
// &:nth-child(13) {
|
||||
// border-left-color: #CD7F32; // 铜色
|
||||
// background: linear-gradient(90deg, rgba(205, 127, 50, 0.15), rgba(15, 50, 100, 0.5));
|
||||
// }
|
||||
}
|
||||
|
||||
// 排名数字样式
|
||||
.rank-number {
|
||||
width: 40px;
|
||||
border-radius: 4px;
|
||||
margin-right: 10px;
|
||||
color: #fff;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
font-weight: bold;
|
||||
font-size: 18px;
|
||||
position: relative;
|
||||
font-family: "YSBTH";
|
||||
overflow: hidden;
|
||||
background: url('~@/assets/images/tmd.png') no-repeat center center;
|
||||
// background-image: url('~@/assets/images/tmd.png') center center no-repeat;
|
||||
background-size: 100% 100%;
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.bar {
|
||||
flex: 1;
|
||||
|
||||
.qymc {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.jutz {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.jutf {
|
||||
height: 10px;
|
||||
flex: 1;
|
||||
background-color: rgba(0, 108, 151, 0.165);
|
||||
|
||||
.jutf-bar {
|
||||
background: linear-gradient(0deg, #fddb92 0%, #d1fdff 100%);
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.numbers {
|
||||
font-family: "YSBTH";
|
||||
width: 55px;
|
||||
text-align: center;
|
||||
font-size: 18px;
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
</style>
|
||||
178
src/views/home/model/bkcz copy.vue
Normal file
178
src/views/home/model/bkcz copy.vue
Normal file
@ -0,0 +1,178 @@
|
||||
<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="changeActive(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" height="30" src="" alt=""> -->
|
||||
<template v-if="!row.ryzp || row.ryzp.includes('baidu')">
|
||||
<img src="@/assets/images/default_male.png" width="30" height="30" />
|
||||
</template>
|
||||
<el-image v-else :preview-teleported="true" style="width: 30px; height: 30px" :src="row.ryzp"
|
||||
:preview-src-list="[row.ryzp]" show-progress>
|
||||
<template #error>
|
||||
<div class="image-slot error">
|
||||
<img src="@/assets/images/default_male.png" width="30" height="30"/>
|
||||
</div>
|
||||
</template>
|
||||
</el-image>
|
||||
</template>
|
||||
<template #ryXb="{row}">
|
||||
<DictTag :tag="false" :value="row.ryXb" color="#fff" :options="D_BZ_XB"/>
|
||||
</template>
|
||||
<template #zdrRyjb="{row}">
|
||||
<DictTag :tag="false" :value="row.zdrRyjb" color="#fff" :options="D_GS_ZDR_RYJB"/>
|
||||
</template>
|
||||
<template #zdrBkZt="{row}">
|
||||
<DictTag :tag="false" :value="row.zdrBkZt" color="#fff" :options="D_GS_ZDR_BK_ZT"/>
|
||||
</template>
|
||||
<template #zdrCzzt="{row}">
|
||||
<DictTag :tag="false" color="#FDBC3A" :value="row.zdrCzzt" :options="D_GS_ZDR_CZZT" />
|
||||
</template>
|
||||
<!-- *************** -->
|
||||
<template #qtFxdj="{row}">
|
||||
<DictTag :value="row.qtFxdj" color="#fff" :options="D_GS_ZDQT_FXDJ" />
|
||||
</template>
|
||||
<template #qtLb="{row}">
|
||||
<DictTag :value="row.qtLb" color="#fff" :options="D_GS_ZDQT_LB" />
|
||||
</template>
|
||||
|
||||
</MyTable>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { qcckGet, qcckPost } from "@/api/qcckApi.js";
|
||||
import MyTable from "@/components/aboutTable/DarkTable.vue";
|
||||
import { reactive, ref,onMounted,getCurrentInstance } from "vue";
|
||||
const { proxy } = getCurrentInstance();
|
||||
const { D_GS_ZDQT_LB,D_GS_ZDQT_FXDJ,D_GS_ZDR_RYJB,D_BZ_XB,D_GS_ZDR_BK_ZT,D_GS_ZDR_CZZT} = proxy.$dict('D_GS_ZDQT_LB','D_GS_ZDQT_FXDJ','D_GS_ZDR_RYJB','D_BZ_XB','D_GS_ZDR_BK_ZT','D_GS_ZDR_CZZT')
|
||||
const btns = reactive(["全域布控处置重点人员", "全域布控处置重点群体"]);
|
||||
const activeIndex = ref(0);
|
||||
const pageData = reactive({
|
||||
tableData: [],
|
||||
keyCount: 0,
|
||||
tableConfiger: {
|
||||
loading: false,
|
||||
rowHieght: 61,
|
||||
haveControls: false,
|
||||
showSelectType: "null",
|
||||
showIndex: false,
|
||||
stripe:true
|
||||
},
|
||||
tableColumn: [
|
||||
{ label: "照片", prop: "tp", showSolt: true },
|
||||
{ label: "姓名", prop: "ryXm", showOverflowTooltip: true },
|
||||
{ label: "性别", prop: "ryXb" ,showOverflowTooltip: true,showSolt: true},
|
||||
{ label: "身份证号码", prop: "rySfzh",showOverflowTooltip: true },
|
||||
{ label: "管控单位", prop: "gxSsbmmc" ,showOverflowTooltip: true},
|
||||
{ label: "人员级别", prop: "zdrRyjb" ,showOverflowTooltip: true,showSolt: true},
|
||||
{ label: "管控状态", prop: "zdrBkZt" ,showOverflowTooltip: true,showSolt: true},
|
||||
{ label: "处置状态", prop: "zdrCzzt",showOverflowTooltip: true,showSolt: true },
|
||||
]
|
||||
});
|
||||
const page = ref(1);
|
||||
const total = ref(0);
|
||||
|
||||
onMounted(() => {
|
||||
getData()
|
||||
tabHeightFn();
|
||||
});
|
||||
|
||||
const changeActive = (idx) =>{
|
||||
activeIndex.value = idx;
|
||||
pageData.tableData = []
|
||||
page.value = 0;
|
||||
total.value = 0;
|
||||
switch(idx){
|
||||
case 0:
|
||||
pageData.tableColumn = [
|
||||
{ label: "照片", prop: "tp", showSolt: true },
|
||||
{ label: "姓名", prop: "ryXm", showOverflowTooltip: true },
|
||||
{ label: "性别", prop: "ryXb" ,showOverflowTooltip: true,showSolt: true},
|
||||
{ label: "身份证号码", prop: "rySfzh",showOverflowTooltip: true },
|
||||
{ label: "管控单位", prop: "gxSsbmmc" ,showOverflowTooltip: true},
|
||||
{ label: "人员级别", prop: "zdrRyjb" ,showOverflowTooltip: true,showSolt: true},
|
||||
{ label: "管控状态", prop: "zdrBkZt" ,showOverflowTooltip: true,showSolt: true},
|
||||
{ label: "处置状态", prop: "zdrCzzt",showOverflowTooltip: true,showSolt: true },
|
||||
]
|
||||
break;
|
||||
case 1:
|
||||
pageData.tableColumn = [
|
||||
{ label: "群体名称", prop: "qtMc"},
|
||||
{ label: "群体类别", prop: "qtLb",showSolt:true},
|
||||
{ label: "风险等级", prop: "qtFxdj", showSolt: true},
|
||||
{ label: "列控原因", prop: "zdrLkyy"},
|
||||
{ label: "开始时间", prop: "zdrRkkssj"},
|
||||
{ label: "截至时间", prop: "zdrRkjssj"},
|
||||
]
|
||||
break;
|
||||
}
|
||||
pageData.keyCount++;
|
||||
getData()
|
||||
}
|
||||
|
||||
// 获取数据
|
||||
const getData = () =>{
|
||||
pageData.tableConfiger.loading = true;
|
||||
let url = activeIndex.value == 0 ? '/mosty-gsxt/tbGsxtZdry/selectPage':'/mosty-gsxt/tbGsxtZdqt/selectPage';
|
||||
let data = { pageSize:10,pageCurrent:page.value };
|
||||
qcckGet(data, url).then((res) => {
|
||||
let arr = res.records || [];
|
||||
pageData.tableData = page.value == 1 ? arr : pageData.tableData.concat(arr)
|
||||
total.value = res.total;
|
||||
pageData.tableConfiger.loading = false;
|
||||
}).catch(() => {
|
||||
pageData.tableConfiger.loading = false;
|
||||
});
|
||||
|
||||
}
|
||||
// 触底加载
|
||||
const changePage = () => {
|
||||
if(pageData.tableData.length == total.value) return false;
|
||||
page.value++;
|
||||
getData()
|
||||
};
|
||||
|
||||
|
||||
const tabHeightFn = () => {
|
||||
pageData.tableHeight = document.getElementById('qcbk').offsetHeight - 12;
|
||||
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>
|
||||
@ -1,149 +1,46 @@
|
||||
<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="changeActive(idx)">{{ it }}</span>
|
||||
</div>
|
||||
<div class="title">预警处置统计</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" height="30" src="" alt=""> -->
|
||||
<template v-if="!row.ryzp || row.ryzp.includes('baidu')">
|
||||
<img src="@/assets/images/default_male.png" width="30" height="30" />
|
||||
</template>
|
||||
<el-image v-else :preview-teleported="true" style="width: 30px; height: 30px" :src="row.ryzp"
|
||||
:preview-src-list="[row.ryzp]" show-progress>
|
||||
<template #error>
|
||||
<div class="image-slot error">
|
||||
<img src="@/assets/images/default_male.png" width="30" height="30"/>
|
||||
</div>
|
||||
</template>
|
||||
</el-image>
|
||||
</template>
|
||||
<template #ryXb="{row}">
|
||||
<DictTag :tag="false" :value="row.ryXb" color="#fff" :options="D_BZ_XB"/>
|
||||
</template>
|
||||
<template #zdrRyjb="{row}">
|
||||
<DictTag :tag="false" :value="row.zdrRyjb" color="#fff" :options="D_GS_ZDR_RYJB"/>
|
||||
</template>
|
||||
<template #zdrBkZt="{row}">
|
||||
<DictTag :tag="false" :value="row.zdrBkZt" color="#fff" :options="D_GS_ZDR_BK_ZT"/>
|
||||
</template>
|
||||
<template #zdrCzzt="{row}">
|
||||
<DictTag :tag="false" color="#FDBC3A" :value="row.zdrCzzt" :options="D_GS_ZDR_CZZT" />
|
||||
</template>
|
||||
<!-- *************** -->
|
||||
<template #qtFxdj="{row}">
|
||||
<DictTag :value="row.qtFxdj" color="#fff" :options="D_GS_ZDQT_FXDJ" />
|
||||
</template>
|
||||
<template #qtLb="{row}">
|
||||
<DictTag :value="row.qtLb" color="#fff" :options="D_GS_ZDQT_LB" />
|
||||
</template>
|
||||
|
||||
</MyTable>
|
||||
<div class="comom-cnt" style="border-right: 1px solid #ebebeb;width: 100%;" v-loading="list.YjczDate.loading">
|
||||
<BarHatEcharts echartsId="qylxEcharts" :data="list.YjczDate" :autoTooltip="true"></BarHatEcharts>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { qcckGet, qcckPost } from "@/api/qcckApi.js";
|
||||
import MyTable from "@/components/aboutTable/DarkTable.vue";
|
||||
import { reactive, ref,onMounted,getCurrentInstance } from "vue";
|
||||
const { proxy } = getCurrentInstance();
|
||||
const { D_GS_ZDQT_LB,D_GS_ZDQT_FXDJ,D_GS_ZDR_RYJB,D_BZ_XB,D_GS_ZDR_BK_ZT,D_GS_ZDR_CZZT} = proxy.$dict('D_GS_ZDQT_LB','D_GS_ZDQT_FXDJ','D_GS_ZDR_RYJB','D_BZ_XB','D_GS_ZDR_BK_ZT','D_GS_ZDR_CZZT')
|
||||
const btns = reactive(["全域布控处置重点人员", "全域布控处置重点群体"]);
|
||||
const activeIndex = ref(0);
|
||||
const pageData = reactive({
|
||||
tableData: [],
|
||||
keyCount: 0,
|
||||
tableConfiger: {
|
||||
import BarHatEcharts from "@/views/home/echarts/barHatEcharts.vue";
|
||||
import { onMounted,reactive } from "vue";
|
||||
const list = reactive({
|
||||
YjczDate: {
|
||||
|
||||
loading: false,
|
||||
rowHieght: 61,
|
||||
haveControls: false,
|
||||
showSelectType: "null",
|
||||
showIndex: false,
|
||||
stripe:true
|
||||
xDate: [],
|
||||
list: [],
|
||||
},
|
||||
tableColumn: [
|
||||
{ label: "照片", prop: "tp", showSolt: true },
|
||||
{ label: "姓名", prop: "ryXm", showOverflowTooltip: true },
|
||||
{ label: "性别", prop: "ryXb" ,showOverflowTooltip: true,showSolt: true},
|
||||
{ label: "身份证号码", prop: "rySfzh",showOverflowTooltip: true },
|
||||
{ label: "管控单位", prop: "gxSsbmmc" ,showOverflowTooltip: true},
|
||||
{ label: "人员级别", prop: "zdrRyjb" ,showOverflowTooltip: true,showSolt: true},
|
||||
{ label: "管控状态", prop: "zdrBkZt" ,showOverflowTooltip: true,showSolt: true},
|
||||
{ label: "处置状态", prop: "zdrCzzt",showOverflowTooltip: true,showSolt: true },
|
||||
]
|
||||
});
|
||||
const page = ref(1);
|
||||
const total = ref(0);
|
||||
|
||||
const getYjczDate = () => {
|
||||
list.YjczDate.loading = true;
|
||||
qcckGet({}, '/mosty-gsxt/tbYjxx/getYjCzztTj').then(res => {
|
||||
list.YjczDate.loading = false;
|
||||
list.YjczDate.xDate = res.map(item => item.zdmc);
|
||||
list.YjczDate.list = [{ name:'总数',
|
||||
value: res.map(item => item.count),
|
||||
color: ['rgba(0,244,255,1)', 'rgba(0,77,167,1)'],
|
||||
hatColor: '#087df9'
|
||||
}]
|
||||
})
|
||||
};
|
||||
onMounted(() => {
|
||||
getData()
|
||||
tabHeightFn();
|
||||
getYjczDate()
|
||||
});
|
||||
|
||||
const changeActive = (idx) =>{
|
||||
activeIndex.value = idx;
|
||||
pageData.tableData = []
|
||||
page.value = 0;
|
||||
total.value = 0;
|
||||
switch(idx){
|
||||
case 0:
|
||||
pageData.tableColumn = [
|
||||
{ label: "照片", prop: "tp", showSolt: true },
|
||||
{ label: "姓名", prop: "ryXm", showOverflowTooltip: true },
|
||||
{ label: "性别", prop: "ryXb" ,showOverflowTooltip: true,showSolt: true},
|
||||
{ label: "身份证号码", prop: "rySfzh",showOverflowTooltip: true },
|
||||
{ label: "管控单位", prop: "gxSsbmmc" ,showOverflowTooltip: true},
|
||||
{ label: "人员级别", prop: "zdrRyjb" ,showOverflowTooltip: true,showSolt: true},
|
||||
{ label: "管控状态", prop: "zdrBkZt" ,showOverflowTooltip: true,showSolt: true},
|
||||
{ label: "处置状态", prop: "zdrCzzt",showOverflowTooltip: true,showSolt: true },
|
||||
]
|
||||
break;
|
||||
case 1:
|
||||
pageData.tableColumn = [
|
||||
{ label: "群体名称", prop: "qtMc"},
|
||||
{ label: "群体类别", prop: "qtLb",showSolt:true},
|
||||
{ label: "风险等级", prop: "qtFxdj", showSolt: true},
|
||||
{ label: "列控原因", prop: "zdrLkyy"},
|
||||
{ label: "开始时间", prop: "zdrRkkssj"},
|
||||
{ label: "截至时间", prop: "zdrRkjssj"},
|
||||
]
|
||||
break;
|
||||
}
|
||||
pageData.keyCount++;
|
||||
getData()
|
||||
}
|
||||
|
||||
// 获取数据
|
||||
const getData = () =>{
|
||||
pageData.tableConfiger.loading = true;
|
||||
let url = activeIndex.value == 0 ? '/mosty-gsxt/tbGsxtZdry/selectPage':'/mosty-gsxt/tbGsxtZdqt/selectPage';
|
||||
let data = { pageSize:10,pageCurrent:page.value };
|
||||
qcckGet(data, url).then((res) => {
|
||||
let arr = res.records || [];
|
||||
pageData.tableData = page.value == 1 ? arr : pageData.tableData.concat(arr)
|
||||
total.value = res.total;
|
||||
pageData.tableConfiger.loading = false;
|
||||
}).catch(() => {
|
||||
pageData.tableConfiger.loading = false;
|
||||
});
|
||||
|
||||
}
|
||||
// 触底加载
|
||||
const changePage = () => {
|
||||
if(pageData.tableData.length == total.value) return false;
|
||||
page.value++;
|
||||
getData()
|
||||
};
|
||||
|
||||
|
||||
const tabHeightFn = () => {
|
||||
pageData.tableHeight = document.getElementById('qcbk').offsetHeight - 12;
|
||||
window.onresize = function () {
|
||||
tabHeightFn();
|
||||
};
|
||||
};
|
||||
// const tabHeightFn = () => {
|
||||
// pageData.tableHeight = document.getElementById('qcbk').offsetHeight - 12;
|
||||
// window.onresize = function () {
|
||||
// tabHeightFn();
|
||||
// };
|
||||
// };
|
||||
|
||||
</script>
|
||||
|
||||
|
||||
@ -1,4 +1,5 @@
|
||||
<template>
|
||||
<div style="height: 100%;">
|
||||
<div class="comom-title" @click="calendarPush">
|
||||
<span class="title">敏感节点</span>
|
||||
</div>
|
||||
@ -60,6 +61,8 @@
|
||||
|
||||
</template>
|
||||
</el-calendar>
|
||||
</div>
|
||||
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
|
||||
42
src/views/home/model/components/earlydata.vue
Normal file
42
src/views/home/model/components/earlydata.vue
Normal file
@ -0,0 +1,42 @@
|
||||
<template>
|
||||
<div class="comom-title">
|
||||
<div class="title">预警数据</div>
|
||||
<div class="expand-btn" >
|
||||
<el-icon size="20">
|
||||
<ArrowDownBold v-if="isExpanded" />
|
||||
<ArrowUpBold v-else />
|
||||
</el-icon>
|
||||
</div>
|
||||
</div>
|
||||
<div class=" zdryBox" >
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ArrowDownBold, ArrowUpBold } from '@element-plus/icons-vue';
|
||||
import emitter from '@/utils/emitter.js';
|
||||
import { ref, onMounted, onUnmounted } from 'vue';
|
||||
const isShow = ref({
|
||||
showYj: false, //预警弹窗
|
||||
showWarning: false
|
||||
});
|
||||
const list = reactive({
|
||||
Info_YJ: [], //预警数据
|
||||
Info_Warning: [],
|
||||
});
|
||||
|
||||
onMounted(() => {
|
||||
emitter.on("showHomeYJ", (val) => {
|
||||
});
|
||||
});
|
||||
onUnmounted(() => {
|
||||
emitter.off("showHomeYJ");
|
||||
});
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
<style>
|
||||
|
||||
</style>
|
||||
@ -1,18 +1,17 @@
|
||||
<template>
|
||||
<div class="comom-title">
|
||||
<span class="title">线索研判盯办统计</span>
|
||||
<el-popover placement="right" :width="430">
|
||||
<el-popover placement="right" :width="430" :visible="visible">
|
||||
<template #reference>
|
||||
<div class="title" style="position: relative;z-index: 10000;height: 40px;width: 40px;"></div>
|
||||
<div class="title" style="position: relative;z-index: 10000;height: 40px;width: 40px;" @click="visible = true"></div>
|
||||
</template>
|
||||
<el-date-picker
|
||||
v-model="value2"
|
||||
type="datetimerange"
|
||||
:shortcuts="shortcuts"
|
||||
range-separator="至"
|
||||
start-placeholder="开始时间"
|
||||
end-placeholder="结束时间"
|
||||
/>
|
||||
<div>
|
||||
<div class="qbltData">
|
||||
<div>查询</div>
|
||||
<div class="close" @click.stop="close()">X</div>
|
||||
</div>
|
||||
<TimeData v-if="visible" @changeTime="changeTime" />
|
||||
</div>
|
||||
</el-popover>
|
||||
</div>
|
||||
<ul class="comom-cnt xsBox flex flex-warp just-between align-center">
|
||||
@ -24,6 +23,7 @@
|
||||
|
||||
<script setup>
|
||||
import { ref } from 'vue';
|
||||
import TimeData from '@/views/home/model/mesgSwitch/timeData.vue'
|
||||
const contentItem = ref([
|
||||
{ label: '线索总数', value: '82' },
|
||||
{ label: '下发总数', value: '82' },
|
||||
@ -32,37 +32,16 @@ const contentItem = ref([
|
||||
{ label: '未反馈总数', value: '30' },
|
||||
{ label: '未处置总数', value: '2' },
|
||||
])
|
||||
|
||||
const value2 = ref([])
|
||||
const shortcuts = [
|
||||
{
|
||||
text: '近3天',
|
||||
value: () => {
|
||||
const end = new Date()
|
||||
const start = new Date()
|
||||
start.setDate(start.getDate() - 3)
|
||||
return [start, end]
|
||||
},
|
||||
},
|
||||
{
|
||||
text: '近7天',
|
||||
value: () => {
|
||||
const end = new Date()
|
||||
const start = new Date()
|
||||
start.setDate(start.getDate() - 7)
|
||||
return [start, end]
|
||||
},
|
||||
},
|
||||
{
|
||||
text: '近30天',
|
||||
value: () => {
|
||||
const end = new Date()
|
||||
const start = new Date()
|
||||
start.setMonth(start.getMonth() - 1)
|
||||
return [start, end]
|
||||
},
|
||||
},
|
||||
]
|
||||
const visible = ref(false)
|
||||
const changeTime = (val) => {
|
||||
listQuery.value = {
|
||||
...val
|
||||
}
|
||||
getCount()
|
||||
}
|
||||
const close = () => {
|
||||
visible.value = false
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
@ -82,4 +61,14 @@ const shortcuts = [
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
}
|
||||
.qbltData {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: 0 10px 10px
|
||||
}
|
||||
|
||||
.close {
|
||||
cursor: pointer;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,14 +1,14 @@
|
||||
<template>
|
||||
<div class="comom-title">
|
||||
<div class="title">预警列表</div>
|
||||
<div class="expand-btn" @click="changeTab('deployControl')">
|
||||
<div class="expand-btn" @click="changeTab">
|
||||
<el-icon size="20">
|
||||
<ArrowDownBold v-if="isExpanded" />
|
||||
<ArrowUpBold v-else />
|
||||
</el-icon>
|
||||
</div>
|
||||
</div>
|
||||
<div class=" zdryBox" v-show="isExpanded">
|
||||
<div class="zdryBox" v-show="isExpanded">
|
||||
<div>
|
||||
<CheckBox :data="checkDatas" @changeData="changeDatas"></CheckBox>
|
||||
</div>
|
||||
@ -27,14 +27,14 @@
|
||||
|
||||
<script setup>
|
||||
import emitter from "@/utils/eventBus.js";
|
||||
import { qcckPost } from "@/api/qcckApi.js";
|
||||
// import { qcckPost } from "@/api/qcckApi.js";
|
||||
import { getPageAllList, yjzxXwyjId, tbYjxxGetInfo } from '@/api/yj.js'
|
||||
import DeployControlItem from "@/views/home/components/deployControlItem.vue";
|
||||
import * as MOSTY from "@/components/MyComponents/index";
|
||||
import CheckBox from "@/components/checkBox/index.vue";
|
||||
import { ref, reactive, onMounted, onUnmounted, getCurrentInstance } from 'vue';
|
||||
import { ArrowDownBold, ArrowUpBold } from '@element-plus/icons-vue';
|
||||
|
||||
|
||||
const { proxy } = getCurrentInstance();
|
||||
const { D_BZ_HPZL } = proxy.$dict('D_BZ_HPZL')
|
||||
const checkData = reactive({
|
||||
@ -43,10 +43,11 @@ const checkData = reactive({
|
||||
});
|
||||
const checkDatas = reactive({
|
||||
list: ["布控", "行为", "身份", "组合"],
|
||||
hasChoose: ["布控", "行为", "身份", "组合"]
|
||||
hasChoose: ["布控"]
|
||||
});
|
||||
const total = ref(0);
|
||||
const yjJb = ref('10,20,30,40');
|
||||
const yjJb = ref([10, 20, 30, 40]);
|
||||
const yjLx = ref(['01']);
|
||||
const pageNum = ref(1);
|
||||
const loading = ref(false); // 加载中
|
||||
const personList = ref([]);
|
||||
@ -61,6 +62,9 @@ onMounted(() => {
|
||||
startAutoScroll();
|
||||
}
|
||||
}, 1000);
|
||||
emitter.on("yjDetail", (res) => {
|
||||
chooseItem(res)
|
||||
})
|
||||
})
|
||||
// 复选框切换
|
||||
function changeData(val) {
|
||||
@ -74,34 +78,33 @@ function changeData(val) {
|
||||
if (it == '三级') ids.push(30);
|
||||
if (it == '四级') ids.push(40);
|
||||
});
|
||||
yjJb.value = ids.join(',')
|
||||
yjJb.value = ids
|
||||
if (val.length == 0) personList.value = [];
|
||||
else getList();
|
||||
}
|
||||
const typeS=ref(true)
|
||||
const typeS = ref(true)
|
||||
function changeDatas(val) {
|
||||
console.log(val);
|
||||
console.log(val.includes('布控'));
|
||||
|
||||
pageNum.value = 1;
|
||||
personList.value = [];
|
||||
checkDatas.hasChoose = val;
|
||||
let ids = [];
|
||||
if (val.includes('布控')) {
|
||||
typeS.value=true
|
||||
typeS.value = true
|
||||
yjJb.value = [10, 20, 30, 40]
|
||||
} else {
|
||||
typeS.value=false
|
||||
}
|
||||
yjJb.value = []
|
||||
typeS.value = false
|
||||
}
|
||||
val.forEach(it => {
|
||||
if (it == '布控') {
|
||||
ids.push(10)
|
||||
typeS.value=true
|
||||
ids.push('01')
|
||||
typeS.value = true
|
||||
};
|
||||
if (it == '行为') ids.push(20);
|
||||
if (it == '身份') ids.push(30);
|
||||
if (it == '组合') ids.push(40);
|
||||
if (it == '行为') ids.push('02');
|
||||
if (it == '身份') ids.push('03');
|
||||
if (it == '组合') ids.push('04');
|
||||
});
|
||||
yjJb.value = ids.join(',')
|
||||
yjLx.value = ids
|
||||
if (val.length == 0) personList.value = [];
|
||||
else getList();
|
||||
}
|
||||
@ -164,30 +167,91 @@ const loadList = () => {
|
||||
pageNum.value++;
|
||||
getList()
|
||||
}
|
||||
|
||||
const ORDIMG = 'https://89.40.7.122:38496/image'
|
||||
const IMGYM = 'https://sg.lz.dsj.xz/dhimage'
|
||||
const getList = (type) => {
|
||||
let data = { pageSize: 10, pageNum: pageNum.value, yjJb: yjJb.value, bkyj: 1 };
|
||||
let data = { pageSize: 30, pageCurrent: pageNum.value, yjjbList: yjJb.value, yjlxList: yjLx.value };
|
||||
loading.value = !type ? true : false;
|
||||
qcckPost(data, '/mosty-gsxt/tbYjxx/getPageList').then(res => {
|
||||
getPageAllList(data).then(res => {
|
||||
loading.value = false;
|
||||
let arr = res.records || [];
|
||||
let arr = res.records.map(item => {
|
||||
return {
|
||||
...item,
|
||||
yjtp:item.yjlx=='01'? item.yjtp.replace(ORDIMG, IMGYM) : item.yjtp
|
||||
}
|
||||
}) || [];
|
||||
personList.value = pageNum.value == 1 ? arr : personList.value.concat(arr);
|
||||
total.value = res.total;
|
||||
}).catch(() => {
|
||||
loading.value = false;
|
||||
})
|
||||
}
|
||||
|
||||
const content = ref({
|
||||
ryxm: "",
|
||||
rysfzh: "",
|
||||
yjsj: "",
|
||||
yjdz: "",
|
||||
yjtp: "",
|
||||
yjnr: "",
|
||||
jd: 0,
|
||||
wd: 0,
|
||||
yjbq: "",
|
||||
yjjb: "",
|
||||
yjlx: "",
|
||||
ssbmdm: "",
|
||||
ssbm: "",
|
||||
yjlb: "",
|
||||
cph: "",
|
||||
hplx: null
|
||||
})
|
||||
const chooseItem = (item) => {
|
||||
emitter.emit('showHomeYJ', [item]);
|
||||
// emitter.emit('deletePointArea','home_yj_map');
|
||||
// if(!item.jd || !item.jd) return proxy.$message({ type: "warning", message: "该预警没有坐标！" });
|
||||
// let icon = require('@/assets/point/yj.png');
|
||||
// if(item.yjjb == '20') icon = require('@/assets/point/yj1.png');
|
||||
// if(item.yjjb == '30') icon = require('@/assets/point/yj2.png');
|
||||
// if(item.yjjb == '40') icon = require('@/assets/point/yj3.png');
|
||||
// emitter.emit('addPointArea',{flag:'home_yj_map',icon,coords:[item]});
|
||||
// emitter.emit('setMapCenter',{location:[item.jd,item.wd],zoomLevel:10});
|
||||
switch (item.yjlx) {
|
||||
case '01':
|
||||
tbYjxxGetInfo(item.id).then(res => {
|
||||
content.value = {
|
||||
id: item.id,
|
||||
ryxm: res.yjRyxm || '',
|
||||
rysfzh: res.yjRysfzh,
|
||||
yjsj: res.yjSj || '',
|
||||
yjdz: res.yjDz || '',
|
||||
yjtp: res.yjXtp .replace(ORDIMG, IMGYM) || '',
|
||||
yjnr: res.yjNr || '',
|
||||
yjbq: res.yjbqmc || '',
|
||||
yjlx: item.yjlx || '',
|
||||
jd: res.jd || 0,
|
||||
wd: res.wd || 0,
|
||||
yjjb: item.yjjb || '',
|
||||
czzt: res.czzt || '',
|
||||
yjbt: res.yjBt || '',
|
||||
}
|
||||
emitter.emit('showHomeYJ', [content.value]);
|
||||
})
|
||||
break;
|
||||
case '02':
|
||||
yjzxXwyjId(item.id).then(res => {
|
||||
content.value = {
|
||||
id: item.id,
|
||||
ryxm: res.xm || '',
|
||||
rysfzh: res.sfzh,
|
||||
yjsj: res.yjsj || '',
|
||||
yjdz: "",
|
||||
yjtp: "",
|
||||
yjbq: res.xwms || '',
|
||||
yjlb: item.yjlb || '',
|
||||
czzt: res.czzt || '',
|
||||
yjbt: res.yjBt || '',
|
||||
}
|
||||
emitter.emit('showHomeYJ', [content.value]);
|
||||
})
|
||||
break;
|
||||
case '':
|
||||
break;
|
||||
case '04':
|
||||
break;
|
||||
}
|
||||
|
||||
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
226
src/views/home/model/experience copy 2.vue
Normal file
226
src/views/home/model/experience copy 2.vue
Normal file
@ -0,0 +1,226 @@
|
||||
<template>
|
||||
<div class="comom-title" @click="chooseForumPost">
|
||||
<span class="title">情报论坛</span>
|
||||
</div>
|
||||
<div class="comom-cnt" style="height: 300px;">
|
||||
<div class="zdryBox">
|
||||
<div class="carousel-container"
|
||||
@mouseenter="pauseCarousel"
|
||||
@mouseleave="startCarousel">
|
||||
<ul class="ryBox" ref="carouselList">
|
||||
<li v-for="item in displayList" :key="item.id" @click="chooseItem(item)">
|
||||
<div>{{ item.title }}</div>
|
||||
<div class="meta-info">{{ item.time }}{{ item.fbrxm }}</div>
|
||||
<div>{{ item.content }}</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { tbGsxtXxltSelectPage } from '@/api/tbGsxtXxltHf'
|
||||
import { ref, reactive, onMounted, onBeforeUnmount } from 'vue';
|
||||
import {useRouter} from 'vue-router'
|
||||
const router = useRouter()
|
||||
|
||||
// 数据相关
|
||||
const personList = ref([]);
|
||||
const displayList = ref([]); // 用于显示的数据列表
|
||||
const loading = ref(false);
|
||||
|
||||
// 轮播相关
|
||||
const carouselList = ref(null);
|
||||
const scrollTimer = ref(null);
|
||||
const scrollSpeed = ref(3000); // 滚动间隔时间(ms)
|
||||
const itemHeight = ref(106); // 每个item的高度(px) - 与CSS变量保持一致
|
||||
const currentIndex = ref(0);
|
||||
const visibleItems = ref(3); // 可见条目数量
|
||||
|
||||
// 获取数据
|
||||
const getList = () => {
|
||||
loading.value = true;
|
||||
tbGsxtXxltSelectPage({ pageSize: 10, pageCurrent: 1 }).then(res => {
|
||||
loading.value = false;
|
||||
personList.value = res.records || [];
|
||||
// 复制一份数据到displayList，实现无缝滚动效果
|
||||
displayList.value = [...personList.value, ...personList.value];
|
||||
}).catch(() => {
|
||||
loading.value = false;
|
||||
})
|
||||
};
|
||||
|
||||
// 开始轮播
|
||||
const startCarousel = () => {
|
||||
if (scrollTimer.value) return;
|
||||
|
||||
scrollTimer.value = setInterval(() => {
|
||||
scrollToNext();
|
||||
}, scrollSpeed.value);
|
||||
};
|
||||
|
||||
// 暂停轮播
|
||||
const pauseCarousel = () => {
|
||||
if (scrollTimer.value) {
|
||||
clearInterval(scrollTimer.value);
|
||||
scrollTimer.value = null;
|
||||
}
|
||||
};
|
||||
|
||||
// 滚动到下一项
|
||||
const scrollToNext = () => {
|
||||
if (!carouselList.value || personList.value.length === 0) return;
|
||||
|
||||
currentIndex.value++;
|
||||
// 实现平滑滚动
|
||||
const scrollHeight = currentIndex.value * itemHeight.value;
|
||||
|
||||
// 设置平滑过渡效果
|
||||
carouselList.value.style.transition = 'transform 0.5s ease-out';
|
||||
carouselList.value.style.transform = `translateY(-${scrollHeight}px)`;
|
||||
|
||||
// 当滚动到原始数据的末尾时，准备重置位置实现无缝滚动
|
||||
// 使用personList.length而不是displayList.length确保无缝效果
|
||||
if (currentIndex.value >= personList.value.length) {
|
||||
// 确保过渡动画完成后再重置位置，设置稍微小于transition时间的值
|
||||
setTimeout(() => {
|
||||
// 重置索引和位置，移除过渡效果以避免重置时的视觉跳动
|
||||
currentIndex.value = 0;
|
||||
carouselList.value.style.transition = 'none';
|
||||
carouselList.value.style.transform = 'translateY(0)';
|
||||
|
||||
// 在下一帧重新应用过渡效果，确保动画连续性
|
||||
requestAnimationFrame(() => {
|
||||
carouselList.value.style.transition = 'transform 0.5s ease-out';
|
||||
});
|
||||
}, 490); // 略微小于500ms的过渡时间，确保在动画完成后立即重置
|
||||
}
|
||||
};
|
||||
|
||||
// 点击项
|
||||
const chooseItem = (item) => {
|
||||
pauseCarousel(); // 点击时暂停轮播
|
||||
router.push({
|
||||
path: '/forumPost',
|
||||
query: { id: item.id }
|
||||
})
|
||||
};
|
||||
|
||||
// 添加跳转
|
||||
const chooseForumPost = () => {
|
||||
pauseCarousel(); // 点击时暂停轮播
|
||||
router.push({ path: '/forumPost' })
|
||||
};
|
||||
|
||||
// 生命周期
|
||||
onMounted(() => {
|
||||
getList();
|
||||
// 数据加载后开始轮播
|
||||
setTimeout(() => {
|
||||
startCarousel();
|
||||
}, 1000);
|
||||
|
||||
// 监听窗口尺寸变化，调整轮播逻辑
|
||||
window.addEventListener('resize', handleResize);
|
||||
});
|
||||
|
||||
// 处理窗口尺寸变化
|
||||
const handleResize = () => {
|
||||
// 窗口大小改变时，可以在这里调整itemHeight等参数
|
||||
// 也可以暂停并重新开始轮播以适应新尺寸
|
||||
};
|
||||
|
||||
// 组件卸载前清除定时器和事件监听
|
||||
onBeforeUnmount(() => {
|
||||
pauseCarousel();
|
||||
window.removeEventListener('resize', handleResize);
|
||||
});
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.el-loading-mask {
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
</style>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import "@/assets/css/homeScreen.scss";
|
||||
|
||||
.zdryBox {
|
||||
height: 100%;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
/* 确保只显示3个条目的高度，根据实际内容调整 */
|
||||
--visible-items: 3;
|
||||
--item-height: 106px;
|
||||
--total-height: calc(var(--visible-items) * var(--item-height));
|
||||
|
||||
.carousel-container {
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
/* 限制显示区域，只显示指定数量的条目 */
|
||||
max-height: var(--total-height);
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.ryBox {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
/* 确保在重置位置时不会出现闪烁 */
|
||||
will-change: transform;
|
||||
backface-visibility: hidden;
|
||||
perspective: 1000px;
|
||||
|
||||
li {
|
||||
padding: 12px;
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
|
||||
transition: background-color 0.3s;
|
||||
cursor: pointer;
|
||||
/* 确保每个项目的高度一致，便于计算 */
|
||||
height: var(--item-height);
|
||||
box-sizing: border-box;
|
||||
|
||||
&:hover {
|
||||
background-color: rgba(20, 107, 190, 0.2);
|
||||
}
|
||||
|
||||
> div:first-child {
|
||||
font-weight: bold;
|
||||
color: #fff;
|
||||
margin-bottom: 8px;
|
||||
font-size: 14px;
|
||||
/* 标题限制1行，超出用省略号 */
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.meta-info {
|
||||
text-align: right;
|
||||
color: #83bff6;
|
||||
font-size: 12px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
> div:last-child {
|
||||
color: rgba(255, 255, 255, 0.8);
|
||||
font-size: 13px;
|
||||
line-height: 1.6;
|
||||
/* 内容限制3行，超出用省略号 */
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 3;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -2,19 +2,19 @@
|
||||
<div class="comom-title" @click="chooseForumPost">
|
||||
<span class="title">情报论坛</span>
|
||||
</div>
|
||||
<div class="comom-cnt" style="height: 300px;">
|
||||
<div class="comom-cnt" >
|
||||
<div class="zdryBox">
|
||||
<div class="carousel-container"
|
||||
@mouseenter="pauseCarousel"
|
||||
@mouseleave="startCarousel">
|
||||
<ul class="ryBox" ref="carouselList">
|
||||
<li v-for="item in displayList" :key="item.id" @click="chooseItem(item)">
|
||||
<div>{{ item.title }}</div>
|
||||
<div class="meta-info">{{ item.time }}{{ item.fbrxm }}</div>
|
||||
<div>{{ item.content }}</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<ul class="ryBox" :infinite-scroll-distance="30" ref="carouselList" @mouseenter="stopAutoScroll" @mouseleave="startAutoScroll"
|
||||
v-loading="loading" v-infinite-scroll="loadList">
|
||||
<li v-for="item in personList" :key="item.id" @click="chooseItem(item)">
|
||||
<div>{{ item.title }}</div>
|
||||
<div class="meta-info">{{ item.time }}{{ item.fbrxm }}</div>
|
||||
<div>{{ item.content }}</div>
|
||||
</li>
|
||||
<MOSTY.Empty :show="!loading && personList.length <= 0" :imgSize="100"></MOSTY.Empty>
|
||||
</ul>
|
||||
<!-- 触底加载更多数据 -->
|
||||
<div v-if="loadingMore" class="loading-more">加载中...</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@ -23,74 +23,81 @@
|
||||
import { tbGsxtXxltSelectPage } from '@/api/tbGsxtXxltHf'
|
||||
import { ref, reactive, onMounted, onBeforeUnmount } from 'vue';
|
||||
import {useRouter} from 'vue-router'
|
||||
import * as MOSTY from "@/components/MyComponents/index";
|
||||
const router = useRouter()
|
||||
|
||||
// 数据相关
|
||||
const personList = ref([]);
|
||||
const displayList = ref([]); // 用于显示的数据列表
|
||||
const loading = ref(false);
|
||||
const loadingMore = ref(false);
|
||||
const total = ref(0);
|
||||
const pageNum = ref(1);
|
||||
|
||||
// 轮播相关
|
||||
// 滚动相关
|
||||
const carouselList = ref(null);
|
||||
const scrollTimer = ref(null);
|
||||
const scrollSpeed = ref(3000); // 滚动间隔时间(ms)
|
||||
const itemHeight = ref(106); // 每个item的高度(px)
|
||||
const currentIndex = ref(0);
|
||||
const isAutoScrolling = ref(false);
|
||||
let scrollTimer = null;
|
||||
|
||||
// 获取数据
|
||||
const getList = () => {
|
||||
loading.value = true;
|
||||
tbGsxtXxltSelectPage({ pageSize: 10, pageCurrent: 1 }).then(res => {
|
||||
const getList = (type) => {
|
||||
loading.value = !type ? true : false;
|
||||
loadingMore.value = !!type;
|
||||
tbGsxtXxltSelectPage({ pageSize: 10, pageCurrent: pageNum.value }).then(res => {
|
||||
loading.value = false;
|
||||
personList.value = res.records || [];
|
||||
// 复制一份数据到displayList，实现无缝滚动效果
|
||||
displayList.value = [...personList.value, ...personList.value];
|
||||
loadingMore.value = false;
|
||||
let arr = res.records || [];
|
||||
personList.value = pageNum.value == 1 ? arr : personList.value.concat(arr);
|
||||
total.value = res.total;
|
||||
}).catch(() => {
|
||||
loading.value = false;
|
||||
loadingMore.value = false;
|
||||
})
|
||||
};
|
||||
|
||||
// 开始轮播
|
||||
const startCarousel = () => {
|
||||
if (scrollTimer.value) return;
|
||||
|
||||
scrollTimer.value = setInterval(() => {
|
||||
scrollToNext();
|
||||
}, scrollSpeed.value);
|
||||
// 触底加载
|
||||
const loadList = () => {
|
||||
if (personList.value.length == total.value || loadingMore.value) return;
|
||||
pageNum.value++;
|
||||
getList(true)
|
||||
};
|
||||
|
||||
// 暂停轮播
|
||||
const pauseCarousel = () => {
|
||||
if (scrollTimer.value) {
|
||||
clearInterval(scrollTimer.value);
|
||||
scrollTimer.value = null;
|
||||
// 自动滚动函数
|
||||
const autoScroll = () => {
|
||||
if (!carouselList.value || !isAutoScrolling.value) return;
|
||||
const container = carouselList.value;
|
||||
const speed = 1; // 滚动速度
|
||||
// 滚动容器
|
||||
container.scrollTop += speed;
|
||||
// 判断是否滚动到底部，如果是则回到顶部重新开始
|
||||
if (container.scrollTop >= container.scrollHeight - container.clientHeight - 5) {
|
||||
container.scrollTop = 0;
|
||||
}
|
||||
};
|
||||
|
||||
// 滚动到下一项
|
||||
const scrollToNext = () => {
|
||||
if (!carouselList.value || personList.value.length === 0) return;
|
||||
// 开始自动滚动
|
||||
const startAutoScroll = () => {
|
||||
if (isAutoScrolling.value || !carouselList.value) return;
|
||||
isAutoScrolling.value = true;
|
||||
// 清除可能存在的定时器
|
||||
if (scrollTimer) {
|
||||
clearInterval(scrollTimer);
|
||||
}
|
||||
// 设置新的定时器，控制滚动速度
|
||||
scrollTimer = setInterval(autoScroll, 30);
|
||||
};
|
||||
|
||||
currentIndex.value++;
|
||||
// 实现平滑滚动
|
||||
const scrollHeight = currentIndex.value * itemHeight.value;
|
||||
|
||||
carouselList.value.style.transition = 'transform 0.5s ease-out';
|
||||
carouselList.value.style.transform = `translateY(-${scrollHeight}px)`;
|
||||
|
||||
// 当滚动到复制的数据部分时，重置位置实现无缝滚动
|
||||
if (currentIndex.value >= personList.value.length) {
|
||||
setTimeout(() => {
|
||||
currentIndex.value = 0;
|
||||
carouselList.value.style.transition = 'none';
|
||||
carouselList.value.style.transform = 'translateY(0)';
|
||||
}, 500);
|
||||
// 停止自动滚动
|
||||
const stopAutoScroll = () => {
|
||||
isAutoScrolling.value = false;
|
||||
if (scrollTimer) {
|
||||
clearInterval(scrollTimer);
|
||||
scrollTimer = null;
|
||||
}
|
||||
};
|
||||
|
||||
// 点击项
|
||||
const chooseItem = (item) => {
|
||||
pauseCarousel(); // 点击时暂停轮播
|
||||
stopAutoScroll(); // 点击时停止自动滚动
|
||||
router.push({
|
||||
path: '/forumPost',
|
||||
query: { id: item.id }
|
||||
@ -99,22 +106,24 @@ const chooseItem = (item) => {
|
||||
|
||||
// 添加跳转
|
||||
const chooseForumPost = () => {
|
||||
pauseCarousel(); // 点击时暂停轮播
|
||||
stopAutoScroll(); // 点击时停止自动滚动
|
||||
router.push({ path: '/forumPost' })
|
||||
};
|
||||
|
||||
// 生命周期
|
||||
onMounted(() => {
|
||||
getList();
|
||||
// 数据加载后开始轮播
|
||||
// 数据加载完成后启动自动滚动
|
||||
setTimeout(() => {
|
||||
startCarousel();
|
||||
if (personList.value.length > 0) {
|
||||
startAutoScroll();
|
||||
}
|
||||
}, 1000);
|
||||
});
|
||||
|
||||
// 组件卸载前清除定时器
|
||||
onBeforeUnmount(() => {
|
||||
pauseCarousel();
|
||||
stopAutoScroll();
|
||||
});
|
||||
</script>
|
||||
|
||||
@ -127,31 +136,39 @@ onBeforeUnmount(() => {
|
||||
<style lang="scss" scoped>
|
||||
@import "@/assets/css/homeScreen.scss";
|
||||
|
||||
.loading-more {
|
||||
text-align: center;
|
||||
padding: 8px;
|
||||
color: #83bff6;
|
||||
background: rgba(0, 0, 0, 0.3);
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.zdryBox {
|
||||
height: 100%;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
|
||||
.carousel-container {
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.ryBox {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow-y: auto;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
|
||||
// 隐藏滚动条但保留滚动功能
|
||||
&::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
-ms-overflow-style: none; // IE和Edge
|
||||
scrollbar-width: none; // Firefox
|
||||
|
||||
li {
|
||||
padding: 12px;
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
|
||||
transition: background-color 0.3s;
|
||||
cursor: pointer;
|
||||
box-sizing: border-box;
|
||||
|
||||
&:hover {
|
||||
background-color: rgba(20, 107, 190, 0.2);
|
||||
|
||||
@ -163,7 +163,7 @@ onUnmounted(() => {
|
||||
justify-content: center;
|
||||
align-items: center; */
|
||||
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
|
||||
z-index: 9999;
|
||||
z-index: 99;
|
||||
user-select: none;
|
||||
/* transition: all 0.3s ease; */
|
||||
transform: translate(-50%, -50%);
|
||||
|
||||
165
src/views/home/model/generalWindow.vue
Normal file
165
src/views/home/model/generalWindow.vue
Normal file
@ -0,0 +1,165 @@
|
||||
<template>
|
||||
<div v-if="isShow.showYj">
|
||||
<div class="comom-title" v-if="isShow.showYj">
|
||||
<div class="title">预警数据</div>
|
||||
<div class="expand-btn">
|
||||
<el-icon size="20"><Close @click="closeWindow"/></el-icon>
|
||||
</div>
|
||||
</div>
|
||||
<div class="zdryBox">
|
||||
<div v-if="list.Info_YJ.length > 0" class="ryBox">
|
||||
<div v-for="(item, index) in list.Info_YJ" :key="index" @click="handleClick(item)">
|
||||
<DeployControlItem :item="item" :dict="{ D_BZ_HPZL }" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import emitter from "@/utils/eventBus.js";
|
||||
import { ref, onMounted, onUnmounted, reactive, getCurrentInstance } from 'vue';
|
||||
import DeployControlItem from "@/views/home/components/deployControlItem.vue";
|
||||
const { proxy } = getCurrentInstance();
|
||||
const { D_BZ_HPZL } = proxy.$dict('D_BZ_HPZL')
|
||||
const isShow = ref({
|
||||
showYj: false, //预警弹窗
|
||||
showWarning: false
|
||||
});
|
||||
const ORDIMG = 'https://89.40.7.122:38496/image'
|
||||
const IMGYM = 'https://sg.lz.dsj.xz/dhimage'
|
||||
const list = reactive({
|
||||
Info_YJ: [], //预警数据
|
||||
Info_Warning: [],
|
||||
});
|
||||
|
||||
onMounted(() => {
|
||||
emitter.on("yjShow", (res) => {
|
||||
isShow.value.showYj = res ? true : false;
|
||||
if (res) list.Info_YJ = res.map(item => {
|
||||
return {
|
||||
...item,
|
||||
yjtp:item.yjtp.replace(ORDIMG, IMGYM),
|
||||
yjlx: '01'
|
||||
}
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
const handleClick = (val) => {
|
||||
emitter.emit("yjDetail", val);
|
||||
}
|
||||
onUnmounted(() => {
|
||||
emitter.off("yjShow");
|
||||
});
|
||||
const closeWindow = () => {
|
||||
isShow.value.showYj = false;
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.el-loading-mask {
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
</style>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import "@/assets/css/homeScreen.scss";
|
||||
|
||||
.zdryBox {
|
||||
background: #052249;
|
||||
min-height: 0;
|
||||
max-height: 300px;
|
||||
|
||||
.ryBox {
|
||||
max-height: 300px;
|
||||
overflow: hidden;
|
||||
overflow-y: auto;
|
||||
}
|
||||
}
|
||||
|
||||
::v-deep .el-checkbox {
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
::-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;
|
||||
}
|
||||
|
||||
.comom-title {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.expand-btn {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
// background: linear-gradient(135deg, #0072FF 0%, #00B4FF 100%);
|
||||
// border-radius: 50%;
|
||||
color: white;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
box-shadow: 0 2px 8px rgba(0, 114, 255, 0.3);
|
||||
}
|
||||
|
||||
.expand-btn:hover {
|
||||
transform: scale(1.1);
|
||||
box-shadow: 0 4px 12px rgba(0, 114, 255, 0.5);
|
||||
}
|
||||
|
||||
.expand-btn:active {
|
||||
transform: scale(0.95);
|
||||
}
|
||||
</style>
|
||||
@ -1,13 +1,13 @@
|
||||
<template>
|
||||
<div class="custom-iframe-dialog-container">
|
||||
<el-dialog :model-value="modelValue" width="70%" :before-close="close" :destroy-on-close="true"
|
||||
class="custom-iframe-dialog" top="6vh">
|
||||
<div style="height: 70vh;">
|
||||
<iframe :src="src" frameborder="0" width="100%" height="100%"></iframe>
|
||||
</div>
|
||||
</el-dialog>
|
||||
<div class="iframe-container">
|
||||
<el-dialog class="dialog-container" :model-value="modelValue" width="80%" top="6vh" @close="close">
|
||||
<!-- -->
|
||||
<div style="height: 80vh;">
|
||||
<iframe :src="src" frameborder="0" width="100%" height="100%"></iframe>
|
||||
<!-- <iframe src="www.baidu.com" frameborder="0" width="100%" height="100%"></iframe> -->
|
||||
</div>
|
||||
</el-dialog>
|
||||
</div>
|
||||
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
@ -39,18 +39,15 @@ const submit = () => {
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
/* 使用自定义类名直接应用样式 */
|
||||
.custom-iframe-dialog {
|
||||
margin-top: 6vh !important;
|
||||
background-color: transparent !important;
|
||||
}
|
||||
::deep(.el-dialog) {
|
||||
background-color: rgba(0, 255, 255, 0);
|
||||
}
|
||||
/* 同时确保wrapper的正确布局 */
|
||||
:deep(.el-dialog__wrapper) {
|
||||
display: flex !important;
|
||||
align-items: flex-start !important;
|
||||
justify-content: center !important;
|
||||
.iframe-container {
|
||||
::v-deep .el-dialog__header {
|
||||
background-color: rgb(4 35 74) !important;
|
||||
height: 50px;
|
||||
padding: 0 !important;
|
||||
}
|
||||
|
||||
::v-deep .el-dialog__body {
|
||||
padding: 0 !important;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
141
src/views/home/model/judgment.vue
Normal file
141
src/views/home/model/judgment.vue
Normal file
@ -0,0 +1,141 @@
|
||||
<template>
|
||||
<div class="comom-title">
|
||||
<span class="title">战术战略研判</span>
|
||||
</div>
|
||||
<div class="comom-cnt zdryBox">
|
||||
<div class="model-box">
|
||||
<div class="model-commom" style="" v-for="value in judgmentList" :key="value.title">
|
||||
<img :src="value.img" alt="">
|
||||
<div class="fontStlye">
|
||||
<div class="font-bold" :style="{color: value.color}">{{value.title}}</div>
|
||||
<div>{{value.num}}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, onMounted } from 'vue';
|
||||
const judgmentList = ref([
|
||||
{
|
||||
title: '战略研判数',
|
||||
num: 23,
|
||||
img: require('@/assets/images/y1.png'),
|
||||
color: '#e58823'
|
||||
},
|
||||
{
|
||||
title: '战术研判数',
|
||||
num: 12,
|
||||
img: require('@/assets/images/y2.png'),
|
||||
color: '#e5d923'
|
||||
},
|
||||
{
|
||||
title: '战术会商数',
|
||||
num: 24,
|
||||
img: require('@/assets/images/y3.png'),
|
||||
color: '#e56723'
|
||||
},
|
||||
{
|
||||
title: '战略会商数',
|
||||
num: 30,
|
||||
img: require('@/assets/images/y4.png') ,
|
||||
color: '#77e523'
|
||||
}
|
||||
])
|
||||
|
||||
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.el-loading-mask {
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
</style>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import "@/assets/css/homeScreen.scss";
|
||||
|
||||
.zdryBox {
|
||||
background: #052249;
|
||||
height: 100%;
|
||||
|
||||
.ryBox {
|
||||
height: 100%;
|
||||
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;
|
||||
}
|
||||
.model-box{
|
||||
display: flex;justify-content: space-between;padding: 20px;flex-wrap: wrap;
|
||||
}
|
||||
.model-commom {
|
||||
width: 50%;
|
||||
border-radius: 5px;
|
||||
height: 100px;
|
||||
position: relative;
|
||||
.fontStlye{
|
||||
font-size: 20px;
|
||||
font-weight: 500;
|
||||
position: absolute;z-index: 20;top: 18px;left: 80px;
|
||||
.font-bold{
|
||||
margin-bottom: 10px;
|
||||
font-family: "YSBTH";
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
59
src/views/home/model/keyPpersonneltypes.vue
Normal file
59
src/views/home/model/keyPpersonneltypes.vue
Normal file
@ -0,0 +1,59 @@
|
||||
<template>
|
||||
<div class="comom-title">
|
||||
<span class="title">重点人员类型</span>
|
||||
<div class="title titleFz" style="" @click="visible = true">
|
||||
查看列表
|
||||
</div>
|
||||
</div>
|
||||
<div style="height: calc(100% - 35px);">
|
||||
<Pie3D :data="data" />
|
||||
</div>
|
||||
<ZdryDiloding v-model="visible" />
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import Pie3D from '@/components/MyComponents/Pie3D.vue'
|
||||
import ZdryDiloding from '@/views/home/model/mesgSwitch/zdryDiloding.vue'
|
||||
import { tbGsxtZdryzdryBqtj } from '@/api/zdr'
|
||||
import { ref } from 'vue'
|
||||
const data = ref([
|
||||
{ value: 18, name: '涉恐人员' },
|
||||
{ value: 13, name: '涉稳人员' },
|
||||
{ value: 17, name: '在逃人员' },
|
||||
{ value: 20, name: '涉毒人员' },
|
||||
{ value: 25, name: '刑事犯罪前科' },
|
||||
{ value: 30, name: '肇事肇祸精神病' },
|
||||
{ value: 30, name: '重点上访人员' },
|
||||
{ value: 30, name: '僧尼人员' },
|
||||
])
|
||||
const visible = ref(false)
|
||||
const tbGsxtZdryzdryBqtjFn = () => {
|
||||
tbGsxtZdryzdryBqtj({ bqlx: '01' }).then(res => {
|
||||
const dataList = res.slice(0, 8)
|
||||
data.value = dataList.map(item => {
|
||||
return {
|
||||
value: item.sl,
|
||||
name: item.bqmc,
|
||||
}
|
||||
})
|
||||
})
|
||||
}
|
||||
tbGsxtZdryzdryBqtjFn()
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.el-loading-mask {
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
</style>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import "@/assets/css/homeScreen.scss";
|
||||
|
||||
.titleFz {
|
||||
position: relative;
|
||||
z-index: 100;
|
||||
font-size: 14px !important;
|
||||
color: rgb(255, 166, 14);
|
||||
}
|
||||
</style>
|
||||
154
src/views/home/model/mesgSwitch/intelligence.vue
Normal file
154
src/views/home/model/mesgSwitch/intelligence.vue
Normal file
@ -0,0 +1,154 @@
|
||||
<template>
|
||||
<el-dialog v-model="modelValue" title="情报列表" width="70%" @close="closeDialog" destroy-on-close>
|
||||
<Search :searchArr="searchConfiger" @submit="onSearch" :key="pageData.keyCount"></Search>
|
||||
<MyTable customClass="zdy_peo_table" :tableData="pageData.tableData" :tableColumn="pageData.tableColumn"
|
||||
:tableHeight="pageData.tableHeight" :key="pageData.keyCount" :tableConfiger="pageData.tableConfiger"
|
||||
:controlsWidth="pageData.controlsWidth">
|
||||
<template #qblx="{ row }">
|
||||
<DictTag :tag="false" :value="row.qblx" :options="D_GS_XS_LX" />
|
||||
</template>
|
||||
<template #qbly="{ row }">
|
||||
<DictTag :tag="false" :value="row.qbly" :options="D_GS_XS_LY" />
|
||||
</template>
|
||||
|
||||
<template #shzt="{ row }">
|
||||
<!-- 采纳（将这条信息推送到情报管理）,退回！ -->
|
||||
<DictTag :tag="false" :value="row.shzt" :options="D_BZ_XSSHZT" @clickTag="clickTag(row.shzt)" />
|
||||
</template>
|
||||
<template #controls="{ row }">
|
||||
<el-link size="small" type="primary" @click="showDetail(row)">详情</el-link>
|
||||
</template>
|
||||
</MyTable>
|
||||
<Pages @changeNo="changeNo" @changeSize="changeSize" :tableHeight="pageData.tableHeight" :pageConfiger="{
|
||||
...pageData.pageConfiger,
|
||||
total: pageData.total
|
||||
}"></Pages>
|
||||
<template #footer>
|
||||
<div class="dialog-footer">
|
||||
<el-button @click="closeDialog">取消</el-button>
|
||||
<el-button type="primary" @click="closeDialog">确认 </el-button>
|
||||
</div>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import MyTable from "@/components/aboutTable/MyTable.vue";
|
||||
import Search from "@/components/aboutTable/Search.vue";
|
||||
import Pages from "@/components/aboutTable/Pages.vue";
|
||||
import { qbcjSelectPage } from "@/api/Intelligence.js";
|
||||
import { ref, reactive, getCurrentInstance, watch } from "vue";
|
||||
import { useRoute,useRouter } from 'vue-router'
|
||||
const route = useRoute()
|
||||
const router = useRouter()
|
||||
const { proxy } = getCurrentInstance()
|
||||
const { D_BZ_QBSBLY,D_GS_XS_LX,D_GS_XS_LY ,D_BZ_XSSHZT} = proxy.$dict("D_BZ_QBSBLY","D_GS_XS_LX","D_GS_XS_LY","D_BZ_XSSHZT")
|
||||
const props = defineProps({
|
||||
modelValue: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
dict: {
|
||||
type: Object,
|
||||
default: () => ({})
|
||||
}
|
||||
})
|
||||
const searchConfiger = ref([
|
||||
{
|
||||
label: "情报标题",
|
||||
prop: 'qbmc',
|
||||
placeholder: "请输入情报标题",
|
||||
showType: "input"
|
||||
},
|
||||
{
|
||||
label: "上报来源",
|
||||
prop: "sjLy",
|
||||
placeholder: "请选择上报来源",
|
||||
showType: "select",
|
||||
options: D_BZ_QBSBLY
|
||||
}, {
|
||||
label: "上报时间",
|
||||
prop: "lrkssj",
|
||||
placeholder: "请选择时间",
|
||||
showType: "daterange"
|
||||
},
|
||||
|
||||
|
||||
|
||||
]);
|
||||
const emit = defineEmits(['update:modelValue'])
|
||||
const closeDialog = () => {
|
||||
emit('update:modelValue', false)
|
||||
}
|
||||
const pageData = reactive({
|
||||
tableData: [],
|
||||
keyCount: 0,
|
||||
tableConfiger: {
|
||||
loading: false,
|
||||
rowHieght: 40,
|
||||
haveControls: true,
|
||||
},
|
||||
controlsWidth: 160, //操作栏宽度
|
||||
total: 0,
|
||||
pageConfiger: {
|
||||
pageSize: 20,
|
||||
pageCurrent: 1
|
||||
}, //分页
|
||||
tableColumn: [
|
||||
{ label: "上报人姓名", prop: "xssbr" },
|
||||
{ label: "情报编号", prop: "xsBh" },
|
||||
{ label: "情报标题", prop: "qbmc" },
|
||||
{ label: "情报类型", prop: "qblx", showSolt: true },
|
||||
{ label: "情报来源", prop: "qbly", showSolt: true },
|
||||
{ label: "情报上报时间", prop: "sxsbsj" },
|
||||
{ label: "指向地点", prop: "zxdz" },
|
||||
{ label: "情报内容", prop: "qbnr" },
|
||||
],
|
||||
tableHeight: "50vh",
|
||||
});
|
||||
const parameter = ref()
|
||||
const onSearch = (val) => {
|
||||
const promes = {
|
||||
lrkssj: val.lrkssj && val.lrkssj.length > 0 ? val.lrkssj[0] : '',
|
||||
lrjssj: val.lrkssj && val.lrkssj.length > 0 ? val.lrkssj[1] : '',
|
||||
}
|
||||
parameter.value = { ...val, ...promes }
|
||||
pageData.pageConfiger.pageCurrent = 1;
|
||||
changePage()
|
||||
}
|
||||
watch(() => props.modelValue, (val) => {
|
||||
if (val) {
|
||||
changePage()
|
||||
}
|
||||
})
|
||||
const changePage = () => {
|
||||
pageData.tableConfiger.loading = true;
|
||||
let data = { ...pageData.pageConfiger, ...parameter.value };
|
||||
qbcjSelectPage(data).then(res => {
|
||||
pageData.tableData = res.records || [];
|
||||
pageData.total = res.total;
|
||||
pageData.tableConfiger.loading = false;
|
||||
}).catch(() => { pageData.tableConfiger.loading = false; })
|
||||
}
|
||||
|
||||
// 查看详情
|
||||
const showDetail = (item) => {
|
||||
router.push({
|
||||
path: '/CollectCrculate',
|
||||
query: {
|
||||
id: item.id
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
const changeNo = (val) => {
|
||||
pageData.pageConfiger.pageCurrent = val;
|
||||
changePage()
|
||||
}
|
||||
const changeSize = (val) => {
|
||||
pageData.pageConfiger.pageSize = val;
|
||||
changePage()
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped></style>
|
||||
79
src/views/home/model/mesgSwitch/timeData.vue
Normal file
79
src/views/home/model/mesgSwitch/timeData.vue
Normal file
@ -0,0 +1,79 @@
|
||||
<template>
|
||||
<div>
|
||||
<el-date-picker v-model="listQuery" :type="type" :shortcuts="shortcuts" range-separator="至" start-placeholder="开始时间"
|
||||
:value-format="valueFrmat" :format="valueFrmat" end-placeholder="结束时间" @change="changeTime" />
|
||||
</div>
|
||||
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, watch } from 'vue'
|
||||
const props = defineProps({
|
||||
type: {
|
||||
type: String,
|
||||
default: "datetimerange"
|
||||
},
|
||||
valueFrmat: {
|
||||
type: String,
|
||||
default: "YYYY-MM-DD HH:mm:ss"
|
||||
}
|
||||
|
||||
})
|
||||
const listQuery = ref([])
|
||||
const emit = defineEmits(['changeTime'])
|
||||
|
||||
// 日期变化时发出事件
|
||||
const changeTime = (val) => {
|
||||
const promes = {
|
||||
startTime:val?.[0] || '',
|
||||
endTime: val?.[1] || ''
|
||||
}
|
||||
emit('changeTime', promes);
|
||||
};
|
||||
|
||||
const shortcuts = [
|
||||
{
|
||||
text: '近3天',
|
||||
value: () => {
|
||||
// 结束时间：当前日期的23:59:59
|
||||
const end = new Date()
|
||||
end.setHours(23, 59, 59, 999)
|
||||
// 开始时间：3天前的00:00:00
|
||||
const start = new Date()
|
||||
start.setDate(start.getDate() - 3)
|
||||
start.setHours(0, 0, 0, 0)
|
||||
return [start, end]
|
||||
},
|
||||
},
|
||||
{
|
||||
text: '近7天',
|
||||
value: () => {
|
||||
// 结束时间：当前日期的23:59:59
|
||||
const end = new Date()
|
||||
end.setHours(23, 59, 59, 999)
|
||||
// 开始时间：3天前的00:00:00
|
||||
const start = new Date()
|
||||
start.setDate(start.getDate() - 7)
|
||||
start.setHours(0, 0, 0, 0)
|
||||
return [start, end]
|
||||
},
|
||||
},
|
||||
{
|
||||
text: '近30天',
|
||||
value: () => {
|
||||
const end = new Date()
|
||||
end.setHours(23, 59, 59, 999)
|
||||
const start = new Date()
|
||||
start.setMonth(start.getMonth() - 1)
|
||||
start.setHours(0, 0, 0, 0)
|
||||
return [start, end]
|
||||
},
|
||||
},
|
||||
]
|
||||
|
||||
</script>
|
||||
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import "@/assets/css/homeScreen.scss";
|
||||
</style>
|
||||
189
src/views/home/model/mesgSwitch/zdryDiloding.vue
Normal file
189
src/views/home/model/mesgSwitch/zdryDiloding.vue
Normal file
@ -0,0 +1,189 @@
|
||||
<template>
|
||||
<el-dialog v-model="modelValue" title="重点人员列表" width="70%" @close="closeDialog" destroy-on-close>
|
||||
<Search :searchArr="searchConfiger" @submit="onSearch" :key="pageData.keyCount"></Search>
|
||||
<MyTable customClass="zdy_peo_table" :tableData="pageData.tableData" :tableColumn="pageData.tableColumn"
|
||||
:tableHeight="pageData.tableHeight" :key="pageData.keyCount" :tableConfiger="pageData.tableConfiger"
|
||||
:controlsWidth="pageData.controlsWidth">
|
||||
<template #bqList="{ row }">
|
||||
<ul>
|
||||
<li class="one_text_detail marks mb4" :key="index" v-for="(item, index) in row.bqList">{{ item.bqMc }}({{
|
||||
item.bqFz || 0 }} 分) </li>
|
||||
</ul>
|
||||
</template>
|
||||
<template #ryXb="{ row }">
|
||||
<DictTag :tag="false" :value="row.ryXb" :options="D_BZ_XB" />
|
||||
</template>
|
||||
<template #ryJg="{ row }">
|
||||
<DictTag :tag="false" :value="row.ryJg" :options="D_BZ_XZQHDM" />
|
||||
</template>
|
||||
<template #ryMz="{ row }">
|
||||
<DictTag :tag="false" :value="row.ryMz" :options="D_BZ_MZ" />
|
||||
</template>
|
||||
<template #hjdQh="{ row }">
|
||||
<DictTag :tag="false" :value="row.hjdQh" :options="D_BZ_XZQHDM" />
|
||||
</template>
|
||||
<template #zdrRyjb="{ row }">
|
||||
<DictTag :tag="false" :value="row.zdrRyjb" :options="D_GS_ZDR_RYJB" />
|
||||
</template>
|
||||
<template #zdrBkZt="{ row }">
|
||||
<DictTag :tag="false" :value="row.zdrBkZt" :options="D_GS_ZDR_BK_ZT" />
|
||||
</template>
|
||||
<template #zdrCzzt="{ row }">
|
||||
<DictTag :tag="false" :value="row.zdrCzzt" :options="D_GS_ZDR_CZZT" />
|
||||
</template>
|
||||
<template #zdrZt="{ row }">
|
||||
<DictTag :tag="false" :value="row.zdrZt" :options="D_GS_ZDQT_ZT" />
|
||||
</template>
|
||||
|
||||
<template #xtSjzt="{ row }">
|
||||
<div> {{ row.xtSjzt == 0 ? "注销" : row.xtSjzt == 1 ? "正常" : "封存" }}</div>
|
||||
</template>
|
||||
|
||||
<template #controls="{ row }">
|
||||
<el-link size="small" type="primary" @click="showDetail(row)">详情</el-link>
|
||||
</template>
|
||||
</MyTable>
|
||||
<Pages @changeNo="changeNo" @changeSize="changeSize" :tableHeight="pageData.tableHeight" :pageConfiger="{
|
||||
...pageData.pageConfiger,
|
||||
total: pageData.total
|
||||
}"></Pages>
|
||||
<template #footer>
|
||||
<div class="dialog-footer">
|
||||
<el-button @click="closeDialog">取消</el-button>
|
||||
<el-button type="primary" @click="closeDialog">确认 </el-button>
|
||||
</div>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import MyTable from "@/components/aboutTable/MyTable.vue";
|
||||
import Search from "@/components/aboutTable/Search.vue";
|
||||
import Pages from "@/components/aboutTable/Pages.vue";
|
||||
import { tbGsxtZdryselectPage } from "@/api/zdr.js";
|
||||
import { ref, reactive, getCurrentInstance, watch } from "vue";
|
||||
import { useRoute,useRouter } from 'vue-router'
|
||||
const route = useRoute()
|
||||
const router = useRouter()
|
||||
const { proxy } = getCurrentInstance()
|
||||
const { D_GS_ZDQT_ZT, D_GS_ZDR_RYJB, D_BZ_XB, D_BZ_MZ, D_BZ_XZQHDM, D_GS_ZDR_BK_ZT, D_GS_ZDR_CZZT, D_GS_BQ_ZL, D_GS_BQ_LB, D_GS_BQ_LX, D_GS_ZDR_YJDJ, D_GS_BK_SSJZ, D_GS_BK_SQLX, D_BZ_SF, D_GS_XS_LY, D_BZ_SSZT, D_GS_XS_LX, D_GS_XS_QTLX } =
|
||||
proxy.$dict("D_GS_ZDQT_ZT", "D_GS_ZDR_RYJB", "D_BZ_XB", "D_BZ_MZ", "D_BZ_XZQHDM", "D_GS_ZDR_BK_ZT", "D_GS_ZDR_CZZT", "D_GS_BQ_ZL", "D_GS_BQ_LB", "D_GS_BQ_LX", "D_GS_ZDR_YJDJ", "D_GS_BK_SSJZ", "D_GS_BK_SQLX", "D_BZ_SF", "D_GS_XS_LY", "D_BZ_SSZT", "D_GS_XS_LX", "D_GS_XS_QTLX");
|
||||
const props = defineProps({
|
||||
modelValue: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
dict: {
|
||||
type: Object,
|
||||
default: () => ({})
|
||||
}
|
||||
})
|
||||
const searchConfiger = ref([
|
||||
{
|
||||
label: "姓名",
|
||||
prop: "ryXm",
|
||||
placeholder: "请输入姓名",
|
||||
showType: "input"
|
||||
},
|
||||
{
|
||||
label: "身份证",
|
||||
prop: "rySfzh",
|
||||
placeholder: "请输入身份证",
|
||||
showType: "input"
|
||||
},
|
||||
{
|
||||
label: "户籍地",
|
||||
prop: "hjdXz",
|
||||
placeholder: "请输入户籍地",
|
||||
showType: "input"
|
||||
},
|
||||
{
|
||||
label: "人员级别",
|
||||
prop: "zdrRyjb",
|
||||
placeholder: "请输入人员级别",
|
||||
showType: "select",
|
||||
options: D_GS_ZDR_RYJB
|
||||
},
|
||||
|
||||
|
||||
]);
|
||||
const emit = defineEmits(['update:modelValue'])
|
||||
const closeDialog = () => {
|
||||
emit('update:modelValue', false)
|
||||
}
|
||||
const pageData = reactive({
|
||||
tableData: [],
|
||||
keyCount: 0,
|
||||
tableConfiger: {
|
||||
loading: false,
|
||||
rowHieght: 40,
|
||||
haveControls: true,
|
||||
},
|
||||
controlsWidth: 160, //操作栏宽度
|
||||
total: 0,
|
||||
pageConfiger: {
|
||||
pageSize: 20,
|
||||
pageCurrent: 1
|
||||
}, //分页
|
||||
tableColumn: [
|
||||
{ label: "姓名", prop: "ryXm", width: 150 },
|
||||
{ label: "性别", prop: "ryXb", showSolt: true, width: 100 },
|
||||
{ label: "籍贯", prop: "ryJg", showSolt: true, width: 100 },
|
||||
{ label: "身份证", prop: "rySfzh", width: 200 },
|
||||
{ label: "民族", prop: "ryMz", showSolt: true, width: 100 },
|
||||
{ label: "户籍地区划", prop: "hjdQh", showSolt: true, width: 150 },
|
||||
{ label: "户籍派出所", prop: "hjdPcsmc", width: 200 },
|
||||
{ label: "户籍地详址", prop: "hjdXz", width: 200 },
|
||||
{ label: "标签", prop: "bqList", showSolt: true, width: 400, showOverflowTooltip: true },
|
||||
{ label: "管辖单位", prop: "gxSsbmmc", width: 200 },
|
||||
{ label: "人员级别", prop: "zdrRyjb", showSolt: true, width: 130 },
|
||||
{ label: "管控原因", prop: "zdrLkyy", width: 200, showOverflowTooltip: true },
|
||||
{ label: "管控状态", prop: "zdrBkZt", width: 200, showOverflowTooltip: true },
|
||||
{ label: "处置状态", prop: "zdrCzzt", showSolt: true },
|
||||
{ label: "审核状态", prop: "zdrZt", showSolt: true },
|
||||
{ label: "状态", prop: "xtSjzt", showSolt: true },
|
||||
],
|
||||
tableHeight: "50vh",
|
||||
});
|
||||
const parameter = ref()
|
||||
const onSearch = (val) => {
|
||||
parameter.value = { ...val}
|
||||
pageData.pageConfiger.pageCurrent = 1;
|
||||
changePage()
|
||||
}
|
||||
watch(() => props.modelValue, (val) => {
|
||||
if (val) {
|
||||
changePage()
|
||||
}
|
||||
})
|
||||
const changePage = () => {
|
||||
pageData.tableConfiger.loading = true;
|
||||
let data = { ...pageData.pageConfiger, ...parameter.value};
|
||||
tbGsxtZdryselectPage(data).then(res => {
|
||||
pageData.tableData = res.records || [];
|
||||
pageData.total = res.total;
|
||||
pageData.tableConfiger.loading = false;
|
||||
}).catch(() => { pageData.tableConfiger.loading = false; })
|
||||
}
|
||||
|
||||
// 查看详情
|
||||
const showDetail = (item) => {
|
||||
router.push({
|
||||
path: '/mpvPeo',
|
||||
query: {
|
||||
id: item.id
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
const changeNo = (val) => {
|
||||
pageData.pageConfiger.pageCurrent = val;
|
||||
changePage()
|
||||
}
|
||||
const changeSize = (val) => {
|
||||
pageData.pageConfiger.pageSize = val;
|
||||
changePage()
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped></style>
|
||||
@ -1,18 +1,18 @@
|
||||
<template>
|
||||
<div class="comom-title">
|
||||
<span class="title">情报来源类型</span>
|
||||
<el-popover placement="right" :width="430">
|
||||
<div class="title">情报来源类型<span class="switchover" @click="reversalPush">切换</span></div>
|
||||
<el-popover :visible="visible" placement="right" :width="430">
|
||||
<template #reference>
|
||||
<div class="title" style="position: relative;z-index: 10000;height: 40px;width: 40px;"></div>
|
||||
<div class="title" style="position: relative;z-index: 10000;height: 40px;width: 40px;" @click="visible = true">
|
||||
</div>
|
||||
</template>
|
||||
<el-date-picker
|
||||
v-model="value2"
|
||||
type="datetimerange"
|
||||
:shortcuts="shortcuts"
|
||||
range-separator="至"
|
||||
start-placeholder="开始时间"
|
||||
end-placeholder="结束时间"
|
||||
/>
|
||||
<div>
|
||||
<div class="qbltData">
|
||||
<div>查询</div>
|
||||
<div class="close" @click.stop="close()">X</div>
|
||||
</div>
|
||||
<TimeData v-if="visible" @changeTime="changeTime" />
|
||||
</div>
|
||||
</el-popover>
|
||||
</div>
|
||||
<div class="comom-cnt">
|
||||
@ -23,63 +23,71 @@
|
||||
<script setup>
|
||||
import { qcckPost } from "@/api/qcckApi.js";
|
||||
import BarHatEcharts from "@/views/home/echarts/barHatEcharts.vue";
|
||||
import { onMounted, reactive ,ref} from "vue";
|
||||
import { onMounted, reactive, ref } from "vue";
|
||||
import TimeData from '@/views/home/model/mesgSwitch/timeData.vue'
|
||||
const list = reactive({
|
||||
xDate: ['110警情','人力情报','系统采集','民警处置单'],
|
||||
list:[
|
||||
{ name: "总数", value: [0,0,0,0,] ,color:['rgba(0,244,255,1)','rgba(0,77,167,1)'] ,hatColor:'#087df9'},
|
||||
{ name: "已处置", value: [0,0,0,0],color:['rgba(24, 232, 229, 1)','rgba(3, 110, 83, 1)'],hatColor:'#00FFFF' },
|
||||
xDate: ['110警情', '人力情报', '系统采集', '民警处置单'],
|
||||
list: [
|
||||
{ name: "总数", value: [0, 0, 0, 0,], color: ['rgba(0,244,255,1)', 'rgba(0,77,167,1)'], hatColor: '#087df9' },
|
||||
{ name: "已处置", value: [0, 0, 0, 0], color: ['rgba(24, 232, 229, 1)', 'rgba(3, 110, 83, 1)'], hatColor: '#00FFFF' },
|
||||
],
|
||||
})
|
||||
const emit = defineEmits(['reversalPush'])
|
||||
const visible = ref(false)
|
||||
onMounted(() => {
|
||||
getCount()
|
||||
});
|
||||
|
||||
const getCount = () =>{
|
||||
qcckPost({},'/mosty-gsxt/qbcj/getXscjTjForLylx').then(res=>{
|
||||
list.xDate = res ? res.cz.map(v=> v.zdmc):[];
|
||||
list.list[0].value = res ? res.zs.map(v=>v.count):[];
|
||||
list.list[1].value = res ? res.cz.map(v=>v.count):[];
|
||||
const listQuery = ref()
|
||||
const getCount = () => {
|
||||
const promes = {
|
||||
startTime: listQuery.value?.startTime || "",
|
||||
endTime: listQuery.value?.endTime || ""
|
||||
}
|
||||
qcckPost(promes, '/mosty-gsxt/qbcj/getXscjTjForLylx').then(res => {
|
||||
list.xDate = res ? res.cz.map(v => v.zdmc) : [];
|
||||
list.list[0].value = res ? res.zs.map(v => v.count) : [];
|
||||
list.list[1].value = res ? res.cz.map(v => v.count) : [];
|
||||
})
|
||||
}
|
||||
const value2 = ref([])
|
||||
const shortcuts = [
|
||||
{
|
||||
text: '近3天',
|
||||
value: () => {
|
||||
const end = new Date()
|
||||
const start = new Date()
|
||||
start.setDate(start.getDate() - 3)
|
||||
return [start, end]
|
||||
},
|
||||
},
|
||||
{
|
||||
text: '近7天',
|
||||
value: () => {
|
||||
const end = new Date()
|
||||
const start = new Date()
|
||||
start.setDate(start.getDate() - 7)
|
||||
return [start, end]
|
||||
},
|
||||
},
|
||||
{
|
||||
text: '近30天',
|
||||
value: () => {
|
||||
const end = new Date()
|
||||
const start = new Date()
|
||||
start.setMonth(start.getMonth() - 1)
|
||||
return [start, end]
|
||||
},
|
||||
},
|
||||
]
|
||||
const changeTime = (val) => {
|
||||
listQuery.value = {
|
||||
...val
|
||||
}
|
||||
getCount()
|
||||
}
|
||||
const reversalPush = () => {
|
||||
|
||||
emit('reversalPush')
|
||||
}
|
||||
const close = () => {
|
||||
visible.value = false
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import "@/assets/css/homeScreen.scss";
|
||||
|
||||
.qbltBox {
|
||||
height: 100%;
|
||||
background: rgba(0,29,75,0.6);
|
||||
background: rgba(0, 29, 75, 0.6);
|
||||
border-radius: 0 0 4px 4px;
|
||||
}
|
||||
|
||||
.qbltData {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: 0 10px 10px
|
||||
}
|
||||
|
||||
.close {
|
||||
cursor: pointer;
|
||||
}
|
||||
.switchover{
|
||||
cursor: pointer;
|
||||
font-size: 14px;
|
||||
margin-left: 20px;
|
||||
color: rgb(255, 146, 4);
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,24 +1,33 @@
|
||||
<template>
|
||||
<div class="comom-title">
|
||||
<span class="title">情报上报数量统计</span>
|
||||
<el-popover placement="right" :width="430">
|
||||
<span class="title">情报上报统计</span>
|
||||
<div class="title titleFz" @click="visible = true">
|
||||
查看列表
|
||||
</div>
|
||||
<!-- <el-popover placement="right" :width="430" :visible="visible">
|
||||
<template #reference>
|
||||
<div class="title" style="position: relative;z-index: 10000;height: 40px;width: 40px;"></div>
|
||||
</template>
|
||||
<el-date-picker v-model="listQuery" type="datetimerange" :shortcuts="shortcuts" range-separator="至"
|
||||
start-placeholder="开始时间" value-format="YYYY-MM-DD HH:mm:ss"
|
||||
format="YYYY-MM-DD HH:mm:ss" end-placeholder="结束时间" @change="changeTime" />
|
||||
</el-popover>
|
||||
<div>
|
||||
<div class="qbltData">
|
||||
<div>查询</div>
|
||||
<div class="close" @click.stop="close()">X</div>
|
||||
</div>
|
||||
<TimeData v-if="visible" @changeTime="changeTime" />
|
||||
</div>
|
||||
</el-popover> -->
|
||||
</div>
|
||||
<div class="comom-cnt qxsbBox">
|
||||
<LineEcharts echartsId="qbsbEcharts" :data="dataList"></LineEcharts>
|
||||
</div>
|
||||
<Intelligence v-model="visible" :dict="{D_BZ_QBSBLY}"/>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { qcckPost } from "@/api/qcckApi.js";
|
||||
import LineEcharts from "../echarts/moreLineEcharts.vue";
|
||||
import { reactive, onMounted, ref } from 'vue';
|
||||
import Intelligence from "@/views/home/model/mesgSwitch/intelligence.vue";
|
||||
import { reactive, onMounted, ref, } from 'vue';
|
||||
// import TimeData from '@/views/home/model/mesgSwitch/timeData.vue'
|
||||
|
||||
const dataList = reactive({
|
||||
xData: ['巴宜区', '工布江达县', '米林县', '墨脱县', '波密县', '察隅县', '朗县'],
|
||||
@ -35,8 +44,8 @@ onMounted(() => {
|
||||
const listQuery = ref()
|
||||
const getCount = () => {
|
||||
const promes = {
|
||||
startTime: listQuery.value ? listQuery.value[0] : "",
|
||||
endTime: listQuery.value ? listQuery.value[1] : ""
|
||||
startTime: listQuery.value?.startTime || "",
|
||||
endTime: listQuery.value?.endTime || ""
|
||||
}
|
||||
qcckPost(promes, '/mosty-gsxt/qbcj/getXscjTjForQx').then(res => {
|
||||
dataList.xDate = res ? res.ycz.map(v => v.org_name) : [];
|
||||
@ -44,44 +53,39 @@ const getCount = () => {
|
||||
dataList.list[1].val = res ? res.ycz.map(v => v.count) : [];
|
||||
})
|
||||
}
|
||||
const changeTime = () => {
|
||||
console.log(listQuery.value);
|
||||
|
||||
getCount()
|
||||
const visible = ref(false)
|
||||
const changeTime = (val) => {
|
||||
listQuery.value = {
|
||||
...val
|
||||
}
|
||||
getCount()
|
||||
}
|
||||
const close = () => {
|
||||
visible.value = false
|
||||
}
|
||||
const shortcuts = [
|
||||
{
|
||||
text: '近3天',
|
||||
value: () => {
|
||||
const end = new Date()
|
||||
const start = new Date()
|
||||
start.setDate(start.getDate() - 3)
|
||||
return [start, end]
|
||||
},
|
||||
},
|
||||
{
|
||||
text: '近7天',
|
||||
value: () => {
|
||||
const end = new Date()
|
||||
const start = new Date()
|
||||
start.setDate(start.getDate() - 7)
|
||||
return [start, end]
|
||||
},
|
||||
},
|
||||
{
|
||||
text: '近30天',
|
||||
value: () => {
|
||||
const end = new Date()
|
||||
const start = new Date()
|
||||
start.setMonth(start.getMonth() - 1)
|
||||
return [start, end]
|
||||
},
|
||||
},
|
||||
]
|
||||
|
||||
</script>
|
||||
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import "@/assets/css/homeScreen.scss";
|
||||
.qbltData {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: 0 10px 10px
|
||||
}
|
||||
.comom-title{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.close {
|
||||
cursor: pointer;
|
||||
}
|
||||
.titleFz {
|
||||
position: relative;
|
||||
z-index: 100;
|
||||
font-size: 14px !important;
|
||||
color: rgb(255, 166, 14);
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,18 +1,17 @@
|
||||
<template>
|
||||
<div class="comom-title">
|
||||
<span class="title">情报文本类型</span>
|
||||
<el-popover placement="right" :width="430">
|
||||
<div class="title">情报文本类型<span class="switchover" @click="reversalPush">切换</span></div>
|
||||
<el-popover placement="right" :width="430" :visible="visible">
|
||||
<template #reference>
|
||||
<div class="title" style="position: relative;z-index: 10000;height: 40px;width: 40px;"></div>
|
||||
<div class="title" style="position: relative;z-index: 10000;height: 40px;width: 40px;" @click="visible = true"></div>
|
||||
</template>
|
||||
<el-date-picker
|
||||
v-model="value2"
|
||||
type="datetimerange"
|
||||
:shortcuts="shortcuts"
|
||||
range-separator="至"
|
||||
start-placeholder="开始时间"
|
||||
end-placeholder="结束时间"
|
||||
/>
|
||||
<div>
|
||||
<div class="qbltData">
|
||||
<div>查询</div>
|
||||
<div class="close" @click.stop="close()">X</div>
|
||||
</div>
|
||||
<TimeData v-if="visible" @changeTime="changeTime" />
|
||||
</div>
|
||||
</el-popover>
|
||||
</div>
|
||||
<div class="comom-cnt" >
|
||||
@ -23,57 +22,44 @@
|
||||
<script setup>
|
||||
import { qcckPost } from "@/api/qcckApi.js";
|
||||
import BarHatEcharts from "@/views/home/echarts/barHatEcharts.vue";
|
||||
import { onMounted, reactive ,ref} from "vue";
|
||||
const list = reactive({
|
||||
import { onMounted, reactive, ref } from "vue";
|
||||
import TimeData from '@/views/home/model/mesgSwitch/timeData.vue'
|
||||
const list = ref({
|
||||
xDate: ['上访','诈骗','敲诈勒索','盗窃'],
|
||||
list:[
|
||||
{ name: "总数", value: [0,0,0,0,] ,color:['rgba(0,244,255,1)','rgba(0,77,167,1)'] ,hatColor:'#087df9'},
|
||||
// { name: "已处置", value: [0,0,0,0],color:['rgba(24, 232, 229, 1)','rgba(3, 110, 83, 1)'],hatColor:'#00FFFF' },
|
||||
],
|
||||
list:[{ name: "总数", value: [0,0,0,0] ,color:['rgba(0,244,255,1)','rgba(0,77,167,1)'] ,hatColor:'#087df9'}],
|
||||
})
|
||||
|
||||
onMounted(() => {
|
||||
getCount()
|
||||
});
|
||||
|
||||
const listQuery = ref()
|
||||
const getCount = () => {
|
||||
// list.list[0].value =[0,0,0,0]
|
||||
// qcckPost({},'/mosty-gsxt/qbcj/getXscjTjForLylx').then(res=>{
|
||||
// list.xDate = res ? res.cz.map(v=> v.zdmc):[];
|
||||
// list.list[0].value = res ? res.zs.map(v=>v.count):[];
|
||||
// list.list[1].value = res ? res.cz.map(v=>v.count):[];
|
||||
// })
|
||||
const promes = {
|
||||
startTime: listQuery.value?.startTime || "",
|
||||
endTime: listQuery.value?.endTime || ""
|
||||
}
|
||||
qcckPost(promes, '/mosty-gsxt/qbcj/getXscjTjBySszt').then(res => {
|
||||
console.log(res);
|
||||
list.value.xDate = res ? res.map(v=> v.zdmc):[];
|
||||
list.value.list[0].value = res ? res.map(v => v.count) : [0, 0, 0, 0];
|
||||
console.log(list.value);
|
||||
|
||||
})
|
||||
}
|
||||
const visible = ref(false)
|
||||
const changeTime = (val) => {
|
||||
listQuery.value = {
|
||||
...val
|
||||
}
|
||||
getCount()
|
||||
}
|
||||
const emit = defineEmits(['reversalPush'])
|
||||
const reversalPush = () => {
|
||||
emit('reversalPush')
|
||||
}
|
||||
const close = () => {
|
||||
visible.value = false
|
||||
}
|
||||
const value2 = ref([])
|
||||
const shortcuts = [
|
||||
{
|
||||
text: '近3天',
|
||||
value: () => {
|
||||
const end = new Date()
|
||||
const start = new Date()
|
||||
start.setDate(start.getDate() - 3)
|
||||
return [start, end]
|
||||
},
|
||||
},
|
||||
{
|
||||
text: '近7天',
|
||||
value: () => {
|
||||
const end = new Date()
|
||||
const start = new Date()
|
||||
start.setDate(start.getDate() - 7)
|
||||
return [start, end]
|
||||
},
|
||||
},
|
||||
{
|
||||
text: '近30天',
|
||||
value: () => {
|
||||
const end = new Date()
|
||||
const start = new Date()
|
||||
start.setMonth(start.getMonth() - 1)
|
||||
return [start, end]
|
||||
},
|
||||
},
|
||||
]
|
||||
</script>
|
||||
|
||||
|
||||
@ -84,4 +70,20 @@ const shortcuts = [
|
||||
background: rgba(0,29,75,0.6);
|
||||
border-radius: 0 0 4px 4px;
|
||||
}
|
||||
.qbltData {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: 0 10px 10px
|
||||
}
|
||||
|
||||
.close {
|
||||
cursor: pointer;
|
||||
}
|
||||
.switchover{
|
||||
cursor: pointer;
|
||||
font-size: 14px;
|
||||
margin-left: 20px;
|
||||
color: rgb(255, 146, 4);
|
||||
}
|
||||
</style>
|
||||
|
||||
64
src/views/home/model/warningLevels.vue
Normal file
64
src/views/home/model/warningLevels.vue
Normal file
@ -0,0 +1,64 @@
|
||||
<template>
|
||||
<div class="comom-title">
|
||||
<div class="title">预警等级统计</div>
|
||||
</div>
|
||||
<div class="comom-cnt" style="border-right: 1px solid #ebebeb;width: 100%;" v-loading="loadingyj">
|
||||
<WarningCount ref="yjjbRef"></WarningCount>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { qcckGet, qcckPost } from "@/api/qcckApi.js";
|
||||
import WarningCount from "@/views/backOfficeSystem/fourColorManage/warningControl/centerHome/components/WarningCount.vue";
|
||||
import { onMounted,ref } from "vue";
|
||||
const yjjbRef = ref()
|
||||
const loadingyj = ref(false)
|
||||
const getYjczDate = () => {
|
||||
loadingyj.value = true;
|
||||
qcckGet({}, '/mosty-gsxt/tbYjxx/getYjxxTj').then(res => {
|
||||
loadingyj.value = false;
|
||||
yjjbRef.value.initCharts(res)
|
||||
})
|
||||
};
|
||||
onMounted(() => {
|
||||
getYjczDate()
|
||||
});
|
||||
|
||||
// const tabHeightFn = () => {
|
||||
// pageData.tableHeight = document.getElementById('qcbk').offsetHeight - 12;
|
||||
// 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>
|
||||
@ -14,10 +14,10 @@
|
||||
import { qcckPost } from "@/api/qcckApi.js";
|
||||
import { ref, onMounted } from "vue";
|
||||
const contentItem = ref([
|
||||
{ type:"xs", label: "警情总数", value: "0" ,icon:require('@/assets/images/top-1.png')},
|
||||
{ type:"xscz", label: "预警总数", value: "0",icon:require('@/assets/images/top-2.png') },
|
||||
{ type:"zdry", label: "案件总数", value: "0",icon:require('@/assets/images/top-3.png') },
|
||||
{ type:"zdqt", label: "舆情总数", value: "0" ,icon:require('@/assets/images/top-4.png')},
|
||||
{ type:"jqzs", label: "警情总数", value: "0" ,icon:require('@/assets/images/top-1.png')},
|
||||
{ type:"yjzs", label: "预警总数", value: "0",icon:require('@/assets/images/top-2.png') },
|
||||
{ type:"zdry", label: "重点人员总数", value: "0",icon:require('@/assets/images/top-3.png') },
|
||||
{ type:"zdqt", label: "重点群体总数", value: "0" ,icon:require('@/assets/images/top-4.png')},
|
||||
]);
|
||||
|
||||
onMounted(() => {
|
||||
@ -32,7 +32,6 @@ const getCount = () =>{
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
||||
Reference in New Issue
Block a user