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

<template>
  <BasicLayout>
    <template #wrapper>
      <el-card class="box-card" style="flex:1;">
        <div class="container" :class="collapsed==true?&quot;collapsed&quot;:&quot;&quot;">
          <div class="box left-box">
            <div id="btn-box" class="btn-box" @click="toggleBox()">
              <!-- <img :src='togglePng' style='display:block;width:100%' @click='toggleBox()'/> -->
            </div>
            <div style="padding:10px 10px 10px 0px;background:#fff;">
              <div class="box-content">
                <div class="flex_box">
                  <el-tooltip class="item" effect="dark" content="应用层" placement="right">
                    <div class="left_side y" />
                  </el-tooltip>
                  <div class="right_side">
                    <div class="apdex-box">
                      <div
                        class="apdex-con"
                        :class="ApdexNum>=0.94?'gc'
                          :(ApdexNum>=0.85&&ApdexNum<0.94)?'bc'
                            :(ApdexNum>=0.7&&ApdexNum<0.85)?'grc'
                              :(ApdexNum>=0.5&&ApdexNum<0.7)?'oc'
                                :'rc'"
                      >
                        {{ ApdexNum>=0.94?'性能极佳':(ApdexNum>=0.85 && ApdexNum<0.94)?"性能较好":(ApdexNum>=0.7&&ApdexNum<0.85)?"性能一般":(ApdexNum>=0.5&&ApdexNum<0.7)?"性能一般":"性能不佳" }}
                      </div>
                      <div class="ray-box">
                        <el-button>x-ray</el-button>
                      </div>
                    </div>
                    <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">
                              </p>
                              <p class="label">
                                Apdex
                              </p>
                            </div>
                          </el-col>
                          <el-col :span="6" :lg="6" :md="6" :sm="6">
                            <div class="Apply_r_list">
                              <p class="value">
                                {{ item.latency==undefined?0:parseFloat(item.latency).toFixed(2) }} <img class="arrow" :src="item.latencyFlag==true?red_up:g_down">
                              </p>
                              <p class="label">
                                响应时间(ms)
                              </p>
                            </div>
                          </el-col>
                          <el-col :span="6" :lg="6" :md="6" :sm="6">
                            <div class="Apply_r_list">
                              <p class="value">
                                {{ item.rate==undefined?0:parseFloat(item.rate).toFixed(2) }} <img class="arrow" :src="item.rateFlag==true?g_up:red_down">
                              </p>
                              <p class="label">
                                吞吐率(rpm)
                              </p>
                            </div>
                          </el-col>
                          <el-col :span="6" :lg="6" :md="6" :sm="6">
                            <div class="Apply_r_list">
                              <p class="value">
                                {{ item.errorRate==undefined?0:parseFloat(item.errorRate).toFixed(2) }} <img class="arrow" :src="item.errorRateFlag==true?red_up:g_down">
                              </p>
                              <p class="label">
                                错误率(%)
                              </p>
                            </div>
                          </el-col>
                        </el-row>
                      </div>

                      <div class="interface-box" style="padding:10px 0 0 0">
                        <h6 class="h6">慢业务TOP5</h6>
                        <el-table
                          v-loading="loading2"
                          :data="slowBusiInterData"
                          @row-click="handleRowClickBusiness"
                        >
                          <el-table-column header-align="left" label="起始服务" prop="service_name" align="left" :show-overflow-tooltip="true" />
                          <el-table-column header-align="left" label="错误率(%)" prop="error_rate" align="left" :show-overflow-tooltip="true">
                            <template slot-scope="scope">{{ (scope.row.error_rate*100).toFixed(2) }}%</template>
                          </el-table-column>
                          <el-table-column header-align="left" label="平均延迟(ms)" prop="duration" align="left">
                            <template slot-scope="scope">
                              <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>
                          </el-table-column>
                        </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 class="flex_box">
                  <el-tooltip class="item" effect="dark" content="服务层" placement="right">
                    <div class="left_side g" />
                  </el-tooltip>
                  <div class="right_side">
                    <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 class="interface-box">
                      <h6 class="h6">慢接口TOP5</h6>
                      <el-table
                        v-loading="loading3"
                        :data="slowTopList"
                        @row-click="handleRowClickInterFace"
                      >
                        <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>
                        </el-table-column>
                      </el-table>
                      <div class="look-more" @click="goPath(&quot;/service/Interface/index&quot;)">查看更多<i class="el-icon-d-arrow-right" /></div>
                    </div>
                  </div>
                </div>

                <div class="flex_box">
                  <el-tooltip class="item" effect="dark" content="基础设施层" placement="right">
                    <div class="left_side b" />
                  </el-tooltip>
                  <div class="right_side">
                    <div class="basic-box">
                      <h6 class="h6">慢查询TOP5</h6>
                      <el-table
                        v-loading="loading"
                        :data="dbslowtopList"
                        @row-click="handleRowClick"
                      >
                        <el-table-column header-align="left" label="查询方法" prop="span_name" align="left" :show-overflow-tooltip="true" />
                        <el-table-column header-align="left" label="服务名" prop="service_name" align="left" :show-overflow-tooltip="true">
                          <template slot-scope="scope">
                            <span>{{ scope.row.service_name }}</span>
                          </template>
                        </el-table-column>
                        <el-table-column header-align="center" label="SQL语句" prop="statement" align="center" :show-overflow-tooltip="true">
                          <template slot-scope="scope">
                            <!-- <el-tag>{{ scope.row.statement }}</el-tag> -->
                            <span>{{ scope.row.statement }}</span>
                          </template>
                        </el-table-column>
                        <el-table-column header-align="center" label="查询时长(ms)" width="120" prop="duration" align="center">
                          <template slot-scope="scope">
                            <el-tag>{{ scope.row.duration== undefined?0:Number(scope.row.duration).toFixed(2) }}</el-tag>
                          </template>
                        </el-table-column>
                      </el-table>
                      <div class="look-more" @click="goPath(&quot;/service/Interface/index&quot;)">查看更多<i class="el-icon-d-arrow-right" /></div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="box right-box" style="position:relative;padding:10px;background:#fff;height:calc(100vh - 60px);">
            <span id="fullscreen_button" class="title_href">
              <svg-icon :icon-class="isFull?'exit-fullscreen':'fullscreen'" @click.native.prevent="clickFull" />
            </span>
            <div v-loading="loading" style="height:calc(100vh - 60px);">
              <iframe
                id="topoFrame"
                ref="topoFrame"
                :src="topoUrl"
                style="width:100%;height:calc(100vh - 110px);min-height:600px"
                scrolling="auto"
                frameBorder="no"
                border="0"
                marginWidth="0"
                marginHeight="0"
              />
            </div>
          </div>
        </div>

        <div class="topoWrap">
          <el-dialog
            :visible.sync="VisibleTopo"
            :fullscreen="true"
            center
          >
            <div v-loading="loading" style="height:calc(100vh - 10px);">
              <iframe
                ref="topoFrame"
                :src="topoUrl"
                style="width:100%;height:calc(100vh - 10px);min-height:700px"
                scrolling="auto"
                frameBorder="no"
                border="0"
                marginWidth="0"
                marginHeight="0"
              />
            </div>
          </el-dialog>
        </div>
      </el-card>
    </template>
  </BasicLayout>
