1

src/App5.vue

@@ -27,12 +27,12 @@
     <div >
 <!--      <p>从第一行和第二例开始合并</p>-->
 <!--      <pre>tableMergeElement(data, { range: { row: 1, col: 2 } })</pre>-->
-      <el-table style="width: 100%;" :data="data1" :span-method="tableMergeElement(data1, { range: { row: [0, 11],col:[0,14] } })" border>
+      <el-table style="width: 100%;" :data="data1" :span-method="tableMergeElement(data1, { range: { row: [0, 11],col:[0,30] } })" border>
         <!--        <el-table-column v-for="col in columns" :key="col.prop" v-bind="col" />-->
-        <el-table-column prop="id" label="序号" align=‘center’  ></el-table-column>
-        <el-table-column prop="projectName" label="项目名称" min-width="100%" align=‘center’></el-table-column>
-        <el-table-column prop="boxName" label="盒子名称" align=‘center’></el-table-column>
-        <el-table-column prop="onlineStatus" label="在线状态" align=‘center’>
+        <el-table-column prop="id" label="序号" align='center'  ></el-table-column>
+        <el-table-column prop="projectName" label="项目名称" min-width="100%" align='center'></el-table-column>
+        <el-table-column prop="boxName" label="盒子名称" align='center'></el-table-column>
+        <el-table-column prop="onlineStatus" label="在线状态" align='center'>
           <template slot-scope="scope">
             <div style="background:yellowgreen;color: black;text-align: center"
                  v-if="scope.row.onlineStatus === '在线'">{{scope.row.onlineStatus}}</div>
@@ -40,7 +40,7 @@
                  v-else>{{scope.row.onlineStatus}}</div>
           </template>
         </el-table-column>
-        <el-table-column prop="runMode" label="运行模式" align=‘center’>
+        <el-table-column prop="runMode" label="运行模式" align='center'>
           <template slot-scope="scope">
             <div style="background:darkgreen;color: black;text-align: center"
                  v-if="scope.row.runMode === '制冷'">{{scope.row.runMode}}</div>
@@ -56,9 +56,9 @@
 
         </el-table-column>
 
-                <el-table-column prop="host" label="主机控制器" align=‘center’>
-                  <el-table-column prop="host_order" label="编号" align=‘center’ style="text-align: center"></el-table-column>
-                  <el-table-column prop="host_connect_status" label="通讯状态" align=‘center’>
+                <el-table-column prop="host" label="主机控制器" align='center'>
+                  <el-table-column prop="host_order" label="编号" align='center' style="text-align: center"></el-table-column>
+                  <el-table-column prop="host_connect_status" label="通讯状态" align='center'>
                     <template slot-scope="scope">
                       <div style="background:yellowgreen;color: black;text-align: center;"
                            v-if="scope.row.host_connect_status === '正常'">{{scope.row.host_connect_status}}</div>
@@ -68,7 +68,7 @@
                            v-if="scope.row.host_connect_status === '-'">-</div>
                     </template>
                   </el-table-column>
-                  <el-table-column prop="host_fault" label="故障" align=‘center’>
+                  <el-table-column prop="host_fault" label="故障" align='center'>
                     <template slot-scope="scope">
                       <div style="background:yellow;color: black;text-align: center;"
                            v-if="scope.row.host_fault === '有'">{{scope.row.host_fault}}</div>
@@ -78,7 +78,7 @@
                            v-if="scope.row.host_fault === '-'">-</div>
                     </template>
                   </el-table-column>
-                  <el-table-column prop="host_su_temp" label="供水水温(℃)" align=‘center’>
+                  <el-table-column prop="host_su_temp" label="供水水温(℃)" align='center'>
                     <template slot-scope="scope">
                       <div style="background:yellow;color: black;text-align: center;"
                            v-if="scope.row.host_su_temp <30 &&(scope.row.running_mode==='采暖' || scope.row.running_mode==='预热')">{{scope.row.host_su_temp}}</div>
