物联网平台 +Web 组态
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.
 
 
 
 

2489 lines
99 KiB

<!DOCTYPE html>
<html lang="en">
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=no,
width=device-width,initial-scale=1.0" />
<title>物联网可视化平台</title>
<link rel="shortcut icon" href="../../image/oss/iot/favicon2.ico" type="image/x-icon">
<link rel="stylesheet" href="lib/element-ui/index.css">
<script src="lib/element-ui/vue.min.js"></script>
<script src="lib/element-ui/index.js"></script>
<script src="../common/util.js"></script>
<script type="text/javascript" src="./lib/jquery/jquery.min.js"></script>
<script type="text/javascript" src="lib/layer/layer.js"></script>
<link rel="stylesheet" href="lib/spectrum/spectrum.css" />
<script type="text/javascript" src="lib/spectrum/spectrum.js"></script>
<link rel="stylesheet" href="lib/jquery-ui/jquery-ui.min.css" />
<script type="text/jscript" src="lib/jquery-ui/jquery-ui.min.js"></script>
<script type="text/jscript" src="lib/transform/jquery.transform2d.js"></script>
<script type="text/jscript" src="lib/transform/jquery.transformable.js"></script>
<script type="text/jscript" src="lib/wangEditor/wangEditor.min.js"></script>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=3.0&ak=q5uqiBY29eEu0wNIAPoCXwq1HvUmDzqP"></script>
<script type="text/jscript" src="lib/wangEditor/wangEditor.min.js"></script>
<link rel="stylesheet" href="./lib/fontimage/iconfont.css">
<!-- 视频播放 -->
<script src="https://open.ys7.com/sdk/js/1.3/ezuikit.js"></script>
<script type="text/javascript" src="../../lib/webUploader/webuploader.min.js"></script>
<script type="text/javascript" src="../../lib/echarts/echarts.min.js"></script>
<script type="text/javascript" src="../../lib/echarts/echarts-liquidfill.min.js"></script>
<script type="text/javascript" src="js/cfg.js"></script>
<link rel="stylesheet" href="css/cfg.css" />
</head>
<body>
<div id="app" style="display: none;">
<el-container>
<el-header style="text-align:center ;">
<div class="layui-logo" style="position:fixed; " >
<span>
<img src="../../image/oss/iot/logo13.png">
</span>
<span>物联网可视化平台</span>
</div>
<div style="cursor:pointer;" @click="visualChange=true" >
<span v-text="visual_name"></span>
<span class="iconfont icon-caret-down"></span>
</div>
<div class="head_btns">
<div class="head_btn" @click="saveVisual()"> <div class="el-icon-s-order"></div> 保存</div>
<div class="head_btn" @click="showVisual()"> <div class="el-icon-position "></div> 预览</div>
</div>
</el-header>
<el-container>
<el-aside width="240px">
<el-container>
<el-aside width="60px" style="background: #4a5053;" class="left-container" >
<div class="func-list" @click="changetab(0)" :class="{'active':tabmode==0}" >
<div class="el-icon-document font-icon"></div>
<div>基本</div>
</div>
<div class="func-list" @click="changetab(1)" :class="{'active':tabmode==1}">
<div class="el-icon-s-grid font-icon"></div>
<div>组件</div>
</div>
<div class="func-list" @click="changetab(2)" :class="{'active':tabmode==2}">
<div class="el-icon-picture font-icon"></div>
<div>图库</div>
</div>
<!-- <div class="func-list" @click="changetab(3)" :class="{'active':tabmode==3}">
<div class="el-icon-setting font-icon"></div>
<div>基础</div>
</div> -->
<div class="func-list" @click="changetab(4)" :class="{'active':tabmode==4}">
<div class="el-icon-upload font-icon"></div>
<div>上传</div>
</div>
</el-aside>
<el-aside width="180px">
<div class="element-container" v-show="tabmode==0">
<div class="ele-node-info" >
<div class="ele-sub-c">
<div>
<span class="intro-ico iconfont icon-wenben"></span>
</div>
<div class="intro-txt">
文本
</div>
</div>
<div class="ele-content">
<div class="canvas" nid="0">
<div class="canvas_text">文本</div>
</div>
</div>
</div>
<div class="ele-node-info" >
<div class="ele-sub-c" >
<div>
<span class="intro-ico iconfont icon-wenbenyu"></span>
</div>
<div class="intro-txt">
高级文本
</div>
</div>
<div class="ele-content">
<div class="canvas high-txt" nid="3">
<div >双击编辑文本</div>
</div>
</div>
</div>
<div class="ele-node-info" >
<div class="ele-sub-c" >
<div>
<span class="intro-ico iconfont icon-chaolianjie"></span>
</div>
<div class="intro-txt">
跳转链接
</div>
</div>
<div class="ele-content">
<div class="canvas" nid="0">
<a class="canvas_text" href="#" >跳转链接</a>
</div>
</div>
</div>
<div class="ele-node-info" >
<div class="ele-sub-c" >
<div>
<span class="intro-ico iconfont icon-time"></span>
</div>
<div class="intro-txt">
时间
</div>
</div>
<div class="ele-content">
<div class="canvas" nid="0" cid="6">
<span></span>
</div>
</div>
</div>
</div>
<!-- 组件 -->
<div class="element-container" v-show="tabmode==1">
<div class="ele-node-info" >
<div class="ele-sub-c">
<div>
<span class="intro-ico iconfont icon-shuju"></span>
</div>
<div class="intro-txt">
数值数据
</div>
</div>
<div class="ele-content">
<div class="canvas sensorNode" nid="1" style="font-size: 20px;" >
<div class="canvas_text">0.00 </div>
</div>
</div>
</div>
<div class="ele-node-info" >
<div class="ele-sub-c">
<div>
<span class="intro-ico iconfont icon-shuju"></span>
</div>
<div class="intro-txt">
配置数据
</div>
</div>
<div class="ele-content">
<div class="canvas sensorNode" nid="1" cid="11" style="font-size: 20px;background:#999;color:#fff;padding: 10px;border-radius: 3px;" >
<div class="canvas_text">0.00 </div>
</div>
</div>
</div>
<div class="ele-node-info" >
<div class="ele-sub-c">
<div>
<span class="intro-ico iconfont icon-share"></span>
</div>
<div class="intro-txt">
状态数据
</div>
</div>
<div class="ele-content">
<div class="canvas sensorNode" nid="1" cid="7">
<div class="canvas_text">状态值</div>
</div>
</div>
</div>
<div class="ele-node-info" >
<div class="ele-sub-c" >
<div>
<span class="intro-ico iconfont icon-shipin2"></span>
</div>
<div class="intro-txt">
视频
</div>
</div>
<div class="ele-content">
<div class="canvas videoNode" nid="4" >
<div class="video_content">
<video class="node_video" poster="" controls="" playsinline="" webkit-playsinline="" autoplay="">
<source src="" type="rtmp/flv">
</video>
</div>
</div>
</div>
</div>
<div class="ele-node-info" >
<div class="ele-sub-c" >
<div>
<span class="intro-ico iconfont icon-shuju1"></span>
</div>
<div class="intro-txt">
图表
</div>
</div>
<div class="ele-content">
<div class="canvas chartNode" nid="5" cid="1" >
<div class="chartStyle"></div>
</div>
</div>
</div>
<div class="ele-node-info" >
<div class="ele-sub-c" >
<div>
<span class="intro-ico iconfont icon-ditu1"></span>
</div>
<div class="intro-txt">
地图
</div>
</div>
<div class="ele-content">
<div class="canvas mapNode" nid="6" >
<div class="mapStyle">
<img src="image/map.png">
</div>
</div>
</div>
</div>
<div class="ele-node-info" >
<div class="ele-sub-c" >
<div>
<span class="intro-ico iconfont icon-zhishideng"></span>
</div>
<div class="intro-txt">
指示灯
</div>
</div>
<div class="ele-content">
<div class="canvas stateNode" nid="8"
cmd="[{'max':'0','min':'0','src':'image/res/state_off.png','send':0},
{'max':1,'min':1,'src':'image/res/state_on.png','send':0}]" >
<img src="">
</div>
</div>
</div>
<div class="ele-node-info" >
<div class="ele-sub-c" >
<div>
<span class="intro-ico iconfont icon-kaiguananniu"></span>
</div>
<div class="intro-txt">
按钮
</div>
</div>
<div class="ele-content">
<div class="canvas controlNode" nid="9"
cmd="[{'max':'0','min':'0','src':'image/res/off.png','send':1},
{'max':1,'min':1,'src':'image/res/on.png','send':0}]">
<img src="">
</div>
</div>
</div>
<div class="ele-node-info" >
<div class="ele-sub-c" >
<div>
<span class="intro-ico iconfont icon-WIFI"></span>
</div>
<div class="intro-txt">
设备状态
</div>
</div>
<div class="ele-content">
<div class="canvas deviceStateNode" nid="11" w="87px" h="64px"
cmd="[{'max':'19','min':'17','src':'image/res/offline.png','send':0},
{'max':16,'min':16,'src':'image/res/online.png','send':0}]">
<img src="image/res/offline.png">
</div>
</div>
</div>
<div class="ele-node-info" >
<div class="ele-sub-c" >
<div>
<span class="intro-ico iconfont icon-B"></span>
</div>
<div class="intro-txt">
自定义状态
</div>
</div>
<div class="ele-content">
<div class="canvas stateNode" nid="8" w="80px" h="50px" cmd="[]" >
<img src="image/res/blank.png">
</div>
</div>
</div>
<div class="ele-node-info" >
<div class="ele-sub-c" >
<div>
<span class="intro-ico iconfont icon-anniu"></span>
</div>
<div class="intro-txt">
自定义按钮
</div>
</div>
<div class="ele-content">
<div class="canvas controlNode" nid="9" w="80px" h="50px"
cmd="[]">
<img src="image/res/blank.png">
</div>
</div>
</div>
<div class="ele-node-info" >
<div class="ele-sub-c" >
<div>
<span class="intro-ico iconfont icon-yewei"></span>
</div>
<div class="intro-txt">
液位图
</div>
</div>
<div class="ele-content">
<div class="canvas chartNode" nid="5" cid="4" >
<div class="chartStyle"></div>
</div>
</div>
</div>
<div class="ele-node-info" >
<div class="ele-sub-c" >
<div>
<span class="intro-ico iconfont icon-guandao"></span>
</div>
<div class="intro-txt">
管道图
</div>
</div>
<div class="ele-content">
<div class="canvas pipeLineNode" nid="10" cid="10" >
<div class="chartStyle"></div>
</div>
</div>
</div>
</div>
<!-- 图库 -->
<div class="element-container imglibrary self-upload" v-show="tabmode==2">
<el-collapse v-model="activeNameImgKun" accordion >
<el-collapse-item title="电力元件" name="-1">
<div>
<div class="ele-node-info" >
<div class="ele-sub-c">
<div>
<svg width="40" height="40" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd"><path fill="#BFBFBF" d="M20 40l15-20H5z"></path><path d="M20 0v19" stroke="#BFBFBF" stroke-width="2" stroke-linecap="square"></path></g></svg>
</div>
</div>
<div class="ele-content">
<div class="canvas" nid="2" cid="8" w="40px" h="40px" >
<svg width="40" height="40" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd"><path fill="#BFBFBF" d="M20 40l15-20H5z"></path><path d="M20 0v19" stroke="#BFBFBF" stroke-width="2" stroke-linecap="square"></path></g></svg>
</div>
</div>
</div>
<div class="ele-node-info" >
<div class="ele-sub-c">
<div>
<svg width="40" height="40" xmlns="http://www.w3.org/2000/svg"><g stroke="#BFBFBF" stroke-width="2" fill="none" fill-rule="evenodd" stroke-linecap="square"><path d="M20 0v19M6 21h28M12 28h16M17 35h6"></path></g></svg>
</div>
</div>
<div class="ele-content">
<div class="canvas" nid="2" cid="8" w="40px" h="40px">
<svg width="40" height="40" xmlns="http://www.w3.org/2000/svg"><g stroke="#BFBFBF" stroke-width="2" fill="none" fill-rule="evenodd" stroke-linecap="square"><path d="M20 0v19M6 21h28M12 28h16M17 35h6"></path></g></svg>
</div>
</div>
</div>
<div class="ele-node-info" >
<div class="ele-sub-c">
<div>
<svg width="40" height="60" xmlns="http://www.w3.org/2000/svg"><g stroke="#BFBFBF" stroke-width="2" fill="none" fill-rule="evenodd"><circle cx="20" cy="30" r="10"></circle><path d="M20 0v59" stroke-linecap="square"></path></g></svg>
</div>
</div>
<div class="ele-content">
<div class="canvas" nid="2" cid="8" w="40px" h="60px">
<svg width="40" height="60" xmlns="http://www.w3.org/2000/svg"><g stroke="#BFBFBF" stroke-width="2" fill="none" fill-rule="evenodd"><circle cx="20" cy="30" r="10"></circle><path d="M20 0v59" stroke-linecap="square"></path></g></svg>
</div>
</div>
</div>
<div class="ele-node-info" >
<div class="ele-sub-c">
<div>
<svg width="40" height="60" xmlns="http://www.w3.org/2000/svg"><g stroke="#BFBFBF" stroke-width="2" fill="none" fill-rule="evenodd"><circle cx="20" cy="30" r="15"></circle><path d="M20 0v15M20 45v15M10 20l20 20M10 40l20-20" stroke-linecap="square"></path></g></svg>
</div>
</div>
<div class="ele-content">
<div class="canvas" nid="2" cid="8" w="40px" h="60px">
<svg width="40" height="60" xmlns="http://www.w3.org/2000/svg"><g stroke="#BFBFBF" stroke-width="2" fill="none" fill-rule="evenodd"><circle cx="20" cy="30" r="15"></circle><path d="M20 0v15M20 45v15M10 20l20 20M10 40l20-20" stroke-linecap="square"></path></g></svg>
</div>
</div>
</div>
<div class="ele-node-info" >
<div class="ele-sub-c">
<div>
<svg width="40" height="80" xmlns="http://www.w3.org/2000/svg"><g stroke="#BFBFBF" stroke-width="2" fill="none" fill-rule="evenodd"><path d="M20 0v80" stroke-linecap="square"></path><path d="M11 21h18v38H11z"></path></g></svg>
</div>
</div>
<div class="ele-content">
<div class="canvas" nid="2" cid="8" w="40px" h="80px">
<svg width="40" height="80" xmlns="http://www.w3.org/2000/svg"><g stroke="#BFBFBF" stroke-width="2" fill="none" fill-rule="evenodd"><path d="M20 0v80" stroke-linecap="square"></path><path d="M11 21h18v38H11z"></path></g></svg>
</div>
</div>
</div>
<div class="ele-node-info" >
<div class="ele-sub-c">
<div>
<svg width="40" height="80" xmlns="http://www.w3.org/2000/svg"><g stroke="#BFBFBF" stroke-width="2" fill="none" fill-rule="evenodd"><path d="M20 0v38M20 60v20" stroke-linecap="square"></path><path d="M11 21h18v38H11z"></path><path d="M20 48l4-8h-8z"></path></g></svg>
</div>
</div>
<div class="ele-content">
<div class="canvas" nid="2" cid="8" w="40px" h="80px">
<svg width="40" height="80" xmlns="http://www.w3.org/2000/svg"><g stroke="#BFBFBF" stroke-width="2" fill="none" fill-rule="evenodd"><path d="M20 0v38M20 60v20" stroke-linecap="square"></path><path d="M11 21h18v38H11z"></path><path d="M20 48l4-8h-8z"></path></g></svg>
</div>
</div>
</div>
<div class="ele-node-info" >
<div class="ele-sub-c">
<div>
<svg width="40" height="80" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><path id="a" d="M10 20h20v40H10z"></path></defs><g fill="none" fill-rule="evenodd"><path d="M20 0v20M20 60v20" stroke="#BFBFBF" stroke-width="2" stroke-linecap="square"></path><use fill="#D9D9D9" xlink:href="#a"></use><path stroke="#BFBFBF" stroke-width="2" d="M11 21h18v38H11z"></path></g></svg>
</div>
</div>
<div class="ele-content">
<div class="canvas" nid="2" cid="8" w="40px" h="80px">
<svg width="40" height="80" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><path id="a" d="M10 20h20v40H10z"></path></defs><g fill="none" fill-rule="evenodd"><path d="M20 0v20M20 60v20" stroke="#BFBFBF" stroke-width="2" stroke-linecap="square"></path><use fill="#D9D9D9" xlink:href="#a"></use><path stroke="#BFBFBF" stroke-width="2" d="M11 21h18v38H11z"></path></g></svg>
</div>
</div>
</div>
<div class="ele-node-info" >
<div class="ele-sub-c">
<div>
<svg width="40" height="80" xmlns="http://www.w3.org/2000/svg"><g stroke="#BFBFBF" stroke-width="2" fill="none" fill-rule="evenodd"><path d="M20 0v20M20 60v20" stroke-linecap="square"></path><path d="M11 21h18v38H11z"></path></g></svg>
</div>
</div>
<div class="ele-content">
<div class="canvas" nid="2" cid="8" w="40px" h="80px">
<svg width="40" height="80" xmlns="http://www.w3.org/2000/svg"><g stroke="#BFBFBF" stroke-width="2" fill="none" fill-rule="evenodd"><path d="M20 0v20M20 60v20" stroke-linecap="square"></path><path d="M11 21h18v38H11z"></path></g></svg>
</div>
</div>
</div>
<div class="ele-node-info" >
<div class="ele-sub-c">
<div>
<svg width="40" height="40" xmlns="http://www.w3.org/2000/svg"><g stroke="#BFBFBF" stroke-width="2" fill="none" fill-rule="evenodd" stroke-linecap="square"><path d="M20 0v15M20 25v15M10 15h20M10 25h20"></path></g></svg>
</div>
</div>
<div class="ele-content">
<div class="canvas" nid="2" cid="8" w="40px" h="40px">
<svg width="40" height="40" xmlns="http://www.w3.org/2000/svg"><g stroke="#BFBFBF" stroke-width="2" fill="none" fill-rule="evenodd" stroke-linecap="square"><path d="M20 0v15M20 25v15M10 15h20M10 25h20"></path></g></svg>
</div>
</div>
</div>
<div class="ele-node-info" >
<div class="ele-sub-c">
<div>
<svg width="60" height="80" xmlns="http://www.w3.org/2000/svg"><g stroke="#BFBFBF" stroke-width="2" fill="none" fill-rule="evenodd" stroke-linecap="square"><path d="M30 0v20M30 60v20M26 16l8 8M5 20l25 40M26 24l8-8"></path></g></svg>
</div>
</div>
<div class="ele-content">
<div class="canvas" nid="2" cid="8" w="60px" h="80px">
<svg width="60" height="80" xmlns="http://www.w3.org/2000/svg"><g stroke="#BFBFBF" stroke-width="2" fill="none" fill-rule="evenodd" stroke-linecap="square"><path d="M30 0v20M30 60v20M26 16l8 8M5 20l25 40M26 24l8-8"></path></g></svg>
</div>
</div>
</div>
<div class="ele-node-info" >
<div class="ele-sub-c">
<div>
<svg width="40" height="80" xmlns="http://www.w3.org/2000/svg"><g stroke="#BFBFBF" stroke-width="2" fill="none" fill-rule="evenodd"><g transform="translate(5)"><path d="M15 0v13" stroke-linecap="square"></path><circle cx="15" cy="28" r="15"></circle><path d="M15 21l6 12H9z"></path></g><g transform="translate(5 38)"><path d="M15 14v28" stroke-linecap="square"></path><circle cx="15" cy="15" r="15"></circle><path d="M15 15l9-13M6 2l9 13" stroke-linecap="square"></path></g></g></svg>
</div>
</div>
<div class="ele-content">
<div class="canvas" nid="2" cid="8" w="40px" h="80px">
<svg width="40" height="80" xmlns="http://www.w3.org/2000/svg"><g stroke="#BFBFBF" stroke-width="2" fill="none" fill-rule="evenodd"><g transform="translate(5)"><path d="M15 0v13" stroke-linecap="square"></path><circle cx="15" cy="28" r="15"></circle><path d="M15 21l6 12H9z"></path></g><g transform="translate(5 38)"><path d="M15 14v28" stroke-linecap="square"></path><circle cx="15" cy="15" r="15"></circle><path d="M15 15l9-13M6 2l9 13" stroke-linecap="square"></path></g></g></svg>
</div>
</div>
</div>
<div class="ele-node-info" >
<div class="ele-sub-c">
<div>
<svg width="40" height="80" xmlns="http://www.w3.org/2000/svg"><g stroke="#BFBFBF" stroke-width="2" fill="none" fill-rule="evenodd"><circle cx="20" cy="30" r="15"></circle><circle cx="20" cy="50" r="15"></circle><path d="M20 0v15M20 65v15" stroke-linecap="square"></path></g></svg>
</div>
</div>
<div class="ele-content">
<div class="canvas" nid="2" cid="8" w="40px" h="80px">
<svg width="40" height="80" xmlns="http://www.w3.org/2000/svg"><g stroke="#BFBFBF" stroke-width="2" fill="none" fill-rule="evenodd"><circle cx="20" cy="30" r="15"></circle><circle cx="20" cy="50" r="15"></circle><path d="M20 0v15M20 65v15" stroke-linecap="square"></path></g></svg>
</div>
</div>
</div>
<div class="ele-node-info" style="width: 80px;" >
<div class="ele-sub-c">
<div>
<svg width="60" height="80" xmlns="http://www.w3.org/2000/svg"><g stroke="#BFBFBF" stroke-width="2" fill="none" fill-rule="evenodd"><circle cx="30" cy="29" r="15"></circle><circle cx="17" cy="52" r="15"></circle><circle cx="43" cy="52" r="15"></circle><path d="M30 0v13M20 68v12M40 68v12" stroke-linecap="square"></path></g></svg>
</div>
</div>
<div class="ele-content">
<div class="canvas" nid="2" cid="8" w="60px" h="80px">
<svg width="60" height="80" xmlns="http://www.w3.org/2000/svg"><g stroke="#BFBFBF" stroke-width="2" fill="none" fill-rule="evenodd"><circle cx="30" cy="29" r="15"></circle><circle cx="17" cy="52" r="15"></circle><circle cx="43" cy="52" r="15"></circle><path d="M30 0v13M20 68v12M40 68v12" stroke-linecap="square"></path></g></svg>
</div>
</div>
</div>
<div class="ele-node-info" style="width: 80px;">
<div class="ele-sub-c">
<div>
<svg width="80" height="100" xmlns="http://www.w3.org/2000/svg"><g stroke="#BFBFBF" stroke-width="2" fill="none" fill-rule="evenodd" stroke-linecap="square"><path d="M39.66 19l-15 25.98M19.66 53.641l-15 25.98M16 39.98l17.32 10M11 48.641l17.32 10"></path><g><path d="M40.5 18.69l15 25.98M60.5 53.33l15 25.98M46.84 49.67l17.32-10M51.84 58.33l17.32-10"></path></g><g><path d="M75 80H45M35 80H5M45 70v20M35 70v20"></path></g><path d="M40 0v19"></path></g></svg>
</div>
</div>
<div class="ele-content">
<div class="canvas" nid="2" cid="8" w="80px" h="100px">
<svg width="80" height="100" xmlns="http://www.w3.org/2000/svg"><g stroke="#BFBFBF" stroke-width="2" fill="none" fill-rule="evenodd" stroke-linecap="square"><path d="M39.66 19l-15 25.98M19.66 53.641l-15 25.98M16 39.98l17.32 10M11 48.641l17.32 10"></path><g><path d="M40.5 18.69l15 25.98M60.5 53.33l15 25.98M46.84 49.67l17.32-10M51.84 58.33l17.32-10"></path></g><g><path d="M75 80H45M35 80H5M45 70v20M35 70v20"></path></g><path d="M40 0v19"></path></g></svg>
</div>
</div>
</div>
<!-- 自定义基础图形 -->
<div class="ele-node-info" style="width: 80px;" >
<div class="ele-sub-c">
<div>
<svg width="70" height="20" xmlns="http://www.w3.org/2000/svg" version="1.1">
<line x1="0" y1="10" x2="80" y2="10" stroke="#BFBFBF" stroke-width="2" />
</svg>
</div>
</div>
<div class="ele-content">
<div class="canvas" nid="2" cid="9" w="70px" h="20px" >
<svg width="70" height="20" xmlns="http://www.w3.org/2000/svg" version="1.1">
<line x1="0" y1="10" x2="80" y2="10" stroke="#BFBFBF" stroke-width="2" />
</svg>
</div>
</div>
</div>
<div class="ele-node-info" style="width: 80px;">
<div class="ele-sub-c">
<div>
<svg width="80" height="80" xmlns="http://www.w3.org/2000/svg" version="1.1"> <circle cx="40" cy="40" r="38" stroke="#BFBFBF" stroke-width="2" fill="#BFBFBF"/> </svg>
</div>
</div>
<div class="ele-content">
<div class="canvas" nid="2" cid="8" w="80px" h="80px" >
<svg width="80" height="80" xmlns="http://www.w3.org/2000/svg" version="1.1"> <circle cx="40" cy="40" r="38" stroke="#BFBFBF" stroke-width="2" fill="#BFBFBF"/> </svg>
</div>
</div>
</div>
<div class="ele-node-info" style="width: 80px;">
<div class="ele-sub-c">
<div>
<svg width="70" height="70" xmlns="http://www.w3.org/2000/svg" version="1.1">
<rect width="80" height="80" stroke="#BFBFBF" stroke-width="2" fill="#BFBFBF" />
</svg>
</div>
</div>
<div class="ele-content">
<div class="canvas" nid="2" cid="8" w="80px" h="80px" >
<svg width="80" height="80" xmlns="http://www.w3.org/2000/svg" version="1.1">
<rect width="80" height="80" stroke="#BFBFBF" stroke-width="2" fill="#BFBFBF" />
</svg>
</div>
</div>
</div>
<div class="ele-node-info" style="width: 80px;">
<div class="ele-sub-c">
<div>
<svg width="70" height="40" xmlns="http://www.w3.org/2000/svg" version="1.1">
<rect width="70" height="40" stroke="#BFBFBF" stroke-width="2" fill="#BFBFBF" />
</svg>
</div>
</div>
<div class="ele-content">
<div class="canvas" nid="2" cid="8" w="70px" h="40px" >
<svg width="70" height="40" xmlns="http://www.w3.org/2000/svg" version="1.1">
<rect width="70" height="40" stroke="#BFBFBF" stroke-width="2" fill="#BFBFBF" />
</svg>
</div>
</div>
</div>
</div>
</el-collapse-item>
<el-collapse-item v-for="(item,index) in visualPartList" :title="item.name" :name="index">
<div class="ele-node-info upload_img_ele" v-for="(sitem,index) in imgObjList" v-if="item.code ==sitem.moudle_type " >
<div class="ele-sub-c" >
<div>
<img :src="sitem.dis_img" />
</div>
</div>
<div class="ele-content">
<div class="canvas" nid="2">
<div class="canvas_img">
<img :src="sitem.dis_img" />
</div>
</div>
</div>
</div>
</el-collapse-item>
</el-collapse>
</div>
<div class="element-container" v-show="tabmode==3">
<div>
</div>
</div>
<div class="element-container self-upload" style="background:#f5f5f5;" v-show="tabmode==4">
<div class="ele-node-info upload_img_ele" :id="'upload_img_'+item.id" style="width:54px;" v-for="item in uploadImgs" >
<div class="ele-sub-c" >
<div style="position:relative;">
<img style="width:40px;height:40px;margin: 2px;" :src="item.dis_img" />
<img :id="item.id" style="width: 10px;height: 10px;" src="./image/delete.png" class="deleteUploadImg" >
</div>
</div>
<div class="ele-content">
<div class="canvas" nid="2">
<div class="canvas_img">
<img :src="item.dis_img" />
</div>
</div>
</div>
</div>
<div class="uploadBtns">
<div class="upload_img mr10" id="upload_img" style="position: fixed;bottom:10px;left:95px;width: 90px;">
<button tag="" class="el-button el-button--primary" >上传底图</button>
</div>
</div>
</div>
</el-aside>
</el-container>
</el-aside>
<el-container>
<el-main style="overflow: auto;">
<div style=" margin-right:240px;">
<div id="edit-content-area" style="overflow: auto; ">
<div class="edit-container" >
<div class="guide" id="guide" ></div>
<div id="canvas_droppable" class="canvas_droppable" >
<!-- 拖动画布 -->
</div>
</div>
</div>
</div>
<div class="tool-container" style="background: #fff;width: 240px;border-left:1px solid #d9d9d9;">
<div>
<el-tabs :stretch="true" v-model="activeName" @tab-click="handleClick">
<el-tab-pane label="基本设置" name="first">
<div style="min-height: 400px;padding-bottom: 30px;">
<div class="tool-title padding">功能设置</div>
<div style="padding: 10px ;">
<span class="el-icon-position" title="移动素材" style="font-size: 28px;margin-right: 10px;cursor: pointer;"
@click="changeMode" :class={activeBorder:!isdrag} ></span>
<span class="el-icon-rank" title="移动画布" style="font-size: 28px;cursor: pointer;" @click="changeMode" :class={activeBorder:isdrag}> </span>
</div>
<div class="functionDetails">
<span>
基础设置
</span>
</div>
<!-- 画布操作 -->
<div v-show="editType==-1">
<div class="tool-title padding" style="margin-top: 10px;">辅助线</div>
<div class="functionList padding">
<div class="auxiliary" :class="{auxiliaryB : guide =='1'}" @click="selectGuideClick" > </div>
</div>
</div>
<div v-show="editType==-1">
<div class="tool-title padding" style="margin-top: 10px;">画布宽</div>
<div class="functionList padding">
<input class="input-style" v-model="canvensWidth" @input="canvensWidthChange" style="margin-right: 15px;width: 100px;text-align:left;padding-left: 10px;">
</div>
</div>
<div v-show="editType==-1">
<div class="tool-title padding" style="margin-top: 10px;">画布高</div>
<div class="functionList padding">
<input class="input-style" v-model="canvensHeight" @input="canvensHeightChange" style="margin-right: 15px;width: 100px;text-align:left;padding-left: 10px;">
</div>
</div>
<div v-show="editType==-1">
<div class="tool-title padding" style="margin-top: 10px;">画布颜色</div>
<div style="padding: 10px;">
<input id="canvasContainercolor" />
</div>
</div>
<div v-show="editType==-1">
<div class="tool-title padding" style="margin-top: 10px;">背景颜色</div>
<div style="padding: 10px;">
<input id="backContainercolor" />
</div>
</div>
<div v-show="editType==-1">
<div class="tool-title padding" style="margin-top: 10px;">画布背景图片</div>
<div style="padding:10px;">
<div>
<div class="upload_img mr10" id="upload_img_bg" style="width: 90px;">
<button class="el-button el-button--small el-button--primary" >上传<i class="el-icon-upload el-icon--right"></i></button>
</div>
</div>
<div style="margin-top: 10px;">
<button @click="clearBgImg" class="el-button el-button--small el-button--danger" >清空<i class="el-icon-delete el-icon--right"></i></button>
</div>
</div>
</div>
<!-- 元素 -->
<div v-show="editType==0 ">
<div class="tool-title padding" style="margin-top: 10px;">修改文本</div>
<div class="functionList padding">
<textarea class="base_textarea changeInputVal" @input="textInput" v-model="edit_text"></textarea>
</div>
</div>
<div v-show="editType==0 || editType==1 || editType == 3 ">
<div class="tool-title " style="padding: 10px;">文本设置</div>
<div style="padding: 0 10px;">
<div class="basic_text">
<select class="basic_text_select changeInput" v-model="fontSize" @change="fontSizeChange" style-name="font-size">
<option value="">大小&nbsp;&nbsp;(默认)</option>
<option value="12px">12</option>
<option value="13px">13</option>
<option value="14px">14</option>
<option value="16px">16</option>
<option value="18px">18</option>
<option value="20px">20</option>
<option value="24px">24</option>
<option value="36px">36</option>
<option value="48px">48</option>
<option value="60px">60</option>
<option value="72px">72</option>
<option value="84px">84</option>
<option value="96px">96</option>
<option value="100px">100</option>
<option value="200px">200</option>
<option value="300px">300</option>
</select>
<select class="basic_text_select changeInput" v-model="fontFamily" @change="fontFamilyChange" style-name="font-family">
<option value="">字体&nbsp;&nbsp;(默认)</option>
<option value="serif">serif</option>
<option value="Sans-serif">Sans-serif</option>
<option value="黑体">黑体</option>
<option value="仿宋">仿宋</option>
<option value="幼圆">幼圆</option>
<option value="楷体">楷体</option>
<option value="隶体">隶体</option>
<option value="宋体">宋体</option>
<option value="新宋体">新宋体</option>
<option value="Microsoft YaHei">微软雅黑</option>
<option value="华文细黑">华文细黑</option>
<option value="华文行楷">华文行楷</option>
<option value="华文彩云">华文彩云</option>
<option value="华文中宋">华文中宋</option>
<option value="华文隶书">华文隶书</option>
<option value="华文新魏">华文新魏</option>
<option value="方正舒体">方正舒体</option>
<option value="Arial">Arial</option>
<option value="Georgia">Georgia</option>
<option value="Tahoma">Tahoma</option>
<option value="Verdana">Verdana</option>
<option value="Monaco">Monaco</option>
<option value="lcdbq">LCDBQ</option>
</select>
<select class="basic_text_select changeInput" v-model="lineHeight" @change="lineHeightChange" style-name="line-height">
<option value="">行高&nbsp;&nbsp;(默认)</option>
<option value="0">自适应</option>
<option value="1">1</option>
<option value="1.2">1.2</option>
<option value="1.5">1.5</option>
<option value="1.75">1.75</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
<select class="basic_text_select changeInput" v-model="textalign" @change="textAlignChange" style-name="text-align">
<option value="">对齐&nbsp;&nbsp;(默认)</option>
<option selected="selected" value="left">居左</option>
<option value="center">居中</option>
<option value="right">居右</option>
</select>
</div>
</div>
</div>
<div v-show="editType==0|| editType==1 || editType == 3 || editType==2 || editType == 5 ">
<div class="tool-title " style="padding: 10px;">文本样式</div>
<div style="padding: 0 10px;">
<div class="basic_text">
<button class="basic_text_select textStyleBtn" id="basicColor" style-name="color">A</button>
<button class="basic_text_select textStyleBtn" v-model="fontWeight" @click="fontWeightChange" >B</button>
<button class="basic_text_select textStyleBtn" v-model="oblique" @click="obliqueChange" >I</button>
<button class="basic_text_select textStyleBtn" v-model="underline" @click="underlineChange" >U</button>
</div>
</div>
</div>
<div v-show="editType==3" >
<div class="tool-title " style="padding: 10px;">
高级文本设置
</div>
<div style="padding:0 10px;">
<div class="text_toolbar"></div>
</div>
</div>
<div v-show="editType==0 || editType == 1 || editType == 3 || editType == 5 || editType == 8 || editType == 9 ">
<div class="tool-title " style="padding: 10px;">背景颜色</div>
<div style="padding-left: 10px;">
<input id="backcolor" />
</div>
</div>
<div v-show="editType>=0 && editType <= 10 && editType!= 7">
<div class="tool-title " style="padding: 10px;">旋转</div>
<div style="padding: 0 10px;overflow: hidden;position: relative;">
<div id="rotate_slide" class="slide_node">
<div id="rotate_node" class="slide_line"></div>
</div>
<input class="slide_size" v-model="rotate" @input="rotateChange" >
</div>
</div>
<div class="base-form-group" v-show="editType == 10">
<label class="el-form-item__label" style="width: 80px;">流动方向</label>
<div class="el-form-item__content" style="margin-left: 80px;">
<select class="el-input__inner" v-model="speed_dir" @change="rotateSpeedChange" style-name="text-align">
<option selected="selected" value="r">正向</option>
<option value="l">反向</option>
</select>
</div>
</div>
<div v-show="editType == 10">
<div class="tool-title " style="padding: 10px;">流动速度</div>
<div style="padding: 0 10px;overflow: hidden;position: relative;">
<div class="slide_node">
<div id="rotate_speed" class="slide_line"></div>
</div>
<input class="slide_size" v-model="rotate_speed" @input="rotateSpeedChange" >
</div>
</div>
<div v-show="editType == 5 && cid == 4 ">
<div class="tool-title " style="padding: 10px;">液位最大值</div>
<div style="padding-left: 10px;">
<input class="el-input__inner" v-model="chartMax" placeholder="液位最大值" style="width:75%;" @input="chartMaxInput">
</div>
</div>
<div v-show="editType == 5 && cid == 4 ">
<div class="tool-title " style="padding: 10px;">边框</div>
<div style="padding-left: 10px;">
<select class="el-input__inner" v-model="columnVal" @change="changeChartColumn" style="width:75%;">
<option selected="selected" value="0">无边框</option>
<option value="1">有边框</option>
</select>
</div>
</div>
<div v-show="editType>=0 && editType <= 11 && editType!= 7">
<div class="tool-title " style="padding: 10px;">大小</div>
<div style="padding: 0 10px;">
<span style="padding-right: 5px;"></span>
<input class="input-style" v-model="canswidth" @input="canswidthChange" style="margin-right: 15px;">
<span style="padding-right: 5px;"></span>
<input class="input-style" v-model="cansheight" @input="cansheightChange">
</div>
</div>
<div v-show="editType>=0 && editType <= 11 && editType!= 7">
<div class="tool-title " style="padding: 10px;">位置</div>
<div style="padding: 0 10px;">
<span style="padding-right: 5px;">X&nbsp;</span>
<input class="input-style" v-model="canvensx" @input="canvensxChange" style="margin-right: 15px;">
<span style="padding-right: 5px;">Y&nbsp;</span>
<input class="input-style" v-model="canvensy" @input="canvensyChange">
</div>
</div>
<div v-show="editType == 2 || editType == 9 || editType == 8 || editType == 11 " >
<div class="tool-title " style="padding: 10px;">图片显示</div>
<div style="padding: 0 10px;">
<button @click="imgScale(0)" class="el-button el-button--small el-button--primary" >原比例</button>
<button @click="imgScale(1)" class="el-button el-button--small el-button--primary" >缩放</button>
</div>
</div>
</div>
</el-tab-pane>
<el-tab-pane label="数据绑定" name="second">
<div class="nodeConfig" v-show="editType==0|| editType ==1 || editType==4 ||editType==5
||editType==6 || nid==8 || nid==9 || nid==10 || nid==11">
<div class="functionDetails" v-show="nid==0 && cid!= 6">
<span>
事件绑定
</span>
</div>
<div class="form-group padding" v-show="nid==0 && cid!= 6">
<div class="el-form-item">
<label class="el-form-item__label" style="width: 80px;">跳转方式</label>
<div class="el-form-item__content" style="margin-left: 80px;">
<el-select v-model="jty" placeholder="请选择类型" @change="jumptype" >
<el-option :value="1" label="弹窗展示"></el-option>
<el-option :value="2" label="外链跳转"></el-option>
<el-option :value="3" label="组态内跳转"></el-option>
</el-select>
</div>
</div>
</div>
<div class="functionDetails" v-show="nid==8 || nid==9">
<span>
功能设置
</span>
</div>
<div class="form-group padding" v-show="nid==8 || nid==9">
<div class="el-form-item">
<div class="el-form-item__content" >
<label class="el-form-item__label" style="width: 80px;">功能设置</label>
<div class="el-form-item__content" style="margin-left: 80px;text-align: center;">
<el-button type="primary" @click="funcedit" icon="el-icon-edit" circle></el-button>
</div>
</div>
</div>
</div>
<div class="form-group padding" v-show="nid==0 && cid!= 6 && jty != 3">
<div class="el-form-item">
<label class="el-form-item__label" style="width: 80px;">跳转地址</label>
<div class="el-form-item__content" style="margin-left: 80px;">
<input class="el-input__inner" v-model="jurl" placeholder="http://地址" @input="urlInput">
</div>
</div>
</div>
<div class="form-group padding" v-show="jty == 3">
<div class="el-form-item">
<label class="el-form-item__label" style="width: 80px;">跳转地址</label>
<div class="el-form-item__content" style="margin-left: 80px;">
<el-select v-model="visual_select_code" placeholder="请选择类型" @change="urlInputSelect" >
<el-option
v-for="item in visualList"
:key="item.keycode"
:label="item.name"
:value="item.keycode">
</el-option>
</el-select>
</div>
</div>
</div>
<div class="functionDetails" v-show="nid==5 && cid != 4 ">
<span>
图表设置
</span>
</div>
<div class="form-group sensorSelect padding" v-show="nid==5 && cid != 4 ">
<div class="el-form-item">
<label class="el-form-item__label" style="width: 80px;">图表类型</label>
<div class="el-form-item__content" style="margin-left: 80px;">
<!--
<select class="el-input__inner" v-model="cid" @change="changeChartData">
<option value="">请选择</option>
<option value="1">折线图</option>
<option value="2">柱形图</option>
<option value="3">仪表盘</option>
</select>
-->
<el-select v-model="cid" placeholder="请选择类型" @change="changeChartData" >
<el-option :value="1" label="折线图"></el-option>
<el-option :value="2" label="柱形图"></el-option>
<el-option :value="3" label="仪表盘"></el-option>
</el-select>
</div>
</div>
</div>
<div class="form-group padding" v-show="nid==5 && cid == 3 ">
<div class="el-form-item">
<label class="el-form-item__label" style="width: 80px;">量程值</label>
<div class="el-form-item__content" style="margin-left: 80px;">
<input class="el-input__inner" v-model="pimax" placeholder="设置范围最大值" @input="settingmaxvalue" >
</div>
</div>
</div>
<div class="functionDetails" v-show="nid==6 || nid==5 || nid==4 || nid==1 || nid==8 || nid==9 || nid==10 || nid==11 ">
<span>
数据源
</span>
</div>
<div class="form-group videoSelect padding" v-show="nid==6 || nid==5 || nid==1 || nid==8 || nid==9 || nid==10 || nid==11">
<div class="el-form-item">
<label class="el-form-item__label" style="width: 80px;">设备</label>
<div class="el-form-item__content" style="margin-left: 80px;">
<el-select v-model="node_id" placeholder="请选择" @change="changeNodeData" >
<el-option
v-for="item in nodeList"
:key="parseInt(item.id)"
:label="item.name"
:value="parseInt(item.id)">
</el-option>
</el-select>
</div>
</div>
</div>
<div class="form-group sensorSelect padding" v-show=" nid==1 || nid==5 || nid==8 || nid==9 || nid==10 ">
<div class="el-form-item">
<label class="el-form-item__label" style="width: 80px;">属性</label>
<!--
<div class="el-form-item__content" style="margin-left: 80px;">
<select class="el-input__inner" v-model="sensor_id" @change="changeSensorData">
<option value="">请选择</option>
<option v-for="(item,index) in sensorList" :value="item.id" >{{item.name}}</option>
</select>
</div>
-->
<div class="el-form-item__content" style="margin-left: 80px;">
<el-select v-model="sensor_id" placeholder="请选择" @change="changeSensorData" >
<el-option
v-for="item in sensorList"
:key="parseInt(item.id)"
:label="item.name"
:value="parseInt(item.id)">
</el-option>
</el-select>
</div>
</div>
</div>
<div class="form-group videoSelect padding" v-show="nid==4">
<div class="el-form-item">
<label class="el-form-item__label" style="width: 80px;">摄像头</label>
<div class="el-form-item__content" style="margin-left: 80px;">
<!--
<select class="el-input__inner" v-model="video_id" @change="changeVideoData">
<option value="">请选择</option>
<option v-for="(item,index) in videoList" :value="item.id" >{{item.name}}</option>
</select>
-->
<el-select v-model="video_id" placeholder="请选择" @change="changeVideoData" >
<el-option
v-for="item in videoList"
:key="parseInt(item.id)"
:label="item.name"
:value="parseInt(item.id)">
</el-option>
</el-select>
</div>
</div>
</div>
</div>
</el-tab-pane>
</el-tabs>
</div>
</div>
<!-- 右键菜单 -->
<div id="opration" class="opration" style="display:none;">
<div class="canvas-con-operates"><!-- 组合框操作按钮 -->
<div title="左对齐" class="canvas-con-operate dir_operate" tag="3">
<span class="iconfont icon-left"></span>
</div>
<div title="上对齐" class="canvas-con-operate dir_operate" tag="0">
<span class="iconfont icon-up"></span>
</div>
<div title="右对齐" class="canvas-con-operate dir_operate" tag="1">
<span class="iconfont icon-right"></span>
</div>
<div title="下对齐" class="canvas-con-operate dir_operate" tag="2">
<span class="iconfont icon-down"></span>
</div>
</div>
<div class="opration_item item_bt" id="copyNode">复制</div>
<div class="opration_item item_disabled" id="upMoveOne">上移一层</div>
<div class="opration_item item_bt item_disabled" id="downMoveOne">下移一层</div>
<div class="opration_item item_bt item_disabled" id="upMoveAll">置于顶层</div>
<div class="opration_item item_bt item_disabled" id="downMoveAll">置于底层</div>
<div class="opration_item" id="deleteNode">删除</div>
</div>
<div id="oprationEdit" class="opration" style="display:none;">
<div class="opration_item item_disabled" id="pasteNode">粘贴</div>
</div>
</el-main>
</el-container>
</el-container>
</el-container>
<el-dialog title="功能设置" :visible.sync="dialogTableVisible">
<div class="imageDiv">
<table class="el-table__header-wrapper">
<thead class="lpro-thead">
<tr>
<td>最小值(>=)</td>
<td>最大值(&lt;)</td>
<td>图片</td>
<td>发送值</td>
<td>操作</td>
</tr>
</thead>
<tbody class="has-gutter">
<tr :model="item" v-for="(item,index) in dattribute" :key="index" >
<td>
<el-input v-model="item.min" placeholder="最小值"></el-input>
</td>
<td>
<el-input v-model="item.max" placeholder="最大值"></el-input>
</td>
<td>
<img style="vertical-align: middle;width:50px;" :src="item.src">
<el-button type="success" @click="showImageSelect(index)" style="margin-left:2px;" size="small" icon="el-icon-search" circle></el-button>
</td>
<td>
<el-input v-model="item.send" placeholder="发送值"></el-input>
</td>
<td>
<el-button type="danger" icon="el-icon-delete" size="small" @click="deleteImageSelect(index)" circle></el-button>
</td>
</tr>
</tbody>
</table>
</div>
<span slot="footer" class="dialog-footer">
<el-button @click="dialogTableVisible = false">取 消</el-button>
<el-button type="primary" @click="addImageState">增加</el-button>
<el-button type="primary" @click="saveEdit">确 定</el-button>
</span>
</el-dialog>
<el-dialog title="图片列表" :visible.sync="dialogImageVisible">
<div class="imageDiv">
<el-collapse v-model="activeNameImgKun2" accordion >
<el-collapse-item v-for="(item,index) in visualPartList" :title="item.name" :name="index">
<div class="ele-node-info upload_img_ele" v-for="(sitem,index) in imgObjList" style="width:46px;" v-if="item.code ==sitem.moudle_type " >
<img class="upload-img-icon" @click="selectImg(sitem.dis_img)" :src="sitem.dis_img">
</div>
</el-collapse-item>
<el-collapse-item title="自定义图片" name="0">
<img v-for="item in uploadImgs" class="upload-img-icon" @click="selectImg(item.dis_img)" :src="item.dis_img">
</el-collapse-item>
</el-collapse>
</div>
<span slot="footer" class="dialog-footer">
<el-button @click="dialogImageVisible = false">取 消</el-button>
<el-button type="primary" @click="dialogImageVisible = false">确 定</el-button>
</span>
</el-dialog>
<el-dialog title="组态切换" :visible.sync="visualChange">
<div>
<el-row :gutter="12">
<el-col :span="8" v-for="item in visualList " style="margin-bottom:3px;" >
<el-card shadow="hover" >
<span style="cursor: pointer;color:#47a2ff;" @click="modifyInfo(item.id)" >{{item.name}}</span>
<el-button @click="deleteVisual(item.id)" style="float:right;" size="mini" type="danger" icon="el-icon-delete" circle></el-button>
<el-tooltip class="item" effect="dark" content="切换" placement="top">
<el-button @click="changeVisual(item.keycode)" style="float:right;margin-right:10px;" size="mini" type="success" icon="el-icon-position" circle></el-button>
</el-tooltip>
</el-card>
</el-col>
</el-row>
<el-row :gutter="12" :span="16" v-show="addColumn" >
<el-col :span="10" style="box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);margin:10px;" >
<el-form ref="form" :model="form" label-width="50px" style="margin-top:10px;" >
<el-form-item label="名称">
<el-input placeholder="请输入名称" v-model="form.name" clearable></el-input>
</el-form-item>
<el-form-item label="排序">
<el-input type="number" placeholder="请输入排序" v-model="form.seq"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="onSubmit">立即保存</el-button>
<el-button @click="addColumn=false">取消</el-button>
</el-form-item>
</el-form>
</el-col>
</el-row>
</div>
<span slot="footer" class="dialog-footer">
<el-button @click="visualChange = false">取 消</el-button>
<el-button type="primary" @click="addnew">新增</el-button>
<el-button type="primary" @click="visualChange = false">确 定</el-button>
</span>
</el-dialog>
</div>
</body>
<script type="text/javascript">
// 默认加载
layer.load();
var id = getQueryString('mainid') ;
var keyCode = getQueryString('keyCode') ;
var app = new Vue({
el:"#app",
data:function(){
return {
activeName: 'first' , // x选项卡
activeNameImgKun: 0 , // 图库系统
activeNameImgKun2: 0 ,
editType : '-1',
form: {
name: '' ,
seq:''
} ,
edit_text: '',
fontSize:'',
fontFamily:'',
lineHeight:'',
textalign: '',
fontWeight:'0',
oblique:'0',
underline:'0',
rotate:'0',
rotate_speed:'0',//液体流动速度
speed_dir:'r', //液体流动方向
canswidth:'0',
cansheight:'0',
canvensx:'0',
canvensy:'0',
guide:1,
canvensWidth:'',
canvensHeight:'',
isdrag:false,
tabmode:0,
uploadImgs:[], // 上传的图标列表
initUpload:'',
uploadImgCount:0,
sensorMap:{},
videoMap:{},
nid:'', //当前选择对象n类型
videoList:[],
sensorList:[],
nodeList:[],
sceneList:[] ,
visualList: [] ,
sensor_id:'',
node_id:'', // 设备id
scene_id : '' , // 场景id
cid:'',
video_id:'',
bdMap:{}, //节点id-map对象
chartMap:{} , //节点id-chart对象
jty: '' , // 跳转方式
jurl: '' , // 跳转url
dialogTableVisible: false , // 弹窗显示
visualChange: false , // 组态切换
dattribute: [] , // 设备配置属性
dialogImageVisible: false , // 图标列表
tableIndex: '' , // 属性设置页面
visualPartList: '' , // 虚拟组件
imgObjList:'' , // 组件图片列表
chartMax: '' , // 图标最大值
columnVal: '0' , // 栏目值
pimax: '' , // 仪表盘最大值
visual_name : '' , // 组态名称
addColumn: false ,
visual_select_code: '' , // 组态内跳转
};
},
methods:{
handleChange(){
var that = this;
commonAjax('POST',baseurl+'/service/page/moudle/visual?paged=1&pageSize=1999' , {} ,
function (e) {
if(isOK(e)){
that.imgObjList = e.data.data ;
setTimeout(function(){
cfg.activeMenuNode($(".upload_img_ele"));
}, 500);
}
}) ;
},
handleClick(tab, event) {
},
changeVisual(a){
window.location.href = baseurl+"/page/visual/index.html?keyCode="+a +"&mainid="+ id ;
},
addnew(){
this.addColumn = true ;
this.form.name = '' ;
this.form.seq = '' ;
this.form.keycode = null ;
},
deleteVisual(rid){
var that = this ;
this.$confirm('确认删除?')
.then(_ => {
commonAjax("DELETE",baseurl+"/service/visual/display?id="+rid, "",function(){
// 重新查询一下
that.initVisualListInfo({id: id}) ;
});
})
.catch(_ => {
});
},
modifyInfo(id){
this.addColumn=true ;
for(var i =0 ; i< this.visualList.length;i++ ){
if( this.visualList[i].id == id ){
this.form.name = this.visualList[i].name ;
this.form.seq = this.visualList[i].seq ;
this.form.keycode = this.visualList[i].keycode ;
}
}
},
onSubmit(){
// 提交
var that = this ;
if( this.form.keycode == null ){
this.form.parent_id = id ;
this.form.scene_id = this.visualList[0].scene_id ;
this.form.node_id = this.visualList[0].node_id ;
this.form.dis_type = this.visualList[0].dis_type ;
commonAjax('POST',baseurl+'/service/visual/display.json' , this.form ,
function (e) {
if(isOK(e)){
that.addColumn = false ;
that.form.name = '' ;
that.form.seq = '' ;
// 重新查询一下
that.initVisualListInfo({id: id}) ;
}
}) ;
}else{
commonAjax('PUT',baseurl+'/service/visual/display.json' , this.form ,
function (e) {
if(isOK(e)){
that.addColumn = false ;
that.form.name = '' ;
that.form.seq = '' ;
// 重新查询一下
that.initVisualListInfo({id: id}) ;
}
}) ;
}
},
textInput(){
// 文本输入
$(cfg.current_edit_obj).find(".canvas_text").html(this.edit_text);
},
fontSizeChange(){
if(this.fontSize!=''){
$(cfg.current_edit_obj).css("font-size",this.fontSize );
}else{
$(cfg.current_edit_obj).css("font-size",'' ) ;
}
},
fontFamilyChange(){
if(this.fontFamily !=''){
$(cfg.current_edit_obj).css("font-family",this.fontFamily );
}else{
$(cfg.current_edit_obj).css("font-family",'' ) ;
}
},
lineHeightChange(){
if(this.lineHeight !=''){
$(cfg.current_edit_obj).css("line-height",this.lineHeight );
}else{
$(cfg.current_edit_obj).css("line-height",'' ) ;
}
},
textAlignChange(){
if(this.textalign !=''){
$(cfg.current_edit_obj).css("text-align",this.textalign );
}else{
$(cfg.current_edit_obj).css("text-align",'' ) ;
}
},
fontWeightChange(){
if($(cfg.current_edit_obj).css("font-weight") == 700){
$(cfg.current_edit_obj).css("font-weight",'400' ) ;
}else{
$(cfg.current_edit_obj).css("font-weight",'700' ) ;
}
},
obliqueChange(){
if($(cfg.current_edit_obj).css("font-style") != 'italic'){
$(cfg.current_edit_obj).css("font-style",'italic' ) ;
}else{
$(cfg.current_edit_obj).css("font-style",'normal' ) ;
}
},
underlineChange(){
if($(cfg.current_edit_obj).css("text-decoration").indexOf('none')>-1){
$(cfg.current_edit_obj).css("text-decoration",'underline' ) ;
}else{
$(cfg.current_edit_obj).css("text-decoration",'none' ) ;
}
},
rotateChange(){
var size = app.rotate ;
var cosVal = Math.cos(size * Math.PI / 180);
var sinVal = Math.sin(size * Math.PI / 180);
var valTransform = 'matrix('+ cosVal.toFixed(6) +','+ sinVal.toFixed(6) +','+ (-1 * sinVal).toFixed(6) +','+ cosVal.toFixed(6) +',0,0)';
$(cfg.current_edit_obj).css("transform","rotate("+size+"deg)");
// 重置滑块
$("#rotate_node").slider({
value:size,
});
},
rotateSpeedChange(){
var size = app.rotate_speed ;
resetPipelineChartSpeedAndDir(size);
// 重置滑块
$("#rotate_speed").slider({
value:size,
});
},
canswidthChange(){
$(cfg.current_edit_obj).css("width",this.canswidth);
},
cansheightChange(){
$(cfg.current_edit_obj).css("height",this.cansheight);
},
canvensxChange(){
$(cfg.current_edit_obj).css("left",this.canvensx+"px");
},
canvensyChange(){
$(cfg.current_edit_obj).css("top",this.canvensy+"px");
},
selectGuideClick(event){
if( this.guide == 1){
this.guide = 0 ;
$(".guide").hide();
}else{
this.guide =1 ;
$(".guide").show();
}
},
changeMode(){
if(this.isdrag){
this.isdrag=false ;
$(".canvas_droppable").hide();
}else{
this.isdrag =true ;
$(".canvas_droppable").show();
}
},
canvensWidthChange(){
// 宽度变化
$(".edit-container").css("width",this.canvensWidth+"px");
},
canvensHeightChange(){
// 高度变化
$(".edit-container").css("height",this.canvensHeight+"px");
},
changetab(a){
this.tabmode = a ;
if(this.initUpload != 1 && a == 4){
initImgUpload("upload_img");
this.initUpload = 1;
}
},
addUploadImg(obj,id){
var uploadImgCount = this.uploadImgCount;
this.uploadImgs.push({ dis_img:obj,id: id });
},
deleteImageSelect(index){
this.dattribute.splice(index,1);
},
saveEdit(){
cfg.current_edit_obj.attr("cmd", JSON.stringify( this.dattribute ) );
this.dialogTableVisible = false ;
initControllerPart(cfg.current_edit_obj);
},
addImageState(){
// 增加一行
this.dattribute.push({max:0 , min:0, src:'image/res/blank.png', send:0 });
},
selectImg(obj){
this.dialogImageVisible=false ;
this.dattribute[ this.tableIndex ].src = obj ;
},
changeChartData(){ //修改图表类型选择框
var cid = this.cid;
cfg.current_edit_obj.attr("cid",cid);
resetNodeData();
},
settingmaxvalue(){
// 设置最大值
var cl = cfg.current_edit_obj ;
var optn = cl.children(".chartStyle").attr("option");
var optnj = eval("("+ optn +")");
optnj.series[0].max = gdv(this.pimax ,100 ) ;
var chart = getEchartObj();
setChartOption(chart,optnj);
},
changeSceneData(){ // 修改项目选择框
this.initNodeList();
this.initVideoList() ;
},
showImageSelect(index){
this.dialogImageVisible = true ;
this.tableIndex = index ;
},
funcedit(){
// 功能设置
this.dialogTableVisible=true ;
},
changeSensorData(){ //修改传感器选择框
var sensor_id = this.sensor_id;
cfg.current_edit_obj.attr("sensor_id",sensor_id);
resetNodeData(sensor_id,'sensor');
},
changeVideoData(){ //修改摄像头选择框
var video_id = this.video_id;
cfg.current_edit_obj.attr("video_id",video_id);
resetNodeData(video_id);
},
jumptype(){
// 跳转方式变化
cfg.current_edit_obj.attr("jty", this.jty);
},
urlInput(){
// url 输入变化
cfg.current_edit_obj.attr("jurl", this.jurl);
},
urlInputSelect(){
// visual_select_code
cfg.current_edit_obj.attr("jurl", baseurl+"/page/visual/show.html?keyCode=" + this.visual_select_code );
cfg.current_edit_obj.attr("code",this.visual_select_code ) ;
},
changeNodeData(){ //修改设备选择框
var node_id = this.node_id;
cfg.current_edit_obj.attr("node_id",node_id);
cfg.current_edit_obj.attr("scene_id", this.scene_id);
resetNodeData(node_id);
if( this.nid == 1 || this.nid == 5 || this.nid == 8 || this.nid == 9 || this.nid == 10 ){
this.initSensorList();
}
},
initSceneList(){
var that = this ;
commonAjax('POST', baseurl+'/service/page/scene?paged=1&pageSize=999' , {} ,function (e) {
if(isOK(e)){
var data=e.data.data
that.sceneList = data;
}else{
that.sceneList = [];
}
}) ;
},
initSensorList( val ){ //初始化传感器
var that = this;
if( util.isEmpty(that.scene_id)
|| util.isEmpty(that.node_id ) ){
that.sensorList=[];
return ;
}
commonAjax('POST', baseurl+'/service/page/sensor?paged=1&pageSize=999' , {
scene_id: that.scene_id,
node_id: that.node_id ,
data_type: -1
} ,function (e) {
if(isOK(e)){
var data=e.data.data
that.sensorList=data;
if( val != null ){
app.sensor_id = val ;
}else{
app.sensor_id = '' ;
}
}else{
that.sensorList=[];
app.sensor_id = '' ;
}
}) ;
},
initVideoList(){ //初始化摄像头
var that = this;
if( util.isEmpty(that.scene_id) ){
return ;
}
commonAjax('POST', baseurl+'/service/page/video?paged=1&pageSize=999' , {
scene_id: that.scene_id
} ,function (e) {
if(isOK(e)){
var data=e.data.data
that.videoList=data;
}else{
that.videoList=[];
}
}) ;
},
initNodeList(){ //初始化设备
console.log("initNodeList.............")
var that = this;
if( util.isEmpty(that.scene_id) ){
that.nodeList=[];
return ;
}
commonAjax('POST', baseurl+'/service/page/node?paged=1&pageSize=999' , {
scene_id: that.scene_id
} ,function (e) {
if(isOK(e)){
var data=e.data.data
that.nodeList=data;
}else{
that.nodeList=[];
}
}) ;
},
initUploadImgList(){ //初始图片
var that = this;
commonAjax('POST',baseurl+'/service/page/moudle/visual?paged=1&pageSize=1999' , {
moudle_type:1
} ,function (e) {
if(isOK(e)){
var data = e.data.data ;
that.uploadImgs=data;
setTimeout(function(){
cfg.activeMenuNode($(".upload_img_ele"));
}, 500);
}else{
that.nodeList=[];
}
}) ;
},
imgScale(val){
if( val == 0 ){
// 原比例
cfg.current_edit_obj.children().addClass("normal");
}else{
// 缩放
cfg.current_edit_obj.children().removeClass("normal");
}
},
saveVisual(){ //保存组态
cfg.removeNodeEvent($(".activeDrag"));
cfg.groupDel();//删除组合
this.isdrag = false;
var that = this;
var config = {//系统属性
zIndexT:cfg.zIndexT
}
var param = {
keycode: keyCode ,
content:$(navPage).prop("outerHTML"),
config:JSON.stringify(config)
}
if(keyCode == null){
commonAjax('POST',baseurl+'/service/visual/display' , param ,function (res) {
if(isOk(res)){
id= res.data.id;
keyCode = res.data.keycode;
tip("保存成功");
}
}) ;
} else {
commonAjax('PUT',baseurl+'/service/visual/display' , param ,function (res) {
if(isOk(res)){
tip("保存成功");
}
}) ;
}
},
showVisual(){ //展示组态
if( keyCode == null){//
tip("请先保存后,再进行预览");
return;
} else {
window.open(baseurl+"/page/visual/show.html?keyCode="+keyCode);
}
},
initVisualInfo(){ //初始化组态数据 , 有id keycode: keyCode ,
if( keyCode != null){
var that = this;
commonAjax('GET', baseurl+'/service/visual/display?keycode=' + keyCode , "" ,function (e) {
if(isOK(e)){
console.log("initVisualInfo=",e)
var data=e.data;
if(util.isNotEmpty(data.config)){
var config = JSON.parse(data.config);
cfg.zIndexT = config.zIndexT;
}else{
cfg.zIndexT = 1 ;
}
that.visual_name = data.name ;
$(navPage).parent().html(data.content);
cfg.init();
reinitChartObj();
that.scene_id = data.scene_id ;
that.changeSceneData();
var bg = $(".edit-container").attr("bg") ;
if(bg!=null && bg!=''){
$(".edit-container").parent().css("background-color",bg) ;
}
var bgurl = $(".edit-container").attr("bgurl") ;
if( bgurl != null && bgurl != ''){
$(".edit-container").parent().css("background","url("+ bgurl +") no-repeat ") ;
$(".edit-container").parent().css("background-position","center top") ;
}
if(data.parent_id == null ){
id = data.id ;
}
that.initVisualListInfo({id: id}) ;
if(data.dis_type == 1 && (data.content == null || data.content == '' ) ){
that.canvensWidth = parseInt( that.canvensHeight/1.7778) ;
that.canvensWidthChange();
}
// 根据画布宽高,初始化值
if( data.content!=null && data.content != '' ){
setTimeout( function() {
app.canvensHeight = $(".edit-container").height();
app.canvensWidth = $(".edit-container").width();
}, 100);
}
}
}) ;
}
},
initVisualPart(){
// 获取组件类型
var that = this;
commonAjax('GET', baseurl+'/service/dictionary/130' , "" ,function (res) {
if(isOK(res)){
that.visualPartList = res.data ;
}
}) ;
},
initVisualListInfo(data){
var that = this ;
commonAjax('POST', baseurl+'/service/visual/display/sub/all' , data ,function (res) {
if(isOK(res)){
that.visualList = res.data ;
}
}) ;
},
clearBgImg(){
// $(".edit-container").removeAttr("bgurl") ;
$(".edit-container").css("background","") ;
// $(".edit-container").parent().css("background-position","") ;
},
chartMaxInput(){
// 输入最大值
var cl = cfg.current_edit_obj ;
cl.attr("max" , this.chartMax ) ;
},
changeChartColumn(){
// 增加边框
var cl = cfg.current_edit_obj ;
var nid = cl.attr("nid") ;
var cid = cl.attr("cid") ;
var optnj = eval("("+ cl.children(".chartStyle").attr("option") +")");
if(this.columnVal == 0){
optnj.series[0].outline.show = false ;
}else if(this.columnVal == 1){
optnj.series[0].outline.show = true ;
}
setChartOption( getEchartObj() ,optnj) ;
}
},created(){
},mounted() {
$("#app").show();
setTimeout( function() {
layer.closeAll();
$(".guide").show();
}, 1000);
this.guide = 1;
this.initUploadImgList();
this.initVisualInfo();
this.initSceneList();
this.initVisualPart();
this.handleChange();
$(".left-container").height($(window).height()-60);
$(".element-container").height($(window).height()-80);
this.canvensHeight = $(window).height()-60;
this.canvensWidth = $(".el-main").width()-240;
this.canvensWidthChange();
this.canvensHeightChange();
$(".el-main, #edit-content-area").height(this.canvensHeight);
$(".el-tabs__content").css("max-height" ,$(window).height()-100 ) ;
// 浏览器尺变化
/* window.addEventListener('resize', function(){
$(".left-container").height($(window).height()-60);
$(".element-container").height($(window).height()-80);
app.canvensHeight = $(window).height()-80;
app.canvensWidth = $(".el-main").width()-240;
app.canvensWidthChange();
app.canvensHeightChange();
$(".el-main,#edit-content-area").height(app.canvensHeight);
}) */
// 背景图上传更新
initBgImgUpload("upload_img_bg") ;
// 背景颜色
initColorSelect("#backcolor",function(color){
var hexColor = "transparent";
if(color){ hexColor = color.toRgbString(); }
if(!$(cfg.current_edit_obj).hasClass("edit-container")){
$(cfg.current_edit_obj).css("background-color",hexColor);
}
} , function(){});
initColorSelect("#backContainercolor",function(color){
var hexColor = "transparent";
if( color ){ hexColor = color.toRgbString(); }
if(cfg.current_edit_obj== null || cfg.current_edit_obj == '' ){
cfg.current_edit_obj = $(navPage)[0];
}
//处理特殊bug , 将背景色放到上一级上
$(cfg.current_edit_obj).parent().css("background-color",hexColor);
$(cfg.current_edit_obj).attr("bg",hexColor) ;
} , function(){} );
initColorSelect("#canvasContainercolor",function(color){
var hexColor = "transparent";
if( color ){ hexColor = color.toRgbString(); }
//处理特殊bug , 将背景色放到上一级上
$(".edit-container").css("background-color",hexColor);
} , function(){} );
//单击素材
$(document).delegate(".canvas","click",function(event){
hideMouseMenu();
var event = event || window.event;
if(event && event.stopPropagation) {
event.stopPropagation(); // W3C标准
}else {
event.cancelBubble = true; //ie678
}
if($(this).hasClass("textEditActive") || cfg.inGroup($(this))){
return;
}
$(cfg.current_edit_obj).find(".w-e-text").attr('contenteditable', false) ;
app.nid = $(this).attr("nid");
cfg.enterEditStatus($(this)); //进入编辑状态
})
// 删除数据
$(document).delegate(".deleteUploadImg","click",function(event){
var that = $(this) ;
commonAjax('DELETE', baseurl+'/service/moudle/visual.json?id='+ $(this).attr("id") , '',function(res){
if(res.status == 2){
// 删除成功
that.parent().parent().parent().remove();
}
} );
});
//双击素材
$(document).delegate(".canvas","dblclick",function(event){
hideMouseMenu();
var nid = $(this).attr("nid");
switch (nid) {
case "3": //高级文本
cfg.hideDraggableEvent($(this)); //移除拖动
$(this).addClass("textEditActive");
$(this).find(".w-e-text").attr('contenteditable', true) ;//启动编辑
break;
}
})
// 编辑区点击 - 转移到鼠标按下事件内
$(document).delegate(navPage,"click",function(event){
//hideMouseMenu();
//app.editType = -1 ;
//cfg.removeNodeEvent($(".activeDrag"));
//cfg.enterEditStatus($(this)); //进入编辑状态
});
//输入框动态更新旋转角度
$("#rotate_node").slider({
range:"max",
min:0,
max:360,
value:0,
slide:function(event, ui){
var size = ui.value;
app.rotate = size;
var cosVal = Math.cos(size * Math.PI / 180);
var sinVal = Math.sin(size * Math.PI / 180);
var valTransform = 'matrix('+ cosVal.toFixed(6) +','+ sinVal.toFixed(6) +','+ (-1 * sinVal).toFixed(6) +','+ cosVal.toFixed(6) +',0,0)';
$(cfg.current_edit_obj).css("transform","rotate("+size+"deg)");
}
});
//输入框动态更新旋转角度
$("#rotate_speed").slider({
range:"max",
min:0,
max:360,
value:0,
slide:function(event, ui){
var size = ui.value;
app.rotate_speed = size;
resetPipelineChartSpeedAndDir(size);
}
});
// 初始化字体颜色框
initColorSelect("#basicColor",function(color){
var hexColor = "transparent";
if(color){
hexColor = color.toRgbString();
}
//处理特殊bug
if(!$(cfg.current_edit_obj).hasClass("edit-container")){
$(cfg.current_edit_obj).css("color",hexColor);
}
// 这里对svg组件,特殊处理
var cl = cfg.current_edit_obj ;
var nid = cl.attr("nid") ;
var cid = cl.attr("cid") ;
if(nid == 2 && (cid == 8|| cid == 9 )){
var sc =cl.find("rect,line,circle,g,path,g") ;
for(var i=0;i<sc.length;i++){
if(util.isNotEmpty(sc.eq(i).attr("fill")) && sc.eq(i).attr("fill") != 'none' ){
sc.eq(i).attr("fill",hexColor);
}
if(util.isNotEmpty(sc.eq(i).attr("stroke")) && sc.eq(i).attr("stroke") != 'none' ){
sc.eq(i).attr("stroke",hexColor);
}
}
}else if(nid == 5 && cid < 3){
var optn = cl.children(".chartStyle").attr("option");
var optnj = eval("("+ optn +")");
$.extend(true, optnj , {
xAxis: {
axisLine : {
lineStyle: {
color: hexColor
}
}
},
yAxis: {
axisLine : {
lineStyle: {
color: hexColor
}
}
}
}) ;
var chart = getEchartObj();
setChartOption(chart,optnj) ;
}else if(nid == 5 && cid == 3){
var optn = cl.children(".chartStyle").attr("option");
var optnj = eval("("+ optn +")");
optnj.series[0].axisLabel = {
textStyle: {
color: hexColor
}
} ;
optnj.series[0].title = {
textStyle: {
color: hexColor
}
} ;
var chart = getEchartObj();
setChartOption(chart,optnj) ;
}else if(nid == 5 && cid == 4){
var optn = cl.children(".chartStyle").attr("option");
var optnj = eval("("+ optn +")");
optnj.series[0].color = ['rgba('+ color._r +', '+ color._g +', '+ color._b +', 0.5)'] ;
var chart = getEchartObj();
setChartOption(chart,optnj) ;
}
});
/*====================== 自定义右键菜单 ======================*/
//编辑区 - 转移到鼠标按下事件内
$(".el-container").on("contextmenu",navPage,function(ev) {
return false;
});
//编辑区 素材
$(".el-container").on("contextmenu",".canvas",function(ev) {
if(cfg.inGroup($(this))){//元素在组合内
return;
}
var oEvent = ev || event;
//自定义的菜单显示
hideMouseMenu();
var menu = $("#opration");
menu.show();
//让自定义菜单随鼠标的箭头位置移动
menu.css("left",oEvent.clientX + "px");
menu.css("top",oEvent.clientY + "px");
//素材进入编辑状态
var obj = $(this);
cfg.enterEditStatus(obj); //进入编辑状态
if(obj.attr("nid")==7){//组合的菜单只有删除功能
$("#downMoveOne").addClass("item_disabled");
$("#downMoveAll").addClass("item_disabled");
$("#copyNode").addClass("item_disabled");
$("#upMoveOne").addClass("item_disabled");
$("#upMoveAll").addClass("item_disabled");
}else{
$("#downMoveOne").removeClass("item_disabled");
$("#downMoveAll").removeClass("item_disabled");
$("#copyNode").removeClass("item_disabled");
$("#upMoveOne").removeClass("item_disabled");
$("#upMoveAll").removeClass("item_disabled");
}
//是否可以上移下移
checkCoincide($(this));
return false;
});
//禁止页面点击
document.oncontextmenu = function(){
return false;
}
//隐藏鼠标右键菜单
function hideMouseMenu(){
$("#oprationEdit").hide();//隐藏编辑区菜单
$("#opration").hide();//隐藏素材菜单
}
//菜单左对齐
$(".dir_operate").click(function(){
changeConAlign(cfg.current_edit_obj,$(this).attr("tag"));
hideMouseMenu();
})
//菜单复制
$("#copyNode").click(function(){
if($(this).hasClass("item_disabled")){//禁止点击
return;
}
cfg.clone_obj = $(cfg.current_edit_obj)[0];
hideMouseMenu();
})
//菜单下移一层
$("#downMoveOne").click(function(){
if($(this).hasClass("item_disabled")){//没有粘贴对象
return;
}
changeNodeIndex(cfg.current_edit_obj,"down");
checkCoincide(cfg.current_edit_obj);
})
//菜单下移底层
$("#downMoveAll").click(function(){
if($(this).hasClass("item_disabled")){//没有粘贴对象
return;
}
changeNodeIndex(cfg.current_edit_obj,"down",true);
checkCoincide(cfg.current_edit_obj);
})
//菜单上移一层
$("#upMoveOne").click(function(){
if($(this).hasClass("item_disabled")){//没有粘贴对象
return;
}
changeNodeIndex(cfg.current_edit_obj,"up");
checkCoincide(cfg.current_edit_obj);
})
//菜单上移顶层
$("#upMoveAll").click(function(){
if($(this).hasClass("item_disabled")){//没有粘贴对象
return;
}
changeNodeIndex(cfg.current_edit_obj,"up",true);
checkCoincide(cfg.current_edit_obj);
})
//菜单粘贴
$("#pasteNode").click(function(){
if($(this).hasClass("item_disabled")){//没有粘贴对象
return;
}
var x1 = $(this).offset().top;
var y1 = $(this).offset().left;
var x2 = $(navPage).offset().top;
var y2 = $(navPage).offset().left;
var obj = $(cfg.clone_obj).clone();
if($(cfg.clone_obj).attr("nid") == 3){
// 复制高级文本
var obj = $(".high-txt").clone();
}
obj.appendTo($(navPage));//进入编辑区
obj.removeClass("high-txt");
cfg.generateNewNode(obj,{
"top":x1-x2+"px",
"left":y1-y2+"px"
});
cfg.enterEditStatus(obj); //进入编辑状态
hideMouseMenu()
})
//菜单删除
$("#deleteNode").click(function(){
if( util.isNotEmpty( cfg.current_edit_obj ) && !cfg.current_edit_obj.hasClass("edit-container")){
cfg.current_edit_obj.remove();
hideMouseMenu();
}
})
//键盘监听
$(document).keydown(function(event){
var key = event.keyCode;
if(key=="46"){
$("#deleteNode").click();
}
});
//拖动选中元素事件
$(document).on('mousedown', navPage, function(eventDown){
var key = eventDown.which; //获取鼠标键位
if(key == 1){ //如果鼠标左键按下
var target = $(eventDown.target);
//如果有选中区域。未进行组合则删除
if($(navPage).find(".tempGroup").length != 0){
if(target.closest(".tempGroup").length == 0){
cfg.groupDel();
}
}
hideMouseMenu();
if(target.closest(".canvas").length == 0){
app.editType = -1 ;
cfg.removeNodeEvent($(".activeDrag"));
}
//判断点击相关素材不可执行
if(target.closest(".canvas").not(".Locking").length == 0){
// 创建选框节点
var $selectBoxDashed = $('<div class="selectBox" id="selectBox"></div>');
$("body").append($selectBoxDashed);
// 设置选框的初始位置
var startX = eventDown.pageX || eventDown.offsetX;
var startY = eventDown.pageY || eventDown.offsetY;
$selectBoxDashed.css
({
left: startX,
top : startY
});
//根据鼠标移动,设置选框宽高
var __x = null;
var __y = null;
//监听鼠标移动事件
$(document).on('mousemove', function(eventMove){
//根据鼠标移动,设置选框的位置、宽高
__x = eventMove.pageX || eventMove.offsetX;
__y = eventMove.pageY || eventMove.offsetY;
// 暂存选框的位置及宽高,用于将 选中
var __left = Math.max(__x, startX);
var minLeft = Math.min(__x, startX);
var __top = Math.max(__y, startY);
var minTop = Math.min(__y, startY);
var __width = Math.abs(__x - startX);
var __height = Math.abs(__y - startY);
$selectBoxDashed.css(
{
left : minLeft,
top : minTop,
width : __width,
height: __height
});
// 遍历容器中的选项,进行选中操作
$(navPage+ "> .canvas").removeClass('is-selected');
$(navPage+ "> .canvas").not(".Locking").each(function()
{
var $item = $(this);
var itemX_pos = $item.prop('offsetWidth') + $item.offset().left;
var itemY_pos = $item.prop('offsetHeight') + $item.offset().top;
//判断添加以及删除
var condition1 = itemX_pos <= __left;
var condition2 = itemY_pos <= __top;
var condition3 = $item.offset().left >= minLeft;
var condition4 = $item.offset().top >= minTop;
if(condition1 && condition2 && condition3 && condition4)
{
$item.addClass('is-selected');
}else
{
$item.removeClass('is-selected');
}
});
});
$("body").one('mouseup', function(){
cfg.current_edit_obj = null ;
app.editType = -1 ;
app.nid = -1 ;
//鼠标按键抬起删除鼠标移动事件
$(document).off('mousemove');
$selectBoxDashed.remove();
var shu = $(navPage).children(".is-selected").length;
if(shu > 1)
{
//预添加组合
var arrayGroup = [];
var kLeft = $(navPage).offset().left -1;
var kTop = $(navPage).offset().top -1;
$(navPage).children(".is-selected").each(function(index)
{
var offset = $(this).offset();
var Nheight = $(this).height();
var Nwidth = $(this).width();
var NTop = offset.top - kTop;
var Nleft = offset.left - kLeft;
arrayGroup.push([Nleft,NTop,Nwidth,Nheight]);
if((index+1) == shu)
{
$(navPage).children(".is-selected").wrapAll('<div class="canvas tempGroup canvasId" nid="7" Lid="0"><div class="canvas-con"></div></div>');//添加组合前
var minLeft = -1;//获取最小left偏移量
var minTop = -1;//计算top偏移量和高
var maxWidth = [];//计算宽度
var maxHeight= [];//计算高度
for (var LT = 0; LT < arrayGroup.length; LT++)
{
//获取最小left
if (minLeft > arrayGroup[LT][0] || minLeft === -1)
{
minLeft = arrayGroup[LT][0];
}
//获取最小top
if (minTop > arrayGroup[LT][1] || minTop === -1)
{
minTop = arrayGroup[LT][1];
}
//计算宽高
if((LT+1) == arrayGroup.length)
{
//计算宽
for (var W = 0; W < arrayGroup.length; W++)
{
var wid =(arrayGroup[W][0] + arrayGroup[W][2]) - minLeft;
maxWidth.push(wid);
}
//计算高
for (var H = 0; H < arrayGroup.length; H++)
{
var hei =(arrayGroup[H][1] + arrayGroup[H][3]) - minTop;
maxHeight.push(hei);
}
}
}
var MaxW = (Math.max.apply(null, maxWidth));
var MaxH = (Math.max.apply(null, maxHeight));
//布局
var Width = MaxW;//parseInt(MaxW);
var newLeft = minLeft;//parseInt(minLeft);
var height = MaxH;//parseInt(MaxH);
var newTop = minTop;//parseInt(minTop);
var zIndexT = cfg.zIndexT;
cfg.zIndexT = zIndexT+1;
$(navPage+ "> .tempGroup").css(
{
"top":newTop,
"left":newLeft,
"width":Width,
"height":height,
"z-index":zIndexT,
});
//初始化拖动
cfg.activeCommonNode($(navPage+ "> .tempGroup"));
/*从新计算选中元素宽高*/
$(navPage+ "> .tempGroup").find(".is-selected").each(function(index)
{
if(index == 0)
{
$(this).addClass("Equal");
}
var thisTop = $(this).css("top").replace(/[a-z]/g,"");
var thisLeft = $(this).css("left").replace(/[a-z]/g,"");
var Top = Number(thisTop) - Number(newTop) + "px";
var Left = Number(thisLeft) - Number(newLeft) + "px";
$(this).css({"top":Top,"left":Left});
$(this).addClass("resiz_canvas");
$(this).removeClass("is-selected");
//$(this).draggable("destroy");//禁止拖动
});
//有时候会出现选中全页面文字。
$(".el-container").focus();
$(".el-container").click();
}
});
}
});
}
} else if(key == 3){
var oEvent = eventDown || event;
//自定义的菜单显示
hideMouseMenu();
//如果存在可粘贴对象则可粘贴
if(cfg.clone_obj!=null && cfg.clone_obj!= '' ){
$("#pasteNode").removeClass("item_disabled");
}else{
return false ;
}
var menu = $("#oprationEdit");
menu.show();
$("#opration").hide();//隐藏另一个菜单
//让自定义菜单随鼠标的箭头位置移动
menu.css("left",oEvent.clientX + "px");
menu.css("top",oEvent.clientY + "px");
cfg.removeNodeEvent($(".activeDrag"));
}
});
//检查是否存在重合 比当前素材优先级高的
function checkCoincide(obj){
var left = obj.prop('offsetLeft');
var top = obj.prop('offsetTop');
var width = obj.prop('offsetWidth');
var height = obj.prop("offsetHeight");
var zIndex = obj.css("z-index");
var up_flag = false;//可以上移
var down_flag = false;//可以下移
//除了当前选择素材之外的素材 有没有重合的
$(".canvas").not(".activeDrag").each(function(){
var zIndexO = $(this).css("z-index");
var leftO = $(this).prop('offsetLeft');
var topO = $(this).prop('offsetTop');
var widthO = $(this).prop('offsetWidth');
var heightO = $(this).prop("offsetHeight");
var conditionL = leftO+widthO<left;//左边
var conditionT = topO+heightO<top;//上面
var conditionR = leftO>left+width;//右边
var conditionB = topO>top+height;//下面
if(conditionL||conditionT||conditionR||conditionB){//没有重合
} else {//重合
if(zIndexO>zIndex){
down_flag = true;
} else if(zIndexO<zIndex){
up_flag = true;
}
}
})
if(down_flag){
$("#upMoveOne").removeClass("item_disabled");
$("#upMoveAll").removeClass("item_disabled");
} else {
$("#upMoveOne").addClass("item_disabled");
$("#upMoveAll").addClass("item_disabled");
}
if(up_flag){
$("#downMoveOne").removeClass("item_disabled");
$("#downMoveAll").removeClass("item_disabled");
} else {
$("#downMoveOne").addClass("item_disabled");
$("#downMoveAll").addClass("item_disabled");
}
}
//改变元素层级 type:1、up 上移 2、down 下移 ,isMax 是否到最底或者最顶层 true为是
function changeNodeIndex(obj,type,isMax){
var left = obj.prop('offsetLeft');
var top = obj.prop('offsetTop');
var width = obj.prop('offsetWidth');
var height = obj.prop("offsetHeight");
var zIndex = obj.css("z-index");
var up_arr = new Array();//可以上移
var down_arr = new Array();//可以下移
//除了当前选择素材之外的素材 有没有重合的
$(".canvas").not(".activeDrag").each(function(){
var zIndexO = $(this).css("z-index");
var leftO = $(this).prop('offsetLeft');
var topO = $(this).prop('offsetTop');
var widthO = $(this).prop('offsetWidth');
var heightO = $(this).prop("offsetHeight");
var conditionL = leftO+widthO<left;//左边
var conditionT = topO+heightO<top;//上面
var conditionR = leftO>left+width;//右边
var conditionB = topO>top+height;//下面
if(conditionL||conditionT||conditionR||conditionB){//没有重合
;
} else {//重合
if(zIndexO>zIndex){
var sub = [zIndexO,$(this)];
up_arr.push(sub);
} else if(zIndexO<zIndex){
var sub = [zIndexO,$(this)];
down_arr.push(sub);
}
}
})
if(type=="up"){
var arrayObj=up_arr;
arrayObj.sort(function(a,b){
return a[0].localeCompare(b[0])
})
if(isMax==true){//自己置为最大,比原来的自己大的-1
var own_index = parseInt(obj.css("z-index"));
var max_index = arrayObj[arrayObj.length-1][0];
obj.css("z-index",max_index);
$(".canvas").not(".activeDrag").each(function(){
var index = parseInt($(this).css("z-index"));
if(index>own_index){
$(this).css("z-index",index-1);
}
})
} else {
var tempIndex;
var tempObj;
tempIndex = arrayObj[0][0];
tempObj = arrayObj[0][1];
obj.css("z-index",tempIndex);
tempObj.css("z-index",zIndex);
}
} else if (type=="down") {
var arrayObj=down_arr;
var tt = arrayObj.sort(function(a,b){
return b[0].localeCompare(a[0])
})
if(isMax==true){//自己置为1,比原来的自己大的+1
var own_index = parseInt(obj.css("z-index"));
//var max_index = arrayObj[arrayObj.length-1][0];
obj.css("z-index",1);
$(".canvas").not(".activeDrag").each(function(){
var index = parseInt($(this).css("z-index"));
if(index<own_index){
$(this).css("z-index",index+1);
}
})
} else {
var tempIndex;
var tempObj;
tempIndex = arrayObj[0][0];
tempObj = arrayObj[0][1];
obj.css("z-index",tempIndex);
tempObj.css("z-index",zIndex);
}
}
}
//改变组合框内元素方向
function changeConAlign(obj,dir){
var canvas = obj.find(".canvas");
if(dir==0){
canvas.css("top",0);
canvas.css("bottom",'');
} else if(dir==1){//left组合框宽度减去元素自身宽度
var w = obj.width();
for (var i = 0; i < canvas.length; i++) {
var canva = canvas[i];
$(canva).css("left",w-$(canva).width()+"px");
}
} else if(dir==2){
var h = obj.height();
for (var i = 0; i < canvas.length; i++) {
var canva = canvas[i];
$(canva).css("top",h-$(canva).height()+"px");
}
} else if(dir==3){
canvas.css("left",0);
canvas.css("right",'');
}
}
}
})
</script>
</html>