modify the svg

myems-api/core/svg.py

@@ -86,21 +86,46 @@ class Item:
             for row in rows_point:
                 print("row", row)
                 add_svg = add_svg + \
-                          '<image id="{point_id}" onclick="{func}(\'{meter_type}\',{meter_id},\'{meter_name}\')" overflow="visible" width="80" height="80" xlink:href="{point_icon}"  transform="translate({point_x},{point_y})"> </image>\n'. \
+                          '<image id="{point_id}" onclick={l_tag}{func}(this,"{meter_type}",{meter_id},"{meter_name}"){r_tag} overflow="visible" width="80" height="80" xlink:href="{point_icon}"  transform="translate({point_x},{point_y})"> </image>\n'. \
                               format(point_id=row['point_id'],
                                      point_icon=row['point_icon'],
                                      point_x=row['point_x'],
                                      point_y=row['point_y'],
-                                     func=row['func'],
+                                     func= row['func'],
                                      meter_type=row['meter_type'],
                                      meter_id=row['meter_id'],
                                      meter_name=row['meter_name'],
+                                     r_tag="}",
+                                     l_tag="{",
                                      )
 
             result['content'] = result['content'].replace("Template", add_svg)
         else:
             result['content'] = result['content'].replace("TEMPLATE", "")
 
+        result['content'] = """
+<svg version="1.1" id="svg_01" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 1920 912" enable-background="new 0 0 1920 912" xml:space="preserve">
+
+     <image id="1" onClick="test()" overflow="visible" width="80" height="80" xlink:href="meter.png"  transform="translate(100.0,100.0)"> </image>
+
+<g>
+	<g>
+		<g>
+			<ellipse fill="#FFFFFF" cx="1137.5" cy="457.4" rx="44" ry="37.8"/>
+			<path d="M1137.5,420c24,0,43.5,16.7,43.5,37.3s-19.5,37.3-43.5,37.3s-43.5-16.7-43.5-37.3S1113.5,420,1137.5,420 M1137.5,419
+				c-24.6,0-44.5,17.2-44.5,38.3s19.9,38.3,44.5,38.3s44.5-17.2,44.5-38.3S1162.1,419,1137.5,419L1137.5,419z"/>
+		</g>
+		<ellipse fill="none" cx="1146" cy="460.1" rx="31" ry="31.4"/>
+		
+			<text transform="matrix(0.7175 0 0 1 1120.8711 472.938)" stroke="#000000" stroke-miterlimit="10" font-family="'AdobeSongStd-Light-GBpc-EUC-H'" font-size="50.1724px">Ａ</text>
+	</g>
+	<text transform="matrix(0.7175 0 0 1 1077.3623 554.2559)" font-family="'AdobeSongStd-Light-GBpc-EUC-H'" font-size="50.1724px">FFF2 {text}</text>
+</g>
+
+</svg>
+"""
+
         cursor.close()
         cnx.disconnect()
         resp.text = json.dumps(result)

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",
@@ -54,6 +56,7 @@
     "react-es6-progressbar.js": "^1.1.0",
     "react-flatpickr": "^3.10.6",
     "react-hook-form": "^4.10.2",
+    "react-html-parser": "^2.0.2",
     "react-i18next": "^11.7.0",
     "react-image-lightbox": "^5.1.1",
     "react-image-video-lightbox": "^3.0.0",
@@ -73,9 +76,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 +95,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 +103,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/1.svg

@@ -0,0 +1,20 @@
+<svg version="1.1" id="svg_01" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 1920 912" enable-background="new 0 0 1920 912" xml:space="preserve">
+
+     <image id="1" onclick="test()" overflow="visible" width="80" height="80" xlink:href="meter.png"  transform="translate(100.0,100.0)"> </image>
+
+<g>
+	<g>
+		<g>
+			<ellipse fill="#FFFFFF" cx="1137.5" cy="457.4" rx="44" ry="37.8"/>
+			<path d="M1137.5,420c24,0,43.5,16.7,43.5,37.3s-19.5,37.3-43.5,37.3s-43.5-16.7-43.5-37.3S1113.5,420,1137.5,420 M1137.5,419
+				c-24.6,0-44.5,17.2-44.5,38.3s19.9,38.3,44.5,38.3s44.5-17.2,44.5-38.3S1162.1,419,1137.5,419L1137.5,419z"/>
+		</g>
+		<ellipse fill="none" cx="1146" cy="460.1" rx="31" ry="31.4"/>
+		
+			<text transform="matrix(0.7175 0 0 1 1120.8711 472.938)" stroke="#000000" stroke-miterlimit="10" font-family="'AdobeSongStd-Light-GBpc-EUC-H'" font-size="50.1724px">Ａ</text>
+	</g>
+	<text transform="matrix(0.7175 0 0 1 1077.3623 554.2559)" font-family="'AdobeSongStd-Light-GBpc-EUC-H'" font-size="50.1724px">FFF2</text>
+</g>
+
+</svg>

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

@@ -9,6 +9,10 @@ import {
   Form,
   FormGroup,
   Label,
+  Modal,
+  ModalBody,
+  ModalFooter,
+  ModalHeader,
   Row,
   Spinner
 } from 'reactstrap';
@@ -20,6 +24,7 @@ import uuid from 'uuid/v1';
 import { toast } from 'react-toastify';
 import { APIBaseURL } from '../../../config';
 import ButtonIcon from '../../common/ButtonIcon';
+import ReactHtmlParser from 'react-html-parser'; 
 
 const SvgSystem = ({ setRedirect, setRedirectUrl, t }) => {
   useEffect(() => {
@@ -151,6 +156,13 @@ const SvgSystem = ({ setRedirect, setRedirectUrl, t }) => {
     console.log('svgSystemContentDict', svgSystemContentDict);
   }, [svgSystemContentDict]);
 
+  const showData = (e) =>{
+    console.log("showData", e);
+  }
+
+  function test() {
+    console.log("Hello World")
+  }
   return (
     <Fragment>
       <div>
@@ -204,6 +216,16 @@ const SvgSystem = ({ setRedirect, setRedirectUrl, t }) => {
           <div dangerouslySetInnerHTML={svgSystemContentDict} />
         </Col>
       </Row>
+      <Modal>
+        <ModalHeader> {t('Data Show')} </ModalHeader>
+        <ModalBody>
+
+        </ModalBody>
+                      
+                      <ModalFooter>
+
+                      </ModalFooter>
+      </Modal>
     </Fragment>
   );
 };