Browse Source

添加主要设备清单跳转详情页

zhangyu 4 years ago
parent
commit
96c12cccc3
1 changed files with 177 additions and 80 deletions
  1. 177 80
      src/views/equipmentFacilities/MainEquipment.vue

+ 177 - 80
src/views/equipmentFacilities/MainEquipment.vue

@@ -1,6 +1,10 @@
 <template>
   <div class="asset-detail">
-    <van-nav-bar title="维修及维保事项" @click-left="backPage" @click-right="handleRightClick">
+    <van-nav-bar
+      title="主要设备清单"
+      @click-left="backPage"
+      @click-right="handleRightClick"
+    >
       <template #left>
         <van-icon name="arrow-left" size="18" color="#333333" />
       </template>
@@ -8,38 +12,95 @@
         <i class="iconfont wanda-scan"></i>
       </template>
     </van-nav-bar>
+    <van-tabs
+      v-model="active"
+      class="other-tabs"
+      color="#025BAA"
+      @change="changeTab"
+      title-active-color="#025BAA"
+      :line-width="60"
+    >
+      <van-tab title="设备信息"> </van-tab>
+      <van-tab title="重要维保"> </van-tab>
+      <van-tab title="重要维修"> </van-tab>
+    </van-tabs>
     <div class="asset-information">
-      <div class='equipment-page'>
+      <div class="equipment-page">
         <!-- 搜索框 -->
-        <div class='equipment-search-container'>
-          <van-search class='equipment-search' v-model='keyword' placeholder='请输入设备名称' @search='getData' />
+        <div class="equipment-search-container">
+          <van-search
+            class="equipment-search"
+            v-model="keyword"
+            placeholder="请输入设备名称"
+            @search="getData"
+          />
         </div>
-        <div class='equipment-list' v-if='dataList.length'>
-          <!-- <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
-            <van-cell v-for="item in list" :key="item" :title="item" />
-          </van-list> -->
-          <div class='info-box' v-for="(data, index) in dataList" :key="data.workorderid || data.wonum + index">
+        <div class="equipment-list" v-if="dataList.length">
+          <van-list
+            v-model="loading"
+            :finished="finished"
+            finished-text="没有更多了"
+            @load="onLoad"
+          >
+            <van-cell v-for="(data, index) in dataList" :key="index" @click="handleClickToDetail(data)">
+              <template>
+                <h2 class="info-title">
+                  {{ `${data.type_name} (${data.sl})` }}
+                </h2>
+                <div class="cell">
+                  <span class="left">{{ "型\u3000\u3000号:" }}</span>
+                  <span class="right">{{ data.sbxh || "--" }}</span>
+                </div>
+                <div class="cell">
+                  <span class="left">{{ "品\u3000\u3000牌:" }}</span>
+                  <span class="right">{{ data.brand || "--" }}</span>
+                </div>
+                <div class="cell">
+                  <span class="left">{{ "生产厂商:" }}</span>
+                  <span class="right">{{ data.manufacturer || "--" }}</span>
+                </div>
+                <div class="cell">
+                  <span class="left"><i class="iconfont wanda-dingwei" style="font-size: 14px;color: #C3C7CB;"></i> {{ "楼 层:" }}</span>
+                  <span class="right">{{ data.floorcode || "--" }}</span>
+                </div>
+              </template>
+            </van-cell>
+            <!-- <van-cell v-for="(data, index) in dataList" :key="index" :title="index" /> -->
+          </van-list>
+          <!-- <div
+            class="info-box"
+            v-for="(data, index) in dataList"
+            :key="index"
+          >
             <div class="info-box-border">
-              <h2 class="info-title">{{data.sbmc || '--'}}</h2>
-              <div class='cell'>
-                <span class='left'>{{'型\u3000\u3000号:'}}</span>
-                <span class='right'>{{data.assetnum || '--'}}</span>
+              <h2 class="info-title">{{ `${data.type_name} (${data.sl})` }}</h2>
+              <div class="cell">
+                <span class="left">{{ "型\u3000\u3000号:" }}</span>
+                <span class="right">{{ data.sbxh || "--" }}</span>
               </div>
