123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269 |
- <template>
- <div class='bomb'>
- <div class='bomb-line' :class='data.hasOwnProperty("isExecuted")?(data.isExecuted?"green":"red"):"gray"'></div>
- <div class='close' @click='$emit("close")'>
- <img src='../../assets/close.png' alt />
- </div>
- <div class='bomb-left'>
- <div class='bomb-left1'>当前策略</div>
- <div class='bomb-left2'>
- 应执行时间
- <span v-if='data.onTime'>{{data.onTime?data.onTime.slice(0,2)+":"+data.onTime.slice(2,4):"--"}}</span>
- <span v-else-if='data.offTime'>{{data.offTime?data.offTime.slice(0,2)+":"+data.offTime.slice(2,4):"--"}}</span>
- <span v-else>{{data.executeTime?data.executeTime.slice(8,10)+":"+data.executeTime.slice(10,12):"--"}}</span>
- </div>
- <div class='bomb-left3'>策略可靠度</div>
- <div id='circleEcharts' style='width:170px;height:204px'></div>
- </div>
- <div class='bomb-right'>
- <water-unit :data='data' :type='2'></water-unit>
- <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"?"reds":""'
- >{{(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"?"reds":""'
- >{{(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='bomb-right-bottom'>
- <el-input placeholder='你可以在此处填写备注信息' v-model='remarks' @blur='saveRemarks'></el-input>
- </div>
- </div>
- </div>
- </template>
- <script>
- import echarts from 'echarts'
- import waterUnit from './waterUnit'
- import { updateCommand } from '@/api/strategy/strategy.js'
- import { timestamp2String } from '@/utils/helper.js'
- export default {
- data() {
- return {
- timestamp2String,
- circle1: 0,
- circle2: 0,
- remarks: ''
- }
- },
- props: ['data'],
- components: { waterUnit },
- methods: {
- saveRemarks() {
- let postParams = {
- id: this.data.id,
- remarks: this.remarks
- }
- updateCommand({ postParams }).then(res => {
- if (res.result == 'success') {
- this.$message.success('添加备注成功!')
- }
- })
- },
- getData() {
- this.circle1 = this.data.strategyReliability ? this.data.strategyReliability.toFixed(2) : 0
- this.circle2 = 100 - this.circle1
- this.drawCircle()
- },
- drawCircle() {
- var circleEcharts = echarts.init(document.getElementById('circleEcharts'))
- let option = {
- color: ['#E1F2FF', '#0091FF'],
- series: [
- {
- name: '',
- type: 'pie',
- radius: ['50%', '60%'],
- avoidLabelOverlap: false,
- hoverAnimation: false,
- label: {
- normal: {
- show: true,
- position: 'center',
- formatter: function(formatter) {
- return formatter.percent + '%'
- }
- },
- },
- labelLine: {
- normal: {
- show: false
- }
- },
- data: [
- { value: this.circle1, name: '' },
- { value: this.circle2, name: '' }
- ]
- }
- ]
- }
- circleEcharts.setOption(option)
- }
- },
- mounted() {
- this.getData()
- }
- }
- </script>
- <style lang='scss' scoped>
- .bomb {
- .reds {
- color: #f54e45;
- }
- background: #cccccc;
- width: 98%;
- display: flex;
- align-items: center;
- border-left: 8px solid #fff;
- position: relative;
- border-radius: 8px 0 0 8px;
- box-shadow: 0 2px 10px 0 rgba(44, 48, 62, 0.16);
- .bomb-line {
- position: absolute;
- top: 0;
- left: -8px;
- width: 8px;
- height: 100%;
- border-radius: 8px 0 0 8px;
- }
- .red {
- background: #f54e45ff;
- }
- .green {
- background: #34c724ff;
- }
- .gray {
- background: #0091ff;
- }
- .close {
- cursor: pointer;
- margin-left: 10px;
- }
- .bomb-left {
- width: 180px;
- padding-left: 10px;
- .bomb-left1 {
- font-size: 16px;
- margin: 38px 0 16px 0;
- }
- .bomb-left2 {
- color: #646c73;
- font-size: 14px;
- margin-bottom: 16px;
- }
- .bomb-left3 {
- color: #646c73;
- font-size: 14px;
- margin-bottom: 22px;
- }
- }
- .bomb-right {
- flex: 1;
- margin-right: 30px;
- .snapshotss-center2 {
- margin-top: 20px;
- margin-bottom: 20px;
- display: flex;
- align-items: center;
- justify-content: space-between;
- .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;
- }
- }
- }
- .bomb-right-bottom {
- }
- }
- }
- </style>
|