openatc-components 0.0.97 → 0.0.100

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

@@ -64,13 +64,6 @@
 
       <div class="phase-associated">
         <div class="tittle">{{$t('openatccomponents.channelizationmap.phaseassociated')}}</div>
-        <!-- 相位可以编辑，增加，删除，校验 -->
-        <!-- <PhaseAssociatedComponentCheck
-          ref="phaseAssociated"
-          :editData="Data"
-          :Motorways="Motorways"
-          @selectPhase="selectPhase"
-          @handleDisassociatePhase="handleDisassociatePhase" /> -->
         <!-- 相位仅可以关联选择，不可修改 -->
         <PhaseAssociatedComponent
           :editData="Data"
@@ -115,12 +108,6 @@
       </div>
       <div class="phase-associated">
         <div class="tittle">{{$t('openatccomponents.channelizationmap.phaseassociated')}}</div>
-        <!-- 相位可以编辑，增加，删除，校验 -->
-        <!-- <PhaseAssociatedComponentCheck
-          ref="phaseAssociated"
-          :editData="Data"
-          @selectPhase="selectPhase"
-          @handleDisassociatePhase="handleDisassociatePhase" /> -->
         <!-- 相位仅可以关联选择，不可修改 -->
         <PhaseAssociatedComponent
           :editData="Data"
@@ -135,6 +122,12 @@
 
     <!-- 检测器编辑面板 -->
     <div class="detector" v-if="Data.icontype === 'detector' && Data.detailtype === 'detector'">
+      <div class="edit-id">
+        <span style="margin-right: 3px;">
+          {{$t('openatccomponents.channelizationmap.detector') + ':'}}
+        </span>
+        <span>{{Data.id}}</span>
+      </div>
       <div class="detector-type">
         <div class="tittle">{{$t('openatccomponents.channelizationmap.detectortype')}}</div>
         <div class="each-icon" v-for="(item, index) in detectortypeList" :key="index">
@@ -160,40 +153,71 @@
            <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>
     </div>
-
+    <div class="basic-coord" v-if="JSON.stringify(Data) !== '{}' && Data.icontype !== 'countdown' && Data.icontype !== 'crossmap'">
+      <div class="tittle">{{$t('openatccomponents.channelizationmap.basicinfo')}}</div>
+      <BasicCoordInfo :drawingObjInfo="Data" @handleChangeBasicCoord="handleChangeBasicCoord" />
+    </div>
     <div class="delete-drawed-item" v-if="JSON.stringify(Data) !== '{}' && Data.detailtype !== 'detectorChart'">
-      <el-button type="primary" @click="handledelete">{{$t('openatccomponents.channelizationmap.delete')}}</el-button>
+      <el-button type="primary" @click="handledelete" v-if="Data.icontype !== 'crossmap'">{{$t('openatccomponents.channelizationmap.delete')}}</el-button>
+      <el-button type="primary" @click="handleClone" v-if="Data.icontype !== 'countdown' && Data.icontype !== 'crossmap'">{{$t('openatccomponents.channelizationmap.clone')}}</el-button>
     </div>
   </div>
 </template>
 <script>
-import PhaseAssociatedComponentCheck from './phaseAssociatedComponent.check'
 import PhaseAssociatedComponent from './phaseAssociatedComponent.vue'
 import OverlapAssociatedComponent from './overlapAssociatedComponent'
 import DetectorAssociatedComponent from './detectorAssociatedComponent.vue'
