mengff
3 weeks ago
27 changed files with 3932 additions and 11 deletions
|
After Width: | Height: | Size: 14 KiB |
|
After Width: | Height: | Size: 442 B |
|
After Width: | Height: | Size: 617 B |
|
After Width: | Height: | Size: 6.6 KiB |
|
After Width: | Height: | Size: 6.7 KiB |
|
After Width: | Height: | Size: 1.9 KiB |
|
After Width: | Height: | Size: 313 B |
|
After Width: | Height: | Size: 532 B |
|
After Width: | Height: | Size: 17 KiB |
|
After Width: | Height: | Size: 437 B |
|
After Width: | Height: | Size: 30 KiB |
|
After Width: | Height: | Size: 2.8 KiB |
|
After Width: | Height: | Size: 17 KiB |
|
After Width: | Height: | Size: 3.7 KiB |
@ -0,0 +1,76 @@ |
|||||
|
<template> |
||||
|
<el-radio-button v-bind="getBind" v-on="$listeners" :style="{ '--active-color': activeColor }" class="custom1"> |
||||
|
<slot /> |
||||
|
</el-radio-button> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
export default { |
||||
|
name: 'RadioCustom1', |
||||
|
props: { |
||||
|
activeColor: { |
||||
|
type: String, |
||||
|
default: "linear-gradient(180deg, #FF6969 0%, #FFB904 100%)" |
||||
|
} |
||||
|
}, |
||||
|
computed: { |
||||
|
getBind() { |
||||
|
return { |
||||
|
border: true, |
||||
|
...this.$attrs |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style lang='scss' scoped> |
||||
|
label.custom1.el-radio-button { |
||||
|
margin: 0; |
||||
|
height: 27px; |
||||
|
|
||||
|
&:first-child { |
||||
|
::v-deep { |
||||
|
span.el-radio-button__inner { |
||||
|
border-radius: 0; |
||||
|
border-left: 1px solid #00B3CC; |
||||
|
border-top-left-radius: 5px; |
||||
|
border-bottom-left-radius: 5px; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
&.is-active { |
||||
|
::v-deep { |
||||
|
span.el-radio-button__inner { |
||||
|
background: var(--active-color); |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
&:last-child { |
||||
|
::v-deep { |
||||
|
span.el-radio-button__inner { |
||||
|
border-radius: 0; |
||||
|
border-right: 1px solid #00B3CC; |
||||
|
border-top-right-radius: 5px; |
||||
|
border-bottom-right-radius: 5px; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
::v-deep { |
||||
|
span.el-radio-button__inner { |
||||
|
border: 0; |
||||
|
border-radius: 0; |
||||
|
|
||||
|
border-top: 1px solid #00B3CC; |
||||
|
border-bottom: 1px solid #00B3CC; |
||||
|
font-size: 14px; |
||||
|
font-family: PingFang SC, PingFang SC; |
||||
|
font-weight: 400; |
||||
|
color: #FFFFFF; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,589 @@ |
|||||
|
<template> |
||||
|
<div class="screen-content"> |
||||
|
<div class="content-left"> |
||||
|
<content-item name="资产概览" class="custom-height"> |
||||
|
<el-row class="zcgl-box"> |
||||
|
<el-col v-for="(item,index) in zcglData" class="zcgl-item"> |
||||
|
<span> |
||||
|
<span class="zcgl-num" :style="{'color':item.color}">{{item.num}}</span> |
||||
|
<span class="zcgl-unit">{{item.unit}}</span> |
||||
|
</span> |
||||
|
<div class="zcgl-name">{{item.name}}</div> |
||||
|
</el-col> |
||||
|
</el-row> |
||||
|
</content-item> |
||||
|
<content-item name="能量分布"> |
||||
|
<div class="zdtp-top"> |
||||
|
<div class="zdtp-tj"> |
||||
|
<span class="name">已检测到排放源类别</span> |
||||
|
<span class="num">76</span> |
||||
|
</div> |
||||
|
<span class="unit">单位tCO₂</span> |
||||
|
</div> |
||||
|
<ring-chart></ring-chart> |
||||
|
</content-item> |
||||
|
<content-item name="清洁能源发电" > |
||||
|
<div class="scope-box"> |
||||
|
<span class="unit">单位：tCO₂</span> |
||||
|
<div class="scope"> |
||||
|
<div class="scope-label"> |
||||
|
<span class="name" >直接碳排放</span> |
||||
|
<span class="pf-num">{{ scope.zjpf }}</span> |
||||
|
</div> |
||||
|
<div class="pf" :style="{width:scope.zjpf/(scope.zjpf+scope.zjjp)*100 +'%'}"></div> |
||||
|
<div class="jp" :style="{width:scope.zjjp/(scope.zjpf+scope.zjjp)*100 +'%'}"></div> |
||||
|
<div class="scope-label"> |
||||
|
<span class="name">直接碳减排</span> |
||||
|
<span class="jp-num">{{ scope.zjjp }}</span> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div class="tzh"> |
||||
|
<span class="zh-text">碳中和</span> |
||||
|
<div class="zh-line"></div> |
||||
|
</div> |
||||
|
<div class="scope"> |
||||
|
<div class="scope-label"> |
||||
|
<span class="name" >间接碳排放</span> |
||||
|
<span class="pf-num">{{ scope.jjpf }}</span> |
||||
|
</div> |
||||
|
<div class="pf" :style="{width:scope.jjpf/(scope.jjpf+scope.jjjp)*100 +'%'}"></div> |
||||
|
<div class="jp" :style="{width:scope.jjjp/(scope.jjpf+scope.jjjp)*100 +'%'}"></div> |
||||
|
<div class="scope-label"> |
||||
|
<span class="name">间接碳减排</span> |
||||
|
<span class="jp-num">{{scope.jjjp}}</span> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</content-item> |
||||
|
<content-item name="能耗排名"> |
||||
|
<div class="btn-box"> |
||||
|
<btn name="日报" @click.native="btnClick('day')" :active="active==='day'"></btn> |
||||
|
<btn name="月报" @click.native="btnClick('month')" :active="active==='month'"></btn> |
||||
|
<btn name="年报" @click.native="btnClick('year')" :active="active==='year'"></btn> |
||||
|
</div> |
||||
|
<sort-bar-chart></sort-bar-chart> |
||||
|
</content-item> |
||||
|
</div> |
||||
|
<div class="content-right"> |
||||
|
<content-item name="社会贡献"> |
||||
|
<div class="shgx-box"> |
||||
|
<el-row class="row"> |
||||
|
<el-col class="col" :span="12"> |
||||
|
<img src="../../../../assets/images/carbon/icon_gf.png" alt=""/> |
||||
|
<div class="tj"> |
||||
|
<span class="num">3452</span> |
||||
|
<span class="unit ml5">万吨</span> |
||||
|
<div class="name">累计节约标准煤</div> |
||||
|
</div> |
||||
|
</el-col> |
||||
|
<el-col class="col" :span="12"> |
||||
|
<img src="../../../../assets/images/carbon/icon_gf.png" alt=""/> |
||||
|
<div class="tj"> |
||||
|
<span class="num">3452</span> |
||||
|
<span class="unit ml5">万吨</span> |
||||
|
<div class="name">累计减排CO2</div> |
||||
|
</div> |
||||
|
</el-col> |
||||
|
</el-row> |
||||
|
<el-row class="row"> |
||||
|
<el-col class="col" :span="12"> |
||||
|
<img src="../../../../assets/images/carbon/icon_gf.png" alt=""/> |
||||
|
<div class="tj"> |
||||
|
<span class="num">3452</span> |
||||
|
<span class="unit ml5">万吨</span> |
||||
|
<div class="name">累计减排SO2</div> |
||||
|
</div> |
||||
|
</el-col> |
||||
|
<el-col class="col" :span="12"> |
||||
|
<img src="../../../../assets/images/carbon/icon_gf.png" alt=""/> |
||||
|
<div class="tj"> |
||||
|
<span class="num">3452</span> |
||||
|
<span class="unit ml5">万吨</span> |
||||
|
<div class="name">累计减排NO2</div> |
||||
|
</div> |
||||
|
</el-col> |
||||
|
</el-row> |
||||
|
<el-row class="row"> |
||||
|
<el-col class="col" :span="12"> |
||||
|
<img src="../../../../assets/images/carbon/icon_gf.png" alt=""/> |
||||
|
<div class="tj"> |
||||
|
<span class="num">3452</span> |
||||
|
<span class="unit ml5">万吨</span> |
||||
|
<div class="name">累计减排烟尘</div> |
||||
|
</div> |
||||
|
</el-col> |
||||
|
<el-col class="col" :span="12"> |
||||
|
<img src="../../../../assets/images/carbon/icon_gf.png" alt=""/> |
||||
|
<div class="tj"> |
||||
|
<span class="num">3452</span> |
||||
|
<span class="unit ml5">万棵</span> |
||||
|
<div class="name">等效植树量</div> |
||||
|
</div> |
||||
|
</el-col> |
||||
|
</el-row> |
||||
|
</div> |
||||
|
</content-item> |
||||
|
<content-item name="全域碳排放"> |
||||
|
<div class="btn-box"> |
||||
|
<btn name="日报" @click.native="btnClick('day')" :active="active==='day'"></btn> |
||||
|
<btn name="月报" @click.native="btnClick('month')" :active="active==='month'"></btn> |
||||
|
<btn name="年报" @click.native="btnClick('year')" :active="active==='year'"></btn> |
||||
|
</div> |
||||
|
<split-bar-chart :chart-data="tpfChartData"></split-bar-chart> |
||||
|
</content-item> |
||||
|
<content-item name="碳中和分析"> |
||||
|
<div class="btn-box"> |
||||
|
<btn name="日报" @click.native="btnClick('day')" :active="active==='day'"></btn> |
||||
|
<btn name="月报" @click.native="btnClick('month')" :active="active==='month'"></btn> |
||||
|
<btn name="年报" @click.native="btnClick('year')" :active="active==='year'"></btn> |
||||
|
</div> |
||||
|
<line-charts></line-charts> |
||||
|
</content-item> |
||||
|
<content-item name="碳排放强度排名"> |
||||
|
<div class="btn-box"> |
||||
|
<btn name="日报" @click.native="btnClick('day')" :active="active==='day'"></btn> |
||||
|
<btn name="月报" @click.native="btnClick('month')" :active="active==='month'"></btn> |
||||
|
<btn name="年报" @click.native="btnClick('year')" :active="active==='year'"></btn> |
||||
|
</div> |
||||
|
<sort-bar-chart></sort-bar-chart> |
||||
|
</content-item> |
||||
|
</div> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import ContentItem from './components/carbon/contentItem/index' |
||||
|
import lineCharts from "./components/carbon/echarts/lineCharts"; |
||||
|
import SplitBarChart from "./components/carbon/echarts/SplitBarChart"; |
||||
|
import btn from './components/carbon/btn/index' |
||||
|
import scroll from "vue-seamless-scroll"; |
||||
|
import SortBarChart from "./components/carbon/echarts/SortBarChart"; |
||||
|
import RingChart from "./components/carbon/echarts/RingChart"; |
||||
|
export default { |
||||
|
name: "carbon", |
||||
|
components: { |
||||
|
ContentItem, |
||||
|
RingChart, lineCharts, btn, SplitBarChart, scroll, SortBarChart |
||||
|
}, |
||||
|
data() { |
||||
|
return { |
||||
|
active:'day', |
||||
|
tpfChartData:{ |
||||
|
xData:['1日','2日','3日','4日','5日','6日','7日','8日','9日','10日','11日'], |
||||
|
yData:{ |
||||
|
name:'', |
||||
|
unit:'单位: tCO₂', |
||||
|
data:[54,55,465,465,584,321,365,51,321,32,31] |
||||
|
} |
||||
|
}, |
||||
|
tableData:[ |
||||
|
{ |
||||
|
siteName:'大学城收费站', |
||||
|
happenTime:'2024-10-01 10:00:00', |
||||
|
warningContent:'碳排放异常', |
||||
|
dealStatus:0 |
||||
|
}, |
||||
|
{ |
||||
|
siteName:'大学城收费站', |
||||
|
happenTime:'2024-10-01 10:00:00', |
||||
|
warningContent:'碳排放异常', |
||||
|
dealStatus:0 |
||||
|
}, |
||||
|
{ |
||||
|
siteName:'大学城收费站', |
||||
|
happenTime:'2024-10-01 10:00:00', |
||||
|
warningContent:'碳排放异常', |
||||
|
dealStatus:1 |
||||
|
}, |
||||
|
{ |
||||
|
siteName:'长清城收费站', |
||||
|
happenTime:'2024-10-01 10:00:00', |
||||
|
warningContent:'碳排放异常', |
||||
|
dealStatus:0 |
||||
|
}, |
||||
|
{ |
||||
|
siteName:'长清收费站', |
||||
|
happenTime:'2024-10-01 10:00:00', |
||||
|
warningContent:'碳排放异常', |
||||
|
dealStatus:0 |
||||
|
}, |
||||
|
{ |
||||
|
siteName:'长清收费站', |
||||
|
happenTime:'2024-10-01 10:00:00', |
||||
|
warningContent:'碳排放异常', |
||||
|
dealStatus:0 |
||||
|
}, |
||||
|
{ |
||||
|
siteName:'长清收费站', |
||||
|
happenTime:'2024-10-01 10:00:00', |
||||
|
warningContent:'碳排放异常', |
||||
|
dealStatus:0 |
||||
|
}, |
||||
|
{ |
||||
|
siteName:'孝里收费站', |
||||
|
happenTime:'2024-10-01 10:00:00', |
||||
|
warningContent:'碳排放异常', |
||||
|
dealStatus:0 |
||||
|
}, |
||||
|
], |
||||
|
zcglData:[ |
||||
|
{ |
||||
|
num:'3452', |
||||
|
unit:'MW', |
||||
|
name:'光伏装机容量', |
||||
|
color:'#00D1FF' |
||||
|
}, |
||||
|
{ |
||||
|
num:'3452', |
||||
|
unit:'MW', |
||||
|
name:'风电装机容量', |
||||
|
color:'#00D1FF' |
||||
|
}, |
||||
|
{ |
||||
|
num:'3452', |
||||
|
unit:'MWh', |
||||
|
name:'储能总容量', |
||||
|
color:'#00EBC1' |
||||
|
}, |
||||
|
{ |
||||
|
num:'3452', |
||||
|
unit:'台', |
||||
|
name:'充电桩数量', |
||||
|
color:'#FFDB82' |
||||
|
}, |
||||
|
], |
||||
|
scope:{ |
||||
|
zjpf:546, |
||||
|
zjjp:3698, |
||||
|
jjpf:2547, |
||||
|
jjjp:2354 |
||||
|
} |
||||
|
} |
||||
|
}, |
||||
|
computed: { |
||||
|
defaultOption() { |
||||
|
return { |
||||
|
step: 0.1, // 数值越大速度滚动越快 |
||||
|
limitMoveNum: 5, // 开始无缝滚动的数据量 this.dataList.length |
||||
|
hoverStop: true, // 是否开启鼠标悬停stop |
||||
|
direction: 1, // 0向下 1向上 2向左 3向右 |
||||
|
openWatch: true, // 开启数据实时监控刷新dom |
||||
|
singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1 |
||||
|
singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3 |
||||
|
waitTime: 3000, // 单步运动停止的时间(默认值1000ms) |
||||
|
}; |
||||
|
}, |
||||
|
}, |
||||
|
methods:{ |
||||
|
btnClick(val) { |
||||
|
if (val) { |
||||
|
this.active = val |
||||
|
this.getEnergyAnalysisBySiteCode() |
||||
|
} |
||||
|
}, |
||||
|
} |
||||
|
|
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style lang="scss" scoped> |
||||
|
.screen-content{ |
||||
|
/*height: calc(100vh - 68px); |
||||
|
width: 100%; |
||||
|
padding-top: 15px; |
||||
|
position: relative;*/ |
||||
|
height: 100%; |
||||
|
width: 100%; |
||||
|
display: flex; |
||||
|
//flex-direction: column; |
||||
|
justify-content: space-between; |
||||
|
} |
||||
|
.content-left,.content-right{ |
||||
|
// position: absolute; |
||||
|
//top: 0; |
||||
|
z-index: 1; |
||||
|
width: 500px; |
||||
|
height: calc(100% - 4px); |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
justify-content: space-around; |
||||
|
} |
||||
|
.content-left{ |
||||
|
left: 0; |
||||
|
padding: 5px 0 0 20px; |
||||
|
background: linear-gradient(to right, rgba(20, 26, 41, 0.7), rgba(20, 26, 41, 0.5), rgba(20, 26, 41, 0)); |
||||
|
align-items: start; |
||||
|
} |
||||
|
.content-right{ |
||||
|
right: 0; |
||||
|
padding: 5px 20px 0 0; |
||||
|
background: linear-gradient(to left, rgba(20, 26, 41, 0.7), rgba(20, 26, 41, 0.5), rgba(20, 26, 41, 0)); |
||||
|
float: right; |
||||
|
align-items: end; |
||||
|
} |
||||
|
.btn-box{ |
||||
|
position: absolute; |
||||
|
display: flex; |
||||
|
z-index: 2; |
||||
|
} |
||||
|
|
||||
|
.my-table{ |
||||
|
margin-top: 9px; |
||||
|
height: 91%; |
||||
|
overflow: hidden; |
||||
|
width: 100%; |
||||
|
.table-header{ |
||||
|
width: 100%; |
||||
|
height: 22px; |
||||
|
display: flex; |
||||
|
margin-bottom: 4px; |
||||
|
background:#006E91; |
||||
|
justify-content: space-between; |
||||
|
line-height: 22px; |
||||
|
color: #e3e3e3; |
||||
|
font-size: 12px; |
||||
|
} |
||||
|
.table-row{ |
||||
|
display: flex; |
||||
|
justify-content: space-between; |
||||
|
color: #e3e3e3; |
||||
|
height: 24px; |
||||
|
line-height: 24px; |
||||
|
margin-bottom: 4px; |
||||
|
cursor: pointer; |
||||
|
font-size: 12px; |
||||
|
} |
||||
|
.table-row-db{ |
||||
|
background-image: url("../../../../assets/images/carbon/tb_row_bg.png"); |
||||
|
background-size: 100% 100%; |
||||
|
} |
||||
|
.table-row:hover{ |
||||
|
background: linear-gradient(to right,#45B9D2, rgba(1, 71, 129, 0)); |
||||
|
color: #FFD234; |
||||
|
} |
||||
|
.table-column{ |
||||
|
text-align: start; |
||||
|
overflow: hidden; |
||||
|
white-space: nowrap; |
||||
|
text-overflow: ellipsis; |
||||
|
padding: 0 5px; |
||||
|
align-items: center; |
||||
|
} |
||||
|
.w1{ |
||||
|
width: 70px; |
||||
|
} |
||||
|
.w2{ |
||||
|
width: 85px; |
||||
|
} |
||||
|
.w3{ |
||||
|
width: 130px; |
||||
|
} |
||||
|
.w4{ |
||||
|
width: 70px; |
||||
|
} |
||||
|
.scrollStyle { |
||||
|
height: 330px; |
||||
|
overflow: auto; |
||||
|
} |
||||
|
::v-deep *::-webkit-scrollbar { |
||||
|
width: 0px; |
||||
|
height: 16px; |
||||
|
background-color: transparent; |
||||
|
} |
||||
|
} |
||||
|
.shgx-box{ |
||||
|
width: 100%; |
||||
|
height: 100%; |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
align-items: center; |
||||
|
justify-content: space-around; |
||||
|
padding: 8px; |
||||
|
.row{ |
||||
|
width: 100%; |
||||
|
height: 30%; |
||||
|
//margin-bottom: 8px; |
||||
|
.col{ |
||||
|
height: 100%; |
||||
|
background-image: url("../../../../assets/images/carbon/data_bg2.png"); |
||||
|
background-size: 100% 100%; |
||||
|
display: flex; |
||||
|
justify-content: center; |
||||
|
align-items: center; |
||||
|
img{ |
||||
|
height: 36px; |
||||
|
margin: 0 15px; |
||||
|
} |
||||
|
span{ |
||||
|
background: linear-gradient(to bottom, #E8F7FF , #01D1FF); |
||||
|
-webkit-background-clip: text; |
||||
|
-webkit-text-fill-color: transparent; |
||||
|
color: transparent; /* 这行代码很重要，它确保了文本本身是透明的，从而显示出背景 */ |
||||
|
text-align: left; |
||||
|
font-weight: 600; |
||||
|
line-height: 15px; |
||||
|
letter-spacing: 1px; |
||||
|
font-style: normal; |
||||
|
text-transform: none; |
||||
|
} |
||||
|
.num{ |
||||
|
font-size: 18px; |
||||
|
} |
||||
|
.unit{ |
||||
|
font-size: 10px; |
||||
|
} |
||||
|
.name{ |
||||
|
font-size: 12px; |
||||
|
color: #FFFFFF; |
||||
|
} |
||||
|
.tj{ |
||||
|
width: calc(100% - 66px); |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
.zcgl-box{ |
||||
|
height:100%; |
||||
|
padding: 15px 20px; |
||||
|
text-align: center; |
||||
|
.zcgl-item { |
||||
|
height: calc(50% - 12px); |
||||
|
width: calc(50% - 12px); |
||||
|
margin: 6px; |
||||
|
background: url('../../../../assets/images/carbon/data_bg1.png') no-repeat; |
||||
|
background-size: 100% 60%; |
||||
|
background-position: center bottom; |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
justify-content: end; |
||||
|
.zcgl-num { |
||||
|
color: #00afff; |
||||
|
font-size: 20px; |
||||
|
font-weight: 600; |
||||
|
margin-right: 5px; |
||||
|
} |
||||
|
|
||||
|
.zcgl-unit { |
||||
|
color: #FFFFFF; |
||||
|
font-size: 12px |
||||
|
} |
||||
|
.zcgl-name{ |
||||
|
color: #FFFFFF; |
||||
|
display: block; |
||||
|
margin: 10px 0 7px 0; |
||||
|
font-size: 14px; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
.zdtp-top{ |
||||
|
height: 30px; |
||||
|
.zdtp-tj{ |
||||
|
display: inline-block; |
||||
|
width: 274px; |
||||
|
height: 21px; |
||||
|
background-image: url("../../../../assets/images/carbon/data_bg1.png"); |
||||
|
background-size: 100% 100%; |
||||
|
text-align: center; |
||||
|
margin: 9px 20px 0 20px; |
||||
|
.name{ |
||||
|
font-size: 12px; |
||||
|
color: #FFFFFF; |
||||
|
margin-right: 10px; |
||||
|
} |
||||
|
.num{ |
||||
|
font-size: 14px; |
||||
|
color: #F4B149; |
||||
|
line-height: 14px; |
||||
|
text-shadow: 0 1px 4px #F29600; |
||||
|
} |
||||
|
} |
||||
|
.unit{ |
||||
|
color: #FFFFFF; |
||||
|
font-size: 12px; |
||||
|
} |
||||
|
} |
||||
|
.scope-box{ |
||||
|
height: 100%; |
||||
|
//padding: 25px; |
||||
|
width: 100%; |
||||
|
position: relative; |
||||
|
.unit{ |
||||
|
color: #fff; |
||||
|
font-size: 12px; |
||||
|
height: 30px; |
||||
|
line-height: 30px; |
||||
|
float: right; |
||||
|
margin-right: 15px |
||||
|
} |
||||
|
.scope{ |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
height: calc(50% - 30px); |
||||
|
width: calc(100% - 30px); |
||||
|
margin: 0 15px 15px 15px; |
||||
|
background-image: url("../../../../assets/images/carbon/data_bg2.png"); |
||||
|
background-size: 100% 100%; |
||||
|
.pf{ |
||||
|
width: 50%; |
||||
|
height: 30%; |
||||
|
background: linear-gradient(to right, rgba(255, 214, 0, 0), rgba(255, 214, 0, 0.84)); |
||||
|
border-radius: 0 50px 50px 0; |
||||
|
border-right: 3px solid #FFD600; |
||||
|
color: #fff; |
||||
|
} |
||||
|
.pf:hover { |
||||
|
border: 1px solid #FFD600; |
||||
|
} |
||||
|
.jp{ |
||||
|
width: 50%; |
||||
|
height: 30%; |
||||
|
background: linear-gradient(to left, rgba(0, 233, 149, 0), rgba(0, 233, 149, 0.76)); |
||||
|
border-radius: 50px 0 0 50px; |
||||
|
border-left: 3px solid #00E995; |
||||
|
color: #fff; |
||||
|
} |
||||
|
.scope-label{ |
||||
|
width: 100px; |
||||
|
text-align: center; |
||||
|
.name{ |
||||
|
font-size: 12px; |
||||
|
color: #fff; |
||||
|
} |
||||
|
.pf-num{ |
||||
|
font-size: 18px; |
||||
|
color: #FFCD1D; |
||||
|
} |
||||
|
.jp-num{ |
||||
|
font-size: 18px; |
||||
|
color: #00E995; |
||||
|
} |
||||
|
span{ |
||||
|
display: block; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
} |
||||
|
.tzh{ |
||||
|
height: 100%; |
||||
|
position: absolute; |
||||
|
left: 45.3%; |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
align-items: center; |
||||
|
top: 0; |
||||
|
.zh-text{ |
||||
|
height: 30px; |
||||
|
color: #fff; |
||||
|
line-height: 30px; |
||||
|
} |
||||
|
.zh-line{ |
||||
|
border-left: 1px dashed orange; |
||||
|
width: 1px; |
||||
|
height: calc(100% - 35px); |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
.custom-height{ |
||||
|
height: 190px !important; |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,67 @@ |
|||||
|
<template> |
||||
|
<div :class="{'btn':true,'big':size==='big','normal':size==='normal','small':size==='small','mini':size==='mini','selected':active}" >{{ name }}</div> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
export default { |
||||
|
name: "index", |
||||
|
props: { |
||||
|
name: { |
||||
|
type: String, |
||||
|
default: '', |
||||
|
required:true |
||||
|
}, |
||||
|
active: { |
||||
|
type: Boolean, |
||||
|
default: false |
||||
|
}, |
||||
|
size:{ |
||||
|
type:String, |
||||
|
default:'normal' |
||||
|
} |
||||
|
}, |
||||
|
watch:{ |
||||
|
size(val){ |
||||
|
console.log(val) |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style lang="scss" scoped> |
||||
|
.btn { |
||||
|
text-align: center; |
||||
|
line-height: 20px; |
||||
|
color: #FFFFFF; |
||||
|
cursor: pointer; |
||||
|
border-radius: 1px; |
||||
|
background-image: url("../../../../../../../assets/images/carbon/btn_normal.png"); |
||||
|
background-size: 100% 100%; |
||||
|
} |
||||
|
.normal{ |
||||
|
font-size: 10px; |
||||
|
width: 56px; |
||||
|
height: 20px; |
||||
|
line-height: 20px; |
||||
|
margin: 9px 5px 9px 0; |
||||
|
} |
||||
|
.small{ |
||||
|
font-size: 10px; |
||||
|
width: 45px; |
||||
|
height: 18px; |
||||
|
line-height: 18px; |
||||
|
margin: 0; |
||||
|
} |
||||
|
.big{ |
||||
|
font-size: 12px; |
||||
|
width: 76px; |
||||
|
height: 24px; |
||||
|
line-height: 24px; |
||||
|
margin: 7px 10px 7px 0; |
||||
|
} |
||||
|
.mini{} |
||||
|
.selected { |
||||
|
background-image: url("../../../../../../../assets/images/carbon/btn_active.png"); |
||||
|
} |
||||
|
|
||||
|
</style> |
||||
@ -0,0 +1,83 @@ |
|||||
|
<template> |
||||
|
<!-- <div class="content-item" @mouseenter="transitionAnimation">--> |
||||
|
<div class="content-item" :style="{height: height}"> |
||||
|
<transition name="el-zoom-in-center"> |
||||
|
<div class="item-title-bg" v-show="show"> |
||||
|
<div class="text" :data-text="name">{{ name }}</div> |
||||
|
</div> |
||||
|
</transition> |
||||
|
<transition name="el-zoom-in-center"> |
||||
|
<div class="item-content" v-show="show"> |
||||
|
<slot></slot> |
||||
|
</div> |
||||
|
</transition> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
export default { |
||||
|
name: "index", |
||||
|
props: ['name', 'transition','height'], |
||||
|
data() { |
||||
|
return { |
||||
|
show: true, |
||||
|
}; |
||||
|
}, |
||||
|
mounted() { |
||||
|
this.transitionAnimation() |
||||
|
}, |
||||
|
methods: { |
||||
|
transitionAnimation() { |
||||
|
this.show = false; |
||||
|
setTimeout(() => { |
||||
|
this.show = true; |
||||
|
}, 500); |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style lang="scss" scoped> |
||||
|
.content-item { |
||||
|
height: calc(25% - 5px); |
||||
|
width: 400px; |
||||
|
margin-bottom: 5px; |
||||
|
background-color: rgba(18, 232, 232, 0); |
||||
|
|
||||
|
.item-title-bg { |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
height: 30px; |
||||
|
width: 100%; |
||||
|
background-image: url("../../../../../../../assets/images/carbon/item_title.png"); |
||||
|
background-size: 100% 100%; |
||||
|
.text { |
||||
|
background: linear-gradient(to bottom, #fff, #4DD4FF); |
||||
|
-webkit-background-clip: text; |
||||
|
-webkit-text-fill-color: transparent; |
||||
|
color: transparent; /* 这行代码很重要，它确保了文本本身是透明的，从而显示出背景 */ |
||||
|
font-size: 18px; /* 你可以根据需要调整字体大小 */ |
||||
|
text-align: left; |
||||
|
|
||||
|
font-weight: 600; |
||||
|
line-height: 23px; |
||||
|
margin-left: 16px; |
||||
|
letter-spacing: 1px; |
||||
|
font-style: normal; |
||||
|
text-transform: none; |
||||
|
//text-shadow: 0 4px 0 rgba(0, 0, 0, 0.25); /* 水平偏移、垂直偏移、模糊半径和阴影颜色 */ |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.item-content { |
||||
|
height: calc(100% - 30px); |
||||
|
background-color: rgba(21, 46, 60, 0.64); |
||||
|
border-width: 2px; |
||||
|
/* 使用 border-image 属性 */ |
||||
|
border-image: linear-gradient(to bottom, rgba(40, 144, 167, 0), rgba(40, 144, 167, 0.7)) 1; |
||||
|
/* 确保边框是连续的，而不是间隔的 */ |
||||
|
border-style: solid; |
||||
|
} |
||||
|
|
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,346 @@ |
|||||
|
<template> |
||||
|
<div :class="className" :style="{height:height,width:width}"/> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import * as echarts from 'echarts' |
||||
|
import resize from './mixins/resize' |
||||
|
|
||||
|
export default { |
||||
|
mixins: [resize], |
||||
|
props: { |
||||
|
className: { |
||||
|
type: String, |
||||
|
default: 'chart' |
||||
|
}, |
||||
|
width: { |
||||
|
type: String, |
||||
|
default: '100%' |
||||
|
}, |
||||
|
height: { |
||||
|
type: String, |
||||
|
default: 'calc(100% - 30px)' |
||||
|
} |
||||
|
}, |
||||
|
data() { |
||||
|
return { |
||||
|
chart: null, |
||||
|
} |
||||
|
}, |
||||
|
mounted() { |
||||
|
this.$nextTick(() => { |
||||
|
this.initChart() |
||||
|
}) |
||||
|
}, |
||||
|
beforeDestroy() { |
||||
|
if (!this.chart) { |
||||
|
return |
||||
|
} |
||||
|
this.chart.dispose() |
||||
|
this.chart = null |
||||
|
}, |
||||
|
methods: { |
||||
|
initChart() { |
||||
|
this.chart = echarts.init(this.$el) |
||||
|
this.setOption() |
||||
|
}, |
||||
|
setOption() { |
||||
|
this.chart.setOption( |
||||
|
{ |
||||
|
grid: { |
||||
|
top: '100%', |
||||
|
left: '3%', |
||||
|
right: '4%', |
||||
|
bottom: '5%', |
||||
|
containLabel: true, |
||||
|
}, |
||||
|
legend: { |
||||
|
orient: 'vertical', |
||||
|
show: true, |
||||
|
right: '8%', |
||||
|
y: 'center', |
||||
|
itemWidth: 5, |
||||
|
itemHeight: 5, |
||||
|
itemGap: 10, |
||||
|
textStyle: { |
||||
|
color: '#e1e1e1', |
||||
|
fontSize: 14, |
||||
|
lineHeight: 20, |
||||
|
rich: { |
||||
|
percent: { |
||||
|
color: '#37E7FF', |
||||
|
fontSize: 14, |
||||
|
}, |
||||
|
}, |
||||
|
}, |
||||
|
formatter: name => { |
||||
|
switch (name) { |
||||
|
case '办公用电': |
||||
|
return ( |
||||
|
'办公用电\r{percent|30%}' |
||||
|
); |
||||
|
case '空调用电': |
||||
|
return ( |
||||
|
'空调用电\r{percent|30%}' |
||||
|
); |
||||
|
case '路域用电': |
||||
|
return ( |
||||
|
'路域用电\r{percent|40%}' |
||||
|
); |
||||
|
case '收费岛用电': |
||||
|
return ( |
||||
|
'收费岛用电\r{percent|40%}' |
||||
|
); |
||||
|
default: |
||||
|
break; |
||||
|
} |
||||
|
}, |
||||
|
}, |
||||
|
graphic: { |
||||
|
type: 'text', |
||||
|
left: '26%', // 文本的水平位置 |
||||
|
top: '45%', // 文本的垂直位置（相对于容器） |
||||
|
style: { |
||||
|
text: '60%', |
||||
|
textAlign: 'center', |
||||
|
fill: '#fff', // 文本颜色 |
||||
|
fontSize: 16 // 字体大小 |
||||
|
}, |
||||
|
z: 100 // 设置层级，确保显示在其他元素之上 |
||||
|
}, |
||||
|
tooltip: { |
||||
|
show: true, |
||||
|
}, |
||||
|
series: [ |
||||
|
{ |
||||
|
type: 'pie', |
||||
|
radius: ['43%', '70%'], |
||||
|
center: ['30%', '50%'], |
||||
|
z:1, |
||||
|
//hoverAnimation: false, |
||||
|
avoidLabelOverlap: false, |
||||
|
padAngle: 5, |
||||
|
itemStyle: { |
||||
|
borderRadius: 3 |
||||
|
}, |
||||
|
/* label: { |
||||
|
position: 'center', |
||||
|
formatter: () => { |
||||
|
return '作业总数\r\n{total|100} 个'; |
||||
|
}, |
||||
|
rich: { |
||||
|
total: { |
||||
|
fontSize: 30, |
||||
|
color: '#fff', |
||||
|
}, |
||||
|
}, |
||||
|
color: '#7a8c9f', |
||||
|
fontSize: 16, |
||||
|
lineHeight: 30, |
||||
|
},*/ |
||||
|
|
||||
|
data: [ |
||||
|
{ |
||||
|
value: 30, |
||||
|
name: '办公用电', |
||||
|
itemStyle: { |
||||
|
color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [ |
||||
|
{ |
||||
|
offset: 0, |
||||
|
color: '#FFF1A2' |
||||
|
}, |
||||
|
{ |
||||
|
offset: 1, |
||||
|
color: '#FFB905' |
||||
|
} |
||||
|
]), |
||||
|
}, |
||||
|
}, |
||||
|
{ |
||||
|
value: 30, |
||||
|
name: '空调用电', |
||||
|
itemStyle: { |
||||
|
color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [ |
||||
|
{ |
||||
|
offset: 0, |
||||
|
color: '#61D8FF' |
||||
|
}, |
||||
|
{ |
||||
|
offset: 1, |
||||
|
color: '#0BA7DA' |
||||
|
} |
||||
|
]), |
||||
|
}, |
||||
|
}, |
||||
|
{ |
||||
|
value: 40, |
||||
|
name: '路域用电', |
||||
|
itemStyle: { |
||||
|
color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [ |
||||
|
{ |
||||
|
offset: 0, |
||||
|
color: '#8EBBFF' |
||||
|
}, |
||||
|
{ |
||||
|
offset: 1, |
||||
|
color: '#5973FF' |
||||
|
} |
||||
|
]), |
||||
|
}, |
||||
|
}, |
||||
|
{ |
||||
|
value: 40, |
||||
|
name: '收费岛用电', |
||||
|
itemStyle: { |
||||
|
color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [ |
||||
|
{ |
||||
|
offset: 0, |
||||
|
color: '#6AF4DA' |
||||
|
}, |
||||
|
{ |
||||
|
offset: 1, |
||||
|
color: '#0FE9A7' |
||||
|
} |
||||
|
]), |
||||
|
}, |
||||
|
} |
||||
|
], |
||||
|
labelLine: { |
||||
|
show: false, |
||||
|
}, |
||||
|
label: { |
||||
|
show: false, |
||||
|
} |
||||
|
}, |
||||
|
{ |
||||
|
type: 'pie', |
||||
|
radius: [0, '38%'], |
||||
|
center: ['30%', '50%'], |
||||
|
hoverAnimation: false, |
||||
|
tooltip:{ |
||||
|
show:false, |
||||
|
}, |
||||
|
label: { |
||||
|
show:false, |
||||
|
}, |
||||
|
labelLine: { |
||||
|
show: false |
||||
|
}, |
||||
|
itemStyle: { |
||||
|
color: '#02a6ff', |
||||
|
opacity: 0.4, |
||||
|
}, |
||||
|
data: [ |
||||
|
{ value: 0 } |
||||
|
] |
||||
|
}, |
||||
|
{ |
||||
|
type: 'pie', |
||||
|
hoverAnimation: false, |
||||
|
z:2, |
||||
|
radius: [0, '60%'], |
||||
|
center: ['30%', '50%'], |
||||
|
tooltip:{ |
||||
|
show:false, |
||||
|
}, |
||||
|
label: { |
||||
|
show:false, |
||||
|
}, |
||||
|
labelLine: { |
||||
|
show: false |
||||
|
}, |
||||
|
itemStyle: { |
||||
|
color: '#163A45', |
||||
|
opacity: 0.9, |
||||
|
}, |
||||
|
data: [ |
||||
|
{ value: 0 } |
||||
|
] |
||||
|
}, |
||||
|
{ |
||||
|
type: 'pie', |
||||
|
z: 4, |
||||
|
silent: true, |
||||
|
radius: ['51%', '52%'], |
||||
|
center: ['30%', '50%'], |
||||
|
label: { |
||||
|
show: false |
||||
|
}, |
||||
|
labelLine: { |
||||
|
show: false |
||||
|
}, |
||||
|
data: _pie3() |
||||
|
}, |
||||
|
/*{ |
||||
|
type: 'pie', |
||||
|
radius: ['45%', '75%'], |
||||
|
center: ['20%', '50%'], |
||||
|
//hoverAnimation: false, |
||||
|
padAngle: 5, |
||||
|
itemStyle: { |
||||
|
borderRadius: 5, |
||||
|
color: '#0286ff', |
||||
|
opacity: 0.4, |
||||
|
}, |
||||
|
label: { |
||||
|
show: false, |
||||
|
}, |
||||
|
data: [ |
||||
|
{ |
||||
|
value: 30, |
||||
|
name: '运行中' |
||||
|
}, |
||||
|
{ |
||||
|
value: 30, |
||||
|
name: '已停止' |
||||
|
}, |
||||
|
{ |
||||
|
value: 40, |
||||
|
name: '未上线' |
||||
|
}, |
||||
|
], |
||||
|
labelLine: { |
||||
|
show: false, |
||||
|
}, |
||||
|
}*/ |
||||
|
], |
||||
|
} |
||||
|
) |
||||
|
function _pie3() { |
||||
|
let dataArr = []; |
||||
|
for (var i = 0; i < 100; i++) { |
||||
|
if (i % 2 === 0) { |
||||
|
dataArr.push({ |
||||
|
//name: (i + 1).toString(), |
||||
|
value: 25, |
||||
|
itemStyle: { |
||||
|
normal: { |
||||
|
color: "#1ABAF0", |
||||
|
borderWidth: 0, |
||||
|
borderColor: "rgba(0,0,0,0)" |
||||
|
} |
||||
|
} |
||||
|
}) |
||||
|
} else { |
||||
|
dataArr.push({ |
||||
|
//name: (i + 1).toString(), |
||||
|
value: 20, |
||||
|
itemStyle: { |
||||
|
normal: { |
||||
|
color: "rgba(0,0,0,0)", |
||||
|
borderWidth: 0, |
||||
|
borderColor: "rgba(0,0,0,0)" |
||||
|
} |
||||
|
} |
||||
|
}) |
||||
|
} |
||||
|
} |
||||
|
return dataArr |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style scoped> |
||||
|
</style> |
||||
@ -0,0 +1,271 @@ |
|||||
|
<template> |
||||
|
<div :class="className" :style="{height:height,width:width}"/> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import * as echarts from 'echarts' |
||||
|
import resize from './mixins/resize' |
||||
|
|
||||
|
export default { |
||||
|
mixins: [resize], |
||||
|
props: { |
||||
|
className: { |
||||
|
type: String, |
||||
|
default: 'chart' |
||||
|
}, |
||||
|
width: { |
||||
|
type: String, |
||||
|
default: '100%' |
||||
|
}, |
||||
|
height: { |
||||
|
type: String, |
||||
|
default: '17.63vh' |
||||
|
} |
||||
|
}, |
||||
|
data() { |
||||
|
return { |
||||
|
chart: null, |
||||
|
chartData:[ |
||||
|
{ |
||||
|
value: 239, |
||||
|
name: "大学城收费站" |
||||
|
}, |
||||
|
{ |
||||
|
"value": 181, |
||||
|
"name": "长清收费站" |
||||
|
}, |
||||
|
{ |
||||
|
"value": 154, |
||||
|
"name": "孝里收费站" |
||||
|
}, |
||||
|
{ |
||||
|
"value": 144, |
||||
|
"name": "平阴北收费站" |
||||
|
}, |
||||
|
{ |
||||
|
"value": 135, |
||||
|
"name": "平阴收费站" |
||||
|
}, |
||||
|
{ |
||||
|
"value": 117, |
||||
|
"name": "平阴南收费站" |
||||
|
}, |
||||
|
{ |
||||
|
"value": 74, |
||||
|
"name": "梁山东收费站" |
||||
|
}, |
||||
|
{ |
||||
|
"value": 52, |
||||
|
"name": "嘉祥西收费站" |
||||
|
} |
||||
|
], |
||||
|
} |
||||
|
}, |
||||
|
mounted() { |
||||
|
this.$nextTick(() => { |
||||
|
this.initChart() |
||||
|
}) |
||||
|
}, |
||||
|
beforeDestroy() { |
||||
|
if (!this.chart) { |
||||
|
return |
||||
|
} |
||||
|
this.chart.dispose() |
||||
|
this.chart = null |
||||
|
}, |
||||
|
methods: { |
||||
|
initChart() { |
||||
|
this.chart = echarts.init(this.$el) |
||||
|
this.setOption() |
||||
|
}, |
||||
|
setOption() { |
||||
|
let that = this |
||||
|
this.chart.setOption( |
||||
|
{ |
||||
|
tooltip: { |
||||
|
show: false, |
||||
|
trigger: 'axis', |
||||
|
axisPointer: { |
||||
|
type: 'shadow' |
||||
|
} |
||||
|
}, |
||||
|
legend: { |
||||
|
show: false |
||||
|
}, |
||||
|
grid: { |
||||
|
left: '42%', |
||||
|
right: '14%', |
||||
|
bottom: '2%', |
||||
|
top: '26%', |
||||
|
//containLabel: true |
||||
|
}, |
||||
|
xAxis: { |
||||
|
show: false, |
||||
|
type: 'value' |
||||
|
}, |
||||
|
yAxis: [ |
||||
|
{ |
||||
|
type: 'category', |
||||
|
inverse: true, |
||||
|
axisLine: { |
||||
|
show: false |
||||
|
}, |
||||
|
axisTick: { |
||||
|
show: false |
||||
|
}, |
||||
|
axisPointer: { |
||||
|
label: { |
||||
|
show: false, |
||||
|
margin: 30 |
||||
|
} |
||||
|
}, |
||||
|
data: that.chartData.map(item => item.name), |
||||
|
axisLabel: { |
||||
|
margin: 150, |
||||
|
fontSize: 14, |
||||
|
align: 'left', |
||||
|
color: '#ffffff', |
||||
|
rich: { |
||||
|
a1: { |
||||
|
color: '#fff', |
||||
|
backgroundColor: new echarts.graphic.LinearGradient(0, 1, 0, 0, [ |
||||
|
{ |
||||
|
offset: 0, |
||||
|
color: '#FFB904' |
||||
|
}, |
||||
|
{ |
||||
|
offset: 1, |
||||
|
color: '#FF6969' |
||||
|
} |
||||
|
]), |
||||
|
width: 45, |
||||
|
height: 18, |
||||
|
align: 'center', |
||||
|
borderRadius: 5 |
||||
|
}, |
||||
|
b: { |
||||
|
color: '#fff', |
||||
|
backgroundColor: new echarts.graphic.LinearGradient(0, 1, 0, 0, [ |
||||
|
{ |
||||
|
offset: 0, |
||||
|
color: '#61D8FF' |
||||
|
}, |
||||
|
{ |
||||
|
offset: 1, |
||||
|
color: '#0BA7DA' |
||||
|
} |
||||
|
]), |
||||
|
width: 45, |
||||
|
height: 18, |
||||
|
align: 'center', |
||||
|
borderRadius: 5 |
||||
|
} |
||||
|
}, |
||||
|
formatter: function (params) { |
||||
|
let index = that.chartData.map(item => item.name).indexOf(params); |
||||
|
index = index + 1; |
||||
|
if (index - 1 < 1) { |
||||
|
return [ |
||||
|
'{a1|TOP' + index + '}' + ' ' + params |
||||
|
].join('\n') |
||||
|
} else { |
||||
|
return [ |
||||
|
'{b|TOP' + index + '}' + ' ' + params |
||||
|
].join('\n') |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
}, |
||||
|
{ |
||||
|
type: 'category', |
||||
|
inverse: true, |
||||
|
axisTick: 'none', |
||||
|
axisLine: 'none', |
||||
|
show: true, |
||||
|
data: that.chartData.map(item => item.value), |
||||
|
axisLabel: { |
||||
|
show: true, |
||||
|
fontSize: 14, |
||||
|
color: '#ffffff', |
||||
|
formatter: '{value}' |
||||
|
} |
||||
|
}], |
||||
|
series: [ |
||||
|
{ |
||||
|
z: 2, |
||||
|
name: 'value', |
||||
|
type: 'bar', |
||||
|
barWidth: 8, |
||||
|
zlevel: 1, |
||||
|
data: that.chartData.map((item, i) => { |
||||
|
let itemStyle = { |
||||
|
barBorderRadius: 30, |
||||
|
color: i > 0 |
||||
|
? new echarts.graphic.LinearGradient(0, 0, 1, 0, [ |
||||
|
{ |
||||
|
offset: 0, |
||||
|
color: '#61D8FF' |
||||
|
}, |
||||
|
{ |
||||
|
offset: 1, |
||||
|
color: '#0BA7DA' |
||||
|
} |
||||
|
]) |
||||
|
: new echarts.graphic.LinearGradient(0, 0, 1, 0, [ |
||||
|
{ |
||||
|
offset: 0, |
||||
|
color: '#FFB904' |
||||
|
}, |
||||
|
{ |
||||
|
offset: 1, |
||||
|
color: '#FF6969' |
||||
|
} |
||||
|
]), |
||||
|
} |
||||
|
return { |
||||
|
value: item.value, |
||||
|
itemStyle: itemStyle |
||||
|
}; |
||||
|
}), |
||||
|
label: {//柱子后面显示的值 |
||||
|
show: false, |
||||
|
position: 'right', |
||||
|
color: '#e70a0a', |
||||
|
fontSize: 14, |
||||
|
offset: [10, 0] |
||||
|
} |
||||
|
} |
||||
|
], |
||||
|
dataZoom: [ |
||||
|
{ |
||||
|
yAxisIndex: [0, 1], //这里是从X轴的0刻度开始 |
||||
|
show: false, //是否显示滑动条，不影响使用 |
||||
|
type: "slider", // 这个 dataZoom 组件是 slider 型 dataZoom 组件 |
||||
|
startValue: 0, // 从头开始。 |
||||
|
endValue: 3, // 一次性展示几个。 |
||||
|
}, |
||||
|
{ |
||||
|
// 没有下面这块的话，只能拖动滚动条， |
||||
|
// 鼠标滚轮在区域内不能控制外部滚动条 |
||||
|
type: "inside", |
||||
|
// y轴的索引数组 |
||||
|
yAxisIndex: [0, 1], |
||||
|
// 滚轮是否触发缩放 |
||||
|
zoomOnMouseWheel: false, |
||||
|
// 鼠标移动能否触发平移 |
||||
|
moveOnMouseMove: true, |
||||
|
// 鼠标滚轮能否触发平移 |
||||
|
moveOnMouseWheel: true, |
||||
|
} |
||||
|
], |
||||
|
} |
||||
|
) |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style scoped> |
||||
|
|
||||
|
</style> |
||||
@ -0,0 +1,192 @@ |
|||||
|
|
||||
|
<template> |
||||
|
<div ref="echarts" :class="className" :style="{width: width, height: height}"></div> |
||||
|
</template> |
||||
|
<script> |
||||
|
import * as echarts from 'echarts' |
||||
|
import resize from './mixins/resize' |
||||
|
export default { |
||||
|
mixins: [resize], |
||||
|
components: {}, |
||||
|
name: 'SplitBarChart', |
||||
|
data() { |
||||
|
return { |
||||
|
chart: null, |
||||
|
} |
||||
|
}, |
||||
|
props: { |
||||
|
className: { |
||||
|
type: String, |
||||
|
default: 'chart' |
||||
|
}, |
||||
|
width: { |
||||
|
type: String, |
||||
|
default: '100%' |
||||
|
}, |
||||
|
height: { |
||||
|
type: String, |
||||
|
default: '100%' |
||||
|
}, |
||||
|
autoResize: { |
||||
|
type: Boolean, |
||||
|
default: true |
||||
|
}, |
||||
|
chartData: { |
||||
|
type: Object, |
||||
|
required: true |
||||
|
} |
||||
|
}, |
||||
|
watch: { |
||||
|
chartData: { |
||||
|
deep: true, |
||||
|
handler(val) { |
||||
|
this.setOptions(val) |
||||
|
} |
||||
|
} |
||||
|
}, |
||||
|
mounted() { |
||||
|
this.$nextTick(() => { |
||||
|
//this.getData() |
||||
|
this.initChart() |
||||
|
}) |
||||
|
}, |
||||
|
beforeDestroy() { |
||||
|
if (!this.chart) { |
||||
|
return |
||||
|
} |
||||
|
this.chart.dispose() |
||||
|
this.chart = null |
||||
|
}, |
||||
|
methods: { |
||||
|
initChart() { |
||||
|
this.chart = echarts.init(this.$refs.echarts) |
||||
|
this.setOptions(this.chartData) |
||||
|
}, |
||||
|
setOptions({xData, yData} = {}) { |
||||
|
let series = [], unit = '' |
||||
|
if (yData.unit) unit = yData.unit |
||||
|
let seriesBarDefault = { |
||||
|
type: 'pictorialBar', |
||||
|
name: yData.name?yData.name:'', |
||||
|
itemStyle: { |
||||
|
color:yData.color?yData.color:'#20E6FE' |
||||
|
/*normal: { |
||||
|
// color: 'rgba(70,179,250,1)' |
||||
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ |
||||
|
{ |
||||
|
offset: 0, |
||||
|
color: '#20E6FE' |
||||
|
}, |
||||
|
{ |
||||
|
offset: 1, |
||||
|
color: '#007EAE' |
||||
|
} |
||||
|
]) |
||||
|
}*/ |
||||
|
}, |
||||
|
yAxisIndex: 0, |
||||
|
symbolRepeat: 'fixed', |
||||
|
barWidth:'60%', |
||||
|
barGap: 0.01, //柱子之间间距 |
||||
|
symbolMargin: 1, |
||||
|
symbol: 'rect', |
||||
|
symbolClip: true, |
||||
|
symbolSize: [8, 4], |
||||
|
symbolOffset: [0, 0], |
||||
|
data:yData.data?yData.data:[] |
||||
|
} |
||||
|
series.push(seriesBarDefault) |
||||
|
let options = { |
||||
|
title:{ |
||||
|
show:true, |
||||
|
text:unit, |
||||
|
textStyle:{ |
||||
|
color:'#e3e3e3', |
||||
|
fontSize: 12, |
||||
|
fontWeight:500 |
||||
|
}, |
||||
|
right:'0%', |
||||
|
top: '4%', |
||||
|
}, |
||||
|
tooltip: { |
||||
|
trigger: 'axis', |
||||
|
axisPointer: { |
||||
|
type: 'shadow' |
||||
|
}, |
||||
|
}, |
||||
|
legend: { |
||||
|
show: true, |
||||
|
icon: 'circle', |
||||
|
top: '4%', |
||||
|
right: '15%', |
||||
|
itemHeight: 10, |
||||
|
itemWidth: 10, |
||||
|
//data: legend, |
||||
|
textStyle: { |
||||
|
// 图例文字的样式 |
||||
|
color: '#e3e3e3', |
||||
|
fontSize: 1 |
||||
|
} |
||||
|
}, |
||||
|
grid: { |
||||
|
left: '2%', |
||||
|
right: '1%', |
||||
|
bottom: '5%', |
||||
|
top: '30%', |
||||
|
containLabel: true |
||||
|
}, |
||||
|
xAxis: { |
||||
|
type: 'category', |
||||
|
axisTick: { |
||||
|
show: false |
||||
|
}, |
||||
|
axisLine: { |
||||
|
show: false, |
||||
|
lineStyle: { |
||||
|
color: '#F1F1F1' |
||||
|
} |
||||
|
}, |
||||
|
axisLabel: { |
||||
|
color: '#e3e3e3' |
||||
|
}, |
||||
|
data: xData, |
||||
|
}, |
||||
|
yAxis: [ |
||||
|
{ |
||||
|
//name: unit, |
||||
|
type: 'value', |
||||
|
splitLine: { |
||||
|
show: true, |
||||
|
lineStyle:{ |
||||
|
type:5, |
||||
|
width:1, |
||||
|
color: '#104266' , //x坐标轴线的颜色 |
||||
|
} |
||||
|
}, |
||||
|
axisLabel: { |
||||
|
color: '#e3e3e3' |
||||
|
} |
||||
|
} |
||||
|
], |
||||
|
series: series, |
||||
|
dataZoom: [ |
||||
|
{ |
||||
|
xAxisIndex: 0, //这里是从X轴的0刻度开始 |
||||
|
show: false, //是否显示滑动条，不影响使用 |
||||
|
type: "inside", // 这个 dataZoom 组件是 slider 型 dataZoom 组件 |
||||
|
startValue: 0, // 从头开始。 |
||||
|
endValue: 10, // 一次性展示几个。 |
||||
|
} |
||||
|
], |
||||
|
animation:false, |
||||
|
//animationDuration: 0,//这里两个动画设置可以让图表更顺滑 |
||||
|
//animationEasing: 'cubicInOut'//这里两个动画设置可以让图表更顺滑 |
||||
|
} |
||||
|
this.chart.setOption(options,true) |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
<style scoped> |
||||
|
/* @import url(); 引入css类 */ |
||||
|
</style> |
||||
@ -0,0 +1,264 @@ |
|||||
|
<template> |
||||
|
<div :class="className" :style="{height:height,width:width}" /> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import * as echarts from 'echarts' |
||||
|
import {duoyuan} from './realData' |
||||
|
import {parseTime} from '@/utils/ruoyi' |
||||
|
import resize from './mixins/resize' |
||||
|
export default { |
||||
|
mixins: [resize], |
||||
|
props: { |
||||
|
className: { |
||||
|
type: String, |
||||
|
default: 'chart' |
||||
|
}, |
||||
|
width: { |
||||
|
type: String, |
||||
|
default: '100%' |
||||
|
}, |
||||
|
height: { |
||||
|
type: String, |
||||
|
default: '17.63vh' |
||||
|
} |
||||
|
}, |
||||
|
watch: { |
||||
|
data: { |
||||
|
deep: true, |
||||
|
handler: function (newV, oldV) { |
||||
|
this.setOption() |
||||
|
} |
||||
|
} |
||||
|
}, |
||||
|
data() { |
||||
|
return { |
||||
|
chart: null, |
||||
|
timer: null, |
||||
|
value: 18, |
||||
|
yuan:duoyuan, |
||||
|
xData:[], |
||||
|
pvData:[], |
||||
|
loadData:[], |
||||
|
electricData:[] |
||||
|
} |
||||
|
}, |
||||
|
mounted() { |
||||
|
this.$nextTick(() => { |
||||
|
this.initChart() |
||||
|
}) |
||||
|
}, |
||||
|
beforeDestroy() { |
||||
|
if (!this.chart) { |
||||
|
return |
||||
|
} |
||||
|
this.chart.dispose() |
||||
|
this.chart = null |
||||
|
}, |
||||
|
created() { |
||||
|
this.$nextTick(()=>{ |
||||
|
//获取当前时间 |
||||
|
var now = new Date(); |
||||
|
let nowTime = parseInt(now.getTime()); |
||||
|
let dateStr = parseTime(now,'{y}-{m}-{d}') |
||||
|
if(this.yuan){ |
||||
|
this.yuan.forEach(e=>{ |
||||
|
e.time = e.time.replace(e.time.substr(0,10),dateStr); |
||||
|
let cTime = this.dateStrChangeTimeTamp(e.time) |
||||
|
if(cTime<nowTime){ |
||||
|
this.xData.push(e.time) |
||||
|
this.pvData.push(e.photovoltaicMeter) |
||||
|
this.loadData.push(e.loadMeter) |
||||
|
this.electricData.push(e.electricMeter) |
||||
|
} |
||||
|
}) |
||||
|
} |
||||
|
}) |
||||
|
}, |
||||
|
methods: { |
||||
|
//日期字符串转成时间戳 |
||||
|
//例如var date = '2015-03-05 17:59:00.0'; |
||||
|
dateStrChangeTimeTamp(dateStr){ |
||||
|
dateStr = dateStr.substring(0,19); |
||||
|
dateStr = dateStr.replace(/-/g,'/'); |
||||
|
return new Date(dateStr).getTime(); |
||||
|
}, |
||||
|
|
||||
|
initChart() { |
||||
|
this.chart = echarts.init(this.$el) |
||||
|
this.setOption() |
||||
|
}, |
||||
|
setOption() { |
||||
|
this.chart.setOption({ |
||||
|
backgroundColor: 'rgba(255,255,255,0)', |
||||
|
// dataZoom: [ |
||||
|
// { |
||||
|
// moveOnMouseMove: true, |
||||
|
// type: 'slider', |
||||
|
// show: false, |
||||
|
// xAxisIndex: [0], |
||||
|
// start: 0, |
||||
|
// end: 30, // 初始化滚动条 |
||||
|
// minValueSpan: 7, |
||||
|
// maxValueSpan: 7 |
||||
|
// }, |
||||
|
// { |
||||
|
// type: 'inside', |
||||
|
// xAxisIndex: 0, |
||||
|
// zoomOnMouseWheel: false, // 滚轮是否触发缩放 |
||||
|
// moveOnMouseMove: true, // 鼠标滚轮触发滚动 |
||||
|
// moveOnMouseWheel: true |
||||
|
// } |
||||
|
// ], |
||||
|
tooltip: { |
||||
|
trigger: 'axis', |
||||
|
backgroundColor: 'rgba(1, 29, 63, .8)', // 设置背景颜色 |
||||
|
textStyle: { |
||||
|
color: '#fff', |
||||
|
fontSize: 12 |
||||
|
}, |
||||
|
borderColor: 'rgba(1, 29, 63,.8)', |
||||
|
axisPointer: { |
||||
|
type: 'shadow', |
||||
|
shadowStyle: { |
||||
|
fontSize: 12, |
||||
|
color: 'rgba(0, 11, 34, 0)' |
||||
|
} |
||||
|
} |
||||
|
}, |
||||
|
title: { |
||||
|
text: '单位（tCO₂）', |
||||
|
textStyle: { |
||||
|
fontSize: 11, |
||||
|
fontWeight: 'normal', |
||||
|
color: '#FFFFFF' // 标题颜色 |
||||
|
}, |
||||
|
top: '3%', |
||||
|
right: '2%' |
||||
|
}, |
||||
|
legend: { |
||||
|
icon: 'circle', |
||||
|
itemWidth: 7, |
||||
|
itemHeight: 7, |
||||
|
data: ['碳排放', '碳减排'], |
||||
|
right: '25%', |
||||
|
top: '3%', |
||||
|
textStyle: { |
||||
|
fontSize: 11, |
||||
|
color: '#FFFFFF' |
||||
|
} |
||||
|
}, |
||||
|
grid: { |
||||
|
top: '32%', |
||||
|
left: '4%', |
||||
|
right: '2%', |
||||
|
bottom: '2%', |
||||
|
containLabel: true |
||||
|
}, |
||||
|
xAxis: { |
||||
|
type: 'category', |
||||
|
axisLine: { |
||||
|
lineStyle: { |
||||
|
color: 'rgba(143, 169, 192, 0.60)' |
||||
|
} |
||||
|
}, |
||||
|
axisLabel: { |
||||
|
color: '#FFFFFF' |
||||
|
}, |
||||
|
axisTick: { |
||||
|
show: false |
||||
|
}, |
||||
|
data: this.xData |
||||
|
}, |
||||
|
yAxis: { |
||||
|
type: 'value', |
||||
|
// interval: 100, |
||||
|
axisLine: { |
||||
|
lineStyle: { |
||||
|
color: 'rgba(143,169,192,0.7)' |
||||
|
} |
||||
|
}, |
||||
|
axisLabel: { |
||||
|
margin: 18, |
||||
|
fontSize: 10, |
||||
|
color: '#FFFFFF' |
||||
|
}, |
||||
|
splitLine: { |
||||
|
lineStyle: { |
||||
|
//type: 'dashed', |
||||
|
color: 'rgba(143,169,192,0.25)' |
||||
|
} |
||||
|
} |
||||
|
}, |
||||
|
series: [ |
||||
|
{ |
||||
|
name: '碳排放', |
||||
|
type: 'line', |
||||
|
smooth: true, |
||||
|
symbol: 'circle', |
||||
|
symbolSize: 5, |
||||
|
showSymbol: false, |
||||
|
zlevel: 1, |
||||
|
z: 1, |
||||
|
lineStyle: { |
||||
|
width: 1.5 |
||||
|
}, |
||||
|
areaStyle: { |
||||
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ |
||||
|
{ |
||||
|
offset: 0, |
||||
|
color: '#E2BA74' |
||||
|
}, |
||||
|
{ |
||||
|
offset: 0.9, |
||||
|
color: 'rgba(226,186,116,0.1)' |
||||
|
} |
||||
|
], false), |
||||
|
shadowBlur: 10 |
||||
|
}, |
||||
|
itemStyle: { |
||||
|
color: '#E2BA74', |
||||
|
borderWidth: 30 |
||||
|
}, |
||||
|
data: this.pvData |
||||
|
}, |
||||
|
{ |
||||
|
name: '碳减排', |
||||
|
type: 'line', |
||||
|
smooth: true, |
||||
|
symbol: 'circle', |
||||
|
zlevel: 1, |
||||
|
z: 1, |
||||
|
symbolSize: 5, |
||||
|
showSymbol: false, |
||||
|
lineStyle: { |
||||
|
width: 1.5 |
||||
|
}, |
||||
|
areaStyle: { |
||||
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ |
||||
|
{ |
||||
|
offset: 0, |
||||
|
color: 'rgba(50,187,138,0.7)' |
||||
|
}, |
||||
|
{ |
||||
|
offset: 0.9, |
||||
|
color: 'rgba(50,187,138,0.1)' |
||||
|
} |
||||
|
], false), |
||||
|
shadowBlur: 10 |
||||
|
}, |
||||
|
itemStyle: { |
||||
|
color: '#32BB8A', |
||||
|
borderWidth: 30 |
||||
|
}, |
||||
|
data: this.electricData |
||||
|
} |
||||
|
] |
||||
|
}) |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style scoped> |
||||
|
</style> |
||||
@ -0,0 +1,56 @@ |
|||||
|
import { debounce } from '@/utils' |
||||
|
|
||||
|
export default { |
||||
|
data() { |
||||
|
return { |
||||
|
$_sidebarElm: null, |
||||
|
$_resizeHandler: null |
||||
|
} |
||||
|
}, |
||||
|
mounted() { |
||||
|
this.initListener() |
||||
|
}, |
||||
|
activated() { |
||||
|
if (!this.$_resizeHandler) { |
||||
|
// avoid duplication init
|
||||
|
this.initListener() |
||||
|
} |
||||
|
|
||||
|
// when keep-alive chart activated, auto resize
|
||||
|
this.resize() |
||||
|
}, |
||||
|
beforeDestroy() { |
||||
|
this.destroyListener() |
||||
|
}, |
||||
|
deactivated() { |
||||
|
this.destroyListener() |
||||
|
}, |
||||
|
methods: { |
||||
|
// use $_ for mixins properties
|
||||
|
// https://vuejs.org/v2/style-guide/index.html#Private-property-names-essential
|
||||
|
$_sidebarResizeHandler(e) { |
||||
|
if (e.propertyName === 'width') { |
||||
|
this.$_resizeHandler() |
||||
|
} |
||||
|
}, |
||||
|
initListener() { |
||||
|
this.$_resizeHandler = debounce(() => { |
||||
|
this.resize() |
||||
|
}, 100) |
||||
|
window.addEventListener('resize', this.$_resizeHandler) |
||||
|
|
||||
|
this.$_sidebarElm = document.getElementsByClassName('sidebar-container')[0] |
||||
|
this.$_sidebarElm && this.$_sidebarElm.addEventListener('transitionend', this.$_sidebarResizeHandler) |
||||
|
}, |
||||
|
destroyListener() { |
||||
|
window.removeEventListener('resize', this.$_resizeHandler) |
||||
|
this.$_resizeHandler = null |
||||
|
|
||||
|
this.$_sidebarElm && this.$_sidebarElm.removeEventListener('transitionend', this.$_sidebarResizeHandler) |
||||
|
}, |
||||
|
resize() { |
||||
|
const { chart } = this |
||||
|
chart && chart.resize() |
||||
|
} |
||||
|
} |
||||
|
} |
||||
File diff suppressed because it is too large
Loading…
Reference in new issue