CNCEC_SUBQHSE_WUHUAN/SGGL/FineUIPro.Web/CQMS/ProjectHighlightsSite/ProjectHighlightsSitePic.aspx

163 lines
8.5 KiB
Plaintext
Raw Normal View History

2025-12-24 19:29:40 +08:00
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="ProjectHighlightsSitePic.aspx.cs" Inherits="FineUIPro.Web.CQMS.ProjectHighlightsSite.ProjectHighlightsSitePic" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>项目现场亮点照片</title>
<link href="../../res/css/common.css" rel="stylesheet" type="text/css" />
<link href="../../res/css/viewer.min.css" rel="stylesheet" />
<script src="../../res/js/jquery-3.4.1.min.js" type="text/javascript"></script>
<script src="../../res/js/viewer.min.js" type="text/javascript"></script>
<style type="text/css">
.customlabel span {
margin-left: 140px;
color: red;
font-weight: bold;
}
.f-grid-row .f-grid-cell-inner {
white-space: normal;
word-break: break-all;
}
.imgPreview {
display: none;
top: 0;
left: 0;
width: 100%; /*容器占满整个屏幕*/
height: 100%;
position: fixed;
background: rgba(0, 0, 0, 0.5);
}
.imgPreview img {
z-index: 100;
width: 60%;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
/*添加鼠标移入图片效果*/
.img {
cursor: url("ico/放大镜.png"), auto;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<f:PageManager ID="PageManager1" AutoSizePanelID="Panel1" runat="server" />
<f:Panel ID="Panel1" runat="server" Margin="5px" BodyPadding="5px" Title="项目现场亮点照片" ShowHeader="false" Layout="HBox">
<Items>
<f:Grid ID="Grid1" Title="项目现场亮点照片" ShowHeader="false" EnableCollapse="true" PageSize="100000" ForceFit="true"
ShowBorder="true" AllowPaging="false" IsDatabasePaging="false" runat="server" EnableColumnLines="true" EnableRowDoubleClickEvent="true" OnRowDoubleClick="Grid1_RowDoubleClick"
DataKeyNames="Id" DataIDField="Id" OnPageIndexChange="Grid1_PageIndexChange" AllowFilters="true" OnFilterChange="Grid1_FilterChange" EnableTextSelection="True">
<Toolbars>
<f:Toolbar ID="Toolbar2" Position="Top" runat="server">
<Items>
<f:DropDownList runat="server" EnableSimulateTree="True" LabelAlign="Right" Label="大类" ID="drpMainType" AutoPostBack="true" OnSelectedIndexChanged="drpMainType_SelectedIndexChanged">
</f:DropDownList>
<f:DropDownList ID="drpReport" runat="server" Label="上报" LabelAlign="Right" EnableEdit="true" AutoPostBack="true" OnSelectedIndexChanged="drpMainType_SelectedIndexChanged" LabelWidth="80px" Width="200px">
<f:ListItem Text="-请选择-" Value="" />
<f:ListItem Text="已上报" Value="1" />
<f:ListItem Text="未上报" Value="0" />
</f:DropDownList>
<f:DropDownList ID="drpUploadPic" runat="server" Label="亮点照片" LabelAlign="Right" EnableEdit="true" AutoPostBack="true" OnSelectedIndexChanged="drpMainType_SelectedIndexChanged" LabelWidth="80px" Width="200px">
<f:ListItem Text="-请选择-" Value="" />
<f:ListItem Text="已上传" Value="1" />
<f:ListItem Text="未上传" Value="0" Selected="true" />
</f:DropDownList>
<f:ToolbarFill runat="server"></f:ToolbarFill>
<f:Label ID="Label3" runat="server" Text="双击或者选中数据行,鼠标右键维护项目现场亮点信息" CssClass="customlabel"></f:Label>
<%--<f:Button ID="btnGet" Text="获取" ToolTip="从集团获取项目现场亮点类型" Icon="FolderPage" runat="server" OnClick="btnGet_Click">
</f:Button>--%>
</Items>
</f:Toolbar>
</Toolbars>
<Columns>
<f:RowNumberField EnablePagingNumber="true" HeaderText="序号" Width="50px" HeaderTextAlign="Center" TextAlign="Center" />
<f:RenderField Width="120px" ColumnID="MainTypeName" DataField="MainTypeName" FieldType="String"
HeaderText="大类" HeaderTextAlign="Center" TextAlign="Center">
</f:RenderField>
<f:RenderField Width="180px" ColumnID="SubType" DataField="SubType" FieldType="String"
HeaderText="小类" HeaderTextAlign="Center" TextAlign="Left">
</f:RenderField>
<f:TemplateField ColumnID="tfImageUrl1" MinWidth="120px" HeaderText="亮点照片" HeaderTextAlign="Center"
TextAlign="Center">
<ItemTemplate>
<asp:Label ID="lbImageUrl1" runat="server" Text='<%# ConvertImageUrlByImage(Eval("PicUrl")) %>'></asp:Label>
</ItemTemplate>
</f:TemplateField>
<f:RenderField Width="320px" ColumnID="Resume" DataField="Resume" FieldType="String"
HeaderText="亮点描述" HeaderTextAlign="Center" TextAlign="Left" ExpandUnusedSpace="true">
</f:RenderField>
</Columns>
<Listeners>
<f:Listener Event="beforerowcontextmenu" Handler="onRowContextMenu" />
</Listeners>
</f:Grid>
</Items>
</f:Panel>
<f:Window ID="Window1" Title="成果" Hidden="true" EnableIFrame="true" EnableMaximize="true"
Target="Parent" EnableResize="false" runat="server" IsModal="true" OnClose="Window1_Close"
Width="680px" Height="520px">
</f:Window>
<f:Menu ID="Menu1" runat="server">
<Items>
<f:MenuButton ID="btnMenuModify" EnablePostBack="true" runat="server" Text="维护亮点" Icon="Pencil" OnClick="btnMenuModify_Click" Hidden="true">
</f:MenuButton>
<f:MenuButton ID="btnMenuDel" EnablePostBack="true" runat="server" Icon="Delete" Text="删除亮点信息" ConfirmText="确定删除亮点信息?"
OnClick="btnMenuDel_Click" Hidden="true">
</f:MenuButton>
</Items>
</f:Menu>
</form>
<div class="imgPreview">
<img src="#" alt="" id="imgPreview" />
</div>
<script type="text/javascript">
var menuID = '<%= Menu1.ClientID %>';
// 返回false来阻止浏览器右键菜单
function onRowContextMenu(event, rowId) {
F(menuID).show(); //showAt(event.pageX, event.pageY);
return false;
}
function reloadGrid() {
__doPostBack(null, 'reloadGrid');
}
var imgID = '<%=Grid1.ClientID %>';
function showImg() {
var $wrap = $("#" + imgID)
console.log($wrap)
$wrap.find('img').on('click', function () {
var src = $(this).attr('src');
console.log(src)
if (src.indexOf("/res/icon") != -1) {
return;
}
var div = document.createElement('div');
div.style.display = 'none';
div.innerHTML = '<img src="' + src + '">'; // 创建一个包含图片的 div 元素
document.body.appendChild(div); // 将 div 元素添加到页面中
var viewer = new Viewer(div.firstChild); // 创建 Viewer 实例并传入图片元素
viewer.show(); // 显示图片预览
// 在 Viewer 关闭后移除添加的 div 元素
viewer.on('hidden', function () {
document.body.removeChild(div);
});
});
$('.imgPreview').on('click', function () {
// $('.imgPreview').hide()
});
}
F.ready(function () {
showImg();
})
</script>
</body>
</html>