Merge branch 'master' of ssh://111.61.77.35:15/gengdidi/gassafety-progress

gassafetyprogress-web/src/assets/iconfont/monitorData/iconfont.css

+@font-face {
+  font-family: "iconfont"; /* Project id 3276749 */
+  src: url('iconfont.woff2?t=1648286292510') format('woff2'),
+       url('iconfont.woff?t=1648286292510') format('woff'),
+       url('iconfont.ttf?t=1648286292510') format('truetype');
+}
+
+.iconfont {
+  font-family: "iconfont" !important;
+  font-size: 16px;
+  font-style: normal;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+.icon-jt:before {
+  content: "\e8f1";
+}
+
+.icon-tcq:before {
+  content: "\e622";
+}
+
+.icon-ylb:before {
+  content: "\e623";
+}
+
+.icon-llj:before {
+  content: "\e624";
+}
+
+.icon-a:before {
+  content: "\e61e";
+}
+
+.icon-b:before {
+  content: "\e61f";
+}
+

gassafetyprogress-web/src/assets/styles/all.scss

@@ -675,3 +675,9 @@
 .amap-copyright {
   opacity:0;
 }
+
+.zzz {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
\ No newline at end of file

gassafetyprogress-web/src/components/emergency/PipeColor.vue

@@ -128,8 +128,8 @@ export default {
     &.active,
     &:hover
     {
-      background-color: #053B6A ;
-      color: #2CD5DB;
+      background-color: #1890ff ;
+      color: #ffffff;
     }
   }
 }

gassafetyprogress-web/src/components/emergency/Timeline.vue

@@ -85,7 +85,7 @@
       .long-line {
         width: 1px;
         height: 98px;
-        background: #ffffff;
+        background: #000000;
         box-shadow: 0px 4px 12px 0px rgba(0, 0, 0, 0.1);
         opacity: 0.5;
         margin-left: 8px;
@@ -96,7 +96,7 @@
       box-sizing: border-box;
       margin-left: 20px;
       height: 86px;
-      padding: 0 0 0 20px;
+      padding: 6px 0 0 20px;
       text-align: left;
       margin-bottom: 30px;
 
@@ -104,20 +104,20 @@
         font-size: 15px;
         word-break: break-all;
         margin-bottom: 16px;
-        color: #d9d9d9;
+        color: #000000;
         font-weight: 500;
         /*display: inline;*/
       }
 
       .timeline-date {
         font-size: 13px;
-        color: #dfe4ed;
+        color: #000000;
         font-weight: 500;
         margin-bottom: 16px;
       }
       .timeline-desc {
         font-size: 14px;
-        color: #30b46b;
+        color: #000000;
       }
     }
 

gassafetyprogress-web/src/components/emergency/rightBar.vue

@@ -7,7 +7,7 @@
           <span class="dot-inner"></span>
         </span>
         <span
-          style="letter-spacing: 3px; color: #cddbe4; cursor: pointer"
+          style="letter-spacing: 3px; color: #000000; cursor: pointer"
           >事件接报列表</span
         >
       </div>
@@ -36,11 +36,11 @@
       </div>
 
       <div id = "detail" class="show-detail" style="display: none;margin-top: 15px;margin-bottom: 20px;position:fixed;right: 470px;width: 300px;
-                                                      background: rgba(0, 0, 0, 0.7);top: 110px">
+                                                      background: #ffffff;top: 110px">
         <div class="el-form-div" style="height: 30px;">
           <div class="detail-title">{{detailTitle}}</div>
           <div style="cursor: pointer;" @click="closeDetail()">
-            <img style="width: 20px;height: 20px;margin-top: 5px;" src="@/assets/mapImages/closeBtn.png" alt="" />
+            <img style="width: 20px;height: 20px;margin-top: 5px;" src="@/assets/mapImages/close.png" alt="" />
           </div>
         </div>
         <timeline :timeline-list="handleList"></timeline>
