页面样式优化

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

@@ -2,7 +2,7 @@
   <div class="wrapper">
     <span class="dot-left"></span>
     <div class="top display-default">
-      <div class="left text ddd" :title="data.deviceName">
+      <div class="left text ddd" :title="data.nickName">
         {{ data.nickName }}
       </div>
       <div class="right text">
@@ -78,7 +78,7 @@ export default {
       this.data.class.view.domAllShow();
     },
     centerShow() {
-      this.data.class.view.getDetectorInfoList({ userId: this.data.userId });
+      this.data.class.view.getDetectorInfoList({ userId: this.data.userId },this.data.nickName);
     },
   },
 };

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

@@ -9,7 +9,7 @@
     <div v-show="show" class="wrapper center">
       <div class="left">
         <div class="title-wrapper">
-          <div class="title">报警器列表</div>
+          <div class="title">{{title}}报警器列表</div>
           <div class="close" @click="close">
             <img src="@/assets/images/closeBtn.png" alt="" />
           </div>
@@ -21,12 +21,21 @@
             style="width: 100%"
             :height="tableHeight"
             class="el-bottom"
+            :key="Math.random()"
           >
             <!-- :height="tableHeight" -->
-
+            <el-table-column prop="detectorCode" label="设备编号" width="180">
+              <template slot-scope="scope">
+                <div :title="scope.row.detectorCode" class="ddd" v-un-content>
+                  {{ scope.row.detectorCode }}
+                </div>
+              </template>
+            </el-table-column>
             <el-table-column prop="detectorName" label="设备名称" width="100">
               <template slot-scope="scope">
-                <div v-un-content>{{ scope.row.detectorName }}</div>
+                <div :title="scope.row.detectorName" class="ddd" v-un-content>
+                  {{ scope.row.detectorName }}
+                </div>
               </template>
             </el-table-column>
             <el-table-column prop="medium" label="监测介质" width="">
@@ -34,8 +43,6 @@
                 <div v-un-content>{{ scope.row.medium }}</div>
               </template>
             </el-table-column>
-            <el-table-column prop="detectorCode" label="设备编号" width="150">
-            </el-table-column>
             <el-table-column prop="linkman" label="联系人" width="100">
             </el-table-column>
             <el-table-column prop="phone" label="联系电话" width="">
@@ -47,7 +54,6 @@
                 <div v-un-content>{{ scope.row.alarmTime }}</div>
               </template>
             </el-table-column>
-
             <el-table-column prop="alarmValue" label="定位" width="50">
               <template slot-scope="scope">
                 <div
@@ -65,6 +71,7 @@
               layout="prev, pager, next, jumper"
               :total="total"
               :hide-on-single-page="total <= pageSize"
+              :key="total+''+pageSize"
             >
             </el-pagination>
           </div>
@@ -86,6 +93,9 @@ export default {
     show: {
       type: Boolean,
     },
+    title: {
+      type: String,
+    },
     userId: {
       type: [Number, String],
     },
@@ -103,13 +113,13 @@ export default {
       fade: "fade",
       tableHeight: 600,
       tableData: [
-        {
-          deviceCode: "2016-05-05",
-          name: "王小虎",
-          province: "上海",
-          city: "普陀区",
-          address: "上海市普陀区金沙江路",
-        },
+        // {
+        //   deviceCode: "2016-05-05",
+        //   name: "王小虎",
+        //   province: "上海",
+        //   city: "普陀区",
+        //   address: "上海市普陀区金沙江路",
+        // },
       ],
       moveX: 0,
       moveY: 0,
@@ -139,7 +149,7 @@ export default {
         userId: this.userId,
         pageNum: val,
         pageSize: this.pageSize,
-      });
+      },this.title);
     },
     close() {
       this.fade = "fade";
@@ -282,12 +292,14 @@ export default {
       background: #1890ff;
       padding: 5px;
       .title {
+        width: 100%;
         color: #fff;
+        text-align: center;
       }
       .close {
         box-sizing: border-box;
         padding-top: 2px;
-        padding-right: 2px;
+        padding-right: 5px;
         cursor: pointer;
       }
     }
@@ -337,7 +349,7 @@ export default {
       }
     }
     .bottom {
-      width: 900px;
+      width: 1000px;
       margin: 0 auto;
       position: relative;
     }

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

@@ -2,21 +2,25 @@
   <div class="wrapper rightPic">
     <div class="math">
       <div>
-        <span>{{ rightPicData.alarmNum }}</span
-        >报警总数
+        <span :title="rightPicData.alarmNum" class="ddd">{{ rightPicData.alarmNum }}</span>
+        <i>报警总数</i>
       </div>
       <div>
-        <span>{{ rightPicData.onlineNum }}</span
-        >在线设备
+        <span :title="rightPicData.onlineNum" class="ddd">{{ rightPicData.onlineNum }}</span>
+        <i>在线设备</i>
       </div>
       <div>
