Ver código fonte

Merge branch 'dev' of http://39.106.8.246:3003/yunxing/wanda-bm-guide-h5 into dev

yunxing 4 anos atrás
pai
commit
91685bb57b

+ 7 - 2
src/components/equipmentFacilities/RepairMaintenance.vue

@@ -14,7 +14,7 @@
     <!-- 维保列表 -->
     <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' v-for="(data, index) in list" :key="data.workorderid || data.wonum + index" @click="handleClickDetail(data)">
         <div class="info-box-border">
           <h2 class="info-title">{{data.sbmc || '--'}}</h2>
           <div class='cell'>
@@ -103,6 +103,11 @@ export default {
     onSearch() {
       this.$emit("onSearch", this.keyword)
     },
+    // 跳转详情页
+    handleClickDetail(data) {
+      data.type = this.type;
+      this.$router.push({name: "MaintenanceRecordDetail", params: data});
+    },
   },
 }
 </script>
@@ -151,7 +156,7 @@ export default {
         .cell {
           width: 100%;
           min-height: 20px;
-          margin-top: 12px;
+          margin-top: 8px;
           display: flex;
           .left {
             width: 75px;

+ 311 - 0
src/components/floorMap/floorListCopy.vue

@@ -0,0 +1,311 @@
+<template>
+  <div class='floor-box'>
+    <div class='floor-list'>
+      <div class='icon-top' v-if='floorsArr.length>8'>
+        <i class="iconfont wanda-top" style="color:#9ca2a9;font-size:12px;" v-show='parseInt(marginTop) !== 0'
+          v-repeat-click='increase'></i>
+        <i class="iconfont wanda-top" style="color:#e7e8ea;font-size:12px;cursor:not-allowed;"
+          v-show='parseInt(marginTop) === 0'></i>
+        <!-- @click='changeFloor(1,currIndex)' -->
+        <!-- <img v-show='parseInt(marginTop) !== 0' v-repeat-click='increase' src='@/assets/images/iconBlackTop.png' alt />
+        <img class='disabled' v-show='parseInt(marginTop) === 0' src='@/assets/images/iconLightTop.png' alt /> -->
+      </div>
+      <div id="floorBox" class='floor-out' :style='{ height:conHeight + "px" }'>
+        <!--  放开marginTop样式  -->
+        <!-- <div class='floor-center' :style='{ marginTop : marginTop }'> -->
+        <div class='floor-center'>
+          <div class='floor-item' :class='item.gname == currentFloorId?"isActive":""' @click='tabFloor(item,index)'
+            v-for='(item,index) in floorsArr' :key='index'>{{item.code}}</div>
+        </div>
+      </div>
+      <div class='icon-bottom' v-if='floorsArr.length>8'>
+        <i class="iconfont wanda-bottom" style="color:#9ca2a9;font-size:12px;"
+          v-show='parseInt(marginTop) !== marginTopMax' v-repeat-click='decrease'></i>
+        <i class="iconfont wanda-bottom" style="color:#e7e8ea;font-size:12px;cursor:not-allowed;"
+          v-show='parseInt(marginTop) === marginTopMax'></i>
+        <!-- v-repeat-click='decrease' -->
+        <!-- <img v-show='parseInt(marginTop) !== marginTopMax' v-repeat-click='decrease'
+          src='@/assets/images/iconBlackBottom.png' alt />
+        <img class='disabled' v-show='parseInt(marginTop) === marginTopMax' src='@/assets/images/iconLightBottom.png'
+          alt /> -->
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import RepeatClick from '@/directives/repeat-click'
+
+export default {
+  directives: {
+    repeatClick: RepeatClick,
+  },
+  data() {
+    return {
+      currentFloorId: null,
+      marginTop: 0,
+      marginTopMax: 0,
+      showNumber: 8, //需要展示的楼层数   //TODO:
+      height: 38, //一个楼层的高度
+      currIndex: 0, //当前楼层在 楼层数组中的下标,上下箭头使用
+      conHeight: 0, // floor-out 的高度
+      direction: 1, //1:竖屏;2:横屏
+    }
+  },
+  props: {
+    floorsArr: {
+      type: Array,
+      default: () => {
+        return []
+      },
+    }
+  },
+  mounted() {
+    let listener = document.getElementById('floorBox')
+    listener.addEventListener('scroll', () => {
+      console.log(document.getElementById('floorBox').scrollTop)
+    })
+    window.addEventListener("onorientationchange" in window ? "orientationchange" : "resize", () => {
+      setTimeout(() => {
+        if (window.orientation === 0 || window.orientation === 180) {
+          this.direction = 1;
+          this.init()
+        }
+        if (window.orientation === 90 || window.orientation === -90) {
+          this.direction = 2;
+          this.init()
+        }
+      }, 300)
+    },false);
+  },
+  methods: {
+    /**
+     * @description 点击上箭头,marginTop<0时执行楼层滚动
+     */
+    increase() {
+      const marginTop = parseInt(this.marginTop)
+      marginTop < 0 && this.changeFloor(1, this.currIndex)
+    },
+    /**
+     * @description 点击下箭头,marginTop小于最大值marginTopMax时,执行楼层滚动
+     */
+    decrease() {
+      const marginTop = Math.abs(parseInt(this.marginTop)),
+        marginTopMax = Math.abs(parseInt(this.marginTopMax))
+      marginTop < marginTopMax && this.changeFloor(-1, this.currIndex)
+    },
+    init() {
+      if (this.direction == 1) {
+        // 修复在设备设施页面中,楼层组件不够 8个楼层时,出现的样式问题,
+        this.height = 38
+        this.conHeight = this.floorsArr.length * 38
+        this.conHeight = this.conHeight >= 300 ? 300 : this.conHeight
+        this.showNumber = this.floorsArr.length > 8 ? 8 : this.floorsArr.length
+
+        this.marginTopMax = -(this.floorsArr.length - this.showNumber) * this.height
+        // this.changeFloor(0, 0);
+        // this.tabFloor(this.floorsArr[0], 0);
+      } else if (this.direction == 2) {
+        this.height = 34.5
+        this.conHeight = this.floorsArr.length * 30
+        this.conHeight = this.conHeight >= 240 ? 240 : this.conHeight
+        this.showNumber = this.floorsArr.length > 7 ? 7 : this.floorsArr.length
+        this.marginTopMax = -(this.floorsArr.length - this.showNumber) * this.height
+      }
+    },
+    /**
+     * @name changeFloor
+     * @param {Number} flag 1:向上滚动楼层, -1向下滚动 , 0:进入页面初始化时,执行位置处理
+     * @description 点击图例下方的,上下切换按钮
+     */
+    changeFloor(flag, index) {
+      const len = this.floorsArr.length
+      this.currIndex = index
+      // 点击上箭头
+      if (flag === 1) {
+        index--
+        this.currIndex = index
+      } else if (flag === -1) {
+        //点击下箭头
+        index++
+        this.currIndex = index
+      }
+      this.handlePosition(flag, index, len)
+    },
+    /**
+     * @name tabFloor
+     * @param {Object} item 选中的楼层信息
+     * @param {Number} index 楼层信息在floorsArr数组中的位置
+     */
+    tabFloor(item, index) {
+      this.currentFloorId = item.gname;
+      this.$emit("emitFloor", item)
+      this.handlePosition(2, index, this.floorsArr.length)
+    },
+    /**
+     * @description 楼层位置动画处理
+     * @param flag 1:向上滚动楼层, -1向下滚动 , 0:进入页面初始化时,执行位置处理 2:直接点击楼层
+     * @param index 楼层 floorsArr
+     * @param len floorsArr
+     */
+    handlePosition(flag, index, len) {
+      // 取出当前 marginTop
+      let marginTop = parseInt(this.marginTop)
+      switch (flag) {
+        // 初始化进入页面,位置处理
+        case 0:
+        // 直接点击楼层,滚动楼层
+        case 2:
+          // 将 marginTop 设置为对应的index 应滚动的距离
+          marginTop = -index * this.height
+          // marginTop 过大时,取最大值marginTopMax
+          if (Math.abs(marginTop) >= Math.abs(this.marginTopMax)) {
+            marginTop = parseInt(this.marginTopMax)
+          }
+          // marginTop>0时,取0,防止楼层上边出现空白
+          marginTop = marginTop >= 0 ? 0 : marginTop
+          // index为0,marginTop设置为0
+          index == 0 && (marginTop = 0)
+          // index为最后一个,设置为最大marginTopMax
+          index == len - 1 && (marginTop = parseInt(this.marginTopMax))
+          this.marginTop = marginTop + 'px'
+          let floorBox = document.getElementById("floorBox")
+          if (this.direction == 1) {
+            let offsetLen = index - 6
+            floorBox.scrollTop = offsetLen > 0?offsetLen*this.height:0
+          } else if (this.direction == 2) {
+            let offsetLen = index - 5
+            floorBox.scrollTop = offsetLen > 0?offsetLen*this.height:0
+          }
+          break
+        //  1:向上滚动楼层
+        case 1:
+          this.marginTop = marginTop + this.height + 'px'
+          break
+        // -1向下滚动楼层
+        case -1:
+          this.marginTop = marginTop + this.height * -1 + 'px'
+          break
+        default:
+          break
+      }
+    },
+  },
+  watch: {
+    floorsArr: {
+      handler() {
+        if (window.orientation === 0 || window.orientation === 180) {
+          this.direction = 1;
+          this.init()
+        }
+        if (window.orientation === 90 || window.orientation === -90) {
+          this.direction = 2;
+          this.init()
+        }
+      },
+      immediate: true,
+      deep: true
+    }
+  }
+}
+</script>
+<style lang="less" scoped>
+.floor-box {
+  .floor-list {
+    width: 40px;
+    // height: 212px;
+    background: rgba(255, 255, 255, 1);
+    box-shadow: 0px 2px 15px 0px rgba(31, 36, 41, 0.08);
+    border-radius: 2px;
+    position: relative;
+    padding: 6px 4px;
+    text-align: center;
+    .floor-out {
+      // max-height: 300px; //TODO:
+      min-height: 38px;
+      overflow-x: hidden;
+      position: relative;
+      overflow-y: scroll;
+      &::-webkit-scrollbar {
+        display: none;
+      }
+
+      .floor-center {
+        transition: all linear 0.5s;
+        .floor-item {
+          line-height: 28px;
+          height: 28px;
+          cursor: pointer;
+          position: relative;
+          &::after {
+            position: absolute;
+            left: 50%;
+            margin-left: -20%;
+            bottom: -6px;
+            content: "";
+            width: 14px;
+            height: 1px;
+            background: rgba(195, 199, 203, 1);
+            border: 0px solid rgba(228, 229, 231, 1);
+          }
+          & + .floor-item {
+            margin-top: 10px;
+          }
+        }
+      }
+    }
+
+    .icon-top {
+      cursor: pointer;
+      height: 18px;
+    }
+    .icon-bottom {
+      cursor: pointer;
+      height: 18px;
+    }
+    .isActive {
+      border-radius: 4px;
+      color: #ffffff;
+      background: #025baa;
+    }
+  }
+  .disabled {
+    cursor: not-allowed !important;
+  }
+}
+// 横屏
+@media screen and (orientation: landscape) {
+  .floor-box {
+    .floor-list {
+      width: 30px;
+      .floor-out {
+        .floor-center {
+          .floor-item {
+            line-height: 20px;
+            height: 20px;
+            &::after {
+              position: absolute;
+              left: 50%;
+              margin-left: -20%;
+              bottom: -2px;
+              content: "";
+              width: 10px;
+              height: 1px;
+              background: rgba(195, 199, 203, 1);
+              border: 0px solid rgba(228, 229, 231, 1);
+            }
+            & + .floor-item {
+              margin-top: 4px;
+            }
+          }
+        }
+      }
+      .icon-top {
+        height: 10px;
+      }
+      .icon-bottom {
+        height: 10px;
+      }
+    }
+  }
+}
+</style>

+ 11 - 0
src/router/index.ts

@@ -278,6 +278,17 @@ const routes: Array<RouteConfig> = [
         name: 'MaintenanceRecordView',
         component: () => import(/* webpackChunkName: "MaintenanceRecordView" */ '../views/equipmentFacilities/MaintenanceRecordView.vue'),
         meta: {
+            keepAlive: true,
+            showTabbar: false,
+            hideNarBar: true,
+        },
+    },
+    // 重要维修及重要维保详情页
+    {
+        path: '/maintenanceRecordDetail',
+        name: 'MaintenanceRecordDetail',
+        component: () => import(/* webpackChunkName: "MaintenanceRecordView" */ '../views/equipmentFacilities/MaintenanceRecordDetail.vue'),
+        meta: {
             keepAlive: false,
             showTabbar: false,
             hideNarBar: true,

+ 296 - 0
src/views/equipmentFacilities/MaintenanceRecordDetail.vue

@@ -0,0 +1,296 @@
+
+
+<template>
+  <div class='update-record-detail'>
+    <van-nav-bar :title="`重要${detailData.type === 'maintenance'?'维修':'维保'}详情`" left-arrow @click-left='backPage' />
+    <div class='info'>
+      <!-- 维保 -->
+      <div class='container-1'>
+        <div class='cell'>
+            <span class='left'>设备名称:</span>
+            <span class='right'>{{detailData.sbmc || '--'}}</span>
+          </div>
+          <div class='cell'>
+            <span class='left'>设备内码:</span>
+            <span class='right'>{{detailData.assetnum || '--'}}</span>
+          </div>
+          <div class='cell'>
+            <span class='left'>事项类型:</span>
+            <span class='right'>{{detailData.matters || '--'}}</span>
+          </div>
+          <div class='cell'>
+            <span class='left'>事项描述:</span>
+            <span class='right'>{{detailData.description || '--'}}</span>
+          </div>
+          <div class='cell'>
+            <span class='left'>填报时间:</span>
+            <span class='right'>{{detailData.reportdate | formatDate}}</span>
+          </div>
+          <div class='cell'>
+            <span class='left'>验收时间:</span>
+            <span class='right'>{{detailData.sjjssj | formatDate}}</span>
+          </div>
+        <ul class='card' v-if="detailData.ismodel">
+          <li class='title'>更换配件</li>
+          <li class='name-model'>配件型号:{{detailData.model||'--'}}</li>
+          <li class='cost'>费用出处:{{detailData.source ||'--'}}</li>
+          <li class='num-amount'>
+            <span>数量: {{detailData.sl || '--'}}个</span>
+            <span>金额: {{detailData.cost ||'--'}}万元</span>
+          </li>
+        </ul>
+        <div class='bottom'>
+          <div class='photo' @click='showPhoto'>现场照片: {{imgList.length || '--'}}张</div>
+          <div v-if="detailData.type === 'maintenance'" class='task-No' @click='showTaskInfo'>工单编号: {{detailData.wonum || '--'}}</div>
+          <div v-else class='task-No' @click='showTaskInfo'>任务编号: {{detailData.wb_gzglid || '--'}}</div>
+        </div>
+      </div>
+    </div>
+    <!-- 现场照片预览 -->
+    <ImagePreview class='update-img-preview' :key='imgKey' :visible.sync='showImgPreview' :imgList='imgList' />
+
+    <!-- 任务信息 -->
+    <div class='task-info-container' v-show='showTask'>
+      <van-nav-bar :title="`${detailData.type === 'maintenance'?'工单':'任务'}信息`" left-arrow @click-left='showTask = false' />
+      <ul class='task-info'>
+        <li>
+          <span class='name'>{{detailData.type === 'maintenance'?'工单':'任务'}}编号:</span>
+          <span class='data'>{{detailData.wb_gzglid || '--'}}</span>
+        </li>
+        <li>
+          <span class='name'>{{detailData.type === 'maintenance'?'工单':'任务'}}状态:</span>
+          <span class='data'>{{detailData.status || '--'}}</span>
+        </li>
+        <li>
+          <span class='name'>{{detailData.type === 'maintenance'?'工单':'任务'}}描述:</span>
+          <span class='data'>{{detailData.description || '--'}}</span>
+        </li>
+        <li>
+          <span class='name'>填报人:</span>
+          <span class='data'>{{detailData.reportedby || '--'}}</span>
+        </li>
+        <li>
+          <span class='name'>联系电话:</span>
+          <span class='data'>{{detailData.contact || '--'}}</span>
+        </li>
+        <li>
+          <span class='name'>填报时间:</span>
+          <span class='data'>{{detailData.reportdate | formatDate}}</span>
+        </li>
+        <li>
+          <span class='name'>验收时间:</span>
+          <span class='data'>{{detailData.sjjssj | formatDate}}</span>
+        </li>
+      </ul>
+    </div>
+  </div>
+</template>
+<script>
+/**
+ * 说明书更新记录详情页面
+ */
+import Vue from 'vue'
+import { NavBar } from 'vant'
+Vue.use(NavBar)
+import ImagePreview from '@/components/ImagePreview'
+import moment from 'moment'
+export default {
+  name: 'MaintenanceRecordDetail',
+  props: {},
+  components: { ImagePreview },
+  filters: {
+    formatDate(value) {
+      if (!value) return '--'
+      return moment(value).format('YYYY-MM-DD HH:MM')
+    },
+  },
+  data() {
+    return {
+      detailData: {},
+      showTask: false, //是否展示工单/任务信息 页面
+      showImgPreview: false, //是否展示图片预览
+      imgList: [], //图片数组
+      imgKey: `img${new Date().getTime()}`,
+    }
+  },
+  computed: {
+
+  },
+  created() {
+    this.getData()
+  },
+  methods: {
+    /**
+     * 查询页面需要的详情信息
+     */
+    getData() {
+      this.detailData = this.$route.params;
+      // 图片处理
+      this.imgList = []
+      if (this.detailData?.glsmsImage?.length) {
+        this.detailData.glsmsImage.map((item) => {
+          this.imgList.push(item.url)
+        })
+      }
+    },
+    // 返回上一个页面(项目概况)
+    backPage() {
+      this.$router.go(-1)
+    },
+    // 点击任务编号,显示任务信息
+    showTaskInfo() {
+      let data = this.data
+      console.log(data)
+      // 维保有任务编号, 或者维修有工单编号, 显示
+      if (this.type === 1) {
+        this.taskText = '任务'
+        // 维保
+        this.taskData = {
+          No: data.wb_gzglid || '--', //任务编号
+          status: data.status || '--', //状态
+          description: data.description || '--', //描述
+          reporter: data.reportedby || '--', //填报人
+          phone: data.contact || '--', //联系电话
+          reportDate: data.reportdate ? moment(data.reportdate).format('YYYY-MM-DD') : '--', //填报时间
+          acceptanceDate: data.sjjssj ? moment(data.sjjssj).format('YYYY-MM-DD') : '--', //验收时间
+        }
+      } else if (this.type === 4) {
+        this.taskText = '工单'
+        // 维修
+        this.taskData = {
+          No: data.wonum || '--', //工单编号
+          status: data.status || '--', //状态
+          description: data.description || '--', //描述
+          reporter: data.reportedby || '--', //填报人
+          phone: data.contact || '--', //联系电话
+          reportDate: data.reportdate ? moment(data.reportdate).format('YYYY-MM-DD') : '--', //填报时间
+          acceptanceDate: data.sjjssj ? moment(data.sjjssj).format('YYYY-MM-DD') : '--', //验收时间
+        }
+      }
+      if (this.detailData.wb_gzglid || this.detailData.wonum) {
+        this.showTask = true
+      }
+    },
+    // 显示图片预览弹窗
+    showPhoto() {
+      this.imgKey = `img${new Date().getTime()}`
+      this.$nextTick(() => {
+        if (this.imgList?.length) {
+          this.showImgPreview = true
+        }
+      })
+    },
+  },
+}
+</script>
+<style lang='less' scoped>
+.update-record-detail {
+  width: 100%;
+  height: 100%;
+  // 下拉菜单
+  /deep/.van-dropdown-menu__item {
+    justify-content: flex-start !important;
+    padding-left: 8px;
+  }
+  // 主体内容
+  .info {
+    width: 100%;
+    height: calc(100% - 50px);
+    // padding: 15px;
+    overflow: auto;
+    .container-1 {
+      padding: 16px;
+      background-color: #fff;
+    }
+    // 维修/维保
+    .container-1 {
+      .cell {
+          width: 100%;
+          min-height: 20px;
+          margin-bottom: 8px;
+          display: flex;
+          .left {
+            width: 75px;
+            color: #666;
+            font-size: 14px;
+          }
+          .right {
+            flex: 1;
+            color: #333;
+            font-size: 14px;
+          }
+        }
+      .card {
+        width: 100%;
+        height: auto;
+        padding: 8px 16px;
+        background: #eff0f1;
+        border-radius: 4px;
+        color: #666666;
+        font-size: 14px;
+        .title {
+          height: 20px;
+          font-size: 14px;
+          font-weight: 500;
+          color: #333333;
+          line-height: 20px;
+          margin-bottom: 8px;
+        }
+        .name-model,
+        .cost,
+        .num-amount {
+          margin-top: 4px;
+        }
+        .num-amount {
+          display: flex;
+          justify-content: space-between;
+        }
+      }
+      .bottom {
+        width: 100%;
+        height: 17px;
+        display: flex;
+        justify-content: space-between;
+        margin: 5px 0 10px 0;
+        color: #025baa;
+        line-height: 17px;
+        font-size: 14px;
+        font-weight: 400;
+        color: #025baa;
+        margin-top: 20px;
+      }
+    }
+  }
+  // 全屏的任务信息
+  .task-info-container {
+    width: 100%;
+    height: 100%;
+    position: fixed;
+    top: 0;
+    left: 0;
+    z-index: 1000;
+    background-color: #fff;
+    .task-info {
+      width: 100%;
+      padding: 15px;
+      li {
+        display: flex;
+        justify-content: flex-start;
+        line-height: 20px;
+        font-size: 14px;
+        margin-bottom: 12px;
+        .name {
+          color: #666666;
+          width: 70px;
+          height: auto;
+        }
+        .data {
+          flex: 1;
+          height: auto;
+          color: #333333;
+        }
+      }
+    }
+  }
+}
+</style>

+ 240 - 222
src/views/equipmentFacilities/MaintenanceRecordView.vue

@@ -1,7 +1,6 @@
 <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>
@@ -9,13 +8,12 @@
         <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-tabs v-model="active" class="other-tabs" color="#025BAA" title-active-color="#025BAA" :line-width="60">
       <van-tab title="重要维保">
-        <RepairMaintenance ref="maintenance" type="maintenance" :list="maintenanceData" @onSearch="getData" />
+        <RepairMaintenance ref="repair" type="repair" :list="repairData" @onSearch="getData" />
       </van-tab>
       <van-tab title="重要维修">
-        <RepairMaintenance ref="repair" type="repair" :list="repairData" @onSearch="getData" />
+        <RepairMaintenance ref="maintenance" type="maintenance" :list="maintenanceData" @onSearch="getData" />
       </van-tab>
     </van-tabs>
 
@@ -78,14 +76,14 @@ export default {
   props: {},
   components: { RepairMaintenance },
   computed: {
-    ...mapGetters([ "plazaId", "smsxt" ]),
+    ...mapGetters(["plazaId", "smsxt"]),
   },
   data() {
     return {
       active: 0,
       showPopup: false,
-      maintenanceData: [],
-      repairData: [],
+      maintenanceData: [],//维修
+      repairData: [],//维保
       sfghpjList: [
         { text: "是", value: 1, active: "active" },
         { text: "否", value: 0, active: "" },
@@ -114,6 +112,11 @@ export default {
   props: {},
   beforeMount() { },
   mounted() { },
+  activated() {
+    if (this.$route.params.isInit) {
+      this.initData();
+    }
+  },
   methods: {
     backPage() {
       if (this.$route.query.first) {
@@ -128,222 +131,247 @@ export default {
     handleRightClick() {
       this.showPopup = true;
     },
-    changeTab(active) {
-      console.log(this.active);
+    // 初始化
+    initData() {
+      this.active = 0;
+      this.keyword = "";
+      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.getRepairData();
+      this.getMaintenanceData();
     },
     // 查询设备信息/维修/维保数据
     getData() {
       if (this.active === 0) {
         //维保
-        this.getMaintenanceData();
+        this.getRepairData();
       } else if (this.active === 1) {
         //维修
-        this.getRepairData();
+        this.getMaintenanceData();
       }
     },
     // 查询维保数据
-    getMaintenanceData() {
-        let getParams = {
-          smsxt: this.smsxt,
-          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;
+    getRepairData() {
+      let getParams = {
+        smsxt: this.smsxt,
+        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;
+      }
+      getUpdateDetail1({ getParams }).then((res) => {
+        if (res.data && res.data.length) {
+          this.repairData = res.data;
+        } else {
+          this.repairData = [];
         }
-        getUpdateDetail1({ getParams }).then((res) => {
-          if (res.data && res.data.length) {
-            this.maintenanceData = res.data;
-          } else {
-            this.maintenanceData = [];
-          }
-        });
+      });
     },
     // 查询维修数据
-    getRepairData() {
-        let getParams = {
-          smsxt: this.smsxt,
-          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;
+    getMaintenanceData() {
+      let getParams = {
+        smsxt: this.smsxt,
+        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;
+      }
+      getUpdateDetail4({ getParams }).then((res) => {
+        if (res.data && res.data.length) {
+          this.maintenanceData = res.data;
+        } else {
+          this.maintenanceData = [];
         }
-        getUpdateDetail4({ getParams }).then((res) => {
-          if (res.data && res.data.length) {
-            this.repairData = res.data;
-          } else {
-            this.repairData = [];
-          }
-        });
+      });
     },
     // 修改是否更换配件
     isChangeParts(data) {
@@ -413,17 +441,7 @@ export default {
       this.getData();
       this.showPopup = false;
     },
-  },
-  watch: {
-    "$route.path": {
-      handler(path) {
-        this.getMaintenanceData();
-        this.getRepairData();
-      },
-      immediate: true,
-      deep: true,
-    },
-  },
+  }
 };
 </script>
 <style lang='less' scoped>

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

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

+ 29 - 2
src/views/overview/MapView.vue

@@ -1,9 +1,12 @@
 <template>
   <div class='map-view'>
-    <van-nav-bar :title="`${floorName}平面图`" @click-left='backPage'>
+    <van-nav-bar :title="`${floorName}平面图`" @click-left='backPage' @click-right="showLegend">
       <template #left>
         <van-icon name="arrow-left" size="18" color="#333333" />
       </template>
+      <template #right>
+        <span style="color:#333333;">图例</span>
+      </template>
     </van-nav-bar>
     <div id="bind-map-content">
       <canvas id="bind-canvas" ref="bind-canvas" tabindex="0"></canvas>
@@ -29,7 +32,7 @@ import { mapGetters } from 'vuex'
 import { NavBar, Toast } from 'vant'
 import floorList from "@/components/floorMap/floorList.vue"
 import canvasFun from '@/components/floorMap/canvasFun'
-import { readGroup, queryStatis, graphQuery } from '@/api/public'
+import { readGroup, queryStatis, graphQuery, appGraphElementQuery } from '@/api/public'
 import { queryShops } from '@/api/equipmentList.js'
 import { FloorView } from '@/lib/FloorView'
 import { FloorScene } from '@/lib/FloorScene'
@@ -62,6 +65,7 @@ export default {
       topologyParser: null, // 解析器数据
       fParser: null, // 底图解析器
       direction: '竖屏',
+      legendList: [], // 图例列表
     }
   },
   props: {},
@@ -94,9 +98,32 @@ export default {
       }
       this.$router.go(-1);
     },
+    // 展示图例
+    showLegend() {
+      console.log("显示图例");
+    },
+    // 获取图例数据
+    getLegendData(floorObj) {
+      let params = {
+        BuildingID: '1',
+        CategoryID: this.categoryId,
+        ProjectID: this.plazaId,
+        Floors: [{FloorId: floorObj.gname, FloorName: floorObj.code}]
+      }
+      if (this.categoryId !== "SCPZ") {
+        //数据处理
+        // appGraphElementQuery(params).then(res => {
+        //   this.floorData = res.Data.map(floor => {
+        //     floor.Open = false;
+        //     return floor;
+        //   });
+        // })
+      }
+    },
     // 切换楼层
     emitFloor(floorObj) {
       if (floorObj) {
+        this.getLegendData(floorObj);
         this.$nextTick(() => {
           this.floorid = floorObj.gname;
           this.floorName = floorObj.code;