zy_oyj/sgxt_web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

lcw

Browse Source
This commit is contained in:
lcw
2025-11-22 21:59:58 +08:00
parent ea3022c3f6
commit 93c49dff27
661 changed files with 195357 additions and 2160 deletions
Download Patch File Download Diff File Expand all files Collapse all files

103
src/views/home/components/deployControlItem.vue
View File

@ -1,59 +1,73 @@
<template>
<div class="warning-card" :style="{'border':`1px solid ${changeBG(item.yjJb)}`}" >
<div class="warning-card" :style="{ 'border': `1px solid ${changeBG(item.yjjb)}` }">
<div class="warning-image flex">
<!-- -->
<template v-if="!item.yjTp || item.yjTp.includes('baidu')">
<img src="@/assets/images/car.png" width="65" height="70" v-if="item.yjLx == 2" />
<template v-if="!item.yjtp || item.yjtp.includes('baidu')">
<img src="@/assets/images/car.png" width="65" height="70" v-if="item.yjlb == 2" />
<img src="@/assets/images/default_male.png" width="65" height="70" v-else />
</template>
<el-image v-else style="width: 65px; height: 70px" :src="item.yjTp" :preview-src-list="[item.yjTp]" show-progress>
<el-image preview-teleported v-else @click.stop style="width: 65px; height: 70px" :src="item.yjtp" :preview-src-list="[item.yjtp]" show-progress>
<template #error>
<div class="image-slot error">
<img src="@/assets/images/car.png" width="65" height="70" v-if="item.yjLx == 2" />
<img src="@/assets/images/car.png" width="65" height="70" v-if="item.yjlb == 2" />
<img src="@/assets/images/default_male.png" width="65" height="70" v-else />
</div>
</template>
</el-image>
<div class="ml10 warning-info">
<div class="flex just-between align-center">
<div class="flex align-center mt4" v-if="item.yjLx == 2">
<span>{{ item.yjClcph }}</span>
<div class="flex align-center mt4" v-if="item.yjlb == 2">
<span>{{ item.cph }}</span>
</div>
<div class="flex align-center mt4" v-else>
<span>{{ item.yjRyxm }}</span>
<span>{{ item.ryxm }}</span>
<span class="gapline mr10 ml10"></span>
<span>{{ IdCard(item.yjRysfzh, 2) }}</span>
<span>{{ IdCard(item.rysfzh, 2) }}</span>
<span class="gapline mr10 ml10"></span>
<span>{{ IdCard(item.yjRysfzh, 3) }}</span>
<span>{{ IdCard(item.rysfzh, 3) }}</span>
</div>
<span class="tag" v-if="item.yjbqmc" :style="{'background':`${changeBG(item.yjJb)}`}">{{ item.yjbqmc }}</span>
<span class="tag" v-if="item.yjbq" :style="{ 'background': `${changeBG(item.yjjb)}` }">{{ item.yjbq }}</span>
</div>
<div v-if="item.yjLx == 2" class="flex">车牌类型：
<DictTag :tag="false" :value="item.yjHplx" color="#fff" :options="dict.D_BZ_HPZL" />
<div v-if="item.yjlb == 2" class="flex">车牌类型：
<DictTag :tag="false" :value="item.hplx" color="#fff" :options="dict.D_BZ_HPZL" />
</div>
<div class="mt4" v-else>身份证：{{ item.yjRysfzh }}</div>
<div class="mt4 two_text_detail">预警时间：{{ item.yjSj }}</div>
<div class="mt4" v-else>身份证：{{ item.rysfzh }}</div>
<div class="mt4 two_text_detail">预警时间：{{ item.yjsj }}</div>
</div>
</div>
<div class="warning-info warning-boder pb5">
<div class="mt4 two_text_detail">预警内容：{{ item.yjNr }}</div>
<div class="warning-info warning-boder pb5" v-if="item.yjlx == '01'">
<div class="mt4 two_text_detail">预警内容：{{ item.yjnr }}</div>
</div>
<div class="warning-info pt5 pb5 warning-boder">
<div class="mt4 two_text_detail">处置结果：{{ item.yjNr }}</div>
<div class="warning-info pt5 pb5 warning-boder" v-if="item.yjlx == '01'">
<div class="mt4 two_text_detail">处置结果：{{ item.yjnr }}</div>
</div>
<div class="warning-info pt5 ">
<div class="warning-info pt5 " v-if="item.yjlx == '01'">
<div class="two_text_detail flex lh25"><img src="@/assets/images/ddtb.png" width="20" height="25" alt=""
srcset="">{{
item.yjNr }}</div>
item.yjnr }}</div>
</div>
<div class="mt4 two_text_detail" v-if="buttonBox">
<el-button type="primary" @click="pushAssess(item)">全息档案</el-button>
<el-button color="#ef7762" @click="showDetail(item)" style="color: #fff;">转合成</el-button>
<el-button type="warning">转基管</el-button>
<el-button type="danger">转会商</el-button>
<el-button type="success" @click="showFeedback(item, '签收')" v-if="item.czzt == '01'">签收</el-button>
<el-button type="success" @click="showFeedback(item, '反馈')" v-if="item.czzt == '02'">反馈</el-button>
<el-button type="success" @click="showFeedback(item, '查看反馈')" v-if="item.czzt == '03'">查看反馈</el-button>
<el-button type="success" @click="plotThetrajectory(item.rysfzh)">轨迹上图</el-button>
</div>
<!-- props.item.czzt == '03'" -->
</div>
<HolographicArchive v-model="assessShow" :dataList="dataList" />
</template>
<script setup>
import { IdCard } from '@/utils/validate.js'
import { reactive, ref } from "vue";
import { reactive, ref, getCurrentInstance } from "vue";
import { qcckGet, qcckPost } from "@/api/qcckApi.js";
import HolographicArchive from './holographicArchive.vue'
const { proxy } = getCurrentInstance();
const props = defineProps({
item: {
type: Object,
@ -61,8 +75,12 @@ const props = defineProps({
}, dict: {
tupe: Object,
default: {}
}, buttonBox: {
type: Boolean,
default: false
}
});
const emit = defineEmits(["plotThetrajectory", "showDetail", 'showFeedback']);
const changeBG = (str) => {
switch (str) {
@ -72,9 +90,44 @@ const changeBG = (str) => {
return "orange";
case "30":
return "#b5b522";
default: return "blue";
default:
return "blue";
}
};
// 轨迹上图
const plotThetrajectory = (val) => {
emit('plotThetrajectory', val);
}
// 查看反馈
const showFeedback = (val, type) => {
switch (type) {
case '签收':
proxy.$confirm("是否确定要签收？", "警告", { type: "warning" }).then(() => {
qcckPost({ id: val.id }, "/mosty-gsxt/tbYjxx/yjqs").then(() => {
val.czzt = '02'
proxy.$message({ type: "success", message: "签收成功" });
});
})
break;
case '反馈':
case '查看反馈':
const data = {
...val,
type: type,
}
emit('showFeedback', data);
break;
}
}
const showDetail = (item) => {
emit('showDetail', item);
}
const assessShow = ref(false)
const dataList = ref()
const pushAssess = (val) => {
assessShow.value = true;
dataList.value = val;
}
</script>
<style lang="scss" scoped>

431
src/views/home/components/holographicArchive.vue Normal file
View File

@ -0,0 +1,431 @@
<!--全息档案展示组件 -->
<template>
<el-dialog v-model="modelValue" :title="title" :width="width" @close="close" append-to-body>
<div class="archive-container">
<!-- 基本信息卡片 -->
<div class="basic-info-card">
<div class="info-header">
<!-- 头像区域 -->
<div class="avatar-section">
<el-image class="main-avatar" :src="personData.rltp || personData.qsztp" fit="cover"
:preview-src-list="[personData.rltp , personData.qsztp]" />
</div>
<!-- 基本信息 -->
<div class="basic-info">
<!-- 姓名字段单独一行 -->
<div class="info-row">
<div class="info-item">
<span class="info-label">姓名：</span>
<span class="info-value">{{ personData.xm || '未记录' }}</span>
</div>
<div class="info-item">
<span class="info-label">身份号：</span>
<span class="info-value">{{ personData.sfzhm || '未记录' }}</span>
</div>
</div>
<!-- 基本信息 - 两个字段一行 -->
<div class="info-row">
<div class="info-item">
<span class="info-label">出生日期：</span>
<span class="info-value">{{ personData.csrq || '未记录' }}</span>
</div>
<div class="info-item">
<span class="info-label">性别：</span>
<span class="info-value">{{ personData.xb || '未记录' }}</span>
</div>
</div>
<div class="info-row">
<div class="info-item">
<span class="info-label">民族：</span>
<span class="info-value">{{ personData.mz || '未记录' }}</span>
</div>
<div class="info-item">
<span class="info-label">婚姻状况：</span>
<span class="info-value">{{ personData.hyzq || '未记录' }}</span>
</div>
</div>
<div class="info-row">
<div class="info-item">
<span class="info-label">联系方式：</span>
<span class="info-value">{{ personData.lxfs || '未记录' }}</span>
</div>
<div class="info-item">
<span class="info-label">户主号码：</span>
<span class="info-value">{{ personData.hzhm || '未记录' }}</span>
</div>
</div>
<div class="info-row">
<div class="info-item">
<span class="info-label">文化程度：</span>
<span class="info-value">{{ personData.whcd || '未记录' }}</span>
</div>
<div class="info-item">
<span class="info-label">毕业情况：</span>
<span class="info-value">{{ personData.byqq || '未记录' }}</span>
</div>
</div>
<div class="info-row">
<div class="info-item">
<span class="info-label">身高：</span>
<span class="info-value">{{ personData.sg || '未记录' }}</span>
</div>
</div>
<div class="info-row">
<div class="info-item full-width">
<span class="info-label">人员标签：</span>
<span class="info-value">{{ personData.rybq || '未记录' }}</span>
</div>
</div>
</div>
</div>
<!-- 详细信息 -->
<div class="detail-info">
<!-- 详细信息 - 两个字段一行 -->
<div class="info-row">
<div class="info-item">
<span class="info-label">人员国籍：</span>
<span class="info-value">{{ personData.rygj || '未记录' }}</span>
</div>
<div class="info-item">
<span class="info-label">人员地区：</span>
<span class="info-value">{{ personData.rydq || '未记录' }}</span>
</div>
</div>
<div class="info-row">
<div class="info-item">
<span class="info-label">户籍城市：</span>
<span class="info-value">{{ personData.hjcs || '未记录' }}</span>
</div>
<div class="info-item">
<span class="info-label">户籍籍贯：</span>
<span class="info-value">{{ personData.hjjg || '未记录' }}</span>
</div>
</div>
<div class="info-row">
<div class="info-item">
<span class="info-label">工作单位：</span>
<span class="info-value">{{ personData.gzdw || '未记录' }}</span>
</div>
<div class="info-item">
<span class="info-label">职业信息：</span>
<span class="info-value">{{ personData.zyxx || '未记录' }}</span>
</div>
</div>
<div class="info-row">
<div class="info-item">
<span class="info-label">入境时间：</span>
<span class="info-value">{{ personData.rjsj || '未记录' }}</span>
</div>
<div class="info-item">
<span class="info-label">入境事由：</span>
<span class="info-value">{{ personData.rjsy || '未记录' }}</span>
</div>
</div>
<div class="info-row">
<div class="info-item">
<span class="info-label">证件类型：</span>
<span class="info-value">{{ personData.qzlx || '未记录' }}</span>
</div>
<div class="info-item">
<span class="info-label">证件号码：</span>
<span class="info-value">{{ personData.qzhm || '未记录' }}</span>
</div>
</div>
<div class="info-row">
<div class="info-item">
<span class="info-label">证件校验：</span>
<span class="info-value">{{ personData.zjxy || '未记录' }}</span>
</div>
<div class="info-item">
<span class="info-label">境外人员类别：</span>
<span class="info-value">{{ personData.jwrylb || '未记录' }}</span>
</div>
</div>
<!-- <div class="info-row">
<div class="info-item">
<span class="info-label">毕业情况：</span>
<span class="info-value">{{ personData.byqq || '未记录' }}</span>
</div>
<div class="info-item">
<span class="info-label">统战序列备注：</span>
<span class="info-value">{{ personData.trzxlbz || '未记录' }}</span>
</div>
</div> -->
<!-- <div class="info-row">
<div class="info-item">
<span class="info-label">户主号码：</span>
<span class="info-value">{{ personData.hzhm || '未记录' }}</span>
</div>
</div> -->
<!-- <div class="info-row">
<div class="info-item">
<span class="info-label">起始图片：</span>
<span class="info-value">{{ personData.qsztp ? '已上传' : '未记录' }}</span>
</div>
</div> -->
<!-- 户籍和居住地放在最后，独占一行 -->
<div class="info-row">
<div class="info-item full-width">
<span class="info-label">户籍所在地：</span>
<span class="info-value">{{ personData.hjdz || '未记录' }}</span>
</div>
</div>
<div class="info-row">
<div class="info-item full-width">
<span class="info-label">居住地：</span>
<span class="info-value">{{ personData.jzdz || '未记录' }}</span>
</div>
</div>
</div>
</div>
</div>
<template #footer>
<div class="dialog-footer">
<el-button @click="close">关闭</el-button>
</div>
</template>
</el-dialog>
</template>
<script setup>
import { ref, defineProps, defineEmits, reactive, watch } from 'vue';
import {ryxxJbxxSave} from '@/api/qxda.js'
const props = defineProps({
modelValue: {
type: Boolean,
default: false
},
title: {
type: String,
default: '全息档案'
},
width: {
type: String,
default: '50%'
},
url: {
type: String,
default: ''
},
dataList: {
type: Object,
default: () => ({})
}
});
watch(() => props.modelValue, (newVal, oldVal) => {
if (newVal) {
getryxxJbxxSave()
}
})
// 个人信息数据对象 - 使用用户提供的数据
const personData = ref({ });
// 预览图片列表
const srcList = ref([
'https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg',
'https://fuss10.elemecdn.com/1/34/19aa98b1fcb2781c4fba33d850549jpeg.jpeg',
'https://fuss10.elemecdn.com/0/6f/e35ff375812e6b0020b6b4e8f9583jpeg.jpeg',
'https://fuss10.elemecdn.com/9/bb/e27858e973f5d7d3904835f46abbdjpeg.jpeg',
'https://fuss10.elemecdn.com/d/e6/c4d93a3805b3ce3f323f7974e6f78jpeg.jpeg',
'https://fuss10.elemecdn.com/3/28/bbf893f792f03a54408b3b7a7ebf0jpeg.jpeg',
'https://fuss10.elemecdn.com/2/11/6535bcfb26e4c79b48ddde44f4b6fjpeg.jpeg',
]);
// 定义事件
const emit = defineEmits(['update:modelValue']);
const getryxxJbxxSave = () => {
ryxxJbxxSave({ sfzhm:'540402195805123219' // props.dataList.rysfzh
}).then((res) => {
personData.value = res[0]
});
}
const close = () => {
emit('update:modelValue', false);
};
</script>
<style scoped>
/* 容器样式 */
.archive-container {
padding: 15px;
height: 50vh;
overflow: auto;
}
/* 基本信息卡片 */
.basic-info-card {
background-color: #f0f9ff;
border: 1px solid #91d5ff;
border-radius: 8px;
padding: 25px;
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
}
/* 信息头部（头像+基础信息） */
.info-header {
display: flex;
align-items: flex-start;
gap: 40px;
margin-bottom: 0;
padding-bottom: 20px;
border-bottom: 1px solid #d6eaff;
margin-bottom: 20px;
}
/* 头像区域 */
.avatar-section {
display: flex;
flex-direction: column;
align-items: center;
gap: 10px;
}
/* 主头像 */
.main-avatar {
width: 120px;
height: 140px;
border: 3px solid #409EFF;
border-radius: 4px;
background-color: #fff;
}
/* 辅助头像容器 */
.sub-avatars {
display: flex;
gap: 8px;
}
/* 小头像 */
.sub-avatar {
width: 50px;
height: 50px;
border: 2px solid #409EFF;
border-radius: 4px;
background-color: #fff;
}
/* 基本信息区域 */
.basic-info {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
gap: 12px;
}
/* 信息行 */
.info-row {
display: flex;
margin-bottom: 0;
align-items: center;
flex-wrap: wrap;
min-height: 32px;
}
/* 信息项 */
.info-item {
margin-right: 0;
margin-bottom: 0;
flex: 0 0 calc(50% - 10px);
max-width: calc(50% - 10px);
min-height: 32px;
display: flex;
align-items: center;
padding-right: 20px;
}
/* 全宽信息项（用于姓名字段和地址字段） */
.info-item.full-width {
flex: 0 0 100%;
max-width: 100%;
padding-right: 0;
}
/* 信息标签 */
.info-label {
color: #0060c8;
font-weight: bold;
font-size: 14px;
margin-right: 8px;
white-space: nowrap;
min-width: 80px;
}
/* 信息值 */
.info-value {
color: #000;
font-size: 14px;
word-break: break-all;
flex: 1;
}
/* 详细信息区域 */
.detail-info {
background-color: #fff;
border-radius: 6px;
padding: 20px;
border-left: 4px solid #409EFF;
margin-top: 0;
display: flex;
flex-direction: column;
gap: 12px;
}
/* 响应式设计 */
@media (max-width: 768px) {
.info-header {
flex-direction: column;
align-items: center;
text-align: left;
gap: 20px;
}
.info-row {
flex-direction: column;
align-items: stretch;
min-height: auto;
margin-bottom: 0;
}
.info-item {
margin-right: 0;
margin-bottom: 0;
flex: 0 0 100%;
max-width: 100%;
min-height: 36px;
display: flex;
align-items: center;
padding-right: 0;
}
.info-label {
display: inline-block;
min-width: 80px;
}
.info-value {
flex: 1;
}
/* 全宽信息项在移动端保持全宽 */
.info-item.full-width {
flex: 0 0 100%;
max-width: 100%;
}
}
</style>

8
src/views/home/components/yjItem.vue
View File

@ -45,15 +45,7 @@
<div class="mt4 two_text_detail">预警时间：{{ item.yjSj }}</div>
<div class="mt4 one_text_detail">预警地址：{{ item.yjDz }}</div>
<div class="mt4 two_text_detail">预警内容：{{ item.yjNr }}</div>
<div class="mt4 two_text_detail">
<el-button type="primary">全息档案</el-button>
<el-button color="#ef7762" style="color: #fff;">转合成</el-button>
<el-button type="warning">转基管</el-button>
<el-button type="danger">转会商</el-button>
<el-button type="success">查看反馈</el-button>
<el-button type="success">轨迹上图</el-button>
</div>
</div>
</div>
</template>

143
src/views/home/dialog/components/home_yj.vue
View File

@ -1,8 +1,9 @@
<template>
<DialogDragger title="预警详情" top="150px" v-model="props.show" @close="close">
<ul class="warningList" ref="gjyjList">
<li v-for="item in props.data" :key="item.id">
<YjItem :item="item" />
<li v-for="item in props.data" :key="item">
<deployControlItem :item="item" :buttonBox="true" @plotThetrajectory="plotThetrajectory"
@showFeedback="showFeedback" @showDetail="showDetail"/>
</li>
<MOSTY.Empty :show="props.data.length <= 0" :imgSize="150"></MOSTY.Empty>
</ul>
@ -10,12 +11,23 @@
<GdMap v-if="showMap" :mapKey="'home_yj_map'" :mapid="'homeYjMap'" />
</div>
</DialogDragger>
<FkDialog @change="close"/>
<Information v-model="showDialog" title="发送指令" @submit='submit' @close='closeFszl'>
<SemdFqzl ref="semdFqzlRef" :itemData="itemData" @handleClose="handleClose" identification="yj"
:tacitly="tacitly" />
</Information>
</template>
<script setup>
import * as MOSTY from "@/components/MyComponents/index";
import GdMap from "@/components/GdMap/index.vue";
import DialogDragger from "@/views/home/layout/dialogDragger.vue";
import YjItem from "@/views/home/components/yjItem.vue";
import deployControlItem from "@/views/home/components/deployControlItem.vue";
import Information from "@/views/home/model/information.vue";
import SemdFqzl from '@/components/instructionHasBeen/sendFqzl.vue'
import { tbYjxxGsgj } from '@/api/yj'
import FkDialog from "@/views/backOfficeSystem/fourColorManage/warningControl/centerHome/components/fkDialog.vue";
import { ref, defineProps, onMounted, watch, getCurrentInstance } from "vue";
import emitter from "@/utils/eventBus.js";
const gjyjList = ref(null); //预警列表数据
@ -92,9 +104,132 @@ onMounted(() => {
})
const handleHs = ref(0)
watch(() => gjyjList.value, (val) => {
console.log(val.clientHeight);
handleHs.value = val.clientHeight + 198 + 150 + 20
}, { deep: true })
// 轨迹上图
const plotThetrajectory = (val) => {
tbYjxxGsgj({
startTime: null,
endTime: null,
yjRysfzh: val
}).then(res => {
console.log(res);
if (res && res[0].list.length > 0) {
let coords = res[0].list.map(item => {
return [item.jd, item.wd]
})
// const coords = [
// [
// 94.3695802486277983689433312974870204925537109375,
// 29.659805088901098457654370577074587345123291015625
// ],
// [
// 94.369054723455093380835023708641529083251953125,
// 29.66032233866609857386720250360667705535888671875
// ],
// [
// 94.3684916577901020673380116932094097137451171875,
// 29.660979382630298317735650925897061824798583984375
// ],
// [
// 94.3683415069466065006054122932255268096923828125,
// 29.660755708570601285600787377916276454925537109375
// ],
// [
// 94.3675662718153063224235665984451770782470703125,
// 29.659987675165101705943015986122190952301025390625
// ],
// [
// 94.366890606904092919648974202573299407958984375,
// 29.659353928438999759009675472043454647064208984375
// ],
// [
// 94.3656729217579055557507672347128391265869140625,
// 29.6582345740253998656044132076203823089599609375
// ],
// [
// 94.3646650204280064144768402911722660064697265625,
// 29.657336173164399184543071896769106388092041015625
// ],
// [
// 94.364147680070203705327003262937068939208984375,
// 29.6567231392728984928908175788819789886474609375
// ],
// [
// 94.3636436022359958997185458429157733917236328125,
// 29.65662527779360146951148635707795619964599609375
// ],
// [
// 94.362367320062702447103220038115978240966796875,
// 29.6567138191363000032652053050696849822998046875
// ],
// [
// 94.3614396063849056872641085647046566009521484375,
// 29.656713819753800720491199172101914882659912109375
// ],
// [
// 94.3603242001151016893345513381063938140869140625,
// 29.65673712009380125209645484574139118194580078125
// ],
// [
// 94.358962121621999585840967483818531036376953125,
// 29.65674177535930056137658539228141307830810546875
// ],
// [
// 94.3576684689077040957272402010858058929443359375,
// 29.65681167375640114869383978657424449920654296875
// ],
// [
// 94.3564404495050013110812869854271411895751953125,
// 29.65685827438640131958891288377344608306884765625
// ],
// [
// 94.3547512464013067301493720151484012603759765625,
// 29.656946809372101370172458700835704803466796875
// ]
// ]
emitter.emit('drawLineAnimation', {
type: "solid",
coords: coords,
isclear: true,
flag: "yjLine"
})
} else {
ElMessage({ message: '暂无轨迹数据', type: 'warning' });
}
})
}
// 查看反馈
const showFeedback = (val) => {
console.log(val,"查查零xxxxxx零");
emitter.emit("openFkDialog",val )
}
// 发送指令
const showDialog = ref(false)
const itemData = ref()
const showDetail = (item) => {
showDialog.value = true;
itemData.value = item
}
const handleClose = () => {
showDialog.value = false;
}
const semdFqzlRef = ref()
const tacitly = {
title: 'yjbt',
instructionContent: 'yjnr'
}
const submit = () => {
semdFqzlRef.value.getsendFqzl()
}
const closeFszl = () => {
semdFqzlRef.value.close()
}
</script>
<style lang="scss" scoped>

5
src/views/home/echarts/barHatEcharts.vue
View File

@ -225,13 +225,12 @@ function lineChartFn(xDate, legend, series) {
fontSize: 13,
fontWeight: 'normal'
},
formatter: function(params) {
formatter: function (params) {
// 获取当前数据点的所有系列信息
const dataIndex = params.dataIndex;
const categoryName = params.name;
let result = `<div style="margin-bottom: 8px; font-weight: bold; color: #00d4ff; font-size: 14px; border-bottom: 1px solid #00d4ff; padding-bottom: 4px;">${categoryName}</div>`;
// 遍历所有系列，显示该数据点的所有信息
if (props.data && props.data.list) {
props.data.list.forEach((seriesData, index) => {
@ -240,7 +239,7 @@ function lineChartFn(xDate, legend, series) {
result += `<div style="margin: 4px 0; display: flex; align-items: center;">
<span style="display: inline-block; width: 12px; height: 12px; background: ${color};
border-radius: 50%; margin-right: 8px; border: 1px solid rgba(255,255,255,0.3);"></span>
<span style="color: #fff; margin-right: 8px; min-width: 60px;">${categoryName}:</span>
<span style="color: #fff; margin-right: 8px; min-width: 60px;">${seriesData.name}:</span>
<span style="color: #00d4ff; font-weight: bold; font-size: 14px;">${value}</span>
</div>`;
});

180
src/views/home/index.vue
View File

@ -1,12 +1,11 @@
<template>
<div class="homeBox">
<div class="homeBox" style="background-color: #07274d;">
<!-- 头部 -->
<Head></Head>
<!-- 左边 -->
<div class="home-aside asideL">
<div class="asideL-top">
<DbCount></DbCount>
</div>
<div class="asideL-Bottom">
@ -14,11 +13,21 @@
<QbsbCount></QbsbCount>
</div>
<div class="commom-aside">
<QblyType></QblyType>
<KeyPpersonneltypes />
</div>
<div class="commom-aside">
<!-- <GroupWarning /> -->
<TextType></TextType>
<div class="commom-aside" @mouseenter="mouseEnter" @mouseleave="mouseLeave"
style="position: relative; height: 100%; overflow: hidden;">
<!-- <GroupWarning /> -->
<div style="position: relative; height: 100%;">
<transition name="flip" mode="out-in">
<div :key="'qb'" v-if="reversalPushShow" class="flip-wrapper">
<QblyType @reversalPush="reversalPush"></QblyType>
</div>
<div :key="'text'" v-else class="flip-wrapper">
<TextType @reversalPush="reversalPush"></TextType>
</div>
</transition>
</div>
<!-- <QbfkCount></QbfkCount> -->
</div>
</div>
@ -29,11 +38,11 @@
<Calendar />
</div>
<div class="commom-aside-big">
<Experience />
<Experience />
</div>
<div class="commom-aside-small">
<SituationAssessment />
<!-- <SituationAssessment /> -->
<Judgment />
</div>
</div>
<!-- 中间 -->
@ -48,13 +57,27 @@
<div class="flex-1" style="width: 340px;position: absolute;z-index: 100;right: 0;">
<DeployControl />
</div>
<!-- <div class="mr10" style="width: 30%;"><DeployControl /></div> -->
<!-- <div class="flex-1" style="flex: 1;"><ZdryWarning /></div> -->
<!-- <div class="flex-1" style="width: 340px;position: absolute;z-index: 100;left: 0;">
<div style="background-color: #07274d; height: 100px;">
生份证："xxxxxxxx"
</div>
</div> -->
<div class="flex-1" style="width: 340px;position: absolute;z-index: 100;left: 0;top: 30%;">
<GeneralWindow />
</div>
</div>
</div>
<!-- 底部 -->
<div class="home-foot-t">
<Bkcz></Bkcz>
<div style="width: 33%;">
<WarningDistrict></WarningDistrict>
</div>
<div style="width: 33%;">
<WarningLevels></WarningLevels>
</div>
<div style="width: 33%;">
<Bkcz></Bkcz>
</div>
</div>
</div>
<!-- 左边弹窗 -->
@ -63,7 +86,7 @@
</template>
<script setup>
import { ref, getCurrentInstance, reactive, onMounted } from 'vue'
import { ref, getCurrentInstance, reactive, onMounted, onUnmounted } from 'vue'
import LeftDialog from './dialog/leftDialog'
import GdMap from "@/components/GdMap/index.vue";
import Head from './layout/head.vue'
@ -72,20 +95,21 @@ import QbsbCount from './model/qbsbCount.vue'
import QblyType from './model/qblyType.vue'
import TextType from './model/textType.vue'
import Bkcz from './model/bkcz.vue'
import GroupWarning from './model/groupWarning.vue'
import WarningLevels from './model/warningLevels.vue'
import Yszs from './model/yszs.vue'
import DeployControl from './model/deployControl.vue';
import SituationAssessment from './model/situationAssessment.vue'
import Experience from './model/experience.vue'
import Calendar from './model/calendar.vue'
import { getItem, setItem} from "@/utils/storage";
import KeyPpersonneltypes from './model/keyPpersonneltypes.vue'
import WarningDistrict from './model/WarningDistrict.vue'
import { getItem, setItem } from "@/utils/storage";
import emitter from "@/utils/eventBus.js";
import { bm ,centralPoint} from '@/views/backOfficeSystem/IntelligentControl/DeploymentArea/xzqh.js'
import SwitchSysDialog from '@/components/SwitchSysDialog.vue'
const changeXzqh = (val,trg) => {
import { bm, centralPoint } from '@/views/backOfficeSystem/IntelligentControl/DeploymentArea/xzqh.js'
import Judgment from './model/judgment.vue'
import { tbYjxxGetList } from '@/api/zdr.js'
import GeneralWindow from './model/generalWindow.vue'
const changeXzqh = (val, trg) => {
setTimeout(() => {
// 先移除已有的边界
emitter.emit('removeBj')
@ -141,7 +165,7 @@ const getDepId = () => {
const deptCode = deptId[0].deptCode ? deptId[0].deptCode : null
if (deptLevel.startsWith('2')) {
const data = Object.values(bm).map(item => item);
changeXzqh(data,true)
changeXzqh(data, true)
} else {
switch (deptCode) {
case '54040200000'://巴宜区
@ -159,30 +183,96 @@ const getDepId = () => {
case '54042600000'://朗县
changeXzqh(bm[542627])
break;
case '54042200000'://米林县
case '54042200000'://米林县
changeXzqh(bm[542623])
break;
case '54042300000'://墨脱县
case '54042300000'://墨脱县
changeXzqh(bm[542624])
break;
default:
const data = Object.values(bm).map(item => item);
changeXzqh(data,true)
const data = Object.values(bm).map(item => item);
changeXzqh(data, true)
break;
}
}
}
}
const makerCenter = () => {
const dw = require("@/assets/point/dingwei.png")
const dw = require("@/assets/point/dingwei.png")
const coords = centralPoint.map(item => {
return { jd: item.point[0], wd: item.point[1], jzMc: item.name }
})
emitter.emit("addPointArea", { coords, icon: dw, flag: "hm", size: '14px', showTitle: true, offset: [0, -25] });
}
const timeRef = ref('')
let bj=ref(0)
// 布控预警上图
const getTbYjxxGetList = () => {
tbYjxxGetList().then(res => {
const coords = res.map(item => {
return {
id: item.id,
jd: item.jd,
wd: item.wd,
yjtp: item.yjTp,
yjnr: item.yjNr,
yjLx: item.yjlx,
yjlx: '01',
yjsj: item.yjSj,
rysfzh: item.yjRysfzh,
ryxm: item.yjRyxm,
}
})
if (timeRef.value != coords[0].yjsj&&bj.value==1) {
const icons = require("@/assets/point/jq.png")
emitter.emit('addPointArea', { coords: [{ jd: coords[0].jd, wd: coords[0].wd }], icon: icons, flag: 'yjs' })
emitter.emit('yjDetail', coords[0])
timeRef.value = coords[0].yjsj
}
bj.value=1
const icon = require("@/assets/point/yj.png")
emitter.emit('addPoint', { coords: coords, icon: icon, flag: 'yj', fontColor: '#FF0000' })
})
}
let timing = ref(true)
onMounted(() => {
getDepId()
makerCenter()
mouseLeave()
getTbYjxxGetList()
})
const timer = setInterval(() => {
getTbYjxxGetList()
}, 60000)
const reversalPushShow = ref(true)
const reversalPush = () => {
reversalPushShow.value = !reversalPushShow.value
// 移除clearInterval调用，避免定时器被清除
}
// 鼠标移入
const mouseEnter = () => {
clearInterval(timing.value)
}
// 鼠标移出
const mouseLeave = () => {
// 清除可能存在的旧定时器，避免多个定时器同时运行
clearInterval(timing.value)
// 设置为5秒自动切换，更容易测试效果
timing.value = setInterval(() => {
reversalPush()
}, 30000)
}
onUnmounted(() => {
clearInterval(timing.value)
clearInterval(timer)
})
@ -281,4 +371,38 @@ onMounted(() => {
align-items: center;
}
.home-foot-t {
display: flex;
}
/* Vue 过渡动画 - 翻转效果 */
.flip-enter-active,
.flip-leave-active {
transition: transform 0.6s ease, opacity 0.6s ease;
transform-style: preserve-3d;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.flip-enter-from {
transform: rotateY(90deg) translateZ(0);
opacity: 0;
}
.flip-leave-to {
transform: rotateY(-90deg) translateZ(0);
opacity: 0;
}
/* 包装层样式 */
.flip-wrapper {
position: relative;
width: 100%;
height: calc(100%/3 - 8px);
backface-visibility: hidden;
perspective: 1000px;
}
</style>

93
src/views/home/layout/head.vue
View File

@ -3,17 +3,19 @@
<FlowLine></FlowLine>
<div class="headBoxBg">
<!-- 左边 -->
<el-popover width="480px" :visible="isShowVisble" :append-to-body="true" trigger="click" popper-class="bszdr-tq-Popover" >
<el-popover width="480px" :visible="isShowVisble" :append-to-body="true" trigger="click"
popper-class="bszdr-tq-Popover">
<template #reference>
<ul class="topBtn topBtn-left flex" ref="btnRefs" v-if="wekendays && wekendays.length > 0" @click="openWinter" >
<li class="flex align-center pointer mr10" >
<ul class="topBtn topBtn-left flex" ref="btnRefs" v-if="wekendays && wekendays.length > 0"
@click="openWinter">
<li class="flex align-center pointer mr10">
<img class="mr10" :src="showIcon(wekendays[0].dqtq)" alt="" />
<div class="">
<div class="f15 text">{{ wekendays[0].dqtq }}</div>
<div class="tests">{{ wekendays[0].fx }}</div>
</div>
</li>
<li class="flex align-center mr10 ml10 pointer" >
<li class="flex align-center mr10 ml10 pointer">
<img class="mr10" :src="icon3" alt="" />
<div>
<div class="f16 text">{{ wekendays[0].dqwd }}°C</div>
@ -22,10 +24,11 @@
</div>
</div>
</li>
<li class="flex align-center pointer relative" >
<span class="tqCount" v-if="wekendays[0].list.length > 0">{{ wekendays[0].list.length }}</span>
<img v-if="wekendays[0].list.length > 0" width="34" height="34" class="mr10" src="@/assets/images/icon_066.gif" alt="" />
<img v-else class="mr10" src="@/assets/images/icon_057.png" alt="" />
<li class="flex align-center pointer relative">
<span class="tqCount" v-if="wekendays[0].list.length > 0">{{ wekendays[0].list.length }}</span>
<img v-if="wekendays[0].list.length > 0" width="34" height="34" class="mr10"
src="@/assets/images/icon_066.gif" alt="" />
<img v-else class="mr10" src="@/assets/images/icon_057.png" alt="" />
<div>
<div class="f16 text"> {{ hour + ":" + minute + ":" + second }}</div>
<div class="tests">{{ weekenday }} {{ datatime }}</div>
@ -41,8 +44,8 @@
<div class="tc" style="width: 80px">风速</div>
<div class="tc" style="width: 100px">日期</div>
</li>
<li class="tqItem relative flex align-center pointer mb8" v-for="(iv, idx) in wekendays" :key="idx" >
<span class="Count" v-if="iv.list.length > 0">{{ iv.list.length }}</span>
<li class="tqItem relative flex align-center pointer mb8" v-for="(iv, idx) in wekendays" :key="idx">
<span class="Count" v-if="iv.list.length > 0">{{ iv.list.length }}</span>
<img class="mr10" :src="showIcon(iv.dqtq)" alt="" />
<div class="tc" style="width: 100px"> {{ iv.btwd }}° ~ {{ iv.yjwd }}° </div>
<div class="tc" style="width: 80px">晴</div>
@ -54,14 +57,16 @@
</el-popover>
<ul class="leftBtn-yjbtn flex">
<li class="leftBtn-item pointer" @click.stop="handleBtns(it)" :class="btnsActive == it ? 'yjbtnActive' : ''" v-for="it in btns.leftBtn" :key="it">
<li class="leftBtn-item pointer" @click.stop="handleBtns(it)" :class="btnsActive == it ? 'yjbtnActive' : ''"
v-for="it in btns.leftBtn" :key="it">
<span class="btms">{{ it }}</span>
</li>
</ul>
<div class="top-center pointer">{{ props.title }}</div>
<div class="top-center pointer" @click="handleBtns('后台')">{{ props.title }}</div>
<!-- 右边 -->
<ul class="topBtn topBtn-right" v-if="!props.type">
<li class="topBtn-item" @click.stop="handleBtns(it)" :class="btnsActive == it ? 'active-topBtn' : ''" v-for="it in btns.rightBtn" :key="it">
<ul class="topBtn topBtn-right" v-if="!props.type">
<li class="topBtn-item" @click.stop="handleBtns(it)" :class="btnsActive == it ? 'active-topBtn' : ''"
v-for="it in btns.rightBtn" :key="it">
<span>{{ it }}</span>
</li>
</ul>
@ -70,18 +75,27 @@
<div class="flex align-center">
<img class="mr10" src="@/assets/images/icon_046.png" alt="" />
<div class="f14">
<div style="color:#0BB7FF">{{ userName }}</div><div>{{ dept }}</div>
<div style="color:#0BB7FF">{{ userName }}</div>
<div>{{ dept }}</div>
</div>
<el-popover popper-class="zdy-meuns-popover" placement="bottom" width="400" :append-to-body="true" v-model:visible="showMore" trigger="click">
<el-popover popper-class="zdy-meuns-popover" placement="bottom" width="400" :append-to-body="true"
v-model:visible="showMore" trigger="click">
<template #reference>
<span @click="showMore = !showMore" class="ml10 mr10"><img style="width:10px" src="@/assets/images/Polygon_right.png" alt=""></span>
<span @click="showMore = !showMore" class="ml10 mr10"><img style="width:10px"
src="@/assets/images/Polygon_right.png" alt=""></span>
</template>
<div class="settingItem" @click.stop="handleBtns(iv)" v-for="iv in btns.moreBtn" :key="iv">
<el-icon color="#fff" style="top:2px;"><Notification/></el-icon><i class="ml10" style="color: #fff;">{{iv}}</i>
<div class="settingItem" @click.stop="handleBtns(iv.name)" v-for="iv in btns.moreBtn" :key="iv.name">
<!-- <el-icon color="#fff" style="top:2px;">
<Notification />
</el-icon> -->
<i class="ml10" style="color: #fff;">{{ iv.name }}</i>
</div>
</el-popover>
<span class="ml10 mr10"><img @click.stop="handleBtns('后台')" src="@/assets/images/meun.png" alt=""></span>
<!-- <img class="mr10" src="@/assets/images/Group427322485.png" style="width: 100px" alt="" />
<img class="mr10" src="@/assets/images/Group427322486.png" style="width: 100px" alt="" /> -->
<!-- <span class="ml10 mr10"><img @click.stop="handleBtns('后台')" src="@/assets/images/meun.png" alt=""></span> -->
</div>
</ul>
</div>
@ -92,7 +106,6 @@
<script setup>
import FlowLine from './flowLine.vue'
import { getItem } from "@/utils/storage";
import { qcckGet, qcckPost } from "@/api/qcckApi.js";
import { timeValidate, weekValidate } from "@/utils/tools.js";
import { useRouter, useRoute, onBeforeRouteLeave } from "vue-router";
@ -107,23 +120,23 @@ const icon5 = require("@/assets/images/icon_053.png"); //大雨
const icon6 = require("@/assets/images/icon_054.png"); //雷阵雨
const icon7 = require("@/assets/images/icon_055.png"); //多云转晴 - 阴天
const icon8 = require("@/assets/images/icon_056.png"); //多云
import { ref, onMounted, defineEmits, defineProps,onUnmounted, reactive, watch } from "vue";
const userName = getItem("USERNAME");
const dept = getItem("deptId") ? getItem("deptId")[0].deptName : '';
import { ref, onMounted, defineEmits, defineProps, onUnmounted, reactive, watch } from "vue";
const userName = getItem("USERNAME");
const dept = getItem("deptId") ? getItem("deptId")[0].deptName : '';
const props = defineProps({
title: {
type: String,
default: "林芝哨岗系统"
},
type:{
type:String,
default:''
type: {
type: String,
default: ''
}
});
const wekendays = ref([
{ dqtq :'晴' ,fx:'北',dqwd:'30',btwd:'10',yjwd:'20',tqrq:'2022-10-10',list:[]},
{ dqtq :'晴' ,fx:'北',dqwd:'30',btwd:'10',yjwd:'20',tqrq:'2022-10-10',list:[]},
{ dqtq :'晴' ,fx:'北',dqwd:'30',btwd:'10',yjwd:'20',tqrq:'2022-10-10',list:[]},
{ dqtq: '晴', fx: '北', dqwd: '30', btwd: '10', yjwd: '20', tqrq: '2022-10-10', list: [] },
{ dqtq: '晴', fx: '北', dqwd: '30', btwd: '10', yjwd: '20', tqrq: '2022-10-10', list: [] },
{ dqtq: '晴', fx: '北', dqwd: '30', btwd: '10', yjwd: '20', tqrq: '2022-10-10', list: [] },
]);
const isShowVisble = ref(false);
const store = useStore();
@ -131,8 +144,10 @@ const router = useRouter();
const route = useRoute();
const btns = reactive({
rightBtn: ["四色预警", "重点人群"],
leftBtn: ["智能布控",'研判首页'],
moreBtn:['退出登录',]
leftBtn: ["智能布控", '研判首页'],
moreBtn: [
{ name: '后台', img: require('@/assets/images/Group427322486.png') },
{ name: '退出登录', img: require('@/assets/images/Group427322485.png') }]
});
const btnsActive = ref("");
@ -173,7 +188,7 @@ const handleBtns = (val) => {
router.push("/editPassword");
break;
case "重点人群":
router.push("/mpvPeo");
router.push("/mpvPeo");
// const NPShref = router.resolve({ path: '/KeyPopulations', query: {}});
// window.open(NPShref.href, "_blank");
break;
@ -251,7 +266,8 @@ onUnmounted(() => {
<style lang="scss" scoped>
@import "@/assets/css/homeScreen.scss";
.tqItem{
.tqItem {
color: #fff;
}
</style>
@ -268,16 +284,21 @@ onUnmounted(() => {
border: 1px solid #224281 !important;
display: none !important;
}
.bszdr-tq-Popover {
background: url("~@/assets/images/el-popper.png") no-repeat center center !important;
background-size: 100% 100% !important;
border: 1px solid transparent !important;
&[data-popper-placement^="bottom"] .el-popper__arrow::before {
border: none !important;
background: transparent !important;
}
}
.settingItem {
line-height: 22px;
padding: 5px;
border-bottom: 1px solid;
}
</style>

250
src/views/home/model/WarningDistrict.vue Normal file
View 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
View 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>

161
src/views/home/model/bkcz.vue
View File

@ -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>

3
src/views/home/model/calendar.vue
View File

@ -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
View 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>

71
src/views/home/model/dbCount.vue
View File

@ -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>

132
src/views/home/model/deployControl.vue
View File

@ -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
View 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>

153
src/views/home/model/experience.vue
View File

@ -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);

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

@ -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
View 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>

39
src/views/home/model/iframe.vue
View File

@ -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
View 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
View 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
View 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
View 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
View 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>

114
src/views/home/model/qblyType.vue
View File

@ -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>

90
src/views/home/model/qbsbCount.vue
View File

@ -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>

110
src/views/home/model/textType.vue
View File

@ -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
View 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>

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

@ -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>