Skip to content

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

首页调整

parent f310a50a
Hide 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({
......@@ -43,4 +43,4 @@ export function gsQuery(query){
method:"post",
data:query||{}
})
}
\ No newline at end of file
}
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="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'}">
<svg width="131" height="37" class="dv-border-svg-container">
<polygon fill="transparent" points="
<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="queryParams1.gsid==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>
</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>
</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>
</svg>
<div class="border-box-content"><span class="spanTitle">
<i class="iconfont icon-zhexiantu"></i> {{item.bmmc}} </span>
</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>
</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 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>
<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="()=>{
</div>
<div class="page-left-b page-left-3">
<div class="yhzl-big-box">
<div v-echartResize="()=>{
fxpcChart.resize();
yhclChart.resize();
yjylChart.resize();
......@@ -82,16 +87,16 @@
lzglChart.resize();
ygzcChart.resize();
}" id="yjylChart" class="chart-auto"></div>
</div>
</div>
</div>
<div class="page-center">
<div class="page-center-t">
</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
<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
......@@ -99,241 +104,319 @@
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>
</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 class="page-center-b">
<div class="yhzl-big-box">
<!-- <div class="yhzl-big-box-title">隐患治理</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 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 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="()=>{
</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>
}" 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>
</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'
export default {
components: {
vueSeamlessScroll
},
// mixins: [tableMixin],
computed: {
gsid() {
return this.queryParams1.gsid
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(sessionStorage.getItem('allUserInfo'));
console.log(allUserInfo, 'allUserInfo')
export default {
components: {
vueSeamlessScroll
},
},
watch: {
gsid(val) {
/* 监听公司id*/
if (val) {
this.queryParams2.gsid = this.queryParams1.gsid
this.doQueryfx()
this.doQueryyh();
this.postYhzl();//隐患治理
this.postFxpc();//风险排查
this.postLzgl();//履职管理
this.postYgcz();//员工持证
}
// mixins: [tableMixin],
computed: {
gsid() {
return this.queryParams1.gsid
},
bmid() {
return this.queryParams1.bmid
},
},
height(value){
document.addEventListener('fullscreenchange', (event) => {
if (!document.fullscreenElement) {
// 全屏已退出
console.log('Exited full screen');
watch: {
gsid(val) {
/* 监听公司id*/
if (val) {
this.queryParams2.gsid = this.queryParams1.gsid
this.doQueryfx()
this.doQueryyh();
this.postYhzl(); //隐患治理
this.postFxpc(); //风险排查
this.postLzgl(); //履职管理
this.postYgcz(); //员工持证
}
});
// 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() {
console.log('activated')
},
mounted() {
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 {
activeStyle:{
color:"rgb(0, 191, 255)",
boxShadow:"rgb(0, 191, 255) 0px 0px 25px 3px inset;"
},
gsList:[],
height:300,
showListRy: [],
queryParams1: {
grouptype: 'GS',
rwlx: 'D',
gsid: '',
ksrq: new Date().getTime(),
jsrq: new Date().getTime()
},
queryParams2: {
hzfs: 'GS',
gsid: '',
ksrq: null,
jsrq: new Date().getTime()
},
queryParams: {
queryType: 'YHWCL'
// zt:'S'
bmid(val) {
/* 监听公司id*/
if (val) {
this.queryParams2.bmid = this.queryParams1.bmid
this.doQueryfx()
this.doQueryyh();
this.postYhzl(); //隐患治理
this.postFxpc(); //风险排查
this.postLzgl(); //履职管理
this.postYgcz(); //员工持证
}
},
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
height(value) {
document.addEventListener('fullscreenchange', (event) => {
if (!document.fullscreenElement) {
// 全屏已退出
console.log('Exited full screen');
}
});
// setTimeout(() => {
}
},
methods: {
handleDoubleClick(){
// 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() {
},
mounted() {
/* 获取当前登录人的信息*/
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: 'D',
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();
......@@ -344,514 +427,673 @@ 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);
},
fullScreen(element) {
},
fullScreen(element) {
const elem = element || document.documentElement;
if (elem.webkitRequestFullScreen) {
elem.webkitRequestFullScreen();
elem.webkitRequestFullScreen();
} else if (elem.mozRequestFullScreen) {
elem.mozRequestFullScreen();
elem.mozRequestFullScreen();
} else if (elem.requestFullScreen) {
elem.requestFullscreen();
elem.requestFullscreen();
} else if (elem.msExitFullscreen) {
elem.msExitFullscreen();
elem.msExitFullscreen();
} else if (elem.msRequestFullscreen) {
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}");
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();
}
},
bindGsid(item){
this.queryParams1.gsid=item.id
},
postGs(){
gsQuery().then(res=>{
if(res.success){
this.gsList=res.data.records||[];
this.queryParams1.gsid=this.gsList[0]["id"];
if (!this.superuser) {
delete this.queryParams1.grouptype
this.queryParams1.hzfs = 'BM'
}
})
},
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();
}
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
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
})
}
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() {
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
})
}
})
},
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() {
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)));
});
}
})
},
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',
this.setBarhart(this.yjylChart, {
title: "应急演练",
xAxis: xAxis,
titleShow: true,
yAxis: [{
type: 'value',
axisTick: {
color:"white"
},
axisLabel:{
color:'white',
formatter:"{value}%",
},
axisLine:{
lineStyle:{
color:'white'
axisTick: {
color: "white"
},
},
splitLine:{
show:false,
color:'white'
}
}
],
series:[
{
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",
show: true,
position: "top",
itemStyle: {
color: '#03a9f4'
},
label: {
color: '#03a9f4'
},
label: {
normal: {
show: true,//开启显示
position: 'top',//柱形上方
show: true, //开启显示
position: 'top', //柱形上方
textStyle: { //数值样式
color: '#fff'
},
formatter:'{c}%'
}
}
}
]
})
}
})
},
postYhzl(){
yhtjQuery({
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"
formatter: '{c}%'
}
}
}]
})
}
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
})
})
},
postYhzl() {
let params = {
}
})
},
postFxpc(){
fxpcQuery({
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'
}
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 = [
{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 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
})
}
let seriesStyle2={
show:true, position:"top",
label: {
normal: {
show: true,
position: 'top',
formatter:"{c}%"
},
})
},
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
})
}
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'
})
},
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"
},
},
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 => {
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'
}
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'
}
};
let yAxisStyle = {
axisTick: {
color: "white",
show: false
},
},
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 => {
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);
});
this.setBarhart(this.ygzcChart, {
title: "员工持证",
titleShow:true,
yAxis: {
name:"种类",
data:xAxis,
show:false,
type:"category",...yAxisStyle
},
customxAxis:{
type:"value",
boundaryGap: [0, 0.01],...yAxisStyle
},
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'
seriesData[0]["data"].push(element.allCount - element.dqCount || 0);
seriesData[1]["data"].push(element.dqCount || 0);
});
this.setBarhart(this.ygzcChart, {
title: "员工持证",
titleShow: true,
yAxis: {
name: "种类",
data: xAxis,
show: false,
type: "category",
...yAxisStyle
},
customxAxis: {
type: "value",
boundaryGap: [0, 0.01],
...yAxisStyle
},
series: seriesData
})
}
},
series: [
{
})
},
/* 渲染仪表盘*/
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,
......@@ -881,310 +1123,324 @@ doQueryWithFile({}).then(res => {
}
},
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||[
{
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"
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||[]
}
/* 渲染dom*/
chartDom.setOption(option);
chartDom.resize();
},
}],
series: setting.series || []
}
/* 渲染dom*/
chartDom.setOption(option);
chartDom.resize();
},
}
}
}
</script>
<style lang="scss" scope>
.listf {
float: right;
}
.ztcxxx {
height: 60px;
width: 100%;
}
.listf {
float: right;
}
.chart {
width: 100%;
height: calc(300px - 60px - 30px);
}
.ztcxxx {
height: 60px;
width: 100%;
}
.homePage {
width: 35%;
height: 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%;
.nodata {
background-image: url('/src/assets/image/aq.svg');
}
.lbtAll {
.lbt {
height: 100%;
width: 100%;
.sm {
padding-top: 16px;
padding-bottom: 26px;
display: flex;
justify-content: center;
align-items: center;
position: absolute;
height: 90px;
.lbtAll {
height: 100%;
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;
.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;
.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;
justify-content: space-between;
align-items: center;
position: absolute;
top: 0;
left: 3%;
.iconTable{
text-align: center;
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;
width: 100%;
height: 70%;
margin-left: .5%;
cursor: pointer;
.nav_border {
position: absolute;
top: 0;
left: 3%;
.iconTable {
text-align: center;
height: 100%;
align-items: center;
width: 100%;
color: #fff;
position: relative;
.dv-border-svg-container {
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 {
}
.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;
}
.right-bottom {
right: 0;
bottom: 0;
transform: rotateX(180deg) rotateY(180deg);
}
.border-box-content {
position: relative;
width: 100%;
height: 100%;
justify-content: center;
align-items: center;
.icon-zhexiantu{
margin: 0 1% 0 0;
color: #fff;
font-size: 22px;
.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{
.echart-body {
height: calc(100% - 48px);
width: 100%;
height: 40%;
margin-top: 48px;
// display: flex;
}
.page-left-t {
display: flex;
.page-fxpc {
flex: 1
.page-left {
// flex: 1;
width: 25%;
float: left;
height: 100%;
display: inline-block;
.page-left-3 {
width: 100%;
height: 30%;
}
.page-yhhz {
flex: 1;
.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-left-c,
.page-left-b {}
}
.page-center {
// flex: 0 0 50%;
width: 50%;
height: 100%;
display: inline-block;
.page-center {
// flex: 0 0 50%;
width: 50%;
height: 100%;
display: inline-block;
.page-center-t {
width: 100%;
height: 70%;
.page-center-t {
width: 100%;
height: 70%;
.dv-border-box-1 {
.dv-border-box-1 {
position: relative;
width: 100%;
height: 100%;
.border {
position: absolute;
display: block;
}
.right-top {
right: 0;
transform: rotateY(180deg);
.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{
.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;
......@@ -1193,67 +1449,77 @@ doQueryWithFile({}).then(res => {
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%;
}
}
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-center-b {
width: 100%;
height: 30%;
}
}
.page-right {
// flex:1;
width: 25%;
float: right;
height: 100%;
.page-right {
// flex:1;
width: 25%;
float: right;
height: 100%;
.page-right-t,
.page-right-b {
width: 100%;
height: 30%;
.page-right-t,
.page-right-b {
width: 100%;
height: 30%;
}
.page-right-c {
width: 100%;
height: 40%;
}
}
.page-right-c{
.chart-auto {
width: 100%;
height: 40%;
height: 100%;
}
}
.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{
.yhzl-big-box {
width: 100%;
height: 13%;
display: block;
font-size: 16px;
font-weight: 700;
padding: .5% 0 0 5%;
box-sizing: border-box;
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;
}
}
.echarts{
width: 100%;
height: 83%;
margin: 1% 0 0 0;
}
.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