邓洁 : 用电量弹窗及样式修改
This commit is contained in:
admin
@@ -16,6 +16,7 @@ a {
|
||||
html, body, #app, .el-container, .el-aside, .el-main {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.tunnel-title {
|
||||
width: 2330px;
|
||||
height: 156px;
|
||||
@@ -26,6 +27,7 @@ html, body, #app, .el-container, .el-aside, .el-main {
|
||||
margin-left: -1165px;
|
||||
background-image: url('../images/topAndDown/sp_tb.png');
|
||||
}
|
||||
|
||||
.box-top {
|
||||
.manage-btn {
|
||||
display: flex;
|
||||
@@ -125,7 +127,7 @@ html, body, #app, .el-container, .el-aside, .el-main {
|
||||
background-image: url('../images/topAndDown/sp_icon_zyc.png');
|
||||
}
|
||||
|
||||
.tunnel-length{
|
||||
.tunnel-length {
|
||||
position: absolute;
|
||||
top: 13%;
|
||||
left: 36%;
|
||||
@@ -242,3 +244,130 @@ html, body, #app, .el-container, .el-aside, .el-main {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
}
|
||||
|
||||
//弹窗样式
|
||||
.digital-tunnel {
|
||||
#container {
|
||||
height: 650px;
|
||||
width: 1300px;
|
||||
}
|
||||
|
||||
#containerEle {
|
||||
height: 564px;
|
||||
width: 1300px;
|
||||
}
|
||||
|
||||
.el-dialog {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 785px;
|
||||
border: 2px solid #0F82AF;
|
||||
background: rgba(6, 34, 71, 0.78);
|
||||
border-radius: 20px;
|
||||
padding: 47px 30px;
|
||||
box-sizing: border-box;
|
||||
margin: 588px auto 0 auto;
|
||||
|
||||
.el-dialog__header {
|
||||
padding:0 0 25px 0;
|
||||
//display: none;
|
||||
.el-dialog__title {
|
||||
font-size: 32px;
|
||||
font-weight: bold;
|
||||
color: #D6F1FA;
|
||||
}
|
||||
|
||||
.el-dialog__close {
|
||||
color: #05FEFF;
|
||||
font-size: 35px;
|
||||
}
|
||||
}
|
||||
|
||||
.el-dialog__body {
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.left-top-icon {
|
||||
position: absolute;
|
||||
top: -3px;
|
||||
left: -3px;
|
||||
width: 41px;
|
||||
height: 41px;
|
||||
background-image: url(@/assets/images/badGasInfo/sp_jz.png);
|
||||
}
|
||||
|
||||
.right-top-icon {
|
||||
position: absolute;
|
||||
top: -3px;
|
||||
right: -3px;
|
||||
width: 41px;
|
||||
height: 41px;
|
||||
background-image: url(@/assets/images/badGasInfo/sp_jz.png);
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
|
||||
.time-select {
|
||||
position: absolute;
|
||||
top: 47px;
|
||||
right: 119px;
|
||||
}
|
||||
|
||||
.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);
|
||||
}
|
||||
|
||||
.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);
|
||||
}
|
||||
|
||||
//用电量
|
||||
.top-tag {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
|
||||
.allUsedEle {
|
||||
width: 240px;
|
||||
height: 149px;
|
||||
border-radius: 10px;
|
||||
border: 2px solid #0F82AF;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
|
||||
&:nth-child(2) {
|
||||
margin-left: 39px;
|
||||
}
|
||||
|
||||
.use-title {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 240px;
|
||||
height: 50px;
|
||||
background: #264A78;
|
||||
font-size: 26px;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
|
||||
.value {
|
||||
margin-top: 20px;
|
||||
font-size: 40px;
|
||||
font-family: MicrosoftYaHei;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -4,30 +4,40 @@
|
||||
<div class="info-list">
|
||||
<gas-info-item v-for="item in badGasList" :key="item.equipmentId" :gasInfo="item" @click="handleOpenChart"/>
|
||||
</div>
|
||||
<el-dialog v-model="isVisited" title="有害气体监控数据" width="1996px" :modal="false">
|
||||
<div class="left-icon"></div>
|
||||
<div class="right-icon"></div>
|
||||
<div id="container" ref="chart"></div>
|
||||
<div class="time-select">
|
||||
|
||||
</div>
|
||||
</el-dialog>
|
||||
<div class="digital-tunnel">
|
||||
<el-dialog v-model="isVisited" title="有害气体监控数据" width="1365px" :modal="false">
|
||||
<div class="left-top-icon"></div>
|
||||
<div class="right-top-icon"></div>
|
||||
<div id="container"></div>
|
||||
<div class="time-select">
|
||||
<time-range-btn
|
||||
:buttonList="timeList"
|
||||
v-model="selectTimeButton"
|
||||
@select="timeSelect"
|
||||
width="124px"
|
||||
/>
|
||||
</div>
|
||||
<div class="left-bottom-icon"></div>
|
||||
<div class="right-bottom-icon"></div>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import GasInfoItem from "./childComps/GasInfoItem.vue";
|
||||
import * as echarts from 'echarts';
|
||||
import TimeRangeBtn from "@/components/timeRangeBtn/index.vue"
|
||||
|
||||
const props = defineProps({
|
||||
list: Array,
|
||||
badGasData: Array
|
||||
});
|
||||
const timeList = ref(["年", "月", "日"]);
|
||||
const selectTimeButton = ref(0);
|
||||
const isVisited = ref(false);
|
||||
const badGasList = ref([])
|
||||
const chart = ref();
|
||||
let myEcharts = reactive({});
|
||||
// const option = reactive()
|
||||
|
||||
watch(() => props.list, (now) => {
|
||||
badGasList.value.forEach(item => {
|
||||
@@ -42,7 +52,16 @@ watch(() => props.list, (now) => {
|
||||
watch(() => props.badGasData, (now) => {
|
||||
getBadGasInfo(now.sensorList)
|
||||
}, {deep: true});
|
||||
|
||||
const timeSelect = (index) => {
|
||||
console.log('选择时间', index)
|
||||
if(index===0){
|
||||
console.log('--年')
|
||||
}else if(index===1){
|
||||
console.log('--月')
|
||||
}else if(index===2){
|
||||
console.log('--日')
|
||||
}
|
||||
};
|
||||
const getBadGasInfo = (now) => {
|
||||
let windPressureObj = {}
|
||||
let windPressureArr = []
|
||||
@@ -70,7 +89,6 @@ const handleOpenChart = () => {
|
||||
nextTick(() => {
|
||||
initChart()
|
||||
})
|
||||
// initChart()
|
||||
}
|
||||
/**
|
||||
* 初始化echarts实例方法
|
||||
@@ -79,24 +97,24 @@ const initChart = () => {
|
||||
//3.初始化container容器
|
||||
myEcharts = echarts.init(document.getElementById('container'));
|
||||
//5.传入数据
|
||||
let option={
|
||||
let option = {
|
||||
//图例
|
||||
legend: {
|
||||
left: 0,
|
||||
textStyle:{
|
||||
color:'#FFFFFF',
|
||||
fontSize:28
|
||||
textStyle: {
|
||||
color: '#FFFFFF',
|
||||
fontSize: 28
|
||||
},
|
||||
// itemWidth: 20,
|
||||
// itemHeight: 20
|
||||
},
|
||||
//离容器四侧的距离
|
||||
grid: {
|
||||
left: 45, // 左边距
|
||||
// right: 60, // 右边距
|
||||
top: 60, // 顶边距
|
||||
bottom: 40, // 底边距
|
||||
// containLabel: true,
|
||||
left: 0, // 左边距
|
||||
right: 0, // 右边距
|
||||
top: 80, // 顶边距
|
||||
bottom: 0, // 底边距
|
||||
containLabel: true,
|
||||
},
|
||||
//提示框组件
|
||||
tooltip: {
|
||||
@@ -110,7 +128,7 @@ const initChart = () => {
|
||||
axisLabel: {
|
||||
textStyle: {
|
||||
fontSize: 24,
|
||||
color:'#D6F1FA'
|
||||
color: '#D6F1FA'
|
||||
},
|
||||
},
|
||||
},
|
||||
@@ -120,7 +138,7 @@ const initChart = () => {
|
||||
axisLabel: {
|
||||
textStyle: {
|
||||
fontSize: 24,
|
||||
color:'#D6F1FA'
|
||||
color: '#D6F1FA'
|
||||
},
|
||||
},
|
||||
},
|
||||
@@ -131,9 +149,9 @@ const initChart = () => {
|
||||
data: [5, 9, 10, 7, 8, 15, 12],
|
||||
type: 'line',
|
||||
smooth: true,
|
||||
symbolSize:24,
|
||||
lineStyle:{
|
||||
width:5
|
||||
symbolSize: 24,
|
||||
lineStyle: {
|
||||
width: 5
|
||||
}
|
||||
},
|
||||
{
|
||||
@@ -141,9 +159,9 @@ const initChart = () => {
|
||||
data: [8, 15, 5, 9, 10, 7, 12],
|
||||
type: 'line',
|
||||
smooth: true,
|
||||
symbolSize:24,
|
||||
lineStyle:{
|
||||
width:5
|
||||
symbolSize: 24,
|
||||
lineStyle: {
|
||||
width: 5
|
||||
}
|
||||
},
|
||||
{
|
||||
@@ -151,9 +169,9 @@ const initChart = () => {
|
||||
data: [5, 15, 1, 9, 10, 7, 8],
|
||||
type: 'line',
|
||||
smooth: true,
|
||||
symbolSize:24,
|
||||
lineStyle:{
|
||||
width:5
|
||||
symbolSize: 24,
|
||||
lineStyle: {
|
||||
width: 5
|
||||
}
|
||||
},
|
||||
{
|
||||
@@ -161,9 +179,9 @@ const initChart = () => {
|
||||
data: [8, 15, 12, 5, 9, 2, 7],
|
||||
type: 'line',
|
||||
smooth: true,
|
||||
symbolSize:24,
|
||||
lineStyle:{
|
||||
width:5
|
||||
symbolSize: 24,
|
||||
lineStyle: {
|
||||
width: 5
|
||||
}
|
||||
},
|
||||
{
|
||||
@@ -171,9 +189,9 @@ const initChart = () => {
|
||||
data: [2, 9, 10, 15, 12, 7, 8,],
|
||||
type: 'line',
|
||||
smooth: true,
|
||||
symbolSize:24,
|
||||
lineStyle:{
|
||||
width:5
|
||||
symbolSize: 24,
|
||||
lineStyle: {
|
||||
width: 5
|
||||
}
|
||||
},
|
||||
]
|
||||
@@ -188,37 +206,6 @@ const initChart = () => {
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
#container {
|
||||
box-sizing: border-box;
|
||||
height: 754px;
|
||||
width: 1996px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
:deep(.el-dialog) {
|
||||
border: 2px solid #0F82AF;
|
||||
background: rgba(6, 34, 71, 0.78);
|
||||
border-radius: 20px;
|
||||
padding: 47px 30px;
|
||||
box-sizing: border-box;
|
||||
margin: 588px auto 0 auto;
|
||||
|
||||
.el-dialog__header {
|
||||
padding: 0;
|
||||
//display: none;
|
||||
.el-dialog__title {
|
||||
font-size: 32px;
|
||||
font-weight: bold;
|
||||
color: #D6F1FA;
|
||||
}
|
||||
|
||||
.el-dialog__close {
|
||||
color: #05FEFF;
|
||||
font-size: 35px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#bad-gas-info {
|
||||
position: absolute;
|
||||
z-index: 100;
|
||||
@@ -228,34 +215,7 @@ const initChart = () => {
|
||||
right: 72px;
|
||||
background-image: url(@/assets/images/badGasInfo/bg.png);
|
||||
|
||||
.left-icon {
|
||||
position: absolute;
|
||||
top: -3px;
|
||||
left: -3px;
|
||||
width: 41px;
|
||||
height: 41px;
|
||||
background-image: url(@/assets/images/badGasInfo/sp_jz.png);
|
||||
}
|
||||
|
||||
.right-icon {
|
||||
position: absolute;
|
||||
top: -3px;
|
||||
right: -3px;
|
||||
width: 41px;
|
||||
height: 41px;
|
||||
background-image: url(@/assets/images/badGasInfo/sp_jz.png);
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
.time-select{
|
||||
position: absolute;
|
||||
top: 47px;
|
||||
right: 119px;
|
||||
//display: flex;
|
||||
width: 204px;
|
||||
height: 68px;
|
||||
border-radius: 10px;
|
||||
border: 2px solid #0F82AF;
|
||||
}
|
||||
.title {
|
||||
width: 128px;
|
||||
height: 45px;
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<div id="used-ele">
|
||||
<div class="content">
|
||||
<div class="content" @click="handleOpenChart">
|
||||
<div class="item">
|
||||
<div></div>
|
||||
<span>当月用电量：{{ electricityConsumptionMonthly }}v</span>
|
||||
@@ -10,17 +10,44 @@
|
||||
<span>当月节省量：{{ monthlySavings }}v</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="digital-tunnel">
|
||||
<el-dialog v-model="isVisited" width="1365px" :modal="false">
|
||||
<div class="left-top-icon"></div>
|
||||
<div class="right-top-icon"></div>
|
||||
<div class="top-tag">
|
||||
<div class="allUsedEle">
|
||||
<div class="use-title">
|
||||
12月总用电量
|
||||
</div>
|
||||
<div class="value">2345v</div>
|
||||
</div>
|
||||
<div class="allUsedEle">
|
||||
<div class="use-title">
|
||||
当月节省量
|
||||
</div>
|
||||
<div class="value">345v</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="containerEle"></div>
|
||||
<div class="left-bottom-icon"></div>
|
||||
<div class="right-bottom-icon"></div>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import * as echarts from 'echarts';
|
||||
|
||||
const props = defineProps({
|
||||
list: Array,
|
||||
eleData: Array
|
||||
});
|
||||
let myEcharts = reactive({});
|
||||
const isVisited = ref(false);
|
||||
const eleData = ref([])
|
||||
const electricityConsumptionMonthly=ref()
|
||||
const monthlySavings=ref(55555)
|
||||
const electricityConsumptionMonthly = ref()
|
||||
const monthlySavings = ref(55555)
|
||||
watch(() => props.eleData, (now) => {
|
||||
getBasicData(now.frequencyChangerList)
|
||||
}, {deep: true});
|
||||
@@ -29,7 +56,7 @@ watch(() => props.list, (now) => {
|
||||
now.forEach(newItem => {
|
||||
if (item.equipmentId === newItem.equipmentId) {
|
||||
if (newItem.electricityConsumptionDay) {
|
||||
electricityConsumptionMonthly.value=newItem.electricityConsumptionMonthly
|
||||
electricityConsumptionMonthly.value = newItem.electricityConsumptionMonthly
|
||||
// item.electricityConsumptionDay = newItem.electricityConsumptionDay
|
||||
// item.electricityConsumptionMonthly = newItem.electricityConsumptionMonthly
|
||||
// item.electricityConsumptionTotal = newItem.electricityConsumptionTotal
|
||||
@@ -42,18 +69,92 @@ const getBasicData = (data) => {
|
||||
let tranObj = {}
|
||||
let tranArr = []
|
||||
data.map(item => {
|
||||
electricityConsumptionMonthly.value=item.electricityConsumptionMonthly,
|
||||
tranObj = {
|
||||
equipmentId: item.equipmentId,
|
||||
// equipmentName: item.equipmentName,
|
||||
// electricityConsumptionDay: item.electricityConsumptionDay,
|
||||
// electricityConsumptionMonthly: item.electricityConsumptionMonthly,
|
||||
// electricityConsumptionTotal: item.electricityConsumptionTotal,
|
||||
}
|
||||
electricityConsumptionMonthly.value = item.electricityConsumptionMonthly,
|
||||
tranObj = {
|
||||
equipmentId: item.equipmentId,
|
||||
// equipmentName: item.equipmentName,
|
||||
// electricityConsumptionDay: item.electricityConsumptionDay,
|
||||
// electricityConsumptionMonthly: item.electricityConsumptionMonthly,
|
||||
// electricityConsumptionTotal: item.electricityConsumptionTotal,
|
||||
}
|
||||
tranArr.push(tranObj)
|
||||
})
|
||||
eleData.value = tranArr
|
||||
}
|
||||
const handleOpenChart = () => {
|
||||
console.log('用电量弹窗')
|
||||
isVisited.value = true
|
||||
nextTick(() => {
|
||||
initChart()
|
||||
})
|
||||
}
|
||||
/**
|
||||
* 初始化echarts实例方法
|
||||
*/
|
||||
const initChart = () => {
|
||||
//3.初始化container容器
|
||||
myEcharts = echarts.init(document.getElementById('containerEle'));
|
||||
//5.传入数据
|
||||
let option = {
|
||||
//图例
|
||||
legend: {
|
||||
left: 0,
|
||||
textStyle: {
|
||||
color: '#FFFFFF',
|
||||
fontSize: 28
|
||||
},
|
||||
// itemWidth: 20,
|
||||
// itemHeight: 20
|
||||
},
|
||||
//离容器四侧的距离
|
||||
grid: {
|
||||
left: 0, // 左边距
|
||||
right: 20, // 右边距
|
||||
// top: 80, // 顶边距
|
||||
bottom: 20, // 底边距
|
||||
containLabel: true,
|
||||
},
|
||||
//提示框组件
|
||||
tooltip: {
|
||||
show: true,
|
||||
trigger: 'axis'
|
||||
},
|
||||
//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'],
|
||||
axisLabel: {
|
||||
textStyle: {
|
||||
fontSize: 24,
|
||||
color: '#D6F1FA'
|
||||
},
|
||||
},
|
||||
},
|
||||
//Y轴
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
axisLabel: {
|
||||
textStyle: {
|
||||
fontSize: 24,
|
||||
color: '#D6F1FA'
|
||||
},
|
||||
},
|
||||
},
|
||||
//配置项
|
||||
series: [
|
||||
{
|
||||
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],
|
||||
type: 'bar'
|
||||
},
|
||||
]
|
||||
}
|
||||
myEcharts.setOption(option);
|
||||
//图表大小自适应窗口大小变化
|
||||
window.onresize = () => {
|
||||
myEcharts.resize();
|
||||
}
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@@ -82,6 +183,7 @@ const getBasicData = (data) => {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
cursor: pointer;
|
||||
|
||||
.item {
|
||||
height: 37px;
|
||||
|
||||
69
src/components/timeRangeBtn/index.vue
Normal file
69
src/components/timeRangeBtn/index.vue
Normal file
@@ -0,0 +1,69 @@
|
||||
<template>
|
||||
<div class="time-range-group">
|
||||
<div
|
||||
class="time-range-button"
|
||||
:class="{ 'time-range-button-active': selectButton == index }"
|
||||
@click="select(index)"
|
||||
v-for="(item, index) in buttonList"
|
||||
:key="index"
|
||||
>
|
||||
<div class="time-range-text">{{ item }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
const props = defineProps({
|
||||
// 按钮列表
|
||||
buttonList: {
|
||||
type: Array,
|
||||
default: () => [],
|
||||
},
|
||||
// 按钮选中的值
|
||||
modelValue: {
|
||||
type: Number,
|
||||
default: 0,
|
||||
},
|
||||
width: {
|
||||
type: String,
|
||||
default: "auto",
|
||||
},
|
||||
});
|
||||
const emit = defineEmits(["update:modelValue", "select"]);
|
||||
|
||||
const selectButton = ref(props.modelValue);
|
||||
|
||||
const select = (index) => {
|
||||
if (selectButton.value === index) return;
|
||||
selectButton.value = index;
|
||||
emit("update:modelValue", index);
|
||||
emit("select", index);
|
||||
};
|
||||
|
||||
watchEffect(() => {
|
||||
selectButton.value = props.modelValue;
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.time-range-group {
|
||||
width: 204px;
|
||||
height: 68px;
|
||||
border: 2px solid #0F82AF;
|
||||
border-radius: 10px;
|
||||
background: #062247;
|
||||
display: flex;
|
||||
font-size: 28px;
|
||||
.time-range-button {
|
||||
cursor: pointer;
|
||||
padding: 15px 20px;
|
||||
box-sizing: border-box;
|
||||
color: #FFFFFF;
|
||||
&.time-range-button-active {
|
||||
background: #264A78;
|
||||
border-radius: 10px;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user