Skip to content

D
dxgaqgl-vue
Commit ce25947e authored by 李苏's avatar 李苏 💬
Browse files
Options

首页调整

parent 3b3bd6a9
Show whitespace changes
Inline Side-by-side
Showing with 491 additions and 376 deletions
src/views/threeViolations/homePage/index.vue
View file @ ce25947e
......@@ -13,9 +13,9 @@
</div>
<!-- 内容-->
<div class="hpbody">
<div class="hpbodyItem flex flex1" style="flex-direction: column">
<div class="hpbodyItem flex flex1" style="flex-direction: row;gap: 10px;">
<!-- 安全指数-->
<div class="flex1" style="margin-bottom: 15px;">
<div style="width: 32.5%;height: 100%;" @click="$router.push('/dailya/tzzyry')" >
<div class="full data-box1">
<i class="topL"></i>
<i class="topR"></i>
......@@ -23,76 +23,19 @@
<i class="bottomR"></i>
<div class="data-title1">
<b class="data-title-left">[</b>
<span>安全指数</span>
<b class="data-title-right">]</b>
</div>
<div class="full flex-center" style="height: calc(100% );font-size: 42px;color: #55d5c6;font-weight: 700;">
<el-progress :width='158' type="dashboard" :percentage="76" text-color='#fff' :format='progressformat'
:color="colors"></el-progress>
</div>
</div>
</div>
<div class="flex1" style="margin-bottom: 15px;">
<div class="full data-box1">
<i class="topL"></i>
<i class="topR"></i>
<i class="bottomL"></i>
<i class="bottomR"></i>
<div class="data-title1">
<b class="data-title-left">[</b>
<span>隐患排查</span>
<b class="data-title-right">]</b>
</div>
<div class="full" style="height: calc(100% -14px);">
<div ref='yhpc' class="full">
</div>
</div>
</div>
</div>
<div class="flex1">
<div class="full data-box1">
<i class="topL"></i>
<i class="topR"></i>
<i class="bottomL"></i>
<i class="bottomR"></i>
<div class="data-title1">
<b class="data-title-left">[</b>
<span>应急管理</span>
<span>持证预警</span>
<b class="data-title-right">]</b>
</div>
<div class="full flex">
<!-- 占比图-->
<div class="flex1">
<div class="full" ref='gsjyjgl'>
</div>
</div>
<div class="flex1" style="margin-right: 10px;margin-left: 10px;">
<div class="full" ref='bzjyjgl'>
</div>
</div>
<div class="flex1">
<div class="full" ref='cjjyjgl'>
<div class="full" style="height: calc(100% -14px);">
<div ref='czyj' class="full">
</div>
</div>
</div>
</div>
</div>
</div>
<div class="hpbodyItem flex flex1" style="flex-direction: column;">
<!-- 照片-->
<div class="flex1" style="margin-bottom: 15px;">
<div class="flex1" >
<div class="full data-box1" style='padding-bottom:0'>
<i class="topL"></i>
<i class="topR"></i>
......@@ -104,8 +47,7 @@
<b class="data-title-right">]</b>
</div> -->
<div class="full flex-center gszp"
style="">
<div class="full flex-center gszp" style="">
</div>
......@@ -113,7 +55,7 @@
</div>
</div>
<div class="flex1" style="margin-bottom: 15px;">
<div class="flex1">
<div class="full data-box1">
<i class="topL"></i>
<i class="topR"></i>
......@@ -121,42 +63,33 @@
<i class="bottomR"></i>
<div class="data-title1">
<b class="data-title-left">[</b>
<span>持证预警</span>
<span>安全生产</span>
<b class="data-title-right">]</b>
</div>
<div class="full" style="height: calc(100% -14px);">
<div ref='czyj' class="full">
</div>
<div class="full flex-center" style="height: calc(100% );font-size: 36px;color: #55d5c6;font-weight: 700;">
<span
style="font-size: 24px;color: #3279d5;font-style: italic;font-weight:500;letter-spacing:10px">已安全生产</span>
<span class='textDown'> {{aqts}}
</span><span
style="font-size: 24px;color: #3279d5;font-weight:500;font-style: italic;letter-spacing:10px ">天</span>
</div>
</div>
</div>
<div class="flex1">
<div class="full data-box1">
<i class="topL"></i>
<i class="topR"></i>
<i class="bottomL"></i>
<i class="bottomR"></i>
<div class="data-title1">
<b class="data-title-left">[</b>
<span>履职管理</span>
<b class="data-title-right">]</b>
</div>
<div class="full" style="height: calc(100% -14px);">
<div ref='lzgl' class="full">
</div>
</div>
<!-- 这里放图片-->
</div>
</div>
</div>
<div class="hpbodyItem flex flex1" style="flex-direction: column;">
<!-- 照片-->
<div class="flex1" style="margin-bottom: 15px;">
<div class="hpbodyItem flex flex1" style="flex-direction: row;margin-top: 15px;margin-bottom: 15px;gap:10px">
<div style="width: 32.5%;height: 100%;" @click="$router.push('/dangerManagement/dangerReviewRecord')" >
<div class="full data-box1">
<i class="topL"></i>
<i class="topR"></i>
......@@ -164,20 +97,17 @@
<i class="bottomR"></i>
<div class="data-title1">
<b class="data-title-left">[</b>
<span>安全生产</span>
<span>隐患排查</span>
<b class="data-title-right">]</b>
</div>
<div class="full flex-center" style="height: calc(100% );font-size: 36px;color: #55d5c6;font-weight: 700;">
<span style="font-size: 24px;color: #3279d5;font-style: italic;font-weight:500;letter-spacing:10px">已安全生产</span> <span class='textDown'> {{aqts}}
</span><span style="font-size: 24px;color: #3279d5;font-weight:500;font-style: italic;letter-spacing:10px ">天</span>
<div class="full" style="height: calc(100% -14px);">
<div ref='yhpc' class="full">
</div>
</div>
</div>
</div>
<div class="flex1" style="margin-bottom: 15px;">
<div style="flex: 1" @click="$router.push('/riskPrecontrol/queryRiskTask')" >
<div class="full data-box1">
<i class="topL"></i>
<i class="topR"></i>
......@@ -192,29 +122,118 @@
<div class="full" style="overflow: hidden;">
<div class="lbbt" style="font-size: 13px;">
<div class="flex1 text-center ">
<div class="flex1 flex-center" style="border-right: 1px solid transparent;" >
单位
</div>
<div class="flex1 text-center ">
风险等级
<div class="">
重大风险
</div>
<div class="flex">
<div class="flex1">
已检
</div>
<div class="flex1">
待检
</div>
</div>
</div>
<div class="flex1 text-center ">
<div class="">
较大风险
</div>
<div class="flex">
<div class="flex1">
已检
</div>
<div class="flex1">
待检
</div>
</div>
</div>
<div class="flex1 text-center ">
<div class="">
一般风险
</div>
<div class="flex">
<div class="flex1">
已检
</div>
<div class="flex1">
待检
</div>
</div>
</div>
<div class="flex1 text-center ">
<div class="">
低风险
</div>
<div class="flex">
<div class="flex1">
已检
</div>
<div class="flex1">
待检
</div>
</div>
</div>
<div class="flex1 flex-center ">
合计
</div>
<div class="flex1 text-center ">
<div class="flex1 flex-center ">
完成率
</div>
</div>
<ScrollSeamless :class-option="optionSingleHeight" :data="fxgkList" class="lbbody"
style="overflow: hidden;">
<div class="full lbtit">
<div style="line-height: 25px;display: flex;font-size: 12px;text-align: center"
<div style="line-height: 25px;display: flex;font-size: 12px;text-align: center" v-for="(item,index) in fxgkList"
>
<div class="flex1" style="color: #68D8FE ;" v-text="item.dwmc"></div>
<div class="flex1 flex" style="color: #68D8FE ;" >
<div class="flex1">
{{item.zdyjCount}}
</div>
<div class="flex1">
{{item.zddjCount}}
</div>
</div>
<div class="flex1 flex" style="color: #68D8FE ;" >
<div class="flex1">
{{item.jdyjCount}}
</div>
<div class="flex1">
{{item.jddjCount}}
</div>
</div>
<div class="flex1 flex" style="color: #68D8FE ;" >
<div class="flex1">
{{item.ybyjCount}}
</div>
<div class="flex1">
{{item.ybdjCount}}
</div>
</div>
<div class="flex1 flex" style="color: #68D8FE ;" >
<div class="flex1">
{{item.dfxyjCount}}
</div>
<div class="flex1">
{{item.dfxzddjCount}}
</div>
</div>
<div class="flex1" style="color: #68D8FE ;" v-text="item.allCount"></div>
<div class="flex1" style="color: #68D8FE ;" v-text="item.wcRatio+'%'"></div>
</div>
<!-- <div style="line-height: 25px;display: flex;font-size: 12px;text-align: center"
v-for="item in fxgkList">
<div class="flex1" style="color: #68D8FE ;" v-text="item.jdCode"></div>
<div class="flex1" style="color: #68D8FE ;" v-text="item.name"></div>
......@@ -222,7 +241,7 @@
<div class="flex1" style="color: #68D8FE ;" v-text="item.y"></div>
<div class="flex1" style="color: #68D8FE ;" v-text="item.z"></div>
<div class="flex1" style="color: #68D8FE ;" v-text="item.gj"></div>
</div>
</div> -->
</div>
</ScrollSeamless>
......@@ -232,7 +251,75 @@
</div>
</div>
</div>
<div class="hpbodyItem flex flex1" style="flex-direction: row;gap: 10px;">
<!-- 隐患 -->
<div style="width: 32.3%;height: 100%;min-width: 0px;min-height: 0px;" @click="$router.push('/contingency/contingencyplan')" >
<div class="full data-box1">
<i class="topL"></i>
<i class="topR"></i>
<i class="bottomL"></i>
<i class="bottomR"></i>
<div class="data-title1">
<b class="data-title-left">[</b>
<span>应急管理</span>
<b class="data-title-right">]</b>
</div>
<div class="full flex">
<!-- 占比图-->
<div class="flex1">
<div class="full" ref='gsjyjgl'>
</div>
</div>
<div class="flex1" style="">
<div class="full" ref='bzjyjgl'>
</div>
</div>
<div class="flex1">
<div class="full" ref='cjjyjgl'>
</div>
</div>
</div>
</div>
</div>
<div class="flex1" @click="$router.push('/dailyc/duty')" >
<div class="full data-box1">
<i class="topL"></i>
<i class="topR"></i>
<i class="bottomL"></i>
<i class="bottomR"></i>
<div class="data-title1">
<b class="data-title-left">[</b>
<span>履职管理</span>
<b class="data-title-right">]</b>
</div>
<div class="full" style="height: calc(100% -14px);">
<div ref='lzgl' class="full">
</div>
</div>
</div>
</div>
<div class="flex1" style="margin-right: 5px;" @click="$router.push('/train/assessment')" >
<div class="full data-box1">
<i class="topL"></i>
<i class="topR"></i>
......@@ -253,7 +340,7 @@
</div>
<div class="flex1" style="margin-right: 10px;margin-left: 10px;">
<div class="flex1">
<div class="full" ref='bzjaqpx'>
</div>
......@@ -296,15 +383,16 @@
},
async mounted() {
/* 获取当前登录人的信息*/
let res = await this.$post('jcsj/common/vaild/homePage',{})
let sign=res.data.records
if(res.data.userid=='SUPERUSER'){
sign=true
let res = await this.$post('jcsj/common/vaild/homePage', {})
let sign = res.data.records
if (res.data.userid == 'SUPERUSER') {
sign = true
}
this.superuser=sign
if( this.superuser){
this.orgname=''
this.superuser = sign
if (this.superuser) {
this.orgname = ''
}
......@@ -316,6 +404,9 @@
this.$post('jcsj/common/bm/queryGs', {}).then(res => {
this.menusItems = res.data.records || []
this.changeItem(0)
this.allInitTimer = setInterval(() => {
this.initAll()
}, 1000 * 60 * 5)
})
/* 初始化init*/
this.$nextTick(() => {
......@@ -336,17 +427,19 @@
})
},
beforeDestroy(){
beforeDestroy() {
clearInterval(this.timer1)
clearInterval(this.allInitTimer)
},
data() {
return {
orgname: allUserInfo.orgname,
superuser: allUserInfo.superuser,
fxgkList:[],
fxgkList: [],
aqts: 0,
newTime: null,
timer1: null,
allInitTimer: null,
menusItems: [],
active: 0,
/* 仪表盘*/
......@@ -369,6 +462,12 @@
methods: {
changeItem(index) {
this.active = index
this.initAll()
},
initAll() {
this.initAqts()
this.inityhpc()
this.initscyj()
......@@ -379,12 +478,11 @@
this.initlzgl()
this.initFxgk()
},
/* 应急管理*/
eYjgl(key,data){
eYjgl(key, data) {
var option = {
title: {
......@@ -398,21 +496,18 @@
},
},
graphic: [
{
graphic: [{
type: "text",
left: "center",
top: "55%",
style: {
text: (data.wccRatio)+'%',
text: (data.wccRatio) + '%',
textAlign: "center",
fill: "#ffffff",
fontSize: 15,
},
},
],
color: ['#91cc75', '#f56c6c',
],
}, ],
color: ['#91cc75', '#f56c6c', ],
tooltip: {
trigger: 'item'
},
......@@ -441,12 +536,12 @@
}],
};
key=='公司级'&&this.egsjyjgl.setOption(option);
key=='车间级'&&this.ecjjyjgl.setOption(option);
key=='班组级'&&this.ebzjyjgl.setOption(option);
key == '公司级' && this.egsjyjgl.setOption(option);
key == '车间级' && this.ecjjyjgl.setOption(option);
key == '班组级' && this.ebzjyjgl.setOption(option);
},
eAqpx(key,data){
eAqpx(key, data) {
console.log(key)
var option = {
title: {
......@@ -460,21 +555,18 @@
},
},
graphic: [
{
graphic: [{
type: "text",
left: "center",
top: "55%",
style: {
text: (data.ywcRatio)+'%',
text: (data.ywcRatio) + '%',
textAlign: "center",
fill: "#ffffff",
fontSize: 15,
},
},
],
color: ['#91cc75', '#f56c6c',
],
}, ],
color: ['#91cc75', '#f56c6c', ],
tooltip: {
trigger: 'item'
},
......@@ -503,25 +595,38 @@
}],
};
key=='公司领导'&&this.egsjaqpx.setOption(option);
key=='职能部门'&&this.ecjjaqpx.setOption(option);
key=='生产单位'&&this.ebzjaqpx.setOption(option);
key == '公司领导' && this.egsjaqpx.setOption(option);
key == '职能部门' && this.ecjjaqpx.setOption(option);
key == '生产单位' && this.ebzjaqpx.setOption(option);
},
/* 公司级安全培训*/
initFxgk(){
let gsId = this.menusItems[this.active]['id']
let params = {
}
if (this.superuser) {
params.gsId = gsId
} else {
params.bmId = gsId
}
this.$post('aqgl/homepage/fxgk', params).then(res => {
this.fxgkList = res.data.records || []
})
},
/* 查询安全天数*/
initAqts() {
let gsId = this.menusItems[this.active]['id']
let params={
let params = {
}
if (this.superuser){
params.gsId=gsId
}else{
params.bmId=gsId
if (this.superuser) {
params.gsId = gsId
} else {
params.bmId = gsId
}
this.$post('aqgl/homepage/aqts', params).then(res => {
this.aqts = res.data.records || 0
......@@ -531,61 +636,61 @@
return v
},
/* 应急管理*/
initEyjgl(){
initEyjgl() {
let gsId = this.menusItems[this.active]['id']
let params={
let params = {
}
if (this.superuser){
params.gsId=gsId
}else{
params.bmId=gsId
if (this.superuser) {
params.gsId = gsId
} else {
params.bmId = gsId
}
this.$post('aqgl/homepage/yjgl',params).then(res=>{
let records= res.data.records
let KeyList=Object.keys(records)
KeyList.forEach(key=>{
this.eYjgl(key,records[key])
this.$post('aqgl/homepage/yjgl', params).then(res => {
let records = res.data.records
let KeyList = Object.keys(records)
KeyList.forEach(key => {
this.eYjgl(key, records[key])
})
})
},
/* 安全培训*/
initEaqpx(){
initEaqpx() {
let gsId = this.menusItems[this.active]['id']
let params={
let params = {
}
if (this.superuser){
params.gsId=gsId
}else{
params.bmId=gsId
if (this.superuser) {
params.gsId = gsId
} else {
params.bmId = gsId
}
this.$post('aqgl/homepage/aqpx', params).then(res=>{
let records=res.data.records||[]
let KeyList=Object.keys(records)
KeyList.forEach(key=>{
this.eAqpx(key,records[key])
this.$post('aqgl/homepage/aqpx', params).then(res => {
let records = res.data.records || []
let KeyList = Object.keys(records)
KeyList.forEach(key => {
this.eAqpx(key, records[key])
})
})
},
initlzgl(){
initlzgl() {
let gsId = this.menusItems[this.active]['id']
let params={
let params = {
}
if (this.superuser){
params.gsId=gsId
}else{
params.bmId=gsId
if (this.superuser) {
params.gsId = gsId
} else {
params.bmId = gsId
}
this.$post('aqgl/homepage/lzgl',params).then(res=>{
let records=_.cloneDeep( res.data.records||[])
let keyList=Object.keys(records)
this.$post('aqgl/homepage/lzgl', params).then(res => {
let records = _.cloneDeep(res.data.records || [])
let keyList = Object.keys(records)
let ywcList=keyList.map(key=>records[key]['ywcCount'])
let wwcList=keyList.map(key=>records[key]['wccCount'])
let ywcList = keyList.map(key => records[key]['ywcCount'])
let wwcList = keyList.map(key => records[key]['wccCount'])
let option = {
tooltip: {
trigger: 'axis', // 触发类型为坐标轴触发
......@@ -669,13 +774,13 @@
/* 持证预警*/
initscyj() {
let gsId = this.menusItems[this.active]['id']
let params={
let params = {
}
if (this.superuser){
params.gsId=gsId
}else{
params.bmId=gsId
if (this.superuser) {
params.gsId = gsId
} else {
params.bmId = gsId
}
this.$post('aqgl/homepage/czyj', params).then(res => {
let records = res.data.records
......@@ -782,13 +887,13 @@
},
inityhpc() {
let gsId = this.menusItems[this.active]['id']
let params={
let params = {
}
if (this.superuser){
params.gsId=gsId
}else{
params.bmId=gsId
if (this.superuser) {
params.gsId = gsId
} else {
params.bmId = gsId
}
this.$post('aqgl/homepage/yhpc', params).then(res => {
let records = res.data.records
......@@ -876,10 +981,18 @@
</script>
<style lang="scss" scoped>
.lbbody {
height: calc(100% - 8vh);
overflow: hidden;
}
.flex1 {
min-height: 0
min-height: 0;
// min-width:0
}
.flex2 {
min-height: 0;
flex:2 1 0%
}
.fullmain {
box-sizing: border-box;
padding: 10px;
......@@ -888,6 +1001,7 @@
background-size: 100% 100%;
.hpbody {
flex-direction: column;
width: 100%;
height: calc(100% - 70px);
margin-top: 10px;
......@@ -1020,10 +1134,7 @@
font-weight: 600
}
.hpbodyItem01 {
width: 100%;
height: 33.33%;
}
::v-deep .el-progress__text {
font-size: 36px !important;
......@@ -1034,16 +1145,20 @@
.textDown {
text-shadow: 0 0 .5rem #00d8ff;
}
.lbbt {
height: 4vh;
height: 6vh;
width: 100%;
font-size: .9vw;
display: flex;
line-height: 4vh;
line-height: 3vh;
color: #61d2f7;
background-color: rgba(22, 84, 198, 0.7);
}
.gszp{
height: calc(100% - 0px );background-image: url(./static/gs.jpg);background-size: 100% 100%;
.gszp {
height: calc(100% - 0px);
background-image: url(./static/gs.jpg);
background-size: 100% 100%;
}
</style>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment