运营数据支持根据业务某个字段进行划分统计

frontend/desktop/src/config/i18n/cn.js

@@ -1224,6 +1224,18 @@ const cn = {
     '变量保存数据与最新的CMDB集群配置存在差异，是否更新变量数据？': '变量保存数据与最新的CMDB集群配置存在差异，是否更新变量数据？',
     '移动端': '移动端',
     'API网关': 'API网关',
+    '模板执行次数TOPx': '模板执行次数TOP{x}',
+    '模板使用统计': '模板使用统计',
+    '已使用': '已使用',
+    '未使用': '未使用',
+    '职能化统计': '职能化统计',
+    '非职能化': '非职能化',
+    '总计': '总计',
+    '总数': '总数',
+    '业务名称': '业务名称',
+    '数量': '数量',
+    '占比': '占比',
+    '流程': '流程',
     '获取权限': '获取权限',
     '已有业务，但尚未获取资源': '已有业务，但尚未获取资源',
     '前往权限中心申请相关的业务权限': '前往权限中心申请相关的业务权限',

frontend/desktop/src/config/i18n/en.js

@@ -1224,6 +1224,18 @@ const en = {
     '变量保存数据与最新的CMDB集群配置存在差异，是否更新变量数据？': 'Variable data is different from the latest CMDB configuration, determine whether to update',
     '移动端': 'Mobile',
     'API网关': 'API Gateway',
+    '模板执行次数TOPx': 'TOP{x} template execution times',
+    '模板使用统计': 'Template usage statistics',
+    '已使用': 'Used',
+    '未使用': 'Unused',
+    '职能化统计': 'Functional statistics',
+    '非职能化': 'Non-functional',
+    '总计': 'Total',
+    '总数': 'Total',
+    '业务名称': 'Business name',
+    '数量': 'Amount',
+    '占比': 'Percentage',
+    '流程': 'Process',
     '获取权限': 'Get permission',
     '已有业务，但尚未获取资源': "Have business, but haven't acquired resources",
     '前往权限中心申请相关的业务权限': 'Go to the bk-iam apply for related business',

frontend/desktop/src/pages/admin/statistics/HorizontalBarChart.vue

@@ -12,7 +12,7 @@
 <template>
     <div class="horizontal-bar-chart">
         <h3 class="chart-title">{{title}}</h3>
-        <bk-form class="select-wrapper" form-type="inline">
+        <bk-form v-if="showForm" class="select-wrapper" form-type="inline">
             <bk-form-item>
                 <div class="sort-area">
                     <span>{{ selectedSortType === 'ascending' ? $t('升序') : $t('降序') }}</span>
@@ -57,11 +57,16 @@
                         <span class="data-label" :title="item.name" :style="{ width: `${labelWidth}px` }">{{ item.name }}</span>
                         <div class="data-bar" :style="{ width: `calc(100% - ${labelWidth + 100}px)` }">
                             <div class="block" :style="getBlockStyle(item.value)">
-                                <bk-popover ext-cls="task-method" v-if="isInstance" placement="top">
+                                <bk-popover ext-cls="task-method" v-if="showPopover" placement="top">
                                     <span
                                         v-for="val in item.create_method"
                                         :key="val.name"
-                                        :style="{ display: 'inline-block', width: getPercentage(val.value, item.value), height: '100%', background: creatMethods[val.name].color }">
+                                        :style="{
+                                            display: 'inline-block',
+                                            width: getPercentage(val.value, item.value),
+                                            height: '100%',
+                                            background: item.isTemp ? val.color : creatMethods[val.name].color
+                                        }">
                                     </span>
                                     <div slot="content">
                                         <p class="project-name">{{ item.name }}</p>
@@ -70,10 +75,15 @@
                                                 class="task-method-item"
                                                 v-for="val in item.create_method"
                                                 :key="val.name">
-                                                <span class="color-block" :style="{ background: creatMethods[val.name].color }"></span>
-                                                <span class="task-name">{{ creatMethods[val.name].text }}</span>
+                                                <span class="color-block" :style="{ background: item.isTemp ? val.color : creatMethods[val.name].color }"></span>
+                                                <span :class="['content-wrap', { 'is-template': item.template_id }]">
+                                                    <span class="task-name">{{ item.isTemp ? val.name : creatMethods[val.name].text }}</span>
+                                                    <span class="template-id" v-if="item.template_id">
+                                                        {{ 'ID: ' + item.template_id }}
+                                                    </span>
+                                                </span>
                                                 <span class="task-num">{{ val.value }}</span>
-                                                <span class="percentage">{{ getPercentage(val.value, item.value) }}</span>
+                                                <span class="percentage" v-if="!item.template_id">{{ '(' + getPercentage(val.value, item.value) + ')' }}</span>
                                             </li>
                                         </ul>
                                     </div>
@@ -120,6 +130,7 @@
 </template>
 <script>
     import NoData from '@/components/common/base/NoData.vue'
+    import { COLOR_BLOCK_LIST } from '@/constants/index.js'
 
     const SORT_LIST = [
         {
@@ -164,12 +175,6 @@
                     return []
                 }
             },
-            creatMethods: {
-                type: Object,
-                default () {
-                    return {}
-                }
-            },
             bizUseageData: {
                 type: Object,
                 default () {
@@ -180,13 +185,23 @@
                 type: Number,
                 default: 150
             },
-            isInstance: {
+            showPopover: {
                 type: Boolean,
                 default: false
+            },
+            showForm: {
+                type: Boolean,
+                default: true
             }
         },
         data () {
+            const creatMethods = COLOR_BLOCK_LIST.reduce((acc, cur) => {
+                const { value, color, text } = cur
+                acc[value] = { color, text }
+                return acc
+            }, {})
             return {
+                creatMethods,
                 sortList: SORT_LIST,
                 selectedSortType: 'descending',
                 selectedValue: '',
@@ -239,9 +254,10 @@
         height: 360px;
         background: #ffffff;
         border: 1px solid #dcdee5;
-        border-radius: 2px;
-        box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.06);
+        border-radius: 3px;
+        box-shadow: 0px 2px 2px 0px rgba(0,0,0,0.15);
         overflow: hidden;
+        margin-bottom: 20px;
     }
     .chart-title {
         margin: 0;

frontend/desktop/src/pages/admin/statistics/Instance.vue

@@ -12,6 +12,18 @@
 <template>
     <div class="statistics-template">
         <div class="bar-chart-area">
+            <percentage
+                :data-loading="statsDataLoading"
+                :is-temp="false"
+                :data-list="statsData">
+            </percentage>
+            <horizontal-bar-chart
+                :title="$t('职能化统计')"
+                :show-form="false"
+                :show-popover="true"
+                :data-list="commonFuncData"
+                :data-loading="commonFuncLoading">
+            </horizontal-bar-chart>
             <horizontal-bar-chart
                 :title="$t('分类统计')"
                 :selector-list="projectSelector"
@@ -23,11 +35,10 @@
                 :title="$t('分项目统计')"
                 :selector-list="categorySelector"
                 :data-list="projectData"
-                :is-instance="true"
+                :show-popover="true"
                 :data-loading="projectDataLoading"
                 :biz-useage-data="bizUseageData"
                 :color-block-list="colorBlockList"
-                :creat-methods="creatMethods"
                 @onFilterClick="projectFilterChange">
             </horizontal-bar-chart>
         </div>
@@ -125,6 +136,7 @@
     import i18n from '@/config/i18n/index.js'
     import { mapActions, mapState } from 'vuex'
     import { COLOR_BLOCK_LIST } from '@/constants/index.js'
+    import Percentage from './Percentage.vue'
     import HorizontalBarChart from './HorizontalBarChart.vue'
     import VerticalBarChart from './VerticalBarChart.vue'
     import NoData from '@/components/common/base/NoData.vue'
@@ -228,6 +240,7 @@
     export default {
         name: 'StatisticsIntance',
         components: {
+            Percentage,
             HorizontalBarChart,
             VerticalBarChart,
             NoData
@@ -253,11 +266,6 @@
             }
         },
         data () {
-            const creatMethods = COLOR_BLOCK_LIST.reduce((acc, cur) => {
-                const { value, color, text } = cur
-                acc[value] = { color, text }
-                return acc
-            }, {})
             return {
                 categoryData: [],
                 categoryDataProject: '',
@@ -300,7 +308,10 @@
                 instanceDataLoading: true,
                 tableColumn: TABLE_COLUMN,
                 colorBlockList: COLOR_BLOCK_LIST,
-                creatMethods,
+                statsData: [],
+                statsDataLoading: true,
+                commonFuncData: [],
+                commonFuncLoading: true,
                 bizUseageData: {},
                 pagination: {
                     current: 1,
@@ -343,6 +354,8 @@
                 this.getTimeData()
                 this.getTableData()
                 this.getBizUseageData()
+                this.getStatsData()
+                this.getCommonFuncData()
             },
             async loadAnalysisData (query, type = '') {
                 try {
@@ -438,6 +451,60 @@
                     this.instanceDataLoading = false
                 }
             },
+            async getStatsData () {
+                try {
+                    this.statsDataLoading = true
+                    const query = {
+                        group_by: 'instance_biz',
+                        conditions: {
+                            create_time: this.dateRange[0],
+                            finish_time: this.dateRange[1]
+                        }
+                    }
+                    this.statsData = await this.loadAnalysisData(query)
+                } catch (error) {
+                    console.warn(error)
+                } finally {
+                    this.statsDataLoading = false
+                }
+            },
+            async getCommonFuncData () {
+                try {
+                    this.commonFuncLoading = true
+                    const query = {
+                        group_by: 'common_func',
+                        conditions: {
+                            create_time: this.dateRange[0],
+                            finish_time: this.dateRange[1]
+                        }
+                    }
+                    const resp = await this.loadAnalysisData(query)
+                    this.commonFuncData = resp.reduce((acc, cur) => {
+                        const createMethod = [
+                            {
+                                name: i18n.t('职能化'),
+                                value: cur.common_func_cou,
+                                color: '#339dff'
+                            }, {
+                                name: i18n.t('非职能化'),
+                                value: cur.common_cou,
+                                color: '#c4c6cc'
+                            }
+                        ]
+                        acc.push({
+                            name: cur.project_name,
+                            value: cur.common_func_cou + cur.common_cou,
+                            isTemp: true,
+                            create_method: createMethod.filter(item => item.value)
+                        })
+                        return acc
+                    }, [])
+                } catch (error) {
+                    console.warn(error)
+                } finally {
+                    this.commonFuncLoading = false
+                }
+            },
             async getBizUseageData () {
                 try {
                     const resp = await this.queryBizUseageData({ query: 'task' })
@@ -500,11 +567,6 @@
         }
     }
 </script>
-<style lang="scss" scoped>
-    .vertical-bar-chart-area {
-        margin-top: 20px;
-    }
-</style>
 <style lang="scss">
     .task-method {
         .project-name {