openatc-components 0.5.6 → 0.5.7

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

@@ -19,7 +19,17 @@
         <!-- 绘制功能 -->
         <div class="draw-function">
           <div class="again-import">
-            <span class="import-label">{{$t('openatccomponents.channelizationmap.importcrosspicture')}}</span>
+            <el-dropdown @command="handleChangeCrossShapes">
+              <el-button type="primary" class="cross-shapes-btn">
+                {{$t('openatccomponents.channelizationmap.importcrosspicture')}}<i class="el-icon-arrow-down el-icon--right"></i>
+              </el-button>
+              <el-dropdown-menu slot="dropdown">
+                <el-dropdown-item command="101">{{$t('openatccomponents.importTemp.crossShapes.crossroads')}}</el-dropdown-item>
+                <el-dropdown-item command="100">{{$t('openatccomponents.importTemp.crossShapes.tjunction')}}</el-dropdown-item>
+                <el-dropdown-item command="103">{{$t('openatccomponents.importTemp.crossShapes.rampintersection2')}}</el-dropdown-item>
+                <el-dropdown-item command="104">{{$t('openatccomponents.importTemp.crossShapes.pedestriancrossing2')}}</el-dropdown-item>
+              </el-dropdown-menu>
+            </el-dropdown>
             <el-button
               class="again-import-btn"
               type="primary"
@@ -86,6 +96,10 @@
           <el-button type="primary" @click="savedraw()">{{$t('openatccomponents.button.save')}}</el-button>
           <el-button type="primary" @click="importFromFile()">{{$t('openatccomponents.main.import')}}</el-button>
           <el-button type="primary" @click="exportToFile()">{{$t('openatccomponents.main.export')}}</el-button>
+          <el-switch
+            v-model="isDefaultShowQuhua"
+            active-text="渠化默认显示">
+          </el-switch>
         </div>
       </div>
       <div class="custom-edit" ref="customEdit">
@@ -306,7 +320,8 @@ export default {
       ]),
       phaseAssociatedMap: new Map(), // 关联相位Map: key 是相位ID， value 是车道数据包含direction
       dialogVisible: false,
-      LoadedChannelizatonData: {} // 从接口获取到的渠化参数，用于作为加载数据，从文件导入可修改
+      LoadedChannelizatonData: {}, // 从接口获取到的渠化参数，用于作为加载数据，从文件导入可修改
+      isDefaultShowQuhua: true // 控制总览是否默认显示渠化图的开关
     }
   },
   methods: {
@@ -782,21 +797,7 @@ export default {
       // }
       this.index = 0
       this.curChooseIcon = {}
-      axios.get('./img/CrossRoadsSvg.svg').then((val) => {
-        if (!val.data || val.data === '') return
-        this.CrossMapData = {
-            index: -2,
-            icontype: 'crossmap',
-            x: 435,
-            y: 325,
-            w: 870,
-            h: 650,
-            angle: 0,
-            imgfilesrc: '',
-            svgstr: val.data,
-            type: 'vectorgraph'
-        }
-      })
+      this.reloadDefaultCrossMap('CrossRoad.svg')
     },
     // 取消
     cancledraw () {
@@ -827,7 +828,10 @@ export default {
     // 保存
     savedraw () {
       let temp = {}
-      temp = this.handleSaveParams()
+      temp = {
+        ...this.handleSaveParams(),
+        isDefaultShowQuhua: this.isDefaultShowQuhua
+      }
       this.saveChannelizatonChart(temp)
     },
     // 加载
@@ -835,6 +839,8 @@ export default {
       this.curChooseIconIndex = -1
       let savedTemp = JSON.parse(JSON.stringify(this.LoadedChannelizatonData))
       let arr = []
+      this.isDefaultShowQuhua = savedTemp.isDefaultShowQuhua
+      delete savedTemp.isDefaultShowQuhua
       for (const [key, value] of Object.entries(savedTemp)) {
         if (key === 'vehile') {
           this.Motorways = value
@@ -1010,6 +1016,39 @@ export default {
       el.click()
       // 移除链接释放资源
       urlObject.revokeObjectURL(url)
+    },
+    handleChangeCrossShapes (shape) {
+      switch (shape) {
+        case '100':
+          this.reloadDefaultCrossMap('TCrossRoad.svg')
+          break
+        case '101':
+          this.reloadDefaultCrossMap('CrossRoad.svg')
+          break
+        case '103':
+          this.reloadDefaultCrossMap('RampRoad.svg')
+          break
+        case '104':
+          this.reloadDefaultCrossMap('PedCrossingRoad.svg')
+          break
+      }
+    },
+    reloadDefaultCrossMap (imgname) {
+      axios.get(`./img/${imgname}`).then((val) => {
+        if (!val.data || val.data === '') return
+        this.CrossMapData = {
+            index: -2,
+            icontype: 'crossmap',
+            x: 435,
+            y: 325,
+            w: 870,
+            h: 650,
+            angle: 0,
+            imgfilesrc: '',
+            svgstr: val.data,
+            type: 'vectorgraph'
+        }
+      })
     }
   },
   mounted () {
@@ -1018,5 +1057,11 @@ export default {
 }
 </script>
 
-<style lang="css" rel="stylesheet/scss">
+<style lang="css" rel="stylesheet/scss" scoped>
+.cross-shapes-btn {
+  height: 32PX;
+  width: 90PX;
+  line-height: 32PX;
+  padding: 0;
+}
 </style>

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

@@ -1,144 +1,144 @@
-/** * 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 class="custom-cross-part draw-channelization">
-    <!-- <FirstImportCrossmap v-if="pageindex === 1"
-    @loadSvgString="loadSvgString" @loadMapSize="loadMapSize" />
-    <CustomDraw v-show="pageindex === 2" ref="CustomDraw"
-      :AgentId="AgentId"
-      :loadedChannelizatonData="loadedChannelizatonData"
-      @saveCallback="saveCallback" /> -->
-    <CustomDraw
-      ref="CustomDraw"
-      :AgentId="AgentId"
-      :loadedChannelizatonData="loadedChannelizatonData"
-      @saveCallback="saveCallback"
-    />
-  </div>
-</template>
-<script>
-import FirstImportCrossmap from './firstImportCrossmap'
-import CustomDraw from './index.draw'
-import { getChannelizatonChart } from '../../../../api/cross'
-import axios from 'axios'
-
-export default {
-  name: 'custom-channelization',
-  components: {
-    FirstImportCrossmap,
-    CustomDraw
-  },
-  props: {
-    AgentId: {
-      type: String,
-      default: '0'
-    },
-    tscParam: {
-      type: Object
-    }
-  },
-  data () {
-    return {
-      pageindex: 1, // 渠化编辑显示： 1 代表首次导入 2 代表已有保存的渠化图
-      loadedChannelizatonData: {} // 接口返回的已保存路口渠化数据
-    }
-  },
-  watch: {
-    AgentId: {
-      handler: function (val) {
-        this.getChannelizatonChart()
-      },
-      deep: true
-    },
-    tscParam: {
-      handler: function (val) {
-        if (val) {
-          this.$store.dispatch('SetTscParam', val)
-        }
-      },
-      deep: true
-    }
-  },
-  methods: {
-    loadSvgString (type, imgstr) {
-      this.pageindex = 2
-      this.$nextTick(() => {
-        this.$refs.CustomDraw.loadSvgString(type, imgstr)
-      })
-    },
-    loadMapSize (type, mapsize) {
-      this.$nextTick(() => {
-        this.$refs.CustomDraw.loadMapSize(type, mapsize)
-      })
-    },
-    getChannelizatonChart () {
-      let _this = this
-      _this.pageindex = 1
-      getChannelizatonChart(this.AgentId)
-        .then((data) => {
-          if (!data.data.success) {
-            // let parrenterror = getMessageByCode(data.data.code, _this.$i18n.locale)
-            // if (data.data.data) {
-            //   // 子类型错误
-            //   let childErrorCode = data.data.data.errorCode
-            //   if (childErrorCode) {
-            //     let childerror = getMessageByCode(data.data.data.errorCode, _this.$i18n.locale)
-            //     _this.$message.error(parrenterror + ',' + childerror)
-            //   }
-            // } else {
-            //   _this.$message.error(parrenterror)
-            // }
-            this.AutoReadSVG()
-            return
-          }
-          if (
-            data.data.data === undefined ||
-            JSON.stringify(data.data.data) === '{}'
-          ) {
-            this.AutoReadSVG()
-            return
-          }
-          _this.pageindex = 2
-          _this.loadedChannelizatonData = JSON.parse(
-            JSON.stringify(data.data.data)
-          )
-        })
-        .catch(() => {
-          this.AutoReadSVG()
-        })
-    },
-    saveCallback (res) {
-      this.$emit('saveCallback', res)
-    },
-    AutoReadSVG () {
-      axios.get('./img/CrossRoadsSvg.svg').then((val) => {
-        if (!val.data || val.data === '') return
-        this.loadedChannelizatonData = {
-          crossMap: {
-            index: -2,
-            icontype: 'crossmap',
-            x: 435,
-            y: 325,
-            w: 870,
-            h: 650,
-            angle: 0,
-            imgfilesrc: '',
-            svgstr: val.data,
-            type: 'vectorgraph'
-          }
-        }
-      })
-    }
-  },
-  mounted () {
-    this.getChannelizatonChart()
-  }
-}
-</script>
-<style 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 class="custom-cross-part draw-channelization">
+    <!-- <FirstImportCrossmap v-if="pageindex === 1"
+    @loadSvgString="loadSvgString" @loadMapSize="loadMapSize" />
+    <CustomDraw v-show="pageindex === 2" ref="CustomDraw"
+      :AgentId="AgentId"
+      :loadedChannelizatonData="loadedChannelizatonData"
+      @saveCallback="saveCallback" /> -->
+    <CustomDraw
+      ref="CustomDraw"
+      :AgentId="AgentId"
+      :loadedChannelizatonData="loadedChannelizatonData"
+      @saveCallback="saveCallback"
+    />
+  </div>
+</template>
+<script>
+import FirstImportCrossmap from './firstImportCrossmap'
+import CustomDraw from './index.draw'
+import { getChannelizatonChart } from '../../../../api/cross'
+import axios from 'axios'
+
+export default {
+  name: 'custom-channelization',
+  components: {
+    FirstImportCrossmap,
+    CustomDraw
+  },
+  props: {
+    AgentId: {
+      type: String,
+      default: '0'
+    },
+    tscParam: {
+      type: Object
+    }
+  },
+  data () {
+    return {
+      pageindex: 1, // 渠化编辑显示： 1 代表首次导入 2 代表已有保存的渠化图
+      loadedChannelizatonData: {} // 接口返回的已保存路口渠化数据
+    }
+  },
+  watch: {
+    AgentId: {
+      handler: function (val) {
+        this.getChannelizatonChart()
+      },
+      deep: true
+    },
+    tscParam: {
+      handler: function (val) {
+        if (val) {
+          this.$store.dispatch('SetTscParam', val)
+        }
+      },
+      deep: true
+    }
+  },
+  methods: {
+    loadSvgString (type, imgstr) {
+      this.pageindex = 2
+      this.$nextTick(() => {
+        this.$refs.CustomDraw.loadSvgString(type, imgstr)
+      })
+    },
+    loadMapSize (type, mapsize) {
+      this.$nextTick(() => {
+        this.$refs.CustomDraw.loadMapSize(type, mapsize)
+      })
+    },
+    getChannelizatonChart () {
+      let _this = this
+      _this.pageindex = 1
+      getChannelizatonChart(this.AgentId)
+        .then((data) => {
+          if (!data.data.success) {
+            // let parrenterror = getMessageByCode(data.data.code, _this.$i18n.locale)
+            // if (data.data.data) {
+            //   // 子类型错误
+            //   let childErrorCode = data.data.data.errorCode
+            //   if (childErrorCode) {
+            //     let childerror = getMessageByCode(data.data.data.errorCode, _this.$i18n.locale)
+            //     _this.$message.error(parrenterror + ',' + childerror)
+            //   }
+            // } else {
+            //   _this.$message.error(parrenterror)
+            // }
+            this.AutoReadSVG()
+            return
+          }
+          if (
+            data.data.data === undefined ||
+            JSON.stringify(data.data.data) === '{}'
+          ) {
+            this.AutoReadSVG()
+            return
+          }
+          _this.pageindex = 2
+          _this.loadedChannelizatonData = JSON.parse(
+            JSON.stringify(data.data.data)
+          )
+        })
+        .catch(() => {
+          this.AutoReadSVG()
+        })
+    },
+    saveCallback (res) {
+      this.$emit('saveCallback', res)
+    },
+    AutoReadSVG () {
+      axios.get('./img/CrossRoadsSvg.svg').then((val) => {
+        if (!val.data || val.data === '') return
+        this.loadedChannelizatonData = {
+          crossMap: {
+            index: -2,
+            icontype: 'crossmap',
+            x: 435,
+            y: 325,
+            w: 870,
+            h: 650,
+            angle: 0,
+            imgfilesrc: '',
+            svgstr: val.data,
+            type: 'vectorgraph'
+          }
+        }
+      })
+    }
+  },
+  mounted () {
+    this.getChannelizatonChart()
+  }
+}
+</script>
+<style scoped></style>