Skip to content

V
Vue-WebDriver
Commit 3a3f2e2f by 郁子恒
Options

界面优化

parent 6b5ec9d2
Showing with 133 additions and 50 deletions
src/App.vue
<template>
<div id="realcontent">
<div id="EasySpiderResizer" style="width: 10px; height: 10px; position: absolute; left: 0; top: 0; cursor: nw-resize;">
<img style="width: 15px;height: 15px;" src="./assets/enlarge.svg">
<div id="KiviiWebTool" style="width: 10px; height: 10px; position: absolute; left: 0; top: 0; cursor: nw-resize;">
<img style="width: 25px;height: 25px;" src="./assets/enlarge.svg">
</div>
<div>
<!-- 页头信息 -->
......@@ -10,7 +10,7 @@
<span style="padding-left: 3px;">K5 网页自动化工具</span>
</div>
<!-- 任务信息 -->
<div style="display: flex;align-items: center;height: 60px;">
<div style="display: flex;align-items: center;height: 60px;justify-content: space-between;margin-right: 15px;">
<div style="width: 85%;display: flex;flex-direction: column;text-align: left;">
<div style="width: 100%;height: 25px;display: flex;align-items: center;padding-left: 10px;">
<span style="width: 95px;padding-left: 5px;">任务名称：</span>
......@@ -21,9 +21,9 @@
<el-input v-model="taskAddress" placeholder="请输入内容" style="height: 20px;" disabled></el-input>
</div>
</div>
<div style="display: flex;flex-direction: column;height: 55px;justify-content: space-between;">
<el-button size="mini" style="width: 60px;height: 25px;">保存任务</el-button>
<el-button size="mini" style="width: 60px;height: 25px;" @click="submitPlan">导出任务</el-button>
<div style="display: flex;flex-direction: column;height: 55px;justify-content: space-evenly;">
<el-button size="mini" style="width: 50px;height: 20px;">保存任务</el-button>
<el-button size="mini" style="width: 50px;height: 20px;" @click="submitPlan">导出任务</el-button>
</div>
</div>
<el-divider></el-divider>
......@@ -36,18 +36,18 @@
</span>
</div>
</div>
<div style="display: flex;align-items: flex-start;justify-content: space-between;">
<div style="display: flex;align-items: flex-start;justify-content: space-between;width: 460px;">
<!-- 动作标签 -->
<div style="margin-bottom: 5px;margin-right: 1px;white-space: wrap;display: flex;width: 410px;">
<div style="margin-bottom: 5px;margin-right: 1px;white-space: wrap;display: flex;width: 88%;">
<draggable v-model="treeNode" chosenClass="chosen" forceFallback="true" group="people" animation="1000" @start="onStart" @end="onEnd" v-if="isChildrenTree == false">
<transition-group>
<el-tag class="boxtags" :key="tag.tagId" v-for="(tag, index) in treeNode" @click="selectTag(tag)">
<div style="display: flex;align-items: center;height: 30px;position: relative;">
<div style="display: flex;align-items: center;height: 25px;position: relative;">
<span style="min-width: 40px;display: flex;align-items: center;">
<div class="circle">{{ index + 1 }}</div>
<span style="margin-left: 5px;">{{ tag.actionName }}</span>
<span style="margin-left: 2px;">{{ tag.actionName }}</span>
</span>
<img id="closeimg" @click="handleClose(tag)" style="width: 20px;position: absolute;top: -8px;right: -18px;" src="./assets/close.svg">
<img id="closeimg" @click="handleClose(tag)" style="width: 17px;position: absolute;top: -6px;right: -16px;" src="./assets/close.svg">
</div>
</el-tag>
</transition-group>
......@@ -58,7 +58,7 @@
<div style="display: flex;align-items: center;height: 30px;position: relative;">
<span style="min-width: 40px;display: flex;align-items: center;">
<div class="circle">{{ index + 1 }}</div>
<span style="margin-left: 5px;">{{ item.actionName }}</span>
<span style="margin-left: 2px;">{{ item.actionName }}</span>
</span>
<img id="closeimg" @click="handleClose(item)" style="width: 20px;position: absolute;top: -8px;right: -18px;" src="./assets/close.svg">
</div>
......@@ -67,8 +67,8 @@
</draggable>
</div>
<div style="height: 42px;display:flex;align-items: center;margin-right: 15px;">
<el-button type="primary" size="mini" style="width: 60px;height: 25px;" @click="newAction">
<img style="width: 20px;height: 20px;" src="./assets/add.svg">
<el-button :disabled="state" type="primary" size="mini" style="width: 30px;height: 20px;" @click="newAction">
<img style="width: 15px;height: 15px;" src="./assets/add.svg">
</el-button>
</div>
</div>
......@@ -102,13 +102,14 @@
// 导出json文件使用的库
import { saveAs } from 'file-saver';
import draggable from 'vuedraggable'
import { onSelect, elRightClick, wait, loopClick, onInput, collectSingleElements, pageClose, mouseMove, pageJavascipt, collectionTable, submit, actions } from './components/index.js'
import { onSelect, elRightClick, elClick, wait, loopClick, onInput, collectSingleElements, pageClose, mouseMove, pageJavascipt, collectionTable, submit, actions } from './components/index.js'
export default {
name: 'App',
components: { draggable, onSelect, elRightClick, wait, loopClick, onInput, collectSingleElements, pageClose, mouseMove, pageJavascipt, collectionTable, submit, actions },
components: { draggable, onSelect, elClick, elRightClick, wait, loopClick, onInput, collectSingleElements, pageClose, mouseMove, pageJavascipt, collectionTable, submit, actions },
props: {},
data() {
return {
state: false,
dynamicComponent: null,
taskName: '',
taskAddress: 'https://k5.kivii.org/storages/app/files/bundle.js',
......@@ -207,7 +208,14 @@ export default {
},
treeNode: {
handler(newVal, oldVal) {
console.log('数组变化了', newVal);
// console.log('数组变化了', newVal);
// console.log(newVal.length);
// 设置动作新增上限为15个
if (newVal.length > 14) {
this.state = true;
} else {
this.state = false;
}
},
deep: true
}
......@@ -220,6 +228,9 @@ export default {
case 'elRightClick':
this.dynamicComponent = elRightClick
break;
case 'elClick':
this.dynamicComponent = elClick
break;
case 'select':
this.dynamicComponent = onSelect
break;
......@@ -372,8 +383,8 @@ export default {
}
},
// 导航标签
onBreadcrumb (item) {
this.isShowAction=false
onBreadcrumb(item) {
this.isShowAction = false
this.actionName = item.actionName
this.actionType = item.actionType
this.deleteObjectsAfterKvid(this.actionAll, item.Kvid)
......@@ -642,8 +653,8 @@ export default {
<style>
.circle {
width: 15px;
height: 15px;
width: 12px;
height: 12px;
border: 1px solid #ffffff;
/* 圆环的颜色和宽度 */
border-radius: 50%;
......@@ -653,6 +664,7 @@ export default {
justify-content: center;
/* 文本颜色 */
font-weight: bold;
font-size: 9px;
}
/* 删除时鼠标手势 */
......@@ -677,7 +689,7 @@ export default {
}
.tooltips {
min-width: 500px;
min-width: 460px;
min-height: 500px;
background-color: white;
position: fixed;
......@@ -714,12 +726,10 @@ export default {
padding: 0 5px !important;
margin-left: 12px !important;
margin-top: 6px !important;
font-size: 10px !important;
height: 25px !important;
}
/* .el-tag+.el-tag {
margin-left: 0px !important;
} */
.el-button+.el-button,
.el-checkbox.is-bordered+.el-checkbox.is-bordered {
margin-left: 0px !important;
......@@ -767,7 +777,7 @@ export default {
}
.tooltips button {
font-size: 13px;
font-size: 10px;
border-radius: 5px;
border: solid 1px #409EFF;
background-color: #409EFF;
......
src/components/elclick.vue 0 → 100644
<template>
<div class="elClick">
<div style="height: 35px;margin-left: 15px;text-align: left;">
<el-button size="small" class="button-new-tag" @click="selectElement">选择元素</el-button>
<el-button size="small" class="button-new-tag" @click="cancelSelect">取消选择</el-button>
<span style="margin-left: 3px;">元素信息如下:</span>
</div>
<el-form label-position="right" label-width="80px" :model="actionConfig">
<el-form-item label="查找方式">
<el-select id="eventType" name="eventType" v-model="actionConfig.Type" :placeholder="selectDisabled ? '右击选择元素' : '请选择'" @change="handleChange" filterable remote :disabled="selectDisabled">
<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
</el-option>
</el-select>
</el-form-item>
<el-form-item label="标签名称">
<el-input v-model="actionConfig.Target.Selector"></el-input>
</el-form-item>
<el-form-item label="查询时间">
<el-input v-model="actionConfig.Target.Timeout"></el-input>
</el-form-item>
</el-form>
<div style="width: 100%;text-align: right;">
<el-button size="small" class="button-new-tag" @click="submit" style="margin-right: 5px;">提交信息</el-button>
</div>
</div>
</template>
<script>
export default {
name: 'elClick',
components: {},
props: ['actionName', 'actionType'],
data() {
return {
elementInfo: {},
actionConfig: {
"Target": {//点击的目标元素配置信息
"Type": "Id",//查找元素的方式，通过Id查找
"Selector": "su",//Id名称
"Timeout": 5000//查询时间
},
"Name": "百度一下",//动作名称
"Alias": "el.click"//动作类型
},
selectDisabled: true
}
},
created() { },
mounted() {
// 在组件挂载后调用selectElement来添加事件监听器
this.selectElement();
},
beforeDestroy() {
// 在组件销毁前移除事件监听器
document.removeEventListener('contextmenu', this.contextMenuHandler);
},
watch: {},
computed: {},
methods: {
submit() {
console.log(this.actionConfig)
// 防止父级改变，子级未改变重新赋值
this.actionConfig.Name = this.actionName
this.actionConfig.Alias = this.actionType
this.$emit('dataChanged', this.actionConfig);
},
}
}
</script>
<style scoped></style>
\ No newline at end of file
src/components/index.js
import elRightClick from './elRightClick.vue';
import elClick from './elClick.vue';
import onSelect from './onSelect.vue';
import wait from './wait.vue';
import loopClick from './loopClick.vue'
......@@ -12,4 +13,4 @@ import actions from './actions.vue';
import onInput from './onInput.vue'
// import ComponentC from './ComponentC.vue';
export { elRightClick, onSelect, wait, onInput, loopClick, collectSingleElements, pageClose, mouseMove, pageJavascipt, collectionTable, submit, actions };
\ No newline at end of file
export { elRightClick, elClick, onSelect, wait, onInput, loopClick, collectSingleElements, pageClose, mouseMove, pageJavascipt, collectionTable, submit, actions };
\ No newline at end of file
src/main.js
......@@ -18,7 +18,7 @@ Vue.use(ElementUI);
let toolkit
let timer;
//生成Toolkit
function generateToolkit () {
function generateToolkit() {
// global.app = new Vue(ToolKit);
let h = $(".tooldrag").height();
// console.log(h)
......@@ -60,13 +60,13 @@ function generateToolkit () {
});
// 拖拽右下角改变大小
const wrapperToolkit = document.getElementById('wrapperToolkit');
const EasySpiderResizer = document.getElementById('EasySpiderResizer');
// console.log(EasySpiderResizer)
const KiviiWebTool = document.getElementById('KiviiWebTool');
// console.log(KiviiWebTool)
let mousedown = false;
let startX, startY, startWidth, startHeight;
EasySpiderResizer.addEventListener('mousedown', e => {
KiviiWebTool.addEventListener('mousedown', e => {
mousedown = true;
startX = e.clientX;
startY = e.clientY;
......@@ -116,37 +116,37 @@ function generateToolkit () {
// window.onload = function () {
let mousemovebind = false; //如果出现元素默认绑定了mousemove事件导致匹配不到元素的时候，开启第二种模式获得元素
let mousemovebind = false; //如果出现元素默认绑定了mousemove事件导致匹配不到元素的时候，开启第二种模式获得元素
toolkit = document.createElement("div");
toolkit.classList = "tooltips"; //添加样式
toolkit.setAttribute("id", "wrapperToolkit");
let tooltips = false; //标记鼠标是否在提示框上
toolkit = document.createElement("div");
toolkit.classList = "tooltips"; //添加样式
toolkit.setAttribute("id", "wrapperToolkit");
let tooltips = false; //标记鼠标是否在提示框上
//右键菜单屏蔽
document.oncontextmenu = () => false;
//右键菜单屏蔽
document.oncontextmenu = () => false;
toolkit.addEventListener("mousedown", function (e) { e.stopPropagation(); }); //重新定义toolkit里的点击事件
toolkit.addEventListener("mousedown", function (e) { e.stopPropagation(); }); //重新定义toolkit里的点击事件
document.body.append(toolkit);
console.log(document)
document.body.append(toolkit);
console.log(document)
$(".tooltips").html(`
$(".tooltips").html(`
<div id="k5WebDriver"></div>
`);
// global.app = new Vue(ToolKit);
new Vue({
// global.app = new Vue(ToolKit);
new Vue({
el: '#k5WebDriver',
router,
render: h => h(App)
})
})
document.addEventListener("DOMContentLoaded", function () {
document.addEventListener("DOMContentLoaded", function () {
// 在 DOMContentLoaded 事件触发后执行的代码
var body = document.body;
// 执行其他操作
});
generateToolkit();
});
generateToolkit();
// }
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment