1

src/App.vue

@@ -1,5 +1,28 @@
 <template>
+<div>
+    <div>
+        <input type="text" placeholder="请输入项目名称" v-model="projectName" />
+        <input type="text" placeholder="请输入盒子名称" v-model="boxName" />
+        <el-select v-model="online" placeholder="请选择在线状态">
+            <el-option
+                    v-for="item in onlineOptions"
+                    :key="item.value"
+                    :label="item.label"
+                    :value="item.value">
+            </el-option>
+        </el-select>
+        <el-select v-model="mode" placeholder="请选择运行模式">
+            <el-option
+                    v-for="item in modeOptions"
+                    :key="item.value"
+                    :label="item.label"
+                    :value="item.value">
+            </el-option>
+        </el-select>
+        <el-button>搜 索</el-button>
+    </div>
     <el-table
+            class="el-table"
             :data="tableData"
             :cell-class-name="addClass"
             row-key="id"
@@ -27,40 +50,40 @@
                 prop="online_status"
                 label="在线状态"
                 width="120">
-<!--            <template slot-scope="scope">-->
-<!--                            <div style="background:yellowgreen;color: black"-->
-<!--                                  v-if="scope.row.online_status === '在线'">{{scope.row.online_status}}</div>-->
-<!--                <div style="background:grey;color: black"-->
-<!--                      v-else>{{scope.row.online_status}}</div>-->
-<!--            </template>-->
+            <!--            <template slot-scope="scope">-->
+            <!--                            <div style="background:yellowgreen;color: black"-->
+            <!--                                  v-if="scope.row.online_status === '在线'">{{scope.row.online_status}}</div>-->
+            <!--                <div style="background:grey;color: black"-->
+            <!--                      v-else>{{scope.row.online_status}}</div>-->
+            <!--            </template>-->
         </el-table-column>
         <el-table-column
                 prop="running_mode"
                 label="运行模式"
                 width="100">
-<!--            <template slot-scope="scope">-->
-<!--                <div style="background:darkgreen;color: black"-->
-<!--                     v-if="scope.row.running_mode === '制冷'">{{scope.row.running_mode}}</div>-->
-<!--                <div style="background:orange;color: black"-->
-<!--                     v-if="scope.row.running_mode === '采暖'">{{scope.row.running_mode}}</div>-->
-<!--                <div style="background:yellow;color: black"-->
-<!--                     v-if="scope.row.running_mode === '预热'">{{scope.row.running_mode}}</div>-->
-<!--                <div style="background:#b6aee3;color: black"-->
-<!--                     v-if="scope.row.running_mode === '通风'">{{scope.row.running_mode}}</div>-->
+            <!--            <template slot-scope="scope">-->
+            <!--                <div style="background:darkgreen;color: black"-->
+            <!--                     v-if="scope.row.running_mode === '制冷'">{{scope.row.running_mode}}</div>-->
+            <!--                <div style="background:orange;color: black"-->
+            <!--                     v-if="scope.row.running_mode === '采暖'">{{scope.row.running_mode}}</div>-->
+            <!--                <div style="background:yellow;color: black"-->
+            <!--                     v-if="scope.row.running_mode === '预热'">{{scope.row.running_mode}}</div>-->
+            <!--                <div style="background:#b6aee3;color: black"-->
+            <!--                     v-if="scope.row.running_mode === '通风'">{{scope.row.running_mode}}</div>-->
 
-<!--            </template>-->
+            <!--            </template>-->
         </el-table-column>
         <el-table-column label="主机控制器">
             <el-table-column
                     prop="host_connect_status"
                     label="通讯状态"
                     width="120">
-<!--                <template slot-scope="scope">-->
-<!--                <div style="background:darkgreen;color: black"-->
-<!--                     v-if="scope.row.host_connect_status === '正常'">{{scope.row.host_connect_status}}</div>-->
-<!--                <div style="background:orange;color: black"-->
-<!--                     v-if="scope.row.host_connect_status === '异常'">{{scope.row.host_connect_status}}</div>-->
-<!--                </template>-->
+                <!--                <template slot-scope="scope">-->
+                <!--                <div style="background:darkgreen;color: black"-->
+                <!--                     v-if="scope.row.host_connect_status === '正常'">{{scope.row.host_connect_status}}</div>-->
+                <!--                <div style="background:orange;color: black"-->
+                <!--                     v-if="scope.row.host_connect_status === '异常'">{{scope.row.host_connect_status}}</div>-->
+                <!--                </template>-->
             </el-table-column>
             <el-table-column
                     prop="host_fault"
@@ -77,39 +100,39 @@
                     label="回水水温(℃)"
                     width="120">
             </el-table-column>
