Explorar el Código

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

yunxing hace 4 años
padre
commit
ea7e28e18e

+ 11 - 0
src/router/index.ts

@@ -121,6 +121,17 @@ const routes: Array<RouteConfig> = [
             hideNarBar: true,
         },
     },
+    //  设备设施 --> 其他事项
+    {
+        path: '/otherMatters',
+        name: 'OtherMatters',
+        component: () => import(/* webpackChunkName: "otherMatters" */ '../views/equipmentFacilities/OtherMatters.vue'),
+        meta: {
+            keepAlive: false,
+            showTabbar: false,
+            hideNarBar: true,
+        },
+    },
     // 设备设置 --> 楼层分布
     {
         path: '/systemFloor',

+ 1 - 1
src/store/index.ts

@@ -13,7 +13,7 @@ export default new Vuex.Store({
         appTitle: '管理说明书', //顶部标题
         // ssoToken: null,
         plazaId: '1000772', //项目Id 北京通州
-        // plazaId: '1001146', //项目Id 北京通州
+        // plazaId: '1001825', //项目Id 北京通州
         // plazaId: '1000423', //项目Id 大连高新
         fmapID: '',
         haveFengMap: -1, //是否有蜂鸟地图的数据 -1为等待 0 为失败 1 为成功

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

@@ -118,14 +118,13 @@
 </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 { tabCodeArr } from "@/utils/components.js"
 import moment from "moment";
 Vue.use(NavBar)
@@ -137,7 +136,7 @@ Vue.use(NavBar)
   .use(List)
   .use(Cell);
 export default {
-  name: "MaintenanceRecordView",
+  name: "MainEquipment",
   props: {},
   components: { RepairMaintenance },
   computed: {

+ 538 - 0
src/views/equipmentFacilities/OtherMatters.vue

@@ -0,0 +1,538 @@
+<template>
+  <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">
+            <div class='equipment' v-for='(item,index) in dataList' :key='index'>
+              <p class='title'>{{item.jlsx}}</p>
+              <div class='equipment-item'>
+                <div class='label'>内容:</div>
+                <div class='value'>{{item.content || '--'}}</div>
+              </div>
+              <div class='equipment-item'>
+                <div class='label'>资料存放位置:</div>
+                <div class='value'>{{item.zlwfwz || '--'}}</div>
+              </div>
+              <div class='assetnum-attribution'>
+                <div class='assetnum'>
+                  <div class='label'>数量:</div>
+                  <div class='value'>{{item.sl?`${item.sl}个`:'--'}}</div>
+                </div>
+                <div class='attribution'>
+                  <div class='label'>金额:</div>
+                  <div class='value'>{{item.zfje?`${item.zfje}万元`:'--'}}</div>
+                </div>
+              </div>
+              <div class='equipment-item'>
+                <div class='label'>处理日期:</div>
+                <div class='value'>{{item.handledate | formatDate}}</div>
+              </div>
+              <div class='equipment-item'>
+                <div class='label'>记录日期:</div>
+                <div class='value'>{{item.createdate | formatDate}}</div>
+              </div>
+              <div class='floor-status'>
+                <div class='floor'>
+                  <div class='label'>
+                    <i class='iconfont wanda-dingwei1' style='color:#C3C7CB;'></i>
+                    <span>位置:</span>
+                  </div>
+                  <div class='value'>{{item.description || '--'}}</div>
+                </div>
+                <div class='status run' v-if='item.sb_status === "运行"'>运行</div>
+                <div class='status wx' v-else-if='item.sb_status === "维修"'>维修</div>
+                <div class='status wb' v-else-if='item.sb_status === "维保"'>维保</div>
+              </div>
+              <div class='divider'></div>
+            </div>
+          </van-list>
+        </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="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="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 { getUpdateDetail5 } 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: "OtherMatters",
+  props: {},
+  components: { RepairMaintenance },
+  computed: {
+    ...mapGetters(["plazaId", "smsxt", "floorsArr"]),
+  },
+  filters: {
+    formatDate(value) {
+      if (!value) return '--'
+      return moment(value).format('YYYY-MM-DD HH:MM')
+    },
+  },
+  data() {
+    return {
+      showPopup: false,
+      dataList: [],
+      keyword: "",
+      loading: false,
+      finished: false,
+      page: 1, //当前页码
+      size: 10, //每页条数
+      fillinList: [
+        { text: "全部", value: 0, active: "active" },
+        { text: "30天", value: 1, active: "" },
+        { text: "3个月", value: 2, active: "" },
+        { text: "6个月", value: 3, active: "" },
+        { text: "1年", value: 4, active: "" },
+        { text: "自定义", value: 5, active: "" },
+      ],
+      acceptanceList: [
+        { text: "全部", value: 0, active: "active" },
+        { text: "30天", value: 1, active: "" },
+        { text: "3个月", value: 2, active: "" },
+        { text: "6个月", value: 3, active: "" },
+        { text: "1年", value: 4, active: "" },
+        { text: "自定义", value: 5, active: "" },
+      ],
+      fillinDate: 0,
+      acceptanceDate: 0,
+    };
+  },
+  props: {},
+  beforeMount() { },
+  created() {},
+  mounted() {
+    this.getData();
+  },
+  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 getParams = {
+        plazaId: this.plazaId,
+        smsxt: this.smsxt,
+        page: this.page,
+        size: this.size,
+      }
+      // 查询关键字(设备名称)
+      if (this.keyword) {
+        getParams.keyword = `${this.keyword}:jlsx,location,content`;
+      }
+      getUpdateDetail5({ getParams }).then((res) => {
+        if (res.result == "success" && res.data) {
+          this.dataList = res.data;
+        }
+        // 数据全部加载完成
+        if (this.dataList.length >= res.count) {
+          this.finished = true;
+        }
+      });
+    },
+    onLoad() {
+      // 异步更新数据
+      this.page++;
+      let getParams = {
+        plazaId: this.plazaId,
+        smsxt: this.smsxt,
+        page: this.page,
+        size: this.size,
+      }
+      //查询关键字(设备名称)
+      if (this.keyword) {
+        getParams.keyword = `${this.keyword}:jlsx,location,content`;;
+      }
+      getUpdateDetail5({ getParams }).then((res) => {
+        if (res.result == "success" && res.data) {
+          this.dataList = this.dataList.concat(res.data);
+        }
+
+        // 加载状态结束
+        this.loading = false;
+
+        // 数据全部加载完成
+        if (this.dataList.length >= res.count) {
+          this.finished = true;
+        }
+      });
+    },
+    /**
+     * 重置
+     */
+    reset() {
+      this.floorList.map((item, index) => {
+        item.active = ''
+        if (index === 0) {
+          item.active = 'active';
+          this.floorId = "";
+        }
+      })
+      this.getData();
+      this.showPopup = false;
+    },
+    /**
+     * 弹窗确认
+     */
+    confirm() {
+      this.getData();
+      this.showPopup = false;
+    },
+  }
+};
+</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;
+        background-color: #ffffff;
+        .equipment {
+          width: 100%;
+          position: relative;
+          padding: 16px 10px 0;
+          .title {
+            // height: 44px;
+            font-size: 16px;
+            font-weight: 500;
+            color: #333333;
+            line-height: 22px;
+            margin-bottom: 12px;
+          }
+          .assetnum-attribution {
+            margin-bottom: 8px;
+            display: flex;
+            width: 100%;
+            height: 20px;
+            line-height: 20px;
+            justify-content: space-between;
+            .assetnum,
+            .attribution {
+              display: flex;
+            }
+          }
+          .equipment-item {
+            display: flex;
+            margin-bottom: 8px;
+            width: 100%;
+            line-height: 20px;
+          }
+          .floor-status {
+            margin: 12px 0 16px;
+            display: flex;
+            justify-content: space-between;
+            width: 100%;
+            height: 20px;
+            line-height: 20px;
+            .floor {
+              display: flex;
+              height: 20px;
+              line-height: 20px;
+              .label {
+                display: flex;
+                align-items: center;
+                span {
+                  display: inline-block;
+                  margin-left: 5px;
+                }
+              }
+            }
+            .status {
+              background: #d9f5d6;
+              width: 44px;
+              height: 24px;
+              line-height: 24px;
+              text-align: center;
+              font-size: 14px;
+              font-weight: 400;
+            }
+            .run {
+              background: #d9f5d6;
+              color: #237b19;
+            }
+            // 维修
+            .wx {
+              background: #fbeceb;
+              color: #d83931;
+            }
+            // 维保
+            .wb {
+              background: #e6f3fc;
+              color: #0481e1;
+            }
+          }
+          .label {
+            color: #666;
+            font-size: 14px;
+          }
+          .value {
+            flex: 1;
+            color: #333;
+            font-size: 14px;
+          }
+          // 底部1px边框
+          .divider {
+            width: 100%;
+            height: 1px;
+            margin: 0 auto;
+            background: #e6e6e6;
+          }
+        }
+      }
+      // 空状态
+      .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;
+          }
+        }
+      }
+    }
+  }
+
+  .other-tabs {
+    /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: 90%;
+        margin: 0 auto;
+      }
+    }
+  }
+
+  // 筛选弹窗
+  .m-popup-container {
+    width: 80%;
+    height: 100%;
+    padding: 55px 20px 10px 20px;
+    .m-popup {
+      width: 100%;
+      height: calc(100% - 81px);
+      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>

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

@@ -579,7 +579,7 @@ export default {
          * 其他事项
          */
         handleOtherMatter(item) {
-            //    this.$router.push({ name: '', params: {} })
+            this.$router.push({ name: 'OtherMatters', params: {} })
         },
         /**
          * 跳转 楼层分布

+ 86 - 0
src/views/overview/MapOther.vue

@@ -4,7 +4,21 @@
       <template #left>
         <van-icon name="arrow-left" size="18" color="#333333" />
       </template>
+      <template #right v-if="legendList.length">
+        <span style="color:#333333;">图例</span>
+      </template>
     </van-nav-bar>
+    <transition name="van-slide-down">
+      <div class="legendBox" v-show="show" @touchmove="show=false">
+        <ul class="legend-list">
+          <li class="legend-item" v-for="(item, index) in legendList" :key="`legend${index}`">
+            <img :src="`/serve/topology-wanda/Picture/query/${item.Url}`" alt>
+            {{`${item.Name}×${item.Num}`}}
+          </li>
+        </ul>
+        <p class="legend-close" @click="show = false"></p>
+      </div>
+    </transition>
     <div id="bind-map-content">
       <canvas id="bind-canvas" ref="bind-canvas" tabindex="0"></canvas>
       <!-- 地图底部操作按钮 -->
@@ -63,6 +77,8 @@ export default {
       topologyParser: null, // 解析器数据
       fParser: null, // 底图解析器
       direction: '竖屏',
+      show: false,
+      legendList: [], // 图例列表
     }
   },
   props: {},
@@ -95,9 +111,35 @@ export default {
       }
       this.$router.go(-1);
     },
+    // 展示图例
+    showLegend() {
+      if(this.legendList.length) {
+        this.show = true;
+      }
+    },
+    // 获取图例数据
+    getLegendData(floorObj) {
+      let params = {
+        BuildingID: '1',
+        CategoryID: this.categoryId,
+        ProjectID: this.plazaId,
+        Floors: [{FloorId: floorObj.gname, FloorName: floorObj.code}]
+      }
+      this.legendList = [];
+      if (this.categoryId !== "SCPZ") {
+        appGraphElementQuery(params).then(res => {
+          if(res.Data[0] && res.Data[0].Statistics && res.Data[0].Statistics.length) {
+            this.legendList = res.Data[0].Statistics.filter(item => {
+              return item.Url && item.Type === "Image"
+            });
+          }
+        })
+      }
+    },
     // 切换楼层
     emitFloor(floorObj) {
       if (floorObj) {
+        this.getLegendData(floorObj);
         this.$nextTick(() => {
           this.floorid = floorObj.gname;
           this.floorName = floorObj.code;
@@ -509,6 +551,50 @@ export default {
   overflow: hidden;
   display: flex;
   flex-direction: column;
+  /deep/ .van-nav-bar {
+    z-index: 999;
+  }
+  .legendBox {
+    position: fixed;
+    top: 46px;
+    width: 100%;
+    height: auto;
+    padding: 16px 10px 0;
+    z-index: 99;
+    background: #FFFFFF;
+    box-shadow: 0px 6px 15px 0px rgba(31, 36, 41, 0.08);
+    .legend-list {
+      display: flex;
+      justify-content: space-between;
+      flex-wrap: wrap;
+      .legend-item {
+        padding: 0 8px;
+        height: 24px;
+        font-size: 12px;
+        color: #1F2429;
+        line-height: 24px;
+        background: #E4E6E7;
+        border-radius: 12px;
+        margin: 0 5px 12px;
+          img {
+            display: inline-block;
+            max-width: 16px;
+            max-height: 16px;
+            vertical-align: text-bottom;
+          }
+      }
+      .legend-item:last-child {
+        margin-right: auto;
+      }
+    }
+    .legend-close {
+      margin: 10px auto 7px;
+      width: 56px;
+      height: 4px;
+      border-radius: 5px;
+      background: #D8D8D8;
+    }
+  }
   #bind-map-content {
     width: 100%;
     height: calc(100% - 50px);