@@ -569,9 +569,9 @@ export default {
   margin-left: 10px;
   background-image: linear-gradient(
     to left,
-    #112238,
+    #fff,
     rgb(49 151 195 / 70%) 50%,
-    #112238
+    #fff
   );
 }
 .dot {
@@ -600,7 +600,7 @@ export default {
   animation: vabDot 1.2s ease-in-out infinite;
 }
   .content-div{
-    color: white;
+    color: #000000;
     font-size: 30;
     height: 40px;
     line-height: 50px;
@@ -614,7 +614,7 @@ export default {
 }
   .button-div{
     cursor:pointer;
-    color: #339CC9;
+    color: #ffffff;
     margin-bottom: 5px;
     border-radius: 2px;
     width: 100px;
@@ -625,6 +625,7 @@ export default {
     font-size: 15;
     margin-left: 10%;
     margin-top: 10px;
+    background: #1c84c6;
   }
   .title-div{
     width: 100%;
@@ -633,7 +634,7 @@ export default {
     border-bottom: 2px solid #1c84c6;
     border-top: 1px solid #1c84c6;
     height: 30px;
-    color: white;
+    color: #000;
     line-height: 30px;
   }
 .test-5::-webkit-scrollbar {
@@ -670,8 +671,9 @@ export default {
 .detail-title{
   height: 100%;
   width: 270px;
-  color: white;
+  color: #000000;
   margin-left: 20px;
+  margin-top: 5px;
 }
 .massage{
   color: #00ffff;

gassafetyprogress-web/src/views/emergency/index.vue

@@ -31,30 +31,62 @@
     />
     <PipeColor />
     <!-- 底部按钮 -->
-    <div class="home-div">
-      <img src="@/assets/mapinages/bottombanner.png" alt="" style="" />
-      <div class="listingsSty fangy">
-        <div
-          @click="allCompany"
-          :class="selarr.length == companyLength ? 'active' : ''"
-          class="firsty"
-        >
-          全部
-        </div>
-        <div
-          class="firsty"
-          :class="selarr.indexOf(item.val) >= 0 ? 'active' : ''"
-          v-for="(item, index) in typeList"
-          :key="item.val"
-          @click="sel(index, item)"
-        >
-          {{ item.name }}
-        </div>
-      </div>
-    </div>
+    <!--<div class="home-div">-->
+      <!--<img src="@/assets/mapinages/bottombanner.png" alt="" style="" />-->
+      <!--<div class="listingsSty fangy">-->
+        <!--<div-->
+          <!--@click="allCompany"-->
+          <!--:class="selarr.length == companyLength ? 'active' : ''"-->
+          <!--class="firsty"-->
+        <!--&gt;-->
+          <!--全部-->
+        <!--</div>-->
+        <!--<div-->
+          <!--class="firsty"-->
+          <!--:class="selarr.indexOf(item.val) >= 0 ? 'active' : ''"-->
+          <!--v-for="(item, index) in typeList"-->
+          <!--:key="item.val"-->
+          <!--@click="sel(index, item)"-->
+        <!--&gt;-->
+          <!--{{ item.name }}-->
+        <!--</div>-->
+      <!--</div>-->
+    <!--</div>-->
     <div class="event_div" @click="handleAdd">
         事件接报
     </div>
+    <!--<div class="mouseToolBtn">-->
+      <!--<button class="serBtn" @click="openDraw()" id="mouseToolBtn">画图</button>-->
+    <!--</div>-->
+    <!--<div class="delTu" id="delTu">-->
+      <!--&lt;!&ndash;<input name="in" type="radio" @click="delRadioLays()"/>&ndash;&gt;-->
+    <!--</div>-->
+    <!--<div class="toolBtn" :style="display">-->
+      <!--<div class="el-form-div" style="height: 30px;background: black">-->
+        <!--<div class="detail-title">标绘工具</div>-->
+        <!--<div style="cursor: pointer;" >-->
+          <!--<img style="width: 20px;height: 20px;margin-top: 5px;" @click="closeDraw" src="@/assets/mapImages/closeBtn.png" alt="" />-->
+        <!--</div>-->
+      <!--</div>-->
+      <!--<div class="el-form-div">-->
+          <!--<div style="width: 50%">-->
+            <!--<div class="tool-div" @click="drawMark()">标记</div>-->
+            <!--<div class="tool-div" @click="drawCircle()">圆形 </div>-->
+            <!--<div class="tool-div" @click="drawRule()">测距</div>-->
+            <!--<div class="tool-div" @click="editDraw()">编辑图形</div>-->
+            <!--<div class="tool-div" @click="map.delOverlays()">删除图形</div>-->
+            <!--<div class="tool-div" @click="mouseToolDrawClear">清除所有</div>-->
+          <!--</div>-->
+          <!--<div style="width: 50%">-->
+            <!--<div class="tool-div" @click="drawPolyline()">线段</div>-->
+            <!--<div class="tool-div" @click="drawPolygon()">多边形</div>-->
+            <!--<div class="tool-div" @click="drawMeasureArea()">面积</div>-->
+            <!--<div class="tool-div" @click="endEditDraw()">关闭编辑</div>-->
+            <!--<div class="tool-div" @click="map.endOverlays()">结束绘制</div>-->
+            <!--<div class="tool-div">保存图片</div>-->
+          <!--</div>-->
+      <!--</div>-->
+    <!--</div>-->
     <!-- 设备按钮 -->
     <div class="typelist-div">
       <div
@@ -74,7 +106,7 @@
     <div class="typelist-div2">
       <div
         class="list"
-        style="width: 146px;height: 40px;line-height: 30px;margin-top: 1px;"
+        style="width: 146px;height: 35px;line-height: 35px;"
         v-for="(item, index) in arr2"
         :key="index"
         :class="selarr1.indexOf(item.val) >= 0 ? 'active' : ''"
@@ -82,7 +114,7 @@
       >
         <img
           :src="item.imgurl"
-          style="margin-top: 3px; float: left; margin-right: 3px;width: 26px"
+          style="margin-top: 6px;float: left; margin-right: 3px;width: 18px;height: 18px;margin-left: 10px;"
         />
         {{ item.name }}
       </div>
@@ -200,7 +232,7 @@
 
 <script>
 // @ is an alias to /src
-import { EditorMap } from "@/utils/mapClass/map";
+import { EditorMap } from "@/utils/mapClass/yjmap";
 import { mapGetters, mapActions } from "vuex";
 import { listDetectorInfo } from "@/api/detector/detectorInfo";
 import { detectorUserList } from "@/api/detector/detectorUser";
@@ -292,6 +324,7 @@ export default {
           name: "中燃韵科",
         },
       ],
+      display:"display:none",
       //      2:"调压箱",
       // 3:"阀门",
       // 4:"厂站",
@@ -381,6 +414,8 @@ export default {
 
       // 报警轮询timer
       alarmTimer: null,
+      //绘制工具
+      markNum:0,
       // 表单参数
       form: {},
       // 表单校验
@@ -444,7 +479,7 @@ export default {
       "map",
       {
         center: path,
-        mapStyle: "amap://styles/f71d3a3d73e14f5b2bf5508bf1411758",
+        //mapStyle: "amap://styles/f71d3a3d73e14f5b2bf5508bf1411758",
         zoom: 14.5,
       },
       this
@@ -782,17 +817,45 @@ export default {
       this.nowweek = `${weekArr[week]}`;
       this.nowDate = `${year}年${month}月${day}`;
     },
+    // 地图绘制
+    // drawMark() {
+    //   this.map.mouseAddMarker();
+    // },
+    // drawPolyline() {
+    //    this.map.mouseAddPipeline("Polyline");
+    // },
+    // drawCircle() {
+    //   this.map.mouseAddCircle("Circle");
+    // },
+    // drawPolygon() {
+    //   this.map.mouseAddPolygon("Polygon");
+    // },
+    // drawRule() {
+    //   this.map.mouseAddRule();
+    // },
+    // drawMeasureArea() {
+    //   this.map.mouseAddMeasureArea();
+    // },
+    // mouseToolDrawClear(){
+    //   this.map.mousetoolClose(true);
+    // },
+    // editDraw(){
+    //   this.map.editOverlays();
+    // },
+    // endEditDraw(){
+    //   this.map.endEditOverlays();
+    // },
+    // delRadioLays(num){
+    //   console.log("---"+num)
+    // },
+    // openDraw(){
+    //   this.display="";
+    // },
+    // closeDraw(){
+    //   this.display="display:none";
+    // }
   },
-  // 销毁定时器
-  beforeDestroy() {
-    if (this.formatDate) {
-      clearInterval(this.formatDate); // 在Vue实例销毁前，清除时间定时器
-    }
-    // 报警
-    if (this.alarmTimer) {
-      clearInterval(this.alarmTimer);
-    }
-  },
+
 };
 </script>
 <style lang="scss" scoped>
@@ -844,11 +907,11 @@ export default {
 }
 .rightbar {
   width: 470px;
-  height: 90%;
+  height: 92%;
   position: fixed;
   top: 50px;
   right: 0;
-  background: #112238;
+  background: #ffffff;
 }
 .home-div {
   width: 50%;
@@ -964,22 +1027,55 @@ export default {
   z-index: 9999;
   float: left;
   margin-left: 15px;
-  color: #fff;
+  color: #000000;
   line-height: auto;
-  text-align: center;
-  background: linear-gradient(86deg, #112238 0%, #086187 62%, #112238 100%);
-  box-shadow: inset 0px 1px 2px 1px #125c9b;
+  background: #ffffff;
+  box-shadow: inset 0px 1px 2px 1px #ffffff;
   font-size: 14px;
   padding: 5px 7px;
   cursor: pointer;
 }
 
 .list.active {
-  background: linear-gradient(86deg, #112238 0%, #32a3d3 62%, #112238 100%);
-  box-shadow: inset 0px 1px 2px 1px #125c9b;
-  color: #2ee7e7;
+  background: #ffffff;
+  box-shadow: inset 0px 1px 2px 1px #ffffff;
+  color: #1890ff;
   font-size: 14px;
 }
+.mouseToolBtn {
+  position: fixed;
+  margin-left: 100px;
+  z-index: 999;
+  bottom: 50px;
+}
+.delTu{
+  position: fixed;
+  margin-left: 30%;
+  margin-top: 300px;
+  z-index: 999;
+  height: 150px;
+  width: 450px;
+  background: #1c84c6;
+}
+.serBtn {
+  background: #fff;
+  width: 50px;
+  height: 50px;
+  text-align: center;
+  outline: none;
+  border-radius: 5px;
+  border: none;
+  cursor: pointer;
+}
+.toolBtn{
+  background: white;
+  width: 160px;
+  position: fixed;
+  margin-left: 100px;
+  z-index: 999;
+  bottom: 100px;
+  height: 200px;
+}
 .el-form-div{
   display:flex;
   flex-direction:row;
@@ -987,6 +1083,25 @@ export default {
   justify-content:flex-start;
   width: 100%;
 }
+.detail-title{
+  height: 30px;
+  color: white;
+  line-height: 30px;
+  width: 130px;
+  font-size: 15px;
+  margin-left: 5px;
+}
+.tool-div{
+  border: 1px solid #cccccc;
+  width: 80%;
+  margin-left: 10%;
+  text-align: center;
+  margin-top: 4px;
+  font-size: 14px;
+  height: 24px;
+  line-height: 24px;
+  cursor:pointer;
+}
 ::v-deep .el-dialog:not(.is-fullscreen) {
   margin-top: 13vh !important;
 }

gassafetyprogress-web/src/views/operationMonitor/monitorData/component/charsData/Cg.vue

+<!--
+ * @Author: your name
+ * @Date: 2022-03-25 17:15:31
+ * @LastEditTime: 2022-03-28 13:59:37
+ * @LastEditors: Please set LastEditors
+ * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
+ * @FilePath: /gassafety-progress/gassafetyprogress-web/src/views/operationMonitor/monitorData/component/charsData/CzCard.vue
+-->
+
+<template>
+  <div class="czcard">
+    <my-collapse
+      title="储罐"
+      ref="myCollapse"
+      :listNum="czList.filter((item) => item.show).length"
+    >
+      <template v-slot:chackbox>
+        <div
+          class="filter"
+          :class="`one-${item.state}`"
+          v-for="item in filterList"
+          :key="item.value"
+        >
+          <span
+            class="text"
+            :class="{ active: deviceTypeArr.indexOf(item.state) >= 0 }"
+            @click="fliterTypeChange(item)"
+            >{{ item.value }}</span
+          >
+          <span class="number">({{ item.count }})</span>
+        </div>
+      </template>
+      <template #container>
+        <div class="container flex">
+          <div
+            class="com"
+            v-for="item in czList"
+            :key="item.deviceName"
+            v-show="item.show"
+          >
+            <div :title="item.companyName" class="left zzz">
+              {{ item.companyName }}
+            </div>
+            <div :class="`one-${item.state}`" class="state">
+              {{ typeState[item.state - 1] }}
+            </div>
+          </div>
+        </div>
+      </template>
+    </my-collapse>
+  </div>
+</template>
+
+<script>
+import MyCollapse from "./MyCollapse";
+import CzItem from "./CzItem";
+// 场罐
+export default {
+  components: {
+    MyCollapse,
+    CzItem,
+  },
+  data() {
+    return {
+      carHide: true,
+      addStartNum: 3,
+      filterList: [
+        { value: "正常", count: 100, state: 1 },
+        { value: "报警", count: 100, state: 2 },
+        { value: "离线", count: 100, state: 3 },
+      ],
+      typeState: ["正常", "报警", "离线"],
+      deviceTypeArr: [1, 2, 3],
+      czList: [
+        { companyName: "河北泽宏股份储罐", state: 1, show: true },
+        { companyName: "河北泽宏股份储罐", state: 2, show: true },
+        { companyName: "河北泽宏股份储罐", state: 3, show: true },
+        { companyName: "河北泽宏股份储罐", state: 1, show: true },
+        { companyName: "河北泽宏股份储罐", state: 2, show: true },
+        { companyName: "河北泽宏股份储罐", state: 3, show: true },
+        { companyName: "河北泽宏股份储罐", state: 1, show: true },
+        { companyName: "河北泽宏股份储罐", state: 2, show: true },
+        { companyName: "河北泽宏股份储罐", state: 3, show: true },
+        { companyName: "河北泽宏股份储罐", state: 1, show: true },
+        { companyName: "河北泽宏股份储罐", state: 2, show: true },
+        { companyName: "河北泽宏股份储罐", state: 3, show: true },
+        { companyName: "河北泽宏股份储罐", state: 1, show: true },
+        { companyName: "河北泽宏股份储罐", state: 2, show: true },
+        { companyName: "河北泽宏股份储罐", state: 3, show: true },
+        { companyName: "河北泽宏股份储罐", state: 1, show: true },
+        { companyName: "河北泽宏股份储罐", state: 2, show: true },
+        { companyName: "河北泽宏股份储罐", state: 3, show: true },
+      ],
+    };
+  },
+  computed: {
+    // 计算有多少个展示的对象,如果小于3个,就把justify-content: space-between;取消
+    getShowNum() {
+      return this.czList.filter((item) => item.show).length < this.addStartNum;
+    },
+  },
+  mounted() {
+    // this.changeAddStartNum();
+  },
+  methods: {
+    hide() {
+      this.carHide = !this.carHide;
+    },
+    // 根据父子元素自动计算是否需要添加值start
+    changeAddStartNum() {
+      const czItem = this.$refs.czItem;
+      let czItemWidth;
+      // 组件有可能是一个数组，所以要这样判断
+      if (Array.isArray(czItem)) {
+        const { width } = czItem[0].$el.getBoundingClientRect();
+        czItemWidth = width;
+      } else {
+        const { width } = czItem.$el.getBoundingClientRect();
+        czItemWidth = width;
+      }
+      // 取出collap的宽
+      const { width: CollapseWidth } =
+        this.$refs.myCollapse.$el.getBoundingClientRect();
+      // 得到最小的承载数量
+      this.addStartNum = Math.floor(CollapseWidth / czItemWidth);
+    },
+    //过滤选择
+    fliterTypeChange(data) {
+      const { state } = data;
+      const index = this.deviceTypeArr.indexOf(state);
+      if (index >= 0) {
+        this.deviceTypeArr.splice(index, 1);
+      } else {
+        this.deviceTypeArr.push(state);
+      }
+      this.filter(this.deviceTypeArr);
+    },
+    // 过滤对象
+    filter(arr) {
+      this.czList.forEach((item) => {
+        const { state } = item;
+        if (arr.includes(state)) {
+          item.show = true;
+        } else {
+          item.show = false;
+        }
+      });
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+$one: #666666;
+$two: #ff6c68;
+$three: #bbbbbb;
+$active: #06d7b1 !important;
+
+.filter {
+  margin-right: 22px;
+  margin-top: 5px;
+  font-size: 14px;
+
+  .text {
+    position: relative;
+    cursor: pointer;
+    &::before {
+      content: "";
+      position: absolute;
+      border-radius: 50%;
+      width: 6px;
+      height: 6px;
+      left: -10px;
+      top: 50%;
+      margin-top: -3px;
+    }
+
+    &.active {
+      color: $active;
+    }
+    &:hover {
+      color: #06d7b189 !important;
+    }
+  }
+
+  .number {
+    font-weight: 500;
+  }
+
+  &.one-1 {
+    .number,
+    .text {
+      color: $one;
+    }
+    .text {
+      &:before {
+        background-color: $one;
+      }
+    }
+  }
+  &.one-2 {
+    .number,
+    .text {
+      color: $two;
+    }
+    .text {
+      &:before {
+        background-color: $two;
+      }
+    }
+  }
+  &.one-3 {
+    .number,
+    .text {
+      color: $three;
+    }
+    .text {
+      &:before {
+        background-color: $three;
+      }
+    }
+  }
+}
+.container {
+  width: 100%;
+  flex-wrap: wrap;
+  margin-left: 35px;
+
+  &.start {
+    justify-content: flex-start;
+    & > div {
+      // margin-right: 50px;
+    }
+  }
+  & > div {
+    margin-bottom: 20px;
+    display: flex;
+    justify-content: flex-start;
+    // margin-right: 45px;
+    width: 15%;
+    min-width: 190px;
+    margin-right: 1.5%;
+    .left {
+      margin-right: 4px;
+      font-size: 14px;
+      max-width: 112px;
+    }
+    .state {
+      font-size: 8px;
+      padding: 0px 4px;
+      box-sizing: border-box;
+      &.one-1 {
+        color: #fff;
+        border: 1px solid #6fffe5;
+        border-radius: 2px;
+        background-color: #06d7b1;
+      }
+      &.one-2 {
+        color: #fff;
+        border: 1px solid #ff9c99;
+        border-radius: 2px;
+        background-color: #ff6c68;
+      }
+      &.one-3 {
+        color: #fff;
+        border: 1px solid #aaaaaa;
+        border-radius: 2px;
+        background-color: #bbbbbb;
+      }
+    }
+  }
+}
+.flex {
+  display: flex;
+  justify-content: flex-start;
+}
+</style>
\ No newline at end of file

gassafetyprogress-web/src/views/operationMonitor/monitorData/component/charsData/CzCard.vue

+<!--
+ * @Author: your name
+ * @Date: 2022-03-25 17:15:31
+ * @LastEditTime: 2022-03-28 14:33:23
+ * @LastEditors: Please set LastEditors
+ * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
+ * @FilePath: /gassafety-progress/gassafetyprogress-web/src/views/operationMonitor/monitorData/component/charsData/CzCard.vue
+-->
+
+<template>
+  <div class="czcard">
+    <my-collapse
+      title="场站"
+      ref="myCollapse"
+      :listNum="czList.filter((item) => item.show).length"
+    >
+      <template v-slot:chackbox>
+        <div class="filter" v-for="item in filterList" :key="item.value">
+          <span
+            class="text"
+            :class="{ active: deviceTypeArr.indexOf(item.type) >= 0 }"
+            @click="fliterTypeChange(item)"
+            >{{ item.value }}</span
+          >
+          <span class="number">({{ item.count }})</span>
+        </div>
+      </template>
+      <template #container>
+        <div class="container" :class="{ start: getShowNum }">
+          <div v-for="(item,index) in czList" :key="item.deviceName+index" v-show="item.show">
+            <CzItem ref="czItem" :list="item" v-if="item.show" />
+          </div>
+        </div>
+      </template>
+    </my-collapse>
+  </div>
+</template>
+
+<script>
+import MyCollapse from "./MyCollapse";
+import CzItem from "./CzItem";
+
+export default {
+  // 场站
+  components: {
+    MyCollapse,
+    CzItem,
+  },
+  data() {
+    return {
+      carHide: true,
+      addStartNum: 3,
+      filterList: [
+        { value: "加气站", count: 100, type: 1 },
+        { value: "门站", count: 100, type: 2 },
+        { value: "调压站", count: 100, type: 3 },
+        { value: "储备站", count: 100, type: 4 },
+        { value: "气化站", count: 100, type: 5 },
+      ],
+      deviceTypeArr: [1, 2, 3, 4, 5],
+      czList: [
+        {
+          deviceName: "加气站",
+          state: 1,
+          a: 25,
+          b: 56,
+          c: 54,
+          d: 15,
+          e: 56,
+          image: "",
+          show: true,
+          type: 1,
+        },
+        {
+          deviceName: "门站",
+          state: 1,
+          a: 25,
+          b: 56,
+          c: 54,
+          d: 15,
+          e: 56,
+          image: "",
+          show: true,
+          type: 2,
+        },
+        {
+          deviceName: "调压站",
+          state: 1,
+          a: 25,
+          b: 56,
+          c: 54,
+          d: 15,
+          e: 56,
+          image: "",
+          show: true,
+          type: 3,
+        },
+        {
+          deviceName: "储备站",
+          state: 1,
+          a: 25,
+          b: 56,
+          c: 54,
+          d: 15,
+          e: 56,
+          image: "",
+          show: true,
+          type: 4,
+        },
+        {
+          deviceName: "气化站",
+          state: 1,
+          a: 25,
+          b: 56,
+          c: 54,
+          d: 15,
+          e: 56,
+          image: "",
+          show: true,
+          type: 5,
+        },
+        {
+          deviceName: "气化站",
+          state: 1,
+          a: 25,
+          b: 56,
+          c: 54,
+          d: 15,
+          e: 56,
+          image: "",
+          show: true,
+          type: 5,
+        },
+        {
+          deviceName: "储备站",
+          state: 1,
+          a: 25,
+          b: 56,
+          c: 54,
+          d: 15,
+          e: 56,
+          image: "",
+          show: true,
+          type: 4,
+        },
+      ],
+    };
+  },
+  computed: {
+    // 计算有多少个展示的对象,如果小于3个,就把justify-content: space-between;取消
+    getShowNum() {
+      return this.czList.filter((item) => item.show).length < this.addStartNum;
+    },
+  },
+  mounted() {
+    this.changeAddStartNum();
+  },
+  methods: {
+    hide() {
+      this.carHide = !this.carHide;
+      // this.myCollapse();
+    },
+    // 根据父子元素自动计算是否需要添加值start
+    changeAddStartNum() {
+      const czItem = this.$refs.czItem;
+      let czItemWidth;
+      // 组件有可能是一个数组，所以要这样判断
+      if (Array.isArray(czItem)) {
+        const { width } = czItem[0].$el.getBoundingClientRect();
+        czItemWidth = width;
+      } else {
+        const { width } = czItem.$el.getBoundingClientRect();
+        czItemWidth = width;
+      }
+      // 取出collap的宽
+      const { width: CollapseWidth } =
+        this.$refs.myCollapse.$el.getBoundingClientRect();
+      // 得到最小的承载数量
+      this.addStartNum = Math.floor(CollapseWidth / czItemWidth);
+    },
+    //过滤选择
+    fliterTypeChange(data) {
+      const { type } = data;
+      const index = this.deviceTypeArr.indexOf(type);
+      if (index >= 0) {
+        this.deviceTypeArr.splice(index, 1);
+      } else {
+        this.deviceTypeArr.push(type);
+      }
+      this.filter(this.deviceTypeArr);
+      // 改变大小,因为动画原因加个延迟
+      // this.$nextTick(() => {
+      //   setTimeout(()=>{
+      //     this.myCollapse()
+      //   }, 300);
+      // });
+    },
+    myCollapse() {
+      // this.$refs.myCollapse.getHeight();
+    },
+    // 过滤对象
+    filter(arr) {
+      this.czList.forEach((item) => {
+        const { type } = item;
+        if (arr.includes(type)) {
+          item.show = true;
+        } else {
+          item.show = false;
+        }
+      });
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.filter {
+  margin-right: 12px;
+  margin-top: 5px;
+  font-size: 14px;
+  .text {
+    cursor: pointer;
+    &:hover {
+      color: #06d7b189 !important;
+    }
+    &.active {
+      color: #06d7b1;
+    }
+  }
+  .number {
+    font-weight: 500;
+    color: #1890ff;
+  }
+}
+.container {
+  width: 100%;
+  flex-wrap: wrap;
+  display: flex;
+  &.start {
+    justify-content: flex-start;
+    & > div {
+      // margin-right: 50px;
+    }
+  }
+  & > div {
+    margin-bottom: 20px;
+    margin-left: 1%;
+    width: 24%;
+    min-width: 295px;
+  }
+}
+.flex {
+  display: flex;
+  justify-content: space-between;
+}
+</style>
\ No newline at end of file

gassafetyprogress-web/src/views/operationMonitor/monitorData/component/charsData/CzItem.vue

+<!--
+ * @Author: your name
+ * @Date: 2022-03-26 10:27:00
+ * @LastEditTime: 2022-03-28 13:59:11
+ * @LastEditors: Please set LastEditors
+ * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
+ * @FilePath: /gassafety-progress/gassafetyprogress-web/src/views/operationMonitor/monitorData/component/charsData/CzItem.vue
+-->
+
+<template>
+  <div class="czitem flex">
+    <div class="left">
+      <div class="img">
+        <div class="state">
+          {{ list.state == "0" ? "正常" : "报警" }}
+        </div>
+        <img v-if="list.src" src="" alt="" />
+        暂无图片
+      </div>
+      <div v-unValue class="device-name zzz">{{ list.deviceName }}</div>
+    </div>
+
+    <div class="right">
+      <div>温度：<span :class="{active:list.a>50}">{{list.a}}°C</span></div>
+      <div>水温：<span :class="{active:list.b>50}">{{list.b}}°C</span></div>
+      <div>压力：<span :class="{active:list.c>50}">{{list.c}}Pa</span></div>
+      <div>湿度：<span :class="{active:list.d>50}">{{list.d}}°C</span></div>
+      <div>水温：<span :class="{active:list.e>50}">{{list.e}}°C</span></div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  // 场站子组件
+  props: {
+    list: {
+      type: Object,
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.czitem {
+  // min-width: 324px;
+  width: 100%;
+  min-height: 191px;
+  padding: 14px 12px 18px 25px;
+  box-sizing: border-box;
+  border-radius: 4px;
+  border: 1px solid #e6ebf5;
+  // display: flex;
+  .left {
+    // margin-right: 48px;
+    .img {
+      width: 162px;
+      height: 120px;
+      border-radius: 4px;
+      line-height: 120px;
+      text-align: center;
+      position: relative;
+      box-sizing: border-box;
+      border: 1px solid #e6ebf5;
+      margin-bottom: 11px;
+      .state {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 162px;
+        height: 28px;
+        background-color: rgba(0, 0, 0, 0.6);
+        border-radius: 4px 4px 0px 0px;
+        text-align: center;
+        line-height: 28px;
+        color: #06d7b1;
+        font-size: 14px;
+      }
+      img {
+        width: 100%;
+        height: 100%;
+      }
+    }
+    .device-name {
+      font-size: 14px;
+      color: #666666;
+      font-weight: 500;
+    }
+  }
+  .right {
+    font-size: 14px;
+    min-width: 80px;
+    & > div {
+      margin-bottom: 10px;
+      span.active{
+        color: red;
+      }
+    }
+  }
+}
+.flex {
+  display: flex;
+  justify-content: space-between;
+}
+</style>
\ No newline at end of file

gassafetyprogress-web/src/views/operationMonitor/monitorData/component/charsData/Fmj.vue

+<!--
+ * @Author: your name
+ * @Date: 2022-03-25 17:15:31
+ * @LastEditTime: 2022-03-28 14:00:33
+ * @LastEditors: Please set LastEditors
+ * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
+ * @FilePath: /gassafety-progress/gassafetyprogress-web/src/views/operationMonitor/monitorData/component/charsData/CzCard.vue
+-->
+
+<template>
+  <div class="czcard">
+    <my-collapse
+      title="阀门井"
+      ref="myCollapse"
+      :listNum="czList.filter((item) => item.show).length"
+    >
+      <template v-slot:chackbox>
+        <div
+          class="filter"
+          :class="`one-${item.state}`"
+          v-for="item in filterList"
+          :key="item.value"
+        >
+          <span
+            class="text"
+            :class="{ active: deviceTypeArr.indexOf(item.state) >= 0 }"
+            @click="fliterTypeChange(item)"
+            >{{ item.value }}</span
+          >
+          <span class="number">({{ item.count }})</span>
+        </div>
+      </template>
+      <template #container>
+        <div class="container flex">
+          <div
+            class="com"
+            v-for="item in czList"
+            :key="item.deviceName"
+            v-show="item.show"
+          >
+            <div :title="item.companyName" class="left zzz">
+              {{ item.companyName }}
+            </div>
+            <div :class="`one-${item.state}`" class="state">
+              {{ typeState[item.state - 1] }}
+            </div>
+          </div>
+        </div>
+      </template>
+    </my-collapse>
+  </div>
+</template>
+
+<script>
+import MyCollapse from "./MyCollapse";
+import CzItem from "./CzItem";
+
+export default {
+  // 阀门井
+  components: {
+    MyCollapse,
+    CzItem,
+  },
+  data() {
+    return {
+      carHide: true,
+      addStartNum: 3,
+      filterList: [
+        { value: "正常", count: 100, state: 1 },
+        { value: "报警", count: 100, state: 2 },
+        { value: "离线", count: 100, state: 3 },
+      ],
+      typeState: ["正常", "报警", "离线"],
+      deviceTypeArr: [1, 2, 3],
+      czList: [
+        { companyName: "河北泽宏股份阀门井", state: 1, show: true },
+        { companyName: "河北泽宏股份阀门井", state: 2, show: true },
+        { companyName: "河北泽宏股份阀门井", state: 3, show: true },
+        { companyName: "河北泽宏股份阀门井", state: 1, show: true },
+        { companyName: "河北泽宏股份阀门井", state: 2, show: true },
+        { companyName: "河北泽宏股份阀门井", state: 3, show: true },
+        { companyName: "河北泽宏股份阀门井", state: 1, show: true },
+        { companyName: "河北泽宏股份阀门井", state: 2, show: true },
+        { companyName: "河北泽宏股份阀门井", state: 3, show: true },
+        { companyName: "河北泽宏股份阀门井", state: 1, show: true },
+        { companyName: "河北泽宏股份阀门井", state: 2, show: true },
+        { companyName: "河北泽宏股份阀门井", state: 3, show: true },
+        { companyName: "河北泽宏股份阀门井", state: 1, show: true },
+        { companyName: "河北泽宏股份阀门井", state: 2, show: true },
+        { companyName: "河北泽宏股份阀门井", state: 3, show: true },
+        { companyName: "河北泽宏股份阀门井", state: 1, show: true },
+        { companyName: "河北泽宏股份阀门井", state: 2, show: true },
+        { companyName: "河北泽宏股份阀门井", state: 3, show: true },
+      ],
+    };
+  },
+  computed: {
+    // 计算有多少个展示的对象,如果小于3个,就把justify-content: space-between;取消
+    getShowNum() {
+      return this.czList.filter((item) => item.show).length < this.addStartNum;
+    },
+  },
+  mounted() {
+    // this.changeAddStartNum();
+  },
+  methods: {
+    hide() {
+      this.carHide = !this.carHide;
+    },
+    // 根据父子元素自动计算是否需要添加值start
+    changeAddStartNum() {
+      const czItem = this.$refs.czItem;
+      let czItemWidth;
+      // 组件有可能是一个数组，所以要这样判断
+      if (Array.isArray(czItem)) {
+        const { width } = czItem[0].$el.getBoundingClientRect();
+        czItemWidth = width;
+      } else {
+        const { width } = czItem.$el.getBoundingClientRect();
+        czItemWidth = width;
+      }
+      // 取出collap的宽
+      const { width: CollapseWidth } =
+        this.$refs.myCollapse.$el.getBoundingClientRect();
+      // 得到最小的承载数量
+      this.addStartNum = Math.floor(CollapseWidth / czItemWidth);
+    },
+    //过滤选择
+    fliterTypeChange(data) {
+      const { state } = data;
+      const index = this.deviceTypeArr.indexOf(state);
+      if (index >= 0) {
+        this.deviceTypeArr.splice(index, 1);
+      } else {
+        this.deviceTypeArr.push(state);
+      }
+      this.filter(this.deviceTypeArr);
+    },
+    // 过滤对象
+    filter(arr) {
+      this.czList.forEach((item) => {
+        const { state } = item;
+        if (arr.includes(state)) {
+          item.show = true;
+        } else {
+          item.show = false;
+        }
+      });
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+$one: #666666;
+$two: #ff6c68;
+$three: #bbbbbb;
+$active: #06d7b1 !important;
+
+.filter {
+  margin-right: 22px;
+  margin-top: 5px;
+  font-size: 14px;
+
+  .text {
+    position: relative;
+    cursor: pointer;
+    &::before {
+      content: "";
+      position: absolute;
+      border-radius: 50%;
+      width: 6px;
+      height: 6px;
+      left: -10px;
+      top: 50%;
+      margin-top: -3px;
+    }
+
+    &.active {
+      color: $active;
+    }
+    &:hover {
+      color: #06d7b189 !important;
+    }
+  }
+
+  .number {
+    font-weight: 500;
+  }
+
+  &.one-1 {
+    .number,
+    .text {
+      color: $one;
+    }
+    .text {
+      &:before {
+        background-color: $one;
+      }
+    }
+  }
+  &.one-2 {
+    .number,
+    .text {
+      color: $two;
+    }
+    .text {
+      &:before {
+        background-color: $two;
+      }
+    }
+  }
+  &.one-3 {
+    .number,
+    .text {
+      color: $three;
+    }
+    .text {
+      &:before {
+        background-color: $three;
+      }
+    }
+  }
+}
+.container {
+  width: 100%;
+  flex-wrap: wrap;
+  margin-left: 35px;
+
+  &.start {
+    justify-content: flex-start;
+    & > div {
+      // margin-right: 50px;
+    }
+  }
+  & > div {
+    margin-bottom: 20px;
+    display: flex;
+    justify-content: flex-start;
+    // margin-right: 45px;
+    width: 15%;
+    min-width: 190px;
+    margin-right: 1.5%;
+    .left {
+      margin-right: 4px;
+      font-size: 14px;
+      max-width: 112px;
+    }
+    .state {
+      font-size: 8px;
+      padding: 0px 4px;
+      box-sizing: border-box;
+      &.one-1 {
+        color: #fff;
+        border: 1px solid #6fffe5;
+        border-radius: 2px;
+        background-color: #06d7b1;
+      }
+      &.one-2 {
+        color: #fff;
+        border: 1px solid #ff9c99;
+        border-radius: 2px;
+        background-color: #ff6c68;
+      }
+      &.one-3 {
+        color: #fff;
+        border: 1px solid #aaaaaa;
+        border-radius: 2px;
+        background-color: #bbbbbb;
+      }
+    }
+  }
+}
+.flex {
+  display: flex;
+  justify-content: flex-start;
+}
+</style>
\ No newline at end of file

gassafetyprogress-web/src/views/operationMonitor/monitorData/component/charsData/MyCollapse.vue

+<!--
+ * @Author: your name
+ * @Date: 2022-03-25 17:15:31
+ * @LastEditTime: 2022-03-28 13:46:49
+ * @LastEditors: Please set LastEditors
+ * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
+ * @FilePath: /gassafety-progress/gassafetyprogress-web/src/views/operationMonitor/monitorData/component/charsData/CzCard.vue
+-->
+
+<template>
+  <div class="czcard">
+    <div
+      class="card"
+      :style="{ height: transitionHeight }"
+      :class="{ hide: carHide }"
+    >
+      <div class="title flex">
+        <div class="left">
+          <div class="device">{{ title }}</div>
+          <slot name="chackbox" />
+        </div>
+        <div class="right">
+          <i
+            class="iconfont icon-jt"
+            @click="hide"
+            :class="{ active: !carHide }"
+          ></i>
+        </div>
+      </div>
+      <div ref="container">
+        <transition name="fade" mode="out-in">
+          <div :key="listNum">
+            <slot name="container" />
+          </div>
+        </transition>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { mapGetters } from "vuex";
+
+export default {
+  props: {
+    title: String,
+    // 动画需求
+    listNum: {
+      type: Number,
+      default:"1"
+    },
+  },
+
+  data() {
+    return {
+      carHide: true,
+      transitionHeight: "60px",
+    };
+  },
+
+  computed: {
+    ...mapGetters(["sidebar"]),
+  },
+  watch: {
+    ["sidebar.opened"](val) {
+      setTimeout(this.getHeight, 200);
+      // this.getHeight();
+    },
+    listNum() {
+      setTimeout(() => {
+        this.getHeight();
+      }, 300);
+    },
+  },
+  mounted() {
+    this.getHeight();
+  },
+
+  methods: {
+    hide() {
+      this.carHide = !this.carHide;
+    },
+    getHeight() {
+      const { height } = this.$refs?.container?.getBoundingClientRect();
+      if (!height) {
+        return;
+      }
+      // 高度必须是一个指定的值才能过渡变化，这样就计算出了整个元素的指定高度，然后赋值
+      if (height > 0) {
+        this.transitionHeight = height + 60 + 18 + "px";
+      } else {
+        this.transitionHeight = "60px";
+      }
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.fade-enter-active,
+.fade-leave-active {
+  transition: all 0.25s;
+}
+.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
+  opacity: 0;
+}
+.card {
+  transition: all 0.5s;
+  // height: 212px;
+  background: #ffffff;
+  box-shadow: 2px 0px 12px 1px rgba(0, 0, 0, 0.1);
+  border-radius: 4px 4px 4px 4px;
+  border: 1px solid #e6ebf5;
+  box-sizing: border-box;
+  padding: 15px 22px 18px 22px;
+  overflow: hidden;
+  margin-bottom: 20px;
+  &.hide {
+    height: 60px !important;
+  }
+  .title {
+    margin-bottom: 12px;
+    margin-left: 40px;
+    .left {
+      display: flex;
+      .device {
+        font-size: 18px;
+        color: #666666;
+        font-weight: 500;
+        margin-right: 62px;
+      }
+    }
+    .right {
+      i {
+        transition: all 0.5s;
+        display: inline-block;
+        font-size: 30px;
+        color: #c4c4c4;
+        cursor: pointer;
+        &.active {
+          transform: rotate(90deg);
+        }
+      }
+    }
+  }
+}
+.flex {
+  display: flex;
+  justify-content: space-between;
+}
+</style>
\ No newline at end of file

gassafetyprogress-web/src/views/operationMonitor/monitorData/component/charsData/TopCard.vue

+<!--
+ * @Author: your name
+ * @Date: 2022-03-25 13:46:23
+ * @LastEditTime: 2022-03-25 17:18:05
+ * @LastEditors: Please set LastEditors
+ * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
+ * @FilePath: /gassafety-progress/gassafetyprogress-web/src/views/operationMonitor/monitorData/component/charsData.vue
+-->
+<template>
+  <div class="">
+    <div class="top-card flex">
+      <div
+        class="box-card"
+        v-for="(item, index) in cardList"
+        :key="item.deviceName"
+      >
+        <div class="top flex">
+          <div class="top-left">
+            <span
+              class="iconfont"
+              :class="`icon-` + deviceIconList[index]"
+            ></span>
+            <span class="text">{{ item.deviceName }}</span>
+          </div>
+          <div class="top-right flex">
+            <span class="text">总数</span>
+            <span class="count">{{ item.count }}</span>
+          </div>
+        </div>
+
+        <div class="middle flex">
+          <div class="first">正常</div>
+          <div>高爆</div>
+          <div>低爆</div>
+          <div class="last">离线数</div>
+        </div>
+
+        <div class="bottom flex">
+          <div class="first">1234</div>
+          <div>1234</div>
+          <div>1231</div>
+          <div class="last">534534</div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "charsData",
+  props:{
+    cardList:{
+      type:Array,
+    }
+  },
+  data() {
+    return {
+      deviceIconList: ["ylb", "llj", "tcq"],
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+
+.top-card {
+  margin-bottom:22px;
+  & > div {
+    flex: 1;
+    margin-right: 20px;
+    height: 212px;
+    background: #ffffff;
+    box-shadow: 2px 0px 12px 1px rgba(0, 0, 0, 0.1);
+    border-radius: 4px 4px 4px 4px;
+    border: 1px solid #e6ebf5;
+    box-sizing: border-box;
+    padding: 34px 40px 38px;
+    .top {
+      font-size: 20px;
+      margin-bottom: 46px;
+
+      .top-left {
+        color: #1890ff;
+        .iconfont {
+          font-size: 20px;
+          margin-right: 4px;
+        }
+        .text {
+          font-weight: 500;
+        }
+      }
+
+      .top-right {
+        padding-top: 5px;
+        font-size: 16px;
+
+        .text {
+          font-size: 16px;
+          font-weight: 500;
+          margin-right: 2px;
+          padding-top: 3px;
+        }
+        .count {
+          color: #1890ff;
+          font-size: 22px;
+          letter-spacing: 1px;
+        }
+      }
+    }
+
+    &:last-child {
+      margin-right: 0;
+    }
+  }
+
+  .middle,
+  .bottom {
+    // justify-content: space-around;
+    & > div {
+      // flex: 1;
+      text-align: center;
+      font-size: 16px;
+      &.first {
+        text-align: left;
+      }
+      &.last {
+        text-align: right;
+      }
+    }
+  }
+  .middle {
+    margin-bottom: 20px;
+
+    & > div {
+      font-weight: 500;
+    }
+  }
+}
+.flex {
+  display: flex;
+  justify-content: space-between;
+}
+
+
+</style>
\ No newline at end of file

gassafetyprogress-web/src/views/operationMonitor/monitorData/component/charsData/Tyx.vue

+<!--
+ * @Author: your name
+ * @Date: 2022-03-25 17:15:31
+ * @LastEditTime: 2022-03-28 14:00:10
+ * @LastEditors: Please set LastEditors
+ * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
+ * @FilePath: /gassafety-progress/gassafetyprogress-web/src/views/operationMonitor/monitorData/component/charsData/CzCard.vue
+-->
+
+<template>
+  <div class="czcard">
+    <my-collapse
+      title="调压箱"
+      ref="myCollapse"
+      :listNum="czList.filter((item) => item.show).length"
+    >
+      <template v-slot:chackbox>
+        <div
+          class="filter"
+          :class="`one-${item.state}`"
+          v-for="item in filterList"
+          :key="item.value"
+        >
+          <span
+            class="text"
+            :class="{ active: deviceTypeArr.indexOf(item.state) >= 0 }"
+            @click="fliterTypeChange(item)"
+            >{{ item.value }}</span
+          >
+          <span class="number">({{ item.count }})</span>
+        </div>
+      </template>
+      <template #container>
+        <div class="container flex">
+          <div
+            class="com"
+            v-for="item in czList"
+            :key="item.deviceName"
+            v-show="item.show"
+          >
+            <div :title="item.companyName" class="left zzz">
+              {{ item.companyName }}
+            </div>
+            <div :class="`one-${item.state}`" class="state">
+              {{ typeState[item.state - 1] }}
+            </div>
+          </div>
+        </div>
+      </template>
+    </my-collapse>
+  </div>
+</template>
+
+<script>
+// 调压箱
+
+import MyCollapse from "./MyCollapse";
+import CzItem from "./CzItem";
+
+export default {
+  components: {
+    MyCollapse,
+    CzItem,
+  },
+  data() {
+    return {
+      carHide: true,
+      addStartNum: 3,
+      filterList: [
+        { value: "正常", count: 100, state: 1 },
+        { value: "报警", count: 100, state: 2 },
+        { value: "离线", count: 100, state: 3 },
+      ],
+      typeState: ["正常", "报警", "离线"],
+      deviceTypeArr: [1, 2, 3],
+      czList: [
+        { companyName: "河北泽宏股份调压箱", state: 1, show: true },
+        { companyName: "河北泽宏股份调压箱", state: 2, show: true },
+        { companyName: "河北泽宏股份调压箱", state: 3, show: true },
+        { companyName: "河北泽宏股份调压箱", state: 1, show: true },
+        { companyName: "河北泽宏股份调压箱", state: 2, show: true },
+        { companyName: "河北泽宏股份调压箱", state: 3, show: true },
+        { companyName: "河北泽宏股份调压箱", state: 1, show: true },
+        { companyName: "河北泽宏股份调压箱", state: 2, show: true },
+        { companyName: "河北泽宏股份调压箱", state: 3, show: true },
+        { companyName: "河北泽宏股份调压箱", state: 1, show: true },
+        { companyName: "河北泽宏股份调压箱", state: 2, show: true },
+        { companyName: "河北泽宏股份调压箱", state: 3, show: true },
+        { companyName: "河北泽宏股份调压箱", state: 1, show: true },
+        { companyName: "河北泽宏股份调压箱", state: 2, show: true },
+        { companyName: "河北泽宏股份调压箱", state: 3, show: true },
+        { companyName: "河北泽宏股份调压箱", state: 1, show: true },
+        { companyName: "河北泽宏股份调压箱", state: 2, show: true },
+        { companyName: "河北泽宏股份调压箱", state: 3, show: true },
+      ],
+    };
+  },
+  computed: {
+    // 计算有多少个展示的对象,如果小于3个,就把justify-content: space-between;取消
+    getShowNum() {
+      return this.czList.filter((item) => item.show).length < this.addStartNum;
+    },
+  },
+  mounted() {
+    // this.changeAddStartNum();
+  },
+  methods: {
+    hide() {
+      this.carHide = !this.carHide;
+    },
+    // 根据父子元素自动计算是否需要添加值start
+    changeAddStartNum() {
+      const czItem = this.$refs.czItem;
+      let czItemWidth;
+      // 组件有可能是一个数组，所以要这样判断
+      if (Array.isArray(czItem)) {
+        const { width } = czItem[0].$el.getBoundingClientRect();
+        czItemWidth = width;
+      } else {
+        const { width } = czItem.$el.getBoundingClientRect();
+        czItemWidth = width;
+      }
+      // 取出collap的宽
+      const { width: CollapseWidth } =
+        this.$refs.myCollapse.$el.getBoundingClientRect();
+      // 得到最小的承载数量
+      this.addStartNum = Math.floor(CollapseWidth / czItemWidth);
+    },
+    //过滤选择
+    fliterTypeChange(data) {
+      const { state } = data;
+      const index = this.deviceTypeArr.indexOf(state);
+      if (index >= 0) {
+        this.deviceTypeArr.splice(index, 1);
+      } else {
+        this.deviceTypeArr.push(state);
+      }
+      this.filter(this.deviceTypeArr);
+    },
+    // 过滤对象
+    filter(arr) {
+      this.czList.forEach((item) => {
+        const { state } = item;
+        if (arr.includes(state)) {
+          item.show = true;
+        } else {
+          item.show = false;
+        }
+      });
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+$one: #666666;
+$two: #ff6c68;
+$three: #bbbbbb;
+$active: #06d7b1 !important;
+
+.filter {
+  margin-right: 22px;
+  margin-top: 5px;
+  font-size: 14px;
+
+  .text {
+    position: relative;
+    cursor: pointer;
+    &::before {
+      content: "";
+      position: absolute;
+      border-radius: 50%;
+      width: 6px;
+      height: 6px;
+      left: -10px;
+      top: 50%;
+      margin-top: -3px;
+    }
+
+    &.active {
+      color: $active;
+    }
+    &:hover {
+      color: #06d7b189 !important;
+    }
+  }
+
+  .number {
+    font-weight: 500;
+  }
+
+  &.one-1 {
+    .number,
+    .text {
+      color: $one;
+    }
+    .text {
+      &:before {
+        background-color: $one;
+      }
+    }
+  }
+  &.one-2 {
+    .number,
+    .text {
+      color: $two;
+    }
+    .text {
+      &:before {
+        background-color: $two;
+      }
+    }
+  }
+  &.one-3 {
+    .number,
+    .text {
+      color: $three;
+    }
+    .text {
+      &:before {
+        background-color: $three;
+      }
+    }
+  }
+}
+.container {
+  width: 100%;
+  flex-wrap: wrap;
+  margin-left: 35px;
+
+  &.start {
+    justify-content: flex-start;
+    & > div {
+      // margin-right: 50px;
+    }
+  }
+  & > div {
+    margin-bottom: 20px;
+    display: flex;
+    justify-content: flex-start;
+    // margin-right: 45px;
+    width: 15%;
+    min-width: 190px;
+    margin-right: 1.5%;
+    .left {
+      margin-right: 4px;
+      font-size: 14px;
+      max-width: 112px;
+    }
+    .state {
+      font-size: 8px;
+      padding: 0px 4px;
+      box-sizing: border-box;
+      &.one-1 {
+        color: #fff;
+        border: 1px solid #6fffe5;
+        border-radius: 2px;
+        background-color: #06d7b1;
+      }
+      &.one-2 {
+        color: #fff;
+        border: 1px solid #ff9c99;
+        border-radius: 2px;
+        background-color: #ff6c68;
+      }
+      &.one-3 {
+        color: #fff;
+        border: 1px solid #aaaaaa;
+        border-radius: 2px;
+        background-color: #bbbbbb;
+      }
+    }
+  }
+}
+.flex {
+  display: flex;
+  justify-content: flex-start;
+}
+</style>
\ No newline at end of file

gassafetyprogress-web/src/views/operationMonitor/monitorData/component/charsData/index.vue

+<!--
+ * @Author: your name
+ * @Date: 2022-03-25 13:46:23
+ * @LastEditTime: 2022-03-28 13:50:56
+ * @LastEditors: Please set LastEditors
+ * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
+ * @FilePath: /gassafety-progress/gassafetyprogress-web/src/views/operationMonitor/monitorData/component/charsData.vue
+-->
+<template>
+  <div class="chars-data">
+    <TopCard :cardList="cardList"/>
+    <CzCard/>
+    <Cg/>
+    <Fmj/>
+    <Tyx/>
+  </div>
+</template>
+
+<script>
+import TopCard from "./TopCard";
+import CzCard from "./CzCard";
+import Cg from "./Cg";
+import Fmj from "./Fmj";
+import Tyx from "./Tyx";
+export default {
+  name: "charsData",
+  components: {
+    TopCard,
+    CzCard,
+    Cg,
+    Fmj,
+    Tyx
+  },
+  data() {
+    return {
+      cardList: [
+        { deviceName: "压力表", count: 123123 },
+        { deviceName: "流量计", count: 123123 },
+        { deviceName: "探测器", count: 123123 },
+      ],
+      deviceIconList: ["ylb", "llj", "tcq"],
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.chars-data {
+  // padding: 26px 108px 0 88px;
+  padding: 20px;
+}
+</style>
\ No newline at end of file

gassafetyprogress-web/src/views/operationMonitor/monitorData/component/tableData/index.vue

+<template>
+  <div class="app-container">
+    <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="68px">
+      <el-form-item label="设备名称" prop="deviceName">
+        <el-input
+          v-model="queryParams.deviceName"
+          placeholder="请输入设备名称"
+          clearable
+          size="small"
+          @keyup.enter.native="handleQuery"
+        />
+      </el-form-item>
+      <el-form-item label="设备编号" prop="deviceNum">
+        <el-input
+          v-model="queryParams.deviceNum"
+          placeholder="请输入设备编号"
+          clearable
+          size="small"
+          @keyup.enter.native="handleQuery"
+        />
+      </el-form-item>
+      <el-form-item label="所属企业" prop="beyondEnterpriseId">
+        <el-select v-model="queryParams.beyondEnterpriseId" placeholder="请选择所属企业">
+          <el-option
+            v-for="item in enterprises"
+            :key="item.enterpriseId"
+            :label="item.enterpriseName"
+            :value="item.enterpriseId"
+          ></el-option>
+        </el-select>
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
+        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
+      </el-form-item>
+    </el-form>
+
+
+    <el-tabs v-model="activeName" @tab-click="handleClick">
+      <el-tab-pane label="压力表" name="first" key="first">
+        <pressureTab
+          :activeName="activeName"
+          :childrenQueryParams="queryParams"
+          v-if="activeName === 'first'"
+          ref="pressure"></pressureTab>
+      </el-tab-pane>
+
+      <el-tab-pane label="流量计" name="second" key="second">
+        <flowmeterTab
+          :activeName="activeName"
+          :childrenQueryParams="queryParams"
+          v-if="activeName === 'second'"
+          ref="flowmeter"></flowmeterTab>
+      </el-tab-pane>
+
+      <el-tab-pane label="探测器" name="third" key="third">
+        <detector-tab
+          :activeName="activeName"
+          :childrenQueryParams="queryParams"
+          v-if="activeName === 'third'"
+          ref="detector">
+        </detector-tab>
+      </el-tab-pane>
+
+    </el-tabs>
+
+  </div>
+</template>
+
+<script>
+import { listData, getData, delData, addData, updateData, exportData } from "@/api/operationMonitor/data";
+import { enterpriseLists } from "@/api/regulation/info";
+import detectorTab from "./detectorTab";
+import flowmeterTab from "./flowmeterTab";
+import pressureTab from "./pressureTab"
+export default {
+  name: "Data",
+  components: {
+    detectorTab,
+    flowmeterTab,
+    pressureTab
+  },
+  data() {
+    return {
+      // 遮罩层
+      loading: true,
+      // 导出遮罩层
+      exportLoading: false,
+      // 选中数组
+      ids: [],
+      // 非单个禁用
+      single: true,
+      // 非多个禁用
+      multiple: true,
+      // 显示搜索条件
+      showSearch: true,
+      // 总条数
+      total: 0,
+      // 设备监控表格数据
+      dataList: [],
+      // 弹出层标题
+      title: "",
+      // 是否显示弹出层
+      open: false,
+      // 查询参数
+      queryParams: {
+        pageNum: 1,
+        pageSize: 10,
+        deviceNum: null,
+        standardConditionAccumulation: null,
+        workingConditionAccumulation: null,
+        backingStandardConditionAccumulation: null,
+        residualQuantity: null,
+        standardConditionFlow: null,
+        workingConditionFlow: null,
+        temperature: null,
+        pressure: null,
+        reportTime: null,
+        communicationStatus: null,
+        deviceStatus: null,
+        isDel: null,
+        remarks: null,
+        deviceType: "1"
+      },
+      // 表单参数
+      form: {},
+      // 表单校验
+      rules: {
+        deviceNum: [
+          { required: true, message: "设备id不能为空", trigger: "blur" }
+        ],
+      },
+      enterprises:[],
+      activeName: "first"
+    };
+  },
+  created() {
+    //this.getList();
+    this.getEnterpriseLists();
+  },
+  methods: {
+    // 取消按钮
+    cancel() {
+      this.open = false;
+      this.reset();
+    },
+    // 表单重置
+    reset() {
+      this.form = {
+        deviceReportDataId: null,
+        deviceNum: null,
+        standardConditionAccumulation: null,
+        workingConditionAccumulation: null,
+        backingStandardConditionAccumulation: null,
+        residualQuantity: null,
+        standardConditionFlow: null,
+        workingConditionFlow: null,
+        temperature: null,
+        pressure: null,
+        reportTime: null,
+        communicationStatus: "0",
+        deviceStatus: "0",
+        createBy: null,
+        createTime: null,
+        updateBy: null,
+        updateTime: null,
+        isDel: null,
+        remarks: null
+      };
+      this.resetForm("form");
+    },
+    /** 搜索按钮操作 */
+    handleQuery() {
+      if("first" == this.activeName){
+        this.$refs.pressure.pressureHandleQuery();
+      }else if("second" == this.activeName){
+        this.$refs.flowmeter.flowmeterHandleQuery();
+      }else{
+        this.$refs.detector.detectorHandleQuery();
+      }
+    },
+    /** 重置按钮操作 */
+    resetQuery() {
+      this.resetForm("queryForm");
+      this.handleQuery();
+    },
+    //所属单位
+    getEnterpriseLists(){
+      enterpriseLists().then(response => {
+          this.enterprises = response.rows;
+      });
+    },
+    //切换tag
+    handleClick(tab, event){
+      if("0" == tab.index){
+        this.activeName = "first"
+      }else if("1" == tab.index){
+        this.activeName = "second"
+      }else{
+        this.activeName = "third"
+      }
+    }
+  }
+};
+</script>
+<style>
+  .el-tag {
+    margin-left: 10px;
+    text-align: center;
+    width: 200px;
+  }
+</style>

gassafetyprogress-web/src/views/operationMonitor/monitorData/index.vue

+<!--
+ * @Author: your name
+ * @Date: 2022-03-08 17:28:57
+ * @LastEditTime: 2022-03-28 13:54:22
+ * @LastEditors: Please set LastEditors
+ * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
+ * @FilePath: /gassafety-progress/gassafetyprogress-web/src/views/operationMonitor/monitorData/index.vue
+-->
 <template>
-  <div class="app-container">
-    <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="68px">
-      <el-form-item label="设备名称" prop="deviceName">
-        <el-input
-          v-model="queryParams.deviceName"
-          placeholder="请输入设备名称"
-          clearable
-          size="small"
-          @keyup.enter.native="handleQuery"
-        />
-      </el-form-item>
-      <el-form-item label="设备编号" prop="deviceNum">
-        <el-input
-          v-model="queryParams.deviceNum"
-          placeholder="请输入设备编号"
-          clearable
-          size="small"
-          @keyup.enter.native="handleQuery"
-        />
-      </el-form-item>
-      <el-form-item label="所属企业" prop="beyondEnterpriseId">
-        <el-select v-model="queryParams.beyondEnterpriseId" placeholder="请选择所属企业">
-          <el-option
-            v-for="item in enterprises"
-            :key="item.enterpriseId"
-            :label="item.enterpriseName"
-            :value="item.enterpriseId"
-          ></el-option>
-        </el-select>
-      </el-form-item>
-      <el-form-item>
-        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
-        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
-      </el-form-item>
-    </el-form>
-
-
-    <el-tabs v-model="activeName" @tab-click="handleClick">
-      <el-tab-pane label="压力表" name="first" key="first">
-        <pressureTab
-          :activeName="activeName"
-          :childrenQueryParams="queryParams"
-          v-if="activeName === 'first'"
-          ref="pressure"></pressureTab>
-      </el-tab-pane>
-
-      <el-tab-pane label="流量计" name="second" key="second">
-        <flowmeterTab
-          :activeName="activeName"
-          :childrenQueryParams="queryParams"
-          v-if="activeName === 'second'"
-          ref="flowmeter"></flowmeterTab>
-      </el-tab-pane>
-
-      <el-tab-pane label="探测器" name="third" key="third">
-        <detector-tab
-          :activeName="activeName"
-          :childrenQueryParams="queryParams"
-          v-if="activeName === 'third'"
-          ref="detector">
-        </detector-tab>
-      </el-tab-pane>
-
-    </el-tabs>
-
+  <div class="monitorData">
+    <div class="iconfont">
+      <div
+        v-for="(item, index) in changeIcon"
+        :key="item.class"
+        :class="[item.class, { active: isCom == index }]"
+        @click="isComChange(index)"
+      ></div>
+    </div>
+    <transition name="fade-transform" mode="out-in">
+      <keep-alive>
+        <component :is="currentTabComponent"></component>
+      </keep-alive>
+    </transition>
   </div>
 </template>
 
 <script>
-import { listData, getData, delData, addData, updateData, exportData } from "@/api/operationMonitor/data";
-import { enterpriseLists } from "@/api/regulation/info";
-import detectorTab from "./component/detectorTab";
-import flowmeterTab from "./component/flowmeterTab";
-import pressureTab from "./component/pressureTab"
+import charsData from "./component/charsData";
+import tabledata from "./component/tableData";
 export default {
-  name: "Data",
-  components: {
-    detectorTab,
-    flowmeterTab,
-    pressureTab
-  },
   data() {
     return {
-      // 遮罩层
-      loading: true,
-      // 导出遮罩层
-      exportLoading: false,
-      // 选中数组
-      ids: [],
-      // 非单个禁用
-      single: true,
-      // 非多个禁用
-      multiple: true,
-      // 显示搜索条件
-      showSearch: true,
-      // 总条数
-      total: 0,
-      // 设备监控表格数据
-      dataList: [],
-      // 弹出层标题
-      title: "",
-      // 是否显示弹出层
-      open: false,
-      // 查询参数
-      queryParams: {
-        pageNum: 1,
-        pageSize: 10,
-        deviceNum: null,
-        standardConditionAccumulation: null,
-        workingConditionAccumulation: null,
-        backingStandardConditionAccumulation: null,
-        residualQuantity: null,
-        standardConditionFlow: null,
-        workingConditionFlow: null,
-        temperature: null,
-        pressure: null,
-        reportTime: null,
-        communicationStatus: null,
-        deviceStatus: null,
-        isDel: null,
-        remarks: null,
-        deviceType: "1"
-      },
-      // 表单参数
-      form: {},
-      // 表单校验
-      rules: {
-        deviceNum: [
-          { required: true, message: "设备id不能为空", trigger: "blur" }
-        ],
-      },
-      enterprises:[],
-      activeName: "first"
+      // currentTabComponent: tabledata,
+      changeIcon: [{ class: "icon-b" }, { class: "icon-a" }],
+      isCom: 0,
     };
   },
-  created() {
-    //this.getList();
-    this.getEnterpriseLists();
+  computed: {
+    currentTabComponent() {
+      return this.isCom == 0 ? tabledata : charsData;
+    },
   },
   methods: {
-    // 取消按钮
-    cancel() {
-      this.open = false;
-      this.reset();
-    },
-    // 表单重置
-    reset() {
-      this.form = {
-        deviceReportDataId: null,
-        deviceNum: null,
-        standardConditionAccumulation: null,
-        workingConditionAccumulation: null,
-        backingStandardConditionAccumulation: null,
-        residualQuantity: null,
-        standardConditionFlow: null,
-        workingConditionFlow: null,
-        temperature: null,
-        pressure: null,
-        reportTime: null,
-        communicationStatus: "0",
-        deviceStatus: "0",
-        createBy: null,
-        createTime: null,
-        updateBy: null,
-        updateTime: null,
-        isDel: null,
-        remarks: null
-      };
-      this.resetForm("form");
-    },
-    /** 搜索按钮操作 */
-    handleQuery() {
-      if("first" == this.activeName){
-        this.$refs.pressure.pressureHandleQuery();
-      }else if("second" == this.activeName){
-        this.$refs.flowmeter.flowmeterHandleQuery();
-      }else{
-        this.$refs.detector.detectorHandleQuery();
-      }
+    isComChange(index) {
+      this.isCom = index;
     },
-    /** 重置按钮操作 */
-    resetQuery() {
-      this.resetForm("queryForm");
-      this.handleQuery();
-    },
-    //所属单位
-    getEnterpriseLists(){
-      enterpriseLists().then(response => {
-          this.enterprises = response.rows;
-      });
-    },
-    //切换tag
-    handleClick(tab, event){
-      if("0" == tab.index){
-        this.activeName = "first"
-      }else if("1" == tab.index){
-        this.activeName = "second"
-      }else{
-        this.activeName = "third"
-      }
-    }
-  }
+  },
 };
 </script>
-<style>
-  .el-tag {
-    margin-left: 10px;
-    text-align: center;
-    width: 200px;
+
+<style lang="scss" scoped>
+@import url("~@/assets/iconfont/monitorData/iconfont.css");
+.iconfont {
+  display: flex;
+  justify-content: right;
+  margin-right: 37px;
+  padding-top: 38px;
+  div {
+    cursor: pointer;
+    padding: 4px;
+    &.active,
+    &:hover {
+      background-color: #666666;
+      color: #fff;
+    }
   }
-</style>
+  .icon-b {
+    margin-right: 23px;
+  }
+}
+</style>>
+

gassafetyprogress-web/src/views/regulation/gasuser/index.vue

@@ -53,14 +53,38 @@
     <el-table v-loading="loading" :data="userList" @selection-change="handleSelectionChange">
       <el-table-column type="selection" width="55" align="center" />
       <!--<el-table-column label="用户账号" align="center" prop="username" />-->
-      <el-table-column label="用户名称" align="center" prop="nickName" />
-      <el-table-column label="用户类型" align="center" prop="userType" />
-      <el-table-column label="地址" align="center" prop="address" />
-      <el-table-column label="经度" align="center" prop="longitude" />
-      <el-table-column label="纬度" align="center" prop="latitude" />
-      <el-table-column label="联系人" align="center" prop="linkman" />
-      <el-table-column label="电话" align="center" prop="phone" />
-      <el-table-column label="邮箱" align="center" prop="email" />
+      <el-table-column label="用户名称" align="center" prop="nickName" >
+        <span slot-scope="scope" v-if="scope.row.nickName">{{scope.row.nickName}}</span>
+        <span v-else>-</span>
+      </el-table-column>
+      <el-table-column label="用户类型" align="center" prop="userType" >
+        <span slot-scope="scope" v-if="scope.row.userType">{{scope.row.userType}}</span>
+        <span v-else>-</span>
+      </el-table-column>
+      <el-table-column label="地址" align="center" prop="address" >
+        <span slot-scope="scope" v-if="scope.row.address">{{scope.row.address}}</span>
+        <span v-else>-</span>
+      </el-table-column>
+      <el-table-column label="经度" align="center" prop="longitude" >
+        <span slot-scope="scope" v-if="scope.row.longitude">{{scope.row.longitude}}</span>
+        <span v-else>-</span>
+      </el-table-column>
+      <el-table-column label="纬度" align="center" prop="latitude" >
+        <span slot-scope="scope" v-if="scope.row.latitude">{{scope.row.latitude}}</span>
+        <span v-else>-</span>
+      </el-table-column>
+      <el-table-column label="联系人" align="center" prop="linkman" >
+        <span slot-scope="scope" v-if="scope.row.linkman">{{scope.row.linkman}}</span>
+        <span v-else>-</span>
+      </el-table-column>
+      <el-table-column label="电话" align="center" prop="phone" >
+        <span slot-scope="scope" v-if="scope.row.phone">{{scope.row.phone}}</span>
+        <span v-else>-</span>
+      </el-table-column>
+      <el-table-column label="邮箱" align="center" prop="email" >
+        <span slot-scope="scope" v-if="scope.row.email">{{scope.row.email}}</span>
+        <span v-else>-</span>
+      </el-table-column>
       <!--<el-table-column label="备注" align="center" prop="remarks" />-->
       <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
         <template slot-scope="scope">

gassafetyprogress-web/src/views/regulation/info/index.vue

@@ -80,14 +80,38 @@
           <img  :src="List.row.doDusiness" width="100px">
         </template>
       </el-table-column>
-      <el-table-column label="企业名称" align="center" prop="enterpriseName" />
-      <el-table-column label="注册地址" align="center" prop="registerAddress" />
-      <el-table-column label="法定代表人" align="center" prop="legalRepresentative" />
-      <el-table-column label="经营区域" align="center" prop="businessArea" />
-      <el-table-column label="许可证编号" align="center" prop="licenseKey" />
-      <el-table-column label="许可证有效期" align="center" prop="licenseValidityTime" />
-      <el-table-column label="年度监督检查情况" align="center" prop="annualSupervisionInspection" />
-      <el-table-column label="备注" align="center" prop="remarks" />
+      <el-table-column label="企业名称" align="center" prop="enterpriseName" >
+        <span slot-scope="scope" v-if="scope.row.enterpriseName">{{scope.row.enterpriseName}}</span>
+        <span v-else>-</span>
+      </el-table-column>
+      <el-table-column label="注册地址" align="center" prop="registerAddress" >
+        <span slot-scope="scope" v-if="scope.row.registerAddress">{{scope.row.registerAddress}}</span>
+        <span v-else>-</span>
+      </el-table-column>
+      <el-table-column label="法定代表人" align="center" prop="legalRepresentative" >
+        <span slot-scope="scope" v-if="scope.row.legalRepresentative">{{scope.row.legalRepresentative}}</span>
+        <span v-else>-</span>
+      </el-table-column>
+      <el-table-column label="经营区域" align="center" prop="businessArea">
+        <span slot-scope="scope" v-if="scope.row.businessArea">{{scope.row.businessArea}}</span>
+        <span v-else>-</span>
+      </el-table-column>
+      <el-table-column label="许可证编号" align="center" prop="licenseKey" >
+        <span slot-scope="scope" v-if="scope.row.licenseKey">{{scope.row.licenseKey}}</span>
+        <span v-else>-</span>
+      </el-table-column>
+      <el-table-column label="许可证有效期" align="center" prop="licenseValidityTime" >
+        <span slot-scope="scope" v-if="scope.row.licenseValidityTime">{{scope.row.licenseValidityTime}}</span>
+        <span v-else>-</span>
+      </el-table-column>
+      <el-table-column label="年度监督检查情况" align="center" prop="annualSupervisionInspection" >
+        <span slot-scope="scope" v-if="scope.row.annualSupervisionInspection">{{scope.row.annualSupervisionInspection}}</span>
+        <span v-else>-</span>
+      </el-table-column>
+      <el-table-column label="备注" align="center" prop="remarks" >
+        <span slot-scope="scope" v-if="scope.row.remarks">{{scope.row.remarks}}</span>
+        <span v-else>-</span>
+      </el-table-column>
       <el-table-column label="营业执照" align="center"  >
         <template slot-scope="List">
           <span

gassafetyprogress-web/src/views/regulation/pipe/index.vue

@@ -92,16 +92,40 @@
 
     <el-table v-loading="loading" :data="pipeList" @selection-change="handleSelectionChange">
       <el-table-column type="selection" width="55" align="center" />
-      <el-table-column label="管道长度(米)" align="center" prop="pipeLength" />
-      <el-table-column label="走向" align="center" prop="pipeTrend" />
-      <el-table-column label="管径(厘米)" align="center" prop="pipeDiameter" />
-      <el-table-column label="压力" align="center" prop="pipePressure" />
+      <el-table-column label="管道长度(米)" align="center" prop="pipeLength" >
+        <span slot-scope="scope" v-if="scope.row.pipeLength">{{scope.row.pipeLength}}</span>
+        <span v-else>-</span>
+      </el-table-column>
+      <el-table-column label="走向" align="center" prop="pipeTrend" >
+        <span slot-scope="scope" v-if="scope.row.pipeTrend">{{scope.row.pipeTrend}}</span>
+        <span v-else>-</span>
+      </el-table-column>
+      <el-table-column label="管径(厘米)" align="center" prop="pipeDiameter" >
+        <span slot-scope="scope" v-if="scope.row.pipeDiameter">{{scope.row.pipeDiameter}}</span>
+        <span v-else>-</span>
+      </el-table-column>
+      <el-table-column label="压力" align="center" prop="pipePressure" >
+        <span slot-scope="scope" v-if="scope.row.pipePressure">{{scope.row.pipePressure}}</span>
+        <span v-else>-</span>
+      </el-table-column>
 <!--      <el-table-column label="人员类型" align="center" prop="peopleOccupation" />-->
-      <el-table-column label="建设年代" align="center" prop="buildDate" />
-      <el-table-column label="建设单位" align="center" prop="buildUnit" />
-      <el-table-column label="权属单位" align="center" prop="beyondEnterpriseName" />
+      <el-table-column label="建设年代" align="center" prop="buildDate" >
+        <span slot-scope="scope" v-if="scope.row.buildDate">{{scope.row.buildDate}}</span>
+        <span v-else>-</span>
+      </el-table-column>
+      <el-table-column label="建设单位" align="center" prop="buildUnit" >
+        <span slot-scope="scope" v-if="scope.row.buildUnit">{{scope.row.buildUnit}}</span>
+        <span v-else>-</span>
+      </el-table-column>
+      <el-table-column label="权属单位" align="center" prop="beyondEnterpriseName" >
+        <span slot-scope="scope" v-if="scope.row.beyondEnterpriseName">{{scope.row.beyondEnterpriseName}}</span>
+        <span v-else>-</span>
+      </el-table-column>
 <!--      <el-table-column label="坐标" align="center" prop="coordinates" />-->
-      <el-table-column label="备注" align="center" prop="remarks" />
+      <el-table-column label="备注" align="center" prop="remarks" >
+        <span slot-scope="scope" v-if="scope.row.remarks">{{scope.row.remarks}}</span>
+        <span v-else>-</span>
+      </el-table-column>
       <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
         <template slot-scope="scope">
           <el-button

gassafetyprogress-web/src/views/regulation/station/index.vue

@@ -84,23 +84,47 @@
     <el-table v-loading="loading" :data="stationList" @selection-change="handleSelectionChange">
       <el-table-column type="selection" width="55" align="center" />
       <el-table-column label="照片" align="center"  >
-        <template scope="List">
+        <template slot-scope="List">
           <img  :src="List.row.pictureAddress" width="100px">
         </template>
       </el-table-column>
-      <el-table-column label="场站类型" align="center" prop="siteStationType" />
-      <el-table-column label="场站名称" align="center" prop="siteStationName" />
+      <el-table-column label="场站类型" align="center" prop="siteStationType" >
+        <span slot-scope="scope" v-if="scope.row.siteStationType">{{scope.row.siteStationType}}</span>
+        <span v-else>-</span>
+      </el-table-column>
+      <el-table-column label="场站名称" align="center" prop="siteStationName" >
+        <span slot-scope="scope" v-if="scope.row.siteStationName">{{scope.row.siteStationName}}</span>
+        <span v-else>-</span>
+      </el-table-column>
       <el-table-column label="建设年代" align="center" prop="buildDate" width="180">
         <template slot-scope="scope">
           <span>{{ parseTime(scope.row.buildDate, '{y}-{m}-{d}') }}</span>
         </template>
       </el-table-column>
-      <el-table-column label="建设单位" align="center" prop="buildUnit" />
-      <el-table-column label="权属单位" align="center" prop="beyondEnterpriseId" />
-      <el-table-column label="权属单位" align="center" prop="beyondEnterpriseName" />
-      <el-table-column label="经度" align="center" prop="longitude" />
-      <el-table-column label="纬度" align="center" prop="latitude" />
-      <el-table-column label="备注" align="center" prop="remarks" />
+      <el-table-column label="建设单位" align="center" prop="buildUnit" >
+        <span slot-scope="scope" v-if="scope.row.buildUnit">{{scope.row.buildUnit}}</span>
+        <span v-else>-</span>
+      </el-table-column>
+      <el-table-column label="权属单位" align="center" prop="beyondEnterpriseId" >
+        <span slot-scope="scope" v-if="scope.row.beyondEnterpriseId">{{scope.row.beyondEnterpriseId}}</span>
+        <span v-else>-</span>
+      </el-table-column>
+      <el-table-column label="权属单位" align="center" prop="beyondEnterpriseName" >
+        <span slot-scope="scope" v-if="scope.row.beyondEnterpriseName">{{scope.row.beyondEnterpriseName}}</span>
+        <span v-else>-</span>
+      </el-table-column>
+      <el-table-column label="经度" align="center" prop="longitude" >
+        <span slot-scope="scope" v-if="scope.row.longitude">{{scope.row.longitude}}</span>
+        <span v-else>-</span>
+      </el-table-column>
+      <el-table-column label="纬度" align="center" prop="latitude" >
+        <span slot-scope="scope" v-if="scope.row.latitude">{{scope.row.latitude}}</span>
+        <span v-else>-</span>
+      </el-table-column>
+      <el-table-column label="备注" align="center" prop="remarks" >
+        <span slot-scope="scope" v-if="scope.row.remarks">{{scope.row.remarks}}</span>
+        <span v-else>-</span>
+      </el-table-column>
       <el-table-column label="照片" align="center"  >
         <template slot-scope="List">
           <span
@@ -253,7 +277,10 @@
           </el-col>
         </el-row>
       </el-form>
-      <h3>关联设备</h3>
+      <div class="tableTitle">
+        <img :src="relationImg" style="width: 24px; height: 25px;position: relative; left: -339px; top: -12px;"/>
+        <span class="midText">关联设备</span>
+      </div>
       <el-table v-loading="loadings" ref="multipleTable" :data="DetailInfoList" tooltip-effect="dark" style="width: 100%" max-height="250" @selection-change="tableDataSelectionChange">
         <el-table-column label="设备名称" align="center" prop="deviceName" />
         <el-table-column label="设备型号" align="center" prop="deviceModel" />
@@ -451,6 +478,7 @@ export default {
   },
   data() {
     return {
+      relationImg: require('@/assets/project/relation.png'),
       //头像
       fileList: [],
       /**-------------------弹出框所用数据-------------------------------*/
@@ -985,4 +1013,21 @@ export default {
     border-width: 1px;
     border-color: rgb(48, 180, 107);
   }
+  .tableTitle {
+    position: relative;
+    margin: 24px  auto;
+    width: 600px;
+    height: 2px;
+    background-color: #d4d4d4;
+    text-align: center;
+    font-size: 16px;
+    color: rgba(101, 101, 101, 1);
+  }
+  .midText {
+    position: absolute;
+    left: 3%;
+    background-color: #ffffff;
+    padding: 0 15px;
+    transform: translateX(-50%) translateY(-50%);
+  }
 </style>

gassafetyprogress-web/src/views/regulation/supervise/index.vue

@@ -88,15 +88,42 @@
           <img  :src="List.row.avatarAddress" width="100px">
         </template>
       </el-table-column>
-      <el-table-column label="姓名" align="center" prop="employedPeopleName" />
-      <el-table-column label="身份证号" align="center" prop="idCard" />
-      <el-table-column label="技能岗位证书编号" align="center" prop="certificateNum" />
-      <el-table-column label="受聘企业名称" align="center" prop="beyondEnterpriseName" />
-      <el-table-column label="发证部门" align="center" prop="registerExaminationType" />
-      <el-table-column label="任职岗位" align="center" prop="peopleOccupation" />
-      <el-table-column label="发证日期" align="center" prop="issueDate" />
-      <el-table-column label="复检日期" align="center" prop="certificateChange" />
-      <el-table-column label="备注" align="center" prop="remarks" />
+      <el-table-column label="姓名" align="center" prop="employedPeopleName" >
+        <span slot-scope="scope" v-if="scope.row.employedPeopleName">{{scope.row.employedPeopleName}}</span>
+        <span v-else>-</span>
+      </el-table-column>
+      <el-table-column label="身份证号" align="center" prop="idCard" >
+        <span slot-scope="scope" v-if="scope.row.idCard">{{scope.row.idCard}}</span>
+        <span v-else>-</span>
+      </el-table-column>
+      <el-table-column label="技能岗位证书编号" align="center" prop="certificateNum" >
+        <span slot-scope="scope" v-if="scope.row.certificateNum">{{scope.row.certificateNum}}</span>
+        <span v-else>-</span>
+      </el-table-column>
+      <el-table-column label="受聘企业名称" align="center" prop="beyondEnterpriseName" >
+        <span slot-scope="scope" v-if="scope.row.beyondEnterpriseName">{{scope.row.beyondEnterpriseName}}</span>
+        <span v-else>-</span>
+      </el-table-column>
+      <el-table-column label="发证部门" align="center" prop="registerExaminationType" >
+        <span slot-scope="scope" v-if="scope.row.registerExaminationType">{{scope.row.registerExaminationType}}</span>
+        <span v-else>-</span>
+      </el-table-column>
+      <el-table-column label="任职岗位" align="center" prop="peopleOccupation" >
+        <span slot-scope="scope" v-if="scope.row.peopleOccupation">{{scope.row.peopleOccupation}}</span>
+        <span v-else>-</span>
+      </el-table-column>
+      <el-table-column label="发证日期" align="center" prop="issueDate" >
+        <span slot-scope="scope" v-if="scope.row.issueDate">{{scope.row.issueDate}}</span>
+        <span v-else>-</span>
+      </el-table-column>
+      <el-table-column label="复检日期" align="center" prop="certificateChange" >
+        <span slot-scope="scope" v-if="scope.row.certificateChange">{{scope.row.certificateChange}}</span>
+        <span v-else>-</span>
+      </el-table-column>
+      <el-table-column label="备注" align="center" prop="remarks" >
+        <span slot-scope="scope" v-if="scope.row.remarks">{{scope.row.remarks}}</span>
+        <span v-else>-</span>
+      </el-table-column>
       <el-table-column label="照片" align="center"  >
       <template slot-scope="List">
           <span