</template>

<script>
import storage from '@/utils/storage'
// import NoData from '@/views/NoData/nodata'
import { serviceBar } from '@/api/service'
import { slowTopUrlMapping, getSlowInterfaceData, listBizStats } from '@/api/mapping'
import { dbslowtop } from '@/api/trace'
import { appsScore } from '@/api/apps'

export default {
  // components: {
  //   NoData
  // },
  data() {
    return {
      loading: false,
      activeName: 'first',
      isFull: false,
      VisibleTopo: false,
      topoUrl: '/ui/index.html',
      sendObj: {},
      appName: '',
      appId: '',
      appItem: {},
      collapsed: false,
      ApdexNum: 1,
      apdex: 0,
      item: {
        apdex: 0,
        latency: 0,
        rate: 0,
        errorRate: 0
      },
      bellpin: require('../../../assets/apply/bellpin.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'),
      more: require('../../../assets/apply/more.png'),
      pushpin: require('../../../assets/apply/pushpin.png'),
      green_circle: require('../../../assets/apply/green_circle.png'),
      orange_circle: require('../../../assets/apply/orange_circle.png'),
      blue_circle: require('../../../assets/apply/blue_circle.png'),
      gray_circle: require('../../../assets/apply/gray_circle.png'),
      red_circle: require('../../../assets/apply/red_circle.png'),
      panelImageURL: require('../../../assets/apply/custom-gauge-panel.png'),
      togglePng: require('../../../assets/apply/toggle.png'),
      serviceBarQuery: {
        start_time: '',
        end_time: '',
        app_alias: ''
      },
      serviceBarObj: {},
      timer: null,
      slowTopQuery: {
        app_id: 1,
        limit: 5,
        start_time: '',
        end_time: ''
      },
      slowTopList: [],
      dbslowtopQuery: {
        app_alias: '',
        limit: 5,
        start_time: '',
        end_time: ''
      },
      dbslowtopList: [],
      queryScore: {
        interval: 5,
        req_applist: []
      },
      slowBusiInterData: [], // 慢业务接口data
      loading2: false,
      slowBinsTopQuery: {
        start_time: '',
        end_time: ''
      },
      loading3: false
    }
  },
  watch: {
    '$store.state.time.globalTimes': {
      handler(newValue, oldValue) {
        var live = false
        if (newValue) {
          this.topoUrl = ''
          this.topoUrl = '/ui/index.html'
          this.serviceBarQuery.start_time = newValue.startTime
          this.serviceBarQuery.end_time = newValue.endTime
          this.slowTopQuery.start_time = newValue.startTime
          this.slowTopQuery.end_time = newValue.endTime
          this.dbslowtopQuery.start_time = newValue.startTime
          this.dbslowtopQuery.end_time = newValue.endTime
          this.slowBinsTopQuery.start_time = newValue.startTime
          this.slowBinsTopQuery.end_time = newValue.endTime
          this.queryScore.interval = newValue.interval
          this.getAppsScore() // 应用黄金指标(RED)
          this.getdbslowtop() // 慢查询TOP5
          this.getServiceBar() // 服务性能

          this.getslowTopUrlMapping() // 慢接口TOP5
          this.getSlowInterfaceFn()// 慢业务TOP5
        }
        if (newValue.timeOut) {
          if (newValue.timeOut == 1) {
            live = false
            clearInterval(this.timer)
          } else {
            live = true
            clearInterval(this.timer)
            this.Refresh(newValue.timeOut)
          }

          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'
        }
      },
      deep: true
    },
    item: {
      handler(newVal, oldVal) {
        if (newVal.apdex != undefined && oldVal.apdex != undefined) {
          if (parseFloat(newVal.apdex) > parseFloat(oldVal.apdex)) {
            newVal.apdexFlag = true
          } else {
            newVal.apdexFlag = false
          }
        }
        if (newVal.latency != undefined && oldVal.latency != undefined) {
          if (parseFloat(newVal.latency) > parseFloat(oldVal.latency)) {
            newVal.latencyFlag = true
          } else {
            newVal.latencyFlag = false
          }
        }

        if (newVal.rate != undefined && oldVal.rate != undefined) {
          if (parseFloat(newVal.rate) > parseFloat(oldVal.rate)) {
            newVal.rateFlag = true
          } else {
            newVal.rateFlag = false
          }
        }

        if (newVal.errorRate != undefined && oldVal.errorRate != undefined) {
          if (parseFloat(newVal.errorRate) > parseFloat(oldVal.errorRate)) {
            newVal.aerrorRateFlag = true
          } else {
            newVal.errorRateFlag = false
          }
        }

        if (newVal) {
          this.basicObj = newVal
        }
        true
      }
    },
    '$store.state.alias.currentAlias': {
      handler(newValue, oldValue) {
        this.sendObj.app_alias = newValue
        this.serviceBarQuery.app_alias = newValue
        this.dbslowtopQuery.app_alias = newValue
        this.appItem = storage.get('appsItem')
        this.slowTopQuery.app_id = this.appItem.id
        this.getAppsScore() // 应用黄金指标(RED)
        this.getdbslowtop() // 慢查询TOP5
        this.getServiceBar() // 服务性能
        this.getslowTopUrlMapping() // 慢接口TOP5
        this.getSlowInterfaceFn() // 慢业务TOP5
      },
      deep: true
    }
  },
  created() {
    this.appItem = storage.get('appsItem')
    const start_time = this.$store.state.time.globalTimes.startTime
    const end_time = this.$store.state.time.globalTimes.endTime
    if (JSON.stringify(this.appItem) != '{}') {
      this.sendObj.app_alias = this.appItem.alias
      this.appName = this.appItem.name
      this.item.apdex = this.appItem.apdex
      this.item.latency = this.appItem.latency
      this.item.rate = this.appItem.rate
      this.item.errorRate = this.appItem.errorRate
      this.serviceBarQuery.app_alias = this.appItem.alias
      this.serviceBarQuery.start_time = start_time
      this.serviceBarQuery.end_time = end_time
      this.getServiceBar() // 服务性能
      this.slowTopQuery.app_id = this.appItem.id
      this.slowTopQuery.start_time = start_time
      this.slowTopQuery.end_time = end_time

      this.getslowTopUrlMapping() // 慢接口TOP5
      this.dbslowtopQuery.app_alias = this.appItem.alias
      this.dbslowtopQuery.start_time = start_time
      this.dbslowtopQuery.end_time = end_time

      this.getAppsScore() // 应用黄金指标(RED)
      this.getdbslowtop() // 慢查询TOP5
      this.changeQuery('/business-analysis/topology/index', start_time, end_time, this.appItem.live)
      this.getSlowInterfaceFn() // 慢业务TOP5
    }
    if (this.$route.query.id != undefined) {
      this.appId = this.$route.query.id
    }
  },
  beforeDestroy() {
    clearInterval(this.timer)
  },
  methods: {
    getAppsScore() { // 应用黄金指标(RED)
      this.queryScore.req_applist.push({ app_alias: this.appItem.alias })
      appsScore(this.queryScore).then(res => {
        if (res.code == 200) {
          if (res.data.scores != null && res.data.scores.length > 0) {
            this.item = res.data.scores[0]
            this.item.apdexFlag = false
            this.item.latencyFlag = false
            this.item.rateFlag = false
            this.item.errorRateFlag = false
            this.ApdexNum = parseFloat(this.item.apdex).toFixed(2)
            this.apdex = parseFloat(this.item.apdex).toFixed(2) * 100 - 1
          }
        }
      })
    },
    handleRowClick(row, column, event) {
      const datetime = Date.parse(row.datetime) / 1000
      const href = this.$router.resolve({
        path: '/latency/index',
        query: {
          id: row.trace_id,
          span_id: row.span_id,
          datetime: datetime
        }
      })
      window.open(window.location.origin + '/' + href.href, '_blank')
    },
    handleRowClickInterFace(row, column, event) {
      storage.set('row', row)
      const href = this.$router.resolve({
        path: '/service/InterfaceDetail/index',
        query: {
          kind: row.route,
          method: row.method,
          name: row.name,
          service_name: row.service_name
        }
      })
      window.open(window.location.origin + '/' + href.href, '_blank')
    },
    async handleRowClickBusiness(row) {
      row.name = row.biz_name
      row.id = row.biz_id
      const start_time = this.$store.state.time.globalTimes.startTime
      const end_time = this.$store.state.time.globalTimes.endTime
      const obj = {
        biz_id: row.biz_id,
        start_time: start_time,
        end_time: end_time
      }

      const res = await listBizStats(obj)
      if (res.code == 200) {
        row.quantiles = res.data.quantiles
        storage.set('detailObj', row)
        this.$router.push({
          path: '/business-analysis/analysisDetail/index',
          query: {
            id: row.biz_id,
            name: row.biz_name
          }
        })
      }
    },
    goPath(path) {
      this.$router.push({
        path: path
      })
    },
    Refresh(timeOut) {
      this.timer = setInterval(() => {
        this.getServiceBar() // 服务性能
        this.getAppsScore() // 应用黄金指标(RED)
        this.getslowTopUrlMapping() // 慢接口TOP5
        this.getdbslowtop() // 慢查询TOP5
        this.getSlowInterfaceFn() // 慢业务TOP5
      }, timeOut)
    },
    toggleBox() {
      this.collapsed = !this.collapsed
    },
    clickFull() {
      this.VisibleTopo = true
    },
    handleClick(tab, event) {},
    populateIframeTopo(iframe) {
      const xhrTopo = new XMLHttpRequest()
      xhrTopo.open('GET', this.topoUrl)
      xhrTopo.responseType = 'blob'
      xhrTopo.onreadystatechange = () => {
        if (xhrTopo.readyState === xhrTopo.DONE) {
          if (xhrTopo.status === 200) {
            // iframe.src = URL.createObjectURL(xhr.response)
            // iframe.src= _this.topoUrl;

          }
        }
      }
      xhrTopo.send()
    },
    changeQuery(router, start_time, end_time, live) {
      this.$router.push({
        path: router,
        query: {
          id: this.appItem.id,
          app_alias: this.appItem.alias,
          start_time: start_time,
          end_time: end_time,
          item: this.appItem,
          live: live
        }
      }).catch(err => {
        console.log(err)
      })
    },
    getServiceBar() { // 服务性能
      serviceBar(this.serviceBarQuery, this.serviceBarQuery.app_alias).then(res => {
        if (res.code == 200) {
          this.serviceBarObj = res.data
          this.initServiceChart(this.serviceBarObj)
        }
      })
    },
    initServiceChart(data) {
      this.compareChart = this.$echarts5.init(document.getElementById('serviceBox'))
      const option = {
        color: ['#91CC75', '#EE6666', '#5470C6'],
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross'
          }
        },
        grid: {
          right: '26%',
          bottom: '3%'
        },
        legend: {
          data: ['性能', '错误率', '活跃度']
        },
        xAxis: [
          {
            type: 'category',
            axisTick: {
              alignWithLabel: true
            },
            axisLabel: {
              show: false
            },
            // prettier-ignore
            // data: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
            data: data.serivce_data
          }
        ],
        yAxis: [
          {
            type: 'value',
            name: '性能',
            position: 'left',
            alignTicks: true,
            axisLine: {
              show: true,
              lineStyle: {
                // color: colors[2]
              }
            },
            axisLabel: {
              formatter: '{value}'
            }
          },
          {
            type: 'value',
            name: '错误率',
            position: 'right',
            alignTicks: true,
            axisLine: {
              show: true,
              lineStyle: {
                // color: '#EE6666'
              }
            },
            axisLabel: {
              formatter: '{value} %'
            }
          },
          {
            type: 'value',
            name: '活跃度',
            position: 'right',
            offset: 45,
            alignTicks: true,
            axisLine: {
              show: true,
              lineStyle: {
                // color: '#EE6666'
              }
            },
            axisLabel: {
              formatter: '{value}'
            }
          }
        ],
        series: [
          {
            name: '性能',
            type: 'bar',
            data: data.apdex_data
          },
          {
            name: '错误率',
            type: 'line',
            yAxisIndex: 1,
            data: data.faild_data
          },
          {
            name: '活跃度',
            type: 'line',
            yAxisIndex: 2,
            data: data.liveness_data
          }
        ]
      }
      this.compareChart.setOption(option)
      window.addEventListener('resize', () => {
        this.compareChart.resize()
      })
      const that = this
      that.compareChart.off('click')
      that.compareChart.on('click', function(params) {
        var dataIndex = params.dataIndex
        var seriesIndex = params.seriesIndex
        var service_name = data.serivce_data[dataIndex]
        that.$router.push({
          path: '/service/serviceDetail/index',
          query: {
            service_name: service_name
          }
        })
      })
      that.compareChart.on('restore', function(params) {
        that.compareChart.setOption(option)
      })
    },
    getslowTopUrlMapping() { // 慢接口TOP5
      this.loading3 = true
      slowTopUrlMapping(this.slowTopQuery).then(res => {
        if (res.code == 200) {
          this.slowTopList = res.data
          this.loading3 = false
        }
      })
    },
    getdbslowtop() {// 慢查询TOP5
      this.loading = true
      dbslowtop(this.dbslowtopQuery).then(res => {
        if (res.code == 200) {
          this.dbslowtopList = res.data
          this.loading = false
        }
      })
    },
    async getSlowInterfaceFn() { // 慢业务TOP5
      this.loading2 = true
      const res = await getSlowInterfaceData(this.dbslowtopQuery)
      this.loading2 = false
      if (res && res.code == 200) {
        this.slowBusiInterData = res.data
      } else {
        this.slowBusiInterData = []
      }
    }
  }
}
</script>

