tao.zhang/tianyi_DataV
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

1.0版本完成

Browse Source
This commit is contained in:
MTrunning
2020-03-18 21:27:37 +08:00
parent 77b384b613
commit a6d8dbd8eb
6 changed files with 580 additions and 104 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/assets/scss/index.scss
+86 -85
View File
@@ -12,99 +12,100 @@
background-image: url("../assets/pageBg.png"); background-image: url("../assets/pageBg.png");
} }
.title { .host-body {
position: relative; .title {
width: 500px; position: relative;
text-align: center; width: 500px;
background-size: cover; text-align: center;
background-repeat: no-repeat; background-size: cover;
background-repeat: no-repeat;
.title-text { .title-text {
font-size: 2rem; font-size: 2rem;
position: absolute; position: absolute;
bottom: 0px; bottom: 0px;
left: 50%; left: 50%;
transform: translate(-50%); transform: translate(-50%);
}
.title-bototm {
position: absolute;
bottom: -30px;
left: 50%;
transform: translate(-50%);
}
} }
.title-bototm { // 平行四边形
position: absolute; .react-left {
bottom: -30px; cursor: pointer;
left: 50%; font-size: 1.3rem;
transform: translate(-50%); width: 300px;
}
}
// 平行四边形
.react-left {
cursor: pointer;
font-size: 1.3rem;
width: 300px;
height: 50px;
line-height: 50px;
text-align: center;
transform: skewX(-45deg);
.react-after {
position: absolute;
right: -25px;
top: 0px;
height: 50px; height: 50px;
width: 50px; line-height: 50px;
background-color: #0f1325; text-align: center;
transform: skewX(45deg);
}
.text {
display: inline-block;
transform: skewX(45deg);
}
}
.react-right {
cursor: pointer;
font-size: 1.3rem;
width: 300px;
height: 50px;
line-height: 50px;
text-align: center;
transform: skewX(45deg);
.react-before {
position: absolute;
left: -25px;
top: 0px;
height: 50px;
width: 50px;
background-color: #0f1325;
transform: skewX(-45deg); transform: skewX(-45deg);
.react-after {
position: absolute;
right: -25px;
top: 0px;
height: 50px;
width: 50px;
background-color: #0f1325;
transform: skewX(45deg);
}
.text {
display: inline-block;
transform: skewX(45deg);
}
} }
.text { .react-right {
display: inline-block; cursor: pointer;
transform: skewX(-45deg); font-size: 1.3rem;
width: 300px;
height: 50px;
line-height: 50px;
text-align: center;
transform: skewX(45deg);
.react-before {
position: absolute;
left: -25px;
top: 0px;
height: 50px;
width: 50px;
background-color: #0f1325;
transform: skewX(-45deg);
}
.text {
display: inline-block;
transform: skewX(-45deg);
}
}
.body-box {
margin-top: 1rem;
display: flex;
flex-direction: column;
//下方区域的布局
.content-box {
display: grid;
grid-template-columns: 2fr 3fr 5fr 3fr 2fr;
}
// 底部数据
.bototm-box {
margin-top: 10px;
display: grid;
grid-template-columns: repeat(2, 50%);
}
} }
} }
.body-box {
margin-top: 1rem;
display: flex;
flex-direction: column;
//下方区域的布局
.content-box {
display: grid;
grid-template-columns: 2fr 3fr 5fr 3fr 2fr;
}
// 底部数据
.bototm-box {
margin-top: 10px;
display: grid;
grid-template-columns: repeat(2, 50%);
}
}
} }
src/components/echart/bottom/bottomLeftChart.vue
+9 -9
View File
@@ -1,6 +1,6 @@
<template> <template>
<div> <div>
<div id="bottomLeftChart" style="width:900px;height:400px;"></div> <div id="bottomLeftChart" style="width:900px;height:500px;"></div>
</div> </div>
</template> </template>
@@ -133,7 +133,7 @@ export default {
let option = { let option = {
title: { title: {
text: "增量设备贯通情况-单位", text: "",
x: "center", x: "center",
y: 0, y: 0,
textStyle: { textStyle: {
@@ -158,12 +158,12 @@ export default {
textStyle: { textStyle: {
color: "#B4B4B4" color: "#B4B4B4"
}, },
top: "7%" top: "0%"
}, },
grid: { grid: {
x: "12%", x: "8%",
width: "82%", width: "88%",
y: "12%" y: "4%"
}, },
xAxis: { xAxis: {
data: category, data: category,
@@ -243,9 +243,9 @@ export default {
normal: { normal: {
barBorderRadius: 5, barBorderRadius: 5,
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: "rgba(156,107,211,0.5)" }, { offset: 0, color: "rgba(156,107,211,0.8)" },
{ offset: 0.2, color: "rgba(156,107,211,0.3)" }, { offset: 0.2, color: "rgba(156,107,211,0.5)" },
{ offset: 1, color: "rgba(156,107,211,0)" } { offset: 1, color: "rgba(156,107,211,0.2)" }
]) ])
} }
}, },
src/components/echart/bottom/bottomRightChart.vue
+409
View File
@@ -0,0 +1,409 @@
<template>
<div>
<div id="bottomRightChart" style="width:900px;height:480px;"></div>
</div>
</template>
<script>
const echarts = require("echarts");
export default {
data() {
return {};
},
mounted() {
this.drawPie();
this.charTimg();
},
methods: {
charTimg() {
setInterval(() => {
this.drawPie();
}, 6000);
},
drawPie() {
// 基于准备好的dom，初始化echarts实例
let myChartPieLeft = echarts.init(
document.getElementById("bottomRightChart")
);
// ----------------------------------------------------------------
// 数据
let dateBase = new Date();
let year = dateBase.getFullYear();
let dottedBase = +dateBase + 1000 * 3600 * 24;
let weekCategory = [];
let radarData = [];
let radarDataAvg = [];
let maxData = 12000;
let weekMaxData = [];
let weekLineData = [];
// 周数据
for (let i = 0; i < 7; i++) {
// 日期
var date = new Date((dottedBase -= 1000 * 3600 * 24));
weekCategory.unshift([date.getMonth() + 1, date.getDate()].join("/"));
// 折线图数据
weekMaxData.push(maxData);
var distance = Math.round(Math.random() * 11000 + 500);
weekLineData.push(distance);
// 雷达图数据
// 我的指标
var averageSpeed = +(Math.random() * 5 + 3).toFixed(3);
var maxSpeed = averageSpeed + +(Math.random() * 3).toFixed(2);
var hour = +(distance / 1000 / averageSpeed).toFixed(1);
var radarDayData = [distance, averageSpeed, maxSpeed, hour];
radarData.unshift(radarDayData);
// 平均指标
var distanceAvg = Math.round(Math.random() * 8000 + 4000);
var averageSpeedAvg = +(Math.random() * 4 + 4).toFixed(3);
var maxSpeedAvg = averageSpeedAvg + +(Math.random() * 2).toFixed(2);
var hourAvg = +(distance / 1000 / averageSpeed).toFixed(1);
var radarDayDataAvg = [
distanceAvg,
averageSpeedAvg,
maxSpeedAvg,
hourAvg
];
radarDataAvg.unshift(radarDayDataAvg);
}
// 颜色设置
let color = {
linearYtoG: {
type: "linear",
x: 0,
y: 0,
x2: 1,
y2: 1,
colorStops: [
{
offset: 0,
color: "#f5b44d"
},
{
offset: 1,
color: "#28f8de"
}
]
},
linearGtoB: {
type: "linear",
x: 0,
y: 0,
x2: 1,
y2: 0,
colorStops: [
{
offset: 0,
color: "#43dfa2"
},
{
offset: 1,
color: "#28f8de"
}
]
},
linearBtoG: {
type: "linear",
x: 0,
y: 0,
x2: 1,
y2: 0,
colorStops: [
{
offset: 0,
color: "#1c98e8"
},
{
offset: 1,
color: "#28f8de"
}
]
},
areaBtoG: {
type: "linear",
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{
offset: 0,
color: "rgba(35,184,210,.2)"
},
{
offset: 1,
color: "rgba(35,184,210,0)"
}
]
}
};
let option = {
title: {
text: "",
textStyle: {
color: "#D3D6DD",
fontSize: 24,
fontWeight: "normal"
},
subtext: year + "/" + weekCategory[6],
subtextStyle: {
color: "#fff",
fontSize: 16
},
top: 50,
left: 80
},
legend: {
top: 120,
left: 80,
orient: "vertical",
itemGap: 15,
itemWidth: 12,
itemHeight: 12,
data: ["平均指标", "我的指标"],
textStyle: {
color: "#fff",
fontSize: 14
}
},
tooltip: {
trigger: "item"
},
radar: {
center: ["68%", "27%"],
radius: "40%",
name: {
color: "#fff"
},
splitNumber: 8,
axisLine: {
lineStyle: {
color: color.linearYtoG,
opacity: 0.6
}
},
splitLine: {
lineStyle: {
color: color.linearYtoG,
opacity: 0.6
}
},
splitArea: {
areaStyle: {
color: "#fff",
opacity: 0.1,
shadowBlur: 25,
shadowColor: "#000",
shadowOffsetX: 0,
shadowOffsetY: 5
}
},
indicator: [
{
name: "全程距离(m)",
max: maxData
},
{
name: "平均速度(km/h)",
max: 10
},
{
name: "最快速度(km/h)",
max: 12
},
{
name: "总计时间(h)",
max: 3.5
}
]
},
grid: {
left: 90,
right: 80,
bottom: 40,
top: "60%"
},
xAxis: {
type: "category",
position: "bottom",
axisLine: true,
axisLabel: {
color: "rgba(255,255,255,.8)",
fontSize: 12
},
data: weekCategory
},
// 下方Y轴
yAxis: {
name: "工单",
nameLocation: "end",
nameGap: 24,
nameTextStyle: {
color: "rgba(255,255,255,.5)",
fontSize: 14
},
max: maxData,
splitNumber: 4,
axisLine: {
lineStyle: {
opacity: 0
}
},
splitLine: {
show: true,
lineStyle: {
color: "#fff",
opacity: 0.1
}
},
axisLabel: {
color: "rgba(255,255,255,.8)",
fontSize: 12
}
},
series: [
{
name: "",
type: "radar",
symbolSize: 0,
data: [
{
value: radarDataAvg[6],
name: "平均指标",
itemStyle: {
normal: {
color: "#f8d351"
}
},
lineStyle: {
normal: {
opacity: 0
}
},
areaStyle: {
normal: {
color: "#f8d351",
shadowBlur: 25,
shadowColor: "rgba(248,211,81,.3)",
shadowOffsetX: 0,
shadowOffsetY: -10,
opacity: 1
}
}
},
{
value: radarData[6],
name: "我的指标",
itemStyle: {
normal: {
color: "#43dfa2"
}
},
lineStyle: {
normal: {
opacity: 0
}
},
areaStyle: {
normal: {
color: color.linearGtoB,
shadowBlur: 15,
shadowColor: "rgba(0,0,0,.2)",
shadowOffsetX: 0,
shadowOffsetY: 5,
opacity: 0.8
}
}
}
]
},
{
name: "",
type: "line",
smooth: true,
symbol: "emptyCircle",
symbolSize: 8,
itemStyle: {
normal: {
color: "#fff"
}
},
lineStyle: {
normal: {
color: color.linearBtoG,
width: 3
}
},
areaStyle: {
normal: {
color: color.areaBtoG
}
},
data: weekLineData,
lineSmooth: true,
markLine: {
silent: true,
data: [
{
type: "average",
name: "平均值"
}
],
precision: 0,
label: {
normal: {
formatter: "平均值: \n {c}"
}
},
lineStyle: {
normal: {
color: "rgba(248,211,81,.7)"
}
}
},
tooltip: {
position: "top",
formatter: "{c} m",
backgroundColor: "rgba(28,152,232,.2)",
padding: 6
}
},
{
name: "占位背景",
type: "bar",
itemStyle: {
normal: {
show: true,
color: "#000",
opacity: 0
}
},
silent: true,
barWidth: "50%",
data: weekMaxData,
animation: false
},
]
};
myChartPieLeft.setOption(option);
// -----------------------------------------------------------------
// 响应式变化
window.addEventListener("resize", () => myChartPieLeft.resize(), false);
}
},
destroyed() {
window.onresize = null;
}
};
</script>
<style lang="scss" scoped>
</style>
src/views/bottomLeft.vue
+4 -4
View File
@@ -1,6 +1,6 @@
<template> <template>
<div id="bottomLeft"> <div id="bottomLeft">
<div class> <div class="bg-color-black ">
<div class="d-flex pt-2 pl-2"> <div class="d-flex pt-2 pl-2">
<span style="color:#5cd9e8"> <span style="color:#5cd9e8">
<icon name="chart-bar"></icon> <icon name="chart-bar"></icon>
@@ -33,12 +33,12 @@ export default {
<style lang="scss"> <style lang="scss">
#bottomLeft { #bottomLeft {
padding: 1rem; padding: 1.5rem 1rem;
height: 410px; height: 520px;
min-width: 300px; min-width: 300px;
border-radius: 5px; border-radius: 5px;
.bg-color-black { .bg-color-black {
height: 385px; height: 485px;
border-radius: 10px; border-radius: 10px;
} }
.text { .text {
src/views/bottomRight.vue
+62
View File
@@ -0,0 +1,62 @@
<template>
<div id="bottomRight">
<div class="bg-color-black">
<div class="d-flex pt-2 pl-2">
<span style="color:#5cd9e8">
<icon name="chart-area"></icon>
</span>
<div class="d-flex">
<span class="fs-xl text mx-2">工单修复以及满意度统计图</span>
<div class="decoration2">
<dv-decoration-2 :reverse="true" style="width:5px;height:480px;" />
</div>
</div>
</div>
<div>
<bottomRightChart />
</div>
</div>
</div>
</template>
<script>
import bottomRightChart from "@/components/echart/bottom/bottomRightChart";
export default {
data() {
return {};
},
components: {
bottomRightChart
},
mounted() {},
methods: {}
};
</script>
<style lang="scss">
#bottomRight {
padding: 1rem 1rem 0rem;
height: 520px;
min-width: 300px;
border-radius: 5px;
.bg-color-black {
height: 495px;
border-radius: 10px;
}
.text {
color: #c3cbde;
} //下滑线动态
.decoration2 {
position: absolute;
right: 10px;
}
.chart-box {
margin-top: 1rem;
width: 170px;
height: 170px;
.active-ring-name {
padding-top: 10px;
}
}
}
</style>
src/views/index.vue
+10 -6
View File
@@ -2,7 +2,7 @@
<div id="index"> <div id="index">
<dv-full-screen-container class="bg"> <dv-full-screen-container class="bg">
<dv-loading v-if="loading">Loading...</dv-loading> <dv-loading v-if="loading">Loading...</dv-loading>
<div class="host-body"> <div v-else class="host-body">
<div class="d-flex jc-center"> <div class="d-flex jc-center">
<dv-decoration-10 style="width:33.3%;height:5px;" /> <dv-decoration-10 style="width:33.3%;height:5px;" />
<div class="d-flex jc-center"> <div class="d-flex jc-center">
@@ -83,10 +83,12 @@
<!-- 第四行数据 --> <!-- 第四行数据 -->
<div class="bototm-box"> <div class="bototm-box">
<dv-border-box-1> <dv-border-box-13>
<bottomLeft /> <bottomLeft />
</dv-border-box-1> </dv-border-box-13>
<div>2</div> <dv-border-box-12>
<bottomRight />
</dv-border-box-12>
</div> </div>
</div> </div>
</div> </div>
@@ -101,10 +103,11 @@ import centreRight1 from "./centreRight1";
import centreRight2 from "./centreRight2"; import centreRight2 from "./centreRight2";
import center from "./center"; import center from "./center";
import bottomLeft from "./bottomLeft"; import bottomLeft from "./bottomLeft";
import bottomRight from "./bottomRight";
export default { export default {
data() { data() {
return { return {
loading: false loading: true
}; };
}, },
components: { components: {
@@ -113,7 +116,8 @@ export default {
centreRight1, centreRight1,
centreRight2, centreRight2,
center, center,
bottomLeft bottomLeft,
bottomRight
}, },
mounted() { mounted() {
this.cancelLoading(); this.cancelLoading();