logic_CN.js 14 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335
  1. exampleMsg = { //示例消息
  2. "type": 0, //消息类型,1代表增加操作
  3. "data": {
  4. "option": 1, //增加选项
  5. "parameters": { //传入的参数
  6. "url": "https://www.baidu.com"
  7. }
  8. }
  9. }
  10. console.log(JSON.stringify(exampleMsg));
  11. ws = new WebSocket("ws://localhost:8084");
  12. ws.onopen = function() {
  13. // Web Socket 已连接上,使用 send() 方法发送数据
  14. console.log("已连接");
  15. message = {
  16. type: 0, //消息类型,0代表链接操作
  17. message: {
  18. id: 2, //socket id
  19. }
  20. };
  21. this.send(JSON.stringify(message));
  22. };
  23. ws.onclose = function() {
  24. // 关闭 websocket
  25. console.log("连接已关闭...");
  26. };
  27. var ttt;
  28. ws.onmessage = function(evt) {
  29. evt = JSON.parse(evt.data);
  30. console.log(evt);
  31. if (evt["type"] == "special") { //如果不是特殊处理的话,默认全部是增加元素操作
  32. } else {
  33. handleAddElement(evt); //处理增加元素操作
  34. }
  35. };
  36. function handleAddElement(msg) {
  37. if (msg["type"] == "openPage") {
  38. addElement(1, msg);
  39. } else if (msg["type"] == "InputText") {
  40. addElement(4, msg);
  41. } else if (msg["type"] == "singleClick") {
  42. addElement(2, msg);
  43. } else if (msg["type"] == "loopClickSingle") {
  44. addElement(8, msg);
  45. addElement(2, msg);
  46. app._data.nowArrow["position"] = -1; //循环点击单个元素,下一个要插入的位置一般在元素上方
  47. } else if (msg["type"] == "loopClickEvery") {
  48. addElement(8, msg);
  49. addElement(2, msg);
  50. } else if (msg["type"] == "singleCollect" || msg["type"] == "multiCollectNoPattern") {
  51. if (app._data.nowNode != null && app._data["nowNode"]["option"] == 3) { //如果当前点击的动作就是提取数据
  52. for (let i = 0; i < msg["parameters"].length; i++) {
  53. app._data["nowNode"]["parameters"]["paras"].push(msg["parameters"][i]);
  54. }
  55. app._data.paras.parameters = app._data["nowNode"]["parameters"]["paras"];
  56. } else {
  57. addElement(3, msg);
  58. }
  59. notifyParameterNum(msg["parameters"].length); //通知浏览器端参数的个数变化
  60. } else if (msg["type"] == "multiCollectWithPattern") {
  61. addElement(8, msg);
  62. addElement(3, msg);
  63. notifyParameterNum(msg["parameters"].length); //通知浏览器端参数的个数变化
  64. }
  65. }
  66. function notifyParameterNum(num) {
  67. parameterNum += num;
  68. let message = {
  69. type: 3, //消息类型,3代表元素增加事件
  70. from: 1, //0代表从浏览器到流程图,1代表从流程图到浏览器
  71. message: { "pipe": JSON.stringify({ "type": 0, "value": parameterNum }) } // {}全选{BS}退格
  72. };
  73. window.ws.send(JSON.stringify(message));
  74. }
  75. // function isExtract() { //检测当前锚点之前的元素是否为提取数据字段
  76. // if (app.$data.nowArrow["position"] == -1) {
  77. // return false;
  78. // } else if (nodeList[nodeList[app.$data.nowArrow["pId"]].sequence[app.$data.nowArrow["position"]]]["option"] == 3) {
  79. // return true;
  80. // } else {
  81. // return false;
  82. // }
  83. // }
  84. // 流程图元素点击后的处理逻辑
  85. function handleElement() {
  86. app._data["nowNode"] = nodeList[vueData.nowNodeIndex];
  87. app._data["nodeType"] = app._data["nowNode"]["option"];
  88. app._data.useLoop = app._data["nowNode"]["parameters"]["useLoop"];
  89. if (app._data["nodeType"] == 8) {
  90. app._data.loopType = app._data["nowNode"]["parameters"]["loopType"];
  91. } else if (app._data["nodeType"] == 3) {
  92. app._data.paraIndex = 0; //参数索引初始化
  93. app._data.paras.parameters = app._data["nowNode"]["parameters"]["paras"];
  94. } else if (app._data["nodeType"] == 10) {
  95. app._data.TClass = app._data["nowNode"]["parameters"]["class"];
  96. }
  97. }
  98. // 新增元素时的默认参数处理
  99. function addParameters(t) {
  100. t["parameters"] = {
  101. history: 1,
  102. tabIndex: 0,
  103. useLoop: false, //是否使用循环中的元素
  104. xpath: "", //xpath
  105. wait: 0, //执行后等待
  106. }; //公共参数处理
  107. if (t.option == 1) {
  108. t["parameters"]["url"] = "about:blank";
  109. t["parameters"]["links"] = "about:blank";
  110. t["parameters"]["scrollType"] = 0; //滚动类型,0不滚动,1向下滚动1屏,2滚动到底部
  111. t["parameters"]["scrollCount"] = 0; //滚动次数
  112. } else if (t.option == 2) { //点击元素
  113. t["parameters"]["scrollType"] = 0; //滚动类型,0不滚动,1向下滚动1屏,2滚动到底部
  114. t["parameters"]["scrollCount"] = 0; //滚动次数
  115. t["parameters"]["paras"] = []; //默认参数列表
  116. } else if (t.option == 3) { //提取数据
  117. t["parameters"]["paras"] = []; //默认参数列表
  118. } else if (t.option == 4) { //输入文字
  119. t["parameters"]["value"] = "";
  120. } else if (t.option == 8) { //循环
  121. t["parameters"]["scrollType"] = 0; //滚动类型,0不滚动,1向下滚动1屏,2滚动到底部
  122. t["parameters"]["scrollCount"] = 0; //滚动次数
  123. t["parameters"]["loopType"] = 0; //默认循环类型
  124. t["parameters"]["xpath"] = "";
  125. t["parameters"]["pathList"] = "";
  126. t["parameters"]["textList"] = "";
  127. t["parameters"]["exitCount"] = 0; //执行多少次后退出循环,0代表不设置此条件
  128. t["parameters"]["historyWait"] = 2; //历史记录回退时间,用于循环点击每个链接的情况下点击链接后不打开新标签页的情况
  129. } else if (t.option == 9) { //条件
  130. } else if (t.option == 10) { //条件分支
  131. t["parameters"]["class"] = 0; //0代表什么条件都没有,1代表当前页面包括文本,2代表当前页面包括元素,3代表当前循环包括文本,4代表当前循环包括元素
  132. t["parameters"]["value"] = ""; //相关值
  133. }
  134. }
  135. //修改元素参数
  136. function modifyParameters(t, para) {
  137. t["parameters"]["history"] = para["history"];
  138. t["parameters"]["tabIndex"] = para["tabIndex"];
  139. if (t.option == 1) {
  140. t["parameters"]["url"] = para["url"];
  141. t["parameters"]["links"] = para["links"];
  142. $("#serviceDescription").val(para["url"]);
  143. $("#url").val(para["url"]);
  144. } else if (t.option == 4) { //输入文字事件
  145. t["parameters"]["value"] = para["value"];
  146. t["parameters"]["xpath"] = para["xpath"];
  147. } else if (t.option == 2) { //鼠标点击事件
  148. t["parameters"]["xpath"] = para["xpath"];
  149. t["parameters"]["useLoop"] = para["useLoop"];
  150. } else if (t.option == 8) { //循环事件
  151. t["parameters"]["loopType"] = para["loopType"];
  152. t["parameters"]["xpath"] = para["xpath"];
  153. if (para["nextPage"]) { //循环点击下一页的情况下
  154. t["title"] = "循环点击下一页"
  155. } else {
  156. t["title"] = "循环"
  157. }
  158. if (para["loopType"] == 2) //如果是固定元素列表
  159. {
  160. t["parameters"]["pathList"] = para["pathList"].join("\n");
  161. }
  162. } else if (t.option == 3) { //采集数据
  163. for (let i = 0; i < para["parameters"].length; i++) {
  164. para["parameters"][i]["default"] = ""; //找不到元素时候的默认值
  165. }
  166. t["parameters"]["paras"] = para["parameters"];
  167. }
  168. }
  169. //点击确定按钮时的处理
  170. $("#confirm").mousedown(function() {
  171. refresh(false);
  172. app.$data.nowArrow["num"]++; //改变元素的值,通知画图,重新对锚点画图
  173. let tnodes = document.getElementsByClassName("clk");
  174. let position = nodeList[vueData.nowNodeIndex]["position"];
  175. let pid = nodeList[vueData.nowNodeIndex]["parentId"];
  176. for (let i = 0; i < tnodes.length; i++) {
  177. if (position == tnodes[i].getAttribute("position") && pid == tnodes[i].getAttribute("pId")) {
  178. tnodes[i].style.borderColor = "blue"; // 点击了确定按钮之后需要重新对选中的颜色画框
  179. nowNode = tnodes[i];
  180. break;
  181. }
  182. }
  183. });
  184. //获取url中的参数
  185. function getUrlParam(name) {
  186. var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)"); //构造一个含有目标参数的正则表达式对象
  187. var r = window.location.search.substr(1).match(reg); //匹配目标参数
  188. if (r != null) return unescape(r[2]);
  189. return "";
  190. }
  191. var sId = getUrlParam('id');
  192. var backEndAddressServiceWrapper = getUrlParam("backEndAddressServiceWrapper");
  193. function saveService(type) {
  194. var serviceId = $("#serviceId").val();
  195. var text = "确认要保存服务吗?";
  196. if (type == 1) { //服务另存为
  197. serviceId = -1;
  198. text = "确认要另存为服务吗?";
  199. }
  200. if (confirm(text)) {
  201. let serviceName = $("#serviceName").val();
  202. let url = $("#url").val();
  203. let serviceDescription = $("#serviceDescription").val();
  204. let inputParameters = [];
  205. let outputParameters = [];
  206. let outputNames = [];
  207. let inputIndex = 0;
  208. let outputIndex = 0;
  209. let links = ""; //记录所有的link
  210. let containJudge = false; //是否含有判断语句
  211. for (let i = 1; i < nodeList.length; i++) {
  212. if (nodeList[i]["id"] != -1) { //已经被删除的节点不进行统计
  213. if (nodeList[i]["option"] == 1) //打开网页操作,统计输入框输入操作
  214. {
  215. if (!nodeList[i]["parameters"]["useLoop"]) //如果不是使用循环里的文本
  216. {
  217. inputParameters.push({
  218. id: inputIndex,
  219. name: "urlList_" + inputIndex++,
  220. nodeId: i, //记录操作位于的节点位置,重要!!!
  221. nodeName: nodeList[i]["title"],
  222. value: nodeList[i]["parameters"]["links"],
  223. desc: "要采集的网址列表,多行以\\n分开",
  224. type: "string",
  225. exampleValue: "https://www.jd.com"
  226. });
  227. links = nodeList[i]["parameters"]["links"];
  228. }
  229. } else if (nodeList[i]["option"] == 4) //输入文字操作
  230. {
  231. if (!nodeList[i]["parameters"]["useLoop"]) //如果不是使用循环里的文本
  232. {
  233. inputParameters.push({
  234. id: inputIndex,
  235. name: "inputText_" + inputIndex++,
  236. nodeName: nodeList[i]["title"],
  237. nodeId: i,
  238. desc: "要输入的文本,如京东搜索框输入:电脑",
  239. type: "string",
  240. exampleValue: nodeList[i]["parameters"]["value"],
  241. value: nodeList[i]["parameters"]["value"],
  242. });
  243. }
  244. } else if (nodeList[i]["option"] == 8) //循环操作
  245. {
  246. if (parseInt(nodeList[i]["parameters"]["loopType"]) > 2) //循环中的循环输入文本或循环输入网址
  247. inputParameters.push({
  248. id: inputIndex,
  249. name: "loopText_" + inputIndex++,
  250. nodeId: i,
  251. nodeName: nodeList[i]["title"],
  252. desc: "要输入的文本/网址,多行以\\n分开",
  253. type: "string",
  254. exampleValue: nodeList[i]["parameters"]["textList"],
  255. value: nodeList[i]["parameters"]["textList"],
  256. });
  257. } else if (nodeList[i]["option"] == 3) //提取数据操作
  258. {
  259. for (let j = 0; j < nodeList[i]["parameters"]["paras"].length; j++) {
  260. if (outputNames.indexOf(nodeList[i]["parameters"]["paras"][j]["name"]) < 0) { //参数名称还未被添加
  261. outputNames.push(nodeList[i]["parameters"]["paras"][j]["name"]);
  262. outputParameters.push({
  263. id: outputIndex++,
  264. name: nodeList[i]["parameters"]["paras"][j]["name"],
  265. desc: nodeList[i]["parameters"]["paras"][j]["desc"],
  266. type: "string",
  267. exampleValue: nodeList[i]["parameters"]["paras"][j]["exampleValues"][0]["value"],
  268. });
  269. }
  270. }
  271. } else if (nodeList[i]["option"] == 9) //条件判断
  272. {
  273. containJudge = true;
  274. }
  275. }
  276. }
  277. let serviceInfo = {
  278. "id": parseInt(serviceId),
  279. "name": serviceName,
  280. "url": url,
  281. "links": links,
  282. "containJudge": containJudge,
  283. "desc": serviceDescription,
  284. "inputParameters": inputParameters,
  285. "outputParameters": outputParameters,
  286. "graph": nodeList, //图结构要存储下来
  287. };
  288. $.post(backEndAddressServiceWrapper + "/backEnd/manageService", { paras: JSON.stringify(serviceInfo) }, function(result) { $("#serviceId").val(parseInt(result)) });
  289. // alert("保存成功!");
  290. $('#myModal').modal('hide');
  291. $("#tip").slideDown(); //提示框
  292. fadeout = setTimeout(function() {
  293. $("#tip").slideUp();
  294. }, 2000);
  295. }
  296. }
  297. //点击保存服务按钮时的处理
  298. $("#saveButton").mousedown(function() {
  299. saveService(0);
  300. });
  301. //点击另存为服务按钮时的处理
  302. $("#saveAsButton").mousedown(function() {
  303. saveService(1);
  304. });
  305. if (sId != null && sId != -1) //加载服务
  306. {
  307. $.get(backEndAddressServiceWrapper + "/backEnd/queryService?id=" + sId, function(result) {
  308. nodeList = result["graph"];
  309. app.$data.list.nl = nodeList;
  310. $("#serviceName").val(result["name"]);
  311. $("#serviceId").val(result["id"]);
  312. $("#url").val(result["url"]);
  313. $("#serviceDescription").val(result["desc"]);
  314. refresh();
  315. });
  316. } else {
  317. refresh(); //新增服务
  318. }