|
@@ -1,17 +1,37 @@
|
|
|
<template>
|
|
|
<div id="left_toolbar">
|
|
|
<ul class="list-1">
|
|
|
- <li v-on:mouseout="mouseoutActive(item)" v-on:mouseover="mouseoverActive(item)" v-for="(item,i) in baseChoice" :key="i"
|
|
|
- @click="toolActionClick(item)" v-bind:class="{ actives:item.isChoice}">
|
|
|
+ <li
|
|
|
+ v-on:mouseout="mouseoutActive(item)"
|
|
|
+ v-on:mouseover="mouseoverActive(item)"
|
|
|
+ v-for="(item,i) in baseChoice"
|
|
|
+ :key="i"
|
|
|
+ @click="toolActionClick(item)"
|
|
|
+ v-bind:class="{ actives:item.isChoice}"
|
|
|
+ >
|
|
|
<div class="item">
|
|
|
- <img v-show="!item.isHover && !item.isChoice" :src="require(`./../../assets/images/${item.img}`)" alt />
|
|
|
- <img v-show="item.isHover || item.isChoice " :src="require(`./../../assets/images/${item.hoverImg}`)" alt />
|
|
|
+ <img
|
|
|
+ v-show="!item.isHover && !item.isChoice"
|
|
|
+ :src="require(`./../../assets/images/${item.img}`)"
|
|
|
+ alt
|
|
|
+ />
|
|
|
+ <img
|
|
|
+ v-show="item.isHover || item.isChoice "
|
|
|
+ :src="require(`./../../assets/images/${item.hoverImg}`)"
|
|
|
+ alt
|
|
|
+ />
|
|
|
</div>
|
|
|
</li>
|
|
|
</ul>
|
|
|
<ul class="list-2">
|
|
|
- <li v-on:mouseout="mouseoutActive(item)" v-on:mouseover="mouseoverActive(item)" v-for="(item,i) in systemChoice" @click="showDrawer(item)"
|
|
|
- :key="i" v-bind:class="{ actives:item.isChoice}">
|
|
|
+ <li
|
|
|
+ v-on:mouseout="mouseoutActive(item)"
|
|
|
+ v-on:mouseover="mouseoverActive(item)"
|
|
|
+ v-for="(item,i) in systemChoice"
|
|
|
+ @click="showDrawer(item)"
|
|
|
+ :key="i"
|
|
|
+ v-bind:class="{ actives:item.isChoice}"
|
|
|
+ >
|
|
|
<div class="item">
|
|
|
<img v-show="!item.isHover" :src="require(`./../../assets/images/${item.img}`)" alt />
|
|
|
<img v-show="item.isHover" :src="require(`./../../assets/images/${item.hoverImg}`)" alt />
|
|
@@ -21,7 +41,13 @@
|
|
|
</ul>
|
|
|
<!-- 提取-->
|
|
|
<ul class="list-2 border-top">
|
|
|
- <li v-on:mouseout="mouseoutActive(item)" v-on:mouseover="mouseoverActive(item)" v-for="(item,i) in extractChoice" :key="i" @click="extractItem">
|
|
|
+ <li
|
|
|
+ v-on:mouseout="mouseoutActive(item)"
|
|
|
+ v-on:mouseover="mouseoverActive(item)"
|
|
|
+ v-for="(item,i) in extractChoice"
|
|
|
+ :key="i"
|
|
|
+ @click="extractItem"
|
|
|
+ >
|
|
|
<div class="item">
|
|
|
<img v-show="!item.isHover" :src="require(`./../../assets/images/${item.img}`)" alt />
|
|
|
<img v-show="item.isHover" :src="require(`./../../assets/images/${item.hoverImg}`)" alt />
|
|
@@ -43,8 +69,15 @@
|
|
|
<!-- 打开弹窗 -->
|
|
|
<transition name="fade">
|
|
|
<div class="drawer-model" id="drawer-model" v-show="visible">
|
|
|
- <a-drawer placement="left" :closable="false" :visible="visible" :wrap-style="{ position: 'absolute',}" @close="onClose" :getContainer="false">
|
|
|
- <div class="drawer-model-body" v-show="activeItem ==1 || activeItem ==2">
|
|
|
+ <a-drawer
|
|
|
+ placement="left"
|
|
|
+ :closable="false"
|
|
|
+ :visible="visible"
|
|
|
+ :wrap-style="{ position: 'absolute',}"
|
|
|
+ @close="onClose"
|
|
|
+ :getContainer="false"
|
|
|
+ >
|
|
|
+ <div class="drawer-model-body">
|
|
|
<div class="btn-list">
|
|
|
<a-button-group>
|
|
|
<a-button type="primary">绘制</a-button>
|
|
@@ -55,7 +88,7 @@
|
|
|
<div class="title">{{item.Name}}</div>
|
|
|
<ul class="example">
|
|
|
<li
|
|
|
- @click="getexampleItem"
|
|
|
+ @click="getexampleItem(item)"
|
|
|
v-for="(items,indexs) in item.GraphElements"
|
|
|
:key="indexs"
|
|
|
>
|
|
@@ -69,9 +102,14 @@
|
|
|
</ul>
|
|
|
</div>
|
|
|
</div>
|
|
|
- <div class="drawer-model-body drawer-model-body-extract" v-show="activeItem ==3">
|
|
|
+ <div class="drawer-model-body drawer-model-body-extract">
|
|
|
<a-table :columns="columns" :data-source="data" size="small" :pagination="false">
|
|
|
- <a-tag slot="address" slot-scope="text, record, index" :color="'geekblue'" @click="pickUp(text, record, index)">{{ text }}</a-tag>
|
|
|
+ <a-tag
|
|
|
+ slot="address"
|
|
|
+ slot-scope="text, record, index"
|
|
|
+ :color="'geekblue'"
|
|
|
+ @click="pickUp(text, record, index)"
|
|
|
+ >{{ text }}</a-tag>
|
|
|
</a-table>
|
|
|
</div>
|
|
|
</a-drawer>
|
|
@@ -81,7 +119,7 @@
|
|
|
</template>
|
|
|
<script>
|
|
|
import itemTree from "./leftbar_components/itemTree";
|
|
|
-import { queryByGroup } from "@/api/editer.js"
|
|
|
+import { queryByGroup } from "@/api/editer.js";
|
|
|
import bus from "@/bus";
|
|
|
import { queryGroup } from "@/api/editer.js";
|
|
|
import { mapState, mapActions } from "vuex";
|
|
@@ -101,7 +139,7 @@ const columns = [
|
|
|
{
|
|
|
title: "操作",
|
|
|
dataIndex: "address",
|
|
|
- scopedSlots: { customRender: 'address' }
|
|
|
+ scopedSlots: { customRender: "address" }
|
|
|
}
|
|
|
];
|
|
|
const data = [
|
|
@@ -124,9 +162,9 @@ const data = [
|
|
|
export default {
|
|
|
components: { itemTree },
|
|
|
props: {
|
|
|
- cmd: {
|
|
|
- type: Number,
|
|
|
- default: 0,
|
|
|
+ cmdType: {
|
|
|
+ type: String,
|
|
|
+ default: '',
|
|
|
required: false
|
|
|
}
|
|
|
},
|
|
@@ -140,7 +178,7 @@ export default {
|
|
|
isHover: true, //是否hover
|
|
|
isChoice: true,
|
|
|
name: "选择", //类型
|
|
|
- cmd: 0
|
|
|
+ type: "choice"
|
|
|
},
|
|
|
{
|
|
|
img: "t-line.png", //logo
|
|
@@ -148,7 +186,7 @@ export default {
|
|
|
isHover: false, //是否hover
|
|
|
isChoice: false,
|
|
|
name: "画线", //类型
|
|
|
- cmd: 1
|
|
|
+ type: "baseLine"
|
|
|
},
|
|
|
{
|
|
|
img: "t-text.png", //logo
|
|
@@ -156,7 +194,7 @@ export default {
|
|
|
isHover: false, //是否hover
|
|
|
isChoice: false,
|
|
|
name: "画文字", //类型
|
|
|
- cmd: 2
|
|
|
+ type: "baseText"
|
|
|
},
|
|
|
{
|
|
|
img: "t-img.png", //logo
|
|
@@ -164,7 +202,7 @@ export default {
|
|
|
isHover: false, //是否hover
|
|
|
isChoice: false,
|
|
|
name: "画图片", //类型
|
|
|
- cmd: 3
|
|
|
+ type: "baseImage"
|
|
|
}
|
|
|
],
|
|
|
// 系统选择
|
|
@@ -231,7 +269,7 @@ export default {
|
|
|
a.isChoice = false;
|
|
|
});
|
|
|
item.isChoice = true;
|
|
|
- this.$emit("setCmd", item.cmd);
|
|
|
+ this.$emit("setCmdType", item.type);
|
|
|
},
|
|
|
showDrawer(item) {
|
|
|
if (item.isChoice) {
|
|
@@ -269,9 +307,8 @@ export default {
|
|
|
a.isChoice = false;
|
|
|
});
|
|
|
},
|
|
|
- getexampleItem() {
|
|
|
+ getexampleItem(item) {
|
|
|
this.visible = false;
|
|
|
- const item = 4
|
|
|
this.$emit("toolActionClick", item);
|
|
|
},
|
|
|
// 提取元素
|
|
@@ -282,14 +319,14 @@ export default {
|
|
|
getBus() {
|
|
|
bus.$on("exportItem", data => {
|
|
|
this.data = data;
|
|
|
- })
|
|
|
+ });
|
|
|
},
|
|
|
pickUp(text, record, index) {
|
|
|
- bus.$emit('exportByKey', record);
|
|
|
+ bus.$emit("exportByKey", record);
|
|
|
}
|
|
|
},
|
|
|
watch: {
|
|
|
- cmd(cmd) {
|
|
|
+ cmdType(cmd) {
|
|
|
this.baseChoice.forEach(item => {
|
|
|
item.isChoice = false;
|
|
|
if (item.cmd == cmd) {
|