123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221 |
- <template>
- <div class='an-content'>
- <div class='snapshotss-center2'>
- <div class='snapshotss-cont2-box1 MicrYaHei'>
- <span>数据传输情况</span>
- <span :class='data.energyErrorFlag!=1?"span1":"span2"'>
- 能耗
- <img v-if='data.energyErrorFlag!=1' src='../../assets/finish.png' alt />
- <img v-else src='../../assets/wrong.png' alt />
- </span>
- <span :class='data.environmentErrorFlag!=1?"span1":"span2"'>
- 环境
- <img v-if='data.environmentErrorFlag!=1' src='../../assets/finish.png' alt />
- <img v-else src='../../assets/wrong.png' alt />
- </span>
- <span :class='data.baErrorFalg!=1?"span1":"span2"'>
- BA
- <img v-if='data.baErrorFalg!=1' src='../../assets/finish.png' alt />
- <img v-else src='../../assets/wrong.png' alt />
- </span>
- </div>
- <div class='snapshotss-cont2-box2 MicrYaHei'>
- <span>实际冷量</span>
- <span>
- <font
- :class='parseInt(data.nowPlantLoad)=="-9999"?"red":""'
- >{{(data.nowPlantLoad==undefined)?'--':(parseInt(data.nowPlantLoad)=='-9999'?'x':(parseInt(data.nowPlantLoad)=='-9998'?'--':parseInt(data.nowPlantLoad)))}}</font>
- <font style='font-size:12px;'>kW</font>
- </span>
- <span>未来1小时预测冷量</span>
- <span>
- <font
- :class='parseInt(data.predictedLoad1h)=="-9999"?"red":""'
- >{{(data.predictedLoad1h==undefined)?'--':(parseInt(data.predictedLoad1h)=='-9999'?'x':(parseInt(data.predictedLoad1h)=='-9998'?'--':parseInt(data.predictedLoad1h)))}}</font>
- <font style='font-size:12px;'>kW</font>
- </span>
- </div>
- </div>
- <div class='an-bottom'>
- <strategy-line :chillerList='chillerHourList' v-if='chillerHourList.length>=0'></strategy-line>
- </div>
- <div class='side-r' :class='chillerCommandQ.hasOwnProperty("isExecuted")?(chillerCommandQ.isExecuted?"green-bg":"red-bg"):"blue-bg"'>
- <div v-if='!showDraw' class='float-r' @click='showDraw = true'>
- <div
- class='float-line'
- :class='chillerCommandQ.hasOwnProperty("isExecuted")?(chillerCommandQ.isExecuted?"green-bg":"red-bg"):"blue-bg"'
- ></div>
- <img src='../../assets/open.png' alt />
- <p>当前策略</p>
- </div>
- </div>
- <bom-box v-if='Object.keys(chillerCommandQ).length>0' :class='["draw", {"open": showDraw}]' :data='chillerCommandQ' @close='showDraw = false'></bom-box>
- </div>
- </template>
- <script>
- import echarts from 'echarts'
- import bomBox from './bomBox'
- import strategyLine from '@/components/strategyLine'
- export default {
- data() {
- return {
- showDraw: false,
- dataX: [],
- dataY1: [],
- dataY2: [],
- dataY3: [],
- loadX: [],
- loadY1: [],
- loadY2: [],
- loadY3: [],
- dataY1Min: '',
- dataY1Max: ''
- }
- },
- components: { bomBox, strategyLine },
- methods:{
- isShowDraw(){
- if((Object.keys(this.chillerCommandQ).length>0 && this.chillerCommandQ.isNew) || (Object.keys(this.chillerCommandQ).length>0 && !this.chillerCommandQ.isExecuted)){
- this.showDraw = true
- }else{
- this.showDraw = false
- }
- }
- },
- props: ['data', 'chillerHourList', 'chillerCommandQ']
- }
- </script>
- <style lang='scss' scoped>
- .an-content {
- .snapshotss-center2 {
- padding: 20px 0;
- margin-bottom: 20px;
- display: flex;
- align-items: center;
- overflow: hidden;
- .snapshotss-cont2-box1,
- .snapshotss-cont2-box2 {
- flex: 1;
- height: 80px;
- background: url('../../assets/copy.png');
- background-size: 100% 100%;
- display: flex;
- align-items: center;
- padding-left: 24px;
- }
- .snapshotss-cont2-box1 {
- margin-right: 12px;
- span:nth-of-type(1) {
- height: 22px;
- font-size: 14px;
- color: rgba(100, 108, 115, 1);
- line-height: 19px;
- margin-right: 20px;
- }
- span:not(:first-child) {
- height: 28px;
- background: rgba(255, 255, 255, 1);
- border-radius: 16px;
- font-size: 14px;
- color: rgba(31, 36, 41, 1);
- display: flex;
- justify-content: space-between;
- align-items: center;
- padding: 0 6px 0 12px;
- margin-right: 20px;
- img {
- width: 20px;
- height: 20px;
- margin-left: 8px;
- }
- }
- .span1 {
- border: 1px solid rgba(52, 199, 36, 1);
- }
- .span2 {
- border: 1px solid rgba(245, 78, 69, 1);
- }
- }
- .snapshotss-cont2-box2 {
- span:nth-of-type(1),
- span:nth-of-type(3) {
- height: 22px;
- font-size: 14px;
- color: rgba(100, 108, 115, 1);
- line-height: 19px;
- margin-right: 16px;
- }
- span:nth-of-type(2),
- span:nth-of-type(4) {
- height: 32px;
- font-size: 24px;
- font-family: Persagy;
- color: rgba(31, 36, 41, 1);
- line-height: 29px;
- margin-right: 64px;
- }
- span:nth-of-type(3) {
- margin-right: 16px;
- }
- }
- }
- .side-r {
- position: fixed;
- right: 0;
- top: 50%;
- transform: translateY(-50%);
- box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.1);
- display: flex;
- width: 8px;
- border-radius: 8px 0 0 8px;
- cursor: pointer;
- height: 357px;
- .float-r {
- width: 8px;
- display: flex;
- align-items: center;
- border-radius: 8px 0 0 8px;
- cursor: pointer;
- .float-line {
- width: 8px;
- height: 357px;
- border-radius: 8px 0 0 8px;
- }
- img {
- height: 10px;
- margin: 0 10px;
- }
- p {
- width: 0;
- }
- }
- }
- .side-r:hover {
- width: 68px;
- background: #fff;
- }
- .side-r:hover .float-r {
- width: 68px;
- }
- .draw {
- position: fixed;
- left: 100%;
- top: 50%;
- transform: translateY(-50%);
- box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.1);
- background: #ffffff;
- transition: transform 0.3s ease-in-out;
- &.open {
- transform: translate(-100%, -50%);
- }
- }
- .an-bottom {
- margin-top: 45px;
- display: flex;
- }
- }
- </style>
|