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