diff --git a/src/assets/css/components/index.scss b/src/assets/css/components/index.scss
index f5fb116b..a3d3524a 100644
--- a/src/assets/css/components/index.scss
+++ b/src/assets/css/components/index.scss
@@ -52,6 +52,7 @@
 @import './views/charts2/networkOverviewTabs';
 @import './views/charts2/npmNetworkQuantity';
 @import './views/charts2/networkOverviewApps';
+@import './views/charts2/npmAppCategoryScore';
 @import './views/charts2/npmTabs';
 @import './views/charts2/npmMap';
 //@import '../chart';
diff --git a/src/assets/css/components/views/charts2/npmAppCategoryScore.scss b/src/assets/css/components/views/charts2/npmAppCategoryScore.scss
new file mode 100644
index 00000000..1805df25
--- /dev/null
+++ b/src/assets/css/components/views/charts2/npmAppCategoryScore.scss
@@ -0,0 +1,164 @@
+.npm-app {
+  $grey:#353636;
+  height: 100%;
+  width: 100%;
+  position: relative;
+  .npm-app-left {
+    height: 100%;
+    display: flex;
+    .npm-app-letter {
+      display: flex;
+      flex-direction: column-reverse;
+      justify-content: space-between;
+      div {
+        width: 40px;
+        height: 40px;
+        line-height: 40px;
+        text-align: center;
+        margin: 0 5px 12.3px 0;
+        font-family: NotoSansHans-Medium;
+        font-size: 14px;
+        color: #353636;
+        font-weight: 500;
+      }
+      div:nth-of-type(1) {
+        height: 25px;
+        margin: 0;
+      }
+    }
+    .npm-app-body {
+      display: flex;
+      .npm-app-body-patch {
+        display: flex;
+        flex-direction: column-reverse;
+        .npm-app-body-color {
+          width: 40px;
+          height: 40px;
+          margin: 0 36px 12.3px 0;
+          background: #EFEFEF;
+          border-radius: 4px;;
+        }
+        .npm-app-body-color.score-color:nth-child(2),.npm-app-body-color.score-color:nth-child(3) {
+          background: #E26154;
+        }
+        .npm-app-body-color.score-color:nth-child(4),.npm-app-body-color.score-color:nth-child(5) {
+          background: #E5A219;
+        }
+        .npm-app-body-color.score-color:nth-child(6),.npm-app-body-color.score-color:nth-child(7) {
+          background: #749F4D;
+        }
+        .npm-app-body-icon {
+          width: 40px;
+          height: 25px;
+          line-height: 25px;
+          text-align: center;
+          span {
+            i {
+              font-size: 20px;
+            }
+          }
+        }
+      }
+    }
+  }
+  .npm-app-right {
+    position: absolute;
+    width: calc(100% - 500px);
+    right: 0;
+    top: 0;
+    height: 100%;
+    border: 1px solid #E2E5EC;
+    border-radius: 4px;
+    .app-table {
+      .el-table__header-wrapper {
+        tr th {
+          padding: 5px 0;
+          .data-column__span {
+            font-family: NotoSansHans-Medium;
+            font-size: 12px;
+            color: #353636;
+            font-weight: 500;
+          }
+        }
+      }
+      .el-table__body-wrapper.is-scrolling-none {
+        height: 306px !important;
+        tr td {
+          padding: 13px 0;
+        }
+      }
+    }
+    .data-total{
+      display: flex !important;
+      .data-total-category-icon {
+        i {
+          font-size: 16px;
+          margin-right: 12px;
+          color:  #717171;
+        }
+      }
+      .data-total-category-value {
+        font-size: 12px;
+        color: #353636;
+        font-weight: 400;
+      }
+      .data-score {
+        border-radius: 10px;
+        font-family: NotoSansHans-Medium;
+        font-size: 12px;
+        color: #FFFFFF;
+        font-weight: 500;
+        height: 20px;
+        width: 34px;
+        line-height: 20px;
+        text-align: center;
+      }
+      .data-score.data-score-red {
+        background: #E26154;
+      }
+      .data-score.data-score-yellow {
+        background: #E5A219;
+      }
+      .data-score.data-score-green {
+        background: #749F4D;
+      }
+    }
+    .data-total-trend {
+      display: flex;
+      margin-left: 6px;
+      font-size: 12px;
+      align-items: center;
+      justify-content: center;
+      margin-top: 2px;
+      border-radius: 10px;
+      font-weight:500;
+    }
+    .data-total-trend-black {
+      background-color: rgba(113,113,113,0.12);
+      color: #717171;
+      width: 36px;
+      height: 20px;
+    }
+    .data-total-trend-green {
+      background-color: rgba(126,159,84,0.12);
+      width: 52px;
+      height: 20px;
+      color:#7E9F54;
+    }
+    .data-total-trend-red {
+      background-color: rgba(226,97,84,0.12);
+      width: 52px;
+      height: 20px;
+      color:#E26154;
+      .cn-icon-rise1{
+        color: #E44D3E;
+      }
+    }
+    .el-table--group::after,.el-table--border::after, .el-table::before {
+      height: 0px;
+    }
+    .el-table thead {
+      color: $grey;
+    }
+  }
+}
diff --git a/src/views/charts2/charts/NpmAppCategoryScore.vue b/src/views/charts2/charts/NpmAppCategoryScore.vue
index ea5a99b6..325fac8d 100644
--- a/src/views/charts2/charts/NpmAppCategoryScore.vue
+++ b/src/views/charts2/charts/NpmAppCategoryScore.vue
@@ -1,9 +1,259 @@
 <template>
