Skip to content

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

首页调整

parent b487cbc9
Hide whitespace changes
Inline Side-by-side
Showing with 2420 additions and 1371 deletions
src/views/threeViolations/homePage/index.vue
View file @ 3b3bd6a9
<template> <template>
<!-- 外层排版--> <div class="fullmain">
<!-- <div class="home-page" id="homePageBody" :style="{ height: height + 'px' }"> --> <!-- 动态单位标题-->
<div class="min_full"> <div class="bigTitle">
<div class="home-page full" ref='homePageBody' id="homePageBody" style="overflow: hidden;"> <div class="menus">
<div class="page-homepage" id="homePage" @dblclick="handleDoubleClick" style=""> <div v-for="(item,index) in menusItems" :key="index" @click="changeItem(index)" class="menusItem" :class="{
<div class="echarts_nav" id="echarts_nav"> 'menusItemActive':index==active
<div class="iconTable" v-for="item in gsList" :key="item.id" @click="bindGsid(item)"> }">
<div class="dv-border-box-10 nav_border" {{item.bmmc}}
:style="{color:(superuser?(queryParams1.gsid==item.id):(queryParams1.bmid==item.id))?activeStyle.color:'', boxShadow:(superuser?(queryParams1.gsid==item.id):(queryParams1.bmid==item.id))?'#00bfff 0px 0px 25px 3px inset':'#204b85 0px 0px 25px 3px inset'}"> </div>
<svg width="131" height="37" class="dv-border-svg-container"> </div>
<polygon fill="transparent" points=" <span class='kbtime'>{{newTime}}</span>
4, 0 127, 0 131, 4 131, 33 127, 37 </div>
4, 37 0, 33 0, 4 <!-- 内容-->
"></polygon> <div class="hpbody">
</svg><svg width="150px" height="150px" class="left-top dv-border-svg-container"> <div class="hpbodyItem flex flex1" style="flex-direction: column">
<polygon points="40, 0 5, 0 0, 5 0, 16 3, 19 3, 7 7, 3 35, 3" <!-- 安全指数-->
:fill="(superuser?(queryParams1.gsid==item.id):(queryParams1.bmid==item.id))?'#00BFFF':'#3377CB'"></polygon> <div class="flex1" style="margin-bottom: 15px;">
</svg> <div class="full data-box1">
<svg width="150px" height="150px" class="right-top dv-border-svg-container"> <i class="topL"></i>
<polygon points="40, 0 5, 0 0, 5 0, 16 3, 19 3, 7 7, 3 35, 3" <i class="topR"></i>
:fill="(superuser?(queryParams1.gsid==item.id):(queryParams1.bmid==item.id))?'#00BFFF':'#3377CB'"></polygon> <i class="bottomL"></i>
</svg> <i class="bottomR"></i>
<svg width="150px" height="150px" class="left-bottom dv-border-svg-container"> <div class="data-title1">
<polygon points="40, 0 5, 0 0, 5 0, 16 3, 19 3, 7 7, 3 35, 3" <b class="data-title-left">[</b>
:fill="(superuser?(queryParams1.gsid==item.id):(queryParams1.bmid==item.id))?'#00BFFF':'#3377CB'"></polygon> <span>安全指数</span>
</svg><svg width="150px" height="150px" class="right-bottom dv-border-svg-container"> <b class="data-title-right">]</b>
<polygon points="40, 0 5, 0 0, 5 0, 16 3, 19 3, 7 7, 3 35, 3" </div>
:fill="(superuser?(queryParams1.gsid==item.id):(queryParams1.bmid==item.id))?'#00BFFF':'#3377CB'"></polygon> <div class="full flex-center" style="height: calc(100% );font-size: 42px;color: #55d5c6;font-weight: 700;">
</svg> <el-progress :width='158' type="dashboard" :percentage="76" text-color='#fff' :format='progressformat'
<div class="border-box-content"><span class="spanTitle"> :color="colors"></el-progress>
<i class="iconfont icon-zhexiantu"></i> {{item.bmmc}} </span> </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> </div>
</div> </div>
<div class="echart-body"> <div class="flex1">
<div class="page-left"> <div class="full data-box1">
<div class="page-left-t page-left-3"> <i class="topL"></i>
<div class="page-fxpc"> <i class="topR"></i>
<div id="fxpcChart" class="chart-auto"></div> <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>
<div class="page-yhhz">
<div id="yhclChart" class="chart-auto"></div> <div class="flex1" style="margin-right: 10px;margin-left: 10px;">
<div class="full" ref='bzjyjgl'>
</div>
</div> </div>
</div>
<div class="page-left-c page-left-4"> <div class="flex1">
<div class="yhzl-big-box"> <div class="full" ref='cjjyjgl'>
<div class="yhzl-big-box-title" style="padding-top: 1.5%;">违规行为</div>
<div class="echarts">
<div class="lbt" v-if="showList.length > 0">
<el-carousel style="height: 100%;">
<el-carousel-item v-for="(item, index) in showList" :key="item.id + index">
<div class="lbtAll">
<div class="sm">
<el-tooltip :content="`${item.gsName}${item.bzName || ''}:${item.wzr}:${item.wzxw}`"
placement="top">
<span class='infor'>
{{ `${item.gsName}${item.bzName || ''}的${item.wzr}做出违章行为:${item.wzxw}` }}
</span>
</el-tooltip>
</div>
<el-image style="width: 100%; height: 100%" :src="`${baseurl}/api/file/${item.filePath}`"
fit="fit"></el-image>
</div>
</el-carousel-item>
</el-carousel>
</div>
<div style="height:100%;display: flex;align-items: center;justify-content: center;position: relative;"
class="lbt" v-else>
<span
style="position: absolute;bottom: 50px;line-height: 40px;font-size: 18px;font-weight: 800;color:#787878">本月暂无违规记录。</span>
<img style="height:150px;width: 200px;" :src="aqpng" alt="" srcset="">
</div>
</div> </div>
</div> </div>
</div> </div>
<div class="page-left-b page-left-3"> </div>
<div class="yhzl-big-box"> </div>
<div v-echartResize="()=>{
fxpcChart.resize(); </div>
yhclChart.resize(); <div class="hpbodyItem flex flex1" style="flex-direction: column;">
yjylChart.resize(); <!-- 照片-->
yhzlChart.resize(); <div class="flex1" style="margin-bottom: 15px;">
rfxpcChart.resize(); <div class="full data-box1" style='padding-bottom:0'>
lzglChart.resize(); <i class="topL"></i>
ygzcChart.resize(); <i class="topR"></i>
}" id="yjylChart" class="chart-auto"></div> <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-center gszp"
style="">
</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='czyj' class="full">
</div> </div>
</div> </div>
</div> </div>
<div class="page-center"> </div>
<div class="page-center-t">
<div class="flex1">
<div class="gs-picture" style="width: 100%;height: 100%;"> <div class="full data-box1">
<div class="dv-border-box-1"> <i class="topL"></i>
<svg width="682" height="379" class="border"> <i class="topR"></i>
<polygon fill="transparent" points="10, 27 10, 352 13, 355 13, 358 24, 368 <i class="bottomL"></i>
38, 368 41, 371 73, 371 75, 369 81, 369 <i class="bottomR"></i>
85, 373 597, 373 601, 369 607, 369 <div class="data-title1">
609, 371 641, 371 644, 368 <b class="data-title-left">[</b>
658, 368 669, 358 669, 355 <span>履职管理</span>
672, 352 672, 27 669, 25 669, 21 <b class="data-title-right">]</b>
658, 11 644, 11 641, 8 609, 8 607, 10 </div>
601, 10 597, 6 85, 6 81, 10 75, 10 73, 8 41, 8 38, 11 24, 11 13, 21 13, 24"></polygon>
</svg> <div class="full" style="height: calc(100% -14px);">
<svg width="150px" height="150px" class="left-top border"> <div ref='lzgl' class="full">
<polygon
points="6,66 6,18 12,12 18,12 24,6 27,6 30,9 36,9 39,6 84,6 81,9 75,9 73.2,7 40.8,7 37.8,10.2 24,10.2 12,21 12,24 9,27 9,51 7.8,54 7.8,63"
fill="#4fd2dd">
<animate attributeName="fill" values="#4fd2dd;#235fa7;#4fd2dd" dur="0.5s" begin="0s"
repeatCount="indefinite"></animate>
</polygon>
<polygon points="27.599999999999998,4.8 38.4,4.8 35.4,7.8 30.599999999999998,7.8" fill="#235fa7">
<animate attributeName="fill" values="#235fa7;#4fd2dd;#235fa7" dur="0.5s" begin="0s"
repeatCount="indefinite"></animate>
</polygon>
<polygon
points="9,54 9,63 7.199999999999999,66 7.199999999999999,75 7.8,78 7.8,110 8.4,110 8.4,66 9.6,66 9.6,54"
fill="#4fd2dd">
<animate attributeName="fill" values="#4fd2dd;#235fa7;transparent" dur="1s" begin="0s"
repeatCount="indefinite"></animate>
</polygon>
</svg><svg width="150px" height="150px" class="right-top border">
<polygon
points="6,66 6,18 12,12 18,12 24,6 27,6 30,9 36,9 39,6 84,6 81,9 75,9 73.2,7 40.8,7 37.8,10.2 24,10.2 12,21 12,24 9,27 9,51 7.8,54 7.8,63"
fill="#4fd2dd">
<animate attributeName="fill" values="#4fd2dd;#235fa7;#4fd2dd" dur="0.5s" begin="0s"
repeatCount="indefinite"></animate>
</polygon>
<polygon points="27.599999999999998,4.8 38.4,4.8 35.4,7.8 30.599999999999998,7.8" fill="#235fa7">
<animate attributeName="fill" values="#235fa7;#4fd2dd;#235fa7" dur="0.5s" begin="0s"
repeatCount="indefinite"></animate>
</polygon>
<polygon
points="9,54 9,63 7.199999999999999,66 7.199999999999999,75 7.8,78 7.8,110 8.4,110 8.4,66 9.6,66 9.6,54"
fill="#4fd2dd">
<animate attributeName="fill" values="#4fd2dd;#235fa7;transparent" dur="1s" begin="0s"
repeatCount="indefinite"></animate>
</polygon>
</svg><svg width="150px" height="150px" class="left-bottom border">
<polygon
points="6,66 6,18 12,12 18,12 24,6 27,6 30,9 36,9 39,6 84,6 81,9 75,9 73.2,7 40.8,7 37.8,10.2 24,10.2 12,21 12,24 9,27 9,51 7.8,54 7.8,63"
fill="#4fd2dd">
<animate attributeName="fill" values="#4fd2dd;#235fa7;#4fd2dd" dur="0.5s" begin="0s"
repeatCount="indefinite"></animate>
</polygon>
<polygon points="27.599999999999998,4.8 38.4,4.8 35.4,7.8 30.599999999999998,7.8" fill="#235fa7">
<animate attributeName="fill" values="#235fa7;#4fd2dd;#235fa7" dur="0.5s" begin="0s"
repeatCount="indefinite"></animate>
</polygon>
<polygon
points="9,54 9,63 7.199999999999999,66 7.199999999999999,75 7.8,78 7.8,110 8.4,110 8.4,66 9.6,66 9.6,54"
fill="#4fd2dd">
<animate attributeName="fill" values="#4fd2dd;#235fa7;transparent" dur="1s" begin="0s"
repeatCount="indefinite"></animate>
</polygon>
</svg>
<svg width="150px" height="150px" class="right-bottom border">
<polygon
points="6,66 6,18 12,12 18,12 24,6 27,6 30,9 36,9 39,6 84,6 81,9 75,9 73.2,7 40.8,7 37.8,10.2 24,10.2 12,21 12,24 9,27 9,51 7.8,54 7.8,63"
fill="#4fd2dd">
<animate attributeName="fill" values="#4fd2dd;#235fa7;#4fd2dd" dur="0.5s" begin="0s"
repeatCount="indefinite"></animate>
</polygon>
<polygon points="27.599999999999998,4.8 38.4,4.8 35.4,7.8 30.599999999999998,7.8" fill="#235fa7">
<animate attributeName="fill" values="#235fa7;#4fd2dd;#235fa7" dur="0.5s" begin="0s"
repeatCount="indefinite"></animate>
</polygon>
<polygon
points="9,54 9,63 7.199999999999999,66 7.199999999999999,75 7.8,78 7.8,110 8.4,110 8.4,66 9.6,66 9.6,54"
fill="#4fd2dd">
<animate attributeName="fill" values="#4fd2dd;#235fa7;transparent" dur="1s" begin="0s"
repeatCount="indefinite"></animate>
</polygon>
</svg>
<div class="border-box-content">
<div class="realPicture-min">
<div class="realImg">
</div>
</div>
</div>
</div>
</div> </div>
</div> </div>
<div class="page-center-b">
<div class="yhzl-big-box"> </div>
<!-- <div class="yhzl-big-box-title">隐患治理</div> </div>
<div class="echarts"> -->
<div id="yhzlChart" class="chart-auto"></div> </div>
<!-- </div> --> <div class="hpbodyItem flex flex1" style="flex-direction: column;">
<!-- 照片-->
<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 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" 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="overflow: hidden;">
<div class="lbbt" style="font-size: 13px;">
<div class="flex1 text-center ">
单位
</div>
<div class="flex1 text-center ">
风险等级
</div>
<div class="flex1 text-center ">
已检
</div>
<div class="flex1 text-center ">
待检
</div>
<div class="flex1 text-center ">
合计
</div>
<div class="flex1 text-center ">
完成率
</div>
</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"
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>
<div class="flex1" style="color: #68D8FE ;" v-text="item.x"></div>
<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>
</ScrollSeamless>
</div> </div>
</div> </div>
<div class="page-right"> </div>
<div class="page-right-t">
<div class="yhzl-big-box"> <div class="flex1">
<div class="yhzl-big-box-title">风险排查</div> <div class="full data-box1">
<div class="echarts"> <i class="topL"></i>
<div id="rfxpcChart" v-echartResize="()=>{ <i class="topR"></i>
<i class="bottomL"></i>
}" class="chart-auto"></div> <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='gsjaqpx'>
</div> </div>
</div> </div>
</div>
<div class="page-right-c"> <div class="flex1" style="margin-right: 10px;margin-left: 10px;">
<div class="yhzl-big-box"> <div class="full" ref='bzjaqpx'>
<div class="yhzl-big-box-title" style="padding-top: 1.5%;">履职管理</div>
<div class="echarts">
<div id="lzglChart" class="chart-auto"></div>
</div> </div>
</div> </div>
</div>
<div class="page-right-b"> <div class="flex1">
<div class="yhzl-big-box" style="background-color: rgba(3,15,42,.7)"> <div class="full" ref='cjjaqpx'>
<div id="ygzcChart" class="chart-auto"></div>
</div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</template> </template>
<script> <script>
const baseurl = process.env.VUE_APP_BASE_API var allUserInfo = JSON.parse(localStorage.getItem('allUserInfo'));
import {
tableMixin
} from 'common'
import vueSeamlessScroll from 'vue-seamless-scroll'
import * as echarts from 'echarts';
import aqpng from '@/assets/images/aq.png';
import gspicture from '@/assets/images/gs.jpg';
import {
doQuery as doQueryfx
} from "@/api/riskPrecontrol/riskAnalysis.js";
import {
queryYhsbtj as doQueryyh
} from "@/api/dangerManagement/yhslhz.js";
import {
doQuery as doQueryDcl
} from "@/api/dangerManagement/enterSafetyRecords.js"
import {
queryBglxFile
} from '@/api/threeViolations/enterTV.js';
import {
doQueryWithFile
} from '@/api/basicData/ryq.js';
import {
fxpcQuery,
lzglQuery,
ygczQuery,
yhtjQuery,
yjylQuery,
gsQuery
} from '@/api/home/homepage.js'
import ryqno from '@/assets/images/ryqno.png'
var allUserInfo = JSON.parse(localStorage.getItem('allUserInfo'));
export default { export default {
components: {
vueSeamlessScroll
},
// mixins: [tableMixin],
computed: { computed: {
gsid() {
return this.queryParams1.gsid optionSingleHeight() {
}, return {
bmid() { singleHeight: 25
return this.queryParams1.bmid
},
},
watch: {
gsid(val) {
/* 监听公司id*/
if (val) {
this.queryParams2.gsid = this.queryParams1.gsid
this.doQueryfx()
this.doQueryyh();
this.postYhzl(); //隐患治理
this.postFxpc(); //风险排查
this.postLzgl(); //履职管理
this.postYgcz(); //员工持证
}
},
bmid(val) {
/* 监听公司id*/
if (val) {
this.queryParams2.bmid = this.queryParams1.bmid
this.doQueryfx()
this.doQueryyh();
this.postYhzl(); //隐患治理
this.postFxpc(); //风险排查
this.postLzgl(); //履职管理
this.postYgcz(); //员工持证
} }
},
height(value) {
document.addEventListener('fullscreenchange', (event) => {
if (!document.fullscreenElement) {
// 全屏已退出
console.log('Exited full screen');
}
});
// setTimeout(() => {
// this.fxpcChart.resize();
// this.yhclChart.resize();
// this.yjylChart.resize();
// this.yhzlChart.resize();
// this.rfxpcChart.resize();
// this.lzglChart.resize();
// this.ygzcChart.resize();
// this.$nextTick(() => {
// this.height=document.getElementById('homePageBody').parentNode.clientHeight;
// this.carHeight=this.height*0.4-60+'px';
// })
// }, 50);
} }
}, },
activated() {
},
async mounted() { async mounted() {
/* 获取当前登录人的信息*/ /* 获取当前登录人的信息*/
let res = await this.$post('jcsj/common/vaild/homePage',{}) let res = await this.$post('jcsj/common/vaild/homePage',{})
let sign=res.data.records let sign=res.data.records
...@@ -348,1177 +307,743 @@ ...@@ -348,1177 +307,743 @@
this.orgname='' this.orgname=''
} }
// debugger
this.postGs();
this.$nextTick(() => {
this.height = document.getElementById('homePageBody').parentNode.clientHeight; this.newTime = this.$moment(new Date().getTime()).format('YYYY-MM-DD HH:mm:ss')
this.carHeight = this.height * 0.4 - 60 + 'px'; this.timer = setInterval(() => {
this.newTime = this.$moment(new Date().getTime()).format('YYYY-MM-DD HH:mm:ss')
}, 1000)
/* 初始化公司*/
this.$post('jcsj/common/bm/queryGs', {}).then(res => {
this.menusItems = res.data.records || []
this.changeItem(0)
}) })
window.addEventListener('resize', function(params) { /* 初始化init*/
this.$nextTick(() => {
this.eyhpc = this.$echarts.init(this.$refs.yhpc)
this.eczyj = this.$echarts.init(this.$refs.czyj)
this.egsjaqpx = this.$echarts.init(this.$refs.gsjaqpx)
this.ecjjaqpx = this.$echarts.init(this.$refs.cjjaqpx)
this.ebzjaqpx = this.$echarts.init(this.$refs.bzjaqpx)
}) this.egsjyjgl = this.$echarts.init(this.$refs.gsjyjgl)
this.fxpcChart = echarts.init(document.getElementById('fxpcChart')) this.ecjjyjgl = this.$echarts.init(this.$refs.cjjyjgl)
this.yhclChart = echarts.init(document.getElementById('yhclChart')) this.ebzjyjgl = this.$echarts.init(this.$refs.bzjyjgl)
this.yjylChart = echarts.init(document.getElementById('yjylChart'));
this.yhzlChart = echarts.init(document.getElementById('yhzlChart'));
this.rfxpcChart = echarts.init(document.getElementById('rfxpcChart'));
this.lzglChart = echarts.init(document.getElementById('lzglChart'));
this.ygzcChart = echarts.init(document.getElementById('ygzcChart'));
doQueryWithFile({}).then(res => {
this.showListRy = res.data.records || []
})
queryBglxFile({}).then(res => {
this.showList = res.data.records || []
// this.showList=[]
})
this.postYjyl(); //应急演练
this.elzgl = this.$echarts.init(this.$refs.lzgl)
})
},
beforeDestroy(){
clearInterval(this.timer1)
}, },
data() { data() {
return { return {
orgname: allUserInfo.orgname, orgname: allUserInfo.orgname,
superuser: allUserInfo.superuser, superuser: allUserInfo.superuser,
activeStyle: { fxgkList:[],
color: "rgb(0, 191, 255)", aqts: 0,
boxShadow: "rgb(0, 191, 255) 0px 0px 25px 3px inset;" newTime: null,
}, timer1: null,
gsList: [], menusItems: [],
height: 300, active: 0,
showListRy: [], /* 仪表盘*/
queryParams1: { colors: [{
grouptype: 'GS', color: '#f56c6c',
rwlx: 'W', percentage: 60
gsid: '', },
bmid: '', {
ksrq: new Date().getTime(), color: '#e6a23c',
jsrq: new Date().getTime() percentage: 80
},
}, {
queryParams2: { color: '#91cc75',
hzfs: 'GS', percentage: 90
gsid: '', },
bmid: '', ]
ksrq: null,
jsrq: new Date().getTime()
},
queryParams: {
queryType: 'YHWCL'
// zt:'S'
},
carHeight: "290px",
ryqno: ryqno,
aqpng: aqpng,
gspicture: gspicture,
baseurl: baseurl,
showList: [],
/* dom*/
fxpcChart: null,
yhclChart: null,
yjylChart: null,
yhzlChart: null,
rfxpcChart: null,
lzglChart: null,
ygzcChart: null
} }
}, },
methods: { methods: {
handleDoubleClick() { changeItem(index) {
this.fullScreen(document.getElementById('homePage')); this.active = index
setTimeout(() => { this.initAqts()
this.fxpcChart.resize(); this.inityhpc()
this.yhclChart.resize(); this.initscyj()
this.yjylChart.resize();
this.yhzlChart.resize(); /* 应急管理*/
this.rfxpcChart.resize(); this.initEyjgl()
this.lzglChart.resize(); this.initEaqpx()
this.ygzcChart.resize();
this.$nextTick(() => { this.initlzgl()
this.height = document.getElementById('homePageBody').parentNode.clientHeight;
this.carHeight = this.height * 0.4 - 60 + 'px';
})
}, 50);
}, },
fullScreen(element) { /* 应急管理*/
const elem = element || document.documentElement;
if (elem.webkitRequestFullScreen) { eYjgl(key,data){
elem.webkitRequestFullScreen();
} else if (elem.mozRequestFullScreen) { var option = {
elem.mozRequestFullScreen(); title: {
} else if (elem.requestFullScreen) { text: key,
elem.requestFullscreen(); left: 'center',
} else if (elem.msExitFullscreen) {
elem.msExitFullscreen(); top: '20px',
} else if (elem.msRequestFullscreen) { textStyle: {
elem.msRequestFullscreen(); fontSize: 16,
} else if (typeof window.ActiveXObject !== "undefined") { //for Internet Explorer color: '#26c6f0'
var wscript = new ActiveXObject("WScript.Shell"); },
if (wscript !== null) {
wscript.SendKeys("{F11}"); },
} graphic: [
} {
}, type: "text",
bindGsid(item) { left: "center",
if (this.superuser) { top: "55%",
delete this.queryParams1.bmid style: {
this.queryParams1.gsid = item.id text: (data.wccRatio)+'%',
} else { textAlign: "center",
delete this.queryParams1.gsid fill: "#ffffff",
this.queryParams1.bmid = item.id fontSize: 15,
} },
},
],
color: ['#91cc75', '#f56c6c',
],
tooltip: {
trigger: 'item'
},
series: [{
type: 'pie',
radius: ['40%', '70%'],
center: ['50%', '60%'],
avoidLabelOverlap: false,
label: {
normal: {
show: false,
formatter: "{value}%",
position: "inside",
color: 'white'
},
position: 'center'
},
data: [{
value: data.ywcCount,
name: '已完成'
}, {
value: data.wccCount,
name: '未完成'
}]
}],
};
key=='公司级'&&this.egsjyjgl.setOption(option);
key=='车间级'&&this.ecjjyjgl.setOption(option);
key=='班组级'&&this.ebzjyjgl.setOption(option);
}, },
postGs() { eAqpx(key,data){
gsQuery().then(res => { console.log(key)
if (res.success) { var option = {
this.gsList = res.data.records || []; title: {
/* 判定是否是superuser*/ text: key,
console.log(this, 'this') left: 'center',
if (this.superuser) {
this.queryParams1.gsid = this.gsList[0]["id"]; top: '20px',
textStyle: {
} else { fontSize: 16,
delete this.queryParams1.gsid color: '#26c6f0'
this.queryParams1.bmid = this.orgname; },
}
},
} graphic: [
}) {
type: "text",
left: "center",
top: "55%",
style: {
text: (data.ywcRatio)+'%',
textAlign: "center",
fill: "#ffffff",
fontSize: 15,
},
},
],
color: ['#91cc75', '#f56c6c',
],
tooltip: {
trigger: 'item'
},
series: [{
type: 'pie',
radius: ['40%', '70%'],
center: ['50%', '60%'],
avoidLabelOverlap: false,
label: {
normal: {
show: false,
formatter: "{value}%",
position: "inside",
color: 'white'
},
position: 'center'
},
data: [{
value: data.ywcCount,
name: '已完成'
}, {
value: data.wccCount,
name: '未完成'
}]
}],
};
key=='公司领导'&&this.egsjaqpx.setOption(option);
key=='职能部门'&&this.ecjjaqpx.setOption(option);
key=='生产单位'&&this.ebzjaqpx.setOption(option);
}, },
doQueryfx() { /* 公司级安全培训*/
if (this.queryParams1.rwlx == 'W') {
this.queryParams1.ksrq = new Date(new Date(this.getFirstWeek()).Format('yyyy/MM/dd') + " 00:00:00").getTime();
this.queryParams1.jsrq = new Date(new Date(this.getlastWeek()).Format('yyyy/MM/dd') + " 23:59:59").getTime();
} else if (this.queryParams1.rwlx == 'D') { /* 查询安全天数*/
this.queryParams1.ksrq = new Date().getTime(); initAqts() {
this.queryParams1.jsrq = new Date().getTime(); let gsId = this.menusItems[this.active]['id']
} else { let params={
const today = new Date();
today.setDate(1);
today.setHours(0, 0, 0, 0);
const timestamp = today.getTime();
this.queryParams1.ksrq = timestamp;
this.queryParams1.jsrq = new Date().getTime();
} }
if (!this.superuser) { if (this.superuser){
delete this.queryParams1.grouptype params.gsId=gsId
this.queryParams1.hzfs = 'BM' }else{
params.bmId=gsId
} }
doQueryfx(this.queryParams1).then(res => { this.$post('aqgl/homepage/aqts', params).then(res => {
if (res.success) { this.aqts = res.data.records || 0
let value
if (res.data.records[0]) {
value = res.data.records[0].wcPercent || 0
} else {
value = 0
}
this.setChart(this.fxpcChart, {
name: '风险排查率',
title: '风险排查',
value: value
})
}
}) })
}, },
getFirstWeek() { progressformat(v) {
let nowDate = new Date(); return v
let first = nowDate.getDate() - nowDate.getDay() +
1; //getDate()从nowDate对象返回一个月中的某一天;getDay()从nowDate对象返回一周中的某一天
let firstDate = new Date(nowDate.setDate(first))
.toUTCString(); //setDate()设置nowDate对象中月的某一天;toUTCString()根据世界时，把nowDate对象转换为字符串。
console.log(firstDate);
return firstDate;
},
getlastWeek() {
let nowDate = new Date();
let first = nowDate.getDate() - nowDate.getDay() + 1;
let last = first + 6; // last day is the first day + 6
let lastday = new Date(nowDate.setDate(last)).toUTCString();
return lastday
}, },
doQueryyh() { /* 应急管理*/
if(this.superuser){ initEyjgl(){
this.queryParams2.hzfs='GS' let gsId = this.menusItems[this.active]['id']
let params={
}
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])
})
}else{ })
this.queryParams2.hzfs='BM' },
/* 安全培训*/
initEaqpx(){
let gsId = this.menusItems[this.active]['id']
let params={
}
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])
})
} })
doQueryyh(this.queryParams2).then(res => { },
if (res.success) { initlzgl(){
let value let gsId = this.menusItems[this.active]['id']
if (res.data.records[0]) { let params={
let data1 = res.data.records[0] ? res.data.records[0].wclCount : 0;
let data2 = res.data.records[0] ? res.data.records[0].yclCount : 0; }
value = Number(parseFloat(data2 / (data1 + data2)).toFixed(4)) * 100; if (this.superuser){
// value=res.data.records[0].wcPercent||0 params.gsId=gsId
} else { }else{
value = 0 params.bmId=gsId
} }
this.setChart(this.yhclChart, { this.$post('aqgl/homepage/lzgl',params).then(res=>{
name: '隐患整改完成率', let records=_.cloneDeep( res.data.records||[])
title: '隐患整改', let keyList=Object.keys(records)
value: value
}) let ywcList=keyList.map(key=>records[key]['ywcCount'])
let wwcList=keyList.map(key=>records[key]['wccCount'])
} let option = {
tooltip: {
trigger: 'axis', // 触发类型为坐标轴触发
axisPointer: {
type: 'line' // 指示器类型为线
}
},
color: ['#91cc75', '#FF7474'],
grid: {
top: '10%',
left: '3%',
right: '6%',
bottom: '10%',
containLabel: true,
},
xAxis: {
type: 'category',
data: keyList,
axisTick: {
show: true,
lineStyle: {
color: "white"
}
},
axisLine: {
show: true,
lineStyle: {
color: "white"
}
},
axisLabel: {
show: true,
color: 'white'
}
},
yAxis: [{
show: true,
axisLine: {
show: true,
lineStyle: {
color: "white"
}
},
axisLabel: {
show: true,
color: 'white'
}
}],
series: [{
name: '已完成',
type: 'bar',
data: ywcList,
label: {
show: true,
position: 'top', // 数字显示在柱子上方
color: '#fff'
},
barWidth: '15px'
},
{
name: '未完成',
type: 'bar',
data: wwcList,
label: {
show: true,
position: 'top', // 数字显示在柱子上方
color: '#fff'
},
barWidth: '15px'
},
]
};
this.elzgl.setOption(option);
}) })
}, },
postYjyl() { /* 持证预警*/
yjylQuery().then(res => { initscyj() {
if (res.success) { let gsId = this.menusItems[this.active]['id']
let value = res.data.records ? res.data.records : []; let params={
let seriesData = [],
xAxis = []; }
value.forEach(element => { if (this.superuser){
xAxis.push(element.bmName || ""); params.gsId=gsId
seriesData.push(Number(parseFloat((element.wcl || 0) * 100).toFixed(2))); }else{
}); params.bmId=gsId
}
this.setBarhart(this.yjylChart, { this.$post('aqgl/homepage/czyj', params).then(res => {
title: "应急演练", let records = res.data.records
xAxis: xAxis, /* x 轴*/
titleShow: true, let keyList = Object.keys(records)
yAxis: [{ /* 即将到期*/
type: 'value', let jjdqList = keyList.map(key => records[key].jjdqCount)
/* 超期*/
axisTick: { let cqList = keyList.map(key => records[key].cqCount)
/* 有效期内*/
let yqxList = keyList.map(key => records[key].yxqCount)
/* 生产echarts*/
let option = {
tooltip: {
trigger: 'axis', // 触发类型为坐标轴触发
axisPointer: {
type: 'line' // 指示器类型为线
}
},
color: ['#91cc75', '#ffb56b', '#FF7474'],
grid: {
top: '10%',
left: '3%',
right: '6%',
bottom: '10%',
containLabel: true,
},
xAxis: {
type: 'category',
data: keyList,
axisTick: {
show: true,
lineStyle: {
color: "white" color: "white"
},
axisLabel: {
color: 'white',
formatter: "{value}%",
},
axisLine: {
lineStyle: {
color: 'white'
},
},
splitLine: {
show: false,
color: 'white'
} }
}], },
series: [{ axisLine: {
name: "完成率",
type: 'bar',
barWidth: "60%",
data: seriesData,
show: true, show: true,
position: "top", lineStyle: {
itemStyle: { color: "white"
color: '#03a9f4'
},
label: {
normal: {
show: true, //开启显示
position: 'top', //柱形上方
textStyle: { //数值样式
color: '#fff'
},
formatter: '{c}%'
}
} }
}] },
}) axisLabel: {
} show: true,
}) color: 'white'
}, }
postYhzl() { },
let params = { yAxis: [{
}
if (this.superuser) {
params.gsid = this.queryParams1.gsid
} else {
params.bmid = this.queryParams1.bmid
}
yhtjQuery(params).then(res => {
if (res.success) {
let value = res.data.records ? res.data.records : [];
let seriesStyle = {
show: true, show: true,
position: "top", axisLine: {
label: { show: true,
normal: { lineStyle: {
show: true,
position: 'top',
color: "white" color: "white"
} }
},
axisLabel: {
show: true,
color: 'white'
} }
} }],
let seriesData = []; series: [{
let series = [{ name: '有效期内',
name: "隐患数量", type: 'bar',
data: [], data: yqxList,
type: "bar", label: {
itemStyle: { show: true,
color: { position: 'top', // 数字显示在柱子上方
type: 'linear', // 线性渐变 color: '#fff'
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [{
offset: 0,
color: '#5197de' // 0%处的颜色为红色
}, {
offset: 1,
color: '#08173a' // 100%处的颜色为蓝
}]
}
}
},
{
name: "隐患关闭数量",
data: [],
type: "bar",
itemStyle: {
color: {
type: 'linear', // 线性渐变
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [{
offset: 0,
color: '#db8723' // 0%处的颜色为红色
}, {
offset: 1,
color: '#11162f' // 100%处的颜色为蓝
}]
}
}
}, },
{ barWidth: '15px'
name: "超期未处理", },
data: [], {
type: "bar", name: '即将到期',
itemStyle: { type: 'bar',
color: { data: jjdqList,
type: 'linear', // 线性渐变 label: {
x: 0, show: true,
y: 0, position: 'top', // 数字显示在柱子上方
x2: 0, color: '#fff'
y2: 1,
colorStops: [{
offset: 0,
color: '#db8723' // 0%处的颜色为红色
}, {
offset: 1,
color: '#11162f' // 100%处的颜色为蓝
}]
}
}
}, },
{ barWidth: '15px'
name: "超期已处理", },
data: [], {
type: "bar", name: '超期',
itemStyle: { type: 'bar',
color: { data: cqList,
type: 'linear', // 线性渐变 label: {
x: 0, show: true,
y: 0, position: 'top', // 数字显示在柱子上方
x2: 0, color: '#fff'
y2: 1,
colorStops: [{
offset: 0,
color: '#1c7571' // 0%处的颜色为红色
}, {
offset: 1,
color: '#11162f' // 100%处的颜色为蓝
}]
}
}
}, },
], barWidth: '15px'
xAxis = []; },
seriesData[0] = { ]
...seriesStyle, };
...series[0] this.eczyj.setOption(option);
};
seriesData[1] = {
...seriesStyle,
...series[1]
};
seriesData[2] = {
...seriesStyle,
...series[2]
};
seriesData[3] = {
...seriesStyle,
...series[3]
};
value.forEach(element => {
xAxis.push(element.month + "月");
seriesData[0]["data"].push(element.allCount || 0);
seriesData[1]["data"].push(element.yclCount || 0);
seriesData[2]["data"].push(element.cqwclCount || 0);
seriesData[3]["data"].push(element.cqyclCount || 0);
});
this.setBarhart(this.yhzlChart, {
title: "隐患治理",
xAxis: xAxis,
titleShow: true,
series: seriesData
})
}
}) })
}, },
postFxpc() { inityhpc() {
let params = { let gsId = this.menusItems[this.active]['id']
let params={
} }
if (this.superuser) { if (this.superuser){
params.gsid = this.queryParams1.gsid params.gsId=gsId
} else { }else{
params.bmid = this.queryParams1.bmid params.bmId=gsId
} }
fxpcQuery(params).then(res => { this.$post('aqgl/homepage/yhpc', params).then(res => {
if (res.success) { let records = res.data.records
let value = res.data.records ? res.data.records : []; let xData = Object.keys(records)
let seriesStyle = { let yhList = []
show: true, xData.forEach(key => {
position: "top", yhList.push(records[key])
label: { })
normal: {
show: true,
position: 'top',
color: 'white'
}
}
}
let seriesData = [{
name: "全部",
data: [],
type: "bar",
itemStyle: {
color: {
type: 'linear', // 线性渐变
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [{
offset: 0,
color: '#5197de' // 0%处的颜色为红色
}, {
offset: 1,
color: '#08173a' // 100%处的颜色为蓝
}]
}
},
...seriesStyle
},
{
name: "完成",
data: [],
type: "bar",
itemStyle: {
color: {
type: 'linear', // 线性渐变
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [{
offset: 0,
color: '#db8723' // 0%处的颜色为红色
}, {
offset: 1,
color: '#11162f' // 100%处的颜色为蓝
}]
}
},
...seriesStyle
},
],
xAxis = [];
let lx = {
"D": "昨日",
"W": "本周",
"M": "本月"
}
value.forEach(element => {
xAxis.push(lx[element.lx]);
seriesData[0]["data"].push(element.allCount || 0);
seriesData[1]["data"].push(element.wcCount || 0);
});
this.setBarhart(this.rfxpcChart, {
title: "风险排查",
xAxis: xAxis,
series: seriesData
})
}
})
},
postLzgl() {
lzglQuery({
gsid: this.queryParams1.gsid
}).then(res => {
if (res.success) {
let value = res.data.records ? res.data.records : [];
let seriesStyle = {
show: true,
position: "top",
label: {
normal: {
show: true,
position: 'top',
}
}
}
let seriesStyle2 = {
show: true,
position: "top",
label: {
normal: {
show: true,
position: 'top',
formatter: "{c}%"
},
let option = {
tooltip: {
trigger: 'axis', // 触发类型为坐标轴触发
axisPointer: {
type: 'line' // 指示器类型为线
} }
} },
let seriesData = [{
name: "全部", color: ['#15c9ff', '#FF7474', '#91cc75'],
data: [], grid: {
type: "bar", top: '10%',
yAxisIndex: 0, left: '3%',
itemStyle: { right: '6%',
color: { bottom: '10%',
type: 'linear', // 线性渐变 containLabel: true,
x: 0, },
y: 0, xAxis: {
x2: 0,
y2: 1, type: 'category',
colorStops: [{ data: xData,
offset: 0,
color: '#5197de' // 0%处的颜色为红色
}, {
offset: 1,
color: '#08173a' // 100%处的颜色为蓝
}]
}
},
...seriesStyle
},
{
name: "完成",
data: [],
type: "bar",
yAxisIndex: 0,
itemStyle: {
color: {
type: 'linear', // 线性渐变
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [{
offset: 0,
color: '#db8723' // 0%处的颜色为红色
}, {
offset: 1,
color: '#11162f' // 100%处的颜色为蓝
}]
}
},
...seriesStyle
},
{
name: "完成率",
data: [],
type: "line",
yAxisIndex: 1,
itemStyle: {
color: '#049bbc'
},
...seriesStyle2
},
],
xAxis = [],
yAxis = [];
let lx = {
"D": "昨日",
"W": "本周",
"M": "本月"
};
let yAxisStyle = {
axisTick: { axisTick: {
color: "white" show: true,
}, lineStyle: {
axisLabel: { color: "white"
color: 'white' }
}, },
axisLine: { axisLine: {
show: true,
lineStyle: { lineStyle: {
color: 'white' color: "white"
}, }
}, },
splitLine: { axisLabel: {
show: false, show: true,
color: 'white' color: 'white'
} }
} },
yAxis = [{}, {}]; yAxis: [{
yAxis[0] = {
...{
name: "数量",
type: "value",
position: "left",
},
...yAxisStyle
};
yAxis[1] = {
...yAxisStyle,
...{
name: "完成率",
type: "value",
position: "right",
axisLabel: {
formatter: "{value}%"
}
}
};
value.forEach(element => {
xAxis.push(lx[element.lx]);
seriesData[0]["data"].push(element.allCount || 0);
seriesData[1]["data"].push(element.wcCount || 0);
let percent = element.allCount ? (element.wcCount / element.allCount) : 0;
seriesData[2]["data"].push(Number(parseFloat(percent * 100).toFixed(2)));
});
this.setBarhart(this.lzglChart, {
title: "履职管理",
xAxis: xAxis,
yAxis: yAxis,
series: seriesData
})
}
})
},
postYgcz() {
ygczQuery({
// gsid: this.queryParams1.gsid
}).then(res => {
if (res.success) {
let value = res.data.records ? res.data.records : [];
let seriesStyle = {
show: true, show: true,
position: "top",
label: {
normal: {
show: true,
position: 'top',
color: 'white'
}
}
};
let yAxisStyle = {
axisTick: {
color: "white",
show: false
},
axisLabel: {
color: 'white',
show: false
},
axisLine: { axisLine: {
show: false, show: true,
lineStyle: { lineStyle: {
color: 'white' color: "white"
},
},
splitLine: {
show: false,
color: 'white'
}
}
let seriesData = {
data: [],
type: "bar",
barWidth: 20,
itemStyle: {
color: "#334284"
},
...seriesStyle
} }
let xAxis = [];
value.forEach(element => {
xAxis.push(element.flName.replace('人员持证信息',''));
seriesData.data.push(element.allCount)
});
this.setBarhart(this.ygzcChart, {
title: "员工持证",
titleShow: true,
customxAxis: {
data: xAxis,
"axisLabel": {
"show": true,
"color": "white" // 设置轴标签颜色为白色
}
}, },
series: seriesData, axisLabel: {
}) show: true,
}
})
},
/* 渲染仪表盘*/
setChart(chartDom, setting) {
/* 基础配置*/
let option = {
tooltip: {
formatter: '{a} <br/>{b} : {c}%'
},
title: {
show: true,
text: setting.title || "",
bottom: 0,
left: "center",
textStyle: {
fontSize: 14,
fontWeight: 400,
align: 'center',
verticalAlign: 'middle',
color: 'white'
}
},
series: [{
axisLine: {
lineStyle: {
width: 6,
color: [
[0.25, '#FF6E76'],
[0.5, '#FDDD60'],
[0.75, '#58D9F9'],
[1, '#7CFFB2']
]
}
},
radius: '90%',
name: setting.title,
type: 'gauge',
center: ["50%", "50%"], // 仪表盘位置(圆心坐标)
progress: {
show: true
},
title: {
show: false
},
detail: {
valueAnimation: true,
formatter: '{value}',
textStyle: {
fontSize: 17
}
},
data: [{
value: setting.value,
name: setting.name
}]
}]
}
/* 渲染dom*/
chartDom.setOption(option);
chartDom.resize();
},
//渲染柱状图
setBarhart(chartDom, setting) {
/* 基础配置*/
let option = {
title: {
show: setting.titleShow || false,
text: setting.title || "",
top: 20,
left: "center",
textStyle: {
fontSize: 18,
fontWeight: 600,
align: 'center',
verticalAlign: 'middle',
color: 'white'
}
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
top: '20%',
containLabel: true
},
xAxis: setting.customxAxis || [{
type: 'category',
data: setting.xAxis,
axisTick: {
alignWithLabel: true,
color: "white"
},
axisLabel: {
color: 'white',
interval: 0, // 横轴信息全部显示
},
axisLine: {
lineStyle: {
color: 'white'
},
},
splitLine: {
show: false,
color: 'white'
}
}],
yAxis: setting.yAxis || [{
type: 'value',
axisTick: {
color: "white"
},
axisLabel: {
color: 'white'
},
axisLine: {
lineStyle: {
color: 'white' color: 'white'
}
}],
series: [{
name: '隐患数量',
type: 'bar',
data: yhList,
label: {
show: true,
position: 'top', // 数字显示在柱子上方
color: '#fff'
}, },
}, barWidth: '15px'
splitLine: { }, ]
show: false, };
color: 'white' this.eyhpc.setOption(option);
}
}],
series: setting.series || []
}
/* 渲染dom*/
chartDom.setOption(option);
chartDom.resize();
},
} })
}
</script>
<style lang="scss" scope>
.listf {
float: right;
}
.ztcxxx {
height: 60px;
width: 100%;
}
.chart {
width: 100%;
height: calc(300px - 60px - 30px);
}
.homePage {
width: 35%;
height: 100%;
}
.nodata {
background-image: url('/src/assets/image/aq.svg');
}
.lbt {
height: 100%;
width: 100%;
.lbtAll {
height: 100%;
width: 100%;
.sm {
padding-top: 16px;
padding-bottom: 26px;
display: flex;
justify-content: center;
align-items: center;
position: absolute;
height: 90px;
width: 100%;
background-color: rgba(0, 0, 0, 0.7);
z-index: 999;
bottom: 0;
overflow: hidden;
text-overflow: ellipsis;
.infor {
color: #fff;
line-height: 25px;
font-size: 14px;
}
} }
} }
}
.el-carousel__item:nth-child(2n) {
background-color: #99a9bf;
} }
</script>
.el-carousel__item:nth-child(2n+1) { <style lang="scss" scoped>
background-color: #d3dce6; .flex1 {
min-height: 0
} }
.page-homepage { .fullmain {
width: 100%; box-sizing: border-box;
height: 100%; padding: 10px;
position: relative; height: calc(100vh - 84px);
display: flex; background-image: url('./static/data08.png');
background: url('~@/assets/images/background.jpg') no-repeat 50%;
background-size: 100% 100%; background-size: 100% 100%;
.echarts_nav { .hpbody {
width: 85%;
height: 48px;
display: flex;
justify-content: space-between;
align-items: center;
position: absolute;
top: 0;
left: 3%;
.iconTable {
text-align: center;
align-items: center;
width: 100%;
height: 70%;
margin-left: .5%;
cursor: pointer;
.nav_border {
text-align: center;
height: 100%;
width: 100%;
color: #fff;
position: relative;
.dv-border-svg-container {
position: absolute;
display: block;
}
.right-top {
right: 0;
transform: rotateY(180deg);
}
.left-bottom {
bottom: 0;
transform: rotateX(180deg);
}
.right-bottom {
right: 0;
bottom: 0;
transform: rotateX(180deg) rotateY(180deg);
}
.border-box-content {
position: relative;
width: 100%;
height: 100%;
.spanTitle {
display: flex;
width: 100%;
height: 100%;
justify-content: center;
align-items: center;
.icon-zhexiantu {
margin: 0 1% 0 0;
color: #fff;
font-size: 22px;
}
}
}
}
}
}
.echart-body {
height: calc(100% - 48px);
width: 100%; width: 100%;
margin-top: 48px; height: calc(100% - 70px);
// display: flex; margin-top: 10px;
} display: flex;
.page-left {
// flex: 1;
width: 25%;
float: left;
height: 100%;
display: inline-block;
.page-left-3 { // .hpbodyItem{
width: 100%; // flex: 1;
height: 30%;
}
.page-left-4 { // }
width: 100%; .hpbodyItem:nth-child(1),
height: 40%; .hpbodyItem:nth-child(2) {
margin-right: 8px;
} }
}
.page-left-t { .bigTitle {
display: flex; position: relative;
height: 60px;
.page-fxpc { width: 100%;
flex: 1 color: #fff;
}
.page-yhhz { .menus {
flex: 1; height: 60px;
.menusItem {
font-size: 16px;
font-weight: 700;
float: left;
width: 142px;
height: 48;
margin: 5px 6px 0;
background: url(./static/dhbg.png) no-repeat;
text-align: center;
line-height: 48px;
cursor: pointer;
} }
} }
.page-left-c, .kbtime {
.page-left-b {} position: absolute;
} font-size: 20px;
font-weight: 500;
.page-center { color: #fff;
// flex: 0 0 50%; right: 5%;
width: 50%; top: 10px;
height: 100%;
display: inline-block;
.page-center-t {
width: 100%;
height: 70%;
.dv-border-box-1 {
position: relative;
width: 100%;
height: 100%;
.border {
position: absolute;
display: block;
}
.right-top {
right: 0;
transform: rotateY(180deg);
}
.left-bottom {
bottom: 0;
transform: rotateX(180deg);
}
.right-bottom {
right: 0;
bottom: 0;
transform: rotateX(180deg) rotateY(180deg);
}
.border-box-content {
position: relative;
width: 100%;
height: 100%;
}
.realPicture-min {
width: 95%;
height: 95%;
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
margin: auto;
.realImg {
width: 100%;
height: 100%;
background-repeat: no-repeat;
display: block;
background: url('~@/assets/images/gs.jpg');
background-size: 100% 100%;
}
}
}
} }
.page-center-b { .menusItemActive {
width: 100%; color: #3279d5;
height: 30%;
} }
} }
}
.page-right { .data-box1 {
// flex:1; position: relative;
width: 25%; border: 2px solid #032d60;
float: right; -webkit-box-shadow: #07417a 0px 0px 10px;
height: 100%; -moz-box-shadow: #07417a 0px 0px 10px;
box-shadow: inset 0 0 30px #07417a;
/*position: relative;*/
}
.page-right-t, .topL {
.page-right-b { width: 20px;
width: 100%; height: 20px;
height: 30%; border-top-width: 2px;
} border-top-color: #26c6f0;
border-top-style: solid;
border-left-width: 2px;
border-left-color: #26c6f0;
border-left-style: solid;
position: absolute;
top: -2px;
left: -2px;
}
.page-right-c { .topR {
width: 100%; width: 20px;
height: 40%; height: 20px;
} border-top-width: 2px;
} border-top-color: #26c6f0;
border-top-style: solid;
border-right-width: 2px;
border-right-color: #26c6f0;
border-right-style: solid;
position: absolute;
top: -2px;
right: -2px;
}
.chart-auto { .bottomL {
width: 100%; width: 20px;
height: 100%; height: 20px;
} border-bottom-width: 2px;
border-bottom-color: #26c6f0;
border-bottom-style: solid;
border-left-width: 2px;
border-left-color: #26c6f0;
border-left-style: solid;
position: absolute;
bottom: -2px;
left: -2px;
}
.yhzl-big-box { .bottomR {
width: 100%; width: 20px;
height: 100%; height: 20px;
color: #fff; border-bottom-width: 2px;
background: url('~@/assets/images/bc.png') no-repeat rgba(3, 15, 42, .7) 100% .5%; border-bottom-color: #26c6f0;
background-size: 100% 13%; border-bottom-style: solid;
border-right-width: 2px;
.yhzl-big-box-title { border-right-color: #26c6f0;
width: 100%; border-right-style: solid;
height: 13%; position: absolute;
display: block; bottom: -2px;
font-size: 16px; right: -2px;
font-weight: 700; }
padding: .5% 0 0 5%;
box-sizing: border-box;
}
.echarts { .data-title-left,
width: 100%; .data-title-right {
height: 83%; color: #105eda;
margin: 1% 0 0 0; }
}
.el-carousel__container { .data-title1 {
height: 100% !important; width: 100px;
} margin: -14px auto 0 auto;
} color: #83c7e3;
font-size: 16px;
letter-spacing: 2px;
font-weight: 600
}
.hpbodyItem01 {
width: 100%;
height: 33.33%;
}
::v-deep .el-progress__text {
font-size: 36px !important;
color: #55d5c6 !important;
text-shadow: 0 0 .5rem #00d8ff;
}
.textDown {
text-shadow: 0 0 .5rem #00d8ff;
}
.lbbt {
height: 4vh;
width: 100%;
font-size: .9vw;
display: flex;
line-height: 4vh;
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%;
} }
</style> </style>
src/views/threeViolations/homePage/index_bc.vue 0 → 100644
View file @ 3b3bd6a9
<template>
<!-- 外层排版-->
<!-- <div class="home-page" id="homePageBody" :style="{ height: height + 'px' }"> -->
<div class="min_full">
<div class="home-page full" ref='homePageBody' id="homePageBody" style="overflow: hidden;">
<div class="page-homepage" id="homePage" @dblclick="handleDoubleClick" style="">
<div class="echarts_nav" id="echarts_nav">
<div class="iconTable" v-for="item in gsList" :key="item.id" @click="bindGsid(item)">
<div class="dv-border-box-10 nav_border"
:style="{color:(superuser?(queryParams1.gsid==item.id):(queryParams1.bmid==item.id))?activeStyle.color:'', boxShadow:(superuser?(queryParams1.gsid==item.id):(queryParams1.bmid==item.id))?'#00bfff 0px 0px 25px 3px inset':'#204b85 0px 0px 25px 3px inset'}">
<svg width="131" height="37" class="dv-border-svg-container">
<polygon fill="transparent" points="
4, 0 127, 0 131, 4 131, 33 127, 37
4, 37 0, 33 0, 4
"></polygon>
</svg><svg width="150px" height="150px" class="left-top dv-border-svg-container">
<polygon points="40, 0 5, 0 0, 5 0, 16 3, 19 3, 7 7, 3 35, 3"
:fill="(superuser?(queryParams1.gsid==item.id):(queryParams1.bmid==item.id))?'#00BFFF':'#3377CB'"></polygon>
</svg>
<svg width="150px" height="150px" class="right-top dv-border-svg-container">
<polygon points="40, 0 5, 0 0, 5 0, 16 3, 19 3, 7 7, 3 35, 3"
:fill="(superuser?(queryParams1.gsid==item.id):(queryParams1.bmid==item.id))?'#00BFFF':'#3377CB'"></polygon>
</svg>
<svg width="150px" height="150px" class="left-bottom dv-border-svg-container">
<polygon points="40, 0 5, 0 0, 5 0, 16 3, 19 3, 7 7, 3 35, 3"
:fill="(superuser?(queryParams1.gsid==item.id):(queryParams1.bmid==item.id))?'#00BFFF':'#3377CB'"></polygon>
</svg><svg width="150px" height="150px" class="right-bottom dv-border-svg-container">
<polygon points="40, 0 5, 0 0, 5 0, 16 3, 19 3, 7 7, 3 35, 3"
:fill="(superuser?(queryParams1.gsid==item.id):(queryParams1.bmid==item.id))?'#00BFFF':'#3377CB'"></polygon>
</svg>
<div class="border-box-content"><span class="spanTitle">
<i class="iconfont icon-zhexiantu"></i> {{item.bmmc}} </span>
</div>
</div>
</div>
</div>
<div class="echart-body">
<div class="page-left">
<div class="page-left-t page-left-3">
<div class="page-fxpc">
<div id="fxpcChart" class="chart-auto"></div>
</div>
<div class="page-yhhz">
<div id="yhclChart" class="chart-auto"></div>
</div>
</div>
<div class="page-left-c page-left-4">
<div class="yhzl-big-box">
<div class="yhzl-big-box-title" style="padding-top: 1.5%;">违规行为</div>
<div class="echarts">
<div class="lbt" v-if="showList.length > 0">
<el-carousel style="height: 100%;">
<el-carousel-item v-for="(item, index) in showList" :key="item.id + index">
<div class="lbtAll">
<div class="sm">
<el-tooltip :content="`${item.gsName}${item.bzName || ''}:${item.wzr}:${item.wzxw}`"
placement="top">
<span class='infor'>
{{ `${item.gsName}${item.bzName || ''}的${item.wzr}做出违章行为:${item.wzxw}` }}
</span>
</el-tooltip>
</div>
<el-image style="width: 100%; height: 100%" :src="`${baseurl}/api/file/${item.filePath}`"
fit="fit"></el-image>
</div>
</el-carousel-item>
</el-carousel>
</div>
<div style="height:100%;display: flex;align-items: center;justify-content: center;position: relative;"
class="lbt" v-else>
<span
style="position: absolute;bottom: 50px;line-height: 40px;font-size: 18px;font-weight: 800;color:#787878">本月暂无违规记录。</span>
<img style="height:150px;width: 200px;" :src="aqpng" alt="" srcset="">
</div>
</div>
</div>
</div>
<div class="page-left-b page-left-3">
<div class="yhzl-big-box">
<div v-echartResize="()=>{
fxpcChart.resize();
yhclChart.resize();
yjylChart.resize();
yhzlChart.resize();
rfxpcChart.resize();
lzglChart.resize();
ygzcChart.resize();
}" id="yjylChart" class="chart-auto"></div>
</div>
</div>
</div>
<div class="page-center">
<div class="page-center-t">
<div class="gs-picture" style="width: 100%;height: 100%;">
<div class="dv-border-box-1">
<svg width="682" height="379" class="border">
<polygon fill="transparent" points="10, 27 10, 352 13, 355 13, 358 24, 368
38, 368 41, 371 73, 371 75, 369 81, 369
85, 373 597, 373 601, 369 607, 369
609, 371 641, 371 644, 368
658, 368 669, 358 669, 355
672, 352 672, 27 669, 25 669, 21
658, 11 644, 11 641, 8 609, 8 607, 10
601, 10 597, 6 85, 6 81, 10 75, 10 73, 8 41, 8 38, 11 24, 11 13, 21 13, 24"></polygon>
</svg>
<svg width="150px" height="150px" class="left-top border">
<polygon
points="6,66 6,18 12,12 18,12 24,6 27,6 30,9 36,9 39,6 84,6 81,9 75,9 73.2,7 40.8,7 37.8,10.2 24,10.2 12,21 12,24 9,27 9,51 7.8,54 7.8,63"
fill="#4fd2dd">
<animate attributeName="fill" values="#4fd2dd;#235fa7;#4fd2dd" dur="0.5s" begin="0s"
repeatCount="indefinite"></animate>
</polygon>
<polygon points="27.599999999999998,4.8 38.4,4.8 35.4,7.8 30.599999999999998,7.8" fill="#235fa7">
<animate attributeName="fill" values="#235fa7;#4fd2dd;#235fa7" dur="0.5s" begin="0s"
repeatCount="indefinite"></animate>
</polygon>
<polygon
points="9,54 9,63 7.199999999999999,66 7.199999999999999,75 7.8,78 7.8,110 8.4,110 8.4,66 9.6,66 9.6,54"
fill="#4fd2dd">
<animate attributeName="fill" values="#4fd2dd;#235fa7;transparent" dur="1s" begin="0s"
repeatCount="indefinite"></animate>
</polygon>
</svg><svg width="150px" height="150px" class="right-top border">
<polygon
points="6,66 6,18 12,12 18,12 24,6 27,6 30,9 36,9 39,6 84,6 81,9 75,9 73.2,7 40.8,7 37.8,10.2 24,10.2 12,21 12,24 9,27 9,51 7.8,54 7.8,63"
fill="#4fd2dd">
<animate attributeName="fill" values="#4fd2dd;#235fa7;#4fd2dd" dur="0.5s" begin="0s"
repeatCount="indefinite"></animate>
</polygon>
<polygon points="27.599999999999998,4.8 38.4,4.8 35.4,7.8 30.599999999999998,7.8" fill="#235fa7">
<animate attributeName="fill" values="#235fa7;#4fd2dd;#235fa7" dur="0.5s" begin="0s"
repeatCount="indefinite"></animate>
</polygon>
<polygon
points="9,54 9,63 7.199999999999999,66 7.199999999999999,75 7.8,78 7.8,110 8.4,110 8.4,66 9.6,66 9.6,54"
fill="#4fd2dd">
<animate attributeName="fill" values="#4fd2dd;#235fa7;transparent" dur="1s" begin="0s"
repeatCount="indefinite"></animate>
</polygon>
</svg><svg width="150px" height="150px" class="left-bottom border">
<polygon
points="6,66 6,18 12,12 18,12 24,6 27,6 30,9 36,9 39,6 84,6 81,9 75,9 73.2,7 40.8,7 37.8,10.2 24,10.2 12,21 12,24 9,27 9,51 7.8,54 7.8,63"
fill="#4fd2dd">
<animate attributeName="fill" values="#4fd2dd;#235fa7;#4fd2dd" dur="0.5s" begin="0s"
repeatCount="indefinite"></animate>
</polygon>
<polygon points="27.599999999999998,4.8 38.4,4.8 35.4,7.8 30.599999999999998,7.8" fill="#235fa7">
<animate attributeName="fill" values="#235fa7;#4fd2dd;#235fa7" dur="0.5s" begin="0s"
repeatCount="indefinite"></animate>
</polygon>
<polygon
points="9,54 9,63 7.199999999999999,66 7.199999999999999,75 7.8,78 7.8,110 8.4,110 8.4,66 9.6,66 9.6,54"
fill="#4fd2dd">
<animate attributeName="fill" values="#4fd2dd;#235fa7;transparent" dur="1s" begin="0s"
repeatCount="indefinite"></animate>
</polygon>
</svg>
<svg width="150px" height="150px" class="right-bottom border">
<polygon
points="6,66 6,18 12,12 18,12 24,6 27,6 30,9 36,9 39,6 84,6 81,9 75,9 73.2,7 40.8,7 37.8,10.2 24,10.2 12,21 12,24 9,27 9,51 7.8,54 7.8,63"
fill="#4fd2dd">
<animate attributeName="fill" values="#4fd2dd;#235fa7;#4fd2dd" dur="0.5s" begin="0s"
repeatCount="indefinite"></animate>
</polygon>
<polygon points="27.599999999999998,4.8 38.4,4.8 35.4,7.8 30.599999999999998,7.8" fill="#235fa7">
<animate attributeName="fill" values="#235fa7;#4fd2dd;#235fa7" dur="0.5s" begin="0s"
repeatCount="indefinite"></animate>
</polygon>
<polygon
points="9,54 9,63 7.199999999999999,66 7.199999999999999,75 7.8,78 7.8,110 8.4,110 8.4,66 9.6,66 9.6,54"
fill="#4fd2dd">
<animate attributeName="fill" values="#4fd2dd;#235fa7;transparent" dur="1s" begin="0s"
repeatCount="indefinite"></animate>
</polygon>
</svg>
<div class="border-box-content">
<div class="realPicture-min">
<div class="realImg">
</div>
</div>
</div>
</div>
</div>
</div>
<div class="page-center-b">
<div class="yhzl-big-box">
<!-- <div class="yhzl-big-box-title">隐患治理</div>
<div class="echarts"> -->
<div id="yhzlChart" class="chart-auto"></div>
<!-- </div> -->
</div>
</div>
</div>
<div class="page-right">
<div class="page-right-t">
<div class="yhzl-big-box">
<div class="yhzl-big-box-title">风险排查</div>
<div class="echarts">
<div id="rfxpcChart" v-echartResize="()=>{
}" class="chart-auto"></div>
</div>
</div>
</div>
<div class="page-right-c">
<div class="yhzl-big-box">
<div class="yhzl-big-box-title" style="padding-top: 1.5%;">履职管理</div>
<div class="echarts">
<div id="lzglChart" class="chart-auto"></div>
</div>
</div>
</div>
<div class="page-right-b">
<div class="yhzl-big-box" style="background-color: rgba(3,15,42,.7)">
<div id="ygzcChart" class="chart-auto"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
const baseurl = process.env.VUE_APP_BASE_API
import {
tableMixin
} from 'common'
import vueSeamlessScroll from 'vue-seamless-scroll'
import * as echarts from 'echarts';
import aqpng from '@/assets/images/aq.png';
import gspicture from '@/assets/images/gs.jpg';
import {
doQuery as doQueryfx
} from "@/api/riskPrecontrol/riskAnalysis.js";
import {
queryYhsbtj as doQueryyh
} from "@/api/dangerManagement/yhslhz.js";
import {
doQuery as doQueryDcl
} from "@/api/dangerManagement/enterSafetyRecords.js"
import {
queryBglxFile
} from '@/api/threeViolations/enterTV.js';
import {
doQueryWithFile
} from '@/api/basicData/ryq.js';
import {
fxpcQuery,
lzglQuery,
ygczQuery,
yhtjQuery,
yjylQuery,
gsQuery
} from '@/api/home/homepage.js'
import ryqno from '@/assets/images/ryqno.png'
var allUserInfo = JSON.parse(localStorage.getItem('allUserInfo'));
export default {
components: {
vueSeamlessScroll
},
// mixins: [tableMixin],
computed: {
gsid() {
return this.queryParams1.gsid
},
bmid() {
return this.queryParams1.bmid
},
},
watch: {
gsid(val) {
/* 监听公司id*/
if (val) {
this.queryParams2.gsid = this.queryParams1.gsid
this.doQueryfx()
this.doQueryyh();
this.postYhzl(); //隐患治理
this.postFxpc(); //风险排查
this.postLzgl(); //履职管理
this.postYgcz(); //员工持证
}
},
bmid(val) {
/* 监听公司id*/
if (val) {
this.queryParams2.bmid = this.queryParams1.bmid
this.doQueryfx()
this.doQueryyh();
this.postYhzl(); //隐患治理
this.postFxpc(); //风险排查
this.postLzgl(); //履职管理
this.postYgcz(); //员工持证
}
},
height(value) {
document.addEventListener('fullscreenchange', (event) => {
if (!document.fullscreenElement) {
// 全屏已退出
console.log('Exited full screen');
}
});
// setTimeout(() => {
// this.fxpcChart.resize();
// this.yhclChart.resize();
// this.yjylChart.resize();
// this.yhzlChart.resize();
// this.rfxpcChart.resize();
// this.lzglChart.resize();
// this.ygzcChart.resize();
// this.$nextTick(() => {
// this.height=document.getElementById('homePageBody').parentNode.clientHeight;
// this.carHeight=this.height*0.4-60+'px';
// })
// }, 50);
}
},
activated() {
},
async mounted() {
/* 获取当前登录人的信息*/
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=''
}
// debugger
this.postGs();
this.$nextTick(() => {
this.height = document.getElementById('homePageBody').parentNode.clientHeight;
this.carHeight = this.height * 0.4 - 60 + 'px';
})
window.addEventListener('resize', function(params) {
})
this.fxpcChart = echarts.init(document.getElementById('fxpcChart'))
this.yhclChart = echarts.init(document.getElementById('yhclChart'))
this.yjylChart = echarts.init(document.getElementById('yjylChart'));
this.yhzlChart = echarts.init(document.getElementById('yhzlChart'));
this.rfxpcChart = echarts.init(document.getElementById('rfxpcChart'));
this.lzglChart = echarts.init(document.getElementById('lzglChart'));
this.ygzcChart = echarts.init(document.getElementById('ygzcChart'));
doQueryWithFile({}).then(res => {
this.showListRy = res.data.records || []
})
queryBglxFile({}).then(res => {
this.showList = res.data.records || []
// this.showList=[]
})
this.postYjyl(); //应急演练
},
data() {
return {
orgname: allUserInfo.orgname,
superuser: allUserInfo.superuser,
activeStyle: {
color: "rgb(0, 191, 255)",
boxShadow: "rgb(0, 191, 255) 0px 0px 25px 3px inset;"
},
gsList: [],
height: 300,
showListRy: [],
queryParams1: {
grouptype: 'GS',
rwlx: 'W',
gsid: '',
bmid: '',
ksrq: new Date().getTime(),
jsrq: new Date().getTime()
},
queryParams2: {
hzfs: 'GS',
gsid: '',
bmid: '',
ksrq: null,
jsrq: new Date().getTime()
},
queryParams: {
queryType: 'YHWCL'
// zt:'S'
},
carHeight: "290px",
ryqno: ryqno,
aqpng: aqpng,
gspicture: gspicture,
baseurl: baseurl,
showList: [],
/* dom*/
fxpcChart: null,
yhclChart: null,
yjylChart: null,
yhzlChart: null,
rfxpcChart: null,
lzglChart: null,
ygzcChart: null
}
},
methods: {
handleDoubleClick() {
this.fullScreen(document.getElementById('homePage'));
setTimeout(() => {
this.fxpcChart.resize();
this.yhclChart.resize();
this.yjylChart.resize();
this.yhzlChart.resize();
this.rfxpcChart.resize();
this.lzglChart.resize();
this.ygzcChart.resize();
this.$nextTick(() => {
this.height = document.getElementById('homePageBody').parentNode.clientHeight;
this.carHeight = this.height * 0.4 - 60 + 'px';
})
}, 50);
},
fullScreen(element) {
const elem = element || document.documentElement;
if (elem.webkitRequestFullScreen) {
elem.webkitRequestFullScreen();
} else if (elem.mozRequestFullScreen) {
elem.mozRequestFullScreen();
} else if (elem.requestFullScreen) {
elem.requestFullscreen();
} else if (elem.msExitFullscreen) {
elem.msExitFullscreen();
} else if (elem.msRequestFullscreen) {
elem.msRequestFullscreen();
} else if (typeof window.ActiveXObject !== "undefined") { //for Internet Explorer
var wscript = new ActiveXObject("WScript.Shell");
if (wscript !== null) {
wscript.SendKeys("{F11}");
}
}
},
bindGsid(item) {
if (this.superuser) {
delete this.queryParams1.bmid
this.queryParams1.gsid = item.id
} else {
delete this.queryParams1.gsid
this.queryParams1.bmid = item.id
}
},
postGs() {
gsQuery().then(res => {
if (res.success) {
this.gsList = res.data.records || [];
/* 判定是否是superuser*/
console.log(this, 'this')
if (this.superuser) {
this.queryParams1.gsid = this.gsList[0]["id"];
} else {
delete this.queryParams1.gsid
this.queryParams1.bmid = this.orgname;
}
}
})
},
doQueryfx() {
if (this.queryParams1.rwlx == 'W') {
this.queryParams1.ksrq = new Date(new Date(this.getFirstWeek()).Format('yyyy/MM/dd') + " 00:00:00").getTime();
this.queryParams1.jsrq = new Date(new Date(this.getlastWeek()).Format('yyyy/MM/dd') + " 23:59:59").getTime();
} else if (this.queryParams1.rwlx == 'D') {
this.queryParams1.ksrq = new Date().getTime();
this.queryParams1.jsrq = new Date().getTime();
} else {
const today = new Date();
today.setDate(1);
today.setHours(0, 0, 0, 0);
const timestamp = today.getTime();
this.queryParams1.ksrq = timestamp;
this.queryParams1.jsrq = new Date().getTime();
}
if (!this.superuser) {
delete this.queryParams1.grouptype
this.queryParams1.hzfs = 'BM'
}
doQueryfx(this.queryParams1).then(res => {
if (res.success) {
let value
if (res.data.records[0]) {
value = res.data.records[0].wcPercent || 0
} else {
value = 0
}
this.setChart(this.fxpcChart, {
name: '风险排查率',
title: '风险排查',
value: value
})
}
})
},
getFirstWeek() {
let nowDate = new Date();
let first = nowDate.getDate() - nowDate.getDay() +
1; //getDate()从nowDate对象返回一个月中的某一天;getDay()从nowDate对象返回一周中的某一天
let firstDate = new Date(nowDate.setDate(first))
.toUTCString(); //setDate()设置nowDate对象中月的某一天;toUTCString()根据世界时，把nowDate对象转换为字符串。
console.log(firstDate);
return firstDate;
},
getlastWeek() {
let nowDate = new Date();
let first = nowDate.getDate() - nowDate.getDay() + 1;
let last = first + 6; // last day is the first day + 6
let lastday = new Date(nowDate.setDate(last)).toUTCString();
return lastday
},
doQueryyh() {
if(this.superuser){
this.queryParams2.hzfs='GS'
}else{
this.queryParams2.hzfs='BM'
}
doQueryyh(this.queryParams2).then(res => {
if (res.success) {
let value
if (res.data.records[0]) {
let data1 = res.data.records[0] ? res.data.records[0].wclCount : 0;
let data2 = res.data.records[0] ? res.data.records[0].yclCount : 0;
value = Number(parseFloat(data2 / (data1 + data2)).toFixed(4)) * 100;
// value=res.data.records[0].wcPercent||0
} else {
value = 0
}
this.setChart(this.yhclChart, {
name: '隐患整改完成率',
title: '隐患整改',
value: value
})
}
})
},
postYjyl() {
yjylQuery().then(res => {
if (res.success) {
let value = res.data.records ? res.data.records : [];
let seriesData = [],
xAxis = [];
value.forEach(element => {
xAxis.push(element.bmName || "");
seriesData.push(Number(parseFloat((element.wcl || 0) * 100).toFixed(2)));
});
this.setBarhart(this.yjylChart, {
title: "应急演练",
xAxis: xAxis,
titleShow: true,
yAxis: [{
type: 'value',
axisTick: {
color: "white"
},
axisLabel: {
color: 'white',
formatter: "{value}%",
},
axisLine: {
lineStyle: {
color: 'white'
},
},
splitLine: {
show: false,
color: 'white'
}
}],
series: [{
name: "完成率",
type: 'bar',
barWidth: "60%",
data: seriesData,
show: true,
position: "top",
itemStyle: {
color: '#03a9f4'
},
label: {
normal: {
show: true, //开启显示
position: 'top', //柱形上方
textStyle: { //数值样式
color: '#fff'
},
formatter: '{c}%'
}
}
}]
})
}
})
},
postYhzl() {
let params = {
}
if (this.superuser) {
params.gsid = this.queryParams1.gsid
} else {
params.bmid = this.queryParams1.bmid
}
yhtjQuery(params).then(res => {
if (res.success) {
let value = res.data.records ? res.data.records : [];
let seriesStyle = {
show: true,
position: "top",
label: {
normal: {
show: true,
position: 'top',
color: "white"
}
}
}
let seriesData = [];
let series = [{
name: "隐患数量",
data: [],
type: "bar",
itemStyle: {
color: {
type: 'linear', // 线性渐变
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [{
offset: 0,
color: '#5197de' // 0%处的颜色为红色
}, {
offset: 1,
color: '#08173a' // 100%处的颜色为蓝
}]
}
}
},
{
name: "隐患关闭数量",
data: [],
type: "bar",
itemStyle: {
color: {
type: 'linear', // 线性渐变
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [{
offset: 0,
color: '#db8723' // 0%处的颜色为红色
}, {
offset: 1,
color: '#11162f' // 100%处的颜色为蓝
}]
}
}
},
{
name: "超期未处理",
data: [],
type: "bar",
itemStyle: {
color: {
type: 'linear', // 线性渐变
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [{
offset: 0,
color: '#db8723' // 0%处的颜色为红色
}, {
offset: 1,
color: '#11162f' // 100%处的颜色为蓝
}]
}
}
},
{
name: "超期已处理",
data: [],
type: "bar",
itemStyle: {
color: {
type: 'linear', // 线性渐变
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [{
offset: 0,
color: '#1c7571' // 0%处的颜色为红色
}, {
offset: 1,
color: '#11162f' // 100%处的颜色为蓝
}]
}
}
},
],
xAxis = [];
seriesData[0] = {
...seriesStyle,
...series[0]
};
seriesData[1] = {
...seriesStyle,
...series[1]
};
seriesData[2] = {
...seriesStyle,
...series[2]
};
seriesData[3] = {
...seriesStyle,
...series[3]
};
value.forEach(element => {
xAxis.push(element.month + "月");
seriesData[0]["data"].push(element.allCount || 0);
seriesData[1]["data"].push(element.yclCount || 0);
seriesData[2]["data"].push(element.cqwclCount || 0);
seriesData[3]["data"].push(element.cqyclCount || 0);
});
this.setBarhart(this.yhzlChart, {
title: "隐患治理",
xAxis: xAxis,
titleShow: true,
series: seriesData
})
}
})
},
postFxpc() {
let params = {
}
if (this.superuser) {
params.gsid = this.queryParams1.gsid
} else {
params.bmid = this.queryParams1.bmid
}
fxpcQuery(params).then(res => {
if (res.success) {
let value = res.data.records ? res.data.records : [];
let seriesStyle = {
show: true,
position: "top",
label: {
normal: {
show: true,
position: 'top',
color: 'white'
}
}
}
let seriesData = [{
name: "全部",
data: [],
type: "bar",
itemStyle: {
color: {
type: 'linear', // 线性渐变
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [{
offset: 0,
color: '#5197de' // 0%处的颜色为红色
}, {
offset: 1,
color: '#08173a' // 100%处的颜色为蓝
}]
}
},
...seriesStyle
},
{
name: "完成",
data: [],
type: "bar",
itemStyle: {
color: {
type: 'linear', // 线性渐变
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [{
offset: 0,
color: '#db8723' // 0%处的颜色为红色
}, {
offset: 1,
color: '#11162f' // 100%处的颜色为蓝
}]
}
},
...seriesStyle
},
],
xAxis = [];
let lx = {
"D": "昨日",
"W": "本周",
"M": "本月"
}
value.forEach(element => {
xAxis.push(lx[element.lx]);
seriesData[0]["data"].push(element.allCount || 0);
seriesData[1]["data"].push(element.wcCount || 0);
});
this.setBarhart(this.rfxpcChart, {
title: "风险排查",
xAxis: xAxis,
series: seriesData
})
}
})
},
postLzgl() {
lzglQuery({
gsid: this.queryParams1.gsid
}).then(res => {
if (res.success) {
let value = res.data.records ? res.data.records : [];
let seriesStyle = {
show: true,
position: "top",
label: {
normal: {
show: true,
position: 'top',
}
}
}
let seriesStyle2 = {
show: true,
position: "top",
label: {
normal: {
show: true,
position: 'top',
formatter: "{c}%"
},
}
}
let seriesData = [{
name: "全部",
data: [],
type: "bar",
yAxisIndex: 0,
itemStyle: {
color: {
type: 'linear', // 线性渐变
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [{
offset: 0,
color: '#5197de' // 0%处的颜色为红色
}, {
offset: 1,
color: '#08173a' // 100%处的颜色为蓝
}]
}
},
...seriesStyle
},
{
name: "完成",
data: [],
type: "bar",
yAxisIndex: 0,
itemStyle: {
color: {
type: 'linear', // 线性渐变
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [{
offset: 0,
color: '#db8723' // 0%处的颜色为红色
}, {
offset: 1,
color: '#11162f' // 100%处的颜色为蓝
}]
}
},
...seriesStyle
},
{
name: "完成率",
data: [],
type: "line",
yAxisIndex: 1,
itemStyle: {
color: '#049bbc'
},
...seriesStyle2
},
],
xAxis = [],
yAxis = [];
let lx = {
"D": "昨日",
"W": "本周",
"M": "本月"
};
let yAxisStyle = {
axisTick: {
color: "white"
},
axisLabel: {
color: 'white'
},
axisLine: {
lineStyle: {
color: 'white'
},
},
splitLine: {
show: false,
color: 'white'
}
}
yAxis = [{}, {}];
yAxis[0] = {
...{
name: "数量",
type: "value",
position: "left",
},
...yAxisStyle
};
yAxis[1] = {
...yAxisStyle,
...{
name: "完成率",
type: "value",
position: "right",
axisLabel: {
formatter: "{value}%"
}
}
};
value.forEach(element => {
xAxis.push(lx[element.lx]);
seriesData[0]["data"].push(element.allCount || 0);
seriesData[1]["data"].push(element.wcCount || 0);
let percent = element.allCount ? (element.wcCount / element.allCount) : 0;
seriesData[2]["data"].push(Number(parseFloat(percent * 100).toFixed(2)));
});
this.setBarhart(this.lzglChart, {
title: "履职管理",
xAxis: xAxis,
yAxis: yAxis,
series: seriesData
})
}
})
},
postYgcz() {
ygczQuery({
// gsid: this.queryParams1.gsid
}).then(res => {
if (res.success) {
let value = res.data.records ? res.data.records : [];
let seriesStyle = {
show: true,
position: "top",
label: {
normal: {
show: true,
position: 'top',
color: 'white'
}
}
};
let yAxisStyle = {
axisTick: {
color: "white",
show: false
},
axisLabel: {
color: 'white',
show: false
},
axisLine: {
show: false,
lineStyle: {
color: 'white'
},
},
splitLine: {
show: false,
color: 'white'
}
}
let seriesData = {
data: [],
type: "bar",
barWidth: 20,
itemStyle: {
color: "#334284"
},
...seriesStyle
}
let xAxis = [];
value.forEach(element => {
xAxis.push(element.flName.replace('人员持证信息',''));
seriesData.data.push(element.allCount)
});
this.setBarhart(this.ygzcChart, {
title: "员工持证",
titleShow: true,
customxAxis: {
data: xAxis,
"axisLabel": {
"show": true,
"color": "white" // 设置轴标签颜色为白色
}
},
series: seriesData,
})
}
})
},
/* 渲染仪表盘*/
setChart(chartDom, setting) {
/* 基础配置*/
let option = {
tooltip: {
formatter: '{a} <br/>{b} : {c}%'
},
title: {
show: true,
text: setting.title || "",
bottom: 0,
left: "center",
textStyle: {
fontSize: 14,
fontWeight: 400,
align: 'center',
verticalAlign: 'middle',
color: 'white'
}
},
series: [{
axisLine: {
lineStyle: {
width: 6,
color: [
[0.25, '#FF6E76'],
[0.5, '#FDDD60'],
[0.75, '#58D9F9'],
[1, '#7CFFB2']
]
}
},
radius: '90%',
name: setting.title,
type: 'gauge',
center: ["50%", "50%"], // 仪表盘位置(圆心坐标)
progress: {
show: true
},
title: {
show: false
},
detail: {
valueAnimation: true,
formatter: '{value}',
textStyle: {
fontSize: 17
}
},
data: [{
value: setting.value,
name: setting.name
}]
}]
}
/* 渲染dom*/
chartDom.setOption(option);
chartDom.resize();
},
//渲染柱状图
setBarhart(chartDom, setting) {
/* 基础配置*/
let option = {
title: {
show: setting.titleShow || false,
text: setting.title || "",
top: 20,
left: "center",
textStyle: {
fontSize: 18,
fontWeight: 600,
align: 'center',
verticalAlign: 'middle',
color: 'white'
}
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
top: '20%',
containLabel: true
},
xAxis: setting.customxAxis || [{
type: 'category',
data: setting.xAxis,
axisTick: {
alignWithLabel: true,
color: "white"
},
axisLabel: {
color: 'white',
interval: 0, // 横轴信息全部显示
},
axisLine: {
lineStyle: {
color: 'white'
},
},
splitLine: {
show: false,
color: 'white'
}
}],
yAxis: setting.yAxis || [{
type: 'value',
axisTick: {
color: "white"
},
axisLabel: {
color: 'white'
},
axisLine: {
lineStyle: {
color: 'white'
},
},
splitLine: {
show: false,
color: 'white'
}
}],
series: setting.series || []
}
/* 渲染dom*/
chartDom.setOption(option);
chartDom.resize();
},
}
}
</script>
<style lang="scss" scope>
.listf {
float: right;
}
.ztcxxx {
height: 60px;
width: 100%;
}
.chart {
width: 100%;
height: calc(300px - 60px - 30px);
}
.homePage {
width: 35%;
height: 100%;
}
.nodata {
background-image: url('/src/assets/image/aq.svg');
}
.lbt {
height: 100%;
width: 100%;
.lbtAll {
height: 100%;
width: 100%;
.sm {
padding-top: 16px;
padding-bottom: 26px;
display: flex;
justify-content: center;
align-items: center;
position: absolute;
height: 90px;
width: 100%;
background-color: rgba(0, 0, 0, 0.7);
z-index: 999;
bottom: 0;
overflow: hidden;
text-overflow: ellipsis;
.infor {
color: #fff;
line-height: 25px;
font-size: 14px;
}
}
}
}
.el-carousel__item:nth-child(2n) {
background-color: #99a9bf;
}
.el-carousel__item:nth-child(2n+1) {
background-color: #d3dce6;
}
.page-homepage {
width: 100%;
height: 100%;
position: relative;
display: flex;
background: url('~@/assets/images/background.jpg') no-repeat 50%;
background-size: 100% 100%;
.echarts_nav {
width: 85%;
height: 48px;
display: flex;
justify-content: space-between;
align-items: center;
position: absolute;
top: 0;
left: 3%;
.iconTable {
text-align: center;
align-items: center;
width: 100%;
height: 70%;
margin-left: .5%;
cursor: pointer;
.nav_border {
text-align: center;
height: 100%;
width: 100%;
color: #fff;
position: relative;
.dv-border-svg-container {
position: absolute;
display: block;
}
.right-top {
right: 0;
transform: rotateY(180deg);
}
.left-bottom {
bottom: 0;
transform: rotateX(180deg);
}
.right-bottom {
right: 0;
bottom: 0;
transform: rotateX(180deg) rotateY(180deg);
}
.border-box-content {
position: relative;
width: 100%;
height: 100%;
.spanTitle {
display: flex;
width: 100%;
height: 100%;
justify-content: center;
align-items: center;
.icon-zhexiantu {
margin: 0 1% 0 0;
color: #fff;
font-size: 22px;
}
}
}
}
}
}
.echart-body {
height: calc(100% - 48px);
width: 100%;
margin-top: 48px;
// display: flex;
}
.page-left {
// flex: 1;
width: 25%;
float: left;
height: 100%;
display: inline-block;
.page-left-3 {
width: 100%;
height: 30%;
}
.page-left-4 {
width: 100%;
height: 40%;
}
.page-left-t {
display: flex;
.page-fxpc {
flex: 1
}
.page-yhhz {
flex: 1;
}
}
.page-left-c,
.page-left-b {}
}
.page-center {
// flex: 0 0 50%;
width: 50%;
height: 100%;
display: inline-block;
.page-center-t {
width: 100%;
height: 70%;
.dv-border-box-1 {
position: relative;
width: 100%;
height: 100%;
.border {
position: absolute;
display: block;
}
.right-top {
right: 0;
transform: rotateY(180deg);
}
.left-bottom {
bottom: 0;
transform: rotateX(180deg);
}
.right-bottom {
right: 0;
bottom: 0;
transform: rotateX(180deg) rotateY(180deg);
}
.border-box-content {
position: relative;
width: 100%;
height: 100%;
}
.realPicture-min {
width: 95%;
height: 95%;
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
margin: auto;
.realImg {
width: 100%;
height: 100%;
background-repeat: no-repeat;
display: block;
background: url('~@/assets/images/gs.jpg');
background-size: 100% 100%;
}
}
}
}
.page-center-b {
width: 100%;
height: 30%;
}
}
.page-right {
// flex:1;
width: 25%;
float: right;
height: 100%;
.page-right-t,
.page-right-b {
width: 100%;
height: 30%;
}
.page-right-c {
width: 100%;
height: 40%;
}
}
.chart-auto {
width: 100%;
height: 100%;
}
.yhzl-big-box {
width: 100%;
height: 100%;
color: #fff;
background: url('~@/assets/images/bc.png') no-repeat rgba(3, 15, 42, .7) 100% .5%;
background-size: 100% 13%;
.yhzl-big-box-title {
width: 100%;
height: 13%;
display: block;
font-size: 16px;
font-weight: 700;
padding: .5% 0 0 5%;
box-sizing: border-box;
}
.echarts {
width: 100%;
height: 83%;
margin: 1% 0 0 0;
}
.el-carousel__container {
height: 100% !important;
}
}
}
</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