Browse Source

'设备详情'

zhangyu 4 years ago
parent
commit
2eb924f039

+ 84 - 0
src/components/assetDetail/Information.vue

@@ -0,0 +1,84 @@
+<template>
+  <div>
+    <div class='info-box'>
+      <h2 class="info-title">基本信息</h2>
+      <div class='cell'>
+        <span class='left'>设备简码:</span>
+        <span class='right'>SY/1F/YLL/DT/1#-HT-1#</span>
+      </div>
+      <div class='cell'>
+        <span class='left'>设备简称:</span>
+        <span class='right'>商业楼/F1/娱乐楼/电梯间/娱乐楼货梯间-货梯-娱乐楼1#商管货梯</span>
+      </div>
+    </div>
+    <div class='info-box'>
+      <h2 class="info-title">详情信息</h2>
+      <div class='cell'>
+        <span class='left'>设备全码:</span>
+        <span class='right'>WZ-ZC-WDSG-SY/1F/YLL/DT/1#-HT-1#</span>
+      </div>
+      <div class='cell'>
+        <span class='left'>设备全称:</span>
+        <span class='right'>吴忠万达广场(WZ)-自持-商管-商业楼/F1/娱乐楼/电梯间/娱乐楼货梯间-货梯-娱乐楼1#商管货梯</span>
+      </div>
+      <div class='cell'>
+        <span class='left'>详细位置:</span>
+        <span class='right'>吴忠万达广场(WZ)/商业楼/1楼/娱乐楼/电梯间/娱乐楼货梯间</span>
+      </div>
+      <div class='cell'>
+        <span class='left'>设备数量:</span>
+        <span class='right'>1</span>
+      </div>
+      <div class='cell'>
+        <span class='left'>服务区域:</span>
+        <span class='right'>B1-5F</span>
+      </div>
+      <div class='cell'>
+        <span class='left'>负责人:</span>
+        <span class='right'>马伟</span>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  data() {
+    return {
+    }
+  },
+
+  methods: {
+  },
+  mounted() { }
+}
+</script>
+<style lang="less" scoped>
+// 设备信息
+.info-box {
+  width: 100%;
+  overflow: auto;
+  padding: 16px;
+  margin-bottom: 10px;
+  background-color: #ffffff;
+  .info-title {
+    font-size: 16px;
+    color: #333333;
+  }
+  .cell {
+    width: 100%;
+    min-height: 20px;
+    margin-top: 12px;
+    display: flex;
+    .left {
+      width: 70px;
+      color: #666;
+      font-size: 14px;
+    }
+    .right {
+      flex: 1;
+      color: #333;
+      font-size: 14px;
+    }
+  }
+}
+</style>

+ 11 - 0
src/router/index.ts

@@ -173,6 +173,17 @@ const routes: Array<RouteConfig> = [
             hideNarBar: true,
         },
     },
+    // 设备详情页
+    {
+        path: '/assetDetail',
+        name: 'AssetDetail',
+        component: () => import(/* webpackChunkName: "assetDetail" */ '../views/AssetDetail.vue'),
+        meta: {
+            keepAlive: false,
+            showTabbar: false,
+            hideNarBar: true,
+        },
+    },
 ]
 
 const router = new VueRouter({

+ 83 - 0
src/views/AssetDetail.vue

@@ -0,0 +1,83 @@
+<template>
+  <div class='asset-detail'>
+    <van-nav-bar title="设备详情" @click-left='backPage'>
+      <template #left>
+        <van-icon name="arrow-left" size="18" color="#333333" />
+      </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='设备信息'>
+        <Information />
+      </van-tab>
+      <van-tab title='重要维保'>
+        <div>重要维保</div>
+      </van-tab>
+      <van-tab title='重要维修'>
+        <div>重要维修</div>
+      </van-tab>
+    </van-tabs>
+  </div>
+</template>
+<script>
+/**
+ * 设备详情
+ */
+import Vue from 'vue'
+import { mapGetters } from 'vuex'
+import { NavBar, Tab, Tabs } from 'vant'
+import Information from "@/components/assetDetail/Information.vue"
+Vue.use(NavBar).use(Tab).use(Tabs)
+export default {
+  name: 'AssetDetail',
+  props: {},
+  components: { Information },
+  computed: {
+    ...mapGetters(['plazaId', 'fmapID', 'haveFengMap', 'bunkObj', 'floorsArr', 'categoryId']),
+  },
+  data() {
+    return {
+      active: 0,
+    }
+  },
+  props: {},
+  beforeMount() { },
+  mounted() {
+
+  },
+  methods: {
+    backPage() {
+      this.$router.go(-1)
+    },
+    changeTab(active) {
+      console.log(active)
+    }
+  },
+  watch: {
+
+  },
+}
+</script>
+<style lang='less' scoped>
+.asset-detail {
+  width: 100%;
+  height: 100%;
+  .other-tabs {
+    height: calc(100% - 46px);
+    /deep/ .van-tab__text {
+      font-size: 16px;
+    }
+    /deep/ .van-tabs__wrap {
+      height: 45px;
+    }
+    /deep/ .van-tabs__content {
+      height: calc(100% - 45px);
+      .van-tab__pane {
+        background: #F5F6F7;
+        height: 100%;
+        overflow-y: auto;
+      }
+    }
+  }
+}
+</style>

+ 1 - 1
src/views/overview/MapView.vue

@@ -21,7 +21,7 @@
 </template>
 <script>
 /**
- * 说明书更新记录
+ * 平面图展示
  */
 import Vue from 'vue'
 import { mapGetters } from 'vuex'