方案数据统计指标改为多选/x轴修改
This commit is contained in:
zhujiyan
@@ -15,157 +15,165 @@
|
|||||||
{{ deviceData.describe ? deviceData.describe : '/' }}
|
{{ deviceData.describe ? deviceData.describe : '/' }}
|
||||||
</el-descriptions-item>
|
</el-descriptions-item>
|
||||||
</el-descriptions>
|
</el-descriptions>
|
||||||
<div class="monitor_info" v-if="deviceData.records && deviceData.records.length != 0">
|
<el-collapse v-model="activeColName" accordion>
|
||||||
<div class="history_title">
|
<el-collapse-item title="测试项信息" name="0">
|
||||||
<p>测试项信息</p>
|
<div class="monitor_info" v-if="deviceData.records && deviceData.records.length != 0">
|
||||||
</div>
|
<!-- <div class="history_title">
|
||||||
<el-tabs v-model="activeName" type="border-card" @click="handleClickTabs">
|
<p>测试项信息</p>
|
||||||
<el-tab-pane
|
</div> -->
|
||||||
v-for="(item, index) in deviceData.records"
|
<el-tabs v-model="activeName" type="border-card" @click="handleClickTabs">
|
||||||
:label="item.itemName"
|
<el-tab-pane
|
||||||
:name="item.id"
|
v-for="(item, index) in deviceData.records"
|
||||||
:key="index"
|
:label="item.itemName"
|
||||||
>
|
:name="item.id"
|
||||||
<template #label>
|
:key="index"
|
||||||
<span class="custom-tabs-label">
|
|
||||||
<el-icon>
|
|
||||||
<TrendCharts />
|
|
||||||
</el-icon>
|
|
||||||
<span>{{ item.itemName }}</span>
|
|
||||||
</span>
|
|
||||||
</template>
|
|
||||||
<el-descriptions size="small" width="180" :column="4" border>
|
|
||||||
<el-descriptions-item label="测试项名称" width="160">
|
|
||||||
{{ item.itemName }}
|
|
||||||
</el-descriptions-item>
|
|
||||||
<el-descriptions-item label="测量间隔" width="160">
|
|
||||||
{{ item.statisticalInterval }}分钟
|
|
||||||
</el-descriptions-item>
|
|
||||||
<el-descriptions-item label="电压等级" width="160">
|
|
||||||
{{
|
|
||||||
voltageLevelList.find(vv => {
|
|
||||||
return vv.id == item.voltageLevel
|
|
||||||
})?.name
|
|
||||||
}}
|
|
||||||
</el-descriptions-item>
|
|
||||||
<el-descriptions-item label="接线方式" width="160">
|
|
||||||
{{
|
|
||||||
volConTypeList.find(vv => {
|
|
||||||
return vv.id == item.volConType
|
|
||||||
})?.name
|
|
||||||
}}
|
|
||||||
</el-descriptions-item>
|
|
||||||
<el-descriptions-item label="最小短路容量" width="160">
|
|
||||||
{{ item.capacitySscmin }}MVA
|
|
||||||
</el-descriptions-item>
|
|
||||||
<el-descriptions-item label="用户协议容量" width="160">
|
|
||||||
{{ item.capacitySi }}MVA
|
|
||||||
</el-descriptions-item>
|
|
||||||
<el-descriptions-item label="基准短路容量" width="160">
|
|
||||||
{{ item.capacitySscb }}MVA
|
|
||||||
</el-descriptions-item>
|
|
||||||
<el-descriptions-item label="供电设备容量" width="160">
|
|
||||||
{{ item.capacitySt }}MVA
|
|
||||||
</el-descriptions-item>
|
|
||||||
<el-descriptions-item label="PT变比" width="160">
|
|
||||||
{{ item.pt && item.pt1 ? item.pt / item.pt1 : item.pt }}
|
|
||||||
</el-descriptions-item>
|
|
||||||
<el-descriptions-item label="CT变比" width="160">
|
|
||||||
{{ item.ct && item.ct1 ? item.ct / item.ct1 : item.ct }}
|
|
||||||
</el-descriptions-item>
|
|
||||||
<el-descriptions-item label="起始时间" width="160">
|
|
||||||
<span style="width: 140px; overflow: hidden; display: block">
|
|
||||||
{{ item.startTime }}
|
|
||||||
</span>
|
|
||||||
</el-descriptions-item>
|
|
||||||
<el-descriptions-item label="结束时间" width="160">
|
|
||||||
<span style="width: 140px; overflow: hidden; display: block">
|
|
||||||
{{ item.endTime }}
|
|
||||||
</span>
|
|
||||||
</el-descriptions-item>
|
|
||||||
<el-descriptions-item label="监测位置" width="160">
|
|
||||||
{{ item.location }}
|
|
||||||
</el-descriptions-item>
|
|
||||||
<el-descriptions-item label="操作" width="160">
|
|
||||||
<el-button type="primary" icon="el-icon-Tools" @click="handleOpen(3)">
|
|
||||||
数据绑定
|
|
||||||
</el-button>
|
|
||||||
</el-descriptions-item>
|
|
||||||
</el-descriptions>
|
|
||||||
</el-tab-pane>
|
|
||||||
</el-tabs>
|
|
||||||
</div>
|
|
||||||
<div class="history_title">
|
|
||||||
<p>历史趋势</p>
|
|
||||||
</div>
|
|
||||||
<div class="history_header">
|
|
||||||
<el-form :model="searchForm" class="history_select" id="history_select">
|
|
||||||
<el-form-item label="统计指标" label-width="80px">
|
|
||||||
<!-- multiple
|
|
||||||
:multiple-limit="3" -->
|
|
||||||
<el-select
|
|
||||||
collapse-tags
|
|
||||||
collapse-tags-tooltip
|
|
||||||
v-model="searchForm.index"
|
|
||||||
placeholder="请选择统计指标"
|
|
||||||
@change="init()"
|
|
||||||
>
|
|
||||||
<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 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>
|
|
||||||
<!-- {{ countData }} -->
|
|
||||||
<div v-for="(item, index) in countData" :key="index">
|
|
||||||
<!-- :label="item.name + '谐波次数'" label-width="180px"-->
|
|
||||||
<el-form-item label="谐波次数" v-if="item.countOptions.length != 0">
|
|
||||||
<!-- multiple -->
|
|
||||||
<el-select
|
|
||||||
v-model="item.count"
|
|
||||||
collapse-tags
|
|
||||||
collapse-tags-tooltip
|
|
||||||
placeholder="请选择谐波次数"
|
|
||||||
style="width: 100px"
|
|
||||||
>
|
>
|
||||||
<el-option
|
<template #label>
|
||||||
v-for="vv in item.countOptions"
|
<span class="custom-tabs-label">
|
||||||
:key="vv"
|
<el-icon>
|
||||||
:label="vv"
|
<TrendCharts />
|
||||||
:value="vv"
|
</el-icon>
|
||||||
></el-option>
|
<span>{{ item.itemName }}</span>
|
||||||
</el-select>
|
</span>
|
||||||
</el-form-item>
|
</template>
|
||||||
|
<el-descriptions size="small" width="180" :column="4" border>
|
||||||
|
<el-descriptions-item label="测试项名称" width="160">
|
||||||
|
{{ item.itemName }}
|
||||||
|
</el-descriptions-item>
|
||||||
|
<el-descriptions-item label="测量间隔" width="160">
|
||||||
|
{{ item.statisticalInterval }}分钟
|
||||||
|
</el-descriptions-item>
|
||||||
|
<el-descriptions-item label="电压等级" width="160">
|
||||||
|
{{
|
||||||
|
voltageLevelList.find(vv => {
|
||||||
|
return vv.id == item.voltageLevel
|
||||||
|
})?.name
|
||||||
|
}}
|
||||||
|
</el-descriptions-item>
|
||||||
|
<el-descriptions-item label="接线方式" width="160">
|
||||||
|
{{
|
||||||
|
volConTypeList.find(vv => {
|
||||||
|
return vv.id == item.volConType
|
||||||
|
})?.name
|
||||||
|
}}
|
||||||
|
</el-descriptions-item>
|
||||||
|
<el-descriptions-item label="最小短路容量" width="160">
|
||||||
|
{{ item.capacitySscmin }}MVA
|
||||||
|
</el-descriptions-item>
|
||||||
|
<el-descriptions-item label="用户协议容量" width="160">
|
||||||
|
{{ item.capacitySi }}MVA
|
||||||
|
</el-descriptions-item>
|
||||||
|
<el-descriptions-item label="基准短路容量" width="160">
|
||||||
|
{{ item.capacitySscb }}MVA
|
||||||
|
</el-descriptions-item>
|
||||||
|
<el-descriptions-item label="供电设备容量" width="160">
|
||||||
|
{{ item.capacitySt }}MVA
|
||||||
|
</el-descriptions-item>
|
||||||
|
<el-descriptions-item label="PT变比" width="160">
|
||||||
|
{{ item.pt && item.pt1 ? item.pt / item.pt1 : item.pt }}
|
||||||
|
</el-descriptions-item>
|
||||||
|
<el-descriptions-item label="CT变比" width="160">
|
||||||
|
{{ item.ct && item.ct1 ? item.ct / item.ct1 : item.ct }}
|
||||||
|
</el-descriptions-item>
|
||||||
|
<el-descriptions-item label="起始时间" width="160">
|
||||||
|
<span style="width: 140px; overflow: hidden; display: block">
|
||||||
|
{{ item.startTime }}
|
||||||
|
</span>
|
||||||
|
</el-descriptions-item>
|
||||||
|
<el-descriptions-item label="结束时间" width="160">
|
||||||
|
<span style="width: 140px; overflow: hidden; display: block">
|
||||||
|
{{ item.endTime }}
|
||||||
|
</span>
|
||||||
|
</el-descriptions-item>
|
||||||
|
<el-descriptions-item label="监测位置" width="160">
|
||||||
|
{{ item.location }}
|
||||||
|
</el-descriptions-item>
|
||||||
|
<el-descriptions-item label="操作" width="160">
|
||||||
|
<el-button type="primary" icon="el-icon-Tools" @click="handleOpen(3)">
|
||||||
|
数据绑定
|
||||||
|
</el-button>
|
||||||
|
</el-descriptions-item>
|
||||||
|
</el-descriptions>
|
||||||
|
</el-tab-pane>
|
||||||
|
</el-tabs>
|
||||||
</div>
|
</div>
|
||||||
<el-form-item label="统计类型" label-width="80px">
|
</el-collapse-item>
|
||||||
<el-select v-model="searchForm.type" placeholder="请选择值类型">
|
<el-collapse-item title="历史趋势" name="1">
|
||||||
<el-option
|
<!-- <div class="history_title">
|
||||||
v-for="item in typeOptions"
|
<p>历史趋势</p>
|
||||||
:key="item.id"
|
</div> -->
|
||||||
:label="item.name"
|
<div class="history_header">
|
||||||
:value="item.id"
|
<el-form :model="searchForm" class="history_select" id="history_select">
|
||||||
></el-option>
|
<el-form-item label="统计指标" label-width="80px">
|
||||||
</el-select>
|
<el-select
|
||||||
</el-form-item>
|
collapse-tags
|
||||||
</el-form>
|
collapse-tags-tooltip
|
||||||
<div class="history_searchBtn">
|
v-model="searchForm.index"
|
||||||
<el-button type="primary" icon="el-icon-Search" @click="init()">查询</el-button>
|
placeholder="请选择统计指标"
|
||||||
</div>
|
multiple
|
||||||
</div>
|
:multiple-limit="3"
|
||||||
<div class="history_title">
|
@change="init()"
|
||||||
<p>{{ chartTitle }}</p>
|
>
|
||||||
</div>
|
<el-option
|
||||||
<div class="history_chart" v-loading="loading">
|
v-for="item in indexOptions"
|
||||||
<MyEchart ref="historyChart" v-if="echartsData" :isExport="true" :options="echartsData" />
|
:key="item.id"
|
||||||
</div>
|
:label="item.name"
|
||||||
|
:value="item.id"
|
||||||
|
></el-option>
|
||||||
|
</el-select>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item 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
|
||||||
|
: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 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>
|
||||||
|
</el-form>
|
||||||
|
<div class="history_searchBtn">
|
||||||
|
<el-button type="primary" icon="el-icon-Search" @click="init()">查询</el-button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="history_title">
|
||||||
|
<p>{{ chartTitle }}</p>
|
||||||
|
</div>
|
||||||
|
<div class="history_chart" v-loading="loading">
|
||||||
|
<MyEchart ref="historyChart" v-if="echartsData" :isExport="true" :options="echartsData" />
|
||||||
|
</div>
|
||||||
|
</el-collapse-item>
|
||||||
|
</el-collapse>
|
||||||
</div>
|
</div>
|
||||||
<el-empty v-else description="请选择设备" class="device-manage-right" />
|
<el-empty v-else description="请选择设备" class="device-manage-right" />
|
||||||
<popup ref="dialogRef" @onSubmit="refreshTree" />
|
<popup ref="dialogRef" @onSubmit="refreshTree" />
|
||||||
@@ -215,7 +223,7 @@ const typeOptions = [
|
|||||||
}
|
}
|
||||||
]
|
]
|
||||||
searchForm.value = {
|
searchForm.value = {
|
||||||
index: '',
|
index: [],
|
||||||
dataLevel: 'Primary',
|
dataLevel: 'Primary',
|
||||||
type: typeOptions[0].id,
|
type: typeOptions[0].id,
|
||||||
count: []
|
count: []
|
||||||
@@ -230,14 +238,15 @@ const legendDictList: any = ref([])
|
|||||||
queryByCode('portable-harmonic').then(res => {
|
queryByCode('portable-harmonic').then(res => {
|
||||||
queryCsDictTree(res.data.id).then(item => {
|
queryCsDictTree(res.data.id).then(item => {
|
||||||
indexOptions.value = item.data
|
indexOptions.value = item.data
|
||||||
// searchForm.value.index[0] = indexOptions.value[0].id
|
searchForm.value.index[0] = indexOptions.value[0].id
|
||||||
searchForm.value.index = indexOptions.value[0].id
|
// searchForm.value.index = indexOptions.value[0].id
|
||||||
})
|
})
|
||||||
queryStatistical(res.data.id).then(vv => {
|
queryStatistical(res.data.id).then(vv => {
|
||||||
legendDictList.value = vv.data
|
legendDictList.value = vv.data
|
||||||
})
|
})
|
||||||
})
|
})
|
||||||
const activeName: any = ref()
|
const activeName: any = ref()
|
||||||
|
const activeColName: any = ref('1')
|
||||||
const deviceData: any = ref([])
|
const deviceData: any = ref([])
|
||||||
const schemeTreeRef = ref()
|
const schemeTreeRef = ref()
|
||||||
//历史趋势devId
|
//历史趋势devId
|
||||||
@@ -311,6 +320,26 @@ const refreshTree = () => {
|
|||||||
const range = (start: any, end: any, step: any) => {
|
const range = (start: any, end: any, step: any) => {
|
||||||
return Array.from({ length: (end - start) / step + 1 }, (_, i) => start + i * step)
|
return Array.from({ length: (end - start) / step + 1 }, (_, i) => start + i * step)
|
||||||
}
|
}
|
||||||
|
//二维数组去除相同数据的数组
|
||||||
|
const filterArray = (array: any) => {
|
||||||
|
const newArray: any = []
|
||||||
|
array.forEach((currentValue: any) => {
|
||||||
|
let isPush = true
|
||||||
|
newArray.forEach((currentValueIn: any) => {
|
||||||
|
if (currentValueIn) {
|
||||||
|
if (currentValue[0] === currentValueIn[0] && currentValue[1] === currentValueIn[1]) {
|
||||||
|
isPush = false
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
newArray.push(currentValue)
|
||||||
|
}
|
||||||
|
})
|
||||||
|
if (isPush) {
|
||||||
|
newArray.push(currentValue)
|
||||||
|
}
|
||||||
|
})
|
||||||
|
return newArray
|
||||||
|
}
|
||||||
const init = () => {
|
const init = () => {
|
||||||
//调用子组件的方法切换的时候tree的节点也变化
|
//调用子组件的方法切换的时候tree的节点也变化
|
||||||
let list: any = []
|
let list: any = []
|
||||||
@@ -331,15 +360,21 @@ const init = () => {
|
|||||||
'cadetblue'
|
'cadetblue'
|
||||||
]
|
]
|
||||||
if (historyDevId.value && legendDictList.value && legendDictList.value.selectedList) {
|
if (historyDevId.value && legendDictList.value && legendDictList.value.selectedList) {
|
||||||
|
console.log('where')
|
||||||
// 选择指标的时候切换legend内容和data数据
|
// 选择指标的时候切换legend内容和data数据
|
||||||
legendDictList.value?.selectedList?.map((item: any) => {
|
legendDictList.value?.selectedList?.map((item: any) => {
|
||||||
if (item.dataType == searchForm.value.index) {
|
// if (item.dataType == searchForm.value.index) {
|
||||||
list.push(item.eleEpdPqdVOS)
|
// list.push(item.eleEpdPqdVOS)
|
||||||
}
|
// }
|
||||||
|
searchForm.value.index.map((vv: any) => {
|
||||||
|
if (item.dataType == vv) {
|
||||||
|
list.push(item.eleEpdPqdVOS)
|
||||||
|
}
|
||||||
|
})
|
||||||
})
|
})
|
||||||
|
|
||||||
//选择的指标使用方法处理
|
//选择的指标使用方法处理
|
||||||
formatCountOptions([searchForm.value.index])
|
formatCountOptions(searchForm.value.index)
|
||||||
//查询历史趋势
|
//查询历史趋势
|
||||||
historyDataList.value = []
|
historyDataList.value = []
|
||||||
let middleTitle = ''
|
let middleTitle = ''
|
||||||
@@ -357,7 +392,7 @@ const init = () => {
|
|||||||
middleTitle = ''
|
middleTitle = ''
|
||||||
}
|
}
|
||||||
let indexList = []
|
let indexList = []
|
||||||
indexList = [searchForm.value.index]
|
indexList = searchForm.value.index
|
||||||
chartTitle.value = deviceData.value.itemName + '_' + middleTitle + '_'
|
chartTitle.value = deviceData.value.itemName + '_' + middleTitle + '_'
|
||||||
indexList.map((item: any, indexs: any) => {
|
indexList.map((item: any, indexs: any) => {
|
||||||
indexOptions.value.map((vv: any) => {
|
indexOptions.value.map((vv: any) => {
|
||||||
@@ -376,14 +411,16 @@ const init = () => {
|
|||||||
let obj = {
|
let obj = {
|
||||||
devId: historyDevId.value,
|
devId: historyDevId.value,
|
||||||
list: lists,
|
list: lists,
|
||||||
dataLevel:searchForm.value.dataLevel,
|
dataLevel: searchForm.value.dataLevel,
|
||||||
valueType: searchForm.value.type
|
valueType: searchForm.value.type
|
||||||
}
|
}
|
||||||
|
|
||||||
getHistoryTrend(obj)
|
getHistoryTrend(obj)
|
||||||
.then((res: any) => {
|
.then((res: any) => {
|
||||||
if (res.code === 'A0000') {
|
if (res.code === 'A0000') {
|
||||||
|
console.log('this')
|
||||||
historyDataList.value = res.data
|
historyDataList.value = res.data
|
||||||
|
let chartsList = JSON.parse(JSON.stringify(res.data))
|
||||||
echartsData.value = null
|
echartsData.value = null
|
||||||
//icon图标替换legend图例
|
//icon图标替换legend图例
|
||||||
const iconThree =
|
const iconThree =
|
||||||
@@ -391,7 +428,7 @@ const init = () => {
|
|||||||
let xAxis: any = [],
|
let xAxis: any = [],
|
||||||
timeList: any = [],
|
timeList: any = [],
|
||||||
unitList: any = []
|
unitList: any = []
|
||||||
historyDataList.value.map((item: any) => {
|
chartsList.map((item: any) => {
|
||||||
timeList.push(item.time)
|
timeList.push(item.time)
|
||||||
if (unitList.indexOf(item.unit) == -1) {
|
if (unitList.indexOf(item.unit) == -1) {
|
||||||
unitList.push(item.unit)
|
unitList.push(item.unit)
|
||||||
@@ -400,9 +437,6 @@ const init = () => {
|
|||||||
xAxis = timeList.sort((a: any, b: any) => {
|
xAxis = timeList.sort((a: any, b: any) => {
|
||||||
return new Date(a).getTime() - new Date(b).getTime()
|
return new Date(a).getTime() - new Date(b).getTime()
|
||||||
})
|
})
|
||||||
// xAxis.map((item:any)=>{
|
|
||||||
|
|
||||||
// })
|
|
||||||
echartsData.value = {
|
echartsData.value = {
|
||||||
options: {
|
options: {
|
||||||
title: [
|
title: [
|
||||||
@@ -472,9 +506,24 @@ const init = () => {
|
|||||||
color: '#999'
|
color: '#999'
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
// formatter: function (params: any) {
|
||||||
|
// var res = params[0].name + '<br/>'
|
||||||
|
// for (var i = 0, l = params.length; i < l; i++) {
|
||||||
|
// params[i].unit =
|
||||||
|
// echartsData.value.options.yAxis[
|
||||||
|
// echartsData.value.options.series[params[i].seriesIndex].yAxisIndex
|
||||||
|
// ]?.name
|
||||||
|
// res +=
|
||||||
|
// params[i].seriesName +
|
||||||
|
// ' ' +
|
||||||
|
// `<div style="width:16px;height:16px;float:left;background:${params[i].color};border-radius:50%;margin:0 5px;margin:0 15px"></div>` +
|
||||||
|
// `<div style='float:right;min-width:120px;padding-left:20px;'>${params[i].value} ${params[i].unit}</div><br/>`
|
||||||
|
// }
|
||||||
|
// return res
|
||||||
|
// }
|
||||||
},
|
},
|
||||||
// grid: {
|
// grid: {
|
||||||
// left: historyDataList.value.length != 0 ? '5%' : '1%',
|
// left: chartsList.length != 0 ? '5%' : '1%',
|
||||||
// right: '5%',
|
// right: '5%',
|
||||||
// bottom: '10%',
|
// bottom: '10%',
|
||||||
// top: '8%',
|
// top: '8%',
|
||||||
@@ -482,7 +531,7 @@ const init = () => {
|
|||||||
// },
|
// },
|
||||||
xAxis: [
|
xAxis: [
|
||||||
{
|
{
|
||||||
type: 'time',//category
|
type: 'time', //category
|
||||||
name: '\n\n\n\n\n时间',
|
name: '\n\n\n\n\n时间',
|
||||||
axisLabel: {
|
axisLabel: {
|
||||||
color: '#A9AEB2',
|
color: '#A9AEB2',
|
||||||
@@ -490,6 +539,9 @@ const init = () => {
|
|||||||
show: function (index: any, value: any) {
|
show: function (index: any, value: any) {
|
||||||
// 检查数据中是否存在这个时间点
|
// 检查数据中是否存在这个时间点
|
||||||
// return data.some(item:any => item[0] === value)
|
// return data.some(item:any => item[0] === value)
|
||||||
|
},
|
||||||
|
formatter: {
|
||||||
|
day: '{MM}-{d}'
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
nameTextStyle: {
|
nameTextStyle: {
|
||||||
@@ -577,16 +629,18 @@ const init = () => {
|
|||||||
}
|
}
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
echartsData.value.options.legend.data = []
|
||||||
|
console.log(list, '988888888888606')
|
||||||
list.map((item: any, index: any) => {
|
list.map((item: any, index: any) => {
|
||||||
item.map((vv: any, indexs: any) => {
|
item.map((vv: any, indexs: any) => {
|
||||||
//处理legend
|
//处理legend
|
||||||
if (historyDataList.value.length != 0) {
|
if (chartsList.length != 0) {
|
||||||
echartsData.value.options.legend.data.push({
|
echartsData.value.options.legend.data.push({
|
||||||
name: vv.phase + '相' + vv.showName,
|
name: vv.phase + '相' + vv.showName,
|
||||||
icon: iconThree
|
icon: iconThree
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
console.log(echartsData.value.options.legend.data, 'legend-legend-legend')
|
||||||
if (
|
if (
|
||||||
unitList.findIndex((item: any) => {
|
unitList.findIndex((item: any) => {
|
||||||
return item == vv.unit
|
return item == vv.unit
|
||||||
@@ -609,15 +663,18 @@ const init = () => {
|
|||||||
},
|
},
|
||||||
itemStyle: {},
|
itemStyle: {},
|
||||||
//数据
|
//数据
|
||||||
data: historyDataList.value
|
data: filterArray(
|
||||||
.map((kk: any) => {
|
chartsList
|
||||||
if (kk.statisticalName == vv.name) {
|
.map((kk: any, kks: any) => {
|
||||||
return kk.statisticalData
|
if (kk.statisticalName == vv.name) {
|
||||||
} else {
|
// console.log([xAxis[kks],kk.statisticalData],"========>>>>>>>");
|
||||||
return ''
|
return Array.from(new Set([xAxis[kks], kk.statisticalData]))
|
||||||
}
|
} else {
|
||||||
})
|
return ''
|
||||||
.filter((kk: any) => kk !== ''),
|
}
|
||||||
|
})
|
||||||
|
.filter((kk: any) => kk !== '')
|
||||||
|
),
|
||||||
//数据对应的y轴
|
//数据对应的y轴
|
||||||
// yAxisIndex:0,
|
// yAxisIndex:0,
|
||||||
yAxisIndex: vv.yAxisIndex
|
yAxisIndex: vv.yAxisIndex
|
||||||
@@ -634,8 +691,10 @@ const init = () => {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
// item.data = filterArray(item.data)
|
||||||
})
|
})
|
||||||
loading.value = false
|
loading.value = false
|
||||||
|
console.log(echartsData.value.options.series, '++++++++++++++++++++669')
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
.catch(error => {
|
.catch(error => {
|
||||||
@@ -698,6 +757,7 @@ const handleExport = async () => {
|
|||||||
}
|
}
|
||||||
|
|
||||||
if (historyDataList.value.length != 0) {
|
if (historyDataList.value.length != 0) {
|
||||||
|
console.log(historyDataList.value, 'historyDataList')
|
||||||
let xAxis: any = []
|
let xAxis: any = []
|
||||||
let timeList: any = []
|
let timeList: any = []
|
||||||
historyDataList.value.map((item: any) => {
|
historyDataList.value.map((item: any) => {
|
||||||
@@ -713,6 +773,7 @@ const handleExport = async () => {
|
|||||||
csv = convertToCSV([], [])
|
csv = convertToCSV([], [])
|
||||||
chartsCsv.value = csv
|
chartsCsv.value = csv
|
||||||
// 如果你想提供下载链接
|
// 如果你想提供下载链接
|
||||||
|
console.log(list, '745745745745')
|
||||||
function convertToCSV(data: any, key: any) {
|
function convertToCSV(data: any, key: any) {
|
||||||
// 添加列头
|
// 添加列头
|
||||||
let title = '统计时间,'
|
let title = '统计时间,'
|
||||||
@@ -722,16 +783,19 @@ const handleExport = async () => {
|
|||||||
let csv = ''
|
let csv = ''
|
||||||
csv = title
|
csv = title
|
||||||
// 遍历数据并添加到CSV字符串中
|
// 遍历数据并添加到CSV字符串中
|
||||||
list[0].data.map((vv: any, indexs: any) => {
|
list[0]?.data.map((vv: any, indexs: any) => {
|
||||||
let strs = '',
|
let strs = '',
|
||||||
count = null
|
count = null
|
||||||
list.map((item: any, index: any) => {
|
list.map((item: any, index: any) => {
|
||||||
if (index == 0) {
|
if (index == 0) {
|
||||||
count = index
|
count = index
|
||||||
}
|
}
|
||||||
|
// console.log( list[index].data[indexs][list[index].data[indexs]], indexs,"88888888888888");
|
||||||
|
console.log(list[index].data[indexs],"iiiiii");
|
||||||
|
let itemList:any=list[index].data[indexs]
|
||||||
index == list.length - 1
|
index == list.length - 1
|
||||||
? (strs += list[index].data[indexs])
|
? (strs += itemList[0])
|
||||||
: (strs += list[index].data[indexs] + ',')
|
: (strs += itemList[0] + ',')
|
||||||
})
|
})
|
||||||
if (count == 0 && xAxis[indexs]) {
|
if (count == 0 && xAxis[indexs]) {
|
||||||
csv += `${xAxis[indexs]},` + strs + '\n'
|
csv += `${xAxis[indexs]},` + strs + '\n'
|
||||||
@@ -797,7 +861,7 @@ watch(
|
|||||||
() => searchForm.value.index,
|
() => searchForm.value.index,
|
||||||
(val: any, oldval: any) => {
|
(val: any, oldval: any) => {
|
||||||
if (val) {
|
if (val) {
|
||||||
let list = [val]
|
let list = val
|
||||||
// formatCountOptions(list)
|
// formatCountOptions(list)
|
||||||
// if (val == 0) {
|
// if (val == 0) {
|
||||||
// countData.value = []
|
// countData.value = []
|
||||||
@@ -894,8 +958,7 @@ onMounted(() => {
|
|||||||
width: 95%;
|
width: 95%;
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: flex-start;
|
justify-content: flex-start;
|
||||||
|
overflow-x: auto;
|
||||||
// overflow-x: auto;
|
|
||||||
// height: 45px;
|
// height: 45px;
|
||||||
// padding-top: 18px;
|
// padding-top: 18px;
|
||||||
// flex-wrap: wrap;
|
// flex-wrap: wrap;
|
||||||
@@ -921,7 +984,7 @@ onMounted(() => {
|
|||||||
|
|
||||||
.history_chart {
|
.history_chart {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
min-height: calc(100vh - 680px) !important;
|
height: calc(100vh - 440px) !important;
|
||||||
flex: 1;
|
flex: 1;
|
||||||
margin-top: 10px;
|
margin-top: 10px;
|
||||||
}
|
}
|
||||||
@@ -929,4 +992,9 @@ onMounted(() => {
|
|||||||
::v-deep .el-select {
|
::v-deep .el-select {
|
||||||
width: 120px !important;
|
width: 120px !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
::v-deep .el-collapse-item__header{
|
||||||
|
font-size: 16px !important;
|
||||||
|
font-weight: 800 !important;
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
Reference in New Issue
Block a user