修改历史趋势数据组件
This commit is contained in:
@@ -59,6 +59,7 @@ import Table from '@/components/table/index.vue'
|
|||||||
import TableHeader from '@/components/table/header/index.vue'
|
import TableHeader from '@/components/table/header/index.vue'
|
||||||
import { getTabsDataByType } from '@/api/cs-device-boot/EquipmentDelivery'
|
import { getTabsDataByType } from '@/api/cs-device-boot/EquipmentDelivery'
|
||||||
import DatePicker from '@/components/form/datePicker/index.vue'
|
import DatePicker from '@/components/form/datePicker/index.vue'
|
||||||
|
import { color, gradeColor3 } from '@/components/echarts/color'
|
||||||
const dictData = useDictData()
|
const dictData = useDictData()
|
||||||
defineOptions({
|
defineOptions({
|
||||||
name: 'govern/device/control'
|
name: 'govern/device/control'
|
||||||
@@ -147,20 +148,7 @@ const init = async () => {
|
|||||||
})
|
})
|
||||||
|
|
||||||
//颜色数组
|
//颜色数组
|
||||||
const colorList = [
|
const colorList = color
|
||||||
'#DAA521',
|
|
||||||
'#A5292A',
|
|
||||||
'aqua',
|
|
||||||
'#d81e06',
|
|
||||||
'#2E8B58',
|
|
||||||
'coral',
|
|
||||||
'#012B6A',
|
|
||||||
'brown',
|
|
||||||
'#70B601',
|
|
||||||
'blueviolet',
|
|
||||||
'#1DD0CE',
|
|
||||||
'cadetblue'
|
|
||||||
]
|
|
||||||
//选择的指标使用方法处理
|
//选择的指标使用方法处理
|
||||||
initSearchFormIndexAndCount(searchForm.value.index)
|
initSearchFormIndexAndCount(searchForm.value.index)
|
||||||
//查询历史趋势
|
//查询历史趋势
|
||||||
@@ -232,27 +220,49 @@ const init = async () => {
|
|||||||
// }
|
// }
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
// tooltip: {
|
tooltip: {
|
||||||
// trigger: 'axis',
|
trigger: 'axis',
|
||||||
// // axisPointer: {
|
textStyle: {
|
||||||
// // type: 'shadow'
|
color: '#fff',
|
||||||
// // },
|
fontStyle: 'normal',
|
||||||
// // formatter: function (params: any) {
|
opacity: 0.35,
|
||||||
// // var res = params[0].name + '<br/>'
|
fontSize: 14
|
||||||
// // for (var i = 0, l = params.length; i < l; i++) {
|
},
|
||||||
// // params[i].unit =
|
backgroundColor: 'rgba(0,0,0,0.35)',
|
||||||
// // echartsData.value.options.yAxis[
|
borderWidth: 0,
|
||||||
// // echartsData.value.options.series[params[i].seriesIndex].yAxisIndex
|
axisPointer: {
|
||||||
// // ]?.name
|
type: 'cross',
|
||||||
// // res +=
|
crossStyle: {
|
||||||
// // params[i].seriesName +
|
color: '#999'
|
||||||
// // ' ' +
|
}
|
||||||
// // `<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/>`
|
|
||||||
// // }
|
formatter: function (params: any) {
|
||||||
// // return res
|
let list = params.filter((item, index, self) => {
|
||||||
// // }
|
return index === self.findIndex(t => t.seriesName === item.seriesName)
|
||||||
// },
|
})
|
||||||
|
var res =
|
||||||
|
'<span style="margin-right:18px;"></span>' +
|
||||||
|
list[0].value[0] +
|
||||||
|
list[0].name +
|
||||||
|
'<br/>'
|
||||||
|
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 +
|
||||||
|
' ' +
|
||||||
|
`<div style="width:16px;height:16px;float:left;background:${list[i].color};border-radius:50%;margin:0 15px"></div>` +
|
||||||
|
`<div style='float:right;padding-left:20px;'>${list[
|
||||||
|
i
|
||||||
|
].value[1].toFixed(2)} ${list[i].unit||''} </div><br/>`
|
||||||
|
}
|
||||||
|
return res
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
legend: {
|
legend: {
|
||||||
//legend使用iconfont图标
|
//legend使用iconfont图标
|
||||||
data: [],
|
data: [],
|
||||||
@@ -268,29 +278,37 @@ const init = async () => {
|
|||||||
height: 50
|
height: 50
|
||||||
},
|
},
|
||||||
|
|
||||||
xAxis: [
|
xAxis:{
|
||||||
{
|
type: 'time',
|
||||||
type: 'category',
|
|
||||||
name: '时间',
|
|
||||||
axisLabel: {
|
axisLabel: {
|
||||||
color: '#A9AEB2',
|
formatter: {
|
||||||
fontSize: 12,
|
day: '{MM}-{dd}',
|
||||||
show: function (index: any, value: any) {
|
|
||||||
// 检查数据中是否存在这个时间点
|
|
||||||
// return data.some(item:any => item[0] === value)
|
|
||||||
}
|
}
|
||||||
},
|
},},
|
||||||
nameTextStyle: {
|
// [
|
||||||
right: 0
|
// {
|
||||||
},
|
// type: 'category',
|
||||||
data: Array.from(new Set(xAxis)),
|
// name: '时间',
|
||||||
axisLine: {
|
// axisLabel: {
|
||||||
lineStyle: {
|
// color: '#A9AEB2',
|
||||||
color: '#43485E'
|
// fontSize: 12,
|
||||||
}
|
// show: function (index: any, value: any) {
|
||||||
}
|
// // 检查数据中是否存在这个时间点
|
||||||
}
|
// // return data.some(item:any => item[0] === value)
|
||||||
],
|
// }
|
||||||
|
// },
|
||||||
|
// nameTextStyle: {
|
||||||
|
// right: 0
|
||||||
|
// },
|
||||||
|
// data: Array.from(new Set(xAxis)),
|
||||||
|
// axisLine: {
|
||||||
|
// lineStyle: {
|
||||||
|
// color: '#43485E'
|
||||||
|
// }
|
||||||
|
// }
|
||||||
|
// }
|
||||||
|
// ],
|
||||||
yAxis: [
|
yAxis: [
|
||||||
{
|
{
|
||||||
type: 'value',
|
type: 'value',
|
||||||
@@ -386,6 +404,7 @@ const init = async () => {
|
|||||||
vv.yAxisIndex = 0
|
vv.yAxisIndex = 0
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
//series数据
|
//series数据
|
||||||
echartsData.value.options.series.push({
|
echartsData.value.options.series.push({
|
||||||
name: vv.phase + '相' + vv.showName,
|
name: vv.phase + '相' + vv.showName,
|
||||||
@@ -400,7 +419,8 @@ const init = async () => {
|
|||||||
data: historyDataList.value
|
data: historyDataList.value
|
||||||
.map((kk: any) => {
|
.map((kk: any) => {
|
||||||
if (kk.statisticalName == vv.name) {
|
if (kk.statisticalName == vv.name) {
|
||||||
return kk.statisticalData
|
|
||||||
|
return [kk.time, kk.statisticalData]
|
||||||
} else {
|
} else {
|
||||||
return ''
|
return ''
|
||||||
}
|
}
|
||||||
@@ -435,7 +455,6 @@ const init = async () => {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
const selectChange = (flag: boolean) => {
|
const selectChange = (flag: boolean) => {
|
||||||
console.log("🚀 ~ selectChange ~ flag:", flag)
|
|
||||||
if (flag) {
|
if (flag) {
|
||||||
pageHeight.value = mainHeight(345)
|
pageHeight.value = mainHeight(345)
|
||||||
} else {
|
} else {
|
||||||
@@ -653,7 +672,9 @@ watch(
|
|||||||
// immediate: true
|
// immediate: true
|
||||||
// }
|
// }
|
||||||
// )
|
// )
|
||||||
onMounted(() => { })
|
onMounted(() => {
|
||||||
|
datePickerRef.value.setInterval(5)
|
||||||
|
})
|
||||||
defineExpose({ getTrendRequest })
|
defineExpose({ getTrendRequest })
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user