方案数据修改
This commit is contained in:
zhujiyan
@@ -6,7 +6,6 @@
|
||||
<el-descriptions title="方案信息" :column="2" border>
|
||||
<template #extra>
|
||||
<el-button type="primary" icon="el-icon-Plus" @click="handleOpen(0)">新增方案</el-button>
|
||||
<el-button type="primary" icon="el-icon-Download" @click="handleExport">数据导出</el-button>
|
||||
</template>
|
||||
<el-descriptions-item label="方案名称" width="60">
|
||||
{{ deviceData.itemName }}
|
||||
@@ -21,9 +20,13 @@
|
||||
<!-- <div class="history_title">
|
||||
<p>测试项信息</p>
|
||||
</div> -->
|
||||
<el-tabs v-model="activeName" type="border-card" @click="handleClickTabs">
|
||||
<el-tab-pane v-for="(item, index) in deviceData.records" :label="item.itemName"
|
||||
:name="item.id" :key="index">
|
||||
<el-tabs v-model="activeName" type="border-card" @click.self="handleClickTabs">
|
||||
<el-tab-pane
|
||||
v-for="(item, index) in deviceData?.records"
|
||||
:label="item.itemName"
|
||||
:name="item.id"
|
||||
:key="index"
|
||||
>
|
||||
<template #label>
|
||||
<span class="custom-tabs-label">
|
||||
<el-icon>
|
||||
@@ -90,6 +93,116 @@
|
||||
</el-button>
|
||||
</el-descriptions-item>
|
||||
</el-descriptions>
|
||||
<div v-if="JSON.stringify(echartsData) != '{}'">
|
||||
<h3 class="mt10 mb10 ml10">历史趋势</h3>
|
||||
<div class="history_trend">
|
||||
<div class="history_header" ref="headerRef">
|
||||
<!-- <el-form :model="searchForm" class="history_select" id="history_select"> -->
|
||||
<TableHeader
|
||||
:showSearch="false"
|
||||
ref="tableHeaderRef"
|
||||
@selectChange="selectChange"
|
||||
>
|
||||
<template v-slot:select>
|
||||
<el-form-item for="-" label="统计指标">
|
||||
<el-select
|
||||
style="min-width: 200px"
|
||||
collapse-tags
|
||||
collapse-tags-tooltip
|
||||
v-model="searchForm.index"
|
||||
placeholder="请选择统计指标"
|
||||
multiple
|
||||
:multiple-limit="3"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in indexOptions"
|
||||
:key="item.id"
|
||||
:label="item.name"
|
||||
:value="item.id"
|
||||
></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item for="-" label="值类型">
|
||||
<el-select
|
||||
style="width: 12px !important"
|
||||
v-model="searchForm.dataLevel"
|
||||
>
|
||||
<el-option value="Primary" label="一次值"></el-option>
|
||||
<el-option value="Secondary" label="二次值"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<div v-for="(item, index) in countData" :key="index">
|
||||
<el-form-item
|
||||
for="-"
|
||||
:label="item.name + '谐波次数'"
|
||||
label-width="180px"
|
||||
v-if="item.countOptions.length != 0"
|
||||
>
|
||||
<!-- multiple -->
|
||||
<el-select
|
||||
v-model="item.count"
|
||||
collapse-tags
|
||||
collapse-tags-tooltip
|
||||
placeholder="请选择谐波次数"
|
||||
style="width: 120px"
|
||||
>
|
||||
<el-option
|
||||
v-for="vv in item.countOptions"
|
||||
:key="vv"
|
||||
:label="vv"
|
||||
:value="vv"
|
||||
></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</div>
|
||||
<el-form-item for="-" label="统计类型" label-width="80px">
|
||||
<el-select
|
||||
style="width: 120px"
|
||||
v-model="searchForm.type"
|
||||
placeholder="请选择值类型"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in typeOptions"
|
||||
:key="item.id"
|
||||
:label="item.name"
|
||||
:value="item.id"
|
||||
></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</template>
|
||||
<template v-slot:operation>
|
||||
<el-button
|
||||
type="primary"
|
||||
icon="el-icon-Download"
|
||||
@click="handleExport"
|
||||
>
|
||||
数据导出
|
||||
</el-button>
|
||||
<el-button type="primary" icon="el-icon-Search" @click="init(true)">
|
||||
查询
|
||||
</el-button>
|
||||
</template>
|
||||
</TableHeader>
|
||||
</div>
|
||||
<div class="history_title">
|
||||
<p>{{ chartTitle }}</p>
|
||||
</div>
|
||||
<div
|
||||
class="history_chart"
|
||||
v-loading="loading"
|
||||
:style="EcharHeight"
|
||||
:key="EcharHeight.height"
|
||||
ref="chartRef"
|
||||
>
|
||||
<MyEchart
|
||||
ref="historyChart"
|
||||
v-if="echartsData"
|
||||
:isExport="true"
|
||||
:options="echartsData"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
</div>
|
||||
@@ -97,66 +210,7 @@
|
||||
<el-empty />
|
||||
</div>
|
||||
</el-collapse-item>
|
||||
<!-- <el-collapse-item title="历史趋势" name="1" class="history_collapse"> -->
|
||||
|
||||
<!-- </el-collapse-item> -->
|
||||
</el-collapse>
|
||||
<h3 class="mt10 mb10">历史趋势</h3>
|
||||
<div class="history_trend">
|
||||
<div class="history_header" ref="headerRef">
|
||||
<!-- <el-form :model="searchForm" class="history_select" id="history_select"> -->
|
||||
<TableHeader :showSearch="false" ref="tableHeaderRef" :key="searchFormIndex"
|
||||
@selectChange="selectChange">
|
||||
<template v-slot:select>
|
||||
<el-form-item for="-" label="统计指标">
|
||||
<el-select collapse-tags collapse-tags-tooltip v-model="searchForm.index"
|
||||
placeholder="请选择统计指标" multiple :multiple-limit="3">
|
||||
<el-option v-for="item in indexOptions" :key="item.id" :label="item.name"
|
||||
:value="item.id"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item for="-" label="值类型">
|
||||
<el-select style="width: 160px !important" v-model="searchForm.dataLevel">
|
||||
<el-option value="Primary" label="一次值"></el-option>
|
||||
<el-option value="Secondary" label="二次值"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<div v-for="(item, index) in countData" :key="index">
|
||||
<el-form-item for="-" :label="item.name + '谐波次数'" label-width="180px"
|
||||
v-if="item.countOptions.length != 0">
|
||||
<!-- multiple -->
|
||||
<el-select v-model="item.count" collapse-tags collapse-tags-tooltip
|
||||
placeholder="请选择谐波次数" style="width: 100px">
|
||||
<el-option v-for="vv in item.countOptions" :key="vv" :label="vv"
|
||||
:value="vv"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</div>
|
||||
<el-form-item for="-" label="统计类型" label-width="80px">
|
||||
<el-select v-model="searchForm.type" placeholder="请选择值类型">
|
||||
<el-option v-for="item in typeOptions" :key="item.id" :label="item.name"
|
||||
:value="item.id"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</template>
|
||||
<template v-slot:operation>
|
||||
<el-button type="primary" icon="el-icon-Search" @click="init(true)">查询</el-button>
|
||||
</template>
|
||||
</TableHeader>
|
||||
|
||||
<!-- </el-form> -->
|
||||
<!-- <div class="history_searchBtn">
|
||||
|
||||
</div> -->
|
||||
</div>
|
||||
<div class="history_title">
|
||||
<p>{{ chartTitle }}</p>
|
||||
</div>
|
||||
<div class="history_chart" v-loading="loading" :style="EcharHeight" :key="EcharHeight.height"
|
||||
ref="chartRef">
|
||||
<MyEchart ref="historyChart" v-if="echartsData" :isExport="true" :options="echartsData" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<el-empty v-else description="请选择设备" class="device-manage-right" />
|
||||
<popup ref="dialogRef" @onSubmit="refreshTree" />
|
||||
@@ -243,46 +297,54 @@ const schemeTreeRef = ref()
|
||||
const historyDevId: any = ref('')
|
||||
const chartTitle: any = ref('')
|
||||
//点击测试项切换树节点
|
||||
const handleClickTabs = async () => {
|
||||
const handleClickTabs = () => {
|
||||
searchForm.value.index = [indexOptions.value[0].id]
|
||||
historyDevId.value = activeName.value
|
||||
schemeTreeRef.value.setCheckedNode(activeName.value)
|
||||
setTimeout(() => {
|
||||
init(true)
|
||||
}, 100);
|
||||
}, 100)
|
||||
}
|
||||
const nodeClick = async (e: anyObj) => {
|
||||
if (e == undefined) {
|
||||
return
|
||||
}
|
||||
console.log(123);
|
||||
|
||||
deviceData.value = []
|
||||
historyDevId.value = e?.children && e?.children.length != 0 ? e?.children[0].id : e?.id
|
||||
let id = e?.pid ? e?.pid : e?.id
|
||||
let id = e.pid ? e.pid : e.id
|
||||
|
||||
//查询测试项信息
|
||||
await getTestRecordInfo(id)
|
||||
.then(async (res) => {
|
||||
.then(async res => {
|
||||
deviceData.value = res.data
|
||||
console.log(deviceData.value, '.......')
|
||||
if (res.data.records.length == 1) {
|
||||
activeName.value = res.data.records[0].id
|
||||
} else {
|
||||
res.data.records.map((item: any) => {
|
||||
res.data.records.map((item: any, index: any) => {
|
||||
//多层
|
||||
if (item.id == e.id) {
|
||||
activeName.value = item.id
|
||||
return
|
||||
} else {
|
||||
activeName.value = res.data.records[0].id
|
||||
return
|
||||
}
|
||||
})
|
||||
}
|
||||
console.log(activeName.value, '7777777777777')
|
||||
searchForm.value.index = [indexOptions.value[0].id]
|
||||
|
||||
schemeTreeRef.value.getPlanData(deviceData.value)
|
||||
await setTimeout(() => {
|
||||
loading.value = true
|
||||
init(true)
|
||||
}, 100);
|
||||
if (e.pid) {
|
||||
init(true)
|
||||
} else {
|
||||
init(false)
|
||||
}
|
||||
}, 100)
|
||||
|
||||
loading.value = false
|
||||
})
|
||||
@@ -395,14 +457,14 @@ const init = (flag: boolean) => {
|
||||
let unitList: any = []
|
||||
|
||||
let groupedData = chartsList.reduce((acc, item) => {
|
||||
let key = item.anotherName;
|
||||
let key = item.anotherName
|
||||
if (!acc[key]) {
|
||||
acc[key] = [];
|
||||
acc[key] = []
|
||||
}
|
||||
acc[key].push(item);
|
||||
return acc;
|
||||
acc[key].push(item)
|
||||
return acc
|
||||
}, {})
|
||||
let result = Object.values(groupedData);
|
||||
let result = Object.values(groupedData)
|
||||
if (chartsList.length > 0) {
|
||||
unitList = result.map((item: any) => {
|
||||
return item[0].unit
|
||||
@@ -411,7 +473,6 @@ const init = (flag: boolean) => {
|
||||
|
||||
echartsData.value = {
|
||||
legend: {
|
||||
|
||||
itemWidth: 20,
|
||||
itemHeight: 10,
|
||||
itemGap: 15,
|
||||
@@ -439,13 +500,15 @@ const init = (flag: boolean) => {
|
||||
backgroundColor: 'rgba(0,0,0,0.35)',
|
||||
borderWidth: 0,
|
||||
formatter(params) {
|
||||
const xname = params[0].value[0];
|
||||
let str = `${xname}<br>`;
|
||||
const xname = params[0].value[0]
|
||||
let str = `${xname}<br>`
|
||||
params.forEach((el, index) => {
|
||||
str += `${el.marker}${el.seriesName.split('(')[0]}：${el.value[1] ? (el.value[1] + ' ' + el.value[2]) : '-'}<br>`;
|
||||
});
|
||||
return str;
|
||||
},
|
||||
str += `${el.marker}${el.seriesName.split('(')[0]}：${
|
||||
el.value[1] ? el.value[1] + ' ' + el.value[2] : '-'
|
||||
}<br>`
|
||||
})
|
||||
return str
|
||||
}
|
||||
},
|
||||
color: ['#FFCC00', '#009900', '#CC0000', ...color],
|
||||
xAxis: {
|
||||
@@ -458,14 +521,10 @@ const init = (flag: boolean) => {
|
||||
}
|
||||
}
|
||||
},
|
||||
yAxis: [{
|
||||
|
||||
}],
|
||||
yAxis: [{}],
|
||||
|
||||
options: {
|
||||
series: [
|
||||
|
||||
]
|
||||
series: []
|
||||
}
|
||||
}
|
||||
if (chartsList.length > 0) {
|
||||
@@ -473,7 +532,7 @@ const init = (flag: boolean) => {
|
||||
unitList.forEach((item: any, index: any) => {
|
||||
let right = {
|
||||
position: 'right',
|
||||
offset: (index - 1) * 80,
|
||||
offset: (index - 1) * 80
|
||||
}
|
||||
echartsData.value.yAxis.push({
|
||||
name: item,
|
||||
@@ -481,8 +540,7 @@ const init = (flag: boolean) => {
|
||||
splitNumber: 5,
|
||||
minInterval: 1,
|
||||
splitLine: {
|
||||
show: false,
|
||||
|
||||
show: false
|
||||
},
|
||||
...(index > 0 ? right : null)
|
||||
})
|
||||
@@ -491,26 +549,26 @@ const init = (flag: boolean) => {
|
||||
result.forEach((item: any, index: any) => {
|
||||
let yMethodList: any = []
|
||||
|
||||
let ABCList = Object.values(item.reduce((acc, item) => {
|
||||
let key = item.phase;
|
||||
if (!acc[key]) {
|
||||
acc[key] = [];
|
||||
}
|
||||
acc[key].push(item);
|
||||
return acc;
|
||||
}, {}));
|
||||
ABCList.forEach((kk: any,) => {
|
||||
let ABCList = Object.values(
|
||||
item.reduce((acc, item) => {
|
||||
let key = item.phase
|
||||
if (!acc[key]) {
|
||||
acc[key] = []
|
||||
}
|
||||
acc[key].push(item)
|
||||
return acc
|
||||
}, {})
|
||||
)
|
||||
ABCList.forEach((kk: any) => {
|
||||
let seriesList: any = []
|
||||
kk.forEach((cc: any) => {
|
||||
if (cc.statisticalData) {
|
||||
yMethodList.push(cc.statisticalData?.toFixed(2) - 0)
|
||||
|
||||
}
|
||||
|
||||
seriesList.push([cc.time, cc.statisticalData?.toFixed(2), cc.unit])
|
||||
})
|
||||
|
||||
|
||||
echartsData.value.options.series.push({
|
||||
name: kk[0].phase + '相' + item[0].anotherName,
|
||||
type: 'line',
|
||||
@@ -518,29 +576,24 @@ const init = (flag: boolean) => {
|
||||
symbol: 'none',
|
||||
data: seriesList,
|
||||
yAxisIndex: index
|
||||
|
||||
})
|
||||
|
||||
|
||||
})
|
||||
let [min, max] = yMethod(yMethodList)
|
||||
echartsData.value.yAxis[index].min = min
|
||||
echartsData.value.yAxis[index].max = max
|
||||
|
||||
|
||||
|
||||
})
|
||||
}
|
||||
// console.log("🚀 ~ .1111 ~ echartsData.value :", echartsData.value)
|
||||
|
||||
|
||||
|
||||
loading.value = false
|
||||
}
|
||||
})
|
||||
.catch(error => {
|
||||
loading.value = false
|
||||
})
|
||||
} else {
|
||||
loading.value = false
|
||||
echartsData.value = {}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -715,7 +768,6 @@ const selectChange = (e: boolean) => {
|
||||
EcharHeight.value = mainHeight(310)
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
const handleChange = () => {
|
||||
if (activeColName.value == '0') {
|
||||
@@ -724,7 +776,6 @@ const handleChange = () => {
|
||||
} else {
|
||||
EcharHeight.value = mainHeight(510)
|
||||
}
|
||||
|
||||
} else {
|
||||
if (flag.value) {
|
||||
EcharHeight.value = mainHeight(365)
|
||||
@@ -732,7 +783,6 @@ const handleChange = () => {
|
||||
EcharHeight.value = mainHeight(310)
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
const tableHeaderRef = ref<any>()
|
||||
const searchFormIndex = ref<any>()
|
||||
@@ -768,6 +818,9 @@ onMounted(() => {
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
::v-deep .el-select {
|
||||
min-width: 120px;
|
||||
}
|
||||
.device-manage {
|
||||
display: flex;
|
||||
height: calc(100vh - 100px);
|
||||
@@ -806,7 +859,7 @@ onMounted(() => {
|
||||
|
||||
.history_title {
|
||||
width: 100%;
|
||||
|
||||
padding-left: 10px;
|
||||
p {
|
||||
height: 32px;
|
||||
line-height: 32px;
|
||||
@@ -821,7 +874,7 @@ onMounted(() => {
|
||||
|
||||
.el-tabs__content {
|
||||
padding: 0 !important;
|
||||
min-height: 130px !important;
|
||||
// min-height: 130px !important;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -837,12 +890,11 @@ onMounted(() => {
|
||||
|
||||
.history_header {
|
||||
width: 100%;
|
||||
|
||||
}
|
||||
|
||||
.history_chart {
|
||||
|
||||
margin: 10px 0;
|
||||
z-index: 1001;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user