Skip to content

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

首页调整

parent f310a50a
Show whitespace changes
Inline Side-by-side
Showing with 1308 additions and 1042 deletions
src/api/home/homepage.js
View file @ 273cf9c8
import request from '@/utils/request';
import request from 'common/src/utils/request'
/*query */
export function fxpcQuery(query) {
return request({
......
src/views/threeViolations/homePage/index.vue
View file @ 273cf9c8
<template>
<!-- 外层排版-->
<!-- <div class="home-page" id="homePageBody" :style="{ height: height + 'px' }"> -->
<div class="min_full" >
<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:queryParams1.gsid==item.id?activeStyle.color:'', boxShadow:queryParams1.gsid==item.id?'#00bfff 0px 0px 25px 3px inset':'#204b85 0px 0px 25px 3px inset'}">
: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="queryParams1.gsid==item.id?'#00BFFF':'#3377CB'"></polygon>
<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="queryParams1.gsid==item.id?'#00BFFF':'#3377CB'"></polygon>
<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="queryParams1.gsid==item.id?'#00BFFF':'#3377CB'"></polygon>
<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="queryParams1.gsid==item.id?'#00BFFF':'#3377CB'"></polygon>
<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>
......@@ -49,7 +53,8 @@
<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">
<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>
......@@ -101,30 +106,76 @@
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="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">
<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>
......@@ -172,43 +223,53 @@
</div>
</div>
</div>
</div>
</div>
</template>
<script>
const baseurl = process.env.VUE_APP_BASE_API
import {
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 {
} 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 {
} from "@/api/riskPrecontrol/riskAnalysis.js";
import {
queryYhsbtj as doQueryyh
} from "@/api/dangerManagement/yhslhz.js";
} from "@/api/dangerManagement/yhslhz.js";
import {
import {
doQuery as doQueryDcl
} from "@/api/dangerManagement/enterSafetyRecords.js"
} from "@/api/dangerManagement/enterSafetyRecords.js"
import {
import {
queryBglxFile
} from '@/api/threeViolations/enterTV.js';
import {
} from '@/api/threeViolations/enterTV.js';
import {
doQueryWithFile
} from '@/api/basicData/ryq.js';
} from '@/api/basicData/ryq.js';
import {
fxpcQuery,
lzglQuery,
ygczQuery,
yhtjQuery,
yjylQuery,
gsQuery
} from '@/api/home/homepage.js'
import ryqno from '@/assets/images/ryqno.png'
import {
fxpcQuery, lzglQuery, ygczQuery, yhtjQuery, yjylQuery,gsQuery
} from '@/api/home/homepage.js'
import ryqno from '@/assets/images/ryqno.png'
export default {
var allUserInfo = JSON.parse(sessionStorage.getItem('allUserInfo'));
console.log(allUserInfo, 'allUserInfo')
export default {
components: {
vueSeamlessScroll
......@@ -218,6 +279,9 @@ export default {
gsid() {
return this.queryParams1.gsid
},
bmid() {
return this.queryParams1.bmid
},
},
watch: {
gsid(val) {
......@@ -226,13 +290,25 @@ export default {
this.queryParams2.gsid = this.queryParams1.gsid
this.doQueryfx()
this.doQueryyh();
this.postYhzl();//隐患治理
this.postFxpc();//风险排查
this.postLzgl();//履职管理
this.postYgcz();//员工持证
this.postYhzl(); //隐患治理
this.postFxpc(); //风险排查
this.postLzgl(); //履职管理
this.postYgcz(); //员工持证
}
},
height(value){
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) {
// 全屏已退出
......@@ -256,17 +332,20 @@ export default {
}
},
activated() {
console.log('activated')
},
mounted() {
/* 获取当前登录人的信息*/
this.postGs();
this.$nextTick(() => {
this.height=document.getElementById('homePageBody').parentNode.clientHeight;
this.carHeight=this.height*0.4-60+'px';
this.height = document.getElementById('homePageBody').parentNode.clientHeight;
this.carHeight = this.height * 0.4 - 60 + 'px';
})
window.addEventListener('resize',function (params) {
window.addEventListener('resize', function(params) {
})
this.fxpcChart = echarts.init(document.getElementById('fxpcChart'))
......@@ -274,32 +353,35 @@ export default {
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'));
this.lzglChart = echarts.init(document.getElementById('lzglChart'));
this.ygzcChart = echarts.init(document.getElementById('ygzcChart'));
doQueryWithFile({}).then(res => {
doQueryWithFile({}).then(res => {
this.showListRy = res.data.records || []
})
queryBglxFile({}).then(res => {
this.showList = res.data.records || []
// this.showList=[]
})
this.postYjyl();//应急演练
this.postYjyl(); //应急演练
},
data() {
return {
activeStyle:{
color:"rgb(0, 191, 255)",
boxShadow:"rgb(0, 191, 255) 0px 0px 25px 3px inset;"
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,
gsList: [],
height: 300,
showListRy: [],
queryParams1: {
grouptype: 'GS',
rwlx: 'D',
gsid: '',
bmid: '',
ksrq: new Date().getTime(),
jsrq: new Date().getTime()
......@@ -307,33 +389,34 @@ doQueryWithFile({}).then(res => {
queryParams2: {
hzfs: 'GS',
gsid: '',
bmid: '',
ksrq: null,
jsrq: new Date().getTime()
},
},
queryParams: {
queryType: 'YHWCL'
// zt:'S'
},
carHeight:"290px",
carHeight: "290px",
ryqno: ryqno,
aqpng: aqpng,
gspicture:gspicture,
gspicture: gspicture,
baseurl: baseurl,
showList: [],
/* dom*/
fxpcChart: null,
yhclChart: null,
yjylChart :null,
yhzlChart :null,
rfxpcChart:null,
lzglChart:null,
ygzcChart:null
yjylChart: null,
yhzlChart: null,
rfxpcChart: null,
lzglChart: null,
ygzcChart: null
}
},
methods: {
handleDoubleClick(){
handleDoubleClick() {
this.fullScreen(document.getElementById('homePage'));
setTimeout(() => {
this.fxpcChart.resize();
......@@ -344,8 +427,8 @@ doQueryWithFile({}).then(res => {
this.lzglChart.resize();
this.ygzcChart.resize();
this.$nextTick(() => {
this.height=document.getElementById('homePageBody').parentNode.clientHeight;
this.carHeight=this.height*0.4-60+'px';
this.height = document.getElementById('homePageBody').parentNode.clientHeight;
this.carHeight = this.height * 0.4 - 60 + 'px';
})
}, 50);
......@@ -369,14 +452,30 @@ doQueryWithFile({}).then(res => {
}
}
},
bindGsid(item){
this.queryParams1.gsid=item.id
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||[];
this.queryParams1.gsid=this.gsList[0]["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;
}
}
})
},
......@@ -395,6 +494,10 @@ doQueryWithFile({}).then(res => {
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
......@@ -414,8 +517,10 @@ doQueryWithFile({}).then(res => {
},
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对象转换为字符串。
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;
},
......@@ -451,7 +556,8 @@ doQueryWithFile({}).then(res => {
yjylQuery().then(res => {
if (res.success) {
let value = res.data.records ? res.data.records : [];
let seriesData = [], xAxis = [];
let seriesData = [],
xAxis = [];
value.forEach(element => {
xAxis.push(element.bmName || "");
seriesData.push(Number(parseFloat((element.wcl || 0) * 100).toFixed(2)));
......@@ -460,75 +566,82 @@ doQueryWithFile({}).then(res => {
this.setBarhart(this.yjylChart, {
title: "应急演练",
xAxis: xAxis,
titleShow:true,
yAxis:[
{
titleShow: true,
yAxis: [{
type: 'value',
axisTick: {
color:"white"
color: "white"
},
axisLabel:{
color:'white',
formatter:"{value}%",
axisLabel: {
color: 'white',
formatter: "{value}%",
},
axisLine:{
lineStyle:{
color:'white'
axisLine: {
lineStyle: {
color: 'white'
},
},
splitLine:{
show:false,
color:'white'
splitLine: {
show: false,
color: 'white'
}
}
],
series:[
{
}],
series: [{
name: "完成率",
type: 'bar',
barWidth: "60%",
data: seriesData,
show:true,
position:"top",
show: true,
position: "top",
itemStyle: {
color: '#03a9f4'
},
label: {
normal: {
show: true,//开启显示
position: 'top',//柱形上方
show: true, //开启显示
position: 'top', //柱形上方
textStyle: { //数值样式
color: '#fff'
},
formatter:'{c}%'
}
formatter: '{c}%'
}
}
]
}]
})
}
})
},
postYhzl(){
yhtjQuery({
gsid:this.queryParams1.gsid
}).then(res=>{
if(res.success){
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",
let seriesStyle = {
show: true,
position: "top",
label: {
normal: {
show: true,
position: 'top',
color:"white"
color: "white"
}
}
}
let seriesData = [];
let series = [
{name:"隐患数量",data:[],type:"bar",itemStyle: {color: {
let series = [{
name: "隐患数量",
data: [],
type: "bar",
itemStyle: {
color: {
type: 'linear', // 线性渐变
x: 0,
y: 0,
......@@ -541,8 +654,15 @@ doQueryWithFile({}).then(res => {
offset: 1,
color: '#08173a' // 100%处的颜色为蓝
}]
}}},
{name:"隐患关闭数量",data:[],type:"bar",itemStyle: {color: {
}
}
},
{
name: "隐患关闭数量",
data: [],
type: "bar",
itemStyle: {
color: {
type: 'linear', // 线性渐变
x: 0,
y: 0,
......@@ -555,8 +675,15 @@ doQueryWithFile({}).then(res => {
offset: 1,
color: '#11162f' // 100%处的颜色为蓝
}]
}}},
{name:"超期未处理",data:[],type:"bar",itemStyle: {color: {
}
}
},
{
name: "超期未处理",
data: [],
type: "bar",
itemStyle: {
color: {
type: 'linear', // 线性渐变
x: 0,
y: 0,
......@@ -569,8 +696,15 @@ doQueryWithFile({}).then(res => {
offset: 1,
color: '#11162f' // 100%处的颜色为蓝
}]
}}},
{name:"超期已处理",data:[],type:"bar",itemStyle: {color: {
}
}
},
{
name: "超期已处理",
data: [],
type: "bar",
itemStyle: {
color: {
type: 'linear', // 线性渐变
x: 0,
y: 0,
......@@ -583,46 +717,72 @@ doQueryWithFile({}).then(res => {
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]};
}
}
},
],
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);
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
titleShow: true,
series: seriesData
})
}
})
},
postFxpc(){
fxpcQuery({
gsid:this.queryParams1.gsid
}).then(res=>{
if(res.success){
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",
let seriesStyle = {
show: true,
position: "top",
label: {
normal: {
show: true,
position: 'top',
color:'white'
color: 'white'
}
}
}
let seriesData = [
{name:"全部",data:[],type:"bar",itemStyle: {color: {
let seriesData = [{
name: "全部",
data: [],
type: "bar",
itemStyle: {
color: {
type: 'linear', // 线性渐变
x: 0,
y: 0,
......@@ -635,8 +795,16 @@ doQueryWithFile({}).then(res => {
offset: 1,
color: '#08173a' // 100%处的颜色为蓝
}]
}},...seriesStyle},
{name:"完成",data:[],type:"bar",itemStyle: { color: {
}
},
...seriesStyle
},
{
name: "完成",
data: [],
type: "bar",
itemStyle: {
color: {
type: 'linear', // 线性渐变
x: 0,
y: 0,
......@@ -649,34 +817,39 @@ doQueryWithFile({}).then(res => {
offset: 1,
color: '#11162f' // 100%处的颜色为蓝
}]
}},...seriesStyle},
], xAxis = [];
let lx={
"D":"昨日",
"W":"本周",
"M":"本月"
}
},
...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);
seriesData[0]["data"].push(element.allCount || 0);
seriesData[1]["data"].push(element.wcCount || 0);
});
this.setBarhart(this.rfxpcChart, {
title: "风险排查",
xAxis: xAxis,
series:seriesData
series: seriesData
})
}
})
},
postLzgl(){
postLzgl() {
lzglQuery({
gsid:this.queryParams1.gsid
}).then(res=>{
if(res.success){
gsid: this.queryParams1.gsid
}).then(res => {
if (res.success) {
let value = res.data.records ? res.data.records : [];
let seriesStyle={
show:true, position:"top",
let seriesStyle = {
show: true,
position: "top",
label: {
normal: {
show: true,
......@@ -684,19 +857,25 @@ doQueryWithFile({}).then(res => {
}
}
}
let seriesStyle2={
show:true, position:"top",
let seriesStyle2 = {
show: true,
position: "top",
label: {
normal: {
show: true,
position: 'top',
formatter:"{c}%"
formatter: "{c}%"
},
}
}
let seriesData = [
{name:"全部",data:[],type:"bar", yAxisIndex: 0,itemStyle: {color: {
let seriesData = [{
name: "全部",
data: [],
type: "bar",
yAxisIndex: 0,
itemStyle: {
color: {
type: 'linear', // 线性渐变
x: 0,
y: 0,
......@@ -709,8 +888,17 @@ doQueryWithFile({}).then(res => {
offset: 1,
color: '#08173a' // 100%处的颜色为蓝
}]
}},...seriesStyle},
{name:"完成",data:[],type:"bar", yAxisIndex: 0,itemStyle: {color: {
}
},
...seriesStyle
},
{
name: "完成",
data: [],
type: "bar",
yAxisIndex: 0,
itemStyle: {
color: {
type: 'linear', // 线性渐变
x: 0,
y: 0,
......@@ -723,109 +911,164 @@ doQueryWithFile({}).then(res => {
offset: 1,
color: '#11162f' // 100%处的颜色为蓝
}]
}},...seriesStyle},
{name:"完成率",data:[],type:"line", yAxisIndex: 1,itemStyle: {color: '#049bbc'},...seriesStyle2},
], xAxis = [],yAxis=[];
let lx={
"D":"昨日",
"W":"本周",
"M":"本月"
}
},
...seriesStyle
},
{
name: "完成率",
data: [],
type: "line",
yAxisIndex: 1,
itemStyle: {
color: '#049bbc'
},
...seriesStyle2
},
],
xAxis = [],
yAxis = [];
let lx = {
"D": "昨日",
"W": "本周",
"M": "本月"
};
let yAxisStyle={axisTick: {
color:"white"
let yAxisStyle = {
axisTick: {
color: "white"
},
axisLabel:{
color:'white'
axisLabel: {
color: 'white'
},
axisLine:{
lineStyle:{
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: {
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)));
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
yAxis: yAxis,
series: seriesData
})
}
})
},
postYgcz(){
postYgcz() {
ygczQuery({
gsid:this.queryParams1.gsid
}).then(res=>{
if(res.success){
gsid: this.queryParams1.gsid
}).then(res => {
if (res.success) {
let value = res.data.records ? res.data.records : [];
let seriesStyle={
show:true, position:"top",
let seriesStyle = {
show: true,
position: "top",
label: {
normal: {
show: true,
position: 'top',
color:'white'
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 = [
{name:"持证人数",data:[],type:"bar",barWidth:20, stack: 'total',itemStyle: {color: "#334284"},...seriesStyle},
{name:"即将到期",data:[],type:"bar",barWidth:20, stack: 'total',itemStyle: {color: ""},...seriesStyle},
], xAxis = [];
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 = [{
name: "持证人数",
data: [],
type: "bar",
barWidth: 20,
stack: 'total',
itemStyle: {
color: "#334284"
},
...seriesStyle
},
{
name: "即将到期",
data: [],
type: "bar",
barWidth: 20,
stack: 'total',
itemStyle: {
color: ""
},
...seriesStyle
},
],
xAxis = [];
value.forEach(element => {
xAxis.push(element.flName);
seriesData[0]["data"].push(element.allCount-element.dqCount||0);
seriesData[1]["data"].push(element.dqCount||0);
seriesData[0]["data"].push(element.allCount - element.dqCount || 0);
seriesData[1]["data"].push(element.dqCount || 0);
});
this.setBarhart(this.ygzcChart, {
title: "员工持证",
titleShow:true,
titleShow: true,
yAxis: {
name:"种类",
data:xAxis,
show:false,
type:"category",...yAxisStyle
name: "种类",
data: xAxis,
show: false,
type: "category",
...yAxisStyle
},
customxAxis:{
type:"value",
boundaryGap: [0, 0.01],...yAxisStyle
customxAxis: {
type: "value",
boundaryGap: [0, 0.01],
...yAxisStyle
},
series:seriesData
series: seriesData
})
}
})
......@@ -847,11 +1090,10 @@ doQueryWithFile({}).then(res => {
fontWeight: 400,
align: 'center',
verticalAlign: 'middle',
color:'white'
color: 'white'
}
},
series: [
{
series: [{
axisLine: {
lineStyle: {
width: 6,
......@@ -881,14 +1123,11 @@ doQueryWithFile({}).then(res => {
}
},
data: [
{
data: [{
value: setting.value,
name: setting.name
}
]
}
]
}]
}]
}
/* 渲染dom*/
chartDom.setOption(option);
......@@ -899,7 +1138,7 @@ doQueryWithFile({}).then(res => {
/* 基础配置*/
let option = {
title: {
show: setting.titleShow||false,
show: setting.titleShow || false,
text: setting.title || "",
top: 20,
left: "center",
......@@ -908,7 +1147,7 @@ doQueryWithFile({}).then(res => {
fontWeight: 600,
align: 'center',
verticalAlign: 'middle',
color:'white'
color: 'white'
}
},
tooltip: {
......@@ -921,54 +1160,50 @@ doQueryWithFile({}).then(res => {
left: '3%',
right: '4%',
bottom: '3%',
top:'20%',
top: '20%',
containLabel: true
},
xAxis: setting.customxAxis||[
{
xAxis: setting.customxAxis || [{
type: 'category',
data: setting.xAxis,
axisTick: {
alignWithLabel: true,
color:"white"
color: "white"
},
axisLabel:{
color:'white',
axisLabel: {
color: 'white',
interval: 0, // 横轴信息全部显示
},
axisLine:{
lineStyle:{
color:'white'
axisLine: {
lineStyle: {
color: 'white'
},
},
splitLine:{
show:false,
color:'white'
}
splitLine: {
show: false,
color: 'white'
}
],
yAxis: setting.yAxis||[
{
}],
yAxis: setting.yAxis || [{
type: 'value',
axisTick: {
color:"white"
color: "white"
},
axisLabel:{
color:'white'
axisLabel: {
color: 'white'
},
axisLine:{
lineStyle:{
color:'white'
axisLine: {
lineStyle: {
color: 'white'
},
},
splitLine:{
show:false,
color:'white'
splitLine: {
show: false,
color: 'white'
}
}
],
series: setting.series||[]
}],
series: setting.series || []
}
/* 渲染dom*/
chartDom.setOption(option);
......@@ -977,35 +1212,35 @@ doQueryWithFile({}).then(res => {
}
}
}
</script>
<style lang="scss" scope>
.listf {
.listf {
float: right;
}
}
.ztcxxx {
.ztcxxx {
height: 60px;
width: 100%;
}
}
.chart {
.chart {
width: 100%;
height: calc(300px - 60px - 30px);
}
}
.homePage {
.homePage {
width: 35%;
height: 100%;
}
}
.nodata {
.nodata {
background-image: url('/src/assets/image/aq.svg');
}
}
.lbt {
.lbt {
height: 100%;
width: 100%;
......@@ -1035,24 +1270,25 @@ doQueryWithFile({}).then(res => {
}
}
}
}
}
.el-carousel__item:nth-child(2n) {
.el-carousel__item:nth-child(2n) {
background-color: #99a9bf;
}
}
.el-carousel__item:nth-child(2n+1) {
.el-carousel__item:nth-child(2n+1) {
background-color: #d3dce6;
}
}
.page-homepage {
.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{
.echarts_nav {
width: 85%;
height: 48px;
display: flex;
......@@ -1061,62 +1297,73 @@ doQueryWithFile({}).then(res => {
position: absolute;
top: 0;
left: 3%;
.iconTable{
.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{
.border-box-content {
position: relative;
width: 100%;
height: 100%;
.spanTitle {
display: flex;
width: 100%;
height: 100%;
justify-content: center;
align-items: center;
.icon-zhexiantu{
.icon-zhexiantu {
margin: 0 1% 0 0;
color: #fff;
font-size: 22px;
}
}
}
}
}
}
.echart-body{
height: calc( 100% - 48px);
}
}
}
.echart-body {
height: calc(100% - 48px);
width: 100%;
margin-top: 48px;
// display: flex;
}
.page-left {
// flex: 1;
width: 25%;
......@@ -1128,10 +1375,12 @@ doQueryWithFile({}).then(res => {
width: 100%;
height: 30%;
}
.page-left-4{
.page-left-4 {
width: 100%;
height: 40%;
}
.page-left-t {
display: flex;
......@@ -1158,33 +1407,40 @@ doQueryWithFile({}).then(res => {
.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{
.realPicture-min {
width: 95%;
height: 95%;
position: absolute;
......@@ -1193,6 +1449,7 @@ doQueryWithFile({}).then(res => {
right: 0;
left: 0;
margin: auto;
.realImg {
width: 100%;
height: 100%;
......@@ -1201,10 +1458,11 @@ doQueryWithFile({}).then(res => {
display: block;
background: url('~@/assets/images/gs.jpg');
background-size: 100% 100%;
}
}
}
}
}
.page-center-b {
width: 100%;
height: 30%;
......@@ -1222,21 +1480,26 @@ doQueryWithFile({}).then(res => {
width: 100%;
height: 30%;
}
.page-right-c{
.page-right-c {
width: 100%;
height: 40%;
}
}
.chart-auto{
width: 100%;height: 100%;
.chart-auto {
width: 100%;
height: 100%;
}
.yhzl-big-box{
.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: url('~@/assets/images/bc.png') no-repeat rgba(3, 15, 42, .7) 100% .5%;
background-size: 100% 13%;
.yhzl-big-box-title{
.yhzl-big-box-title {
width: 100%;
height: 13%;
display: block;
......@@ -1245,15 +1508,18 @@ doQueryWithFile({}).then(res => {
padding: .5% 0 0 5%;
box-sizing: border-box;
}
.echarts{
.echarts {
width: 100%;
height: 83%;
margin: 1% 0 0 0;
}
.el-carousel__container{
height: 100%!important;
.el-carousel__container {
height: 100% !important;
}
}
}
}</style>
}
</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