Huawei_Technology
/
mindspore-mindinsight
Not watched
1
0
Fork 0
Code
Releases 11 Wiki evaluate Activity
Issues 0 Pull Requests 0 Datasets Model Cloudbrain HPC
You can not select more than 25 topics Topics must start with a chinese character,a letter or number, can include dashes ('-') and can be up to 35 characters long.
Tree: 94a9d455f5
Branches Tags
${ item.name }
Create branch ${ searchTerm }
from '94a9d455f5'
${ noResults }
mindspore-mindinsight/mindinsight/ui/src/views/profiling/data-process.vue

1591 lines
50 kB
Raw Blame History 

  1. <!--

  2. Copyright 2020 Huawei Technologies Co., Ltd.All Rights Reserved.

  3. 

  4. Licensed under the Apache License, Version 2.0 (the "License");

  5. you may not use this file except in compliance with the License.

  6. You may obtain a copy of the License at

  7. 

  8. http://www.apache.org/licenses/LICENSE-2.0

  9. 

  10. Unless required by applicable law or agreed to in writing, software

  11. distributed under the License is distributed on an "AS IS" BASIS,

  12. WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.

  13. See the License for the specific language governing permissions and

  14. limitations under the License.

  15. -->

  16. <template>

  17.   <div class="data-process-wrap">

  18.     <div class="title">{{$t('profiling.minddataTitle')}}</div>

  19.     <el-tabs v-model="activeName"

  20.              @tab-click="handleClick">

  21.       <el-tab-pane :label="$t('profiling.queueInfo')"

  22.                    name="queueInfo">

  23.         <div class="data-process-top"

  24.              v-show="!processSummary.noData">

  25.           <div class="cell-container data-process">

  26.             <div class="title">

  27.               {{$t('profiling.pipeline')}}

  28.             </div>

  29.           </div>

  30. 

  31.           <div class="queue-container">

  32.             <div class="img">

  33.               <div class="edge">

  34.                 <img src="@/assets/images/data-flow.png"

  35.                      alt="" />

  36.               </div>

  37.               <div class="icon">

  38.                 <img src="@/assets/images/queue.svg"

  39.                      alt=""

  40.                      @click="highlight('connector_queue')"

  41.                      clickKey="connector_queue" />

  42.               </div>

  43.               <div class="edge">

  44.                 <img src="@/assets/images/data-flow.png"

  45.                      alt="" />

  46.               </div>

  47.             </div>

  48.             <div class="title">{{connectorQuene}}</div>

  49.             <div class="description">

  50.               <div class="item"

  51.                    v-if="processSummary.device.empty || processSummary.device.empty === 0">

  52.                 {{$t('profiling.queueTip2')}}

  53.                 <span class="num">

  54.                   {{processSummary.device.empty}}/{{processSummary.device.total}}

  55.                 </span>

  56.               </div>

  57.               <div class="item"

  58.                    v-if="processSummary.device.full || processSummary.device.full === 0">

  59.                 {{$t('profiling.queueTip1')}}

  60.                 <span class="num">

  61.                   {{processSummary.device.full}}/{{processSummary.device.total}}

  62.                 </span>

  63.               </div>

  64.             </div>

  65.           </div>

  66. 

  67.           <div class="cell-container device_queue_op"

  68.                @click="highlight('device_queue_op')"

  69.                clickKey="device_queue_op"

  70.                :style="{cursor: processSummary.count !== processSummary.maxCount ? 'default' : 'pointer'}">

  71.             <div class="title">

  72.               {{$t('profiling.deviceQueueOp')}}

  73.             </div>

  74.           </div>

  75. 

  76.           <div class="queue-container"

  77.                v-show="processSummary.count === processSummary.maxCount">

  78.             <div class="img">

  79.               <div class="edge">

  80.                 <img src="@/assets/images/data-flow.png"

  81.                      alt="" />

  82.               </div>

  83.               <div class="icon">

  84.                 <img src="@/assets/images/queue.svg"

  85.                      @click="highlight('data_queue')"

  86.                      clickKey="data_queue"

  87.                      alt="" />

  88.               </div>

  89.               <div class="edge">

  90.                 <img src="@/assets/images/data-flow.png"

  91.                      alt="" />

  92.               </div>

  93.             </div>

  94.             <div class="title">{{$t('profiling.dataQueue')}}</div>

  95.             <div class="description">

  96.               <div class="item"

  97.                    v-if="processSummary.get_next.empty || processSummary.get_next.empty === 0">

  98.                 {{$t('profiling.queueTip2')}}

  99.                 <span class="num">

  100.                   {{processSummary.get_next.empty}}/{{processSummary.get_next.total}}

  101.                 </span>

  102.               </div>

  103.               <div class="item"

  104.                    v-if="processSummary.get_next.full || processSummary.get_next.full === 0">

  105.                 {{$t('profiling.queueTip1')}}

  106.                 <span class="num">

  107.                   {{processSummary.get_next.full}}/{{processSummary.get_next.total}}

  108.                 </span>

  109.               </div>

  110.             </div>

  111.           </div>

  112. 

  113.           <div class="cell-container get-next"

  114.                @click="highlight('get_next')"

  115.                clickKey="get_next"

  116.                v-if="processSummary.count === processSummary.maxCount">

  117.             <div class="title">

  118.               {{$t('profiling.getData')}}

  119.             </div>

  120.           </div>

  121.         </div>

  122.         <div class="data-process-bottom" v-show="!processSummary.noData">

  123.           <div class="queue-step-wrap"

  124.                v-if="processSummary.count === processSummary.maxCount">

  125.             <div class="title">{{$t('profiling.queueStep')}}</div>

  126.             <div class="chart-content">

  127.               <div class="chart-wrap"

  128.                    :class="{highlight:selected==='connector_queue'}">

  129.                 <div class="title">{{connectorQuene}}</div>

  130.                 <template v-if="!connectQueueChart.noData">

  131.                   <div class="data-tips">

  132.                     <div v-if="connectQueueChart.queueSummary.empty_queue!==undefined">

  133.                       {{$t('profiling.queueTip2')}}{{connectQueueChart.queueSummary.empty_queue}}

  134.                       /{{connectQueueChart.size}}</div>

  135.                     <div v-if="connectQueueChart.queueSummary.full_queue!==undefined">

  136.                       {{$t('profiling.queueTip1')}}{{connectQueueChart.queueSummary.full_queue}}

  137.                       /{{connectQueueChart.size}}</div>

  138.                   </div>

  139.                   <div id="connect-queue"

  140.                        class="chart"></div>

  141.                 </template>

  142.               </div>

  143.               <div class="chart-wrap"

  144.                    :class="{highlight:selected==='data_queue'}">

  145.                 <div class="title">{{$t('profiling.dataQueue')}}</div>

  146.                 <template v-if="!dataQueueChart.noData">

  147.                   <div class="data-tips">

  148.                     <div v-if="dataQueueChart.queueSummary.empty_queue!==undefined">

  149.                       {{$t('profiling.queueTip2')}}{{dataQueueChart.queueSummary.empty_queue}}

  150.                       /{{dataQueueChart.size}}</div>

  151.                     <div v-if="dataQueueChart.queueSummary.full_queue!==undefined">

  152.                       {{$t('profiling.queueTip1')}}{{dataQueueChart.queueSummary.full_queue}}

  153.                       /{{dataQueueChart.size}}</div>

  154.                   </div>

  155.                   <div id="data-queue"

  156.                        class="chart"></div>

  157.                 </template>

  158.               </div>

  159.             </div>

  160.           </div>

  161.           <div class="queue-step-wrap"

  162.                v-if="processSummary.count === processSummary.maxCount">

  163.             <div class="title">{{$t('profiling.operatorTimeConAnalysis')}}</div>

  164.             <div class="chart-content second">

  165.               <div class="chart-wrap analysis"

  166.                    :class="{highlight:selected==='device_queue_op'}">

  167.                 <div class="title">{{$t('profiling.deviceQueueOp')}}</div>

  168.                 <template v-if="!deviceQueueOpChart.noData">

  169.                   <div class="data-tips">

  170.                     <div v-if="deviceQueueOpChart.timeSummary.avg_cost!==undefined">

  171.                       {{$t('profiling.avgCost')}}{{deviceQueueOpChart.timeSummary.avg_cost}}ms</div>

  172.                     <div v-if="deviceQueueOpChart.timeSummary.get_cost!==undefined">

  173.                       {{$t('profiling.getCost')}}{{deviceQueueOpChart.timeSummary.get_cost}}ms</div>

  174.                     <div v-if="deviceQueueOpChart.timeSummary.push_cost!==undefined">

  175.                       {{$t('profiling.pushCost')}}{{deviceQueueOpChart.timeSummary.push_cost}}ms</div>

  176.                   </div>

  177.                   <div id="device_queue_op"

  178.                        class="chart"></div>

  179.                 </template>

  180.               </div>

  181.               <div class="chart-wrap analysis"

  182.                    :class="{highlight:selected==='get_next'}">

  183.                 <div class="title">{{$t('profiling.getNext')}}</div>

  184.                 <template v-if="!getNextChart.noData">

  185.                   <div class="data-tips">

  186.                     <div v-if="getNextChart.timeSummary.avg_cost!==undefined">

  187.                       {{$t('profiling.avgCost')}}{{getNextChart.timeSummary.avg_cost}}ms</div>

  188.                     <div v-if="getNextChart.timeSummary.get_cost!==undefined">

  189.                       {{$t('profiling.getCost')}}{{getNextChart.timeSummary.get_cost}}ms</div>

  190.                     <div v-if="getNextChart.timeSummary.push_cost!==undefined">

  191.                       {{$t('profiling.pushCost')}}{{getNextChart.timeSummary.push_cost}}ms</div>

  192.                   </div>

  193.                   <div id="get_next"

  194.                        class="chart"></div>

  195.                 </template>

  196.               </div>

  197.             </div>

  198.           </div>

  199.           <div class="queue-step-wrap single"

  200.                v-if="processSummary.count !== processSummary.maxCount">

  201.             <div class="title">{{$t('profiling.queueStep')}}</div>

  202.             <div class="chart-content">

  203.               <div class="chart-wrap"

  204.                    :class="{highlight:selected==='connector_queue'}">

  205.                 <div class="title">{{connectorQuene}}</div>

  206.                 <template v-if="!connectQueueChart.noData">

  207.                   <div class="data-tips">

  208.                     <div v-if="connectQueueChart.queueSummary.empty_queue!==undefined">

  209.                       {{$t('profiling.queueTip2')}}{{connectQueueChart.queueSummary.empty_queue}}

  210.                       /{{connectQueueChart.size}}</div>

  211.                     <div v-if="connectQueueChart.queueSummary.full_queue!==undefined">

  212.                       {{$t('profiling.queueTip1')}}{{connectQueueChart.queueSummary.full_queue}}

  213.                       /{{connectQueueChart.size}}</div>

  214.                   </div>

  215.                   <div id="connect-queue"

  216.                        class="chart"></div>

  217.                 </template>

  218.               </div>

  219.             </div>

  220.           </div>

  221.         </div>

  222.         <div class="image-noData"

  223.              v-if="processSummary.noData">

  224.           <div>

  225.             <img :src="require('@/assets/images/nodata.png')"

  226.                  alt="" />

  227.           </div>

  228.           <p>{{(initOver)?$t("public.noData"):$t("public.dataLoading")}}</p>

  229.         </div>

  230.       </el-tab-pane>

  231.       <el-tab-pane :label="$t('profiling.pipeline')"

  232.                    name="pipeLine">

  233.         <div class="pipeline-wrap"

  234.              v-show="!pipeData">

  235.           <div class="pipeline-top">

  236.             <div class="pipeline-top-title">

  237.               {{$t('profiling.pipelineTopTitle')}}

  238.             </div>

  239.             <div class="average-rate-wrap">

  240.               <div id="average-rate"></div>

  241.             </div>

  242.           </div>

  243.           <div class="pipeline-middle">

  244.             <div class="pipeline-middle-title">

  245.               {{$t('profiling.pipelineMiddleTitle')}}

  246.             </div>

  247.             <div class="operator-graph">

  248.               <div id="graph"></div>

  249.             </div>

  250.           </div>

  251.           <div class="pipeline-bottom">

  252.             <div class="queue-deep-wrap">

  253.               <div class="left">

  254.                 <div id="queue-deep"></div>

  255.               </div>

  256.               <div class="right">

  257.                 <div class="title">{{$t('profiling.operatorInfo',{msg1:current_op.name,msg2:parent_op.name})}}</div>

  258.                 <div class="item-wrap">

  259.                   <div class="item"><span>{{current_op.name}} ID:</span>{{current_op.op_id}}</div>

  260.                   <div class="item"><span>{{current_op.name}} type:</span>{{current_op.op_type}}</div>

  261.                   <div class="item">

  262.                     <span>{{current_op.name}} {{$t('profiling.workersNum')}}:</span>

  263.                     {{current_op.num_workers}}

  264.                   </div>

  265.                   <div class="item"><span>{{parent_op.name}} ID:</span>{{parent_op.op_id}}</div>

  266.                   <div class="item"><span>{{parent_op.name}} type:</span>{{parent_op.op_type}}</div>

  267.                   <div class="item">

  268.                     <span>{{parent_op.name}} {{$t('profiling.workersNum')}}:</span>

  269.                     {{parent_op.num_workers}}

  270.                   </div>

  271.                 </div>

  272.               </div>

  273.             </div>

  274.           </div>

  275.         </div>

  276.         <div class="image-noData"

  277.              v-if="pipeData">

  278.           <div>

  279.             <img :src="require('@/assets/images/nodata.png')"

  280.                  alt="" />

  281.           </div>

  282.           <p>{{initOver?$t("public.noData"):$t("public.dataLoading")}}</p>

  283.         </div>

  284.       </el-tab-pane>

  285.     </el-tabs>

  286.   </div>

  287. </template>

  288. <script>

  289. import echarts from 'echarts';

  290. import RequestService from '../../services/request-service';

  291. import {select, selectAll, zoom} from 'd3';

  292. import {event as currentEvent} from 'd3-selection';

  293. import 'd3-graphviz';

  294. const d3 = {select, selectAll, zoom};

  295. export default {

  296.   props: {},

  297.   data() {

  298.     return {

  299.       dir: '', // Profiler path

  300.       currentCard: '', // Purrent card number

  301.       connectQueueChart: {

  302.         // Ponnect queue chart object

  303.         id: 'connect-queue',

  304.         chartDom: null,

  305.         data: [],

  306.         queueSummary: {},

  307.         advise: '',

  308.         type: 0,

  309.         params: 'device_queue',

  310.         noData: true,

  311.         size: null,

  312.         deviceId: null,

  313.       },

  314.       dataQueueChart: {

  315.         // Data queue chart object

  316.         id: 'data-queue',

  317.         chartDom: null,

  318.         data: [],

  319.         queueSummary: {},

  320.         advise: '',

  321.         type: 0,

  322.         params: 'get_next',

  323.         noData: true,

  324.         size: null,

  325.       },

  326.       deviceQueueOpChart: {

  327.         // Device queue chart object

  328.         id: 'device_queue_op',

  329.         chartDom: null,

  330.         data: [],

  331.         timeSummary: {},

  332.         type: 1,

  333.         params: 'device_queue',

  334.         noData: true,

  335.       },

  336.       getNextChart: {

  337.         // Get next chart object

  338.         id: 'get_next',

  339.         chartDom: null,

  340.         data: [],

  341.         timeSummary: {},

  342.         type: 1,

  343.         params: 'get_next',

  344.         noData: true,

  345.       },

  346.       processSummary: {

  347.         // Process summary object

  348.         noData: true,

  349.         count: 6,

  350.         maxCount: 6,

  351.         device: {

  352.           empty: 0,

  353.           full: 0,

  354.           total: 0,

  355.         },

  356.         get_next: {

  357.           empty: 0,

  358.           full: 0,

  359.           total: 0,

  360.         },

  361.       },

  362.       activeName: 'queueInfo',

  363.       averageRateChart: {

  364.         // Average rate chart object

  365.         id: 'average-rate',

  366.         chartDom: null,

  367.         deviceId: null,

  368.       },

  369.       queueDeepChart: {

  370.         // Queue deep chart object

  371.         id: 'queue-deep',

  372.         chartDom: null,

  373.       },

  374.       current_op: {},

  375.       parent_op: {},

  376.       pipeData: true,

  377.       initOver: false, // Identify whether the interface returns

  378.       allGraphData: {},

  379.       graphviz: null,

  380.       totalMemory: 16777216 * 2, // Memory size of the graph plug-in

  381.       scaleRange: [0.0001, 10000], // Graph zooms in and zooms out.

  382.       initQueue: '',

  383.       trainId: '',

  384.       selected: '',

  385.       connectorQuene: '',

  386.     };

  387.   },

  388.   watch: {

  389.     '$parent.curDashboardInfo.curCardNum': {

  390.       handler(newValue, oldValue) {

  391.         if (newValue || newValue === 0) {

  392.           this.dir = this.$route.query.dir;

  393.           this.trainId = this.$route.query.id;

  394.           this.currentCard = newValue;

  395.           if (this.trainId) {

  396.             document.title =

  397.               `${decodeURIComponent(this.trainId)}` +

  398.               `-${this.$t('profiling.mindData')}-MindInsight`;

  399.           } else {

  400.             document.title = `${this.$t('profiling.mindData')}-MindInsight`;

  401.           }

  402.           if (this.activeName === 'queueInfo') {

  403.             this.initOver = false;

  404.             this.init();

  405.           } else {

  406.             this.queryAverageRate();

  407.           }

  408.         }

  409.         if (this.activeName === 'queueInfo' && this.$parent.curDashboardInfo.initOver) {

  410.           this.initOver = true;

  411.         }

  412.       },

  413.       deep: true,

  414.       immediate: true,

  415.     },

  416.   },

  417.   computed: {},

  418.   mounted() {

  419.     window.addEventListener(

  420.         'resize',

  421.         this.debounce(this.resizeCallback, 200),

  422.         false,

  423.     );

  424.     setTimeout(() => {

  425.       this.$bus.$on('collapse', this.debounce(this.resizeCallback, 200));

  426.     }, 500);

  427.   },

  428.   methods: {

  429.     /**

  430.      * Anti-shake

  431.      * @param { Function } fn callback function

  432.      * @param { Number } delay delay time

  433.      * @return { Function }

  434.      */

  435.     debounce(fn, delay) {

  436.       let timer = null;

  437.       return function() {

  438.         if (timer) {

  439.           clearTimeout(timer);

  440.         }

  441.         timer = setTimeout(fn, delay);

  442.       };

  443.     },

  444.     /**

  445.      *  Tabs switch

  446.      */

  447.     handleClick() {

  448.       if (

  449.         this.activeName === 'pipeLine' &&

  450.         this.averageRateChart.deviceId !== this.currentCard

  451.       ) {

  452.         this.queryAverageRate();

  453.       } else if (

  454.         this.activeName === 'queueInfo' &&

  455.         this.connectQueueChart.deviceId !== this.currentCard

  456.       ) {

  457.         this.init();

  458.       }

  459.       this.$nextTick(() => {

  460.         this.resizeCallback();

  461.       });

  462.     },

  463.     init() {

  464.       this.connectorQuene = this.$t('profiling.connectorQuene');

  465.       this.queryProcessSummary();

  466.     },

  467.     /**

  468.      *  Resize callback function

  469.      */

  470.     resizeCallback() {

  471.       const chartArr = [

  472.         'connectQueueChart',

  473.         'dataQueueChart',

  474.         'deviceQueueOpChart',

  475.         'getNextChart',

  476.         'averageRateChart',

  477.         'queueDeepChart',

  478.       ];

  479.       chartArr.forEach((val) => {

  480.         if (this[val].chartDom) {

  481.           setTimeout(() => {

  482.             this[val].chartDom.resize();

  483.           }, 300);

  484.         }

  485.       });

  486.     },

  487.     /**

  488.      * Query minddata data

  489.      * @param {Object} chart Chart object

  490.      */

  491.     queryMinddataOp(chart) {

  492.       const params = {

  493.         profile: this.dir,

  494.         device_id: this.currentCard,

  495.         type: chart.params,

  496.         train_id: this.trainId,

  497.       };

  498.       RequestService.minddataOp(params).then(

  499.           (res) => {

  500.             if (res && res.data) {

  501.               const result = res.data;

  502.               chart.data = result.info;

  503.               if (result.summary) {

  504.                 chart.timeSummary = result.summary.time_summary || {};

  505.                 Object.keys(chart.timeSummary).forEach((val) => {

  506.                   chart.timeSummary[val] = parseFloat(

  507.                       chart.timeSummary[val],

  508.                   ).toFixed(3);

  509.                 });

  510.               }

  511.               chart.advise = result.advise;

  512.               if (result.size > 0) {

  513.                 chart.noData = false;

  514.                 this.$nextTick(() => {

  515.                   this.setOption(chart);

  516.                 });

  517.               } else {

  518.                 if (chart.chartDom) {

  519.                   chart.chartDom.clear();

  520.                 }

  521.                 chart.noData = true;

  522.               }

  523.             }

  524.           },

  525.           (err) => {

  526.             if (chart.chartDom) {

  527.               chart.chartDom.clear();

  528.             }

  529.             chart.noData = true;

  530.           },

  531.       );

  532.     },

  533.     /**

  534.      * Query queue info

  535.      * @param {Object} chart Chart object

  536.      */

  537.     queryQueueInfo(chart) {

  538.       const params = {

  539.         profile: this.dir,

  540.         device_id: this.currentCard,

  541.         type: chart.params,

  542.         train_id: this.trainId,

  543.       };

  544.       RequestService.queueInfo(params).then(

  545.           (res) => {

  546.             if (res && res.data) {

  547.               const result = res.data;

  548.               chart.data = result.info;

  549.               if (result.summary) {

  550.                 chart.queueSummary = result.summary.queue_summary || {};

  551.               }

  552.               chart.advise = result.advise;

  553.               if (result.size > 0) {

  554.                 chart.noData = false;

  555.                 chart.size = result.size;

  556.                 this.$nextTick(() => {

  557.                   this.setOption(chart);

  558.                 });

  559.               } else {

  560.                 if (chart.chartDom) {

  561.                   chart.chartDom.clear();

  562.                 }

  563.                 chart.noData = true;

  564.               }

  565.             }

  566.           },

  567.           (err) => {

  568.             chart.noData = true;

  569.             if (chart.chartDom) {

  570.               chart.chartDom.clear();

  571.             }

  572.           },

  573.       );

  574.     },

  575.     /**

  576.      * Chart set option

  577.      * @param {Object} chart Chart object

  578.      */

  579.     setOption(chart) {

  580.       const myChart = echarts.init(document.getElementById(chart.id));

  581.       const option = {

  582.         tooltip: {

  583.           trigger: 'axis',

  584.         },

  585.         toolbox: {

  586.           show: true,

  587.         },

  588.         xAxis: {

  589.           name: 'step',

  590.           data: [],

  591.         },

  592.         yAxis: {},

  593.         series: [],

  594.         grid: {

  595.           left: 50,

  596.           top: 20,

  597.           right: 50,

  598.           bottom: 60,

  599.         },

  600.       };

  601.       option.dataZoom = [

  602.         {

  603.           start: 0,

  604.           end: 100,

  605.           bottom: 0,

  606.         },

  607.         {

  608.           start: 0,

  609.           end: 100,

  610.           type: 'inside',

  611.           bottom: 0,

  612.         },

  613.       ];

  614.       const arr = [];

  615.       Object.keys(chart.data).forEach((val, index) => {

  616.         const item = {};

  617.         item.type = 'line';

  618.         item.data = chart.data[val];

  619.         item.name = val;

  620.         if (chart.type === 0) {

  621.           const markPointArr = [];

  622.           item.data.forEach((val, key) => {

  623.             if (val === 0) {

  624.               markPointArr.push({xAxis: key, yAxis: val, symbolSize: 20});

  625.             }

  626.           });

  627.           item.markPoint = {data: markPointArr};

  628.         }

  629.         arr.push(item);

  630.       });

  631.       option.series = arr;

  632.       option.xAxis.data = chart.data[Object.keys(chart.data)[0]].map(

  633.           (val, index) => index + 1,

  634.       );

  635. 

  636.       myChart.setOption(option);

  637.       chart.chartDom = myChart;

  638.       if (this.connectQueueChart.chartDom && this.deviceQueueOpChart.chartDom) {

  639.         echarts.connect([

  640.           this.connectQueueChart.chartDom,

  641.           this.deviceQueueOpChart.chartDom,

  642.         ]);

  643.       }

  644.       if (this.getNextChart.chartDom && this.dataQueueChart.chartDom) {

  645.         echarts.connect([

  646.           this.getNextChart.chartDom,

  647.           this.dataQueueChart.chartDom,

  648.         ]);

  649.       }

  650.     },

  651.     /**

  652.      * Query process summary info

  653.      */

  654.     queryProcessSummary() {

  655.       const params = {

  656.         profile: this.dir,

  657.         device_id: this.currentCard,

  658.         train_id: this.trainId,

  659.       };

  660.       this.connectQueueChart.deviceId = this.currentCard;

  661.       this.initOver = false;

  662.       RequestService.queryProcessSummary(params).then(

  663.           (res) => {

  664.             if (res && res.data) {

  665.               const data = JSON.parse(JSON.stringify(res.data));

  666.               this.processSummary.count = Object.keys(data).length;

  667.               if (this.processSummary.count) {

  668.                 this.dealProcess(data);

  669.                 this.$nextTick(() => {

  670.                   if (this.processSummary.count < this.processSummary.maxCount) {

  671.                     this.queryQueueInfo(this.connectQueueChart);

  672.                     this.dataQueueChart.noData = false;

  673.                     this.deviceQueueOpChart.noData = false;

  674.                     this.getNextChart.noData = false;

  675.                   } else {

  676.                     this.queryQueueInfo(this.connectQueueChart);

  677.                     this.queryQueueInfo(this.dataQueueChart);

  678.                     this.queryMinddataOp(this.deviceQueueOpChart);

  679.                     this.queryMinddataOp(this.getNextChart);

  680.                   }

  681.                 });

  682.               } else {

  683.                 this.dealProcess(null);

  684.               }

  685.             } else {

  686.               this.dealProcess(null);

  687.             }

  688.           },

  689.           (error) => {

  690.             this.dealProcess(null);

  691.           },

  692.       );

  693.     },

  694.     /**

  695.      * Deal process data

  696.      * @param {Object} data Process data

  697.      */

  698.     dealProcess(data) {

  699.       this.processSummary.device = {

  700.         empty: 0,

  701.         full: 0,

  702.         total: 0,

  703.       };

  704.       this.processSummary.get_next = {

  705.         empty: 0,

  706.         full: 0,

  707.         total: 0,

  708.       };

  709.       this.processSummary.noData = true;

  710.       this.initOver = true;

  711. 

  712.       if (data) {

  713.         if (data.device_queue_info && data.device_queue_info.summary) {

  714.           this.processSummary.device = {

  715.             empty: data.device_queue_info.summary.empty_batch_count,

  716.             full: data.device_queue_info.summary.full_batch_count,

  717.             total: data.device_queue_info.summary.total_batch,

  718.           };

  719.         }

  720.         if (data.get_next_queue_info && data.get_next_queue_info.summary) {

  721.           this.processSummary.get_next = {

  722.             empty: data.get_next_queue_info.summary.empty_batch_count,

  723.             full: data.get_next_queue_info.summary.full_batch_count,

  724.             total: data.get_next_queue_info.summary.total_batch,

  725.           };

  726.         }

  727.         this.processSummary.noData = false;

  728.       }

  729.     },

  730.     /**

  731.      * Query average rate info

  732.      */

  733.     queryAverageRate() {

  734.       const params = {

  735.         params: {

  736.           train_id: this.trainId,

  737.           profile: this.dir,

  738.         },

  739.         body: {

  740.           device_id: this.currentCard,

  741.         },

  742.       };

  743.       this.averageRateChart.deviceId = this.currentCard;

  744.       this.initOver = false;

  745.       RequestService.queryOpQueue(params).then(

  746.           (res) => {

  747.             this.initOver = true;

  748.             if (res && res.data) {

  749.               this.removeGraph();

  750.               const data = JSON.parse(JSON.stringify(res.data));

  751.               this.dealPipeLineData(data);

  752. 

  753.               this.pipeData = !!!(res.data.object && res.data.object.length);

  754.               if (

  755.                 res.data.object &&

  756.               res.data.object.length &&

  757.               res.data.col_name

  758.               ) {

  759.                 const result = res.data.object.map((val) => {

  760.                   const obj = {};

  761.                   res.data.col_name.forEach((value, key) => {

  762.                     obj[value] = val[key];

  763.                   });

  764.                   return obj;

  765.                 });

  766.                 const data = result

  767.                     .sort((a, b) => {

  768.                       return a.output_queue_usage_rate - b.output_queue_usage_rate;

  769.                     })

  770.                     .filter((val) => {

  771.                       return val.parent_id !== null;

  772.                     });

  773. 

  774.                 const dataY = data.map((val) => {

  775.                   return (val.output_queue_usage_rate * 100).toFixed(4);

  776.                 });

  777.                 const dataX = data.map((val) => {

  778.                   return `Queue_${val.op_id}`;

  779.                 });

  780. 

  781.                 const profiling = this.$t('profiling');

  782.                 const option = {

  783.                   tooltip: {

  784.                     trigger: 'axis',

  785.                     axisPointer: {

  786.                       type: 'shadow',

  787.                     },

  788.                     formatter(params) {

  789.                       let value = {};

  790.                       data.forEach((val) => {

  791.                         if (`${val.op_id}` === params[0].axisValue.split('')[6]) {

  792.                           value = val;

  793.                         }

  794.                       });

  795.                       return (

  796.                         `${params[0].axisValue}<br>${params[0].marker}` +

  797.                       `${profiling.averageCapacity}：${value.output_queue_average_size}<br>` +

  798.                       `${params[0].marker}${profiling.totalCapacity}：` +

  799.                       `${value.output_queue_length}`

  800.                       );

  801.                     },

  802.                   },

  803.                   grid: {

  804.                     left: 70,

  805.                     top: 20,

  806.                     right: 100,

  807.                     bottom: 50,

  808.                   },

  809.                   xAxis: {

  810.                     type: 'value',

  811.                     boundaryGap: [0, 0.01],

  812.                     max: 100,

  813.                     axisLabel: {

  814.                       formatter(params) {

  815.                         return `${params}%`;

  816.                       },

  817.                     },

  818.                   },

  819.                   yAxis: {

  820.                     type: 'category',

  821.                     data: dataX,

  822.                   },

  823.                   series: [

  824.                     {

  825.                       type: 'bar',

  826.                       data: dataY,

  827.                       itemStyle: {

  828.                         color: '#00a5a7',

  829.                       },

  830.                       label: {

  831.                         show: true,

  832.                         position: 'right',

  833.                         color: '#000',

  834.                         formatter(params) {

  835.                           return `${params.value}%`;

  836.                         },

  837.                       },

  838.                     },

  839.                   ],

  840.                   dataZoom: [

  841.                     {start: 0, end: 100, orient: 'vertical', right: 10},

  842.                     {

  843.                       start: 0,

  844.                       end: 100,

  845.                       type: 'inside',

  846.                       orient: 'vertical',

  847.                       right: 10,

  848.                     },

  849.                   ],

  850.                 };

  851.                 this.$nextTick(() => {

  852.                   const echart = echarts.init(

  853.                       document.getElementById(this.averageRateChart.id),

  854.                   );

  855.                   echart.setOption(option);

  856.                   this.averageRateChart.chartDom = echart;

  857.                 });

  858.               }

  859.             }

  860.           },

  861.           () => {

  862.             this.initOver = true;

  863.             this.pipeData = true;

  864.             this.removeGraph();

  865.           },

  866.       );

  867.     },

  868.     /**

  869.      * Query queue info

  870.      * @param {Number} id Op id

  871.      */

  872.     queryQueue(id) {

  873.       const params = {

  874.         profile: this.dir,

  875.         train_id: this.trainId,

  876.         device_id: this.currentCard,

  877.         op_id: id,

  878.       };

  879.       RequestService.queryQueue(params).then((res) => {

  880.         if (res && res.data) {

  881.           const data = res.data.queue_info;

  882.           const dataY = data.output_queue_size;

  883.           this.current_op = res.data.current_op || {};

  884.           this.parent_op = res.data.parent_op || {};

  885.           this.current_op.name = `${this.current_op.op_type}_${this.current_op.op_id}`;

  886.           this.parent_op.name = `${this.parent_op.op_type}_${this.parent_op.op_id}`;

  887.           const option = {

  888.             title: {

  889.               text: this.$t('profiling.queueDeepChartTitle', {

  890.                 msg: `Queue${id}`,

  891.               }),

  892.               textStyle: {

  893.                 fontSize: 13,

  894.               },

  895.               left: 20,

  896.               top: 10,

  897.             },

  898.             tooltip: {

  899.               trigger: 'axis',

  900.             },

  901.             xAxis: {

  902.               name: `${this.$t('profiling.sampleInterval')}/${

  903.                 data.sample_interval

  904.               }ms`

  905.                   .split(' ')

  906.                   .join('\n'),

  907.               data: dataY.map((val, index) => index + 1),

  908.             },

  909.             yAxis: {

  910.               name: '',

  911.             },

  912.             series: [

  913.               {

  914.                 type: 'line',

  915.                 data: dataY,

  916.                 itemStyle: {

  917.                   color: '#00a5a7',

  918.                 },

  919.               },

  920.             ],

  921.             grid: {

  922.               left: 50,

  923.               top: 40,

  924.               right: 100,

  925.               bottom: 60,

  926.             },

  927.             dataZoom: [

  928.               {

  929.                 start: 0,

  930.                 end: 100,

  931.                 bottom: 10,

  932.               },

  933.               {start: 0, end: 100, type: 'inside', bottom: 10},

  934.             ],

  935.           };

  936.           this.$nextTick(() => {

  937.             const echart = echarts.init(

  938.                 document.getElementById(this.queueDeepChart.id),

  939.             );

  940.             echart.setOption(option);

  941.             this.queueDeepChart.chartDom = echart;

  942.           });

  943.         }

  944.       });

  945.     },

  946.     highlight(key) {

  947.       if (

  948.         key === 'device_queue_op' &&

  949.         this.processSummary.count !== this.processSummary.maxCount

  950.       ) {

  951.         return;

  952.       }

  953.       const domList = document.querySelectorAll('.data-process-top *[clickKey]');

  954.       Array.prototype.forEach.call(domList, (dom) => {

  955.         if (dom.getAttribute('clickKey') === key) {

  956.           dom.classList.add('selected');

  957.         } else {

  958.           dom.classList.remove('selected');

  959.         }

  960.       });

  961.       this.selected = key;

  962.     },

  963. 

  964.     /** ************************ graph  ****************************/

  965. 

  966.     /**

  967.      * Processing Graph Data

  968.      * @param {Object} data Data of the graph

  969.      */

  970.     dealPipeLineData(data) {

  971.       const colName = data.col_name;

  972.       const colCount = colName.length;

  973.       const list = data.object;

  974. 

  975.       list.forEach((i) => {

  976.         if (i && i.length === colCount) {

  977.           const obj = {

  978.             output: '',

  979.           };

  980.           colName.forEach((key, index) => {

  981.             obj[key] = i[index];

  982.           });

  983. 

  984.           if (obj.op_id || obj.op_id === 0) {

  985.             obj.key = `${obj.op_id}_operator`;

  986.             if (obj.parent_id || obj.parent_id === 0) {

  987.               const queueKey = `${obj.op_id}_queue`;

  988.               obj.output = queueKey;

  989. 

  990.               const queueObj = JSON.parse(JSON.stringify(obj));

  991.               queueObj.key = queueKey;

  992.               queueObj.op_type = 'queue';

  993.               queueObj.output = `${obj.parent_id}_operator`;

  994.               this.allGraphData[queueKey] = queueObj;

  995. 

  996.               if (!(this.initQueue || this.initQueue === 0)) {

  997.                 this.initQueue = queueObj.op_id;

  998.               }

  999.             }

  1000. 

  1001.             this.allGraphData[obj.key] = obj;

  1002.           }

  1003.         }

  1004.       });

  1005.       if (Object.keys(this.allGraphData).length) {

  1006.         const dot = this.packageGraphData();

  1007.         this.initGraph(dot);

  1008.       } else {

  1009.         this.removeGraph();

  1010.       }

  1011.     },

  1012.     /**

  1013.      * Encapsulates graph data into dot data.

  1014.      * @return {String} Dot string for packing graph data

  1015.      */

  1016.     packageGraphData() {

  1017.       let nodeStr = '';

  1018.       let edgeStr = '';

  1019.       Object.keys(this.allGraphData).forEach((key) => {

  1020.         const node = this.allGraphData[key];

  1021.         nodeStr +=

  1022.           `<${key}>[id="${key}";` +

  1023.           `${

  1024.             node.op_type === 'queue'

  1025.               ? `shape=rect;class="queue";label="Queue_${

  1026.                 node.op_id

  1027.               }(${parseFloat(

  1028.                   ((node.output_queue_usage_rate || 0) * 100).toFixed(4),

  1029.               )}%)";`

  1030.               : `shape=Mrecord;class="operator";label="${node.op_type}_${node.op_id}";`

  1031.           }];`;

  1032. 

  1033.         if (node.output) {

  1034.           edgeStr += `<${node.key}>-><${node.output}>`;

  1035.         }

  1036.       });

  1037. 

  1038.       const initSetting =

  1039.         'node[style="filled";fontsize="10px"];edge[fontsize="6px";];';

  1040.       return `digraph {compound=true;rankdir=LR;${initSetting}${nodeStr}${edgeStr}}`;

  1041.     },

  1042. 

  1043.     /**

  1044.      * Initializing the dataset graph

  1045.      * @param {String} dot Dot statement encapsulated in graph data

  1046.      */

  1047.     initGraph(dot) {

  1048.       this.graphviz = d3

  1049.           .select('#graph')

  1050.           .graphviz({useWorker: false, totalMemory: this.totalMemory})

  1051.           .zoomScaleExtent(this.scaleRange)

  1052.           .dot(dot)

  1053.           .attributer(this.attributer)

  1054.           .render(this.startApp);

  1055.     },

  1056.     /**

  1057.      * Default method of the graph rendering adjustment. Set the node format.

  1058.      * @param {Object} datum Object of the current rendering element.

  1059.      * @param {Number} index Indicates the subscript of the current rendering element.

  1060.      * @param {Array} nodes An array encapsulated with the current rendering element.

  1061.      */

  1062.     attributer(datum, index, nodes) {

  1063.       if (datum.tag === 'svg') {

  1064.         const width = '100%';

  1065.         const height = '100%';

  1066.         datum.attributes.width = width;

  1067.         datum.attributes.height = height;

  1068.       }

  1069.     },

  1070.     /**

  1071.      * Initialization method executed after the graph rendering is complete

  1072.      */

  1073.     startApp() {

  1074.       setTimeout(() => {

  1075.         if (this.graphviz) {

  1076.           this.graphviz._data = null;

  1077.           this.graphviz._dictionary = null;

  1078.           this.graphviz = null;

  1079.         }

  1080.       }, 500);

  1081.       d3.select('#graph').selectAll('.operator>title').remove();

  1082. 

  1083.       const queueList = Array.from(document.querySelectorAll('#graph .queue'));

  1084.       for (let i = 0, len = queueList.length; i < len; i++) {

  1085.         const node = queueList[i];

  1086.         const data = this.allGraphData[node.id];

  1087.         if (data) {

  1088.           const polygon = node.querySelector('polygon');

  1089.           const color = `rgba(19, 171, 173, ${data.output_queue_usage_rate})`;

  1090.           polygon.setAttribute('fill', color);

  1091.           polygon.setAttribute('stroke', color);

  1092. 

  1093.           const title = node.querySelector('title');

  1094.           title.textContent =

  1095.             `${this.$t('profiling.averageCapacity')}:${

  1096.               data.output_queue_average_size || 0

  1097.             }\n` +

  1098.             `${this.$t('profiling.totalCapacity')}:${

  1099.               data.output_queue_length || 0

  1100.             }`;

  1101.         }

  1102.       }

  1103. 

  1104.       this.initZooming();

  1105.       const nodes = d3.selectAll('g.queue');

  1106.       nodes.on('click', (target, index, nodesList) => {

  1107.         const selectedNode = nodesList[index];

  1108.         nodes.classed('selected', false);

  1109.         d3.select(`g[id="${selectedNode.id}"]`).classed('selected', true);

  1110.         const nodeData = this.allGraphData[selectedNode.id];

  1111.         if (nodeData) {

  1112.           this.queryQueue(nodeData.op_id);

  1113.         }

  1114.       });

  1115. 

  1116.       d3.select(`g[id="${this.initQueue}_queue"]`).classed('selected', true);

  1117.       this.queryQueue(this.initQueue);

  1118.     },

  1119. 

  1120.     /**

  1121.      * Initializing the Zoom Function of a Graph

  1122.      */

  1123.     initZooming() {

  1124.       const svgDom = document.querySelector('#graph svg');

  1125.       const svgRect = svgDom.getBoundingClientRect();

  1126. 

  1127.       const graphDom = document.querySelector('#graph #graph0');

  1128.       const graphBox = graphDom.getBBox();

  1129.       const graphRect = graphDom.getBoundingClientRect();

  1130.       let graphTransform = {};

  1131. 

  1132.       const minScale = Math.min(

  1133.           svgRect.width / 2 / graphRect.width,

  1134.           svgRect.height / 2 / graphRect.height,

  1135.       );

  1136. 

  1137.       const padding = 4;

  1138.       const minDistance = 20;

  1139.       const pointer = {start: {x: 0, y: 0}, end: {x: 0, y: 0}};

  1140. 

  1141.       const zoom = d3

  1142.           .zoom()

  1143.           .on('start', () => {

  1144.             const event = currentEvent.sourceEvent;

  1145.             pointer.start.x = event.x;

  1146.             pointer.start.y = event.y;

  1147.           })

  1148.           .on('zoom', () => {

  1149.             const event = currentEvent.sourceEvent;

  1150.             const transformData = this.getTransformData(graphDom);

  1151.             if (!Object.keys(graphTransform).length) {

  1152.               graphTransform = {

  1153.                 x: transformData.translate[0],

  1154.                 y: transformData.translate[1],

  1155.                 k: transformData.scale[0],

  1156.               };

  1157.             }

  1158. 

  1159.             let tempStr = '';

  1160.             let change = {};

  1161.             let scale = transformData.scale[0];

  1162.             const graphRect = graphDom.getBoundingClientRect();

  1163.             const transRate = graphBox.width / graphRect.width;

  1164.             if (event.type === 'mousemove') {

  1165.               pointer.end.x = event.x;

  1166.               pointer.end.y = event.y;

  1167.               let tempX = pointer.end.x - pointer.start.x;

  1168.               let tempY = pointer.end.y - pointer.start.y;

  1169.               const paddingTrans = Math.max(

  1170.                   (padding / transRate) * scale,

  1171.                   minDistance,

  1172.               );

  1173.               if (

  1174.                 graphRect.left + paddingTrans + tempX >=

  1175.               svgRect.left + svgRect.width

  1176.               ) {

  1177.                 tempX = Math.min(tempX, 0);

  1178.               }

  1179.               if (

  1180.                 graphRect.left + graphRect.width - paddingTrans + tempX <=

  1181.               svgRect.left

  1182.               ) {

  1183.                 tempX = Math.max(tempX, 0);

  1184.               }

  1185.               if (

  1186.                 graphRect.top + paddingTrans + tempY >=

  1187.               svgRect.top + svgRect.height

  1188.               ) {

  1189.                 tempY = Math.min(tempY, 0);

  1190.               }

  1191.               if (

  1192.                 graphRect.top + graphRect.height - paddingTrans + tempY <=

  1193.               svgRect.top

  1194.               ) {

  1195.                 tempY = Math.max(tempY, 0);

  1196.               }

  1197. 

  1198.               change = {

  1199.                 x: tempX * transRate * scale,

  1200.                 y: tempY * transRate * scale,

  1201.               };

  1202.               pointer.start.x = pointer.end.x;

  1203.               pointer.start.y = pointer.end.y;

  1204.             } else if (event.type === 'wheel') {

  1205.               const wheelDelta = -event.deltaY;

  1206.               const rate = 1.2;

  1207.               scale =

  1208.               wheelDelta > 0

  1209.                 ? transformData.scale[0] * rate

  1210.                 : transformData.scale[0] / rate;

  1211. 

  1212.               scale = Math.max(this.scaleRange[0], scale, minScale);

  1213.               scale = Math.min(this.scaleRange[1], scale);

  1214.               change = {

  1215.                 x:

  1216.                 (graphRect.x + padding / transRate - event.x) *

  1217.                 transRate *

  1218.                 (scale - transformData.scale[0]),

  1219.                 y:

  1220.                 (graphRect.bottom - padding / transRate - event.y) *

  1221.                 transRate *

  1222.                 (scale - transformData.scale[0]),

  1223.               };

  1224.             }

  1225. 

  1226.             graphTransform = {

  1227.               x: transformData.translate[0] + change.x,

  1228.               y: transformData.translate[1] + change.y,

  1229.               k: scale,

  1230.             };

  1231. 

  1232.             tempStr = `translate(${graphTransform.x},${graphTransform.y}) scale(${graphTransform.k})`;

  1233.             graphDom.setAttribute('transform', tempStr);

  1234.             event.stopPropagation();

  1235.             event.preventDefault();

  1236.           });

  1237. 

  1238.       const svg = d3.select('#graph svg');

  1239.       svg.on('.zoom', null);

  1240.       svg.call(zoom);

  1241.       svg.on('dblclick.zoom', null);

  1242.       svg.on('wheel.zoom', null);

  1243. 

  1244.       const graph0 = d3.select('#graph #graph0');

  1245.       graph0.on('.zoom', null);

  1246.       graph0.call(zoom);

  1247.     },

  1248.     /**

  1249.      * Obtains the transform data of a node.

  1250.      * @param {Object} node Node dom data

  1251.      * @return {Object} Transform data of a node

  1252.      */

  1253.     getTransformData(node) {

  1254.       if (!node) {

  1255.         return [];

  1256.       }

  1257.       const transformData = node.getAttribute('transform');

  1258.       const attrObj = {};

  1259.       if (transformData) {

  1260.         const lists = transformData.trim().split(' ');

  1261.         lists.forEach((item) => {

  1262.           const index1 = item.indexOf('(');

  1263.           const index2 = item.indexOf(')');

  1264.           const name = item.substring(0, index1);

  1265.           const params = item

  1266.               .substring(index1 + 1, index2)

  1267.               .split(',')

  1268.               .map((i) => {

  1269.                 return parseFloat(i) || 0;

  1270.               });

  1271.           attrObj[name] = params;

  1272.         });

  1273.       }

  1274.       return attrObj;

  1275.     },

  1276.     removeGraph() {

  1277.       const svg = document.querySelector('#graph svg');

  1278.       if (svg) {

  1279.         svg.remove();

  1280.       }

  1281.       this.allGraphData = {};

  1282.     },

  1283.   },

  1284.   destroyed() {

  1285.     // Remove the listener of window size change

  1286.     window.removeEventListener(

  1287.         'resize',

  1288.         this.debounce(this.resizeCallback, 200),

  1289.         false,

  1290.     );

  1291.     this.$bus.$off('collapse');

  1292.   },

  1293. };

  1294. </script>

  1295. <style lang="scss">

  1296. .data-process-wrap {

  1297.   height: 100%;

  1298.   background: #fff;

  1299.   padding: 0 16px;

  1300.   .title {

  1301.     font-size: 16px;

  1302.     font-weight: bold;

  1303.     text-align: left;

  1304.   }

  1305.   .el-tabs.el-tabs--top {

  1306.     height: calc(100% - 22px);

  1307.   }

  1308.   .el-tabs__content {

  1309.     height: calc(100% - 54px);

  1310.     & > .el-tab-pane {

  1311.       height: 100%;

  1312.     }

  1313.   }

  1314.   .el-tabs__item.is-active {

  1315.     color: #00a5a7;

  1316.     font-weight: bold;

  1317.   }

  1318.   .data-process-top {

  1319.     height: 156px;

  1320.     font-size: 0;

  1321.     display: flex;

  1322.     align-items: flex-start;

  1323.     margin-top: 20px;

  1324.     .cell-container {

  1325.       width: 20%;

  1326.       cursor: pointer;

  1327.       padding: 20px 0;

  1328.       border: 2px solid transparent;

  1329.       .title {

  1330.         font-size: 14px;

  1331.         line-height: 20px;

  1332.         padding: 0 0 0 20px;

  1333.         font-weight: bold;

  1334.       }

  1335.     }

  1336.     .data-process {

  1337.       background-color: #e3f8eb;

  1338.       cursor: default;

  1339.       .title {

  1340.         border-left: 2px solid #00a5a7;

  1341.       }

  1342.     }

  1343.     .device_queue_op {

  1344.       background-color: #e1f2ff;

  1345.       .title {

  1346.         border-left: 2px solid #6cbfff;

  1347.       }

  1348.     }

  1349.     .get-next {

  1350.       background-color: #fef4dd;

  1351.       .title {

  1352.         border-left: 2px solid #fdca5a;

  1353.       }

  1354.     }

  1355.     .queue-container {

  1356.       width: 20%;

  1357.       position: relative;

  1358.       .img {

  1359.         width: 100%;

  1360.         height: 37px;

  1361.         margin-top: 13px;

  1362.         .edge {

  1363.           width: calc(50% - 40px);

  1364.           display: inline-block;

  1365.           padding-top: 11px;

  1366.           img {

  1367.             width: 100%;

  1368.           }

  1369.         }

  1370.         .icon {

  1371.           width: 80px;

  1372.           padding: 0 20px;

  1373.           display: inline-block;

  1374.           vertical-align: middle;

  1375.           img {

  1376.             padding: 3px;

  1377.             border: 2px solid transparent;

  1378.             cursor: pointer;

  1379.           }

  1380.         }

  1381.       }

  1382. 

  1383.       .title {

  1384.         text-align: center;

  1385.         font-size: 14px;

  1386.         margin-top: 10px;

  1387.         font-weight: bold;

  1388.       }

  1389.       .description {

  1390.         position: absolute;

  1391.         font-size: 12px;

  1392.         line-height: 12px;

  1393.         white-space: nowrap;

  1394.         overflow: hidden;

  1395.         width: 100%;

  1396.         text-align: center;

  1397.         .item {

  1398.           font-size: 12px;

  1399.           line-height: 16px;

  1400.           white-space: normal;

  1401.           .num {

  1402.             color: #07a695;

  1403.           }

  1404.         }

  1405.       }

  1406.     }

  1407.     .selected {

  1408.       border: 2px solid #3399ff !important;

  1409.     }

  1410.   }

  1411.   .data-process-bottom {

  1412.     height: calc(100% - 156px);

  1413.     .queue-step-wrap {

  1414.       &:first-child {

  1415.         height: 50%;

  1416.       }

  1417.       &:last-child {

  1418.         height: 50%;

  1419.       }

  1420.       & > .title {

  1421.         margin-bottom: 15px;

  1422.         font-weight: bold;

  1423.         font-size: 15px;

  1424.       }

  1425.       .chart-content {

  1426.         height: calc(100% - 30px);

  1427.         .chart-wrap {

  1428.           float: left;

  1429.           width: calc(50% - 12px);

  1430.           height: calc(100% - 10px);

  1431.           border-radius: 4px;

  1432.           overflow-y: auto;

  1433.           border: 1px solid #eee;

  1434.           &:first-child {

  1435.             margin-right: 20px;

  1436.           }

  1437.           .title {

  1438.             font-size: 13px;

  1439.             padding: 10px;

  1440.             font-weight: bold;

  1441.           }

  1442.           .data-tips {

  1443.             color: #999;

  1444.             padding: 0 0 0 10px;

  1445.             & > div {

  1446.               display: inline-block;

  1447.               margin-right: 10px;

  1448.             }

  1449.           }

  1450.           .chart {

  1451.             height: calc(100% - 70px);

  1452.             min-height: 150px;

  1453.             overflow: hidden;

  1454.           }

  1455.         }

  1456.         .chart-wrap.highlight {

  1457.           border-color: #3399ff;

  1458.         }

  1459.       }

  1460.       .chart-content.second {

  1461.         height: calc(100% - 25px);

  1462.       }

  1463.     }

  1464.     .queue-step-wrap.single {

  1465.       height: 100%;

  1466.       .chart-content {

  1467.         .chart-wrap {

  1468.           width: 100%;

  1469.         }

  1470.       }

  1471.     }

  1472.   }

  1473.   .pipeline-wrap {

  1474.     height: 100%;

  1475.     .pipeline-top {

  1476.       height: 35%;

  1477.       .pipeline-top-title {

  1478.         font-size: 15px;

  1479.         font-weight: bold;

  1480.       }

  1481.       .average-rate-wrap {

  1482.         overflow-y: auto;

  1483.         height: calc(100% - 20px);

  1484.         #average-rate {

  1485.           height: 100%;

  1486.           min-height: 180px;

  1487.           overflow: hidden;

  1488.         }

  1489.       }

  1490.     }

  1491.     .pipeline-middle {

  1492.       height: 30%;

  1493.       .pipeline-middle-title {

  1494.         font-size: 15px;

  1495.         font-weight: bold;

  1496.       }

  1497.       .operator-graph {

  1498.         height: calc(100% - 20px);

  1499.         #graph {

  1500.           width: 100%;

  1501.           height: 100%;

  1502.           background-color: #f7faff;

  1503.           #graph0 > polygon {

  1504.             fill: transparent;

  1505.           }

  1506.           .node.queue {

  1507.             cursor: pointer;

  1508.           }

  1509.           .operator {

  1510.             path {

  1511.               stroke: #e6ebf5;

  1512.               fill: #e6ebf5;

  1513.             }

  1514.           }

  1515.           .selected {

  1516.             path,

  1517.             polygon {

  1518.               stroke: red;

  1519.             }

  1520.           }

  1521.           .edge {

  1522.             path,

  1523.             polygon {

  1524.               stroke: #e6ebf5;

  1525.               fill: #e6ebf5;

  1526.             }

  1527.           }

  1528.         }

  1529.       }

  1530.     }

  1531.     .pipeline-bottom {

  1532.       height: 35%;

  1533.       .queue-deep-wrap {

  1534.         height: 100%;

  1535.         background: #fafbfc;

  1536.         & > div {

  1537.           float: left;

  1538.           height: 100%;

  1539.         }

  1540.         .left {

  1541.           width: calc(60% - 20px);

  1542.           overflow-y: auto;

  1543.           height: 100%;

  1544.           border-right: 1px dashed #ccc;

  1545.           padding-right: 20px;

  1546.           margin-right: 20px;

  1547.           #queue-deep {

  1548.             height: 100%;

  1549.             width: 100%;

  1550.             min-height: 220px;

  1551.             overflow: hidden;

  1552.           }

  1553.         }

  1554.         .right {

  1555.           width: 40%;

  1556.           .title {

  1557.             font-size: 13px;

  1558.             margin-top: 7px;

  1559.           }

  1560.           .item-wrap {

  1561.             padding-top: 10px;

  1562.             height: calc(100% - 26px);

  1563.             overflow-y: auto;

  1564.             .item {

  1565.               margin-top: 10px;

  1566.               & > span {

  1567.                 color: #757b88;

  1568.                 display: inline-block;

  1569.                 width: 50%;

  1570.               }

  1571.             }

  1572.           }

  1573.         }

  1574.       }

  1575.     }

  1576.   }

  1577.   .image-noData {

  1578.     width: 100%;

  1579.     height: calc(100% - 37px);

  1580.     display: flex;

  1581.     justify-content: center;

  1582.     align-items: center;

  1583.     flex-direction: column;

  1584.     p {

  1585.       font-size: 16px;

  1586.       padding-top: 10px;

  1587.     }

  1588.   }

  1589. }

  1590. </style>