20230328
This commit is contained in:
commit
a0b41d3c13
|
|
@ -118,3 +118,39 @@ export const getCameraHistory = (params) => {
|
|||
{params},
|
||||
)
|
||||
};
|
||||
//安全检查统计
|
||||
export const getCheckTotalCensus = (params) => {
|
||||
return axios.get('api/ems-third-party-service/project/checkTotalCensus',
|
||||
{params},
|
||||
)
|
||||
};
|
||||
//检查次数统计
|
||||
export const getCheckTimesCensus = (params) => {
|
||||
return axios.get('api/ems-third-party-service/project/checkTimesCensus',
|
||||
{params},
|
||||
)
|
||||
};
|
||||
//隐患检查统计
|
||||
export const getResolveTroubleCensus = (params) => {
|
||||
return axios.get('api/ems-third-party-service/project/resolveTroubleCensus',
|
||||
{params},
|
||||
)
|
||||
};
|
||||
// //高频问题项
|
||||
export const getMostTroubleCensus = (params) => {
|
||||
return axios.get('api/ems-third-party-service/project/mostTroubleCensus',
|
||||
{params},
|
||||
)
|
||||
};
|
||||
//安全告警统计
|
||||
export const getWarnSurveillance = (params) => {
|
||||
return axios.get('api/ems-third-party-service/project/warnSurveillance',
|
||||
{params},
|
||||
)
|
||||
};
|
||||
//隐患整改记录
|
||||
// export const getMostTroubleCensus = (params) => {
|
||||
// return axios.get('api/ems-third-party-service/project/mostTroubleCensus',
|
||||
// {params},
|
||||
// )
|
||||
// };
|
||||
|
|
|
|||
|
|
@ -7,7 +7,7 @@
|
|||
width="100%"
|
||||
height="100%"
|
||||
></Chart>
|
||||
<div class="lineBox"></div>
|
||||
<!-- <div class="lineBox"></div> -->
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
|
|
@ -20,10 +20,10 @@ export default {
|
|||
default: ''
|
||||
},
|
||||
// 父组件传递过来的图表数据
|
||||
chartData: {
|
||||
type: Array,
|
||||
required: true
|
||||
},
|
||||
// chartData: {
|
||||
// type: Array,
|
||||
// required: true
|
||||
// },
|
||||
colorArray: {
|
||||
type: Array,
|
||||
default: () => {
|
||||
|
|
@ -52,6 +52,10 @@ export default {
|
|||
yAxisPadding: {
|
||||
type: Array,
|
||||
default: null
|
||||
},
|
||||
checkCountList:{
|
||||
type:Array,
|
||||
default:null
|
||||
}
|
||||
},
|
||||
|
||||
|
|
@ -68,9 +72,15 @@ export default {
|
|||
|
||||
watch: {
|
||||
// 监听父组件中的数据变化，重新触发Echarts
|
||||
chartData: {
|
||||
// chartData: {
|
||||
// deep: true,
|
||||
// handler () {
|
||||
// this.resetOption()
|
||||
// }
|
||||
// },
|
||||
checkCountList:{
|
||||
deep: true,
|
||||
handler () {
|
||||
handler (newVal) {
|
||||
this.resetOption()
|
||||
}
|
||||
}
|
||||
|
|
@ -99,6 +109,12 @@ export default {
|
|||
}
|
||||
},
|
||||
option () {
|
||||
let dataX = [] //X轴
|
||||
let dataY = [] //Y轴
|
||||
this.checkCountList.forEach((item,index) => {
|
||||
dataX.push(item.time)
|
||||
dataY.push(item.count)
|
||||
});
|
||||
const self = this
|
||||
return {
|
||||
tooltip: {
|
||||
|
|
@ -145,7 +161,7 @@ export default {
|
|||
},
|
||||
triggerEvent: true,
|
||||
type: 'category',
|
||||
data: this.xAxisData
|
||||
data: dataX
|
||||
},
|
||||
yAxis: {
|
||||
name: '次数',
|
||||
|
|
@ -183,7 +199,7 @@ export default {
|
|||
series: [
|
||||
{
|
||||
name:'检查次数',
|
||||
data: this.chartData,
|
||||
data: dataY,
|
||||
type: 'line',
|
||||
color:'#76E679'
|
||||
},
|
||||
|
|
|
|||
|
|
@ -11,10 +11,14 @@ const MAX_LABEL = 8
|
|||
export default {
|
||||
props: {
|
||||
// 父组件传递过来的图表数据
|
||||
chartData: {
|
||||
type: Array,
|
||||
required: true
|
||||
},
|
||||
// chartData: {
|
||||
// type: Array,
|
||||
// required: true
|
||||
// },
|
||||
highIssues:{
|
||||
type:Array,
|
||||
default:null
|
||||
}
|
||||
},
|
||||
components: {
|
||||
Chart
|
||||
|
|
@ -45,7 +49,13 @@ export default {
|
|||
|
||||
watch: {
|
||||
// 监听父组件中的数据变化，重新触发Echarts
|
||||
chartData: {
|
||||
// chartData: {
|
||||
// deep: true,
|
||||
// handler() {
|
||||
// this.resetOption()
|
||||
// }
|
||||
// },
|
||||
highIssues:{
|
||||
deep: true,
|
||||
handler() {
|
||||
this.resetOption()
|
||||
|
|
@ -55,6 +65,12 @@ export default {
|
|||
|
||||
computed: {
|
||||
option() {
|
||||
let dataX= [] //名称
|
||||
let dataY = [] //数量
|
||||
this.highIssues.forEach((item,index) => {
|
||||
dataX.push(item.name)
|
||||
dataY.push(item.count)
|
||||
});
|
||||
const self = this
|
||||
return {
|
||||
tooltip: {
|
||||
|
|
@ -131,14 +147,13 @@ export default {
|
|||
padding: [-20, 0, 14, 0],
|
||||
},
|
||||
},
|
||||
data:['焊接：','现场作业准备及布置：','保护接地或接零：','建筑用电：','电缆沟挖方：',],
|
||||
data:dataX,
|
||||
triggerEvent: true,
|
||||
|
||||
}
|
||||
],
|
||||
series: [
|
||||
{
|
||||
data: this.list,
|
||||
data: dataY,
|
||||
type: 'bar',
|
||||
barWidth: 16,
|
||||
barGap: '-30%',
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
<template>
|
||||
<div style="width:100%;height:100%;">
|
||||
<div ref="chart" style="width:100%;height:100%;"></div>
|
||||
<div style="width: 100%; height: 100%">
|
||||
<div ref="chart" style="width: 100%; height: 100%"></div>
|
||||
<!-- <div class="boxPeople aa">
|
||||
<div class="name" style="color: #F2DA8D;">施工工作组</div>
|
||||
<div class="nucm" style="color: #F9EBBD;font-weight: bold;font-size: 24px; ">33<span style=" font-size: 14px; color: #F2DA8D;">人</span></div>
|
||||
|
|
@ -20,170 +20,175 @@
|
|||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import { List } from 'echarts/lib/export'
|
||||
import giftImageUrl from '../../assets/pic/circle.png'
|
||||
export default {
|
||||
import { List } from "echarts/lib/export";
|
||||
import giftImageUrl from "../../assets/pic/circle.png";
|
||||
export default {
|
||||
props: {
|
||||
picIsShow: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
default: true,
|
||||
},
|
||||
colorList: {
|
||||
type: Array,
|
||||
default(){
|
||||
return ['#00A572', '#008AA4', '#7968D9', '#C7A73E']
|
||||
}
|
||||
default() {
|
||||
return ["#00A572", "#008AA4", "#7968D9", "#C7A73E", "rgb(28,241,235)"];
|
||||
},
|
||||
},
|
||||
projectUser: {
|
||||
type: Array,
|
||||
default: [],
|
||||
},
|
||||
projectUser:{
|
||||
type:Array,
|
||||
default: []
|
||||
}
|
||||
},
|
||||
|
||||
components: {
|
||||
},
|
||||
components: {},
|
||||
|
||||
data() {
|
||||
return {}
|
||||
},
|
||||
mounted() {
|
||||
return {};
|
||||
},
|
||||
mounted() {},
|
||||
watch: {
|
||||
// 监听父组件中的数据变化，重新触发Echarts
|
||||
chartData: {
|
||||
deep: true,
|
||||
handler() {
|
||||
this.resetOption()
|
||||
}
|
||||
this.resetOption();
|
||||
},
|
||||
},
|
||||
projectUser: {
|
||||
deep: true,
|
||||
handler(newVal) {
|
||||
this.initCharts(newVal)
|
||||
}
|
||||
}
|
||||
this.initCharts(newVal);
|
||||
},
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
initCharts(value) {
|
||||
let myChart = this.$echarts.init(this.$refs.chart)
|
||||
var val1data2 = [{
|
||||
let myChart = this.$echarts.init(this.$refs.chart);
|
||||
var val1data2 = [
|
||||
{
|
||||
value: 33,
|
||||
name: '电工',
|
||||
name: "电工",
|
||||
},
|
||||
{
|
||||
value: 13,
|
||||
name: '项目监理组',
|
||||
name: "项目监理组",
|
||||
},
|
||||
{
|
||||
value: 14,
|
||||
name: '土建专工',
|
||||
name: "土建专工",
|
||||
},
|
||||
{
|
||||
value: 43,
|
||||
name: '架子工',
|
||||
}
|
||||
]
|
||||
val1data2 = Object.keys(value).map((item,index)=>{
|
||||
return {name:value[item].groupName,value:value[item].number}
|
||||
})
|
||||
var arr = ['middleLost', 0.6, val1data2, '今日完成进度']
|
||||
name: "架子工",
|
||||
},
|
||||
];
|
||||
val1data2 = Object.keys(value).map((item, index) => {
|
||||
return { name: value[item].groupName, value: value[item].number };
|
||||
});
|
||||
var arr = ["middleLost", 0.6, val1data2, "今日完成进度"];
|
||||
// 绘制图表
|
||||
myChart.setOption({
|
||||
tooltip:{
|
||||
trigger:'item',
|
||||
formatter: '{b}：{c}',
|
||||
backgroundColor: "rgba(255,255,255,0)",
|
||||
tooltip: {
|
||||
trigger: "item",
|
||||
formatter: "{b}：{c}",
|
||||
},
|
||||
graphic: {
|
||||
elements: [{
|
||||
type: 'image',//需要填充图片,配置image,如果不需要图片可以配置其他的, text, circle, sector, ring, polygon, polyline, rect, line, bezierCurve, arc, group,
|
||||
elements: [
|
||||
{
|
||||
type: "image", //需要填充图片,配置image,如果不需要图片可以配置其他的, text, circle, sector, ring, polygon, polyline, rect, line, bezierCurve, arc, group,
|
||||
style: {
|
||||
image: this.picIsShow ? giftImageUrl : '', //这里添加图片地址
|
||||
image: this.picIsShow ? giftImageUrl : "", //这里添加图片地址
|
||||
width: 120,
|
||||
height: 120
|
||||
height: 120,
|
||||
},
|
||||
left: '161',//
|
||||
top: '97' //配置图片居中
|
||||
}]
|
||||
left: "161", //
|
||||
top: "97", //配置图片居中
|
||||
},
|
||||
],
|
||||
},
|
||||
series: [
|
||||
{
|
||||
type: 'pie',
|
||||
radius: this.picIsShow ? ['53%', '65%'] : ['60%', '60%'],
|
||||
center: ['50%', '157'],
|
||||
type: "pie",
|
||||
radius: this.picIsShow ? ["53%", "65%"] : ["60%", "60%"],
|
||||
center: ["50%", "157"],
|
||||
color: this.colorList,
|
||||
hoverAnimation: true, /// /设置饼图默认的展开样式
|
||||
label: {
|
||||
show: true,
|
||||
formatter: '{b}：{c}',
|
||||
formatter: "{b|{b}}{c|{c}}人",
|
||||
rich: {
|
||||
d: {
|
||||
color: '#fff',
|
||||
fontSize: 25,
|
||||
// lineHeight: 24,
|
||||
height: 24,
|
||||
b: {
|
||||
fontSize: 15,
|
||||
lineHeight: 33,
|
||||
},
|
||||
c: {
|
||||
color: "red",
|
||||
fontSize: 25,
|
||||
// lineHeight: 20,
|
||||
align: 'left',
|
||||
}
|
||||
lineHeight: 22,
|
||||
align: "center",
|
||||
opacity: 0.1
|
||||
},
|
||||
position: '',
|
||||
},
|
||||
textStyle: {
|
||||
fontSize: 15,
|
||||
},
|
||||
position: "",
|
||||
},
|
||||
labelLine: {
|
||||
normal: {
|
||||
show: false
|
||||
}
|
||||
show: false,
|
||||
},
|
||||
itemStyle: { // 此配置
|
||||
normal: {
|
||||
},
|
||||
// itemStyle: { // 此配置
|
||||
// normal: {
|
||||
// borderWidth: 2,
|
||||
// borderColor: 'rgba(255,255,255,0.7)'
|
||||
// }
|
||||
// },
|
||||
itemStyle: {
|
||||
borderRadius: 2,
|
||||
borderColor: "rgb(255,255,255)",
|
||||
borderWidth: 2,
|
||||
borderColor: '#fff'
|
||||
}
|
||||
},
|
||||
data: arr[2]
|
||||
}
|
||||
]
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
data: arr[2],
|
||||
},
|
||||
],
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.dd{
|
||||
.dd {
|
||||
top: 214px;
|
||||
right: 17px;
|
||||
}
|
||||
.cc{
|
||||
}
|
||||
.cc {
|
||||
top: 214px;
|
||||
left: 34px;
|
||||
}
|
||||
.aa{
|
||||
}
|
||||
.aa {
|
||||
top: 66px;
|
||||
left: 33px;
|
||||
}
|
||||
.bb{
|
||||
}
|
||||
.bb {
|
||||
top: 52px;
|
||||
right: 44px;
|
||||
}
|
||||
}
|
||||
|
||||
.boxPeople{
|
||||
.boxPeople {
|
||||
position: absolute;
|
||||
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.nucm{
|
||||
.nucm {
|
||||
font-size: 20px;
|
||||
font-weight: 700;
|
||||
|
||||
}
|
||||
.name{
|
||||
.name {
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
</style>
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -105,8 +105,8 @@ export default {
|
|||
hoverAnimation: true, /// /设置饼图默认的展开样式
|
||||
label: {
|
||||
show: true,
|
||||
formatter: '{b}：{c}%',
|
||||
padding:[0,10,0,50],
|
||||
formatter: '{b|{b}}:{c|{c}}%',
|
||||
padding:[0,0,0,0],
|
||||
itemStyle: { // 此配置
|
||||
normal: {
|
||||
borderWidth: 2,
|
||||
|
|
@ -114,18 +114,16 @@ export default {
|
|||
}
|
||||
},
|
||||
rich: {
|
||||
d: {
|
||||
color: '#fff',
|
||||
fontSize: 20,
|
||||
lineHeight: 24,
|
||||
height: 24
|
||||
b: {
|
||||
fontSize: 15,
|
||||
lineHeight: 33,
|
||||
},
|
||||
c: {
|
||||
color: "red",
|
||||
fontSize: 20,
|
||||
lineHeight: 20,
|
||||
align: 'left',
|
||||
}
|
||||
fontSize: 18,
|
||||
lineHeight: 22,
|
||||
align: "center",
|
||||
opacity: 0.1
|
||||
},
|
||||
},
|
||||
position: '',
|
||||
},
|
||||
|
|
|
|||
|
|
@ -92,19 +92,17 @@ export default {
|
|||
borderColor: "#52FFC1",
|
||||
},
|
||||
},
|
||||
formatter: "{b}{c}%",
|
||||
formatter: "{b|{b}}{c|{c}}%",
|
||||
rich: {
|
||||
d: {
|
||||
color: "#fff",
|
||||
fontSize: 20,
|
||||
lineHeight: 24,
|
||||
height: 24,
|
||||
b: {
|
||||
fontSize: 15,
|
||||
lineHeight: 33,
|
||||
},
|
||||
c: {
|
||||
color: "red",
|
||||
fontSize: 20,
|
||||
lineHeight: 20,
|
||||
align: "left",
|
||||
fontSize: 18,
|
||||
lineHeight: 22,
|
||||
align: "center",
|
||||
opacity: 0.1
|
||||
},
|
||||
},
|
||||
position: "",
|
||||
|
|
|
|||
|
|
@ -1,261 +1,349 @@
|
|||
<template>
|
||||
<div style="position: relative">
|
||||
<Chart ref="chart" :chartOption="option" :className="className" width="100%" height="100%"
|
||||
<Chart
|
||||
ref="chart"
|
||||
:chartOption="option"
|
||||
:className="className"
|
||||
width="100%"
|
||||
height="100%"
|
||||
></Chart>
|
||||
<div class="lineBox"></div>
|
||||
<!-- <div class="lineBox"></div> -->
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import Chart from '../chart.vue'
|
||||
const MAX_LABEL = 8
|
||||
import Chart from "../chart.vue";
|
||||
const MAX_LABEL = 8;
|
||||
export default {
|
||||
props: {
|
||||
className: {
|
||||
type: String,
|
||||
default: ''
|
||||
default: "",
|
||||
},
|
||||
// 父组件传递过来的图表数据
|
||||
chartData: {
|
||||
type: Array,
|
||||
required: true
|
||||
required: true,
|
||||
},
|
||||
chartData2: {
|
||||
type: Array,
|
||||
required: true
|
||||
required: true,
|
||||
},
|
||||
chartData3: {
|
||||
type: Array,
|
||||
required: true
|
||||
required: true,
|
||||
},
|
||||
colorArray: {
|
||||
type: Array,
|
||||
default: () => {
|
||||
return ['#84F5DE', '#56E8F2', '#4CC5F8']
|
||||
}
|
||||
return ["#84F5DE", "#56E8F2", "#4CC5F8"];
|
||||
},
|
||||
},
|
||||
yAxisName: {
|
||||
type: String,
|
||||
default: ''
|
||||
default: "",
|
||||
},
|
||||
// x轴数据
|
||||
xAxisData: {
|
||||
type: Array,
|
||||
default: () => {
|
||||
return []
|
||||
}
|
||||
return [];
|
||||
},
|
||||
},
|
||||
tooltipFormatter: {
|
||||
type: Function | String,
|
||||
default: null
|
||||
default: null,
|
||||
},
|
||||
yAxisPosition: {
|
||||
type: String,
|
||||
default: 'left'
|
||||
default: "left",
|
||||
},
|
||||
yAxisPadding: {
|
||||
type: Array,
|
||||
default: null
|
||||
}
|
||||
default: null,
|
||||
},
|
||||
safeList: {
|
||||
type: Array,
|
||||
default: null,
|
||||
},
|
||||
},
|
||||
|
||||
components: {
|
||||
Chart
|
||||
Chart,
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
tipStyle: { visibility: 'hidden', position: 'absolute', top: 0, left: 0 },
|
||||
tipContent: ''
|
||||
}
|
||||
tipStyle: { visibility: "hidden", position: "absolute", top: 0, left: 0 },
|
||||
tipContent: "",
|
||||
};
|
||||
},
|
||||
|
||||
watch: {
|
||||
// 监听父组件中的数据变化，重新触发Echarts
|
||||
chartData: {
|
||||
// chartData: {
|
||||
// deep: true,
|
||||
// handler() {
|
||||
// this.resetOption()
|
||||
// }
|
||||
// },
|
||||
safeList: {
|
||||
deep: true,
|
||||
handler() {
|
||||
this.resetOption()
|
||||
}
|
||||
}
|
||||
this.resetOption();
|
||||
},
|
||||
},
|
||||
},
|
||||
|
||||
computed: {
|
||||
option() {
|
||||
const self = this
|
||||
let dataX = [];
|
||||
let equipment = []; //设备告警
|
||||
let fire = []; //消防告警
|
||||
let gas = []; //耗气告警
|
||||
let power = []; // 用电告警
|
||||
let water = []; //给水告警
|
||||
this.safeList.forEach((item, index) => {
|
||||
dataX.push(item.time);
|
||||
equipment.push(item.equipment);
|
||||
fire.push(item.fire);
|
||||
gas.push(item.gas);
|
||||
power.push(item.power);
|
||||
water.push(item.water);
|
||||
});
|
||||
const self = this;
|
||||
return {
|
||||
tooltip: {
|
||||
trigger: "axis",
|
||||
axisPointer: {
|
||||
type: "shadow",
|
||||
label: {
|
||||
show: false
|
||||
}
|
||||
}
|
||||
show: false,
|
||||
},
|
||||
},
|
||||
},
|
||||
title: {
|
||||
textStyle: {
|
||||
fontSize: 18,
|
||||
fontWeight: 'bold',
|
||||
color: '#1EBBFC'
|
||||
}
|
||||
fontWeight: "bold",
|
||||
color: "#1EBBFC",
|
||||
},
|
||||
legend: { //对图形的解释部分
|
||||
left: '97',
|
||||
},
|
||||
legend: {
|
||||
//对图形的解释部分
|
||||
left: "97",
|
||||
y: 63,
|
||||
itemHeight: 12,
|
||||
data: ['人员安全', '环境安全','设备安全'],
|
||||
data: ["用电告警", "消防告警", "给水告警", "设备告警", "耗气告警"],
|
||||
textStyle: {
|
||||
fontSize: 12, //字体大小
|
||||
color: ['#66D19B','#ECBF00','#00C1F0'], //字体颜色
|
||||
}
|
||||
color: [
|
||||
"#66D19B",
|
||||
"#ECBF00",
|
||||
"#00C1F0",
|
||||
"rgb(236,218,75)",
|
||||
"rgb(190,109,254)",
|
||||
], //字体颜色
|
||||
},
|
||||
},
|
||||
grid: {
|
||||
left: '26',
|
||||
right: '26',
|
||||
bottom: '33',
|
||||
top:'103',
|
||||
containLabel: true
|
||||
left: "26",
|
||||
right: "26",
|
||||
bottom: "33",
|
||||
top: "103",
|
||||
containLabel: true,
|
||||
},
|
||||
xAxis: {
|
||||
axisLine: {
|
||||
// x轴线的颜色以及宽度
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: '#fff',
|
||||
height: 0
|
||||
}
|
||||
color: "#fff",
|
||||
height: 0,
|
||||
},
|
||||
},
|
||||
axisTick: {
|
||||
show: false
|
||||
show: false,
|
||||
},
|
||||
axisLabel: {
|
||||
interval: 0, // 横轴信息全部显示
|
||||
margin: 6, // 刻度标签与轴线之间的距离
|
||||
align: 'center',
|
||||
margin: 10, // 刻度标签与轴线之间的距离
|
||||
align: "center",
|
||||
fontSize: 13, // 横轴字体大小
|
||||
color: '#bde9e4', // 颜色
|
||||
color: "#bde9e4", // 颜色
|
||||
},
|
||||
triggerEvent: true,
|
||||
type: 'category',
|
||||
data: this.xAxisData
|
||||
// triggerEvent: true,
|
||||
type: "category",
|
||||
data: dataX,
|
||||
},
|
||||
yAxis: {
|
||||
name: ['次数'],
|
||||
type: 'value',
|
||||
name: ["次数"],
|
||||
type: "value",
|
||||
position: this.yAxisPosition || null,
|
||||
nameTextStyle: {
|
||||
color: '#64D5CD',
|
||||
color: "#64D5CD",
|
||||
padding: this.yAxisPadding || [0, 28, 2, 0],
|
||||
fontSize: 12,
|
||||
opacity: 0.5
|
||||
opacity: 0.5,
|
||||
},
|
||||
axisLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: 'white'
|
||||
}
|
||||
color: "white",
|
||||
},
|
||||
},
|
||||
splitLine: {
|
||||
// 分割线配置
|
||||
show: false,
|
||||
lineStyle: {
|
||||
color: '#078DF0',
|
||||
opacity: 0.3
|
||||
}
|
||||
color: "#078DF0",
|
||||
opacity: 0.3,
|
||||
},
|
||||
},
|
||||
axisLabel: {
|
||||
color: '#bde9e4',
|
||||
color: "#bde9e4",
|
||||
fontSize: 14,
|
||||
opacity: 0.5
|
||||
opacity: 0.5,
|
||||
},
|
||||
axisTick: {
|
||||
show: false
|
||||
show: false,
|
||||
},
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: '人员安全',
|
||||
data: this.chartData,
|
||||
type: 'bar',
|
||||
name: "用电告警",
|
||||
data: power,
|
||||
type: "bar",
|
||||
barWidth: 12,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: {
|
||||
type: 'bar',
|
||||
colorStops: [{
|
||||
type: "bar",
|
||||
colorStops: [
|
||||
{
|
||||
offset: 0,
|
||||
color: '#6FD8A5' // 0% 处的颜色
|
||||
}, {
|
||||
color: "#6FD8A5", // 0% 处的颜色
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: '#3CB06C' // 100% 处的颜色
|
||||
}],
|
||||
color: "#3CB06C", // 100% 处的颜色
|
||||
},
|
||||
],
|
||||
globalCoord: false, // 缺省为 false
|
||||
|
||||
}
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
name: '环境安全',
|
||||
data: this.chartData2,
|
||||
type: 'bar',
|
||||
name: "消防告警",
|
||||
data: fire,
|
||||
type: "bar",
|
||||
barWidth: 12,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: {
|
||||
type: 'bar',
|
||||
colorStops: [{
|
||||
type: "bar",
|
||||
colorStops: [
|
||||
{
|
||||
offset: 0,
|
||||
color: '#EFC500' // 0% 处的颜色
|
||||
}, {
|
||||
color: "#EFC500", // 0% 处的颜色
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: '#DA9300' // 100% 处的颜色
|
||||
}],
|
||||
color: "#DA9300", // 100% 处的颜色
|
||||
},
|
||||
],
|
||||
globalCoord: false, // 缺省为 false
|
||||
|
||||
}
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
name: '设备安全',
|
||||
data: this.chartData3,
|
||||
type: 'bar',
|
||||
name: "给水告警",
|
||||
data: water,
|
||||
type: "bar",
|
||||
barWidth: 12,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: {
|
||||
type: 'bar',
|
||||
colorStops: [{
|
||||
type: "bar",
|
||||
colorStops: [
|
||||
{
|
||||
offset: 0,
|
||||
color: '#00C4F1' // 0% 处的颜色
|
||||
}, {
|
||||
color: "#00C4F1", // 0% 处的颜色
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: '#0091DF' // 100% 处的颜色
|
||||
}],
|
||||
color: "#0091DF", // 100% 处的颜色
|
||||
},
|
||||
],
|
||||
globalCoord: false, // 缺省为 false
|
||||
|
||||
}
|
||||
},
|
||||
},
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
},
|
||||
{
|
||||
name: "设备告警",
|
||||
data: equipment,
|
||||
type: "bar",
|
||||
barWidth: 12,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: {
|
||||
type: "bar",
|
||||
colorStops: [
|
||||
{
|
||||
offset: 0,
|
||||
color: "rgb(236,218,75)", // 0% 处的颜色
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: "rgb(236,218,75)", // 100% 处的颜色
|
||||
},
|
||||
],
|
||||
globalCoord: false, // 缺省为 false
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
name: "耗气告警",
|
||||
data: gas,
|
||||
type: "bar",
|
||||
barWidth: 12,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: {
|
||||
type: "bar",
|
||||
colorStops: [
|
||||
{
|
||||
offset: 0,
|
||||
color: "rgb(190,109,254)", // 0% 处的颜色
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: "rgb(190,109,254)", // 100% 处的颜色
|
||||
},
|
||||
],
|
||||
globalCoord: false, // 缺省为 false
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
],
|
||||
};
|
||||
},
|
||||
},
|
||||
|
||||
methods: {
|
||||
resetOption() {
|
||||
this.$refs.chart.setOption(this.option)
|
||||
this.$refs.chart.setOption(this.option);
|
||||
},
|
||||
|
||||
}
|
||||
}
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
.lineBox{
|
||||
.lineBox {
|
||||
height: 14px;
|
||||
position: absolute;
|
||||
top: 89px;
|
||||
|
|
|
|||
|
|
@ -40,7 +40,11 @@ class mqttHandle {
|
|||
//配置链接
|
||||
const { host, port, endpoint, ...options } = this.connect;
|
||||
console.log("this.connect.host",this.connect.host)
|
||||
<<<<<<< HEAD
|
||||
const connectUrl = 'ws://175.27.191.156:10083/mqtt';
|
||||
=======
|
||||
const connectUrl = 'ws://175.27.191.156:10083/mgtt';
|
||||
>>>>>>> 006ce36a7cef616fdc714ec5799317b9668c98bb
|
||||
// const connectUrl = `ws://${this.connect.host}:${this.connect.port}`;
|
||||
// if (!client.connected) {
|
||||
// client.on('connect', function () {
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
<template>
|
||||
<!-- <Resize> -->
|
||||
<div >
|
||||
<div>
|
||||
<!-- <div class="bgPicture" :style="{ height: vdaH }">
|
||||
<div class="title"></div>
|
||||
<div class="titTop">
|
||||
|
|
@ -17,9 +17,16 @@
|
|||
</div>
|
||||
</div>
|
||||
</div> -->
|
||||
<div @click="disBox" class="screenBox"
|
||||
:style="{ 'background-image': !boxNone ? `url(${require(`../assets/pic/exitFull.png`)}` : `url(${require(`../assets/pic/fullScreen.png`)}` ,right: boxNone ? '483px' : '10px'}">
|
||||
</div>
|
||||
<div
|
||||
@click="disBox"
|
||||
class="screenBox"
|
||||
:style="{
|
||||
'background-image': !boxNone
|
||||
? `url(${require(`../assets/pic/exitFull.png`)}`
|
||||
: `url(${require(`../assets/pic/fullScreen.png`)}`,
|
||||
right: boxNone ? '483px' : '10px',
|
||||
}"
|
||||
></div>
|
||||
<!-- 左侧模块1 -->
|
||||
<div class="leftOneBox" :style="{ left: boxNone ? '27px' : '-444px' }">
|
||||
<div class="titName">
|
||||
|
|
@ -30,46 +37,76 @@
|
|||
<div class="concet">
|
||||
<div class="ftahBox">
|
||||
<span class="iconBox1"></span>
|
||||
<span>检查项</span>
|
||||
<span style="color:#1cd1ff">100</span>
|
||||
<span>项</span>
|
||||
<div class="ftahBox1">
|
||||
<div>检查项</div>
|
||||
<div style="color: #1cd1ff">{{ checkNum }}</div>
|
||||
<div>项</div>
|
||||
</div>
|
||||
<div class="ftahBox" style="margin-left: 25px;">
|
||||
</div>
|
||||
<div class="ftahBox" style="margin-left: 25px">
|
||||
<span class="iconBox2"></span>
|
||||
<span>问题项</span>
|
||||
<span style="color:#ffb54f">50</span>
|
||||
<span>项</span>
|
||||
<div class="ftahBox1">
|
||||
<div>问题项</div>
|
||||
<div style="color: #ffb54f">{{ questionNum }}</div>
|
||||
<div>项</div>
|
||||
</div>
|
||||
<div class="ftahBox" style="margin-left: 17px;">
|
||||
</div>
|
||||
<div class="ftahBox" style="margin-left: 17px">
|
||||
<span class="iconBox3"></span>
|
||||
<span>已处理</span>
|
||||
<span style="color:#00d896">13</span>
|
||||
<span>项</span>
|
||||
|
||||
<div class="ftahBox1">
|
||||
<div>已处理</div>
|
||||
<div style="color: #00d896">{{ resolvedNum }}</div>
|
||||
<div>项</div>
|
||||
</div>
|
||||
<div class="ftahBox" style="margin-left: 4px;">
|
||||
</div>
|
||||
<div class="ftahBox" style="margin-left: 4px">
|
||||
<span class="iconBox4"></span>
|
||||
<span>待处理</span>
|
||||
<span style="color:#ecda4b">32</span>
|
||||
<span>项</span>
|
||||
<div class="ftahBox1">
|
||||
<div>待处理</div>
|
||||
<div style="color: #ecda4b">{{ unresolvedNum }}</div>
|
||||
<div>项</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 左侧模块2 -->
|
||||
<div class="leftTwoBox" :style="{ left: boxNone ? '27px' : '-444px'}">
|
||||
<div class="leftTwoBox" :style="{ left: boxNone ? '27px' : '-444px' }">
|
||||
<div class="titName">
|
||||
<span></span>
|
||||
<span>检查次数统计</span>
|
||||
<span></span>
|
||||
</div>
|
||||
<div class="seleChange">
|
||||
<div :class="[timeType === 1 ? 'timeBoxType2' : 'timeBoxType1']" @click="chooseType(1)">年</div>
|
||||
<div :class="[timeType === 2 ? 'timeBoxType2' : 'timeBoxType1']" @click="chooseType(2)">月</div>
|
||||
<div :class="[timeType === 3 ? 'timeBoxType2' : 'timeBoxType1']" @click="chooseType(3)">日</div>
|
||||
<div
|
||||
:class="[timeType === 1 ? 'timeBoxType2' : 'timeBoxType1']"
|
||||
@click="chooseType(0)"
|
||||
>
|
||||
年
|
||||
</div>
|
||||
<div
|
||||
:class="[timeType === 2 ? 'timeBoxType2' : 'timeBoxType1']"
|
||||
@click="chooseType(1)"
|
||||
>
|
||||
月
|
||||
</div>
|
||||
<div
|
||||
:class="[timeType === 3 ? 'timeBoxType2' : 'timeBoxType1']"
|
||||
@click="chooseType(2)"
|
||||
>
|
||||
日
|
||||
</div>
|
||||
</div>
|
||||
<div class="pie2Box">
|
||||
<lineChart ref="lineRef" style="width: 100%; height: 100%" grid-bottom="1%"
|
||||
:color-array="['#021C9F', '#01B1FF']" :chart-data="qyList"
|
||||
:x-axis-data="qyList.map(item => item.name)" />
|
||||
<lineChart
|
||||
ref="lineRef"
|
||||
style="width: 100%; height: 100%"
|
||||
grid-bottom="1%"
|
||||
:color-array="['#021C9F', '#01B1FF']"
|
||||
:chart-data="qyList"
|
||||
:x-axis-data="qyList.map((item) => item.name)"
|
||||
:checkCountList="checkCountList"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 左侧模块3 -->
|
||||
|
|
@ -80,15 +117,36 @@
|
|||
<span></span>
|
||||
</div>
|
||||
<div class="seleChange">
|
||||
<div :class="[time2Type === 1 ? 'timeBoxType2' : 'timeBoxType1']" @click="choose2Type(1)">年</div>
|
||||
<div :class="[time2Type === 2 ? 'timeBoxType2' : 'timeBoxType1']" @click="choose2Type(2)">月</div>
|
||||
<div :class="[time2Type === 3 ? 'timeBoxType2' : 'timeBoxType1']" @click="choose2Type(3)">日</div>
|
||||
</div>2
|
||||
<div
|
||||
:class="[time2Type === 1 ? 'timeBoxType2' : 'timeBoxType1']"
|
||||
@click="choose2Type(0)"
|
||||
>
|
||||
年
|
||||
</div>
|
||||
<div
|
||||
:class="[time2Type === 2 ? 'timeBoxType2' : 'timeBoxType1']"
|
||||
@click="choose2Type(1)"
|
||||
>
|
||||
月
|
||||
</div>
|
||||
<div
|
||||
:class="[time2Type === 3 ? 'timeBoxType2' : 'timeBoxType1']"
|
||||
@click="choose2Type(2)"
|
||||
>
|
||||
日
|
||||
</div>
|
||||
</div>
|
||||
<div class="pieBox">
|
||||
<threeBarChart style="width: 100%; height: 100%" grid-bottom="1%" :color-array="['#021C9F', '#01B1FF']"
|
||||
:chart-data3="aq3List" :chart-data2="aq2List" :chart-data="aqList"
|
||||
:x-axis-data="aqList.map(item => item.name)" />
|
||||
|
||||
<threeBarChart
|
||||
style="width: 100%; height: 100%"
|
||||
grid-bottom="1%"
|
||||
:color-array="['#021C9F', '#01B1FF']"
|
||||
:chart-data3="aq3List"
|
||||
:chart-data2="aq2List"
|
||||
:chart-data="aqList"
|
||||
:x-axis-data="aqList.map((item) => item.name)"
|
||||
:safeList="safeList"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 右侧模块1 -->
|
||||
|
|
@ -98,26 +156,31 @@
|
|||
<span>隐患检查统计</span>
|
||||
<span></span>
|
||||
</div>
|
||||
<div class="concet" style="left: 48px;">
|
||||
<div class="concet" style="left: 48px">
|
||||
<div class="ftahBox">
|
||||
<span class="iconBox1"></span>
|
||||
<span>整改项</span>
|
||||
<span style="color:#1cd1ff">100</span>
|
||||
<span>项</span>
|
||||
<div class="ftahBox1">
|
||||
<div>整改项</div>
|
||||
<div style="color: #1cd1ff">{{ total }}</div>
|
||||
<div>项</div>
|
||||
</div>
|
||||
<div class="ftahBox" style="margin-left: 53px;">
|
||||
</div>
|
||||
<div class="ftahBox" style="margin-left: 53px">
|
||||
<span class="iconBox2"></span>
|
||||
<span>已处理 </span>
|
||||
<span style="color:#00D896">35</span>
|
||||
<span>项</span>
|
||||
<div class="ftahBox1">
|
||||
<div>已处理</div>
|
||||
<div style="color: #00d896">{{ resolve }}</div>
|
||||
<div>项</div>
|
||||
</div>
|
||||
<div class="ftahBox" style="margin-left: 43px;">
|
||||
</div>
|
||||
<div class="ftahBox" style="margin-left: 43px">
|
||||
<span class="iconBox3"></span>
|
||||
<span>待处理</span>
|
||||
<span style="color:#FDE54A">15</span>
|
||||
<span>项</span>
|
||||
<div class="ftahBox1">
|
||||
<div>待处理</div>
|
||||
<div style="color: #fde54a">{{ unresolve }}</div>
|
||||
<div>项</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<!-- 右侧模块2 -->
|
||||
|
|
@ -128,7 +191,11 @@
|
|||
<span></span>
|
||||
</div>
|
||||
<div class="pie3Box">
|
||||
<RankBarChart style="width: 100%; height: 100%" :color-array="['#021C9F', '#01B1FF']" />
|
||||
<RankBarChart
|
||||
style="width: 100%; height: 100%"
|
||||
:color-array="['#021C9F', '#01B1FF']"
|
||||
:highIssues="highIssues"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 右侧模块3 -->
|
||||
|
|
@ -180,10 +247,17 @@ import threeBarChart from "@/components/common/threeBarChart";
|
|||
import lineChart from "@/components/common/lineChart";
|
||||
import pieChart from "@/components/common/pieChart";
|
||||
import pieDateChart from "@/components/common/pieDateChart";
|
||||
import Resize from '../utils/Resize.vue'
|
||||
import tabGtt from '@/components/common/tableGantt'
|
||||
import RankBarChart from '@/components/common/RankBarChart'
|
||||
import swiper from './swiper.vue'
|
||||
import Resize from "../utils/Resize.vue";
|
||||
import tabGtt from "@/components/common/tableGantt";
|
||||
import RankBarChart from "@/components/common/RankBarChart";
|
||||
import swiper from "./swiper.vue";
|
||||
import {
|
||||
getCheckTotalCensus,
|
||||
getCheckTimesCensus,
|
||||
getResolveTroubleCensus,
|
||||
getWarnSurveillance,
|
||||
getMostTroubleCensus
|
||||
} from "../api/api";
|
||||
export default {
|
||||
name: "report",
|
||||
components: {
|
||||
|
|
@ -194,240 +268,255 @@ export default {
|
|||
threeBarChart,
|
||||
RankBarChart,
|
||||
tabGtt,
|
||||
swiper
|
||||
swiper,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
highIssues:[], //高频问题项
|
||||
safeList:[], //安全告警
|
||||
resolve:0,//已处理
|
||||
total: 0, //整改项
|
||||
unresolve:0, //待处理
|
||||
checkCountList: [], //检查次数统计
|
||||
checkNum: 0, //检查项
|
||||
questionNum: 0, //问题项
|
||||
resolvedNum: 0, //已处理
|
||||
unresolvedNum: 0, //待处理
|
||||
dialogShow: false,
|
||||
timeType: 1,
|
||||
time2Type: 1,
|
||||
colorList: ['#00A572', '#007EC1', '#DA9300', '#878787'],
|
||||
colorList: ["#00A572", "#007EC1", "#DA9300", "#878787"],
|
||||
iconPicList: [
|
||||
{
|
||||
icon: "wendu",
|
||||
name: "温度",
|
||||
val: "19.8",
|
||||
tem: "℃"
|
||||
tem: "℃",
|
||||
},
|
||||
{
|
||||
icon: "shidu",
|
||||
name: "湿度",
|
||||
val: "19.8",
|
||||
tem: "%"
|
||||
tem: "%",
|
||||
},
|
||||
{
|
||||
icon: "yangqi",
|
||||
name: "氧气值",
|
||||
val: "19.8",
|
||||
tem: "%VOL"
|
||||
tem: "%VOL",
|
||||
},
|
||||
{
|
||||
icon: "co2",
|
||||
name: "二氧化碳",
|
||||
val: "19.8",
|
||||
tem: "%VOL"
|
||||
tem: "%VOL",
|
||||
},
|
||||
{
|
||||
icon: "ch4",
|
||||
name: "甲烷",
|
||||
val: "19.8",
|
||||
tem: "ppm"
|
||||
tem: "ppm",
|
||||
},
|
||||
{
|
||||
icon: "h2s",
|
||||
name: "硫化氢",
|
||||
val: "19.8",
|
||||
tem: "ppm"
|
||||
}
|
||||
tem: "ppm",
|
||||
},
|
||||
],
|
||||
tableData: [
|
||||
{
|
||||
entName: "我打打死"
|
||||
entName: "我打打死",
|
||||
},
|
||||
{
|
||||
entName: "我打打死"
|
||||
entName: "我打打死",
|
||||
},
|
||||
{
|
||||
entName: "我打打死"
|
||||
entName: "我打打死",
|
||||
},
|
||||
{
|
||||
entName: "我打打死"
|
||||
entName: "我打打死",
|
||||
},
|
||||
{
|
||||
entName: "我打打死"
|
||||
entName: "我打打死",
|
||||
},
|
||||
{
|
||||
entName: "我打打死"
|
||||
entName: "我打打死",
|
||||
},
|
||||
{
|
||||
entName: "我打打死"
|
||||
entName: "我打打死",
|
||||
},
|
||||
{
|
||||
entName: "我打打死"
|
||||
}
|
||||
entName: "我打打死",
|
||||
},
|
||||
],
|
||||
aq3List: [
|
||||
{
|
||||
name: "2月",
|
||||
value: 1
|
||||
value: 1,
|
||||
},
|
||||
{
|
||||
name: "3月",
|
||||
value: 2
|
||||
value: 2,
|
||||
},
|
||||
{
|
||||
name: "4月",
|
||||
value: 13
|
||||
value: 13,
|
||||
},
|
||||
{
|
||||
name: "5月",
|
||||
value: 24
|
||||
value: 24,
|
||||
},
|
||||
{
|
||||
name: "6月",
|
||||
value: 24
|
||||
value: 24,
|
||||
},
|
||||
{
|
||||
name: "7月",
|
||||
value: 31
|
||||
value: 31,
|
||||
},
|
||||
],
|
||||
aq2List: [
|
||||
{
|
||||
name: "2月",
|
||||
value: 10
|
||||
value: 10,
|
||||
},
|
||||
{
|
||||
name: "3月",
|
||||
value: 6
|
||||
value: 6,
|
||||
},
|
||||
{
|
||||
name: "4月",
|
||||
value: 3
|
||||
value: 3,
|
||||
},
|
||||
{
|
||||
name: "5月",
|
||||
value: 14
|
||||
value: 14,
|
||||
},
|
||||
{
|
||||
name: "6月",
|
||||
value: 4
|
||||
value: 4,
|
||||
},
|
||||
{
|
||||
name: "7月",
|
||||
value: 3
|
||||
value: 3,
|
||||
},
|
||||
],
|
||||
aqList: [
|
||||
{
|
||||
name: "2月",
|
||||
value: 12,
|
||||
value2: 10
|
||||
value2: 10,
|
||||
},
|
||||
{
|
||||
name: "3月",
|
||||
value: 13,
|
||||
value2: 6
|
||||
value2: 6,
|
||||
},
|
||||
{
|
||||
name: "4月",
|
||||
value: 12,
|
||||
value2: 3
|
||||
value2: 3,
|
||||
},
|
||||
{
|
||||
name: "5月",
|
||||
value: 10,
|
||||
value2: 14
|
||||
value2: 14,
|
||||
},
|
||||
{
|
||||
name: "6月",
|
||||
value: 7,
|
||||
value2: 4
|
||||
value2: 4,
|
||||
},
|
||||
{
|
||||
name: "7月",
|
||||
value: 11,
|
||||
value2: 3
|
||||
value2: 3,
|
||||
},
|
||||
],
|
||||
qyList: [
|
||||
{
|
||||
name: "1月",
|
||||
value: 12
|
||||
value: 12,
|
||||
},
|
||||
{
|
||||
name: "2月",
|
||||
value: 112
|
||||
value: 112,
|
||||
},
|
||||
{
|
||||
name: "3月",
|
||||
value: 132
|
||||
value: 132,
|
||||
},
|
||||
{
|
||||
name: "4月",
|
||||
value: 12
|
||||
value: 12,
|
||||
},
|
||||
{
|
||||
name: "5月",
|
||||
value: 132
|
||||
value: 132,
|
||||
},
|
||||
{
|
||||
name: "6月",
|
||||
value: 132
|
||||
value: 132,
|
||||
},
|
||||
{
|
||||
name: "7月",
|
||||
value: 132
|
||||
}, {
|
||||
value: 132,
|
||||
},
|
||||
{
|
||||
name: "8月",
|
||||
value: 32
|
||||
}, {
|
||||
value: 32,
|
||||
},
|
||||
{
|
||||
name: "9月",
|
||||
value: 22
|
||||
}, {
|
||||
value: 22,
|
||||
},
|
||||
{
|
||||
name: "10月",
|
||||
value: 152
|
||||
}, {
|
||||
value: 152,
|
||||
},
|
||||
{
|
||||
name: "11月",
|
||||
value: 132
|
||||
}, {
|
||||
value: 132,
|
||||
},
|
||||
{
|
||||
name: "12月",
|
||||
value: 132
|
||||
}
|
||||
value: 132,
|
||||
},
|
||||
],
|
||||
xArry: [],
|
||||
chartData: [],
|
||||
peopleList: [
|
||||
{
|
||||
name: "姓名",
|
||||
value: "：王刚"
|
||||
value: "：王刚",
|
||||
},
|
||||
{
|
||||
name: "岗位",
|
||||
value: "：项目经理"
|
||||
value: "：项目经理",
|
||||
},
|
||||
{
|
||||
name: "体温",
|
||||
value: "：36.5℃"
|
||||
value: "：36.5℃",
|
||||
},
|
||||
{
|
||||
name: "入场时间",
|
||||
value: "：2022-11-26"
|
||||
value: "：2022-11-26",
|
||||
},
|
||||
{
|
||||
name: "考勤类型",
|
||||
value: "：进场"
|
||||
value: "：进场",
|
||||
},
|
||||
{
|
||||
name: "打卡设备",
|
||||
value: "：1号打卡机"
|
||||
value: "：1号打卡机",
|
||||
},
|
||||
],
|
||||
vdaH: 0,
|
||||
type: false,
|
||||
menuType: 4,
|
||||
numberList: [5, 5],
|
||||
boxNone: true
|
||||
boxNone: true,
|
||||
};
|
||||
},
|
||||
created() {
|
||||
|
|
@ -435,36 +524,71 @@ export default {
|
|||
this.vdaH = h - 0 + "px";
|
||||
},
|
||||
methods: {
|
||||
//获取数据
|
||||
getData() {
|
||||
let projectId = sessionStorage.getItem("projectId");
|
||||
//获取安全检查统计
|
||||
getCheckTotalCensus({
|
||||
projectId: projectId,
|
||||
}).then((res) => {
|
||||
this.checkNum = res.data.data.checkNum; //检查项
|
||||
this.questionNum = res.data.data.questionNum; //问题项
|
||||
this.resolvedNum = res.data.data.resolvedNum; //已处理
|
||||
this.unresolvedNum = res.data.data.unresolvedNum; //待处理
|
||||
});
|
||||
//隐患检查统计
|
||||
getResolveTroubleCensus({
|
||||
projectId: projectId,
|
||||
}).then((res) => {
|
||||
this.resolve = res.data.data.resolve;
|
||||
this.total = res.data.data.total;
|
||||
this.unresolve = res.data.data.unresolve;
|
||||
});
|
||||
//高频问题项
|
||||
getMostTroubleCensus({
|
||||
projectId: projectId,
|
||||
}).then((res)=>{
|
||||
this.highIssues = res.data.data
|
||||
}).catch((err)=>{
|
||||
console.log(err);
|
||||
})
|
||||
},
|
||||
disBox() {
|
||||
this.boxNone = !this.boxNone
|
||||
if(this.boxNone == true){
|
||||
|
||||
window.parent.closeBig();
|
||||
}else if(this.boxNone == false){
|
||||
window.parent.openBig();
|
||||
}
|
||||
this.$refs.screenBox.style.animationPlayState='running'
|
||||
this.boxNone = !this.boxNone;
|
||||
this.$refs.screenBox.style.animationPlayState = "running";
|
||||
},
|
||||
goBack(val) {
|
||||
if (val === 1) {
|
||||
this.$router.push('/')
|
||||
this.$router.push("/");
|
||||
} else {
|
||||
this.$router.go(0)
|
||||
this.$router.go(0);
|
||||
}
|
||||
},
|
||||
chooseType(val) {
|
||||
this.timeType = val
|
||||
this.$refs.lineRef.resetOption()
|
||||
this.timeType = val + 1;
|
||||
//检查次数统计
|
||||
getCheckTimesCensus({
|
||||
projectId: sessionStorage.getItem("projectId"),
|
||||
type: val,
|
||||
}).then((res) => {
|
||||
this.checkCountList = res.data.data;
|
||||
this.$refs.lineRef.resetOption();
|
||||
});
|
||||
},
|
||||
|
||||
choose2Type(val) {
|
||||
this.time2Type = val
|
||||
this.$refs.lineRef.resetOption()
|
||||
this.time2Type = val + 1;
|
||||
getWarnSurveillance({
|
||||
projectId: sessionStorage.getItem("projectId"),
|
||||
type: val,
|
||||
}).then((res)=>{
|
||||
// this.$refs.lineRef.resetOption();
|
||||
this.safeList = res.data.data
|
||||
})
|
||||
},
|
||||
//查看甘特图
|
||||
gantDialog() {
|
||||
this.dialogShow = true
|
||||
|
||||
this.dialogShow = true;
|
||||
},
|
||||
tableRowClassName({ row, rowIndex }) {
|
||||
if (rowIndex === 1) {
|
||||
|
|
@ -478,37 +602,42 @@ export default {
|
|||
childBoxClick(val) {
|
||||
this.menuType = val;
|
||||
if (val === 3) {
|
||||
this.$router.push('/progress')
|
||||
this.$router.push("/progress");
|
||||
} else if (val === 2) {
|
||||
this.$router.push('/videoSurveillance')
|
||||
this.$router.push("/videoSurveillance");
|
||||
} else if (val === 1) {
|
||||
this.$router.push('/personnel')
|
||||
this.$router.push("/personnel");
|
||||
}
|
||||
},
|
||||
switchDiv() {
|
||||
if (this.type) {
|
||||
this.type = false;
|
||||
this.$refs.switchBtn.style.display = "none";
|
||||
|
||||
} else {
|
||||
this.type = true;
|
||||
setTimeout(() => {
|
||||
// 俩秒之后让模块消失
|
||||
this.$refs.switchBtn.style.display = "block";
|
||||
}, 800)
|
||||
}
|
||||
}, 800);
|
||||
}
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
//获取数据
|
||||
this.getData();
|
||||
//获取年的检查次数
|
||||
this.chooseType(0);
|
||||
//默认获取年的安全告警统计
|
||||
this.choose2Type(0);
|
||||
this.switchDiv();
|
||||
window.onresize = () => {
|
||||
return (() => {
|
||||
let h = document.documentElement.clientHeight || document.body.clientHeight;
|
||||
let h =
|
||||
document.documentElement.clientHeight || document.body.clientHeight;
|
||||
this.vdaH = h - 0 + "px";
|
||||
})()
|
||||
}
|
||||
|
||||
}
|
||||
})();
|
||||
};
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
|
|
@ -557,11 +686,10 @@ export default {
|
|||
font-size: 12px;
|
||||
font-family: SourceHanSansCN-Regular, SourceHanSansCN;
|
||||
font-weight: 400;
|
||||
color: #FFFFFF;
|
||||
color: #ffffff;
|
||||
text-align: center;
|
||||
line-height: 21px;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.tabGtBox {
|
||||
|
|
@ -698,7 +826,6 @@ export default {
|
|||
.dh2 {
|
||||
animation-fill-mode: forwards;
|
||||
animation: myt2est 0.5s linear;
|
||||
|
||||
}
|
||||
|
||||
.screenBox {
|
||||
|
|
@ -734,7 +861,8 @@ export default {
|
|||
.meeting {
|
||||
width: 76px;
|
||||
height: 29px;
|
||||
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFEAAAAdCAYAAADSFYAhAAAAAXNSR0IArs4c6QAABD9JREFUaEPtWk9oHFUY/35vD+bktbvjxZsoSot/sKJoqbaltaUgUkQQK4KIqOwkama3PeRgs9mS3Q0ILeTgwYMHgxfbHurBQynUQ715KIKK2OyaQEuEEtumeZ9kZ97szpt9+95uEjPE5hLmve/7fjO/9/u+982bRT4o7gHEI9T9x4zENcCJa9uF8tf99Lgqjs0uo/irLHlxZOkr7AiKe8Hi0X68CJLRtGj/V1c2LtV86NXtl4xni5NVfBb0x0Klfh5e4L/CwGNJ5UVKXI1GcxENShEyIkFGdiKXVCqicd1ejau4Mcua0nW7jOKD8H2zUru2RuJ+AI+vRylmJbkpbr1K3SL8e60bt87S7OwK8uPFg0LknrCllNO8jCQmck7mG270n+LztWal/t3aMyBfLr4Kxs72Aw1awG0s2IqnSlvTBmOLb5vfRHzB9O18pf5LmzZv3D8CYJftfu7Pdxhg4tvNX6/XaW6unXrwTvhHSdKTvUlS1cpEoW2pTf42P31fzxo+/6RSuU1i4bPiayREgkSRrvR9hahTYnIXhj5RamUk6/j3iL9cmGr8FlehfGnsdQF+Wmvk+mevLjBXYZmiDrhotIX4LOjv1mR9iojitg75sn9MMJ65X/PcGFiVfGmh2jjXbY0dZf8NwXg2qcRIWnFeuQGkrNzaxI5brOjs4t9ZXandPP3F9QSJXvmTN4l4dy+apJThO3RUswTCS8nJF5R4XAsSZ6myj2qigNDecHovUtbwQVhsVWqf63eLQqn4Fkg8N6TW/lduUsoLf1VnLqRIzJf8t0F4PiHP6GKwo5uN41MdIWUNX66IkwvT04spEr2S/w4xXtg4CrZnJAb/3qo0UqncrnZeyX+XGS8mHn3QlsORN+fWO4v4jK9b1drFXo+KQlB8DxAvhZMqgVKHsMlD2jiSnnAGsw6y5qAOf/UEzhY+M/E/t+VHSzMzSwYS/fdB2BPuwppJzKlh3KRAWxxTsbP5KTxbsbTFGRAfzD/PV3uncpjOgf8BBPaGvYtjXupmw6bfRr15bDq+ODM/Nf2DUTNe4H9IwMtD0rf93ZhWaOTW8ebE7LKRxEJp9GMQ7dv+bAz3hEx8pVVpTPbzRiHwfSLsTxq5ft3TvgqSq59+S8PGGdbPHR9Mk81q7XJfEvOBPwbgQLeRdY8dblGNe7oeLjP4TMvNkT+P0cTc3b4keoH/KQEH+/OiFGZaeX08RYuhtXFdjS3CZ7rYnKpXbXcJrzw6TkSH1gzZsDvHytB205iZyM9kl+pMtNOduEvMGn6Ox1qnGletJBaC0RKIDtsM+84P22KsC7TLeTPwQTebDzx4lCYmrI0fHhr3T5LAkbBNjNKm8+LSFkm6nUtuIIKS6Ww6Fozjd6pjIn6m8MHftCr1uss6oxCMPUU5fjhM5/D8ECI679N/qaA+J5vGTYiO9lnCv7vMP95oNOZdSPwXtf3hFdhdhzQAAAAASUVORK5CYII=) no-repeat;
|
||||
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFEAAAAdCAYAAADSFYAhAAAAAXNSR0IArs4c6QAABD9JREFUaEPtWk9oHFUY/35vD+bktbvjxZsoSot/sKJoqbaltaUgUkQQK4KIqOwkama3PeRgs9mS3Q0ILeTgwYMHgxfbHurBQynUQ715KIKK2OyaQEuEEtumeZ9kZ97szpt9+95uEjPE5hLmve/7fjO/9/u+982bRT4o7gHEI9T9x4zENcCJa9uF8tf99Lgqjs0uo/irLHlxZOkr7AiKe8Hi0X68CJLRtGj/V1c2LtV86NXtl4xni5NVfBb0x0Klfh5e4L/CwGNJ5UVKXI1GcxENShEyIkFGdiKXVCqicd1ejau4Mcua0nW7jOKD8H2zUru2RuJ+AI+vRylmJbkpbr1K3SL8e60bt87S7OwK8uPFg0LknrCllNO8jCQmck7mG270n+LztWal/t3aMyBfLr4Kxs72Aw1awG0s2IqnSlvTBmOLb5vfRHzB9O18pf5LmzZv3D8CYJftfu7Pdxhg4tvNX6/XaW6unXrwTvhHSdKTvUlS1cpEoW2pTf42P31fzxo+/6RSuU1i4bPiayREgkSRrvR9hahTYnIXhj5RamUk6/j3iL9cmGr8FlehfGnsdQF+Wmvk+mevLjBXYZmiDrhotIX4LOjv1mR9iojitg75sn9MMJ65X/PcGFiVfGmh2jjXbY0dZf8NwXg2qcRIWnFeuQGkrNzaxI5brOjs4t9ZXandPP3F9QSJXvmTN4l4dy+apJThO3RUswTCS8nJF5R4XAsSZ6myj2qigNDecHovUtbwQVhsVWqf63eLQqn4Fkg8N6TW/lduUsoLf1VnLqRIzJf8t0F4PiHP6GKwo5uN41MdIWUNX66IkwvT04spEr2S/w4xXtg4CrZnJAb/3qo0UqncrnZeyX+XGS8mHn3QlsORN+fWO4v4jK9b1drFXo+KQlB8DxAvhZMqgVKHsMlD2jiSnnAGsw6y5qAOf/UEzhY+M/E/t+VHSzMzSwYS/fdB2BPuwppJzKlh3KRAWxxTsbP5KTxbsbTFGRAfzD/PV3uncpjOgf8BBPaGvYtjXupmw6bfRr15bDq+ODM/Nf2DUTNe4H9IwMtD0rf93ZhWaOTW8ebE7LKRxEJp9GMQ7dv+bAz3hEx8pVVpTPbzRiHwfSLsTxq5ft3TvgqSq59+S8PGGdbPHR9Mk81q7XJfEvOBPwbgQLeRdY8dblGNe7oeLjP4TMvNkT+P0cTc3b4keoH/KQEH+/OiFGZaeX08RYuhtXFdjS3CZ7rYnKpXbXcJrzw6TkSH1gzZsDvHytB205iZyM9kl+pMtNOduEvMGn6Ox1qnGletJBaC0RKIDtsM+84P22KsC7TLeTPwQTebDzx4lCYmrI0fHhr3T5LAkbBNjNKm8+LSFkm6nUtuIIKS6Ww6Fozjd6pjIn6m8MHftCr1uss6oxCMPUU5fjhM5/D8ECI679N/qaA+J5vGTYiO9lnCv7vMP95oNOZdSPwXtf3hFdhdhzQAAAAASUVORK5CYII=)
|
||||
no-repeat;
|
||||
background-size: 100% 100%;
|
||||
text-align: center;
|
||||
line-height: 29px;
|
||||
|
|
@ -744,7 +872,7 @@ export default {
|
|||
font-size: 14px;
|
||||
font-family: SourceHanSansCN-Medium, SourceHanSansCN;
|
||||
font-weight: 500;
|
||||
color: #FFFFFF;
|
||||
color: #ffffff;
|
||||
padding-right: 6px;
|
||||
}
|
||||
|
||||
|
|
@ -756,7 +884,7 @@ export default {
|
|||
font-size: 14px;
|
||||
font-family: SourceHanSansCN-Medium, SourceHanSansCN;
|
||||
font-weight: 500;
|
||||
color: #FFFFFF;
|
||||
color: #ffffff;
|
||||
padding: 0 22px 0 33px;
|
||||
height: 260px;
|
||||
}
|
||||
|
|
@ -800,7 +928,6 @@ export default {
|
|||
margin: 10px auto 0;
|
||||
width: 90%;
|
||||
border-bottom: 1px solid rgba(96, 213, 205, 0.4);
|
||||
;
|
||||
}
|
||||
|
||||
.pie3Box {
|
||||
|
|
@ -808,7 +935,6 @@ export default {
|
|||
height: 90%;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
|
||||
}
|
||||
|
||||
.pie2Box {
|
||||
|
|
@ -818,7 +944,7 @@ export default {
|
|||
bottom: 0;
|
||||
|
||||
@media only screen and (max-height: 1000px) {
|
||||
top: 50px
|
||||
top: 50px;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -830,7 +956,7 @@ export default {
|
|||
|
||||
@media only screen and (max-height: 1000px) {
|
||||
height: 262px;
|
||||
top: 38px
|
||||
top: 38px;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -845,7 +971,7 @@ export default {
|
|||
width: 135px;
|
||||
height: 140px;
|
||||
padding: 5px;
|
||||
border: 1px solid #00EBEB;
|
||||
border: 1px solid #00ebeb;
|
||||
margin-top: 52px;
|
||||
margin-left: 13px;
|
||||
margin-right: 14px;
|
||||
|
|
@ -908,7 +1034,7 @@ export default {
|
|||
font-size: 18px;
|
||||
font-family: SourceHanSansCN-Medium, SourceHanSansCN;
|
||||
font-weight: 500;
|
||||
color: #E2E2E2;
|
||||
color: #e2e2e2;
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
|
|
@ -925,7 +1051,38 @@ export default {
|
|||
color: #fff;
|
||||
}
|
||||
}
|
||||
.ftahBox1 {
|
||||
// text-align: center;
|
||||
padding-top: 27px;
|
||||
width: 89px;
|
||||
height: 100px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
@media only screen and (max-height: 1000px) {
|
||||
padding-top: 7px;
|
||||
}
|
||||
div:nth-child(1) {
|
||||
display: inline-block;
|
||||
font-size: 18px;
|
||||
font-family: SourceHanSansCN-Medium, SourceHanSansCN;
|
||||
font-weight: 500;
|
||||
color: #e2e2e2;
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
div:nth-child(2) {
|
||||
display: inline-block;
|
||||
font-size: 30px;
|
||||
font-weight: 500;
|
||||
margin-top: 5px;
|
||||
}
|
||||
|
||||
div:nth-child(3) {
|
||||
font-size: 17px;
|
||||
font-family: SourceHanSansCN-Medium, SourceHanSansCN;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
.bgPicture {
|
||||
width: 100%;
|
||||
background: url("~@/assets/pic/BG.jpg") no-repeat;
|
||||
|
|
@ -950,14 +1107,14 @@ export default {
|
|||
.titLeft {
|
||||
width: 138px;
|
||||
height: 40px;
|
||||
background: #025A5F;
|
||||
background: #025a5f;
|
||||
line-height: 40px;
|
||||
text-align: center;
|
||||
|
||||
span:nth-child(1),
|
||||
span:nth-child(2) {
|
||||
font-size: 14px;
|
||||
color: #3CFFF9;
|
||||
color: #3cfff9;
|
||||
letter-spacing: 1px;
|
||||
font-weight: 400;
|
||||
cursor: pointer;
|
||||
|
|
@ -977,7 +1134,7 @@ export default {
|
|||
padding-right: 25px;
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
color: #D1FFFE;
|
||||
color: #d1fffe;
|
||||
|
||||
span:nth-child(2) {
|
||||
display: inline-block;
|
||||
|
|
@ -989,7 +1146,6 @@ export default {
|
|||
background-size: 100% 100%;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.titName {
|
||||
|
|
|
|||
|
|
@ -71,6 +71,9 @@
|
|||
</template>
|
||||
|
||||
<script>
|
||||
import {
|
||||
getMostTroubleCensus
|
||||
} from "../api/api";
|
||||
export default {
|
||||
components: {},
|
||||
props: {},
|
||||
|
|
@ -114,7 +117,15 @@ export default {
|
|||
},
|
||||
},
|
||||
methods: {
|
||||
|
||||
getData(){
|
||||
getMostTroubleCensus({
|
||||
projectId: sessionStorage.getItem("projectId"),
|
||||
// size:10,
|
||||
// current:1
|
||||
}).then((res) => {
|
||||
console.log(res.data,'==================');
|
||||
});
|
||||
},
|
||||
changePage(index) {
|
||||
if (index == 1) {
|
||||
this.$refs.carousel.prev()
|
||||
|
|
@ -145,16 +156,18 @@ export default {
|
|||
//定时器
|
||||
this.setTimer();
|
||||
},
|
||||
mounted() { },
|
||||
mounted() {
|
||||
this.getData()
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
|
||||
@marginLeft:50px;
|
||||
.home {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-left: 49px;
|
||||
margin-left: @marginLeft;
|
||||
.boxChild {
|
||||
display: flex;
|
||||
|
||||
|
|
@ -247,11 +260,16 @@ export default {
|
|||
// }
|
||||
// }
|
||||
// }
|
||||
|
||||
}
|
||||
</style>
|
||||
<style>
|
||||
.el-carousel__arrow--left,
|
||||
.el-carousel__arrow--right {
|
||||
display: none;
|
||||
}
|
||||
.el-carousel__container {
|
||||
position: relative;
|
||||
height: 180px !important;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
Loading…
Reference in New Issue