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/training.vue | 168 +++++++++++++++++++++++++++++++++++++++++++++-----------
1 files changed, 135 insertions(+), 33 deletions(-)
diff --git a/src/views/riskWarningSys/warningBigScreen/components/training.vue b/src/views/riskWarningSys/warningBigScreen/components/training.vue
index 68eab0b..2410257 100644
--- a/src/views/riskWarningSys/warningBigScreen/components/training.vue
+++ b/src/views/riskWarningSys/warningBigScreen/components/training.vue
@@ -1,5 +1,7 @@
<template>
<div class="charts-cont">
+ <span v-if="lastDays == -1" :class="tip">该部门本年未进行应急演练</span>
+ <span v-else :class="tip">距本年度上次演练结束{{lastDays}}天</span>
<div v-show="curTab === 1" class="train" :id="train1"></div>
<div v-show="curTab === 2" class="train" :id="train2"></div>
<div v-show="curTab === 3" class="train" :id="train3"></div>
@@ -7,59 +9,138 @@
</template>
<script lang="ts">
- import {toRefs, reactive, defineComponent, ref, defineAsyncComponent, onMounted, nextTick, onBeforeUnmount} from 'vue';
+import {
+ toRefs,
+ reactive,
+ defineComponent,
+ ref,
+ defineAsyncComponent,
+ onMounted,
+ nextTick,
+ onBeforeUnmount,
+ 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 {useScreenTheme} from "/@/stores/screenTheme"
import { ElMessage } from 'element-plus'
import type { FormInstance, FormRules } from 'element-plus'
import { workApplyApi } from '/@/api/specialWorkSystem/workApply';
+ import { riskWarningApi } from '/@/api/riskWarning';
import * as echarts from 'echarts';
import '/@/theme/bigScreen.css'
interface stateType {
- curTab: number
+ curTab: number,
+ timeValue: Array<any>,
+ traData: Array<any>,
+ monthData: Array<any>,
+ lastDays: number | null,
+ tip: string,
}
export default defineComponent({
name: 'accident',
components: {},
props:{
- size: Number
+ size: Number,
+ theme: Boolean
},
setup(props) {
const userInfo = useUserInfo()
const { userInfos } = storeToRefs(userInfo);
+ const screenThemes = useScreenTheme()
+ const { screenTheme } = storeToRefs(screenThemes);
const train1 = ref("eChartTrain1" + Date.now() + Math.random())
const train2 = ref("eChartTrain2" + Date.now() + Math.random())
const train3 = ref("eChartTrain3" + Date.now() + Math.random())
const state = reactive<stateType>({
- curTab: 1
+ curTab: 1,
+ timeValue: [],
+ traData: [],
+ monthData: [],
+ lastDays: null,
+ tip: 'tip-dark'
})
+ const timeForm = {
+ hour12: false,
+ year: 'numeric',
+ month: 'numeric',
+ day: '2-digit',
+ hour: '2-digit',
+ minute: '2-digit',
+ second: '2-digit'
+ };
- // const changeTab=()=>{
- // setInterval(()=>{
- // if(state.curTab<3){
- // state.curTab = state.curTab + 1
- // if(state.curTab == 2){
- // nextTick(()=>{
- // initTrain2()
- // })
- // }else{
- // nextTick(()=>{
- // initTrain3()
- // })
- // }
- //
- // }else{
- // state.curTab = 1
- // nextTick(()=>{
- // initTrain1()
- // })
- // }
- // },5000)
- // }
+ const getDataById = async () => {
+ getTime()
+ const data = {
+ depId: screenTheme.value.depId || 1,
+ beginYear: state.timeValue[0],
+ beginMonth: 1,
+ endYear: state.timeValue[0],
+ endMonth: state.timeValue[1]
+ }
+ let res = await riskWarningApi().getEmergencyByDep(data);
+ if (res.data.code === '200') {
+ state.traData = res.data.data
+ const result = []
+ let lastTime = ''
+ for(let index in state.traData){
+ if(state.traData[index].detail && state.traData[index].detail.length>0){
+ let total = state.traData[index].detail.reduce((pre,cur)=>{
+ return pre+cur.practiceCount
+ },0)
+ result.push(total)
+ state.traData[index].totalCount = total
+ }else{
+ result.push(0)
+ }
+ for(let i in state.traData[index].detail){
+ if(state.traData[index].detail[i].lastPracticeTime != null){
+ lastTime = state.traData[index].detail[i].lastPracticeTime
+ }
+ }
+ }
+ if(!lastTime){
+ state.lastDays = -1
+ }else{
+ const date = new Date(lastTime)
+ const nTime = Date.now() - date.getTime()
+ state.lastDays = Math.floor(nTime / 86400000)
+ }
+ const arrNum = Math.ceil(result.length/4, 10);
+ let index = 0; // 定义初始索引
+ let resIndex = 0; // 用来保存每次拆分的长度
+ while(index< arrNum){
+ state.monthData[index]= result.slice(resIndex,4+resIndex);
+ resIndex += 4;
+ index++;
+ }
+ initTrain1()
+ } else {
+ ElMessage({
+ type: 'warning',
+ message: res.data.msg
+ });
+ }
+ }
+ 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 getTheme =()=>{
+ if(screenTheme.value.isDark){
+ state.tip = 'tip-dark'
+ }else{
+ state.tip = 'tip-light'
+ }
+ }
const changeTab = setInterval(()=>{
if(state.curTab<3){
state.curTab = state.curTab + 1
@@ -119,7 +200,6 @@
},
yAxis: {
type: 'category',
- // data: ['一月', '二月', '三月', '四月', '五月', '六月','七月', '八月', '九月', '十月', '十一月', '十二月'],
data: ['一月', '二月', '三月', '四月'],
axisLine:{
show: true,
@@ -135,8 +215,7 @@
{
name: '2011',
type: 'bar',
- // data: [18203, 23489, 29034, 104970, 131744, 630230, 18203, 23489, 29034, 104970, 131744, 630230]
- data: [18203, 23489, 29034, 104970],
+ data: state.monthData[0],
itemStyle:{
color: {
x: 0,
@@ -212,7 +291,6 @@
},
yAxis: {
type: 'category',
- // data: ['一月', '二月', '三月', '四月', '五月', '六月','七月', '八月', '九月', '十月', '十一月', '十二月'],
data: ['五月', '六月','七月', '八月'],
axisLine:{
show: true,
@@ -229,7 +307,7 @@
name: '2011',
type: 'bar',
// data: [18203, 23489, 29034, 104970, 131744, 630230, 18203, 23489, 29034, 104970, 131744, 630230]
- data: [131744, 630230, 18203, 23489],
+ data: state.monthData[1],
barCategoryGap: '50%',
itemStyle:{
color: {
@@ -322,7 +400,7 @@
name: '2011',
type: 'bar',
// data: [18203, 23489, 29034, 104970, 131744, 630230, 18203, 23489, 29034, 104970, 131744, 630230]
- data: [29034, 104970, 131744, 630230],
+ data: state.monthData[2],
barCategoryGap: '50%',
itemStyle:{
color: {
@@ -366,9 +444,21 @@
return val * (nowClientWidth/1920) * Number(props.size);
}
+
+ watchEffect(() => {
+ if(props.theme){
+ state.tip = 'tip-dark'
+ }else{
+ state.tip = 'tip-light'
+ }
+ getDataById()
+ })
+
// 页面载入时执行方法
onMounted(() => {
- initTrain1();
+ getTime();
+ getTheme();
+ getDataById()
});
onBeforeUnmount(() =>{
clearInterval(changeTab)
@@ -397,6 +487,18 @@
height: 100%;
}
}
+ .tip-dark{
+ display: block;
+ font-size: 0.8rem;
+ color: #11feee;
+ height: 1rem;
+ }
+ .tip-light{
+ display: block;
+ font-size: 0.8rem;
+ color: #333;
+ height: 1rem;
+ }
.home-container {
height: 100%;
overflow: hidden;
--
Gitblit v1.9.2