lcw
This commit is contained in:
131
src/views/home/components/assessmentItem.vue
Normal file
131
src/views/home/components/assessmentItem.vue
Normal file
@ -0,0 +1,131 @@
|
||||
<template>
|
||||
<div class="warning-card ">
|
||||
<div class="warning-info warning-boder pb5">
|
||||
<div class="mt4 two_text_detail">{{ item[nameData.title] }}</div>
|
||||
</div>
|
||||
<!-- 态势研判预警 -->
|
||||
<div class="warning-info pt5 pb5 flex align-center just-between" v-if="lx == 1">
|
||||
<div class="mt4 two_text_detail flex align-center">预警类别：
|
||||
<DictTag :tag="false" :value="item.ypLx" color="#fff" :options="dict.D_SG_TSYPGZ" />
|
||||
</div>
|
||||
<div class="mt4 two_text_detail">预警次数：{{ item.num }}</div>
|
||||
</div>
|
||||
<!-- 群体预警 -->
|
||||
<div class="warning-info pt5 pb5 flex align-center just-between" v-if="lx == 2">
|
||||
<div class="mt4 two_text_detail flex align-center">群体类别：
|
||||
<DictTag :tag="false" :value="item.qtlb" color="#fff" :options="dict.D_GS_ZDQT_LB" />
|
||||
</div>
|
||||
<div class="mt4 two_text_detail flex align-center">风险等级：
|
||||
<DictTag :tag="false" :value="item.yjJb" color="#fff" :options="dict.D_BZ_TYJB" />
|
||||
</div>
|
||||
</div>
|
||||
<!-- 经验分享 -->
|
||||
<div class="warning-info pt5 pb5 flex align-center just-between" v-if="lx == 3">
|
||||
<div class="mt4 two_text_detail">经验发布人：{{ item.fbr }}</div>
|
||||
</div>
|
||||
<div class="warning-info pt5 pb5 warning-boder" v-if="lx == 1 || lx == 2">
|
||||
<div class="mt4 two_text_detail">预警时间：{{ item.yjsj }}</div>
|
||||
</div>
|
||||
<div class="warning-info pt5 pb5 warning-boder" v-if="lx == 3">
|
||||
<div class="mt4 two_text_detail">经验内容：{{ item.fbnr }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { IdCard } from '@/utils/validate.js'
|
||||
import { reactive, ref, watch } from "vue";
|
||||
const props = defineProps({
|
||||
item: {
|
||||
type: Object,
|
||||
default: {}
|
||||
}, dict: {
|
||||
tupe: Object,
|
||||
default: {}
|
||||
},
|
||||
lx: {
|
||||
type: Number,
|
||||
default: 1
|
||||
}
|
||||
});
|
||||
let nameData = ref({
|
||||
title: "ypMc",
|
||||
lbNoe: "预警类别：",
|
||||
})
|
||||
watch(() => props.lx, (val) => {
|
||||
switch (val) {
|
||||
case 1:
|
||||
nameData.value = { title: 'ypMc' }
|
||||
break;
|
||||
case 2:
|
||||
nameData.value = { title: 'qtMc' }
|
||||
case 3:
|
||||
nameData.value = { title: 'qtMc' }
|
||||
break;
|
||||
}
|
||||
}, { immediate: true })
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.warning-card {
|
||||
background: url("~@/assets/images/xxxxxx.png") no-repeat center center;
|
||||
background-size: 100% 100%;
|
||||
gap: 12px;
|
||||
margin-bottom: 4px;
|
||||
padding: 10px;
|
||||
box-sizing: border-box;
|
||||
|
||||
.warning-image {
|
||||
//
|
||||
// width: 80px;
|
||||
// height: 100px;
|
||||
|
||||
// img {
|
||||
// width: 100%;
|
||||
// height: 100%;
|
||||
// object-fit: cover;
|
||||
// }
|
||||
}
|
||||
|
||||
.warning-info {
|
||||
flex: 1;
|
||||
|
||||
.tag {
|
||||
padding: 1px 6px;
|
||||
background: #0072FF;
|
||||
border-radius: 2px 2px 2px 2px;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.gapline {
|
||||
width: 2px;
|
||||
height: 14px;
|
||||
background: #e9e9e9;
|
||||
}
|
||||
}
|
||||
|
||||
.warning-boder {
|
||||
border-bottom: 2px dashed #0958b2;
|
||||
}
|
||||
}
|
||||
|
||||
.red {
|
||||
background: url("~@/assets/images/GroupRed.png") no-repeat center center;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
|
||||
.orange {
|
||||
background: url("~@/assets/images/GroupOrange.png") no-repeat center center;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
|
||||
.yellow {
|
||||
background: url("~@/assets/images/GroupYellow.png") no-repeat center center;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
|
||||
.blue {
|
||||
background: url("~@/assets/images/GroupBlue.png") no-repeat center center;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
</style>
|
||||
125
src/views/home/components/deployControlItem.vue
Normal file
125
src/views/home/components/deployControlItem.vue
Normal file
@ -0,0 +1,125 @@
|
||||
<template>
|
||||
<div class="warning-card ">
|
||||
<div class="warning-image flex">
|
||||
<img :src="item.yjTp" width="65" height="70" />
|
||||
<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>
|
||||
<div class="flex align-center mt4" v-else>
|
||||
<span>{{ item.yjRyxm }}</span>
|
||||
<span class="gapline mr10 ml10"></span>
|
||||
<span>{{ IdCard(item.yjRysfzh, 2) }}</span>
|
||||
<span class="gapline mr10 ml10"></span>
|
||||
<span>{{ IdCard(item.yjRysfzh, 3) }}</span>
|
||||
</div>
|
||||
<span class="tag" v-if="item.yjbqmc">{{ item.yjbqmc }}</span>
|
||||
</div>
|
||||
<div v-if="item.yjLx == 2" class="flex">车牌类型：
|
||||
<DictTag :tag="false" :value="item.yjHplx" 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>
|
||||
</div>
|
||||
<div class="warning-info warning-boder pb5">
|
||||
<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>
|
||||
<div class="warning-info pt5 ">
|
||||
<div class="two_text_detail flex lh25"><img src="@/assets/images/ddtb.png" width="20" height="25" alt="" srcset="">{{ item.yjNr }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { IdCard } from '@/utils/validate.js'
|
||||
import { reactive, ref } from "vue";
|
||||
const props = defineProps({
|
||||
item: {
|
||||
type: Object,
|
||||
default: {}
|
||||
}, dict: {
|
||||
tupe: Object,
|
||||
default: {}
|
||||
}
|
||||
});
|
||||
|
||||
const changeBG = (str) => {
|
||||
switch (str) {
|
||||
case "10":
|
||||
return "red";
|
||||
case "20":
|
||||
return "orange";
|
||||
case "30":
|
||||
return "yellow";
|
||||
default: return "blue";
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.warning-card {
|
||||
background: url("~@/assets/images/xxxxxx.png") no-repeat center center;
|
||||
background-size: 100% 100%;
|
||||
gap: 12px;
|
||||
margin-bottom: 4px;
|
||||
padding: 10px;
|
||||
box-sizing: border-box;
|
||||
|
||||
.warning-image {
|
||||
//
|
||||
// width: 80px;
|
||||
// height: 100px;
|
||||
|
||||
// img {
|
||||
// width: 100%;
|
||||
// height: 100%;
|
||||
// object-fit: cover;
|
||||
// }
|
||||
}
|
||||
|
||||
.warning-info {
|
||||
flex: 1;
|
||||
|
||||
.tag {
|
||||
padding: 1px 6px;
|
||||
background: #0072FF;
|
||||
border-radius: 2px 2px 2px 2px;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.gapline {
|
||||
width: 2px;
|
||||
height: 14px;
|
||||
background: #e9e9e9;
|
||||
}
|
||||
}
|
||||
.warning-boder{
|
||||
border-bottom: 2px dashed #0958b2;
|
||||
}
|
||||
}
|
||||
|
||||
.red {
|
||||
background: url("~@/assets/images/GroupRed.png") no-repeat center center;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
|
||||
.orange {
|
||||
background: url("~@/assets/images/GroupOrange.png") no-repeat center center;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
|
||||
.yellow {
|
||||
background: url("~@/assets/images/GroupYellow.png") no-repeat center center;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
|
||||
.blue {
|
||||
background: url("~@/assets/images/GroupBlue.png") no-repeat center center;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
</style>
|
||||
@ -5,16 +5,24 @@
|
||||
</div>
|
||||
<div class="warning-info">
|
||||
<div class="flex just-between align-center">
|
||||
<div class="flex align-center mt4">
|
||||
<span>{{ item.yjRyxm }}</span>
|
||||
<span class="gapline mr10 ml10"></span>
|
||||
<span>{{ IdCard(item.yjRysfzh,2) }}</span>
|
||||
<span class="gapline mr10 ml10"></span>
|
||||
<span>{{ IdCard(item.yjRysfzh,3) }}</span>
|
||||
</div>
|
||||
<div class="flex align-center mt4" v-if="item.yjLx == 2">
|
||||
<span >{{ item.yjClcph }}</span>
|
||||
</div>
|
||||
<div class="flex align-center mt4" v-else>
|
||||
<span>{{ item.yjRyxm }}</span>
|
||||
<span class="gapline mr10 ml10"></span>
|
||||
<span>{{ IdCard(item.yjRysfzh, 2) }}</span>
|
||||
<span class="gapline mr10 ml10"></span>
|
||||
<span>{{ IdCard(item.yjRysfzh, 3) }}</span>
|
||||
</div>
|
||||
|
||||
<span class="tag" v-if="item.yjbqmc">{{ item.yjbqmc }}</span>
|
||||
</div>
|
||||
<div class="mt4">身份证：{{ item.yjRysfzh }}</div>
|
||||
<div v-if="item.yjLx == 2" class="flex">车牌类型：
|
||||
<DictTag :tag="false" :value="item.yjHplx" 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 one_text_detail">预警地址：{{ item.yjDz }}</div>
|
||||
<div class="mt4 two_text_detail">预警内容：{{ item.yjNr }}</div>
|
||||
</div>
|
||||
@ -28,19 +36,22 @@ const props = defineProps({
|
||||
item: {
|
||||
type: Object,
|
||||
default: {}
|
||||
}, dict: {
|
||||
tupe: Object,
|
||||
default: {}
|
||||
}
|
||||
});
|
||||
|
||||
const changeBG = (str) => {
|
||||
switch(str){
|
||||
case "10":
|
||||
return "red";
|
||||
case "20":
|
||||
return "orange";
|
||||
case "30":
|
||||
return "yellow";
|
||||
default: return "blue";
|
||||
}
|
||||
switch (str) {
|
||||
case "10":
|
||||
return "red";
|
||||
case "20":
|
||||
return "orange";
|
||||
case "30":
|
||||
return "yellow";
|
||||
default: return "blue";
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
@ -52,31 +63,36 @@ const changeBG = (str) => {
|
||||
margin-bottom: 4px;
|
||||
padding: 10px;
|
||||
box-sizing: border-box;
|
||||
|
||||
.warning-image {
|
||||
width: 80px;
|
||||
height: 100px;
|
||||
img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
}
|
||||
|
||||
.warning-info {
|
||||
flex: 1;
|
||||
|
||||
.tag {
|
||||
padding: 1px 6px;
|
||||
background: #0072FF;
|
||||
border-radius: 2px 2px 2px 2px;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.warning-info {
|
||||
flex: 1;
|
||||
.tag{
|
||||
padding: 1px 6px;
|
||||
background: #0072FF;
|
||||
border-radius: 2px 2px 2px 2px;
|
||||
font-size: 12px;
|
||||
}
|
||||
.gapline{
|
||||
width: 2px;
|
||||
height: 14px;
|
||||
background: #e9e9e9;
|
||||
}
|
||||
.gapline {
|
||||
width: 2px;
|
||||
height: 14px;
|
||||
background: #e9e9e9;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.red {
|
||||
background: url("~@/assets/images/GroupRed.png") no-repeat center center;
|
||||
background-size: 100% 100%;
|
||||
@ -86,13 +102,14 @@ const changeBG = (str) => {
|
||||
background: url("~@/assets/images/GroupOrange.png") no-repeat center center;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
|
||||
.yellow {
|
||||
background: url("~@/assets/images/GroupYellow.png") no-repeat center center;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
|
||||
.blue {
|
||||
background: url("~@/assets/images/GroupBlue.png") no-repeat center center;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
@ -1,7 +1,8 @@
|
||||
<template>
|
||||
<div class="homeBox">
|
||||
<GdMap></GdMap>
|
||||
<!-- <GdMap></GdMap> -->
|
||||
<!-- 头部 -->
|
||||
|
||||
<Head></Head>
|
||||
<!-- 内容 -->
|
||||
<!-- 左边 -->
|
||||
@ -10,19 +11,44 @@
|
||||
<DbCount></DbCount>
|
||||
</div>
|
||||
<div class="asideL-Bottom">
|
||||
<div class="commom-aside"><QbsbCount></QbsbCount></div>
|
||||
<div class="commom-aside"><QblyType></QblyType></div>
|
||||
<div class="commom-aside"><QbfkCount></QbfkCount></div>
|
||||
<div class="commom-aside">
|
||||
<QbsbCount></QbsbCount>
|
||||
</div>
|
||||
<div class="commom-aside">
|
||||
<QblyType></QblyType>
|
||||
</div>
|
||||
<div class="commom-aside">
|
||||
<QbfkCount></QbfkCount>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 右边 -->
|
||||
<div class="home-aside asideR">
|
||||
<div class="commom-aside-big"><ZdryWarning></ZdryWarning></div>
|
||||
<div class="commom-aside-big"><Zdgk></Zdgk></div>
|
||||
<div class="commom-aside-small"><Fjqk></Fjqk></div>
|
||||
<div class="commom-aside-big">
|
||||
<SituationAssessment/>
|
||||
</div>
|
||||
<div class="commom-aside-big">
|
||||
<GroupWarning/>
|
||||
</div>
|
||||
<div class="commom-aside-small">
|
||||
<Experience/>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 中间 -->
|
||||
<div class="home-center"><Yszs></Yszs></div>
|
||||
<div class="home-center">
|
||||
<div class="middle-top">
|
||||
<Yszs />
|
||||
</div>
|
||||
<div class="flex middle-bottom mt10">
|
||||
<div class="mr10" style="width: 50%;">
|
||||
<DeployControl />
|
||||
</div>
|
||||
<div class="flex-1" style="flex: 1;">
|
||||
<ZdryWarning />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<!-- 底部 -->
|
||||
<div class="home-foot-t">
|
||||
<Bkcz></Bkcz>
|
||||
@ -43,14 +69,18 @@ import QbsbCount from './model/qbsbCount.vue'
|
||||
import QblyType from './model/qblyType.vue'
|
||||
import Bkcz from './model/bkcz.vue'
|
||||
import ZdryWarning from './model/zdryWarning.vue'
|
||||
import Zdgk from './model/zdgk.vue'
|
||||
import GroupWarning from './model/groupWarning.vue'
|
||||
import Fjqk from './model/fjqk.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'
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import "@/assets/css/homeScreen.scss";
|
||||
|
||||
.transition {
|
||||
transition: all 0.5s;
|
||||
}
|
||||
</style>
|
||||
</style>
|
||||
|
||||
149
src/views/home/model/deployControl.vue
Normal file
149
src/views/home/model/deployControl.vue
Normal file
@ -0,0 +1,149 @@
|
||||
<template>
|
||||
<div class="comom-title">
|
||||
<span class="title">布控预警</span>
|
||||
</div>
|
||||
<div class="comom-cnt zdryBox">
|
||||
<div style="height:33px;">
|
||||
<CheckBox :data="checkData" @changeData="changeData"></CheckBox>
|
||||
</div>
|
||||
<ul class="ryBox" v-loading="loading" v-infinite-scroll="loadList" style="overflow: auto">
|
||||
<li v-for="item in personList" :key="item.id" @click="chooseItem(item)">
|
||||
<DeployControlItem :item="item" :dict="{D_BZ_HPZL}"/>
|
||||
</li>
|
||||
<MOSTY.Empty :show="!loading && personList.length <= 0" :imgSize="100"></MOSTY.Empty>
|
||||
</ul>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import emitter from "@/utils/eventBus.js";
|
||||
import { qcckPost } from "@/api/qcckApi.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,getCurrentInstance} from 'vue';
|
||||
const { proxy } = getCurrentInstance();
|
||||
const {D_BZ_HPZL} =proxy.$dict('D_BZ_HPZL')
|
||||
const checkData = reactive({
|
||||
list: ["一级", "二级", "三级", "四级"],
|
||||
hasChoose: ["一级", "二级", "三级", "四级"]
|
||||
});
|
||||
const total = ref(0);
|
||||
const yjJb = ref('10,20,30,40');
|
||||
const pageNum = ref(1);
|
||||
const loading = ref(false); // 加载中
|
||||
const personList = ref([]);
|
||||
onMounted(()=>{
|
||||
getList()
|
||||
})
|
||||
// 复选框切换
|
||||
function changeData(val){
|
||||
pageNum.value = 1;
|
||||
personList.value = [];
|
||||
checkData.hasChoose = val;
|
||||
let ids = [];
|
||||
val.forEach(it => {
|
||||
if(it == '一级') ids.push(10);
|
||||
if(it == '二级') ids.push(20);
|
||||
if(it == '三级') ids.push(30);
|
||||
if(it == '四级') ids.push(40);
|
||||
});
|
||||
yjJb.value = ids.join(',')
|
||||
if(val.length == 0) personList.value = [];
|
||||
else getList();
|
||||
}
|
||||
|
||||
// 触底加载
|
||||
const loadList = () =>{
|
||||
if( personList.value.length == total.value) return;
|
||||
pageNum.value++;
|
||||
getList()
|
||||
}
|
||||
|
||||
const getList = () =>{
|
||||
let data = { pageSize:10, pageNum:pageNum.value,yjJb:yjJb.value ,bkyj:1};
|
||||
loading.value = true;
|
||||
qcckPost(data,'/mosty-gsxt/tbYjxx/getPageList').then(res=>{
|
||||
loading.value = false;
|
||||
let arr = res.records || [];
|
||||
personList.value = pageNum.value == 1 ? arr : personList.value.concat(arr);
|
||||
total.value = res.total;
|
||||
}).catch(()=>{
|
||||
loading.value = false;
|
||||
})
|
||||
}
|
||||
|
||||
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});
|
||||
}
|
||||
</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: calc(100% - 33px);
|
||||
overflow: hidden;
|
||||
overflow-y: auto;
|
||||
}
|
||||
}
|
||||
|
||||
::-webkit-scrollbar {
|
||||
background-color: #263b70;
|
||||
}
|
||||
::-webkit-scrollbar-thumb {
|
||||
background-color: #146bbe;
|
||||
}
|
||||
::-webkit-scrollbar-track {
|
||||
background-color: #263b70;
|
||||
}
|
||||
::-webkit-scrollbar-corner {
|
||||
background-color: #142141;
|
||||
}
|
||||
|
||||
::v-deep .el-checkbox__label{
|
||||
color:#fff;
|
||||
}
|
||||
::v-deep .el-checkbox__input.is-checked+.el-checkbox__label{
|
||||
color:#00FFFF;
|
||||
}
|
||||
::v-deep .el-checkbox__inner{
|
||||
background:rgba(0,144,255,0.2);
|
||||
border:1px solid #0072FF;
|
||||
}
|
||||
::v-deep .el-checkbox__input.is-checked .el-checkbox__inner{
|
||||
background-color: #00FFFF;
|
||||
border-color:#00FFFF;
|
||||
}
|
||||
::v-deep .el-checkbox__input.is-indeterminate .el-checkbox__inner{
|
||||
background-color: #00FFFF;
|
||||
border-color:#00FFFF;
|
||||
}
|
||||
::v-deep .el-checkbox__inner::after{
|
||||
border:2px solid #000;
|
||||
border-left:0;
|
||||
border-top:0;
|
||||
left:3px;
|
||||
top:0px;
|
||||
}
|
||||
::v-deep .el-checkbox__input.is-indeterminate .el-checkbox__inner::before{
|
||||
background: #000;
|
||||
}
|
||||
|
||||
</style>
|
||||
144
src/views/home/model/experience.vue
Normal file
144
src/views/home/model/experience.vue
Normal file
@ -0,0 +1,144 @@
|
||||
<template>
|
||||
<div class="comom-title">
|
||||
<span class="title">经验分享</span>
|
||||
</div>
|
||||
<div class="comom-cnt zdryBox">
|
||||
<ul class="ryBox" v-loading="loading" v-infinite-scroll="loadList" style="overflow: auto">
|
||||
<li v-for="item in personList" :key="item.id" >
|
||||
<Assessment :item="item" :dict="{D_GS_ZDQT_LB,D_BZ_TYJB}" :lx="3"/>
|
||||
</li>
|
||||
<MOSTY.Empty :show="!loading && personList.length <= 0" :imgSize="100"></MOSTY.Empty>
|
||||
</ul>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import emitter from "@/utils/eventBus.js";
|
||||
import { qcckPost } from "@/api/qcckApi.js";
|
||||
import Assessment from "@/views/home/components/assessmentItem.vue";
|
||||
import * as MOSTY from "@/components/MyComponents/index";
|
||||
import CheckBox from "@/components/checkBox/index.vue";
|
||||
import { ref ,reactive, onMounted,getCurrentInstance} from 'vue';
|
||||
const { proxy } = getCurrentInstance();
|
||||
const {D_GS_ZDQT_LB,D_BZ_TYJB} =proxy.$dict('D_GS_ZDQT_LB','D_BZ_TYJB')
|
||||
const checkData = reactive({
|
||||
list: ["人员", "车辆"],
|
||||
hasChoose: ["人员", "车辆"],
|
||||
});
|
||||
const total = ref(0);
|
||||
const yjJb = ref('10,20,30,40');
|
||||
const pageNum = ref(1);
|
||||
const loading = ref(false); // 加载中
|
||||
const personList = ref([]);
|
||||
onMounted(()=>{
|
||||
getList()
|
||||
})
|
||||
// 复选框切换
|
||||
function changeData(val){
|
||||
pageNum.value = 1;
|
||||
personList.value = [];
|
||||
checkData.hasChoose = val;
|
||||
let ids = [];
|
||||
val.forEach(it => {
|
||||
if(it == '人员') ids.push(1);
|
||||
if(it == '车辆') ids.push(2);
|
||||
});
|
||||
yjJb.value = ids.join(',')
|
||||
if(val.length == 0) personList.value = [];
|
||||
else getList();
|
||||
}
|
||||
|
||||
// 触底加载
|
||||
const loadList = () =>{
|
||||
if( personList.value.length == total.value) return;
|
||||
pageNum.value++;
|
||||
getList()
|
||||
}
|
||||
|
||||
const getList = () =>{
|
||||
let data = { pageSize:10, pageCurrent:pageNum.value };
|
||||
loading.value = true;
|
||||
qcckPost(data,'/mosty-gsxt/gsxt/jyfx/selectPage').then(res=>{
|
||||
loading.value = false;
|
||||
let arr = res.records || [];
|
||||
personList.value = pageNum.value == 1 ? arr : personList.value.concat(arr);
|
||||
total.value = res.total;
|
||||
}).catch(()=>{
|
||||
loading.value = false;
|
||||
})
|
||||
}
|
||||
|
||||
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});
|
||||
}
|
||||
</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;
|
||||
}
|
||||
|
||||
</style>
|
||||
144
src/views/home/model/groupWarning.vue
Normal file
144
src/views/home/model/groupWarning.vue
Normal file
@ -0,0 +1,144 @@
|
||||
<template>
|
||||
<div class="comom-title">
|
||||
<span class="title">群体预警</span>
|
||||
</div>
|
||||
<div class="comom-cnt zdryBox">
|
||||
<ul class="ryBox" v-loading="loading" v-infinite-scroll="loadList" style="overflow: auto">
|
||||
<li v-for="item in personList" :key="item.id" >
|
||||
<Assessment :item="item" :dict="{D_GS_ZDQT_LB,D_BZ_TYJB}" :lx="2"/>
|
||||
</li>
|
||||
<MOSTY.Empty :show="!loading && personList.length <= 0" :imgSize="100"></MOSTY.Empty>
|
||||
</ul>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import emitter from "@/utils/eventBus.js";
|
||||
import { qcckPost } from "@/api/qcckApi.js";
|
||||
import Assessment from "@/views/home/components/assessmentItem.vue";
|
||||
import * as MOSTY from "@/components/MyComponents/index";
|
||||
import CheckBox from "@/components/checkBox/index.vue";
|
||||
import { ref ,reactive, onMounted,getCurrentInstance} from 'vue';
|
||||
const { proxy } = getCurrentInstance();
|
||||
const {D_GS_ZDQT_LB,D_BZ_TYJB} =proxy.$dict('D_GS_ZDQT_LB','D_BZ_TYJB')
|
||||
const checkData = reactive({
|
||||
list: ["人员", "车辆"],
|
||||
hasChoose: ["人员", "车辆"],
|
||||
});
|
||||
const total = ref(0);
|
||||
const yjJb = ref('10,20,30,40');
|
||||
const pageNum = ref(1);
|
||||
const loading = ref(false); // 加载中
|
||||
const personList = ref([]);
|
||||
onMounted(()=>{
|
||||
getList()
|
||||
})
|
||||
// 复选框切换
|
||||
function changeData(val){
|
||||
pageNum.value = 1;
|
||||
personList.value = [];
|
||||
checkData.hasChoose = val;
|
||||
let ids = [];
|
||||
val.forEach(it => {
|
||||
if(it == '人员') ids.push(1);
|
||||
if(it == '车辆') ids.push(2);
|
||||
});
|
||||
yjJb.value = ids.join(',')
|
||||
if(val.length == 0) personList.value = [];
|
||||
else getList();
|
||||
}
|
||||
|
||||
// 触底加载
|
||||
const loadList = () =>{
|
||||
if( personList.value.length == total.value) return;
|
||||
pageNum.value++;
|
||||
getList()
|
||||
}
|
||||
|
||||
const getList = () =>{
|
||||
let data = { pageSize:10, pageCurrent:pageNum.value };
|
||||
loading.value = true;
|
||||
qcckPost(data,'/mosty-gsxt/qtYjxx/getPageList').then(res=>{
|
||||
loading.value = false;
|
||||
let arr = res.records || [];
|
||||
personList.value = pageNum.value == 1 ? arr : personList.value.concat(arr);
|
||||
total.value = res.total;
|
||||
}).catch(()=>{
|
||||
loading.value = false;
|
||||
})
|
||||
}
|
||||
|
||||
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});
|
||||
}
|
||||
</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;
|
||||
}
|
||||
|
||||
</style>
|
||||
144
src/views/home/model/situationAssessment.vue
Normal file
144
src/views/home/model/situationAssessment.vue
Normal file
@ -0,0 +1,144 @@
|
||||
<template>
|
||||
<div class="comom-title">
|
||||
<span class="title">态势研判预警</span>
|
||||
</div>
|
||||
<div class="comom-cnt zdryBox">
|
||||
<ul class="ryBox" v-loading="loading" v-infinite-scroll="loadList" style="overflow: auto">
|
||||
<li v-for="item in personList" :key="item.id" >
|
||||
<Assessment :item="item" :dict="{D_SG_TSYPGZ}" :lx="2"/>
|
||||
</li>
|
||||
<MOSTY.Empty :show="!loading && personList.length <= 0" :imgSize="100"></MOSTY.Empty>
|
||||
</ul>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import emitter from "@/utils/eventBus.js";
|
||||
import { qcckPost } from "@/api/qcckApi.js";
|
||||
import Assessment from "@/views/home/components/assessmentItem.vue";
|
||||
import * as MOSTY from "@/components/MyComponents/index";
|
||||
import CheckBox from "@/components/checkBox/index.vue";
|
||||
import { ref ,reactive, onMounted,getCurrentInstance} from 'vue';
|
||||
const { proxy } = getCurrentInstance();
|
||||
const {D_SG_TSYPGZ} =proxy.$dict('D_SG_TSYPGZ')
|
||||
const checkData = reactive({
|
||||
list: ["人员", "车辆"],
|
||||
hasChoose: ["人员", "车辆"],
|
||||
});
|
||||
const total = ref(0);
|
||||
const yjJb = ref('10,20,30,40');
|
||||
const pageNum = ref(1);
|
||||
const loading = ref(false); // 加载中
|
||||
const personList = ref([]);
|
||||
onMounted(()=>{
|
||||
getList()
|
||||
})
|
||||
// 复选框切换
|
||||
function changeData(val){
|
||||
pageNum.value = 1;
|
||||
personList.value = [];
|
||||
checkData.hasChoose = val;
|
||||
let ids = [];
|
||||
val.forEach(it => {
|
||||
if(it == '人员') ids.push(1);
|
||||
if(it == '车辆') ids.push(2);
|
||||
});
|
||||
yjJb.value = ids.join(',')
|
||||
if(val.length == 0) personList.value = [];
|
||||
else getList();
|
||||
}
|
||||
|
||||
// 触底加载
|
||||
const loadList = () =>{
|
||||
if( personList.value.length == total.value) return;
|
||||
pageNum.value++;
|
||||
getList()
|
||||
}
|
||||
|
||||
const getList = () =>{
|
||||
let data = { pageSize:10, pageCurrent:pageNum.value };
|
||||
loading.value = true;
|
||||
qcckPost(data,'/mosty-gsxt/tsyp/selectPage').then(res=>{
|
||||
loading.value = false;
|
||||
let arr = res.records || [];
|
||||
personList.value = pageNum.value == 1 ? arr : personList.value.concat(arr);
|
||||
total.value = res.total;
|
||||
}).catch(()=>{
|
||||
loading.value = false;
|
||||
})
|
||||
}
|
||||
|
||||
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});
|
||||
}
|
||||
</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;
|
||||
}
|
||||
|
||||
</style>
|
||||
@ -41,4 +41,4 @@ const getCount = () =>{
|
||||
height: 50px;
|
||||
background: url('~@/assets/images/line.png') no-repeat bottom center;
|
||||
}
|
||||
</style>
|
||||
</style>
|
||||
|
||||
@ -1,14 +1,14 @@
|
||||
<template>
|
||||
<div class="comom-title">
|
||||
<span class="title">重点人员动态预警</span>
|
||||
</div>
|
||||
<span class="title">常规预警</span>
|
||||
</div>
|
||||
<div class="comom-cnt zdryBox">
|
||||
<div style="height:33px;">
|
||||
<CheckBox :data="checkData" @changeData="changeData"></CheckBox>
|
||||
</div>
|
||||
<ul class="ryBox" v-loading="loading" v-infinite-scroll="loadList" style="overflow: auto">
|
||||
<li v-for="item in personList" :key="item.id" @click="chooseItem(item)">
|
||||
<YjItem :item="item"></YjItem>
|
||||
<YjItem :item="item" :dict="{D_BZ_HPZL}"></YjItem>
|
||||
</li>
|
||||
<MOSTY.Empty :show="!loading && personList.length <= 0" :imgSize="100"></MOSTY.Empty>
|
||||
</ul>
|
||||
@ -23,12 +23,13 @@ import * as MOSTY from "@/components/MyComponents/index";
|
||||
import CheckBox from "@/components/checkBox/index.vue";
|
||||
import { ref ,reactive, onMounted,getCurrentInstance} from 'vue';
|
||||
const { proxy } = getCurrentInstance();
|
||||
const {D_BZ_HPZL} =proxy.$dict('D_BZ_HPZL')
|
||||
const checkData = reactive({
|
||||
list: ["红", "橙", "黄", "蓝"],
|
||||
hasChoose: ["红","橙", "黄", "蓝"]
|
||||
list: ["人员", "车辆"],
|
||||
hasChoose: ["人员", "车辆"],
|
||||
});
|
||||
const total = ref(0);
|
||||
const yjJb = ref('10,20,30,40');
|
||||
const yjJb = ref('1,2');
|
||||
const pageNum = ref(1);
|
||||
const loading = ref(false); // 加载中
|
||||
const personList = ref([]);
|
||||
@ -42,10 +43,8 @@ function changeData(val){
|
||||
checkData.hasChoose = val;
|
||||
let ids = [];
|
||||
val.forEach(it => {
|
||||
if(it == '红') ids.push(10);
|
||||
if(it == '橙') ids.push(20);
|
||||
if(it == '黄') ids.push(30);
|
||||
if(it == '蓝') ids.push(40);
|
||||
if(it == '人员') ids.push(1);
|
||||
if(it == '车辆') ids.push(2);
|
||||
});
|
||||
yjJb.value = ids.join(',')
|
||||
if(val.length == 0) personList.value = [];
|
||||
@ -60,9 +59,9 @@ const loadList = () =>{
|
||||
}
|
||||
|
||||
const getList = () =>{
|
||||
let data = { pageSize:10, pageNum:pageNum.value,yjJb:yjJb.value };
|
||||
let data = { pageSize:10, pageNum:pageNum.value,yjLx:yjJb.value };
|
||||
loading.value = true;
|
||||
qcckPost(data,'/mosty-jmxf/tbYjxx/getPageList').then(res=>{
|
||||
qcckPost(data,'/mosty-gsxt/tbYjxx/getPageList').then(res=>{
|
||||
loading.value = false;
|
||||
let arr = res.records || [];
|
||||
personList.value = pageNum.value == 1 ? arr : personList.value.concat(arr);
|
||||
|
||||
Reference in New Issue
Block a user