diff --git a/.idea/ah_jjzhgd_webscreen_new.iml b/.idea/ah_jjzhgd_webscreen_new.iml
new file mode 100644
index 0000000..24643cc
--- /dev/null
+++ b/.idea/ah_jjzhgd_webscreen_new.iml
@@ -0,0 +1,12 @@
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/.idea/modules.xml b/.idea/modules.xml
index 49e8e66..6c36069 100644
--- a/.idea/modules.xml
+++ b/.idea/modules.xml
@@ -2,7 +2,7 @@
-
+
\ No newline at end of file
diff --git a/pages/web/css/main.css b/pages/web/css/main.css
index d360f95..24c91b4 100644
--- a/pages/web/css/main.css
+++ b/pages/web/css/main.css
@@ -19,6 +19,7 @@ body {
#main-box {
width: 100%;
height: 100%;
+ overflow: hidden;
justify-content: space-evenly;
}
@@ -137,7 +138,6 @@ body {
height: 28%;
background: url("../image/施工质量排名.png") no-repeat 0 0 / 100% 100%;
background-position: center center !important;
- display: flex;
padding: 8% 3% 3% 3%;
}
@@ -178,7 +178,9 @@ body {
.environment-analysis-item > div:first-of-type > p {
line-height: 25px;
- font-size: 16px;
+ font-size: 14px;
+ text-align: left;
+ padding-left: 55%;
}
#environment-analysis-1 {
@@ -247,4 +249,23 @@ body {
background: url("../image/告警提醒.png") no-repeat 0 0 / 100% 100%;
background-position: center center !important;
justify-content: space-between;
+}
+
+#device-status {
+ padding-top: 8%;
+ box-sizing: border-box;
+}
+
+.device-status-text {
+ line-height: 20px;
+ padding-left: 3%;
+}
+
+.device-status-text > p {
+ display: inline-block;
+ font-size: 16px;
+}
+
+#device-status-chart {
+ height: calc(100% - 20px);
}
\ No newline at end of file
diff --git a/pages/web/css/table.css b/pages/web/css/table.css
index 61a0d26..077517b 100644
--- a/pages/web/css/table.css
+++ b/pages/web/css/table.css
@@ -1,60 +1,57 @@
-.transparentDataTable .layui-table{
- background-color: transparent !important;
-}
-.transparentDataTable .layui-table-view{
- background-color: rgba(0, 0, 0, 0) !important;
- border: none;
-}
-.transparentDataTable .layui-table-tool {
- background-color: transparent !important;
+.custom-table {
+ width: 100%;
+ box-sizing: border-box;
}
-.transparentDataTable .layui-table-tool .layui-icon {
- color: white;
+.custom-table> li {
+ box-sizing: border-box;
+ display: flex;
}
-.transparentDataTable .layui-table-header, .transparentDataTable .layui-table-cell, .layui-table-header thead tr {
- background-color: transparent !important;
+.custom-table>li:not(.custom-table__title) {
+ border-bottom: 1px solid #34E7FE;
}
-.transparentDataTable .layui-table-header thead th, .transparentDataTable .layui-none {
- /*border: 1px solid #FFFFFF;*/
- color: white !important;
+.custom-table>li>div {
+ box-sizing: border-box;
+ line-height: 40px;
+ overflow: hidden;
+ white-space: nowrap;
+ text-overflow: ellipsis;
+ padding: 0 5px;
+ text-align: center;
}
-.transparentDataTable .layui-table tbody tr {
- border: 1px solid #FFFFFF;
- color: white;
+.custom-table>li>div:first-of-type {
+ width: 10%;
}
-.transparentDataTable .layui-table-init, .transparentDataTable .layui-laypage-limits select, .transparentDataTable .layui-laypage-btn, .transparentDataTable .layui-laypage-skip input {
- background-color: transparent !important;
- color: white;
+.custom-table>li>div:nth-of-type(2) {
+ width: 35%;
}
-.transparentDataTable .layui-table-page a, .transparentDataTable .layui-table-page span {
- color: white !important;
+.custom-table>li>div:nth-of-type(3) {
+ width: 25%;
}
-
-.transparentDataTable .layui-laypage-limits select, .transparentDataTable .layui-laypage-limits option {
- -webkit-appearance: none; /* google */
- -moz-appearance: none; /* firefox */
- appearance: none; /* IE */
- -webkit-tap-highlight-color: rgba(0, 0, 0, 0); /* 点击去除高亮的颜色*/
- background-color: rgba(0, 0, 0, 0.5) !important;
- color: white;
+.custom-table>li>div:nth-of-type(4) {
+ width: 15%;
}
-.transparentDataTable .layui-table[lay-even] tr:nth-child(even){
- background-color: rgba(180, 238, 180, 0.5) !important;
+.custom-table>li>div:last-of-type {
+ width: 15%;
}
-
-/*静态表格透明*/
-.transparentStaticTable .layui-table{
- background-color: rgba(0, 0, 0, 0.5) !important;
+.custom-table>.custom-table__title {
+ line-height: 32px;
+ background-color: rgba(52, 231, 254, 0.1);
+ color: #8BFFFF;
+}
+
+.custom-table>.custom-table__title>div {
+ text-align: center;
+}
+
+#alarm-reminder-table>li>div {
+ width: 50% !important;
}
-.transparentStaticTable .layui-table tbody tr:hover, .statistics_branch_one .layui-table tbody tr:hover {
- background-color: transparent !important;
-}
\ No newline at end of file
diff --git a/pages/web/index.html b/pages/web/index.html
index f5f163a..fc33498 100644
--- a/pages/web/index.html
+++ b/pages/web/index.html
@@ -15,6 +15,7 @@
+
导航页
diff --git a/pages/web/js/loader.js b/pages/web/js/loader.js
new file mode 100644
index 0000000..e69de29
diff --git a/pages/web/js/main.js b/pages/web/js/main.js
index 4e29009..6ebd45b 100644
--- a/pages/web/js/main.js
+++ b/pages/web/js/main.js
@@ -1,105 +1,402 @@
-let element, layer;
+const baseUrl = 'http://10.40.92.33:18080/zhgd'
+
+var loader = {
+ get: function (url, data = null, scb) {
+ let reqData = {
+ params: null
+ }
+ if (data) {
+ let convertData = []
+ Object.keys(data).forEach(item => {
+ convertData.push(`${item}=${data[item]}`)
+ })
+ reqData.params = encryptCBC(convertData.join('&'))
+ }
+
+ $.ajax({
+ url: baseUrl + url,
+ type: 'get',
+ headers: {
+ "authorization": sessionStorage.getItem("zhgd_token")
+ },
+ data: reqData.params ? reqData : '',
+ success: scb,
+ });
+ }
+}
+
+let element, layer, table;
layui.use(['layer', 'element', 'table'], function () {
element = layui.element;
layer = layui.layer;
- var table = layui.table;
- var data = [
- {id: 1, proName: '张三', teamName: '666', teamLeader: '男', quality: 1, content: '芜湖'},
- {id: 2, proName: '李四', teamName: '666', teamLeader: '女', quality: 1, content: '起飞'}
- ];
- table.render({
- elem: '#demo',
- data: data,
- skin: 'line',
- page: false,
- cols: [[
- {field: 'id', title: '排名'},
- {field: 'proName', title: '工程名称'},
- {field: 'teamName', title: '班组名称'},
- {field: 'teamLeader', title: '班组长'},
- {field: 'quality', title: '施工质量'},
- ]]
- })
+ table = layui.table;
- table.render({
- elem: '#demo2',
- data: data,
- skin: 'line',
- page: false,
- cols: [[
- {field: 'proName', title: '工程名称'},
- {field: 'content', title: '告警内容'},
- ]]
- })
+ // 工程统计
+ initEngineeringStatistic()
- initMainMap()
+ // 施工质量排名
+ initQualityRanking()
- initEcharts()
+ // 环境监控
+ initEnvironmentAnalysis()
+ // 设备状态
initDeviceStatus()
+ // 安徽省地图
+ initMainMap()
+ initRiskData()
+
+ // 工程安全隐患分析
+ initSafetyAnalysis()
+
+ // 工人效率分析
initEfficiencyAnalysis()
+ // 资源利用及能源使用
initResourceRate()
+
+ // 告警提醒
+ initAlarmReminder()
});
$('#indexIframe').attr('src', './views/main.html');
let mainMapPointList = [], mapPointList = [], weatherList = [], showWeatherList = [];
-$.getJSON('../config/risk.json', function (data) {
- // console.log(data)
- mainMapPointList = data
-})
+// $.getJSON('../config/risk.json', function (data) {
+// // console.log(data)
+// mainMapPointList = data
+// })
-/*判空*/
-function dealEmptyString(str) {
- if (str) {
- return str;
- }
- return '';
+let fontSize = '14', fontFamily = 'Alibaba PuHuiTi R', fontColor = '#fff';
+const tooltip = {
+ show: true,
+ trigger: 'axis',
+ axisPointer: {
+ type: 'shadow'
+ },
+ backgroundColor: 'rgba(75, 79, 82, 0.80)', //设置背景颜色
+ textStyle: {
+ color: fontColor,
+ fontFamily: fontFamily
+ },
+ borderColor: "rgba(255,255,255, .5)",
+};
+
+/**
+ * 左侧
+ */
+// 工程统计
+function initEngineeringStatistic() {
+ const url = '/screen/largeScreen/scIndex/proStatusStatistics'
+ loader.get(url, null, function (res) {
+ const {djNum, zjNum, allNum, tcNum, tgNum} = res.data
+ $('#engineering-statistic-item-1').text(djNum)
+ $('#engineering-statistic-item-2').text(zjNum)
+ $('#engineering-statistic-item-3').text(allNum)
+ $('#engineering-statistic-item-4').text(tcNum)
+ $('#engineering-statistic-item-5').text(tgNum)
+ })
}
-/*判断球机是否在线*/
-function isOnline(value) {
- if (value) {
- if (value === '0' || value === 0) {
- return '离线';
- } else {
- return '在线';
+// 施工质量排名
+function initQualityRanking() {
+ const url = '/screen/largeScreen/scIndex/constrQuality'
+ loader.get(url, null, function (res) {
+ res.data.forEach((item, index) => {
+ const {bidName, teamName, teamLeader, score} = item
+ var newRow = `
+ ${index + 1}
+ ${bidName}
+ ${teamName}
+ ${teamLeader}
+ ${score}
+ `;
+ $("#quality-ranking-table").append(newRow);
+ })
+ if (res.data.length) {
+ $('.quality-ranking__empty').hide()
}
- } else {
- return '离线';
- }
+ })
}
+// 环境分析
+function initEnvironmentAnalysis() {
+ const url = '/screen/largeScreen/scIndex/environmentDetection'
+ loader.get(url, null, function (res) {
+ const data = res.data[0]
+ if (!data) { return }
+ const {aqiNormalNum, aqiErrorNum, dbNormalNum, dbErrorNum, hcNormalNum, hcErrorNum} = data
+ $('#environment-analysis-1').find('div:first').find('p:first span').text(aqiNormalNum)
+ $('#environment-analysis-1').find('div:first').find('p:last span').text(aqiErrorNum)
+ $('#environment-analysis-2').find('div:first').find('p:first span').text(dbNormalNum)
+ $('#environment-analysis-2').find('div:first').find('p:last span').text(dbErrorNum)
+ $('#environment-analysis-3').find('div:first').find('p:first span').text(hcNormalNum)
+ $('#environment-analysis-3').find('div:first').find('p:last span').text(hcErrorNum)
+ })
+}
+
+// 设备状态
+function initDeviceStatus() {
+
+ let xLabel = []
+ let data1 = []
+ let data2 = []
+ let data3 = []
+
+ const url = '/screen/largeScreen/scIndex/deviceStatus'
+ loader.get(url, null, function (res) {
+ res.data.valueList.forEach(item => {
+ console.log(item)
+ const {proName, totalNum, onlineNum, offLineNum} = item
+ xLabel.push(proName)
+ data1.push(totalNum)
+ data2.push(onlineNum)
+ data3.push(offLineNum)
+ })
+
+ let option = {
+ tooltip,
+ dataZoom: [{
+ type: "slider",
+ realtime: true,
+ startValue: 0,
+ endValue: 100,
+ height: 3,
+ fillerColor: "#08A0A3", // 滚动条颜色
+ borderColor: "#08A0A3",
+ handleSize: 0, // 两边手柄尺寸
+ showDetail: false, // 拖拽时是否展示滚动条两侧的文字
+ top: "90%",
+ left: '2%',
+ right: '3%',
+ moveHandleStyle: {
+ color: "#08A0A3",
+ },
+ },
+ {
+ type: "inside", // 支持内部鼠标滚动平移
+ startValue: 0,
+ endValue: 100,
+ zoomOnMouseWheel: false, // 关闭滚轮缩放
+ moveOnMouseWheel: true, // 开启滚轮平移
+ moveOnMouseMove: true, // 鼠标移动能触发数据窗口平移
+ }],
+ grid: {
+ top: '20%',
+ left: '8%',
+ right: '3%',
+ bottom: '25%',
+ },
+ legend: {
+ data: ['总数', '在线', '不在线'],
+ show: true,
+ top: '0%',
+ right: '2%',
+ icon: 'circle',
+ itemWidth: 10,
+ itemHeight: 10,
+ itemGap: 20,
+ textStyle: {
+ color: '#fff',
+ fontSize: 14,
+ padding: [0, 8, 0, 8]
+ }
+ },
+ xAxis: [
+ {
+ type: 'category',
+ boundaryGap: true,
+ axisLine: {
+ show: true,
+ lineStyle: {
+ color: '#5A6E71',
+ },
+ },
+ axisLabel: {
+ //坐标轴刻度标签的相关设置
+ textStyle: {
+ color: fontColor,
+ fontSize: fontSize,
+ fontFamily: fontFamily
+ },
+ },
+ splitLine: {
+ show: false,
+ lineStyle: {
+ color: '#233653',
+ },
+ },
+ axisTick: {
+ show: false,
+ },
+ data: xLabel,
+ }
+ ],
+ yAxis: [
+ {
+ name: "",
+ nameTextStyle: {
+ color: fontColor,
+ fontSize: fontSize,
+ padding: [0, 60, 0, 0],
+ fontFamily: fontFamily
+ },
+ type: 'value',
+ splitLine: {
+ show: true,
+ lineStyle: {
+ color: '#25393B',
+ type: 'dashed'
+ },
+ },
+ axisLine: {
+ show: false,
+ lineStyle: {
+ color: '#008de7',
+ },
+ },
+ axisLabel: {
+ show: true,
+ textStyle: {
+ color: fontColor,
+ fontSize: fontSize,
+ fontFamily: fontFamily
+ }
+ },
+ axisTick: {
+ show: false,
+ },
+ }
+ ],
+ series: [
+ {
+ name: '总数',
+ type: 'line',
+ symbol: 'circle', // 默认是空心圆（中间是白色的），改成实心圆
+ showSymbol: false,
+ lineStyle: {
+ normal: {
+ width: 2,
+ color: '#59E1FF', // 线条颜色
+ },
+ },
+ tooltip: {
+ valueFormatter: function (value) {
+ return value;
+ }
+ },
+ itemStyle: {
+ normal: {
+ color: '#59E1FF',//拐点颜色
+ label: {
+ show: true, //开启显示
+ color: fontColor,
+ fontFamily: fontFamily,
+ position: 'top', //在上方显示
+ formatter: function (res) {
+ if (res.value) {
+ return res.value
+ } else {
+ return 0
+ }
+ },
+ },
+ },
+ },
+ symbolSize: 8, //设定实心点的大小
+ areaStyle: {
+ normal: {
+ //线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。
+ color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+ {
+ offset: 0,
+ color: '#1ED6FF30',
+ },
+ {
+ offset: 0.6,
+ color: '#1ED6FF20',
+ },
+ {
+ offset: 1,
+ color: '#1ED6FF10',
+ },
+ ],
+ false
+ ),
+ },
+ },
+ data: data1
+ },
+ {
+ name: '在线',
+ type: 'bar',
+ barWidth: 20,
+ itemStyle: {
+ color: '#59FFB9',
+ },
+ tooltip: {
+ valueFormatter: function (value) {
+ return value;
+ }
+ },
+ data: data2
+ },
+ {
+ name: '不在线',
+ type: 'bar',
+ barWidth: 20,
+ itemStyle: {
+ color: '#D299FF',
+ },
+ tooltip: {
+ valueFormatter: function (value) {
+ return value;
+ }
+ },
+ data: data3
+ },
+ ]
+ };
+
+ let deviceAnalysis = echarts.init(document.getElementById('device-status-chart'));
+ deviceAnalysis.setOption(option, true);
+ window.addEventListener("resize", function () {
+ deviceAnalysis.resize();
+ });
+
+ option && deviceAnalysis.setOption(option);
+ })
+
+}
+
+
+/**
+ * 中间
+ */
// 安徽省地图
function initMainMap(dataMap = []) {
let uploadedDataURL = "../config/anhui.json";
let myChart = echarts.init(document.getElementById('echarts-map'));
- let clickCityName = null, clickCityCode = null;
let convertData = function (data) {
- // let res = [];
- // for (let i = 0; i < data.length; i++) {
- // let geoCoord = data[i].coordinate;
- // if (geoCoord) {
- // res.push({
- // proName: data[i].proName,
- // riskLevel: data[i].riskType,
- // workContent: dealEmptyString(data[i].workContent),
- // isOnline: isOnline(data[i].ballStatus),
- // workManager: dealEmptyString(data[i].workManage) + '' + dealEmptyString(data[i].workManagePhone),
- // value: geoCoord.concat(data[i].value),
- // coordinate: data[i].coordinate,
- // });
- // }
- // }
- // console.log(res)
- return data;
+ let res = [];
+ for (let i = 0; i < data.length; i++) {
+ let geoCoord = [parseFloat(data[i].lon), parseFloat(data[i].lat), parseFloat(data[i].riskLevel)];
+ if (geoCoord) {
+ res.push({
+ proName: data[i].proName,
+ riskLeve: data[i].riskLevel,
+ workContent: data[i].workContent,
+ workManage: data[i].workManage,
+ value: geoCoord
+ });
+ }
+ }
+ return res
};
-
$.getJSON(uploadedDataURL, function (geoJson) {
echarts.registerMap('anhui', geoJson);
myChart.hideLoading();
@@ -122,14 +419,15 @@ function initMainMap(dataMap = []) {
pos = [pos[0], pos[1] + 10];
return pos;
},
- backgroundColor: 'rgba(14, 17, 28,0.63)', //设置背景颜色
+ backgroundColor: 'rgba(28,18,14,0.63)', //设置背景颜色
textStyle: {
color: '#fff'
},
- borderColor: "#174FDD",
- // formatter:
+ formatter (res) {
+ const dom = ''+ `工作内容：${res.data.workContent}` + '
'
+ return dom
+ },
extraCssText: "max-width:300px;height:auto;word-break:break-all;white-space:pre-wrap;",
-
},
geo: [
{
@@ -161,7 +459,7 @@ function initMainMap(dataMap = []) {
borderWidth: 1,
shadowColor: 'rgba(53,109,187,0.6)',
shadowBlur: 100,
- shadowOffsetX:'-20px',
+ shadowOffsetX: '-20px',
shadowOffsetY: '100px',
},
@@ -198,13 +496,12 @@ function initMainMap(dataMap = []) {
],
series: [
{
- name: '在线',
+ name: '作业内容',
type: 'scatter',
coordinateSystem: 'geo',
animation: false,
symbolSize: 20,
symbol: function (val) {
- console.log(val)
switch (val[2]) {
case 2:
return 'image://../image/二级.png';
@@ -241,271 +538,17 @@ function initMainMap(dataMap = []) {
myChart.clear();
myChart.setOption(option, true);
- myChart.off('dblclick').on("dblclick", function (params) {
- if(params.componentType === 'geo'){
- $('.switch-type').css('display', 'none');
- $('.switch-btn').css('display', 'none');
- $('.switch-type2').removeAttr('style');
- $('.multiselect').css('display', 'none')
- $('.back').removeAttr('style');
- // setUploadedDataURL2(params.name);
- }
- })
});
window.addEventListener("resize", function () {
myChart.resize();
});
}
-// 工程安全隐患分析
-function initEcharts() {
- let fontSize = '14', fontFamily = 'Alibaba PuHuiTi R', fontColor = '#fff';
- let xLabel = ['合肥', '芜湖', '马鞍山', '蚌埠', '淮南', '淮北', '铜陵', '安庆', '黄山', '阜阳', '六安', '滁州'];
- let dataValue = [20, 30, 40, 35, 34, 15, 56, 15, 12, 25, 34, 42];
- let dataValue1 = [40, 35, 34, 15, 56, 15, 12, 25, 34, 42, 20, 30,];
- const tooltip = {
- show: true,
- trigger: 'axis',
- axisPointer: {
- type: 'shadow'
- },
- backgroundColor: 'rgba(75, 79, 82, 0.80)', //设置背景颜色
- textStyle: {
- color: fontColor,
- fontFamily: fontFamily
- },
- borderColor: "rgba(255,255,255, .5)",
- };
- let option = {
- backgroundColor: 'transparent',
- tooltip,
- legend: {
- show: true,
- top: '15%',
- right: '2%',
- itemWidth: 30, // 图例标记的图形宽度。
- // itemGap: 20, // 图例每项之间的间隔。
- itemHeight: 10, // 图例标记的图形高度。
- textStyle: {
- color: '#fff',
- fontSize: 14,
- padding: [0, 8, 0, 8]
- }
- },
- grid: {
- top: '25%',
- left: '8%',
- right: '3%',
- bottom: '15%',
- },
- xAxis: [
- {
- type: 'category',
- boundaryGap: true,
- axisLine: {
- //坐标轴轴线相关设置。数学上的x轴
- show: true,
- lineStyle: {
- color: '#5A6E71',
- },
- },
- axisLabel: {
- //坐标轴刻度标签的相关设置
- textStyle: {
- color: fontColor,
- fontSize: fontSize,
- fontFamily: fontFamily
- },
- },
- splitLine: {
- show: false,
- lineStyle: {
- color: '#233653',
- },
- },
- axisTick: {
- show: false,
- },
- data: xLabel,
- },
- ],
- yAxis: [
- {
- name: "",
- nameTextStyle: {
- color: fontColor,
- fontSize: fontSize,
- padding: [0, 60, 0, 0],
- fontFamily: fontFamily
- },
- // minInterval: 1,
- type: 'value',
- splitLine: {
- show: true,
- lineStyle: {
- color: '#25393B',
- type: 'dashed'
- },
- },
- axisLine: {
- show: false,
- lineStyle: {
- color: '#008de7',
- },
- },
- axisLabel: {
- show: true,
- textStyle: {
- color: fontColor,
- fontSize: fontSize,
- fontFamily: fontFamily
- }
- },
- axisTick: {
- show: false,
- },
- },
- ],
- series: [
- {
- name: '周计划数',
- type: 'line',
- symbol: 'circle', // 默认是空心圆（中间是白色的），改成实心圆
- smooth: true,
- lineStyle: {
- normal: {
- width: 3,
- color: '#1ED6FF', // 线条颜色
- },
- },
- itemStyle: {
- normal: {
- color: '#1ED6FF',//拐点颜色
- // borderColor: '#fff600',//拐点边框颜色
- // borderWidth: 13//拐点边框大小
- label: {
- show: true, //开启显示
- color: fontColor,
- fontFamily: fontFamily,
- position: 'top', //在上方显示
- formatter: function (res) {
- if (res.value) {
- return res.value
- } else {
- return 0
- }
- },
- },
- },
-
- },
- symbolSize: 8, //设定实心点的大小
- areaStyle: {
- normal: {
- //线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。
- color: new echarts.graphic.LinearGradient(
- 0,
- 0,
- 0,
- 1,
- [
- {
- offset: 0,
- color: '#1ED6FF30',
- },
- {
- offset: 0.6,
- color: '#1ED6FF20',
- },
- {
- offset: 1,
- color: '#1ED6FF10',
- },
- ],
- false
- ),
- },
- },
- data: dataValue,
- },
- {
- name: '隐患数',
- type: 'line',
- symbol: 'circle', // 默认是空心圆（中间是白色的），改成实心圆
- smooth: true,
- lineStyle: {
- normal: {
- width: 3,
- color: '#FE533C', // 线条颜色
- },
- },
- itemStyle: {
- normal: {
- color: '#FE533C',//拐点颜色
- // borderColor: '#fff600',//拐点边框颜色
- // borderWidth: 13//拐点边框大小
- label: {
- show: true, //开启显示
- color: fontColor,
- fontFamily: fontFamily,
- position: 'top', //在上方显示
- formatter: function (res) {
- if (res.value) {
- return res.value
- } else {
- return 0
- }
- },
- },
- },
-
- },
- symbolSize: 8, //设定实心点的大小
- areaStyle: {
- normal: {
- //线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。
- color: new echarts.graphic.LinearGradient(
- 0,
- 0,
- 0,
- 1,
- [
- {
- offset: 0,
- color: '#FE533C30',
- },
- {
- offset: 0.6,
- color: '#FE533C20',
- },
- {
- offset: 1,
- color: '#ffba0010',
- },
- ],
- false
- ),
- },
- },
- data: dataValue1,
- }
- ]
- }
- let safetyAnalysis = echarts.init(document.getElementById('safety-analysis'));
- safetyAnalysis.setOption(option, true);
- window.addEventListener("resize", function () {
- safetyAnalysis.resize();
- });
-}
-
-
// 地图等级选中
-/*地图风险等级选中*/
$(".check-risk").click(function (e) {
let checkedName = $(this).find('p').eq(0).attr("checkedName");
let isCheck = $(this).attr("isCheck");
-
if (checkedName === '' && isCheck === '1') {
$('.check-risk').each(function () {
if ($(this).attr("isCheck") === '1') {
@@ -529,24 +572,14 @@ $(".check-risk").click(function (e) {
$(this).attr("isCheck", '1')
$(this).find('img').eq(0).attr("src", setRiskIcon(isCheck))
}
- // let weatherFlag = $('.switch-form').find('.layui-form-item').eq(0).find('input').eq(0).prop('checked')
- let weatherFlag = false
- // let terrainFlag = $('.switch-form').find('.layui-form-item').eq(1).find('input').eq(0).prop('checked')
- let terrainFlag = $('.switch-form').find('.layui-form-item').eq(0).find('input').eq(0).prop('checked')
- if (!weatherFlag) {
- mapSearch();
- if (!terrainFlag) {
- // console.log(mapPointList)
- // initMainMap(mapPointList)
- } else {
- clearOverlay(1)
- }
- }
+
+ mapSearch();
+ initMainMap(mapPointList)
});
// 设置风险等级选中样式
function setRiskIcon(value) {
- return value === '1' ? '../image/选择.png' : '../image/未选择.png';
+ return value === '1' ? '../image/未选择.png' : '../image/选择.png';
}
function mapSearch() {
@@ -562,239 +595,486 @@ function mapSearch() {
if (selRiskList.length) {
$.each(selRiskList, function (index, item) {
let dataList = mainMapPointList.filter(item2 => {
- if (item === '4') {
- return item2.riskType === '4' || item2.riskType === '5';
- } else {
- return item2.riskType === item
- }
+ return item2.riskLevel === item
})
$.each(dataList, function (index3, item3) {
mapPointList.push(item3)
})
})
}
- let keyWord = $('.keyWord').val();
- if (keyWord) {
- let dataList = mapPointList.filter(item => {
- if (item.proName.indexOf(keyWord) != -1 || item.foreman.indexOf(keyWord) != -1) {
- return item
- }
- })
- mapPointList.splice(0, mapPointList.length);
- if (dataList.length > 0) {
- $.each(dataList, function (index, item) {
- mapPointList.push(item)
- })
- }
- }
}
-// 设备状态
-function initDeviceStatus() {
- let option = {
- tooltip: {
- trigger: 'axis',
- axisPointer: {
- type: 'cross',
- crossStyle: {
- color: '#fff'
- }
- }
- },
- grid: {
- top: '25%',
- left: '8%',
- right: '3%',
- bottom: '15%',
- },
- legend: {
- data: ['总数', '在线', '不在线'],
- show: true,
- top: '15%',
- right: '5%',
- textStyle: {
- color: '#fff',
- fontSize: 14,
- padding: [0, 8, 0, 8]
- }
- },
- xAxis: [
- {
- type: 'category',
- data: ['xxx', 'xxx', 'xxx', 'xxx', 'xxx', 'xxx', 'xxx'],
- axisPointer: {
- type: 'shadow'
+function initRiskData() {
+ const url = '/screen/largeScreen/scIndex/riskStatistics'
+ loader.get(url, null, function (res) {
+ const data = res.data
+ mainMapPointList = data
+ mapSearch();
+ initMainMap(mapPointList)
+ })
+}
+
+/**
+ * 右侧
+ */
+// 工程安全隐患分析
+function initSafetyAnalysis() {
+
+ const url = '/screen/largeScreen/scIndex/potentialSafetyHazard'
+ loader.get(url, null, function (res) {
+ let xLabel = []
+ let dataValue = []
+ let dataValue1 = []
+ res.data.forEach(item => {
+ const {orgName, planNum, dangerNum} = item
+ xLabel.push(orgName)
+ dataValue.push(planNum)
+ dataValue1.push(dangerNum)
+ })
+
+
+ let option = {
+ backgroundColor: 'transparent',
+ tooltip,
+ dataZoom: [{
+ type: "slider",
+ realtime: true,
+ startValue: 0,
+ endValue: 4,
+ height: 3,
+ fillerColor: "#08A0A3", // 滚动条颜色
+ borderColor: "#08A0A3",
+ handleSize: 0, // 两边手柄尺寸
+ showDetail: false, // 拖拽时是否展示滚动条两侧的文字
+ top: "90%",
+ left: '2%',
+ right: '3%',
+ moveHandleStyle: {
+ color: "#08A0A3",
},
- axisLabel: {
- textStyle: {
- color: '#fff',
- fontSize: 14,
+ },
+ {
+ type: "inside", // 支持内部鼠标滚动平移
+ startValue: 0,
+ endValue: 4,
+ zoomOnMouseWheel: false, // 关闭滚轮缩放
+ moveOnMouseWheel: true, // 开启滚轮平移
+ moveOnMouseMove: true, // 鼠标移动能触发数据窗口平移
+ }],
+ legend: {
+ show: true,
+ top: '15%',
+ right: '2%',
+ itemWidth: 20, // 图例标记的图形宽度。
+ // itemGap: 20, // 图例每项之间的间隔。
+ itemHeight: 10, // 图例标记的图形高度。
+ textStyle: {
+ color: '#fff',
+ fontSize: 14,
+ padding: [0, 8, 0, 8]
+ }
+ },
+ grid: {
+ top: '25%',
+ left: '8%',
+ right: '3%',
+ bottom: '20%',
+ },
+ xAxis: [
+ {
+ type: 'category',
+ boundaryGap: true,
+ axisLine: {
+ show: true,
+ lineStyle: {
+ color: '#5A6E71',
+ },
+ },
+ axisLabel: {
+ //坐标轴刻度标签的相关设置
+ textStyle: {
+ color: fontColor,
+ fontSize: fontSize,
+ fontFamily: fontFamily
+ },
+ },
+ splitLine: {
+ show: false,
+ lineStyle: {
+ color: '#233653',
+ },
+ },
+ axisTick: {
+ show: false,
+ },
+ data: xLabel,
+ },
+ ],
+ yAxis: [
+ {
+ name: "",
+ nameTextStyle: {
+ color: fontColor,
+ fontSize: fontSize,
+ padding: [0, 60, 0, 0],
+ fontFamily: fontFamily
+ },
+ // minInterval: 1,
+ type: 'value',
+ splitLine: {
+ show: true,
+ lineStyle: {
+ color: '#25393B',
+ type: 'dashed'
+ },
+ },
+ axisLine: {
+ show: false,
+ lineStyle: {
+ color: '#008de7',
+ },
+ },
+ axisLabel: {
+ show: true,
+ textStyle: {
+ color: fontColor,
+ fontSize: fontSize,
+ fontFamily: fontFamily
+ }
+ },
+ axisTick: {
+ show: false,
},
},
- }
- ],
- yAxis: [
- {
- type: 'value',
- // name: 'Precipitation',
- min: 0,
- max: 250,
- interval: 50,
- axisLabel: {
- formatter: '{value}'
+ ],
+ series: [
+ {
+ name: '周计划数',
+ type: 'line',
+ symbol: 'circle', // 默认是空心圆（中间是白色的），改成实心圆
+ showSymbol: false,
+ smooth: true,
+ lineStyle: {
+ normal: {
+ width: 3,
+ color: '#1ED6FF', // 线条颜色
+ },
+ },
+ itemStyle: {
+ normal: {
+ color: '#1ED6FF',//拐点颜色
+ label: {
+ show: true, //开启显示
+ color: fontColor,
+ fontFamily: fontFamily,
+ position: 'top', //在上方显示
+ formatter: function (res) {
+ if (res.value) {
+ return res.value
+ } else {
+ return 0
+ }
+ },
+ },
+ },
+ },
+ symbolSize: 8, //设定实心点的大小
+ areaStyle: {
+ normal: {
+ //线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。
+ color: new echarts.graphic.LinearGradient(
+ 0,
+ 0,
+ 0,
+ 1,
+ [
+ {
+ offset: 0,
+ color: '#1ED6FF30',
+ },
+ {
+ offset: 0.6,
+ color: '#1ED6FF20',
+ },
+ {
+ offset: 1,
+ color: '#1ED6FF10',
+ },
+ ],
+ false
+ ),
+ },
+ },
+ data: dataValue,
},
- nameTextStyle: {
- color: '#fff',
- fontSize: 15,
+ {
+ name: '隐患数',
+ type: 'line',
+ symbol: 'circle', // 默认是空心圆（中间是白色的），改成实心圆
+ showSymbol: false,
+ smooth: true,
+ lineStyle: {
+ normal: {
+ width: 3,
+ color: '#FE533C', // 线条颜色
+ },
+ },
+ itemStyle: {
+ normal: {
+ color: '#FE533C',//拐点颜色
+ // borderColor: '#fff600',//拐点边框颜色
+ // borderWidth: 13//拐点边框大小
+ label: {
+ show: true, //开启显示
+ color: fontColor,
+ fontFamily: fontFamily,
+ position: 'top', //在上方显示
+ formatter: function (res) {
+ if (res.value) {
+ return res.value
+ } else {
+ return 0
+ }
+ },
+ },
+ },
+
+ },
+ symbolSize: 8, //设定实心点的大小
+ areaStyle: {
+ normal: {
+ //线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。
+ color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+ {
+ offset: 0,
+ color: '#FE533C30',
+ },
+ {
+ offset: 0.6,
+ color: '#FE533C20',
+ },
+ {
+ offset: 1,
+ color: '#ffba0010',
+ },
+ ],
+ false
+ ),
+ },
+ },
+ data: dataValue1,
}
- }
- ],
- series: [
- {
- name: '总数',
- type: 'bar',
- tooltip: {
- valueFormatter: function (value) {
- return value;
- }
- },
- data: [
- 2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3
- ]
- },
- {
- name: '在线',
- type: 'bar',
- tooltip: {
- valueFormatter: function (value) {
- return value;
- }
- },
- data: [
- 2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3
- ]
- },
- {
- name: '不在线',
- type: 'line',
- tooltip: {
- valueFormatter: function (value) {
- return value;
- }
- },
- data: [2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2]
- }
- ]
- };
-
- let deviceAnalysis = echarts.init(document.getElementById('device-status'));
- deviceAnalysis.setOption(option, true);
- window.addEventListener("resize", function () {
- deviceAnalysis.resize();
- });
-
- option && deviceAnalysis.setOption(option);
+ ]
+ }
+ let safetyAnalysis = echarts.init(document.getElementById('safety-analysis'));
+ safetyAnalysis.setOption(option, true);
+ window.addEventListener("resize", function () {
+ safetyAnalysis.resize();
+ });
+ })
}
// 工人效率分析
function initEfficiencyAnalysis() {
- let option = {
- tooltip: {
- trigger: 'axis',
- axisPointer: {
- type: 'cross',
- crossStyle: {
- color: '#fff'
- }
- }
- },
- grid: {
- top: '25%',
- left: '8%',
- right: '3%',
- bottom: '15%',
- },
- legend: {
- data: ['时间', '严重', '效率'],
- show: true,
- top: '15%',
- right: '5%',
- textStyle: {
- color: '#fff',
- fontSize: 14,
- padding: [0, 8, 0, 8]
- }
- },
- xAxis: [
- {
- type: 'category',
- data: ['xxx', 'xxx', 'xxx', 'xxx', 'xxx', 'xxx', 'xxx'],
- axisPointer: {
- type: 'shadow'
- }
- }
- ],
- yAxis: [
- {
- type: 'value',
- // name: 'Precipitation',
- min: 0,
- max: 250,
- interval: 50,
- axisLabel: {
- formatter: '{value}'
- }
- }
- ],
- series: [
- {
- name: '时间',
- type: 'bar',
- tooltip: {
- valueFormatter: function (value) {
- return value;
- }
- },
- data: [
- 2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3
- ]
- },
- {
- name: '严重',
- type: 'bar',
- tooltip: {
- valueFormatter: function (value) {
- return value;
- }
- },
- data: [
- 2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3
- ]
- },
- {
- name: '效率',
- type: 'line',
- tooltip: {
- valueFormatter: function (value) {
- return value;
- }
- },
- data: [2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2]
- }
- ]
- };
+ let xLabel = []
+ let data = []
- let efficiencyAnalysis = echarts.init(document.getElementById('efficiency-analysis'));
- efficiencyAnalysis.setOption(option, true);
- window.addEventListener("resize", function () {
- efficiencyAnalysis.resize();
- });
+ const url = '/screen/largeScreen/scIndex/efficiencyAnalysis'
+ loader.get(url, null, function (res) {
+ res.data.forEach(item => {
+ const {proName, value} = item
+ xLabel.push(proName)
+ data.push(value)
+ })
- option && efficiencyAnalysis.setOption(option);
+ let option = {
+ tooltip,
+ dataZoom: [{
+ type: "slider",
+ realtime: true,
+ startValue: 0,
+ endValue: 100,
+ height: 3,
+ fillerColor: "#08A0A3", // 滚动条颜色
+ borderColor: "#08A0A3",
+ handleSize: 0, // 两边手柄尺寸
+ showDetail: false, // 拖拽时是否展示滚动条两侧的文字
+ top: "90%",
+ left: '2%',
+ right: '3%',
+ moveHandleStyle: {
+ color: "#08A0A3",
+ },
+ },
+ {
+ type: "inside", // 支持内部鼠标滚动平移
+ startValue: 0,
+ endValue: 100,
+ zoomOnMouseWheel: false, // 关闭滚轮缩放
+ moveOnMouseWheel: true, // 开启滚轮平移
+ moveOnMouseMove: true, // 鼠标移动能触发数据窗口平移
+ }],
+ grid: {
+ top: '25%',
+ left: '8%',
+ right: '3%',
+ bottom: '25%',
+ },
+ legend: {
+ data: ['进度'],
+ show: true,
+ top: '15%',
+ right: '2%',
+ icon: 'circle',
+ itemWidth: 10,
+ itemHeight: 10,
+ itemGap: 20,
+ textStyle: {
+ color: '#fff',
+ fontSize: 14,
+ padding: [0, 8, 0, 8]
+ }
+ },
+ xAxis: [
+ {
+ type: 'category',
+ boundaryGap: true,
+ axisLine: {
+ show: true,
+ lineStyle: {
+ color: '#5A6E71',
+ },
+ },
+ axisLabel: {
+ //坐标轴刻度标签的相关设置
+ textStyle: {
+ color: fontColor,
+ fontSize: fontSize,
+ fontFamily: fontFamily
+ },
+ },
+ splitLine: {
+ show: false,
+ lineStyle: {
+ color: '#233653',
+ },
+ },
+ axisTick: {
+ show: false,
+ },
+ data: xLabel,
+ }
+ ],
+ yAxis: [
+ {
+ name: "",
+ nameTextStyle: {
+ color: fontColor,
+ fontSize: fontSize,
+ padding: [0, 60, 0, 0],
+ fontFamily: fontFamily
+ },
+ type: 'value',
+ splitLine: {
+ show: true,
+ lineStyle: {
+ color: '#25393B',
+ type: 'dashed'
+ },
+ },
+ axisLine: {
+ show: false,
+ lineStyle: {
+ color: '#008de7',
+ },
+ },
+ axisLabel: {
+ show: true,
+ textStyle: {
+ color: fontColor,
+ fontSize: fontSize,
+ fontFamily: fontFamily
+ }
+ },
+ axisTick: {
+ show: false,
+ },
+ }
+ ],
+ series: [
+ {
+ name: '进度',
+ type: 'bar',
+ barWidth: 20,
+ itemStyle: {
+ color: '#59E1FF',
+ },
+ tooltip: {
+ valueFormatter: function (value) {
+ return value;
+ }
+ },
+ data: data
+ },
+ ]
+ };
+
+ let deviceAnalysis = echarts.init(document.getElementById('efficiency-analysis'));
+ deviceAnalysis.setOption(option, true);
+ window.addEventListener("resize", function () {
+ deviceAnalysis.resize();
+ });
+
+ option && deviceAnalysis.setOption(option);
+ })
}
// 资源利用
function initResourceRate() {
+ const url = '/screen/largeScreen/scIndex/resourceUse'
+ let element = document.getElementsByClassName('resource-rate-item')
+ const config = [
+ {
+ dataTitle: '人员利用率',
+ dataNum: 50,
+ dataNumColor: 'rgba(251,221,45,0.8)',
+ dashboardBgc: 'rgba(254,249,209,0.2)',
+ dashboardColor: 'rgba(251,221,45,0.8)'
+ },
+ {
+ dataTitle: '设备使用率',
+ dataNum: 25,
+ dataNumColor: 'rgba(1,194,255,0.8)',
+ dashboardBgc: 'rgba(45,153,139,0.2)',
+ dashboardColor: 'rgba(1,194,255,0.8)'
+ },
+ {
+ dataTitle: '能源使用率',
+ dataNum: 15,
+ dataNumColor: 'rgba(1,255,193,0.8)',
+ dashboardBgc: 'rgba(45,153,139,0.2)',
+ dashboardColor: 'rgba(1,255,193,0.8)'
+ },
+ ]
+ loader.get(url, null, function (res) {
+ const {personnelRate, deviceRate, energyValue} = res.data
+ config[0].dataNum = personnelRate
+ config[1].dataNum = deviceRate
+ config[2].dataNum = energyValue
+
+ for (let i = 0; i < element.length; i++) {
+ let option = getResourceChartOption(config[i])
+ let resourceRate = echarts.init(element[i]);
+ resourceRate.setOption(option, true);
+ window.addEventListener("resize", function () {
+ resourceRate.resize();
+ });
+ option && resourceRate.setOption(option);
+ }
+ })
+}
+function getResourceChartOption(config) {
+ const {dataTitle, dataNum, dataNumColor, dashboardBgc, dashboardColor} = config
let option = {
series: [
{
@@ -806,9 +1086,10 @@ function initResourceRate() {
splitNumber: 10,
radius: '80%', // 仪表盘大小
center: ['50%', '75%'],
+ colorBy: 'value',
itemStyle: {
- color: 'green',
- shadowColor: 'rgba(0,138,255,0.45)',
+ color: dashboardColor,
+ shadowColor: dashboardBgc,
shadowBlur: 10,
shadowOffsetX: 2,
shadowOffsetY: 2,
@@ -823,7 +1104,8 @@ function initResourceRate() {
},
axisLine: {
lineStyle: {
- width: 10
+ width: 10,
+ color: [[1, dashboardBgc]]
}
},
axisTick: {
@@ -837,7 +1119,8 @@ function initResourceRate() {
},
title: {
show: true,
- color: '#fff'
+ color: '#fff',
+ fontSize: 14
},
detail: {
borderColor: '#999',
@@ -849,47 +1132,45 @@ function initResourceRate() {
offsetCenter: [0, '-25%'],
valueAnimation: true,
formatter: function (value) {
- return '{value|' + value.toFixed(0) + '}{unit|%}';
+ return '{value|' + value + '}{unit|%}';
},
rich: {
value: {
fontSize: 20,
- fontWeight: 'bolder',
- color: '#fff'
+ color: dataNumColor
},
unit: {
fontSize: 15,
- color: '#fff',
+ color: dataNumColor,
}
}
},
data: [
{
- value: 50,
- name: '利用率'
+ value: dataNum,
+ name: dataTitle,
}
]
}
]
};
+ return option
+}
- let element = document.getElementsByClassName('resource-rate-item')
- for (let i=0; i {
+ const {proName, warningContent} = item
+ var newRow = `
+ ${proName}
+ ${warningContent}
+ `;
+ $("#alarm-reminder-table").append(newRow);
+ })
+ if (res.data.length) {
+ $('.alarm-reminder__empty').hide()
+ }
+ })
}
\ No newline at end of file
diff --git a/pages/web/views/main.html b/pages/web/views/main.html
index 77e7dcb..d2258dd 100644
--- a/pages/web/views/main.html
+++ b/pages/web/views/main.html
@@ -9,6 +9,7 @@
+
@@ -18,8 +19,11 @@
首页
@@ -33,65 +37,88 @@
- 100
+
-
-
+
+
+ -
+
排名
+ 工程名称
+ 班组名称
+ 班组长
+ 施工质量
+
+
+
暂无数据
-
正常999
-
异常999
+
正常 0
+
异常 0
-
空气质量
+
空气质量
-
正常999
-
异常999
+
正常 0
+
异常 0
-
噪声水平
+
噪声水平
-
正常999
-
异常999
+
正常 0
+
异常 0
-
灰尘浓度
+
灰尘浓度
-
+
-
+ 总设备：999
+
+
+ 在线：999
+
+
+
+ 不在线：999
+
+
+
+
@@ -100,38 +127,42 @@
-
+
全选
-
-
二级
+
+
二级
-
-
三级
+
+
三级
-
-
四级
+
+
四级
-
-
五级
+
+
五级
-
+
-
人员利用率
-
设备利用率
-
能源利用率
+
+
+
-
-
-