修改历史趋势数据组件
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 { getTabsDataByType } from '@/api/cs-device-boot/EquipmentDelivery'
|
||||
import DatePicker from '@/components/form/datePicker/index.vue'
|
||||
import { color, gradeColor3 } from '@/components/echarts/color'
|
||||
const dictData = useDictData()
|
||||
defineOptions({
|
||||
name: 'govern/device/control'
|
||||
@@ -147,20 +148,7 @@ const init = async () => {
|
||||
})
|
||||
|
||||
//颜色数组
|
||||
const colorList = [
|
||||
'#DAA521',
|
||||
'#A5292A',
|
||||
'aqua',
|
||||
'#d81e06',
|
||||
'#2E8B58',
|
||||
'coral',
|
||||
'#012B6A',
|
||||
'brown',
|
||||
'#70B601',
|
||||
'blueviolet',
|
||||
'#1DD0CE',
|
||||
'cadetblue'
|
||||
]
|
||||
const colorList = color
|
||||
//选择的指标使用方法处理
|
||||
initSearchFormIndexAndCount(searchForm.value.index)
|
||||
//查询历史趋势
|
||||
@@ -232,27 +220,49 @@ const init = async () => {
|
||||
// }
|
||||
}
|
||||
},
|
||||
// tooltip: {
|
||||
// trigger: 'axis',
|
||||
// // axisPointer: {
|
||||
// // type: 'shadow'
|
||||
// // },
|
||||
// // 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
|
||||
// // }
|
||||
// },
|
||||
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 =
|
||||
'<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使用iconfont图标
|
||||
data: [],
|
||||
@@ -268,29 +278,37 @@ const init = async () => {
|
||||
height: 50
|
||||
},
|
||||
|
||||
xAxis: [
|
||||
{
|
||||
type: 'category',
|
||||
name: '时间',
|
||||
axisLabel: {
|
||||
color: '#A9AEB2',
|
||||
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'
|
||||
}
|
||||
}
|
||||
xAxis:{
|
||||
type: 'time',
|
||||
axisLabel: {
|
||||
formatter: {
|
||||
day: '{MM}-{dd}',
|
||||
|
||||
}
|
||||
],
|
||||
},},
|
||||
// [
|
||||
// {
|
||||
// type: 'category',
|
||||
// name: '时间',
|
||||
// axisLabel: {
|
||||
// color: '#A9AEB2',
|
||||
// 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: [
|
||||
{
|
||||
type: 'value',
|
||||
@@ -386,6 +404,7 @@ const init = async () => {
|
||||
vv.yAxisIndex = 0
|
||||
}
|
||||
|
||||
|
||||
//series数据
|
||||
echartsData.value.options.series.push({
|
||||
name: vv.phase + '相' + vv.showName,
|
||||
@@ -400,7 +419,8 @@ const init = async () => {
|
||||
data: historyDataList.value
|
||||
.map((kk: any) => {
|
||||
if (kk.statisticalName == vv.name) {
|
||||
return kk.statisticalData
|
||||
|
||||
return [kk.time, kk.statisticalData]
|
||||
} else {
|
||||
return ''
|
||||
}
|
||||
@@ -435,7 +455,6 @@ const init = async () => {
|
||||
}
|
||||
}
|
||||
const selectChange = (flag: boolean) => {
|
||||
console.log("🚀 ~ selectChange ~ flag:", flag)
|
||||
if (flag) {
|
||||
pageHeight.value = mainHeight(345)
|
||||
} else {
|
||||
@@ -653,7 +672,9 @@ watch(
|
||||
// immediate: true
|
||||
// }
|
||||
// )
|
||||
onMounted(() => { })
|
||||
onMounted(() => {
|
||||
datePickerRef.value.setInterval(5)
|
||||
})
|
||||
defineExpose({ getTrendRequest })
|
||||
</script>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user