Skip to content

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

样式更新

parent 6b3e262f
Show whitespace changes
Inline Side-by-side
Showing with 1024 additions and 309 deletions
src/api/index.js
View file @ 4f6eaeca
......@@ -231,7 +231,7 @@ export function getDeviceTotalStatus(params) {
export function getNearMonthStatis(params) {
return request({
url: '/pweb/s/env/statis',
url: '/pweb/s/env/noise/month',
method: 'get',
params
})
......@@ -244,10 +244,11 @@ export function getNoiseDeviceList(params) {
})
}
export function getCurrentMonitorStatis() {
export function getCurrentMonitorStatis(params) {
return request({
url: '/pweb/s/env/realtime/data',
method: 'get',
params
})
}
......@@ -330,10 +331,11 @@ export function getFallWarningStatus() {
})
}
export function getFallWarningTableList() {
export function getFallWarningTableList(params) {
return request({
url: '/pweb/s/linbian/warning',
method: 'get',
params
})
}
......
src/components/construction/Index.vue
View file @ 4f6eaeca
......@@ -636,10 +636,10 @@ table {
position: relative;
.custom-chart {
position: absolute;
width: 40%;
width: 160px;
left: 50%;
transform: translateX(-50%);
top: 17%;
top: 18%;
}
}
#security-chart,
......
src/components/earlywarning/Index.vue
View file @ 4f6eaeca
......@@ -585,10 +585,10 @@ export default {
position: relative;
.custom-chart {
position: absolute;
width: 30%;
width: 25%;
top: 50%;
transform: translateY(-50%);
left: 13%;
left: 15%;
}
}
#today-chart,
......
src/components/elevator/Index.vue 0 → 100644
View file @ 4f6eaeca
<template>
<div id="elevator">
<div class="side-area">
<Title text="设备列表"></Title>
<ShadowContainer></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-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-img">
<img src="@/assets/fallprotection/total-no.png" alt="" />
</div>
</div>
<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>
</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>
</div>
</div>
</ShadowContainer>
</div>
<div class="elevator-container">
<ShadowContainer>
<div style="height: 980px"></div>
</ShadowContainer>
</div>
</div>
</template>
<script>
export default {
name: "Elevator",
data() {
return {};
},
};
</script>
<style lang="less" scoped>
#elevator {
padding: 12px 20px;
display: flex;
justify-content: space-between;
}
.side-area {
width: 25%;
}
.elevator-container {
width: calc(75% - 20px);
}
.platform {
img {
width: 20px;
vertical-align: middle;
margin-right: 6px;
}
font-size: 14px;
color: #c6def9;
.platform-title {
background: rgba(44, 96, 162, 0.2);
border-bottom: 1px solid rgba(122, 143, 173, 0.4);
line-height: 40px;
padding: 0 12px;
.status {
float: right;
}
}
.platform-info {
background: rgba(44, 96, 162, 0.1);
display: flex;
justify-content: space-between;
flex-wrap: wrap;
& > div {
width: calc(50% - 48px);
padding: 6px 12px;
}
}
&:hover {
color: #27acfb;
.platform-title,
.platform-info {
background: rgba(44, 96, 162, 0.4);
}
}
}
#warning-info {
display: flex;
justify-content: space-between;
text-align: center;
.warning-info-text {
padding-top: 20px;
font-size: 16px;
color: #ffffff;
line-height: 18px;
}
.warning-info-num {
font-size: 24px;
color: #ff6151;
}
.warning-info-img {
position: relative;
transform: translateY(-60px);
margin-bottom: -60px;
img {
width: 80%;
margin: 0 auto;
}
}
}
</style>
\ No newline at end of file
src/components/fallprotection/Index.vue
View file @ 4f6eaeca
......@@ -119,7 +119,7 @@
<div class="warning-table-info">告警信息</div>
<div class="warning-table-status">处理状态</div>
</div>
<div class="warning-table-list">
<div class="warning-table-list" v-infinite-scroll="load">
<div
class="warning-table-column"
v-for="(column, index) in fallwarningTableData"
......@@ -188,6 +188,7 @@ export default {
fallwarningTableData: [],
buildingWindowVisible: false,
windowData: {},
page: 1,
};
},
methods: {
......@@ -253,6 +254,7 @@ export default {
this.$forceUpdate();
},
showDeviceInfo(device) {
this.buildingWindowVisible = false;
this.map.setCenter([device.longitude, device.latitude]);
getDeviceCurrentStatus({ device_id: device.id }).then((res) => {
this.windowData = { ...device, ...res.data };
......@@ -335,6 +337,14 @@ export default {
resizeOb.observe(document.getElementById("today-warning-chart"));
});
},
load() {
if (this.fallwarningTableData.length == this.page * 10) {
getFallWarningTableList({ page: this.page + 1 }).then((res) => {
this.page += 1;
this.fallwarningTableData += res.data.data;
});
}
},
},
mounted() {
getBaseInfo().then((res) => {
......@@ -355,7 +365,7 @@ export default {
getFallWarningStatus().then((res) => {
this.fallwarningStatus = res.data;
});
getFallWarningTableList().then((res) => {
getFallWarningTableList({ page: 1 }).then((res) => {
this.fallwarningTableData = res.data.data;
});
},
......
src/components/noise/Index.vue
View file @ 4f6eaeca
<template>
<div id="noise">
<div class="side-area">
<Title text="设备列表"></Title>
<ShadowContainer>
<div class="monitor-list">
<div
:class="['noise-monitor', activeIndex == index ? 'active' : '']"
v-for="(monitor, index) in noiseMonitors"
:key="index"
@click="changeMonitor(monitor, index)"
>
<img src="@/assets/noise/icon_device.png" alt="" />
{{ monitor.device_name }} / {{ monitor.device_no }}
</div>
</div>
</ShadowContainer>
<Title text="设备总览"></Title>
<ShadowContainer>
<div class="chart-container">
......@@ -15,201 +29,118 @@
<div ref="noiseChart" id="noise-chart"></div>
</div>
</ShadowContainer>
<Title text="近30日AQI"></Title>
<ShadowContainer>
<div v-for="(iType, index) in noiseTypes" :key="index" class="i-type">
<div class="i-type-name">
{{ iType.name }}
</div>
<div class="slider">
<el-progress
v-if="!isNaN(iType.value)"
:percentage="computedPercentage(iType.value, 30)"
:color="iType.color"
:show-text="false"
define-back-color="#183C6B"
></el-progress>
</div>
<div class="i-type-count">
<span>{{ iType.value }}</span>
天
</div>
</div>
</ShadowContainer>
</div>
<div class="mid-area">
<Title text="实时监测" type="long"></Title>
<ShadowContainer>
<div class="monitor">
<div class="lt-status">
<el-divider></el-divider>
<el-progress
v-if="currentMonitorStatis.pm10.percentage"
type="circle"
:percentage="Number(currentMonitorStatis.pm10.percentage)"
:format="
(value) => formatText(value, currentMonitorStatis.pm10.value)
"
:color="currentMonitorStatis.pm10.color"
:stroke-width="12"
></el-progress>
<div class="status-unit">
pm 10 / <span style="font-size: 12px; color: #6d94bf">ug/m³</span>
</div>
<el-divider></el-divider>
<el-progress
v-if="currentMonitorStatis.pm25.percentage"
type="circle"
:percentage="Number(currentMonitorStatis.pm25.percentage)"
:format="
(value) => formatText(value, currentMonitorStatis.pm25.value)
"
:color="currentMonitorStatis.pm25.color"
:stroke-width="12"
></el-progress>
<div class="status-unit">
pm 2.5 /
<span style="font-size: 12px; color: #6d94bf">ug/m³</span>
<div id="stats-container">
<div class="temp">
<div class="text">温度/℃</div>
<div class="value" style="color: #ff6151">
{{ currentMonitorStatis.temperature }}
</div>
<el-divider></el-divider>
<el-progress
v-if="currentMonitorStatis.noise.percentage"
type="circle"
:percentage="Number(currentMonitorStatis.noise.percentage)"
:format="
(value) => formatText(value, currentMonitorStatis.noise.value)
"
:color="currentMonitorStatis.noise.color"
:stroke-width="12"
></el-progress>
<div class="status-unit">
噪音 / <span style="font-size: 12px; color: #6d94bf">分贝</span>
</div>
<el-divider></el-divider>
<div class="humidity">
<div class="text">湿度/℃</div>
<div class="value" style="color: #22c3ed">
{{ currentMonitorStatis.humidity }}
</div>
<div class="mid-aqi">
<div class="aqi-background">
<div id="aqi-quality-chart" ref="aqiQualityChart"></div>
</div>
<div class="aqi-level">
<div class="aqi-level-line">
<div
v-for="(color, index) in currentMonitorStatis.aqi.level_list"
:key="index"
:style="{ background: color.color }"
></div>
</div>
<div class="aqi-level-text">
<div
v-for="(aqi_level, index) in currentMonitorStatis.aqi
.level_list"
:key="index"
>
{{ aqi_level.name }}
<div class="windangle">
<div class="text">风向/°</div>
<div class="value" style="color: #cc43b7">
{{ currentMonitorStatis.wind_direction }}
</div>
</div>
<div class="windspeed">
<div class="text">风速/m/s</div>
<div class="value" style="color: #ffc74c">
{{ currentMonitorStatis.wind_speed }}
</div>
</div>
<div class="rt-status">
<el-divider></el-divider>
<div class="rt-single-status">
<div class="left-des">
<div>温度</div>
<img src="@/assets/noise/icon_f_san@2x.png" alt="" />
<div class="mid-status">
<div>
噪音 <span class="value">{{ currentMonitorStatis.noise }}</span>
<span class="unit">dB</span>
</div>
<div class="rt-value">
<span>{{ currentMonitorStatis.temperature }}</span
>℃
<div>
PM2.5 <span class="value">{{ currentMonitorStatis.pm25 }}</span
><span class="unit">ug/m³</span>
</div>
<div>
PM10 <span class="value">{{ currentMonitorStatis.pm10 }}</span
><span class="unit">ug/m³</span>
</div>
<el-divider> </el-divider>
<div class="rt-single-status">
<div class="left-des">
<div>湿度</div>
<img src="@/assets/noise/icon_f_si@2x.png" alt="" />
</div>
<div class="rt-value">
<span>{{ currentMonitorStatis.humidity }}</span
>%
<img src="@/assets/noise/stats-bg.png" alt="" />
</div>
<div class="filters">
<div
:class="['filter', activeType == 'pm25_data' ? 'active' : '']"
@click="changeType('pm25_data')"
>
PM2.5
</div>
<el-divider> </el-divider>
<div class="rt-single-status">
<div class="left-des">
<div>风速</div>
<img src="@/assets/noise/icon_f_wu@2x.png" alt="" />
</div>
<div class="rt-value">
<span>{{ currentMonitorStatis.wind_speed }}</span
>m/s
</div>
<div
:class="['filter', activeType == 'pm10_data' ? 'active' : '']"
@click="changeType('pm10_data')"
>
PM10
</div>
<el-divider> </el-divider>
<div class="rt-single-status">
<div class="left-des">
<div>数据采集</div>
<img src="@/assets/noise/icon_f_liu@2x.png" alt="" />
<div
:class="[
'filter',
activeType == 'temperature_data' ? 'active' : '',
]"
@click="changeType('temperature_data')"
>
温度
</div>
<div
class="rt-value"
style="line-height: 20px; padding-top: 16px"
:class="['filter', activeType == 'humidity_data' ? 'active' : '']"
@click="changeType('humidity_data')"
>
{{
currentMonitorStatis.log_time &&
currentMonitorStatis.log_time.split(" ")[0]
}}
<br />
{{
currentMonitorStatis.log_time &&
currentMonitorStatis.log_time.split(" ")[1]
}}
湿度
</div>
<div
:class="['filter', activeType == 'noise_data' ? 'active' : '']"
@click="changeType('noise_data')"
>
噪音
</div>
<el-divider> </el-divider>
<div
:class="['filter', activeType == 'wind_speed_data' ? 'active' : '']"
@click="changeType('wind_speed_data')"
>
风速
</div>
</div>
</ShadowContainer>
<Title text="今日AQI" type="long"></Title>
<ShadowContainer>
<div id="aqi-chart" ref="aqiChart"></div>
</ShadowContainer>
</div>
<div class="side-area">
<Title text="近30日报警信息"></Title>
<Title text="报警信息"></Title>
<ShadowContainer>
<div class="warp">
<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>
<div class="warning-table-list" v-infinite-scroll="load">
<div
class="warn-title"
v-for="(warn, index) in warnings"
class="warning-table-column"
v-for="(column, index) in warnings"
:key="index"
>
<div class="warn-text">
<el-tooltip
class="item"
effect="dark"
:content="warn.alarm_content"
>
<div class="overflowed">
{{ warn.alarm_content }}
</div>
</el-tooltip>
<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>
<div class="warn-time">{{ warn.log_time }}</div>
</div>
</div>
</ShadowContainer>
<Title text="扬尘噪音"></Title>
<ShadowContainer>
<div style="height: 570px">
<div
class="noise-monitor"
v-for="(monitor, index) in noiseMonitors"
:key="index"
>
<img src="@/assets/noise/icon_e_qi@2x.png" alt="" />
{{ monitor.device_name }}
</div>
</div>
</ShadowContainer>
......@@ -231,21 +162,18 @@ export default {
return {
pieChartData: [],
noiseData: [],
noiseTypes: [],
warnings: [],
noiseMonitors: [],
classOption: {
singleHeight: 36,
},
currentMonitorStatis: {
aqi: {
level_list: [],
},
pm10: {},
pm25: {},
noise: {},
},
currentMonitorStatis: {},
aqiLineChartData: [],
activeIndex: 0,
totalData: {},
activeType: "pm25_data",
lineChart: null,
page: 1,
};
},
computed: {},
......@@ -454,9 +382,10 @@ export default {
return item.hour;
});
const yAxisData = this.aqiLineChartData.map((item) => {
return item.aqi_value;
return item.value;
});
const chart = this.$echarts.init(this.$refs.aqiChart);
this.lineChart = chart;
const option = {
color: ["#5E97F6"],
grid: {
......@@ -524,98 +453,7 @@ export default {
formatText(value, text) {
return String(text);
},
renderAqiQualityChart() {
const chart = this.$echarts.init(this.$refs.aqiQualityChart);
const option = {
title: {
x: "49%", //X坐标
y: "64%",
subtext: this.currentMonitorStatis.aqi.level,
textAlign: "center",
subtextStyle: {
//副标题样式
fontSize: 24,
fontWeight: "bolder",
lineHeight: 24,
color: this.currentMonitorStatis.aqi.color,
},
},
series: [
{
type: "gauge",
center: ["50%", "60%"],
startAngle: 230,
endAngle: -50,
min: 0,
max: 100,
itemStyle: {
color: this.currentMonitorStatis.aqi.color,
},
progress: {
show: true,
width: 30,
},
pointer: {
show: false,
},
axisLine: {
lineStyle: {
width: 30,
color: [[1, "#183C6B"]],
},
},
axisTick: {
distance: -45,
splitNumber: 5,
lineStyle: {
width: 2,
color: "#183C6B",
},
},
splitLine: {
show: false,
},
axisLabel: {
show: false,
},
anchor: {
show: false,
},
title: {
show: false,
},
detail: {
valueAnimation: true,
width: "60%",
lineHeight: 40,
borderRadius: 8,
offsetCenter: [0, -10],
fontSize: 46,
fontWeight: "bolder",
formatter: () => {
return this.currentMonitorStatis.aqi.value;
},
color: "#fff",
},
data: [
{
value: Number(this.currentMonitorStatis.aqi.percentage),
},
],
},
],
};
chart.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("aqi-quality-chart"));
});
},
getNoiseData() {
getDeviceTotalStatus({ top_cat: 9 }).then((res) => {
this.pieChartData = res.data;
......@@ -626,17 +464,11 @@ export default {
end_log_time: this.getTime(new Date().getTime()),
}).then((res) => {
this.noiseData = res.data.noise_data;
this.noiseTypes = res.data.aqi_data;
this.renderNoiseChart();
});
getCurrentMonitorStatis().then((res) => {
this.currentMonitorStatis = res.data;
this.$nextTick(() => {
this.renderAqiQualityChart();
});
});
getTodayAqiLineChartData().then((res) => {
this.aqiLineChartData = res.data;
this.totalData = res.data;
this.aqiLineChartData = res.data.pm25_data;
this.$nextTick(() => {
this.renderAQIChart();
});
......@@ -644,13 +476,41 @@ export default {
getWarningMessageList({
start_log_time: this.getTime(new Date().getTime() - 2592000000),
end_log_time: this.getTime(new Date().getTime()),
page: 1,
}).then((res) => {
this.warnings = res.data;
this.warnings = res.data.data;
});
getNoiseDeviceList({ top_cat: 9 }).then((res) => {
this.noiseMonitors = res.data;
if (res.data.length > 0) {
this.changeMonitor(res.data[0], 0);
}
});
},
changeMonitor(monitor, index) {
this.activeIndex = index;
getCurrentMonitorStatis({ device_id: monitor.id }).then((res) => {
this.currentMonitorStatis = res.data;
});
},
changeType(type) {
this.activeType = type;
this.lineChart.dispose();
this.aqiLineChartData = this.totalData[`${type}`];
this.$nextTick(() => {
this.renderAQIChart();
});
},
load() {
if (this.warnings.length == this.page * 10) {
getWarningMessageList({
page: this.page + 1,
}).then((res) => {
this.page += 1;
this.warnings += res.data.data;
});
}
},
},
mounted() {
this.getNoiseData();
......@@ -854,7 +714,13 @@ export default {
text-align: right;
}
}
.monitor-list {
height: 220px;
overflow-y: auto;
}
.noise-monitor {
padding: 16px;
background: rgba(44, 96, 162, 0.2);
font-size: 14px;
color: #c6def9;
margin-bottom: 18px;
......@@ -865,6 +731,14 @@ export default {
&:last-child {
margin-bottom: 0;
}
&:hover {
background: rgba(44, 96, 162, 0.5);
color: #27acfb;
}
&.active {
background: rgba(44, 96, 162, 0.5);
color: #27acfb;
}
}
.warp {
width: 100%;
......@@ -876,4 +750,115 @@ export default {
overflow: hidden;
white-space: nowrap;
}
.warning-table {
font-size: 14px;
text-align: center;
color: #c6def9;
.warning-table-list {
height: 820px;
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-pm25,
.warning-table-pm10,
.warning-table-noise,
.warning-table-wind {
width: 15%;
}
}
#stats-container {
position: relative;
img {
width: 100%;
}
.text {
color: #ffffff;
font-size: 16px;
text-align: center;
}
.value {
font-size: 24px;
text-align: center;
}
.temp {
position: absolute;
left: 11%;
top: 23%;
transform: translateX(-50%);
}
.humidity {
position: absolute;
left: 11%;
bottom: 34%;
transform: translateX(-50%);
}
.windangle {
position: absolute;
right: 11%;
top: 23%;
transform: translateX(50%);
}
.windspeed {
position: absolute;
right: 11%;
bottom: 34%;
transform: translateX(50%);
}
.mid-status {
position: absolute;
left: 50%;
transform: translateX(-50%) translateY(-50%);
top: 49.5%;
line-height: 56px;
font-size: 20px;
text-align: center;
color: #c6def9;
.unit {
font-size: 14px;
margin-left: 6px;
}
.value {
font-size: 24px;
margin-left: 12px;
}
}
}
.filters {
display: flex;
justify-content: space-between;
margin-top: 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
src/components/realname/Index.vue
View file @ 4f6eaeca
......@@ -724,10 +724,10 @@ export default {
position: relative;
.custom-chart {
position: absolute;
width: 30%;
width: 140px;
top: 50%;
transform: translateY(-50%);
left: 13%;
left: 84px;
}
}
#area-chart {
......
src/components/tower/Index.vue
View file @ 4f6eaeca
......@@ -63,7 +63,7 @@
<img src="@/assets/no-message.png" alt="" />
<div>暂无信息~</div>
</div>
<div class="warp" v-else>
<div class="warp" v-else v-infinite-scroll="load">
<div
class="warn-title"
v-for="(warn, index) in warnings"
......@@ -155,6 +155,7 @@ export default {
deviceDialogVisible: false,
deviceData: {},
markerArray: [],
page: 1,
};
},
methods: {
......@@ -396,8 +397,8 @@ export default {
this.renderForceChart();
this.renderDipChart();
});
getTowerWarnings().then((res) => {
this.warnings = res.data;
getTowerWarnings({ page: 1, limit: 20 }).then((res) => {
this.warnings = res.data.data;
});
getBaseInfo().then((res) => {
......@@ -624,19 +625,17 @@ export default {
});
},
resetMapSize() {
let screenWidth =
document.body.clientWidth || document.documentElement.clientWidth;
let defWidth = 1920;
let xScale = screenWidth / defWidth;
let mapContent = document.getElementById("container");
mapContent.style.zoom = 1 / xScale;
mapContent.style.height = xScale * 960 + "px";
load() {
if (this.warnings.length == this.page * 20) {
getTowerWarnings({ page: this.page + 1, limit: 20 }).then((res) => {
this.page += 1;
this.warnings += res.data.data;
});
}
},
},
mounted() {
this.getTowerData();
this.resetMapSize();
},
beforeDestroy() {
clearInterval(this.timer);
......
src/components/unloadingplatform/Index.vue
View file @ 4f6eaeca
<template>
<div id="unloading-platform">
<div class="side-area">
<Title text="设备列表"></Title>
<ShadowContainer>
<div id="platform-description">
<div
class="platforms"
v-for="(building, index) in buildingList"
:key="index"
>
<div class="platform-title">
<img src="@/assets/unloadingplatform/platform.png" alt="" />
{{ building.area_name }}
<span>{{ building.total }}</span>
</div>
</div>
</div>
</ShadowContainer>
<Title text="运行分析"></Title>
<ShadowContainer>
<div id="today-warning-chart" ref="today24hourWarningChart"></div>
</ShadowContainer>
</div>
<div class="mid-area">
<div class="buildingwindow" v-if="buildingWindowVisible">
<div class="building-description">
<img src="@/assets/fallprotection/building.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>
</div>
<div class="recent-open">
最后更新:{{ windowData.latest_record_time }}
</div>
</div>
<div class="swagger-container">
<img class="lt" src="@/assets/lt.png" alt="" />
<img class="rt" src="@/assets/rt.png" alt="" />
<img class="rb" src="@/assets/rb.png" alt="" />
<img class="lb" src="@/assets/lb.png" alt="" />
<div id="amap-container"></div>
</div>
</div>
<div class="side-area">
<Title text="报警信息"></Title>
<ShadowContainer>
<div id="warning-info">
<div>
<div class="warning-info-text">今日报警</div>
<div class="warning-info-num">
{{ fallwarningStatus.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">
{{ fallwarningStatus.un_handle_num }}
</div>
<div class="warning-info-img">
<img src="@/assets/fallprotection/total-no.png" alt="" />
</div>
</div>
<div>
<div class="warning-info-text">累计履责率</div>
<div class="warning-info-num" style="color: #22c3ed">
{{ fallwarningStatus.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>载重：</div>
<div>偏置：</div>
<div>报警内容：</div>
</div>
</div>
</div>
</ShadowContainer>
</div>
</div>
</template>
<script>
import AMapLoader from "@amap/amap-jsapi-loader";
import {
getBaseInfo,
getBuildingList,
get24hourWarningData,
getFallWarningList,
getFallWarningStatus,
getFallWarningTableList,
getDeviceCurrentStatus,
} from "@/api/index";
import platformIcon from "@/assets/unloadingplatform/icon-platform.png";
export default {
name: "FallProtection",
data() {
return {
platformList: [],
AMap: null,
map: null,
mapCenter: [],
buildingList: [],
warning24hourData: [],
fallWarningList: [],
fallwarningStatus: {
today_num: 0,
un_handle_num: 0,
handle_rate: 0,
},
fallwarningTableData: [],
buildingWindowVisible: false,
windowData: {},
};
},
methods: {
initMap() {
AMapLoader.load({
key: "fc00c5b70f67a8414344682f217d4b6e",
version: "1.4.15",
plugins: ["AMap.MarkerClusterer", "AMap.DistrictSearch"],
})
.then((AMap) => {
// 初始化地图
this.AMap = AMap;
this.map = new AMap.Map("amap-container", {
viewMode: "2D",
zoom: 20,
center: this.mapCenter,
resizeEnable: true,
mapStyle: "amap://styles/darkblue",
});
this.map.on("click", (e) => {
this.buildingWindowVisible = false;
});
this.getBuildingList();
})
.catch((e) => {
console.log(e);
});
},
setMarker() {
this.buildingList.map((building) => {
building.device_list.map((device) => {
const mapMarkers = new this.AMap.Marker({
icon: platformIcon,
position: [device.longitude, device.latitude],
offset: new this.AMap.Pixel(-25, -25),
extData: {
markerData: device,
},
});
mapMarkers.setMap(this.map);
mapMarkers.on("click", (e) => {
const markData = e.target.getExtData().markerData;
this.map.setCenter([markData.longitude, markData.latitude]);
this.$nextTick(() => {
this.showDeviceInfo(markData);
});
});
});
});
},
getBuildingList() {
getBuildingList().then((res) => {
this.buildingList = res.data;
this.setMarker();
});
},
showDeviceStatus(item) {
if (item.showDevice) {
item.showDevice = false;
} else {
item.showDevice = true;
}
this.$forceUpdate();
},
showDeviceInfo(device) {
this.buildingWindowVisible = false;
this.map.setCenter([device.longitude, device.latitude]);
getDeviceCurrentStatus({ device_id: device.id }).then((res) => {
this.windowData = { ...device, ...res.data };
console.log(this.windowData);
this.$nextTick(() => {
this.buildingWindowVisible = true;
});
});
},
render24hourWarningChart() {
const xAxisData = this.warning24hourData.map((item) => {
return item.hour;
});
const yAxisData = this.warning24hourData.map((item) => {
return item.num;
});
const chart = this.$echarts.init(this.$refs.today24hourWarningChart);
const option = {
color: ["#ff4544"],
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: {
type: "value",
axisLabel: {
fontSize: "12",
color: "#c6def9",
},
splitNumber: 4,
splitLine: {
lineStyle: {
color: "rgba(95, 120, 144, 0.4)",
},
},
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)",
},
]),
},
},
],
};
chart.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("today-warning-chart"));
});
},
},
mounted() {
getBaseInfo().then((res) => {
this.mapCenter = [res.data.longitude, res.data.latitude];
this.$nextTick(() => {
this.initMap();
});
});
get24hourWarningData().then((res) => {
this.warning24hourData = res.data;
this.$nextTick(() => {
this.render24hourWarningChart();
});
});
getFallWarningList().then((res) => {
this.fallWarningList = res.data;
});
getFallWarningStatus().then((res) => {
this.fallwarningStatus = res.data;
});
getFallWarningTableList().then((res) => {
this.fallwarningTableData = res.data.data;
});
},
};
</script>
<style lang="less" scoped>
#unloading-platform {
padding: 12px 20px;
display: flex;
justify-content: space-between;
}
.side-area {
width: 25%;
}
.mid-area {
width: calc(50% - 40px);
margin: 0 20px;
position: relative;
}
.swagger-container {
position: relative;
.container-img {
width: 100%;
height: 520px;
vertical-align: top;
}
.lt,
.lb,
.rb,
.rt {
position: absolute;
width: 20px;
height: 20px;
}
.lt {
top: -2px;
left: -2px;
}
.lb {
left: -2px;
bottom: -2px;
}
.rb {
right: -2px;
bottom: -2px;
}
.rt {
right: -2px;
top: -2px;
}
}
#amap-container {
width: 100%;
height: 100%;
}
.swagger-container {
width: 100%;
height: 950px;
}
#platform-description {
height: 200px;
overflow-y: scroll;
.platforms {
margin-bottom: 12px;
&:last-child {
margin-bottom: 0;
}
.platform-title {
line-height: 22px;
img {
width: 22px;
vertical-align: top;
}
background: rgba(44, 96, 162, 0.2);
font-size: 14px;
color: #c6def9;
padding: 10px 12px;
cursor: pointer;
span {
float: right;
}
}
.platform-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;
}
}
}
}
#today-warning-chart {
height: 400px;
}
.warning-count {
display: inline-block;
vertical-align: top;
width: 49%;
position: relative;
margin-right: 2%;
&:nth-child(2n) {
margin-right: 0;
}
img {
vertical-align: top;
width: 100%;
}
.warning-info {
position: absolute;
left: 50%;
top: 50%;
transform: translateX(-50%) translateY(-50%);
text-align: center;
.warning-num {
font-size: 24px;
color: #ff6151;
}
.warning-text {
font-size: 14px;
color: #27acfb;
}
}
}
#warning-info {
display: flex;
justify-content: space-between;
text-align: center;
.warning-info-text {
padding-top: 20px;
font-size: 16px;
color: #ffffff;
line-height: 18px;
}
.warning-info-num {
font-size: 24px;
color: #ff6151;
}
.warning-info-img {
position: relative;
transform: translateY(-60px);
margin-bottom: -60px;
img {
width: 80%;
margin: 0 auto;
}
}
}
.warning-table {
font-size: 14px;
text-align: center;
color: #c6def9;
.warning-table-list {
height: 200px;
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%;
}
}
.warning-scroll {
height: 370px;
overflow-y: auto;
}
.buildingwindow {
width: 460px;
position: absolute;
left: 50%;
top: 50%;
transform: translateX(-50%) translateY(-120%);
background: url("@/assets/safecap/cap-window-bg.png") no-repeat;
background-size: 100% 100%;
padding: 20px;
z-index: 1000;
}
.recent-open,
.building-info-text {
font-size: 16px;
color: #c6def9;
line-height: 45px;
}
.building-info {
display: flex;
flex-wrap: wrap;
}
.building-info-text {
width: 50%;
}
.building-description {
line-height: 32px;
font-size: 18px;
color: #c6def9;
padding-bottom: 16px;
border-bottom: 1px solid #7a8fad;
img {
width: 32px;
vertical-align: top;
}
.name {
float: right;
}
.online-status.online {
color: rgba(62, 236, 111, 1);
}
}
::v-deep .amap-icon {
img {
width: 50px;
height: 50px;
}
}
.platform {
img {
width: 20px;
vertical-align: middle;
margin-right: 6px;
}
font-size: 14px;
color: #c6def9;
.platform-title {
background: rgba(44, 96, 162, 0.2);
border-bottom: 1px solid rgba(122, 143, 173, 0.4);
line-height: 40px;
padding: 0 12px;
.status {
float: right;
}
}
.platform-info {
background: rgba(44, 96, 162, 0.1);
display: flex;
justify-content: space-between;
flex-wrap: wrap;
& > div {
width: calc(50% - 48px);
padding: 6px 12px;
}
}
&:hover {
color: #27acfb;
.platform-title,
.platform-info {
background: rgba(44, 96, 162, 0.4);
}
}
}
</style>
\ No newline at end of file
src/router/index.js
View file @ 4f6eaeca
......@@ -11,7 +11,7 @@ import Safecap from "@/components/safecap/Index"
import Management from "@/components/management/Index"
import FallProtection from "@/components/fallprotection/Index"
import UnloadingPlatform from "@/components/unloadingplatform/Index"
import Elevator from "@/components/elevator/Index"
Vue.use(VueRouter)
......@@ -30,6 +30,8 @@ const router = new VueRouter({
{ path: 'concrete', component: Management },
{ path: 'fallprotection', component: FallProtection },
{ path: 'unloadingplatform', component: UnloadingPlatform },
{ path: 'elevator', component: Elevator },
]
},
......
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