Pre Merge pull request !142 from hyh123_a/svg

database/upgrade/upgrade_svg.sql

@@ -0,0 +1,27 @@
+/*
+ Source Schema         : myems_system_db
+ Date: 22/04/2022 20:12:20
+*/
+
+-- ---------------------------------------------------------------------------------------------------------------------
+-- Table `myems_system_db`.`tbl_svgs`
+-- ---------------------------------------------------------------------------------------------------------------------
+DROP TABLE IF EXISTS `myems_system_db`.`tbl_svgs` ;
+CREATE TABLE `myems_system_db`.`tbl_svgs`  (
+  `id` BIGINT NOT NULL AUTO_INCREMENT,
+  `name` VARCHAR(128)  NOT NULL,
+  `content` LONGTEXT NOT NULL,
+  PRIMARY KEY (`id`)
+);
+
+-- ---------------------------------------------------------------------------------------------------------------------
+-- Records of `myems_system_db`.`tbl_svgs`
+-- ---------------------------------------------------------------------------------------------------------------------
+INSERT INTO  `myems_system_db`.`tbl_svgs` VALUES (1, 'SVG01', '<?xml version=\"1.0\" encoding=\"utf-8\"?>\r\n<!-- Generator: Adobe Illustrator 24.1.2, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->\r\n<svg version=\"1.1\" id=\"图层_1\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" x=\"0px\" y=\"0px\"\r\n	 viewBox=\"0 0 595.3 841.9\" style=\"enable-background:new 0 0 595.3 841.9;\" xml:space=\"preserve\">\r\n<style type=\"text/css\">\r\n	.st0{fill:#FFFFFF;stroke:#9FD2FF;stroke-miterlimit:3;}\r\n	.st1{stroke:#9FD2FF;stroke-miterlimit:3;}\r\n	.st2{font-family:\'AdobeSongStd-Light-GBpc-EUC-H\';}\r\n	.st3{font-size:12px;}\r\n	.st4{stroke:#9FD2FF;}\r\n</style>\r\n<g>\r\n	<rect x=\"167\" y=\"67.3\" class=\"st0\" width=\"118\" height=\"40\"/>\r\n	<text transform=\"matrix(1 0 0 1 206.3296 91.3369)\" class=\"st1 st2 st3\">1WT603</text>\r\n	<rect x=\"146\" y=\"107.3\" class=\"st0\" width=\"160\" height=\"118.7\"/>\r\n	<rect x=\"146\" y=\"107\" class=\"st0\" width=\"160\" height=\"47.3\"/>\r\n	<text transform=\"matrix(1 0 0 1 184.3296 134.0015)\" class=\"st1 st2 st3\">603变温度控制器</text>\r\n	<rect x=\"153.7\" y=\"162\" class=\"st0\" width=\"104.7\" height=\"18.7\"/>\r\n	<rect x=\"153.7\" y=\"181\" class=\"st0\" width=\"104.7\" height=\"18.7\"/>\r\n	<rect x=\"153.7\" y=\"199.7\" class=\"st0\" width=\"104.7\" height=\"18.7\"/>\r\n	<text transform=\"matrix(1 0 0 1 265.6621 175.0024)\" class=\"st1 st2 st3\">℃</text>\r\n	<text transform=\"matrix(1 0 0 1 265.6621 197.3354)\" class=\"st1 st2 st3\">℃</text>\r\n	<text transform=\"matrix(1 0 0 1 265.6621 215.002)\" class=\"st1 st2 st3\">℃</text>\r\n</g>\r\n<g>\r\n	<rect x=\"336.3\" y=\"67.3\" class=\"st0\" width=\"118\" height=\"40\"/>\r\n	<text transform=\"matrix(1 0 0 1 375.6621 91.3369)\" class=\"st1 st2 st3\">1WT604</text>\r\n	<rect x=\"315.3\" y=\"107.3\" class=\"st0\" width=\"160\" height=\"118.7\"/>\r\n	<rect x=\"315.3\" y=\"107\" class=\"st0\" width=\"160\" height=\"47.3\"/>\r\n	<text transform=\"matrix(1 0 0 1 353.6621 134.0015)\" class=\"st1 st2 st3\">604变温度控制器</text>\r\n	<rect x=\"323\" y=\"162\" class=\"st0\" width=\"104.7\" height=\"18.7\"/>\r\n	<rect x=\"323\" y=\"181\" class=\"st0\" width=\"104.7\" height=\"18.7\"/>\r\n	<rect x=\"323\" y=\"199.7\" class=\"st0\" width=\"104.7\" height=\"18.7\"/>\r\n	<text transform=\"matrix(1 0 0 1 434.9941 175.0024)\" class=\"st1 st2 st3\">℃</text>\r\n	<text transform=\"matrix(1 0 0 1 434.9941 197.3354)\" class=\"st1 st2 st3\">℃</text>\r\n	<text transform=\"matrix(1 0 0 1 434.9941 215.002)\" class=\"st1 st2 st3\">℃</text>\r\n</g>\r\n<text id=\"PT105\" transform=\"matrix(1.2228 0 0 1 182.6201 175.7686)\" class=\"st4 st2 st3\">888888</text>\r\n<text id=\"PT104\" transform=\"matrix(1.2228 0 0 1 183.4671 195.6298)\" class=\"st4 st2 st3\">888888</text>\r\n<text id=\"PT103\" transform=\"matrix(1.2228 0 0 1 181.5724 213.0614)\" class=\"st4 st2 st3\">888888</text>\r\n<text id=\"PT102\" transform=\"matrix(1.2228 0 0 1 349.0671 175.5456)\" class=\"st4 st2 st3\">888888</text>\r\n<text id=\"PT101\" transform=\"matrix(1.2228 0 0 1 348.3093 194.114)\" class=\"st4 st2 st3\">888888</text>\r\n<text id=\"PT100\" transform=\"matrix(1.2228 0 0 1 347.9303 212.3035)\" class=\"st4 st2 st3\">888888</text>\r\n</svg>\r\n');
+INSERT INTO  `myems_system_db`.`tbl_svgs` VALUES (2, 'SVG02', '<?xml version=\"1.0\" encoding=\"utf-8\"?>\r\n<!-- Generator: Adobe Illustrator 24.1.2, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->\r\n<svg version=\"1.1\" id=\"图层_1\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" x=\"0px\" y=\"0px\"\r\nviewBox=\"0 0 1920 1080\" enable-background=\"new 0 0 1920 1080\" xml:space=\"preserve\">\r\n<text id=\"PT100\" transform=\"matrix(0.7283 0 0 1 584 374.6328)\" font-family=\"\'AdobeSongStd-Light-GBpc-EUC-H\'\" font-size=\"32.9428px\">888888</text>\r\n<rect x=\"360\" y=\"299\" fill=\"#A12312\" width=\"184\" height=\"127\"/>\r\n<text id=\"PT101\" transform=\"matrix(0.7283 0 0 1 882 300.6328)\" font-family=\"\'AdobeSongStd-Light-GBpc-EUC-H\'\" font-size=\"32.9428px\">888888</text>\r\n\r\n</svg>');
+
+
+-- ---------------------------------------------------------------------------------------------------------------------
+-- Records of `myems_system_db`.`tbl_menus`
+-- ---------------------------------------------------------------------------------------------------------------------
+INSERT INTO `myems_system_db`.`tbl_menus`(`id`, `name`, `route`, `parent_menu_id`, `is_hidden`) VALUES (803, 'Svg System', '/auxiliarysystem/svgsystem', 800, 0);

