openatc-components 0.0.95 → 0.0.96-hotfix

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "openatc-components",
-  "version": "0.0.95",
+  "version": "0.0.96-hotfix",
   "description": "A Vue.js project",
   "author": "openatc developer",
   "private": false,

package/src/i18n/language/en.js

@@ -1169,8 +1169,8 @@ const en = {
       'pedestriandetector': 'Pedestrian Detector',
       'detectorassociated': 'Detector Associated',
       'detectorthreshold': 'Detector Threshold',
-      'occupancythreshold': 'Occupancy threshold',
-      'saturationthreshold': 'Flow Saturation threshold',
+      'occupancythreshold': 'Greenlight Utilization Threshold',
+      'saturationthreshold': 'Flow Saturation Threshold',
       'checkthreshold': 'The threshold value cannot be blank. Please fill in a positive integer within the range of 0-100！',
       'pedestriancrossing': 'Pedestrian crossing',
       'pedestriansecondarycrossing': 'Pedestrian secondary crossing',

package/src/i18n/language/zh.js

@@ -1168,7 +1168,7 @@ const zh = {
       'pedestriandetector': '行人检测器',
       'detectorassociated': '检测器关联',
       'detectorthreshold': '检测器阈值',
-      'occupancythreshold': '占有率阈值',
+      'occupancythreshold': '绿灯利用率阈值',
       'saturationthreshold': '流量饱和度阈值',
       'checkthreshold': '阈值不可为空，请填0-100范围内的正整数！',
       'pedestriancrossing': '行人过街',

package/src/kisscomps/components/DrawChannelization/drawsvg/index.draw.vue

@@ -541,7 +541,8 @@ export default {
         detectortype: 1, // 检测器类型： 1 车辆检测器 2 行人检测器
         detectorid: undefined,
         occupancythreshold: 80,
-        flowsaturationthreshold: 20,
+        minflowsaturationthreshold: 30,
+        maxflowsaturationthreshold: 70,
         ...defaultDetectorParam
       }
       this.curChooseIconIndex = detectoritem.index

package/src/kisscomps/components/DrawChannelization/drawsvg/laneEditPanel.vue

@@ -160,18 +160,45 @@
            <el-form-item
                 :label="$t('openatccomponents.channelizationmap.occupancythreshold') + ':'"
                 prop="intersection">
-              <el-input-number :min="0" :max="100" :precision="0" :step="1" :controls="false"
+              <!-- <el-input-number :min="0" :max="100" :precision="0" :step="1" :controls="false"
                 :value="occupancythreshold" size="mini"
                 @change="handleChangeOccuthreshold" />
-              <span class="detector-threshold-formtext">%</span>
+              <span class="detector-threshold-formtext">%</span> -->
+              <el-select :value="occupancythreshold" @change="handleChangeOccuthreshold">
+                <el-option
+                  v-for="item in occupResholdOptions"
+                  :key="item.value"
+                  :label="item.label"
+                  :value="item.value">
+                </el-option>
+              </el-select>
             </el-form-item>
             <el-form-item
                 :label="$t('openatccomponents.channelizationmap.saturationthreshold') + ':'"
                 prop="count">
-              <el-input-number :min="0" :max="100" :precision="0" :step="1" :controls="false"
+              <!-- <el-input-number :min="0" :max="100" :precision="0" :step="1" :controls="false"
                 :value="flowsaturationthreshold" size="mini"
                 @change="handleChangeFlowthreshold" />
-              <span class="detector-threshold-formtext">%</span>
+              <span class="detector-threshold-formtext">%</span> -->
+              <el-select :value="minflowsaturationthreshold" @change="handleChangeMinFlowthreshold">
+                <el-option
+                  v-for="item in minflowResholdOptions"
+                  :key="item.value"
+                  :label="item.label"
+                  :value="item.value"
+                  :disabled="item.disabled">
+                </el-option>
+              </el-select>
+              <span class="flow-separator">——</span>
+              <el-select :value="maxflowsaturationthreshold" @change="handleChangeMaxFlowthreshold">
+                <el-option
+                  v-for="item in maxflowResholdOptions"
+                  :key="item.value"
+                  :label="item.label"
+                  :value="item.value"
+                  :disabled="item.disabled">
+                </el-option>
+              </el-select>
             </el-form-item>
         </el-form>
       </div>
@@ -373,8 +400,12 @@ export default {
         iconclass: 'custom-peddetector',
         name: this.$t('openatccomponents.channelizationmap.pedestriandetector')
       }],
+      occupResholdOptions: [],
+      minflowResholdOptions: [],
+      maxflowResholdOptions: [],
       occupancythreshold: 80,
-      flowsaturationthreshold: 20
+      minflowsaturationthreshold: 30,
+      maxflowsaturationthreshold: 70
     }
   },
   watch: {
@@ -394,8 +425,11 @@ export default {
         if (data.occupancythreshold !== undefined) {
           this.occupancythreshold = data.occupancythreshold
         }
-        if (data.flowsaturationthreshold !== undefined) {
-          this.flowsaturationthreshold = data.flowsaturationthreshold
+        if (data.minflowsaturationthreshold !== undefined) {
+          this.minflowsaturationthreshold = data.minflowsaturationthreshold
+        }
+        if (data.maxflowsaturationthreshold !== undefined) {
+          this.maxflowsaturationthreshold = data.maxflowsaturationthreshold
         }
         if (data.flip !== undefined) {
           this.flip = data.flip
@@ -447,8 +481,9 @@ export default {
       if (value === 2) {
         // 行人检测器没有阈值设置
         this.iconObj.occupancythreshold = undefined
-        this.iconObj.flowsaturationthreshold = undefined
-        this.$emit('changeIconDataByType', this.iconObj, ['occupancythreshold', 'flowsaturationthreshold'])
+        this.iconObj.minflowsaturationthreshold = undefined
+        this.iconObj.maxflowsaturationthreshold = undefined
+        this.$emit('changeIconDataByType', this.iconObj, ['occupancythreshold', 'minflowsaturationthreshold', 'maxflowsaturationthreshold'])
       }
     },
     selectPedPos (value) {
@@ -506,15 +541,53 @@ export default {
       this.iconObj.occupancythreshold = occupancythreshold
       this.$emit('changeIconDataByType', this.iconObj, ['occupancythreshold'])
     },
-    handleChangeFlowthreshold (flowsaturationthreshold) {
-      if (flowsaturationthreshold === undefined) {
+    handleChangeMinFlowthreshold (minflowsaturationthreshold) {
+      if (minflowsaturationthreshold === undefined) {
+        this.$message.error(this.$t('openatccomponents.channelizationmap.checkthreshold'))
+        this.minflowsaturationthreshold = 30
+        return
+      }
+      this.minflowsaturationthreshold = minflowsaturationthreshold
+      this.iconObj.minflowsaturationthreshold = minflowsaturationthreshold
+      this.$emit('changeIconDataByType', this.iconObj, ['minflowsaturationthreshold'])
+      this.handleDisabledMaxflowOption()
+    },
+    handleDisabledMinflowOption () {
+      // 此处需要排他，恢复上次置灰到默认值
+      this.minflowResholdOptions = this.minflowResholdOptions.map(option => ({
+        label: option.label,
+        value: option.value
+      }))
+      // 控制流量饱和度最小阈值的禁用范围
+      for (let i = 0; i < this.minflowResholdOptions.length; i++) {
+        if (this.minflowResholdOptions[i].value >= this.maxflowsaturationthreshold) {
+          this.minflowResholdOptions[i].disabled = true
+        }
+      }
+    },
+    handleChangeMaxFlowthreshold (maxflowsaturationthreshold) {
+      if (maxflowsaturationthreshold === undefined) {
         this.$message.error(this.$t('openatccomponents.channelizationmap.checkthreshold'))
-        this.flowsaturationthreshold = 20
+        this.maxflowsaturationthreshold = 70
         return
       }
-      this.flowsaturationthreshold = flowsaturationthreshold
-      this.iconObj.flowsaturationthreshold = flowsaturationthreshold
-      this.$emit('changeIconDataByType', this.iconObj, ['flowsaturationthreshold'])
+      this.maxflowsaturationthreshold = maxflowsaturationthreshold
+      this.iconObj.maxflowsaturationthreshold = maxflowsaturationthreshold
+      this.$emit('changeIconDataByType', this.iconObj, ['maxflowsaturationthreshold'])
+      this.handleDisabledMinflowOption()
+    },
+    handleDisabledMaxflowOption () {
+      // 此处需要排他，恢复上次置灰到默认值
+      this.maxflowResholdOptions = this.maxflowResholdOptions.map(option => ({
+        label: option.label,
+        value: option.value
+      }))
+      // 控制流量饱和度最大阈值的禁用范围
+      for (let i = 0; i < this.maxflowResholdOptions.length; i++) {
+        if (this.maxflowResholdOptions[i].value <= this.minflowsaturationthreshold) {
+          this.maxflowResholdOptions[i].disabled = true
+        }
+      }
     },
     getCurPedPosList (iconpedtypeid) {
       // 方位根据行人类型显示
@@ -532,8 +605,34 @@ export default {
     handleChangeFilp (value) {
       this.iconObj.flip = value
       this.$emit('changeIconDataByType', this.iconObj, ['flip'])
+    },
+    createResholdSelectOptions () {
+      for (let i = 5; i < 100; i = i + 5) {
+        let option = {
+          label: i + '%',
+          value: i
+        }
+        this.occupResholdOptions.push(option)
+        if (i <= this.minflowsaturationthreshold) {
+          option.disabled = true
+        }
+        this.maxflowResholdOptions.push(option)
+      }
+      for (let i = 5; i < 100; i = i + 5) {
+        let option = {
+          label: i + '%',
+          value: i
+        }
+        if (i >= this.maxflowsaturationthreshold) {
+          option.disabled = true
+        }
+        this.minflowResholdOptions.push(option)
+      }
     }
   },
+  created () {
+    this.createResholdSelectOptions()
+  },
   mounted () {
     if (JSON.stringify(this.Data) === '{}') return
     this.iconObj = JSON.parse(JSON.stringify(this.Data))
@@ -549,8 +648,11 @@ export default {
     if (this.Data.occupancythreshold !== undefined) {
       this.occupancythreshold = this.Data.occupancythreshold
     }
-    if (this.Data.flowsaturationthreshold !== undefined) {
-      this.flowsaturationthreshold = this.Data.flowsaturationthreshold
+    if (this.Data.minflowsaturationthreshold !== undefined) {
+      this.minflowsaturationthreshold = this.Data.minflowsaturationthreshold
+    }
+    if (this.Data.maxflowsaturationthreshold !== undefined) {
+      this.maxflowsaturationthreshold = this.Data.maxflowsaturationthreshold
     }
     if (this.Data.flip !== undefined) {
       this.flip = this.Data.flip

package/src/router/index.js

@@ -27,14 +27,14 @@ export default new Router({
     },
     {
       path: '/overView',
-      name: 'config',
+      name: 'overview',
       component: (resolve) => {
         require(['@/views/overView'], resolve)
       }
     },
     {
       path: '/quhua',
-      name: 'config',
+      name: 'quhua',
       component: (resolve) => {
         require(['@/views/customchannelization'], resolve)
       }

package/static/styles/channelizatioon.scss

@@ -200,6 +200,7 @@
       }
       .lane-edit-panel {
         position: relative;
+        background: #fff;
         .edit-id {
           position: absolute;
           right: 30PX;
@@ -215,8 +216,16 @@
           text-align: center;
           margin-top: 57PX;
         }
-        .detector-threshold-formtext {
-          color: $--color-text-regular;
+        .detector-threshold {
+          .detector-threshold-formtext {
+            color: $--color-text-regular;
+          }
+          .flow-separator {
+            color: $--color-text-regular;
+          }
+          .el-select {
+            width: 120PX;
+          }
         }
       }
       .phase-associated-component {
@@ -260,7 +269,7 @@
               }
             }
             .single-phase-select {
-              background-color: #a2cfff;
+              background-color: rebeccapurple;
             }
             .single-phase-name {
               width: 70PX;