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