@@ -88,7 +88,7 @@
 
                     </template>
                   </el-table-column>
-                  <el-table-column prop="host_re_temp" label="回水水温(℃)" align=‘center’>
+                  <el-table-column prop="host_re_temp" label="回水水温(℃)" align='center'>
                     <template slot-scope="scope">
                       <div style="background:yellow;color: black;text-align: center;"
                            v-if="scope.row.host_re_temp <30 &&(scope.row.running_mode==='采暖' || scope.row.running_mode==='预热')">{{scope.row.host_re_temp}}</div>
@@ -99,7 +99,7 @@
                     </template>
 
                   </el-table-column>
-                  <el-table-column prop="host_temp_diff" label="温差" align=‘center’>
+                  <el-table-column prop="host_temp_diff" label="温差" align='center'>
                     <template slot-scope="scope">
                       <div style="background:yellow;color: black;text-align: center;"
                            v-if="scope.row.host_temp_diff >5">{{scope.row.host_temp_diff}}</div>
@@ -112,24 +112,35 @@
                   </el-table-column>
                 </el-table-column>
 
-                <el-table-column prop="newTrend" label="新风机控制器" align=‘center’>
-                  <el-table-column prop="nt_order" label="编号" align=‘center’></el-table-column>
-                  <el-table-column prop="nt_connect_status" label="通讯状态" align=‘center’></el-table-column>
-                  <el-table-column prop="nt_fault" label="故障" align=‘center’></el-table-column>
-                  <el-table-column prop="nt_in_temp" label="送风温度(℃)" align=‘center’></el-table-column>
-                  <el-table-column prop="nt_in_humidity" label="送风湿度(%)" align=‘center’></el-table-column>
-                  <el-table-column prop="nt_dew_point" label="露点(℃)" align=‘center’></el-table-column>
+                <el-table-column prop="newTrend" label="新风机控制器" align='center'>
+                  <el-table-column prop="nt_order" label="编号" align='center'></el-table-column>
+                  <el-table-column prop="nt_connect_status" label="通讯状态" align='center'></el-table-column>
+                  <el-table-column prop="nt_fault" label="故障" align='center'></el-table-column>
+                  <el-table-column prop="nt_in_temp" label="送风温度(℃)" align='center'></el-table-column>
+                  <el-table-column prop="nt_in_humidity" label="送风湿度(%)" align='center'></el-table-column>
+                  <el-table-column prop="nt_dew_point" label="露点(℃)" align='center'></el-table-column>
                 </el-table-column>
 
-        <!--        <el-table-column prop="hex" label="换热站控制器" align=‘center’>-->
-        <!--          <el-table-column prop="hex_order" label="编号" align=‘center’></el-table-column>-->
-        <!--          <el-table-column prop="hex_connect_status" label="通讯状态" align=‘center’></el-table-column>-->
-        <!--          <el-table-column prop="hex_fault" label="故障" align=‘center’></el-table-column>-->
-        <!--          <el-table-column prop="hex_su_temp" label="供水水温(℃)" align=‘center’></el-table-column>-->
-        <!--          <el-table-column prop="hex_re_temp" label="回水水温(℃)" align=‘center’></el-table-column>-->
-        <!--          <el-table-column prop="hex_temp_diff" label="温差" align=‘center’></el-table-column>-->
+        <!--        <el-table-column prop="hex" label="换热站控制器" align='center'>-->
+        <!--          <el-table-column prop="hex_order" label="编号" align='center'></el-table-column>-->
+        <!--          <el-table-column prop="hex_connect_status" label="通讯状态" align='center'></el-table-column>-->
+        <!--          <el-table-column prop="hex_fault" label="故障" align='center'></el-table-column>-->
+        <!--          <el-table-column prop="hex_su_temp" label="供水水温(℃)" align='center'></el-table-column>-->
+        <!--          <el-table-column prop="hex_re_temp" label="回水水温(℃)" align='center'></el-table-column>-->
+        <!--          <el-table-column prop="hex_temp_diff" label="温差" align='center'></el-table-column>-->
         <!--        </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>
 <!--    <div class="box">-->
 <!--      <p>多行合并</p>-->
@@ -227,6 +238,9 @@ import tableMergeElement from '@table-merge/element-ui';
 export default {
   data() {
     return {
+      pageSize: 12,
+      currentPage: 1,
+      total: 0,
       data: [
         { id: 1, a: 8, b: 8, c: 2, d: 0 },
         { id: 2, a: 2, b: 4, c: 4, d: 5 },
@@ -235,18 +249,18 @@ export default {
         { id: 5, a: 5, b: 3, c: 3, d: 2 }
       ],
       data1: [
-        { id: 1, projectName: '铂睿思雨花展厅', boxName: '展厅一', onlineStatus: '在线', runMode: '制冷' ,host_order:1,host_connect_status:'正常',host_fault:'有',host_su_temp:11.1,host_re_temp:18.1,host_temp_diff:1,nt_order:1,nt_connect_status:'异常',nt_fault:'有',nt_in_temp:19.8,nt_in_humidity:68.7,nt_dew_point:16},
-        { id: 2, projectName: '铂睿思雨花展厅', boxName: '展厅一', onlineStatus: '离线', runMode: '采暖' ,host_order:2,host_connect_status:'异常',host_fault:'无',host_su_temp:11.2,host_re_temp:18.2,host_temp_diff:2,nt_order:2,nt_connect_status:'正常',nt_fault:'无',nt_in_temp:19,nt_in_humidity:68,nt_dew_point:16},
-        { id: 1, projectName: '铂睿思雨花展厅', boxName: '展厅一', onlineStatus: '在线', runMode: '制冷' ,host_order:3,host_connect_status:'正常',host_fault:'有',host_su_temp:11.3,host_re_temp:18.3,host_temp_diff:1,nt_order:2,nt_connect_status:'正常',nt_fault:'无',nt_in_temp:19,nt_in_humidity:68,nt_dew_point:16},
-        { id: 2, projectName: '铂睿思雨花展厅', boxName: '展厅一', onlineStatus: '离线', runMode: '采暖' ,host_order:4,host_connect_status:'异常',host_fault:'无',host_su_temp:11.4,host_re_temp:18.4,host_temp_diff:2,nt_order:2,nt_connect_status:'正常',nt_fault:'无',nt_in_temp:19,nt_in_humidity:68,nt_dew_point:16},
-        { id: 3, projectName: '铂睿思雨花展厅', boxName: '展厅二', onlineStatus: '在线', runMode: '除湿' ,host_order:2,host_connect_status:'正常',host_fault:'有',host_su_temp:11.5,host_re_temp:18.5,host_temp_diff:1,nt_order:1,nt_connect_status:'异常',nt_fault:'有',nt_in_temp:19.1,nt_in_humidity:78,nt_dew_point:16},
-        { id: 4, projectName: '北京中粮祥云', boxName: '祥云一', onlineStatus: '离线', runMode: '预热' ,host_order:1,host_connect_status:'异常',host_fault:'无',host_su_temp:11.6,host_re_temp:18.6,host_temp_diff:3,nt_order:3,nt_connect_status:'正常',nt_fault:'无',nt_in_temp:19.2,nt_in_humidity:88,nt_dew_point:16},
-        { id: 5, projectName: '北京中粮祥云', boxName: '祥云二', onlineStatus: '在线', runMode: '通风' ,host_order:2,host_connect_status:'正常',host_fault:'有',host_su_temp:11.7,host_re_temp:18.7,host_temp_diff:1,nt_order:2,nt_connect_status:'异常',nt_fault:'有',nt_in_temp:19.3,nt_in_humidity:79,nt_dew_point:16},
-        { id: 6, projectName: '天津温莎堡展厅', boxName: '温莎堡展厅', onlineStatus: '离线', runMode: '制冷' ,host_order:3,host_connect_status:'异常',host_fault:'无',host_su_temp:11.8,host_re_temp:18.8,host_temp_diff:3,nt_order:3,nt_connect_status:'正常',nt_fault:'无',nt_in_temp:19.4,nt_in_humidity:68,nt_dew_point:16},
-        { id: 7, projectName: '御江金城2-107', boxName: '金城107', onlineStatus: '在线', runMode: '采暖' ,host_order:1,host_connect_status:'正常',host_fault:'有',host_su_temp:11.9,host_re_temp:18.9,host_temp_diff:2,nt_order:1,nt_connect_status:'异常',nt_fault:'有',nt_in_temp:19.5,nt_in_humidity:78,nt_dew_point:16},
-        { id: 8, projectName: '国华印象15-102', boxName: '国华102', onlineStatus: '离线', runMode: '除湿' ,host_order:2,host_connect_status:'异常',host_fault:'无',host_su_temp:12.0,host_re_temp:19.0,host_temp_diff:3,nt_order:2,nt_connect_status:'正常',nt_fault:'无',nt_in_temp:19.6,nt_in_humidity:88,nt_dew_point:16},
-        { id: 9, projectName: '无庶3-102', boxName: '无庶102', onlineStatus: '在线', runMode: '预热' ,host_order:3,host_connect_status:'正常',host_fault:'有',host_su_temp:12.1,host_re_temp:19.1,host_temp_diff:1,nt_order:3,nt_connect_status:'异常',nt_fault:'有',nt_in_temp:19.7,nt_in_humidity:58,nt_dew_point:16},
-        { id: 10, projectName: '揽江府1-14-6', boxName: '揽江府6', onlineStatus: '离线', runMode: '通风' ,host_order:4,host_connect_status:'异常',host_fault:'无',host_su_temp:12.2,host_re_temp:19.2,host_temp_diff:3,nt_order:4,nt_connect_status:'正常',nt_fault:'无',nt_in_temp:19.8,nt_in_humidity:88,nt_dew_point:16}
+        { id: 1, projectName: '铂睿思雨花展厅', boxName: '展厅一', onlineStatus: '在线', runMode: '制冷' ,host_order:1,host_connect_status:'正常',host_fault:'有',host_su_temp:11.1,host_re_temp:18.1,host_temp_diff:1,nt_order:1,nt_connect_status:'异常',nt_fault:'有',nt_in_temp:19.8,nt_in_humidity:68.7,nt_dew_point:16.1},
+        { id: 2, projectName: '铂睿思雨花展厅', boxName: '展厅一', onlineStatus: '离线', runMode: '采暖' ,host_order:2,host_connect_status:'异常',host_fault:'无',host_su_temp:11.2,host_re_temp:18.2,host_temp_diff:2,nt_order:2,nt_connect_status:'正常',nt_fault:'无',nt_in_temp:19,nt_in_humidity:68,nt_dew_point:16.2},
+        { id: 3, projectName: '铂睿思雨花展厅', boxName: '展厅一', onlineStatus: '在线', runMode: '制冷' ,host_order:3,host_connect_status:'正常',host_fault:'有',host_su_temp:11.3,host_re_temp:18.3,host_temp_diff:1,nt_order:2,nt_connect_status:'正常',nt_fault:'无',nt_in_temp:19,nt_in_humidity:68,nt_dew_point:16.2},
+        { id: 4, projectName: '铂睿思雨花展厅', boxName: '展厅一', onlineStatus: '离线', runMode: '采暖' ,host_order:4,host_connect_status:'异常',host_fault:'无',host_su_temp:11.4,host_re_temp:18.4,host_temp_diff:2,nt_order:2,nt_connect_status:'正常',nt_fault:'无',nt_in_temp:19,nt_in_humidity:68,nt_dew_point:16.2},
+        { id: 5, projectName: '铂睿思雨花展厅', boxName: '展厅二', onlineStatus: '在线', runMode: '除湿' ,host_order:2,host_connect_status:'正常',host_fault:'有',host_su_temp:11.5,host_re_temp:18.5,host_temp_diff:1,nt_order:1,nt_connect_status:'异常',nt_fault:'有',nt_in_temp:19.1,nt_in_humidity:78,nt_dew_point:16.3},
+        { id: 6, projectName: '北京中粮祥云', boxName: '祥云一', onlineStatus: '离线', runMode: '预热' ,host_order:1,host_connect_status:'异常',host_fault:'无',host_su_temp:11.6,host_re_temp:18.6,host_temp_diff:3,nt_order:3,nt_connect_status:'正常',nt_fault:'无',nt_in_temp:19.2,nt_in_humidity:88,nt_dew_point:16.4},
+        { id: 7, projectName: '北京中粮祥云', boxName: '祥云二', onlineStatus: '在线', runMode: '通风' ,host_order:2,host_connect_status:'正常',host_fault:'有',host_su_temp:11.7,host_re_temp:18.7,host_temp_diff:1,nt_order:2,nt_connect_status:'异常',nt_fault:'有',nt_in_temp:19.3,nt_in_humidity:79,nt_dew_point:16.5},
+        { id: 8, projectName: '天津温莎堡展厅', boxName: '温莎堡展厅', onlineStatus: '离线', runMode: '制冷' ,host_order:3,host_connect_status:'异常',host_fault:'无',host_su_temp:11.8,host_re_temp:18.8,host_temp_diff:3,nt_order:3,nt_connect_status:'正常',nt_fault:'无',nt_in_temp:19.4,nt_in_humidity:68,nt_dew_point:16.6},
+        { id: 9, projectName: '御江金城2-107', boxName: '金城107', onlineStatus: '在线', runMode: '采暖' ,host_order:1,host_connect_status:'正常',host_fault:'有',host_su_temp:11.9,host_re_temp:18.9,host_temp_diff:2,nt_order:1,nt_connect_status:'异常',nt_fault:'有',nt_in_temp:19.5,nt_in_humidity:78,nt_dew_point:16.7},
+        { id: 10, projectName: '国华印象15-102', boxName: '国华102', onlineStatus: '离线', runMode: '除湿' ,host_order:2,host_connect_status:'异常',host_fault:'无',host_su_temp:12.0,host_re_temp:19.0,host_temp_diff:3,nt_order:2,nt_connect_status:'正常',nt_fault:'无',nt_in_temp:19.6,nt_in_humidity:88,nt_dew_point:16.8},
+        { id: 11, projectName: '无庶3-102', boxName: '无庶102', onlineStatus: '在线', runMode: '预热' ,host_order:3,host_connect_status:'正常',host_fault:'有',host_su_temp:12.1,host_re_temp:19.1,host_temp_diff:1,nt_order:3,nt_connect_status:'异常',nt_fault:'有',nt_in_temp:19.7,nt_in_humidity:58,nt_dew_point:16.9},
+        { id: 12, projectName: '揽江府1-14-6', boxName: '揽江府6', onlineStatus: '离线', runMode: '通风' ,host_order:4,host_connect_status:'异常',host_fault:'无',host_su_temp:12.2,host_re_temp:19.2,host_temp_diff:3,nt_order:4,nt_connect_status:'正常',nt_fault:'无',nt_in_temp:19.8,nt_in_humidity:88,nt_dew_point:16.1}
       ],
       columns: [
         { prop: 'id', label: 'ID', align: 'center' },
@@ -338,6 +352,25 @@ export default {
       }
       //console.log(column.property)
     },
+    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;
+      })
+    },
     addClass({row,column,rowIndex,columnIndex}){
       // console.log(columnIndex)
       // console.log(row,column,rowIndex)