openatc-components 0.0.2 → 0.0.3

package/src/kisscomps/components/SchemeConfig/closePhaselControlModal/index.vue

@@ -11,7 +11,7 @@
  **/
 <template>
   <div class="manual-control-modal closephase-control">
-    <div class="title" style="margin-bottom: 18px;">{{$t('edge.overview.phaseclosecontrol')}}</div>
+    <div class="title" style="margin-bottom: 18px;">{{$t('openatccomponents.overview.phaseclosecontrol')}}</div>
     <el-row>
       <el-col :span="24">
          <el-form
@@ -20,62 +20,58 @@
            :model="manualInfo"
            label-width="100px">
             <el-form-item
-                :label="$t('edge.overview.delay') + ':'"
+                :label="$t('openatccomponents.overview.delay') + ':'"
                 prop="intersection">
-               <el-input v-model="manualInfo.tempDelay" size="mini" :placeholder="$t('edge.common.input')"></el-input>
+               <el-input v-model="manualInfo.tempDelay" size="mini" :placeholder="$t('openatccomponents.common.input')"></el-input>
             </el-form-item>
             <el-form-item
-                :label="$t('edge.overview.duration') + ':'"
+                :label="$t('openatccomponents.overview.duration') + ':'"
                 prop="count">
-               <el-input v-model="manualInfo.tempDuration" size="mini" :placeholder="$t('edge.common.input')"></el-input>
+               <el-input v-model="manualInfo.tempDuration" size="mini" :placeholder="$t('openatccomponents.common.input')"></el-input>
             </el-form-item>
            </el-form>
       </el-col>
     </el-row>
     <el-row>
-        <div class="model-label">{{$t('edge.overview.mode')}}:</div>
+        <div class="model-label">{{$t('openatccomponents.overview.mode')}}:</div>
         <div style="width: 100%; overflow: hidden;margin-top: 20px;">
-          <CommonKanban
+          <common-kanban
             v-for="ring in closePhaseRings"
             :key="ring.num" class="closephasekanban"
             :list="ring.phases"
-            :header-text="$t('edge.pattern.ring') + ring.num"
+            :header-text="$t('openatccomponents.pattern.ring') + ring.num"
             :Draggable="false"
             @handleSort="handleSort">
               <template v-slot:kanbantitle>
-                <div class="col-title" v-text="$t('edge.overview.closemode')"></div>
+                <div class="col-title" v-text="$t('openatccomponents.overview.closemode')"></div>
               </template>
               <template v-slot:kanbancontent="data">
-                <el-select v-model="data.element.close" class="col-inner"  size="small" :placeholder="$t('edge.common.select')">
+                <el-select v-model="data.element.close" class="col-inner"  size="small" :placeholder="$t('openatccomponents.common.select')">
                   <el-option
                     v-for="item in closeOption"
                     :key="item.value"
-                    :label="$t('edge.overview.closeOption' + item.value)"
+                    :label="$t('openatccomponents.overview.closeOption' + item.value)"
                     :value="item.value">
                   </el-option>
                 </el-select>
             </template>
-          </CommonKanban>
+          </common-kanban>
         </div>
     </el-row>
     <div class="footer" v-if="realtimeStatusModalvisible">
-        <el-button @click="handleClose()">{{$t('edge.button.Back')}}</el-button>
-        <el-button type="primary" @click="handleManualControl()">{{$t('edge.overview.implement')}}</el-button>
+        <el-button @click="handleClose()">{{$t('openatccomponents.button.Back')}}</el-button>
+        <el-button type="primary" @click="handleManualControl()">{{$t('openatccomponents.overview.implement')}}</el-button>
     </div>
     <div class="footer" v-if="!realtimeStatusModalvisible">
-        <el-button @click="handleClose()">{{$t('edge.button.Back')}}</el-button>
-        <el-button type="primary" @click="handleManualControl()">{{$t('edge.overview.comfirm')}}</el-button>
+        <el-button @click="handleClose()">{{$t('openatccomponents.button.Back')}}</el-button>
+        <el-button type="primary" @click="handleManualControl()">{{$t('openatccomponents.overview.comfirm')}}</el-button>
     </div>
   </div>
 </template>
 
 <script>
