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) { ...@@ -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 @@ ...@@ -2,20 +2,61 @@
<div id="elevator"> <div id="elevator">
<div class="side-area"> <div class="side-area">
<Title text="设备列表"></Title> <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> <Title text="报警信息"></Title>
<ShadowContainer> <ShadowContainer>
<div id="warning-info"> <div id="warning-info">
<div> <div>
<div class="warning-info-text">今日报警</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"> <div class="warning-info-img">
<img src="@/assets/fallprotection/today.png" alt="" /> <img src="@/assets/fallprotection/today.png" alt="" />
</div> </div>
</div> </div>
<div> <div>
<div class="warning-info-text">累计未处理报警</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"> <div class="warning-info-img">
<img src="@/assets/fallprotection/total-no.png" alt="" /> <img src="@/assets/fallprotection/total-no.png" alt="" />
</div> </div>
...@@ -23,22 +64,38 @@ ...@@ -23,22 +64,38 @@
<div> <div>
<div class="warning-info-text">累计履责率</div> <div class="warning-info-text">累计履责率</div>
<div class="warning-info-num" style="color: #22c3ed"> <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>
<div class="warning-info-img"> <div class="warning-info-img">
<img src="@/assets/fallprotection/percent.png" alt="" /> <img src="@/assets/fallprotection/percent.png" alt="" />
</div> </div>
</div> </div>
</div> </div>
<div class="platform-list"> <div class="warning-table">
<div class="platform"> <div class="warning-table-header">
<div class="platform-title"> <div class="warning-table-time">报警时间</div>
<img src="@/assets/management/sample.png" alt="" /> <div class="warning-table-device">设备</div>
PT20220824340320 <div class="warning-table-message">报警信息</div>
<span class="status">未处理</span> <div class="warning-table-status">处理状态</div>
</div> </div>
<div class="platform-info"> <div class="warning-table-list" v-infinite-scroll="load">
<div>报警内容：</div> <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> </div>
</div> </div>
...@@ -46,16 +103,286 @@ ...@@ -46,16 +103,286 @@
</div> </div>
<div class="elevator-container"> <div class="elevator-container">
<ShadowContainer> <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> </ShadowContainer>
</div> </div>
</div> </div>
</template> </template>
<script> <script>
import {
getElevatorList,
getElevatorWarningList,
getElevatorWarningStatus,
getElevatorRealData,
} from "@/api/index";
export default { export default {
name: "Elevator", name: "Elevator",
data() { 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> </script>
...@@ -68,6 +395,52 @@ export default { ...@@ -68,6 +395,52 @@ export default {
.side-area { .side-area {
width: 25%; 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 { .elevator-container {
width: calc(75% - 20px); width: calc(75% - 20px);
} }
...@@ -130,4 +503,156 @@ export default { ...@@ -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> </style>
\ No newline at end of file
src/components/fallprotection/Index.vue
View file @ 3543c6ac
...@@ -208,7 +208,7 @@ export default { ...@@ -208,7 +208,7 @@ export default {
resizeEnable: true, resizeEnable: true,
mapStyle: "amap://styles/darkblue", mapStyle: "amap://styles/darkblue",
}); });
this.map.on("click", (e) => { this.map.on("click", () => {
this.buildingWindowVisible = false; this.buildingWindowVisible = false;
}); });
this.getBuildingList(); this.getBuildingList();
......
src/components/noise/Index.vue
View file @ 3543c6ac
...@@ -124,10 +124,9 @@ ...@@ -124,10 +124,9 @@
<div class="warning-table"> <div class="warning-table">
<div class="warning-table-header"> <div class="warning-table-header">
<div class="warning-table-time">报警时间</div> <div class="warning-table-time">报警时间</div>
<div class="warning-table-pm25">PM2.5</div> <div class="warning-table-device">设备</div>
<div class="warning-table-pm10">PM10</div> <div class="warning-table-message">报警信息</div>
<div class="warning-table-noise">噪音</div> <div class="warning-table-status">处理状态</div>
<div class="warning-table-wind">风速</div>
</div> </div>
<div class="warning-table-list" v-infinite-scroll="load"> <div class="warning-table-list" v-infinite-scroll="load">
<div <div
...@@ -136,10 +135,16 @@ ...@@ -136,10 +135,16 @@
:key="index" :key="index"
> >
<div class="warning-table-time">{{ column.log_time }}</div> <div class="warning-table-time">{{ column.log_time }}</div>
<div class="warning-table-pm25"></div> <div class="warning-table-device"></div>
<div class="warning-table-pm10"></div> <div class="warning-table-message">
<div class="warning-table-noise"></div> {{ column.alarm_content }}
<div class="warning-table-wind"></div> </div>
<div
class="warning-table-status"
:style="{ color: column.status == 1 ? '#FFC74C' : '' }"
>
{{ column.status_text }}
</div>
</div> </div>
</div> </div>
</div> </div>
...@@ -576,7 +581,7 @@ export default { ...@@ -576,7 +581,7 @@ export default {
} }
#aqi-chart { #aqi-chart {
width: 100%; width: 100%;
height: 214px; height: 154px;
} }
.monitor { .monitor {
display: flex; display: flex;
...@@ -775,11 +780,10 @@ export default { ...@@ -775,11 +780,10 @@ export default {
.warning-table-time { .warning-table-time {
width: 40%; width: 40%;
} }
.warning-table-pm25, .warning-table-device,
.warning-table-pm10, .warning-table-message,
.warning-table-noise, .warning-table-status {
.warning-table-wind { width: 20%;
width: 15%;
} }
} }
#stats-container { #stats-container {
......
src/components/tower/Index.vue
View file @ 3543c6ac
...@@ -12,7 +12,7 @@ ...@@ -12,7 +12,7 @@
<ShadowContainer> <ShadowContainer>
<div id="force-chart" ref="forceChart"></div> <div id="force-chart" ref="forceChart"></div>
</ShadowContainer> </ShadowContainer>
<Title text="各塔吊24h倾角统计"></Title> <Title text="各塔吊24h载重统计"></Title>
<ShadowContainer> <ShadowContainer>
<div id="dip-chart" ref="dipChart"></div> <div id="dip-chart" ref="dipChart"></div>
</ShadowContainer> </ShadowContainer>
...@@ -45,7 +45,7 @@ ...@@ -45,7 +45,7 @@
/> />
</span> </span>
</div> </div>
<div class="recent-open">最近使用:{{ windowData.log_time }}</div> <!-- <div class="recent-open">最近使用:{{ windowData.log_time }}</div> -->
</div> </div>
<div class="swagger-container" id="container"> <div class="swagger-container" id="container">
<img class="lt" src="@/assets/lt.png" alt="" /> <img class="lt" src="@/assets/lt.png" alt="" />
...@@ -56,35 +56,6 @@ ...@@ -56,35 +56,6 @@
</div> </div>
</div> </div>
<div class="side-area"> <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> <Title text="设备列表"></Title>
<ShadowContainer> <ShadowContainer>
<div class="monitor-list"> <div class="monitor-list">
...@@ -112,6 +83,50 @@ ...@@ -112,6 +83,50 @@
</div> </div>
</div> </div>
</ShadowContainer> </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> </div>
<device-dialog <device-dialog
...@@ -258,7 +273,7 @@ export default { ...@@ -258,7 +273,7 @@ export default {
}); });
const seriesData = this.towerData.map((series) => { const seriesData = this.towerData.map((series) => {
return { return {
name: series.name, name: series.device_no,
type: "line", type: "line",
smooth: true, smooth: true,
data: series.data.map((item) => { data: series.data.map((item) => {
...@@ -284,7 +299,7 @@ export default { ...@@ -284,7 +299,7 @@ export default {
}, },
}, },
tooltip: { tooltip: {
trigger: "item", trigger: "axis",
}, },
xAxis: { xAxis: {
type: "category", type: "category",
...@@ -296,6 +311,11 @@ export default { ...@@ -296,6 +311,11 @@ export default {
}, },
}, },
yAxis: { yAxis: {
name: "力矩/%",
nameTextStyle: {
color: "#C6DEF9",
nameLocation: "start",
},
type: "value", type: "value",
axisLabel: { axisLabel: {
fontSize: "12", fontSize: "12",
...@@ -327,11 +347,11 @@ export default { ...@@ -327,11 +347,11 @@ export default {
}); });
const seriesData = this.towerData.map((series) => { const seriesData = this.towerData.map((series) => {
return { return {
name: series.name, name: series.device_no,
type: "line", type: "line",
smooth: true, smooth: true,
data: series.data.map((item) => { data: series.data.map((item) => {
return item.dip_angle; return item.load;
}), }),
}; };
}); });
...@@ -352,6 +372,9 @@ export default { ...@@ -352,6 +372,9 @@ export default {
color: "rgba(225, 239, 255, 0.7)", color: "rgba(225, 239, 255, 0.7)",
}, },
}, },
tooltip: {
trigger: "axis",
},
xAxis: { xAxis: {
type: "category", type: "category",
data: xAxisData, data: xAxisData,
...@@ -362,6 +385,11 @@ export default { ...@@ -362,6 +385,11 @@ export default {
}, },
}, },
yAxis: { yAxis: {
name: "载重/t",
nameTextStyle: {
color: "#C6DEF9",
nameLocation: "start",
},
type: "value", type: "value",
axisLabel: { axisLabel: {
fontSize: "12", fontSize: "12",
...@@ -840,7 +868,6 @@ export default { ...@@ -840,7 +868,6 @@ export default {
.towerwindow { .towerwindow {
width: 460px; width: 460px;
height: 90px;
position: absolute; position: absolute;
left: 50%; left: 50%;
top: 50%; top: 50%;
...@@ -859,8 +886,6 @@ export default { ...@@ -859,8 +886,6 @@ export default {
line-height: 32px; line-height: 32px;
font-size: 18px; font-size: 18px;
color: #c6def9; color: #c6def9;
padding-bottom: 16px;
border-bottom: 1px solid #7a8fad;
img { img {
width: 32px; width: 32px;
vertical-align: top; vertical-align: top;
...@@ -872,4 +897,40 @@ export default { ...@@ -872,4 +897,40 @@ export default {
color: rgba(62, 236, 111, 1); 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> </style>
\ No newline at end of file
src/components/tower/deviceDialog2.vue
View file @ 3543c6ac
...@@ -9,7 +9,7 @@ ...@@ -9,7 +9,7 @@
<div> <div>
<div class="title-label"> <div class="title-label">
<img src="@/assets/tower/arrow.png" alt="" /> <img src="@/assets/tower/arrow.png" alt="" />
{{ deviceData.device_sn }} / {{ deviceData.device_no }} /
<span :class="[deviceData.is_online == 1 ? 'online' : '']">{{ <span :class="[deviceData.is_online == 1 ? 'online' : '']">{{
deviceData.is_online_text deviceData.is_online_text
}}</span> }}</span>
...@@ -40,10 +40,7 @@ ...@@ -40,10 +40,7 @@
<div class="status-value">{{ deviceData.wind_speed }}</div> <div class="status-value">{{ deviceData.wind_speed }}</div>
<div class="status-text">风速/m/s</div> <div class="status-text">风速/m/s</div>
</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-window">
<div <div
class="status-value" class="status-value"
...@@ -55,6 +52,10 @@ ...@@ -55,6 +52,10 @@
</div> </div>
<div class="status-text">数据更新</div> <div class="status-text">数据更新</div>
</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>
<div id="video-container" v-if="deviceData.is_camera == 1"></div> <div id="video-container" v-if="deviceData.is_camera == 1"></div>
<div id="video-container-img" v-else> <div id="video-container-img" v-else>
......
src/components/unloadingplatform/Index.vue
View file @ 3543c6ac
...@@ -5,37 +5,51 @@ ...@@ -5,37 +5,51 @@
<ShadowContainer> <ShadowContainer>
<div id="platform-description"> <div id="platform-description">
<div <div
class="platforms" :class="['platforms', activePlatform == index ? 'active' : '']"
v-for="(building, index) in buildingList" v-for="(platform, index) in platformList"
:key="index" :key="index"
@click="showDeviceInfo(platform)"
> >
<div class="platform-title"> <div class="platform-title">
<img src="@/assets/unloadingplatform/platform.png" alt="" /> <img src="@/assets/unloadingplatform/platform.png" alt="" />
{{ building.area_name }} {{ platform.device_no }}
<span>{{ building.total }}</span> <span>{{ platform.status_name }}</span>
</div> </div>
</div> </div>
</div> </div>
</ShadowContainer> </ShadowContainer>
<Title text="运行分析"></Title> <Title text="各平台运行分析"></Title>
<ShadowContainer> <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> </ShadowContainer>
</div> </div>
<div class="mid-area"> <div class="mid-area">
<div class="buildingwindow" v-if="buildingWindowVisible"> <div class="buildingwindow" v-if="platformWindowVisible">
<div class="building-description"> <div class="building-description">
<img src="@/assets/fallprotection/building.png" alt="" /> <img src="@/assets/unloadingplatform/platform.png" alt="" />
{{ windowData.device_no }} {{ windowData.device_no }}
</div> </div>
<div class="building-info"> <div class="building-info">
<div <div class="building-info-text">载重：{{ windowData.weight }}t</div>
class="building-info-text" <div class="building-info-text">
v-for="(info, index) in windowData.alarm_list" 电量：{{ windowData.battery_quantity }}%
:key="index"
>
{{ info.alarm_name }}：{{ info.describe }}
</div> </div>
<div class="building-info-text">偏置：{{ windowData.bias }}%</div>
</div> </div>
<div class="recent-open"> <div class="recent-open">
最后更新:{{ windowData.latest_record_time }} 最后更新:{{ windowData.latest_record_time }}
...@@ -56,7 +70,7 @@ ...@@ -56,7 +70,7 @@
<div> <div>
<div class="warning-info-text">今日报警</div> <div class="warning-info-text">今日报警</div>
<div class="warning-info-num"> <div class="warning-info-num">
{{ fallwarningStatus.today_num }} {{ platformWarningStatus.today_num }}
</div> </div>
<div class="warning-info-img"> <div class="warning-info-img">
<img src="@/assets/fallprotection/today.png" alt="" /> <img src="@/assets/fallprotection/today.png" alt="" />
...@@ -65,7 +79,7 @@ ...@@ -65,7 +79,7 @@
<div> <div>
<div class="warning-info-text">累计未处理报警</div> <div class="warning-info-text">累计未处理报警</div>
<div class="warning-info-num" style="color: #ffc74c"> <div class="warning-info-num" style="color: #ffc74c">
{{ fallwarningStatus.un_handle_num }} {{ platformWarningStatus.un_handle_num }}
</div> </div>
<div class="warning-info-img"> <div class="warning-info-img">
<img src="@/assets/fallprotection/total-no.png" alt="" /> <img src="@/assets/fallprotection/total-no.png" alt="" />
...@@ -74,7 +88,7 @@ ...@@ -74,7 +88,7 @@
<div> <div>
<div class="warning-info-text">累计履责率</div> <div class="warning-info-text">累计履责率</div>
<div class="warning-info-num" style="color: #22c3ed"> <div class="warning-info-num" style="color: #22c3ed">
{{ fallwarningStatus.handle_rate {{ platformWarningStatus.handle_rate
}}<span style="font-size: 14px; margin-left: 12px">%</span> }}<span style="font-size: 14px; margin-left: 12px">%</span>
</div> </div>
<div class="warning-info-img"> <div class="warning-info-img">
...@@ -82,18 +96,44 @@ ...@@ -82,18 +96,44 @@
</div> </div>
</div> </div>
</div> </div>
<div class="platform-list"> <div class="warning-table">
<div class="platform"> <div class="warning-table-header">
<div class="platform-title"> <div class="warning-table-run-time">运行时间</div>
<img src="@/assets/management/sample.png" alt="" /> <div class="warning-table-device">设备</div>
PT20220824340320 <div class="warning-table-info">告警信息</div>
<span class="status">未处理</span> <div class="warning-table-status">处理状态</div>
</div> </div>
<div class="platform-info"> <div class="warning-table-list" v-infinite-scroll="load">
<div>电量：</div> <div
<div>载重：</div> class="warning-table-column"
<div>偏置：</div> v-for="(column, index) in platformWarningList"
<div>报警内容：</div> :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> </div>
</div> </div>
...@@ -105,16 +145,15 @@ ...@@ -105,16 +145,15 @@
import AMapLoader from "@amap/amap-jsapi-loader"; import AMapLoader from "@amap/amap-jsapi-loader";
import { import {
getBaseInfo, getBaseInfo,
getBuildingList, getUnloadingPlatformList,
get24hourWarningData, getPlatformCurrentStatus,
getFallWarningList, getPlatformRunningAnalysis,
getFallWarningStatus, getPlatformWarningStatus,
getFallWarningTableList, getPlatformWarningList,
getDeviceCurrentStatus,
} from "@/api/index"; } from "@/api/index";
import platformIcon from "@/assets/unloadingplatform/icon-platform.png"; import platformIcon from "@/assets/unloadingplatform/icon-platform.png";
export default { export default {
name: "FallProtection", name: "UnloadingPlatform",
data() { data() {
return { return {
platformList: [], platformList: [],
...@@ -122,16 +161,20 @@ export default { ...@@ -122,16 +161,20 @@ export default {
map: null, map: null,
mapCenter: [], mapCenter: [],
buildingList: [], buildingList: [],
warning24hourData: [], platformRunningData: [],
fallWarningList: [], platformWarningList: [],
fallwarningStatus: { platformWarningStatus: {
today_num: 0, today_num: 0,
un_handle_num: 0, un_handle_num: 0,
handle_rate: 0, handle_rate: 0,
}, },
fallwarningTableData: [], platformWindowVisible: false,
buildingWindowVisible: false,
windowData: {}, windowData: {},
activePlatform: 0,
activeType: "0",
batteryChart: null,
weightChart: null,
page: 1,
}; };
}, },
methods: { methods: {
...@@ -151,18 +194,18 @@ export default { ...@@ -151,18 +194,18 @@ export default {
resizeEnable: true, resizeEnable: true,
mapStyle: "amap://styles/darkblue", mapStyle: "amap://styles/darkblue",
}); });
this.map.on("click", (e) => { this.map.on("click", () => {
this.buildingWindowVisible = false; this.platformWindowVisible = false;
}); });
this.getBuildingList(); this.getUnloadingPlatformList();
}) })
.catch((e) => { .catch((e) => {
console.log(e); console.log(e);
}); });
}, },
setMarker() { setMarker() {
this.buildingList.map((building) => { this.platformList.map((device) => {
building.device_list.map((device) => { if (device.latitude && device.longitude) {
const mapMarkers = new this.AMap.Marker({ const mapMarkers = new this.AMap.Marker({
icon: platformIcon, icon: platformIcon,
position: [device.longitude, device.latitude], position: [device.longitude, device.latitude],
...@@ -179,12 +222,12 @@ export default { ...@@ -179,12 +222,12 @@ export default {
this.showDeviceInfo(markData); this.showDeviceInfo(markData);
}); });
}); });
}); }
}); });
}, },
getBuildingList() { getUnloadingPlatformList() {
getBuildingList().then((res) => { getUnloadingPlatformList().then((res) => {
this.buildingList = res.data; this.platformList = res.data;
this.setMarker(); this.setMarker();
}); });
}, },
...@@ -197,26 +240,32 @@ export default { ...@@ -197,26 +240,32 @@ export default {
this.$forceUpdate(); this.$forceUpdate();
}, },
showDeviceInfo(device) { showDeviceInfo(device) {
this.buildingWindowVisible = false; this.platformWindowVisible = false;
this.map.setCenter([device.longitude, device.latitude]); 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 }; this.windowData = { ...device, ...res.data };
console.log(this.windowData); console.log(this.windowData);
this.$nextTick(() => { this.$nextTick(() => {
this.buildingWindowVisible = true; this.platformWindowVisible = true;
}); });
}); });
}, },
render24hourWarningChart() { renderBatteryChart() {
const xAxisData = this.warning24hourData.map((item) => { const xAxisData = this.platformRunningData[0].data.map((item) => {
return item.hour; return item.time;
}); });
const yAxisData = this.warning24hourData.map((item) => { const series = this.platformRunningData.map((item) => {
return item.num; 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 = { const option = {
color: ["#ff4544"],
grid: { grid: {
top: 30, top: 30,
bottom: 30, bottom: 30,
...@@ -236,6 +285,11 @@ export default { ...@@ -236,6 +285,11 @@ export default {
}, },
}, },
yAxis: { yAxis: {
name: "电量/%",
nameTextStyle: {
color: "#C6DEF9",
nameLocation: "start",
},
type: "value", type: "value",
axisLabel: { axisLabel: {
fontSize: "12", fontSize: "12",
...@@ -249,27 +303,90 @@ export default { ...@@ -249,27 +303,90 @@ export default {
}, },
minInterval: 1, minInterval: 1,
}, },
series: [ series: series,
{ legend: {
data: yAxisData, orient: "horizontal",
type: "line", textStyle: {
smooth: true, fontSize: 12,
areaStyle: { color: "rgba(225, 239, 255, 0.7)",
color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [ },
{ itemGap: 12,
offset: 0, },
color: "#ff4544", };
}, this.batteryChart.setOption(option);
{ this.$nextTick(() => {
offset: 1, // 解决echarts图表放大溢出父容器
color: "rgba(0,0,0,0)", 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(() => { this.$nextTick(() => {
// 解决echarts图表放大溢出父容器 // 解决echarts图表放大溢出父容器
const resizeOb = new ResizeObserver((entries) => { const resizeOb = new ResizeObserver((entries) => {
...@@ -277,10 +394,33 @@ export default { ...@@ -277,10 +394,33 @@ export default {
this.$echarts.getInstanceByDom(entry.target).resize(); 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() { mounted() {
getBaseInfo().then((res) => { getBaseInfo().then((res) => {
this.mapCenter = [res.data.longitude, res.data.latitude]; this.mapCenter = [res.data.longitude, res.data.latitude];
...@@ -288,21 +428,23 @@ export default { ...@@ -288,21 +428,23 @@ export default {
this.initMap(); this.initMap();
}); });
}); });
get24hourWarningData().then((res) => {
this.warning24hourData = res.data; getPlatformRunningAnalysis({ date_type: 0 }).then((res) => {
this.platformRunningData = res.data;
this.$nextTick(() => { this.$nextTick(() => {
this.render24hourWarningChart(); this.renderBatteryChart();
this.renderWeightChart();
}); });
}); });
getFallWarningList().then((res) => { getPlatformWarningList({ page: 1, limit: 20 }).then((res) => {
this.fallWarningList = res.data; this.platformWarningList = res.data.data;
}); });
getFallWarningStatus().then((res) => { getPlatformWarningStatus().then((res) => {
this.fallwarningStatus = res.data; this.platformWarningStatus = res.data;
});
getFallWarningTableList().then((res) => {
this.fallwarningTableData = res.data.data;
}); });
// getFallWarningTableList().then((res) => {
// this.fallwarningTableData = res.data.data;
// });
}, },
}; };
</script> </script>
...@@ -382,6 +524,12 @@ export default { ...@@ -382,6 +524,12 @@ export default {
span { span {
float: right; float: right;
} }
&:hover {
background: rgba(44, 96, 162, 0.5);
}
&.active {
background: rgba(44, 96, 162, 0.5);
}
} }
.platform-info { .platform-info {
line-height: 22px; line-height: 22px;
...@@ -402,8 +550,9 @@ export default { ...@@ -402,8 +550,9 @@ export default {
} }
} }
} }
#today-warning-chart { #battery-chart,
height: 400px; #weight-chart {
height: 250px;
} }
.warning-count { .warning-count {
display: inline-block; display: inline-block;
...@@ -463,7 +612,7 @@ export default { ...@@ -463,7 +612,7 @@ export default {
text-align: center; text-align: center;
color: #c6def9; color: #c6def9;
.warning-table-list { .warning-table-list {
height: 200px; height: 670px;
overflow-y: auto; overflow-y: auto;
} }
.warning-table-header { .warning-table-header {
...@@ -581,4 +730,27 @@ export default { ...@@ -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> </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