前台:
@model List<JZGrain.Model.TBS_AnQuanBiaoZhu>
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="renderer" content="webkit|ie-comp|ie-stand">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
<meta http-equiv="Cache-Control" content="no-siteapp" />
<link href="~/Content/css/H-ui.admin.css" rel="stylesheet" />
@Styles.Render("~/Content/ListPage_Css")
@Styles.Render("~/Content/EditPage_Css")
<!--[if lt IE 9]>
<script type="text/javascript" src="@Url.Content("~/lib/html5.js")"></script>
<script type="text/javascript" src="@Url.Content("~/lib/respond.min.js")"></script>
<script type="text/javascript" src="@Url.Content("~/lib/PIE_IE678.js")"></script>
<![endif]-->
<!--[if IE 6]>
<link href="~/Content/css/H-ui.admin.css" rel="stylesheet" />
<script type="text/javascript" src="@Url.Content("~/lib/DD_belatedPNG_0.0.8a-min.js")" ></script>
<script>DD_belatedPNG.fix('*');</script>
<![endif]-->
<!--弹窗S-->
<link href="~/Content/css/H-ui.min.css" rel="stylesheet" />
<link href="~/Content/css/style_1.css" rel="stylesheet" />
<script src="~/Scripts/jquery.js"></script>
<script src="~/Scripts/bootstrap.js"></script>
<!--弹窗E-->
<title>安全区域</title>
<style type="text/css">
* {
padding: 0;
margin: 0;
}
.box {
margin: 10px;
}
.img_box {
position: relative;
width: 1000px;
height: 600px;
}
.img_box .maodian {
position: absolute;
padding: 5px 10px;
border-right: 5px;
filter: alpha(opacity=40);
-moz-opacity: 1;
opacity: 1;
top: 100px;
left: 10px;
font-size: 12px;
font-family: "宋体";
cursor: pointer;
}
.maodian a {
color: #FFF;
text-decoration: none;
}
</style>
@Scripts.Render("~/bundles/ListPage_JS")
<script type="text/javascript">
//加载所有标注
function BodyOnLoad() {
$.ajax({
url: "/xitongguanli/anquanquyu/BiaoZhuList",
type: 'POST',
dataType: 'json',
success: function (data, status, xhr) {
$.each(data, function (index, comment) {
var title = comment.MingCheng;//取得标题内容
var id = comment.ID;
var lx = comment.Lx;
var ly = comment.Ly;
var html = "<p class='maodian' style='top:" + ly + ";left:" + lx + "' id='" + id + "'><img src='/Content/images/BiaoZhuRed.png' /><a href='javascript:void(0)'><font color=\"red\" >" + title + "</font></a></p>";//组装P标签
$(".img_box").append(html);
});
},
Error: function (xhr, error, exception) {
// handle the error.
alert(exception.toString());
}
});
}
//当鼠标悬浮在某一标注时,显示该标注信息
function PartialDetail(id, name) {
$.ajax({
type: "POST",
url: '@Url.Action("PartialAction", "AnQuanQuYu")',
data: { id: id },
datatype: "json",
success: function (data) {
layer.open({
type: 1,
title: name,
area: ['600px', '360px'],
shadeClose: true, //点击遮罩关闭
content: data
});
},
error: function (XMLHttpRequest, textStatus, errorThrown) {
//alert(errorThrown);
}
});
}
$(function () {
//绑定弹窗
$(".img_box").delegate(".maodian", "dblclick", function () {
PartialDetail($(this).attr("id"), $(this).find('a').text());
});
//绑定标签鼠标按下事件
$(".img_box").delegate(".maodian", "mousedown", function (e) {
obj = $(this);//把当前标签对象赋值给变量
if (obj.setCapture) { //用于兼容非准浏览器
obj.setCapture();
}
var _x = e.pageX - obj.offset().left;//取得鼠标到标签左边left的距离
var _y = e.pageY - obj.offset().top; //取得鼠标到标签顶部top的距离
var oWidth = $(this).outerWidth(); //取得标签的宽,包括padding
var oHeight = $(this).outerHeight();//取得标签的高,包括padding
var x = 0, y = 0; //定义移动的全局变量
$(".maodian").bind("mousemove", function (e) {
var img_position = $(".img_box").offset(); //取得图片的位置
x = e.pageX - _x - img_position.left; //计算出移动的x值
y = e.pageY - _y - img_position.top; //计算出移动的y值
if (x < 0) { //如果移动小于0,证明移到了图片外,应设为0
x = 0;
} else if (x > ($(".img_box img").width() - oWidth)) {
//如果移动大于图片的宽度减去标签的宽度,证明移到了图片外,应该设为可用的最大值
x = $(".img_box img").width() - oWidth;
}
if (y < 0) { //同上
y = 0;
} else if (y > ($(".img_box img").height() - oHeight)) {
y = $(".img_box img").height() - oHeight;
}
obj.css({ "left": x, "top": y });
});
$(".img_box").bind("mouseup", function () { //绑定鼠标左键弹起事件
$('.maodian').unbind("mousemove"); //移动mousemove事件
$(this).unbind("mouseup"); //移动mouseup事件
if (obj.releaseCapture) { //兼容非标准浏览器
obj.releaseCapture();
}
});
return false; //用于选中文字时取消浏览器的默认事件
});
//绑定保存事件
$(".btn").click(function () {
var ids = new Array();
var lefts = new Array();
var tops = new Array();
//获取每个标注的ID、Lx、Ly
$('.img_box p').each(function (i, data) {
ids[ids.length] = data.id;
lefts[lefts.length] = data.style.left;
tops[tops.length] = data.style.top;
});
$.ajax({
url: "/xitongguanli/anquanquyu/SaveBiaoZhu",
type: 'POST',
async: false,
data: { 'id': ids, 'left': lefts, 'top': tops },
traditional: true,
success: function (data, status) {
if (data.length > 0) {
msg(data, 2);
}
else {
msg("操作成功!", 1);
}
},
Error: function (xhr, error, exception) {
// handle the error.
msg("请求失败,请重试!", 2);
}
});
})
});
</script>
</head>
<body οnlοad="BodyOnLoad()">
<div class="img_box">
<img style="width:100%;height:100%" src="@ViewBag.imgsrcList" />
</div>
</body>
</html>
后台:
/// <summary>
/// Ajax获取标注
/// </summary>
/// <returns></returns>
public string BiaoZhuList()
{
Expression<Func<TBS_AnQuanBiaoZhu, bool>> whereLamdba = null;
int s = Enum是否.否.GetHashCode();
whereLamdba = whereExpression.And(whereLamdba, x => x.ShanChuBiaoJi == s);
List<TBS_AnQuanBiaoZhu> list_bianzhu = TBS_AnQuanBiaoZhuService.FindList(whereLamdba).ToList<TBS_AnQuanBiaoZhu>();
return JsonHelp.SerializeObject(list_bianzhu);
}
#region 展示某个标注信息
/// <summary>
/// 某个标注信息
/// </summary>
/// <param name="id"></param>
/// <returns></returns>
public string PartialAction(Guid id)
{
StringBuilder str = new StringBuilder();
var bumen = TBS_AnQuanBiaoZhuService.GetEntity(id);
if (bumen != null)
{
str.Append("<div style=\"padding:20px;\">");
str.Append("<h2 style=\"padding-bottom:10px;\">名 称:" + bumen.MingCheng + "</h2>");
str.Append("<h2 style=\"padding-bottom:10px;\">负责人:" + bumen.FuZeRen + "</h2>");
str.Append("<h2 style=\"padding-bottom:10px;\">备 注:" + bumen.Remark + "</h2>");
str.Append("</div>");
}
return str.ToString();
}
#endregion
public ActionResult QuYuEdit(Guid? id, string msg = "")
{
ViewData["result"] = msg;
Expression<Func<TBS_Logo, bool>> whereLamdba = null;
Action<Orderable<TBS_AnQuanBiaoZhu>> orderBy = query => query.Desc(j => j.XiuGaiShiJian);
List<TBS_AnQuanBiaoZhu> list = TBS_AnQuanBiaoZhuService.GetListAll().OrderByDescending<TBS_AnQuanBiaoZhu, DateTime?>(j => j.XiuGaiShiJian).ToList<TBS_AnQuanBiaoZhu>();
int s = Enum是否.否.GetHashCode();
whereLamdba = whereExpression.And(whereLamdba, x => x.ShanChuBiaoJi == s && x.ID_Type == 3);
List<TBS_Logo> list_logo = Service.FindList(whereLamdba).ToList<TBS_Logo>();
if (list_logo.Count > 0)
{
ViewBag.imgsrcList = list_logo[0].LogoUrl;
}
else
{
ViewBag.imgsrcList = "";
}
return View(list);
}
[HttpPost]
public string SaveBiaoZhu(string[] id, string[] left, string[] top)
{
TBS_AnQuanBiaoZhu tbs_gerenyonghu = null;
try
{
for (int i = 0; i < id.Length; i++)
{
tbs_gerenyonghu = TBS_AnQuanBiaoZhuService.GetEntity(Guid.Parse(id[i]));
if (tbs_gerenyonghu != null)
{
tbs_gerenyonghu.Lx = left[i];
tbs_gerenyonghu.Ly = top[i];
TBS_AnQuanBiaoZhuService.Update(tbs_gerenyonghu);
}
}
}
catch (Exception ex)
{
return ex.Message;
}
return "";
}