Skip to content

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

联调安全帽、塔吊检测

parent d73c08a6
Expand all 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
This diff is collapsed.
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
This diff is collapsed.
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
This diff is collapsed.
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