Browse Source

首页图组件

xiaohuan 5 years ago
parent
commit
cfb9db76cd

+ 336 - 0
src/components/strategyLine.vue

@@ -0,0 +1,336 @@
+<template>
+    <div class='line-container'>
+        <div class='leftL'>
+            <div class='leftLengend'>
+                <i class='outIcon'></i> 室外温度
+                <i class='innerIcon'></i> 室内平均温度
+                <i class='innerMax'></i> 室内最高温度
+            </div>
+
+            <div style='width:100%;height:350px;margin-right:24px;'>
+                <div id='leftLine' style='width:100%;height:100%;'></div>
+            </div>
+        </div>
+        <div class='rightL'>
+            <div class='rightLengend'>
+                <i class='blue-bg'></i> 实际供冷量
+                <i class='preCool'></i>
+                预测冷量
+            </div>
+
+            <div style='width:100%;height:350px;margin-right:24px;'>
+                <div id='RightLine' style='width:100%;height:100%;'></div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+import echarts from 'echarts'
+
+export default {
+    data() {
+        return {
+            dataX: [],
+            loadX: [],
+            dataY1: [],
+            dataY2: [],
+            dataY3: [],
+            loadY1: [],
+            loadY2: [],
+            loadY3: [],
+            dataY1Min: '',
+            dataY1Max: ''
+        }
+    },
+    props: ['chillerList'],
+    methods: {
+        getMax(arr) {
+            var max = arr[0]
+            for (var i = 0; i < arr.length; i++) {
+                if (max < arr[i]) {
+                    max = arr[i]
+                }
+            }
+            return max
+        },
+        getMin(arr) {
+            var min = arr[0]
+            for (var i = 0; i < arr.length; i++) {
+                if (arr[i] == '') {
+                    arr.splice(arr[i], 1)
+                }
+                if (min > arr[i]) {
+                    min = arr[i]
+                }
+            }
+
+            return min
+        },
+        drawData() {
+            this.dataY1 = []
+            this.dataX = []
+            this.loadX = []
+            this.dataY2 = []
+            this.dataY3 = []
+            this.loadY1 = []
+            this.loadY2 = []
+            this.loadY3 = []
+            this.chillerList.forEach(el => {
+                el.value = el.time.slice(0, 2) + ':' + el.time.slice(2, 4)
+                this.dataX.push(el.value)
+                this.loadX.push(el.value)
+                this.dataY1.push(el.tout == '-9999' ? undefined : el.tout)
+                this.dataY2.push(el.meanTindoor == '-9999' ? undefined : el.meanTindoor)
+                this.dataY3.push(el.maxTindoor == '-9999' ? undefined : el.maxTindoor)
+                this.loadY1.push(el.nowPlantLoad == '-9999' && el.nowPlantLoad == '-9998' ? undefined : el.nowPlantLoad)
+                this.loadY2.push(el.predictedLoadUpLimit != '-9999' && el.predictedLoadUpLimit != '-9998' ? el.predictedLoadUpLimit : undefined)
+                this.loadY3.push(el.redictedLoadDownLimit != '-9999' && el.redictedLoadDownLimit != '-9998' ? el.redictedLoadDownLimit : undefined)
+            })
+            let arr = []
+            arr = arr
+                .concat(this.dataY1)
+                .concat(this.dataY2)
+                .concat(this.dataY3)
+            this.dataY1Min = this.getMin(arr)
+            this.dataY1Max = this.getMax(arr)
+            let minG = parseInt(this.dataY1Min % 10),
+                minS = parseInt((this.dataY1Min % 100) / 10),
+                maxG = parseInt(this.dataY1Max % 10),
+                maxS = parseInt((this.dataY1Max % 100) / 10)
+            if (minG > 5) {
+                this.dataY1Min = String(minS) + '5'
+            } else if (minG <= 5) {
+                this.dataY1Min = String(minS) + '0'
+            }
+            if (maxG > 5) {
+                this.dataY1Max = String(maxS + 1) + '0'
+            } else if (maxG <= 5) {
+                this.dataY1Max = String(maxS) + '5'
+            }
+            this.drawLeft()
+            this.drawRight()
+        },
+        drawLeft() {
+            var leftLine = echarts.init(document.getElementById('leftLine'))
+            let option = {
+                tooltip: {
+                    trigger: 'axis',
+                    formatter: function(data) {
+                        let val1 = '',
+                            val2 = '',
+                            val3 = ''
+                        data.forEach(i => {
+                            if (i.seriesName == '室外温度') {
+                                val1 = `<br/>室外温度:${i.value ? i.value.toFixed(1) : ''}`
+                            }
+                            if (i.seriesName == ' 室内平均温度') {
+                                val2 = `<br/>室内平均温度:${i.value ? i.value.toFixed(1) : ''}`
+                            }
+                            if (i.seriesName == '室内最高温度') {
+                                val3 = `<br/>室内最高温度:${i.value ? i.value.toFixed(1) : ''}`
+                            }
+                        })
+                        return `${data[0].name}${val1}${val2}${val3}`
+                    }
+                },
+                title: {
+                    text: '室内外温度',
+                    fontSize: '16px',
+                    color: '#1F2429'
+                },
+
+                grid: {
+                    left: '3%',
+                    right: '4%',
+                    bottom: '3%',
+                    containLabel: true
+                },
+
+                xAxis: {
+                    type: 'category',
+                    boundaryGap: false,
+                    data: this.dataX
+                },
+                yAxis: {
+                    type: 'value',
+                    min: Number(this.dataY1Min),
+                    max: Number(this.dataY1Max),
+                    interval: 2,
+                    axisLabel: { formatter: '{value}  ℃' }
+                },
+                series: [
+                    {
+                        name: '室外温度',
+                        type: 'line',
+
+                        data: this.dataY1,
+                        color: '#0091FF'
+                    },
+                    {
+                        name: '室内平均温度',
+                        type: 'line',
+
+                        data: this.dataY2,
+                        color: '#00D6B9'
+                    },
+                    {
+                        name: '室内最高温度',
+                        type: 'line',
+
+                        data: this.dataY3,
+                        color: '#FFBA6B'
+                    }
+                ]
+            }
+            leftLine.setOption(option)
+        },
+        drawRight() {
+            var RightLine = echarts.init(document.getElementById('RightLine'))
+            RightLine.setOption({
+                tooltip: {
+                    trigger: 'axis',
+                    axisPointer: {
+                        type: 'cross',
+                        animation: false,
+                        label: {
+                            backgroundColor: '#ccc',
+                            borderColor: '#aaa',
+                            borderWidth: 1,
+                            shadowBlur: 0,
+                            shadowOffsetX: 0,
+                            shadowOffsetY: 0,
+                            color: '#222'
+                        }
+                    }
+                },
+                grid: {
+                    left: '3%',
+                    right: '4%',
+                    bottom: '3%',
+                    containLabel: true
+                },
+                title: {
+                    text: '预测冷量',
+                    fontSize: '16px',
+                    color: '#1F2429'
+                },
+                xAxis: {
+                    type: 'category',
+                    data: this.loadX
+                },
+                yAxis: {
+                    splitLine: {
+                        lineStyle: {
+                            type: 'dotted'
+                        }
+                    },
+                    axisLabel: { formatter: '{value}  kW' }
+                },
+                series: [
+                    {
+                        name: 'L',
+                        type: 'line',
+                        data: this.loadY2,
+                        lineStyle: {
+                            opacity: 0
+                        },
+                        stack: 'confidence-band',
+                        symbol: 'none'
+                    },
+                    {
+                        name: 'U',
+                        type: 'line',
+                        data: this.loadY3,
+                        lineStyle: {
+                            opacity: 0
+                        },
+                        areaStyle: {
+                            color: '#ccc'
+                        },
+                        stack: 'confidence-band',
+                        symbol: 'none'
+                    },
+                    {
+                        type: 'line',
+                        data: this.loadY1,
+                        hoverAnimation: false,
+                        symbolSize: 6,
+                        itemStyle: {
+                            color: '#0091FF'
+                        },
+                        showSymbol: false
+                    }
+                ]
+            })
+        }
+    },
+    mounted() {
+        this.$nextTick(function() {
+            this.drawData()
+        })
+    },
+    watch: {
+        chillerList: {
+            immediate: true,
+            handler(val, old) {
+                if (old) {
+                    this.drawData()
+                }
+            }
+        }
+    }
+}
+</script>
+<style lang="scss" scoped>
+.line-container {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    .leftL {
+        width: 50%;
+        flex: 1;
+        .leftLengend {
+            text-align: center;
+            margin-bottom: 10px;
+            i {
+                display: inline-block;
+                width: 16px;
+                height: 6px;
+                border-radius: 3px;
+                vertical-align: middle;
+            }
+            .innerIcon {
+                background: rgba(0, 214, 185, 1);
+                margin: 0 20px;
+            }
+            .outIcon {
+                background: rgba(0, 145, 255, 1);
+            }
+            .innerMax {
+                background: rgba(255, 186, 107, 1);
+            }
+        }
+    }
+    .rightL {
+        flex: 1;
+        width: 50%;
+        .rightLengend {
+            text-align: center;
+            margin-bottom: 10px;
+            i {
+                display: inline-block;
+                width: 16px;
+                height: 6px;
+                border-radius: 3px;
+                vertical-align: middle;
+            }
+            .preCool {
+                background: #0091ff;
+                opacity: 0.29;
+                margin-left: 20px;
+            }
+        }
+    }
+}
+</style>