-          <el-table-column
-                  prop="host_temp_diff"
-                  label="温差"
-                  width="120">
-          </el-table-column>
-        </el-table-column>
-      <el-table-column label="新风控制器">
-        <el-table-column
-                prop="nt_connect_status"
-                label="通讯状态"
-                width="120">
-        </el-table-column>
-        <el-table-column
-                prop="nt_fault"
-                label="故障"
-                width="120">
-        </el-table-column>
-        <el-table-column
-                prop="nt_in_temp"
-                label="送风温度(℃)"
-                width="120">
-        </el-table-column>
-        <el-table-column
-                prop="nt_in_humidity"
-                label="送风湿度(%)"
-                width="120">
+            <el-table-column
+                    prop="host_temp_diff"
+                    label="温差"
+                    width="120">
+            </el-table-column>
         </el-table-column>
-        <el-table-column
-                prop="nt_dew_point"
-                label="露点(℃)"
-                width="120">
+        <el-table-column label="新风控制器">
+            <el-table-column
+                    prop="nt_connect_status"
+                    label="通讯状态"
+                    width="120">
+            </el-table-column>
+            <el-table-column
+                    prop="nt_fault"
+                    label="故障"
+                    width="120">
+            </el-table-column>
+            <el-table-column
+                    prop="nt_in_temp"
+                    label="送风温度(℃)"
+                    width="120">
+            </el-table-column>
+            <el-table-column
+                    prop="nt_in_humidity"
+                    label="送风湿度(%)"
+                    width="120">
+            </el-table-column>
+            <el-table-column
+                    prop="nt_dew_point"
+                    label="露点(℃)"
+                    width="120">
+            </el-table-column>
         </el-table-column>
-      </el-table-column>
 
         <el-table-column label="换热站控制器">
             <el-table-column
@@ -183,6 +206,20 @@
         </el-table-column>
 
     </el-table>
+    <el-pagination
+            @size-change="handleSizeChange"
+            @current-change="handleCurrentChange"
+            :current-page="currentPage"
+            :page-sizes="[10, 20, 30, 40]"
+            :page-size="pageSize"
+            layout="total, sizes, prev, pager, next, jumper"
+            :total="total"
+            align="right"
+    >
+    </el-pagination>
+</div>
+
+
 </template>
 
 <script>
@@ -209,10 +246,71 @@
                         return 'cell-grey';
                     }
                 }
+            },
+            handleSizeChange(val) {
+                this.pageSize = val;
+                this.queryData();
+            },
+            handleCurrentChange(val) {
+                this.currentPage = val;
+                this.queryData();
+            },
+            queryData() {
+                this.$http.get('/tableData', {
+                    params: {
+                        pageSize: this.pageSize,
+                        currentPage: this.currentPage
+                    }
+                }).then(res => {
+                    this.tableData = res.data.data;
+                    this.total = res.data.total;
+                })
             }
         },
         data() {
             return {
+
+                pageSize: 10,
+                currentPage: 1,
+                total: 0,
+                online: '',
+                onlineOptions: [
+                    {
+                        value: 'on',
+                        label: '在线'
+                    },
+                    {
+                        value: 'off',
+                        label: '离线'
+                    }
+                ],
+                mode: '',
+                modeOptions: [
+                    {
+                        value: 'shutdown',
+                        label: '关机'
+                    },
+                    {
+                        value: 'cool',
+                        label: '制冷'
+                    },
+                    {
+                        value: 'heat',
+                        label: '采暖'
+                    },
+                    {
+                        value: 'dehumidify',
+                        label: '除湿'
+                    },
+                    {
+                        value: 'ventilate',
+                        label: '通风'
+                    },
+                    {
+                        value: 'preheat',
+                        label: '预热'
+                    }
+                ],
                 tableData: [{
                     id:1,
                     prj_name: '滨江公寓',
@@ -575,4 +673,37 @@
     .cell-grey{
         background: #9fa09f;
     }
+    /* el-table样式 */
+    .el-table {
+        font-size: 14px;
+        color: #606266;
+        background-color: #FFFFFF;
+        border: 1px solid #EBEBEB;
+    }
+
+    /* el-table的表头样式 */
+    .el-table__header {
+        background-color: #F8F8F8;
+        color: #606266;
+        font-weight: bold;
+        border-bottom: 1px solid #EBEBEB;
+    }
+
+    /* el-table的表格内容样式 */
+    .el-table__body {
+        background-color: #FFFFFF;
+    }
+
+    /* el-table的表格行样式 */
+    .el-table__row {
+        background-color: #FFFFFF;
+        border-bottom: 1px solid #EBEBEB;
+    }
+
+    /* el-table的表格单元格样式 */
+    .el-table__cell {
+        padding: 10px;
+        text-align: center;
+        color: #606266;
+    }
 </style>