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