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:
odjbin
2023-12-14 08:42:52 +00:00
6 changed files with 44 additions and 31 deletions

Binary file not shown.

After

Width:  |  Height:  |  Size: 16 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.3 KiB

View File

@@ -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 {

View File

@@ -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;

View File

@@ -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;

View File

@@ -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;