Skip to content

D
diya
Commit 763cfd7b authored by xinzhedeai's avatar xinzhedeai
Browse files
Options

首页init

parent c9af9e2f
Show whitespace changes
Inline Side-by-side
Showing with 485 additions and 118 deletions
.env.development
View file @ 763cfd7b
# 页面标题 # 页面标题
VUE_APP_TITLE = 边坡结构稳定性监测系统 VUE_APP_TITLE = 井工矿地压动态在线监测及预警系统
# 开发环境配置 # 开发环境配置
ENV = 'development' ENV = 'development'
# 边坡结构稳定性监测系统/开发环境 # 井工矿地压动态在线监测及预警系统 /开发环境
VUE_APP_BASE_API = '/dev-api' VUE_APP_BASE_API = '/dev-api'
#VUE_APP_BASE_API = '/prod-api' #VUE_APP_BASE_API = '/prod-api'
......
.env.production
View file @ 763cfd7b
# 页面标题 # 页面标题
VUE_APP_TITLE = 边坡结构稳定性监测系统 VUE_APP_TITLE = 井工矿地压动态在线监测及预警系统
# 生产环境配置 # 生产环境配置
ENV = 'production' ENV = 'production'
......
.env.staging
View file @ 763cfd7b
# 页面标题 # 页面标题
VUE_APP_TITLE = 边坡结构稳定性监测系统 VUE_APP_TITLE = 井工矿地压动态在线监测及预警系统
NODE_ENV = production NODE_ENV = production
......
README.en.md
View file @ 763cfd7b
# 边坡结构稳定性监测系统 # 井工矿地压动态在线监测及预警系统
#### Description #### Description
{**When you're done, you can delete the content in this README and update the file with details for others getting started with your repository**} {**When you're done, you can delete the content in this README and update the file with details for others getting started with your repository**}
......
src/api/home.js 0 → 100644
View file @ 763cfd7b
import request from '@/utils/request'
export function getAlarmEquipment(params) {
return request({
// url: '/project/equipment/getAlarmEquipment',
// method: 'post',
url: '/project/equipment/getequipmentStatus',
method: 'get',
params
})
}
export function getAbnormalAlarm(params) {
return request({
url: '/project/equipment/getequipmentStatus',
method: 'get',
params
})
}
export function getEquipmentNo() {
return request({
url: '/project/substation/getNo',
method: 'post',
})
}
export function getEquipmenttype() {
return request({
url: '/project/equipment/getEquipmenttype',
method: 'post',
})
}
export function surDisplacementreal() {
return request({
url: '/slope/surDisplacement/real',
method: 'get',
})
}
\ No newline at end of file
src/layout/components/Navbar.vue
View file @ 763cfd7b
...@@ -10,18 +10,17 @@ ...@@ -10,18 +10,17 @@
<ruo-yi-git id="ruoyi-git" class="right-menu-item hover-effect" /> <ruo-yi-git id="ruoyi-git" class="right-menu-item hover-effect" />
</el-tooltip> --> </el-tooltip> -->
<span class="mode" @click.stop="modeChange"> <!-- <span class="mode" @click.stop="modeChange">
<span v-if="mode === 1">日常模式</span> <span v-if="mode === 1">日常模式</span>
<span v-if="mode === 2">紧急模式</span> <span v-if="mode === 2">紧急模式</span>
</span> </span> -->
<el-tooltip content="数据大屏" effect="light" placement="bottom"> <!-- <el-tooltip content="数据大屏" effect="light" placement="bottom">
<i <i
class="bigscreen el-icon-data-analysis right-menu-item hover-effect" class="bigscreen el-icon-data-analysis right-menu-item hover-effect"
@click.stop="toBigscreen" @click.stop="toBigscreen"
></i> ></i>
<!-- <ruo-yi-doc id="ruoyi-doc" class="right-menu-item hover-effect" /> --> </el-tooltip> -->
</el-tooltip>
<!-- <el-tooltip <!-- <el-tooltip
content="大屏" content="大屏"
effect="light" effect="light"
...@@ -81,7 +80,7 @@ import SizeSelect from "@/components/SizeSelect"; ...@@ -81,7 +80,7 @@ import SizeSelect from "@/components/SizeSelect";
import Search from "@/components/HeaderSearch"; import Search from "@/components/HeaderSearch";
import RuoYiGit from "@/components/RuoYi/Git"; import RuoYiGit from "@/components/RuoYi/Git";
import RuoYiDoc from "@/components/RuoYi/Doc"; import RuoYiDoc from "@/components/RuoYi/Doc";
import { modelChangeConfig, modelConfig } from "@/api/lclApi/lclapi"; // import { modelChangeConfig, modelConfig } from "@/api/lclApi/lclapi";
export default { export default {
data() { data() {
return { return {
...@@ -118,36 +117,36 @@ export default { ...@@ -118,36 +117,36 @@ export default {
}, },
}, },
mounted() { mounted() {
this.$nextTick(this.getMode()); // this.$nextTick(this.getMode());
}, },
methods: { methods: {
getMode() { // getMode() {
modelConfig().then((res) => { // modelConfig().then((res) => {
if (res && res.code === 200) { // if (res && res.code === 200) {
this.mode = res.data; // this.mode = res.data;
} // }
}); // });
}, // },
modeChange() { // modeChange() {
if (this.mode === 1) { // if (this.mode === 1) {
modelChangeConfig({ model: 2 }).then((res) => { // modelChangeConfig({ model: 2 }).then((res) => {
if (res && res.code === 200) { // if (res && res.code === 200) {
this.$modal.msgSuccess("模式切换成功"); // this.$modal.msgSuccess("模式切换成功");
this.getMode(); // this.getMode();
} // }
}); // });
} else if (this.mode === 2) { // } else if (this.mode === 2) {
modelChangeConfig({ model: 1 }).then((res) => { // modelChangeConfig({ model: 1 }).then((res) => {
if (res && res.code === 200) { // if (res && res.code === 200) {
this.$modal.msgSuccess("模式切换成功"); // this.$modal.msgSuccess("模式切换成功");
this.getMode(); // this.getMode();
} // }
}); // });
} // }
}, // },
toggleSideBar() { // toggleSideBar() {
this.$store.dispatch("app/toggleSideBar"); // this.$store.dispatch("app/toggleSideBar");
}, // },
async logout() { async logout() {
this.$confirm("确定注销并退出系统吗？", "提示", { this.$confirm("确定注销并退出系统吗？", "提示", {
confirmButtonText: "确定", confirmButtonText: "确定",
......
src/layout/components/Sidebar/Logo.vue
View file @ 763cfd7b
...@@ -68,7 +68,7 @@ export default { ...@@ -68,7 +68,7 @@ export default {
}, },
data() { data() {
return { return {
title: "边坡结构稳定性监测系统", title: "井工矿地压动态在线监测及预警系统 ",
logo: logoImg, logo: logoImg,
}; };
}, },
......
src/views/bigScreen/index.vue
View file @ 763cfd7b
...@@ -433,7 +433,7 @@ Highcharts3D(Highcharts); ...@@ -433,7 +433,7 @@ Highcharts3D(Highcharts);
export default { export default {
data() { data() {
return { return {
screenTitle: "边坡结构稳定性监测系统", screenTitle: "井工矿地压动态在线监测及预警系统 ",
nowDate: "2023-01-01", nowDate: "2023-01-01",
nowTime: "23:59:59", nowTime: "23:59:59",
jxlEquipno: 19, jxlEquipno: 19,
......
src/views/index.vue
View file @ 763cfd7b
<template> <template>
<div class="app-container home"> <div class="data-watch">
<div class="home-right"> <el-card class="box-card">
<div class="home-right-top"> <div class="watch-left">
<p class="title">边坡介绍</p> <img src="http://60.212.188.152:12100/profile/upload/2023/05/10/01_20230510155406A003.jpg" alt="" />
<!-- <p class="cont">边坡名称：威海晶合边坡结构系统</p> --> <div class="watch-topRight">
<p class="cont">边坡名称：边坡结构系统</p> <div class="ex-pic">
<p class="cont">边坡工程安全等级：高级</p> <img src="../assets/images/bmwy/02.png" alt="" />
<p class="cont">边坡危害等级：低级</p> <span>监测示意图</span>
<p class="cont">边皮设计稳定系数：高</p>
<p class="cont">项目概况：</p>
</div> </div>
<div class="home-right-bottom">
<p class="title">边坡介绍</p>
<p class="cont">GB50778-2012 露天煤矿岩土工程勘察规范</p>
<p class="cont">GB51289-2018煤炭工业露天矿边坡工程设计标准</p>
<p class="cont">GB 51214-2017 煤炭工业露天矿边坡工程监测规范</p>
<p class="cont">GB∕T 37697-2019 露天煤矿边坡变形监测技术规范</p>
<p class="cont">MT∕T 1183-2020 露天矿边坡稳定性分析及岩移监测方法</p>
<p class="cont">GB 51016-2014 非煤露天矿边坡工程技术规范</p>
<p class="cont">GB 16423-2020 金属非金属矿山安全规程</p>
<p class="cont">
AQ T 2063-2018 金属非金属露天矿山高陡边坡安全监测技术规范
</p>
</div> </div>
</div> </div>
<div class="watch-right">
<div class="lcl-title">设备列表</div>
<el-form :model="queryParams" ref="queryForm" size="small" :inline="true" label-width="68px">
<el-form-item label="分站编号" prop="equipmentNo">
<el-select
v-model="queryParams.substation"
placeholder="请输入分站编号"
clearable
style="width: 200px"
>
<el-option
v-for="dict in equipmentNoData"
:key="dict.value"
:label="dict.name"
:value="dict.value"
/>
</el-select>
</el-form-item>
<el-form-item label="设备类型" prop="equipmentType">
<el-select
v-model="queryParams.equipmentType"
placeholder="设备类型"
clearable
style="width: 200px"
>
<el-option
v-for="dict in equipmentTypeData"
:key="dict.value"
:label="dict.name"
:value="dict.value"
/>
</el-select>
</el-form-item>
<el-form-item>
<el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
<el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
</el-form-item>
</el-form>
<div id="radar-table">
<el-table
:data="NbwyTableData"
height="230"
border
stripe
style="width: 100%"
:header-cell-style="{
textAlign: 'center',
height: '20px',
}"
:row-style="{ height: '20px' }"
>
<el-table-column align="center" prop="" label="序号">
<template slot-scope="scope">
{{ scope.$index + 1 }}
</template>
</el-table-column>
<el-table-column align="center" prop="equipmentNo" label="设备编号">
</el-table-column>
<el-table-column align="center" prop="equipmentType" label="设备类型">
</el-table-column>
<el-table-column align="center" prop="location" label="安装位置">
</el-table-column>
<el-table-column align="center" prop="status" label="工作状态">
<template slot-scope="scope">
<div :style="{ color: scope.row.status == '网络异常' ? 'red' : '' }">
<i class="el-icon-message-solid"></i>
{{ scope.row.status }}
</div> </div>
</template> </template>
</el-table-column>
</el-table>
</div>
<div class="clb"></div>
<div class="lcl-title" style="margin-top: 20px;">异常报警</div>
<div id="radar-table">
<el-table
:data="abnormalAlarmData"
height="230"
border
stripe
style="width: 100%"
:header-cell-style="{
textAlign: 'center',
height: '20px',
}"
:row-style="{ height: '20px' }"
>
<el-table-column align="center" prop="" label="序号">
<template slot-scope="scope">
{{ scope.$index + 1 }}
</template>
</el-table-column>
<el-table-column align="center" prop="equipmentNo" label="设备编号">
</el-table-column>
<el-table-column align="center" prop="equipmentType" label="设备类型">
</el-table-column>
<el-table-column align="center" prop="status" label="工作状态">
<template slot-scope="scope">
<div :style="{ color: scope.row.status == '网络异常' ? 'red' : '' }">
<i class="el-icon-message-solid"></i>
{{ scope.row.status }}
</div>
</template>
</el-table-column>
<el-table-column align="center" prop="time" label="时间">
</el-table-column>
</el-table>
</div>
<div class="clb"></div>
</div>
<div class="clb"></div>
</el-card>
</div>
</template>
<script> <script>
// import { defineComponent } from "@vue/composition-api";
import ChartsForLine from "@/components/lclEcharts/ChartsForLine";
import { formatDate } from '@/utils/index.js'
import {
getAlarmEquipment,
getAbnormalAlarm,
getEquipmentNo,
getEquipmenttype
} from "@/api/home";
export default { export default {
name: "Index", name: 'home',
dicts: ['sys_normal_disable', 'sys_user_sex'],
data() { data() {
return { return {
// 版本号 // 查询参数
version: "3.8.5", queryParams: {
pageNum: 1,
pageSize: 10,
substation: undefined,
equipmentType: undefined,
},
NbwyTableData: [],
abnormalAlarmData: [],
equipmentNoData: [],
equipmentTypeData: [],
appPicApi: "",
picUrl: "",
}; };
}, },
components: {
ChartsForLine,
},
created() {},
mounted() {
this.$nextTick(() => {
this.getAlarmEquipment()
this.getAbnormalAlarm()
this.getEquipmentNo()
this.getEquipmenttype()
// this.getRealList();
// this.getchart();
// this.appPicApi = this.$store.getters.appPicApi;
// imageList({ monType: 1 }).then((res) => {
// this.picUrl = res.rows[0].image;
// });
});
},
methods: { methods: {
goTarget(href) { /** 搜索按钮操作 */
window.open(href, "_blank"); handleQuery() {
this.queryParams.pageNum = 1;
this.getAlarmEquipment();
},
/** 重置按钮操作 */
resetQuery() {
this.queryParams.substation = ''
this.queryParams.equipmentType = ''
this.handleQuery();
},
getEquipmenttype() {
getEquipmenttype().then((res) => {
if (res && res.code === 200 && res.data) {
this.equipmentTypeData = res.data;
}
});
},
getEquipmentNo() {
getEquipmentNo().then((res) => {
if (res && res.code === 200 && res.data) {
this.equipmentNoData = res.data;
}
});
},
getAbnormalAlarm() {
getAbnormalAlarm().then((res) => {
if (res && res.code === 200 && res.rows) {
this.abnormalAlarmData = res.rows.map((v) => {
return {
...v,
time: formatDate(new Date(), 'yyyy-MM-dd hh:mm:ss')
}
});
}
});
},
getAlarmEquipment() {
getAlarmEquipment(this.queryParams).then((res) => {
if (res && res.code === 200 && res.rows) {
this.NbwyTableData = res.rows;
}
});
},
getchart() {
surDisplacementimage()
.then((res) => {
if (res && res.code === 200 && res.rows) {
this.AllChartData = res.rows;
}
})
.then(() => {
var yFData = this.AllChartData.map((v) => v.value);
var allYdata = [];
var sonData = [];
for (let i = 0; i < yFData.length; i++) {
var yDataitem = [];
for (let j = 0; j < yFData[i].length; j++) {
yDataitem.push(yFData[i][j].value);
}
sonData.push(yDataitem);
}
for (let i = 0; i < sonData.length; i++) {
var hhh = [];
for (let j = 0; j < sonData[i].length; j++) {
hhh.push(sonData[i][j].map((v) => v.disValue));
}
allYdata.push(hhh);
}
this.allYDataForEchart = allYdata;
})
.then(() => {
let that = this;
this.AllChartData = this.AllChartData.map((v, k) => {
console.log(v.value[0]);
return {
name: v.name,
chartId: `nbwy-${k + 1}`,
color: ["#f7af0b", "#05f57a", "#f40852"],
chartType: "line",
axisLabel: "#0562AF",
itemColor: "rgba(42,148,226,1)",
unit: "mm",
bgc: "#fff",
grid: {
left: "10%",
right: "5%",
bottom: "10%",
top: "15%",
z: 22,
},
showlegend: true,
legendItem: v.value.map((item) => item.name),
// xAxisData: that.allXDataForEchart,
xAxisData: v.value[0].value.map((item, kk) => item.createTime),
yData: that.allYDataForEchart[k],
};
});
});
}, },
}, },
}; };
</script> </script>
<style lang="scss" scoped>
.clb {
clear: both;
}
.data-watch {
display: flex;
flex: 1;
flex-direction: column;
width: 100%;
height: 100%;
// border-radius: 10px;
// background-color: teal;
.box-card {
width: 100%;
.watch-left {
width: 45%;
float: left;
position: relative;
> img {
border-radius: 4px;
<style scoped lang="scss"> display: block;
.home { max-height: 100%;
max-width: 100%;
margin: 0 auto;
object-fit: scale-down;
}
.watch-topRight {
width: 20%;
height: 20%;
position: absolute;
right: 10px;
top: 10px;
background-color: rgba(255, 255, 255, 0.5);
border-radius: 10px;
.ex-pic {
position: relative;
width: 100%; width: 100%;
height: 100vh;
background: url("~@/assets/images/index.png") no-repeat center;
background-size: 100%;
.home-right {
width: 30%;
height: 100%; height: 100%;
float: right; > img {
.title { width: 100%;
width: 199px; height: 100%;
height: 46px; object-fit: scale-down;
border: 4px solid #04f4f7;
border-radius: 59px;
font-size: 24px;
font-family: Source Han Sans CN;
font-weight: 500;
color: #04f4f7;
line-height: 37px;
text-align: center;
box-sizing: border-box;
margin: 10px 0;
} }
.home-right-top { > span {
.cont { position: absolute;
margin: 0; left: 10px;
line-height: 48px; top: 0px;
font-size: 28px; font-size: 20px;
font-family: Source Han Sans CN; font-family: Source Han Sans CN;
font-weight: 400; font-weight: 400;
color: #ffffff; color: #333333;
text-shadow: 0px 5px 2px rgba(255, 255, 255, 0.2); }
background: linear-gradient(0deg, #7ed7fb 0%, #ffffff 100%); }
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
} }
} }
.home-right-bottom { .watch-right {
.cont { width: 55%;
margin: 0; padding: 10px;
line-height: 48px; float: left;
.lcl-title {
margin-bottom: 20px;
font-size: 22px; font-size: 22px;
font-family: Source Han Sans CN; font-family: Source Han Sans CN;
font-weight: 500; font-weight: 400;
color: #ffffff; color: #333333;
line-height: 30px;
position: relative;
padding-left: 10px;
&:before {
content: "";
position: absolute;
left: 0px;
top: 4px;
width: 6px;
height: 22px;
background: #0d85f4;
}
}
#radar-table {
width: 100%;
height: 100%;
// border: 1px solid #c7d8ee;
box-sizing: border-box;
::v-deep .el-table--border,
::v-deep .el-table--group {
border: 1px solid #c7d8ee !important;
}
// 设置滚动条的宽度
::v-deep .el-table__body-wrapper::-webkit-scrollbar {
width: 6px;
}
// 设置滚动条的背景色和圆角
::v-deep .el-table__body-wrapper::-webkit-scrollbar-thumb {
background-color: #c7d8ee;
border-radius: 8px;
}
/*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/
::v-deep ::-webkit-scrollbar {
width: 6px;
/*滚动条宽度*/
height: 12px;
/*滚动条高度*/
background-color: white;
}
/*定义滑块 内阴影+圆角*/
::v-deep ::-webkit-scrollbar-thumb {
box-shadow: inset 0 0 0px white;
-webkit-box-shadow: inset 0 0 0px white;
background-color: rgb(193, 193, 193);
/*滚动条的背景颜色*/
border-radius: 20px;
}
//解决表格固定列时的压样式问题
.el-table__fixed {
height: 100px;
width: 12px;
}
}
.chart-container {
width: 49%;
height: 240px;
float: left;
border: 1px solid #0562af;
box-sizing: border-box;
margin: 1% 0 5px 1%;
overflow: hidden;
.chartNbwy {
width: 100%;
height: 200px;
}
.chartNbwyName {
font-size: 20px;
text-align: center;
line-height: 40px;
}
} }
} }
} }
} }
</style> </style>
\ No newline at end of file
src/views/login.vue
View file @ 763cfd7b
<template> <template>
<div class="login" :style="'background-image:url(' + Background + ');'"> <div class="login" :style="'background-image:url(' + Background + ');'">
<div class="headder"> <div class="headder">
<h2>边坡结构稳定性监测系统</h2> <h2>井工矿地压动态在线监测及预警系统 </h2>
<!-- <h4>ONLINE MONITORING SYSTEM FOR TAILINGS POND DATA</h4> --> <!-- <h4>ONLINE MONITORING SYSTEM FOR TAILINGS POND DATA</h4> -->
</div> </div>
<div class="logo-place"> <div class="logo-place">
......
src/views/register.vue
View file @ 763cfd7b
...@@ -6,7 +6,7 @@ ...@@ -6,7 +6,7 @@
:rules="registerRules" :rules="registerRules"
class="register-form" class="register-form"
> >
<h3 class="title">边坡结构稳定性监测系统</h3> <h3 class="title">井工矿地压动态在线监测及预警系统 </h3>
<el-form-item prop="username"> <el-form-item prop="username">
<el-input <el-input
v-model="registerForm.username" v-model="registerForm.username"
......
vue.config.js
View file @ 763cfd7b
...@@ -7,8 +7,8 @@ function resolve(dir) { ...@@ -7,8 +7,8 @@ function resolve(dir) {
const CompressionPlugin = require('compression-webpack-plugin') const CompressionPlugin = require('compression-webpack-plugin')
// const name = process.env.VUE_APP_TITLE || '边坡结构稳定性监测系统' // 网页标题 // const name = process.env.VUE_APP_TITLE || '井工矿地压动态在线监测及预警系统 ' // 网页标题
const name = '边坡结构稳定性监测系统' // 网页标题 const name = '井工矿地压动态在线监测及预警系统 ' // 网页标题
const port = process.env.port || process.env.npm_config_port || 12100 // 端口 const port = process.env.port || process.env.npm_config_port || 12100 // 端口
......
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