Merge pull request '邓洁 : 打开弹窗时背景更改' (#126) from dengjie into dev
Reviewed-on: http://git.feashow.cn/clay/tunnel-cloud-web/pulls/126
This commit is contained in:
BIN
src/assets/images/badGasInfo/sp_active.png
Normal file
BIN
src/assets/images/badGasInfo/sp_active.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 16 KiB |
BIN
src/assets/images/usedEle/bpq_active.png
Normal file
BIN
src/assets/images/usedEle/bpq_active.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.3 KiB |
@@ -1,5 +1,5 @@
|
|||||||
<template>
|
<template>
|
||||||
<div id="bad-gas-info">
|
<div id="bad-gas-info" :style="{ backgroundImage: 'url(' +getImageUrl(bgImage)+')' }">
|
||||||
<div class="title">有害气体</div>
|
<div class="title">有害气体</div>
|
||||||
<div class="info-list">
|
<div class="info-list">
|
||||||
<gas-info-item v-for="item in badGasList" :key="item.equipmentId" :gasInfo="item" @click="handleOpenChart"/>
|
<gas-info-item v-for="item in badGasList" :key="item.equipmentId" :gasInfo="item" @click="handleOpenChart"/>
|
||||||
@@ -38,7 +38,11 @@ const selectTimeButton = ref(0);
|
|||||||
const isVisited = ref(false);
|
const isVisited = ref(false);
|
||||||
const badGasList = ref([])
|
const badGasList = ref([])
|
||||||
let myEcharts = reactive({});
|
let myEcharts = reactive({});
|
||||||
|
const bgImage = computed(() =>
|
||||||
|
isVisited.value
|
||||||
|
? "sp_active.png"
|
||||||
|
: "bg.png"
|
||||||
|
);
|
||||||
watch(() => props.list, (now) => {
|
watch(() => props.list, (now) => {
|
||||||
badGasList.value.forEach(item => {
|
badGasList.value.forEach(item => {
|
||||||
now.forEach(newItem => {
|
now.forEach(newItem => {
|
||||||
@@ -90,6 +94,9 @@ const handleOpenChart = () => {
|
|||||||
initChart()
|
initChart()
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
const getImageUrl = (name) => {
|
||||||
|
return new URL(`../../../assets/images/badGasInfo/${name}`, import.meta.url).href
|
||||||
|
}
|
||||||
/**
|
/**
|
||||||
* 初始化echarts实例方法
|
* 初始化echarts实例方法
|
||||||
*/
|
*/
|
||||||
@@ -213,7 +220,7 @@ const initChart = () => {
|
|||||||
height: 621px;
|
height: 621px;
|
||||||
top: 1441px;
|
top: 1441px;
|
||||||
right: 72px;
|
right: 72px;
|
||||||
background-image: url(@/assets/images/badGasInfo/bg.png);
|
background-image: url(../../../assets/images/badGasInfo/bg.png);
|
||||||
|
|
||||||
|
|
||||||
.title {
|
.title {
|
||||||
|
|||||||
@@ -127,10 +127,11 @@ const getBasicData = (data) => {
|
|||||||
position: absolute;
|
position: absolute;
|
||||||
top: 1015px;
|
top: 1015px;
|
||||||
left: 70px;
|
left: 70px;
|
||||||
width: 826px;
|
width: 830px;
|
||||||
height: 928px;
|
height: 928px;
|
||||||
background-image: url(@/assets/images/transducer/bg.png);
|
background-image: url(@/assets/images/transducer/bg.png);
|
||||||
padding: 0 30px;
|
padding: 0 30px;
|
||||||
|
box-sizing: border-box;
|
||||||
|
|
||||||
.transducer-item {
|
.transducer-item {
|
||||||
border-bottom: rgba(107, 163, 237, 0.4) solid 2px;
|
border-bottom: rgba(107, 163, 237, 0.4) solid 2px;
|
||||||
|
|||||||
@@ -1,5 +1,5 @@
|
|||||||
<template>
|
<template>
|
||||||
<div id="used-ele">
|
<div id="used-ele" :style="{ backgroundImage: 'url(' +getImageUrl(bgImage)+')' }">
|
||||||
<div class="content" @click="handleOpenChart">
|
<div class="content" @click="handleOpenChart">
|
||||||
<div class="item">
|
<div class="item">
|
||||||
<div></div>
|
<div></div>
|
||||||
@@ -48,6 +48,11 @@ const isVisited = ref(false);
|
|||||||
const eleData = ref([])
|
const eleData = ref([])
|
||||||
const electricityConsumptionMonthly = ref()
|
const electricityConsumptionMonthly = ref()
|
||||||
const monthlySavings = ref(55555)
|
const monthlySavings = ref(55555)
|
||||||
|
const bgImage = computed(() =>
|
||||||
|
isVisited.value
|
||||||
|
? "bpq_active.png"
|
||||||
|
: "bg.png"
|
||||||
|
);
|
||||||
watch(() => props.eleData, (now) => {
|
watch(() => props.eleData, (now) => {
|
||||||
getBasicData(now.frequencyChangerList)
|
getBasicData(now.frequencyChangerList)
|
||||||
}, {deep: true});
|
}, {deep: true});
|
||||||
@@ -154,7 +159,9 @@ const initChart = () => {
|
|||||||
myEcharts.resize();
|
myEcharts.resize();
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
const getImageUrl = (name) => {
|
||||||
|
return new URL(`../../../assets/images/usedEle/${name}`, import.meta.url).href
|
||||||
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
@@ -184,7 +191,6 @@ const initChart = () => {
|
|||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
|
|
||||||
.item {
|
.item {
|
||||||
height: 37px;
|
height: 37px;
|
||||||
font-size: 28px;
|
font-size: 28px;
|
||||||
|
|||||||
@@ -99,7 +99,6 @@ let isWaring = computed(() => {
|
|||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
height: 37px;
|
height: 37px;
|
||||||
font-size: 28px;
|
font-size: 28px;
|
||||||
font-family: MicrosoftYaHei;
|
|
||||||
color: #d6f1fa;
|
color: #d6f1fa;
|
||||||
line-height: 37px;
|
line-height: 37px;
|
||||||
margin: 0 20px 0 14px;
|
margin: 0 20px 0 14px;
|
||||||
@@ -125,7 +124,7 @@ let isWaring = computed(() => {
|
|||||||
#point {
|
#point {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
height: 20px;
|
height: 20px;
|
||||||
background: #60ddde;
|
background: #92D18F;
|
||||||
width: 3px;
|
width: 3px;
|
||||||
border-radius: 4px;
|
border-radius: 4px;
|
||||||
box-shadow: 0 0 10px #92D18F;
|
box-shadow: 0 0 10px #92D18F;
|
||||||
|
|||||||
Reference in New Issue
Block a user