587 lines
15 KiB
Vue
587 lines
15 KiB
Vue
<template>
|
||
<div id="used-ele" :style="{ backgroundColor: bgImage }" @click="handleOpenChart">
|
||
<div v-if="electricityConsumptionMonthly===0||monthlySavings===0" class="showNull ">
|
||
<div class="loading" v-if="loading===0"></div>
|
||
{{ loading === 0 ? '加载中...' : '暂无数据~' }}
|
||
</div>
|
||
<div v-else class="content">
|
||
<div class="item">
|
||
<div class="container" ref="length">
|
||
<div class="value" ref="valueA"></div>
|
||
</div>
|
||
<div>
|
||
<div class="icon"></div>
|
||
<span>当月用电量：{{ electricityConsumptionMonthly }}kwh</span>
|
||
</div>
|
||
</div>
|
||
<div class="item">
|
||
<div class="container" ref="length">
|
||
<div class="value" ref="valueB"></div>
|
||
</div>
|
||
<div>
|
||
<div class="icon"></div>
|
||
<span>当月节省量：{{ monthlySavings }}kwh</span>
|
||
</div>
|
||
</div>
|
||
<div class="ele-left-bottom-icon"></div>
|
||
<div class="ele-right-bottom-icon"></div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="digital-tunnel">
|
||
<el-dialog :close-on-click-modal="false" v-model="isVisited" width="2175px" :modal="false">
|
||
<div class="left-top-icon"></div>
|
||
<div class="right-top-icon"></div>
|
||
<div class="user-select">
|
||
<el-select
|
||
v-model="chooseChartFan"
|
||
filterable
|
||
placeholder="请选择风机"
|
||
:fit-input-width="true"
|
||
:teleported="false"
|
||
@change="changeFanData"
|
||
>
|
||
<el-option
|
||
v-for="item in fanList"
|
||
:key="item.value"
|
||
:label="item.label"
|
||
:value="item.value"
|
||
/>
|
||
</el-select>
|
||
</div>
|
||
<div class="top-tag">
|
||
<div class="allUsedEle">
|
||
<div class="use-title">
|
||
月总用电量
|
||
</div>
|
||
<div class="value">{{ totalElectricityConsumption }}kwh</div>
|
||
</div>
|
||
<div class="allUsedEle">
|
||
<div class="use-title">
|
||
月节省量
|
||
</div>
|
||
<div class="value">{{ saveElectricity }}kwh</div>
|
||
</div>
|
||
</div>
|
||
<div class="loading-block" v-if="showLoading">
|
||
<div class="loading" v-if="loadingText==='加载中...'"></div>
|
||
<span>{{ loadingText }}</span>
|
||
</div>
|
||
<div class="chat-dialog" v-else>
|
||
<div id="containerEle"></div>
|
||
<div style="width: 1px;"></div>
|
||
</div>
|
||
<div class="time-select">
|
||
<choose-month v-if="selectTimeButton===1" ref="chooseMonthRef" @select="monthSelect"/>
|
||
<time-range-btn
|
||
:buttonList="timeList"
|
||
v-model="selectTimeButton"
|
||
@select="timeSelect"
|
||
/>
|
||
</div>
|
||
<div class="left-bottom-icon"></div>
|
||
<div class="right-bottom-icon"></div>
|
||
</el-dialog>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup>
|
||
import * as echarts from 'echarts';
|
||
import TimeRangeBtn from "@/components/timeRangeBtn/index.vue"
|
||
import ChooseMonth from "@/components/chooseMonth/index.vue"
|
||
import {getEleEchartsInfo} from "@/api/largeScreen";
|
||
|
||
const props = defineProps({
|
||
list: Array,
|
||
eleData: Array,
|
||
loading: Number
|
||
});
|
||
|
||
const loadingText = ref('加载中...')
|
||
const timeList = ref(["年", "月"]);
|
||
const selectTimeButton = ref(1);
|
||
const chooseMonthRef = ref();
|
||
const monthValue = ref('');
|
||
const chooseChartFan = ref('');
|
||
let myEcharts = reactive({});
|
||
const isVisited = ref(false);
|
||
const showLoading = ref(false)
|
||
const electricityConsumptionMonthly = ref(0)
|
||
const monthlySavings = ref(0)
|
||
const totalElectricityConsumption = ref(0)
|
||
const saveElectricity = ref(0)
|
||
const openEquipmentId = ref(0)
|
||
const length = ref(null);
|
||
const valueA = ref();
|
||
const fanList = ref([]);
|
||
const valueB = ref(monthlySavings.value);
|
||
const bgImage = computed(() =>
|
||
isVisited.value
|
||
? "#2E5589"
|
||
: "rgba(6,34,71,0.78)"
|
||
);
|
||
watch(() => props.loading, (now) => {
|
||
props.loading = now
|
||
}, {deep: true});
|
||
watch(() => props.eleData, (now) => {
|
||
if (now) {
|
||
let fanObj = {}
|
||
now.frequencyChangerList.forEach(item => {
|
||
if (item.equipmentId === 22 || item.equipmentId === 23) {
|
||
fanObj = {
|
||
value: item.equipmentId,
|
||
label: changeNum(item.equipmentId)
|
||
}
|
||
}
|
||
fanList.value.push(fanObj)
|
||
})
|
||
getBasicData(now.largeScreenElectricity)
|
||
}
|
||
nextTick(() => {
|
||
setValueA()
|
||
setValueB()
|
||
})
|
||
}, {deep: true});
|
||
// watch(() => props.list, (now) => {
|
||
// console.log(now,props.eleData,'大V大V')
|
||
// props.eleData.frequencyChangerList.forEach(item => {
|
||
// now.forEach(newItem => {
|
||
// if (item.equipmentId === newItem.equipmentId) {
|
||
// if (newItem.electricityConsumptionDay) {
|
||
// electricityConsumptionMonthly.value = newItem.electricityConsumptionMonthly
|
||
// }
|
||
// }
|
||
// })
|
||
// })
|
||
// setValueA()
|
||
// setValueB()
|
||
// }, {deep: true});
|
||
const changeNum = (item) => {
|
||
switch (item) {
|
||
case 22:
|
||
return '一号风机';
|
||
case 23:
|
||
return '二号风机';
|
||
}
|
||
}
|
||
const setValueA = () => {
|
||
if (electricityConsumptionMonthly.value === 0 || length.value === null) {
|
||
valueA.value.style.height = `0px`;
|
||
}
|
||
let width = (electricityConsumptionMonthly.value * length.value?.offsetHeight) / 40000;
|
||
valueA.value.style.height = `${width}px`;
|
||
}
|
||
const setValueB = () => {
|
||
if (monthlySavings.value === 0 || length.value === null) {
|
||
valueB.value.style.height = `0px`;
|
||
}
|
||
let width = (monthlySavings.value * length.value?.offsetHeight) / 40000;
|
||
valueB.value.style.height = `${width}px`;
|
||
}
|
||
const getBasicData = (data) => {
|
||
electricityConsumptionMonthly.value = data.electricityConsumptionCount
|
||
monthlySavings.value = data.conserveElectricityCount
|
||
}
|
||
|
||
const monthSelect = (val) => {
|
||
monthValue.value = val
|
||
getFanInfo(openEquipmentId.value, 'month', val)
|
||
}
|
||
const changeDate = (index) => {
|
||
switch (index) {
|
||
case 0:
|
||
return 'years'
|
||
case 1:
|
||
return 'month'
|
||
}
|
||
}
|
||
const timeSelect = (index) => {
|
||
monthValue.value = ''
|
||
getFanInfo(openEquipmentId.value, changeDate(index))
|
||
};
|
||
const changeFanData = (val) => {
|
||
selectTimeButton.value = 1
|
||
openEquipmentId.value = val
|
||
getFanInfo(val, 'month', monthValue.value)
|
||
}
|
||
const getFanInfo = (equipmentId, type = 'month', time = '') => {
|
||
isVisited.value = true
|
||
showLoading.value = true
|
||
getEleEchartsInfo(equipmentId, time, type).then(res => {
|
||
if (res?.code === 1000) {
|
||
showLoading.value = false
|
||
totalElectricityConsumption.value = res.data.totalElectricityConsumption
|
||
saveElectricity.value = res.data.saveElectricity
|
||
nextTick(() => {
|
||
initChart(res.data.dates, res.data.consumptionValues, res.data.saveElectricityValues)
|
||
})
|
||
}
|
||
})
|
||
nextTick(() => {
|
||
loadingText.value = '加载中...'
|
||
})
|
||
}
|
||
const handleOpenChart = () => {
|
||
selectTimeButton.value = 1
|
||
isVisited.value = true
|
||
openEquipmentId.value = fanList.value[0].value
|
||
chooseChartFan.value = fanList.value[0].value
|
||
nextTick(() => {
|
||
chooseMonthRef.value.clearData()
|
||
})
|
||
getFanInfo(openEquipmentId.value, 'month')
|
||
}
|
||
/**
|
||
* 初始化echarts实例方法
|
||
*/
|
||
const initChart = (type, valueA, valueB) => {
|
||
//3.初始化container容器
|
||
myEcharts = echarts.init(document.getElementById('containerEle'));
|
||
//5.传入数据
|
||
let option = {
|
||
//图例
|
||
legend: {
|
||
left: 0,
|
||
textStyle: {
|
||
color: '#60DDDE',
|
||
fontSize: 45
|
||
},
|
||
itemWidth: 30,
|
||
itemHeight: 30,
|
||
icon: "circle",
|
||
},
|
||
//离容器四侧的距离
|
||
grid: {
|
||
left: 0, // 左边距
|
||
right: 20, // 右边距
|
||
top: 80, // 顶边距
|
||
bottom: 110, // 底边距
|
||
containLabel: true,
|
||
},
|
||
//提示框组件
|
||
tooltip: {
|
||
show: true,
|
||
trigger: 'axis',
|
||
backgroundColor: "transparent", // 设置背景颜色为透明
|
||
borderColor: "transparent", // 设置边框颜色为透明
|
||
padding: 0, // 设置内边距为0
|
||
textStyle: {
|
||
fontSize: 40
|
||
},
|
||
formatter: function (params) {
|
||
let content = `
|
||
<div style="background: linear-gradient(180deg, #254062 0%, rgba(20,36,51,0.3) 100%);border: 2px solid #6087BA;border-radius: 4px;padding: 8px 16px;">
|
||
<div style="font-size: 52px;font-family: PingFang SC-Regular, PingFang SC;font-weight: 400;color: #EFEEEE;margin-bottom: 8px;">${params[0].name}日</div>
|
||
<div style="font-size: 48px;line-height: 48px;font-family: Bebas Neue-Regular, Bebas Neue;font-weight: 400;"><span style="color: #FFFFFF">日用电量: </span><span style="background: linear-gradient(180deg, #F5B85F 0%, #FFFFFF 100%);background-clip: text;-webkit-background-clip: text;-webkit-text-fill-color: transparent;">${params[0].value}</span></div>
|
||
<div style="font-size: 48px;line-height: 48px;font-family: Bebas Neue-Regular, Bebas Neue;font-weight: 400;margin-top: 30px"><span style="color: #FFFFFF">日节省量: </span><span style="background: linear-gradient(180deg, #F5B85F 0%, #FFFFFF 100%);background-clip: text;-webkit-background-clip: text;-webkit-text-fill-color: transparent;">${params[1].value}</span></div>
|
||
</div>`;
|
||
return content;
|
||
},
|
||
},
|
||
toolbox: {
|
||
show: false,
|
||
right: 10,
|
||
feature: {
|
||
dataZoom: {
|
||
yAxisIndex: 'none'
|
||
}
|
||
}
|
||
},
|
||
dataZoom: [{
|
||
type: 'inside'
|
||
},
|
||
{
|
||
type: 'slider',
|
||
top: 900,
|
||
height: 100,
|
||
textStyle: {
|
||
fontSize: 45,
|
||
color: '#fffff'
|
||
}
|
||
}],
|
||
//X轴
|
||
xAxis: {
|
||
type: 'category',
|
||
// data: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20', '21', '22', '23', '24', '25', '26', '27', '28', '29', '30', '31'],
|
||
data: type,
|
||
axisLabel: {
|
||
textStyle: {
|
||
fontSize: 45,
|
||
color: '#D6F1FA'
|
||
},
|
||
},
|
||
},
|
||
//Y轴
|
||
yAxis: {
|
||
type: 'value',
|
||
axisLabel: {
|
||
textStyle: {
|
||
fontSize: 45,
|
||
color: '#D6F1FA'
|
||
},
|
||
},
|
||
},
|
||
//配置项
|
||
series: [
|
||
{
|
||
name: '日用电量',
|
||
// data: [120, 200, 150, 80, 70, 110, 130, 100, 140, 130, 160, 150, 90, 130, 110, 120, 150, 140, 130, 120, 110, 100, 90, 80, 100, 140, 130, 160, 150, 24, 50],
|
||
data: valueA,
|
||
type: 'bar'
|
||
},
|
||
{
|
||
name: '日节省量',
|
||
// data: [140, 130, 160, 150, 90, 130, 110, 120, 150, 140, 130, 120, 110, 100, 90, 80, 100, 140, 130, 160, 150, 24, 50, 120, 200, 150, 80, 70, 110, 130, 100,],
|
||
data: valueB,
|
||
type: 'bar'
|
||
},
|
||
]
|
||
}
|
||
myEcharts.setOption(option);
|
||
//图表大小自适应窗口大小变化
|
||
window.onresize = () => {
|
||
myEcharts.resize();
|
||
}
|
||
}
|
||
</script>
|
||
<style lang="scss">
|
||
.user-select {
|
||
margin-bottom: 126px;
|
||
|
||
.el-select {
|
||
width: 476px;
|
||
}
|
||
|
||
.el-input {
|
||
width: 476px;
|
||
|
||
.el-input__wrapper {
|
||
background-color: transparent;
|
||
box-shadow: none;
|
||
border-radius: 10px;
|
||
border: 2px solid #0F82AF;
|
||
|
||
.el-input__inner {
|
||
height: 80px;
|
||
font-size: 40px;
|
||
color: #FFFFFF;
|
||
}
|
||
}
|
||
}
|
||
|
||
|
||
.el-select__placeholder {
|
||
height: 54px;
|
||
line-height: 54px;
|
||
color: #FFFFFF;
|
||
}
|
||
|
||
.el-select__placeholder.is-transparent {
|
||
height: 54px;
|
||
line-height: 54px;
|
||
}
|
||
|
||
.el-select__selected-item {
|
||
//height: 54px;
|
||
//line-height: 54px;
|
||
.el-tag {
|
||
max-width: none !important;
|
||
height: 55px;
|
||
font-size: 43px;
|
||
|
||
.el-icon {
|
||
font-size: 51px;
|
||
width: auto;
|
||
height: auto;
|
||
}
|
||
}
|
||
}
|
||
|
||
.el-select__caret {
|
||
font-size: 35px !important;
|
||
}
|
||
|
||
.el-select-dropdown__item.is-hovering {
|
||
background-color: #064B66 !important;
|
||
}
|
||
|
||
.el-select-dropdown.is-multiple .el-select-dropdown__item.is-selected:after {
|
||
width: 42px;
|
||
height: 42px;
|
||
}
|
||
|
||
.el-input {
|
||
min-height: 75px;
|
||
height: auto !important;
|
||
}
|
||
|
||
.el-form-item.is-error .el-input__wrapper {
|
||
box-shadow: none;
|
||
}
|
||
|
||
.el-select__wrapper {
|
||
min-height: 75px;
|
||
height: auto !important;
|
||
background-color: transparent;
|
||
border: 1px solid #08B7B8;
|
||
font-size: 35px;
|
||
width: 476px !important;
|
||
}
|
||
|
||
.el-select__popper {
|
||
margin-top: -12px !important;
|
||
background: #072247 !important;
|
||
border: 1px solid #0F82AF !important;
|
||
//width: 476px!important;
|
||
inset: 86px auto auto 0 !important;
|
||
|
||
.el-select-dropdown {
|
||
width: auto;
|
||
}
|
||
}
|
||
|
||
.el-popper {
|
||
width: auto;
|
||
min-width: auto;
|
||
margin-left: 0;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
.el-popper__arrow::before {
|
||
display: none;
|
||
}
|
||
|
||
.el-select-dropdown__item {
|
||
font-size: 38px !important;
|
||
height: 60px !important;
|
||
line-height: 60px !important;
|
||
|
||
> span {
|
||
color: #FFFFFF;
|
||
}
|
||
}
|
||
|
||
.el-select .el-input .el-select__caret {
|
||
font-size: 35px !important;
|
||
}
|
||
|
||
.el-select-dropdown__item.hover, .el-select-dropdown__item:hover {
|
||
background-color: #064B66 !important;
|
||
}
|
||
|
||
.el-select-dropdown.is-multiple .el-select-dropdown__item.selected {
|
||
background-color: #064B66 !important;
|
||
}
|
||
|
||
.el-select-tags-wrapper {
|
||
.el-tag {
|
||
padding: 28px 20px !important;
|
||
font-size: 35px;
|
||
|
||
.el-icon {
|
||
width: 40px;
|
||
height: 40px;
|
||
font-size: 40px !important;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</style>
|
||
<style lang="scss" scoped>
|
||
:deep(.el-dialog__header) {
|
||
padding: 0 !important;
|
||
}
|
||
|
||
#used-ele {
|
||
margin-top: 40px;
|
||
cursor: pointer;
|
||
width: 830px;
|
||
//height: 373px;
|
||
color: aliceblue;
|
||
border: 2px solid #0f82af;
|
||
background: rgba(6, 34, 71, 0.78);
|
||
border-radius: 20px;
|
||
padding: 21px 62px 35px 62px;
|
||
position: relative;
|
||
|
||
.ele-left-bottom-icon {
|
||
position: absolute;
|
||
bottom: -3px;
|
||
left: -3px;
|
||
width: 41px;
|
||
height: 41px;
|
||
background-image: url(@/assets/images/badGasInfo/sp_jz.png);
|
||
transform: rotate(-90deg);
|
||
}
|
||
|
||
.ele-right-bottom-icon {
|
||
position: absolute;
|
||
bottom: -3px;
|
||
right: -3px;
|
||
width: 41px;
|
||
height: 41px;
|
||
background-image: url(@/assets/images/badGasInfo/sp_jz.png);
|
||
transform: rotate(180deg);
|
||
}
|
||
|
||
.title {
|
||
width: 96px;
|
||
height: 42px;
|
||
font-size: 32px;
|
||
font-family: MicrosoftYaHei, MicrosoftYaHei;
|
||
font-weight: bold;
|
||
color: #38cafb;
|
||
line-height: 42px;
|
||
}
|
||
|
||
.content {
|
||
margin-top: 4px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
cursor: pointer;
|
||
|
||
.item {
|
||
margin-top: 44px;
|
||
font-size: 28px;
|
||
color: #38CAFB;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
|
||
.container {
|
||
width: 60px;
|
||
height: 210px;
|
||
-webkit-border-radius: 31px;
|
||
border: 1px solid rgba(105, 231, 253, 1);
|
||
position: relative;
|
||
margin-bottom: 20px;
|
||
padding: 1px;
|
||
|
||
.value {
|
||
position: absolute;
|
||
bottom: 0;
|
||
width: 100%;
|
||
height: inherit;
|
||
background: linear-gradient(180deg, #38CAFB 0%, #2775E7 100%);
|
||
-webkit-border-radius: 31px;
|
||
//transition: width 0.5s linear 0s;
|
||
-webkit-transition: width 1s ease-in-out;
|
||
}
|
||
}
|
||
|
||
> div:nth-child(2) {
|
||
display: flex;
|
||
|
||
.icon {
|
||
margin-right: 10px;
|
||
width: 29px;
|
||
height: 33px;
|
||
background-image: url(../../../assets/images/usedEle/white-ele.png);
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</style>
|