-  <div style="height: 100%;width: 100%;border: 1px solid #f0f0f0"></div>
+  <div class="npm-app">
+    <div class="npm-app-left">
+      <div class="npm-app-letter">
+        <div v-for="(letter, index) in colorPatchData" :key="index">
+          {{letter.letter}}
+        </div>
+      </div>
+      <div class="npm-app-body">
+        <div class="npm-app-body-patch">
+          <div class="npm-app-body-icon"><span><i class="cn-icon cn-icon-video"></i></span></div>
+          <div class="npm-app-body-color" v-for="(item, index) in 6" :key="index" :class="{'score-color': tableData[0].score >= index + 1}"></div>
+        </div>
+        <div class="npm-app-body-patch">
+          <div class="npm-app-body-icon"><span><i class="cn-icon cn-icon-social-network"></i></span></div>
+          <div class="npm-app-body-color" v-for="(item, index) in 6" :key="index" :class="{'score-color': tableData[1].score >= index + 1}"></div>
+        </div>
+        <div class="npm-app-body-patch">
+          <div class="npm-app-body-icon"><span><i class="cn-icon cn-icon-file-sharing"></i></span></div>
+          <div class="npm-app-body-color" v-for="(item, index) in 6" :key="index" :class="{'score-color': tableData[2].score >= index + 1}"></div>
+        </div>
+        <div class="npm-app-body-patch">
+          <div class="npm-app-body-icon"><span><i class="cn-icon cn-icon-gaming"></i></span></div>
+          <div class="npm-app-body-color" v-for="(item, index) in 6" :key="index" :class="{'score-color': tableData[3].score >= index + 1}"></div>
+        </div>
+        <div class="npm-app-body-patch">
+          <div class="npm-app-body-icon"><span><i class="cn-icon cn-icon-email"></i></span></div>
+          <div class="npm-app-body-color" v-for="(item, index) in 6" :key="index" :class="{'score-color': tableData[4].score >= index + 1}"></div>
+        </div>
+        <div class="npm-app-body-patch">
+          <div class="npm-app-body-icon"><span><i class="cn-icon cn-icon-voip"></i></span></div>
+          <div class="npm-app-body-color" v-for="(item, index) in 6" :key="index" :class="{'score-color': tableData[5].score >= index + 1}"></div>
+        </div>
+      </div>
+    </div>
+    <div class="npm-app-right">
+      <el-table
+          :id="`tabTable_${index}`"
+          :ref="`dataTable_${index}`"
+          :data="tableData"
+          class="app-table"
+          height="100%"
+      >
+        <template v-for="(item, index) in customTableTitles" :key="index">
+          <el-table-column class="data-column">
+            <template #header>
+              <span class="data-column__span">{{$t(item.label)}}</span>
+            </template>
+            <template  #default="scope" :column="item">
+              <div class="data-total">
+                <template v-if="item.prop === 'category'">
+                  <span class="data-total-category-icon"><i :class="scope.row.icon"></i></span>
+                  <span class="data-total-category-value">{{$t(scope.row[item.prop])}}</span>
+                </template>
+                <template v-else-if="item.prop === 'total'">
+                  {{unitConvert(scope.row[item.prop], unitTypes.bps).join('')}}
+                  <div v-if="scope.row.totalTrend === 'up'" class="data-total-trend data-total-trend-red">
+                    <i class="cn-icon-rise1 cn-icon"></i>&nbsp;{{parseInt(scope.row.totalTrendValue / scope.row.pTotalTrendValue)}}%
+                  </div>
+                  <div v-else-if="scope.row.totalTrend === 'down'" class="data-total-trend data-total-trend-green">
+                    <i class="cn-icon-decline cn-icon"></i>&nbsp;{{parseInt(scope.row.totalTrendValue / scope.row.pTotalTrendValue)}}%
+                  </div>
+                  <div v-else class="data-total-trend data-total-trend-black">
+                    <i class="cn-icon-constant cn-icon"></i>
+                  </div>
+                </template>
+                <template v-else-if="item.prop === 'outbound'">
+                  {{unitConvert(scope.row[item.prop], unitTypes.bps).join('')}}
+                  <div v-if="scope.row.outboundTrend === 'up'" class="data-total-trend data-total-trend-red">
+                    <i class="cn-icon-rise1 cn-icon"></i>&nbsp;{{parseInt(scope.row.outboundTrendValue / scope.row.pOutboundTrendValue)}}%
+                  </div>
+                  <div v-else-if="scope.row.outboundTrend === 'down'" class="data-total-trend data-total-trend-green">
+                    <i class="cn-icon-decline cn-icon"></i>&nbsp;{{parseInt(scope.row.outboundTrendValue / scope.row.pOutboundTrendValue)}}%
+                  </div>
+                  <div v-else class="data-total-trend data-total-trend-black">
+                    <i class="cn-icon-constant cn-icon"></i>
+                  </div>
+                </template>
+                <template v-else-if="item.prop === 'inbound'">
+                  {{unitConvert(scope.row[item.prop], unitTypes.bps).join('')}}
+                  <div v-if="scope.row.inboundTrend === 'up'" class="data-total-trend data-total-trend-red">
+                    <i class="cn-icon-rise1 cn-icon"></i>&nbsp;{{parseInt(scope.row.inboundTrendValue / scope.row.pInboundTrendValue)}}%
+                  </div>
+                  <div v-else-if="scope.row.inboundTrend === 'down'" class="data-total-trend data-total-trend-green">
+                    <i class="cn-icon-decline cn-icon"></i>&nbsp;{{parseInt(scope.row.inboundTrendValue / scope.row.pInboundTrendValue)}}%
+                  </div>
+                  <div v-else class="data-total-trend data-total-trend-black">
+                    <i class="cn-icon-constant cn-icon"></i>
+                  </div>
+                </template>
+                <template v-else-if="item.prop === 'score'">
+                  <div v-if="scope.row.score <= 2" :class="{'data-score-red': scope.row.score <= 2}" class="data-score">
+                    {{scope.row.score}}
+                  </div>
+                  <div v-else-if="scope.row.score <= 4" :class="{'data-score-yellow': scope.row.score <= 4}" class="data-score">
+                    {{scope.row.score}}
+                  </div>
+                  <div v-else-if="scope.row.score <= 6" :class="{'data-score-green': scope.row.score <= 6}" class="data-score">
+                    {{scope.row.score}}
+                  </div>
+                </template>
+                <span v-else-if="scope.row[item.prop]">{{scope.row[item.prop]}}</span>
+                <span v-else>-</span>
+              </div>
+            </template>
+          </el-table-column>
+        </template>
+      </el-table>
+    </div>
+  </div>
 </template>
 
 <script>
