This commit is contained in:
luoshiwen 2023-03-23 09:41:33 +08:00
commit 255481f009
4 changed files with 314 additions and 266 deletions

View File

@ -1,237 +1,237 @@
<template>
<!-- 触发类型 -->
<div class="setion">
<!-- <p class="chartTitle"><span class="titleIcon"></span> {{ componentName }} {{ triggerType }}</p> -->
<!-- 触发数据数值渲染 -->
<div class="typeContent">
<div v-if="newDataArr && newDataArr.length != 0 && newDataArr != undefined">
<div v-if="title == '类型'" style="display:flex">
<el-card v-for="(n, i) in newDataArr[0].type_data" :key="i"
style="width: 150px; margin-bottom: 20px; text-align: center">
<div>
<span style="font-size: 15px;">{{ n.name }}</span><br />
<span style="font-size: 30px; font-weight: bold">{{ n.quantity }}</span>
</div>
<div>
<div>
{{ newDataArr[0].time ? newDataArr[0].time : '' }}
</div>
</div>
</el-card>
</div>
</div>
<el-card v-show="echartArr.includes('数值')" style="width: 150px; margin-bottom: 20px; text-align: center">
<div v-if="newDataArr && newDataArr.length != 0 && newDataArr != undefined">
<div v-if="title == '类型'">
<span style="font-size: 15px;">类型数量总和</span><br />
<span style="font-size: 30px; font-weight: bold">
{{ getTotal(newDataArr) }}
</span>
</div>
<div style="font-size: 30px; font-weight: bold"
v-if="title == '速度' && dataArr.length != 0 && dataArr != undefined">
<span style="font-size: 15px;">速度</span><br />
<!-- <span style="font-size: 30px; font-weight: bold">{{ typeValue.speed }}</span> -->
<span style="font-size: 30px; font-weight: bold">{{ newDataArr[0].speed }}</span>
</div>
<div style="font-size: 30px; font-weight: bold"
v-if="title == '流量' && dataArr.length != 0 && dataArr != undefined">
<span style="font-size: 15px;">流量</span><br />
<span style="font-size: 30px; font-weight: bold">{{ newDataArr[0].flow }}</span>
</div>
<div style="font-size: 30px; font-weight: bold" v-if="title == '车头时距'">
<span style="font-size: 15px;">车头时距</span><br />
<span style="font-size: 30px; font-weight: bold">{{ newDataArr[0].headway }}</span>
</div>
<div style="font-size: 30px; font-weight: bold" v-if="title == '排队数'">
<span style="font-size: 15px;">排队数</span><br />
<span style="font-size: 30px; font-weight: bold">{{ queue }}</span>
</div>
<div style="font-size: 30px; font-weight: bold" v-if="title == '检测数'">
<span style="font-size: 15px;">检测数</span><br />
<span style="font-size: 30px; font-weight: bold">{{ newDataArr[0].n_stay }}</span>
</div>
<div style="font-size: 30px; font-weight: bold" v-if="title == '延误'">
<span style="font-size: 15px;">延误</span><br />
<span style="font-size: 30px; font-weight: bold">{{ newDataArr[0].ave_delay }}</span>
</div>
<div>
<div>
{{ newDataArr[0].time ? newDataArr[0].time : '' }}
</div>
</div>
</div>
<div v-else>
<el-empty :image-size="100"></el-empty>
</div>
</el-card>
</div>
<div v-show="echartArr.includes('表格')">
<div class="tableTitle" v-if="newDataArr && newDataArr.length != 0 && newDataArr != undefined">
<div>
<span
style="width: 10px;height:10px;border-radius: 50%;background-color: #3297ff;display: inline-block;vertical-align: middle;margin-right: 8px;"></span>
<span style="font-size:18px;">{{ this.chartName + '-' + this.componentName + '-' + '表格' + '-' +
triggerType }}</span>
</div>
<div class="tableTime">
{{ newDataArr[0].time ? newDataArr[0].time : '' }}
</div>
</div>
<div v-if="pageType == '断面'" style="margin-bottom: 20px; border: 1px solid #e4e7ed">
<tableShow :msg="newDataArr" :triggerType="triggerType" />
</div>
<div v-if="pageType == '区域'">
<regionTable :msg="newDataArr" :triggerType="triggerType" />
</div>
</div>
<div class="border" v-if="echartArr.includes('曲线图')">
<detailDialog />
<lineChart :componentName="componentName" :chartName="chartName" :pageType="pageType" :list="newDataArr"
:status="triggerType" :title="title" :typeValue="typeValue" ref="lineChartRef" />
</div>
<div class="border" v-if="echartArr.includes('饼状图')">
<detailDialog />
<pieChart :componentName="componentName" :chartName="chartName" :pageType="pageType" :list="newDataArr"
:status="triggerType" :title="title" :typeValue="typeValue" ref="pieChartRef" />
</div>
<div class="border" v-if="echartArr.includes('均值图')">
<detailDialog />
<avgChart ref="avgChartRef" :componentName="componentName" :chartName="chartName" :pageType="pageType"
:list="newDataArr" :status="triggerType" :title="title" :typeValue="typeValue" />
</div>
<div class="border" v-if="echartArr.includes('直方图')">
<detailDialog />
<barChart :componentName="componentName" :chartName="chartName" :pageType="pageType" :list="newDataArr"
:status="triggerType" :title="title" :typeValue="typeValue" ref="barChartRef" />
</div>
<div class="border" v-if="echartArr.includes('矩阵图')">
<detailDialog />
<thermalChart :componentName="componentName" :pageType="pageType" :list="newDataArr"
:status="triggerType" :title="title" :typeValue="typeValue" ref="ODChartRef" />
</div>
</div>
</template>
<script>
import avgChart from '../chart/avgChart.vue';
import lineChart from '../chart/lineChart.vue';
import barChart from '../chart/barChart.vue';
import tableShow from '../chart/tableShow.vue';
import pieChart from '../chart/pieChart.vue';
import detailDialog from '../chart/detailDialog.vue';
import regionTable from '../chart/regionTable.vue';
import thermalChart from '../chart/thermalChart.vue';
export default {
name: 'typeChart', //
props: ['typeValue', 'pageType', 'triggerType', 'dataArr', 'echartArr', 'componentName', 'title', 'chartName','startEndData'],
components: {
lineChart,
barChart,
tableShow,
detailDialog,
regionTable,
pieChart,
avgChart,
thermalChart
},
data() {
return {
//
total: 0,
//
speed: 0,
//
flow: 0,
isRefer: true,
valueShow: {},
//
queue: '',
newDataArr: []
};
},
created() {
},
methods: {
//
getDataArr(val) {
this.newDataArr = val
this.getNewQueue(this.newDataArr)
},
getTotal(dataArr) {
if (this.title == '类型') {
return dataArr[0].type_data.reduce(function (prev, cur) {
return cur.quantity + prev;
}, 0);
}
},
getNewQueue(val) {
if (val[0].n_queue) {
this.queue = val[0].n_queue;
}
if (val[0].ave_queue) {
this.queue = val[0].ave_queue;
}
if (val[0].headway) {
this.newDataArr[0].headway = val[0].headway;
}
if (val[0].ave_headway) {
this.newDataArr[0].headway = val[0].ave_headway;
}
if (val[0].n_stay) {
this.newDataArr[0].n_stay = val[0].n_stay;
}
if (val[0].ave_stay) {
this.newDataArr[0].n_stay = val[0].ave_stay;
}
},
},
computed: {
//
},
mounted() { },
watch: {
//
// dataArr: {
// handler(newVal) {
// // console.log('dataArr', newVal);
// if (newVal != undefined && newVal.length != 0) {
// this.getNewQueue(newVal);
// }
// },
// immediate: true
// }
// typeValue:{
// handler(newVal) {
// // console.log('dataArr', newVal);
// },
// immediate: true
// }
}
};
</script>
<style scoped>
.tableTitle {
background: #f7f8fa;
margin-bottom: 5px;
padding: 8px;
}
.typeContent {
box-sizing: border-box;
}
.border {
width: 100%;
margin-bottom: 20px;
position: relative;
}
</style>
<template>
<!-- 触发类型 -->
<div class="setion">
<!-- <p class="chartTitle"><span class="titleIcon"></span> {{ componentName }} {{ triggerType }}</p> -->
<!-- 触发数据数值渲染 -->
<div class="typeContent">
<div v-if="newDataArr && newDataArr.length != 0 && newDataArr != undefined">
<div v-if="title == '类型'" style="display:flex">
<el-card v-for="(n, i) in newDataArr[0].type_data" :key="i"
style="width: 150px; margin-bottom: 20px; text-align: center">
<div>
<span style="font-size: 15px;">{{ n.name }}</span><br />
<span style="font-size: 30px; font-weight: bold">{{ n.quantity }}</span>
</div>
<div>
<div>
{{ newDataArr[0].time ? newDataArr[0].time : '' }}
</div>
</div>
</el-card>
</div>
</div>
<el-card v-show="echartArr.includes('数值')" style="width: 150px; margin-bottom: 20px; text-align: center">
<div v-if="newDataArr && newDataArr.length != 0 && newDataArr != undefined">
<div v-if="title == '类型'">
<span style="font-size: 15px;">类型数量总和</span><br />
<span style="font-size: 30px; font-weight: bold">
{{ getTotal(newDataArr) }}
</span>
</div>
<div style="font-size: 30px; font-weight: bold"
v-if="title == '速度' && dataArr.length != 0 && dataArr != undefined">
<span style="font-size: 15px;">速度</span><br />
<!-- <span style="font-size: 30px; font-weight: bold">{{ typeValue.speed }}</span> -->
<span style="font-size: 30px; font-weight: bold">{{ newDataArr[0].speed }}</span>
</div>
<div style="font-size: 30px; font-weight: bold"
v-if="title == '流量' && dataArr.length != 0 && dataArr != undefined">
<span style="font-size: 15px;">流量</span><br />
<span style="font-size: 30px; font-weight: bold">{{ newDataArr[0].flow }}</span>
</div>
<div style="font-size: 30px; font-weight: bold" v-if="title == '车头时距'">
<span style="font-size: 15px;">车头时距</span><br />
<span style="font-size: 30px; font-weight: bold">{{ newDataArr[0].headway }}</span>
</div>
<div style="font-size: 30px; font-weight: bold" v-if="title == '排队数'">
<span style="font-size: 15px;">排队数</span><br />
<span style="font-size: 30px; font-weight: bold">{{ queue }}</span>
</div>
<div style="font-size: 30px; font-weight: bold" v-if="title == '检测数'">
<span style="font-size: 15px;">检测数</span><br />
<span style="font-size: 30px; font-weight: bold">{{ newDataArr[0].n_stay }}</span>
</div>
<div style="font-size: 30px; font-weight: bold" v-if="title == '延误'">
<span style="font-size: 15px;">延误</span><br />
<span style="font-size: 30px; font-weight: bold">{{ newDataArr[0].ave_delay }}</span>
</div>
<div>
<div>
{{ newDataArr[0].time ? newDataArr[0].time : '' }}
</div>
</div>
</div>
<div v-else>
<el-empty :image-size="100"></el-empty>
</div>
</el-card>
</div>
<div v-show="echartArr.includes('表格')">
<div class="tableTitle" v-if="newDataArr && newDataArr.length != 0 && newDataArr != undefined">
<div>
<span
style="width: 10px;height:10px;border-radius: 50%;background-color: #3297ff;display: inline-block;vertical-align: middle;margin-right: 8px;"></span>
<span style="font-size:18px;">{{ this.chartName + '-' + this.componentName + '-' + '表格' + '-' +
triggerType }}</span>
</div>
<div class="tableTime">
{{ newDataArr[0].time ? newDataArr[0].time : '' }}
</div>
</div>
<div v-if="pageType == '断面'" style="margin-bottom: 20px; border: 1px solid #e4e7ed">
<tableShow :msg="newDataArr" :triggerType="triggerType" />
</div>
<div v-if="pageType == '区域'">
<regionTable :msg="newDataArr" :triggerType="triggerType" />
</div>
</div>
<div class="border" v-if="echartArr.includes('曲线图')">
<detailDialog />
<lineChart :componentName="componentName" :chartName="chartName" :pageType="pageType" :list="newDataArr"
:status="triggerType" :title="title" :typeValue="typeValue" ref="lineChartRef" />
</div>
<div class="border" v-if="echartArr.includes('饼状图')">
<detailDialog />
<pieChart :componentName="componentName" :chartName="chartName" :pageType="pageType" :list="newDataArr"
:status="triggerType" :title="title" :typeValue="typeValue" ref="pieChartRef" />
</div>
<div class="border" v-if="echartArr.includes('均值图')">
<detailDialog />
<avgChart ref="avgChartRef" :componentName="componentName" :chartName="chartName" :pageType="pageType"
:list="newDataArr" :status="triggerType" :title="title" :typeValue="typeValue" />
</div>
<div class="border" v-if="echartArr.includes('直方图')">
<detailDialog />
<barChart :componentName="componentName" :chartName="chartName" :pageType="pageType" :list="newDataArr"
:status="triggerType" :title="title" :typeValue="typeValue" ref="barChartRef" />
</div>
<div class="border" v-if="echartArr.includes('矩阵图')">
<detailDialog />
<thermalChart :componentName="componentName" :pageType="pageType" :list="newDataArr"
:status="triggerType" :title="title" :typeValue="typeValue" ref="ODChartRef" />
</div>
</div>
</template>
<script>
import avgChart from '../chart/avgChart.vue';
import lineChart from '../chart/lineChart.vue';
import barChart from '../chart/barChart.vue';
import tableShow from '../chart/tableShow.vue';
import pieChart from '../chart/pieChart.vue';
import detailDialog from '../chart/detailDialog.vue';
import regionTable from '../chart/regionTable.vue';
import thermalChart from '../chart/thermalChart.vue';
export default {
name: 'typeChart', //
props: ['typeValue', 'pageType', 'triggerType', 'dataArr', 'echartArr', 'componentName', 'title', 'chartName','startEndData'],
components: {
lineChart,
barChart,
tableShow,
detailDialog,
regionTable,
pieChart,
avgChart,
thermalChart
},
data() {
return {
//
total: 0,
//
speed: 0,
//
flow: 0,
isRefer: true,
valueShow: {},
//
queue: '',
newDataArr: []
};
},
created() {
},
methods: {
//
getDataArr(val) {
this.newDataArr = val
this.getNewQueue(this.newDataArr)
},
getTotal(dataArr) {
if (this.title == '类型') {
return dataArr[0].type_data.reduce(function (prev, cur) {
return cur.quantity + prev;
}, 0);
}
},
getNewQueue(val) {
if (val[0].n_queue) {
this.queue = val[0].n_queue;
}
if (val[0].ave_queue) {
this.queue = val[0].ave_queue;
}
if (val[0].headway) {
this.newDataArr[0].headway = val[0].headway;
}
if (val[0].ave_headway) {
this.newDataArr[0].headway = val[0].ave_headway;
}
if (val[0].n_stay) {
this.newDataArr[0].n_stay = val[0].n_stay;
}
if (val[0].ave_stay) {
this.newDataArr[0].n_stay = val[0].ave_stay;
}
},
},
computed: {
//
},
mounted() { },
watch: {
//
// dataArr: {
// handler(newVal) {
// // console.log('dataArr', newVal);
// if (newVal != undefined && newVal.length != 0) {
// this.getNewQueue(newVal);
// }
// },
// immediate: true
// }
// typeValue:{
// handler(newVal) {
// // console.log('dataArr', newVal);
// },
// immediate: true
// }
}
};
</script>
<style scoped>
.tableTitle {
background: #f7f8fa;
margin-bottom: 5px;
padding: 8px;
}
.typeContent {
box-sizing: border-box;
}
.border {
width: 100%;
margin-bottom: 20px;
position: relative;
}
</style>

View File

@ -24,7 +24,7 @@ export default {
//编辑保存组件弹窗传参
setHostName: 'http://172.16.1.168:5000/api/SetHostName',
setHostTime: 'http://172.16.1.168:5000/api/SetHostTime',
// changePassowrd:'http://172.16.1.168:5000/api/ChangePassword'
changePassowrd:'http://172.16.1.168:5000/api/ChangePassword'
// `http://${ipUurl}:5000/api/AddShipjk`
// dataUrl: `http://${ipUurl}:5000/api/AddShipjk`,
// getSpareElementOrder: `http://${ipUurl}:5000/api/Upload`,

View File

@ -757,8 +757,8 @@ 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(this.ipData);
// 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}));

View File

@ -270,24 +270,37 @@ export default {
let valdata2 = value.split('/')[1];
console.log("valdata",valdata)
console.log("valdata2",valdata2)
let valdata3 = value.split('/')[2];
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]'));
const re = /^[0-9]*[1-9][0-9]*$/;
const rsCheck = re.test(value);
// if (regexp.test(valdata[i]) == false&&!Number(valdata2)&&(valdata2 < 1 || valdata2 > 32)&&valdata3&&!rsCheck) {
if (regexp.test(valdata[i]) == false) {
isCorrect = false;
callback(new Error('请输入正确的IP地址'));
}else{
if (!Number(valdata2)) {
isCorrect = false;
callback(new Error('请输入正确的IP地址'));
} else {
if (valdata2 < 1 || valdata2 > 32) {
callback(new Error('请输入整数,值为[1,32]'));
isCorrect = false;
} else {
callback();
}
if(valdata3){
isCorrect = false;
callback(new Error('请输入正确的IP地址'));
}
}
}
}
}
}
}
@ -362,7 +375,7 @@ export default {
}
],
sizeForm: {
name: 'eth0',
name: '',
region: '00:11:14:1a:62:fe',
MTU: '1500',
date2: '',
@ -432,8 +445,8 @@ export default {
},
options: [
{
value: 'eth0',
label: 'eth0'
value: '',
label: ''
},
// {
// value: 'wlan0',
@ -443,7 +456,7 @@ export default {
//
netWork:[
{
name: 'eth0',
name: '',
region: '00:11:14:1a:62:fe',
MTU: '1500',
date2: '',
@ -544,12 +557,12 @@ export default {
},
created() {
this.createMqtt()
setTimeout(() => {
this.publishClient()
}, 1000 * 3 );
},
mounted() {
// window.setInterval( () => { //30 this.getdata()
// this.publishClient()
// }, 1000 * 5 )
},
methods:{
//
@ -569,7 +582,7 @@ export default {
var ner = {
type:"netplanSet",
ethName:"eth0",
ethName:sizeForm.name,
dhcp4: false,
addresses:tableDataN,//
gateway4:sizeForm.gateway4,
@ -582,12 +595,49 @@ export default {
type: 'warning'
})
.then(() => {
// this.$message({
// type: 'success',
// message: '!'
// });
this.$message({
type: 'success',
message: '设置成功!'
});
console.log("JSON.stringify(ner)",JSON.stringify(ner))
// window.publish('Contorl_client',JSON.stringify(ner));
window.publish('Contorl_client',JSON.stringify(ner));
this.sizeForm={
name: '',
region: '00:11:14:1a:62:fe',
MTU: '1500',
date2: '',
delivery: false,
type: [],
resource: '',
desc: true,
ip: '192.168.1.5/24',
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:'NO',
gateway4: '',
mtu:'',
mac:'',
moren:'',
speed:'',
tableRouter: [],
tableData: [],
tableDataDNS: [],
}
const loading = this.$loading({
lock: true,
text: 'Loading',
spinner: 'el-icon-loading',
background: 'rgba(0, 0, 0, 0.7)'
});
setTimeout(() => {
loading.close();
this.publishClient()
}, 5000);
})
.catch(() => {
this.$message({
@ -648,9 +698,7 @@ export default {
//
var topicSends = ['Contorl_server'];
window.PubScribe(topicSends,-1,this.realInfo);
setTimeout(() => {
this.publishClient()
}, 5000);
},
publishClient(){
window.publish('Contorl_client',JSON.stringify({"type":"getNet"}));
@ -684,9 +732,9 @@ export default {
changeNetstates(msg){
console.log("msg",msg)
// var optionsDataN = this.optionsData
// this.sizeForm.mtu = msg.netstatesthis.optionsData}.mtu
console.log(" msg.netstates[this.optionsData]",msg.netstates[this.optionsData])
console.log(" msg.netstates[this.optionsData]",this.optionsData)
if(msg.netstates[this.optionsData]!=undefined){
this.sizeForm.name = this.optionsData
this.sizeForm.mtu = msg.netstates[this.optionsData].mtu
var data = msg.netaddres[this.optionsData]
this.sizeForm.speed = msg.netstates[this.optionsData].speed