+import BasicCoordInfo from './basicCoordInfo'
 export default {
   name: 'lane-edit-panel',
   components: {
     PhaseAssociatedComponent,
-    PhaseAssociatedComponentCheck,
     OverlapAssociatedComponent,
-    DetectorAssociatedComponent
+    DetectorAssociatedComponent,
+    BasicCoordInfo
   },
   data () {
     return {
@@ -373,8 +397,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 +422,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
@@ -425,7 +456,6 @@ export default {
         this.iconObj.icondireid.splice(index, 1)
       }
       this.$emit('handleChooseDire', this.iconObj)
-      // this.handleAssociatedPhase()
     },
     selectLanetype (id) {
       this.iconObj.controltype = id
@@ -447,8 +477,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) {
@@ -461,7 +492,6 @@ export default {
     selectLanePos (value) {
       this.iconObj.lanePosition = value
       this.$emit('changeIconDataByType', this.iconObj, ['lanePosition'])
-      // this.handleAssociatedPhase()
     },
     selectPhase (phaseid, direction) {
       // 关联相位的同时，会修改相位方向
@@ -485,12 +515,6 @@ export default {
     handleDisassociatePhase (deletePhaseid) {
       this.$emit('handleDisassociatePhase', deletePhaseid)
     },
-    // handleAssociatedPhase () {
-    //   // 如果已关联相位，再改变车道转向或者方位时，需要同步更新选中的关联相位
-    //   if (this.iconObj.phaseid !== undefined) {
-    //     this.$refs.phaseAssociated.changeDirection(this.iconObj)
-    //   }
-    // },
     selectAssociatedDetector (detectorid) {
       // 仅关联检测器，不修改
       this.iconObj.detectorid = detectorid
@@ -506,15 +530,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.flowsaturationthreshold = 20
+        this.minflowsaturationthreshold = 30
         return
       }
-      this.flowsaturationthreshold = flowsaturationthreshold
-      this.iconObj.flowsaturationthreshold = flowsaturationthreshold
-      this.$emit('changeIconDataByType', this.iconObj, ['flowsaturationthreshold'])
+      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.maxflowsaturationthreshold = 70
+        return
+      }
+      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 +594,44 @@ 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)
+      }
+    },
+    handleChangeBasicCoord (basicCoord) {
+      // 基础信息面板修改
+      this.iconObj.x = basicCoord.x
+      this.iconObj.y = basicCoord.y
+      this.iconObj.angle = basicCoord.angle
+      this.$emit('changeIconDataByType', this.iconObj, ['x', 'y', 'angle'])
+    },
+    handleClone () {
+      this.$emit('cloneItem', this.iconObj)
     }
   },
+  created () {
+    this.createResholdSelectOptions()
+  },
   mounted () {
     if (JSON.stringify(this.Data) === '{}') return
     this.iconObj = JSON.parse(JSON.stringify(this.Data))
@@ -549,8 +647,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/kisscomps/components/DrawChannelization/drawsvg/utils/loadutils.js

@@ -10,10 +10,11 @@
  * See the Mulan PSL v2 for more details.
  **/
 export default class Svgmethods {
-  clickOpen (call) {
+  clickOpen (call, call2) {
     const file = document.getElementById('importimg').files[0]
     const filetype = file.type
     const reader = new FileReader()
+    const reader2 = new FileReader()
     const filesize = file.size
     if (filetype !== 'image/svg+xml' && filetype !== 'image/png' && filetype !== 'image/jpeg') {
       call('error', 'type')
@@ -29,6 +30,19 @@ export default class Svgmethods {
         const content = readerEvent.target.result
         call('vectorgraph', content)
       })
+      reader2.readAsDataURL(file)
+      reader2.addEventListener('load', async (readerEvent) => {
+        const imageSrc = readerEvent.target.result
+        // 调用计算图片大小的方法
+        calculateImageSize(imageSrc).then(function ({width, height}) {
+          // 通过ES6的结构赋值来得到图片的宽和高
+          let svgsize = {
+            width,
+            height
+          }
+          call2('vectorgraph', svgsize)
+        })
+      })
     }
     if (filetype === 'image/png' || filetype === 'image/jpeg') {
       reader.readAsDataURL(file)
@@ -37,7 +51,37 @@ export default class Svgmethods {
         const _base64 = reader.result
         const content = _base64
         call('picture', content)
+        const imageSrc = readerEvent.target.result
+        // 调用计算图片大小的方法
+        calculateImageSize(imageSrc).then(function ({width, height}) {
+          // 通过ES6的结构赋值来得到图片的宽和高
+          let pngsize = {
+            width,
+            height
+          }
+          call2('picture', pngsize)
+        })
       })
     }
   }
 }
+
+// 根据图片地址获取图片的宽和高
+const calculateImageSize = function (url) {
+  return new Promise(function (resolve, reject) {
+    const image = document.createElement('img')
+    image.addEventListener('load', function (e) {
+      resolve({
+        width: e.target.width,
+        height: e.target.height
+      })
+    })
+
+    image.addEventListener('error', function () {
+      console.log('error')
+    })
+
+    // 将图片的url地址添加到图片地址中
+    image.src = url
+  })
+}

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

@@ -69,12 +69,6 @@
                  @closePhaseBack="closePhaseBack"
                  @closePhaseControl="closePhaseControl"
                 />
-                <priorityControl
-                v-if="specialPage === 'prioritycontrol'"
-                :phaseList="phaseList"
-                 @closePhaseBack="closePhaseBack"
-                 @closePhaseControl="closePhaseControl"
-                />
             </div>
           </transition>
 
@@ -116,7 +110,6 @@ import ManualControlModal from './manualControlModal'
 import ClosePhaseControlModal from './closePhaselControlModal'
 import LockingPhaseControlModal from './lockingPhaselControlModal'
 import TentativePlanControlModal from './tentativeplancontrolmodal'
-import priorityControl from './priorityControl'
 // import { getFaultMesZh, getFaultMesEn } from '../../utils/faultcode.js'
 import { getMessageByCode } from '../../../utils/responseMessage'
 import { GetAllFaultRange } from '../../../api/fault'
@@ -132,7 +125,6 @@ export default {
     ManualControlModal,
     ClosePhaseControlModal,
     LockingPhaseControlModal,
-    priorityControl,
     TentativePlanControlModal
   },
   props: {
@@ -300,9 +292,6 @@ export default {
       }, {
         id: 100,
         iconClass: 'tentativeplan'
-      }, {
-        id: 24,
-        iconClass: 'tentativeplan'
       }],
       phaseRings: [],
       curFaultList: [],
@@ -631,11 +620,6 @@ export default {
         this.isClosePhase = true
         this.phaseRings = ringDataModel.initRingPhaseData()
         this.specialPage = 'tentativeplan'
-      } else if (id === 24) {
-        this.toPage = 3
-        this.isClosePhase = true
-        this.phaseRings = ringDataModel.initRingPhaseData()
-        this.specialPage = 'prioritycontrol'
       } else {
         this.isClosePhase = false
         this.specialPage = ''

package/src/kisscomps/index.js

@@ -21,7 +21,6 @@ import StageBord from './components/StageBord/index'
 import ExpendConfig from './components/ExpendConfig/index'
 import PatternWalkSvg from './components/PatternWalkSvg/index'
 import tentativeplancontrolmodal from './components/SchemeConfig/tentativeplancontrolmodal/index'
-import priorityControl from './components/SchemeConfig/priorityControl/index'
 import { setToken, setHost } from '../utils/auth.js'
 import componentsGlobalParam from '../store/modules/globalParam'
 
@@ -52,7 +51,6 @@ const components = {
   StageBord,
   ExpendConfig,
   PatternWalkSvg,
-  priorityControl,
   tentativeplancontrolmodal
 }
 

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

@@ -67,6 +67,16 @@
             width: 90PX;
             height: 32PX;
           }
+          .lock-map {
+            cursor: pointer;
+            margin: 0 5PX;
+          }
+          .el-icon-lock {
+            color: $--color-text-secondary;
+          }
+          .el-icon-unlock {
+            color: rgb(242, 121, 121);
+          }
         }
         .draw-to-sketchpad {
           float: right;
@@ -105,6 +115,14 @@
         .channelization-elements-components {
           border: 1px solid $--border-color-base;
           margin: 0 auto;
+          .detector-chart-icon {
+            .detector-rect {
+              width: 20PX;
+              height: 20PX;
+              border: 2px solid #0080FF;
+              margin: 0 auto;
+            }
+          }
         }
       }
       .draw-end-function {
@@ -200,6 +218,8 @@
       }
       .lane-edit-panel {
         position: relative;
+        max-height: 87vh;
+        overflow-y: auto;
         .edit-id {
           position: absolute;
           right: 30PX;
@@ -214,9 +234,27 @@
         .delete-drawed-item {
           text-align: center;
           margin-top: 57PX;
+          margin-bottom: 39PX;
+          button {
+            width: 90PX;
+            height: 32PX;
+            padding: 0;
+          }
         }
-        .detector-threshold-formtext {
-          color: $--color-text-regular;
+        .detector-threshold {
+          margin-bottom: 55px;
+          .detector-threshold-formtext {
+            color: $--color-text-regular;
+          }
+          .flow-separator {
+            color: $--color-text-regular;
+          }
+          .el-select {
+            width: 120PX;
+          }
+        }
+        .overlap-associated {
+          margin-bottom: 30px;
         }
       }
       .phase-associated-component {

package/static/styles/schemeconfig.scss

@@ -273,58 +273,6 @@
     color: $--color-text-secondary;
   }
 } 
-.priority-control{
-  height: 100%;
-  padding: 21px 0px 21px 28px;
-  min-width: 360px;
-  overflow: auto;
-  .title {
-    margin-bottom: 24px;
-    font-size: 20px;
-    font-weight: 400;
-    line-height: 22px;
-    color: $--color-text-primary;
-    span {
-      font-size: 14px;
-      font-weight: 400;
-      color: $--color-text-secondary;
-    }
-  }
-  .footer {
-    float: right;
-    margin: 38px 24px 40px 0;
-    button {
-      width: 56px;
-      height: 32px;
-      padding: 0;
-      text-align: center;
-      line-height: 30px;
-      font-size: 12px;
-      font-weight: normal;
-      font-stretch: normal;
-    }
-  }
-  .el-input--mini{
-    width: 90%;
-  }
-  .el-form-item {
-    margin-bottom: 0px;
-  }
-  .el-form-item__label {
-    font-size: 14px;
-    font-weight: 400;
-    color: $--color-text-secondary;
-  }
-  .el-select {
-    width: 90%;
-  }
-  .el-input-number {
-    width: 100%;
-    .el-input__inner {
-      text-align: left;
-    }
-  }
-}
 .tentativeplan-control{
   height: 100%;
   padding: 21px 0px 21px 28px;