feat:更改配置文件

# Conflicts:
#	package.json
#	src/views/base.component.ts
#	src/views/overview.component.ts

.env.development

@@ -6,7 +6,7 @@ VUE_APP_TITLE = 汉邦唐消防训练基地
 # 网关地址
 VUE_APP_GATEWAY_URL="/dev-api"
 # UE4服务地址
-VUE_APP_PALYER_URL="192.168.1.66:8080"
+VUE_APP_PALYER_URL="172.16.0.77: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=""
+VUE_APP_EXPOSES_URL="http://192.168.2.72:8081/"

.env.developmentGY

@@ -0,0 +1,19 @@
+
+#开发环境
+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

@@ -0,0 +1,19 @@
+
+#开发环境
+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

@@ -0,0 +1,21 @@
+
+#开发环境
+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

@@ -0,0 +1,21 @@
+
+#开发环境
+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="192.168.1.66:8080"
+VUE_APP_PALYER_URL="172.16.0.77:8080"
 # 服务地址
 VUE_APP_BASE_API_URL="http://192.168.2.3:8081"
 # 服务前-- 请严格遵守格式  不允许换行
@@ -17,3 +17,5 @@ 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="192.168.1.66:8080"
+VUE_APP_PALYER_URL="172.16.0.77:8080"
 # 服务地址
 VUE_APP_BASE_API_URL="http://192.168.2.3:8081"
 # 服务前-- 请严格遵守格式  不允许换行

package.json

@@ -4,7 +4,11 @@
   "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"
   },
@@ -18,7 +22,7 @@
     "echarts-wordcloud": "^2.1.0",
     "element-ui": "^2.15.13",
     "file-saver": "^2.0.5",
-    "hbt-common": "0.0.5",
+    "hbt-common": "^0.0.6",
     "jquery": "^3.6.4",
     "layui-layer": "^1.0.9",
     "mockjs": "^1.1.0",

src/assets/style/pageCommon.component.scss

@@ -174,53 +174,7 @@
     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 {
@@ -351,43 +305,6 @@
 
 }
 
-@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 {
@@ -479,15 +396,7 @@
   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;
@@ -833,7 +742,13 @@
 .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;
@@ -1486,15 +1401,6 @@
   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;
@@ -1502,13 +1408,6 @@
   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;
@@ -2237,12 +2136,6 @@ 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;
@@ -2777,4 +2670,496 @@ 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/svg.component.vue"
-import EchartsComponent from "hbt-common/components/echarts.component.vue"
+import SvgComponent from "hbt-common/components/common/svg.component.vue"
+import EchartsComponent from "hbt-common/components/common/echarts.component.vue"
 import "@/assets/common/icons";
 import 'animate.css';
 import Mock from "mockjs"

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

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

src/components/home/right/chartData.js

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

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

@@ -1,289 +0,0 @@
-<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,7 +3,8 @@
         <title-component :imgSrc="imgSrc">
             能耗统计
         </title-component>
-        <hbt-echarts className="line-chart-emergency" :options="option" @onChartInit="getEcharts($event,'lineChart')"></hbt-echarts>
+        <hbt-echarts className="line-chart-emergency" :options="option"
+                     @onChartInit="getEcharts($event,'lineChart')"></hbt-echarts>
     </div>
     <div class="box-content flex-15 margin-top-20 device-box">
         <title-component :imgSrc="imgSrc">
@@ -13,7 +14,7 @@
             <div class="d-flex align-items-center">
                 <img src="~@/assets/img/home/security-equipment.png" alt="">
                 <span>安防设备</span>
-                </div>
+            </div>
             <span>100<span class="grayColor">/300</span></span>
         </div>
         <div class="energyRightTitle d-flex is-justify-space-between margin-top-10">
@@ -35,79 +36,8 @@
         <title-component :imgSrc="imgSrc">
             物资盘点
         </title-component>
-        <div class="charts-box">
-            <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>
+        <hbt-echarts className="line-chart-emergency" :options="radarData"
+                     @onChartInit="getEcharts($event,'radar')"></hbt-echarts>
     </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} from "./chartData";
+import {lineChartData,radarChartData} from "./chartData";
 import TitleComponent from "@/components/title.component.vue"
 import * as echarts from 'echarts';
 
@@ -25,15 +25,11 @@ export default class HomeRightComponent extends Vue {
     option: any = {}
     //折线图实例
     lineChart: any = {}
-    // 计数
-    count = 0
-    public colors = [
-        {color: '#FF5959', percentage: 20},
-        {color: '#FFA900', percentage: 40},
-        {color: '#FADFA4', percentage: 60},
-        {color: '#C9FFD7', percentage: 80},
-        {color: '#76c893', percentage: 100}
-    ];
+    //雷达图数据
+    radarData: any = {}
+    //折线图实例
+    radar: any = {}
+
     showPop = false
     showLogPop = false
     popTitle = '开启演练'
@@ -216,42 +212,17 @@ 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
-        this.initLineData()
+        if (type === 'lineChart'){
+            this.initLineData()
+        }else{
+            this.radarData = radarChartData()
+        }
+
     }
     setData(val,type){
         if (type === 'typeName'){
@@ -275,7 +246,6 @@ export default class HomeRightComponent extends Vue {
         this.timerForLineData = setInterval(() => {
             this.lineChart.clear()
             this.lineChart.setOption(this.option)
-            this.getCount(this.count)
         }, 5000)
     }
 
@@ -287,7 +257,6 @@ export default class HomeRightComponent extends Vue {
     }
 
     mounted() {
-        this.getCount(70)
         this.autoChangeLineData()
         window.addEventListener("resize", this.resize);
     }