Skip to content

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

联调安全帽、塔吊检测

parent d73c08a6
Hide whitespace changes
Inline Side-by-side
Showing with 1425 additions and 487 deletions
.env.development
View file @ e7939cdb
NODE_ENV = "development" NODE_ENV = "development"
Mock: true Mock: true
VUE_APP_API_URL = "http://qjwl.ythplan.com/" VUE_APP_API_URL = "http://qjwl.ythplan.com/"
VUE_APP_RESOURCE_URL= "http://qjwl.ythplan.com/"
\ No newline at end of file
.env.production
View file @ e7939cdb
NODE_ENV = "production" NODE_ENV = "production"
Mock: false Mock: false
VUE_APP_API_URL = "http://qjwl.ythplan.com/" VUE_APP_API_URL = "http://qjwl.ythplan.com/"
VUE_APP_RESOURCE_URL= "http://qjwl.ythplan.com/" \ No newline at end of file
\ No newline at end of file
public/index.html
View file @ e7939cdb
...@@ -6,7 +6,7 @@ ...@@ -6,7 +6,7 @@
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0"> <meta name="viewport" content="width=device-width,initial-scale=1.0">
<title> <title>
绍兴二院兰亭院区(康复医院)工程 数字工地大屏
</title> </title>
<style> <style>
.el-icon-loading { .el-icon-loading {
...@@ -24,12 +24,16 @@ ...@@ -24,12 +24,16 @@
.amap-copyright { .amap-copyright {
opacity: 0 !important; opacity: 0 !important;
} }
.el-loading-mask {
z-index: 99999 !important;
}
</style> </style>
</head> </head>
<body style="min-width: 1300px;"> <body style="min-width: 1300px;">
<noscript> <noscript>
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly wi thout JavaScript enabled. <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled.
Please enable it to continue.</strong> Please enable it to continue.</strong>
</noscript> </noscript>
<div id="app"></div> <div id="app"></div>
......
src/api/index.js
View file @ e7939cdb
...@@ -20,13 +20,19 @@ export function getBaseData() { ...@@ -20,13 +20,19 @@ export function getBaseData() {
}) })
} }
export function getSecurityData() { export function getPersonData() {
return request({ return request({
url: '/pweb/s/project/safe/statis', url: '/pweb/s/project/person/statis',
method: 'get', method: 'get',
}) })
} }
export function getAIWarningData() {
return request({
url: '/pweb/s/project/aiwarning/statis',
method: 'get',
})
}
export function getDeviceStatus() { export function getDeviceStatus() {
return request({ return request({
...@@ -141,20 +147,84 @@ export function getMonthWarningStatis() { ...@@ -141,20 +147,84 @@ export function getMonthWarningStatis() {
}) })
} }
// tower
export function getTowerDevice(params) {
return request({
url: '/pweb/s/towercrane/device/statis',
method: 'get',
params
})
}
export function get24hTowerStatis() {
return request({
url: '/pweb/s/towercrane/statis/hour',
method: 'get'
})
}
//noise export function getTowerWarnings() {
return request({
url: '/pweb/s/towercrane/warning/list',
method: 'get',
})
}
export function getTowerMonitors() {
return request({
url: '/pweb/s/towercrane/warning/list',
method: 'get',
})
}
export function getTowerDeviceList() {
return request({
url: '/pweb/s/towercrane/device/list',
method: 'get',
})
}
export function getCurrentTowerStatis(params) {
return request({
url: '/pweb/s/towercrane/device/actual',
method: 'get',
params
})
}
export function getDeviceDetail(deviceId) {
return request({
url: `/pweb/s/towercrane/device/${deviceId}`,
method: 'get',
})
}
export function getDeviceTodayChart(deviceId) {
return request({
url: `/pweb/s/towercrane/device/realtime/statis/${deviceId}`,
method: 'get',
})
}
//noise
export function getDeviceTotalStatus(params) { export function getDeviceTotalStatus(params) {
return request({ return request({
url: '/pweb/s/device/basedata', url: '/pweb/s/env/device/statis',
method: 'get', method: 'get',
params params
}) })
} }
export function getNearMonthStatis(params) {
return request({
url: '/pweb/s/env/statis',
method: 'get',
params
})
}
export function getNoiseDeviceList(params) { export function getNoiseDeviceList(params) {
return request({ return request({
url: '/pweb/s/device/list', url: '/pweb/s/env/device/list',
method: 'get', method: 'get',
params params
}) })
...@@ -162,7 +232,14 @@ export function getNoiseDeviceList(params) { ...@@ -162,7 +232,14 @@ export function getNoiseDeviceList(params) {
export function getCurrentMonitorStatis() { export function getCurrentMonitorStatis() {
return request({ return request({
url: '/pweb/s/env/basedata', url: '/pweb/s/env/realtime/data',
method: 'get',
})
}
export function getTodayAqiLineChartData() {
return request({
url: '/pweb/s/env/statis/hour',
method: 'get', method: 'get',
}) })
} }
...@@ -174,3 +251,38 @@ export function getWarningMessageList(params) { ...@@ -174,3 +251,38 @@ export function getWarningMessageList(params) {
params params
}) })
} }
// safecap
export function getSafeCapDeviceList(params) {
return request({
url: '/pweb/s/safetyhat/device/list',
method: 'get',
params
})
}
export function getSafeCapArea() {
return request({
url: '/pweb/s/safetyhat/project/boundary',
method: 'get',
})
}
export function getSafeCapRoute(params) {
return request({
url: '/pweb/s/safetyhat/patrol/line',
method: 'get',
params
})
}
export function getSafeCapUseRecords(params) {
return request({
url: '/pweb/s/safetyhat/device/use/list',
method: 'get',
params
})
}
src/components/construction/Index.vue
View file @ e7939cdb
...@@ -135,7 +135,7 @@ ...@@ -135,7 +135,7 @@
<img class="lb" src="@/assets/lb.png" alt="" /> <img class="lb" src="@/assets/lb.png" alt="" />
<el-carousel :interval="5000" arrow="always" height="520px"> <el-carousel :interval="5000" arrow="always" height="520px">
<el-carousel-item <el-carousel-item
v-for="(item, index) in screenDetail.plane_image_arr" v-for="(item, index) in screenDetail.banner_image_arr"
:key="index" :key="index"
> >
<img class="container-img" :src="item.url" alt="" /> <img class="container-img" :src="item.url" alt="" />
...@@ -217,9 +217,10 @@ ...@@ -217,9 +217,10 @@
<script> <script>
import { import {
getBaseData, getBaseData,
getSecurityData, getPersonData,
getDeviceStatus, getDeviceStatus,
getProgressDetail, getProgressDetail,
getAIWarningData,
} from "@/api/index"; } from "@/api/index";
export default { export default {
name: "Construction", name: "Construction",
...@@ -252,11 +253,7 @@ export default { ...@@ -252,11 +253,7 @@ export default {
{ value: 735, name: "整改中" }, { value: 735, name: "整改中" },
{ value: 580, name: "已完成" }, { value: 580, name: "已完成" },
], ],
securityPieData: { personData: [],
wzg: 0,
zgz: 0,
ywc: 0,
},
active: 4, active: 4,
deviceStatus: [ deviceStatus: [
{ {
...@@ -321,15 +318,12 @@ export default { ...@@ -321,15 +318,12 @@ export default {
zgq_num: 0, zgq_num: 0,
step: 0, step: 0,
}, },
aiwarningData: [],
}; };
}, },
methods: { methods: {
renderSecurityChart() { renderPersonChart() {
const chartData = [ const chartData = [...this.personData];
{ value: this.securityPieData.wzg, name: "未整改" },
{ value: this.securityPieData.zgz, name: "整改中" },
{ value: this.securityPieData.ywc, name: "已完成" },
];
const chart = this.$echarts.init(this.$refs.securityChart); const chart = this.$echarts.init(this.$refs.securityChart);
let total = 0; let total = 0;
chartData.map((item) => { chartData.map((item) => {
...@@ -425,12 +419,16 @@ export default { ...@@ -425,12 +419,16 @@ export default {
}); });
}, },
renderQualityChart() { renderQualityChart() {
let total = 0;
this.aiwarningData.map((item) => {
total += item.value;
});
const chart = this.$echarts.init(this.$refs.qualityChart); const chart = this.$echarts.init(this.$refs.qualityChart);
const option = { const option = {
title: { title: {
x: "49%", //X坐标 x: "49%", //X坐标
y: "30%", y: "30%",
text: "0", text: total,
subtext: "AI预警", subtext: "AI预警",
textAlign: "center", textAlign: "center",
textStyle: { textStyle: {
...@@ -474,7 +472,7 @@ export default { ...@@ -474,7 +472,7 @@ export default {
}, },
}, },
formatter: (name) => { formatter: (name) => {
let data = this.pieChartData; let data = this.aiwarningData;
let target; let target;
for (let i = 0, l = data.length; i < l; i++) { for (let i = 0, l = data.length; i < l; i++) {
if (data[i].name == name) { if (data[i].name == name) {
...@@ -500,11 +498,20 @@ export default { ...@@ -500,11 +498,20 @@ export default {
position: "center", position: "center",
}, },
data: this.pieChartData, data: this.aiwarningData,
}, },
], ],
}; };
chart.setOption(option); 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("quality-chart"));
});
}, },
getBaseData() { getBaseData() {
getBaseData().then((res) => { getBaseData().then((res) => {
...@@ -512,10 +519,10 @@ export default { ...@@ -512,10 +519,10 @@ export default {
this.screenDetail = res.data; this.screenDetail = res.data;
} }
}); });
getSecurityData().then((res) => { getPersonData().then((res) => {
if (res.status == 200) { if (res.status == 200) {
this.securityPieData = res.data; this.personData = res.data;
this.renderSecurityChart(); this.renderPersonChart();
} }
}); });
getDeviceStatus().then((res) => { getDeviceStatus().then((res) => {
...@@ -528,20 +535,14 @@ export default { ...@@ -528,20 +535,14 @@ export default {
this.progressDetail = res.data; this.progressDetail = res.data;
} }
}); });
getAIWarningData().then((res) => {
this.aiwarningData = res.data;
this.renderQualityChart();
});
}, },
}, },
mounted() { mounted() {
this.renderQualityChart();
this.getBaseData(); this.getBaseData();
this.$nextTick(() => {
// 解决echarts图表放大溢出父容器
const resizeOb = new ResizeObserver((entries) => {
for (const entry of entries) {
this.$echarts.getInstanceByDom(entry.target).resize();
}
});
resizeOb.observe(document.getElementById("quality-chart"));
});
}, },
}; };
</script> </script>
......
src/components/earlywarning/Index.vue
View file @ e7939cdb
...@@ -120,8 +120,9 @@ export default { ...@@ -120,8 +120,9 @@ export default {
}, },
screenDetail: {}, screenDetail: {},
date: "", date: "",
todayPieChartData: {}, todayPieChartData: [],
historyChartData: {}, historyChartData: [],
intervalTimer: null,
}; };
}, },
methods: { methods: {
...@@ -218,10 +219,7 @@ export default { ...@@ -218,10 +219,7 @@ export default {
}); });
}, },
renderTodayChart() { renderTodayChart() {
const chartData = [ const chartData = [...this.todayPieChartData];
{ value: this.todayPieChartData.yclCount, name: "已处理" },
{ value: this.todayPieChartData.wclCount, name: "未处理" },
];
const chart = this.$echarts.init(this.$refs.todayChart); const chart = this.$echarts.init(this.$refs.todayChart);
let total = 0; let total = 0;
chartData.map((item) => { chartData.map((item) => {
...@@ -280,7 +278,7 @@ export default { ...@@ -280,7 +278,7 @@ export default {
target = data[i].value; target = data[i].value;
} }
} }
let arr = [`{a|${name}}`, `{b|${target}} 台`]; let arr = [`{a|${name}}`, `{b|${target}} 条`];
return arr.join(" "); return arr.join(" ");
}, },
}, },
...@@ -315,10 +313,7 @@ export default { ...@@ -315,10 +313,7 @@ export default {
}); });
}, },
renderHistoryChart() { renderHistoryChart() {
const chartData = [ const chartData = [...this.historyChartData];
{ value: this.historyChartData.yclCount, name: "已处理" },
{ value: this.historyChartData.wclCount, name: "未处理" },
];
let total = 0; let total = 0;
chartData.map((item) => { chartData.map((item) => {
total += item.value; total += item.value;
...@@ -377,7 +372,7 @@ export default { ...@@ -377,7 +372,7 @@ export default {
target = data[i].value; target = data[i].value;
} }
} }
let arr = [`{a|${name}}`, `{b|${target}} 台`]; let arr = [`{a|${name}}`, `{b|${target}} 条`];
return arr.join(" "); return arr.join(" ");
}, },
}, },
...@@ -423,7 +418,7 @@ export default { ...@@ -423,7 +418,7 @@ export default {
}).then((res) => { }).then((res) => {
if (res.status == 200) { if (res.status == 200) {
this.warningList = [...res.data]; this.warningList = [...res.data];
setInterval(() => { this.intervalTimer = setInterval(() => {
getWarningList({ getWarningList({
start_log_time: `${this.date} 00:00:00`, start_log_time: `${this.date} 00:00:00`,
end_log_time: `${this.date} 23:59:59`, end_log_time: `${this.date} 23:59:59`,
...@@ -460,6 +455,9 @@ export default { ...@@ -460,6 +455,9 @@ export default {
this.getTime(); this.getTime();
this.getAIdata(); this.getAIdata();
}, },
beforeDestroy() {
clearInterval(this.intervalTimer);
},
}; };
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>
......
src/components/noise/Index.vue
View file @ e7939cdb
...@@ -19,18 +19,19 @@ ...@@ -19,18 +19,19 @@
<ShadowContainer> <ShadowContainer>
<div v-for="(iType, index) in noiseTypes" :key="index" class="i-type"> <div v-for="(iType, index) in noiseTypes" :key="index" class="i-type">
<div class="i-type-name"> <div class="i-type-name">
{{ iType.text }} {{ iType.name }}
</div> </div>
<div class="slider"> <div class="slider">
<el-progress <el-progress
:percentage="50" v-if="!isNaN(iType.value)"
:color="customColors" :percentage="computedPercentage(iType.value, 30)"
:color="iType.color"
:show-text="false" :show-text="false"
define-back-color="#183C6B" define-back-color="#183C6B"
></el-progress> ></el-progress>
</div> </div>
<div class="i-type-count"> <div class="i-type-count">
<span>{{ iType.count }}</span> <span>{{ iType.value }}</span>
天 天
</div> </div>
</div> </div>
...@@ -43,15 +44,13 @@ ...@@ -43,15 +44,13 @@
<div class="lt-status"> <div class="lt-status">
<el-divider></el-divider> <el-divider></el-divider>
<el-progress <el-progress
v-if="currentMonitorStatis.pm10.percentage"
type="circle" type="circle"
:percentage=" :percentage="Number(currentMonitorStatis.pm10.percentage)"
computedPercentage( :format="
currentMonitorStatis.pm10, (value) => formatText(value, currentMonitorStatis.pm10.value)
currentMonitorStatis.pm10_max
)
" "
:format="(value) => formatText(value, currentMonitorStatis.pm10)" :color="currentMonitorStatis.pm10.color"
:color="customMonitorColors"
:stroke-width="12" :stroke-width="12"
></el-progress> ></el-progress>
<div class="status-unit"> <div class="status-unit">
...@@ -59,15 +58,13 @@ ...@@ -59,15 +58,13 @@
</div> </div>
<el-divider></el-divider> <el-divider></el-divider>
<el-progress <el-progress
v-if="currentMonitorStatis.pm25.percentage"
type="circle" type="circle"
:percentage=" :percentage="Number(currentMonitorStatis.pm25.percentage)"
computedPercentage( :format="
currentMonitorStatis.pm25, (value) => formatText(value, currentMonitorStatis.pm25.value)
currentMonitorStatis.pm25_max
)
" "
:format="(value) => formatText(value, currentMonitorStatis.pm25)" :color="currentMonitorStatis.pm25.color"
:color="customMonitorColors"
:stroke-width="12" :stroke-width="12"
></el-progress> ></el-progress>
<div class="status-unit"> <div class="status-unit">
...@@ -77,15 +74,13 @@ ...@@ -77,15 +74,13 @@
<el-divider></el-divider> <el-divider></el-divider>
<el-progress <el-progress
v-if="currentMonitorStatis.noise.percentage"
type="circle" type="circle"
:percentage=" :percentage="Number(currentMonitorStatis.noise.percentage)"
computedPercentage( :format="
currentMonitorStatis.noise, (value) => formatText(value, currentMonitorStatis.noise.value)
currentMonitorStatis.noise_max
)
" "
:format="(value) => formatText(value, currentMonitorStatis.noise)" :color="currentMonitorStatis.noise.color"
:color="customMonitorColors"
:stroke-width="12" :stroke-width="12"
></el-progress> ></el-progress>
<div class="status-unit"> <div class="status-unit">
...@@ -101,16 +96,15 @@ ...@@ -101,16 +96,15 @@
<div class="aqi-level"> <div class="aqi-level">
<div class="aqi-level-line"> <div class="aqi-level-line">
<div <div
v-for="(color, index) in color_arr" v-for="(color, index) in currentMonitorStatis.aqi.level_list"
:key="index" :key="index"
:style="{ background: color }" :style="{ background: color.color }"
></div> ></div>
</div> </div>
<div class="aqi-level-text"> <div class="aqi-level-text">
<div <div
v-for="( v-for="(aqi_level, index) in currentMonitorStatis.aqi
aqi_level, index .level_list"
) in currentMonitorStatis.aqi_level_arr"
:key="index" :key="index"
> >
{{ aqi_level.name }} {{ aqi_level.name }}
...@@ -183,7 +177,7 @@ ...@@ -183,7 +177,7 @@
</ShadowContainer> </ShadowContainer>
</div> </div>
<div class="side-area"> <div class="side-area">
<Title text="报警信息"></Title> <Title text="近30日报警信息"></Title>
<ShadowContainer> <ShadowContainer>
<div class="warp"> <div class="warp">
<div <div
...@@ -225,62 +219,41 @@ ...@@ -225,62 +219,41 @@
<script> <script>
import { import {
getDeviceTotalStatus, getDeviceTotalStatus,
getNearMonthStatis,
getCurrentMonitorStatis, getCurrentMonitorStatis,
getNoiseDeviceList, getNoiseDeviceList,
getTodayAqiLineChartData,
getWarningMessageList, getWarningMessageList,
} from "@/api/index"; } from "@/api/index";
export default { export default {
name: "Noise", name: "Noise",
data() { data() {
return { return {
pieChartData: {}, pieChartData: [],
noiseData: [ noiseData: [],
{ value: 4, name: "达标" }, noiseTypes: [],
{ value: 3, name: "超标" },
],
noiseTypes: [
{ text: "优", count: 13 },
{ text: "良", count: 17 },
{ text: "轻度污染", count: 0 },
{ text: "中度污染", count: 0 },
{ text: "重度污染", count: 0 },
{ text: "严重污染", count: 0 },
],
customColors: [
{ color: "#f56c6c", percentage: 20 },
{ color: "#e6a23c", percentage: 40 },
{ color: "#5cb87a", percentage: 60 },
{ color: "#1989fa", percentage: 80 },
{ color: "#6f7ad3", percentage: 100 },
],
customMonitorColors: [
{ color: "#18D7B9", percentage: 25 },
{ color: "#2CBCFF", percentage: 50 },
{ color: "#FF754C", percentage: 75 },
{ color: "#FF754C", percentage: 100 },
],
warnings: [], warnings: [],
noiseMonitors: [], noiseMonitors: [],
classOption: { classOption: {
singleHeight: 36, singleHeight: 36,
}, },
currentMonitorStatis: { currentMonitorStatis: {
aqi_level_arr: [], aqi: {
level_list: [],
},
pm10: {},
pm25: {},
noise: {},
}, },
color_arr: [ aqiLineChartData: [],
"#18d7b9",
"#feba01",
"#ff754c",
"#f11b1f",
"#6339e6",
"#751dbf",
],
}; };
}, },
computed: {}, computed: {},
methods: { methods: {
computedPercentage(value, max) { computedPercentage(value, max) {
return Number(Number(Number(value) / max) * 100).toFixed(2); return Number(
Number(Number(Number(value) / Number(max)) * 100).toFixed(2)
);
}, },
getTime(ts) { getTime(ts) {
let date = new Date(ts); let date = new Date(ts);
...@@ -299,11 +272,7 @@ export default { ...@@ -299,11 +272,7 @@ export default {
return `${today} ${hour}:${min}:${sec}`; return `${today} ${hour}:${min}:${sec}`;
}, },
renderDeviceChart() { renderDeviceChart() {
const pieData = [ const pieData = [...this.pieChartData];
{ value: this.pieChartData.zxCount, name: "在线设备数量" },
{ value: this.pieChartData.lxCount, name: "离线设备数量" },
{ value: this.pieChartData.bjCount, name: "报警设备数量" },
];
const chart = this.$echarts.init(this.$refs.deviceChart); const chart = this.$echarts.init(this.$refs.deviceChart);
let total = 0; let total = 0;
pieData.map((item) => { pieData.map((item) => {
...@@ -397,6 +366,7 @@ export default { ...@@ -397,6 +366,7 @@ export default {
}); });
}, },
renderNoiseChart() { renderNoiseChart() {
const chartData = [...this.noiseData];
const chart = this.$echarts.init(this.$refs.noiseChart); const chart = this.$echarts.init(this.$refs.noiseChart);
const option = { const option = {
title: { title: {
...@@ -404,7 +374,6 @@ export default { ...@@ -404,7 +374,6 @@ export default {
y: "32%", y: "32%",
subtext: "近30日\n噪音情况", subtext: "近30日\n噪音情况",
textAlign: "center", textAlign: "center",
subtextStyle: { subtextStyle: {
//副标题样式 //副标题样式
fontSize: 16, fontSize: 16,
...@@ -439,7 +408,7 @@ export default { ...@@ -439,7 +408,7 @@ export default {
}, },
}, },
formatter: (name) => { formatter: (name) => {
let data = this.noiseData; let data = chartData;
let target; let target;
for (let i = 0, l = data.length; i < l; i++) { for (let i = 0, l = data.length; i < l; i++) {
if (data[i].name == name) { if (data[i].name == name) {
...@@ -465,13 +434,28 @@ export default { ...@@ -465,13 +434,28 @@ export default {
position: "center", position: "center",
}, },
data: this.noiseData, data: chartData,
}, },
], ],
}; };
chart.setOption(option); 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("noise-chart"));
});
}, },
renderAQIChart() { renderAQIChart() {
const xAxisData = this.aqiLineChartData.map((item) => {
return item.hour;
});
const yAxisData = this.aqiLineChartData.map((item) => {
return item.aqi_value;
});
const chart = this.$echarts.init(this.$refs.aqiChart); const chart = this.$echarts.init(this.$refs.aqiChart);
const option = { const option = {
color: ["#5E97F6"], color: ["#5E97F6"],
...@@ -486,7 +470,7 @@ export default { ...@@ -486,7 +470,7 @@ export default {
}, },
xAxis: { xAxis: {
type: "category", type: "category",
data: ["09:00", "12:00", "13:00", "16:00", "19:00", "22:00", "01:00"], data: xAxisData,
axisTick: { show: false }, axisTick: { show: false },
axisLabel: { axisLabel: {
fontSize: "12", fontSize: "12",
...@@ -508,8 +492,7 @@ export default { ...@@ -508,8 +492,7 @@ export default {
}, },
series: [ series: [
{ {
name: "NJBR-TD-01#", data: yAxisData,
data: [2, 5, 4, 4, 7, 5, 6],
type: "line", type: "line",
smooth: true, smooth: true,
areaStyle: { areaStyle: {
...@@ -528,36 +511,33 @@ export default { ...@@ -528,36 +511,33 @@ export default {
], ],
}; };
chart.setOption(option); 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-chart"));
});
}, },
formatText(value, text) { formatText(value, text) {
return text; return String(text);
}, },
renderAqiQualityChart() { renderAqiQualityChart() {
this.currentMonitorStatis.aqi_level_arr.map((item, index) => {
item.color = this.color_arr[index];
});
const currentLevel = this.currentMonitorStatis.aqi_level_arr.filter(
(item) => {
return (
Number(this.currentMonitorStatis.aqi) >= item.min &&
Number(this.currentMonitorStatis.aqi) < item.max
);
}
)[0];
console.log(currentLevel);
const chart = this.$echarts.init(this.$refs.aqiQualityChart); const chart = this.$echarts.init(this.$refs.aqiQualityChart);
const option = { const option = {
title: { title: {
x: "49%", //X坐标 x: "49%", //X坐标
y: "64%", y: "64%",
subtext: this.currentMonitorStatis.aqi_level_name, subtext: this.currentMonitorStatis.aqi.level,
textAlign: "center", textAlign: "center",
subtextStyle: { subtextStyle: {
//副标题样式 //副标题样式
fontSize: 24, fontSize: 24,
fontWeight: "bolder", fontWeight: "bolder",
lineHeight: 24, lineHeight: 24,
color: currentLevel.color, color: this.currentMonitorStatis.aqi.color,
}, },
}, },
series: [ series: [
...@@ -566,12 +546,10 @@ export default { ...@@ -566,12 +546,10 @@ export default {
center: ["50%", "60%"], center: ["50%", "60%"],
startAngle: 230, startAngle: 230,
endAngle: -50, endAngle: -50,
min: this.currentMonitorStatis.aqi_level_arr[0].min, min: 0,
max: this.currentMonitorStatis.aqi_level_arr[ max: 100,
this.currentMonitorStatis.aqi_level_arr.length - 1
].max,
itemStyle: { itemStyle: {
color: currentLevel.color, color: this.currentMonitorStatis.aqi.color,
}, },
progress: { progress: {
show: true, show: true,
...@@ -614,12 +592,14 @@ export default { ...@@ -614,12 +592,14 @@ export default {
offsetCenter: [0, -10], offsetCenter: [0, -10],
fontSize: 46, fontSize: 46,
fontWeight: "bolder", fontWeight: "bolder",
formatter: "{value}", formatter: () => {
return this.currentMonitorStatis.aqi.value;
},
color: "#fff", color: "#fff",
}, },
data: [ data: [
{ {
value: Number(this.currentMonitorStatis.aqi), value: Number(this.currentMonitorStatis.aqi.percentage),
}, },
], ],
}, },
...@@ -641,12 +621,26 @@ export default { ...@@ -641,12 +621,26 @@ export default {
this.pieChartData = res.data; this.pieChartData = res.data;
this.renderDeviceChart(); this.renderDeviceChart();
}); });
getNearMonthStatis({
start_log_time: this.getTime(new Date().getTime() - 2592000000),
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) => { getCurrentMonitorStatis().then((res) => {
this.currentMonitorStatis = res.data; this.currentMonitorStatis = res.data;
this.renderAqiQualityChart(); this.$nextTick(() => {
this.renderAqiQualityChart();
});
});
getTodayAqiLineChartData().then((res) => {
this.aqiLineChartData = res.data;
this.$nextTick(() => {
this.renderAQIChart();
});
}); });
getWarningMessageList({ getWarningMessageList({
start_log_time: this.getTime(new Date().getTime() - 2592000000), start_log_time: this.getTime(new Date().getTime() - 2592000000),
end_log_time: this.getTime(new Date().getTime()), end_log_time: this.getTime(new Date().getTime()),
...@@ -660,19 +654,6 @@ export default { ...@@ -660,19 +654,6 @@ export default {
}, },
mounted() { mounted() {
this.getNoiseData(); this.getNoiseData();
this.renderNoiseChart();
this.renderAQIChart();
this.$nextTick(() => {
// 解决echarts图表放大溢出父容器
const resizeOb = new ResizeObserver((entries) => {
for (const entry of entries) {
this.$echarts.getInstanceByDom(entry.target).resize();
}
});
resizeOb.observe(document.getElementById("noise-chart"));
resizeOb.observe(document.getElementById("aqi-chart"));
// resizeOb.observe(document.getElementById("aqi-quality-chart"));
});
}, },
}; };
</script> </script>
......
src/components/realname/Index.vue
View file @ e7939cdb
...@@ -161,6 +161,7 @@ ...@@ -161,6 +161,7 @@
).toFixed(2) ).toFixed(2)
) )
" "
disabled
></el-slider> ></el-slider>
</div> </div>
<div class="i-type-count"> <div class="i-type-count">
...@@ -196,11 +197,12 @@ export default { ...@@ -196,11 +197,12 @@ export default {
}, },
screenDetail: {}, screenDetail: {},
inOutData: [], inOutData: [],
personAreaDetail: {}, personAreaDetail: [],
lastweekAttendanceData: [], lastweekAttendanceData: [],
lastweekWorkTypeData: [], lastweekWorkTypeData: [],
industryTypesTotal: 0, industryTypesTotal: 0,
date: "", date: "",
intervalTimer: null,
}; };
}, },
methods: { methods: {
...@@ -217,20 +219,7 @@ export default { ...@@ -217,20 +219,7 @@ export default {
renderAreaChart() { renderAreaChart() {
const chart = this.$echarts.init(this.$refs.areaChart); const chart = this.$echarts.init(this.$refs.areaChart);
const areaData = [ const areaData = [...this.personAreaDetail];
{
value: this.personAreaDetail.city_person_num,
name: this.personAreaDetail.city_name,
},
{
value: this.personAreaDetail.province_in_city_out_person_num,
name: this.personAreaDetail.province_in_city_out_name,
},
{
value: this.personAreaDetail.province_out_person_num,
name: this.personAreaDetail.province_out_name,
},
];
const option = { const option = {
title: { title: {
x: "27%", //X坐标 x: "27%", //X坐标
...@@ -573,7 +562,7 @@ export default { ...@@ -573,7 +562,7 @@ export default {
end_date: this.date, end_date: this.date,
}).then((res) => { }).then((res) => {
this.checkList = [...res.data]; this.checkList = [...res.data];
setInterval(() => { this.intervalTimer = setInterval(() => {
getCurrentAttendance({ getCurrentAttendance({
start_date: this.date, start_date: this.date,
end_date: this.date, end_date: this.date,
...@@ -615,6 +604,9 @@ export default { ...@@ -615,6 +604,9 @@ export default {
this.getTime(); this.getTime();
this.getRealNameStatus(); this.getRealNameStatus();
}, },
beforeDestroy() {
clearInterval(this.intervalTimer);
},
}; };
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>
......
src/components/safecap/Index.vue
View file @ e7939cdb
...@@ -5,6 +5,8 @@ ...@@ -5,6 +5,8 @@
prefix-icon="el-icon-search" prefix-icon="el-icon-search"
placeholder="设备编号/佩戴人员名称" placeholder="设备编号/佩戴人员名称"
style="margin-bottom: 20px" style="margin-bottom: 20px"
v-model="keywords"
@input="searchDevice"
></el-input> ></el-input>
<ShadowContainer> <ShadowContainer>
<div id="cap-list"> <div id="cap-list">
...@@ -12,11 +14,12 @@ ...@@ -12,11 +14,12 @@
class="device-user" class="device-user"
v-for="(device, index) in deviceList" v-for="(device, index) in deviceList"
:key="index" :key="index"
@click="moveToDevice(device)"
> >
<div> <div>
<img <img
:src=" :src="
device.online device.is_online == 1
? require('@/assets/safecap/cap-online.png') ? require('@/assets/safecap/cap-online.png')
: require('@/assets/safecap/cap-offline.png') : require('@/assets/safecap/cap-offline.png')
" "
...@@ -24,11 +27,13 @@ ...@@ -24,11 +27,13 @@
/> />
</div> </div>
<div class="device-description"> <div class="device-description">
<div>{{ device.occupation }} / {{ device.name }}</div> <div>{{ device.person_type }} / {{ device.person_name }}</div>
<div>绑定设备：{{ device.deviceCode }}</div> <div>绑定设备：{{ device.name }}</div>
</div> </div>
<div :class="['status', device.online ? 'online' : 'offline']"> <div
{{ device.status }} :class="['status', device.is_online == 1 ? 'online' : 'offline']"
>
{{ device.is_online_text }}
</div> </div>
</div> </div>
</div> </div>
...@@ -45,30 +50,35 @@ ...@@ -45,30 +50,35 @@
<div class="cap-description"> <div class="cap-description">
<img <img
:src=" :src="
windowData.online windowData.is_online == 1
? require('@/assets/safecap/cap-online.png') ? require('@/assets/safecap/cap-online.png')
: require('@/assets/safecap/cap-offline.png') : require('@/assets/safecap/cap-offline.png')
" "
alt="" alt=""
/> />
SBBH-38436 / {{ windowData.name }} /
<span <span
:class="[ :class="[
'online-status', 'online-status',
windowData.online ? 'online' : 'offline', windowData.is_online == 1 ? 'online' : 'offline',
]" ]"
>在线</span >{{ windowData.is_online_text }}</span
>
<span class="name"
>{{ windowData.person_type }} / {{ windowData.person_name }}</span
> >
<span class="name">经理 / 王一</span>
</div> </div>
<div class="recent-open">最近使用:2023-03-12</div> <div class="recent-open">最近使用:{{ windowData.last_use_time }}</div>
<div class="cap-operation"> <div class="cap-operation">
<div <div
:class="['cap-button', windowData.online ? 'active' : 'disabled']" :class="[
'cap-button',
windowData.is_online == 1 ? 'active' : 'disabled',
]"
> >
<img <img
:src=" :src="
windowData.online windowData.is_online == 1
? require('@/assets/safecap/watch-visory.png') ? require('@/assets/safecap/watch-visory.png')
: require('@/assets/safecap/watch-visory-disabled.png') : require('@/assets/safecap/watch-visory-disabled.png')
" "
...@@ -77,11 +87,14 @@ ...@@ -77,11 +87,14 @@
<div class="cap-text">查看监控</div> <div class="cap-text">查看监控</div>
</div> </div>
<div <div
:class="['cap-button', windowData.online ? 'active' : 'disabled']" :class="[
'cap-button',
windowData.is_online == 1 ? 'active' : 'disabled',
]"
> >
<img <img
:src=" :src="
windowData.online windowData.is_online == 1
? require('@/assets/safecap/phone.png') ? require('@/assets/safecap/phone.png')
: require('@/assets/safecap/phone-disabled.png') : require('@/assets/safecap/phone-disabled.png')
" "
...@@ -90,11 +103,15 @@ ...@@ -90,11 +103,15 @@
<div class="cap-text">语音通话</div> <div class="cap-text">语音通话</div>
</div> </div>
<div <div
:class="['cap-button', windowData.online ? 'active' : 'disabled']" :class="[
'cap-button',
windowData.is_online == 1 ? 'active' : 'disabled',
]"
@click="showCurrentRoute"
> >
<img <img
:src=" :src="
windowData.online windowData.is_online == 1
? require('@/assets/safecap/current-route.png') ? require('@/assets/safecap/current-route.png')
: require('@/assets/safecap/current-route-disabled.png') : require('@/assets/safecap/current-route-disabled.png')
" "
...@@ -102,7 +119,7 @@ ...@@ -102,7 +119,7 @@
/> />
<div class="cap-text">当前轨迹</div> <div class="cap-text">当前轨迹</div>
</div> </div>
<div class="cap-button active"> <div class="cap-button active" @click="showHistory">
<img src="@/assets/safecap/history-route.png" alt="" /> <img src="@/assets/safecap/history-route.png" alt="" />
<div class="cap-text">历史轨迹</div> <div class="cap-text">历史轨迹</div>
</div> </div>
...@@ -118,19 +135,18 @@ ...@@ -118,19 +135,18 @@
<el-form inline :model="searchForm"> <el-form inline :model="searchForm">
<el-form-item label="使用日期"> <el-form-item label="使用日期">
<el-date-picker <el-date-picker
v-model="searchForm.useDate" v-model="searchForm.dateRange"
type="daterange" type="daterange"
range-separator="至" range-separator="至"
start-placeholder="开始日期" start-placeholder="开始日期"
end-placeholder="结束日期" end-placeholder="结束日期"
value-format="yyyy-MM-dd"
> >
</el-date-picker> </el-date-picker>
</el-form-item> </el-form-item>
<el-form-item label="设备名称">
<el-input v-model="searchForm.deviceName"></el-input>
</el-form-item>
<el-form-item> <el-form-item>
<el-button <el-button
@click="searchRecords"
style="background: rgba(19, 168, 195, 1); color: #fff; border: none" style="background: rgba(19, 168, 195, 1); color: #fff; border: none"
>查询</el-button >查询</el-button
> >
...@@ -138,32 +154,20 @@ ...@@ -138,32 +154,20 @@
</el-form> </el-form>
<el-table :data="tableData" height="550px" stripe> <el-table :data="tableData" height="550px" stripe>
<el-table-column
label="设备编号"
prop="deviceNo"
align="center"
></el-table-column>
<el-table-column <el-table-column
label="使用职位" label="使用职位"
prop="use" prop="use_job"
align="center" align="center"
width="90"
></el-table-column> ></el-table-column>
<el-table-column <el-table-column
label="开机时间" label="最近使用时间"
prop="online_time" prop="use_time"
align="center"
></el-table-column>
<el-table-column
label="关机时间"
prop="offline_time"
align="center" align="center"
></el-table-column> ></el-table-column>
<el-table-column <el-table-column
label="设备绑定人员" label="设备绑定人员"
prop="bind_user" prop="bind_person"
align="center" align="center"
width="110"
></el-table-column> ></el-table-column>
<el-table-column label="巡查轨迹" align="center" width="90"> <el-table-column label="巡查轨迹" align="center" width="90">
<template slot-scope="scope"> <template slot-scope="scope">
...@@ -186,83 +190,59 @@ ...@@ -186,83 +190,59 @@
> >
</el-pagination> </el-pagination>
</el-dialog> </el-dialog>
<map-dialog
:userId="currentUserId"
:visible="mapVisible"
@changeVisible="(val) => (mapVisible = val)"
></map-dialog>
</div> </div>
</template> </template>
<script> <script>
import AMapLoader from "@amap/amap-jsapi-loader"; import AMapLoader from "@amap/amap-jsapi-loader";
import onlineIcon from "@/assets/safecap/online.png"; import onlineIcon from "@/assets/safecap/online.png";
import offlineIcon from "@/assets/safecap/offline.png"; import offlineIcon from "@/assets/safecap/offline.png";
import {
getBaseInfo,
getSafeCapDeviceList,
getSafeCapArea,
getSafeCapUseRecords,
} from "@/api/index";
import mapDialog from "./mapDialog.vue";
import _ from "lodash";
export default { export default {
name: "Safecap", name: "Safecap",
components: { mapDialog },
data() { data() {
return { return {
markers: [ keywords: "",
{ markers: [],
position: [116.377809, 39.878726],
online: true,
},
{
position: [116.376809, 39.878726],
online: false,
},
],
map: null, map: null,
Amap: null, //高德地图amap方法实例 Amap: null, //高德地图amap方法实例
capWindowVisible: true, capWindowVisible: false,
windowData: { windowData: {
online: true, online: true,
}, },
deviceList: [ deviceList: [],
{
name: "王一",
status: "在线",
online: true,
deviceCode: "SBBH-38436",
occupation: "监理员",
},
{
name: "王一",
status: "离线",
online: false,
deviceCode: "SBBH-38436",
occupation: "监理员",
},
],
searchForm: { searchForm: {
useDate: [], dateRange: ["", ""],
deviceName: "",
}, },
historyRouteVisible: false, historyRouteVisible: false,
total: 100, total: 0,
pageSize: 10, pageSize: 10,
currentPage: 1, currentPage: 1,
tableData: [ tableData: [],
{ mapCenter: [],
deviceNo: "SBBH-383476", currentUserId: "",
use: "监理人员", mapVisible: false,
online_time: "2023-03-12 00:00:00",
offline_time: "2023-03-12 00:00:00",
bind_user: "王一",
},
{
deviceNo: "SBBH-383476",
use: "监理人员",
online_time: "2023-03-12 00:00:00",
offline_time: "2023-03-12 00:00:00",
bind_user: "王一",
},
{
deviceNo: "SBBH-383476",
use: "监理人员",
online_time: "2023-03-12 00:00:00",
offline_time: "2023-03-12 00:00:00",
bind_user: "王一",
},
],
}; };
}, },
mounted() { mounted() {
this.initMap(); getBaseInfo().then((res) => {
this.mapCenter = [res.data.longitude, res.data.latitude];
this.$nextTick(() => {
this.initMap();
});
});
}, },
methods: { methods: {
initMap() { initMap() {
...@@ -277,7 +257,7 @@ export default { ...@@ -277,7 +257,7 @@ export default {
this.map = new AMap.Map("amap-container", { this.map = new AMap.Map("amap-container", {
viewMode: "2D", viewMode: "2D",
zoom: 20, zoom: 20,
center: [116.377809, 39.878726], center: this.mapCenter,
resizeEnable: true, resizeEnable: true,
mapStyle: "amap://styles/darkblue", mapStyle: "amap://styles/darkblue",
}); });
...@@ -285,17 +265,18 @@ export default { ...@@ -285,17 +265,18 @@ export default {
console.log(e); console.log(e);
this.capWindowVisible = false; this.capWindowVisible = false;
}); });
this.setMarker(); this.getSafeCapDeviceList();
this.getSafeCapArea();
}) })
.catch((e) => { .catch((e) => {
console.log(e); console.log(e);
}); });
}, },
setMarker() { setMarker() {
this.markers.map((marker) => { this.deviceList.map((marker) => {
const mapMarkers = new this.AMap.Marker({ const mapMarkers = new this.AMap.Marker({
icon: marker.online ? onlineIcon : offlineIcon, icon: marker.is_online == 1 ? onlineIcon : offlineIcon,
position: marker.position, position: [marker.longitude, marker.latitude],
offset: new this.AMap.Pixel(-25, -25), offset: new this.AMap.Pixel(-25, -25),
extData: { extData: {
markerData: marker, markerData: marker,
...@@ -303,10 +284,12 @@ export default { ...@@ -303,10 +284,12 @@ export default {
}); });
mapMarkers.setMap(this.map); mapMarkers.setMap(this.map);
mapMarkers.on("click", (e) => { mapMarkers.on("click", (e) => {
// 获取当前marker绑定data const markData = e.target.getExtData().markerData;
console.log(e.target.getExtData()); this.map.setCenter([markData.longitude, markData.latitude]);
this.map.setCenter([e.lnglat.getLng(), e.lnglat.getLat()]); this.windowData = markData;
this.showCapWindow(); this.$nextTick(() => {
this.showCapWindow();
});
}); });
}); });
}, },
...@@ -314,13 +297,99 @@ export default { ...@@ -314,13 +297,99 @@ export default {
this.capWindowVisible = true; this.capWindowVisible = true;
}, },
handleCurrentChange(current) { handleCurrentChange(current) {
console.log(current); getSafeCapUseRecords({
device_id: this.windowData.id,
start_time: this.searchForm.dateRange[0],
end_time: this.searchForm.dateRange[1],
limit: this.pageSize,
page: current,
}).then((res) => {
this.total = res.data.total;
this.tableData = res.data.data;
this.currentPage = current;
});
}, },
handleSizeChange(size) { handleSizeChange(size) {
console.log(size); console.log(size);
getSafeCapUseRecords({
device_id: this.windowData.id,
start_time: this.searchForm.dateRange[0],
end_time: this.searchForm.dateRange[1],
limit: size,
page: 1,
}).then((res) => {
this.total = res.data.total;
this.tableData = res.data.data;
this.currentPage = 1;
});
},
showRoute(scope) {
this.historyRouteVisible = false;
this.currentUserId = scope.row.person_device_bind_id;
this.mapVisible = true;
},
getSafeCapDeviceList() {
getSafeCapDeviceList().then((res) => {
this.deviceList = res.data;
this.setMarker();
});
},
getSafeCapArea() {
getSafeCapArea().then((res) => {
res.data.map((area) => {
area.points.map((item) => {
new this.AMap.Polyline({
path: item.points.map((point) => {
return [Number(point.lng), Number(point.lat)];
}),
map: this.map,
strokeColor: item.color,
strokeStyle: item.lineStyle,
strokeWeight: item.weight,
});
});
});
});
}, },
showRoute(row) { moveToDevice(device) {
console.log(row); this.windowData = device;
this.capWindowVisible = true;
this.map.setCenter([device.longitude, device.latitude]);
},
searchDevice: _.debounce(function () {
getSafeCapDeviceList({ keywords: this.keywords }).then((res) => {
this.deviceList = res.data;
this.setMarker();
});
}, 2000),
showCurrentRoute() {
if (this.windowData.is_online != 1) {
return;
}
this.currentUserId = this.windowData.id;
this.mapVisible = true;
},
showHistory() {
this.historyRouteVisible = true;
this.searchForm.dateRange = ["", ""];
getSafeCapUseRecords({ device_id: this.windowData.id }).then((res) => {
this.total = res.data.total;
this.tableData = res.data.data;
this.currentPage = 1;
});
},
searchRecords() {
getSafeCapUseRecords({
device_id: this.windowData.id,
start_time: this.searchForm.dateRange[0],
end_time: this.searchForm.dateRange[1],
limit: this.pageSize,
page: 1,
}).then((res) => {
this.total = res.data.total;
this.tableData = res.data.data;
this.currentPage = 1;
});
}, },
}, },
}; };
......
src/components/safecap/mapDialog.vue 0 → 100644
View file @ e7939cdb
<template>
<el-dialog
:visible.sync="dialogVisible"
title="使用轨迹"
width="80vw"
top="10vh"
append-to-body
>
<div>
<el-form inline>
<el-form-item label="使用日期">
<el-date-picker
type="date"
v-model="date"
value-format="yyyy-MM-dd"
></el-date-picker>
</el-form-item>
<el-form-item>
<el-select v-model="hour">
<el-option
v-for="hour in 24"
:key="hour"
:label="`${hour}时`"
:value="hour"
></el-option>
</el-select>
</el-form-item>
<el-form-item>
<el-button
@click="search"
style="background: rgba(19, 168, 195, 1); color: #fff; border: none"
>查询</el-button
>
</el-form-item>
</el-form>
<div id="route-map-container"></div>
</div>
</el-dialog>
</template>
<script>
import { getBaseInfo, getSafeCapRoute } from "@/api/index";
import AMapLoader from "@amap/amap-jsapi-loader";
export default {
name: "MapDialog",
props: {
visible: {
type: Boolean,
default: false,
},
userId: {
type: [String, Number],
default: "",
},
},
data() {
return {
date: "",
map: null,
Amap: null, //高德地图amap方法实例
mapCenter: [],
hour: "",
};
},
methods: {
getTime() {
let date = new Date();
let year = date.getFullYear();
let month = date.getMonth() + 1;
let day = date.getDate();
month = month > 9 ? month : "0" + month;
day = day < 10 ? "0" + day : day;
let today = year + "-" + month + "-" + day;
this.date = today;
this.hour =
date.getHours() < 10 ? "0" + date.getHours() : date.getHours();
},
init() {
getBaseInfo().then((res) => {
this.mapCenter = [res.data.longitude, res.data.latitude];
this.$nextTick(() => {
this.initMap();
});
});
},
initMap() {
AMapLoader.load({
key: "fc00c5b70f67a8414344682f217d4b6e",
version: "1.4.15",
plugins: ["AMap.MarkerClusterer", "AMap.DistrictSearch"],
}).then((AMap) => {
// 初始化地图
this.AMap = AMap;
this.map = new AMap.Map("route-map-container", {
viewMode: "2D",
zoom: 20,
center: this.mapCenter,
resizeEnable: true,
mapStyle: "amap://styles/darkblue",
});
this.search();
});
},
search() {
this.map.clearMap();
getSafeCapRoute({
bind_id: this.userId,
start_time: `${this.date} ${this.hour}:00:00`,
}).then((res) => {
const paths = res.data.line.map((point) => {
return [point.longitude, point.latitude];
});
new this.AMap.Polyline({
path: paths,
map: this.map,
showDir: true,
strokeColor: "#3366bb",
strokeWeight: 8,
});
});
},
},
computed: {
dialogVisible: {
get() {
return this.visible;
},
set(val) {
this.$emit("changeVisible", val);
},
},
},
watch: {
dialogVisible(val) {
if (val) {
this.$nextTick(() => {
this.getTime();
this.init();
});
}
},
},
};
</script>
<style lang="less" scoped>
#route-map-container {
width: 100%;
height: 700px;
}
</style>
\ No newline at end of file
src/components/supervisory/Index.vue
View file @ e7939cdb
...@@ -70,16 +70,6 @@ ...@@ -70,16 +70,6 @@
</div> </div>
</div> </div>
</div> </div>
<el-dialog :visible.sync="liveVisible" append-to-body title="查看监控">
<div id="video-container">
<video
id="singleVideo"
autoplay="autoplay"
class="video-js vjs-default-skin"
></video>
</div>
</el-dialog>
</div> </div>
</template> </template>
<script> <script>
......
src/components/tower/Index.vue
View file @ e7939cdb
...@@ -23,125 +23,142 @@ ...@@ -23,125 +23,142 @@
<img class="rt" src="@/assets/rt.png" alt="" /> <img class="rt" src="@/assets/rt.png" alt="" />
<img class="rb" src="@/assets/rb.png" alt="" /> <img class="rb" src="@/assets/rb.png" alt="" />
<img class="lb" src="@/assets/lb.png" alt="" /> <img class="lb" src="@/assets/lb.png" alt="" />
<img class="container-img" src="@/assets/swiper-pic.png" alt="" /> <div id="amap-container"></div>
<div class="towerwindow" v-if="towerWindowVisible">
<div class="tower-description">
<img
:src="
windowData.is_online == 1
? require('@/assets/zhongji_online.png')
: require('@/assets/zhongji.png')
"
alt=""
/>
{{ windowData.device_sn }} /
<span
:class="[
'online-status',
windowData.is_online == 1 ? 'online' : 'offline',
]"
>{{ windowData.is_online_text }}</span
>
<span @click="openDetailDialog" class="name" style="cursor: pointer"
>详情
<img
style="width: 20px; vertical-align: top; margin-top: 4px"
src="@/assets/tower/arrow.png"
alt=""
/>
</span>
</div>
<div class="recent-open">最近使用:{{ windowData.log_time }}</div>
</div>
</div> </div>
<device-dialog
:deviceId="windowData.id"
:deviceData="deviceData"
:visible="deviceDialogVisible"
@changeVisible="(val) => (deviceDialogVisible = val)"
></device-dialog>
</div> </div>
<div class="side-area"> <div class="side-area">
<Title text="报警信息"></Title> <Title text="报警信息"></Title>
<ShadowContainer> <ShadowContainer>
<div class="warn-message"> <div class="warn-message">
<div class="warn-icon"> <div class="warn-icon" v-if="warnings.length == 0">
<img src="@/assets/no-message.png" alt="" /> <img src="@/assets/no-message.png" alt="" />
<div>暂无信息~</div> <div>暂无信息~</div>
</div> </div>
<div class="warp" v-else>
<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"
>
<div class="overflowed">
{{ warn.alarm_content }}
</div>
</el-tooltip>
</div>
<div class="warn-time">{{ warn.log_time }}</div>
</div>
</div>
</div> </div>
</ShadowContainer> </ShadowContainer>
<Title text="维护信息"></Title> <Title text="设备列表"></Title>
<ShadowContainer> <ShadowContainer>
<div class="tower-name">NJBR-TD-02#</div> <div class="monitor-list">
<div class="steps"> <div
<el-steps :active="active" finish-status="success"> class="noise-monitor"
<el-step> v-for="(monitor, index) in monitors"
<template #title> :key="index"
<div class="step-title">2022-02-19</div> @click="moveToMonitor(monitor)"
</template> >
<template #description> <img
<div class="step-description">开工</div> :src="
</template> monitor.is_online == 1
</el-step> ? require('@/assets/zhongji_online.png')
<el-step> : require('@/assets/zhongji.png')
<template #title> "
<div class="step-title">2022-02-19</div> alt=""
</template> />
<template #description> {{ monitor.device_sn }}
<div class="step-description">工程一</div> <span
</template> :style="{
</el-step> color: monitor.is_online_text == '在线' ? '#3eec6f' : '',
<el-step> }"
<template #title> >{{ monitor.is_online_text }}</span
<div class="step-title">2022-02-19</div> >
</template> </div>
<template #description>
<div class="step-description">工程二</div>
</template>
</el-step>
<el-step>
<template #title>
<div class="step-title">2022-02-19</div>
</template>
<template #description>
<div class="step-description">工程二</div>
</template>
</el-step>
<el-step>
<template #title>
<div class="step-title">2022-02-19</div>
</template>
<template #description>
<div class="step-description">工程二</div>
</template>
</el-step>
</el-steps>
</div>
<el-divider></el-divider>
<div class="tower-name">NJBR-TD-02#</div>
<div class="steps">
<el-steps :active="active" finish-status="success">
<el-step>
<template #title>
<div class="step-title">2022-02-19</div>
</template>
<template #description>
<div class="step-description">开工</div>
</template>
</el-step>
<el-step>
<template #title>
<div class="step-title">2022-02-19</div>
</template>
<template #description>
<div class="step-description">工程一</div>
</template>
</el-step>
<el-step>
<template #title>
<div class="step-title">2022-02-19</div>
</template>
<template #description>
<div class="step-description">工程二</div>
</template>
</el-step>
<el-step>
<template #title>
<div class="step-title">2022-02-19</div>
</template>
<template #description>
<div class="step-description">工程二</div>
</template>
</el-step>
</el-steps>
</div> </div>
</ShadowContainer> </ShadowContainer>
</div> </div>
</div> </div>
</template> </template>
<script> <script>
import { getDeviceTotalStatus } from "@/api/index"; import AMapLoader from "@amap/amap-jsapi-loader";
import onlineIcon from "@/assets/tower/online_tower.png";
import offlineIcon from "@/assets/tower/offline_tower.png";
import deviceDialog from "./deviceDialog.vue";
import hooks from "@/assets/tower/hooks.png";
import {
getBaseInfo,
getTowerDevice,
get24hTowerStatis,
getTowerWarnings,
getTowerDeviceList,
getCurrentTowerStatis,
getDeviceDetail,
} from "@/api/index";
export default { export default {
name: "Tower", name: "Tower",
components: { deviceDialog },
data() { data() {
return { return {
pieChartData: {}, pieChartData: [],
active: 3, warnings: [],
monitors: [],
mapCenter: [],
AMap: null,
map: null,
towerWindowVisible: false,
windowData: {},
polyLineArray: [],
timer: null,
deviceDialogVisible: false,
deviceData: {},
markerArray: [],
}; };
}, },
methods: { methods: {
renderDeviceChart() { renderDeviceChart() {
const pieData = [ const pieData = [...this.pieChartData];
{ value: this.pieChartData.zxCount, name: "在线设备数量" },
{ value: this.pieChartData.lxCount, name: "离线设备数量" },
{ value: this.pieChartData.bjCount, name: "报警设备数量" },
];
const chart = this.$echarts.init(this.$refs.deviceChart); const chart = this.$echarts.init(this.$refs.deviceChart);
let total = 0; let total = 0;
pieData.map((item) => { pieData.map((item) => {
...@@ -234,9 +251,21 @@ export default { ...@@ -234,9 +251,21 @@ export default {
}); });
}, },
renderForceChart() { renderForceChart() {
const xAxisData = this.towerData[0].data.map((item) => {
return item.time;
});
const seriesData = this.towerData.map((series) => {
return {
name: series.name,
type: "line",
smooth: true,
data: series.data.map((item) => {
return item.moment_rate;
}),
};
});
const chart = this.$echarts.init(this.$refs.forceChart); const chart = this.$echarts.init(this.$refs.forceChart);
const option = { const option = {
color: ["#FFAF51", "#00a2ff"],
grid: { grid: {
top: 30, top: 30,
bottom: 30, bottom: 30,
...@@ -252,9 +281,12 @@ export default { ...@@ -252,9 +281,12 @@ export default {
color: "rgba(225, 239, 255, 0.7)", color: "rgba(225, 239, 255, 0.7)",
}, },
}, },
tooltip: {
trigger: "item",
},
xAxis: { xAxis: {
type: "category", type: "category",
data: ["09:00", "12:00", "13:00", "16:00", "19:00", "22:00", "01:00"], data: xAxisData,
axisTick: { show: false }, axisTick: { show: false },
axisLabel: { axisLabel: {
fontSize: "12", fontSize: "12",
...@@ -274,51 +306,35 @@ export default { ...@@ -274,51 +306,35 @@ export default {
}, },
}, },
}, },
series: [ series: seriesData,
{
name: "NJBR-TD-01#",
data: [2, 5, 4, 4, 7, 5, 6],
type: "line",
smooth: true,
areaStyle: {
color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: "#FFAF51",
},
{
offset: 1,
color: "rgba(0,0,0,0)",
},
]),
},
},
{
name: "NJBR-TD-02#",
type: "line",
data: [5, 2, 3, 4, 2, 2, 4],
smooth: true,
areaStyle: {
color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: "#00a2ff",
},
{
offset: 1,
color: "rgba(0,0,0,0)",
},
]),
},
},
],
}; };
chart.setOption(option); 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("force-chart"));
});
}, },
renderDipChart() { renderDipChart() {
const xAxisData = this.towerData[0].data.map((item) => {
return item.time;
});
const seriesData = this.towerData.map((series) => {
return {
name: series.name,
type: "line",
smooth: true,
data: series.data.map((item) => {
return item.dip_angle;
}),
};
});
const chart = this.$echarts.init(this.$refs.dipChart); const chart = this.$echarts.init(this.$refs.dipChart);
const option = { const option = {
color: ["#E965C2", "#00FFDE"],
grid: { grid: {
top: 30, top: 30,
bottom: 30, bottom: 30,
...@@ -336,7 +352,7 @@ export default { ...@@ -336,7 +352,7 @@ export default {
}, },
xAxis: { xAxis: {
type: "category", type: "category",
data: ["09:00", "12:00", "13:00", "16:00", "19:00", "22:00", "01:00"], data: xAxisData,
axisTick: { show: false }, axisTick: { show: false },
axisLabel: { axisLabel: {
fontSize: "12", fontSize: "12",
...@@ -356,69 +372,262 @@ export default { ...@@ -356,69 +372,262 @@ export default {
}, },
}, },
}, },
series: [ series: seriesData,
{
name: "NJBR-TD-01#",
data: [2, 5, 4, 4, 7, 5, 6],
type: "line",
smooth: true,
areaStyle: {
color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: "#E965C2",
},
{
offset: 1,
color: "rgba(0,0,0,0)",
},
]),
},
},
{
name: "NJBR-TD-02#",
type: "line",
data: [5, 2, 3, 4, 2, 2, 4],
smooth: true,
areaStyle: {
color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: "#00FFDE",
},
{
offset: 1,
color: "rgba(0,0,0,0)",
},
]),
},
},
],
}; };
chart.setOption(option); 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("dip-chart"));
});
}, },
getTowerData() { getTowerData() {
getDeviceTotalStatus({ top_cat: 1, child_cat: 1 }).then((res) => { getTowerDevice({ top_cat: 1, child_cat: 1 }).then((res) => {
this.pieChartData = res.data; this.pieChartData = res.data;
this.renderDeviceChart(); this.renderDeviceChart();
}); });
get24hTowerStatis().then((res) => {
this.towerData = res.data;
this.renderForceChart();
this.renderDipChart();
});
getTowerWarnings().then((res) => {
this.warnings = res.data;
});
getBaseInfo().then((res) => {
this.mapCenter = [res.data.longitude, res.data.latitude];
this.$nextTick(() => {
this.initMap();
});
});
},
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: 19,
center: this.mapCenter,
resizeEnable: true,
mapStyle: "amap://styles/darkblue",
});
this.map.on("click", (e) => {
console.log(e);
this.towerWindowVisible = false;
});
getTowerDeviceList().then((res) => {
this.monitors = res.data;
this.setMarker();
});
})
.catch((e) => {
console.log(e);
});
},
setMarker() {
this.monitors.map((marker) => {
const mapMarkers = new this.AMap.Marker({
icon: marker.is_online == 1 ? onlineIcon : offlineIcon,
position: [marker.longitude, marker.latitude],
offset: new this.AMap.Pixel(-25, -25),
extData: {
markerData: marker,
},
});
mapMarkers.setMap(this.map);
mapMarkers.on("click", (e) => {
const markData = e.target.getExtData().markerData;
this.map.setCenter([markData.longitude, markData.latitude]);
this.windowData = markData;
this.$nextTick(() => {
this.towerWindowVisible = true;
});
});
const circles = new this.AMap.Circle({
center: [marker.longitude, marker.latitude], // 圆心位置
radius: marker.arm_length, //半径
strokeColor: "#FF33FF", //线颜色
strokeOpacity: 0.5, //线透明度
strokeWeight: 3, //线宽
strokeStyle: "dashed",
fillColor: "#1791fc", //填充色
fillOpacity: 0.2, //填充透明度
});
circles.setMap(this.map);
});
this.getCurrentTowerStatis();
this.timer = setInterval(() => {
this.getCurrentTowerStatis();
}, 60000);
},
moveToMonitor(monitor) {
this.map.setCenter([monitor.longitude, monitor.latitude]);
this.windowData = monitor;
this.towerWindowVisible = true;
},
openDetailDialog() {
getDeviceDetail(this.windowData.id).then((res) => {
this.deviceData = res.data;
this.$nextTick(() => {
this.deviceDialogVisible = true;
});
});
},
getLngAndLat(lng, lat, brng, dist) {
var a = 6378137;
var b = 6356752.3142;
var f = 1 / 298.257223563;
var lon1 = lng * 1;
var lat1 = lat * 1;
var s = dist;
var alpha1 = this.rad(brng - 90);
var sinAlpha1 = Math.sin(alpha1);
var cosAlpha1 = Math.cos(alpha1);
var tanU1 = (1 - f) * Math.tan(this.rad(lat1));
var cosU1 = 1 / Math.sqrt(1 + tanU1 * tanU1),
sinU1 = tanU1 * cosU1;
var sigma1 = Math.atan2(tanU1, cosAlpha1);
var sinAlpha = cosU1 * sinAlpha1;
var cosSqAlpha = 1 - sinAlpha * sinAlpha;
var uSq = (cosSqAlpha * (a * a - b * b)) / (b * b);
var A =
1 + (uSq / 16384) * (4096 + uSq * (-768 + uSq * (320 - 175 * uSq)));
var B = (uSq / 1024) * (256 + uSq * (-128 + uSq * (74 - 47 * uSq)));
var sigma = s / (b * A),
sigmaP = 2 * Math.PI;
while (Math.abs(sigma - sigmaP) > 1e-12) {
var cos2SigmaM = Math.cos(2 * sigma1 + sigma);
var sinSigma = Math.sin(sigma);
var cosSigma = Math.cos(sigma);
var deltaSigma =
B *
sinSigma *
(cos2SigmaM +
(B / 4) *
(cosSigma * (-1 + 2 * cos2SigmaM * cos2SigmaM) -
(B / 6) *
cos2SigmaM *
(-3 + 4 * sinSigma * sinSigma) *
(-3 + 4 * cos2SigmaM * cos2SigmaM)));
sigmaP = sigma;
sigma = s / (b * A) + deltaSigma;
}
var tmp = sinU1 * sinSigma - cosU1 * cosSigma * cosAlpha1;
var lat2 = Math.atan2(
sinU1 * cosSigma + cosU1 * sinSigma * cosAlpha1,
(1 - f) * Math.sqrt(sinAlpha * sinAlpha + tmp * tmp)
);
var lambda = Math.atan2(
sinSigma * sinAlpha1,
cosU1 * cosSigma - sinU1 * sinSigma * cosAlpha1
);
var C = (f / 16) * cosSqAlpha * (4 + f * (4 - 3 * cosSqAlpha));
var L =
lambda -
(1 - C) *
f *
sinAlpha *
(sigma +
C *
sinSigma *
(cos2SigmaM + C * cosSigma * (-1 + 2 * cos2SigmaM * cos2SigmaM)));
var revAz = Math.atan2(sinAlpha, -tmp); // final bearing
console.log(revAz);
var lngLatObj = {
lng: lon1 + this.deg(L),
lat: this.deg(lat2),
};
return lngLatObj;
},
rad(d) {
return (d * Math.PI) / 180.0;
},
deg(d) {
return (d * 180) / Math.PI;
},
getCurrentTowerStatis() {
this.polyLineArray.map((item) => {
this.map.remove(item);
});
this.markerArray.map((item) => {
this.map.remove(item);
});
const monitorIds = this.monitors
.map((item) => {
return item.id;
})
.join(",");
getCurrentTowerStatis({ device_ids: monitorIds }).then((res) => {
res.data.map((monitor) => {
const filterItem = this.monitors.filter((item) => {
return monitor.device_id == item.id;
})[0];
const startPosition = [filterItem.longitude, filterItem.latitude];
const endPosition = [
this.getLngAndLat(
filterItem.longitude,
filterItem.latitude,
monitor.rotation,
filterItem.arm_length
).lng,
this.getLngAndLat(
filterItem.longitude,
filterItem.latitude,
monitor.rotation, //0度是正东
filterItem.arm_length
).lat,
];
this.polyLineArray.push(
new this.AMap.Polyline({
map: this.map,
path: [startPosition, endPosition],
})
);
const markersPosition = [
this.getLngAndLat(
filterItem.longitude,
filterItem.latitude,
monitor.rotation,
monitor.amplitude
).lng,
this.getLngAndLat(
filterItem.longitude,
filterItem.latitude,
monitor.rotation, //0度是正东
monitor.amplitude
).lat,
];
const markers = new this.AMap.Marker({
icon: hooks,
position: markersPosition,
offset: new this.AMap.Pixel(-25, -25),
});
this.markerArray.push(markers);
markers.setMap(this.map);
});
});
}, },
}, },
mounted() { mounted() {
this.getTowerData(); this.getTowerData();
this.renderForceChart(); },
this.renderDipChart(); beforeDestroy() {
this.$nextTick(() => { clearInterval(this.timer);
// 解决echarts图表放大溢出父容器
const resizeOb = new ResizeObserver((entries) => {
for (const entry of entries) {
this.$echarts.getInstanceByDom(entry.target).resize();
}
});
// resizeOb.observe(document.getElementById("device-chart"));
resizeOb.observe(document.getElementById("force-chart"));
resizeOb.observe(document.getElementById("dip-chart"));
});
}, },
}; };
</script> </script>
...@@ -543,6 +752,7 @@ export default { ...@@ -543,6 +752,7 @@ export default {
.warn-message { .warn-message {
position: relative; position: relative;
height: 420px; height: 420px;
overflow-y: auto;
.warn-icon { .warn-icon {
position: absolute; position: absolute;
left: 50%; left: 50%;
...@@ -556,4 +766,139 @@ export default { ...@@ -556,4 +766,139 @@ export default {
} }
} }
} }
.warn-title {
border-left: 2px solid;
padding-left: 12px;
font-size: 14px;
color: #c6def9;
display: flex;
justify-content: space-between;
margin-bottom: 18px;
&:nth-child(3n-2) {
border-color: #fd175d;
}
&:nth-child(3n-1) {
border-color: #ab75ff;
}
&:nth-child(3n) {
border-color: #ffbb37;
}
.warn-text {
width: 60%;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
.warn-time {
width: 40%;
text-align: right;
}
}
.monitor-list {
height: 320px;
overflow-y: auto;
}
.noise-monitor {
font-size: 14px;
color: #c6def9;
line-height: 72px;
background: rgba(44, 96, 162, 0.05);
padding: 0 12px;
margin-bottom: 12px;
cursor: pointer;
&:last-child {
margin-bottom: 0;
}
&:hover {
color: #27acfb;
background: rgba(44, 96, 162, 0.2);
}
img {
width: 30px;
height: 30px;
margin-top: 20px;
margin-right: 12px;
vertical-align: top;
}
.device-description {
line-height: 36px;
width: 70%;
}
.online {
color: #3eec6f;
}
span {
float: right;
}
}
#amap-container {
width: 100%;
height: 100%;
}
.swagger-container {
width: 100%;
height: 100%;
}
::v-deep .amap-icon {
img {
width: 50px;
height: 50px;
}
}
.towerwindow {
width: 460px;
height: 90px;
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;
}
.recent-open {
font-size: 16px;
color: #c6def9;
line-height: 60px;
}
.tower-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 .el-dialog__header {
text-align: center;
padding: 20px;
background: #2268bf;
.el-dialog__title {
color: #fff !important;
}
.el-dialog__headerbtn {
font-size: 24px;
right: 20px;
top: 20px;
}
.el-dialog__headerbtn .el-dialog__close {
color: #fff !important;
}
}
::v-deep .el-dialog__body {
background: #164b8e;
}
</style> </style>
\ No newline at end of file
src/components/tower/deviceDialog.vue 0 → 100644
View file @ e7939cdb
<template>
<el-dialog
:visible.sync="dialogVisible"
title="设备详情"
append-to-body
@opened="openedEvents"
>
<div>
<div class="title-label">
<img src="@/assets/tower/arrow.png" alt="" />
{{ deviceData.device_sn }} /
<span :class="[deviceData.is_online == 1 ? 'online' : '']">{{
deviceData.is_online_text
}}</span>
</div>
<div class="base-info">
<div class="status-area">
<div class="status-window">
<div class="status-value">{{ deviceData.height }}</div>
<div class="status-text">高度/m</div>
</div>
<div class="status-window">
<div class="status-value">{{ deviceData.rotation }}</div>
<div class="status-text">回转/°</div>
</div>
<div class="status-window">
<div class="status-value">{{ deviceData.amplitude }}</div>
<div class="status-text">幅度/m</div>
</div>
<div class="status-window">
<div class="status-value">{{ deviceData.load }}</div>
<div class="status-text">载重/t</div>
</div>
<div class="status-window">
<div class="status-value">{{ deviceData.moment_rate }}</div>
<div class="status-text">力矩百分比/%</div>
</div>
<div class="status-window">
<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"
style="line-height: 20px; font-size: 15px"
>
{{ deviceData.log_time && deviceData.log_time.split(" ")[0] }}
<br />
{{ deviceData.log_time && deviceData.log_time.split(" ")[1] }}
</div>
<div class="status-text">数据更新</div>
</div>
</div>
<div
id="video-container"
v-if="deviceData.camera_live_address_url"
></div>
<div id="video-container-img" v-else>
<img :src="deviceData.image_url" alt="" />
</div>
</div>
<div class="title-label">
<img src="@/assets/tower/arrow.png" alt="" />
今日载重/高度实时数据
</div>
<div id="current-chart" ref="currentChart"></div>
</div>
</el-dialog>
</template>
<script>
import { getDeviceTodayChart } from "@/api/index";
require("vue-video-player/node_modules/video.js/dist/video-js.css");
import videojs from "video.js";
import "videojs-contrib-hls";
export default {
name: "DeviceDialog",
props: {
visible: {
type: Boolean,
default: false,
},
deviceId: {
type: [String, Number],
default: "",
},
deviceData: {
type: Object,
default: () => {
return {};
},
},
},
data() {
return {
todayData: [],
player: null,
};
},
methods: {
renderTodayChart() {
const xAxisData = this.todayData.map((item) => {
return item.time;
});
const loadData = this.todayData.map((item) => {
return item.load;
});
const heightData = this.todayData.map((item) => {
return item.height;
});
const chart = this.$echarts.init(this.$refs.currentChart);
const option = {
grid: {
top: 30,
bottom: 30,
left: 30,
right: 30,
},
legend: {
orient: "horizontal",
x: "center",
y: "top",
textStyle: {
fontSize: 12,
color: "rgba(225, 239, 255, 0.7)",
},
},
tooltip: {
trigger: "item",
},
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)",
},
},
},
series: [
{
name: "吊重",
type: "line",
smooth: true,
data: loadData,
},
{
name: "高度",
type: "line",
smooth: true,
data: heightData,
},
],
};
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("current-chart"));
});
},
openedEvents() {
const myVideoDiv = document.getElementById(`video-container`);
myVideoDiv.innerHTML = `<video
id="singleVideo"
autoplay="autoplay"
class="video-js vjs-default-skin"
></video>`;
const singlePlayer = videojs(`singleVideo`, {
autoplay: true, // 自动播放
controls: true, // 控件显示
preload: "auto", //定义视频加载模式
loop: true, //是否循环播放
});
singlePlayer.src({
src: this.deviceData.camera_live_address_url,
type: "application/x-mpegURL",
});
singlePlayer.play();
this.player = singlePlayer;
getDeviceTodayChart(this.deviceId).then((result) => {
this.todayData = result.data;
this.$nextTick(() => {
this.renderTodayChart();
});
});
},
},
computed: {
dialogVisible: {
get() {
return this.visible;
},
set(val) {
this.$emit("changeVisible", val);
},
},
},
watch: {
dialogVisible(val) {
if (!val) {
this.player && this.player.dispose();
}
},
},
};
</script>
<style lang="less" scoped>
.title-label {
border-bottom: 2px solid #00b7ee;
height: 18px;
font-size: 18px;
color: #c6def9;
line-height: 30px;
min-height: 30px;
margin-bottom: 20px;
img {
width: 16px;
}
}
.base-info {
display: flex;
justify-content: space-between;
}
#video-container {
width: calc(40% - 20px);
height: 200px;
}
.video-container-img {
width: calc(40% - 20px);
height: 200px;
img {
width: 100%;
height: 100%;
vertical-align: top;
}
}
.status-area {
display: flex;
width: 60%;
flex-wrap: wrap;
justify-content: space-between;
}
.status-window {
width: 20%;
border: 1px solid #00b7ee;
box-shadow: 0px 21px 24px 0px rgba(42, 78, 169, 0.4);
border-radius: 4px;
padding: 10px;
background: #113e77;
text-align: center;
margin-bottom: 20px;
.status-value {
font-size: 18px;
color: #13e0ff;
line-height: 40px;
margin-bottom: 12px;
border-bottom: 1px solid #00b7ee;
}
.status-text {
font-size: 14px;
color: #c6def9;
line-height: 20px;
}
}
#current-chart {
width: 100%;
height: 300px;
}
.online {
color: #3eec6f;
}
::v-deep .video-js {
width: 100%;
height: 100%;
}
</style>
\ No newline at end of file
src/utils/request.js
View file @ e7939cdb
...@@ -64,7 +64,7 @@ request.interceptors.response.use( ...@@ -64,7 +64,7 @@ request.interceptors.response.use(
}) })
} }
if (response.data.status == 401) { if (response.data.status == 401) {
window.location.href = process.env.VUE_APP_RESOURCE_URL + 'pweb/m/login?is_screen=1' window.location.href = process.env.VUE_APP_API_URL + 'pweb/m/login?is_screen=1'
} }
return response.data return response.data
}, },
......
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