observe-front/src/views/business-analysis/analysis/components/biz.vue

<template>
  <div>
      <!-- <el-progress :percentage="100" status="success"></el-progress>  @submit.native.prevent -->
      <el-form ref="queryTrace" :model="queryTrace" :inline="true" label-width="68px" @submit.native.prevent>
          <el-form-item label="" prop="trace_id">
            <el-input
              style='width:220px'
              v-model="queryTrace.trace_id"
              placeholder="TraceID"
              clearable
              size="mini"
              @input='$forceUpdate()'
              @paste.native.capture.prevent="handlePaste"
              @keyup.enter.native="handleQuery"
            />
          </el-form-item>
      </el-form>
      <el-table
      v-loading="loading"
      :data="selectList"
      border
      @row-click="handleRowClick"
      ref="table"
      highlight-current-row
    >
      <el-table-column
        type="index"
        width="50" label="#">
      </el-table-column>
      <el-table-column label="TraceID" prop="trace_id" header-align="center" :show-overflow-tooltip="true" align="center" />
      <el-table-column label="开始时间" prop="timestamp" header-align="center" :show-overflow-tooltip="true" align="center">
          <template slot-scope="scope">
            <span>{{ parseTime(scope.row.timestamp) }}</span>
          </template>
      </el-table-column>
      <el-table-column label="持续时间(ms)" header-align="right" prop="duration" align="right"/>
      <el-table-column label="涉及的服务数量" header-align="right" prop="service_num" align="right"/>
      <el-table-column label="包含的span数量" header-align="right" prop="span_num" align="right"/>
      <!-- <el-table-column label="调用深度" header-align="right" prop="max_depth" align="right"/> -->
    </el-table>

    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="queryTrace.pageIndex"
      :limit.sync="queryTrace.pageSize"
      @pagination="getTraceList"
    />

    <div style="margin-top:32px;">
        <div class='css-container' style="margin-bottom:24px;">
          <div class='css-header'>
            <div class='css-title'>Trace</div>
          </div>
          <div class='css-content' v-if='tableDetail !=null'> 
              <div class='css-page-header'>
                <div class='css-name'>
                  <div class='css-name-title'>
                    <span class='trace-name'>
                        <span class='css-text'>{{tableDetail.service_name}}:</span>
                        <span class='css-text'>{{tableDetail.span_name}}</span>
                        <!-- <span class='css-text'>Convert</span> -->
                    </span>
                    <small class='css-small'>{{tableDetail.duration}}ms</small>
                  </div>
                  <div class='css-action'>
                      TraceID: <span v-cloak>{{tractID}}</span>
                  </div>
                </div>
                <div class='css-time-box'>
                  <span class='css-time-wrap'>
                    <span class='css-time-value'>{{parseTime(tableDetail.timestamp)}}
                      <!-- <span class='css-time-vlaue-detail'>:07.635</span> -->
                    </span>
                  </span>
                  <span class='css-type'>
                    <el-tag size="mini" style='margin-right:8px'>{{tableDetail.http_method}}</el-tag>
                      <el-tag size="mini" :type="tableDetail.http_code>300?'danger':'success'" style='margin-right:8px'>{{tableDetail.http_code}}</el-tag>
                      <span class='css-api'>{{tableDetail.span_attributes!=undefined?tableDetail.span_attributes['http.url']:tableDetail.http_url}}</span>
                  </span>
                </div>
              </div>
          </div>
        </div>
        <div class="TreeBox" style="margin-bottom:24px;">
          <div>
            <el-button-group>
                <el-button size="mini" type="primary" @click='toggleTab(1)'>Trace Tree</el-button>
                <el-button size="mini" type="primary" @click='toggleTab(2)'>Trace Map</el-button>
                <el-button size="mini" type="primary" @click='toggleTab(3)'>Deep Tree</el-button>
            </el-button-group>
            <div style='display:inline-block;vertical-align: middle;'>
              <el-dropdown
                style="margin-left: 10px"
                size="mini"
                trigger="click"
                placement="bottom"
              >
                <el-button type="primary" size="mini">
                  <!-- 下拉菜单 -->
                  <i class="el-icon-s-grid" />
                  <i class="el-icon-arrow-down"></i>
                </el-button>
                <el-dropdown-menu slot="dropdown">
                  <el-checkbox-group
                    v-model="colSelect"
                    style="text-align: left"
                    @change="columnChange"
                  >
                    <el-dropdown-item
                      v-for="(item, index) in colData"
                      :key="index"
                      ><el-checkbox :label="item.title">{{
                        item.title
                      }}</el-checkbox></el-dropdown-item
                    >
                  </el-checkbox-group>
                </el-dropdown-menu>
              </el-dropdown>
            </div>
          </div>
          <div style='font-size:14px;font-weight:bold;'>
            <!-- <el-button size="mini" icon="el-icon-full-screen" @click.native.prevent='clickFull'></el-button> -->
            <svg-icon :icon-class="isFull?'exit-fullscreen':'fullscreen'" @click.native.prevent="clickFull" />
          </div>
        </div>
        
        <div v-if='flag==true' style='position:relative;'>
          <div v-if='num == 1' class='tree_box'>
          </div>
          <div v-if="num ==2">
            <el-table   
              v-loading="treeLoading"
              :data="tableData"
              :row-key="getRowKeys" 
              :indent='4'
              style="width: 100%;margin-bottom: 20px;"
              border
              default-expand-all
              :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
              :row-class-name="status_change"
              :row-style="rowClassRender"
              @row-click='clickRowHandle'                  
              >
              <el-table-column
                prop="service_name"
                label="Name"
                header-align="center"
                :show-overflow-tooltip="true" 
                v-if="colData[0].istrue"
                >
                <template slot-scope="scope">
                  <span>{{scope.row.service_name}}<span>({{scope.row.span_name}})</span></span>
                </template>
              </el-table-column>
              <el-table-column
                prop="timestamp"
                label="StartTime"
                align='center'
                header-align="center"
                :show-overflow-tooltip="true" 
                v-if="colData[1].istrue"
                >
                  <template slot-scope="scope">
                    <span>{{ parseTime(scope.row.timestamp) }}</span>
                  </template>
              </el-table-column>
              <el-table-column
                prop="duration"
                label="Cost(ms)"
                align='right'
                header-align="right"
                width='120'
                :show-overflow-tooltip="true" 
                v-if="colData[2].istrue"
                >
              </el-table-column>
              <el-table-column
                prop="duration_persent"
                label="Duration(%)"
                header-align="center"
                v-if="colData[3].istrue"
                >
                  <template slot-scope="scope">
                    <!-- <div @click='getRowData(scope.row)' style="cursor: pointer;"> -->
                    <div>
                      <el-progress :percentage="scope.row.duration_persent * 100" color="#4343c8" :show-text='false' define-back-color='#E3E7ED'></el-progress>
                    </div>
                  </template>
              </el-table-column>
              <!-- <el-table-column
                prop="status_code"
                label="StatusCode"
                header-align="center"
                :show-overflow-tooltip="true" 
                v-if="colData[4].istrue"
                >
              </el-table-column> -->
              <el-table-column
                prop="span_kind"
                label="SpanKind"
                header-align="center"
                :show-overflow-tooltip="true" 
                v-if="colData[4].istrue"
                >
              </el-table-column>
              <el-table-column
                prop="service_name"
                label="ServiceName"
                header-align="center"
                :show-overflow-tooltip="true" 
                v-if="colData[5].istrue"
                >
              </el-table-column>
              <el-table-column
                prop="events_attributes"
                label="EventsAttributes"
                header-align="center"
                :show-overflow-tooltip="true" 
                v-if="colData[6].istrue"
                width="120"
                >
              </el-table-column>
              <el-table-column
                prop="events_name"
                label="EventsName"
                header-align="center"
                :show-overflow-tooltip="true" 
                v-if="colData[7].istrue"
                >
              </el-table-column>
              <el-table-column
                prop="events_timestamp"
                label="EventsTimestamp"
                header-align="center"
                :show-overflow-tooltip="true" 
                v-if="colData[8].istrue"
                width="120"
              >
              </el-table-column>
              <el-table-column
                prop="http_url"
                label="HttpUrl"
                header-align="center"
                :show-overflow-tooltip="true" 
                v-if="colData[9].istrue"
              >
              </el-table-column>
              <el-table-column
                prop="http_method"
                label="HttpMethod"
                header-align="center"
                :show-overflow-tooltip="true" 
                v-if="colData[10].istrue"
              >
              </el-table-column>
              <el-table-column
                prop="container_id"
                label="ContainerId"
                header-align="center"
                :show-overflow-tooltip="true" 
                v-if="colData[11].istrue"
              >
              </el-table-column>
              <el-table-column
                prop="http_code"
                label="httpCode"
                header-align="center"
                :show-overflow-tooltip="true" 
                v-if="colData[12].istrue"
              >
              </el-table-column>
              <el-table-column
                prop="db_connection_string"
                label="DbConnectionString"
                v-if="colData[13].istrue"
                :show-overflow-tooltip="true" 
              >
                <template slot-scope="scope">
                <span>{{scope.row.db_connection_string}}</span>
              </template>
              </el-table-column>
              <el-table-column
                prop="rpc_method"
                label="RpcMethod"
                v-if="colData[14].istrue"
                :show-overflow-tooltip="true" 
              >
              </el-table-column>
              <el-table-column
                prop="resource_attributes"
                label="ResourceAttributes"
                v-if="colData[15].istrue"
                :show-overflow-tooltip="true" 
              >
              <template slot-scope="scope">
                <span>{{JSON.stringify(scope.row.resource_attributes)}}</span>
              </template>
              </el-table-column>
              <el-table-column
                prop="span_attributes"
                label="SpanAttributes"
                v-if="colData[16].istrue"
                :show-overflow-tooltip="true" 
              >
                <template slot-scope="scope">
                  <span>{{JSON.stringify(scope.row.span_attributes)}}</span>
                </template>
              </el-table-column>
              <el-table-column
                prop="max_depth"
                label="MaxDepth"
                v-if="colData[17].istrue"
                :show-overflow-tooltip="true" 
              >
              </el-table-column>
              <!-- <el-table-column
                prop="db_connection_string"
                label="dbConnectionString"
                v-if="colData[18].istrue"
                :show-overflow-tooltip="true" 
              >
              </el-table-column> -->
              <el-table-column
                prop="db_statement"
                label="DbStatement"
                v-if="colData[18].istrue"
                :show-overflow-tooltip="true" 
              >
              </el-table-column>
            </el-table>
          </div>
          <div v-if="num ==3" style='position:relative;'>
              <iframe src='gi-topo-analyst2.html' style="width:100%;height:calc(100vh - 60px);min-height:800px;margin-top: -10px;"
              id="myIframe"
              scrolling='auto'
              frameBorder='no'
              border='0'
              marginWidth='0'
              marginHeight='0'></iframe>
          </div>
        </div>
    </div>

    <el-dialog
    :visible.sync="Visible"
    :fullscreen='true'
    center>

    <div style="margin-top:32px;">
        <div class='css-container' style="margin-bottom:24px;">
          <div class='css-header'>
            <div class='css-title'>Trace</div>
          </div>
          <div class='css-content' v-if='tableDetail !=null'> 
              <div class='css-page-header'>
                <div class='css-name'>
                  <div class='css-name-title'>
                    <span class='trace-name'>
                        <span class='css-text'>{{tableDetail.service_name}}:</span>
                        <span class='css-text'>{{tableDetail.span_name}}</span>
                        <!-- <span class='css-text'>Convert</span> -->
                    </span>
                    <small class='css-small'>{{tableDetail.duration}}ms</small>
                  </div>
                  <div class='css-action'>
                      TraceID: <span v-cloak>{{tractID}}</span>
                  </div>
                </div>
                <div class='css-time-box'>
                  <span class='css-time-wrap'>
                    <span class='css-time-value'>{{parseTime(tableDetail.timestamp)}}
                      <!-- <span class='css-time-vlaue-detail'>:07.635</span> -->
                    </span>
                  </span>
                  <span class='css-type'>
                    <el-tag size="mini" style='margin-right:8px'>{{tableDetail.http_method}}</el-tag>
                      <el-tag size="mini" :type="tableDetail.http_code>300?'danger':'success'" style='margin-right:8px'>{{tableDetail.http_code}}</el-tag>
                      <span class='css-api'>{{tableDetail.span_attributes!=undefined?tableDetail.span_attributes['http.url']:tableDetail.http_url}}</span>
                  </span>
                </div>
              </div>
          </div>
        </div>
        <div class="TreeBox" style="margin-bottom:24px;">
          <div>
            <el-button-group>
                <el-button size="mini" type="primary" @click='toggleTab(1)'>Trace Tree</el-button>
                <el-button size="mini" type="primary" @click='toggleTab(2)'>Trace Map</el-button>
                <el-button size="mini" type="primary" @click='toggleTab(3)'>Deep Tree</el-button>
            </el-button-group>
            <div style='display:inline-block;vertical-align: middle;'>
              <el-dropdown
                style="margin-left: 10px"
                size="mini"
                trigger="click"
                placement="bottom"
              >
                <el-button type="primary" size="mini">
                  <!-- 下拉菜单 -->
                  <i class="el-icon-s-grid" />
                  <i class="el-icon-arrow-down"></i>
                </el-button>
                <el-dropdown-menu slot="dropdown">
                  <el-checkbox-group
                    v-model="colSelect"
                    style="text-align: left"
                    @change="columnChange"
                  >
                    <el-dropdown-item
                      v-for="(item, index) in colData"
                      :key="index"
                      ><el-checkbox :label="item.title">{{
                        item.title
                      }}</el-checkbox></el-dropdown-item
                    >
                  </el-checkbox-group>
                </el-dropdown-menu>
              </el-dropdown>
            </div>
          </div>
          <div style='font-size:14px;font-weight:bold;'>
          </div>
        </div>
        
        <div v-if='flag==true' style='position:relative;'>
          <div v-if='num == 1' class='tree_box'>
          </div>
          <div v-if="num ==2">
            <el-table   
              v-loading="treeLoading"
              :data="tableData"
              :row-key="getRowKeys" 
              :indent='4'
              style="width: 100%;margin-bottom: 20px;"
              border
              default-expand-all
              :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
              :row-class-name="status_change"
              :row-style="rowClassRender"
              @row-click='clickRowHandle'                  
              >
              <el-table-column
                prop="service_name"
                label="Name"
                header-align="center"
                :show-overflow-tooltip="true" 
                v-if="colData[0].istrue"
                >
                <template slot-scope="scope">
                  <span>{{scope.row.service_name}}<span>({{scope.row.span_name}})</span></span>
                </template>
              </el-table-column>
              <el-table-column
                prop="timestamp"
                label="StartTime"
                align='center'
                header-align="center"
                :show-overflow-tooltip="true" 
                v-if="colData[1].istrue"
                >
                  <template slot-scope="scope">
                    <span>{{ parseTime(scope.row.timestamp) }}</span>
                  </template>
              </el-table-column>
              <el-table-column
                prop="duration"
                label="Cost(ms)"
                align='right'
                header-align="right"
                width='120'
                :show-overflow-tooltip="true" 
                v-if="colData[2].istrue"
                >
              </el-table-column>
              <el-table-column
                prop="duration_persent"
                label="Duration(%)"
                header-align="center"
                v-if="colData[3].istrue"
                >
                  <template slot-scope="scope">
                    <!-- <div @click='getRowData(scope.row)' style="cursor: pointer;"> -->
                    <div>
                      <el-progress :percentage="scope.row.duration_persent * 100" color="#4343c8" :show-text='false' define-back-color='#E3E7ED'></el-progress>
                    </div>
                  </template>
              </el-table-column>
              <!-- <el-table-column
                prop="status_code"
                label="StatusCode"
                header-align="center"
                :show-overflow-tooltip="true" 
                v-if="colData[4].istrue"
                >
              </el-table-column> -->
              <el-table-column
                prop="span_kind"
                label="SpanKind"
                header-align="center"
                :show-overflow-tooltip="true" 
                v-if="colData[4].istrue"
                >
              </el-table-column>
              <el-table-column
                prop="service_name"
                label="ServiceName"
                header-align="center"
                :show-overflow-tooltip="true" 
                v-if="colData[5].istrue"
                >
              </el-table-column>
              <el-table-column
                prop="events_attributes"
                label="EventsAttributes"
                header-align="center"
                :show-overflow-tooltip="true" 
                v-if="colData[6].istrue"
                width="120"
                >
              </el-table-column>
              <el-table-column
                prop="events_name"
                label="EventsName"
                header-align="center"
                :show-overflow-tooltip="true" 
                v-if="colData[7].istrue"
                >
              </el-table-column>
              <el-table-column
                prop="events_timestamp"
                label="EventsTimestamp"
                header-align="center"
                :show-overflow-tooltip="true" 
                v-if="colData[8].istrue"
                width="120"
              >
              </el-table-column>
              <el-table-column
                prop="http_url"
                label="HttpUrl"
                header-align="center"
                :show-overflow-tooltip="true" 
                v-if="colData[9].istrue"
              >
              </el-table-column>
              <el-table-column
                prop="http_method"
                label="HttpMethod"
                header-align="center"
                :show-overflow-tooltip="true" 
                v-if="colData[10].istrue"
              >
              </el-table-column>
              <el-table-column
                prop="container_id"
                label="ContainerId"
                header-align="center"
                :show-overflow-tooltip="true" 
                v-if="colData[11].istrue"
              >
              </el-table-column>
              <el-table-column
                prop="http_code"
                label="httpCode"
                header-align="center"
                :show-overflow-tooltip="true" 
                v-if="colData[12].istrue"
              >
              </el-table-column>
              <el-table-column
                prop="db_connection_string"
                label="DbConnectionString"
                v-if="colData[13].istrue"
                :show-overflow-tooltip="true" 
              >
                <template slot-scope="scope">
                <span>{{scope.row.db_connection_string}}</span>
              </template>
              </el-table-column>
              <el-table-column
                prop="rpc_method"
                label="RpcMethod"
                v-if="colData[14].istrue"
                :show-overflow-tooltip="true" 
              >
              </el-table-column>
              <el-table-column
                prop="resource_attributes"
                label="ResourceAttributes"
                v-if="colData[15].istrue"
                :show-overflow-tooltip="true" 
              >
              <template slot-scope="scope">
                <span>{{JSON.stringify(scope.row.resource_attributes)}}</span>
              </template>
              </el-table-column>
              <el-table-column
                prop="span_attributes"
                label="SpanAttributes"
                v-if="colData[16].istrue"
                :show-overflow-tooltip="true" 
              >
                <template slot-scope="scope">
                  <span>{{JSON.stringify(scope.row.span_attributes)}}</span>
                </template>
              </el-table-column>
              <el-table-column
                prop="max_depth"
                label="MaxDepth"
                v-if="colData[17].istrue"
                :show-overflow-tooltip="true" 
              >
              </el-table-column>
              <!-- <el-table-column
                prop="db_connection_string"
                label="dbConnectionString"
                v-if="colData[18].istrue"
                :show-overflow-tooltip="true" 
              >
              </el-table-column> -->
              <el-table-column
                prop="db_statement"
                label="DbStatement"
                v-if="colData[18].istrue"
                :show-overflow-tooltip="true" 
              >
              </el-table-column>
            </el-table>
          </div>
          <div v-if="num ==3" style='position:relative;'>
              <iframe src='gi-topo-analyst2.html' style="width:100%;height:calc(100vh - 60px);min-height:800px;margin-top: -10px;"
              id="myIframe"
              scrolling='auto'
              frameBorder='no'
              border='0'
              marginWidth='0'
              marginHeight='0'></iframe>
          </div>
        </div>
    </div>
    </el-dialog>

    <el-drawer
        :visible.sync="drawer"
        direction="rtl"
        size="55%"
        @close="drawerClose"
        v-if='JSON.stringify(detailData) != "{}"'
      >
        <el-collapse v-model="activeNames">
          <el-collapse-item title="Attributes" name="one">
            <ul class='ul_box' v-if='detailData.span_attributes !=null'>
              <li v-for='(value,key) in detailData.span_attributes' :key='key'> 
                <div class="ul_label">{{key}}</div>
                <div class="ul_value" style='color:#008080;white-space: pre-wrap;'>"{{value}}"</div>
              </li>
            </ul>
          </el-collapse-item>
          <el-collapse-item title="Resource" name="tow">
           
            <ul class='ul_box' v-if='detailData.resource_attributes !=null'>
              <li v-for='(value,key) in detailData.resource_attributes' :key='key'> 
                <div class="ul_label">{{key}}</div>
                <div class="ul_value" style='color:#008080;white-space: pre-wrap;'>"{{value}}"</div>
              </li>
            </ul>
          </el-collapse-item>
          <el-collapse-item v-if='detailData.events_timestamp.length>0 && detailData.events_timestamp!=null' :title="'Events'+'('+ detailData.events_timestamp.length +')'" name="three">
          <!-- <el-collapse-item title="Events" name="three"> -->
            <div class='events_box'>
              <el-collapse :value="activeIn">
                <el-collapse-item v-for='(item,index) in detailData.events_timestamp' :key='index' :title="item" :name="index">
                  <ul class='ul_box'>
                    <li>
                      <div class="ul_label">message</div>
                      <div class="ul_value" style='color:#008080;white-space: pre-wrap;'>"{{detailData.events_name[index]}}"</div>
                    </li>
                    <li v-for='(value,key) in detailData.events_attributes[index]' :key='key'>
                      <div class="ul_label">{{key}}</div>
                      <div class="ul_value" style='color:#008080;white-space: pre-wrap;'>"{{value}}"</div>
                    </li>
                    <!-- <li>
                      <div class="ul_label">message.type</div>
                      <div class="ul_value" style='color:#008080'>"{{detailData.events_attributes[index]['message.type']}}"</div>
                    </li>
                      <li>
                      <div class="ul_label">message.id</div>
                      <div class="ul_value" style='color:#0000ff'>{{detailData.events_attributes[index]['message.id']}}</div>
                    </li> -->
                  </ul>
                </el-collapse-item>
              </el-collapse>
            </div>
          </el-collapse-item>
        </el-collapse>
    </el-drawer>
  </div>
