.env.development

@@ -6,7 +6,7 @@ VUE_APP_TITLE = 汉邦唐消防训练基地
 # 网关地址
 VUE_APP_GATEWAY_URL="/dev-api"
 # UE4服务地址
-VUE_APP_PALYER_URL="172.16.0.77:8080"
+VUE_APP_PALYER_URL="192.168.1.66:8080"
 # 服务地址
 VUE_APP_BASE_API_URL="http://192.168.2.3:8081"
 # 服务前-- 请严格遵守格式  不允许换行
@@ -16,4 +16,4 @@ VUE_APP_ALL_MENU = false
 # 微前端地址
 VUE_APP_REMOTES_URL="http://119.45.158.12/common/"
 # 当前应用部署地址
-VUE_APP_EXPOSES_URL="http://192.168.2.72:8081/"
+VUE_APP_EXPOSES_URL=""

.env.developmentGY

@@ -1,19 +0,0 @@
-
-#开发环境
-NODE_ENV:"development"
-# 页面标题
-VUE_APP_TITLE = 汉邦唐消防训练基地
-# 网关地址
-VUE_APP_GATEWAY_URL="/dev-api"
-# UE4服务地址
-VUE_APP_PALYER_URL="192.168.1.66:8080"
-# 服务地址
-VUE_APP_BASE_API_URL="http://192.168.2.3:8081"
-# 服务前-- 请严格遵守格式  不允许换行
-VUE_APP_SERVICE_PREFIX= '{"knowledge":"/knowledge","system":"/system"}'
-# 是否显示全部菜单
-VUE_APP_ALL_MENU = false
-# 微前端地址
-VUE_APP_REMOTES_URL="http://119.45.158.12/common/"
-# 当前应用部署地址
-VUE_APP_EXPOSES_URL="http://192.168.2.72:8081/"

.env.developmentLocal

@@ -1,19 +0,0 @@
-
-#开发环境
-NODE_ENV:"development"
-# 页面标题
-VUE_APP_TITLE = 汉邦唐消防训练基地
-# 网关地址
-VUE_APP_GATEWAY_URL="/dev-api"
-# UE4服务地址
-VUE_APP_PALYER_URL="192.168.1.66:8080"
-# 服务地址
-VUE_APP_BASE_API_URL="http://192.168.2.3:8081"
-# 服务前-- 请严格遵守格式  不允许换行
-VUE_APP_SERVICE_PREFIX= '{"knowledge":"/knowledge","system":"/system"}'
-# 是否显示全部菜单
-VUE_APP_ALL_MENU = false
-# 微前端地址
-VUE_APP_REMOTES_URL="http://119.45.158.12/common/"
-# 当前应用部署地址
-VUE_APP_EXPOSES_URL="http://192.168.1.66:8084/"

.env.prod

@@ -1,21 +0,0 @@
-
-#开发环境
-NODE_ENV:"development"
-# 页面标题
-VUE_APP_TITLE = 汉邦唐消防训练基地
-# 网关地址
-VUE_APP_GATEWAY_URL="/dev-api"
-# UE4服务地址
-VUE_APP_PALYER_URL="172.16.0.77:8080"
-# 服务地址
-VUE_APP_BASE_API_URL="http://192.168.2.3:8081"
-# 服务前-- 请严格遵守格式  不允许换行
-VUE_APP_SERVICE_PREFIX= '{"knowledge":"/knowledge","system":"/system"}'
-# 是否显示全部菜单
-VUE_APP_ALL_MENU = false
-# 微前端地址
-VUE_APP_REMOTES_URL="http://119.45.158.12/common/"
-# 当前应用部署地址
-VUE_APP_EXPOSES_URL="http://172.16.0.77/trainingbase/"
-# nginx路径
-PUB_PATH:'/trainingbase/'

.env.prodLocal

@@ -1,21 +0,0 @@
-
-#开发环境
-NODE_ENV:"production"
-# 页面标题
-VUE_APP_TITLE = 汉邦唐消防训练基地
-# 网关地址
-VUE_APP_GATEWAY_URL="/dev-api"
-# UE4服务地址
-VUE_APP_PALYER_URL="192.168.1.66:8080"
-# 服务地址
-VUE_APP_BASE_API_URL="http://192.168.2.3:8081"
-# 服务前-- 请严格遵守格式  不允许换行
-VUE_APP_SERVICE_PREFIX= '{"knowledge":"/knowledge","system":"/system"}'
-# 是否显示全部菜单
-VUE_APP_ALL_MENU = false
-# 微前端地址
-VUE_APP_REMOTES_URL="http://119.45.158.12/common/"
-# 当前应用部署地址
-VUE_APP_EXPOSES_URL="http://192.168.1.66/dev/trainingbase/"
-# nginx路径
-PUB_PATH:'/dev/trainingbase/'

.env.production

@@ -6,7 +6,7 @@ VUE_APP_TITLE = 汉邦唐消防训练基地
 # 网关地址
 VUE_APP_GATEWAY_URL="/dev-api"
 # UE4服务地址
-VUE_APP_PALYER_URL="172.16.0.77:8080"
+VUE_APP_PALYER_URL="192.168.1.66:8080"
 # 服务地址
 VUE_APP_BASE_API_URL="http://192.168.2.3:8081"
 # 服务前-- 请严格遵守格式  不允许换行
@@ -17,5 +17,3 @@ VUE_APP_ALL_MENU = false
 VUE_APP_REMOTES_URL="http://119.45.158.12/common/"
 # 当前应用部署地址
 VUE_APP_EXPOSES_URL=""
-# nginx路径
-PUB_PATH:'/trainingbase/'

.env.test

@@ -6,7 +6,7 @@ VUE_APP_TITLE = 汉邦唐消防训练基地
 # 网关地址
 VUE_APP_GATEWAY_URL="/dev-api"
 # UE4服务地址
-VUE_APP_PALYER_URL="172.16.0.77:8080"
+VUE_APP_PALYER_URL="192.168.1.66:8080"
 # 服务地址
 VUE_APP_BASE_API_URL="http://192.168.2.3:8081"
 # 服务前-- 请严格遵守格式  不允许换行

