修改企业数据监控页面，可以切换成另一种展示形式

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/layout/components/Navbar.vue

@@ -25,7 +25,7 @@
             <el-dropdown-item v-if="total==0">
               <span>暂无消息</span>
             </el-dropdown-item>
-            <div v-for="(item,index) in receivedList" >
+            <div v-for="(item,index) in receivedList" :key="index+Math.random()">
               <el-dropdown-item v-if="index==0" @click.native="openMassage(item.id,item.eventName)">
                   <span>您有新消息：{{item.eventName}}</span>
               </el-dropdown-item>

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

+<!--
+ * @Author: your name
+ * @Date: 2022-03-25 17:15:31
+ * @LastEditTime: 2022-03-26 17:14:12
+ * @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">
+      <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);
+      // 改变大小
+      this.$nextTick(() => {
+        this.$refs.myCollapse.getHeight();
+      });
+    },
+    // 过滤对象
+    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%;
+    .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-26 17:12:04
+ * @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">
+      <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 in czList" :key="item.deviceName" 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: "加气站1", count: 100, type: 2 },
+        { value: "加气站2", count: 100, type: 3 },
+        { value: "加气站3", count: 100, type: 4 },
+        { value: "加气站4", count: 100, type: 5 },
+        { value: "加气站5", count: 100, type: 6 },
+        { value: "加气站7", count: 100, type: 7 },
+      ],
+      deviceTypeArr: [1, 2, 3, 4, 5, 6, 7],
+      czList: [
+        {
+          deviceName: "加气站a",
+          state: 1,
+          a: 25,
+          b: 56,
+          c: 54,
+          d: 15,
+          e: 56,
+          image: "",
+          show: true,
+          type: 1,
+        },
+        {
+          deviceName: "加气站b",
+          state: 1,
+          a: 25,
+          b: 56,
+          c: 54,
+          d: 15,
+          e: 56,
+          image: "",
+          show: true,
+          type: 2,
+        },
+        {
+          deviceName: "加气站c",
+          state: 1,
+          a: 25,
+          b: 56,
+          c: 54,
+          d: 15,
+          e: 56,
+          image: "",
+          show: true,
+          type: 3,
+        },
+        {
+          deviceName: "加气站d",
+          state: 1,
+          a: 25,
+          b: 56,
+          c: 54,
+          d: 15,
+          e: 56,
+          image: "",
+          show: true,
+          type: 4,
+        },
+        {
+          deviceName: "加气站e",
+          state: 1,
+          a: 25,
+          b: 56,
+          c: 54,
+          d: 15,
+          e: 56,
+          image: "",
+          show: true,
+          type: 4,
+        },
+        {
+          deviceName: "加气站f",
+          state: 1,
+          a: 25,
+          b: 56,
+          c: 54,
+          d: 15,
+          e: 56,
+          image: "",
+          show: true,
+          type: 4,
+        },
+        {
+          deviceName: "加气站g",
+          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;
+    },
+    // 根据父子元素自动计算是否需要添加值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(() => {
+        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-26 16:38:29
+ * @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-26 17:16:36
+ * @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">
+      <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);
+      // 改变大小
+      this.$nextTick(() => {
+        this.$refs.myCollapse.getHeight();
+      });
+    },
+    // 过滤对象
+    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%;
+    .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-26 15:33:25
+ * @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">
+        <slot name="container" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { mapGetters } from "vuex";
+
+export default {
+  props:{
+    title:String,
+  },
+  data() {
+    return {
+      carHide: true,
+      transitionHeight: "60px",
+    };
+  },
+ 
+  computed: {
+    ...mapGetters(["sidebar"]),
+  },
+  watch: {
+    ["sidebar.opened"](val) {
+      setTimeout(this.getHeight, 200);
+      // this.getHeight();
+    },
+  },
+  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>
+.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-26 17:16:52
+ * @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">
+      <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);
+      // 改变大小
+      this.$nextTick(() => {
+        this.$refs.myCollapse.getHeight();
+      });
+    },
+    // 过滤对象
+    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%;
+    .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-26 17:15:43
+ * @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;
+}
+</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-25 15:27:44
+ * @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>
+    <component :is="currentTabComponent"></component>
   </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: 1,
     };
   },
-  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();
-      }
-    },
-    /** 重置按钮操作 */
-    resetQuery() {
-      this.resetForm("queryForm");
-      this.handleQuery();
+  methods: {
+    isComChange(index) {
+      this.isCom = index;
     },
-    //所属单位
-    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>>
+