简柏林 / thingskit-scada · Commits

Commit 7cc80981441cef2bfe743132f9e4177c9b8ab175

Authored by sqy
1 parent 31166204

feat:添加图形绑定的的一些事件入库

Inline Side-by-side
Showing 1 changed file with 481 additions and 362 deletions
... ... @@ -4880,17 +4880,17 @@ DataFormatPanel.prototype.addDataFont = function (container) {
4880 4880
4881 4881 // 获取url的请求参数函数
4882 4882 function getRequest() {
4883   - var url = location.search; //获取url中"?"符后的字串
4884   - var theRequest = new Object();
4885   - if (url.indexOf("?") != -1) {
4886   - var str = url.substring(1);
4887   - strs = str.split("&");
4888   - for(var i = 0; i < strs.length; i ++) {
4889   - theRequest[strs[i].split("=")[0]]=decodeURI(strs[i].split("=")[1]);
4890   - }
  4883 + var url = location.search; //获取url中"?"符后的字串
  4884 + var theRequest = new Object();
  4885 + if (url.indexOf("?") != -1) {
  4886 + var str = url.substring(1);
  4887 + strs = str.split("&");
  4888 + for (var i = 0; i < strs.length; i++) {
  4889 + theRequest[strs[i].split("=")[0]] = decodeURI(strs[i].split("=")[1]);
  4890 + }
4891 4891 }
4892   - return theRequest;
4893   - }
  4892 + return theRequest;
  4893 + }
4894 4894
4895 4895 var dataSourceTitle = this.createTitle("数据源");
4896 4896 dataSourceTitle.style.padding = "6px 0px 6px 6px";
... ... @@ -4916,26 +4916,25 @@ DataFormatPanel.prototype.addDataFont = function (container) {
4916 4916 treeUl.setAttribute("id", "organizationTree");
4917 4917 organizationTree.appendChild(treeUl);
4918 4918 container.appendChild(organizationTree);
4919   -
  4919 + let treeList = [];
4920 4920 // 获取组织数据
4921 4921 (function getTreeList() {
4922 4922 //调用API,获取保存的内容
4923   - DefHttp()
4924   - .get("/yt/organization/me/list")
4925   - .then(function (response) {
4926   - //实例化树形菜单
4927   - $("#organizationTree").tree({
4928   - data: response.data,
4929   - lines: true,
4930   - formatter(node) {
4931   - return node.name;
4932   - },
4933   - onClick(node) {
4934   - // 获取组织下的设备
4935   - getDevicesByOrganizationId(node.id);
4936   - },
4937   - });
  4923 + defHttp.get("/yt/organization/me/list").then(function (res) {
  4924 + //实例化树形菜单
  4925 + treeList = res;
  4926 + $("#organizationTree").tree({
  4927 + data: res,
  4928 + lines: true,
  4929 + formatter(node) {
  4930 + return node.name;
  4931 + },
  4932 + onClick(node) {
  4933 + // 获取组织下的设备
  4934 + getDevicesByOrganizationId(node.id);
  4935 + },
4938 4936 });
  4937 + });
4939 4938 })();
4940 4939
4941 4940 // 选择设备
... ... @@ -4949,21 +4948,33 @@ DataFormatPanel.prototype.addDataFont = function (container) {
4949 4948 deviceSelect.setAttribute("id", "device");
4950 4949 deviceStylePanel.appendChild(deviceSelect);
4951 4950
  4951 + // 获取组织下的所有直连设备和网关子设备
  4952 + async function getDevicesByOrganizationId_DIRECT_CONNECTIONAndSENSOR(
  4953 + organizationId
  4954 + ) {
  4955 + const res1 = await defHttp.get(
  4956 + `/yt/device/list/DIRECT_CONNECTION?organizationId=${organizationId}`
  4957 + );
  4958 + const res2 = await defHttp.get(
  4959 + `/yt/device/list/SENSOR?organizationId=${organizationId}`
  4960 + );
  4961 + return [...res1, ...res2];
  4962 + }
  4963 +
4952 4964 // 根据组织id获取组织下的设备列表--在点击组织时调用
4953   - function getDevicesByOrganizationId(organizationId) {
  4965 + async function getDevicesByOrganizationId(organizationId) {
4954 4966 if (organizationId) {
4955   - DefHttp()
4956   - .get(`/yt/device?page=1&pageSize=20&organizationId=${organizationId}`)
4957   - .then(function (response) {
4958   - $("#device").combobox({
4959   - data: response.data.items,
4960   - valueField: "tbDeviceId",
4961   - textField: "name",
4962   - onChange(newValue) {
4963   - getDeviceAttribute(newValue);
4964   - },
4965   - });
4966   - });
  4967 + const items = await getDevicesByOrganizationId_DIRECT_CONNECTIONAndSENSOR(
  4968 + organizationId
  4969 + );
  4970 + $("#device").combobox({
  4971 + data: items,
  4972 + valueField: "tbDeviceId",
  4973 + textField: "name",
  4974 + onChange(newValue) {
  4975 + getDeviceAttribute(newValue);
  4976 + },
  4977 + });
4967 4978 }
4968 4979 }
4969 4980
... ... @@ -4981,10 +4992,10 @@ DataFormatPanel.prototype.addDataFont = function (container) {
4981 4992 // 获取设备下的属性-key--在改变设备时调用
4982 4993 function getDeviceAttribute(tbDeviceId) {
4983 4994 if (tbDeviceId) {
4984   - DefHttp()
  4995 + defHttp
4985 4996 .get(`/plugins/telemetry/DEVICE/${tbDeviceId}/keys/timeseries`)
4986 4997 .then(function (response) {
4987   - const mapRes = response.data.map((item) => {
  4998 + const mapRes = response.map((item) => {
4988 4999 return {
4989 5000 value: item,
4990 5001 text: item,
... ... @@ -5080,7 +5091,6 @@ DataFormatPanel.prototype.addDataFont = function (container) {
5080 5091
5081 5092 genarateCheckbox(dynamicEffect);
5082 5093
5083   -
5084 5094 // 解构全局属性layui要用到的模块
5085 5095 const { layer, form } = layui;
5086 5096
... ... @@ -5110,260 +5120,178 @@ DataFormatPanel.prototype.addDataFont = function (container) {
5110 5120 let currentPageId = ui.currentPage.node;
5111 5121 // 图形的id
5112 5122 let graphId = ss.vertices[0].id;
5113   - console.log('需要的值',configurationId,currentPageId.id,graphId,)
  5123 + // 事件类型
5114 5124 const eventType = {
5115   - 'DOWN':'按下',
5116   - 'UP':'抬起',
5117   - 'SINGLE':'单击',
5118   - 'DOUBLE':'双击',
5119   - }
  5125 + DOWN: "按下",
  5126 + UP: "抬起",
  5127 + SINGLE: "单击",
  5128 + DOUBLE: "双击",
  5129 + };
  5130 + // 动画类型
  5131 + const animType = {
  5132 + FLASH: "闪烁",
  5133 + DISPLAY: "显示/隐藏",
  5134 + ROTATE: "旋转",
  5135 + };
5120 5136
5121 5137 //按下和抬起的事件处理函数
5122   - function handlePressANDupliftEvent(event) {
  5138 + async function handlePressANDupliftEvent(event) {
  5139 + // 获取当前节点（图形）的信息
  5140 + const res = await defHttp.get(`/yt/configuration/node/NODE/${graphId}`);
  5141 + // 查找节点内容
  5142 + const findContent = res.event?.find((item) => {
  5143 + if (item.content.title === event.data.type) return item;
  5144 + });
  5145 + console.log(findContent);
  5146 + // 当前租户的根组织id
  5147 + const rootOrgId = treeList[0].id;
  5148 + console.log(rootOrgId);
  5149 + // 获取根组织下的所有设备
  5150 + async function getOrgAllDevices() {
  5151 + return Promise.all([
  5152 + defHttp.get(
  5153 + `/yt/device/list/DIRECT_CONNECTION?organizationId=${rootOrgId}`
  5154 + ),
  5155 + defHttp.get(`/yt/device/list/GATEWAY?organizationId=${rootOrgId}`),
  5156 + defHttp.get(`/yt/device/list/SENSOR?organizationId=${rootOrgId}`),
  5157 + ]);
  5158 + }
  5159 + const deviceList = await getOrgAllDevices();
  5160 + console.log(deviceList.flat(1))
5123 5161 // 打开弹窗
5124 5162 layer.open({
5125 5163 title: "创建交互",
5126 5164 content: `
5127   - <form class="layui-form">
5128   - <div style="width:400px">
5129   - <div class="layui-form-item">
5130   - <label class="layui-form-label">事件</label>
5131   - <div class="layui-input-block">
5132   - <input type="text" name="title" disabled class="layui-input" value="${event.data.type}">
5133   - </div>
5134   - </div>
5135   - <div class="layui-form-item">
5136   - <label class="layui-form-label">动作</label>
5137   - <div class="layui-input-block">
5138   - <select name="city" lay-verify="required">
5139   - <option value="0" selected>给变量赋值</option>
5140   - </select>
5141   - </div>
5142   - </div>
5143   - <div class="layui-form-item">
5144   - <label class="layui-form-label">类型</label>
5145   - <div class="layui-input-block">
5146   - <input type="radio" name="type" value="1" title="联网设备" checked>
5147   - <input type="radio" name="type" value="2" title="产品/场景" disabled >
5148   - </div>
5149   - </div>
5150   - </div>
5151   - <div style="height:200px;overflow-y:scroll" id="tableContent">
5152   -
5153   - <div style="display:flex;justify-content:center;">
5154   - <button type="button" class="layui-btn layui-btn-primary layui-border-blue" id="addData">添加一条</button>
5155   - </div>
5156   - </div>
5157   - </form>
5158   - `,
5159   - area: ["800px", "500px"],
  5165 + <form class="layui-form" lay-filter="formModal">
  5166 + <div style="width:400px">
  5167 + <div class="layui-form-item">
  5168 + <label class="layui-form-label">事件</label>
  5169 + <div class="layui-input-block">
  5170 + <input type="text" name="event" class="layui-input" value="${event.data.type}" disabled>
  5171 + </div>
  5172 + </div>
  5173 + <div class="layui-form-item">
  5174 + <label class="layui-form-label">动作</label>
  5175 + <div class="layui-input-block">
  5176 + <select name="action" lay-verify="required">
  5177 + <option value="0" selected>给变量赋值</option>
  5178 + </select>
  5179 + </div>
  5180 + </div>
  5181 + <div class="layui-form-item">
  5182 + <label class="layui-form-label">类型</label>
  5183 + <div class="layui-input-block">
  5184 + <input type="radio" name="type" value="1" title="联网设备" checked>
  5185 + <input type="radio" name="type" value="2" title="产品/场景" disabled>
  5186 + </div>
  5187 + </div>
  5188 + </div>
  5189 + <div style="height:255px;overflow-y:scroll" id="tableContent">
  5190 + <div style="display:flex;justify-content:center;">
  5191 + <button type="button" class="layui-btn layui-btn-primary layui-border-blue" id="addData">添加一条</button>
  5192 + </div>
  5193 + </div>
  5194 + </form>
  5195 + `,
  5196 + area: ["800px", "600px"],
5160 5197 btn: ["保存", "取消"],
5161   - yes(index) {
  5198 + shade: ["0.7", "#fafafa"],
  5199 + async yes(index) {
  5200 + // 遍历表格数据
  5201 + const content = [];
  5202 + for (let item of $("#tableBody tr")) {
  5203 + content.push({
  5204 + min: item.children[0].children[0].value,
  5205 + max: item.children[1].children[0].value,
  5206 + });
  5207 + }
  5208 + // 获取其他数据
  5209 + const formModal = {
  5210 + ...form.val("formModal"),
  5211 + configurationId,
  5212 + contentId: currentPageId.id,
  5213 + id: graphId,
  5214 + condition: {
  5215 + content,
  5216 + },
  5217 + };
  5218 + await defHttp.post("/yt/configuration/node/act", formModal);
5162 5219 layer.close(index);
5163 5220 },
5164 5221 btn2(index) {
5165 5222 layer.close(index);
5166 5223 },
5167   - shade: ["0.7", "#fafafa"],
5168 5224 });
5169 5225
5170 5226 // 在tableContent最前面添加元素
5171 5227 $("#tableContent").prepend(`
5172   - <table class="layui-table">
5173   - <colgroup>
5174   - <col width="210">
5175   - <col width="210">
5176   - <col width="210">
5177   - <col width="60">
5178   - </colgroup>
5179   - <thead>
5180   - <tr>
5181   - <th style="text-align:center">选择设备</th>
5182   - <th style="text-align:center">变量</th>
5183   - <th style="text-align:center">下发值</th>
5184   - <th style="text-align:center">操作</th>
5185   - </tr>
5186   - </thead>
5187   - <tbody id="tableBody">
5188   - <tr>
5189   - <td>
5190   - <select name="city" lay-verify="required">
5191   - <option value="0">上海</option>
5192   - <option value="1">北京</option>
5193   - </select>
5194   - </td>
5195   - <td>
5196   - <select name="city" lay-verify="required">
5197   - <option value="3">深圳</option>
5198   - <option value="4">杭州</option>
5199   - </select>
5200   - </td>
5201   - <td>
5202   - <input type="text" name="title" class="layui-input">
5203   - </td>
5204   - <td>
5205   - <button type="button" class="layui-btn layui-btn-primary layui-border-red deleteData">删除</button>
5206   - </td>
5207   - </tr>
5208   - </tbody>
5209   - </table>
5210   - `);
5211   - form.render();
5212   - let typeRadio = "1";
5213   - // 监听的表单radio事件
5214   - form.on("radio", function (data) {
5215   - typeRadio = data.value;
5216   - if (data.value === "1") {
5217   - $("#tableContent").children().first().remove();
5218   - $("#tableContent").prepend(`
5219   - <table class="layui-table">
  5228 + <table class="layui-table">
5220 5229 <colgroup>
5221   - <col width="210">
5222   - <col width="210">
5223   - <col width="210">
  5230 + <col>
  5231 + <col>
  5232 + <col>
  5233 + <col width="240">
5224 5234 <col width="60">
5225 5235 </colgroup>
5226 5236 <thead>
5227 5237 <tr>
5228 5238 <th style="text-align:center">选择设备</th>
  5239 + <th style="text-align:center">选择子设备</th>
5229 5240 <th style="text-align:center">变量</th>
5230 5241 <th style="text-align:center">下发值</th>
5231 5242 <th style="text-align:center">操作</th>
5232 5243 </tr>
5233 5244 </thead>
5234   - <tbody id="tableBody">
5235   - <tr>
5236   - <td>
5237   - <select name="city" lay-verify="required">
5238   - <option value="0">上海</option>
5239   - <option value="1">北京</option>
5240   - </select>
5241   - </td>
5242   - <td>
5243   - <select name="city" lay-verify="required">
5244   - <option value="3">深圳</option>
5245   - <option value="4">杭州</option>
5246   - </select>
5247   - </td>
5248   - <td>
5249   - <input type="text" name="title" class="layui-input">
5250   - </td>
5251   - <td>
5252   - <button type="button" class="layui-btn layui-btn-primary layui-border-red deleteData">删除</button>
5253   - </td>
5254   - </tr>
5255   - </tbody>
5256   - </table>
5257   - `);
5258   - } else {
5259   - $("#tableContent").children().first().remove();
5260   - $("#tableContent").prepend(`
  5245 + <tbody id="tableBody"></tbody>
  5246 + </table>
  5247 + `);
  5248 +
  5249 + // 监听的表单radio事件 （暂不实现）
  5250 + form.on("radio", function (data) {
  5251 + $("#tableContent").children().first().remove();
  5252 + $("#tableContent").prepend(`
5261 5253 <table class="layui-table">
5262   - <colgroup>
5263   - <col width="175">
5264   - <col width="175">
5265   - <col width="175">
5266   - <col width="175">
5267   - <col width="60">
5268   - </colgroup>
5269   - <thead>
5270   - <tr>
5271   - <th style="text-align:center">产品/场景</th>
5272   - <th style="text-align:center">数据源</th>
5273   - <th style="text-align:center">变量</th>
5274   - <th style="text-align:center">下发值</th>
5275   - <th style="text-align:center">操作</th>
5276   - </tr>
5277   - </thead>
5278   - <tbody id="tableBody">
  5254 + <colgroup>
  5255 + <col>
  5256 + <col>
  5257 + <col width="60">
  5258 + </colgroup>
  5259 + <thead>
  5260 + <tr>
  5261 + <th style="text-align:center">最小值(>=)</th>
  5262 + <th style="text-align:center">最大值(<=)</th>
  5263 + <th style="text-align:center">操作</th>
  5264 + </tr>
  5265 + </thead>
  5266 + <tbody id="tableBody"></tbody>
  5267 + </table>
  5268 + `);
  5269 + form.render();
  5270 + });
  5271 + // 添加一条
  5272 + $("#addData").click(() => {
  5273 + $("#tableBody").append(`
5279 5274 <tr>
5280 5275 <td>
5281   - <select name="city" lay-verify="required">
5282   - <option value="0">上海</option>
5283   - <option value="1">北京</option>
  5276 + <select name="device" lay-verify="required" id="deviceSelect">
5284 5277 </select>
5285 5278 </td>
5286 5279 <td>
5287   - <select name="city" lay-verify="required">
5288   - <option value="3">深圳</option>
5289   - <option value="4">杭州</option>
  5280 + <select name="childDevice" lay-verify="required" id="childSelect">
5290 5281 </select>
5291 5282 </td>
5292 5283 <td>
5293   - <select name="city" lay-verify="required">
5294   - <option value="0">上海</option>
5295   - <option value="1">北京</option>
  5284 + <select name="veriable" lay-verify="required" id="veriableSelect">
5296 5285 </select>
5297 5286 </td>
5298 5287 <td>
5299   - <input type="text" name="title" class="layui-input">
  5288 + <textarea placeholder="请输入命令" class="layui-textarea" name="value"></textarea>
5300 5289 </td>
5301 5290 <td>
5302 5291 <button type="button" class="layui-btn layui-btn-primary layui-border-red deleteData">删除</button>
5303 5292 </td>
5304 5293 </tr>
5305   - </tbody>
5306   - </table>
5307   - `);
5308   - }
5309   - form.render();
5310   - });
5311   - // 添加一条
5312   - $("#addData").click(() => {
5313   -
5314   - if (typeRadio === "1") {
5315   - $("#tableBody").append(`
5316   - <tr>
5317   - <td>
5318   - <select name="city" lay-verify="required">
5319   - <option value="0">上海</option>
5320   - <option value="1">北京</option>
5321   - </select>
5322   - </td>
5323   - <td>
5324   - <select name="city" lay-verify="required">
5325   - <option value="3">深圳</option>
5326   - <option value="4">杭州</option>
5327   - </select>
5328   - </td>
5329   - <td>
5330   - <input type="text" name="title" class="layui-input">
5331   - </td>
5332   - <td>
5333   - <button type="button" class="layui-btn layui-btn-primary layui-border-red deleteData">删除</button>
5334   - </td>
5335   - </tr>
5336   - `);
5337   - } else {
5338   - $("#tableBody").append(`
5339   - <tr>
5340   - <td>
5341   - <select name="city" lay-verify="required">
5342   - <option value="0">上海</option>
5343   - <option value="1">北京</option>
5344   - </select>
5345   - </td>
5346   - <td>
5347   - <select name="city" lay-verify="required">
5348   - <option value="3">深圳</option>
5349   - <option value="4">杭州</option>
5350   - </select>
5351   - </td>
5352   - <td>
5353   - <select name="city" lay-verify="required">
5354   - <option value="3">深圳</option>
5355   - <option value="4">杭州</option>
5356   - </select>
5357   - </td>
5358   - <td>
5359   - <input type="text" name="title" class="layui-input">
5360   - </td>
5361   - <td>
5362   - <button type="button" class="layui-btn layui-btn-primary layui-border-red deleteData">删除</button>
5363   - </td>
5364   - </tr>
5365   - `);
5366   - }
  5294 + `);
5367 5295 form.render();
5368 5296 // 为添加的每一行绑定删除当前行的事件
5369 5297 $(".deleteData").click(function () {
... ... @@ -5375,10 +5303,89 @@ DataFormatPanel.prototype.addDataFont = function (container) {
5375 5303 $(".deleteData").click(function () {
5376 5304 this.parentNode.parentNode.remove();
5377 5305 });
  5306 + setTimeout(async () => {
  5307 + const len = findContent?.condition?.content?.length;
  5308 + if (!len) {
  5309 + $("#tableBody").prepend(`
  5310 + <tr>
  5311 + <td>
  5312 + <select name="device" lay-verify="required" id="deviceSelect">
  5313 + </select>
  5314 + </td>
  5315 + <td>
  5316 + <select name="childDevice" lay-verify="required" id="childSelect">
  5317 + </select>
  5318 + </td>
  5319 + <td>
  5320 + <select name="veriable" lay-verify="required" id="veriableSelect">
  5321 + </select>
  5322 + </td>
  5323 + <td>
  5324 + <textarea placeholder="请输入命令" class="layui-textarea" name="value"></textarea>
  5325 + </td>
  5326 + <td>
  5327 + <button type="button" class="layui-btn layui-btn-primary layui-border-red deleteData">删除</button>
  5328 + </td>
  5329 + </tr>
  5330 + `);
  5331 +
  5332 + $(".deleteData").click(function () {
  5333 + this.parentNode.parentNode.remove();
  5334 + });
  5335 + form.render();
  5336 + return;
  5337 + }
  5338 +
  5339 +
  5340 + // form.val("formModal", { deviceId: findAnim?.deviceId });
  5341 + // if (!findAnim?.deviceId) return;
  5342 + // const res = await defHttp.get(
  5343 + // `/plugins/telemetry/DEVICE/${findAnim?.deviceId}/keys/timeseries`
  5344 + // );
  5345 + // // 先清空子元素
  5346 + // $("#attrSelect").empty();
  5347 + // $("#attrSelect").append(`<option value="">请选择属性</option>`);
  5348 + // for (let item of res) {
  5349 + // // 在追加
  5350 + // $("#attrSelect").append(`<option value="${item}">${item}</option>`);
  5351 + // }
  5352 + // form.val("formModal", { attr: findAnim?.attr });
  5353 + // for (let i = 0; i < len; i++) {
  5354 + // $("#tableBody").append(`
  5355 + // <tr>
  5356 + // <td>
  5357 + // <select name="device" lay-verify="required" id="deviceSelect">
  5358 + // </select>
  5359 + // </td>
  5360 + // <td>
  5361 + // <select name="veriable" lay-verify="required" id="veriableSelect">
  5362 + // </select>
  5363 + // </td>
  5364 + // <td>
  5365 + // <textarea placeholder="请输入命令" class="layui-textarea" name="value"></textarea>
  5366 + // </td>
  5367 + // <td>
  5368 + // <button type="button" class="layui-btn layui-btn-primary layui-border-red deleteData">删除</button>
  5369 + // </td>
  5370 + // </tr>
  5371 + // `);
  5372 + // }
  5373 +
  5374 + // $(".deleteData").click(function () {
  5375 + // this.parentNode.parentNode.remove();
  5376 + // });
  5377 + // form.render();
  5378 + }, 500);
5378 5379 }
5379 5380
5380 5381 //单击和双击的事件处理函数
5381   - function handleClickANDdbClickEvent(event) {
  5382 + async function handleClickANDdbClickEvent(event) {
  5383 + // 查询节点内容
  5384 + const res = await defHttp.get(`/yt/configuration/node/NODE/${graphId}`);
  5385 +
  5386 + const findContent = res.event?.find((item) => {
  5387 + if (item.content.title === event.data.type) return item;
  5388 + });
5382 5389 // 打开弹窗
5383 5390 layer.open({
5384 5391 title: "创建交互",
... ... @@ -5395,41 +5402,47 @@ DataFormatPanel.prototype.addDataFont = function (container) {
5395 5402 <label class="layui-form-label">动作</label>
5396 5403 <div class="layui-input-block">
5397 5404 <select name="action" lay-verify="required" lay-filter="actionSelectChange">
5398   - <option value="0" selected>打开链接</option>
  5405 + <option value="0">打开链接</option>
5399 5406 <option value="1">打开页面</option>
5400   - <option value="2">给变量赋值</option>
  5407 + <option value="2" disabled>给变量赋值</option>
5401 5408 </select>
5402 5409 </div>
5403 5410 </div>
5404   - <div class="layui-form-item" id="dynamicInput">
  5411 + <div class="layui-form-item" id="dynamicInputLink">
5405 5412 <label class="layui-form-label">链接</label>
5406 5413 <div class="layui-input-block">
5407 5414 <input type="text" name="link" class="layui-input">
5408 5415 </div>
5409 5416 </div>
  5417 + <div class="layui-form-item" id="dynamicInputPage" style="display:none">
  5418 + <label class="layui-form-label">页面</label>
  5419 + <div class="layui-input-block">
  5420 + <select name="page" lay-verify="required" id="pageSelect">
  5421 + </select>
  5422 + </div>
  5423 + </div>
5410 5424 </div>
5411 5425 <div style="height:200px;overflow-y:scroll" id="tableContent">
5412   -
5413 5426 </div>
5414 5427 </form>
5415 5428 `,
5416 5429 area: ["800px", "500px"],
5417 5430 btn: ["保存", "取消"],
5418   - yes(index) {
  5431 + async yes(index) {
5419 5432 // 获取事件类型的key
5420 5433 let type = null;
5421   - for(let key in eventType){
5422   - if(eventType[key] === event.data.type){
  5434 + for (let key in eventType) {
  5435 + if (eventType[key] === event.data.type) {
5423 5436 type = key;
5424 5437 }
5425 5438 }
5426   - DefHttp().post('/yt/configuration/node/event',{
  5439 + await defHttp.post("/yt/configuration/node/event", {
5427 5440 configurationId,
5428   - contentId:currentPageId.id,
5429   - id:graphId,
  5441 + contentId: currentPageId.id,
  5442 + id: graphId,
5430 5443 type,
5431   - content:form.val('formModal')
5432   - })
  5444 + content: form.val("formModal"),
  5445 + });
5433 5446 layer.close(index);
5434 5447 },
5435 5448 btn2(index) {
... ... @@ -5437,9 +5450,27 @@ DataFormatPanel.prototype.addDataFont = function (container) {
5437 5450 },
5438 5451 shade: ["0.7", "#fafafa"],
5439 5452 });
  5453 +
  5454 + // 获取页面数组->转换为option
  5455 + for (let item of ui.pages) {
  5456 + const option = `<option value="${
  5457 + "data:page/id," + item.getId()
  5458 + }">${item.getName()}</option>`;
  5459 + $("#pageSelect").append(option);
  5460 + }
  5461 + if (findContent?.content.action === "1") {
  5462 + $("#dynamicInputLink").css({ display: "none" });
  5463 + $("#dynamicInputPage").css({ display: "block" });
  5464 + }
  5465 +
  5466 + form.val("formModal", {
  5467 + action: findContent?.content.action || "0",
  5468 + link: findContent?.content.link,
  5469 + page: findContent?.content.page,
  5470 + });
5440 5471 form.render();
5441 5472 let typeRadio = "1";
5442   - // 监听的表单radio事件
  5473 + // 监听的表单radio事件 （暂不实现）
5443 5474 form.on("radio", function (data) {
5444 5475 typeRadio = data.value;
5445 5476 if (data.value === "1") {
... ... @@ -5539,32 +5570,17 @@ DataFormatPanel.prototype.addDataFont = function (container) {
5539 5570 });
5540 5571
5541 5572 // 监听动作选择框的变化
5542   - form.on("select(actionSelectChange)", function (data) {
5543   - if (data.value === "0") {
5544   - $("#dynamicInput")
5545   - .empty()
5546   - .append(
5547   - `
5548   - <label class="layui-form-label">链接</label>
5549   - <div class="layui-input-block">
5550   - <input type="text" name="title" class="layui-input">
5551   - </div>
5552   - `
5553   - );
  5573 + form.on("select(actionSelectChange)", function ({ value }) {
  5574 + if (value === "0") {
  5575 + $("#dynamicInputPage").css({ display: "none" });
  5576 + $("#dynamicInputLink").css({ display: "block" });
  5577 +
5554 5578 $("#tableContent").empty();
5555   - } else if (data.value === "1") {
5556   - $("#dynamicInput")
5557   - .empty()
5558   - .append(
5559   - `
5560   - <label class="layui-form-label">页面</label>
5561   - <div class="layui-input-block">
5562   - <input type="text" name="title" class="layui-input">
5563   - </div>
5564   - `
5565   - );
  5579 + } else if (value === "1") {
  5580 + $("#dynamicInputLink").css({ display: "none" });
  5581 + $("#dynamicInputPage").css({ display: "block" });
5566 5582 $("#tableContent").empty();
5567   - } else if (data.value === "2") {
  5583 + } else if (value === "2") {
5568 5584 $("#dynamicInput")
5569 5585 .empty()
5570 5586 .append(
... ... @@ -5629,7 +5645,6 @@ DataFormatPanel.prototype.addDataFont = function (container) {
5629 5645 });
5630 5646 // 添加一条
5631 5647 $("#addData").click(() => {
5632   -
5633 5648 if (typeRadio === "1") {
5634 5649 $("#tableBody").append(`
5635 5650 <tr>
... ... @@ -5694,41 +5709,46 @@ DataFormatPanel.prototype.addDataFont = function (container) {
5694 5709 }
5695 5710
5696 5711 //数据动效的事件处理函数
5697   - function handleSoundEffectEvent(event) {
5698   - var zNodes = [
5699   - { id: 1, pId: 0, name: "父1 - 展开", open: true },
5700   - { id: 11, pId: 1, name: "父11 - 折叠" },
5701   - { id: 111, pId: 11, name: "叶子节点节点节点111" },
5702   - { id: 113, pId: 11, name: "叶子节点节点节点113" },
5703   - { id: 1131, pId: 113, name: "叶子节点节点节点1131" },
5704   - { id: 1132, pId: 113, name: "叶子节点节点节点1132" },
5705   - { id: 1133, pId: 113, name: "叶子节点节点节点1133" },
5706   - { id: 114, pId: 11, name: "叶子节点节点节点114" },
5707   - { id: 12, pId: 1, name: "父12 - 折叠" },
5708   - { id: 121, pId: 12, name: "叶子节点节点节点121" },
5709   - { id: 122, pId: 12, name: "叶子节点节点节点122" },
5710   - { id: 123, pId: 12, name: "叶子节点节点节点123" },
5711   - { id: 124, pId: 12, name: "叶子节点节点节点124" },
5712   - { id: 13, pId: 1, name: "父13" },
5713   - { id: 2, pId: 0, name: "父2 - 折叠" },
5714   - { id: 21, pId: 2, name: "父21 - 展开", open: true },
5715   - { id: 211, pId: 21, name: "叶子节点节点节点211" },
5716   - { id: 212, pId: 21, name: "叶子节点节点节点212" },
5717   - { id: 213, pId: 21, name: "叶子节点节点节点213" },
5718   - { id: 214, pId: 21, name: "叶子节点节点节点214" },
5719   - ];
  5712 + async function handleSoundEffectEvent(event) {
  5713 + const { act } = await defHttp.get(
  5714 + `/yt/configuration/node/NODE/${graphId}`
  5715 + );
  5716 + // 获取动画类型
  5717 + let type = null;
  5718 + for (let key in animType) {
  5719 + if (animType[key] === event.data.title) {
  5720 + type = key;
  5721 + }
  5722 + }
  5723 + // 查找对应的动画
  5724 + const findAnim = act?.find((item) => {
  5725 + if (item.type === type) return item;
  5726 + });
  5727 +
  5728 + // 树结构转为数组list
  5729 + function treeToArr(data, pId = 0, res = []) {
  5730 + data.forEach((item) => {
  5731 + res.push({ pId, id: item.id, name: item.name });
  5732 + if (item.children && item.children.length) {
  5733 + treeToArr(item.children, item.id, res);
  5734 + }
  5735 + });
  5736 + return res;
  5737 + }
  5738 + // 深拷贝一下数据并且拍平这个树形结构数据
  5739 + const flatTreeList = treeToArr(JSON.parse(JSON.stringify(treeList)));
5720 5740
5721 5741 // 打开弹窗
5722 5742 layer.open({
5723 5743 title: event.data.title,
5724 5744 content: `
5725   - <form class="layui-form">
  5745 + <form class="layui-form" lay-filter="formModal">
5726 5746 <div style="width:400px">
5727 5747 <div class="layui-form-item">
5728 5748 <label class="layui-form-label">类型</label>
5729 5749 <div class="layui-input-block">
5730 5750 <input type="radio" name="type" value="1" title="联网设备" checked>
5731   - <input type="radio" name="type" value="2" title="产品/场景" >
  5751 + <input type="radio" name="type" value="2" title="产品/场景" disabled>
5732 5752 </div>
5733 5753 </div>
5734 5754 <div class="layui-form-item">
... ... @@ -5741,10 +5761,7 @@ DataFormatPanel.prototype.addDataFont = function (container) {
5741 5761 <div class="layui-form-item">
5742 5762 <label class="layui-form-label">设备</label>
5743 5763 <div class="layui-input-block">
5744   - <select name="city" lay-verify="required">
5745   - <option value="0" selected>设备1</option>
5746   - <option value="0">设备2</option>
5747   - <option value="0">设备3</option>
  5764 + <select name="deviceId" lay-verify="required" id="deviceSelect" lay-filter="deviceSelect">
5748 5765 </select>
5749 5766 </div>
5750 5767 </div>
... ... @@ -5752,11 +5769,7 @@ DataFormatPanel.prototype.addDataFont = function (container) {
5752 5769 <div class="layui-form-item">
5753 5770 <label class="layui-form-label">属性</label>
5754 5771 <div class="layui-input-block">
5755   - <select name="city" lay-verify="required">
5756   - <option value="0" selected>属性1</option>
5757   - <option value="0">属性2</option>
5758   - <option value="0">属性3</option>
5759   - </select>
  5772 + <select name="attr" lay-verify="required" id="attrSelect"></select>
5760 5773 </div>
5761 5774 </div>
5762 5775 </div>
... ... @@ -5770,7 +5783,35 @@ DataFormatPanel.prototype.addDataFont = function (container) {
5770 5783 area: ["800px", "500px"],
5771 5784 btn: ["保存", "取消"],
5772 5785 shade: ["0.7", "#fafafa"],
5773   - yes(index) {
  5786 + async yes(index) {
  5787 + // 获取动画类型
  5788 + let type = null;
  5789 + for (let key in animType) {
  5790 + if (animType[key] === event.data.title) {
  5791 + type = key;
  5792 + }
  5793 + }
  5794 + // 遍历表格数据
  5795 + const content = [];
  5796 + for (let item of $("#tableBody tr")) {
  5797 + content.push({
  5798 + min: item.children[0].children[0].value,
  5799 + max: item.children[1].children[0].value,
  5800 + });
  5801 + }
  5802 + // 获取其他数据
  5803 + const formModal = {
  5804 + ...form.val("formModal"),
  5805 + orgId: $("#select").selectZTreeGet().id,
  5806 + configurationId,
  5807 + contentId: currentPageId.id,
  5808 + id: graphId,
  5809 + condition: {
  5810 + content,
  5811 + },
  5812 + type,
  5813 + };
  5814 + await defHttp.post("/yt/configuration/node/act", formModal);
5774 5815 layer.close(index);
5775 5816 },
5776 5817 btn2(index) {
... ... @@ -5780,16 +5821,59 @@ DataFormatPanel.prototype.addDataFont = function (container) {
5780 5821
5781 5822 $("#select")
5782 5823 .selectZTree({
5783   - data: zNodes,
  5824 + data: flatTreeList,
5784 5825 width: 290,
5785 5826 showSearch: false,
5786 5827 placeholder: "请选择组织",
5787   - onSelected(ele, value) {
5788   - console.log(value);
5789   - console.log("onSelected");
  5828 + async onReady() {
  5829 + if (findAnim?.orgId) {
  5830 + $("#select").selectZTreeSet(findAnim?.orgId);
  5831 + const items =
  5832 + await getDevicesByOrganizationId_DIRECT_CONNECTIONAndSENSOR(
  5833 + findAnim?.orgId
  5834 + );
  5835 + $("#deviceSelect").empty();
  5836 + $("#deviceSelect").append(`<option value="">请选择设备</option>`);
  5837 + for (let item of items) {
  5838 + // 在追加
  5839 + $("#deviceSelect").append(
  5840 + `<option value="${item.tbDeviceId}">${item.name}</option>`
  5841 + );
  5842 + }
  5843 + form.render();
  5844 + }
5790 5845 },
5791 5846 })
5792   -
  5847 + .on("change", async (ele, { id }) => {
  5848 + const items =
  5849 + await getDevicesByOrganizationId_DIRECT_CONNECTIONAndSENSOR(id);
  5850 + // 先清空子元素
  5851 + $("#deviceSelect").empty();
  5852 + $("#deviceSelect").append(`<option value="">请选择设备</option>`);
  5853 + for (let item of items) {
  5854 + // 在追加
  5855 + $("#deviceSelect").append(
  5856 + `<option value="${item.tbDeviceId}">${item.name}</option>`
  5857 + );
  5858 + }
  5859 + form.render();
  5860 + });
  5861 +
  5862 + form.on("select(deviceSelect)", async ({ value }) => {
  5863 + if (!value) return;
  5864 + const res = await defHttp.get(
  5865 + `/plugins/telemetry/DEVICE/${value}/keys/timeseries`
  5866 + );
  5867 + // 先清空子元素
  5868 + $("#attrSelect").empty();
  5869 + $("#attrSelect").append(`<option value="">请选择属性</option>`);
  5870 + for (let item of res) {
  5871 + // 在追加
  5872 + $("#attrSelect").append(`<option value="${item}">${item}</option>`);
  5873 + }
  5874 + form.render();
  5875 + });
  5876 +
5793 5877 // 在tableContent最前面添加元素
5794 5878 $("#tableContent").prepend(`
5795 5879 <table class="layui-table">
... ... @@ -5800,28 +5884,16 @@ DataFormatPanel.prototype.addDataFont = function (container) {
5800 5884 </colgroup>
5801 5885 <thead>
5802 5886 <tr>
5803   - <th style="text-align:center">最小值(<=)</th>
5804   - <th style="text-align:center">最大值(>=)</th>
  5887 + <th style="text-align:center">最小值(>=)</th>
  5888 + <th style="text-align:center">最大值(<=)</th>
5805 5889 <th style="text-align:center">操作</th>
5806 5890 </tr>
5807 5891 </thead>
5808   - <tbody id="tableBody">
5809   - <tr>
5810   - <td>
5811   - <input type="text" name="title" class="layui-input">
5812   - </td>
5813   - <td>
5814   - <input type="text" name="title" class="layui-input">
5815   - </td>
5816   - <td>
5817   - <button type="button" class="layui-btn layui-btn-primary layui-border-red deleteData">删除</button>
5818   - </td>
5819   - </tr>
5820   - </tbody>
  5892 + <tbody id="tableBody"></tbody>
5821 5893 </table>
5822 5894 `);
5823   - form.render();
5824   - // 监听的表单radio事件
  5895 +
  5896 + // 监听的表单radio事件 （暂不实现）
5825 5897 form.on("radio", function (data) {
5826 5898 $("#tableContent").children().first().remove();
5827 5899 $("#tableContent").prepend(`
... ... @@ -5838,19 +5910,7 @@ DataFormatPanel.prototype.addDataFont = function (container) {
5838 5910 <th style="text-align:center">操作</th>
5839 5911 </tr>
5840 5912 </thead>
5841   - <tbody id="tableBody">
5842   - <tr>
5843   - <td>
5844   - <input type="text" name="title" class="layui-input">
5845   - </td>
5846   - <td>
5847   - <input type="text" name="title" class="layui-input">
5848   - </td>
5849   - <td>
5850   - <button type="button" class="layui-btn layui-btn-primary layui-border-red deleteData">删除</button>
5851   - </td>
5852   - </tr>
5853   - </tbody>
  5913 + <tbody id="tableBody"></tbody>
5854 5914 </table>
5855 5915 `);
5856 5916 form.render();
... ... @@ -5860,10 +5920,10 @@ DataFormatPanel.prototype.addDataFont = function (container) {
5860 5920 $("#tableBody").append(`
5861 5921 <tr>
5862 5922 <td>
5863   - <input type="text" name="title" class="layui-input">
  5923 + <input type="text" name="min" class="layui-input">
5864 5924 </td>
5865 5925 <td>
5866   - <input type="text" name="title" class="layui-input">
  5926 + <input type="text" name="max" class="layui-input">
5867 5927 </td>
5868 5928 <td>
5869 5929 <button type="button" class="layui-btn layui-btn-primary layui-border-red deleteData">删除</button>
... ... @@ -5881,6 +5941,65 @@ DataFormatPanel.prototype.addDataFont = function (container) {
5881 5941 $(".deleteData").click(function () {
5882 5942 this.parentNode.parentNode.remove();
5883 5943 });
  5944 +
  5945 + // 回显数据
  5946 + // $("#select").selectZTreeSet(findAnim?.orgId)
  5947 + setTimeout(async () => {
  5948 + form.val("formModal", { deviceId: findAnim?.deviceId });
  5949 + if (!findAnim?.deviceId) return;
  5950 + const res = await defHttp.get(
  5951 + `/plugins/telemetry/DEVICE/${findAnim?.deviceId}/keys/timeseries`
  5952 + );
  5953 + // 先清空子元素
  5954 + $("#attrSelect").empty();
  5955 + $("#attrSelect").append(`<option value="">请选择属性</option>`);
  5956 + for (let item of res) {
  5957 + // 在追加
  5958 + $("#attrSelect").append(`<option value="${item}">${item}</option>`);
  5959 + }
  5960 + form.val("formModal", { attr: findAnim?.attr });
  5961 +
  5962 + const len = findAnim?.condition?.content?.length;
  5963 + if (!len) {
  5964 + $("#tableBody").prepend(`
  5965 + <tr>
  5966 + <td>
  5967 + <input type="text" name="min" class="layui-input">
  5968 + </td>
  5969 + <td>
  5970 + <input type="text" name="max" class="layui-input">
  5971 + </td>
  5972 + <td>
  5973 + <button type="button" class="layui-btn layui-btn-primary layui-border-red deleteData">删除</button>
  5974 + </td>
  5975 + </tr>
  5976 + `);
  5977 + $(".deleteData").click(function () {
  5978 + this.parentNode.parentNode.remove();
  5979 + });
  5980 + return;
  5981 + }
  5982 + for (let i = 0; i < len; i++) {
  5983 + $("#tableBody").append(`
  5984 + <tr>
  5985 + <td>
  5986 + <input type="text" name="min" class="layui-input" value="${findAnim.condition.content[i].min}">
  5987 + </td>
  5988 + <td>
  5989 + <input type="text" name="max" class="layui-input" value="${findAnim.condition.content[i].max}">
  5990 + </td>
  5991 + <td>
  5992 + <button type="button" class="layui-btn layui-btn-primary layui-border-red deleteData">删除</button>
  5993 + </td>
  5994 + </tr>
  5995 + `);
  5996 + }
  5997 +
  5998 + $(".deleteData").click(function () {
  5999 + this.parentNode.parentNode.remove();
  6000 + });
  6001 + form.render();
  6002 + }, 500);
5884 6003 }
5885 6004
5886 6005 // 数据交互事件
... ...