You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
335 lines
9.2 KiB
335 lines
9.2 KiB
<!--
|
|
* @Descripttion:
|
|
* @version:
|
|
* @Author: JC9527
|
|
* @Date: 2023-08-15 09:44:13
|
|
* @LastEditors: JC9527
|
|
* @LastEditTime: 2024-01-06 17:14:03
|
|
-->
|
|
<template>
|
|
<div class="left-box">
|
|
<div class="item left-list-title" :style="itemTwo">
|
|
<title-box title="今日事件情况"></title-box>
|
|
<div class="item-main">
|
|
<div class="lists">
|
|
<div class="bgc"></div>
|
|
<div class="list-text"> · 上报事件总数</div>
|
|
<div class="list-bottom">
|
|
<img src="@/assets/images/incident.png" alt="">
|
|
<div class="list-num">{{ MYsummarystatdata.total || "0" }}</div>
|
|
</div>
|
|
</div>
|
|
<div class="lists">
|
|
<div class="bgc"></div>
|
|
<div class="list-text"> · 已受理事件</div>
|
|
<div class="list-bottom">
|
|
<img src="@/assets/images/incident.png" alt="">
|
|
<div class="list-num">{{ Fnsummarystat(MYsummarystatdata.records ? MYsummarystatdata.records.filter(item =>
|
|
item.status == 1) : []) }}</div>
|
|
</div>
|
|
</div>
|
|
<div class="lists">
|
|
<div class="bgc"></div>
|
|
<div class="list-text"> · 未受理事件</div>
|
|
<div class="list-bottom">
|
|
<img src="@/assets/images/incident.png" alt="">
|
|
<div class="list-num">{{ Fnsummarystat(MYsummarystatdata.records ? MYsummarystatdata.records.filter(item =>
|
|
item.status == 0) : []) }}</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="item left-list-title" :style="itemTwo">
|
|
<title-box title="今日任务情况"></title-box>
|
|
<div class="item-main">
|
|
<div class="lists">
|
|
<div class="bgc"></div>
|
|
<div class="list-text"> · 派发任务总数</div>
|
|
<div class="list-bottom">
|
|
<img src="@/assets/images/task.png" alt="">
|
|
<div class="list-num">{{ tasksummarystatdata.total || '0' }}</div>
|
|
</div>
|
|
</div>
|
|
<div class="lists">
|
|
<div class="bgc"></div>
|
|
<div class="list-text"> · 已处理任务数量</div>
|
|
<div class="list-bottom">
|
|
<img src="@/assets/images/task.png" alt="">
|
|
<div class="list-num">{{ tasksummarystatdata.solved || '0' }}</div>
|
|
</div>
|
|
</div>
|
|
<div class="lists">
|
|
<div class="bgc"></div>
|
|
<div class="list-text"> · 未处理任务数量</div>
|
|
<div class="list-bottom">
|
|
<img src="@/assets/images/task.png" alt="">
|
|
<div class="list-num">{{ tasksummarystatdata.inProgress || "0" }}</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="item lfet-list-one" id="parent-getHeight" :style="itemOne">
|
|
<title-box title="人员在线情况"></title-box>
|
|
<map-number title="在线人员总数" :onLine="personOnLine" :sum="perpsonNum" type="人" :numberArray="peopleArray"
|
|
:height="oneHeight" :id="1" v-on="$listeners"></map-number>
|
|
</div>
|
|
<div class="item lfet-list-two" :style="itemOne">
|
|
<title-box title="车辆在线情况"></title-box>
|
|
<map-number title="在线车辆总数" :onLine="10" :sum="18" type="辆" :numberArray="vehicleArray" :height="oneHeight"
|
|
:id="2"></map-number>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<script>
|
|
import titleBox from '../../components/title/index.vue'
|
|
import mapNumber from '../../components/mapLeftNumber/index.vue'
|
|
import { getQueryViewListPage, getTrend, summarystat, tasksummarystat } from '@/api/bigScreenApi/eventApi.js'
|
|
export default {
|
|
name: 'mapLeftContent',
|
|
components: { titleBox, mapNumber },
|
|
data() {
|
|
return {
|
|
perpsonNum: 0,
|
|
personOnLine: 0,
|
|
peopleArray: [
|
|
{
|
|
title: '李飞'
|
|
}, {
|
|
title: '李飞'
|
|
}, {
|
|
title: '李飞'
|
|
}, {
|
|
title: '李飞'
|
|
}, {
|
|
title: '李飞'
|
|
}, {
|
|
title: '李飞'
|
|
}, {
|
|
title: '李飞'
|
|
}, {
|
|
title: '李飞'
|
|
}, {
|
|
title: '李飞'
|
|
}, {
|
|
title: '李飞'
|
|
},
|
|
],
|
|
vehicleArray: [
|
|
{
|
|
userName: '苏A123456'
|
|
}, {
|
|
userName: '苏A123456'
|
|
}, {
|
|
userName: '苏A123456'
|
|
}, {
|
|
userName: '苏A123456'
|
|
}, {
|
|
userName: '苏A123456'
|
|
}, {
|
|
userName: '苏A123456'
|
|
}, {
|
|
userName: '苏A123456'
|
|
}, {
|
|
userName: '苏A123456'
|
|
}, {
|
|
userName: '苏A123456'
|
|
}, {
|
|
userName: '苏A123456'
|
|
},
|
|
],
|
|
itemOne: {
|
|
height: '',
|
|
},
|
|
itemTwo: {
|
|
height: '',
|
|
},
|
|
oneHeight: 0,
|
|
screenHeight: '',
|
|
$listeners: false,
|
|
eventList: {
|
|
viewCode: "event-all-list",
|
|
pageNo: "1",
|
|
pageSize: "10"
|
|
},
|
|
eventData: {
|
|
"queryValue": [
|
|
// {
|
|
// "colCode": "name",
|
|
// "queryValue": "111"
|
|
// },
|
|
],
|
|
"myInstanceClassify": "all"
|
|
},
|
|
MYsummarystatdata: {
|
|
records: []
|
|
},//事件统计概况数据
|
|
tasksummarystatdata: {} // 任务概况分类统计
|
|
}
|
|
},
|
|
props: ['personLine', 'carLine'],
|
|
watch: {
|
|
personLine: {
|
|
handler(newPerson) {
|
|
// console.log(newPerson,'在线人员情况');
|
|
this.peopleArray = newPerson
|
|
if (newPerson) {
|
|
this.perpsonNum = newPerson.length;
|
|
let line = 0;
|
|
newPerson.forEach(element => {
|
|
if (element.status == "1") {
|
|
line += 1
|
|
}
|
|
});
|
|
this.personOnLine = line
|
|
}
|
|
},
|
|
immediate: true,
|
|
},
|
|
carLine: {
|
|
handler(newPerson) {
|
|
// console.log(newPerson,'在线人员情况');
|
|
this.vehicleArray = newPerson
|
|
},
|
|
immediate: true,
|
|
}
|
|
},
|
|
methods: {
|
|
getDomHeight() {
|
|
this.$nextTick(() => {
|
|
let dom = document.getElementsByClassName('lfet-list-one');
|
|
let dom2 = document.getElementsByClassName('left-list-title');
|
|
let height2 = dom2[0].getBoundingClientRect();
|
|
let height = dom[0].getBoundingClientRect();
|
|
let windowHeight = window.innerHeight;
|
|
// let relativeHeight = (windowHeight - height.top) / 2 - 14;
|
|
let relativeHeight = (windowHeight - height.top) / 2 + 4;
|
|
let sum = relativeHeight * 2 - 2;
|
|
// let relativeHeight2 = (windowHeight - height2.top - sum) / 2 - 55;
|
|
let relativeHeight2 = (windowHeight - height2.top - sum) / 2 - 115;
|
|
this.itemOne.height = relativeHeight + 'px';
|
|
this.itemTwo.height = relativeHeight2 + 'px';
|
|
this.oneHeight = Number(relativeHeight);
|
|
})
|
|
},
|
|
getEvent() {
|
|
getQueryViewListPage(this.eventList, this.eventData).then(res => {
|
|
console.log(res, 'resres');
|
|
})
|
|
},
|
|
|
|
MYsummarystat() {
|
|
//获取事件统计概况
|
|
summarystat().then(res => {
|
|
if (res.code == 200) this.MYsummarystatdata = res.data
|
|
})
|
|
// 任务概况分类统计
|
|
tasksummarystat().then(res => {
|
|
if (res.code == 200) this.tasksummarystatdata = res.data
|
|
})
|
|
},
|
|
// 获取事件统计概况事件处理
|
|
Fnsummarystat(data) {
|
|
let mydata = data.length != 0 ? data[0].count : '0'
|
|
return mydata
|
|
}
|
|
},
|
|
mounted() {
|
|
window.addEventListener("resize", () => {
|
|
this.screenHeight = document.body.clientHeight;
|
|
this.getDomHeight();
|
|
});
|
|
this.getDomHeight();
|
|
// this.getEvent();
|
|
// getTrend({ type: 1 }).then(res => {
|
|
// console.log(res, '事件来源');
|
|
// })
|
|
|
|
|
|
},
|
|
created() {
|
|
this.MYsummarystat()
|
|
|
|
}
|
|
}
|
|
</script>
|
|
<style lang="scss" scoped>
|
|
.left-box {
|
|
display: grid;
|
|
grid-column: 1fr;
|
|
grid-row-gap: 24px;
|
|
height: 100%;
|
|
|
|
.item {
|
|
|
|
// background: rgba(222, 225, 230, 0.6);
|
|
.item-main {
|
|
margin-top: 5px;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
padding-left: 17px;
|
|
|
|
.lists {
|
|
// padding: 5px;
|
|
width: 141px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
// justify-content: space-between;
|
|
position: relative;
|
|
|
|
.bgc {
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
width: 141px;
|
|
background: linear-gradient(180deg, #0073FF 0%, rgba(0, 71, 129, 0) 100%);
|
|
opacity: 0.5;
|
|
}
|
|
|
|
.list-text {
|
|
font-size: 15px;
|
|
height: 38px;
|
|
font-family: 'Source Han Sans CN-Regular';
|
|
font-weight: 400;
|
|
color: #D3EEF2;
|
|
line-height: 22px;
|
|
background-image: url("../../../assets/images/masking.png");
|
|
background-size: 100% 100%;
|
|
padding: 16px 0 0 8px;
|
|
}
|
|
|
|
.list-bottom {
|
|
display: flex;
|
|
padding-left: 24px;
|
|
margin-top: 11px;
|
|
|
|
img {
|
|
width: 37px;
|
|
height: 40px;
|
|
margin-right: 14px;
|
|
}
|
|
|
|
.list-num {
|
|
font-size: 32px;
|
|
font-family: 'D-DIN';
|
|
font-weight: 400;
|
|
color: #D3EEF2;
|
|
line-height: 35px;
|
|
letter-spacing: 1px
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.lfet-list-one {
|
|
height: 100%;
|
|
}
|
|
|
|
.left-list-title {
|
|
height: 100%;
|
|
}
|
|
}
|
|
</style>
|