myems-api/app.py

@@ -5,7 +5,7 @@ from core import energyflowdiagram, privilege, textmessage, distributioncircuit,
     costcenter, point, knowledgefile, meter, tariff, user, storetype, timezone, \
     costfile, offlinemeterfile, version, contact, emailserver, combinedequipment, datasource, equipment, tenant, \
     shopfloor, webmessage, distributionsystem, store, emailmessage, tenanttype, wechatmessage, space, gateway, \
-    offlinemeter, rule, energycategory, sensor, energyitem, notification, menu
+    offlinemeter, rule, energycategory, sensor, energyitem, notification, menu, svg
 from reports import advancedreport
 from reports import distributionsystem as distributionsystemreport
 from reports import energyflowdiagram as energyflowdiagramreport
@@ -414,6 +414,11 @@ api.add_route('/tariffs',
 api.add_route('/tariffs/{id_}',
               tariff.TariffItem())
 
+api.add_route('/svgs',
+              svg.Collection())
+api.add_route('/svgs/{id_}',
+              svg.Item())
+
 api.add_route('/tenants',
               tenant.TenantCollection())
 api.add_route('/tenants/{id_}',

myems-api/core/svg.py

@@ -0,0 +1,172 @@
+import re
+
+import falcon
+import simplejson as json
+import mysql.connector
+import config
+from core.useractivity import user_logger, access_control
+
+
+class Collection:
+    @staticmethod
+    def __init__():
+        """"Initializes svgCollection"""
+        pass
+
+    @staticmethod
+    def on_options(req, resp):
+        resp.status = falcon.HTTP_200
+
+    @staticmethod
+    def on_get(req, resp):
+        cnx = mysql.connector.connect(**config.myems_system_db)
+        cursor = cnx.cursor(dictionary=True)
+
+        query = (" SELECT id, name "
+                 " FROM tbl_svgs "
+                 " ORDER BY id ")
+        cursor.execute(query)
+        rows_svgs = cursor.fetchall()
+
+        result = list()
+        if rows_svgs is not None and len(rows_svgs) > 0:
+            for row in rows_svgs:
+                temp = {"id": row['id'],
+                        "name": row['name']}
+
+                result.append(temp)
+
+        cursor.close()
+        cnx.disconnect()
+        resp.text = json.dumps(result)
+
+
+class Item:
+    @staticmethod
+    def __init__():
+        """"Initializes svgItem"""
+        pass
+
+    @staticmethod
+    def on_options(req, resp, id_):
+        resp.status = falcon.HTTP_200
+
+    @staticmethod
+    def on_get(req, resp, id_):
+        if not id_.isdigit() or int(id_) <= 0:
+            raise falcon.HTTPError(falcon.HTTP_400, title='API.BAD_REQUEST',
+                                   description='API.INVALID_svg_ID')
+
+        cnx = mysql.connector.connect(**config.myems_system_db)
+        cursor = cnx.cursor(dictionary=True)
+
+        query = (" SELECT id, name, content "
+                 " FROM tbl_svgs "
+                 " WHERE id=%s ")
+        cursor.execute(query, (id_,))
+        rows_svg = cursor.fetchone()
+
+        result = None
+        if rows_svg is not None and len(rows_svg) > 0:
+            result = {"id": rows_svg['id'],
+                      "name": rows_svg['name'],
+                      "content": rows_svg['content']}
+        else:
+            cursor.close()
+            cnx.disconnect()
+            resp.text = json.dumps(result)
+
+        tmp_content = result['content']
+        # Get all ids
+        ids = re.findall(r'<text id="(.*?)" .*?>8*</text>', tmp_content)  # # ['PT100', 'PT101']
+        # Get All Data
+        """
+        数据点 Point 代码 PT
+        计量表 Meter 代号 MT
+        虚拟表 VirtualMeter 代号 VM
+        离线表 OfflineMeter 代码 OM
+        空间 Space 代号 SP
+        传感器 Sensor 代号 SS
+        设备 Equipment 代号 EQ
+        组合设备 CombinedEquipment 代码 CE
+        车间 Shopfloor代码 SF
+        """
+        _dict = {
+            'PT': {},
+            'MT': {},
+            'VM': {},
+            'OM': {},
+            'SP': {},
+            'SS': {},
+            'EQ': {},
+            'CE': {},
+            'SF': {},
+        }
+
+        # Group the tag
+        for item in ids:
+            _type = item[0:2]
+            _number = item[2:]
+            if _type not in _dict.keys():
+                print("Error Type", item)
+                continue
+            if _number not in _dict[_type].keys():
+                _dict[_type][_number] = 111
+
+        # Todo: Get data from database
+
+        # Replace
+        for item in ids:
+            r_type = item[0:2]
+            r_id = item[2:]
+            tmp_content = re.sub(r'<text id="' + item + '" (?P<other>.*?)>8*</text>',
+                                 r'<text id="' + item + '" \g<other> >' + str(_dict[r_type][r_id]) + '</text>',
+                                 tmp_content)
+
+        result['content'] = tmp_content
+        cursor.close()
+        cnx.disconnect()
+        resp.text = json.dumps(result)
+
+    @staticmethod
+    @user_logger
+    def on_put(req, resp, id_):
+        """Handles PUT requests"""
+        access_control(req)
+        try:
+            raw_json = req.stream.read().decode('utf-8')
+        except Exception as ex:
+            raise falcon.HTTPError(falcon.HTTP_400, title='API.EXCEPTION', description=ex)
+
+        if not id_.isdigit() or int(id_) <= 0:
+            raise falcon.HTTPError(falcon.HTTP_400, title='API.BAD_REQUEST',
+                                   description='API.INVALID_svg_ID')
+
+        new_values = json.loads(raw_json)
+
+        if 'name' not in new_values['data'].keys() or \
+                not isinstance(new_values['data']['name'], str):
+            raise falcon.HTTPError(falcon.HTTP_400, title='API.BAD_REQUEST',
+                                   description='API.INVALID_NAME')
+        if 'content' not in new_values['data'].keys() or \
+                not isinstance(new_values['data']['content'], str):
+            raise falcon.HTTPError(falcon.HTTP_400, title='API.BAD_REQUEST',
+                                   description='API.INVALID_CONTENT')
+
+        name = new_values['data']['name']
+        content = new_values['data']['content']
+
+        cnx = mysql.connector.connect(**config.myems_system_db)
+        cursor = cnx.cursor()
+        update_row = (" UPDATE tbl_svgs "
+                      " SET name = %s, content = %s "
+                      " WHERE id = %s ")
+        cursor.execute(update_row, (name,
+                                    content,
+                                    id_))
+        cnx.commit()
+
+        cursor.close()
+        cnx.disconnect()
+
+        resp.status = falcon.HTTP_200

myems-web/package.json

@@ -17,8 +17,10 @@
     "@fullcalendar/react": "^5.3.1",
     "@fullcalendar/timegrid": "^5.3.1",
     "@loadable/component": "^5.13.2",
+    "assert": "^2.0.0",
     "attr-accept": "^2.2.2",
     "bootstrap": "^4.5.3",
+    "buffer": "^6.0.3",
     "chart.js": "^2.9.3",
     "classnames": "^2.2.6",
     "echarts": "^5.2.2",
@@ -73,9 +75,9 @@
     "react-toastify": "^5.5.0",
     "react-typed": "^1.2.0",
     "reactstrap": "^8.6.0",
+    "rsuite": "^5.6.1",
     "slick-carousel": "^1.8.1",
-    "uuid": "^3.4.0",
+    "uuid": "^3.4.0"
-    "rsuite": "^5.6.1"
   },
   "scripts": {
     "start": "react-scripts --openssl-legacy-provider start",
@@ -92,7 +94,6 @@
     "eslint-config-prettier": "^8.3.0",
     "eslint-plugin-prettier": "^4.0.0",
     "eslint-plugin-react": "^7.28.0",
-    "postcss": "^8.0.0",
     "gulp": "^4.0.2",
     "gulp-autoprefixer": "^6.1.0",
     "gulp-clean-css": "^4.3.0",
@@ -101,6 +102,7 @@
     "gulp-rtlcss": "^1.4.1",
     "gulp-sass": "^5.0.0",
     "gulp-sourcemaps": "^2.6.5",
+    "postcss": "^8.0.0",
     "prettier": "1.17.1",
     "sass": "^1.43.4"
   }

myems-web/src/components/MyEMS/AuxiliarySystem/SvgSystem.js

@@ -0,0 +1,192 @@
+import React, { createRef, Fragment, useState, useEffect } from 'react';
+import {
+  Breadcrumb,
+  BreadcrumbItem,
+  Card,
+  CardBody,
+  Col,
+  CustomInput,
+  Form,
+  FormGroup,
+  Label,
+  Modal,
+  ModalBody,
+  ModalFooter,
+  ModalHeader,
+  Row,
+  Spinner
+} from 'reactstrap';
+import RealtimeChart from './RealtimeChart';
+import { getCookieValue, createCookie } from '../../../helpers/utils';
+import withRedirect from '../../../hoc/withRedirect';
+import { withTranslation } from 'react-i18next';
+import { toast } from 'react-toastify';
+import { APIBaseURL } from '../../../config';
+
+const SvgSystem = ({ setRedirect, setRedirectUrl, t }) => {
+  useEffect(() => {
+    let is_logged_in = getCookieValue('is_logged_in');
+    let user_name = getCookieValue('user_name');
+    let user_display_name = getCookieValue('user_display_name');
+    let user_uuid = getCookieValue('user_uuid');
+    let token = getCookieValue('token');
+    if (is_logged_in === null || !is_logged_in) {
+      setRedirectUrl(`/authentication/basic/login`);
+      setRedirect(true);
+    } else {
+      //update expires time of cookies
+      createCookie('is_logged_in', true, 1000 * 60 * 60 * 8);
+      createCookie('user_name', user_name, 1000 * 60 * 60 * 8);
+      createCookie('user_display_name', user_display_name, 1000 * 60 * 60 * 8);
+      createCookie('user_uuid', user_uuid, 1000 * 60 * 60 * 8);
+      createCookie('token', token, 1000 * 60 * 60 * 8);
+    }
+  });
+
+  // Svg List
+  const [svgSystemList, setSvgSystemList] = useState([]);
+
+  // Query Parameters
+  const [selectedSvgSystemID, setSelectedSvgSystemID] = useState(undefined);
+
+  // Results
+  const [svgSystemContent, setSvgSystemContent] = useState(undefined);
+  const [svgSystemContentDict, setSvgSystemContentDict] = useState(undefined);
+
+  // Init: Get svgs and set the first svg
+  useEffect(() => {
+    let isResponseOK = false;
+    fetch(APIBaseURL + '/svgs', {
+      method: 'GET',
+      headers: {
+        'Content-type': 'application/json',
+        'User-UUID': getCookieValue('user_uuid'),
+        Token: getCookieValue('token')
+      },
+      body: null
+    })
+      .then(response => {
+        console.log(response);
+        if (response.ok) {
+          isResponseOK = true;
+        }
+        return response.json();
+      })
+      .then(json => {
+        console.log(json);
+        if (isResponseOK) {
+          setSvgSystemList(json);
+          setSelectedSvgSystemID(json[0].id);
+          getSvgContent(json[0].id);
+        } else {
+          toast.error(json.description);
+        }
+      })
+      .catch(err => {
+        console.log(err);
+      });
+  }, []);
+
+  const labelClasses = 'ls text-uppercase text-600 font-weight-semi-bold mb-0';
+
+  // Select: Choose Svg
+  const onSvgSystemChange = event => {
+    setSelectedSvgSystemID(event.target.value);
+    console.log('You Change the Svg ID', event.target.value);
+    // Get Svg Content
+    getSvgContent(event.target.value);
+  };
+
+  // Fcuntion: Get Svg Content
+  const getSvgContent = svgId => {
+    let isResponseOK = false;
+    fetch(APIBaseURL + '/svgs/' + svgId, {
+      method: 'GET',
+      headers: {
+        'Content-type': 'application/json',
+        'User-UUID': getCookieValue('user_uuid'),
+        Token: getCookieValue('token')
+      },
+      body: null
+    })
+      .then(response => {
+        console.log(response);
+        if (response.ok) {
+          isResponseOK = true;
+        }
+        return response.json();
+      })
+      .then(json => {
+        console.log(json);
+        if (isResponseOK) {
+          setSvgSystemContent(json.content);
+          setSvgSystemContentDict({ __html: json.content });
+        } else {
+          toast.error(json.description);
+        }
+      })
+      .catch(err => {
+        console.log(err);
+      });
+  };
+
+  useEffect(() => {
+    console.log('svgSystemList', svgSystemList);
+  }, [svgSystemList]);
+
+  useEffect(() => {
+    console.log('svgSystemContent', svgSystemContent);
+  }, [svgSystemContent]);
+
+  useEffect(() => {
+    console.log('selectedSvgSystemID', selectedSvgSystemID);
+  }, [selectedSvgSystemID]);
+
+  useEffect(() => {
+    console.log('svgSystemContentDict', svgSystemContentDict);
+  }, [svgSystemContentDict]);
+
+  return (
+    <Fragment>
+      <div>
+        <Breadcrumb>
+          <BreadcrumbItem>{t('Auxiliary System')}</BreadcrumbItem>
+          <BreadcrumbItem active>{t('Svg System')}</BreadcrumbItem>
+        </Breadcrumb>
+      </div>
+      <Card className="bg-light mb-3">
+        <CardBody className="p-3">
+          <Form>
+            <Row form>
+              <Col xs={6} sm={3}>
+                <FormGroup>
+                  <Label className={labelClasses} for="svgSystemSelect">
+                    {t('Svg System')}
+                  </Label>
+                  <CustomInput
+                    type="select"
+                    id="svgSystemSelect"
+                    name="svgSystemSelect"
+                    value={selectedSvgSystemID}
+                    onChange={onSvgSystemChange}
+                  >
+                    {svgSystemList.map((svgSystem, index) => (
+                      <option value={svgSystem.id} key={svgSystem.id}>
+                        {svgSystem.name}
+                      </option>
+                    ))}
+                  </CustomInput>
+                </FormGroup>
+              </Col>
+            </Row>
+          </Form>
+        </CardBody>
+      </Card>
+      <Card className="bg-light">
+        <div dangerouslySetInnerHTML={svgSystemContentDict} />
+      </Card>
+    </Fragment>
+  );
+};
+
+export default withTranslation()(withRedirect(SvgSystem));

myems-web/src/config.js

@@ -1,7 +1,7 @@
 export const version = '1.9.0';
 export const navbarBreakPoint = 'xl'; // Vertical navbar breakpoint
 export const topNavbarBreakpoint = 'lg';
-//export const APIBaseURL = 'http://127.0.0.1:8000';
+// export const APIBaseURL = 'http://127.0.0.1:8000';
 export const APIBaseURL = window.location.protocol+"//"+window.location.hostname+":"+window.location.port+"/api";
 export const settings = {
   isFluid: true,

myems-web/src/i18n.js

@@ -46,6 +46,7 @@ const resources = {
       'Tenant Bill': 'Tenant Bill',
       'Energy Flow Diagram': 'Energy Flow Diagram',
       'Distribution System':'Distribution System',
+      'Svg System': 'Flat Data Show System',
       'Fault Statistics': 'Fault Statistics',
       'Space Faults Data': 'Space Faults',
       'Equipment Faults Data': 'Equipment Faults',
@@ -845,6 +846,7 @@ const resources = {
       'Tenant Bill': 'Mieter Rechnung',
       'Energy Flow Diagram': 'Energieflussdiagramm',
       'Distribution System': 'Vertriebssystem',
+      'Svg System': 'Flache Datenanzeige',
       'Fault Statistics': 'Fehlerstatistik',
       'Space Faults Data': 'Platz Fehler',
       'Equipment Faults Data': 'Ausrüstung Fehler',
@@ -1655,6 +1657,7 @@ const resources = {
       'Tenant Bill': '租户账单',
       'Energy Flow Diagram': '能流图',
       'Distribution System': '配电系统',
+      'Svg System': '平面数据展示系统',
       'Fault Statistics': '故障统计分析',
       'Space Faults Data': '空间故障分析',
       'Equipment Faults Data': '设备故障分析',

myems-web/src/layouts/MyEMSRoutes.js

@@ -196,6 +196,7 @@ import AdvancedReporting from '../components/MyEMS/AdvancedReporting/AdvancedRep
 import KnowledgeBase from '../components/MyEMS/KnowledgeBase/KnowledgeBase';
 // Notification
 import Notification from '../components/MyEMS/Notification/Notification';
+import SvgSystem from '../components/MyEMS/AuxiliarySystem/SvgSystem';
 
 // const InboxRoutes = ({ match: { url } }) => (
 //   <InboxProvider>
@@ -422,6 +423,7 @@ const MyEMSRoutes = () => (
     {/*Auxiliary System*/}
     <Route path="/auxiliarysystem/energyflowdiagram" exact component={EnergyFlowDiagram} />
     <Route path="/auxiliarysystem/distributionsystem" exact component={DistributionSystem} />
+    <Route path="/auxiliarysystem/svgsystem" exact component={SvgSystem} />
 
     {/*FDD*/}
     <Route path="/fdd/combinedequipment" exact component={FDDCombinedEquipmentFault} />

myems-web/src/routes.js

@@ -443,7 +443,8 @@ export const auxiliarySystemRoutes = {
   icon: 'chart-pie',
   children: [
     { to: '/auxiliarysystem/energyflowdiagram', name: 'Energy Flow Diagram' },
-    { to: '/auxiliarysystem/distributionsystem', name: 'Distribution System' }
+    { to: '/auxiliarysystem/distributionsystem', name: 'Distribution System' },
+    { to: '/auxiliarysystem/svgsystem', name: 'Svg System' }
   ]
 };