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
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="">大小 (默认)</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="">字体 (默认)</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="">行高 (默认)</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="">对齐 (默认)</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 </span>
|
|
<input class="input-style" v-model="canvensx" @input="canvensxChange" style="margin-right: 15px;">
|
|
<span style="padding-right: 5px;">Y </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>最大值(<)</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>
|
|
|