faat（新版首页）

src/views/business-analysis/topology/index.vue

@@ -29,12 +29,11 @@
                         <el-button>x-ray</el-button>
                       </div>
                     </div>
-                    <div class="card-box">
+                    <!-- <div class="card-box">
                       <h6 class="h6">应用黄金指标(RED)</h6>
                       <div class="Apply_r">
                         <el-row type="flex" justify="space-between" :gutter="10" style="margin-bottom:18px;margin-top: 8px;">
                           <el-col :span="6" :lg="6" :md="6" :sm="6">
-                            <!-- <el-col :span="12" :lg="12" :md="12" :sm="12"> -->
                             <div class="Apply_r_list">
                               <p class="value">
                                 {{ (item.apdex==undefined?0:parseFloat(item.apdex).toFixed(2)) }} <img class="arrow" :src="item.apdexFlag==true?g_up:red_down">
@@ -97,7 +96,7 @@
                         </el-table>
                         <div class="look-more" @click="goPath(&quot;/business-analysis/analysis/index&quot;)">查看更多<i class="el-icon-d-arrow-right" /></div>
                       </div>
-                    </div>
+                    </div> -->
                   </div>
                 </div>
                 <div class="flex_box">
@@ -105,11 +104,11 @@
                     <div class="left_side g" />
                   </el-tooltip>
                   <div class="right_side">
-                    <div class="service-box">
+                    <!-- <div class="service-box">
                       <h6 class="h6">服务性能</h6>
                       <div id="serviceBox" class="serviceBox" />
                       <div class="look-more" @click="goPath(&quot;/service/service/index&quot;)">查看更多<i class="el-icon-d-arrow-right" /></div>
-                    </div>
+                    </div> -->
                     <div class="interface-box">
                       <h6 class="h6">慢接口TOP5</h6>
                       <el-table
@@ -119,20 +118,11 @@
                       >
                         <el-table-column header-align="left" label="接口名称" prop="name" align="left" :show-overflow-tooltip="true" />
                         <el-table-column header-align="left" label="所属服务" prop="service_name" align="left" :show-overflow-tooltip="true" />
-                        <!-- <el-table-column header-align="left" label="Route" prop="route" align="left" :show-overflow-tooltip="true">
-                              <template slot-scope="scope">
-                                <span>{{scope.row.route}}</span>
-                              </template>
-                            </el-table-column> -->
+
                         <el-table-column header-align="left" label="请求方法" prop="method" align="left" :show-overflow-tooltip="true" />
-                        <!-- <el-table-column header-align="center" label="错误率" prop="error_rate" width='80' align="center" :show-overflow-tooltip="true">
-                              <template slot-scope="scope">
-                                <el-tag>{{ scope.row.rpm == undefined?0:Number(scope.row.error_rate).toFixed(2)}}</el-tag>
-                              </template>
-                            </el-table-column> -->
+
                         <el-table-column header-align="center" label="延迟(ms)" prop="duration" align="center">
                           <template slot-scope="scope">
-                            <!-- <el-tag>{{ scope.row.duration!= undefined?Number(scope.row.duration).toFixed(2):0}}</el-tag> -->
                             <el-tag v-if="scope.row.duration>=2000" type="danger">{{ Number(scope.row.duration).toFixed(2) }}</el-tag>
                             <el-tag v-if="scope.row.duration<2000" type="info">{{ Number(scope.row.duration).toFixed(2) }}</el-tag>
                           </template>
