706 lines
36 KiB
Vue
706 lines
36 KiB
Vue
<template>
|
||
<div class="content-box">
|
||
<div class="container">
|
||
<!-- <nav>
|
||
<router-link :to="a.url" :key="index" v-for="(a,index) in Data">{{a.title}}</router-link>
|
||
<el-button type="primary" @click="dialogFormVisible = true">断面组件</el-button>
|
||
</nav> -->
|
||
<el-tabs type="border-card">
|
||
<el-tab-pane label="xx路口">
|
||
<div style="width: 60%; height: 100%; display: inline-block; border: 1px soild #eee; padding: 15px">
|
||
<img :src="imgUrl" width="100%" height="100%" />
|
||
</div>
|
||
<div style="width: 20%; height: 100%; display: inline-block; border: 1px soild #eee; padding: 15px">
|
||
<el-button type="primary" @click="dialogFormVisible = true">断面组件</el-button>
|
||
<el-button type="primary" @click="areaComponent = true">区域组件</el-button>
|
||
<el-button type="primary" @click="indexModule = true">指标组件</el-button>
|
||
</div>
|
||
<div style="width: 20%; height: 100%; display: inline-block; border: 1px soild #eee; padding: 15px"></div>
|
||
</el-tab-pane>
|
||
<el-tab-pane label="数据看板">数据看板</el-tab-pane>
|
||
<el-tab-pane label="分析配置">
|
||
<analysisConfiguration></analysisConfiguration>
|
||
</el-tab-pane>
|
||
<el-tab-pane label="分析状态">
|
||
<editModal></editModal>
|
||
</el-tab-pane>
|
||
<el-tab-pane label="存储">存储</el-tab-pane>
|
||
</el-tabs>
|
||
<!-- <div style="width:30%;height:300px;display:inline-block">
|
||
<img :src='imgUrl' width="100%" height="100%"/>
|
||
</div>
|
||
<div style="width:30%;height:300px;display:inline-block">
|
||
<img :src='imgUrl1' width="100%" height="100%"/>
|
||
</div>
|
||
<div style="width:30%;height:300px;display:inline-block">
|
||
<img :src='imgUrl2' width="100%" height="100%"/>
|
||
</div>
|
||
<div style="width:30%;height:300px;display:inline-block">
|
||
<img :src='imgUrl3' width="100%" height="100%"/>
|
||
</div>
|
||
<div style="width:30%;height:300px;display:inline-block">
|
||
<img :src='imgUrl4' width="100%" height="100%"/>
|
||
</div>
|
||
<div style="width:30%;height:300px;display:inline-block">
|
||
<img :src='imgUrl5' width="100%" height="100%"/>
|
||
</div> -->
|
||
</div>
|
||
<div id="dialog" class="margin-top: 0px !important;">
|
||
<el-dialog title="断面组件配置" width="40%" :visible.sync="dialogFormVisible">
|
||
<el-form ref="form" :model="form" label-width="80px">
|
||
<el-form-item label="实时性">
|
||
<el-radio-group v-model="form.resource">
|
||
<el-radio label="实时（触发）"></el-radio>
|
||
<el-radio label="间隔"></el-radio>
|
||
</el-radio-group>
|
||
</el-form-item>
|
||
<!-- <el-form-item label="活动名称">
|
||
<el-input v-model="form.name"></el-input>
|
||
</el-form-item> -->
|
||
<el-form-item label="时间">
|
||
<el-col :span="11">
|
||
<el-date-picker type="date" placeholder="选择日期" v-model="form.date1" style="width: 100%"></el-date-picker>
|
||
</el-col>
|
||
<el-col class="line" :span="2">-</el-col>
|
||
<el-col :span="11">
|
||
<el-time-picker placeholder="选择时间" v-model="form.date2" style="width: 100%"></el-time-picker>
|
||
</el-col>
|
||
</el-form-item>
|
||
<el-form-item label="类型">
|
||
<el-select v-model="form.region" placeholder="请选择类型">
|
||
<el-option label="小汽车" value="car"></el-option>
|
||
<el-option label="公交车" value="bus"></el-option>
|
||
<el-option label="卡车" value="kache"></el-option>
|
||
<el-option label="非机动车" value="feji"></el-option>
|
||
<el-option label="行人" value="xingren"></el-option>
|
||
</el-select>
|
||
</el-form-item>
|
||
<el-form-item label="车牌">
|
||
<el-input v-model="form.name"></el-input>
|
||
</el-form-item>
|
||
<el-form-item label="车道">
|
||
<el-input v-model="form.name"></el-input>
|
||
</el-form-item>
|
||
|
||
<el-form-item label="事件">
|
||
<el-input type="textarea" v-model="form.desc"></el-input>
|
||
</el-form-item>
|
||
<el-form-item label="速度" v-if="form.resource == '实时（触发）'">
|
||
<el-input v-model="form.name"></el-input>
|
||
</el-form-item>
|
||
<el-form-item label="车头时距" v-if="form.resource == '实时（触发）'">
|
||
<el-input v-model="form.name"></el-input>
|
||
</el-form-item>
|
||
<el-form-item label="平均速度" v-if="form.resource == '间隔'">
|
||
<el-input v-model="form.name"></el-input>
|
||
</el-form-item>
|
||
<el-form-item label="平均流量" v-if="form.resource == '间隔'">
|
||
<el-input v-model="form.name"></el-input>
|
||
</el-form-item>
|
||
<el-form-item>
|
||
<el-button type="primary" @click="onSubmit">立即创建</el-button>
|
||
<el-button @click="dialogFormVisible = false">取消</el-button>
|
||
</el-form-item>
|
||
</el-form>
|
||
</el-dialog>
|
||
<el-dialog title="区域组件配置" width="40%" :visible.sync="areaComponent">
|
||
<el-form ref="form" :model="areaComponentform" label-width="80px">
|
||
<el-form-item label="实时性">
|
||
<el-radio-group v-model="areaComponentform.resource">
|
||
<el-radio label="实时（触发）"></el-radio>
|
||
<el-radio label="实时（秒级）"></el-radio>
|
||
<el-radio label="间隔"></el-radio>
|
||
</el-radio-group>
|
||
</el-form-item>
|
||
<!-- <el-form-item label="活动名称">
|
||
<el-input v-model="form.name"></el-input>
|
||
</el-form-item> -->
|
||
<el-form-item label="时间">
|
||
<el-col :span="11">
|
||
<el-date-picker
|
||
type="date"
|
||
placeholder="选择日期"
|
||
v-model="areaComponentform.date1"
|
||
style="width: 100%"
|
||
></el-date-picker>
|
||
</el-col>
|
||
<el-col class="line" :span="2">-</el-col>
|
||
<el-col :span="11">
|
||
<el-time-picker placeholder="选择时间" v-model="areaComponentform.date2" style="width: 100%"></el-time-picker>
|
||
</el-col>
|
||
</el-form-item>
|
||
<el-form-item label="类型">
|
||
<el-select v-model="areaComponentform.region" placeholder="请选择类型">
|
||
<el-option label="小汽车" value="car"></el-option>
|
||
<el-option label="公交车" value="bus"></el-option>
|
||
<el-option label="卡车" value="kache"></el-option>
|
||
<el-option label="非机动车" value="feji"></el-option>
|
||
<el-option label="行人" value="xingren"></el-option>
|
||
</el-select>
|
||
</el-form-item>
|
||
|
||
<el-form-item label="车牌" v-if="areaComponentform.resource == '实时（触发）'">
|
||
<el-input v-model="areaComponentform.name"></el-input>
|
||
</el-form-item>
|
||
<el-form-item
|
||
label="车道"
|
||
v-if="areaComponentform.resource == '实时（触发）' || areaComponentform.resource == '实时（秒级）'"
|
||
>
|
||
<el-input v-model="areaComponentform.name"></el-input>
|
||
</el-form-item>
|
||
|
||
<el-form-item label="事件" v-if="areaComponentform.resource == '实时（触发）'">
|
||
<el-input type="textarea" v-model="areaComponentform.desc"></el-input>
|
||
</el-form-item>
|
||
<el-form-item label="速度" v-if="areaComponentform.resource == '实时（触发）'">
|
||
<el-input v-model="areaComponentform.name"></el-input>
|
||
</el-form-item>
|
||
<el-form-item label="车头时距" v-if="areaComponentform.resource == '实时（触发）'">
|
||
<el-input v-model="areaComponentform.name"></el-input>
|
||
</el-form-item>
|
||
<!--间隔-->
|
||
<el-form-item label="进入流量" v-if="areaComponentform.resource == '间隔'">
|
||
<el-input v-model="areaComponentform.name"></el-input>
|
||
</el-form-item>
|
||
<el-form-item label="驶离流量" v-if="areaComponentform.resource == '间隔'">
|
||
<el-input v-model="areaComponentform.name"></el-input>
|
||
</el-form-item>
|
||
<el-form-item label="平均速度" v-if="areaComponentform.resource == '间隔'">
|
||
<el-input v-model="areaComponentform.name"></el-input>
|
||
</el-form-item>
|
||
<el-form-item label="平均占有率" v-if="areaComponentform.resource == '间隔'">
|
||
<el-input v-model="areaComponentform.name"></el-input>
|
||
</el-form-item>
|
||
<el-form-item label="平均排队数" v-if="areaComponentform.resource == '间隔'">
|
||
<el-input v-model="areaComponentform.name"></el-input>
|
||
</el-form-item>
|
||
<el-form-item label="平均检测数" v-if="areaComponentform.resource == '间隔'">
|
||
<el-input v-model="areaComponentform.name"></el-input>
|
||
</el-form-item>
|
||
<el-form-item label="平均延误" v-if="areaComponentform.resource == '间隔'">
|
||
<el-input v-model="areaComponentform.name"></el-input>
|
||
</el-form-item>
|
||
<el-form-item label="拥堵状态" v-if="areaComponentform.resource == '间隔'">
|
||
<el-input v-model="areaComponentform.name"></el-input>
|
||
</el-form-item>
|
||
<!-- 实时（秒级） -->
|
||
<el-form-item label="排队数" v-if="areaComponentform.resource == '实时（秒级）'">
|
||
<el-input v-model="areaComponentform.name"></el-input>
|
||
</el-form-item>
|
||
<el-form-item label="检测数" v-if="areaComponentform.resource == '实时（秒级）'">
|
||
<el-input v-model="areaComponentform.name"></el-input>
|
||
</el-form-item>
|
||
<el-form-item label="占用状态" v-if="areaComponentform.resource == '实时（秒级）'">
|
||
<el-input v-model="areaComponentform.name"></el-input>
|
||
</el-form-item>
|
||
<el-form-item label="拥堵状态" v-if="areaComponentform.resource == '实时（秒级）'">
|
||
<el-input v-model="areaComponentform.name"></el-input>
|
||
</el-form-item>
|
||
<el-form-item>
|
||
<el-button type="primary" @click="onSubmit">立即创建</el-button>
|
||
<el-button @click="dialogFormVisible = false">取消</el-button>
|
||
</el-form-item>
|
||
</el-form>
|
||
</el-dialog>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import mqtt from 'mqtt'; // mqtt协议
|
||
import editModal from '@/views/bounced/maintenanceRemind';
|
||
import analysisConfiguration from '@/views/bounced/analysisConfiguration';
|
||
|
||
import axios from 'axios';
|
||
export default {
|
||
data() {
|
||
return {
|
||
hideBoxShow: true, //隐藏箱子按钮显示隐藏
|
||
closeStatus: null,
|
||
modelOthers: false,
|
||
componentShow: '',
|
||
isShowBtn: true, //菜单按钮隐藏
|
||
isShowBtn1: false, //菜单按钮显示
|
||
inputVal: '',
|
||
dialogFormVisible: false,
|
||
areaComponent: false,
|
||
indexModule: false,
|
||
form: {
|
||
name: '',
|
||
region: '',
|
||
date1: '',
|
||
date2: '',
|
||
delivery: false,
|
||
type: [],
|
||
resource: '实时（触发）',
|
||
desc: ''
|
||
},
|
||
areaComponentform: {
|
||
name: '',
|
||
region: '',
|
||
date1: '',
|
||
date2: '',
|
||
delivery: false,
|
||
type: [],
|
||
resource: '实时（触发）',
|
||
desc: ''
|
||
},
|
||
// dateTime: this.$moment(new Date()).format("LL"),
|
||
nowTime: '',
|
||
// weekday: this.$moment().format("dddd"),
|
||
ins: 0,
|
||
imgUrl: '',
|
||
imgUrl1: '',
|
||
imgUrl2: '',
|
||
imgUrl3: '',
|
||
imgUrl4: '',
|
||
imgUrl5: '',
|
||
btnPic: [],
|
||
Data: [
|
||
{
|
||
title: 'xx路口',
|
||
url: ''
|
||
},
|
||
{
|
||
title: '数据看板',
|
||
url: ''
|
||
},
|
||
{
|
||
title: '分析配置',
|
||
url: ''
|
||
},
|
||
{
|
||
title: '分析配置',
|
||
url: ''
|
||
}
|
||
],
|
||
statusInfo: [
|
||
{
|
||
count: 15,
|
||
name: '穿梭车在线数量',
|
||
// icon: require("../assets/images/运行设备图标.png"),
|
||
color: '#01A8FC'
|
||
},
|
||
{
|
||
count: 26,
|
||
name: '任务数量',
|
||
// icon: require("../assets/images/故障设备图标.png"),
|
||
color: '#FDA401'
|
||
}
|
||
],
|
||
messageInfo: [],
|
||
orderList: [],
|
||
enterList: [],
|
||
stockInfo: [],
|
||
perCent: 0,
|
||
perCent1: 0,
|
||
perCent2: 0,
|
||
facToal: '',
|
||
wbContent: '',
|
||
// wxContent:'',
|
||
inContent: '',
|
||
outContent: '',
|
||
containerDetails: '',
|
||
locdesc: '',
|
||
weatherItem: {},
|
||
loadingShow1: true,
|
||
carInfo: [], //小车信息
|
||
carName: '',
|
||
palletizerInfo: [], //码垛机信息
|
||
palletizerName: '',
|
||
destackerInfo: [], //拆垛机信息
|
||
destackerName: '',
|
||
hoistInfo: [], //提升机信息’
|
||
hoistName: '',
|
||
battaryStationInfo: [], //快换电池装置
|
||
battaryStationName: '',
|
||
conveyorInfo: [], //输送机信息
|
||
conveyorName: ''
|
||
};
|
||
},
|
||
mounted() {
|
||
// this.getMessage();
|
||
// 消息提醒
|
||
// getfacKeepRecord({ type: 0 }).then((res) => {
|
||
// this.messageInfo = this.messageInfo.concat(res.data);
|
||
// console.log(this.messageInfo, ",,qweqw");
|
||
// // this.messageInfo.push(res.data[1])
|
||
// });
|
||
// this.getDataByMqtt()
|
||
// this.getstatus();
|
||
// this.getInhouse();
|
||
// this.getOuthouse();
|
||
// this.handleWather();
|
||
// this.getDeviceStatusData()
|
||
},
|
||
created() {
|
||
this.testMqtt();
|
||
},
|
||
methods: {
|
||
// 测试：mqtt测试
|
||
testMqtt() {
|
||
this.getDataByMqtt();
|
||
// 小车订阅
|
||
// for (let key in this.carId) {
|
||
// this.getDataByMqtt(
|
||
// // "ws:ht.mqtt.umayle.com:2022/mqtt",
|
||
// "ws:220.163.114.157:8083/mqtt",
|
||
// "Car" + key,
|
||
// this.carId[key]
|
||
// );
|
||
// }
|
||
// //输送机入库订阅
|
||
// for (let i = 0; i < this.convoyorCIdGroup.length; i++) {
|
||
// this.getDataByMqtt(
|
||
// "ws:220.163.114.157:8083/mqtt",
|
||
// "InConvoyor" + this.convoyorCIdGroup[i],
|
||
// this.convoyorCIdGroup[i]
|
||
// );
|
||
// }
|
||
|
||
// //输送机出库订阅
|
||
// for (let i = 0; i < this.outConvoyorCIdGroup.length; i++) {
|
||
// this.getDataByMqtt(
|
||
// "ws:220.163.114.157:8083/mqtt",
|
||
// "OUTConvoyor" + this.outConvoyorCIdGroup[i],
|
||
// this.outConvoyorCIdGroup[i]
|
||
// );
|
||
// }
|
||
|
||
// for (let key in this.BattaryArr) {
|
||
// this.getDataByMqtt(
|
||
// "ws:220.163.114.157:8083/mqtt",
|
||
// "Battary_Sation" + key,
|
||
// this.BattaryArr[key]
|
||
// );
|
||
// }
|
||
// // 升降机订阅elvArr
|
||
// for (let key in this.elvArr) {
|
||
// this.getDataByMqtt(
|
||
// "ws:220.163.114.157:8083/mqtt",
|
||
// "ELV" + key,
|
||
// this.elvArr[key]
|
||
// );
|
||
// }
|
||
// // 拆码跺机订阅
|
||
// for (let key in this.stampArr) {
|
||
// this.getDataByMqtt(
|
||
// "ws:220.163.114.157:8083/mqtt",
|
||
// "INCMD" + key,
|
||
// this.stampArr[key]
|
||
// );
|
||
// }
|
||
},
|
||
onSubmit() {},
|
||
//模型加载等待
|
||
loadingShow(data) {
|
||
this.loadingShow1 = data;
|
||
},
|
||
// mqtt订阅（独立）
|
||
getDataByMqtt(url, topic, cIdNum) {
|
||
const clientId = 'test_id_' + String(new Date().getTime()); // 用户名
|
||
// const host = 'ws://49.234.27.18:10087/'; // 一个测试用url，改成给的，ws://broker.emqx.io:8083/mqtt
|
||
let host = `ws://${ip}:10087`;
|
||
if (process.env.NODE_ENV === 'development') {
|
||
host = 'ws://172.16.1.168:10087/';
|
||
}
|
||
// const host = 'ws://172.16.1.168:10087/';
|
||
|
||
const options = {
|
||
// 配置
|
||
// 测试：订阅本机IP
|
||
host: host,
|
||
// port: port,
|
||
// host:"172.16.1.168:10086",
|
||
keepalive: 60, // 心跳时间，默认60s，设置为0禁用
|
||
username: 'admin', // 用户名（可选）
|
||
password: '123456', // 密码（可选）
|
||
clientId: clientId, // 客户端ID，默认随机生成
|
||
protocolId: 'MQTT',
|
||
protocolVersion: 4,
|
||
clean: true, // false在离线时接收QoS1和2的消息
|
||
reconnectPeriod: 2000, // 重连间隔，默认1000毫秒
|
||
connectTimeout: 30 * 1000, // 收到CONNACK之前的等待时间
|
||
will: {
|
||
// 遗嘱消息（客户端严重断开连接时Broker将自动发送的消息）
|
||
topic: 'img1', // 要发布的主题
|
||
payload: '[MQTT-TEST] 遗嘱消息：连接异常断开！', // 要发布的消息
|
||
qos: 0, // QoS(Quality of Service)，QoS0：只负责发，QoS1：保证消息至少送达1次，QoS2：保证消息到且仅到1次
|
||
retain: false // 保留标志
|
||
}
|
||
};
|
||
if (this.mqttClient == undefined) {
|
||
this.mqttClient = mqtt.connect(host, options); // 连接
|
||
// const client = mqtt.connect(host, options); // 连接
|
||
// const client = mqtt.connect(host) // 连接
|
||
// 错误回调
|
||
console.log('this.mqttClient', this.mqttClient);
|
||
this.mqttClient.on('error', (err) => {
|
||
console.log('[MQTT-TEST] 连接错误：', err);
|
||
this.mqttClient.end();
|
||
});
|
||
// 重连回调
|
||
this.mqttClient.on('reconnect', (reconnect) => {
|
||
console.log('[MQTT-TEST] 重连中……', reconnect);
|
||
});
|
||
// 连接回调
|
||
this.mqttClient.on('connect', (connect) => {
|
||
console.log('[MQTT-TEST] 已连接的客户端ID: ', connect);
|
||
// 订阅
|
||
this.mqttClient.subscribe('img0', { qos: 0 });
|
||
this.mqttClient.subscribe('img1', { qos: 0 });
|
||
this.mqttClient.subscribe('img2', { qos: 0 });
|
||
this.mqttClient.subscribe('img3', { qos: 0 });
|
||
this.mqttClient.subscribe('img4', { qos: 0 });
|
||
this.mqttClient.subscribe('img5', { qos: 0 });
|
||
this.mqttClient.subscribe('stream0', { qos: 0 });
|
||
this.mqttClient.subscribe('stream1', { qos: 0 });
|
||
this.mqttClient.subscribe('stream2', { qos: 0 });
|
||
this.mqttClient.subscribe('stream3', { qos: 0 });
|
||
this.mqttClient.subscribe('stream4', { qos: 0 });
|
||
this.mqttClient.subscribe('stream5', { qos: 0 });
|
||
});
|
||
// 接收回调
|
||
this.mqttClient.on('message', (topic, message, packet) => {
|
||
console.log('[MQTT-TEST] 已连接的客户端ID: ', message);
|
||
|
||
console.log(
|
||
`[MQTT-TEST] 从主题 "${topic}" 收到的内容: ${message.toString()}`,
|
||
new Date(),
|
||
new Date().getMilliseconds()
|
||
);
|
||
// 解析后端数据
|
||
// let dataReceived = JSON.parse(message.toString());
|
||
// console.log("[MQTT-TEST] 已连接的客户端ID: ",dataReceived);
|
||
// 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) //msg为转换后的JSON数据
|
||
// this.imgUrl='data:image/png;base64,' + msg.pic;
|
||
// console.log("imageUrl",imageUrl)
|
||
// }catch{
|
||
// let imageType = 'arraybuffer';
|
||
// const blob = new Blob([message], { type: imageType })
|
||
// const imageUrl = (window.URL || window.webkitURL).createObjectURL(blob)
|
||
// console.log("imageUrl",imageUrl)
|
||
// }
|
||
if (topic.indexOf('img0') != -1) {
|
||
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); //msg为转换后的JSON数据
|
||
this.imgUrl = 'data:image/png;base64,' + msg.pic;
|
||
console.log('imageUrl', imageUrl);
|
||
} catch {
|
||
let imageType = 'arraybuffer';
|
||
const blob = new Blob([message], { type: imageType });
|
||
const imageUrl = (window.URL || window.webkitURL).createObjectURL(blob);
|
||
console.log('imageUrl', imageUrl);
|
||
}
|
||
} else if (topic.indexOf('img1') != -1) {
|
||
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); //msg为转换后的JSON数据
|
||
this.imgUrl1 = 'data:image/png;base64,' + msg.pic;
|
||
console.log('imageUrl', imageUrl);
|
||
} catch {
|
||
let imageType = 'arraybuffer';
|
||
const blob = new Blob([message], { type: imageType });
|
||
const imageUrl = (window.URL || window.webkitURL).createObjectURL(blob);
|
||
console.log('imageUrl', imageUrl);
|
||
}
|
||
} else if (topic.indexOf('img2') != -1) {
|
||
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); //msg为转换后的JSON数据
|
||
this.imgUrl2 = 'data:image/png;base64,' + msg.pic;
|
||
console.log('imageUrl', imageUrl);
|
||
} catch {
|
||
let imageType = 'arraybuffer';
|
||
const blob = new Blob([message], { type: imageType });
|
||
const imageUrl = (window.URL || window.webkitURL).createObjectURL(blob);
|
||
console.log('imageUrl', imageUrl);
|
||
}
|
||
} else if (topic.indexOf('img3') != -1) {
|
||
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); //msg为转换后的JSON数据
|
||
this.imgUrl3 = 'data:image/png;base64,' + msg.pic;
|
||
console.log('imageUrl', imageUrl);
|
||
} catch {
|
||
let imageType = 'arraybuffer';
|
||
const blob = new Blob([message], { type: imageType });
|
||
const imageUrl = (window.URL || window.webkitURL).createObjectURL(blob);
|
||
console.log('imageUrl', imageUrl);
|
||
}
|
||
} else if (topic.indexOf('img4') != -1) {
|
||
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); //msg为转换后的JSON数据
|
||
this.imgUrl4 = 'data:image/png;base64,' + msg.pic;
|
||
console.log('imageUrl', imageUrl);
|
||
} catch {
|
||
let imageType = 'arraybuffer';
|
||
const blob = new Blob([message], { type: imageType });
|
||
const imageUrl = (window.URL || window.webkitURL).createObjectURL(blob);
|
||
console.log('imageUrl', imageUrl);
|
||
}
|
||
} else if (topic.indexOf('img5') != -1) {
|
||
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); //msg为转换后的JSON数据
|
||
this.imgUrl5 = 'data:image/png;base64,' + msg.pic;
|
||
console.log('imageUrl', imageUrl);
|
||
} catch {
|
||
let imageType = 'arraybuffer';
|
||
const blob = new Blob([message], { type: imageType });
|
||
const imageUrl = (window.URL || window.webkitURL).createObjectURL(blob);
|
||
console.log('imageUrl', imageUrl);
|
||
}
|
||
} else if (topic.indexOf('stream0') != -1) {
|
||
console.log(
|
||
`[MQTT-TEST] 从主题 "${topic}" 收到的内容: ${message.toString()}`,
|
||
new Date(),
|
||
new Date().getMilliseconds()
|
||
);
|
||
} else if (topic.indexOf('stream0') != -1) {
|
||
console.log(
|
||
`[MQTT-TEST] 从主题 "${topic}" 收到的内容: ${message.toString()}`,
|
||
new Date(),
|
||
new Date().getMilliseconds()
|
||
);
|
||
} else if (topic.indexOf('stream1') != -1) {
|
||
console.log(
|
||
`[MQTT-TEST] 从主题 "${topic}" 收到的内容: ${message.toString()}`,
|
||
new Date(),
|
||
new Date().getMilliseconds()
|
||
);
|
||
} else if (topic.indexOf('stream2') != -1) {
|
||
console.log(
|
||
`[MQTT-TEST] 从主题 "${topic}" 收到的内容: ${message.toString()}`,
|
||
new Date(),
|
||
new Date().getMilliseconds()
|
||
);
|
||
} else if (topic.indexOf('stream3') != -1) {
|
||
console.log(
|
||
`[MQTT-TEST] 从主题 "${topic}" 收到的内容: ${message.toString()}`,
|
||
new Date(),
|
||
new Date().getMilliseconds()
|
||
);
|
||
} else if (topic.indexOf('stream4') != -1) {
|
||
console.log(
|
||
`[MQTT-TEST] 从主题 "${topic}" 收到的内容: ${message.toString()}`,
|
||
new Date(),
|
||
new Date().getMilliseconds()
|
||
);
|
||
} else if (topic.indexOf('stream5') != -1) {
|
||
console.log(
|
||
`[MQTT-TEST] 从主题 "${topic}" 收到的内容: ${message.toString()}`,
|
||
new Date(),
|
||
new Date().getMilliseconds()
|
||
);
|
||
}
|
||
});
|
||
}
|
||
},
|
||
|
||
handleSearch() {
|
||
this.modelOthers = true;
|
||
this.$refs.htModels.finbBox(this.inputVal);
|
||
console.log(this.$refs.htModels, 'asdasdasd');
|
||
this.inputVal = '';
|
||
},
|
||
handleRow(val) {
|
||
this.modelOthers = true;
|
||
this.$refs.htModels.finbBox(val);
|
||
},
|
||
// 天气
|
||
handleWather() {
|
||
axios({
|
||
url: 'https://restapi.amap.com/v3/weather/weatherInfo?key=bc2b906032fdd8a63cbd0790d656b1d7&city=620100',
|
||
methods: ''
|
||
}).then((res) => {
|
||
this.weatherItem = res.data.lives[0];
|
||
console.log(this.weatherItem, 'asdsads');
|
||
});
|
||
},
|
||
Onweather(name) {
|
||
// switch (name) {
|
||
// case "多云":
|
||
// return require('../assets/weather/Cloudy .png');
|
||
// case "阴":
|
||
// return require('../assets/weather/Cloudy .png')
|
||
// case "暴雨":
|
||
// return require('../assets/weather/rainstorm.png')
|
||
// case "冰雹":
|
||
// return require('../assets/weather/hail.png')
|
||
// case "大风":
|
||
// return require('../assets/weather/gale.png')
|
||
// case "大雪":
|
||
// return require('../assets/weather/bigsnow.png')
|
||
// case "大雨":
|
||
// return require('../assets/weather/bigrain.png')
|
||
// case "雷电":
|
||
// return require('../assets/weather/thunder.png')
|
||
// case "雷阵雨":
|
||
// return require('../assets/weather/shower.png')
|
||
// case "沙尘暴":
|
||
// return require('../assets/weather/sand.png')
|
||
// case "晴":
|
||
// return require('../assets/weather/sun.png')
|
||
// case "雾霾":
|
||
// return require('../assets/weather/smog.png')
|
||
// case "小雪":
|
||
// return require('../assets/weather/snow.png')
|
||
// case "小雨":
|
||
// return require('../assets/weather/rain.png')
|
||
// case "雪":
|
||
// return require('../assets/weather/rainlitter.png')
|
||
// case "多云":
|
||
// return require('../assets/weather/night.png')
|
||
// case "雨夹雪":
|
||
// return require('../assets/weather/rainsnow.png')
|
||
// case "月亮":
|
||
// return require('../assets/weather/moon.png')
|
||
// case "中雪":
|
||
// return require('../assets/weather/mieddlesnow.png')
|
||
// case "中雨":
|
||
// return require('../assets/weather/middlerain.png')
|
||
// }
|
||
},
|
||
//隐藏箱子
|
||
hideBox() {
|
||
this.$refs.htModels.handleFirstBox();
|
||
}
|
||
},
|
||
components: {
|
||
editModal,
|
||
analysisConfiguration
|
||
}
|
||
};
|
||
</script>
|
||
<style scoped>
|
||
.el-form .el-form-item {
|
||
margin-bottom: 15px !important;
|
||
}
|
||
</style>
|