<style scoped lang='scss'>
.title_href{
  width:32px;
  height:32px;
  position: absolute;
  top:5px;
  right:0px;
  display: block;
  i{
    font-size: 16px;
    color:#999;
  }
}
.topoWrap ::v-deep .el-dialog__header{
  padding:0;
  padding-bottom: 0;
}
.topoWrap ::v-deep .el-dialog--center .el-dialog__body{
  padding:0;
}
.topoWrap ::v-deep .el-dialog__body{
  padding:0;
}
::v-deep .el-tabs__header{
  position: fixed;
  top:50.5px;
  z-index: 99;
  background: #fff;
  width: 91.3%;
  padding-top:16px;
  margin-left: -30px;
}
::v-deep .el-tabs__nav-wrap {
    padding-left: 30px;
}
::v-deep .el-tabs__content {
    overflow: hidden;
    position: relative;
    margin-top: 56px;
}
.box-card ::v-deep .el-card__body{
  padding:0!important;
}
.container {
    display: flex;
    background:rgb(240,241,245);
    // margin-top:10px;
}

.left-box {
    position: relative;
    height:calc(100vh - 60px);
    // padding:10px 0px 10px 0;
    box-sizing: border-box;
    width: 28%; /* 设置左边盒子的初始宽度 */
    background-color: #fff;
    transition: width 1s ease; /* 添加过渡动画效果 */
    margin-right:16px;
    border:1px solid #f5f5f5;
    // overflow-y: scroll;
    overflow: auto;
    .box-content{
      background: rgb(249, 249, 251);
      // padding: 10px;
      overflow-y: scroll;
      // padding-left:2px;
    }
    .btn-box{
      width:8px;
      height: 100%;
      position:absolute;
      right:-4px;
      top:0;
      // transform: translate(-50%,0);
      z-index: 4;
      cursor: pointer;
    }
}

