Skip to content

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

安全帽页面

parent da344cd0
Show whitespace changes
Inline Side-by-side
Showing with 789 additions and 59 deletions
package-lock.json
View file @ 62a270e3
...@@ -15,6 +15,11 @@ ...@@ -15,6 +15,11 @@
"js-message": "1.0.7" "js-message": "1.0.7"
} }
}, },
"@amap/amap-jsapi-loader": {
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/@amap/amap-jsapi-loader/-/amap-jsapi-loader-1.0.1.tgz",
"integrity": "sha512-nPyLKt7Ow/ThHLkSvn2etQlUzqxmTVgK7bIgwdBRTg2HK5668oN7xVxkaiRe3YZEzGzfV2XgH5Jmu2T73ljejw=="
},
"@ampproject/remapping": { "@ampproject/remapping": {
"version": "2.2.0", "version": "2.2.0",
"resolved": "https://registry.npmmirror.com/@ampproject/remapping/-/remapping-2.2.0.tgz", "resolved": "https://registry.npmmirror.com/@ampproject/remapping/-/remapping-2.2.0.tgz",
......
package.json
View file @ 62a270e3
...@@ -8,6 +8,7 @@ ...@@ -8,6 +8,7 @@
"lint": "vue-cli-service lint" "lint": "vue-cli-service lint"
}, },
"dependencies": { "dependencies": {
"@amap/amap-jsapi-loader": "^1.0.1",
"autoprefixer": "^10.4.14", "autoprefixer": "^10.4.14",
"axios": "^1.3.4", "axios": "^1.3.4",
"core-js": "^3.8.3", "core-js": "^3.8.3",
......
public/index.html
View file @ 62a270e3
...@@ -16,6 +16,14 @@ ...@@ -16,6 +16,14 @@
.el-loading-text { .el-loading-text {
font-size: 24px !important; font-size: 24px !important;
} }
.amap-logo {
display: none !important;
}
.amap-copyright {
opacity: 0 !important;
}
</style> </style>
</head> </head>
......
src/App.vue
View file @ 62a270e3
...@@ -16,22 +16,21 @@ export default { ...@@ -16,22 +16,21 @@ export default {
}, },
methods: { methods: {
getXAccessToken() { getXAccessToken() {
getXAccessToken(localStorage.getItem("token")).then((res) => { if (this.$route.query.token_code != localStorage.getItem("token")) {
getXAccessToken(this.$route.query.token_code).then((res) => {
if (res.status == 200) { if (res.status == 200) {
localStorage.setItem("token", this.$route.query.token_code);
localStorage.setItem("Authorization", res.data.access_token); localStorage.setItem("Authorization", res.data.access_token);
this.$nextTick(() => { this.$nextTick(() => {
this.signIn = true; this.signIn = true;
}); });
} }
}); });
}, } else {
}, this.signIn = true;
beforeCreate() {
console.log(this.$route);
if (this.$route.query.token_code) {
localStorage.setItem("token", this.$route.query.token_code);
} }
}, },
},
mounted() { mounted() {
this.getXAccessToken(); this.getXAccessToken();
}, },
......
src/api/index.js
View file @ 62a270e3
...@@ -20,6 +20,14 @@ export function getBaseData() { ...@@ -20,6 +20,14 @@ export function getBaseData() {
}) })
} }
export function getSecurityData() {
return request({
url: '/pweb/s/project/safe/statis',
method: 'get',
})
}
export function getDeviceStatus() { export function getDeviceStatus() {
return request({ return request({
url: '/pweb/s/project/device/statis', url: '/pweb/s/project/device/statis',
...@@ -51,10 +59,11 @@ export function getInOutData() { ...@@ -51,10 +59,11 @@ export function getInOutData() {
}) })
} }
export function getCurrentAttendance() { export function getCurrentAttendance(params) {
return request({ return request({
url: '/pweb/s/personel/attendance', url: '/pweb/s/personel/attendance',
method: 'get', method: 'get',
params
}) })
} }
export function getPersonAreaStatus() { export function getPersonAreaStatus() {
...@@ -94,10 +103,11 @@ export function getAIdata() { ...@@ -94,10 +103,11 @@ export function getAIdata() {
}) })
} }
export function getWarningList() { export function getWarningList(params) {
return request({ return request({
url: '/pweb/s/aiwarning/list', url: '/pweb/s/aiwarning/list',
method: 'get', method: 'get',
params
}) })
} }
......
src/components/Index.vue
View file @ 62a270e3
...@@ -48,7 +48,7 @@ ...@@ -48,7 +48,7 @@
</div> </div>
</template> </template>
<script> <script>
import { getBaseInfo, getBaseData } from "@/api/index"; import { getBaseInfo } from "@/api/index";
export default { export default {
name: "Index", name: "Index",
data() { data() {
...@@ -57,8 +57,6 @@ export default { ...@@ -57,8 +57,6 @@ export default {
weekDay: "", weekDay: "",
date: "", date: "",
zoom: 1, zoom: 1,
mainTitle:
"绍兴二院兰亭院区(康复医院)工程绍兴二院兰亭院区(康复医院)工程绍兴二院兰亭院区(康复医院)工程绍兴二院兰亭院区(康复医院)工程",
screenDetail: {}, screenDetail: {},
leftNav: [], leftNav: [],
rightNav: [], rightNav: [],
...@@ -130,6 +128,7 @@ export default { ...@@ -130,6 +128,7 @@ export default {
getBaseInfo().then((res) => { getBaseInfo().then((res) => {
console.log(res); console.log(res);
this.screenDetail = res.data; this.screenDetail = res.data;
document.title = res.data.project_name;
if (res.data.menu.length >= 4) { if (res.data.menu.length >= 4) {
this.leftNav = res.data.menu.slice(0, 4); this.leftNav = res.data.menu.slice(0, 4);
this.rightNav = res.data.menu.slice(4, res.data.menu.length); this.rightNav = res.data.menu.slice(4, res.data.menu.length);
......
src/components/construction/Index.vue
View file @ 62a270e3
...@@ -117,7 +117,7 @@ ...@@ -117,7 +117,7 @@
</div> </div>
</div> </div>
</ShadowContainer> </ShadowContainer>
<Title text="安全管理"></Title> <Title text="项目人员"></Title>
<ShadowContainer> <ShadowContainer>
<div class="chart-container"> <div class="chart-container">
<img class="custom-chart" src="@/assets/chart.png" /> <img class="custom-chart" src="@/assets/chart.png" />
...@@ -204,7 +204,7 @@ ...@@ -204,7 +204,7 @@
</div> </div>
</div> </div>
</ShadowContainer> </ShadowContainer>
<Title text="质量问题"> </Title> <Title text="AI预警"> </Title>
<ShadowContainer> <ShadowContainer>
<div class="chart-container"> <div class="chart-container">
<img class="custom-chart" src="@/assets/chart.png" /> <img class="custom-chart" src="@/assets/chart.png" />
...@@ -215,7 +215,12 @@ ...@@ -215,7 +215,12 @@
</div> </div>
</template> </template>
<script> <script>
import { getBaseData, getDeviceStatus, getProgressDetail } from "@/api/index"; import {
getBaseData,
getSecurityData,
getDeviceStatus,
getProgressDetail,
} from "@/api/index";
export default { export default {
name: "Construction", name: "Construction",
data() { data() {
...@@ -247,6 +252,11 @@ export default { ...@@ -247,6 +252,11 @@ export default {
{ value: 735, name: "整改中" }, { value: 735, name: "整改中" },
{ value: 580, name: "已完成" }, { value: 580, name: "已完成" },
], ],
securityPieData: {
wzg: 0,
zgz: 0,
ywc: 0,
},
active: 4, active: 4,
deviceStatus: [ deviceStatus: [
{ {
...@@ -315,13 +325,22 @@ export default { ...@@ -315,13 +325,22 @@ export default {
}, },
methods: { methods: {
renderSecurityChart() { renderSecurityChart() {
const chartData = [
{ 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;
chartData.map((item) => {
total += item.value;
});
const option = { const option = {
title: { title: {
x: "49%", //X坐标 x: "49%", //X坐标
y: "30%", y: "30%",
text: "0", text: total,
subtext: "安全管理", subtext: "项目人员",
textAlign: "center", textAlign: "center",
textStyle: { textStyle: {
//标题样式 //标题样式
...@@ -364,7 +383,7 @@ export default { ...@@ -364,7 +383,7 @@ export default {
}, },
}, },
formatter: (name) => { formatter: (name) => {
let data = this.pieChartData; 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) {
...@@ -390,11 +409,20 @@ export default { ...@@ -390,11 +409,20 @@ export default {
position: "center", position: "center",
}, },
data: this.pieChartData, 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("security-chart"));
});
}, },
renderQualityChart() { renderQualityChart() {
const chart = this.$echarts.init(this.$refs.qualityChart); const chart = this.$echarts.init(this.$refs.qualityChart);
...@@ -403,7 +431,7 @@ export default { ...@@ -403,7 +431,7 @@ export default {
x: "49%", //X坐标 x: "49%", //X坐标
y: "30%", y: "30%",
text: "0", text: "0",
subtext: "质量问题", subtext: "AI预警",
textAlign: "center", textAlign: "center",
textStyle: { textStyle: {
//标题样式 //标题样式
...@@ -484,6 +512,12 @@ export default { ...@@ -484,6 +512,12 @@ export default {
this.screenDetail = res.data; this.screenDetail = res.data;
} }
}); });
getSecurityData().then((res) => {
if (res.status == 200) {
this.securityPieData = res.data;
this.renderSecurityChart();
}
});
getDeviceStatus().then((res) => { getDeviceStatus().then((res) => {
if (res.status == 200) { if (res.status == 200) {
this.deviceStatus = res.data; this.deviceStatus = res.data;
...@@ -497,7 +531,6 @@ export default { ...@@ -497,7 +531,6 @@ export default {
}, },
}, },
mounted() { mounted() {
this.renderSecurityChart();
this.renderQualityChart(); this.renderQualityChart();
this.getBaseData(); this.getBaseData();
this.$nextTick(() => { this.$nextTick(() => {
...@@ -507,7 +540,6 @@ export default { ...@@ -507,7 +540,6 @@ export default {
this.$echarts.getInstanceByDom(entry.target).resize(); this.$echarts.getInstanceByDom(entry.target).resize();
} }
}); });
resizeOb.observe(document.getElementById("security-chart"));
resizeOb.observe(document.getElementById("quality-chart")); resizeOb.observe(document.getElementById("quality-chart"));
}); });
}, },
......
src/components/earlywarning/Index.vue
View file @ 62a270e3
...@@ -47,12 +47,7 @@ ...@@ -47,12 +47,7 @@
<div class="today-warning"> <div class="today-warning">
<Title type="long" text="今日预警"></Title> <Title type="long" text="今日预警"></Title>
<ShadowContainer> <ShadowContainer>
<vue-seamless-scroll <div class="warp">
:data="warningList"
:class-option="classOption"
class="warp"
refs="scroll"
>
<div <div
class="person-check" class="person-check"
v-for="(warns, index) in warningList" v-for="(warns, index) in warningList"
...@@ -80,10 +75,10 @@ ...@@ -80,10 +75,10 @@
</div> </div>
</div> </div>
<div class="status">状态：{{ warns.status_text }}</div> <div class="status">状态：{{ warns.status_text }}</div>
<div class="time">时间：{{ warns.log_time }}</div> <div class="time">时间：{{ warns.log_time_cn }}</div>
</div>
</div> </div>
</div> </div>
</vue-seamless-scroll>
</ShadowContainer> </ShadowContainer>
</div> </div>
<div class="right-container"> <div class="right-container">
...@@ -123,9 +118,20 @@ export default { ...@@ -123,9 +118,20 @@ export default {
{ value: 10, name: "未处理" }, { value: 10, name: "未处理" },
], ],
screenDetail: {}, screenDetail: {},
date: "",
}; };
}, },
methods: { 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;
},
renderWarningChart() { renderWarningChart() {
const xAxisData = this.warningChartData.map((item) => { const xAxisData = this.warningChartData.map((item) => {
return item.date; return item.date;
...@@ -376,9 +382,22 @@ export default { ...@@ -376,9 +382,22 @@ export default {
this.screenDetail = res.data; this.screenDetail = res.data;
} }
}); });
getWarningList().then((res) => { getWarningList({
start_log_time: `${this.date} 00:00:00`,
end_log_time: `${this.date} 23:59:59`,
}).then((res) => {
if (res.status == 200) { if (res.status == 200) {
this.warningList = res.data; this.warningList = [...res.data];
setInterval(() => {
getWarningList({
start_log_time: `${this.date} 00:00:00`,
end_log_time: `${this.date} 23:59:59`,
}).then((res) => {
if (res.status == 200) {
this.warningList = [...res.data];
}
});
}, 60000);
} }
}); });
getMonthWarningStatis().then((res) => { getMonthWarningStatis().then((res) => {
...@@ -391,6 +410,7 @@ export default { ...@@ -391,6 +410,7 @@ export default {
}, },
mounted() { mounted() {
this.getTime();
this.getAIdata(); this.getAIdata();
this.renderTodayChart(); this.renderTodayChart();
this.renderHistoryChart(); this.renderHistoryChart();
......
src/components/noise/Index.vue
View file @ 62a270e3
...@@ -154,12 +154,7 @@ ...@@ -154,12 +154,7 @@
<div class="side-area"> <div class="side-area">
<Title text="报警信息"></Title> <Title text="报警信息"></Title>
<ShadowContainer> <ShadowContainer>
<vue-seamless-scroll <div class="warp">
:data="warnings"
:class-option="classOption"
class="warp"
refs="scroll"
>
<div <div
class="warn-title" class="warn-title"
:style="{ borderColor: '#fff' }" :style="{ borderColor: '#fff' }"
...@@ -169,7 +164,7 @@ ...@@ -169,7 +164,7 @@
<div class="warn-text">{{ warn.text }}</div> <div class="warn-text">{{ warn.text }}</div>
<div class="warn-time">{{ warn.time }}</div> <div class="warn-time">{{ warn.time }}</div>
</div> </div>
</vue-seamless-scroll> </div>
</ShadowContainer> </ShadowContainer>
<Title text="扬尘噪音"></Title> <Title text="扬尘噪音"></Title>
<ShadowContainer> <ShadowContainer>
......
src/components/realname/Index.vue
View file @ 62a270e3
...@@ -85,12 +85,7 @@ ...@@ -85,12 +85,7 @@
<div class="mid-area"> <div class="mid-area">
<Title text="实时考勤"></Title> <Title text="实时考勤"></Title>
<ShadowContainer> <ShadowContainer>
<vue-seamless-scroll <div class="warp">
:data="checkList"
:class-option="classOption"
class="warp"
refs="scroll"
>
<div <div
class="person-check" class="person-check"
v-for="(person, index) in checkList" v-for="(person, index) in checkList"
...@@ -113,14 +108,14 @@ ...@@ -113,14 +108,14 @@
</div> </div>
<div class="person-detail"> <div class="person-detail">
<div class="name"> <div class="name">
<div class="name-text">姓名：{{ person.name }}</div> <div class="name-text">姓名：{{ person.person_name }}</div>
<div class="work-no">工号：{{ person.job_number }}</div> <div class="work-no">工号：{{ person.job_number }}</div>
</div> </div>
<div class="status">状态：{{ person.in_out_status_text }}</div> <div class="status">状态：{{ person.type_str }}</div>
<div class="time">时间：{{ person.latest_record_time }}</div> <div class="time">时间：{{ person.record_time_cn }}</div>
</div>
</div> </div>
</div> </div>
</vue-seamless-scroll>
</ShadowContainer> </ShadowContainer>
<Title text="人员地域分布"></Title> <Title text="人员地域分布"></Title>
<ShadowContainer> <ShadowContainer>
...@@ -205,9 +200,20 @@ export default { ...@@ -205,9 +200,20 @@ export default {
lastweekAttendanceData: [], lastweekAttendanceData: [],
lastweekWorkTypeData: [], lastweekWorkTypeData: [],
industryTypesTotal: 0, industryTypesTotal: 0,
date: "",
}; };
}, },
methods: { 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;
},
renderAreaChart() { renderAreaChart() {
const chart = this.$echarts.init(this.$refs.areaChart); const chart = this.$echarts.init(this.$refs.areaChart);
...@@ -562,9 +568,21 @@ export default { ...@@ -562,9 +568,21 @@ export default {
getRealNameStatus().then((res) => { getRealNameStatus().then((res) => {
this.screenDetail = res.data; this.screenDetail = res.data;
}); });
getCurrentAttendance().then((res) => { getCurrentAttendance({
this.checkList = res.data; start_date: this.date,
end_date: this.date,
}).then((res) => {
this.checkList = [...res.data];
setInterval(() => {
getCurrentAttendance({
start_date: this.date,
end_date: this.date,
}).then((res) => {
this.checkList = [...res.data];
}); });
}, 60000);
});
getPersonAreaStatus().then((res) => { getPersonAreaStatus().then((res) => {
this.personAreaDetail = res.data; this.personAreaDetail = res.data;
this.renderAreaChart(); this.renderAreaChart();
...@@ -594,6 +612,7 @@ export default { ...@@ -594,6 +612,7 @@ export default {
}, },
}, },
mounted() { mounted() {
this.getTime();
this.getRealNameStatus(); this.getRealNameStatus();
}, },
}; };
......
src/components/safecap/Index.vue 0 → 100644
View file @ 62a270e3
<template>
<div id="safecap">
<div class="side-area">
<el-input
prefix-icon="el-icon-search"
placeholder="设备编号/佩戴人员名称"
style="margin-bottom: 20px"
></el-input>
<ShadowContainer>
<div id="cap-list">
<div
class="device-user"
v-for="(device, index) in deviceList"
:key="index"
>
<div>
<img
:src="
device.online
? require('@/assets/safecap/cap-online.png')
: require('@/assets/safecap/cap-offline.png')
"
alt=""
/>
</div>
<div class="device-description">
<div>{{ device.occupation }} / {{ device.name }}</div>
<div>绑定设备：{{ device.deviceCode }}</div>
</div>
<div :class="['status', device.online ? 'online' : 'offline']">
{{ device.status }}
</div>
</div>
</div>
</ShadowContainer>
</div>
<div id="map-area">
<div class="swagger-container">
<img class="lt" src="@/assets/lt.png" alt="" />
<img class="rt" src="@/assets/rt.png" alt="" />
<img class="rb" src="@/assets/rb.png" alt="" />
<img class="lb" src="@/assets/lb.png" alt="" />
<div id="amap-container"></div>
<div class="cap-window" v-if="capWindowVisible">
<div class="cap-description">
<img
:src="
windowData.online
? require('@/assets/safecap/cap-online.png')
: require('@/assets/safecap/cap-offline.png')
"
alt=""
/>
SBBH-38436 /
<span
:class="[
'online-status',
windowData.online ? 'online' : 'offline',
]"
>在线</span
>
<span class="name">经理 / 王一</span>
</div>
<div class="recent-open">最近开机：2023-03-12</div>
<div class="cap-operation">
<div
:class="['cap-button', windowData.online ? 'active' : 'disabled']"
>
<img
:src="
windowData.online
? require('@/assets/safecap/watch-visory.png')
: require('@/assets/safecap/watch-visory-disabled.png')
"
alt=""
/>
<div class="cap-text">查看监控</div>
</div>
<div
:class="['cap-button', windowData.online ? 'active' : 'disabled']"
>
<img
:src="
windowData.online
? require('@/assets/safecap/phone.png')
: require('@/assets/safecap/phone-disabled.png')
"
alt=""
/>
<div class="cap-text">语音通话</div>
</div>
<div
:class="['cap-button', windowData.online ? 'active' : 'disabled']"
>
<img
:src="
windowData.online
? require('@/assets/safecap/current-route.png')
: require('@/assets/safecap/current-route-disabled.png')
"
alt=""
/>
<div class="cap-text">当前轨迹</div>
</div>
<div class="cap-button active">
<img src="@/assets/safecap/history-route.png" alt="" />
<div class="cap-text">历史轨迹</div>
</div>
</div>
</div>
</div>
</div>
<el-dialog
:visible.sync="historyRouteVisible"
append-to-body
title="历史使用记录"
>
<el-form inline :model="searchForm">
<el-form-item label="使用日期">
<el-date-picker
v-model="searchForm.useDate"
type="daterange"
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期"
>
</el-date-picker>
</el-form-item>
<el-form-item label="设备名称">
<el-input v-model="searchForm.deviceName"></el-input>
</el-form-item>
<el-form-item>
<el-button
style="background: rgba(19, 168, 195, 1); color: #fff; border: none"
>查询</el-button
>
</el-form-item>
</el-form>
<el-table :data="tableData" height="550px" stripe>
<el-table-column
label="设备编号"
prop="deviceNo"
align="center"
></el-table-column>
<el-table-column
label="使用职位"
prop="use"
align="center"
width="90"
></el-table-column>
<el-table-column
label="开机时间"
prop="online_time"
align="center"
></el-table-column>
<el-table-column
label="关机时间"
prop="offline_time"
align="center"
></el-table-column>
<el-table-column
label="设备绑定人员"
prop="bind_user"
align="center"
width="110"
></el-table-column>
<el-table-column label="巡查轨迹" align="center" width="90">
<template slot-scope="scope">
<img
@click="showRoute(scope)"
src="@/assets/safecap/current-route.png"
style="width: 20px; cursor: pointer"
/>
</template>
</el-table-column>
</el-table>
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="currentPage"
:page-sizes="[10, 20, 30, 40, 50]"
:page-size="pageSize"
layout="total, sizes, prev, pager, next, jumper"
:total="total"
>
</el-pagination>
</el-dialog>
</div>
</template>
<script>
import AMapLoader from "@amap/amap-jsapi-loader";
import onlineIcon from "@/assets/safecap/online.png";
import offlineIcon from "@/assets/safecap/offline.png";
export default {
name: "Safecap",
data() {
return {
markers: [
{
position: [116.377809, 39.878726],
online: true,
},
{
position: [116.376809, 39.878726],
online: false,
},
],
map: null,
Amap: null, //高德地图amap方法实例
capWindowVisible: true,
windowData: {
online: true,
},
deviceList: [
{
name: "王一",
status: "在线",
online: true,
deviceCode: "SBBH-38436",
occupation: "监理员",
},
{
name: "王一",
status: "离线",
online: false,
deviceCode: "SBBH-38436",
occupation: "监理员",
},
],
searchForm: {
useDate: [],
deviceName: "",
},
historyRouteVisible: false,
total: 100,
pageSize: 10,
currentPage: 1,
tableData: [
{
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: "王一",
},
{
deviceNo: "SBBH-383476",
use: "监理人员",
online_time: "2023-03-12 00:00:00",
offline_time: "2023-03-12 00:00:00",
bind_user: "王一",
},
],
};
},
mounted() {
this.initMap();
},
methods: {
initMap() {
AMapLoader.load({
key: "fc00c5b70f67a8414344682f217d4b6e",
version: "1.4.15",
plugins: ["AMap.MarkerClusterer", "AMap.DistrictSearch"],
})
.then((AMap) => {
// 初始化地图
this.AMap = AMap;
this.map = new AMap.Map("amap-container", {
viewMode: "2D",
zoom: 20,
center: [116.377809, 39.878726],
resizeEnable: true,
mapStyle: "amap://styles/darkblue",
});
this.map.on("click", (e) => {
console.log(e);
this.capWindowVisible = false;
});
this.setMarker();
})
.catch((e) => {
console.log(e);
});
},
setMarker() {
this.markers.map((marker) => {
const mapMarkers = new this.AMap.Marker({
icon: marker.online ? onlineIcon : offlineIcon,
position: marker.position,
offset: new this.AMap.Pixel(-25, -25),
extData: {
markerData: marker,
},
});
mapMarkers.setMap(this.map);
mapMarkers.on("click", (e) => {
// 获取当前marker绑定data
console.log(e.target.getExtData());
this.map.setCenter([e.lnglat.getLng(), e.lnglat.getLat()]);
this.showCapWindow();
});
});
},
showCapWindow() {
this.capWindowVisible = true;
},
handleCurrentChange(current) {
console.log(current);
},
handleSizeChange(size) {
console.log(size);
},
showRoute(row) {
console.log(row);
},
},
};
</script>
<style lang="less" scoped>
#safecap {
padding: 12px 20px;
display: flex;
justify-content: space-between;
.side-area {
width: 20%;
}
#map-area {
width: calc(80% - 20px);
}
}
::v-deep .el-input__inner {
background: rgba(40, 137, 195, 0.2);
border: 1px solid #217ff7;
}
::v-deep .el-input__inner::placeholder {
color: rgba(255, 255, 255, 0.3);
}
.swagger-container {
position: relative;
.container-img {
width: 100%;
height: 520px;
vertical-align: top;
}
.lt,
.lb,
.rb,
.rt {
position: absolute;
width: 20px;
height: 20px;
}
.lt {
top: -2px;
left: -2px;
}
.lb {
left: -2px;
bottom: -2px;
}
.rb {
right: -2px;
bottom: -2px;
}
.rt {
right: -2px;
top: -2px;
}
}
#cap-list {
height: 850px;
overflow-y: scroll;
}
.swagger-container {
width: 100%;
height: 950px;
}
#amap-container {
width: 100%;
height: 100%;
}
::v-deep .amap-icon {
img {
width: 50px;
height: 50px;
}
}
.cap-window {
width: 460px;
height: 170px;
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%;
}
.recent-open {
font-size: 16px;
color: #c6def9;
line-height: 60px;
}
.cap-window {
padding: 24px;
.cap-operation {
display: flex;
justify-content: space-between;
}
.cap-button.disabled {
background: rgba(99, 108, 117, 0.4);
color: #8a939c;
border-color: #8a939c;
cursor: not-allowed;
}
.cap-button {
img {
display: inline;
width: 20px;
}
cursor: pointer;
min-width: 66px;
text-align: center;
display: inline-block;
text-decoration: none;
color: #80a1c6;
padding: 9px 12px;
border: 1px solid #0f5da6;
border-radius: 4px;
line-height: 16px;
font-size: 14px;
background-image: linear-gradient(#0d3353, #183e75);
&.active:hover {
color: #fff;
border-color: #27acfb;
position: relative;
&::after {
position: absolute;
content: "";
width: 0;
height: 0;
bottom: 0px;
left: 50%;
transform: translateX(-50%);
border-right: solid 6px transparent;
border-left: solid 6px transparent;
border-bottom: solid 6px #22c3ed;
filter: drop-shadow(0px -1px 3px rgba(0, 234, 255, 0.8));
}
}
}
.router-link-exact-active.router-link-active {
color: #fff;
border-color: #27acfb;
position: relative;
}
.cap-button.active > div:hover {
&::after {
position: absolute;
content: "";
width: 0;
height: 0;
bottom: 0px;
left: 50%;
transform: translateX(-50%);
border-right: solid 6px transparent;
border-left: solid 6px transparent;
border-bottom: solid 6px #22c3ed;
filter: drop-shadow(0px -1px 3px rgba(0, 234, 255, 0.8));
}
}
}
.cap-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-pagination {
text-align: right;
background: rgba(14, 60, 117, 0.99);
padding: 12px;
.el-pagination__total,
.el-pagination__jump {
color: #fff;
}
.el-input__inner {
color: #fff;
}
button {
background: transparent !important;
}
.el-pagination button:disabled {
background: transparent !important;
}
.el-pager li {
background: transparent;
color: #fff;
}
.el-pager li.active {
color: #409eff;
}
.btn-next,
.btn-prev {
color: #fff !important;
}
button:disabled {
color: #c0c4cc !important;
}
}
::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;
}
::v-deep .el-form-item__label {
color: #fff;
}
::v-deep .el-table,
::v-deep .el-table__expanded-cell {
background: rgba(14, 60, 117, 0.2);
}
::v-deep .el-table--border::after,
::v-deep .el-table--group::after,
::v-deep .el-table::before {
background-color: transparent;
}
::v-deep .el-table tr {
background: transparent;
}
::v-deep .el-table th.el-table__cell {
background: #0e3c75;
}
::v-deep .el-table td.el-table__cell,
::v-deep .el-table th.el-table__cell.is-leaf {
border-color: transparent;
}
::v-deep .el-table__empty-text {
color: #fff;
}
::v-deep .el-table thead {
color: #fff;
}
::v-deep .el-table {
color: #fff;
}
::v-deep
.el-table--enable-row-hover
.el-table__body
tr:hover
> td.el-table__cell {
background: rgba(39, 172, 251, 0.2) !important;
}
::v-deep
.el-table--striped
.el-table__body
tr.el-table__row--striped
td.el-table__cell {
background: rgba(14, 60, 117, 0.4);
}
::v-deep .el-range-input {
background: transparent;
}
::v-deep .el-date-editor .el-range-input {
color: #fff;
}
::v-deep .el-range-separator {
color: #fff !important;
}
::v-deep .el-input__inner {
color: #fff;
}
.device-user {
display: flex;
justify-content: space-between;
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: 20px;
}
.device-description {
line-height: 36px;
width: 70%;
}
.online {
color: #3eec6f;
}
}
</style>
\ No newline at end of file
src/router/index.js
View file @ 62a270e3
...@@ -7,6 +7,8 @@ import EarlyWarning from "@/components/earlywarning/Index" ...@@ -7,6 +7,8 @@ import EarlyWarning from "@/components/earlywarning/Index"
import Supervisory from "@/components/supervisory/Index" import Supervisory from "@/components/supervisory/Index"
import Tower from "@/components/tower/Index" import Tower from "@/components/tower/Index"
import Noise from "@/components/noise/Index" import Noise from "@/components/noise/Index"
import Safecap from "@/components/safecap/Index"
Vue.use(VueRouter) Vue.use(VueRouter)
...@@ -22,6 +24,7 @@ const router = new VueRouter({ ...@@ -22,6 +24,7 @@ const router = new VueRouter({
{ path: 'supervisory', component: Supervisory }, { path: 'supervisory', component: Supervisory },
{ path: 'tower', component: Tower }, { path: 'tower', component: Tower },
{ path: 'noise', component: Noise }, { path: 'noise', component: Noise },
{ path: 'safecap', component: Safecap },
] ]
}, },
......
src/utils/request.js
View file @ 62a270e3
...@@ -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_RESOURCE_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