初次提交
This commit is contained in:
265
src/views/new-screen-zz/components/SwiperTable.vue
Normal file
265
src/views/new-screen-zz/components/SwiperTable.vue
Normal file
@ -0,0 +1,265 @@
|
||||
<template>
|
||||
<div
|
||||
class="table-wrapper"
|
||||
:style="{
|
||||
width: 'calc(' + widths.reduce((i, j) => `${i} + ${j}`) + ` + ${(widths.length - 1) * 6}px)`,
|
||||
height: `calc(${contentHeight}px + 48px)`
|
||||
}"
|
||||
>
|
||||
<div v-if="showHeader" class="table-header">
|
||||
<span v-show="isSort" :style="{ width: '60px' }">序号</span>
|
||||
<span v-for="(it, i) in titles" :key="i" :style="{ width: widths[i] === 'auto' ? 'auto' : widths[i] + 'px' }" :class="{'span-auto': widths[i] === 'auto'}">{{ titles[i] }}</span>
|
||||
</div>
|
||||
<div
|
||||
class="table-content"
|
||||
:style="{height:contentHeight+'px'}"
|
||||
>
|
||||
<swiper v-if="data.length > 0" ref="myBotSwiper" class="swiper" :options="swiperOption">
|
||||
<swiper-slide v-for="(row, rowIndex) in data" :key="rowIndex">
|
||||
<div
|
||||
class="table-row"
|
||||
:class="{ stripe: rowIndex % 2 === 1}"
|
||||
:style="{ height: tabelHeight }"
|
||||
@click="handleRowClick(row, rowIndex)"
|
||||
>
|
||||
<span
|
||||
v-show="isSort"
|
||||
:style="{ width: '60px', height: tabelHeight }"
|
||||
>{{ rowIndex+1 }}</span>
|
||||
<span
|
||||
v-for="(column, columnIndex) in columns"
|
||||
:key="columnIndex"
|
||||
:title="row[columnIndex]"
|
||||
:style="{ width: widths[columnIndex] === 'auto' ? 'auto' : widths[columnIndex] + 'px', height: tabelHeight }"
|
||||
:class="{'span-auto': widths[columnIndex] === 'auto','color-blue':column === 'efficiencyValue'}"
|
||||
>{{ row[column] }}</span>
|
||||
</div>
|
||||
</swiper-slide>
|
||||
</swiper>
|
||||
<div v-if="data.length === 0" style="height:100%;text-align:center; margin-top:40px;font-size:14px;color:#999">
|
||||
暂无数据
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import 'swiper/dist/css/swiper.css'
|
||||
import { swiper, swiperSlide } from 'vue-awesome-swiper'
|
||||
export default {
|
||||
name: 'SwiperTable',
|
||||
components: {
|
||||
swiper,
|
||||
swiperSlide
|
||||
},
|
||||
props: {
|
||||
// 传入的表格数据
|
||||
data: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
},
|
||||
// 传入的表格头
|
||||
titles: {
|
||||
type: Array,
|
||||
default: () => ['事件标题', '创建时间', '信息来源', '分类', '状态', '上报人']
|
||||
},
|
||||
// 表格的列宽
|
||||
widths: {
|
||||
type: Array,
|
||||
default: () => ['246px', '348px', '224px', '214px', '214px', '214px']
|
||||
},
|
||||
// 表格的高度
|
||||
contentHeight: {
|
||||
type: Number,
|
||||
default: 200
|
||||
},
|
||||
// 是否展示表格头
|
||||
showHeader: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
isSort: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
// 表格的行高
|
||||
tabelHeight: {
|
||||
type: String,
|
||||
default: '32px'
|
||||
},
|
||||
// 字段
|
||||
columns: {
|
||||
type: Array,
|
||||
default: () => ['title', 'createTime', 'info', 'type', 'status', 'upper']
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
currentActiveRow: 0,
|
||||
swiperOption: {
|
||||
autoHeight: true,
|
||||
direction: 'vertical',
|
||||
spaceBetween: 0,
|
||||
autoplay: {
|
||||
delay: 2500,
|
||||
disableOnInteraction: false,
|
||||
autoplayDisableOnInteraction: false
|
||||
},
|
||||
slidesPerView: 'auto',
|
||||
grabCursor: true,
|
||||
autoplayDisableOnInteraction: false,
|
||||
mousewheelControl: true
|
||||
}
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
myBotSwiper() {
|
||||
return this.$refs.myBotSwiper.$swiper
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
data: {
|
||||
handler(val) {
|
||||
this.currentActiveRow = 0
|
||||
// if (val && val.length > 0) {
|
||||
// this.columns = []
|
||||
// for (const key in val[0]) {
|
||||
// this.columns.push(key)
|
||||
// }
|
||||
// // this.swiperStart()
|
||||
// }
|
||||
},
|
||||
deep: true,
|
||||
immediate: true
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleRowClick(it, i) {
|
||||
this.currentActiveRow = i
|
||||
const currentIt = this.data[i]
|
||||
this.$emit('change', currentIt)
|
||||
},
|
||||
// 控制表格停止滚动
|
||||
swiperStop() {
|
||||
this.myBotSwiper.autoplay.stop()
|
||||
},
|
||||
// 控制表格开始滚动
|
||||
swiperStart() {
|
||||
this.myBotSwiper.autoplay.start()
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.table-wrapper {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
span {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.table-header {
|
||||
$height: 32px;
|
||||
width: 100%;
|
||||
height: $height;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
background: transparent;
|
||||
span {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: #9AD1FD;
|
||||
font-size: 14px;
|
||||
font-family: Microsoft YaHei-Regular, Microsoft YaHei;
|
||||
font-weight: 400;
|
||||
line-height: $height;
|
||||
&:nth-child(2) {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
}
|
||||
.span-auto {
|
||||
flex: 1;
|
||||
}
|
||||
span + span {
|
||||
margin-left: 2px;
|
||||
}
|
||||
}
|
||||
.table-content {
|
||||
width: 100%;
|
||||
margin-top: 2px;
|
||||
.swiper {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
.table-row {
|
||||
width: 100%;
|
||||
height: 36px;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
&.active {
|
||||
border: 2px solid rgba(0, 148, 255, 0.00);
|
||||
background: linear-gradient(90deg, rgba(0, 51, 81, 0.00) 0%, #003351 51.3%, rgba(0, 51, 81, 0.00) 100%);
|
||||
span {
|
||||
|
||||
color: #32AAFF;
|
||||
font-size: 14px;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
&.stripe span {
|
||||
background:#00131B;
|
||||
}
|
||||
span {
|
||||
font-size: 14px;
|
||||
font-family: PingFangSC-Regular, PingFang SC;
|
||||
font-weight: 400;
|
||||
color: #E6F4FE;
|
||||
line-height: 36px;
|
||||
}
|
||||
.span-auto {
|
||||
flex: 1;
|
||||
}
|
||||
// span + span {
|
||||
// margin-left: 2px;
|
||||
// }
|
||||
}
|
||||
}
|
||||
}
|
||||
span {
|
||||
height: 100%;
|
||||
line-height: 100%;
|
||||
display: inline-block;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
margin-bottom: 6px;
|
||||
&:nth-child(1) {
|
||||
width: 246px;
|
||||
}
|
||||
&:nth-child(2) {
|
||||
width: 348px;
|
||||
|
||||
padding-left: 13px;
|
||||
}
|
||||
&:nth-child(3) {
|
||||
text-align: center;
|
||||
|
||||
width: 214px;
|
||||
}
|
||||
&:nth-child(4) {
|
||||
text-align: center;
|
||||
|
||||
width: 214px;
|
||||
}
|
||||
&:nth-child(5) {
|
||||
width: 214px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.color-blue{
|
||||
color: #0089FB !important;
|
||||
}
|
||||
</style>
|
||||
292
src/views/new-screen-zz/components/SwiperTableAlarm.vue
Normal file
292
src/views/new-screen-zz/components/SwiperTableAlarm.vue
Normal file
@ -0,0 +1,292 @@
|
||||
<template>
|
||||
<div
|
||||
class="table-wrapper"
|
||||
:style="{
|
||||
width: 'calc(' + widths.reduce((i, j) => `${i} + ${j}`) + ` + ${(widths.length - 1) * 6}px)`,
|
||||
|
||||
}"
|
||||
>
|
||||
<div v-if="showHeader" class="table-header">
|
||||
<span v-show="isSort" :style="{ width: '60px' }">序号</span>
|
||||
<span v-for="(it, i) in titles" :key="i" :style="{ width: widths[i] === 'auto' ? 'auto' : widths[i] + 'px' }" :class="{'span-auto': widths[i] === 'auto'}">{{ titles[i] }}</span>
|
||||
</div>
|
||||
<div
|
||||
class="table-content"
|
||||
:style="{height:contentHeight+'px'}"
|
||||
>
|
||||
<swiper v-if="data.length > 0" ref="myBotSwiper" class="swiper" :options="swiperOption">
|
||||
<swiper-slide v-for="(row, rowIndex) in data" :key="rowIndex">
|
||||
<div
|
||||
class="table-row "
|
||||
:style="{ height: tabelHeight,'border-color':alarmList.find(i=>i.level === row.eventLevel)?alarmList.find(i=>i.level === row.eventLevel).color :'#fff'}"
|
||||
@click="handleRowClick(row, rowIndex)"
|
||||
>
|
||||
<div class="tip-box" :style="{color:alarmList.find(i=>i.level === row.eventLevel) ? alarmList.find(i=>i.level === row.eventLevel).color :'#fff'}">{{ alarmList.find(i=>i.level === row.eventLevel)? alarmList.find(i=>i.level === row.eventLevel).label :'' }}</div>
|
||||
<div
|
||||
v-for="(column, columnIndex) in columns"
|
||||
:key="columnIndex"
|
||||
:title="row[columnIndex]"
|
||||
:style="{ width: widths[columnIndex] === 'auto' ? 'auto' : widths[columnIndex] + 'px', height: tabelHeight }"
|
||||
:class="{'span-auto': widths[columnIndex] === 'auto'}"
|
||||
>{{ column === 'timeStamp' ?parseTime( row[column]) : row[column] }}</div>
|
||||
</div>
|
||||
</swiper-slide>
|
||||
</swiper>
|
||||
<div v-if="data.length === 0" style="height:100%;text-align:center; margin-top:40px;font-size:14px;color:#999">
|
||||
暂无数据
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import 'swiper/dist/css/swiper.css'
|
||||
import { parseTime } from '@/utils/index'
|
||||
import { swiper, swiperSlide } from 'vue-awesome-swiper'
|
||||
export default {
|
||||
name: 'SwiperTable',
|
||||
components: {
|
||||
swiper,
|
||||
swiperSlide
|
||||
},
|
||||
props: {
|
||||
// 传入的表格数据
|
||||
data: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
},
|
||||
// 传入的表格头
|
||||
titles: {
|
||||
type: Array,
|
||||
default: () => ['事件标题', '创建时间', '信息来源', '分类', '状态', '上报人']
|
||||
},
|
||||
// 表格的列宽
|
||||
widths: {
|
||||
type: Array,
|
||||
default: () => ['246px', '348px', '224px', '214px', '214px', '214px']
|
||||
},
|
||||
// 表格的高度
|
||||
contentHeight: {
|
||||
type: Number,
|
||||
default: 200
|
||||
},
|
||||
// 是否展示表格头
|
||||
showHeader: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
isSort: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
// 表格的行高
|
||||
tabelHeight: {
|
||||
type: String,
|
||||
default: '40px'
|
||||
},
|
||||
// 字段
|
||||
columns: {
|
||||
type: Array,
|
||||
default: () => ['title', 'createTime', 'info', 'type', 'status', 'upper']
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
alarmList: [{
|
||||
level: 1,
|
||||
label: '事故',
|
||||
color: '#CF0000'
|
||||
},
|
||||
{
|
||||
level: 2,
|
||||
label: '故障',
|
||||
color: '#FDA934'
|
||||
|
||||
},
|
||||
{
|
||||
level: 3,
|
||||
label: '告警',
|
||||
color: '#0089FB'
|
||||
},
|
||||
{
|
||||
level: 4,
|
||||
label: '提示',
|
||||
color: '#0089FB'
|
||||
|
||||
},
|
||||
{
|
||||
level: 5,
|
||||
label: '告知',
|
||||
color: '#0089FB'
|
||||
|
||||
}
|
||||
],
|
||||
currentActiveRow: 0,
|
||||
swiperOption: {
|
||||
autoHeight: true,
|
||||
direction: 'vertical',
|
||||
spaceBetween: 0,
|
||||
autoplay: {
|
||||
delay: 2500,
|
||||
disableOnInteraction: false,
|
||||
autoplayDisableOnInteraction: false
|
||||
},
|
||||
slidesPerView: 'auto',
|
||||
grabCursor: true,
|
||||
autoplayDisableOnInteraction: false,
|
||||
mousewheelControl: true
|
||||
}
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
myBotSwiper() {
|
||||
return this.$refs.myBotSwiper.$swiper
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
data: {
|
||||
handler(val) {
|
||||
this.currentActiveRow = 0
|
||||
// if (val && val.length > 0) {
|
||||
// this.columns = []
|
||||
// for (const key in val[0]) {
|
||||
// this.columns.push(key)
|
||||
// }
|
||||
// // this.swiperStart()
|
||||
// }
|
||||
},
|
||||
deep: true,
|
||||
immediate: true
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
parseTime,
|
||||
handleRowClick(it, i) {
|
||||
this.currentActiveRow = i
|
||||
const currentIt = this.data[i]
|
||||
this.$emit('change', currentIt)
|
||||
},
|
||||
// 控制表格停止滚动
|
||||
swiperStop() {
|
||||
this.myBotSwiper.autoplay.stop()
|
||||
},
|
||||
// 控制表格开始滚动
|
||||
swiperStart() {
|
||||
this.myBotSwiper.autoplay.start()
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.table-wrapper {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
span {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.table-header {
|
||||
$height: 32px;
|
||||
width: 100%;
|
||||
height: $height;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
background: transparent;
|
||||
span {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: #9AD1FD;
|
||||
font-size: 14px;
|
||||
font-family: Microsoft YaHei-Regular, Microsoft YaHei;
|
||||
font-weight: 400;
|
||||
line-height: $height;
|
||||
&:nth-child(2) {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
}
|
||||
.span-auto {
|
||||
flex: 1;
|
||||
}
|
||||
span + span {
|
||||
margin-left: 2px;
|
||||
}
|
||||
}
|
||||
.table-content {
|
||||
width: 100%;
|
||||
margin-top: 2px;
|
||||
.swiper {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
.table-row {
|
||||
width: calc(100% - 2px);
|
||||
height: 40px;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
margin-bottom: 20px;
|
||||
padding: 0 10px;
|
||||
border-width: 1px;
|
||||
border-style: solid;
|
||||
box-sizing: border-box;
|
||||
div {
|
||||
font-size: 14px;
|
||||
font-family: PingFangSC-Regular, PingFang SC;
|
||||
font-weight: 400;
|
||||
color: #E6F4FE;
|
||||
line-height: 36px;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
.span-auto {
|
||||
flex: 1;
|
||||
}
|
||||
div + div {
|
||||
margin-left: 2px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
span {
|
||||
height: 100%;
|
||||
line-height: 100%;
|
||||
display: inline-block;
|
||||
text-align: center;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
margin-bottom: 6px;
|
||||
&:nth-child(1) {
|
||||
width: 246px;
|
||||
}
|
||||
&:nth-child(2) {
|
||||
width: 348px;
|
||||
padding-left: 13px;
|
||||
}
|
||||
&:nth-child(3) {
|
||||
width: 214px;
|
||||
}
|
||||
&:nth-child(4) {
|
||||
width: 214px;
|
||||
}
|
||||
&:nth-child(5) {
|
||||
width: 214px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.tip-box{
|
||||
font-size: 12px !important;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
line-height: 16px !important; /* 133.333% */
|
||||
letter-spacing: 0.6px;
|
||||
writing-mode: tb-rl !important;
|
||||
margin-right: 10px;
|
||||
|
||||
}
|
||||
|
||||
</style>
|
||||
296
src/views/new-screen-zz/components/SwiperTableCenter.vue
Normal file
296
src/views/new-screen-zz/components/SwiperTableCenter.vue
Normal file
@ -0,0 +1,296 @@
|
||||
<!-- eslint-disable vue/no-parsing-error -->
|
||||
<template>
|
||||
<div
|
||||
class="table-wrapper"
|
||||
:style="{
|
||||
width: 'calc(' + widths.reduce((i, j) => `${i} + ${j}`) + ` + ${(widths.length - 1) * 6}px)`,
|
||||
|
||||
}"
|
||||
>
|
||||
<div v-if="showHeader" class="table-header">
|
||||
<span v-show="isSort" :style="{ width: '60px' }">序号</span>
|
||||
<span v-for="(it, i) in titles" :key="i" :style="{ width: widths[i] === 'auto' ? 'auto' : widths[i] + 'px' }" :class="{'span-auto': widths[i] === 'auto'}">{{ titles[i] }}</span>
|
||||
</div>
|
||||
<div
|
||||
class="table-content"
|
||||
:style="{height:contentHeight+'px'}"
|
||||
>
|
||||
<swiper v-if="data.length > 0" ref="myBotSwiper" class="swiper" :options="swiperOption">
|
||||
<swiper-slide v-for="(row, rowIndex) in data" :key="rowIndex">
|
||||
<div
|
||||
class="table-row"
|
||||
:style="{ height: tabelHeight }"
|
||||
@click="handleRowClick(row, rowIndex)"
|
||||
>
|
||||
<img :src="screenRightCenterBg" class="row-bg">
|
||||
|
||||
<div
|
||||
v-show="isSort"
|
||||
class="sort-box"
|
||||
:style="{ width: '60px', height: tabelHeight,'margin-left':'20px' }"
|
||||
>
|
||||
<img v-if="rowIndex === 0" :src="one">
|
||||
<img v-else-if="rowIndex === 1" :src="two">
|
||||
<img v-else-if="rowIndex === 2" :src="three">
|
||||
|
||||
<div v-else class="sort-box" :style="{ width: '100%', height: tabelHeight }"> {{ rowIndex < 9 ?'0' :'' }}{{ rowIndex +1 }}</div>
|
||||
</div>
|
||||
<span
|
||||
v-for="(column, columnIndex) in columns"
|
||||
:key="columnIndex"
|
||||
:title="row[columnIndex]"
|
||||
:style="{ width: widths[columnIndex] === 'auto' ? 'auto' : widths[columnIndex] + 'px' }"
|
||||
:class="{'span-auto': widths[columnIndex] === 'auto'}"
|
||||
>{{ row[column] }}</span>
|
||||
</div>
|
||||
</swiper-slide>
|
||||
</swiper>
|
||||
<div v-if="data.length === 0" style="height:100%;text-align:center; margin-top:40px;font-size:14px;color:#999">
|
||||
暂无数据
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import 'swiper/dist/css/swiper.css'
|
||||
import one from '@/assets/new-screen/one.png'
|
||||
import two from '@/assets/new-screen/two.png'
|
||||
import three from '@/assets/new-screen/three.png'
|
||||
import { swiper, swiperSlide } from 'vue-awesome-swiper'
|
||||
import screenRightCenterBg from '@/assets/new-screen/screenRightCenterBg.png'
|
||||
export default {
|
||||
name: 'SwiperTable',
|
||||
components: {
|
||||
swiper,
|
||||
swiperSlide
|
||||
},
|
||||
props: {
|
||||
// 传入的表格数据
|
||||
data: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
},
|
||||
// 传入的表格头
|
||||
titles: {
|
||||
type: Array,
|
||||
default: () => ['事件标题', '创建时间', '信息来源', '分类', '状态', '上报人']
|
||||
},
|
||||
// 表格的列宽
|
||||
widths: {
|
||||
type: Array,
|
||||
default: () => ['246px', '348px', '224px', '214px', '214px', '214px']
|
||||
},
|
||||
// 表格的高度
|
||||
contentHeight: {
|
||||
type: Number,
|
||||
default: 200
|
||||
},
|
||||
// 是否展示表格头
|
||||
showHeader: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
isSort: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
// 表格的行高
|
||||
tabelHeight: {
|
||||
type: String,
|
||||
default: '32px'
|
||||
},
|
||||
// 字段
|
||||
columns: {
|
||||
type: Array,
|
||||
default: () => ['title', 'createTime', 'info', 'type', 'status', 'upper']
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
one,
|
||||
two,
|
||||
three,
|
||||
screenRightCenterBg,
|
||||
currentActiveRow: 0,
|
||||
swiperOption: {
|
||||
autoHeight: true,
|
||||
direction: 'vertical',
|
||||
spaceBetween: 0,
|
||||
autoplay: {
|
||||
delay: 2500,
|
||||
disableOnInteraction: false,
|
||||
autoplayDisableOnInteraction: false
|
||||
},
|
||||
slidesPerView: 'auto',
|
||||
grabCursor: true,
|
||||
autoplayDisableOnInteraction: false,
|
||||
mousewheelControl: true
|
||||
}
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
myBotSwiper() {
|
||||
return this.$refs.myBotSwiper.$swiper
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
data: {
|
||||
handler(val) {
|
||||
this.currentActiveRow = 0
|
||||
// if (val && val.length > 0) {
|
||||
// this.columns = []
|
||||
// for (const key in val[0]) {
|
||||
// this.columns.push(key)
|
||||
// }
|
||||
// // this.swiperStart()
|
||||
// }
|
||||
},
|
||||
deep: true,
|
||||
immediate: true
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleRowClick(it, i) {
|
||||
this.currentActiveRow = i
|
||||
const currentIt = this.data[i]
|
||||
this.$emit('change', currentIt)
|
||||
},
|
||||
// 控制表格停止滚动
|
||||
swiperStop() {
|
||||
this.myBotSwiper.autoplay.stop()
|
||||
},
|
||||
// 控制表格开始滚动
|
||||
swiperStart() {
|
||||
this.myBotSwiper.autoplay.start()
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.table-wrapper {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
span {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.table-header {
|
||||
$height: 32px;
|
||||
width: 100%;
|
||||
height: $height;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
background: transparent;
|
||||
span {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: #fff;
|
||||
font-size: 14px;
|
||||
font-family: Microsoft YaHei-Regular, Microsoft YaHei;
|
||||
font-weight: 400;
|
||||
line-height: $height;
|
||||
&:nth-child(2) {
|
||||
// text-align: center;
|
||||
}
|
||||
|
||||
}
|
||||
.span-auto {
|
||||
flex: 1;
|
||||
}
|
||||
span + span {
|
||||
margin-left: 2px;
|
||||
}
|
||||
}
|
||||
.table-content {
|
||||
width: 100%;
|
||||
margin-top: 2px;
|
||||
.swiper {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
.table-row {
|
||||
width: 100%;
|
||||
height: 36px;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
.row-bg{
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
width: 386px;
|
||||
height: auto;
|
||||
}
|
||||
&.active {
|
||||
border: 2px solid rgba(0, 148, 255, 0.00);
|
||||
background: linear-gradient(90deg, rgba(0, 51, 81, 0.00) 0%, #003351 51.3%, rgba(0, 51, 81, 0.00) 100%);
|
||||
span {
|
||||
|
||||
color: #32AAFF;
|
||||
font-size: 14px;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
&.stripe span {
|
||||
background: rgba(2, 74, 123, 0.2);
|
||||
}
|
||||
span {
|
||||
font-size: 14px;
|
||||
font-family: PingFangSC-Regular, PingFang SC;
|
||||
font-weight: 400;
|
||||
color: #E6F4FE;
|
||||
line-height: 36px;
|
||||
}
|
||||
.span-auto {
|
||||
flex: 1;
|
||||
}
|
||||
// span + span {
|
||||
// margin-left: 2px;
|
||||
// }
|
||||
}
|
||||
}
|
||||
}
|
||||
span {
|
||||
display: inline-block;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-align: center;
|
||||
|
||||
text-overflow: ellipsis;
|
||||
margin-bottom: 6px;
|
||||
&:nth-child(1) {
|
||||
width: 246px;
|
||||
}
|
||||
&:nth-child(2) {
|
||||
width: 348px;
|
||||
padding-left: 13px;
|
||||
text-align: center;
|
||||
|
||||
}
|
||||
&:nth-child(3) {
|
||||
text-align: center;
|
||||
|
||||
width: 214px;
|
||||
}
|
||||
&:nth-child(4) {
|
||||
width: 214px;
|
||||
}
|
||||
&:nth-child(5) {
|
||||
width: 214px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.sort-box{
|
||||
color: #FAD733 !important;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
text-shadow: 0px 0px 1px #FAD733 !important;
|
||||
font-size: 16px !important;
|
||||
font-weight: 400;
|
||||
line-height: 36px;
|
||||
}
|
||||
</style>
|
||||
213
src/views/new-screen-zz/components/center-bottom.vue
Normal file
213
src/views/new-screen-zz/components/center-bottom.vue
Normal file
@ -0,0 +1,213 @@
|
||||
<template>
|
||||
<div class="center-bottom-warp">
|
||||
<item :title="'日充放电对比'">
|
||||
<dv-loading v-if="Loading">Loading...</dv-loading>
|
||||
<Chart v-else :options="options" />
|
||||
</item>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import item from './item-warp.vue'
|
||||
import { GetChargeDailyChart } from '@/api/screen/zzScreen'
|
||||
import dayChargeIcon from '../../../assets/new-screen/dayCharge-icon.png'
|
||||
import dayDischargeIcon from '../../../assets/new-screen/dayDischarge-icon.png'
|
||||
export default {
|
||||
components: { item },
|
||||
data() {
|
||||
return {
|
||||
options: {},
|
||||
Loading: true
|
||||
}
|
||||
},
|
||||
created() {
|
||||
|
||||
},
|
||||
mounted() {
|
||||
|
||||
},
|
||||
methods: {
|
||||
async getData(deptId) {
|
||||
try {
|
||||
this.Loading = true
|
||||
const { data } = await GetChargeDailyChart({
|
||||
deptId: deptId
|
||||
})
|
||||
this.initChart(data)
|
||||
} catch (error) {
|
||||
console.log(error)
|
||||
} finally {
|
||||
this.Loading = false
|
||||
}
|
||||
|
||||
// data.splice(0, 3)
|
||||
},
|
||||
initChart(data) {
|
||||
if (data.length) {
|
||||
const x_data = []
|
||||
|
||||
const dayCharge = []
|
||||
const dayDischarge = []
|
||||
data.forEach((el) => {
|
||||
x_data.push(el.time)
|
||||
dayCharge.push(el.dayCharge)
|
||||
dayDischarge.push(el.dayDischarge)
|
||||
})
|
||||
this.options = {
|
||||
tooltip: {
|
||||
trigger: 'axis'
|
||||
},
|
||||
legend: {
|
||||
orient: 'horizontal',
|
||||
right: 30,
|
||||
itemWidth: 14,
|
||||
data: [
|
||||
{ icon: 'image://' + dayChargeIcon, name: '充电' },
|
||||
{ icon: 'image://' + dayDischargeIcon, name: '放电' }
|
||||
]
|
||||
|
||||
},
|
||||
|
||||
grid: {
|
||||
left: '5%',
|
||||
top: '13%',
|
||||
right: '5%',
|
||||
bottom: '10%'
|
||||
},
|
||||
xAxis: [{
|
||||
data: x_data,
|
||||
axisLabel: {
|
||||
textStyle: {
|
||||
color: '#6E7174'
|
||||
},
|
||||
margin: 10 // 刻度标签与轴线之间的距离。
|
||||
},
|
||||
|
||||
axisLine: {
|
||||
show: false // 不显示x轴
|
||||
},
|
||||
axisTick: {
|
||||
show: false // 不显示刻度
|
||||
},
|
||||
boundaryGap: true,
|
||||
splitLine: {
|
||||
show: false,
|
||||
width: 0.08,
|
||||
lineStyle: {
|
||||
type: 'solid',
|
||||
color: '#03202E'
|
||||
}
|
||||
}
|
||||
}],
|
||||
yAxis: [{
|
||||
name: 'kWh',
|
||||
nameTextStyle: {
|
||||
color: '#6E7174',
|
||||
fontSize: 12,
|
||||
padding: [0, 0, 0, -40]
|
||||
},
|
||||
splitLine: {
|
||||
show: false,
|
||||
lineStyle: {
|
||||
color: '#eee',
|
||||
type: 'solid'
|
||||
}
|
||||
},
|
||||
axisTick: {
|
||||
show: false
|
||||
},
|
||||
axisLine: {
|
||||
show: false
|
||||
},
|
||||
axisLabel: {
|
||||
textStyle: {
|
||||
color: '#6E7174'
|
||||
}
|
||||
}
|
||||
}],
|
||||
series: [
|
||||
|
||||
// 柱体
|
||||
{
|
||||
name: '充电',
|
||||
type: 'bar',
|
||||
|
||||
barGap: '20%',
|
||||
barCategoryGap: '50%', /* 多个并排柱子设置柱子之间的间距*/
|
||||
itemStyle: {
|
||||
'normal': {
|
||||
'color': {
|
||||
'x': 0,
|
||||
'y': 0,
|
||||
'x2': 0,
|
||||
'y2': 1,
|
||||
'type': 'linear',
|
||||
'global': false,
|
||||
'colorStops': [{ // 第一节下面
|
||||
'offset': 0,
|
||||
'color': 'rgba(0, 243, 253, 1)'
|
||||
}, {
|
||||
'offset': 1,
|
||||
'color': 'rgba(0, 243, 253, 0.2)'
|
||||
}]
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
data: dayCharge
|
||||
},
|
||||
{
|
||||
name: '放电',
|
||||
type: 'bar',
|
||||
barGap: '20%',
|
||||
barCategoryGap: '50%', /* 多个并排柱子设置柱子之间的间距*/
|
||||
itemStyle: {
|
||||
'normal': {
|
||||
'color': {
|
||||
'x': 0,
|
||||
'y': 0,
|
||||
'x2': 0,
|
||||
'y2': 1,
|
||||
'type': 'linear',
|
||||
'global': false,
|
||||
'colorStops': [{ // 第一节下面
|
||||
'offset': 0,
|
||||
'color': 'rgba(253, 228, 0, 1)'
|
||||
}, {
|
||||
'offset': 1,
|
||||
'color': 'rgba(253, 228, 0, 0.2)'
|
||||
}]
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
data: dayDischarge
|
||||
}
|
||||
|
||||
]
|
||||
}
|
||||
} else {
|
||||
this.options = {
|
||||
title: {
|
||||
text: '暂无数据',
|
||||
x: 'center',
|
||||
y: 'center',
|
||||
textStyle: {
|
||||
fontSize: 14,
|
||||
color: 'rgb(153, 153, 153)',
|
||||
fontWeight: 'normal'
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.center-bottom-warp {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
</style>
|
||||
119
src/views/new-screen-zz/components/center-top.vue
Normal file
119
src/views/new-screen-zz/components/center-top.vue
Normal file
@ -0,0 +1,119 @@
|
||||
<template>
|
||||
<div class="center-top-warp">
|
||||
<div class="income">
|
||||
<div class="title">
|
||||
<span class="square" />
|
||||
<span>昨日收益</span>
|
||||
</div>
|
||||
<div class="value">
|
||||
<template v-for="(item,index) in info.yestProfit">
|
||||
<div :key="index" class="number">{{ item }}</div>
|
||||
</template>
|
||||
|
||||
<div class="unit">万元</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="income">
|
||||
<div class="title">
|
||||
<span class="square" />
|
||||
<span>年收益</span>
|
||||
</div>
|
||||
<div class="value">
|
||||
<template v-for="(item,index) in info.yearProfit">
|
||||
<div :key="index" class="number">{{ item }}</div>
|
||||
</template>
|
||||
|
||||
<div class="unit">万元</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="income">
|
||||
<div class="title">
|
||||
<span class="square" />
|
||||
<span>总收益</span>
|
||||
</div>
|
||||
<div class="value">
|
||||
<template v-for="(item,index) in info.totalProfit">
|
||||
<div :key="index" class="number">{{ item }}</div>
|
||||
</template>
|
||||
|
||||
<div class="unit">万元</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
info: {
|
||||
type: Object,
|
||||
default: () => null
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
number: '1234.5'
|
||||
}
|
||||
},
|
||||
created() {
|
||||
|
||||
},
|
||||
mounted() {
|
||||
this.getData()
|
||||
},
|
||||
methods: {
|
||||
getData() {}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.center-top-warp {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
|
||||
.income {
|
||||
height: 100%;
|
||||
padding-top: 15px;
|
||||
z-index: 99999;
|
||||
.title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.square {
|
||||
display: inline-block;
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
border-radius: 50%;
|
||||
background: rgba(0, 137, 251, 1);
|
||||
margin-right: 10px;
|
||||
}
|
||||
}
|
||||
.value {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.number {
|
||||
width: 36px;
|
||||
height: 44px;
|
||||
line-height: 44px;
|
||||
background: url(../../../assets/new-screen/num-bg.png);
|
||||
color: #fff;
|
||||
font-family: LCD;
|
||||
font-size: 32px;
|
||||
text-align: center;
|
||||
font-style: normal;
|
||||
font-weight: 700;
|
||||
margin-right: 5px;
|
||||
margin-top: 10px;
|
||||
}
|
||||
.unit{
|
||||
margin-top: 10px;
|
||||
height: 44px;
|
||||
line-height: 77px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
51
src/views/new-screen-zz/components/item-warp.vue
Normal file
51
src/views/new-screen-zz/components/item-warp.vue
Normal file
@ -0,0 +1,51 @@
|
||||
<template>
|
||||
<div class="item-warp">
|
||||
<div class="item-bg">
|
||||
<div class="item-title">{{ title }}</div>
|
||||
</div>
|
||||
|
||||
<div class="item-content">
|
||||
<slot />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
title: {
|
||||
type: String,
|
||||
default: '集团数据'
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.item-warp {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
.item-bg {
|
||||
width: 385px;
|
||||
height: 40px;
|
||||
background: url(../../../assets/new-screen/item-bg.png) no-repeat;
|
||||
background-size: 100% 75%;
|
||||
background-position:0 10px;
|
||||
padding-left: 12px;
|
||||
.item-title{
|
||||
font-size: 16px;
|
||||
color: #CCE8FE;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.item-content {
|
||||
width: 100%;
|
||||
height: calc(100% - 41px);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
138
src/views/new-screen-zz/components/left-bottom.vue
Normal file
138
src/views/new-screen-zz/components/left-bottom.vue
Normal file
@ -0,0 +1,138 @@
|
||||
<template>
|
||||
<div class="left-bottom-warp">
|
||||
<item title="节能减排">
|
||||
<dv-loading v-if="loading">Loading...</dv-loading>
|
||||
<div v-else class="top-all-box">
|
||||
<div class="top-con-box">
|
||||
<div class="top-item-box">
|
||||
<div class="data">{{ info.treePlanting }}<span class="unit">棵</span></div>
|
||||
<div class="title">等效植树量</div>
|
||||
<img :src="screenItemBg" class="item-bg-img">
|
||||
</div>
|
||||
<div class="top-item-box">
|
||||
<div class="data">{{ info.reductionCO2 | kgFormat }}<span class="unit">{{ info.reductionCO2 | KgUnitFormat }}</span></div>
|
||||
<div class="title">等效CO2减排</div>
|
||||
<img :src="screenItemBg" class="item-bg-img">
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="top-con-box">
|
||||
<div class="top-item-box">
|
||||
<div class="data">{{ info.equivalentCoal | kgFormat }}<span class="unit">{{ info.equivalentCoal | KgUnitFormat }}</span></div>
|
||||
<div class="title">等效节约煤</div>
|
||||
<img :src="screenItemBg" class="item-bg-img">
|
||||
</div>
|
||||
<div class="top-item-box">
|
||||
<div class="data">{{ info.income | moneyFormat }}<span class="unit">{{ info.income | moneyUnitFormat }}</span></div>
|
||||
<div class="title">等效经济收入</div>
|
||||
<img :src="screenItemBg" class="item-bg-img">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</item>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import item from './item-warp.vue'
|
||||
import screenItemBg from '@/assets/new-screen/screen-item-bg.png'
|
||||
import { GetEnergySaving } from '@/api/screen/zzScreen'
|
||||
export default {
|
||||
components: { item },
|
||||
data() {
|
||||
return {
|
||||
screenItemBg,
|
||||
loading: true,
|
||||
info: {
|
||||
treePlanting: null,
|
||||
reductionCO2: null,
|
||||
equivalentCoal: null,
|
||||
income: null
|
||||
}
|
||||
|
||||
}
|
||||
},
|
||||
created() {
|
||||
},
|
||||
mounted() {
|
||||
},
|
||||
|
||||
methods: {
|
||||
|
||||
async getData(deptId) {
|
||||
try {
|
||||
this.loading = true
|
||||
const { data } = await GetEnergySaving({
|
||||
deptId: deptId
|
||||
})
|
||||
this.info = data
|
||||
} catch (error) {
|
||||
// console.log(error);
|
||||
} finally {
|
||||
this.loading = false
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.left-bottom-warp {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
.top-all-box {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: space-around;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding: 10px 0;
|
||||
.top-con-box {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-around;
|
||||
width: 100%;
|
||||
|
||||
.top-item-box {
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
min-height: 110px;
|
||||
|
||||
.data {
|
||||
color: #F5FAFF;
|
||||
font-family: DIN;
|
||||
font-size: 24px;
|
||||
font-weight: 500;
|
||||
line-height: normal;
|
||||
}
|
||||
|
||||
.unit {
|
||||
color: #F5FAFF;
|
||||
font-family: DIN;
|
||||
font-size: 12px;
|
||||
line-height: normal;
|
||||
}
|
||||
|
||||
.title {
|
||||
color: #B7C1C9;
|
||||
font-size: 14px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
line-height: normal;
|
||||
}
|
||||
|
||||
.item-bg-img {
|
||||
width: 90px;
|
||||
height: auto;
|
||||
position: absolute;
|
||||
top: 38px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}</style>
|
||||
202
src/views/new-screen-zz/components/left-center.vue
Normal file
202
src/views/new-screen-zz/components/left-center.vue
Normal file
@ -0,0 +1,202 @@
|
||||
<template>
|
||||
<div class="left-center-warp">
|
||||
|
||||
<item :title="'电站区域分布'">
|
||||
<dv-loading v-if="loading">Loading...</dv-loading>
|
||||
<div v-else class="chart-box">
|
||||
<Chart :options="options" :class-name="'chart'" />
|
||||
</div></item>
|
||||
|
||||
</div>
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import item from './item-warp.vue'
|
||||
import { GetRegionalDistribution } from '@/api/screen/zzScreen'
|
||||
|
||||
export default {
|
||||
components: { item },
|
||||
data() {
|
||||
return {
|
||||
options: {},
|
||||
loading: true
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
async getData(deptId) {
|
||||
try {
|
||||
this.loading = true
|
||||
const res = await GetRegionalDistribution({
|
||||
deptId: deptId
|
||||
})
|
||||
this.initChart(res.data)
|
||||
} catch (error) {
|
||||
console.log(error)
|
||||
} finally {
|
||||
this.loading = false
|
||||
}
|
||||
},
|
||||
initChart(val) {
|
||||
if (val.length) {
|
||||
val.sort((a, b) => b.regionValue - a.regionValue)
|
||||
|
||||
var ydata = []
|
||||
var legend = []
|
||||
val.forEach(i => {
|
||||
const param = {
|
||||
name: i.addName,
|
||||
value: i.regionValue
|
||||
}
|
||||
legend.push(param.name)
|
||||
ydata.push(param)
|
||||
})
|
||||
const count = this.arrCount(ydata)
|
||||
this.options = {
|
||||
title: [{
|
||||
text: '电站总数',
|
||||
subtext: count,
|
||||
|
||||
subtextStyle: {
|
||||
color: '#fff',
|
||||
fontSize: 37,
|
||||
fontWeight: 500
|
||||
|
||||
},
|
||||
|
||||
left: '35%',
|
||||
top: '40%',
|
||||
padding: [0, 0],
|
||||
textStyle: {
|
||||
color: '#fff',
|
||||
fontSize: 18
|
||||
},
|
||||
textAlign: 'center'
|
||||
|
||||
}],
|
||||
tooltip: {},
|
||||
legend: {
|
||||
type: 'scroll',
|
||||
orient: 'vertical',
|
||||
right: 10,
|
||||
top: 20,
|
||||
bottom: 20,
|
||||
padding: [0, 10],
|
||||
data: legend,
|
||||
icon: 'circle',
|
||||
align: 'left',
|
||||
itemWidth: 8,
|
||||
itemHeight: 8,
|
||||
itemGap: 15,
|
||||
textStyle: {
|
||||
color: '#fff',
|
||||
rich: {
|
||||
name: {
|
||||
fontSize: 12,
|
||||
color: '#ffffff',
|
||||
padding: [0, 10, 0, 0]
|
||||
},
|
||||
num: {
|
||||
fontSize: 16,
|
||||
color: '#ffffff'
|
||||
},
|
||||
unit: {
|
||||
fontSize: 16,
|
||||
color: '#ffffff'
|
||||
}
|
||||
}
|
||||
},
|
||||
formatter: function(name) {
|
||||
const val = ydata.filter(item => {
|
||||
return item.name === name
|
||||
})
|
||||
const num = (((val[0].value / count)) * 100).toFixed(2)
|
||||
return [
|
||||
`{name|${name.length > 5 ? name.slice(0, 2) : name}}`,
|
||||
`{num|${num}}{unit|%}`
|
||||
].join(' ')
|
||||
}
|
||||
|
||||
},
|
||||
series: [{
|
||||
name: '电站个数',
|
||||
type: 'pie',
|
||||
clockwise: false, // 饼图的扇区是否是顺时针排布
|
||||
minAngle: 20, // 最小的扇区角度（0 ~ 360）
|
||||
radius: ['60%', '75%'],
|
||||
center: ['35%', '50%'],
|
||||
avoidLabelOverlap: false,
|
||||
itemStyle: { // 图形样式
|
||||
normal: {
|
||||
borderColor: '#070A0C',
|
||||
borderWidth: 5
|
||||
}
|
||||
},
|
||||
label: {
|
||||
normal: {
|
||||
show: false
|
||||
},
|
||||
emphasis: {
|
||||
show: false,
|
||||
position: 'outer',
|
||||
alignTo: 'edge',
|
||||
margin: 10,
|
||||
formatter: '{text|{b}}\n{value|{d}%}',
|
||||
rich: {
|
||||
text: {
|
||||
fontSize: 14,
|
||||
align: 'center',
|
||||
verticalAlign: 'middle',
|
||||
padding: 5
|
||||
},
|
||||
value: {
|
||||
fontSize: 24,
|
||||
align: 'center',
|
||||
verticalAlign: 'middle'
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
data: ydata
|
||||
}]
|
||||
}
|
||||
} else {
|
||||
this.options = {
|
||||
title: {
|
||||
text: '暂无数据',
|
||||
x: 'center',
|
||||
y: 'center',
|
||||
textStyle: {
|
||||
fontSize: 14,
|
||||
color: 'rgb(153, 153, 153)',
|
||||
fontWeight: 'normal'
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
arrCount(arr) {
|
||||
let count = 0
|
||||
arr.forEach(item => {
|
||||
count = count + item.value
|
||||
})
|
||||
return count
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.left-center-warp {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
.chart-box {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
}
|
||||
</style>
|
||||
140
src/views/new-screen-zz/components/left-top.vue
Normal file
140
src/views/new-screen-zz/components/left-top.vue
Normal file
@ -0,0 +1,140 @@
|
||||
<template>
|
||||
<div class="left-top-warp">
|
||||
<item>
|
||||
<dv-loading v-if="loading">Loading...</dv-loading>
|
||||
<div v-else class="top-all-box">
|
||||
<div class="value-box">
|
||||
<div class="title">装机容量</div>
|
||||
<div class="value">{{ info.capacity |kwhFormat }}</div>
|
||||
<div class="unit">{{ info.capacity | kwhUnitFormat }}</div>
|
||||
</div>
|
||||
<div class="value-box">
|
||||
<div class="title">电站个数</div>
|
||||
<div class="value">{{ info.stationNumber }}</div>
|
||||
<div class="unit">个</div>
|
||||
</div>
|
||||
<div class="value-box">
|
||||
<div class="title">{{ $t('dashboard.dailyCharge') }}</div>
|
||||
<div class="value">{{ info.dayCharge |kwhFormat }}</div>
|
||||
<div class="unit">{{ info.dayCharge |kwhUnitFormat }}</div>
|
||||
</div>
|
||||
<div class="value-box">
|
||||
<div class="title">{{ $t('dashboard.dailyDischarge') }}</div>
|
||||
<div class="value">{{ info.dayDischarge |kwhFormat }}</div>
|
||||
<div class="unit">{{ info.dayDischarge |kwhUnitFormat }}</div>
|
||||
</div>
|
||||
<div class="value-box">
|
||||
<div class="title">年充电量</div>
|
||||
<div class="value">{{ info.yearCharge |kwhFormat }}</div>
|
||||
<div class="unit">{{ info.yearCharge |kwhUnitFormat }}</div>
|
||||
</div>
|
||||
<div class="value-box">
|
||||
<div class="title">年放电量</div>
|
||||
<div class="value">{{ info.yearDischarge |kwhFormat }}</div>
|
||||
<div class="unit">{{ info.yearDischarge |kwhUnitFormat }}</div>
|
||||
</div>
|
||||
<div class="value-box">
|
||||
<div class="title">总充电量</div>
|
||||
<div class="value">{{ info.totalCharge |kwhFormat }}</div>
|
||||
<div class="unit">{{ info.totalCharge |kwhUnitFormat }}</div>
|
||||
</div>
|
||||
<div class="value-box">
|
||||
<div class="title">{{ $t('dashboard.totalDischarge') }}</div>
|
||||
<div class="value">{{ info.totalDischarge |kwhFormat }}</div>
|
||||
<div class="unit">{{ info.totalDischarge |kwhUnitFormat }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</item>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import item from './item-warp.vue'
|
||||
|
||||
export default {
|
||||
components: { item },
|
||||
props: {
|
||||
info: {
|
||||
type: Object,
|
||||
default: () => null
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
loading: true
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
info: {
|
||||
handler(val) {
|
||||
console.log(1111, val)
|
||||
if (val) {
|
||||
this.loading = false
|
||||
} else {
|
||||
this.loading = true
|
||||
}
|
||||
},
|
||||
immediate: true,
|
||||
deep: true
|
||||
}
|
||||
},
|
||||
created() {
|
||||
},
|
||||
mounted() {
|
||||
this.getData()
|
||||
},
|
||||
|
||||
methods: {
|
||||
getData() {
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.left-top-warp {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
.top-all-box {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-around;
|
||||
flex-wrap: wrap;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding: 10px 0;
|
||||
.value-box{
|
||||
width: 50%;
|
||||
height: 32px;
|
||||
background: url(../../../assets/new-screen/top-left-bg.png)no-repeat;
|
||||
background-size: 120% 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.title{
|
||||
color: rgba(179, 221, 253, 1);
|
||||
padding-left: 16px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.value{
|
||||
color: rgba(255, 184, 0, 1);
|
||||
padding-left: 10px;
|
||||
min-width: 70px;
|
||||
max-width: 70px;
|
||||
text-align: right;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
.unit{
|
||||
color: rgba(183, 193, 201, 1);
|
||||
padding-right: 20px;
|
||||
padding-left: 5px;
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
397
src/views/new-screen-zz/components/map-center.vue
Normal file
397
src/views/new-screen-zz/components/map-center.vue
Normal file
@ -0,0 +1,397 @@
|
||||
<template>
|
||||
<div class="map-warp">
|
||||
<dv-loading v-if="loading">Loading...</dv-loading>
|
||||
<Chart v-else ref="chart" :options="options" @mapClick="mapClick" />
|
||||
<div class="map-left-box">
|
||||
<template v-for="(item,index) in tableData">
|
||||
<div :key="index" class="box-value">
|
||||
<span class="num">{{ index + 1 }}</span>
|
||||
<span class="name">{{ item.addName }}</span>
|
||||
<span class="value"><span style="min-width: 25px;display: inline-block;">{{ (item.stationCapacity / 1000).toFixed(2) }}</span>MWh</span>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import chinaMap from '@/assets/mapJson/chinaMap.json'
|
||||
import { chinaMapOutline } from '@/assets/mapJson/chinaMapOut.js'
|
||||
import blue from '../../../assets/new-screen/map-blue.png'
|
||||
import { GetStationInfo, GetCapacity, GetRegionalDistribution } from '@/api/screen/zzScreen'
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
options: {},
|
||||
pointData: [],
|
||||
pointIndex: 0,
|
||||
timer: null,
|
||||
currentToolTip: {},
|
||||
loading: true,
|
||||
tableData: [],
|
||||
mapData: [],
|
||||
stationNum: []
|
||||
}
|
||||
},
|
||||
destroyed() {
|
||||
clearInterval(this.timer)
|
||||
this.timer = null
|
||||
},
|
||||
methods: {
|
||||
mapClick(params) {
|
||||
if (params.seriesType === 'effectScatter' || params.name === '四川') {
|
||||
const routeParams = {
|
||||
url: '/dashboard-test/dashboard-test',
|
||||
urlName: 'dashboard-test',
|
||||
data: {
|
||||
id: params.data.id
|
||||
}
|
||||
}
|
||||
this.$store.dispatch('user/menuChange', routeParams)
|
||||
}
|
||||
},
|
||||
async getStationNum(deptId) {
|
||||
const { data } = await GetRegionalDistribution({
|
||||
deptId: deptId
|
||||
})
|
||||
this.mapData = data
|
||||
this.mapData.map((el) => {
|
||||
el.name = el.addName
|
||||
el.value = el.regionValue
|
||||
this.stationNum.push(el.value)
|
||||
})
|
||||
},
|
||||
async getLeftData(deptId) {
|
||||
try {
|
||||
const { data } = await GetCapacity({
|
||||
deptId: deptId
|
||||
})
|
||||
this.tableData = data
|
||||
} catch (error) {
|
||||
console.log(error)
|
||||
}
|
||||
},
|
||||
async getData(deptId) {
|
||||
this.loading = true
|
||||
try {
|
||||
const { data } = await GetStationInfo({
|
||||
deptId: deptId
|
||||
})
|
||||
console.log('GetStationInfo', data)
|
||||
const province = []
|
||||
if (data.length) {
|
||||
data.forEach((el) => {
|
||||
el.value = [el.latitude, el.longitude]
|
||||
el.symbol = 'image://' + blue
|
||||
el.cityCode = 1000
|
||||
province.push(el)
|
||||
})
|
||||
this.pointData = province
|
||||
} else {
|
||||
this.pointData = [{ symbol: 'image://' + blue, cityCode: 1000, value: [118.8062, 31.9208], name: '江苏' }]
|
||||
}
|
||||
} finally {
|
||||
this.loading = false
|
||||
}
|
||||
this.getInitMap()
|
||||
},
|
||||
getInitMap() {
|
||||
this.$echarts.registerMap('china', chinaMap)
|
||||
this.$echarts.registerMap('chinaMapOutline', chinaMapOutline)
|
||||
|
||||
var series = [
|
||||
{
|
||||
map: 'china',
|
||||
type: 'map',
|
||||
roam: false,
|
||||
zoom: 1.65,
|
||||
label: {
|
||||
normal: {
|
||||
show: false,
|
||||
textStyle: {
|
||||
color: '#fff'
|
||||
}
|
||||
},
|
||||
emphasis: {
|
||||
textStyle: {
|
||||
color: '#fff'
|
||||
}
|
||||
}
|
||||
},
|
||||
top: '29%',
|
||||
tooltip: {
|
||||
show: false
|
||||
},
|
||||
itemStyle: {
|
||||
normal: {
|
||||
areaColor: 'transparent',
|
||||
borderColor: 'rgba(21,138,246,100%)',
|
||||
borderWidth: 1
|
||||
},
|
||||
emphasis: {
|
||||
areaColor: '#0B63B0',
|
||||
textStyle: {
|
||||
color: 'red'
|
||||
}
|
||||
}
|
||||
},
|
||||
data: this.mapData
|
||||
},
|
||||
|
||||
{
|
||||
name: '散点',
|
||||
type: 'effectScatter',
|
||||
coordinateSystem: 'geo',
|
||||
rippleEffect: {
|
||||
color: 'purple', // 涟漪颜色,默认为散点自身颜色
|
||||
brushType: 'fill', // 动画方式,全填充或只有线条,'stroke'
|
||||
period: 4, // 动画周期
|
||||
scale: '0.5' // 涟漪规模
|
||||
},
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: '#F4E925',
|
||||
|
||||
shadowColor: '#333'
|
||||
}
|
||||
},
|
||||
symbolSize: 50,
|
||||
data: [this.pointData[this.pointIndex]]
|
||||
|
||||
// showEffectOn: 'render' // 加载完毕显示特效
|
||||
}
|
||||
]
|
||||
|
||||
this.options = {
|
||||
visualMap: {
|
||||
min: 0,
|
||||
max: Math.max(...this.stationNum),
|
||||
right: 'right',
|
||||
top: 'bottom',
|
||||
text: ['高(电站个数)', '低(电站个数)'],
|
||||
calculable: true,
|
||||
inRange: {
|
||||
// color: ['#5edfd6', '#37d4cf', '#14c9c9', '#0da5aa', '#07828b']
|
||||
// color: ['#fcf26b', '#fbe842', '#fadc19', '#cfaf0f', '#a38408']
|
||||
color: ['#6aa1ff', '#4080ff', '#165dff', '#0e42d2', '#072ca6', '#031a79']
|
||||
// color: ['#8d4eda', '#722ed1', '#551db0', '#3c108f', '#27066e']
|
||||
// color: ['#e13edb', '#d91ad9', '#b010b6', '#8a0993', '#650370']
|
||||
// color: ['#23c343', '#00b42a', '#009a29', '#008026', '#006622']
|
||||
|
||||
},
|
||||
textStyle: {
|
||||
color: '#F5FAFF'
|
||||
},
|
||||
seriesIndex: [0]
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'item',
|
||||
alwaysShowContent: true,
|
||||
backgroundColor: 'transparent',
|
||||
position: 'top',
|
||||
triggerOn: 'click',
|
||||
enterable: true,
|
||||
formatter: params => {
|
||||
// 获取xAxis data中的数据
|
||||
let dataStr = `<div></div>`
|
||||
dataStr += `<div>
|
||||
<span style="padding-left:10px;font-weight:bold;margin-left:20px;margin-top:5px;font-size="14px">${params.name}</span>
|
||||
</div>`
|
||||
dataStr += `<div style="margin-top:15px">
|
||||
<span style="padding-left:10px;">投运时间</span>
|
||||
<span style="margin-left:5px;margin-right:10px;color:rgba(245, 221, 0, 1);font-family:DIN;">${params.data.createTime}</span>
|
||||
</div>`
|
||||
dataStr += `<div style="margin-top:2px;">
|
||||
<span style="padding-left:10px;">装机容量</span>
|
||||
<span style="margin-left:5px;margin-right:5px;color:rgba(245, 221, 0, 1);font-family:DIN;">${params.data.capacity}</span>
|
||||
<span style="color:rgba(245, 221, 0, 1);">kWh</span>
|
||||
</div>`
|
||||
const div = `<div style='max-width:220px;height:85px;
|
||||
background-image:url(${require('../../../assets/new-screen/tooltip-bg.png')});background-repeat: no-repeat;background-size:100% 100%;' >${dataStr}</div>`
|
||||
return div
|
||||
}
|
||||
},
|
||||
color: ['#34c6bb'],
|
||||
geo: [
|
||||
{
|
||||
silent: true,
|
||||
map: 'chinaMapOutline',
|
||||
|
||||
zoom: 1.1,
|
||||
top: '10%',
|
||||
label: {
|
||||
normal: {
|
||||
show: false,
|
||||
textStyle: {
|
||||
color: '#fff'
|
||||
}
|
||||
},
|
||||
emphasis: {
|
||||
textStyle: {
|
||||
color: '#fff'
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
roam: false,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
areaColor: 'rgba(3,56,100,50%)',
|
||||
borderColor: 'transparent',
|
||||
borderWidth: 1.5,
|
||||
shadowColor: 'transparent',
|
||||
shadowOffsetX: 0,
|
||||
shadowOffsetY: 4,
|
||||
shadowBlur: 10
|
||||
},
|
||||
emphasis: {
|
||||
areaColor: 'transparent', // 悬浮背景
|
||||
textStyle: {
|
||||
color: '#fff'
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
},
|
||||
{
|
||||
silent: true,
|
||||
map: 'chinaMapOutline',
|
||||
|
||||
zoom: 1.1,
|
||||
top: '7%',
|
||||
label: {
|
||||
normal: {
|
||||
show: false,
|
||||
textStyle: {
|
||||
color: '#fff'
|
||||
}
|
||||
},
|
||||
emphasis: {
|
||||
textStyle: {
|
||||
color: '#fff'
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
roam: false,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
areaColor: 'rgba(1,28,50,100%)',
|
||||
borderColor: '#0089FB',
|
||||
borderWidth: 1.5,
|
||||
shadowColor: '#0089FB',
|
||||
shadowOffsetX: 0,
|
||||
shadowOffsetY: 4,
|
||||
shadowBlur: 15
|
||||
},
|
||||
emphasis: {
|
||||
areaColor: 'transparent', // 悬浮背景
|
||||
textStyle: {
|
||||
color: '#fff'
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}],
|
||||
series: series
|
||||
}
|
||||
|
||||
setTimeout(() => {
|
||||
this.$refs.chart?.chart.dispatchAction({
|
||||
type: 'showTip',
|
||||
seriesIndex: 1, // 针对series下第几个数据
|
||||
dataIndex: 0 // 第几个数据
|
||||
})
|
||||
}, 0)
|
||||
|
||||
if (!this.timer) {
|
||||
this.timer = setInterval(() => {
|
||||
this.pointIndex++
|
||||
if (this.pointIndex === this.pointData.length) {
|
||||
this.pointIndex = 0
|
||||
}
|
||||
this.getInitMap()
|
||||
}, 5000)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.map-warp {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
|
||||
.map-left-box{
|
||||
|
||||
width: 220px;
|
||||
height: 180px;
|
||||
// border: 1px solid;
|
||||
z-index: 9999999;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
bottom: 10px;
|
||||
overflow: auto;
|
||||
margin-right: 10px;
|
||||
|
||||
.box-value{
|
||||
|
||||
width: 100%;
|
||||
height: 24px;
|
||||
line-height: 24px;
|
||||
background-size: 100% 100%;
|
||||
background: url(../../../assets/new-screen/nomal-bg.png)no-repeat;
|
||||
background-size: 100% 100%;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-top: 10px;
|
||||
.num{
|
||||
width: 20px;
|
||||
font-size: 12px;
|
||||
padding-left: 20px;
|
||||
font-family: DIN;
|
||||
height: 24px;
|
||||
line-height: 24px;
|
||||
text-align: center;
|
||||
}
|
||||
.name{
|
||||
font-size: 12px;
|
||||
text-align: center;
|
||||
height: 24px;
|
||||
line-height: 24px;
|
||||
}
|
||||
.value{
|
||||
font-size: 12px;
|
||||
width: 80px;
|
||||
line-height: 24px;
|
||||
height: 24px;
|
||||
background: url(../../../assets/new-screen/select-bg.png)no-repeat;
|
||||
background-size: 100% 100%;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
.map-right-box{
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
border: 1px solid;
|
||||
z-index: 9999999;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
}
|
||||
}
|
||||
.box{
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
|
||||
}
|
||||
::v-deep *::-webkit-scrollbar{
|
||||
background-color: transparent!important;
|
||||
}
|
||||
::v-deep *::-webkit-scrollbar-thumb{
|
||||
background-color: transparent!important;
|
||||
}
|
||||
|
||||
</style>
|
||||
70
src/views/new-screen-zz/components/right-bottom.vue
Normal file
70
src/views/new-screen-zz/components/right-bottom.vue
Normal file
@ -0,0 +1,70 @@
|
||||
<template>
|
||||
<div class="left-bottom-warp">
|
||||
|
||||
<item title="系统转换效率">
|
||||
<dv-loading v-if="tableLoading">Loading...</dv-loading>
|
||||
<div v-else class="con-box">
|
||||
<SwiperTable
|
||||
:titles="tableTitles"
|
||||
:widths="widths"
|
||||
:content-height="contentHeight"
|
||||
:data="tableData"
|
||||
:columns="tableColumns"
|
||||
:is-sort="false"
|
||||
/>
|
||||
</div>
|
||||
</item>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import SwiperTable from './SwiperTable.vue'
|
||||
import { GetEfficiencyDate } from '@/api/screen/zzScreen'
|
||||
import item from './item-warp.vue'
|
||||
export default {
|
||||
components: { item, SwiperTable },
|
||||
data() {
|
||||
return {
|
||||
tableLoading: false,
|
||||
tableTitles: ['电站名称', '容量(kWh)', '转换效率(%)'],
|
||||
tableData: [],
|
||||
widths: ['200', 'auto', 'auto', 'auto'],
|
||||
contentHeight: 200,
|
||||
tableColumns: [
|
||||
'stationName',
|
||||
'stationCapacity',
|
||||
'efficiencyValue'
|
||||
]
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
},
|
||||
methods: {
|
||||
async getData(deptId) {
|
||||
try {
|
||||
this.tableLoading = true
|
||||
const res = await GetEfficiencyDate({
|
||||
deptId: deptId
|
||||
})
|
||||
this.tableData = res.data
|
||||
} finally {
|
||||
this.tableLoading = false
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.left-bottom-warp{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
.con-box{
|
||||
width: 100%;
|
||||
padding-top: 10px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
68
src/views/new-screen-zz/components/right-center.vue
Normal file
68
src/views/new-screen-zz/components/right-center.vue
Normal file
@ -0,0 +1,68 @@
|
||||
<template>
|
||||
<div class="right-top-warp">
|
||||
<item :title="'充放收益排名'">
|
||||
<dv-loading v-if="tableLoading">Loading...</dv-loading>
|
||||
<div v-else class="con-box">
|
||||
<SwiperTableCenter
|
||||
:titles="tableTitles"
|
||||
:widths="widths"
|
||||
:content-height="contentHeight"
|
||||
:data="tableData"
|
||||
:columns="tableColumns"
|
||||
:show-header="false"
|
||||
tabel-height="53px"
|
||||
/>
|
||||
</div>
|
||||
</item>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import item from './item-warp.vue'
|
||||
import SwiperTableCenter from './SwiperTableCenter.vue'
|
||||
import { GetRegionalIncomeDate } from '@/api/screen/zzScreen'
|
||||
export default {
|
||||
components: { item, SwiperTableCenter },
|
||||
data() {
|
||||
return {
|
||||
tableLoading: false,
|
||||
tableTitles: ['电站名称', '容量'],
|
||||
tableData: [],
|
||||
widths: ['auto', 'auto', 'auto', 'auto'],
|
||||
contentHeight: 220,
|
||||
tableColumns: [
|
||||
'stationName',
|
||||
'incomeValue'
|
||||
]
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
},
|
||||
methods: {
|
||||
async getData(deptId) {
|
||||
try {
|
||||
this.tableLoading = true
|
||||
const res = await GetRegionalIncomeDate({
|
||||
deptId: deptId
|
||||
})
|
||||
this.tableData = res.data
|
||||
this.tableData.map((el) => {
|
||||
el.incomeValue = el.incomeValue + '万元'
|
||||
})
|
||||
} finally {
|
||||
this.tableLoading = false
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.right-top-warp {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
.con-box{
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
244
src/views/new-screen-zz/components/right-top.vue
Normal file
244
src/views/new-screen-zz/components/right-top.vue
Normal file
@ -0,0 +1,244 @@
|
||||
<template>
|
||||
<div class="right-top-warp">
|
||||
<item title="集团收益">
|
||||
<div class="box">
|
||||
<div class="button-box">
|
||||
<el-tabs
|
||||
v-model="activeName"
|
||||
tab-position="top"
|
||||
@tab-click="handleClick"
|
||||
>
|
||||
<el-tab-pane label="近30天" name="day" />
|
||||
<el-tab-pane label="月度" name="month" />
|
||||
<el-tab-pane label="年度" name="year" />
|
||||
</el-tabs>
|
||||
</div>
|
||||
<div class="chart-box">
|
||||
<dv-loading v-if="loading">Loading...</dv-loading>
|
||||
<Chart v-else :options="options" />
|
||||
</div>
|
||||
</div>
|
||||
</item>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import item from './item-warp.vue'
|
||||
import { GetIncomeCurve } from '@/api/screen/zzScreen'
|
||||
export default {
|
||||
components: { item },
|
||||
props: {},
|
||||
|
||||
data() {
|
||||
return {
|
||||
loading: false,
|
||||
options: {},
|
||||
deptId: null,
|
||||
type: 'day',
|
||||
activeName: 'day'
|
||||
}
|
||||
},
|
||||
|
||||
mounted() {
|
||||
// this.getData()
|
||||
},
|
||||
methods: {
|
||||
handleClick() {
|
||||
this.getData(this.deptId)
|
||||
},
|
||||
|
||||
async getData(deptId) {
|
||||
this.deptId = deptId
|
||||
try {
|
||||
this.loading = true
|
||||
const { data } = await GetIncomeCurve({ type: this.activeName, deptId: deptId })
|
||||
this.initChart(data)
|
||||
} catch (error) {
|
||||
console.log(error)
|
||||
} finally {
|
||||
this.loading = false
|
||||
}
|
||||
},
|
||||
initChart(val) {
|
||||
if (val.length) {
|
||||
const x_data = []
|
||||
const profit_data = []
|
||||
val.forEach((el) => {
|
||||
x_data.push(el.time)
|
||||
profit_data.push(el.profit)
|
||||
})
|
||||
this.options = {
|
||||
// backgroundColor: '#072685',
|
||||
grid: {
|
||||
left: '10%',
|
||||
top: '15%',
|
||||
right: '5%',
|
||||
bottom: '10%'
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'axis'
|
||||
},
|
||||
xAxis: [
|
||||
{
|
||||
data: x_data,
|
||||
axisLabel: {
|
||||
textStyle: {
|
||||
color: '#6E7174'
|
||||
},
|
||||
margin: 10 // 刻度标签与轴线之间的距离。
|
||||
},
|
||||
|
||||
axisLine: {
|
||||
show: false // 不显示x轴
|
||||
},
|
||||
axisTick: {
|
||||
show: false // 不显示刻度
|
||||
},
|
||||
boundaryGap: true,
|
||||
splitLine: {
|
||||
show: false,
|
||||
width: 0.08,
|
||||
lineStyle: {
|
||||
type: 'solid',
|
||||
color: '#03202E'
|
||||
}
|
||||
}
|
||||
}
|
||||
],
|
||||
yAxis: [
|
||||
{
|
||||
type: 'value',
|
||||
name: '万元',
|
||||
nameTextStyle: {
|
||||
color: '#6E7174',
|
||||
fontSize: 12,
|
||||
padding: [0, 0, 0, -40]
|
||||
},
|
||||
|
||||
splitLine: {
|
||||
show: false,
|
||||
lineStyle: {
|
||||
color: '#eee',
|
||||
type: 'solid'
|
||||
}
|
||||
},
|
||||
axisTick: {
|
||||
show: false
|
||||
},
|
||||
axisLine: {
|
||||
show: false
|
||||
},
|
||||
axisLabel: {
|
||||
textStyle: {
|
||||
color: '#6E7174'
|
||||
}
|
||||
}
|
||||
}
|
||||
],
|
||||
series: [
|
||||
{
|
||||
name: '收益',
|
||||
type: 'line',
|
||||
data: profit_data,
|
||||
smooth: true,
|
||||
symbolSize: 5,
|
||||
symbol: 'circle',
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: 'rgba(245, 209, 164, 1)' // 折线点的颜色
|
||||
}
|
||||
},
|
||||
lineStyle: {
|
||||
color: {
|
||||
type: 'linear',
|
||||
x: 0,
|
||||
y: 0,
|
||||
x2: 0,
|
||||
y2: 1,
|
||||
colorStops: [
|
||||
{
|
||||
offset: 0,
|
||||
color: 'rgba(245, 209, 164, 1)' // 0% 处的颜色
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: 'rgba(236, 168, 80, 1)' // 100% 处的颜色
|
||||
}
|
||||
],
|
||||
global: false // 缺省为 false
|
||||
},
|
||||
// shadowColor: 'rgba(255, 120, 0,1)',
|
||||
shadowBlur: 8
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
} else {
|
||||
this.options = {
|
||||
title: {
|
||||
text: '暂无数据',
|
||||
x: 'center',
|
||||
y: 'center',
|
||||
textStyle: {
|
||||
fontSize: 14,
|
||||
color: 'rgb(153, 153, 153)',
|
||||
fontWeight: 'normal'
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.right-top-warp {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
.box {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
.button-box {
|
||||
width: 100%;
|
||||
height: 25px;
|
||||
padding-top: 5px;
|
||||
text-align: right;
|
||||
}
|
||||
.chart-box {
|
||||
height: calc(100% - 25px);
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
::v-deep .el-tabs {
|
||||
height: 100% !important;
|
||||
}
|
||||
::v-deep .el-tabs__header {
|
||||
height: 100% !important;
|
||||
}
|
||||
::v-deep .el-tabs__nav-wrap {
|
||||
height: 100% !important;
|
||||
}
|
||||
::v-deep .el-tabs__nav-scroll {
|
||||
height: 100% !important;
|
||||
display: flex;
|
||||
justify-content: right;
|
||||
}
|
||||
::v-deep .el-tabs__nav {
|
||||
transform: translate(0, -12px) !important;
|
||||
}
|
||||
::v-deep .el-tabs__active-bar {
|
||||
bottom: -15px !important;
|
||||
height: 6px !important;
|
||||
transform: skewX(-45deg);
|
||||
}
|
||||
::v-deep .el-tabs__nav-wrap::after {
|
||||
display: none;
|
||||
}
|
||||
::v-deep .el-tabs__item {
|
||||
padding: 0 10px !important;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user