openatc-components 0.4.58 → 0.4.60

package/package/kisscomps/components/Stages/index.vue

@@ -1,319 +1,307 @@
-/**
- * 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 id="intersection-stages" class="intersection-stages" :style="stageStyle">
-    <!-- <div class="cross-content"><div style="float: left;" class="cross-name">{{'当前阶段'}}:</div> -->
-      <div>
-        <div style="width: 100%; height: auto;">
-          <div class="control-model" v-for="(item, index) in stagesList" :key="index">
-            <div style="position:relative;" :style="{...singleStyle, 'backgroundColor': item[0].bgcolor}" class="single-model" @click="selectStages(index + 1)" :class="currentStage == index + 1 ? 'single-model-select' : ''">
-              <!-- <template v-for="(side, index) in item[0].sidewalkPhaseData" >
-                <PatternWalkSvg class="patternWalk"
-                                v-if="item[0].peddirection.includes(side.id)"
-                                :key="side.key + '-' + index"
-                                :Data="side"
-                                :Width="'55'"
-                                :Height="'55'" />
-              </template> -->
-                <!-- <patternwalksvg class="patternWalk"
-                          :showWalk="item[0].peddirection"
-                          :Width="'40'"
-                          :Height="'40'" /> -->
-              <xdr-dir-selector :Width="dirWidth" :Height="dirHeight" :Widths="dirWidths" :Heights="dirHeights" :Data="showStyle" :Datas="showStyles" :showlist="dirListSetTheme(item)"></xdr-dir-selector>
-              <div style="display:flex;flex-direction:row;justify-content:center;align-items:end;" :style="{height: StageHeight}">
-                <div class="current-stage-num" style="width:25%;" :style="{color: themeColor, fontSize: numSize}">{{index + 1}}</div>
-                <div style="width:70%;">
-                  <i class="iconfont icon-feijidongche" :style="{color: themeColor, fontSize: iconSize}" style="font-size:11PX;color:#606266;margin-left:10PX" v-if="item[item.length-1].controltype === 6"></i>
-                  <i class="iconfont icon-lukouzhilu" :style="{color: themeColor2, fontSize: iconSize2}" style="font-size:16PX;color:#454545;margin-left:10PX" v-if="item[item.length-1].controltype === 1"></i>
-                  <i class="iconfont icon-BRT" :style="{color: themeColor2, fontSize: iconSize}" style="font-size:11PX;color:#454545;margin-left:10PX" v-if="item[item.length-1].controltype === 4"></i>
-                  <div style="transform:scale(0.65);margin-left:10PX">
-                    <i class="iconfont icon-xuxiangwei-xin" :style="{color: themeColor2}" style="font-size:5PX;color:#454545;" v-if="item[item.length-1].controltype === 99"></i>
-                  </div>
-                  <i class="iconfont icon-gongjiaoche" :style="{color: themeColor, fontSize: iconSize}" style="font-size:11PX;color:#606266;margin-left:10PX" v-if="item[item.length-1].controltype === 3"></i>
-                  <i class="iconfont icon-youguidianche" :style="{color: themeColor, fontSize: iconSize}" style="font-size:11PX;color:#606266;margin-left:10PX" v-if="item[item.length-1].controltype === 5"></i>
-                  <div v-if="presetStageIndex === index + 1" style="color:red;width:50px;position:absolute;right:0px;bottom:5px;font-size:11px;">{{presetText}}</div>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-  </div>
-</template>
-
-<script>
-/* eslint-disable */
-import RingDataModel from '../../../utils/RingDataModel.js'
-// import patternwalksvg from '../PatternWalkSvg/PatternWalkSvg'
-import { getTheme } from '../../../utils/auth.js'
-
-export default {
-  name: 'Stages',
-  components: {
-    // patternwalksvg
-  },
-  props: {
-    isShowCurrentStage: {
-      type: Boolean,
-      default: true
-    },
-    crossStatusData: {
-      type: Object,
-      default: () => {}
-    },
-    phaseList: {
-      type: Array,
-      default: () => []
-    },
-    presetText: {
-      type: String,
-      default: '预置'
-    },
-    presetIndex: {
-      type: Number,
-      default: -1
-    },
-    preselectStages:{
-      type: Number,
-      default: -1
-    },
-    preselectModel:{
-      type: Number,
-      default: -1
-    },
-    presetPhaseId: {
-      type: Number,
-      default: -1
-    },
-    zoom: {
-      type: Number,
-      default: 1
-    },
-    StageWidth: { // 图的大小样式
-      type: String,
-      default: '70px'
-    },
-    StageHeight: {
-      type: String,
-      default: '80px'
-    },
-    dirWidth: {
-      type: String,
-      default: '75PX'
-    },
-    dirHeight: {
-      type: String,
-      default: '75PX'
-    },
-    dirWidths: {
-      type: String,
-      default: '65PX'
-    },
-    dirHeights: {
-      type: String,
-      default: '65PX'
-    },
-    showStyle: { // 图内部方向的位置
-      type: Object,
-      default: () => ({
-        top:'7PX',
-        left:'13px'
-      })
-    },
-    showStyles: { // 图内部人行道的位置
-      type: Object,
-      default: () => ({
-        top:'5PX',
-        left:'12px'
-      })
-    },
-    noClick: { // 图是否可以点击
-      type: Boolean,
-      default: false
-    },
-    showDataType: { // 图展示的数据类型：默认按阶段展示，如果传phase则按相位维度展示
-      type: String
-    }
-  },
-  data () {
-    return {
-      presetStageIndex: -1,
-      side: {key: 'pedphase1653818707546719', phaseid: 1, id: 1, name: '东人行横道'},
-      // stagesList: [],
-      currentStage: -1,
-      themeColor: getTheme() === 'light' ? '#606266' : '#fff',
-      themeColor2: getTheme() === 'light' ? '#454545' : '#fff'
-    };
-  },
-  computed: {
-    singleStyle () {
-      return {
-        width: this.StageWidth,
-        height: this.StageHeight
-      }
-    },
-    stagesList () {
-      let list = []
-      if (this.crossStatusData && this.crossStatusData.stages && this.phaseList && this.phaseList.length > 0) {
-        let ringDataModel = new RingDataModel(this.crossStatusData, this.phaseList)
-        if (this.showDataType === 'phase') {
-          list = ringDataModel.getStageData('phase')
-        } else {
-          list = ringDataModel.getStageData()
-        }
-        if (this.isShowCurrentStage) {
-          this.currentStage = this.crossStatusData.current_stage
-        }
-      }
-      console.log(list,'list')
-      this.clickType(list, this.currentStage)
-      console.log(this.phaseList,'this.phaseList')
-      return list
-    },
-    stageStyle () {
-      return {
-        zoom: this.zoom
-      }
-    },
-    iconSize () {
-      const fontsize = parseInt(this.dirWidth.replace(/px$/, ""));
-      return fontsize / 75 * 11 + 'px'
-    },
-    iconSize2 () {
-      const fontsize = parseInt(this.dirWidth.replace(/px$/, ""));
-      return fontsize / 75 * 16 + 'px'
-    },
-    numSize () {
-      const fontsize = parseInt(this.dirWidth.replace(/px$/, ""));
-      const newfontsize = fontsize / 75 * 12
-      if (newfontsize < 10) {
-        return 10 + 'px'
-      } else {
-        return newfontsize + 'px'
-      }
-    }
-  },
-  watch: {
-    // phaseList: {
-    //   handler: function (val, oldVal) {
-    //     console.log(val, 'phaseList')
-    //     // debugger
-    //   }
-    // },
-    // crossStatusData: {
-    //   handler: function (val, oldVal) {
-    //     console.log(val, 'crossStatusData')
-    //     // debugger
-    //   }
-    // },
-    preselectStages: { 
-      handler: function (val, oldVal) {
-        if(this.preselectStages === -1 && this.preselectModel !== -1) {
-          this.currentStage = -1
-        }
-      },
-      // 深度观察监听
-      deep: true
-    },
-    preselectModel: { 
-      handler: function (val, oldVal) {
-        if(this.preselectStages === -1 && this.preselectModel !== -1) {
-          this.currentStage = -1
-        }
-      },
-      // 深度观察监听
-      deep: true
-    },
-    stagesList: {
-      handler: function (val, oldVal) {
-        if (this.presetPhaseId > -1) {
-          this.presetStageIndex = this.getComputedPresetIndex()
-        } else {
-          this.presetStageIndex = this.presetIndex
-        }
-      },
-      // 深度观察监听
-      deep: true
-    }
-  },
-  methods: {
-    getComputedPresetIndex() {
-      let res = -1
-      for (let i = 0; i < this.stagesList.length; i++) {
-        let stage = this.stagesList[i]
-        for (let phase of stage) {
-          let phaseId = phase.id
-          if (phaseId === this.presetPhaseId) {
-            res = i
-            break
-          }
-        }
-        if (res > -1) {
-          res = res + 1
-          break
-        }
-      }
-      return res
-    },
-    selectStages (value) {
-      if (this.noClick) return
-      if (this.isShowCurrentStage) {
-        return false
-      }
-      this.currentStage = value
-      this.$emit('onSelectStages', value)
-      this.clickType(this.stagesList, value)
-    },
-    resetToDefaultThemeColor (List) {
-      for (let i = 0; i < List.length; i++) {
-        if (List[i].length) {
-          if (List[i][0].clicked) {
-            delete List[i][0].clicked
-          }
-          List[i][0].bgcolor = getTheme() === 'light' ? '#edf6ff' : '#243d59'
-        } 
-      }
-    },
-    highlightThemeColor (List, index) {
-      for (let i = 0; i < List.length; i++) {
-        if (i === index) {
-          List[i][0].clicked = true
-          List[i][0].bgcolor = getTheme() === 'light' ? '#c1e0ff' : '#0082ac'
-        }
-      }
-    },
-    clickType (stagelist, value) {
-      this.resetToDefaultThemeColor(stagelist)
-      this.highlightThemeColor(stagelist, value - 1)
-    },
-    dirListSetTheme (list) {
-      let dirArr = []
-      let color = getTheme() === 'light' ? '#606266' : '#F1F3F4'
-      let pedColor = getTheme() === 'light' ? '#606266' : 'rgba(255, 255, 255, 0.6)'
-      for (let rec of list) {
-        let recd = {
-          ...rec,
-          color: color
-        }
-        dirArr.push(recd)
-        for(let i=0;i<rec.peddirection.length;i++) {
-          rec.peddirection[i].color = pedColor
-        }
-      }
-      return dirArr
-    }
-  },
-  mounted () {
-    this.resetToDefaultThemeColor(this.stagesList)
-  }
-};
-</script>
+/**
+ * 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 id="intersection-stages" class="intersection-stages" :style="stageStyle">
+    <!-- <div class="cross-content"><div style="float: left;" class="cross-name">{{'当前阶段'}}:</div> -->
+      <div>
+        <div style="width: 100%; height: auto;">
+          <div class="control-model" v-for="(item, index) in stagesList" :key="index">
+            <div style="position:relative;" :style="{...singleStyle, 'backgroundColor': item[0].bgcolor}" class="single-model" @click="selectStages(index + 1)" :class="currentStage == index + 1 ? 'single-model-select' : ''">
+              <!-- <template v-for="(side, index) in item[0].sidewalkPhaseData" >
+                <PatternWalkSvg class="patternWalk"
+                                v-if="item[0].peddirection.includes(side.id)"
+                                :key="side.key + '-' + index"
+                                :Data="side"
+                                :Width="'55'"
+                                :Height="'55'" />
+              </template> -->
+                <!-- <patternwalksvg class="patternWalk"
+                          :showWalk="item[0].peddirection"
+                          :Width="'40'"
+                          :Height="'40'" /> -->
+              <xdr-dir-selector :Width="dirWidth" :Height="dirHeight" :Widths="dirWidths" :Heights="dirHeights" :Data="showStyle" :Datas="showStyles" :showlist="dirListSetTheme(item)"></xdr-dir-selector>
+              <div style="display:flex;flex-direction:row;justify-content:center;align-items:end;" :style="{height: StageHeight}">
+                <div class="current-stage-num" style="width:25%;" :style="{color: themeColor, fontSize: numSize}">{{index + 1}}</div>
+                <div style="width:70%;">
+                  <i class="iconfont icon-feijidongche" :style="{color: themeColor, fontSize: iconSize}" style="font-size:11PX;color:#606266;margin-left:10PX" v-if="item[item.length-1].controltype === 6"></i>
+                  <i class="iconfont icon-lukouzhilu" :style="{color: themeColor2, fontSize: iconSize2}" style="font-size:16PX;color:#454545;margin-left:10PX" v-if="item[item.length-1].controltype === 1"></i>
+                  <i class="iconfont icon-BRT" :style="{color: themeColor2, fontSize: iconSize}" style="font-size:11PX;color:#454545;margin-left:10PX" v-if="item[item.length-1].controltype === 4"></i>
+                  <div style="transform:scale(0.65);margin-left:10PX">
+                    <i class="iconfont icon-xuxiangwei-xin" :style="{color: themeColor2}" style="font-size:5PX;color:#454545;" v-if="item[item.length-1].controltype === 99"></i>
+                  </div>
+                  <i class="iconfont icon-gongjiaoche" :style="{color: themeColor, fontSize: iconSize}" style="font-size:11PX;color:#606266;margin-left:10PX" v-if="item[item.length-1].controltype === 3"></i>
+                  <i class="iconfont icon-youguidianche" :style="{color: themeColor, fontSize: iconSize}" style="font-size:11PX;color:#606266;margin-left:10PX" v-if="item[item.length-1].controltype === 5"></i>
+                  <div v-if="presetStageIndex === index + 1" style="color:red;width:50px;position:absolute;right:0px;bottom:5px;font-size:11px;">{{presetText}}</div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+  </div>
+</template>
+
+<script>
+/* eslint-disable */
+import RingDataModel from '../../../utils/RingDataModel.js'
+// import patternwalksvg from '../PatternWalkSvg/PatternWalkSvg'
+import { getTheme } from '../../../utils/auth.js'
+
+export default {
+  name: 'Stages',
+  components: {
+    // patternwalksvg
+  },
+  props: {
+    isShowCurrentStage: {
+      type: Boolean,
+      default: true
+    },
+    crossStatusData: {
+      type: Object,
+      default: () => {}
+    },
+    phaseList: {
+      type: Array,
+      default: () => []
+    },
+    presetText: {
+      type: String,
+      default: '预置'
+    },
+    presetIndex: {
+      type: Number,
+      default: -1
+    },
+    preselectStages:{
+      type: Number,
+      default: -1
+    },
+    preselectModel:{
+      type: Number,
+      default: -1
+    },
+    presetPhaseId: {
+      type: Number,
+      default: -1
+    },
+    zoom: {
+      type: Number,
+      default: 1
+    },
+    StageWidth: { // 图的大小样式
+      type: String,
+      default: '70px'
+    },
+    StageHeight: {
+      type: String,
+      default: '80px'
+    },
+    dirWidth: {
+      type: String,
+      default: '75PX'
+    },
+    dirHeight: {
+      type: String,
+      default: '75PX'
+    },
+    dirWidths: {
+      type: String,
+      default: '65PX'
+    },
+    dirHeights: {
+      type: String,
+      default: '65PX'
+    },
+    showStyle: { // 图内部方向的位置
+      type: Object,
+      default: () => ({
+        top:'7PX',
+        left:'13px'
+      })
+    },
+    showStyles: { // 图内部人行道的位置
+      type: Object,
+      default: () => ({
+        top:'5PX',
+        left:'12px'
+      })
+    },
+    noClick: { // 图是否可以点击
+      type: Boolean,
+      default: false
+    },
+    showDataType: { // 图展示的数据类型：默认按阶段展示，如果传phase则按相位维度展示
+      type: String
+    }
+  },
+  data () {
+    return {
+      presetStageIndex: -1,
+      side: {key: 'pedphase1653818707546719', phaseid: 1, id: 1, name: '东人行横道'},
+      // stagesList: [],
+      currentStage: -1,
+      themeColor: getTheme() === 'light' ? '#606266' : '#fff',
+      themeColor2: getTheme() === 'light' ? '#454545' : '#fff'
+    };
+  },
+  computed: {
+    singleStyle () {
+      return {
+        width: this.StageWidth,
+        height: this.StageHeight
+      }
+    },
+    stagesList () {
+      let list = []
+      if (this.crossStatusData && this.crossStatusData.stages && this.phaseList && this.phaseList.length > 0) {
+        let ringDataModel = new RingDataModel(this.crossStatusData, this.phaseList)
+        if (this.showDataType === 'phase') {
+          list = ringDataModel.getStageData('phase')
+        } else {
+          list = ringDataModel.getStageData()
+        }
+        if (this.isShowCurrentStage) {
+          this.currentStage = this.crossStatusData.current_stage
+        }
+      }
+      console.log(list,'list')
+      this.clickType(list, this.currentStage)
+      console.log(this.phaseList,'this.phaseList')
+      return list
+    },
+    stageStyle () {
+      return {
+        zoom: this.zoom
+      }
+    },
+    iconSize () {
+      const fontsize = parseInt(this.dirWidth.replace(/px$/, ""));
+      return fontsize / 75 * 11 + 'px'
+    },
+    iconSize2 () {
+      const fontsize = parseInt(this.dirWidth.replace(/px$/, ""));
+      return fontsize / 75 * 16 + 'px'
+    },
+    numSize () {
+      const fontsize = parseInt(this.dirWidth.replace(/px$/, ""));
+      const newfontsize = fontsize / 75 * 12
+      if (newfontsize < 10) {
+        return 10 + 'px'
+      } else {
+        return newfontsize + 'px'
+      }
+    }
+  },
+  watch: {
+    preselectStages: { 
+      handler: function (val, oldVal) {
+        if(this.preselectStages === -1 && this.preselectModel !== -1) {
+          this.currentStage = -1
+        }
+      },
+      // 深度观察监听
+      deep: true
+    },
+    preselectModel: { 
+      handler: function (val, oldVal) {
+        if(this.preselectStages === -1 && this.preselectModel !== -1) {
+          this.currentStage = -1
+        }
+      },
+      // 深度观察监听
+      deep: true
+    },
+    stagesList: {
+      handler: function (val, oldVal) {
+        if (this.presetPhaseId > -1) {
+          this.presetStageIndex = this.getComputedPresetIndex()
+        } else {
+          this.presetStageIndex = this.presetIndex
+        }
+      },
+      // 深度观察监听
+      deep: true
+    }
+  },
+  methods: {
+    getComputedPresetIndex() {
+      let res = -1
+      for (let i = 0; i < this.stagesList.length; i++) {
+        let stage = this.stagesList[i]
+        for (let phase of stage) {
+          let phaseId = phase.id
+          if (phaseId === this.presetPhaseId) {
+            res = i
+            break
+          }
+        }
+        if (res > -1) {
+          res = res + 1
+          break
+        }
+      }
+      return res
+    },
+    selectStages (value) {
+      if (this.noClick) return
+      if (this.isShowCurrentStage) {
+        return false
+      }
+      this.currentStage = value
+      this.$emit('onSelectStages', value)
+      this.clickType(this.stagesList, value)
+    },
+    resetToDefaultThemeColor (List) {
+      for (let i = 0; i < List.length; i++) {
+        if (List[i].length) {
+          if (List[i][0].clicked) {
+            delete List[i][0].clicked
+          }
+          List[i][0].bgcolor = getTheme() === 'light' ? '#edf6ff' : '#243d59'
+        } 
+      }
+    },
+    highlightThemeColor (List, index) {
+      for (let i = 0; i < List.length; i++) {
+        if (i === index) {
+          List[i][0].clicked = true
+          List[i][0].bgcolor = getTheme() === 'light' ? '#c1e0ff' : '#0082ac'
+        }
+      }
+    },
+    clickType (stagelist, value) {
+      this.resetToDefaultThemeColor(stagelist)
+      this.highlightThemeColor(stagelist, value - 1)
+    },
+    dirListSetTheme (list) {
+      let dirArr = []
+      let color = getTheme() === 'light' ? '#606266' : '#F1F3F4'
+      let pedColor = getTheme() === 'light' ? '#606266' : 'rgba(255, 255, 255, 0.6)'
+      for (let rec of list) {
+        let recd = {
+          ...rec,
+          color: color
+        }
+        dirArr.push(recd)
+        for(let i=0;i<rec.peddirection.length;i++) {
+          rec.peddirection[i].color = pedColor
+        }
+      }
+      return dirArr
+    }
+  },
+  mounted () {
+    this.resetToDefaultThemeColor(this.stagesList)
+  }
+};
+</script>