From e5e9b84b800f1623f85be45a3565689917898c78 Mon Sep 17 00:00:00 2001
From: 马宇豪 <978517621@qq.com>
Date: 星期五, 10 三月 2023 18:12:12 +0800
Subject: [PATCH] Default Changelist
---
src/views/riskWarningSys/warningBigScreen/components/accident.vue | 391 +++++++++++++++++++++++++++++++++++--------------------
1 files changed, 251 insertions(+), 140 deletions(-)
diff --git a/src/views/riskWarningSys/warningBigScreen/components/accident.vue b/src/views/riskWarningSys/warningBigScreen/components/accident.vue
index 2f15dfe..30f8621 100644
--- a/src/views/riskWarningSys/warningBigScreen/components/accident.vue
+++ b/src/views/riskWarningSys/warningBigScreen/components/accident.vue
@@ -1,11 +1,16 @@
<template>
<div class="charts-cont">
- <div :class="choose" >
- <div :class="cur===1?'act':''" @click="changeTab(1)">月度</div>
- <div :class="cur===2?'act':''" @click="changeTab(2)">年度</div>
+ <div :class="selector">
+ <el-cascader
+ class="timeSe"
+ :teleported="false"
+ v-model="timeValue"
+ :options="optionList"
+ :props="riskProps"
+ @change="changeTime"
+ />
</div>
- <div v-show="cur===1" class="month" :id="accidentMonth"></div>
- <div v-show="cur===2" class="month" :id="accidentYear"></div>
+ <div class="month" :id="accidentMonth"></div>
</div>
</template>
@@ -22,12 +27,16 @@
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 {
- cur: number,
curColor: string,
- choose: string
- }
+ accData: Array<any>;
+ timeValue: Array<any>,
+ optionList: Array<any>,
+ selector: string,
+ riskProps: object
+ }
export default defineComponent({
name: 'accident',
components: {},
@@ -41,22 +50,127 @@
const screenThemes = useScreenTheme()
const { screenTheme } = storeToRefs(screenThemes);
const accidentMonth = ref("eChartFix" + Date.now() + Math.random())
- const accidentYear = ref("eChartFix" + Date.now() + Math.random())
const state = reactive<stateType>({
- cur: 1,
curColor: '#fff',
- choose: 'choose-dark'
+ 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
+ });
+ }
+ }
- const changeTab =(i)=>{
- state.cur = i
- nextTick(()=>{
- initAccidentByYear();
- })
- }
type EChartsOption = echarts.EChartsOption
// 隐患整改情况
- const initAccidentByMonth =()=>{
+ const initAccidentByMonth =(one:number,two:number,three:number,four:number,five:number)=>{
let dom = document.getElementById(accidentMonth.value);
let myChart = echarts.init(dom);
@@ -78,7 +192,7 @@
},
series: [
{
- name: '月度数据',
+ name: '事故等级数量',
type: 'pie',
radius: ['50%', '80%'],
avoidLabelOverlap: false,
@@ -106,11 +220,11 @@
}
},
data: [
- { value: 1, name: '特别重大事故' },
- { value: 10, name: '重大事故' },
- { value: 20, name: '较大事故' },
- { value: 33, name: '一般事故' },
- { value: 50, name: '未遂事故' }
+ { value: one, name: '特别重大事故' },
+ { value: two, name: '重大事故' },
+ { value: three, name: '较大事故' },
+ { value: four, name: '一般事故' },
+ { value: five, name: '未遂事故' }
],
center: ['50%','60%']
}
@@ -123,74 +237,7 @@
myChart.resize();
});
}
- // 隐患整改情况
- const initAccidentByYear =()=>{
- let dom = document.getElementById(accidentYear.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: 10, name: '特别重大事故' },
- { value: 20, name: '重大事故' },
- { value: 100, name: '较大事故' },
- { value: 130, name: '一般事故' },
- { value: 150, name: '未遂事故' }
- ],
- center: ['50%','60%']
- }
- ]
- };
-
- option && myChart.setOption(option);
-
- window.addEventListener("resize",function (){
- myChart.resize();
- });
- }
function fontSize(val){
let nowClientWidth = document.documentElement.clientWidth;
@@ -198,25 +245,33 @@
}
const getTheme =()=>{
if(screenTheme.value.isDark){
- state.choose = 'choose-dark'
+ state.selector = 'select-dark'
}else{
- state.choose = 'choose-light'
+ state.selector = 'select-light'
}
}
watchEffect(() => {
if(props.theme){
- state.choose = 'choose-dark'
+ state.selector = 'select-dark'
}else{
- state.choose = 'choose-light'
+ state.selector = 'select-light'
}
+ getDataByYearId()
})
+ const changeTime = (value)=>{
+ state.timeValue[0] = value[0]
+ state.timeValue[1] = value[1]
+ getDataByYearId()
+ }
// 页面载入时执行方法
onMounted(() => {
- initAccidentByMonth();
- getTheme()
+ getTheme();
+ getTime();
+ makeList();
+ getDataByYearId();
// initAccidentByYear();
});
@@ -226,9 +281,8 @@
return {
accidentMonth,
- accidentYear,
Search,
- changeTab,
+ changeTime,
fontSize,
...toRefs(state)
};
@@ -243,58 +297,115 @@
padding: 5%;
position: relative;
- .choose-dark{
+ .select-dark{
position: absolute;
- right: 4%;
- bottom: 4%;
- z-index: 999;
- display: flex;
- align-items: center;
- font-size: 0.75rem;
- justify-content: space-between;
+ z-index: 99999;
+ top: -20px;
+ right: 3rem;
+ width: 30%;
+ height: 1.5rem;
+ margin-right: 0.8rem;
- div{
- padding: 2px 6px;
- box-sizing: border-box;
- color: rgba(17,254,238,.4);
+ ::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);
- border-radius: 2px;
- cursor: pointer;
- }
- div:hover{
color: #11FEEE;
- border: 1px solid #11FEEE;
+ z-index: 999999 !important;
+ .el-cascader-node__label{
+ color: #11FEEE;
+ }
+ .el-icon{
+ color: #11FEEE;
+ }
+ .el-cascader-node{
+ &:hover{
+ background: #0049af;
+ }
+ }
}
- .act{
+ ::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;
- border: 1px solid #11FEEE;
+
+ input{
+ font-size: 0.8rem;
+ color: #11FEEE;
+ }
+ .el-icon{
+ color: #11FEEE;
+ }
}
}
- .choose-light{
- position: absolute;
- right: 4%;
- bottom: 4%;
- z-index: 999;
- display: flex;
- align-items: center;
- font-size: 0.75rem;
- justify-content: space-between;
- div{
- padding: 2px 6px;
- box-sizing: border-box;
- color: #ccc;
+ .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;
- border-radius: 2px;
- cursor: pointer;
+ color: #fff;
+ z-index: 999999 !important;
+ .el-cascader-node__label{
+ color: #000;
+ }
+ .el-icon{
+ color: #000;
+ }
+ .el-cascader-node{
+ &:hover{
+ background: #ccc;
+ }
+ }
}
- div:hover{
- color: #333;
- border: 1px solid #333;
+ ::v-deep(.el-cascader-menu){
+ min-width: 80px !important;
}
- .act{
- color: #333;
- border: 1px solid #333;
+ ::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{
--
Gitblit v1.9.2