+ 0 - 17
src/components/todayStrategy.vue

@@ -64,7 +64,6 @@
                 </template>
             </el-table-column>
         </el-table>
-
         <el-dialog title='备注' :visible.sync='dialogVisible' width='30%'>
             <el-input type='textarea' :autosize='{ minRows: 2, maxRows: 4}' placeholder='请填写备注内容' v-model='remarks'></el-input>
             <span slot='footer' class='dialog-footer'>
@@ -134,16 +133,6 @@ export default {
             }
             queryWorkflow(params).then(res => {
                 this.newData = res.content ? res.content : []
-                // console.log(res)
-                // let arr = [];
-                // arr = res.content ? res.content : [];
-                // if (arr.length > 0) {
-                //   arr.forEach(item => {
-                //     arr.push(item.commandId);
-                //     this.newArr.push(item);
-                //   });
-                //   this.queryExecute(arr);
-                // }
             })
         },
         handleClick(row) {
@@ -168,12 +157,6 @@ export default {
                 path: '/appeal/appealDetails',
                 query: { item: JSON.stringify(row) }
             })
-            // this.queryDetail(row)
-            // return
-            // this.$router.push({
-            //     path: '/appeal/appealDetails',
-            //     query: { item: JSON.stringify(row) }
-            // })
         },
         queryDetail(item) {
             let params = {

+ 5 - 436
src/views/evaluate/evSnapshotsDialog.vue

@@ -159,27 +159,15 @@
             </div>
         </div>
         <div class='snapshotss-foot'>
-            <div class='leftL'>
-                <div class='leftLengend'>
-                    <i class='outIcon'></i> 室外温度
-                    <i class='innerIcon'></i> 室内平均温度
-                    <i class='innerMax'></i> 室内最高温度
-                </div>
-                <div id='snapshotssLeft' style='width:100%;height:250px;margin-right:;24px;'></div>
-            </div>
-            <div class='rightL'>
-                <div class='rightLengend'>
-                    <i class='blue-bg'></i> 实际供冷量
-                    <i class='preCool'></i> 预测冷量
-                </div>
-                <div id='snapshotssRight' style='width:100%;height:250px;'></div>
-            </div>
+            <strategy-line :chillerList='chillerHourList' v-if='chillerHourList.length>=0'></strategy-line>
         </div>
     </div>
 </template>
 <script>
 import echarts from 'echarts'
 import { queryQuickData } from '@/api/strategy/strategy.js'
+import strategyLine from '@/components/strategyLine'
+
 export default {
     props: ['appDate', 'time'],
     data() {
@@ -204,17 +192,7 @@ export default {
             ],
             chillerOrg: {},
             chillerCommand: {},
-            chillerHourList: [],
-            dataX: [],
-            loadX: [],
-            dataY1: [],
-            dataY2: [],
-            dataY3: [],
-            loadY1: [],
-            loadY2: [],
-            loadY3: [],
-            dataY1Min: '',
-            dataY1Max: ''
+            chillerHourList: []
         }
     },
     mounted() {
@@ -225,6 +203,7 @@ export default {
             this.getQuickData()
         }
     },
+    components: { strategyLine },
     methods: {
         formatterRes(res, type, num) {
             if (res == '-9999') {
@@ -244,28 +223,6 @@ export default {
                 return res
             }
         },
-        getMax(arr) {
-            var max = arr[0]
-            for (var i = 0; i < arr.length; i++) {
-                if (max < arr[i]) {
-                    max = arr[i]
-                }
-            }
-            return max
-        },
-        getMin(arr) {
-            var min = arr[0]
-            for (var i = 0; i < arr.length; i++) {
-                if (arr[i] == '') {
-                    arr.splice(arr[i], 1)
-                }
-                if (min > arr[i]) {
-                    min = arr[i]
-                }
-            }
-
-            return min
-        },
         getQuickData() {
             let params = {
                 getParams: {
@@ -279,350 +236,6 @@ export default {
                 this.chillerOrg = res.chillerOrg || {}
                 this.chillerCommand = res.chillerOrg || {}
                 this.chillerHourList = res.chillerHourList || []
-                this.drawData()
-            })
-        },
-        drawData() {
-            this.dataY1 = []
-            this.dataX = []
-            this.loadX = []
-            this.dataY2 = []
-            this.dataY3 = []
-            this.loadY1 = []
-            this.loadY2 = []
-            this.loadY3 = []
-            this.chillerHourList.forEach(el => {
-                el.value = el.time.slice(0, 2) + ':' + el.time.slice(2, 4)
-                this.dataX.push(el.value)
-                this.loadX.push(el.value)
-                this.dataY1.push(el.tout == '-9999' ? undefined : el.tout)
-                this.dataY2.push(el.meanTindoor == '-9999' ? undefined : el.meanTindoor)
-                this.dataY3.push(el.maxTindoor == '-9999' ? undefined : el.maxTindoor)
-                this.loadY1.push(el.nowPlantLoad == '-9999' && el.nowPlantLoad == '-9998' ? undefined : el.nowPlantLoad)
-                this.loadY2.push(el.predictedLoadUpLimit != '-9999' && el.predictedLoadUpLimit != '-9998' ? el.predictedLoadUpLimit : undefined)
-                this.loadY3.push(el.redictedLoadDownLimit != '-9999' && el.redictedLoadDownLimit != '-9998' ? el.redictedLoadDownLimit : undefined)
-            })
-            let arr = []
-            arr = arr
-                .concat(this.dataY1)
-                .concat(this.dataY2)
-                .concat(this.dataY3)
-            this.dataY1Min = this.getMin(arr)
-            this.dataY1Max = this.getMax(arr)
-            let minG = parseInt(this.dataY1Min % 10),
-                minS = parseInt((this.dataY1Min % 100) / 10),
-                maxG = parseInt(this.dataY1Max % 10),
-                maxS = parseInt((this.dataY1Max % 100) / 10)
-            if (minG > 5) {
-                this.dataY1Min = String(minS) + '5'
-            } else if (minG <= 5) {
-                this.dataY1Min = String(minS) + '0'
-            }
-            if (maxG > 5) {
-                this.dataY1Max = String(maxS + 1) + '0'
-            } else if (maxG <= 5) {
-                this.dataY1Max = String(maxS) + '5'
-            }
-            this.drawSnapshotssLeft()
-            this.drawSnapshotssRight()
-        },
-        drawSnapshotssLeft() {
-            var snapshotssLeft = echarts.init(document.getElementById('snapshotssLeft'))
-            let option = {
-                tooltip: {
-                    trigger: 'axis',
-                    formatter: function(data) {
-                        return `${data[0].name}<br/>${data[0].seriesName}  :${data[0].value ? data[0].value.toFixed(1) : ''}<br/>${
-                            data[1].seriesName
-                        }  :${data[1].value ? data[1].value.toFixed(1) : ''} <br/> ${data[2].seriesName}  :${
-                            data[2].value ? data[2].value.toFixed(1) : ''
-                        }`
-                    }
-                },
-                title: {
-                    text: '室内外温度',
-                    fontSize: '16px',
-                    color: '#1F2429'
-                },
-
-                grid: {
-                    left: '3%',
-                    right: '4%',
-                    bottom: '3%',
-                    containLabel: true
-                },
-
-                xAxis: {
-                    type: 'category',
-                    boundaryGap: false,
-                    data: this.dataX
-                },
-                yAxis: {
-                    type: 'value',
-                    min: Number(this.dataY1Min),
-                    max: Number(this.dataY1Max),
-                    interval: 2,
-                    axisLabel: { formatter: '{value}  ℃' }
-                },
-                series: [
-                    {
-                        name: '室外温度',
-                        type: 'line',
-
-                        data: this.dataY1,
-                        color: '#0091FF'
-                    },
-                    {
-                        name: '室内平均温度',
-                        type: 'line',
-
-                        data: this.dataY2,
-                        color: '#00D6B9'
-                    },
-                    {
-                        name: '室内最高温度',
-                        type: 'line',
-
-                        data: this.dataY3,
-                        color: '#FFBA6B'
-                    }
-                ]
-            }
-            snapshotssLeft.setOption(option)
-        },
-        drawSnapshotssRight() {
-            var snapshotssRight = echarts.init(document.getElementById('snapshotssRight'))
-            snapshotssRight.setOption({
-                tooltip: {
-                    trigger: 'axis',
-                    axisPointer: {
-                        type: 'cross',
-                        animation: false,
-                        label: {
-                            backgroundColor: '#ccc',
-                            borderColor: '#aaa',
-                            borderWidth: 1,
-                            shadowBlur: 0,
-                            shadowOffsetX: 0,
-                            shadowOffsetY: 0,
-                            color: '#222'
-                        }
-                    }
-                    //  formatter: function (params) {
-                    // //     return params[2].name + '<br />' + params[2].value;
-                    // }
-                },
-                grid: {
-                    left: '3%',
-                    right: '4%',
-                    bottom: '3%',
-                    containLabel: true
-                },
-                title: {
-                    text: '预测冷量',
-                    fontSize: '16px',
-                    color: '#1F2429'
-                },
-                xAxis: {
-                    type: 'category',
-                    data: this.loadX
-                },
-                yAxis: {
-                    // splitNumber: 3,
-                    splitLine: {
-                        // show: false,
-                        lineStyle: {
-                            type: 'dotted'
-                        }
-                    },
-                    axisLabel: { formatter: '{value}  kW' }
-                },
-                series: [
-                    {
-                        name: 'L',
-                        type: 'line',
-                        data: this.loadY2,
-                        lineStyle: {
-                            opacity: 0
-                        },
-                        stack: 'confidence-band',
-                        symbol: 'none'
-                    },
-                    {
-                        name: 'U',
-                        type: 'line',
-                        data: this.loadY3,
-                        lineStyle: {
-                            opacity: 0
-                        },
-                        areaStyle: {
-                            color: '#ccc'
-                        },
-                        stack: 'confidence-band',
-                        symbol: 'none'
-                    },
-                    {
-                        type: 'line',
-                        data: this.loadY1,
-                        hoverAnimation: false,
-                        symbolSize: 6,
-                        itemStyle: {
-                            color: '#0091FF'
-                        },
-                        showSymbol: false
-                    }
-                ]
-            })
-        },
-        getData() {
-            this.chillerHourList.forEach(el => {
-                el.value = el.time.slice(0, 2) + ':' + el.time.slice(2, 4)
-                this.dataX.push(el.value)
-                this.loadX.push(el.value)
-                this.dataY1.push(el.tout)
-                this.dataY2.push(el.meanTindoor)
-                this.dataY3.push(el.maxTindoor)
-                this.loadY1.push(el.nowPlantLoad == '-9999' && el.nowPlantLoad == '-9998' ? undefined : el.nowPlantLoad)
-                this.loadY2.push(el.predictedLoadUpLimit != '-9999' && el.predictedLoadUpLimit != '-9998' ? el.predictedLoadUpLimit : undefined)
-                this.loadY3.push(el.redictedLoadDownLimit != '-9999' && el.redictedLoadDownLimit != '-9998' ? el.redictedLoadDownLimit : undefined)
-            })
-        },
-        drawLeft() {
-            var leftLine = echarts.init(document.getElementById('leftLine'))
-            let option = {
-                tooltip: {
-                    trigger: 'axis'
-                },
-                title: {
-                    text: '室内外温度',
-                    fontSize: '16px',
-                    color: '#1F2429'
-                },
-
-                grid: {
-                    left: '3%',
-                    right: '4%',
-                    bottom: '3%',
-                    containLabel: true
-                },
-
-                xAxis: {
-                    type: 'category',
-                    boundaryGap: false,
-                    data: this.dataX
-                },
-                yAxis: {
-                    type: 'value',
-                    axisLabel: { formatter: '{value}  ℃' }
-                },
-                series: [
-                    {
-                        name: '室外温度',
-                        type: 'line',
-                        stack: '总量',
-                        data: this.dataY1,
-                        color: '#0091FF'
-                    },
-                    {
-                        name: '室内平均温度',
-                        type: 'line',
-                        stack: '总量',
-                        data: this.dataY2,
-                        color: '#00D6B9'
-                    },
-                    {
-                        name: '室内最高温度',
-                        type: 'line',
-                        stack: '总量',
-                        data: this.dataY3,
-                        color: '#FFBA6B'
-                    }
-                ]
-            }
-            leftLine.setOption(option)
-        },
-        drawRight() {
-            var rightLine = echarts.init(document.getElementById('rightLine'))
-            rightLine.setOption({
-                tooltip: {
-                    trigger: 'axis',
-                    axisPointer: {
-                        type: 'cross',
-                        animation: false,
-                        label: {
-                            backgroundColor: '#ccc',
-                            borderColor: '#aaa',
-                            borderWidth: 1,
-                            shadowBlur: 0,
-                            shadowOffsetX: 0,
-                            shadowOffsetY: 0,
-                            color: '#222'
-                        }
-                    }
-                    //  formatter: function (params) {
-                    // //     return params[2].name + '<br />' + params[2].value;
-                    // }
-                },
-                grid: {
-                    left: '3%',
-                    right: '4%',
-                    bottom: '3%',
-                    containLabel: true
-                },
-                title: {
-                    text: '预测冷量',
-                    fontSize: '16px',
-                    color: '#1F2429'
-                },
-                xAxis: {
-                    type: 'category',
-                    data: this.loadX
-                },
-                yAxis: {
-                    splitNumber: 3,
-                    splitLine: {
-                        // show: false,
-                        lineStyle: {
-                            type: 'dotted'
-                        }
-                    },
-                    axisLabel: { formatter: '{value}  kW' }
-                },
-                series: [
-                    {
-                        name: 'L',
-                        type: 'line',
-                        data: this.loadY2,
-                        lineStyle: {
-                            opacity: 0
-                        },
-                        stack: 'confidence-band',
-                        symbol: 'none'
-                    },
-                    {
-                        name: 'U',
-                        type: 'line',
-                        data: this.loadY3,
-                        lineStyle: {
-                            opacity: 0
-                        },
-                        areaStyle: {
-                            color: '#ccc'
-                        },
-                        stack: 'confidence-band',
-                        symbol: 'none'
-                    },
-                    {
-                        type: 'line',
-                        data: this.loadY1,
-                        hoverAnimation: false,
-                        symbolSize: 6,
-                        itemStyle: {
-                            color: '#0091FF'
-                        },
-                        showSymbol: false
-                    }
-                ]
             })
         }
     }
@@ -806,50 +419,6 @@ export default {
     .snapshotss-foot {
         display: flex;
         justify-content: space-between;
-        height: 300px;
-        .leftL {
-            flex: 1;
-            .leftLengend {
-                text-align: center;
-                margin-bottom: 10px;
-                i {
-                    display: inline-block;
-                    width: 16px;
-                    height: 6px;
-                    border-radius: 3px;
-                    vertical-align: middle;
-                }
-                .innerIcon {
-                    background: rgba(0, 214, 185, 1);
-                    margin: 0 20px;
-                }
-                .outIcon {
-                    background: rgba(0, 145, 255, 1);
-                }
-                .innerMax {
-                    background: rgba(255, 186, 107, 1);
-                }
-            }
-        }
-        .rightL {
-            flex: 1;
-            .rightLengend {
-                text-align: center;
-                margin-bottom: 10px;
-                i {
-                    display: inline-block;
-                    width: 16px;
-                    height: 6px;
-                    border-radius: 3px;
-                    vertical-align: middle;
-                }
-                .preCool {
-                    background: #0091ff;
-                    opacity: 0.29;
-                    margin-left: 20px;
-                }
-            }
-        }
     }
 }
 </style>

+ 4 - 306
src/views/strategy/animationBox.vue

@@ -37,22 +37,7 @@
             </div>
         </div>
         <div class='an-bottom'>
-            <div class='leftL'>
-                <div class='leftLengend'>
-                    <i class='outIcon'></i> 室外温度
-                    <i class='innerIcon'></i> 室内平均温度
-                    <i class='innerMax'></i> 室内最高温度
-                </div>
-                <div id='leftLine' style='width:100%;height:350px;margin-right:;24px;'></div>
-            </div>
-            <div class='rightL'>
-                <div class='rightLengend'>
-                    <i class='blue-bg'></i> 实际供冷量
-                    <i class='preCool'></i>
-                    预测冷量
-                </div>
-                <div id='rightLine' style='width:100%;height:350px;'></div>
-            </div>
+            <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"'>
@@ -65,7 +50,6 @@
                 <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>
@@ -73,6 +57,7 @@
 <script>
 import echarts from 'echarts'
 import bomBox from './bomBox'
+import strategyLine from '@/components/strategyLine'
 
 export default {
     data() {
@@ -90,252 +75,8 @@ export default {
             dataY1Max: ''
         }
     },
-    components: { bomBox },
-    props: ['data', 'chillerHourList', 'chillerCommandQ'],
-    watch: {
-        chillerHourList(newVal, oldVal) {
-            if (newVal) {
-                this.getData()
-                this.drawLeft()
-                this.drawRight()
-            }
-        }
-    },
-    methods: {
-        getMax(arr) {
-            var max = arr[0]
-            for (var i = 0; i < arr.length; i++) {
-                if (max < arr[i]) {
-                    max = arr[i]
-                }
-            }
-            return max
-        },
-        getMin(arr) {
-            var min = arr[0]
-            for (var i = 0; i < arr.length; i++) {
-                if (arr[i] == '') {
-                    arr.splice(arr[i], 1)
-                }
-                if (min > arr[i]) {
-                    min = arr[i]
-                }
-            }
-
-            return min
-        },
-        getData() {
-            this.dataY1 = []
-            this.dataY2 = []
-            this.dataY3 = []
-            this.chillerHourList.forEach(el => {
-                el.value = el.time.slice(0, 2) + ':' + el.time.slice(2, 4)
-                this.dataX.push(el.value)
-                this.loadX.push(el.value)
-                this.dataY1.push(el.tout == '-9999' ? undefined : el.tout)
-                this.dataY2.push(el.meanTindoor == '-9999' ? undefined : el.meanTindoor)
-                this.dataY3.push(el.maxTindoor == '-9999' ? undefined : el.maxTindoor)
-                this.loadY1.push(el.nowPlantLoad == '-9999' || el.nowPlantLoad == '-9998' ? undefined : el.nowPlantLoad)
-                this.loadY2.push(el.predictedLoadUpLimit != '-9999' && el.predictedLoadUpLimit != '-9998' ? el.predictedLoadUpLimit : undefined)
-                this.loadY3.push(el.redictedLoadDownLimit != '-9999' && el.redictedLoadDownLimit != '-9998' ? el.redictedLoadDownLimit : undefined)
-                let arr = []
-                arr = arr
-                    .concat(this.dataY1)
-                    .concat(this.dataY2)
-                    .concat(this.dataY3)
-                this.dataY1Min = this.getMin(arr)
-                this.dataY1Max = this.getMax(arr)
-                let minG = parseInt(this.dataY1Min % 10),
-                    minS = parseInt((this.dataY1Min % 100) / 10),
-                    maxG = parseInt(this.dataY1Max % 10),
-                    maxS = parseInt((this.dataY1Max % 100) / 10)
-                if (minG > 5) {
-                    this.dataY1Min = String(minS) + '5'
-                } else if (minG <= 5) {
-                    this.dataY1Min = String(minS) + '0'
-                }
-                if (maxG >= 5) {
-                    this.dataY1Max = String(maxS + 1) + '0'
-                } else if (maxG < 5) {
-                    this.dataY1Max = String(maxS) + '5'
-                }
-                // console.log(arr)
-            })
-        },
-        drawLeft() {
-            var leftLine = echarts.init(document.getElementById('leftLine'))
-            let option = {
-                tooltip: {
-                    trigger: 'axis',
-                    formatter: function(data) {
-                        let val1 = '',
-                            val2 = '',
-                            val3 = ''
-                        data.forEach(i => {
-                            console.log(i)
-                            if (i.seriesName == '室外温度') {
-                                val1 = `<br/>室外温度:${i.value ? i.value.toFixed(1) : ''}`
-                                console.log(val1)
-                            }
-                            if (i.seriesName == ' 室内平均温度') {
-                                val2 = `<br/>室内平均温度:${i.value ? i.value.toFixed(1) : ''}`
-                            }
-                            if (i.seriesName == '室内最高温度') {
-                                val3 = `<br/>室内最高温度:${i.value ? i.value.toFixed(1) : ''}`
-                            }
-                        })
-                        return `${data[0].name}${val1}${val2}${val3}`
-                        console.log(data)
-                        // return `${data[0].name}<br/>${data[0].seriesName}  :${data[0].value ? data[0].value.toFixed(1) : ''}<br/>${
-                        //     data[1].seriesName
-                        // }  :${data[1].value ? data[1].value.toFixed(1) : ''} <br/> ${data[2].seriesName}  :${
-                        //     data[2].value ? data[2].value.toFixed(1) : ''
-                        // }`
-                    }
-                },
-                title: {
-                    text: '室内外温度',
-                    fontSize: '16px',
-                    color: '#1F2429'
-                },
-
-                grid: {
-                    left: '3%',
-                    right: '4%',
-                    bottom: '3%',
-                    containLabel: true
-                },
-
-                xAxis: {
-                    type: 'category',
-                    boundaryGap: false,
-                    data: this.dataX
-                },
-                yAxis: {
-                    type: 'value',
-                    min: Number(this.dataY1Min),
-                    max: Number(this.dataY1Max),
-                    interval: 2,
-                    axisLabel: { formatter: '{value}  ℃' }
-                },
-                series: [
-                    {
-                        name: '室外温度',
-                        type: 'line',
-
-                        data: this.dataY1,
-                        color: '#0091FF'
-                    },
-                    {
-                        name: '室内平均温度',
-                        type: 'line',
-
-                        data: this.dataY2,
-                        color: '#00D6B9'
-                    },
-                    {
-                        name: '室内最高温度',
-                        type: 'line',
-
-                        data: this.dataY3,
-                        color: '#FFBA6B'
-                    }
-                ]
-            }
-            leftLine.setOption(option)
-        },
-        drawRight() {
-            var rightLine = echarts.init(document.getElementById('rightLine'))
-            rightLine.setOption({
-                tooltip: {
-                    trigger: 'axis',
-                    axisPointer: {
-                        type: 'cross',
-                        animation: false,
-                        label: {
-                            backgroundColor: '#ccc',
-                            borderColor: '#aaa',
-                            borderWidth: 1,
-                            shadowBlur: 0,
-                            shadowOffsetX: 0,
-                            shadowOffsetY: 0,
-                            color: '#222'
-                        }
-                    }
-                    //  formatter: function (params) {
-                    // //     return params[2].name + '<br />' + params[2].value;
-                    // }
-                },
-                grid: {
-                    left: '3%',
-                    right: '4%',
-                    bottom: '3%',
-                    containLabel: true
-                },
-                title: {
-                    text: '预测冷量',
-                    fontSize: '16px',
-                    color: '#1F2429'
-                },
-                xAxis: {
-                    type: 'category',
-                    data: this.loadX
-                },
-                yAxis: {
-                    splitNumber: 3,
-                    splitLine: {
-                        // show: sfalse,
-                        lineStyle: {
-                            type: 'dotted'
-                        }
-                    },
-                    axisLabel: { formatter: '{value}  kW' }
-                },
-                series: [
-                    {
-                        name: 'L',
-                        type: 'line',
-                        data: this.loadY2,
-                        lineStyle: {
-                            opacity: 0
-                        },
-                        stack: 'confidence-band',
-                        symbol: 'none'
-                    },
-                    {
-                        name: 'U',
-                        type: 'line',
-                        data: this.loadY3,
-                        lineStyle: {
-                            opacity: 0
-                        },
-                        areaStyle: {
-                            color: '#ccc'
-                        },
-                        stack: 'confidence-band',
-                        symbol: 'none'
-                    },
-                    {
-                        type: 'line',
-                        data: this.loadY1,
-                        hoverAnimation: false,
-                        symbolSize: 6,
-                        itemStyle: {
-                            color: '#0091FF'
-                        },
-                        showSymbol: false
-                    }
-                ]
-            })
-        }
-    },
-    created() {
-        this.getData()
-    },
-    mounted() {
-        this.drawLeft()
-        this.drawRight()
-    }
+    components: { bomBox, strategyLine },
+    props: ['data', 'chillerHourList', 'chillerCommandQ']
 }
 </script>
 
@@ -466,49 +207,6 @@ export default {
     .an-bottom {
         margin-top: 45px;
         display: flex;
-        .leftL {
-            flex: 1;
-            .leftLengend {
-                text-align: center;
-                margin-bottom: 10px;
-                i {
-                    display: inline-block;
-                    width: 16px;
-                    height: 6px;
-                    border-radius: 3px;
-                    vertical-align: middle;
-                }
-                .innerIcon {
-                    background: rgba(0, 214, 185, 1);
-                    margin: 0 20px;
-                }
-                .outIcon {
-                    background: rgba(0, 145, 255, 1);
-                }
-                .innerMax {
-                    background: rgba(255, 186, 107, 1);
-                }
-            }
-        }
-        .rightL {
-            flex: 1;
-            .rightLengend {
-                text-align: center;
-                margin-bottom: 10px;
-                i {
-                    display: inline-block;
-                    width: 16px;
-                    height: 6px;
-                    border-radius: 3px;
-                    vertical-align: middle;
-                }
-                .preCool {
-                    background: #0091ff;
-                    opacity: 0.29;
-                    margin-left: 20px;
-                }
-            }
-        }
     }
 }
 </style>