Skip to content

W
web-monitor
Commit abc46f41 authored by dupengyu's avatar dupengyu
Browse files
Options

- 轮询管理 

- 打印
- 设备添加限制
parent 97087310
Show whitespace changes
Inline Side-by-side
Showing with 215 additions and 96 deletions
package.json
View file @ abc46f41
...@@ -30,6 +30,7 @@ ...@@ -30,6 +30,7 @@
"ssh2": "^1.6.0", "ssh2": "^1.6.0",
"util": "^0.12.4", "util": "^0.12.4",
"vue": "2.6.10", "vue": "2.6.10",
"vue-print-nb": "^1.7.5",
"vue-router": "3.0.6", "vue-router": "3.0.6",
"vuex": "3.1.0" "vuex": "3.1.0"
}, },
......
src/App.vue
View file @ abc46f41
...@@ -22,39 +22,39 @@ ...@@ -22,39 +22,39 @@
</template> </template>
<script> <script>
import { receiveMessage } from '@/utils/websocket' import { receiveMessage } from "@/utils/websocket";
import socket from '@/utils/websocket' import socket from "@/utils/websocket";
import { mapState } from 'vuex' import { mapState } from "vuex";
import EventBus from '@/utils/bus' import EventBus from "@/utils/bus";
export default { export default {
name: 'App', name: "App",
data() { data() {
return { return {
websocket: null, websocket: null,
tflag: false, tflag: false,
msg: '', msg: "",
alevel: { alevel: {
color: '' color: "",
}, },
audioUrl: '/assets/audio/urgent.wav', audioUrl: "/assets/audio/urgent.wav",
audioObj: { audioObj: {
'一般': 'commonly.wav', 一般: "commonly.wav",
'重要': 'importang.wav', 重要: "importang.wav",
'紧急': 'urgent.wav', 紧急: "urgent.wav",
'连接异常': 'urgent.wav' 连接异常: "urgent.wav",
} },
} };
}, },
computed: { computed: {
...mapState('user', ['userBaseInfo', 'token']), ...mapState("user", ["userBaseInfo", "token"]),
...mapState('alarm', ['cableList', 'deviceList']), ...mapState("alarm", ["cableList", "deviceList"]),
usertoken() { usertoken() {
return this.token return this.token;
} },
}, },
watch: { watch: {
$route(to, from) { $route(to, from) {
if (to.path === '/login') { if (to.path === "/login") {
setTimeout(this.closeWebsocket(), 300); setTimeout(this.closeWebsocket(), 300);
} }
}, },
...@@ -62,13 +62,13 @@ export default { ...@@ -62,13 +62,13 @@ export default {
immediate: true, immediate: true,
handler(newV) { handler(newV) {
if (newV) { if (newV) {
if (newV !== '') { if (newV !== "") {
this.websocket = socket({ onmessage: this.receiveMessage }); this.websocket = socket({ onmessage: this.receiveMessage });
} else { } else {
this.closeWebsocket(); this.closeWebsocket();
} }
} }
} },
}, },
cableList: { cableList: {
handler(newV) { handler(newV) {
...@@ -76,67 +76,67 @@ export default { ...@@ -76,67 +76,67 @@ export default {
setTimeout(() => { setTimeout(() => {
this.$refs.audio.play(); this.$refs.audio.play();
this.$refs.audio.loop = true; this.$refs.audio.loop = true;
}, 500) }, 500);
} else { } else {
this.$refs.audio.loop = false; this.$refs.audio.loop = false;
} }
} },
} },
}, },
mounted() { mounted() {
document.body.addEventListener( document.body.addEventListener(
'mousedown', "mousedown",
() => { () => {
this.$refs.audio.muted = false; this.$refs.audio.muted = false;
document.body.removeEventListener('mousedown', () => { }); document.body.removeEventListener("mousedown", () => {});
}, },
false false
) );
EventBus.$on('dialogAlarm', (data) => { EventBus.$on("dialogAlarm", (data) => {
// 接收消息之后 声音弹窗显示 // 接收消息之后 声音弹窗显示
this.msg = data; this.msg = data;
this.levelcolor(); this.levelcolor();
this.tflag = true; this.tflag = true;
setTimeout(() => { setTimeout(() => {
this.tflag = false; this.tflag = false;
}, 3000) }, 3000);
}) });
EventBus.$on('autioPlay', (data) => { EventBus.$on("autioPlay", (data) => {
this.audioUrl = './assets/audio/' + this.audioObj[data.level]; this.audioUrl = "./assets/audio/" + this.audioObj[data.level];
setTimeout(() => { setTimeout(() => {
this.$refs.audio.play(); this.$refs.audio.play();
}, 500) }, 500);
if (this.cableList.length || this.deviceList.length) { if (this.cableList.length || this.deviceList.length) {
this.$refs.audio.loop = true; this.$refs.audio.loop = true;
} }
}) });
EventBus.$on('cancelWS', () => { EventBus.$on("cancelWS", () => {
this.closeWebsocket(); this.closeWebsocket();
}) });
}, },
destroyed() { destroyed() {
document.body.removeEventListener('mousedown', () => { }); document.body.removeEventListener("mousedown", () => {});
}, },
methods: { methods: {
receiveMessage, receiveMessage,
closeWebsocket() { closeWebsocket() {
if (this.websocket) { if (this.websocket) {
this.websocket.close() this.websocket.close();
} }
}, },
levelcolor() { levelcolor() {
if (this.msg.level === '正常' || this.msg.level === '连接正常') { if (this.msg.level === "正常" || this.msg.level === "连接正常") {
this.alevel.color = 'green'; this.alevel.color = "green";
} else if (this.msg.level === '紧急' || this.msg.level === '连接异常') { } else if (this.msg.level === "紧急" || this.msg.level === "连接异常") {
this.alevel.color = '#f00'; this.alevel.color = "#f00";
} else if (this.msg.level === '重要') { } else if (this.msg.level === "重要") {
this.alevel.color = '#f89850'; this.alevel.color = "#f89850";
} else if (this.msg.level === '一般') { } else if (this.msg.level === "一般") {
this.alevel.color = '#ead906'; this.alevel.color = "#ead906";
}
} }
} },
} },
};
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.tipalerm-enter-active { .tipalerm-enter-active {
......
src/main.js
View file @ abc46f41
...@@ -18,7 +18,7 @@ import { parseTime, resetForm, addDateRange, selectDictLabel, selectDictLabels, ...@@ -18,7 +18,7 @@ import { parseTime, resetForm, addDateRange, selectDictLabel, selectDictLabels,
// 字典标签组件 // 字典标签组件
import DictTag from '@/components/DictTag' import DictTag from '@/components/DictTag'
import RightToolbar from '@/components/RightToolbar' import RightToolbar from '@/components/RightToolbar'
import Print from 'vue-print-nb'
// 字典数据组件 // 字典数据组件
import DictData from '@/components/DictData' import DictData from '@/components/DictData'
Vue.prototype.$ws = WS Vue.prototype.$ws = WS
...@@ -36,6 +36,7 @@ Vue.use(plugins) ...@@ -36,6 +36,7 @@ Vue.use(plugins)
Vue.component('RightToolbar', RightToolbar) Vue.component('RightToolbar', RightToolbar)
Vue.component('DictTag', DictTag) Vue.component('DictTag', DictTag)
Vue.use(directive) Vue.use(directive)
Vue.use(Print);
DictData.install() DictData.install()
function dispatchWithPromise(path) { function dispatchWithPromise(path) {
return new Promise(resolve => { return new Promise(resolve => {
......
src/views/alarm/statistics/index.vue
View file @ abc46f41
...@@ -26,6 +26,7 @@ ...@@ -26,6 +26,7 @@
type="primary" type="primary"
icon="el-icon-refresh-right" icon="el-icon-refresh-right"
@click="handlePrint" @click="handlePrint"
v-print="printoption"
>打印</el-button >打印</el-button
> >
</div> </div>
...@@ -109,63 +110,45 @@ ...@@ -109,63 +110,45 @@
<div class="both"> <div class="both">
<div class="card"> <div class="card">
<div class="nav-title">告警状态分布统计</div> <div class="nav-title">告警状态分布统计</div>
<div> <div style="display: flex; justify-content: center">
<div id="chart1" style="width: 600px; height: 300px"></div> <div id="chart1" style="width: 400px; height: 300px"></div>
</div> </div>
</div> </div>
<div class="card"> <div class="card">
<div class="nav-title">告警级别分布</div> <div class="nav-title">告警级别分布</div>
<div> <div style="display: flex; justify-content: center">
<div id="chart2" style="width: 600px; height: 300px"></div> <div id="chart2" style="width: 400px; height: 300px"></div>
</div> </div>
</div> </div>
</div> </div>
<div class="card"> <div class="card">
<div class="nav-title">告警数量统计</div> <div class="nav-title">告警数量统计</div>
<div> <div style="display: flex; justify-content: center">
<div id="chart3" style="width: 100%; height: 300px"></div> <div id="chart3" style="width: 800px; height: 300px"></div>
</div> </div>
</div> </div>
<div class="table"> <div class="table">
<el-table <el-table
:data="tableData" :data="tableData"
style="width: 100%"
:header-cell-style="{ background: '#EAF1FE', color: '#666666' }" :header-cell-style="{ background: '#EAF1FE', color: '#666666' }"
> >
<el-table-column <el-table-column type="index" label="序号" align="center" />
type="index"
label="序号"
width="100"
align="center"
/>
<el-table-column <el-table-column
prop="siteName" prop="siteName"
label="告警基站名称" label="告警基站名称"
width="180"
align="center" align="center"
/> />
<el-table-column <el-table-column
prop="alarmTarget" prop="alarmTarget"
label="告警对象名称" label="告警对象名称"
width="180"
align="center" align="center"
/> />
<el-table-column <el-table-column prop="alarmType" label="告警类型" align="center">
prop="alarmType"
label="告警类型"
width="150"
align="center"
>
<template slot-scope="scope"> <template slot-scope="scope">
{{ alarmType[scope.row.alarmType] }} {{ alarmType[scope.row.alarmType] }}
</template> </template>
</el-table-column> </el-table-column>
<el-table-column <el-table-column prop="alarmLevel" label="告警级别" align="center">
prop="alarmLevel"
label="告警级别"
width="150"
align="center"
>
<template slot-scope="scope"> <template slot-scope="scope">
{{ alarmLeval[scope.row.alarmLevel] }} {{ alarmLeval[scope.row.alarmLevel] }}
</template> </template>
...@@ -179,7 +162,6 @@ ...@@ -179,7 +162,6 @@
<el-table-column <el-table-column
prop="creationTime" prop="creationTime"
label="告警产生时间" label="告警产生时间"
width="180"
align="center" align="center"
/> />
<el-table-column label="操作" align="center" width="100"> <el-table-column label="操作" align="center" width="100">
...@@ -217,6 +199,17 @@ import download from "@/utils/download"; ...@@ -217,6 +199,17 @@ import download from "@/utils/download";
export default { export default {
data() { data() {
return { return {
printoption: {
id: "print",
popTitle: "&nbsp;", // 打印配置页上方的标题
extraHead: "", // 最上方的头部文字，附加在head标签上的额外标签，使用逗号分割
preview: false, // 是否启动预览模式，默认是false
//previewTitle: '预览的标题', // 打印预览的标题
//previewPrintBtnLabel: '预览结束，开始打印', // 打印预览的标题下方的按钮文本，点击可进入打印
zIndex: 20002, // 预览窗口的z-index，默认是20002，最好比默认值更高
standard: "",
extraCss: "./index.css",
},
form: {}, form: {},
params: { params: {
current: 1, current: 1,
...@@ -261,11 +254,13 @@ export default { ...@@ -261,11 +254,13 @@ export default {
value: item.alarmCount, value: item.alarmCount,
}; };
}); });
if (this.myChart.chart1 != null) { if (this.myChart.chart1 != null) {
this.myChart.chart1.dispose(); this.myChart.chart1.dispose();
} }
let chartDom = document.getElementById("chart1"); let chartDom = document.getElementById("chart1");
this.myChart.chart1 = echarts.init(chartDom); this.myChart.chart1 = echarts.init(chartDom, null, { renderer: "svg" });
let option; let option;
option = { option = {
tooltip: { tooltip: {
...@@ -304,7 +299,7 @@ export default { ...@@ -304,7 +299,7 @@ export default {
this.myChart.chart2.dispose(); this.myChart.chart2.dispose();
} }
let chartDom = document.getElementById("chart2"); let chartDom = document.getElementById("chart2");
this.myChart.chart2 = echarts.init(chartDom); this.myChart.chart2 = echarts.init(chartDom, null, { renderer: "svg" });
let option; let option;
option = { option = {
tooltip: { tooltip: {
...@@ -365,7 +360,7 @@ export default { ...@@ -365,7 +360,7 @@ export default {
this.myChart.chart3.dispose(); this.myChart.chart3.dispose();
} }
let chartDom = document.getElementById("chart3"); let chartDom = document.getElementById("chart3");
this.myChart.chart3 = echarts.init(chartDom); this.myChart.chart3 = echarts.init(chartDom, null, { renderer: "svg" });
let option; let option;
option = { option = {
tooltip: { tooltip: {
...@@ -460,14 +455,14 @@ export default { ...@@ -460,14 +455,14 @@ export default {
// this.$emit("search", this.form); // this.$emit("search", this.form);
this.handleInIt(); this.handleInIt();
}, },
handlePrint() { handlePrint() {},
printToPdf("print");
},
}, },
}; };
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.nav-title { .nav-title {
color: #02a7f0; color: #02a7f0;
font-size: 20px; font-size: 20px;
...@@ -510,6 +505,7 @@ export default { ...@@ -510,6 +505,7 @@ export default {
justify-content: space-between; justify-content: space-between;
gap: 16px; gap: 16px;
.card { .card {
width: 40%;
flex: 1; flex: 1;
} }
} }
...@@ -520,7 +516,16 @@ export default { ...@@ -520,7 +516,16 @@ export default {
border: 1px solid #d7d7d7; border: 1px solid #d7d7d7;
} }
.table { .table {
width: 100%; // width: 100%;
::v-deep table {
table-layout: auto;
}
::v-deep .el-table__header-wrapper .el-table__header {
width: 100% !important;
}
::v-deep .el-table__body-wrapper .el-table__body {
width: 100% !important;
}
} }
} }
</style> </style>
\ No newline at end of file
src/views/jobgroup/jobinfo/index.vue
View file @ abc46f41
...@@ -232,17 +232,91 @@ ...@@ -232,17 +232,91 @@
<el-popover <el-popover
placement="bottom" placement="bottom"
width="448" width="448"
trigger="manual" trigger="hover"
v-model="visible" v-model="visible"
> >
<el-tabs v-model="activeName" type="card" @tab-click="handleClick"> <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
<el-tab-pane label="秒" name="1">用户管理</el-tab-pane> <el-tab-pane label="秒" name="1">
<el-tab-pane label="分钟" name="2">配置管理</el-tab-pane> <pre>
<el-tab-pane label="小时" name="3">角色管理</el-tab-pane> 输入内容为【秒 分 时 日 月 周 年】中间空格隔开
<el-tab-pane label="日" name="4">定时任务补偿</el-tab-pane> 如【* * * * * ? 2016-2017】为
<el-tab-pane label="月" name="5">配置管理</el-tab-pane> 2016-2017年的所有日期的每秒都执行一次
<el-tab-pane label="周" name="6">角色管理</el-tab-pane>
<el-tab-pane label="年" name="7">定时任务补偿</el-tab-pane> 1. 每秒 【*】允许的通配符[, - * /]
例：【* * * * * ? 2016-2017】
2. 周期 从1-2秒为 【1-2】
例：【1-2 * * * * ? 2016-2017】
3. 从1秒开始 每2秒执行一次 【1/2】
例：【1/2 * * * * ? 2016-2017】
4. 指定 如 0s 1s 3s执行为：【0,1,3】 可选值为0-59
例：【0,1,3 * * * * ? 2016-2017】
</pre>
</el-tab-pane>
<el-tab-pane label="分钟" name="2">
<pre>
1. 每分钟 【*】允许的通配符[, - * /]
2. 周期 从1-2分钟为 【1-2】
3. 从1分钟开始 每2分钟执行一次 【1/2】
4. 指定 如 0分钟 1分钟 3分钟执行为：【0,1,3】 可选值为0-59
例见秒的说明
</pre>
</el-tab-pane>
<el-tab-pane label="小时" name="3">
<pre>
1. 每秒小时 【*】允许的通配符[, - * /]
2. 周期 从1-2天为 【1-2】
3. 从1小时开始 每2小时执行一次 【1/2】
4. 指定 如 0小时 1小时 3小时执行为：【0,1,3】 可选值为0-23
例见秒的说明
</pre>
</el-tab-pane>
<el-tab-pane label="日" name="4">
<pre>
1. 每天 【*】允许的通配符[, - * / L W]
2. 不指定【?】
例：【* * * ? * ? 2016-2017】
3. 周期 从1-2日为 【1-2】
4. 从1日开始 每1日执行一次 【1/1】
5. 每月1号最近的那个工作日 【1W】
例：【* * * 1W * ? 2016-2017】
6. 本月最后一天 【L】
例：【* * * L * ? 2016-2017】
6. 指定 如 1号、2号、3号执行为：【1,2,3】可选值为1-31
其他例见秒的说明
</pre>
</el-tab-pane>
<el-tab-pane label="月" name="5">
<pre>
1. 每月 【*】允许的通配符[, - * /]
2. 不指定【?】
3. 周期 从1-2月为 【1-2】
4. 从1月开始 每2月执行一次 【1/2】
5. 指定 如 1月、2月、3月执行为：【1,2,3】可选值为1-12
</pre>
</el-tab-pane>
<el-tab-pane label="周" name="6">
<pre>
1. 每周 【*】允许的通配符[, - * / L #]
2. 不指定【?】
3. 周期 从星期一到星期二为 【1-2】
4. 从1周开始的星期一 【1/2】
5. 本月最后一个星期 【L】
6. 指定 如 周一、周二、周三执行为：【1,2,3】可选值为1-7
</pre>
</el-tab-pane>
<el-tab-pane label="年" name="7">
<pre>
1. 不指定 【?】
2. 每年 【*】
3. 周期从2016-2017年 【2016-2017】
</pre>
</el-tab-pane>
</el-tabs> </el-tabs>
<el-input <el-input
slot="reference" slot="reference"
...@@ -511,6 +585,7 @@ export default { ...@@ -511,6 +585,7 @@ export default {
}, },
resGroupList: [], resGroupList: [],
total: 0, total: 0,
activeName:'1',
options: [ options: [
{ {
id: -1, id: -1,
......
src/views/setting/add/comp/autoAdd.vue
View file @ abc46f41
...@@ -358,6 +358,10 @@ export default { ...@@ -358,6 +358,10 @@ export default {
}; };
break; break;
case "2": case "2":
if (this.monitorForm.uplinkLeakyCable1HundredMeterLoss > 0.65) {
this.$message.warning("百米损耗值需小于0.65，请输入正确的值");
return;
}
JsonData = { JsonData = {
devicePortType: 1, devicePortType: 1,
uplinkLeakyCable1StartPosition: uplinkLeakyCable1StartPosition:
...@@ -371,6 +375,10 @@ export default { ...@@ -371,6 +375,10 @@ export default {
}; };
break; break;
case "3": case "3":
if (this.monitorForm.downlinkLeakyCable1HundredMeterLoss > 0.65) {
this.$message.warning("百米损耗值需小于0.65，请输入正确的值");
return;
}
JsonData = { JsonData = {
devicePortType: 2, devicePortType: 2,
downlinkLeakyCable1StartPosition: downlinkLeakyCable1StartPosition:
...@@ -384,6 +392,10 @@ export default { ...@@ -384,6 +392,10 @@ export default {
}; };
break; break;
case "4": case "4":
if (this.monitorForm.uplinkLeakyCable2HundredMeterLoss > 0.65) {
this.$message.warning("百米损耗值需小于0.65，请输入正确的值");
return;
}
JsonData = { JsonData = {
devicePortType: 1, devicePortType: 1,
uplinkLeakyCable2StartPosition: uplinkLeakyCable2StartPosition:
...@@ -397,6 +409,10 @@ export default { ...@@ -397,6 +409,10 @@ export default {
}; };
break; break;
case "5": case "5":
if (this.monitorForm.downlinkLeakyCable2HundredMeterLoss > 0.65) {
this.$message.warning("百米损耗值需小于0.65，请输入正确的值");
return;
}
JsonData = { JsonData = {
devicePortType: 2, devicePortType: 2,
downlinkLeakyCable2StartPosition: downlinkLeakyCable2StartPosition:
...@@ -412,7 +428,7 @@ export default { ...@@ -412,7 +428,7 @@ export default {
break; break;
} }
JsonData = Object.fromEntries( JsonData = Object.fromEntries(
Object.entries(JsonData).filter(([_, v]) => v !== undefined) Object.entries(JsonData).filter(([_, v]) => v !== undefined&&v !== "")
); );
this.$refs[formName].validate((valid) => { this.$refs[formName].validate((valid) => {
if (valid) { if (valid) {
......
src/views/setting/add/comp/leakyCable.vue
View file @ abc46f41
...@@ -180,6 +180,14 @@ export default { ...@@ -180,6 +180,14 @@ export default {
}, },
}, },
data() { data() {
var checkHundredMetersLoss = (rule, value, callback) => {
setTimeout(() => {
if (value > 0.65) {
callback(new Error("百米损耗值需小于0.65，请输入正确的值"));
}
callback();
}, 1000);
};
return { return {
railWaySelect: [], railWaySelect: [],
stationSelect2: [], stationSelect2: [],
...@@ -198,6 +206,10 @@ export default { ...@@ -198,6 +206,10 @@ export default {
equipId: [ equipId: [
{ required: true, message: "请选择监测设备", trigger: "blur" }, { required: true, message: "请选择监测设备", trigger: "blur" },
], ],
hundredMetersLoss: [
{ validator: checkHundredMetersLoss, trigger: "blur" },
],
antennaFeederLength: [ antennaFeederLength: [
{ required: true, message: "请输入天馈线长度", trigger: "blur" }, { required: true, message: "请输入天馈线长度", trigger: "blur" },
], ],
...@@ -331,7 +343,7 @@ function formInit(data = {}) { ...@@ -331,7 +343,7 @@ function formInit(data = {}) {
parentId: 0, parentId: 0,
reductRatio: 0, reductRatio: 0,
sendPower: 0, sendPower: 0,
direction:'', direction: "",
...data, ...data,
}; };
} }
......
src/views/setting/add/comp/line.vue
View file @ abc46f41
...@@ -175,6 +175,14 @@ export default { ...@@ -175,6 +175,14 @@ export default {
}, },
}, },
data() { data() {
var checkHundredMetersLoss = (rule, value, callback) => {
setTimeout(() => {
if (value > 0.65) {
callback(new Error("百米损耗值需小于0.65，请输入正确的值"));
}
callback();
}, 1000);
};
return { return {
railWaySelect: [], railWaySelect: [],
stationSelect2: [], stationSelect2: [],
...@@ -210,6 +218,7 @@ export default { ...@@ -210,6 +218,7 @@ export default {
], ],
feederLossMeters: [ feederLossMeters: [
{ required: true, message: "请输入天馈线百米损耗", trigger: "blur" }, { required: true, message: "请输入天馈线百米损耗", trigger: "blur" },
{ validator: checkHundredMetersLoss, trigger: "blur" },
], ],
feederModel: [ feederModel: [
{ {
......
vue.config.js
View file @ abc46f41
...@@ -10,7 +10,7 @@ const name = defaultSettings.title || '漏缆故障定位监测系统' // page t ...@@ -10,7 +10,7 @@ const name = defaultSettings.title || '漏缆故障定位监测系统' // page t
const port = process.env.port || process.env.npm_config_port || 8890 // dev port const port = process.env.port || process.env.npm_config_port || 8890 // dev port
// const href = 'http://101.126.159.207' // const href = 'http://101.126.159.207'
const href = 'http://127.0.0.1' const href = 'http://127.0.0.1'
// const href = 'http://192.168.0.113' // const href = 'http://192.168.0.120'
const rewriteDefaultConfig = { const rewriteDefaultConfig = {
changeOrigin: true, changeOrigin: true,
......
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