代码提交
This commit is contained in:
commit
4ed697d5fa
282
src/main.js
282
src/main.js
|
|
@ -1,141 +1,141 @@
|
||||||
import Vue from 'vue'
|
import Vue from 'vue'
|
||||||
import App from './App.vue'
|
import App from './App.vue'
|
||||||
import router from './router'
|
import router from './router'
|
||||||
|
|
||||||
import ElementUI from 'element-ui'
|
import ElementUI from 'element-ui'
|
||||||
import 'element-ui/lib/theme-chalk/index.css'
|
import 'element-ui/lib/theme-chalk/index.css'
|
||||||
Vue.use(ElementUI)
|
Vue.use(ElementUI)
|
||||||
import Plugin from 'v-fit-columns';
|
import Plugin from 'v-fit-columns';
|
||||||
Vue.use(Plugin);
|
Vue.use(Plugin);
|
||||||
import * as echarts from 'echarts'
|
import * as echarts from 'echarts'
|
||||||
import 'echarts-gl'
|
import 'echarts-gl'
|
||||||
Vue.prototype.$echarts = echarts
|
Vue.prototype.$echarts = echarts
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
import moment from 'moment'
|
import moment from 'moment'
|
||||||
//定义一个全局过滤器实现日期格式化
|
//定义一个全局过滤器实现日期格式化
|
||||||
Vue.filter('datefmt', function (input, fmtstring) {//当input为时间戳时，需转为Number类型
|
Vue.filter('datefmt', function (input, fmtstring) {//当input为时间戳时，需转为Number类型
|
||||||
// 使用momentjs这个日期格式化类库实现日期的格式化功能
|
// 使用momentjs这个日期格式化类库实现日期的格式化功能
|
||||||
return moment(input).format(fmtstring);
|
return moment(input).format(fmtstring);
|
||||||
});
|
});
|
||||||
Vue.prototype.$moment = moment
|
Vue.prototype.$moment = moment
|
||||||
|
|
||||||
import 'amfe-flexible'; //引入amfe-flexible做rem适配
|
import 'amfe-flexible'; //引入amfe-flexible做rem适配
|
||||||
import './assets/index.css';
|
import './assets/index.css';
|
||||||
import mqttConfig from './utils/mqttConfig.js';
|
import mqttConfig from './utils/mqttConfig.js';
|
||||||
Vue.config.productionTip = false
|
Vue.config.productionTip = false
|
||||||
//mqtt订阅
|
//mqtt订阅
|
||||||
var currentTopics = null;
|
var currentTopics = null;
|
||||||
var client = null; //mqtt客户端连接
|
var client = null; //mqtt客户端连接
|
||||||
var callback = null; //回调
|
var callback = null; //回调
|
||||||
let mqtt = new mqttConfig(currentTopics); // 初始化mqtt
|
let mqtt = new mqttConfig(currentTopics); // 初始化mqtt
|
||||||
//订阅mqtt
|
//订阅mqtt
|
||||||
window.PubScribe = function (topic, _callback,) {
|
window.PubScribe = function (topic, _callback,) {
|
||||||
callback = _callback;
|
callback = _callback;
|
||||||
if (currentTopics != null) {
|
if (currentTopics != null) {
|
||||||
//取消currentTopics主题订阅
|
//取消currentTopics主题订阅
|
||||||
if (client != null) {
|
if (client != null) {
|
||||||
client.unsubscribe(currentTopics);
|
client.unsubscribe(currentTopics);
|
||||||
currentTopics = null;
|
currentTopics = null;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
if (client == null) {
|
if (client == null) {
|
||||||
client = mqtt.createConnect(() => {
|
client = mqtt.createConnect(() => {
|
||||||
//客户端订阅主题
|
//客户端订阅主题
|
||||||
client.subscribe(['FirstLevel','SecondLevel','ThirdLevel'], {
|
client.subscribe(['FirstLevel','SecondLevel','ThirdLevel'], {
|
||||||
qos: 0
|
qos: 0
|
||||||
}, (err) => {
|
}, (err) => {
|
||||||
if (!err) {
|
if (!err) {
|
||||||
console.log("订阅成功0", ['FirstLevel','SecondLevel','ThirdLevel']);
|
console.log("订阅成功0", ['FirstLevel','SecondLevel','ThirdLevel']);
|
||||||
} else {
|
} else {
|
||||||
console.log('订阅失败');
|
console.log('订阅失败');
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
client.on("message", (topic, message) => {
|
client.on("message", (topic, message) => {
|
||||||
//数据分类
|
//数据分类
|
||||||
try {
|
try {
|
||||||
callback(topic, message);
|
callback(topic, message);
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
|
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
} else {
|
} else {
|
||||||
// if (topic != null) {
|
// if (topic != null) {
|
||||||
// console.log("topic", topic)
|
// console.log("topic", topic)
|
||||||
// currentTopics = topic;
|
// currentTopics = topic;
|
||||||
// client.subscribe(currentTopics, {
|
// client.subscribe(currentTopics, {
|
||||||
// qos: 0
|
// qos: 0
|
||||||
// }, (err) => {
|
// }, (err) => {
|
||||||
// if (!err) {
|
// if (!err) {
|
||||||
// console.log("订阅成功1");
|
// console.log("订阅成功1");
|
||||||
// } else {
|
// } else {
|
||||||
// console.log('消息订阅失败！')
|
// console.log('消息订阅失败！')
|
||||||
// }
|
// }
|
||||||
// });
|
// });
|
||||||
// }
|
// }
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
window.PubScribe(null,realInfo);
|
window.PubScribe(null,realInfo);
|
||||||
window.alarmAllLevel = []
|
window.alarmAllLevel = []
|
||||||
window.alarmFirstLevel = []
|
window.alarmFirstLevel = []
|
||||||
window.alarmSecondLevel = []
|
window.alarmSecondLevel = []
|
||||||
window.alarmThirdLevel = []
|
window.alarmThirdLevel = []
|
||||||
function realInfo(topic, message) {
|
function realInfo(topic, message) {
|
||||||
switch (topic) {
|
switch (topic) {
|
||||||
// 接收托片
|
// 接收托片
|
||||||
case "FirstLevel":
|
case "FirstLevel":
|
||||||
try {
|
try {
|
||||||
// window.alarmFirstLevel= []
|
// window.alarmFirstLevel= []
|
||||||
const utf8decoder = new TextDecoder();
|
const utf8decoder = new TextDecoder();
|
||||||
const u8arr = new Uint8Array(message);
|
const u8arr = new Uint8Array(message);
|
||||||
const temp = utf8decoder.decode(u8arr); // 将二进制数据转为字符串
|
const temp = utf8decoder.decode(u8arr); // 将二进制数据转为字符串
|
||||||
const msg = JSON.parse(temp); //这一步报错则返回的是二进制流图片，不报错则返回的是JSON的错误提示数据
|
const msg = JSON.parse(temp); //这一步报错则返回的是二进制流图片，不报错则返回的是JSON的错误提示数据
|
||||||
console.log("msg", msg);
|
console.log("msg", msg);
|
||||||
|
|
||||||
for (let i = 0; i < msg.length; i++) {
|
for (let i = 0; i < msg.length; i++) {
|
||||||
window.alarmFirstLevel.splice(0,window.alarmFirstLevel.length);
|
window.alarmFirstLevel.splice(0,window.alarmFirstLevel.length);
|
||||||
window.alarmFirstLevel.push(msg[i])
|
window.alarmFirstLevel.push(msg[i])
|
||||||
}
|
}
|
||||||
// window.alarmFirstLevel= msg
|
// window.alarmFirstLevel= msg
|
||||||
// alarmAllLevel
|
// alarmAllLevel
|
||||||
//消防，电梯、动环系统
|
//消防，电梯、动环系统
|
||||||
} catch (error) {}
|
} catch (error) {}
|
||||||
console.log(error);
|
console.log(error);
|
||||||
break;
|
break;
|
||||||
case "SecondLevel":
|
case "SecondLevel":
|
||||||
try {
|
try {
|
||||||
const utf8decoder = new TextDecoder();
|
const utf8decoder = new TextDecoder();
|
||||||
const u8arr = new Uint8Array(message);
|
const u8arr = new Uint8Array(message);
|
||||||
const temp = utf8decoder.decode(u8arr); // 将二进制数据转为字符串
|
const temp = utf8decoder.decode(u8arr); // 将二进制数据转为字符串
|
||||||
const msg = JSON.parse(temp); //这一步报错则返回的是二进制流图片，不报错则返回的是JSON的错误提示数据
|
const msg = JSON.parse(temp); //这一步报错则返回的是二进制流图片，不报错则返回的是JSON的错误提示数据
|
||||||
console.log("msg", msg);
|
console.log("msg", msg);
|
||||||
for (let i = 0; i < msg.length; i++) {
|
for (let i = 0; i < msg.length; i++) {
|
||||||
window.alarmSecondLevel.splice(0,window.alarmSecondLevel.length);
|
window.alarmSecondLevel.splice(0,window.alarmSecondLevel.length);
|
||||||
window.alarmSecondLevel.push(msg[i])
|
window.alarmSecondLevel.push(msg[i])
|
||||||
}
|
}
|
||||||
} catch (error) {}
|
} catch (error) {}
|
||||||
console.log(error);
|
console.log(error);
|
||||||
break;
|
break;
|
||||||
case "ThirdLevel":
|
case "ThirdLevel":
|
||||||
try {
|
try {
|
||||||
const utf8decoder = new TextDecoder();
|
const utf8decoder = new TextDecoder();
|
||||||
const u8arr = new Uint8Array(message);
|
const u8arr = new Uint8Array(message);
|
||||||
const temp = utf8decoder.decode(u8arr); // 将二进制数据转为字符串
|
const temp = utf8decoder.decode(u8arr); // 将二进制数据转为字符串
|
||||||
const msg = JSON.parse(temp); //这一步报错则返回的是二进制流图片，不报错则返回的是JSON的错误提示数据
|
const msg = JSON.parse(temp); //这一步报错则返回的是二进制流图片，不报错则返回的是JSON的错误提示数据
|
||||||
console.log("msg", msg);
|
console.log("msg", msg);
|
||||||
for (let i = 0; i < msg.length; i++) {
|
for (let i = 0; i < msg.length; i++) {
|
||||||
window.alarmThirdLevel.splice(0,window.alarmThirdLevel.length);
|
window.alarmThirdLevel.splice(0,window.alarmThirdLevel.length);
|
||||||
window.alarmThirdLevel.push(msg[i])
|
window.alarmThirdLevel.push(msg[i])
|
||||||
}
|
}
|
||||||
} catch (error) {}
|
} catch (error) {}
|
||||||
console.log(error);
|
console.log(error);
|
||||||
break;
|
break;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
new Vue({
|
new Vue({
|
||||||
router,
|
router,
|
||||||
render: h => h(App)
|
render: h => h(App)
|
||||||
}).$mount('#app')
|
}).$mount('#app')
|
||||||
|
|
|
||||||
|
|
@ -564,6 +564,7 @@ export default {
|
||||||
const temp = utf8decoder.decode(u8arr); // 将二进制数据转为字符串
|
const temp = utf8decoder.decode(u8arr); // 将二进制数据转为字符串
|
||||||
const msg = JSON.parse(temp); //这一步报错则返回的是二进制流图片，不报错则返回的是JSON的错误提示数据
|
const msg = JSON.parse(temp); //这一步报错则返回的是二进制流图片，不报错则返回的是JSON的错误提示数据
|
||||||
console.log("msg", msg);
|
console.log("msg", msg);
|
||||||
|
console.log("msg", msg);
|
||||||
if (msg.params.设备运行状态 == 1) {
|
if (msg.params.设备运行状态 == 1) {
|
||||||
msg.params.设备运行状态 = "正常";
|
msg.params.设备运行状态 = "正常";
|
||||||
} else {
|
} else {
|
||||||
|
|
@ -786,12 +787,12 @@ export default {
|
||||||
name: {
|
name: {
|
||||||
padding: [0, 10, 0, 8],
|
padding: [0, 10, 0, 8],
|
||||||
color: "auto",
|
color: "auto",
|
||||||
fontSize: "0.7rem",
|
fontSize: "0.9rem",
|
||||||
},
|
},
|
||||||
percent: {
|
percent: {
|
||||||
padding: [0, 0, 0, 8],
|
padding: [0, 0, 0, 8],
|
||||||
color: "auto",
|
color: "auto",
|
||||||
fontSize: "0.7rem",
|
fontSize: "0.9rem",
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
|
|
@ -959,7 +960,7 @@ export default {
|
||||||
axisLabel: {
|
axisLabel: {
|
||||||
// interval: 0,
|
// interval: 0,
|
||||||
show: true,
|
show: true,
|
||||||
fontSize: "0.7rem",
|
fontSize: "0.9rem",
|
||||||
color: "#ffffff",
|
color: "#ffffff",
|
||||||
fontFamily: "SourceHanSansCN-Normal, SourceHanSansCN",
|
fontFamily: "SourceHanSansCN-Normal, SourceHanSansCN",
|
||||||
},
|
},
|
||||||
|
|
@ -971,7 +972,7 @@ export default {
|
||||||
axisTick: { show: false },
|
axisTick: { show: false },
|
||||||
axisLabel: {
|
axisLabel: {
|
||||||
show: true,
|
show: true,
|
||||||
fontSize: "0.7rem",
|
fontSize: "0.9rem",
|
||||||
color: "#ffffff",
|
color: "#ffffff",
|
||||||
fontFamily: "SourceHanSansCN-Normal, SourceHanSansCN",
|
fontFamily: "SourceHanSansCN-Normal, SourceHanSansCN",
|
||||||
formatter: "{value}",
|
formatter: "{value}",
|
||||||
|
|
@ -987,7 +988,7 @@ export default {
|
||||||
axisTick: { show: false },
|
axisTick: { show: false },
|
||||||
axisLabel: {
|
axisLabel: {
|
||||||
show: true,
|
show: true,
|
||||||
fontSize: "0.7rem",
|
fontSize: "0.9rem",
|
||||||
color: "#ffffff",
|
color: "#ffffff",
|
||||||
fontFamily: "SourceHanSansCN-Normal, SourceHanSansCN",
|
fontFamily: "SourceHanSansCN-Normal, SourceHanSansCN",
|
||||||
formatter: "{value}",
|
formatter: "{value}",
|
||||||
|
|
|
||||||
|
|
@ -469,6 +469,33 @@ export default {
|
||||||
this.upmqttData(val);
|
this.upmqttData(val);
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
|
watch: {
|
||||||
|
alarmAllLevel(val) {
|
||||||
|
// 为了避免频繁触发resize函数导致页面卡顿，使用定时器
|
||||||
|
console.log("alarmAllLevel",val)
|
||||||
|
this.upmqttData(val)
|
||||||
|
},
|
||||||
|
|
||||||
|
alarmFirstLevel(val) {
|
||||||
|
|
||||||
|
// 为了避免频繁触发resize函数导致页面卡顿，使用定时器
|
||||||
|
console.log("alarmFirstLevel",val)
|
||||||
|
if(val.length!=0){
|
||||||
|
this.upmqttData(val)
|
||||||
|
}
|
||||||
|
|
||||||
|
},
|
||||||
|
alarmSecondLevel(val) {
|
||||||
|
// 为了避免频繁触发resize函数导致页面卡顿，使用定时器
|
||||||
|
console.log("alarmSecondLevel",val)
|
||||||
|
this.upmqttData(val)
|
||||||
|
},
|
||||||
|
alarmThirdLevel(val) {
|
||||||
|
// 为了避免频繁触发resize函数导致页面卡顿，使用定时器
|
||||||
|
console.log("alarmThirdLevel",val)
|
||||||
|
this.upmqttData(val)
|
||||||
|
},
|
||||||
|
},
|
||||||
methods: {
|
methods: {
|
||||||
//放大变焦
|
//放大变焦
|
||||||
addZoom() {
|
addZoom() {
|
||||||
|
|
@ -1596,7 +1623,6 @@ export default {
|
||||||
background: url(../assets/images/warnDottedLine.png) no-repeat;
|
background: url(../assets/images/warnDottedLine.png) no-repeat;
|
||||||
background-size: 100% 100%;
|
background-size: 100% 100%;
|
||||||
overflow: auto;
|
overflow: auto;
|
||||||
|
|
||||||
.warnListContent {
|
.warnListContent {
|
||||||
height: 27%;
|
height: 27%;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
|
|
||||||
|
|
@ -257,6 +257,8 @@ export default {
|
||||||
},
|
},
|
||||||
],
|
],
|
||||||
},
|
},
|
||||||
|
|
||||||
|
|
||||||
],
|
],
|
||||||
warnCameraList: [
|
warnCameraList: [
|
||||||
{
|
{
|
||||||
|
|
@ -372,6 +374,27 @@ export default {
|
||||||
this.upmqttData(val);
|
this.upmqttData(val);
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
|
watch: {
|
||||||
|
alarmFirstLevel(val) {
|
||||||
|
|
||||||
|
// 为了避免频繁触发resize函数导致页面卡顿，使用定时器
|
||||||
|
console.log("alarmFirstLevel",val)
|
||||||
|
if(val.length!=0){
|
||||||
|
this.upmqttData(val)
|
||||||
|
}
|
||||||
|
|
||||||
|
},
|
||||||
|
alarmSecondLevel(val) {
|
||||||
|
// 为了避免频繁触发resize函数导致页面卡顿，使用定时器
|
||||||
|
console.log("alarmSecondLevel",val)
|
||||||
|
this.upmqttData(val)
|
||||||
|
},
|
||||||
|
alarmThirdLevel(val) {
|
||||||
|
// 为了避免频繁触发resize函数导致页面卡顿，使用定时器
|
||||||
|
console.log("alarmThirdLevel",val)
|
||||||
|
this.upmqttData(val)
|
||||||
|
},
|
||||||
|
},
|
||||||
methods: {
|
methods: {
|
||||||
//获取昨天今天的报警数量
|
//获取昨天今天的报警数量
|
||||||
getAlarmCount() {
|
getAlarmCount() {
|
||||||
|
|
|
||||||
112
vue.config.js
112
vue.config.js
|
|
@ -1,57 +1,57 @@
|
||||||
module.exports = {
|
module.exports = {
|
||||||
// 打包文件配置
|
// 打包文件配置
|
||||||
publicPath: "/",
|
publicPath: "/",
|
||||||
assetsDir: "static",
|
assetsDir: "static",
|
||||||
lintOnSave: false,
|
lintOnSave: false,
|
||||||
devServer: {
|
devServer: {
|
||||||
// overlay: { // 让浏览器 overlay 同时显示警告和错误
|
// overlay: { // 让浏览器 overlay 同时显示警告和错误
|
||||||
// warnings: true,
|
// warnings: true,
|
||||||
// errors: true,
|
// errors: true,
|
||||||
// },
|
// },
|
||||||
// hotOnly: true,
|
// hotOnly: true,
|
||||||
// open: false, // npm run serve后自动打开页面
|
// open: false, // npm run serve后自动打开页面
|
||||||
// https: false, // https:{type:Boolean}
|
// https: false, // https:{type:Boolean}
|
||||||
// host: "0.0.0.0", // 匹配本机IP地址(默认是0.0.0.0)
|
// host: "0.0.0.0", // 匹配本机IP地址(默认是0.0.0.0)
|
||||||
// port: 8989, // 开发服务器运行端口号
|
// port: 8989, // 开发服务器运行端口号
|
||||||
proxy: {
|
proxy: {
|
||||||
'/api': { //代理的名字
|
'/api': { //代理的名字
|
||||||
target:'http://172.16.1.253:12308/api/',
|
target:'http://172.16.1.253:12308/api/',
|
||||||
// target:'http://138.227.208.100:12308/api/',
|
// target:'http://138.227.208.100:12308/api/',
|
||||||
ws: true,
|
ws: true,
|
||||||
changeOrigin: true,
|
changeOrigin: true,
|
||||||
pathRewrite:{
|
pathRewrite:{
|
||||||
'^/api':'',
|
'^/api':'',
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
'/ecs-server': { //代理的名字
|
'/ecs-server': { //代理的名字
|
||||||
target:'http://138.227.111.208:8002/ecs-server/',
|
target:'http://138.227.111.208:8002/ecs-server/',
|
||||||
ws: true,
|
ws: true,
|
||||||
changeOrigin: true,
|
changeOrigin: true,
|
||||||
pathRewrite:{
|
pathRewrite:{
|
||||||
'^/ecs-server':'',
|
'^/ecs-server':'',
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
'/video': { //代理的名字
|
'/video': { //代理的名字
|
||||||
// target:'http://172.16.1.253:12308/api/',
|
// target:'http://172.16.1.253:12308/api/',
|
||||||
target:'http://138.227.208.100:12307/',
|
target:'http://138.227.208.100:12307/',
|
||||||
ws: true,
|
ws: true,
|
||||||
changeOrigin: true,
|
changeOrigin: true,
|
||||||
pathRewrite:{
|
pathRewrite:{
|
||||||
'^/video':'',
|
'^/video':'',
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
// css: {
|
// css: {
|
||||||
// loaderOptions: {
|
// loaderOptions: {
|
||||||
// postcss: {
|
// postcss: {
|
||||||
// plugins: [
|
// plugins: [
|
||||||
// require("postcss-px2rem-exclude")({
|
// require("postcss-px2rem-exclude")({
|
||||||
// // 在这里，由于我的设计稿尺寸的屏幕分辨率是1920，具体原因如下：
|
// // 在这里，由于我的设计稿尺寸的屏幕分辨率是1920，具体原因如下：
|
||||||
// remUnit: 576, // 设计稿尺寸/10
|
// remUnit: 576, // 设计稿尺寸/10
|
||||||
// }),
|
// }),
|
||||||
// ],
|
// ],
|
||||||
// },
|
// },
|
||||||
// },
|
// },
|
||||||
// },
|
// },
|
||||||
}
|
}
|
||||||
Loading…
Reference in New Issue