741 lines
18 KiB
Vue
741 lines
18 KiB
Vue
<template>
|
||
<div class="containerBox" style="padding-top: 13vw">
|
||
<TopNav navTitle="位置中心" />
|
||
<div class="main">
|
||
<!-- 位置统计 -->
|
||
<div class="contant">
|
||
<div class="header">
|
||
<span>
|
||
<van-icon name="friends" size="20px" color="#3e6ee8"></van-icon>
|
||
<span class="title">实时巡组</span>
|
||
</span>
|
||
</div>
|
||
<ItemList title="今日" :list="dayList" />
|
||
<ItemList title="近一周" :list="weekList" />
|
||
<ItemList title="近一月" :list="monthList" />
|
||
</div>
|
||
|
||
<!-- 实时巡组 -->
|
||
<div class="contant">
|
||
<div class="header">
|
||
<span>
|
||
<van-icon name="friends" size="20px" color="#3e6ee8"></van-icon>
|
||
<span class="title">实时巡组</span>
|
||
</span>
|
||
<div class="callAll" style="font-size: 10px">全部呼叫</div>
|
||
</div>
|
||
<div class="select_box">
|
||
<div>
|
||
<van-checkbox-group
|
||
v-model="checked"
|
||
direction="horizontal"
|
||
@change="onChangeXfzt"
|
||
>
|
||
<van-checkbox
|
||
icon-size="16"
|
||
shape="square"
|
||
:name="item.name"
|
||
v-for="(item, index) in checkList"
|
||
:key="index"
|
||
>
|
||
<span
|
||
class="dian"
|
||
:class="
|
||
item.name == 0 ? 'online' : item.name == 1 ? 'busy' : ''
|
||
"
|
||
></span>
|
||
{{ item.label }}({{ item.value }})
|
||
</van-checkbox>
|
||
</van-checkbox-group>
|
||
</div>
|
||
</div>
|
||
<div class="group item_box">
|
||
<ul class="groupList positionList" ref="xzScroll">
|
||
<li
|
||
v-for="item in xzList.list"
|
||
:key="item.id"
|
||
@click="handelClick(item)"
|
||
>
|
||
<div class="top">
|
||
<div class="top-cnt">
|
||
<span
|
||
class="dian online"
|
||
title="巡逻中"
|
||
v-if="item.xfzt == 0"
|
||
></span>
|
||
<span
|
||
class="dian busy"
|
||
title="处警中"
|
||
v-if="item.xfzt == 1"
|
||
></span>
|
||
<span class="dian" title="离线" v-if="item.xfzt == 2"></span>
|
||
<span class="name">{{ item.jzMc ? item.jzMc:item.fzrXm+'巡组' }}</span
|
||
><br />
|
||
<span class="other"
|
||
>负责人：{{ item.fzrXm }} ({{ item.fzrLxdh }})</span
|
||
>
|
||
</div>
|
||
<div class="imgBtn">
|
||
<van-icon name="phone-circle-o" color="#25b882" size="30" />
|
||
</div>
|
||
</div>
|
||
<div class="address">
|
||
<van-icon
|
||
name="location"
|
||
size="15px"
|
||
color="#3e6ee8"
|
||
></van-icon>
|
||
<span>{{ item.dqwz }}</span>
|
||
</div>
|
||
</li>
|
||
<van-loading
|
||
type="spinner"
|
||
v-if="xzLoading"
|
||
style="padding-top: 50vw; text-align: center"
|
||
/>
|
||
<van-empty
|
||
image="default"
|
||
description="无列表数据"
|
||
v-if="xzList.list.length <= 0 && !xzLoading"
|
||
/>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 人员实时位置 -->
|
||
<div class="contant">
|
||
<div class="header">
|
||
<span>
|
||
<van-icon name="manager" size="20px" color="#3e6ee8"></van-icon>
|
||
<span class="title">人员实时位置</span>
|
||
</span>
|
||
</div>
|
||
<div class="group item_box">
|
||
<Search
|
||
v-model="localVal"
|
||
placeholder="请输入相关信息"
|
||
@update:modelValue="SeachLocation"
|
||
></Search>
|
||
<ul class="groupList positionList" ref="ryScroll">
|
||
<li
|
||
v-for="item in wzList.list"
|
||
:key="item.id"
|
||
@click="handelClick(item)"
|
||
style="border-bottom:1px solid #eff0f5"
|
||
>
|
||
<div class="top">
|
||
<div class="top-cnt">
|
||
<span class="other">负责人：{{ item.yh_xm }}</span>
|
||
<div class="text">
|
||
{{ item.dwrq }}
|
||
{{ item.kssj ? item.kssj.slice(11, 16) : "00:00" }} —
|
||
{{ item.jssj ? item.jssj.slice(11, 16) : "00:00" }}
|
||
</div>
|
||
</div>
|
||
<div class="imgBtn">
|
||
<van-icon name="phone-circle-o" color="#25b882" size="30" />
|
||
</div>
|
||
</div>
|
||
<div class="address" v-if="item.dqwz">
|
||
<van-icon
|
||
name="location"
|
||
size="15px"
|
||
color="#3e6ee8"
|
||
></van-icon>
|
||
<span>{{ item.dqwz }}</span>
|
||
</div>
|
||
</li>
|
||
<van-loading
|
||
type="spinner"
|
||
v-if="renLoading"
|
||
style="padding-top: 4vw; text-align: center"
|
||
/>
|
||
<van-empty
|
||
image="default"
|
||
description="无列表数据"
|
||
v-if="wzList.list.length <= 0 && !renLoading"
|
||
/>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup>
|
||
import {
|
||
locationLCS,
|
||
locationXZWZS,
|
||
locationWZRS,
|
||
locationRYSSWZ,
|
||
getSelectDeckList,
|
||
} from "../../../api/yyzxApi.js";
|
||
import ItemList from "../../../components/component/itemList.vue";
|
||
import TopNav from "../../../components/topNav.vue";
|
||
import { timeValidate, getRecentDay } from "../../../utils/tools.js";
|
||
import { ref, reactive, onMounted, defineEmits } from "vue";
|
||
import Search from "../../../components/search.vue";
|
||
import { Toast } from "vant";
|
||
const xzLoading = ref(false);
|
||
const xzScroll = ref(null);
|
||
const renLoading = ref(false);
|
||
const ryScroll = ref(null);
|
||
//状态数据
|
||
const Searvalue = ref([]); // 巡组搜索关键字
|
||
const checked = ref([0, 1, 2]); //巡组复选框
|
||
const checkList = reactive([
|
||
{
|
||
name: 0,
|
||
label: "巡逻中",
|
||
value: 0,
|
||
},
|
||
{
|
||
name: 1,
|
||
value: 0,
|
||
label: "处警中",
|
||
},
|
||
{
|
||
name: 2,
|
||
value: 0,
|
||
label: "离线",
|
||
},
|
||
]);
|
||
const today = ref(timeValidate(new Date(), "ymd")); //今天
|
||
const week = ref(getRecentDay(-6, "ymd")); //近7天
|
||
const month = ref(getRecentDay(-29, "ymd"));
|
||
//今日统计数据
|
||
const dayList = ref([
|
||
{
|
||
name: "坐标总数",
|
||
count: 0,
|
||
},
|
||
{
|
||
name: "里程数",
|
||
count: 0,
|
||
isShowKm: true,
|
||
},
|
||
{
|
||
name: "巡组位置数",
|
||
count: 0,
|
||
},
|
||
]);
|
||
//周统计
|
||
const weekList = ref([
|
||
{
|
||
name: "坐标总数",
|
||
count: 0,
|
||
},
|
||
{
|
||
name: "里程数",
|
||
count: 0,
|
||
isShowKm: true,
|
||
},
|
||
{
|
||
name: "巡组位置数",
|
||
count: 0,
|
||
},
|
||
]);
|
||
//月统计
|
||
const monthList = ref([
|
||
{
|
||
name: "坐标总数",
|
||
count: 0,
|
||
},
|
||
{
|
||
name: "里程数",
|
||
count: 0,
|
||
isShowKm: true,
|
||
},
|
||
{
|
||
name: "巡组位置数",
|
||
count: 0,
|
||
},
|
||
]);
|
||
|
||
let pageCurrent = ref(1);
|
||
let xzTotal = ref(0);
|
||
let xzList = reactive({
|
||
list: [],
|
||
}); //巡组数据
|
||
|
||
let wzList = reactive({
|
||
list: [],
|
||
}); //人员实时位置
|
||
const wzTotal = ref(0);
|
||
const wzPageNum = ref(1);
|
||
const localVal = ref("");
|
||
onMounted(() => {
|
||
Toast.loading({
|
||
message: "加载...",
|
||
forbidClick: true,
|
||
loadingType: "spinner",
|
||
duration: 0,
|
||
});
|
||
// <!-- 位置统计 -->
|
||
// //里程数 今天 -近七天 -近30天 )
|
||
// getLcs(today.value, today.value, "day");
|
||
// getLcs(week.value, today.value, "week");
|
||
// getLcs(month.value, today.value, "month");
|
||
// // //位置人数（坐标总数） 今天 -近七天 -近30天
|
||
// getWzrs(today.value, today.value, "day");
|
||
// getWzrs(week.value, today.value, "week");
|
||
// getWzrs(month.value, today.value, "month");
|
||
// // //巡组位置巡数 今天 -近七天 -近30天
|
||
// getXzwzs(today.value, today.value, "day");
|
||
// getXzwzs(week.value, today.value, "week");
|
||
// getXzwzs(month.value, today.value, "month");
|
||
|
||
// // 实时巡组
|
||
// SelectDeckList(0);
|
||
// SelectDeckList(1);
|
||
// SelectDeckList(2);
|
||
// onChangeXfzt();
|
||
// // 人员实时位置
|
||
// getDataList();
|
||
// scroll("xz");
|
||
// scroll("ry");
|
||
Promise.all([
|
||
getLcs(today.value, today.value, "day"),
|
||
getLcs(week.value, today.value, "week"),
|
||
getLcs(month.value, today.value, "month"),
|
||
getWzrs(today.value, today.value, "day"),
|
||
getWzrs(week.value, today.value, "week"),
|
||
getWzrs(month.value, today.value, "month"),
|
||
getXzwzs(today.value, today.value, "day"),
|
||
getXzwzs(week.value, today.value, "week"),
|
||
getXzwzs(month.value, today.value, "month"),
|
||
SelectDeckList(0),
|
||
SelectDeckList(1),
|
||
SelectDeckList(2),
|
||
onChangeXfzt(),
|
||
getDataList(),
|
||
scroll("xz"),
|
||
scroll("ry"),
|
||
])
|
||
.then((res) => {
|
||
Toast.clear();
|
||
})
|
||
.catch((err) => {
|
||
Toast.clear();
|
||
});
|
||
});
|
||
|
||
// 里程数
|
||
function getLcs(start, end, type) {
|
||
let params = {
|
||
ksrq: start + " 00:00:00",
|
||
jsrq: end + " 23:59:59",
|
||
};
|
||
locationLCS("/mosty-wzzx/wztj/tj/jrlcs", params).then((res) => {
|
||
if (type == "day") {
|
||
dayList.value[1].count = (res[0].lcs / 1000).toFixed(0);
|
||
}
|
||
if (type == "week") {
|
||
weekList.value[1].count = (res[0].lcs / 1000).toFixed(0);
|
||
}
|
||
if (type == "month") {
|
||
monthList.value[1].count = (res[0].lcs / 1000).toFixed(0);
|
||
}
|
||
});
|
||
}
|
||
|
||
// 获取位置人数 / 坐标总数
|
||
function getWzrs(start, end, type) {
|
||
let params = {
|
||
ksrq: start + " 00:00:00",
|
||
jsrq: end + " 23:59:59",
|
||
};
|
||
locationWZRS(params).then((res) => {
|
||
if (type == "day") {
|
||
dayList.value[0].count = res[0].sl;
|
||
}
|
||
if (type == "week") {
|
||
weekList.value[0].count = res[0].sl;
|
||
}
|
||
if (type == "month") {
|
||
monthList.value[0].count = res[0].sl;
|
||
}
|
||
});
|
||
}
|
||
|
||
// 获取巡组位置巡数
|
||
function getXzwzs(start, end, type, status) {
|
||
let params = {
|
||
ksrq: start + " 00:00:00",
|
||
jsrq: end + " 23:59:59",
|
||
};
|
||
locationXZWZS("/mosty-wzzx/wztj/tj/jrxzwzs", params).then((res) => {
|
||
if (type == "day") {
|
||
dayList.value[2].count = res[0].wzs;
|
||
}
|
||
if (type == "week") {
|
||
weekList.value[2].count = res[0].wzs;
|
||
}
|
||
if (type == "month") {
|
||
monthList.value[2].count = res[0].wzs;
|
||
}
|
||
});
|
||
}
|
||
|
||
//选择巡防状态
|
||
function onChangeXfzt() {
|
||
let status = checked.value.join(",");
|
||
pageCurrent.value = 1;
|
||
xzList.list = [];
|
||
SelectDeckList(status);
|
||
}
|
||
|
||
//巡组列表
|
||
function SelectDeckList(xfzt) {
|
||
let data = {
|
||
xfzt,
|
||
pageSize: 10,
|
||
pageCurrent: pageCurrent.value,
|
||
};
|
||
xzLoading.value = true;
|
||
getSelectDeckList("/mosty-qwzx/tbQwXfbb/selectDeckList", data)
|
||
.then((res) => {
|
||
xzLoading.value = false;
|
||
if (res.records.length > 0) {
|
||
if (pageCurrent.value == 1) {
|
||
xzList.list = res.records;
|
||
} else {
|
||
xzList.list = xzList.list.concat(res.records);
|
||
}
|
||
}
|
||
xzTotal.value = res.total;
|
||
|
||
if (xfzt == 0) {
|
||
checkList[0].value = res.total;
|
||
}
|
||
if (xfzt == 1) {
|
||
checkList[0].value = res.total;
|
||
}
|
||
if (xfzt == 2) {
|
||
checkList[2].value = res.total;
|
||
}
|
||
})
|
||
.catch(() => {
|
||
xzLoading.value = false;
|
||
});
|
||
}
|
||
|
||
// 清除搜索
|
||
function clearDataSearch() {
|
||
wzPageNum.value = 1;
|
||
getDataList();
|
||
}
|
||
|
||
// 人员事实位置搜索
|
||
function SeachLocation() {
|
||
wzPageNum.value = 1;
|
||
getDataList();
|
||
}
|
||
// 人员实时获取数据列表
|
||
function getDataList() {
|
||
let params = {
|
||
yhxm: localVal.value,
|
||
pageCurrent: wzPageNum.value,
|
||
pageSize: 10,
|
||
};
|
||
renLoading.value = true;
|
||
locationRYSSWZ("/mosty-wzzx/wztj/wz/rywzlb", params)
|
||
.then((res) => {
|
||
renLoading.value = false;
|
||
if (wzPageNum.value == 1) {
|
||
wzList.list = res.records ? res.records : [];
|
||
} else {
|
||
let arr = res.records ? res.records : [];
|
||
wzList.list = wzList.list.concat(arr);
|
||
}
|
||
wzTotal.value = res.total;
|
||
})
|
||
.catch(() => {
|
||
renLoading.value = false;
|
||
});
|
||
}
|
||
|
||
//触底加载
|
||
function scroll(type) {
|
||
let scrollTargetBox = "";
|
||
if (type == "xz") {
|
||
scrollTargetBox = xzScroll.value;
|
||
} else {
|
||
scrollTargetBox = ryScroll.value;
|
||
}
|
||
scrollTargetBox.onscroll = (e) => {
|
||
var scrollHeight = scrollTargetBox.scrollHeight;
|
||
var scrollTop = scrollTargetBox.scrollTop;
|
||
var clientHeight = scrollTargetBox.clientHeight;
|
||
if (scrollHeight - clientHeight == scrollTop) {
|
||
//滚动条滚到最底部
|
||
if (type == "xz") {
|
||
if (xzList.list.length < xzTotal.value) {
|
||
pageCurrent++;
|
||
}
|
||
} else {
|
||
if (wzList.list.length < wzTotal.value) {
|
||
wzPageNum.value++;
|
||
getDataList();
|
||
}
|
||
}
|
||
}
|
||
};
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
@import "../../../assets/styles/mixin.scss";
|
||
.main {
|
||
// padding: 0 4vw;
|
||
box-sizing: border-box;
|
||
height: calc(100vh - 100px);
|
||
overflow: hidden;
|
||
overflow-y: auto;
|
||
.contant {
|
||
margin: 2vw 0;
|
||
.header {
|
||
height: 10vw;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
margin: 0 3.5vw;
|
||
// padding: 2vw 0;
|
||
.icon {
|
||
display: inline-block;
|
||
width: 6vw;
|
||
height: 6vw;
|
||
border: 1px solid #e5e5e5;
|
||
margin-right: 2vw;
|
||
}
|
||
.title {
|
||
font-size: 4vw;
|
||
font-weight: 600;
|
||
margin-left: 1vw;
|
||
@include font_color($font-color-theme);
|
||
}
|
||
}
|
||
.select_box {
|
||
padding-top: 8px;
|
||
overflow: hidden;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
padding: 3.5vw;
|
||
@include font_size($font_medium_s);
|
||
}
|
||
// 位置统计
|
||
.position {
|
||
min-height: 40vh;
|
||
.position-item {
|
||
height: 24vw;
|
||
margin-bottom: 2vw;
|
||
display: flex;
|
||
border-radius: 2vw;
|
||
overflow: hidden;
|
||
box-shadow: 0 0 4px 4px #e5e5e5;
|
||
.item-left {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
width: 10vw;
|
||
height: 24vw;
|
||
background: #1e4eca;
|
||
font-size: 4vw;
|
||
color: #fff;
|
||
padding: 0 2vw;
|
||
box-sizing: border-box;
|
||
text-align: center;
|
||
}
|
||
.item-right {
|
||
flex: 1;
|
||
display: flex;
|
||
justify-content: space-around;
|
||
align-items: center;
|
||
.item {
|
||
text-align: center;
|
||
.title {
|
||
text-align: center;
|
||
font-size: 4vw;
|
||
}
|
||
.numb {
|
||
font-size: 6vw;
|
||
font-weight: bold;
|
||
line-height: 9vw;
|
||
}
|
||
.num2 {
|
||
color: #e36356;
|
||
}
|
||
.num3 {
|
||
color: #205bf3;
|
||
}
|
||
.proportion {
|
||
text-align: center;
|
||
width: 100%;
|
||
font-size: 3vw;
|
||
img {
|
||
margin: 0 2px 0 4px;
|
||
}
|
||
.up-color {
|
||
color: #2bf242;
|
||
}
|
||
.down-color {
|
||
color: #e64a4a;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
// 实时巡组
|
||
.callAll {
|
||
padding: 2px 5px;
|
||
background: linear-gradient(#00befb, #0b66d8);
|
||
border-radius: 1vw;
|
||
color: #fff;
|
||
margin-right: 1vw;
|
||
}
|
||
.group {
|
||
// box-shadow: 0 0 10px #ccc;
|
||
// padding: 4vw 2vw;
|
||
box-sizing: border-box;
|
||
margin: 0 3.5vw;
|
||
.search {
|
||
display: flex;
|
||
height: 8vw;
|
||
// ::v-deep .van-search__content {
|
||
// height: 8vw;
|
||
// }
|
||
.setchBtn {
|
||
margin-left: 1vw;
|
||
background: #2c5ff1;
|
||
padding: 1vw 4vw;
|
||
border-radius: 2vw;
|
||
color: #fff;
|
||
line-height: 6.5vw;
|
||
@include font_size($font_medium_s);
|
||
}
|
||
}
|
||
ul.groupList {
|
||
min-height: 10vh;
|
||
margin-top: 2vw;
|
||
overflow: hidden;
|
||
li {
|
||
padding-bottom: 2vw;
|
||
border-radius: 2vw;
|
||
margin-top: 2vw;
|
||
position: relative;
|
||
// background: #f7f7f7;
|
||
&:first-child {
|
||
margin-top: 0px;
|
||
}
|
||
.top {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
padding: 0 3vw;
|
||
padding-top: 3vw;
|
||
line-height: 7vw;
|
||
padding-bottom: 1vw;
|
||
.top-cnt {
|
||
width: 80%;
|
||
@include font_size($font_medium_s);
|
||
}
|
||
.dian {
|
||
width: 2vw;
|
||
height: 2vw;
|
||
border-radius: 50%;
|
||
background: #999;
|
||
display: inline-block;
|
||
vertical-align: middle;
|
||
margin-right: 2vw;
|
||
&.online {
|
||
background: #1fd038;
|
||
}
|
||
&.busy {
|
||
background: #ed0000;
|
||
}
|
||
}
|
||
.name {
|
||
font-size: 4vw;
|
||
color: #5471f3;
|
||
vertical-align: middle;
|
||
}
|
||
.other {
|
||
font-size: 3vw;
|
||
}
|
||
|
||
.imgBtn {
|
||
padding-top: 10px;
|
||
margin-left: 2px;
|
||
img {
|
||
margin-right: 2vw;
|
||
width: 6vw;
|
||
height: 6vw;
|
||
border: 1px solid #e5e5e5;
|
||
&:last-child {
|
||
margin-right: 0;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
li.active {
|
||
border: 1px solid #108fe7;
|
||
.checkBox {
|
||
display: block;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
ul.positionList {
|
||
max-height: 60vh;
|
||
overflow: hidden;
|
||
overflow-y: auto;
|
||
}
|
||
// 地址
|
||
.address {
|
||
margin: 0 2vw;
|
||
@include bottm_tab_top_color($bottom-border-top-clore-theme);
|
||
height: 6vw;
|
||
line-height: 6vw;
|
||
font-size: 3vw;
|
||
padding: 2vw 0;
|
||
img,
|
||
span {
|
||
vertical-align: middle;
|
||
}
|
||
img {
|
||
margin-right: 2vw;
|
||
width: 4vw;
|
||
height: 4vw;
|
||
border: 1px solid #e5e5e5;
|
||
}
|
||
}
|
||
}
|
||
::v-deep .van-checkbox__label {
|
||
@include font_color($font-color-theme);
|
||
font-size: 3vw;
|
||
.dian {
|
||
width: 2vw;
|
||
height: 2vw;
|
||
border-radius: 50%;
|
||
background: #999;
|
||
display: inline-block;
|
||
vertical-align: middle;
|
||
margin-right: 1vw;
|
||
&.online {
|
||
background: #1fd038;
|
||
}
|
||
|
||
&.busy {
|
||
background: #ed0000;
|
||
}
|
||
|
||
&.blue {
|
||
background: #229bf0;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</style>
|