Merge branch 'develop_jzl'

gassafety-web/src/components/PopWindowGis/lineInfoWindow.vue

@@ -7,7 +7,7 @@
       </div>
     </div>
 
-    <!-- 设备信息 -->
+    <!-- 报警设备信息 -->
     <div class="content">
       <div class="eq-content display-default">
         <div class="text-wrapper">
@@ -59,11 +59,7 @@
         <el-col :span="13">
           <div>
             <span>最后巡检日期：</span>
-            <span>{{
-              obj.inspectionTime
-                ? obj.inspectionTime
-                : "-"
-            }}</span>
+            <span>{{ obj.inspectionTime ? obj.inspectionTime : "-" }}</span>
           </div>
         </el-col>
 
@@ -71,23 +67,24 @@
           <span>管道所在地址：</span>
           <span>{{ obj.pipeAddr }}</span>
         </div>
-        <div>
+        <div style="padding: 0">
           <span>备注信息：</span>
           <span>{{ obj.remarks }} </span>
         </div>
       </div>
-      <template v-if="!obj.editorPage">
-        <div class="warn-content">
-          <div>报警状态 <span>报警</span></div>
-          <div>详细信息：<span>管线两端设备压差较大，管线可能泄漏</span></div>
     </div>
+
+    <!-- 报警状态 -->
+    <div class="warn-wrapper" v-if="true">
+      <!-- <div class="warn-content">
+        <div>报警状态：<span>报警</span></div>
+        <div>详细信息：<span>管线两端设备压差较大，管线可能泄漏</span></div>
+      </div> -->
       <div class="btn">
-          <el-button class="elbtn" type="primary">生成工单</el-button>
+        <el-button class="elbtn" type="primary">设备详情</el-button>
+        <!-- <el-button class="elbtn" type="primary">生成工单</el-button> -->
       </div>
-      </template>
     </div>
-
-    <!-- 报警状态 -->
   </div>
 </template>
 
