This commit is contained in:
parent
411ef71891
commit
e6a33e440c
Binary file not shown.
|
After Width: | Height: | Size: 291 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.8 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 5.2 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 5.0 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 5.4 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 5.3 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 12 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 13 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 12 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 9.9 KiB |
|
|
@ -4,7 +4,9 @@
|
|||
<div class="top-1">
|
||||
<Top1 />
|
||||
</div>
|
||||
<div class="top-2"></div>
|
||||
<div class="top-2">
|
||||
<Top2 />
|
||||
</div>
|
||||
<div class="top-3">
|
||||
<Top3 />
|
||||
</div>
|
||||
|
|
@ -37,6 +39,7 @@
|
|||
|
||||
<script>
|
||||
import Top1 from './provincial/Top1'
|
||||
import Top2 from './provincial/Top2'
|
||||
import Top3 from './provincial/Top3'
|
||||
import Center1 from './provincial/Center1'
|
||||
import Center2 from './provincial/Center2'
|
||||
|
|
@ -48,6 +51,7 @@ export default {
|
|||
name: 'provincialChart',
|
||||
components: {
|
||||
Top1,
|
||||
Top2,
|
||||
Top3,
|
||||
Center1,
|
||||
Center2,
|
||||
|
|
@ -90,6 +94,8 @@ export default {
|
|||
flex: 1;
|
||||
margin: 0 15px;
|
||||
height: 518px;
|
||||
background-image: url('~@/assets/images/map-img.png');
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,11 +1,55 @@
|
|||
<template>
|
||||
<div>
|
||||
<TitleBox titleText="装备在用率统计" @handleMore="handleMore" />
|
||||
|
||||
<div class="topView">
|
||||
<div style="height: 100%; display: flex; align-items: center; justify-content: space-between">
|
||||
<div class="topTab" :class="{ active: tabIndex == 0 }" @click="changTab(0)">总体</div>
|
||||
<div class="topTab" :class="{ active: tabIndex == 1 }" @click="changTab(1)">线路</div>
|
||||
<div class="topTab" :class="{ active: tabIndex == 2 }" @click="changTab(2)">变电</div>
|
||||
<div class="topTab" :class="{ active: tabIndex == 3 }" @click="changTab(3)">电缆</div>
|
||||
</div>
|
||||
<div></div>
|
||||
</div>
|
||||
|
||||
<div class="bottom-box">
|
||||
<div class="bottom-item" v-for="(item, index) in tableList" :key="index">
|
||||
<div class="item-top-title">
|
||||
<img v-if="index == 0" src="@/assets/images/nb-1.png" style="width: 27px; height: 31px" alt="" />
|
||||
<img v-if="index == 1" src="@/assets/images/nb-2.png" style="width: 27px; height: 31px" alt="" />
|
||||
<img v-if="index == 2" src="@/assets/images/nb-3.png" style="width: 27px; height: 31px" alt="" />
|
||||
<img v-if="index == 3" src="@/assets/images/nb-4.png" style="width: 27px; height: 31px" alt="" />
|
||||
<span>{{ item.name || '-' }}</span>
|
||||
</div>
|
||||
<div class="img-box">
|
||||
<img v-if="index == 0" src="@/assets/images/nb-img-1.png" flt="contain" alt="" />
|
||||
<img v-if="index == 1" src="@/assets/images/nb-img-2.png" flt="contain" alt="" />
|
||||
<img v-if="index == 2" src="@/assets/images/nb-img-3.png" flt="contain" alt="" />
|
||||
<img v-if="index == 3" src="@/assets/images/nb-img-4.png" flt="contain" alt="" />
|
||||
</div>
|
||||
<div class="bt-content">
|
||||
<div class="bt-content-item">
|
||||
<span class="dot"></span>
|
||||
<span style="margin-right: 10px">在用率</span>
|
||||
<span class="num">{{ item.proportion || 0 }}%</span>
|
||||
</div>
|
||||
<div class="bt-content-item">
|
||||
<span class="dot"></span>
|
||||
<span style="margin-right: 10px">周转率</span>
|
||||
<span class="num"
|
||||
>{{ item.turnoverRate || 0 }}
|
||||
<span class="unit-text">次/年</span>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import TitleBox from '../TitleBox'
|
||||
import { getUsageStatisticsApi } from '@/api/wsScreen'
|
||||
|
||||
export default {
|
||||
name: 'Bottom2',
|
||||
|
|
@ -13,10 +57,44 @@ export default {
|
|||
TitleBox,
|
||||
},
|
||||
data() {
|
||||
return {}
|
||||
return {
|
||||
tabIndex: 0,
|
||||
tableList: [],
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.getInfo()
|
||||
},
|
||||
mounted() {},
|
||||
methods: {
|
||||
changTab(type) {
|
||||
console.log('🚀 ~ changTab ~ type:', type)
|
||||
this.tabIndex = type
|
||||
this.getInfo()
|
||||
},
|
||||
async getInfo() {
|
||||
try {
|
||||
let type = 0
|
||||
if (this.tabIndex == 0) {
|
||||
type = ''
|
||||
} else if (this.tabIndex == 1) {
|
||||
type = 1
|
||||
} else if (this.tabIndex == 2) {
|
||||
type = 2
|
||||
} else if (this.tabIndex == 3) {
|
||||
type = 3
|
||||
}
|
||||
const res = await getUsageStatisticsApi({ type })
|
||||
if (!res.data) return
|
||||
if (res.data.length > 4) {
|
||||
this.tableList = res.data.slice(0, 4)
|
||||
} else {
|
||||
this.tableList = res.data
|
||||
}
|
||||
console.log('🚀 ~ 装备在用率统计 ~ res:', res)
|
||||
} catch (error) {
|
||||
console.log('🚀 ~ 装备在用率统计 ~ error:', error)
|
||||
}
|
||||
},
|
||||
handleMore() {
|
||||
console.log('🚀 ~ methods.handleMore:')
|
||||
},
|
||||
|
|
@ -24,4 +102,92 @@ export default {
|
|||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped></style>
|
||||
<style lang="scss" scoped>
|
||||
.num {
|
||||
font-family: OPPOSans;
|
||||
font-size: 16px;
|
||||
}
|
||||
.unit-text {
|
||||
font-family: Microsoft YaHei, Microsoft YaHei;
|
||||
font-weight: 400;
|
||||
font-size: 12px;
|
||||
color: #333;
|
||||
}
|
||||
.topView {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 15px;
|
||||
|
||||
.topTab {
|
||||
margin-right: 10px;
|
||||
width: 60px;
|
||||
height: 24px;
|
||||
border-radius: 3px;
|
||||
border: 1px solid #cccccc;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
}
|
||||
.active {
|
||||
background: #2cbab2;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
.bottom-box {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.bottom-item {
|
||||
margin-right: 20px;
|
||||
width: 25%;
|
||||
height: 222px;
|
||||
background-image: url('~@/assets/images/item-bg.png');
|
||||
background-size: 100% 100%;
|
||||
box-shadow: 0px 3px 1px 0px #e9f0f3;
|
||||
border-radius: 5px;
|
||||
font-family: Microsoft YaHei, Microsoft YaHei;
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
color: #333;
|
||||
|
||||
&:last-child {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
.item-top-title {
|
||||
padding-right: 5px;
|
||||
font-size: 13px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.img-box {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 90px;
|
||||
}
|
||||
|
||||
.bt-content {
|
||||
margin-top: 20px;
|
||||
padding: 0 20px;
|
||||
.dot {
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
background: #b7c7d5;
|
||||
border-radius: 50%;
|
||||
margin-right: 6px;
|
||||
flex-shrink: 0; // 👈 防止被挤扁
|
||||
}
|
||||
|
||||
.bt-content-item {
|
||||
height: 40px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,193 @@
|
|||
<template>
|
||||
<div class="gauge-wrap">
|
||||
<div ref="chart" class="chart"></div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import * as echarts from 'echarts'
|
||||
|
||||
export default {
|
||||
name: 'UsageGauge',
|
||||
props: {
|
||||
value: {
|
||||
type: Number,
|
||||
default: 0,
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
chart: null,
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.initChart()
|
||||
window.addEventListener('resize', this.resize)
|
||||
},
|
||||
beforeDestroy() {
|
||||
window.removeEventListener('resize', this.resize)
|
||||
if (this.chart) {
|
||||
this.chart.dispose()
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
value() {
|
||||
this.updateChart()
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
resize() {
|
||||
if (this.chart) {
|
||||
this.chart.resize()
|
||||
}
|
||||
},
|
||||
initChart() {
|
||||
this.chart = echarts.init(this.$refs.chart)
|
||||
this.updateChart()
|
||||
},
|
||||
updateChart() {
|
||||
const val = this.value
|
||||
|
||||
const option = {
|
||||
// backgroundColor: '#eef6ff',
|
||||
|
||||
series: [
|
||||
// ① 主进度环
|
||||
{
|
||||
type: 'gauge',
|
||||
startAngle: 210,
|
||||
endAngle: -30,
|
||||
min: 0,
|
||||
max: 100,
|
||||
radius: '90%',
|
||||
center: ['50%', '60%'],
|
||||
pointer: { show: false },
|
||||
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
width: 16,
|
||||
color: [
|
||||
[
|
||||
val / 100,
|
||||
new echarts.graphic.LinearGradient(
|
||||
0,
|
||||
0,
|
||||
1,
|
||||
1, // 👈 斜向渐变（≈ 48deg）
|
||||
[
|
||||
{ offset: 0, color: '#46B0FC' },
|
||||
{ offset: 1, color: 'rgba(137,197,253,0.59)' },
|
||||
],
|
||||
),
|
||||
],
|
||||
[1, '#e6f0fa'], // 未走到的底色
|
||||
],
|
||||
},
|
||||
},
|
||||
axisTick: { show: false },
|
||||
splitLine: { show: false },
|
||||
axisLabel: { show: false },
|
||||
|
||||
detail: {
|
||||
show: true,
|
||||
offsetCenter: [0, '-10%'],
|
||||
formatter: '{value}%',
|
||||
fontSize: 28,
|
||||
fontWeight: 'bold',
|
||||
color: '#333',
|
||||
},
|
||||
|
||||
title: {
|
||||
show: true,
|
||||
offsetCenter: [0, '55%'],
|
||||
fontSize: 14,
|
||||
color: '#666',
|
||||
},
|
||||
|
||||
data: [{ value: val, name: '在用率' }],
|
||||
},
|
||||
|
||||
// ② 外圈：一圈“小点虚线”
|
||||
{
|
||||
type: 'gauge',
|
||||
startAngle: 210,
|
||||
endAngle: -30,
|
||||
min: 0,
|
||||
max: 100,
|
||||
radius: '119%',
|
||||
center: ['50%', '60%'],
|
||||
pointer: { show: false },
|
||||
|
||||
axisLine: { show: false },
|
||||
axisTick: { show: false },
|
||||
axisLabel: { show: false },
|
||||
|
||||
splitNumber: 60, // 点的数量（越大越密）
|
||||
splitLine: {
|
||||
show: true,
|
||||
length: 4, // 点的大小
|
||||
lineStyle: {
|
||||
color: '#8ec5ff',
|
||||
width: 3,
|
||||
type: 'dotted', // 关键：点状
|
||||
},
|
||||
},
|
||||
|
||||
detail: { show: false },
|
||||
title: { show: false },
|
||||
},
|
||||
|
||||
// ③ 只画“起点 & 终点”的长实线
|
||||
{
|
||||
type: 'gauge',
|
||||
startAngle: 210,
|
||||
endAngle: -30,
|
||||
min: 0,
|
||||
max: 100,
|
||||
radius: '121%',
|
||||
center: ['50%', '60%'],
|
||||
pointer: { show: false },
|
||||
|
||||
axisLine: { show: false },
|
||||
axisTick: { show: false },
|
||||
axisLabel: { show: false },
|
||||
|
||||
splitNumber: 1, // 只生成两端刻度
|
||||
splitLine: {
|
||||
show: true,
|
||||
length: 25, // 长实线长度
|
||||
lineStyle: {
|
||||
color: '#46B0FC',
|
||||
width: 2,
|
||||
type: 'solid',
|
||||
},
|
||||
},
|
||||
|
||||
detail: { show: false },
|
||||
title: { show: false },
|
||||
},
|
||||
],
|
||||
}
|
||||
|
||||
this.chart.setOption(option, true)
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.gauge-wrap {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 12px;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.chart {
|
||||
width: 165px;
|
||||
height: 165px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,19 @@
|
|||
<template>
|
||||
<div>
|
||||
地图
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
|
||||
}
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
||||
</style>
|
||||
|
|
@ -1,22 +1,91 @@
|
|||
<template>
|
||||
<div>
|
||||
<TitleBox titleText="项目装备" @handleMore="handleMore" />
|
||||
<TitleBox titleText="项目装备" @handleMore="handleMore" style="margin-bottom: 16px" />
|
||||
<div class="top-box">
|
||||
<div class="top-1">
|
||||
<div class="img-box">
|
||||
<img src="@/assets/images/top3-1.png" flt="contain" alt="" />
|
||||
</div>
|
||||
<div class="num">
|
||||
{{ annualTotal }}
|
||||
<span class="unit-text">万元</span>
|
||||
</div>
|
||||
<div class="name">总投资额</div>
|
||||
</div>
|
||||
<div class="top-2">
|
||||
<div class="img-box">
|
||||
<img src="@/assets/images/top3-2.png" flt="contain" alt="" />
|
||||
</div>
|
||||
<div class="num">
|
||||
{{ projectNUm }}
|
||||
<span class="unit-text">个</span>
|
||||
</div>
|
||||
<div class="name">在建工程数</div>
|
||||
</div>
|
||||
<div class="top-3">
|
||||
<div class="img-box">
|
||||
<img src="@/assets/images/top3-4.png" flt="contain" alt="" />
|
||||
</div>
|
||||
<div class="num">
|
||||
{{ num }}
|
||||
<span class="unit-text">台</span>
|
||||
</div>
|
||||
<div class="name">在用装备数</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bottom-box">
|
||||
<div class="bt-1">
|
||||
<Gauge :value="proportion" />
|
||||
</div>
|
||||
<div class="bt-2">
|
||||
<div class="img-box">
|
||||
<img src="@/assets/images/top3-4.png" flt="contain" alt="" />
|
||||
</div>
|
||||
<div class="num">
|
||||
{{ turnoverRate }}
|
||||
<span class="unit-text">次/年</span>
|
||||
</div>
|
||||
<div class="name">周转率</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import TitleBox from '../TitleBox'
|
||||
import Gauge from './Gauge'
|
||||
|
||||
export default {
|
||||
name: 'Top3',
|
||||
components: {
|
||||
TitleBox,
|
||||
Gauge,
|
||||
},
|
||||
data() {
|
||||
return {}
|
||||
return {
|
||||
annualTotal: 0, // 年度总投资额
|
||||
projectNUm: 0, // 在建工程数
|
||||
num: 0, // 在用装备数
|
||||
turnoverRate: 0, // 周转率
|
||||
proportion: 0, // 在用率
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.getInfo()
|
||||
},
|
||||
mounted() {},
|
||||
methods: {
|
||||
async getInfo() {
|
||||
try {
|
||||
const res = await getProjectEquipmentApi()
|
||||
this.annualTotal = res.data.annualTotal
|
||||
this.projectNUm = res.data.projectNUm
|
||||
this.num = res.data.num
|
||||
this.turnoverRate = res.data.turnoverRate
|
||||
this.proportion = res.data.proportion || 0
|
||||
} catch (error) {
|
||||
console.log('🚀 ~ getInfo ~ error:', error)
|
||||
}
|
||||
},
|
||||
handleMore() {
|
||||
console.log('🚀 ~ methods.handleMore:')
|
||||
},
|
||||
|
|
@ -24,4 +93,70 @@ export default {
|
|||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped></style>
|
||||
<style lang="scss" scoped>
|
||||
.num {
|
||||
font-family: OPPOSans;
|
||||
font-size: 24px;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
.unit-text {
|
||||
font-family: Microsoft YaHei, Microsoft YaHei;
|
||||
font-weight: 400;
|
||||
font-size: 12px;
|
||||
color: #999;
|
||||
}
|
||||
.top-box {
|
||||
display: flex;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
.bottom-box {
|
||||
display: flex;
|
||||
}
|
||||
.top-1,
|
||||
.top-2,
|
||||
.top-3,
|
||||
.bt-2 {
|
||||
width: 137px;
|
||||
height: 203px;
|
||||
background: rgba(254, 175, 106, 0.1);
|
||||
box-shadow: 0px 3px 1px 0px #f3f0e9;
|
||||
border-radius: 5px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.top-1,
|
||||
.bt-1 {
|
||||
background: rgba(78, 172, 255, 0.1);
|
||||
box-shadow: 0px 3px 1px 0px #e9f0f3;
|
||||
}
|
||||
|
||||
.top-2 {
|
||||
margin: 0 10px;
|
||||
background: rgba(44, 186, 178, 0.1);
|
||||
box-shadow: 0px 3px 1px 0px #e9f0f3;
|
||||
}
|
||||
|
||||
.bt-1 {
|
||||
margin-right: 10px;
|
||||
width: 284px;
|
||||
height: 203px;
|
||||
border-radius: 5px;
|
||||
}
|
||||
.img-box {
|
||||
width: 54px;
|
||||
height: 54px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
.name {
|
||||
font-family: Microsoft YaHei, Microsoft YaHei;
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
color: #333;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
Loading…
Reference in New Issue