<template>
|
<div class="charts-cont">
|
<div :class="selector">
|
<el-cascader
|
class="timeSe"
|
:teleported="false"
|
v-model="timeValue"
|
:options="optionList"
|
:props="riskProps"
|
@change="changeTime"
|
/>
|
</div>
|
<div class="month" :id="accidentMonth"></div>
|
</div>
|
</template>
|
|
<script lang="ts">
|
import {toRefs, reactive, defineComponent, ref, defineAsyncComponent, onMounted, nextTick, onUnmounted, watchEffect} from 'vue';
|
import { storeToRefs } from 'pinia';
|
import { initBackEndControlRoutes } from '/@/router/backEnd';
|
import {useUserInfo} from "/@/stores/userInfo";
|
import { Session } from '/@/utils/storage';
|
import { Search } from '@element-plus/icons-vue'
|
import { ElMessage } from 'element-plus'
|
import type { FormInstance, FormRules } from 'element-plus'
|
import { workApplyApi } from '/@/api/specialWorkSystem/workApply';
|
import * as echarts from "echarts";
|
import '/@/theme/bigScreen.css'
|
import {useScreenTheme} from "/@/stores/screenTheme"
|
import { riskWarningApi } from '/@/api/riskWarning';
|
import {teamManageApi} from "/@/api/systemManage/basicDateManage/personShiftManage/teamManage";
|
interface stateType {
|
curColor: string,
|
accData: Array<any>;
|
timeValue: Array<any>,
|
optionList: Array<any>,
|
selector: string,
|
riskProps: object
|
}
|
export default defineComponent({
|
name: 'accident',
|
components: {},
|
props:{
|
size: Number,
|
theme: Boolean
|
},
|
setup(props) {
|
const userInfo = useUserInfo()
|
const { userInfos } = storeToRefs(userInfo);
|
const screenThemes = useScreenTheme()
|
const { screenTheme } = storeToRefs(screenThemes);
|
const accidentMonth = ref("eChartFix" + Date.now() + Math.random())
|
const state = reactive<stateType>({
|
curColor: '#fff',
|
accData: [],
|
timeValue: [],
|
optionList: [],
|
riskProps: {
|
expandTrigger: 'hover'
|
},
|
selector: 'select-dark'
|
})
|
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 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])
|
}
|
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().getRiskByTimeDep(data);
|
if (res.data.code === '200') {
|
state.accData = res.data.data[0].detail
|
const oneList = res.data.data[0].detail[0].count
|
const twoList = res.data.data[0].detail[1].count
|
const threeList = res.data.data[0].detail[2].count
|
const fourList = res.data.data[0].detail[3].count
|
const fiveList = res.data.data[0].detail[4].count
|
initAccidentByMonth(oneList,twoList,threeList,fourList,fiveList)
|
} else {
|
ElMessage({
|
type: 'warning',
|
message: res.data.msg
|
});
|
}
|
}
|
|
type EChartsOption = echarts.EChartsOption
|
// 隐患整改情况
|
const initAccidentByMonth =(one:number,two:number,three:number,four:number,five:number)=>{
|
let dom = document.getElementById(accidentMonth.value);
|
let myChart = echarts.init(dom);
|
|
let option: EChartsOption;
|
|
option = {
|
tooltip: {
|
trigger: 'item'
|
},
|
legend: {
|
top: '0',
|
left: 'center',
|
itemWidth: fontSize(10),
|
itemHeight: fontSize(8),
|
textStyle:{
|
color: 'auto',
|
fontSize: fontSize(11)
|
}
|
},
|
series: [
|
{
|
name: '事故等级数量',
|
type: 'pie',
|
radius: ['50%', '80%'],
|
avoidLabelOverlap: false,
|
itemStyle: {
|
borderRadius: fontSize(2)
|
},
|
label: {
|
show: false,
|
position: 'outer',
|
fontSize: fontSize(10),
|
textBorderWidth: 0,
|
width: fontSize(40),
|
overflow: 'break'
|
},
|
// labelLine: {
|
// show: true,
|
// length: fontSize(10),
|
// length2: fontSize(10)
|
// },
|
emphasis: {
|
label: {
|
show: true,
|
fontSize: fontSize(22),
|
fontWeight: 'bold'
|
}
|
},
|
data: [
|
{ value: one, name: '特别重大事故' },
|
{ value: two, name: '重大事故' },
|
{ value: three, name: '较大事故' },
|
{ value: four, name: '一般事故' },
|
{ value: five, name: '未遂事故' }
|
],
|
center: ['50%','60%']
|
}
|
]
|
};
|
|
option && myChart.setOption(option);
|
|
window.addEventListener("resize",function (){
|
myChart.resize();
|
});
|
}
|
|
|
function fontSize(val){
|
let nowClientWidth = document.documentElement.clientWidth;
|
return val * (nowClientWidth/1920) * Number(props.size);
|
}
|
const getTheme =()=>{
|
if(screenTheme.value.isDark){
|
state.selector = 'select-dark'
|
}else{
|
state.selector = 'select-light'
|
}
|
}
|
|
watchEffect(() => {
|
if(props.theme){
|
state.selector = 'select-dark'
|
}else{
|
state.selector = 'select-light'
|
}
|
getDataByYearId()
|
})
|
|
const changeTime = (value)=>{
|
state.timeValue[0] = value[0]
|
state.timeValue[1] = value[1]
|
getDataByYearId()
|
}
|
|
// 页面载入时执行方法
|
onMounted(() => {
|
getTheme();
|
getTime();
|
makeList();
|
getDataByYearId();
|
// initAccidentByYear();
|
});
|
|
onUnmounted(() =>{
|
|
})
|
|
return {
|
accidentMonth,
|
Search,
|
changeTime,
|
fontSize,
|
...toRefs(state)
|
};
|
},
|
});
|
</script>
|
|
<style scoped lang="scss">
|
.charts-cont{
|
width: 100%;
|
height: 100%;
|
padding: 5%;
|
position: relative;
|
|
.select-dark{
|
position: absolute;
|
z-index: 99999;
|
top: -20px;
|
right: 3rem;
|
width: 30%;
|
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;
|
z-index: 999999 !important;
|
.el-cascader-node__label{
|
color: #11FEEE;
|
}
|
.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{
|
background-color: rgba(10,31,92,.6) !important;
|
border: 1px solid rgba(17,254,238,.4);
|
}
|
}
|
::v-deep(.el-input__wrapper){
|
box-shadow: none;
|
border: 1px solid rgba(17,254,238,.2);
|
background: rgba(10,31,92,.6) !important;
|
height: 1.5rem;
|
color: #11FEEE;
|
|
input{
|
font-size: 0.8rem;
|
color: #11FEEE;
|
}
|
.el-icon{
|
color: #11FEEE;
|
}
|
}
|
}
|
|
.select-light{
|
position: absolute;
|
z-index: 99999;
|
top: -20px;
|
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;
|
z-index: 999999 !important;
|
.el-cascader-node__label{
|
color: #000;
|
}
|
.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{
|
background-color: rgba(255,255,255,.6) !important;
|
border: 1px solid #ccc;
|
}
|
}
|
::v-deep(.el-input__wrapper){
|
box-shadow: none;
|
border: 1px solid #ccc;
|
background: #fff !important;
|
height: 1.5rem;
|
color: #fff;
|
|
input{
|
font-size: 0.8rem;
|
color: #000;
|
}
|
.el-icon{
|
color: #000;
|
}
|
}
|
}
|
.month{
|
width: 100%;
|
height: 100%;
|
}
|
}
|
.home-container {
|
height: 100%;
|
overflow: hidden;
|
position: relative;
|
.el-row{
|
margin-bottom: 20px;
|
}
|
.el-row:last-child {
|
margin-bottom: 0;
|
}
|
.el-input{
|
width: 100% !important;
|
}
|
.el-date-editor::v-deep{
|
width: 100%;
|
}
|
.el-select{
|
width: 100%;
|
}
|
.el-cascader{
|
width: 100% !important;
|
}
|
}
|
</style>
|
