This commit is contained in:
geh
parent
6c67afae72
commit
33faec600a
|
|
@ -587,7 +587,7 @@
|
|||
if (params.seriesType == "effectScatter") {
|
||||
// alert("点击了" + params.name)
|
||||
var projectId = params.data && params.data.id ? params.data.id : '';
|
||||
var jumpUrl = "../HSSE/KqShowScreen/KqShowScreen.aspx?projectId=" + encodeURIComponent(projectId);
|
||||
var jumpUrl = "../DataShow/kqProject.aspx?projectId=" + encodeURIComponent(projectId);
|
||||
window.open(jumpUrl)
|
||||
}
|
||||
// 你可以在这里添加你的逻辑代码
|
||||
|
|
|
|||
|
|
@ -0,0 +1,877 @@
|
|||
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="kqProject.aspx.cs" Inherits="FineUIPro.Web.DataShow.kqProject" %>
|
||||
|
||||
<!DOCTYPE html>
|
||||
|
||||
<html lang="en">
|
||||
<head runat="server">
|
||||
<meta charset="UTF-8"/>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
|
||||
<title></title>
|
||||
</head>
|
||||
<link rel="stylesheet" href="../res/css/kq.css?t=129873"/>
|
||||
<script src="../res/lib/flex.js"></script>
|
||||
<body>
|
||||
<div id="app">
|
||||
<header>
|
||||
<div class="nav-box" style="padding-left: 0.3rem">
|
||||
<div class="logo-img"></div>
|
||||
<div class="navs" style="justify-content: flex-end">
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class="logo-tit">QHSE系统实名制管理看板</div>
|
||||
<div class="nav-box" style="padding-right: 0.3rem">
|
||||
<div class="navs" style="justify-content: flex-start">
|
||||
|
||||
</div>
|
||||
<div class="timer">
|
||||
<p>
|
||||
<span>{{timer.city}}</span><span>{{timer.time}}</span>
|
||||
</p>
|
||||
<p>
|
||||
<span>{{timer.date}}</span><span>{{timer.week}}</span>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="set">
|
||||
<div class="iconfont">项目：{{projectName}}</div>
|
||||
<div class="iconfont icon-nav08" @click="onToggleFullscreen">全屏</div>
|
||||
</div>
|
||||
</header>
|
||||
<div id="content">
|
||||
<div>
|
||||
<div id="tools" class="block" style="height: 100%">
|
||||
<div class="block-tit">
|
||||
<span>劳务人员工种结构 TOP10</span>
|
||||
</div>
|
||||
<div class="block-main flex-between">
|
||||
<div class="top-row" v-for="(i,idx) in lw" ::key="idx">
|
||||
<div class="top-row-num color-blue">{{idx|formatNumber}}</div>
|
||||
<div class="top-row-r">
|
||||
<div class="top-row-r-t">
|
||||
<span class="color-blue">
|
||||
{{i.name}}
|
||||
</span
|
||||
><span class="color-05937B">{{i.value}}个</span>
|
||||
</div>
|
||||
<div class="top-row-r-b">
|
||||
<div
|
||||
class="top-row-r-b-inner"
|
||||
:style="{width: formatPercent(i.value)}">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="tools" class="block" style="height: calc(100% - 0.25rem)">
|
||||
<div class="block-tit">
|
||||
<span>劳务人员</span>
|
||||
</div>
|
||||
<div class="block-main ry">
|
||||
<div class="th">
|
||||
<span>序号</span><span>头像</span>
|
||||
<span>
|
||||
姓名
|
||||
</span
|
||||
><span>工种</span><span>时间</span>
|
||||
</div>
|
||||
<div class="body">
|
||||
<div class="tr" v-for="(item, index) in lwInOutData" :key="index">
|
||||
<div>{{index + 1}}</div>
|
||||
<div class="photo">
|
||||
<img :src="getPhotoUrl(item.PhotoUrl)" :alt="item.PersonName"/>
|
||||
</div>
|
||||
<div>{{item.PersonName}}</div>
|
||||
<div>{{item.WorkPostName}}</div>
|
||||
<div>{{item.ChangeTime}}</div>
|
||||
<div :class="item.IsIn === 'out' ? 'out' : 'in'">{{item.IsIn === 'out' ? '出' : '入'}}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="grid-template-rows: 65% 35%; position: relative;">
|
||||
<div class="kq-box">
|
||||
<div class="kx-item">
|
||||
<div class="kx-item-tit">总在册</div>
|
||||
<div class="kx-item-num" style="color: #00FFFF;">{{form.person.allNum}}</div>
|
||||
</div>
|
||||
<div class="kx-item">
|
||||
<div class="kx-item-tit">当前在册</div>
|
||||
<div class="kx-item-num" style="color: #51C6FF;">{{form.person.onDutyNum}}</div>
|
||||
</div>
|
||||
<div class="kx-item">
|
||||
<div class="kx-item-tit">今日出勤</div>
|
||||
<div class="kx-item-num" style="color: #12CDA2;">{{form.person.todayAttendanceNum}}</div>
|
||||
</div>
|
||||
<div class="kx-item">
|
||||
<div class="kx-item-tit">今日出勤率</div>
|
||||
<div class="kx-item-num" style="color: #FFB82B;">{{form.person.todayAttendanceRate}}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="chainmap"></div>
|
||||
|
||||
<div class="block4">
|
||||
<div class="block4-tit">
|
||||
<span>出勤动态曲线</span>
|
||||
</div>
|
||||
<div class="block4-main" id="ry"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div id="tools" class="block" style="height: 100%">
|
||||
<div class="block-tit">
|
||||
<span>考勤统计</span>
|
||||
</div>
|
||||
<div class="block-main kq">
|
||||
<div class="th">
|
||||
<span>序号</span><span>组织名称</span>
|
||||
<span>
|
||||
总在册
|
||||
</span
|
||||
><span>当前在册</span><span>今日出勤</span>
|
||||
</div>
|
||||
<div class="body">
|
||||
<div class="tr" v-for="(item, index) in attendanceStats" :key="index">
|
||||
<span>{{index + 1}}</span>
|
||||
<span>{{item.projectName}}</span>
|
||||
<span>{{item.allNum}}</span>
|
||||
<span class="zc">{{item.onDutyNum}}</span>
|
||||
<span>{{item.todayAttendanceNum}}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="tools" class="block" style="height: calc(100% - 0.25rem)">
|
||||
<div class="block-tit">
|
||||
<span> 劳务人员年龄性别结构</span>
|
||||
</div>
|
||||
<div class="block-main">
|
||||
<div id="nlzb"></div>
|
||||
<div class="bl">
|
||||
<div id="man"></div>
|
||||
<div class="bl-txt">
|
||||
<span>性别</span>
|
||||
<span>占比统计</span>
|
||||
</div>
|
||||
<div id="woman"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
<script src="../res/lib/china1.js"></script>
|
||||
<script src="../res/lib/echarts.min.js"></script>
|
||||
<script src="../res/lib/vue.min.js"></script>
|
||||
<script src="../res/lib/jquery.js"></script>
|
||||
<script>
|
||||
new Vue({
|
||||
el: "#app",
|
||||
data: {
|
||||
projectName : "",
|
||||
timer: {
|
||||
date: "",
|
||||
time: "",
|
||||
city: "",
|
||||
T: "15-26℃",
|
||||
week: "",
|
||||
},
|
||||
chainaMap: null,
|
||||
lw: [],
|
||||
form:{
|
||||
person:{
|
||||
allNum: 0,//总在册
|
||||
onDutyNum: 0,//总在场
|
||||
todayAttendanceNum: 0,//今日出勤
|
||||
todayAttendanceRate: 0,//今日出勤率
|
||||
}
|
||||
},
|
||||
attendanceStats: [],
|
||||
ageData: [],
|
||||
genderData: [],
|
||||
chinaMapData: [],
|
||||
lwInOutData: [],
|
||||
attendanceCurveData: {
|
||||
managerData: [],
|
||||
workerData: []
|
||||
}
|
||||
},
|
||||
filters: {
|
||||
formatNumber(value) {
|
||||
return (value + 1).toFixed().padStart(2, "0")
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
this.$nextTick(() => {
|
||||
this.startAutoScroll(".ry>.body", 6)
|
||||
this.startAutoScroll(".kq>.body", 3)
|
||||
this.initNlzb()
|
||||
this.initMan("man")
|
||||
this.initMan("woman", "女", 40)
|
||||
// this.initChainaMap()
|
||||
this.initRy([],[])
|
||||
this.loadData()
|
||||
})
|
||||
setInterval(() => {
|
||||
this.getLocation()
|
||||
}, 1000)
|
||||
},
|
||||
methods: {
|
||||
onToggleFullscreen() {
|
||||
if (!document.fullscreenElement) {
|
||||
document.documentElement.requestFullscreen().catch(() => {})
|
||||
} else if (document.exitFullscreen) {
|
||||
document.exitFullscreen()
|
||||
}
|
||||
},
|
||||
getLocation() {
|
||||
let date = new Date()
|
||||
this.timer.time = `${date.getHours().toString().padStart(2, "0")}:${date.getMinutes().toString().padStart(2, "0")}:${date.getSeconds().toString().padStart(2, "0")}`
|
||||
this.timer.date = `${date.getFullYear()}-${(date.getMonth() + 1).toString().padStart(2, "0")}-${date.getDate().toString().padStart(2, "0")}`
|
||||
this.timer.city = "北京市"
|
||||
this.timer.week = "星期" + "日一二三四五六".charAt(date.getDay())
|
||||
},
|
||||
getPhotoUrl(photoUrl) {
|
||||
if (!photoUrl || photoUrl.trim() === '') {
|
||||
return ''; // 默认无头像
|
||||
}
|
||||
return 'https://qhse.cncecci.com/SUBQHSE/' + photoUrl;
|
||||
},
|
||||
// 从后台加载数据
|
||||
loadData() {
|
||||
const that = this;
|
||||
$.ajax({
|
||||
type: "POST",
|
||||
url: "kqProject.aspx/GetData", //调用后台WebMethod
|
||||
contentType: "application/json; charset=utf-8",
|
||||
dataType: "json",
|
||||
success: function (response) {
|
||||
console.log("请求结果：", response.d)
|
||||
if (response.d.success) {
|
||||
// 更新数据成功
|
||||
that.form = { ...response.d.data }; // 更新表单数据
|
||||
that.projectName = response.d.data.projectName;
|
||||
that.lw = response.d.data.workTypeStats || [];
|
||||
that.attendanceStats = response.d.data.attendanceStats || [];
|
||||
that.ageData = response.d.data.ageStats || [];
|
||||
that.genderData = response.d.data.genderStats || [];
|
||||
that.lwInOutData = response.d.data.lwInOutList || [];
|
||||
that.chinaMapData = response.d.data.chinaMapData; // 更新地图数据
|
||||
if (response.d.data.attendanceCurve) {
|
||||
that.attendanceCurveData.managerData = response.d.data.attendanceCurve.managerData || [];
|
||||
that.attendanceCurveData.workerData = response.d.data.attendanceCurve.workerData || [];
|
||||
}
|
||||
|
||||
that.$nextTick(() => {
|
||||
that.initNlzb(that.ageData);
|
||||
that.initGenderCharts(that.genderData);
|
||||
that.initChainaMap(that.chinaMapData); // 重新创建地图
|
||||
that.initRy(
|
||||
that.attendanceCurveData.managerData,
|
||||
that.attendanceCurveData.workerData
|
||||
)
|
||||
});
|
||||
} else {
|
||||
// 更新数据失败
|
||||
alert("加载数据失败：" + response.d.msg);
|
||||
}
|
||||
},
|
||||
error: function (xhr, status, error) {
|
||||
// AJAX请求错误处理
|
||||
alert("请求失败：" + error);
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
initRy(data1, data2) {
|
||||
let xLabel = []
|
||||
for (let i = 0; i < 24; i++) {
|
||||
xLabel.push(i + ":00");
|
||||
}
|
||||
var chartDom = document.getElementById("ry")
|
||||
var myChart = echarts.init(chartDom)
|
||||
var option
|
||||
|
||||
option = {
|
||||
legend: {
|
||||
textStyle:{
|
||||
color: "#94DAFF"
|
||||
}
|
||||
},
|
||||
tooltip:{
|
||||
trigger: "axis",
|
||||
axisPointer: {
|
||||
type: "cross",
|
||||
label: {
|
||||
backgroundColor: "#6a7985",
|
||||
},
|
||||
},
|
||||
},
|
||||
grid: {
|
||||
left: "2%",
|
||||
right: "2%",
|
||||
bottom: "10%",
|
||||
containLabel: true,
|
||||
},
|
||||
dataZoom: [
|
||||
{
|
||||
type: "slider",
|
||||
xAxisIndex: 0,
|
||||
bottom: 4,
|
||||
height: 10,
|
||||
borderColor: "transparent",
|
||||
backgroundColor: "rgba(255,255,255,0.08)",
|
||||
fillerColor: "rgba(70,180,255,0.25)",
|
||||
dataBackground: {
|
||||
lineStyle: { color: "rgba(70,180,255,0.3)" },
|
||||
areaStyle: { color: "rgba(70,180,255,0.1)" },
|
||||
},
|
||||
handleStyle: {
|
||||
color: "#46B4FF",
|
||||
borderColor: "#fff",
|
||||
borderWidth: 1,
|
||||
},
|
||||
moveHandleSize: 8,
|
||||
moveHandleColor: "rgba(70,180,255,0.5)",
|
||||
textStyle: { color: "#9FBCEE" },
|
||||
showDetail: false,
|
||||
startValue: 0,
|
||||
endValue: 9,
|
||||
},
|
||||
],
|
||||
xAxis: {
|
||||
type: "category",
|
||||
data: xLabel,
|
||||
axisLabel: {
|
||||
interval: 0,
|
||||
textStyle: {
|
||||
color: "#9FBCEE",
|
||||
},
|
||||
},
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: "#9FBCEE",
|
||||
},
|
||||
},
|
||||
},
|
||||
yAxis: {
|
||||
name: "数量",
|
||||
type: "value",
|
||||
nameTextStyle: {
|
||||
color: "#9FBCEE",
|
||||
},
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
color: "#9FBCEE",
|
||||
},
|
||||
},
|
||||
axisLabel: {
|
||||
textStyle: {
|
||||
color: "#9FBCEE",
|
||||
},
|
||||
},
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: "管理人员",
|
||||
data:data1,
|
||||
type: "line",
|
||||
smooth: true,
|
||||
showSymbol: false,
|
||||
lineStyle: { color: "#FFC72C" },
|
||||
areaStyle: {
|
||||
color: {
|
||||
type: "linear",
|
||||
x: 0,
|
||||
y: 0,
|
||||
x2: 0,
|
||||
y2: 1,
|
||||
colorStops: [
|
||||
{ offset: 0, color: "#FFC72C" },
|
||||
{ offset: 1, color: "rgba(70,180,255,0.02)" },
|
||||
],
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
name: "劳务人员",
|
||||
data:data2,
|
||||
type: "line",
|
||||
smooth: true,
|
||||
showSymbol: false,
|
||||
lineStyle: { color: "#50E5FF" },
|
||||
areaStyle: {
|
||||
color: {
|
||||
type: "linear",
|
||||
x: 0,
|
||||
y: 0,
|
||||
x2: 0,
|
||||
y2: 1,
|
||||
colorStops: [
|
||||
{ offset: 0, color: "#50E5FF" },
|
||||
{ offset: 1, color: "rgba(255,180,70,0.02)" },
|
||||
],
|
||||
},
|
||||
},
|
||||
},
|
||||
],
|
||||
}
|
||||
|
||||
option && myChart.setOption(option)
|
||||
},
|
||||
|
||||
initChainaMap(list) {
|
||||
let data = list || [
|
||||
{ value: [116.407394, 39.904211], name: "北京" }, // 北京
|
||||
{ value: [121.473668, 31.230389], name: "上海" }, // 上海
|
||||
{ value: [113.264385, 23.129086], name: "广州" }, // 广州
|
||||
{ value: [114.057868, 22.582846], name: "深圳" }, // 深圳
|
||||
]
|
||||
if (!this.chainaMap) {
|
||||
this.chainaMap = echarts.init(document.getElementById("chainmap"))
|
||||
}
|
||||
// 中国地图 配置
|
||||
echarts.registerMap("china", chinaJson)
|
||||
let chinaOption = {
|
||||
geo: [
|
||||
{
|
||||
// 地理坐标系组件
|
||||
map: "china",
|
||||
roam: false, // 可以缩放和平移
|
||||
aspectScale: 0.85, // 比例
|
||||
top: 200,
|
||||
zlevel: 2,
|
||||
zoom: 1.2,
|
||||
|
||||
label: {
|
||||
show: false,
|
||||
},
|
||||
regions: [
|
||||
{
|
||||
name: "南海诸岛",
|
||||
itemStyle: {
|
||||
// 隐藏地图
|
||||
normal: {
|
||||
opacity: 0, // 为 0 时不绘制该图形
|
||||
},
|
||||
},
|
||||
label: {
|
||||
show: false, // 隐藏文字
|
||||
},
|
||||
},
|
||||
],
|
||||
itemStyle: {
|
||||
// 图形上的地图区域
|
||||
normal: {
|
||||
areaColor: "#07121B",
|
||||
borderColor: "#07121B",
|
||||
},
|
||||
},
|
||||
|
||||
emphasis: {
|
||||
disabled: true,
|
||||
},
|
||||
},
|
||||
{
|
||||
// 地理坐标系组件
|
||||
map: "china",
|
||||
roam: false, // 可以缩放和平移
|
||||
aspectScale: 0.85, // 比例
|
||||
top: 190,
|
||||
zlevel: 9,
|
||||
zoom: 1.2,
|
||||
regions: [
|
||||
{
|
||||
name: "南海诸岛",
|
||||
itemStyle: {
|
||||
// 隐藏地图
|
||||
normal: {
|
||||
opacity: 0, // 为 0 时不绘制该图形
|
||||
},
|
||||
},
|
||||
label: {
|
||||
show: false, // 隐藏文字
|
||||
},
|
||||
},
|
||||
],
|
||||
itemStyle: {
|
||||
// 图形上的地图区域
|
||||
normal: {
|
||||
areaColor: "#076393",
|
||||
borderColor: "#076393",
|
||||
},
|
||||
},
|
||||
|
||||
emphasis: {
|
||||
disabled: true,
|
||||
},
|
||||
},
|
||||
],
|
||||
tooltip: {
|
||||
trigger: "item",
|
||||
backgroundColor: "rgba(0,0,0,0.7)",
|
||||
borderColor: "#fff",
|
||||
borderWidth: 1,
|
||||
padding: 10,
|
||||
formatter: function (params) {
|
||||
// 自定义 tooltip 内容
|
||||
if (params.seriesType === "effectScatter") {
|
||||
return `<div style="color: white;">
|
||||
<p><strong>${params.name}</strong></p>
|
||||
<p>详细信息: ${params.data.address}</p>
|
||||
</div>`
|
||||
}
|
||||
},
|
||||
},
|
||||
series: [
|
||||
{
|
||||
// 地理坐标系组件
|
||||
type: "map",
|
||||
map: "china",
|
||||
roam: false, // 可以缩放和平移
|
||||
aspectScale: 0.85, // 比例
|
||||
top: 180,
|
||||
zlevel: 12,
|
||||
zoom: 1.2,
|
||||
data: data,
|
||||
|
||||
regions: [
|
||||
{
|
||||
name: "南海诸岛",
|
||||
label: {
|
||||
show: false, // 隐藏文字
|
||||
},
|
||||
},
|
||||
],
|
||||
itemStyle: {
|
||||
// 图形上的地图区域
|
||||
normal: {
|
||||
borderWidth: 1,
|
||||
areaColor: "rgba(0, 221, 255, .8)",
|
||||
borderColor: "RGBA(27, 225, 255, 1)",
|
||||
},
|
||||
},
|
||||
emphasis: {
|
||||
disabled: true,
|
||||
},
|
||||
},
|
||||
{
|
||||
name: "散点",
|
||||
type: "effectScatter",
|
||||
coordinateSystem: "geo",
|
||||
data: data,
|
||||
zlevel: 14,
|
||||
symbolSize: 10,
|
||||
showEffectOn: "render",
|
||||
rippleEffect: {
|
||||
brushType: "stroke",
|
||||
},
|
||||
hoverAnimation: true,
|
||||
label: {
|
||||
formatter: "{b}",
|
||||
position: "right",
|
||||
show: false,
|
||||
},
|
||||
itemStyle: {
|
||||
color: "#FBE795",
|
||||
},
|
||||
},
|
||||
],
|
||||
}
|
||||
|
||||
this.chainaMap.setOption(chinaOption)
|
||||
this.chainaMap.on("click", function (params) {
|
||||
|
||||
// 控制台打印点击的地区名称
|
||||
if (params.seriesType == "effectScatter") {
|
||||
// alert("点击了" + params.name)
|
||||
var projectId = params.data && params.data.id ? params.data.id : '';
|
||||
var jumpUrl = "../HSSE/KqShowScreen/KqShowScreen.aspx?projectId=" + encodeURIComponent(projectId);
|
||||
window.open(jumpUrl)
|
||||
}
|
||||
// 你可以在这里添加你的逻辑代码
|
||||
})
|
||||
},
|
||||
|
||||
initGenderCharts(genderData) {
|
||||
if (!genderData || genderData.length === 0) {
|
||||
this.initMan("man", "男", 50);
|
||||
this.initMan("woman", "女", 50);
|
||||
return;
|
||||
}
|
||||
var total = genderData.reduce((sum, item) => sum + item.value, 0);
|
||||
if (total === 0) {
|
||||
this.initMan("man", "男", 50);
|
||||
this.initMan("woman", "女", 50);
|
||||
return;
|
||||
}
|
||||
var maleData = genderData.find(item => item.name === "男");
|
||||
var femaleData = genderData.find(item => item.name === "女");
|
||||
var maleCount = maleData ? maleData.value : 0;
|
||||
var femaleCount = femaleData ? femaleData.value : 0;
|
||||
var malePercent = Math.round((maleCount / total) * 100);
|
||||
var femalePercent = Math.round((femaleCount / total) * 100);
|
||||
this.initMan("man", "男", malePercent);
|
||||
this.initMan("woman", "女", femalePercent);
|
||||
},
|
||||
|
||||
initMan(ele, tit = "男", val = 20) {
|
||||
var chartDom = document.getElementById(ele)
|
||||
var myChart = echarts.init(chartDom)
|
||||
|
||||
var option = {
|
||||
series: [
|
||||
{
|
||||
type: "gauge",
|
||||
startAngle: 220,
|
||||
endAngle: -40,
|
||||
min: 0,
|
||||
max: 100,
|
||||
center: ["50%", "50%"],
|
||||
radius: "70%",
|
||||
pointer: {
|
||||
show: false,
|
||||
},
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
width: 10,
|
||||
color: [
|
||||
[
|
||||
val / 100,
|
||||
new echarts.graphic.LinearGradient(0, 0, 1, 0, [
|
||||
{ offset: 0, color: "#00B4DB" },
|
||||
{ offset: 1, color: "#9D5CFF" },
|
||||
]),
|
||||
],
|
||||
[1, "#516C82"],
|
||||
],
|
||||
},
|
||||
},
|
||||
axisTick: { show: false },
|
||||
splitLine: { show: false },
|
||||
axisLabel: { show: false },
|
||||
title: { show: false },
|
||||
detail: {
|
||||
valueAnimation: true,
|
||||
offsetCenter: [0, 0],
|
||||
formatter: "{value}%",
|
||||
fontSize: 16,
|
||||
fontWeight: "bold",
|
||||
color: "#fff",
|
||||
},
|
||||
data: [{ value: val, name: tit }],
|
||||
},
|
||||
{
|
||||
type: "gauge",
|
||||
startAngle: 220,
|
||||
endAngle: -40,
|
||||
min: 0,
|
||||
max: 100,
|
||||
radius: "55%",
|
||||
pointer: { show: false },
|
||||
axisLine: {
|
||||
show: true,
|
||||
lineStyle: { width: 10, color: [[1, "#20415D"]] },
|
||||
},
|
||||
axisTick: { show: false },
|
||||
splitLine: { show: false },
|
||||
axisLabel: { show: false },
|
||||
title: {
|
||||
show: true,
|
||||
offsetCenter: [0, "50%"],
|
||||
fontSize: 14,
|
||||
color: "#fff",
|
||||
formatter: tit,
|
||||
},
|
||||
detail: {
|
||||
valueAnimation: true,
|
||||
offsetCenter: [0, "50%"],
|
||||
formatter: tit,
|
||||
fontSize: 14,
|
||||
fontWeight: "bold",
|
||||
color: "#fff",
|
||||
},
|
||||
data: [{ value: 100 }],
|
||||
},
|
||||
],
|
||||
}
|
||||
|
||||
myChart.setOption(option)
|
||||
},
|
||||
|
||||
initNlzb(data1) {
|
||||
let data = data1 || [
|
||||
{ value: 1048, name: "46-55" },
|
||||
{ value: 735, name: "36-45" },
|
||||
{ value: 580, name: "26-35" },
|
||||
{ value: 484, name: "16-25" },
|
||||
]
|
||||
|
||||
var chartDom = document.getElementById("nlzb")
|
||||
var myChart = echarts.init(chartDom)
|
||||
var option
|
||||
|
||||
option = {
|
||||
title: {
|
||||
text: "年龄占比统计",
|
||||
top: "0px",
|
||||
right: "20%",
|
||||
textStyle: {
|
||||
color: "#8CEEFF",
|
||||
fontSize: 14,
|
||||
},
|
||||
},
|
||||
legend: {
|
||||
orient: "vertical",
|
||||
top: "25px",
|
||||
right: "20%",
|
||||
// top: "middle",
|
||||
icon: "circle",
|
||||
itemWidth: 10,
|
||||
itemHeight: 10,
|
||||
textStyle: {
|
||||
color: "#fff",
|
||||
fontSize: 10,
|
||||
},
|
||||
formatter: function (name) {
|
||||
var dataItem = option.series[0].data.find(function (item) {
|
||||
return item.name === name
|
||||
})
|
||||
var total = option.series[0].data.reduce(function (acc, cur) {
|
||||
return acc + cur.value
|
||||
}, 0)
|
||||
var percent = ((dataItem.value / total) * 100).toFixed(2)
|
||||
return name + " " + percent + "%"
|
||||
},
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: "1",
|
||||
type: "pie",
|
||||
center: ["30%", "50%"],
|
||||
radius: ["40%", "70%"],
|
||||
avoidLabelOverlap: false,
|
||||
gapAngle: 3,
|
||||
itemStyle: {
|
||||
borderColor: "#001B35",
|
||||
borderWidth: 3,
|
||||
},
|
||||
color: [
|
||||
"rgba(0, 180, 219, 0.8)",
|
||||
"rgba(152, 221, 136, 0.8)",
|
||||
"rgba(247, 232, 74, 0.8)",
|
||||
"rgba(244, 122, 122, 0.8)",
|
||||
],
|
||||
label: {
|
||||
show: false,
|
||||
position: "center",
|
||||
formatter: function (params) {
|
||||
var total = option.series[0].data.reduce(function (acc, cur) {
|
||||
return acc + cur.value
|
||||
}, 0)
|
||||
var percent = ((params.value / total) * 100).toFixed(1)
|
||||
return "{a|" + percent + "%}\n{b|" + params.name + "}"
|
||||
},
|
||||
rich: {
|
||||
a: {
|
||||
fontSize: 14,
|
||||
color: "#1FC6FF",
|
||||
fontWeight: "bold",
|
||||
},
|
||||
b: {
|
||||
fontSize: 12,
|
||||
color: "#fff",
|
||||
},
|
||||
},
|
||||
},
|
||||
emphasis: {
|
||||
label: {
|
||||
show: true,
|
||||
},
|
||||
},
|
||||
labelLine: {
|
||||
show: false,
|
||||
},
|
||||
data,
|
||||
},
|
||||
{
|
||||
name: "2",
|
||||
type: "pie",
|
||||
center: ["30%", "50%"],
|
||||
radius: ["75%", "90%"],
|
||||
avoidLabelOverlap: false,
|
||||
gapAngle: 3,
|
||||
itemStyle: {
|
||||
borderColor: "#001B35",
|
||||
borderWidth: 3,
|
||||
},
|
||||
color: ["#00B4DB", "#98DD88", "#F7E84A", "#F47A7A"],
|
||||
label: {
|
||||
show: false,
|
||||
position: "center",
|
||||
formatter: function (params) {
|
||||
var total = option.series[0].data.reduce(function (acc, cur) {
|
||||
return acc + cur.value
|
||||
}, 0)
|
||||
var percent = ((params.value / total) * 100).toFixed(1)
|
||||
return "{a|" + percent + "%}\n{b|" + params.name + "}"
|
||||
},
|
||||
rich: {
|
||||
a: {
|
||||
fontSize: 14,
|
||||
color: "#1FC6FF",
|
||||
fontWeight: "bold",
|
||||
},
|
||||
b: {
|
||||
fontSize: 12,
|
||||
color: "#fff",
|
||||
},
|
||||
},
|
||||
},
|
||||
emphasis: {
|
||||
label: {
|
||||
show: true,
|
||||
},
|
||||
},
|
||||
labelLine: {
|
||||
show: false,
|
||||
},
|
||||
data,
|
||||
},
|
||||
],
|
||||
}
|
||||
|
||||
option && myChart.setOption(option)
|
||||
},
|
||||
|
||||
startAutoScroll(el, speed = 5) {
|
||||
const container = document.querySelector(el)
|
||||
if (!container) return
|
||||
let scrollOffset = 0
|
||||
const speed1 = speed / 100
|
||||
|
||||
const scroll = () => {
|
||||
scrollOffset += speed1
|
||||
container.scrollTop = scrollOffset
|
||||
|
||||
if (scrollOffset >= container.scrollHeight - container.clientHeight) {
|
||||
scrollOffset = 0
|
||||
}
|
||||
|
||||
requestAnimationFrame(scroll)
|
||||
}
|
||||
|
||||
requestAnimationFrame(scroll)
|
||||
},
|
||||
formatPercent(value) {
|
||||
let sum = this.lw.reduce((acc, cur) => acc + cur.value, 0)
|
||||
return ((value / sum) * 100).toFixed(2) + "%"
|
||||
},
|
||||
},
|
||||
})
|
||||
|
||||
</script>
|
||||
|
|
@ -0,0 +1,283 @@
|
|||
using BLL;
|
||||
using System;
|
||||
using System.Collections.Generic;
|
||||
using System.Web.Services;
|
||||
using System.Linq;
|
||||
|
||||
namespace FineUIPro.Web.DataShow
|
||||
{
|
||||
public partial class kqProject : PageBase
|
||||
{
|
||||
public static string userId;
|
||||
public static string projectId;
|
||||
|
||||
protected void Page_Load(object sender, EventArgs e)
|
||||
{
|
||||
if (!IsPostBack)
|
||||
{
|
||||
userId = this.CurrUser.UserId;
|
||||
if (!string.IsNullOrEmpty(Request.Params["projectId"]))
|
||||
{
|
||||
projectId = Request.Params["projectId"];
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/// <summary>
|
||||
/// 根据身份证号计算年龄
|
||||
/// </summary>
|
||||
private static int? CalculateAgeFromIdCard(string idCard)
|
||||
{
|
||||
if (string.IsNullOrEmpty(idCard) || idCard.Length < 17)
|
||||
return null;
|
||||
|
||||
try
|
||||
{
|
||||
string birthDateStr = idCard.Substring(6, 8);
|
||||
DateTime birthDate = DateTime.ParseExact(birthDateStr, "yyyyMMdd", null);
|
||||
|
||||
int age = DateTime.Now.Year - birthDate.Year;
|
||||
if (DateTime.Now.Month < birthDate.Month ||
|
||||
(DateTime.Now.Month == birthDate.Month && DateTime.Now.Day < birthDate.Day))
|
||||
{
|
||||
age--;
|
||||
}
|
||||
|
||||
return age > 0 ? age : (int?)null;
|
||||
}
|
||||
catch
|
||||
{
|
||||
return null;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/// <summary>
|
||||
/// 看板数据
|
||||
/// </summary>
|
||||
/// <returns></returns>
|
||||
[WebMethod]
|
||||
public static object GetData()
|
||||
{
|
||||
try
|
||||
{
|
||||
var db = Funs.DB;
|
||||
var projectList = (from project in db.Base_Project
|
||||
where (project.ProjectAttribute == "GONGCHENG" || project.ProjectAttribute == null)
|
||||
&& (project.IsDelete == null || project.IsDelete == false) && project.ProjectState == "1"
|
||||
select new
|
||||
{
|
||||
project.UnitId,
|
||||
project.ProjectId,
|
||||
ProjectName = string.IsNullOrEmpty(project.ShortName) ? project.ProjectName : project.ShortName,
|
||||
project.ProjectAddress,
|
||||
project.MapCoordinates,
|
||||
}).ToList();
|
||||
var projectName = string.Empty;
|
||||
if (!string.IsNullOrEmpty(projectId))
|
||||
{
|
||||
projectList = projectList.Where(x => x.ProjectId == projectId).ToList();
|
||||
projectName = projectList.FirstOrDefault(x => x.ProjectId == projectId).ProjectName;
|
||||
}
|
||||
|
||||
int unitType = CommonService.GetUnitTypeByUserId(userId);
|
||||
if (unitType == 1)
|
||||
{
|
||||
projectList = projectList.Where(x => x.UnitId == userId).ToList();
|
||||
}
|
||||
|
||||
var chinaMapData = projectList
|
||||
.Where(x => !string.IsNullOrEmpty(x.MapCoordinates))
|
||||
.Select(x =>
|
||||
{
|
||||
var coords = x.MapCoordinates.Split(',');
|
||||
return new
|
||||
{
|
||||
id = x.ProjectId,
|
||||
name = x.ProjectName,
|
||||
address = x.ProjectAddress,
|
||||
value = coords.Length >= 2
|
||||
? new[] { Convert.ToDouble(coords[0]), Convert.ToDouble(coords[1]) }
|
||||
: new double[] { 0, 0 }
|
||||
};
|
||||
}).ToList();
|
||||
|
||||
|
||||
// 获取在建项目id列表
|
||||
List<string> beUnderConstructionList = projectList.Select(p => p.ProjectId).ToList();
|
||||
//获取所有人员列表
|
||||
var persons = db.View_SitePerson_Person.Where(x => beUnderConstructionList.Contains(x.ProjectId))
|
||||
.ToList();
|
||||
|
||||
var onDutyNum = persons.Where(x => x.IsUsedType == "1").Count();
|
||||
|
||||
//获取今天所有出入场记录
|
||||
DateTime todayStart = DateTime.Now.Date;
|
||||
DateTime todayEnd = todayStart.AddDays(1).AddSeconds(-1);
|
||||
var outOuts = db.SitePerson_PersonInOut.Where(x =>
|
||||
x.ChangeTime.HasValue && x.ChangeTime.Value.Date >= todayStart &&
|
||||
x.ChangeTime.Value.Date <= todayEnd && beUnderConstructionList.Contains(x.ProjectId)).ToList();
|
||||
|
||||
var inNum = outOuts.Where(x => x.IsIn == true)
|
||||
.GroupBy(x => x.PersonId)
|
||||
.Select(grp => grp.First())
|
||||
.Count(); //入场数量
|
||||
|
||||
var inRate = "0.00%";
|
||||
if (onDutyNum > 0)
|
||||
{
|
||||
inRate = (inNum * 100.0 / onDutyNum).ToString("F2") + "%";
|
||||
}
|
||||
|
||||
var attendanceStats = (from p in persons
|
||||
join proj in projectList on p.ProjectId equals proj.ProjectId
|
||||
group p by new { p.ProjectId, proj.ProjectName }
|
||||
into g
|
||||
let todayInCount = outOuts.Where(x => x.ProjectId == g.Key.ProjectId && x.IsIn == true)
|
||||
.GroupBy(x => x.PersonId)
|
||||
.Select(grp => grp.First())
|
||||
.Count()
|
||||
orderby g.Count() descending
|
||||
select new
|
||||
{
|
||||
projectId = g.Key.ProjectId,
|
||||
projectName = g.Key.ProjectName,
|
||||
allNum = g.Count(),
|
||||
onDutyNum = g.Count(x => x.IsUsedType == "1"),
|
||||
todayAttendanceNum = todayInCount
|
||||
}).ToList();
|
||||
|
||||
var workTypeStats = (from p in persons
|
||||
where !string.IsNullOrEmpty(p.WorkPostId)
|
||||
group p by new { p.WorkPostId, p.WorkPostName }
|
||||
into g
|
||||
orderby g.Count() descending
|
||||
select new
|
||||
{
|
||||
id = g.Key.WorkPostId,
|
||||
name = g.Key.WorkPostName,
|
||||
value = g.Count()
|
||||
}).Take(10).ToList();
|
||||
|
||||
var personWithAge = persons
|
||||
.Where(x => !string.IsNullOrEmpty(x.IdentityCard))
|
||||
.Select(x => new
|
||||
{
|
||||
Person = x,
|
||||
Age = CalculateAgeFromIdCard(x.IdentityCard)
|
||||
}).Where(x => x.Age.HasValue).ToList();
|
||||
|
||||
var ageStats = personWithAge
|
||||
.Where(x => x.Age.Value >= 16 && x.Age.Value <= 55)
|
||||
.GroupBy(x =>
|
||||
{
|
||||
int age = x.Age.Value;
|
||||
if (age >= 16 && age <= 25) return "16-25";
|
||||
if (age >= 26 && age <= 35) return "26-35";
|
||||
if (age >= 36 && age <= 45) return "36-45";
|
||||
return "46-55";
|
||||
})
|
||||
.Select(g => new { name = g.Key, value = g.Count() })
|
||||
.OrderByDescending(x => x.value)
|
||||
.ToList();
|
||||
|
||||
var genderStats = persons.Where(x => !string.IsNullOrEmpty(x.Sex))
|
||||
.GroupBy(x => x.Sex)
|
||||
.Select(g => new
|
||||
{
|
||||
name = g.Key == "1" ? "男" : (g.Key == "2" ? "女" : g.Key),
|
||||
value = g.Count()
|
||||
})
|
||||
.ToList();
|
||||
|
||||
var lwInOutList = (from o in outOuts
|
||||
join p in db.View_SitePerson_Person on o.PersonId equals p.PersonId into personGroup
|
||||
from p in personGroup.DefaultIfEmpty()
|
||||
where p != null
|
||||
orderby o.ChangeTime descending
|
||||
select new
|
||||
{
|
||||
PhotoUrl = p.PhotoUrl,
|
||||
PersonName = o.PersonName ?? string.Empty,
|
||||
WorkPostName = o.WorkPostName ?? string.Empty,
|
||||
ChangeTime = o.ChangeTime.HasValue
|
||||
? o.ChangeTime.Value.ToString("yyyy-MM-dd HH:mm:ss")
|
||||
: string.Empty,
|
||||
IsIn = o.IsIn.HasValue && o.IsIn.Value ? "in" : "out"
|
||||
}).Take(200).ToList();
|
||||
|
||||
//先获取管理人员的数据
|
||||
var projectUserList = (from a in db.Project_ProjectUser
|
||||
join b in db.Sys_User on a.UserId equals b.UserId into userJoin
|
||||
from b in userJoin.DefaultIfEmpty()
|
||||
where beUnderConstructionList.Contains(a.ProjectId)
|
||||
select new
|
||||
{
|
||||
ProjectId = a.ProjectId,
|
||||
IdentityCard = b.IdentityCard,
|
||||
}).ToList();
|
||||
//获取管理人员身份证
|
||||
var managerIdentityCards = projectUserList.Where(x => x.IdentityCard != null)
|
||||
.Select(x => x.IdentityCard).ToList();
|
||||
|
||||
var managerData = new List<int>();
|
||||
var workerData = new List<int>();
|
||||
|
||||
for (int hour = 0; hour < 24; hour++)
|
||||
{
|
||||
DateTime hourStart = todayStart.AddHours(hour);
|
||||
DateTime hourEnd = hourStart.AddHours(1).AddSeconds(-1);
|
||||
|
||||
var hourRecords = outOuts.Where(x => x.ChangeTime.HasValue &&
|
||||
x.ChangeTime.Value >= hourStart &&
|
||||
x.ChangeTime.Value <= hourEnd).ToList();
|
||||
|
||||
int managerCount = 0;
|
||||
int workerCount = 0;
|
||||
if (hourRecords.Count > 0)
|
||||
{
|
||||
managerCount = hourRecords.Count(x => managerIdentityCards.Contains(x.IdentityCard));
|
||||
workerCount = hourRecords.Count - managerCount;
|
||||
}
|
||||
|
||||
managerData.Add(managerCount);
|
||||
workerData.Add(workerCount);
|
||||
}
|
||||
|
||||
|
||||
var returnData = new
|
||||
{
|
||||
success = true,
|
||||
data = new
|
||||
{
|
||||
person = new
|
||||
{
|
||||
allNum = persons.Count, //总在册数
|
||||
onDutyNum = onDutyNum, //总在场数
|
||||
todayAttendanceNum = inNum, //今日出勤数
|
||||
todayAttendanceRate = inRate, //今日出勤率
|
||||
},
|
||||
attendanceCurve = new
|
||||
{
|
||||
managerData = managerData,
|
||||
workerData = workerData
|
||||
},
|
||||
attendanceStats = attendanceStats,
|
||||
workTypeStats = workTypeStats,
|
||||
ageStats = ageStats,
|
||||
genderStats = genderStats,
|
||||
lwInOutList = lwInOutList,
|
||||
chinaMapData = chinaMapData,
|
||||
projectName = projectName,
|
||||
}
|
||||
};
|
||||
|
||||
return returnData;
|
||||
}
|
||||
catch (Exception ex)
|
||||
{
|
||||
return new { success = false, msg = ex.Message };
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,17 @@
|
|||
//------------------------------------------------------------------------------
|
||||
// <自动生成>
|
||||
// 此代码由工具生成。
|
||||
//
|
||||
// 对此文件的更改可能导致不正确的行为，如果
|
||||
// 重新生成代码，则所做更改将丢失。
|
||||
// </自动生成>
|
||||
//------------------------------------------------------------------------------
|
||||
|
||||
namespace FineUIPro.Web.DataShow
|
||||
{
|
||||
|
||||
|
||||
public partial class kqProject
|
||||
{
|
||||
}
|
||||
}
|
||||
|
|
@ -1032,7 +1032,7 @@
|
|||
// 控制台打印点击的地区名称
|
||||
if (params.seriesType == "effectScatter") {
|
||||
var projectId = params.data && params.data.id ? params.data.id : '';
|
||||
var jumpUrl = "../HSSE/KqShowScreen/KqShowScreen.aspx?projectId=" + encodeURIComponent(projectId);
|
||||
var jumpUrl = "../indexProject.aspx?projectId=" + encodeURIComponent(projectId)+ "&state=0";
|
||||
window.open(jumpUrl)
|
||||
}
|
||||
// 控制台打印点击的地区名称
|
||||
|
|
|
|||
Loading…
Reference in New Issue