add socket urls

Strides-Admin/package.json

@@ -16,6 +16,7 @@
     "@googlemaps/markerclustererplus": "^1.2.0",
     "axios": "^0.21.1",
     "babel-preset-es2015": "^6.24.1",
+    "clipboardy": "^2.3.0",
     "core-js": "^3.14.0",
     "echarts": "4.2.1",
     "element-resize-detector": "^1.2.3",

Strides-Admin/src/http/api/charge.js

@@ -36,6 +36,9 @@ const charge = {
   },
   getStatusOptions: () => {
     return get('base/getDataStatus')
+  },
+  getStationUrls: () => {
+    return get('station/websocket/urls')
   }
 }
 

Strides-Admin/src/utils/clipboard.js

@@ -1,5 +1,5 @@
 import Vue from 'vue'
-import Clipboard from 'clipboard'
+import {write} from 'clipboardy/browser'
 
 function clipboardSuccess() {
   Vue.prototype.$message({
@@ -17,16 +17,12 @@ function clipboardError() {
 }
 
 export default function handleClipboard(text, event) {
-  const clipboard = new Clipboard(event.target, {
+  /*const clipboard = new Clipboard(event.target, {
     text: () => text
-  })
-  clipboard.on('success', () => {
+  })*/
+  write(text).then(res => {
     clipboardSuccess()
-    clipboard.destroy()
-  })
-  clipboard.on('error', () => {
+  }).catch(err => {
     clipboardError()
-    clipboard.destroy()
   })
-  clipboard.onClick(event)
 }

Strides-Admin/src/views/charge/AddStation.vue

@@ -260,6 +260,18 @@
           </el-row>
         </div>
       </div>
+      <div class="card-content flex1">
+        <div class="section-title">Websocket urls</div>
+        <div class="urls-group">
+          <div class="urls-item" v-for="(item, index) in socketUrls" :key="index">
+            <span class="urls-title">{{item.urlName + " URL:"}}</span>
+            <span class="copy-url" @click="e => copyUrls(e, item.urlValue)">
+              <i class="el-icon-document-copy"></i>
+              {{item.urlValue}}
+            </span>
+          </div>
+        </div>
+      </div>
       <div class="card-content flex1" v-if="addForm.connectorInfo.length">
         <div class="section-title">Connector Settings</div>
         <div class="rate-list-view" v-for="(item, index) in addForm.connectorInfo" :key="index">
@@ -328,6 +340,7 @@
   import site from '../../http/api/site'
   import station from '../../http/api/charge'
   import provider from '../../http/api/provider'
+  import handleClipboard from '@/utils/clipboard'
   export default {
     data() {
       return {
@@ -430,6 +443,7 @@
           level: '',
           lotNumber: ''
         },
+        socketUrls: [],
         chargeTypeOptions: [],
         registerOptions: [],
         providerOptions: [],
@@ -476,6 +490,7 @@
           }
         }).finally(() => {
           this.getAllProvider();
+          this.getStationUrls();
         });
       },
       getStationInfo() {
@@ -488,6 +503,15 @@
            
         });
       },
+      getStationUrls() {
+        station.getStationUrls().then(res => {
+          if (res.data) {
+            this.socketUrls = res.data
+          }
+        }).catch(err => {
+          
+        })
+      },
       getAllProvider() {
         provider.getAllServiceProvider().then(res => {
           if (res.data && res.data.length > 0) {
@@ -551,6 +575,9 @@
             type: 'error'
           })
         })
+      },
+      copyUrls(e, url) {
+        handleClipboard(url, e)
       }
     }
   }
@@ -602,6 +629,7 @@
   }
   .rate-list-view {
     display: flex;
+    flex-wrap: wrap;
     align-items: center;
   }
   .rate-text {
@@ -632,4 +660,33 @@
   .info-text {
     color: #888;
   }
+  .urls-item {
+    display: flex;
+    padding: 5px 0;
+    font-size: 14px;
+    align-items: center;
+  }
+  .urls-title {
+    width: 85px;
+    margin-right: 10px;
+    text-align: right;
+    white-space: nowrap;
+  }
+  .copy-url {
+    flex: 1;
+    color: #888;
+    display: flex;
+    cursor: pointer;
+    font-size: 14px;
+    align-items: center;
+    transition: all .4s;
+    word-break: break-all;
+  }
+  .copy-url i {
+    padding: 5px;
+    font-size: 16px;
+  }
+  .copy-url:hover {
+    color: #000;
+  }
 </style>