.right-box {
    flex: 1; /* 让右边盒子自动占据剩下的空间 */
    // height: 300px;
    background-color: #fff;
}

/* 当左边盒子被收起时的样式 */
.collapsed .left-box {
    width: 12px;
    margin-right:0;
    position: relative;
}
.apdex-box{
  padding:10px;
  box-sizing: border-box;
  color:#fff;
  display: flex;
  justify-content: space-between;
  align-items: center;
  .apdex-con{
    width:70%;
    // padding:10px;
    height: 80px;
    line-height: 80px;
    box-sizing: border-box;
    // border:1px solid #8DBC66;
    text-align: center;
    font-size:36px;
    font-weight:500;
    margin-right:16px;
  }
  .ray-box{
    width: 29.9%;
    height: 80px;
    line-height: 80px;
    .el-button {
      display: inline-block;
      width: 100%;
      height: 80px;
      line-height: 80px;
      padding: 0;
      border-radius: 0;
    }
  }
}
.card-box{
  padding:10px;
  padding-bottom: 0;
  box-sizing: border-box;
}
.service-box{
  padding:10px;
  box-sizing: border-box;
  // .h6{
  //   font-size: 14px;
  // }
  .serviceBox{
    width: 100%;
    height:200px;
    box-sizing: border-box;
  }
}
.interface-box{
  padding:10px;
  box-sizing: border-box;
}
.basic-box{
  padding:10px;
  box-sizing: border-box;
}
// .border_tip{
//   position: absolute;
//   box-sizing: border-box;
//   width:10px;
//   height: 255px;
//   border-radius: 2px;
//   border:2px solid yellow;

