master
parent
dfaf74cfd7
commit
4cddc74b25
|
After Width: | Height: | Size: 2.8 KiB |
|
After Width: | Height: | Size: 2.9 KiB |
@ -1,112 +1,78 @@
|
||||
<template>
|
||||
<div id="bottomRight">
|
||||
<div class="bg-color-black">
|
||||
<div class="d-flex pt-2 pl-2">
|
||||
<div class="title">
|
||||
<span>
|
||||
<icon name="chart-area" class="text-icon"></icon>
|
||||
</span>
|
||||
<span class="fs-xl text mx-2">工单修复以及满意度统计图</span>
|
||||
</div>
|
||||
<div class="d-flex">
|
||||
<div class="decoration2">
|
||||
<dv-decoration-2 :reverse="true" style="width:5px;height:6rem;" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<Chart :cdata="cdata" />
|
||||
<div>
|
||||
<div class="ranking bg-color-black">
|
||||
<div class="title d-flex align-center">
|
||||
<span>
|
||||
<SvgIcon icon-class="fangwu" class="text-icon"></SvgIcon>
|
||||
</span>
|
||||
<span class="fs-xl text">房屋资产</span>
|
||||
</div>
|
||||
|
||||
<dv-scroll-ranking-board class="dv-scr-rank-board mt-1" :config="ranking"/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Chart from "@/components/Charts"
|
||||
import SvgIcon from "@/components/SvgIcon"
|
||||
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
drawTiming: null,
|
||||
cdata: {
|
||||
year: null,
|
||||
weekCategory: [],
|
||||
radarData: [],
|
||||
radarDataAvg: [],
|
||||
maxData: 12000,
|
||||
weekMaxData: [],
|
||||
weekLineData: []
|
||||
}
|
||||
}
|
||||
},
|
||||
components: {
|
||||
Chart,
|
||||
},
|
||||
mounted () {
|
||||
this.drawTimingFn();
|
||||
SvgIcon
|
||||
},
|
||||
beforeDestroy () {
|
||||
clearInterval(this.drawTiming);
|
||||
inject: ["assets"],
|
||||
data() {
|
||||
return {}
|
||||
},
|
||||
methods: {
|
||||
drawTimingFn () {
|
||||
this.setData();
|
||||
this.drawTiming = setInterval(() => {
|
||||
this.setData();
|
||||
}, 6000);
|
||||
},
|
||||
setData () {
|
||||
// 清空轮询数据
|
||||
this.cdata.weekCategory = [];
|
||||
this.cdata.weekMaxData = [];
|
||||
this.cdata.weekLineData = [];
|
||||
this.cdata.radarData = [];
|
||||
this.cdata.radarDataAvg = [];
|
||||
methods: {},
|
||||
computed: {
|
||||
ranking() {
|
||||
if (this.assets()[0]) {
|
||||
return {
|
||||
data: this.assets()[0].map(item => ({
|
||||
name: item.name.length > 16 ? (item.name.slice(0, 14) + '...') : item.name,
|
||||
value: item.dengjimianji ?? 0
|
||||
})),
|
||||
carousel: 'single',
|
||||
unit: '平方',
|
||||
waitTime: 4000,
|
||||
rowNum: 3
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
let dateBase = new Date();
|
||||
this.cdata.year = dateBase.getFullYear();
|
||||
// 周数据
|
||||
for (let i = 0; i < 7; i++) {
|
||||
// 日期
|
||||
let date = new Date();
|
||||
this.cdata.weekCategory.unshift([date.getMonth() + 1, date.getDate()-i].join("/"));
|
||||
<style scoped lang="scss">
|
||||
.text-icon {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
color: #1da4a1;
|
||||
}
|
||||
|
||||
// 折线图数据
|
||||
this.cdata.weekMaxData.push(this.cdata.maxData);
|
||||
let distance = Math.round(Math.random() * 11000 + 500);
|
||||
this.cdata.weekLineData.push(distance);
|
||||
.ranking {
|
||||
padding: 20px 10px;
|
||||
width: 100%;
|
||||
|
||||
// 雷达图数据
|
||||
// 我的指标
|
||||
let averageSpeed = +(Math.random() * 5 + 3).toFixed(3);
|
||||
let maxSpeed = averageSpeed + +(Math.random() * 3).toFixed(2);
|
||||
let hour = +(distance / 1000 / averageSpeed).toFixed(1);
|
||||
let radarDayData = [distance, averageSpeed, maxSpeed, hour];
|
||||
this.cdata.radarData.unshift(radarDayData);
|
||||
.dv-scr-rank-board {
|
||||
height: 180px;
|
||||
padding: 10px 20px;
|
||||
}
|
||||
|
||||
// 平均指标
|
||||
let distanceAvg = Math.round(Math.random() * 8000 + 4000);
|
||||
let averageSpeedAvg = +(Math.random() * 4 + 4).toFixed(3);
|
||||
let maxSpeedAvg = averageSpeedAvg + +(Math.random() * 2).toFixed(2);
|
||||
let hourAvg = +(distance / 1000 / averageSpeed).toFixed(1);
|
||||
let radarDayDataAvg = [
|
||||
distanceAvg,
|
||||
averageSpeedAvg,
|
||||
maxSpeedAvg,
|
||||
hourAvg
|
||||
];
|
||||
this.cdata.radarDataAvg.unshift(radarDayDataAvg);
|
||||
}
|
||||
.title {
|
||||
display: flex;
|
||||
color: #fff;
|
||||
padding: 0 20px;
|
||||
align-items: center;
|
||||
|
||||
.text {
|
||||
padding: 0 8px;
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
#bottomRight {
|
||||
padding: 20px;
|
||||
}
|
||||
.title {
|
||||
color: #fff;
|
||||
|
||||
::v-deep .dv-scroll-ranking-board .ranking-column .inside-column {
|
||||
background: linear-gradient(to left, #7ddacd, #1da4a1);
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -0,0 +1,125 @@
|
||||
<template>
|
||||
<div id="bottomRight">
|
||||
<div class="bg-color-black">
|
||||
<div class="d-flex pt-2">
|
||||
<div class="title">
|
||||
<span>
|
||||
<SvgIcon class="text-icon" icon-class="skill"></SvgIcon>
|
||||
</span>
|
||||
<span class="fs-xl text mx-2">资产数据</span>
|
||||
</div>
|
||||
<div class="d-flex">
|
||||
<div class="decoration2">
|
||||
<dv-decoration-2 :reverse="true" style="position:absolute;width:5px;height:6rem;" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<Chart :cdata="cdata" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import SvgIcon from "@/components/SvgIcon"
|
||||
import Chart from "@/components/Charts"
|
||||
export default {
|
||||
components: {
|
||||
SvgIcon,
|
||||
Chart
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
drawTiming: null,
|
||||
cdata: {
|
||||
year: null,
|
||||
weekCategory: [],
|
||||
radarData: [],
|
||||
radarDataAvg: [],
|
||||
maxData: 12000,
|
||||
weekMaxData: [],
|
||||
weekLineData: []
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
this.drawTimingFn();
|
||||
},
|
||||
beforeDestroy () {
|
||||
clearInterval(this.drawTiming);
|
||||
},
|
||||
methods: {
|
||||
drawTimingFn () {
|
||||
this.setData();
|
||||
this.drawTiming = setInterval(() => {
|
||||
this.setData();
|
||||
}, 6000);
|
||||
},
|
||||
setData () {
|
||||
// 清空轮询数据
|
||||
this.cdata.weekCategory = [];
|
||||
this.cdata.weekMaxData = [];
|
||||
this.cdata.weekLineData = [];
|
||||
this.cdata.radarData = [];
|
||||
this.cdata.radarDataAvg = [];
|
||||
|
||||
let dateBase = new Date();
|
||||
this.cdata.year = dateBase.getFullYear();
|
||||
// 周数据
|
||||
for (let i = 0; i < 7; i++) {
|
||||
// 日期
|
||||
let date = new Date();
|
||||
this.cdata.weekCategory.unshift([date.getMonth() + 1, date.getDate()-i].join("/"));
|
||||
|
||||
// 折线图数据
|
||||
this.cdata.weekMaxData.push(this.cdata.maxData);
|
||||
let distance = Math.round(Math.random() * 11000 + 500);
|
||||
this.cdata.weekLineData.push(distance);
|
||||
|
||||
// 雷达图数据
|
||||
// 我的指标
|
||||
let averageSpeed = +(Math.random() * 5 + 3).toFixed(3);
|
||||
let maxSpeed = averageSpeed + +(Math.random() * 3).toFixed(2);
|
||||
let hour = +(distance / 1000 / averageSpeed).toFixed(1);
|
||||
let radarDayData = [distance, averageSpeed, maxSpeed, hour];
|
||||
this.cdata.radarData.unshift(radarDayData);
|
||||
|
||||
// 平均指标
|
||||
let distanceAvg = Math.round(Math.random() * 8000 + 4000);
|
||||
let averageSpeedAvg = +(Math.random() * 4 + 4).toFixed(3);
|
||||
let maxSpeedAvg = averageSpeedAvg + +(Math.random() * 2).toFixed(2);
|
||||
let hourAvg = +(distance / 1000 / averageSpeed).toFixed(1);
|
||||
let radarDayDataAvg = [
|
||||
distanceAvg,
|
||||
averageSpeedAvg,
|
||||
maxSpeedAvg,
|
||||
hourAvg
|
||||
];
|
||||
this.cdata.radarDataAvg.unshift(radarDayDataAvg);
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
#bottomRight {
|
||||
padding: 20px 10px;
|
||||
}
|
||||
.title {
|
||||
display: flex;
|
||||
color: #fff;
|
||||
padding: 0 20px;
|
||||
align-items: center;
|
||||
.text {
|
||||
padding: 0 8px;
|
||||
}
|
||||
}
|
||||
.text-icon {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
color: #1da4a1;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,36 @@
|
||||
<template>
|
||||
<div>
|
||||
<Table class="table" :data="info" :columns="columns"></Table>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
info: Array
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
columns: [
|
||||
{
|
||||
key: "name",
|
||||
title: "资产名称"
|
||||
},
|
||||
{
|
||||
key: "dengjimianji",
|
||||
title: "登记面积"
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
methods: {},
|
||||
computed: {}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.table {
|
||||
width: 320px;
|
||||
height: auto;
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in new issue