<template>
  <BasicLayout>
    <template #wrapper>
      <el-card class="box-card" style="flex:1;">
        <div class="system-content">
          <div class="box system-left-content">
            <!-- 基本信息 -->
            <div class="system-basic-info">
              <span class="fontSize16">基本信息</span>
              <div><p class="service-header-p"><span class="service-span-right">应用：</span><el-tooltip class="item" effect="dark" :content="appItem.name +'('+ appItem.alias +')'" placement="top"><span class="service-span-left">{{ appItem.name }} ({{ appItem.alias }})</span></el-tooltip></p></div>
            </div>
            <!-- 性能指标概述 -->
            <div class="performance-box">
              <div class="performance-title">
                <div class="title-info">整体性能</div>
                <div class="title-info-icon-box">
                  <el-tooltip placement="top">
                    <template slot="content">
                      <div>
                        <div style="text-align:center;padding:1px 0 6px;">
                          性能说明
                        </div>
                        <div>
                          <div>
                            <span>性能极佳：</span>
                            <span>应用分数 >= 0.94</span>
                          </div>
                          <div>
                            <span>性能较好：</span>
                            <span>0.85 <= 应用分数 < 0.94</span>
                          </div>
                          <div>
                            <span>性能一般：</span>
                            <span>0.50 <= 应用分数 < 0.85</span>
                          </div>
                          <div>
                            <span>性能未知：</span>
                            <span>应用分数 < 0.50</span>
                          </div>
                        </div>
                      </div>
                    </template>
                    <!-- <i class="el-icon-question" /> -->
                    <img class="icon-help" src="../../../assets/icons/help.svg">
                  </el-tooltip>
                </div>
              </div>
              <div class="performance-content">
                <div class="performance-content-left">
                  <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>
                </div>
                <div class="performance-content-right">
                  <div class="formula-title">
                    <div style="padding-bottom:2px;">计算公式：</div>
                    {{ truncateNumber((performanceObj.satisfied + performanceObj.tolerable/2)/(performanceObj.satisfied + performanceObj.tolerable + performanceObj.highLatencyNum),2) }}=({{ performanceObj.satisfied }}+{{ performanceObj.tolerable }}/2)/{{ performanceObj.satisfied + performanceObj.tolerable + performanceObj.highLatencyNum }}
                  </div>
                  <div class="formula-content">
                    <div class="item">
                      <span class="item-name">较满意请求：</span>
                      <span class="item-info">{{ performanceObj.satisfied }}</span>
                    </div>
                    <div class="item">
                      <span class="item-name">可容忍请求：</span>
                      <span class="item-info">{{ performanceObj.tolerable }}</span>
                    </div>
                    <div class="item">
                      <span class="item-name">高延迟请求：</span>
                      <span class="item-info">{{ performanceObj.highLatencyNum }}</span>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <!-- 面板数据 暂时用接口详情页数据接口，真正接口出来替换为正确数据-->
            <div class="panel-box">
              <div class="panel-item">
                <el-tooltip placement="bottom" effect="dark" :visible-arrow="false">
                  <div slot="content">
                    <i class="dot" />
                    <span>自己关注业务总数</span>
                  </div>
                  <div class="icon-box">
                    <!-- <i class="el-icon-question" /> -->
                    <img class="icon-help" src="../../../assets/icons/help.svg">
                  </div>
                </el-tooltip>
                <div>
                  <div class="panel-item-tit">重点业务总数</div>
                  <div class="panel-item-con">{{ digitsObj.vip_biz !=undefined? digitsObj.vip_biz:0 }}</div>
                  <!-- <div class="panel-item-day-rate">
                    <i v-show="processNumber(digitsObj.vip_biz_dod).sign" :class="processNumber(digitsObj.vip_biz_dod).sign == 'up'? 'el-icon-top goUpColor':'el-icon-bottom goDownColor'" />
                    <span>
                      {{ digitsObj.vip_biz_dod==undefined?0:getErrRate(processNumber(digitsObj.vip_biz_dod).value) }}
                    </span>
                  </div> -->
                </div>
              </div>
              <div class="panel-item">
                <el-tooltip effect="dark" :visible-arrow="false">
                  <div slot="content">
                    <i class="dot" />
                    <span>当前应用所包含的服务包总数</span>
                  </div>
                  <div class="icon-box">
                    <!-- <i class="el-icon-question" /> -->
                    <img class="icon-help" src="../../../assets/icons/help.svg">
                  </div>
                </el-tooltip>
                <div>
                  <div class="panel-item-tit">部署包总数</div>
                  <div class="panel-item-con">{{ digitsObj.service || 0 }}</div>
                  <!-- <div class="panel-item-day-rate">日同比
                    <i v-show="processNumber(digitsObj.service_dod).sign" :class="processNumber(digitsObj.service_dod).sign == 'up'? 'el-icon-top goUpColor':'el-icon-bottom goDownColor'" />
                    <span>
                      {{ digitsObj.service_dod==undefined?0:getErrRate(processNumber(digitsObj.service_dod).value) }}
                    </span>
                  </div> -->
                </div>
              </div>
              <div class="panel-item">
                <el-tooltip placement="bottom" effect="dark" :visible-arrow="false">
                  <div slot="content">
                    <i class="dot" />
                    <span>当前应用所涉及的消息系统总数</span>
                  </div>
                  <div class="icon-box">
                    <!-- <i class="el-icon-question" /> -->
                    <img class="icon-help" src="../../../assets/icons/help.svg">
                  </div>
                </el-tooltip>
                <div>
                  <div class="panel-item-tit">中间件总数</div>
                  <div class="panel-item-con">{{ digitsObj.messaging!=undefined?Number(digitsObj.messaging):0 }}</div>
                  <!-- <div class="panel-item-day-rate">日同比
                    <i v-show="processNumber(digitsObj.messaging_dod).sign" :class="processNumber(digitsObj.messaging_dod).sign == 'up'? 'el-icon-top goUpColor':'el-icon-bottom goDownColor'" />
                    <span>
                      {{ digitsObj.messaging_dod==undefined?0:getErrRate(processNumber(digitsObj.messaging_dod).value) }}
                    </span>
                  </div> -->
                </div>
              </div>
              <div class="panel-item">
                <el-tooltip placement="bottom" effect="dark" :visible-arrow="false">
                  <div slot="content">
                    <i class="dot" />
                    <span>当前应用所包含的数据库类型总数</span>
                  </div>
                  <div class="icon-box">
                    <!-- <i class="el-icon-question" /> -->
                    <img class="icon-help" src="../../../assets/icons/help.svg">
                  </div>
                </el-tooltip>
                <div>
                  <div class="panel-item-tit">数据库总数</div>
                  <div class="panel-item-con">{{ digitsObj.database != undefined?Number(digitsObj.database):0 }}</div>
                  <!-- <div class="panel-item-day-rate">日同比
                    <i v-show="processNumber(digitsObj.database_dod).sign" :class="processNumber(digitsObj.database_dod).sign == 'up'? 'el-icon-top goUpColor':'el-icon-bottom goDownColor'" />
                    <span>
                      {{ digitsObj.database_dod==undefined?0:getErrRate(processNumber(digitsObj.database_dod).value) }}
                    </span>
                  </div> -->
                </div>
              </div>
            </div>

            <!-- 性能指标面板 -->
            <div class="performance-panel-box">
              <div class="performance-panel-item">
                <el-tooltip placement="bottom" effect="dark" :visible-arrow="false">
                  <div slot="content">
                    <i class="dot" />
                    <span>当日应用所涉及的业务请求总数</span>
                  </div>
                  <div class="icon-box">
                    <img class="icon-help" src="../../../assets/icons/help.svg">
                    <!-- <i class="el-icon-question" /> -->
                  </div>
                </el-tooltip>
                <div>
                  <div class="performance-panel-item-tit">业务请求总数</div>
                  <div class="performance-panel-item-con">{{ digitsObj.request_total || 0 }}</div>
                  <div class="performance-panel-item-day-rate">日同比
                    <i v-show="processNumber(digitsObj.request_total_dod).sign" :class="processNumber(digitsObj.request_total_dod).sign == 'up'? 'el-icon-top goUpColor':processNumber(digitsObj.request_total_dod).sign == 'down'?'el-icon-bottom goDownColor':'el-icon-minus equalColor'" />
                    <span>
                      {{ digitsObj.request_total_dod==undefined || digitsObj.request_total_dod=='0'?'':getErrRate(processNumber(digitsObj.request_total_dod).value) }}
                    </span>
                  </div>
                  <div class="inchart-box">
                    <RequestInChart />
                  </div>
                </div>
              </div>
              <div class="performance-panel-item">
                <el-tooltip placement="bottom" effect="dark" :visible-arrow="false">
                  <div slot="content">
                    <i class="dot" />
                    <span>当日应用所涉及的业务请求错误总数</span>
                  </div>
                  <div class="icon-box">
                    <!-- <i class="el-icon-question" /> -->
                    <img class="icon-help" src="../../../assets/icons/help.svg">
                  </div>
                </el-tooltip>
                <div @click="goPage">
                  <div class="performance-panel-item-tit">业务错误数</div>
                  <div class="performance-panel-item-con">{{ digitsObj.error_num || 0 }}</div>
                  <div class="performance-panel-item-day-rate">日同比
                    <i v-show="processNumber(digitsObj.error_num_dod).sign" :class="processNumber(digitsObj.error_num_dod).sign == 'up'? 'el-icon-top goUpColor':processNumber(digitsObj.error_num_dod).sign == 'down'?'el-icon-bottom goDownColor':'el-icon-minus equalColor'" />
                    <span>
                      {{ digitsObj.error_num_dod==undefined || digitsObj.error_num_dod=='0'?'':getErrRate(processNumber(digitsObj.error_num_dod).value) }}
                    </span>
                  </div>
                  <div class="inchart-box">
                    <RequestInChart />
                  </div>
                </div>
              </div>
              <!-- <div class="performance-panel-item">
                <el-tooltip placement="bottom" effect="dark" :visible-arrow="false">
                  <div slot="content">
                    <i class="dot" />
                    <span>实例数说明术语</span>
                  </div>
                  <div class="icon-box">
                    <i class="el-icon-question" />
                  </div>
                </el-tooltip>
                <div>
                  <div class="performance-panel-item-tit">实例数</div>
                  <div class="performance-panel-item-con">12</div>
                  <div class="performance-panel-item-day-rate">日同比
                    <i v-show="processNumber(digitsObj.error_num_dod).sign" :class="processNumber(digitsObj.error_num_dod).sign == 'up'? 'el-icon-top goUpColor':'el-icon-bottom goDownColor'" />
                    <span>
                      {{ digitsObj.error_num_dod==undefined?0:getErrRate(processNumber(digitsObj.error_num_dod).value) }}
                    </span>
                  </div>
                  <div class="inchart-box">
                    <RequestInChart />
                  </div>
                </div>
              </div>
              <div class="performance-panel-item">
                <el-tooltip placement="bottom" effect="dark" :visible-arrow="false">
                  <div slot="content">
                    <i class="dot" />
                    <span>平均耗时说明术语</span>
                  </div>
                  <div class="icon-box">
                    <i class="el-icon-question" />
                  </div>
                </el-tooltip>
                <div>
                  <div class="performance-panel-item-tit">平均耗时</div>
                  <div class="performance-panel-item-con">1200ms</div>
                  <div class="performance-panel-item-day-rate">日同比
                    <i v-show="processNumber(digitsObj.error_num_dod).sign" :class="processNumber(digitsObj.error_num_dod).sign == 'up'? 'el-icon-top goUpColor':'el-icon-bottom goDownColor'" />
                    <span>
                      {{ digitsObj.error_num_dod==undefined?0:getErrRate(processNumber(digitsObj.error_num_dod).value) }}
                    </span>
                  </div>
                  <div class="inchart-box">
                    <RequestInChart />
                  </div>
                </div>
              </div> -->
            </div>
          </div>
          <div class="box system-right-content">
            <!-- 应用关系图G6 -->
            <div class="system-topo-box" style="padding: 0;">
              <el-tabs v-model="activeName" type="border-card">
                <el-tab-pane name="first">
                  <img slot="label" class="tab-pane-icon" src="@/assets/global-icons/tuopu.svg" alt="">
                  <div v-if="isLoading" v-loading="isLoading" class="system-topo-content" />
                  <div v-else class="system-topo-content">
                    <span id="fullscreen_button" class="title_href">
                      <svg-icon :icon-class="isFull?'exit-fullscreen':'fullscreen'" @click.native.prevent="clickFull" />
                    </span>
                    <SystemTopo v-if="Object.keys(systemGraphData).length > 0" :chart-content-id="'systemDrawerContainer'" :graph-data="systemGraphData" />
                  </div>
                </el-tab-pane>
                <el-tab-pane name="second">
                  <img slot="label" class="tab-pane-icon" src="@/assets/global-icons/table.svg" alt="">
                  <TopologyListMode :topo-table-data="topoTableData" />
                </el-tab-pane>
              </el-tabs>
            </div>
            <!-- 异常事件统计图 -->
            <div class="abnormal-chart-box">
              <div v-if="isChartLoading" v-loading="isChartLoading" class="system-topo-box" />
              <AbnormalChart v-else :chart-data="charData" :trace-kind="traceKind" :current-alias="currentAlias" :chart-dom-id="'exceptionBarChart'" :is-show-tootip="true" :is-show-abnormal-table="true"/>
            </div>
          </div>
        </div>
        <!-- topo全屏显示 -->
        <div class="topoWrap">
          <el-dialog
            :visible.sync="visibleTopo"
            :fullscreen="true"
            append-to-body
            center
          >
            <SystemTopo v-if="visibleTopo && Object.keys(systemGraphData).length > 0" :chart-content-id="'systemDrawerContainer11'" :graph-data="systemGraphData" :is-full="visibleTopo" />
          </el-dialog>
        </div>
      </el-card>
    </template>
  </BasicLayout>
