zhulizhen 5 jaren geleden
bovenliggende
commit
a38ae951f7
4 gewijzigde bestanden met toevoegingen van 13408 en 4 verwijderingen
  1. 12834 0
      package-lock.json
  2. 186 0
      src/views/strategy/animationBox.vue
  3. 166 4
      src/views/strategy/index.vue
  4. 222 0
      src/views/strategy/test.vue

File diff suppressed because it is too large
+ 12834 - 0
package-lock.json


+ 186 - 0
src/views/strategy/animationBox.vue

@@ -0,0 +1,186 @@
+<template>
+<div class="an-content">
+      <div class="an-box">
+            <div class="an-box-1">
+                <span class="span2">数据传输情况</span>
+            </div>
+            <div class="an-box-1">
+                <span class="span2">实际冷量</span> 2800kw <span class="span1"><span class="span2">未来1小时预测冷量 </span>3400 kw</span>
+            </div>
+      </div>
+      <div class="an-bottom">
+          <div id="leftLine" style="width:574px;height:350px;margin-right:;24px;">
+          </div>
+          <div id="rightLine" style="width:573px;height:350px;"></div>
+      </div>
+</div>
+  
+</template>
+
+<script>
+import echarts from 'echarts'
+export default {
+    data(){
+        return{
+
+        }
+    },
+    methods:{
+        drawLeft(){
+             var leftLine = echarts.init(document.getElementById('leftLine'))
+             let option = {  
+                tooltip: {
+                    trigger: 'axis'
+                },
+                legend: {
+                    data: ['室外温度', '室内平均温度', '室内最高温度']
+                },
+                grid: {
+                    left: '3%',
+                    right: '4%',
+                    bottom: '3%',
+                    containLabel: true
+                },
+               
+                xAxis: {
+                    type: 'category',
+                    boundaryGap: false,
+                    data: ['00:00','03:00','06:00','09:00','12:00','15:00','18:00','21:00','24:00'],
+                },
+                yAxis: {
+                    type: 'value'
+                },
+                series: [
+                    {
+                        name: '室外温度',
+                        type: 'line',
+                        stack: '总量',
+                        data: [120, 132, 101, 134, 90, 230, 210,112,150,]
+                    },
+                    {
+                        name: '室内平均温度',
+                        type: 'line',
+                        stack: '总量',
+                        data: [220, 182, 191, 234, 290, 330, 310,220,280]
+                    },
+                    {
+                        name: '室内最高温度',
+                        type: 'line',
+                        stack: '总量',
+                        data: [150, 232, 201, 154, 190, 330, 410,300,340]
+                    },
+                
+                ]
+            };
+            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
+                },
+                xAxis: {
+                    type: 'category',
+                    data: ['00:00','03:00','06:00','09:00','12:00','15:00','18:00','21:00','24:00'],
+                    
+                },
+                yAxis: {
+                    
+                   
+                    splitNumber: 3,
+                    splitLine: {
+                        show: false
+                    }
+                },
+                series: [{
+                    name: 'L',
+                    type: 'line',
+                    data: [20,30,40,50,60,50,40,30,20],
+                    lineStyle: {
+                        opacity: 0
+                    },
+                    stack: 'confidence-band',
+                    symbol: 'none'
+                }, {
+                    name: 'U',
+                    type: 'line',
+                    data: [20,30,50,60,50,40,30,20,40],
+                    lineStyle: {
+                        opacity: 0
+                    },
+                    areaStyle: {
+                        color: '#ccc'
+                    },
+                    stack: 'confidence-band',
+                    symbol: 'none'
+                }, {
+                    type: 'line',
+                    data: [20,30,40,50,60,40,30,20,50],
+                    hoverAnimation: false,
+                    symbolSize: 6,
+                    itemStyle: {
+                        color: '#c23531'
+                    },
+                    showSymbol: false
+                }]
+            });
+            },
+    },
+    mounted(){
+        this.drawLeft()
+        this.drawRight()
+    }
+}
+</script>
+
+<style lang='scss' scoped>
+.an-content{
+    .an-box{
+        display:flex;
+        justify-content:space-between;
+        margin-top: 20px;
+        .an-box-1{
+            min-width:544px;
+            border:1px dashed #ccc;
+            padding-top: 30px;
+            padding-left: 24px;
+            padding-bottom:30px;
+            background: #F8F9FA;
+            margin-right: 12px;
+            .span2{
+                color: #646C73;
+            }
+            .span1{
+                margin-left:64px;
+            }
+        }  
+    }
+    .an-bottom{
+        margin-top: 45px;
+        display: flex;
+    }
+}
+</style>

+ 166 - 4
src/views/strategy/index.vue

@@ -2,25 +2,187 @@
 <template>
   <div>
     <Head :headText="headText"></Head>
-    <div class="strategyContainer">当日运行策略</div>
+    <div class="strategyContainer">
+      <div class="strate-left">
+        <div class="strate-left-1">
+          今天营业时间
+        </div>
+        <div class="strate-left-2">
+          10:00 - 22:00
+        </div>
+        <div class="strate-left-1"> 
+          当前运行模式
+        </div>
+        <div class="strate-left-2">
+          间歇供冷
+        </div>
+        <div class="strate-left-box">
+          <div class='strate-left-info-1'>通风策略</div>
+          <div class='strate-left-info'>开启时间:05:00-07:00</div>
+          <div class='strate-left-info'>新风机组:开启</div>
+          <div class='strate-left-info'>组合式空调机组:全新风</div>
+
+        </div>
+      </div>
+      <div class="starte-right">
+        <p class="strate-right-title">当前状态</p>
+        <div class="strate-right-box">
+          <div class="strate-right-box-1">
+            <div class="starte-right-box-1-title">冷水机组</div>
+            <div class="starte-right-box-1-content1">
+              <p>0</p>
+              <p>0</p>
+              <p>12 ℃</p>
+            </div>
+             <div class="starte-right-box-1-content">
+              <p>大</p>
+              <p>小</p>
+              <p>温度</p>
+            </div>
+          </div>
+           <div class="strate-right-box-1">
+            <div class="starte-right-box-1-title">冷水机组</div>
+            <div class="starte-right-box-1-content1">
+              <p>0</p>
+              <p>0</p>
+              <p>12HZ</p>
+            </div>
+             <div class="starte-right-box-1-content">
+              <p>大</p>
+              <p>小</p>
+              <p>设定频率</p>
+            </div>
+          </div>
+           <div class="strate-right-box-1">
+            <div class="starte-right-box-1-title">冷水机组</div>
+            <div class="starte-right-box-1-content1">
+              <p>0</p>
+              <p>0</p>
+              <p>24HZ</p>
+            </div>
+             <div class="starte-right-box-1-content">
+              <p>大</p>
+              <p>小</p>
+              <p>设定频率</p>
+            </div>
+          </div>
+           <div class="strate-right-box-1">
+            <div class="starte-right-box-1-title">冷水机组</div>
+            <div class="starte-right-box-1-content1">
+              <p>0</p>
+              <p>0</p>
+              <p>24HZ</p>
+            </div>
+             <div class="starte-right-box-1-content">
+              <p>大</p>
+              <p>小</p>
+              <p>设定频率</p>
+            </div>
+          </div>
+        </div>
+        <animation-box></animation-box>
+      </div>
+    </div>
   </div>
 </template>
+
 <script>
 import Head from "../main/index";
+import animationBox from '../strategy/animationBox'
 export default {
   data() {
     return {
-      headText: "当日运行策略"
+      headText: "当日运行策略",
+    
     };
   },
   components: {
-    Head
+    Head,animationBox
   }
 };
 </script>
 <style lang="scss" scoped>
 .strategyContainer {
-  padding: 16px;
   background: #fff;
+  display: flex;
+  .strate-left{
+    min-width:224px;
+    background:#fff;
+    border-right:1px solid #F7F9FA;
+    margin-left: 16px;
+    .strate-left-1{
+      margin-top: 24px;
+      color: #646C73;
+      font-size:14px;
+    }
+    .strate-left-2{
+      margin-top:8px;
+      font-size: 20px;
+    }
+    .strate-left-box{
+      width: 192px;
+      height: 150px;
+      border-radius: 6px;
+      background: #E4E5E7;
+      margin-top: 67px;
+      .strate-left-info-1{
+        padding-top: 20px;
+        padding-left: 20px;
+        font-size:16px;
+        color:#1F2429;
+      }
+      .strate-left-info{
+        padding-left: 20px;
+        font-size: 14px;
+        margin-top: 8px;
+        color: #646C73;
+      }
+    }
+  }
+  .starte-right{
+    margin-right:315px;
+    padding-left: 34px;
+    .starte-right-title{
+      height: 74px;
+      line-height:74px;
+      color: #1F2429;
+      font-size: 22px;
+    }
+    .strate-right-box{
+      display: flex;
+      justify-content: space-between;
+      .strate-right-box-1{
+        min-width: 264px;
+        border-radius:6px;
+        border:1px solid rgba(238,238,238,1);
+        margin-right:18px;
+        .starte-right-box-1-title{
+          padding-left: 28px;
+          height: 56px;
+          line-height:56px;
+          font-size: 16px;
+          background:rgba(248,249,250,1);
+          color: #1F2429;
+        }
+        p{
+          padding: 0;
+          margin:0;
+        }
+        .starte-right-box-1-content1{
+          display: flex;
+          font-size: 24px;
+          justify-content:space-evenly;
+          margin-top: 11px;
+        }
+        .starte-right-box-1-content{
+          display: flex;
+          font-size: 14px;
+          margin-top: 4px;
+          margin-bottom: 14px;
+          justify-content:space-evenly;
+        }
+      }
+    }
+  }
 }
 </style>

+ 222 - 0
src/views/strategy/test.vue

@@ -0,0 +1,222 @@
+<template>
+ <div class='demo'>
+    <div class='box'></div>
+    <div id='testEcharts' style='width;400px;height:400px'></div>
+    <div id='pieEcharts' style='width:400px;height:400px;'></div>
+ </div>
+</template>
+<script>
+import echarts from 'echarts'
+    export default{
+        data(){
+            return{
+
+            }
+        },
+        methods:{
+            draw(){
+                var pieEcharts = echarts.init(document.getElementById('pieEcharts'))
+                pieEcharts.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
+                },
+                xAxis: {
+                    type: 'category',
+                    data: ['00:00','03:00','06:00','09:00','12:00','15:00','18:00','21:00','24:00'],
+                    
+                },
+                yAxis: {
+                    
+                   
+                    splitNumber: 3,
+                    splitLine: {
+                        show: false
+                    }
+                },
+                series: [{
+                    name: 'L',
+                    type: 'line',
+                    data: [20,30,40,50,60,50,40,30,20],
+                    lineStyle: {
+                        opacity: 0
+                    },
+                    stack: 'confidence-band',
+                    symbol: 'none'
+                }, {
+                    name: 'U',
+                    type: 'line',
+                    data: [20,30,50,60,50,40,30,20,40],
+                    lineStyle: {
+                        opacity: 0
+                    },
+                    areaStyle: {
+                        color: '#ccc'
+                    },
+                    stack: 'confidence-band',
+                    symbol: 'none'
+                }, {
+                    type: 'line',
+                    data: [20,30,40,50,60,40,30,20,50],
+                    hoverAnimation: false,
+                    symbolSize: 6,
+                    itemStyle: {
+                        color: '#c23531'
+                    },
+                    showSymbol: false
+                }]
+            });
+            },
+            drawIt(){        
+                var testEcharts = echarts.init(document.getElementById('testEcharts'))
+                var colors = ['#5793f3', '#d14a61', '#675bba'];
+                let option = {
+                    color: colors,
+                    tooltip: {
+                        trigger: 'axis',
+                        axisPointer: {
+                            type: 'cross'
+                        }
+                    },
+                    grid: {
+                        right: '20%'
+                    },
+                    toolbox: {
+                        feature: {
+                            dataView: {show: true, readOnly: false},
+                            restore: {show: true},
+                            saveAsImage: {show: true}
+                        }
+                    },
+                    
+                    xAxis: [
+                        {
+                            type: 'category',
+                            axisTick: {
+                                alignWithLabel: true
+                            },
+                            data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
+                        }
+                    ],
+                    yAxis: [
+                        {
+                            type: 'value',
+                            name: '蒸发量',
+                            min: 0,
+                            max: 25,
+                            position: 'right',
+                            axisLabel: {
+                                formatter: '{value} ml'
+                            }
+                        },
+                        {
+                            type: 'value',
+                            name: '',
+                            min: 0,
+                            max: 25,
+                            position: 'right',
+                            offset: 80,
+                            axisLine:{
+                                show:false,
+                            },
+                            axisTick:{
+                                show:false,
+                            },
+                               axisLabel : {
+                                    formatter: function(){
+                                        return "";
+                                    }
+
+                                }
+                            
+                        },
+                        {
+                            type: 'value',
+                            name: '温度',
+                            min: 0,
+                            max: 25,
+                            position: 'left',
+                            axisLine: {
+                                lineStyle: {
+                                    color: colors[2]
+                                }
+                            },
+                            axisLabel: {
+                                formatter: '{value} °C'
+                            }
+                        },    
+                    ],
+                    series: [
+                        {
+                            name: '蒸发量',
+                            type: 'bar',                        
+                            data: [2.6, 2.6, 2.6, 2.6, 2.6, 2.6, 2.6, 2.6, 2.6, 2.6, 2.6, 2.6]
+                        },
+                        {
+                            name: '降水量',
+                            type: 'bar',                            
+                            data: [2.6, 2.6, 2.6, 2.6, 2.6, 2.6, 2.6, 2.6, 2.6, 2.6, 2.6, 2.6]
+                        },
+                        {
+                            name: '降雨量',
+                            type: 'bar',
+                            data: [2.6, 2.6, 2.6, 2.6, 2.6, 2.6, 2.6, 2.6, 2.6, 2.6, 2.6, 2.6]
+                        },
+                        {
+                            name: '平均温度',
+                            type: 'line',
+                            yAxisIndex: 2,
+                            data: [2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2]
+                        },
+                        {
+                            name: '平均co2',
+                            type: 'line',
+                            yAxisIndex: 2,
+                            data: [2.2, 3.0, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2, 14.0]
+                        }
+                    ]
+                };
+                testEcharts.setOption(option)
+            }
+        },
+        mounted(){
+            this.drawIt();
+            this.draw();
+        }
+    }
+</script>
+<style lang="scss" scoped>
+.demo{
+    position:relative;
+    .box{
+        position:absolute;
+        left:20px;
+        width:700px;
+        height:400px;
+        background:#0091FF;
+        border-radius:6px 6px 0 0;
+
+    }
+}
+</style>