Skip to content

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

*）修改首页样式

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