</template>

<script>
import { getAbnormalStatistics } from '@/api/mapping'
import moment from 'moment'
import storage from '@/utils/storage'
import RequestInChart from './components/RequestInChart.vue'
import AbnormalChart from './components/AbnormalChart.vue'
import SystemTopo from './components/SystemTopo.vue'
import BigNumber from 'bignumber.js'
import { appsScore } from '@/api/apps'
import TopologyListMode from './components/TopologyListMode'
import { getToken } from '@/utils/auth'
import EventBus from '@/utils/bus'
export default {
  components: {
    AbnormalChart,
    RequestInChart,
    SystemTopo,
    TopologyListMode
  },
  data() {
    return {
      systemGraphData: {},
      ApdexNum: 0, // 性能指标
      childQueryParams: {
        start_time: 0,
        end_time: 0
      },
      isLoading: false,
      serviceMapTimer: null,
      appItem: {},
      backFlag: true,
      digitsObj: {
        error_rate: 0,
        qpm: 0,
        median_duration: 0
      },
      fireLoading: false,
      queryScore: {
        interval: parseInt((new Date() - new Date(new Date().getFullYear(), new Date().getMonth(), new Date().getDate(), 0, 0, 0)) / (1000 * 60)),
        req_applist: []
      },
      performanceObj: { // 整体性能
        satisfied: 0,
        tolerable: 0,
        highLatencyNum: 0
      },
      charData: [],
      traceKind: 'app',
      currentAlias: '',
      isChartLoading: false,
      visibleTopo: false,
      isFull: false,
      topoTableData: [],
      activeName: 'first'
    }
  },

  watch: {
    '$store.state.time.globalTimes': {
      handler(newValue, oldValue) {
        if (newValue) {
          this.childQueryParams.start_time = newValue.startTime
          this.childQueryParams.end_time = newValue.endTime
          this.$nextTick(() => {
            this.activeName = 'first'
          })
          this.queryScore.interval = newValue.interval
          this.getAppcationGraphData() // 获取拓扑 关系图
          // this.getLeftInfo() // 获取应用空间左侧统计信息
          this.getAppsScore() // 整体性能
          this.getAbnormalChartData(2) // 异常统计柱状图
          if (newValue.timeOut) {
            if (newValue.timeOut === 1) {
              clearInterval(this.serviceMapTimer)
            } else {
              clearInterval(this.serviceMapTimer)
              this.Refresh(newValue.timeOut)
            }
          }
        }
      },
      // immediate: true,
      deep: true
    },
    '$store.state.alias.currentAlias': { // 当前应用切换
      handler(newValue, oldValue) {
        this.appItem = storage.get('appsItem')
        this.queryScore.req_applist = []
        this.queryScore.req_applist.push({ app_alias: newValue })
        this.currentAlias = newValue
        this.getAppcationGraphData('first') // 获取拓扑 关系图
        this.getLeftInfo() // 获取应用空间左侧统计信息
        this.getAppsScore() // 整体性能
        this.getAbnormalChartData(2) // 异常统计柱状图
      },
      deep: true
    }
  },
  created() {
    if (window.history.length <= 1) {
      this.backFlag = false
    } else {
      this.backFlag = true
    }
    // 说明
    // appItem中的id和app_id是一样的
    this.appItem = storage.get('appsItem')
    this.currentAlias = this.appItem.alias
    const start_time = this.$store.state.time.globalTimes.startTime
    const end_time = this.$store.state.time.globalTimes.endTime
    this.childQueryParams.start_time = start_time
    this.childQueryParams.end_time = end_time
    this.queryScore.req_applist.push({ app_alias: this.appItem.alias })
    this.changeQuery('/business-analysis/system-space/index', start_time, end_time, this.appItem.live)
    this.getAppcationGraphData() // 获取拓扑 关系图
    this.getLeftInfo() // 获取应用空间左侧统计信息
    this.getAppsScore() // 整体性能
    this.getAbnormalChartData(2) // 异常统计柱状图
  },
  beforeDestroy() {
    clearInterval(this.serviceMapTimer)
  },
  methods: {
    goPage() {
      EventBus.$emit('currentAppClick', 'root', null, 'allBusinessCon')
    },
    clickFull() {
      this.visibleTopo = true
    },
    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)
      })
      this.$forceUpdate()
    },
    async getAbnormalChartData(type) { // 获取异常统计数据
      this.charData = []
      this.isChartLoading = true
      let end_time = null
      let start_time = null
      if (type === 1) { // 默认24小时
        end_time = Math.floor(moment().valueOf() / 1000)
        start_time = Math.floor(moment().subtract(12, 'hours').valueOf() / 1000)
      } else { // type 2 全局时间控件时间
        end_time = this.childQueryParams.end_time
        start_time = this.childQueryParams.start_time
      }
      const params = {
        kind: 'app',
        subcondition_value: this.appItem.alias,
        start_time: start_time,
        end_time: end_time,
        app_alias: this.appItem.alias
      }
      const res = await getAbnormalStatistics(params)
      if (res && res.code === 200) {
        this.charData = res.data
      } else {
        this.charData = []
      }
      this.isChartLoading = false
    },
    processNumber(num) {
      const result = {
        value: num,
        sign: ''
      }
      if (num > 0) {
        result.sign = 'up'
      } else if (num < 0) {
        result.value = Math.abs(num) // 返回绝对值
        result.sign = 'down'
      } else {
        result.sign = 'equal'
      }
      return result
    },
    getErrRate(error_rate) {
      const strErrorRate = numToString(error_rate)
      let length = 0
      if (strErrorRate !== '0') {
        const arr = strErrorRate.split('.')
        if (arr.length > 1) {
          length = strErrorRate.split('.')[1].length
        }
      }
      if (error_rate == 0) {
        return error_rate
      } else if (error_rate == 1) {
        return error_rate * 100 + '%'
      } else if (length <= 2) {
        return error_rate * 100 + '%'
      } else {
        return convertToPercentage(error_rate)
      }
      function numToString(num) {
        let str = num.toString()
        if (str.includes('e')) {
          const parts = str.split('e')
          const base = parts[0]
          const exp = parseInt(parts[1])
          const decimalPlaces = base.split('.')[1]?.length || 0
          const zerosNeeded = Math.abs(exp) - decimalPlaces
          if (exp < 0) {
            str = '0.' + '0'.repeat(zerosNeeded) + base.replace('.', '')
          } else {
            str = base + '0'.repeat(zerosNeeded)
          }
        }
        return str
      }
      function convertToPercentage(value) {
        const bnValue = new BigNumber(value)
        const percentage = bnValue.multipliedBy(100)// 乘法运算
        let roundedPercentage = percentage.decimalPlaces(2, BigNumber.ROUND_FLOOR)// decimalPlaces保留小数位

        // 如果四舍五入后的值小于原始值，手动增加 0.01
        if (roundedPercentage.isLessThan(percentage)) { // 判断是否小于
          roundedPercentage = roundedPercentage.plus(0.01)
        }

        return `${roundedPercentage.toFixed(2)}%`
      }
    },

    Refresh(timeOut) {
      this.serviceMapTimer = setInterval(() => {
        this.getAppcationGraphData() // 获取拓扑 关系图
        this.getAppsScore()
      }, timeOut)
    },
    getAppsScore() { // 应用黄金指标(RED)
      appsScore(this.queryScore).then(res => {
        if (res.code == 200) {
          if (res.data.scores != null && res.data.scores.length > 0) {
            const data = res.data.scores[0]
            this.ApdexNum = this.truncateNumber(data.apdex, 2)
            this.performanceObj = data
            this.performanceObj.highLatencyNum = Number(data.totalRequests) - Number(data.satisfied) - Number(data.tolerable)
          } else {
            this.ApdexNum = 0
            this.performanceObj = {
              satisfied: 0,
              tolerable: 0,
              highLatencyNum: 0
            }
            console.log('未获取到该应用的评分！！！')
          }
        }
      })
    },
    // 直接截取小数num到小数点后指定位数places，不做四舍五入
    truncateNumber(num, places) {
      const multiplier = Math.pow(10, places)
      return (Math.floor(num * multiplier) / multiplier) || 0
    },
    // 获取拓扑 关系图
    async getAppcationGraphData(type) {
      if (type === 'first') {
        this.activeName = 'first'
      }
      const para = {
        app_alias: this.appItem.alias,
        start_time: this.childQueryParams.start_time,
        end_time: this.childQueryParams.end_time
      }
      this.systemGraphData = {}
      this.isLoading = true
      this.topoTableData = []
      const hostname = window.location.hostname === 'localhost' ? 'observe-front.cestong.com.cn' : window.location.hostname
      this.$http({
        url: `http://${hostname}/core/v1/application/graph`,
        method: 'get',
        headers: {
          'Authorization': 'Bearer ' + getToken() // 特定请求的header
        },
        params: para
      })
      // getAppcationGraph(para)
        .then(res => {
          if (res.data.code === 200) {
            this.systemGraphData = res.data.data
            this.topoTableData.push(res.data.data)
          } else {
            this.systemGraphData = {}
          }
          this.isLoading = false
        })
    },
    // 获取应用空间左侧统计信息
    async getLeftInfo() {
      const parm = {
        app_alias: this.appItem.alias
      }
      const hostname = window.location.hostname === 'localhost' ? 'observe-front.cestong.com.cn' : window.location.hostname
      this.$http({
        url: `http://${hostname}/core/v1/application/stats`,
        method: 'get',
        headers: {
          'Authorization': 'Bearer ' + getToken() // 特定请求的header
        },
        params: parm
      })
      // getStatistics(parm)
        .then(res => {
          if (res.data.code == 200) {
            this.digitsObj = res.data.data
          } else {
            this.digitsObj = {}
          }
        })
    }
  }
}
</script>

<style scoped lang='scss'>
.icon-help{
  width: 18px;
  height: 18px;
  cursor: pointer;
}
.el-icon-question{
  color:#9a9191;
}
.fontSize16{
  font-size: 16px;
  font-weight: bold;
}
.goUpColor{
  color:#EA463D;
  font-weight: bold;
}
.goDownColor{
  color:#00B54F;
  font-weight: bold;
}
.equalColor{
  color:grey;
  font-weight: bold;
}
.gc{
  background:#00B54F;
}
.bc{
  background: #60B4F9;
}
.grc{
  background: #8B8B8B;
}
.oc{
  background: #F1A657;
}
.rc{
  background: #d0cbcb;
}
.box-card ::v-deep .el-card__body{
  padding:0!important;
}
.system-content {
  display: flex;
  background:#f0f1f5;
  font-family: Roboto,sans-serif;
  .system-left-content {
    position: relative;
    height:calc(100vh - 78px);
    padding:20px 10px;
    box-sizing: border-box;
    width: 30%; /* 设置左边盒子的初始宽度 */
    min-width: 350px;
    background-color: #fff;
    margin-right:16px;
    border:1px solid #f5f5f5;
    overflow-y: auto;
    .system-basic-info{
      height: 100px;
      border-radius: 8px;
      color: #4E5969;
      padding: 16px;
      box-sizing: border-box;
      background: url('../../../assets/pic-bg.png');
      background-position: right;
      background-size: cover;
      background-repeat: no-repeat;
      .service-header-p{
        font-weight: bold;
        font-size:16px;;
        margin-bottom: 0;
        margin-top:20px;
        display: flex;
        align-items: center;
        span{
          display: inline-block;
        }
        .service-span-right{
          text-align: left;
          width:58px;
        }
        .service-span-left{
          text-align: left;
          cursor: pointer;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }
      }
    };
    .panel-box{
      width: 100%;
      // font-size: 0;
      padding-top: 10px;
      .panel-item{
        position: relative;
        display: inline-flex;
        width: calc(50% - 5px);
        box-sizing: border-box;
        height: 100px;
        background: linear-gradient( 155deg, #FFFFFF 0%, #FFFFFF 50%, #EFF4FF 100%);
        border: 1px solid rgba(96,97,112,0.07);
        margin:0 10px 10px 0;
        justify-content: center;
        align-items: center;
        padding: 0 10px;
        border-radius: 8px;
        .icon-box{
          position: absolute;
          right: 10px;
          top: 10px;
          i{
            font-size: 16px;
          }
        }
        &:nth-child(even){
          margin-right:0;
        }
        .panel-item-tit{
          font-weight: bold;
          font-size: 16px;
          color: #4E5969;
          text-align: center;
        }
        .panel-item-con{
          font-weight: bold;
          font-size: 36px;
          color: #1A2233;
          margin-top:10px;
          text-align: center;
        }
        .panel-item-day-rate{
          font-size:10px;
          opacity: 0.9;
        }
      }
    }
    .performance-box{
      width: 100%;
      padding-top: 10px;
      border: 1px solid rgba(96, 97, 112, 0.07);
      border-radius: 8px;
      margin-top: 10px;
      .performance-title{
        display: flex;
        justify-content: space-between;
        align-items: center;
        height:30px;
        padding: 0 10px;
        .title-info{
          font-size:16px;
          font-weight:bold;
          // color: '#1a2233';
        }
        .title-info-icon-box{
          font-size:16px;
        }
      }
      .performance-content{
        display: flex;
        justify-content: space-between;
        .performance-content-left{
          align-self: center;
          min-width: 110px;
          padding-left: 10px;
          flex:1;
          .apdex-box{
            box-sizing: border-box;
            color:#fff;
            .apdex-con{
              height: 72px;
              line-height: 72px;
              text-align: center;
              font-size:16px;
              font-weight:bold;
              border-radius: 3px;
            }
          }
        }
        .performance-content-right{
          font-size:10px;
          padding:10px;
          // min-width: 200px;
          .formula-title{
            line-height:14px;
            font-weight:bold;
            margin-bottom:2px;
            text-align: center;
          }
          .formula-content{
            line-height:14px;
            .item{
              display: flex;
              justify-content: space-between;
              .item-info{
                align-self: flex-start;
              }
            }
          }
          }
        }
      }
    }
    .performance-panel-box{
      margin:10px 0;
      .performance-panel-item{
        position: relative;
        display: inline-flex;
        width: calc(50% - 5px);
        box-sizing: border-box;
        // height: 160px;
        background: linear-gradient( 155deg, #FFFFFF 0%, #FFFFFF 50%, #EFF4FF 100%);
        border: 1px solid rgba(96,97,112,0.07);
        margin:0 10px 10px 0;
        justify-content: space-between;
        align-items: center;
        padding: 0 10px;
        border-radius: 8px;
        cursor: pointer;
        .icon-box{
          position: absolute;
          right: 10px;
          top: 10px;
          i{
            font-size: 16px;
          }
        }
        &:nth-child(even){
          margin-right:0;
        }
        .performance-panel-item-tit{
          font-weight: bold;
          font-size: 16px;
          color: #4E5969;
          padding:10px 0px 10px;
          // text-align: center;
        }
        .performance-panel-item-con{
          font-weight: bold;
          font-size: 36px;
          color: #1A2233;
          // margin-top:10px;
          // text-align: center;
        }
        .performance-panel-item-day-rate{
          font-size:12px;
          opacity: 0.9;
        }
        .inchart-box{
          width:100%;
          margin: 20px 0;
        }
      }
    }
}
.system-topo-box {
  width:100%;
  height: calc(100% - 280px);
  padding:16px;
  position: relative;
  .title_href{
    position: absolute;
    right: 10px;
    top: 10px;
    cursor: pointer;
    z-index: 199;
  }
  .system-topo-content{
    height: 100%;
    width: 100%;
  }
  .tab-pane-icon{
    width: 16px;
    height: 16px;
  }
}
.system-topo-box ::v-deep .el-tabs__content{
  height: calc(100% - 40px);
  padding:0;
}
.system-topo-box ::v-deep.el-tab-pane{
  height: 100%;
}
.system-topo-box ::v-deep.el-tabs--border-card{
  height: 100%;
}
.system-right-content {
  flex: 1; /* 让右边盒子自动占据剩下的空间 */
  background-color: #fff;
  position:relative;
  background:#fff;
  height:calc(100vh - 78px);
  overflow: overlay;
  .abnormal-chart-box{
    padding:16px 10px 0;
    border-top:16px solid rgb(240,241,245);
    height: 280px;
  }
  .abnormal-nodata-box{
    padding:16px 10px 0;
    border-top:16px solid rgb(240,241,245);
    text-align: center;
    line-height: 230px;
  }
}
::v-deep.el-drawer__header{
  margin-bottom: 0;
}
::v-deep.el-dialog__body{
  width: 100%;
  height: 100vh;
}
</style>
