基础

src/components/Task.vue

@@ -0,0 +1,49 @@
+<template>
+    <div class="Task">
+        <el-row>
+            <el-col :span="24">
+                <el-col :span="6"><em>XXXX</em></el-col>
+                <el-col :span="18">
+                    <el-select v-model="value" placeholder="请选择">
+                        <el-option
+                                v-for="item in options"
+                                :key="item.value"
+                                :label="item.label"
+                                :value="item.value">
+                        </el-option>
+                    </el-select>
+                </el-col>
+            </el-col>
+        </el-row>
+    </div>
+</template>
+
+<script>
+    export default {
+        data() {
+            return {
+                options: [{
+                    value: '选项1',
+                    label: '黄金糕'
+                }, {
+                    value: '选项2',
+                    label: '双皮奶'
+                }, {
+                    value: '选项3',
+                    label: '蚵仔煎'
+                }, {
+                    value: '选项4',
+                    label: '龙须面'
+                }, {
+                    value: '选项5',
+                    label: '北京烤鸭'
+                }],
+                value: ''
+            }
+        }
+    }
+</script>
+
+<style scoped>
+
+</style>

src/views/Main.vue

@@ -3,6 +3,20 @@
         <div class="lt">
             <div class="cube">
                 <!--h5区域-->
+                <div class="regionList">
+                    <ul>
+                        <el-row :gutter="21">
+                            <el-col :span="8" v-for="(loft,i) in loftList">
+                                <div :class="[{'active':loftIndex == i+1 }]" @click="ClickGetInfo(1,i)">
+                                    <div class="grid-content bg-purple"> {{loft.Name}}</div>
+                                </div>
+                            </el-col>
+                        </el-row>
+                    </ul>
+                </div>
+            </div>
+            <div class="cube">
+                <Task></Task>
             </div>
         </div>
         <div class="md">
@@ -12,6 +26,7 @@
             <Scan :scan-rs="ScanRs"></Scan>
         </div>
         <div class="rt">
+            <SmallRader :total-rs="totalRs"></SmallRader>
             <transition name="el-zoom-in-center">
                 <div class="cube">
                     <HistoryRecord :history-rs="historyRs"></HistoryRecord>
@@ -23,6 +38,7 @@
 
 <script>
     import Console from '@/components/Console.vue'
+    import Task from '@/components/Task.vue'
     import WifiSign from '@/components/WifiSign.vue'
     import Scan from '@/components/Scan.vue'
     import HistoryRecord from '@/components/HistoryRecord.vue'
@@ -60,6 +76,34 @@
                 historyRs:[],
                 totalRs:[],
                 equipRs:[],
+                loftList:[],
+                loftIndex:0,
+            }
+        },
+        mounted(){
+
+        },
+        methods:{
+            init(){
+                this.getDate()
+            },
+            getDate(){
+
+            },
+            // Wifi柱状图信息传入探测器Id
+            getDetectorWifixyInfolist(postdata) {
+                let that = this;
+                DetectorWifixyInfolist(postdata).then(res => {
+                    let json = res;
+                    if (json.Code == 0) {
+                        that.WifiRs = json;
+                    } else {
+                        that.$message.error(json.Memo + '，错误代码：' + json.Code);
+                    }
+                })
+            },
+            ClickGetInfo(level, index){
+                this.loftIndex = parseInt(index);
             }
         },
         components: {
@@ -68,6 +112,8 @@
             HistoryRecord,
             EquipInfo,
             runTimeRecord,
+            Task,
+            SmallRader,
         }
     }
 </script>