diff --git a/src/assets/realtimeWarning/blue.png b/src/assets/realtimeWarning/blue.png
new file mode 100644
index 0000000..d7b0677
Binary files /dev/null and b/src/assets/realtimeWarning/blue.png differ
diff --git a/src/assets/realtimeWarning/dialogback.png b/src/assets/realtimeWarning/dialogback.png
new file mode 100644
index 0000000..18de7c9
Binary files /dev/null and b/src/assets/realtimeWarning/dialogback.png differ
diff --git a/src/assets/realtimeWarning/green.png b/src/assets/realtimeWarning/green.png
new file mode 100644
index 0000000..6f08f42
Binary files /dev/null and b/src/assets/realtimeWarning/green.png differ
diff --git a/src/assets/realtimeWarning/red.png b/src/assets/realtimeWarning/red.png
new file mode 100644
index 0000000..a69a5d6
Binary files /dev/null and b/src/assets/realtimeWarning/red.png differ
diff --git a/src/assets/realtimeWarning/warnback01.png b/src/assets/realtimeWarning/warnback01.png
new file mode 100644
index 0000000..ddd19f4
Binary files /dev/null and b/src/assets/realtimeWarning/warnback01.png differ
diff --git a/src/assets/realtimeWarning/yellow.png b/src/assets/realtimeWarning/yellow.png
new file mode 100644
index 0000000..9ea00d9
Binary files /dev/null and b/src/assets/realtimeWarning/yellow.png differ
diff --git a/src/views/realtimeWarning/components/allWarn.vue b/src/views/realtimeWarning/components/allWarn.vue
new file mode 100644
index 0000000..ae7eb7e
--- /dev/null
+++ b/src/views/realtimeWarning/components/allWarn.vue
@@ -0,0 +1,513 @@
+<!-- 全部预警 -->
+<template>
+  <div class="main_box">
+    <div class="list_body">
+      <!-- 公司列表展示 -->
+      <div
+        class="list_item"
+        v-for="item in warn_comapny_list"
+        :key="item.id"
+        :style="{ 'border-color': border_change(item.color) }"
+      >
+        <!-- 预警公司名 + 公司类型 -->
+        <div class="item_top">
+          <!-- 预警公司 -->
+          <div class="item_company">
+            <div class="item_icon">
+              <!-- 红色预警 -->
+              <div v-if="item.color == 'red'" class="icon_red"></div>
+              <!-- 黄色预警 -->
+              <div v-else-if="item.color == 'yellow'" class="icon_yellow"></div>
+              <!-- 绿色预警 -->
+              <div v-else-if="item.color == 'green'" class="icon_green"></div>
+              <!-- 蓝色预警 -->
+              <div v-else class="icon_blue"></div>
+            </div>
+            <div class="company_name">{{ item.companyName }}</div>
+          </div>
+          <!-- 公司类型 -->
+          <div class="item_types">
+            <div
+              :class="{
+                shewei: val == '剧毒' || val == '易制毒',
+                zhongdian: val == '消防重点' || val == '所管消防',
+                zhibao: val == '放射源' || val == '易制爆',
+                zhian:
+                  val == '治安重点' || val == '创安单位' || val == '外资合资',
+              }"
+              v-for="(val, index) in item.companyTypeList"
+              :key="index"
+            >
+              {{ val }}
+            </div>
+          </div>
+        </div>
+        <!-- 公司详情 -->
+        <div class="item_bottom">
+          <div class="item_bottom_one">
+            <div class="item_level">
+              <div class="item_level_text">一级指标:</div>
+              <div class="item_levle_value">{{ item.levelIndexOne }}</div>
+            </div>
+            <div class="item_warn">
+              <div class="item_warn_text">预警指标:</div>
+              <div :title="item.levelIndexThree" class="item_warn_value">
+                {{ item.levelIndexThree }}
+              </div>
+            </div>
+          </div>
+          <div class="item_bottom_two">
+            <div class="item_time">
+              <div class="item_time_text">预警时间:</div>
+              <div class="item_time_value">{{ item.alarmTime }}</div>
+            </div>
+            <div class="item_btn">
+              <el-button icon="el-icon-s-promotion" @click="change(item)">转处置</el-button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <!-- 分页 -->
+    <div class="pagination_box">
+      <el-pagination
+        :background="true"
+        @size-change="handle_size_change"
+        @current-change="handle_current_change"
+        :page-sizes="[10]"
+        :page-size="pageSize"
+        :pager-count="5"
+        :current-page="pageNum"
+        layout="total, prev, pager, next, jumper"
+        :total="total"
+      >
+      </el-pagination>
+    </div>
+    <ChangeDialog ref="changeDialog" @reset="reset"></ChangeDialog>
+  </div>
+</template>
+<script>
+import { mapList } from "@/api/realtimeWarning";
+import ChangeDialog from "./changeDialog";
+export default {
+  name: "AllWarn",
+  components:{
+    ChangeDialog
+  },
+  props: {
+    // 预警公司
+    search_company: {
+      type: String,
+      default: "",
+    },
+  },
+  created() {
+    this.search();
+  },
+  data() {
+    return {
+      warn_comapny_list: [], // 预警总数
+      pageSize: 10,
+      pageNum: 1,
+      total: 0,
+    };
+  },
+  methods: {
+    // 预警公司查询
+    search() {
+      let param = {
+        pageSize: this.pageSize,
+        pageNum: this.pageNum,
+        searchParams: this.search_company,
+      };
+      mapList(param).then((res) => {
+        this.warn_comapny_list = res.data;
+        // 预警企业合计数量
+        this.total = res.total;
+      });
+    },
+    // 转处置弹窗
+    change(val) {
+      this.$refs.changeDialog.open(val)
+    },
+    handle_size_change(val) {
+      this.pageNum = 1;
+      this.pageSize = val;
+      this.search();
+    },
+    handle_current_change(val) {
+      this.pageNum = val;
+      this.search();
+    },
+    // 刷新
+    reset() {
+      this.search()
+      // 去刷新整体查询
+      this.$emit('reset_search')
+    },
+    // 根据后端返回字段判断边框颜色
+    border_change(val) {
+      switch (val) {
+        case "red":
+          return "#e55b5b";
+        case "yellow":
+          return "#FDA722";
+        case "green":
+          return "#3eba75";
+        case "blue":
+          return "#2eb9ef";
+      }
+    },
+  },
+};
+</script>
+<style lang="less" scoped>
+.main_box {
+  .list_body {
+    width: 100%;
+    height: 57vh;
+    box-sizing: border-box;
+    overflow-y: scroll;
+    // border: 0.1px solid #54a972;
+    .list_item {
+      width: 100%;
+      height: 18vh;
+      border-radius: 6px;
+      border: 2px solid;
+      margin-bottom: 1vh;
+      background: rgba(108, 128, 151, 0.2);
+      /* 上方高度活动变化 */
+      .item_top {
+        width: 100%;
+        .item_company {
+          display: flex;
+          height: 4vh;
+          .item_icon {
+            width: 10%;
+            height: 4vh;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            .icon_red {
+              width: 30px;
+              height: 30px;
+              background: url("~@/assets/realtimeWarning/red.png") no-repeat !important;
+              background-size: 100% 100% !important;
+              animation-name: scale, high;
+              animation-duration: 3s;
+              animation-iteration-count: infinite;
+              animation-timing-function: ease-in-out;
+            }
+            .icon_yellow {
+              width: 30px;
+              height: 30px;
+              background: url("~@/assets/realtimeWarning/yellow.png") no-repeat !important;
+              background-size: 100% 100% !important;
+              animation-name: scale, high;
+              animation-duration: 3s;
+              animation-iteration-count: infinite;
+              animation-timing-function: ease-in-out;
+            }
+            .icon_green {
+              width: 30px;
+              height: 30px;
+              background: url("~@/assets/realtimeWarning/green.png") no-repeat !important;
+              background-size: 100% 100% !important;
+              animation-name: scale, high;
+              animation-duration: 3s;
+              animation-iteration-count: infinite;
+              animation-timing-function: ease-in-out;
+            }
+            .icon_blue {
+              width: 30px;
+              height: 30px;
+              background: url("~@/assets/realtimeWarning/blue.png") no-repeat !important;
+              background-size: 100% 100% !important;
+              animation-name: scale, high;
+              animation-duration: 3s;
+              animation-iteration-count: infinite;
+              animation-timing-function: ease-in-out;
+            }
+            @keyframes scale {
+              /*定义关键帧、scale是需要绑定到选择器的关键帧名称*/
+              0% {
+                transform: scale(0.8); /*开始为原始大小*/
+              }
+              25% {
+                transform: scale(1.1); /*放大1.1倍*/
+              }
+              50% {
+                transform: scale(0.8);
+              }
+              75% {
+                transform: scale(1.1);
+              }
+              100% {
+                transform: scale(0.8);
+              }
+            }
+            @keyframes high {
+              0% {
+                filter: brightness(80%);
+              }
+              25% {
+                filter: brightness(200%);
+              }
+              50% {
+                filter: brightness(80%);
+              }
+              75% {
+                filter: brightness(200%);
+              }
+              100% {
+                filter: brightness(80%);
+              }
+            }
+          }
+          .company_name {
+            width: 90%;
+            height: 4vh;
+            line-height: 4vh;
+            color: #30c4ff;
+            font-family: 黑体;
+            letter-spacing: 2px;
+            text-align: left;
+          }
+        }
+        /* 高度不确定 */
+        .item_types {
+          width: 100%;
+          display: flex;
+          flex-wrap: wrap;
+          z-index: 2;
+          margin-left: 10px;
+          .shewei {
+            height: 26px;
+            line-height: 26px;
+            width: 60px;
+            background: url("~@/assets/companyFile/编组 11991.png") no-repeat;
+            padding: 0 5px;
+            font-size: 14px;
+            color: #b5ebff;
+            letter-spacing: 0.44px;
+            font-weight: 400;
+            background-size: 100% 100%;
+            margin-right: 5px;
+            margin-bottom: 5px;
+            text-align: center;
+          }
+          .zhongdian {
+            height: 26px;
+            line-height: 26px;
+            width: 80px;
+            background: url("~@/assets/companyFile/编组 11222221.png") no-repeat;
+            padding: 0 5px;
+            font-size: 14px;
+            color: #e3deff;
+            letter-spacing: 0.44px;
+            font-weight: 400;
+            background-size: 100% 100%;
+            margin-right: 5px;
+            margin-bottom: 5px;
+            text-align: center;
+          }
+          .zhibao {
+            height: 26px;
+            line-height: 26px;
+            width: 60px;
+            background: url("~@/assets/companyFile/编组 11991备份 10.png")
+              no-repeat;
+            padding: 0 5px;
+            font-size: 14px;
+            color: #e3deff;
+            letter-spacing: 0.44px;
+            font-weight: 400;
+            background-size: 100% 100%;
+            margin-right: 5px;
+            margin-bottom: 5px;
+            text-align: center;
+          }
+          .zhian {
+            height: 26px;
+            line-height: 26px;
+            width: 80px;
+            background: url("~@/assets/companyFile/编组 11991备份 21.png")
+              no-repeat;
+            padding: 0 5px;
+            font-size: 14px;
+            color: #e3deff;
+            letter-spacing: 0.44px;
+            font-weight: 400;
+            background-size: 100% 100%;
+            margin-right: 5px;
+            margin-bottom: 5px;
+            text-align: center;
+          }
+        }
+      }
+      .item_bottom {
+        width: 100%;
+        height: 10vh;
+        .item_bottom_one {
+          width: 100%;
+          height: 5vh;
+          display: flex;
+          .item_level {
+            width: 50%;
+            height: 5vh;
+            display: flex;
+            .item_level_text {
+              width: 30%;
+              height: 5vh;
+              line-height: 5vh;
+              color: #e3deff;
+              text-align: center;
+            }
+            .item_levle_value {
+              width: 70%;
+              height: 5vh;
+              line-height: 5vh;
+              text-align: left;
+              color: #fff;
+            }
+          }
+          .item_warn {
+            width: 50%;
+            height: 5vh;
+            display: flex;
+            .item_warn_text {
+              width: 30%;
+              height: 5vh;
+              line-height: 5vh;
+              color: #e3deff;
+              text-align: center;
+            }
+            .item_warn_value {
+              width: 70%;
+              text-overflow: ellipsis;
+              white-space: nowrap;
+              overflow: hidden;
+              line-height: 5vh;
+              text-align: left;
+              color: #fff;
+            }
+          }
+        }
+        .item_bottom_two {
+          width: 100%;
+          height: 5vh;
+          display: flex;
+          .item_time {
+            width: 50%;
+            height: 5vh;
+            display: flex;
+            .item_time_text {
+              width: 30%;
+              height: 5vh;
+              line-height: 5vh;
+              color: #e3deff;
+              text-align: center;
+            }
+            .item_time_value {
+              width: 70%;
+              height: 5vh;
+              line-height: 5vh;
+              text-align: left;
+              color: #fff;
+            }
+          }
+          .item_btn {
+            width: 42%;
+            height: 5vh;
+            display: flex;
+            flex-direction: row-reverse;
+            .el-button {
+              display: flex;
+              align-items: center;
+              font-size: 13px;
+              height: 4vh;
+              color: #fff;
+              background: rgba(0, 0, 0, 0);
+              border: 0.1px solid #54a972;
+              position: relative;
+              overflow: hidden;
+              &:before {
+                content: "";
+                position: absolute;
+                top: -100%;
+                left: -50%;
+                width: 150%;
+                height: 2px;
+                background-color: #fff;
+                box-shadow: 0 0 4px 1px #fff;
+                transform: rotateZ(-45deg);
+              }
+              &:hover::before {
+                transition: 0.7s;
+                top: 200%;
+                left: 50%;
+              }
+            }
+            .el-button:hover {
+              background: #4d8f89;
+            }
+          }
+        }
+      }
+    }
+  }
+  .list_body::-webkit-scrollbar {
+    display: none;
+    width: 6px;
+    background-color: #5e666a;
+    border-radius: 4px;
+  }
+  .list_body::-webkit-scrollbar-thumb {
+    display: none;
+    width: 5px;
+    background-color: #3c4b4a;
+    border-radius: 4px;
+  }
+  .pagination_box {
+    width: 100%;
+    height: 5vh;
+    display: flex;
+    flex-direction: row-reverse;
+    margin-top: 1vh;
+    /deep/.el-pagination.is-background .btn-next,
+    /deep/.el-pagination.is-background .btn-prev,
+    /deep/.el-pagination.is-background .el-pager li {
+      margin: 0 5px;
+      background-color: rgba(255, 255, 255, 0);
+      color: #eaeff7;
+      min-width: 30px;
+      border-radius: 2px;
+      border: 1px solid rgba(40, 132, 126, 1);
+    }
+    /deep/.el-pagination__total {
+      color: #fff;
+    }
+    /deep/.el-input__inner {
+      background-color: rgba(255, 255, 255, 0);
+      border: 1px solid rgba(40, 132, 126, 1);
+      color: #eaeff7;
+    }
+    /deep/.el-pagination.is-background .el-pager li:not(.disabled).active {
+      background-color: rgba(64, 158, 255, 0);
+      color: #ccc;
+      border: 1px solid #76eae4;
+    }
+    /deep/.btn-prev {
+      margin: 0 5px;
+      background-color: rgba(255, 255, 255, 0);
+      color: #eaeff7;
+      min-width: 30px;
+      border-radius: 2px;
+      border: 1px solid rgba(40, 132, 126, 1);
+    }
+    /deep/.el-pagination__jump {
+      color: #fff;
+    }
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/views/realtimeWarning/components/blueWarn.vue b/src/views/realtimeWarning/components/blueWarn.vue
new file mode 100644
index 0000000..90d56df
--- /dev/null
+++ b/src/views/realtimeWarning/components/blueWarn.vue
@@ -0,0 +1,467 @@
+<!-- 蓝色预警 -->
+<template>
+  <div class="main_box">
+    <div class="list_body">
+      <!-- 公司列表展示 -->
+      <div
+        class="list_item"
+        v-for="item in blue_warn_comapny_list"
+        :key="item.id"
+      >
+        <!-- 预警公司名 + 公司类型 -->
+        <div class="item_top">
+          <!-- 预警公司 -->
+          <div class="item_company">
+            <div class="item_icon">
+              <!-- 蓝色预警 -->
+              <div class="icon_blue"></div>
+            </div>
+            <div class="company_name">{{ item.companyName }}</div>
+          </div>
+          <!-- 公司类型 -->
+          <div class="item_types">
+            <div
+              :class="{
+                shewei: val == '剧毒' || val == '易制毒',
+                zhongdian: val == '消防重点' || val == '所管消防',
+                zhibao: val == '放射源' || val == '易制爆',
+                zhian:
+                  val == '治安重点' || val == '创安单位' || val == '外资合资',
+              }"
+              v-for="(val, index) in item.companyTypeList"
+              :key="index"
+            >
+              {{ val }}
+            </div>
+          </div>
+        </div>
+        <!-- 公司详情 -->
+        <div class="item_bottom">
+          <div class="item_bottom_one">
+            <div class="item_level">
+              <div class="item_level_text">一级指标:</div>
+              <div class="item_levle_value">{{ item.levelIndexOne }}</div>
+            </div>
+            <div class="item_warn">
+              <div class="item_warn_text">预警指标:</div>
+              <div :title="item.levelIndexThree" class="item_warn_value">
+                {{ item.levelIndexThree }}
+              </div>
+            </div>
+          </div>
+          <div class="item_bottom_two">
+            <div class="item_time">
+              <div class="item_time_text">预警时间:</div>
+              <div class="item_time_value">{{ item.alarmTime }}</div>
+            </div>
+            <div class="item_btn">
+              <el-button icon="el-icon-s-promotion" @click="change(item)"
+                >转处置</el-button
+              >
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <!-- 分页 -->
+    <div class="pagination_box">
+      <el-pagination
+        :background="true"
+        @size-change="handle_size_change"
+        @current-change="handle_current_change"
+        :page-sizes="[10]"
+        :page-size="pageSize"
+        :pager-count="5"
+        :current-page="pageNum"
+        layout="total, prev, pager, next, jumper"
+        :total="total"
+      >
+      </el-pagination>
+    </div>
+    <ChangeDialog ref="changeDialog" @reset="reset"></ChangeDialog>
+  </div>
+</template>
+<script>
+import { mapList } from "@/api/realtimeWarning";
+import ChangeDialog from "./changeDialog";
+export default {
+  name: "BlueWarn",
+  components: {
+    ChangeDialog,
+  },
+  props: {
+    // 预警公司
+    search_company: {
+      type: String,
+      default: "",
+    },
+  },
+  created() {
+    this.search();
+  },
+  data() {
+    return {
+      blue_warn_comapny_list: [], // 预警总数
+      pageSize: 10,
+      pageNum: 1,
+      total: 0,
+    };
+  },
+  methods: {
+    // 蓝色预警公司查询
+    search() {
+      let param = {
+        pageSize: this.pageSize,
+        pageNum: this.pageNum,
+        searchParams: this.search_company,
+        color: "blue",
+      };
+      mapList(param).then((res) => {
+        console.log("22222222");
+        this.blue_warn_comapny_list = res.data;
+        // 蓝色预警企业合计数量
+        this.total = res.total;
+      });
+    },
+    // 转处置弹窗
+    change(val) {
+      this.$refs.changeDialog.open(val);
+    },
+    handle_size_change(val) {
+      this.pageNum = 1;
+      this.pageSize = val;
+      this.search();
+    },
+    handle_current_change(val) {
+      this.pageNum = val;
+      this.search();
+    },
+    // 刷新
+    reset() {
+      this.search()
+      // 去刷新整体查询
+      this.$emit('reset_search')
+    },
+  },
+};
+</script>
+<style lang="less" scoped>
+.main_box {
+  .list_body {
+    width: 100%;
+    height: 57vh;
+    box-sizing: border-box;
+    overflow-y: scroll;
+    // border: 0.1px solid #54a972;
+    .list_item {
+      width: 100%;
+      height: 18vh;
+      border-radius: 6px;
+      border: 2px solid #2eb9ef;
+      margin-bottom: 1vh;
+      background: rgba(108, 128, 151, 0.2);
+      /* 上方高度活动变化 */
+      .item_top {
+        width: 100%;
+        .item_company {
+          display: flex;
+          height: 4vh;
+          .item_icon {
+            width: 10%;
+            height: 4vh;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            .icon_blue {
+              width: 30px;
+              height: 30px;
+              background: url("~@/assets/realtimeWarning/blue.png") no-repeat !important;
+              background-size: 100% 100% !important;
+              animation-name: scale, high;
+              animation-duration: 3s;
+              animation-iteration-count: infinite;
+              animation-timing-function: ease-in-out;
+            }
+            @keyframes scale {
+              /*定义关键帧、scale是需要绑定到选择器的关键帧名称*/
+              0% {
+                transform: scale(0.8); /*开始为原始大小*/
+              }
+              25% {
+                transform: scale(1.1); /*放大1.1倍*/
+              }
+              50% {
+                transform: scale(0.8);
+              }
+              75% {
+                transform: scale(1.1);
+              }
+              100% {
+                transform: scale(0.8);
+              }
+            }
+            @keyframes high {
+              0% {
+                filter: brightness(80%);
+              }
+              25% {
+                filter: brightness(200%);
+              }
+              50% {
+                filter: brightness(80%);
+              }
+              75% {
+                filter: brightness(200%);
+              }
+              100% {
+                filter: brightness(80%);
+              }
+            }
+          }
+          .company_name {
+            width: 90%;
+            height: 4vh;
+            line-height: 4vh;
+            color: #30c4ff;
+            font-family: 黑体;
+            letter-spacing: 2px;
+            text-align: left;
+          }
+        }
+        /* 高度不确定 */
+        .item_types {
+          width: 100%;
+          display: flex;
+          flex-wrap: wrap;
+          z-index: 2;
+          margin-left: 10px;
+          .shewei {
+            height: 26px;
+            line-height: 26px;
+            width: 60px;
+            background: url("~@/assets/companyFile/编组 11991.png") no-repeat;
+            padding: 0 5px;
+            font-size: 14px;
+            color: #b5ebff;
+            letter-spacing: 0.44px;
+            font-weight: 400;
+            background-size: 100% 100%;
+            margin-right: 5px;
+            margin-bottom: 5px;
+            text-align: center;
+          }
+          .zhongdian {
+            height: 26px;
+            line-height: 26px;
+            width: 80px;
+            background: url("~@/assets/companyFile/编组 11222221.png") no-repeat;
+            padding: 0 5px;
+            font-size: 14px;
+            color: #e3deff;
+            letter-spacing: 0.44px;
+            font-weight: 400;
+            background-size: 100% 100%;
+            margin-right: 5px;
+            margin-bottom: 5px;
+            text-align: center;
+          }
+          .zhibao {
+            height: 26px;
+            line-height: 26px;
+            width: 60px;
+            background: url("~@/assets/companyFile/编组 11991备份 10.png")
+              no-repeat;
+            padding: 0 5px;
+            font-size: 14px;
+            color: #e3deff;
+            letter-spacing: 0.44px;
+            font-weight: 400;
+            background-size: 100% 100%;
+            margin-right: 5px;
+            margin-bottom: 5px;
+            text-align: center;
+          }
+          .zhian {
+            height: 26px;
+            line-height: 26px;
+            width: 80px;
+            background: url("~@/assets/companyFile/编组 11991备份 21.png")
+              no-repeat;
+            padding: 0 5px;
+            font-size: 14px;
+            color: #e3deff;
+            letter-spacing: 0.44px;
+            font-weight: 400;
+            background-size: 100% 100%;
+            margin-right: 5px;
+            margin-bottom: 5px;
+            text-align: center;
+          }
+        }
+      }
+      .item_bottom {
+        width: 100%;
+        height: 10vh;
+        .item_bottom_one {
+          width: 100%;
+          height: 5vh;
+          display: flex;
+          .item_level {
+            width: 50%;
+            height: 5vh;
+            display: flex;
+            .item_level_text {
+              width: 30%;
+              height: 5vh;
+              line-height: 5vh;
+              color: #e3deff;
+              text-align: center;
+            }
+            .item_levle_value {
+              width: 70%;
+              height: 5vh;
+              line-height: 5vh;
+              text-align: left;
+              color: #fff;
+            }
+          }
+          .item_warn {
+            width: 50%;
+            height: 5vh;
+            display: flex;
+            .item_warn_text {
+              width: 30%;
+              height: 5vh;
+              line-height: 5vh;
+              color: #e3deff;
+              text-align: center;
+            }
+            .item_warn_value {
+              width: 70%;
+              text-overflow: ellipsis;
+              white-space: nowrap;
+              overflow: hidden;
+              line-height: 5vh;
+              text-align: left;
+              color: #fff;
+            }
+          }
+        }
+        .item_bottom_two {
+          width: 100%;
+          height: 5vh;
+          display: flex;
+          .item_time {
+            width: 50%;
+            height: 5vh;
+            display: flex;
+            .item_time_text {
+              width: 30%;
+              height: 5vh;
+              line-height: 5vh;
+              color: #e3deff;
+              text-align: center;
+            }
+            .item_time_value {
+              width: 70%;
+              height: 5vh;
+              line-height: 5vh;
+              text-align: left;
+              color: #fff;
+            }
+          }
+          .item_btn {
+            width: 42%;
+            height: 5vh;
+            display: flex;
+            flex-direction: row-reverse;
+            .el-button {
+              display: flex;
+              align-items: center;
+              font-size: 13px;
+              height: 4vh;
+              color: #fff;
+              background: rgba(0, 0, 0, 0);
+              border: 0.1px solid #54a972;
+              position: relative;
+              overflow: hidden;
+              &:before {
+                content: "";
+                position: absolute;
+                top: -100%;
+                left: -50%;
+                width: 150%;
+                height: 2px;
+                background-color: #fff;
+                box-shadow: 0 0 4px 1px #fff;
+                transform: rotateZ(-45deg);
+              }
+              &:hover::before {
+                transition: 0.7s;
+                top: 200%;
+                left: 50%;
+              }
+            }
+            .el-button:hover {
+              background: #4d8f89;
+            }
+          }
+        }
+      }
+    }
+  }
+  .list_body::-webkit-scrollbar {
+    display: none;
+    width: 6px;
+    background-color: #5e666a;
+    border-radius: 4px;
+  }
+  .list_body::-webkit-scrollbar-thumb {
+    display: none;
+    width: 5px;
+    background-color: #3c4b4a;
+    border-radius: 4px;
+  }
+  .pagination_box {
+    width: 100%;
+    height: 5vh;
+    display: flex;
+    flex-direction: row-reverse;
+    margin-top: 1vh;
+    /deep/.el-pagination.is-background .btn-next,
+    /deep/.el-pagination.is-background .btn-prev,
+    /deep/.el-pagination.is-background .el-pager li {
+      margin: 0 5px;
+      background-color: rgba(255, 255, 255, 0);
+      color: #eaeff7;
+      min-width: 30px;
+      border-radius: 2px;
+      border: 1px solid rgba(40, 132, 126, 1);
+    }
+    /deep/.el-pagination__total {
+      color: #fff;
+    }
+    /deep/.el-input__inner {
+      background-color: rgba(255, 255, 255, 0);
+      border: 1px solid rgba(40, 132, 126, 1);
+      color: #eaeff7;
+    }
+    /deep/.el-pagination.is-background .el-pager li:not(.disabled).active {
+      background-color: rgba(64, 158, 255, 0);
+      color: #ccc;
+      border: 1px solid #76eae4;
+    }
+    /deep/.btn-prev {
+      margin: 0 5px;
+      background-color: rgba(255, 255, 255, 0);
+      color: #eaeff7;
+      min-width: 30px;
+      border-radius: 2px;
+      border: 1px solid rgba(40, 132, 126, 1);
+    }
+    /deep/.el-pagination__jump {
+      color: #fff;
+    }
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/views/realtimeWarning/components/changeDialog.vue b/src/views/realtimeWarning/components/changeDialog.vue
new file mode 100644
index 0000000..03f2ca3
--- /dev/null
+++ b/src/views/realtimeWarning/components/changeDialog.vue
@@ -0,0 +1,204 @@
+<!-- 转处置弹窗 -->
+<template>
+  <el-dialog
+    title="选择处置部门"
+    :visible.sync="visible"
+    class="picForm"
+    @closed="close()"
+  >
+    <div class="czTitle">可选择多个部门联合处置：</div>
+    <div class="czBody" v-if="deptList && deptList.length">
+      <el-checkbox-group v-model="checkedDepts">
+        <el-checkbox
+          v-for="city in deptList"
+          :label="city.deptId"
+          :key="city.deptId"
+          >{{ city.deptName }}</el-checkbox
+        >
+      </el-checkbox-group>
+    </div>
+    <div slot="footer" class="dialog-footer">
+      <el-button @click="visible = false">取 消 </el-button>
+      <el-button type="primary" @click="add_form()">确 定</el-button>
+    </div>
+  </el-dialog>
+</template>
+<script>
+import { deptList, addCommonApprovalProcess } from "@/api/realtimeWarning";
+export default {
+  name: "ChangeDialog",
+  data() {
+    return {
+      visible: false,
+      change_data: [], // 预警单条数据
+      deptList: [],
+      checkedDepts: [],
+    };
+  },
+  methods: {
+    open(val) {
+      this.visible = true;
+      this.change_data = val;
+      deptList().then((res) => {
+        console.log(res, "res222222");
+        this.deptList = res.data;
+      });
+    },
+    close() {
+      this.checkedDepts = [];
+    },
+    add_form() {
+      addCommonApprovalProcess({
+        approveDeptCodes: this.checkedDepts,
+        safeCompanyAlarm: { id: this.change_data.id },
+      }).then((res)=> {
+         if (res.code == 200) {
+          this.$message.success(res.msg);
+          this.visible = false; // 关闭弹窗
+          this.$emit('reset')
+        } else {
+          this.$message.error(res.msg);
+        }
+      });
+    },
+  },
+};
+</script>
+<style lang="less" scoped>
+/deep/ .el-dialog {
+  background-color: rgba(0, 0, 0, 0);
+  background: url("~@/assets/realtimeWarning/dialogback.png") no-repeat;
+  background-size: 100% 100%;
+  width: 461px;
+  height: 412px;
+  position: relative;
+  margin-top: 30vh !important;
+
+  .el-dialog__title {
+    font-size: 16px;
+    color: #ebfff4;
+    letter-spacing: 2px;
+
+    text-shadow: 0 0 9px rgba(21, 255, 195, 0.77);
+    font-weight: 400;
+  }
+
+  .el-dialog__body {
+    box-sizing: border-box;
+    padding: 14px 10px;
+    height: 300px;
+    box-sizing: border-box;
+
+    .czTitle {
+      opacity: 0.7;
+      font-family: PingFangSC-Regular;
+      font-size: 14px;
+      color: #eaf6ff;
+      letter-spacing: 1px;
+      font-weight: 400;
+      margin-bottom: 12px;
+    }
+
+    .czBody {
+      width: 440px;
+      height: 232px;
+      background: rgba(108, 128, 151, 0.2);
+      border: 1px solid #495461;
+      overflow: auto;
+
+      &::-webkit-scrollbar {
+        width: 6px;
+      }
+
+      // 滚动条里面默认的小方块,自定义样式
+      &::-webkit-scrollbar-thumb {
+        background: rgba(255, 255, 255, 0.44);
+        border-radius: 5px;
+      }
+
+      // 滚动条里面的轨道
+      &::-webkit-scrollbar-track {
+        background: transparent;
+      }
+    }
+
+    .el-checkbox {
+      width: 80%;
+      height: 34px;
+      opacity: 0.7;
+      background-image: linear-gradient(
+        180deg,
+        rgba(234, 241, 248, 0.1) 0%,
+        rgba(208, 222, 238, 0.1) 100%
+      );
+      border: 1px solid #5b748c;
+
+      margin: 16px 15px 0;
+      font-size: 14px;
+      color: #eaf6ff;
+      letter-spacing: 1px;
+      padding: 7px;
+    }
+
+    .is-checked {
+      color: #37fdc7;
+      background: rgba(13, 251, 246, 0.1);
+      border: 1px solid #37fdc7;
+      box-sizing: border-box;
+    }
+
+    .el-checkbox__input.is-checked + .el-checkbox__label {
+      color: #37fdc7;
+    }
+
+    .el-checkbox__input.is-checked .el-checkbox__inner,
+    .el-checkbox__input.is-indeterminate .el-checkbox__inner {
+      background-color: rgba(13, 251, 246, 0.1);
+      border-color: rgba(255, 251, 246, 0.6);
+    }
+  }
+
+  .el-dialog__footer {
+    padding: 0px 30px 20px;
+
+    .el-button--default {
+      width: 96px;
+      opacity: 0.8;
+      background: rgba(0, 0, 0, 0);
+      background-image: linear-gradient(
+        180deg,
+        rgba(234, 241, 248, 0.1) 0%,
+        rgba(208, 222, 238, 0.1) 100%
+      );
+      border: 1px solid #54a972;
+      border-radius: 4px;
+      color: #fff;
+    }
+    .el-button--primary {
+      width: 96px;
+      color: #fff;
+      background: #54a972;
+      background-size: 100% 100%;
+      border: 1px solid #54a972;
+      position: relative;
+      overflow: hidden;
+      &:before {
+        content: "";
+        position: absolute;
+        top: -100%;
+        left: -50%;
+        width: 150%;
+        height: 2px;
+        background-color: #fff;
+        box-shadow: 0 0 4px 1px #fff;
+        transform: rotateZ(-45deg);
+      }
+      &:hover::before {
+        transition: 0.7s;
+        top: 200%;
+        left: 50%;
+      }
+    }
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/views/realtimeWarning/components/greenWarn.vue b/src/views/realtimeWarning/components/greenWarn.vue
new file mode 100644
index 0000000..1a40ee4
--- /dev/null
+++ b/src/views/realtimeWarning/components/greenWarn.vue
@@ -0,0 +1,464 @@
+<!-- 绿色预警 -->
+<template>
+  <div class="main_box">
+    <div class="list_body">
+      <!-- 公司列表展示 -->
+      <div
+        class="list_item"
+        v-for="item in green_warn_comapny_list"
+        :key="item.id"
+      >
+        <!-- 预警公司名 + 公司类型 -->
+        <div class="item_top">
+          <!-- 预警公司 -->
+          <div class="item_company">
+            <div class="item_icon">
+              <!-- 红色预警 -->
+              <div class="icon_green"></div>
+            </div>
+            <div class="company_name">{{ item.companyName }}</div>
+          </div>
+          <!-- 公司类型 -->
+          <div class="item_types">
+            <div
+              :class="{
+                shewei: val == '剧毒' || val == '易制毒',
+                zhongdian: val == '消防重点' || val == '所管消防',
+                zhibao: val == '放射源' || val == '易制爆',
+                zhian:
+                  val == '治安重点' || val == '创安单位' || val == '外资合资',
+              }"
+              v-for="(val, index) in item.companyTypeList"
+              :key="index"
+            >
+              {{ val }}
+            </div>
+          </div>
+        </div>
+        <!-- 公司详情 -->
+        <div class="item_bottom">
+          <div class="item_bottom_one">
+            <div class="item_level">
+              <div class="item_level_text">一级指标:</div>
+              <div class="item_levle_value">{{ item.levelIndexOne }}</div>
+            </div>
+            <div class="item_warn">
+              <div class="item_warn_text">预警指标:</div>
+              <div :title="item.levelIndexThree" class="item_warn_value">
+                {{ item.levelIndexThree }}
+              </div>
+            </div>
+          </div>
+          <div class="item_bottom_two">
+            <div class="item_time">
+              <div class="item_time_text">预警时间:</div>
+              <div class="item_time_value">{{ item.alarmTime }}</div>
+            </div>
+            <div class="item_btn">
+              <el-button icon="el-icon-s-promotion" @click="change(item)">转处置</el-button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <!-- 分页 -->
+    <div class="pagination_box">
+      <el-pagination
+        :background="true"
+        @size-change="handle_size_change"
+        @current-change="handle_current_change"
+        :page-sizes="[10]"
+        :page-size="pageSize"
+        :pager-count="5"
+        :current-page="pageNum"
+        layout="total, prev, pager, next, jumper"
+        :total="total"
+      >
+      </el-pagination>
+    </div>
+    <ChangeDialog ref="changeDialog" @reset="reset"></ChangeDialog>
+  </div>
+</template>
+<script>
+import { mapList } from "@/api/realtimeWarning";
+import ChangeDialog from "./changeDialog";
+export default {
+  name: "GreenWarn",
+  components:{
+    ChangeDialog
+  },
+  props: {
+    // 预警公司
+    search_company: {
+      type: String,
+      default: "",
+    },
+  },
+  created() {
+    this.search();
+  },
+  data() {
+    return {
+      green_warn_comapny_list: [], // 预警总数
+      pageSize: 10,
+      pageNum: 1,
+      total: 0,
+    };
+  },
+  methods: {
+    // 绿色预警公司查询
+    search() {
+      let param = {
+        pageSize: this.pageSize,
+        pageNum: this.pageNum,
+        searchParams: this.search_company,
+        color:"green"
+      };
+      mapList(param).then((res) => {
+        this.green_warn_comapny_list = res.data;
+        // 绿色预警企业合计数量
+        this.total = res.total;
+      });
+    },
+    // 转处置弹窗
+    change(val) {
+      this.$refs.changeDialog.open(val)
+    },
+    handle_size_change(val) {
+      this.pageNum = 1;
+      this.pageSize = val;
+      this.search();
+    },
+    handle_current_change(val) {
+      this.pageNum = val;
+      this.search();
+    },
+    // 刷新
+    reset() {
+      this.search()
+      // 去刷新整体查询
+      this.$emit('reset_search')
+    },
+  },
+};
+</script>
+<style lang="less" scoped>
+.main_box {
+  .list_body {
+    width: 100%;
+    height: 57vh;
+    box-sizing: border-box;
+    overflow-y: scroll;
+    // border: 0.1px solid #54a972;
+    .list_item {
+      width: 100%;
+      height: 18vh;
+      border-radius: 6px;
+      border: 2px solid #3eba75;
+      margin-bottom: 1vh;
+      background: rgba(108, 128, 151, 0.2);
+      /* 上方高度活动变化 */
+      .item_top {
+        width: 100%;
+        .item_company {
+          display: flex;
+          height: 4vh;
+          .item_icon {
+            width: 10%;
+            height: 4vh;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            .icon_green {
+              width: 30px;
+              height: 30px;
+              background: url("~@/assets/realtimeWarning/green.png") no-repeat !important;
+              background-size: 100% 100% !important;
+              animation-name: scale, high;
+              animation-duration: 3s;
+              animation-iteration-count: infinite;
+              animation-timing-function: ease-in-out;
+            }
+            @keyframes scale {
+              /*定义关键帧、scale是需要绑定到选择器的关键帧名称*/
+              0% {
+                transform: scale(0.8); /*开始为原始大小*/
+              }
+              25% {
+                transform: scale(1.1); /*放大1.1倍*/
+              }
+              50% {
+                transform: scale(0.8);
+              }
+              75% {
+                transform: scale(1.1);
+              }
+              100% {
+                transform: scale(0.8);
+              }
+            }
+            @keyframes high {
+              0% {
+                filter: brightness(80%);
+              }
+              25% {
+                filter: brightness(200%);
+              }
+              50% {
+                filter: brightness(80%);
+              }
+              75% {
+                filter: brightness(200%);
+              }
+              100% {
+                filter: brightness(80%);
+              }
+            }
+          }
+          .company_name {
+            width: 90%;
+            height: 4vh;
+            line-height: 4vh;
+            color: #30c4ff;
+            font-family: 黑体;
+            letter-spacing: 2px;
+            text-align: left;
+          }
+        }
+        /* 高度不确定 */
+        .item_types {
+          width: 100%;
+          display: flex;
+          flex-wrap: wrap;
+          z-index: 2;
+          margin-left: 10px;
+          .shewei {
+            height: 26px;
+            line-height: 26px;
+            width: 60px;
+            background: url("~@/assets/companyFile/编组 11991.png") no-repeat;
+            padding: 0 5px;
+            font-size: 14px;
+            color: #b5ebff;
+            letter-spacing: 0.44px;
+            font-weight: 400;
+            background-size: 100% 100%;
+            margin-right: 5px;
+            margin-bottom: 5px;
+            text-align: center;
+          }
+          .zhongdian {
+            height: 26px;
+            line-height: 26px;
+            width: 80px;
+            background: url("~@/assets/companyFile/编组 11222221.png") no-repeat;
+            padding: 0 5px;
+            font-size: 14px;
+            color: #e3deff;
+            letter-spacing: 0.44px;
+            font-weight: 400;
+            background-size: 100% 100%;
+            margin-right: 5px;
+            margin-bottom: 5px;
+            text-align: center;
+          }
+          .zhibao {
+            height: 26px;
+            line-height: 26px;
+            width: 60px;
+            background: url("~@/assets/companyFile/编组 11991备份 10.png")
+              no-repeat;
+            padding: 0 5px;
+            font-size: 14px;
+            color: #e3deff;
+            letter-spacing: 0.44px;
+            font-weight: 400;
+            background-size: 100% 100%;
+            margin-right: 5px;
+            margin-bottom: 5px;
+            text-align: center;
+          }
+          .zhian {
+            height: 26px;
+            line-height: 26px;
+            width: 80px;
+            background: url("~@/assets/companyFile/编组 11991备份 21.png")
+              no-repeat;
+            padding: 0 5px;
+            font-size: 14px;
+            color: #e3deff;
+            letter-spacing: 0.44px;
+            font-weight: 400;
+            background-size: 100% 100%;
+            margin-right: 5px;
+            margin-bottom: 5px;
+            text-align: center;
+          }
+        }
+      }
+      .item_bottom {
+        width: 100%;
+        height: 10vh;
+        .item_bottom_one {
+          width: 100%;
+          height: 5vh;
+          display: flex;
+          .item_level {
+            width: 50%;
+            height: 5vh;
+            display: flex;
+            .item_level_text {
+              width: 30%;
+              height: 5vh;
+              line-height: 5vh;
+              color: #e3deff;
+              text-align: center;
+            }
+            .item_levle_value {
+              width: 70%;
+              height: 5vh;
+              line-height: 5vh;
+              text-align: left;
+              color: #fff;
+            }
+          }
+          .item_warn {
+            width: 50%;
+            height: 5vh;
+            display: flex;
+            .item_warn_text {
+              width: 30%;
+              height: 5vh;
+              line-height: 5vh;
+              color: #e3deff;
+              text-align: center;
+            }
+            .item_warn_value {
+              width: 70%;
+              text-overflow: ellipsis;
+              white-space: nowrap;
+              overflow: hidden;
+              line-height: 5vh;
+              text-align: left;
+              color: #fff;
+            }
+          }
+        }
+        .item_bottom_two {
+          width: 100%;
+          height: 5vh;
+          display: flex;
+          .item_time {
+            width: 50%;
+            height: 5vh;
+            display: flex;
+            .item_time_text {
+              width: 30%;
+              height: 5vh;
+              line-height: 5vh;
+              color: #e3deff;
+              text-align: center;
+            }
+            .item_time_value {
+              width: 70%;
+              height: 5vh;
+              line-height: 5vh;
+              text-align: left;
+              color: #fff;
+            }
+          }
+          .item_btn {
+            width: 42%;
+            height: 5vh;
+            display: flex;
+            flex-direction: row-reverse;
+            .el-button {
+              display: flex;
+              align-items: center;
+              font-size: 13px;
+              height: 4vh;
+              color: #fff;
+              background: rgba(0, 0, 0, 0);
+              border: 0.1px solid #54a972;
+              position: relative;
+              overflow: hidden;
+              &:before {
+                content: "";
+                position: absolute;
+                top: -100%;
+                left: -50%;
+                width: 150%;
+                height: 2px;
+                background-color: #fff;
+                box-shadow: 0 0 4px 1px #fff;
+                transform: rotateZ(-45deg);
+              }
+              &:hover::before {
+                transition: 0.7s;
+                top: 200%;
+                left: 50%;
+              }
+            }
+            .el-button:hover {
+              background: #4d8f89;
+            }
+          }
+        }
+      }
+    }
+  }
+  .list_body::-webkit-scrollbar {
+    display: none;
+    width: 6px;
+    background-color: #5e666a;
+    border-radius: 4px;
+  }
+  .list_body::-webkit-scrollbar-thumb {
+    display: none;
+    width: 5px;
+    background-color: #3c4b4a;
+    border-radius: 4px;
+  }
+  .pagination_box {
+    width: 100%;
+    height: 5vh;
+    display: flex;
+    flex-direction: row-reverse;
+    margin-top: 1vh;
+    /deep/.el-pagination.is-background .btn-next,
+    /deep/.el-pagination.is-background .btn-prev,
+    /deep/.el-pagination.is-background .el-pager li {
+      margin: 0 5px;
+      background-color: rgba(255, 255, 255, 0);
+      color: #eaeff7;
+      min-width: 30px;
+      border-radius: 2px;
+      border: 1px solid rgba(40, 132, 126, 1);
+    }
+    /deep/.el-pagination__total {
+      color: #fff;
+    }
+    /deep/.el-input__inner {
+      background-color: rgba(255, 255, 255, 0);
+      border: 1px solid rgba(40, 132, 126, 1);
+      color: #eaeff7;
+    }
+    /deep/.el-pagination.is-background .el-pager li:not(.disabled).active {
+      background-color: rgba(64, 158, 255, 0);
+      color: #ccc;
+      border: 1px solid #76eae4;
+    }
+    /deep/.btn-prev {
+      margin: 0 5px;
+      background-color: rgba(255, 255, 255, 0);
+      color: #eaeff7;
+      min-width: 30px;
+      border-radius: 2px;
+      border: 1px solid rgba(40, 132, 126, 1);
+    }
+    /deep/.el-pagination__jump {
+      color: #fff;
+    }
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/views/realtimeWarning/components/redWarn.vue b/src/views/realtimeWarning/components/redWarn.vue
new file mode 100644
index 0000000..ad7de4b
--- /dev/null
+++ b/src/views/realtimeWarning/components/redWarn.vue
@@ -0,0 +1,466 @@
+<!-- 红色预警 -->
+<template>
+  <div class="main_box">
+    <div class="list_body">
+      <!-- 公司列表展示 -->
+      <div
+        class="list_item"
+        v-for="item in red_warn_comapny_list"
+        :key="item.id"
+      >
+        <!-- 预警公司名 + 公司类型 -->
+        <div class="item_top">
+          <!-- 预警公司 -->
+          <div class="item_company">
+            <div class="item_icon">
+              <!-- 红色预警 -->
+              <div class="icon_red"></div>
+            </div>
+            <div class="company_name">{{ item.companyName }}</div>
+          </div>
+          <!-- 公司类型 -->
+          <div class="item_types">
+            <div
+              :class="{
+                shewei: val == '剧毒' || val == '易制毒',
+                zhongdian: val == '消防重点' || val == '所管消防',
+                zhibao: val == '放射源' || val == '易制爆',
+                zhian:
+                  val == '治安重点' || val == '创安单位' || val == '外资合资',
+              }"
+              v-for="(val, index) in item.companyTypeList"
+              :key="index"
+            >
+              {{ val }}
+            </div>
+          </div>
+        </div>
+        <!-- 公司详情 -->
+        <div class="item_bottom">
+          <div class="item_bottom_one">
+            <div class="item_level">
+              <div class="item_level_text">一级指标:</div>
+              <div class="item_levle_value">{{ item.levelIndexOne }}</div>
+            </div>
+            <div class="item_warn">
+              <div class="item_warn_text">预警指标:</div>
+              <div :title="item.levelIndexThree" class="item_warn_value">
+                {{ item.levelIndexThree }}
+              </div>
+            </div>
+          </div>
+          <div class="item_bottom_two">
+            <div class="item_time">
+              <div class="item_time_text">预警时间:</div>
+              <div class="item_time_value">{{ item.alarmTime }}</div>
+            </div>
+            <div class="item_btn">
+              <el-button icon="el-icon-s-promotion" @click="change(item)"
+                >转处置</el-button
+              >
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <!-- 分页 -->
+    <div class="pagination_box">
+      <el-pagination
+        :background="true"
+        @size-change="handle_size_change"
+        @current-change="handle_current_change"
+        :page-sizes="[10]"
+        :page-size="pageSize"
+        :pager-count="5"
+        :current-page="pageNum"
+        layout="total, prev, pager, next, jumper"
+        :total="total"
+      >
+      </el-pagination>
+    </div>
+    <ChangeDialog ref="changeDialog" @reset="reset"></ChangeDialog>
+  </div>
+</template>
+<script>
+import { mapList } from "@/api/realtimeWarning";
+import ChangeDialog from "./changeDialog";
+export default {
+  name: "redWarn",
+  components:{
+    ChangeDialog
+  },
+  props: {
+    // 预警公司
+    search_company: {
+      type: String,
+      default: "",
+    },
+  },
+  created() {
+    this.search();
+  },
+  data() {
+    return {
+      red_warn_comapny_list: [], // 预警总数
+      pageSize: 10,
+      pageNum: 1,
+      total: 0,
+    };
+  },
+  methods: {
+    // 红色预警公司查询
+    search() {
+      let param = {
+        pageSize: this.pageSize,
+        pageNum: this.pageNum,
+        searchParams: this.search_company,
+        color: "red",
+      };
+      mapList(param).then((res) => {
+        this.red_warn_comapny_list = res.data;
+        // 红色预警企业合计数量
+        this.total = res.total;
+      });
+    },
+    // 转处置弹窗
+    change(val) {
+      this.$refs.changeDialog.open(val)
+    },
+    handle_size_change(val) {
+      this.pageNum = 1;
+      this.pageSize = val;
+      this.search();
+    },
+    handle_current_change(val) {
+      this.pageNum = val;
+      this.search();
+    },
+    // 刷新
+    reset() {
+      this.search()
+      // 去刷新整体查询
+      this.$emit('reset_search')
+    },
+  },
+};
+</script>
+<style lang="less" scoped>
+.main_box {
+  .list_body {
+    width: 100%;
+    height: 57vh;
+    box-sizing: border-box;
+    overflow-y: scroll;
+    // border: 0.1px solid #54a972;
+    .list_item {
+      width: 100%;
+      height: 18vh;
+      border-radius: 6px;
+      border: 2px solid #e55b5b;
+      margin-bottom: 1vh;
+      background: rgba(108, 128, 151, 0.2);
+      /* 上方高度活动变化 */
+      .item_top {
+        width: 100%;
+        .item_company {
+          display: flex;
+          height: 4vh;
+          .item_icon {
+            width: 10%;
+            height: 4vh;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            .icon_red {
+              width: 30px;
+              height: 30px;
+              background: url("~@/assets/realtimeWarning/red.png") no-repeat !important;
+              background-size: 100% 100% !important;
+              animation-name: scale, high;
+              animation-duration: 3s;
+              animation-iteration-count: infinite;
+              animation-timing-function: ease-in-out;
+            }
+            @keyframes scale {
+              /*定义关键帧、scale是需要绑定到选择器的关键帧名称*/
+              0% {
+                transform: scale(0.8); /*开始为原始大小*/
+              }
+              25% {
+                transform: scale(1.1); /*放大1.1倍*/
+              }
+              50% {
+                transform: scale(0.8);
+              }
+              75% {
+                transform: scale(1.1);
+              }
+              100% {
+                transform: scale(0.8);
+              }
+            }
+            @keyframes high {
+              0% {
+                filter: brightness(80%);
+              }
+              25% {
+                filter: brightness(200%);
+              }
+              50% {
+                filter: brightness(80%);
+              }
+              75% {
+                filter: brightness(200%);
+              }
+              100% {
+                filter: brightness(80%);
+              }
+            }
+          }
+          .company_name {
+            width: 90%;
+            height: 4vh;
+            line-height: 4vh;
+            color: #30c4ff;
+            font-family: 黑体;
+            letter-spacing: 2px;
+            text-align: left;
+          }
+        }
+        /* 高度不确定 */
+        .item_types {
+          width: 100%;
+          display: flex;
+          flex-wrap: wrap;
+          z-index: 2;
+          margin-left: 10px;
+          .shewei {
+            height: 26px;
+            line-height: 26px;
+            width: 60px;
+            background: url("~@/assets/companyFile/编组 11991.png") no-repeat;
+            padding: 0 5px;
+            font-size: 14px;
+            color: #b5ebff;
+            letter-spacing: 0.44px;
+            font-weight: 400;
+            background-size: 100% 100%;
+            margin-right: 5px;
+            margin-bottom: 5px;
+            text-align: center;
+          }
+          .zhongdian {
+            height: 26px;
+            line-height: 26px;
+            width: 80px;
+            background: url("~@/assets/companyFile/编组 11222221.png") no-repeat;
+            padding: 0 5px;
+            font-size: 14px;
+            color: #e3deff;
+            letter-spacing: 0.44px;
+            font-weight: 400;
+            background-size: 100% 100%;
+            margin-right: 5px;
+            margin-bottom: 5px;
+            text-align: center;
+          }
+          .zhibao {
+            height: 26px;
+            line-height: 26px;
+            width: 60px;
+            background: url("~@/assets/companyFile/编组 11991备份 10.png")
+              no-repeat;
+            padding: 0 5px;
+            font-size: 14px;
+            color: #e3deff;
+            letter-spacing: 0.44px;
+            font-weight: 400;
+            background-size: 100% 100%;
+            margin-right: 5px;
+            margin-bottom: 5px;
+            text-align: center;
+          }
+          .zhian {
+            height: 26px;
+            line-height: 26px;
+            width: 80px;
+            background: url("~@/assets/companyFile/编组 11991备份 21.png")
+              no-repeat;
+            padding: 0 5px;
+            font-size: 14px;
+            color: #e3deff;
+            letter-spacing: 0.44px;
+            font-weight: 400;
+            background-size: 100% 100%;
+            margin-right: 5px;
+            margin-bottom: 5px;
+            text-align: center;
+          }
+        }
+      }
+      .item_bottom {
+        width: 100%;
+        height: 10vh;
+        .item_bottom_one {
+          width: 100%;
+          height: 5vh;
+          display: flex;
+          .item_level {
+            width: 50%;
+            height: 5vh;
+            display: flex;
+            .item_level_text {
+              width: 30%;
+              height: 5vh;
+              line-height: 5vh;
+              color: #e3deff;
+              text-align: center;
+            }
+            .item_levle_value {
+              width: 70%;
+              height: 5vh;
+              line-height: 5vh;
+              text-align: left;
+              color: #fff;
+            }
+          }
+          .item_warn {
+            width: 50%;
+            height: 5vh;
+            display: flex;
+            .item_warn_text {
+              width: 30%;
+              height: 5vh;
+              line-height: 5vh;
+              color: #e3deff;
+              text-align: center;
+            }
+            .item_warn_value {
+              width: 70%;
+              text-overflow: ellipsis;
+              white-space: nowrap;
+              overflow: hidden;
+              line-height: 5vh;
+              text-align: left;
+              color: #fff;
+            }
+          }
+        }
+        .item_bottom_two {
+          width: 100%;
+          height: 5vh;
+          display: flex;
+          .item_time {
+            width: 50%;
+            height: 5vh;
+            display: flex;
+            .item_time_text {
+              width: 30%;
+              height: 5vh;
+              line-height: 5vh;
+              color: #e3deff;
+              text-align: center;
+            }
+            .item_time_value {
+              width: 70%;
+              height: 5vh;
+              line-height: 5vh;
+              text-align: left;
+              color: #fff;
+            }
+          }
+          .item_btn {
+            width: 42%;
+            height: 5vh;
+            display: flex;
+            flex-direction: row-reverse;
+            .el-button {
+              display: flex;
+              align-items: center;
+              font-size: 13px;
+              height: 4vh;
+              color: #fff;
+              background: rgba(0, 0, 0, 0);
+              border: 0.1px solid #54a972;
+              position: relative;
+              overflow: hidden;
+              &:before {
+                content: "";
+                position: absolute;
+                top: -100%;
+                left: -50%;
+                width: 150%;
+                height: 2px;
+                background-color: #fff;
+                box-shadow: 0 0 4px 1px #fff;
+                transform: rotateZ(-45deg);
+              }
+              &:hover::before {
+                transition: 0.7s;
+                top: 200%;
+                left: 50%;
+              }
+            }
+            .el-button:hover {
+              background: #4d8f89;
+            }
+          }
+        }
+      }
+    }
+  }
+  .list_body::-webkit-scrollbar {
+    display: none;
+    width: 6px;
+    background-color: #5e666a;
+    border-radius: 4px;
+  }
+  .list_body::-webkit-scrollbar-thumb {
+    display: none;
+    width: 5px;
+    background-color: #3c4b4a;
+    border-radius: 4px;
+  }
+  .pagination_box {
+    width: 100%;
+    height: 5vh;
+    display: flex;
+    flex-direction: row-reverse;
+    margin-top: 1vh;
+    /deep/.el-pagination.is-background .btn-next,
+    /deep/.el-pagination.is-background .btn-prev,
+    /deep/.el-pagination.is-background .el-pager li {
+      margin: 0 5px;
+      background-color: rgba(255, 255, 255, 0);
+      color: #eaeff7;
+      min-width: 30px;
+      border-radius: 2px;
+      border: 1px solid rgba(40, 132, 126, 1);
+    }
+    /deep/.el-pagination__total {
+      color: #fff;
+    }
+    /deep/.el-input__inner {
+      background-color: rgba(255, 255, 255, 0);
+      border: 1px solid rgba(40, 132, 126, 1);
+      color: #eaeff7;
+    }
+    /deep/.el-pagination.is-background .el-pager li:not(.disabled).active {
+      background-color: rgba(64, 158, 255, 0);
+      color: #ccc;
+      border: 1px solid #76eae4;
+    }
+    /deep/.btn-prev {
+      margin: 0 5px;
+      background-color: rgba(255, 255, 255, 0);
+      color: #eaeff7;
+      min-width: 30px;
+      border-radius: 2px;
+      border: 1px solid rgba(40, 132, 126, 1);
+    }
+    /deep/.el-pagination__jump {
+      color: #fff;
+    }
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/views/realtimeWarning/components/warnCompany.vue b/src/views/realtimeWarning/components/warnCompany.vue
new file mode 100644
index 0000000..a1a80a6
--- /dev/null
+++ b/src/views/realtimeWarning/components/warnCompany.vue
@@ -0,0 +1,377 @@
+<!-- 实时预警 -->
+<template>
+  <div class="warn_company">
+    <!-- 预警标题 搜索框 -->
+    <div class="warn_search">
+      <div class="title_box">
+        <div class="warn_title">预警列表</div>
+        <div class="icon_left">{{ icon_left }}</div>
+        <!-- 预警数量 -->
+        <div class="warn_num">{{ warn_num }}</div>
+        <div class="icon_right">{{ icon_right }}</div>
+      </div>
+      <!-- 搜索框 -->
+      <div class="search_box">
+        <div class="input_btn">
+          <el-input
+            class="search_right_input"
+            placeholder="输入企业名称/预警指标"
+            v-model="search_company"
+            clearable
+          ></el-input>
+          <el-button
+            @click="
+              search();
+              search_num();
+              all_warn_search();
+              red_warn_search();
+              yellow_warn_search();
+              green_warn_search();
+              blue_warn_search();
+            "
+            icon="el-icon-search"
+          ></el-button>
+        </div>
+      </div>
+    </div>
+    <!-- 预警分类tab页 -->
+    <div class="warn_company_list">
+      <div class="warn_company_list_item">
+        <el-tabs v-model="active">
+          <el-tab-pane :label="label" name="first">
+            <AllWarn
+              ref="allWarn"
+              :search_company="search_company"
+              @reset_search="reset_search"
+            ></AllWarn>
+          </el-tab-pane>
+          <el-tab-pane :label="label_red" name="second">
+            <RedWarn
+              ref="redWarn"
+              :search_company="search_company"
+              @reset_search="reset_search"
+            ></RedWarn>
+          </el-tab-pane>
+          <el-tab-pane :label="label_yellow" name="third">
+            <YellowWarn
+              ref="yellowWarn"
+              :search_company="search_company"
+              @reset_search="reset_search"
+            ></YellowWarn>
+          </el-tab-pane>
+          <el-tab-pane :label="label_green" name="fourth">
+            <GreenWarn
+              ref="greenWarn"
+              :search_company="search_company"
+              @reset_search="reset_search"
+            ></GreenWarn>
+          </el-tab-pane>
+          <el-tab-pane :label="label_blue" name="fifth">
+            <BlueWarn
+              ref="blueWarn"
+              :search_company="search_company"
+              @reset_search="reset_search"
+            ></BlueWarn>
+          </el-tab-pane>
+        </el-tabs>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import { mapList } from "@/api/realtimeWarning";
+import AllWarn from "./allWarn";
+import RedWarn from "./redWarn";
+import YellowWarn from "./yellowWarn";
+import GreenWarn from "./greenWarn";
+import BlueWarn from "./blueWarn";
+export default {
+  name: "WarnCompany",
+  data() {
+    return {
+      icon_left: "(",
+      icon_right: ")",
+      warn_num: 0, // 预警企业合计数量
+      search_company: "", // 预警企业查询
+      active: "first", // tabs页默认选中
+      label: "", // 全部tab
+      label_red: "", // 红色tab
+      label_yellow: "", // 黄色tab
+      label_green: "", // 绿色tab
+      label_blue: "", // 蓝色tab
+      pageSize: 10,
+      pageNum: 1,
+      warn_comapny_list: [],
+    };
+  },
+  components: {
+    AllWarn,
+    RedWarn,
+    YellowWarn,
+    GreenWarn,
+    BlueWarn,
+  },
+  created() {
+    this.search();
+    this.search_num();
+  },
+  methods: {
+    // 预警公司查询
+    search() {
+      let param = {
+        pageSize: this.pageSize,
+        pageNum: this.pageNum,
+        searchParams: this.search_company,
+      };
+      mapList(param).then((res) => {
+        this.warn_comapny_list = res.data;
+        console.log("this.warn_comapny_list", this.warn_comapny_list);
+        // 预警企业合计数量
+        this.warn_num = res.total;
+        // this.label = `全部(${this.warn_num})`
+      });
+    },
+    // 后端不提供预警分类公司的数量，单独汇总，方便展示在tab页上
+    search_num() {
+      // 预警全部公司数量
+      let param = {
+        pageSize: this.pageSize,
+        pageNum: this.pageNum,
+        searchParams: this.search_company,
+      };
+      mapList(param).then((res) => {
+        // 预警企业合计数量
+        this.label = `全部(${res.total})`;
+      });
+      // 红色预警公司数量
+      let param_red = {
+        pageSize: this.pageSize,
+        pageNum: this.pageNum,
+        searchParams: this.search_company,
+        color: "red",
+      };
+      mapList(param_red).then((res) => {
+        // 预警企业合计数量
+        this.label_red = `红色(${res.total})`;
+      });
+      // 黄色预警公司数量
+      let param_yellow = {
+        pageSize: this.pageSize,
+        pageNum: this.pageNum,
+        searchParams: this.search_company,
+        color: "yellow",
+      };
+      mapList(param_yellow).then((res) => {
+        // 预警企业合计数量
+        this.label_yellow = `黄色(${res.total})`;
+      });
+      // 绿色预警公司数量
+      let param_green = {
+        pageSize: this.pageSize,
+        pageNum: this.pageNum,
+        searchParams: this.search_company,
+        color: "green",
+      };
+      mapList(param_green).then((res) => {
+        // 预警企业合计数量
+        this.label_green = `绿色(${res.total})`;
+      });
+      // 蓝色预警公司数量
+      let param_blue = {
+        pageSize: this.pageSize,
+        pageNum: this.pageNum,
+        searchParams: this.search_company,
+        color: "blue",
+      };
+      mapList(param_blue).then((res) => {
+        // 预警企业合计数量
+        this.label_blue = `蓝色(${res.total})`;
+      });
+    },
+    // 通知全部tab页查询
+    all_warn_search() {
+      this.$refs.allWarn.search();
+    },
+    // 通知红色tab页查询
+    red_warn_search() {
+      this.$refs.redWarn.search();
+    },
+    // 通知黄色tab页查询
+    yellow_warn_search() {
+      this.$refs.yellowWarn.search();
+    },
+    // 通知绿色tab页查询
+    green_warn_search() {
+      this.$refs.greenWarn.search();
+    },
+    // 通知蓝色tab页查询
+    blue_warn_search() {
+      console.log("222222");
+      this.$refs.blueWarn.search();
+    },
+    // 整体刷新
+    reset_search() {
+      this.search();
+      this.search_num();
+      this.all_warn_search();
+      this.red_warn_search();
+      this.yellow_warn_search();
+      this.green_warn_search();
+      this.blue_warn_search();
+    },
+  },
+};
+</script>
+<style lang="less" scoped>
+.warn_company {
+  width: 30vw;
+  height: 100%;
+  background: url("~@/assets/realtimeWarning/warnback01.png") no-repeat;
+  background-size: 100% 100%;
+  .warn_search {
+    width: 30vw;
+    height: 9%;
+    display: flex;
+    justify-content: space-around;
+    .title_box {
+      width: 14vw;
+      display: flex;
+      .warn_title {
+        width: 5vw;
+        height: 100%;
+        line-height: 6vh;
+        color: #ebfff4;
+        text-shadow: 0 0 9px rgba(21, 255, 195, 0.6);
+        font-size: 16px;
+        text-align: right;
+      }
+      .icon_left {
+        width: 1vw;
+        height: 6vh;
+        line-height: 6vh;
+        color: #ebfff4;
+        text-shadow: 0 0 9px rgba(21, 255, 195, 0.6);
+        font-size: 16px;
+        text-align: center;
+      }
+      .warn_num {
+        height: 6vh;
+        line-height: 6vh;
+        color: #ff9191;
+        font-size: 16px;
+        font-weight: 400;
+        letter-spacing: 2px;
+      }
+      .icon_right {
+        width: 1vw;
+        height: 6vh;
+        line-height: 6vh;
+        color: #ebfff4;
+        text-shadow: 0 0 9px rgba(21, 255, 195, 0.6);
+        font-size: 16px;
+        text-align: center;
+      }
+    }
+    /* 查询框样式 */
+    .search_box {
+      width: 16vw;
+      height: 6vh;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      .input_btn {
+        width: 16vw;
+        display: flex;
+        .el-button {
+          display: flex;
+          align-items: center;
+          font-size: 17px;
+          height: 4vh;
+          border-radius: 0px 4px 4px 0px;
+          color: #fff;
+          background: rgba(0, 0, 0, 0);
+          border: 0.1px solid #54a972;
+          position: relative;
+          overflow: hidden;
+          &:before {
+            content: "";
+            position: absolute;
+            top: -100%;
+            left: -50%;
+            width: 150%;
+            height: 2px;
+            background-color: #fff;
+            box-shadow: 0 0 4px 1px #fff;
+            transform: rotateZ(-45deg);
+          }
+          &:hover::before {
+            transition: 0.7s;
+            top: 200%;
+            left: 50%;
+          }
+        }
+        .el-button:hover {
+          background: #4d8f89;
+        }
+        /deep/.search_right_input.el-input.el-input--suffix {
+          height: 4vh;
+          width: 12vw;
+        }
+        /deep/.search_right_input.el-input {
+          .el-input__inner {
+            color: #fff;
+            height: 4vh;
+            border: 0.1px solid #54a972;
+            border-radius: 4px 0px 0px 4px;
+            background: rgba(0, 0, 0, 0);
+          }
+        }
+      }
+    }
+  }
+  .warn_company_list {
+    width: 30vw;
+    height: 91%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    .warn_company_list_item {
+      width: 29vw;
+      height: 97%;
+      // border: 0.1px solid #495e70;
+    }
+  }
+  /deep/.el-tabs__active-bar.is-top {
+    display: none;
+    background: #33cccc;
+  }
+  /deep/.el-tabs__nav-wrap::after {
+    display: none;
+    height: 1px;
+    background: #5b748c;
+  }
+  /deep/.el-tabs__item.is-top {
+    color: #fff;
+    font-size: 14px;
+    padding-left: 20px !important;
+    padding-right: 20px;
+  }
+  /deep/.el-tabs__item.is-top.is-active {
+    padding-left: 20px;
+    padding-right: 20px;
+    color: #4bffad;
+    font-size: 14px;
+    text-shadow: 0 0 9px rgba(21, 255, 198, 0.64);
+    background: rgba(129, 255, 204, 0.26) !important;
+  }
+  /deep/.el-tabs__item.is-top:focus,
+  .el-tabs__item.is-top:hover {
+    padding-left: 20px;
+    padding-right: 20px;
+    color: #4bffad;
+    font-size: 14px;
+    text-shadow: 0 0 9px rgba(21, 255, 198, 0.64);
+    background: rgba(129, 255, 204, 0.26) !important;
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/views/realtimeWarning/components/yellowWarn.vue b/src/views/realtimeWarning/components/yellowWarn.vue
new file mode 100644
index 0000000..759f860
--- /dev/null
+++ b/src/views/realtimeWarning/components/yellowWarn.vue
@@ -0,0 +1,464 @@
+<!-- 黄色预警 -->
+<template>
+  <div class="main_box">
+    <div class="list_body">
+      <!-- 公司列表展示 -->
+      <div
+        class="list_item"
+        v-for="item in yellow_warn_comapny_list"
+        :key="item.id"
+      >
+        <!-- 预警公司名 + 公司类型 -->
+        <div class="item_top">
+          <!-- 预警公司 -->
+          <div class="item_company">
+            <div class="item_icon">
+              <!-- 红色预警 -->
+              <div class="icon_yellow"></div>
+            </div>
+            <div class="company_name">{{ item.companyName }}</div>
+          </div>
+          <!-- 公司类型 -->
+          <div class="item_types">
+            <div
+              :class="{
+                shewei: val == '剧毒' || val == '易制毒',
+                zhongdian: val == '消防重点' || val == '所管消防',
+                zhibao: val == '放射源' || val == '易制爆',
+                zhian:
+                  val == '治安重点' || val == '创安单位' || val == '外资合资',
+              }"
+              v-for="(val, index) in item.companyTypeList"
+              :key="index"
+            >
+              {{ val }}
+            </div>
+          </div>
+        </div>
+        <!-- 公司详情 -->
+        <div class="item_bottom">
+          <div class="item_bottom_one">
+            <div class="item_level">
+              <div class="item_level_text">一级指标:</div>
+              <div class="item_levle_value">{{ item.levelIndexOne }}</div>
+            </div>
+            <div class="item_warn">
+              <div class="item_warn_text">预警指标:</div>
+              <div :title="item.levelIndexThree" class="item_warn_value">
+                {{ item.levelIndexThree }}
+              </div>
+            </div>
+          </div>
+          <div class="item_bottom_two">
+            <div class="item_time">
+              <div class="item_time_text">预警时间:</div>
+              <div class="item_time_value">{{ item.alarmTime }}</div>
+            </div>
+            <div class="item_btn">
+              <el-button icon="el-icon-s-promotion" @click="change(item)">转处置</el-button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <!-- 分页 -->
+    <div class="pagination_box">
+      <el-pagination
+        :background="true"
+        @size-change="handle_size_change"
+        @current-change="handle_current_change"
+        :page-sizes="[10]"
+        :page-size="pageSize"
+        :pager-count="5"
+        :current-page="pageNum"
+        layout="total, prev, pager, next, jumper"
+        :total="total"
+      >
+      </el-pagination>
+    </div>
+    <ChangeDialog ref="changeDialog" @reset="reset"></ChangeDialog>
+  </div>
+</template>
+<script>
+import { mapList } from "@/api/realtimeWarning";
+import ChangeDialog from "./changeDialog";
+export default {
+  name: "YellowWarn",
+  components:{
+    ChangeDialog
+  },
+  props: {
+    // 预警公司
+    search_company: {
+      type: String,
+      default: "",
+    },
+  },
+  created() {
+    this.search();
+  },
+  data() {
+    return {
+      yellow_warn_comapny_list: [], // 预警总数
+      pageSize: 10,
+      pageNum: 1,
+      total: 0,
+    };
+  },
+  methods: {
+    // 黄色预警公司查询
+    search() {
+      let param = {
+        pageSize: this.pageSize,
+        pageNum: this.pageNum,
+        searchParams: this.search_company,
+        color:"yellow"
+      };
+      mapList(param).then((res) => {
+        this.yellow_warn_comapny_list = res.data;
+        // 黄色预警企业合计数量
+        this.total = res.total;
+      });
+    },
+    // 转处置弹窗
+    change(val) {
+      this.$refs.changeDialog.open(val)
+    },
+    handle_size_change(val) {
+      this.pageNum = 1;
+      this.pageSize = val;
+      this.search();
+    },
+    handle_current_change(val) {
+      this.pageNum = val;
+      this.search();
+    },
+    // 刷新
+    reset() {
+      this.search()
+      // 去刷新整体查询
+      this.$emit('reset_search')
+    },
+  },
+};
+</script>
+<style lang="less" scoped>
+.main_box {
+  .list_body {
+    width: 100%;
+    height: 57vh;
+    box-sizing: border-box;
+    overflow-y: scroll;
+    // border: 0.1px solid #54a972;
+    .list_item {
+      width: 100%;
+      height: 18vh;
+      border-radius: 6px;
+      border: 2px solid #FDA722;
+      margin-bottom: 1vh;
+      background: rgba(108, 128, 151, 0.2);
+      /* 上方高度活动变化 */
+      .item_top {
+        width: 100%;
+        .item_company {
+          display: flex;
+          height: 4vh;
+          .item_icon {
+            width: 10%;
+            height: 4vh;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            .icon_yellow {
+              width: 30px;
+              height: 30px;
+              background: url("~@/assets/realtimeWarning/yellow.png") no-repeat !important;
+              background-size: 100% 100% !important;
+              animation-name: scale, high;
+              animation-duration: 3s;
+              animation-iteration-count: infinite;
+              animation-timing-function: ease-in-out;
+            }
+            @keyframes scale {
+              /*定义关键帧、scale是需要绑定到选择器的关键帧名称*/
+              0% {
+                transform: scale(0.8); /*开始为原始大小*/
+              }
+              25% {
+                transform: scale(1.1); /*放大1.1倍*/
+              }
+              50% {
+                transform: scale(0.8);
+              }
+              75% {
+                transform: scale(1.1);
+              }
+              100% {
+                transform: scale(0.8);
+              }
+            }
+            @keyframes high {
+              0% {
+                filter: brightness(80%);
+              }
+              25% {
+                filter: brightness(200%);
+              }
+              50% {
+                filter: brightness(80%);
+              }
+              75% {
+                filter: brightness(200%);
+              }
+              100% {
+                filter: brightness(80%);
+              }
+            }
+          }
+          .company_name {
+            width: 90%;
+            height: 4vh;
+            line-height: 4vh;
+            color: #30c4ff;
+            font-family: 黑体;
+            letter-spacing: 2px;
+            text-align: left;
+          }
+        }
+        /* 高度不确定 */
+        .item_types {
+          width: 100%;
+          display: flex;
+          flex-wrap: wrap;
+          z-index: 2;
+          margin-left: 10px;
+          .shewei {
+            height: 26px;
+            line-height: 26px;
+            width: 60px;
+            background: url("~@/assets/companyFile/编组 11991.png") no-repeat;
+            padding: 0 5px;
+            font-size: 14px;
+            color: #b5ebff;
+            letter-spacing: 0.44px;
+            font-weight: 400;
+            background-size: 100% 100%;
+            margin-right: 5px;
+            margin-bottom: 5px;
+            text-align: center;
+          }
+          .zhongdian {
+            height: 26px;
+            line-height: 26px;
+            width: 80px;
+            background: url("~@/assets/companyFile/编组 11222221.png") no-repeat;
+            padding: 0 5px;
+            font-size: 14px;
+            color: #e3deff;
+            letter-spacing: 0.44px;
+            font-weight: 400;
+            background-size: 100% 100%;
+            margin-right: 5px;
+            margin-bottom: 5px;
+            text-align: center;
+          }
+          .zhibao {
+            height: 26px;
+            line-height: 26px;
+            width: 60px;
+            background: url("~@/assets/companyFile/编组 11991备份 10.png")
+              no-repeat;
+            padding: 0 5px;
+            font-size: 14px;
+            color: #e3deff;
+            letter-spacing: 0.44px;
+            font-weight: 400;
+            background-size: 100% 100%;
+            margin-right: 5px;
+            margin-bottom: 5px;
+            text-align: center;
+          }
+          .zhian {
+            height: 26px;
+            line-height: 26px;
+            width: 80px;
+            background: url("~@/assets/companyFile/编组 11991备份 21.png")
+              no-repeat;
+            padding: 0 5px;
+            font-size: 14px;
+            color: #e3deff;
+            letter-spacing: 0.44px;
+            font-weight: 400;
+            background-size: 100% 100%;
+            margin-right: 5px;
+            margin-bottom: 5px;
+            text-align: center;
+          }
+        }
+      }
+      .item_bottom {
+        width: 100%;
+        height: 10vh;
+        .item_bottom_one {
+          width: 100%;
+          height: 5vh;
+          display: flex;
+          .item_level {
+            width: 50%;
+            height: 5vh;
+            display: flex;
+            .item_level_text {
+              width: 30%;
+              height: 5vh;
+              line-height: 5vh;
+              color: #e3deff;
+              text-align: center;
+            }
+            .item_levle_value {
+              width: 70%;
+              height: 5vh;
+              line-height: 5vh;
+              text-align: left;
+              color: #fff;
+            }
+          }
+          .item_warn {
+            width: 50%;
+            height: 5vh;
+            display: flex;
+            .item_warn_text {
+              width: 30%;
+              height: 5vh;
+              line-height: 5vh;
+              color: #e3deff;
+              text-align: center;
+            }
+            .item_warn_value {
+              width: 70%;
+              text-overflow: ellipsis;
+              white-space: nowrap;
+              overflow: hidden;
+              line-height: 5vh;
+              text-align: left;
+              color: #fff;
+            }
+          }
+        }
+        .item_bottom_two {
+          width: 100%;
+          height: 5vh;
+          display: flex;
+          .item_time {
+            width: 50%;
+            height: 5vh;
+            display: flex;
+            .item_time_text {
+              width: 30%;
+              height: 5vh;
+              line-height: 5vh;
+              color: #e3deff;
+              text-align: center;
+            }
+            .item_time_value {
+              width: 70%;
+              height: 5vh;
+              line-height: 5vh;
+              text-align: left;
+              color: #fff;
+            }
+          }
+          .item_btn {
+            width: 42%;
+            height: 5vh;
+            display: flex;
+            flex-direction: row-reverse;
+            .el-button {
+              display: flex;
+              align-items: center;
+              font-size: 13px;
+              height: 4vh;
+              color: #fff;
+              background: rgba(0, 0, 0, 0);
+              border: 0.1px solid #54a972;
+              position: relative;
+              overflow: hidden;
+              &:before {
+                content: "";
+                position: absolute;
+                top: -100%;
+                left: -50%;
+                width: 150%;
+                height: 2px;
+                background-color: #fff;
+                box-shadow: 0 0 4px 1px #fff;
+                transform: rotateZ(-45deg);
+              }
+              &:hover::before {
+                transition: 0.7s;
+                top: 200%;
+                left: 50%;
+              }
+            }
+            .el-button:hover {
+              background: #4d8f89;
+            }
+          }
+        }
+      }
+    }
+  }
+  .list_body::-webkit-scrollbar {
+    display: none;
+    width: 6px;
+    background-color: #5e666a;
+    border-radius: 4px;
+  }
+  .list_body::-webkit-scrollbar-thumb {
+    display: none;
+    width: 5px;
+    background-color: #3c4b4a;
+    border-radius: 4px;
+  }
+  .pagination_box {
+    width: 100%;
+    height: 5vh;
+    display: flex;
+    flex-direction: row-reverse;
+    margin-top: 1vh;
+    /deep/.el-pagination.is-background .btn-next,
+    /deep/.el-pagination.is-background .btn-prev,
+    /deep/.el-pagination.is-background .el-pager li {
+      margin: 0 5px;
+      background-color: rgba(255, 255, 255, 0);
+      color: #eaeff7;
+      min-width: 30px;
+      border-radius: 2px;
+      border: 1px solid rgba(40, 132, 126, 1);
+    }
+    /deep/.el-pagination__total {
+      color: #fff;
+    }
+    /deep/.el-input__inner {
+      background-color: rgba(255, 255, 255, 0);
+      border: 1px solid rgba(40, 132, 126, 1);
+      color: #eaeff7;
+    }
+    /deep/.el-pagination.is-background .el-pager li:not(.disabled).active {
+      background-color: rgba(64, 158, 255, 0);
+      color: #ccc;
+      border: 1px solid #76eae4;
+    }
+    /deep/.btn-prev {
+      margin: 0 5px;
+      background-color: rgba(255, 255, 255, 0);
+      color: #eaeff7;
+      min-width: 30px;
+      border-radius: 2px;
+      border: 1px solid rgba(40, 132, 126, 1);
+    }
+    /deep/.el-pagination__jump {
+      color: #fff;
+    }
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/views/realtimeWarning/index.vue b/src/views/realtimeWarning/index.vue
index f831a54..d64a411 100644
--- a/src/views/realtimeWarning/index.vue
+++ b/src/views/realtimeWarning/index.vue
@@ -4,27 +4,31 @@
       <div class="title">实时预警</div>
       <div class="leftBox">
         <div class="shuoming">
-          <img
-            src="../../assets/realtimeWarning/消息.png"
-            alt=""
-          />&nbsp;实时预警根据平安指数配置的预警规则，辖区内的企业达到预警分值后产生即时预警
+          <img src="../../assets/realtimeWarning/消息.png" alt="" />
+          <div class="img_text">
+            实时预警根据平安指数配置的预警规则，辖区内的企业达到预警分值后产生即时预警
+          </div>
         </div>
-        <zhmap
+        <Map
           class="map"
           :waringList="waringList"
           @zhuanchuzhi="chuzhi"
           v-if="waringList && waringList.length"
         >
-        </zhmap>
+        </Map>
+      </div>
+      <!-- 右边预警公司区域 -->
+      <div class="warning_box">
+        <WarnCompany ref="warnCompany"></WarnCompany>
       </div>
-      <div class="rightBox">
+      <!-- <div class="rightBox">
         <div class="totalTitle">
           <div class="titleText">预警列表</div>
           <span
             >( <span class="redText">{{ total }}</span> )</span
-          >
+          > -->
           <!-- 搜索框 -->
-          <div class="searchBox">
+          <!-- <div class="searchBox">
             <el-form :model="formInline" class="search">
               <el-form-item class="formItem">
                 <el-input
@@ -37,9 +41,9 @@
               <el-button type="primary" @click="getList()">搜索</el-button>
             </el-form>
           </div>
-        </div>
+        </div> -->
         <!-- 公司展示区域 -->
-        <div class="bottomBody">
+        <!-- <div class="bottomBody">
           <div
             class="yujingItem"
             v-for="(item, index) in waringList"
@@ -49,9 +53,9 @@
               <div class="companyName">
                 <div class="companyName_icon"></div>
                 <div class="companyName_text">{{ item.companyName }}</div>
-              </div>
+              </div> -->
               <!-- <div class="companyName">{{ item.companyName }}</div> -->
-              <div class="impBtnList">
+              <!-- <div class="impBtnList">
                 <div
                   :class="{
                     shewei: a == '剧毒' || a == '易制毒',
@@ -91,8 +95,8 @@
             </div>
             <div class="chuzhi" @click="chuzhi(item)">转处置</div>
           </div>
-        </div>
-        <div class="block">
+        </div> -->
+        <!-- <div class="block">
           <el-pagination
             style="float: right; margin: 5px"
             class="msg-pagination-container"
@@ -106,8 +110,8 @@
           >
           </el-pagination>
         </div>
-      </div>
-      <el-dialog
+      </div> -->
+      <!-- <el-dialog
         title="选择处置部门"
         :visible.sync="diaVisible"
         class="picForm"
@@ -128,7 +132,7 @@
           <el-button @click="diaVisible = false">取 消 </el-button>
           <el-button type="primary" @click="addForm()">确 定</el-button>
         </div>
-      </el-dialog>
+      </el-dialog> -->
     </div>
   </div>
 </template>
@@ -139,10 +143,12 @@ import {
   deptList,
   addCommonApprovalProcess,
 } from "@/api/realtimeWarning";
-import zhmap from "./map.vue";
+import Map from "./map";
+import WarnCompany from './components/warnCompany'
 export default {
   components: {
-    zhmap,
+    Map,
+    WarnCompany
   },
   data() {
     return {
@@ -265,349 +271,358 @@ export default {
         color: rgba(255, 255, 255, 0.7);
         letter-spacing: 1px;
         font-weight: 400;
-
         img {
           width: 20px;
           height: 20px;
         }
-      }
-
-      .map {
-        height: 100%;
-        width: 100%;
-      }
-    }
-
-    .rightBox {
-      width: 570px;
-      height: 100%;
-      box-sizing: border-box;
-      background: url("~@/assets/realtimeWarning/矩形备份 289981.png") no-repeat;
-      background-size: 100% 100%;
-      position: relative;
-
-      .totalTitle {
-        height: 60px;
-        width: 100%;
-        border-bottom: 1px solid rgba(91, 116, 140, 0.6);
-        padding: 0 20px;
-        display: flex;
-        align-items: center;
-        color: #ebfff4;
-
-        .titleText {
-          font-size: 16px;
-          color: #ebfff4;
-          letter-spacing: 2px;
-          width: 80px;
-          text-shadow: 0 0 9px rgba(21, 255, 195, 0.6);
-          font-weight: 400;
-        }
-
-        .searchBox {
+        .img_text {
           height: 40px;
-          width: 320px;
-          display: flex;
-          box-sizing: border-box;
-          align-items: center;
-
-          .search {
-            height: 35px;
-            box-sizing: border-box;
-            margin-top: -5px;
-          }
-
-          /deep/.el-input__inner {
-            // background: url('~@/assets/companyFile/2121.png') no-repeat;
-            background: #3b4450;
-            border: 1px solid #5b748c;
-            color: rgba(234, 246, 255, 0.7);
-            height: 35px;
-
-            .el-range-separator {
-              color: #ccc;
-            }
-
-            .el-range-input {
-              background: rgba(0, 0, 0, 0);
-              color: #ccc;
-            }
-          }
-
-          /deep/.el-form-item {
-            margin: 0;
-
-            .el-form-item__content {
-              line-height: 35px;
-            }
-
-            .el-form-item__label {
-              color: #eaf6ff;
-              letter-spacing: 1px;
-              text-align: center;
-              font-weight: 400;
-            }
-          }
-
-          /deep/.el-button--primary {
-            width: 60px;
-            height: 35px;
-            line-height: 30px;
-            padding: 0;
-            text-align: center;
-            background: rgba(0, 0, 0, 0);
-            border: 0;
-            background: url("~@/assets/companyFile/2121.png") no-repeat;
-            background-size: 100% 100%;
-            font-size: 14px;
-            color: #f8fbff;
-            letter-spacing: 0.89px;
-            font-weight: 500;
-          }
-
-          /deep/.el-button--default {
-            width: 60px;
-            height: 35px;
-            line-height: 30px;
-            padding: 0;
-            text-align: center;
-            background: #3b4450;
-            border: 0;
-
-            font-size: 14px;
-            color: #f8fbff;
-            letter-spacing: 0.89px;
-            font-weight: 500;
-          }
-        }
-
-        .redText {
+          line-height: 40px;
+          color: #fff;
           font-size: 16px;
-          color: #ff9191;
-          letter-spacing: 2px;
-
-          font-weight: 400;
-        }
-      }
-
-      .bottomBody {
-        height: calc(100% - 120px);
-        width: 100%;
-        padding: 14px;
-        box-sizing: border-box;
-        overflow: auto;
-
-        &::-webkit-scrollbar {
-          width: 6px;
-        }
-
-        // 滚动条里面默认的小方块,自定义样式
-        &::-webkit-scrollbar-thumb {
-          background: rgba(255, 255, 255, 0.44);
-          border-radius: 5px;
-        }
-
-        // 滚动条里面的轨道
-        &::-webkit-scrollbar-track {
-          background: transparent;
-        }
-
-        .yujingItem {
-          height: 158px;
-          width: 100%;
-          background: rgba(108, 128, 151, 0.2);
-          border: 1px solid rgba(73, 84, 97, 1);
-          position: relative;
-          margin-bottom: 1ch;
-
-          .yujingTop {
-            border-bottom: 1px solid #495461;
-            height: 74px;
-            width: 100%;
-            padding: 0 14px 5px;
-
-            .companyName {
-              width: 100%;
-              height: 32px;
-              line-height: 32px;
-              display: flex;
-              //white-space: nowrap; //禁止换行
-              .companyName_icon {
-                width: 6.5%;
-                background: url("~@/assets/safetyIndex/red02.png") no-repeat;
-                background-size: 100% 100%;
-              }
-              .companyName_text {
-                color: #30c4ff;
-                font-size: 16px;
-                letter-spacing: 1.14px;
-                font-weight: 500;
-                margin-left: 10px;
-              }
-            }
-
-            .impBtnList {
-              height: 40px;
-              width: 100%;
-              display: flex;
-              align-items: center;
-              overflow: hidden;
-              white-space: nowrap; //禁止换行
-
-              text-overflow: ellipsis; //...
-              //margin-bottom: 5px;
-
-              .shewei {
-                height: 26px;
-                line-height: 26px;
-                width: auto;
-                background: url("~@/assets/companyFile/编组 11991.png")
-                  no-repeat;
-                padding: 0 5px;
-                font-size: 14px;
-                color: #b5ebff;
-                letter-spacing: 0.44px;
-                font-weight: 400;
-                background-size: 100% 100%;
-                margin-right: 10px;
-              }
-
-              .zhongdian {
-                height: 26px;
-                line-height: 26px;
-                width: auto;
-                background: url("~@/assets/companyFile/编组 11222221.png")
-                  no-repeat;
-                padding: 0 5px;
-                font-size: 14px;
-                color: #e3deff;
-                letter-spacing: 0.44px;
-                font-weight: 400;
-                background-size: 100% 100%;
-                margin-right: 10px;
-              }
-
-              .zhibao {
-                height: 26px;
-                line-height: 26px;
-                width: auto;
-                background: url("~@/assets/companyFile/编组 11991备份 10.png")
-                  no-repeat;
-                padding: 0 5px;
-                font-size: 14px;
-                color: #e3deff;
-                letter-spacing: 0.44px;
-                font-weight: 400;
-                background-size: 100% 100%;
-                margin-right: 10px;
-              }
-
-              .zhian {
-                height: 26px;
-                line-height: 26px;
-                width: auto;
-                background: url("~@/assets/companyFile/编组 11991备份 21.png")
-                  no-repeat;
-                padding: 0 5px;
-                font-size: 14px;
-                color: #e3deff;
-                letter-spacing: 0.44px;
-                font-weight: 400;
-                background-size: 100% 100%;
-                margin-right: 10px;
-              }
-            }
-          }
-
-          .chuzhi {
-            position: absolute;
-            right: 14px;
-            bottom: 14px;
-            cursor: pointer;
-            height: 20px;
-            width: 50px;
-            line-height: 20px;
-            font-size: 14px;
-            color: #30c4ff;
-            letter-spacing: 1px;
-            font-weight: 400;
-          }
-
-          .yujingBottom {
-            width: 100%;
-            height: 84px;
-            padding: 0 14px 5px;
-            overflow: hidden;
-
-            .bottomTOP {
-              width: 100%;
-              height: 50%;
-              display: flex;
-              align-items: center;
-
-              font-family: PingFangSC-Regular;
-              font-size: 14px;
-              color: rgba(255, 255, 255, 0.8);
-              letter-spacing: 0;
-              font-weight: 400;
-              white-space: nowrap;
-              text-overflow: ellipsis;
-
-              .topItem {
-                display: flex;
-                align-items: center;
-                width: 50%;
-                height: 100%;
-                font-size: 14px;
-                color: rgba(255, 255, 255, 0.8);
-                letter-spacing: 0;
-                font-weight: 400;
-                overflow: hidden;
-                white-space: nowrap;
-                text-overflow: ellipsis;
-
-                span {
-                  width: 70px;
-                }
-
-                .numValue {
-                  width: calc(100% - 70px);
-                  overflow: hidden;
-                  white-space: nowrap;
-                  text-overflow: ellipsis;
-                }
-              }
-
-              .numValue {
-                font-size: 14px;
-                color: #ffffff;
-                letter-spacing: 0;
-                font-weight: 400;
-                white-space: nowrap;
-                text-overflow: ellipsis;
-              }
-            }
-          }
+          letter-spacing: 1px;
         }
       }
 
-      .block {
-        bottom: 5px;
-        right: -10px;
+      .map {
+        height: 100%;
         width: 100%;
-
-        /deep/.el-pagination__jump {
-          margin: 0;
-        }
-
-        /deep/.el-input__inner {
-          background: rgba(0, 0, 0, 0);
-
-          border: 1px solid #28847e;
-          color: #ccc;
-        }
       }
     }
+      .warning_box {
+        width: 30vw;
+        height: 100%;
+      }
+    // .rightBox {
+    //   width: 570px;
+    //   height: 100%;
+    //   box-sizing: border-box;
+    //   background: url("~@/assets/realtimeWarning/矩形备份 289981.png") no-repeat;
+    //   background-size: 100% 100%;
+    //   position: relative;
+
+    //   .totalTitle {
+    //     height: 60px;
+    //     width: 100%;
+    //     border-bottom: 1px solid rgba(91, 116, 140, 0.6);
+    //     padding: 0 20px;
+    //     display: flex;
+    //     align-items: center;
+    //     color: #ebfff4;
+
+    //     .titleText {
+    //       font-size: 16px;
+    //       color: #ebfff4;
+    //       letter-spacing: 2px;
+    //       width: 80px;
+    //       text-shadow: 0 0 9px rgba(21, 255, 195, 0.6);
+    //       font-weight: 400;
+    //     }
+
+    //     .searchBox {
+    //       height: 40px;
+    //       width: 320px;
+    //       display: flex;
+    //       box-sizing: border-box;
+    //       align-items: center;
+
+    //       .search {
+    //         height: 35px;
+    //         box-sizing: border-box;
+    //         margin-top: -5px;
+    //       }
+
+    //       /deep/.el-input__inner {
+    //         // background: url('~@/assets/companyFile/2121.png') no-repeat;
+    //         background: #3b4450;
+    //         border: 1px solid #5b748c;
+    //         color: rgba(234, 246, 255, 0.7);
+    //         height: 35px;
+
+    //         .el-range-separator {
+    //           color: #ccc;
+    //         }
+
+    //         .el-range-input {
+    //           background: rgba(0, 0, 0, 0);
+    //           color: #ccc;
+    //         }
+    //       }
+
+    //       /deep/.el-form-item {
+    //         margin: 0;
+
+    //         .el-form-item__content {
+    //           line-height: 35px;
+    //         }
+
+    //         .el-form-item__label {
+    //           color: #eaf6ff;
+    //           letter-spacing: 1px;
+    //           text-align: center;
+    //           font-weight: 400;
+    //         }
+    //       }
+
+    //       /deep/.el-button--primary {
+    //         width: 60px;
+    //         height: 35px;
+    //         line-height: 30px;
+    //         padding: 0;
+    //         text-align: center;
+    //         background: rgba(0, 0, 0, 0);
+    //         border: 0;
+    //         background: url("~@/assets/companyFile/2121.png") no-repeat;
+    //         background-size: 100% 100%;
+    //         font-size: 14px;
+    //         color: #f8fbff;
+    //         letter-spacing: 0.89px;
+    //         font-weight: 500;
+    //       }
+
+    //       /deep/.el-button--default {
+    //         width: 60px;
+    //         height: 35px;
+    //         line-height: 30px;
+    //         padding: 0;
+    //         text-align: center;
+    //         background: #3b4450;
+    //         border: 0;
+
+    //         font-size: 14px;
+    //         color: #f8fbff;
+    //         letter-spacing: 0.89px;
+    //         font-weight: 500;
+    //       }
+    //     }
+
+    //     .redText {
+    //       font-size: 16px;
+    //       color: #ff9191;
+    //       letter-spacing: 2px;
+
+    //       font-weight: 400;
+    //     }
+    //   }
+
+    //   .bottomBody {
+    //     height: calc(100% - 120px);
+    //     width: 100%;
+    //     padding: 14px;
+    //     box-sizing: border-box;
+    //     overflow: auto;
+
+    //     &::-webkit-scrollbar {
+    //       width: 6px;
+    //     }
+
+    //     // 滚动条里面默认的小方块,自定义样式
+    //     &::-webkit-scrollbar-thumb {
+    //       background: rgba(255, 255, 255, 0.44);
+    //       border-radius: 5px;
+    //     }
+
+    //     // 滚动条里面的轨道
+    //     &::-webkit-scrollbar-track {
+    //       background: transparent;
+    //     }
+
+    //     .yujingItem {
+    //       height: 158px;
+    //       width: 100%;
+    //       background: rgba(108, 128, 151, 0.2);
+    //       border: 1px solid rgba(73, 84, 97, 1);
+    //       position: relative;
+    //       margin-bottom: 1ch;
+
+    //       .yujingTop {
+    //         border-bottom: 1px solid #495461;
+    //         height: 74px;
+    //         width: 100%;
+    //         padding: 0 14px 5px;
+
+    //         .companyName {
+    //           width: 100%;
+    //           height: 32px;
+    //           line-height: 32px;
+    //           display: flex;
+    //           //white-space: nowrap; //禁止换行
+    //           .companyName_icon {
+    //             width: 6.5%;
+    //             background: url("~@/assets/safetyIndex/red02.png") no-repeat;
+    //             background-size: 100% 100%;
+    //           }
+    //           .companyName_text {
+    //             color: #30c4ff;
+    //             font-size: 16px;
+    //             letter-spacing: 1.14px;
+    //             font-weight: 500;
+    //             margin-left: 10px;
+    //           }
+    //         }
+
+    //         .impBtnList {
+    //           height: 40px;
+    //           width: 100%;
+    //           display: flex;
+    //           align-items: center;
+    //           overflow: hidden;
+    //           white-space: nowrap; //禁止换行
+
+    //           text-overflow: ellipsis; //...
+    //           //margin-bottom: 5px;
+
+    //           .shewei {
+    //             height: 26px;
+    //             line-height: 26px;
+    //             width: auto;
+    //             background: url("~@/assets/companyFile/编组 11991.png")
+    //               no-repeat;
+    //             padding: 0 5px;
+    //             font-size: 14px;
+    //             color: #b5ebff;
+    //             letter-spacing: 0.44px;
+    //             font-weight: 400;
+    //             background-size: 100% 100%;
+    //             margin-right: 10px;
+    //           }
+
+    //           .zhongdian {
+    //             height: 26px;
+    //             line-height: 26px;
+    //             width: auto;
+    //             background: url("~@/assets/companyFile/编组 11222221.png")
+    //               no-repeat;
+    //             padding: 0 5px;
+    //             font-size: 14px;
+    //             color: #e3deff;
+    //             letter-spacing: 0.44px;
+    //             font-weight: 400;
+    //             background-size: 100% 100%;
+    //             margin-right: 10px;
+    //           }
+
+    //           .zhibao {
+    //             height: 26px;
+    //             line-height: 26px;
+    //             width: auto;
+    //             background: url("~@/assets/companyFile/编组 11991备份 10.png")
+    //               no-repeat;
+    //             padding: 0 5px;
+    //             font-size: 14px;
+    //             color: #e3deff;
+    //             letter-spacing: 0.44px;
+    //             font-weight: 400;
+    //             background-size: 100% 100%;
+    //             margin-right: 10px;
+    //           }
+
+    //           .zhian {
+    //             height: 26px;
+    //             line-height: 26px;
+    //             width: auto;
+    //             background: url("~@/assets/companyFile/编组 11991备份 21.png")
+    //               no-repeat;
+    //             padding: 0 5px;
+    //             font-size: 14px;
+    //             color: #e3deff;
+    //             letter-spacing: 0.44px;
+    //             font-weight: 400;
+    //             background-size: 100% 100%;
+    //             margin-right: 10px;
+    //           }
+    //         }
+    //       }
+
+    //       .chuzhi {
+    //         position: absolute;
+    //         right: 14px;
+    //         bottom: 14px;
+    //         cursor: pointer;
+    //         height: 20px;
+    //         width: 50px;
+    //         line-height: 20px;
+    //         font-size: 14px;
+    //         color: #30c4ff;
+    //         letter-spacing: 1px;
+    //         font-weight: 400;
+    //       }
+
+    //       .yujingBottom {
+    //         width: 100%;
+    //         height: 84px;
+    //         padding: 0 14px 5px;
+    //         overflow: hidden;
+
+    //         .bottomTOP {
+    //           width: 100%;
+    //           height: 50%;
+    //           display: flex;
+    //           align-items: center;
+
+    //           font-family: PingFangSC-Regular;
+    //           font-size: 14px;
+    //           color: rgba(255, 255, 255, 0.8);
+    //           letter-spacing: 0;
+    //           font-weight: 400;
+    //           white-space: nowrap;
+    //           text-overflow: ellipsis;
+
+    //           .topItem {
+    //             display: flex;
+    //             align-items: center;
+    //             width: 50%;
+    //             height: 100%;
+    //             font-size: 14px;
+    //             color: rgba(255, 255, 255, 0.8);
+    //             letter-spacing: 0;
+    //             font-weight: 400;
+    //             overflow: hidden;
+    //             white-space: nowrap;
+    //             text-overflow: ellipsis;
+
+    //             span {
+    //               width: 70px;
+    //             }
+
+    //             .numValue {
+    //               width: calc(100% - 70px);
+    //               overflow: hidden;
+    //               white-space: nowrap;
+    //               text-overflow: ellipsis;
+    //             }
+    //           }
+
+    //           .numValue {
+    //             font-size: 14px;
+    //             color: #ffffff;
+    //             letter-spacing: 0;
+    //             font-weight: 400;
+    //             white-space: nowrap;
+    //             text-overflow: ellipsis;
+    //           }
+    //         }
+    //       }
+    //     }
+    //   }
+
+    //   .block {
+    //     bottom: 5px;
+    //     right: -10px;
+    //     width: 100%;
+
+    //     /deep/.el-pagination__jump {
+    //       margin: 0;
+    //     }
+
+    //     /deep/.el-input__inner {
+    //       background: rgba(0, 0, 0, 0);
+
+    //       border: 1px solid #28847e;
+    //       color: #ccc;
+    //     }
+    //   }
+    // }
 
     .picForm {
       /deep/ .el-dialog {
diff --git a/src/views/realtimeWarning/map.vue b/src/views/realtimeWarning/map.vue
index 7400027..5c418fe 100644
--- a/src/views/realtimeWarning/map.vue
+++ b/src/views/realtimeWarning/map.vue
@@ -10,7 +10,7 @@ import MapPoint from "../../../public/zhenhaiPoint.json";
 import styleJson from "../../../public/custom_map_config.json";
 import { topMap } from "@/api/offLineMap";
 export default {
-  name: "zhenhaimap",
+  name: "Map",
   props: ["waringList"],
   data() {
     return {
@@ -44,8 +44,8 @@ export default {
           styleJson,
         },
       });
-      console.log('this.dongtaiPoint[0]',this.dongtaiPoint[0]);
-      console.log('this.dongtaiPoint[1]',this.dongtaiPoint[1]);
+      console.log("this.dongtaiPoint[0]", this.dongtaiPoint[0]);
+      console.log("this.dongtaiPoint[1]", this.dongtaiPoint[1]);
       //  console.log(this.WaringList, 'waringList');
       let that = this;
       map.centerAndZoom(
@@ -247,7 +247,7 @@ font-weight: 400;'>转处置</div>
         }
       }
       function showPic() {
-        // console.log(that.WaringList, 'that.WaringList');
+        console.log(that.WaringList, "that.WaringList");
         that.WaringList.forEach((item) => {
           // 创建小车图标
           var myIcon = new BMap.Icon(
diff --git a/src/views/systemManagement/companyList/index.vue b/src/views/systemManagement/companyList/index.vue
index edcae02..2d87dac 100644
--- a/src/views/systemManagement/companyList/index.vue
+++ b/src/views/systemManagement/companyList/index.vue
@@ -70,18 +70,6 @@
             </ul>
           </div>
           <!-- 分页区域 -->
-          <!-- <div class="footer">
-            <el-pagination
-              :background="true"
-              @current-change="handleCurrentChange"
-              :page-sizes="[6]"
-              :page-size="pageSize"
-              :current-page="pageNum"
-              layout="total, sizes, prev, pager, next, jumper"
-              :total="total"
-            >
-            </el-pagination>
-          </div> -->
           <lkyPagination
             :page_sizes="page_sizes"
             :pageSize="pageSize"
@@ -219,47 +207,38 @@ export default {
     }
   }
 }
-
 .main {
   height: 100%;
-
   .el-card.box-card.is-always-shadow {
     background: url("~@/assets/companyFile/22136.png") no-repeat !important;
     background-size: 100% 100% !important;
     border: 0px;
   }
-
   .card_body {
     height: 90% !important;
-
     .top {
       width: 100%;
       display: flex;
       justify-content: space-between;
-
       .top_search {
         margin-left: 2vw;
         display: flex;
         width: 40%;
         height: 40px;
-
         .top_search_input ::v-deep {
           /* 查询框 */
           width: 60%;
-
           .el-input__inner {
             border-radius: 4px 0px 0px 4px;
             background: #3c4b4a;
             color: #fff;
           }
-
           /* 查询框点击颜色变化 */
           .el-input__inner:focus,
           .el-input__inner:hover {
             border-color: #1b3736;
           }
         }
-
         .top_search_button {
           width: 7%;
           height: 100%;
@@ -268,23 +247,19 @@ export default {
           text-align: center;
           font-size: 28px;
           cursor: pointer;
-
           .el-icon-search {
             color: #fff;
             padding: 11% 0;
           }
         }
-
         .top_search_button:focus,
         .top_search_button:hover {
           /* 放大镜点击特效 */
           background: #126a58;
         }
       }
-
       .top_add_btn {
         width: 10%;
-
         .el-button {
           width: 82%;
           border: 1px solid #4a6072;
@@ -293,7 +268,6 @@ export default {
           background: url("~@/assets/companyFile/btn05.png") no-repeat !important;
           background-size: 100% 100% !important;
         }
-
         .el-button:focus,
         .el-button:hover {
           text-shadow: 0 0 9px #34e1b3;
@@ -301,20 +275,17 @@ export default {
         }
       }
     }
-
     /* 公司图片展示区域 */
     .center {
       width: 100%;
       height: 65vh;
       margin-top: 22px;
-
       ul {
         display: flex;
         justify-content: flex-start;
         height: 100%;
         flex-wrap: wrap;
         padding-left: 0px;
-
         li {
           margin-left: 2.5%;
           position: relative;
@@ -323,14 +294,12 @@ export default {
           height: 31vh;
           background: #1b3736;
           border: 1px solid #fff;
-
           img {
             margin-left: 0.3vw;
             margin-top: 0.5vh;
             width: 25vw;
             height: 30vh;
           }
-
           /* 公司图片相关信息区域 */
           .company_name {
             position: absolute;
@@ -341,7 +310,6 @@ export default {
             bottom: 100px;
             font-size: 18px;
           }
-
           .company_label {
             display: flex;
             flex-wrap: wrap;
@@ -349,7 +317,6 @@ export default {
             z-index: 2;
             left: 10px;
             bottom: 35px;
-
             .shewei {
               height: 26px;
               line-height: 26px;
@@ -365,7 +332,6 @@ export default {
               margin-bottom: 5px;
               text-align: center;
             }
-
             .zhongdian {
               height: 26px;
               line-height: 26px;
@@ -382,7 +348,6 @@ export default {
               margin-bottom: 5px;
               text-align: center;
             }
-
             .zhibao {
               height: 26px;
               line-height: 26px;
@@ -399,7 +364,6 @@ export default {
               margin-bottom: 5px;
               text-align: center;
             }
-
             .zhian {
               height: 26px;
               line-height: 26px;
@@ -417,7 +381,6 @@ export default {
               text-align: center;
             }
           }
-
           .company_unit {
             position: absolute;
             z-index: 2;
@@ -425,7 +388,6 @@ export default {
             left: 10px;
             bottom: 10px;
           }
-
           /* 图片鼠标经过 */
           .image_mask {
             z-index: 3;
@@ -436,12 +398,10 @@ export default {
             background: rgba(73, 72, 72, 0.6);
             color: #ffffff;
             opacity: 0;
-
             /* 图片鼠标经过按钮 */
             .btn {
               margin-left: 20%;
               margin-top: 25%;
-
               button {
                 height: 60px;
                 padding: 20px;
@@ -452,12 +412,10 @@ export default {
                 border-radius: 0px;
                 cursor: pointer;
               }
-
               button.check {
                 background: url("~@/assets/companyFile/btn05.png") no-repeat !important;
                 background-size: 100% 100% !important;
               }
-
               /* 点击高亮 */
               button.check:hover,
               button.check:focus {