</template>

<script>
import { traceList, traceGraph } from '@/api/trace'
import { listBiz,listBizStats,listBizGraph} from '@/api/mapping'
export default {
  data(){
    return {
      Visible:false,
      isFull: false,
      drawer:false,
      // activeIn:['1'],
      detailData:{},
      expands:[],
      activeNames:['one','tow','three'],
      loading: false,
      topoUrl:'http://observe-front.cestong.com.cn/ui/index.html',
      flag:false,
      graphData:{},
      // 设置选中的列的复选框
      colSelect: [
        "Name",
        "StartTime",
        "Cost(ms)",
        "Duration(%)",
        "SpanKind",
        "ServiceName",
        "HttpUrl",
        "HttpCode",
        "DbConnectionString"
      ],
      colData: [
        { title: "Name", istrue: false },
        { title: "StartTime", istrue: false },
        { title: "Cost(ms)", istrue: false },
        { title: "Duration(%)", istrue: false },
        // { title: "StatusCode", istrue: false },
        { title: "SpanKind", istrue: false },
        { title: "ServiceName", istrue: false },
        { title: "EventsAttributes", istrue: false },
        { title: "EventsName", istrue: false },
        { title: "EventsTimestamp", istrue: false },
        { title: "HttpUrl", istrue: false },
        { title: "HttpMethod", istrue: false },
        { title: "ContainerId", istrue: false },
        { title: "httpCode", istrue: false },
        { title: "DbConnectionString", istrue: false },
        { title: "RpcMethod", istrue: false },
        { title: "ResourceAttributes", istrue: false },
        { title: "SpanAttributes", istrue: false },
        { title: "MaxDepth", istrue: false },
        // { title: "dbConnectionString", istrue: false },
        { title: "DbStatement", istrue: false },
      ],
      num:0,
      tableData:[],
      tableDetail:null,
      selectList:[],
      treeList:[],
      // 总条数
      total: 0,
      queryTrace:{
        app_id:'',
        start_time:'',
        end_time:'',
        pageIndex:1,
        pageSize:10
      },
      // 查询参数
      queryParams: {
        trace_id:'',
        pageIndex:1,
        pageSize:10,
      },
      tractID:'',
      treeLoading:false,
      appItem:{},
      BizStatsQuery:{
        biz_id:0,
        start_time:'',
        end_time:'',
      },
    }
  },
  computed: {
    activeIn() {
      if(this.detailData.events_timestamp.length>0 && this.detailData.events_timestamp!=null){
          return this.detailData.events_timestamp.map((item,i) => {
            return i;
        });
      }      
    }
  },
  watch: {},
  created(){ 
    this.$store.commit('time/setTimeFlag',false)

    this.appItem=storage.get('appsItem');
    if(JSON.stringify(this.appItem) !="{}"){
      this.queryTrace.app_id = this.appItem.id;
      const start_time = this.$store.state.time.globalTimes.startTime
      const end_time = this.$store.state.time.globalTimes.endTime
      this.queryTrace.start_time = start_time;
      this.queryTrace.end_time = end_time;
      this.BizStatsQuery.start_time= start_time;
      this.BizStatsQuery.end_time= end_time;
      // this.getListUrlMappingErrors();
      // this.getListUrlMappingQuality();
      // this.getListBiz();
    }

    // let traceId='';
    // let strr = window.location.href;
    // let param = this.parseQueryString(strr);
    // if(param.traceId!=undefined){
    //   this.queryTrace.trace_id = param.traceId;
    //   this.queryTrace.app_alias=String(param.app_alias);
    //   this.tractID = param.traceId;
    //    this.getTraceList();
    // }

    // if(param.min_duration != undefined && param.max_duration !=undefined){
    //     this.queryTrace.start_time = param.start_time;
    //     this.queryTrace.end_time = param.end_time;
    //     this.queryTrace.min_duration = param.min_duration;
    //     this.queryTrace.max_duration = param.max_duration;
    //     this.queryTrace.app_alias = String(param.app_alias);
    //     if(param.failed != undefined){
    //       this.queryTrace.failed= JSON.parse(param.failed);
    //     }
    //     this.queryTrace.pageIndex = 1;
    //     this.queryTrace.pageSize =10;
    //     this.queryTrace.trace_id = ''
    //     this.getTraceList();
    // }
  

    
    this.columnChange();
  },
  methods:{
    clickFull() {
        this.Visible=true;
        this.$refs['topo'].initGraph();
    },
     handlePaste(e){
        var clip = e.clipboardData.getData('Text');
        this.queryTrace.trace_id  = clip;
        this.$forceUpdate();
    },
    change(e){
        this.$forceUpdate();
    },
    parseQueryString(url){
      var json = {};
      var arr = url.substr(url.indexOf('?') + 1).split('&');
      arr.forEach(item=>{
          var tmp = item.split('=');
                    json[tmp[0]] = tmp[1];
      });
      return json;
    },
    getRowData(row){
      this.detailData = row;
      this.drawer=true;
    },
    drawerClose() {
      this.drawer = false;
    },
    // toogleExpand(row,expandedRows){
    //   // this.childQueryParams.id = row.id;

    //     // this.rowData = []
    //     var that = this
    //     if (expandedRows.length) {
    //       that.expands = []
    //       if (row) {
    //         that.expands.push(row.id)
    //       }
    //     } else {
    //       that.expands = []
    //     }
    // },
    //根据行的id判断
    getRowKeys(row) {
      return row.span_id;
    },
    rowClassRender({row}) {
      if(row.events_timestamp!=null){
        if(row.events_timestamp.length>0){
          return { "background-color": "#fef0f0" }
        }else{
          return '';
        }
      }
    },
    clickRowHandleNode(item){
      this.detailData = item;
      this.drawer=true;
    },
    clickRowHandle(row, column, event) {
      this.detailData = row;
      this.drawer=true;
    },
    status_change(row){
      if(row.row.events_timestamp!=null){
        if(row.row.events_timestamp.length>0){
          return 'table-error-row'
        }else{
          return ''
        }
      }else{
        return ''
      }
      
    },
     /** 搜索按钮操作 */
    handleQuery() {
      this.queryTrace.pageIndex = 1
      // this.queryParams.pageIndex = 1
      // this.getSingleTrace()
      this.getTraceList();
    },
    //控制列的显示和隐藏
    columnChange(val) {
      this.colData.filter((i) => {
        if (this.colSelect.indexOf(i.title) !== -1) {
          i.istrue = true;
        } else {
          i.istrue = false;
        }
      });
    },
    getTraceList(){
      this.loading=true;
        // this.queryTrace.pageSize = 10;
         listBiz(this.queryTrace).then(res=>{
          if(res.code == 200){
            this.loading=false;
            let list = res.data.list;
            this.selectList = res.data.list;
            this.total = res.data.count;
            if(list.length>0){
              for(let i=0;i<list.length;i++){
                for(let j=0;j<this.selectList.length;j++){
                  if(this.selectList[i].id == list[i].id){
                    this.BizStatsQuery.biz_id = list[i].id;
                    listBizStats(this.BizStatsQuery).then(res=>{
                      list[i] = {...list[i],...res.data}
                    })
                  }
                }
                
              }
              this.selectList = list;
            }

          }
          
        })
    },
    getSingleTrace(){
         traceList(this.queryParams).then(res=>{
          if(res.code == 200){
            this.selectList = res.data.list
            // this.total = res.data.count;
          }
          
        })
    },
    getTraceDetail(biz_id){
      this.treeLoading=true;
       listBizGraph({biz_id:biz_id}).then(res=>{
          if(res.code == 200){
            this.num = 1;
            this.treeLoading=false;
            this.tableData=res.data
            this.tableDetail = res.data;

            let arr  = res.data
            // let List = this.handleDataTree(arr)
            // this.graphData=List[0];
            
            let List = this.handleData(arr)
            this.graphData = List;


            

          }
        })
    },
    handleData(data) {
          data.forEach((v, k) => {

          v.id = v.span_id;

          v.collapsed = false;
          v.name = v.span_name;
          // v.label = (v.duration).toFixed(2);
          v.label = v.duration.toFixed(2);
          v.currency='ms';
          v.rate = v.duration_persent;
          v.status = (v.status_code == 'STATUS_CODE_ERROR'||v.events_timestamp.length>0||v.http_code>399)?'R':(v.duration>500)?'Y':'G';
          v.variableValue = v.duration_persent;
          // v.status_code = 'UNSET'
          
          if (v.children != undefined && v.children.length > 0) {
              v.children = this.handleData(v.children)
            }
          })
          return data
    },
    handlerTreeData(arr) {
      if (arr) {
        arr.forEach((item) => {
          // if(item[key]){
          //   delete item[key]
          // }
          // const {gender, ...item} = item;
          if (item.children && item.children!==[]) handler(item.children)
        })
        return arr
      }
    },
    //删除树形结构数据中的某个属性
    handlerTreeDataSimple (arr, key) {
      if (arr) {
        arr.forEach((item) => {
          if(item[key]){
            delete item[key]
          }
          if (item.children && item.children!==[]) handler(item.children, key)
        })
        return arr
      }
    },
    handleDataTree(data) {
          let obj = {}
          let list = [];
          data.forEach((v, k) => {
          obj.id = v.span_id.substr(v.span_id.length - 4);;
          obj.collapsed = false;
          obj.name = v.span_name;
          obj.label = (v.duration).toFixed(2);
          obj.rate = v.duration_persent.toFixed(2);
          obj.status = v.status_code == 'STATUS_CODE_ERROR'?'R':'G';
          obj.variableValue = v.duration_persent.toFixed(2);
          obj.currency='ms';
          obj.variableName='V1';
          obj.variableUp=false;
            if (v.children != undefined && v.children.length > 0) {
                obj.children = this.handleDataTree(v.children)
            }
            list.push(obj)
          })
          return list
    },
     
    getTraceGraph(trace_id){
      traceGraph(trace_id).then(res=>{
          if(res.code == 200){
            res.data.nodes = res.data.nodes.map((item)=>({
              label:item.title,
              id: item.id,
              title: item.title,
              subtitle: item.subtitle,
              mainstat: item.mainstat,
              secondarystat: item.secondarystat,
              arc_green: item.arc_green,    // 结点圆圈颜色，1代表纯绿色，与red和为1
              arc_red: item.arc_red,      // 计算方式为当spankind为client时， current/total的值
              icon: item.icon
            }))
            // this.graphData=res.data
          }
        })
     },
     handleRowClick(row, column, event){
      setTimeout(()=>{
        this.flag = true;
        this.tractID = row.trace_id;
        this.$refs.table.toggleRowSelection(row);
        this.getTraceDetail(row.trace_id);
        // this.getTraceGraph(this.tractID);
      },0)
      // this.num = 1;
      
     },
     toggleTab(val){
      this.num = val;
     }
  }
}
</script>

