Przeglądaj źródła

'添加维修及维保事项页面'

zhangyu 4 lat temu
rodzic
commit
e10f1ac514

+ 190 - 0
src/components/equipmentFacilities/RepairMaintenance.vue

@@ -0,0 +1,190 @@
+
+
+<template>
+  <div class='equipment-page'>
+    <!-- 搜索框 -->
+    <div class='equipment-search-container'>
+      <van-search class='equipment-search' v-model='keyword' placeholder='请输入事项类型' @search='onSearch' />
+      <!-- TODO: 空状态 自定义图标 -->
+      <!-- <template #action>
+                <div class='search' @click='onSearch'>搜索</div>
+                </template>-->
+      <!-- </van-search> -->
+    </div>
+    <!-- 维保列表 -->
+    <div class='equipment-list' v-if='list.length'>
+      <!-- 维保 -->
+      <div class='info-box' v-for="(data, index) in list" :key="data.workorderid || data.wonum + index">
+        <div class="info-box-border">
+          <h2 class="info-title">{{data.sbmc || '--'}}</h2>
+          <div class='cell'>
+            <span class='left'>设备内码:</span>
+            <span class='right'>{{data.assetnum || '--'}}</span>
+          </div>
+          <div class='cell'>
+            <span class='left'>事项类型:</span>
+            <span class='right'>{{data.matters || '--'}}</span>
+          </div>
+          <div class='cell'>
+            <span class='left'>{{'费\u3000\u3000用:'}}</span>
+            <span class='right'>{{data.cost | formatCost}}</span>
+          </div>
+          <div class='cell'>
+            <span class='left'>填报时间:</span>
+            <span class='right'>{{data.reportdate | formatDate}}</span>
+          </div>
+          <div class='cell'>
+            <span class='left'>验收时间:</span>
+            <span class='right'>{{data.sjjssj | formatDate}}</span>
+          </div>
+        </div>
+      </div>
+    </div>
+    <!-- 无数据 -->
+    <van-empty class='m-empty' v-if='!list.length' description='暂无数据'>
+      <template #image>
+        <img class='no-data' src='../../assets/images/search_null.png' alt />
+      </template>
+    </van-empty>
+  </div>
+</template>
+<script>
+/**
+ * 设备页面(正常/或者维修或维保)
+ * 点击设备卡片,跳转到改页面
+ *
+ */
+import Vue from 'vue'
+import { Search, Popup, Button, Empty } from 'vant'
+Vue.use(Search).use(Popup).use(Button).use(Empty)
+import { mapGetters } from 'vuex'
+import moment from 'moment'
+export default {
+  props: {
+    type: {
+      type: String,
+      default: 'maintenance', //默认维保
+    },
+    list: {
+      type: Array,
+      default: () => {
+        return []
+      },
+    },
+  },
+  data() {
+    return {
+      keyword: '',
+    }
+  },
+  computed: {
+    ...mapGetters(['plazaId', 'smsxt', 'categoryId']),
+  },
+  components: {},
+  created() {
+
+  },
+  beforeMount() { },
+  mounted() { },
+  filters: {
+    formatDate(value) {
+      if (!value) return '--'
+      return moment(value).format('YYYY-MM-DD HH:MM')
+    },
+    formatCost(value) {
+      if (!value) return '--'
+      return `${value} 万元`
+    },
+  },
+  methods: {
+    /**
+     * 搜索
+     */
+    onSearch() {
+      this.$emit("onSearch", this.keyword)
+    },
+  },
+}
+</script>
+<style lang='less' scoped>
+.equipment-page {
+  width: 100%;
+  height: 100%;
+  background-color: #f5f6f7;
+  // 搜索
+  .equipment-search-container {
+    width: 100%;
+    height: 55px;
+    // background-color: #fff;
+    text-align: center;
+    .equipment-search {
+      width: 80%;
+      margin: 0 auto;
+      background: none;
+    }
+    .van-search__content {
+      background: #fff;
+      border-radius: 50px;
+    }
+  }
+  // 主要维保
+  .equipment-list {
+    width: 100%;
+    min-height: 1px;
+    max-height: calc(100% - 55px);
+    overflow: auto;
+    font-size: 14px;
+    font-weight: 400;
+    color: #333333;
+    .info-box {
+      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;
+          }
+        }
+      }
+    }
+  }
+  // 空状态
+  .m-empty {
+    // position: fixed;
+    // top: 0;
+    // left: 0;
+    // width: 100%;
+    // height: 100%;
+    display: flex;
+    align-items: center;
+    /deep/ .van-empty__image {
+      display: flex;
+      justify-content: center;
+      align-items: flex-end;
+      img {
+        width: auto;
+        height: auto;
+      }
+    }
+  }
+}
+</style>

+ 3 - 3
src/router/index.ts

@@ -252,9 +252,9 @@ const routes: Array<RouteConfig> = [
     },
     // 重要维修及重要维保
     {
-        path: '/repairMaintenance',
-        name: 'RepairMaintenance',
-        component: () => import(/* webpackChunkName: "RepairMaintenance" */ '../views/equipmentFacilities/RepairMaintenance.vue'),
+        path: '/maintenanceRecordView',
+        name: 'MaintenanceRecordView',
+        component: () => import(/* webpackChunkName: "MaintenanceRecordView" */ '../views/equipmentFacilities/MaintenanceRecordView.vue'),
         meta: {
             keepAlive: false,
             showTabbar: false,

+ 21 - 85
src/views/equipmentFacilities/RepairMaintenance.vue

@@ -1,26 +1,20 @@
 <template>
-  <div class="asset-detail" v-if="isFinish >= 2">
-    <van-nav-bar :title="isMaintenanceShow || isRepairShow ? '设备详情' : '设备信息'" @click-left="backPage"
+  <div class="asset-detail">
+    <van-nav-bar title="维修及维保事项" @click-left="backPage"
       @click-right="handleRightClick">
       <template #left>
         <van-icon name="arrow-left" size="18" color="#333333" />
       </template>
-      <template #right v-if="active == 1 || active == 2">
+      <template #right>
         <i class="iconfont wanda-scan"></i>
       </template>
     </van-nav-bar>
-    <div class="asset-information" v-if="!isMaintenanceShow && !isRepairShow">
-      <Information :data="informationData" />
-    </div>
-    <van-tabs v-else v-model="active" class="other-tabs" color="#025BAA" @change="changeTab"
+    <van-tabs v-model="active" class="other-tabs" color="#025BAA" @change="changeTab"
       title-active-color="#025BAA" :line-width="60">
-      <van-tab title="设备信息">
-        <Information :data="informationData" />
-      </van-tab>
-      <van-tab v-if="isMaintenanceShow" title="重要维保">
+      <van-tab title="重要维保">
         <RepairMaintenance ref="maintenance" type="maintenance" :list="maintenanceData" @onSearch="getData" />
       </van-tab>
-      <van-tab v-if="isRepairShow" title="重要维修">
+      <van-tab title="重要维修">
         <RepairMaintenance ref="repair" type="repair" :list="repairData" @onSearch="getData" />
       </van-tab>
     </van-tabs>
@@ -74,33 +68,22 @@
 import Vue from "vue";
 import { mapGetters } from "vuex";
 import { NavBar, Tab, Tabs, Popup, Button, Toast } from "vant";
-import Information from "@/components/assetDetail/Information.vue";
-import RepairMaintenance from "@/components/assetDetail/RepairMaintenance.vue";
+import RepairMaintenance from "@/components/equipmentFacilities/RepairMaintenance.vue";
 import { queryEquipmentList } 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);
 export default {
-  name: "AssetDetail",
+  name: "MaintenanceRecordView",
   props: {},
-  components: { Information, RepairMaintenance },
+  components: { RepairMaintenance },
   computed: {
-    ...mapGetters([
-      "plazaId",
-      "fmapID",
-      "haveFengMap",
-      "bunkObj",
-      "floorsArr",
-      "categoryId",
-    ]),
+    ...mapGetters([ "plazaId", "smsxt" ]),
   },
   data() {
     return {
       active: 0,
       showPopup: false,
-      isMaintenanceShow: true,
-      isRepairShow: true,
-      informationData: {},
       maintenanceData: [],
       repairData: [],
       sfghpjList: [
@@ -144,52 +127,25 @@ export default {
      * 点击右侧筛选
      */
     handleRightClick() {
-      if (this.active == 1 || this.active == 2) {
-        this.showPopup = true;
-      }
+      this.showPopup = true;
     },
     changeTab(active) {
       console.log(this.active);
     },
     // 查询设备信息/维修/维保数据
     getData() {
-      if (this.active === 1) {
+      if (this.active === 0) {
         //维保
         this.getMaintenanceData();
-      } else if (this.active === 2) {
+      } else if (this.active === 1) {
         //维修
         this.getRepairData();
       }
     },
-    // 查询设备信息数据
-    getInformationData() {
-      let data = {
-        plazaId: this.plazaId,
-        keyword: `${this.$route.query.assetid}:assetid;`,
-      },
-        postParams = {};
-      queryEquipmentList({ data, postParams }).then((res) => {
-        if (res.data.result == "success" && res.data.data && res.data.data[0]) {
-          this.informationData = res.data.data[0];
-          this.getMaintenanceData(true);
-          this.getRepairData(true);
-        } else {
-          Toast({
-            message: "未查询到该设备内容!",
-            type: "fail",
-            duration: 2000,
-            onClose: () => {
-              this.$router.push({ path: "/" });
-            }
-          });
-        }
-      });
-    },
     // 查询维保数据
-    getMaintenanceData(first) {
-      if (this.informationData.assetnum) {
+    getMaintenanceData() {
         let getParams = {
-          assetnum: this.informationData.assetnum,
+          smsxt: this.smsxt,
           plazaId: this.plazaId,
           onlyMainAsset: true, //仅查询重要维修/维保
           ismodel: this.isParts, //是否更换配件
@@ -286,22 +242,12 @@ export default {
           } else {
             this.maintenanceData = [];
           }
-          if (first) {
-            this.isFinish++;
-          }
-          if (first && !this.maintenanceData.length) {
-            this.isMaintenanceShow = false;
-          }
         });
-      } else {
-        console.error("缺少设备编号!");
-      }
     },
     // 查询维修数据
-    getRepairData(first) {
-      if (this.informationData.assetnum) {
+    getRepairData() {
         let getParams = {
-          assetnum: this.informationData.assetnum,
+          smsxt: this.smsxt,
           plazaId: this.plazaId,
           onlyMainAsset: true, //仅查询重要维修/维保
           ismodel: this.isParts, //是否更换配件
@@ -398,16 +344,7 @@ export default {
           } else {
             this.repairData = [];
           }
-          if (first) {
-            this.isFinish++;
-          }
-          if (first && !this.repairData.length) {
-            this.isRepairShow = false;
-          }
         });
-      } else {
-        console.error("缺少设备编号!");
-      }
     },
     // 修改是否更换配件
     isChangeParts(data) {
@@ -479,11 +416,10 @@ export default {
     },
   },
   watch: {
-    "$route.query.assetid": {
-      handler(assetid) {
-        if (assetid) {
-          this.getInformationData();
-        }
+    "$route.path": {
+      handler(path) {
+        this.getMaintenanceData(true);
+        this.getRepairData(true);
       },
       immediate: true,
       deep: true,

+ 1 - 1
src/views/equipmentFacilities/index.vue

@@ -505,7 +505,7 @@ export default {
             this.$router.push({ name: 'MainAsset' })
         },
         handleWxwb() {
-            this.$router.push({ name: 'RepairMaintenance' })
+            this.$router.push({ name: 'MaintenanceRecordView' })
         },
         /**
          * 配电室低压柜及出线明细