-              <div class='cell'>
-                <span class='left'>{{'品\u3000\u3000牌:'}}</span>
-                <span class='right'>{{data.matters || '--'}}</span>
+              <div class="cell">
+                <span class="left">{{ "品\u3000\u3000牌:" }}</span>
+                <span class="right">{{ data.brand || "--" }}</span>
               </div>
-              <div class='cell'>
-                <span class='left'>{{'生产厂商:'}}</span>
-                <span class='right'>{{data.cost || '--'}}</span>
+              <div class="cell">
+                <span class="left">{{ "生产厂商:" }}</span>
+                <span class="right">{{ data.manufacturer || "--" }}</span>
               </div>
             </div>
-          </div>
+          </div> -->
         </div>
         <!-- 无数据 -->
-        <van-empty class='m-empty' v-if='!dataList.length' description='暂无数据'>
+        <van-empty
+          class="m-empty"
+          v-if="!dataList.length"
+          description="暂无数据"
+        >
           <template #image>
-            <img class='no-data' src='../../assets/images/search_null.png' alt />
+            <img
+              class="no-data"
+              src="../../assets/images/search_null.png"
+              alt
+            />
           </template>
         </van-empty>
       </div>
@@ -52,16 +113,33 @@
         <div class="sbss">
           <h1 class="title">楼层</h1>
           <div class="system-btn-container">
-            <div class="system-btn" v-for="(item, index) in fillinList" :key="index">
-              <van-button class="m-btn" :class="item.active" @click="changeFillinDate(item)">{{ item.text }}
+            <div
+              class="system-btn"
+              v-for="(item, index) in fillinList"
+              :key="index"
+            >
+              <van-button
+                class="m-btn"
+                :class="item.active"
+                @click="changeFillinDate(item)"
+                >{{ item.text }}
               </van-button>
             </div>
           </div>
         </div>
         <!-- <div class="divider"></div> -->
         <div class="footer">
-          <van-button size="large" color="#025BAA" plain type="info" @click="reset">重置</van-button>
-          <van-button size="large" color="#025BAA" type="info" @click="confirm">确定</van-button>
+          <van-button
+            size="large"
+            color="#025BAA"
+            plain
+            type="info"
+            @click="reset"
+            >重置</van-button
+          >
+          <van-button size="large" color="#025BAA" type="info" @click="confirm"
+            >确定</van-button
+          >
         </div>
       </div>
     </van-popup>
@@ -78,7 +156,14 @@ import RepairMaintenance from "@/components/equipmentFacilities/RepairMaintenanc
 import { queryStatistics } from "@/api/equipmentList.js";
 import { getUpdateDetail1, getUpdateDetail4 } from "@/api/overview";
 import moment from "moment";
