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