-        <span>{{ rightPicData.offlineNum }}</span
-        >离线设备
+        <span :title="rightPicData.offlineNum" class="ddd">{{ rightPicData.offlineNum }}</span>
+        <i>离线设备</i>
       </div>
     </div>
 
     <div class="left">
-      <div class="bottom right-bottom-data-left" @mouseover="tableEnter" @mouseout="timerAni">
+      <div
+        class="bottom right-bottom-data-left"
+        @mouseover="tableEnter"
+        @mouseout="timerAni"
+      >
         <el-table
           size="mini"
           :data="tableData"
@@ -159,6 +163,16 @@ export default {
       > span {
         color: aqua;
         font-size: 20px;
+        display: inline-block;
+        margin-right: 8px;
+        max-width: 50px;
+        overflow: hidden;
+      }
+      > i {
+        display: inline-block;
+        overflow: hidden;
+        font-style: normal;
+
       }
       font-size: 14px;
       color: #fff;

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

@@ -81,7 +81,11 @@
       :list="rightBototmData"
     />
     <!-- 右边 -->
-    <RightPic :rightPicData="rightPicData" v-show="RightPicShow" ref="RightPic"/>
+    <RightPic
+      :rightPicData="rightPicData"
+      v-show="RightPicShow"
+      ref="RightPic"
+    />
     <!-- 报警工单 -->
     <CreateWork
       ref="CreateWork"
@@ -95,7 +99,15 @@
       @callback="CreateWorkTroubleCallBack"
     />
     <!-- 报警用户的报警器列表 -->
-    <Center :show="centerShow" ref="center" :detcetorList="detcetorList" :userId="centerUserId" :total="centerTotal" :pageSize="20"/>
+    <Center
+      :title="centerTitle"
+      :show="centerShow"
+      ref="center"
+      :detcetorList="detcetorList"
+      :userId="centerUserId"
+      :total="centerTotal"
+      :pageSize="20"
+    />
     <!-- 当报警列表隐藏时，这个显示,点击就让Center回来 -->
     <div
       @click="
@@ -162,7 +174,7 @@
         </el-button> -->
         <div class="leftBar-wrapper">
           <!-- 燃气公司 -->
-
+          <div class="compTitle">燃气公司设备</div>
           <div class="comp-wrapper">
             <div
               class="comp"
@@ -179,7 +191,10 @@
             class="box-wrapper"
             v-for="(item, index) in changeBtnData"
             :key="item.value"
+            :class="{ boxWrapperTop: index == 5 }"
           >
+            <!-- :class="{boxWrapperTop:index==5}" 的意思是非公司切换的列表 -->
+            <div class="boxTitle" v-if="index == 5">安全防护设备</div>
             <div
               class="box"
               :class="{
@@ -263,6 +278,7 @@
                       </div>
                     </div>
                   </template>
+
                   <!-- 隐患的展示 -->
                   <template v-else-if="item.value == 8">
                     <div class="list-wrapper">
@@ -601,12 +617,15 @@ export default {
       // 报警列表的数据
       detcetorList: [],
       // 报警列表的总数据，分页用的
-      centerTotal:0,
+      centerTotal: 0,
       // 这是center列表翻页时候用的userId
-      centerUserId:99,
+      centerUserId: 99,
+      // center 的title
+      centerTitle: "",
+
       lntPosition: 0,
       //右上角数据
-      rightPicData:{},
+      rightPicData: {},
     };
   },
   created() {
@@ -845,7 +864,7 @@ export default {
       });
     },
     // 获取报警器用户的报警器分布
-    getDetectorInfoList(queryParams) {
+    getDetectorInfoList(queryParams, title) {
       console.log(queryParams);
       return getdetectorInfoList(queryParams).then((res) => {
         console.log("queryParams", res);
@@ -856,6 +875,7 @@ export default {
           this.centerTotal = res.total;
           this.$refs.center.fade = "fade";
           this.centerShow = true;
+          this.centerTitle = title;
           // 传递回去
           return res.code;
         }
@@ -865,7 +885,7 @@ export default {
     getAlarmData(queryParams) {
       return alarmData(queryParams).then((res) => {
         if (res.code == 200) {
-          console.log('右上角数据',res)
+          console.log("右上角数据", res);
           this.rightPicData = res.data;
           return res.code;
         }
@@ -2412,8 +2432,28 @@ input[type="radio"] {
     // margin-left: 20px;
     margin-top: 15px;
     // box-sizing: border-box;
+    // 燃气公司
+    .compTitle {
+      text-align: center;
+      color: #31eaea;
+      font-size: 25px;
+      padding: 5px 0 10px 0;
+    }
     .box-wrapper {
       width: 340px;
+      position: relative;
+      &.boxWrapperTop {
+        .boxTitle {
+          text-align: center;
+          color: #31eaea;
+          font-size: 25px;
+          padding: 10px 0px 5px 0px;
+        }
+        // margin-top: 60px;
+        .box {
+          // border-top: 1px solid rgba(0, 0, 0, 0.5);
+        }
+      }
     }
     .animate {
       border-bottom: 1px solid rgba(0, 0, 0, 0.1);