<style lang='scss' scoped>
.TreeBox{
  display: flex;
  justify-content: space-between;
}

 [v-cloak]{
    display: none!important;
  }
::v-deep .el-tooltip__popper{ max-width:50%!important }

.table-error-row td{
  background-color: #fef0f0;
}

::v-deep .collapse-title {
  flex: 1 0 90% !important;
  order: 1 !important;
}
::v-deep .el-collapse-item__header {
    flex: 1 0 auto !important;
    order: -1 !important;
    padding-left:8px!important;
    height: 30px;
    line-height: 30px;
  }
::v-deep .el-collapse-item__header:hover{
    background: rgb(232, 232, 232);
}
::v-deep .el-drawer__header{
  margin-bottom: 0!important;
  font-weight: 500;
}
ul {
    display: block;
    list-style-type: disc;
    margin-block-start: 0;
    margin-block-end: 0;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    padding-inline-start: 0;
}
.ul_box{
      border: 1px solid rgba(36, 41, 46, 0.12);
      box-sizing: border-box;
      padding:4px;
      margin:8px;
      border-radius: 3px;
}
.ul_box li{
  display: flex;
  min-height: 30px;
  line-height: 30px;
  box-sizing: border-box;
  // padding:0 4px;
}
.ul_box li .ul_label{
    color: rgb(136, 136, 136);
    // white-space: pre;
    width: 180px;
    min-width: 180px;
    display: flex;
    flex-direction: column;
    // align-items: flex-end;
    justify-content: flex-end;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.ul_box li .ul_value{
  // white-space: nowrap;
  // word-break: keep-all;
  // overflow: hidden;
  // text-overflow: ellipsis;
  font-family: monospace;
   display: flex;
  flex-direction: column;
  // align-items: flex-end;
  justify-content: flex-end;
}
.ul_box li:nth-child(even) {
  background: rgb(245, 245, 245);
}
.events_box{
  padding:8px;
  border: 1px solid rgba(36, 41, 46, 0.12);
  border-radius: 3px;
}
.events_box ::v-deep .el-collapse-item__header {
    background-color: rgb(244, 245, 245)
        // background: rgb(228, 228, 228);
}
.css-container{
  background-color: rgb(255, 255, 255);
    border: 1px solid rgba(36, 41, 46, 0.12);
    position: relative;
    border-radius: 2px;
    height: 100%;
    display: flex;
    flex-direction: column;
}
.css-header{
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    height: 32px;
    cursor: auto;
    .css-title{
      margin-bottom: 0px;
      padding: 0px 8px;
      text-overflow: ellipsis;
      overflow: hidden;
      white-space: nowrap;
      font-size: 14px;
      font-weight: 550;
      line-height: 1.57143;
      letter-spacing: 0.2px;
      font-family: Inter, Helvetica, Arial, sans-serif;
    }
}
.css-content{
    padding: 0px;
    box-flex:1;
    -webkit-box-flex: 1;
    flex-grow: 1;
    contain: none;
}
.css-page-header{
  background-color: rgb(255, 255, 255);
  padding: 0.5em 0px 0px;
  position: sticky;
  top: 0px;
  z-index: 5;
}
.css-name{
    align-items: flex-start;
    display: flex;
    padding: 0px 8px;
    .css-name-title{
          color: inherit;
          flex: 1 1 0%;
          font-size: 1.7em;
          line-height: 1em;
          margin: 0px 0px 0.45em;
          font-weight: 400;
          letter-spacing: -0.00893em;
          font-family: Inter, Helvetica, Arial, sans-serif;
          .trace-name{
            font-size: 18px;
          }
          .css-text{
            display: inline-block;
            white-space: pre;
          }
      }
}
.css-small{
  color: rgb(170, 170, 170);
  margin: 0px 12px;
  font-size: 12px;
  font-weight: 400;
}
.css-action{
    font-size: 14px;
    font-weight: 500;
    font-family: Inter, Helvetica, Arial, sans-serif;
}
.css-time-box{
    flex: 1 1 0%;
    line-height: 1.5;
    margin: -8px 8px 12px;
}
.css-time-wrap{
  vertical-align: middle;
}
.css-time-vlaue-detail{
      color: rgb(170, 170, 170);
}
.css-type {
    margin: 0px 12px;
    // vertical-align: text-top;
}
.css-api{
  margin: -2.5px 2.4px;
  height: 15px;
  overflow: hidden;
  word-break: break-all;
  line-height: 20px;
}
.full{
  width:32px;
  height:32px;
  position: absolute;
  top:-35px;
  right:0px;
  display: block;
  i{
    font-size: 16px;
    color:#999;
  }
}
</style>
<style scoped>
.el-tooltip__popper{ max-width:50%!important }
[v-cloak]{
  display:none!important;
}

</style>