2023022702
This commit is contained in:
commit
fe0ab0b81b
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -1 +1 @@
|
|||
{"remainingRequest":"E:\\视频边缘计算管理平台\\TransFlow\\node_modules\\babel-loader\\lib\\index.js!E:\\视频边缘计算管理平台\\TransFlow\\node_modules\\cache-loader\\dist\\cjs.js??ref--0-0!E:\\视频边缘计算管理平台\\TransFlow\\node_modules\\vue-loader\\lib\\index.js??vue-loader-options!E:\\视频边缘计算管理平台\\TransFlow\\src\\components\\target\\OD.vue?vue&type=script&lang=js&","dependencies":[{"path":"E:\\视频边缘计算管理平台\\TransFlow\\src\\components\\target\\OD.vue","mtime":1677026201574},{"path":"E:\\视频边缘计算管理平台\\TransFlow\\node_modules\\cache-loader\\dist\\cjs.js","mtime":499162500000},{"path":"E:\\视频边缘计算管理平台\\TransFlow\\node_modules\\babel-loader\\lib\\index.js","mtime":499162500000},{"path":"E:\\视频边缘计算管理平台\\TransFlow\\node_modules\\cache-loader\\dist\\cjs.js","mtime":499162500000},{"path":"E:\\视频边缘计算管理平台\\TransFlow\\node_modules\\vue-loader\\lib\\index.js","mtime":499162500000}],"contextDependencies":[],"result":["//\n//\n//\n//\n//\n//\n//\n//\n//\n//\nimport lineChart from \"../chart/lineChart.vue\";\nimport barChart from \"../chart/barChart.vue\";\nimport tableShow from \"../chart/tableShow.vue\";\nimport detailDialog from \"../chart/detailDialog.vue\";\nimport thermalChart from \"../chart/thermalChart.vue\";\nimport regionTable from \"../chart/regionTable.vue\";\nexport default {\n name: 'OD',\n //od组件\n components: {\n lineChart: lineChart,\n barChart: barChart,\n tableShow: tableShow,\n detailDialog: detailDialog,\n thermalChart: thermalChart,\n regionTable: regionTable\n },\n props: ['pageType', 'triggerType', 'dataArr', 'echartArr', 'componentName', 'title', 'chartName'],\n data: function data() {\n return {};\n },\n methods: {},\n mounted: function mounted() {},\n watch: {\n dataArr: {\n handler: function handler(newVal) {\n console.log(newVal, '292929');\n }\n }\n }\n};",{"version":3,"sources":["OD.vue"],"names":[],"mappings":";;;;;;;;;;AAWA,OAAA,SAAA;AACA,OAAA,QAAA;AACA,OAAA,SAAA;AACA,OAAA,YAAA;AACA,OAAA,YAAA;AACA,OAAA,WAAA;AACA,eAAA;AACA,EAAA,IAAA,EAAA,IADA;AACA;AACA,EAAA,UAAA,EAAA;AACA,IAAA,SAAA,EAAA,SADA;AAEA,IAAA,QAAA,EAAA,QAFA;AAGA,IAAA,SAAA,EAAA,SAHA;AAIA,IAAA,YAAA,EAAA,YAJA;AAKA,IAAA,YAAA,EAAA,YALA;AAMA,IAAA,WAAA,EAAA;AANA,GAFA;AAUA,EAAA,KAAA,EAAA,CAAA,UAAA,EAAA,aAAA,EAAA,SAAA,EAAA,WAAA,EAAA,eAAA,EAAA,OAAA,EAAA,WAAA,CAVA;AAWA,EAAA,IAXA,kBAWA;AACA,WAAA,EAAA;AAGA,GAfA;AAgBA,EAAA,OAAA,EAAA,EAhBA;AAiBA,EAAA,OAjBA,qBAiBA,CAAA,CAjBA;AAkBA,EAAA,KAAA,EAAA;AACA,IAAA,OAAA,EAAA;AACA,MAAA,OADA,mBACA,MADA,EACA;AACA,QAAA,OAAA,CAAA,GAAA,CAAA,MAAA,EAAA,QAAA;AACA;AAHA;AADA;AAlBA,CAAA","sourcesContent":["<template>\r\n <div class=\"setion\">\r\n <p class=\"chartTitle\"><span class=\"titleIcon\"></span> {{ componentName }}{{ triggerType }}</p>\r\n <div class=\"border\">\r\n <detailDialog />\r\n <thermalChart :pageType=\"pageType\" :list=\"dataArr\" :status=\"triggerType\" :title=\"title\" />\r\n </div>\r\n </div>\r\n</template>\r\n\r\n<script>\r\nimport lineChart from '../chart/lineChart.vue';\r\nimport barChart from '../chart/barChart.vue';\r\nimport tableShow from '../chart/tableShow.vue';\r\nimport detailDialog from '../chart/detailDialog.vue';\r\nimport thermalChart from '../chart/thermalChart.vue';\r\nimport regionTable from '../chart/regionTable.vue';\r\nexport default {\r\n name: 'OD', //od组件\r\n components: {\r\n lineChart,\r\n barChart,\r\n tableShow,\r\n detailDialog,\r\n thermalChart,\r\n regionTable\r\n },\r\n props: ['pageType', 'triggerType', 'dataArr', 'echartArr', 'componentName', 'title', 'chartName'],\r\n data() {\r\n return {\r\n\r\n };\r\n },\r\n methods: {},\r\n mounted() { },\r\n watch: {\r\n dataArr: {\r\n handler(newVal) {\r\n console.log(newVal,'292929');\r\n }\r\n }\r\n\r\n }\r\n\r\n};\r\n</script>\r\n<style scoped>\r\n.typeContent {\r\n box-sizing: border-box;\r\n}\r\n\r\n.border {\r\n width: 100%;\r\n margin-bottom: 20px;\r\n position: relative;\r\n}\r\n</style>"],"sourceRoot":"src/components/target"}]}
|
||||
{"remainingRequest":"E:\\视频边缘计算管理平台\\TransFlow\\node_modules\\babel-loader\\lib\\index.js!E:\\视频边缘计算管理平台\\TransFlow\\node_modules\\cache-loader\\dist\\cjs.js??ref--0-0!E:\\视频边缘计算管理平台\\TransFlow\\node_modules\\vue-loader\\lib\\index.js??vue-loader-options!E:\\视频边缘计算管理平台\\TransFlow\\src\\components\\target\\OD.vue?vue&type=script&lang=js&","dependencies":[{"path":"E:\\视频边缘计算管理平台\\TransFlow\\src\\components\\target\\OD.vue","mtime":1677484923538},{"path":"E:\\视频边缘计算管理平台\\TransFlow\\node_modules\\cache-loader\\dist\\cjs.js","mtime":499162500000},{"path":"E:\\视频边缘计算管理平台\\TransFlow\\node_modules\\babel-loader\\lib\\index.js","mtime":499162500000},{"path":"E:\\视频边缘计算管理平台\\TransFlow\\node_modules\\cache-loader\\dist\\cjs.js","mtime":499162500000},{"path":"E:\\视频边缘计算管理平台\\TransFlow\\node_modules\\vue-loader\\lib\\index.js","mtime":499162500000}],"contextDependencies":[],"result":["//\n//\n//\n//\n//\n//\n//\n//\n//\nimport lineChart from \"../chart/lineChart.vue\";\nimport barChart from \"../chart/barChart.vue\";\nimport tableShow from \"../chart/tableShow.vue\";\nimport detailDialog from \"../chart/detailDialog.vue\";\nimport thermalChart from \"../chart/thermalChart.vue\";\nimport regionTable from \"../chart/regionTable.vue\";\nexport default {\n name: 'OD',\n //od组件\n components: {\n lineChart: lineChart,\n barChart: barChart,\n tableShow: tableShow,\n detailDialog: detailDialog,\n thermalChart: thermalChart,\n regionTable: regionTable\n },\n props: ['pageType', 'triggerType', 'dataArr', 'echartArr', 'componentName', 'title', 'chartName'],\n data: function data() {\n return {};\n },\n methods: {},\n mounted: function mounted() {},\n watch: {}\n};",{"version":3,"sources":["OD.vue"],"names":[],"mappings":";;;;;;;;;AAUA,OAAA,SAAA;AACA,OAAA,QAAA;AACA,OAAA,SAAA;AACA,OAAA,YAAA;AACA,OAAA,YAAA;AACA,OAAA,WAAA;AACA,eAAA;AACA,EAAA,IAAA,EAAA,IADA;AACA;AACA,EAAA,UAAA,EAAA;AACA,IAAA,SAAA,EAAA,SADA;AAEA,IAAA,QAAA,EAAA,QAFA;AAGA,IAAA,SAAA,EAAA,SAHA;AAIA,IAAA,YAAA,EAAA,YAJA;AAKA,IAAA,YAAA,EAAA,YALA;AAMA,IAAA,WAAA,EAAA;AANA,GAFA;AAUA,EAAA,KAAA,EAAA,CAAA,UAAA,EAAA,aAAA,EAAA,SAAA,EAAA,WAAA,EAAA,eAAA,EAAA,OAAA,EAAA,WAAA,CAVA;AAWA,EAAA,IAXA,kBAWA;AACA,WAAA,EAAA;AAGA,GAfA;AAgBA,EAAA,OAAA,EAAA,EAhBA;AAiBA,EAAA,OAjBA,qBAiBA,CAAA,CAjBA;AAkBA,EAAA,KAAA,EAAA;AAlBA,CAAA","sourcesContent":["<template>\r\n <div class=\"setion\">\r\n <div class=\"border\">\r\n <detailDialog />\r\n <thermalChart :pageType=\"pageType\" :list=\"dataArr\" :status=\"triggerType\" :title=\"title\" ref=\"ODChartRef\"/>\r\n </div>\r\n </div>\r\n</template>\r\n\r\n<script>\r\nimport lineChart from '../chart/lineChart.vue';\r\nimport barChart from '../chart/barChart.vue';\r\nimport tableShow from '../chart/tableShow.vue';\r\nimport detailDialog from '../chart/detailDialog.vue';\r\nimport thermalChart from '../chart/thermalChart.vue';\r\nimport regionTable from '../chart/regionTable.vue';\r\nexport default {\r\n name: 'OD', //od组件\r\n components: {\r\n lineChart,\r\n barChart,\r\n tableShow,\r\n detailDialog,\r\n thermalChart,\r\n regionTable\r\n },\r\n props: ['pageType', 'triggerType', 'dataArr', 'echartArr', 'componentName', 'title', 'chartName'],\r\n data() {\r\n return {\r\n\r\n };\r\n },\r\n methods: {},\r\n mounted() { },\r\n watch: {\r\n }\r\n\r\n};\r\n</script>\r\n<style scoped>\r\n.typeContent {\r\n box-sizing: border-box;\r\n}\r\n\r\n.border {\r\n width: 100%;\r\n margin-bottom: 20px;\r\n position: relative;\r\n}\r\n</style>"],"sourceRoot":"src/components/target"}]}
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -11,7 +11,30 @@ export const getUpdInfoApi = params => {
|
|||
params
|
||||
});
|
||||
};
|
||||
|
||||
// 保存udp
|
||||
export const setUpdInfoApi = data => {
|
||||
return axios.post('api/SetUdppz', data, { headers: { 'Content-Type': 'multipart/form-data' } });
|
||||
};
|
||||
export const resetReboot = data => {
|
||||
return axios.post('api/SetReboot', data, { headers: { 'Content-Type': 'application/x-www-form-urlencoded' } });
|
||||
};
|
||||
|
||||
// 关于本机备份配置
|
||||
|
||||
export const ConfigBackup = () => {
|
||||
return axios.post('api/ConfigBackup', { headers: { 'Content-Type': 'application/json' } });
|
||||
};
|
||||
|
||||
// 还原服务器设置
|
||||
|
||||
export const ConfigRestore = () => {
|
||||
return axios.post('api/ConfigRestore');
|
||||
};
|
||||
|
||||
// 还原服务器出厂设置
|
||||
|
||||
export const ResetFactory = () => {
|
||||
return axios.post('api/ResetFactory', { headers: { 'Content-Type': 'application/json' } });
|
||||
};
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -7,10 +7,11 @@ export default {
|
|||
name: 'thermalChart', //热点图组件
|
||||
data() {
|
||||
return {
|
||||
endData: [],
|
||||
startData: [],
|
||||
odData: []
|
||||
thermalChartData:[]
|
||||
};
|
||||
},
|
||||
created() {
|
||||
|
||||
},
|
||||
props: {
|
||||
list: {
|
||||
|
|
@ -33,106 +34,132 @@ export default {
|
|||
// },
|
||||
},
|
||||
methods: {
|
||||
drawThermalChart() {
|
||||
//处理od组件数据
|
||||
ODhanlde(odData) {
|
||||
console.log(odData);
|
||||
// var odData = this.odData
|
||||
var chartData = []
|
||||
var start = []
|
||||
for (let i = 0; i < odData.length; i++) {
|
||||
let item = odData[i].data
|
||||
for (let j = 0; j < item.length; j++) {
|
||||
start.push(item[j].start)
|
||||
// 数组去重
|
||||
|
||||
// od图的数据
|
||||
chartData.push([i, j, item[j].quantity])
|
||||
// console.log([i,j,item[j].val]);
|
||||
}
|
||||
}
|
||||
// this.thermalChartData = chartData
|
||||
return chartData
|
||||
// console.log(chartData, this.unique(start), 'od图的数据');
|
||||
},
|
||||
//数组去重
|
||||
unique(arr) {
|
||||
let newArr = []
|
||||
arr.forEach(item => {
|
||||
return newArr.includes(item) ? '' : newArr.push(item)
|
||||
})
|
||||
return newArr
|
||||
},
|
||||
// 绘制热力图
|
||||
drawThermalChart(odData, startEnd) {
|
||||
|
||||
// console.log(chartData);
|
||||
let myChart = this.$echarts.init(this.$refs.thermalChart);
|
||||
let option = {
|
||||
grid: {
|
||||
left: '2%',
|
||||
right: '4%',
|
||||
bottom: '10%',
|
||||
top: '20%',
|
||||
containLabel: true
|
||||
dataZoom: [
|
||||
{
|
||||
id: "dataZoomY",
|
||||
type: "slider",
|
||||
yAxisIndex: [0],
|
||||
startValue: 0,
|
||||
endValue: 10,
|
||||
filterMode: "empty",
|
||||
},
|
||||
],
|
||||
tooltip: {
|
||||
position: "top",
|
||||
// formatter: function (params) {
|
||||
// return (
|
||||
// "学历：" + days[params.value[1]] + "<br/>" + "人数：" + params.data[2]
|
||||
// );
|
||||
// },
|
||||
},
|
||||
animation: false,
|
||||
grid: {
|
||||
left: "3%",
|
||||
right: "8%",
|
||||
bottom: "8%",
|
||||
containLabel: true,
|
||||
},
|
||||
textStyle: { color: '#666', fontSize: 13 },
|
||||
// toolbox: {
|
||||
// show: true,
|
||||
// feature: { saveAsImage: { backgroundColor: 'rgba(0,0,0,0)' }, restore: {} },
|
||||
// iconStyle: { borderColor: '#666' }
|
||||
// },
|
||||
tooltip: {},
|
||||
xAxis: {
|
||||
nameTextStyle: { color: '#666', padding: [0, 0, -10, 0], fontSize: 13 },
|
||||
axisLabel: { interval: 0, textStyle: { fontSize: 13 } },
|
||||
axisTick: { lineStyle: { color: '#c8c8c8', width: 1 }, show: true },
|
||||
splitLine: { show: false },
|
||||
axisLine: { lineStyle: { color: '#c8c8c8', width: 1 }, show: true },
|
||||
type: 'category',
|
||||
data: this.endData,
|
||||
splitArea: { show: true, areaStyle: { color: ['rgba(200,200,200,0.3)', 'rgba(200,200,200,0.2)'] } }
|
||||
type: "category",
|
||||
data: startEnd.start.split(','),
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: "#000",
|
||||
},
|
||||
},
|
||||
axisLabel: {
|
||||
interval: 0,
|
||||
rotate: 40,
|
||||
},
|
||||
splitArea: {
|
||||
show: true,
|
||||
},
|
||||
// name: "镇街",
|
||||
},
|
||||
yAxis: {
|
||||
nameTextStyle: { color: '#666', padding: [0, 0, -10, 0], fontSize: 13 },
|
||||
axisLabel: { interval: 0, textStyle: { fontSize: 13 } },
|
||||
axisTick: { lineStyle: { color: '#c8c8c8', width: 1 }, show: true },
|
||||
splitLine: { show: false },
|
||||
axisLine: { lineStyle: { color: '#c8c8c8', width: 1 }, show: true },
|
||||
type: 'category',
|
||||
data: ['gate1','gate2']
|
||||
type: "category",
|
||||
data: startEnd.end.split(','),
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: "#000",
|
||||
},
|
||||
},
|
||||
axisLabel: {
|
||||
interval: 0,
|
||||
rotate: 40,
|
||||
},
|
||||
splitArea: {
|
||||
show: true,
|
||||
},
|
||||
// name: "",
|
||||
},
|
||||
visualMap: {
|
||||
min: 1,
|
||||
max: 50,
|
||||
calculable: true,
|
||||
orient: "horizontal",
|
||||
left: "center",
|
||||
bottom: "1%",
|
||||
text: ["50", "1"], // 文本，默认为数值文本
|
||||
//color:['#20a0ff','#D2EDFF'],
|
||||
calculable: false,
|
||||
color: ["#22DDDD", "#fec42c", "#80F1BE"],
|
||||
},
|
||||
visualMap: [
|
||||
{
|
||||
min: 100,
|
||||
max: 400,
|
||||
calculable: false,
|
||||
orient: 'horizontal',
|
||||
left: 'center',
|
||||
top: 20,
|
||||
color: ['#C7021D', '#79E73C'],
|
||||
text: ['高', '低'],
|
||||
textStyle: { color: '#666', fontSize: 13 }
|
||||
}
|
||||
],
|
||||
series: [
|
||||
{
|
||||
type: 'heatmap',
|
||||
// pageSize: 20,
|
||||
pointSize: 10,
|
||||
blurSize: 10,
|
||||
data: [
|
||||
[0, 0, 100],
|
||||
[0, 1, 100],
|
||||
[0, 2, 100],
|
||||
[0, 3, 100],
|
||||
// [0, 4, 100],
|
||||
// [0, 5, 100],
|
||||
// [0, 6, 200],
|
||||
|
||||
[1, 0, 120],
|
||||
[1, 1, 120],
|
||||
[1, 2, 125],
|
||||
[1, 3, 120],
|
||||
// [1, 4, 120],
|
||||
// [1, 5, 120],
|
||||
// [1, 6, 120],
|
||||
|
||||
[2, 0, 120],
|
||||
[2, 1, 140],
|
||||
[2, 2, 140],
|
||||
[2, 3, 140],
|
||||
// [2, 4, 140],
|
||||
// [2, 5, 140],
|
||||
// [2, 6, 140],
|
||||
|
||||
[3, 0, 200],
|
||||
[3, 1, 200],
|
||||
[3, 2, 200],
|
||||
[3, 3, 200]
|
||||
// [3, 4, 200],
|
||||
// [3, 5, 200],
|
||||
// [3, 6, 200],
|
||||
|
||||
// [4, 4, 300],
|
||||
// [4, 5, 300],
|
||||
// [4, 6, 300]
|
||||
],
|
||||
label: { show: true, color: '#fff' },
|
||||
name: "OD图",
|
||||
type: "heatmap",
|
||||
data: this.ODhanlde(odData),
|
||||
label: {
|
||||
normal: {
|
||||
show: true,
|
||||
},
|
||||
},
|
||||
itemStyle: {
|
||||
borderColor: 'rgba(255, 255, 255, 0.5)',
|
||||
emphasis: { shadowBlur: 0, shadowColor: 'rgba(255, 255, 255, 0.5)' }
|
||||
}
|
||||
}
|
||||
]
|
||||
emphasis: {
|
||||
shadowBlur: 10,
|
||||
shadowColor: "rgba(120, 0, 0, 0.5)",
|
||||
},
|
||||
},
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
myChart.setOption(option);
|
||||
window.addEventListener('resize', function () {
|
||||
myChart.resize();
|
||||
|
|
@ -144,29 +171,15 @@ export default {
|
|||
}
|
||||
},
|
||||
mounted() {
|
||||
// if (this.list) {
|
||||
// this.drawThermalChart()
|
||||
// }
|
||||
|
||||
|
||||
},
|
||||
watch: {
|
||||
list: {
|
||||
handler(newVal) {
|
||||
// this.odData = []
|
||||
// console.log(newVal ,'1111111111');
|
||||
// if (newVal) {
|
||||
// newVal[newVal.length - 1].ob_data.forEach(ele => {
|
||||
// ele.forEach(item => {
|
||||
// this.odData.push([])
|
||||
// })
|
||||
// })
|
||||
// }
|
||||
// console.log(this.odData,'155');
|
||||
this.drawThermalChart();
|
||||
},
|
||||
// immediate:true
|
||||
}
|
||||
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
<style scoped></style>
|
||||
|
|
|
|||
|
|
@ -1,56 +0,0 @@
|
|||
<template>
|
||||
<div class="setion">
|
||||
<div class="border">
|
||||
<detailDialog />
|
||||
<thermalChart :pageType="pageType" :list="dataArr" :status="triggerType" :title="title" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import lineChart from '../chart/lineChart.vue';
|
||||
import barChart from '../chart/barChart.vue';
|
||||
import tableShow from '../chart/tableShow.vue';
|
||||
import detailDialog from '../chart/detailDialog.vue';
|
||||
import thermalChart from '../chart/thermalChart.vue';
|
||||
import regionTable from '../chart/regionTable.vue';
|
||||
export default {
|
||||
name: 'OD', //od组件
|
||||
components: {
|
||||
lineChart,
|
||||
barChart,
|
||||
tableShow,
|
||||
detailDialog,
|
||||
thermalChart,
|
||||
regionTable
|
||||
},
|
||||
props: ['pageType', 'triggerType', 'dataArr', 'echartArr', 'componentName', 'title', 'chartName'],
|
||||
data() {
|
||||
return {
|
||||
|
||||
};
|
||||
},
|
||||
methods: {},
|
||||
mounted() { },
|
||||
watch: {
|
||||
dataArr: {
|
||||
handler(newVal) {
|
||||
console.log(newVal,'292929');
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
};
|
||||
</script>
|
||||
<style scoped>
|
||||
.typeContent {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.border {
|
||||
width: 100%;
|
||||
margin-bottom: 20px;
|
||||
position: relative;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -6,10 +6,10 @@
|
|||
<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">
|
||||
<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: 15px;">{{ n.name }}</span><br />
|
||||
<span style="font-size: 30px; font-weight: bold">{{ n.quantity }}</span>
|
||||
</div>
|
||||
<div>
|
||||
|
|
@ -28,12 +28,14 @@
|
|||
{{ getTotal(newDataArr) }}
|
||||
</span>
|
||||
</div>
|
||||
<div style="font-size: 30px; font-weight: bold" v-if="title == '速度' && dataArr.length != 0 && dataArr != undefined">
|
||||
<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">
|
||||
<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>
|
||||
|
|
@ -68,9 +70,9 @@
|
|||
<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>
|
||||
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 : '' }}
|
||||
|
|
@ -85,55 +87,28 @@
|
|||
</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"
|
||||
/>
|
||||
<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"
|
||||
/>
|
||||
<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"
|
||||
/>
|
||||
<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"
|
||||
/>
|
||||
<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>
|
||||
|
|
@ -146,9 +121,10 @@ 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'],
|
||||
props: ['typeValue', 'pageType', 'triggerType', 'dataArr', 'echartArr', 'componentName', 'title', 'chartName','startEndData'],
|
||||
components: {
|
||||
lineChart,
|
||||
barChart,
|
||||
|
|
@ -156,7 +132,8 @@ export default {
|
|||
detailDialog,
|
||||
regionTable,
|
||||
pieChart,
|
||||
avgChart
|
||||
avgChart,
|
||||
thermalChart
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
|
|
@ -171,23 +148,24 @@ export default {
|
|||
valueShow: {},
|
||||
//排队数
|
||||
queue: '',
|
||||
newDataArr:[]
|
||||
newDataArr: []
|
||||
};
|
||||
},
|
||||
created() {
|
||||
console.log(this.title);
|
||||
// console.log(this.title);
|
||||
console.log(this.componentName);
|
||||
},
|
||||
methods: {
|
||||
// 计算类型数量的总和
|
||||
getDataArr(val){
|
||||
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);
|
||||
if (this.title == '类型') {
|
||||
return dataArr[0].type_data.reduce(function (prev, cur) {
|
||||
return cur.quantity + prev;
|
||||
}, 0);
|
||||
}
|
||||
},
|
||||
// 计算类型的数值
|
||||
|
|
@ -203,13 +181,13 @@ export default {
|
|||
this.newDataArr[0].headway = val[0].ave_headway;
|
||||
}
|
||||
},
|
||||
|
||||
|
||||
},
|
||||
|
||||
computed: {
|
||||
// 获取类型的总数量
|
||||
},
|
||||
mounted() {},
|
||||
mounted() { },
|
||||
watch: {
|
||||
// 监听触发数据
|
||||
// dataArr: {
|
||||
|
|
|
|||
|
|
@ -1,9 +1,9 @@
|
|||
<template>
|
||||
<div class="content-box">
|
||||
<div class="container">
|
||||
<p class="title">UPD服务设置</p>
|
||||
<p class="title">UDP服务设置</p>
|
||||
<el-form :model="form" label-position="left" label-width="180px">
|
||||
<el-form-item label="upd服务器端口：">
|
||||
<el-form-item label="UDP服务器端口：">
|
||||
<el-input-number v-model="form.name" controls-position="right" :min="1"></el-input-number>
|
||||
</el-form-item>
|
||||
|
||||
|
|
@ -16,16 +16,20 @@
|
|||
bytes
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div>
|
||||
<el-button type="primary" @click="saveBtn()">保存</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { getUpdInfoApi } from '../../api/aboutMachine';
|
||||
import { getUpdInfoApi ,setUpdInfoApi} from '../../api/aboutMachine';
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
form: {
|
||||
id:'1',
|
||||
name: 55570,
|
||||
delivery: true,
|
||||
bytes: 4096
|
||||
|
|
@ -33,14 +37,32 @@ export default {
|
|||
};
|
||||
},
|
||||
methods: {
|
||||
// 获取接口
|
||||
getUpd() {
|
||||
getUpdInfoApi()
|
||||
.then(res => {
|
||||
console.log(res.data.data);
|
||||
console.log(res.data);
|
||||
this.form.id = res.data.data.id
|
||||
this.form.name = res.data.data.udp_port
|
||||
this.form.delivery = res.data.data.is_qiong == '是' ? true:false
|
||||
this.form.bytes = res.data.data.max_pack + ''
|
||||
})
|
||||
.catch(err => {
|
||||
this.$message.error(res.data.msg);
|
||||
});
|
||||
},
|
||||
saveBtn(){
|
||||
let formData = new FormData();
|
||||
formData.append('id', this.form.id);
|
||||
formData.append('udp_port', this.form.name);
|
||||
formData.append('is_qiong', this.form.delivery==true?'是':'否');
|
||||
formData.append('max_pack', this.form.bytes );
|
||||
|
||||
setUpdInfoApi(formData).then(res=>{
|
||||
this.$message.success('保存' + res.data.msg);
|
||||
}).catch(error=>{
|
||||
// this.$message.error(res.data.msg);
|
||||
})
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
|
|
|
|||
|
|
@ -6,12 +6,8 @@
|
|||
<div class="dataBoard" ref="dataBoard" v-if="activeName == 'second'">
|
||||
<!-- 断面 -->
|
||||
<div class="plate1" ref="plate1">
|
||||
<div
|
||||
:class="sectionData.length <= 1 ? 'sectionBox' : 'section'"
|
||||
ref="section"
|
||||
v-for="s in sectionData"
|
||||
:key="s.analogAreaComponentId"
|
||||
>
|
||||
<div :class="sectionData.length <= 1 ? 'sectionBox' : 'section'" ref="section" v-for="s in sectionData"
|
||||
:key="s.analogAreaComponentId">
|
||||
<template>
|
||||
<div ref="sectionContent">
|
||||
<div>
|
||||
|
|
@ -20,61 +16,36 @@
|
|||
</p>
|
||||
<!-- <span class="downPull1" data-num="1" @click="sectionHandle(i)"></span> -->
|
||||
</div>
|
||||
<el-tabs >
|
||||
<el-tabs>
|
||||
<el-collapse v-model="acticveName" @change="handleChange">
|
||||
<div style="position:relative" v-for="o in s.children" :key="o.analogAreaComponentId">
|
||||
<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"
|
||||
/>
|
||||
<el-collapse-item :title="o.componentName + o.timeMode"
|
||||
:name="o.analogAreaComponentId">
|
||||
|
||||
<!--触发的组件 -->
|
||||
<!--触发的组件 -->
|
||||
<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"
|
||||
:startEndData="{ start: o.startSectionNames, end: o.endSectionNames }" />
|
||||
<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"
|
||||
:startEndData="{ start: o.startSectionNames, end: o.endSectionNames }" />
|
||||
|
||||
<!-- 周期统计的组件 -->
|
||||
<typeChart
|
||||
ref="typeChartRef2"
|
||||
style="width: 100%;"
|
||||
v-if="o.timeMode === '周期统计'"
|
||||
:pageType="o.graphicType"
|
||||
:triggerType="o.timeMode"
|
||||
:componentName="o.componentName"
|
||||
:dataArr="o.cycleStatisticsData"
|
||||
:echartArr="o.presentationForm"
|
||||
:title="o.componentName.split('_')[0]"
|
||||
:chartName="o.combinationName"
|
||||
<typeChart ref="typeChartRef2" style="width: 100%;"
|
||||
v-if="o.timeMode === '周期统计'" :pageType="o.graphicType"
|
||||
:triggerType="o.timeMode" :componentName="o.componentName"
|
||||
:dataArr="o.cycleStatisticsData" :echartArr="o.presentationForm"
|
||||
:title="o.componentName.split('_')[0]" :chartName="o.combinationName"
|
||||
:typeValue="typeCycleStatistics"
|
||||
/>
|
||||
:startEndData="{ start: o.startSectionNames, end: o.endSectionNames }" />
|
||||
</el-collapse-item>
|
||||
</div>
|
||||
</el-collapse>
|
||||
|
|
@ -90,13 +61,12 @@
|
|||
</template>
|
||||
<script>
|
||||
import typeChart from '../../components/target/typeChart.vue';
|
||||
import OD from '../../components/target/OD.vue';
|
||||
// import {mapMutation} from 'vuex'
|
||||
import { getComponentSection } from '../../api/index';
|
||||
export default {
|
||||
components: {
|
||||
typeChart,
|
||||
OD
|
||||
|
||||
},
|
||||
props: {
|
||||
activeName: {
|
||||
|
|
@ -172,25 +142,26 @@ export default {
|
|||
// this.getNew()
|
||||
},
|
||||
methods: {
|
||||
// 手风琴下拉切换
|
||||
handleChange(val) {
|
||||
|
||||
this.$nextTick(function () {
|
||||
var myEvent = new Event("resize");
|
||||
window.dispatchEvent(myEvent);
|
||||
});
|
||||
|
||||
},
|
||||
getNew() {
|
||||
// this.idVal = ;
|
||||
getComponentSection({ VideoId: this.$route.query.id ,Number:10}).then(res => {
|
||||
getComponentSection({ VideoId: this.$route.query.id, Number: 10 }).then(res => {
|
||||
if (res.data.code == 200) {
|
||||
// console.log(res.data.data, '组件的数据');
|
||||
this.componentList = res.data.data;
|
||||
this.siftData();
|
||||
|
||||
}
|
||||
});
|
||||
},
|
||||
// 手风琴下拉切换
|
||||
handleChange() {
|
||||
this.$nextTick(function () {
|
||||
var myEvent = new Event("resize");
|
||||
window.dispatchEvent(myEvent);
|
||||
});
|
||||
|
||||
},
|
||||
siftData() {
|
||||
this.sectionArr = [];
|
||||
this.sectionData = [];
|
||||
|
|
@ -199,10 +170,10 @@ export default {
|
|||
// console.log("val",val)
|
||||
this.sectionArr.push(val.combinationName);
|
||||
this.sectionArr = Array.from(new Set(this.sectionArr));
|
||||
|
||||
|
||||
});
|
||||
this.sectionData = this.sectionArr.map(item => {
|
||||
|
||||
|
||||
item = { title: item, children: [] };
|
||||
this.acticveName = [];
|
||||
this.componentList.forEach(val => {
|
||||
|
|
@ -256,7 +227,7 @@ export default {
|
|||
|
||||
// 触发数据的类型数值
|
||||
},
|
||||
mounted() {},
|
||||
mounted() { },
|
||||
watch: {
|
||||
// acticveName: {
|
||||
// handler(newVal) {
|
||||
|
|
@ -269,7 +240,7 @@ export default {
|
|||
// },
|
||||
// 触发的原始数据
|
||||
triggerData: {
|
||||
handler(newVal, oldVal) {},
|
||||
handler(newVal, oldVal) { },
|
||||
immediate: true
|
||||
},
|
||||
componentList:{
|
||||
|
|
@ -380,7 +351,6 @@ export default {
|
|||
handler(newVal) {
|
||||
this.triggerList = newVal;
|
||||
// 触发数据
|
||||
// console.log(newVal, '触发数据');
|
||||
var _this = this
|
||||
if (newVal.length != 0 && _this.sectionData) {
|
||||
_this.classify.forEach((ele, index) => {
|
||||
|
|
@ -419,15 +389,10 @@ export default {
|
|||
// 数据改变重新渲染饼图
|
||||
itemTypeChart.$refs.pieChartRef.drawPie(itemTypeChart.dataArr[0])
|
||||
}
|
||||
if (itemTypeChart.echartArr.includes('均值图') && itemTypeChart.$refs.avgChartRef != undefined) {
|
||||
itemTypeChart.$refs.avgChartRef.drawBar(itemTypeChart.dataArr[0])
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
})
|
||||
}
|
||||
|
|
@ -464,43 +429,46 @@ export default {
|
|||
}
|
||||
ele.cycleTimeData.unshift(item);
|
||||
// thatN.$nextTick(() => {
|
||||
if(thatN.$refs.typeChartRef1!=undefined){
|
||||
if (thatN.$refs.typeChartRef1 != undefined) {
|
||||
// console.log("thatN.$refs.typeChartRef1",thatN.$refs.typeChartRef1)
|
||||
// 轮循周期时刻生成的各类组件
|
||||
for (let i = 0; i < thatN.$refs.typeChartRef1.length; i++) {
|
||||
let itemTypeChartRef1 = thatN.$refs.typeChartRef1[i]
|
||||
if (itemTypeChartRef1.length!=0&&itemTypeChartRef1.dataArr!= undefined && itemTypeChartRef1.dataArr.length != 0) {
|
||||
let itemTypeChartRef1 = thatN.$refs.typeChartRef1[i]
|
||||
if (itemTypeChartRef1.length != 0 && itemTypeChartRef1.dataArr != undefined && itemTypeChartRef1.dataArr.length != 0) {
|
||||
|
||||
if (itemTypeChartRef1.echartArr.includes('时间曲线图')) {
|
||||
thatN.$refs.typeChartRef1[i].$refs.lineChartRef.drawLine(thatN.$refs.typeChartRef1[i].dataArr, thatN.$refs.typeChartRef1[i].componentName.split('_')[0],'周期时刻')
|
||||
}
|
||||
if (itemTypeChartRef1.echartArr.includes('数值')) {
|
||||
thatN.$refs.typeChartRef1[i].getDataArr(thatN.$refs.typeChartRef1[i].dataArr)
|
||||
if (itemTypeChartRef1.echartArr.includes('数值')) {
|
||||
thatN.$refs.typeChartRef1[i].getDataArr(thatN.$refs.typeChartRef1[i].dataArr)
|
||||
}
|
||||
|
||||
if (itemTypeChartRef1.echartArr.includes('直方图') &&itemTypeChartRef1.$refs.barChartRef.drawBar) {
|
||||
|
||||
if (itemTypeChartRef1.echartArr.includes('直方图') && itemTypeChartRef1.$refs.barChartRef.drawBar) {
|
||||
// 数据改变重新渲染柱状图
|
||||
itemTypeChartRef1.$refs.barChartRef.drawBar(itemTypeChartRef1.dataArr[0])
|
||||
}
|
||||
if (itemTypeChartRef1.echartArr.includes('饼状图') &&itemTypeChartRef1.$refs.pieChartRef.drawPie) {
|
||||
}
|
||||
if (itemTypeChartRef1.echartArr.includes('饼状图') && itemTypeChartRef1.$refs.pieChartRef.drawPie) {
|
||||
// 数据改变重新渲染饼图
|
||||
itemTypeChartRef1.$refs.pieChartRef.drawPie(itemTypeChartRef1.dataArr[0])
|
||||
}
|
||||
if (itemTypeChartRef1.echartArr.includes('均值图') && itemTypeChartRef1.$refs.avgChartRef != undefined) {
|
||||
itemTypeChartRef1.$refs.avgChartRef.drawBar(itemTypeChartRef1.dataArr[0])
|
||||
}
|
||||
itemTypeChartRef1.$refs.avgChartRef.drawBar(itemTypeChartRef1.dataArr[0])
|
||||
}
|
||||
if (itemTypeChartRef1.componentName.includes('OD') && itemTypeChartRef1.$refs.ODChartRef != undefined && itemTypeChartRef1.dataArr[0].ob_data.length != 0) {
|
||||
itemTypeChartRef1.$refs.ODChartRef.drawThermalChart(itemTypeChartRef1.dataArr[0].ob_data, itemTypeChartRef1.startEndData)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
// });
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
}else{
|
||||
var _thatN= this
|
||||
_thatN.classify.forEach((ele, index) => {
|
||||
} else {
|
||||
var _thatN = this
|
||||
_thatN.classify.forEach((ele, index) => {
|
||||
// if (ele.cycleTimeData == undefined && ele.timeMode == '周期时刻') {
|
||||
// ele.cycleTimeData = [];
|
||||
// }else{
|
||||
|
|
@ -543,13 +511,16 @@ export default {
|
|||
if (itemTypeChartRef1.echartArr.includes('均值图') && itemTypeChartRef1.$refs.avgChartRef != undefined) {
|
||||
itemTypeChartRef1.$refs.avgChartRef.drawBar(itemTypeChartRef1.dataArr[0])
|
||||
}
|
||||
if (itemTypeChartRef1.componentName.includes('OD') && itemTypeChartRef1.$refs.ODChartRef != undefined && itemTypeChartRef1.dataArr[0].ob_data.length != 0) {
|
||||
itemTypeChartRef1.$refs.ODChartRef.drawThermalChart(itemTypeChartRef1.dataArr[0].ob_data, itemTypeChartRef1.startEndData)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// });
|
||||
}
|
||||
}
|
||||
|
||||
// });
|
||||
}
|
||||
}
|
||||
// });
|
||||
});
|
||||
}
|
||||
|
|
@ -589,38 +560,38 @@ export default {
|
|||
if (itemTypeChartRef2.echartArr.includes('时间曲线图')) {
|
||||
that.$refs.typeChartRef2[i].$refs.lineChartRef.drawLine(that.$refs.typeChartRef2[i].dataArr, that.$refs.typeChartRef2[i].componentName.split('_')[0],'周期统计')
|
||||
}
|
||||
if (itemTypeChartRef2.echartArr.includes('数值')) {
|
||||
that.$refs.typeChartRef2[i].getDataArr(that.$refs.typeChartRef2[i].dataArr)
|
||||
if (itemTypeChartRef2.echartArr.includes('数值')) {
|
||||
that.$refs.typeChartRef2[i].getDataArr(that.$refs.typeChartRef2[i].dataArr)
|
||||
}
|
||||
// console.log(item,'组件数据');
|
||||
if (itemTypeChartRef2.echartArr.includes('直方图')&&itemTypeChartRef2.$refs.barChartRef.drawBar) {
|
||||
if (itemTypeChartRef2.echartArr.includes('直方图') && itemTypeChartRef2.$refs.barChartRef.drawBar) {
|
||||
// 数据改变重新渲染柱状图
|
||||
// console.log(item, '组件');
|
||||
itemTypeChartRef2.$refs.barChartRef.drawBar(itemTypeChartRef2.dataArr[0])
|
||||
}
|
||||
if (itemTypeChartRef2.echartArr.includes('饼状图')&&itemTypeChartRef2.$refs.pieChartRef.drawPie) {
|
||||
}
|
||||
if (itemTypeChartRef2.echartArr.includes('饼状图') && itemTypeChartRef2.$refs.pieChartRef.drawPie) {
|
||||
// 数据改变重新渲染饼图
|
||||
itemTypeChartRef2.$refs.pieChartRef.drawPie(itemTypeChartRef2.dataArr[0])
|
||||
}
|
||||
|
||||
// if (item.echartArr.includes('均值图') && item.$refs.avgChartRef != undefined && item.dataArr.length != 0) {
|
||||
// item.$refs.avgChartRef.drawBar(item.dataArr[0])
|
||||
// }
|
||||
if (itemTypeChartRef2.echartArr.includes('均值图') && itemTypeChartRef2.$refs.avgChartRef != undefined) {
|
||||
itemTypeChartRef2.$refs.avgChartRef.drawBar(itemTypeChartRef2.dataArr[0])
|
||||
}
|
||||
}
|
||||
|
||||
// if (item.echartArr.includes('均值图') && item.$refs.avgChartRef != undefined && item.dataArr.length != 0) {
|
||||
// item.$refs.avgChartRef.drawBar(item.dataArr[0])
|
||||
// }
|
||||
if (itemTypeChartRef2.echartArr.includes('均值图') && itemTypeChartRef2.$refs.avgChartRef != undefined) {
|
||||
itemTypeChartRef2.$refs.avgChartRef.drawBar(itemTypeChartRef2.dataArr[0])
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
else{
|
||||
|
||||
else {
|
||||
|
||||
var _that = this
|
||||
_that.componentList.forEach(ele => {
|
||||
if ( ele.timeMode == '周期统计') {
|
||||
|
|
@ -636,7 +607,7 @@ export default {
|
|||
for (let i = 0; i < _that.$refs.typeChartRef2.length; i++) {
|
||||
let itemTypeChartRef2 = _that.$refs.typeChartRef2[i];
|
||||
// console.log(_this.$refs.typeChartRef[i], '触发接收的表格数据');
|
||||
if (itemTypeChartRef2.length!=0&&itemTypeChartRef2.dataArr!= undefined && itemTypeChartRef2.dataArr.length != 0) {
|
||||
if (itemTypeChartRef2.length != 0 && itemTypeChartRef2.dataArr != undefined && itemTypeChartRef2.dataArr.length != 0) {
|
||||
// this.$refs.typeChartRef2[i].$refs.lineChartRef.drawLine(this.$refs.typeChartRef2[i].dataArr, _this.$refs.typeChartRe2f[i].componentName.split('_')[0])
|
||||
if (itemTypeChartRef2.echartArr.includes('时间曲线图')) {
|
||||
_that.$refs.typeChartRef2[i].$refs.lineChartRef.drawLine(_that.$refs.typeChartRef2[i].dataArr, _that.$refs.typeChartRef2[i].componentName.split('_')[0],'周期统计')
|
||||
|
|
@ -664,11 +635,11 @@ export default {
|
|||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
});
|
||||
}
|
||||
}
|
||||
|
|
@ -701,6 +672,7 @@ export default {
|
|||
position: absolute;
|
||||
top: 14px;
|
||||
}
|
||||
|
||||
.el-collapse-item__header {
|
||||
font-size: 15px;
|
||||
margin-left: 10px;
|
||||
|
|
|
|||
|
|
@ -8,39 +8,25 @@
|
|||
<el-button type="primary" style="margin-left:10px" @click="saveHostName" size="small">保存</el-button>
|
||||
</el-form-item>
|
||||
<el-form-item label="时间：" :label-width="formLabelWidth">
|
||||
<el-date-picker
|
||||
type="datetime"
|
||||
value-format="yyyy-MM-dd HH:mm:ss"
|
||||
placeholder="选择日期"
|
||||
v-model="sizeForm.date1"
|
||||
style="width: 50%;"
|
||||
autocomplete="off"
|
||||
></el-date-picker>
|
||||
<el-date-picker type="datetime" value-format="yyyy-MM-dd HH:mm:ss" placeholder="选择日期"
|
||||
v-model="sizeForm.date1" style="width: 50%;" autocomplete="off"></el-date-picker>
|
||||
|
||||
<el-button @click="saveTime" type="primary" style="margin-left:10px" size="small">校时</el-button>
|
||||
</el-form-item>
|
||||
<p>备份&恢复</p>
|
||||
<el-form-item label="备份服务器设置：">
|
||||
<el-col :span="12">
|
||||
<el-button type="primary" size="small">备份</el-button>
|
||||
<el-button type="primary" size="small" @click="backupHandle()">备份</el-button>
|
||||
</el-col>
|
||||
</el-form-item>
|
||||
<el-form-item label="还原服务器设置：">
|
||||
<el-col :span="3">
|
||||
<el-button type="primary" disabled size="small">备份</el-button>
|
||||
<el-button type="primary" size="small" @click="restoreHandle()">备份</el-button>
|
||||
</el-col>
|
||||
<el-col :span="4">
|
||||
<el-upload
|
||||
class="upload-demo"
|
||||
action="https://jsonplaceholder.typicode.com/posts/"
|
||||
:on-preview="handlePreview"
|
||||
:on-remove="handleRemove"
|
||||
:before-remove="beforeRemove"
|
||||
multiple
|
||||
:limit="3"
|
||||
:on-exceed="handleExceed"
|
||||
:file-list="fileList"
|
||||
>
|
||||
<el-upload class="upload-demo" action="https://jsonplaceholder.typicode.com/posts/"
|
||||
:on-preview="handlePreview" :on-remove="handleRemove" :before-remove="beforeRemove" multiple
|
||||
:limit="3" :on-exceed="handleExceed" :file-list="fileList">
|
||||
<el-button size="small" type="primary">点击上传</el-button>
|
||||
</el-upload>
|
||||
</el-col>
|
||||
|
|
@ -65,7 +51,8 @@
|
|||
|
||||
<el-form-item label="跳帧设置：">
|
||||
<el-select v-model="FPS" size="mini" placeholder="请选择">
|
||||
<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </el-option>
|
||||
<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
|
||||
</el-option>
|
||||
</el-select>
|
||||
<i class="el-icon-warning" style="color: #409EFF; margin: 0 3px 0 10px;"></i>默认取值：单路视频流 0 ；2-3 路视频流
|
||||
1；4-6 路视频流 4
|
||||
|
|
@ -77,7 +64,7 @@
|
|||
</template>
|
||||
|
||||
<script>
|
||||
import { getHostInfoApi, resetReboot } from '../../api/aboutMachine';
|
||||
import { getHostInfoApi, resetReboot, ConfigBackup, ConfigRestore, ResetFactory } from '../../api/aboutMachine';
|
||||
import { getQuanjszData } from '../../api/index';
|
||||
import serverUrl from '../../config/apiurl.js';
|
||||
import { setQuanjsz } from '@/api/index';
|
||||
|
|
@ -199,6 +186,62 @@ export default {
|
|||
});
|
||||
});
|
||||
},
|
||||
// 备份事件
|
||||
backupHandle() {
|
||||
this.$confirm('此操作将备份操作, 是否继续?', '提示', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning'
|
||||
})
|
||||
.then(() => {
|
||||
ConfigBackup().then(res => {
|
||||
this.$message({
|
||||
type: 'success',
|
||||
message: '备份' + res.data.msg
|
||||
});
|
||||
}).catch(() => {
|
||||
this.$message.error(res.data.msg);
|
||||
})
|
||||
|
||||
})
|
||||
.catch(() => {
|
||||
this.$message({
|
||||
type: 'info',
|
||||
message: '已取消备份'
|
||||
});
|
||||
});
|
||||
},
|
||||
// 还原服务器设置
|
||||
restoreHandle() {
|
||||
this.$confirm('此操作将还原服务器设置, 是否继续?', '提示', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning'
|
||||
})
|
||||
.then(() => {
|
||||
// 出厂默认设置
|
||||
ConfigRestore().then(res => {
|
||||
|
||||
console.log(res.data, '还原服务器设置');
|
||||
this.$message({
|
||||
type: 'success',
|
||||
message: '还原'
|
||||
});
|
||||
|
||||
|
||||
}).catch(() => {
|
||||
this.$message.error(res.data.msg);
|
||||
})
|
||||
|
||||
})
|
||||
.catch(() => {
|
||||
this.$message({
|
||||
type: 'info',
|
||||
message: '已取消备份'
|
||||
});
|
||||
});
|
||||
},
|
||||
// 重置默认值
|
||||
handleReset() {
|
||||
this.$confirm('此操作将重置默认值, 是否继续?', '提示', {
|
||||
confirmButtonText: '确定',
|
||||
|
|
@ -206,10 +249,17 @@ export default {
|
|||
type: 'warning'
|
||||
})
|
||||
.then(() => {
|
||||
// this.$message({
|
||||
// type: 'success',
|
||||
// message: '删除成功!'
|
||||
// });
|
||||
// 出厂默认设置
|
||||
ResetFactory().then(res => {
|
||||
// console.log(res.data,'出厂默认设置');
|
||||
this.$message({
|
||||
type: 'success',
|
||||
message: '重置' + res.data.msg
|
||||
});
|
||||
}).catch(()=>{
|
||||
this.$message.error(res.data.msg);
|
||||
})
|
||||
|
||||
})
|
||||
.catch(() => {
|
||||
this.$message({
|
||||
|
|
@ -311,12 +361,15 @@ export default {
|
|||
text-align: left;
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
/deep/ .el-form-item {
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.container {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
p {
|
||||
width: 95%;
|
||||
font-size: 25px;
|
||||
|
|
|
|||
Loading…
Reference in New Issue