Skip to content

D
digital-construction
Commit 3543c6ac authored by 张牧越's avatar 张牧越
Browse files
Options

升降机、卸料平台联调

parent e03c577e
Hide whitespace changes
Inline Side-by-side
Showing with 995 additions and 165 deletions
dist.zip 0 → 100644
View file @ 3543c6ac
File added
src/api/index.js
View file @ 3543c6ac
......@@ -348,6 +348,73 @@ export function getDeviceCurrentStatus(params) {
}
// unloadingplatform
export function getUnloadingPlatformList() {
return request({
url: '/pweb/s/unload/device/list',
method: 'get',
})
}
export function getPlatformCurrentStatus(params) {
return request({
url: '/pweb/s/unload/device/realdata',
method: 'get',
params
})
}
export function getPlatformRunningAnalysis(params) {
return request({
url: '/pweb/s/unload/device/statistics',
method: 'get',
params
})
}
export function getPlatformWarningStatus() {
return request({
url: '/pweb/s/unload/warning/statistics',
method: 'get'
})
}
export function getPlatformWarningList(params) {
return request({
url: '/pweb/s/unload/warning',
method: 'get',
params
})
}
//elevator
export function getElevatorList() {
return request({
url: '/pweb/s/elevator/device/list',
method: 'get'
})
}
export function getElevatorWarningList(params) {
return request({
url: '/pweb/s/elevator/warning',
method: 'get',
params
})
}
export function getElevatorWarningStatus() {
return request({
url: '/pweb/s/elevator/warning/statistics',
method: 'get',
})
}
export function getElevatorRealData(params) {
return request({
url: '/pweb/s/elevator/device/realdata',
method: 'get',
params
})
}
src/components/elevator/Index.vue
View file @ 3543c6ac
......@@ -2,20 +2,61 @@
<div id="elevator">
<div class="side-area">
<Title text="设备列表"></Title>
<ShadowContainer></ShadowContainer>
<ShadowContainer>
<div id="elevator-description">
<div
:class="['elevator', activeElevatorIndex == index ? 'active' : '']"
v-for="(elevator, index) in elevatorList"
:key="index"
@click="selectElevator(elevator, index)"
>
<div class="elevator-title" @click="showElevatorStatus(elevator)">
<img src="@/assets/elevator/icon_elevator.png" alt="" />
{{ elevator.name }}
<span class="status">
<span
v-if="elevator.left_elevator"
:style="{
color:
elevator.left_elevator.is_online == 1 ? '#26D591' : '',
}"
>
(左){{ elevator.left_elevator.is_online_text }}
</span>
<span v-if="elevator.left_elevator && elevator.right_elevator">
/
</span>
<span
v-if="elevator.right_elevator"
:style="{
color:
elevator.right_elevator.is_online == 1 ? '#26D591' : '',
}"
>
(右){{ elevator.right_elevator.is_online_text }}
</span>
</span>
</div>
</div>
</div>
</ShadowContainer>
<Title text="报警信息"></Title>
<ShadowContainer>
<div id="warning-info">
<div>
<div class="warning-info-text">今日报警</div>
<div class="warning-info-num">0</div>
<div class="warning-info-num">
{{ elevatorWarningStatus.today_num }}
</div>
<div class="warning-info-img">
<img src="@/assets/fallprotection/today.png" alt="" />
</div>
</div>
<div>
<div class="warning-info-text">累计未处理报警</div>
<div class="warning-info-num" style="color: #ffc74c">0</div>
<div class="warning-info-num" style="color: #ffc74c">
{{ elevatorWarningStatus.un_handle_num }}
</div>
<div class="warning-info-img">
<img src="@/assets/fallprotection/total-no.png" alt="" />
</div>
......@@ -23,22 +64,38 @@
<div>
<div class="warning-info-text">累计履责率</div>
<div class="warning-info-num" style="color: #22c3ed">
0<span style="font-size: 14px; margin-left: 12px">%</span>
{{ elevatorWarningStatus.handle_rate
}}<span style="font-size: 14px; margin-left: 12px">%</span>
</div>
<div class="warning-info-img">
<img src="@/assets/fallprotection/percent.png" alt="" />
</div>
</div>
</div>
<div class="platform-list">
<div class="platform">
<div class="platform-title">
<img src="@/assets/management/sample.png" alt="" />
PT20220824340320
<span class="status">未处理</span>
</div>
<div class="platform-info">
<div>报警内容：</div>
<div class="warning-table">
<div class="warning-table-header">
<div class="warning-table-time">报警时间</div>
<div class="warning-table-device">设备</div>
<div class="warning-table-message">报警信息</div>
<div class="warning-table-status">处理状态</div>
</div>
<div class="warning-table-list" v-infinite-scroll="load">
<div
class="warning-table-column"
v-for="(column, index) in elevatorWarningList"
:key="index"
>
<div class="warning-table-time">{{ column.log_time }}</div>
<div class="warning-table-device"></div>
<div class="warning-table-message">
{{ column.alarm_content }}
</div>
<div
class="warning-table-status"
:style="{ color: column.status == 1 ? '#FFC74C' : '' }"
>
{{ column.status_text }}
</div>
</div>
</div>
</div>
......@@ -46,16 +103,286 @@
</div>
<div class="elevator-container">
<ShadowContainer>
<div style="height: 980px"></div>
<div style="height: 980px" id="elevator-detail">
<div class="left-detail">
<template
v-if="
leftElevator &&
leftElevator.current_person &&
leftElevator.realtime_data &&
leftElevator.device_info
"
>
<div class="tower-title">左侧运行情况</div>
<div class="driver-info">
<div class="driver-icon">
<img :src="leftElevator.current_person.head_img" alt="" />
</div>
<div class="driver-description">
<div class="t-des">
姓名：{{ leftElevator.current_person.name }}
</div>
<div class="t-des">
身份证号：{{ leftElevator.current_person.id_card }}
</div>
<div class="t-des">
上机时间：{{ leftElevator.current_person.start_time }}
</div>
</div>
</div>
<div class="current-status">
<div class="t-des">
高度：{{ leftElevator.realtime_data.height }}m
</div>
<div class="t-des">
载重：{{ leftElevator.realtime_data.weight }}t
</div>
<div class="t-des">
运行速度：{{ leftElevator.realtime_data.speed }}m/s
</div>
<div class="t-des">
倾角X轴：{{ leftElevator.realtime_data.tilt_x }}°
</div>
<div class="t-des">
倾角Y轴：{{ leftElevator.realtime_data.tilt_y }}°
</div>
<div class="t-des">
前面：{{
leftElevator.realtime_data.switch_front_status_text
}}
</div>
<div class="t-des">
后面：{{ leftElevator.realtime_data.switch_back_status_text }}
</div>
<div class="t-des">
更新时间：{{ leftElevator.realtime_data.latest_record_time }}
</div>
</div>
<div class="tower-title">设备信息</div>
<div class="device-info">
<div class="t-des">
设备名称：{{ leftElevator.device_info.device_name }}
</div>
<div class="t-des">
设备编号：{{ leftElevator.device_info.device_no }}
</div>
<div class="t-des">
设备型号：{{ leftElevator.device_info.model }}
</div>
<div class="t-des">
生产厂家：{{ leftElevator.device_info.produce_name }}
</div>
</div>
</template>
</div>
<div class="elevator-tower">
<div id="tower-main">
<div
v-if="leftElevator && leftElevator.realtime_data"
class="left-elevator"
:style="{
bottom: `${
(leftElevator.realtime_data.height /
currentElevatorTower.height) *
100
}%`,
}"
>
<div class="online-status" v-if="leftElevator.device_info">
{{ leftElevator.device_info.is_online_text }}
</div>
<div>
<img
class="elevator"
src="@/assets/elevator/ele-left.png"
alt=""
/>
</div>
</div>
<img class="tower" src="@/assets/elevator/tower.png" alt="" />
<div
v-if="rightElevator && rightElevator.realtime_data"
class="right-elevator"
:style="{
bottom: `${
(rightElevator.realtime_data.height /
currentElevatorTower.height) *
100
}%`,
}"
>
<div>
<div class="online-status" v-if="rightElevator.device_info">
{{ rightElevator.device_info.is_online_text }}
</div>
<img
class="elevator"
src="@/assets/elevator/ele-right.png"
alt=""
/>
</div>
</div>
</div>
<div>
<img class="bottom" src="@/assets/elevator/bottom.png" alt="" />
</div>
</div>
<div class="right-detail">
<template
v-if="
rightElevator &&
rightElevator.current_person &&
rightElevator.realtime_data &&
rightElevator.device_info
"
>
<div class="tower-title">右侧运行情况</div>
<div class="driver-info">
<div class="driver-icon">
<img :src="rightElevator.current_person.head_img" alt="" />
</div>
<div class="driver-description">
<div class="t-des">
姓名：{{ rightElevator.current_person.name }}
</div>
<div class="t-des">
身份证号：{{ rightElevator.current_person.id_card }}
</div>
<div class="t-des">
上机时间：{{ rightElevator.current_person.start_time }}
</div>
</div>
</div>
<div class="current-status">
<div class="t-des">
高度：{{ rightElevator.realtime_data.height }}m
</div>
<div class="t-des">
载重：{{ rightElevator.realtime_data.weight }}t
</div>
<div class="t-des">
运行速度：{{ rightElevator.realtime_data.speed }}m/s
</div>
<div class="t-des">
倾角X轴：{{ rightElevator.realtime_data.tilt_x }}°
</div>
<div class="t-des">
倾角Y轴：{{ rightElevator.realtime_data.tilt_y }}°
</div>
<div class="t-des">
前面：{{
rightElevator.realtime_data.switch_front_status_text
}}
</div>
<div class="t-des">
后面：{{
rightElevator.realtime_data.switch_back_status_text
}}
</div>
<div class="t-des">
更新时间：{{ rightElevator.realtime_data.latest_record_time }}
</div>
</div>
<div class="tower-title">设备信息</div>
<div class="device-info">
<div class="t-des">
设备名称：{{ rightElevator.device_info.device_name }}
</div>
<div class="t-des">
设备编号：{{ rightElevator.device_info.device_no }}
</div>
<div class="t-des">
设备型号：{{ rightElevator.device_info.model }}
</div>
<div class="t-des">
生产厂家：{{ rightElevator.device_info.produce_name }}
</div>
</div>
</template>
</div>
</div>
</ShadowContainer>
</div>
</div>
</template>
<script>
import {
getElevatorList,
getElevatorWarningList,
getElevatorWarningStatus,
getElevatorRealData,
} from "@/api/index";
export default {
name: "Elevator",
data() {
return {};
return {
elevatorList: [],
page: 1,
elevatorWarningList: [],
elevatorWarningStatus: {
today_num: 0,
un_handle_num: 0,
handle_rate: 0,
},
activeElevatorIndex: 0,
leftElevator: {},
rightElevator: {},
currentElevatorTower: {},
};
},
methods: {
load() {
if (this.elevatorWarningList.length == this.page * 20) {
getElevatorWarningList({
page: this.page + 1,
limit: 20,
}).then((res) => {
this.page += 1;
this.getElevatorWarningList += res.data.data;
});
}
},
getCurrentElevatorStatus(tower) {
const elevatorArray = [];
if (tower.left_elevator) {
elevatorArray.push(tower.left_elevator.id);
}
if (tower.right_elevator) {
elevatorArray.push(tower.right_elevator.id);
}
getElevatorRealData({ device_ids: elevatorArray.join(",") }).then(
(res) => {
console.log(res);
this.leftElevator = res.data.filter((item) => {
return item.device_id == tower.left_elevator.id;
})[0];
this.rightElevator = res.data.filter((item) => {
return item.device_id == tower.right_elevator.id;
})[0];
console.log(this.leftElevator, "left");
console.log(this.rightElevator, "right");
}
);
},
selectElevator(elevator, index) {
this.activeElevatorIndex = index;
this.getCurrentElevatorStatus(elevator);
},
},
mounted() {
getElevatorList().then((res) => {
this.elevatorList = res.data;
this.currentElevatorTower = res.data[0];
this.getCurrentElevatorStatus(this.currentElevatorTower);
});
getElevatorWarningList({ page: 1, limit: 20 }).then((res) => {
this.elevatorWarningList = res.data.data;
});
getElevatorWarningStatus().then((res) => {
this.elevatorWarningStatus = res.data;
});
},
};
</script>
......@@ -68,6 +395,52 @@ export default {
.side-area {
width: 25%;
}
#elevator-description {
height: 340px;
overflow-y: scroll;
.elevator {
background: rgba(44, 96, 162, 0.2);
&.active {
background: rgba(44, 96, 162, 0.5);
}
&:hover {
background: rgba(44, 96, 162, 0.5);
}
}
.elevator-title {
line-height: 22px;
img {
width: 22px;
vertical-align: top;
}
font-size: 14px;
color: #c6def9;
padding: 10px 12px;
cursor: pointer;
.status {
float: right;
}
}
.elevator-info {
line-height: 22px;
img {
width: 22px;
vertical-align: top;
}
background: rgba(44, 96, 162, 0.1);
font-size: 14px;
color: #c6def9;
padding: 10px 12px;
border-top: 1px solid rgba(122, 143, 173, 0.2);
cursor: pointer;
span {
float: right;
}
}
}
.elevator-container {
width: calc(75% - 20px);
}
......@@ -130,4 +503,156 @@ export default {
}
}
}
.overflowed {
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
.warning-table {
font-size: 14px;
text-align: center;
color: #c6def9;
.warning-table-list {
height: 280px;
overflow-y: auto;
}
.warning-table-header {
background: rgba(44, 96, 162, 0.2);
display: flex;
padding: 12px 0;
}
.warning-table-column {
padding: 12px 0;
background: rgba(44, 96, 162, 0.05);
display: flex;
&:nth-child(2n) {
background: rgba(44, 96, 162, 0.1);
}
}
.warning-table-time {
width: 40%;
}
.warning-table-device,
.warning-table-message,
.warning-table-status {
width: 20%;
}
}
#elevator-detail {
display: flex;
justify-content: space-between;
.left-detail,
.right-detail {
width: 30%;
}
.elevator-tower {
width: 40%;
}
.elevator-tower {
text-align: center;
#tower-main {
display: inline-block;
position: relative;
.left-elevator {
position: absolute;
left: 0;
transform: translateX(-100%);
bottom: 0%;
.online-status {
font-size: 18px;
color: #c6def9;
text-align: right;
padding-right: 24px;
}
}
.right-elevator {
position: absolute;
right: 0;
transform: translateX(100%);
bottom: 0%;
.online-status {
font-size: 18px;
color: #c6def9;
text-align: left;
padding-left: 24px;
}
}
.elevator {
width: 124px;
}
}
img {
vertical-align: top;
}
.bottom {
height: 10px;
}
.tower {
height: 970px;
}
}
.driver-info {
display: flex;
justify-content: space-between;
.driver-icon {
width: 100px;
border: 1px solid #0f6996;
img {
width: 100%;
height: 100%;
vertical-align: top;
}
}
.driver-description {
width: calc(100% - 110px);
}
}
.tower-title {
text-align: center;
margin-bottom: 16px;
background: linear-gradient(
90deg,
rgba(39, 172, 251, 0.4) 0%,
rgba(39, 172, 251, 0.15) 50%,
rgba(39, 172, 251, 0.4) 100%
);
border-top: 1px solid
linear-gradient(
90deg,
rgba(34, 195, 237, 0.79) 1%,
rgba(34, 195, 237, 0.81) 100%
);
border-bottom: 1px solid
linear-gradient(
90deg,
rgba(34, 195, 237, 0.79) 1%,
rgba(34, 195, 237, 0.81) 100%
);
font-size: 18px;
color: #ffffff;
line-height: 40px;
}
.t-des {
background: linear-gradient(
90deg,
rgba(39, 172, 251, 0.1) 0%,
rgba(39, 172, 251, 0) 50%,
rgba(39, 172, 251, 0.1) 100%
);
line-height: 40px;
color: #c6def9;
font-size: 14px;
padding: 0 30px;
margin-bottom: 2px;
&:last-child {
margin-bottom: 0;
}
}
.current-status {
margin: 10px 0 20px 0;
}
}
</style>
\ No newline at end of file
src/components/fallprotection/Index.vue
View file @ 3543c6ac
......@@ -208,7 +208,7 @@ export default {
resizeEnable: true,
mapStyle: "amap://styles/darkblue",
});
this.map.on("click", (e) => {
this.map.on("click", () => {
this.buildingWindowVisible = false;
});
this.getBuildingList();
......
src/components/noise/Index.vue
View file @ 3543c6ac
......@@ -124,10 +124,9 @@
<div class="warning-table">
<div class="warning-table-header">
<div class="warning-table-time">报警时间</div>
<div class="warning-table-pm25">PM2.5</div>
<div class="warning-table-pm10">PM10</div>
<div class="warning-table-noise">噪音</div>
<div class="warning-table-wind">风速</div>
<div class="warning-table-device">设备</div>
<div class="warning-table-message">报警信息</div>
<div class="warning-table-status">处理状态</div>
</div>
<div class="warning-table-list" v-infinite-scroll="load">
<div
......@@ -136,10 +135,16 @@
:key="index"
>
<div class="warning-table-time">{{ column.log_time }}</div>
<div class="warning-table-pm25"></div>
<div class="warning-table-pm10"></div>
<div class="warning-table-noise"></div>
<div class="warning-table-wind"></div>
<div class="warning-table-device"></div>
<div class="warning-table-message">
{{ column.alarm_content }}
</div>
<div
class="warning-table-status"
:style="{ color: column.status == 1 ? '#FFC74C' : '' }"
>
{{ column.status_text }}
</div>
</div>
</div>
</div>
......@@ -576,7 +581,7 @@ export default {
}
#aqi-chart {
width: 100%;
height: 214px;
height: 154px;
}
.monitor {
display: flex;
......@@ -775,11 +780,10 @@ export default {
.warning-table-time {
width: 40%;
}
.warning-table-pm25,
.warning-table-pm10,
.warning-table-noise,
.warning-table-wind {
width: 15%;
.warning-table-device,
.warning-table-message,
.warning-table-status {
width: 20%;
}
}
#stats-container {
......
src/components/tower/Index.vue
View file @ 3543c6ac
......@@ -12,7 +12,7 @@
<ShadowContainer>
<div id="force-chart" ref="forceChart"></div>
</ShadowContainer>
<Title text="各塔吊24h倾角统计"></Title>
<Title text="各塔吊24h载重统计"></Title>
<ShadowContainer>
<div id="dip-chart" ref="dipChart"></div>
</ShadowContainer>
......@@ -45,7 +45,7 @@
/>
</span>
</div>
<div class="recent-open">最近使用:{{ windowData.log_time }}</div>
<!-- <div class="recent-open">最近使用:{{ windowData.log_time }}</div> -->
</div>
<div class="swagger-container" id="container">
<img class="lt" src="@/assets/lt.png" alt="" />
......@@ -56,35 +56,6 @@
</div>
</div>
<div class="side-area">
<Title text="报警信息"></Title>
<ShadowContainer>
<div class="warn-message">
<div class="warn-icon" v-if="warnings.length == 0">
<img src="@/assets/no-message.png" alt="" />
<div>暂无信息~</div>
</div>
<div class="warp" v-else v-infinite-scroll="load">
<div
class="warn-title"
v-for="(warn, index) in warnings"
:key="index"
>
<div class="warn-text">
<el-tooltip
class="item"
effect="dark"
:content="`${warn.alarm_content}(${warn.device_no})`"
>
<div class="overflowed">
{{ warn.alarm_content }}({{ warn.device_no }})
</div>
</el-tooltip>
</div>
<div class="warn-time">{{ warn.log_time }}</div>
</div>
</div>
</div>
</ShadowContainer>
<Title text="设备列表"></Title>
<ShadowContainer>
<div class="monitor-list">
......@@ -112,6 +83,50 @@
</div>
</div>
</ShadowContainer>
<Title text="报警信息"></Title>
<ShadowContainer>
<div class="warning-table">
<div class="warning-table-header">
<div class="warning-table-run-time">运行时间</div>
<div class="warning-table-device">设备</div>
<div class="warning-table-info">报警信息</div>
<div class="warning-table-status">处理状态</div>
</div>
<div class="warning-table-list" v-infinite-scroll="load">
<div
class="warning-table-column"
v-for="(column, index) in warnings"
:key="index"
>
<div class="warning-table-run-time">{{ column.log_time }}</div>
<el-tooltip
class="item"
effect="dark"
:content="column.device_no"
placement="top"
>
<div class="warning-table-device">{{ column.device_no }}</div>
</el-tooltip>
<el-tooltip
class="item"
effect="dark"
:content="column.alarm_content"
placement="top"
>
<div class="warning-table-info">
{{ column.alarm_content }}
</div>
</el-tooltip>
<div
class="warning-table-status"
:style="{ color: column.status == 1 ? '#FFC74C' : '#22C3ED' }"
>
{{ column.status_text }}
</div>
</div>
</div>
</div>
</ShadowContainer>
</div>
<device-dialog
......@@ -258,7 +273,7 @@ export default {
});
const seriesData = this.towerData.map((series) => {
return {
name: series.name,
name: series.device_no,
type: "line",
smooth: true,
data: series.data.map((item) => {
......@@ -284,7 +299,7 @@ export default {
},
},
tooltip: {
trigger: "item",
trigger: "axis",
},
xAxis: {
type: "category",
......@@ -296,6 +311,11 @@ export default {
},
},
yAxis: {
name: "力矩/%",
nameTextStyle: {
color: "#C6DEF9",
nameLocation: "start",
},
type: "value",
axisLabel: {
fontSize: "12",
......@@ -327,11 +347,11 @@ export default {
});
const seriesData = this.towerData.map((series) => {
return {
name: series.name,
name: series.device_no,
type: "line",
smooth: true,
data: series.data.map((item) => {
return item.dip_angle;
return item.load;
}),
};
});
......@@ -352,6 +372,9 @@ export default {
color: "rgba(225, 239, 255, 0.7)",
},
},
tooltip: {
trigger: "axis",
},
xAxis: {
type: "category",
data: xAxisData,
......@@ -362,6 +385,11 @@ export default {
},
},
yAxis: {
name: "载重/t",
nameTextStyle: {
color: "#C6DEF9",
nameLocation: "start",
},
type: "value",
axisLabel: {
fontSize: "12",
......@@ -840,7 +868,6 @@ export default {
.towerwindow {
width: 460px;
height: 90px;
position: absolute;
left: 50%;
top: 50%;
......@@ -859,8 +886,6 @@ export default {
line-height: 32px;
font-size: 18px;
color: #c6def9;
padding-bottom: 16px;
border-bottom: 1px solid #7a8fad;
img {
width: 32px;
vertical-align: top;
......@@ -872,4 +897,40 @@ export default {
color: rgba(62, 236, 111, 1);
}
}
.warning-table {
font-size: 14px;
text-align: center;
color: #c6def9;
.warning-table-list {
height: 380px;
overflow-y: auto;
}
.warning-table-header {
background: rgba(44, 96, 162, 0.2);
display: flex;
padding: 12px 0;
}
.warning-table-column {
padding: 12px 0;
background: rgba(44, 96, 162, 0.05);
display: flex;
&:nth-child(2n) {
background: rgba(44, 96, 162, 0.1);
}
}
.warning-table-run-time {
width: 40%;
}
.warning-table-device,
.warning-table-info {
width: 20%;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
.warning-table-status {
width: 20%;
}
}
</style>
\ No newline at end of file
src/components/tower/deviceDialog2.vue
View file @ 3543c6ac
......@@ -9,7 +9,7 @@
<div>
<div class="title-label">
<img src="@/assets/tower/arrow.png" alt="" />
{{ deviceData.device_sn }} /
{{ deviceData.device_no }} /
<span :class="[deviceData.is_online == 1 ? 'online' : '']">{{
deviceData.is_online_text
}}</span>
......@@ -40,10 +40,7 @@
<div class="status-value">{{ deviceData.wind_speed }}</div>
<div class="status-text">风速/m/s</div>
</div>
<div class="status-window">
<div class="status-value">{{ deviceData.wind_speed_rate }}</div>
<div class="status-text">风速百分比/%</div>
</div>
<div class="status-window">
<div
class="status-value"
......@@ -55,6 +52,10 @@
</div>
<div class="status-text">数据更新</div>
</div>
<div class="status-window" style="opacity: 0">
<div class="status-value">{{ deviceData.wind_speed_rate }}</div>
<div class="status-text">风速百分比/%</div>
</div>
</div>
<div id="video-container" v-if="deviceData.is_camera == 1"></div>
<div id="video-container-img" v-else>
......
src/components/unloadingplatform/Index.vue
View file @ 3543c6ac
......@@ -5,37 +5,51 @@
<ShadowContainer>
<div id="platform-description">
<div
class="platforms"
v-for="(building, index) in buildingList"
:class="['platforms', activePlatform == index ? 'active' : '']"
v-for="(platform, index) in platformList"
:key="index"
@click="showDeviceInfo(platform)"
>
<div class="platform-title">
<img src="@/assets/unloadingplatform/platform.png" alt="" />
{{ building.area_name }}
<span>{{ building.total }}</span>
{{ platform.device_no }}
<span>{{ platform.status_name }}</span>
</div>
</div>
</div>
</ShadowContainer>
<Title text="运行分析"></Title>
<Title text="各平台运行分析"></Title>
<ShadowContainer>
<div id="today-warning-chart" ref="today24hourWarningChart"></div>
<div class="filters">
<div
:class="['filter', activeType == '0' ? 'active' : '']"
@click="changeType('0')"
>
过去24小时
</div>
<div
:class="['filter', activeType == '1' ? 'active' : '']"
@click="changeType('1')"
>
过去7天
</div>
</div>
<div id="battery-chart" ref="batteryChart"></div>
<div id="weight-chart" ref="weightChart"></div>
</ShadowContainer>
</div>
<div class="mid-area">
<div class="buildingwindow" v-if="buildingWindowVisible">
<div class="buildingwindow" v-if="platformWindowVisible">
<div class="building-description">
<img src="@/assets/fallprotection/building.png" alt="" />
<img src="@/assets/unloadingplatform/platform.png" alt="" />
{{ windowData.device_no }}
</div>
<div class="building-info">
<div
class="building-info-text"
v-for="(info, index) in windowData.alarm_list"
:key="index"
>
{{ info.alarm_name }}：{{ info.describe }}
<div class="building-info-text">载重：{{ windowData.weight }}t</div>
<div class="building-info-text">
电量：{{ windowData.battery_quantity }}%
</div>
<div class="building-info-text">偏置：{{ windowData.bias }}%</div>
</div>
<div class="recent-open">
最后更新:{{ windowData.latest_record_time }}
......@@ -56,7 +70,7 @@
<div>
<div class="warning-info-text">今日报警</div>
<div class="warning-info-num">
{{ fallwarningStatus.today_num }}
{{ platformWarningStatus.today_num }}
</div>
<div class="warning-info-img">
<img src="@/assets/fallprotection/today.png" alt="" />
......@@ -65,7 +79,7 @@
<div>
<div class="warning-info-text">累计未处理报警</div>
<div class="warning-info-num" style="color: #ffc74c">
{{ fallwarningStatus.un_handle_num }}
{{ platformWarningStatus.un_handle_num }}
</div>
<div class="warning-info-img">
<img src="@/assets/fallprotection/total-no.png" alt="" />
......@@ -74,7 +88,7 @@
<div>
<div class="warning-info-text">累计履责率</div>
<div class="warning-info-num" style="color: #22c3ed">
{{ fallwarningStatus.handle_rate
{{ platformWarningStatus.handle_rate
}}<span style="font-size: 14px; margin-left: 12px">%</span>
</div>
<div class="warning-info-img">
......@@ -82,18 +96,44 @@
</div>
</div>
</div>
<div class="platform-list">
<div class="platform">
<div class="platform-title">
<img src="@/assets/management/sample.png" alt="" />
PT20220824340320
<span class="status">未处理</span>
</div>
<div class="platform-info">
<div>电量：</div>
<div>载重：</div>
<div>偏置：</div>
<div>报警内容：</div>
<div class="warning-table">
<div class="warning-table-header">
<div class="warning-table-run-time">运行时间</div>
<div class="warning-table-device">设备</div>
<div class="warning-table-info">告警信息</div>
<div class="warning-table-status">处理状态</div>
</div>
<div class="warning-table-list" v-infinite-scroll="load">
<div
class="warning-table-column"
v-for="(column, index) in platformWarningList"
:key="index"
>
<div class="warning-table-run-time">{{ column.log_time }}</div>
<el-tooltip
class="item"
effect="dark"
:content="column.device_no"
placement="top"
>
<div class="warning-table-device">{{ column.device_no }}</div>
</el-tooltip>
<el-tooltip
class="item"
effect="dark"
:content="column.alarm_content"
placement="top"
>
<div class="warning-table-info">
{{ column.alarm_content }}
</div>
</el-tooltip>
<div
class="warning-table-status"
:style="{ color: column.status == 1 ? '#FFC74C' : '#22C3ED' }"
>
{{ column.status_text }}
</div>
</div>
</div>
</div>
......@@ -105,16 +145,15 @@
import AMapLoader from "@amap/amap-jsapi-loader";
import {
getBaseInfo,
getBuildingList,
get24hourWarningData,
getFallWarningList,
getFallWarningStatus,
getFallWarningTableList,
getDeviceCurrentStatus,
getUnloadingPlatformList,
getPlatformCurrentStatus,
getPlatformRunningAnalysis,
getPlatformWarningStatus,
getPlatformWarningList,
} from "@/api/index";
import platformIcon from "@/assets/unloadingplatform/icon-platform.png";
export default {
name: "FallProtection",
name: "UnloadingPlatform",
data() {
return {
platformList: [],
......@@ -122,16 +161,20 @@ export default {
map: null,
mapCenter: [],
buildingList: [],
warning24hourData: [],
fallWarningList: [],
fallwarningStatus: {
platformRunningData: [],
platformWarningList: [],
platformWarningStatus: {
today_num: 0,
un_handle_num: 0,
handle_rate: 0,
},
fallwarningTableData: [],
buildingWindowVisible: false,
platformWindowVisible: false,
windowData: {},
activePlatform: 0,
activeType: "0",
batteryChart: null,
weightChart: null,
page: 1,
};
},
methods: {
......@@ -151,18 +194,18 @@ export default {
resizeEnable: true,
mapStyle: "amap://styles/darkblue",
});
this.map.on("click", (e) => {
this.buildingWindowVisible = false;
this.map.on("click", () => {
this.platformWindowVisible = false;
});
this.getBuildingList();
this.getUnloadingPlatformList();
})
.catch((e) => {
console.log(e);
});
},
setMarker() {
this.buildingList.map((building) => {
building.device_list.map((device) => {
this.platformList.map((device) => {
if (device.latitude && device.longitude) {
const mapMarkers = new this.AMap.Marker({
icon: platformIcon,
position: [device.longitude, device.latitude],
......@@ -179,12 +222,12 @@ export default {
this.showDeviceInfo(markData);
});
});
});
}
});
},
getBuildingList() {
getBuildingList().then((res) => {
this.buildingList = res.data;
getUnloadingPlatformList() {
getUnloadingPlatformList().then((res) => {
this.platformList = res.data;
this.setMarker();
});
},
......@@ -197,26 +240,32 @@ export default {
this.$forceUpdate();
},
showDeviceInfo(device) {
this.buildingWindowVisible = false;
this.platformWindowVisible = false;
this.map.setCenter([device.longitude, device.latitude]);
getDeviceCurrentStatus({ device_id: device.id }).then((res) => {
getPlatformCurrentStatus({ device_id: device.id }).then((res) => {
this.windowData = { ...device, ...res.data };
console.log(this.windowData);
this.$nextTick(() => {
this.buildingWindowVisible = true;
this.platformWindowVisible = true;
});
});
},
render24hourWarningChart() {
const xAxisData = this.warning24hourData.map((item) => {
return item.hour;
renderBatteryChart() {
const xAxisData = this.platformRunningData[0].data.map((item) => {
return item.time;
});
const yAxisData = this.warning24hourData.map((item) => {
return item.num;
const series = this.platformRunningData.map((item) => {
return {
name: item.name,
data: item.data.map((platformData) => {
return platformData.battery_quantity;
}),
type: "line",
smooth: true,
};
});
const chart = this.$echarts.init(this.$refs.today24hourWarningChart);
this.batteryChart = this.$echarts.init(this.$refs.batteryChart);
const option = {
color: ["#ff4544"],
grid: {
top: 30,
bottom: 30,
......@@ -236,6 +285,11 @@ export default {
},
},
yAxis: {
name: "电量/%",
nameTextStyle: {
color: "#C6DEF9",
nameLocation: "start",
},
type: "value",
axisLabel: {
fontSize: "12",
......@@ -249,27 +303,90 @@ export default {
},
minInterval: 1,
},
series: [
{
data: yAxisData,
type: "line",
smooth: true,
areaStyle: {
color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: "#ff4544",
},
{
offset: 1,
color: "rgba(0,0,0,0)",
},
]),
series: series,
legend: {
orient: "horizontal",
textStyle: {
fontSize: 12,
color: "rgba(225, 239, 255, 0.7)",
},
itemGap: 12,
},
};
this.batteryChart.setOption(option);
this.$nextTick(() => {
// 解决echarts图表放大溢出父容器
const resizeOb = new ResizeObserver((entries) => {
for (const entry of entries) {
this.$echarts.getInstanceByDom(entry.target).resize();
}
});
resizeOb.observe(document.getElementById("battery-chart"));
});
},
renderWeightChart() {
const xAxisData = this.platformRunningData[0].data.map((item) => {
return item.time;
});
const series = this.platformRunningData.map((item) => {
return {
name: item.name,
data: item.data.map((platformData) => {
return platformData.weight;
}),
type: "line",
smooth: true,
};
});
this.weightChart = this.$echarts.init(this.$refs.weightChart);
const option = {
grid: {
top: 30,
bottom: 30,
left: 30,
right: 30,
},
tooltip: {
trigger: "axis",
},
xAxis: {
type: "category",
data: xAxisData,
axisTick: { show: false },
axisLabel: {
fontSize: "12",
color: "#c6def9",
},
},
yAxis: {
name: "载重/t",
nameTextStyle: {
color: "#C6DEF9",
nameLocation: "start",
},
type: "value",
axisLabel: {
fontSize: "12",
color: "#c6def9",
},
splitNumber: 4,
splitLine: {
lineStyle: {
color: "rgba(95, 120, 144, 0.4)",
},
},
],
},
legend: {
orient: "horizontal",
textStyle: {
fontSize: 12,
color: "rgba(225, 239, 255, 0.7)",
},
itemGap: 12,
},
series: series,
};
chart.setOption(option);
this.weightChart.setOption(option);
this.$nextTick(() => {
// 解决echarts图表放大溢出父容器
const resizeOb = new ResizeObserver((entries) => {
......@@ -277,10 +394,33 @@ export default {
this.$echarts.getInstanceByDom(entry.target).resize();
}
});
resizeOb.observe(document.getElementById("today-warning-chart"));
resizeOb.observe(document.getElementById("weight-chart"));
});
},
changeType(type) {
this.activeType = type;
this.batteryChart.dispose();
this.weightChart.dispose();
getPlatformRunningAnalysis({ date_type: type }).then((res) => {
this.platformRunningData = res.data;
this.$nextTick(() => {
this.renderBatteryChart();
this.renderWeightChart();
});
});
},
load() {
if (this.platformWarningList.length == this.page * 20) {
getPlatformWarningList({ page: this.page + 1, limit: 20 }).then(
(res) => {
this.page += 1;
this.platformWarningList += res.data.data;
}
);
}
},
},
mounted() {
getBaseInfo().then((res) => {
this.mapCenter = [res.data.longitude, res.data.latitude];
......@@ -288,21 +428,23 @@ export default {
this.initMap();
});
});
get24hourWarningData().then((res) => {
this.warning24hourData = res.data;
getPlatformRunningAnalysis({ date_type: 0 }).then((res) => {
this.platformRunningData = res.data;
this.$nextTick(() => {
this.render24hourWarningChart();
this.renderBatteryChart();
this.renderWeightChart();
});
});
getFallWarningList().then((res) => {
this.fallWarningList = res.data;
getPlatformWarningList({ page: 1, limit: 20 }).then((res) => {
this.platformWarningList = res.data.data;
});
getFallWarningStatus().then((res) => {
this.fallwarningStatus = res.data;
});
getFallWarningTableList().then((res) => {
this.fallwarningTableData = res.data.data;
getPlatformWarningStatus().then((res) => {
this.platformWarningStatus = res.data;
});
// getFallWarningTableList().then((res) => {
// this.fallwarningTableData = res.data.data;
// });
},
};
</script>
......@@ -382,6 +524,12 @@ export default {
span {
float: right;
}
&:hover {
background: rgba(44, 96, 162, 0.5);
}
&.active {
background: rgba(44, 96, 162, 0.5);
}
}
.platform-info {
line-height: 22px;
......@@ -402,8 +550,9 @@ export default {
}
}
}
#today-warning-chart {
height: 400px;
#battery-chart,
#weight-chart {
height: 250px;
}
.warning-count {
display: inline-block;
......@@ -463,7 +612,7 @@ export default {
text-align: center;
color: #c6def9;
.warning-table-list {
height: 200px;
height: 670px;
overflow-y: auto;
}
.warning-table-header {
......@@ -581,4 +730,27 @@ export default {
}
}
}
.filters {
display: flex;
justify-content: space-between;
margin-bottom: 10px;
.filter {
font-size: 14px;
color: rgba(198, 222, 249, 1);
width: 120px;
padding: 6px;
text-align: center;
cursor: pointer;
background: linear-gradient(
90deg,
rgba(8, 36, 71, 0) 0%,
rgba(39, 172, 251, 0.19) 49%,
rgba(9, 37, 71, 0) 100%
);
&.active {
color: #16c0ff;
}
}
}
</style>
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment