Browse Source

查看详情

zhulizhen 5 years ago
parent
commit
b564c4c67b

+ 0 - 0
src/components/HelloWorld.vue


+ 168 - 0
src/components/todayStrategy.vue

@@ -0,0 +1,168 @@
+<template>
+    <el-table
+    :data="list"
+    border
+    style="width: 100%">
+    <el-table-column
+      type="index"
+      width="80"
+      label="序号">
+    </el-table-column>
+    <el-table-column
+      prop="name"
+      label="策略推送时间"
+      >
+    </el-table-column>
+    <el-table-column
+      prop="province"
+      label="策略执行时间"
+      >
+    </el-table-column>
+    <el-table-column
+      prop="city"
+      label="冷水机组开启台数"
+      >
+    </el-table-column>
+    <el-table-column
+      prop="address"
+      label="出水温度设定值"
+      width="300">
+    </el-table-column>
+    <el-table-column
+      prop="zip"
+      label="冷冻泵开启台数"
+      >
+    </el-table-column>
+    <el-table-column
+      prop="zip"
+      label="冷却泵开启台数"
+      >
+    </el-table-column>
+    <el-table-column
+      prop="zip"
+      label="冷却塔开启组数"
+      >
+    </el-table-column>
+    <el-table-column
+      prop="zip"
+      label="通风策略"
+      >
+    </el-table-column>
+    <el-table-column
+      prop="zip"
+      label="执行情况"
+      >
+    </el-table-column>
+    <el-table-column
+      label="操作"
+      width="100">
+      <template slot-scope="scope">
+        <el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>
+        <el-button type="text" size="small">编辑</el-button>
+      </template>
+    </el-table-column>
+  </el-table>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            list: [
+                    {
+                        date: '2016-05-02',
+                        name: '王小虎',
+                        province: '上海',
+                        city: '普陀区',
+                        address: '上海市普陀区金沙江路 1518 弄',
+                        zip: 200333
+                    },
+                    {
+                        date: '2016-05-02',
+                        name: '王小虎',
+                        province: '上海',
+                        city: '普陀区',
+                        address: '上海市普陀区金沙江路 1518 弄',
+                        zip: 200333
+                    },
+                    {
+                        date: '2016-05-02',
+                        name: '王小虎',
+                        province: '上海',
+                        city: '普陀区',
+                        address: '上海市普陀区金沙江路 1518 弄',
+                        zip: 200333
+                    },
+                    {
+                        date: '2016-05-02',
+                        name: '王小虎',
+                        province: '上海',
+                        city: '普陀区',
+                        address: '上海市普陀区金沙江路 1518 弄',
+                        zip: 200333
+                    },
+                    {
+                        date: '2016-05-02',
+                        name: '王小虎',
+                        province: '上海',
+                        city: '普陀区',
+                        address: '上海市普陀区金沙江路 1518 弄',
+                        zip: 200333
+                    },
+                    {
+                        date: '2016-05-02',
+                        name: '王小虎',
+                        province: '上海',
+                        city: '普陀区',
+                        address: '上海市普陀区金沙江路 1518 弄',
+                        zip: 200333
+                    },
+                    {
+                        date: '2016-05-02',
+                        name: '王小虎',
+                        province: '上海',
+                        city: '普陀区',
+                        address: '上海市普陀区金沙江路 1518 弄',
+                        zip: 200333
+                    },
+                    {
+                        date: '2016-05-02',
+                        name: '王小虎',
+                        province: '上海',
+                        city: '普陀区',
+                        address: '上海市普陀区金沙江路 1518 弄',
+                        zip: 200333
+                    },
+                    {
+                        date: '2016-05-02',
+                        name: '王小虎',
+                        province: '上海',
+                        city: '普陀区',
+                        address: '上海市普陀区金沙江路 1518 弄',
+                        zip: 200333
+                    },
+                    {
+                        date: '2016-05-02',
+                        name: '王小虎',
+                        province: '上海',
+                        city: '普陀区',
+                        address: '上海市普陀区金沙江路 1518 弄',
+                        zip: 200333
+                    },
+                    {
+                        date: '2016-05-02',
+                        name: '王小虎',
+                        province: '上海',
+                        city: '普陀区',
+                        address: '上海市普陀区金沙江路 1518 弄',
+                        zip: 200333
+                    }
+            ]
+        }
+    }
+}
+</script>
+
+<style>
+
+</style>

+ 13 - 1
src/views/main/index.vue

@@ -69,7 +69,7 @@
         <img class="nav-icon" v-if="navText" src="@/assets/shape.png" alt />
         <span class="nav-text1" v-if="navText">今日已收到 8 条策略,其中有 1 条未执行</span>
         <span class="nav-text" v-else>今天已收到 8 条策略</span>
-        <span class="nav-look">查看</span>
+        <span class="nav-look" @click="showTodayStrategy = true">查看</span>
       </div>
     </nav>
     <div id="nav" class="nav">
@@ -80,12 +80,24 @@
         <router-link :to="item.path">{{item.name}}</router-link>
       </p>
     </div>
+
+      <el-dialog
+        title="提示"
+        :visible.sync="showTodayStrategy"
+        width="1260px">
+        <today-strategy></today-strategy>
+      </el-dialog>
   </div>
 </template>
 <script>
+import TodayStrategy from '@/components/todayStrategy.vue'
 export default {
+  components: {
+    TodayStrategy
+  },
   data() {
     return {
+      showTodayStrategy: false,
       menuList: [
         {
           name: "当日运行策略",

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

@@ -8,6 +8,9 @@
                 <span class="span2">实际冷量</span> 2800kw <span class="span1"><span class="span2">未来1小时预测冷量 </span>3400 kw</span>
             </div>
       </div>
+      <div class="an-center">
+          <bom-box></bom-box>
+      </div>
       <div class="an-bottom">
           <div id="leftLine" style="width:574px;height:350px;margin-right:;24px;">
           </div>
@@ -19,12 +22,14 @@
 
 <script>
 import echarts from 'echarts'
+import bomBox from './bomBox'
 export default {
     data(){
         return{
 
         }
     },
+    components:{bomBox},
     methods:{
         drawLeft(){
              var leftLine = echarts.init(document.getElementById('leftLine'))
@@ -178,6 +183,9 @@ export default {
             }
         }  
     }
+    .an-center{
+        display: none;
+    }
     .an-bottom{
         margin-top: 45px;
         display: flex;

+ 129 - 0
src/views/strategy/bomBox.vue

@@ -0,0 +1,129 @@
+<template>
+  <div class="bomb">
+    <div class="bomb-left">
+        <div class="bomb-left1">当前策略</div>
+        <div class="bomb-left2">应执行时间 13:00-13:20</div>
+        <div class="bomb-left3">策略可靠度</div>
+        <div id='circleEcharts' style="width:104px;height:104px"></div>
+    </div>
+    <div class="bomb-right">
+       <water-unit></water-unit>
+        <div class="bomb-right-center">
+           <span>数据传输情况</span>
+            <span class="bomb-span1">实际冷量 <span class="bomb-span3">2800</span>KW</span>
+            <span class="bomb-span2">未来一小时预测冷量 <span class="bomb-span3">3400</span> KW</span>
+        </div>
+        <div class="bomb-right-bottom">
+            <el-input placeholder="你可以在此处填写备注信息"> </el-input>
+        </div>
+
+    </div>
+  </div>
+</template>
+
+<script>
+import echarts from 'echarts'
+import waterUnit from './waterUnit'
+export default {
+    data(){
+        return{
+            
+        }
+    },
+    components:{waterUnit},
+    methods:{
+        drawCircle(){
+            var circleEcharts  = echarts.init(document.getElementById("circleEcharts"))
+            let option = {
+                tooltip: {
+                    trigger: 'item',
+                    formatter: '{a} <br/>{b}: {c} ({d}%)'
+                },
+                series: [
+                    {
+                        name: '访问来源',
+                        type: 'pie',
+                        radius: ['50%', '70%'],
+                        avoidLabelOverlap: false,
+                        label: {
+                            normal: {
+                                show: false,
+                                position: 'center'
+                            },
+                            emphasis: {
+                                show: true,
+                                textStyle: {
+                                    fontSize: '30',
+                                    fontWeight: 'bold'
+                                }
+                            }
+                        },
+                        labelLine: {
+                            normal: {
+                                show: false
+                            }
+                        },
+                        data: [
+                            {value: 79, name: '直接访问'},
+                            {value: 21, name: '邮件营销'}
+                        ]
+                    }
+                ]
+            };
+            circleEcharts.setOption(option)
+        }
+    },
+    mounted(){
+       this.drawCircle()
+    }
+
+}
+</script>
+
+<style lang='scss' scoped>
+.bomb{
+    width:100%;
+    height:300px;
+    margin-top: 10px;
+    display: flex;
+    .bomb-left{
+        width:240px;
+        padding-left:30px;
+        .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{
+        .bomb-right-center{
+            color:#646C73;
+            font-size:14px;
+            margin:20px 0;
+            .bomb-span1{
+                margin-left:88px;
+            }
+            .bomb-span2{
+                margin-left:44px;
+            }
+            .bomb-span3{
+                font-size: 18px;
+                color: #1F2429;
+            }
+        }
+        .bomb-right-bottom{
+            margin-top: 16px;
+        }
+    }
+}
+
+</style>

+ 5 - 91
src/views/strategy/index.vue

@@ -26,60 +26,7 @@
       </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>
+        <water-unit></water-unit>
         <animation-box></animation-box>
       </div>
     </div>
@@ -88,7 +35,8 @@
 
 <script>
 import Head from "../main/index";
-import animationBox from '../strategy/animationBox'
+import animationBox from './animationBox'
+import waterUnit from './waterUnit'
 export default {
   data() {
     return {
@@ -97,7 +45,7 @@ export default {
     };
   },
   components: {
-    Head,animationBox
+    Head,animationBox,waterUnit
   }
 };
 </script>
@@ -148,41 +96,7 @@ export default {
       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>

+ 101 - 0
src/views/strategy/waterUnit.vue

@@ -0,0 +1,101 @@
+<template>
+       <div class="water-unit">
+          <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>
+
+</template>
+
+<script>
+export default {
+
+}
+</script>
+
+<style lang='scss' scoped>
+.water-unit{
+      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>