Commit e7939cdb authored by 张牧越's avatar 张牧越

联调安全帽、塔吊检测

parent d73c08a6
NODE_ENV = "development"
Mock: true
VUE_APP_API_URL = "http://qjwl.ythplan.com/"
VUE_APP_RESOURCE_URL= "http://qjwl.ythplan.com/"
\ No newline at end of file
NODE_ENV = "production"
Mock: false
VUE_APP_API_URL = "http://qjwl.ythplan.com/"
\ No newline at end of file
VUE_APP_RESOURCE_URL= "http://qjwl.ythplan.com/"
\ No newline at end of file
......@@ -6,7 +6,7 @@
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>
绍兴二院兰亭院区(康复医院)工程
数字工地大屏
</title>
<style>
.el-icon-loading {
......@@ -24,12 +24,16 @@
.amap-copyright {
opacity: 0 !important;
}
.el-loading-mask {
z-index: 99999 !important;
}
</style>
</head>
<body style="min-width: 1300px;">
<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>
</noscript>
<div id="app"></div>
......
......@@ -20,13 +20,19 @@ export function getBaseData() {
})
}
export function getSecurityData() {
export function getPersonData() {
return request({
url: '/pweb/s/project/safe/statis',
url: '/pweb/s/project/person/statis',
method: 'get',
})
}
export function getAIWarningData() {
return request({
url: '/pweb/s/project/aiwarning/statis',
method: 'get',
})
}
export function getDeviceStatus() {
return request({
......@@ -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) {
return request({
url: '/pweb/s/device/basedata',
url: '/pweb/s/env/device/statis',
method: 'get',
params
})
}
export function getNearMonthStatis(params) {
return request({
url: '/pweb/s/env/statis',
method: 'get',
params
})
}
export function getNoiseDeviceList(params) {
return request({
url: '/pweb/s/device/list',
url: '/pweb/s/env/device/list',
method: 'get',
params
})
......@@ -162,7 +232,14 @@ export function getNoiseDeviceList(params) {
export function getCurrentMonitorStatis() {
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',
})
}
......@@ -174,3 +251,38 @@ export function getWarningMessageList(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
})
}
......@@ -135,7 +135,7 @@
<img class="lb" src="@/assets/lb.png" alt="" />
<el-carousel :interval="5000" arrow="always" height="520px">
<el-carousel-item
v-for="(item, index) in screenDetail.plane_image_arr"
v-for="(item, index) in screenDetail.banner_image_arr"
:key="index"
>
<img class="container-img" :src="item.url" alt="" />
......@@ -217,9 +217,10 @@
<script>
import {
getBaseData,
getSecurityData,
getPersonData,
getDeviceStatus,
getProgressDetail,
getAIWarningData,
} from "@/api/index";
export default {
name: "Construction",
......@@ -252,11 +253,7 @@ export default {
{ value: 735, name: "整改中" },
{ value: 580, name: "已完成" },
],
securityPieData: {
wzg: 0,
zgz: 0,
ywc: 0,
},
personData: [],
active: 4,
deviceStatus: [
{
......@@ -321,15 +318,12 @@ export default {
zgq_num: 0,
step: 0,
},
aiwarningData: [],
};
},
methods: {
renderSecurityChart() {
const chartData = [
{ value: this.securityPieData.wzg, name: "未整改" },
{ value: this.securityPieData.zgz, name: "整改中" },
{ value: this.securityPieData.ywc, name: "已完成" },
];
renderPersonChart() {
const chartData = [...this.personData];
const chart = this.$echarts.init(this.$refs.securityChart);
let total = 0;
chartData.map((item) => {
......@@ -425,12 +419,16 @@ export default {
});
},
renderQualityChart() {
let total = 0;
this.aiwarningData.map((item) => {
total += item.value;
});
const chart = this.$echarts.init(this.$refs.qualityChart);
const option = {
title: {
x: "49%", //X坐标
y: "30%",
text: "0",
text: total,
subtext: "AI预警",
textAlign: "center",
textStyle: {
......@@ -474,7 +472,7 @@ export default {
},
},
formatter: (name) => {
let data = this.pieChartData;
let data = this.aiwarningData;
let target;
for (let i = 0, l = data.length; i < l; i++) {
if (data[i].name == name) {
......@@ -500,11 +498,20 @@ export default {
position: "center",
},
data: this.pieChartData,
data: this.aiwarningData,
},
],
};
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().then((res) => {
......@@ -512,10 +519,10 @@ export default {
this.screenDetail = res.data;
}
});
getSecurityData().then((res) => {
getPersonData().then((res) => {
if (res.status == 200) {
this.securityPieData = res.data;
this.renderSecurityChart();
this.personData = res.data;
this.renderPersonChart();
}
});
getDeviceStatus().then((res) => {
......@@ -528,20 +535,14 @@ export default {
this.progressDetail = res.data;
}
});
getAIWarningData().then((res) => {
this.aiwarningData = res.data;
this.renderQualityChart();
});
},
},
mounted() {
this.renderQualityChart();
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>
......
......@@ -120,8 +120,9 @@ export default {
},
screenDetail: {},
date: "",
todayPieChartData: {},
historyChartData: {},
todayPieChartData: [],
historyChartData: [],
intervalTimer: null,
};
},
methods: {
......@@ -218,10 +219,7 @@ export default {
});
},
renderTodayChart() {
const chartData = [
{ value: this.todayPieChartData.yclCount, name: "已处理" },
{ value: this.todayPieChartData.wclCount, name: "未处理" },
];
const chartData = [...this.todayPieChartData];
const chart = this.$echarts.init(this.$refs.todayChart);
let total = 0;
chartData.map((item) => {
......@@ -280,7 +278,7 @@ export default {
target = data[i].value;
}
}
let arr = [`{a|${name}}`, `{b|${target}} `];
let arr = [`{a|${name}}`, `{b|${target}} `];
return arr.join(" ");
},
},
......@@ -315,10 +313,7 @@ export default {
});
},
renderHistoryChart() {
const chartData = [
{ value: this.historyChartData.yclCount, name: "已处理" },
{ value: this.historyChartData.wclCount, name: "未处理" },
];
const chartData = [...this.historyChartData];
let total = 0;
chartData.map((item) => {
total += item.value;
......@@ -377,7 +372,7 @@ export default {
target = data[i].value;
}
}
let arr = [`{a|${name}}`, `{b|${target}} `];
let arr = [`{a|${name}}`, `{b|${target}} `];
return arr.join(" ");
},
},
......@@ -423,7 +418,7 @@ export default {
}).then((res) => {
if (res.status == 200) {
this.warningList = [...res.data];
setInterval(() => {
this.intervalTimer = setInterval(() => {
getWarningList({
start_log_time: `${this.date} 00:00:00`,
end_log_time: `${this.date} 23:59:59`,
......@@ -460,6 +455,9 @@ export default {
this.getTime();
this.getAIdata();
},
beforeDestroy() {
clearInterval(this.intervalTimer);
},
};
</script>
<style lang="less" scoped>
......
This diff is collapsed.
......@@ -161,6 +161,7 @@
).toFixed(2)
)
"
disabled
></el-slider>
</div>
<div class="i-type-count">
......@@ -196,11 +197,12 @@ export default {
},
screenDetail: {},
inOutData: [],
personAreaDetail: {},
personAreaDetail: [],
lastweekAttendanceData: [],
lastweekWorkTypeData: [],
industryTypesTotal: 0,
date: "",
intervalTimer: null,
};
},
methods: {
......@@ -217,20 +219,7 @@ export default {
renderAreaChart() {
const chart = this.$echarts.init(this.$refs.areaChart);
const areaData = [
{
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 areaData = [...this.personAreaDetail];
const option = {
title: {
x: "27%", //X坐标
......@@ -573,7 +562,7 @@ export default {
end_date: this.date,
}).then((res) => {
this.checkList = [...res.data];
setInterval(() => {
this.intervalTimer = setInterval(() => {
getCurrentAttendance({
start_date: this.date,
end_date: this.date,
......@@ -615,6 +604,9 @@ export default {
this.getTime();
this.getRealNameStatus();
},
beforeDestroy() {
clearInterval(this.intervalTimer);
},
};
</script>
<style lang="less" scoped>
......
This diff is collapsed.
<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
......@@ -70,16 +70,6 @@
</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>
</template>
<script>
......
This diff is collapsed.
<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
......@@ -64,7 +64,7 @@ request.interceptors.response.use(
})
}
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
},
......
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