+import { unitTypes } from '@/utils/constants'
+import unitConvert from '@/utils/unit-convert'
 export default {
-  name: 'NpmAppCategoryScore'
+  name: 'NpmAppCategoryScore',
+  data () {
+    return {
+      unitConvert,
+      unitTypes,
+      colorPatchData: [
+        { letter: '' },
+        { letter: 'A' },
+        { letter: 'B' },
+        { letter: 'C' },
+        { letter: 'D' },
+        { letter: 'E' },
+        { letter: 'F' }
+      ],
+      tableData: [
+        {
+          category: 'network.video',
+          score: 3,
+          icon: 'cn-icon cn-icon-video',
+          total: 10,
+          totalTrend: 'up',
+          inboundTrend: 'down',
+          outboundTrend: '',
+          totalTrendValue: 6,
+          inboundTrendValue: 2,
+          outboundTrendValue: 3,
+          pTotalTrendValue: 5,
+          pInboundTrendValue: 3,
+          pOutboundTrendValue: 6,
+          inbound: 0.1,
+          outbound: 0.89
+        },
+        {
+          category: 'network.socialNetwork',
+          score: 2,
+          icon: 'cn-icon cn-icon-social-network',
+          total: 10,
+          totalTrend: 'down',
+          inboundTrend: 'down',
+          outboundTrend: 'down',
+          totalTrendValue: 6,
+          inboundTrendValue: 2,
+          outboundTrendValue: 3,
+          pTotalTrendValue: 5,
+          pInboundTrendValue: 3,
+          pOutboundTrendValue: 6,
+          inbound: 0.1,
+          outbound: 0.89
+        },
+        {
+          category: 'network.fileSharing',
+          score: 1,
+          icon: 'cn-icon cn-icon-file-sharing',
+          total: 10,
+          totalTrend: '',
+          inboundTrend: '',
+          totalTrendValue: 6,
+          inboundTrendValue: 2,
+          outboundTrendValue: 3,
+          pTotalTrendValue: 5,
+          pInboundTrendValue: 3,
+          pOutboundTrendValue: 6,
+          inbound: 0.1,
+          outbound: 0.89
+        },
+        {
+          category: 'network.gaming',
+          score: 4,
+          icon: 'cn-icon cn-icon-gaming',
+          total: 10,
+          totalTrend: 'up',
+          inboundTrend: 'up',
+          outboundTrend: '',
+          totalTrendValue: 6,
+          inboundTrendValue: 2,
+          outboundTrendValue: 3,
+          pTotalTrendValue: 5,
+          pInboundTrendValue: 3,
+          pOutboundTrendValue: 6,
+          inbound: 0.1,
+          outbound: 0.89
+        },
+        {
+          category: 'network.email',
+          score: 6,
+          icon: 'cn-icon cn-icon-email',
+          total: 10,
+          totalTrend: 'down',
+          inboundTrend: 'up',
+          outboundTrend: 'down',
+          totalTrendValue: 6,
+          inboundTrendValue: 2,
+          outboundTrendValue: 3,
+          pTotalTrendValue: 5,
+          pInboundTrendValue: 3,
+          pOutboundTrendValue: 6,
+          inbound: 0.1,
+          outbound: 0.89
+        },
+        {
+          category: 'network.voip',
+          score: 5,
+          icon: 'cn-icon cn-icon-voip',
+          total: 10,
+          totalTrend: 'down',
+          inboundTrend: '',
+          outboundTrend: 'down',
+          totalTrendValue: 6,
+          inboundTrendValue: 2,
+          outboundTrendValue: 3,
+          pTotalTrendValue: 5,
+          pInboundTrendValue: 3,
+          pOutboundTrendValue: 6,
+          inbound: 0.1,
+          outbound: 0.89
+        }
+      ],
+      customTableTitles: [
+        { label: 'network.category', prop: 'category' },
+        { label: 'network.score', prop: 'score' },
+        { label: 'network.total', prop: 'total' },
+        { label: 'network.outbound', prop: 'outbound' },
+        { label: 'network.inbound', prop: 'inbound' }
+      ]
+    }
+  },
+  methods: {
+    tableCellStyle ({ row, column, rowIndex, columnIndex }) {
+      let style = 'border-right:0px;font-size:12px;padding:7px 0 !important;border-bottom: 1px solid #ECECEC;'
+      if (rowIndex === this.tableData.length - 1) {
+        style = style + 'border-bottom:0px !important;'
+      }
+      if (columnIndex === 0) {
+        style = style + 'color:#046ECA;'
+      }
+      return style
+    },
+    tableHeaderCellStyle ({ row, column, rowIndex, columnIndex }) {
+      return 'border-right:0px;font-size:12px;font-weight:500;padding:4px 0 !important;border-bottom: 1px solid #E2E5EC;'
+    }
+  }
 }
 </script>