✨ feat(dashboard): 大屏素材准备
This commit is contained in:
砂糖
@@ -1,361 +0,0 @@
|
||||
@import "./modules/reset.scss";
|
||||
@import "./modules/variables.scss";
|
||||
@import './theme/index.css';
|
||||
@import '../iconfont//iconfont.css';
|
||||
|
||||
[class*=" blq-icon-"],
|
||||
[class^=blq-icon-] {
|
||||
font-family: iconfont !important;
|
||||
speak: none;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-variant: normal;
|
||||
text-transform: none;
|
||||
line-height: 1;
|
||||
vertical-align: middle;
|
||||
display: inline-block;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale
|
||||
}
|
||||
|
||||
*,
|
||||
:after,
|
||||
:before {
|
||||
box-sizing: content-box;
|
||||
}
|
||||
|
||||
.clearfix {
|
||||
&::after {
|
||||
content: "";
|
||||
display: table;
|
||||
height: 0;
|
||||
line-height: 0;
|
||||
visibility: hidden;
|
||||
clear: both;
|
||||
}
|
||||
}
|
||||
|
||||
.contents {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
min-height: calc(100% - 60px);
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.beautify-scroll-def {
|
||||
overflow-y: auto;
|
||||
|
||||
&::-webkit-scrollbar-thumb {
|
||||
//滚动条的设置
|
||||
background-color: rgba(14, 59, 150, 0);
|
||||
background-clip: padding-box;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
&::-webkit-scrollbar-thumb {
|
||||
//滚动条的设置
|
||||
background-color: rgba(14, 59, 150, 0.5);
|
||||
background-clip: padding-box;
|
||||
border-radius: 4px;
|
||||
}
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar-track-piece {
|
||||
//滚动条凹槽的颜色，还可以设置边框属性
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar {
|
||||
//滚动条的宽度
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
&::-webkit-scrollbar-thumb:hover {
|
||||
background-color: rgba(14, 59, 150, .8);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.orderNum {
|
||||
// min-width: 22px;
|
||||
// height: 22px;
|
||||
// background: #00b8ff;
|
||||
// border-radius: 50%;
|
||||
// text-align: center;
|
||||
// line-height: 22px;
|
||||
// font-size: 13px;
|
||||
// font-weight: 900;
|
||||
// color: #0f2854;
|
||||
color: #00b8ff;
|
||||
}
|
||||
|
||||
.yh-big-input {
|
||||
width: 253px;
|
||||
height: 14px;
|
||||
background: transparent;
|
||||
border: 1px solid rgba(255, 255, 255, .53);
|
||||
border-radius: 4px;
|
||||
color: #fff;
|
||||
padding: 6px 10px;
|
||||
font-size: 14px;
|
||||
transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
|
||||
|
||||
&:focus {
|
||||
outline: none;
|
||||
border-color: #31abe3;
|
||||
}
|
||||
}
|
||||
|
||||
.yh-big-el-input {
|
||||
width: 253px;
|
||||
font-size: 14px;
|
||||
|
||||
.el-input__inner {
|
||||
padding: 6px 10px;
|
||||
border: 1px solid rgba(255, 255, 255, .53);
|
||||
background-color: transparent;
|
||||
font-size: 14px;
|
||||
line-height: 1;
|
||||
color: #fff;
|
||||
&:hover{
|
||||
border-color: rgba(255, 255, 255, .8);
|
||||
}
|
||||
&:focus {
|
||||
outline: none;
|
||||
border-color: #31abe3;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.yh-big-button {
|
||||
width: 53px;
|
||||
height: 26px;
|
||||
background: #00b1d6;
|
||||
border-radius: 4px;
|
||||
// border-color: #00b1d6;
|
||||
border-width: 1px;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
color: #fff;
|
||||
font-size: 15px;
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
// border-color: #0597b4;
|
||||
background: #0597b4;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
//浮动
|
||||
.float-r {
|
||||
float: right;
|
||||
}
|
||||
|
||||
//浮动
|
||||
.float-l {
|
||||
float: left;
|
||||
}
|
||||
|
||||
// 字体加粗
|
||||
.fw-b {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
//文章一行显示，多余省略号显示
|
||||
.title-item {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
//表格样式重置
|
||||
.ve-table {
|
||||
$border-color: #525371;
|
||||
// $border-color: rgba(255, 255, 255, .43);
|
||||
box-sizing: border-box;
|
||||
|
||||
.ve-table-container {
|
||||
&::-webkit-scrollbar-track-piece {
|
||||
//滚动条凹槽的颜色，还可以设置边框属性
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar {
|
||||
//滚动条的宽度
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar-thumb {
|
||||
//滚动条的设置
|
||||
background-color: rgba(14, 59, 150, 0.5);
|
||||
background-clip: padding-box;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar-thumb:hover {
|
||||
background-color: rgba(14, 59, 150, .8);
|
||||
}
|
||||
|
||||
.ve-table-content {
|
||||
&::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0px;
|
||||
width: 1px;
|
||||
height: 100%;
|
||||
background-color: $border-color;
|
||||
z-index: 20;
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
&.ve-table-border-around {
|
||||
border-color: $border-color;
|
||||
}
|
||||
|
||||
.ve-table-container table.ve-table-content thead.ve-table-header tr.ve-table-header-tr {
|
||||
height: 34px;
|
||||
box-sizing: border-box;
|
||||
|
||||
th.ve-table-header-th {
|
||||
background: #04004E;
|
||||
color: #FFF;
|
||||
border-color: $border-color;
|
||||
box-sizing: border-box;
|
||||
line-height: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.ve-table-container table.ve-table-content tbody.ve-table-body {
|
||||
|
||||
tr.ve-table-body-tr td.ve-table-body-td,
|
||||
tr.ve-table-expand-tr td.ve-table-body-td,
|
||||
tr.ve-table-body-tr td.ve-table-expand-td,
|
||||
tr.ve-table-expand-tr td.ve-table-expand-td {
|
||||
background: transparent;
|
||||
color: #FFF;
|
||||
border-color: $border-color;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
tr.ve-table-body-tr,
|
||||
tr.ve-table-expand-tr {
|
||||
height: 34px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
&.ve-table-row-hover tr.ve-table-body-tr:hover td {
|
||||
background-color: rgba(0, 0, 0, .22);
|
||||
box-sizing: border-box;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
.ve-table-container .ve-table-border-x th,
|
||||
.ve-table-container .ve-table-border-x td {
|
||||
border-color: $border-color;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
//颜色
|
||||
@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;
|
||||
}
|
||||
}
|
||||
@@ -1,200 +0,0 @@
|
||||
/**
|
||||
* Eric Meyer's Reset CSS v2.0 (http://meyerweb.com/eric/tools/css/reset/)
|
||||
* http://cssreset.com
|
||||
*/
|
||||
html,
|
||||
body,
|
||||
div,
|
||||
span,
|
||||
applet,
|
||||
object,
|
||||
iframe,
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6,
|
||||
p,
|
||||
blockquote,
|
||||
pre,
|
||||
a,
|
||||
abbr,
|
||||
acronym,
|
||||
address,
|
||||
big,
|
||||
cite,
|
||||
code,
|
||||
del,
|
||||
dfn,
|
||||
em,
|
||||
img,
|
||||
ins,
|
||||
kbd,
|
||||
q,
|
||||
s,
|
||||
samp,
|
||||
small,
|
||||
strike,
|
||||
strong,
|
||||
sub,
|
||||
sup,
|
||||
tt,
|
||||
var,
|
||||
b,
|
||||
u,
|
||||
i,
|
||||
center,
|
||||
dl,
|
||||
dt,
|
||||
dd,
|
||||
ol,
|
||||
ul,
|
||||
li,
|
||||
fieldset,
|
||||
form,
|
||||
label,
|
||||
legend,
|
||||
table,
|
||||
caption,
|
||||
tbody,
|
||||
tfoot,
|
||||
thead,
|
||||
tr,
|
||||
th,
|
||||
td,
|
||||
article,
|
||||
aside,
|
||||
canvas,
|
||||
details,
|
||||
embed,
|
||||
figure,
|
||||
figcaption,
|
||||
footer,
|
||||
header,
|
||||
menu,
|
||||
nav,
|
||||
output,
|
||||
ruby,
|
||||
section,
|
||||
summary,
|
||||
time,
|
||||
mark,
|
||||
audio,
|
||||
video,
|
||||
input {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
font-size: 100%;
|
||||
font-weight: normal;
|
||||
vertical-align: baseline;
|
||||
}
|
||||
|
||||
/* HTML5 display-role reset for older browsers */
|
||||
article,
|
||||
aside,
|
||||
details,
|
||||
figcaption,
|
||||
figure,
|
||||
footer,
|
||||
header,
|
||||
menu,
|
||||
nav,
|
||||
section {
|
||||
display: block;
|
||||
}
|
||||
|
||||
body {
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
blockquote,
|
||||
q {
|
||||
quotes: none;
|
||||
}
|
||||
|
||||
blockquote:before,
|
||||
blockquote:after,
|
||||
q:before,
|
||||
q:after {
|
||||
content: none;
|
||||
}
|
||||
|
||||
table {
|
||||
border-collapse: collapse;
|
||||
border-spacing: 0;
|
||||
}
|
||||
|
||||
/* custom */
|
||||
|
||||
a {
|
||||
color: #7e8c8d;
|
||||
-webkit-backface-visibility: hidden;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
li {
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
body {
|
||||
-webkit-text-size-adjust: none;
|
||||
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
|
||||
}
|
||||
|
||||
.olControlScaleLineBottom {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.olControlScaleLineTop {
|
||||
color: #000 !important;
|
||||
border-bottom: solid 3px #000 !important;
|
||||
border-left: solid 2px #000 !important;
|
||||
border-right: solid 2px #000 !important;
|
||||
background-color: rgba(255, 255, 255, .4);
|
||||
font-size: 10px;
|
||||
text-shadow: -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff, 1px 1px 0 #fff;
|
||||
}
|
||||
|
||||
.olControlScaleLine {
|
||||
z-index: 900 !important;
|
||||
}
|
||||
/*清除浮动*/
|
||||
.clearfix:after {
|
||||
content: ".";
|
||||
display: block;
|
||||
height: 0;
|
||||
clear: both;
|
||||
visibility: hidden;
|
||||
}
|
||||
.clearfix {display: inline-block;}
|
||||
/* 点击搜索框获取焦点 placeholder消失-开始 */
|
||||
/* WebKit browsers */
|
||||
|
||||
// input:focus::-webkit-input-placeholder {
|
||||
// color: transparent;
|
||||
// }
|
||||
|
||||
|
||||
// /* Mozilla Firefox 4 to 18 */
|
||||
|
||||
// input:focus:-moz-placeholder {
|
||||
// color: transparent;
|
||||
// }
|
||||
|
||||
|
||||
// /* Mozilla Firefox 19+ */
|
||||
|
||||
// input:focus::-moz-placeholder {
|
||||
// color: transparent;
|
||||
// }
|
||||
|
||||
|
||||
// /* Internet Explorer 10+ */
|
||||
|
||||
// input:focus:-ms-input-placeholder {
|
||||
// color: transparent;
|
||||
// }
|
||||
|
||||
/* 点击搜索框获取焦点 placeholder消失-结束 */
|
||||
@@ -1,156 +0,0 @@
|
||||
.flex {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.flex-direction {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.flex-wrap {
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.align-start {
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.align-end {
|
||||
align-items: flex-end;
|
||||
}
|
||||
|
||||
.align-center {
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.align-stretch {
|
||||
align-items: stretch;
|
||||
}
|
||||
|
||||
.self-start {
|
||||
align-self: flex-start;
|
||||
}
|
||||
|
||||
.self-center {
|
||||
align-self: flex-center;
|
||||
}
|
||||
|
||||
.self-end {
|
||||
align-self: flex-end;
|
||||
}
|
||||
|
||||
.self-stretch {
|
||||
align-self: stretch;
|
||||
}
|
||||
|
||||
.align-stretch {
|
||||
align-items: stretch;
|
||||
}
|
||||
|
||||
.justify-start {
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
.justify-end {
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.justify-center {
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.justify-between {
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.justify-around {
|
||||
justify-content: space-around;
|
||||
}
|
||||
@for $i from 0 through 12 {
|
||||
.rdx-flex-#{$i} {
|
||||
flex: $i;
|
||||
}
|
||||
}
|
||||
|
||||
@for $i from 9 to 50 {
|
||||
.rdx-font-#{$i} {
|
||||
font-size: $i + px;
|
||||
}
|
||||
}
|
||||
|
||||
@for $i from 2 to 50 {
|
||||
.rdx-radius-#{$i} {
|
||||
border-radius: $i + px;
|
||||
}
|
||||
}
|
||||
@for $i from 10 to 50 {
|
||||
.rdx-line-height-#{$i} {
|
||||
line-height: $i + px;
|
||||
}
|
||||
}
|
||||
|
||||
// 定义内外边距，历遍1-80
|
||||
@for $i from 0 through 80 {
|
||||
// 只要双数和能被5除尽的数
|
||||
@if $i % 2 == 0 or $i % 5 == 0 {
|
||||
// 得出：u-margin-30或者u-m-30
|
||||
.rdx-m-#{$i} {
|
||||
margin: $i + px !important;
|
||||
}
|
||||
// 得出：u-padding-30或者u-p-30
|
||||
.rdx-p-#{$i} {
|
||||
padding: $i + px !important;
|
||||
}
|
||||
|
||||
@each $short, $long in l left, t top, r right, b bottom {
|
||||
// 缩写版，结果如： u-m-l-30
|
||||
// 定义外边距
|
||||
.rdx-m-#{$short}-#{$i} {
|
||||
margin-#{$long}: $i + px !important;
|
||||
}
|
||||
|
||||
// 定义内边距
|
||||
.rdx-p-#{$short}-#{$i} {
|
||||
padding-#{$long}: $i + px !important;
|
||||
}
|
||||
|
||||
//自定义左右内边距
|
||||
.rdx-p-lr-#{$i} {
|
||||
padding-left:$i + px !important;
|
||||
padding-right:$i + px !important;
|
||||
}
|
||||
//自定义上下内边距
|
||||
.rdx-p-tb-#{$i} {
|
||||
padding-top:$i + px !important;
|
||||
padding-bottom:$i + px !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
i{font-style: normal;}
|
||||
.position-re{position: relative;}
|
||||
.position-ab{position: absolute; z-index: 9;}
|
||||
.position-fixed{position: fixed; background: rgba(92, 116, 143, 0.45); width: 100%; height: 100%; left: 0px; top: 0px; z-index: 10;}
|
||||
.round{border-radius: 50%;}
|
||||
.font-strong{font-weight: bold;}
|
||||
.color-del{color:$del-color}
|
||||
.color-primary{color: $primary-color;}
|
||||
.color-remark{color: #666666;}
|
||||
.color-9{color: #999999;}
|
||||
.color-green{color: #38a800;}
|
||||
.bg-white{background-color: white;}
|
||||
.line-bottom{border-bottom: 1px solid #eeeeee;}
|
||||
.button-pointer{cursor: pointer;}
|
||||
.box-shadow-item{box-shadow: 0px 0px 4px 0px rgba(45, 45, 46, 0.1);}
|
||||
.search-form .search-form-item label {text-align: right; padding-right: 6px;}
|
||||
|
||||
|
||||
.break-all{
|
||||
word-break: break-all;
|
||||
}
|
||||
.blocks{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.cursor-pointer{
|
||||
cursor: pointer;
|
||||
}
|
||||
Binary file not shown.
Binary file not shown.
File diff suppressed because one or more lines are too long
@@ -1,50 +0,0 @@
|
||||
// 颜色
|
||||
$primary-color: #1890ff;
|
||||
$primary-color-hl: rgb(41, 52, 67);
|
||||
$default-color: #006569;
|
||||
$link: #1890ff;
|
||||
$active-color: rgb(0, 101, 105);
|
||||
$del-color: #ff1839;
|
||||
$content-background: #f3f5fa;
|
||||
$table-header-background: #d8eaff;
|
||||
|
||||
$primary-color-rgba: rgba($color: $primary-color,
|
||||
$alpha: 0.1,
|
||||
);
|
||||
//表格上面button按钮颜色
|
||||
$table-header-button: #18d1ff;
|
||||
// 阴影
|
||||
$primary-shadow: 0 2px 4px rgba(0, 0, 0, 0.12),
|
||||
0 0 6px rgba(0, 0, 0, 0.04);
|
||||
$primary-shadow-light: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
|
||||
$baidu-shadow: 1px 2px 1px rgba(0, 0, 0, 0.15);
|
||||
$gaode-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.2),
|
||||
0 2px 6px 0 rgba(0, 0, 0, 0.19);
|
||||
|
||||
// box-shadow: 0 2px 6px 0 rgb(114 124 245 / 50%);
|
||||
|
||||
$primary-border: $primary-color solid 1px;
|
||||
|
||||
$tool-top: 20px;
|
||||
|
||||
//header 的高度
|
||||
$index-height: 60px;
|
||||
$index-content-height: calc(100% - 60px);
|
||||
$index-tags-height: 36px;
|
||||
// 宽度侧边栏
|
||||
$aside-width: 200px;
|
||||
$content-padding: 16px;
|
||||
|
||||
$default-zindex: 99;
|
||||
|
||||
/*文本格式化，超出范围，显示省略号*/
|
||||
@mixin text-overflow($num: 1) {
|
||||
word-break: break-all;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: $num;
|
||||
-webkit-box-orient: vertical;
|
||||
}
|
||||
|
||||
|
||||
@@ -1,18 +0,0 @@
|
||||
/* @font-face {
|
||||
font-family: 'webfont';
|
||||
font-display: swap;
|
||||
src: url('//at.alicdn.com/t/webfont_c14qx7m7htb.eot');
|
||||
src:
|
||||
url('//at.alicdn.com/t/webfont_c14qx7m7htb.woff2') format('woff2'),
|
||||
url('//at.alicdn.com/t/webfont_c14qx7m7htb.woff') format('woff'),
|
||||
|
||||
|
||||
}
|
||||
|
||||
.number-font{
|
||||
font-family:"webfont" !important;
|
||||
font-size:16px;font-style:normal;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-webkit-text-stroke-width: 0.2px;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
} */
|
||||
@@ -1,23 +0,0 @@
|
||||
@font-face {
|
||||
font-family: "iconfont"; /* Project id 2995337 */
|
||||
src: url('iconfont.woff2?t=1638871675242') format('woff2'),
|
||||
url('iconfont.woff?t=1638871675242') format('woff'),
|
||||
url('iconfont.ttf?t=1638871675242') format('truetype');
|
||||
}
|
||||
|
||||
/* .iconfont {
|
||||
font-family: "iconfont" !important;
|
||||
font-size: 16px;
|
||||
font-style: normal;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
} */
|
||||
|
||||
.blq-icon-shezhi01:before {
|
||||
content: "\e610";
|
||||
}
|
||||
|
||||
.blq-icon-shezhi02:before {
|
||||
content: "\e611";
|
||||
}
|
||||
|
||||
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
|
Before Width: | Height: | Size: 26 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 15 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 62 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.6 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.6 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 8.7 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 8.6 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 7.6 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 8.5 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.5 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.5 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 8.8 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.6 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.6 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2.1 KiB |
@@ -27,6 +27,6 @@ $--font-path: '~element-ui/lib/theme-chalk/fonts';
|
||||
|
||||
// the :export directive is the magic sauce for webpack
|
||||
// https://www.bluematador.com/blog/how-to-share-variables-between-js-and-sass
|
||||
:export {
|
||||
theme: $--color-primary;
|
||||
}
|
||||
// :export {
|
||||
// theme: $--color-primary;
|
||||
// }
|
||||
|
||||
@@ -1,97 +0,0 @@
|
||||
<!--
|
||||
* @Author: daidai
|
||||
* @Date: 2022-03-01 09:16:22
|
||||
* @LastEditors: Please set LastEditors
|
||||
* @LastEditTime: 2022-09-29 15:12:34
|
||||
* @FilePath: \web-pc\src\pages\big-screen\components\item-wrap\item-wrap.vue
|
||||
-->
|
||||
<template>
|
||||
<dv-border-box-13 class="lr_titles">
|
||||
<div class="item_title" v-if="title !== ''">
|
||||
<div class="zuo"></div>
|
||||
<span class="title-inner"> {{ title }} </span>
|
||||
<div class="you"></div>
|
||||
</div>
|
||||
<div
|
||||
:class="title !== '' ? 'item_title_content' : 'item_title_content_def'"
|
||||
>
|
||||
<slot></slot>
|
||||
</div>
|
||||
</dv-border-box-13>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {};
|
||||
},
|
||||
props: {
|
||||
title: {
|
||||
type: String,
|
||||
default: () => "",
|
||||
},
|
||||
},
|
||||
created() {},
|
||||
|
||||
mounted() {},
|
||||
methods: {},
|
||||
};
|
||||
</script>
|
||||
<style lang='scss' scoped>
|
||||
$item-title-height: 38px;
|
||||
$item_title_content-height: calc(100% - 38px);
|
||||
|
||||
.lr_titles {
|
||||
box-sizing: border-box;
|
||||
|
||||
:deep(.border-box-content) {
|
||||
box-sizing: border-box;
|
||||
padding: 6px 16px 0px;
|
||||
}
|
||||
|
||||
.item_title {
|
||||
height: $item-title-height;
|
||||
line-height: $item-title-height;
|
||||
width: 100%;
|
||||
color: #31abe3;
|
||||
text-align: center;
|
||||
// background: linear-gradient(to right, transparent, #0f0756, transparent);
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
.zuo,
|
||||
.you {
|
||||
width: 58px;
|
||||
height: 14px;
|
||||
background-image: url("../../assets/img/titles/zuo.png");
|
||||
}
|
||||
|
||||
.you {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
.title-inner {
|
||||
font-weight: 900;
|
||||
letter-spacing: 2px;
|
||||
background: linear-gradient(
|
||||
92deg,
|
||||
#0072ff 0%,
|
||||
#00eaff 48.8525390625%,
|
||||
#01aaff 100%
|
||||
);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
.item_title_content {
|
||||
height: $item_title_content-height;
|
||||
}
|
||||
|
||||
.item_title_content_def {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,43 +0,0 @@
|
||||
<template>
|
||||
<div class='kong'>
|
||||
<slot></slot>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
export default {
|
||||
components: {},
|
||||
data() {
|
||||
return {
|
||||
|
||||
};
|
||||
},
|
||||
props:{
|
||||
data:{
|
||||
type:Array,
|
||||
default:()=>[]
|
||||
}
|
||||
},
|
||||
computed: {},
|
||||
methods: {
|
||||
init(){
|
||||
},
|
||||
},
|
||||
created() {
|
||||
|
||||
},
|
||||
mounted() {
|
||||
|
||||
},
|
||||
beforeDestroy() {
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang='scss' scoped>
|
||||
.kong{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
</style>
|
||||
@@ -1,49 +0,0 @@
|
||||
/*
|
||||
* @Author: daidai
|
||||
* @Date: 2022-02-16 17:08:26
|
||||
* @LastEditors: Please set LastEditors
|
||||
* @LastEditTime: 2022-04-25 10:12:36
|
||||
* @FilePath: \yhht-ui\yhht-ui\packagesEle\getXY\src\main.js
|
||||
*/
|
||||
import Vue from 'vue';
|
||||
import Main from './message.vue';
|
||||
import {isObject,isVNode} from '@/lib/types'
|
||||
let Message = Vue.extend(Main);
|
||||
let instance;
|
||||
var message = function (options) {
|
||||
if (Vue.prototype.$isServer) return;
|
||||
if(!instance){
|
||||
instance = new Message({
|
||||
data: {
|
||||
...options
|
||||
},
|
||||
|
||||
});
|
||||
instance.$mount();
|
||||
}
|
||||
instance.destroy=()=>{
|
||||
document.body.removeChild(instance.$el);
|
||||
instance&&instance.$destroy()
|
||||
instance=null
|
||||
return null
|
||||
}
|
||||
instance.init(options)
|
||||
document.body.appendChild(instance.$el);
|
||||
return instance;
|
||||
};
|
||||
['success', 'warning', 'info', 'error'].forEach(type => {
|
||||
message[type] = (options) => {
|
||||
if (isObject(options) && !isVNode(options)) {
|
||||
return message({
|
||||
...options,
|
||||
type
|
||||
});
|
||||
}
|
||||
return message({
|
||||
type,
|
||||
text: options
|
||||
});
|
||||
};
|
||||
});
|
||||
|
||||
export default message;
|
||||
@@ -1,74 +0,0 @@
|
||||
<!--
|
||||
* @Author: daidai
|
||||
* @Date: 2022-03-02 17:07:40
|
||||
* @LastEditors: Please set LastEditors
|
||||
* @LastEditTime: 2022-04-26 11:41:27
|
||||
* @FilePath: \web-pc\src\pages\big-screen\components\message\message.vue
|
||||
-->
|
||||
<template>
|
||||
<div class="messages" v-if="visible">
|
||||
<svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="message-icon">
|
||||
<path fill="currentColor" d="M15 8A7 7 0 101 8a7 7 0 0014 0zM8.5 4v5.5h-1V4h1zm-1.1 7h1.2v1.2H7.4V11z"
|
||||
fill-opacity="0.9" v-if="'warning'==type"></path>
|
||||
</svg>
|
||||
{{ text }}
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
visible: false,
|
||||
text: "",
|
||||
type:'warning'
|
||||
};
|
||||
},
|
||||
props: {},
|
||||
created() { },
|
||||
|
||||
mounted() { },
|
||||
methods: {
|
||||
init(param) {
|
||||
clearTimeout(this.timer);
|
||||
this.visible = true;
|
||||
this.text = param.text || "";
|
||||
this.type = param.type || "success";
|
||||
this.timer = setTimeout(() => {
|
||||
this.visible = false;
|
||||
clearTimeout(this.timer);
|
||||
}, 2000);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style lang='scss' scoped>
|
||||
.messages {
|
||||
position: fixed;
|
||||
min-width: 200px;
|
||||
top: 160px;
|
||||
left: 50%;
|
||||
transform: translate(-50%, 0);
|
||||
border: solid 1px #4b4b4b;
|
||||
// box-shadow: 0 16px 24px rgba(0, 0, 0, 0.14), 0 6px 30px rgba(0, 0, 0, 12%),
|
||||
// 0 8px 10px rgba(0, 0, 0, 20%), inset 0 0.5px 0 #5e5e5e,
|
||||
// inset 0.5px 0 0 #5e5e5e, inset 0 -0.5px 0 #5e5e5e, inset -0.5px 0 0 #5e5e5e;
|
||||
width: fit-content;
|
||||
border-radius: 6px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
z-index: 999;
|
||||
color: rgba(255, 255, 255, 0.9);
|
||||
background-color: #242424;
|
||||
line-height: 22px;
|
||||
font-size: 14px;
|
||||
padding: 13px 16px;
|
||||
|
||||
.message-icon {
|
||||
color: #cf6e2d;
|
||||
font-size: 20px;
|
||||
margin-right: 8px;
|
||||
fill: currentColor;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,64 +0,0 @@
|
||||
<template>
|
||||
<div class='reacquire flex justify-center blocks cursor-pointer' :style="{ lineHeight: lineHeight }"
|
||||
@click="getData">
|
||||
<span>
|
||||
重新获取
|
||||
</span>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
export default {
|
||||
components: {},
|
||||
props: {
|
||||
lineHeight: {
|
||||
type: String,
|
||||
default: '200px'
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
|
||||
};
|
||||
},
|
||||
computed: {},
|
||||
methods: {
|
||||
init() {
|
||||
},
|
||||
getData(e){
|
||||
this.$emit("onclick",e)
|
||||
}
|
||||
},
|
||||
created() {
|
||||
|
||||
},
|
||||
mounted() {
|
||||
|
||||
},
|
||||
beforeDestroy() {
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang='scss' scoped>
|
||||
.reacquire {
|
||||
|
||||
user-select:none;
|
||||
color: rgb(168, 168, 168);
|
||||
span:hover{
|
||||
color:$primary-color ;
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
|
||||
.blocks {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.cursor-pointer {
|
||||
cursor: pointer;
|
||||
}
|
||||
</style>
|
||||
@@ -1,253 +0,0 @@
|
||||
<!--
|
||||
* @Author: wei
|
||||
* @description: 大屏自适应容器组件
|
||||
* @LastEditTime: 2022-09-09 16:42:40
|
||||
-->
|
||||
<template>
|
||||
<!-- <section class="screen-box" :style="boxStyle"> -->
|
||||
<div class="screen-wrapper" ref="screenWrapper" :style="wrapperStyle">
|
||||
<slot></slot>
|
||||
</div>
|
||||
<!-- </section> -->
|
||||
</template>
|
||||
<script>
|
||||
/**
|
||||
* 防抖函数
|
||||
* @param {T} fn
|
||||
* @param {number} delay
|
||||
* @return
|
||||
*/
|
||||
function debounce(fn, delay) {
|
||||
let timer = null;
|
||||
return function (...args) {
|
||||
timer = setTimeout(
|
||||
() => {
|
||||
typeof fn === "function" && fn.apply(null, args);
|
||||
clearTimeout(timer);
|
||||
},
|
||||
delay > 0 ? delay : 100
|
||||
);
|
||||
};
|
||||
}
|
||||
|
||||
export default {
|
||||
name: "VScaleScreen",
|
||||
props: {
|
||||
width: {
|
||||
type: [String, Number],
|
||||
default: 1920,
|
||||
},
|
||||
height: {
|
||||
type: [String, Number],
|
||||
default: 1080,
|
||||
},
|
||||
fullScreen: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
autoScale: {
|
||||
type: [Object, Boolean],
|
||||
default: true,
|
||||
},
|
||||
selfAdaption: {
|
||||
type: Boolean,
|
||||
default: true,
|
||||
},
|
||||
delay: {
|
||||
type: Number,
|
||||
default: 500,
|
||||
},
|
||||
boxStyle: {
|
||||
type: Object,
|
||||
default: () => ({}),
|
||||
},
|
||||
wrapperStyle: {
|
||||
type: Object,
|
||||
default: () => ({}),
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
currentWidth: 0,
|
||||
currentHeight: 0,
|
||||
originalWidth: 0,
|
||||
originalHeight: 0,
|
||||
onResize: null,
|
||||
observer: null,
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
selfAdaption(val) {
|
||||
if (val) {
|
||||
this.resize();
|
||||
this.addListener();
|
||||
} else {
|
||||
this.clearListener();
|
||||
this.clearStyle();
|
||||
}
|
||||
},
|
||||
},
|
||||
computed: {
|
||||
screenWrapper() {
|
||||
return this.$refs["screenWrapper"];
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
initSize() {
|
||||
return new Promise((resolve, reject) => {
|
||||
// console.log("初始化样式");
|
||||
//给父元素设置 overflow:hidden
|
||||
this.screenWrapper.parentNode.style.overflow = "hidden";
|
||||
this.screenWrapper.parentNode.scrollLeft = 0;
|
||||
this.screenWrapper.parentNode.scrollTop = 0;
|
||||
|
||||
this.$nextTick(() => {
|
||||
// region 获取大屏真实尺寸
|
||||
if (this.width && this.height) {
|
||||
this.currentWidth = this.width;
|
||||
this.currentHeight = this.height;
|
||||
} else {
|
||||
this.currentWidth = this.screenWrapper.clientWidth;
|
||||
this.currentHeight = this.screenWrapper.clientHeight;
|
||||
}
|
||||
// endregion
|
||||
// region 获取画布尺寸
|
||||
if (!this.originalHeight || !this.originalWidth) {
|
||||
this.originalWidth = window.screen.width;
|
||||
this.originalHeight = window.screen.height;
|
||||
}
|
||||
// endregion
|
||||
resolve();
|
||||
});
|
||||
});
|
||||
},
|
||||
updateSize() {
|
||||
if (this.currentWidth && this.currentHeight) {
|
||||
this.screenWrapper.style.width = `${this.currentWidth}px`;
|
||||
this.screenWrapper.style.height = `${this.currentHeight}px`;
|
||||
} else {
|
||||
this.screenWrapper.style.width = `${this.originalWidth}px`;
|
||||
this.screenWrapper.style.height = `${this.originalHeight}px`;
|
||||
}
|
||||
},
|
||||
handleAutoScale(scale) {
|
||||
if (!this.autoScale) return;
|
||||
const screenWrapper = this.screenWrapper;
|
||||
const domWidth = screenWrapper.clientWidth;
|
||||
const domHeight = screenWrapper.clientHeight;
|
||||
const currentWidth = document.body.clientWidth;
|
||||
const currentHeight = document.body.clientHeight;
|
||||
screenWrapper.style.transform = `scale(${scale},${scale}) `;
|
||||
let mx = Math.max((currentWidth - domWidth * scale) / 2, 0);
|
||||
let my = Math.max((currentHeight - domHeight * scale) / 2, 0);
|
||||
if (typeof this.autoScale === "object") {
|
||||
// @ts-ignore
|
||||
!this.autoScale.x && (mx = 0);
|
||||
// @ts-ignore
|
||||
!this.autoScale.y && (my = 0);
|
||||
}
|
||||
// console.log({
|
||||
// mx,
|
||||
// my,
|
||||
// currentWidth,
|
||||
// currentHeight,
|
||||
// domWidth,
|
||||
// domHeight,
|
||||
// scale,
|
||||
// });
|
||||
this.screenWrapper.style.margin = `${my}px ${mx}px`;
|
||||
},
|
||||
updateScale() {
|
||||
const screenWrapper = this.screenWrapper;
|
||||
// 获取真实视口尺寸
|
||||
const currentWidth = document.body.clientWidth;
|
||||
const currentHeight = document.body.clientHeight;
|
||||
// 获取大屏最终的宽高onResize
|
||||
const realWidth = this.currentWidth || this.originalWidth;
|
||||
const realHeight = this.currentHeight || this.originalHeight;
|
||||
// 计算缩放比例
|
||||
const widthScale = currentWidth / realWidth;
|
||||
const heightScale = currentHeight / realHeight;
|
||||
// console.log({currentWidth, currentHeight,realWidth,realHeight});
|
||||
|
||||
// 若要铺满全屏，则按照各自比例缩放
|
||||
if (this.fullScreen) {
|
||||
screenWrapper.style.transform = `scale(${widthScale},${heightScale})`;
|
||||
return false;
|
||||
}
|
||||
// 按照宽高最小比例进行缩放
|
||||
const scale = Math.min(widthScale, heightScale);
|
||||
this.handleAutoScale(scale);
|
||||
},
|
||||
initMutationObserver() {
|
||||
const screenWrapper = this.screenWrapper;
|
||||
const observer = (this.observer = new MutationObserver(() => {
|
||||
this.onResize();
|
||||
}));
|
||||
|
||||
observer.observe(screenWrapper, {
|
||||
attributes: true,
|
||||
attributeFilter: ["style"],
|
||||
attributeOldValue: true,
|
||||
});
|
||||
},
|
||||
clearListener() {
|
||||
window.removeEventListener("resize", this.onResize);
|
||||
},
|
||||
addListener() {
|
||||
window.addEventListener("resize", this.onResize);
|
||||
},
|
||||
clearStyle() {
|
||||
// console.log("清除");
|
||||
const screenWrapper = this.screenWrapper;
|
||||
screenWrapper.parentNode.style.overflow = "auto";
|
||||
|
||||
screenWrapper.style = "";
|
||||
},
|
||||
async resize() {
|
||||
if (!this.selfAdaption) {
|
||||
return;
|
||||
}
|
||||
await this.initSize();
|
||||
this.updateSize();
|
||||
this.updateScale();
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
this.onResize = debounce(() => {
|
||||
this.resize();
|
||||
}, this.delay);
|
||||
this.$nextTick(() => {
|
||||
if (this.selfAdaption) {
|
||||
this.resize();
|
||||
this.addListener();
|
||||
}
|
||||
});
|
||||
},
|
||||
beforeDestroy() {
|
||||
this.clearListener();
|
||||
// this.observer.disconnect()
|
||||
},
|
||||
};
|
||||
//
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.screen-box {
|
||||
overflow: hidden;
|
||||
background-size: 100% 100%;
|
||||
background: #000;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
}
|
||||
|
||||
.screen-wrapper {
|
||||
transition-property: all;
|
||||
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
||||
transition-duration: 500ms;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
z-index: 100;
|
||||
transform-origin: left top;
|
||||
}
|
||||
</style>
|
||||
@@ -3,6 +3,9 @@ import Vue from 'vue'
|
||||
import Cookies from 'js-cookie'
|
||||
import VueKonva from 'vue-konva';
|
||||
|
||||
import * as echarts from 'echarts'
|
||||
import dataV from '@jiaminghi/data-view';
|
||||
|
||||
import Element from 'element-ui'
|
||||
import './assets/styles/element-variables.scss'
|
||||
|
||||
@@ -10,6 +13,9 @@ import vueFlvPlayer from 'vue-flv-player'
|
||||
|
||||
import '@/assets/styles/index.scss' // global css
|
||||
import '@/assets/styles/klp.scss' // klp css
|
||||
|
||||
import '@/modules/dashboardBig/assets/scss/style.scss';
|
||||
|
||||
import App from './App'
|
||||
import store from './store'
|
||||
import router from './router'
|
||||
@@ -53,6 +59,8 @@ Vue.prototype.selectDictLabel = selectDictLabel
|
||||
Vue.prototype.selectDictLabels = selectDictLabels
|
||||
Vue.prototype.download = download
|
||||
Vue.prototype.handleTree = handleTree
|
||||
Vue.prototype.$echarts = echarts
|
||||
|
||||
|
||||
// 全局组件挂载
|
||||
Vue.component('DictTag', DictTag)
|
||||
@@ -68,6 +76,7 @@ Vue.use(vueFlvPlayer)
|
||||
Vue.use(directive)
|
||||
Vue.use(plugins)
|
||||
Vue.use(VueMeta)
|
||||
Vue.use(dataV);
|
||||
Vue.use(VueKonva);
|
||||
DictData.install()
|
||||
|
||||
|
||||
BIN
klp-ui/src/modules/dashboardBig/assets/logo.png
Normal file
BIN
klp-ui/src/modules/dashboardBig/assets/logo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 6.7 KiB |
|
Before Width: | Height: | Size: 289 KiB After Width: | Height: | Size: 289 KiB |
@@ -43,7 +43,7 @@ $font-sizes: (
|
||||
}
|
||||
|
||||
//flex
|
||||
.flex {
|
||||
.d-flex {
|
||||
display: flex;
|
||||
}
|
||||
.flex-column {
|
||||
144
klp-ui/src/modules/dashboardBig/assets/scss/index.scss
Normal file
144
klp-ui/src/modules/dashboardBig/assets/scss/index.scss
Normal file
@@ -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.png");
|
||||
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-left {
|
||||
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;
|
||||
}
|
||||
|
||||
// 底部数据
|
||||
.bottom-box {
|
||||
margin-top: 10px;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 50%);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
186
klp-ui/src/modules/dashboardBig/assets/scss/style.scss
Normal file
186
klp-ui/src/modules/dashboardBig/assets/scss/style.scss
Normal file
@@ -0,0 +1,186 @@
|
||||
@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;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
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;
|
||||
}
|
||||
}
|
||||
@@ -1,16 +1,11 @@
|
||||
<!--
|
||||
* @Author: daidai
|
||||
* @Date: 2022-02-28 16:29:08
|
||||
* @LastEditors: Please set LastEditors
|
||||
* @LastEditTime: 2022-09-27 15:05:45
|
||||
* @FilePath: \web-pc\src\pages\big-screen\components\echart\index.vue
|
||||
-->
|
||||
<template>
|
||||
<div :id="id" :class="className" :style="{ height: height, width: width }" />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import * as echarts from 'echarts';
|
||||
import tdTheme from './theme.json' // 引入默认主题
|
||||
import '../map/fujian.js'
|
||||
|
||||
export default {
|
||||
name: 'echart',
|
||||
props: {
|
||||
@@ -28,7 +23,7 @@ export default {
|
||||
},
|
||||
height: {
|
||||
type: String,
|
||||
default: '100%'
|
||||
default: '2.5rem'
|
||||
},
|
||||
options: {
|
||||
type: Object,
|
||||
@@ -50,6 +45,7 @@ export default {
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
this.$echarts.registerTheme('tdTheme', tdTheme); // 覆盖默认主题
|
||||
this.initChart();
|
||||
},
|
||||
beforeDestroy () {
|
||||
@@ -59,7 +55,7 @@ export default {
|
||||
methods: {
|
||||
initChart () {
|
||||
// 初始化echart
|
||||
this.chart = echarts.init(this.$el)
|
||||
this.chart = this.$echarts.init(this.$el, 'tdTheme')
|
||||
this.chart.setOption(this.options, true)
|
||||
}
|
||||
}
|
||||
490
klp-ui/src/modules/dashboardBig/common/echart/theme.json
Normal file
490
klp-ui/src/modules/dashboardBig/common/echart/theme.json
Normal file
@@ -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"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
48
klp-ui/src/modules/dashboardBig/common/map/fujian.js
Normal file
48
klp-ui/src/modules/dashboardBig/common/map/fujian.js
Normal file
File diff suppressed because one or more lines are too long
@@ -0,0 +1,150 @@
|
||||
<template>
|
||||
<div>
|
||||
<!-- 年度开工率 -->
|
||||
<Echart
|
||||
:options="options"
|
||||
id="bottomLeftChart"
|
||||
height="480px"
|
||||
width="100%"
|
||||
></Echart>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Echart from '../../../../common/echart'
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
options: {},
|
||||
};
|
||||
},
|
||||
components: {
|
||||
Echart,
|
||||
},
|
||||
props: {
|
||||
cdata: {
|
||||
type: Object,
|
||||
default: () => ({})
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
cdata: {
|
||||
handler (newData) {
|
||||
this.options = {
|
||||
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
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,141 @@
|
||||
<template>
|
||||
<div>
|
||||
<Chart :cdata="cdata" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Chart from './chart.vue'
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
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: []
|
||||
}
|
||||
};
|
||||
},
|
||||
components: {
|
||||
Chart,
|
||||
},
|
||||
mounted () {
|
||||
this.setData();
|
||||
},
|
||||
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>
|
||||
</style>
|
||||
@@ -0,0 +1,358 @@
|
||||
<template>
|
||||
<div>
|
||||
<Echart
|
||||
:options="options"
|
||||
id="centreLeft1Chart"
|
||||
height="480px"
|
||||
width="100%"
|
||||
></Echart>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Echart from '../../../../common/echart'
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
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
|
||||
},
|
||||
props: {
|
||||
cdata: {
|
||||
type: Object,
|
||||
default: () => ({})
|
||||
}
|
||||
},
|
||||
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
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,89 @@
|
||||
<template>
|
||||
<div>
|
||||
<Chart :cdata="cdata" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Chart from './chart.vue'
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
drawTiming: null,
|
||||
cdata: {
|
||||
year: null,
|
||||
weekCategory: [],
|
||||
radarData: [],
|
||||
radarDataAvg: [],
|
||||
maxData: 12000,
|
||||
weekMaxData: [],
|
||||
weekLineData: []
|
||||
}
|
||||
}
|
||||
},
|
||||
components: {
|
||||
Chart,
|
||||
},
|
||||
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" scoped>
|
||||
</style>
|
||||
@@ -0,0 +1,104 @@
|
||||
<template>
|
||||
<div>
|
||||
<!-- 通过率/达标率 -->
|
||||
<Echart
|
||||
:options="options"
|
||||
:id="id"
|
||||
height="100px"
|
||||
width="100px"
|
||||
></Echart>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Echart from '../../../../common/echart'
|
||||
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,81 @@
|
||||
<template>
|
||||
<div>
|
||||
<Echart
|
||||
:options="options"
|
||||
id="centreLeft1Chart"
|
||||
height="220px"
|
||||
width="260px"
|
||||
></Echart>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Echart from '../../../../common/echart'
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
options: {},
|
||||
};
|
||||
},
|
||||
components: {
|
||||
Echart,
|
||||
},
|
||||
props: {
|
||||
cdata: {
|
||||
type: Object,
|
||||
default: () => ({})
|
||||
},
|
||||
},
|
||||
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
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
</style>
|
||||
@@ -0,0 +1,36 @@
|
||||
<template>
|
||||
<div>
|
||||
<Chart :cdata="cdata" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Chart from './chart.vue';
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
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: {
|
||||
Chart,
|
||||
},
|
||||
mounted () {
|
||||
},
|
||||
methods: {
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
</style>
|
||||
@@ -0,0 +1,290 @@
|
||||
<template>
|
||||
<div>
|
||||
<Echart
|
||||
id="centreLeft2Chart"
|
||||
ref="centreLeft2ChartRef"
|
||||
:options="options"
|
||||
height="360px"
|
||||
width="330px"
|
||||
></Echart>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Echart from '../../../../common/echart';
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
options: {},
|
||||
};
|
||||
},
|
||||
components: {
|
||||
Echart,
|
||||
},
|
||||
props: {
|
||||
cdata: {
|
||||
type: Array,
|
||||
default: () => [],
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
cdata: {
|
||||
handler(newData) {
|
||||
// 设置点的位置(经纬度)
|
||||
const geoCoordMap = {
|
||||
厦门市: [118.11022, 24.490474, 20],
|
||||
福州市: [119.206239, 26.275302, 20],
|
||||
泉州市: [118.589421, 24.908853, 20],
|
||||
漳州市: [117.561801, 24.510897, 20],
|
||||
龙岩市: [116.82978, 25.391603, 20],
|
||||
莆田市: [119.007558, 25.591011, 20],
|
||||
三明市: [117.435001, 26.465444, 20],
|
||||
南平市: [118.178459, 27.535627, 20],
|
||||
宁德市: [119.527082, 27.15924, 20],
|
||||
};
|
||||
let seriesData = [
|
||||
{
|
||||
name: '厦门市',
|
||||
},
|
||||
{
|
||||
name: '福州市',
|
||||
},
|
||||
{
|
||||
name: '泉州市',
|
||||
},
|
||||
{
|
||||
name: '漳州市',
|
||||
},
|
||||
{
|
||||
name: '龙岩市',
|
||||
},
|
||||
{
|
||||
name: '莆田市',
|
||||
},
|
||||
{
|
||||
name: '三明市',
|
||||
},
|
||||
{
|
||||
name: '南平市',
|
||||
},
|
||||
{
|
||||
name: '宁德市',
|
||||
},
|
||||
];
|
||||
let convertData = function (data) {
|
||||
let scatterData = [];
|
||||
for (var i = 0; i < data.length; i++) {
|
||||
var geoCoord = geoCoordMap[data[i].name];
|
||||
if (geoCoord) {
|
||||
scatterData.push({
|
||||
name: data[i].name,
|
||||
value: geoCoord.concat(data[i].value),
|
||||
});
|
||||
}
|
||||
}
|
||||
return scatterData;
|
||||
};
|
||||
this.options = {
|
||||
showLegendSymbol: true,
|
||||
tooltip: {
|
||||
trigger: 'item',
|
||||
textStyle: {
|
||||
fontSize: 14,
|
||||
lineHeight: 22,
|
||||
},
|
||||
position: point => {
|
||||
// 固定在顶部
|
||||
return [point[0] + 50, point[1] - 20];
|
||||
},
|
||||
// 如果需要自定义 tooltip样式，需要使用formatter
|
||||
/*
|
||||
formatter: params => {
|
||||
return `<div style=""> ... </div>`
|
||||
}
|
||||
*/
|
||||
},
|
||||
visualMap: {
|
||||
min: 0,
|
||||
max: 10,
|
||||
show: false,
|
||||
seriesIndex: 0,
|
||||
// 颜色
|
||||
inRange: {
|
||||
color: ['rgba(41,166,206, .5)', 'rgba(69,117,245, .9)'],
|
||||
},
|
||||
},
|
||||
// 底部背景
|
||||
geo: {
|
||||
show: true,
|
||||
aspectScale: 0.85, //长宽比
|
||||
zoom: 1.2,
|
||||
top: '10%',
|
||||
left: '16%',
|
||||
map: '福建',
|
||||
roam: false,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
areaColor: 'rgba(0,0,0,0)',
|
||||
shadowColor: 'rgba(7,114,204, .8)',
|
||||
shadowOffsetX: 5,
|
||||
shadowOffsetY: 5,
|
||||
},
|
||||
emphasis: {
|
||||
areaColor: '#00aeef',
|
||||
},
|
||||
},
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: '相关指数',
|
||||
type: 'map',
|
||||
aspectScale: 0.85, //长宽比
|
||||
zoom: 1.2,
|
||||
mapType: '福建', // 自定义扩展图表类型
|
||||
top: '10%',
|
||||
left: '16%',
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: 'red',
|
||||
areaColor: 'rgba(19,54,162, .5)',
|
||||
borderColor: 'rgba(0,242,252,.3)',
|
||||
borderWidth: 1,
|
||||
shadowBlur: 7,
|
||||
shadowColor: '#00f2fc',
|
||||
},
|
||||
emphasis: {
|
||||
areaColor: '#4f7fff',
|
||||
borderColor: 'rgba(0,242,252,.6)',
|
||||
borderWidth: 2,
|
||||
shadowBlur: 10,
|
||||
shadowColor: '#00f2fc',
|
||||
},
|
||||
},
|
||||
label: {
|
||||
formatter: params => `${params.name}`,
|
||||
show: true,
|
||||
position: 'insideRight',
|
||||
textStyle: {
|
||||
fontSize: 14,
|
||||
color: '#efefef',
|
||||
},
|
||||
emphasis: {
|
||||
textStyle: {
|
||||
color: '#fff',
|
||||
},
|
||||
},
|
||||
},
|
||||
data: newData,
|
||||
},
|
||||
{
|
||||
type: 'effectScatter',
|
||||
coordinateSystem: 'geo',
|
||||
symbolSize: 7,
|
||||
effectType: 'ripple',
|
||||
legendHoverLink: false,
|
||||
showEffectOn: 'render',
|
||||
rippleEffect: {
|
||||
period: 4,
|
||||
scale: 2.5,
|
||||
brushType: 'stroke',
|
||||
},
|
||||
zlevel: 1,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: '#99FBFE',
|
||||
shadowBlur: 5,
|
||||
shadowColor: '#fff',
|
||||
},
|
||||
},
|
||||
data: convertData(seriesData),
|
||||
},
|
||||
],
|
||||
};
|
||||
// 重新选择区域
|
||||
this.handleMapRandomSelect();
|
||||
},
|
||||
immediate: true,
|
||||
deep: true,
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
// 开启定时器
|
||||
startInterval() {
|
||||
const _self = this;
|
||||
// 应通过接口获取配置时间，暂时写死5s
|
||||
const time = 2000;
|
||||
if (this.intervalId !== null) {
|
||||
clearInterval(this.intervalId);
|
||||
}
|
||||
this.intervalId = setInterval(() => {
|
||||
_self.reSelectMapRandomArea();
|
||||
}, time);
|
||||
},
|
||||
// 重新随机选中地图区域
|
||||
reSelectMapRandomArea() {
|
||||
const length = 9;
|
||||
this.$nextTick(() => {
|
||||
try {
|
||||
const map = this.$refs.centreLeft2ChartRef.chart;
|
||||
let index = Math.floor(Math.random() * length);
|
||||
while (index === this.preSelectMapIndex || index >= length) {
|
||||
index = Math.floor(Math.random() * length);
|
||||
}
|
||||
map.dispatchAction({
|
||||
type: 'mapUnSelect',
|
||||
seriesIndex: 0,
|
||||
dataIndex: this.preSelectMapIndex,
|
||||
});
|
||||
map.dispatchAction({
|
||||
type: 'showTip',
|
||||
seriesIndex: 0,
|
||||
dataIndex: index,
|
||||
});
|
||||
map.dispatchAction({
|
||||
type: 'mapSelect',
|
||||
seriesIndex: 0,
|
||||
dataIndex: index,
|
||||
});
|
||||
this.preSelectMapIndex = index;
|
||||
} catch (error) {
|
||||
console.log(error)
|
||||
}
|
||||
});
|
||||
},
|
||||
handleMapRandomSelect() {
|
||||
this.$nextTick(() => {
|
||||
try {
|
||||
const map = this.$refs.centreLeft2ChartRef.chart;
|
||||
const _self = this;
|
||||
setTimeout(() => {
|
||||
_self.reSelectMapRandomArea();
|
||||
}, 0);
|
||||
// 移入区域，清除定时器、取消之前选中并选中当前
|
||||
map.on('mouseover', function (params) {
|
||||
clearInterval(_self.intervalId);
|
||||
map.dispatchAction({
|
||||
type: 'mapUnSelect',
|
||||
seriesIndex: 0,
|
||||
dataIndex: _self.preSelectMapIndex,
|
||||
});
|
||||
map.dispatchAction({
|
||||
type: 'mapSelect',
|
||||
seriesIndex: 0,
|
||||
dataIndex: params.dataIndex,
|
||||
});
|
||||
_self.preSelectMapIndex = params.dataIndex;
|
||||
});
|
||||
// 移出区域重新随机选中地图区域，并开启定时器
|
||||
map.on('globalout', function () {
|
||||
_self.reSelectMapRandomArea();
|
||||
_self.startInterval();
|
||||
});
|
||||
this.startInterval();
|
||||
} catch (error) {
|
||||
console.log(error)
|
||||
}
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
@@ -0,0 +1,67 @@
|
||||
<template>
|
||||
<div>
|
||||
<Chart :cdata="cdata" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Chart from './chart.vue';
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
cdata: [
|
||||
{
|
||||
// 名字需要与 “common/map/fujian.js” 地图数据文件里面定义的一一对应，不能是 “福州” 或者 “闽” 之类的缩写
|
||||
name: '福州市',
|
||||
value: 10,
|
||||
elseData:{
|
||||
// 这里放置地图 tooltip 里想显示的数据
|
||||
}
|
||||
},
|
||||
{
|
||||
name: '厦门市',
|
||||
value: 9,
|
||||
},
|
||||
{
|
||||
name: '漳州市',
|
||||
value: 8,
|
||||
},
|
||||
{
|
||||
name: '泉州市',
|
||||
value: 7,
|
||||
},
|
||||
{
|
||||
name: '三明市',
|
||||
value: 6,
|
||||
},
|
||||
{
|
||||
name: '莆田市',
|
||||
value: 5,
|
||||
},
|
||||
{
|
||||
name: '南平市',
|
||||
value: 4,
|
||||
},
|
||||
{
|
||||
name: '龙岩市',
|
||||
value: 3,
|
||||
},
|
||||
{
|
||||
name: '宁德市',
|
||||
value: 2,
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
components: {
|
||||
Chart,
|
||||
},
|
||||
mounted () {
|
||||
},
|
||||
methods: {
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
</style>
|
||||
@@ -0,0 +1,132 @@
|
||||
<template>
|
||||
<div>
|
||||
<Echart
|
||||
:options="options"
|
||||
id="centreRight2Chart1"
|
||||
height="200px"
|
||||
width="260px"
|
||||
></Echart>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Echart from '../../../../common/echart'
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
options: {},
|
||||
};
|
||||
},
|
||||
components: {
|
||||
Echart,
|
||||
},
|
||||
props: {
|
||||
cdata: {
|
||||
type: Object,
|
||||
default: () => ({})
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
cdata: {
|
||||
handler (newData) {
|
||||
// 固定样式数据
|
||||
let lineStyle = {
|
||||
normal: {
|
||||
width: 1,
|
||||
opacity: 0.5
|
||||
}
|
||||
};
|
||||
|
||||
this.options = {
|
||||
radar: {
|
||||
indicator: newData.indicatorData,
|
||||
shape: "circle",
|
||||
splitNumber: 5,
|
||||
radius: ["0%", "65%"],
|
||||
name: {
|
||||
textStyle: {
|
||||
color: "rgb(238, 197, 102)"
|
||||
}
|
||||
},
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
color: [
|
||||
"rgba(238, 197, 102, 0.1)",
|
||||
"rgba(238, 197, 102, 0.2)",
|
||||
"rgba(238, 197, 102, 0.4)",
|
||||
"rgba(238, 197, 102, 0.6)",
|
||||
"rgba(238, 197, 102, 0.8)",
|
||||
"rgba(238, 197, 102, 1)"
|
||||
].reverse()
|
||||
}
|
||||
},
|
||||
splitArea: {
|
||||
show: false
|
||||
},
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: "rgba(238, 197, 102, 0.5)"
|
||||
}
|
||||
}
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: "北京",
|
||||
type: "radar",
|
||||
lineStyle: lineStyle,
|
||||
data: newData.dataBJ,
|
||||
symbol: "none",
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: "#F9713C"
|
||||
}
|
||||
},
|
||||
areaStyle: {
|
||||
normal: {
|
||||
opacity: 0.1
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
name: "上海",
|
||||
type: "radar",
|
||||
lineStyle: lineStyle,
|
||||
data: newData.dataSH,
|
||||
symbol: "none",
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: "#B3E4A1"
|
||||
}
|
||||
},
|
||||
areaStyle: {
|
||||
normal: {
|
||||
opacity: 0.05
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
name: "广州",
|
||||
type: "radar",
|
||||
lineStyle: lineStyle,
|
||||
data: newData.dataGZ,
|
||||
symbol: "none",
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: "rgb(238, 197, 102)"
|
||||
}
|
||||
},
|
||||
areaStyle: {
|
||||
normal: {
|
||||
opacity: 0.05
|
||||
}
|
||||
}
|
||||
} //end
|
||||
]
|
||||
}
|
||||
},
|
||||
immediate: true,
|
||||
deep: true
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
@@ -0,0 +1,55 @@
|
||||
<template>
|
||||
<div>
|
||||
<Chart :cdata="cdata" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Chart from './chart.vue';
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
cdata: {
|
||||
indicatorData: [
|
||||
{ name: "data1", max: 300 },
|
||||
{ name: "data2", max: 250 },
|
||||
{ name: "data3", max: 300 },
|
||||
{ name: "data4", max: 5},
|
||||
{ name: "data5", max: 200 },
|
||||
{ name: "data6", max: 100 }
|
||||
],
|
||||
dataBJ: [
|
||||
[94, 69, 114, 2.08, 73, 39, 22],
|
||||
[99, 73, 110, 2.43, 76, 48, 23],
|
||||
[31, 12, 30, 0.5, 32, 16, 24],
|
||||
[42, 27, 43, 1, 53, 22, 25],
|
||||
[154, 117, 157, 3.05, 92, 58, 26],
|
||||
[234, 185, 230, 4.09, 123, 69, 27],
|
||||
[160, 120, 186, 2.77, 91, 50, 28]
|
||||
],
|
||||
dataGZ: [
|
||||
[84, 94, 140, 2.238, 68, 18, 22],
|
||||
[93, 77, 104, 1.165, 53, 7, 23],
|
||||
[99, 130, 227, 3.97, 55, 15, 24],
|
||||
[146, 84, 139, 1.094, 40, 17, 25],
|
||||
[113, 108, 137, 1.481, 48, 15, 26],
|
||||
[81, 48, 62, 1.619, 26, 3, 27],
|
||||
[56, 48, 68, 1.336, 37, 9, 28]
|
||||
],
|
||||
dataSH: [
|
||||
[91, 45, 125, 0.82, 34, 23, 1],
|
||||
[65, 27, 78, 0.86, 45, 29, 2],
|
||||
[83, 60, 84, 1.09, 73, 27, 3],
|
||||
[109, 81, 121, 1.28, 68, 51, 4],
|
||||
[106, 77, 114, 1.07, 55, 51, 5],
|
||||
[109, 81, 121, 1.28, 68, 51, 6],
|
||||
[106, 77, 114, 1.07, 55, 51, 7]
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
components: {
|
||||
Chart,
|
||||
}
|
||||
}
|
||||
</script>
|
||||
57
klp-ui/src/modules/dashboardBig/utils/drawMixin.js
Normal file
57
klp-ui/src/modules/dashboardBig/utils/drawMixin.js
Normal file
@@ -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)
|
||||
}
|
||||
},
|
||||
}
|
||||
51
klp-ui/src/modules/dashboardBig/utils/index.js
Normal file
51
klp-ui/src/modules/dashboardBig/utils/index.js
Normal file
@@ -0,0 +1,51 @@
|
||||
/**
|
||||
* @param {Function} fn 防抖函数
|
||||
* @param {Number} delay 延迟时间
|
||||
*/
|
||||
export function debounce(fn, delay) {
|
||||
var timer;
|
||||
return function () {
|
||||
var context = this;
|
||||
var 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 formatTime(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;
|
||||
}
|
||||
}
|
||||
33
klp-ui/src/modules/dashboardBig/utils/resizeMixin.js
Normal file
33
klp-ui/src/modules/dashboardBig/utils/resizeMixin.js
Normal file
@@ -0,0 +1,33 @@
|
||||
// 混入代码 resize-mixins.js
|
||||
// 改成 Scale 缩放之后，没有使用这个代码，但是保留
|
||||
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),
|
||||
},
|
||||
};
|
||||
52
klp-ui/src/modules/dashboardBig/views/bottomLeft.vue
Normal file
52
klp-ui/src/modules/dashboardBig/views/bottomLeft.vue
Normal file
@@ -0,0 +1,52 @@
|
||||
<template>
|
||||
<div id="bottomLeft">
|
||||
<div class="bg-color-black">
|
||||
<div class="d-flex pt-2 pl-2">
|
||||
<span>
|
||||
<icon name="chart-bar" class="text-icon"></icon>
|
||||
</span>
|
||||
<div class="d-flex">
|
||||
<span class="fs-xl text mx-2">数据统计图</span>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<BottomLeftChart />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import BottomLeftChart from '../components/echart/bottom/bottomLeftChart'
|
||||
export default {
|
||||
components: {
|
||||
BottomLeftChart
|
||||
}
|
||||
}
|
||||
</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>
|
||||
60
klp-ui/src/modules/dashboardBig/views/bottomRight.vue
Normal file
60
klp-ui/src/modules/dashboardBig/views/bottomRight.vue
Normal file
@@ -0,0 +1,60 @@
|
||||
<template>
|
||||
<div id="bottomRight">
|
||||
<div class="bg-color-black">
|
||||
<div class="d-flex pt-2 pl-2">
|
||||
<span>
|
||||
<icon name="chart-area" class="text-icon"></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>
|
||||
<BottomRightChart />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import BottomRightChart from "../components/echart/bottom/bottomRightChart";
|
||||
export default {
|
||||
components: {
|
||||
BottomRightChart
|
||||
}
|
||||
};
|
||||
</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>
|
||||
283
klp-ui/src/modules/dashboardBig/views/center.vue
Normal file
283
klp-ui/src/modules/dashboardBig/views/center.vue
Normal file
@@ -0,0 +1,283 @@
|
||||
<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>
|
||||
<icon name="chart-pie" class="text-icon"></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/center/centerChartRate'
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
titleItem: [
|
||||
{
|
||||
title: '今年累计任务建次数',
|
||||
number: {
|
||||
number: [120],
|
||||
toFixed: 1,
|
||||
textAlign: 'left',
|
||||
content: '{nt}',
|
||||
style: {
|
||||
fontSize: 26
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '本月累计任务次数',
|
||||
number: {
|
||||
number: [18],
|
||||
toFixed: 1,
|
||||
textAlign: 'left',
|
||||
content: '{nt}',
|
||||
style: {
|
||||
fontSize: 26
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '今日累计任务次数',
|
||||
number: {
|
||||
number: [2],
|
||||
toFixed: 1,
|
||||
textAlign: 'left',
|
||||
content: '{nt}',
|
||||
style: {
|
||||
fontSize: 26
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '今年失败任务次数',
|
||||
number: {
|
||||
number: [14],
|
||||
toFixed: 1,
|
||||
textAlign: 'left',
|
||||
content: '{nt}',
|
||||
style: {
|
||||
fontSize: 26
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '今年成功任务次数',
|
||||
number: {
|
||||
number: [106],
|
||||
toFixed: 1,
|
||||
textAlign: 'left',
|
||||
content: '{nt}',
|
||||
style: {
|
||||
fontSize: 26
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '今年达标任务个数',
|
||||
number: {
|
||||
number: [100],
|
||||
toFixed: 1,
|
||||
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: '新乡2',
|
||||
value: 80
|
||||
},
|
||||
{
|
||||
name: '新乡3',
|
||||
value: 80
|
||||
},
|
||||
{
|
||||
name: '新乡4',
|
||||
value: 80
|
||||
},
|
||||
{
|
||||
name: '新乡5',
|
||||
value: 80
|
||||
},
|
||||
{
|
||||
name: '新乡6',
|
||||
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>
|
||||
169
klp-ui/src/modules/dashboardBig/views/centerLeft1.vue
Normal file
169
klp-ui/src/modules/dashboardBig/views/centerLeft1.vue
Normal file
@@ -0,0 +1,169 @@
|
||||
<template>
|
||||
<div id="centerLeft1">
|
||||
<div class="bg-color-black">
|
||||
<div class="d-flex pt-2 pl-2">
|
||||
<span>
|
||||
<icon name="chart-bar" class="text-icon"></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">
|
||||
<CenterLeft1Chart />
|
||||
</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 CenterLeft1Chart from '../components/echart/centerLeft/centerLeft1Chart'
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
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: '未通过数量'
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
components: {
|
||||
CenterLeft1Chart
|
||||
},
|
||||
mounted() {
|
||||
this.changeTiming()
|
||||
},
|
||||
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: $box-width;
|
||||
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>
|
||||
59
klp-ui/src/modules/dashboardBig/views/centerLeft2.vue
Normal file
59
klp-ui/src/modules/dashboardBig/views/centerLeft2.vue
Normal file
@@ -0,0 +1,59 @@
|
||||
<template>
|
||||
<div id="centerLeft1">
|
||||
<div class="bg-color-black">
|
||||
<div class="d-flex pt-2 pl-2">
|
||||
<span>
|
||||
<icon name="chart-pie" class="text-icon"></icon>
|
||||
</span>
|
||||
<div class="d-flex">
|
||||
<span class="fs-xl text mx-2">地图数据</span>
|
||||
<dv-decoration-1 class="dv-dec-1" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="d-flex jc-center">
|
||||
<CenterLeft2Chart />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import CenterLeft2Chart from "../components/echart/centerLeft/centerLeft2Chart";
|
||||
export default {
|
||||
components: {
|
||||
CenterLeft2Chart
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
#centerLeft1 {
|
||||
$box-width: 300px;
|
||||
$box-height: 410px;
|
||||
padding: 16px;
|
||||
height: $box-height;
|
||||
min-width: $box-width;
|
||||
border-radius: 5px;
|
||||
.bg-color-black {
|
||||
height: $box-height - 30px;
|
||||
border-radius: 10px;
|
||||
}
|
||||
.text {
|
||||
color: #c3cbde;
|
||||
}
|
||||
.dv-dec-1 {
|
||||
position: relative;
|
||||
width: 100px;
|
||||
height: 20px;
|
||||
top: -3px;
|
||||
}
|
||||
.chart-box {
|
||||
margin-top: 16px;
|
||||
width: 170px;
|
||||
height: 170px;
|
||||
.active-ring-name {
|
||||
padding-top: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
76
klp-ui/src/modules/dashboardBig/views/centerRight1.vue
Normal file
76
klp-ui/src/modules/dashboardBig/views/centerRight1.vue
Normal file
@@ -0,0 +1,76 @@
|
||||
<template>
|
||||
<div id="centerRight1">
|
||||
<div class="bg-color-black">
|
||||
<div class="d-flex pt-2 pl-2">
|
||||
<span>
|
||||
<icon name="chart-line" class="text-icon"></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'>↑75%</span>"],
|
||||
['组件2', 'dev-2', "<span class='colorRed'>↓33%</span>"],
|
||||
['组件3', 'dev-3', "<span class='colorGrass'>↑100%</span>"],
|
||||
['组件4', 'rea-1', "<span class='colorGrass'>↑94%</span>"],
|
||||
['组件5', 'rea-2', "<span class='colorGrass'>↑95%</span>"],
|
||||
['组件6', 'fix-2', "<span class='colorGrass'>↑63%</span>"],
|
||||
['组件7', 'fix-4', "<span class='colorGrass'>↑84%</span>"],
|
||||
['组件8', 'fix-7', "<span class='colorRed'>↓46%</span>"],
|
||||
['组件9', 'dev-2', "<span class='colorRed'>↓13%</span>"],
|
||||
['组件10', 'dev-9', "<span class='colorGrass'>↑76%</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>
|
||||
80
klp-ui/src/modules/dashboardBig/views/centerRight2.vue
Normal file
80
klp-ui/src/modules/dashboardBig/views/centerRight2.vue
Normal file
@@ -0,0 +1,80 @@
|
||||
<template>
|
||||
<div id="centerRight2">
|
||||
<div class="bg-color-black">
|
||||
<div class="d-flex pt-2 pl-2">
|
||||
<span>
|
||||
<icon name="align-left" class="text-icon"></icon>
|
||||
</span>
|
||||
<span class="fs-xl text mx-2">产品销售渠道分析</span>
|
||||
</div>
|
||||
<div class="d-flex ai-center flex-column body-box">
|
||||
<dv-capsule-chart class="dv-cap-chart" :config="config" />
|
||||
<centerRight2Chart1 />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import centerRight2Chart1 from '../components/echart/centerRight/centerRightChart'
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
config: {
|
||||
data: [
|
||||
{
|
||||
name: '南阳',
|
||||
value: 167
|
||||
},
|
||||
{
|
||||
name: '周口',
|
||||
value: 67
|
||||
},
|
||||
{
|
||||
name: '漯河',
|
||||
value: 123
|
||||
},
|
||||
{
|
||||
name: '郑州',
|
||||
value: 55
|
||||
},
|
||||
{
|
||||
name: '西峡',
|
||||
value: 98
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
components: { centerRight2Chart1 }
|
||||
}
|
||||
</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: 160px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
153
klp-ui/src/modules/dashboardBig/views/index.vue
Normal file
153
klp-ui/src/modules/dashboardBig/views/index.vue
Normal file
@@ -0,0 +1,153 @@
|
||||
<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="decorationColor" />
|
||||
<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="decorationColor"
|
||||
/>
|
||||
</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-left"></span>
|
||||
<span class="text">数据分析1</span>
|
||||
</div>
|
||||
<div class="react-left 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">vue-big-screen</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-12>
|
||||
<centerLeft1 />
|
||||
</dv-border-box-12>
|
||||
</div>
|
||||
<div>
|
||||
<dv-border-box-12>
|
||||
<centerLeft2 />
|
||||
</dv-border-box-12>
|
||||
</div>
|
||||
<!-- 中间 -->
|
||||
<div>
|
||||
<center />
|
||||
</div>
|
||||
<!-- 中间 -->
|
||||
<div>
|
||||
<centerRight2 />
|
||||
</div>
|
||||
<div>
|
||||
<dv-border-box-13>
|
||||
<centerRight1 />
|
||||
</dv-border-box-13>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 第四行数据 -->
|
||||
<div class="bottom-box">
|
||||
<dv-border-box-13>
|
||||
<bottomLeft />
|
||||
</dv-border-box-13>
|
||||
<dv-border-box-12>
|
||||
<bottomRight />
|
||||
</dv-border-box-12>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import drawMixin from "../utils/drawMixin";
|
||||
import { formatTime } from '../utils/index.js'
|
||||
import centerLeft1 from './centerLeft1'
|
||||
import centerLeft2 from './centerLeft2'
|
||||
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: ['周日', '周一', '周二', '周三', '周四', '周五', '周六'],
|
||||
decorationColor: ['#568aea', '#000000']
|
||||
}
|
||||
},
|
||||
components: {
|
||||
centerLeft1,
|
||||
centerLeft2,
|
||||
centerRight1,
|
||||
centerRight2,
|
||||
center,
|
||||
bottomLeft,
|
||||
bottomRight
|
||||
},
|
||||
mounted() {
|
||||
this.timeFn()
|
||||
this.cancelLoading()
|
||||
},
|
||||
beforeDestroy () {
|
||||
clearInterval(this.timing)
|
||||
},
|
||||
methods: {
|
||||
timeFn() {
|
||||
this.timing = setInterval(() => {
|
||||
this.dateDay = formatTime(new Date(), 'HH: mm: ss')
|
||||
this.dateYear = formatTime(new Date(), 'yyyy-MM-dd')
|
||||
this.dateWeek = this.weekday[new Date().getDay()]
|
||||
}, 1000)
|
||||
},
|
||||
cancelLoading() {
|
||||
setTimeout(() => {
|
||||
this.loading = false
|
||||
}, 500)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import '../assets/scss/index.scss';
|
||||
</style>
|
||||
@@ -1,360 +1,11 @@
|
||||
<!--
|
||||
* @Author: daidai
|
||||
* @Date: 2022-01-12 14:23:32
|
||||
* @LastEditors: Please set LastEditors
|
||||
* @LastEditTime: 2022-09-09 14:47:24
|
||||
* @FilePath: \web-pc\src\pages\big-screen\view\home.vue
|
||||
-->
|
||||
<template>
|
||||
<ScaleScreen
|
||||
:width="1920"
|
||||
:height="1080"
|
||||
class="scale-wrap"
|
||||
:selfAdaption="true"
|
||||
>
|
||||
<div class="bg">
|
||||
<dv-loading v-if="loading">Loading...</dv-loading>
|
||||
<div v-else class="host-body">
|
||||
<!-- 头部 s -->
|
||||
<div class="d-flex jc-center title_wrap">
|
||||
<div class="zuojuxing"></div>
|
||||
<div class="youjuxing"></div>
|
||||
<div class="guang"></div>
|
||||
<div class="d-flex jc-center">
|
||||
<div class="title">
|
||||
<span class="title-text">互联网设备可视化平台</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="timers">
|
||||
{{ dateYear }} {{ dateWeek }} {{ dateDay }}
|
||||
<i
|
||||
class="blq-icon-shezhi02"
|
||||
style="margin-left: 10px"
|
||||
@click="showSetting"
|
||||
></i>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 头部 e-->
|
||||
<!-- 内容 s-->
|
||||
<Bodys></Bodys>
|
||||
<!-- 内容 e -->
|
||||
</div>
|
||||
</div>
|
||||
</ScaleScreen>
|
||||
<!-- </div> -->
|
||||
<Home></Home>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import ScaleScreen from "@/components/Dashboard/scale-screen/scale-screen.vue";
|
||||
import Bodys from './indexs/index.vue'
|
||||
import Home from '@/modules/dashboardBig/views/index.vue'
|
||||
|
||||
export default {
|
||||
components: { ScaleScreen, Bodys },
|
||||
data() {
|
||||
return {
|
||||
timing: null,
|
||||
loading: true,
|
||||
dateDay: null,
|
||||
dateYear: null,
|
||||
dateWeek: null,
|
||||
weekday: ["周日", "周一", "周二", "周三", "周四", "周五", "周六"],
|
||||
};
|
||||
},
|
||||
filters: {
|
||||
numsFilter(msg) {
|
||||
return msg || 0;
|
||||
},
|
||||
},
|
||||
computed: {},
|
||||
created() {},
|
||||
mounted() {
|
||||
this.timeFn();
|
||||
this.cancelLoading();
|
||||
},
|
||||
beforeDestroy() {
|
||||
clearInterval(this.timing);
|
||||
},
|
||||
methods: {
|
||||
showSetting() {
|
||||
this.$refs.setting.init();
|
||||
},
|
||||
timeFn() {
|
||||
this.timing = setInterval(() => {
|
||||
this.dateDay = new Date().toLocaleTimeString();
|
||||
this.dateYear = new Date().toLocaleDateString();
|
||||
this.dateWeek = this.weekday[new Date().getDay()];
|
||||
}, 1000);
|
||||
},
|
||||
cancelLoading() {
|
||||
let timer = setTimeout(() => {
|
||||
this.loading = false;
|
||||
clearTimeout(timer);
|
||||
}, 500);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.scale-wrap {
|
||||
color: #d3d6dd;
|
||||
width: 1920px;
|
||||
height: 1080px;
|
||||
overflow: hidden;
|
||||
// &.pageisScale {
|
||||
// position: absolute;
|
||||
// top: 50%;
|
||||
// left: 50%;
|
||||
// transform: translate(-50%, -50%);
|
||||
// transform-origin: left top;
|
||||
// }
|
||||
.bg {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding: 16px 16px 10px 16px;
|
||||
box-sizing: border-box;
|
||||
background-image: url("../assets/img/pageBg.png");
|
||||
background-size: cover;
|
||||
background-position: center center;
|
||||
}
|
||||
|
||||
.host-body {
|
||||
height: 100%;
|
||||
|
||||
.title_wrap {
|
||||
height: 60px;
|
||||
background-image: url("../assets/img/top.png");
|
||||
background-size: cover;
|
||||
background-position: center center;
|
||||
position: relative;
|
||||
margin-bottom: 4px;
|
||||
|
||||
.guang {
|
||||
position: absolute;
|
||||
bottom: -26px;
|
||||
background-image: url("../assets/img/guang.png");
|
||||
background-position: 80px center;
|
||||
width: 100%;
|
||||
height: 56px;
|
||||
}
|
||||
|
||||
.zuojuxing,
|
||||
.youjuxing {
|
||||
position: absolute;
|
||||
top: -2px;
|
||||
width: 140px;
|
||||
height: 6px;
|
||||
background-image: url("../assets/img/headers/juxing1.png");
|
||||
}
|
||||
|
||||
.zuojuxing {
|
||||
|
||||
left: 11%;
|
||||
}
|
||||
|
||||
.youjuxing {
|
||||
right: 11%;
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
|
||||
.timers {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 30px;
|
||||
font-size: 18px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.blq-icon-shezhi02 {
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.title {
|
||||
position: relative;
|
||||
// width: 500px;
|
||||
text-align: center;
|
||||
background-size: cover;
|
||||
color: transparent;
|
||||
height: 60px;
|
||||
line-height: 46px;
|
||||
|
||||
.title-text {
|
||||
font-size: 38px;
|
||||
font-weight: 900;
|
||||
letter-spacing: 6px;
|
||||
width: 100%;
|
||||
background: linear-gradient(92deg, #0072FF 0%, #00EAFF 48.8525390625%, #01AAFF 100%);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
components: { Home },
|
||||
}
|
||||
|
||||
.scale-wrap {
|
||||
.pagetab {
|
||||
position: absolute;
|
||||
top: -35px;
|
||||
display: flex;
|
||||
|
||||
.item {
|
||||
width: 130px;
|
||||
height: 36px;
|
||||
border-radius: 18px 0px 0px 18px;
|
||||
color: #00FBF8;
|
||||
text-indent: 26px;
|
||||
line-height: 36px;
|
||||
font-size: 16px;
|
||||
margin-right: 20px;
|
||||
background: linear-gradient(to right, rgba(76, 245, 255, .5), rgba(76, 245, 255, 0));
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.setting {
|
||||
position: fixed;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: 999;
|
||||
top: 0;
|
||||
left: 0;
|
||||
|
||||
.left_shu {
|
||||
color: #000;
|
||||
font-weight: 900;
|
||||
position: relative;
|
||||
text-indent: 10px;
|
||||
padding:16px 0 10px 0 ;
|
||||
&::before {
|
||||
display: block;
|
||||
content: " ";
|
||||
height: 16px;
|
||||
width: 4px;
|
||||
border-radius: 2px;
|
||||
background: #0072FF;
|
||||
position: absolute;
|
||||
left: 0px;
|
||||
}
|
||||
}
|
||||
|
||||
.setting_dislog {
|
||||
background-color: rgba($color: #000000, $alpha: .5);
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: 0;
|
||||
right: 0;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.setting_inner {
|
||||
box-sizing: border-box;
|
||||
background: #FFF;
|
||||
width: 340px;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
right: 0px;
|
||||
top: 0;
|
||||
z-index: 1;
|
||||
color: #000000;
|
||||
box-shadow: 0 8px 10px -5px rgba(0, 0, 0, .2), 0 16px 24px 2px rgba(0, 0, 0, .14), 0 6px 30px 5px rgba(0, 0, 0, .12);
|
||||
|
||||
.setting_header {
|
||||
font-size: 20px;
|
||||
color: rgb(0, 0, 0);
|
||||
font-weight: 900;
|
||||
text-align: center;
|
||||
line-height: 40px;
|
||||
}
|
||||
|
||||
.setting_body {
|
||||
padding: 0px 16px;
|
||||
box-sizing: border-box;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.setting_item {
|
||||
font-size: 14px;
|
||||
line-height: 1.5;
|
||||
|
||||
// display: flex;
|
||||
.setting_label {
|
||||
color: #555454;
|
||||
}
|
||||
.setting_label_tip{
|
||||
font-size: 12px;
|
||||
color: #838282;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.setting_inner {
|
||||
animation: rtl-drawer-out .3s;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.settingShow {
|
||||
.setting_inner {
|
||||
animation: rtl-drawer-in .3s 1ms;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.yh-setting-fade-enter-active {
|
||||
animation: yh-setting-fade-in .3s;
|
||||
}
|
||||
|
||||
.yh-setting-fade-leave-active {
|
||||
|
||||
animation: yh-setting-fade-out .3s;
|
||||
|
||||
}
|
||||
|
||||
@keyframes yh-setting-fade-in {
|
||||
0% {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes yh-setting-fade-out {
|
||||
0% {
|
||||
opacity: 1;
|
||||
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@keyframes rtl-drawer-in {
|
||||
0% {
|
||||
transform: translate(100%, 0)
|
||||
}
|
||||
|
||||
100% {
|
||||
-webkit-transform: translate(0, 0);
|
||||
transform: translate(0, 0)
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes rtl-drawer-out {
|
||||
0% {
|
||||
transform: translate(0, 0)
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: translate(100%, 0)
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</script>
|
||||
@@ -1,186 +0,0 @@
|
||||
<template>
|
||||
<div class="center_bottom">
|
||||
<Echart
|
||||
:options="options"
|
||||
id="bottomLeftChart"
|
||||
class="echarts_bottom"
|
||||
></Echart>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { currentGET } from "api";
|
||||
import { graphic } from "echarts";
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
options: {},
|
||||
};
|
||||
},
|
||||
props: {},
|
||||
mounted() {
|
||||
this.getData();
|
||||
},
|
||||
methods: {
|
||||
getData() {
|
||||
this.pageflag = true;
|
||||
currentGET("big6", { companyName: this.companyName }).then((res) => {
|
||||
console.log("安装计划", res);
|
||||
if (res.success) {
|
||||
this.init(res.data);
|
||||
} else {
|
||||
this.pageflag = false;
|
||||
this.$Message({
|
||||
text: res.msg,
|
||||
type: "warning",
|
||||
});
|
||||
}
|
||||
});
|
||||
},
|
||||
init(newData) {
|
||||
this.options = {
|
||||
tooltip: {
|
||||
trigger: "axis",
|
||||
backgroundColor: "rgba(0,0,0,.6)",
|
||||
borderColor: "rgba(147, 235, 248, .8)",
|
||||
textStyle: {
|
||||
color: "#FFF",
|
||||
},
|
||||
formatter: function (params) {
|
||||
// 添加单位
|
||||
var result = params[0].name + "<br>";
|
||||
params.forEach(function (item) {
|
||||
if (item.value) {
|
||||
if (item.seriesName == "安装率") {
|
||||
result +=
|
||||
item.marker +
|
||||
" " +
|
||||
item.seriesName +
|
||||
" : " +
|
||||
item.value +
|
||||
"%</br>";
|
||||
} else {
|
||||
result +=
|
||||
item.marker +
|
||||
" " +
|
||||
item.seriesName +
|
||||
" : " +
|
||||
item.value +
|
||||
"个</br>";
|
||||
}
|
||||
} else {
|
||||
result += item.marker + " " + item.seriesName + " : - </br>";
|
||||
}
|
||||
});
|
||||
return result;
|
||||
},
|
||||
},
|
||||
legend: {
|
||||
data: ["已安装", "计划安装", "安装率"],
|
||||
textStyle: {
|
||||
color: "#B4B4B4",
|
||||
},
|
||||
top: "0",
|
||||
},
|
||||
grid: {
|
||||
left: "50px",
|
||||
right: "40px",
|
||||
bottom: "30px",
|
||||
top: "20px",
|
||||
},
|
||||
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: "bar",
|
||||
barWidth: 10,
|
||||
itemStyle: {
|
||||
borderRadius: 5,
|
||||
color: new 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: {
|
||||
borderRadius: 5,
|
||||
color: new 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,
|
||||
},
|
||||
{
|
||||
name: "安装率",
|
||||
type: "line",
|
||||
smooth: true,
|
||||
showAllSymbol: true,
|
||||
symbol: "emptyCircle",
|
||||
symbolSize: 8,
|
||||
yAxisIndex: 1,
|
||||
itemStyle: {
|
||||
color: "#F02FC2",
|
||||
},
|
||||
data: newData.rateData,
|
||||
},
|
||||
],
|
||||
};
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.center_bottom {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
.echarts_bottom {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,378 +0,0 @@
|
||||
<!--
|
||||
* @Author: daidai
|
||||
* @Date: 2022-03-01 11:17:39
|
||||
* @LastEditors: Please set LastEditors
|
||||
* @LastEditTime: 2022-09-29 15:50:18
|
||||
* @FilePath: \web-pc\src\pages\big-screen\view\indexs\center-map.vue
|
||||
-->
|
||||
<template>
|
||||
<div class="centermap">
|
||||
<div class="maptitle">
|
||||
<div class="zuo"></div>
|
||||
<span class="titletext">{{ maptitle }}</span>
|
||||
<div class="you"></div>
|
||||
</div>
|
||||
<div class="mapwrap">
|
||||
<dv-border-box-13>
|
||||
<div class="quanguo" @click="getData('china')" v-if="code !== 'china'">
|
||||
中国
|
||||
</div>
|
||||
|
||||
<Echart id="CenterMap" :options="options" ref="CenterMap" />
|
||||
</dv-border-box-13>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import xzqCode from "../../utils/map/xzqCode";
|
||||
import { currentGET } from "api/modules";
|
||||
import * as echarts from "echarts";
|
||||
import { GETNOBASE } from "api";
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
maptitle: "设备分布图",
|
||||
options: {},
|
||||
code: "china", //china 代表中国 其他地市是行政编码
|
||||
echartBindClick: false,
|
||||
isSouthChinaSea: false, //是否要展示南海群岛 修改此值请刷新页面
|
||||
};
|
||||
},
|
||||
created() {},
|
||||
|
||||
mounted() {
|
||||
// console.log(xzqCode);
|
||||
this.getData("china");
|
||||
},
|
||||
methods: {
|
||||
getData(code) {
|
||||
currentGET("big8", { regionCode: code }).then((res) => {
|
||||
console.log("设备分布", res);
|
||||
if (res.success) {
|
||||
this.getGeojson(res.data.regionCode, res.data.dataList);
|
||||
this.mapclick();
|
||||
} else {
|
||||
this.$Message.warning(res.msg);
|
||||
}
|
||||
});
|
||||
},
|
||||
/**
|
||||
* @description: 获取geojson
|
||||
* @param {*} name china 表示中国 其他省份行政区编码
|
||||
* @param {*} mydata 接口返回列表数据
|
||||
* @return {*}
|
||||
*/
|
||||
async getGeojson(name, mydata) {
|
||||
this.code = name;
|
||||
//如果要展示南海群岛并且展示的是中国的话
|
||||
let geoname=name
|
||||
if (this.isSouthChinaSea && name == "china") {
|
||||
geoname = "chinaNanhai";
|
||||
}
|
||||
//如果有注册地图的话就不用再注册 了
|
||||
let mapjson = echarts.getMap(name);
|
||||
if (mapjson) {
|
||||
mapjson = mapjson.geoJSON;
|
||||
} else {
|
||||
mapjson = await GETNOBASE(`./map-geojson/${geoname}.json`).then((res) => {
|
||||
return res;
|
||||
});
|
||||
echarts.registerMap(name, mapjson);
|
||||
}
|
||||
let cityCenter = {};
|
||||
let arr = mapjson.features;
|
||||
//根据geojson获取省份中心点
|
||||
arr.map((item) => {
|
||||
cityCenter[item.properties.name] =
|
||||
item.properties.centroid || item.properties.center;
|
||||
});
|
||||
let newData = [];
|
||||
mydata.map((item) => {
|
||||
if (cityCenter[item.name]) {
|
||||
newData.push({
|
||||
name: item.name,
|
||||
value: cityCenter[item.name].concat(item.value),
|
||||
});
|
||||
}
|
||||
});
|
||||
this.init(name, mydata, newData);
|
||||
},
|
||||
init(name, data, data2) {
|
||||
// console.log(data2);
|
||||
let top = 45;
|
||||
let zoom = 1.05;
|
||||
let option = {
|
||||
backgroundColor: "rgba(0,0,0,0)",
|
||||
tooltip: {
|
||||
show: false,
|
||||
},
|
||||
legend: {
|
||||
show: false,
|
||||
},
|
||||
visualMap: {
|
||||
left: 20,
|
||||
bottom: 20,
|
||||
pieces: [
|
||||
{ gte: 1000, label: "1000个以上" }, // 不指定 max，表示 max 为无限大（Infinity）。
|
||||
{ gte: 600, lte: 999, label: "600-999个" },
|
||||
{ gte: 200, lte: 599, label: "200-599个" },
|
||||
{ gte: 50, lte: 199, label: "49-199个" },
|
||||
{ gte: 10, lte: 49, label: "10-49个" },
|
||||
{ lte: 9, label: "1-9个" }, // 不指定 min，表示 min 为无限大（-Infinity）。
|
||||
],
|
||||
inRange: {
|
||||
// 渐变颜色，从小到大
|
||||
color: [
|
||||
"#c3d7df",
|
||||
"#5cb3cc",
|
||||
"#8abcd1",
|
||||
"#66a9c9",
|
||||
"#2f90b9",
|
||||
"#1781b5",
|
||||
],
|
||||
},
|
||||
textStyle: {
|
||||
color: "#fff",
|
||||
},
|
||||
},
|
||||
geo: {
|
||||
map: name,
|
||||
roam: false,
|
||||
selectedMode: false, //是否允许选中多个区域
|
||||
zoom: zoom,
|
||||
top: top,
|
||||
// aspectScale: 0.78,
|
||||
show: false,
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: "MAP",
|
||||
type: "map",
|
||||
map: name,
|
||||
// aspectScale: 0.78,
|
||||
data: data,
|
||||
// data: [1,100],
|
||||
selectedMode: false, //是否允许选中多个区域
|
||||
zoom: zoom,
|
||||
geoIndex: 1,
|
||||
top: top,
|
||||
tooltip: {
|
||||
show: true,
|
||||
formatter: function (params) {
|
||||
if (params.data) {
|
||||
return params.name + "：" + params.data["value"];
|
||||
} else {
|
||||
return params.name;
|
||||
}
|
||||
},
|
||||
backgroundColor: "rgba(0,0,0,.6)",
|
||||
borderColor: "rgba(147, 235, 248, .8)",
|
||||
textStyle: {
|
||||
color: "#FFF",
|
||||
},
|
||||
},
|
||||
label: {
|
||||
show: false,
|
||||
color: "#000",
|
||||
// position: [-10, 0],
|
||||
formatter: function (val) {
|
||||
// console.log(val)
|
||||
if (val.data !== undefined) {
|
||||
return val.name.slice(0, 2);
|
||||
} else {
|
||||
return "";
|
||||
}
|
||||
},
|
||||
rich: {},
|
||||
},
|
||||
emphasis: {
|
||||
label: {
|
||||
show: false,
|
||||
},
|
||||
itemStyle: {
|
||||
areaColor: "#389BB7",
|
||||
borderWidth: 1,
|
||||
},
|
||||
},
|
||||
itemStyle: {
|
||||
borderColor: "rgba(147, 235, 248, .8)",
|
||||
borderWidth: 1,
|
||||
areaColor: {
|
||||
type: "radial",
|
||||
x: 0.5,
|
||||
y: 0.5,
|
||||
r: 0.8,
|
||||
colorStops: [
|
||||
{
|
||||
offset: 0,
|
||||
color: "rgba(147, 235, 248, 0)", // 0% 处的颜色
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: "rgba(147, 235, 248, .2)", // 100% 处的颜色
|
||||
},
|
||||
],
|
||||
globalCoord: false, // 缺为 false
|
||||
},
|
||||
shadowColor: "rgba(128, 217, 248, .3)",
|
||||
shadowOffsetX: -2,
|
||||
shadowOffsetY: 2,
|
||||
shadowBlur: 10,
|
||||
},
|
||||
},
|
||||
{
|
||||
data: data2,
|
||||
type: "effectScatter",
|
||||
coordinateSystem: "geo",
|
||||
symbolSize: function (val) {
|
||||
return 4;
|
||||
// return val[2] / 50;
|
||||
},
|
||||
legendHoverLink: true,
|
||||
showEffectOn: "render",
|
||||
rippleEffect: {
|
||||
// period: 4,
|
||||
scale: 6,
|
||||
color: "rgba(255,255,255, 1)",
|
||||
brushType: "fill",
|
||||
},
|
||||
tooltip: {
|
||||
show: true,
|
||||
formatter: function (params) {
|
||||
if (params.data) {
|
||||
return params.name + "：" + params.data["value"][2];
|
||||
} else {
|
||||
return params.name;
|
||||
}
|
||||
},
|
||||
backgroundColor: "rgba(0,0,0,.6)",
|
||||
borderColor: "rgba(147, 235, 248, .8)",
|
||||
textStyle: {
|
||||
color: "#FFF",
|
||||
},
|
||||
},
|
||||
label: {
|
||||
formatter: (param) => {
|
||||
return param.name.slice(0, 2);
|
||||
},
|
||||
|
||||
fontSize: 11,
|
||||
offset: [0, 2],
|
||||
position: "bottom",
|
||||
textBorderColor: "#fff",
|
||||
textShadowColor: "#000",
|
||||
textShadowBlur: 10,
|
||||
textBorderWidth: 0,
|
||||
color: "#FFF",
|
||||
show: true,
|
||||
},
|
||||
// colorBy: "data",
|
||||
itemStyle: {
|
||||
color: "rgba(255,255,255,1)",
|
||||
borderColor: "rgba(2255,255,255,2)",
|
||||
borderWidth: 4,
|
||||
shadowColor: "#000",
|
||||
shadowBlur: 10,
|
||||
},
|
||||
},
|
||||
],
|
||||
//动画效果
|
||||
// animationDuration: 1000,
|
||||
// animationEasing: 'linear',
|
||||
// animationDurationUpdate: 1000
|
||||
};
|
||||
this.options = option;
|
||||
},
|
||||
message(text) {
|
||||
this.$Message({
|
||||
text: text,
|
||||
type: "warning",
|
||||
});
|
||||
},
|
||||
mapclick() {
|
||||
if (this.echartBindClick) return;
|
||||
//单击切换到级地图，当mapCode有值,说明可以切换到下级地图
|
||||
this.$refs.CenterMap.chart.on("click", (params) => {
|
||||
// console.log(params);
|
||||
let xzqData = xzqCode[params.name];
|
||||
if (xzqData) {
|
||||
this.getData(xzqData.adcode);
|
||||
} else {
|
||||
this.message("暂无下级地市!");
|
||||
}
|
||||
});
|
||||
this.echartBindClick = true;
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.centermap {
|
||||
margin-bottom: 30px;
|
||||
|
||||
.maptitle {
|
||||
height: 60px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
padding-top: 10px;
|
||||
box-sizing: border-box;
|
||||
|
||||
.titletext {
|
||||
font-size: 28px;
|
||||
font-weight: 900;
|
||||
letter-spacing: 6px;
|
||||
background: linear-gradient(
|
||||
92deg,
|
||||
#0072ff 0%,
|
||||
#00eaff 48.8525390625%,
|
||||
#01aaff 100%
|
||||
);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
margin: 0 10px;
|
||||
}
|
||||
|
||||
.zuo,
|
||||
.you {
|
||||
background-size: 100% 100%;
|
||||
width: 29px;
|
||||
height: 20px;
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
.zuo {
|
||||
background: url("../../assets/img/xiezuo.png") no-repeat;
|
||||
}
|
||||
|
||||
.you {
|
||||
background: url("../../assets/img/xieyou.png") no-repeat;
|
||||
}
|
||||
}
|
||||
|
||||
.mapwrap {
|
||||
height: 548px;
|
||||
width: 100%;
|
||||
// padding: 0 0 10px 0;
|
||||
box-sizing: border-box;
|
||||
position: relative;
|
||||
|
||||
.quanguo {
|
||||
position: absolute;
|
||||
right: 20px;
|
||||
top: -46px;
|
||||
width: 80px;
|
||||
height: 28px;
|
||||
border: 1px solid #00eded;
|
||||
border-radius: 10px;
|
||||
color: #00f7f6;
|
||||
text-align: center;
|
||||
line-height: 26px;
|
||||
letter-spacing: 6px;
|
||||
cursor: pointer;
|
||||
box-shadow: 0 2px 4px rgba(0, 237, 237, 0.5),
|
||||
0 0 6px rgba(0, 237, 237, 0.4);
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,161 +0,0 @@
|
||||
<!--
|
||||
* @Author: daidai
|
||||
* @Date: 2022-03-04 09:23:59
|
||||
* @LastEditors: Please set LastEditors
|
||||
* @LastEditTime: 2022-05-07 11:05:02
|
||||
* @FilePath: \web-pc\src\pages\big-screen\view\indexs\index.vue
|
||||
-->
|
||||
<template>
|
||||
<div class="contents">
|
||||
<div class="contetn_left">
|
||||
<div class="pagetab">
|
||||
<!-- <div class="item">实时监测</div> -->
|
||||
|
||||
</div>
|
||||
<ItemWrap class="contetn_left-top contetn_lr-item" title="设备总览">
|
||||
<LeftTop/>
|
||||
|
||||
</ItemWrap>
|
||||
<ItemWrap class="contetn_left-center contetn_lr-item" title="用户总览">
|
||||
<LeftCenter />
|
||||
</ItemWrap>
|
||||
<ItemWrap
|
||||
class="contetn_left-bottom contetn_lr-item"
|
||||
title="设备提醒"
|
||||
style="padding: 0 10px 16px 10px"
|
||||
>
|
||||
<LeftBottom />
|
||||
</ItemWrap>
|
||||
</div>
|
||||
<div class="contetn_center">
|
||||
<CenterMap class="contetn_center_top" />
|
||||
<ItemWrap class="contetn_center-bottom" title="安装计划">
|
||||
<CenterBottom />
|
||||
</ItemWrap>
|
||||
</div>
|
||||
<div class="contetn_right">
|
||||
<ItemWrap
|
||||
class="contetn_left-bottom contetn_lr-item"
|
||||
title="报警次数"
|
||||
>
|
||||
<RightTop />
|
||||
</ItemWrap>
|
||||
<ItemWrap
|
||||
class="contetn_left-bottom contetn_lr-item"
|
||||
title="报警排名(TOP8)"
|
||||
style="padding: 0 10px 16px 10px"
|
||||
>
|
||||
<RightCenter />
|
||||
</ItemWrap>
|
||||
<ItemWrap
|
||||
class="contetn_left-bottom contetn_lr-item"
|
||||
title="数据统计图 "
|
||||
>
|
||||
<RightBottom />
|
||||
</ItemWrap>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import LeftTop from './left-top.vue'
|
||||
import LeftCenter from "./left-center.vue";
|
||||
import LeftBottom from "./left-bottom.vue";
|
||||
import CenterMap from "./center-map.vue";
|
||||
import CenterBottom from "./center-bottom.vue";
|
||||
import RightTop from "./right-top.vue";
|
||||
import RightCenter from "./right-center.vue";
|
||||
import RightBottom from "./right-bottom.vue";
|
||||
|
||||
export default {
|
||||
components: {
|
||||
LeftTop,
|
||||
LeftCenter,
|
||||
LeftBottom,
|
||||
CenterMap,
|
||||
RightTop,
|
||||
RightCenter,
|
||||
RightBottom,
|
||||
CenterBottom,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
|
||||
};
|
||||
},
|
||||
filters: {
|
||||
numsFilter(msg) {
|
||||
return msg || 0;
|
||||
},
|
||||
},
|
||||
created() {
|
||||
},
|
||||
|
||||
mounted() {},
|
||||
methods: {
|
||||
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
// 内容
|
||||
.contents {
|
||||
.contetn_left,
|
||||
.contetn_right {
|
||||
width: 540px;
|
||||
box-sizing: border-box;
|
||||
// padding: 16px 0;
|
||||
}
|
||||
|
||||
.contetn_center {
|
||||
width: 720px;
|
||||
}
|
||||
|
||||
//左右两侧 三个块
|
||||
.contetn_lr-item {
|
||||
height: 310px;
|
||||
}
|
||||
|
||||
.contetn_center_top {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
// 中间
|
||||
.contetn_center {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-around;
|
||||
}
|
||||
|
||||
.contetn_center-bottom {
|
||||
height: 315px;
|
||||
}
|
||||
|
||||
//左边 右边 结构一样
|
||||
.contetn_left,
|
||||
.contetn_right {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-around;
|
||||
position: relative;
|
||||
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@keyframes rotating {
|
||||
0% {
|
||||
-webkit-transform: rotate(0) scale(1);
|
||||
transform: rotate(0) scale(1);
|
||||
}
|
||||
50% {
|
||||
-webkit-transform: rotate(180deg) scale(1.1);
|
||||
transform: rotate(180deg) scale(1.1);
|
||||
}
|
||||
100% {
|
||||
-webkit-transform: rotate(360deg) scale(1);
|
||||
transform: rotate(360deg) scale(1);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,255 +0,0 @@
|
||||
<!--
|
||||
* @Author: daidai
|
||||
* @Date: 2022-03-01 09:43:37
|
||||
* @LastEditors: Please set LastEditors
|
||||
* @LastEditTime: 2022-09-09 11:40:22
|
||||
* @FilePath: \web-pc\src\pages\big-screen\view\indexs\left-bottom.vue
|
||||
-->
|
||||
<template>
|
||||
<div
|
||||
v-if="pageflag"
|
||||
class="left_boottom_wrap beautify-scroll-def"
|
||||
:class="{ 'overflow-y-auto': !sbtxSwiperFlag }"
|
||||
>
|
||||
<component :is="components" :data="list" :class-option="defaultOption">
|
||||
<ul class="left_boottom">
|
||||
<li class="left_boottom_item" v-for="(item, i) in list" :key="i">
|
||||
<span class="orderNum doudong">{{ i + 1 }}</span>
|
||||
<div class="inner_right">
|
||||
<div class="dibu"></div>
|
||||
<div class="flex">
|
||||
<div class="info">
|
||||
<span class="labels">设备ID：</span>
|
||||
<span class="contents zhuyao doudong wangguan">
|
||||
{{ item.gatewayno }}</span
|
||||
>
|
||||
</div>
|
||||
<div class="info">
|
||||
<span class="labels">时间：</span>
|
||||
<span class="contents " style="font-size: 12px">
|
||||
{{ item.createTime }}</span
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<span
|
||||
class="types doudong"
|
||||
:class="{
|
||||
typeRed: item.onlineState == 0,
|
||||
typeGreen: item.onlineState == 1,
|
||||
}"
|
||||
>{{ item.onlineState == 1 ? "上线" : "下线" }}</span
|
||||
>
|
||||
|
||||
<div class="info addresswrap">
|
||||
<span class="labels">地址：</span>
|
||||
<span class="contents ciyao" style="font-size: 12px">
|
||||
{{ addressHandle(item) }}</span
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</component>
|
||||
</div>
|
||||
|
||||
<Reacquire v-else @onclick="getData" style="line-height: 200px" />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { currentGET } from "api";
|
||||
import vueSeamlessScroll from "vue-seamless-scroll"; // vue2引入方式
|
||||
import Kong from "../../components/kong.vue";
|
||||
export default {
|
||||
components: { vueSeamlessScroll, Kong },
|
||||
data() {
|
||||
return {
|
||||
list: [],
|
||||
pageflag: true,
|
||||
components: vueSeamlessScroll,
|
||||
defaultOption: {
|
||||
...this.$store.state.setting.defaultOption,
|
||||
singleHeight: 240,
|
||||
limitMoveNum: 5,
|
||||
step: 0,
|
||||
},
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
sbtxSwiperFlag() {
|
||||
let sbtxSwiper = this.$store.state.setting.sbtxSwiper;
|
||||
if (sbtxSwiper) {
|
||||
this.components = vueSeamlessScroll;
|
||||
} else {
|
||||
this.components = Kong;
|
||||
}
|
||||
return sbtxSwiper;
|
||||
},
|
||||
},
|
||||
created() {
|
||||
|
||||
},
|
||||
|
||||
mounted() {
|
||||
this.getData();
|
||||
},
|
||||
methods: {
|
||||
addressHandle(item) {
|
||||
let name = item.provinceName;
|
||||
if (item.cityName) {
|
||||
name += "/" + item.cityName;
|
||||
if (item.countyName) {
|
||||
name += "/" + item.countyName;
|
||||
}
|
||||
}
|
||||
return name;
|
||||
},
|
||||
getData() {
|
||||
this.pageflag = true;
|
||||
// this.pageflag =false
|
||||
currentGET("big3", { limitNum: 20 }).then((res) => {
|
||||
console.log("设备提醒", res);
|
||||
if (res.success) {
|
||||
this.countUserNumData = res.data;
|
||||
this.list = res.data.list;
|
||||
let timer = setTimeout(() => {
|
||||
clearTimeout(timer);
|
||||
this.defaultOption.step =
|
||||
this.$store.state.setting.defaultOption.step;
|
||||
}, this.$store.state.setting.defaultOption.waitTime);
|
||||
} else {
|
||||
this.pageflag = false;
|
||||
this.$Message({
|
||||
text: res.msg,
|
||||
type: "warning",
|
||||
});
|
||||
}
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style lang='scss' scoped>
|
||||
.left_boottom_wrap {
|
||||
overflow: hidden;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.doudong {
|
||||
// vertical-align:middle;
|
||||
overflow: hidden;
|
||||
-webkit-backface-visibility: hidden;
|
||||
-moz-backface-visibility: hidden;
|
||||
-ms-backface-visibility: hidden;
|
||||
backface-visibility: hidden;
|
||||
}
|
||||
|
||||
.overflow-y-auto {
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.left_boottom {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
.left_boottom_item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 8px;
|
||||
font-size: 14px;
|
||||
margin: 10px 0;
|
||||
.orderNum {
|
||||
margin: 0 16px 0 -20px;
|
||||
}
|
||||
|
||||
.info {
|
||||
margin-right: 10px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
color: #fff;
|
||||
|
||||
.labels {
|
||||
flex-shrink: 0;
|
||||
font-size: 12px;
|
||||
color: rgba(255, 255, 255, 0.6);
|
||||
}
|
||||
|
||||
.zhuyao {
|
||||
color: #1890ff;
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
.ciyao {
|
||||
color: rgba(255, 255, 255, 0.8);
|
||||
}
|
||||
|
||||
.warning {
|
||||
color: #e6a23c;
|
||||
font-size: 15px;
|
||||
}
|
||||
}
|
||||
|
||||
.inner_right {
|
||||
position: relative;
|
||||
height: 100%;
|
||||
width: 380px;
|
||||
flex-shrink: 0;
|
||||
line-height: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
flex-wrap: wrap;
|
||||
.dibu {
|
||||
position: absolute;
|
||||
height: 2px;
|
||||
width: 104%;
|
||||
background-image: url("../../assets/img/zuo_xuxian.png");
|
||||
bottom: -10px;
|
||||
left: -2%;
|
||||
background-size: cover;
|
||||
}
|
||||
.addresswrap {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
margin-top: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
.wangguan {
|
||||
color: #1890ff;
|
||||
font-weight: 900;
|
||||
font-size: 15px;
|
||||
width: 80px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
|
||||
.time {
|
||||
font-size: 12px;
|
||||
// color: rgba(211, 210, 210,.8);
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.address {
|
||||
font-size: 12px;
|
||||
cursor: pointer;
|
||||
// @include text-overflow(1);
|
||||
}
|
||||
|
||||
.types {
|
||||
width: 30px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.typeRed {
|
||||
color: #fc1a1a;
|
||||
}
|
||||
|
||||
.typeGreen {
|
||||
color: #29fc29;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,231 +0,0 @@
|
||||
<!--
|
||||
* @Author: daidai
|
||||
* @Date: 2022-02-28 16:16:42
|
||||
* @LastEditors: Please set LastEditors
|
||||
* @LastEditTime: 2022-10-25 09:18:22
|
||||
* @FilePath: \web-pc\src\pages\big-screen\view\indexs\left-center.vue
|
||||
-->
|
||||
<template>
|
||||
<Echart id="leftCenter" :options="options" class="left_center_inner" v-if="pageflag" ref="charts" />
|
||||
<Reacquire v-else @onclick="getData" style="line-height:200px">
|
||||
重新获取
|
||||
</Reacquire>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { currentGET } from 'api/modules'
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
options: {},
|
||||
countUserNumData: {
|
||||
lockNum: 0,
|
||||
onlineNum: 0,
|
||||
offlineNum: 0,
|
||||
totalNum: 0
|
||||
},
|
||||
pageflag: true,
|
||||
timer: null
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.getData()
|
||||
},
|
||||
mounted() {
|
||||
},
|
||||
beforeDestroy() {
|
||||
this.clearData()
|
||||
|
||||
},
|
||||
methods: {
|
||||
clearData() {
|
||||
if (this.timer) {
|
||||
clearInterval(this.timer)
|
||||
this.timer = null
|
||||
}
|
||||
},
|
||||
getData() {
|
||||
this.pageflag = true
|
||||
// this.pageflag =false
|
||||
|
||||
currentGET('big1').then(res => {
|
||||
//只打印一次
|
||||
if (!this.timer) {
|
||||
console.log("设备总览", res);
|
||||
}
|
||||
if (res.success) {
|
||||
this.countUserNumData = res.data
|
||||
this.$nextTick(() => {
|
||||
this.init()
|
||||
})
|
||||
|
||||
} else {
|
||||
this.pageflag = false
|
||||
this.$Message({
|
||||
text: res.msg,
|
||||
type: 'warning'
|
||||
})
|
||||
}
|
||||
})
|
||||
},
|
||||
//轮询
|
||||
switper() {
|
||||
if (this.timer) {
|
||||
return
|
||||
}
|
||||
let looper = (a) => {
|
||||
this.getData()
|
||||
};
|
||||
this.timer = setInterval(looper, this.$store.state.setting.echartsAutoTime);
|
||||
let myChart = this.$refs.charts.chart
|
||||
myChart.on('mouseover', params => {
|
||||
this.clearData()
|
||||
});
|
||||
myChart.on('mouseout', params => {
|
||||
this.timer = setInterval(looper, this.$store.state.setting.echartsAutoTime);
|
||||
});
|
||||
},
|
||||
init() {
|
||||
let total = this.countUserNumData.totalNum;
|
||||
let colors = ["#ECA444", "#33A1DB", "#56B557"];
|
||||
let piedata = {
|
||||
name: "用户总览",
|
||||
type: "pie",
|
||||
radius: ["42%", "65%"],
|
||||
avoidLabelOverlap: false,
|
||||
itemStyle: {
|
||||
borderRadius: 4,
|
||||
borderColor: "rgba(0,0,0,0)",
|
||||
borderWidth: 2,
|
||||
},
|
||||
|
||||
color: colors,
|
||||
data: [
|
||||
// {
|
||||
// value: 0,
|
||||
// name: "告警",
|
||||
// label: {
|
||||
// shadowColor: colors[0],
|
||||
// },
|
||||
// },
|
||||
{
|
||||
value: this.countUserNumData.lockNum,
|
||||
name: "锁定",
|
||||
label: {
|
||||
shadowColor: colors[0],
|
||||
},
|
||||
},
|
||||
{
|
||||
value: this.countUserNumData.onlineNum,
|
||||
name: "在线",
|
||||
label: {
|
||||
shadowColor: colors[2],
|
||||
},
|
||||
},
|
||||
{
|
||||
value: this.countUserNumData.offlineNum,
|
||||
name: "离线",
|
||||
label: {
|
||||
shadowColor: colors[1],
|
||||
},
|
||||
},
|
||||
|
||||
|
||||
],
|
||||
};
|
||||
this.options = {
|
||||
title: {
|
||||
// zlevel: 0,
|
||||
text: ["{value|" + total + "}", "{name|总数}"].join("\n"),
|
||||
top: "center",
|
||||
left: "center",
|
||||
textStyle: {
|
||||
rich: {
|
||||
value: {
|
||||
color: "#ffffff",
|
||||
fontSize: 24,
|
||||
fontWeight: "bold",
|
||||
lineHeight: 20,
|
||||
},
|
||||
name: {
|
||||
color: "#ffffff",
|
||||
lineHeight: 20,
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
tooltip: {
|
||||
trigger: "item",
|
||||
backgroundColor: "rgba(0,0,0,.6)",
|
||||
borderColor: "rgba(147, 235, 248, .8)",
|
||||
textStyle: {
|
||||
color: "#FFF",
|
||||
},
|
||||
},
|
||||
legend: {
|
||||
show: false,
|
||||
top: "5%",
|
||||
left: "center",
|
||||
},
|
||||
series: [
|
||||
//展示圆点
|
||||
{
|
||||
...piedata,
|
||||
tooltip: { show: true },
|
||||
label: {
|
||||
formatter: " {b|{b}} \n {c|{c}个} {per|{d}%} ",
|
||||
// position: "outside",
|
||||
rich: {
|
||||
b: {
|
||||
color: "#fff",
|
||||
fontSize: 12,
|
||||
lineHeight: 26,
|
||||
},
|
||||
c: {
|
||||
color: "#31ABE3",
|
||||
fontSize: 14,
|
||||
},
|
||||
per: {
|
||||
color: "#31ABE3",
|
||||
fontSize: 14,
|
||||
},
|
||||
},
|
||||
},
|
||||
labelLine: {
|
||||
length: 20, // 第一段线 长度
|
||||
length2: 36, // 第二段线 长度
|
||||
show: true,
|
||||
|
||||
},
|
||||
emphasis: {
|
||||
show: true,
|
||||
},
|
||||
},
|
||||
{
|
||||
...piedata,
|
||||
tooltip: { show: true },
|
||||
itemStyle: {},
|
||||
label: {
|
||||
backgroundColor: "inherit", //圆点颜色，auto：映射的系列色
|
||||
height: 0,
|
||||
width: 0,
|
||||
lineHeight: 0,
|
||||
borderRadius: 2.5,
|
||||
shadowBlur: 8,
|
||||
shadowColor: "auto",
|
||||
padding: [2.5, -2.5, 2.5, -2.5],
|
||||
},
|
||||
labelLine: {
|
||||
length: 20, // 第一段线 长度
|
||||
length2: 36, // 第二段线 长度
|
||||
show: false,
|
||||
},
|
||||
},
|
||||
],
|
||||
};
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style lang='scss' scoped>
|
||||
</style>
|
||||
@@ -1,229 +0,0 @@
|
||||
<!--
|
||||
* @Author: daidai
|
||||
* @Date: 2022-02-28 16:16:42
|
||||
* @LastEditors: Please set LastEditors
|
||||
* @LastEditTime: 2022-07-20 17:57:11
|
||||
* @FilePath: \web-pc\src\pages\big-screen\view\indexs\left-center.vue
|
||||
-->
|
||||
<template>
|
||||
<ul class="user_Overview flex" v-if="pageflag">
|
||||
<li class="user_Overview-item" style="color: #00fdfa">
|
||||
<div class="user_Overview_nums allnum ">
|
||||
<dv-digital-flop :config="config" style="width:100%;height:100%;" />
|
||||
</div>
|
||||
<p>总设备数</p>
|
||||
</li>
|
||||
<li class="user_Overview-item" style="color: #07f7a8">
|
||||
<div class="user_Overview_nums online">
|
||||
<dv-digital-flop :config="onlineconfig" style="width:100%;height:100%;" />
|
||||
</div>
|
||||
<p>在线数</p>
|
||||
</li>
|
||||
<li class="user_Overview-item" style="color: #e3b337">
|
||||
<div class="user_Overview_nums offline">
|
||||
<dv-digital-flop :config="offlineconfig" style="width:100%;height:100%;" />
|
||||
|
||||
</div>
|
||||
<p>掉线数</p>
|
||||
</li>
|
||||
<li class="user_Overview-item" style="color: #f5023d">
|
||||
<div class="user_Overview_nums laramnum">
|
||||
<dv-digital-flop :config="laramnumconfig" style="width:100%;height:100%;" />
|
||||
</div>
|
||||
<p>告警次数</p>
|
||||
</li>
|
||||
</ul>
|
||||
<Reacquire v-else @onclick="getData" line-height="200px">
|
||||
重新获取
|
||||
</Reacquire>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { currentGET } from 'api/modules'
|
||||
let style = {
|
||||
fontSize: 24
|
||||
}
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
options: {},
|
||||
userOverview: {
|
||||
alarmNum: 0,
|
||||
offlineNum: 0,
|
||||
onlineNum: 0,
|
||||
totalNum: 0,
|
||||
},
|
||||
pageflag: true,
|
||||
timer: null,
|
||||
config: {
|
||||
number: [100],
|
||||
content: '{nt}',
|
||||
style: {
|
||||
...style,
|
||||
// stroke: "#00fdfa",
|
||||
fill: "#00fdfa",
|
||||
},
|
||||
},
|
||||
onlineconfig: {
|
||||
number: [0],
|
||||
content: '{nt}',
|
||||
style: {
|
||||
...style,
|
||||
// stroke: "#07f7a8",
|
||||
fill: "#07f7a8",
|
||||
},
|
||||
},
|
||||
offlineconfig: {
|
||||
number: [0],
|
||||
content: '{nt}',
|
||||
style: {
|
||||
...style,
|
||||
// stroke: "#e3b337",
|
||||
fill: "#e3b337",
|
||||
},
|
||||
},
|
||||
laramnumconfig: {
|
||||
number: [0],
|
||||
content: '{nt}',
|
||||
style: {
|
||||
...style,
|
||||
// stroke: "#f5023d",
|
||||
fill: "#f5023d",
|
||||
},
|
||||
}
|
||||
|
||||
};
|
||||
},
|
||||
filters: {
|
||||
numsFilter(msg) {
|
||||
return msg || 0;
|
||||
},
|
||||
},
|
||||
created() {
|
||||
this.getData()
|
||||
},
|
||||
mounted() {
|
||||
},
|
||||
beforeDestroy() {
|
||||
this.clearData()
|
||||
|
||||
},
|
||||
methods: {
|
||||
clearData() {
|
||||
if (this.timer) {
|
||||
clearInterval(this.timer)
|
||||
this.timer = null
|
||||
}
|
||||
},
|
||||
getData() {
|
||||
this.pageflag = true;
|
||||
currentGET("big2").then((res) => {
|
||||
if (!this.timer) {
|
||||
console.log("设备总览", res);
|
||||
}
|
||||
if (res.success) {
|
||||
this.userOverview = res.data;
|
||||
this.onlineconfig = {
|
||||
...this.onlineconfig,
|
||||
number: [res.data.onlineNum]
|
||||
}
|
||||
this.config = {
|
||||
...this.config,
|
||||
number: [res.data.totalNum]
|
||||
}
|
||||
this.offlineconfig = {
|
||||
...this.offlineconfig,
|
||||
number: [res.data.offlineNum]
|
||||
}
|
||||
this.laramnumconfig = {
|
||||
...this.laramnumconfig,
|
||||
number: [res.data.alarmNum]
|
||||
}
|
||||
this.switper()
|
||||
} else {
|
||||
this.pageflag = false;
|
||||
this.$Message.warning(res.msg);
|
||||
}
|
||||
});
|
||||
},
|
||||
//轮询
|
||||
switper() {
|
||||
if (this.timer) {
|
||||
return
|
||||
}
|
||||
let looper = (a) => {
|
||||
this.getData()
|
||||
};
|
||||
this.timer = setInterval(looper, this.$store.state.setting.echartsAutoTime);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style lang='scss' scoped>
|
||||
.user_Overview {
|
||||
li {
|
||||
flex: 1;
|
||||
|
||||
p {
|
||||
text-align: center;
|
||||
height: 16px;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.user_Overview_nums {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
text-align: center;
|
||||
line-height: 100px;
|
||||
font-size: 22px;
|
||||
margin: 50px auto 30px;
|
||||
background-size: cover;
|
||||
background-position: center center;
|
||||
position: relative;
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
&.bgdonghua::before {
|
||||
animation: rotating 14s linear infinite;
|
||||
}
|
||||
}
|
||||
|
||||
.allnum {
|
||||
|
||||
// background-image: url("../../assets/img/left_top_lan.png");
|
||||
&::before {
|
||||
background-image: url("../../assets/img/left_top_lan.png");
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
.online {
|
||||
&::before {
|
||||
background-image: url("../../assets/img/left_top_lv.png");
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
.offline {
|
||||
&::before {
|
||||
background-image: url("../../assets/img/left_top_huang.png");
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
.laramnum {
|
||||
&::before {
|
||||
background-image: url("../../assets/img/left_top_hong.png");
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,194 +0,0 @@
|
||||
<!--
|
||||
* @Author: daidai
|
||||
* @Date: 2022-03-01 15:27:58
|
||||
* @LastEditors: Please set LastEditors
|
||||
* @LastEditTime: 2022-05-07 11:24:14
|
||||
* @FilePath: \web-pc\src\pages\big-screen\view\indexs\right-center.vue
|
||||
-->
|
||||
<template>
|
||||
<div v-if="pageflag" class="right_center_wrap beautify-scroll-def" :class="{ 'overflow-y-auto': !sbtxSwiperFlag }">
|
||||
<component :is="components" :data="list" :class-option="defaultOption">
|
||||
<ul class="right_center ">
|
||||
<li class="right_center_item" v-for="(item, i) in list" :key="i">
|
||||
<span class="orderNum">{{ i + 1 }}</span>
|
||||
<div class="inner_right">
|
||||
<div class="dibu"></div>
|
||||
<div class="flex">
|
||||
<div class="info">
|
||||
<span class="labels ">设备ID：</span>
|
||||
<span class="contents zhuyao"> {{ item.gatewayno }}</span>
|
||||
</div>
|
||||
<div class="info">
|
||||
<span class="labels">型号：</span>
|
||||
<span class="contents "> {{ item.terminalno }}</span>
|
||||
</div>
|
||||
<div class="info">
|
||||
<span class="labels">告警值：</span>
|
||||
<span class="contents warning"> {{ item.alertvalue | montionFilter }}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="flex">
|
||||
|
||||
<div class="info">
|
||||
<span class="labels"> 地址：</span>
|
||||
<span class="contents ciyao" style="font-size:12px"> {{ item.provinceName }}/{{ item.cityName }}/{{ item.countyName }}</span>
|
||||
</div>
|
||||
<div class="info time">
|
||||
<span class="labels">时间：</span>
|
||||
<span class="contents" style="font-size:12px"> {{ item.createtime }}</span>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="flex">
|
||||
|
||||
<div class="info">
|
||||
<span class="labels">报警内容：</span>
|
||||
<span class="contents ciyao" :class="{ warning: item.alertdetail }"> {{ item.alertdetail || '无'
|
||||
}}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</component>
|
||||
</div>
|
||||
<Reacquire v-else @onclick="getData" style="line-height:200px" />
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { currentGET } from 'api/modules'
|
||||
import vueSeamlessScroll from 'vue-seamless-scroll' // vue2引入方式
|
||||
import Kong from '../../components/kong.vue'
|
||||
export default {
|
||||
components: { vueSeamlessScroll, Kong },
|
||||
|
||||
data() {
|
||||
return {
|
||||
list: [],
|
||||
pageflag: true,
|
||||
defaultOption: {
|
||||
...this.$store.state.setting.defaultOption,
|
||||
limitMoveNum: 3,
|
||||
singleHeight: 250,
|
||||
step:0,
|
||||
}
|
||||
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
sbtxSwiperFlag() {
|
||||
let ssyjSwiper = this.$store.state.setting.ssyjSwiper
|
||||
if (ssyjSwiper) {
|
||||
this.components = vueSeamlessScroll
|
||||
} else {
|
||||
this.components = Kong
|
||||
}
|
||||
return ssyjSwiper
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.getData()
|
||||
},
|
||||
|
||||
mounted() { },
|
||||
methods: {
|
||||
getData() {
|
||||
this.pageflag = true
|
||||
// this.pageflag =false
|
||||
currentGET('big5', { limitNum: 50 }).then(res => {
|
||||
console.log('实时预警', res);
|
||||
if (res.success) {
|
||||
this.list = res.data.list
|
||||
let timer = setTimeout(() => {
|
||||
clearTimeout(timer)
|
||||
this.defaultOption.step=this.$store.state.setting.defaultOption.step
|
||||
}, this.$store.state.setting.defaultOption.waitTime);
|
||||
} else {
|
||||
this.pageflag = false
|
||||
this.$Message.warning(res.msg)
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style lang='scss' scoped>
|
||||
.right_center {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
.right_center_item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: auto;
|
||||
padding: 10px;
|
||||
font-size: 14px;
|
||||
color: #fff;
|
||||
|
||||
.orderNum {
|
||||
margin: 0 20px 0 -20px;
|
||||
}
|
||||
|
||||
|
||||
.inner_right {
|
||||
position: relative;
|
||||
height: 100%;
|
||||
width: 400px;
|
||||
flex-shrink: 0;
|
||||
line-height: 1.5;
|
||||
|
||||
.dibu {
|
||||
position: absolute;
|
||||
height: 2px;
|
||||
width: 104%;
|
||||
background-image: url("../../assets/img/zuo_xuxian.png");
|
||||
bottom: -12px;
|
||||
left: -2%;
|
||||
background-size: cover;
|
||||
}
|
||||
}
|
||||
|
||||
.info {
|
||||
margin-right: 10px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.labels {
|
||||
flex-shrink: 0;
|
||||
font-size: 12px;
|
||||
color: rgba(255, 255, 255, 0.6);
|
||||
}
|
||||
|
||||
.zhuyao {
|
||||
color: $primary-color;
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
.ciyao {
|
||||
color: rgba(255, 255, 255, 0.8);
|
||||
}
|
||||
|
||||
.warning {
|
||||
color: #E6A23C;
|
||||
font-size: 15px;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
.right_center_wrap {
|
||||
overflow: hidden;
|
||||
width: 100%;
|
||||
height: 250px;
|
||||
}
|
||||
|
||||
.overflow-y-auto {
|
||||
overflow-y: auto;
|
||||
}
|
||||
</style>
|
||||
@@ -1,163 +0,0 @@
|
||||
<!--
|
||||
* @Author: daidai
|
||||
* @Date: 2022-03-01 15:51:43
|
||||
* @LastEditors: Please set LastEditors
|
||||
* @LastEditTime: 2022-09-29 15:12:46
|
||||
* @FilePath: \web-pc\src\pages\big-screen\view\indexs\right-bottom.vue
|
||||
-->
|
||||
<template>
|
||||
<div class="right_bottom">
|
||||
<dv-capsule-chart :config="config" style="width:100%;height:260px" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { currentGET } from 'api/modules'
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
gatewayno: '',
|
||||
config: {
|
||||
showValue: true,
|
||||
unit: "次",
|
||||
data: []
|
||||
},
|
||||
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.getData()
|
||||
|
||||
},
|
||||
computed: {
|
||||
},
|
||||
mounted() { },
|
||||
beforeDestroy() {
|
||||
this.clearData()
|
||||
},
|
||||
methods: {
|
||||
clearData() {
|
||||
if (this.timer) {
|
||||
clearInterval(this.timer)
|
||||
this.timer = null
|
||||
}
|
||||
},
|
||||
//轮询
|
||||
switper() {
|
||||
if (this.timer) {
|
||||
return
|
||||
}
|
||||
let looper = (a) => {
|
||||
this.getData()
|
||||
};
|
||||
this.timer = setInterval(looper, this.$store.state.setting.echartsAutoTime);
|
||||
},
|
||||
getData() {
|
||||
this.pageflag = true
|
||||
// this.pageflag =false
|
||||
currentGET('big7', { gatewayno: this.gatewayno }).then(res => {
|
||||
|
||||
if (!this.timer) {
|
||||
console.log('报警排名', res);
|
||||
}
|
||||
if (res.success) {
|
||||
this.config = {
|
||||
...this.config,
|
||||
data: res.data
|
||||
}
|
||||
this.switper()
|
||||
} else {
|
||||
this.pageflag = false
|
||||
this.srcList = []
|
||||
this.$Message({
|
||||
text: res.msg,
|
||||
type: 'warning'
|
||||
})
|
||||
}
|
||||
})
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style lang='scss' scoped>
|
||||
.list_Wrap {
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
:deep(.kong) {
|
||||
width: auto;
|
||||
}
|
||||
}
|
||||
|
||||
.sbtxSwiperclass {
|
||||
.img_wrap {
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.right_bottom {
|
||||
box-sizing: border-box;
|
||||
padding: 0 16px;
|
||||
|
||||
.searchform {
|
||||
height: 80px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
.searchform_item {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
label {
|
||||
margin-right: 10px;
|
||||
color: rgba(255, 255, 255, 0.8);
|
||||
}
|
||||
|
||||
button {
|
||||
margin-left: 30px;
|
||||
}
|
||||
|
||||
input {}
|
||||
}
|
||||
}
|
||||
|
||||
.img_wrap {
|
||||
display: flex;
|
||||
// justify-content: space-around;
|
||||
box-sizing: border-box;
|
||||
padding: 0 0 20px;
|
||||
// overflow-x: auto;
|
||||
|
||||
li {
|
||||
width: 105px;
|
||||
height: 137px;
|
||||
border-radius: 6px;
|
||||
overflow: hidden;
|
||||
cursor: pointer;
|
||||
// background: #84ccc9;
|
||||
// border: 1px solid #ffffff;
|
||||
overflow: hidden;
|
||||
flex-shrink: 0;
|
||||
margin: 0 10px;
|
||||
|
||||
img {
|
||||
flex-shrink: 0;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
}
|
||||
|
||||
.noData {
|
||||
width: 100%;
|
||||
line-height: 100px;
|
||||
text-align: center;
|
||||
color: rgb(129, 128, 128);
|
||||
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,299 +0,0 @@
|
||||
<!--
|
||||
* @Author: daidai
|
||||
* @Date: 2022-03-01 14:13:04
|
||||
* @LastEditors: Please set LastEditors
|
||||
* @LastEditTime: 2022-09-27 15:04:49
|
||||
* @FilePath: \web-pc\src\pages\big-screen\view\indexs\right-top.vue
|
||||
-->
|
||||
<template>
|
||||
<Echart
|
||||
id="rightTop"
|
||||
:options="option"
|
||||
class="right_top_inner"
|
||||
v-if="pageflag"
|
||||
ref="charts"
|
||||
/>
|
||||
<Reacquire v-else @onclick="getData" style="line-height: 200px">
|
||||
重新获取
|
||||
</Reacquire>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { currentGET } from "api/modules";
|
||||
import {graphic} from "echarts"
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
option: {},
|
||||
pageflag: false,
|
||||
timer: null,
|
||||
};
|
||||
},
|
||||
created() {
|
||||
|
||||
},
|
||||
|
||||
mounted() {
|
||||
this.getData();
|
||||
},
|
||||
beforeDestroy() {
|
||||
this.clearData();
|
||||
},
|
||||
methods: {
|
||||
clearData() {
|
||||
if (this.timer) {
|
||||
clearInterval(this.timer);
|
||||
this.timer = null;
|
||||
}
|
||||
},
|
||||
getData() {
|
||||
this.pageflag = true;
|
||||
// this.pageflag =false
|
||||
currentGET("big4").then((res) => {
|
||||
if (!this.timer) {
|
||||
console.log("报警次数", res);
|
||||
}
|
||||
if (res.success) {
|
||||
this.countUserNumData = res.data;
|
||||
this.$nextTick(() => {
|
||||
this.init(res.data.dateList, res.data.numList, res.data.numList2),
|
||||
this.switper();
|
||||
});
|
||||
} else {
|
||||
this.pageflag = false;
|
||||
this.$Message({
|
||||
text: res.msg,
|
||||
type: "warning",
|
||||
});
|
||||
}
|
||||
});
|
||||
},
|
||||
//轮询
|
||||
switper() {
|
||||
if (this.timer) {
|
||||
return;
|
||||
}
|
||||
let looper = (a) => {
|
||||
this.getData();
|
||||
};
|
||||
this.timer = setInterval(
|
||||
looper,
|
||||
this.$store.state.setting.echartsAutoTime
|
||||
);
|
||||
let myChart = this.$refs.charts.chart;
|
||||
myChart.on("mouseover", (params) => {
|
||||
this.clearData();
|
||||
});
|
||||
myChart.on("mouseout", (params) => {
|
||||
this.timer = setInterval(
|
||||
looper,
|
||||
this.$store.state.setting.echartsAutoTime
|
||||
);
|
||||
});
|
||||
},
|
||||
init(xData, yData, yData2) {
|
||||
this.option = {
|
||||
xAxis: {
|
||||
type: "category",
|
||||
data: xData,
|
||||
boundaryGap: false, // 不留白，从原点开始
|
||||
splitLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: "rgba(31,99,163,.2)",
|
||||
},
|
||||
},
|
||||
axisLine: {
|
||||
// show:false,
|
||||
lineStyle: {
|
||||
color: "rgba(31,99,163,.1)",
|
||||
},
|
||||
},
|
||||
axisLabel: {
|
||||
color: "#7EB7FD",
|
||||
fontWeight: "500",
|
||||
},
|
||||
},
|
||||
yAxis: {
|
||||
type: "value",
|
||||
splitLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: "rgba(31,99,163,.2)",
|
||||
},
|
||||
},
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: "rgba(31,99,163,.1)",
|
||||
},
|
||||
},
|
||||
axisLabel: {
|
||||
color: "#7EB7FD",
|
||||
fontWeight: "500",
|
||||
},
|
||||
},
|
||||
tooltip: {
|
||||
trigger: "axis",
|
||||
backgroundColor: "rgba(0,0,0,.6)",
|
||||
borderColor: "rgba(147, 235, 248, .8)",
|
||||
textStyle: {
|
||||
color: "#FFF",
|
||||
},
|
||||
},
|
||||
grid: {
|
||||
//布局
|
||||
show: true,
|
||||
left: "10px",
|
||||
right: "30px",
|
||||
bottom: "10px",
|
||||
top: "28px",
|
||||
containLabel: true,
|
||||
borderColor: "#1F63A3",
|
||||
},
|
||||
series: [
|
||||
{
|
||||
data: yData,
|
||||
type: "line",
|
||||
smooth: true,
|
||||
symbol: "none", //去除点
|
||||
name: "报警1次数",
|
||||
color: "rgba(252,144,16,.7)",
|
||||
areaStyle: {
|
||||
//右，下，左，上
|
||||
color: new graphic.LinearGradient(
|
||||
0,
|
||||
0,
|
||||
0,
|
||||
1,
|
||||
[
|
||||
{
|
||||
offset: 0,
|
||||
color: "rgba(252,144,16,.7)",
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: "rgba(252,144,16,.0)",
|
||||
},
|
||||
],
|
||||
false
|
||||
),
|
||||
},
|
||||
markPoint: {
|
||||
data: [
|
||||
{
|
||||
name: "最大值",
|
||||
type: "max",
|
||||
valueDim: "y",
|
||||
symbol: "rect",
|
||||
symbolSize: [60, 26],
|
||||
symbolOffset: [0, -20],
|
||||
itemStyle: {
|
||||
color: "rgba(0,0,0,0)",
|
||||
},
|
||||
label: {
|
||||
color: "#FC9010",
|
||||
backgroundColor: "rgba(252,144,16,0.1)",
|
||||
borderRadius: 6,
|
||||
padding: [7, 14],
|
||||
borderWidth: 0.5,
|
||||
borderColor: "rgba(252,144,16,.5)",
|
||||
formatter: "报警1：{c}",
|
||||
},
|
||||
},
|
||||
{
|
||||
name: "最大值",
|
||||
type: "max",
|
||||
valueDim: "y",
|
||||
symbol: "circle",
|
||||
symbolSize: 6,
|
||||
itemStyle: {
|
||||
color: "#FC9010",
|
||||
shadowColor: "#FC9010",
|
||||
shadowBlur: 8,
|
||||
},
|
||||
label: {
|
||||
formatter: "",
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
{
|
||||
data: yData2,
|
||||
type: "line",
|
||||
smooth: true,
|
||||
symbol: "none", //去除点
|
||||
name: "报警2次数",
|
||||
color: "rgba(9,202,243,.7)",
|
||||
areaStyle: {
|
||||
//右，下，左，上
|
||||
color: new graphic.LinearGradient(
|
||||
0,
|
||||
0,
|
||||
0,
|
||||
1,
|
||||
[
|
||||
{
|
||||
offset: 0,
|
||||
color: "rgba(9,202,243,.7)",
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: "rgba(9,202,243,.0)",
|
||||
},
|
||||
],
|
||||
false
|
||||
),
|
||||
},
|
||||
markPoint: {
|
||||
data: [
|
||||
{
|
||||
name: "最大值",
|
||||
type: "max",
|
||||
valueDim: "y",
|
||||
symbol: "rect",
|
||||
symbolSize: [60, 26],
|
||||
symbolOffset: [0, -20],
|
||||
itemStyle: {
|
||||
color: "rgba(0,0,0,0)",
|
||||
},
|
||||
label: {
|
||||
color: "#09CAF3",
|
||||
backgroundColor: "rgba(9,202,243,0.1)",
|
||||
|
||||
borderRadius: 6,
|
||||
borderColor: "rgba(9,202,243,.5)",
|
||||
padding: [7, 14],
|
||||
formatter: "报警2：{c}",
|
||||
borderWidth: 0.5,
|
||||
},
|
||||
},
|
||||
{
|
||||
name: "最大值",
|
||||
type: "max",
|
||||
valueDim: "y",
|
||||
symbol: "circle",
|
||||
symbolSize: 6,
|
||||
itemStyle: {
|
||||
color: "#09CAF3",
|
||||
shadowColor: "#09CAF3",
|
||||
shadowBlur: 8,
|
||||
},
|
||||
label: {
|
||||
formatter: "",
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
],
|
||||
};
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style lang='scss' scoped>
|
||||
.right_top_inner {
|
||||
margin-top: -8px;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user