From e5e9b84b800f1623f85be45a3565689917898c78 Mon Sep 17 00:00:00 2001
From: 马宇豪 <978517621@qq.com>
Date: Fri, 10 Mar 2023 18:12:12 +0800
Subject: [PATCH] Default Changelist
---
src/views/riskWarningSys/warningBigScreen/components/risk.vue | 623 +++++++++++++++++++++++++++++++++++++-------------------
1 files changed, 410 insertions(+), 213 deletions(-)
diff --git a/src/views/riskWarningSys/warningBigScreen/components/risk.vue b/src/views/riskWarningSys/warningBigScreen/components/risk.vue
index 038699b..c689cad 100644
--- a/src/views/riskWarningSys/warningBigScreen/components/risk.vue
+++ b/src/views/riskWarningSys/warningBigScreen/components/risk.vue
@@ -1,15 +1,17 @@
<template>
<div class="charts-cont">
- <el-select :class="selector" v-model="month" placeholder="Select" :teleported="false" size="default">
- <el-option
- v-for="item in optionList"
- :key="item.value"
- :label="item.label"
- :value="item.value"
+ <div :class="selector">
+ <el-cascader
+ class="timeSe"
+ :teleported="false"
+ v-model="timeValue"
+ :options="optionList"
+ :props="riskProps"
+ @change="changeTime"
/>
- </el-select>
- <div v-show="curValue===true" class="risk" :id="risk1"></div>
- <div v-show="curValue===false" class="risk" :id="risk2"></div>
+ </div>
+ <div class="risk" :id="risk1"></div>
+<!-- <div v-show="curValue===false" class="risk" :id="risk2"></div>-->
</div>
</template>
@@ -25,21 +27,32 @@
import { workApplyApi } from '/@/api/specialWorkSystem/workApply';
import * as echarts from 'echarts';
import '/@/theme/bigScreen.css'
- import {useScreenTheme} from "/@/stores/screenTheme";
+ import { useScreenTheme } from "/@/stores/screenTheme";
+ import { riskWarningApi } from '/@/api/riskWarning';
+ import {teamManageApi} from "/@/api/systemManage/basicDateManage/personShiftManage/teamManage";
interface stateType {
curValue: boolean,
- month: number,
+ timeValue: Array<any>,
optionList: Array<any>,
- selector: string
+ selector: string,
+ riskData: Array<any>,
+ riskProps: object,
+ departmentList: Array<any>,
+ departmentRecursionList: Array<DepartmentState>;
}
+ interface DepartmentState {
+ depId: number;
+ depName: string;
+ }
export default defineComponent({
name: 'risk',
components: {},
props:{
size: Number,
- theme: Boolean
+ theme: Boolean,
+ dep: Array
},
setup(props) {
const userInfo = useUserInfo()
@@ -47,76 +60,192 @@
const screenThemes = useScreenTheme()
const { screenTheme } = storeToRefs(screenThemes);
const risk1 = ref("eChartRisk1" + Date.now() + Math.random())
- const risk2 = ref("eChartRisk2" + Date.now() + Math.random())
+ // const risk2 = ref("eChartRisk2" + Date.now() + Math.random())
const state = reactive<stateType>({
curValue: true,
- month: 0,
- optionList: [
- {
- label: '年度',
- value: 0
- },
- {
- label: '一月',
- value: 1
- },
- {
- label: '二月',
- value: 2
- },
- {
- label: '三月',
- value: 3
- },
- {
- label: '四月',
- value: 4
- },
- {
- label: '五月',
- value: 5
- },
- {
- label: '六月',
- value: 6
- },
- {
- label: '七月',
- value: 7
- },
- {
- label: '八月',
- value: 8
- },
- {
- label: '九月',
- value: 9
- },
- {
- label: '十月',
- value: 10
- }
- ],
- selector: 'select-dark'
+ timeValue: [],
+ optionList: [],
+ riskProps: {
+ expandTrigger: 'hover'
+ },
+ selector: 'select-dark',
+ riskData: [],
+ departmentList: [],
+ departmentRecursionList: [],
+ myVar: 0
})
+ const timeForm = {
+ hour12: false,
+ year: 'numeric',
+ month: 'numeric',
+ day: '2-digit',
+ hour: '2-digit',
+ minute: '2-digit',
+ second: '2-digit'
+ };
+ const makeList = () =>{
+ for(let i=0;i<=60;i++){
+ const newObj = {
+ label: 1990 + i + '',
+ value: 1990 + i + '',
+ children: [
+ {
+ label: '年度',
+ value: 0
+ },
+ {
+ label: '一月',
+ value: 1
+ },
+ {
+ label: '二月',
+ value: 2
+ },
+ {
+ label: '三月',
+ value: 3
+ },
+ {
+ label: '四月',
+ value: 4
+ },
+ {
+ label: '五月',
+ value: 5
+ },
+ {
+ label: '六月',
+ value: 6
+ },
+ {
+ label: '七月',
+ value: 7
+ },
+ {
+ label: '八月',
+ value: 8
+ },
+ {
+ label: '九月',
+ value: 9
+ },
+ {
+ label: '十月',
+ value: 10
+ },
+ {
+ label: '十一月',
+ value: 11
+ },
+ {
+ label: '十二月',
+ value: 12
+ }
+ ]
+ }
+ state.optionList.push(newObj)
+ }
+ }
+ // const swi = setInterval(()=>{
+ // state.curValue = !state.curValue
+ // if(state.curValue == true){
+ // nextTick(()=>{
+ // initRisk1()
+ // })
+ // }else{
+ // nextTick(()=>{
+ // initRisk2()
+ // })
+ // }
+ //
+ // },5000)
+ // 获取部门列表
+ const getAllDepartment = async () => {
+ let res = await teamManageApi().getAllDepartment();
+ if (res.data.code === '200') {
+ state.departmentList = JSON.parse(JSON.stringify(res.data.data))
+ recursion(state.departmentList);
+ } else {
+ ElMessage({
+ type: 'warning',
+ message: res.data.msg
+ });
+ }
+ };
- const swi = setInterval(()=>{
- state.curValue = !state.curValue
- if(state.curValue == true){
- nextTick(()=>{
- initRisk1()
- })
- }else{
- nextTick(()=>{
- initRisk2()
- })
- }
+ const recursion = (value: any) => {
+ for (let i of value) {
+ if (i.children.length !== 0) {
+ state.departmentRecursionList.push(i);
+ recursion(i.children);
+ } else {
+ state.departmentRecursionList.push(i);
+ }
+ }
+ };
+ // const recursion = (value: any) => {
+ // for (let i of value) {
+ // if (i.children.length !== 0) {
+ // state.departmentRecursionList.push(i);
+ // recursion(i.children);
+ // } else {
+ // state.departmentRecursionList.push(i);
+ // }
+ // }
+ // };
+ const getDataByYearId = async () => {
+ getTime()
+ const data = {
+ depId: screenTheme.value.depId || 1,
+ beginYear: state.timeValue[0],
+ beginMonth: state.timeValue[1],
+ endYear: state.timeValue[0],
+ endMonth: state.timeValue[1]
+ }
+ if(state.timeValue[1] == 0){
+ data.beginMonth = 1
+ data.endMonth = 12
+ }
+ let res = await riskWarningApi().getPreventByTimeDep(data);
+ if (res.data.code === '200') {
+ state.riskData = res.data.data
+ const depList = []
+ const deathList = []
+ const hardList = []
+ const lightList = []
+ for(let index in state.riskData){
+ state.riskData[index].depId = state.departmentRecursionList.find((i: { depId: number }) => i.depId === Number(state.riskData[index].depId))?.depName;
+ depList.push(state.riskData[index].depId)
+ deathList.push(state.riskData[index].detail.deathCount)
+ hardList.push(state.riskData[index].detail.heavyInjureCount)
+ lightList.push(state.riskData[index].detail.lightInjureCount)
+ }
+ // state.departmentList.find((i: { depId: number }) => i.depId === Number(state.details.workDetail.operationDepId))?.depName;
+ if(depList.length == 0){
+ depList.push('该部门不包含子部门数据')
+ deathList.push(0)
+ hardList.push(0)
+ lightList.push(0)
+ }
+ initRisk1(depList,deathList,hardList,lightList)
+ } else {
+ ElMessage({
+ type: 'warning',
+ message: res.data.msg
+ });
+ }
+ }
- },5000)
+ const changeTime = (value)=>{
+ state.timeValue[0] = value[0]
+ state.timeValue[1] = value[1]
+ getDataByYearId()
+ }
+
type EChartsOption = echarts.EChartsOption
// 隐患整改情况
- const initRisk1 =()=>{
+ const initRisk1 =(depList,deathList,hardList,lightList)=>{
let dom = document.getElementById(risk1.value);
let myChart = echarts.init(dom);
@@ -130,8 +259,33 @@
type: 'shadow' // 'shadow' as default; can also be 'line' or 'shadow'
}
},
+ // dataZoom: {
+ // type: 'slider',
+ // show: true,
+ // textStyle: {
+ // color: '#fff'
+ // },
+ // realtime: true,
+ // top: 20,
+ // left: 10,
+ // height: 12,
+ // width: 80,
+ // start: 0,
+ // end: 100,
+ // orient: 'horizontal'
+ // },
+ dataZoom: [
+ //滑动条
+ {
+ xAxisIndex: 0, //这里是从X轴的0刻度开始
+ show: false, //是否显示滑动条，不影响使用
+ type: "slider", // 这个 dataZoom 组件是 slider 型 dataZoom 组件
+ startValue: 0, // 从头开始。
+ endValue: 6, // 一次性展示几个。
+ },
+ ],
legend: {
- top: '1%',
+ top: '0',
left: 'center',
itemWidth: fontSize(10),
itemHeight: fontSize(8),
@@ -148,8 +302,7 @@
},
xAxis: {
type: 'category',
- // data: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'],
- data: ['企业总', 'A部门', 'B部门', 'C部门', 'D部门', 'E部门'],
+ data: depList,
axisLine:{
show: true,
lineStyle:{
@@ -157,7 +310,8 @@
}
},
axisLabel:{
- color: '#999'
+ color: '#999',
+ fontSize: fontSize(9)
}
},
yAxis: {
@@ -186,8 +340,7 @@
emphasis: {
focus: 'series'
},
- // data: [320, 302, 301, 334, 390, 330, 320, 301, 334, 390, 330, 320]
- data: [320, 302, 301, 334, 390, 330],
+ data: deathList,
barCategoryGap: '50%'
},
{
@@ -200,8 +353,7 @@
emphasis: {
focus: 'series'
},
- // data: [120, 132, 101, 134, 90, 230, 210, 132, 101, 134, 90, 230]
- data: [120, 132, 101, 134, 90, 230],
+ data: hardList,
barCategoryGap: '50%'
},
{
@@ -214,131 +366,138 @@
emphasis: {
focus: 'series'
},
- // data: [220, 182, 191, 234, 290, 330, 310, 191, 234, 290, 330, 310]
- data: [220, 182, 191, 234, 290, 330],
+ data: lightList,
barCategoryGap: '50%'
}
]
};
-
- option && myChart.setOption(option);
+ // option && myChart.setOption(option);
+ if (option && typeof option === 'object') {
+ myChart.setOption(option);
+ state.myVar = setInterval(function(){
+ if (option.dataZoom[0].endValue == depList.length ) {
+ option.dataZoom[0].endValue = 4;
+ option.dataZoom[0].startValue = 0;
+ } else {
+ option.dataZoom[0].endValue = option.dataZoom[0].endValue + 1;
+ option.dataZoom[0].startValue = option.dataZoom[0].startValue + 1;
+ }
+ myChart.setOption(option);
+ }, 6000)
+ }
window.addEventListener("resize",function (){
myChart.resize();
});
- echarts.init(document.getElementById(risk2.value)).dispose()
+ // echarts.init(document.getElementById(risk2.value)).dispose()
}
- const initRisk2 =()=>{
- let dom = document.getElementById(risk2.value);
- let myChart = echarts.init(dom);
-
- let option: EChartsOption;
-
- option = {
- tooltip: {
- trigger: 'axis',
- axisPointer: {
- // Use axis to trigger tooltip
- type: 'shadow' // 'shadow' as default; can also be 'line' or 'shadow'
- }
- },
- legend: {
- top: '1%',
- left: 'center',
- itemWidth: fontSize(10),
- itemHeight: fontSize(8),
- textStyle:{
- color: 'auto',
- fontSize: fontSize(12)
- }
- },
- grid: {
- left: '2%',
- right: '4%',
- bottom: '0',
- containLabel: true
- },
- xAxis: {
- type: 'category',
- // data: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'],
- data: ['F部门', 'G部门', 'H部门', 'I部门', 'J部门', 'K部门'],
- axisLine:{
- show: true,
- lineStyle:{
- color: '#999'
- }
- },
- axisLabel:{
- color: '#999'
- }
- },
- yAxis: {
- type: 'value',
- axisLine:{
- show: true,
- lineStyle:{
- type: 'dotted'
- }
- },
- axisLabel:{
- color: '#999'
- },
- splitLine:{
- show: false
- }
- },
- series: [
- {
- name: '可能造成死亡的',
- type: 'bar',
- stack: 'total',
- label: {
- show: false
- },
- emphasis: {
- focus: 'series'
- },
- // data: [320, 302, 301, 334, 390, 330, 320, 301, 334, 390, 330, 320]
- data: [320, 301, 334, 390, 330, 320],
- barCategoryGap: '50%'
- },
- {
- name: '可能造成重伤的',
- type: 'bar',
- stack: 'total',
- label: {
- show: false
- },
- emphasis: {
- focus: 'series'
- },
- // data: [120, 132, 101, 134, 90, 230, 210, 132, 101, 134, 90, 230]
- data: [90, 230, 210, 132, 101, 134],
- barCategoryGap: '50%'
- },
- {
- name: '可能造成轻伤的',
- type: 'bar',
- stack: 'total',
- label: {
- show: false
- },
- emphasis: {
- focus: 'series'
- },
- // data: [220, 182, 191, 234, 290, 330, 310, 191, 234, 290, 330, 310]
- data: [290, 330, 310, 191, 234, 290],
- barCategoryGap: '50%'
- }
- ]
- };
-
- option && myChart.setOption(option);
- window.addEventListener("resize",function (){
- myChart.resize();
- });
- echarts.init(document.getElementById(risk1.value)).dispose()
- }
+ // const initRisk2 =()=>{
+ // let dom = document.getElementById(risk2.value);
+ // let myChart = echarts.init(dom);
+ //
+ // let option: EChartsOption;
+ //
+ // option = {
+ // tooltip: {
+ // trigger: 'axis',
+ // axisPointer: {
+ // // Use axis to trigger tooltip
+ // type: 'shadow' // 'shadow' as default; can also be 'line' or 'shadow'
+ // }
+ // },
+ // legend: {
+ // top: '1%',
+ // left: 'center',
+ // itemWidth: fontSize(10),
+ // itemHeight: fontSize(8),
+ // textStyle:{
+ // color: 'auto',
+ // fontSize: fontSize(12)
+ // }
+ // },
+ // grid: {
+ // left: '2%',
+ // right: '4%',
+ // bottom: '0',
+ // containLabel: true
+ // },
+ // xAxis: {
+ // type: 'category',
+ // data: ['F部门', 'G部门', 'H部门', 'I部门', 'J部门', 'K部门'],
+ // axisLine:{
+ // show: true,
+ // lineStyle:{
+ // color: '#999'
+ // }
+ // },
+ // axisLabel:{
+ // color: '#999'
+ // }
+ // },
+ // yAxis: {
+ // type: 'value',
+ // axisLine:{
+ // show: true,
+ // lineStyle:{
+ // type: 'dotted'
+ // }
+ // },
+ // axisLabel:{
+ // color: '#999'
+ // },
+ // splitLine:{
+ // show: false
+ // }
+ // },
+ // series: [
+ // {
+ // name: '可能造成死亡的',
+ // type: 'bar',
+ // stack: 'total',
+ // label: {
+ // show: false
+ // },
+ // emphasis: {
+ // focus: 'series'
+ // },
+ // data: [320, 301, 334, 390, 330, 320],
+ // barCategoryGap: '50%'
+ // },
+ // {
+ // name: '可能造成重伤的',
+ // type: 'bar',
+ // stack: 'total',
+ // label: {
+ // show: false
+ // },
+ // emphasis: {
+ // focus: 'series'
+ // },
+ // data: [90, 230, 210, 132, 101, 134],
+ // barCategoryGap: '50%'
+ // },
+ // {
+ // name: '可能造成轻伤的',
+ // type: 'bar',
+ // stack: 'total',
+ // label: {
+ // show: false
+ // },
+ // emphasis: {
+ // focus: 'series'
+ // },
+ // data: [290, 330, 310, 191, 234, 290],
+ // barCategoryGap: '50%'
+ // }
+ // ]
+ // };
+ //
+ // option && myChart.setOption(option);
+ // window.addEventListener("resize",function (){
+ // myChart.resize();
+ // });
+ // echarts.init(document.getElementById(risk1.value)).dispose()
+ // }
const getTheme =()=>{
if(screenTheme.value.isDark){
@@ -348,12 +507,20 @@
}
}
+ const getTime = () =>{
+ const curTime = new Date().toLocaleString('zh', timeForm).replace(/\//g, '-');
+ const temp = curTime.split('-')
+ state.timeValue[0] = temp[0]
+ state.timeValue[1] = Number(temp[1])
+ }
+
watchEffect(() => {
if(props.theme){
state.selector = 'select-dark'
}else{
state.selector = 'select-light'
}
+ getDataByYearId()
})
function fontSize(val){
@@ -363,19 +530,23 @@
// 页面载入时执行方法
onMounted(() => {
- initRisk1();
+ // initRisk1();
getTheme();
+ getTime();
+ makeList();
+ getAllDepartment();
+ getDataByYearId()
});
onBeforeUnmount(() =>{
- clearInterval(swi)
+ clearInterval(state.myVar)
})
return {
risk1,
- risk2,
Search,
fontSize,
+ changeTime,
...toRefs(state)
};
},
@@ -390,23 +561,36 @@
position: relative;
.select-dark{
position: absolute;
- z-index: 999;
+ z-index: 99999;
top: -20px;
- right: 1.6rem;
+ right: 3rem;
width: 30%;
- height: 20px;
+ height: 1.5rem;
margin-right: 0.8rem;
+ ::v-deep(.el-cascader){
+ width: 100% !important;
+ line-height: 100%;
+ }
::v-deep(.el-popper){
background-color: rgba(10,31,92,1);
border: 1px solid rgba(17,254,238,.4);
color: #11FEEE;
- .el-select-dropdown__item{
+ z-index: 999999 !important;
+ .el-cascader-node__label{
color: #11FEEE;
}
- .el-select-dropdown__item.hover{
- background: #0049af;
+ .el-icon{
+ color: #11FEEE;
}
+ .el-cascader-node{
+ &:hover{
+ background: #0049af;
+ }
+ }
+ }
+ ::v-deep(.el-cascader-menu){
+ min-width: 50px !important;
}
::v-deep(.el-popper__arrow){
&::before{
@@ -433,23 +617,36 @@
.select-light{
position: absolute;
- z-index: 999;
+ z-index: 99999;
top: -20px;
- right: 1.6rem;
+ right: 3rem;
width: 30%;
height: 20px;
margin-right: 0.8rem;
+ ::v-deep(.el-cascader){
+ width: 100% !important;
+ line-height: 100%;
+ }
::v-deep(.el-popper){
background-color: rgba(255,255,255,1);
border: 1px solid #ccc;
color: #fff;
- .el-select-dropdown__item{
+ z-index: 999999 !important;
+ .el-cascader-node__label{
color: #000;
}
- .el-select-dropdown__item.hover{
- background: #ccc;
+ .el-icon{
+ color: #000;
}
+ .el-cascader-node{
+ &:hover{
+ background: #ccc;
+ }
+ }
+ }
+ ::v-deep(.el-cascader-menu){
+ min-width: 80px !important;
}
::v-deep(.el-popper__arrow){
&::before{
--
Gitblit v1.9.2