Merge branch 'master' of https://git.lgzn.space/chengdandan/TransFlow
This commit is contained in:
commit
e300f6dfd3
|
|
@ -4277,6 +4277,14 @@
|
|||
"batch-processor": "1.0.0"
|
||||
}
|
||||
},
|
||||
"element-resize-event-polyfill": {
|
||||
"version": "1.0.5",
|
||||
"resolved": "https://registry.npmjs.org/element-resize-event-polyfill/-/element-resize-event-polyfill-1.0.5.tgz",
|
||||
"integrity": "sha512-HWjhWQIi8Ilw8YWyX5O4b7L2AIQE9SMP+LFoHrr6b1ZLIUIpqybA5eU3v2uWAnE0ptCxyLTT92IgLTehWldIfQ==",
|
||||
"requires": {
|
||||
"resize-observer-polyfill": "^1.5.1"
|
||||
}
|
||||
},
|
||||
"element-ui": {
|
||||
"version": "2.15.6",
|
||||
"resolved": "https://registry.npmmirror.com/element-ui/-/element-ui-2.15.6.tgz",
|
||||
|
|
@ -6254,6 +6262,11 @@
|
|||
"integrity": "sha1-FC0RHzpuPa6PSpr9d9RYVbWpzOM=",
|
||||
"dev": true
|
||||
},
|
||||
"jquery": {
|
||||
"version": "3.6.4",
|
||||
"resolved": "https://registry.npmjs.org/jquery/-/jquery-3.6.4.tgz",
|
||||
"integrity": "sha512-v28EW9DWDFpzcD9O5iyJXg3R3+q+mET5JhnjJzQUZMHOv67bpSIHq81GEYpPNZHG+XXHsfSme3nxp/hndKEcsQ=="
|
||||
},
|
||||
"js-base64": {
|
||||
"version": "2.6.4",
|
||||
"resolved": "https://registry.npmjs.org/js-base64/-/js-base64-2.6.4.tgz",
|
||||
|
|
@ -7113,6 +7126,23 @@
|
|||
"integrity": "sha1-iZ8R2WhuXgXLkbNdXw5jt3PPyQE=",
|
||||
"dev": true
|
||||
},
|
||||
"mxdraw": {
|
||||
"version": "0.1.139",
|
||||
"resolved": "https://registry.npmjs.org/mxdraw/-/mxdraw-0.1.139.tgz",
|
||||
"integrity": "sha512-SNkPfASEr6qzLQq6sUAqRXZ2hyyPrDFdtPb2GtPQRFsfQsvP6k8Er1Kpw/JJtw45fTOh2k3UzpHUTw+Ixb9r9Q==",
|
||||
"requires": {
|
||||
"element-resize-event-polyfill": "^1.0.5",
|
||||
"jquery": "^3.6.0",
|
||||
"lodash": "^4.17.21"
|
||||
},
|
||||
"dependencies": {
|
||||
"lodash": {
|
||||
"version": "4.17.21",
|
||||
"resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
|
||||
"integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg=="
|
||||
}
|
||||
}
|
||||
},
|
||||
"mz": {
|
||||
"version": "2.7.0",
|
||||
"resolved": "https://registry.npm.taobao.org/mz/download/mz-2.7.0.tgz",
|
||||
|
|
|
|||
|
|
@ -17,6 +17,7 @@
|
|||
"mavon-editor": "^2.6.17",
|
||||
"moment": "^2.29.4",
|
||||
"mqtt": "^4.3.7",
|
||||
"mxdraw": "^0.1.139",
|
||||
"node-sass": "^5.0.0",
|
||||
"os": "^0.1.2",
|
||||
"sass-loader": "^10.1.0",
|
||||
|
|
|
|||
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
|
|
@ -1,24 +0,0 @@
|
|||
{
|
||||
"code": 200,
|
||||
"msg": "成功",
|
||||
"data": {
|
||||
"analysisSettingId": "e1af117da47e402d9b30e7cc499a158f",
|
||||
"cameraPositionLongitude": "1",
|
||||
"cameraPositionLatitude": "3",
|
||||
"licensePlateRecognitionSwitch": "1",
|
||||
"parkingDisplacement": 1,
|
||||
"parkingSpeed": 6,
|
||||
"coordinateTransformationId": "7ab32c790ec34b95a58e18b8bad8e46c",
|
||||
"utmArea": 10,
|
||||
"hemisphere": "南",
|
||||
"coordinateTransformation": "其他",
|
||||
"pointData": [{
|
||||
"pointId": "b0c734bfa81f41d8909b74b983429146",
|
||||
"pointName": "点2",
|
||||
"longitude": "1",
|
||||
"latitude": "1",
|
||||
"imageXCoordinate": "17.17",
|
||||
"imageYCoordinate": "1065.16"
|
||||
}]
|
||||
}
|
||||
}
|
||||
|
|
@ -136,8 +136,9 @@
|
|||
};
|
||||
//unity初始化
|
||||
function OnSceneLoaded(){
|
||||
window.parent.OnScene();
|
||||
black.style.display = "none";
|
||||
window.parent.OnScene();
|
||||
|
||||
}
|
||||
//初始化传离线视频数据功能
|
||||
function lixianVideo(string){
|
||||
|
|
@ -155,7 +156,6 @@
|
|||
}
|
||||
//获取图像
|
||||
function getDestination(string){
|
||||
// console.log("string",string)
|
||||
if(unity!=null){
|
||||
unity.SendMessage('AAA', 'SendImage', string);
|
||||
}
|
||||
|
|
@ -263,10 +263,18 @@
|
|||
|
||||
}
|
||||
//新增获取颜色
|
||||
function addColor(){
|
||||
function addColor(string,string1){
|
||||
// console.log("i1111",string)
|
||||
// console.log("i1111",string1)
|
||||
if(unity!=null){
|
||||
unity.SendMessage("GameManager",'Unity_AllGraphicsNotified','');
|
||||
unity.SendMessage("GameManager",'Unity_AllGraphicsNotified');
|
||||
}
|
||||
}
|
||||
//传参mqtt
|
||||
function ZhuanFaMQTT(topic,msg){
|
||||
|
||||
window.parent.getZhuanFaMQTT(topic,msg);
|
||||
//
|
||||
}
|
||||
document.body.appendChild(script);
|
||||
|
||||
|
|
|
|||
Binary file not shown.
Binary file not shown.
File diff suppressed because one or more lines are too long
Binary file not shown.
|
|
@ -1 +0,0 @@
|
|||
http://172.16.1.168:5000
|
||||
|
|
@ -1,20 +0,0 @@
|
|||
{
|
||||
"code": 200,
|
||||
"msg": "成功",
|
||||
"data": [{
|
||||
"graphicId": "35fb0709596841e5b005fb1bc33a0fa4",
|
||||
"graphicName": "测试区域",
|
||||
"graphicType": "区域",
|
||||
"coordinate": "218.6106 984.2285,453.5649 994.1006,267.9708 820.3528,218.6106 984.2285"
|
||||
}, {
|
||||
"graphicId": "957eb7cba61240f5a099ee6080bd29f0",
|
||||
"graphicName": "测试路线2",
|
||||
"graphicType": "轨迹",
|
||||
"coordinate": "157.404 236.9287,179.1225 260.6216,192.9433 300.1097,202.8154 329.7258,214.6618 357.3675,222.5594 392.9068,236.3803 424.4973,258.0987 446.2157,289.6892 465.9598,317.3309 485.7039,350.8958 503.4735,382.4863 509.3967,420 517.2943,467.3858 521.2432,508.8483 525.192,556.234 525.192,599.671 525.192,631.2614 525.192,662.8519 513.3455,690.4936 499.5247,712.2121 477.8062,724.0585 444.2413,728.0073 412.6508,745.777 386.9836,775.3931 377.1115,806.9836 379.0859"
|
||||
}, {
|
||||
"graphicId": "7c24aa16e12840859164780d71827f5f",
|
||||
"graphicName": "测试线2",
|
||||
"graphicType": "断面",
|
||||
"coordinate": "437.7697 642.6563,880.0366 737.4278"
|
||||
}]
|
||||
}
|
||||
|
|
@ -1 +0,0 @@
|
|||
{"Keys":["com.unity.services.core.version"],"Values":[{"m_Value":"1.3.1","m_IsReadOnly":true}]}
|
||||
Binary file not shown.
Binary file not shown.
Binary file not shown.
|
|
@ -39,6 +39,18 @@ export const getStopAlgorithm = params => {
|
|||
params
|
||||
});
|
||||
};
|
||||
//分析-传视频类型设置接口
|
||||
// http://localhost:5000/api/SetVideoMode?Mode=离线视频
|
||||
export const getSetVideoMode = params => {
|
||||
return axios.get('api/SetVideoMode', {
|
||||
params
|
||||
});
|
||||
};
|
||||
export const getVideoMode = params => {
|
||||
return axios.get('api/GetVideoMode', {
|
||||
params
|
||||
});
|
||||
};
|
||||
//分析-删除视频源接口
|
||||
export const getDeleteShipjk = params => {
|
||||
return axios.get('api/DeleteShipjk', {
|
||||
|
|
|
|||
|
|
@ -102,7 +102,8 @@ a {
|
|||
/* 控制左侧二级菜单栏的宽度 */
|
||||
right: 0;
|
||||
/* top: 70px; */
|
||||
top: 40px;
|
||||
/* top: 40px; */
|
||||
top: 30px;
|
||||
bottom: 0;
|
||||
overflow-y: scroll;
|
||||
padding: 10px 20px;
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@
|
|||
<span style="font-size:18px;">{{ componentName + '-' + chartName + '-' + '均值图'+'-'+status }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div id="barChart" ref="barChart" style="width: 100%; height: 300px"></div>
|
||||
<div id="barChart" ref="barChart" style="width: 705px; height: 300px"></div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@
|
|||
<span style="font-size:18px;">{{ componentName + '-' + chartName + '-' + '柱状图'+'-'+status }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div id="barChart" ref="barChart" style="width:100%;height:300px;"></div>
|
||||
<div id="barChart" ref="barChart" style="width:705px;height:300px;"></div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@
|
|||
}}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div id="lineChart" ref="lineChart" style="width: 100%; height: 300px"></div>
|
||||
<div id="lineChart" ref="lineChart" style="width: 705px; height: 300px"></div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@
|
|||
<span style="font-size:18px;">{{this.componentName + '-' + this.chartName + '-' + '饼状图'+'-'+status, }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div id="pieChart" ref="pieChart" style="width:100%;height:300px;"></div>
|
||||
<div id="pieChart" ref="pieChart" style="width:705px;height:300px;"></div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<div id="thermalChart" ref="thermalChart" style="width: 100%; height: 300px"></div>
|
||||
<div id="thermalChart" ref="thermalChart" style="width: 705px; height: 300px"></div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
|
|
|||
|
|
@ -22,15 +22,15 @@
|
|||
<!-- </div> -->
|
||||
|
||||
<!-- 切换主题 -->
|
||||
<div @click="handleChangeStyle()">
|
||||
<!-- <div @click="handleChangeStyle()">
|
||||
<el-tooltip content="切换主题" placement="bottom">
|
||||
<i :class="globalTheme ? 'el-icon-moon' : 'el-icon-sunny'"></i>
|
||||
</el-tooltip>
|
||||
</div>
|
||||
</div> -->
|
||||
<!-- 用户头像 -->
|
||||
<div class="user-avator">
|
||||
<!-- <div class="user-avator">
|
||||
<img src="@/assets/img/img.jpg"/>
|
||||
</div>
|
||||
</div> -->
|
||||
<!-- 用户名下拉菜单 -->
|
||||
<el-dropdown class="user-name" trigger="click" @command="handleCommand">
|
||||
<span class="el-dropdown-link"> {{ username }} <i class="el-icon-caret-bottom"></i></span>
|
||||
|
|
@ -333,7 +333,8 @@ export default {
|
|||
align-items: center;
|
||||
justify-content: center;
|
||||
/* height: 70px; */
|
||||
height: 45px;
|
||||
/* height: 45px; */
|
||||
height: 35px;
|
||||
}
|
||||
.user-avator {
|
||||
margin-left: 20px;
|
||||
|
|
|
|||
|
|
@ -35,4 +35,11 @@ export default {
|
|||
// editFigure: `http://${ipUurl}:5000/api/EditTuxmc`,
|
||||
// //编辑保存组件弹窗传参
|
||||
// editComponent: `http://${ipUurl}:5000/api/SetMonqjkzjcs`,
|
||||
// //保存主机名称
|
||||
// editRoleApi: `http://${ipUurl}:5000/api/EditZhangh`,
|
||||
// saveRoleApi: `http://${ipUurl}:5000/api/AddZhangh`,
|
||||
// saveSetFtppz: `http://${ipUurl}:5000/api/SetFtppz`,
|
||||
// //编辑保存组件弹窗传参
|
||||
// setHostName: `http://${ipUurl}:5000/api/SetHostName`,
|
||||
// setHostTime: `http://${ipUurl}:5000/api/SetHostTime`
|
||||
};
|
||||
|
|
|
|||
27
src/main.js
27
src/main.js
|
|
@ -77,8 +77,7 @@ var currentTopics = null;
|
|||
var client = null;
|
||||
var callback = null;
|
||||
let mqtt = new mqttConfig(currentTopics);
|
||||
|
||||
window.PubScribe = function (topic, number, _callback) {
|
||||
window.PubScribe = function (topic, number, _callback,) {
|
||||
callback = _callback;
|
||||
if (currentTopics != null) {
|
||||
//取消currentTopics主题订阅
|
||||
|
|
@ -87,20 +86,24 @@ window.PubScribe = function (topic, number, _callback) {
|
|||
currentTopics = null;
|
||||
}
|
||||
}
|
||||
|
||||
// mqtt = mqttConfig;
|
||||
if (client == null) {
|
||||
|
||||
client = mqtt.createConnect(() => {
|
||||
client.subscribe(['hert', 'img0', 'img1', 'img2', 'img3', 'img4', 'img5', 'img6', 'img7'], {
|
||||
client.subscribe(['hert', 'img0', 'img1', 'img2', 'img3', 'img4', 'img5', 'img6', 'img7','Contorl_server'], {
|
||||
qos: 0
|
||||
}, (err) => {
|
||||
if (!err) {
|
||||
console.log("订阅成功0", ['hert', 'img0', 'img1', 'img2', 'img3', 'img4', 'img5', 'img6', 'img7']);
|
||||
console.log("订阅成功0", ['hert', 'img0', 'img1', 'img2', 'img3', 'img4', 'img5', 'img6', 'img7','Contorl_server']);
|
||||
client.publish('msg_stream', JSON.stringify({
|
||||
"msg_flag": parseInt(number)
|
||||
}))
|
||||
if(number== -1 &&number!= '001'){
|
||||
client.publish('Custom',JSON.stringify({"type":'getImage',"videoid":'all'}))
|
||||
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
client.on("message", (topic, message) => {
|
||||
//数据分类
|
||||
try {
|
||||
|
|
@ -123,7 +126,9 @@ window.PubScribe = function (topic, number, _callback) {
|
|||
client.publish('msg_stream', JSON.stringify({
|
||||
"msg_flag": parseInt(number)
|
||||
}))
|
||||
// }, 1000);
|
||||
// if(number!= -1 &&number!= '001' ){
|
||||
// client.publish('Custom',JSON.stringify({"type":'getImage',"videoid":videoid}))
|
||||
// }
|
||||
|
||||
} else {
|
||||
console.log('消息订阅失败！')
|
||||
|
|
@ -133,7 +138,13 @@ window.PubScribe = function (topic, number, _callback) {
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
window.publish = function(topic,message){
|
||||
if(mqtt.mqttClient.connected == true){
|
||||
// console.log("topic",topic)
|
||||
// console.log("message",message)
|
||||
client.publish(topic, message)
|
||||
}
|
||||
}
|
||||
new Vue({
|
||||
el: '#app',
|
||||
router,
|
||||
|
|
|
|||
|
|
@ -35,8 +35,8 @@ export default {
|
|||
data() {
|
||||
return {
|
||||
param: {
|
||||
username: 'admin',
|
||||
password: '123456'
|
||||
username: '',
|
||||
password: ''
|
||||
},
|
||||
checked: false,
|
||||
rules: {
|
||||
|
|
@ -46,24 +46,38 @@ export default {
|
|||
};
|
||||
},
|
||||
created() {
|
||||
this.getType();
|
||||
|
||||
},
|
||||
methods: {
|
||||
getType() {
|
||||
let datas = {
|
||||
telephone: '13088888888',
|
||||
typeCode: 2
|
||||
account:this.param.username,
|
||||
passsword:this.param.password,
|
||||
};
|
||||
loginApi(datas).then(res => {
|
||||
console.log('c', res);
|
||||
});
|
||||
},
|
||||
submitForm() {
|
||||
|
||||
this.$refs.login.validate(valid => {
|
||||
if (valid) {
|
||||
this.$message.success('登录成功');
|
||||
localStorage.setItem('ms_username', this.param.username);
|
||||
this.$router.push('/');
|
||||
loginApi({
|
||||
Account:this.param.username,
|
||||
Password:this.param.password,
|
||||
}).then(res => {
|
||||
console.log('c', res);
|
||||
if(res.data.code==200){
|
||||
this.$message.success('登录成功');
|
||||
localStorage.setItem('ms_username', this.param.username);
|
||||
this.$router.push('/');
|
||||
}else{
|
||||
this.$message({
|
||||
message: res.data.msg,
|
||||
type: 'warning'
|
||||
});
|
||||
}
|
||||
});
|
||||
} else {
|
||||
this.$message.error('请输入账号和密码');
|
||||
console.log('error submit!!');
|
||||
|
|
|
|||
|
|
@ -36,7 +36,6 @@ class mqttHandle {
|
|||
//配置链接
|
||||
const { host, port, endpoint, ...options } = this.connect;
|
||||
console.log("this.connect.host",this.connect.host)
|
||||
// const connectUrl = `ws://${this.connect.host}:${this.connect.port}${this.connect.endpoint}`;
|
||||
const connectUrl = 'ws://172.16.1.168:10087/';
|
||||
// const connectUrl = `ws://${this.connect.host}:${this.connect.port}`;
|
||||
// if (!client.connected) {
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@
|
|||
<div class="videoTypeBox" v-if="videoTypeShow">
|
||||
<el-form :inline="true" :model="videoTypeForm" class="demo-form-inline" >
|
||||
<el-form-item label="视频源类型：" >
|
||||
<el-radio-group v-model="videoTypeForm.videoType">
|
||||
<el-radio-group v-model="videoTypeForm.videoType" @change="changeRadio">
|
||||
<el-radio label="实时视频"></el-radio>
|
||||
<el-radio label="离线视频"></el-radio>
|
||||
</el-radio-group>
|
||||
|
|
@ -13,8 +13,8 @@
|
|||
</div>
|
||||
<div>
|
||||
<el-row>
|
||||
<el-col :span="6" v-for="(item, index) in videoList" :key="item.id" :offset="index > 0 ? 0 : 0" >
|
||||
<el-card :body-style="{ padding: '0px' }" class="card" >
|
||||
<el-col :span="6" v-for="(item, index) in videoList" :key="item.id" :offset="index > 0 ? 0 : 0" ref="typeCard" >
|
||||
<el-card :body-style="{ padding: '0px' }" class="card" :loading="loading">
|
||||
<div class="type">
|
||||
<img src="@/assets/img/AnalysisMain/leftTop.png" alt="" v-if="item.type=='实时视频'">
|
||||
<img src="@/assets/img/AnalysisMain/leftTop2.png" alt="" v-if="item.type=='离线视频'">
|
||||
|
|
@ -28,11 +28,18 @@
|
|||
<span class="statusName" v-if="item.type=='实时视频'">{{ item.status }}</span>
|
||||
<span class="statusName" v-if="item.type=='离线视频'">{{ item.videoAnalysisStatus }}</span>
|
||||
</div>
|
||||
<!-- <div class="middleN" v-if="item.type=='离线视频'&&item.videoAnalysisStatus=='分析中'"> -->
|
||||
<div class="middleN" v-if=" (item.type=='离线视频' && item.videoAnalysisStatus=='分析中') || (item.type=='离线视频' &&item.videoAnalysisStatus=='未分析')">
|
||||
|
||||
<el-progress type="circle" :percentage="item.numSatus" text-color='#fff'></el-progress>
|
||||
</div>
|
||||
|
||||
<div class="typeRight">
|
||||
<el-button type="primary" icon="el-icon-refresh-right" @click="openRight(item)" v-if="item.type=='离线视频'&&item.videoAnalysisStatus=='未分析'"></el-button>
|
||||
<el-button type="primary" icon="el-icon-refresh-right" @click="openRight(item)" v-if="item.type=='离线视频'&&item.videoAnalysisStatus=='分析异常'"></el-button>
|
||||
</div>
|
||||
<!-- <div class="del" @click="open(item.id)"> <i class='el-icon-delete'></i></div> -->
|
||||
<img :src="item.img" class="image" @click="goToPage(item.id,item.num,item.title,item.type,item.status)">
|
||||
<img :src="item.img" class="image" @click="goToPage(item.videoAnalysisStatus
|
||||
,item.id,item.num,item.title,item.type,item.status,item.msg,item.videoPath)">
|
||||
<div class="bot">
|
||||
<span style=" vertical-align: middle;">
|
||||
<img src="@/assets/img/AnalysisMain/video (1).png" alt="">
|
||||
|
|
@ -41,7 +48,8 @@
|
|||
<div class="bottom clearfix">
|
||||
<time class="time">{{ item.title }}</time>
|
||||
<!-- <el-button type="text" class="button">操作按钮</el-button> -->
|
||||
<div class="streamAddress" :content="item.videoStreamAddress!=''? item.videoStreamAddress:item.videoPath">{{item.videoStreamAddress!=''? item.videoStreamAddress:item.videoPath}}</div>
|
||||
<!-- <div class="streamAddress" :content="item.videoStreamAddress!=''? item.videoStreamAddress:item.videoPath">{{item.videoStreamAddress!=''? item.videoStreamAddress:item.videoPath}}</div> -->
|
||||
<div class="streamAddress" :content="item.videoStreamAddress!=''? item.videoStreamAddress:item.videoPath">{{item.videoStreamAddress!=''? item.videoStreamAddress:item.videoPath}}</div>
|
||||
</div>
|
||||
|
||||
<div class="st">
|
||||
|
|
@ -76,6 +84,7 @@
|
|||
title="视频源配置"
|
||||
width="40%"
|
||||
:visible.sync="dialogFormVisible"
|
||||
:close-on-click-modal="false"
|
||||
>
|
||||
<!-- <editModal ></editModal> -->
|
||||
<el-form :model="form">
|
||||
|
|
@ -94,6 +103,14 @@
|
|||
</el-input>
|
||||
<!-- <el-input v-model="form.videoStreamAddress" autocomplete="off" style="width:80%"></el-input> -->
|
||||
</el-form-item>
|
||||
<el-form-item label="车牌识别开关：" :label-width="formLabelWidth" v-if="videoTypeForm.videoType=='离线视频'">
|
||||
<el-switch
|
||||
v-model="form.LicensePlateRecognitionSwitch"
|
||||
active-value="1"
|
||||
inactive-value="0"
|
||||
@change="changeChepai($event)"
|
||||
></el-switch>
|
||||
</el-form-item>
|
||||
<el-form-item label="离线视频上传" :label-width="formLabelWidth" v-if="videoTypeForm.videoType=='离线视频'">
|
||||
<!-- <el-button slot="trigger" size="small" type="primary">选取文件</el-button> -->
|
||||
<input type="file" id="fileExport" @change="handleFileChange" ref="inputer">
|
||||
|
|
@ -110,6 +127,7 @@
|
|||
<div slot="tip" class="el-upload__tip">上传文件名称请勿空格！</div>
|
||||
</el-upload> -->
|
||||
</el-form-item>
|
||||
|
||||
</el-form>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button @click="dialogFormVisible = false" :disabled="dis">取 消</el-button>
|
||||
|
|
@ -125,13 +143,11 @@
|
|||
|
||||
<script>
|
||||
import editModal from "@/views/bounced/maintenanceRemind";
|
||||
import {getGetShipjk,getDeleteShipjk,getApplication,getStopAlgorithm,startVideoAnalysis} from "../api/index";
|
||||
import {getGetShipjk,getDeleteShipjk,getApplication,getStopAlgorithm,startVideoAnalysis,getSetVideoMode,getVideoMode} from "../api/index";
|
||||
import serverUrl from "../config/apiurl.js"
|
||||
import axios from 'axios'
|
||||
import mqttConfig from "@/utils/mqttConfig.js";
|
||||
var mqtt; //mqtt 处理对象（全局变量）
|
||||
var client;
|
||||
const os = require('os');
|
||||
|
||||
export default {
|
||||
data(){
|
||||
return{
|
||||
|
|
@ -148,49 +164,92 @@ export default {
|
|||
fileList: [],
|
||||
form: {
|
||||
radio:'',
|
||||
videoName:'测试视频01',
|
||||
videoName:'视频01',
|
||||
city:'',
|
||||
videoStreamAddress:'',
|
||||
videoPath:''
|
||||
videoPath:'',
|
||||
numSatus:0,
|
||||
LicensePlateRecognitionSwitch:0
|
||||
},
|
||||
formLabelWidth: '120px',
|
||||
formLabelWidth: '200px',
|
||||
videoTypeForm:{
|
||||
// videoType:'实时视频'
|
||||
videoType:'离线视频'
|
||||
videoType:'实时视频'
|
||||
// videoType:'离线视频'
|
||||
},
|
||||
videoList:[],
|
||||
fullscreenLoading: false,
|
||||
ip:'',
|
||||
numSatus:0,
|
||||
newNumber:0,
|
||||
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
console.log("dialogFormVisible",this.dialogFormVisible)
|
||||
// console.log("11111111", this.getIPAddress())
|
||||
|
||||
|
||||
this.getVideoList()
|
||||
this.createMqtt()
|
||||
|
||||
},
|
||||
|
||||
//离开当前页面后执行
|
||||
destroyed: function () {
|
||||
// console.log("离开当前页")
|
||||
// client.end();
|
||||
},
|
||||
created() {
|
||||
this.getVideoList()
|
||||
|
||||
|
||||
},
|
||||
mounted() {
|
||||
this.createMqtt()
|
||||
|
||||
},
|
||||
watch: {
|
||||
videoList: {
|
||||
handler(newVal) {
|
||||
if (newVal) {
|
||||
newVal.forEach((item)=>{
|
||||
if(item.status=='加载中'){
|
||||
console.log("加载中",item)
|
||||
setTimeout(() => {
|
||||
this.getVideoList()
|
||||
}, 10000);
|
||||
}
|
||||
|
||||
})
|
||||
}
|
||||
},
|
||||
deep: true
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
changeChepai(){},
|
||||
//传输视频源类型
|
||||
SetVideoMode(val){
|
||||
getSetVideoMode({Mode:val}).then(res=>{
|
||||
console.log("res",res)
|
||||
})
|
||||
},
|
||||
changeRadio(){
|
||||
this.SetVideoMode(this.videoTypeForm.videoType)
|
||||
},
|
||||
//获取视频源类型
|
||||
getVideoType(){
|
||||
getVideoMode().then(res=>{
|
||||
console.log("res",res.data.data)
|
||||
this.videoTypeForm.videoType = res.data.data
|
||||
})
|
||||
},
|
||||
/** 创建mqtt */
|
||||
createMqtt() {
|
||||
|
||||
//创建链接，接收数据
|
||||
if(this.videoTypeForm.videoType=='实时视频'){
|
||||
window.PubScribe(null,-1,this.realInfo);
|
||||
console.log("this.videoTypeForm.videoType",this.videoTypeForm.videoType)
|
||||
window.PubScribe(null,-1,this.realInfo,'videoId');
|
||||
window.publish('Custom',JSON.stringify({"type":'getImage',"videoid":'all'}));
|
||||
}else if(this.videoTypeForm.videoType=='离线视频'){
|
||||
console.log("this.videoTypeForm.videoType",this.videoTypeForm.videoType)
|
||||
this.topicSends = ['VideoStatusData'];
|
||||
window.PubScribe(this.topicSends,-1, this.realInfo);
|
||||
window.PubScribe(this.topicSends,'001', this.realInfo,'videoId');
|
||||
}
|
||||
|
||||
|
||||
},
|
||||
//停止订阅mqtt
|
||||
disConnect() {
|
||||
|
|
@ -221,11 +280,12 @@ destroyed: function () {
|
|||
// var newArr = []
|
||||
//msg为转换后的JSON数据
|
||||
if(msg.rate=='low'){
|
||||
// console.log("msg", msg)
|
||||
console.log("msg", msg)
|
||||
if(this.videoList.length!=0){
|
||||
for (let i = 0; i < this.videoList.length; i++) {
|
||||
if(msg.id==this.videoList[i].id){
|
||||
this.videoList[i].img ='data:image/png;base64,' + msg.pic
|
||||
this.videoList[i].msg = msg
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -260,7 +320,8 @@ destroyed: function () {
|
|||
const temp = utf8decoder.decode(u8arr) // 将二进制数据转为字符串
|
||||
const msg = JSON.parse(temp) //这一步报错则返回的是二进制流图片，不报错则返回的是JSON的错误提示数据
|
||||
console.log("VideoStatusData", msg) //msg为转换后的JSON数据
|
||||
|
||||
this.changeStatus(msg)
|
||||
|
||||
|
||||
} catch (error) {
|
||||
|
||||
|
|
@ -269,19 +330,63 @@ destroyed: function () {
|
|||
}
|
||||
this.receiveNews = "";
|
||||
},
|
||||
changeStatus(msg){
|
||||
for (let i = 0; i < this.videoList.length; i++) {
|
||||
//分析中
|
||||
|
||||
if(msg.type=='video_under_analysis'&&msg.video_id==this.videoList[i].id){
|
||||
var numSatusN=''
|
||||
// loadingcard.close();
|
||||
this.videoList[i].videoAnalysisStatus = '分析中'
|
||||
numSatusN=msg.number_frames/msg.total_frames*100
|
||||
this.videoList[i].numSatus =parseFloat(numSatusN.toFixed(2))
|
||||
}else if(msg.type=='video_analyzed'&&msg.video_id==this.videoList[i].id){
|
||||
//已分析
|
||||
console.log("已分析")
|
||||
this.videoList[i].videoAnalysisStatus = '已分析'
|
||||
}else if(msg.type=='video_analyse_unusual'&&msg.video_id==this.videoList[i].id){
|
||||
//分析异常
|
||||
console.log("分析异常")
|
||||
this.videoList[i].videoAnalysisStatus = '分析异常'
|
||||
}else if(msg.type=='video_loading'&&msg.video_id==this.videoList[i].id){
|
||||
//分析异常
|
||||
console.log("加载中")
|
||||
this.videoList[i].videoAnalysisStatus = '加载中'
|
||||
}
|
||||
}
|
||||
|
||||
},
|
||||
generateMixed(n) {
|
||||
var chars = ['0','1','2','3','4','5','6','7','8','9',
|
||||
'A','B','C','D','E','F','G','H','I','J','K','L','M',
|
||||
'N','O','P','Q','R','S','T','U','V','W','X','Y','Z'];
|
||||
var res = "";
|
||||
for(var i = 0; i < n ; i++) {
|
||||
var id = Math.floor(Math.random()*36);
|
||||
res += chars[id];
|
||||
}
|
||||
return res;
|
||||
},
|
||||
informationInfo(data,item) {
|
||||
console.log("data",data)
|
||||
|
||||
if(data=='新增'){
|
||||
var random = this.generateMixed(3)
|
||||
console.log("random",random)
|
||||
// console.log("this.file",this.file)
|
||||
// this.file = undefined
|
||||
console.log("this.$refs.inputer",this.$refs.inputer)
|
||||
this.form={
|
||||
radio: '',
|
||||
videoName:'测试视频01',
|
||||
videoName:'视频'+random,
|
||||
city:'',
|
||||
videoStreamAddress:'',
|
||||
videoPath:''
|
||||
LicensePlateRecognitionSwitch:0,
|
||||
videoPath:''
|
||||
},
|
||||
|
||||
|
||||
this.dialogFormVisible = true;
|
||||
}
|
||||
|
||||
|
||||
},
|
||||
open(item) {
|
||||
|
|
@ -338,9 +443,10 @@ destroyed: function () {
|
|||
let formData = new FormData();
|
||||
formData.append("VideoName",form.videoName);
|
||||
formData.append("VideoType",this.videoTypeForm.videoType);
|
||||
window.publish('Custom',JSON.stringify({"type":'getImage',"videoid":'all'}));
|
||||
if(this.videoTypeForm.videoType=='离线视频'){
|
||||
formData.append("VideoPath",form.videoStreamAddress);
|
||||
|
||||
formData.append("LicensePlateRecognitionSwitch",form.LicensePlateRecognitionSwitch)
|
||||
}else{
|
||||
formData.append("VideoStreamAddress",form.videoStreamAddress);
|
||||
}
|
||||
|
|
@ -381,13 +487,13 @@ destroyed: function () {
|
|||
|
||||
},
|
||||
handleFileChange(e) {
|
||||
console.log("e",e)
|
||||
let inputDOM = this.$refs.inputer;
|
||||
this.file = inputDOM.files[0];// 通过DOM取文件数据
|
||||
|
||||
},
|
||||
//应用
|
||||
applicationBtn(){
|
||||
// this.createMqtt()
|
||||
getApplication().then(res=>{
|
||||
console.log("res",res)
|
||||
if(res.data.code==200){
|
||||
|
|
@ -397,13 +503,23 @@ destroyed: function () {
|
|||
spinner: 'el-icon-loading',
|
||||
background: 'rgba(0, 0, 0, 0.7)'
|
||||
});
|
||||
|
||||
|
||||
setTimeout(() => {
|
||||
loading.close();
|
||||
this.getVideoList()
|
||||
|
||||
setTimeout(() => {
|
||||
this.getVideoList()
|
||||
|
||||
}, 5000);
|
||||
|
||||
this.$message({
|
||||
message: res.data.msg,
|
||||
type: 'success'
|
||||
});
|
||||
// setTimeout(() => {
|
||||
// window.publish('Custom',JSON.stringify({"type":'getImage',"videoid":'all'}));
|
||||
// }, 3000);
|
||||
}, 15000);
|
||||
}
|
||||
})
|
||||
|
|
@ -435,13 +551,7 @@ destroyed: function () {
|
|||
let fileStart = 0;
|
||||
let fileEnd = bufferSize;
|
||||
let arrFile = [];
|
||||
var loadingN = this.$loading({
|
||||
lock: true,
|
||||
text: '正在上传中',
|
||||
target: '.el-dialog',
|
||||
spinner: 'el-icon-loading',
|
||||
background: 'rgba(0, 0, 0, 0.7)'
|
||||
});
|
||||
|
||||
while (fileStart < size) {
|
||||
var fileInfo = {
|
||||
File: this.file.slice(fileStart, fileEnd),
|
||||
|
|
@ -452,6 +562,15 @@ destroyed: function () {
|
|||
fileStart = fileEnd;
|
||||
fileEnd = fileStart + bufferSize;
|
||||
}
|
||||
let newNumber= 0
|
||||
var loadingN = this.$loading({
|
||||
lock: true,
|
||||
text: newNumber +'/'+arrFile.length,
|
||||
target: '.el-dialog',
|
||||
spinner: 'el-icon-loading',
|
||||
background: 'rgba(0, 0, 0, 0.7)'
|
||||
});
|
||||
console.log("loadingN",loadingN.text)
|
||||
let count = arrFile.length;
|
||||
let filename = this.file.name + "~" + this.guid();
|
||||
for (var i = 0; i < count; i++) {
|
||||
|
|
@ -467,7 +586,10 @@ destroyed: function () {
|
|||
|
||||
}else{
|
||||
if(r.data.data==null){
|
||||
this.dis = true
|
||||
this.dis = true
|
||||
// var newN = i
|
||||
this.newNumber = newNumber++
|
||||
loadingN.text = this.newNumber +'/'+arrFile.length
|
||||
}else{
|
||||
this.dis = false
|
||||
loadingN.close();
|
||||
|
|
@ -484,13 +606,25 @@ destroyed: function () {
|
|||
});
|
||||
}
|
||||
},
|
||||
goToPage(id,num,name,type,status) {
|
||||
goToPage(videoAnalysisStatus,id,num,name,type,status,msg,videoPath) {
|
||||
console.log("id",id)
|
||||
console.log("num",num)
|
||||
console.log("name",name)
|
||||
console.log("type",type)
|
||||
console.log("status",status)
|
||||
this.$router.push({path:'index',query: {id:id,num:num,name:name,type:type,status:status}})
|
||||
console.log("msg",msg)
|
||||
console.log("videoAnalysisStatus",videoAnalysisStatus)
|
||||
if(type=='离线视频'){
|
||||
if(videoAnalysisStatus!='已分析'){
|
||||
|
||||
}else if(videoAnalysisStatus=='已分析'){
|
||||
this.$router.push({path:'index',query: {id:id,num:num,name:name,type:type,status:status,msg:msg,videoPath:videoPath}})
|
||||
}
|
||||
}else{
|
||||
this.$router.push({path:'index',query: {id:id,num:num,name:name,type:type,status:status,msg:msg,videoPath:videoPath}})
|
||||
}
|
||||
|
||||
|
||||
|
||||
},
|
||||
//获取视频数据
|
||||
|
|
@ -498,7 +632,21 @@ destroyed: function () {
|
|||
getGetShipjk().then(res=>{
|
||||
console.log("res",res)
|
||||
if(res.data.msg=='成功'){
|
||||
|
||||
// if(val=='重启'){
|
||||
setTimeout(() => {
|
||||
window.publish('Custom',JSON.stringify({"type":'getImage',"videoid":'all'}));
|
||||
}, 2000);
|
||||
// }
|
||||
if(res.data.data.length!=0){
|
||||
this.videoTypeForm.videoType = res.data.data[0].videoType
|
||||
if(this.videoTypeForm.videoType=='离线视频'){
|
||||
this.createMqtt()
|
||||
}
|
||||
this.getVideoType()
|
||||
}else{
|
||||
this.SetVideoMode(this.videoTypeForm.videoType)
|
||||
}
|
||||
// console.log("this.videoTypeForm.videoType",this.videoTypeForm.videoType)
|
||||
var arr = [];
|
||||
res.data.data.forEach((item)=>{
|
||||
arr.push({
|
||||
|
|
@ -510,18 +658,21 @@ destroyed: function () {
|
|||
videoStreamAddress:item.videoStreamAddress,
|
||||
videoPath:item.videoPath,
|
||||
img: require('@/assets/img/AnalysisMain/img1.png'),
|
||||
// img:'',
|
||||
trafficAnalysisStatus:item.trafficAnalysisStatus,
|
||||
videoAnalysisStatus:item.videoAnalysisStatus,
|
||||
numberFrames:item.numberFrames,
|
||||
totalFrames:item.totalFrames,
|
||||
numSatus:0,
|
||||
msg:{},
|
||||
});
|
||||
})
|
||||
this.videoList=arr
|
||||
this.videoTypeForm.videoType = this.videoList[0].type
|
||||
if(this.videoList.length=='0'){
|
||||
this.videoTypeShow = true
|
||||
}else{
|
||||
this.videoTypeShow = false
|
||||
}
|
||||
console.log("this.videoList",this.videoList)
|
||||
}
|
||||
})
|
||||
},
|
||||
|
|
@ -624,6 +775,12 @@ destroyed: function () {
|
|||
top: 5px;
|
||||
z-index: 98;
|
||||
}
|
||||
.middleN{
|
||||
position: absolute;
|
||||
left: 35%;
|
||||
top: 15%;
|
||||
z-index: 98;
|
||||
}
|
||||
.del{
|
||||
position: absolute;
|
||||
right: 0px;
|
||||
|
|
@ -664,6 +821,15 @@ destroyed: function () {
|
|||
z-index: 99;
|
||||
color: #eee;
|
||||
}
|
||||
.middleN .el-progress__text {
|
||||
color: #fff;
|
||||
}
|
||||
.el-loading-spinner{
|
||||
font-size: 30px;
|
||||
}
|
||||
.el-loading-text{
|
||||
font-size: 18px!important;
|
||||
}
|
||||
.el_dialog {
|
||||
position: fixed;
|
||||
width: 100%;
|
||||
|
|
@ -676,6 +842,7 @@ destroyed: function () {
|
|||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.el_dialog__content {
|
||||
width: v-bind(width1);
|
||||
height: 400px;
|
||||
|
|
|
|||
|
|
@ -18,9 +18,10 @@
|
|||
|
||||
<h1 class="mar-top20">系统性能状态</h1>
|
||||
<el-form :model="performance" label-position="left" label-width="200px" style="width:70%">
|
||||
<el-form-item label="正常运行时长：">{{ performance.runTime }}</el-form-item>
|
||||
<!-- <el-form-item label="正常运行时长：">{{ performance.runTime }}</el-form-item> -->
|
||||
<el-form-item label="平均Cpu利用率：">{{ performance.averageCpuUtilization }}</el-form-item>
|
||||
<el-form-item label="Cpu利用率：">{{ performance.cpuUtilization }}</el-form-item>
|
||||
<el-form-item label="Cpu利用率："><span v-for="s in performance.cpuUtilization"
|
||||
:key="s">{{ s +'%'}} | </span> </el-form-item>
|
||||
<el-form-item label="Cpu温度：">{{ performance.cpuTemperature }}</el-form-item>
|
||||
<el-form-item label="Cpu名称：">{{ performance.cpuName }}</el-form-item>
|
||||
<el-form-item label="Gpu利用率：">{{ performance.gpuUtilization }}</el-form-item>
|
||||
|
|
@ -31,7 +32,7 @@
|
|||
<el-form-item label="虚拟内存总计：">{{ performance.totalVirtualMemory }}</el-form-item>
|
||||
</el-form>
|
||||
|
||||
<el-table class="mar-top20" :data="mountingPointTable" border style="width: 100%">
|
||||
<!-- <el-table class="mar-top20" :data="mountingPointTable" border style="width: 100%">
|
||||
<el-table-column prop="mountingPoint" label="安装点">
|
||||
</el-table-column>
|
||||
<el-table-column prop="equipmentName" label="设备名称">
|
||||
|
|
@ -46,7 +47,7 @@
|
|||
{{ scope.row.total }}GB
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</el-table> -->
|
||||
|
||||
|
||||
<h1 class="mar-top20">系统网络状态</h1>
|
||||
|
|
@ -140,7 +141,68 @@ export default {
|
|||
},
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.createMqtt()
|
||||
// setTimeout(() => {
|
||||
// this.createMqtt()
|
||||
// }, 3000);
|
||||
},
|
||||
mounted() {
|
||||
|
||||
window.setInterval( () => { //每隔30秒自动请求一次方法 this.getdata() ，保证数据实时的更新
|
||||
this.publishClient()
|
||||
}, 1000 * 5 )
|
||||
},
|
||||
methods: {
|
||||
/** 创建mqtt */
|
||||
createMqtt() {
|
||||
window.publish('Contorl_client',JSON.stringify({"type":"getStatus"}));
|
||||
//创建链接，接收数据
|
||||
var topicSends = ['Contorl_server'];
|
||||
window.PubScribe(topicSends,-1,this.realInfo);
|
||||
|
||||
},
|
||||
publishClient(){
|
||||
window.publish('Contorl_client',JSON.stringify({"type":"getStatus"}));
|
||||
},
|
||||
/** 实时数据分类 */
|
||||
realInfo(topic, message) {
|
||||
// console.log("topic",topic)
|
||||
switch (topic) {
|
||||
case "Contorl_server":
|
||||
try {
|
||||
// console.log("message",message)
|
||||
const utf8decoder = new TextDecoder()
|
||||
const u8arr = new Uint8Array(message)
|
||||
const temp = utf8decoder.decode(u8arr) // 将二进制数据转为字符串
|
||||
const msg = JSON.parse(temp) //这一步报错则返回的是二进制流图片，不报错则返回的是JSON的错误提示数据
|
||||
// console.log("msg",msg)
|
||||
this.runningState.currentTime = msg.now_time
|
||||
this.runningState.startTime = msg.starttime
|
||||
this.runningState.runTime = msg.uptime
|
||||
//平均Cpu利用率
|
||||
this.performance.averageCpuUtilization = msg.cpu_Average+'%'
|
||||
this.performance.cpuUtilization = msg.cpu_Every
|
||||
this.performance.cpuTemperature = msg.cpu_Temperature+"°C"
|
||||
this.performance.cpuName = msg.cpu_Name
|
||||
this.performance.gpuUtilization = msg.gpu_Average+'%'
|
||||
this.performance.gpuTemperature = msg.gpu_Temperature+"°C"
|
||||
var newmemoryUsed = msg.memory_used/1024/1024/1024
|
||||
this.performance.memoryUsage = msg.memory_percent+'%'+' | '+ newmemoryUsed.toFixed(2)+'GB'
|
||||
var totalMemoryN = msg.memory_total/1024/1024/1024
|
||||
this.performance.totalMemory = totalMemoryN.toFixed(2)+'GB'
|
||||
var newswapUsed = msg.swap_used/1024/1024/1024
|
||||
this.performance.virtualMemoryUsed = msg.swap_percent+'%' +' | '+ newswapUsed.toFixed(2)+'GB'
|
||||
var totalVirtualMemoryN = msg.swap_total/1024/1024/1024
|
||||
this.performance.totalVirtualMemory = totalVirtualMemoryN.toFixed(2)+'GB'
|
||||
} catch (error) {
|
||||
|
||||
}
|
||||
break;
|
||||
}
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
|
|
|
|||
|
|
@ -278,6 +278,15 @@
|
|||
<el-switch
|
||||
v-model="licensePlateform.licensePlateClose"
|
||||
active-value="1"
|
||||
v-if="this.$route.query.type=='实时视频'"
|
||||
inactive-value="0"
|
||||
@change="changeChepai($event)"
|
||||
></el-switch>
|
||||
<el-switch
|
||||
v-model="licensePlateform.licensePlateClose"
|
||||
active-value="1"
|
||||
disabled
|
||||
v-if="this.$route.query.type=='离线视频'"
|
||||
inactive-value="0"
|
||||
@change="changeChepai($event)"
|
||||
></el-switch>
|
||||
|
|
@ -646,18 +655,25 @@ export default {
|
|||
}
|
||||
],
|
||||
internalIpList: [],
|
||||
fileList: []
|
||||
fileList: [],
|
||||
number:'',
|
||||
lixianImg:''
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
analysisConfigurationdata: {
|
||||
handler: function(old, newV) {
|
||||
// console.log("old",old)
|
||||
// console.log("newV",newV)
|
||||
if (newV != null && this.unityDone == true) {
|
||||
console.log("old",old)
|
||||
console.log("newV",newV)
|
||||
if(this.$route.query.type=='离线视频'){
|
||||
this.lixianImg= old
|
||||
}else{
|
||||
if (newV != null && this.unityDone == true) {
|
||||
console.log(newV, 'yyy');
|
||||
this.$refs.analysisWeb.contentWindow.getDestination(newV);
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
},
|
||||
|
|
@ -675,6 +691,7 @@ export default {
|
|||
// this.load()
|
||||
// }, 5000);// 这样每次都会触发
|
||||
// }
|
||||
this.number = this.$route.query.num;
|
||||
getFeixpz({ VideoId: this.$route.query.id }).then(res => {
|
||||
this.sizeForm.longitude = res.data.data.cameraPositionLongitude;
|
||||
this.sizeForm.latitude = res.data.data.cameraPositionLatitude;
|
||||
|
|
@ -740,9 +757,22 @@ export default {
|
|||
OnSceneload(newV) {
|
||||
var ip = window.location.host;
|
||||
this.ipData = 'http://' + ip.split(':')[0] + ':5000';
|
||||
// this.$refs.analysisWeb.contentWindow.getIpData('http://172.16.1.168:5000');
|
||||
this.$refs.analysisWeb.contentWindow.getIpData('http://172.16.1.168:5000');
|
||||
// this.$refs.analysisWeb.contentWindow.getIpData(this.ipData);
|
||||
this.$refs.analysisWeb.contentWindow.getDianwei(this.$route.query.id);
|
||||
this.unityDone = true;
|
||||
window.publish('Custom',JSON.stringify({"type":'getImage',"videoid":this.$route.query.id}));
|
||||
if(this.$route.query.type=='实时视频'){
|
||||
this.$refs.analysisWeb.contentWindow.getDestination(this.$route.query.msg);
|
||||
}
|
||||
else if(this.$route.query.type=='离线视频'){
|
||||
if(this.lixianImg!=''){
|
||||
this.$refs.analysisWeb.contentWindow.getDestination(this.lixianImg);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
// window.publish('Custom',JSON.stringify({"type":'getImage',"videoid":'all'}));
|
||||
},
|
||||
handleDeleteDian(row, idx) {
|
||||
this.$confirm('此操作将删除该点位, 是否继续?', '提示', {
|
||||
|
|
@ -1041,9 +1071,6 @@ export default {
|
|||
// mqtt订阅（独立）
|
||||
getDataByMqtt(url, topic, cIdNum) {
|
||||
// var that = this
|
||||
// that.$refs.iframe.contentWindow.getDestination(1)
|
||||
// console.log("1111",document.getElementById("mapModule"))
|
||||
// document.getElementById("mapModule").contentWindow.getDestination(1)
|
||||
const clientId = 'test_id_' + String(new Date().getTime()); // 用户名
|
||||
// const host = 'ws://49.234.27.18:10087/'; // 一个测试用url，改成给的，ws://broker.emqx.io:8083/mqtt
|
||||
var ip = window.location.host.split(":")[0];
|
||||
|
|
@ -1112,26 +1139,6 @@ export default {
|
|||
const u8arr = new Uint8Array(message);
|
||||
const temp = utf8decoder.decode(u8arr); // 将二进制数据转为字符串
|
||||
const msg = JSON.parse(temp); //这一步报错则返回的是二进制流图片，不报错则返回的是JSON的错误提示数据
|
||||
// debugger
|
||||
// console.log("msg", msg) //msg为转换后的JSON数据
|
||||
// console.log("msg.pic", msg.pic)
|
||||
// debugger
|
||||
// var that = this
|
||||
|
||||
// document.getElementById("mapModule").contentWindow.getDestination(JSON.stringify(msg))
|
||||
// window.parent.getDestination(JSON.stringify(msg));
|
||||
// debugger
|
||||
// unity.SendMessage('AAA', 'SendImage', JSON.stringify(msg));
|
||||
// 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();
|
||||
|
|
@ -1208,17 +1215,7 @@ export default {
|
|||
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()}`,
|
||||
|
|
@ -1252,7 +1249,42 @@ export default {
|
|||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
},
|
||||
/** 实时数据分类 */
|
||||
// realInfo(topic, message) {
|
||||
// switch (topic) {
|
||||
// // 接收托片
|
||||
// case 'img' + this.number:
|
||||
// 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)
|
||||
// // document.getElementById('mapModule').contentWindow.getDestination(JSON.stringify(msg));
|
||||
|
||||
// if (msg.rate == 'high') {
|
||||
// document.getElementById('mapModule').contentWindow.getDestination(JSON.stringify(msg));
|
||||
// } else {
|
||||
// this.analysisConfigurationdata = msg;
|
||||
// }
|
||||
// } catch (error) { }
|
||||
// break;
|
||||
// // 树结构
|
||||
// case 'stream' + this.number:
|
||||
// try {
|
||||
// const utf8decoder1 = new TextDecoder();
|
||||
// const u8arr = new Uint8Array(message);
|
||||
// const temp = utf8decoder1.decode(u8arr); // 将二进制数据转为字符串
|
||||
// const msg = JSON.parse(temp);
|
||||
// // console.log("msg",msg)
|
||||
// document.getElementById('mapModule').contentWindow.getData(JSON.stringify(msg));
|
||||
// } catch (error) { }
|
||||
// break;
|
||||
|
||||
// }
|
||||
// this.receiveNews = '';
|
||||
// },
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -5,8 +5,9 @@
|
|||
<el-scrollbar class="scrollbar">
|
||||
<div class="dataBoard" ref="dataBoard" v-if="activeName == 'second'">
|
||||
<!-- 断面 -->
|
||||
<!-- :class="sectionData.length <= 1 ? 'sectionBox' : 'section'" -->
|
||||
<div class="plate1" ref="plate1">
|
||||
<div :class="sectionData.length <= 1 ? 'sectionBox' : 'section'" ref="section" v-for="s in sectionData"
|
||||
<div class="section" ref="section" v-for="s in sectionData"
|
||||
:key="s.analogAreaComponentId">
|
||||
<template>
|
||||
<div ref="sectionContent">
|
||||
|
|
@ -99,6 +100,13 @@ export default {
|
|||
default() {
|
||||
return [];
|
||||
}
|
||||
},
|
||||
//历史数据
|
||||
cycleHistoryData: {
|
||||
type: Object,
|
||||
default() {
|
||||
return {};
|
||||
}
|
||||
}
|
||||
},
|
||||
data() {
|
||||
|
|
@ -133,7 +141,8 @@ export default {
|
|||
typeCycleStatistics: {},
|
||||
|
||||
// 各个组件分类
|
||||
classify: []
|
||||
classify: [],
|
||||
// cycleHistoryData:''
|
||||
};
|
||||
},
|
||||
// beforeCeated(){
|
||||
|
|
@ -141,16 +150,17 @@ export default {
|
|||
// },
|
||||
created() {
|
||||
// this.getNew()
|
||||
// console.log("cycleHistoryData",this.cycleHistoryData)
|
||||
},
|
||||
methods: {
|
||||
// 手风琴下拉切换
|
||||
handleChange(val) {
|
||||
|
||||
this.$nextTick(function () {
|
||||
var myEvent = new Event("resize");
|
||||
window.dispatchEvent(myEvent);
|
||||
});
|
||||
|
||||
// setTimeout(() => {
|
||||
// this.$nextTick(function () {
|
||||
// var myEvent = new Event("resize");
|
||||
// window.dispatchEvent(myEvent);
|
||||
// });
|
||||
// }, 3000);
|
||||
},
|
||||
getNew() {
|
||||
// this.idVal = ;
|
||||
|
|
@ -159,6 +169,7 @@ export default {
|
|||
console.log(res.data.data, '组件的数据');
|
||||
this.componentList = res.data.data;
|
||||
this.siftData();
|
||||
|
||||
}
|
||||
});
|
||||
},
|
||||
|
|
@ -174,7 +185,6 @@ export default {
|
|||
|
||||
});
|
||||
this.sectionData = this.sectionArr.map(item => {
|
||||
|
||||
item = { title: item, children: [] };
|
||||
this.acticveName = [];
|
||||
this.componentList.forEach(val => {
|
||||
|
|
@ -182,11 +192,34 @@ export default {
|
|||
this.classify.push(val);
|
||||
item.children.push(val);
|
||||
if (val.timeMode == '周期统计' || this.cycleStatisticsData.length == 0) {
|
||||
item.cycleStatisticsData = val.cycleStatisticsData
|
||||
// if(this.$route.query.type=='离线视频'){
|
||||
// if(this.cycleHistoryData.CycleStatisticsData!=undefined){
|
||||
// this.cycleHistoryData.CycleStatisticsData.forEach(ele => {
|
||||
// if(val.analogAreaComponentId == ele.component_id){
|
||||
// item.cycleStatisticsData = ele.cycleStatisticsData
|
||||
// }
|
||||
// })
|
||||
// }
|
||||
|
||||
|
||||
// }else{
|
||||
item.cycleStatisticsData = val.cycleStatisticsData
|
||||
// }
|
||||
|
||||
}
|
||||
if (val.timeMode == '周期时刻' || this.cycleTimeData.length == 0) {
|
||||
// if(this.$route.query.type=='离线视频'){
|
||||
// if(this.cycleHistoryData.CycleTimeData!=undefined){
|
||||
// this.cycleHistoryData.CycleTimeData.forEach(ele => {
|
||||
// if(val.analogAreaComponentId == ele.component_id){
|
||||
// item.cycleTimeData = ele.cycleTimeData
|
||||
// }
|
||||
// })
|
||||
// }
|
||||
|
||||
// }else{
|
||||
item.cycleTimeData = val.cycleTimeData
|
||||
|
||||
// }
|
||||
}
|
||||
}
|
||||
this.acticveName.push([val.analogAreaComponentId]);
|
||||
|
|
@ -220,7 +253,6 @@ export default {
|
|||
|
||||
//循环方法
|
||||
getRef(data, timeMode) {
|
||||
console.log(timeMode);
|
||||
for (let i = 0; i < data.length; i++) {
|
||||
let refItem = data[i]
|
||||
if (data.length != 0 && refItem.dataArr != undefined && refItem.dataArr.length != 0) {
|
||||
|
|
@ -246,6 +278,10 @@ export default {
|
|||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
//处理离线视频历史数据
|
||||
changecycleHistoryData(){
|
||||
|
||||
}
|
||||
},
|
||||
mounted() { },
|
||||
|
|
@ -261,7 +297,8 @@ export default {
|
|||
|
||||
if (newVal != undefined && newVal.length != 0) {
|
||||
newVal.forEach(ele => {
|
||||
if (ele.timeMode == '周期统计') {
|
||||
if (ele.timeMode == '周期统计'&&this.$route.query.type=='实时视频') {
|
||||
console.log("实时视频")
|
||||
this.$nextTick(() => {
|
||||
// var thatNN = this;
|
||||
ele.cycleStatisticsData.forEach(item => {
|
||||
|
|
@ -275,10 +312,43 @@ export default {
|
|||
}
|
||||
})
|
||||
}
|
||||
if (ele.timeMode == '周期时刻') {
|
||||
this.$nextTick(() => {
|
||||
ele.cycleStatisticsData.forEach(item => {
|
||||
if(ele.timeMode == '周期统计'&&this.$route.query.type=='离线视频'){
|
||||
|
||||
if(this.cycleHistoryData.CycleStatisticsData!=undefined&&this.cycleHistoryData.CycleStatisticsData.lenght!=0){
|
||||
this.cycleHistoryData.CycleStatisticsData.forEach(ne => {
|
||||
if(ne.component_id== ele.analogAreaComponentId ){
|
||||
ele.cycleStatisticsData = ne.cycleStatisticsData
|
||||
}
|
||||
|
||||
})
|
||||
this.$nextTick(() => {
|
||||
ele.cycleStatisticsData.forEach(item => {
|
||||
var timeNew = item.time.split('.')[0]
|
||||
var dateLength = timeNew.length;
|
||||
var key = timeNew.substring(dateLength-8,dateLength);
|
||||
item.time = key;
|
||||
if (item.type_data != null) {
|
||||
|
||||
this.typeCycleStatistics = item;
|
||||
}
|
||||
// thatN.$nextTick(() => {
|
||||
|
||||
})
|
||||
if (this.$refs.typeChartRef2 != undefined) {
|
||||
// // 轮循周期时刻生成的各类组件
|
||||
this.getRef(this.$refs.typeChartRef2, '周期统计')
|
||||
}
|
||||
})
|
||||
|
||||
|
||||
}
|
||||
if (ele.timeMode == '周期时刻'&&this.$route.query.type=='实时视频') {
|
||||
console.log("实时视频")
|
||||
this.$nextTick(() => {
|
||||
ele.cycleTimeData.forEach(item => {
|
||||
if (item.type_data != null) {
|
||||
item.time = item.time.split('.')[0];
|
||||
|
||||
this.typeCycleStatistics = item;
|
||||
}
|
||||
// thatN.$nextTick(() => {
|
||||
|
|
@ -290,22 +360,121 @@ export default {
|
|||
}
|
||||
})
|
||||
|
||||
|
||||
|
||||
|
||||
}
|
||||
|
||||
|
||||
} if(ele.timeMode == '周期时刻'&&this.$route.query.type=='离线视频'){
|
||||
if(this.cycleHistoryData.CycleTimeData!=undefined &&this.cycleHistoryData.CycleTimeData.lenght!=0){
|
||||
this.cycleHistoryData.CycleTimeData.forEach(ne => {
|
||||
if(ne.component_id== ele.analogAreaComponentId ){
|
||||
ele.cycleTimeData = ne.cycleTimeData
|
||||
}
|
||||
|
||||
})
|
||||
this.$nextTick(() => {
|
||||
ele.cycleTimeData.forEach(item => {
|
||||
// if(this.$route.query.type=='离线视频'){
|
||||
var timeNew = item.time.split('.')[0]
|
||||
var dateLength = timeNew.length;
|
||||
var key = timeNew.substring(dateLength-8,dateLength);
|
||||
item.time = key;
|
||||
// }else{
|
||||
// item.time = item.time.split('.')[0];
|
||||
// }
|
||||
if (item.type_data != null) {
|
||||
this.typeCycleStatistics = item;
|
||||
}
|
||||
})
|
||||
if (this.$refs.typeChartRef1 != undefined) {
|
||||
// // 轮循周期时刻生成的各类组件
|
||||
|
||||
this.getRef(this.$refs.typeChartRef1, '周期时刻')
|
||||
}
|
||||
})
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
});
|
||||
}
|
||||
},
|
||||
immediate: true,
|
||||
deep: true,
|
||||
},
|
||||
cycleHistoryData: {
|
||||
handler(newVal) {
|
||||
// debugger
|
||||
console.log("历史",newVal)
|
||||
// console.log("历史",oldVal)
|
||||
if (newVal != undefined ) {
|
||||
// newVal.forEach(ele => {
|
||||
if (newVal.CycleStatisticsData) {
|
||||
newVal.CycleStatisticsData.forEach(ele => {
|
||||
this.$nextTick(() => {
|
||||
// var thatNN = this;
|
||||
ele.cycleStatisticsData.forEach(item => {
|
||||
if (item.type_data != null) {
|
||||
if(this.$route.query.type=='离线视频'){
|
||||
var timeNew = item.time.split('.')[0]
|
||||
var dateLength = timeNew.length;
|
||||
var key = timeNew.substring(dateLength-8,dateLength);
|
||||
item.time = key;
|
||||
}else{
|
||||
item.time = item.time.split('.')[0];
|
||||
}
|
||||
this.typeCycleStatistics = item;
|
||||
}
|
||||
})
|
||||
if (this.$refs.typeChartRef2 != undefined) {
|
||||
// // 轮循周期时刻生成的各类组件
|
||||
this.getRef(this.$refs.typeChartRef2, '周期统计')
|
||||
}
|
||||
})
|
||||
})
|
||||
|
||||
}
|
||||
if (newVal.CycleTimeData) {
|
||||
newVal.CycleTimeData.forEach(ele => {
|
||||
this.$nextTick(() => {
|
||||
// debugger
|
||||
// var thatNN = this;
|
||||
ele.cycleTimeData.forEach(item => {
|
||||
if(this.$route.query.type=='离线视频'){
|
||||
var timeNew = item.time.split('.')[0]
|
||||
var dateLength = timeNew.length;
|
||||
var key = timeNew.substring(dateLength-8,dateLength);
|
||||
item.time = key;
|
||||
}else{
|
||||
item.time = item.time.split('.')[0];
|
||||
}
|
||||
if (item.type_data != null) {
|
||||
this.typeCycleStatistics = item;
|
||||
}
|
||||
|
||||
})
|
||||
if (this.$refs.typeChartRef1 != undefined) {
|
||||
// // 轮循周期时刻生成的各类组件
|
||||
this.getRef(this.$refs.typeChartRef1, '周期时刻')
|
||||
}
|
||||
})
|
||||
})
|
||||
|
||||
}
|
||||
|
||||
// });
|
||||
}
|
||||
|
||||
},
|
||||
immediate: true,
|
||||
deep: true,
|
||||
},
|
||||
// activeName:'channge',
|
||||
// 处理过的触发数据
|
||||
triggerListData: {
|
||||
handler(newVal) {
|
||||
// console.log("newVal",newVal)
|
||||
this.triggerList = newVal;
|
||||
// console.log("oldVal",oldVal)
|
||||
// 触发数据
|
||||
var _this = this
|
||||
if (newVal.length != 0 && _this.sectionData) {
|
||||
|
|
@ -315,10 +484,20 @@ export default {
|
|||
}
|
||||
newVal.forEach(item => {
|
||||
if (ele.analogAreaComponentId == item.component_id && ele.timeMode == '触发') {
|
||||
// console.log(ele.analogAreaComponentId, 'analogAreaComponentId');
|
||||
// console.log(item.component_id, 'component_id');
|
||||
if (ele.trigger.length == 10) {
|
||||
ele.trigger.pop();
|
||||
} else {
|
||||
item.time = item.time.split('.')[0];
|
||||
if(this.$route.query.type=='离线视频'){
|
||||
var timeNew = item.time.split('.')[0]
|
||||
var dateLength = timeNew.length;
|
||||
var key = timeNew.substring(dateLength-8,dateLength);
|
||||
item.time = key;
|
||||
}else{
|
||||
item.time = item.time.split('.')[0];
|
||||
}
|
||||
|
||||
// 该时间的触发数据
|
||||
if (item.type_data != null) {
|
||||
_this.typeTimeMode = item;
|
||||
|
|
@ -373,11 +552,20 @@ export default {
|
|||
thatN.classify.forEach((ele, index) => {
|
||||
|
||||
newVal.forEach(item => {
|
||||
|
||||
if (ele.analogAreaComponentId == item.component_id && ele.timeMode == '周期时刻') {
|
||||
if (ele.cycleTimeData.length == 10) {
|
||||
ele.cycleTimeData.pop();
|
||||
} else {
|
||||
item.time = item.time.split('.')[0];
|
||||
// item.time = item.time.split('.')[0];
|
||||
// if(this.$route.query.type=='离线视频'){
|
||||
// var timeNew = item.time.split('.')[0]
|
||||
// var dateLength = timeNew.length;
|
||||
// var key = timeNew.substring(dateLength-8,dateLength);
|
||||
// item.time = key;
|
||||
// }else{
|
||||
// item.time = item.time.split('.')[0];
|
||||
// }
|
||||
if (item.type_data != null) {
|
||||
// 周期时刻的类型数据
|
||||
thatN.typeCycleTimeData = item;
|
||||
|
|
@ -481,7 +669,7 @@ export default {
|
|||
//周期统计
|
||||
cycleStatisticsData: {
|
||||
handler(newVal) {
|
||||
// console.log("newVal", newVal)
|
||||
console.log("newVal", newVal)
|
||||
if (newVal != undefined && newVal.length != 0 && this.sectionData) {
|
||||
var that = this;
|
||||
that.classify.forEach((ele, index) => {
|
||||
|
|
@ -491,13 +679,19 @@ export default {
|
|||
ele.cycleStatisticsData.pop();
|
||||
} else {
|
||||
|
||||
item.time = item.time.split('.')[0];
|
||||
if(this.$route.query.type=='离线视频'){
|
||||
var timeNew = item.time.split('.')[0]
|
||||
var dateLength = timeNew.length;
|
||||
var key = timeNew.substring(dateLength-8,dateLength);
|
||||
item.time = key;
|
||||
}else{
|
||||
item.time = item.time.split('.')[0];
|
||||
}
|
||||
if (item.type_data != null) {
|
||||
that.typeCycleStatistics = item;
|
||||
}
|
||||
ele.cycleStatisticsData.unshift(item);
|
||||
if (that.$refs.typeChartRef2 != undefined) {
|
||||
console.log(that.$refs.typeChartRef2, '触发接收的表格数据');
|
||||
for (let i = 0; i < that.$refs.typeChartRef2.length; i++) {
|
||||
let itemTypeChartRef2 = that.$refs.typeChartRef2[i];
|
||||
|
||||
|
|
@ -589,22 +783,8 @@ export default {
|
|||
}
|
||||
},
|
||||
immediate: true
|
||||
}
|
||||
// activeName: {
|
||||
// handler(newVal) {
|
||||
// if (newVal == "second") {
|
||||
// getComponentSection({ VideoId: this.$route.query.id }).then(res => {
|
||||
// if (res.data.code == 200) {
|
||||
// this.componentList = res.data.data;
|
||||
// this.siftData();
|
||||
// } else if (res.data.code == 404) {
|
||||
// }
|
||||
// });
|
||||
// }
|
||||
|
||||
// },
|
||||
// immediate: true
|
||||
// }
|
||||
},
|
||||
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -1,50 +1,61 @@
|
|||
<template>
|
||||
<div class="content-box">
|
||||
<div class="container">
|
||||
<el-form ref="form" :model="sizeForm" label-width="140px">
|
||||
<el-form ref="sizeForm" :model="sizeForm" :rules="rules" label-width="140px">
|
||||
<p class="title">界面</p>
|
||||
<el-form-item label="界面：">
|
||||
<el-form-item label="界面：" class="formItem">
|
||||
<el-col :span="6">
|
||||
<el-select v-model="sizeForm.name" placeholder="请选择">
|
||||
<el-select v-model="sizeForm.name" placeholder="请选择" @change="changeName($event)">
|
||||
<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </el-option>
|
||||
</el-select>
|
||||
</el-col>
|
||||
</el-form-item>
|
||||
<el-form-item label="MAC地址：">
|
||||
<el-form-item label="MAC地址：" class="formItem">
|
||||
<el-col :span="6">
|
||||
<el-input v-model="sizeForm.region"></el-input>
|
||||
<el-input v-model="sizeForm.mac" disabled></el-input>
|
||||
</el-col>
|
||||
</el-form-item>
|
||||
<el-form-item label="MTU：">
|
||||
<el-form-item label="MTU：" class="formItem">
|
||||
<el-col :span="6">
|
||||
<el-input v-model="sizeForm.region"></el-input>
|
||||
<el-input v-model="sizeForm.mtu" disabled></el-input>
|
||||
</el-col>
|
||||
</el-form-item>
|
||||
<el-form-item label="网络速度：" class="formItem">
|
||||
<el-col :span="6">
|
||||
<el-input v-model="sizeForm.speed" disabled></el-input>
|
||||
</el-col>
|
||||
</el-form-item>
|
||||
<p class="title">运行状态</p>
|
||||
<el-form-item label="启用：">
|
||||
<el-form-item label="启用：" class="formItem">
|
||||
<el-col :span="0.9" style="diaplay: flex">
|
||||
<div class="status" style="width: 10px; height: 10px; border-radius: 50%; background: green"></div>
|
||||
<div :class="gernerateClass(sizeForm.status)"></div>
|
||||
</el-col>
|
||||
<el-col :span="2" style="diaplay: flex">
|
||||
<span style="margin-left: 10px">YES</span>
|
||||
<span style="margin-left: 10px">{{sizeForm.status}}</span>
|
||||
</el-col>
|
||||
</el-form-item>
|
||||
<el-form-item label="连接：">
|
||||
<!-- <el-form-item label="连接：">
|
||||
<el-col :span="0.9" style="diaplay: flex">
|
||||
<div class="status" style="width: 10px; height: 10px; border-radius: 50%; background: green"></div>
|
||||
</el-col>
|
||||
<el-col :span="2" style="diaplay: flex">
|
||||
<span style="margin-left: 10px">接通</span>
|
||||
</el-col>
|
||||
</el-form-item>
|
||||
<p class="title">IPV4</p>
|
||||
<el-table :data="tableData" border style="width: 95%">
|
||||
</el-form-item> -->
|
||||
<!-- <p class="title">IPV4</p> -->
|
||||
<p class="title">静态地址</p>
|
||||
<el-button type="primary" @click="addRowsTableData()" style="margin-bottom:10px">新增</el-button>
|
||||
<el-table :data="sizeForm.tableData" border style="width: 95%">
|
||||
<el-table-column prop="address" label="地址">
|
||||
<template slot-scope="scope">
|
||||
<el-input v-model="scope.row.address" @change="changeVal(scope.row,scope.$index)"></el-input>
|
||||
<!-- <el-input v-model="scope.row.address" @change="changeVal(scope.row,scope.$index)"></el-input> -->
|
||||
<el-form-item :prop="'tableData.'+ scope.$index + '.address'" :rules="rules.address" class="tableFormItem">
|
||||
<el-input v-model.trim="scope.row.address"
|
||||
placeholder="例：172.1.1.16/24" :disabled="scope.$index ==0"/>
|
||||
</el-form-item>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="agreement" label="协议">
|
||||
<!-- <el-table-column prop="agreement" label="DHCP">
|
||||
<template slot-scope="scope">
|
||||
<el-input v-model="scope.row.agreement" @change="changeVal(scope.row,scope.$index)"></el-input>
|
||||
</template>
|
||||
|
|
@ -60,18 +71,21 @@
|
|||
<template slot-scope="scope">
|
||||
<el-input v-model="scope.row.term" @change="changeVal(scope.row,scope.$index)"></el-input>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table-column> -->
|
||||
<el-table-column
|
||||
fixed="right"
|
||||
label="操作"
|
||||
width="350"
|
||||
>
|
||||
<template slot-scope="scope" >
|
||||
<el-button @click="handleClick(scope.row)" type="primary" :disabled="scope.row.disabled" size="small">确认</el-button>
|
||||
</template>
|
||||
<template slot-scope="scope">
|
||||
<!-- <el-button @click="deleteRowsTableData(scope)" v-if="scope.$index < sizeForm.tableData.length-1" type="text" size="small">删除行
|
||||
</el-button> -->
|
||||
<el-button @click="deleteRowsTableData(scope)" v-if="scope.$index != 0" type="text" size="small">删除行
|
||||
</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<p style="margin-top: 10px" class="title">DHCP</p>
|
||||
<!-- <p style="margin-top: 10px" class="title">DHCP</p>
|
||||
<el-form-item label="启用：">
|
||||
<el-col :span="2" style="diaplay: flex">
|
||||
<el-switch v-model="sizeForm.desc" active-color="#13ce66" inactive-color="#ff4949"> </el-switch>
|
||||
|
|
@ -86,9 +100,9 @@
|
|||
<el-col :span="6">
|
||||
<el-input v-model="sizeForm.ip"></el-input>
|
||||
</el-col>
|
||||
</el-form-item>
|
||||
</el-form-item> -->
|
||||
<div style="width:100%" v-if="sizeForm.desc == true">
|
||||
<p class="title">静态地址</p>
|
||||
<!-- <p class="title">静态地址</p>
|
||||
<el-form-item label="IP1：">
|
||||
<el-col :span="6">
|
||||
<el-input v-model="sizeForm.ip1"></el-input>
|
||||
|
|
@ -108,27 +122,53 @@
|
|||
<el-col :span="6">
|
||||
<el-input v-model="sizeForm.ip4"></el-input>
|
||||
</el-col>
|
||||
</el-form-item> -->
|
||||
<!-- <el-form-item >
|
||||
<el-col :span="6">
|
||||
<el-button type="primary" size="small" @click="commit()">保存</el-button>
|
||||
</el-col>
|
||||
</el-form-item> -->
|
||||
<p class="title">默认网关</p>
|
||||
<el-form-item label="默认网关：" prop="gateway4" class="formItem">
|
||||
<el-col :span="6">
|
||||
<el-input v-model="sizeForm.gateway4"></el-input>
|
||||
</el-col>
|
||||
</el-form-item>
|
||||
<p class="title">静态路由</p>
|
||||
<el-table :data="tableRouter" border style="width: 95%">
|
||||
<el-table-column prop="name" label="名称">
|
||||
<el-button type="primary" @click="addRows()" style="margin-bottom:10px">新增</el-button>
|
||||
<el-table :data="sizeForm.tableRouter" border style="width: 95%">
|
||||
<!-- <el-table-column prop="name" label="名称">
|
||||
<template slot-scope="scope">
|
||||
<el-input v-model="scope.row.name" @change="changeValT(scope.row,scope.$index)"></el-input>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="target" label="目标">
|
||||
<template slot-scope="scope">
|
||||
<el-input v-model="scope.row.target" @change="changeValT(scope.row,scope.$index)"></el-input>
|
||||
</el-table-column> -->
|
||||
<!-- <el-table-column type="index" label="序号" fixed align='center'>
|
||||
</el-table-column> -->
|
||||
<el-table-column prop="to" label="to" >
|
||||
<template slot-scope="scope" >
|
||||
<!-- <el-input v-model="scope.row.to" @change="changeValT(scope.row,scope.$index)"></el-input> -->
|
||||
<el-form-item :prop="'tableRouter.'+ scope.$index + '.to'" :rules="rules.to" class="tableFormItem">
|
||||
<el-input v-model.trim="scope.row.to"
|
||||
placeholder="例：172.1.1.16/24" />
|
||||
</el-form-item>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="Range" label="范围">
|
||||
<el-table-column prop="via" label="via" >
|
||||
<template slot-scope="scope">
|
||||
<el-input v-model="scope.row.Range" @change="changeValT(scope.row,scope.$index)"></el-input>
|
||||
<!-- <el-input v-model="scope.row.via" @change="changeValT(scope.row,scope.$index)"></el-input> -->
|
||||
<el-form-item :prop="'tableRouter.'+ scope.$index + '.via'" :rules="rules.via" class="tableFormItem">
|
||||
<el-input v-model.trim="scope.row.via"
|
||||
placeholder="例：172.1.1.16" />
|
||||
</el-form-item>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="metric" label="metric">
|
||||
<template slot-scope="scope">
|
||||
<el-input v-model="scope.row.metric" @change="changeValT(scope.row,scope.$index)"></el-input>
|
||||
<!-- <el-input v-model="scope.row.metric" @change="changeValT(scope.row,scope.$index)"></el-input> -->
|
||||
<el-form-item :prop="'tableRouter.'+ scope.$index + '.metric'" :rules="rules.metric" class="tableFormItem">
|
||||
<el-input v-model.trim="scope.row.metric"
|
||||
placeholder="例：100" />
|
||||
</el-form-item>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
|
|
@ -136,13 +176,18 @@
|
|||
label="操作"
|
||||
width="350"
|
||||
>
|
||||
<template slot-scope="scope" >
|
||||
<!-- <template slot-scope="scope" >
|
||||
<el-button @click="handleClick(scope.row)" type="primary" :disabled="scope.row.disabled" size="small">确认</el-button>
|
||||
</template> -->
|
||||
<template slot-scope="scope">
|
||||
<el-button @click="deleteRows(scope)" v-if="scope.$index < sizeForm.tableRouter.length" type="text" size="small">删除行
|
||||
</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<p style="margin-top: 10px" class="title">DNS服务</p>
|
||||
<el-form-item label="DNS1：">
|
||||
|
||||
<!-- <el-form-item v-for="(item,index) in sectionals" :label="DNS"+index :key="item">
|
||||
<el-col :span="6">
|
||||
<el-input v-model="sizeForm.dns1"></el-input>
|
||||
</el-col>
|
||||
|
|
@ -156,7 +201,35 @@
|
|||
<el-col :span="6">
|
||||
<el-input v-model="sizeForm.dns3"></el-input>
|
||||
</el-col>
|
||||
</el-form-item>
|
||||
</el-form-item> -->
|
||||
<el-button type="primary" @click="addRowsDNS()" style="margin-bottom:10px">新增</el-button>
|
||||
<el-table :data="sizeForm.tableDataDNS" border style="width: 95%">
|
||||
|
||||
<el-table-column prop="address" label="地址">
|
||||
<template slot-scope="scope">
|
||||
<!-- <el-input v-model="scope.row.address" @change="changeVal(scope.row,scope.$index)"></el-input> -->
|
||||
<el-form-item :prop="'tableDataDNS.'+ scope.$index + '.address'" :rules="rules.addressDNS" class="tableFormItem">
|
||||
<el-input v-model.trim="scope.row.address"
|
||||
placeholder="例：172.1.1.16" />
|
||||
</el-form-item>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
fixed="right"
|
||||
label="操作"
|
||||
width="350"
|
||||
>
|
||||
<template slot-scope="scope" >
|
||||
<el-button @click="deleteRowsDNS(scope)" v-if="scope.$index < sizeForm.tableDataDNS.length" type="text" size="small">删除行
|
||||
</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<!-- <el-form-item >
|
||||
<el-col :span="6"> -->
|
||||
<el-button type="primary" @click="commit(sizeForm.tableRouter,sizeForm.tableData,sizeForm.tableDataDNS,sizeForm)" style="margin-top:10px">保存</el-button>
|
||||
<!-- </el-col>
|
||||
</el-form-item> -->
|
||||
</div>
|
||||
</el-form>
|
||||
</div>
|
||||
|
|
@ -164,9 +237,94 @@
|
|||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
export default {
|
||||
data() {
|
||||
let validateIPAddress = (rule, value, callback) => {
|
||||
if (value == null) {
|
||||
return callback(new Error('IP地址不能为空'));
|
||||
}
|
||||
let regexp = /^((2(5[0-5]|[0-4]\d))|[0-1]?\d{1,2})(\.((2(5[0-5]|[0-4]\d))|[0-1]?\d{1,2})){3}$/;
|
||||
let valdata = value.split(',');
|
||||
let isCorrect = true;
|
||||
if (valdata.length) {
|
||||
for (let i = 0; i < valdata.length; i++) {
|
||||
if (regexp.test(valdata[i]) == false) {
|
||||
isCorrect = false;
|
||||
}
|
||||
}
|
||||
}
|
||||
if (!isCorrect) {
|
||||
callback(new Error('请输入正确的IP地址'));
|
||||
} else {
|
||||
callback()
|
||||
}
|
||||
}
|
||||
let validateIPAddressYes = (rule, value, callback) => {
|
||||
if (value == null) {
|
||||
return callback(new Error('IP地址不能为空'));
|
||||
}
|
||||
let regexp = /^((2(5[0-5]|[0-4]\d))|[0-1]?\d{1,2})(\.((2(5[0-5]|[0-4]\d))|[0-1]?\d{1,2})){3}$/;
|
||||
// value.split("/")[0]
|
||||
let valdata = value.split('/')[0];
|
||||
let valdata2 = value.split('/')[1];
|
||||
console.log("valdata",valdata)
|
||||
console.log("valdata2",valdata2)
|
||||
let isCorrect = true;
|
||||
if (valdata.length) {
|
||||
for (let i = 0; i < valdata.length; i++) {
|
||||
if (regexp.test(valdata[i]) == false) {
|
||||
if (!Number(valdata2)) {
|
||||
// callback(new Error('请输入整数，值为[1,32]'));
|
||||
isCorrect = false;
|
||||
callback(new Error('请输入正确的IP地址'));
|
||||
} else {
|
||||
if (valdata2 < 1 || valdata2 > 32) {
|
||||
callback(new Error('请输入整数，值为[1,32]'));
|
||||
isCorrect = false;
|
||||
} else {
|
||||
callback();
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
let metric = (rule, value, callback) =>{
|
||||
if (!value) {
|
||||
return callback(new Error('输入不可以为空'));
|
||||
}
|
||||
setTimeout(() => {
|
||||
if (!Number(value)) {
|
||||
callback(new Error('请输入正整数'));
|
||||
} else {
|
||||
const re = /^[0-9]*[1-9][0-9]*$/;
|
||||
const rsCheck = re.test(value);
|
||||
if (!rsCheck) {
|
||||
callback(new Error('请输入正整数'));
|
||||
} else {
|
||||
callback();
|
||||
}
|
||||
}
|
||||
}, 0);
|
||||
}
|
||||
|
||||
return {
|
||||
columnLabel: '', //要增加的列名
|
||||
columnPropIndex: 0, //列属性自增
|
||||
columnData: [],//列标题数组
|
||||
rules: {
|
||||
gateway4: [{ required: true, pattern: /^(?:(?:1[0-9][0-9]\.)|(?:2[0-4][0-9]\.)|(?:25[0-5]\.)|(?:[1-9][0-9]\.)|(?:[0-9]\.)){3}(?:(?:1[0-9][0-9])|(?:2[0-4][0-9])|(?:25[0-5])|(?:[1-9][0-9])|(?:[0-9]))$/,message: "请输入正确的IP地址", trigger: "blur"}],
|
||||
via: [{ required: true, pattern: /^(?:(?:1[0-9][0-9]\.)|(?:2[0-4][0-9]\.)|(?:25[0-5]\.)|(?:[1-9][0-9]\.)|(?:[0-9]\.)){3}(?:(?:1[0-9][0-9])|(?:2[0-4][0-9])|(?:25[0-5])|(?:[1-9][0-9])|(?:[0-9]))$/,message: "请输入正确的IP地址", trigger: "blur"}],
|
||||
// via:[{ required: true, validator: validateIPAddress, trigger: "blur" }]
|
||||
addressDNS:[{ required: true, validator: validateIPAddress, trigger: "blur" }],
|
||||
address:[{ required: true, validator: validateIPAddressYes, trigger: "blur" }],
|
||||
to:[{ required: true, validator: validateIPAddressYes, trigger: "blur" }],
|
||||
metric:[{ required: true, validator: metric, trigger: "blur" }],
|
||||
},
|
||||
|
||||
|
||||
optionsa:[
|
||||
{
|
||||
value: '1',
|
||||
|
|
@ -176,35 +334,35 @@ export default {
|
|||
tableRouter: [
|
||||
{
|
||||
name: 'Router0',
|
||||
target: 'e.g.10.0.0.0/8',
|
||||
Range: 'e.g.192.168.0.1',
|
||||
metric: '',
|
||||
to:'e.g.10.0.0.0/8',
|
||||
via:'e.g.192.168.0.1',
|
||||
disabled:true
|
||||
},
|
||||
{
|
||||
name: 'Router1',
|
||||
target: 'e.g.10.0.0.0/8',
|
||||
Range: 'e.g.192.168.0.1',
|
||||
name: 'Router0',
|
||||
metric: '',
|
||||
to:'e.g.10.0.0.0/8',
|
||||
via:'e.g.192.168.0.1',
|
||||
disabled:true
|
||||
},
|
||||
{
|
||||
name: 'Router2',
|
||||
target: 'e.g.10.0.0.0/8',
|
||||
Range: 'e.g.192.168.0.1',
|
||||
name: 'Router0',
|
||||
metric: '',
|
||||
to:'e.g.10.0.0.0/8',
|
||||
via:'e.g.192.168.0.1',
|
||||
disabled:true
|
||||
},
|
||||
{
|
||||
name: 'Router3',
|
||||
target: 'e.g.10.0.0.0/8',
|
||||
Range: 'e.g.192.168.0.1',
|
||||
name: 'Router0',
|
||||
metric: '',
|
||||
to:'e.g.10.0.0.0/8',
|
||||
via:'e.g.192.168.0.1',
|
||||
disabled:true
|
||||
}
|
||||
],
|
||||
sizeForm: {
|
||||
name: '1',
|
||||
name: 'eth0',
|
||||
region: '00:11:14:1a:62:fe',
|
||||
MTU: '1500',
|
||||
date2: '',
|
||||
|
|
@ -213,49 +371,445 @@ export default {
|
|||
resource: '',
|
||||
desc: true,
|
||||
ip: '192.168.1.5/24',
|
||||
gateway: 'n/a',
|
||||
ip1: '192.168.50.10/24',
|
||||
ip2: 'e.g.192.168.50.10/24',
|
||||
ip3: 'e.g.192.168.50.10/24',
|
||||
ip4: 'e.g.192.168.50.10/24',
|
||||
dns1: 'e.g.1.1.1.1',
|
||||
dns2: 'e.g.1.0.0.1',
|
||||
dns3: 'e.g.1.0.0.1'
|
||||
dns3: 'e.g.1.0.0.1',
|
||||
status:'NO',
|
||||
// mtu:'00:11:14:1a:62:fe',
|
||||
// mac:'00:11:14:1a:62:fe',
|
||||
// moren:'e.g.1.0.0.1',
|
||||
// speed:'1000',
|
||||
gateway4: '',
|
||||
mtu:'',
|
||||
mac:'',
|
||||
moren:'',
|
||||
speed:'',
|
||||
tableRouter: [
|
||||
// {
|
||||
// name: 'Router0',
|
||||
// metric: '',
|
||||
// to:'',
|
||||
// via:'',
|
||||
// disabled:true
|
||||
// },
|
||||
// {
|
||||
// name: 'Router0',
|
||||
// metric: '',
|
||||
// to:'',
|
||||
// via:'',
|
||||
// disabled:true
|
||||
// },
|
||||
],
|
||||
tableData: [
|
||||
// {
|
||||
// id:'',
|
||||
// address: '',
|
||||
// },
|
||||
// {
|
||||
|
||||
// id:'',
|
||||
// address: '',
|
||||
// },
|
||||
// {
|
||||
// id:'',
|
||||
// address: '',
|
||||
// }
|
||||
],
|
||||
tableDataDNS: [
|
||||
// {
|
||||
// id:'',
|
||||
// address: '',
|
||||
// },
|
||||
// {
|
||||
// id:'',
|
||||
// address: '',
|
||||
// }
|
||||
],
|
||||
},
|
||||
options: [
|
||||
{
|
||||
value: '1',
|
||||
value: 'eth0',
|
||||
label: 'eth0'
|
||||
}
|
||||
},
|
||||
// {
|
||||
// value: 'wlan0',
|
||||
// label: 'wlan0'
|
||||
// }
|
||||
],
|
||||
//数据获取
|
||||
netWork:[
|
||||
{
|
||||
name: 'eth0',
|
||||
region: '00:11:14:1a:62:fe',
|
||||
MTU: '1500',
|
||||
date2: '',
|
||||
delivery: false,
|
||||
type: [],
|
||||
resource: '',
|
||||
desc: true,
|
||||
ip: '192.168.1.5/24',
|
||||
gateway4: '192.168.1.5',
|
||||
ip1: '192.168.50.10/24',
|
||||
ip2: 'e.g.192.168.50.10/24',
|
||||
ip3: 'e.g.192.168.50.10/24',
|
||||
ip4: 'e.g.192.168.50.10/24',
|
||||
dns1: 'e.g.1.1.1.1',
|
||||
dns2: 'e.g.1.0.0.1',
|
||||
dns3: 'e.g.1.0.0.1',
|
||||
status:'YES',
|
||||
mtu:'00:11:14:1a:62:fe',
|
||||
mac:'00:11:14:1a:62:fe',
|
||||
moren:'e.g.1.0.0.1',
|
||||
speed:'1000'
|
||||
},
|
||||
{
|
||||
name: 'wlan0',
|
||||
region: '00:11:14:1a:62:fe',
|
||||
MTU: '1500',
|
||||
date2: '',
|
||||
delivery: false,
|
||||
type: [],
|
||||
resource: '',
|
||||
desc: true,
|
||||
ip: '192.168.1.5/24',
|
||||
gateway4: '192.168.1.5',
|
||||
ip1: '192.168.50.10/24',
|
||||
ip2: 'e.g.192.168.50.10/24',
|
||||
ip3: 'e.g.192.168.50.10/24',
|
||||
ip4: 'e.g.192.168.50.10/24',
|
||||
dns1: 'e.g.1.1.1.1',
|
||||
dns2: 'e.g.1.0.0.1',
|
||||
dns3: 'e.g.1.0.0.1',
|
||||
status:'YES',
|
||||
mtu:'00:11:14:1a:62:fe',
|
||||
mac:'00:11:14:1a:62:fe',
|
||||
moren:'e.g.1.0.0.1',
|
||||
speed:'1000'
|
||||
}
|
||||
],
|
||||
tableData: [
|
||||
{
|
||||
agreement: 'NO',
|
||||
Range: '1',
|
||||
// agreement: 'NO',
|
||||
// Range: '1',
|
||||
id:'',
|
||||
address: '192.168.50.10/24',
|
||||
term: '永久',
|
||||
disabled:true
|
||||
// term: '永久',
|
||||
// disabled:true
|
||||
},
|
||||
{
|
||||
agreement: 'YES',
|
||||
Range: '1',
|
||||
// agreement: 'YES',
|
||||
// Range: '1',
|
||||
id:'',
|
||||
address: '192.168.1.5/24',
|
||||
term: '17小时',
|
||||
disabled:true
|
||||
// term: '17小时',
|
||||
// disabled:true
|
||||
},
|
||||
{
|
||||
// agreement: 'YES',
|
||||
// Range: '1',
|
||||
id:'',
|
||||
address: '192.168.1.5/24',
|
||||
// term: '17小时',
|
||||
// disabled:true
|
||||
}
|
||||
],
|
||||
|
||||
tableDataDNS: [
|
||||
{
|
||||
// agreement: 'NO',
|
||||
// Range: '1',
|
||||
id:'',
|
||||
address: '192.168.50.10/24',
|
||||
// term: '永久',
|
||||
// disabled:true
|
||||
},
|
||||
{
|
||||
// agreement: 'YES',
|
||||
// Range: '1',
|
||||
id:'',
|
||||
address: '192.168.1.5/24',
|
||||
// term: '17小时',
|
||||
// disabled:true
|
||||
}
|
||||
],
|
||||
tableDataPanduan:[],
|
||||
optionsData:'eth0'
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
|
||||
},
|
||||
created() {
|
||||
this.createMqtt()
|
||||
},
|
||||
mounted() {
|
||||
|
||||
// window.setInterval( () => { //每隔30秒自动请求一次方法 this.getdata() ，保证数据实时的更新
|
||||
// this.publishClient()
|
||||
// }, 1000 * 5 )
|
||||
},
|
||||
methods:{
|
||||
//点击保存
|
||||
commit(tableRouter,tableData,tableDataDNS,sizeForm){
|
||||
console.log("tableData",tableData)
|
||||
console.log("tableDataDNS",tableDataDNS)
|
||||
console.log("sizeForm",sizeForm)
|
||||
var tableRouterN = tableRouter.map(value => {
|
||||
return value.to+','+value.via+','+value.metric
|
||||
})
|
||||
var tableDataN = tableData.map(item => {
|
||||
return item.address
|
||||
})
|
||||
var tableDataDNSN = tableDataDNS.map(item => {
|
||||
return item.address
|
||||
})
|
||||
|
||||
var ner = {
|
||||
type:"netplanSet",
|
||||
ethName:"eth0",
|
||||
dhcp4: false,
|
||||
addresses:tableDataN,//静态地址
|
||||
gateway4:sizeForm.gateway4,
|
||||
nameservers:tableDataDNSN,//DNS
|
||||
routes:tableRouterN//静态路由
|
||||
}
|
||||
this.$confirm('此操作将重新设置网络, 是否继续?', '提示', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning'
|
||||
})
|
||||
.then(() => {
|
||||
// this.$message({
|
||||
// type: 'success',
|
||||
// message: '删除成功!'
|
||||
// });
|
||||
console.log("JSON.stringify(ner)",JSON.stringify(ner))
|
||||
// window.publish('Contorl_client',JSON.stringify(ner));
|
||||
})
|
||||
.catch(() => {
|
||||
this.$message({
|
||||
type: 'info',
|
||||
message: '已取消'
|
||||
});
|
||||
});
|
||||
//
|
||||
},
|
||||
//添加行静态路由
|
||||
addRows() {
|
||||
const circle = this.sizeForm.tableRouter[0]; //取出数组中第一个对象
|
||||
if (circle) {
|
||||
const newObj = {};
|
||||
for (let key in circle) { //把第一个对象的属性都赋值给新对象newObj 然后每个属性的值都设置为空；
|
||||
newObj[key] = '';
|
||||
}
|
||||
this.sizeForm.tableRouter.splice(this.sizeForm.tableRouter.length, 0, newObj);
|
||||
}
|
||||
},
|
||||
|
||||
//删除行静态路由
|
||||
deleteRows(scope) {
|
||||
this.sizeForm.tableRouter.splice(scope.$index, 1);
|
||||
},
|
||||
//添加行静态地址
|
||||
addRowsTableData(){
|
||||
const circle = this.sizeForm.tableData[0]; //取出数组中第一个对象
|
||||
if (circle) {
|
||||
const newObj = {};
|
||||
for (let key in circle) { //把第一个对象的属性都赋值给新对象newObj 然后每个属性的值都设置为空；
|
||||
newObj[key] = '';
|
||||
}
|
||||
// this.sizeForm.tableData.splice(this.sizeForm.tableData.length-1, 0, newObj);
|
||||
this.sizeForm.tableData.splice(this.sizeForm.tableData.length, 0, newObj);
|
||||
}
|
||||
},
|
||||
deleteRowsTableData(scope){
|
||||
this.sizeForm.tableData.splice(scope.$index, 1);
|
||||
},
|
||||
//添加DNS
|
||||
addRowsDNS(){
|
||||
const circle = this.sizeForm.tableDataDNS[0]; //取出数组中第一个对象
|
||||
if (circle) {
|
||||
const newObj = {};
|
||||
for (let key in circle) { //把第一个对象的属性都赋值给新对象newObj 然后每个属性的值都设置为空；
|
||||
newObj[key] = '';
|
||||
}
|
||||
this.sizeForm.tableDataDNS.splice(this.sizeForm.tableDataDNS.length, 0, newObj);
|
||||
}
|
||||
},
|
||||
deleteRowsDNS(scope){
|
||||
this.sizeForm.tableDataDNS.splice(scope.$index, 1);
|
||||
},
|
||||
/** 创建mqtt */
|
||||
createMqtt() {
|
||||
// window.publish('Contorl_client',JSON.stringify({"type":"getNet"}));
|
||||
//创建链接，接收数据
|
||||
var topicSends = ['Contorl_server'];
|
||||
window.PubScribe(topicSends,-1,this.realInfo);
|
||||
setTimeout(() => {
|
||||
this.publishClient()
|
||||
}, 5000);
|
||||
},
|
||||
publishClient(){
|
||||
window.publish('Contorl_client',JSON.stringify({"type":"getNet"}));
|
||||
},
|
||||
/** 实时数据分类 */
|
||||
realInfo(topic, message) {
|
||||
// console.log("topic",topic)
|
||||
switch (topic) {
|
||||
case "Contorl_server":
|
||||
try {
|
||||
const utf8decoder = new TextDecoder()
|
||||
const u8arr = new Uint8Array(message)
|
||||
const temp = utf8decoder.decode(u8arr) // 将二进制数据转为字符串
|
||||
const msg = JSON.parse(temp) //这一步报错则返回的是二进制流图片，不报错则返回的是JSON的错误提示数据
|
||||
|
||||
if(msg.type=='getNet'){
|
||||
console.log("msg",msg)
|
||||
// const netaddres = JSON.parse(msg.netaddres)
|
||||
// console.log("netaddres",netaddres)
|
||||
// const netstates = JSON.parse(msg.netstates)
|
||||
|
||||
this.changeNetstates(msg)
|
||||
}
|
||||
|
||||
} catch (error) {
|
||||
|
||||
}
|
||||
break;
|
||||
}
|
||||
},
|
||||
changeNetstates(msg){
|
||||
console.log("msg",msg)
|
||||
// var optionsDataN = this.optionsData
|
||||
// this.sizeForm.mtu = msg.netstates【this.optionsData}.mtu
|
||||
console.log(" msg.netstates[this.optionsData]",msg.netstates[this.optionsData])
|
||||
if(msg.netstates[this.optionsData]!=undefined){
|
||||
this.sizeForm.mtu = msg.netstates[this.optionsData].mtu
|
||||
var data = msg.netaddres[this.optionsData]
|
||||
this.sizeForm.speed = msg.netstates[this.optionsData].speed
|
||||
this.tableDataPanduan = []
|
||||
var optionN = Object.keys(msg.netplan)
|
||||
var optionNrr = optionN.map((value, index) => {
|
||||
return {
|
||||
value: value,
|
||||
label: value
|
||||
}
|
||||
})
|
||||
console.log("optionNrr",optionNrr)
|
||||
this.options = optionNrr
|
||||
if(msg.netstates[this.optionsData].isup==true){
|
||||
this.sizeForm.status='YES'
|
||||
}else{
|
||||
this.sizeForm.status='NO'
|
||||
}
|
||||
for (let i = 0; i < data.length; i++) {
|
||||
if(data[i].family==17){
|
||||
this.sizeForm.mac =data[i].address
|
||||
}else if(data[i].family==2){
|
||||
this.tableDataPanduan.push(data[i])
|
||||
}
|
||||
}
|
||||
if(this.tableDataPanduan.length==msg.netplan[this.optionsData].addresses.length){
|
||||
for (let i = 0;i < this.tableDataPanduan.length; i++) {
|
||||
for (let b= 0;b < msg.netplan[this.optionsData].addresses.length; b++) {
|
||||
// console.log("str1",netstates.netplan.eth0.addresses[b].substring(0,netstates.netplan.eth0.addresses[b].indexOf("/")))
|
||||
var ipos = msg.netplan[this.optionsData].addresses[b].indexOf("/");//指定开始的字符串
|
||||
let str1=msg.netplan[this.optionsData].addresses[b].substring(0,ipos);
|
||||
if(this.tableDataPanduan[i].address == str1){
|
||||
|
||||
}else{
|
||||
// this.$message({
|
||||
// message: '静态地址有误',
|
||||
// type: 'warning'
|
||||
// });
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
var addressesN = msg.netplan[this.optionsData].addresses.map((value, index) => {
|
||||
return {
|
||||
address: value,
|
||||
id: index
|
||||
}
|
||||
})
|
||||
this.sizeForm.tableData = addressesN
|
||||
//获取静态路由
|
||||
var dataJ = msg.netplan[this.optionsData].routes
|
||||
this.sizeForm.tableRouter=[]
|
||||
for (let r= 0;r < dataJ.length; r++) {
|
||||
this.sizeForm.tableRouter.push(dataJ[r])
|
||||
}
|
||||
this.sizeForm.gateway4 = msg.netplan[this.optionsData].gateway4
|
||||
var legend = msg.netplan[this.optionsData].nameservers.addresses.map((value, index) => {
|
||||
return {
|
||||
address: value,
|
||||
id: index
|
||||
}
|
||||
})
|
||||
this.sizeForm.tableDataDNS = legend
|
||||
}else {
|
||||
this.sizeForm= {
|
||||
name: this.optionsData,
|
||||
region: '00:11:14:1a:62:fe',
|
||||
MTU: '1500',
|
||||
date2: '',
|
||||
delivery: false,
|
||||
type: [],
|
||||
resource: '',
|
||||
desc: true,
|
||||
status:'NO',
|
||||
gateway4: msg.netplan[this.optionsData].gateway4,
|
||||
mtu:'',
|
||||
mac:'',
|
||||
moren:'',
|
||||
speed:'',
|
||||
}
|
||||
//获取静态路由
|
||||
var dataJ = msg.netplan[this.optionsData].routes
|
||||
this.sizeForm.tableRouter=[]
|
||||
for (let r= 0;r < dataJ.length; r++) {
|
||||
this.sizeForm.tableRouter.push(dataJ[r])
|
||||
}
|
||||
var addressesN = msg.netplan[this.optionsData].addresses.map((value, index) => {
|
||||
return {
|
||||
address: value,
|
||||
id: index
|
||||
}
|
||||
})
|
||||
this.sizeForm.tableData = addressesN
|
||||
var legend = msg.netplan[this.optionsData].nameservers.addresses.map((value, index) => {
|
||||
return {
|
||||
address: value,
|
||||
id: index
|
||||
}
|
||||
})
|
||||
this.sizeForm.tableDataDNS = legend
|
||||
}
|
||||
|
||||
},
|
||||
changeName(val){
|
||||
console.log("val",val)
|
||||
this.sizeForm.name = val
|
||||
this.optionsData = val
|
||||
this.publishClient()
|
||||
},
|
||||
gernerateClass(status){
|
||||
console.log("status",status)
|
||||
if(status=='YES'){
|
||||
return 'status'
|
||||
}else {
|
||||
return 'statusNo'
|
||||
}
|
||||
},
|
||||
|
||||
changeVal(val,e){
|
||||
this.tableData[e].disabled = false
|
||||
this.sizeForm.tableData[e].disabled = false
|
||||
},
|
||||
changeValT(val,e){
|
||||
this.tableRouter[e].disabled = false
|
||||
this.sizeForm.tableRouter[e].disabled = false
|
||||
},
|
||||
handleClick(scope,e){
|
||||
console.log(scope,'scope');
|
||||
|
|
@ -270,18 +824,24 @@ export default {
|
|||
}
|
||||
</style>
|
||||
<style lang="scss" scoped>
|
||||
/deep/ .el-form-item__content {
|
||||
.formItem /deep/ .el-form-item__content {
|
||||
display: flex;
|
||||
flex-flow: row nowrap;
|
||||
align-items: center;
|
||||
}
|
||||
/deep/ .el-form-item__label {
|
||||
.formItem /deep/ .el-form-item__label {
|
||||
text-align: left;
|
||||
font-size: 15px;
|
||||
}
|
||||
.el-form-item{
|
||||
.formItem .el-form-item{
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
.tableFormItem {
|
||||
margin-bottom: 15px!important;
|
||||
}
|
||||
.tableFormItem /deep/ .el-form-item__content{
|
||||
margin-left: 0px!important;
|
||||
}
|
||||
.container {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
|
@ -301,5 +861,11 @@ export default {
|
|||
padding-top: 0;
|
||||
}
|
||||
}
|
||||
.status{
|
||||
width: 10px; height: 10px; border-radius: 50%; background: green
|
||||
}
|
||||
.statusNo{
|
||||
width: 10px; height: 10px; border-radius: 50%; background: red
|
||||
}
|
||||
</style>
|
||||
|
||||
|
|
@ -14,7 +14,7 @@
|
|||
</el-tab-pane>
|
||||
<el-tab-pane label="数据看板" name="second" >
|
||||
<dataBoard ref="dataBoardRef" :activeName="activeName" :triggerData="triggerData" :triggerListData="triggerListData"
|
||||
:cycleTimeData="cycleTimeData" :cycleStatisticsData="cycleStatisticsData" ></dataBoard>
|
||||
:cycleTimeData="cycleTimeData" :cycleStatisticsData="cycleStatisticsData" :cycleHistoryData='cycleHistoryData'></dataBoard>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="分析配置" name="third">
|
||||
<analysisConfiguration :analysisConfigurationdata="analysisConfigurationdata"></analysisConfiguration>
|
||||
|
|
@ -26,6 +26,18 @@
|
|||
</el-tabs>
|
||||
<!-- <el-button class="videoAnalysis" type="primary" size="mini" @click="videoAnalysisBtn" v-if="videoAnalysisShow" :disabled='disabledVideoAnalysis'
|
||||
>视频分析</el-button> -->
|
||||
<!-- <div class="progressNew" v-if="(this.$route.query.type == '离线视频' && videoAnalysisStatus=='分析中') || (this.$route.query.type == '离线视频' &&videoAnalysisStatus=='未分析')|| (this.$route.query.type == '离线视频' &&videoAnalysisStatus=='已分析')">
|
||||
<el-progress :percentage="numSatus"></el-progress>
|
||||
</div> -->
|
||||
<div class="progressNew" v-if="this.$route.query.type == '离线视频'&&videoAnalysisStatusNew!='分析异常'">
|
||||
<el-progress :percentage="numSatus" ></el-progress>
|
||||
|
||||
<!-- <el-progress :percentage="numSatus" :color="percentageColor"></el-progress> -->
|
||||
</div>
|
||||
<div class="progressNewV" v-if="this.$route.query.type == '离线视频'&&videoAnalysisStatusNew=='分析异常'">
|
||||
<el-progress :percentage="numSatus" ></el-progress>
|
||||
<!-- <el-progress :percentage="numSatus" :color="percentageColor"></el-progress> -->
|
||||
</div>
|
||||
<el-button class="trafficAnalysis" type="primary" plain size="mini" @click="trafficAnalysisBtn"
|
||||
v-if="trafficAnalysisShow" :disabled="disabledTrafficAnalysis">交通分析</el-button>
|
||||
</div>
|
||||
|
|
@ -53,7 +65,7 @@
|
|||
</el-drawer>
|
||||
<!-- 组件弹框 -->
|
||||
<el-dialog :title="componentTitle + '指标组件'" width="40%" :visible.sync="component" :close-on-click-modal="false"
|
||||
@close="closeComponentForm()">
|
||||
@close="closeComponentForm(componentForm)">
|
||||
<el-form ref="form" :model="componentForm" label-width="150px">
|
||||
<el-form-item label="名称：">
|
||||
<el-input v-model="componentForm.componentName"></el-input>
|
||||
|
|
@ -73,7 +85,7 @@
|
|||
<el-input-number v-model="componentForm.endValue" :min="1" style="margin-left:5%"></el-input-number>
|
||||
</el-form-item>
|
||||
<el-form-item label="流量类型：" v-if="componentForm.componentType == '流量'">
|
||||
<el-radio-group v-model="componentForm.FlowType">
|
||||
<el-radio-group v-model="componentForm.flowType">
|
||||
<el-radio label="出流"></el-radio>
|
||||
<el-radio label="入流"></el-radio>
|
||||
</el-radio-group>
|
||||
|
|
@ -105,12 +117,12 @@
|
|||
<div style="display:inline">
|
||||
<el-select v-model="componentForm.company" placeholder="请选择单位" @change="changeCompany">
|
||||
<!-- <el-option v-for="item in timeSelect" :key="item.value" :label="item.label" :value="item.value"></el-option> -->
|
||||
<el-option label="秒" value="秒" v-if="componentForm.timeMode != '周期统计'"></el-option>
|
||||
<el-option label="分钟" value="分钟"></el-option>
|
||||
<el-option label="小时" value="小时"></el-option>
|
||||
<el-option label="秒" value="秒" v-if="this.$route.query.type != '实时视频'||componentForm.timeMode != '周期统计'"></el-option>
|
||||
<el-option label="分钟" value="分钟" ></el-option>
|
||||
<el-option label="小时" value="小时" v-if="this.$route.query.type != '离线视频'||(this.$route.query.type == '实时视频'&&componentForm.timeMode == '周期统计')"></el-option>
|
||||
</el-select>
|
||||
<!-- <el-slider v-model="componentForm.cycleInterval" :max="max" :min="min"> </el-slider> -->
|
||||
<el-slider v-model="componentForm.cycleInterval" :max="100" :min="1" v-if="componentForm.company != '小时'"> </el-slider>
|
||||
<el-slider v-model="componentForm.cycleInterval" :max="60" :min="1" v-if="componentForm.company != '小时'"> </el-slider>
|
||||
<el-slider v-model="componentForm.cycleInterval" :max="24" :min="1" v-if="componentForm.company == '小时'"> </el-slider>
|
||||
</div>
|
||||
</el-form-item>
|
||||
|
|
@ -139,8 +151,9 @@
|
|||
v-if="componentForm.componentType == '类型'"></el-checkbox>
|
||||
<el-checkbox label="饼状图" name="presentation"
|
||||
v-if="componentForm.componentType == '类型'"></el-checkbox>
|
||||
<!-- 速度、车头时距、排队数（周期统计）、检测数（周期统计） -->
|
||||
<el-checkbox label="均值图" name="presentation"
|
||||
v-if="componentForm.componentType != '拥堵' || componentForm.componentType != '流量' || componentForm.componentType != '类型' || componentForm.componentType != '延误'"></el-checkbox>
|
||||
v-if="componentForm.componentType == '速度' || componentForm.componentType == '车头时距' || (componentForm.componentType == '排队数' &&componentForm.timeMode == '周期统计')|| (componentForm.componentType == '检测数'&&componentForm.timeMode == '周期统计')"></el-checkbox>
|
||||
</el-checkbox-group>
|
||||
<!-- <el-checkbox-group v-model="componentForm.presentation" @change="handlePresentation">
|
||||
<el-checkbox v-for="item in sectionals" :label="item.graphicName" :key="item.graphicId" >{{item.graphicName}}</el-checkbox>
|
||||
|
|
@ -155,7 +168,10 @@
|
|||
|
||||
<el-form-item>
|
||||
<el-button type="primary" @click="onSubmitComponent(componentForm)">确认</el-button>
|
||||
<el-button @click="closeComponent(componentForm)">取消</el-button>
|
||||
<!-- 新增取消 -->
|
||||
<el-button @click="closeComponent(componentForm)" v-if="closeComponentShow">取消</el-button>
|
||||
<!-- 编辑取消 -->
|
||||
<el-button @click="closeEdit(componentForm)" v-if="closeEditShow">取消</el-button>
|
||||
</el-form-item>
|
||||
|
||||
</el-form>
|
||||
|
|
@ -189,6 +205,9 @@ var client;
|
|||
export default {
|
||||
data() {
|
||||
return {
|
||||
percentageColor:'blue',
|
||||
closeComponentShow:true,
|
||||
closeEditShow:false,
|
||||
max:'100',
|
||||
min:'1',
|
||||
receiveNews: '',
|
||||
|
|
@ -273,7 +292,7 @@ export default {
|
|||
componentType: '',
|
||||
typeFiltering: '',
|
||||
typeData: [],
|
||||
FlowType: '出流'
|
||||
flowType: '出流'
|
||||
},
|
||||
// typeData: ['小汽车', '公交车', '卡车', '非机动车', '行人'],
|
||||
typeData: ['机动车', '非机动车', '行人'],
|
||||
|
|
@ -329,6 +348,8 @@ export default {
|
|||
cycleTimeData: [],
|
||||
//周期统计
|
||||
cycleStatisticsData: [],
|
||||
//历史数据
|
||||
cycleHistoryData:{},
|
||||
//视频类型
|
||||
videoType: '',
|
||||
videoAnalysisShow: false,
|
||||
|
|
@ -343,13 +364,20 @@ export default {
|
|||
videoName: '',
|
||||
videoPath: '',
|
||||
videoTotalFrames: '',
|
||||
videoType: '实时视频'
|
||||
videoType: '实时视频',
|
||||
videoId:''
|
||||
},
|
||||
description: '请等待排队',
|
||||
ipData: '',
|
||||
|
||||
|
||||
componentList:[]
|
||||
componentList:[],
|
||||
//离线视频加载进度
|
||||
numSatus:0,
|
||||
//离线视频状态
|
||||
videoAnalysisStatusNew:'未分析',
|
||||
videoAnalysisStatusShow:true,
|
||||
vleNew:''
|
||||
};
|
||||
},
|
||||
|
||||
|
|
@ -370,15 +398,8 @@ export default {
|
|||
// window.getModifyTheName = this.getModifyTheNameN;
|
||||
window.getSingleComponentId = this.getSingleComponentIdN;
|
||||
window.getSimulationAreaEdit = this.getSimulationAreaEdit;
|
||||
|
||||
window.getZhuanFaMQTT= this.getZhuanFaMQTT;
|
||||
window.delSuccess = this.delSuccess;
|
||||
|
||||
// console.log("id",id)
|
||||
// console.log("num",num)
|
||||
// console.log("name",name)
|
||||
// console.log("type",type)
|
||||
// console.log("status",status)
|
||||
// this.videoType = this.$route.query.type;
|
||||
if (this.$route.query.type == '实时视频') {
|
||||
this.videoAnalysisShow = false;
|
||||
this.trafficAnalysisShow = false;
|
||||
|
|
@ -390,7 +411,7 @@ export default {
|
|||
this.videoAnalysisShow = true;
|
||||
this.trafficAnalysisShow = true;
|
||||
this.getAnalysisStatus();
|
||||
// this.createMqtt();
|
||||
this.createMqtt();
|
||||
// if(this.$route.query.status=='未分析'){
|
||||
// }
|
||||
// if(this.$route.query.status=='未分析'){
|
||||
|
|
@ -405,15 +426,38 @@ export default {
|
|||
handleClick: function(tab, event) {
|
||||
var that = this
|
||||
if(tab._props.name=='second'){
|
||||
that.$nextTick(()=>{
|
||||
that.$nextTick(()=>{
|
||||
//
|
||||
that.$refs.dataBoardRef.getNew()
|
||||
// setTimeout(() => {
|
||||
// debugger
|
||||
// this.getHistory()
|
||||
// }, 10000);
|
||||
this.getHistory()
|
||||
})
|
||||
}
|
||||
},
|
||||
/** 创建mqtt */
|
||||
createMqtt() {
|
||||
//创建链接，接收数据
|
||||
this.topicSends = [
|
||||
if(this.$route.query.type == '离线视频'){
|
||||
this.topicSends = [
|
||||
// 'stream' + this.number,
|
||||
// 'trajectory' + this.number,
|
||||
// 'detection' + this.number,
|
||||
'trigger-' + this.$route.query.id,
|
||||
'cycle_history-'+ this.$route.query.id,
|
||||
'cycle_time-' + this.$route.query.id,
|
||||
'cycle_statistics-' + this.$route.query.id,
|
||||
//获取离线视频数据
|
||||
'VideoStatusData'
|
||||
];
|
||||
window.PubScribe(this.topicSends,'001', this.realInfo);
|
||||
setTimeout(() => {
|
||||
this.getHistory()
|
||||
}, 5000);
|
||||
}else if(this.$route.query.type == '实时视频'){
|
||||
this.topicSends = [
|
||||
'stream' + this.number,
|
||||
'trajectory' + this.number,
|
||||
'detection' + this.number,
|
||||
|
|
@ -421,32 +465,11 @@ export default {
|
|||
'cycle_time-' + this.$route.query.id,
|
||||
'cycle_statistics-' + this.$route.query.id
|
||||
];
|
||||
window.PubScribe(this.topicSends, this.number, this.realInfo);
|
||||
// mqtt = mqttConfig;
|
||||
/*mqtt = new mqttConfig(this.topicSends);
|
||||
client = mqtt.createConnect();
|
||||
client.subscribe(['img'+this.number,'stream'+this.number, 'trajectory'+this.number, 'detection'+this.number], { qos: 0 }, (err)=> {
|
||||
if (!err) {
|
||||
console.log("订阅成功");
|
||||
// setTimeout(function() {
|
||||
client.publish('msg_stream',JSON.stringify({"msg_flag":parseInt(this.number)}))
|
||||
// }, 1000);
|
||||
|
||||
} else {
|
||||
console.log('消息订阅失败！')
|
||||
}
|
||||
|
||||
});
|
||||
client.on("message", (topic, message) => {
|
||||
//数据分类
|
||||
try {
|
||||
// this.receiveNews = this.receiveNews.concat(message);
|
||||
// this.realInfo(topic, this.receiveNews);
|
||||
this.realInfo(topic, message);
|
||||
} catch (error) {
|
||||
|
||||
}
|
||||
});*/
|
||||
window.PubScribe(this.topicSends, this.number, this.realInfo,this.$route.query.id);
|
||||
}
|
||||
setTimeout(() => {
|
||||
window.publish('Custom',JSON.stringify({"type":"getImage","videoid":this.$route.query.id}));
|
||||
}, 5000);
|
||||
},
|
||||
//获取视频分析，交通分析状态数据
|
||||
getAnalysisStatus() {
|
||||
|
|
@ -455,7 +478,7 @@ export default {
|
|||
//视频分析状态
|
||||
if (res.data.data.videoAnalysisStatus == '未分析') {
|
||||
this.disabledTrafficAnalysis = true;
|
||||
this.videoUnityShow = true;
|
||||
this.videoUnityShow = false;
|
||||
this.analysisData();
|
||||
} else if (res.data.data.videoAnalysisStatus == '分析中') {
|
||||
this.disabledVideoAnalysis = true;
|
||||
|
|
@ -469,6 +492,14 @@ export default {
|
|||
this.disabledTrafficAnalysis = false;
|
||||
this.analysisData();
|
||||
//交通分析状态
|
||||
} else if (res.data.data.videoAnalysisStatus == '分析异常') {
|
||||
// this.videoUnityShow = true;
|
||||
// this.videoAnalysisSta = res.data.data.videoAnalysisStatus;
|
||||
// this.disabledTrafficAnalysis = false;
|
||||
this.videoAnalysisStatusNew = '分析异常'
|
||||
// this.percentageColor = 'red'
|
||||
this.analysisData();
|
||||
//交通分析状态
|
||||
} else if (res.data.data.trafficAnalysisStatus == '未分析') {
|
||||
this.disabledVideoAnalysis = true;
|
||||
} else if (res.data.data.trafficAnalysisStatus == '分析中') {
|
||||
|
|
@ -480,6 +511,15 @@ export default {
|
|||
}
|
||||
});
|
||||
},
|
||||
//获取离线视频周期时刻周期统计
|
||||
getHistory(){
|
||||
window.publish('GetCycleHistory','Get-'+this.$route.query.id);
|
||||
},
|
||||
getZhuanFaMQTT(topic,msg){
|
||||
// console.log("topic",topic)
|
||||
// console.log("msg",msg)
|
||||
window.publish(topic,msg);
|
||||
},
|
||||
//分析视频按钮
|
||||
videoAnalysisBtn() {
|
||||
startVideoAnalysis(this.$route.query.id).then(res => {
|
||||
|
|
@ -514,7 +554,8 @@ export default {
|
|||
message: res.data.msg,
|
||||
type: 'success'
|
||||
});
|
||||
document.getElementById('mapModule').contentWindow.addColor();
|
||||
this.analysisData()
|
||||
|
||||
} else {
|
||||
this.$message({
|
||||
message: res.data.msg,
|
||||
|
|
@ -523,17 +564,85 @@ export default {
|
|||
}
|
||||
});
|
||||
},
|
||||
//转64位
|
||||
imageUrlToBase64(img) {
|
||||
//一定要设置为let，不然图片不显示
|
||||
let image = new Image();
|
||||
let dataURL = ''
|
||||
//解决跨域问题
|
||||
image.setAttribute("crossOrigin", "anonymous");
|
||||
let imageUrl = img;
|
||||
image.src = imageUrl;
|
||||
//image.onload为异步加载
|
||||
image.onload = () => {
|
||||
let canvas = document.createElement("canvas");
|
||||
canvas.width = image.width;
|
||||
canvas.height = image.height;
|
||||
let context = canvas.getContext("2d");
|
||||
context.drawImage(image, 0, 0, image.width, image.height);
|
||||
let quality = 0.8;
|
||||
//这里的dataurl就是base64类型
|
||||
dataURL = canvas.toDataURL("image/jpeg", quality); //使用toDataUrl将图片转换成jpeg的格式,不要把图片压缩成png，因为压缩成png后base64的字符串可能比不转换前的长！
|
||||
let noPrefix = dataURL.replace(/^data:image\/\w+;base64,/, '')
|
||||
var msgNew = {
|
||||
id: this.$route.query.id,
|
||||
pic: noPrefix,
|
||||
rate: 'low'
|
||||
}
|
||||
this.analysisConfigurationdata = msgNew
|
||||
var vleNe = {
|
||||
id: this.$route.query.id,
|
||||
pic: noPrefix,
|
||||
rate: 'high'
|
||||
}
|
||||
this.vleNew = vleNe
|
||||
|
||||
}
|
||||
},
|
||||
//获取视频分析结果
|
||||
analysisData() {
|
||||
getAnalysisData(this.$route.query.id).then(res => {
|
||||
console.log('res.data.data', res.data.data);
|
||||
this.analysis.trafficAnalysisPath1 = res.data.data.trafficAnalysisPath1;
|
||||
// if(res.data.data.TrafficAnalysisStatus=='分析异常'){
|
||||
// this.videoAnalysisStatus = '分析异常'
|
||||
// }else {
|
||||
console.log("this.videoAnalysisStatusNew",res.data.data.trafficAnalysisStatus)
|
||||
this.videoAnalysisStatusNew = res.data.data.trafficAnalysisStatus
|
||||
console.log("this.videoAnalysisStatusNew",this.videoAnalysisStatusNew)
|
||||
var numSatusNew = ''
|
||||
this.analysis.videoTotalFrames = Number(res.data.data.videoTotalFrames);
|
||||
if(res.data.data.trafficFrameNumber==''){
|
||||
this.analysis.trafficFrameNumber = 0;
|
||||
}else{
|
||||
this.analysis.trafficFrameNumber =Number(res.data.data.trafficFrameNumber)
|
||||
}
|
||||
numSatusNew=this.analysis.trafficFrameNumber/this.analysis.videoTotalFrames*100
|
||||
this.numSatus= parseFloat(numSatusNew.toFixed(2))
|
||||
if(this.numSatus==100){
|
||||
this.videoAnalysisStatusShow=false
|
||||
}
|
||||
|
||||
// }
|
||||
this.analysis.trafficAnalysisPath1 = res.data.data.trafficAnalysisPath1;
|
||||
this.analysis.trafficAnalysisPath2 = res.data.data.trafficAnalysisPath2;
|
||||
this.analysis.videoAnalysisPath = res.data.data.videoAnalysisPath;
|
||||
this.analysis.videoName = res.data.data.videoName;
|
||||
this.analysis.videoPath = res.data.data.videoPath;
|
||||
this.analysis.videoTotalFrames = res.data.data.videoTotalFrames;
|
||||
this.analysis.videoId = this.$route.query.id;
|
||||
this.analysis.videoType = this.$route.query.type;
|
||||
this.imageUrlToBase64(res.data.data.picPath)
|
||||
|
||||
});
|
||||
},
|
||||
|
||||
//分析结束传参
|
||||
postTraffic(){
|
||||
getAnalysisData(this.$route.query.id).then(res => {
|
||||
console.log('res.data.data', res.data.data);
|
||||
|
||||
this.analysis.trafficAnalysisPath1 = res.data.data.trafficAnalysisPath1;
|
||||
this.analysis.trafficAnalysisPath2 = res.data.data.trafficAnalysisPath2;
|
||||
document.getElementById('mapModule').contentWindow.addColor(this.analysis.trafficAnalysisPath1,this.analysis.trafficAnalysisPath2);
|
||||
});
|
||||
},
|
||||
//停止订阅mqtt
|
||||
|
|
@ -547,21 +656,24 @@ export default {
|
|||
realInfo(topic, message) {
|
||||
switch (topic) {
|
||||
// 接收托片
|
||||
|
||||
case 'img' + this.number:
|
||||
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)
|
||||
// document.getElementById('mapModule').contentWindow.getDestination(JSON.stringify(msg));
|
||||
|
||||
if (msg.rate == 'high') {
|
||||
document.getElementById('mapModule').contentWindow.getDestination(JSON.stringify(msg));
|
||||
} else {
|
||||
}else if (msg.rate == 'low') {
|
||||
|
||||
this.analysisConfigurationdata = msg;
|
||||
}
|
||||
} catch (error) { }
|
||||
} catch (error) {
|
||||
}
|
||||
break;
|
||||
// 树结构
|
||||
case 'stream' + this.number:
|
||||
|
|
@ -612,6 +724,9 @@ export default {
|
|||
var detId = [];
|
||||
const msgN = JSON.parse(temp);
|
||||
// console.log("trigger_msgN",msgN)
|
||||
// msgN.forEach(item => {
|
||||
// console.log("item.name",item.name)
|
||||
// })
|
||||
this.triggerListData = msgN;
|
||||
} catch (error) { }
|
||||
break;
|
||||
|
|
@ -623,9 +738,22 @@ export default {
|
|||
const temp = utf8decoder.decode(u8arr); // 将二进制数据转为字符串
|
||||
var detId = [];
|
||||
const msgN = JSON.parse(temp);
|
||||
console.log("周期时刻",msgN)
|
||||
this.cycleTimeData = msgN;
|
||||
} catch (error) { }
|
||||
break;
|
||||
case 'cycle_history-' + this.$route.query.id:
|
||||
try {
|
||||
// console.log("trigger_msgN",message)
|
||||
const utf8decoder = new TextDecoder();
|
||||
const u8arr = new Uint8Array(message);
|
||||
const temp = utf8decoder.decode(u8arr); // 将二进制数据转为字符串
|
||||
var detId = [];
|
||||
const msgN = JSON.parse(temp);
|
||||
console.log("历史数据",msgN)
|
||||
this.cycleHistoryData = msgN
|
||||
} catch (error) { }
|
||||
break;
|
||||
case 'cycle_statistics-' + this.$route.query.id:
|
||||
try {
|
||||
// console.log("trigger_msgN",message)
|
||||
|
|
@ -634,13 +762,26 @@ export default {
|
|||
const temp = utf8decoder.decode(u8arr); // 将二进制数据转为字符串
|
||||
var detId = [];
|
||||
const msgN = JSON.parse(temp);
|
||||
// console.log("周期统计",msgN)
|
||||
this.cycleStatisticsData = msgN;
|
||||
|
||||
|
||||
// this.cycleStatisticsData = msgN;
|
||||
|
||||
|
||||
} catch (error) { }
|
||||
break;
|
||||
case "VideoStatusData":
|
||||
try {
|
||||
const utf8decoder = new TextDecoder()
|
||||
const u8arr = new Uint8Array(message)
|
||||
const temp = utf8decoder.decode(u8arr) // 将二进制数据转为字符串
|
||||
const msg = JSON.parse(temp) //这一步报错则返回的是二进制流图片，不报错则返回的是JSON的错误提示数据
|
||||
// console.log("VideoStatusData", msg) //msg为转换后的JSON数据
|
||||
this.changeStatus(msg)
|
||||
} catch (error) {
|
||||
|
||||
}
|
||||
break;
|
||||
}
|
||||
this.receiveNews = '';
|
||||
},
|
||||
|
|
@ -655,6 +796,28 @@ export default {
|
|||
this.max = '100';
|
||||
}
|
||||
},
|
||||
changeStatus(msg){
|
||||
//分析中
|
||||
if(msg.type=='traffic_under_analysis'&&msg.video_id==this.$route.query.id){
|
||||
this.videoAnalysisStatus = '分析中'
|
||||
var numSatusN=''
|
||||
// loadingcard.close();
|
||||
numSatusN =msg.number_frames/msg.total_frames*100
|
||||
this.numSatus = parseFloat(numSatusN.toFixed(2))
|
||||
}else if(msg.type=='traffic_analyzed'&&msg.video_id==this.$route.query.id){
|
||||
this.videoAnalysisStatus = '已分析'
|
||||
this.numSatus = 100
|
||||
//已分析
|
||||
console.log("已分析")
|
||||
this.postTraffic()
|
||||
|
||||
}else if(msg.type=='traffic_analyse_unusual'&&msg.video_id==this.$route.query.id){
|
||||
//分析异常
|
||||
console.log("分析异常")
|
||||
this.videoAnalysisStatus = '分析异常'
|
||||
}
|
||||
|
||||
},
|
||||
//初始化unity
|
||||
OnSceneN() {
|
||||
var ip = window.location.host;
|
||||
|
|
@ -663,10 +826,10 @@ export default {
|
|||
document.getElementById('mapModule').contentWindow.getIpData('http://172.16.1.168:5000');
|
||||
if (this.$route.query.type == '离线视频') {
|
||||
document.getElementById('mapModule').contentWindow.lixianVideo(JSON.stringify(this.analysis));
|
||||
document.getElementById('mapModule').contentWindow.getDestination(JSON.stringify(this.vleNew));
|
||||
}
|
||||
document
|
||||
.getElementById('mapModule')
|
||||
.contentWindow.postVideoId(JSON.stringify(this.$route.query.id + ',' + this.$route.query.type));
|
||||
document.getElementById('mapModule').contentWindow.postVideoId(JSON.stringify(this.$route.query.id + ',' + this.$route.query.type));
|
||||
|
||||
},
|
||||
//删除图形成功获取数据
|
||||
delSuccess() {
|
||||
|
|
@ -684,6 +847,8 @@ export default {
|
|||
console.log('id', id);
|
||||
console.log('type', type);
|
||||
console.log('name', name);
|
||||
this.closeEditShow = false
|
||||
this.closeComponentShow = true
|
||||
this.componentId = id;
|
||||
this.componentForm.componentType = type;
|
||||
this.componentTitle = type;
|
||||
|
|
@ -710,9 +875,19 @@ export default {
|
|||
}
|
||||
}
|
||||
this.componentForm.componentParameterId = res.data.data.componentParameterId;
|
||||
this.componentForm.cycleInterval = parseInt(res.data.data.cycleInterval);
|
||||
if(res.data.data.cycleInterval==''){
|
||||
this.componentForm.cycleInterval = 1
|
||||
}else{
|
||||
this.componentForm.cycleInterval =parseInt(res.data.data.cycleInterval);
|
||||
}
|
||||
|
||||
this.componentForm.startSectionIds = res.data.data.startSectionIds;
|
||||
// this.componentForm.FlowType = res.data.data.flowType;
|
||||
// this.componentForm.flowType = res.data.data.flowType;
|
||||
if(res.data.data.flowType==''){
|
||||
this.componentForm.flowType = '出流'
|
||||
}else{
|
||||
this.componentForm.flowType = res.data.data.flowType;
|
||||
}
|
||||
this.componentForm.startSectionNames = res.data.data.startSectionNames;
|
||||
this.componentForm.endSectionIds = res.data.data.endSectionIds;
|
||||
this.componentForm.endSectionNames = res.data.data.endSectionNames;
|
||||
|
|
@ -790,6 +965,8 @@ export default {
|
|||
this.dialogFormVisible = true;
|
||||
}
|
||||
} else if (type == '组件') {
|
||||
this.closeEditShow = true
|
||||
this.closeComponentShow = false
|
||||
this.componentId = id;
|
||||
this.componentForm.componentType = componentType;
|
||||
this.componentTitle = componentType;
|
||||
|
|
@ -812,8 +989,18 @@ export default {
|
|||
}
|
||||
this.componentForm.componentName = res.data.data.componentName;
|
||||
this.componentForm.componentParameterId = res.data.data.componentParameterId;
|
||||
this.componentForm.cycleInterval = parseInt(res.data.data.cycleInterval);
|
||||
this.componentForm.FlowType = res.data.data.flowType;
|
||||
// this.componentForm.cycleInterval = parseInt(res.data.data.cycleInterval);
|
||||
if(res.data.data.cycleInterval==''){
|
||||
this.componentForm.cycleInterval = 1
|
||||
}else{
|
||||
this.componentForm.cycleInterval =parseInt(res.data.data.cycleInterval);
|
||||
}
|
||||
// this.componentForm.flowType = res.data.data.flowType;
|
||||
if(res.data.data.flowType==''){
|
||||
this.componentForm.flowType = '出流'
|
||||
}else{
|
||||
this.componentForm.flowType = res.data.data.flowType;
|
||||
}
|
||||
this.componentForm.startSectionIds = res.data.data.startSectionIds;
|
||||
this.componentForm.startSectionNames = res.data.data.startSectionNames;
|
||||
this.componentForm.endSectionIds = res.data.data.endSectionIds;
|
||||
|
|
@ -1048,7 +1235,7 @@ export default {
|
|||
});
|
||||
}
|
||||
},
|
||||
//新增编辑组件取消
|
||||
//编辑组件
|
||||
onSubmitComponent(componentForm) {
|
||||
this.component = false;
|
||||
let formData = new FormData();
|
||||
|
|
@ -1094,7 +1281,7 @@ export default {
|
|||
formData.append('startValue', componentForm.startValue);
|
||||
formData.append('timeMode', componentForm.timeMode);
|
||||
formData.append('presentationForm', componentForm.presentationForm);
|
||||
formData.append('flowType', componentForm.FlowType);
|
||||
formData.append('flowType', componentForm.flowType);
|
||||
}
|
||||
axios({
|
||||
method: 'post',
|
||||
|
|
@ -1121,32 +1308,81 @@ export default {
|
|||
},
|
||||
//新增编辑组件取消
|
||||
closeComponent(componentForm) {
|
||||
this.component = false;
|
||||
this.componentForm = {
|
||||
console.log("componentForm",componentForm)
|
||||
|
||||
this.component = false;
|
||||
let formData = new FormData();
|
||||
if (componentForm.componentType == 'OD') {
|
||||
//名称
|
||||
formData.append('componentName', componentForm.componentName);
|
||||
//单位
|
||||
company: '',
|
||||
componentName: '',
|
||||
componentParameterId: '01888e05fac246b29e3a19a27c3d2ab0',
|
||||
//周期间隔
|
||||
cycleInterval: '',
|
||||
startSectionIds: '',
|
||||
startSectionNames: '',
|
||||
endSectionIds: '',
|
||||
endSectionNames: '',
|
||||
endValue: '',
|
||||
//展现形式
|
||||
presentationForm: '',
|
||||
presentation: [],
|
||||
startValue: '',
|
||||
timeMode: '',
|
||||
type: [],
|
||||
startSection: [],
|
||||
endSection: [],
|
||||
componentType: '',
|
||||
typeFiltering: '',
|
||||
typeData: []
|
||||
};
|
||||
document.getElementById('mapModule').contentWindow.editComponent('');
|
||||
formData.append('company', componentForm.company);
|
||||
//id
|
||||
formData.append('componentParameterId', componentForm.componentParameterId);
|
||||
formData.append('cycleInterval', componentForm.cycleInterval);
|
||||
formData.append('startSectionIds', componentForm.startSectionIds);
|
||||
formData.append('startSectionNames', componentForm.startSectionNames);
|
||||
formData.append('endSectionIds', componentForm.endSectionIds);
|
||||
formData.append('endSectionNames', componentForm.endSectionNames);
|
||||
formData.append('endValue', componentForm.endValue);
|
||||
formData.append('startValue', componentForm.startValue);
|
||||
formData.append('timeMode', componentForm.timeMode);
|
||||
|
||||
formData.append('presentationForm', '矩阵图');
|
||||
} else if (componentForm.componentType == '类型') {
|
||||
//名称
|
||||
formData.append('componentName', componentForm.componentName);
|
||||
//单位
|
||||
formData.append('company', componentForm.company);
|
||||
//id
|
||||
formData.append('componentParameterId', componentForm.componentParameterId);
|
||||
formData.append('cycleInterval', componentForm.cycleInterval);
|
||||
formData.append('endValue', componentForm.endValue);
|
||||
formData.append('startValue', componentForm.startValue);
|
||||
formData.append('timeMode', componentForm.timeMode);
|
||||
formData.append('presentationForm', componentForm.presentationForm);
|
||||
formData.append('type', componentForm.type);
|
||||
} else {
|
||||
//名称
|
||||
formData.append('componentName', componentForm.componentName);
|
||||
//单位
|
||||
formData.append('company', componentForm.company);
|
||||
//id
|
||||
formData.append('componentParameterId', componentForm.componentParameterId);
|
||||
formData.append('cycleInterval', componentForm.cycleInterval);
|
||||
formData.append('endValue', componentForm.endValue);
|
||||
formData.append('startValue', componentForm.startValue);
|
||||
formData.append('timeMode', componentForm.timeMode);
|
||||
formData.append('presentationForm', componentForm.presentationForm);
|
||||
formData.append('flowType', componentForm.flowType);
|
||||
}
|
||||
axios({
|
||||
method: 'post',
|
||||
url: serverUrl.editComponent,
|
||||
data: formData
|
||||
}).then(res => {
|
||||
console.log('res', res);
|
||||
|
||||
if (res.data.code == 200) {
|
||||
this.$message({
|
||||
message: res.data.msg,
|
||||
type: 'success'
|
||||
});
|
||||
// document.getElementById("mapModule").contentWindow.postFigureId(JSON.stringify(res.data.data))
|
||||
document.getElementById('mapModule').contentWindow.editComponent(this.componentId + ',' + componentForm.componentName);
|
||||
this.dialogFormVisible = false;
|
||||
} else {
|
||||
this.$message({
|
||||
message: res.data.msg,
|
||||
type: 'warning'
|
||||
});
|
||||
}
|
||||
});
|
||||
// document.getElementById('mapModule').contentWindow.editComponent('');
|
||||
},
|
||||
closeEdit(componentForm){
|
||||
this.component = false;
|
||||
document.getElementById('mapModule').contentWindow.editComponent('');
|
||||
},
|
||||
//新增、编辑图形取消按钮
|
||||
closeFigure(form) {
|
||||
|
|
@ -1159,11 +1395,15 @@ export default {
|
|||
document.getElementById('mapModule').contentWindow.delFigure();
|
||||
}
|
||||
},
|
||||
closeComponentForm() {
|
||||
console.log("111")
|
||||
this.component = false;
|
||||
|
||||
closeComponentForm(componentForm) {
|
||||
console.log("111",componentForm)
|
||||
if(this.closeComponentShow==false){
|
||||
this.component = false;
|
||||
document.getElementById('mapModule').contentWindow.editComponent('');
|
||||
}else if(this.closeComponentShow==true){
|
||||
this.closeComponent(componentForm)
|
||||
}
|
||||
|
||||
},
|
||||
closeForm(form) {
|
||||
if (this.form.id != '') {
|
||||
|
|
@ -1341,4 +1581,38 @@ export default {
|
|||
right: 100px;
|
||||
top: 17px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
</style>
|
||||
<style>
|
||||
.progressNew{
|
||||
width: 10%;
|
||||
position: absolute;
|
||||
right: 200px;
|
||||
top: 22px;
|
||||
}
|
||||
.progressNew .el-progress__text {
|
||||
color: #000!important;
|
||||
margin-left: 6px!important;
|
||||
}
|
||||
.el-tabs--border-card .el-tabs__content{
|
||||
padding:5px 15px!important;
|
||||
}
|
||||
.progressNewV{
|
||||
width: 10%;
|
||||
position: absolute;
|
||||
right: 200px;
|
||||
top: 22px;
|
||||
}
|
||||
.progressNewV .el-progress__text {
|
||||
color: #e22b2b!important;
|
||||
margin-left: 6px!important;
|
||||
}
|
||||
.progressNewV .el-progress-bar__inner {
|
||||
background-color: #f56c6c!important;
|
||||
}
|
||||
.el-tabs--border-card .el-tabs__content{
|
||||
padding:5px 15px!important;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -5,38 +5,36 @@
|
|||
<el-form ref="form" :model="formData" label-width="100px" style="display:flex">
|
||||
<el-form-item label="日期：">
|
||||
<el-date-picker
|
||||
value-format="yyyy-MM-dd HH:mm:ss"
|
||||
size="small"
|
||||
v-model="formData.value1"
|
||||
type="datetimerange"
|
||||
range-separator="至"
|
||||
start-placeholder="开始日期"
|
||||
end-placeholder="结束日期"
|
||||
>
|
||||
v-model="formData.value1"
|
||||
type="daterange"
|
||||
range-separator="至"
|
||||
start-placeholder="开始日期"
|
||||
end-placeholder="结束日期">
|
||||
</el-date-picker>
|
||||
</el-form-item>
|
||||
<el-form-item label="内容：">
|
||||
<!-- <el-form-item label="内容：">
|
||||
<el-input size="small" v-model="formData.content"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="通知类型：">
|
||||
</el-form-item> -->
|
||||
<!-- <el-form-item label="通知类型：">
|
||||
<el-select size="small" clearable style="width:100%;" v-model="formData.notificationType" placeholder="请选择">
|
||||
<el-option v-for="item in options" :key="item.name" :label="item.name" :value="item.name"> </el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-form-item> -->
|
||||
<el-form-item>
|
||||
<el-button @click="lookForMessage" type="primary" size="small">查询</el-button>
|
||||
<el-button @click="lookForMessage" type="primary" >查询</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<el-table :data="tableData" :height="tableHeight" border style="width: 100%">
|
||||
<el-table-column align="center" prop="notificationType" label="通知类型" width="180"></el-table-column>
|
||||
<el-table-column align="center" prop="journalTime" label="产生时机" width="180"></el-table-column>
|
||||
<el-table-column show-overflow-tooltip align="center" prop="content" label="内容"></el-table-column>
|
||||
<el-table-column align="center" label="操作" width="160">
|
||||
<!-- <el-table-column align="center" prop="notificationType" label="通知类型" width="180"></el-table-column> -->
|
||||
<el-table-column align="center" prop="journalTime" label="日期" width="180"></el-table-column>
|
||||
<!-- <el-table-column show-overflow-tooltip align="center" prop="content" label="内容"></el-table-column> -->
|
||||
<el-table-column show-overflow-tooltip align="center" prop="content" label="下载"></el-table-column>
|
||||
<!-- <el-table-column align="center" label="操作" width="160">
|
||||
<template slot-scope="scope">
|
||||
<el-button @click="showView(scope.row)" type="text" size="small">详情</el-button>
|
||||
<el-button @click="clickDelete(scope.row)" style="color:red" type="text" size="small">删除</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table-column> -->
|
||||
</el-table>
|
||||
|
||||
<el-pagination
|
||||
|
|
@ -107,11 +105,11 @@ export default {
|
|||
setTimes() {
|
||||
let arr = [];
|
||||
//当前时间
|
||||
let s = moment().format('YYYY-MM-DD HH:mm:ss'); //1，day就代表前一天
|
||||
let s = moment().format('YYYY-MM-DD'); //1，day就代表前一天
|
||||
//两天前
|
||||
let i = moment(s)
|
||||
.subtract(2, 'days')
|
||||
.format('YYYY-MM-DD HH:mm:ss');
|
||||
.format('YYYY-MM-DD');
|
||||
arr = [s, i];
|
||||
this.formData.value1 = arr;
|
||||
this.$forceUpdate();
|
||||
|
|
|
|||
Loading…
Reference in New Issue