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 */ /*query */
export function fxpcQuery(query) { export function fxpcQuery(query) {
return request({ return request({
...@@ -43,4 +43,4 @@ export function gsQuery(query){ ...@@ -43,4 +43,4 @@ export function gsQuery(query){
method:"post", method:"post",
data:query||{} data:query||{}
}) })
} }
\ No newline at end of file
src/views/threeViolations/homePage/index.vue
View file @ 273cf9c8
<template> <template>
<!-- 外层排版--> <!-- 外层排版-->
<!-- <div class="home-page" id="homePageBody" :style="{ height: height + 'px' }"> --> <!-- <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="home-page full" ref='homePageBody' id="homePageBody" style="overflow: hidden;">
<div class="page-homepage" id="homePage" @dblclick="handleDoubleClick" style=""> <div class="page-homepage" id="homePage" @dblclick="handleDoubleClick" style="">
<div class="echarts_nav" id="echarts_nav"> <div class="echarts_nav" id="echarts_nav">
<div class="iconTable" v-for="item in gsList" :key="item.id" @click="bindGsid(item)"> <div class="iconTable" v-for="item in gsList" :key="item.id" @click="bindGsid(item)">
<div class="dv-border-box-10 nav_border" <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"> <svg width="131" height="37" class="dv-border-svg-container">
<polygon fill="transparent" points=" <polygon fill="transparent" points="
4, 0 127, 0 131, 4 131, 33 127, 37 4, 0 127, 0 131, 4 131, 33 127, 37
4, 37 0, 33 0, 4 4, 37 0, 33 0, 4
"></polygon> "></polygon>
</svg><svg width="150px" height="150px" class="left-top dv-border-svg-container"> </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"
</svg> :fill="(superuser?(queryParams1.gsid==item.id):(queryParams1.bmid==item.id))?'#00BFFF':'#3377CB'"></polygon>
<svg width="150px" height="150px" class="right-top dv-border-svg-container"> </svg>
<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 width="150px" height="150px" class="right-top dv-border-svg-container">
</svg> <polygon points="40, 0 5, 0 0, 5 0, 16 3, 19 3, 7 7, 3 35, 3"
<svg width="150px" height="150px" class="left-bottom dv-border-svg-container"> :fill="(superuser?(queryParams1.gsid==item.id):(queryParams1.bmid==item.id))?'#00BFFF':'#3377CB'"></polygon>
<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><svg width="150px" height="150px" class="right-bottom dv-border-svg-container"> <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"
</svg> :fill="(superuser?(queryParams1.gsid==item.id):(queryParams1.bmid==item.id))?'#00BFFF':'#3377CB'"></polygon>
<div class="border-box-content"><span class="spanTitle"> </svg><svg width="150px" height="150px" class="right-bottom dv-border-svg-container">
<i class="iconfont icon-zhexiantu"></i> {{item.bmmc}} </span> <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> <div class="echart-body">
</div> <div class="page-left">
<div class="echart-body"> <div class="page-left-t page-left-3">
<div class="page-left"> <div class="page-fxpc">
<div class="page-left-t page-left-3"> <div id="fxpcChart" class="chart-auto"></div>
<div class="page-fxpc"> </div>
<div id="fxpcChart" class="chart-auto"></div> <div class="page-yhhz">
</div> <div id="yhclChart" class="chart-auto"></div>
<div class="page-yhhz"> </div>
<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-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>
<div class="page-left-b page-left-3"> <div class="page-left-b page-left-3">
<div class="yhzl-big-box"> <div class="yhzl-big-box">
<div v-echartResize="()=>{ <div v-echartResize="()=>{
fxpcChart.resize(); fxpcChart.resize();
yhclChart.resize(); yhclChart.resize();
yjylChart.resize(); yjylChart.resize();
...@@ -82,16 +87,16 @@ ...@@ -82,16 +87,16 @@
lzglChart.resize(); lzglChart.resize();
ygzcChart.resize(); ygzcChart.resize();
}" id="yjylChart" class="chart-auto"></div> }" id="yjylChart" class="chart-auto"></div>
</div> </div>
</div> </div>
</div> </div>
<div class="page-center"> <div class="page-center">
<div class="page-center-t"> <div class="page-center-t">
<div class="gs-picture" style="width: 100%;height: 100%;"> <div class="gs-picture" style="width: 100%;height: 100%;">
<div class="dv-border-box-1"> <div class="dv-border-box-1">
<svg width="682" height="379" class="border"> <svg width="682" height="379" class="border">
<polygon fill="transparent" points="10, 27 10, 352 13, 355 13, 358 24, 368 <polygon fill="transparent" points="10, 27 10, 352 13, 355 13, 358 24, 368
38, 368 41, 371 73, 371 75, 369 81, 369 38, 368 41, 371 73, 371 75, 369 81, 369
85, 373 597, 373 601, 369 607, 369 85, 373 597, 373 601, 369 607, 369
609, 371 641, 371 644, 368 609, 371 641, 371 644, 368
...@@ -99,241 +104,319 @@ ...@@ -99,241 +104,319 @@
672, 352 672, 27 669, 25 669, 21 672, 352 672, 27 669, 25 669, 21
658, 11 644, 11 641, 8 609, 8 607, 10 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> 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>
<svg width="150px" height="150px" class="left-top border"> <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"> <polygon
<animate attributeName="fill" values="#4fd2dd;#235fa7;#4fd2dd" dur="0.5s" begin="0s" repeatCount="indefinite"></animate> 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"
</polygon><polygon points="27.599999999999998,4.8 38.4,4.8 35.4,7.8 30.599999999999998,7.8" fill="#235fa7"> fill="#4fd2dd">
<animate attributeName="fill" values="#235fa7;#4fd2dd;#235fa7" dur="0.5s" begin="0s" repeatCount="indefinite"></animate> <animate attributeName="fill" values="#4fd2dd;#235fa7;#4fd2dd" dur="0.5s" begin="0s"
</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"> repeatCount="indefinite"></animate>
<animate attributeName="fill" values="#4fd2dd;#235fa7;transparent" dur="1s" begin="0s" repeatCount="indefinite"></animate> </polygon>
</polygon></svg><svg width="150px" height="150px" class="right-top border"> <polygon points="27.599999999999998,4.8 38.4,4.8 35.4,7.8 30.599999999999998,7.8" fill="#235fa7">
<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="#235fa7;#4fd2dd;#235fa7" dur="0.5s" begin="0s"
<animate attributeName="fill" values="#4fd2dd;#235fa7;#4fd2dd" dur="0.5s" begin="0s" repeatCount="indefinite"></animate> repeatCount="indefinite"></animate>
</polygon><polygon points="27.599999999999998,4.8 38.4,4.8 35.4,7.8 30.599999999999998,7.8" fill="#235fa7"> </polygon>
<animate attributeName="fill" values="#235fa7;#4fd2dd;#235fa7" dur="0.5s" begin="0s" repeatCount="indefinite"></animate></polygon> <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"> 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"
<animate attributeName="fill" values="#4fd2dd;#235fa7;transparent" dur="1s" begin="0s" repeatCount="indefinite"></animate> fill="#4fd2dd">
</polygon></svg><svg width="150px" height="150px" class="left-bottom border"> <animate attributeName="fill" values="#4fd2dd;#235fa7;transparent" dur="1s" begin="0s"
<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"> repeatCount="indefinite"></animate>
<animate attributeName="fill" values="#4fd2dd;#235fa7;#4fd2dd" dur="0.5s" begin="0s" repeatCount="indefinite"></animate></polygon> </polygon>
<polygon points="27.599999999999998,4.8 38.4,4.8 35.4,7.8 30.599999999999998,7.8" fill="#235fa7"> </svg><svg width="150px" height="150px" class="right-top border">
<animate attributeName="fill" values="#235fa7;#4fd2dd;#235fa7" dur="0.5s" begin="0s" repeatCount="indefinite"></animate></polygon> <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"> 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"
<animate attributeName="fill" values="#4fd2dd;#235fa7;transparent" dur="1s" begin="0s" repeatCount="indefinite"></animate></polygon></svg> fill="#4fd2dd">
<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"
<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"> repeatCount="indefinite"></animate>
<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"> </polygon>
<animate attributeName="fill" values="#4fd2dd;#235fa7;transparent" dur="1s" begin="0s" repeatCount="indefinite"></animate></polygon></svg><div class="border-box-content"> <polygon points="27.599999999999998,4.8 38.4,4.8 35.4,7.8 30.599999999999998,7.8" fill="#235fa7">
<div class="realPicture-min"> <animate attributeName="fill" values="#235fa7;#4fd2dd;#235fa7" dur="0.5s" begin="0s"
<div class="realImg"> repeatCount="indefinite"></animate>
</div> </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> </div>
<div class="page-center-b"> </div>
<div class="yhzl-big-box"> <div class="page-center-b">
<!-- <div class="yhzl-big-box-title">隐患治理</div> <div class="yhzl-big-box">
<!-- <div class="yhzl-big-box-title">隐患治理</div>
<div class="echarts"> --> <div class="echarts"> -->
<div id="yhzlChart" class="chart-auto"></div> <div id="yhzlChart" class="chart-auto"></div>
<!-- </div> --> <!-- </div> -->
</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> }" class="chart-auto"></div>
</div> </div>
<div class="page-right-c">
<div class="yhzl-big-box"> </div>
<div class="yhzl-big-box-title" style="padding-top: 1.5%;">履职管理</div> </div>
<div class="echarts"> <div class="page-right-c">
<div id="lzglChart" class="chart-auto"></div> <div class="yhzl-big-box">
</div> <div class="yhzl-big-box-title" style="padding-top: 1.5%;">履职管理</div>
</div> <div class="echarts">
</div> <div id="lzglChart" class="chart-auto"></div>
<div class="page-right-b"> </div>
<div class="yhzl-big-box" style="background-color: rgba(3,15,42,.7)"> </div>
<div id="ygzcChart" class="chart-auto"></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>
</div>
</div>
</div> </div>
</template> </template>
<script> <script>
const baseurl = process.env.VUE_APP_BASE_API const baseurl = process.env.VUE_APP_BASE_API
import { import {
tableMixin tableMixin
} from 'common' } from 'common'
import vueSeamlessScroll from 'vue-seamless-scroll' import vueSeamlessScroll from 'vue-seamless-scroll'
import * as echarts from 'echarts'; import * as echarts from 'echarts';
import aqpng from '@/assets/images/aq.png'; import aqpng from '@/assets/images/aq.png';
import gspicture from '@/assets/images/gs.jpg'; import gspicture from '@/assets/images/gs.jpg';
import { import {
doQuery as doQueryfx doQuery as doQueryfx
} from "@/api/riskPrecontrol/riskAnalysis.js"; } from "@/api/riskPrecontrol/riskAnalysis.js";
import { import {
queryYhsbtj as doQueryyh queryYhsbtj as doQueryyh
} from "@/api/dangerManagement/yhslhz.js"; } from "@/api/dangerManagement/yhslhz.js";
import { import {
doQuery as doQueryDcl doQuery as doQueryDcl
} from "@/api/dangerManagement/enterSafetyRecords.js" } from "@/api/dangerManagement/enterSafetyRecords.js"
import { import {
queryBglxFile queryBglxFile
} from '@/api/threeViolations/enterTV.js'; } from '@/api/threeViolations/enterTV.js';
import { import {
doQueryWithFile doQueryWithFile
} from '@/api/basicData/ryq.js'; } from '@/api/basicData/ryq.js';
import { import {
fxpcQuery, lzglQuery, ygczQuery, yhtjQuery, yjylQuery,gsQuery fxpcQuery,
} from '@/api/home/homepage.js' lzglQuery,
import ryqno from '@/assets/images/ryqno.png' ygczQuery,
export default { yhtjQuery,
components: { yjylQuery,
gsQuery
vueSeamlessScroll } from '@/api/home/homepage.js'
}, import ryqno from '@/assets/images/ryqno.png'
// mixins: [tableMixin],
computed: { var allUserInfo = JSON.parse(sessionStorage.getItem('allUserInfo'));
gsid() { console.log(allUserInfo, 'allUserInfo')
return this.queryParams1.gsid
export default {
components: {
vueSeamlessScroll
}, },
}, // mixins: [tableMixin],
watch: { computed: {
gsid(val) { gsid() {
/* 监听公司id*/ return this.queryParams1.gsid
if (val) { },
this.queryParams2.gsid = this.queryParams1.gsid bmid() {
this.doQueryfx() return this.queryParams1.bmid
this.doQueryyh(); },
this.postYhzl();//隐患治理
this.postFxpc();//风险排查
this.postLzgl();//履职管理
this.postYgcz();//员工持证
}
}, },
height(value){ watch: {
document.addEventListener('fullscreenchange', (event) => { gsid(val) {
if (!document.fullscreenElement) { /* 监听公司id*/
// 全屏已退出 if (val) {
console.log('Exited full screen'); 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:[], bmid(val) {
height:300, /* 监听公司id*/
showListRy: [], if (val) {
queryParams1: { this.queryParams2.bmid = this.queryParams1.bmid
grouptype: 'GS', this.doQueryfx()
rwlx: 'D', this.doQueryyh();
gsid: '', this.postYhzl(); //隐患治理
ksrq: new Date().getTime(), this.postFxpc(); //风险排查
jsrq: new Date().getTime() this.postLzgl(); //履职管理
this.postYgcz(); //员工持证
}, }
queryParams2: {
hzfs: 'GS',
gsid: '',
ksrq: null,
jsrq: new Date().getTime()
},
queryParams: {
queryType: 'YHWCL'
// zt:'S'
}, },
carHeight:"290px", height(value) {
ryqno: ryqno, document.addEventListener('fullscreenchange', (event) => {
aqpng: aqpng, if (!document.fullscreenElement) {
gspicture:gspicture, // 全屏已退出
baseurl: baseurl, console.log('Exited full screen');
showList: [], }
/* dom*/ });
fxpcChart: null, // setTimeout(() => {
yhclChart: null,
yjylChart :null,
yhzlChart :null,
rfxpcChart:null,
lzglChart:null,
ygzcChart:null
} // this.fxpcChart.resize();
}, // this.yhclChart.resize();
methods: { // this.yjylChart.resize();
handleDoubleClick(){ // 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')); this.fullScreen(document.getElementById('homePage'));
setTimeout(() => { setTimeout(() => {
this.fxpcChart.resize(); this.fxpcChart.resize();
...@@ -344,514 +427,673 @@ doQueryWithFile({}).then(res => { ...@@ -344,514 +427,673 @@ doQueryWithFile({}).then(res => {
this.lzglChart.resize(); this.lzglChart.resize();
this.ygzcChart.resize(); this.ygzcChart.resize();
this.$nextTick(() => { this.$nextTick(() => {
this.height=document.getElementById('homePageBody').parentNode.clientHeight; this.height = document.getElementById('homePageBody').parentNode.clientHeight;
this.carHeight=this.height*0.4-60+'px'; this.carHeight = this.height * 0.4 - 60 + 'px';
}) })
}, 50); }, 50);
}, },
fullScreen(element) { fullScreen(element) {
const elem = element || document.documentElement; const elem = element || document.documentElement;
if (elem.webkitRequestFullScreen) { if (elem.webkitRequestFullScreen) {
elem.webkitRequestFullScreen(); elem.webkitRequestFullScreen();
} else if (elem.mozRequestFullScreen) { } else if (elem.mozRequestFullScreen) {
elem.mozRequestFullScreen(); elem.mozRequestFullScreen();
} else if (elem.requestFullScreen) { } else if (elem.requestFullScreen) {
elem.requestFullscreen(); elem.requestFullscreen();
} else if (elem.msExitFullscreen) { } else if (elem.msExitFullscreen) {
elem.msExitFullscreen(); elem.msExitFullscreen();
} else if (elem.msRequestFullscreen) { } else if (elem.msRequestFullscreen) {
elem.msRequestFullscreen(); elem.msRequestFullscreen();
} else if (typeof window.ActiveXObject !== "undefined") { //for Internet Explorer } else if (typeof window.ActiveXObject !== "undefined") { //for Internet Explorer
var wscript = new ActiveXObject("WScript.Shell"); var wscript = new ActiveXObject("WScript.Shell");
if (wscript !== null) { if (wscript !== null) {
wscript.SendKeys("{F11}"); 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) {
bindGsid(item){ delete this.queryParams1.grouptype
this.queryParams1.gsid=item.id this.queryParams1.hzfs = 'BM'
},
postGs(){
gsQuery().then(res=>{
if(res.success){
this.gsList=res.data.records||[];
this.queryParams1.gsid=this.gsList[0]["id"];
} }
}) doQueryfx(this.queryParams1).then(res => {
}, if (res.success) {
doQueryfx() { let value
if (this.queryParams1.rwlx == 'W') { if (res.data.records[0]) {
this.queryParams1.ksrq = new Date(new Date(this.getFirstWeek()).Format('yyyy/MM/dd') + " 00:00:00").getTime(); value = res.data.records[0].wcPercent || 0
this.queryParams1.jsrq = new Date(new Date(this.getlastWeek()).Format('yyyy/MM/dd') + " 23:59:59").getTime(); } else {
} else if (this.queryParams1.rwlx == 'D') { value = 0
this.queryParams1.ksrq = new Date().getTime(); }
this.queryParams1.jsrq = new Date().getTime(); this.setChart(this.fxpcChart, {
} else { name: '风险排查率',
const today = new Date(); title: '风险排查',
today.setDate(1); value: value
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
} }
this.setChart(this.fxpcChart, { })
name: '风险排查率', },
title: '风险排查', getFirstWeek() {
value: value 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: '隐患整改', postYjyl() {
value: value 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,
postYjyl() { titleShow: true,
yjylQuery().then(res => { yAxis: [{
if (res.success) { type: 'value',
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: { axisTick: {
color:"white" color: "white"
},
axisLabel:{
color:'white',
formatter:"{value}%",
},
axisLine:{
lineStyle:{
color:'white'
}, },
}, axisLabel: {
splitLine:{ color: 'white',
show:false, formatter: "{value}%",
color:'white' },
} axisLine: {
} lineStyle: {
], color: 'white'
series:[ },
{ },
splitLine: {
show: false,
color: 'white'
}
}],
series: [{
name: "完成率", name: "完成率",
type: 'bar', type: 'bar',
barWidth: "60%", barWidth: "60%",
data: seriesData, data: seriesData,
show:true, show: true,
position:"top", position: "top",
itemStyle: { itemStyle: {
color: '#03a9f4' color: '#03a9f4'
}, },
label: { label: {
normal: { normal: {
show: true,//开启显示 show: true, //开启显示
position: 'top',//柱形上方 position: 'top', //柱形上方
textStyle: { //数值样式 textStyle: { //数值样式
color: '#fff' color: '#fff'
}, },
formatter:'{c}%' 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"
} }
} }
}]
})
} }
let seriesData = []; })
let series = [ },
{name:"隐患数量",data:[],type:"bar",itemStyle: {color: { postYhzl() {
type: 'linear', // 线性渐变 let params = {
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
})
} }
}) if (this.superuser) {
}, params.gsid = this.queryParams1.gsid
postFxpc(){ } else {
fxpcQuery({ params.bmid = this.queryParams1.bmid
gsid:this.queryParams1.gsid }
}).then(res=>{ yhtjQuery(params).then(res => {
if(res.success){ if (res.success) {
let value = res.data.records ? res.data.records : []; let value = res.data.records ? res.data.records : [];
let seriesStyle={ let seriesStyle = {
show:true, position:"top", show: true,
label: { position: "top",
normal: { label: {
show: true, normal: {
position: 'top', show: true,
color:'white' 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 => { let seriesData = [];
xAxis.push(lx[element.lx]); let series = [{
seriesData[0]["data"].push(element.allCount||0); name: "隐患数量",
seriesData[1]["data"].push(element.wcCount||0); data: [],
}); type: "bar",
this.setBarhart(this.rfxpcChart, { itemStyle: {
title: "风险排查", color: {
xAxis: xAxis, type: 'linear', // 线性渐变
series:seriesData x: 0,
}) y: 0,
} x2: 0,
}) y2: 1,
}, colorStops: [{
postLzgl(){ offset: 0,
lzglQuery({ color: '#5197de' // 0%处的颜色为红色
gsid:this.queryParams1.gsid }, {
}).then(res=>{ offset: 1,
if(res.success){ color: '#08173a' // 100%处的颜色为蓝
let value = res.data.records ? res.data.records : []; }]
let seriesStyle={ }
show:true, position:"top",
label: {
normal: {
show: true,
position: 'top',
} }
} },
{
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: { postFxpc() {
normal: { let params = {
show: true,
position: 'top',
formatter:"{c}%"
},
}
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', // 线性渐变 postLzgl() {
x: 0, lzglQuery({
y: 0, gsid: this.queryParams1.gsid
x2: 0, }).then(res => {
y2: 1, if (res.success) {
colorStops: [{ let value = res.data.records ? res.data.records : [];
offset: 0, let seriesStyle = {
color: '#5197de' // 0%处的颜色为红色 show: true,
}, { position: "top",
offset: 1, label: {
color: '#08173a' // 100%处的颜色为蓝 normal: {
}] show: true,
}},...seriesStyle}, position: 'top',
{name:"完成",data:[],type:"bar", yAxisIndex: 0,itemStyle: {color: { }
type: 'linear', // 线性渐变 }
x: 0, }
y: 0, let seriesStyle2 = {
x2: 0, show: true,
y2: 1, position: "top",
colorStops: [{ label: {
offset: 0, normal: {
color: '#db8723' // 0%处的颜色为红色 show: true,
}, { position: 'top',
offset: 1, formatter: "{c}%"
color: '#11162f' // 100%处的颜色为蓝 },
}]
}},...seriesStyle}, }
{name:"完成率",data:[],type:"line", yAxisIndex: 1,itemStyle: {color: '#049bbc'},...seriesStyle2}, }
], xAxis = [],yAxis=[]; let seriesData = [{
let lx={ name: "全部",
"D":"昨日", data: [],
"W":"本周", type: "bar",
"M":"本月" yAxisIndex: 0,
}; itemStyle: {
let yAxisStyle={axisTick: { color: {
color:"white" type: 'linear', // 线性渐变
}, x: 0,
axisLabel:{ y: 0,
color:'white' x2: 0,
}, y2: 1,
axisLine:{ colorStops: [{
lineStyle:{ offset: 0,
color:'white' 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: {
splitLine:{ color: 'white'
show:false, },
color:'white' axisLine: {
}} lineStyle: {
yAxis=[{},{}]; color: 'white'
yAxis[0]={...{ name: "数量",type: "value",position: "left",},...yAxisStyle}; },
yAxis[1]={...yAxisStyle,...{ name: "完成率",type: "value",position: "right", axisLabel: { },
formatter: "{value}%" splitLine: {
} show: false,
}}; color: 'white'
value.forEach(element => { }
}
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]); xAxis.push(lx[element.lx]);
seriesData[0]["data"].push(element.allCount||0); seriesData[0]["data"].push(element.allCount || 0);
seriesData[1]["data"].push(element.wcCount||0); seriesData[1]["data"].push(element.wcCount || 0);
let percent=element.allCount?(element.wcCount/element.allCount):0; let percent = element.allCount ? (element.wcCount / element.allCount) : 0;
seriesData[2]["data"].push(Number(parseFloat(percent*100).toFixed(2))); seriesData[2]["data"].push(Number(parseFloat(percent * 100).toFixed(2)));
}); });
this.setBarhart(this.lzglChart, { this.setBarhart(this.lzglChart, {
title: "履职管理", title: "履职管理",
xAxis: xAxis, xAxis: xAxis,
yAxis:yAxis, yAxis: yAxis,
series:seriesData series: seriesData
}) })
} }
}) })
}, },
postYgcz(){ postYgcz() {
ygczQuery({ ygczQuery({
gsid:this.queryParams1.gsid gsid: this.queryParams1.gsid
}).then(res=>{ }).then(res => {
if(res.success){ if (res.success) {
let value = res.data.records ? res.data.records : []; let value = res.data.records ? res.data.records : [];
let seriesStyle={ let seriesStyle = {
show:true, position:"top", show: true,
label: { position: "top",
normal: { label: {
show: true, normal: {
position: 'top', show: true,
color:'white' position: 'top',
} color: 'white'
} }
}; }
let yAxisStyle={axisTick: { };
color:"white", let yAxisStyle = {
show:false axisTick: {
}, color: "white",
axisLabel:{ show: false
color:'white',
show:false
},
axisLine:{
show:false,
lineStyle:{
color:'white'
}, },
}, axisLabel: {
splitLine:{ color: 'white',
show:false, show: false
color:'white' },
}} axisLine: {
let seriesData = [ show: false,
{name:"持证人数",data:[],type:"bar",barWidth:20, stack: 'total',itemStyle: {color: "#334284"},...seriesStyle}, lineStyle: {
{name:"即将到期",data:[],type:"bar",barWidth:20, stack: 'total',itemStyle: {color: ""},...seriesStyle}, color: 'white'
], xAxis = []; },
value.forEach(element => { },
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); xAxis.push(element.flName);
seriesData[0]["data"].push(element.allCount-element.dqCount||0); seriesData[0]["data"].push(element.allCount - element.dqCount || 0);
seriesData[1]["data"].push(element.dqCount||0); seriesData[1]["data"].push(element.dqCount || 0);
}); });
this.setBarhart(this.ygzcChart, { this.setBarhart(this.ygzcChart, {
title: "员工持证", title: "员工持证",
titleShow:true, titleShow: true,
yAxis: { yAxis: {
name:"种类", name: "种类",
data:xAxis, data: xAxis,
show:false, show: false,
type:"category",...yAxisStyle type: "category",
}, ...yAxisStyle
customxAxis:{ },
type:"value", customxAxis: {
boundaryGap: [0, 0.01],...yAxisStyle type: "value",
}, boundaryGap: [0, 0.01],
series:seriesData ...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'
} }
}, })
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: { axisLine: {
lineStyle: { lineStyle: {
width: 6, width: 6,
...@@ -881,310 +1123,324 @@ doQueryWithFile({}).then(res => { ...@@ -881,310 +1123,324 @@ doQueryWithFile({}).then(res => {
} }
}, },
data: [ data: [{
{ value: setting.value,
value: setting.value, name: setting.name
name: setting.name }]
} }]
] }
} /* 渲染dom*/
] chartDom.setOption(option);
} chartDom.resize();
/* 渲染dom*/ },
chartDom.setOption(option); //渲染柱状图
chartDom.resize(); setBarhart(chartDom, setting) {
}, /* 基础配置*/
//渲染柱状图 let option = {
setBarhart(chartDom, setting) { title: {
/* 基础配置*/ show: setting.titleShow || false,
let option = { text: setting.title || "",
title: { top: 20,
show: setting.titleShow||false, left: "center",
text: setting.title || "", textStyle: {
top: 20, fontSize: 18,
left: "center", fontWeight: 600,
textStyle: { align: 'center',
fontSize: 18, verticalAlign: 'middle',
fontWeight: 600, color: 'white'
align: 'center', }
verticalAlign: 'middle', },
color:'white' tooltip: {
} trigger: 'axis',
}, axisPointer: {
tooltip: { type: 'shadow'
trigger: 'axis', }
axisPointer: { },
type: 'shadow' grid: {
} left: '3%',
}, right: '4%',
grid: { bottom: '3%',
left: '3%', top: '20%',
right: '4%', containLabel: true
bottom: '3%', },
top:'20%', xAxis: setting.customxAxis || [{
containLabel: true
},
xAxis: setting.customxAxis||[
{
type: 'category', type: 'category',
data: setting.xAxis, data: setting.xAxis,
axisTick: { axisTick: {
alignWithLabel: true, alignWithLabel: true,
color:"white" color: "white"
}, },
axisLabel:{ axisLabel: {
color:'white', color: 'white',
interval: 0, // 横轴信息全部显示 interval: 0, // 横轴信息全部显示
}, },
axisLine:{ axisLine: {
lineStyle:{ lineStyle: {
color:'white' color: 'white'
}, },
}, },
splitLine:{ splitLine: {
show:false, show: false,
color:'white' color: 'white'
} }
} }],
], yAxis: setting.yAxis || [{
yAxis: setting.yAxis||[
{
type: 'value', type: 'value',
axisTick: { axisTick: {
color:"white" color: "white"
}, },
axisLabel:{ axisLabel: {
color:'white' color: 'white'
}, },
axisLine:{ axisLine: {
lineStyle:{ lineStyle: {
color:'white' color: 'white'
}, },
}, },
splitLine:{ splitLine: {
show:false, show: false,
color:'white' color: 'white'
} }
} }],
], series: setting.series || []
series: setting.series||[] }
} /* 渲染dom*/
/* 渲染dom*/ chartDom.setOption(option);
chartDom.setOption(option); chartDom.resize();
chartDom.resize(); },
},
}
} }
}
</script> </script>
<style lang="scss" scope> <style lang="scss" scope>
.listf { .listf {
float: right; float: right;
} }
.ztcxxx {
height: 60px;
width: 100%;
}
.chart { .ztcxxx {
width: 100%; height: 60px;
height: calc(300px - 60px - 30px); width: 100%;
} }
.homePage { .chart {
width: 35%; width: 100%;
height: 100%; height: calc(300px - 60px - 30px);
}
} .homePage {
width: 35%;
height: 100%;
.nodata { }
background-image: url('/src/assets/image/aq.svg');
}
.lbt { .nodata {
height: 100%; background-image: url('/src/assets/image/aq.svg');
width: 100%; }
.lbtAll { .lbt {
height: 100%; height: 100%;
width: 100%; width: 100%;
.sm { .lbtAll {
padding-top: 16px; height: 100%;
padding-bottom: 26px;
display: flex;
justify-content: center;
align-items: center;
position: absolute;
height: 90px;
width: 100%; width: 100%;
background-color: rgba(0, 0, 0, 0.7);
z-index: 999; .sm {
bottom: 0; padding-top: 16px;
overflow: hidden; padding-bottom: 26px;
text-overflow: ellipsis; display: flex;
justify-content: center;
.infor { align-items: center;
color: #fff; position: absolute;
line-height: 25px; height: 90px;
font-size: 14px; 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) {
.el-carousel__item:nth-child(2n) { background-color: #99a9bf;
background-color: #99a9bf; }
}
.el-carousel__item:nth-child(2n+1) {
.el-carousel__item:nth-child(2n+1) { background-color: #d3dce6;
background-color: #d3dce6; }
}
.page-homepage {
.page-homepage { width: 100%;
width: 100%; height: 100%;
height: 100%; position: relative;
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; display: flex;
justify-content: space-between; background: url('~@/assets/images/background.jpg') no-repeat 50%;
align-items: center; background-size: 100% 100%;
position: absolute;
top: 0; .echarts_nav {
left: 3%; width: 85%;
.iconTable{ height: 48px;
text-align: center; display: flex;
justify-content: space-between;
align-items: center; align-items: center;
width: 100%; position: absolute;
height: 70%; top: 0;
margin-left: .5%; left: 3%;
cursor: pointer;
.nav_border { .iconTable {
text-align: center; text-align: center;
height: 100%; align-items: center;
width: 100%; width: 100%;
color: #fff; height: 70%;
position: relative; margin-left: .5%;
.dv-border-svg-container { cursor: pointer;
.nav_border {
text-align: center;
height: 100%;
width: 100%;
color: #fff;
position: relative;
.dv-border-svg-container {
position: absolute; position: absolute;
display: block; display: block;
} }
.right-top {
right: 0; .right-top {
transform: rotateY(180deg); right: 0;
} transform: rotateY(180deg);
.left-bottom { }
.left-bottom {
bottom: 0; bottom: 0;
transform: rotateX(180deg); transform: rotateX(180deg);
} }
.right-bottom {
right: 0; .right-bottom {
bottom: 0; right: 0;
transform: rotateX(180deg) rotateY(180deg); bottom: 0;
} transform: rotateX(180deg) rotateY(180deg);
.border-box-content{ }
position: relative;
width: 100%; .border-box-content {
height: 100%; position: relative;
.spanTitle {
display: flex;
width: 100%; width: 100%;
height: 100%; height: 100%;
justify-content: center;
align-items: center; .spanTitle {
.icon-zhexiantu{ display: flex;
margin: 0 1% 0 0; width: 100%;
color: #fff; height: 100%;
font-size: 22px; 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%; width: 100%;
height: 40%; margin-top: 48px;
// display: flex;
} }
.page-left-t {
display: flex;
.page-fxpc { .page-left {
flex: 1 // flex: 1;
width: 25%;
float: left;
height: 100%;
display: inline-block;
.page-left-3 {
width: 100%;
height: 30%;
} }
.page-yhhz { .page-left-4 {
flex: 1; 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-center {
.page-left-b {} // flex: 0 0 50%;
} width: 50%;
height: 100%;
display: inline-block;
.page-center { .page-center-t {
// flex: 0 0 50%; width: 100%;
width: 50%; height: 70%;
height: 100%;
display: inline-block;
.page-center-t { .dv-border-box-1 {
width: 100%;
height: 70%;
.dv-border-box-1 {
position: relative; position: relative;
width: 100%; width: 100%;
height: 100%; height: 100%;
.border {
position: absolute; .border {
display: block; position: absolute;
} display: block;
.right-top { }
right: 0;
transform: rotateY(180deg); .right-top {
right: 0;
transform: rotateY(180deg);
} }
.left-bottom { .left-bottom {
bottom: 0; bottom: 0;
transform: rotateX(180deg); transform: rotateX(180deg);
} }
.right-bottom {
right: 0; .right-bottom {
bottom: 0; right: 0;
transform: rotateX(180deg) rotateY(180deg); bottom: 0;
} transform: rotateX(180deg) rotateY(180deg);
.border-box-content { }
position: relative;
width: 100%; .border-box-content {
height: 100%; position: relative;
} width: 100%;
.realPicture-min{ height: 100%;
}
.realPicture-min {
width: 95%; width: 95%;
height: 95%; height: 95%;
position: absolute; position: absolute;
...@@ -1193,67 +1449,77 @@ doQueryWithFile({}).then(res => { ...@@ -1193,67 +1449,77 @@ doQueryWithFile({}).then(res => {
right: 0; right: 0;
left: 0; left: 0;
margin: auto; margin: auto;
.realImg { .realImg {
width: 100%; width: 100%;
height: 100%; height: 100%;
background-repeat: no-repeat; background-repeat: no-repeat;
display: block; display: block;
background: url('~@/assets/images/gs.jpg'); background: url('~@/assets/images/gs.jpg');
background-size: 100% 100%; background-size: 100% 100%;
} }
} }
}
}
.page-center-b {
width: 100%;
height: 30%;
} }
} }
.page-center-b {
width: 100%;
height: 30%;
}
}
.page-right { .page-right {
// flex:1; // flex:1;
width: 25%; width: 25%;
float: right; float: right;
height: 100%; height: 100%;
.page-right-t, .page-right-t,
.page-right-b { .page-right-b {
width: 100%; width: 100%;
height: 30%; height: 30%;
}
.page-right-c {
width: 100%;
height: 40%;
}
} }
.page-right-c{
.chart-auto {
width: 100%; width: 100%;
height: 40%; height: 100%;
} }
}
.chart-auto{ .yhzl-big-box {
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%; width: 100%;
height: 13%; height: 100%;
display: block; color: #fff;
font-size: 16px; background: url('~@/assets/images/bc.png') no-repeat rgba(3, 15, 42, .7) 100% .5%;
font-weight: 700; background-size: 100% 13%;
padding: .5% 0 0 5%;
box-sizing: border-box; .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