Merge branch 'develop' of https://e.coding.net/ctcdevteam/hberp/hberp into develop
This commit is contained in:
commit
503fa805a7
|
|
@ -16,6 +16,7 @@
|
||||||
"svgo": "svgo -f src/icons/svg --config=src/icons/svgo.yml"
|
"svgo": "svgo -f src/icons/svg --config=src/icons/svgo.yml"
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
|
"@jiaminghi/data-view": "^2.10.0",
|
||||||
"@riophae/vue-treeselect": "^0.4.0",
|
"@riophae/vue-treeselect": "^0.4.0",
|
||||||
"axios": "^0.21.1",
|
"axios": "^0.21.1",
|
||||||
"cache-loader": "^4.1.0",
|
"cache-loader": "^4.1.0",
|
||||||
|
|
|
||||||
Binary file not shown.
|
After Width: | Height: | Size: 652 KiB |
|
|
@ -0,0 +1,98 @@
|
||||||
|
// 颜色
|
||||||
|
$colors: (
|
||||||
|
"primary": #1A5CD7,
|
||||||
|
"info-1": #4394e4,
|
||||||
|
"info": #4b67af,
|
||||||
|
"white": #ffffff,
|
||||||
|
"light": #f9f9f9,
|
||||||
|
"grey-1": #999999,
|
||||||
|
"grey": #666666,
|
||||||
|
"dark-1": #5f5f5f,
|
||||||
|
"dark": #222222,
|
||||||
|
"black-1": #171823,
|
||||||
|
"black": #000000,
|
||||||
|
"icon": #5cd9e8
|
||||||
|
);
|
||||||
|
|
||||||
|
// 字体大小
|
||||||
|
$base-font-size: 0.2rem;
|
||||||
|
$font-sizes: (
|
||||||
|
xxs: 0.1,
|
||||||
|
//8px
|
||||||
|
xs: 0.125,
|
||||||
|
//10px
|
||||||
|
sm: 0.2875,
|
||||||
|
//12px
|
||||||
|
md: 0.1625,
|
||||||
|
//13px
|
||||||
|
lg: 0.175,
|
||||||
|
//14px
|
||||||
|
xl: 0.2,
|
||||||
|
//16px
|
||||||
|
xxl: 0.225,
|
||||||
|
//18px
|
||||||
|
xxxl: 0.25 //20px,,,,
|
||||||
|
);
|
||||||
|
|
||||||
|
// 宽高
|
||||||
|
.w-100 {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
.h-100 {
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
//flex
|
||||||
|
.d-flex {
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
.flex-column {
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
.flex-wrap {
|
||||||
|
flex-wrap: wrap;
|
||||||
|
}
|
||||||
|
.flex-nowrap {
|
||||||
|
flex-wrap: nowrap;
|
||||||
|
}
|
||||||
|
$flex-jc: (
|
||||||
|
start: flex-start,
|
||||||
|
end: flex-end,
|
||||||
|
center: center,
|
||||||
|
between: space-between,
|
||||||
|
around: space-around,
|
||||||
|
evenly: space-evenly,
|
||||||
|
);
|
||||||
|
|
||||||
|
$flex-ai: (
|
||||||
|
start: flex-start,
|
||||||
|
end: flex-end,
|
||||||
|
center: center,
|
||||||
|
stretch: stretch,
|
||||||
|
);
|
||||||
|
|
||||||
|
.flex-1 {
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
//.mt-1 => margin top
|
||||||
|
//spacing
|
||||||
|
$spacing-types: (
|
||||||
|
m: margin,
|
||||||
|
p: padding,
|
||||||
|
);
|
||||||
|
$spacing-directions: (
|
||||||
|
t: top,
|
||||||
|
r: right,
|
||||||
|
b: bottom,
|
||||||
|
l: left,
|
||||||
|
);
|
||||||
|
$spacing-base-size: 0.5rem;
|
||||||
|
$spacing-sizes: (
|
||||||
|
0: 0,
|
||||||
|
1: 0.5,
|
||||||
|
2: 1,
|
||||||
|
3: 1.5,
|
||||||
|
4: 2,
|
||||||
|
5: 2.5,
|
||||||
|
);
|
||||||
|
|
@ -0,0 +1,144 @@
|
||||||
|
#index {
|
||||||
|
color: #d3d6dd;
|
||||||
|
width: 1920px;
|
||||||
|
height: 1080px;
|
||||||
|
position: absolute;
|
||||||
|
top: 50%;
|
||||||
|
left: 50%;
|
||||||
|
transform: translate(-50%, -50%);
|
||||||
|
transform-origin: left top;
|
||||||
|
overflow: hidden;
|
||||||
|
|
||||||
|
.bg {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
padding: 16px 16px 0 16px;
|
||||||
|
background-image: url("../../assets/pageBg.jpg");
|
||||||
|
background-size: cover;
|
||||||
|
background-position: center center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.host-body {
|
||||||
|
.dv-dec-10,
|
||||||
|
.dv-dec-10-s {
|
||||||
|
width: 33.3%;
|
||||||
|
height: 5px;
|
||||||
|
}
|
||||||
|
.dv-dec-10-s {
|
||||||
|
transform: rotateY(180deg);
|
||||||
|
}
|
||||||
|
.dv-dec-8 {
|
||||||
|
width: 200px;
|
||||||
|
height: 50px;
|
||||||
|
}
|
||||||
|
.title {
|
||||||
|
position: relative;
|
||||||
|
width: 500px;
|
||||||
|
text-align: center;
|
||||||
|
background-size: cover;
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
|
||||||
|
.title-text {
|
||||||
|
font-size: 24px;
|
||||||
|
position: absolute;
|
||||||
|
bottom: 0;
|
||||||
|
left: 50%;
|
||||||
|
transform: translate(-50%);
|
||||||
|
}
|
||||||
|
|
||||||
|
.dv-dec-6 {
|
||||||
|
position: absolute;
|
||||||
|
bottom: -30px;
|
||||||
|
left: 50%;
|
||||||
|
width: 250px;
|
||||||
|
height: 8px;
|
||||||
|
transform: translate(-50%);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 第二行
|
||||||
|
.aside-width {
|
||||||
|
width: 40%;
|
||||||
|
}
|
||||||
|
.react-r-s,
|
||||||
|
.react-l-s {
|
||||||
|
background-color: #0f1325;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 平行四边形
|
||||||
|
.react-right {
|
||||||
|
&.react-l-s {
|
||||||
|
text-align: right;
|
||||||
|
width: 500px;
|
||||||
|
}
|
||||||
|
font-size: 18px;
|
||||||
|
width: 300px;
|
||||||
|
line-height: 50px;
|
||||||
|
text-align: center;
|
||||||
|
transform: skewX(-45deg);
|
||||||
|
|
||||||
|
.react-after {
|
||||||
|
position: absolute;
|
||||||
|
right: -25px;
|
||||||
|
top: 0;
|
||||||
|
height: 50px;
|
||||||
|
width: 50px;
|
||||||
|
background-color: #0f1325;
|
||||||
|
transform: skewX(45deg);
|
||||||
|
}
|
||||||
|
|
||||||
|
.text {
|
||||||
|
display: inline-block;
|
||||||
|
transform: skewX(45deg);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.react-left {
|
||||||
|
&.react-l-s {
|
||||||
|
width: 500px;
|
||||||
|
text-align: left;
|
||||||
|
}
|
||||||
|
font-size: 18px;
|
||||||
|
width: 300px;
|
||||||
|
height: 50px;
|
||||||
|
line-height: 50px;
|
||||||
|
text-align: center;
|
||||||
|
transform: skewX(45deg);
|
||||||
|
background-color: #0f1325;
|
||||||
|
|
||||||
|
.react-before {
|
||||||
|
position: absolute;
|
||||||
|
left: -25px;
|
||||||
|
top: 0;
|
||||||
|
height: 50px;
|
||||||
|
width: 50px;
|
||||||
|
background-color: #0f1325;
|
||||||
|
transform: skewX(-45deg);
|
||||||
|
}
|
||||||
|
|
||||||
|
.text {
|
||||||
|
display: inline-block;
|
||||||
|
transform: skewX(-45deg);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.body-box {
|
||||||
|
margin-top: 16px;
|
||||||
|
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%);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,154 @@
|
||||||
|
@import "./variables";
|
||||||
|
|
||||||
|
// 全局样式
|
||||||
|
* {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
list-style-type: none;
|
||||||
|
outline: none;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
html {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
body {
|
||||||
|
font-family: Arial, Helvetica, sans-serif;
|
||||||
|
//line-height: 1.2em;
|
||||||
|
background-color: #f1f1f1;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
a {
|
||||||
|
color: #343440;
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
.clearfix {
|
||||||
|
&::after {
|
||||||
|
content: "";
|
||||||
|
display: table;
|
||||||
|
height: 0;
|
||||||
|
line-height: 0;
|
||||||
|
visibility: hidden;
|
||||||
|
clear: both;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
//浮动
|
||||||
|
.float-r {
|
||||||
|
float: right;
|
||||||
|
}
|
||||||
|
//浮动
|
||||||
|
.float-l {
|
||||||
|
float: left;
|
||||||
|
}
|
||||||
|
// 字体加粗
|
||||||
|
.fw-b {
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
//文章一行显示，多余省略号显示
|
||||||
|
.title-item {
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
.bg-color-black {
|
||||||
|
background-color: rgba(19, 25, 47, 0.6);
|
||||||
|
}
|
||||||
|
.bg-color-blue {
|
||||||
|
background-color: #1a5cd7;
|
||||||
|
}
|
||||||
|
.colorBlack {
|
||||||
|
color: #272727 !important;
|
||||||
|
&:hover {
|
||||||
|
color: #272727 !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.colorGrass {
|
||||||
|
color: #33cea0;
|
||||||
|
&:hover {
|
||||||
|
color: #33cea0 !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.colorRed {
|
||||||
|
color: #ff5722;
|
||||||
|
&:hover {
|
||||||
|
color: #ff5722 !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.colorText {
|
||||||
|
color: #d3d6dd !important;
|
||||||
|
&:hover {
|
||||||
|
color: #d3d6dd !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.colorBlue {
|
||||||
|
color: #257dff !important;
|
||||||
|
&:hover {
|
||||||
|
color: #257dff !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
//颜色
|
||||||
|
@each $colorkey, $color in $colors {
|
||||||
|
.text-#{$colorkey} {
|
||||||
|
color: $color;
|
||||||
|
}
|
||||||
|
.bg-#{$colorkey} {
|
||||||
|
background-color: $color;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
//对齐
|
||||||
|
@each $var in (left, center, right) {
|
||||||
|
.text-#{$var} {
|
||||||
|
text-align: $var !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
//flex
|
||||||
|
@each $key, $value in $flex-jc {
|
||||||
|
.jc-#{$key} {
|
||||||
|
justify-content: $value;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@each $key, $value in $flex-ai {
|
||||||
|
.ai-#{$key} {
|
||||||
|
align-items: $value;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
//字体
|
||||||
|
@each $fontkey, $fontvalue in $font-sizes {
|
||||||
|
.fs-#{$fontkey} {
|
||||||
|
font-size: $fontvalue * $base-font-size;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
//.mt-1 => margin top
|
||||||
|
//spacing
|
||||||
|
@each $typekey, $type in $spacing-types {
|
||||||
|
//.m-1
|
||||||
|
@each $sizekey, $size in $spacing-sizes {
|
||||||
|
.#{$typekey}-#{$sizekey} {
|
||||||
|
#{$type}: $size * $spacing-base-size;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
//.mx-1
|
||||||
|
@each $sizekey, $size in $spacing-sizes {
|
||||||
|
.#{$typekey}x-#{$sizekey} {
|
||||||
|
#{$type}-left: $size * $spacing-base-size;
|
||||||
|
#{$type}-right: $size * $spacing-base-size;
|
||||||
|
}
|
||||||
|
.#{$typekey}y-#{$sizekey} {
|
||||||
|
#{$type}-top: $size * $spacing-base-size;
|
||||||
|
#{$type}-bottom: $size * $spacing-base-size;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
//.mt-1
|
||||||
|
@each $directionkey, $direction in $spacing-directions {
|
||||||
|
@each $sizekey, $size in $spacing-sizes {
|
||||||
|
.#{$typekey}#{$directionkey}-#{$sizekey} {
|
||||||
|
#{$type}-#{$direction}: $size * $spacing-base-size;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.#{$typekey} {
|
||||||
|
#{$type}: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,104 @@
|
||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<!-- 通过率/达标率 -->
|
||||||
|
<Echart
|
||||||
|
:options="options"
|
||||||
|
:id="id"
|
||||||
|
height="100px"
|
||||||
|
width="100px"
|
||||||
|
></Echart>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import Echart from './index'
|
||||||
|
export default {
|
||||||
|
data () {
|
||||||
|
return {
|
||||||
|
options: {},
|
||||||
|
};
|
||||||
|
},
|
||||||
|
components: {
|
||||||
|
Echart,
|
||||||
|
},
|
||||||
|
props: {
|
||||||
|
id: {
|
||||||
|
type: String,
|
||||||
|
required: true,
|
||||||
|
default: "chartRate"
|
||||||
|
},
|
||||||
|
tips: {
|
||||||
|
type: Number,
|
||||||
|
required: true,
|
||||||
|
default: 50
|
||||||
|
},
|
||||||
|
colorObj: {
|
||||||
|
type: Object,
|
||||||
|
default: function () {
|
||||||
|
return {
|
||||||
|
textStyle: "#3fc0fb",
|
||||||
|
series: {
|
||||||
|
color: ["#00bcd44a", "transparent"],
|
||||||
|
dataColor: {
|
||||||
|
normal: "#03a9f4",
|
||||||
|
shadowColor: "#97e2f5"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
watch: {
|
||||||
|
// tips 是会变更的数据，所以进行监听
|
||||||
|
tips: {
|
||||||
|
handler (newData) {
|
||||||
|
this.options = {
|
||||||
|
title:{
|
||||||
|
text: newData * 1 + "%",
|
||||||
|
x: "center",
|
||||||
|
y: "center",
|
||||||
|
textStyle: {
|
||||||
|
color: this.colorObj.textStyle,
|
||||||
|
fontSize: 16
|
||||||
|
}
|
||||||
|
},
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
type: "pie",
|
||||||
|
radius: ["75%", "80%"],
|
||||||
|
center: ["50%", "50%"],
|
||||||
|
hoverAnimation: false,
|
||||||
|
color: this.colorObj.series.color,
|
||||||
|
label: {
|
||||||
|
normal: {
|
||||||
|
show: false
|
||||||
|
}
|
||||||
|
},
|
||||||
|
data: [
|
||||||
|
{
|
||||||
|
value: newData,
|
||||||
|
itemStyle: {
|
||||||
|
normal: {
|
||||||
|
color: this.colorObj.series.dataColor.normal,
|
||||||
|
shadowBlur: 10,
|
||||||
|
shadowColor: this.colorObj.series.dataColor.shadowColor
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: 100 - newData
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
},
|
||||||
|
immediate: true,
|
||||||
|
deep: true
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,65 @@
|
||||||
|
<template>
|
||||||
|
<div :id="id" :class="className" :style="{ height: height, width: width }" />
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import tdTheme from './theme.json' // 引入默认主题
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: 'echart',
|
||||||
|
props: {
|
||||||
|
className: {
|
||||||
|
type: String,
|
||||||
|
default: 'chart'
|
||||||
|
},
|
||||||
|
id: {
|
||||||
|
type: String,
|
||||||
|
default: 'chart'
|
||||||
|
},
|
||||||
|
width: {
|
||||||
|
type: String,
|
||||||
|
default: '100%'
|
||||||
|
},
|
||||||
|
height: {
|
||||||
|
type: String,
|
||||||
|
default: '2.5rem'
|
||||||
|
},
|
||||||
|
options: {
|
||||||
|
type: Object,
|
||||||
|
default: ()=>({})
|
||||||
|
}
|
||||||
|
},
|
||||||
|
data () {
|
||||||
|
return {
|
||||||
|
chart: null
|
||||||
|
}
|
||||||
|
},
|
||||||
|
watch: {
|
||||||
|
options: {
|
||||||
|
handler (options) {
|
||||||
|
// 设置true清空echart缓存
|
||||||
|
this.chart.setOption(options, true)
|
||||||
|
},
|
||||||
|
deep: true
|
||||||
|
}
|
||||||
|
},
|
||||||
|
mounted () {
|
||||||
|
this.$echarts.registerTheme('tdTheme', tdTheme); // 覆盖默认主题
|
||||||
|
this.initChart();
|
||||||
|
},
|
||||||
|
beforeDestroy () {
|
||||||
|
this.chart.dispose()
|
||||||
|
this.chart = null
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
initChart () {
|
||||||
|
// 初始化echart
|
||||||
|
this.chart = this.$echarts.init(this.$el, 'tdTheme')
|
||||||
|
this.chart.setOption(this.options, true)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,490 @@
|
||||||
|
{
|
||||||
|
"color": [
|
||||||
|
"#2d8cf0",
|
||||||
|
"#19be6b",
|
||||||
|
"#ff9900",
|
||||||
|
"#E46CBB",
|
||||||
|
"#9A66E4",
|
||||||
|
"#ed3f14"
|
||||||
|
],
|
||||||
|
"backgroundColor": "rgba(0,0,0,0)",
|
||||||
|
"textStyle": {},
|
||||||
|
"title": {
|
||||||
|
"textStyle": {
|
||||||
|
"color": "#516b91"
|
||||||
|
},
|
||||||
|
"subtextStyle": {
|
||||||
|
"color": "#93b7e3"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"line": {
|
||||||
|
"itemStyle": {
|
||||||
|
"normal": {
|
||||||
|
"borderWidth": "2"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"lineStyle": {
|
||||||
|
"normal": {
|
||||||
|
"width": "2"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"symbolSize": "6",
|
||||||
|
"symbol": "emptyCircle",
|
||||||
|
"smooth": true
|
||||||
|
},
|
||||||
|
"radar": {
|
||||||
|
"itemStyle": {
|
||||||
|
"normal": {
|
||||||
|
"borderWidth": "2"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"lineStyle": {
|
||||||
|
"normal": {
|
||||||
|
"width": "2"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"symbolSize": "6",
|
||||||
|
"symbol": "emptyCircle",
|
||||||
|
"smooth": true
|
||||||
|
},
|
||||||
|
"bar": {
|
||||||
|
"itemStyle": {
|
||||||
|
"normal": {
|
||||||
|
"barBorderWidth": 0,
|
||||||
|
"barBorderColor": "#ccc"
|
||||||
|
},
|
||||||
|
"emphasis": {
|
||||||
|
"barBorderWidth": 0,
|
||||||
|
"barBorderColor": "#ccc"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"pie": {
|
||||||
|
"itemStyle": {
|
||||||
|
"normal": {
|
||||||
|
"borderWidth": 0,
|
||||||
|
"borderColor": "#ccc"
|
||||||
|
},
|
||||||
|
"emphasis": {
|
||||||
|
"borderWidth": 0,
|
||||||
|
"borderColor": "#ccc"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"scatter": {
|
||||||
|
"itemStyle": {
|
||||||
|
"normal": {
|
||||||
|
"borderWidth": 0,
|
||||||
|
"borderColor": "#ccc"
|
||||||
|
},
|
||||||
|
"emphasis": {
|
||||||
|
"borderWidth": 0,
|
||||||
|
"borderColor": "#ccc"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"boxplot": {
|
||||||
|
"itemStyle": {
|
||||||
|
"normal": {
|
||||||
|
"borderWidth": 0,
|
||||||
|
"borderColor": "#ccc"
|
||||||
|
},
|
||||||
|
"emphasis": {
|
||||||
|
"borderWidth": 0,
|
||||||
|
"borderColor": "#ccc"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"parallel": {
|
||||||
|
"itemStyle": {
|
||||||
|
"normal": {
|
||||||
|
"borderWidth": 0,
|
||||||
|
"borderColor": "#ccc"
|
||||||
|
},
|
||||||
|
"emphasis": {
|
||||||
|
"borderWidth": 0,
|
||||||
|
"borderColor": "#ccc"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"sankey": {
|
||||||
|
"itemStyle": {
|
||||||
|
"normal": {
|
||||||
|
"borderWidth": 0,
|
||||||
|
"borderColor": "#ccc"
|
||||||
|
},
|
||||||
|
"emphasis": {
|
||||||
|
"borderWidth": 0,
|
||||||
|
"borderColor": "#ccc"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"funnel": {
|
||||||
|
"itemStyle": {
|
||||||
|
"normal": {
|
||||||
|
"borderWidth": 0,
|
||||||
|
"borderColor": "#ccc"
|
||||||
|
},
|
||||||
|
"emphasis": {
|
||||||
|
"borderWidth": 0,
|
||||||
|
"borderColor": "#ccc"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"gauge": {
|
||||||
|
"itemStyle": {
|
||||||
|
"normal": {
|
||||||
|
"borderWidth": 0,
|
||||||
|
"borderColor": "#ccc"
|
||||||
|
},
|
||||||
|
"emphasis": {
|
||||||
|
"borderWidth": 0,
|
||||||
|
"borderColor": "#ccc"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"candlestick": {
|
||||||
|
"itemStyle": {
|
||||||
|
"normal": {
|
||||||
|
"color": "#edafda",
|
||||||
|
"color0": "transparent",
|
||||||
|
"borderColor": "#d680bc",
|
||||||
|
"borderColor0": "#8fd3e8",
|
||||||
|
"borderWidth": "2"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"graph": {
|
||||||
|
"itemStyle": {
|
||||||
|
"normal": {
|
||||||
|
"borderWidth": 0,
|
||||||
|
"borderColor": "#ccc"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"lineStyle": {
|
||||||
|
"normal": {
|
||||||
|
"width": 1,
|
||||||
|
"color": "#aaa"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"symbolSize": "6",
|
||||||
|
"symbol": "emptyCircle",
|
||||||
|
"smooth": true,
|
||||||
|
"color": [
|
||||||
|
"#2d8cf0",
|
||||||
|
"#19be6b",
|
||||||
|
"#f5ae4a",
|
||||||
|
"#9189d5",
|
||||||
|
"#56cae2",
|
||||||
|
"#cbb0e3"
|
||||||
|
],
|
||||||
|
"label": {
|
||||||
|
"normal": {
|
||||||
|
"textStyle": {
|
||||||
|
"color": "#eee"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"map": {
|
||||||
|
"itemStyle": {
|
||||||
|
"normal": {
|
||||||
|
"areaColor": "#f3f3f3",
|
||||||
|
"borderColor": "#516b91",
|
||||||
|
"borderWidth": 0.5
|
||||||
|
},
|
||||||
|
"emphasis": {
|
||||||
|
"areaColor": "rgba(165,231,240,1)",
|
||||||
|
"borderColor": "#516b91",
|
||||||
|
"borderWidth": 1
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"label": {
|
||||||
|
"normal": {
|
||||||
|
"textStyle": {
|
||||||
|
"color": "#000"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"emphasis": {
|
||||||
|
"textStyle": {
|
||||||
|
"color": "rgb(81,107,145)"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"geo": {
|
||||||
|
"itemStyle": {
|
||||||
|
"normal": {
|
||||||
|
"areaColor": "#f3f3f3",
|
||||||
|
"borderColor": "#516b91",
|
||||||
|
"borderWidth": 0.5
|
||||||
|
},
|
||||||
|
"emphasis": {
|
||||||
|
"areaColor": "rgba(165,231,240,1)",
|
||||||
|
"borderColor": "#516b91",
|
||||||
|
"borderWidth": 1
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"label": {
|
||||||
|
"normal": {
|
||||||
|
"textStyle": {
|
||||||
|
"color": "#000"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"emphasis": {
|
||||||
|
"textStyle": {
|
||||||
|
"color": "rgb(81,107,145)"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"categoryAxis": {
|
||||||
|
"axisLine": {
|
||||||
|
"show": true,
|
||||||
|
"lineStyle": {
|
||||||
|
"color": "#cccccc"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"axisTick": {
|
||||||
|
"show": false,
|
||||||
|
"lineStyle": {
|
||||||
|
"color": "#333"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"axisLabel": {
|
||||||
|
"show": true,
|
||||||
|
"textStyle": {
|
||||||
|
"color": "#fff"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"splitLine": {
|
||||||
|
"show": false,
|
||||||
|
"lineStyle": {
|
||||||
|
"color": [
|
||||||
|
"#eeeeee"
|
||||||
|
]
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"splitArea": {
|
||||||
|
"show": false,
|
||||||
|
"areaStyle": {
|
||||||
|
"color": [
|
||||||
|
"rgba(250,250,250,0.05)",
|
||||||
|
"rgba(200,200,200,0.02)"
|
||||||
|
]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"valueAxis": {
|
||||||
|
"axisLine": {
|
||||||
|
"show": true,
|
||||||
|
"lineStyle": {
|
||||||
|
"color": "#cccccc"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"axisTick": {
|
||||||
|
"show": false,
|
||||||
|
"lineStyle": {
|
||||||
|
"color": "#333"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"axisLabel": {
|
||||||
|
"show": true,
|
||||||
|
"textStyle": {
|
||||||
|
"color": "#fff"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"splitLine": {
|
||||||
|
"show": false,
|
||||||
|
"lineStyle": {
|
||||||
|
"color": [
|
||||||
|
"#eeeeee"
|
||||||
|
]
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"splitArea": {
|
||||||
|
"show": false,
|
||||||
|
"areaStyle": {
|
||||||
|
"color": [
|
||||||
|
"rgba(250,250,250,0.05)",
|
||||||
|
"rgba(200,200,200,0.02)"
|
||||||
|
]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"logAxis": {
|
||||||
|
"axisLine": {
|
||||||
|
"show": true,
|
||||||
|
"lineStyle": {
|
||||||
|
"color": "#cccccc"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"axisTick": {
|
||||||
|
"show": false,
|
||||||
|
"lineStyle": {
|
||||||
|
"color": "#333"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"axisLabel": {
|
||||||
|
"show": true,
|
||||||
|
"textStyle": {
|
||||||
|
"color": "#999999"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"splitLine": {
|
||||||
|
"show": true,
|
||||||
|
"lineStyle": {
|
||||||
|
"color": [
|
||||||
|
"#eeeeee"
|
||||||
|
]
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"splitArea": {
|
||||||
|
"show": false,
|
||||||
|
"areaStyle": {
|
||||||
|
"color": [
|
||||||
|
"rgba(250,250,250,0.05)",
|
||||||
|
"rgba(200,200,200,0.02)"
|
||||||
|
]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"timeAxis": {
|
||||||
|
"axisLine": {
|
||||||
|
"show": true,
|
||||||
|
"lineStyle": {
|
||||||
|
"color": "#cccccc"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"axisTick": {
|
||||||
|
"show": false,
|
||||||
|
"lineStyle": {
|
||||||
|
"color": "#333"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"axisLabel": {
|
||||||
|
"show": true,
|
||||||
|
"textStyle": {
|
||||||
|
"color": "#999999"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"splitLine": {
|
||||||
|
"show": true,
|
||||||
|
"lineStyle": {
|
||||||
|
"color": [
|
||||||
|
"#eeeeee"
|
||||||
|
]
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"splitArea": {
|
||||||
|
"show": false,
|
||||||
|
"areaStyle": {
|
||||||
|
"color": [
|
||||||
|
"rgba(250,250,250,0.05)",
|
||||||
|
"rgba(200,200,200,0.02)"
|
||||||
|
]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"toolbox": {
|
||||||
|
"iconStyle": {
|
||||||
|
"normal": {
|
||||||
|
"borderColor": "#999"
|
||||||
|
},
|
||||||
|
"emphasis": {
|
||||||
|
"borderColor": "#666"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"legend": {
|
||||||
|
"textStyle": {
|
||||||
|
"color": "#fff"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"tooltip": {
|
||||||
|
"axisPointer": {
|
||||||
|
"lineStyle": {
|
||||||
|
"color": "#ccc",
|
||||||
|
"width": 1
|
||||||
|
},
|
||||||
|
"crossStyle": {
|
||||||
|
"color": "#ccc",
|
||||||
|
"width": 1
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"timeline": {
|
||||||
|
"lineStyle": {
|
||||||
|
"color": "#8fd3e8",
|
||||||
|
"width": 1
|
||||||
|
},
|
||||||
|
"itemStyle": {
|
||||||
|
"normal": {
|
||||||
|
"color": "#8fd3e8",
|
||||||
|
"borderWidth": 1
|
||||||
|
},
|
||||||
|
"emphasis": {
|
||||||
|
"color": "#8fd3e8"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"controlStyle": {
|
||||||
|
"normal": {
|
||||||
|
"color": "#8fd3e8",
|
||||||
|
"borderColor": "#8fd3e8",
|
||||||
|
"borderWidth": 0.5
|
||||||
|
},
|
||||||
|
"emphasis": {
|
||||||
|
"color": "#8fd3e8",
|
||||||
|
"borderColor": "#8fd3e8",
|
||||||
|
"borderWidth": 0.5
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"checkpointStyle": {
|
||||||
|
"color": "#8fd3e8",
|
||||||
|
"borderColor": "rgba(138,124,168,0.37)"
|
||||||
|
},
|
||||||
|
"label": {
|
||||||
|
"normal": {
|
||||||
|
"textStyle": {
|
||||||
|
"color": "#8fd3e8"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"emphasis": {
|
||||||
|
"textStyle": {
|
||||||
|
"color": "#8fd3e8"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"visualMap": {
|
||||||
|
"color": [
|
||||||
|
"#516b91",
|
||||||
|
"#59c4e6",
|
||||||
|
"#a5e7f0"
|
||||||
|
]
|
||||||
|
},
|
||||||
|
"dataZoom": {
|
||||||
|
"backgroundColor": "rgba(0,0,0,0)",
|
||||||
|
"dataBackgroundColor": "rgba(255,255,255,0.3)",
|
||||||
|
"fillerColor": "rgba(167,183,204,0.4)",
|
||||||
|
"handleColor": "#a7b7cc",
|
||||||
|
"handleSize": "100%",
|
||||||
|
"textStyle": {
|
||||||
|
"color": "#333"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"markPoint": {
|
||||||
|
"label": {
|
||||||
|
"normal": {
|
||||||
|
"textStyle": {
|
||||||
|
"color": "#eee"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"emphasis": {
|
||||||
|
"textStyle": {
|
||||||
|
"color": "#eee"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -16,10 +16,15 @@ import router from './router'
|
||||||
import { plugin } from "vue-function-api";
|
import { plugin } from "vue-function-api";
|
||||||
import '@/icons' // icon
|
import '@/icons' // icon
|
||||||
import '@/permission' // permission control
|
import '@/permission' // permission control
|
||||||
import tableHeight from '@/directive/el-table/index'
|
import tableHeight from '@/directive/el-table/index';
|
||||||
|
import echarts from 'echarts';
|
||||||
|
import dataV from '@jiaminghi/data-view';
|
||||||
|
// 引入全局css
|
||||||
|
import './assets/scss/style.scss';
|
||||||
Vue.component(CollapseTransition.name, CollapseTransition);
|
Vue.component(CollapseTransition.name, CollapseTransition);
|
||||||
Vue.use(tableHeight).use(plugin);
|
Vue.use(tableHeight).use(plugin);
|
||||||
|
Vue.prototype.$echarts = echarts;
|
||||||
|
Vue.use(dataV);
|
||||||
/**
|
/**
|
||||||
* If you don't want to use mock-server
|
* If you don't want to use mock-server
|
||||||
* you want to use MockJs for mock api
|
* you want to use MockJs for mock api
|
||||||
|
|
|
||||||
|
|
@ -36,7 +36,6 @@ export const constantRoutes = [
|
||||||
component: () => import('@/views/login/index'),
|
component: () => import('@/views/login/index'),
|
||||||
hidden: true
|
hidden: true
|
||||||
},
|
},
|
||||||
|
|
||||||
{
|
{
|
||||||
path: '/404',
|
path: '/404',
|
||||||
component: () => import('@/views/404'),
|
component: () => import('@/views/404'),
|
||||||
|
|
@ -53,6 +52,11 @@ export const constantRoutes = [
|
||||||
meta: { title: '首页', icon: 'dashboard', affix: true,keepAlive: false }
|
meta: { title: '首页', icon: 'dashboard', affix: true,keepAlive: false }
|
||||||
}]
|
}]
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
path: '/index',
|
||||||
|
component: () => import('@/views/bigScreen/index'),
|
||||||
|
meta: { title: '大屏', icon: 'dashboard', affix: true,keepAlive: false }
|
||||||
|
},
|
||||||
{
|
{
|
||||||
path: '/changepassword',
|
path: '/changepassword',
|
||||||
component: Layout,
|
component: Layout,
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,57 @@
|
||||||
|
// 屏幕适配 mixin 函数
|
||||||
|
|
||||||
|
// * 默认缩放值
|
||||||
|
const scale = {
|
||||||
|
width: '1',
|
||||||
|
height: '1',
|
||||||
|
}
|
||||||
|
|
||||||
|
// * 设计稿尺寸（px）
|
||||||
|
const baseWidth = 1920
|
||||||
|
const baseHeight = 1080
|
||||||
|
|
||||||
|
// * 需保持的比例（默认1.77778）
|
||||||
|
const baseProportion = parseFloat((baseWidth / baseHeight).toFixed(5))
|
||||||
|
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
// * 定时函数
|
||||||
|
drawTiming: null
|
||||||
|
}
|
||||||
|
},
|
||||||
|
mounted () {
|
||||||
|
this.calcRate()
|
||||||
|
window.addEventListener('resize', this.resize)
|
||||||
|
},
|
||||||
|
beforeDestroy () {
|
||||||
|
window.removeEventListener('resize', this.resize)
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
calcRate () {
|
||||||
|
const appRef = this.$refs["appRef"]
|
||||||
|
if (!appRef) return
|
||||||
|
// 当前宽高比
|
||||||
|
const currentRate = parseFloat((window.innerWidth / window.innerHeight).toFixed(5))
|
||||||
|
if (appRef) {
|
||||||
|
if (currentRate > baseProportion) {
|
||||||
|
// 表示更宽
|
||||||
|
scale.width = ((window.innerHeight * baseProportion) / baseWidth).toFixed(5)
|
||||||
|
scale.height = (window.innerHeight / baseHeight).toFixed(5)
|
||||||
|
appRef.style.transform = `scale(${scale.width}, ${scale.height}) translate(-50%, -50%)`
|
||||||
|
} else {
|
||||||
|
// 表示更高
|
||||||
|
scale.height = ((window.innerWidth / baseProportion) / baseHeight).toFixed(5)
|
||||||
|
scale.width = (window.innerWidth / baseWidth).toFixed(5)
|
||||||
|
appRef.style.transform = `scale(${scale.width}, ${scale.height}) translate(-50%, -50%)`
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
resize () {
|
||||||
|
clearTimeout(this.drawTiming)
|
||||||
|
this.drawTiming = setTimeout(() => {
|
||||||
|
this.calcRate()
|
||||||
|
}, 200)
|
||||||
|
}
|
||||||
|
},
|
||||||
|
}
|
||||||
|
|
@ -382,3 +382,56 @@ const arrChange = arr => arr.map(item => {
|
||||||
}
|
}
|
||||||
return res
|
return res
|
||||||
})
|
})
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @param {Function} fn 防抖函数
|
||||||
|
* @param {Number} delay 延迟时间
|
||||||
|
*/
|
||||||
|
/*export function debounce(fn, delay) {
|
||||||
|
let timer;
|
||||||
|
return function () {
|
||||||
|
const context = this;
|
||||||
|
const args = arguments;
|
||||||
|
clearTimeout(timer);
|
||||||
|
timer = setTimeout(function () {
|
||||||
|
fn.apply(context, args);
|
||||||
|
}, delay);
|
||||||
|
};
|
||||||
|
}*/
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @param {date} time 需要转换的时间
|
||||||
|
* @param {String} fmt 需要转换的格式 如 yyyy-MM-dd、yyyy-MM-dd HH:mm:ss
|
||||||
|
*/
|
||||||
|
export function formatTimeBigScreen(time, fmt) {
|
||||||
|
if (!time) return '';
|
||||||
|
else {
|
||||||
|
const date = new Date(time);
|
||||||
|
const o = {
|
||||||
|
'M+': date.getMonth() + 1,
|
||||||
|
'd+': date.getDate(),
|
||||||
|
'H+': date.getHours(),
|
||||||
|
'm+': date.getMinutes(),
|
||||||
|
's+': date.getSeconds(),
|
||||||
|
'q+': Math.floor((date.getMonth() + 3) / 3),
|
||||||
|
S: date.getMilliseconds(),
|
||||||
|
};
|
||||||
|
if (/(y+)/.test(fmt))
|
||||||
|
fmt = fmt.replace(
|
||||||
|
RegExp.$1,
|
||||||
|
(date.getFullYear() + '').substr(4 - RegExp.$1.length)
|
||||||
|
);
|
||||||
|
for (const k in o) {
|
||||||
|
if (new RegExp('(' + k + ')').test(fmt)) {
|
||||||
|
fmt = fmt.replace(
|
||||||
|
RegExp.$1,
|
||||||
|
RegExp.$1.length === 1
|
||||||
|
? o[k]
|
||||||
|
: ('00' + o[k]).substr(('' + o[k]).length)
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return fmt;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,32 @@
|
||||||
|
// 混入代码 resize-mixins.js
|
||||||
|
import { debounce } from '@/utils';
|
||||||
|
const resizeChartMethod = '$__resizeChartMethod';
|
||||||
|
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
// 在组件内部将图表 init 的引用映射到 chart 属性上
|
||||||
|
return {
|
||||||
|
chart: null,
|
||||||
|
};
|
||||||
|
},
|
||||||
|
created() {
|
||||||
|
window.addEventListener('resize', this[resizeChartMethod], false);
|
||||||
|
},
|
||||||
|
activated() {
|
||||||
|
// 防止 keep-alive 之后图表变形
|
||||||
|
if (this.chart) {
|
||||||
|
this.chart.resize()
|
||||||
|
}
|
||||||
|
},
|
||||||
|
beforeDestroy() {
|
||||||
|
window.removeEventListener('reisze', this[resizeChartMethod]);
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
// 防抖函数来控制 resize 的频率
|
||||||
|
[resizeChartMethod]: debounce(function() {
|
||||||
|
if (this.chart) {
|
||||||
|
this.chart.resize();
|
||||||
|
}
|
||||||
|
}, 300),
|
||||||
|
},
|
||||||
|
};
|
||||||
|
|
@ -0,0 +1,308 @@
|
||||||
|
<template>
|
||||||
|
<div id="bottomLeft">
|
||||||
|
<div class="bg-color-black">
|
||||||
|
<div class="d-flex pt-2 pl-2">
|
||||||
|
<span>
|
||||||
|
<el-icon class="el-icon-s-data"></el-icon>
|
||||||
|
</span>
|
||||||
|
<div class="d-flex">
|
||||||
|
<span class="fs-xl text mx-2">数据统计图</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<Echart
|
||||||
|
:options="options"
|
||||||
|
id="bottomLeftChart"
|
||||||
|
height="480px"
|
||||||
|
width="100%"
|
||||||
|
></Echart>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import Echart from '@/components/echart'
|
||||||
|
export default {
|
||||||
|
components: {
|
||||||
|
Echart
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
options: {},
|
||||||
|
cdata: {
|
||||||
|
category: [
|
||||||
|
"市区",
|
||||||
|
"万州",
|
||||||
|
"江北",
|
||||||
|
"南岸",
|
||||||
|
"北碚",
|
||||||
|
"綦南",
|
||||||
|
"长寿",
|
||||||
|
"永川",
|
||||||
|
"璧山",
|
||||||
|
"江津",
|
||||||
|
"城口",
|
||||||
|
"大足",
|
||||||
|
"垫江",
|
||||||
|
"丰都",
|
||||||
|
"奉节",
|
||||||
|
"合川",
|
||||||
|
"江津区",
|
||||||
|
"开州",
|
||||||
|
"南川",
|
||||||
|
"彭水",
|
||||||
|
"黔江",
|
||||||
|
"石柱",
|
||||||
|
"铜梁",
|
||||||
|
"潼南",
|
||||||
|
"巫山",
|
||||||
|
"巫溪",
|
||||||
|
"武隆",
|
||||||
|
"秀山",
|
||||||
|
"酉阳",
|
||||||
|
"云阳",
|
||||||
|
"忠县",
|
||||||
|
"川东",
|
||||||
|
"检修"
|
||||||
|
],
|
||||||
|
lineData: [
|
||||||
|
18092,
|
||||||
|
20728,
|
||||||
|
24045,
|
||||||
|
28348,
|
||||||
|
32808,
|
||||||
|
36097,
|
||||||
|
39867,
|
||||||
|
44715,
|
||||||
|
48444,
|
||||||
|
50415,
|
||||||
|
56061,
|
||||||
|
62677,
|
||||||
|
59521,
|
||||||
|
67560,
|
||||||
|
18092,
|
||||||
|
20728,
|
||||||
|
24045,
|
||||||
|
28348,
|
||||||
|
32808,
|
||||||
|
36097,
|
||||||
|
39867,
|
||||||
|
44715,
|
||||||
|
48444,
|
||||||
|
50415,
|
||||||
|
36097,
|
||||||
|
39867,
|
||||||
|
44715,
|
||||||
|
48444,
|
||||||
|
50415,
|
||||||
|
50061,
|
||||||
|
32677,
|
||||||
|
49521,
|
||||||
|
32808
|
||||||
|
],
|
||||||
|
barData: [
|
||||||
|
4600,
|
||||||
|
5000,
|
||||||
|
5500,
|
||||||
|
6500,
|
||||||
|
7500,
|
||||||
|
8500,
|
||||||
|
9900,
|
||||||
|
12500,
|
||||||
|
14000,
|
||||||
|
21500,
|
||||||
|
23200,
|
||||||
|
24450,
|
||||||
|
25250,
|
||||||
|
33300,
|
||||||
|
4600,
|
||||||
|
5000,
|
||||||
|
5500,
|
||||||
|
6500,
|
||||||
|
7500,
|
||||||
|
8500,
|
||||||
|
9900,
|
||||||
|
22500,
|
||||||
|
14000,
|
||||||
|
21500,
|
||||||
|
8500,
|
||||||
|
9900,
|
||||||
|
12500,
|
||||||
|
14000,
|
||||||
|
21500,
|
||||||
|
23200,
|
||||||
|
24450,
|
||||||
|
25250,
|
||||||
|
7500
|
||||||
|
],
|
||||||
|
rateData: []
|
||||||
|
}
|
||||||
|
};
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
this.setData();
|
||||||
|
},
|
||||||
|
watch: {
|
||||||
|
cdata: {
|
||||||
|
handler(newData) {
|
||||||
|
this.options = {
|
||||||
|
title: {
|
||||||
|
text: "",
|
||||||
|
},
|
||||||
|
tooltip: {
|
||||||
|
trigger: "axis",
|
||||||
|
backgroundColor: "rgba(255,255,255,0.1)",
|
||||||
|
axisPointer: {
|
||||||
|
type: "shadow",
|
||||||
|
label: {
|
||||||
|
show: true,
|
||||||
|
backgroundColor: "#7B7DDC"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
legend: {
|
||||||
|
data: ["已贯通", "计划贯通", "贯通率"],
|
||||||
|
textStyle: {
|
||||||
|
color: "#B4B4B4"
|
||||||
|
},
|
||||||
|
top: "0%"
|
||||||
|
},
|
||||||
|
grid: {
|
||||||
|
x: "8%",
|
||||||
|
width: "88%",
|
||||||
|
y: "4%"
|
||||||
|
},
|
||||||
|
xAxis: {
|
||||||
|
data: newData.category,
|
||||||
|
axisLine: {
|
||||||
|
lineStyle: {
|
||||||
|
color: "#B4B4B4"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
axisTick: {
|
||||||
|
show: false
|
||||||
|
}
|
||||||
|
},
|
||||||
|
yAxis: [
|
||||||
|
{
|
||||||
|
splitLine: {show: false},
|
||||||
|
axisLine: {
|
||||||
|
lineStyle: {
|
||||||
|
color: "#B4B4B4"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
axisLabel: {
|
||||||
|
formatter: "{value} "
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
splitLine: {show: false},
|
||||||
|
axisLine: {
|
||||||
|
lineStyle: {
|
||||||
|
color: "#B4B4B4"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
axisLabel: {
|
||||||
|
formatter: "{value} "
|
||||||
|
}
|
||||||
|
}
|
||||||
|
],
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
name: "贯通率",
|
||||||
|
type: "line",
|
||||||
|
smooth: true,
|
||||||
|
showAllSymbol: true,
|
||||||
|
symbol: "emptyCircle",
|
||||||
|
symbolSize: 8,
|
||||||
|
yAxisIndex: 1,
|
||||||
|
itemStyle: {
|
||||||
|
normal: {
|
||||||
|
color: "#F02FC2"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
data: newData.rateData
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "已贯通",
|
||||||
|
type: "bar",
|
||||||
|
barWidth: 10,
|
||||||
|
itemStyle: {
|
||||||
|
normal: {
|
||||||
|
barBorderRadius: 5,
|
||||||
|
color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||||
|
{offset: 0, color: "#956FD4"},
|
||||||
|
{offset: 1, color: "#3EACE5"}
|
||||||
|
])
|
||||||
|
}
|
||||||
|
},
|
||||||
|
data: newData.barData
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "计划贯通",
|
||||||
|
type: "bar",
|
||||||
|
barGap: "-100%",
|
||||||
|
barWidth: 10,
|
||||||
|
itemStyle: {
|
||||||
|
normal: {
|
||||||
|
barBorderRadius: 5,
|
||||||
|
color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||||
|
{offset: 0, color: "rgba(156,107,211,0.8)"},
|
||||||
|
{offset: 0.2, color: "rgba(156,107,211,0.5)"},
|
||||||
|
{offset: 1, color: "rgba(156,107,211,0.2)"}
|
||||||
|
])
|
||||||
|
}
|
||||||
|
},
|
||||||
|
z: -12,
|
||||||
|
data: newData.lineData
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
},
|
||||||
|
immediate: true,
|
||||||
|
deep: true
|
||||||
|
},
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
// 根据自己的业务情况修改
|
||||||
|
setData() {
|
||||||
|
for (let i = 0; i < this.cdata.barData.length - 1; i++) {
|
||||||
|
let rate = this.cdata.barData[i] / this.cdata.lineData[i];
|
||||||
|
this.cdata.rateData.push(rate.toFixed(2));
|
||||||
|
}
|
||||||
|
},
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
$box-height: 520px;
|
||||||
|
$box-width: 100%;
|
||||||
|
#bottomLeft {
|
||||||
|
padding: 20px 16px;
|
||||||
|
height: $box-height;
|
||||||
|
width: $box-width;
|
||||||
|
border-radius: 5px;
|
||||||
|
|
||||||
|
.bg-color-black {
|
||||||
|
height: $box-height - 35px;
|
||||||
|
border-radius: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.text {
|
||||||
|
color: #c3cbde;
|
||||||
|
}
|
||||||
|
|
||||||
|
.chart-box {
|
||||||
|
margin-top: 16px;
|
||||||
|
width: 170px;
|
||||||
|
height: 170px;
|
||||||
|
|
||||||
|
.active-ring-name {
|
||||||
|
padding-top: 10px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,466 @@
|
||||||
|
<template>
|
||||||
|
<div id="bottomRight">
|
||||||
|
<div class="bg-color-black">
|
||||||
|
<div class="d-flex pt-2 pl-2">
|
||||||
|
<span>
|
||||||
|
<el-icon class="el-icon-s-marketing"></el-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:6rem;" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<Echart
|
||||||
|
:options="options"
|
||||||
|
id="centreLeft1Chart"
|
||||||
|
height="480px"
|
||||||
|
width="100%"
|
||||||
|
></Echart>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import Echart from '@/components/echart'
|
||||||
|
export default {
|
||||||
|
data () {
|
||||||
|
return {
|
||||||
|
drawTiming: null,
|
||||||
|
cdata: {
|
||||||
|
year: null,
|
||||||
|
weekCategory: [],
|
||||||
|
radarData: [],
|
||||||
|
radarDataAvg: [],
|
||||||
|
maxData: 12000,
|
||||||
|
weekMaxData: [],
|
||||||
|
weekLineData: []
|
||||||
|
},
|
||||||
|
options: {},
|
||||||
|
// 定义颜色
|
||||||
|
colorList: {
|
||||||
|
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)"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
components: {
|
||||||
|
Echart
|
||||||
|
},
|
||||||
|
watch: {
|
||||||
|
cdata: {
|
||||||
|
handler (newData) {
|
||||||
|
this.options = {
|
||||||
|
title: {
|
||||||
|
text: "",
|
||||||
|
textStyle: {
|
||||||
|
color: "#D3D6DD",
|
||||||
|
fontSize: 24,
|
||||||
|
fontWeight: "normal"
|
||||||
|
},
|
||||||
|
subtext: newData.year + "/" + newData.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: this.colorList.linearYtoG,
|
||||||
|
opacity: 0.6
|
||||||
|
}
|
||||||
|
},
|
||||||
|
splitLine: {
|
||||||
|
lineStyle: {
|
||||||
|
color: this.colorList.linearYtoG,
|
||||||
|
opacity: 0.6
|
||||||
|
}
|
||||||
|
},
|
||||||
|
splitArea: {
|
||||||
|
areaStyle: {
|
||||||
|
color: "#fff",
|
||||||
|
opacity: 0.1,
|
||||||
|
shadowBlur: 25,
|
||||||
|
shadowColor: "#000",
|
||||||
|
shadowOffsetX: 0,
|
||||||
|
shadowOffsetY: 5
|
||||||
|
}
|
||||||
|
},
|
||||||
|
indicator: [
|
||||||
|
{
|
||||||
|
name: "服务态度",
|
||||||
|
max: newData.maxData
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "产品质量",
|
||||||
|
max: 10
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "任务效率",
|
||||||
|
max: 12
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "售后保障",
|
||||||
|
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: newData.weekCategory
|
||||||
|
},
|
||||||
|
// 下方Y轴
|
||||||
|
yAxis: {
|
||||||
|
name: "工单",
|
||||||
|
nameLocation: "end",
|
||||||
|
nameGap: 24,
|
||||||
|
nameTextStyle: {
|
||||||
|
color: "rgba(255,255,255,.5)",
|
||||||
|
fontSize: 14
|
||||||
|
},
|
||||||
|
max: newData.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: newData.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: newData.radarData[6],
|
||||||
|
name: "我的指标",
|
||||||
|
itemStyle: {
|
||||||
|
normal: {
|
||||||
|
color: "#43dfa2"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
lineStyle: {
|
||||||
|
normal: {
|
||||||
|
opacity: 0
|
||||||
|
}
|
||||||
|
},
|
||||||
|
areaStyle: {
|
||||||
|
normal: {
|
||||||
|
color: this.colorList.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: this.colorList.linearBtoG,
|
||||||
|
width: 3
|
||||||
|
}
|
||||||
|
},
|
||||||
|
areaStyle: {
|
||||||
|
normal: {
|
||||||
|
color: this.colorList.areaBtoG
|
||||||
|
}
|
||||||
|
},
|
||||||
|
data: newData.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: newData.weekMaxData,
|
||||||
|
animation: false
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
},
|
||||||
|
immediate: true,
|
||||||
|
deep: true
|
||||||
|
}
|
||||||
|
},
|
||||||
|
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 lang="scss" class>
|
||||||
|
$box-height: 520px;
|
||||||
|
$box-width: 100%;
|
||||||
|
#bottomRight {
|
||||||
|
padding: 14px 16px;
|
||||||
|
height: $box-height;
|
||||||
|
width: $box-width;
|
||||||
|
border-radius: 5px;
|
||||||
|
.bg-color-black {
|
||||||
|
height: $box-height - 30px;
|
||||||
|
border-radius: 10px;
|
||||||
|
}
|
||||||
|
.text {
|
||||||
|
color: #c3cbde;
|
||||||
|
}
|
||||||
|
//下滑线动态
|
||||||
|
.decoration2 {
|
||||||
|
position: absolute;
|
||||||
|
right: 0.125rem;
|
||||||
|
}
|
||||||
|
.chart-box {
|
||||||
|
margin-top: 16px;
|
||||||
|
width: 170px;
|
||||||
|
height: 170px;
|
||||||
|
.active-ring-name {
|
||||||
|
padding-top: 10px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,271 @@
|
||||||
|
<template>
|
||||||
|
<div id="center">
|
||||||
|
<div class="up">
|
||||||
|
<div
|
||||||
|
class="bg-color-black item"
|
||||||
|
v-for="item in titleItem"
|
||||||
|
:key="item.title"
|
||||||
|
>
|
||||||
|
<p class="ml-3 colorBlue fw-b fs-xl">{{ item.title }}</p>
|
||||||
|
<div>
|
||||||
|
<dv-digital-flop
|
||||||
|
class="dv-dig-flop ml-1 mt-2 pl-3"
|
||||||
|
:config="item.number"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="down">
|
||||||
|
<div class="ranking bg-color-black">
|
||||||
|
<span>
|
||||||
|
<el-icon class="el-icon-pie-chart"></el-icon>
|
||||||
|
</span>
|
||||||
|
<span class="fs-xl text mx-2 mb-1 pl-3">年度负责人组件达标榜</span>
|
||||||
|
<dv-scroll-ranking-board class="dv-scr-rank-board mt-1" :config="ranking" />
|
||||||
|
</div>
|
||||||
|
<div class="percent">
|
||||||
|
<div class="item bg-color-black">
|
||||||
|
<span>今日任务通过率</span>
|
||||||
|
<CenterChart
|
||||||
|
:id="rate[0].id"
|
||||||
|
:tips="rate[0].tips"
|
||||||
|
:colorObj="rate[0].colorData"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div class="item bg-color-black">
|
||||||
|
<span>今日任务达标率</span>
|
||||||
|
<CenterChart
|
||||||
|
:id="rate[1].id"
|
||||||
|
:tips="rate[1].tips"
|
||||||
|
:colorObj="rate[1].colorData"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div class="water">
|
||||||
|
<dv-water-level-pond class="dv-wa-le-po" :config="water" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import CenterChart from '@/components/echart/chartRate.vue'
|
||||||
|
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
titleItem: [
|
||||||
|
{
|
||||||
|
title: '今年累计合同数',
|
||||||
|
number: {
|
||||||
|
number: [12],//数字数值
|
||||||
|
toFixed: 0,//小数位数
|
||||||
|
textAlign: 'left',//水平对齐方式
|
||||||
|
content: '{nt}',//内容模版//rowGap行间距
|
||||||
|
style: {//样式配置
|
||||||
|
fontSize: 26
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '本月累计订单数',
|
||||||
|
number: {
|
||||||
|
number: [12],
|
||||||
|
toFixed: 0,
|
||||||
|
textAlign: 'left',
|
||||||
|
content: '{nt}',
|
||||||
|
style: {
|
||||||
|
fontSize: 26
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '今日在制任务数',
|
||||||
|
number: {
|
||||||
|
number: [2],
|
||||||
|
toFixed: 0,
|
||||||
|
textAlign: 'left',
|
||||||
|
content: '{nt}',
|
||||||
|
style: {
|
||||||
|
fontSize: 26
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '本月累计交付产品数',
|
||||||
|
number: {
|
||||||
|
number: [8],
|
||||||
|
toFixed: 1,
|
||||||
|
textAlign: 'left',
|
||||||
|
content: '{nt}',
|
||||||
|
style: {
|
||||||
|
fontSize: 26
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '今年成品合格率',
|
||||||
|
number: {
|
||||||
|
number: [96],
|
||||||
|
toFixed: 1,
|
||||||
|
textAlign: 'left',
|
||||||
|
content: '{nt}%',
|
||||||
|
style: {
|
||||||
|
fontSize: 26
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '今年累计不合格产品数',
|
||||||
|
number: {
|
||||||
|
number: [2],
|
||||||
|
toFixed: 0,
|
||||||
|
textAlign: 'left',
|
||||||
|
content: '{nt}',
|
||||||
|
style: {
|
||||||
|
fontSize: 26
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
],
|
||||||
|
ranking: {
|
||||||
|
data: [
|
||||||
|
{
|
||||||
|
name: '冷加工',
|
||||||
|
value: 55
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '热弯成型',
|
||||||
|
value: 120
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '化学钢化',
|
||||||
|
value: 78
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '镀膜',
|
||||||
|
value: 66
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '夹层',
|
||||||
|
value: 80
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '包边',
|
||||||
|
value: 80
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '装框',
|
||||||
|
value: 80
|
||||||
|
}
|
||||||
|
],
|
||||||
|
carousel: 'single',
|
||||||
|
unit: '/件'
|
||||||
|
},
|
||||||
|
water: {
|
||||||
|
data: [24, 45],
|
||||||
|
shape: 'roundRect',
|
||||||
|
formatter: '{value}%',
|
||||||
|
waveNum: 3
|
||||||
|
},
|
||||||
|
// 通过率和达标率的组件复用数据
|
||||||
|
rate: [
|
||||||
|
{
|
||||||
|
id: 'centerRate1',
|
||||||
|
tips: 60,
|
||||||
|
colorData: {
|
||||||
|
textStyle: '#3fc0fb',
|
||||||
|
series: {
|
||||||
|
color: ['#00bcd44a', 'transparent'],
|
||||||
|
dataColor: {
|
||||||
|
normal: '#03a9f4',
|
||||||
|
shadowColor: '#97e2f5'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'centerRate2',
|
||||||
|
tips: 40,
|
||||||
|
colorData: {
|
||||||
|
textStyle: '#67e0e3',
|
||||||
|
series: {
|
||||||
|
color: ['#faf3a378', 'transparent'],
|
||||||
|
dataColor: {
|
||||||
|
normal: '#ff9800',
|
||||||
|
shadowColor: '#fcebad'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
},
|
||||||
|
components: {
|
||||||
|
CenterChart
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
#center {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
.up {
|
||||||
|
width: 100%;
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
justify-content: space-around;
|
||||||
|
.item {
|
||||||
|
border-radius: 6px;
|
||||||
|
padding-top: 8px;
|
||||||
|
margin-top: 8px;
|
||||||
|
width: 32%;
|
||||||
|
height: 70px;
|
||||||
|
.dv-dig-flop {
|
||||||
|
width: 150px;
|
||||||
|
height: 30px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.down {
|
||||||
|
padding: 6px 4px;
|
||||||
|
padding-bottom: 0;
|
||||||
|
width: 100%;
|
||||||
|
display: flex;
|
||||||
|
height: 255px;
|
||||||
|
justify-content: space-between;
|
||||||
|
.bg-color-black {
|
||||||
|
border-radius: 5px;
|
||||||
|
}
|
||||||
|
.ranking {
|
||||||
|
padding: 10px;
|
||||||
|
width: 59%;
|
||||||
|
.dv-scr-rank-board {
|
||||||
|
height: 225px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.percent {
|
||||||
|
width: 40%;
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
.item {
|
||||||
|
width: 50%;
|
||||||
|
height: 120px;
|
||||||
|
span {
|
||||||
|
margin-top: 8px;
|
||||||
|
font-size: 14px;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.water {
|
||||||
|
width: 100%;
|
||||||
|
.dv-wa-le-po {
|
||||||
|
height: 120px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,242 @@
|
||||||
|
<template>
|
||||||
|
<div id="centerLeft1">
|
||||||
|
<div class="bg-color-black">
|
||||||
|
<div class="d-flex pt-2 pl-2">
|
||||||
|
<span>
|
||||||
|
<el-icon class="el-icon-s-help"></el-icon>
|
||||||
|
</span>
|
||||||
|
<div class="d-flex">
|
||||||
|
<span class="fs-xl text mx-2">任务通过率</span>
|
||||||
|
<dv-decoration-3 class="dv-dec-3"/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="d-flex jc-center">
|
||||||
|
<Echart
|
||||||
|
:options="options"
|
||||||
|
id="centreLeft1Chart"
|
||||||
|
height="220px"
|
||||||
|
width="260px"
|
||||||
|
></Echart>
|
||||||
|
</div>
|
||||||
|
<!-- 4个主要的数据 -->
|
||||||
|
<div class="bottom-data">
|
||||||
|
<div
|
||||||
|
class="item-box mt-2"
|
||||||
|
v-for="(item, index) in numberData"
|
||||||
|
:key="index"
|
||||||
|
>
|
||||||
|
<div class="d-flex">
|
||||||
|
<!--<span class="coin">￥</span>-->
|
||||||
|
<dv-digital-flop class="dv-digital-flop" :config="item.number"/>
|
||||||
|
</div>
|
||||||
|
<p class="text" style="text-align: center;">
|
||||||
|
{{ item.text }}
|
||||||
|
<span class="colorYellow">(件)</span>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import Echart from '@/components/echart'
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
options: {},
|
||||||
|
numberData: [
|
||||||
|
{
|
||||||
|
number: {
|
||||||
|
number: [15],
|
||||||
|
toFixed: 1,
|
||||||
|
textAlign: 'left',
|
||||||
|
content: '{nt}',
|
||||||
|
style: {
|
||||||
|
fontSize: 24
|
||||||
|
}
|
||||||
|
},
|
||||||
|
text: '今日构建总量'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
number: {
|
||||||
|
number: [1144],
|
||||||
|
toFixed: 1,
|
||||||
|
textAlign: 'left',
|
||||||
|
content: '{nt}',
|
||||||
|
style: {
|
||||||
|
fontSize: 24
|
||||||
|
}
|
||||||
|
},
|
||||||
|
text: '总共完成数量'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
number: {
|
||||||
|
number: [361],
|
||||||
|
toFixed: 1,
|
||||||
|
textAlign: 'left',
|
||||||
|
content: '{nt}',
|
||||||
|
style: {
|
||||||
|
fontSize: 24
|
||||||
|
}
|
||||||
|
},
|
||||||
|
text: '正在编译数量'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
number: {
|
||||||
|
number: [157],
|
||||||
|
toFixed: 1,
|
||||||
|
textAlign: 'left',
|
||||||
|
content: '{nt}',
|
||||||
|
style: {
|
||||||
|
fontSize: 24
|
||||||
|
}
|
||||||
|
},
|
||||||
|
text: '未通过数量'
|
||||||
|
}
|
||||||
|
],
|
||||||
|
cdata: {
|
||||||
|
xData: ["data1", "data2", "data3", "data4", "data5", "data6"],
|
||||||
|
seriesData: [
|
||||||
|
{value: 10, name: "data1"},
|
||||||
|
{value: 5, name: "data2"},
|
||||||
|
{value: 15, name: "data3"},
|
||||||
|
{value: 25, name: "data4"},
|
||||||
|
{value: 20, name: "data5"},
|
||||||
|
{value: 35, name: "data6"}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
components: {
|
||||||
|
Echart
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
this.changeTiming()
|
||||||
|
},
|
||||||
|
watch: {
|
||||||
|
cdata: {
|
||||||
|
handler(newData) {
|
||||||
|
this.options = {
|
||||||
|
color: [
|
||||||
|
"#37a2da",
|
||||||
|
"#32c5e9",
|
||||||
|
"#9fe6b8",
|
||||||
|
"#ffdb5c",
|
||||||
|
"#ff9f7f",
|
||||||
|
"#fb7293",
|
||||||
|
"#e7bcf3",
|
||||||
|
"#8378ea"
|
||||||
|
],
|
||||||
|
tooltip: {
|
||||||
|
trigger: "item",
|
||||||
|
formatter: "{a} <br/>{b} : {c} ({d}%)"
|
||||||
|
},
|
||||||
|
toolbox: {
|
||||||
|
show: true
|
||||||
|
},
|
||||||
|
calculable: true,
|
||||||
|
legend: {
|
||||||
|
orient: "horizontal",
|
||||||
|
icon: "circle",
|
||||||
|
bottom: 0,
|
||||||
|
x: "center",
|
||||||
|
data: newData.xData,
|
||||||
|
textStyle: {
|
||||||
|
color: "#fff"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
name: "通过率统计",
|
||||||
|
type: "pie",
|
||||||
|
radius: [10, 50],
|
||||||
|
roseType: "area",
|
||||||
|
center: ["50%", "40%"],
|
||||||
|
data: newData.seriesData
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
},
|
||||||
|
immediate: true,
|
||||||
|
deep: true
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
changeTiming() {
|
||||||
|
setInterval(() => {
|
||||||
|
this.changeNumber()
|
||||||
|
}, 3000)
|
||||||
|
},
|
||||||
|
changeNumber() {
|
||||||
|
this.numberData.forEach((item, index) => {
|
||||||
|
item.number.number[0] += ++index
|
||||||
|
item.number = {...item.number}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
$box-width: 300px;
|
||||||
|
$box-height: 410px;
|
||||||
|
|
||||||
|
#centerLeft1 {
|
||||||
|
padding: 16px;
|
||||||
|
height: $box-height;
|
||||||
|
width: 100%;
|
||||||
|
border-radius: 10px;
|
||||||
|
|
||||||
|
.bg-color-black {
|
||||||
|
height: $box-height - 30px;
|
||||||
|
border-radius: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.text {
|
||||||
|
color: #c3cbde;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dv-dec-3 {
|
||||||
|
position: relative;
|
||||||
|
width: 100px;
|
||||||
|
height: 20px;
|
||||||
|
top: -3px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bottom-data {
|
||||||
|
.item-box {
|
||||||
|
& > div {
|
||||||
|
padding-right: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
font-size: 14px;
|
||||||
|
float: right;
|
||||||
|
position: relative;
|
||||||
|
width: 50%;
|
||||||
|
color: #d3d6dd;
|
||||||
|
|
||||||
|
.dv-digital-flop {
|
||||||
|
width: 120px;
|
||||||
|
height: 30px;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 金币
|
||||||
|
.coin {
|
||||||
|
position: relative;
|
||||||
|
top: 6px;
|
||||||
|
font-size: 20px;
|
||||||
|
color: #ffc107;
|
||||||
|
}
|
||||||
|
|
||||||
|
.colorYellow {
|
||||||
|
color: yellowgreen;
|
||||||
|
}
|
||||||
|
|
||||||
|
p {
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,75 @@
|
||||||
|
<template>
|
||||||
|
<div id="centerRight1">
|
||||||
|
<div class="bg-color-black">
|
||||||
|
<div class="d-flex pt-2 pl-2">
|
||||||
|
<span>
|
||||||
|
<el-icon class="el-icon-s-operation"></el-icon>
|
||||||
|
</span>
|
||||||
|
<div class="d-flex">
|
||||||
|
<span class="fs-xl text mx-2">人员到岗情况</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="d-flex jc-center body-box">
|
||||||
|
<dv-scroll-board class="dv-scr-board" :config="config" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
config: {
|
||||||
|
header: ['姓名', '部门', '到岗'],
|
||||||
|
data: [
|
||||||
|
['组件1', 'dev-1', "<span class='colorGrass'>已到岗</span>"],
|
||||||
|
['组件2', 'dev-2', "<span class='colorRed'>未到岗</span>"],
|
||||||
|
['组件3', 'dev-3', "<span class='colorGrass'>已到岗</span>"],
|
||||||
|
['组件4', 'rea-1', "<span class='colorGrass'>已到岗</span>"],
|
||||||
|
['组件5', 'rea-2', "<span class='colorGrass'>已到岗</span>"],
|
||||||
|
['组件6', 'fix-2', "<span class='colorGrass'>已到岗</span>"],
|
||||||
|
['组件7', 'fix-4', "<span class='colorGrass'>已到岗</span>"],
|
||||||
|
['组件8', 'fix-7', "<span class='colorRed'>未到岗</span>"],
|
||||||
|
['组件9', 'dev-2', "<span class='colorRed'>未到岗</span>"],
|
||||||
|
['组件10', 'dev-9', "<span class='colorGrass'>已到岗</span>"]
|
||||||
|
],
|
||||||
|
rowNum: 7, //表格行数
|
||||||
|
headerHeight: 35,
|
||||||
|
headerBGC: '#0f1325', //表头
|
||||||
|
oddRowBGC: '#0f1325', //奇数行
|
||||||
|
evenRowBGC: '#171c33', //偶数行
|
||||||
|
index: true,
|
||||||
|
columnWidth: [50],
|
||||||
|
align: ['center']
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
$box-height: 410px;
|
||||||
|
$box-width: 300px;
|
||||||
|
#centerRight1 {
|
||||||
|
padding: 16px;
|
||||||
|
padding-top: 20px;
|
||||||
|
height: $box-height;
|
||||||
|
width: $box-width;
|
||||||
|
border-radius: 5px;
|
||||||
|
.bg-color-black {
|
||||||
|
height: $box-height - 30px;
|
||||||
|
border-radius: 10px;
|
||||||
|
}
|
||||||
|
.text {
|
||||||
|
color: #c3cbde;
|
||||||
|
}
|
||||||
|
.body-box {
|
||||||
|
border-radius: 10px;
|
||||||
|
overflow: hidden;
|
||||||
|
.dv-scr-board {
|
||||||
|
width: 270px;
|
||||||
|
height: 340px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,88 @@
|
||||||
|
<template>
|
||||||
|
<div id="centerRight2">
|
||||||
|
<div class="bg-color-black">
|
||||||
|
<div class="d-flex pt-2 pl-2">
|
||||||
|
<span>
|
||||||
|
<el-icon class="el-icon-menu"></el-icon>
|
||||||
|
</span>
|
||||||
|
<span class="fs-xl text mx-2">产品销售渠道分析</span>
|
||||||
|
</div>
|
||||||
|
<div class="d-flex ai-center flex-column body-box heightCover">
|
||||||
|
<dv-capsule-chart class="dv-cap-chart" :config="config" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
config: {
|
||||||
|
data: [
|
||||||
|
{
|
||||||
|
name: '冷加工',
|
||||||
|
value: 98
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '热弯成型',
|
||||||
|
value: 100
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '化学钢化',
|
||||||
|
value: 99
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '镀膜',
|
||||||
|
value: 100
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '夹层',
|
||||||
|
value: 98
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '包边',
|
||||||
|
value: 100
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '装框',
|
||||||
|
value: 100
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
#centerRight2 {
|
||||||
|
$box-height: 410px;
|
||||||
|
$box-width: 340px;
|
||||||
|
padding: 5px;
|
||||||
|
height: $box-height;
|
||||||
|
width: $box-width;
|
||||||
|
border-radius: 5px;
|
||||||
|
.bg-color-black {
|
||||||
|
padding: 5px;
|
||||||
|
height: $box-height;
|
||||||
|
width: $box-width;
|
||||||
|
border-radius: 10px;
|
||||||
|
}
|
||||||
|
.text {
|
||||||
|
color: #c3cbde;
|
||||||
|
}
|
||||||
|
.body-box {
|
||||||
|
border-radius: 10px;
|
||||||
|
overflow: hidden;
|
||||||
|
.dv-cap-chart {
|
||||||
|
width: 100%;
|
||||||
|
height: 90%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.heightCover{
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,148 @@
|
||||||
|
<template>
|
||||||
|
<div id="index" ref="appRef">
|
||||||
|
<div class="bg">
|
||||||
|
<dv-loading v-if="loading">Loading...</dv-loading>
|
||||||
|
<div v-else class="host-body">
|
||||||
|
<div class="d-flex jc-center">
|
||||||
|
<dv-decoration-10 class="dv-dec-10" />
|
||||||
|
<div class="d-flex jc-center">
|
||||||
|
<dv-decoration-8 class="dv-dec-8" :color="['#568aea', '#000000']" />
|
||||||
|
<div class="title">
|
||||||
|
<span class="title-text">航玻车间可视化平台</span>
|
||||||
|
<dv-decoration-6
|
||||||
|
class="dv-dec-6"
|
||||||
|
:reverse="true"
|
||||||
|
:color="['#50e3c2', '#67a1e5']"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<dv-decoration-8
|
||||||
|
class="dv-dec-8"
|
||||||
|
:reverse="true"
|
||||||
|
:color="['#568aea', '#000000']"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<dv-decoration-10 class="dv-dec-10-s" />
|
||||||
|
</div>
|
||||||
|
<!-- 第二行 -->
|
||||||
|
<div class="d-flex jc-between px-2">
|
||||||
|
<div class="d-flex aside-width">
|
||||||
|
<div class="react-left ml-4 react-l-s">
|
||||||
|
<span class="react-before"></span>
|
||||||
|
<span class="text">数据分析1</span>
|
||||||
|
</div>
|
||||||
|
<div class="react-right ml-3">
|
||||||
|
<span class="text">数据分析2</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="d-flex aside-width">
|
||||||
|
<div class="react-right bg-color-blue mr-3">
|
||||||
|
<span class="text fw-b">车间详情展示</span>
|
||||||
|
</div>
|
||||||
|
<div class="react-right mr-4 react-l-s">
|
||||||
|
<span class="react-after"></span>
|
||||||
|
<span class="text"
|
||||||
|
>{{ dateYear }} {{ dateWeek }} {{ dateDay }}</span
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="body-box">
|
||||||
|
<!-- 第三行数据 -->
|
||||||
|
<div class="content-box">
|
||||||
|
<div>
|
||||||
|
<dv-border-box-1>
|
||||||
|
<centerLeft1 />
|
||||||
|
</dv-border-box-1>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<dv-border-box-1>
|
||||||
|
<centerLeft1 />
|
||||||
|
</dv-border-box-1>
|
||||||
|
</div>
|
||||||
|
<!-- 中间 -->
|
||||||
|
<div>
|
||||||
|
<center />
|
||||||
|
</div>
|
||||||
|
<!-- 中间 -->
|
||||||
|
<div>
|
||||||
|
<centerRight2 />
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<dv-border-box-13>
|
||||||
|
<centerRight1 />
|
||||||
|
</dv-border-box-13>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 第四行数据 -->
|
||||||
|
<div class="bototm-box">
|
||||||
|
<dv-border-box-3>
|
||||||
|
<bottomRight />
|
||||||
|
</dv-border-box-3>
|
||||||
|
<dv-border-box-13>
|
||||||
|
<bottomLeft />
|
||||||
|
</dv-border-box-13>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import drawMixin from "../../utils/drawMixin";
|
||||||
|
import { formatTimeBigScreen } from '../../utils/index.js'
|
||||||
|
import centerLeft1 from './centerLeft1'
|
||||||
|
import centerRight1 from './centerRight1'
|
||||||
|
import centerRight2 from './centerRight2'
|
||||||
|
import center from './center'
|
||||||
|
import bottomLeft from './bottomLeft'
|
||||||
|
import bottomRight from './bottomRight'
|
||||||
|
|
||||||
|
export default {
|
||||||
|
mixins: [ drawMixin ],
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
timing: null,
|
||||||
|
loading: true,
|
||||||
|
dateDay: null,
|
||||||
|
dateYear: null,
|
||||||
|
dateWeek: null,
|
||||||
|
weekday: ['周日', '周一', '周二', '周三', '周四', '周五', '周六']
|
||||||
|
}
|
||||||
|
},
|
||||||
|
components: {
|
||||||
|
centerLeft1,
|
||||||
|
centerRight1,
|
||||||
|
centerRight2,
|
||||||
|
center,
|
||||||
|
bottomLeft,
|
||||||
|
bottomRight
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
this.timeFn()
|
||||||
|
this.cancelLoading()
|
||||||
|
},
|
||||||
|
beforeDestroy () {
|
||||||
|
clearInterval(this.timing)
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
timeFn() {
|
||||||
|
this.timing = setInterval(() => {
|
||||||
|
this.dateDay = formatTimeBigScreen(new Date(), 'HH: mm: ss')
|
||||||
|
this.dateYear = formatTimeBigScreen(new Date(), 'yyyy-MM-dd')
|
||||||
|
this.dateWeek = this.weekday[new Date().getDay()]
|
||||||
|
}, 1000)
|
||||||
|
},
|
||||||
|
cancelLoading() {
|
||||||
|
setTimeout(() => {
|
||||||
|
this.loading = false
|
||||||
|
}, 500)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss">
|
||||||
|
@import '../../assets/scss/index';
|
||||||
|
</style>
|
||||||
Loading…
Reference in New Issue