//   left:0;
//   top:0;
// }
.border-y{
  // border-left: 8px solid rgba(242,203,69,1);
  border-left:8px solid #F0DA8E;
  // opacity: 0.7;
}
.border-g{
  border-left:8px solid #89AF8D;
  margin-bottom:8px;
}
.border-b{
  border-left:8px solid #A7A29C;
}
.border_tip{
  position: absolute;
  box-sizing: border-box;
  width:8px;
  height: 255px;
  // border-radius: 4px;
  // border:2px solid #F2CB45;
  // background:#F2CB45;
  background:rgba(242,203,69,1);
  left:0;
  top:0;
  opacity: 0.7;
}
.border_tip_middle{
  position: absolute;
  box-sizing: border-box;
  width:8px;
  height: 632px;
  // border-radius: 4px;
  // border:2px solid #439058;
  background:#439058;
  left:0;
  top:258px;
  opacity: 0.7;
}
.border_tip_bottom{
  position: absolute;
  box-sizing: border-box;
  width:8px;
  height: 305px;
  // border-radius: 4px;
  // border:2px solid #847A71;
   background:#847A71;
  left:0;
  top:893px;
  opacity: 0.7;
}
.gc{
    // background: #66DC4A;
  background:#00B54F;
}
.bc{
  background: #60B4F9;
}
.grc{
  background: #8B8B8B;
}
.oc{
  background: #F1A657;
}
.rc{
  background: #EA463D;
}
.green{
  border: 2px solid #66DC4A;
}
.blue{
  border: 2px solid #60B4F9;
}
.gray{
  border: 2px solid #8B8B8B;
}
.orange{
  border: 2px solid #F1A657;
}
.red{
  border: 2px solid #EA463D;
}
.Apply_r{
  // display: flex;
  // flex-wrap: wrap;
  // align-items: center;
  // justify-content:space-between;
  //  display: grid;
  //  place-items: center; /* 水平垂直居中 */
  // padding:0 24px;
  .Apply_r_list{
    // width: 1.0625rem;
    height: 50px;
    background: #E3E7ED;
    // border-radius: 8px;
    text-align: center;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #4E5969;
    font-size: 12px;
    box-sizing: border-box;
    padding-top:6px;
    padding-bottom: 6px;
  }
  .value{
    line-height: 18px;
    font-size: 12px;
  }
  .value,.label{
    line-height: 18px;
    font-size: 12px;
    white-space: nowrap; /* 不换行 */
    overflow: hidden; /* 超出部分隐藏 */
    text-overflow: ellipsis; /* 显示省略号 */
  }
  p{
    margin-block-start: 0;
    margin-block-end: 0;
  }
}
.Apply_r_new{
  // display: flex;
  // flex-wrap: wrap;
  // align-items: center;
  // justify-content:space-between;
  //  display: grid;
  //  place-items: center; /* 水平垂直居中 */
  // padding:0 24px;
  .Apply_r_list{
    // width: 1.0625rem;
    height: 50px;
    line-height: 50px;
    background: #E3E7ED;
    // border-radius: 8px;
    text-align: center;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #4E5969;
    font-size: 12px;
    box-sizing: border-box;
    // padding-top:6px;
    // padding-bottom: 6px;
  }
  .value{
    // line-height: 18px;
    font-size: 12px;
  }
  .value,.label{
    // line-height: 18px;
    font-size: 12px;
  }
  p{
    margin-block-start: 0;
    margin-block-end: 0;
  }
}
.arrow{
  width:8px;
  height:10px;
  margin-left:8px;
}
.h6{
  font-size: 14px;
  margin-block-start:0;
  margin-block-end: 0;
  margin:16px 0;
}
.look-more{
  margin-top:16px;
  color: #1890ff;
  font-size: 12px;
  text-align: right;
  cursor: pointer;
  i{
    line-height: -3;
    vertical-align: middle;
  }
}
.flex_box{
  position: relative;
  margin-bottom: 10px;
}
.left_side{
  position: absolute;
  top: 0;
  bottom: 0;
  display: inline-block;
  width:8px;

}
.y{
background:#F0DA8E;
}
.g{
background:#89AF8D;
}
.b{
background:#A7A29C;
}
.right_side{
  width:calc(100% - 8px);
  display: inline-block;
  margin-left:10px;
}

</style>