@@ -325,9 +315,9 @@ export default {
           this.slowBinsTopQuery.start_time = newValue.startTime
           this.slowBinsTopQuery.end_time = newValue.endTime
           this.queryScore.interval = newValue.interval
-          this.getAppsScore() // 应用黄金指标(RED)
+          // this.getAppsScore() // 应用黄金指标(RED)
           this.getdbslowtop() // 慢查询TOP5
-          this.getServiceBar() // 服务性能
+          // this.getServiceBar() // 服务性能
 
           this.getslowTopUrlMapping() // 慢接口TOP5
           this.getSlowInterfaceFn()// 慢业务TOP5
@@ -343,14 +333,12 @@ export default {
           }
 
           this.topoUrl = ''
-          console.log('watch----if000-----this.changeQuery-', newValue.startTime, newValue.endTime)
 
           this.changeQuery('/business-analysis/topology/index', newValue.startTime, newValue.endTime, live)
           this.topoUrl = '/ui/index.html'
         } else {
           live = false
           this.topoUrl = ''
-          console.log('watch----else-----this.changeQuery-', newValue.startTime, newValue.endTime)
 
           this.changeQuery('/business-analysis/topology/index', newValue.startTime, newValue.endTime, live)
           this.topoUrl = '/ui/index.html'
@@ -404,9 +392,9 @@ export default {
         this.dbslowtopQuery.app_alias = newValue
         this.appItem = storage.get('appsItem')
         this.slowTopQuery.app_id = this.appItem.id
-        this.getAppsScore() // 应用黄金指标(RED)
+        // this.getAppsScore() // 应用黄金指标(RED)
         this.getdbslowtop() // 慢查询TOP5
-        this.getServiceBar() // 服务性能
+        // this.getServiceBar() // 服务性能
         this.getslowTopUrlMapping() // 慢接口TOP5
         this.getSlowInterfaceFn() // 慢业务TOP5
       },
@@ -427,7 +415,7 @@ export default {
       this.serviceBarQuery.app_alias = this.appItem.alias
       this.serviceBarQuery.start_time = start_time
       this.serviceBarQuery.end_time = end_time
-      this.getServiceBar() // 服务性能
+      // this.getServiceBar() // 服务性能
       this.slowTopQuery.app_id = this.appItem.id
       this.slowTopQuery.start_time = start_time
       this.slowTopQuery.end_time = end_time
@@ -437,7 +425,7 @@ export default {
       this.dbslowtopQuery.start_time = start_time
       this.dbslowtopQuery.end_time = end_time
 
-      this.getAppsScore() // 应用黄金指标(RED)
+      // this.getAppsScore() // 应用黄金指标(RED)
       this.getdbslowtop() // 慢查询TOP5
       this.changeQuery('/business-analysis/topology/index', start_time, end_time, this.appItem.live)
       this.getSlowInterfaceFn() // 慢业务TOP5
@@ -522,8 +510,8 @@ export default {
     },
     Refresh(timeOut) {
       this.timer = setInterval(() => {
-        this.getServiceBar() // 服务性能
-        this.getAppsScore() // 应用黄金指标(RED)
+        // this.getServiceBar() // 服务性能
+        // this.getAppsScore() // 应用黄金指标(RED)
         this.getslowTopUrlMapping() // 慢接口TOP5
         this.getdbslowtop() // 慢查询TOP5
         this.getSlowInterfaceFn() // 慢业务TOP5

src/views/global-monitoring/index.vue

@@ -337,7 +337,7 @@ export default {
 
             if (newVal[k].errorRate != undefined && oldVal[m].errorRate != undefined) {
               if (parseFloat(newVal[k].errorRate) > parseFloat(oldVal[m].errorRate)) {
-                newVal[k].aerrorRateFlag = true
+                newVal[k].errorRateFlag = true
               } else {
                 newVal[k].errorRateFlag = false
               }
@@ -694,7 +694,7 @@ export default {
       ]
     },
     async goDialog(item) {
-      const res = await getApdex(this.appAlias)
+      const res = await getApdex(item.alias)
       if (res && res.code == 200) {
         this.tempForm = res.data
         this.dialogFlag = true

src/views/index/components/calculationModel.vue

@@ -0,0 +1,140 @@
+<template>
+  <div>
+    <el-dialog  title="可用性计算模型" :visible.sync="visibleDialogFlag" width="50%" @close="close()">
+      <el-form ref="form" :model="tempForm" :rules="csatRules" label-width="120px">
+        <el-form-item label="满意样本延迟" prop="csat_a">
+          <el-input v-model="tempForm.csat_a" type="number" placeholder="请输入满意样本延迟" @blur="changeNumber('csat_a', tempForm.csat_a)" />
+        </el-form-item>
+        <el-form-item label="容忍样本延迟" prop="csat_b">
+          <el-input v-model="tempForm.csat_b" type="number" placeholder="请输入容忍样本延迟" @blur="changeNumber('csat_b',tempForm.csat_b)" />
+        </el-form-item>
+        <el-form-item label="不可容忍延迟" prop="csat_c">
+          <el-input v-model="tempForm.csat_c" type="number" placeholder="请输入不可容忍延迟" @blur="changeNumber('csat_c',tempForm.csat_c)" />
+        </el-form-item>
+        <div class="flex-div">
+          <div>Apdex = </div>
+          <div style="margin-left:5px;">
+            <div>1 X（小于<span class="blue-font">{{ tempForm.csat_a|| '满意样本延迟' }}</span>秒的请求数） + 0.5 X （大于<span class="blue-font">{{ tempForm.csat_a || '满意样本延迟' }}</span>秒且小于<span class="blue-font">{{ tempForm.csat_b || '容忍样本延迟' }}</span> 秒的请求数）</div>
+            <div class="fract-line" />
+            <div style="text-align: center;">请求总数</div>
+          </div>
+        </div>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button type="primary" @click="submitApdex">确 定</el-button>
+        <el-button @click="dialogCancel">取 消</el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+<script>
+import {getApdex, modifyApdex} from '@/api/apps'
+export default {
+  data() {
+    return {
+      tempForm: {
+        csat_a: null,
+        csat_b: null,
+        csat_c: null
+      },
+      csatRules: {
+        csat_a: [
+          { required: true, message: '满意样本延迟不能为空', trigger: 'blur' }
+        ],
+        csat_b: [
+          { required: true, message: '容忍样本不能延迟为空', trigger: 'blur' }
+        ],
+        csat_c: [
+          { required: true, message: '不可容忍样本延迟不能为空', trigger: 'blur' }
+        ]
+      },
+      visibleDialogFlag: false
+    }
+  },
+  props: {
+    dialogFlag: {
+      type:Boolean,
+      default: false
+    },
+    alias: {
+      type: String,
+      default: ''
+    }
+  },
+  watch: {
+
+    dialogFlag: {
+      handler(newVal, oldVal) {
+        this.visibleDialogFlag = newVal
+      },
+      deep:true,
+      immediate: true,
+    }
+
+  },
+  created(){
+    this.getData()
+  },
+  methods:{
+    async submitApdex() {
+      const pars = {
+        'csat_a': this.tempForm.csat_a,
+        'csat_b': this.tempForm.csat_b,
+        'csat_c': this.tempForm.csat_c
+      }
+      if (Number(this.tempForm.csat_a) > Number(this.tempForm.csat_b)) {
+        this.$message.error('请修改满意样本延迟')
+        return
+      }
+      if (Number(this.tempForm.csat_b) > Number(this.tempForm.csat_c)) {
+        this.$message.error('请修改容忍样本延迟')
+        return
+      }
+      const res = await modifyApdex(this.alias, pars)
+      this.$emit('dialogCancel')
+    },
+    dialogCancel() {
+      this.tempForm = {
+        csat_a: null,
+        csat_b: null,
+        csat_c: null
+      }
+      this.$emit('dialogCancel')
+    },
+    close() {
+      this.$emit('dialogCancel')
+    },
+    async getData() {
+      const res = await getApdex(this.alias)
+      if (res && res.code == 200) {
+        this.tempForm = res.data
+      }
+    },
+    changeNumber(target, value) {
+      if (value < 0) {
+        // this.$message.error('请填写正数')
+        this.tempForm[target] = 0
+        return
+      }
+      if (value) this.tempForm[target] = Number(value).toFixed(1)
+
+      if (target == 'csat_c' && Number(this.tempForm[target]) < Number(this.tempForm['csat_b'])) {
+        this.$message.error('请修改可容忍延迟')
+      }
+      if (target == 'csat_b') {
+        if (Number(this.tempForm[target]) < Number(this.tempForm['csat_a'])) {
+          this.$message.error('请修改满意样本延迟')
+        } else if (Number(this.tempForm[target]) > Number(this.tempForm['csat_c']) && Number(this.tempForm['csat_c']) > 0) {
+          this.$message.error('请修改可容忍延迟')
+        }
+      }
+      if (target == 'csat_a') {
+        if (Number(this.tempForm[target]) > Number(this.tempForm['csat_b']) && Number(this.tempForm['csat_b'] > 0)) {
+          this.$message.error('请修改满意样本延迟')
+        }
+      }
+    },
+  }
+}
+</script>
+<style lang="scss" scoped></style>

src/views/index/css/index1.css

@@ -0,0 +1,352 @@
+.gc{
+  background:#00B54F;
+}
+.bc{
+  background: #60B4F9;
+}
+.grc{
+  background: #8B8B8B;
+}
+.oc{
+  background: #F1A657;
+}
+.rc{
+  background: #EA463D;
+}
+.circle{
+  display: inline-block;
+  width: 0.1rem;
+  height: 0.1rem;
+  color:#00B54F;
+  border-radius: 50%;
+  margin-right: 0.05rem;
+}
+.title_img{
+  display: inline-block;
+  width: 0.15rem;
+  height: 0.175rem;
+  margin-right:0.2rem;
+  vertical-align: middle;
+}
+.margintop20{
+  margin-top: 20px;
+}
+.section_2 {
+  width: 100%;
+  height: 100%;
+}
+
+
+.group_2 {
+  box-shadow: 0px 6px 12px 0px rgba(0, 0, 0, 0.12);
+  height: 1.5rem;
+  width: 49%;
+  border-radius: 12px;
+  background: white;
+}
+
+
+.image_1 {
+  width: 120px;
+  height: 120px;
+  margin-right: 36px;
+  margin-bottom: -40px;
+}
+.padding20{
+  padding:20px;
+}
+.section_5{
+  width: 52%;
+  /* height: 100%; */
+  margin-right: 10px;
+}
+.text-wrapper_1 {
+  flex:1;
+  border:1px solid rgba(255, 136, 0, 1);
+  padding: .125rem;
+  border-radius: 12px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}
+
+.text_2 {
+  overflow-wrap: break-word;
+  color: rgba(28, 28, 40, 1);
+  font-size: 0.225rem;
+  font-weight: 500;
+  white-space: nowrap;
+  margin-bottom: .125rem;;
+  /* line-height: 25px; */
+}
+
+.text_3 {
+  overflow-wrap: break-word;
+  color: rgba(255, 136, 0, 1);
+  font-size: 0.45rem;
+  font-weight: 500;
+  white-space: nowrap;
+  /* line-height: 50px; */
+}
+
+.greenColor{
+  color: rgba(6, 194, 112, 1) !important;
+  border-color:rgba(6, 194, 112, 1) !important;
+}
+.group_6 {
+  width: 100%;
+  padding: 0 20px 20px 20px;
+  /* height: 100%; */
+}
+
+.group_7 {
+  box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.24);
+  background-color: rgba(255, 255, 255, 1);
+  border-radius: 12px;
+  /* height: 584px; */
+  width: 75%;
+  margin-right: 20px;
+  padding:20px;
+}
+.group_8{
+  flex:1;
+}
+
+.list-items_1 {
+  box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.25);
+  background-color: rgba(255, 255, 255, 1);
+  border-radius: 12px;
+  width: 100%;
+  /* height: 164px; */
+  margin: 0 20px 20px 0;
+}
+
+/* .list-items_1:nth-child(3n) {
+  margin-right: 0;
+} */
+.list-items_1:nth-last-child(-n + 3) {
+  margin-bottom: 0;
+}
+
+.box_1 {
+  background-color: rgba(224, 231, 236, 1);
+  border-radius: 12px 12px 0px 0px;
+  position: relative;
+  width: 100%;
+  height: 0.5rem;
+  padding: 0 8px;
+}
+.marginBttom10{
+  margin-bottom: 10px;
+}
+.arrow{
+  width:0.1rem;
+  height:0.125rem;
+  margin-left:0.1rem;
+}
+
+
+.marginbotom0{
+  margin-bottom: 0 !important;
+}
+.marginBotom20{
+  margin-bottom: 20px;
+}
+.box_2 {
+  width:100%;
+  height: 2rem;
+  cursor: pointer;
+  padding: 0 10px;
+}
+
+.box_3 {
+  background-color: rgba(228, 232, 239, 1);
+  border-radius: 6px;
+  width: 100%;
+  height: 0.6rem;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  margin-bottom: 10px;
+  margin-right: 10px;
+}
+
+
+
+.text_8 {
+  overflow-wrap: break-word;
+  color: rgba(87, 98, 113, 1);
+  font-size: .15rem;
+  font-weight: 500;
+  white-space: nowrap;
+  line-height: 15px;
+  margin-top: 3px;
+}
+.group_12 {
+  box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.24);
+  background-color: rgba(255, 255, 255, 1);
+  border-radius: 12px;
+  width: 100%;
+  /* height: 5rem; */
+  min-height: 4rem;
+  justify-content: flex-center;
+  padding:20px;
+}
+
+.text-wrapper_4 {
+  width: 100%;
+  height: 25px;
+  margin-bottom: 20px;
+}
+
+.warning-box{
+  overflow-y:hidden;
+  height: 89%;
+}
+
+.text-wrapper_5 {
+  background-color: rgba(255, 247, 232, 1);
+  border-radius: 4px;
+  /* height: 0.2rem; */
+  height: calc(100% / 7);
+  margin-top: 2px;
+  width: 0.5rem;
+  margin-right: 10px;
+  text-align: center;
+  line-height: 0.2rem;
+}
+
+.text_17 {
+  width: 30px;
+  height: 10px;
+  overflow-wrap: break-word;
+  color: rgba(255, 125, 0, 1);
+  font-size: 12px;
+  font-family: SourceHanSansCN-Medium;
+  font-weight: 500;
+  text-align: left;
+  white-space: nowrap;
+}
+
+.text_18 {
+  width: 232px;
+  overflow-wrap: break-word;
+  color: rgba(85, 87, 112, 1);
+  font-size: 0.175rem;
+  font-family: PingFangSC-Medium;
+  font-weight: 500;
+  text-align: left;
+  white-space: nowrap;
+  line-height: 20px;
+}
+
+
+.text-wrapper_error{
+  background: #FFEDEE;
+  border-radius: 4px;
+  height: 0.2rem;
+  line-height: 0.2rem;
+  text-align: center;
+  margin-top: 2px;
+  width: 0.5rem;
+  margin-right: 10px;
+}
+
+.text_21 {
+  width: 30px;
+  height: 10px;
+  overflow-wrap: break-word;
+  color: rgba(245, 63, 63, 1);
+  background: #FFEDEE;
+  font-size: 12px;
+  font-weight: 500;
+  text-align: center;
+  white-space: nowrap;
+  margin: 3px 0 0 5px;
+}
+.text_31 {
+  width: 72px;
+  overflow-wrap: break-word;
+  color: rgba(28, 28, 40, 1);
+  font-size: 18px;
+  font-weight: 500;
+  text-align: left;
+  white-space: nowrap;
+}
+
+.text_32 {
+  width: 56px;
+  height: 20px;
+  overflow-wrap: break-word;
+  color: rgba(0, 99, 247, 1);
+  font-size: 14px;
+  font-family: PingFangSC-Medium;
+  font-weight: 500;
+  text-align: center;
+  white-space: nowrap;
+  line-height: 20px;
+  margin-top: 3px;
+}
+
+
+.title{
+  font-weight: 500;
+  font-size: 0.175rem;
+  color: #1D2129;
+}
+.apply_l{
+  width: 100%;
+  height: 95%;
+  min-width: 1.8rem;
+  margin-top:10px;
+}
+.echartsbox{
+  width: 47%;
+  height: 100%;
+}
+.flex1{
+  flex: 1;
+}
+.baseline{
+  align-items: baseline;
+}
+.label_3 {
+  width: 36px;
+  height: 36px;
+  margin-right: 10px;
+}
+
+.flex-row{
+  display: flex;
+  align-items: center;
+}
+.flex-wrap{
+  display: flex;
+  flex-wrap: wrap;
+}
+.justify-between{
+  justify-content: space-between;
+}
+.width100{
+  width:100%;
+}
+.img-box{
+  width: 2rem;
+  height: 0.8rem;
+  background: #FFFFFF;
+  box-shadow: 0px 0px 8px 0px rgba(14,41,73,0.16);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-bottom: 20px;
+  border-radius: 6px;
+}
+.text-group{
+  font-weight: bold;
+  font-size: 12px;
+  color: #0E2949;
+  line-height: 17px;
+  letter-spacing: 1px;
+}

src/views/index/index.vue

@@ -493,10 +493,13 @@ export default {
       this.reset()
     },
     toggle() {
-      // this.$router.push({
-      //   path: '/monitoring/index'
-      // }).catch(err => err)
       this.openMonitor = !this.openMonitor
+      this.$router.push({
+        path: '/homeNewIndex',
+        query:{
+          servicesNumber: this.statusData.services
+        }
+      })
     },
     async querySearchAsync(queryString, cb, type) {
       this.suppilerListQuery.url = this.stateurl.trim()
@@ -520,7 +523,6 @@ export default {
     handleSelect(item) {
       // 处理选中项
       const obj = this.appList.filter(m => m.alias === item.AppAlias)[0]
-      console.log('item..----', item.AppAlias,  item.$index)
       storage.set('appsItem', obj)
       const rowItem = {
         method: item.Method,

src/views/index/newIndex.vue

@@ -22,25 +22,367 @@
         </el-dropdown>
       </div>
     </div>
-    <div class="ob-home-warpper">
-      <img src="./image/home.svg" @click="handelClick">
+
+
+    <div class="section_2 ">
+      <div class="ob-home-warpper">
+        <div class="flex-row justify-between width100">
+          <div class="group_2 flex-row padding20" v-for="item in sunList">
+            <img
+            class="image_1"
+            referrerpolicy="no-referrer"
+            :src="item.icon"
+            />
+            <div class="text-wrapper_1"  :class="item.label == '服务部署包总量'? 'greenColor': ''">
+              <span class="text_2">{{item.label}}</span>
+              <span class="text_3" :class="item.label == '服务部署包总量'? 'greenColor': ''">{{item.value}}</span>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="group_6 flex-row justify-between">
+        <div v-if="isLoading" v-loading="isLoading" class="loading-overlay"></div>
+        <div v-else class="flex-row">
+          <div class="group_7">
+          <el-row  class="flex-wrap" v-if="appsList.length>0"  type="flex" justify="start" :gutter="35">
+          <el-col
+            v-for="item in appsList"
+            :key="item.id"
+            :span="8"
+            :lg="8"
+            :md="12"
+            :sm="24"
+            :xs="24"
+            style="margin-bottom:0.4375rem"
+          >
+          <div class="list-items_1 " >
+            <div class="box_1 flex-row justify-between">
+              <div class="title">
+                  <span
+                    class="circle"
+                    :class="item.apdex>=0.94?'gc'
+                      :(item.apdex>=0.85&&item.apdex<0.94)?'bc'
+                        :(item.apdex>=0.7&&item.apdex<0.85)?'grc'
+                          :(item.apdex>=0.5&&item.apdex<0.7)?'oc'
+                            :'rc'"
+                  />{{ item.name }}
+                </div>
+                <div class="flex-row ">
+                  <div style="cursor: pointer;" @click="handelClick(item)">
+                    <el-badge ref="badgebox" :value="item.exception_num" class="badge">
+                      <img class="title_img" :src="bellpin">
+                    </el-badge>
+                  </div>
+                  <el-dropdown style="cursor: pointer;" @command="goDialog(item)"  trigger="click">
+                    <div style="width:0.15rem;text-align: center"><img class="title_img" :src="moreImg" style="margin-right:0;width:0.05rem;"></div>
+                    <el-dropdown-menu slot="dropdown">
+                      <el-dropdown-item common="a">可用性计算模型</el-dropdown-item>
+                    </el-dropdown-menu>
+                  </el-dropdown>
+                </div>
+            </div>
+            <div class="box_2 flex-row" @click="handelClick(item)">
+              <div class="echartsbox">
+                <div ref="gauge" class="apply_l " />
+              </div>
+              <div class="flex-row" style="height: 100%; width:48%;">
+                <div class="section_5  ">
+                  <div class="box_3">
+                    <div class="baseline">
+                      <span class="text_8">{{ (item.apdex==undefined?0:parseFloat(item.apdex).toFixed(2)) }}</span>
+                      <img class="arrow" :src="item.apdexFlag==true?g_up:red_down">
+                    </div>
+                    <span class="text_8" >Apdex</span>
+                  </div>
+                  <div class="box_3 marginbotom0">
+                    <div class="baseline">
+                      <span class="text_8">{{ item.rate==undefined?0:parseFloat(item.rate).toFixed(2) }}</span>
+                      <img class="arrow" :src="item.rateFlag==true?g_up:red_down">
+                    </div>
+                    <span class="text_8" > 吞吐率(rpm)</span>
+                  </div>
+                </div>
+                <div class="section_5  justify-between">
+                  <div class="box_3">
+                    <div class="baseline">
+                      <span class="text_8">{{ item.latency==undefined?0:parseFloat(item.latency).toFixed(2) }}</span>
+                      <img class="arrow" :src="item.latencyFlag==true?red_up:g_down">
+                    </div>
+                    <span class="text_8" >响应时间(ms)</span>
+                  </div>
+                  <div class="box_3 marginbotom0">
+                    <div class="baseline">
+                      <span class="text_8">{{ item.errorRate==undefined?0:parseFloat(item.errorRate).toFixed(2) }}</span>
+                      <img class="arrow" :src="item.rateFlag==true?g_up:red_down">
+                    </div>
+                    <span  class="text_8" >错误率(%)</span>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+          </el-col>
+          </el-row>
+        </div>
+
+        <div class="group_8">
+          <div class="group_12 ">
+            <div class="width100 flex-row justify-between marginBotom20">
+              <span class="text_31">异常告警</span>
+              <!-- <span class="text_32">查看更多</span> -->
+            </div>
+            <div class="warning-box">
+              <div class="marginBttom10 flex-row " v-for="item in warningList">
+                <div :class="item.type == 1 ? 'text-wrapper_5' : 'text-wrapper_error'" ><span class="text_17">{{item.label}}</span></div>
+                <span class="text_18">{{item.text}}</span>
+              </div>
+            </div>
+          </div>
+          <div class="group_12 margintop20">
+            <div class="width100 flex-row justify-between">
+              <span class="text_31">帮助文档</span>
+              <span class="text_32">查看更多</span>
+            </div>
+            <div class="block_4 ">
+              <div class="img-box" v-for="item in productList">
+                <img
+                  class="label_3"
+                  referrerpolicy="no-referrer"
+                  :src="item.icon"
+                />
+                <span class="text-group">{{item.label}}</span>
+              </div>
+            </div>
+          </div>
+        </div>
+        </div>
+
+
+      </div>
     </div>
+
+
+
+
+
     <div class="ob-home-back" @click="toggle2()">
       <i class="iconfont icon-qiehuan1" style="margin-right:5px" />
       新旧版本切换
     </div>
+    <CalculationModel v-if="dialogFlag" :dialogFlag="dialogFlag" :alias="itemAlias" @dialogCancel="dialogCancel()"/>
   </div>
 </template>
 <script>
+import { listApps, appsScore } from '@/api/apps'
+import { eventNums } from '@/api/event'
 import storage from '@/utils/storage'
 import { mapGetters } from 'vuex'
+import CalculationModel from './components/calculationModel'
 export default {
   data() {
-    return {}
+    return {
+      sunList: [
+        {
+          label: '应用系统总量',
+          value: 0 ,
+          icon: require('@/assets/home/img1.png')
+        },
+        {
+          label: '服务部署包总量',
+          value: this.servicesNumber,
+          icon: require('@/assets/home/img2.png')
+        }
+      ],
+      appsList: [],
+      queryNums: {
+        start_time: this.$store.state.time.globalTimes.startTime,
+        end_time: this.$store.state.time.globalTimes.endTime,
+        pageSize: 10,
+        pageIndex: 1,
+        app_ids: 0
+      },
+      queryScore: {
+        interval: 5,
+        req_applist: []
+      },
+      bellpin: require('../../assets/apply/bellpin.png'),
+      moreImg: require('../../assets/apply/more.png'),
+      green_down: require('../../assets/apply/green_down.png'),
+      green_up: require('../../assets/apply/green_up.png'),
+      g_down: require('../../assets/apply/g_down.jpg'),
+      g_up: require('../../assets/apply/g_up.jpg'),
+      red_down: require('../../assets/apply/red_down.png'),
+      red_up: require('../../assets/apply/red_up.png'),
+      orange_down: require('../../assets/apply/orange_down.png'),
+      orange_up: require('../../assets/apply/orange_up.png'),
+      errorBg: require('../../assets/home/error-bg.svg'),
+      greenBg: require('../../assets/home/green-bg.svg'),
+      warnBg: require('../../assets/home/warn-bg.svg'),
+      productList: [{
+        icon: require('../../assets/home/gaikuo.png'),
+        label: '产品概括'
+      }, {
+        icon: require('../../assets/home/wendang.png'),
+        label: '接口文档'
+      }],
+      dialogFlag: false,
+      itemAlias: '',
+      times: {
+        start_time: 0,
+        end_time: 0,
+        live: false
+      },
+      isLoading: false,
+      warningList: [{
+        type: 1,
+        text: 'invoke(Request request,Resapcb…',
+        label: '已警告'
+      }, {
+        type: 1,
+        text: 'processShoppingOrdeString orb…',
+        label: '已警告'
+      }, {
+        type: 2,
+        text: 'http.status.code',
+        label: '已报错'
+      }, {
+        type: 2,
+        text: 'Servlet Process',
+        label: '已报错'
+      },  {
+        type: 2,
+        text: 'Servlet Process',
+        label: '已报错'
+      },  {
+        type: 2,
+        text: 'invoke(Request request,Resapc…',
+        label: '已报错'
+      }, {
+        type: 2,
+        text: 'invoke(Request request,Resapc…',
+        label: '已报错'
+      },  {
+        type: 1,
+        text: 'Servlet Process',
+        label: '已警告'
+      },  {
+        type: 1,
+        text: 'processShoppingOrdeString orb…',
+        label: '已警告'
+      }, {
+        type: 2,
+        text: 'Servlet Process',
+        label: '已报错'
+      },  {
+        type: 2,
+        text: 'http.status.code',
+        label: '已报错'
+      }, {
+        type: 1,
+        text: 'processShoppingOrdeString orb…',
+        label: '已警告'
+      }, {
+        type: 2,
+        text: 'http.status.code',
+        label: '已报错'
+      }, {
+        type: 1,
+        text: 'processShoppingOrdeString orb…',
+        label: '已警告'
+      },]
+    }
+  },
+  components: {
+    CalculationModel
   },
   computed: {
     ...mapGetters(['name'])
   },
+  watch: {
+    '$store.state.time.globalTimes': {
+      handler(newValue, oldValue) {
+        if (newValue) {
+          this.times.start_time = newValue.startTime
+          this.times.end_time = newValue.endTime
+          this.queryScore.interval = newValue.interval
+          this.queryNums.start_time = newValue.startTime
+          this.queryNums.end_time = newValue.startTime
+          this.getList()
+          if (newValue.timeOut) {
+            if (newValue.timeOut == 1) {
+              this.times.live = false
+              clearInterval(this.appTimer)
+            } else {
+              this.times.live = true
+              clearInterval(this.appTimer)
+              this.Refresh(newValue.timeOut)
+            }
+          }
+        }
+      },
+      deep: true
+    },
+    appsList: {
+      handler(newVal, oldVal) {
+        this.sunList.filter((item)=>item.label == '应用系统总量')[0].value = newVal.length || 0
+        for (let k = 0; k < newVal.length; k++) {
+          for (let m = 0; m < oldVal.length; m++) {
+            if (newVal[k].apdex != undefined && oldVal[m].apdex != undefined) {
+              if (parseFloat(newVal[k].apdex) > parseFloat(oldVal[m].apdex)) {
+                newVal[k].apdexFlag = true
+              } else {
+                newVal[k].apdexFlag = false
+              }
+            }
+            if (newVal[k].latency != undefined && oldVal[m].latency != undefined) {
+              if (parseFloat(newVal[k].latency) > parseFloat(oldVal[m].latency)) {
+                newVal[k].latencyFlag = true
+              } else {
+                newVal[k].latencyFlag = false
+              }
+            }
+
+            if (newVal[k].rate != undefined && oldVal[m].rate != undefined) {
+              if (parseFloat(newVal[k].rate) > parseFloat(oldVal[m].rate)) {
+                newVal[k].rateFlag = true
+              } else {
+                newVal[k].rateFlag = false
+              }
+            }
+
+            if (newVal[k].errorRate != undefined && oldVal[m].errorRate != undefined) {
+              if (parseFloat(newVal[k].errorRate) > parseFloat(oldVal[m].errorRate)) {
+                newVal[k].errorRateFlag = true
+              } else {
+                newVal[k].errorRateFlag = false
+              }
+            }
+          }
+        }
+
+        if (newVal) {
+          this.appsList = newVal
+          setTimeout(() => {
+            this.draw_gauge()
+          }, 1000)
+        }
+
+      },
+      deep: true
+    }
+  },
+  created(){
+    const item = this.sunList.filter((item)=>item.label == '服务部署包总量')[0]
+    item.value = this.$route.query.servicesNumber
+    this.getList()
+  },
+  mounted(){
+
+
+  },
+  beforeDestroy() {
+    clearInterval(this.appTimer)
+  },
   methods: {
     async logout() {
       this.$confirm('确定注销并退出系统吗？', '提示', {
@@ -53,28 +395,7 @@ export default {
         })
       })
     },
-    handelClick() {
-      const obj = {
-        alias: 'UNSET',
-        contractInfo: '李雷、韩梅梅',
-        contractPhone: '18723927661',
-        createBy: 1,
-        createdAt: '2023-09-25T17:37:04.583+08:00',
-        desc: '参与制定相关事件规范',
-        end_time: 1718174283,
-        id: 1,
-        imgUrl: '',
-        live: false,
-        name: '企业级气象服务中心',
-        start_time: 1718173983,
-        updateBy: 1,
-        updatedAt: '2024-04-09T11:33:33.205+08:00'
-      }
-      storage.set('appsItem', obj)
-      this.$router.push({
-        path: '/business-analysis/runningTopology/index'
-      })
-    },
+
     toggle() {
       this.$router.push({
         path: '/home'
@@ -87,11 +408,287 @@ export default {
           openMonitor: true
         }
       })
-    }
+    },
+    // 获取所有应用
+    getList() {
+      this.isLoading = true
+      listApps({ pageIndex: 0, pageSize: 200 }).then(
+        res => {
+          const req_applist = []
+          const app_ids = []
+          if (res.code == 200) {
+            const arr = res.data.list
+            res.data.list.map((item) => {
+              req_applist.push({ app_alias: item.alias })
+              app_ids.push(item.id)
+            })
+            this.queryNums.app_ids = app_ids.join(',')
+            this.queryScore.req_applist = req_applist
+            if (req_applist.length > 0) {
+              appsScore(this.queryScore).then(res => {
+                // const lists= storage.get('lists')
+                if (res.code == 200) {
+                  if (res.data.scores != null) {
+                    for (let i = 0; i < arr.length; i++) {
+                      for (let j = 0; j < res.data.scores.length; j++) {
+                        if (arr[i].alias == res.data.scores[j].app_alias) {
+                          arr[i] = Object.assign({}, arr[i], res.data.scores[j])
+                        }
+                      }
+                    }
+                    setTimeout(() => {
+                      this.draw_gauge()
+                    }, 1000)
+                    eventNums(this.queryNums).then((res) => {
+                      if (res.code == 200) {
+                        if (res.data.list.length != 0) {
+                          for (let i = 0; i < arr.length; i++) {
+                            for (let j = 0; j < res.data.list.length; j++) {
+                              if (arr[i].id == res.data.list[j].app_id) {
+                                arr[i] = Object.assign({}, arr[i], res.data.list[j])
+                              } else {
+                                arr[i].exception_num = undefined
+                              }
+                            }
+                          }
+                        }
+                      }
+                      this.appsList = arr
+                      this.isLoading = false
+
+                      this.$nextTick(()=>{
+                        const offsetHeight = document.querySelector('.group_7').offsetHeight - 25
+                        const rightDom = document.querySelectorAll('.group_12')
+                        rightDom.forEach((ss) => {
+                          ss.style.height = offsetHeight/2 + 'px'
+                        })
+                      })
+
+                    })
+                  }
+                }
+              })
+            }
+          }
+        }
+      )
+    },
+    draw_gauge() {
+      var myEchart = this.$refs.gauge
+      // 获取当前屏幕的宽度
+      const screenWidth = window.screen.width;
+
+      // 获取当前屏幕的高度
+      const screenHeight = window.screen.height;
+      console.log('screenWidth----', screenWidth)
+      console.log('screenHeight----', screenHeight)
+      let coord = []
+      let radius = ''
+      if (screenWidth == 1920) {
+        coord = [
+          "47%",
+          "45%",
+        ]
+        radius =  "79%"
+      } else if (screenWidth <=1440) {
+        radius =  "78%"
+        coord = [
+          "46%",
+          "44%",
+        ]
+      } else {
+        coord = [
+          "47%",
+          "44%",
+        ]
+        radius =  "78%"
+      }
+
+      if (myEchart && myEchart.length > 0) {
+        for (var i = 0; i < myEchart.length; i++) {
+          var myChart = this.$echarts5.getInstanceByDom(myEchart[i])
+
+          if (myChart == null) {
+            myChart = this.$echarts5.init(myEchart[i])
+          }
+          // 配置项
+          let option = {
+            // 背景图片设置
+            graphic: [
+              {
+                type: "image",
+
+                z: -10,
+                bounding: "raw",
+                rotation: 0, // 旋转角度，可根据需要调整
+                origin: (50, 50), // 中心点坐标，可以根据实际情况修改
+                // scale: (0.2, 0.2), // 缩放比例
+                style: {
+                  // 背景图路径
+                  image: this.getBgImg(this.appsList[i].apdex),
+                  opacity: 1,
+                  width: myChart._dom.offsetHeight - 20,  // 修改背景图片的宽度
+                  height: myChart._dom.offsetHeight -20  // 修改背景图片的高度
+                },
+              },
+            ],
+            series: [
+              {
+                type: "gauge",
+                startAngle: -122,
+                endAngle: -45,
+                radius: radius,
+                center: coord, // 圆心坐标,
+                pointer: {
+                  show: false,
+                },
+                itemStyle: {
+                  normal: {
+                    color: {
+                      type: "linear",
+                      x: 0,
+                      y: 0,
+                      x2: 0,
+                      y2: 1,
+                      colorStops: [
+                        {
+                          offset: 0,
+                          color: this.getColorForValue(this.appsList[i].apdex, '0'), // 0% 处的颜色
+                        },
+                        {
+                          offset: 0.5,
+                          color: this.getColorForValue(this.appsList[i].apdex, '0.5'), // 0% 处的颜色
+                        },
+                        {
+                          offset: 1,
+                          color: this.getColorForValue(this.appsList[i].apdex, '1'), // 100% 处的颜色
+                        },
+                      ],
+                      global: false,
+                    },
+                    borderWidth: 4,
+                    labelLine: {
+                      show: false,
+                    }
+                  },
+                },
+                progress: {
+                  show: true,
+                  overlap: false,
+                  roundCap: true,
+                  clip: false,
+                  itemStyle: {
+                    borderWidth: 1,
+                  },
+                },
+                axisLine: {
+                  show: false,
+                },
+                splitLine: {
+                  show: false,
+                  distance: 0,
+                  length: 10,
+                },
+                axisTick: {
+                  show: false,
+                },
+                axisLabel: {
+                  show: false,
+                  distance: 50,
+                },
+                data: [
+                  {
+                    value: (this.appsList[i].apdex == undefined || 0) ? 0 : ((parseFloat((this.appsList[i].apdex)).toFixed(2)) * 100)-1,
+                    detail: {
+                      valueAnimation: true,
+                      offsetCenter: ['0%', '0%']
+                    }
+                  }
+                ],
+                detail: {
+                  fontSize: 18,
+                  color: 'inherit',
+                  borderColor: 'inherit',
+                  formatter: '{value}%',
+                  animation:true
+                }
+              },
+            ],
+          }
+
+
+          myChart.setOption(option, true)
+        }
+      }
+    },
+    getBgImg(apdex){
+      if (apdex == undefined || apdex == null) {
+        return this.errorBg
+      }
+      return apdex <= 0.5 ? this.errorBg: (apdex > 0.5 &&  apdex< 0.9 ? this.warnBg : this.greenBg)
+    },
+    getColorForValue(value, type){
+      let redObj = {
+        '0': '#F8B402',
+        '0.5': '#FF5C76',
+        '1':'#FF1011'
+      }
+      let greenObj = {
+        '0': '#66FFFF',
+        '0.5': '#00C5FF',
+        '1': '#0EFF79'
+      }
+      let warnObj = {
+        '0': '#5BFFBD',
+        '0.5': '#FADB3D',
+        '1': '#FF6B00'
+      }
+      if (value <=0.5 || value == undefined || value == null){// 红色
+        return redObj[type]
+      } else if (value > 0.5 && value < 0.9){
+        return warnObj[type]
+      } else if(value>=0.9){
+        return greenObj[type]
+      }
+
+    },
+    goDialog(item){
+      this.itemAlias = item.alias
+      this.dialogFlag = true
+    },
+    dialogCancel(){
+      this.dialogFlag = false
+    },
+    Refresh(timeOut) {
+      this.appTimer = setInterval(() => {
+        this.getList()
+      }, timeOut)
+    },
+    handelClick(item) {
+      const start_time = this.$store.state.time.globalTimes.startTime
+      const end_time = this.$store.state.time.globalTimes.endTime
+      const live = this.times.live
+      this.$router.push({
+        path: '/business-analysis/topology/index',
+        query: {
+          id: item.id,
+          app_alias: item.alias,
+          start_time,
+          end_time,
+          item: item,
+          live: live
+        }
+      })
+      // item.start_time = this.times.start_time
+      // item.end_time = this.times.end_time
+      item.live = this.times.live
+      storage.set('appsItem', item)
+    },
   }
 }
 </script>
 <style lang="scss" scoped>
+@import "./css/index1.css";
 .ob-home-content{
   width: 100%;
   height: 100%;
@@ -107,12 +704,8 @@ export default {
     cursor: pointer;
   }
   .ob-home-warpper{
-    display: flex;
+    padding:20px;
     width:100%;
-    img{
-      width: 100%;
-      cursor: pointer;
-    }
   }
   .ob-home-topnav{
     width:100%;
@@ -144,5 +737,15 @@ export default {
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
   }
+  .block_4 {
+    width: 100%;
+    height: 92%;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    background: url("../../assets/home/wendangbg.png") no-repeat;
+    background-size: contain;
+    background-position: right bottom;
+  }
 }
 </style>

src/views/latency/components/TopoTree.vue

@@ -1,6 +1,33 @@
 <template>
   <div style="position:relative;">
     <div :id="topoId" class="container" />
+    <el-card class="legend">
+      <div >
+        <h2 style="margin-top:0">图例</h2>
+        <!-- <div class="listwrap">
+          <span class="value" style="color:#31a354">24.88%</span>
+          <span class="lable">延迟占比</span>
+        </div> -->
+        <div class="listwrap">
+          <span class="value">
+            <el-progress :percentage="100" status="success" :show-text="false" />
+          </span>
+          <span class="lable">请求正常</span>
+        </div>
+        <div class="listwrap">
+          <span class="value">
+            <el-progress :percentage="100" status="warning" :show-text="false" />
+          </span>
+          <span class="lable">高延迟</span>
+        </div>
+        <div class="listwrap">
+          <span class="value">
+            <el-progress :percentage="100" status="exception" :show-text="false" />
+          </span>
+          <span class="lable">存在异常</span>
+        </div>
+      </div>
+    </el-card>
     <el-dialog
       :visible.sync="networkOpen"
       :fullscreen="true"
@@ -1264,4 +1291,23 @@ export default {
     text-align: right;
   }
 }
-</style>>
+.legend{
+  position: absolute;
+  left:0px;
+  bottom:30px;
+  z-index: 1001;
+  transition: all .3s;
+}
+.listwrap{
+  color:#666;
+  span{
+    display: inline-block;
+    padding:4px;
+  }
+  .value{
+    width:80px;
+    box-sizing: border-box;
+    padding-right: 10px;
+  }
+}
+</style>

src/views/latency/index.vue

@@ -734,11 +734,11 @@
         <div v-if="num == 1" id="legend" class="legend" :style="{left:left}">
           <el-card>
             <div>
-              <h2>图例</h2>
-              <div class="listwrap">
+              <h2 style="margin-top:0">图例</h2>
+              <!-- <div class="listwrap">
                 <span class="value" style="color:#31a354">24.88%</span>
                 <span class="lable">延迟占比</span>
-              </div>
+              </div> -->
               <div class="listwrap">
                 <span class="value">
                   <el-progress :percentage="100" status="success" :show-text="false" />