openatc-components 0.4.1 → 0.4.3

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

@@ -1,303 +1,303 @@
-/**
- * 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>
-<div style="overflow: hidden;">
-  <div class="cross-mess">{{$t('openatccomponents.overview.crossinfo')}}</div>
-  <div class="cross-module">
-    <div class="cross-content">
-      <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('openatccomponents.overview.divicestate')}}:</div>
-      <div
-        v-show="devStatus===3"
-        style="margin-left: 85px;"
-        class="cross-value"
-      >{{$t('openatccomponents.overview.connected')}}</div>
-      <div
-        v-show="devStatus===2"
-        style="margin-left: 85px;"
-        class="cross-value"
-      >{{$t('openatccomponents.overview.offline')}}</div>
-      <div
-        v-show="devStatus===1"
-        style="margin-left: 85px;"
-        class="cross-value"
-      >{{$t('openatccomponents.overview.onlineing')}}</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('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('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('openatccomponents.overview.platform')}}:</div>
-      <div style="margin-left: 85px;" class="cross-value">{{platform}}</div>
-    </div>
-    <div class="cross-content" v-if="controlData.current_stagecd !== undefined">
-      <div style="float: left;" class="cross-name">{{$t('openatccomponents.overview.stagecountdown')}}:</div>
-      <div style="margin-left: 85px;" class="cross-value">{{controlData.current_stagecd}}</div>
-    </div>
-    <div class="cross-content" v-if="controlData.stages_len">
-      <div style="float: left;" class="cross-name">{{$t('openatccomponents.overview.stageduration')}}:</div>
-      <div style="margin-left: 85px;" class="cross-value">{{controlData.stages_len + ''}}</div>
-    </div>
-    <div class="cross-content">
-      <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('openatccomponents.overview.confirmed')}}
-          <span style="margin: 0 2px;">{{confirmedFault.length}}</span>
-        </el-tag>
-        <el-tag v-if="untreatedFault.length">
-          {{$t('openatccomponents.overview.untreated')}}
-          <span style="margin: 0 2px;">{{untreatedFault.length}}</span>
-        </el-tag>
-        <el-tag v-if="ignoredFault.length" type="info">
-          {{$t('openatccomponents.overview.ignored')}}
-          <span style="margin: 0 2px;">{{ignoredFault.length}}</span>
-        </el-tag>
-        <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('openatccomponents.overview.nofault')}}</div>
-    </div>
-  </div>
-  <div class="control-bottom">
-    <div
-      class="cross-mess"
-      style="float: left;margin-top: 20px;margin-bottom: 18px;"
-    >{{$t('openatccomponents.overview.controlmode')}}</div>
-    <el-button
-      type="primary"
-      style="float: right; margin-right: 20px;margin-top: 16px;font-size: 14px;"
-      size="mini"
-      v-if="isHasPermission('configer:manual') && isHasPermission('configer:manual:renew')"
-      @click="changeStatus"
-    >{{$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-->
-    <div class="controlStatePart">
-      <div class="bigPart">
-        <el-row :gutter="7">
-          <el-col :span="12">
-            <div class="grid-content bg-base">
-              <div class="value">{{controlData.mode}}</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('openatccomponents.overview.modelList' + currModel) : ''}}</div>
-              <div class="name">{{$t('openatccomponents.overview.curModel')}}</div>
-            </div>
-          </el-col>
-        </el-row>
-      </div>
-      <div class="smallPart">
-        <el-row :gutter="7">
-          <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('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('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('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('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('openatccomponents.overview.curStage')}}</div>
-            </div>
-          </el-col>
-          <el-col :span="8" v-if="controlData.current_phase !== undefined && controlData.current_phase.length !== 0 ">
-            <div class="grid-content bg-base">
-              <div class="value" v-html="controlData.current_phase.join(',')"></div>
-              <div class="name">{{$t('openatccomponents.overview.curPhase')}}</div>
-            </div>
-          </el-col>
-        </el-row>
-      </div>
-    </div>
-    <!-- 信号机控制状态模块 End-->
-
-    <div class="cross-content">
-      <div class="cross-name">{{$t('openatccomponents.overview.currentstage')}}:</div>
-      <div>
-      <Stages v-if="resetcomponent"
-              :crossStatusData="crossStatusData"
-              :phaseList="phaseList"
-              @onSelectStages="onSelectStages"></Stages>
-      </div>
-    </div>
-
-    <div class="cross-content" v-show="closePhase && closePhase.length > 0">
-      <div
-        style="float: left;margin-right: 16px;"
-        class="cross-name"
-      >{{$t('openatccomponents.overview.phaseclose')}}:</div>
-      <el-tag
-        type="danger"
-        size="small"
-        v-for="(phase, index) in closePhase"
-        :key="index"
-      >{{phase.typename + $t('openatccomponents.overview.phase') + phase.id + $t('openatccomponents.overview.close')}}</el-tag>
-    </div>
-  </div>
-</div>
-</template>
-
-<script>
-import xdrdirselector from '../../XRDDirSelector/XRDDirSelector'
-import { hasPermission } from '../../../../utils/auth'
-export default {
-  name: 'realtimestatus',
-  components: {
-    xdrdirselector
-  },
-  props: {
-    crossStatusData: {
-      type: Object,
-      default: () => {}
-    },
-    phaseList: {
-      type: Array,
-      default () {
-        return []
-      }
-    },
-    Visible: {
-      type: Boolean
-    },
-    controlData: {
-      type: Object
-    },
-    agentName: {
-      type: String
-    },
-    // devStatus: {
-    //   type: Number
-    // },
-    agentId: {
-      type: String
-    },
-    ip: {
-      type: String
-    },
-    platform: {
-      type: String
-    },
-    curFaultList: {
-      type: Array
-    },
-    currModel: {
-      type: Number
-    },
-    responseTime: {
-      type: Number
-    },
-    stagesList: {
-      type: Array
-    },
-    currentStage: {
-      type: Number
-    },
-    preselectStages: {
-      type: Number
-    },
-    closePhase: {
-      type: Array
-    },
-    sidewalkPhaseData: {
-      type: Array
-    },
-    confirmedFault: {
-      type: Array
-    },
-    ignoredFault: {
-      type: Array
-    },
-    untreatedFault: {
-      type: Array
-    },
-    roadDirection: {
-      type: String
-    }
-
-  },
-  watch: {
-    agentId: {
-      handler: function (val1, val2) {
-        this.$nextTick(() => {
-          setTimeout(() => {
-          if (val1 !== val2) {
-        this.resetcomponent = false
-        this.$nextTick(() => {
-          this.resetcomponent = true
-        })
-        }
-        }, 100)
-        })
-      },
-      // 深度观察监听
-      deep: true
-    }
-  },
-  data () {
-    return {
-      resetcomponent: true
-    }
-  },
-  methods: {
-    isHasPermission (path) {
-      let res = hasPermission(path)
-      return res
-    },
-    onSelectStages (val) {},
-    changeStatus () {
-      this.$emit('changeStatus')
-    },
-    showFaultDetail () {
-      this.$emit('showFaultDetail')
-    }
-  }
-}
-</script>
-<style lang="scss" scoped>
-</style>
+/**
+ * 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>
+<div style="overflow: hidden;">
+  <div class="cross-mess">{{$t('openatccomponents.overview.crossinfo')}}</div>
+  <div class="cross-module">
+    <div class="cross-content">
+      <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('openatccomponents.overview.divicestate')}}:</div>
+      <div
+        v-show="devStatus===3"
+        style="margin-left: 85px;"
+        class="cross-value"
+      >{{$t('openatccomponents.overview.connected')}}</div>
+      <div
+        v-show="devStatus===2"
+        style="margin-left: 85px;"
+        class="cross-value"
+      >{{$t('openatccomponents.overview.offline')}}</div>
+      <div
+        v-show="devStatus===1"
+        style="margin-left: 85px;"
+        class="cross-value"
+      >{{$t('openatccomponents.overview.onlineing')}}</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('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('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('openatccomponents.overview.platform')}}:</div>
+      <div style="margin-left: 85px;" class="cross-value">{{platform}}</div>
+    </div>
+    <div class="cross-content" v-if="controlData.current_stagecd !== undefined">
+      <div style="float: left;" class="cross-name">{{$t('openatccomponents.overview.stagecountdown')}}:</div>
+      <div style="margin-left: 85px;" class="cross-value">{{controlData.current_stagecd}}</div>
+    </div>
+    <div class="cross-content" v-if="controlData.stages_len">
+      <div style="float: left;" class="cross-name">{{$t('openatccomponents.overview.stageduration')}}:</div>
+      <div style="margin-left: 85px;" class="cross-value">{{controlData.stages_len + ''}}</div>
+    </div>
+    <div class="cross-content">
+      <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('openatccomponents.overview.confirmed')}}
+          <span style="margin: 0 2px;">{{confirmedFault.length}}</span>
+        </el-tag>
+        <el-tag v-if="untreatedFault.length">
+          {{$t('openatccomponents.overview.untreated')}}
+          <span style="margin: 0 2px;">{{untreatedFault.length}}</span>
+        </el-tag>
+        <el-tag v-if="ignoredFault.length" type="info">
+          {{$t('openatccomponents.overview.ignored')}}
+          <span style="margin: 0 2px;">{{ignoredFault.length}}</span>
+        </el-tag>
+        <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('openatccomponents.overview.nofault')}}</div>
+    </div>
+  </div>
+  <div class="control-bottom">
+    <div
+      class="cross-mess"
+      style="float: left;margin-top: 20px;margin-bottom: 18px;"
+    >{{$t('openatccomponents.overview.controlmode')}}</div>
+    <el-button
+      type="primary"
+      style="float: right; margin-right: 20px;margin-top: 16px;font-size: 14px;"
+      size="mini"
+      v-if="isHasPermission('configer:manual') && isHasPermission('configer:manual:renew')"
+      @click="changeStatus"
+    >{{$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-->
+    <div class="controlStatePart">
+      <div class="bigPart">
+        <el-row :gutter="7">
+          <el-col :span="12">
+            <div class="grid-content bg-base">
+              <div class="value">{{controlData.mode}}</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('openatccomponents.overview.modelList' + currModel) : ''}}</div>
+              <div class="name">{{$t('openatccomponents.overview.curModel')}}</div>
+            </div>
+          </el-col>
+        </el-row>
+      </div>
+      <div class="smallPart">
+        <el-row :gutter="7">
+          <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('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('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('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('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('openatccomponents.overview.curStage')}}</div>
+            </div>
+          </el-col>
+          <el-col :span="8" v-if="controlData.current_phase !== undefined && controlData.current_phase.length !== 0 ">
+            <div class="grid-content bg-base">
+              <div class="value" v-html="controlData.current_phase.join(',')"></div>
+              <div class="name">{{$t('openatccomponents.overview.curPhase')}}</div>
+            </div>
+          </el-col>
+        </el-row>
+      </div>
+    </div>
+    <!-- 信号机控制状态模块 End-->
+
+    <div class="cross-content">
+      <div class="cross-name">{{$t('openatccomponents.overview.currentstage')}}:</div>
+      <div>
+      <Stages v-if="resetcomponent"
+              :crossStatusData="crossStatusData"
+              :phaseList="phaseList"
+              @onSelectStages="onSelectStages"></Stages>
+      </div>
+    </div>
+
+    <div class="cross-content" v-show="closePhase && closePhase.length > 0">
+      <div
+        style="float: left;margin-right: 16px;"
+        class="cross-name"
+      >{{$t('openatccomponents.overview.phaseclose')}}:</div>
+      <el-tag
+        type="danger"
+        size="small"
+        v-for="(phase, index) in closePhase"
+        :key="index"
+      >{{phase.typename + $t('openatccomponents.overview.phase') + phase.id + $t('openatccomponents.overview.close')}}</el-tag>
+    </div>
+  </div>
+</div>
+</template>
+
+<script>
+import xdrdirselector from '../../XRDDirSelector/XRDDirSelector'
+import { hasPermission } from '../../../../utils/auth'
+export default {
+  name: 'realtimestatus',
+  components: {
+    xdrdirselector
+  },
+  props: {
+    crossStatusData: {
+      type: Object,
+      default: () => {}
+    },
+    phaseList: {
+      type: Array,
+      default () {
+        return []
+      }
+    },
+    Visible: {
+      type: Boolean
+    },
+    controlData: {
+      type: Object
+    },
+    agentName: {
+      type: String
+    },
+    // devStatus: {
+    //   type: Number
+    // },
+    agentId: {
+      type: String
+    },
+    ip: {
+      type: String
+    },
+    platform: {
+      type: String
+    },
+    curFaultList: {
+      type: Array
+    },
+    currModel: {
+      type: Number
+    },
+    responseTime: {
+      type: Number
+    },
+    stagesList: {
+      type: Array
+    },
+    currentStage: {
+      type: Number
+    },
+    preselectStages: {
+      type: Number
+    },
+    closePhase: {
+      type: Array
+    },
+    sidewalkPhaseData: {
+      type: Array
+    },
+    confirmedFault: {
+      type: Array
+    },
+    ignoredFault: {
+      type: Array
+    },
+    untreatedFault: {
+      type: Array
+    },
+    roadDirection: {
+      type: String
+    }
+
+  },
+  watch: {
+    agentId: {
+      handler: function (val1, val2) {
+        this.$nextTick(() => {
+          setTimeout(() => {
+          if (val1 !== val2) {
+        this.resetcomponent = false
+        this.$nextTick(() => {
+          this.resetcomponent = true
+        })
+        }
+        }, 100)
+        })
+      },
+      // 深度观察监听
+      deep: true
+    }
+  },
+  data () {
+    return {
+      resetcomponent: true
+    }
+  },
+  methods: {
+    isHasPermission (path) {
+      let res = hasPermission(path)
+      return res
+    },
+    onSelectStages (val) {},
+    changeStatus () {
+      this.$emit('changeStatus')
+    },
+    showFaultDetail () {
+      this.$emit('showFaultDetail')
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+</style>