@@ -161,6 +191,7 @@ import { getTestRecordInfo, getHistoryTrend } from '@/api/cs-device-boot/planDat
import { useDictData } from '@/stores/dictData'
import { queryStatistical } from '@/api/system-boot/csstatisticalset'
import { TrendCharts, Plus, Platform } from '@element-plus/icons-vue'
+import { yMethod } from '@/utils/echartMethod'
const dictData = useDictData()
defineOptions({
name: 'govern/device/planData/index'
@@ -225,7 +256,7 @@ const chartTitle: any = ref('')
const handleClickTabs = async () => {
historyDevId.value = activeName.value
schemeTreeRef.value.setCheckedNode(activeName.value)
- await init()
+ await init(true)
}
const nodeClick = async (e: anyObj) => {
loading.value = true
@@ -249,7 +280,7 @@ const nodeClick = async (e: anyObj) => {
})
}
schemeTreeRef.value.getPlanData(deviceData.value)
- init()
+ init(true)
loading.value = false
})
.catch(e => {
@@ -309,10 +340,10 @@ const filterArray = (array: any) => {
})
return newArray
}
-const init = () => {
+const init = (flag: boolean) => {
//调用子组件的方法切换的时候tree的节点也变化
let list: any = []
- loading.value = true
+
//颜色数组
const colorList = [
'#DAA521',
@@ -329,7 +360,6 @@ const init = () => {
'cadetblue'
]
if (historyDevId.value && legendDictList.value && legendDictList.value.selectedList) {
- console.log('where')
// 选择指标的时候切换legend内容和data数据
legendDictList.value?.selectedList?.map((item: any) => {
// if (item.dataType == searchForm.value.index) {
@@ -384,305 +414,281 @@ const init = () => {
valueType: searchForm.value.type
}
- getHistoryTrend(obj)
- .then((res: any) => {
- if (res.code === 'A0000') {
- console.log('this')
- historyDataList.value = res.data
- let chartsList = JSON.parse(JSON.stringify(res.data))
- echartsData.value = null
- //icon图标替换legend图例
- const iconThree =
- 'path://M512 85.333333c235.637333 0 426.666667 191.029333 426.666667 426.666667S747.637333 938.666667 512 938.666667 85.333333 747.637333 85.333333 512 276.362667 85.333333 512 85.333333z m214.592 318.677334a32 32 0 0 0-45.248 0.064L544.736 541.066667l-81.792-89.109334a32 32 0 0 0-46.613333-0.576l-119.36 123.733334a32 32 0 1 0 46.058666 44.437333l95.754667-99.264 81.418667 88.704a32 32 0 0 0 46.24 0.96l160.213333-160.693333a32 32 0 0 0-0.064-45.248z'
- let xAxis: any = [],
- timeList: any = [],
- unitList: any = []
- chartsList.map((item: any) => {
- timeList.push(item.time)
- if (unitList.indexOf(item.unit) == -1) {
- unitList.push(item.unit)
- }
- })
- xAxis = timeList.sort((a: any, b: any) => {
- return new Date(a).getTime() - new Date(b).getTime()
- })
- echartsData.value = {
- options: {
- title: [
- {
- left: '10%',
- top: 0
- // text: chartTitle.value
- }
- ],
- toolbox: {
- feature: {
- saveAsImage: {
- title: '保存'
- }
- // dataView: { readOnly: false },
- // }
- }
- },
- // tooltip: {
- // trigger: 'axis',
- // axisPointer: {
- // type: 'shadow'
- // },
- // formatter: function (params: any) {
- // var res = params[0].name + '
'
- // 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 +
- // ' ' +
- // `
` +
- // `
${params[i].value} ${params[i].unit}
`
- // }
- // return res
- // }
- // },
- legend: {
- //legend使用iconfont图标
- data: [],
- itemWidth: 20,
- itemHeight: 10,
- itemGap: 15,
- type: 'scroll', // 开启滚动分页
- // orient: 'vertical', // 垂直排列
- right: '3%', // 位置调整
- top: 5,
- bottom: 20,
- width: 400,
- height: 50
- },
- tooltip: {
- trigger: 'axis',
- textStyle: {
- color: '#fff',
- fontStyle: 'normal',
- opacity: 0.35,
- fontSize: 14
- },
- backgroundColor: 'rgba(0,0,0,0.35)',
- borderWidth: 0,
- axisPointer: {
- type: 'cross',
- crossStyle: {
- color: '#999'
- }
- },
-
- formatter: function (params: any) {
- let list = params.filter((item, index, self) => {
- return index === self.findIndex((t) => t.seriesName === item.seriesName);
- })
- console.log("🚀 ~ .then ~ list:", list)
- var res = list[0].name + '
'
- for (var i = 0, l = list.length; i < l; i++) {
- list[i].unit =
- echartsData.value.options.yAxis[
- echartsData.value.options.series[list[i].seriesIndex].yAxisIndex
- ]?.name
- res +=
- list[i].seriesName +
- ' ' +
- `
` +
- `
${list[i].value}
`
- }
- return res
- }
- },
- // grid: {
- // left: chartsList.length != 0 ? '5%' : '1%',
- // right: '5%',
- // bottom: '10%',
- // top: '8%',
- // containLabel: true
- // },
- // xAxis: [
- // {
- // type: 'time', //category
- // name: '\n\n\n\n\n时间',
- // axisLabel: {
- // color: '#A9AEB2',
- // fontSize: 12,
- // show: function (index: any, value: any) {
- // // 检查数据中是否存在这个时间点
- // // return data.some(item:any => item[0] === value)
- // },
- // formatter: {
- // day: '{MM}-{d}'
- // }
- // },
- // nameTextStyle: {
- // right: 0
- // },
- // data: Array.from(new Set(xAxis)),
- // axisLine: {
- // lineStyle: {
- // color: '#43485E'
- // }
- // }
- // }
- // ],
- xAxis: {
- type: 'time',
- axisLabel: {
- formatter: {
- day: '{MM}-{dd}',
-
- }
- }
- },
- yAxis: [
- {
- type: 'value',
- name: unitList[0],
- axisLabel: {
- color: '#000',
- fontSize: 14
- },
- axisTick: {
- show: true
- },
- axisLine: {
- show: true,
- lineStyle: {
- // color: colorList[0]
- }
- },
- nameTextStyle: {
- color: '#000',
- fontSize: '14'
- },
- splitLine: {
- show: false,
- lineStyle: {
- color: ['#43485E'],
- width: 1,
- type: 'solid'
- }
- }
- }
- ],
- series: []
- }
- }
- //处理多y轴
- if (unitList.length != 0 && unitList.length > 1) {
- // echartsData.value.options.yAxis[0].yAxisIndex = 0
- unitList.map((item: any, index: any) => {
- if (index != unitList.length - 1) {
- echartsData.value.options.yAxis.push({
- type: 'value',
- position: 'right',
- offset: index * 80, // y轴位置的偏移量
- name: unitList[index + 1],
- axisLabel: {
- color: '#000',
- fontSize: 14
- },
- axisTick: {
- show: true
- },
- axisLine: {
- show: true,
- lineStyle: {
- // color: colorList[index + 1]
- }
- },
- nameTextStyle: {
- color: '#000',
- fontSize: '14'
- },
- splitLine: {
- show: false,
- lineStyle: {
- color: ['#43485E'],
- width: 1,
- type: 'solid'
- }
- }
- // yAxisIndex: index + 1
- })
+ if (flag) {
+ loading.value = true
+ getHistoryTrend(obj)
+ .then((res: any) => {
+ if (res.code === 'A0000') {
+ historyDataList.value = res.data
+ let chartsList = JSON.parse(JSON.stringify(res.data))
+ echartsData.value = null
+ //icon图标替换legend图例
+ const iconThree =
+ 'path://M512 85.333333c235.637333 0 426.666667 191.029333 426.666667 426.666667S747.637333 938.666667 512 938.666667 85.333333 747.637333 85.333333 512 276.362667 85.333333 512 85.333333z m214.592 318.677334a32 32 0 0 0-45.248 0.064L544.736 541.066667l-81.792-89.109334a32 32 0 0 0-46.613333-0.576l-119.36 123.733334a32 32 0 1 0 46.058666 44.437333l95.754667-99.264 81.418667 88.704a32 32 0 0 0 46.24 0.96l160.213333-160.693333a32 32 0 0 0-0.064-45.248z'
+ let xAxis: any = [],
+ timeList: any = [],
+ unitList: any = []
+ chartsList.map((item: any) => {
+ timeList.push(item.time)
+ if (unitList.indexOf(item.unit) == -1) {
+ unitList.push(item.unit)
}
})
- }
- echartsData.value.options.legend.data = []
- console.log(list, '988888888888606')
- list.map((item: any, index: any) => {
- item.map((vv: any, indexs: any) => {
- //处理legend
- if (chartsList.length != 0) {
- echartsData.value.options.legend.data.push({
- name: vv.phase + '相' + vv.showName,
- icon: iconThree
- })
- }
- console.log(echartsData.value.options.legend.data, 'legend-legend-legend')
- if (
- unitList.findIndex((item: any) => {
- return item == vv.unit
- }) != -1
- ) {
- vv.yAxisIndex = unitList.findIndex((item: any) => {
- return item == vv.unit
- })
- } else {
- vv.yAxisIndex = 0
- }
- echartsData.value.options.series.push({
- name: vv.phase + '相' + vv.showName,
- type: 'line',
- smooth: true,
- symbol: 'none',
- emphasis: {
- focus: 'series'
- },
- itemStyle: {},
- //数据
- data: filterArray(
+ xAxis = timeList.sort((a: any, b: any) => {
+ return new Date(a).getTime() - new Date(b).getTime()
+ })
+ let [min, max] = [0, 0]
+ list.map((item: any, index: any) => {
+ item.map((vv: any, indexs: any) => {
+ ;[min, max] = yMethod(
chartsList
.map((kk: any, kks: any) => {
if (kk.statisticalName == vv.name) {
- // console.log([xAxis[kks],kk.statisticalData],"========>>>>>>>");
- return Array.from(new Set([xAxis[kks], kk.statisticalData]))
+ return kk.statisticalData
} else {
return ''
}
})
.filter((kk: any) => kk !== '')
- ),
- //数据对应的y轴
- // yAxisIndex:0,
- yAxisIndex: vv.yAxisIndex
+ )
+ item.min = min
+ item.max = max
})
- // console.log("🚀 ~ item.map ~ vv.phase + '相' + vv.showName:", vv.phase + '相' + vv.showName)
})
- })
- //设置数据项颜色
- echartsData.value.options.series.map((item: any, index: any) => {
- item.itemStyle = {
- normal: {
- color: colorList[index],
- lineStyle: {
- color: colorList[index]
- }
+ console.log(list, '00000000000000')
+ echartsData.value = {
+ options: {
+ title: [
+ {
+ left: '10%',
+ top: 0
+ // text: chartTitle.value
+ }
+ ],
+ toolbox: {
+ feature: {
+ // saveAsImage: {
+ // title: '保存'
+ // }
+ // dataView: { readOnly: false },
+ // }
+ }
+ },
+ legend: {
+ //legend使用iconfont图标
+ data: [],
+ itemWidth: 20,
+ itemHeight: 10,
+ itemGap: 15,
+ type: 'scroll', // 开启滚动分页
+ // orient: 'vertical', // 垂直排列
+ right: '15%', // 位置调整
+ top: 5,
+ bottom: 30,
+ width: 400,
+ height: 50
+ },
+ tooltip: {
+ trigger: 'axis',
+ textStyle: {
+ color: '#fff',
+ fontStyle: 'normal',
+ opacity: 0.35,
+ fontSize: 14
+ },
+ backgroundColor: 'rgba(0,0,0,0.35)',
+ borderWidth: 0,
+ axisPointer: {
+ type: 'cross',
+ crossStyle: {
+ color: '#999'
+ }
+ },
+
+ formatter: function (params: any) {
+ let list = params.filter((item, index, self) => {
+ return index === self.findIndex(t => t.seriesName === item.seriesName)
+ })
+ var res =
+ '
' +
+ list[0].value[0] +
+ list[0].name +
+ '
'
+ for (var i = 0, l = list.length; i < l; i++) {
+ list[i].unit =
+ echartsData.value.options.yAxis[
+ echartsData.value.options.series[list[i].seriesIndex].yAxisIndex
+ ]?.name
+ res +=
+ list[i].seriesName +
+ ' ' +
+ `
` +
+ `
${list[i].value[1].toFixed(
+ 2
+ )}
`
+ }
+ return res
+ }
+ },
+ xAxis: {
+ type: 'time',
+ axisLabel: {
+ formatter: {
+ day: '{MM}-{dd}'
+ }
+ }
+ },
+ yAxis: [
+ {
+ type: 'value',
+ name: unitList[0],
+ axisLabel: {
+ color: '#000',
+ fontSize: 14
+ },
+ axisTick: {
+ show: true
+ },
+
+ max: list[0].max,
+ min: list[0].min,
+ axisLine: {
+ show: true,
+ lineStyle: {
+ // color: colorList[0]
+ }
+ },
+ nameTextStyle: {
+ color: '#000',
+ fontSize: '14'
+ },
+ splitLine: {
+ show: false,
+ lineStyle: {
+ color: ['#43485E'],
+ width: 1,
+ type: 'solid'
+ }
+ },
+ splitNumber: 5,
+ minInterval: 1
+ }
+ ],
+ series: []
}
}
- // item.data = filterArray(item.data)
- })
+
+ echartsData.value.options.legend.data = []
+ list.map((item: any, index: any) => {
+ item.map((vv: any, indexs: any) => {
+ //处理legend
+ if (chartsList.length != 0) {
+ echartsData.value.options.legend.data.push({
+ name: vv.phase + '相' + vv.showName,
+ icon: iconThree
+ })
+ }
+ if (
+ unitList.findIndex((item: any) => {
+ return item == vv.unit
+ }) != -1
+ ) {
+ vv.yAxisIndex = unitList.findIndex((item: any) => {
+ return item == vv.unit
+ })
+ } else {
+ vv.yAxisIndex = 0
+ }
+
+ echartsData.value.options.series.push({
+ name: vv.phase + '相' + vv.showName,
+ type: 'line',
+ smooth: true,
+ symbol: 'none',
+ emphasis: {
+ focus: 'series'
+ },
+ itemStyle: {},
+ //数据
+ data: filterArray(
+ chartsList
+ .map((kk: any, kks: any) => {
+ if (kk.statisticalName == vv.name) {
+ return Array.from(new Set([xAxis[kks], kk.statisticalData]))
+ } else {
+ return ''
+ }
+ })
+ .filter((kk: any) => kk !== '')
+ ),
+ //数据对应的y轴
+ // yAxisIndex:0,
+ yAxisIndex: vv.yAxisIndex
+ })
+ })
+ })
+ //处理多y轴
+ if (unitList.length != 0 && unitList.length > 1) {
+ console.log(max, min)
+ // echartsData.value.options.yAxis[0].yAxisIndex = 0
+ unitList.map((item: any, index: any) => {
+ if (index != unitList.length - 1) {
+ echartsData.value.options.yAxis.push({
+ type: 'value',
+ position: 'right',
+ offset: index * 80, // y轴位置的偏移量
+ name: unitList[index + 1],
+ axisLabel: {
+ color: '#000',
+ fontSize: 14
+ },
+ axisTick: {
+ show: true
+ },
+ axisLine: {
+ show: true,
+ lineStyle: {
+ // color: colorList[index + 1]
+ }
+ },
+ nameTextStyle: {
+ color: '#000',
+ fontSize: '14'
+ },
+ max: list[index + 1].max,
+ min: list[index + 1].min,
+ splitLine: {
+ show: false,
+ lineStyle: {
+ color: ['#43485E'],
+ width: 1,
+ type: 'solid'
+ }
+ }
+ // yAxisIndex: index + 1
+ })
+ }
+ })
+ }
+ //设置数据项颜色
+ echartsData.value.options.series.map((item: any, index: any) => {
+ item.itemStyle = {
+ normal: {
+ color: colorList[index],
+ lineStyle: {
+ color: colorList[index]
+ }
+ }
+ }
+ // item.data = filterArray(item.data)
+ })
+ loading.value = false
+ }
+ })
+ .catch(error => {
loading.value = false
- console.log(echartsData.value.options.series, '++++++++++++++++++++669', echartsData.value)
- }
- })
- .catch(error => {
- loading.value = false
- })
+ })
+ }
}
}
//导出
@@ -740,7 +746,6 @@ const handleExport = async () => {
}
if (historyDataList.value.length != 0) {
- console.log(historyDataList.value, 'historyDataList')
let xAxis: any = []
let timeList: any = []
historyDataList.value.map((item: any) => {
@@ -756,7 +761,6 @@ const handleExport = async () => {
csv = convertToCSV([], [])
chartsCsv.value = csv
// 如果你想提供下载链接
- console.log(list, '745745745745')
function convertToCSV(data: any, key: any) {
// 添加列头
let title = '统计时间,'
@@ -773,15 +777,13 @@ const handleExport = async () => {
if (index == 0) {
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
- ? (strs += itemList[0])
- : (strs += itemList[0] + ',')
+ index == list.length - 1 ? (strs += itemList[0]) : (strs += itemList[0] + ',')
})
if (count == 0 && xAxis[indexs]) {
csv += `${xAxis[indexs]},` + strs + '\n'
+ } else {
+ strs += '/,'
}
})
return csv
@@ -858,7 +860,7 @@ watch(
countData.value.splice(key, 1)
}
})
- init()
+ init(false)
}
},
{
@@ -867,10 +869,8 @@ watch(
}
)
onMounted(() => {
- loading.value = true
setTimeout(() => {
- init()
- loading.value = false
+ init(true)
}, 1500)
})