fuguobin
10 months ago
41 changed files with 2655 additions and 4 deletions
@ -0,0 +1,122 @@ |
|||
import request from '@/utils/request'; |
|||
import { AxiosPromise } from 'axios'; |
|||
import { weatherVo } from './types'; |
|||
|
|||
/** |
|||
* 获取公司列表 |
|||
*/ |
|||
export function companyList() { |
|||
return request({ |
|||
url: '/assetData/dataScreenMain/company/tree/0', |
|||
method: 'get' |
|||
}); |
|||
} |
|||
|
|||
/** |
|||
* 获取天气预报 |
|||
*/ |
|||
export function getWeather(): AxiosPromise<[]> { |
|||
return request({ |
|||
url: 'assetData/dataScreenMain/weather/0', |
|||
method: 'get' |
|||
}); |
|||
} |
|||
|
|||
/** |
|||
* 总发电量接口 |
|||
*/ |
|||
export function powerInfoAll(data: any) { |
|||
return request({ |
|||
url: '/assetData/dataScreenMain/powerInfoAll', |
|||
method: 'post', |
|||
data: data |
|||
}); |
|||
} |
|||
|
|||
/** |
|||
* 公司面积接口 |
|||
*/ |
|||
export function squareInfoCompany(data: any) { |
|||
return request({ |
|||
url: '/assetData/dataScreenMain/squareInfoCompany', |
|||
method: 'post', |
|||
data: data |
|||
}); |
|||
} |
|||
|
|||
/** |
|||
* 集团面积接口 |
|||
*/ |
|||
export function squareInfoGroup(data: any) { |
|||
return request({ |
|||
url: '/assetData/dataScreenMain/squareInfoGroup', |
|||
method: 'post', |
|||
data: data |
|||
}); |
|||
} |
|||
|
|||
/** |
|||
* 煤消耗接口 |
|||
*/ |
|||
export function coalLostRate(data: any) { |
|||
return request({ |
|||
url: '/assetData/dataScreenMain/coalLostRate', |
|||
method: 'post', |
|||
data: data |
|||
}); |
|||
} |
|||
|
|||
/** |
|||
* 水消耗接口 |
|||
*/ |
|||
export function waterInfo(data: any) { |
|||
return request({ |
|||
url: '/assetData/dataScreenMain/waterInfo', |
|||
method: 'post', |
|||
data: data |
|||
}); |
|||
} |
|||
|
|||
/** |
|||
* 电消耗接口 |
|||
*/ |
|||
export function powerLostRate(data: any) { |
|||
return request({ |
|||
url: '/assetData/dataScreenMain/powerLostRate', |
|||
method: 'post', |
|||
data: data |
|||
}); |
|||
} |
|||
|
|||
/** |
|||
* 地图数据 |
|||
*/ |
|||
export function mapInfo(data: any) { |
|||
return request({ |
|||
url: 'assetData/dataScreenMain/mapInfo', |
|||
method: 'post', |
|||
data: data |
|||
}); |
|||
} |
|||
|
|||
/** |
|||
* 每平米产热量数据排名 |
|||
*/ |
|||
export function heatRateRange(data: any) { |
|||
return request({ |
|||
url: 'assetData/dataScreenMain/heatRateRange', |
|||
method: 'post', |
|||
data: data |
|||
}); |
|||
} |
|||
|
|||
/** |
|||
* 每平米耗煤量数据排名 |
|||
*/ |
|||
export function coalConsumptionRange(data: any) { |
|||
return request({ |
|||
url: 'assetData/dataScreenMain/coalConsumptionRange', |
|||
method: 'post', |
|||
data: data |
|||
}); |
|||
} |
|||
@ -0,0 +1,22 @@ |
|||
/** |
|||
* 天气参数 |
|||
*/ |
|||
export interface weatherVo { |
|||
date: string; |
|||
tem_day: string; |
|||
tem_night: string; |
|||
wea: string; |
|||
wea_img: string; |
|||
win: string; |
|||
win_speed: string; |
|||
} |
|||
|
|||
/** |
|||
* 水消耗参数 |
|||
*/ |
|||
export interface waterVo { |
|||
field1: number; |
|||
field2: number; |
|||
field3: number; |
|||
name: string; |
|||
} |
|||
Binary file not shown.
Binary file not shown.
|
After Width: | Height: | Size: 32 KiB |
|
After Width: | Height: | Size: 1.4 KiB |
|
After Width: | Height: | Size: 4.3 KiB |
|
After Width: | Height: | Size: 8.3 KiB |
|
After Width: | Height: | Size: 6.4 KiB |
|
After Width: | Height: | Size: 7.0 KiB |
|
After Width: | Height: | Size: 1.1 KiB |
|
After Width: | Height: | Size: 2.2 KiB |
|
After Width: | Height: | Size: 2.3 KiB |
|
After Width: | Height: | Size: 949 KiB |
|
After Width: | Height: | Size: 885 KiB |
|
After Width: | Height: | Size: 656 KiB |
|
After Width: | Height: | Size: 1.8 KiB |
|
After Width: | Height: | Size: 28 KiB |
|
After Width: | Height: | Size: 18 KiB |
|
After Width: | Height: | Size: 178 KiB |
|
After Width: | Height: | Size: 1.3 MiB |
|
After Width: | Height: | Size: 49 KiB |
|
After Width: | Height: | Size: 58 KiB |
|
After Width: | Height: | Size: 22 KiB |
@ -0,0 +1,25 @@ |
|||
import { defineStore } from 'pinia'; |
|||
|
|||
const useCounter = defineStore('date', { |
|||
/** |
|||
* 存储全局状态 |
|||
*/ |
|||
state: () => ({ |
|||
dateStr: '' |
|||
}), |
|||
|
|||
/** |
|||
* 用来封装计算属性 有缓存功能 类似于computed |
|||
*/ |
|||
getters: {}, |
|||
|
|||
/** |
|||
* 编辑业务逻辑 类似于methods |
|||
*/ |
|||
actions: { |
|||
dateStore(val) { |
|||
this.dateStr = val; |
|||
} |
|||
} |
|||
}); |
|||
export default useCounter; |
|||
@ -0,0 +1,162 @@ |
|||
<template> |
|||
<div class="electricityInfo"> |
|||
<div ref="electricityRef" class="electricityLine" /> |
|||
</div> |
|||
</template> |
|||
<script lang="ts" setup> |
|||
import * as echarts from 'echarts'; |
|||
import { Ref } from 'vue'; |
|||
import { powerLostRate } from '@/api/data/index'; |
|||
import useCounter from '@/store/modules/date'; |
|||
const counterStore = useCounter(); |
|||
const yearMonthDay = ref(); |
|||
const electricityRef: Ref<HTMLElement | any> = ref(null); |
|||
|
|||
const options = { |
|||
tooltip: { |
|||
trigger: 'axis', |
|||
axisPointer: { |
|||
type: 'cross' |
|||
} |
|||
}, |
|||
legend: { |
|||
top: 10, |
|||
right: 10, |
|||
itemWidth: 11, |
|||
itemHeight: 11, |
|||
textStyle: { |
|||
color: '#fff', |
|||
fontSize: 14 |
|||
} |
|||
}, |
|||
grid: { |
|||
top: '20%', |
|||
left: '0', |
|||
right: '0', |
|||
bottom: '0', |
|||
containLabel: true |
|||
}, |
|||
dataset: { |
|||
source: [ |
|||
['name', '合力供热站', '浑南热力', '国润低碳', '新环保', '节能环保'], |
|||
['计划数', 41.1, 30.4, 65.1, 53.3, 69], |
|||
['实际数', 35.5, 92.1, 85.7, 83.1, 72] |
|||
] |
|||
}, |
|||
xAxis: { |
|||
type: 'category', |
|||
axisLabel: { |
|||
show: true, |
|||
color: '#99CFFF' |
|||
}, |
|||
axisLine: { |
|||
lineStyle: { |
|||
color: '#546778' |
|||
} |
|||
} |
|||
}, |
|||
yAxis: [ |
|||
{ |
|||
type: 'value', |
|||
name: '单位', |
|||
nameTextStyle: { |
|||
color: '#546778', |
|||
fontSize: 12, |
|||
padding: [0, 0, 0, 0] //name文字位置 对应 上右下左 |
|||
}, |
|||
axisTick: { |
|||
// 轴刻度 |
|||
show: false |
|||
}, |
|||
axisLabel: { |
|||
show: true, |
|||
color: '#546778' |
|||
}, |
|||
splitLine: { |
|||
// 网格线 |
|||
show: true, |
|||
lineStyle: { |
|||
//分割线 |
|||
color: '#306269', |
|||
width: 1, |
|||
opacity: 0.2 |
|||
} |
|||
}, |
|||
} |
|||
], |
|||
series: [ |
|||
{ |
|||
type: 'bar', |
|||
seriesLayoutBy: 'row', |
|||
barWidth: 15, //设置宽度 |
|||
itemStyle: { |
|||
//渐变背景 |
|||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ |
|||
{ offset: 0, color: '#61B9FF' }, |
|||
{ offset: 0.5, color: '#4263DF' }, |
|||
{ offset: 1, color: '#2106BD' } |
|||
]) |
|||
} |
|||
}, |
|||
{ |
|||
type: 'bar', |
|||
seriesLayoutBy: 'row', |
|||
barWidth: 15, //柱宽 |
|||
itemStyle: { |
|||
//渐变背景 |
|||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ |
|||
{ offset: 0, color: '#F2DE28' }, |
|||
{ offset: 0.5, color: '#F5A113' }, |
|||
{ offset: 1, color: '#F96800' } |
|||
]) |
|||
} |
|||
} |
|||
] |
|||
}; |
|||
|
|||
onMounted(() => { |
|||
// 图表初始化 |
|||
const chart = echarts.init(electricityRef.value); |
|||
chart.setOption(options); |
|||
// getElect(); |
|||
|
|||
// 大小自适应 |
|||
window.addEventListener('resize', () => { |
|||
chart.resize(); |
|||
}); |
|||
}); |
|||
watchEffect(() => { |
|||
const dataStr = counterStore.dateStr; |
|||
if (dataStr != '') { |
|||
yearMonthDay.value = counterStore.dateStr.split('-'); |
|||
// getElect(); |
|||
} |
|||
}); |
|||
function getElect() { |
|||
//获取图表数据 |
|||
const params = { |
|||
orgId: 206, |
|||
dateYear: yearMonthDay.value[0], |
|||
dateMonth: yearMonthDay.value[1], |
|||
dateDay: yearMonthDay.value[2] |
|||
}; |
|||
powerLostRate(params).then((res: any) => { |
|||
if (res.code === 200 && Object.keys(res.data).length != 0) { |
|||
options.dataset.source = res.data.source; |
|||
options.yAxis[0].name = `单位(${res.data.unit})`; |
|||
const chart = echarts.init(electricityRef.value); |
|||
chart.setOption(options); |
|||
} |
|||
}); |
|||
} |
|||
</script> |
|||
<style lang="scss" scoped> |
|||
.electricityInfo { |
|||
width: 100%; |
|||
height: 318px; |
|||
.electricityLine { |
|||
width: 100%; |
|||
height: 318px; |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,154 @@ |
|||
<template> |
|||
<div class="boxPlotInfo"> |
|||
<div ref="boxPlotRef" class="electricityLine" /> |
|||
</div> |
|||
</template> |
|||
<script lang="ts" setup> |
|||
import * as echarts from 'echarts'; |
|||
import { Ref } from 'vue'; |
|||
import { powerLostRate } from '@/api/data/index'; |
|||
import useCounter from '@/store/modules/date'; |
|||
const counterStore = useCounter(); |
|||
const yearMonthDay = ref(); |
|||
const boxPlotRef: Ref<HTMLElement | any> = ref(null); |
|||
|
|||
const options = { |
|||
tooltip: { |
|||
trigger: 'axis', |
|||
axisPointer: { |
|||
type: 'cross' |
|||
} |
|||
}, |
|||
legend: { |
|||
top: 10, |
|||
right: 10, |
|||
itemWidth: 11, |
|||
itemHeight: 2, |
|||
textStyle: { |
|||
color: '#fff', |
|||
fontSize: 14 |
|||
} |
|||
}, |
|||
grid: { |
|||
top: '20%', |
|||
left: '0', |
|||
right: '0', |
|||
bottom: '0', |
|||
containLabel: true |
|||
}, |
|||
dataset: { |
|||
source: [ |
|||
['name', '合力供热站', '浑南热力', '国润低碳', '新环保', '节能环保'], |
|||
['一网进温', 35.5, 92.1, 85.7, 83.1, 72], |
|||
['一网回温', 41.1, 50.4, 65.1, 53.3, 69] |
|||
] |
|||
}, |
|||
xAxis: { |
|||
type: 'category', |
|||
axisLabel: { |
|||
show: true, |
|||
color: '#fff' |
|||
} |
|||
}, |
|||
yAxis: [ |
|||
{ |
|||
type: 'value', |
|||
name: '单位', |
|||
scale: true, //自适应 |
|||
nameTextStyle: { |
|||
color: '#fff', |
|||
fontSize: 12, |
|||
padding: [0, 0, 0, 0] //name文字位置 对应 上右下左 |
|||
}, |
|||
axisTick: { |
|||
// 轴刻度 |
|||
show: false |
|||
}, |
|||
axisLabel: { |
|||
show: true, |
|||
color: '#fff' |
|||
}, |
|||
splitLine: { |
|||
// 网格线 |
|||
show: true, |
|||
lineStyle: { |
|||
//分割线 |
|||
color: '#306269', |
|||
width: 1, |
|||
opacity: 0.2 |
|||
} |
|||
} |
|||
} |
|||
], |
|||
series: [ |
|||
{ |
|||
type: 'bar', |
|||
seriesLayoutBy: 'row', |
|||
barWidth: 15, //设置宽度 |
|||
itemStyle: { |
|||
//渐变背景 |
|||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ |
|||
{ offset: 0, color: '#2850F2' }, |
|||
{ offset: 0.5, color: '#1390F9' }, |
|||
{ offset: 1, color: '#00CBFF' } |
|||
]) |
|||
} |
|||
}, |
|||
{ |
|||
type: 'line', |
|||
seriesLayoutBy: 'row', |
|||
barWidth: 15, //柱宽 |
|||
itemStyle: { |
|||
color: '#FFEB6B', //设置背景色 |
|||
borderWidth: 1, //设置边框宽度 |
|||
borderColor: '#FFEB6B' //设置边框颜色 |
|||
} |
|||
} |
|||
] |
|||
}; |
|||
|
|||
onMounted(() => { |
|||
// 图表初始化 |
|||
const chart = echarts.init(boxPlotRef.value); |
|||
chart.setOption(options); |
|||
// getElect(); |
|||
|
|||
// 大小自适应 |
|||
window.addEventListener('resize', () => { |
|||
chart.resize(); |
|||
}); |
|||
}); |
|||
watchEffect(() => { |
|||
const dataStr = counterStore.dateStr; |
|||
if (dataStr != '') { |
|||
yearMonthDay.value = counterStore.dateStr.split('-'); |
|||
// getElect(); |
|||
} |
|||
}); |
|||
function getElect() { |
|||
//获取图表数据 |
|||
const params = { |
|||
orgId: 206, |
|||
dateYear: yearMonthDay.value[0], |
|||
dateMonth: yearMonthDay.value[1], |
|||
dateDay: yearMonthDay.value[2] |
|||
}; |
|||
powerLostRate(params).then((res: any) => { |
|||
if (res.code === 200 && Object.keys(res.data).length != 0) { |
|||
const chart = echarts.init(boxPlotRef.value); |
|||
chart.setOption(options); |
|||
} |
|||
}); |
|||
} |
|||
</script> |
|||
<style lang="scss" scoped> |
|||
.boxPlotInfo { |
|||
width: 100%; |
|||
height: 318px; |
|||
|
|||
.electricityLine { |
|||
width: 100%; |
|||
height: 318px; |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,141 @@ |
|||
<template> |
|||
<div class="chartsInfo"> |
|||
<div class="leftInfo"> |
|||
<div class="temp"> |
|||
<div class="title"> |
|||
<span>一网温度<i></i></span> |
|||
</div> |
|||
<div class="info"> |
|||
<BoxPlot /> |
|||
</div> |
|||
</div> |
|||
<div class="flow"> |
|||
<div class="title"> |
|||
<span>一网热力站流量<i></i></span> |
|||
</div> |
|||
<div class="info"> |
|||
<Bar /> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<div class="centerInfo"> |
|||
<div class="temp"> |
|||
<div class="title"> |
|||
<span>温度<i></i></span> |
|||
</div> |
|||
<div class="info"> |
|||
<Temp /> |
|||
</div> |
|||
</div> |
|||
<div class="flow"> |
|||
<div class="title"> |
|||
<span>压力<i></i></span> |
|||
</div> |
|||
<div class="info"> |
|||
<Line /> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<div class="leftInfo"> |
|||
<div class="temp"> |
|||
<div class="title"> |
|||
<span>二网温度<i></i></span> |
|||
</div> |
|||
<div class="info"> |
|||
<BoxPlot /> |
|||
</div> |
|||
</div> |
|||
<div class="flow"> |
|||
<div class="title"> |
|||
<span>二网热力站压力<i></i></span> |
|||
</div> |
|||
<div class="info"> |
|||
<Bar /> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
<script lang="ts" setup> |
|||
import BoxPlot from './boxPlot.vue'; |
|||
import Bar from './bar.vue'; |
|||
import Temp from './temp.vue'; |
|||
import Line from './line.vue'; |
|||
import Table from './table.vue'; |
|||
</script> |
|||
<style lang="scss" scoped> |
|||
.chartsInfo { |
|||
display: flex; |
|||
justify-content: space-between; |
|||
align-items: center; |
|||
.temp, |
|||
.flow { |
|||
height: 421px; |
|||
padding: 20px 27px; |
|||
border: 1px solid #3776b8; |
|||
} |
|||
.temp { |
|||
margin-bottom: 28px; |
|||
} |
|||
.leftInfo { |
|||
width: 603px; |
|||
.title { |
|||
position: relative; |
|||
width: 100%; |
|||
height: 55px; |
|||
background-image: url(@/assets/images/dataVisual/title_bg.png); |
|||
background-size: 100% 100%; |
|||
margin-bottom: 8px; |
|||
span { |
|||
position: absolute; |
|||
top: -12px; |
|||
left: 42px; |
|||
display: flex; |
|||
align-items: center; |
|||
font-size: 28px; |
|||
font-family: 'PangMenZhengDaoBiao'; |
|||
font-weight: 400; |
|||
font-style: oblique; |
|||
color: #fff; |
|||
i { |
|||
font-style: normal; |
|||
margin-left: 25px; |
|||
font-size: 14px; |
|||
color: #fff; |
|||
opacity: 0.4; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
.centerInfo { |
|||
width: 1231px; |
|||
.title { |
|||
position: relative; |
|||
width: 100%; |
|||
height: 55px; |
|||
background-image: url(@/assets/images/dataVisual/title_bg_l.png); |
|||
background-size: 100% 100%; |
|||
margin-bottom: 8px; |
|||
span { |
|||
position: absolute; |
|||
top: -12px; |
|||
left: 42px; |
|||
display: flex; |
|||
align-items: center; |
|||
font-size: 28px; |
|||
font-family: 'PangMenZhengDaoBiao'; |
|||
font-weight: 400; |
|||
font-style: oblique; |
|||
color: #fff; |
|||
i { |
|||
font-style: normal; |
|||
margin-left: 25px; |
|||
font-size: 14px; |
|||
color: #fff; |
|||
opacity: 0.4; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,347 @@ |
|||
<template> |
|||
<div class="headerInfo"> |
|||
<div class="date"> |
|||
<div class="time">{{ currentTime }}</div> |
|||
<div class="line"></div> |
|||
<div class="forecast"> |
|||
<span>{{ weatherData.weather }}</span> |
|||
<span>{{ weatherData.temperature }}℃</span> |
|||
<svg-icon class="weatherSvg" :icon-class="weatherData.weatherImg" /> |
|||
</div> |
|||
</div> |
|||
<div class="title"> |
|||
<div class="logo"> |
|||
<svg-icon class="logoIcon" icon-class="BIlogo" /> |
|||
</div> |
|||
<div class="line"></div> |
|||
<div class="text">智能生产调度系统 - 大唐管井锅炉房</div> |
|||
</div> |
|||
<div class="home"> |
|||
<div class="homeBtn"> |
|||
<div class="homeIcon"> |
|||
<svg viewBox="0 0 20 20.215051651000977"> |
|||
<path |
|||
d="M9.48822390625,1.01971315625C9.78914390625,0.78314275625,10.21050390625,0.78314275625,10.51142390625,1.01971315625C10.51142390625,1.01971315625,18.01140390625,6.91577515625,18.01140390625,6.91577515625C18.21440390625,7.07534515625,18.33320390625,7.32071515625,18.33320390625,7.58063515625C18.33320390625,7.58063515625,18.33320390625,16.84588515625,18.33320390625,16.84588515625C18.33320390625,17.51608515625,18.06970390625,18.15878515625,17.60090390625,18.63258515625C17.132103906250002,19.10648515625,16.49630390625,19.37278515625,15.83320390625,19.37278515625C15.83320390625,19.37278515625,4.16650390625,19.37278515625,4.16650390625,19.37278515625C3.50346390625,19.37278515625,2.86757390625,19.10648515625,2.39873690625,18.63258515625C1.92989590625,18.15878515625,1.66650390625,17.51608515625,1.66650390625,16.84588515625C1.66650390625,16.84588515625,1.66650390625,7.58063515625,1.66650390625,7.58063515625C1.66650390625,7.32071515625,1.78523090625,7.07534515625,1.98821990625,6.91577515625C1.98821990625,6.91577515625,9.48822390625,1.01971315625,9.48822390625,1.01971315625C9.48822390625,1.01971315625,9.48822390625,1.01971315625,9.48822390625,1.01971315625ZM8.33317390625,17.68818515625C8.33317390625,17.68818515625,11.66650390625,17.68818515625,11.66650390625,17.68818515625C11.66650390625,17.68818515625,11.66650390625,10.94978515625,11.66650390625,10.94978515625C11.66650390625,10.94978515625,8.33317390625,10.94978515625,8.33317390625,10.94978515625C8.33317390625,10.94978515625,8.33317390625,17.68818515625,8.33317390625,17.68818515625C8.33317390625,17.68818515625,8.33317390625,17.68818515625,8.33317390625,17.68818515625ZM13.33320390625,17.68818515625C13.33320390625,17.68818515625,13.33320390625,10.10751515625,13.33320390625,10.10751515625C13.33320390625,9.64231515625,12.96010390625,9.26522515625,12.49980390625,9.26522515625C12.49980390625,9.26522515625,7.49983390625,9.26522515625,7.49983390625,9.26522515625C7.03960390625,9.26522515625,6.66650390625,9.64231515625,6.66650390625,10.10751515625C6.66650390625,10.10751515625,6.66650390625,17.68818515625,6.66650390625,17.68818515625C6.66650390625,17.68818515625,4.16650390625,17.68818515625,4.16650390625,17.68818515625C3.94548390625,17.68818515625,3.73352390625,17.59938515625,3.57724390625,17.44148515625C3.42097390625,17.28348515625,3.33317390625,17.06928515625,3.33317390625,16.84588515625C3.33317390625,16.84588515625,3.33317390625,7.99258515625,3.33317390625,7.99258515625C3.33317390625,7.99258515625,9.99983390625,2.75164515625,9.99983390625,2.75164515625C9.99983390625,2.75164515625,16.66650390625,7.99258515625,16.66650390625,7.99258515625C16.66650390625,7.99258515625,16.66650390625,16.84588515625,16.66650390625,16.84588515625C16.66650390625,17.06928515625,16.57870390625,17.28348515625,16.42240390625,17.44148515625C16.26620390625,17.59938515625,16.054203906250002,17.68818515625,15.83320390625,17.68818515625C15.83320390625,17.68818515625,13.33320390625,17.68818515625,13.33320390625,17.68818515625C13.33320390625,17.68818515625,13.33320390625,17.68818515625,13.33320390625,17.68818515625Z" |
|||
fill-rule="evenodd" |
|||
fill="#FFFFFF" |
|||
fill-opacity="1" |
|||
></path> |
|||
</svg> |
|||
</div> |
|||
<div class="text">HOME</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<div class="menuInfo"> |
|||
<div class="return"> |
|||
<svg class="returnIcon" viewBox="0 0 20 20"> |
|||
<path |
|||
d="M16.6667,2.5C17.1269,2.5,17.5,2.873096,17.5,3.333333C17.5,3.333333,17.5,9.16667,17.5,9.16667C17.5,10.27173,17.061,11.33158,16.279600000000002,12.11292C15.4983,12.8943,14.4384,13.3333,13.3333,13.3333C13.3333,13.3333,5.34518,13.3333,5.34518,13.3333C5.34518,13.3333,8.08926,16.0774,8.08926,16.0774C8.41469,16.4028,8.41469,16.930500000000002,8.08926,17.2559C7.76382,17.5813,7.23618,17.5813,6.91074,17.2559C6.91074,17.2559,2.744077,13.0892,2.744077,13.0892C2.4186408,12.7638,2.4186408,12.23617,2.744077,11.91075C2.744077,11.91075,6.91074,7.74407,6.91074,7.74407C7.23618,7.41864,7.76382,7.41864,8.08926,7.74407C8.41469,8.06952,8.41469,8.59715,8.08926,8.92259C8.08926,8.92259,5.34518,11.66667,5.34518,11.66667C5.34518,11.66667,13.3333,11.66667,13.3333,11.66667C13.9963,11.66667,14.6322,11.40325,15.1011,10.93442C15.5699,10.465589999999999,15.8333,9.82971,15.8333,9.16667C15.8333,9.16667,15.8333,3.333333,15.8333,3.333333C15.8333,2.873096,16.206400000000002,2.5,16.6667,2.5C16.6667,2.5,16.6667,2.5,16.6667,2.5Z" |
|||
fill-rule="evenodd" |
|||
fill="#FFA949" |
|||
fill-opacity="1" |
|||
></path> |
|||
</svg> |
|||
<span class="tooltip">返回</span> |
|||
</div> |
|||
<div class="menu"> |
|||
<el-popover popper-class="menuPopover" placement="bottom-start" trigger="hover" :width="200"> |
|||
<template #reference> |
|||
<svg-icon class="menuIcon" icon-class="icon_menu" /> |
|||
</template> |
|||
<div class="menuList"> |
|||
<el-tree :data="data" :props="defaultProps" accordion highlight-current @node-click="handleNodeClick" /> |
|||
</div> |
|||
</el-popover> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
<script lang="ts" setup> |
|||
import { useDateFormat, useNow } from '@vueuse/core'; |
|||
import { getWeather } from '@/api/user/index'; |
|||
import calendar from '@/utils/lunar'; |
|||
const currentTime = useDateFormat(useNow(), 'YYYY-MM-DD HH:mm:ss'); |
|||
const weatherData = ref({ city: '', weather: '', temperature: '', weatherImg: '' }); |
|||
const timer = ref(); |
|||
const isCurrentRoute = ref(true); |
|||
|
|||
interface Tree { |
|||
label: string; |
|||
children?: Tree[]; |
|||
} |
|||
const handleNodeClick = (node: any) => { |
|||
if (!node.children || node.children.length === 0) { |
|||
console.log(node) |
|||
} |
|||
}; |
|||
const data: Tree[] = [ |
|||
{ |
|||
label: 'Level one 1', |
|||
children: [ |
|||
{ |
|||
label: 'Level two 1-1', |
|||
children: [ |
|||
{ |
|||
label: 'Level three 1-1-1' |
|||
} |
|||
] |
|||
} |
|||
] |
|||
}, |
|||
{ |
|||
label: 'Level one 2', |
|||
children: [ |
|||
{ |
|||
label: 'Level two 2-1', |
|||
children: [ |
|||
{ |
|||
label: 'Level three 2-1-1' |
|||
} |
|||
] |
|||
}, |
|||
{ |
|||
label: 'Level two 2-2', |
|||
children: [ |
|||
{ |
|||
label: 'Level three 2-2-1' |
|||
} |
|||
] |
|||
} |
|||
] |
|||
}, |
|||
{ |
|||
label: 'Level one 3', |
|||
children: [ |
|||
{ |
|||
label: 'Level two 3-1', |
|||
children: [ |
|||
{ |
|||
label: 'Level three 3-1-1' |
|||
} |
|||
] |
|||
}, |
|||
{ |
|||
label: 'Level two 3-2', |
|||
children: [ |
|||
{ |
|||
label: 'Level three 3-2-1' |
|||
} |
|||
] |
|||
} |
|||
] |
|||
} |
|||
]; |
|||
const defaultProps = { |
|||
children: 'children', |
|||
label: 'label' |
|||
}; |
|||
|
|||
onMounted(() => { |
|||
getWeatherData(); |
|||
}); |
|||
|
|||
function getWeatherData() { |
|||
//获取天气 |
|||
getWeather().then((res: any) => { |
|||
if (res.code === 200) { |
|||
if (isCurrentRoute.value) { |
|||
timer.value = setTimeout(async () => { |
|||
await (timer.value && clearTimeout(timer.value)); |
|||
await getWeatherData(); |
|||
}, 600000); |
|||
} |
|||
weatherData.value = res.data; |
|||
} else { |
|||
clearTimeout(timer.value); |
|||
} |
|||
}); |
|||
} |
|||
</script> |
|||
<style lang="scss" scoped> |
|||
.headerInfo { |
|||
display: flex; |
|||
justify-content: space-between; |
|||
.date, |
|||
.home { |
|||
width: 20%; |
|||
} |
|||
.date { |
|||
display: flex; |
|||
align-items: center; |
|||
font-size: 24px; |
|||
.line { |
|||
width: 2px; |
|||
height: 2rem; |
|||
background: #fff; |
|||
margin: 0 2rem; |
|||
} |
|||
.forecast { |
|||
display: flex; |
|||
align-items: center; |
|||
span { |
|||
margin-right: 15px; |
|||
} |
|||
} |
|||
} |
|||
.title { |
|||
display: flex; |
|||
justify-content: center; |
|||
align-items: center; |
|||
width: 50%; |
|||
text-align: center; |
|||
.logo { |
|||
height: 30px; |
|||
.logoIcon { |
|||
width: 144px !important; |
|||
height: 30px !important; |
|||
} |
|||
} |
|||
.line { |
|||
width: 2px; |
|||
height: 2rem; |
|||
background: #fff; |
|||
margin: 0 1rem; |
|||
} |
|||
.text { |
|||
font-size: 32px; |
|||
font-family: 'SourceHanSansBold'; |
|||
} |
|||
} |
|||
.home { |
|||
display: flex; |
|||
justify-content: end; |
|||
.homeBtn { |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: flex-start; |
|||
width: 45px; |
|||
height: 45px; |
|||
cursor: pointer; |
|||
position: relative; |
|||
overflow: hidden; |
|||
transition-duration: 0.3s; |
|||
background-color: transparent; |
|||
} |
|||
|
|||
/* plus homeIcon */ |
|||
.homeIcon { |
|||
width: 100%; |
|||
transition-duration: 0.3s; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
} |
|||
|
|||
.homeIcon svg { |
|||
width: 28px; |
|||
height: 28px; |
|||
} |
|||
|
|||
.homeIcon svg path { |
|||
fill: white; |
|||
} |
|||
/* text */ |
|||
.text { |
|||
position: absolute; |
|||
right: 0%; |
|||
width: 0%; |
|||
opacity: 0; |
|||
color: white; |
|||
font-size: 20px; |
|||
font-weight: 600; |
|||
transition-duration: 0.3s; |
|||
} |
|||
/* hover effect on button width */ |
|||
.homeBtn:hover { |
|||
width: 120px; |
|||
border-radius: 40px; |
|||
transition-duration: 0.3s; |
|||
} |
|||
|
|||
.homeBtn:hover .homeIcon { |
|||
width: 28%; |
|||
transition-duration: 0.3s; |
|||
padding-left: 20px; |
|||
} |
|||
/* hover effect button's text */ |
|||
.homeBtn:hover .text { |
|||
opacity: 1; |
|||
width: 72%; |
|||
transition-duration: 0.3s; |
|||
padding-right: 10px; |
|||
} |
|||
/* button click effect*/ |
|||
.homeBtn:active { |
|||
transform: translate(2px, 2px); |
|||
} |
|||
} |
|||
} |
|||
.menuInfo { |
|||
display: flex; |
|||
justify-content: space-between; |
|||
margin-top: 20px; |
|||
.return { |
|||
width: 20px; |
|||
height: 20px; |
|||
background-size: 250%; |
|||
background-position: left; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
cursor: pointer; |
|||
position: relative; |
|||
transition-duration: 0.5s; |
|||
.returnIcon { |
|||
fill: white; |
|||
} |
|||
|
|||
.tooltip { |
|||
position: absolute; |
|||
top: -20px; |
|||
opacity: 0; |
|||
width: 50px; |
|||
background: linear-gradient(to right, rgb(39, 107, 255), rgb(108, 184, 255)); |
|||
color: white; |
|||
padding: 5px; |
|||
border-radius: 5px; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
transition-duration: 0.2s; |
|||
pointer-events: none; |
|||
letter-spacing: 0.5px; |
|||
} |
|||
|
|||
.tooltip::before { |
|||
position: absolute; |
|||
content: ''; |
|||
width: 10px; |
|||
height: 10px; |
|||
background: linear-gradient(45deg, rgb(39, 107, 255), rgb(108, 184, 255)); |
|||
background-size: 1000%; |
|||
background-position: center; |
|||
transform: rotate(45deg); |
|||
bottom: -15%; |
|||
transition-duration: 0.3s; |
|||
} |
|||
} |
|||
.return:hover .tooltip { |
|||
top: -50px; |
|||
opacity: 1; |
|||
transition-duration: 0.3s; |
|||
} |
|||
|
|||
.return:hover { |
|||
background-position: right; |
|||
transition-duration: 0.5s; |
|||
} |
|||
.menu { |
|||
width: 35px; |
|||
.menuIcon { |
|||
width: 24px !important; |
|||
height: 24px !important; |
|||
cursor: pointer; |
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,153 @@ |
|||
<template> |
|||
<div class="electricityInfo"> |
|||
<div ref="electricityRef" class="electricityLine" /> |
|||
</div> |
|||
</template> |
|||
<script lang="ts" setup> |
|||
import * as echarts from 'echarts'; |
|||
import { Ref } from 'vue'; |
|||
import { powerLostRate } from '@/api/data/index'; |
|||
import useCounter from '@/store/modules/date'; |
|||
const counterStore = useCounter(); |
|||
const yearMonthDay = ref(); |
|||
const electricityRef: Ref<HTMLElement | any> = ref(null); |
|||
|
|||
const options = { |
|||
tooltip: { |
|||
trigger: 'axis', |
|||
axisPointer: { |
|||
type: 'cross' |
|||
} |
|||
}, |
|||
legend: { |
|||
top: 10, |
|||
right: 10, |
|||
itemWidth: 11, |
|||
itemHeight: 2, |
|||
textStyle: { |
|||
color: '#fff', |
|||
fontSize: 14 |
|||
} |
|||
}, |
|||
grid: { |
|||
top: '20%', |
|||
left: '0', |
|||
right: '0', |
|||
bottom: '0', |
|||
containLabel: true |
|||
}, |
|||
dataset: { |
|||
source: [ |
|||
['name', '合力供热站', '浑南热力', '国润低碳', '新环保', '节能环保'], |
|||
['计划数', 41.1, 45, 50, 53.3, 20], |
|||
['实际数', 55.5, 92.1, 70, 83.1, 90] |
|||
] |
|||
}, |
|||
xAxis: { |
|||
type: 'category', |
|||
boundaryGap: false, |
|||
axisLabel: { |
|||
show: true, |
|||
color: '#99CFFF' |
|||
}, |
|||
axisLine: { |
|||
lineStyle: { |
|||
color: '#904FC5' |
|||
} |
|||
} |
|||
}, |
|||
yAxis: [ |
|||
{ |
|||
type: 'value', |
|||
name: '单位', |
|||
nameTextStyle: { |
|||
color: '#546778', |
|||
fontSize: 12, |
|||
padding: [0, 0, 0, 0] //name文字位置 对应 上右下左 |
|||
}, |
|||
axisTick: { |
|||
// 轴刻度 |
|||
show: false |
|||
}, |
|||
axisLabel: { |
|||
show: true, |
|||
color: '#546778' |
|||
}, |
|||
splitLine: { |
|||
// 网格线 |
|||
show: true, |
|||
lineStyle: { |
|||
//分割线 |
|||
color: '#306269', |
|||
width: 1, |
|||
opacity: 0.2 |
|||
} |
|||
} |
|||
} |
|||
], |
|||
series: [ |
|||
{ |
|||
type: 'line', |
|||
seriesLayoutBy: 'row', |
|||
smooth: true, |
|||
itemStyle: { |
|||
color: 'rgba(0, 144, 255, 1)' //设置背景色 |
|||
} |
|||
}, |
|||
{ |
|||
type: 'line', |
|||
seriesLayoutBy: 'row', |
|||
smooth: true, |
|||
itemStyle: { |
|||
color: 'rgba(255, 185, 106, 1)' //设置背景色 |
|||
} |
|||
} |
|||
] |
|||
}; |
|||
|
|||
onMounted(() => { |
|||
// 图表初始化 |
|||
const chart = echarts.init(electricityRef.value); |
|||
chart.setOption(options); |
|||
// getElect(); |
|||
|
|||
// 大小自适应 |
|||
window.addEventListener('resize', () => { |
|||
chart.resize(); |
|||
}); |
|||
}); |
|||
watchEffect(() => { |
|||
const dataStr = counterStore.dateStr; |
|||
if (dataStr != '') { |
|||
yearMonthDay.value = counterStore.dateStr.split('-'); |
|||
// getElect(); |
|||
} |
|||
}); |
|||
function getElect() { |
|||
//获取图表数据 |
|||
const params = { |
|||
orgId: 206, |
|||
dateYear: yearMonthDay.value[0], |
|||
dateMonth: yearMonthDay.value[1], |
|||
dateDay: yearMonthDay.value[2] |
|||
}; |
|||
powerLostRate(params).then((res: any) => { |
|||
if (res.code === 200 && Object.keys(res.data).length != 0) { |
|||
options.dataset.source = res.data.source; |
|||
options.yAxis[0].name = `单位(${res.data.unit})`; |
|||
const chart = echarts.init(electricityRef.value); |
|||
chart.setOption(options); |
|||
} |
|||
}); |
|||
} |
|||
</script> |
|||
<style lang="scss" scoped> |
|||
.electricityInfo { |
|||
width: 100%; |
|||
height: 318px; |
|||
.electricityLine { |
|||
width: 100%; |
|||
height: 318px; |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,143 @@ |
|||
<template> |
|||
<div class="tableInfo"> |
|||
<el-table |
|||
class="tableClass" |
|||
:data="tableData" |
|||
header-row-class-name="headerRow" |
|||
header-cell-class-name="headerCell" |
|||
row-class-name="rowClass" |
|||
cell-class-name="cellClass" |
|||
stripe |
|||
> |
|||
<el-table-column prop="id" label="序号" align="center" width="80" /> |
|||
<el-table-column prop="name" label="换热站" align="center" width="180" show-overflow-tooltip /> |
|||
<el-table-column prop="date" label="Date" align="center" /> |
|||
<el-table-column prop="name" label="Name" align="center" /> |
|||
<el-table-column prop="address" label="Address" align="center" /> |
|||
</el-table> |
|||
</div> |
|||
</template> |
|||
<script lang="ts" setup> |
|||
const tableData = [ |
|||
{ |
|||
id: '1', |
|||
date: '2016-05-03', |
|||
name: '大唐管井', |
|||
address: 'No. 189, Grove St, Los Angeles' |
|||
}, |
|||
{ |
|||
id: '11', |
|||
date: '2016-05-02', |
|||
name: '汪家鑫城二期', |
|||
address: 'No. 189, Grove St, Los Angeles' |
|||
}, |
|||
{ |
|||
id: '12', |
|||
date: '2016-05-04', |
|||
name: '东湖紫东苑（兆城紫东苑）', |
|||
address: 'No. 189, Grove St, Los Angeles' |
|||
}, |
|||
{ |
|||
id: '22', |
|||
date: '2016-05-01', |
|||
name: '汪家鑫城一期B区A区C区', |
|||
address: 'No. 189, Grove St, Los Angeles' |
|||
}, |
|||
{ |
|||
id: '1', |
|||
date: '2016-05-03', |
|||
name: '大唐管井', |
|||
address: 'No. 189, Grove St, Los Angeles' |
|||
}, |
|||
{ |
|||
id: '11', |
|||
date: '2016-05-02', |
|||
name: '汪家鑫城二期', |
|||
address: 'No. 189, Grove St, Los Angeles' |
|||
}, |
|||
{ |
|||
id: '12', |
|||
date: '2016-05-04', |
|||
name: '东湖紫东苑（兆城紫东苑）', |
|||
address: 'No. 189, Grove St, Los Angeles' |
|||
}, |
|||
{ |
|||
id: '22', |
|||
date: '2016-05-01', |
|||
name: '汪家鑫城一期B区A区C区', |
|||
address: 'No. 189, Grove St, Los Angeles' |
|||
}, |
|||
{ |
|||
id: '1', |
|||
date: '2016-05-03', |
|||
name: '大唐管井', |
|||
address: 'No. 189, Grove St, Los Angeles' |
|||
}, |
|||
{ |
|||
id: '11', |
|||
date: '2016-05-02', |
|||
name: '汪家鑫城二期', |
|||
address: 'No. 189, Grove St, Los Angeles' |
|||
}, |
|||
{ |
|||
id: '12', |
|||
date: '2016-05-04', |
|||
name: '东湖紫东苑（兆城紫东苑）', |
|||
address: 'No. 189, Grove St, Los Angeles' |
|||
}, |
|||
{ |
|||
id: '22', |
|||
date: '2016-05-01', |
|||
name: '汪家鑫城一期B区A区C区', |
|||
address: 'No. 189, Grove St, Los Angeles' |
|||
} |
|||
]; |
|||
</script> |
|||
<style lang="scss" scoped> |
|||
.tableInfo { |
|||
height: 378px; |
|||
margin-top: 20px; |
|||
border: 1px solid #3776b8; |
|||
overflow: hidden; |
|||
:deep(.tableClass) { |
|||
height: 376px; |
|||
font-size: 18px; |
|||
--el-table-border: none; |
|||
--el-table-text-color: #d2def6; |
|||
--el-table-header-text-color: #d2def6; |
|||
--el-table-row-hover-bg-color: none; |
|||
--el-table-header-bg-color: #0d1015; |
|||
--el-table-tr-bg-color: #0d1b35; |
|||
--el-fill-color-lighter: #0d1015; |
|||
.headerCell,.cellClass{ |
|||
padding: 12px 0; |
|||
} |
|||
.el-table__inner-wrapper::before { |
|||
content: none; |
|||
} |
|||
.el-table__inner-wrapper { |
|||
.cellClass:hover { |
|||
background-color: transparent; |
|||
} |
|||
} |
|||
// .headerRow { |
|||
// .headerCell { |
|||
// border-bottom: none; |
|||
// background-color: #0d1015; |
|||
// } |
|||
// } |
|||
// .rowClass { |
|||
// background-color: #0d1b35; |
|||
// .cellClass { |
|||
// border-bottom: none; |
|||
// background-color: #0d1b35; |
|||
// } |
|||
// } |
|||
// .rowClass.el-table__row--striped { |
|||
// .cellClass { |
|||
// background-color: #0d1015; |
|||
// } |
|||
// } |
|||
} |
|||
} |
|||
</style> |
|||
File diff suppressed because it is too large
@ -0,0 +1,35 @@ |
|||
@import url('@/assets/fonts/font.css'); |
|||
.screenContainer { |
|||
// position: fixed; |
|||
// left: 50%; |
|||
// top: 50%; |
|||
transform-origin: 0 0; |
|||
transition: 0.3s; |
|||
color: #fff; |
|||
font-size: 16px; |
|||
background-color: #142036; |
|||
z-index: 100; |
|||
.header { |
|||
position: relative; |
|||
height: 125px; |
|||
padding: 21px 40px 0 40px; |
|||
background-color: #0C182C; |
|||
border-bottom: 1px solid #3D4C64; |
|||
// span { |
|||
// line-height: 62px; |
|||
// font-size: 30px; |
|||
// font-family: 'PangMenZhengDaoBiao'; |
|||
// font-weight: 400; |
|||
// letter-spacing: 4px; |
|||
// color: #e8effb; |
|||
// background: linear-gradient(0deg, #b2ccfc 0%, #ffffff 100%); |
|||
// background-clip: text; |
|||
// -webkit-background-clip: text; |
|||
// -webkit-text-fill-color: transparent; |
|||
// } |
|||
} |
|||
|
|||
.main { |
|||
padding: 12px 40px 0 40px; |
|||
} |
|||
} |
|||
@ -0,0 +1,69 @@ |
|||
<template> |
|||
<div ref="screenRef" class="screenContainer" :style="{ width: `${baseWidth}px`, height: `${baseHeight}px` }"> |
|||
<div class="header"> |
|||
<Header/> |
|||
</div> |
|||
<div class="main"> |
|||
<section class="charts"> |
|||
<Charts/> |
|||
</section> |
|||
<section class="table"> |
|||
<Table/> |
|||
</section> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
<script lang="ts" setup> |
|||
import Header from './components/header.vue'; |
|||
import Charts from './components/charts.vue'; |
|||
import Table from './components/table.vue'; |
|||
const screenRef = ref<HTMLElement>(); |
|||
const drawTiming = ref(); |
|||
// * 默认缩放值 |
|||
const scale = { |
|||
width: '1', |
|||
height: '1' |
|||
}; |
|||
|
|||
// * 设计稿尺寸（px） |
|||
const baseWidth = 2560; |
|||
const baseHeight = 1440; |
|||
|
|||
// * 需保持的比例（默认32:9） |
|||
const baseProportion = parseFloat((baseWidth / baseHeight).toFixed(5)); |
|||
onMounted(() => { |
|||
// calcRate(); |
|||
}); |
|||
window.addEventListener('resize', () => { |
|||
// 监听窗口改变，改变后重新获取 |
|||
// resize(); |
|||
}); |
|||
function calcRate() { |
|||
const appRef = screenRef.value; |
|||
if (!appRef) return; |
|||
// 当前宽高比 |
|||
const currentRate = parseFloat((window.innerWidth / window.innerHeight).toFixed(5)); |
|||
if (appRef) { |
|||
if (currentRate > baseProportion) { |
|||
// 表示更宽 |
|||
scale.width = ((window.innerHeight * baseProportion) / baseWidth).toFixed(5); |
|||
scale.height = (window.innerHeight / baseHeight).toFixed(5); |
|||
appRef.style.transform = `scale(${scale.width}, ${scale.height}) translate(-50%, -50%)`; |
|||
} else { |
|||
// 表示更高 |
|||
scale.height = (window.innerWidth / baseProportion / baseHeight).toFixed(5); |
|||
scale.width = (window.innerWidth / baseWidth).toFixed(5); |
|||
appRef.style.transform = `scale(${scale.width}, ${scale.height}) translate(-50%, -50%)`; |
|||
} |
|||
} |
|||
} |
|||
function resize() { |
|||
clearTimeout(drawTiming.value); |
|||
drawTiming.value = setTimeout(() => { |
|||
calcRate(); |
|||
}, 200); |
|||
} |
|||
</script> |
|||
<style lang="scss" scoped> |
|||
@import './index.scss'; |
|||
</style> |
|||
Loading…
Reference in new issue