This commit is contained in:
2025-12-19 11:41:05 +08:00
parent 6ddecd72af
commit f0910016ae
12 changed files with 226 additions and 57 deletions

View File

@ -146,9 +146,12 @@ export function MapUtil(map) {
// 展示气泡框
MapUtil.prototype.makerPopup = (item,flag,style = 'Dark')=>{
// Dark Light Custom
let marker;
let flagPop = flag+'_pop'
if(!_that._self[flagPop]) _that._self[flagPop] = [];
if(style == 'Dark' || style == 'Light') {
let list = zdyContent(flag,item);// 默认的样式
map.createPopup([item.jd,item.wd],{
marker = map.createPopup([item.jd,item.wd],{
style:style, // 气泡框样式:
data:list,
title:item.ssbm,
@ -157,7 +160,7 @@ export function MapUtil(map) {
pixelOffset:[0,-50]
})
}else {
map.createPopup([item.jd,item.wd],{
marker = map.createPopup([item.jd,item.wd],{
style:'Custom', // // 自定义样式
attrs:{
class:'popupCustom'
@ -168,13 +171,14 @@ export function MapUtil(map) {
pixelOffset:[0,-30]
})
}
_that._self[flagPop].push(marker)
}
// 弹窗自定义默认内容
function zdyContent(flag,item){
switch (flag) {
case 'hm':
return [
{ label:'安码线索数量',value:item.lamsx },
{ label:'安码线索数量',value:item.lamsx },
{ label:'布控预警数量',value:item.bkyj },
{ label:'红色预警数量',value:item.hsyj },
{ label:'信息采集数量',value:item.xxcjsl },
@ -189,7 +193,7 @@ export function MapUtil(map) {
html = `
<div class="popupCustomBox">
<div class="popupCustomTitle_title">${item.ssbm}</div>
<div>安码线索数量:${item.lamsx}</div>
<div>安码线索数量:${item.lamsx}</div>
<div>布控预警数量:${item.bkyj}</div>
<div>红色预警数量:${item.hsyj}</div>
<div>信息采集数量:${item.xxcjsl}</div>

View File

@ -287,27 +287,56 @@ const rowcontextmenuHland = (row, column, e) => {
};
const timer = ref(null);
const isCloned = ref(false);
const originalBodyHeight = ref(0);
// 鼠标进入
const clearnScroll = () => {
clearInterval(timer.value);
timer.value = null;
};
watch(() => props.tableData, () => {
nextTick(() => {
if (props.isScroll) createScroll();
})
},{deep:true});
// 鼠标离开
const createScroll = () => {
clearnScroll();
// 拿到table
const tabel = multipleTableRef.value.layout.table.refs;
// 拿到可以滚动的元素
const tableWrapper = tabel.bodyWrapper.firstElementChild.firstElementChild;
if (props.isScroll) {
nextTick(() => {
const refsPath = multipleTableRef.value?.$refs || multipleTableRef.value?.layout?.table?.refs;
const scrollEl = refsPath?.bodyWrapper || multipleTableRef.value?.$el?.querySelector('.el-table__body-wrapper');
const tableEl = scrollEl?.querySelector('table') || multipleTableRef.value?.$el?.querySelector('.el-table__body-wrapper table');
const bodyEl = tableEl?.tBodies?.[0];
if (!props.isScroll || !scrollEl || !tableEl || !bodyEl) return;
if (!props.tableHeight) {
const fixedH = scrollEl.clientHeight || multipleTableRef.value?.$el?.clientHeight || 0;
if (fixedH > 0) {
scrollEl.style.height = fixedH + 'px';
scrollEl.style.overflowY = 'auto';
}
}
originalBodyHeight.value = bodyEl.offsetHeight;
const oldClone = tableEl.querySelector('tbody[data-clone="true"]');
if (oldClone) {
tableEl.removeChild(oldClone);
isCloned.value = false;
}
if (!isCloned.value) {
const clone = bodyEl.cloneNode(true);
clone.setAttribute('data-clone', 'true');
tableEl.appendChild(clone);
isCloned.value = true;
}
const target = scrollEl.firstElementChild?.firstElementChild || scrollEl;
timer.value = setInterval(() => {
tableWrapper.scrollTop += 1;
//判断滚动到底部,设置为0(可视高度+距离顶部 = 整个高度)
if ( tableWrapper.clientHeight + tableWrapper.scrollTop == tableWrapper.scrollHeight) {
tableWrapper.scrollTop = 0;
}
}, 100);
target.scrollTop += 1;
if (target.scrollTop >= originalBodyHeight.value) {
target.scrollTop -= originalBodyHeight.value;
}
}, 20);
});
};
// 滚动-触底加载
@ -371,3 +400,9 @@ onUnmounted(() => {
white-space: nowrap;
}
</style>
watch(() => props.isScroll, (val) => {
nextTick(() => {
if (val) createScroll();
else clearnScroll();
});
},{immediate:true});

View File

@ -47,7 +47,6 @@ watch(() => props.dict, (res) => {
{ label: "所属县局", prop: "ssxgaj", type: "input" },
{ label: "所属市局", prop: "sssgaj", type: "input" },
{ label: "接警员姓名", prop: "jjyxm", type: "input" },
// { label: "预警内容", prop: "yjNr", type: "textarea", width: "100%" },
]
}

View File

@ -3,8 +3,7 @@
</template>
<script setup>
import * as echarts from "echarts";
import { fa } from "element-plus/es/locale.mjs";
import { onMounted, ref, reactive, defineProps, onUnmounted, watch, nextTick } from "vue";
import { defineProps, watch, nextTick } from "vue";
const props = defineProps({
echartsId:{
type:String,
@ -14,7 +13,8 @@ const props = defineProps({
type:Object,
default:{
list:[],
colors:[]
colors:[],
topColor:'#1bd6c2'
}
}
});
@ -64,21 +64,21 @@ function chartFn(val,x_value,color,topColor) {
axisLabel: {
show: true,
textStyle: {
color: "#333" //X轴文字颜色
color: "#fff" //X轴文字颜色
},
},
}
],
yAxis: [
{
name:'单位:元/吨',
name:'',
nameTextStyle: { color: "#fff" },
type: 'value',
splitLine: { show: false },
axisLabel: {
show: true,
textStyle: {
color: "#333" //X轴文字颜色
color: "#FFF" //X轴文字颜色
},
},
}
@ -109,7 +109,7 @@ function chartFn(val,x_value,color,topColor) {
textStyle: {
color: '#0EBBC5',
fontSize: 14,
fontWeight: 'bold'
fontWeight: 'bold',
},
formatter: '{c}'
}
@ -132,7 +132,7 @@ function chartFn(val,x_value,color,topColor) {
barGap: 0,
data: sideData1,
label: {
show: true,
show: false,
position: 'top',
textStyle: {
color: 'white',

View File

@ -83,7 +83,15 @@
<WarningPoints></WarningPoints>
</div>
<div style="width: 33%;">
<WarningLevels></WarningLevels>
<transition name="flip" mode="out-in">
<div :key="'qb'" v-if="modelWarning" class="flip-wrapper">
<WarningLevels @changeModel="changeModel"></WarningLevels>
</div>
<div :key="'text'" v-else class="flip-wrapper">
<BkWarning @changeModel="changeModel"></BkWarning>
</div>
</transition>
</div>
<div style="width: 33%;">
<Bkcz></Bkcz>
@ -108,6 +116,7 @@ import QblyType from './model/qblyType.vue'
import TextType from './model/textType.vue'
import Bkcz from './model/bkcz.vue'
import WarningLevels from './model/warningLevels.vue'
import BkWarning from './model/bkWarning.vue'
import Yszs from './model/yszs.vue'
import DeployControl from './model/deployControl.vue';
import Experience from './model/experience.vue'
@ -127,6 +136,7 @@ import Statistics from './model/statistics.vue'
// 导入音频播放器工具类
import audioPlayer from '@/utils/audioPlayer'
const webSoket = new WebSoketClass()
const modelWarning = ref(true)
const changeXzqh = (val, trg) => {
setTimeout(() => {
// 先移除已有的边界
@ -215,9 +225,12 @@ const getDepId = () => {
}
}
const makerCenter = () => {
const dw = require("@/assets/point/dingwei.png")
qcckGet({},'/mosty-gsxt/tbYjxx/selectSsbm').then(res=>{
emitter.emit('deletePointArea','hm')
emitter.emit('deletePointArea','hm_pop')
let list = res || [];
list.forEach(item => {
let obj = centralPoint.find(i => i.name == item.ssbm);
@ -258,11 +271,14 @@ const initAudioPlayer = () => {
console.error('初始化音频播放器失败:', error);
})
}
const bnTimer = ref(null)
// 组件挂载时初始化音频播放器
onMounted(() => {
getDepId()
makerCenter()
bnTimer.value = setInterval(()=>{
makerCenter()
},10000)
mouseLeave()
getTbYjxxGetList()
// 初始化音频播放器
@ -344,6 +360,7 @@ const reversal= () => {
reversalShow.value = !reversalShow.value
// 移除clearInterval调用避免定时器被清除
}
// 鼠标移入
const mouseEnter = () => {
clearInterval(timing.value)
@ -358,8 +375,13 @@ const mouseLeave = () => {
reversal()
}, 30000)
}
function changeModel(){
modelWarning.value = !modelWarning.value
}
onUnmounted(() => {
clearInterval(timing.value)
clearInterval(bnTimer.value)
// 组件卸载时停止音频播放并释放资源
if (audioPlayer) {
audioPlayer.destroy()

View File

@ -0,0 +1,85 @@
<template>
<div class="comom-title">
<div class="title">布控预警级别统计<span class="switchover" @click.stop="reversalPush">切换</span></div>
</div>
<div class="comom-cnt" style="border-right: 1px solid #ebebeb;width: 100%;" v-loading="loadingyj">
<DbarEcharts echartsId="bar3DYkChart" :data="cnList"></DbarEcharts>
</div>
</template>
<script setup>
import DbarEcharts from "@/views/home/echarts/3DbarEcharts.vue";
import { qcckGet } from "@/api/qcckApi.js";
import { onMounted,ref,defineEmits ,reactive} from "vue";
const emit = defineEmits(["changeModel"])
const loadingyj = ref(false)
let cnList = reactive({
list: [
{ label:'一级',val:0,type:'01' },
{ label:'二级',val:0,type:'02' },
{ label:'三级',val:0,type:'03' },
{ label:'四级',val:0,type:'04' },
],
topColor:'#1bd6c2',
colors: ["#28EEBF","#0DBAC5"],
})
onMounted(() => {
getYjczDate()
});
const getYjczDate = () => {
loadingyj.value = true;
qcckGet({}, '/mosty-gsxt/tbYjxx/bdbkYjxxTj').then(res => {
loadingyj.value = false;
let list = res || []
cnList.list.forEach(item => {
let obj = list.find(v => v.yj_jb == item.type)
item.val = obj?.count || 0
})
})
};
const reversalPush = () => {
emit('changeModel')
}
</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);
}
.switchover{
cursor: pointer;
font-size: 14px;
margin-left: 20px;
color: rgb(255, 146, 4);
}
</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>

View File

@ -1,6 +1,5 @@
<template>
<div class="comom-title">
<!-- <span class="title">重点人员类型</span> -->
<div class="title">重点人员类型<span class="switchover" @click.stop="reversalPush">切换</span></div>
<div class="title titleFz" style="" @click="visible = true">
查看列表

View File

@ -3,7 +3,6 @@
<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>

View File

@ -11,15 +11,22 @@
<div class="table-wrapper">
<el-table :data="tableData" style="width: 100%" height="calc(100% - 1px)" :header-cell-style="{
<el-table
:data="tableData"
style="width: 100%"
stripe
height="calc(100% - 1px)"
:header-cell-style="{
background: 'transparent',
color: '#0d4b8a',
color: '#ffffff',
borderColor: '#0d4b8a'
}" :row-style="{
}"
:row-style="{
background: 'transparent',
color: '#fff',
borderColor: '#0d4b8a'
}" stripe>
}"
>
<el-table-column prop="ssbm" label="部门名称" min-width="120" show-overflow-tooltip />
<el-table-column prop="xm" label="姓名" min-width="80" show-overflow-tooltip />
<!-- 信息员积分 研判员积分 -->
@ -90,7 +97,7 @@ defineExpose({
gap: 10px;
.tab-button {
padding: 0px 4px;
padding: 0px 10px;
background: rgba(0, 77, 167, 0.6);
color: #fff;
border: 1px solid #0099ff;
@ -105,7 +112,7 @@ defineExpose({
&.active {
background: rgba(0, 244, 255, 0.8);
color: #000;
color: #0072ff;
border-color: #00f4ff;
}
}

View File

@ -20,13 +20,15 @@
</template>
<script setup>
import { qcckPost } from "@/api/qcckApi.js";
import { qcckPost,qcckGet } from "@/api/qcckApi.js";
import BarHatEcharts from "@/views/home/echarts/barHatEcharts.vue";
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'}],
xDate: ['共享','内部','林安码'],
list:[{ name: "总数", value: [0,0,0] ,color:['rgba(0,244,255,1)','rgba(0,77,167,1)'] ,hatColor:'#087df9'}],
// xDate: ['上访','诈骗','敲诈勒索','盗窃'],
// list:[{ name: "总数", value: [0,0,0,0] ,color:['rgba(0,244,255,1)','rgba(0,77,167,1)'] ,hatColor:'#087df9'}],
})
onMounted(() => {
@ -38,13 +40,14 @@ const getCount = () => {
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);
qcckGet(promes, '/mosty-gsxt/xxcj/xxlylx').then(res => {
list.value.list[0].value = [res.gxxx || 0,res.nbxx || 0,res.lam || 0]
})
// qcckPost(promes, '/mosty-gsxt/qbcj/getXscjTjBySszt').then(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) => {

View File

@ -1,6 +1,6 @@
<template>
<div class="comom-title">
<div class="title">四色预警统计</div>
<div class="title">四色预警统计<span class="switchover" @click.stop="reversalPush">切换</span></div>
</div>
<div class="comom-cnt" style="border-right: 1px solid #ebebeb;width: 100%;" v-loading="loadingyj">
<WarningCount ref="yjjbRef"></WarningCount>
@ -10,9 +10,15 @@
<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";
import { onMounted,ref,defineEmits } from "vue";
const yjjbRef = ref()
const loadingyj = ref(false)
const emit = defineEmits(["changeModel"])
const reversalPush = () => {
emit('changeModel')
}
const getYjczDate = () => {
loadingyj.value = true;
qcckGet({}, '/mosty-gsxt/tbYjxx/getYjxxTj').then(res => {
@ -52,6 +58,12 @@ getYjczDate()
::v-deep .el-table--striped .el-table__body tr.el-table__row--striped td.el-table__cell{
background: rgba(0,61,130,0.75);
}
.switchover{
cursor: pointer;
font-size: 14px;
margin-left: 20px;
color: rgb(255, 146, 4);
}
</style>
<style lang="scss">
.zdy_bkcz_table td.el-table__cell {
@ -61,4 +73,5 @@ getYjczDate()
color: #ffffff !important;
font-size: 15px;
}
</style>

View File

@ -9,7 +9,7 @@
:tableColumn="pageData.tableColumn"
:tableHeight="pageData.tableHeight"
:key="pageData.keyCount"
:isScroll="true"
:isScroll="isScroll"
:tableConfiger="pageData.tableConfiger"
>
</DarkTable>
@ -17,9 +17,10 @@
</template>
<script setup>
import { reactive,onMounted } from 'vue'
import { reactive,onMounted,ref } from 'vue'
import DarkTable from '@/components/aboutTable/DarkTable.vue'
import { qcckGet } from "@/api/qcckApi.js";
const isScroll = ref(false)
const pageData = reactive({
tableData: [],
keyCount: 0,
@ -47,10 +48,12 @@ const getList = () => {
pageData.tableConfiger.loading = true
qcckGet({},'/mosty-gsxt/tbYjxx/selectYjxxFzTen').then(res => {
let list = res || []
isScroll.value = list.length > 3 ? true : false;
pageData.tableData = list.map((item, index) => {
item.order = index + 1
return item
})
pageData.tableConfiger.loading = false
}).catch(() => {
pageData.tableConfiger.loading = false