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