1215 lines
32 KiB
Vue
1215 lines
32 KiB
Vue
<template>
|
||
<a-row class="indexCentralAll">
|
||
<a-col :span="24" class="indexTitle">
|
||
|
||
</a-col>
|
||
<a-col :span="7" class="divLeft">
|
||
<a-row>
|
||
<a-col :span="24" class="left1">
|
||
<div class="gsmcClass">
|
||
<span class="left-to-right" style="margin-left: 15px;">{{companyName}}</span>
|
||
</div>
|
||
</a-col>
|
||
<a-col :span="24" class="left2">
|
||
<div class="glfslClass">
|
||
<span style="margin-left:12px;font-size:12px;">
|
||
<span v-for="(item,index) in heatsource" :key="index" :class="`glf-to-right ${glfCount==index?'glfSelect':''}`" @click="handleCheckGlf(item)">{{item.sourceName}};<br v-if="index==1"/></span>
|
||
</span>
|
||
</div>
|
||
</a-col>
|
||
<a-col :span="24" class="left3">
|
||
<div class="glfsllClass" style="padding-top:6px;">
|
||
<span style="margin-left: 7vh;font-size:16px;" class="left-to-right">锅炉房水流量</span>
|
||
<div class="staticOne">
|
||
</div>
|
||
</div>
|
||
</a-col>
|
||
</a-row>
|
||
</a-col>
|
||
<a-col :span="10" class="divCenter">
|
||
<a-row style="margin-top: 8vh;">
|
||
<a-col :span="24" class="center1">
|
||
<div class="glfghswdClass" style="padding-top:6px;">
|
||
<span style="margin-left: 8vh;font-size:16px;" class="left-to-right">锅炉房供回水温度</span>
|
||
<div class="staticTwo">
|
||
</div>
|
||
</div>
|
||
</a-col>
|
||
<a-col :span="24" class="center2">
|
||
<div class="glfghsylClass" style="padding-top:6px;">
|
||
<span style="margin-left: 8vh;font-size:16px;" class="left-to-right">锅炉房供回水压力</span>
|
||
<div class="staticThree">
|
||
</div>
|
||
</div>
|
||
</a-col>
|
||
</a-row>
|
||
|
||
</a-col>
|
||
<a-col :span="7" class="divRight">
|
||
<a-row>
|
||
<a-col :span="24" class="right1">
|
||
<div class="glfrlClass" style="padding-top:6px;">
|
||
<span style="margin-left: 7vh;font-size:16px;" class="left-to-right">锅炉房热量</span>
|
||
<div class="staticFour">
|
||
</div>
|
||
</div>
|
||
</a-col>
|
||
<a-col :span="24" class="right2">
|
||
<div class="glfrlClass" style="padding-top:6px;">
|
||
<span style="margin-left: 7vh;font-size:16px;" class="left-to-right">锅炉房累积热量</span>
|
||
<div class="staticFive">
|
||
</div>
|
||
</div>
|
||
</a-col>
|
||
<a-col :span="24" class="right3">
|
||
<div class="glfrlClass" style="padding-top:6px;">
|
||
<span style="margin-left: 7vh;font-size:16px;" class="left-to-right">锅炉房累积水流量</span>
|
||
<div class="staticSix">
|
||
</div>
|
||
</div>
|
||
</a-col>
|
||
</a-row>
|
||
</a-col>
|
||
|
||
</a-row>
|
||
<a-modal title="切换锅炉房" :visible="visible" @ok="handleOk"
|
||
:okButtonProps="{ class: { 'jee-hidden': disableSubmit } }" @cancel="handleCancel" cancelText="关闭">
|
||
<a-row>
|
||
<a-col :span="24" style="height: 130px;line-height: 130px;text-align: center;">
|
||
锅炉房：
|
||
<a-select v-model:value="sourceId" style="width: 200px;">
|
||
<template v-for="item in heatsource" :key="`${item.sourceId}`">
|
||
<a-select-option :value="item.sourceId">{{ item.sourceName }}</a-select-option>
|
||
</template>
|
||
</a-select>
|
||
</a-col>
|
||
</a-row>
|
||
</a-modal>
|
||
|
||
</template>
|
||
|
||
<script lang="ts" setup>
|
||
import { ref, onMounted, nextTick, onUnmounted,onBeforeUnmount } from 'vue';
|
||
import * as echarts from 'echarts';
|
||
import { heatsourcelist } from "@/views/base/simconfig/Simconfig.api";
|
||
|
||
import { useUserStore } from '/@/store/modules/user';
|
||
import { defHttp } from '/@/utils/http/axios';
|
||
import dayjs from 'dayjs';
|
||
const { userInfo } = useUserStore();
|
||
|
||
const heatsource = ref();
|
||
const sourceId = ref<string>('');
|
||
const companyName = ref<string>('');
|
||
const glfCount = ref<number>(0);
|
||
const disableSubmit = ref<boolean>(false);
|
||
const visible = ref<boolean>(false);
|
||
const dataList = ref<any>([]);
|
||
|
||
let chartOne: echarts.ECharts | null = null;
|
||
let chartTwo: echarts.ECharts | null = null;
|
||
let chartThree: echarts.ECharts | null = null;
|
||
let chartFour: echarts.ECharts | null = null;
|
||
let chartFive: echarts.ECharts | null = null;
|
||
let chartSix: echarts.ECharts | null = null;
|
||
|
||
function getStaticOne(){
|
||
var names = [];
|
||
var dataSource = [];
|
||
for(var i=0;i<dataList.value.length;i++){
|
||
names.push(dataList.value[i].datatime);
|
||
dataSource.push({value:dataList.value[i].view037});
|
||
}
|
||
const staticParam = document.querySelector('.staticOne') as HTMLElement;
|
||
chartOne = echarts.init(staticParam);
|
||
chartOne.setOption({
|
||
xAxis: {
|
||
type: 'category',
|
||
data: names,
|
||
axisLine: {
|
||
lineStyle: {
|
||
color: 'rgba(255, 255, 255, 0.6)'
|
||
}
|
||
},
|
||
axisLabel: {
|
||
color: 'rgba(255, 255, 255, 0.8)',
|
||
fontSize: 12,
|
||
// interval: 0
|
||
},
|
||
axisTick: {
|
||
show: false
|
||
}
|
||
},
|
||
yAxis: {
|
||
type: 'value',
|
||
name: '(m³/h)',
|
||
nameTextStyle: {
|
||
color: 'rgba(255, 255, 255, 0.7)',
|
||
fontSize: 12,
|
||
padding: [0, 0, 0, 10]
|
||
},
|
||
min: 0,
|
||
interval: 100,
|
||
axisLine: {
|
||
show: true,
|
||
lineStyle: {
|
||
color: 'rgba(255, 255, 255, 0.6)'
|
||
}
|
||
},
|
||
axisLabel: {
|
||
color: 'rgba(255, 255, 255, 0.8)',
|
||
fontSize: 12,
|
||
formatter: function(value) {
|
||
return value;
|
||
}
|
||
},
|
||
splitLine: {
|
||
lineStyle: {
|
||
color: 'rgba(255, 255, 255, 0.1)',
|
||
type: 'dashed'
|
||
}
|
||
}
|
||
},
|
||
series: [{
|
||
name: '水流量',
|
||
type: 'bar',
|
||
data: dataSource,
|
||
barWidth: '25%',
|
||
itemStyle: {
|
||
borderRadius: [4, 4, 0, 0],
|
||
opacity: 0.8
|
||
},
|
||
// label: {
|
||
// show: true,
|
||
// position: 'top',
|
||
// color: '#fff',
|
||
// fontSize: 12,
|
||
// fontWeight: 'bold',
|
||
// formatter: function(params) {
|
||
// return params.value;
|
||
// }
|
||
// }
|
||
}],
|
||
tooltip: {
|
||
trigger: 'axis',
|
||
backgroundColor: 'rgba(0, 0, 0, 0.7)',
|
||
borderColor: 'rgba(255, 255, 255, 0.4)',
|
||
textStyle: {
|
||
color: '#fff'
|
||
},
|
||
formatter: function(params) {
|
||
return `时间: ${params[0].name}<br/>水流量: ${params[0].value} m³/h`;
|
||
}
|
||
}
|
||
}, true)
|
||
|
||
// -------- 自动轮播 tooltip（每 5 秒） --------
|
||
// 清理旧定时器（避免重复）
|
||
if (chartOne.__autoTooltipTimer) {
|
||
clearInterval(chartOne.__autoTooltipTimer);
|
||
chartOne.__autoTooltipTimer = null;
|
||
try { chartOne.dispatchAction({ type: 'hideTip' }); } catch (e) { }
|
||
try { chartOne.dispatchAction({ type: 'downplay', seriesIndex: 0, dataIndex: 0 }); } catch (e) { }
|
||
try { chartOne.dispatchAction({ type: 'downplay', seriesIndex: 1, dataIndex: 0 }); } catch (e) { }
|
||
}
|
||
|
||
if (!names || names.length === 0) return;
|
||
|
||
let idx = 0;
|
||
// 先展示第一个（使用 seriesIndex:0 展示 axis tooltip）
|
||
setTimeout(() => {
|
||
try {
|
||
chartOne.dispatchAction({ type: 'showTip', seriesIndex: 0, dataIndex: idx });
|
||
chartOne.dispatchAction({ type: 'highlight', seriesIndex: 0, dataIndex: idx });
|
||
// 同时也可以高亮第二条线的点（可选）
|
||
chartOne.dispatchAction({ type: 'highlight', seriesIndex: 1, dataIndex: idx });
|
||
} catch (e) { }
|
||
chartOne.__autoTooltipTimer = setInterval(() => {
|
||
try {
|
||
// 取消上一个高亮
|
||
chartOne.dispatchAction({ type: 'downplay', seriesIndex: 0, dataIndex: idx });
|
||
chartOne.dispatchAction({ type: 'downplay', seriesIndex: 1, dataIndex: idx });
|
||
|
||
// 下一个索引
|
||
idx = (idx + 1) % names.length;
|
||
|
||
// 显示 tooltip（axis 模式会显示两条线的数据）并高亮
|
||
chartOne.dispatchAction({ type: 'showTip', seriesIndex: 0, dataIndex: idx });
|
||
chartOne.dispatchAction({ type: 'highlight', seriesIndex: 0, dataIndex: idx });
|
||
chartOne.dispatchAction({ type: 'highlight', seriesIndex: 1, dataIndex: idx });
|
||
} catch (e) {
|
||
}
|
||
}, 5000);
|
||
}, 2500);
|
||
}
|
||
|
||
function getStaticTwo(){
|
||
var names = [];
|
||
var dataSource = [];
|
||
var dataSource2 = [];
|
||
for(var i=0;i<dataList.value.length;i++){
|
||
names.push(dataList.value[i].datatime);
|
||
dataSource.push({value:dataList.value[i].view035});
|
||
dataSource2.push({value:dataList.value[i].view036});
|
||
}
|
||
const staticParam = document.querySelector('.staticTwo') as HTMLElement;
|
||
chartTwo = echarts.init(staticParam);
|
||
chartTwo.setOption({
|
||
tooltip: {
|
||
trigger: 'axis',
|
||
axisPointer: {
|
||
type: 'shadow'
|
||
},
|
||
backgroundColor: 'rgba(0, 0, 0, 0.8)',
|
||
borderColor: 'rgba(255, 255, 255, 0.3)',
|
||
textStyle: {
|
||
color: '#fff'
|
||
}
|
||
},
|
||
legend: {
|
||
data: ['供水温度', '回水温度'],
|
||
textStyle: {
|
||
color: '#fff'
|
||
},
|
||
top: 10,
|
||
right: 20
|
||
},
|
||
grid: {
|
||
left: '3%',
|
||
right: '4%',
|
||
bottom: '3%',
|
||
top: '60px',
|
||
containLabel: true
|
||
},
|
||
xAxis: {
|
||
type: 'category',
|
||
data: names,
|
||
axisLine: {
|
||
lineStyle: {
|
||
color: 'rgba(255, 255, 255, 0.6)'
|
||
}
|
||
},
|
||
axisLabel: {
|
||
color: 'rgba(255, 255, 255, 0.8)',
|
||
fontSize: 12,
|
||
// interval: 0
|
||
},
|
||
axisTick: {
|
||
alignWithLabel: true
|
||
}
|
||
},
|
||
yAxis: {
|
||
type: 'value',
|
||
min: 0,
|
||
interval: 100,
|
||
axisLine: {
|
||
show: true,
|
||
lineStyle: {
|
||
color: 'rgba(255, 255, 255, 0.6)'
|
||
}
|
||
},
|
||
axisLabel: {
|
||
color: 'rgba(255, 255, 255, 0.8)',
|
||
fontSize: 12,
|
||
formatter: '{value}'
|
||
},
|
||
splitLine: {
|
||
lineStyle: {
|
||
color: 'rgba(255, 255, 255, 0.1)',
|
||
type: 'dashed'
|
||
}
|
||
}
|
||
},
|
||
series: [
|
||
{
|
||
name: '供水温度',
|
||
type: 'bar',
|
||
data: dataSource,
|
||
barWidth: '25%',
|
||
barGap: '30%',
|
||
itemStyle: {
|
||
borderRadius: [3, 3, 0, 0],
|
||
opacity: 0.8
|
||
},
|
||
// label: {
|
||
// show: true,
|
||
// position: 'top',
|
||
// color: '#fff',
|
||
// fontSize: 11,
|
||
// fontWeight: 'normal'
|
||
// }
|
||
},
|
||
{
|
||
name: '回水温度',
|
||
type: 'bar',
|
||
data: dataSource2,
|
||
barWidth: '25%',
|
||
barGap: '30%',
|
||
itemStyle: {
|
||
borderRadius: [3, 3, 0, 0],
|
||
opacity: 0.8
|
||
},
|
||
// label: {
|
||
// show: true,
|
||
// position: 'top',
|
||
// color: '#fff',
|
||
// fontSize: 11,
|
||
// fontWeight: 'normal'
|
||
// }
|
||
}
|
||
]
|
||
}, true)
|
||
|
||
// -------- 自动轮播 tooltip（每 5 秒） --------
|
||
// 清理旧定时器（避免重复）
|
||
if (chartTwo.__autoTooltipTimer) {
|
||
clearInterval(chartTwo.__autoTooltipTimer);
|
||
chartTwo.__autoTooltipTimer = null;
|
||
try { chartTwo.dispatchAction({ type: 'hideTip' }); } catch (e) { }
|
||
try { chartTwo.dispatchAction({ type: 'downplay', seriesIndex: 0, dataIndex: 0 }); } catch (e) { }
|
||
try { chartTwo.dispatchAction({ type: 'downplay', seriesIndex: 1, dataIndex: 0 }); } catch (e) { }
|
||
}
|
||
|
||
if (!names || names.length === 0) return;
|
||
|
||
let idx = 0;
|
||
// 先展示第一个（使用 seriesIndex:0 展示 axis tooltip）
|
||
setTimeout(() => {
|
||
try {
|
||
chartTwo.dispatchAction({ type: 'showTip', seriesIndex: 0, dataIndex: idx });
|
||
chartTwo.dispatchAction({ type: 'highlight', seriesIndex: 0, dataIndex: idx });
|
||
// 同时也可以高亮第二条线的点（可选）
|
||
chartTwo.dispatchAction({ type: 'highlight', seriesIndex: 1, dataIndex: idx });
|
||
} catch (e) { }
|
||
chartTwo.__autoTooltipTimer = setInterval(() => {
|
||
try {
|
||
// 取消上一个高亮
|
||
chartTwo.dispatchAction({ type: 'downplay', seriesIndex: 0, dataIndex: idx });
|
||
chartTwo.dispatchAction({ type: 'downplay', seriesIndex: 1, dataIndex: idx });
|
||
// 下一个索引
|
||
idx = (idx + 1) % names.length;
|
||
// 显示 tooltip（axis 模式会显示两条线的数据）并高亮
|
||
chartTwo.dispatchAction({ type: 'showTip', seriesIndex: 0, dataIndex: idx });
|
||
chartTwo.dispatchAction({ type: 'highlight', seriesIndex: 0, dataIndex: idx });
|
||
chartTwo.dispatchAction({ type: 'highlight', seriesIndex: 1, dataIndex: idx });
|
||
} catch (e) {
|
||
}
|
||
}, 5000);
|
||
}, 2500);
|
||
}
|
||
|
||
function getStaticThree(){
|
||
var names = [];
|
||
var dataSource = [];
|
||
var dataSource2 = [];
|
||
for(var i=0;i<dataList.value.length;i++){
|
||
names.push(dataList.value[i].datatime);
|
||
dataSource.push(dataList.value[i].view007);
|
||
dataSource2.push(dataList.value[i].view008);
|
||
}
|
||
// var names = ['00:00','01:00','02:00','03:00','04:00','05:00','06:00','07:00', '08:00', '09:00', '10:00', '11:00', '12:00', '13:00', '14:00', '15:00', '16:00', '17:00', '18:00', '19:00', '20:00', '21:00', '22:00', '23:00'];
|
||
const staticParam = document.querySelector('.staticThree') as HTMLElement;
|
||
chartThree = echarts.init(staticParam);
|
||
chartThree.setOption({
|
||
tooltip: {
|
||
trigger: 'axis',
|
||
backgroundColor: 'rgba(0, 0, 0, 0.7)',
|
||
borderColor: 'rgba(255, 255, 255, 0.3)',
|
||
textStyle: {
|
||
color: '#fff'
|
||
},
|
||
formatter: function(params) {
|
||
return `时间: ${params[0].name}<br/>` +
|
||
`${params[0].seriesName}: ${params[0].value}<br/>` +
|
||
`${params[1].seriesName}: ${params[1].value}`;
|
||
}
|
||
},
|
||
legend: {
|
||
data: ['供水压力', '回水压力'],
|
||
textStyle: {
|
||
color: '#fff',
|
||
fontSize: 12
|
||
},
|
||
top: 10,
|
||
right: 20,
|
||
itemWidth: 15,
|
||
itemHeight: 10,
|
||
itemGap: 15
|
||
},
|
||
grid: {
|
||
left: '30px',
|
||
right: '40px',
|
||
bottom: '40px',
|
||
top: '60px',
|
||
containLabel: true
|
||
},
|
||
xAxis: {
|
||
type: 'category',
|
||
boundaryGap: false,
|
||
data: names,
|
||
axisLine: {
|
||
lineStyle: {
|
||
color: 'rgba(255, 255, 255, 0.6)'
|
||
}
|
||
},
|
||
axisLabel: {
|
||
color: 'rgba(255, 255, 255, 0.8)',
|
||
fontSize: 11,
|
||
// interval: 0
|
||
},
|
||
axisTick: {
|
||
alignWithLabel: true
|
||
}
|
||
},
|
||
yAxis: {
|
||
type: 'value',
|
||
min: 0,
|
||
interval: 5,
|
||
axisLine: {
|
||
show: true,
|
||
lineStyle: {
|
||
color: 'rgba(255, 255, 255, 0.6)'
|
||
}
|
||
},
|
||
axisLabel: {
|
||
color: 'rgba(255, 255, 255, 0.8)',
|
||
fontSize: 11,
|
||
formatter: '{value}'
|
||
},
|
||
splitLine: {
|
||
lineStyle: {
|
||
color: 'rgba(255, 255, 255, 0.1)',
|
||
type: 'dashed'
|
||
}
|
||
}
|
||
},
|
||
series: [
|
||
{
|
||
name: '供水压力',
|
||
type: 'line',
|
||
data: dataSource,
|
||
symbol: 'circle',
|
||
symbolSize: 6,
|
||
itemStyle: {
|
||
color: '#1E90FF'
|
||
},
|
||
lineStyle: {
|
||
color: '#1E90FF',
|
||
width: 2
|
||
},
|
||
areaStyle: {
|
||
color: {
|
||
type: 'linear',
|
||
x: 0,
|
||
y: 0,
|
||
x2: 0,
|
||
y2: 1,
|
||
colorStops: [{
|
||
offset: 0,
|
||
color: 'rgba(30, 144, 255, 0.3)'
|
||
}, {
|
||
offset: 1,
|
||
color: 'rgba(30, 144, 255, 0.1)'
|
||
}]
|
||
}
|
||
},
|
||
smooth: true
|
||
},
|
||
{
|
||
name: '回水压力',
|
||
type: 'line',
|
||
data: dataSource2,
|
||
symbol: 'circle',
|
||
symbolSize: 6,
|
||
itemStyle: {
|
||
color: '#FFD700'
|
||
},
|
||
lineStyle: {
|
||
color: '#FFD700',
|
||
width: 2
|
||
},
|
||
areaStyle: {
|
||
color: {
|
||
type: 'linear',
|
||
x: 0,
|
||
y: 0,
|
||
x2: 0,
|
||
y2: 1,
|
||
colorStops: [{
|
||
offset: 0,
|
||
color: 'rgba(255, 215, 0, 0.3)'
|
||
}, {
|
||
offset: 1,
|
||
color: 'rgba(255, 215, 0, 0.1)'
|
||
}]
|
||
}
|
||
},
|
||
smooth: true
|
||
}
|
||
]
|
||
}, true)
|
||
|
||
|
||
// -------- 自动轮播 tooltip（每 5 秒） --------
|
||
// 清理旧定时器（避免重复）
|
||
if (chartThree.__autoTooltipTimer) {
|
||
clearInterval(chartThree.__autoTooltipTimer);
|
||
chartThree.__autoTooltipTimer = null;
|
||
try { chartThree.dispatchAction({ type: 'hideTip' }); } catch (e) { }
|
||
try { chartThree.dispatchAction({ type: 'downplay', seriesIndex: 0, dataIndex: 0 }); } catch (e) { }
|
||
try { chartThree.dispatchAction({ type: 'downplay', seriesIndex: 1, dataIndex: 0 }); } catch (e) { }
|
||
}
|
||
|
||
if (!names || names.length === 0) return;
|
||
|
||
let idx = 0;
|
||
// 先展示第一个（使用 seriesIndex:0 展示 axis tooltip）
|
||
setTimeout(() => {
|
||
try {
|
||
chartThree.dispatchAction({ type: 'showTip', seriesIndex: 0, dataIndex: idx });
|
||
chartThree.dispatchAction({ type: 'highlight', seriesIndex: 0, dataIndex: idx });
|
||
// 同时也可以高亮第二条线的点（可选）
|
||
chartThree.dispatchAction({ type: 'highlight', seriesIndex: 1, dataIndex: idx });
|
||
} catch (e) { }
|
||
chartThree.__autoTooltipTimer = setInterval(() => {
|
||
try {
|
||
// 取消上一个高亮
|
||
chartThree.dispatchAction({ type: 'downplay', seriesIndex: 0, dataIndex: idx });
|
||
chartThree.dispatchAction({ type: 'downplay', seriesIndex: 1, dataIndex: idx });
|
||
|
||
// 下一个索引
|
||
idx = (idx + 1) % names.length;
|
||
|
||
// 显示 tooltip（axis 模式会显示两条线的数据）并高亮
|
||
chartThree.dispatchAction({ type: 'showTip', seriesIndex: 0, dataIndex: idx });
|
||
chartThree.dispatchAction({ type: 'highlight', seriesIndex: 0, dataIndex: idx });
|
||
chartThree.dispatchAction({ type: 'highlight', seriesIndex: 1, dataIndex: idx });
|
||
} catch (e) {
|
||
}
|
||
}, 5000);
|
||
}, 2500);
|
||
}
|
||
|
||
function getStaticFour(){
|
||
var names = [];
|
||
var dataSource = [];
|
||
for(var i=0;i<dataList.value.length;i++){
|
||
names.push(dataList.value[i].datatime);
|
||
dataSource.push(dataList.value[i].view041);
|
||
}
|
||
const staticParam = document.querySelector('.staticFour') as HTMLElement;
|
||
chartFour = echarts.init(staticParam);
|
||
chartFour.setOption({
|
||
tooltip: {
|
||
trigger: 'axis',
|
||
backgroundColor: 'rgba(0, 0, 0, 0.8)',
|
||
borderColor: 'rgba(255, 255, 255, 0.3)',
|
||
textStyle: {
|
||
color: '#fff',
|
||
fontSize: 12
|
||
},
|
||
formatter: function(params) {
|
||
return `时间: ${params[0].name}<br/>数值: ${params[0].value}`;
|
||
}
|
||
},
|
||
grid: {
|
||
left: '20px',
|
||
right: '20px',
|
||
bottom: '10px',
|
||
top: '30px',
|
||
containLabel: true
|
||
},
|
||
xAxis: {
|
||
type: 'category',
|
||
boundaryGap: false,
|
||
data: names,
|
||
axisLine: {
|
||
lineStyle: {
|
||
color: 'rgba(255, 255, 255, 0.6)'
|
||
}
|
||
},
|
||
axisLabel: {
|
||
color: 'rgba(255, 255, 255, 0.8)',
|
||
fontSize: 11,
|
||
// interval: 0
|
||
},
|
||
axisTick: {
|
||
show: false
|
||
}
|
||
},
|
||
yAxis: {
|
||
type: 'value',
|
||
min: 0,
|
||
interval: 5,
|
||
axisLine: {
|
||
show: true,
|
||
lineStyle: {
|
||
color: 'rgba(255, 255, 255, 0.6)'
|
||
}
|
||
},
|
||
axisLabel: {
|
||
color: 'rgba(255, 255, 255, 0.8)',
|
||
fontSize: 11,
|
||
formatter: '{value}'
|
||
},
|
||
splitLine: {
|
||
lineStyle: {
|
||
color: 'rgba(255, 255, 255, 0.1)',
|
||
type: 'dashed'
|
||
}
|
||
}
|
||
},
|
||
series: [{
|
||
name: '数据值',
|
||
type: 'line',
|
||
data: dataSource,
|
||
symbol: 'circle',
|
||
symbolSize: 6,
|
||
itemStyle: {
|
||
color: '#FFD700'
|
||
},
|
||
lineStyle: {
|
||
color: '#FFD700',
|
||
width: 2
|
||
},
|
||
areaStyle: {
|
||
color: {
|
||
type: 'linear',
|
||
x: 0,
|
||
y: 0,
|
||
x2: 0,
|
||
y2: 1,
|
||
colorStops: [
|
||
{ offset: 0, color: 'rgba(255, 215, 0, 0.3)' },
|
||
{ offset: 1, color: 'rgba(255, 215, 0, 0.1)' }
|
||
]
|
||
}
|
||
},
|
||
smooth: false,
|
||
emphasis: {
|
||
lineStyle: {
|
||
width: 2
|
||
},
|
||
itemStyle: {
|
||
color: '#FFD700'
|
||
}
|
||
}
|
||
}]
|
||
}, true)
|
||
|
||
|
||
// -------- 自动轮播 tooltip（每 5 秒） --------
|
||
// 清理旧定时器（避免重复）
|
||
if (chartFour.__autoTooltipTimer) {
|
||
clearInterval(chartFour.__autoTooltipTimer);
|
||
chartFour.__autoTooltipTimer = null;
|
||
try { chartFour.dispatchAction({ type: 'hideTip' }); } catch (e) { }
|
||
try { chartFour.dispatchAction({ type: 'downplay', seriesIndex: 0, dataIndex: 0 }); } catch (e) { }
|
||
try { chartFour.dispatchAction({ type: 'downplay', seriesIndex: 1, dataIndex: 0 }); } catch (e) { }
|
||
}
|
||
|
||
if (!names || names.length === 0) return;
|
||
|
||
let idx = 0;
|
||
// 先展示第一个（使用 seriesIndex:0 展示 axis tooltip）
|
||
setTimeout(() => {
|
||
try {
|
||
chartFour.dispatchAction({ type: 'showTip', seriesIndex: 0, dataIndex: idx });
|
||
chartFour.dispatchAction({ type: 'highlight', seriesIndex: 0, dataIndex: idx });
|
||
// 同时也可以高亮第二条线的点（可选）
|
||
chartFour.dispatchAction({ type: 'highlight', seriesIndex: 1, dataIndex: idx });
|
||
} catch (e) { }
|
||
chartFour.__autoTooltipTimer = setInterval(() => {
|
||
try {
|
||
// 取消上一个高亮
|
||
chartFour.dispatchAction({ type: 'downplay', seriesIndex: 0, dataIndex: idx });
|
||
chartFour.dispatchAction({ type: 'downplay', seriesIndex: 1, dataIndex: idx });
|
||
|
||
// 下一个索引
|
||
idx = (idx + 1) % names.length;
|
||
|
||
// 显示 tooltip（axis 模式会显示两条线的数据）并高亮
|
||
chartFour.dispatchAction({ type: 'showTip', seriesIndex: 0, dataIndex: idx });
|
||
chartFour.dispatchAction({ type: 'highlight', seriesIndex: 0, dataIndex: idx });
|
||
chartFour.dispatchAction({ type: 'highlight', seriesIndex: 1, dataIndex: idx });
|
||
} catch (e) {
|
||
}
|
||
}, 5000);
|
||
}, 2500);
|
||
}
|
||
|
||
function getStaticFive(){
|
||
|
||
var names = [];
|
||
var dataSource = [];
|
||
for(var i=0;i<dataList.value.length;i++){
|
||
names.push(dataList.value[i].datatime);
|
||
dataSource.push(dataList.value[i].view042);
|
||
}
|
||
const staticParam = document.querySelector('.staticFive') as HTMLElement;
|
||
chartFive = echarts.init(staticParam);
|
||
chartFive.setOption({
|
||
tooltip: {
|
||
trigger: 'axis',
|
||
backgroundColor: 'rgba(0, 0, 0, 0.8)',
|
||
borderColor: 'rgba(255, 255, 255, 0.3)',
|
||
textStyle: {
|
||
color: '#fff',
|
||
fontSize: 12
|
||
},
|
||
formatter: function(params) {
|
||
return `时间: ${params[0].name}<br/>数值: ${params[0].value}`;
|
||
}
|
||
},
|
||
grid: {
|
||
left: '20px',
|
||
right: '20px',
|
||
bottom: '40px',
|
||
top: '30px',
|
||
containLabel: true
|
||
},
|
||
xAxis: {
|
||
type: 'category',
|
||
boundaryGap: false,
|
||
data: names,
|
||
axisLine: {
|
||
lineStyle: {
|
||
color: 'rgba(255, 255, 255, 0.6)'
|
||
}
|
||
},
|
||
axisLabel: {
|
||
color: 'rgba(255, 255, 255, 0.8)',
|
||
fontSize: 11,
|
||
// interval: 0
|
||
},
|
||
axisTick: {
|
||
show: false
|
||
}
|
||
},
|
||
yAxis: {
|
||
type: 'value',
|
||
min: 0,
|
||
interval: 5,
|
||
axisLine: {
|
||
show: true,
|
||
lineStyle: {
|
||
color: 'rgba(255, 255, 255, 0.6)'
|
||
}
|
||
},
|
||
axisLabel: {
|
||
color: 'rgba(255, 255, 255, 0.8)',
|
||
fontSize: 11,
|
||
formatter: '{value}'
|
||
},
|
||
splitLine: {
|
||
lineStyle: {
|
||
color: 'rgba(255, 255, 255, 0.1)',
|
||
type: 'dashed'
|
||
}
|
||
}
|
||
},
|
||
series: [{
|
||
name: '数据值',
|
||
type: 'line',
|
||
data: dataSource,
|
||
symbol: 'circle',
|
||
symbolSize: 6,
|
||
itemStyle: {
|
||
color: '#1E90FF'
|
||
},
|
||
lineStyle: {
|
||
color: '#1E90FF',
|
||
width: 2
|
||
},
|
||
areaStyle: {
|
||
color: {
|
||
type: 'linear',
|
||
x: 0,
|
||
y: 0,
|
||
x2: 0,
|
||
y2: 1,
|
||
colorStops: [
|
||
{ offset: 0, color: 'rgba(30, 144, 255, 0.3)' },
|
||
{ offset: 1, color: 'rgba(30, 144, 255, 0.1)' }
|
||
]
|
||
}
|
||
},
|
||
smooth: false,
|
||
emphasis: {
|
||
lineStyle: {
|
||
width: 2
|
||
},
|
||
itemStyle: {
|
||
color: '#00BFFF'
|
||
}
|
||
}
|
||
}]
|
||
}, true)
|
||
|
||
// -------- 自动轮播 tooltip（每 5 秒） --------
|
||
// 清理旧定时器（避免重复）
|
||
if (chartFive.__autoTooltipTimer) {
|
||
clearInterval(chartFive.__autoTooltipTimer);
|
||
chartFive.__autoTooltipTimer = null;
|
||
try { chartFive.dispatchAction({ type: 'hideTip' }); } catch (e) { }
|
||
try { chartFive.dispatchAction({ type: 'downplay', seriesIndex: 0, dataIndex: 0 }); } catch (e) { }
|
||
try { chartFive.dispatchAction({ type: 'downplay', seriesIndex: 1, dataIndex: 0 }); } catch (e) { }
|
||
}
|
||
|
||
if (!names || names.length === 0) return;
|
||
|
||
let idx = 0;
|
||
// 先展示第一个（使用 seriesIndex:0 展示 axis tooltip）
|
||
setTimeout(() => {
|
||
try {
|
||
chartFive.dispatchAction({ type: 'showTip', seriesIndex: 0, dataIndex: idx });
|
||
chartFive.dispatchAction({ type: 'highlight', seriesIndex: 0, dataIndex: idx });
|
||
// 同时也可以高亮第二条线的点（可选）
|
||
chartFive.dispatchAction({ type: 'highlight', seriesIndex: 1, dataIndex: idx });
|
||
} catch (e) { }
|
||
chartFive.__autoTooltipTimer = setInterval(() => {
|
||
try {
|
||
// 取消上一个高亮
|
||
chartFive.dispatchAction({ type: 'downplay', seriesIndex: 0, dataIndex: idx });
|
||
chartFive.dispatchAction({ type: 'downplay', seriesIndex: 1, dataIndex: idx });
|
||
|
||
// 下一个索引
|
||
idx = (idx + 1) % names.length;
|
||
|
||
// 显示 tooltip（axis 模式会显示两条线的数据）并高亮
|
||
chartFive.dispatchAction({ type: 'showTip', seriesIndex: 0, dataIndex: idx });
|
||
chartFive.dispatchAction({ type: 'highlight', seriesIndex: 0, dataIndex: idx });
|
||
chartFive.dispatchAction({ type: 'highlight', seriesIndex: 1, dataIndex: idx });
|
||
} catch (e) {
|
||
}
|
||
}, 5000);
|
||
}, 2500);
|
||
}
|
||
|
||
function getStaticSix(){
|
||
|
||
var names = [];
|
||
var dataSource = [];
|
||
for(var i=0;i<dataList.value.length;i++){
|
||
names.push({name:dataList.value[i].datatime});
|
||
dataSource.push(dataList.value[i].view038);
|
||
}
|
||
const staticParam = document.querySelector('.staticSix') as HTMLElement;
|
||
chartSix = echarts.init(staticParam);
|
||
chartSix.setOption({
|
||
tooltip: {
|
||
trigger: 'item',
|
||
backgroundColor: 'rgba(0, 0, 0, 0.8)',
|
||
borderColor: 'rgba(255, 255, 255, 0.3)',
|
||
textStyle: {
|
||
color: '#fff',
|
||
fontSize: 12
|
||
}
|
||
},
|
||
legend: {
|
||
data: ['01:00', '02:00', '03:00', '04:00', '05:00', '06:00', '07:00', '08:00'],
|
||
textStyle: {
|
||
color: '#fff',
|
||
fontSize: 11
|
||
},
|
||
top: 10,
|
||
right: 20,
|
||
itemWidth: 12,
|
||
itemHeight: 12,
|
||
itemGap: 8,
|
||
formatter: function(name) {
|
||
return name;
|
||
}
|
||
},
|
||
radar: {
|
||
indicator: names,
|
||
shape: 'polygon',
|
||
splitNumber: 4,
|
||
center: ['50%', '55%'],
|
||
radius: '65%',
|
||
axisName: {
|
||
color: 'rgba(255, 255, 255, 0.7)',
|
||
fontSize: 10
|
||
},
|
||
axisLine: {
|
||
lineStyle: {
|
||
color: 'rgba(255, 255, 255, 0.3)'
|
||
}
|
||
},
|
||
splitLine: {
|
||
lineStyle: {
|
||
color: 'rgba(255, 255, 255, 0.2)'
|
||
}
|
||
},
|
||
splitArea: {
|
||
show: true,
|
||
areaStyle: {
|
||
color: ['rgba(0, 0, 0, 0.1)', 'rgba(0, 0, 0, 0.2)']
|
||
}
|
||
}
|
||
},
|
||
series: [{
|
||
name: '数据分布',
|
||
type: 'radar',
|
||
itemStyle: {
|
||
color: '#1E90FF',
|
||
opacity: 0.6
|
||
},
|
||
lineStyle: {
|
||
color: '#1E90FF',
|
||
width: 2
|
||
},
|
||
areaStyle: {
|
||
color: {
|
||
type: 'linear',
|
||
x: 0,
|
||
y: 0,
|
||
x2: 0,
|
||
y2: 1,
|
||
colorStops: [{
|
||
offset: 0,
|
||
color: 'rgba(30, 144, 255, 0.4)'
|
||
}, {
|
||
offset: 1,
|
||
color: 'rgba(30, 144, 255, 0.1)'
|
||
}]
|
||
}
|
||
},
|
||
data: [{
|
||
value: dataSource,
|
||
symbol: 'circle',
|
||
symbolSize: 6,
|
||
label: {
|
||
show: true,
|
||
color: '#fff',
|
||
fontSize: 10,
|
||
backgroundColor: 'rgba(0, 0, 0, 0.5)',
|
||
padding: [2, 4],
|
||
borderRadius: 3
|
||
}
|
||
}]
|
||
}]
|
||
}, true)
|
||
}
|
||
|
||
function handleCheckGlf(item){
|
||
console.log("🚀 ~ handleCheckGlf ~ item:", item)
|
||
|
||
var list = heatsource.value
|
||
for(var i=0;i<list.length;i++){
|
||
var params = list[i].sourceId
|
||
if(params == item.sourceId){
|
||
sourceId.value = list[i].sourceId
|
||
companyName.value = list[i].companyName
|
||
glfCount.value = i;
|
||
break;
|
||
}
|
||
}
|
||
loadData();
|
||
}
|
||
function handleOk(){
|
||
var list = heatsource.value
|
||
companyName.value = list.filter(item => item.sourceId == sourceId.value)[0].companyName
|
||
visible.value = false;
|
||
disableSubmit.value = false;
|
||
loadData();
|
||
}
|
||
function handleCancel(){
|
||
visible.value = false;
|
||
disableSubmit.value = false;
|
||
}
|
||
|
||
async function loadData() {
|
||
var startTime2 = dayjs().format('YYMM');
|
||
console.log("🚀 ~ loadData ~ startTime2:", startTime2)
|
||
await defHttp.post({url: '/exportapi/homeApi/getStaticNowList',params:{sourceId:sourceId.value,startTime:startTime2}}).then(res => {
|
||
var list = res.data
|
||
for (let i = 0; i < list.length; i++) {
|
||
list[i].datatime = dayjs(list[i].datatime).format('HH:mm')
|
||
}
|
||
dataList.value = list
|
||
})
|
||
|
||
getStaticOne()
|
||
getStaticTwo();
|
||
getStaticThree();
|
||
getStaticFour();
|
||
getStaticFive();
|
||
getStaticSix();
|
||
|
||
}
|
||
async function getHeatsource(){
|
||
heatsource.value = await heatsourcelist({sourceId: userInfo.sourceId});
|
||
}
|
||
/* ---- lifecycle ---- */
|
||
onMounted(async () => {
|
||
await getHeatsource();
|
||
var list = heatsource.value
|
||
if(list.length>0){
|
||
sourceId.value = list[0].sourceId
|
||
companyName.value = list[0].companyName
|
||
}
|
||
loadData();
|
||
|
||
setInterval(() => {
|
||
var list = heatsource.value
|
||
if(list.length>0){
|
||
if(glfCount.value < list.length){
|
||
glfCount.value = glfCount.value+1 ;
|
||
}
|
||
if(glfCount.value >= list.length){
|
||
glfCount.value = 0;
|
||
}
|
||
var num = glfCount.value
|
||
sourceId.value = list[num].sourceId
|
||
companyName.value = list[num].companyName
|
||
console.log("🚀 ~ sourceId.value:", sourceId.value,list[num].sourceName)
|
||
}
|
||
loadData();
|
||
}, 60 * 1000);
|
||
});
|
||
|
||
onBeforeUnmount(() => {
|
||
window.removeEventListener("resize", loadData);
|
||
});
|
||
</script>
|
||
|
||
<style scoped lang="less">
|
||
.indexCentralAll{
|
||
background: url(../../../assets/loginmini/style/img/register.jpg) no-repeat;
|
||
background-position: center center;
|
||
background-size: cover;
|
||
color: white;
|
||
}
|
||
.indexTitle{
|
||
background: url(../../../assets/loginmini/style/img/title.png) no-repeat;
|
||
background-size: auto;
|
||
text-align: center;
|
||
background-size: 100% 100%;
|
||
height: 10vh;
|
||
}
|
||
.divLeft{
|
||
margin-top:-7vh;
|
||
}
|
||
.divCenter{
|
||
margin-top:-7vh;
|
||
}
|
||
.divRight{
|
||
margin-top:-4vh;
|
||
}
|
||
.left1{
|
||
height: 20vh;
|
||
}
|
||
.left2{
|
||
height: 20vh;
|
||
}
|
||
.left3{
|
||
height: calc(100vh - 56vh);
|
||
}
|
||
.center1{
|
||
height: 40vh;
|
||
padding-bottom: 5px;
|
||
}
|
||
.center2{
|
||
height: calc(100vh - 64vh);
|
||
padding-top: 9px;
|
||
}
|
||
.right1{
|
||
height: 27vh;
|
||
}
|
||
.right2{
|
||
height: 27vh;
|
||
}
|
||
.right3{
|
||
height: 27vh;
|
||
}
|
||
.gsmcClass{
|
||
font-size: 20px;
|
||
font-weight: bold;
|
||
display: flex;
|
||
justify-content: center; /* 水平居中 */
|
||
align-items: center; /* 垂直居中 */
|
||
height: 20vh; /* 需要设置容器高度 */
|
||
|
||
background: url(../../../assets/dp/icon1.png) no-repeat;
|
||
background-position: center center;
|
||
background-size: 95% 80%;
|
||
}
|
||
.glfslClass{
|
||
text-align: center;
|
||
font-size: 16px;
|
||
font-weight: bold;
|
||
display: flex;
|
||
justify-content: center; /* 水平居中 */
|
||
align-items: center; /* 垂直居中 */
|
||
height: 20vh; /* 需要设置容器高度 */
|
||
|
||
background: url(../../../assets/dp/icon2.png) no-repeat;
|
||
background-position: center center;
|
||
background-size: 95% 80%;
|
||
}
|
||
|
||
.left-to-right {
|
||
background: linear-gradient(to right, #a3d1f0, #66b1e1);
|
||
-webkit-background-clip: text;
|
||
background-clip: text;
|
||
color: transparent;
|
||
}
|
||
.glfsllClass{
|
||
height: calc(100vh - 56vh); /* 需要设置容器高度 */
|
||
background: url(../../../assets/dp/frame2.png) no-repeat;
|
||
background-position: center center;
|
||
background-size: 98% 100%;
|
||
}
|
||
.glfghswdClass{
|
||
height: 40vh; /* 需要设置容器高度 */
|
||
background: url(../../../assets/dp/frame.png) no-repeat;
|
||
background-position: center center;
|
||
background-size: 98% 100%;
|
||
}
|
||
.glfghsylClass{
|
||
height: calc(100vh - 65vh); /* 需要设置容器高度 */
|
||
background: url(../../../assets/dp/frame.png) no-repeat;
|
||
background-position: center center;
|
||
background-size: 98% 100%;
|
||
}
|
||
.glfrlClass{
|
||
height: 27vh; /* 需要设置容器高度 */
|
||
background: url(../../../assets/dp/frame3.png) no-repeat;
|
||
background-position: center center;
|
||
background-size: 98% 100%;
|
||
}
|
||
|
||
.staticOne {
|
||
width: 100%;
|
||
height: calc(100% - 30px); // 减去标题高度
|
||
}
|
||
.staticTwo {
|
||
width: 100%;
|
||
height: calc(100% - 30px); // 减去标题高度
|
||
}
|
||
.staticThree {
|
||
width: 100%;
|
||
height: calc(100% - 30px); // 减去标题高度
|
||
}
|
||
.staticFour {
|
||
width: 100%;
|
||
height: calc(100% - 30px); // 减去标题高度
|
||
}
|
||
.staticFive {
|
||
width: 100%;
|
||
height: calc(100% ); // 减去标题高度
|
||
}
|
||
.staticSix {
|
||
width: 100%;
|
||
height: calc(100% - 30px); // 减去标题高度
|
||
}
|
||
.glf-to-right {
|
||
color: #66b1e1;
|
||
cursor:pointer;
|
||
}
|
||
.glfSelect{
|
||
color: #a3d1f0;
|
||
}
|
||
</style>
|