You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
439 lines
34 KiB
439 lines
34 KiB
const e="938ffb94-8afc-4c0d-95b1-66d0d59df174",a="custom-datetime-node",t="日期选择",n='<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1688366518104" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2918" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M694.832145 731.328581H767.925007c10.698955 0 19.398106 3.399668 26.297432 10.298994 6.899326 6.899326 10.298994 15.598477 10.298994 26.297432s-3.399668 19.398106-10.298994 26.297432c-6.899326 6.899326-15.598477 10.298994-26.297432 10.298994h-73.092862c-10.698955 0-19.398106-3.399668-26.297432-10.298994-6.899326-6.899326-10.298994-15.598477-10.298994-26.297432s3.399668-19.398106 10.298994-26.297432c6.799336-6.799336 15.598477-10.298994 26.297432-10.298994z m0-219.378576H767.925007c10.698955 0 19.398106 3.399668 26.297432 10.298994 6.899326 6.899326 10.298994 15.598477 10.298994 26.297432 0 10.698955-3.399668 19.398106-10.298994 26.297432-6.899326 6.899326-15.598477 10.298994-26.297432 10.298994h-73.092862c-10.698955 0-19.398106-3.399668-26.297432-10.298994-6.899326-6.899326-10.298994-15.598477-10.298994-26.297432 0-10.698955 3.399668-19.398106 10.298994-26.297432 6.799336-6.899326 15.598477-10.298994 26.297432-10.298994zM475.353579 731.328581h73.092862c10.698955 0 19.398106 3.399668 26.297432 10.298994 6.899326 6.899326 10.298994 15.598477 10.298994 26.297432s-3.399668 19.398106-10.298994 26.297432c-6.899326 6.899326-15.598477 10.298994-26.297432 10.298994h-73.092862c-10.698955 0-19.398106-3.399668-26.297432-10.298994-6.899326-6.899326-10.298994-15.598477-10.298994-26.297432s3.399668-19.398106 10.298994-26.297432c6.899326-6.799336 15.598477-10.298994 26.297432-10.298994z m0-219.378576h73.092862c10.698955 0 19.398106 3.399668 26.297432 10.298994 6.899326 6.899326 10.298994 15.598477 10.298994 26.297432 0 10.698955-3.399668 19.398106-10.298994 26.297432s-15.598477 10.298994-26.297432 10.298994h-73.092862c-10.698955 0-19.398106-3.399668-26.297432-10.298994s-10.298994-15.598477-10.298994-26.297432c0-10.698955 3.399668-19.398106 10.298994-26.297432 6.899326-6.899326 15.598477-10.298994 26.297432-10.298994zM255.975002 731.328581h73.092862c10.698955 0 19.398106 3.399668 26.297432 10.298994 6.899326 6.899326 10.298994 15.598477 10.298995 26.297432s-3.399668 19.398106-10.298995 26.297432c-6.899326 6.899326-15.598477 10.298994-26.297432 10.298994H255.975002c-10.698955 0-19.398106-3.399668-26.297431-10.298994-6.899326-6.899326-10.298994-15.598477-10.298995-26.297432s3.399668-19.398106 10.298995-26.297432c6.899326-6.799336 15.598477-10.298994 26.297431-10.298994z m0-219.378576h73.092862c10.698955 0 19.398106 3.399668 26.297432 10.298994 6.899326 6.899326 10.298994 15.598477 10.298995 26.297432 0 10.698955-3.399668 19.398106-10.298995 26.297432-6.899326 6.899326-15.598477 10.298994-26.297432 10.298994H255.975002c-10.698955 0-19.398106-3.399668-26.297431-10.298994-6.899326-6.899326-10.298994-15.598477-10.298995-26.297432 0-10.698955 3.399668-19.398106 10.298995-26.297432 6.899326-6.899326 15.598477-10.298994 26.297431-10.298994z m36.596427-438.857143h438.857142V36.596426c0-10.698955 3.399668-19.398106 10.298995-26.297432C748.526902 3.399668 757.226052 0 767.925007 0s19.398106 3.399668 26.297432 10.298994c6.899326 6.899326 10.298994 15.598477 10.298994 26.297432v36.596426h182.882141c10.698955 0 19.398106 3.399668 26.297432 10.298994 6.899326 6.899326 10.298994 15.598477 10.298994 26.297432v877.614296c0 10.698955-3.399668 19.398106-10.298994 26.297432-6.899326 6.899326-15.598477 10.298994-26.297432 10.298994H36.596426c-10.698955 0-19.398106-3.399668-26.297432-10.298994C3.399668 1006.80168 0 998.002539 0 987.303584V109.689288C0 98.990333 3.399668 90.291183 10.298994 83.391856c6.899326-6.899326 15.598477-10.298994 26.297432-10.298994h182.882141V36.596426c0-10.698955 3.399668-19.398106 10.298994-26.297432C236.576897 3.399668 245.276047 0 255.975002 0s19.398106 3.399668 26.297432 10.298994 10.298994 15.598477 10.298995 26.297432v36.496436zM73.092862 365.664291v585.042867h877.614296V146.285714H804.521433v36.596426c0 10.698955-3.399668 19.398106-10.298994 26.297432-6.899326 6.899326-15.598477 10.298994-26.297432 10.298995s-19.398106-3.399668-26.297432-10.298995c-6.899326-6.899326-10.298994-15.598477-10.298994-26.297432v-36.596426H292.571429v36.596426c0 10.698955-3.399668 19.398106-10.298995 26.297432-6.899326 6.899326-15.598477 10.298994-26.297432 10.298995-10.698955 0-19.398106-3.399668-26.297431-10.298995-6.899326-6.899326-10.298994-15.598477-10.298995-26.297432v-36.596426H73.092862v146.285715h877.614296v73.092862H73.092862z" fill="#707070" p-id="2919"></path></svg>',l="svg",o="基础",i="常用",m=!1,u=!0,s="时间",r=`{"type":"page","id":"u:270584784ce1","name":"page1","asideResizor":false,"style":{"boxShadow":" 0px 0px 0px 0px transparent"},"pullRefresh":{"disabled":true},"body":[{"type":"tabs","name":"tab","tabs":[{"title":"样式","icon":"fa fa-th-large","body":[{"type":"form","title":"","name":"basicPropForm","body":[{"type":"input-text","label":"名称","name":"nodeAlias","id":"u:6b126f0520cb","size":"full","mode":"horizontal","inputControlClassName":"w-100","className":"m-b"},{"type":"input-text","label":"ID ","name":"id","id":"u:6232710ac003","size":"full","mode":"horizontal","inputControlClassName":"w-100","className":"m-b"},{"type":"grid","id":"u:1954dc15dd5b","className":"m-b","columns":[{"body":[{"type":"input-number","label":"宽度","name":"width","keyboard":true,"id":"u:656efdb758ad","step":1,"suffix":"px","placeholder":"组件宽度","size":"full","mode":"horizontal","className":"m-b","value":100,"labelClassName":"w-8","labelAlign":"left","precision":2,"inputClassName":"w-full"}],"id":"u:4274c47a4ef5","md":6},{"body":[{"type":"input-number","label":"高度","name":"height","keyboard":true,"id":"u:1ed6dcd98c1a","step":1,"suffix":"px","placeholder":"组件高度","size":"full","mode":"horizontal","className":"m-b","value":100,"labelAlign":"left","labelClassName":"w-8","precision":2,"inputClassName":"w-full"}],"id":"u:3e9d1e71a69f","md":6}]},{"type":"grid","id":"u:c605398a724c","className":"m-b","columns":[{"body":[{"type":"input-number","label":"X 轴","name":"x","keyboard":true,"id":"u:dcc0c21d16f6","step":1,"suffix":"px","placeholder":"组件左边距","size":"full","mode":"horizontal","className":"m-b","value":200,"labelAlign":"left","precision":2,"inputClassName":"w-full","labelClassName":"w-8"}],"id":"u:14cc19d6ffb0","md":6},{"body":[{"type":"input-number","label":"Y 轴","name":"y","keyboard":true,"id":"u:cd6fdff9ca88","step":1,"suffix":"px","placeholder":"组件上边距","size":"full","mode":"horizontal","className":"m-b","value":200,"labelAlign":"left","precision":2,"inputClassName":"w-full","labelClassName":"w-8"}],"id":"u:4931801ca9b8","md":6}]},{"type":"grid","id":"u:a332a7bf83c1","className":"m-b","columns":[{"body":[{"type":"input-number","label":"旋转","name":"rotation","id":"u:f6a2dbb518f9","placeholder":"组件旋转角度","mode":"horizontal","size":"full","className":"","keyboard":true,"step":1,"suffix":"deg","value":0,"labelAlign":"left","inputClassName":"w-full"}],"id":"u:646cd98b7955","md":6},{"body":[{"type":"input-number","label":"透明","name":"opacity","id":"u:cf80f59d8d42","placeholder":"组件透明度","mode":"horizontal","size":"full","className":"m-b","keyboard":true,"step":1,"suffix":"","value":1,"inputClassName":"w-full"}],"id":"u:51ddf54ac749","md":6}],"gap":""},{"type":"grid","columns":[{"body":[{"type":"input-color","label":"填充","name":"fill","id":"u:0d19ed3e2bdc","placeholder":"","mode":"horizontal","size":"full","className":"m-b","format":"rgba","inputClassName":"w-full"}],"id":"u:facc5c90e990","md":6},{"body":[{"type":"input-color","label":"描边","name":"strokeColor","id":"u:89afff5fd00d","placeholder":"","mode":"horizontal","size":"full","className":"m-b","format":"rgba","inputClassName":"w-full"}],"id":"u:7c903d9d40ab","md":6}],"id":"u:457970dd35bf","className":"m-b"},{"type":"grid","columns":[{"body":[{"type":"input-number","label":"边宽","name":"strokeWidth","id":"u:8dcf62d3dab5","placeholder":"描边宽度","mode":"horizontal","size":"full","className":"m-b","keyboard":true,"step":1,"value":1,"suffix":"px","inputClassName":"w-full"},{"type":"switch","label":"范围时间","option":"","name":"isRange","falseValue":false,"trueValue":true,"id":"u:54fd94662263","value":false,"mode":"horizontal"}],"id":"u:d701217b85ef","md":6},{"body":[{"type":"input-text","label":"内容","name":"content","id":"u:bea5a408f98f","mode":"horizontal","size":"full","inputControlClassName":"inputControlClassName-bea5a408f98f"}],"id":"u:afc37bde0156","md":6}],"id":"u:235f153e5ad5","className":"m-b"},{"type":"grid","columns":[{"body":[{"type":"select","label":"时间类型","name":"timeType","options":[{"label":"年","value":"year"},{"label":"月","value":"month"},{"label":"日期时间","value":"datetime"}],"id":"u:0896ce2301d0","multiple":false,"mode":"horizontal","inputClassName":"w-full"},{"type":"select","label":"文本对齐","name":"textAlign","options":[{"label":"左对齐","value":"left"},{"label":"居中对齐","value":"center"}],"id":"u:b6da4c84bd7c","multiple":false,"mode":"horizontal","inputClassName":"w-full"},{"type":"switch","label":"深色UI","option":"","name":"darkTheme","falseValue":false,"trueValue":true,"id":"u:b0988280ebc7","value":false,"mode":"horizontal"},{"type":"input-color","label":"选择器背景","name":"dateSelectBack","id":"u:6df1b3e36fbc","format":"rgba","mode":"horizontal","inputClassName":"w-full"},{"type":"input-color","label":"选择器边框","name":"dateSelectBorderColor","id":"u:fbd675233085","format":"rgba","mode":"horizontal","inputClassName":"w-full"},{"type":"select","label":"选择器主题","name":"selectTheme","options":[{"label":"墨绿主题","value":"molv"},{"label":"格子主题","value":"grid"},{"label":"圆圈高亮主题","value":"circle"}],"id":"u:ff6315d77835","multiple":false,"creatable":true,"mode":"horizontal","inputClassName":"w-full","value":"molv","clearable":true}],"id":"u:b4ebc7d7c151"}],"id":"u:e7d6402954c5","className":"m-b"},{"type":"fieldset","id":"u:2a93d8eee7a9","className":"","title":"字体","collapsable":true,"body":[{"type":"container","id":"u:1606d0ad8360","body":[{"type":"select","id":"u:6f3470628b86","label":"字体类型","name":"fontFamily","mode":"horizontal","horizontal":{"leftFixed":"sm"},"size":"lg","options":[{},{"label":"宋体","value":"SimSun"},{"label":"微软雅黑","value":"Microsoft Yahei"},{"label":"苹方","value":"PingFang SC"},{"label":"Andale Mono","value":"andale mono,monospace"},{"label":"Arial","value":"arial,helvetica,sans-serif"},{"label":"Arial Black","value":"arial black,sans-serif"},{"label":"Book Antiqua","value":"book antiqua,palatino,serif"},{"label":"Comic Sans MS","value":"comic sans ms,sans-serif"},{"label":"Courier New","value":"courier new,courier,monospace"},{"label":"Georgia","value":"georgia,palatino,serif"},{"label":"Helvetica Neue","value":"Helvetica Neue"},{"label":"Helvetica","value":"helvetica,arial,sans-serif"},{"label":"Impact","value":"impact,sans-serif"},{"label":"Symbol","value":"symbol"},{"label":"Tahoma","value":"tahoma,arial,helvetica,sans-serif"},{"label":"Terminal","value":"terminal,monaco,monospace"},{"label":"Times New Roman","value":"times new roman,times,serif"},{"label":"Trebuchet MS","value":"trebuchet ms,geneva,sans-serif"},{"label":"Verdana","value":"verdana,geneva,sans-serif"}],"multiple":false,"className":"m-b","menuTpl":"<span style=font-family:\${value}>\${label}</span>","inputClassName":""},{"type":"input-color","label":"字体","name":"fontColor","id":"u:f398c821eda1","mode":"horizontal","size":"lg","className":"m-b","format":"rgba","placeholder":"字体颜色","horizontal":{"leftFixed":"sm"},"inputClassName":""},{"type":"input-number","id":"u:0063eed6ed66","label":"字体大小","name":"fontSize","min":12,"step":1,"mode":"horizontal","horizontal":{"leftFixed":"sm"},"className":"m-b","keyboard":true,"displayMode":"enhance","value":12,"max":100},{"type":"checkboxes","id":"u:b34f4c274416","className":"custom-checkbox-style m-b","label":"文字样式","name":"fontStyle","options":[{"label":"fa-bold fa","value":"bold"},{"label":"fa-italic fa","value":"italic"},{"label":"fa-underline fa","value":"underline"},{"label":"fa fa-strikethrough","value":"line-through"}],"checkAll":false,"joinValues":true,"mode":"horizontal","horizontal":{"leftFixed":"sm"},"optionType":"button","menuTpl":"<span class='text-lg \${label}'></span>","inputClassName":"","multiple":true},{"type":"checkboxes","label":"文字位置","name":"fontAlign","multiple":false,"options":[{"label":"fa fa-align-left","value":"left"},{"label":"fa fa-align-center","value":"center"},{"label":"fa fa-align-right","value":"right"},{"label":"fa fa-align-justify","value":"justify"}],"id":"u:7e80e906ea14","checkAll":false,"joinValues":true,"mode":"horizontal","horizontal":{"leftFixed":"sm"},"optionType":"button","menuTpl":"<span class='text-lg \${label}'></span>","inputClassName":"","className":"custom-checkbox-style m-b"},{"type":"input-number","label":"文字行高","name":"lineHeight","keyboard":true,"id":"u:0063eed6ed66","step":1,"mode":"horizontal","horizontal":{"leftFixed":"sm"},"displayMode":"enhance","className":"m-b"}],"style":{"position":"static","display":"block"},"wrapperBody":false}],"bodyClassName":"m-b"}],"id":"u:a5ebe5f02407","submitText":"","onEvent":{"change":{"weight":0,"actions":[]}},"debug":false,"mode":"normal","panelClassName":"p","labelAlign":"left","className":"","wrapWithPanel":true}],"id":"u:c309ae58472c","className":"p-none no-border"},{"title":"交互","icon":"fa fa-calendar-minus-o","body":[{"type":"service","body":[{"type":"collapse","key":"2","header":"事件","body":[{"type":"service","id":"u:4ec2acc50405","body":[{"type":"combo","label":"","name":"eventCombo","multiple":true,"addable":false,"removable":false,"removableMode":"icon","addBtn":{"label":"新增","icon":"fa fa-plus","level":"primary","size":"sm","id":"u:ae1b0a0c0f55"},"items":[{"type":"select","name":"eventType","placeholder":"选择事件","options":[{"label":"改变","value":"change"}],"id":"u:a7b44847011a","label":"名称"},{"type":"checkBox","id":"u:79dadbc61f74","name":"enable","label":"启用"},{"type":"input-text","id":"u:6efb6f120e47","name":"targetNode","label":"目标节点","multiple":false,"mode":"horizontal","inputClassName":"w-full","visibleOn":"this.eventType === 'change'","removable":"true","placeholder":"目标节点id"},{"type":"select","label":"入参类型","name":"targetParamsType","options":[{"label":"物实体","value":"entitys"},{"label":"物属性","value":"attrs"},{"label":"时间","value":"times"}],"id":"u:d10a57a9b966","multiple":false,"mode":"horizontal","inputClassName":"w-full","removable":true},{"type":"radios","label":"入参实体","name":"targetParamsEntitys","options":[{"label":"物组","value":"group"},{"label":"列表","value":"list"},{"label":"关系","value":"relation"},{"label":"搜索","value":"search"},{"label":"标签","value":"tag"},{"label":"类型","value":"type"}],"id":"u:26df91ece010","onEvent":{"change":{"actions":[{"actionType":"custom","script":"console.log('event', event);"}]}},"checkAll":false,"joinValues":true,"inputClassName":"w-full text-left","mode":"horizontal","labelClassName":"","visibleOn":"this.targetParamsType === 'entitys'"},{"type":"radios","label":"属性类型","name":"targetParamsAttrsType","options":[{"label":"分属性","value":"split"},{"label":"全部","value":"all"}],"id":"u:26df91ece010","checkAll":false,"joinValues":true,"inputClassName":"w-full text-left","mode":"horizontal","labelClassName":"","visibleOn":"this.targetParamsType === 'attrs'"},{"type":"radios","label":"入参属性","name":"targetParamsAttrsKeysEntitys","options":[{"label":"物","value":"entitys"},{"label":"属性","value":"keys"}],"id":"u:26df91ece010","checkAll":false,"joinValues":true,"inputClassName":"w-full text-left","mode":"horizontal","labelClassName":"","visibleOn":"this.targetParamsType === 'attrs'"},{"type":"radios","label":"入参时间","name":"targetParamsTimesType","options":[{"label":"最近","value":"nearest"},{"label":"时间段","value":"range"},{"label":"区间","value":"interval"}],"id":"u:26df91ece010","multiple":false,"checkAll":false,"joinValues":true,"inputClassName":"w-full text-left","mode":"horizontal","labelClassName":"","visibleOn":"this.targetParamsType === 'times'"},{"type":"input-text","label":"超级api","name":"apiId","id":"u:912394455375","placeholder":"超级apiId"}],"id":"u:364496dd313b","deleteBtn":{"type":"icon","icon":"fa fa-trash","id":"u:6d4a75088bc2","className":"border-none"},"strictMode":true,"syncFields":[],"labelClassName":""}],"data":{"eventCombo":[{"eventType":"click","enable":false,"config":""},{"eventType":"dblClick","enable":false,"config":""}]},"name":"eventsService"}],"id":"u:14834e895716","headingClassName":"p-sm bg-white b-b b-light","className":"m-b r-3x","bodyClassName":"p-none"}],"id":"u:3eb6b9a42dcb","name":"dynamicService"}],"id":"u:043251c106af","className":"p-sm"},{"title":"脚本解析","icon":"fa fa-star","body":[{"type":"flex","id":"u:edef8e21c1e3","justify":"flex-end","items":[{"type":"button","id":"u:f6d8d837a48d","label":"导入","onEvent":{"click":{"actions":[]}},"icon":"fa fa-download","level":"primary","className":"mr-2"},{"type":"button","id":"u:23f988f98a28","label":"保存","onEvent":{"click":{"actions":[{"actionType":"setValue","componentId":"u:6dc2a126004a","args":{"value":{"save":true}}}]}},"icon":"fa fa-save"}]},{"type":"service","id":"u:6dc2a126004a","body":[{"type":"tpl","id":"u:c77724a2f3b3","tpl":"function (context, service, nodeId) {","inline":true,"wrapperComponent":"","style":{"fontFamily":"","fontSize":16}},{"type":"editor","label":"","name":"script","id":"u:55ceb80e58a7","language":"javascript","size":"xxl","className":"m-b-none","onEvent":{"focus":{"actions":[{"actionType":"setValue","componentId":"u:6dc2a126004a","args":{"value":{"save":false}}}]}},"description":"参数提示：\\n1. context 是整个看板上下文，可以获取看板所有元素节点和连线节点，也可以访问 context.globalDatas 获取全局socket 数据。 \\n2. service 是 Ajax 请求服务。\\n3. nodeId 是节点 id . \\n4. 如果返回一个函数，则可以当socket 数据更新时，调用此函数，此函数入参分别是 context, service, nodeId, globalDatas ;，以满足多样化的业务需求。"},{"type":"tpl","tpl":"}","inline":true,"wrapperComponent":"","id":"u:fa21aebb859b","style":{"fontFamily":"","fontSize":16}}],"name":"scriptService","data":{"script":"","save":false},"className":"text-left"}],"id":"u:dc8d331cbe5e"}],"id":"u:178107498966","tabsMode":"radio","className":"p-none w-full","contentClassName":"p-none"}],"className":""}`,d={jsPlugin:'[{"url":"./logicflow/core.umd.js","isModule":false,"disabled":true},{"url":"./logicflow/extensionLib/NodeResize.js","isModule":false,"disabled":true}]',json:`{
|
|
"nodes": [
|
|
{
|
|
"id": "ce04328f-02d5-4d08-8694-7e3408566165",
|
|
"type": "custom-datetime-node",
|
|
"x": 200,
|
|
"y": 200,
|
|
"text": {
|
|
"value": "",
|
|
"x": 200,
|
|
"y": 200
|
|
},
|
|
"properties": {
|
|
"id": "ce04328f-02d5-4d08-8694-7e3408566165",
|
|
"width": 150,
|
|
"height": 35,
|
|
"x": 200,
|
|
"y": 200,
|
|
"rotation": 0,
|
|
"opacity": 1,
|
|
"strokeWidth": 1,
|
|
"isRange": false,
|
|
"darkTheme": true,
|
|
"selectTheme": "molv",
|
|
"fontSize": 13,
|
|
"nodeAlias": "日期",
|
|
"fontColor": "#ffffff",
|
|
"fill": "rgba(74, 144, 226, 1)",
|
|
"strokeColor": "rgba(74, 144, 226, 1)",
|
|
"timeType": "datetime",
|
|
"dateSelectBack": "rgba(13, 13, 45, 1)",
|
|
"textAlign": "left",
|
|
"dateSelectBorderColor": "rgba(23, 23, 81, 1)",
|
|
"dynamic": {
|
|
"normalData": {
|
|
"dataPoint": "",
|
|
"compareType": "",
|
|
"conditionVariables": [],
|
|
"defaultValue": "",
|
|
"unit": ""
|
|
},
|
|
"eventsData": {
|
|
"eventCombo": [
|
|
{
|
|
"eventType": "change",
|
|
"enable": false,
|
|
"config": "",
|
|
"targetParamsType": "times",
|
|
"targetParamsTimesType": "nearest"
|
|
}
|
|
]
|
|
},
|
|
"uiData": {
|
|
"dataPoint": "",
|
|
"compareType": "",
|
|
"conditionVariables": []
|
|
}
|
|
}
|
|
}
|
|
}
|
|
]
|
|
}`,javascript:`
|
|
|
|
const { createApp, createVNode, render } = Vue;
|
|
const app = createApp({})
|
|
const DateTime = {
|
|
template: \`<div :style="getOuterStyle">
|
|
<input type="text" class="layui-input" :id="getNodeId" :value="dateTime" :style="cssStyle" readOnly>
|
|
</div>\`,
|
|
props: {
|
|
nodeId: {
|
|
type: String,
|
|
default: ''
|
|
},
|
|
defaultValue: {
|
|
type: String,
|
|
default: '[]'
|
|
},
|
|
isRange: {
|
|
type: Boolean,
|
|
default: false
|
|
},
|
|
fontColor: {
|
|
type: String,
|
|
default: '#333'
|
|
},
|
|
fontSize: {
|
|
type: Number,
|
|
default: 14
|
|
},
|
|
fontFamily: {
|
|
type: String,
|
|
default: '宋体'
|
|
},
|
|
fontStyle: {
|
|
type: String,
|
|
default: 'normal'
|
|
},
|
|
width: {
|
|
type: Number,
|
|
default: 150
|
|
},
|
|
height: {
|
|
type: Number,
|
|
default: 35
|
|
},
|
|
lineHeight: {
|
|
type: Number,
|
|
default: 35,
|
|
},
|
|
strokeWidth: {
|
|
type: Number,
|
|
default: 2,
|
|
},
|
|
borderColor: {
|
|
type: String,
|
|
default: '#666'
|
|
},
|
|
backgroundColor: {
|
|
type: String,
|
|
default: '#ffffff',
|
|
},
|
|
timeType: {
|
|
type: String,
|
|
default: 'datetime',
|
|
},
|
|
darkTheme: {
|
|
type: Boolean,
|
|
default: false
|
|
},
|
|
dateSelectBack: {
|
|
type: String,
|
|
default: '#ffffff'
|
|
},
|
|
textAlign: {
|
|
type: String,
|
|
default: 'left'
|
|
},
|
|
selectTheme: {
|
|
type: String,
|
|
default: 'molv'
|
|
},
|
|
dateSelectBorderColor: {
|
|
type: String,
|
|
default: '#e2e2e2'
|
|
}
|
|
},
|
|
emits: ["change"],
|
|
setup(props, { emit }) {
|
|
const { ref, toRefs, computed, onMounted } = Vue;
|
|
const dateTime = ref('');
|
|
|
|
const getNodeId = computed(() => {
|
|
return 'dateTimePicker'
|
|
})
|
|
|
|
const { width, height, lineHeight } = toRefs(props)
|
|
|
|
const cssStyle = computed(() => {
|
|
const borderWidths = props.strokeWidth * 6;
|
|
const realWidth = parseInt(width.value);
|
|
const realHeight = parseInt(height.value);
|
|
return \`
|
|
position: relative;
|
|
color: \${props.fontColor};
|
|
font-size: \${props.fontSize}px;
|
|
text-align: \${props.textAlign};
|
|
border-width: \${props.strokeWidth}px;
|
|
border-style: solid;
|
|
width: \${realWidth - borderWidths}px;
|
|
height: \${realHeight - borderWidths}px;
|
|
line-height: \${lineHeight.value - borderWidths}px;
|
|
border-radius: 4px;
|
|
border-color:\${props.borderColor};
|
|
background-color:\${props.backgroundColor};
|
|
padding-left: \${props.textAlign === 'left' ? 10 : 0}px;
|
|
outline: none;\`
|
|
})
|
|
|
|
const getOuterStyle = computed(() => {
|
|
const w = parseInt(width.value);
|
|
const h = parseInt(height.value);
|
|
return \`
|
|
width: \${w}px;
|
|
height: \${h}px;
|
|
\`
|
|
})
|
|
|
|
onMounted(() => {
|
|
setTimeout(() => {
|
|
layui.use('laydate', function () {
|
|
layui.laydate.index = Date.now();
|
|
var laydate = layui.laydate;
|
|
|
|
//执行一个laydate实例
|
|
laydate.render({
|
|
elem: '#' + getNodeId.value,
|
|
theme: props.selectTheme,
|
|
value: new Date(),
|
|
type: props.timeType,
|
|
range: props.isRange,
|
|
trigger: 'click',
|
|
done: function (value, date, endDate) {
|
|
if (props.isRange) {
|
|
emit('change', {
|
|
start: date,
|
|
end: endDate
|
|
})
|
|
} else {
|
|
emit('change', {
|
|
start: value,
|
|
end: endDate
|
|
})
|
|
}
|
|
},
|
|
ready: function () {
|
|
if (props.darkTheme && props.dateSelectBack && props.dateSelectBack !== '#ffffff') {
|
|
const layDateDom = document.querySelector('.layui-laydate');
|
|
layDateDom.classList.add('dark-custom-theme');
|
|
const stylesheet = document.createElement('style');
|
|
stylesheet.innerText = \`
|
|
.layui-laydate.dark-custom-theme {
|
|
background-color: \${props.dateSelectBack};
|
|
border: none;
|
|
}
|
|
.layui-laydate.dark-custom-theme .layui-laydate-list {
|
|
background-color: \${props.dateSelectBack};
|
|
}
|
|
.layui-laydate.dark-custom-theme .laydate-month-list {
|
|
background-color: \${props.dateSelectBack};
|
|
}
|
|
.layui-laydate.dark-custom-theme .laydate-year-list {
|
|
background-color: \${props.dateSelectBack};
|
|
}
|
|
.layui-laydate.dark-custom-theme .layui-laydate-footer span {
|
|
background-color: \${props.dateSelectBack};
|
|
}
|
|
.layui-laydate.dark-custom-theme .layui-laydate-content {
|
|
border-color: \${props.dateSelectBorderColor};
|
|
}
|
|
.layui-laydate.dark-custom-theme .layui-laydate-footer {
|
|
border-color: \${props.dateSelectBorderColor};
|
|
}
|
|
.layui-laydate.dark-custom-theme .layui-laydate-footer span{
|
|
border-color: \${props.dateSelectBorderColor};
|
|
}
|
|
\`;
|
|
const head = document.getElementsByTagName('head')[0];
|
|
head.appendChild(stylesheet);
|
|
}
|
|
},
|
|
});
|
|
// 初始化默认时间传给外部
|
|
const timesFormat = {
|
|
year: 'YYYY',
|
|
month: 'YYYY-MM',
|
|
datetime: 'YYYY-MM-DD HH:mm:ss'
|
|
}
|
|
if (props.isRange) {
|
|
if (props.timeType === 'year') {
|
|
emit('change', {
|
|
start: window.dayjs(new Date().getTime()).startOf('year').subtract(1, ' year').format(timesFormat[props.timeType]),
|
|
end: window.dayjs(new Date().getTime()).startOf('year').format(timesFormat[props.timeType]),
|
|
})
|
|
} else if (props.timeType === 'month') {
|
|
emit('change', {
|
|
start: window.dayjs(new Date().getTime()).startOf('month').subtract(1, ' month').format(timesFormat[props.timeType]),
|
|
end: window.dayjs(new Date().getTime()).startOf('month').format(timesFormat[props.timeType]),
|
|
})
|
|
} else {
|
|
emit('change', {
|
|
start: window.dayjs(new Date().getTime()).startOf('day').format(timesFormat[props.timeType]),
|
|
end: window.dayjs(new Date().getTime()).endOf('day').format(timesFormat[props.timeType]),
|
|
})
|
|
}
|
|
} else {
|
|
emit('change', {
|
|
start: window.dayjs(new Date().getTime()).format(timesFormat[props.timeType]),
|
|
end: ''
|
|
})
|
|
}
|
|
});
|
|
// if (props.darkTheme) {
|
|
// document.getElementById('layui_theme_css').setAttribute('href', './plugins/layui/css/layui-theme-dark.css')
|
|
// } else {
|
|
// document.getElementById('layui_theme_css').removeAttribute('href')
|
|
// }
|
|
}, 200)
|
|
|
|
})
|
|
|
|
|
|
|
|
return {
|
|
getNodeId,
|
|
dateTime,
|
|
cssStyle,
|
|
getOuterStyle,
|
|
}
|
|
}
|
|
}
|
|
|
|
class CustomDateTimeNode extends HtmlResize.view {
|
|
oldProperties = {}
|
|
|
|
setHtml(rootEl) {
|
|
const { graphModel } = this.props;
|
|
const { properties, width, height } = this.props.model;
|
|
const { isRange, fontColor, fontSize, fontFamily, fontStyle, strokeWidth, strokeColor,
|
|
lineHeight, fill, id, timeType, darkTheme, dateSelectBack, textAlign, selectTheme, dateSelectBorderColor } = properties;
|
|
const { normalData } = properties.dynamic || {};
|
|
const { defaultValue } = normalData || {};
|
|
const { model } = this.props;
|
|
const el = document.createElement('div');
|
|
rootEl.innerHTML = '';
|
|
|
|
const changeHandler = (e) => {
|
|
graphModel.eventCenter.emit("node:change", {
|
|
data: this.props.model,
|
|
e,
|
|
});
|
|
}
|
|
|
|
const { uiData } = properties.dynamic || {};
|
|
let fillColor = fill
|
|
let fontC = fontColor
|
|
let realValue = ''
|
|
if (uiData) {
|
|
realValue = window.resolveScadaNewValue(uiData.defaultValue)
|
|
if (realValue !== '') {
|
|
uiData.conditionVariables.forEach((item) => {
|
|
if (item.type === 'rangeColor') {
|
|
let from = item.from;
|
|
let to = item.to;
|
|
if (item.from >= item.to) {
|
|
from = item.to;
|
|
to = item.from;
|
|
}
|
|
if (item.backColor && Number(realValue) >= from && Number(realValue) <= to) {
|
|
fillColor = item.backColor
|
|
}
|
|
if (item.fontColor && Number(realValue) >= from && Number(realValue) <= to) {
|
|
fontC = item.fontColor
|
|
}
|
|
} else if (item.type === 'equal') {
|
|
if (Number(realValue) === Number(item.value)) {
|
|
item.backColor && (fillColor = item.backColor);
|
|
item.fontColor && (fontC = item.fontColor);
|
|
dynamicName = item.valueLabel;
|
|
}
|
|
} else if (item.type === 'boolean') {
|
|
if (realValue === 'true' || realValue === true) {
|
|
item.backColor && (fillColor = item.backColor);
|
|
item.fontColor && (fontC = item.fontColor);
|
|
dynamicName = item.valueLabel;
|
|
}
|
|
}
|
|
})
|
|
}
|
|
}
|
|
|
|
const instance = createVNode(DateTime, {
|
|
nodeId: id,
|
|
isRange: isRange,
|
|
fontColor: fontC,
|
|
fontSize, fontFamily, fontStyle, width: properties.width, height: properties.height, lineHeight,
|
|
backgroundColor: fillColor,
|
|
borderColor: strokeColor,
|
|
strokeWidth,
|
|
defaultValue,
|
|
timeType: timeType,
|
|
darkTheme,
|
|
dateSelectBack,
|
|
textAlign,
|
|
selectTheme,
|
|
dateSelectBorderColor,
|
|
onChange: changeHandler
|
|
})
|
|
instance.appContext = app._context
|
|
render(instance, el)
|
|
rootEl.appendChild(el);
|
|
}
|
|
|
|
sameProps(properties) {
|
|
const isSame = window._.isEqual(this.oldProperties, properties);
|
|
if (isSame) return true;
|
|
this.oldProperties = properties;
|
|
return false
|
|
}
|
|
|
|
// 生命周期 支持重写内容, 但格式需一致
|
|
shouldUpdate() {
|
|
const { properties } = this.props.model;
|
|
const propertiesBack = window._.cloneDeep(properties);
|
|
// 由于事件change 会给properties 增加一个 event 属性（见目录scadaDashboard/Diagram/useDynamicEventsHandler），会引发属性的改变，导致组件重渲染。
|
|
delete propertiesBack.event;
|
|
if (this.sameProps(propertiesBack)) {
|
|
return false
|
|
}
|
|
return true;
|
|
}
|
|
}
|
|
|
|
class CustomDateTimeModel extends HtmlResize.model {
|
|
initNodeData(data) {
|
|
// 自定义组件，需最开始重置一下text 。
|
|
data.text = {
|
|
value: "",
|
|
x: data.x,
|
|
y: data.y,
|
|
};
|
|
super.initNodeData(data);
|
|
const { properties } = this;
|
|
this.width = properties.width || 80;
|
|
this.height = properties.height || 35;
|
|
this.text.editable = false; // 不允许文本被编辑
|
|
}
|
|
|
|
setAttributes() {
|
|
// 自定义组件需重置 text
|
|
const { x, y, properties } = this;
|
|
const { textHorizontalMove = 0, textVerticalMove = 0 } = properties;
|
|
this.text = {
|
|
...this.text,
|
|
x: x + textHorizontalMove,
|
|
y: y + textVerticalMove,
|
|
value: "",
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
lf.register({
|
|
type: 'custom-datetime-node',
|
|
view: CustomDateTimeNode,
|
|
model: CustomDateTimeModel,
|
|
})
|
|
|
|
`,css:"",fakeData:""},c={id:e,name:a,aliasName:t,image:n,imageType:l,groupName:o,groupType:i,isRemote:!1,isDefault:!0,sectionType:s,config:r,files:d};export{t as aliasName,r as config,c as default,d as files,o as groupName,i as groupType,e as id,n as image,l as imageType,u as isDefault,m as isRemote,a as name,s as sectionType};
|