@@ -135,15 +132,15 @@ export default {
 <style lang="scss" scoped>
 .wrapper {
   width: 406px;
-  // height: 488px;
+  max-height: 430px;
   background: #fff;
   border-radius: 4px;
   box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);
-  // overflow: hidden;
+  overflow: hidden;
   .top {
     width: 100%;
     height: 51px;
-    background-color: #053b6a;
+    background-color: #053B6A;
     .text {
       font-weight: 600;
       font-size: 16px;
@@ -162,9 +159,11 @@ export default {
   }
   .content {
     position: relative;
-    max-height: 400px;
+    max-height: 300px;
     overflow: hidden;
     overflow-y: auto;
+    padding-bottom: 2px;
+    border-bottom: 1px solid #eeeeee;
     .eq-content {
       // min-height: 156px;
       box-sizing: border-box;
@@ -209,7 +208,7 @@ export default {
     max-height: 119px;
     padding-left: 22px;
     // padding-right: 22px;
-    padding-bottom: 10px;
+    // padding-bottom: 10px;
     // padding-top: 16px;
     box-sizing: border-box;
     // border-bottom: 1px solid #e2e2e2;
@@ -225,12 +224,12 @@ export default {
       }
     }
   }
-
+  .warn-wrapper {
     .warn-content {
-    height: 82px;
       box-sizing: border-box;
-    padding: 8px 0 0 22px;
+      padding: 10px 0 2px 22px;
       border-bottom: 1px solid #e2e2e2;
+      color:#FE5966;
       & > div {
         font-size: 14px;
         font-weight: 400;
@@ -238,7 +237,7 @@ export default {
       }
     }
     .btn {
-    padding-top: 32px;
+      padding: 16px 0;
       text-align: center;
       .elbtn {
         background-color: #053b6a;
@@ -247,6 +246,7 @@ export default {
         height: 33px;
       }
     }
+  }
 }
 
 .wrapperEditorPage {

gassafety-web/src/components/PopWindowGis/markerInfoWindow.vue

@@ -2,19 +2,31 @@
   <div class="wrapper">
     <span class="dot-left"></span>
     <div class="top display-default">
-      <div class="left text">{{data.deviceName}}</div>
+      <div class="left text">{{ data.deviceName }}</div>
       <div class="right text">
-        <img src="../../assets/images/closeBtn.png" alt="" @click="map.clearInfoWindow()"/>
+        <img
+          src="../../assets/images/closeBtn.png"
+          alt=""
+          @click="map.clearInfoWindow()"
+        />
       </div>
     </div>
     <!-- 设备信息 -->
     <div class="content">
       <div class="eq-content display-default">
         <div class="text-wrapper">
-          <div class="eq-text">设备类型：<span>{{title}}</span></div>
-          <div class="eq-text">设备型号：<span>{{data.deviceModel}}</span></div>
-          <div class="eq-text">所属管道：<span>{{data.pipeCode}}</span></div>
-          <div class="eq-text">物联网编号：<span>{{data.iotNo}}</span></div>
+          <div class="eq-text">
+            设备类型：<span>{{ title }}</span>
+          </div>
+          <div class="eq-text">
+            设备型号：<span>{{ data.deviceModel }}</span>
+          </div>
+          <div class="eq-text">
+            所属管道：<span>{{ data.pipeCode }}</span>
+          </div>
+          <div class="eq-text">
+            物联网编号：<span>{{ data.iotNo }}</span>
+          </div>
         </div>
         <div class="pic">
           <img v-bind:src="data.iconUrl" alt="" />
@@ -25,18 +37,16 @@
         <el-col :span="11">
           <div>
             <span>安装日期：</span>
-            <span>{{ moment(data.installationTime).format("YYYY-MM-DD") }}</span>
+            <span>{{
+              moment(data.installationTime).format("YYYY-MM-DD")
+            }}</span>
           </div>
         </el-col>
 
         <el-col :span="13">
           <div>
             <span>最后巡检日期：</span>
-            <span>{{
-              data.inspectionTime
-                ? data.inspectionTime
-                : "-"
-            }}</span>
+            <span>{{ data.inspectionTime ? data.inspectionTime : "-" }}</span>
           </div>
         </el-col>
 
@@ -49,37 +59,42 @@
           <span>{{ data.remarks }} </span>
         </div>
       </div>
+    </div>
+
     <!-- 报警状态 -->
-      <!--<div class="warn-content">
-        <div>报警状态 <span>报警</span></div>
+    <div class="warn-wrapper" v-if="true">
+      <!-- <div class="warn-content">
+        <div>报警状态：<span>报警</span></div>
         <div>详细信息：<span>管线两端设备压差较大，管线可能泄漏</span></div>
-      </div>-->
+      </div> -->
+      <div class="btn">
+        <el-button class="elbtn" type="primary">设备详情</el-button>
+        <!-- <el-button class="elbtn" type="primary">生成工单</el-button> -->
+      </div>
     </div>
-
   </div>
 </template>
 
 <script>
-import moment from "moment"
+import moment from "moment";
 //line移入时的的infowindow
 export default {
   props: {
     obj: { typs: Object },
     title: "",
     data: {},
-    map: null
+    map: null,
   },
-  methods:{
+  methods: {
     moment,
-  }
-
+  },
 };
 </script>
 
 <style lang="scss" scoped>
 .wrapper {
   width: 406px;
-  // height: 488px;
+  max-height: 430px;
   background: #fff;
   border-radius: 4px;
   box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);
@@ -106,9 +121,11 @@ export default {
   }
   .content {
     position: relative;
-    max-height: 400px;
+    max-height: 300px;
     overflow: hidden;
     overflow-y: auto;
+    padding-bottom: 2px;
+    border-bottom: 1px solid #eeeeee;
     .eq-content {
       // min-height: 156px;
       box-sizing: border-box;
@@ -153,7 +170,7 @@ export default {
     max-height: 119px;
     padding-left: 22px;
     // padding-right: 22px;
-    padding-bottom: 10px;
+    // padding-bottom: 10px;
     // padding-top: 16px;
     box-sizing: border-box;
     // border-bottom: 1px solid #e2e2e2;
@@ -169,12 +186,12 @@ export default {
       }
     }
   }
-
+  .warn-wrapper {
     .warn-content {
-    height: 82px;
       box-sizing: border-box;
-    padding: 8px 0 0 22px;
+      padding: 10px 0 2px 22px;
       border-bottom: 1px solid #e2e2e2;
+      color: #fe5966;
       & > div {
         font-size: 14px;
         font-weight: 400;
@@ -182,7 +199,7 @@ export default {
       }
     }
     .btn {
-    padding-top: 32px;
+      padding: 16px 0;
       text-align: center;
       .elbtn {
         background-color: #053b6a;
@@ -191,6 +208,7 @@ export default {
         height: 33px;
       }
     }
+  }
 }
 
 .wrapperEditorPage {
@@ -199,5 +217,4 @@ export default {
   display: flex;
   justify-content: space-between;
 }
-
 </style>

gassafety-web/src/components/PopWindowGis/markerInfoWindowWarn.vue

+<template>
+  <div class="wrapper">
+    <span class="dot-left"></span>
+    <div class="top display-default">
+      <div class="left text">{{ data.deviceName }}</div>
+      <div class="right text">
+        <img
+          src="../../assets/images/closeBtn.png"
+          alt=""
+          @click="map.clearInfoWindow()"
+        />
+      </div>
+    </div>
+    <!-- 设备信息 -->
+    <div class="content">
+      <div class="eq-content display-default">
+        <div class="text-wrapper">
+          <div class="eq-text">
+            设备类型：<span>{{ title }}</span>
+          </div>
+          <div class="eq-text">
+            设备型号：<span>{{ data.deviceModel }}</span>
+          </div>
+          <div class="eq-text">
+            所属管道：<span>{{ data.pipeCode }}</span>
+          </div>
+          <div class="eq-text">
+            物联网编号：<span>{{ data.iotNo }}</span>
+          </div>
+        </div>
+        <div class="pic">
+          <img v-bind:src="data.iconUrl" alt="" />
+        </div>
+      </div>
+      <!-- 维修人员 -->
+      <div class="maintain-content">
+        <el-col :span="11">
+          <div>
+            <span>安装日期：</span>
+            <span>{{
+              moment(data.installationTime).format("YYYY-MM-DD")
+            }}</span>
+          </div>
+        </el-col>
+
+        <el-col :span="13">
+          <div>
+            <span>最后巡检日期：</span>
+            <span>{{ data.inspectionTime ? data.inspectionTime : "-" }}</span>
+          </div>
+        </el-col>
+
+        <div>
+          <span>管道所在地址：</span>
+          <span>{{ data.pipeAddr }}</span>
+        </div>
+        <div>
+          <span>备注信息：</span>
+          <span>{{ data.remarks }} </span>
+        </div>
+      </div>
+    </div>
+
+    <!-- 报警状态 -->
+    <div class="warn-wrapper" v-if="true">
+      <!-- <div class="warn-content">
+        <div>报警状态：<span>报警</span></div>
+        <div>详细信息：<span>管线两端设备压差较大，管线可能泄漏</span></div>
+      </div> -->
+      <div class="btn">
+        <el-button class="elbtn" type="primary">设备详情</el-button>
+        <el-button class="elbtn" type="primary">生成工单</el-button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import moment from "moment";
+//line移入时的的infowindow
+export default {
+  props: {
+    obj: { typs: Object },
+    title: "",
+    data: {},
+    map: null,
+  },
+  methods: {
+    moment,
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.wrapper {
+  width: 406px;
+  max-height: 430px;
+  background: #fff;
+  border-radius: 4px;
+  box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);
+  overflow: hidden;
+  .top {
+    width: 100%;
+    height: 51px;
+    background-color: #FF5A67;
+    .text {
+      font-weight: 600;
+      font-size: 16px;
+      color: #ffffff;
+      line-height: 51px;
+    }
+    .left {
+      padding-left: 22px;
+    }
+    .right {
+      padding-right: 22px;
+      img {
+        cursor: pointer;
+      }
+    }
+  }
+  .content {
+    position: relative;
+    max-height: 300px;
+    overflow: hidden;
+    overflow-y: auto;
+    padding-bottom: 2px;
+    border-bottom: 1px solid #eeeeee;
+    .eq-content {
+      // min-height: 156px;
+      box-sizing: border-box;
+      padding: 13px 22px 0px 22px;
+      // border-bottom: 1px solid #e2e2e2;
+      .text-wrapper {
+        padding-top: 1px;
+        & > div {
+          margin-bottom: 6px;
+        }
+        .eq-text {
+          font-size: 14px;
+          font-weight: 400;
+          color: #1d1d1d;
+          opacity: 1;
+          & > span {
+            vertical-align: top;
+            display: inline-block;
+            // white-space: nowrap;
+            // text-overflow: ellipsis;
+            // overflow: hidden;
+            word-break: break-all;
+            max-width: 100px;
+          }
+        }
+      }
+      .pic {
+        width: 180px;
+        height: 103px;
+        // background-color: black;
+        img {
+          width: 100%;
+          height: 100%;
+          // cursor: pointer;
+        }
+      }
+    }
+  }
+
+  .maintain-content {
+    width: 100%;
+    max-height: 119px;
+    padding-left: 22px;
+    // padding-right: 22px;
+    // padding-bottom: 10px;
+    // padding-top: 16px;
+    box-sizing: border-box;
+    // border-bottom: 1px solid #e2e2e2;
+    & > div {
+      margin-bottom: 8px;
+      font-size: 14px;
+      font-weight: 400;
+      span {
+        vertical-align: top;
+        display: inline-block;
+        word-break: break-all;
+        max-width: 280px;
+      }
+    }
+  }
+  .warn-wrapper {
+    .warn-content {
+      box-sizing: border-box;
+      padding: 10px 0 2px 22px;
+      border-bottom: 1px solid #e2e2e2;
+      color: #fe5966;
+      & > div {
+        font-size: 14px;
+        font-weight: 400;
+        margin-bottom: 8px;
+      }
+    }
+    .btn {
+      padding: 16px 0;
+      text-align: center;
+      .elbtn {
+        background-color: #053b6a;
+        box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);
+        width: 95px;
+        height: 33px;
+      }
+    }
+  }
+}
+
+.wrapperEditorPage {
+}
+.display-default {
+  display: flex;
+  justify-content: space-between;
+}
+</style>

gassafety-web/src/components/TopNav/index.vue

@@ -37,6 +37,7 @@
 
 <script>
 import { constantRoutes } from "@/router";
+
 import "../../common/font/font.css";
 export default {
   data() {
@@ -47,6 +48,7 @@ export default {
       isFrist: false,
       // 当前激活菜单的 index
       currentIndex: undefined,
+      myRouter: [],
     };
   },
   computed: {
@@ -133,7 +135,9 @@ export default {
     },
     // 菜单选择事件
     handleSelect(key, keyPath) {
-      console.log(key)
+      console.log("key", key);
+      console.log("keypath", keyPath);
+      let path;
       this.currentIndex = key;
       if (this.ishttp(key)) {
         // http(s):// 路径新窗口打开
@@ -143,7 +147,18 @@ export default {
         this.$router.push({ path: key.replace("/redirect", "") });
       } else {
         // 显示左侧联动菜单
-        this.activeRoutes(key);
+        path = this.activeRoutes(key);
+        if (this.$route.path != path[0].path) {
+          this.$router.push(path[0].path);
+        }
+
+        // if (key == "/enterprise") {
+        //   // this.$store.commit("TOGGLE_DEVICE","mobile");
+        //   this.$store.dispatch("app/toggleDevice", "mobile");
+        // } else {
+        //   this.$store.dispatch("app/toggleDevice", "desktop");
+        // }
+        // TOGGLE_DEVICE
       }
     },
     // 当前激活的路由
@@ -156,9 +171,14 @@ export default {
           }
         });
       }
+
+      // console.log(this.myRouter)
+
+      // console.log(this.myRouter)
       if (routes.length > 0) {
         this.$store.commit("SET_SIDEBAR_ROUTERS", routes);
       }
+
       return routes;
     },
     ishttp(url) {

gassafety-web/src/layout/mixin/ResizeHandler.js

-import store from '@/store'
+import store from "@/store";
 
-const { body } = document
-const WIDTH = 992 // refer to Bootstrap's responsive design
+const { body } = document;
+const WIDTH = 992; // refer to Bootstrap's responsive design
 
 export default {
   watch: {
     $route(route) {
-      if (this.device === 'mobile' && this.sidebar.opened) {
-        store.dispatch('app/closeSideBar', { withoutAnimation: false })
+      if (this.device === "mobile" && this.sidebar.opened) {
+        store.dispatch("app/closeSideBar", { withoutAnimation: false });
       }
     }
   },
   beforeMount() {
-    window.addEventListener('resize', this.$_resizeHandler)
+    window.addEventListener("resize", this.$_resizeHandler);
   },
   beforeDestroy() {
-    window.removeEventListener('resize', this.$_resizeHandler)
+    window.removeEventListener("resize", this.$_resizeHandler);
   },
   mounted() {
-    const isMobile = this.$_isMobile()
+    const isMobile = this.$_isMobile();
     if (isMobile) {
-      store.dispatch('app/toggleDevice', 'mobile')
-      store.dispatch('app/closeSideBar', { withoutAnimation: true })
+      store.dispatch("app/toggleDevice", "mobile");
+      store.dispatch("app/closeSideBar", { withoutAnimation: true });
     }
   },
   methods: {
     // use $_ for mixins properties
     // https://vuejs.org/v2/style-guide/index.html#Private-property-names-essential
     $_isMobile() {
-      const rect = body.getBoundingClientRect()
-      return rect.width - 1 < WIDTH
+      const rect = body.getBoundingClientRect();
+      return rect.width - 1 < WIDTH;
     },
     $_resizeHandler() {
       if (!document.hidden) {
-        const isMobile = this.$_isMobile()
-        store.dispatch('app/toggleDevice', isMobile ? 'mobile' : 'desktop')
+        const isMobile = this.$_isMobile();
+        // console.log(this.$route.path)
+        // 当是gis地图的时候左边隐藏
+        if (this.$route.path == "/enterprise/mapView") {
+          store.dispatch("app/toggleDevice", "mobile");
+        } else {
+          store.dispatch("app/toggleDevice", isMobile ? "mobile" : "desktop");
+        }
 
         if (isMobile) {
-          store.dispatch('app/closeSideBar', { withoutAnimation: true })
+          store.dispatch("app/closeSideBar", { withoutAnimation: true });
         }
       }
     }
   }
-}
+};

gassafety-web/src/permission.js

-import router from './router'
-import store from './store'
-import { Message } from 'element-ui'
-import NProgress from 'nprogress'
-import 'nprogress/nprogress.css'
-import { getToken } from '@/utils/auth'
+import router from "./router";
+import store from "./store";
+import { Message } from "element-ui";
+import NProgress from "nprogress";
+import "nprogress/nprogress.css";
+import { getToken } from "@/utils/auth";
 
-NProgress.configure({ showSpinner: false })
+NProgress.configure({ showSpinner: false });
 
-const whiteList = ['/login', '/auth-redirect', '/bind', '/register']
+const whiteList = ["/login", "/auth-redirect", "/bind", "/register"];
 
 router.beforeEach((to, from, next) => {
-  NProgress.start()
+  NProgress.start();
   if (getToken()) {
     /* has token*/
-    if (to.path === '/login') {
-      next({ path: '/' })
-      NProgress.done()
+    if (to.path === "/login") {
+      next({ path: "/" });
+      NProgress.done();
     } else {
       if (store.getters.roles.length === 0) {
         // 判断当前用户是否已拉取完user_info信息
-        store.dispatch('GetInfo').then(() => {
-          store.dispatch('GenerateRoutes').then(accessRoutes => {
+        store
+          .dispatch("GetInfo")
+          .then(() => {
+            store.dispatch("GenerateRoutes").then(accessRoutes => {
               // 根据roles权限生成可访问的路由表
-            router.addRoutes(accessRoutes) // 动态添加可访问路由表
-            next({ ...to, replace: true }) // hack方法 确保addRoutes已完成
-          })
-        }).catch(err => {
-            store.dispatch('LogOut').then(() => {
-              Message.error(err)
-              next({ path: '/' })
-            })
+              router.addRoutes(accessRoutes); // 动态添加可访问路由表
+              next({ ...to, replace: true }); // hack方法 确保addRoutes已完成
+            });
           })
+          .catch(err => {
+            store.dispatch("LogOut").then(() => {
+              Message.error(err);
+              next({ path: "/" });
+            });
+          });
       } else {
-        next()
+        next();
       }
     }
   } else {
     // 没有token
     if (whiteList.indexOf(to.path) !== -1) {
       // 在免登录白名单，直接进入
-      next()
+      next();
     } else {
-      next(`/login?redirect=${to.fullPath}`) // 否则全部重定向到登录页
-      NProgress.done()
+      next(`/login?redirect=${to.fullPath}`); // 否则全部重定向到登录页
+      NProgress.done();
     }
   }
-})
+});
 
-router.afterEach(() => {
-  NProgress.done()
-})
+router.afterEach((to, from) => {
+  // console.log('全局后置钩子',to, from)
+  if (to.path == "/enterprise/mapView") {
+    store.dispatch("app/toggleDevice", "mobile");
+  } else {
+    store.dispatch("app/toggleDevice", "desktop");
+  }
+  NProgress.done();
+});

gassafety-web/src/store/modules/app.js

@@ -26,6 +26,7 @@ const mutations = {
   },
   TOGGLE_DEVICE: (state, device) => {
     state.device = device
+    console.log(123)
   },
   SET_SIZE: (state, size) => {
     state.size = size

gassafety-web/src/store/modules/permission.js

@@ -9,7 +9,8 @@ const permission = {
     addRoutes: [],
     defaultRoutes: [],
     topbarRouters: [],
-    sidebarRouters: []
+    sidebarRouters: [],
+    mySidebarRouters:[],
   },
   mutations: {
     SET_ROUTES: (state, routes) => {
@@ -28,8 +29,10 @@ const permission = {
       state.topbarRouters = routes.concat(index);
     },
     SET_SIDEBAR_ROUTERS: (state, routes) => {
-      state.sidebarRouters = routes
+      state.sidebarRouters = routes;
+      state.mySidebarRouters = routes;
     },
+
   },
   actions: {
     // 生成路由

gassafety-web/src/utils/gaodeMapView.js

@@ -3,9 +3,12 @@ import regulatorBox from "../components/PopWindow/regulatorBox.vue";
 import valveWell from "../components/PopWindow/valveWell.vue";
 import flowMeter from "../components/PopWindow/flowMeter.vue";
 import pipelineView from "../components/PopWindow/pipelineView.vue";
-import lineInfoWindow from "../components/PopWindowGis/lineInfoWindowWarn.vue";
-import { delDeviceInfo } from "@/api/device/deviceInfo";
+import lineInfoWindow from "../components/PopWindowGis/lineInfoWindow.vue";
 import markerInfoWindow from "../components/PopWindowGis/markerInfoWindow.vue";
+import markerInfoWindowWarn from "../components/PopWindowGis/markerInfoWindowWarn.vue";
+import lineInfoWindowWarn from "../components/PopWindowGis/lineInfoWindowWarn.vue";
+import { delDeviceInfo } from "@/api/device/deviceInfo";
+
 import workerManInfowindow from "../components/PopWindowGis/workerManInfowindow.vue";
 import workerManView from "../components/PopWindowGis/workerManView.vue";
 
@@ -341,7 +344,9 @@ class gaodeMap {
    * @returns {string}
    */
   getMarketContent(data) {
+    // let markerInfoWindow = markerInfoWindowWarn;
     switch (this.markerType) {
+
       case DEVICE_TYPE.REGEULATORBOX: {
         const dom = createPop(markerInfoWindow, {
           title: "调压箱",

gassafety-web/src/views/enterprise/mapView/components/RightBototmData.vue

 <template>
   <div class="wrapper">
     <div class="left">
-      <div class="top">设备报警最新记录</div>
+      <div class="top">
+        <span>设备报警最新记录</span>
+        <span @click="repeatClick" class="repeat">刷新</span>
+        <span @click="moreClick" class="more">更多</span>
+      </div>
 
       <div class="bottom right-bottom-data-left">
         <!-- <div class="table-top">
@@ -13,16 +17,21 @@
         </div> -->
         <!-- <div class="one">设备编号:<span>1123123123</span></div>
         <div class="two">报警时间:<span>34523452345</span></div> -->
-        <el-table size="mini"  :data="tableData" style="width: 100%" height="170">
-          <el-table-column prop="date" label="编号" width="150">
+        <el-table
+          size="mini"
+          :data="tableData"
+          style="width: 100%"
+          height="170"
+        >
+          <el-table-column prop="deviceCode" label="编号" width="100">
           </el-table-column>
-          <el-table-column prop="name" label="名称" width="120">
+          <el-table-column prop="deviceName" label="名称" width="">
           </el-table-column>
-          <el-table-column prop="province" label="类型" width="80">
+          <el-table-column prop="alarmType" label="报警类型" width="80">
           </el-table-column>
-          <el-table-column prop="city" label="时间" width="120">
+          <el-table-column prop="createTime" label="报警开始时间" width="170">
           </el-table-column>
-          <el-table-column prop="address" label="内容" width="">
+          <el-table-column prop="alarmValue" label="报警内容" width="100">
           </el-table-column>
         </el-table>
       </div>
@@ -54,6 +63,8 @@
 </template>
 
 <script>
+import { listDeviceAlarm } from "@/api/dataMonitoring/deviceAlarm";
+
 export default {
   props: {
     list: {
@@ -78,7 +89,7 @@ export default {
       },
       tableData: [
         {
-          date: "2016-05-03",
+          deviceCode: "2016-05-03",
           name: "王小虎",
           province: "上海",
           city: "普陀区",
@@ -131,11 +142,45 @@ export default {
   },
   created() {
     console.log("list", this.list);
+    this.getList();
   },
+
   methods: {
     iconClass(item) {
       return this.iconList[item.type];
     },
+    moreClick() {
+      this.$router.push("/dataMonitoring/deviceAlarm");
+      // route.push(`dataMonitoring/deviceAlarm`)
+    },
+    repeatClick(){
+      this.getList();
+    },
+    getList() {
+      this.loading = true;
+      listDeviceAlarm({ pageNum: 1, pageSize: 10 }).then((res) => {
+        if (res.code == 200) {
+          const arr = res.rows.map((item) => {
+            const {
+              deviceCode,
+              deviceName,
+              alarmType,
+              createTime,
+              alarmValue,
+            } = item;
+            return {
+              deviceCode,
+              deviceName,
+              alarmType,
+              createTime,
+              alarmValue,
+            };
+          });
+          console.log(arr);
+          this.tableData=arr
+        }
+      });
+    },
   },
 };
 </script>
@@ -147,14 +192,14 @@ export default {
   position: fixed;
   right: 10px;
   bottom: 10px;
-  overflow:hidden;
+  overflow: hidden;
   // background-color: #fff;
   display: flex;
   justify-content: space-between;
   & > div {
   }
   .left {
-    width: 778px;
+    width: 680px;
     margin-right: 12px;
     box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.16);
     // background-color: #fff;
@@ -167,6 +212,25 @@ export default {
       color: #fff;
       line-height: 32px;
       padding-left: 12px;
+      // position: relative;
+      span {
+        display: inline-block;
+      }
+      .repeat {
+        margin-left: 20px;
+        cursor: pointer;
+        &:hover {
+          color: #2788ea;
+        }
+      }
+      .more {
+        float: right;
+        margin-right: 20px;
+        cursor: pointer;
+        &:hover {
+          color: #2788ea;
+        }
+      }
     }
     .bottom {
       .table-top {
@@ -186,7 +250,7 @@ export default {
     flex-wrap: wrap;
     // justify-content: space-between;
     align-content: flex-start;
-    margin-top:7px;
+    margin-top: 7px;
     & > .right-content {
       background-color: #fff;
       width: 238px;

gassafety-web/src/views/enterprise/mapView/index.vue

@@ -94,7 +94,12 @@
       </div>
     </div>
 
-    <RightBototmData v-show="bottomDataShow" :class="{classShow:!bottomDataShow}" ref="RightBototmData" :list="rightBototmData" />
+    <RightBototmData
+      v-show="bottomDataShow"
+      :class="{ classShow: !bottomDataShow }"
+      ref="RightBototmData"
+      :list="rightBototmData"
+    />
   </div>
 </template>
 <script>
@@ -168,9 +173,13 @@ export default {
       keyWord: "",
       // 右下角的数据data
       rightBototmData: [],
-      bottomDataShow:true,
+      bottomDataShow: true,
     };
   },
+  created() {
+    // 让左边的框隐藏
+    this.$store.dispatch("app/toggleDevice", "mobile");
+  },
   mounted() {
     this.initMap();
   },
@@ -185,7 +194,6 @@ export default {
       this.getPipeList();
       // 右下角数据
       this.rightBottomData();
-
     },
     // 右下角数据
     async rightBottomData() {
@@ -447,7 +455,7 @@ export default {
     // 新建下拉列表关闭 window点击事件
     barClose() {
       // 一点windowbottomData显示
-      this.bottomDataShow=true;
+      this.bottomDataShow = true;
       // return;
       console.log("window");
       this.deviceType = false;
@@ -730,7 +738,7 @@ input[type="radio"] {
   color: white;
   background-color: #053b6a;
 }
-.classShow{
+.classShow {
   opacity: 0;
 }
 </style>