Skip to content

A
AmosBankView
Commit eabed450 authored by xinglei's avatar xinglei
Browse files
Options

*）修改首页样式

parent e13fa66d
Show whitespace changes
Inline Side-by-side
Showing with 591 additions and 485 deletions
amos.config.js
View file @ eabed450
......@@ -127,6 +127,4 @@
window.appKey = 'AMOS_BANK';
window.product = 'AMOS_BANK_WEB';
window.dutyType = 'bank'; //normal/bank
})();
src/styles/view/3dview/indexCharts.scss
View file @ eabed450
......@@ -18,20 +18,27 @@
.AlarmMarquee-top-news {
top: 7rem;
}
.body-left {
top: 7rem;
font-size: 14px;
}
.body-second {
top: 7rem;
}
.body-right {
top: 7rem;
font-size: 14px;
}
}
.content {
width: 100%;
height: 100%;
color: #fff;
.body-left {
position: absolute;
// @media screen and (min-width: 1280px) and (max-width: 1366px) {
......@@ -41,8 +48,8 @@
//right: 47px;
left: 10px;
z-index: 200;
padding: 5px 0;
width: 22%;
padding: 5px 0;
// height: 100%;
> div {
width: 100%;
......@@ -50,192 +57,219 @@
text-align: right;
// background: url('/src/assets/bg/indexRight.png') no-repeat center center/100% 100%;
img {
height: 100%;
width: 100%;
height: 100%;
}
}
.point{
.point {
padding-top: 60px;
}
.dangerNums {
margin-bottom: -12px;
// height: 15%;
.item {
width: 25%;
// border-left: 1px solid #fff;
float: left;
width: 25%;
height: 90%;
padding: 8px 0;
// background:linear-gradient(180deg,rgba(0,185,255,0.38) 0%,rgba(12,181,213,0.1) 100%);
background: rgba(23, 90, 201, 0.9);
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.27);
height: 90%;
padding: 8px 0;
.itemValue {
font-size: 17px;
color: #f70500;
height: 45%;
margin-bottom: 10px;
font-size: 17px;
color: #f70500;
}
&:nth-child(1) {
.itemContent {
border-left: none;
}
}
&:nth-child(1) {
.itemValue {
color: #f70500;
}
}
&:nth-child(2) {
.itemValue {
color: #ff8000;
}
}
&:nth-child(3) {
.itemValue {
color: #f1f10c;
}
}
&:nth-child(4) {
.itemValue {
color: #06c3ff;
}
}
.itemContent {
border-left: 1px solid rgba(151, 180, 226, 0.5);
display: flex;
width: 100%;
height: 100%;
display: flex;
border-left: 1px solid rgba(151, 180, 226, 0.5);
justify-content: center;
flex-direction: column;
align-items: center;
}
}
}
.alarmNums {
height: 15%;
padding-top: 4px;
padding-top: 2px;
margin-bottom: -8px;
.item {
width: 25%;
// border-left: 1px solid #fff;
float: left;
width: 25%;
height: 90%;
padding: 8px 0;
// background:linear-gradient(180deg,rgba(0,185,255,0.38) 0%,rgba(12,181,213,0.1) 100%);
background: rgba(23, 90, 201, 0.9);
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.27);
height: 90%;
padding: 8px 0;
.itemValue {
font-size: 17px;
color: #f70500;
height: 45%;
margin-bottom: 10px;
font-size: 17px;
color: #f70500;
}
&:nth-child(1) {
.itemContent {
border-left: none;
}
}
&:nth-child(1) {
.itemValue {
color: #f70500;
}
}
&:nth-child(2) {
.itemValue {
color: #ff8000;
}
}
&:nth-child(3) {
.itemValue {
color: #f1f10c;
}
}
&:nth-child(4) {
.itemValue {
color: #06c3ff;
}
}
.itemContent {
border-left: 1px solid rgba(151, 180, 226, 0.5);
display: flex;
width: 100%;
height: 100%;
display: flex;
border-left: 1px solid rgba(151, 180, 226, 0.5);
justify-content: center;
flex-direction: column;
align-items: center;
}
}
}
.alarmLineChart{
width: 100%;
height: 40%;
-webkit-tap-highlight-color: transparent;
user-select: none;
position: absolute;
.alarmLineChart {
height: 20rem;
background: transparent;
background-color: #2965ca;
user-select: none;
-webkit-tap-highlight-color: transparent;
}
.equipmentdata {
height: 180px;
height: 161px;
.equipmentdiv {
width: 100%;
height: 170%;
background-color: rgba(23, 90, 201, 0.9);
border: 1px solid white;
.quarter-div{
width: 50%;
height: 50%;
font-size: 13px;
.quarter-div {
float: left;
width: 50%;
height: 8rem;
background-color: rgba(23, 90, 201, 0.9);
border: 1px solid white;
}
.dh-title {
text-align: left;
padding: 0.2em 0.8em;
font-size: 12px;
text-align: left;
}
.xf-title {
text-align: left;
font-size: 12px;
padding: 0.2em 0.8em;
text-align: left;
}
.dh-content {
width: 100%;
height: calc(100% - 1.8em);
}
.dh-icon{
.dh-icon {
display: inline-block;
width: 30px;
height: 70%;
vertical-align: top;
text-align: center;
padding-top: 6px;
text-align: center;
vertical-align: top;
}
.dh-values{
.dh-values {
display: inline-block;
width: calc(100% - 70px);
height: 100%;
font-size: 11px;
padding-left: 15px;
text-align: left;
.dh-values-item{
.dh-values-item {
display: inline-block;
padding: 4px;
}
}
.xf-values{
text-align: center;
.xf-values {
// text-align: center;
}
.xf-citys{
margin-right: 0.5em;
.xf-citys {
// margin-right: 0.5em;
}
.xf-city-values{
.xf-city-values {
margin-right: 2em;
}
.xf-yc-values{
.xf-yc-values {
margin-right: 2em;
color:red;
color: red;
}
.dh-img{
.dh-img {
width: 25px;
object-fit: contain;
}
......@@ -251,55 +285,65 @@
// }
}
.item {
width: 33.333%;
border-left: 1px solid #fff;
float: left;
width: 33.333%;
height: 100%;
// background:linear-gradient(180deg,rgba(0,185,255,0.38) 0%,rgba(12,181,213,0.1) 100%);
background: rgba(23, 90, 201, 0.9);
border-left: 1px solid #fff;
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.27);
height: 100%;
.chartBox {
height: 60%;
}
.chartDesc {
height: 40%;
display: flex;
height: 40%;
color: #fff;
justify-content: center;
flex-direction: column;
align-items: center;
color: #fff;
span {
line-height: 20px;
}
.itemIcon {
display: inline-block;
height: 20px;
width: 20px;
height: 20px;
vertical-align: top;
}
}
}
}
.rangeData {
height: 47%;
.item {
width: 100%;
height: 50%;
margin-bottom: 1px;
// border-bottom: 1px solid #fff;
// float: left;
// background:linear-gradient(180deg,rgba(0,185,255,0.38) 0%,rgba(12,181,213,0.1) 100%);
background: rgba(23, 90, 201, 0.9);
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.27);
height: 50%;
.chartBox {
height: 85%;
}
.chartDesc {
height: 15%;
min-height: 25px;
text-align: center;
color: #fff;
text-align: center;
span {
line-height: 24px;
}
......@@ -356,46 +400,52 @@
// }
// }
.business {
padding-top: 5px;
height: 44%;
padding-top: 5px;
.chartBody {
// height: 300px;
}
.table-bottom {
// height: 100%;
width: 100%;
// margin-top: 2px;
// padding: 10px 20px;
float: left;
// height: 100%;
width: 100%;
.business-table {
// height: 25%;
//padding: 15px 10px;
padding: 0 10px;
//padding-bottom: 25px;
padding-bottom: 10px;
margin-bottom: 1px;
color: #fff;
text-align: initial;
margin-bottom: 1px;
background: rgba(23, 90, 201, 0.9);
//padding-bottom: 25px;
padding-bottom: 10px;
> div {
@media screen and (min-width: 1280px) and (max-width: 1366px) {
height: 15px;
};
}
@media screen and (min-width: 1367px) and (max-width: 1680px) {
line-height: 30px;
};
}
@media screen and (min-width: 1681px) and (max-width: 1980px) {
line-height: 60px;
height: 50px;
};
line-height: 60px;
}
@media screen and (min-width: 1981px) {
line-height: 70px;
height: 80px;
};
line-height: 70px;
}
text-align: center;
margin-bottom: 2px;
text-align: center;
}
.business-table-header {
......@@ -406,20 +456,20 @@
> table {
width: 100%;
text-align: center;
border-collapse: collapse;
border: 1px solid #42bee1;
border-collapse: collapse;
table-layout: fixed;
> tbody{
> tbody {
> tr {
> td {
border-collapse: collapse;
border: 1px solid #42bee1;
height: 29px;
overflow: hidden;
line-height: 29px;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
border: 1px solid #42bee1;
border-collapse: collapse;
}
}
}
......@@ -441,45 +491,45 @@
.top {
width: 135px;
height: 40px;
font-size: 14;
text-align: center;
background: rgba(255, 255, 255, 1);
border: 1px solid rgba(234, 234, 234, 1);
box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);
opacity: 1;
border-radius: 20px;
text-align: center;
font-size: 14;
opacity: 1;
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16);
.small-card-wrapper {
height: 100%;
text-align: center;
font-size: 14px;
text-align: center;
.small-card-css {
height: 100%;
background: linear-gradient(#dfdfdfff, #ffffffff);
width: 55px;
height: 100%;
height: 28px;
text-align: center;
border-radius: 20px;
padding-top: 3px;
margin-top: 5px;
margin-left: 6px;
color: #1f72f9;
padding-top: 3px;
text-align: center;
cursor: pointer;
background: linear-gradient(#dfdfdfff, #ffff);
border-radius: 20px;
}
.small-card-css-selected {
height: 100%;
background: linear-gradient(#9ee4ffff, #389ec5ff);
width: 55px;
height: 100%;
height: 28px;
text-align: center;
border-radius: 20px;
padding-top: 3px;
margin-top: 5px;
color: white;
margin-left: 6px;
padding-top: 3px;
color: white;
text-align: center;
cursor: pointer;
background: linear-gradient(#9ee4ffff, #389ec5ff);
border-radius: 20px;
}
// .small-card-css {
......@@ -515,61 +565,63 @@
}
.middle {
margin-top: 10px;
width: 100%;
height: 45px;
margin-top: 10px;
//复位样式
.fw-css {
display: inline-block;
width: 40px;
height: 40px;
background: rgba(255, 255, 255, 1);
border: 1px solid rgba(234, 234, 234, 1);
box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);
border-radius: 9px 0px 0px 9px;
text-align: center;
cursor: pointer;
background: rgba(255, 255, 255, 1);
border: 1px solid rgba(234, 234, 234, 1);
border-radius: 9px 0 0 9px;
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16);
}
.bottom {
position: relative;
height: 30px;
width: 120px;
height: 30px;
}
.fw-css-selected {
display: inline-block;
width: 40px;
height: 40px;
background: rgba(52, 95, 166, 1);
border: 1px solid rgba(234, 234, 234, 1);
box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);
border-radius: 9px 0px 0px 9px;
text-align: center;
cursor: pointer;
background: rgba(52, 95, 166, 1);
border: 1px solid rgba(234, 234, 234, 1);
border-radius: 9px 0 0 9px;
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16);
}
.track-css {
display: inline-block;
width: 40px;
height: 40px;
background: rgba(255, 255, 255, 1);
border: 1px solid rgba(234, 234, 234, 1);
box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);
border-radius: 0px 9px 9px 0px;
text-align: center;
cursor: pointer;
background: rgba(255, 255, 255, 1);
border: 1px solid rgba(234, 234, 234, 1);
border-radius: 0 9px 9px 0;
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16);
}
.track-css-selected {
display: inline-block;
width: 40px;
height: 40px;
background: rgba(52, 95, 166, 1);
border: 1px solid rgba(234, 234, 234, 1);
box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);
border-radius: 0px 9px 9px 0px;
text-align: center;
cursor: pointer;
background: rgba(52, 95, 166, 1);
border: 1px solid rgba(234, 234, 234, 1);
border-radius: 0 9px 9px 0;
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16);
}
img {
......@@ -587,9 +639,9 @@
height: 90px;
padding-top: 10px;
padding-left: 10px;
background: white;
border: 1px solid #eaeaea;
border-radius: 5px;
background: white;
.indexMap-bottom-one {
float: left;
......@@ -612,6 +664,7 @@
float: left;
width: 100%;
height: 100%;
font-size: 15px;
.after_line_small {
margin-top: 25px;
......@@ -623,10 +676,12 @@
.line1 {
margin-top: 15px;
}
.line4 {
margin-left: -3px;
margin-top: 15px;
margin-left: -3px;
}
.line6 {
margin-top: 15px;
}
......@@ -640,12 +695,12 @@
//color: white;
color: white;
.xian{
.xian {
width: 100px;
height: 50px;
background-color: #f50000;
.xian-line{
.xian-line {
width: 1px;
height: 50px;
background-color: #f50000;
......@@ -654,13 +709,13 @@
}
}
.xianyang{
.xianyang {
bottom: 70px;
left: -160px;
width: 100px;
height: 22px;
left: -160px;
bottom: 70px;
.xianyang-line{
.xianyang-line {
width: 1px;
height: 130px;
margin-left: 142px;
......@@ -670,25 +725,25 @@
span {
position: absolute;
margin-left: -50px;
margin-top: 2px;
margin-left: -50px;
}
}
}
.after_circle_title {
width: 80px;
background-color: rgba(23,90,201,0.9);
color: white;
margin-top: -45px;
margin-left: -30px;
border-radius: 7px;
color: white;
text-align: center;
background-color: rgba(23, 90, 201, 0.9);
border-radius: 7px;
.pulse-spread-circle{
.pulse-spread-circle {
position: absolute;
right: 17px;
top: -9px;
right: 17px;
width: 40px;
height: 40px;
border: 3px solid red;
......@@ -700,18 +755,18 @@
}
}
.after_circle_title_center{
.after_circle_title_center {
width: 80px;
background-color: rgba(23,90,201,0.9);
color: white;
margin-left: -30px;
border-radius: 7px;
color: white;
text-align: center;
background-color: rgba(23, 90, 201, 0.9);
border-radius: 7px;
.pulse-spread-xian {
position: absolute;
right: 22px;
top: 12px;
right: 22px;
width: 40px;
height: 40px;
border: 3px solid red;
......@@ -724,8 +779,8 @@
.pulse-spread-xianyang {
position: absolute;
left: -12px;
top: 10px;
left: -12px;
width: 40px;
height: 40px;
border: 3px solid red;
......@@ -737,14 +792,14 @@
}
}
.xian{
.xian {
position: absolute;
width: 100px;
height: 22px;
top: -68px;
left: 28px;
width: 100px;
height: 22px;
.xian-line{
.xian-line {
position: absolute;
width: 1px;
height: 90px;
......@@ -755,8 +810,7 @@
span {
position: absolute;
margin-top: 1px;
margin-left: 30px;
margin-left: 22px;
cursor: pointer;
}
......@@ -774,31 +828,31 @@
animation-iteration-count: infinite;
}
.pulse-spread-div{
.pulse-spread-div {
position: absolute;
left: -5px;
top: -3px;
left: -5px;
z-index: 1;
width: 110px;
height: 30px;
cursor: pointer;
border: 3px solid red;
opacity: 0;
border-width: 15px;
opacity: 0;
box-shadow: 1px 1px 30px 8px red;
animation: pulseAnim 1.5s ease-out;
animation-iteration-count: infinite;
z-index: 1;
cursor: pointer;
}
}
.xianyang{
.xianyang {
position: absolute;
width: 100px;
height: 22px;
top: -70px;
left: -135px;
width: 100px;
height: 22px;
.xianyang-line{
.xianyang-line {
position: absolute;
width: 1px;
height: 90px;
......@@ -809,8 +863,7 @@
span {
position: absolute;
margin-top: 1px;
margin-left: 30px;
margin-left: 22px;
cursor: pointer;
}
......@@ -828,31 +881,31 @@
animation-iteration-count: infinite;
}
.pulse-spread-div{
.pulse-spread-div {
position: absolute;
left: -5px;
top: -3px;
left: -5px;
z-index: 1;
width: 110px;
height: 30px;
cursor: pointer;
border: 3px solid red;
opacity: 0;
border-width: 15px;
opacity: 0;
box-shadow: 1px 1px 30px 8px red;
animation: pulseAnim 1.5s ease-out;
animation-iteration-count: infinite;
z-index: 1;
cursor: pointer;
}
}
.xidajie{
.xidajie {
position: absolute;
width: 100px;
height: 22px;
top: -11px;
left: 90px;
width: 100px;
height: 22px;
.xidajie-line{
.xidajie-line {
position: absolute;
width: 1px;
height: 90px;
......@@ -863,35 +916,34 @@
span {
position: absolute;
margin-top: 1px;
margin-left: 16px;
margin-left: 7px;
cursor: pointer;
}
.pulse-spread-div{
.pulse-spread-div {
position: absolute;
left: -5px;
top: -3px;
left: -5px;
z-index: 1;
width: 110px;
height: 30px;
border: 3px solid red;
opacity: 0;
border-width: 15px;
opacity: 0;
box-shadow: 1px 1px 30px 8px red;
animation: pulseAnim 1.5s ease-out;
animation-iteration-count: infinite;
z-index: 1;
}
}
.xian-bank{
.xian-bank {
position: absolute;
top: 95px;
left: 40px;
width: 100px;
height: 22px;
left: 40px;
top: 95px;
.xian-bank-line{
.xian-bank-line {
position: absolute;
width: 1px;
height: 90px;
......@@ -902,36 +954,35 @@
span {
position: absolute;
margin-top: 1px;
margin-left: 30px;
margin-left: 22px;
cursor: pointer;
}
.pulse-spread-div{
.pulse-spread-div {
position: absolute;
left: -5px;
top: -3px;
left: -5px;
z-index: 1;
width: 110px;
height: 30px;
cursor: pointer;
border: 3px solid red;
opacity: 0;
border-width: 15px;
opacity: 0;
box-shadow: 1px 1px 30px 8px red;
animation: pulseAnim 1.5s ease-out;
animation-iteration-count: infinite;
z-index: 1;
cursor: pointer;
}
}
.snxs-bank{
.snxs-bank {
position: absolute;
width: 100px;
height: 22px;
top: 55px;
left: 85px;
width: 100px;
height: 22px;
.snxs-bank-line{
.snxs-bank-line {
position: absolute;
width: 1px;
height: 90px;
......@@ -942,38 +993,37 @@
span {
position: absolute;
margin-left: 30px;
margin-top: 1px;
margin-left: 22px;
cursor: pointer;
}
.pulse-spread-div{
.pulse-spread-div {
position: absolute;
left: -5px;
top: -3px;
left: -5px;
z-index: 1;
width: 110px;
height: 30px;
cursor: pointer;
border: 3px solid red;
opacity: 0;
border-width: 15px;
opacity: 0;
box-shadow: 1px 1px 30px 8px red;
animation: pulseAnim 1.5s ease-out;
animation-iteration-count: infinite;
z-index: 1;
cursor: pointer;
}
}
.jszx-bank{
.jszx-bank {
position: absolute;
width: 100px;
height: 22px;
top: -25px;
left: -175px;
width: 100px;
height: 22px;
// top: 87px;
// left: -135px;
.jszx-bank-line{
.jszx-bank-line {
position: absolute;
width: 1px;
// height: 90px;
......@@ -988,38 +1038,37 @@
span {
position: absolute;
margin-top: 1px;
margin-left: 16px;
margin-left: 7px;
cursor: pointer;
}
.pulse-spread-div{
.pulse-spread-div {
position: absolute;
left: -5px;
top: -3px;
left: -5px;
z-index: 1;
width: 110px;
height: 30px;
cursor: pointer;
border: 3px solid red;
opacity: 0;
border-width: 15px;
opacity: 0;
box-shadow: 1px 1px 30px 8px red;
animation: pulseAnim 1.5s ease-out;
animation-iteration-count: infinite;
z-index: 1;
cursor: pointer;
}
}
.ch-an-bank{
.ch-an-bank {
position: absolute;
width: 100px;
height: 22px;
top: 80px;
left: -150px;
width: 100px;
height: 22px;
// top: 40px;
// left: -175px;
.ch-an-bank-line{
.ch-an-bank-line {
position: absolute;
width: 1px;
// height: 90px;
......@@ -1034,38 +1083,37 @@
span {
position: absolute;
margin-top: 1px;
margin-left: 30px;
margin-left: 22px;
cursor: pointer;
}
.pulse-spread-div{
.pulse-spread-div {
position: absolute;
left: -5px;
top: -3px;
left: -5px;
z-index: 1;
width: 110px;
height: 30px;
cursor: pointer;
border: 3px solid red;
opacity: 0;
border-width: 15px;
opacity: 0;
box-shadow: 1px 1px 30px 8px red;
animation: pulseAnim 1.5s ease-out;
animation-iteration-count: infinite;
z-index: 1;
cursor: pointer;
}
}
.qn-bank{
.qn-bank {
position: absolute;
width: 100px;
height: 22px;
top: 35px;
left: -180px;
width: 100px;
height: 22px;
// top: -17px;
// left: -190px;
.qn-bank-line{
.qn-bank-line {
position: absolute;
width: 1px;
height: 100px;
......@@ -1080,95 +1128,105 @@
span {
position: absolute;
margin-top: 1px;
margin-left: 30px;
margin-left: 22px;
cursor: pointer;
}
.pulse-spread-div{
.pulse-spread-div {
position: absolute;
left: -5px;
top: -3px;
left: -5px;
z-index: 1;
width: 110px;
height: 30px;
cursor: pointer;
border: 3px solid red;
opacity: 0;
border-width: 15px;
opacity: 0;
box-shadow: 1px 1px 30px 8px red;
animation: pulseAnim 1.5s ease-out;
animation-iteration-count: infinite;
z-index: 1;
cursor: pointer;
}
}
.title1 {
position: absolute;
width: 150px;
bottom: 10px;
left: 10px;
width: 150px;
span {
position: absolute;
width: 50px;
margin-left: -80px;
margin-top: 8px;
margin-left: -80px;
}
}
.title2 {
position: absolute;
width: 150px;
bottom: 10px;
left: 10px;
width: 150px;
span {
position: absolute;
width: 50px;
margin-left: -80px;
margin-top: 8px;
margin-left: -80px;
}
}
.title3 {
position: absolute;
width: 150px;
bottom: 10px;
left: 10px;
width: 150px;
span {
position: absolute;
width: 50px;
margin-left: -80px;
margin-top: 8px;
margin-left: -80px;
}
}
.title4 {
position: absolute;
width: 270px;
right: 0;
bottom: 15px;
right: 0px;
width: 270px;
span {
position: absolute;
margin-left: -225px;
margin-top: 8px;
margin-left: -225px;
}
}
.title5 {
position: absolute;
width: 160px;
top: 10px;
right: 7px;
width: 160px;
span {
position: absolute;
margin-left: -120px;
margin-top: 47px;
margin-left: -120px;
}
}
.title6 {
position: absolute;
width: 249px;
bottom: 15px;
left: 13px;
width: 249px;
span {
position: absolute;
margin-left: -93px;
margin-top: 8px;
margin-left: -93px;
}
}
// .xian {
......@@ -1199,24 +1257,27 @@
// }
.title8 {
position: absolute;
width: 300px;
bottom: 10px;
right: -5px;
bottom: 10px;
width: 300px;
span {
position: absolute;
margin-left: -252px;
margin-top: 8px;
margin-left: -252px;
}
}
.title9 {
position: absolute;
width: 160px;
right: 0;
bottom: 15px;
right: 0px;
width: 160px;
span {
position: absolute;
margin-left: -115px;
margin-top: 8px;
margin-left: -115px;
}
}
// .xianyang {
......@@ -1248,36 +1309,36 @@
.pulse-spread-name-xian {
position: absolute;
top: -70px;
//left: 152px;
//top: 62px;
left: 20px;
top: -70px;
z-index: 1;
width: 110px;
height: 30px;
cursor: pointer;
border: 3px solid #5c04fc;
opacity: 0;
border-width: 15px;
opacity: 0;
box-shadow: 1px 1px 30px 8px red;
animation: pulseAnim 1.5s ease-out;
animation-iteration-count: infinite;
z-index: 1;
cursor: pointer;
}
.pulse-spread-name-xianyang {
position: absolute;
right: 75px;
bottom: 72px;
z-index: 1;
width: 110px;
height: 30px;
cursor: pointer;
border: 3px solid #5c04fc;
opacity: 0;
border-width: 15px;
opacity: 0;
box-shadow: 1px 1px 30px 8px red;
animation: pulseAnim 1.5s ease-out;
animation-iteration-count: infinite;
z-index: 1;
cursor: pointer;
}
// .xidajie {
......@@ -1345,22 +1406,24 @@
.amap-logo {
display: none;
}
.amap-controls {
display: none;
}
.amap-copyright {
opacity: 0;
}
}
.body-right {
z-index: 200;
position: absolute;
top: 0;
//right: 47px;
right: 10px;
padding: 5px 0;
z-index: 200;
width: 22%;
padding: 5px 0;
// height: 100%;
> div {
width: 100%;
......@@ -1372,15 +1435,18 @@
vertical-align: middle;
}
}
.patrolMsg {
height: 100%;
}
.point {
// height: 50%;
height: 50%;
font-size: 16px;
.chartBody {
//height: 420px;
height: 359px;
height: 420px;
@media screen and (min-width: 1280px) and (max-width: 1366px) {
height: 300px;
}
......@@ -1391,67 +1457,72 @@
height: 99%;
.left-chart-child {
width: 100%;
float: left;
width: 100%;
height: 50%;
// margin-right: 2px;
// margin-top: 2px;
margin-bottom: 4px;
margin-bottom: 2px;
background: rgba(23, 90, 201, 0.9);
.child-pie {
height: 160px !important;
top: -15px;
height: 160px !important;
}
.child-title {
height: 50px !important;
text-align: center;
color: #fff;
padding: 0px 0px 5px 10px;
padding: 0 0 5px 10px;
margin-top: -15px;
color: #fff;
text-align: center;
cursor: pointer;
}
}
}
}
.technology {
// height: 40%;
padding-top: 6px;
.chartBody {
height: 220px;
.leaderBox {
.leader {
// height: 40px;
// line-height: 40px;
height: 38px;
line-height: 38px;
margin-bottom: 1px;
line-height: 38px;
background: rgba(23, 90, 201, 0.9);
.itemLabel {
display: inline-block;
width: 100px;
text-align: center;
}
.itemValue {
text-align: left;
}
}
.secondLine {
height: 60px;
//line-height: 35px;
margin-bottom: 1px;
background: rgba(23, 90, 201, 0.9);
.itemLabel {
display: inline-block;
float: left;
width: 100px;
overflow: auto;
line-height: 60px;
text-align: center;
float: left;
overflow: auto;
}
.itemList {
height: 60px;
width: calc(100% - 100px);
float: left;
width: calc(100% - 100px);
height: 60px;
//padding: 5px 0;
> div {
height: 30px;
......@@ -1461,30 +1532,35 @@
}
}
}
.table-middle {
height: calc(100% - 4px);
.table-header-row,
.content {
height: 31px;
line-height: 30px;
}
.table-header {
width: 100%;
height: 40%;
// margin-top: 2px;
color: #fff;
text-align: left;
.table-header-row {
margin: 3px 0px 1px 20px;
margin: 3px 0 1px 20px;
}
.table-header-left {
float: left;
width: calc(40% - 2px);
height: 100%;
margin-right: 2px;
float: left;
background: rgba(23, 90, 201, 0.9);
}
.table-header-right {
float: left;
width: 60%;
......@@ -1492,8 +1568,14 @@
background: rgba(23, 90, 201, 0.9);
}
}
.firstPeople {
position: relative;
.duty-title {
font-size: 15px;
}
.leftBtn {
position: absolute;
top: -31px;
......@@ -1502,11 +1584,13 @@
height: 30px !important;
overflow: hidden;
cursor: pointer;
img {
width: 100%;
height: 130% !important;
}
}
.rightBtn {
position: absolute;
top: -31px;
......@@ -1515,6 +1599,7 @@
height: 30px !important;
overflow: hidden;
cursor: pointer;
img {
width: 100%;
height: 130% !important;
......@@ -1524,12 +1609,13 @@
.table-header-split {
height: 30px;
text-align: center;
padding: 3px 10px;
margin-top: 1px;
color: #fff;
text-align: center;
background: rgba(23, 90, 201, 0.9);
margin-top: 1px;
}
.table-body-cotent {
// height: calc(45% + 28px);
// margin-top: 2px;
......@@ -1537,17 +1623,19 @@
.amos-row {
margin-top: 1px;
background: rgba(23, 90, 201, 0.9);
color: rgb(5, 221, 249);
background: rgba(23, 90, 201, 0.9);
// height: 28px;
.amos-col-1 {
height: 100%;
}
.table-page-img {
height: 100%;
background: rgba(28, 125, 213, 0.9);
}
}
.content {
color: #fff;
}
......@@ -1560,39 +1648,48 @@
.tieleBox {
background-color: rgba(0, 66, 174, 0.9);
}
.title {
color: #fff;
height: 28px;
padding-right: 10px;
font-size: 16px;
line-height: 28px;
color: #fff;
// border-bottom: 1px solid #fff;
// margin-bottom: 1px;
background: url('/src/assets/indexChart/title.png') no-repeat center center/100% 100%;
padding-right: 10px;
background: rgba(0, 66, 174, 0.9);
span {
height: 28px;
line-height: 28px;
}
.titleRight {
float: right;
// padding: 3px 10px;
}
.titleLeft {
float: left;
// padding: 3px 10px;
}
.titleIcon {
display: inline-block;
height: 20px;
width: 20px;
height: 20px;
vertical-align: middle;
}
}
.chartBody {
height: 87px;
@media screen and (min-width: 1280px) and (max-width: 1366px) {
height: 40px;
}
@media screen and (min-width: 1680px) and (max-width: 1980px) {
height: 123px;
}
......@@ -1606,46 +1703,33 @@
position: absolute;
top: 140px;
left: 410px;
z-index: 10;
width: 80px;
height: 30px;
z-index: 10;
}
.list09::-webkit-scrollbar {/*滚动条整体样式*/
width: 6px; /*高宽分别对应横竖滚动条的尺寸*/
.list09::-webkit-scrollbar {/* 滚动条整体样式 */
width: 6px; /* 高宽分别对应横竖滚动条的尺寸 */
height: 1px;
}
.list09::-webkit-scrollbar-thumb {/*滚动条里面小方块*/
border-radius: 10px;
-webkit-box-shadow: inset 0 0 0px rgba(0,0,0,0.2);
.list09::-webkit-scrollbar-thumb {/* 滚动条里面小方块 */
background: #535353;
border-radius: 10px;
-webkit-box-shadow: inset 0 0 0 rgba(0, 0, 0, 0.2);
}
.list09::-webkit-scrollbar-track {/*滚动条里面轨道*/
-webkit-box-shadow: inset 0 0 0px rgba(0,0,0,0.2);
.list09::-webkit-scrollbar-track {/* 滚动条里面轨道 */
background: #ededed;
border-radius: 10px;
background: #EDEDED;
-webkit-box-shadow: inset 0 0 0 rgba(0, 0, 0, 0.2);
}
.list09{
.list09 {
height: 630px;
overflow-y: auto;
height:630px ;
}
.patrolDetailContent .contentBox .patrolItem {
......@@ -1653,68 +1737,79 @@
}
.amos-list-split .amos-list-item {
border-bottom: 0px solid #e8e8e8;
border-bottom: 0 solid #e8e8e8;
}
.amos-spin-container{
.amos-spin-container {
height: 630px;
overflow-y: auto;
height:630px ;
}
.amos-list-lg .amos-list-item {
padding-top: 5px;
padding-bottom: 5px;
}
.amos-list-item {
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
padding-top: 5px;
padding-bottom: 5px;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.amos-list-pagination {
margin-top: 15px;
text-align: center;
}
.amos-list-something-after-last-item .amos-list-item:last-child {
border-bottom: 0px solid #e8e8e8;
border-bottom: 0 solid #e8e8e8;
}
.amos-pagination-layout-right {
display: inline-block;
padding-right: 0;
font-family: 'Microsoft YaHei', 'Helvetica', 'Arial', sans-serif;
font-size: 12px;
-webkit-box-sizing: border-box;
box-sizing: border-box;
display: inline-block;
padding-right: 0px;
}
.amos-list-vertical .amos-list-item-content {
display: block;
margin-bottom: 0px;
margin-bottom: 0;
font-size: 12px;
color: black;
}
.patrolDetailContent {
width: 22%;
height: 100%;
position: absolute;
top: 7rem;
//right: calc(22% + 53px);
right: calc(22% + 15px);
padding: 5px 0;
z-index: 200;
width: 22%;
height: 100%;
padding: 5px 0;
.title {
padding-right: 0 !important;
.titleRight {
display: inline-block;
width: 35px;
height: 27px !important;
cursor: pointer;
text-align: center;
font-size: 16px;
text-align: center;
cursor: pointer;
background: linear-gradient(180deg, rgba(253, 53, 17, 1) 0%, rgba(252, 4, 145, 1) 100%);
}
}
.contentBox {
height: 100%;
......@@ -1722,81 +1817,93 @@
// border-bottom: 1px solid #fff;
margin-bottom: 1px;
}
.technology {
}
.patrolItem {
height: 724px;
padding: 15px;
background-color: #175ac9;
.itemTop {
height: calc(45% - 15px);
.itemMsg {
float: left;
width: 50%;
height: 100%;
float: left;
.itemName {
display: inline-block;
height: 30px;
line-height: 30px;
padding: 0 15px;
display: inline-block;
margin: 8px;
font-size: 13px;
background: rgba(0, 66, 174, 0.9);
line-height: 30px;
color: #5ffffd;
margin: 8px;
background: rgba(0, 66, 174, 0.9);
.itemIcon {
display: inline-block;
height: 20px;
width: 20px;
height: 20px;
vertical-align: middle;
}
}
.itemDesc {
font-size: 15px;
}
}
.rightChart {
float: left;
width: 50%;
height: 100%;
float: left;
}
}
.itemMiddle {
height: calc(55% - 15px);
padding: 5px 0;
text-align: center;
img {
max-width: 100%;
max-height: 100%;
}
}
.itemBottom {
height: 30px;
text-align: center;
padding-top: 8px;
text-align: center;
span {
display: inline-block;
height: 15px;
padding: 0 10px;
padding-right: 0;
border-left: 2px solid #92baf4;
margin: 5px;
font-size: 15px;
height: 15px;
line-height: 15px;
margin: 5px;
border-left: 2px solid #92baf4;
&:nth-child(1) {
color: #58f2f4;
border: none;
}
&:nth-child(2) {
color: #ff8000;
}
&:nth-child(3) {
color: #ff0000;
color: #f00;
}
}
}
}
.pagination{
.pagination {
.amos-pagination-paging li a {
color: white;
}
......@@ -1805,52 +1912,47 @@
}
.list3 {
float:left ;
float: left;
width: 33%;
height: 100%;
}
.list5 {
float:left ;
float: left;
width: 33%;
height: 100%;
border-left: 1px solid #fff;
border-right: 1px solid #fff;
border-left: 1px solid #fff;
}
.clearfloat:after{display:block;clear:both;content:"";visibility:hidden;height:0}
.clearfloat{zoom:1}
.clearfloat::after { display: block; height: 0; clear: both; content: ''; visibility: hidden; }
.clearfloat { zoom: 1; }
.list4 {
width: 100%;
height: 35px;
border-bottom: 1px solid #fff;
border-top: 1px solid #fff;
text-align: left;
padding: 0 10px;
text-align: left;
border-top: 1px solid #fff;
border-bottom: 1px solid #fff;
}
.list1 {
width: 99%;
border: 1px solid #fff;
margin-top: 5px;
font-size: 12px;
line-height: 35px;
text-align: center;
color: #fff;
font-size: 12px;
text-align: center;
border: 1px solid #fff;
}
.list2 {
width: 100%;
height: 35px;
}
.AlarmMarquee-top-news {
display: flex;
position: absolute !important;
width: 50%;
height: 52px;
overflow: hidden;
//color: #ff524a;
color: white;
//border: solid;
//border-color: red;
margin-left: 24%;
//background: url('/src/assets/3dview/marquee.png') no-repeat;
//background-size: 100% 100%;
//background-color:#ff524a;
......@@ -1860,30 +1962,39 @@
//background:rgba(0,0,0,1);
//width: calc(100% - 3.6rem);
position: relative;
z-index: 10;
display: flex;
width: 50%;
height: 52px;
//border: solid;
//border-color: red;
margin-left: 24%;
overflow: hidden;
//left: 3.6rem;
letter-spacing: 0.6px;
z-index: 10;
//color: #ff524a;
color: white;
.amosicon-shengyin {
width: 42px;
height: 52px;
text-align: center;
background: rgba(0, 0, 0, 0.1);
//background:rgba(41,152,225,0.2);
background-color: #345fa6;
box-shadow: 0px 0px 16px 4px rgba(77, 170, 224, 0.2);
background: rgba(0, 0, 0, 0.1);
box-shadow: 0 0 16px 4px rgba(77, 170, 224, 0.2);
}
.amosicon-shengyin::before {
display: inline-block;
content: '' !important;
line-height: 47px;
width: 37px;
height: 37px;
margin: 2.5px 0 0 2.5px;
line-height: 47px;
//background: url('/src/assets/3dview/marquee-light.png') no-repeat;
background-size: 100% 100%;
content: '' !important;
}
......@@ -1893,29 +2004,31 @@
margin-left: 24px;
font-size: 0.156rem;
line-height: 32px;
font-size: 10px !important;
}
.tops-news-item:before {
.tops-news-item::before {
//content: '\e600';
}
.news-marquee {
overflow: hidden;
clear: 'both';
cursor: pointer;
//margin-left: 10px;
background: url('/src/assets/3dview/maquee.png') no-repeat;
background-size: 100% 100%;
overflow: hidden;
clear: 'both';
flex: 1;
.tops-news-item {
height: 52px;
font-size: 15px;
line-height: 48px;
span {
font-family: 'microsoft YaHei';
font-weight: bold;
}
}
cursor: pointer;
}
}
......@@ -1926,38 +2039,44 @@
right: 0 !important;
left: inherit !important;
z-index: 200;
.control-pane-biz {
background: rgba(0, 0, 0, 0);
padding: 0;
background: rgba(0, 0, 0, 0);
border-radius: 0;
.control-item {
position: relative;
width: 42px;
height: 42px;
border: none;
background: #1853b6;
margin-bottom: 1px;
background: #1853b6;
border: none;
border-radius: 2px;
position: relative;
&:hover {
background: linear-gradient(180deg, rgba(22, 132, 210, 1) 0%, rgba(13, 126, 227, 1) 100%);
}
.dotTip {
position: absolute;
top: 8px;
right: 8px;
border-radius: 50%;
width: 8px;
height: 8px;
background-color: red;
border-radius: 50%;
}
}
.control-active {
background: linear-gradient(180deg, rgba(22, 132, 210, 1) 0%, rgba(13, 126, 227, 1) 100%) !important;
}
}
.marker-icon-title {
left: inherit !important;
right: 55px !important;
left: inherit !important;
z-index: 300;
}
}
......
src/styles/view/biz/header.scss
View file @ eabed450
......@@ -2,8 +2,8 @@
#app {
.header {
background: $core-color;
z-index: 111;
background: $core-color;
.sys-tools {
display: none;
......@@ -26,31 +26,30 @@
.logo-wrapper {
// display: none;
width: 240px;
font-size: 18px;
padding-left: 15px;
font-size: 18px;
// background: #345fa6;
color: #fff;
.header-logo {
width: 100%;
background: #345fa6;
border: none;
border-right: 1px solid #2d5291;
width: 100%;
}
.logo-text {
display: inline-block;
}
}
.nav-menu-wrapper {
.menu-expanded{
.menu-expanded {
position: relative;
z-index: 90000;
}
.nav-menu-box {
.nav-menu-list {
color: white;
......@@ -65,7 +64,7 @@
}
.nav-menu-item-label {
font-size: 15px;
font-size: 18px;
color: white;
}
......@@ -88,56 +87,68 @@
}
}
}
.header.headerIndex {
background: url('/src/assets/3dview/header.png') no-repeat 100% 100%;
background-size: 100% 100%;
height: 7rem;
// line-height: 7rem;
z-index: 11111;
display: flex;
height: 7rem;
background: url('/src/assets/3dview/header.png') no-repeat 100% 100%;
background-size: 100% 100%;
box-shadow: none;
.header-navs {
width: 38%;
.nav-menu-wrapper {
top: 3rem;
width: 100%;
.nav-menu-item {
width: 24% !important;
border: none !important;
.menusub-wrapper {
width: 100% !important;
}
}
.nav-menu-bg {
display: none;
}
}
}
.leftNavs {
.nav-menu-wrapper {
padding-left: 25.5%;
padding-right: 15%;
padding-left: 25.5%;
.nav-menu-item {
width: 33.3% !important;
}
}
}
.rightNavs {
.nav-menu-wrapper {
padding-left: 15%;
}
}
.projectName {
width: 24%;
height: 7rem;
line-height: 7rem;
text-align: center;
img {
vertical-align: middle;
width: 65%;
vertical-align: middle;
}
}
}
.content-body.indexContent {
top: 0;
height: 100%;
......
src/view/bank/3dview/indexCharts/leftCharts.js
View file @ eabed450
......@@ -336,8 +336,8 @@ class LeftCharts extends Component {
<img src="/src/assets/indexChart/temperature.png" alt='' className="dh-img" />
</div>
<div className="dh-values" >
<div className="dh-values-item">3#温度：{wd3.value === undefined ? '0°C' : wd3.value + '°C'} </div>
<div className="dh-values-item">4#温度：{wd4.value === undefined ? '0°C' : wd4.value + '°C'}</div>
<div className="dh-values-item">3#温度：{wd3.value === undefined ? '0°C' : wd3.value } </div>
<div className="dh-values-item">4#温度：{wd4.value === undefined ? '0°C' : wd4.value }</div>
</div>
</div>
</div>
......@@ -348,8 +348,8 @@ class LeftCharts extends Component {
<img src="/src/assets/indexChart/temperature.png" alt='' className="dh-img" />
</div>
<div className="dh-values" >
<div className="dh-values-item">1#温度：{wd1.value === undefined ? '0°C' : wd1.value + '°C'} </div>
<div className="dh-values-item">2#温度：{wd1.value === undefined ? '0°C' : wd2.value + '°C'} </div>
<div className="dh-values-item">1#温度：{wd1.value === undefined ? '0°C' : wd1.value } </div>
<div className="dh-values-item">2#温度：{wd1.value === undefined ? '0°C' : wd2.value } </div>
</div>
</div>
</div>
......@@ -360,8 +360,8 @@ class LeftCharts extends Component {
<img src="/src/assets/indexChart/temperature.png" alt='' className="dh-img" />
</div>
<div className="dh-values" >
<div className="dh-values-item">1温度：{wd5.value === undefined ? '0°C' : wd5.value + '°C'} </div>
<div className="dh-values-item">5温度：{wd6.value === undefined ? '0°C' : wd6.value + '°C'} </div>
<div className="dh-values-item">1#温度：{wd5.value === undefined ? '0°C' : wd5.value } </div>
<div className="dh-values-item">5#温度：{wd6.value === undefined ? '0°C' : wd6.value } </div>
</div>
</div>
</div>
......
src/view/bank/3dview/indexCharts/rightChartChild/middleTable.js
View file @ eabed450
......@@ -91,13 +91,13 @@ class MiddleTable extends Component {
const { headerData, dataList,arrangeList, arrangeNo } = this.state;
let leader = (headerData.leader && headerData.leader[0]) || {};
let secondTier = headerData.secondTier || [];
let arrange = arrangeList.find(item => item.id === arrangeNo) || {};
let arrange = (arrangeList && arrangeList.find(item => item.id === arrangeNo)) || {};
return (
<div className='table-middle'>
<div className='leaderBox'>
<div className='leader'>
<span className='itemLabel'>带班领导</span>
<span className='itemValue'>{leader.dutyName || ''}&nbsp;{ leader.mobile || ''}</span>
<span className='itemValue'>{leader.dutyName || ''}&nbsp;&nbsp;&nbsp;{ leader.mobile || ''}</span>
</div>
<div className='secondLine'>
<span className='itemLabel'>二线人员</span>
......@@ -134,19 +134,19 @@ class MiddleTable extends Component {
<Row className='table-header-split'>一线人员</Row>
<Row className='table-body-cotent firstPeople'>
<Col className=''>
<Row className='table-header-row title'>
<Row className='table-header-row duty-title'>
<Col className='leftBtn' span={1}><img className='table-page-img' src="/src/assets/3dview/left.png" onClick={ () => this.leftClick() }/></Col>
<Col span={7}>岗位</Col>
<Col span={8}>{arrange.startTime} - {arrange.endTime} </Col>
<Col span={7}>电话</Col>
<Col span={6}>岗位</Col>
<Col span={11}>{arrange.startTime} - {arrange.endTime} </Col>
<Col span={4}>电话</Col>
<Col className='rightBtn' span={1}><img className='table-page-img' src="/src/assets/3dview/right.png" onClick={ () => this.rightClick() }/></Col>
</Row>
{ dataList && dataList.map((d,index) => {
return (
<Row className='table-header-row content' key={index}>
<Col span={8}>{ d.postName }</Col>
<Col span={8}>{ d.dutyName }</Col>
<Col span={8}>{ d.mobile }</Col>
<Col span={6}>{ d.postName }</Col>
<Col span={11}>{ d.dutyName }</Col>
<Col span={4}>{ d.mobile }</Col>
</Row>
)
}) }
......
src/view/bank/3dview/indexCharts/rightChartChild/topChart.js
View file @ eabed450
......@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
import { Connect, Modal } from 'amos-framework';
import * as endConf from 'amos-processor/lib/config/endconf';
import ReactEcharts from 'amos-viz/lib/echarts';
import { rightTopChartAction ,getxuncountAction} from '../../../../../services/3dService';
import { rightTopChartAction, getxuncountAction } from '../../../../../services/3dService';
import SysWsURL, { completeToken } from './../../../../../consts/wsUrlConsts';
import AmosWebSocket from 'amos-websocket';
import moment from 'moment';
......@@ -21,14 +21,14 @@ class TopCharts extends Component {
super(props);
this.state = {
data:{},
data: {},
currentCode: '',
technologyDataname: '',
serviceDataname: '',
technologyData: {},
serviceData: {},
dataList: [],
xun:{}
xun: {}
};
}
......@@ -39,7 +39,7 @@ class TopCharts extends Component {
componentWillReceiveProps = nextProps => {
if (this.props.currentCode !== nextProps.currentCode) {
console.log(nextProps.currentCode,'nextProps.currentCode')
console.log(nextProps.currentCode, 'nextProps.currentCode')
const { currentCode, curCompanyId } = nextProps || {};
this.state.currentCode = currentCode;
this.freshDataList(nextProps.curCompanyId);
......@@ -48,9 +48,8 @@ class TopCharts extends Component {
}
};
//巡检点统计
getxuncount(){
getxuncount() {
getxuncountAction().then(data => {
this.setState({
xun: data
......@@ -58,9 +57,7 @@ class TopCharts extends Component {
});
}
freshDataList(companyId){
freshDataList(companyId) {
rightTopChartAction(companyId).then(data => {
this.setState({
dataList: data
......@@ -68,13 +65,13 @@ class TopCharts extends Component {
});
}
getOptions = (data,title) => {
getOptions = (data, title) => {
let seriesData = [
{ value: data.normal || 0, name:'正常' },
{ value: data.abnormal || 0, name:'异常'},
{ value: data.missedDetection || 0, name:'漏点' },
{ value: data.notIncluded || 0, name:'未计划' },
{ value: data.normal || 0, name: '正常' },
{ value: data.abnormal || 0, name: '异常' },
{ value: data.missedDetection || 0, name: '漏点' },
{ value: data.notIncluded || 0, name: '未计划' },
];
return {
......@@ -85,37 +82,37 @@ class TopCharts extends Component {
legend: {
orient: 'vertical',
x: 'left',
top:'35%',
left:'10%',
top: '35%',
left: '10%',
itemWidth: 15,
itemHeight: 10,
itemGap: 10,
data:['正常','异常','漏点','未计划'],
formatter: function(name) {
let curItem = seriesData.find( e => {
data: ['正常', '异常', '漏点', '未计划'],
formatter: function (name) {
let curItem = seriesData.find(e => {
return e.name === name;
})
var content = name +'：' + curItem.value;
var content = name + '：' + curItem.value;
return content;
},
textStyle: {
color: '#ffffff',//字体颜色
fontSize: 10
fontSize: 14
}
},
color:['#88FF00','#FF9100','#FF0000','#D8D8D8'],
color: ['#88FF00', '#FF9100', '#FF0000', '#D8D8D8'],
series: [
{
name:'检查点',
type:'pie',
center:['70%','60%'],//饼图位置
name: '检查点',
type: 'pie',
center: ['70%', '60%'],//饼图位置
radius: ['50%', '70%'],//外半径，内半径
avoidLabelOverlap: false,
label: {
normal: {
show: true,
position: 'center',
formatter: function(param) {
formatter: function (param) {
let total = 0;
seriesData.forEach(e => {
total += e.value;
......@@ -134,18 +131,18 @@ class TopCharts extends Component {
show: false
}
},
data:seriesData
data: seriesData
}
]
};
}
getOptionsx = (data,title) => {
getOptionsx = (data, title) => {
return {
backgroundColor:'rgba(23,90,201,0.9)',
backgroundColor: 'rgba(23,90,201,0.9)',
tooltip: {
trigger: 'axis',
axisPointer: { // 坐标轴指示器，坐标轴触发有效
......@@ -156,15 +153,16 @@ class TopCharts extends Component {
left: '2%',
right: '4%',
bottom: '14%',
top:'16%',
top: '16%',
containLabel: true
},
legend: {
data: ['未开始', '进行中', '已结束','已超时'],
data: ['未开始', '进行中', '已结束', '已超时'],
right: 10,
top:12,
top: 12,
textStyle: {
color: "#fff"
color: "#fff",
fontSize: 14
},
itemWidth: 12,
itemHeight: 10,
......@@ -172,21 +170,21 @@ class TopCharts extends Component {
},
xAxis: {
type: 'category',
triggerEvent :true,
triggerEvent: true,
data: data.x,
axisLine: {
lineStyle: {
color: 'white'
}
},
axisLabel: {
// interval: 0,
// rotate: 40,
textStyle: {
fontFamily: 'Microsoft YaHei'
fontFamily: 'Microsoft YaHei',
fontSize: 13
}
}
},
},
yAxis: {
......@@ -212,11 +210,11 @@ class TopCharts extends Component {
barWidth: '15%',
itemStyle: {
normal: {
color:'#02E3FC',
barBorderRadius: 11,
},
color: '#02E3FC',
barBorderRadius: 11
}
},
data:data.wks
data: data.wks
},
{
name: '进行中',
......@@ -224,11 +222,11 @@ class TopCharts extends Component {
barWidth: '15%',
itemStyle: {
normal: {
color:'#00FF55',
barBorderRadius: 11,
},
color: '#00FF55',
barBorderRadius: 11
}
},
data:data.yxz
data: data.yxz
},
{
name: '已结束',
......@@ -236,12 +234,11 @@ class TopCharts extends Component {
barWidth: '15%',
itemStyle: {
normal: {
color:'#FF8000',
barBorderRadius: 11,
},
color: '#FF8000',
barBorderRadius: 11
}
},
data:data.yjs
data: data.yjs
},
{
name: '已超时',
......@@ -249,59 +246,43 @@ class TopCharts extends Component {
barWidth: '15%',
itemStyle: {
normal: {
color:'#FF0000',
barBorderRadius: 11,
},
color: '#FF0000',
barBorderRadius: 11
}
},
data:data.ycs
data: data.ycs
}]
};
}
onclick = {
'click': this.clickEchartsPie.bind(this)
}
clickEchartsPie(e) {
}
clickEchartsPie(e) {
const { dataList } = this.state;
let ff={}
let ff = {}
isArray(dataList) && dataList.forEach(e => {
ff = e;
});
if(e.hasOwnProperty("name")){
if(ff[ff[e.name]]>0){
this.props.patrolDetailView(e.name,ff[e.name]);
}else{
if (e.hasOwnProperty("name")) {
if (ff[ff[e.name]] > 0) {
this.props.patrolDetailView(e.name, ff[e.name]);
} else {
message.danger('当前没有巡检计划');
}
}else{
if(ff[ff[e.value]]>0){
this.props.patrolDetailView(e.value,ff[e.value]);
}else{
} else {
if (ff[ff[e.value]] > 0) {
this.props.patrolDetailView(e.value, ff[e.value]);
} else {
message.danger('当前没有巡检计划');
}
}
}
}
handleData = (data = {}) => {
//console.log('topChart ws data:', data);
if (data === 'planTaskRefresh'){
if (data === 'planTaskRefresh') {
this.getxuncount();
this.freshDataList(this.props.curCompanyId);
} else {
......@@ -314,21 +295,16 @@ clickEchartsPie(e) {
const { data, dataList } = this.state;
const wsURL = completeToken(SysWsURL.topChartws);
const planTaskWsURL = completeToken(SysWsURL.planTaskURI);
let { technologyData,xun, serviceData ,technologyDataname,serviceDataname} = this.state;
let { technologyData, xun, serviceData, technologyDataname, serviceDataname } = this.state;
//console.log(dataList,'topchartDataList');
isArray(dataList) && dataList.forEach(e => {
technologyData = e;
});
return (
<div className='left-chart-top'>
<div className='left-chart-child'>
<ReactEcharts option = { this.getOptionsx(technologyData, null) } eventpool={this.onclick}/>
<ReactEcharts option={this.getOptionsx(technologyData, null)} eventpool={this.onclick} />
</div>
<div className='left-chart-child'>
<div className='title'>
......@@ -336,7 +312,7 @@ clickEchartsPie(e) {
<span className='titleIcon' style={{ background: 'url("/src/assets/indexChart/point.png") no-repeat center center/100% 100%' }}></span>
巡检点状态统计</span>
</div>
<ReactEcharts option = { this.getOptions(xun,"") } className='child-pie'/>
<ReactEcharts option={this.getOptions(xun, "")} className='child-pie' />
</div>
<AmosWebSocket ref={node => this.aws = node} url={wsURL} onMessage={this.handleData} reconnect debug />
......
src/view/bank/3dview/indexCharts/rightPane/alarmLineChart.js
View file @ eabed450
......@@ -35,7 +35,8 @@ class AlarmLineChart extends Component {
// itemHeight: 5,
// itemGap: 13,
textStyle: {
color: 'white'
color: 'white',
fontSize: 14
},
data: ['紧急', '重要', '次要','警告']
......@@ -47,7 +48,8 @@ class AlarmLineChart extends Component {
interval: 0,
show: true,
textStyle: {
color: 'white'
color: 'white',
fontSize: 13
}
},
axisLine: {
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment