소스 검색

'添加维修维保路由'

zhangyu 4 년 전
부모
커밋
cffdda1300
3개의 변경된 파일655개의 추가작업 그리고 8개의 파일을 삭제
  1. 11 0
      src/router/index.ts
  2. 1 8
      src/views/AssetDetail.vue
  3. 643 0
      src/views/equipmentFacilities/RepairMaintenance.vue

+ 11 - 0
src/router/index.ts

@@ -239,6 +239,17 @@ const routes: Array<RouteConfig> = [
             hideNarBar: true,
         },
     },
+    // 重要维修及重要维保
+    {
+        path: '/repairMaintenance',
+        name: 'RepairMaintenance',
+        component: () => import(/* webpackChunkName: "RepairMaintenance" */ '../views/equipmentFacilities/RepairMaintenance.vue'),
+        meta: {
+            keepAlive: false,
+            showTabbar: false,
+            hideNarBar: true,
+        },
+    },
 ]
 
 const router = new VueRouter({

+ 1 - 8
src/views/AssetDetail.vue

@@ -85,14 +85,7 @@ export default {
   props: {},
   components: { Information, RepairMaintenance },
   computed: {
-    ...mapGetters([
-      "plazaId",
-      "fmapID",
-      "haveFengMap",
-      "bunkObj",
-      "floorsArr",
-      "categoryId",
-    ]),
+    ...mapGetters([ "plazaId" ]),
   },
   data() {
     return {

+ 643 - 0
src/views/equipmentFacilities/RepairMaintenance.vue

@@ -0,0 +1,643 @@
+<template>
+  <div class="asset-detail" v-if="isFinish >= 2">
+    <van-nav-bar :title="isMaintenanceShow || isRepairShow ? '设备详情' : '设备信息'" @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">
+        <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"
+      title-active-color="#025BAA" :line-width="60">
+      <van-tab title="设备信息">
+        <Information :data="informationData" />
+      </van-tab>
+      <van-tab v-if="isMaintenanceShow" title="重要维保">
+        <RepairMaintenance ref="maintenance" type="maintenance" :list="maintenanceData" @onSearch="getData" />
+      </van-tab>
+      <van-tab v-if="isRepairShow" title="重要维修">
+        <RepairMaintenance ref="repair" type="repair" :list="repairData" @onSearch="getData" />
+      </van-tab>
+    </van-tabs>
+
+    <!-- 点击头部筛选,出现的右侧弹窗 -->
+    <van-popup class="m-popup-container" v-model="showPopup" position="right">
+      <div class="m-popup">
+        <!-- 是否更换配件 -->
+        <div class="system">
+          <h1 class="title">是否更换配件</h1>
+          <div class="system-btn-container">
+            <div class="system-btn" v-for="(item, index) in sfghpjList" :key="index">
+              <van-button class="m-btn" :class="item.active" @click="isChangeParts(item)">{{ item.text }}</van-button>
+            </div>
+          </div>
+        </div>
+        <div class="divider"></div>
+        <!-- 填报日期 -->
+        <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 }}
+              </van-button>
+            </div>
+          </div>
+        </div>
+        <div class="divider"></div>
+        <!-- 验收日期 -->
+        <div class="sbss">
+          <h1 class="title">验收日期</h1>
+          <div class="system-btn-container">
+            <div class="system-btn" v-for="(item, index) in acceptanceList" :key="index">
+              <van-button class="m-btn" :class="item.active" @click="changeAcceptanceDate(item)">{{ item.text }}
+              </van-button>
+            </div>
+          </div>
+        </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>
+        </div>
+      </div>
+    </van-popup>
+  </div>
+</template>
+<script>
+/**
+ * 设备详情
+ */
+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 { 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",
+  props: {},
+  components: { Information, RepairMaintenance },
+  computed: {
+    ...mapGetters([
+      "plazaId",
+      "fmapID",
+      "haveFengMap",
+      "bunkObj",
+      "floorsArr",
+      "categoryId",
+    ]),
+  },
+  data() {
+    return {
+      active: 0,
+      showPopup: false,
+      isMaintenanceShow: true,
+      isRepairShow: true,
+      informationData: {},
+      maintenanceData: [],
+      repairData: [],
+      sfghpjList: [
+        { text: "是", value: 1, active: "active" },
+        { text: "否", value: 0, active: "" },
+      ],
+      fillinList: [
+        { text: "全部", value: 0, active: "active" },
+        { text: "7天", value: 1, active: "" },
+        { text: "15天", value: 2, active: "" },
+        { text: "30天", value: 3, active: "" },
+        { text: "6个月", value: 4, active: "" },
+        { text: "1年", value: 5, active: "" },
+      ],
+      acceptanceList: [
+        { text: "全部", value: 0, active: "active" },
+        { text: "7天", value: 1, active: "" },
+        { text: "15天", value: 2, active: "" },
+        { text: "30天", value: 3, active: "" },
+        { text: "6个月", value: 4, active: "" },
+        { text: "1年", value: 5, active: "" },
+      ],
+      isFinish: 0,
+      isParts: 1,
+      fillinDate: 0,
+      acceptanceDate: 0,
+    };
+  },
+  props: {},
+  beforeMount() { },
+  mounted() { },
+  methods: {
+    backPage() {
+      if (this.$route.query.first) {
+        this.$router.push({ path: "/" });
+      } else {
+        this.$router.go(-1);
+      }
+    },
+    /**
+     * 点击右侧筛选
+     */
+    handleRightClick() {
+      if (this.active == 1 || this.active == 2) {
+        this.showPopup = true;
+      }
+    },
+    changeTab(active) {
+      console.log(this.active);
+    },
+    // 查询设备信息/维修/维保数据
+    getData() {
+      if (this.active === 1) {
+        //维保
+        this.getMaintenanceData();
+      } else if (this.active === 2) {
+        //维修
+        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) {
+        let getParams = {
+          assetnum: this.informationData.assetnum,
+          plazaId: this.plazaId,
+          onlyMainAsset: true, //仅查询重要维修/维保
+          ismodel: this.isParts, //是否更换配件
+        };
+        //查询关键字(重要事项记录)
+        if (this.$refs.maintenance && this.$refs.maintenance.keyword) {
+          getParams.keyword = `${this.$refs.maintenance.keyword}:matters`;
+        }
+        //填报日期
+        switch (this.fillinDate) {
+          // 七天
+          case 1:
+            getParams.reportdateStartDate = moment()
+              .subtract(7, "days")
+              .format("YYYYMMDD000000");
+            getParams.reportdateEndDate = moment().format("YYYYMMDD000000");
+            break;
+          // 15天
+          case 2:
+            getParams.reportdateStartDate = moment()
+              .subtract(15, "days")
+              .format("YYYYMMDD000000");
+            getParams.reportdateEndDate = moment().format("YYYYMMDD000000");
+            break;
+          // 30天
+          case 3:
+            getParams.reportdateStartDate = moment()
+              .subtract(1, "months")
+              .format("YYYYMMDD000000");
+            getParams.reportdateEndDate = moment().format("YYYYMMDD000000");
+            break;
+          // 6个月
+          case 4:
+            getParams.reportdateStartDate = moment()
+              .subtract(6, "years")
+              .format("YYYYMMDD000000");
+            getParams.reportdateEndDate = moment().format("YYYYMMDD000000");
+            break;
+          // 一年
+          case 5:
+            getParams.reportdateStartDate = moment()
+              .subtract(1, "years")
+              .format("YYYYMMDD000000");
+            getParams.reportdateEndDate = moment().format("YYYYMMDD000000");
+            break;
+          // 默认 全部
+          default:
+            break;
+        }
+        //验收日期
+        switch (this.acceptanceDate) {
+          // 七天
+          case 1:
+            getParams.sjjssjStartDate = moment()
+              .subtract(7, "days")
+              .format("YYYYMMDD000000");
+            getParams.sjjssjEndDate = moment().format("YYYYMMDD000000");
+            break;
+          // 15天
+          case 2:
+            getParams.sjjssjStartDate = moment()
+              .subtract(15, "days")
+              .format("YYYYMMDD000000");
+            getParams.sjjssjEndDate = moment().format("YYYYMMDD000000");
+            break;
+          // 30天
+          case 3:
+            getParams.sjjssjStartDate = moment()
+              .subtract(1, "months")
+              .format("YYYYMMDD000000");
+            getParams.sjjssjEndDate = moment().format("YYYYMMDD000000");
+            break;
+          // 6个月
+          case 4:
+            getParams.sjjssjStartDate = moment()
+              .subtract(6, "years")
+              .format("YYYYMMDD000000");
+            getParams.sjjssjEndDate = moment().format("YYYYMMDD000000");
+            break;
+          // 一年
+          case 5:
+            getParams.sjjssjStartDate = moment()
+              .subtract(1, "years")
+              .format("YYYYMMDD000000");
+            getParams.sjjssjEndDate = moment().format("YYYYMMDD000000");
+            break;
+          // 默认 全部
+          default:
+            break;
+        }
+        getUpdateDetail1({ getParams }).then((res) => {
+          if (res.data && res.data.length) {
+            this.maintenanceData = res.data;
+          } else {
+            this.maintenanceData = [];
+          }
+          if (first) {
+            this.isFinish++;
+          }
+          if (first && !this.maintenanceData.length) {
+            this.isMaintenanceShow = false;
+          }
+        });
+      } else {
+        console.error("缺少设备编号!");
+      }
+    },
+    // 查询维修数据
+    getRepairData(first) {
+      if (this.informationData.assetnum) {
+        let getParams = {
+          assetnum: this.informationData.assetnum,
+          plazaId: this.plazaId,
+          onlyMainAsset: true, //仅查询重要维修/维保
+          ismodel: this.isParts, //是否更换配件
+        };
+        //查询关键字(重要事项记录)
+        if (this.$refs.repair && this.$refs.repair.keyword) {
+          getParams.keyword = `${this.$refs.repair.keyword}:matters`;
+        }
+        //填报日期
+        switch (this.fillinDate) {
+          // 七天
+          case 1:
+            getParams.reportdateStartDate = moment()
+              .subtract(7, "days")
+              .format("YYYYMMDD000000");
+            getParams.reportdateEndDate = moment().format("YYYYMMDD000000");
+            break;
+          // 15天
+          case 2:
+            getParams.reportdateStartDate = moment()
+              .subtract(15, "days")
+              .format("YYYYMMDD000000");
+            getParams.reportdateEndDate = moment().format("YYYYMMDD000000");
+            break;
+          // 30天
+          case 3:
+            getParams.reportdateStartDate = moment()
+              .subtract(1, "months")
+              .format("YYYYMMDD000000");
+            getParams.reportdateEndDate = moment().format("YYYYMMDD000000");
+            break;
+          // 6个月
+          case 4:
+            getParams.reportdateStartDate = moment()
+              .subtract(6, "years")
+              .format("YYYYMMDD000000");
+            getParams.reportdateEndDate = moment().format("YYYYMMDD000000");
+            break;
+          // 一年
+          case 5:
+            getParams.reportdateStartDate = moment()
+              .subtract(1, "years")
+              .format("YYYYMMDD000000");
+            getParams.reportdateEndDate = moment().format("YYYYMMDD000000");
+            break;
+          // 默认 全部
+          default:
+            break;
+        }
+        //验收日期
+        switch (this.acceptanceDate) {
+          // 七天
+          case 1:
+            getParams.sjjssjStartDate = moment()
+              .subtract(7, "days")
+              .format("YYYYMMDD000000");
+            getParams.sjjssjEndDate = moment().format("YYYYMMDD000000");
+            break;
+          // 15天
+          case 2:
+            getParams.sjjssjStartDate = moment()
+              .subtract(15, "days")
+              .format("YYYYMMDD000000");
+            getParams.sjjssjEndDate = moment().format("YYYYMMDD000000");
+            break;
+          // 30天
+          case 3:
+            getParams.sjjssjStartDate = moment()
+              .subtract(1, "months")
+              .format("YYYYMMDD000000");
+            getParams.sjjssjEndDate = moment().format("YYYYMMDD000000");
+            break;
+          // 6个月
+          case 4:
+            getParams.sjjssjStartDate = moment()
+              .subtract(6, "years")
+              .format("YYYYMMDD000000");
+            getParams.sjjssjEndDate = moment().format("YYYYMMDD000000");
+            break;
+          // 一年
+          case 5:
+            getParams.sjjssjStartDate = moment()
+              .subtract(1, "years")
+              .format("YYYYMMDD000000");
+            getParams.sjjssjEndDate = moment().format("YYYYMMDD000000");
+            break;
+          // 默认 全部
+          default:
+            break;
+        }
+        getUpdateDetail4({ getParams }).then((res) => {
+          if (res.data && res.data.length) {
+            this.repairData = res.data;
+          } else {
+            this.repairData = [];
+          }
+          if (first) {
+            this.isFinish++;
+          }
+          if (first && !this.repairData.length) {
+            this.isRepairShow = false;
+          }
+        });
+      } else {
+        console.error("缺少设备编号!");
+      }
+    },
+    // 修改是否更换配件
+    isChangeParts(data) {
+      console.log(data);
+      this.isParts = data.value;
+      this.sfghpjList.map((item) => {
+        item.active = "";
+        if (item.value === data.value) {
+          item.active = "active";
+        }
+      });
+    },
+    // 修改填报日期
+    changeFillinDate(data) {
+      console.log(data);
+      this.fillinDate = data.value;
+      this.fillinList.map((item) => {
+        item.active = "";
+        if (item.value === data.value) {
+          item.active = "active";
+        }
+      });
+    },
+    // 修改验收日期
+    changeAcceptanceDate(data) {
+      console.log(data);
+      this.acceptanceDate = data.value;
+      this.acceptanceList.map((item) => {
+        item.active = "";
+        if (item.value === data.value) {
+          item.active = "active";
+        }
+      });
+    },
+    /**
+     * 重置
+     */
+    reset() {
+      this.sfghpjList.map((item, index) => {
+        item.active = "";
+        if (index === 0) {
+          item.active = "active";
+          this.isParts = item.value;
+        }
+      });
+      this.fillinList.map((item, index) => {
+        item.active = "";
+        if (index === 0) {
+          item.active = "active";
+          this.fillinDate = item.value;
+        }
+      });
+      this.acceptanceList.map((item, index) => {
+        item.active = "";
+        if (index === 0) {
+          item.active = "active";
+          this.acceptanceDate = item.value;
+        }
+      });
+      this.getData();
+      this.showPopup = false;
+    },
+    /**
+     * 弹窗确认
+     */
+    confirm() {
+      this.getData();
+      this.showPopup = false;
+    },
+  },
+  watch: {
+    "$route.query.assetid": {
+      handler(assetid) {
+        if (assetid) {
+          this.getInformationData();
+        }
+      },
+      immediate: true,
+      deep: true,
+    },
+  },
+};
+</script>
+<style lang='less' scoped>
+.asset-detail {
+  width: 100%;
+  height: 100%;
+  .asset-information {
+    height: calc(100% - 46px);
+    background: #f5f6f7;
+    overflow-y: auto;
+  }
+  .other-tabs {
+    height: calc(100% - 46px);
+    /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;
+      }
+    }
+    /deep/ .van-tabs__content {
+      height: calc(100% - 45px);
+      .van-tab__pane {
+        background: #f5f6f7;
+        height: 100%;
+        overflow-y: auto;
+      }
+    }
+  }
+
+  // 筛选弹窗
+  .m-popup-container {
+    width: 80%;
+    height: 100%;
+    padding: 55px 20px 10px 20px;
+    .m-popup {
+      width: 100%;
+      height: calc(100% - 80px);
+      display: flex;
+      flex-direction: column;
+      .title {
+        font-size: 16px;
+        font-weight: 500;
+        color: #333333;
+        margin-bottom: 15px;
+      }
+      // 专业
+      .system {
+        width: 100%;
+        height: auto;
+        // 专业系统按钮
+        .system-btn-container {
+          display: flex;
+          width: 100%;
+          flex-wrap: wrap;
+          flex-flow: wrap;
+          .system-btn {
+            width: 50% !important;
+            min-width: 50% !important;
+            max-width: 50% !important;
+            height: 40px;
+            box-sizing: border-box;
+            padding: 10px 10px 10px 0;
+            .m-btn {
+              width: 100%;
+              height: 32px !important;
+              text-align: center;
+              background: #eff0f1;
+              border-radius: 2px;
+            }
+          }
+        }
+        .active {
+          background-color: #025baa !important;
+          color: #fff;
+        }
+      }
+      // 电井类型
+      .sbss {
+        display: flex;
+        flex-direction: column;
+        overflow: auto;
+        .title {
+          width: 100%;
+          height: 25px;
+        }
+        .system-btn-container {
+          display: flex;
+          width: 100%;
+          flex-wrap: wrap;
+          flex-flow: wrap;
+          .system-btn {
+            width: 33% !important;
+            min-width: 33% !important;
+            max-width: 33% !important;
+            height: 50px;
+            box-sizing: border-box;
+            padding: 5px 10px 5px 0;
+            .m-btn {
+              width: 100%;
+              height: 32px !important;
+              text-align: center;
+              background: #eff0f1;
+              border-radius: 2px;
+              padding: 0 !important;
+            }
+          }
+        }
+        .active {
+          background-color: #025baa !important;
+          color: #fff;
+        }
+        .load-more {
+          width: 80px;
+          height: 25px;
+          line-height: 25px;
+          text-align: center;
+          margin: 0 auto;
+          color: #025baa;
+          background: #e5eef6;
+        }
+      }
+      .divider {
+        border-bottom: 1px solid #e6e6e6;
+        margin: 20px 0;
+      }
+      .footer {
+        position: absolute;
+        bottom: 30px;
+        right: 0;
+        width: 100%;
+        height: 35px;
+        display: flex;
+        justify-content: space-around;
+        .van-button {
+          width: 40%;
+          height: 100%;
+          max-width: 40%;
+          min-width: 40%;
+        }
+      }
+    }
+  }
+}
+</style>