From a5eec77bda16ee2cc09944e81c424ce74e014296 Mon Sep 17 00:00:00 2001
From: GGJ <357021191@qq.com>
Date: Mon, 30 Sep 2024 11:47:25 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E5=8E=86=E5=8F=B2=E8=B6=8B?=
=?UTF-8?q?=E5=8A=BF=E6=95=B0=E6=8D=AE=E7=BB=84=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
.../govern/device/control/tabs/trend.vue | 141 ++++++++++--------
1 file changed, 81 insertions(+), 60 deletions(-)
diff --git a/src/views/govern/device/control/tabs/trend.vue b/src/views/govern/device/control/tabs/trend.vue
index 4ec2dd4..1542a07 100644
--- a/src/views/govern/device/control/tabs/trend.vue
+++ b/src/views/govern/device/control/tabs/trend.vue
@@ -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 + '
'
- // // 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
- // // }
- // },
+ 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)} ${list[i].unit||''}
`
+ }
+ 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',
@@ -385,6 +403,7 @@ const init = async () => {
} else {
vv.yAxisIndex = 0
}
+
//series数据
echartsData.value.options.series.push({
@@ -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 })