update code
parent
13c655fa1c
commit
1723b7d0ac
|
|
@ -0,0 +1,65 @@
|
|||
<template>
|
||||
|
||||
<div :id="id" :class="className" :style="{ height, width }"></div>
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
id: {
|
||||
type: String,
|
||||
default: "barChart1",
|
||||
},
|
||||
className: {
|
||||
type: String,
|
||||
default: "",
|
||||
},
|
||||
width: {
|
||||
type: String,
|
||||
default: "400px",
|
||||
},
|
||||
height: {
|
||||
type: String,
|
||||
default: "400px",
|
||||
},
|
||||
render: {
|
||||
type: Function,
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
chart: null,
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
this.chart = window.echarts.init(document.getElementById(this.id));
|
||||
setTimeout(() => {
|
||||
this.setOption({});
|
||||
}, 400);
|
||||
// 大小自适应
|
||||
window.addEventListener("resize", () => {
|
||||
this.chart.resize();
|
||||
});
|
||||
},
|
||||
methods: {
|
||||
reLoad(){
|
||||
let opt={};
|
||||
if (this.render) {
|
||||
opt = this.render(opt);
|
||||
}
|
||||
this.chart.setOption(opt,true);
|
||||
},
|
||||
setOption(opt) {
|
||||
if (this.render) {
|
||||
opt = this.render(opt);
|
||||
}
|
||||
this.chart.setOption(opt);
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
|
||||
</style>
|
||||
|
|
@ -8,13 +8,17 @@
|
|||
<div :class="nav == 3 ? 'head-nav active' : 'head-nav'" @click="doNav(3)">安全管理</div>
|
||||
<div :class="nav == 4 ? 'head-nav active' : 'head-nav'" @click="doNav(4)">质量管理</div>
|
||||
<div :class="nav == 5 ? 'head-nav active' : 'head-nav'" @click="doNav(5)">进度管理</div>
|
||||
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="8" class="header-center">
|
||||
数字建安施工管理平台
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<div class="header-title-user-info">
|
||||
<div class="head-title-tab" style="display: inline-block">
|
||||
<div :class="nav == 6 ? 'head-nav active' : 'head-nav'" @click="doNav(6)">绿碳中心</div>
|
||||
</div>
|
||||
<div class="header-title-user-info" style="display:inline-block;float:right;">
|
||||
<el-select v-model="selProject" popper-class="header-sel-project-pop"
|
||||
style="width: 150px;margin-right: 20px;height:30px;line-height: 30px;"
|
||||
@change="doProjectSelect">
|
||||
|
|
@ -78,7 +82,7 @@ export default {
|
|||
return;
|
||||
}
|
||||
this.nav = n;
|
||||
let path = ["/index", "/detail", "/prjSafety", "/prjQuality", "/prjProgress"][n - 1];
|
||||
let path = ["/index", "/detail", "/prjSafety", "/prjQuality", "/prjProgress","/greenCarbon"][n - 1];
|
||||
this.$router.push(path);
|
||||
},
|
||||
doLogout() {
|
||||
|
|
|
|||
|
|
@ -39,6 +39,13 @@ const routes = [
|
|||
component: () =>
|
||||
import(/* webpackChunkName: "progress" */ "../views/projectProgress.vue"),
|
||||
},
|
||||
{
|
||||
path: "/greenCarbon",
|
||||
name: "greenCarbon",
|
||||
meta: { nav: 23 },
|
||||
component: () =>
|
||||
import(/* webpackChunkName: "progress" */ "../views/greenCarbon.vue"),
|
||||
},
|
||||
];
|
||||
const router = new VueRouter({
|
||||
mode: "hash",
|
||||
|
|
|
|||
|
|
@ -0,0 +1,427 @@
|
|||
<template>
|
||||
<div class="green-carbon main-page">
|
||||
<el-col :span="6" class="h100">
|
||||
<module-one-1-1 label="建材统计">
|
||||
<my-chart :key="chartKey" id="green-carbon-building" width="100%" height="100%"
|
||||
:render="renderChart1"></my-chart>
|
||||
</module-one-1-1>
|
||||
<module-one-1-1 label="用油统计" class="left-oil">
|
||||
<div style="height: 50%;">
|
||||
<div class="survey_content">
|
||||
<div class="survey_content_img">
|
||||
<div class="oil-data">
|
||||
<div class="led-number an1">2222L</div>
|
||||
<div class="oil-title">施工用油</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="height: 50%;">
|
||||
<el-col :span="12" style="height: 100%;">
|
||||
<my-chart :key="chartKey" id="green-carbon-oil1" width="100%" height="100%"
|
||||
:render="renderChart2"></my-chart>
|
||||
</el-col>
|
||||
<el-col :span="12" style="height: 100%;">
|
||||
<my-chart :key="chartKey" id="green-carbon-oil2" width="100%" height="100%"
|
||||
:render="renderChart3"></my-chart>
|
||||
</el-col>
|
||||
</div>
|
||||
</module-one-1-1>
|
||||
<module-one-1-1 label="用电统计">
|
||||
</module-one-1-1>
|
||||
</el-col>
|
||||
|
||||
<el-col :span="12" class="h100">
|
||||
<module-one-2-2 label="" class="no-title no-border">
|
||||
</module-one-2-2>
|
||||
<module-one-1-2 label="节能减排趋势" class="energy-tendency">
|
||||
</module-one-1-2>
|
||||
</el-col>
|
||||
<el-col :span="6" class="h100">
|
||||
<module-one-1-1 label="建材排放趋势">
|
||||
</module-one-1-1>
|
||||
<module-one-1-1 label="用油排放趋势">
|
||||
</module-one-1-1>
|
||||
<module-one-1-1 label="用电排放趋势">
|
||||
</module-one-1-1>
|
||||
</el-col>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
dpi: '',
|
||||
chartKey: 0,
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.dpi = this.$dpi();
|
||||
window.addEventListener("resize", () => {
|
||||
if (this.dpi != this.$dpi()) {
|
||||
this.dpi = this.$dpi();
|
||||
this.chartKey++;
|
||||
}
|
||||
});
|
||||
},
|
||||
methods: {
|
||||
renderChart1() {
|
||||
let is1K = this.$dpi() == "1K";
|
||||
let is2K = this.$dpi() == "2K";
|
||||
let option = {
|
||||
color: ['#ff9f1a', '#00a4e6'],
|
||||
legend: {
|
||||
bottom: is1K ? '0%' : is2K ? '10%' : '10%',
|
||||
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,
|
||||
}
|
||||
},
|
||||
series: [
|
||||
{
|
||||
type: 'pie',
|
||||
radius: "70%",
|
||||
avoidLabelOverlap: false,
|
||||
bottom: is1K ? '5%' : is2K ? '15%' : '10%',
|
||||
top: "-10%",
|
||||
itemStyle: {
|
||||
borderRadius: is1K ? 4 : is2K ? 8 : 10,
|
||||
borderColor: '#fff',
|
||||
borderWidth: 2
|
||||
},
|
||||
label: {
|
||||
formatter: ["{b|{b}}", "{c|{c}T CO2}"].join("\n"),//"{b|b}\n{c|c T CO2}",
|
||||
rich: {
|
||||
b: {
|
||||
color: '#fff',
|
||||
height: 50,
|
||||
fontSize: is1K ? 14 : is2K ? 20 : 30,
|
||||
},
|
||||
c: {
|
||||
color: '#fff',
|
||||
fontSize: is1K ? 14 : is2K ? 20 : 30,
|
||||
}
|
||||
},
|
||||
show: true,
|
||||
fontSize: is1K ? 14 : is2K ? 20 : 30,
|
||||
},
|
||||
|
||||
labelLine: {
|
||||
show: true
|
||||
},
|
||||
data: [
|
||||
{ value: 1048, name: '碳排放' },
|
||||
{ value: 735, name: '碳减排' },
|
||||
|
||||
]
|
||||
}
|
||||
]
|
||||
};
|
||||
return option;
|
||||
},
|
||||
renderChart2() {
|
||||
let is1K = this.$dpi() == "1K";
|
||||
let is2K = this.$dpi() == "2K";
|
||||
let option = {
|
||||
series: [
|
||||
{
|
||||
type: 'gauge',
|
||||
startAngle: 180,
|
||||
endAngle: 0,
|
||||
max: 6000,
|
||||
center: ['50%', '90%'],
|
||||
radius: '120%',
|
||||
itemStyle: {
|
||||
color: '#e76e50',
|
||||
shadowColor: 'rgba(0,138,255,0.45)',
|
||||
shadowBlur: 10,
|
||||
shadowOffsetX: 2,
|
||||
shadowOffsetY: 2
|
||||
},
|
||||
progress: {
|
||||
show: true,
|
||||
width: is1K ? 12 : is2K ? 20 : 30,
|
||||
|
||||
},
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
width: is1K ? 12 : is2K ? 20 : 30,
|
||||
color: [[1, '#4f504e']] // 圆环底
|
||||
}
|
||||
},
|
||||
axisTick: {
|
||||
show: true,
|
||||
distance: is1K ? -16 : is2K ? -30 : -40,
|
||||
length: is1K ? 4 : is2K ? 8 : 10,
|
||||
},
|
||||
splitLine: {
|
||||
length: 10,
|
||||
distance: -20,
|
||||
lineStyle: {
|
||||
width: 1,
|
||||
color: '#8e9aaf'
|
||||
}
|
||||
},
|
||||
axisLabel: {
|
||||
color: '#999',
|
||||
distance: is1K ? -15 : is2K ? -20 : -30,
|
||||
fontSize: is1K ? 12 : is2K ? 14 : 20,
|
||||
},
|
||||
pointer: {
|
||||
show: false,
|
||||
},
|
||||
anchor: {
|
||||
show: false,
|
||||
},
|
||||
title: {
|
||||
offsetCenter: is1K ? [0, '-5%'] : is2K ? [0, '-5%'] : [0, '-5%'],
|
||||
fontSize: is1K ? 12 : is2K ? 20 : 30,
|
||||
color: '#fff'
|
||||
},
|
||||
detail: {
|
||||
valueAnimation: true,
|
||||
fontSize: is1K ? 20 : is2K ? 30 : 40,
|
||||
offsetCenter: [0, '-40%'],
|
||||
color: '#4ccdc4'
|
||||
},
|
||||
data: [
|
||||
{
|
||||
value: 4000,
|
||||
name: '碳排放(T CO₂)'
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
};
|
||||
return option;
|
||||
},
|
||||
renderChart3() {
|
||||
let is1K = this.$dpi() == "1K";
|
||||
let is2K = this.$dpi() == "2K";
|
||||
let option = {
|
||||
series: [
|
||||
{
|
||||
type: 'gauge',
|
||||
startAngle: 180,
|
||||
endAngle: 0,
|
||||
max: 6000,
|
||||
center: ['50%', '90%'],
|
||||
radius: '120%',
|
||||
itemStyle: {
|
||||
color: '#05d69e',
|
||||
shadowColor: 'rgba(0,138,255,0.45)',
|
||||
shadowBlur: 10,
|
||||
shadowOffsetX: 2,
|
||||
shadowOffsetY: 2
|
||||
},
|
||||
progress: {
|
||||
show: true,
|
||||
width: is1K ? 12 : is2K ? 20 : 30,
|
||||
|
||||
},
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
width: is1K ? 12 : is2K ? 20 : 30,
|
||||
color: [[1, '#4f504e']] // 圆环底
|
||||
}
|
||||
},
|
||||
axisTick: {
|
||||
show: true,
|
||||
distance: is1K ? -16 : is2K ? -30 : -40,
|
||||
length: is1K ? 4 : is2K ? 8 : 10,
|
||||
},
|
||||
splitLine: {
|
||||
length: 10,
|
||||
distance: -20,
|
||||
lineStyle: {
|
||||
width: 1,
|
||||
color: '#8e9aaf'
|
||||
}
|
||||
},
|
||||
axisLabel: {
|
||||
color: '#999',
|
||||
distance: is1K ? -15 : is2K ? -20 : -30,
|
||||
fontSize: is1K ? 12 : is2K ? 14 : 20,
|
||||
},
|
||||
pointer: {
|
||||
show: false,
|
||||
},
|
||||
anchor: {
|
||||
show: false,
|
||||
},
|
||||
title: {
|
||||
offsetCenter: is1K ? [0, '-5%'] : is2K ? [0, '-5%'] : [0, '-5%'],
|
||||
fontSize: is1K ? 12 : is2K ? 20 : 30,
|
||||
color: '#fff'
|
||||
},
|
||||
detail: {
|
||||
valueAnimation: true,
|
||||
fontSize: is1K ? 20 : is2K ? 30 : 40,
|
||||
offsetCenter: [0, '-40%'],
|
||||
color: '#4ccdc4'
|
||||
},
|
||||
data: [
|
||||
{
|
||||
value: 4000,
|
||||
name: '碳减排(T CO₂)'
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
};
|
||||
return option;
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less">
|
||||
.green-carbon {
|
||||
.left-oil {
|
||||
@keyframes bounce {
|
||||
|
||||
0%,
|
||||
100% {
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
50% {
|
||||
transform: translateY(-10px);
|
||||
}
|
||||
}
|
||||
|
||||
.an1 {
|
||||
animation: bounce 1s infinite;
|
||||
}
|
||||
|
||||
.survey_content {
|
||||
height: 100%;
|
||||
|
||||
.survey_content_img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
line-height: 100%;
|
||||
|
||||
|
||||
.oil-data {
|
||||
height: 100%;
|
||||
position: relative;
|
||||
|
||||
.an1 {
|
||||
position: relative;
|
||||
|
||||
}
|
||||
|
||||
.oil-title {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@media (max-width: 1920px) {
|
||||
.left-oil {
|
||||
@keyframes bounce {
|
||||
|
||||
0%,
|
||||
100% {
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
50% {
|
||||
transform: translateY(-30px) ;
|
||||
}
|
||||
}
|
||||
.survey_content {
|
||||
|
||||
.survey_content_img {
|
||||
background-size: 120px 120px;
|
||||
.oil-data {
|
||||
.an1 {
|
||||
top: 20px;
|
||||
font-size: 30px;
|
||||
}
|
||||
|
||||
.oil-title {
|
||||
bottom: 50px;
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@media (min-width: 1921px) and (max-width: 2560px) {
|
||||
.left-oil {
|
||||
@keyframes bounce {
|
||||
|
||||
0%,
|
||||
100% {
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
50% {
|
||||
transform: translateY(-30px) ;
|
||||
}
|
||||
}
|
||||
.survey_content {
|
||||
|
||||
.survey_content_img {
|
||||
background-size: 160px 160px !important;
|
||||
.oil-data {
|
||||
.an1 {
|
||||
top: 50px !important;
|
||||
font-size: 40px !important;
|
||||
}
|
||||
|
||||
.oil-title {
|
||||
bottom:60px !important;
|
||||
font-size: 20px !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@media (min-width: 2561px) {
|
||||
.left-oil {
|
||||
@keyframes bounce {
|
||||
|
||||
0%,
|
||||
100% {
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
50% {
|
||||
transform: translateY(-30px) ;
|
||||
}
|
||||
}
|
||||
.survey_content {
|
||||
|
||||
.survey_content_img {
|
||||
background-size: 200px 200px !important;
|
||||
.oil-data {
|
||||
.an1 {
|
||||
top: 90px !important;
|
||||
font-size: 60px !important;
|
||||
}
|
||||
|
||||
.oil-title {
|
||||
bottom:80px !important;
|
||||
font-size: 30px !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -15,6 +15,7 @@ import moduleOne23 from '../components/module/module-one-2-3.vue'
|
|||
import peopleNumber from '@/components/people-number.vue'
|
||||
import dictTag from '@/components/DictTag/index.vue'
|
||||
import MyDialog from '@/components/MyDialog.vue'
|
||||
import MyChart from '@/components/MyChart.vue'
|
||||
//import projectOverviewChart from '../components/project-overview-chart.vue'
|
||||
//import peopleNumber from '../components/people-number.vue'
|
||||
import header from '../components/header.vue'
|
||||
|
|
@ -30,6 +31,7 @@ Vue.component("module-one-2-1",moduleOne21)
|
|||
Vue.component("module-one-2-2",moduleOne22)
|
||||
Vue.component("module-one-2-3",moduleOne23)
|
||||
Vue.component("people-number",peopleNumber)
|
||||
Vue.component("my-chart",MyChart)
|
||||
Vue.component("dict-tag",dictTag)
|
||||
Vue.component("MyDialog",MyDialog)
|
||||
Vue.prototype.$bus=new Vue();
|
||||
|
|
|
|||
|
|
@ -363,7 +363,7 @@
|
|||
<div class="dangerous-timeline-max w-scroll">
|
||||
<div class="dangerous-timeline-min" :style="{ width: maxWidth + 'px' }">
|
||||
<template v-if="projectBuildNode && projectBuildNode.length > 0">
|
||||
<div class="dangerous-timeline-con" v-for="item in projectBuildNode">
|
||||
<div class="dangerous-timeline-con" v-for="(item,idx) in projectBuildNode" :key="idx">
|
||||
<div class="dangerous-text" v-html="item.nodeText"></div>
|
||||
<div class="dangerous-dot">
|
||||
<div class="dangerous-dot-item"></div>
|
||||
|
|
|
|||
Loading…
Reference in New Issue