360 lines
7.5 KiB
Vue
360 lines
7.5 KiB
Vue
<template>
|
|
<div class="proj-info-page">
|
|
<div class="inner-tit">
|
|
<img src="../../assets/img/lef-badge.png" alt="">
|
|
工程信息
|
|
</div>
|
|
<div class="proj-infos">
|
|
<div
|
|
class="info-lef"
|
|
style="cursor: pointer;"
|
|
@click="toggleDialog(9)"
|
|
>
|
|
<div class="lef-upper">{{ projData.projectTotal }}</div>
|
|
<div class="lef-lower">工程总数</div>
|
|
</div>
|
|
<div class="info-rig">
|
|
<div class="bars">
|
|
<img src="../../assets/img/proj-spin.png" alt="">
|
|
<div
|
|
style="cursor: pointer"
|
|
@click="toggleDialog(10)"
|
|
>
|
|
<span style="font-size: 22px; color: #1791C7">{{ projData.projectPowerTotal }}</span>
|
|
<div id="change-bar" style="height: 40px"></div>
|
|
<span>变电工程数</span>
|
|
</div>
|
|
</div>
|
|
<div class="bars">
|
|
<img src="../../assets/img/proj-spin.png" alt="">
|
|
<div
|
|
style="cursor: pointer"
|
|
@click="toggleDialog(11)"
|
|
>
|
|
<span style="font-size: 22px; color: #1791C7">{{ projData.projectLineTotal }}</span>
|
|
<div id="line-bar" style="height: 40px"></div>
|
|
<span>线路工程数</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import * as echarts from 'echarts';
|
|
import {
|
|
queryProjInfoApi
|
|
} from '@/api/home/home'
|
|
export default {
|
|
name: 'projInfoPage',
|
|
components: {
|
|
|
|
},
|
|
data() {
|
|
return {
|
|
projData: {
|
|
projectLineTotal: 0,
|
|
projectPowerTotal: 0,
|
|
projectTotal: 0
|
|
}
|
|
}
|
|
},
|
|
created() {
|
|
},
|
|
mounted() {
|
|
this.getProjData()
|
|
// this.getProjBar()
|
|
},
|
|
destroyed() {
|
|
|
|
},
|
|
methods: {
|
|
toggleDialog(v) {
|
|
this.$emit('openDialog', { order: v })
|
|
},
|
|
async getProjData() {
|
|
|
|
let res = await queryProjInfoApi()
|
|
this.projData = res.data
|
|
this.getProjBar()
|
|
},
|
|
getProjBar() {
|
|
let changeBarOpt = {
|
|
backgroundColor: 'transparent',
|
|
grid: {
|
|
top: 0,
|
|
left: '10%',
|
|
right: '10%',
|
|
bottom: 20,
|
|
containLabel: true,
|
|
},
|
|
xAxis: {
|
|
type: 'value',
|
|
splitLine: {
|
|
show: false,
|
|
},
|
|
axisTick: {
|
|
show: false,
|
|
},
|
|
axisLine: {
|
|
show: false,
|
|
},
|
|
axisLabel: {
|
|
show: false,
|
|
},
|
|
max: this.projData.projectTotal,
|
|
},
|
|
yAxis: {
|
|
type: 'category',
|
|
splitLine: {
|
|
show: false,
|
|
},
|
|
axisTick: {
|
|
show: false,
|
|
},
|
|
axisLine: {
|
|
show: false,
|
|
},
|
|
axisLabel: {
|
|
show: false,
|
|
},
|
|
},
|
|
series: [
|
|
{
|
|
type: 'bar',
|
|
itemStyle: {
|
|
normal: {
|
|
color: "#5EA3E1",
|
|
opacity: 0.7,
|
|
barBorderRadius: 4,
|
|
},
|
|
},
|
|
label:{
|
|
show:true,
|
|
formatter:'',
|
|
backgroundColor:'#fff',
|
|
width:10,
|
|
height:10,
|
|
position:'right',
|
|
offset:[-7,0],
|
|
borderWidth:5,
|
|
borderColor:'rgba(255,255,255,0.2)',
|
|
borderRadius:5,
|
|
shadowColor:'#fff',
|
|
shadowBlur:20
|
|
},
|
|
showBackground: true,
|
|
silent: true,
|
|
barWidth: 5,
|
|
barGap: '-100%', // Make series be overlap
|
|
data: [this.projData.projectPowerTotal],
|
|
},
|
|
],
|
|
}
|
|
let lineBarOpt = {
|
|
backgroundColor: 'transparent',
|
|
grid: {
|
|
top: 0,
|
|
left: '10%',
|
|
right: '10%',
|
|
bottom: 20,
|
|
containLabel: true,
|
|
},
|
|
xAxis: {
|
|
type: 'value',
|
|
splitLine: {
|
|
show: false,
|
|
},
|
|
axisTick: {
|
|
show: false,
|
|
},
|
|
axisLine: {
|
|
show: false,
|
|
},
|
|
axisLabel: {
|
|
show: false,
|
|
},
|
|
max: this.projData.projectTotal,
|
|
},
|
|
yAxis: {
|
|
type: 'category',
|
|
splitLine: {
|
|
show: false,
|
|
},
|
|
axisTick: {
|
|
show: false,
|
|
},
|
|
axisLine: {
|
|
show: false,
|
|
},
|
|
axisLabel: {
|
|
show: false,
|
|
},
|
|
},
|
|
series: [
|
|
{
|
|
type: 'bar',
|
|
itemStyle: {
|
|
normal: {
|
|
color: "#5EA3E1",
|
|
opacity: 0.7,
|
|
barBorderRadius: 4,
|
|
},
|
|
},
|
|
label:{
|
|
show:true,
|
|
formatter:'',
|
|
backgroundColor:'#fff',
|
|
width:10,
|
|
height:10,
|
|
position:'right',
|
|
offset:[-7,0],
|
|
borderWidth:5,
|
|
borderColor:'rgba(255,255,255,0.2)',
|
|
borderRadius:5,
|
|
shadowColor:'#fff',
|
|
shadowBlur:20
|
|
},
|
|
showBackground: true,
|
|
silent: true,
|
|
barWidth: 5,
|
|
barGap: '-100%', // Make series be overlap
|
|
data: [this.projData.projectLineTotal],
|
|
},
|
|
],
|
|
}
|
|
let changeBar = echarts.init(document.querySelector('#change-bar'));
|
|
let lineBar = echarts.init(document.querySelector('#line-bar'));
|
|
changeBar.setOption(changeBarOpt)
|
|
lineBar.setOption(lineBarOpt)
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
|
|
@font-face {
|
|
font-family: 'YouShe';
|
|
src: url("../../assets/iconfont/YouSheBiaoTiHei.ttf");
|
|
}
|
|
|
|
.proj-info-page {
|
|
|
|
height: 100%;
|
|
background-color: #F3F7FF;
|
|
box-sizing: border-box;
|
|
padding: 15px 20px;
|
|
border-radius: 5px;
|
|
border: 1px solid #EFF2FC;
|
|
box-shadow: 2px 2px 2px #D9E0F3;
|
|
|
|
.inner-tit{
|
|
|
|
width: 100%;
|
|
box-sizing: border-box;
|
|
padding: 10px 20px;
|
|
background-color: #EFF4FE;
|
|
display: flex;
|
|
align-items: center;
|
|
color: #000;
|
|
font-size: 20px;
|
|
font-family: 'YouShe', sans-serif;
|
|
box-shadow: -3px -3px 2px #CBDCF6,
|
|
2px 2px 2px #F8F9FE,
|
|
-2px -2px 2px #CBDCF6,
|
|
2px 2px 2px #F8F9FE;
|
|
margin-bottom: 15px;
|
|
|
|
img{
|
|
|
|
margin-right: 10px;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
.proj-infos{
|
|
|
|
width: 100%;
|
|
height: 200px;
|
|
display: flex;
|
|
|
|
.info-lef{
|
|
|
|
width: 50%;
|
|
height: 100%;
|
|
box-sizing: border-box;
|
|
padding: 15px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-around;
|
|
align-items: center;
|
|
|
|
.lef-upper{
|
|
|
|
width: 100%;
|
|
height: 85%;
|
|
display: flex;
|
|
justify-content: center;
|
|
background: url("../../assets/img/proj-base.png") no-repeat;
|
|
background-size: 100% 100%;
|
|
font-size: 80px;
|
|
font-weight: bold;
|
|
color: #3D78D3;
|
|
|
|
}
|
|
|
|
.lef-lower{
|
|
|
|
color: #000;
|
|
font-size: 20px;
|
|
font-weight: bold;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
.info-rig{
|
|
|
|
flex: 1;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-around;
|
|
|
|
.bars{
|
|
|
|
width: 100%;
|
|
height: 45%;
|
|
display: flex;
|
|
color: #000;
|
|
font-size: 18px;
|
|
|
|
img{
|
|
|
|
width: 5%;
|
|
height: 100%;
|
|
|
|
}
|
|
|
|
div{
|
|
|
|
flex: 1;
|
|
box-sizing: border-box;
|
|
padding-left: 10px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-around;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
</style>
|