优化界面与展示效果

gassafety-web/src/assets/styles/gassafety.scss

@@ -220,6 +220,11 @@
     }
   }
 }
+.videoView {
+  .el-dialog__body{
+    padding:0;
+  }
+}
 // center下的分页
 .center {
   .el-pagination {

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

@@ -3,34 +3,37 @@
     <span class="dot-left"></span>
     <div class="top display-default">
       <div class="left text ddd" :title="data.deviceName">
-        {{ data.detectorName  }}
+        {{ data.detectorName }}
       </div>
       <div class="right text">
         <img src="../../assets/images/closeBtn.png" alt="" @click="close" />
       </div>
     </div>
     <div class="contant">
-      <div>
-        <!-- <div class="theadtop">
-          设备名称: <span v-un-content>{{ data.detectorName }}</span>
-        </div> -->
-        <div>
+      <div class="one">
+        <div >
           设备编号: <span v-un-content>{{ data.detectorCode }}</span>
         </div>
         <div>
-          联系人: <span v-un-content>{{ data.linkman }}</span>
+          监测介质: <span v-un-content>{{ data.medium }}</span>
+        </div>
+        <div>
+          设备状态: <span v-un-content>{{ data.detectorStatus }}</span>
         </div>
+      </div>
+      <div class="two">
+        <div>联系人信息</div>
         <div>
-          联系电话: <span v-un-content>{{ data.phone }}</span>
+          姓名: <span v-un-content>{{ data.linkman }}</span>
         </div>
         <div>
-          设备状态: <span v-un-content>{{ data.detectorStatus }}</span>
+          电话: <span v-un-content>{{ data.phone }}</span>
         </div>
         <div>
-          报警时间: <span v-un-content>{{ data.alarmTime }}</span>
+          详细信息: <span v-un-content>{{ data.remarks }}</span>
         </div>
         <div>
-          创建时间: <span v-un-content>{{ data.creatTime }}</span>
+          备注：<span v-un-content>{{ data.remark }}</span>
         </div>
       </div>
     </div>
@@ -52,19 +55,11 @@ export default {
       userTypeName: ["家用报警器", "商用报警器", "工业报警器"],
     };
   },
-  mounted() {},
+  mounted() {
+    console.log(this.data);
+  },
   methods: {
     moment,
-    deviceMore() {
-      this.data.class.view.$router.push({
-        // path: "/dataMonitoring/realtimedetail",
-        path: "/device/deviceInfoDetail",
-        query: {
-          deviceId: this.data.deviceId,
-          // deviceType: this.data.deviceType,
-        },
-      });
-    },
     close() {
       this.map.clearInfoWindow();
       this.data.class.view.domAllShow();
@@ -76,7 +71,7 @@ export default {
 
 <style lang="scss" scoped>
 .wrapper {
-  // width: 406px;
+  min-width: 300px;
   max-height: 430px;
   // background: #fff;
   border-radius: 4px;
@@ -130,8 +125,16 @@ export default {
   }
   .contant {
     padding: 10px;
-    &>div div{
-      margin-bottom:8px;
+    & > div {
+      &.one {
+        border-bottom: 1px solid #cccccc8f;
+      }
+      &.two{
+        padding-top:8px;
+      }
+      div {
+        margin-bottom: 8px;
+      }
     }
   }
 }

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

@@ -3,17 +3,20 @@
     :title="title"
     :visible.sync="dialogVisible"
     :before-close="handleClose"
+    :close-on-click-modal="false"
     ref="videoBox"
+    style="padding:0px"
+    class="videoView"
   >
     <div class="box videoBox">
       <div id="video"></div>
     </div>
-    <span slot="footer" class="dialog-footer">
+    <!-- <span slot="footer" class="dialog-footer">
       <el-button type="primary" @click="dialogVisible = false"
         >确 定
       </el-button>
       <el-button @click="dialogVisible = false">取 消</el-button>
-    </span>
+    </span> -->
   </el-dialog>
 </template>
 <script>
@@ -84,11 +87,13 @@ export default {
 
 <style lang="scss">
 .box {
+
   width: 100%;
   height: 500px;
   #video {
     height: 100%;
   }
+  
 }
 </style>
 

gassafety-web/src/utils/gaodeMapView.js

@@ -78,6 +78,8 @@ class gaodeMap {
   onceFlag = false;
   // 用来判断点击左边抽屉列表的时候移动才消失
   leftListClick = false;
+  // 报警器移动的时候用来存储经纬度的，用途是判断司徒是否移动
+  oldLng=[];
   //构造函数中设置中央点默认值
   constructor(center) {
     this.markers = [];
@@ -360,7 +362,7 @@ class gaodeMap {
       marker.on("mousedown", e => {
         that.closeInfoWindow();
         that.videoView({
-          title: "监控",
+          title: data.videoName,
           target: marker,
           videoManagerId,
           resourceId
@@ -387,15 +389,14 @@ class gaodeMap {
     // 报警器用户下的独立报警器
     if (DEVICE_TYPE.DETECTOR_ONLY == markerType) {
       // 如果报警器用户下的单一报警器
-      let oldLng = [];
+      
       // 先记录当前的this.detcetorMarker
       if (this.detcetorMarker) {
-        oldLng = [
+        this.oldLng = [
           this.detcetorMarker.data.longitude,
           this.detcetorMarker.data.latitude
         ];
       }
-
       // 如果this.detcetorMarker有值就删了
       this.clearDetectorOnlyOpen();
 
@@ -413,9 +414,12 @@ class gaodeMap {
         this.detectorOnlyOpenInfowindow.close();
       // 因为报警器会出现同一位置的情况，如果是同一个位置，直接显示infoWindow，
       // 如果不是同一位置，移动完了在显示
-      if (oldLng[0] == data.longitude && oldLng[1] == data.latitude) {
+      if (this.oldLng[0] == data.longitude && this.oldLng[1] == data.latitude) {
+        console.log("原地没动")
         this.detectorOnlyOpen(e);
       } else {
+        console.log("动了")
+
         // 回调，先移动，后展示infowindow
         this.handleInfoWindowOpenFunc = () => {
           this.detectorOnlyOpen(e);

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

@@ -29,7 +29,12 @@
                 <div v-un-content>{{ scope.row.detectorName }}</div>
               </template>
             </el-table-column>
-            <el-table-column prop="detectorCode" label="设备编号" width="200">
+            <el-table-column prop="medium" label="监测介质" width="">
+              <template slot-scope="scope">
+                <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>
@@ -37,16 +42,12 @@
             </el-table-column>
             <el-table-column prop="detectorStatus" label="设备状态" width="100">
             </el-table-column>
-            <el-table-column prop="alarmTime" label="报警时间" width="">
+            <el-table-column prop="alarmTime" label="报警时间" width="200">
               <template slot-scope="scope">
                 <div v-un-content>{{ scope.row.alarmTime }}</div>
               </template>
             </el-table-column>
-            <el-table-column prop="creatTime" label="创建时间" width="">
-              <template slot-scope="scope">
-                <div v-un-content>{{ scope.row.creatTime }}</div>
-              </template>
-            </el-table-column>
+
             <el-table-column prop="alarmValue" label="定位" width="50">
               <template slot-scope="scope">
                 <div
@@ -63,7 +64,7 @@
               :page-size="pageSize"
               layout="prev, pager, next, jumper"
               :total="total"
-              :hide-on-single-page="total<=pageSize"
+              :hide-on-single-page="total <= pageSize"
             >
             </el-pagination>
           </div>
@@ -86,14 +87,14 @@ export default {
       type: Boolean,
     },
     userId: {
-      type: [Number,String],
+      type: [Number, String],
     },
-    total:{
-      type:Number,
+    total: {
+      type: Number,
+    },
+    pageSize: {
+      type: Number,
     },
-    pageSize:{
-      type:Number,
-    }
   },
   data() {
     return {
@@ -134,7 +135,11 @@ export default {
       console.log(val);
     },
     handleCurrentChangvale(val) {
-      this.$parent.getDetectorInfoList({userId:this.userId,pageNum:val,pageSize:this.pageSize})
+      this.$parent.getDetectorInfoList({
+        userId: this.userId,
+        pageNum: val,
+        pageSize: this.pageSize,
+      });
     },
     close() {
       this.fade = "fade";

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

@@ -46,7 +46,7 @@
               </div>
             </template>
           </el-table-column>
-          <el-table-column prop="alarmTime" label="预警时间啊" width="180">
+          <el-table-column prop="alarmTime" label="预警时间" width="180">
           </el-table-column>
           <el-table-column prop="handledStatus" label="状态" width="">
             <template slot-scope="scope">
@@ -75,15 +75,7 @@ export default {
       timer: null,
       repeatFinshed: false,
       tableHeight: 202,
-      tableData: [
-        {
-          unitName: "ZhC-11",
-          detectorType: "流量计",
-          statusName: "压力异常",
-          alarmTime: "2021-02-02 16-00-00",
-          handledStatus: "上海市普陀区金沙江路",
-        },
-      ],
+      tableData: [],
       scrollHeight: 0,
       timer: null,
     };
@@ -150,7 +142,7 @@ export default {
   padding-right: 0px;
   position: fixed;
   right: 20px;
-  top: 150px;
+  top: 160px;
   // background-color: #fff;
   display: flex;
   justify-content: space-between;
@@ -159,21 +151,25 @@ export default {
   .math {
     width: 520px;
     position: absolute;
-    top: -40px;
+    top: -50px;
     left: 0px;
     display: flex;
     justify-content: space-between;
     & > div {
       > span {
         color: aqua;
+        font-size: 20px;
       }
       font-size: 14px;
       color: #fff;
       text-align: center;
-      line-height: 30px;
-      width: 108px;
-      height: 30px;
+      // padding:5px 10px;
+      line-height: 35px;
+      width: 138px;
+      height: 35px;
       background-image: url(../../../../assets/images/bg/bg.png);
+      background-size: 100% 100%;
+      background-repeat: no-repeat;
     }
   }
   & > div {