-Vue.use(NavBar).use(Tab).use(Tabs).use(Popup).use(Button).use(Toast).use(List).use(Cell);
+Vue.use(NavBar)
+  .use(Tab)
+  .use(Tabs)
+  .use(Popup)
+  .use(Button)
+  .use(Toast)
+  .use(List)
+  .use(Cell);
 export default {
   name: "MaintenanceRecordView",
   props: {},
@@ -88,6 +173,7 @@ export default {
   },
   data() {
     return {
+      active: 0,
       showPopup: false,
       dataList: [],
       keyword: "",
@@ -107,8 +193,8 @@ export default {
     };
   },
   props: {},
-  beforeMount() { },
-  mounted() { },
+  beforeMount() {},
+  mounted() {},
   methods: {
     backPage() {
       if (this.$route.query.first) {
@@ -117,6 +203,10 @@ export default {
         this.$router.go(-1);
       }
     },
+    // 切换tab
+    changeTab(active) {
+      console.log(this.active);
+    },
     /**
      * 点击右侧筛选
      */
@@ -129,16 +219,14 @@ export default {
       this.dataList = [];
       this.finished = false;
       let data = {
-        plazaId: this.plazaId,
-        // major: '弱电',
-        onlyMainAsset: true,
-        page: this.page,
-        size: this.size,
-      },
+          plazaId: this.plazaId,
+          onlyMainAsset: true,
+          page: this.page,
+          size: this.size,
+        },
         postParams = {
-            tab_code: 'gd01'
-        //   system_code: this.smsxt
-        }
+          tab_code: "gd01",
+        };
       //查询关键字(设备名称)
       if (this.keyword) {
         data.keyword = `${this.keyword}:type_name`;
@@ -184,9 +272,7 @@ export default {
       //     default:
       //       break;
       //   }
-      queryStatistics({ data, postParams }).then(res => {
-        console.log(res)
-        debugger
+      queryStatistics({ data, postParams }).then((res) => {
         if (res.data.result == "success" && res.data.data) {
           this.dataList = res.data.data;
         }
@@ -194,25 +280,25 @@ export default {
         if (this.dataList.length >= res.data.count) {
           this.finished = true;
         }
-      })
+      });
     },
     onLoad() {
       // 异步更新数据
       this.page++;
       let data = {
-        plazaId: this.plazaId,
-        onlyMainAsset: true,
-        page: this.page,
-        size: this.size,
-      },
+          plazaId: this.plazaId,
+          onlyMainAsset: true,
+          page: this.page,
+          size: this.size,
+        },
         postParams = {
-          system_code: this.smsxt
-        }
+          tab_code: "gd01",
+        };
       //查询关键字(设备名称)
       if (this.keyword) {
         data.keyword = `${this.keyword}:type_name`;
       }
-      queryStatistics({ data, postParams }).then(res => {
+      queryStatistics({ data, postParams }).then((res) => {
         if (res.data.result == "success" && res.data.data) {
           this.dataList = this.dataList.concat(res.data.data);
         }
@@ -224,7 +310,11 @@ export default {
         if (this.dataList.length >= res.data.count) {
           this.finished = true;
         }
-      })
+      });
+    },
+    // 点击卡片跳转
+    handleClickToDetail(data) {
+      this.$router.push({ path: "/mainEquipmentDetail", params: data});
     },
     // 修改楼层
     changeFillinDate(data) {
@@ -289,7 +379,7 @@ export default {
   width: 100%;
   height: 100%;
   .asset-information {
-    height: calc(100% - 46px);
+    height: calc(100% - 90px);
     background: #f5f6f7;
     overflow-y: auto;
     .equipment-page {
@@ -321,34 +411,24 @@ export default {
         font-size: 14px;
         font-weight: 400;
         color: #333333;
-        .info-box {
+        .info-title {
+          font-size: 16px;
+          color: #333333;
+        }
+        .cell {
           width: 100%;
-          overflow: auto;
-          padding: 0 16px;
-          background-color: #ffffff;
-          .info-box-border {
-            padding: 16px 0;
-            border-bottom: 1px solid #e6e6e6;
-            .info-title {
-              font-size: 16px;
-              color: #333333;
-            }
-            .cell {
-              width: 100%;
-              min-height: 20px;
-              margin-top: 12px;
-              display: flex;
-              .left {
-                width: 75px;
-                color: #666;
-                font-size: 14px;
-              }
-              .right {
-                flex: 1;
-                color: #333;
-                font-size: 14px;
-              }
-            }
+          min-height: 20px;
+          margin-top: 12px;
+          display: flex;
+          .left {
+            width: 75px;
+            color: #666;
+            font-size: 14px;
+          }
+          .right {
+            flex: 1;
+            color: #333;
+            font-size: 14px;
           }
         }
       }
@@ -374,6 +454,23 @@ export default {
     }
   }
 
+  .other-tabs {
+    /deep/ .van-tab__text {
+      font-size: 16px;
+    }
+
+    /deep/ .van-tabs__wrap {
+      height: 45px;
+      border-bottom: 1px solid #eaeaea;
+      .van-tabs__nav--line {
+        box-sizing: content-box;
+        height: 100%;
+        width: 80%;
+        margin: 0 auto;
+      }
+    }
+  }
+
   // 筛选弹窗
   .m-popup-container {
     width: 80%;
@@ -381,7 +478,7 @@ export default {
     padding: 55px 20px 10px 20px;
     .m-popup {
       width: 100%;
-      height: calc(100% - 80px);
+      height: calc(100% - 81px);
       display: flex;
       flex-direction: column;
       .title {