update code
parent
1723b7d0ac
commit
05c15aeb9a
|
|
@ -199,6 +199,7 @@ body {
|
||||||
}
|
}
|
||||||
.screen-module.no-title .module-ctx {
|
.screen-module.no-title .module-ctx {
|
||||||
padding: 0px;
|
padding: 0px;
|
||||||
|
height: 100%;
|
||||||
}
|
}
|
||||||
.screen-module.no-border {
|
.screen-module.no-border {
|
||||||
background-image: none;
|
background-image: none;
|
||||||
|
|
|
||||||
|
|
@ -213,6 +213,7 @@ body{
|
||||||
}
|
}
|
||||||
.module-ctx{
|
.module-ctx{
|
||||||
padding: 0px;
|
padding: 0px;
|
||||||
|
height: 100%;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
&.no-border{
|
&.no-border{
|
||||||
|
|
|
||||||
|
|
@ -1 +1,3 @@
|
||||||
<svg style="width: 1em;height: 1em;vertical-align: middle;overflow: hidden;" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7027"><path d="M519.723387 534.475706a19.438636 19.438636 0 0 0-19.438636 19.438636v450.559809a19.438636 19.438636 0 0 0 5.640675 13.79796 19.178297 19.178297 0 0 0 13.797961 5.727455h133.640621a19.525415 19.525415 0 0 0 13.79796-5.727455 19.091517 19.091517 0 0 0 5.640676-13.79796V553.827562a19.438636 19.438636 0 0 0-19.438636-19.438636h-34.104392V232.482613H798.37276v64.477261a19.351856 19.351856 0 0 0 29.244733 16.835247l164.187049-95.457586a19.525415 19.525415 0 0 0 0-33.757274l-164.187049-95.457587-3.210846-1.735592a18.39728 18.39728 0 0 0-6.508472-1.214915A19.525415 19.525415 0 0 0 798.37276 105.697582V173.559248H393.719372L99.710005 2.690168A19.265077 19.265077 0 0 0 89.990687 0H41.741216a19.438636 19.438636 0 0 0-19.438636 19.525415A21.087449 21.087449 0 0 0 23.430715 26.033887l60.745737 168.69959a19.351856 19.351856 0 0 1 0 13.277282l-60.745737 168.69959a19.351856 19.351856 0 0 0 18.223722 26.033887h48.33625a19.265077 19.265077 0 0 0 9.806098-2.603389l287.934793-167.658234h166.182981v301.906313z" p-id="7028"></path></svg>
|
<svg style="width: 1em;height: 1em;vertical-align: middle;overflow: hidden;"
|
||||||
|
viewBox="0 0 1024 1024" version="1.1"
|
||||||
|
xmlns="http://www.w3.org/2000/svg" p-id="7027"><path d="M519.723387 534.475706a19.438636 19.438636 0 0 0-19.438636 19.438636v450.559809a19.438636 19.438636 0 0 0 5.640675 13.79796 19.178297 19.178297 0 0 0 13.797961 5.727455h133.640621a19.525415 19.525415 0 0 0 13.79796-5.727455 19.091517 19.091517 0 0 0 5.640676-13.79796V553.827562a19.438636 19.438636 0 0 0-19.438636-19.438636h-34.104392V232.482613H798.37276v64.477261a19.351856 19.351856 0 0 0 29.244733 16.835247l164.187049-95.457586a19.525415 19.525415 0 0 0 0-33.757274l-164.187049-95.457587-3.210846-1.735592a18.39728 18.39728 0 0 0-6.508472-1.214915A19.525415 19.525415 0 0 0 798.37276 105.697582V173.559248H393.719372L99.710005 2.690168A19.265077 19.265077 0 0 0 89.990687 0H41.741216a19.438636 19.438636 0 0 0-19.438636 19.525415A21.087449 21.087449 0 0 0 23.430715 26.033887l60.745737 168.69959a19.351856 19.351856 0 0 1 0 13.277282l-60.745737 168.69959a19.351856 19.351856 0 0 0 18.223722 26.033887h48.33625a19.265077 19.265077 0 0 0 9.806098-2.603389l287.934793-167.658234h166.182981v301.906313z" p-id="7028"></path></svg>
|
||||||
|
Before Width: | Height: | Size: 1.2 KiB After Width: | Height: | Size: 1.2 KiB |
|
|
@ -28,14 +28,110 @@
|
||||||
</el-col>
|
</el-col>
|
||||||
</div>
|
</div>
|
||||||
</module-one-1-1>
|
</module-one-1-1>
|
||||||
<module-one-1-1 label="用电统计">
|
<module-one-1-1 label="用电统计" class="left-power">
|
||||||
|
<div style="height: 50%;">
|
||||||
|
<div class="survey_content">
|
||||||
|
<div class="survey_content_img">
|
||||||
|
<svg-icon icon-class="power" class="an2"></svg-icon>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div style="height: 50%;" class="power-chart">
|
||||||
|
<el-col :span="8">
|
||||||
|
<div class="chart-bg power-chart1">
|
||||||
|
<div class="chart-proc"></div>
|
||||||
|
<div class="data-top">
|
||||||
|
<div class="chart-data led-number">2999339</div>
|
||||||
|
<div class="chart-unit">kW</div>
|
||||||
|
</div>
|
||||||
|
<div class="data-bottom">
|
||||||
|
施工用电
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</el-col>
|
||||||
|
<el-col :span="8">
|
||||||
|
<div class="chart-bg power-chart2">
|
||||||
|
<div class="chart-proc" style="height:60%;"></div>
|
||||||
|
<div class="data-top">
|
||||||
|
<div class="chart-data led-number">2999339</div>
|
||||||
|
<div class="chart-unit">(T CO₂)</div>
|
||||||
|
</div>
|
||||||
|
<div class="data-bottom">
|
||||||
|
碳排放
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</el-col>
|
||||||
|
<el-col :span="8">
|
||||||
|
<div class="chart-bg power-chart3">
|
||||||
|
<div class="chart-proc" style="height:40%;"></div>
|
||||||
|
<div class="data-top">
|
||||||
|
<div class="chart-data led-number">2999339</div>
|
||||||
|
<div class="chart-unit">(T CO₂)</div>
|
||||||
|
</div>
|
||||||
|
<div class="data-bottom">
|
||||||
|
碳减排
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</el-col>
|
||||||
|
</div>
|
||||||
</module-one-1-1>
|
</module-one-1-1>
|
||||||
</el-col>
|
</el-col>
|
||||||
|
|
||||||
<el-col :span="12" class="h100">
|
<el-col :span="12" class="h100">
|
||||||
<module-one-2-2 label="" class="no-title no-border">
|
<module-one-2-2 label="" class="no-title no-border center-top">
|
||||||
|
<div class="top-total-data">
|
||||||
|
<el-col :span="8">
|
||||||
|
<div class="data-item">
|
||||||
|
<div class="td-title">
|
||||||
|
<svg-icon icon-class="money"></svg-icon>
|
||||||
|
碳排放预估总量(T CO₂)
|
||||||
|
</div>
|
||||||
|
<div class="td-number">
|
||||||
|
<people-number :number="225566.1" unit=""></people-number>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</el-col>
|
||||||
|
<el-col :span="8">
|
||||||
|
<div class="data-item">
|
||||||
|
<div class="td-title">
|
||||||
|
<svg-icon icon-class="money"></svg-icon>
|
||||||
|
碳排放监测累计总量(T CO₂)
|
||||||
|
</div>
|
||||||
|
<div class="td-number">
|
||||||
|
<people-number :number="225566.9" unit=""></people-number>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</el-col>
|
||||||
|
<el-col :span="8">
|
||||||
|
<div class="data-item">
|
||||||
|
<div class="td-title">
|
||||||
|
<svg-icon icon-class="money"></svg-icon>
|
||||||
|
当月碳排放监测量(T CO₂)
|
||||||
|
</div>
|
||||||
|
<div class="td-number">
|
||||||
|
<people-number :number="225566.9" unit=""></people-number>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</el-col>
|
||||||
|
</div>
|
||||||
|
<div class="prj-img-list">
|
||||||
|
<el-carousel height="100%" :autoplay="false">
|
||||||
|
<el-carousel-item v-for="(it, idx) in prjImgs" :key="idx">
|
||||||
|
<el-image style="width: 100%; height: 100%" :src="it" fit="contain" />
|
||||||
|
</el-carousel-item>
|
||||||
|
</el-carousel>
|
||||||
|
</div>
|
||||||
</module-one-2-2>
|
</module-one-2-2>
|
||||||
<module-one-1-2 label="节能减排趋势" class="energy-tendency">
|
<module-one-1-2 label="节能减排趋势" class="energy-tendency">
|
||||||
|
<el-col :span="8" class="et-chart1">
|
||||||
|
<img src="images/security1.gif" class="time-img" />
|
||||||
|
<my-chart :key="chartKey" id="energy-tendency-total" width="100%" height="100%"
|
||||||
|
:render="renderChart4"></my-chart>
|
||||||
|
</el-col>
|
||||||
|
<el-col :span="16">
|
||||||
|
<my-chart :key="chartKey" id="energy-tendency-line" width="100%" height="100%"
|
||||||
|
:render="renderChart5"></my-chart>
|
||||||
|
</el-col>
|
||||||
</module-one-1-2>
|
</module-one-1-2>
|
||||||
</el-col>
|
</el-col>
|
||||||
<el-col :span="6" class="h100">
|
<el-col :span="6" class="h100">
|
||||||
|
|
@ -50,14 +146,21 @@
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
import debounce from 'lodash.debounce'
|
||||||
|
import SvgIcon from '@/components/SvgIcon.vue';
|
||||||
export default {
|
export default {
|
||||||
|
components: { SvgIcon },
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
dpi: '',
|
dpi: '',
|
||||||
chartKey: 0,
|
chartKey: 0,
|
||||||
|
prjImgs: [],
|
||||||
|
selProject: null,
|
||||||
|
prjInfo: {},
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
mounted() {
|
mounted() {
|
||||||
|
this.$store.dispatch('ChangeNav', 6);
|
||||||
this.dpi = this.$dpi();
|
this.dpi = this.$dpi();
|
||||||
window.addEventListener("resize", () => {
|
window.addEventListener("resize", () => {
|
||||||
if (this.dpi != this.$dpi()) {
|
if (this.dpi != this.$dpi()) {
|
||||||
|
|
@ -65,8 +168,23 @@ export default {
|
||||||
this.chartKey++;
|
this.chartKey++;
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
this.$bus.$on('projectChange', debounce(prj => {
|
||||||
|
this.selProject = prj;
|
||||||
|
this.init();
|
||||||
|
}));
|
||||||
|
this.selProject = this.$store.getters.selProject;
|
||||||
|
this.init();
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
|
init() {
|
||||||
|
if (!this.selProject) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
this.$api.project.getProjectInfo(this.selProject.id).then(d => {
|
||||||
|
this.prjInfo = d.data || {};
|
||||||
|
this.prjImgs = (this.prjInfo?.setting?.orgImage || '').split(",").filter(d => d);
|
||||||
|
});
|
||||||
|
},
|
||||||
renderChart1() {
|
renderChart1() {
|
||||||
let is1K = this.$dpi() == "1K";
|
let is1K = this.$dpi() == "1K";
|
||||||
let is2K = this.$dpi() == "2K";
|
let is2K = this.$dpi() == "2K";
|
||||||
|
|
@ -96,7 +214,7 @@ export default {
|
||||||
borderWidth: 2
|
borderWidth: 2
|
||||||
},
|
},
|
||||||
label: {
|
label: {
|
||||||
formatter: ["{b|{b}}", "{c|{c}T CO2}"].join("\n"),//"{b|b}\n{c|c T CO2}",
|
formatter: ["{b|{b}}", "{c|{c}\nT CO₂}"].join("\n"),//"{b|b}\n{c|c T CO2}",
|
||||||
rich: {
|
rich: {
|
||||||
b: {
|
b: {
|
||||||
color: '#fff',
|
color: '#fff',
|
||||||
|
|
@ -276,6 +394,72 @@ export default {
|
||||||
]
|
]
|
||||||
};
|
};
|
||||||
return option;
|
return option;
|
||||||
|
},
|
||||||
|
renderChart4() {
|
||||||
|
let is1K = this.$dpi() == "1K";
|
||||||
|
let is2K = this.$dpi() == "2K";
|
||||||
|
let option = {
|
||||||
|
legend: {
|
||||||
|
|
||||||
|
bottom: is1K ? '0%' : is2K ? '10%' : '5%',
|
||||||
|
left: 'center',
|
||||||
|
itemWidth: is1K ? 25 : is2K ? 30 : 40,
|
||||||
|
itemHeight: is1K ? 14 : is2K ? 20 : 20,
|
||||||
|
itemGap: is1K ? 20 : is2K ? 30 : 40,
|
||||||
|
textStyle: {
|
||||||
|
color: "#fff",
|
||||||
|
fontSize: is1K ? 14 : is2K ? 20 : 30,
|
||||||
|
}
|
||||||
|
},
|
||||||
|
color: ['#C060F6', '#5087EC', '#FFBB3A'],
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
type: 'pie',
|
||||||
|
radius: is1K ? [40, 66] : is2K ? [60, 100] : [140, 190],
|
||||||
|
center: is1K ? ['50%', '40%'] : is2K ? ['50%', '40%'] : ['50%', '40%'],
|
||||||
|
roseType: 'area',
|
||||||
|
itemStyle: {
|
||||||
|
borderRadius: is1K ? 4 : is2K ? 8 : 10,
|
||||||
|
borderColor: '#fff',
|
||||||
|
borderWidth: 2
|
||||||
|
},
|
||||||
|
data: [
|
||||||
|
{ value: 40000, name: '电力' },
|
||||||
|
{ value: 38888, name: '建材' },
|
||||||
|
{ value: 32222, name: '油耗' },
|
||||||
|
],
|
||||||
|
label: {
|
||||||
|
overflow: 'none',
|
||||||
|
formatter: ["{b|{b}}", "{c|{c}\nT CO₂}"].join("\n"),
|
||||||
|
rich: {
|
||||||
|
b: {
|
||||||
|
color: '#01e5ff',
|
||||||
|
height: is1K ? 20 : is2K ? 30 : 50,
|
||||||
|
fontSize: is1K ? 12 : is2K ? 16 : 30,
|
||||||
|
},
|
||||||
|
c: {
|
||||||
|
color: '#01e5ff',
|
||||||
|
fontSize: is1K ? 12 : is2K ? 16 : 30,
|
||||||
|
}
|
||||||
|
},
|
||||||
|
show: true,
|
||||||
|
fontSize: is1K ? 12 : is2K ? 16 : 30,
|
||||||
|
},
|
||||||
|
labelLayout: {
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
]
|
||||||
|
};
|
||||||
|
return option;
|
||||||
|
},
|
||||||
|
renderChart5() {
|
||||||
|
let is1K = this.$dpi() == "1K";
|
||||||
|
let is2K = this.$dpi() == "2K";
|
||||||
|
let option = {
|
||||||
|
|
||||||
|
};
|
||||||
|
return option;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
@ -301,14 +485,7 @@ export default {
|
||||||
}
|
}
|
||||||
|
|
||||||
.survey_content {
|
.survey_content {
|
||||||
height: 100%;
|
|
||||||
|
|
||||||
.survey_content_img {
|
.survey_content_img {
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
line-height: 100%;
|
|
||||||
|
|
||||||
|
|
||||||
.oil-data {
|
.oil-data {
|
||||||
height: 100%;
|
height: 100%;
|
||||||
position: relative;
|
position: relative;
|
||||||
|
|
@ -327,7 +504,171 @@ export default {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.survey_content {
|
||||||
|
height: 100%;
|
||||||
|
|
||||||
|
.survey_content_img {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
line-height: 100%;
|
||||||
|
|
||||||
|
.an2 {
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.left-power {
|
||||||
|
.svg-icon {
|
||||||
|
fill: #63c8ff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.power-chart {
|
||||||
|
.el-col {
|
||||||
|
height: 100%;
|
||||||
|
padding: 10px;
|
||||||
|
|
||||||
|
.chart-bg {
|
||||||
|
position: relative;
|
||||||
|
border-radius: 5px 5px 0px 0px;
|
||||||
|
height: 100%;
|
||||||
|
|
||||||
|
&.power-chart1 {
|
||||||
|
background-color: #0c142d;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
&.power-chart2 {
|
||||||
|
background-color: #FFBB3A;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.power-chart3 {
|
||||||
|
background-color: #17AD55;
|
||||||
|
}
|
||||||
|
|
||||||
|
.chart-proc {
|
||||||
|
height: 50%;
|
||||||
|
position: absolute;
|
||||||
|
bottom: 0px;
|
||||||
|
width: 100%;
|
||||||
|
background-color: #05275aad;
|
||||||
|
z-index: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.data-top {
|
||||||
|
position: relative;
|
||||||
|
z-index: 10;
|
||||||
|
height: 50%;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
flex-flow: column;
|
||||||
|
|
||||||
|
.chart-data {
|
||||||
|
color: #01e5ff;
|
||||||
|
text-shadow: 2px 2px 2px black;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.data-bottom {
|
||||||
|
position: relative;
|
||||||
|
z-index: 10;
|
||||||
|
height: 50%;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.center-top {
|
||||||
|
.top-total-data {
|
||||||
|
height: 110px;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
overflow: hidden;
|
||||||
|
width: 100%;
|
||||||
|
|
||||||
|
.el-col {
|
||||||
|
padding: 10px 10px;
|
||||||
|
|
||||||
|
&:first-child {
|
||||||
|
padding: 10px 10px 10px 0px;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:last-child {
|
||||||
|
padding: 10px 0px 10px 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.data-item {
|
||||||
|
background-image: linear-gradient(89deg, #192c6447 0%, #192c648a 100%);
|
||||||
|
|
||||||
|
.td-title {
|
||||||
|
height: 40px;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
color: #01e5ff;
|
||||||
|
|
||||||
|
.svg-icon {
|
||||||
|
margin-right: 8px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.td-number {
|
||||||
|
height: 70px;
|
||||||
|
display: flex;
|
||||||
|
position: relative;
|
||||||
|
top: -10px;
|
||||||
|
justify-content: center;
|
||||||
|
|
||||||
|
.people-number-con {
|
||||||
|
padding: 0px;
|
||||||
|
|
||||||
|
div {
|
||||||
|
margin-right: 2px;
|
||||||
|
width: 25px;
|
||||||
|
color: #01e5ff;
|
||||||
|
text-shadow: 2px 2px 2px black;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.prj-img-list {
|
||||||
|
height: calc(100% - 130px);
|
||||||
|
|
||||||
|
.el-carousel {
|
||||||
|
height: 100%;
|
||||||
|
|
||||||
|
.el-carousel__arrow {
|
||||||
|
width: 50px;
|
||||||
|
height: 50px;
|
||||||
|
background-color: #192c648a;
|
||||||
|
|
||||||
|
i {
|
||||||
|
font-size: 20px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.energy-tendency {
|
||||||
|
.el-col {
|
||||||
|
height: 100%;
|
||||||
|
|
||||||
|
&.et-chart1 {
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (max-width: 1920px) {
|
@media (max-width: 1920px) {
|
||||||
.left-oil {
|
.left-oil {
|
||||||
@keyframes bounce {
|
@keyframes bounce {
|
||||||
|
|
@ -338,13 +679,15 @@ export default {
|
||||||
}
|
}
|
||||||
|
|
||||||
50% {
|
50% {
|
||||||
transform: translateY(-30px) ;
|
transform: translateY(-30px);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.survey_content {
|
.survey_content {
|
||||||
|
|
||||||
.survey_content_img {
|
.survey_content_img {
|
||||||
background-size: 120px 120px;
|
background-size: 120px 120px;
|
||||||
|
|
||||||
.oil-data {
|
.oil-data {
|
||||||
.an1 {
|
.an1 {
|
||||||
top: 20px;
|
top: 20px;
|
||||||
|
|
@ -359,7 +702,66 @@ export default {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.left-power {
|
||||||
|
@keyframes bounce2 {
|
||||||
|
from {
|
||||||
|
width: 10px;
|
||||||
|
height: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
to {
|
||||||
|
width: 60px;
|
||||||
|
height: 60px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.an2 {
|
||||||
|
animation: bounce2 1s infinite;
|
||||||
|
}
|
||||||
|
|
||||||
|
.survey_content {
|
||||||
|
.survey_content_img {
|
||||||
|
background-size: 120px 120px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.chart-bg {
|
||||||
|
.data-top {
|
||||||
|
.chart-data {
|
||||||
|
font-size: 30px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.chart-unit {
|
||||||
|
font-size: 12px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.data-bottom {
|
||||||
|
font-size: 20px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.energy-tendency {
|
||||||
|
.el-col {
|
||||||
|
&.et-chart1 {
|
||||||
|
position: relative;
|
||||||
|
|
||||||
|
.time-img {
|
||||||
|
position: absolute;
|
||||||
|
width: 110px;
|
||||||
|
height: 110px;
|
||||||
|
top: 50%;
|
||||||
|
left: 50%;
|
||||||
|
margin-top: -79px;
|
||||||
|
margin-left: -56px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (min-width: 1921px) and (max-width: 2560px) {
|
@media (min-width: 1921px) and (max-width: 2560px) {
|
||||||
.left-oil {
|
.left-oil {
|
||||||
@keyframes bounce {
|
@keyframes bounce {
|
||||||
|
|
@ -370,13 +772,15 @@ export default {
|
||||||
}
|
}
|
||||||
|
|
||||||
50% {
|
50% {
|
||||||
transform: translateY(-30px) ;
|
transform: translateY(-30px);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.survey_content {
|
.survey_content {
|
||||||
|
|
||||||
.survey_content_img {
|
.survey_content_img {
|
||||||
background-size: 160px 160px !important;
|
background-size: 160px 160px !important;
|
||||||
|
|
||||||
.oil-data {
|
.oil-data {
|
||||||
.an1 {
|
.an1 {
|
||||||
top: 50px !important;
|
top: 50px !important;
|
||||||
|
|
@ -384,14 +788,121 @@ export default {
|
||||||
}
|
}
|
||||||
|
|
||||||
.oil-title {
|
.oil-title {
|
||||||
bottom:60px !important;
|
bottom: 60px !important;
|
||||||
font-size: 20px !important;
|
font-size: 20px !important;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.left-power {
|
||||||
|
@keyframes bounce2 {
|
||||||
|
from {
|
||||||
|
width: 10px;
|
||||||
|
height: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
to {
|
||||||
|
width: 80px;
|
||||||
|
height: 80px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.an2 {
|
||||||
|
animation: bounce2 1s infinite;
|
||||||
|
top: 40px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.survey_content {
|
||||||
|
.survey_content_img {
|
||||||
|
background-size: 160px 160px !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.chart-bg {
|
||||||
|
.data-top {
|
||||||
|
.chart-data {
|
||||||
|
font-size: 40px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.chart-unit {
|
||||||
|
font-size: 20px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.data-bottom {
|
||||||
|
font-size: 30px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.center-top {
|
||||||
|
.top-total-data {
|
||||||
|
height: 150px !important;
|
||||||
|
|
||||||
|
.el-col {
|
||||||
|
.data-item {
|
||||||
|
.td-title {
|
||||||
|
height: 60px !important;
|
||||||
|
font-size: 20px !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.td-number {
|
||||||
|
height: 90px !important;
|
||||||
|
top: -15px !important;
|
||||||
|
|
||||||
|
.people-number-con {
|
||||||
|
div {
|
||||||
|
width: 35px !important;
|
||||||
|
height: 60px !important;
|
||||||
|
font-size: 50px;
|
||||||
|
margin-right: 4px !important;
|
||||||
|
line-height: 60px !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.prj-img-list {
|
||||||
|
height: calc(100% - 170px) !important;
|
||||||
|
|
||||||
|
.el-carousel {
|
||||||
|
height: 100%;
|
||||||
|
|
||||||
|
.el-carousel__arrow {
|
||||||
|
width: 80px !important;
|
||||||
|
height: 80px !important;
|
||||||
|
|
||||||
|
i {
|
||||||
|
font-size: 30px !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.energy-tendency {
|
||||||
|
.el-col {
|
||||||
|
&.et-chart1 {
|
||||||
|
position: relative;
|
||||||
|
|
||||||
|
.time-img {
|
||||||
|
position: absolute;
|
||||||
|
width: 180px;
|
||||||
|
height: 180px;
|
||||||
|
top: 50%;
|
||||||
|
left: 50%;
|
||||||
|
margin-top: -126px;
|
||||||
|
margin-left: -89px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (min-width: 2561px) {
|
@media (min-width: 2561px) {
|
||||||
.left-oil {
|
.left-oil {
|
||||||
@keyframes bounce {
|
@keyframes bounce {
|
||||||
|
|
@ -402,13 +913,15 @@ export default {
|
||||||
}
|
}
|
||||||
|
|
||||||
50% {
|
50% {
|
||||||
transform: translateY(-30px) ;
|
transform: translateY(-30px);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.survey_content {
|
.survey_content {
|
||||||
|
|
||||||
.survey_content_img {
|
.survey_content_img {
|
||||||
background-size: 200px 200px !important;
|
background-size: 200px 200px !important;
|
||||||
|
|
||||||
.oil-data {
|
.oil-data {
|
||||||
.an1 {
|
.an1 {
|
||||||
top: 90px !important;
|
top: 90px !important;
|
||||||
|
|
@ -416,12 +929,117 @@ export default {
|
||||||
}
|
}
|
||||||
|
|
||||||
.oil-title {
|
.oil-title {
|
||||||
bottom:80px !important;
|
bottom: 80px !important;
|
||||||
font-size: 30px !important;
|
font-size: 30px !important;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.left-power {
|
||||||
|
@keyframes bounce2 {
|
||||||
|
from {
|
||||||
|
width: 20px;
|
||||||
|
height: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
to {
|
||||||
|
width: 120px;
|
||||||
|
height: 120px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.an2 {
|
||||||
|
animation: bounce2 1s infinite;
|
||||||
|
top: 60px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.survey_content {
|
||||||
|
.survey_content_img {
|
||||||
|
background-size: 200px 200px !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.chart-bg {
|
||||||
|
.data-top {
|
||||||
|
.chart-data {
|
||||||
|
font-size: 60px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.chart-unit {
|
||||||
|
font-size: 30px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.data-bottom {
|
||||||
|
font-size: 40px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.center-top {
|
||||||
|
.top-total-data {
|
||||||
|
height: 180px !important;
|
||||||
|
|
||||||
|
.el-col {
|
||||||
|
.data-item {
|
||||||
|
.td-title {
|
||||||
|
height: 70px !important;
|
||||||
|
font-size: 24px !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.td-number {
|
||||||
|
height: 110px !important;
|
||||||
|
top: -15px !important;
|
||||||
|
|
||||||
|
.people-number-con {
|
||||||
|
div {
|
||||||
|
width: 45px !important;
|
||||||
|
height: 80px !important;
|
||||||
|
font-size: 64px;
|
||||||
|
margin-right: 4px !important;
|
||||||
|
line-height: 80px !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.prj-img-list {
|
||||||
|
height: calc(100% - 200px) !important;
|
||||||
|
|
||||||
|
.el-carousel {
|
||||||
|
height: 100%;
|
||||||
|
|
||||||
|
.el-carousel__arrow {
|
||||||
|
width: 120px !important;
|
||||||
|
height: 120px !important;
|
||||||
|
|
||||||
|
i {
|
||||||
|
font-size: 40px !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.energy-tendency {
|
||||||
|
.el-col {
|
||||||
|
&.et-chart1 {
|
||||||
|
position: relative;
|
||||||
|
.time-img {
|
||||||
|
position: absolute;
|
||||||
|
width: 400px;
|
||||||
|
height: 400px;
|
||||||
|
top: 50%;
|
||||||
|
left: 50%;
|
||||||
|
margin-top: -261px;
|
||||||
|
margin-left: -199px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
Loading…
Reference in New Issue