监控视频弹窗

guanqb

2022-08-06 2840a97889f8769e49ae2175cafb121cfb2ae511

监控视频弹窗

 public/img/icon/down_menu.png

 public/img/icon/up_menu.png

 src/main.js

@@ -31,6 +31,8 @@

import '@dvgis/dc-sdk/dist/dc.core.min.css'



Vue.prototype.$echarts = echarts

global.DC = DC // 将DC提升到全局变量，方便在工程中直接使用

 src/styles/index.css

@@ -802,199 +802,103 @@
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 1208px;
  width: 648px;
  height: 401px;
  background-color: transparent;
  z-index: 99;
  font-size: 16px;
  box-shadow: inset 0px 0px 30px 1px rgba(33, 186, 196, 0.16);
  box-shadow: inset 0px 3px 20px 1px #5BC3D1;
  opacity: 1;
  border: 1px solid #69E2ED;
  background: rgba(20, 66, 104, 0.8);
  border-radius: 10px;
  margin: 0;
  padding: 0;
}

.public-equirment-station-details .header {
  position: relative;
  border-radius: 8px 8px 0 0;
  width: 100%;
  height: 58px;
  line-height: 58px;
  background: linear-gradient(96deg, #142B4B 0%, #0F1525 100%);
  /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}

.public-equirment-station-details .header .logo {
  position: aboslute;
  top: 0;
  left: 0;
  width: 8px;
  height: 100%;
  background: #69E2ED;
}

.public-equirment-station-details .header .title {
  position: absolute;
  top: 0;
  left: 25px;
  width: 270px;
  height: 24px;
  font-size: 18px;
  font-family: Microsoft YaHei-Bold, Microsoft YaHei;
  font-weight: bold;
  color: #66DDE9;
  color: #58BFCD;
  line-height: 20px;
  margin: 20px auto;
}

.public-equirment-station-details .header .close {
  position: absolute;
  right: 20px;
  top: 0;
  left: auto;
  bottom: 0;
  margin: auto;
  width: 28px;
  height: 28px;
  top: -20px;
  right: -260px;
  cursor: pointer;
  opacity: 0.6;
}

.public-equirment-station-details .content {
  display: flex;
  flex-direction: column;
  clear: both;
  width: 100%;
  height: 600px;
  margin-top: 0px;
  text-align: center;
  overflow: hidden;
  /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
  border-radius: 0 0 8px 8px;
  overflow: scroll;
  height: 330px;
}

.public-equirment-station-details .content .action-bar {
  padding: 0 30px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 74px;
.public-equirment-station-details .content .itemTitle {
  box-sizing: border-box;
  width: 607px;
  height: 70px;
  background: #0D1E34;
  border-radius: 0px 0px 0px 0px;
  opacity: 1;
  margin-left: 17px;
  margin-bottom: 10px;
  padding: 15px 20px;
  border: 1px solid transparent;
}

.public-equirment-station-details .content .action-bar > .search .search-input input {
  color: #fff;
  background: rgba(33, 186, 196, 0.2);
  border-color: #21BAC4;
.public-equirment-station-details .content .itemTitle img {
  float: left;
}

.public-equirment-station-details .content .action-bar .btn-grounp .search {
  color: #fff;
  background: #21BAC4;
  border-color: #21BAC4;
}

.public-equirment-station-details .content .action-bar .btn-grounp .reset {
  color: #fff;
  background: rgba(255, 255, 255, 0.2);
  border-color: rgba(255, 255, 255, 0.2);
}

.public-equirment-station-details .content .table-list {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.public-equirment-station-details .content .table-list .t-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 56px;
  font-size: 18px;
  font-weight: bold;
  color: #fff;
  background: linear-gradient(90deg, rgba(49, 137, 153, 0.5) 0%, rgba(49, 161, 168, 0.5) 44%, rgba(49, 137, 153, 0.5) 100%);
}

.public-equirment-station-details .content .table-list .t-header .sym-style {
  text-align: left;
}

.public-equirment-station-details .content .table-list .t-body {
  flex: 1;
  overflow-y: auto;
}

.public-equirment-station-details .content .table-list .table-list {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  height: 94px;
  border-bottom: 1px solid #E8ECEF;
  color: #fff;
}

.public-equirment-station-details .content .table-list .table-list .sym-style {
  display: flex;
  justify-content: space-between;
}

.public-equirment-station-details .content .table-list .table-list .sym-style .l {
  display: flex;
  align-items: center;
}

.public-equirment-station-details .content .table-list .table-list .sym-style .l img {
  width: 94px;
  height: 56px;
}

.public-equirment-station-details .content .table-list .table-list .sym-style .r {
.public-equirment-station-details .content .itemTitle .type {
  float: left;
  margin-left: 20px;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-around;
}

.public-equirment-station-details .content .table-list .table-list .sym-style .r .title {
  font-size: 18px;
  font-weight: bold;
.public-equirment-station-details .content .itemTitle .type h1 {
  font-size: 16px;
  color: #58BFCD;
  margin-bottom: 4px;
}

.public-equirment-station-details .content .table-list .table-list .sym-style .r .unit {
  font-size: 14px;
.public-equirment-station-details .content .itemTitle .type span {
  font-size: 13px;
  color: #FFFFFF;
  opacity: 0.5;
}

.public-equirment-station-details .content .table-list .table-list:last-child {
  border: none;
.public-equirment-station-details .content .itemTitle .data {
  float: left;
  margin-left: 208px;
  width: 80px;
  height: 34px;
  font-size: 34px;
  font-family: DS-Digital-Italic, DS-Digital;
  font-weight: normal;
  color: #58BFCD;
  line-height: 32px;
}

.public-equirment-station-details .content .table-list .t-header > div:first-child,
.public-equirment-station-details .content .table-list .table-list > div:first-child {
  margin-left: 30px;
  flex: 1;
.public-equirment-station-details .content .itemTitle .openMenuIcon {
  margin-left: 95px;
  margin-top: 4px;
  cursor: pointer;
}

.public-equirment-station-details .content .table-list .t-header > div:nth-child(2),
.public-equirment-station-details .content .table-list .table-list > div:nth-child(2) {
  width: 200px;
}

.public-equirment-station-details .content .table-list .t-header > div:nth-child(3),
.public-equirment-station-details .content .table-list .table-list > div:nth-child(3) {
  width: 240px;
}

.public-equirment-station-details .content .table-list .t-header > div:nth-child(4),
.public-equirment-station-details .content .table-list .table-list > div:nth-child(4) {
  width: 260px;
}

.public-equirment-station-details .content .table-list .t-header > div:nth-child(5),
.public-equirment-station-details .content .table-list .table-list > div:nth-child(5) {
  width: 200px;
}

.public-equirment-station-details .content .table-list .t-header > div:nth-child(5) .look,
.public-equirment-station-details .content .table-list .table-list > div:nth-child(5) .look {
  color: #00F0FF;
  background: rgba(0, 240, 255, 0.2);
  border-color: #00F0FF;
.public-equirment-station-details .content .EchartsBox_div {
  width: 607px;
  height: 210px;
  background: #0D1E34;
  margin-left: 17px;
  margin-top: -11px;
  margin-bottom: 10px;
}

.public-nape-plot-details {

 src/styles/index.min.css

@@ -1 +1 @@
.emit-el-date-picker input{background:#003555;border-color:#849EAE;color:rgba(255,255,255,0.6)}.el-icon-my-sy{background:url("/img/icon/1016.png") center no-repeat}.el-icon-my-sy:before{content:"替";font-size:18px;visibility:hidden}.el-icon-my-sb{background:url("/img/icon/3666.png") center no-repeat}.el-icon-my-sb:before{content:"替";font-size:24px;visibility:hidden}.el-icon-my-nc-menu{background:url("/img/icon/nc-menu.png") center no-repeat}.el-icon-my-nc-menu:before{content:"替";font-size:24px;visibility:hidden}.el-icon-my-jksb-menu{background:url("/img/icon/jksb-menu.png") center no-repeat}.el-icon-my-jksb-menu:before{content:"替";font-size:24px;visibility:hidden}.el-icon-my-jcsb-menu{background:url("/img/icon/jcsb-menu.png") center no-repeat}.el-icon-my-jcsb-menu:before{content:"替";font-size:24px;visibility:hidden}.dialog-fixed{margin:0 !important;position:fixed;top:50%;left:50%;transform:translate(-50%, -50%);z-index:99}.equipment-plot-select .el-input{position:relative;display:flex;align-items:center;justify-content:center}.equipment-plot-select .el-input .el-input__suffix{display:flex;align-items:center;justify-content:center}.equipment-plot-select input{color:#fff;font-size:28px !important;font-weight:bold;background:transparent !important;border:none !important}.manage-select{background-color:#05243e !important}.manage-option{background-color:#05243e !important;color:#a5cacc}.public-org-nav-bar{position:fixed;top:50%;left:50%;transform:translate(-50%, -50%);width:1208px;background-color:transparent;z-index:99;font-size:14px;box-shadow:inset 0px 0px 30px 1px rgba(33,186,196,0.16);border:1px solid #69E2ED;background:rgba(20,66,104,0.8)}.public-org-nav-bar .header{position:relative;border-radius:8px 8px 0 0;width:100%;height:58px;line-height:58px;background:linear-gradient(96deg, #142B4B 0%, #0F1525 100%)}.public-org-nav-bar .header .logo{position:aboslute;top:0;left:0;width:8px;height:100%;background:#69E2ED}.public-org-nav-bar .header .title{position:absolute;top:0;left:25px;font-size:18px;font-weight:bold;color:#66DDE9}.public-org-nav-bar .header .close{position:absolute;right:20px;top:0;left:auto;bottom:0;margin:auto;width:28px;height:28px;cursor:pointer;opacity:0.6}.public-org-nav-bar .content{clear:both;width:100%;height:500px;margin-top:0px;text-align:center;overflow-y:auto;border-radius:0 0 8px 8px}.public-org-nav-bar .content .farm-profiles{position:relative}.public-org-nav-bar .content .farm-profiles .btn-grounp{position:absolute;top:18px;right:20px}.public-org-nav-bar .content .farm-profiles .btn-grounp .details{text-align:right;font-size:18px;color:#08F4FF;cursor:pointer}.public-org-nav-bar .content .farm-profiles .btn-grounp .scene{margin-top:24px;display:flex;align-items:center;justify-content:center;width:100px;height:30px;background:rgba(102,221,233,0.16);border-radius:4px 4px 4px 4px;border:1px solid #66DDE9;box-sizing:border-box}.public-org-nav-bar .content .farm-profiles .btn-grounp .scene img{height:24px}.public-org-nav-bar .content .farm-profiles .farm-content{padding:30px 20px;font-size:16px;color:#fff}.public-org-nav-bar .content .farm-profiles .farm-content .row{margin-top:30px;display:flex;justify-content:space-between}.public-org-nav-bar .content .farm-profiles .farm-content .row .l{display:flex;align-items:flex-start;justify-content:flex-end;width:100px;height:24px;color:#A9D1D7}.public-org-nav-bar .content .farm-profiles .farm-content .row .r{display:flex;align-items:center;justify-content:flex-start;text-align:left;margin-left:24px;flex:1}.public-org-nav-bar .content .farm-profiles .farm-content .row .r img{margin-right:16px;width:102px;height:102px;border-radius:4px 4px 4px 4px}.public-org-nav-bar .content .farm-profiles .farm-content .row:first-child{margin-top:0}.public-org-market-bar{position:fixed;top:50%;left:50%;transform:translate(-50%, -50%);width:1208px;background-color:transparent;z-index:99;font-size:14px;box-shadow:inset 0px 0px 30px 1px rgba(33,186,196,0.16);border:1px solid #69E2ED;background:rgba(20,66,104,0.8)}.public-org-market-bar .header{position:relative;border-radius:8px 8px 0 0;width:100%;height:58px;line-height:58px;background:linear-gradient(96deg, #142B4B 0%, #0F1525 100%)}.public-org-market-bar .header .logo{position:aboslute;top:0;left:0;width:8px;height:100%;background:#69E2ED}.public-org-market-bar .header .title{position:absolute;top:0;left:25px;font-size:18px;font-weight:bold;color:#66DDE9}.public-org-market-bar .header .close{position:absolute;right:20px;top:0;left:auto;bottom:0;margin:auto;width:28px;height:28px;cursor:pointer;opacity:0.6}.public-org-market-bar .content{clear:both;width:100%;height:650px;margin-top:0px;text-align:center;overflow-y:auto;border-radius:0 0 8px 8px}.public-org-market-bar .content .market-title{display:-webkit-box;padding-left:30px;padding-top:30px}.public-org-market-bar .content .market-title .date{padding-left:30px}.public-org-market-bar .content .market-title .query-button{width:47%;text-align:end}.public-org-market-bar .content .market-content{display:-webkit-box;padding-left:30px;padding-top:30px}.public-org-market-bar .content .market-content .market-chart{width:758px;height:520px}.public-org-market-bar .content .market-content .market-list{margin-left:30px;width:31%;height:520px}.public-org-market-bar .content .market-content .market-list .market-list-item{flex:1;display:flex;flex-direction:column}.public-org-market-bar .content .market-content .market-list .market-list-item>div{position:relative;flex:1;padding:15px 20px;display:flex;flex-direction:column;justify-content:space-between;background:rgba(102,221,233,0.1);border-radius:8px;font-size:18px;color:#a9d1d7}.public-org-market-bar .content .market-content .market-list .market-list-item>div>.t-item{display:flex;align-items:center;justify-content:space-between}.public-org-market-bar .content .market-content .market-list .market-list-item>div>.t-item>div:first-child{font-weight:bold;color:#66dde9}.public-org-market-bar .content .market-content .market-list .market-list-item>div>.b-item{display:flex;align-items:center;justify-content:space-between}.public-org-market-bar .content .market-content .market-list .market-list-item>div>.b-item>div:first-child{color:#fff}.public-org-market-bar .content .market-content .market-list .market-list-item>div .t-border{top:0;bottom:auto}.public-org-market-bar .content .market-content .market-list .market-list-item>div .b-border{top:auto;bottom:0}.public-org-market-bar .content .market-content .market-list .market-list-item>div .t-border,.public-org-market-bar .content .market-content .market-list .market-list-item>div .b-border{position:absolute;left:0;right:0;margin:auto;width:80%;height:1px;background:linear-gradient(89deg, rgba(102,221,233,0) 0%, #66dde9 51%, rgba(102,221,233,0) 100%)}.public-org-market-bar .content .market-content .market-list .market-list-item>div:first-child{margin-bottom:15px}.public-trace-table{position:fixed;top:50%;left:50%;transform:translate(-50%, -50%);width:1208px;background-color:transparent;z-index:99;font-size:16px;box-shadow:inset 0px 0px 30px 1px rgba(33,186,196,0.16);border:1px solid #69E2ED;background:rgba(20,66,104,0.8)}.public-trace-table .header{position:relative;border-radius:8px 8px 0 0;width:100%;height:58px;line-height:58px;background:linear-gradient(96deg, #142B4B 0%, #0F1525 100%)}.public-trace-table .header .logo{position:aboslute;top:0;left:0;width:8px;height:100%;background:#69E2ED}.public-trace-table .header .title{position:absolute;top:0;left:25px;font-size:18px;font-weight:bold;color:#66DDE9}.public-trace-table .header .close{position:absolute;right:20px;top:0;left:auto;bottom:0;margin:auto;width:28px;height:28px;cursor:pointer;opacity:0.6}.public-trace-table .content{display:flex;flex-direction:column;clear:both;width:100%;height:600px;margin-top:0px;text-align:center;overflow:hidden;border-radius:0 0 8px 8px}.public-trace-table .content .action-bar{padding:0 30px;display:flex;align-items:center;justify-content:space-between;height:74px}.public-trace-table .content .action-bar>.search .search-input input{color:#fff;background:rgba(33,186,196,0.2);border-color:#21BAC4}.public-trace-table .content .action-bar .btn-grounp .search{color:#fff;background:#21BAC4;border-color:#21BAC4}.public-trace-table .content .action-bar .btn-grounp .reset{color:#fff;background:rgba(255,255,255,0.2);border-color:rgba(255,255,255,0.2)}.public-trace-table .content .table-list{flex:1;display:flex;flex-direction:column}.public-trace-table .content .table-list .t-header{display:flex;align-items:center;justify-content:space-between;height:56px;font-size:18px;font-weight:bold;color:#fff;background:linear-gradient(90deg, rgba(49,137,153,0.5) 0%, rgba(49,161,168,0.5) 44%, rgba(49,137,153,0.5) 100%)}.public-trace-table .content .table-list .t-header .sym-style{text-align:left}.public-trace-table .content .table-list .t-body{flex:1;overflow-y:auto}.public-trace-table .content .table-list .table-list{display:flex;flex-direction:row;align-items:center;justify-content:space-between;height:94px;border-bottom:1px solid #E8ECEF;color:#fff}.public-trace-table .content .table-list .table-list .sym-style{display:flex;justify-content:space-between}.public-trace-table .content .table-list .table-list .sym-style .l{display:flex;align-items:center}.public-trace-table .content .table-list .table-list .sym-style .l img{width:94px;height:56px}.public-trace-table .content .table-list .table-list .sym-style .r{margin-left:20px;flex:1;display:flex;flex-direction:column;align-items:flex-start;justify-content:space-around}.public-trace-table .content .table-list .table-list .sym-style .r .title{font-size:18px;font-weight:bold}.public-trace-table .content .table-list .table-list .sym-style .r .unit{font-size:14px}.public-trace-table .content .table-list .table-list:last-child{border:none}.public-trace-table .content .table-list .t-header>div:first-child,.public-trace-table .content .table-list .table-list>div:first-child{margin-left:30px;flex:1}.public-trace-table .content .table-list .t-header>div:nth-child(2),.public-trace-table .content .table-list .table-list>div:nth-child(2){width:200px}.public-trace-table .content .table-list .t-header>div:nth-child(3),.public-trace-table .content .table-list .table-list>div:nth-child(3){width:240px}.public-trace-table .content .table-list .t-header>div:nth-child(4),.public-trace-table .content .table-list .table-list>div:nth-child(4){width:260px}.public-trace-table .content .table-list .t-header>div:nth-child(5),.public-trace-table .content .table-list .table-list>div:nth-child(5){width:200px}.public-trace-table .content .table-list .t-header>div:nth-child(5) .look,.public-trace-table .content .table-list .table-list>div:nth-child(5) .look{color:#00F0FF;background:rgba(0,240,255,0.2);border-color:#00F0FF}.el-scrollbar{position:relative}.el-scrollbar .el-scrollbar__wrap{overflow-x:hidden}.public-farm-oper-table{position:fixed;top:50%;left:50%;transform:translate(-50%, -50%);width:1208px;background-color:transparent;z-index:99;font-size:16px;box-shadow:inset 0px 0px 30px 1px rgba(33,186,196,0.16);border:1px solid #69E2ED;background:rgba(20,66,104,0.8)}.public-farm-oper-table .header{position:relative;border-radius:8px 8px 0 0;width:100%;height:58px;line-height:58px;background:linear-gradient(96deg, #142B4B 0%, #0F1525 100%)}.public-farm-oper-table .header .logo{position:aboslute;top:0;left:0;width:8px;height:100%;background:#69E2ED}.public-farm-oper-table .header .title{position:absolute;top:0;left:25px;font-size:18px;font-weight:bold;color:#66DDE9}.public-farm-oper-table .header .close{position:absolute;right:20px;top:0;left:auto;bottom:0;margin:auto;width:28px;height:28px;cursor:pointer;opacity:0.6}.public-farm-oper-table .content{display:flex;flex-direction:column;clear:both;width:100%;height:600px;margin-top:0px;text-align:center;overflow:hidden;border-radius:0 0 8px 8px}.public-farm-oper-table .content .action-bar{padding:0 30px;display:flex;align-items:center;justify-content:space-between;height:74px}.public-farm-oper-table .content .action-bar>.search .search-input input{color:#fff;background:rgba(33,186,196,0.2);border-color:#21BAC4}.public-farm-oper-table .content .action-bar>.search .select-type input{color:#fff;background:rgba(33,186,196,0.2);border-color:#21BAC4}.public-farm-oper-table .content .action-bar>.search .select-plot{margin-left:30px}.public-farm-oper-table .content .action-bar>.search .select-plot input{color:#fff;background:rgba(33,186,196,0.2);border-color:#21BAC4}.public-farm-oper-table .content .action-bar .btn-grounp .search{color:#fff;background:#21BAC4;border-color:#21BAC4}.public-farm-oper-table .content .action-bar .btn-grounp .reset{color:#fff;background:rgba(255,255,255,0.2);border-color:rgba(255,255,255,0.2)}.public-farm-oper-table .content .table-list{height:calc(100% - 74px);display:flex;flex-direction:column}.public-farm-oper-table .content .table-list .t-header{display:flex;align-items:center;justify-content:space-between;height:56px;font-size:18px;font-weight:bold;color:#fff;background:linear-gradient(90deg, rgba(49,137,153,0.5) 0%, rgba(49,161,168,0.5) 44%, rgba(49,137,153,0.5) 100%)}.public-farm-oper-table .content .table-list .t-body{height:calc(100% - 56px);overflow-y:auto}.public-farm-oper-table .content .table-list .table-list{display:flex;flex-direction:row;align-items:center;justify-content:space-between;height:65px;border-bottom:1px solid #E8ECEF;color:#fff}.public-farm-oper-table .content .table-list .table-list:last-child{border:none}.public-farm-oper-table .content .table-list .t-header>div:first-child,.public-farm-oper-table .content .table-list .table-list>div:first-child{width:132px}.public-farm-oper-table .content .table-list .t-header>div:nth-child(2),.public-farm-oper-table .content .table-list .table-list>div:nth-child(2){width:124px}.public-farm-oper-table .content .table-list .t-header>div:nth-child(3),.public-farm-oper-table .content .table-list .table-list>div:nth-child(3){width:172px}.public-farm-oper-table .content .table-list .t-header>div:nth-child(4),.public-farm-oper-table .content .table-list .table-list>div:nth-child(4){width:144px}.public-farm-oper-table .content .table-list .t-header>div:nth-child(5),.public-farm-oper-table .content .table-list .table-list>div:nth-child(5){width:132px}.public-farm-oper-table .content .table-list .t-header>div:nth-child(6),.public-farm-oper-table .content .table-list .table-list>div:nth-child(6){flex:1}.public-farm-oper-table .content .table-list .t-header>div:nth-child(7),.public-farm-oper-table .content .table-list .table-list>div:nth-child(7){flex:1}.public-farm-oper-table .content .table-list .t-header>div:nth-child(8),.public-farm-oper-table .content .table-list .table-list>div:nth-child(8){width:120px}.public-equirment-station-details{position:fixed;top:50%;left:50%;transform:translate(-50%, -50%);width:1208px;background-color:transparent;z-index:99;font-size:16px;box-shadow:inset 0px 0px 30px 1px rgba(33,186,196,0.16);border:1px solid #69E2ED;background:rgba(20,66,104,0.8)}.public-equirment-station-details .header{position:relative;border-radius:8px 8px 0 0;width:100%;height:58px;line-height:58px;background:linear-gradient(96deg, #142B4B 0%, #0F1525 100%)}.public-equirment-station-details .header .logo{position:aboslute;top:0;left:0;width:8px;height:100%;background:#69E2ED}.public-equirment-station-details .header .title{position:absolute;top:0;left:25px;font-size:18px;font-weight:bold;color:#66DDE9}.public-equirment-station-details .header .close{position:absolute;right:20px;top:0;left:auto;bottom:0;margin:auto;width:28px;height:28px;cursor:pointer;opacity:0.6}.public-equirment-station-details .content{display:flex;flex-direction:column;clear:both;width:100%;height:600px;margin-top:0px;text-align:center;overflow:hidden;border-radius:0 0 8px 8px}.public-equirment-station-details .content .action-bar{padding:0 30px;display:flex;align-items:center;justify-content:space-between;height:74px}.public-equirment-station-details .content .action-bar>.search .search-input input{color:#fff;background:rgba(33,186,196,0.2);border-color:#21BAC4}.public-equirment-station-details .content .action-bar .btn-grounp .search{color:#fff;background:#21BAC4;border-color:#21BAC4}.public-equirment-station-details .content .action-bar .btn-grounp .reset{color:#fff;background:rgba(255,255,255,0.2);border-color:rgba(255,255,255,0.2)}.public-equirment-station-details .content .table-list{flex:1;display:flex;flex-direction:column}.public-equirment-station-details .content .table-list .t-header{display:flex;align-items:center;justify-content:space-between;height:56px;font-size:18px;font-weight:bold;color:#fff;background:linear-gradient(90deg, rgba(49,137,153,0.5) 0%, rgba(49,161,168,0.5) 44%, rgba(49,137,153,0.5) 100%)}.public-equirment-station-details .content .table-list .t-header .sym-style{text-align:left}.public-equirment-station-details .content .table-list .t-body{flex:1;overflow-y:auto}.public-equirment-station-details .content .table-list .table-list{display:flex;flex-direction:row;align-items:center;justify-content:space-between;height:94px;border-bottom:1px solid #E8ECEF;color:#fff}.public-equirment-station-details .content .table-list .table-list .sym-style{display:flex;justify-content:space-between}.public-equirment-station-details .content .table-list .table-list .sym-style .l{display:flex;align-items:center}.public-equirment-station-details .content .table-list .table-list .sym-style .l img{width:94px;height:56px}.public-equirment-station-details .content .table-list .table-list .sym-style .r{margin-left:20px;flex:1;display:flex;flex-direction:column;align-items:flex-start;justify-content:space-around}.public-equirment-station-details .content .table-list .table-list .sym-style .r .title{font-size:18px;font-weight:bold}.public-equirment-station-details .content .table-list .table-list .sym-style .r .unit{font-size:14px}.public-equirment-station-details .content .table-list .table-list:last-child{border:none}.public-equirment-station-details .content .table-list .t-header>div:first-child,.public-equirment-station-details .content .table-list .table-list>div:first-child{margin-left:30px;flex:1}.public-equirment-station-details .content .table-list .t-header>div:nth-child(2),.public-equirment-station-details .content .table-list .table-list>div:nth-child(2){width:200px}.public-equirment-station-details .content .table-list .t-header>div:nth-child(3),.public-equirment-station-details .content .table-list .table-list>div:nth-child(3){width:240px}.public-equirment-station-details .content .table-list .t-header>div:nth-child(4),.public-equirment-station-details .content .table-list .table-list>div:nth-child(4){width:260px}.public-equirment-station-details .content .table-list .t-header>div:nth-child(5),.public-equirment-station-details .content .table-list .table-list>div:nth-child(5){width:200px}.public-equirment-station-details .content .table-list .t-header>div:nth-child(5) .look,.public-equirment-station-details .content .table-list .table-list>div:nth-child(5) .look{color:#00F0FF;background:rgba(0,240,255,0.2);border-color:#00F0FF}.public-nape-plot-details{position:fixed;top:50%;left:50%;transform:translate(-50%, -50%);width:700px;z-index:99;font-size:16px;box-shadow:inset 0px 3px 20px 1px #5BC3D1;border:1px solid #58BFCD;background:rgba(20,66,104,0.8);border-radius:16px}.public-nape-plot-details .header{display:flex;align-items:center;justify-content:space-around;position:relative;border-radius:8px 8px 0 0;width:100%;height:86px;box-sizing:border-box;border:1px solid #3F7D93}.public-nape-plot-details .header .nav{display:flex;align-items:center;justify-content:center;width:200px;height:50px;color:#fff;background:url(/img/icon/popup-nav-btn.png) no-repeat;background-size:100% 100%;cursor:pointer;font-size:18px}.public-nape-plot-details .header .nav.on{background:url(/img/icon/popup-nav-btn-sel.png) no-repeat;background-size:100% 100%}.public-nape-plot-details .header .close{position:absolute;top:0;right:-30px;transform:translate(100%, 0);cursor:pointer}.public-nape-plot-details .content{display:flex;flex-direction:column;clear:both;width:100%;height:484px;margin-top:0px;text-align:center;overflow:hidden;border-radius:0 0 8px 8px}.public-nape-plot-details .content .box{margin:20px 25px;height:calc(100% - 40px);overflow-y:auto}.public-nape-plot-details .content .box>div{margin-top:20px;padding:0 20px}.public-nape-plot-details .content .box>div:first-child{margin:0}.public-nape-plot-details .content .zypz-box>div{display:flex;align-items:center;height:120px;color:#A9D1D7;background:#0D1E34}.public-nape-plot-details .content .zypz-box>div .logo{width:90px;height:90px;border-radius:50%}.public-nape-plot-details .content .zypz-box>div .titles-box{margin-left:30px;display:flex;align-items:flex-start;flex-direction:column}.public-nape-plot-details .content .zypz-box>div .titles-box .title{font-size:18px;font-weight:bold}.public-nape-plot-details .content .zypz-box>div .titles-box .time{margin-top:15px;font-size:14px}.public-nape-plot-details .content .nscz-box>div{position:relative;height:84px;margin-top:10px;padding:10px 20px;box-sizing:border-box;display:flex;flex-direction:column;justify-content:space-between;background:rgba(102,221,233,0.1);border-radius:8px;font-size:18px;color:#a9d1d7}.public-nape-plot-details .content .nscz-box>div .t-border{position:absolute;top:0;left:0;right:0;bottom:auto;margin:auto;width:80%;height:1px;background:linear-gradient(89deg, rgba(102,221,233,0) 0%, #66dde9 51%, rgba(102,221,233,0) 100%)}.public-nape-plot-details .content .nscz-box>div .t-item{display:flex;align-items:center;justify-content:space-between}.public-nape-plot-details .content .nscz-box>div .t-item>div{flex:1}.public-nape-plot-details .content .nscz-box>div .t-item>div:first-child{text-align:left;font-size:18px;font-weight:bold;color:#66dde9}.public-nape-plot-details .content .nscz-box>div .t-item>div:last-child{text-align:right}.public-nape-plot-details .content .nscz-box>div .b-item{display:flex;align-items:center;justify-content:space-between}.public-nape-plot-details .content .nscz-box>div .b-item>div{flex:1}.public-nape-plot-details .content .nscz-box>div .b-item>div:first-child{text-align:left;color:#fff}.public-nape-plot-details .content .nscz-box>div .b-item>div:last-child{text-align:right}.public-nape-plot-details .content .base-box>div{height:120px;display:flex;flex-direction:column;align-items:center;justify-content:center;background:#0D1E34}.public-nape-plot-details .content .base-box>div .current-val{margin-top:12px;font-size:32px}.public-nape-plot-details .content .base-box .plot-name{color:#62D4E0}.public-nape-plot-details .content .base-box .plot-area{color:#53B5F9}.public-nape-plot-details .content .base-box .plot-type{color:#9270DE}html,body{font-size:16px}html div,html ul,body div,body ul{scrollbar-width:thin}p{margin:0;padding:0}ul{margin:0;padding:0}ul li{margin:0;padding:0;list-style:none}.deblurring{image-rendering:-moz-crisp-edges;image-rendering:-o-crisp-edges;image-rendering:-webkit-optimize-contrast;image-rendering:crisp-edges;-ms-interpolation-mode:nearest-neighbor}::-webkit-scrollbar{width:4px}::-webkit-scrollbar-thumb{border-radius:10px;-webkit-box-shadow:inset 0 0 5px rgba(0,0,0,0.2);background:rgba(0,0,0,0.2)}::-webkit-scrollbar-track{-webkit-box-shadow:inset 0 0 5px rgba(0,0,0,0.2);border-radius:0;background:rgba(0,0,0,0.1)}.div-icon{background:transparent !important}.farm-map-icon{font-weight:bold;color:#fca607;text-align:center}.farm-map-icon img{width:24px}
.emit-el-date-picker input{background:#003555;border-color:#849EAE;color:rgba(255,255,255,0.6)}.el-icon-my-sy{background:url("/img/icon/1016.png") center no-repeat}.el-icon-my-sy:before{content:"替";font-size:18px;visibility:hidden}.el-icon-my-sb{background:url("/img/icon/3666.png") center no-repeat}.el-icon-my-sb:before{content:"替";font-size:24px;visibility:hidden}.el-icon-my-nc-menu{background:url("/img/icon/nc-menu.png") center no-repeat}.el-icon-my-nc-menu:before{content:"替";font-size:24px;visibility:hidden}.el-icon-my-jksb-menu{background:url("/img/icon/jksb-menu.png") center no-repeat}.el-icon-my-jksb-menu:before{content:"替";font-size:24px;visibility:hidden}.el-icon-my-jcsb-menu{background:url("/img/icon/jcsb-menu.png") center no-repeat}.el-icon-my-jcsb-menu:before{content:"替";font-size:24px;visibility:hidden}.dialog-fixed{margin:0 !important;position:fixed;top:50%;left:50%;transform:translate(-50%, -50%);z-index:99}.equipment-plot-select .el-input{position:relative;display:flex;align-items:center;justify-content:center}.equipment-plot-select .el-input .el-input__suffix{display:flex;align-items:center;justify-content:center}.equipment-plot-select input{color:#fff;font-size:28px !important;font-weight:bold;background:transparent !important;border:none !important}.manage-select{background-color:#05243e !important}.manage-option{background-color:#05243e !important;color:#a5cacc}.public-org-nav-bar{position:fixed;top:50%;left:50%;transform:translate(-50%, -50%);width:1208px;background-color:transparent;z-index:99;font-size:14px;box-shadow:inset 0px 0px 30px 1px rgba(33,186,196,0.16);border:1px solid #69E2ED;background:rgba(20,66,104,0.8)}.public-org-nav-bar .header{position:relative;border-radius:8px 8px 0 0;width:100%;height:58px;line-height:58px;background:linear-gradient(96deg, #142B4B 0%, #0F1525 100%)}.public-org-nav-bar .header .logo{position:aboslute;top:0;left:0;width:8px;height:100%;background:#69E2ED}.public-org-nav-bar .header .title{position:absolute;top:0;left:25px;font-size:18px;font-weight:bold;color:#66DDE9}.public-org-nav-bar .header .close{position:absolute;right:20px;top:0;left:auto;bottom:0;margin:auto;width:28px;height:28px;cursor:pointer;opacity:0.6}.public-org-nav-bar .content{clear:both;width:100%;height:500px;margin-top:0px;text-align:center;overflow-y:auto;border-radius:0 0 8px 8px}.public-org-nav-bar .content .farm-profiles{position:relative}.public-org-nav-bar .content .farm-profiles .btn-grounp{position:absolute;top:18px;right:20px}.public-org-nav-bar .content .farm-profiles .btn-grounp .details{text-align:right;font-size:18px;color:#08F4FF;cursor:pointer}.public-org-nav-bar .content .farm-profiles .btn-grounp .scene{margin-top:24px;display:flex;align-items:center;justify-content:center;width:100px;height:30px;background:rgba(102,221,233,0.16);border-radius:4px 4px 4px 4px;border:1px solid #66DDE9;box-sizing:border-box}.public-org-nav-bar .content .farm-profiles .btn-grounp .scene img{height:24px}.public-org-nav-bar .content .farm-profiles .farm-content{padding:30px 20px;font-size:16px;color:#fff}.public-org-nav-bar .content .farm-profiles .farm-content .row{margin-top:30px;display:flex;justify-content:space-between}.public-org-nav-bar .content .farm-profiles .farm-content .row .l{display:flex;align-items:flex-start;justify-content:flex-end;width:100px;height:24px;color:#A9D1D7}.public-org-nav-bar .content .farm-profiles .farm-content .row .r{display:flex;align-items:center;justify-content:flex-start;text-align:left;margin-left:24px;flex:1}.public-org-nav-bar .content .farm-profiles .farm-content .row .r img{margin-right:16px;width:102px;height:102px;border-radius:4px 4px 4px 4px}.public-org-nav-bar .content .farm-profiles .farm-content .row:first-child{margin-top:0}.public-org-market-bar{position:fixed;top:50%;left:50%;transform:translate(-50%, -50%);width:1208px;background-color:transparent;z-index:99;font-size:14px;box-shadow:inset 0px 0px 30px 1px rgba(33,186,196,0.16);border:1px solid #69E2ED;background:rgba(20,66,104,0.8)}.public-org-market-bar .header{position:relative;border-radius:8px 8px 0 0;width:100%;height:58px;line-height:58px;background:linear-gradient(96deg, #142B4B 0%, #0F1525 100%)}.public-org-market-bar .header .logo{position:aboslute;top:0;left:0;width:8px;height:100%;background:#69E2ED}.public-org-market-bar .header .title{position:absolute;top:0;left:25px;font-size:18px;font-weight:bold;color:#66DDE9}.public-org-market-bar .header .close{position:absolute;right:20px;top:0;left:auto;bottom:0;margin:auto;width:28px;height:28px;cursor:pointer;opacity:0.6}.public-org-market-bar .content{clear:both;width:100%;height:650px;margin-top:0px;text-align:center;overflow-y:auto;border-radius:0 0 8px 8px}.public-org-market-bar .content .market-title{display:-webkit-box;padding-left:30px;padding-top:30px}.public-org-market-bar .content .market-title .date{padding-left:30px}.public-org-market-bar .content .market-title .query-button{width:47%;text-align:end}.public-org-market-bar .content .market-content{display:-webkit-box;padding-left:30px;padding-top:30px}.public-org-market-bar .content .market-content .market-chart{width:758px;height:520px}.public-org-market-bar .content .market-content .market-list{margin-left:30px;width:31%;height:520px}.public-org-market-bar .content .market-content .market-list .market-list-item{flex:1;display:flex;flex-direction:column}.public-org-market-bar .content .market-content .market-list .market-list-item>div{position:relative;flex:1;padding:15px 20px;display:flex;flex-direction:column;justify-content:space-between;background:rgba(102,221,233,0.1);border-radius:8px;font-size:18px;color:#a9d1d7}.public-org-market-bar .content .market-content .market-list .market-list-item>div>.t-item{display:flex;align-items:center;justify-content:space-between}.public-org-market-bar .content .market-content .market-list .market-list-item>div>.t-item>div:first-child{font-weight:bold;color:#66dde9}.public-org-market-bar .content .market-content .market-list .market-list-item>div>.b-item{display:flex;align-items:center;justify-content:space-between}.public-org-market-bar .content .market-content .market-list .market-list-item>div>.b-item>div:first-child{color:#fff}.public-org-market-bar .content .market-content .market-list .market-list-item>div .t-border{top:0;bottom:auto}.public-org-market-bar .content .market-content .market-list .market-list-item>div .b-border{top:auto;bottom:0}.public-org-market-bar .content .market-content .market-list .market-list-item>div .t-border,.public-org-market-bar .content .market-content .market-list .market-list-item>div .b-border{position:absolute;left:0;right:0;margin:auto;width:80%;height:1px;background:linear-gradient(89deg, rgba(102,221,233,0) 0%, #66dde9 51%, rgba(102,221,233,0) 100%)}.public-org-market-bar .content .market-content .market-list .market-list-item>div:first-child{margin-bottom:15px}.public-trace-table{position:fixed;top:50%;left:50%;transform:translate(-50%, -50%);width:1208px;background-color:transparent;z-index:99;font-size:16px;box-shadow:inset 0px 0px 30px 1px rgba(33,186,196,0.16);border:1px solid #69E2ED;background:rgba(20,66,104,0.8)}.public-trace-table .header{position:relative;border-radius:8px 8px 0 0;width:100%;height:58px;line-height:58px;background:linear-gradient(96deg, #142B4B 0%, #0F1525 100%)}.public-trace-table .header .logo{position:aboslute;top:0;left:0;width:8px;height:100%;background:#69E2ED}.public-trace-table .header .title{position:absolute;top:0;left:25px;font-size:18px;font-weight:bold;color:#66DDE9}.public-trace-table .header .close{position:absolute;right:20px;top:0;left:auto;bottom:0;margin:auto;width:28px;height:28px;cursor:pointer;opacity:0.6}.public-trace-table .content{display:flex;flex-direction:column;clear:both;width:100%;height:600px;margin-top:0px;text-align:center;overflow:hidden;border-radius:0 0 8px 8px}.public-trace-table .content .action-bar{padding:0 30px;display:flex;align-items:center;justify-content:space-between;height:74px}.public-trace-table .content .action-bar>.search .search-input input{color:#fff;background:rgba(33,186,196,0.2);border-color:#21BAC4}.public-trace-table .content .action-bar .btn-grounp .search{color:#fff;background:#21BAC4;border-color:#21BAC4}.public-trace-table .content .action-bar .btn-grounp .reset{color:#fff;background:rgba(255,255,255,0.2);border-color:rgba(255,255,255,0.2)}.public-trace-table .content .table-list{flex:1;display:flex;flex-direction:column}.public-trace-table .content .table-list .t-header{display:flex;align-items:center;justify-content:space-between;height:56px;font-size:18px;font-weight:bold;color:#fff;background:linear-gradient(90deg, rgba(49,137,153,0.5) 0%, rgba(49,161,168,0.5) 44%, rgba(49,137,153,0.5) 100%)}.public-trace-table .content .table-list .t-header .sym-style{text-align:left}.public-trace-table .content .table-list .t-body{flex:1;overflow-y:auto}.public-trace-table .content .table-list .table-list{display:flex;flex-direction:row;align-items:center;justify-content:space-between;height:94px;border-bottom:1px solid #E8ECEF;color:#fff}.public-trace-table .content .table-list .table-list .sym-style{display:flex;justify-content:space-between}.public-trace-table .content .table-list .table-list .sym-style .l{display:flex;align-items:center}.public-trace-table .content .table-list .table-list .sym-style .l img{width:94px;height:56px}.public-trace-table .content .table-list .table-list .sym-style .r{margin-left:20px;flex:1;display:flex;flex-direction:column;align-items:flex-start;justify-content:space-around}.public-trace-table .content .table-list .table-list .sym-style .r .title{font-size:18px;font-weight:bold}.public-trace-table .content .table-list .table-list .sym-style .r .unit{font-size:14px}.public-trace-table .content .table-list .table-list:last-child{border:none}.public-trace-table .content .table-list .t-header>div:first-child,.public-trace-table .content .table-list .table-list>div:first-child{margin-left:30px;flex:1}.public-trace-table .content .table-list .t-header>div:nth-child(2),.public-trace-table .content .table-list .table-list>div:nth-child(2){width:200px}.public-trace-table .content .table-list .t-header>div:nth-child(3),.public-trace-table .content .table-list .table-list>div:nth-child(3){width:240px}.public-trace-table .content .table-list .t-header>div:nth-child(4),.public-trace-table .content .table-list .table-list>div:nth-child(4){width:260px}.public-trace-table .content .table-list .t-header>div:nth-child(5),.public-trace-table .content .table-list .table-list>div:nth-child(5){width:200px}.public-trace-table .content .table-list .t-header>div:nth-child(5) .look,.public-trace-table .content .table-list .table-list>div:nth-child(5) .look{color:#00F0FF;background:rgba(0,240,255,0.2);border-color:#00F0FF}.el-scrollbar{position:relative}.el-scrollbar .el-scrollbar__wrap{overflow-x:hidden}.public-farm-oper-table{position:fixed;top:50%;left:50%;transform:translate(-50%, -50%);width:1208px;background-color:transparent;z-index:99;font-size:16px;box-shadow:inset 0px 0px 30px 1px rgba(33,186,196,0.16);border:1px solid #69E2ED;background:rgba(20,66,104,0.8)}.public-farm-oper-table .header{position:relative;border-radius:8px 8px 0 0;width:100%;height:58px;line-height:58px;background:linear-gradient(96deg, #142B4B 0%, #0F1525 100%)}.public-farm-oper-table .header .logo{position:aboslute;top:0;left:0;width:8px;height:100%;background:#69E2ED}.public-farm-oper-table .header .title{position:absolute;top:0;left:25px;font-size:18px;font-weight:bold;color:#66DDE9}.public-farm-oper-table .header .close{position:absolute;right:20px;top:0;left:auto;bottom:0;margin:auto;width:28px;height:28px;cursor:pointer;opacity:0.6}.public-farm-oper-table .content{display:flex;flex-direction:column;clear:both;width:100%;height:600px;margin-top:0px;text-align:center;overflow:hidden;border-radius:0 0 8px 8px}.public-farm-oper-table .content .action-bar{padding:0 30px;display:flex;align-items:center;justify-content:space-between;height:74px}.public-farm-oper-table .content .action-bar>.search .search-input input{color:#fff;background:rgba(33,186,196,0.2);border-color:#21BAC4}.public-farm-oper-table .content .action-bar>.search .select-type input{color:#fff;background:rgba(33,186,196,0.2);border-color:#21BAC4}.public-farm-oper-table .content .action-bar>.search .select-plot{margin-left:30px}.public-farm-oper-table .content .action-bar>.search .select-plot input{color:#fff;background:rgba(33,186,196,0.2);border-color:#21BAC4}.public-farm-oper-table .content .action-bar .btn-grounp .search{color:#fff;background:#21BAC4;border-color:#21BAC4}.public-farm-oper-table .content .action-bar .btn-grounp .reset{color:#fff;background:rgba(255,255,255,0.2);border-color:rgba(255,255,255,0.2)}.public-farm-oper-table .content .table-list{height:calc(100% - 74px);display:flex;flex-direction:column}.public-farm-oper-table .content .table-list .t-header{display:flex;align-items:center;justify-content:space-between;height:56px;font-size:18px;font-weight:bold;color:#fff;background:linear-gradient(90deg, rgba(49,137,153,0.5) 0%, rgba(49,161,168,0.5) 44%, rgba(49,137,153,0.5) 100%)}.public-farm-oper-table .content .table-list .t-body{height:calc(100% - 56px);overflow-y:auto}.public-farm-oper-table .content .table-list .table-list{display:flex;flex-direction:row;align-items:center;justify-content:space-between;height:65px;border-bottom:1px solid #E8ECEF;color:#fff}.public-farm-oper-table .content .table-list .table-list:last-child{border:none}.public-farm-oper-table .content .table-list .t-header>div:first-child,.public-farm-oper-table .content .table-list .table-list>div:first-child{width:132px}.public-farm-oper-table .content .table-list .t-header>div:nth-child(2),.public-farm-oper-table .content .table-list .table-list>div:nth-child(2){width:124px}.public-farm-oper-table .content .table-list .t-header>div:nth-child(3),.public-farm-oper-table .content .table-list .table-list>div:nth-child(3){width:172px}.public-farm-oper-table .content .table-list .t-header>div:nth-child(4),.public-farm-oper-table .content .table-list .table-list>div:nth-child(4){width:144px}.public-farm-oper-table .content .table-list .t-header>div:nth-child(5),.public-farm-oper-table .content .table-list .table-list>div:nth-child(5){width:132px}.public-farm-oper-table .content .table-list .t-header>div:nth-child(6),.public-farm-oper-table .content .table-list .table-list>div:nth-child(6){flex:1}.public-farm-oper-table .content .table-list .t-header>div:nth-child(7),.public-farm-oper-table .content .table-list .table-list>div:nth-child(7){flex:1}.public-farm-oper-table .content .table-list .t-header>div:nth-child(8),.public-farm-oper-table .content .table-list .table-list>div:nth-child(8){width:120px}.public-equirment-station-details{position:fixed;top:50%;left:50%;transform:translate(-50%, -50%);width:648px;height:401px;background-color:transparent;z-index:99;font-size:16px;box-shadow:inset 0px 3px 20px 1px #5BC3D1;opacity:1;border:1px solid #69E2ED;background:rgba(20,66,104,0.8);border-radius:10px;margin:0;padding:0}.public-equirment-station-details .header{position:relative;width:270px;height:24px;font-size:18px;font-family:Microsoft YaHei-Bold, Microsoft YaHei;font-weight:bold;color:#58BFCD;line-height:20px;margin:20px auto}.public-equirment-station-details .header .close{position:absolute;top:-20px;right:-260px;cursor:pointer}.public-equirment-station-details .content{overflow:scroll;height:330px}.public-equirment-station-details .content .itemTitle{box-sizing:border-box;width:607px;height:70px;background:#0D1E34;border-radius:0px 0px 0px 0px;opacity:1;margin-left:17px;margin-bottom:10px;padding:15px 20px;border:1px solid transparent}.public-equirment-station-details .content .itemTitle img{float:left}.public-equirment-station-details .content .itemTitle .type{float:left;margin-left:20px}.public-equirment-station-details .content .itemTitle .type h1{font-size:16px;color:#58BFCD;margin-bottom:4px}.public-equirment-station-details .content .itemTitle .type span{font-size:13px;color:#FFFFFF;opacity:0.5}.public-equirment-station-details .content .itemTitle .data{float:left;margin-left:208px;width:80px;height:34px;font-size:34px;font-family:DS-Digital-Italic, DS-Digital;font-weight:normal;color:#58BFCD;line-height:32px}.public-equirment-station-details .content .itemTitle .openMenuIcon{margin-left:95px;margin-top:4px;cursor:pointer}.public-equirment-station-details .content .EchartsBox_div{width:607px;height:210px;background:#0D1E34;margin-left:17px;margin-top:-11px;margin-bottom:10px}.public-nape-plot-details{position:fixed;top:50%;left:50%;transform:translate(-50%, -50%);width:700px;z-index:99;font-size:16px;box-shadow:inset 0px 3px 20px 1px #5BC3D1;border:1px solid #58BFCD;background:rgba(20,66,104,0.8);border-radius:16px}.public-nape-plot-details .header{display:flex;align-items:center;justify-content:space-around;position:relative;border-radius:8px 8px 0 0;width:100%;height:86px;box-sizing:border-box;border:1px solid #3F7D93}.public-nape-plot-details .header .nav{display:flex;align-items:center;justify-content:center;width:200px;height:50px;color:#fff;background:url(/img/icon/popup-nav-btn.png) no-repeat;background-size:100% 100%;cursor:pointer;font-size:18px}.public-nape-plot-details .header .nav.on{background:url(/img/icon/popup-nav-btn-sel.png) no-repeat;background-size:100% 100%}.public-nape-plot-details .header .close{position:absolute;top:0;right:-30px;transform:translate(100%, 0);cursor:pointer}.public-nape-plot-details .content{display:flex;flex-direction:column;clear:both;width:100%;height:484px;margin-top:0px;text-align:center;overflow:hidden;border-radius:0 0 8px 8px}.public-nape-plot-details .content .box{margin:20px 25px;height:calc(100% - 40px);overflow-y:auto}.public-nape-plot-details .content .box>div{margin-top:20px;padding:0 20px}.public-nape-plot-details .content .box>div:first-child{margin:0}.public-nape-plot-details .content .zypz-box>div{display:flex;align-items:center;height:120px;color:#A9D1D7;background:#0D1E34}.public-nape-plot-details .content .zypz-box>div .logo{width:90px;height:90px;border-radius:50%}.public-nape-plot-details .content .zypz-box>div .titles-box{margin-left:30px;display:flex;align-items:flex-start;flex-direction:column}.public-nape-plot-details .content .zypz-box>div .titles-box .title{font-size:18px;font-weight:bold}.public-nape-plot-details .content .zypz-box>div .titles-box .time{margin-top:15px;font-size:14px}.public-nape-plot-details .content .nscz-box>div{position:relative;height:84px;margin-top:10px;padding:10px 20px;box-sizing:border-box;display:flex;flex-direction:column;justify-content:space-between;background:rgba(102,221,233,0.1);border-radius:8px;font-size:18px;color:#a9d1d7}.public-nape-plot-details .content .nscz-box>div .t-border{position:absolute;top:0;left:0;right:0;bottom:auto;margin:auto;width:80%;height:1px;background:linear-gradient(89deg, rgba(102,221,233,0) 0%, #66dde9 51%, rgba(102,221,233,0) 100%)}.public-nape-plot-details .content .nscz-box>div .t-item{display:flex;align-items:center;justify-content:space-between}.public-nape-plot-details .content .nscz-box>div .t-item>div{flex:1}.public-nape-plot-details .content .nscz-box>div .t-item>div:first-child{text-align:left;font-size:18px;font-weight:bold;color:#66dde9}.public-nape-plot-details .content .nscz-box>div .t-item>div:last-child{text-align:right}.public-nape-plot-details .content .nscz-box>div .b-item{display:flex;align-items:center;justify-content:space-between}.public-nape-plot-details .content .nscz-box>div .b-item>div{flex:1}.public-nape-plot-details .content .nscz-box>div .b-item>div:first-child{text-align:left;color:#fff}.public-nape-plot-details .content .nscz-box>div .b-item>div:last-child{text-align:right}.public-nape-plot-details .content .base-box>div{height:120px;display:flex;flex-direction:column;align-items:center;justify-content:center;background:#0D1E34}.public-nape-plot-details .content .base-box>div .current-val{margin-top:12px;font-size:32px}.public-nape-plot-details .content .base-box .plot-name{color:#62D4E0}.public-nape-plot-details .content .base-box .plot-area{color:#53B5F9}.public-nape-plot-details .content .base-box .plot-type{color:#9270DE}html,body{font-size:16px}html div,html ul,body div,body ul{scrollbar-width:thin}p{margin:0;padding:0}ul{margin:0;padding:0}ul li{margin:0;padding:0;list-style:none}.deblurring{image-rendering:-moz-crisp-edges;image-rendering:-o-crisp-edges;image-rendering:-webkit-optimize-contrast;image-rendering:crisp-edges;-ms-interpolation-mode:nearest-neighbor}::-webkit-scrollbar{width:4px}::-webkit-scrollbar-thumb{border-radius:10px;-webkit-box-shadow:inset 0 0 5px rgba(0,0,0,0.2);background:rgba(0,0,0,0.2)}::-webkit-scrollbar-track{-webkit-box-shadow:inset 0 0 5px rgba(0,0,0,0.2);border-radius:0;background:rgba(0,0,0,0.1)}.div-icon{background:transparent !important}.farm-map-icon{font-weight:bold;color:#fca607;text-align:center}.farm-map-icon img{width:24px}

 src/styles/index.scss

@@ -4,6 +4,7 @@
@import "./publicBox/trace-table.scss";
@import "./publicBox/farm-oper-table.scss";
@import "./publicBox/equirment-station-details.scss";
@import "./publicBox/equirment-vid-details.scss";

@import "./publicNapeBox/nape-plot-details.scss";


 src/styles/publicBox/equirment-station-details.css

@@ -29,6 +29,10 @@
  margin: 20px auto;
}

.public-equirment-station-details .header div {
  text-align: center;
}

.public-equirment-station-details .header .close {
  position: absolute;
  top: -20px;
@@ -61,6 +65,7 @@
.public-equirment-station-details .content .itemTitle .type {
  float: left;
  margin-left: 20px;
  width: 150px;
}

.public-equirment-station-details .content .itemTitle .type h1 {
@@ -77,7 +82,7 @@

.public-equirment-station-details .content .itemTitle .data {
  float: left;
  margin-left: 208px;
  margin-left: 158px;
  width: 80px;
  height: 34px;
  font-size: 34px;
@@ -88,15 +93,16 @@
}

.public-equirment-station-details .content .itemTitle .openMenuIcon {
  margin-left: 95px;
  margin-left: 90px;
  margin-top: 4px;
  cursor: pointer;
}

.public-equirment-station-details .content #EchartsBox {
.public-equirment-station-details .content .EchartsBox_div {
  width: 607px;
  height: 210px;
  background: #0D1E34;
  margin-left: 17px;
  margin-top: -11px;
  margin-bottom: 10px;
}

 src/styles/publicBox/equirment-station-details.min.css

@@ -1 +1 @@
.public-equirment-station-details{position:fixed;top:50%;left:50%;transform:translate(-50%, -50%);width:648px;height:401px;background-color:transparent;z-index:99;font-size:16px;box-shadow:inset 0px 3px 20px 1px #5BC3D1;opacity:1;border:1px solid #69E2ED;background:rgba(20,66,104,0.8);border-radius:10px;margin:0;padding:0}.public-equirment-station-details .header{position:relative;width:270px;height:24px;font-size:18px;font-family:Microsoft YaHei-Bold, Microsoft YaHei;font-weight:bold;color:#58BFCD;line-height:20px;margin:20px auto}.public-equirment-station-details .header .close{position:absolute;top:-20px;right:-260px;cursor:pointer}.public-equirment-station-details .content{overflow:scroll;height:330px}.public-equirment-station-details .content .itemTitle{box-sizing:border-box;width:607px;height:70px;background:#0D1E34;border-radius:0px 0px 0px 0px;opacity:1;margin-left:17px;margin-bottom:10px;padding:15px 20px;border:1px solid transparent}.public-equirment-station-details .content .itemTitle img{float:left}.public-equirment-station-details .content .itemTitle .type{float:left;margin-left:20px}.public-equirment-station-details .content .itemTitle .type h1{font-size:16px;color:#58BFCD;margin-bottom:4px}.public-equirment-station-details .content .itemTitle .type span{font-size:13px;color:#FFFFFF;opacity:0.5}.public-equirment-station-details .content .itemTitle .data{float:left;margin-left:208px;width:80px;height:34px;font-size:34px;font-family:DS-Digital-Italic, DS-Digital;font-weight:normal;color:#58BFCD;line-height:32px}.public-equirment-station-details .content .itemTitle .openMenuIcon{margin-left:95px;margin-top:4px;cursor:pointer}.public-equirment-station-details .content #EchartsBox{width:607px;height:210px;background:#0D1E34;margin-left:17px;margin-top:-11px}
.public-equirment-station-details{position:fixed;top:50%;left:50%;transform:translate(-50%, -50%);width:648px;height:401px;background-color:transparent;z-index:99;font-size:16px;box-shadow:inset 0px 3px 20px 1px #5BC3D1;opacity:1;border:1px solid #69E2ED;background:rgba(20,66,104,0.8);border-radius:10px;margin:0;padding:0}.public-equirment-station-details .header{position:relative;width:270px;height:24px;font-size:18px;font-family:Microsoft YaHei-Bold, Microsoft YaHei;font-weight:bold;color:#58BFCD;line-height:20px;margin:20px auto}.public-equirment-station-details .header div{text-align:center}.public-equirment-station-details .header .close{position:absolute;top:-20px;right:-260px;cursor:pointer}.public-equirment-station-details .content{overflow:scroll;height:330px}.public-equirment-station-details .content .itemTitle{box-sizing:border-box;width:607px;height:70px;background:#0D1E34;border-radius:0px 0px 0px 0px;opacity:1;margin-left:17px;margin-bottom:10px;padding:15px 20px;border:1px solid transparent}.public-equirment-station-details .content .itemTitle img{float:left}.public-equirment-station-details .content .itemTitle .type{float:left;margin-left:20px;width:150px}.public-equirment-station-details .content .itemTitle .type h1{font-size:16px;color:#58BFCD;margin-bottom:4px}.public-equirment-station-details .content .itemTitle .type span{font-size:13px;color:#FFFFFF;opacity:0.5}.public-equirment-station-details .content .itemTitle .data{float:left;margin-left:158px;width:80px;height:34px;font-size:34px;font-family:DS-Digital-Italic, DS-Digital;font-weight:normal;color:#58BFCD;line-height:32px}.public-equirment-station-details .content .itemTitle .openMenuIcon{margin-left:90px;margin-top:4px;cursor:pointer}.public-equirment-station-details .content .EchartsBox_div{width:607px;height:210px;background:#0D1E34;margin-left:17px;margin-top:-11px;margin-bottom:10px}

 src/styles/publicBox/equirment-station-details.scss

@@ -1,5 +1,4 @@
.public-equirment-station-details  {
//   .public-trace-table {
    position: fixed;
    top: 50%;
    left: 50%;
@@ -28,6 +27,9 @@
        line-height: 20px;
        margin: 20px auto;

        div {
            text-align: center;
        }
        .close {
            position: absolute;
            top:-20px;
@@ -56,6 +58,7 @@
            .type  {
                float: left;
                margin-left: 20px;
                width: 150px;
              h1{
                  font-size: 16px;
                  color: #58BFCD ;
@@ -69,7 +72,7 @@
            }
            .data {
                float: left;
                margin-left: 208px;
                margin-left: 158px;
                width: 80px;
                height: 34px;
                font-size: 34px;
@@ -79,17 +82,18 @@
                line-height: 32px;
            }
            .openMenuIcon {
                margin-left: 95px;
                margin-left: 90px;
                margin-top: 4px;
                cursor: pointer;
            }
        }
        #EchartsBox {
        .EchartsBox_div {
            width: 607px;
            height: 210px;
            background: #0D1E34;
            margin-left: 17px;
            margin-top: -11px;
            margin-bottom: 10px;
        }
    }
   

 src/styles/publicBox/equirment-vid-details.css

New file
@@ -0,0 +1,46 @@
.public-equirment-vid-details {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 648px;
  height: 401px;
  background-color: transparent;
  z-index: 99;
  font-size: 16px;
  box-shadow: inset 0px 3px 20px 1px #5BC3D1;
  opacity: 1;
  border: 1px solid #69E2ED;
  background: rgba(20, 66, 104, 0.8);
  border-radius: 10px;
  margin: 0;
  padding: 0;
}

.public-equirment-vid-details .header {
  position: relative;
  width: 270px;
  height: 24px;
  font-size: 18px;
  font-family: Microsoft YaHei-Bold, Microsoft YaHei;
  font-weight: bold;
  color: #58BFCD;
  line-height: 20px;
  margin: 20px auto;
}

.public-equirment-vid-details .header div {
  text-align: center;
}

.public-equirment-vid-details .header .close {
  position: absolute;
  top: -20px;
  right: -260px;
  cursor: pointer;
}

.public-equirment-vid-details .content .video {
  height: 310px;
  margin: 0 40px;
}

 src/styles/publicBox/equirment-vid-details.min.css

New file
@@ -0,0 +1 @@
.public-equirment-vid-details{position:fixed;top:50%;left:50%;transform:translate(-50%, -50%);width:648px;height:401px;background-color:transparent;z-index:99;font-size:16px;box-shadow:inset 0px 3px 20px 1px #5BC3D1;opacity:1;border:1px solid #69E2ED;background:rgba(20,66,104,0.8);border-radius:10px;margin:0;padding:0}.public-equirment-vid-details .header{position:relative;width:270px;height:24px;font-size:18px;font-family:Microsoft YaHei-Bold, Microsoft YaHei;font-weight:bold;color:#58BFCD;line-height:20px;margin:20px auto}.public-equirment-vid-details .header div{text-align:center}.public-equirment-vid-details .header .close{position:absolute;top:-20px;right:-260px;cursor:pointer}.public-equirment-vid-details .content .video{height:310px;margin:0 40px}

 src/styles/publicBox/equirment-vid-details.scss

New file
@@ -0,0 +1,49 @@
.public-equirment-vid-details  {
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 648px;
        height: 401px;
        background-color: transparent;
        z-index: 99;
        font-size: 16px;
        box-shadow: inset 0px 3px 20px 1px #5BC3D1;
        opacity: 1;
        border: 1px solid #69E2ED;
        background: rgba(20, 66, 104, 0.8);
        border-radius: 10px;
        margin: 0;
        padding: 0;
    
        .header {
            position: relative;
            width: 270px;
            height: 24px;
            font-size: 18px;
            font-family: Microsoft YaHei-Bold, Microsoft YaHei;
            font-weight: bold;
            color: #58BFCD;
            line-height: 20px;
            margin: 20px auto;

            div {
                text-align: center;
            }
            .close {
                position: absolute;
                top:-20px;
                right:-260px;
                cursor: pointer;
            }
    
        }
        .content {
           .video {
            height: 310px;
            margin: 0 40px;
           }
        }
       
       
    }

 src/views/equipment/index.vue

@@ -114,7 +114,9 @@
                                        <span class="old-btn" @click="historyData(item)">历史数据</span>
                                    </div>

                                    <div class="r">{{tmpTDiff(item.valueDataList[item.valueDataList.length-1].startTime)}}天前更新</div>
                                    <div
                                        class="r"
                                    >{{tmpTDiff(item.valueDataList[item.valueDataList.length-1].startTime)}}天前更新</div>
                                </div>
                            </div>
                            <div v-for="(item, index) in stationData.airList" :key="index">
@@ -137,7 +139,9 @@
                                        <span class="old-btn" @click="historyData(item)">历史数据</span>
                                    </div>

                                    <div class="r">{{tmpTDiff(item.valueDataList[item.valueDataList.length-1].startTime)}}天前更新</div>
                                    <div
                                        class="r"
                                    >{{tmpTDiff(item.valueDataList[item.valueDataList.length-1].startTime)}}天前更新</div>
                                </div>
                            </div>
                            <div v-for="(item, index) in stationData.waterList" :key="index">

 src/views/farm/index.vue

@@ -143,6 +143,13 @@
            </div>

            <div v-show="zydksb =='sb'" class="lists-box sb">
                <div class="lists-item" @click="goToJkDetail">
                    <div class="title">
                        <img src="/img/icon/jk.png" alt />
                        监控监控监控监控监控监控
                    </div>
                    <div class="type off">在线</div>
                </div>
                <div
                    v-for="(item, index) in equipmentList"
                    :key="index"
@@ -305,14 +312,10 @@
            </template>
        </public-nape-box>

        <el-dialog
            title="溯源码"
            custom-class="dialog-fixed"
            :visible.sync="dialogVisible"
            :before-close="handleClose"
        >
        <el-dialog title="溯源码" custom-class="dialog-fixed" :visible.sync="dialogVisible">
            <img style="width: 500px;" :src="currentUrl" alt />
        </el-dialog>

        <public-box
            v-show="staionDetail"
            :closeFlag="'staionDetail'"
@@ -331,75 +334,76 @@
                    <div class="itemTitle">
                        <img src="../../../public/img/icon/icon_3788.png" alt />
                        <div class="type">
                            <h1>太阳能板电压</h1>
                            <h1>太阳能板电压1111</h1>
                            <span>单位：V</span>
                        </div>
                        <div class="data">21.03</div>
                        <img
                            src="../../../public/img/icon/open_menu.png"
                            src="../../../public/img/icon/up_menu.png"
                            class="openMenuIcon"
                            @click="showEchart"
                            @click="showEchart(1)"
                            v-if="echartIsShow && jcIndex == 1"
                            alt
                        />
                        <img
                            src="../../../public/img/icon/down_menu.png"
                            class="openMenuIcon"
                            @click="showEchart(1)"
                            v-else
                            alt
                        />
                    </div>
                    <div class="echart">
                        <div id="EchartsBox"></div>
                    <div class="echart" v-show="echartIsShow && jcIndex == 1">
                        <div id="EchartsBox1" class="EchartsBox_div"></div>
                    </div>
                </div>
                <!-- <div class="item">
                    <img src="../../../public/img/icon/icon_3788.png" alt />
                    <div class="type">
                        <h1>太阳能板电压</h1>
                        <span>单位：V</span>
                    </div>
                    <div class="data">21.03</div>
                    <img src="../../../public/img/icon/open_menu.png" class="openMenuIcon" alt />
                </div>
                <div class="item">
                    <div class="itemTitle">
                    <img src="../../../public/img/icon/icon_3788.png" alt />
                    <div class="type">
                        <h1>太阳能板电压</h1>
                            <h1>太阳能板电压22222</h1>
                        <span>单位：V</span>
                    </div>
                    <div class="data">21.03</div>
                    <img src="../../../public/img/icon/open_menu.png" class="openMenuIcon" alt />
                        <img
                            src="../../../public/img/icon/up_menu.png"
                            class="openMenuIcon"
                            @click="showEchart(2)"
                            v-if="echartIsShow && jcIndex == 2"
                            alt
                        />
                        <img
                            src="../../../public/img/icon/down_menu.png"
                            class="openMenuIcon"
                            @click="showEchart(2)"
                            v-else
                            alt
                        />
                </div>
                <div class="item">
                    <img src="../../../public/img/icon/icon_3788.png" alt />
                    <div class="type">
                        <h1>太阳能板电压</h1>
                        <span>单位：V</span>
                    <div class="echart" v-show="echartIsShow && jcIndex == 2">
                        <div id="EchartsBox2" class="EchartsBox_div"></div>
                    </div>
                    <div class="data">21.03</div>
                    <img src="../../../public/img/icon/open_menu.png" class="openMenuIcon" alt />
                </div>
                <div class="item">
                    <img src="../../../public/img/icon/icon_3788.png" alt />
                    <div class="type">
                        <h1>太阳能板电压</h1>
                        <span>单位：V</span>
            </template>
        </public-box>

        <public-box
            v-show="JkDetail"
            :closeFlag="'JkDetail'"
            :className="'public-equirment-vid-details'"
        >
            <template slot="public-box-header">
                <div>4号大鹏摄像头</div>
                <img
                    @click="JkDetail = false"
                    src="../../../public/img/icon/close.png"
                    class="close"
                />
            </template>
            <template slot="public-box-content">
                <div class="video">
                    <video id="videoElement" autoplay muted width="100%" height="100%"></video>
                    </div>
                    <div class="data">21.03</div>
                    <img src="../../../public/img/icon/open_menu.png" class="openMenuIcon" alt />
                </div>
                <div class="item">
                    <img src="../../../public/img/icon/icon_3788.png" alt />
                    <div class="type">
                        <h1>太阳能板电压</h1>
                        <span>单位：V</span>
                    </div>
                    <div class="data">21.03</div>
                    <img src="../../../public/img/icon/open_menu.png" class="openMenuIcon" alt />
                </div>
                <div class="item">
                    <img src="../../../public/img/icon/icon_3788.png" alt />
                    <div class="type">
                        <h1>太阳能板电压</h1>
                        <span>单位：V</span>
                    </div>
                    <div class="data">21.03</div>
                    <img src="../../../public/img/icon/open_menu.png" class="openMenuIcon" alt />
                </div>-->
            </template>
        </public-box>
    </div>
@@ -408,6 +412,7 @@
<script>

import { getSourceList } from '@/api/farm/source'
import flvjs from 'flv.js'
import {
    getLandList,
    getFarmingRecordList,
@@ -442,7 +447,13 @@
            // 物联网设备
            equipmentList: {},
            // 监测设备详情
            staionDetail: false
            staionDetail: false,
            // 监控设备详情
            JkDetail: false,
            // 监测设备echart展示
            echartIsShow: false,
            // 监测列表index
            jcIndex: 0
        }
    },
    created () {
@@ -583,9 +594,16 @@
                }
            })
        },
        //跳转设备详情窗口
        //跳转 监测 设备详情窗口
        goToDetail () {
            this.staionDetail = true
        },
        //跳转 监控 设备详情窗口
        goToJkDetail () {
            this.JkDetail = true
            this.$nextTick(() => {
                this.playFlvVideo()
            })
        },
        // echart
        initLine (dom, yName, x, y) {
@@ -707,8 +725,36 @@
            option && myChart.setOption(option)
        },
        //点击展示监测设备echart图
        showEchart () {
            this.initLine('EchartsBox', '单位', ['1', '2', '3', '4'], ['10.9', '11', '6.8', '100'])
        showEchart (index) {
            if (this.jcIndex == index) {
                this.echartIsShow = !this.echartIsShow
            } else {
                this.jcIndex = index
                this.echartIsShow = true
            }


            console.log('index:', 'EchartsBox' + index)
            this.initLine('EchartsBox' + index, '单位', ['1', '2', '3', '4'], ['10.9', '11', '6.8', '100'])
        },
        // flv视频播放
        playFlvVideo () {
            if (flvjs.isSupported()) {
                var videoElement = document.getElementById('videoElement')
                var flvPlayer = flvjs.createPlayer({
                    type: 'flv',
                    isLive: true,
                    hasAudio: false,
                    stashInitialSize: 128,
                    url: 'wss://www.ainfo.top:700/rtp/34020000001110000105_34020000001310000002.flv'
                }, {
                    enableStashBuffer: false,
                    fixAudioTimestampGap: false
                })
                flvPlayer.attachMediaElement(videoElement)
                flvPlayer.load()
                flvPlayer.play()
            }
        }
    }
}