package.json

@@ -4,11 +4,7 @@
   "private": true,
   "scripts": {
     "serve": "vue-cli-service serve --mode development",
-    "local": "vue-cli-service serve --mode developmentLocal --port 8084",
-    "serveGY": "vue-cli-service serve --mode developmentGY",
     "build": "vue-cli-service build --mode production",
-    "buildProdLocal": "vue-cli-service build --mode prodLocal",
-    "buildProd": "vue-cli-service build --mode prod",
     "test": "vue-cli-service build --mode test",
     "lint": "vue-cli-service lint"
   },
@@ -22,7 +18,7 @@
     "echarts-wordcloud": "^2.1.0",
     "element-ui": "^2.15.13",
     "file-saver": "^2.0.5",
-    "hbt-common": "^0.0.6",
+    "hbt-common": "0.0.5",
     "jquery": "^3.6.4",
     "layui-layer": "^1.0.9",
     "mockjs": "^1.1.0",

src/assets/style/pageCommon.component.scss

@@ -174,7 +174,53 @@
     padding-top: 30px;
   }
 
+  .right-cycle-box-con {
+    margin-bottom: 30px;
 
+    .right-cycle-box {
+      background: url("~@/assets/img/env/cycle-bg.png") 50% 50% no-repeat;
+      width: 65px;
+      height: 65px;
+      background-size: cover;
+      text-align: center;
+      margin-right: 67px;
+      margin-bottom: 14px;
+
+      .con-style-top {
+        height: 50%;
+        line-height: 2.4;
+        font-size: 16px;
+        font-weight: bold;
+      }
+
+      .con-style-bottom {
+        height: 50%;
+        line-height: 2;
+        color: #BBBBBB;
+      }
+
+    }
+
+    &:nth-child(3n) {
+      .right-cycle-box {
+        margin-right: 0;
+      }
+    }
+
+    &:nth-child(n+4) {
+      margin-bottom: 0;
+    }
+
+    .word-ellipsis {
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      width: 64px;
+      color: #BBBBBB;
+      font-size: 12px;
+    }
+
+  }
 }
 
 .box-content {
@@ -305,6 +351,43 @@
 
 }
 
