chengdandan
/
TransFlow
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

20230226

This commit is contained in:
chengdandan 2023-02-26 09:55:32 +08:00
parent 164774ffd7 ecd604b289
commit 5e5af91675
5 changed files with 256 additions and 179 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
src/api/aboutMachine.js
View File

@ -5,3 +5,13 @@ export const getHostInfoApi = params => {
params
});
};
//获取upd接口
export const getUpdInfoApi = params => {
return axios.get('api/GetUdppz', {
params
});
};
export const resetReboot = data => {
return axios.post('api/SetReboot', data, { headers: { 'Content-Type': 'application/x-www-form-urlencoded' } });
};

105
src/components/target/typeChart.vue
View File

@ -1,22 +1,21 @@
<template>
<!-- 触发类型 -->
<div class="setion">
<p class="chartTitle"><span class="titleIcon"></span> {{ componentName }} {{ triggerType }}</p>
<!-- <p class="chartTitle"><span class="titleIcon"></span> {{ componentName }} {{ triggerType }}</p> -->
<!-- 触发数据数值渲染 -->
<div class="typeContent">
<div v-if="dataArr && dataArr.length != 0 && dataArr != undefined">
<div v-if="title == '类型'" style="display:flex">
<el-card v-for="(n, i) in dataArr[0].type_data" :key="i"
style="width: 150px; margin-bottom: 20px; text-align: center">
<el-card v-for="(n, i) in dataArr[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: 15px;">{{ n.name }}</span
><br />
<span style="font-size: 30px; font-weight: bold">{{ n.quantity }}</span>
</div>
<div>
<div>
{{ dataArr[0].time ? dataArr[0].time : '' }}
</div>
</div>
</el-card>
</div>
@ -69,9 +68,9 @@
<div class="tableTitle" v-if="dataArr && dataArr.length != 0 && dataArr != 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>
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">
{{ dataArr[0].time ? dataArr[0].time : '' }}
@ -86,23 +85,55 @@
</div>
<div class="border" v-if="echartArr.includes('曲线图')">
<detailDialog />
<lineChart :componentName="componentName" :chartName="chartName" :pageType="pageType" :list="dataArr"
:status="triggerType" :title="title" :typeValue="typeValue" ref="lineChartRef" />
<lineChart
:componentName="componentName"
:chartName="chartName"
:pageType="pageType"
:list="dataArr"
: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="dataArr"
:status="triggerType" :title="title" :typeValue="typeValue" ref="pieChartRef"/>
<pieChart
:componentName="componentName"
:chartName="chartName"
:pageType="pageType"
:list="dataArr"
:status="triggerType"
:title="title"
:typeValue="typeValue"
ref="pieChartRef"
/>
</div>
<div class="border" v-if="echartArr.includes('均值图')">
<detailDialog />
<avgChart ref="avgRefChart" :componentName="componentName" :chartName="chartName" :pageType="pageType"
:list="dataArr" :status="triggerType" :title="title" :typeValue="typeValue" />
<avgChart
ref="avgRefChart"
:componentName="componentName"
:chartName="chartName"
:pageType="pageType"
:list="dataArr"
:status="triggerType"
:title="title"
:typeValue="typeValue"
/>
</div>
<div class="border" v-if="echartArr.includes('直方图')">
<detailDialog />
<barChart :componentName="componentName" :chartName="chartName" :pageType="pageType" :list="dataArr"
:status="triggerType" :title="title" :typeValue="typeValue" ref="barChartRef"/>
<barChart
:componentName="componentName"
:chartName="chartName"
:pageType="pageType"
:list="dataArr"
:status="triggerType"
:title="title"
:typeValue="typeValue"
ref="barChartRef"
/>
</div>
</div>
</template>
@ -137,29 +168,25 @@ export default {
flow: 0,
isRefer: true,
valueShow: { },
valueShow: {},
//排队数
queue: '',
queue: ''
};
},
created() {
console.log(this.title);
console.log(this.title);
},
methods: {
// 计算类型数量的总和
getTotal(dataArr) {
if(dataArr!=undefined&&dataArr.length!=0){
return dataArr[0].type_data.reduce(function(prev, cur) {
return cur.quantity + prev
}, 0)
}
return dataArr[0].type_data.reduce(function(prev, cur) {
return cur.quantity + prev;
}, 0);
// return dataArr[0].type_data((pre, cur) => {
// return pre + cur
// }, 0)
// }, 0)
},
// 计算类型的数值
getNewQueue(dataArr) {
@ -172,35 +199,31 @@ export default {
// }
if (dataArr[0].timeMode=='触发') {
this.queue = dataArr[0].n_queue
} else if (dataArr[0].timeMode=='周期统计') {
this.queue = dataArr[0].ave_queue
} else if (dataArr[0].timeMode=='周期时刻') {
if (dataArr[0].timeMode == '触发') {
this.queue = dataArr[0].n_queue;
} else if (dataArr[0].timeMode == '周期统计') {
this.queue = dataArr[0].ave_queue;
} else if (dataArr[0].timeMode == '周期时刻') {
}
}
},
computed: {
// 获取类型的总数量
},
mounted() { },
mounted() {},
watch: {
// 监听触发数据
dataArr: {
handler(newVal) {
// console.log('dataArr', newVal);
if(newVal!=undefined&&newVal.length!=0){
this.getNewQueue(newVal)
if (newVal != undefined && newVal.length != 0) {
this.getNewQueue(newVal);
}
},
immediate: true
},
}
// cycleTimeData: {
// handler(newVal) {
// console.log(newVal);

74
src/views/SystemSettings/UDPServiceSettings.vue
View File

@ -1,46 +1,56 @@
<template>
<div class="content-box">
<div class="container">
<p class="title">UPD服务设置</p>
<!-- <div class="test-div">
<i class="el-icon-edit"></i>
<i class="el-icon-share"></i>
<i class="el-icon-delete"></i>
</div> -->
<el-form :model="form" label-position="left" label-width="180px">
<el-form-item label="upd服务器端口：">
<el-input-number v-model="form.name" controls-position="right" :min="1"></el-input-number>
</el-form-item>
<div class="content-box">
<div class="container">
<p class="title">UPD服务设置</p>
<el-form :model="form" label-position="left" label-width="180px">
<el-form-item label="upd服务器端口：">
<el-input-number v-model="form.name" controls-position="right" :min="1"></el-input-number>
</el-form-item>
<el-form-item label="启用有效载荷：">
<el-switch v-model="form.delivery"></el-switch>
</el-form-item>
<el-form-item label="启用有效载荷：">
<el-switch v-model="form.delivery"></el-switch>
</el-form-item>
<el-form-item label="最大数据包大小：">
<el-input-number v-model="form.bytes" controls-position="right" :min="1"></el-input-number>
bytes
</el-form-item>
</el-form>
<el-form-item label="最大数据包大小：">
<el-input-number v-model="form.bytes" controls-position="right" :min="1"></el-input-number>
bytes
</el-form-item>
</el-form>
</div>
</div>
</div>
</template>
<script>
import { getUpdInfoApi } from '../../api/aboutMachine';
export default {
data() {
return {
form: {
name: 55570,
delivery: true,
bytes: 4096
}
data() {
return {
form: {
name: 55570,
delivery: true,
bytes: 4096
}
};
},
methods: {
getUpd() {
getUpdInfoApi()
.then(res => {
console.log(res.data.data);
})
.catch(err => {
this.$message.error(res.data.msg);
});
}
},
mounted() {
this.getUpd();
}
}
}
};
</script>
<style>
.test-div i {
font-size: 25px;
font-size: 25px;
}
</style>
</style>

229
src/views/bounced/dataBoard.vue
View File

@ -6,8 +6,12 @@
<div class="dataBoard" ref="dataBoard" v-if="activeName == 'second'">
<!-- 断面 -->
<div class="plate1" ref="plate1">
<div :class="sectionData.length <= 2 ? 'sectionBox' : 'section'" ref="section"
v-for="(s, i) in sectionData" :key="s.analogAreaComponentId">
<div
:class="sectionData.length <= 2 ? 'sectionBox' : 'section'"
ref="section"
v-for="(s, i) in sectionData"
:key="s.analogAreaComponentId"
>
<template>
<div ref="sectionContent">
<div>
@ -18,30 +22,58 @@
</div>
<el-tabs>
<el-collapse v-model="acticveName">
<div v-for="o in s.children" :key="o.analogAreaComponentId">
<el-collapse-item :title="o.componentName" :name="o.analogAreaComponentId">
<OD v-if="o.componentName.includes('OD')" :pageType="o.graphicType"
triggerType="触发" :componentName="o.componentName"
:echartArr="o.presentationForm" :dataArr="o.trigger"
:title="o.componentName.split('_')[0]" :chartName="o.combinationName" />
<div style="position:relative" v-for="o in s.children" :key="o.analogAreaComponentId">
<div class="titleGnag"></div>
<el-collapse-item :title="o.componentName + o.timeMode" :name="o.analogAreaComponentId">
<OD
v-if="o.componentName.includes('OD')"
:pageType="o.graphicType"
triggerType="触发"
:componentName="o.componentName"
:echartArr="o.presentationForm"
:dataArr="o.trigger"
:title="o.componentName.split('_')[0]"
:chartName="o.combinationName"
/>
<!--触发的组件 -->
<typeChart ref="typeChartRef" v-if="o.timeMode === '触发'"
:pageType="o.graphicType" :triggerType="o.timeMode"
:componentName="o.componentName" :dataArr="o.trigger"
:echartArr="o.presentationForm" :title="o.componentName.split('_')[0]"
:chartName="o.combinationName" :typeValue="typeTimeMode" />
<typeChart ref="typeChartRef1" v-if="o.timeMode === '周期时刻'"
:pageType="o.graphicType" :triggerType="o.timeMode"
:componentName="o.componentName" :dataArr="o.cycleTimeData"
:echartArr="o.presentationForm" :title="o.componentName.split('_')[0]"
:chartName="o.combinationName" :typeValue="typeCycleTimeData" />
<typeChart
ref="typeChartRef"
v-if="o.timeMode === '触发'"
:pageType="o.graphicType"
:triggerType="o.timeMode"
:componentName="o.componentName"
:dataArr="o.trigger"
:echartArr="o.presentationForm"
:title="o.componentName.split('_')[0]"
:chartName="o.combinationName"
:typeValue="typeTimeMode"
/>
<typeChart
ref="typeChartRef1"
v-if="o.timeMode === '周期时刻'"
:pageType="o.graphicType"
:triggerType="o.timeMode"
:componentName="o.componentName"
:dataArr="o.cycleTimeData"
:echartArr="o.presentationForm"
:title="o.componentName.split('_')[0]"
:chartName="o.combinationName"
:typeValue="typeCycleTimeData"
/>
<!-- 周期统计的组件 -->
<typeChart ref="typeChartRef2" style="width: 100%;"
v-if="o.timeMode === '周期统计'" :pageType="o.graphicType"
:triggerType="o.timeMode" :componentName="o.componentName"
:dataArr="o.cycleStatistics" :echartArr="o.presentationForm"
:title="o.componentName.split('_')[0]" :chartName="o.combinationName"
:typeValue="typeCycleStatistics" />
<typeChart
ref="typeChartRef2"
style="width: 100%;"
v-if="o.timeMode === '周期统计'"
:pageType="o.graphicType"
:triggerType="o.timeMode"
:componentName="o.componentName"
:dataArr="o.cycleStatistics"
:echartArr="o.presentationForm"
:title="o.componentName.split('_')[0]"
:chartName="o.combinationName"
:typeValue="typeCycleStatistics"
/>
</el-collapse-item>
</div>
</el-collapse>
@ -104,7 +136,6 @@ export default {
title2: '01区域',
dialogVisible: false,
idVal: '',
//组件数组
componentList: [],
@ -151,9 +182,9 @@ export default {
});
},
siftData() {
this.sectionArr = []
this.sectionData = []
this.classify = []
this.sectionArr = [];
this.sectionData = [];
this.classify = [];
this.componentList.forEach(val => {
this.sectionArr.push(val.combinationName);
this.sectionArr = Array.from(new Set(this.sectionArr));
@ -163,14 +194,13 @@ export default {
this.acticveName = [];
this.componentList.forEach(val => {
if (item.title == val.combinationName) {
this.classify.push(val)
this.classify.push(val);
item.children.push(val);
}
this.acticveName.push(val.analogAreaComponentId);
this.acticveName.push([]);
});
return item;
});
},
// 组件图标点击下拉事件
sectionHandle(i) {
@ -189,27 +219,26 @@ export default {
downPulls1[i].style.cssText = 'transition: all 0.5s linear;';
// sections[i].style.height = '500px';
if (sectionBox[i] != undefined) {
}
}
},
channge(oldVal, newVal) {
console.log("old", oldVal)
console.log("newVal", newVal)
console.log('old', oldVal);
console.log('newVal', newVal);
if (oldVal == 'second') {
this.sectionArr = []
this.sectionData = []
this.getNew()
this.sectionArr = [];
this.sectionData = [];
this.getNew();
} else if (newVal == 'second') {
this.sectionArr = []
this.sectionData = []
this.getNew()
this.sectionArr = [];
this.sectionData = [];
this.getNew();
}
}
// 触发数据的类型数值
},
mounted() { },
mounted() {},
watch: {
// acticveName: {
// handler(newVal) {
@ -222,7 +251,7 @@ export default {
// },
// 触发的原始数据
triggerData: {
handler(newVal, oldVal) { },
handler(newVal, oldVal) {},
immediate: true
},
// activeName:'channge',
@ -231,14 +260,13 @@ export default {
handler(newVal) {
this.triggerList = newVal;
// 触发数据
var _this = this
var _this = this;
if (newVal.length != 0 && _this.sectionData) {
_this.classify.forEach((ele, index) => {
if (ele.trigger == undefined && ele.timeMode == '触发') {
ele.trigger = [];
}
newVal.forEach((item) => {
newVal.forEach(item => {
if (ele.analogAreaComponentId == item.component_id && ele.timeMode == '触发') {
if (ele.trigger.length == 10) {
ele.trigger.splice(newVal.length - 1, 1);
@ -246,38 +274,30 @@ export default {
item.time = item.time.split('.')[0];
// 该时间的触发数据
if (item.type_data != null) {
_this.typeTimeMode = item
_this.typeTimeMode = item;
}
ele.trigger.unshift(item);
_this.$nextTick(() => {
for (let i = 0; i < _this.$refs.typeChartRef.length; i++) {
// console.log(_this.$refs.typeChartRef[i], '触发接收的表格数据');
let item = _this.$refs.typeChartRef[i]
_this.$refs.typeChartRef[i].$refs.lineChartRef.drawLine(_this.$refs.typeChartRef[i].dataArr,_this.$refs.typeChartRef[i].componentName.split('_')[0])
// if(item.componentName.split('_')[0]=="类型"&&item.$refs.barChartRef){
let item = _this.$refs.typeChartRef[i];
_this.$refs.typeChartRef[i].$refs.lineChartRef.drawLine(
_this.$refs.typeChartRef[i].dataArr,
_this.$refs.typeChartRef[i].componentName.split('_')[0]
);
// if (item.componentName.split('_')[0] == '类型' && item.$refs.barChartRef) {
// // 数据改变重新渲染柱状图
// item.$refs.barChartRef.drawBar(item.dataArr[0])
// }else if(item.componentName.split('_')[0]=="类型"&&item.$refs.pieChartRef){
// // // 数据改变重新渲染饼图
// item.$refs.pieChartRef.drawPie(item.dataArr[0])
// }
}
})
// item.$refs.barChartRef.drawBar(item.dataArr[0]);
// } else if (item.componentName.split('_')[0] == '类型' && item.$refs.pieChartRef) {
// // // 数据改变重新渲染饼图
// item.$refs.pieChartRef.drawPie(item.dataArr[0]);
// }
}
});
}
}
});
});
}
},
immediate: true
@ -287,17 +307,14 @@ export default {
handler(newVal) {
// 监听到打印周期时刻数据
console.log(newVal, '周期时刻数据');
var that = this
var that = this;
if (newVal.length != 0 && this.sectionData) {
that.classify.forEach((ele, index) => {
if (ele.cycleTimeData == undefined && ele.timeMode == '周期时刻') {
ele.cycleTimeData = [];
}
newVal.forEach(item => {
if (
ele.analogAreaComponentId == item.component_id &&
ele.timeMode == '周期时刻'
) {
if (ele.analogAreaComponentId == item.component_id && ele.timeMode == '周期时刻') {
if (ele.cycleTimeData.length == 10) {
ele.cycleTimeData.splice(newVal.length - 1, 1);
} else {
@ -310,32 +327,31 @@ export default {
that.$nextTick(() => {
// 轮循周期时刻生成的各类组件
for (let i = 0; i < that.$refs.typeChartRef1.length; i++) {
item = that.$refs.typeChartRef1[i]
that.$refs.typeChartRef1[i].$refs.lineChartRef.drawLine(that.$refs.typeChartRef1[i].dataArr, that.$refs.typeChartRef[i].componentName.split('_')[0])
item = that.$refs.typeChartRef1[i];
that.$refs.typeChartRef1[i].$refs.lineChartRef.drawLine(
that.$refs.typeChartRef1[i].dataArr,
that.$refs.typeChartRef[i].componentName.split('_')[0]
);
// if (item.componentName.split('_')[0] == "类型") {
// if (item.echartArr.includes('直方图')){
// // 数据改变重新渲染柱状图
// item.$refs.barChartRef.drawBar(item.dataArr[0])
// item.$refs.barChartRef.drawBar(item.dataArr[0])
// }
// if (item.echartArr.includes('饼状图')){
// // 数据改变重新渲染饼图
// item.$refs.pieChartRef.drawPie(item.dataArr[0])
// }
// }
// if(item.componentName.split('_')[0]=="类型"&&item.$refs.barChartRef){
// // 数据改变重新渲染柱状图
// item.$refs.barChartRef.drawBar(item.dataArr[0])
// }else if(item.componentName.split('_')[0]=="类型"&&item.$refs.pieChartRef){
// // // 数据改变重新渲染饼图
// // item.$refs.pieChartRef.drawPie(item.dataArr[0])
// }
if (item.componentName.split('_')[0] == '类型' && item.$refs.barChartRef) {
// 数据改变重新渲染柱状图
item.$refs.barChartRef.drawBar(item.dataArr[0]);
} else if (item.componentName.split('_')[0] == '类型' && item.$refs.pieChartRef) {
// // 数据改变重新渲染饼图
// item.$refs.pieChartRef.drawPie(item.dataArr[0])
}
}
})
});
}
}
});
@ -363,9 +379,12 @@ export default {
}
ele.cycleStatistics.unshift(item);
for (let i = 0; i < this.$refs.typeChartRef2.length; i++) {
item = that.$refs.typeChartRef2[i]
item = that.$refs.typeChartRef2[i];
// console.log(_this.$refs.typeChartRef[i], '触发接收的表格数据');
this.$refs.typeChartRef2[i].$refs.lineChartRef.drawLine(this.$refs.typeChartRef2[i].dataArr, _this.$refs.typeChartRe2f[i].componentName.split('_')[0])
this.$refs.typeChartRef2[i].$refs.lineChartRef.drawLine(
this.$refs.typeChartRef2[i].dataArr,
_this.$refs.typeChartRe2f[i].componentName.split('_')[0]
);
// if (item.componentName.split('_')[0] == "类型") {
// if (item.echartArr.includes('直方图')) {
// // 数据改变重新渲染柱状图
@ -377,15 +396,13 @@ export default {
// }
// }
if(item.componentName.split('_')[0]=="类型"&&item.$refs.barChartRef){
// 数据改变重新渲染柱状图
item.$refs.barChartRef.drawBar(item.dataArr[0])
}else if(item.componentName.split('_')[0]=="类型"&&item.$refs.pieChartRef){
// // 数据改变重新渲染饼图
item.$refs.pieChartRef.drawPie(item.dataArr[0])
}
if (item.componentName.split('_')[0] == '类型' && item.echartArr.includes('直方图')) {
// 数据改变重新渲染柱状图
item.$refs.barChartRef.drawBar(item.dataArr[0]);
} else if (item.componentName.split('_')[0] == '类型' && item.echartArr.includes('饼状图')) {
// // 数据改变重新渲染饼图
item.$refs.pieChartRef.drawPie(item.dataArr[0]);
}
}
}
}
@ -413,6 +430,20 @@ export default {
};
</script>
<style>
.titleGnag {
width: 3px;
height: 18px;
display: inline-block;
background-color: #3297ff;
position: absolute;
top: 14px;
}
.el-collapse-item__header {
font-size: 15px;
margin-left: 10px;
}
</style>
<style scoped lang="scss">
* {
margin: 0;

17
src/views/general/AboutMachine.vue
View File

@ -17,7 +17,7 @@
autocomplete="off"
></el-date-picker>
<el-button @click="saveTime" type="primary" style="margin-left:10px" size="small">自动校验</el-button>
<el-button @click="saveTime" type="primary" style="margin-left:10px" size="small">校时</el-button>
</el-form-item>
<p>备份&恢复</p>
<el-form-item label="备份服务器设置：">
@ -77,7 +77,7 @@
</template>
<script>
import { getHostInfoApi } from '../../api/aboutMachine';
import { getHostInfoApi, resetReboot } from '../../api/aboutMachine';
import { getQuanjszData } from '../../api/index';
import serverUrl from '../../config/apiurl.js';
import { setQuanjsz } from '@/api/index';
@ -171,7 +171,6 @@ export default {
.then(res => {
this.sizeForm.name = res.data.data.hostname;
this.sizeForm.date1 = res.data.data.time;
console.log(res.data.data, 11111);
})
.catch(err => {
this.$message.error(res.data.msg);
@ -184,10 +183,14 @@ export default {
type: 'warning'
})
.then(() => {
// this.$message({
// type: 'success',
// message: '删除成功!'
// });
resetReboot()
.then(res => {
console.log(res);
this.$message.success(res.data.msg);
})
.catch(err => {
this.$message.error(res.data.msg);
});
})
.catch(() => {
this.$message({