fyy
007bda30bc
Some checks are pending
Gitea Actions Demo / Explore-Gitea-Actions (push) Waiting to run
1282 lines
36 KiB
Vue
1282 lines
36 KiB
Vue
<template>
|
|
<div class="mian">
|
|
<div class="title">
|
|
<div class="left">
|
|
<div class="left-first" id="time">--:--:--</div>
|
|
<div class="left-second" id="date">----</div>
|
|
</div>
|
|
<div class="center">南川区商务中心数智管理平台</div>
|
|
<div class="right">
|
|
<div>{{ weekDay }}</div>
|
|
<div>晴</div>
|
|
<div>40℃</div>
|
|
<div class="logout" @click="logout">
|
|
<img src="../../../assets/return.png" style="width: 1.5rem; height: 1.5rem;">
|
|
<div>
|
|
退出
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="contents">
|
|
<div class="content">
|
|
<div class="content-left">
|
|
<div class="first">
|
|
<div class="first-content1">
|
|
<div>746</div>
|
|
<div>214</div>
|
|
<div>456</div>
|
|
</div>
|
|
<div class="first-content2">
|
|
<div ref="pieChart" class="pie-chart"></div>
|
|
</div>
|
|
</div>
|
|
<div class="second">
|
|
<div class="second-content">
|
|
<div ref="powerChart" class="power-chart"></div>
|
|
</div>
|
|
</div>
|
|
<div class="third">
|
|
<div class="third-content">
|
|
<div class="content1">
|
|
<div>13312</div>
|
|
<div>133</div>
|
|
<div>133</div>
|
|
<div>133</div>
|
|
</div>
|
|
<div class="content2">
|
|
<div class="device-throughput-chart" ref="deviceThroughputChart"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="content-center">
|
|
<div class="first">
|
|
<div>3946</div>
|
|
<div>6538</div>
|
|
<div>2627</div>
|
|
<div>3978</div>
|
|
</div>
|
|
<div class="second"></div>
|
|
</div>
|
|
<div class="content-right">
|
|
<div class="first">
|
|
<div class="first-content1">
|
|
<div ref="lineChart" class="line-chart"></div>
|
|
</div>
|
|
<div class="first-content2">
|
|
<div ref="lineChart2" class="line-chart"></div>
|
|
</div>
|
|
</div>
|
|
<div class="second">
|
|
<div class="second-box">
|
|
<div class="content1">
|
|
<div>637</div>
|
|
<div class="content-title">待处理</div>
|
|
</div>
|
|
<div class="content2">
|
|
<div>637</div>
|
|
<div class="content-title">已处理</div>
|
|
</div>
|
|
<div class="content2">
|
|
<div>637</div>
|
|
<div class="content-title">已拒绝</div>
|
|
</div>
|
|
<div class="content4">
|
|
<div>637</div>
|
|
<div class="content-title">待审核</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="third">
|
|
<div class="device-cards">
|
|
<div class="device-card1">
|
|
<div>
|
|
<img src="../../../assets/energyConsumptionAnalysis/devices-number-icon.png" style="width: 1.75rem;height: 1.75rem;" alt="">
|
|
</div>
|
|
<div class="device-card-text-box">
|
|
<div class="device-card-text">设备总数</div>
|
|
<div class="device-card1-value">650</div>
|
|
</div>
|
|
</div>
|
|
<div class="device-card2">
|
|
<div>
|
|
<img src="../../../assets/energyConsumptionAnalysis/devices-online-icon.png" style="width: 1.75rem;height: 1.75rem;" alt="">
|
|
</div>
|
|
<div>
|
|
<div class="device-card-text">设备在线数</div>
|
|
<div class="device-card2-value">632</div>
|
|
</div>
|
|
</div>
|
|
<div class="device-card3">
|
|
<div>
|
|
<img src="../../../assets/energyConsumptionAnalysis/devices-offline-icon.png" style="width: 1.75rem;height: 1.75rem;" alt="">
|
|
</div>
|
|
<div>
|
|
<div class="device-card-text">设备离线数</div>
|
|
<div class="device-card3-value">18</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div ref="deviceChart" class="device-chart"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { ref, onMounted, onBeforeUnmount } from 'vue'
|
|
import { useRouter } from 'vue-router'
|
|
import * as echarts from 'echarts'
|
|
import 'echarts-gl'
|
|
import { getThreeDBarOption } from '#/utils/threeDBarOption'
|
|
import { renderPie3DChart } from '#/utils/pie3d'
|
|
import { addChartToResizeManager, removeChartFromResizeManager } from '#/utils/echartsResize'
|
|
import { useFlexibleRem } from '#/utils/useFlexibleRem'
|
|
useFlexibleRem()
|
|
// 路由
|
|
const router = useRouter()
|
|
|
|
// 图表实例
|
|
const barChart = ref<HTMLElement>()
|
|
const powerChart = ref<HTMLElement>()
|
|
const envChart = ref<HTMLElement>()
|
|
const waterChart = ref<HTMLElement>()
|
|
const deviceChart = ref<HTMLElement>()
|
|
const pie3dChart = ref<HTMLElement>()
|
|
const pieChart = ref<HTMLElement>()
|
|
const deviceThroughputChart = ref<HTMLElement>()
|
|
const lineChart = ref<HTMLElement>()
|
|
const lineChart2 = ref<HTMLElement>()
|
|
|
|
// 定时器
|
|
let timer: number | null = null
|
|
|
|
// 星期几
|
|
const weekDay = ref('')
|
|
|
|
// 图表实例
|
|
let barChartInstance: echarts.ECharts | null = null
|
|
let powerChartInstance: echarts.ECharts | null = null
|
|
let envChartInstance: echarts.ECharts | null = null
|
|
let waterChartInstance: echarts.ECharts | null = null
|
|
let deviceChartInstance: echarts.ECharts | null = null
|
|
let pie3dChartInstance: any = null
|
|
let pieChartInstance: echarts.ECharts | null = null
|
|
let deviceThroughputChartInstance: echarts.ECharts | null = null
|
|
let lineChartInstance: echarts.ECharts | null = null
|
|
let lineChart2Instance: echarts.ECharts | null = null
|
|
|
|
const category = ['金山镇','骑龙乡','鱼泉乡','石墙镇','铁村乡'];
|
|
const lineData = [18092,20728,24045,28348,32808];
|
|
const barData = [4600,5000,5500,6500,7500];
|
|
const rateData = barData.map((v, i) => (v / lineData[i]).toFixed(2));
|
|
|
|
const lineChartOption = {
|
|
backgroundColor: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
|
{ offset: 0, color: 'rgba(200,101,137,0.2)' },
|
|
{ offset: 1, color: 'rgba(6,167,255,0.2)' }
|
|
], false),
|
|
grid: {
|
|
top: '25%',
|
|
left: '5%',
|
|
right: '5%',
|
|
bottom: '0%',
|
|
containLabel: true,
|
|
},
|
|
xAxis: {
|
|
type: 'category',
|
|
boundaryGap: false,
|
|
data: ['0','4', '8', '12', '16', '20', '23'],
|
|
axisLabel: {
|
|
margin: 30,
|
|
color: '#ffffff63'
|
|
},
|
|
axisLine: {
|
|
show: false
|
|
},
|
|
axisTick: {
|
|
show: true,
|
|
length: 25,
|
|
lineStyle: {
|
|
color: "#ffffff1f"
|
|
}
|
|
},
|
|
splitLine: {
|
|
show: true,
|
|
lineStyle: {
|
|
color: '#ffffff1f'
|
|
}
|
|
}
|
|
},
|
|
yAxis: [{
|
|
type: 'value',
|
|
position: 'right',
|
|
// axisTick: {
|
|
// show: true,
|
|
// length: 15,
|
|
// lineStyle: {
|
|
// color: "#ffffff1f",
|
|
// }
|
|
// },
|
|
splitLine: {
|
|
show: false,
|
|
lineStyle: {
|
|
color: '#ffffff1f'
|
|
}
|
|
},
|
|
axisLine: {
|
|
show:false,
|
|
lineStyle: {
|
|
color: '#fff',
|
|
width: 2
|
|
}
|
|
},
|
|
axisLabel:{
|
|
show:false
|
|
}
|
|
}],
|
|
series: [{
|
|
name: '',
|
|
type: 'line',
|
|
smooth: true, //是否平滑曲线显示
|
|
showAllSymbol: true,
|
|
symbol: 'circle',
|
|
symbolSize: 6,
|
|
lineStyle: {
|
|
normal: {
|
|
color: "#fff", // 线条颜色
|
|
},
|
|
},
|
|
label: {
|
|
show: true,
|
|
// position: 'top',
|
|
textStyle: {
|
|
color: '#fff',
|
|
}
|
|
},
|
|
itemStyle: {
|
|
color: "red",
|
|
borderColor: "#fff",
|
|
borderWidth: 3
|
|
},
|
|
tooltip: {
|
|
show: false
|
|
},
|
|
areaStyle: {
|
|
normal: {
|
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
|
|
offset: 0,
|
|
color: '#eb64fb'
|
|
},
|
|
{
|
|
offset: 1,
|
|
color: '#3fbbff0d'
|
|
}
|
|
], false),
|
|
}
|
|
},
|
|
data: [19, 238, 985, 631, 1889,924,339]
|
|
}]
|
|
};
|
|
const lineChart2Option = {
|
|
backgroundColor: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
|
{ offset: 0, color: 'rgba(200,101,137,0.2)' },
|
|
{ offset: 1, color: 'rgba(6,167,255,0.2)' }
|
|
], false),
|
|
grid: {
|
|
top: '25%',
|
|
left: '5%',
|
|
right: '5%',
|
|
bottom: '0%',
|
|
containLabel: true,
|
|
},
|
|
xAxis: {
|
|
type: 'category',
|
|
boundaryGap: false,
|
|
data: ['0','4', '8', '12', '16', '20', '23'],
|
|
axisLabel: {
|
|
margin: 30,
|
|
color: '#ffffff63'
|
|
},
|
|
axisLine: {
|
|
show: false
|
|
},
|
|
axisTick: {
|
|
show: true,
|
|
length: 25,
|
|
lineStyle: {
|
|
color: "#ffffff1f"
|
|
}
|
|
},
|
|
splitLine: {
|
|
show: true,
|
|
lineStyle: {
|
|
color: '#ffffff1f'
|
|
}
|
|
}
|
|
},
|
|
yAxis: [{
|
|
type: 'value',
|
|
position: 'right',
|
|
axisLabel: {
|
|
show:false,
|
|
margin: 20,
|
|
color: '#ffffff63'
|
|
},
|
|
|
|
axisTick: {
|
|
show: true,
|
|
length: 15,
|
|
lineStyle: {
|
|
color: "#ffffff1f",
|
|
}
|
|
},
|
|
splitLine: {
|
|
show: false,
|
|
lineStyle: {
|
|
color: '#ffffff1f'
|
|
}
|
|
},
|
|
axisLine: {
|
|
lineStyle: {
|
|
color: '#fff',
|
|
width: 2
|
|
}
|
|
}
|
|
}],
|
|
series: [{
|
|
name: '',
|
|
type: 'line',
|
|
smooth: true, //是否平滑曲线显示
|
|
showAllSymbol: true,
|
|
symbol: 'circle',
|
|
symbolSize: 6,
|
|
lineStyle: {
|
|
normal: {
|
|
color: "#fff", // 线条颜色
|
|
},
|
|
},
|
|
label: {
|
|
show: true,
|
|
// position: 'top',
|
|
textStyle: {
|
|
color: '#fff',
|
|
}
|
|
},
|
|
itemStyle: {
|
|
color: "red",
|
|
borderColor: "#fff",
|
|
borderWidth: 3
|
|
},
|
|
tooltip: {
|
|
show: false
|
|
},
|
|
areaStyle: {
|
|
normal: {
|
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
|
|
offset: 0,
|
|
color: '#eb64fb'
|
|
},
|
|
{
|
|
offset: 1,
|
|
color: '#3fbbff0d'
|
|
}
|
|
], false),
|
|
}
|
|
},
|
|
data: [23, 78, 785, 431, 739, 924,439]
|
|
}]
|
|
};
|
|
const deviceThroughputOption = {
|
|
// title: {
|
|
// text: '增量设备贯通情况-单位',
|
|
// x: 'center',
|
|
// y: 0,
|
|
// textStyle:{
|
|
// color:'#B4B4B4',
|
|
// fontSize:16,
|
|
// fontWeight:'normal',
|
|
// },
|
|
// },
|
|
backgroundColor: '#191E40',
|
|
tooltip: {
|
|
trigger: 'axis',
|
|
axisPointer: {
|
|
type: 'shadow',
|
|
label: {
|
|
show: true,
|
|
}
|
|
}
|
|
},
|
|
legend: {
|
|
data: ['用量', '总量','使用率'],
|
|
textStyle: {
|
|
color: '#B4B4B4'
|
|
},
|
|
top:'0',
|
|
},
|
|
grid:{
|
|
left:'12%',
|
|
width:'78%',
|
|
top:'15%',
|
|
bottom:'15%',
|
|
right:'30%',
|
|
},
|
|
xAxis: {
|
|
data: category,
|
|
axisLine: {
|
|
lineStyle: {
|
|
color: '#B4B4B4'
|
|
}
|
|
},
|
|
axisTick:{ show:false },
|
|
},
|
|
yAxis: [
|
|
{
|
|
splitLine: {show: false},
|
|
axisLine: { lineStyle: { color: '#B4B4B4' } },
|
|
axisLabel:{ formatter:'{value} ' }
|
|
},
|
|
{
|
|
splitLine: {show: false},
|
|
axisLine: { lineStyle: { color: '#B4B4B4' } },
|
|
axisLabel:{ formatter:'{value} ' }
|
|
}
|
|
],
|
|
series: [
|
|
{
|
|
name: '使用率',
|
|
type: 'line',
|
|
smooth: true,
|
|
showAllSymbol: true,
|
|
symbol: 'emptyCircle',
|
|
symbolSize: 8,
|
|
yAxisIndex: 1,
|
|
itemStyle: { color:'#F02FC2' },
|
|
data: rateData
|
|
},
|
|
{
|
|
name: '用量',
|
|
type: 'bar',
|
|
barWidth: 15,
|
|
itemStyle: {
|
|
normal: {
|
|
barBorderRadius: 5,
|
|
color: new echarts.graphic.LinearGradient(
|
|
0, 0, 0, 1,
|
|
[
|
|
{offset: 0, color: '#956FD4'},
|
|
{offset: 1, color: '#3EACE5'}
|
|
]
|
|
)
|
|
}
|
|
},
|
|
data: barData
|
|
},
|
|
{
|
|
name: '总量',
|
|
type: 'bar',
|
|
barGap: '-100%',
|
|
barWidth: 15,
|
|
itemStyle: {
|
|
normal: {
|
|
barBorderRadius: 5,
|
|
color: new echarts.graphic.LinearGradient(
|
|
0, 0, 0, 1,
|
|
[
|
|
{offset: 0, color: 'rgba(156,107,211,0.5)'},
|
|
{offset: 0.2, color: 'rgba(156,107,211,0.3)'},
|
|
{offset: 1, color: 'rgba(156,107,211,0)'}
|
|
]
|
|
)
|
|
}
|
|
},
|
|
z: -12,
|
|
data: lineData
|
|
}
|
|
]
|
|
}
|
|
|
|
// 退出方法
|
|
const logout = () => {
|
|
router.push('/navigation')
|
|
}
|
|
|
|
// 更新时间
|
|
const updateTime = () => {
|
|
const now = new Date()
|
|
const time = now.toLocaleTimeString('zh-CN', { hour12: false })
|
|
const date = now.getFullYear() + '.' +
|
|
String(now.getMonth() + 1).padStart(2, '0') + '.' +
|
|
String(now.getDate()).padStart(2, '0')
|
|
|
|
// 获取星期几
|
|
const weekDays = ['日', '一', '二', '三', '四', '五', '六']
|
|
weekDay.value = '星期' + weekDays[now.getDay()]
|
|
|
|
const timeElement = document.getElementById('time')
|
|
const dateElement = document.getElementById('date')
|
|
|
|
if (timeElement) timeElement.innerText = time
|
|
if (dateElement) dateElement.innerText = date
|
|
}
|
|
// 初始化饼图
|
|
const initPieChart = () => {
|
|
if (!pieChart.value) return
|
|
const m2R2Data = [
|
|
{value:335, legendname:'设备预警',name:"设备预警",itemStyle:{color:"#01A2F3"}},
|
|
{value:310, legendname:'其他预警',name:"其他预警",itemStyle:{color:"#A564F8"}},
|
|
{value:234, legendname:'客户报障',name:"客户报障",itemStyle:{color:"#54E6CB"}},
|
|
{value:154, legendname:'设备故障',name:"设备故障",itemStyle:{color:"#F8976A "}},
|
|
]
|
|
const chart = echarts.init(pieChart.value)
|
|
const option = {
|
|
tooltip: {
|
|
trigger: 'item',
|
|
formatter:function (parms: any){
|
|
var str= parms.seriesName+"</br>"+
|
|
parms.marker+""+parms.data.legendname+"</br>"+
|
|
"数量："+ parms.data.value+"</br>"+
|
|
"占比："+ parms.percent+"%";
|
|
return str ;
|
|
}
|
|
},
|
|
legend: {
|
|
type:"scroll",
|
|
orient: 'vertical',
|
|
left:'70%',
|
|
align:'left',
|
|
top:'middle',
|
|
textStyle: {
|
|
color:'#fff'
|
|
},
|
|
height:250
|
|
},
|
|
series: [
|
|
{
|
|
name:'标题',
|
|
type:'pie',
|
|
center: ['35%', '50%'],
|
|
radius: '65%',
|
|
clockwise: false, //饼图的扇区是否是顺时针排布
|
|
avoidLabelOverlap: false,
|
|
data:m2R2Data
|
|
}
|
|
]
|
|
}
|
|
chart.setOption(option)
|
|
pieChartInstance = chart
|
|
addChartToResizeManager(chart)
|
|
}
|
|
// 初始化柱状图
|
|
const initBarChart = () => {
|
|
if (!barChart.value) return
|
|
|
|
const chart = echarts.init(barChart.value)
|
|
const option = getThreeDBarOption({
|
|
xData: ['A区', 'B区', 'C区', 'D区'],
|
|
yData: [320, 452, 688, 400]
|
|
})
|
|
chart.setOption(option)
|
|
barChartInstance = chart
|
|
addChartToResizeManager(chart)
|
|
}
|
|
|
|
// 初始化电力图表
|
|
const initPowerChart = () => {
|
|
if (!powerChart.value) return
|
|
|
|
const chart = echarts.init(powerChart.value)
|
|
const option = {
|
|
tooltip: { trigger: 'axis' },
|
|
grid: { left: 40, right: 20, top: 40, bottom: 30 },
|
|
xAxis: {
|
|
type: 'category',
|
|
data: Array.from({length: 19}, (_, i) => i + 6),
|
|
axisLine: { lineStyle: { color: '#3ec6ff' } },
|
|
axisLabel: { color: '#fff' }
|
|
},
|
|
yAxis: {
|
|
type: 'value',
|
|
name: '',
|
|
axisLine: { lineStyle: { color: '#3ec6ff' } },
|
|
axisLabel: { color: '#fff' },
|
|
splitLine: { lineStyle: { color: '#1e90ff22' } }
|
|
},
|
|
series: [{
|
|
data: [80, 120, 100, 130, 150, 180, 200, 220, 250, 285, 230, 200, 180, 150, 120, 100, 80, 60, 40],
|
|
type: 'line',
|
|
smooth: true,
|
|
symbol: 'circle',
|
|
symbolSize: 0,
|
|
itemStyle: { color: '#3ec6ff' },
|
|
lineStyle: { width: 1 },
|
|
areaStyle: { color: new echarts.graphic.LinearGradient(
|
|
0, 0, 0, 1, // 上→下
|
|
[
|
|
{ offset: 0, color: '#32B7E9' },
|
|
{ offset: 1, color: 'rgba(50,183,233,0)' }
|
|
]
|
|
), }
|
|
}]
|
|
}
|
|
chart.setOption(option)
|
|
powerChartInstance = chart
|
|
addChartToResizeManager(chart)
|
|
}
|
|
|
|
// 初始化环境图表
|
|
const initEnvChart = () => {
|
|
if (!envChart.value) return
|
|
|
|
const chart = echarts.init(envChart.value)
|
|
const option = {
|
|
tooltip: { trigger: 'axis' },
|
|
grid: { left: 40, right: 20, top: 10, bottom: 20 },
|
|
xAxis: {
|
|
type: 'category',
|
|
data: Array.from({length: 8}, (_, i) => (i+1)*3),
|
|
axisLine: { lineStyle: { color: '#3ec6ff' } },
|
|
axisLabel: { color: '#fff' }
|
|
},
|
|
yAxis: {
|
|
type: 'value',
|
|
axisLine: { lineStyle: { color: '#3ec6ff' } },
|
|
axisLabel: { color: '#fff' },
|
|
splitLine: { lineStyle: { color: '#1e90ff22' } }
|
|
},
|
|
series: [
|
|
{
|
|
name: '今年',
|
|
data: [100, 200, 150, 300, 250, 200, 100, 80],
|
|
type: 'line',
|
|
smooth: true,
|
|
itemStyle: { color: '#b388ff' },
|
|
lineStyle: { width: 3 },
|
|
areaStyle: { color: 'rgba(179,136,255,0.2)' },
|
|
symbol: 'circle',
|
|
symbolSize: 0,
|
|
},
|
|
{
|
|
name: '去年',
|
|
data: [80, 120, 100, 180, 150, 120, 60, 40],
|
|
type: 'line',
|
|
smooth: true,
|
|
itemStyle: { color: '#ffb300' },
|
|
lineStyle: { width: 3 },
|
|
areaStyle: { color: 'rgba(255,179,0,0.15)' },
|
|
symbol: 'circle',
|
|
symbolSize: 0,
|
|
}
|
|
]
|
|
}
|
|
chart.setOption(option)
|
|
envChartInstance = chart
|
|
addChartToResizeManager(chart)
|
|
}
|
|
|
|
// 初始化水表图表
|
|
const initWaterChart = () => {
|
|
if (!waterChart.value) return
|
|
|
|
const chart = echarts.init(waterChart.value)
|
|
const option = {
|
|
tooltip: { trigger: 'axis' },
|
|
legend: {
|
|
data: ['今日', '平均'],
|
|
textStyle: { color: '#fff' },
|
|
right: 20,
|
|
top: 10
|
|
},
|
|
grid: { left: 40, right: 20, top: 40, bottom: 30 },
|
|
xAxis: {
|
|
type: 'category',
|
|
data: Array.from({length: 19}, (_, i) => i + 6),
|
|
axisLine: { lineStyle: { color: '#3ec6ff' } },
|
|
axisLabel: { color: '#fff' }
|
|
},
|
|
yAxis: {
|
|
type: 'value',
|
|
axisLine: { lineStyle: { color: '#3ec6ff' } },
|
|
axisLabel: { color: '#fff' },
|
|
splitLine: { lineStyle: { color: '#1e90ff22' } }
|
|
},
|
|
series: [
|
|
{
|
|
name: '今日',
|
|
data: [1.2, 2.1, 1.8, 2.5, 3.0, 3.8, 4.2, 4.5, 4.8, 4.8, 4.0, 3.2, 2.5, 2.0, 1.5, 1.0, 0.8, 0.5, 0.2],
|
|
type: 'line',
|
|
smooth: true,
|
|
symbol: 'circle',
|
|
symbolSize: 0,
|
|
itemStyle: { color: '#3ec6ff' },
|
|
lineStyle: { width: 1 },
|
|
areaStyle: { color: new echarts.graphic.LinearGradient(
|
|
0, 0, 0, 1, // 上→下
|
|
[
|
|
{ offset: 0, color: '#32B7E9' },
|
|
{ offset: 1, color: 'rgba(50,183,233,0)' }
|
|
]
|
|
), }
|
|
},
|
|
{
|
|
name: '平均',
|
|
data: Array(19).fill(2.5),
|
|
type: 'line',
|
|
smooth: true,
|
|
symbol: 'none',
|
|
itemStyle: { color: '#ff6b00' },
|
|
lineStyle: { width: 1, type: 'solid', color: '#ff6b00' }
|
|
}
|
|
]
|
|
}
|
|
chart.setOption(option)
|
|
waterChartInstance = chart
|
|
addChartToResizeManager(chart)
|
|
}
|
|
|
|
// 初始化设备图表
|
|
const initDeviceChart = () => {
|
|
if (!deviceChart.value) return
|
|
|
|
const chart = echarts.init(deviceChart.value)
|
|
const option = {
|
|
grid: { left: 60, right: 40, top: 10, bottom: 30 },
|
|
xAxis: {
|
|
type: 'value',
|
|
axisLine: { lineStyle: { color: '#8697BA' } },
|
|
axisLabel: { color: '#fff' },
|
|
splitLine: { show: false }
|
|
},
|
|
yAxis: {
|
|
type: 'category',
|
|
data: ['门禁', '监控', '水表'],
|
|
axisLine: { lineStyle: { color: '#8697BA' } },
|
|
axisLabel: { color: '#A1B2C2' }
|
|
},
|
|
series: [
|
|
{
|
|
name: '设备数',
|
|
type: 'bar',
|
|
data: [650, 120, 40],
|
|
barWidth: 12,
|
|
itemStyle: {
|
|
color: function(params: any) {
|
|
const colors = [
|
|
new echarts.graphic.LinearGradient(
|
|
0, 0, 0, 1, // 上→下
|
|
[
|
|
{ offset: 0, color: '#2986B1' },
|
|
{ offset: 1, color: '#6941FF' }
|
|
]
|
|
),
|
|
new echarts.graphic.LinearGradient(
|
|
0, 0, 0, 1, // 上→下
|
|
[
|
|
{ offset: 0, color: '#33FF99' },
|
|
{ offset: 1, color: '#00908E' }
|
|
]
|
|
),
|
|
new echarts.graphic.LinearGradient(
|
|
0, 0, 0, 1, // 上→下
|
|
[
|
|
{ offset: 0, color: '#01B4FF' },
|
|
{ offset: 1, color: '#0336FF' }
|
|
]
|
|
),
|
|
];
|
|
return colors[params.dataIndex]
|
|
}
|
|
},
|
|
label: {
|
|
show: true,
|
|
position: 'right',
|
|
color: '#fff'
|
|
}
|
|
}
|
|
]
|
|
}
|
|
chart.setOption(option)
|
|
deviceChartInstance = chart
|
|
addChartToResizeManager(chart)
|
|
}
|
|
|
|
// 初始化3D饼图
|
|
const initPie3DChart = () => {
|
|
if (!pie3dChart.value) return
|
|
|
|
pie3dChartInstance = renderPie3DChart(pie3dChart.value, {
|
|
data: [
|
|
{ name: 'A区域', value: 20, itemStyle: { color: '#3ffbff' } },
|
|
{ name: 'D区域', value: 20, itemStyle: { color: '#b388ff' } },
|
|
{ name: 'C区域', value: 45, itemStyle: { color: '#ff9900' } },
|
|
{ name: 'B区域', value: 15, itemStyle: { color: '#3f6bff' } },
|
|
],
|
|
hoverHeightScale: 2,
|
|
selectOffset: 0.1,
|
|
distance: 220,
|
|
boxHeight: 5
|
|
})
|
|
if (pie3dChartInstance) {
|
|
addChartToResizeManager(pie3dChartInstance)
|
|
}
|
|
}
|
|
|
|
const initLineChart = () => {
|
|
if (!lineChart.value) return
|
|
|
|
const chart = echarts.init(lineChart.value)
|
|
chart.setOption(lineChartOption)
|
|
lineChartInstance = chart
|
|
addChartToResizeManager(chart)
|
|
}
|
|
|
|
const initLineChart2 = () => {
|
|
if (!lineChart2.value) return
|
|
const chart = echarts.init(lineChart2.value)
|
|
chart.setOption(lineChart2Option)
|
|
lineChart2Instance = chart
|
|
addChartToResizeManager(chart)
|
|
}
|
|
|
|
const initDeviceThroughputChart = () => {
|
|
if (!deviceThroughputChart.value) return
|
|
deviceThroughputChartInstance = echarts.init(deviceThroughputChart.value)
|
|
deviceThroughputChartInstance.setOption(deviceThroughputOption)
|
|
}
|
|
|
|
// 组件挂载时初始化
|
|
onMounted(() => {
|
|
updateTime()
|
|
timer = setInterval(updateTime, 1000)
|
|
initBarChart()
|
|
initPowerChart()
|
|
initEnvChart()
|
|
initWaterChart()
|
|
initDeviceChart()
|
|
initPie3DChart()
|
|
initPieChart()
|
|
initDeviceThroughputChart()
|
|
initLineChart()
|
|
initLineChart2()
|
|
})
|
|
|
|
// 组件卸载时清理
|
|
onBeforeUnmount(() => {
|
|
if (timer) {
|
|
clearInterval(timer)
|
|
}
|
|
|
|
// 从管理器中移除图表
|
|
if (barChartInstance) {
|
|
removeChartFromResizeManager(barChartInstance)
|
|
barChartInstance.dispose()
|
|
}
|
|
if (powerChartInstance) {
|
|
removeChartFromResizeManager(powerChartInstance)
|
|
powerChartInstance.dispose()
|
|
}
|
|
if (envChartInstance) {
|
|
removeChartFromResizeManager(envChartInstance)
|
|
envChartInstance.dispose()
|
|
}
|
|
if (waterChartInstance) {
|
|
removeChartFromResizeManager(waterChartInstance)
|
|
waterChartInstance.dispose()
|
|
}
|
|
if (deviceChartInstance) {
|
|
removeChartFromResizeManager(deviceChartInstance)
|
|
deviceChartInstance.dispose()
|
|
}
|
|
if (pie3dChartInstance) {
|
|
removeChartFromResizeManager(pie3dChartInstance)
|
|
pie3dChartInstance.dispose()
|
|
}
|
|
if (pieChartInstance) {
|
|
removeChartFromResizeManager(pieChartInstance)
|
|
pieChartInstance.dispose()
|
|
}
|
|
if (deviceThroughputChartInstance) {
|
|
deviceThroughputChartInstance.dispose()
|
|
}
|
|
if (lineChartInstance) {
|
|
removeChartFromResizeManager(lineChartInstance)
|
|
lineChartInstance.dispose()
|
|
}
|
|
if (lineChart2Instance) {
|
|
removeChartFromResizeManager(lineChart2Instance)
|
|
lineChart2Instance.dispose()
|
|
}
|
|
})
|
|
</script>
|
|
|
|
<style scoped>
|
|
@font-face {
|
|
font-family: 'ShiShangZhongHeiJianTi';
|
|
src: url('../../../assets/fonts/时尚中黑简体.ttf') format('truetype');
|
|
font-weight: normal;
|
|
font-style: normal;
|
|
}
|
|
.mian{
|
|
height: 100vh;
|
|
background: url("../../../assets/digitalIntelligence/bg.png");
|
|
background-size: 100% 100%;
|
|
background-color: #081b3a;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
.title {
|
|
height: 5.375rem;
|
|
align-items: center;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
.left{
|
|
display: flex;
|
|
width: 14.3125rem;
|
|
.left-first{
|
|
padding-left: 2.3125rem;
|
|
padding-right: 3.5rem;
|
|
font-size: 1.875rem;
|
|
color: #FFFFFF;
|
|
}
|
|
.left-second{
|
|
width: 6.5rem;
|
|
font-family: ShiShangZhongHeiJianTi;
|
|
font-weight: 400;
|
|
font-size: 1.25rem;
|
|
color: #FFFFFF;
|
|
}
|
|
}
|
|
.center{
|
|
font-size: 1.9rem;
|
|
color: #fff;
|
|
text-align: center;
|
|
font-weight: bold;
|
|
letter-spacing: 0.1em;
|
|
text-shadow: 0 0 10px #1e90ff, 0 0 20px #1e90ff;
|
|
}
|
|
.right{
|
|
width: 17.3125rem;
|
|
display: flex;
|
|
font-family: ShiShangZhongHeiJianTi;
|
|
font-weight: 400;
|
|
font-size: 1.25rem;
|
|
color: #FFFFFF;
|
|
gap: .75rem;
|
|
.logout{
|
|
display: flex;
|
|
cursor: pointer;
|
|
align-items: center;
|
|
gap: .2rem;
|
|
}
|
|
}
|
|
}
|
|
.contents{
|
|
flex: 1;
|
|
.content{
|
|
height: 100%;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
margin: 1rem 2rem 1.75rem 2rem;
|
|
.content-left{
|
|
width: 32.6875rem;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-between;
|
|
.first{
|
|
height: 17rem;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-between;
|
|
.first-content1{
|
|
margin: 0 1.8rem;
|
|
height: 7.5rem;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
}
|
|
.first-content1 div{
|
|
width: 3rem;
|
|
color: #fff;
|
|
font-size: 1rem;
|
|
font-weight: bold;
|
|
text-align: left;
|
|
}
|
|
.first-content2{
|
|
flex: 1;
|
|
.pie-chart {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
}
|
|
}
|
|
.second{
|
|
height: 12rem;
|
|
.second-content{
|
|
height: 100%;
|
|
.power-chart {
|
|
height: 100%;
|
|
}
|
|
}
|
|
|
|
}
|
|
.third{
|
|
height: 18rem;
|
|
.third-content{
|
|
margin-top: 2rem;
|
|
display: flex;
|
|
flex-direction: column;
|
|
height: 16rem;
|
|
.content1{
|
|
height: 5.5rem;
|
|
display: flex;
|
|
justify-content: space-around;
|
|
align-items: center;
|
|
}
|
|
.content1 div{
|
|
width: 7rem;
|
|
height: 4rem;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 1.5rem;
|
|
color: #fff;
|
|
font-weight: bold;
|
|
}
|
|
.content2{
|
|
flex: 1;
|
|
.device-throughput-chart{
|
|
height: 100%;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.content-center{
|
|
width: 46.5rem;
|
|
display: flex;
|
|
flex-direction: column;
|
|
.first{
|
|
width: 100%;
|
|
height: 10rem;
|
|
display: flex;
|
|
justify-content: space-around;
|
|
align-items: center;
|
|
font-size: 1.5rem;
|
|
color: #fff;
|
|
font-weight: bold;
|
|
}
|
|
.second{
|
|
margin-top: 1.5rem;
|
|
height: 30.68rem;
|
|
background: url("../../../assets/digitalIntelligence/center-bg.png");
|
|
background-size: 100% 100%;
|
|
background-repeat: no-repeat;
|
|
background-position: center;
|
|
|
|
}
|
|
}
|
|
.content-right{
|
|
width: 33rem;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-between;
|
|
.first{
|
|
height: 20.5rem;
|
|
display: flex;
|
|
flex-direction: column;
|
|
.first-content1{
|
|
flex: 1;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: end;
|
|
.line-chart {
|
|
width: 90%;
|
|
height: 75%;
|
|
}
|
|
}
|
|
.first-content2{
|
|
flex: 1;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: end;
|
|
.line-chart {
|
|
width: 90%;
|
|
height: 75%;
|
|
}
|
|
}
|
|
}
|
|
.second{
|
|
height: 7rem;
|
|
padding-top: 2rem;
|
|
.second-box{
|
|
height: 100%;
|
|
display: flex;
|
|
justify-content: space-around;
|
|
.content1{
|
|
background: url("../../../assets/digitalIntelligence/circle1.png");
|
|
background-size: 100% 100%;
|
|
background-repeat: no-repeat;
|
|
background-position: center;
|
|
width: 6rem;
|
|
height: 6rem;
|
|
display: flex;
|
|
justify-content: center;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
font-size: 1.5rem;
|
|
color: #fff;
|
|
font-weight: bold;
|
|
}
|
|
.content2{
|
|
flex-direction: column;
|
|
background: url("../../../assets/digitalIntelligence/circle2.png");
|
|
background-size: 100% 100%;
|
|
background-repeat: no-repeat;
|
|
background-position: center;
|
|
width: 6rem;
|
|
height: 6rem;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
font-size: 1.5rem;
|
|
color: #fff;
|
|
font-weight: bold;
|
|
}
|
|
.content3{
|
|
flex-direction: column;
|
|
background: url("../../../assets/digitalIntelligence/circle3.png");
|
|
background-size: 100% 100%;
|
|
background-repeat: no-repeat;
|
|
background-position: center;
|
|
width: 6rem;
|
|
height: 6rem;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
font-size: 1.5rem;
|
|
color: #fff;
|
|
font-weight: bold;
|
|
}
|
|
.content4{
|
|
flex-direction: column;
|
|
background: url("../../../assets/digitalIntelligence/circle4.png");
|
|
background-size: 100% 100%;
|
|
background-repeat: no-repeat;
|
|
background-position: center;
|
|
width: 6rem;
|
|
height: 6rem;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
font-size: 1.5rem;
|
|
color: #fff;
|
|
font-weight: bold;
|
|
}
|
|
.content-title{
|
|
font-size: .8rem;
|
|
}
|
|
}
|
|
}
|
|
.third{
|
|
height: 18rem;
|
|
.device-cards {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
margin-top: 2rem;
|
|
margin-right: 1.06rem;
|
|
/* margin-bottom: 0.5rem; */
|
|
margin-left: 1.31rem;
|
|
.device-card1{
|
|
height: 3.2rem;
|
|
width: 7.21rem;
|
|
background: url("../../../assets/energyConsumptionAnalysis/devices-number.png");
|
|
background-size: 100% 100%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
|
|
.device-card1-value{
|
|
font-family: Arial;
|
|
font-weight: bold;
|
|
font-size: 1.25rem;
|
|
color: #02B3F4;
|
|
}
|
|
}
|
|
.device-card2{
|
|
height: 3.2rem;
|
|
width: 7.21rem;
|
|
background: url("../../../assets/energyConsumptionAnalysis/devices-online.png");
|
|
background-size: 100% 100%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
.device-card2-value{
|
|
font-family: Arial;
|
|
font-weight: bold;
|
|
font-size: 1.25rem;
|
|
color: #1DE39D;
|
|
}
|
|
}
|
|
.device-card3{
|
|
height: 3.2rem;
|
|
width: 7.21rem;
|
|
background: url("../../../assets/energyConsumptionAnalysis/devices-offline.png");
|
|
background-size: 100% 100%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
.device-card3-value{
|
|
font-family: Arial;
|
|
font-weight: bold;
|
|
font-size: 1.25rem;
|
|
color: #F19315;
|
|
}
|
|
}
|
|
.device-card-text{
|
|
font-family: Microsoft YaHei UI;
|
|
font-weight: 400;
|
|
font-size: 0.75rem;
|
|
color: #A1B2C2;
|
|
line-height: 0.75rem;
|
|
}
|
|
}
|
|
.device-chart {
|
|
height: 10rem;
|
|
/* margin-top: 0.2rem; */
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.pie3d-title {
|
|
color: #fff;
|
|
font-size: 1.1rem;
|
|
font-weight: bold;
|
|
margin-bottom: 0.3rem;
|
|
}
|
|
.pie3d-water {
|
|
color: #fff;
|
|
font-size: 0.95rem;
|
|
margin-bottom: 0.2rem;
|
|
}
|
|
.pie3d-water-num {
|
|
font-size: 1.3rem;
|
|
color: #3ec6ff;
|
|
background: #0a1e3a;
|
|
border-radius: 0.2rem;
|
|
padding: 0 0.2rem;
|
|
margin: 0 0.2rem;
|
|
letter-spacing: 0.1em;
|
|
}
|
|
.pie3d-chart {
|
|
width: 100%;
|
|
height: 176px;
|
|
min-height: unset;
|
|
margin: 0 auto;
|
|
}
|
|
</style>
|