+@mixin imgStyle {
+  width: 28px;
+  height: 22px;
+  background-size: cover;
+  margin: 5px auto;
+}
+
+.formaldehydeExcessRate {
+  background: url("~@/assets/img/env/formaldehydeExcessRate.png") 50% 50% no-repeat;
+  @include imgStyle
+}
+
+.methanolExceedance {
+  background: url("~@/assets/img/env/methanolExceedance.png") 50% 50% no-repeat;
+  @include imgStyle
+}
+
+.NOExceedance {
+  background: url("~@/assets/img/env/NOExceedance.png") 50% 50% no-repeat;
+  @include imgStyle
+}
+
+
+.HCLExceedance {
+  background: url("~@/assets/img/env/HCLExceedance.png") 50% 50% no-repeat;
+  @include imgStyle
+}
+
+.BenzeneExceedance {
+  background: url("~@/assets/img/env/BenzeneExceedance.png") 50% 50% no-repeat;
+  @include imgStyle
+}
+
+.EthanolExceedance {
+  background: url("~@/assets/img/env/EthanolExceedance.png") 50% 50% no-repeat;
+  @include imgStyle
+}
 
 .env-left, .env-right {
   .card-box {
@@ -396,7 +479,15 @@
   flex: 1;
 }
 
+.right-pie-chart {
+  height: 230px;
+  background: url('~@/assets/img/bar_chart_bg.png') 35% 50% no-repeat;
+}
 
+.right-pie-chart-water {
+  height: 230px;
+  background: url('~@/assets/img/bar_chart_bg.png') 35% 50% no-repeat;
+}
 
 .margin-top-23 {
   margin-top: 23px;
@@ -742,13 +833,7 @@
 .font-size-14 {
   font-size: 14px;
 }
-.font-size-20 {
-  font-size: 20px;
 
-}
-.font-weight-normal{
-  font-weight: normal;
-}
 .risk-pie-chart {
   width: 48%;
   height: 146px;
@@ -1401,6 +1486,15 @@
   margin-top: 10px;
 }
 
+.energyRightTitle {
+  width: 332px;
+  height: 42px;
+  background: url("~@/assets/img/energy/energyTitle.png") no-repeat 50% 50%;
+  line-height: 42px;
+  font-size: 14px;
+  padding: 0 12px;
+
+}
 
 .center-box {
   position: absolute;
@@ -1408,6 +1502,13 @@
   display: flex;
   top: 0;
 
+  &-card-bg {
+    width: 264px;
+    height: 148px;
+    background: url("~@/assets/img/energy/energyCardBg.png") no-repeat 50% 50%;
+    padding: 8px 16px;
+  }
+
   &-card-title {
     font-size: 14px;
     text-align: center;
@@ -2136,6 +2237,12 @@ svg.loading-icon {
   height: 10px;
 }
 
+.person-icon {
+  width: 32px;
+  height: 32px;
+  background: url("~@/assets/img/env/count.png") no-repeat;
+  margin-right: 14px;
+}
 
 .radio-box {
   display: flex;
@@ -2670,496 +2777,4 @@ svg.loading-icon {
     margin-right: 6px;
   }
 }
-.tree-box{
-  width: 330px;
-  max-height: 300px;
-  overflow-y: auto;
-  padding: 14px;
-  background: rgba(0,0,0,0.5);
-  box-shadow: 0 10px 20px -10px #000000;
-  border-radius: 6px;
-  border: 1px solid;
-  //flex: 1;
-  border-image: linear-gradient(165deg, rgba(255, 255, 255, 0.94), rgba(255, 255, 255, 0)) 1 1;
-}
-
-.tree-line{
-
-  &.el-tree--highlight-current .el-tree-node>.el-tree-node__content:hover{
-    background: rgba(125, 174, 255, 0.3);
-  }
-
-  &.el-tree--highlight-current .el-tree-node.is-current>.el-tree-node__content{
-    background: rgba(125, 174, 255, 0.7);
-  }
-  &::before{
-    content: "";
-    height: 79%;
-    width: 1px;
-    position: absolute;
-    left: 23px;
-    top: 14px;
-    border-width: 1px;
-    border-left: 1px solid #ffffff;
-  }
-  & > div[role="treeitem"] {
-    padding-bottom: 10px;
-  }
-  .white{
-    color: #FFFFFF;
-    font-size: 14px;
-  }
-  .custom-tree-node{
-    position: relative;
-    left: 8px;
-    width: 100%;
-    .doc-style{
-      width: 5px;
-      height: 5px;
-      border-radius: 50%;
-      background-color: #FFFFFF;
-      position: absolute;
-      left: -11px;
-    }
-  }
-  .right-icon{
-    transition: all .3s linear;
-    position: relative;
-    left: -10px;
-  }
-  .sub-item{
-    padding-left: 16px;
-    &::before{
-      content: '';
-      width: 12px;
-      height: 20px;
-      position: absolute;
-      left: -3px;
-      top: 9px;
-      border-width: 1px;
-      //border-top: 1px solid #ffffff;
-    }
-    &::after{
-      content: "";
-      height: 130%;
-      width: 1px;
-      position: absolute;
-      left: -1px;
-      top: 0px;
-      border: none;
-    }
-  }
-  .is-expanded{
-    .sub-item{
-      padding-left: 8px;
-      &::before{
-        content: '';
-        width: 3px;
-        height: 20px;
-        position: absolute;
-        left: -3px;
-        top: 9px;
-        border-width: 1px;
-        //border-top: 1px solid #ffffff;
-      }
-      &::after{
-        content: "";
-        height: 100%;
-        width: 1px;
-        position: absolute;
-        left: -1px;
-        top: 10px;
-        border-width: 1px;
-        border-left: 1px solid #ffffff;
-      }
-    }
-    .sub-item-border-none{
-      &::after{
-        content: "";
-        height: 130%;
-        width: 1px;
-        position: absolute;
-        left: -1px;
-        top: 0px;
-        border: none;
-
-      }
-    }
-
-  }
-  div[role="treeitem"].is-expanded > div.el-tree-node__content > div > span:nth-child(2),
-  div[role="group"] div[role="treeitem"].is-expanded,
-  {
-    .right-icon{
-      transform: rotate(90deg);
-      transition: all .3s linear;
-    }
-  }
-
-  &.el-tree,.el-tree-node__content, .el-upload-list__item{
-    background: transparent;
-    &:hover,&:focus,&:active,&:visited{
-      background: transparent;
-
-    }
-  }
-  .el-tree-node:focus>.el-tree-node__content{
-    background: transparent;
-  }
-
-  .tree-level-1-icon{
-    width: 24px;
-    height: 24px;
-    background: #FFFFFF;
-    border-radius: 2px;
-    position: relative;
-    left: -12px;
-  }
-
-
-  margin-top:10px;
-  .el-tree-node {
-    position: relative;
-    color: black;
-    padding: 0;
-    padding-left: 10px; // 缩进量
-  }
-  .el-tree-node__children {
-    padding-left: 16px; // 缩进量
-  }
-
-  // 竖线
-  .el-tree-node::before {
-    content: "";
-    height: 100%;
-    width: 1px;
-    position: absolute;
-    left: -3px;
-    top: -13px;
-    border-width: 1px;
-    border-left: 1px solid #ffffff;
-  }
-  // 当前层最后一个节点的竖线高度固定
-  .el-tree-node:last-child::before {
-    height: 34px; // 可以自己调节到合适数值
-  }
-
-  // 横线
-  .el-tree-node::after {
-    content: "";
-    width: 27px;
-    //width: 16px;
-    height: 20px;
-    position: absolute;
-    left: -3px;
-    top: 20px;
-    border-width: 1px;
-    border-top: 1px solid #ffffff;
-    content: "";
-
-  }
-  // 去掉最顶层的虚线，放最下面样式才不会被上面的覆盖了
-  & > .el-tree-node::after {
-    border-top: none;
-  }
-  & > .el-tree-node::before {
-    border-left: none;
-  }
-
-  .el-tree-node__content{
-    padding-left:0 !important;
-    color:#444;
-    height: 40px;
-    // 树缩进样式
-    .el-icon-caret-right::before{
-      content: "";
-      width:14px;
-      height:14px;
-      background-size: 100% 100%;
-      border-radius: 3px;
-      display: inline-block;
-    }
-    .el-tree-node__expand-icon.expanded{
-      transform: rotate(0);
-    }
-    // 树展开样式
-    .el-tree-node__expand-icon.expanded::before{
-      content: "";
-      width:0;
-      height:0;
-      background-size: 100% 100%;
-      border-radius: 3px;
-      display: inline-block;
-    }
-    .el-tree-node__expand-icon.is-leaf::before{
-      content: "";
-    }
-    .el-icon-caret-right.is-leaf::before{
-      content: "";
-      display: none;
-    }
-    .custom-tree-node .file_class{
-      color: #ffb400;
-    }
-    .custom-tree-node .label{
-      margin-left:5px;
-    }
-    .custom-tree-node .no_children{
-      color: #aaa;
-    }
-  }
-  // 使用flex布局对custom-tree-node_body盒子进行排版
-  .custom-tree-node_body{
-    width:100%;
-    display: flex;
-    justify-content: space-between;
-    // margin-top:-3px;
-  }
-  .tree_form_left_tree_icon{
-    padding:0 3px;
-    font-size:16px;
-    color:#666;
-    i{
-      margin:0 4px;
-    }
-  }
-  .tree_form_left_tree_icon:hover{
-    cursor: pointer;
-  }
-  // 展开关闭的icon
-  .el-tree-node__expand-icon{
-    font-size: 16px;
-    padding: 0 3px;
-    // 叶子节点（无子节点）
-    &.is-leaf{
-      color: transparent;
-      // display: none; // 也可以去掉
-    }
-  }
-
-}
-.view-list{
-  &-item{
-    width: 330px;
-    height: 186px;
-    border-radius: 8px;
-    background-color: #1B6BEB;
-    position: relative;
-    margin-bottom: 20px;
-    &:last-child{
-      margin-bottom: 0;
-    }
-    &-title{
-      position: absolute;
-      bottom: 0;
-      border-radius: 0 0 8px 8px;
-      background: rgba(0,0,0,0.7);
-      height: 34px;
-      line-height: 34px;
-      width: 100%;
-    }
-
-    .cover {
-      top: 0;
-      width: 100%;
-      height: 100%;
-      text-align: center;
-      position: absolute;
-      background-color: rgba(0, 0, 0, 0.5);
-      opacity: 0;
-      cursor: pointer;
-    }
-
-    /* 鼠标hover,显示遮罩,设置过渡时间 */
-    .cover:hover  {
-      transition: all .4s;
-      opacity: 1;
-    }
-  }
-}
-.view-right-title{
-  font-size: 20px;
-  color: #FFFFFF;
-  padding: 20px 0;
-  border-bottom: 1px solid rgba(216,216,216,0.4);;
-}
-.sub-title{
-  font-size: 16px;
-  margin-bottom: 16px;
-  margin-top: 16px;
-}
-.text-con{
-  color: rgba(255, 255, 255, 0.6);
-  font-size: 14px;
-}
-.right-view-list{
-  height: 1px;
-  flex: 1;
-  overflow-y: auto;
-  @include scrollStyle(2px);
-}
-.right-view-item{
-  width: 330px;
-  height: 98px;
-  background: rgba(0,0,0,0.3);
-  border-radius: 8px;
-  border: 1px solid rgba(255,255,255,0.15);
-  padding-left: 3px;
-  margin-bottom: 10px;
-  cursor: pointer;
-  &:last-child{
-    margin-bottom: 0;
-  }
-  img{
-    margin-right: 12px;
-  }
-  p{
-    font-size: 16px;
-    padding: 0 0 10px 0;
-  }
-  .right-sub-text{
-    font-size: 12px;
-  }
-  .el-rate__icon{
-    margin-right: 0;
-  }
-}
-.manage-part{
-  .eq-number{
-    color: rgba(255, 255, 255, 0.6);
-  }
-  .white{
-    color: #FFFFFF;
-  }
-}
-@keyframes wave{
-  0%{
-    transform: translate(-50%,-50%) rotate(0deg);
-  }
-  100%{
-    transform: translate(-50%,-50%) rotate(360deg);
-  }
-}
-.block-box{
-  display: flex;
-  justify-content: space-around;
-  margin: 30px 0;
-  .block{
-    width: 104px;
-    height: 104px;
-    border:1px solid #7DAEFF;
-    border-radius: 50%;
-    .inner-block{
-      width: 90px;
-      height: 90px;
-      position: relative;
-      left: 6px;
-      top: 6px;
-      border:1px solid rgba($color:  #7DAEFF, $alpha: 0.2);
-      border-radius: 50%;
-      overflow: hidden;
-      color: rgba(255,255,255,0.8);
-      font-size: 12px;
-      line-height: 17px;
-      padding-top: 10px;
-      transform: rotate(180deg);
-      .full{
-        text-align: center;
-        transform: rotate(180deg);
-      }
-      .wave{
-        position: absolute;
-        width: 200%;
-        height: 200%;
-        top: 0;
-        left: 50%;
-        transform: translate(-50%,-50%);
-        background: rgba($color: #7DAEFF, $alpha: 0.2);
-        transition: top 2s;
-        animation: wave 5s linear infinite;
-        &.wave1{
-          border-radius: 30%;
-        }
-        &.wave2{
-          border-radius: 40%;
-        }
-      }
-      .wave.red{
-        background: rgba($color: #DD7171, $alpha: 0.2);
-      }
-      .count{
-        font-size: 20px;
-        line-height: 28px;
-        flex: none;
-        color: $font-color;
-        &.active{
-          color:#FFA900
-        }
-      }
-    }
-  }
-  .red{
-    border-color: #DD7171;
-    .red-2{
-      border-color: rgba(221, 113, 113, 0.2);
-    }
-  }
-
-
-}
-.manage-top-bg{
-  background: url("@/assets/img/home/manageTopBg.png") no-repeat 50% 50%;
-  width: 354px;
-  height: 104px;
-  h4{
-    text-align: center;
-    font-weight: normal;
-    padding-top: 5px;
-     & + div{
-      margin-top: 15px;
-    }
-  }
-}
-.close-style{
-  font-size: 14px;
-  cursor: pointer;
-}
-.energyRightTitle {
-  width: 332px;
-  height: 42px;
-  background: url("~@/assets/img/home/energyTitle.png") no-repeat 50% 50%;
-  line-height: 42px;
-  font-size: 14px;
-  padding: 0 12px;
-
-}
-.view-right{
-  @keyframes turnRound {
-    0%{
-      transform:rotate(0);
-    }
-    100%{
-      transform:rotate(360deg);
-    }
-  }
-  .flow-light-box{
-    overflow: hidden;
-    position: relative;
-    &::before{
-      content: "";
-      width: 400px;
-      height: 400px;
-      display: block;
-      flex: none;
-      background: conic-gradient(#F5F500 ,#F4FF00,#FF8600 ,#FF0000 ,rgba(255,255,255,0.83) ,transparent,transparent,transparent,transparent );
-      animation: turnRound 1.5s linear infinite;
-    }
-    .img-box{
-      inset: 2px;
-      position: absolute;
-      overflow: hidden;
-      background: #000;
-    }
-  }
-}
 

src/bootstrap.ts

@@ -4,8 +4,8 @@ import router from './router'
 import store from './store'
 import ElementUI from 'element-ui';
 import 'element-ui/lib/theme-chalk/index.css';
-import SvgComponent from "hbt-common/components/common/svg.component.vue"
+import SvgComponent from "hbt-common/components/svg.component.vue"
-import EchartsComponent from "hbt-common/components/common/echarts.component.vue"
+import EchartsComponent from "hbt-common/components/echarts.component.vue"
 import "@/assets/common/icons";
 import 'animate.css';
 import Mock from "mockjs"

src/components/home/left/homeLeft.component.html

@@ -73,10 +73,9 @@
     </div>
     <div class="box-content  margin-top-47">
         <title-component :imgSrc="imgSrc">
-            设施列表
+            告警列表
         </title-component>
         <warning-list-component class="margin-top-23" @getItem="showWaring"
-                                @changeClose="changeClose"
                                 :data-list="dataList"></warning-list-component>
     </div>
 </div>

src/components/home/left/homeLeft.component.ts

@@ -5,7 +5,6 @@ import WarningListComponent from "@/components/warningList.component.vue"
 import * as turf from '@turf/turf'
 import Mock from "mockjs"
 import moment from "moment"
-
 import("@/assets/style/pageCommon.component.scss")
 
 
@@ -24,82 +23,79 @@ export default class HomeLeftComponent extends Vue {
     imgSrc = require("@/assets/icons/png/env/env-title-icon.png");
 
     currentCompany = false
-    popObj: any = {
+    popObj:any = {
-        popTitle: '报警记录',
+        popTitle:'报警记录',
-        type: '',
+        type:'',
         title: '风险点异常',
         info: '',
         time: '',
-        address: '',
+        address:'',
         level: '',
-        typeName: "",
+        typeName:"",
-        reporter: "",
+        reporter:"",
-        tel: "",
+        tel:"",
-        position: [],
+        position:[],
-        content: "",
+        content:"",
-        typeId: "",
+        typeId:"",
-        id: ''
+        id:''
 
     }
-    typeList = [
+    typeList =[
         {
-            label: '气体泄露',
+            label:'气体泄露',
-            value: 'normal',
+            value:'normal',
-            level: 2,
+            level:2,
-            id: 1
+            id:1
-        }, {
+        },{
-            label: '火灾爆炸',
+            label:'火灾爆炸',
-            value: 'fire',
+            value:'fire',
-            level: 1,
+            level:1,
-            id: 2
+            id:2
-        }, {
+        },{
-            label: '气液泄露',
+            label:'气液泄露',
-            value: 'normal',
+            value:'normal',
-            level: 1,
+            level:1,
-            id: 3
+            id:3
-        }, {
+        },{
-            label: '安全事故',
+            label:'安全事故',
-            value: 'normal',
+            value:'normal',
-            level: 2,
+            level:2,
-            id: 4
+            id:4
-        }, {
+        },{
-            label: '自然灾害',
+            label:'自然灾害',
-            value: 'normal',
+            value:'normal',
-            level: 3,
+            level:3,
-            id: 5
+            id:5
         },
     ]
-
+    get dataList(){
-    get dataList() {
         return this.$store.state.eventList
     }
-
+    setData(val,type){
-    setData(val, type) {
+        if (type === 'typeName'){
-        if (type === 'typeName') {
+            const find = this.typeList.find(item=>item.id == val) as any
-            const find = this.typeList.find(item => item.id == val) as any
             this.popObj.level = find.level
             this.popObj.typeName = find.label
             this.popObj.title = find.label
             this.popObj.type = find.value
-        } else {
+        }else{
             this.popObj[type] = val
         }
 
     }
 
     //展示告警信息
-    showWaring(item) {
+    showWaring(item){
         this.getItem(Object.assign({
-            typeName: '人员聚集',
+            typeName:'人员聚集',
-            content: '人员踩踏事故预警',
+            content:'人员踩踏事故预警',
-            levelName: '二级',
+            levelName:'二级',
-            levelClass: 'level-2-text',
+            levelClass:'level-2-text',
-            levelClassIcon: 'level-2',
+            levelClassIcon:'level-2',
-            time: '2023年3月12日 13:56:00',
+            time:'2023年3月12日 13:56:00',
-            address: '工厂厂房',
+            address:'工厂厂房',
-            equipment: '5号监测设备',
+            reporter:'李四',
-            reporter: '李四',
+            tableHeader:[
-            /*tableHeader:[
                 {
                     prop:'name',
                     label:'摄像头名称'
@@ -137,12 +133,11 @@ export default class HomeLeftComponent extends Vue {
                     distance:'22',
                     name:'6号摄像头',
                 },
-            ]*/
+            ]
-        }, item))
+        },item))
     }
-
     //点击告警信息
-    @Emit('getItem')
+    @Emit()
     getItem(item) {
         // console.log('item', item)
     }
@@ -162,48 +157,45 @@ export default class HomeLeftComponent extends Vue {
         console.log(1)
     }
 
-    @Emit('changeClose')
     changeClose() {
         console.log(1)
     }
-
+    addManual(){
-    addManual() {
         this.currentCompany = true
         this.popObj = {
-            popTitle: '报警记录',
+            popTitle:'报警记录',
-            type: '',
+            type:'',
             title: '风险点异常',
             info: '',
             time: '',
-            address: '',
+            address:'',
             level: '',
-            typeName: "",
+            typeName:"",
-            reporter: "",
+            reporter:"",
-            tel: "",
+            tel:"",
-            position: [],
+            position:[],
-            content: "",
+            content:"",
-            typeId: "",
+            typeId:"",
-            id: ''
+            id:''
 
         }
     }
-
+    submitWaring(){
-    submitWaring() {
         this.popObj.id = Mock.mock("@id");
-        if (this.popObj.type === 'normal') {
+        if (this.popObj.type === 'normal'){
-            this.popObj.position = turf.randomPosition([
+            this.popObj.position=turf.randomPosition([
                 13312995.84,
                 4098177.2800000003,
                 13313096.96,
                 4098754.88,
             ]);
-        } else if (this.popObj.type === 'fire') {
+        }else if(this.popObj.type === 'fire'){
-            this.popObj.position = [13312990.72, 4098613.12, 0.51]
+            this.popObj.position= [13312990.72, 4098613.12, 0.51]
         }
-        this.popObj.time = moment().subtract(0, "days").format("YYYY-MM-DD HH:mm:ss")
+        this.popObj.time = moment().subtract(0,"days").format("YYYY-MM-DD HH:mm:ss")
 
-        this.$store.commit("upDateEventList", [this.popObj])
+        this.$store.commit("upDateEventList",[this.popObj])
-        this.currentCompany = false
+        this.currentCompany=false
     }
 }
 

src/components/home/right/chartData.js

@@ -98,12 +98,9 @@ export const lineChartData = function () {
         ],
 
         tooltip: {
-            trigger: 'item',
+            show: false,
-            backgroundColor:"rgba(0,0,0,0.6)",
+            alwaysShowContent: false,
-            borderWidth:0,
+            trigger: 'item'
-            textStyle:{
-                color:"rgba(255,255,255,0.8)",
-            },
         },
         grid: {
             x: 30,
@@ -114,23 +111,18 @@ export const lineChartData = function () {
     }
 }
 
-export const radarChartData = function () {
+export const roundChartData = function () {
     return {
-        tooltip: {
+        backgroundColor: "#0A2E5D",
-            trigger: 'item',
+        tooltip: {},
-            backgroundColor:"rgba(0,0,0,0.6)",
+
-            borderWidth:0,
-            textStyle:{
-                color:"rgba(255,255,255,0.8)",
-            },
-        },
         radar: {
-            radius: "70%", //大小
+            radius: "50%", //大小
-            nameGap: 10, // 图中工艺等字距离图的距离
+            nameGap: 20, // 图中工艺等字距离图的距离
             center: ["50%", "50%"], // 图的位置
             name: {
                 textStyle: {
-                    color: "rgba(255,255,255,0.8)",
+                    color: "rgba(101, 213, 255, 1)",
                     fontSize: 16
                 },
                 formatter: function(name) {
@@ -138,14 +130,15 @@ export const radarChartData = function () {
                 }
             },
             indicator: [
-                {"name":'1月',"max":"100"},
+                {"name":'社会稳定',"max":"100"},
-                {"name":'2月',"max":"100"},
+                {"name":'社会治安',"max":"100"},
-                {"name":'3月',"max":"100"},
+                {"name":'交通安全',"max":"100"},
-                {"name":'4月',"max":"100"},
+                {"name":'消防安全',"max":"100"},
-                {"name":'5月',"max":"100"},
+                {"name":'公共安全',"max":"100"},
             ],
             axisLine: {
                 lineStyle: {
+
                     color: "rgba(153, 409, 246, 0.2)"
                 },
                 show:true,
@@ -170,7 +163,7 @@ export const radarChartData = function () {
 
         series: [
             {
-                name: "物资统计",
+                name: "报警类型分析",
                 type: "radar",
                 symbol: "angle",
                 itemStyle: {
@@ -183,16 +176,16 @@ export const radarChartData = function () {
                         symbol: "circle",
                         symbolSize: 5,
                         value: [70,42,63,84,75,34],
-                        areaStyle: { color: "rgba(125,174,255,0.5)" },
+                        areaStyle: { color: "rgba(64, 205, 241, 0.2)" },
                         itemStyle: {
                             normal: {
                                 borderWidth:1,
-                                color: "#7FB0FF",
+                                color: "RGBA(0, 34, 66, 1)",
-                                borderColor: "#7FB0FF"
+                                borderColor: "rgba(146, 225, 255, 1)"
                             }
                         },
                         lineStyle: {
-                            color: "#7FB0FF",
+                            color: "rgba(146, 225, 255, 1)",
                             width: 1
                         }
                     }

src/components/home/right/confirm.component.vue

@@ -0,0 +1,289 @@
+<template>
+  <div>
+    <div class="d-flex align-items-center margin-bottom-20">
+      <span class="cycle-icon blue"></span>
+      <span class="blue-text">确认警情</span>
+      <span class="link"></span>
+      <span class="line-gray"></span>
+      <span class="round-style"></span>
+      <span>事故研判</span>
+    </div>
+    <div class="info-content-text">
+      <span class="label">预警类型：</span>
+      <span class="text">{{info.typeName}}</span>
+    </div>
+    <div class="info-content-text">
+      <span class="label">告警内容：</span>
+      <span class="text">{{info.content}}</span>
+    </div>
+    <div class="info-content-text">
+      <span class="label">告警级别：</span>
+      <span class="text" :class="info.levelClass">{{info.levelName}}</span>
+      <i class="cycle-icon" :class="info.levelClassIcon"></i>
+    </div>
+    <div class="info-content-text">
+      <span class="label">上报时间：</span>
+      <span class="text">{{info.time}}</span>
+    </div>
+    <div class="info-content-text cursor-pointer">
+      <span class="label">上报位置：</span>
+      <span class="text">{{info.address}}</span>
+      <i @click="changePoint(info)" class="position-icon"></i>
+    </div>
+    <div class="info-content-text cursor-pointer">
+      <span class="label">上报人：</span>
+      <span class="text">{{info.reporter}}</span>
+      <span class="phone-btn d-flex align-items-center is-justify-space-center"><img src="~@/assets/img/phone-gray.png" alt="">一健联系</span>
+    </div>
+
+    <div class="info-content-text cursor-pointer">
+      <span class="label">附近摄像头：</span>
+    </div>
+    <div class="plan-head">
+      <span class="span-item">摄像头名称</span>
+      <span class="span-item">类型</span>
+      <span class="span-item">距离 (m)</span>
+    </div>
+    <div class="plan-head-tbody">
+      <div class="tr" :key="i" v-for="(item,i) in info.tableData">
+        <span class="span-item">{{ item.name }}</span>
+        <span class="span-item">{{ item.type }}</span>
+        <span class="span-item">{{ item.distance }}</span>
+      </div>
+
+    </div>
+    <div class="d-flex margin-top-30 is-justify-space-center confirm-btn-group">
+      <div class="confirm-btn deal-btn" @click="showJudgmentFlag">事故研判</div>
+      <div class="confirm-btn" @click="hidePop">消警</div>
+    </div>
+    <!-- 报警记录弹窗 -->
+    <div class="pop-box right-position " v-if="showDealMsg">
+      <div class="close" @click="showDealMsg=false">×</div>
+      <div class="border l-t"></div>
+      <div class="border r-t"></div>
+      <div class="border r-b"></div>
+      <div class="border l-b"></div>
+      <div class="title">处理意见</div>
+      <el-form class="margin-top-23" label-width="100px">
+
+        <el-form-item label="处理建议：">
+          <el-input  :rows="5"  v-model="popObj.content" class="item-radius-style" type="textarea" placeholder="请输入事件描述"></el-input>
+        </el-form-item>
+        <el-form-item label="执行人：">
+          <el-select v-model="popObj.typeId"  class="item-radius-style">
+            <el-option v-for="(item,i) in typeList" :key="i" :label="item.label" :value="item.id"></el-option>
+          </el-select>
+        </el-form-item>
+      </el-form>
+      <div class="d-flex btn-group align-items-center">
+        <div class="btn-style" @click="hideConfirm">确认</div>
+      </div>
+    </div>
+  </div>
+</template>
+<script lang="ts">
+import {Component, Emit, Prop, Vue, Watch} from 'vue-property-decorator';
+
+@Component
+export default class ConfirmComponent extends Vue {
+  //传入的报警信息详情
+  @Prop({default: function () {
+      return {
+        type:'人员聚集',
+        content:'人员踩踏事故预警',
+        levelName:'二级',
+        levelClass:'level-2-text',
+        levelClassIcon:'level-2',
+        time:'2023年3月12日 13:56:00',
+        position:'工厂厂房',
+        reporter:'李四',
+        tableHeader:[
+          {
+            prop:'name',
+            label:'摄像头名称'
+          },{
+            prop:'type',
+            label:'类型'
+          },{
+            prop:'distance',
+            label:'距离 (m)'
+          }
+        ],
+        tableData : [
+          {
+            type:'简型摄像头',
+            distance:'10',
+            name:'1号摄像头',
+          },{
+            type:'简型摄像头',
+            distance:'20',
+            name:'2号摄像头',
+          },{
+            type:'简型摄像头',
+            distance:'22',
+            name:'3号摄像头',
+          },{
+            type:'简型摄像头',
+            distance:'10',
+            name:'4号摄像头',
+          },{
+            type:'简型摄像头',
+            distance:'20',
+            name:'5号摄像头',
+          },{
+            type:'简型摄像头',
+            distance:'22',
+            name:'6号摄像头',
+          },
+        ]
+      }
+    } }) info!: any[];
+  showDealMsg = false
+  popObj:any = {
+    popTitle:'报警记录',
+    type:'',
+    title: '风险点异常',
+    info: '',
+    time: '',
+    address:'',
+    level: '',
+    typeName:"",
+    reporter:"",
+    tel:"",
+    position:[],
+    content:"",
+    typeId:"",
+    id:''
+
+  }
+  typeList = [
+    {
+      label:'张三',
+      value:'张三',
+    },{
+      label:'李四',
+      value:'李四',
+    },{
+      label:'王五',
+      value:'王五',
+    }
+  ]
+  //表格添加类
+  tableRowClassName({row, rowIndex}) {
+    if (rowIndex === 1) {
+      return 'blue-row';
+    }
+    if (rowIndex === 2) {
+      return 'yellow-row';
+    }
+    if (rowIndex === 3) {
+      return 'orange-row';
+    }
+    if (rowIndex === 4) {
+      return 'red-row';
+    }
+
+    return '';
+  }
+
+  //处理信息
+  @Emit('showJudgmentFlag')
+  showJudgmentFlag() {
+//
+  }
+  //点击点位
+  @Emit('changePoint')
+  changePoint(item) {
+    console.log(item)
+//
+  }
+  hidePop(){
+    this.showDealMsg = true
+  }
+  //处理信息
+  @Emit('hideConfirm')
+  hideConfirm(){
+    this.showDealMsg = false
+//
+  }
+
+
+}
+</script>
+<style lang="scss" scoped>
+
+.font-size-12 {
+  font-size: 12px;
+}
+
+.tb-info-style {
+  margin-bottom: 20px;
+}
+.confirm-btn{
+  width: 140px;
+  height: 34px;
+  background: transparent;
+  border-radius: 17px;
+  border: 1px solid #FFFFFF;
+  text-align: center;
+  line-height: 32px;
+  cursor: pointer;
+}
+.deal-btn{
+  background: rgba(255,255,255,0.15);
+  margin-right: 20px;
+}
+.confirm-btn-group{
+  width: 100%;
+  text-align: center;
+}
+.blue{
+  background: #7DAEFF;
+}
+.blue-text{
+  color: #7DAEFF;
+}
+.overview-container .pop-box {
+  left: -170%;
+  ::v-deep{
+    .el-form-item__label{
+      color: #FFFFFF;
+    }
+    .item-radius-style {
+      .el-input__inner {
+        background: rgba(0, 0, 0, 0.5);
+        border-radius: 20px;
+        border: 1px solid rgba(255, 255, 255, 0.6);
+        color: #d7d7d7;
+      }
+
+      .el-textarea__inner {
+        color: #d7d7d7;
+        background: rgba(0, 0, 0, 0.5);
+        border-radius: 5px;
+        border: 1px solid rgba(255, 255, 255, 0.6);
+      }
+
+    }
+  }
+  .btn-group {
+    justify-content: space-evenly;
+
+    .btn-style {
+      width: 96px;
+      height: 34px;
+      background: rgba(255, 255, 255, 0.15);
+      border-radius: 17px;
+      border: 1px solid #FFFFFF;
+      text-align: center;
+      line-height: 34px;
+      cursor: pointer;
+    }
+
+    .cancel {
+      background: rgba(255, 255, 255, 0);
+    }
+  }
+
+}
+</style>

src/components/home/right/homeRight.component.html

@@ -3,8 +3,7 @@
         <title-component :imgSrc="imgSrc">
             能耗统计
         </title-component>
-        <hbt-echarts className="line-chart-emergency" :options="option"
+        <hbt-echarts className="line-chart-emergency" :options="option" @onChartInit="getEcharts($event,'lineChart')"></hbt-echarts>
-                     @onChartInit="getEcharts($event,'lineChart')"></hbt-echarts>
     </div>
     <div class="box-content flex-15 margin-top-20 device-box">
         <title-component :imgSrc="imgSrc">
@@ -36,8 +35,79 @@
         <title-component :imgSrc="imgSrc">
             物资盘点
         </title-component>
-        <hbt-echarts className="line-chart-emergency" :options="radarData"
+        <div class="charts-box">
-                     @onChartInit="getEcharts($event,'radar')"></hbt-echarts>
+            <div class="text">
+                <div class="count">{{count}}%</div>
+                物资完备度
+            </div>
+            <el-progress type="circle" :width="200" define-back-color="rgba(255,255,255,0.16)" :format="textFormat" :stroke-width="20" :percentage="count" :color="colors"></el-progress>
+        </div>
+    </div>
+    <!-- 开启应急演练弹窗 -->
+    <div class="pop-box right-position" v-if="showPop">
+        <div class="close" @click="showPop=false">×</div>
+        <div class="border l-t"></div>
+        <div class="border r-t"></div>
+        <div class="border r-b"></div>
+        <div class="border l-b"></div>
+        <div class="title">{{popTitle}}</div>
+        <el-form class="margin-top-23" label-width="90px">
+            <el-form-item label="事件类型：">
+                <el-select v-model="popObj.typeId" filterable @change="val=>setData(val,'typeName')" class="item-radius-style">
+                    <el-option v-for="(item,i) in typeList" :key="i" :label="item.label" :value="item.id"></el-option>
+                </el-select>
+            </el-form-item>
+            <el-form-item label="事件等级：">
+                <el-select v-model="popObj.level" filterable class="item-radius-style">
+                    <el-option v-for="(item,i) in levelList" :key="i" :label="item.label" :value="item.id"></el-option>
+                </el-select>
+            </el-form-item>
+            <el-form-item label="演练计划：">
+                <el-select v-model="popObj.plan" filterable class="item-radius-style">
+                    <el-option v-for="(item,i) in planList" :key="i" :label="item.label" :value="item.value"></el-option>
+                </el-select>
+            </el-form-item>
+            <el-form-item label="关联预案：">
+                <el-select v-model="popObj.linkPlan" filterable  class="item-radius-style">
+                    <el-option v-for="(item,i) in linkPlanList" :key="i" :label="item.label" :value="item.value"></el-option>
+                </el-select>
+            </el-form-item>
+        </el-form>
+        <div class="d-flex btn-group">
+            <div class="btn-style" @click="submitWaring">确认</div>
+            <div class="btn-style cancel" @click="showPop=false">取消</div>
+        </div>
+    </div>
+    <!-- 开启应急演练弹窗 -->
+    <div class="pop-box right-log-position" v-if="showLogPop">
+        <div class="close" @click="showLogPop=false">×</div>
+        <div class="border l-t"></div>
+        <div class="border r-t"></div>
+        <div class="border r-b"></div>
+        <div class="border l-b"></div>
+        <div class="title">报警记录</div>
+       <div class="head">
+           <span>告警类型</span>
+           <span>告警内容</span>
+           <span>报警内容</span>
+           <span>上报人员</span>
+           <span>事故地点</span>
+           <span>处理意见</span>
+       </div>
+        <div class="tbody">
+            <div class="tr" :key="i" v-for="(item,i) in tableData">
+                <span>{{item.type}}</span>
+                <span>{{item.content}}</span>
+                <span>{{item.alarm}}</span>
+                <span>{{item.reporter}}</span>
+                <span>{{item.address}}</span>
+                <span>{{item.suggestion}}</span>
+            </div>
+        </div>
+        <el-pagination
+                background
+                layout="prev, pager, next"
+                :total="1000">
+        </el-pagination>
     </div>
-
 </div>

src/components/home/right/homeRight.component.ts

@@ -1,6 +1,6 @@
 import {Component, Emit, Vue} from 'vue-property-decorator';
 import template from "./homeRight.component.html"
-import {lineChartData,radarChartData} from "./chartData";
+import {lineChartData} from "./chartData";
 import TitleComponent from "@/components/title.component.vue"
 import * as echarts from 'echarts';
 
@@ -25,11 +25,15 @@ export default class HomeRightComponent extends Vue {
     option: any = {}
     //折线图实例
     lineChart: any = {}
-    //雷达图数据
+    // 计数
-    radarData: any = {}
+    count = 0
-    //折线图实例
+    public colors = [
-    radar: any = {}
+        {color: '#FF5959', percentage: 20},
-
+        {color: '#FFA900', percentage: 40},
+        {color: '#FADFA4', percentage: 60},
+        {color: '#C9FFD7', percentage: 80},
+        {color: '#76c893', percentage: 100}
+    ];
     showPop = false
     showLogPop = false
     popTitle = '开启演练'
@@ -212,17 +216,42 @@ export default class HomeRightComponent extends Vue {
             suggestion:'立即救援',
         },
     ]
+    //开始演练
+    startDrill(){
+        this.showPop = true
+    }
+    //报警记录
+    showLog(){
+        this.showLogPop = true
+    }
+    submitWaring(){
+        this.showPop = false
+        this.showPlan()
+    }
+    @Emit('showPlan')
+    showPlan(){
+        //
+    }
+    public textFormat(data){
+        return ""
+    }
+    public getCount(data){
+        this.count = 0;
+        setTimeout(()=>{
+            const timer = setInterval(()=>{
+                if(this.count<data){
+                    this.count++
+                }else{
+                    clearInterval(timer)
+                }
+            },20)
+        },400)
 
-
+    }
     //获取图表实例
     getEcharts(e, type) {
         this[type] = e
-        if (type === 'lineChart'){
         this.initLineData()
-        }else{
-            this.radarData = radarChartData()
-        }
-
     }
     setData(val,type){
         if (type === 'typeName'){
@@ -246,6 +275,7 @@ export default class HomeRightComponent extends Vue {
         this.timerForLineData = setInterval(() => {
             this.lineChart.clear()
             this.lineChart.setOption(this.option)
+            this.getCount(this.count)
         }, 5000)
     }
 
@@ -257,6 +287,7 @@ export default class HomeRightComponent extends Vue {
     }
 
     mounted() {
+        this.getCount(70)
         this.autoChangeLineData()
         window.addEventListener("resize", this.resize);
     }