Browse Source

'主要设备清单'

zhangyu 4 years ago
parent
commit
b35e6682f3

+ 4 - 0
src/api/equipmentList.js

@@ -17,6 +17,10 @@ export function querySystemCard({ getParams }) {
     return httputils.getJson(`/data/home/querySystemCard`, getParams)
 }
 
+// 设备设施-主要设备清单
+export function queryStatistics({ data, postParams }) {
+    return httputils.fetchJson(`/data/sms_asset/queryStatistics`, data, postParams)
+}
 // 设备设施-主要设备清单-详情
 export function queryEquipmentList({ data, postParams }) {
     return httputils.fetchJson(`/data/sms_asset/query`, data, postParams)

+ 482 - 12
src/views/equipmentFacilities/MainEquipment.vue

@@ -1,21 +1,491 @@
 <template>
-    <div>主要设备清单</div>
+  <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>
+        <i class="iconfont wanda-scan"></i>
+      </template>
+    </van-nav-bar>
+    <div class="asset-information">
+      <div class='equipment-page'>
+        <!-- 搜索框 -->
+        <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="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>
+              </div>
+              <div class='cell'>
+                <span class='left'>{{'品\u3000\u3000牌:'}}</span>
+                <span class='right'>{{data.matters || '--'}}</span>
+              </div>
+              <div class='cell'>
+                <span class='left'>{{'生产厂商:'}}</span>
+                <span class='right'>{{data.cost || '--'}}</span>
+              </div>
+            </div>
+          </div>
+        </div>
+        <!-- 无数据 -->
+        <van-empty class='m-empty' v-if='!dataList.length' description='暂无数据'>
+          <template #image>
+            <img class='no-data' src='../../assets/images/search_null.png' alt />
+          </template>
+        </van-empty>
+      </div>
+    </div>
+
+    <!-- 点击头部筛选,出现的右侧弹窗 -->
+    <van-popup class="m-popup-container" v-model="showPopup" position="right">
+      <div class="m-popup">
+        <!-- 楼层 -->
+        <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="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, List, Cell } from "vant";
+import RepairMaintenance from "@/components/equipmentFacilities/RepairMaintenance.vue";
+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);
 export default {
-    name: 'mainEquipment',
-    props: {},
-    data() {
-        return {}
-    },
-    components: {},
-    beforeMount() {},
-    mounted() {},
-    methods: {},
-}
+  name: "MaintenanceRecordView",
+  props: {},
+  components: { RepairMaintenance },
+  computed: {
+    ...mapGetters(["plazaId", "smsxt"]),
+  },
+  data() {
+    return {
+      showPopup: false,
+      dataList: [],
+      keyword: "",
+      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: "" },
+      ],
+      loading: false,
+      finished: false,
+      fillinDate: 0,
+      page: 1, //当前页码
+      size: 10, //每页条数
+    };
+  },
+  props: {},
+  beforeMount() { },
+  mounted() { },
+  methods: {
+    backPage() {
+      if (this.$route.query.first) {
+        this.$router.push({ path: "/" });
+      } else {
+        this.$router.go(-1);
+      }
+    },
+    /**
+     * 点击右侧筛选
+     */
+    handleRightClick() {
+      this.showPopup = true;
+    },
+    // 查询主要设备清单
+    getData() {
+      this.page = 1;
+      this.dataList = [];
+      this.finished = false;
+      let data = {
+        plazaId: this.plazaId,
+        // major: '弱电',
+        onlyMainAsset: true,
+        page: this.page,
+        size: this.size,
+      },
+        postParams = {
+            tab_code: 'gd01'
+        //   system_code: this.smsxt
+        }
+      //查询关键字(设备名称)
+      if (this.keyword) {
+        data.keyword = `${this.keyword}:type_name`;
+      }
+      //填报日期
+      //   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;
+      //   }
+      queryStatistics({ data, postParams }).then(res => {
+        console.log(res)
+        debugger
+        if (res.data.result == "success" && res.data.data) {
+          this.dataList = res.data.data;
+        }
+        // 数据全部加载完成
+        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,
+      },
+        postParams = {
+          system_code: this.smsxt
+        }
+      //查询关键字(设备名称)
+      if (this.keyword) {
+        data.keyword = `${this.keyword}:type_name`;
+      }
+      queryStatistics({ data, postParams }).then(res => {
+        if (res.data.result == "success" && res.data.data) {
+          this.dataList = this.dataList.concat(res.data.data);
+        }
+
+        // 加载状态结束
+        this.loading = false;
+
+        // 数据全部加载完成
+        if (this.dataList.length >= res.data.count) {
+          this.finished = true;
+        }
+      })
+    },
+    // 修改楼层
+    changeFillinDate(data) {
+      console.log(data);
+      this.fillinDate = data.value;
+      this.fillinList.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.path": {
+      handler(path) {
+        this.getData();
+      },
+      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;
+    .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;
+          }
+        }
+      }
+    }
+  }
+
+  // 筛选弹窗
+  .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>

+ 2 - 3
src/views/equipmentFacilities/MaintenanceRecordView.vue

@@ -106,7 +106,6 @@ export default {
         { text: "6个月", value: 4, active: "" },
         { text: "1年", value: 5, active: "" },
       ],
-      isFinish: 0,
       isParts: 1,
       fillinDate: 0,
       acceptanceDate: 0,
@@ -418,8 +417,8 @@ export default {
   watch: {
     "$route.path": {
       handler(path) {
-        this.getMaintenanceData(true);
-        this.getRepairData(true);
+        this.getMaintenanceData();
+        this.getRepairData();
       },
       immediate: true,
       deep: true,