diff --git a/plugins/mindstudio-insight-plugins/Scalar/front/src/api/lossApi.ts b/plugins/mindstudio-insight-plugins/Scalar/front/src/api/lossApi.ts
new file mode 100644
index 0000000000000000000000000000000000000000..45e499dad9844b5ca290641d644dab85d748793a
--- /dev/null
+++ b/plugins/mindstudio-insight-plugins/Scalar/front/src/api/lossApi.ts
@@ -0,0 +1,94 @@
+/*
+ * Copyright (c) Huawei Technologies Co., Ltd. 2024-2024. All rights reserved.
+ */
+
+import { request } from './request';
+
+interface ResponseBase<T> {
+    result: boolean;
+    body: T;
+    msg?: string;
+    errCode?: number;
+};
+
+interface FileTreeRequestParams {
+    path: string;
+};
+interface FileTreeResponseBody {
+    childrenFiles: FileTreeItem[];
+    childrenFolders: FileTreeItem[];
+};
+export interface FileTreeItem {
+    path: string;
+    name: string;
+}
+export const getFileTree = async (params: FileTreeRequestParams): Promise<ResponseBase<FileTreeResponseBody>> => {
+    return await request({
+        data: params,
+        url: '/ScalarVisually/GetFiles',
+        method: 'post',
+    });
+};
+
+interface ImportFileRequestParams {
+    append: boolean;
+    pathList: string[];
+};
+interface ImportFileResponseBody {
+    data: FileItem[];
+};
+export interface FileItem {
+    tag: string;
+    fileList: Array<{ name: string; path: string }>;
+};
+export const importFile = async (params: ImportFileRequestParams): Promise<ResponseBase<ImportFileResponseBody>> => {
+    return await request({
+        data: params,
+        url: '/ScalarVisually/ImportFile',
+        method: 'post',
+    });
+};
+
+export interface ChartsDataRequestParams {
+    graphList: Array<{ tag: string; file: string; offset: number }>;
+};
+export interface ChartsDataResponseBody {
+    data: ChartsDataItem[];
+};
+interface ChartsDataItem {
+    tag: string;
+    file: string;
+    points: DataItem[];
+};
+export interface DataItem {
+    step: number;
+    value: number;
+};
+export const getChartsData = async (params: ChartsDataRequestParams): Promise<ResponseBase<ChartsDataResponseBody>> => {
+    return await request({
+        data: params,
+        url: '/ScalarVisually/GetScalarData',
+        method: 'post',
+    });
+};
+
+export interface NewFileResponseBody {
+    data: NewFileItem[];
+};
+interface NewFileItem {
+    dir: string;
+    fileList: string[];
+};
+export const getNewFile = async (): Promise<ResponseBase<NewFileResponseBody>> => {
+    return await request({
+        url: '/ScalarVisually/GetAddFiles',
+        method: 'post',
+    });
+};
+
+export const getAllGraph = async (): Promise<ResponseBase<ImportFileResponseBody>> => {
+    return await request({
+        url: '/ScalarVisually/GetAllGraph',
+        method: 'post',
+    });
+};
diff --git a/plugins/mindstudio-insight-plugins/Scalar/front/src/api/request.ts b/plugins/mindstudio-insight-plugins/Scalar/front/src/api/request.ts
new file mode 100644
index 0000000000000000000000000000000000000000..e7fb74dd57daf8dbfb5641b3d3ba265645b3acdc
--- /dev/null
+++ b/plugins/mindstudio-insight-plugins/Scalar/front/src/api/request.ts
@@ -0,0 +1,61 @@
+/*
+ * Copyright (c) Huawei Technologies Co., Ltd. 2024-2024. All rights reserved.
+ */
+
+import axios from 'axios';
+
+const isProduction = import.meta.env.VITE_MODE === 'production';
+
+let baseURL: string = '';
+export const setBaseURL = (url: string) => {
+    baseURL = `//${url}`;
+};
+const getBaseURL = () => {
+    if (isProduction) {
+        return baseURL;
+    } else {
+        return import.meta.env.VITE_URL;
+    }
+};
+
+const requestBase = axios.create({
+    baseURL: '',
+    timeout: 6000,
+});
+
+requestBase.interceptors.request.use(
+    config => {
+        config.headers['content-type'] = 'text/plain';
+        config.url = `${getBaseURL()}${config.url}`;
+        return config;
+    },
+    error => {
+        return Promise.reject(error);
+    }
+);
+
+requestBase.interceptors.response.use(
+    config => {
+        return config;
+    },
+    error => {
+        return Promise.reject(error);
+    }
+);
+
+interface RequestOpts {
+    url: string;
+    method: string;
+    data?: object;
+    params?: object;
+};
+
+export const request = async (requestOpts: RequestOpts) => {
+    try {
+        const res = await requestBase(requestOpts);
+        return res.data;
+    } catch {
+        // 请求异常处理
+        return { result: false, msg: `请求失败：${requestOpts.url}` };
+    }
+};
diff --git a/plugins/mindstudio-insight-plugins/Scalar/front/src/eventBus/index.ts b/plugins/mindstudio-insight-plugins/Scalar/front/src/eventBus/index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..f61443bb4064294a40310568ce39dd86564d8ee7
--- /dev/null
+++ b/plugins/mindstudio-insight-plugins/Scalar/front/src/eventBus/index.ts
@@ -0,0 +1,9 @@
+/*
+ * Copyright (c) Huawei Technologies Co., Ltd. 2024-2024. All rights reserved.
+ */
+
+import { EventEmitter } from 'events';
+
+const eventBus = new EventEmitter();
+
+export default eventBus;
diff --git a/plugins/mindstudio-insight-plugins/Scalar/front/src/i18n/index.ts b/plugins/mindstudio-insight-plugins/Scalar/front/src/i18n/index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..1acdd322bfc2fcf62123c01385a1e197c755af4b
--- /dev/null
+++ b/plugins/mindstudio-insight-plugins/Scalar/front/src/i18n/index.ts
@@ -0,0 +1,26 @@
+/*
+ * Copyright (c) Huawei Technologies Co., Ltd. 2024-2024. All rights reserved.
+ */
+
+import i18n from 'i18next';
+import { initReactI18next } from 'react-i18next';
+import { lossShowEn, lossShowZh } from './lossShow';
+
+const resources = {
+    enUS: {
+        ...lossShowEn,
+    },
+    zhCN: {
+        ...lossShowZh
+    }
+};
+
+i18n.use(initReactI18next).init({
+    resources,
+    lng: 'enUS',
+    interpolation: {
+        escapeValue: false,
+    },
+});
+
+export default i18n;
diff --git a/plugins/mindstudio-insight-plugins/Scalar/front/src/i18n/lossShow/en.json b/plugins/mindstudio-insight-plugins/Scalar/front/src/i18n/lossShow/en.json
new file mode 100644
index 0000000000000000000000000000000000000000..deb65e84ea0f6bd6ad6e08e5e7061e07e1edcba7
--- /dev/null
+++ b/plugins/mindstudio-insight-plugins/Scalar/front/src/i18n/lossShow/en.json
@@ -0,0 +1,19 @@
+{
+    "lossShow": {
+        "importFile": "Import File",
+        "fileExplorer": "File Explorer",
+        "folderChange": "The current folder has been changed, please select the files that need to be merged",
+        "exportFile": "Export File",
+        "tagList": "Need Display Tag",
+        "tagListplaceholder": "Please select the tag to be displayed",
+        "updateFrequency": "Data Update Frequency(s)",
+        "dataSize": "Total {{total}} items",
+        "itemsPerPage": "/ page",
+        "dataComparison": "Data Comparison",
+        "baselineData": "Base lineData",
+        "comparativeData": "Comparative Data",
+        "noData": "No Data",
+        "prevPage": "Previous Page",
+        "nextPage": "Next Page"
+    }
+}
\ No newline at end of file
diff --git a/plugins/mindstudio-insight-plugins/Scalar/front/src/i18n/lossShow/index.ts b/plugins/mindstudio-insight-plugins/Scalar/front/src/i18n/lossShow/index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..af10792e9fdc83c78a4812de8c0f2df93045a7ec
--- /dev/null
+++ b/plugins/mindstudio-insight-plugins/Scalar/front/src/i18n/lossShow/index.ts
@@ -0,0 +1,8 @@
+/*
+ * Copyright (c) Huawei Technologies Co., Ltd. 2024-2024. All rights reserved.
+ */
+
+import lossShowEn from './en.json';
+import lossShowZh from './zh.json';
+
+export { lossShowEn, lossShowZh };
\ No newline at end of file
diff --git a/plugins/mindstudio-insight-plugins/Scalar/front/src/i18n/lossShow/zh.json b/plugins/mindstudio-insight-plugins/Scalar/front/src/i18n/lossShow/zh.json
new file mode 100644
index 0000000000000000000000000000000000000000..1a3e97db63c0ce33217236ad6c2295475852c865
--- /dev/null
+++ b/plugins/mindstudio-insight-plugins/Scalar/front/src/i18n/lossShow/zh.json
@@ -0,0 +1,19 @@
+{
+    "lossShow": {
+        "importFile": "导入文件",
+        "fileExplorer": "文件资源管理器",
+        "folderChange": "当前文件夹有变更，请选择需要合并的文件",
+        "exportFile": "导出文件",
+        "tagList": "需要显示的tag",
+        "tagListplaceholder": "请选择需要显示的tag",
+        "updateFrequency": "数据更新频率（s）",
+        "dataSize": "共{{total}}条数据",
+        "itemsPerPage": "/ 页",
+        "dataComparison":"数据对比",
+        "baselineData":"基线数据",
+        "comparativeData":"对比数据",
+        "noData":"暂无数据",
+        "prevPage": "下一页",
+        "nextPage": "上一页"
+    }
+}
\ No newline at end of file
diff --git a/plugins/mindstudio-insight-plugins/Scalar/front/src/utils/common.ts b/plugins/mindstudio-insight-plugins/Scalar/front/src/utils/common.ts
new file mode 100644
index 0000000000000000000000000000000000000000..9539bb44023e57218c039c1acd490af68d835411
--- /dev/null
+++ b/plugins/mindstudio-insight-plugins/Scalar/front/src/utils/common.ts
@@ -0,0 +1,55 @@
+/*
+ * Copyright (c) Huawei Technologies Co., Ltd. 2024-2024. All rights reserved.
+ */
+
+// 将输入转为不小于0的数
+export const notZero = (num: number, replace = 1): number => {
+    const replaceNum = replace === 0 ? 1 : replace;
+    return num === 0 ? replaceNum : num;
+};
+
+// 按照第二位输入处理小数
+export const keepDecimals = (num: number, n = 2): number => {
+    let ratio: number;
+    if (n < 0) {
+        ratio = 0;
+    } else if (n > 14) {
+        ratio = 14;
+    } else {
+        ratio = n;
+    }
+    return Number(num.toFixed(ratio));
+};
+
+// 根据入参，将表格数据下载为csv文件
+declare const window: Window & { showSaveFilePicker: any };
+export const downloadCsv = async (header: string[], data: any[], fileName: string = '导出结果.csv'): Promise<void> => {
+    if (header.length < 1 || data.length < 1) {
+        return;
+    }
+
+    let csvContent = '';
+    data.forEach((item, index) => {
+        let dataString = '';
+        for (let i = 0; i < header.length; i++) {
+            dataString = `${dataString}${item[header[i]]},`;
+        }
+        csvContent = `${csvContent}${index < data.length ? dataString.replace(/,$/, '\n') : dataString.replace(/,$/, '')}`;
+    });
+
+    // 新api，可以选择文件的下载位置，仅部分浏览器版本支持
+    if (typeof window?.showSaveFilePicker !== 'undefined') {
+        csvContent = `${header.join(',')}\n${csvContent}`;
+        const newHandle = await window.showSaveFilePicker({ suggestedName: fileName });
+        const writableStream = await newHandle.createWritable();
+        await writableStream.write(new Blob([csvContent]));
+        await writableStream.close();
+    } else {
+        csvContent = `data:text/csv;charset=utf-8,\ufeff${header.join(',')}\n${csvContent}`;
+        const a = document.createElement('a');
+        a.href = encodeURI(csvContent);
+        a.download = fileName;
+        a.click();
+        a.remove();
+    }
+};
diff --git a/plugins/mindstudio-insight-plugins/Scalar/front/src/utils/pollRequest.ts b/plugins/mindstudio-insight-plugins/Scalar/front/src/utils/pollRequest.ts
new file mode 100644
index 0000000000000000000000000000000000000000..d048fd9d807c4714b8464183fd39df258b59c6b8
--- /dev/null
+++ b/plugins/mindstudio-insight-plugins/Scalar/front/src/utils/pollRequest.ts
@@ -0,0 +1,49 @@
+/*
+ * Copyright (c) Huawei Technologies Co., Ltd. 2024-2024. All rights reserved.
+ */
+
+import { message } from 'antd';
+
+export class PollRequest {
+    private timer: NodeJS.Timeout | null = null;
+
+    constructor(step: number, request: (params?: object) => Promise<any>, callback: (data: any) => void) {
+        this.start(step, request, callback);
+    }
+
+    start(step: number, request: (params?: object) => Promise<any>, callback: (data: any) => void): void {
+        const f = async () => {
+            try {
+                const { result, msg, body } = await request();
+                if (!result) {
+                    message.error(msg);
+                    return;
+                } else {
+                    callback(body);
+                }
+            } catch {
+                // 避免因异常请求导致轮询停止
+            };
+        };
+        f();
+        this.poll(step, f);
+    }
+
+    poll(step: number, f: () => void): void {
+        this.timer = setTimeout(async () => {
+            f();
+            this.timer = null;
+            this.poll(step, f);
+        }, step);
+    }
+
+    clear(): void {
+        if (this.timer !== null) {
+            clearTimeout(this.timer);
+        }
+    }
+};
+
+export const creatPollRequest = (step: number, request: (params?: object) => Promise<any>, callback: (data: any) => void): PollRequest => {
+    return new PollRequest(step, request, callback);
+};