-import CommonKanban from '../../../components/CommonKanban'
 export default {
   name: 'closePhaselControl',
-  components: {
-    CommonKanban
-  },
   props: {
     Visible: {
       type: Boolean

package/src/kisscomps/components/SchemeConfig/index.js

@@ -1,2 +1,2 @@
-import SchemeConfig from './schemeconfig.vue'
-export default SchemeConfig
+import SchemeConfig from './SchemeConfig.vue'
+export default SchemeConfig

package/src/kisscomps/components/SchemeConfig/lockingPhaselControlModal/index.vue

@@ -11,7 +11,7 @@
  **/
 <template>
   <div class="manual-control-modal lockingphase-control">
-    <div class="title" style="margin-bottom: 18px;">{{$t('edge.overview.phaselocking')}}</div>
+    <div class="title" style="margin-bottom: 18px;">{{$t('openatccomponents.overview.phaselocking')}}</div>
     <el-row>
       <el-col :span="24">
          <el-form
@@ -21,27 +21,27 @@
            :model="manualInfo"
            label-width="100px">
            <el-form-item
-                :label="$t('edge.phase.greenclear') + ':'"
+                :label="$t('openatccomponents.phase.greenclear') + ':'"
                 prop="intersection">
               <el-input-number :min="0" :max="65535" :precision="0" :step="1" :controls="false" v-model.number="manualInfo.tempGreenflash" size="mini"></el-input-number>
             </el-form-item>
             <el-form-item
-                :label="$t('edge.overview.duration') + ':'"
+                :label="$t('openatccomponents.overview.duration') + ':'"
                 prop="count">
               <el-input-number :min="0" :max="65535" :precision="0" :step="1" :controls="false" v-model.number="manualInfo.tempDuration" size="mini"></el-input-number>
             </el-form-item>
             <el-form-item
-                :label="$t('edge.overview.yellowflash') + ':'"
+                :label="$t('openatccomponents.overview.yellowflash') + ':'"
                 prop="intersection">
               <el-input-number :min="0" :max="65535" :precision="0" :step="1" :controls="false" v-model.number="manualInfo.tempYellow" size="mini"></el-input-number>
             </el-form-item>
             <el-form-item
-                :label="$t('edge.overview.allred') + ':'"
+                :label="$t('openatccomponents.overview.allred') + ':'"
                 prop="intersection">
               <el-input-number :min="0" :max="65535" :precision="0" :step="1" :controls="false" v-model.number="manualInfo.tempRedclear" size="mini"></el-input-number>
             </el-form-item>
             <el-form-item
-                :label="$t('edge.phase.mingreen') + ':'"
+                :label="$t('openatccomponents.phase.mingreen') + ':'"
                 prop="count">
               <el-input-number :min="0" :max="65535" :precision="0" :step="1" :controls="false" v-model.number="manualInfo.tempMingreen" size="mini"></el-input-number>
             </el-form-item>
@@ -49,49 +49,45 @@
       </el-col>
     </el-row>
     <el-row>
-        <div class="model-label">{{$t('edge.overview.mode')}}:</div>
+        <div class="model-label">{{$t('openatccomponents.overview.mode')}}:</div>
         <div style="width: 100%; overflow: hidden;margin-top: 20px;">
-          <CommonKanban
+          <common-kanban
             v-for="ring in closePhaseRings"
             :key="ring.num" class="closephasekanban"
             :list="ring.phases"
-            :header-text="$t('edge.pattern.ring') + ring.num"
+            :header-text="$t('openatccomponents.pattern.ring') + ring.num"
             :Draggable="false"
             @handleSort="handleSort">
               <template v-slot:kanbantitle>
-                <div class="col-title" v-text="$t('edge.overview.closemode')"></div>
+                <div class="col-title" v-text="$t('openatccomponents.overview.closemode')"></div>
               </template>
               <template v-slot:kanbancontent="data">
-                <el-select v-model="data.element.locktype" class="col-inner"  size="small" :placeholder="$t('edge.common.select')">
+                <el-select v-model="data.element.locktype" class="col-inner"  size="small" :placeholder="$t('openatccomponents.common.select')">
                   <el-option
                     v-for="item in lockingOption"
                     :key="item.value"
-                    :label="$t('edge.overview.lockingOption' + item.value)"
+                    :label="$t('openatccomponents.overview.lockingOption' + item.value)"
                     :value="item.value">
                   </el-option>
                 </el-select>
             </template>
-          </CommonKanban>
+          </common-kanban>
         </div>
     </el-row>
     <div class="footer" v-if="realtimeStatusModalvisible">
-        <el-button @click="handleClose()">{{$t('edge.button.Back')}}</el-button>
-        <el-button type="primary" @click="handleManualControl()">{{$t('edge.overview.implement')}}</el-button>
+        <el-button @click="handleClose()">{{$t('openatccomponents.button.Back')}}</el-button>
+        <el-button type="primary" @click="handleManualControl()">{{$t('openatccomponents.overview.implement')}}</el-button>
     </div>
     <div class="footer" v-if="!realtimeStatusModalvisible">
-        <el-button @click="handleClose()">{{$t('edge.button.Back')}}</el-button>
-        <el-button type="primary" @click="handleManualControl()">{{$t('edge.overview.comfirm')}}</el-button>
+        <el-button @click="handleClose()">{{$t('openatccomponents.button.Back')}}</el-button>
+        <el-button type="primary" @click="handleManualControl()">{{$t('openatccomponents.overview.comfirm')}}</el-button>
     </div>
   </div>
 </template>
 
 <script>
-import CommonKanban from '../../../components/CommonKanban'
 export default {
   name: 'closePhaselControl',
-  components: {
-    CommonKanban
-  },
   props: {
     Visible: {
       type: Boolean

package/src/kisscomps/components/SchemeConfig/manualControlModal/index.vue

@@ -11,7 +11,7 @@
  **/
 <template>
   <div class="manual-control-modal">
-    <div class="title" style="margin-bottom: 18px;">{{$t('edge.overview.manual')}}</div>
+    <div class="title" style="margin-bottom: 18px;">{{$t('openatccomponents.overview.manual')}}</div>
     <el-row>
       <el-col :span="24">
          <el-form
@@ -20,25 +20,25 @@
            :model="manualInfo"
            label-width="100px">
             <el-form-item
-                :label="$t('edge.overview.controlnumber') + ':'"
+                :label="$t('openatccomponents.overview.controlnumber') + ':'"
                 prop="shape">
-                <el-input-number v-model="manualInfo.tempPatternid" :controls="false" size="mini" :max="65535" :min="0" :precision="0" :step="1" :placeholder="$t('edge.common.input')"></el-input-number>
+                <el-input-number v-model="manualInfo.tempPatternid" :controls="false" size="mini" :max="65535" :min="0" :precision="0" :step="1" :placeholder="$t('openatccomponents.common.input')"></el-input-number>
             </el-form-item>
             <el-form-item
-                :label="$t('edge.overview.delay') + ':'"
+                :label="$t('openatccomponents.overview.delay') + ':'"
                 prop="intersection">
-              <el-input-number v-model="manualInfo.tempDelay" :controls="false" size="mini" :max="65535" :min="0" :precision="0" :step="1" :placeholder="$t('edge.common.input')"></el-input-number>
+              <el-input-number v-model="manualInfo.tempDelay" :controls="false" size="mini" :max="65535" :min="0" :precision="0" :step="1" :placeholder="$t('openatccomponents.common.input')"></el-input-number>
             </el-form-item>
             <el-form-item
-                :label="$t('edge.overview.duration') + ':'"
+                :label="$t('openatccomponents.overview.duration') + ':'"
                 prop="count">
-              <el-input-number v-model="manualInfo.tempDuration" :controls="false" size="mini" :max="65535" :min="0" :precision="0" :step="1" :placeholder="$t('edge.common.input')"></el-input-number>
+              <el-input-number v-model="manualInfo.tempDuration" :controls="false" size="mini" :max="65535" :min="0" :precision="0" :step="1" :placeholder="$t('openatccomponents.common.input')"></el-input-number>
             </el-form-item>
            </el-form>
       </el-col>
     </el-row>
     <el-row>
-        <div class="model-label">{{$t('edge.overview.mode')}}:</div>
+        <div class="model-label">{{$t('openatccomponents.overview.mode')}}:</div>
         <div style="width: 100%; overflow: hidden;">
           <div class="control-model" v-for="(item, index) in modelList" :key="index">
             <div class="single-model"
@@ -46,11 +46,11 @@
             :class="(preselectModel == item.id && preselectStages == -1)? 'single-model-select' : ''"
             v-if="FuncSort === 'allFunc' || (FuncSort === 'basicFunc'&& basicFuncControlId.indexOf(item.id) !== -1)">
               <svg-icon :icon-class="item.iconClass" className="model-icon"></svg-icon>
-              <div class="single-model-name">{{$t('edge.overview.modelList' + item.id)}}</div>
+              <div class="single-model-name">{{$t('openatccomponents.overview.modelList' + item.id)}}</div>
             </div>
           </div>
         </div>
-        <div class="stage-label">{{$t('edge.overview.stage')}}:</div>
+        <div class="stage-label">{{$t('openatccomponents.overview.stage')}}:</div>
         <div style="width: 100%; height: auto;overflow: hidden;">
           <div class="control-model" v-for="(item, index) in stagesList" :key="index">
             <div class="single-model" @click="selectStages(index + 1)" :class="preselectStages == index + 1 ? 'single-model-select' : ''">
@@ -67,28 +67,28 @@
             </div>
           </div>
         </div>
-        <div class="stage-label" v-if="FuncSort === 'allFunc'">{{$t('edge.overview.specialcontrol')}}:</div>
+        <div class="stage-label" v-if="FuncSort === 'allFunc'">{{$t('openatccomponents.overview.specialcontrol')}}:</div>
         <div style="width: 100%; height: auto;overflow: hidden;" v-if="FuncSort === 'allFunc'">
           <div class="control-model" v-for="(item, index) in specialcontrolList" :key="index">
             <div class="single-model" @click="selectSpecialStages(item.id)">
               <svg-icon :icon-class="item.iconClass" className="closephase-icon"></svg-icon>
-              <div class="single-model-name">{{$t('edge.overview.modelList' + item.id)}}</div>
+              <div class="single-model-name">{{$t('openatccomponents.overview.modelList' + item.id)}}</div>
             </div>
           </div>
         </div>
     </el-row>
     <div class="footer" v-if="realtimeStatusModalvisible">
-        <el-button @click="handleClose()">{{$t('edge.button.Back')}}</el-button>
-        <el-button type="primary" @click="handleManualControl()">{{$t('edge.overview.implement')}}</el-button>
+        <el-button @click="handleClose()">{{$t('openatccomponents.button.Back')}}</el-button>
+        <el-button type="primary" @click="handleManualControl()">{{$t('openatccomponents.overview.implement')}}</el-button>
     </div>
     <div class="footer" v-if="!realtimeStatusModalvisible">
-        <el-button type="primary" @click="handleManualControl()">{{$t('edge.overview.comfirm')}}</el-button>
+        <el-button type="primary" @click="handleManualControl()">{{$t('openatccomponents.overview.comfirm')}}</el-button>
     </div>
   </div>
 </template>
 
 <script>
-import xdrdirselector from '@/components/XRDDirSelector'
+import xdrdirselector from '../../XRDDirSelector/XRDDirSelector'
 import { mapState } from 'vuex'
 export default {
   name: 'manualControl',

package/src/kisscomps/components/SchemeConfig/realtimeStatusModal/index.vue

@@ -11,80 +11,80 @@
  **/
 <template>
 <div>
-  <div class="cross-mess" style="margin-bottom: 18px;">{{$t('edge.overview.crossinfo')}}</div>
+  <div class="cross-mess" style="margin-bottom: 18px;">{{$t('openatccomponents.overview.crossinfo')}}</div>
   <div class="cross-module">
     <div class="cross-content">
-      <div style="float: left;" class="cross-name">{{$t('edge.overview.crossname')}}:</div>
+      <div style="float: left;" class="cross-name">{{$t('openatccomponents.overview.crossname')}}:</div>
       <div style="margin-left: 85px;" class="cross-value">{{agentName}}</div>
     </div>
     <div class="cross-content">
-      <div style="float: left;" class="cross-name">{{$t('edge.overview.divicestate')}}:</div>
+      <div style="float: left;" class="cross-name">{{$t('openatccomponents.overview.divicestate')}}:</div>
       <div
         v-show="devStatus===3"
         style="margin-left: 85px;"
         class="cross-value"
-      >{{$t('edge.overview.connected')}}</div>
+      >{{$t('openatccomponents.overview.connected')}}</div>
       <div
         v-show="devStatus===2"
         style="margin-left: 85px;"
         class="cross-value"
-      >{{$t('edge.overview.offline')}}</div>
+      >{{$t('openatccomponents.overview.offline')}}</div>
       <div
         v-show="devStatus===1"
         style="margin-left: 85px;"
         class="cross-value"
-      >{{$t('edge.overview.onlineing')}}</div>
+      >{{$t('openatccomponents.overview.onlineing')}}</div>
     </div>
-    <!-- <div class="cross-content"><div style="float: left;" class="cross-name">{{$t('edge.overview.protocoltype')}}:</div><div style="margin-left: 85px;" class="cross-value">{{protocol}}</div></div> -->
+    <!-- <div class="cross-content"><div style="float: left;" class="cross-name">{{$t('openatccomponents.overview.protocoltype')}}:</div><div style="margin-left: 85px;" class="cross-value">{{protocol}}</div></div> -->
     <!-- <div class="cross-content"><div style="float: left;" class="cross-name">信号机型号:</div><div style="margin-left: 85px;" class="cross-value">XHJ-CW-GA-KSS100</div></div> -->
     <div class="cross-content">
-      <div style="float: left;" class="cross-name">{{$t('edge.overview.signalID')}}:</div>
+      <div style="float: left;" class="cross-name">{{$t('openatccomponents.overview.signalID')}}:</div>
       <div style="margin-left: 85px;" class="cross-value">{{agentId}}</div>
     </div>
     <div class="cross-content">
-      <div style="float: left;" class="cross-name">{{$t('edge.overview.signalIP')}}:</div>
+      <div style="float: left;" class="cross-name">{{$t('openatccomponents.overview.signalIP')}}:</div>
       <div style="margin-left: 85px;" class="cross-value">{{ip}}</div>
     </div>
     <div class="cross-content" v-if="platform">
-      <div style="float: left;" class="cross-name">{{$t('edge.overview.platform')}}:</div>
+      <div style="float: left;" class="cross-name">{{$t('openatccomponents.overview.platform')}}:</div>
       <div style="margin-left: 85px;" class="cross-value">{{platform}}</div>
     </div>
     <div class="cross-content">
-      <div style="float: left;" class="cross-name">{{$t('edge.overview.faultinfo')}}:</div>
+      <div style="float: left;" class="cross-name">{{$t('openatccomponents.overview.faultinfo')}}:</div>
       <div style="margin-left: 85px;" v-if="curFaultList.length">
         <el-tag v-if="confirmedFault.length" type="success">
-          {{$t('edge.overview.confirmed')}}
+          {{$t('openatccomponents.overview.confirmed')}}
           <span style="margin: 0 2px;">{{confirmedFault.length}}</span>
         </el-tag>
         <el-tag v-if="untreatedFault.length">
-          {{$t('edge.overview.untreated')}}
+          {{$t('openatccomponents.overview.untreated')}}
           <span style="margin: 0 2px;">{{untreatedFault.length}}</span>
         </el-tag>
         <el-tag v-if="ignoredFault.length" type="info">
-          {{$t('edge.overview.ignored')}}
+          {{$t('openatccomponents.overview.ignored')}}
           <span style="margin: 0 2px;">{{ignoredFault.length}}</span>
         </el-tag>
-        <span class="fault-detail-btn" @click="showFaultDetail">{{$t('edge.overview.details')}} >></span>
+        <span class="fault-detail-btn" @click="showFaultDetail">{{$t('openatccomponents.overview.details')}} >></span>
       </div>
       <div
         style="margin-left: 85px;"
         class="cross-value"
         v-if="!curFaultList.length"
-      >{{$t('edge.overview.nofault')}}</div>
+      >{{$t('openatccomponents.overview.nofault')}}</div>
     </div>
   </div>
   <div class="control-bottom">
     <div
       class="cross-mess"
       style="float: left;margin-top: 40px;margin-bottom: 18px;"
-    >{{$t('edge.overview.controlmode')}}</div>
+    >{{$t('openatccomponents.overview.controlmode')}}</div>
     <el-button
       type="primary"
       style="float: right; margin-right: 20px;margin-top: 40px;"
       size="mini"
       @click="changeStatus"
-    >{{$t('edge.overview.manual')}}</el-button>
-    <!-- <el-button type="primary" style="float: right; margin-right: 40px;" size="mini" @click="changeStatus" v-show="isOperation">{{$t('edge.overview.exitmanual')}}</el-button> -->
+    >{{$t('openatccomponents.overview.manual')}}</el-button>
+    <!-- <el-button type="primary" style="float: right; margin-right: 40px;" size="mini" @click="changeStatus" v-show="isOperation">{{$t('openatccomponents.overview.exitmanual')}}</el-button> -->
   </div>
   <div class="cross-module">
     <!-- 信号机控制状态模块 Start-->
@@ -94,13 +94,13 @@
           <el-col :span="12">
             <div class="grid-content bg-base">
               <div class="value">{{controlData.mode}}</div>
-              <div class="name">{{$t('edge.overview.controlmodel')}}</div>
+              <div class="name">{{$t('openatccomponents.overview.controlmodel')}}</div>
             </div>
           </el-col>
           <el-col :span="12">
             <div class="grid-content bg-base">
-              <div class="value">{{currModel > -1 ? $t('edge.overview.modelList' + currModel) : ''}}</div>
-              <div class="name">{{$t('edge.overview.curModel')}}</div>
+              <div class="value">{{currModel > -1 ? $t('openatccomponents.overview.modelList' + currModel) : ''}}</div>
+              <div class="name">{{$t('openatccomponents.overview.curModel')}}</div>
             </div>
           </el-col>
         </el-row>
@@ -110,31 +110,31 @@
           <el-col :span="8" v-if="controlData.patternid !== undefined">
             <div class="grid-content bg-base">
               <div class="value">{{controlData.patternid}}</div>
-              <div class="name">{{$t('edge.overview.controlnumber')}}</div>
+              <div class="name">{{$t('openatccomponents.overview.controlnumber')}}</div>
             </div>
           </el-col>
           <el-col :span="8" v-if="responseTime !== undefined">
             <div class="grid-content bg-base">
               <div class="value">{{responseTime + ' ms'}}</div>
-              <div class="name">{{$t('edge.overview.responseTime')}}</div>
+              <div class="name">{{$t('openatccomponents.overview.responseTime')}}</div>
             </div>
           </el-col>
           <el-col :span="8" v-if="controlData.duration !== undefined">
             <div class="grid-content bg-base">
               <div class="value">{{controlData.duration + ' s'}}</div>
-              <div class="name">{{$t('edge.overview.duration')}}</div>
+              <div class="name">{{$t('openatccomponents.overview.duration')}}</div>
             </div>
           </el-col>
           <el-col :span="8" v-if="controlData.delay !== undefined">
             <div class="grid-content bg-base">
               <div class="value">{{controlData.delay}}</div>
-              <div class="name">{{$t('edge.overview.delay')}}</div>
+              <div class="name">{{$t('openatccomponents.overview.delay')}}</div>
             </div>
           </el-col>
           <el-col :span="8" v-if="currentStage !== undefined">
             <div class="grid-content bg-base">
               <div class="value">{{currentStage}}</div>
-              <div class="name">{{$t('edge.overview.curStage')}}</div>
+              <div class="name">{{$t('openatccomponents.overview.curStage')}}</div>
             </div>
           </el-col>
         </el-row>
@@ -143,7 +143,7 @@
     <!-- 信号机控制状态模块 End-->
 
     <div class="cross-content" v-show="stagesList && stagesList.length > 0">
-      <div style="float: left;" class="cross-name">{{$t('edge.overview.currentstage')}}:</div>
+      <div style="float: left;" class="cross-name">{{$t('openatccomponents.overview.currentstage')}}:</div>
       <div style="margin-left: 85PX;">
         <div style="width: 100%; height: auto;">
           <div class="control-model" v-for="(item, index) in stagesList" :key="index">
@@ -199,21 +199,21 @@
       <div
         style="float: left;margin-right: 16px;"
         class="cross-name"
-      >{{$t('edge.overview.phaseclose')}}:</div>
+      >{{$t('openatccomponents.overview.phaseclose')}}:</div>
       <el-tag
         type="danger"
         size="small"
         v-for="(phase, index) in closePhase"
         :key="index"
-      >{{phase.typename + $t('edge.overview.phase') + phase.id + $t('edge.overview.close')}}</el-tag>
+      >{{phase.typename + $t('openatccomponents.overview.phase') + phase.id + $t('openatccomponents.overview.close')}}</el-tag>
     </div>
   </div>
 </div>
 </template>
 
 <script>
-import xdrdirselector from '@/components/XRDDirSelector'
-import PatternWalkSvg from '@/views/overView/crossDirection/baseImg/PatternWalkSvg'
+import xdrdirselector from '../../XRDDirSelector/XRDDirSelector'
+import PatternWalkSvg from '../../IntersectionMap/crossDirection/baseImg/PatternWalkSvg'
 export default {
   name: 'realtimestatus',
   components: {

package/src/kisscomps/components/SvgIcon/SvgIcon.vue

@@ -0,0 +1,53 @@
+/**
+ * Copyright (c) 2020 kedacom
+ * OpenATC is licensed under Mulan PSL v2.
+ * You can use this software according to the terms and conditions of the Mulan PSL v2.
+ * You may obtain a copy of Mulan PSL v2 at:
+ * http://license.coscl.org.cn/MulanPSL2
+ * THIS SOFTWARE IS PROVIDED ON AN "AS IS" BASIS, WITHOUT WARRANTIES OF ANY KIND,
+ * EITHER EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO NON-INFRINGEMENT,
+ * MERCHANTABILITY OR FIT FOR A PARTICULAR PURPOSE.
+ * See the Mulan PSL v2 for more details.
+ **/
+<template>
+  <svg :class="svgClass" aria-hidden="true">
+    <use :xlink:href="iconName"></use>
+  </svg>
+</template>
+
+<script>
+export default {
+  name: 'svg-icon',
+  props: {
+    iconClass: {
+      type: String,
+      required: true
+    },
+    className: {
+      type: String
+    }
+  },
+  computed: {
+    iconName () {
+      return `#icon-${this.iconClass}`
+    },
+    svgClass () {
+      if (this.className) {
+        return 'svg-icon ' + this.className
+      } else {
+        return 'svg-icon'
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+.svg-icon {
+  width: 1em;
+  height: 1em;
+  vertical-align: -0.15em;
+  fill: currentColor;
+  overflow: hidden;
+}
+</style>

package/src/kisscomps/components/SvgIcon/index.js

@@ -0,0 +1,2 @@
+import SvgIcon from './SvgIcon.vue'
+export default SvgIcon