From 20b0ce2db27b64a60de60aee05dedd448099e330 Mon Sep 17 00:00:00 2001
From: 马宇豪 <978517621@qq.com>
Date: 星期一, 08 七月 2024 10:12:16 +0800
Subject: [PATCH] xiugai
---
src/views/riskWarningSys/warningBigScreen/components/training.vue | 327 ++++--------------------------------------------------
1 files changed, 26 insertions(+), 301 deletions(-)
diff --git a/src/views/riskWarningSys/warningBigScreen/components/training.vue b/src/views/riskWarningSys/warningBigScreen/components/training.vue
index 2410257..4fba1c7 100644
--- a/src/views/riskWarningSys/warningBigScreen/components/training.vue
+++ b/src/views/riskWarningSys/warningBigScreen/components/training.vue
@@ -1,10 +1,6 @@
<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>
+ <div class="train" :id="train1"></div>
</div>
</template>
@@ -34,12 +30,8 @@
import '/@/theme/bigScreen.css'
interface stateType {
- curTab: number,
- timeValue: Array<any>,
traData: Array<any>,
- monthData: Array<any>,
- lastDays: number | null,
- tip: string,
+ changeChart: any
}
export default defineComponent({
name: 'accident',
@@ -48,78 +40,35 @@
size: Number,
theme: Boolean
},
- setup(props) {
+ setup(props,context) {
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,
- timeValue: [],
traData: [],
- monthData: [],
- lastDays: null,
- tip: 'tip-dark'
+ changeChart: null
})
- const timeForm = {
- hour12: false,
- year: 'numeric',
- month: 'numeric',
- day: '2-digit',
- hour: '2-digit',
- minute: '2-digit',
- second: '2-digit'
- };
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);
+ let res = await riskWarningApi().getSafeCheckTask();
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
- }
- }
+ const chartData = state.traData.reduce((acc, curr, index) => {
+ if (index % 4 === 0) acc.push([]);
+ acc[acc.length - 1].push(curr);
+ return acc;
+ }, [])
+ let curIndex = 0
+ const renderCharts = () => {
+ const data = chartData[curIndex]
+ initTrain1(data)
+ curIndex = (curIndex + 1) % chartData.length
}
- 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()
+ renderCharts()
+ state.changeChart = setInterval(renderCharts,5000)
+ context.emit('getData',state.traData)
} else {
ElMessage({
type: 'warning',
@@ -127,43 +76,14 @@
});
}
}
- 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
- if(state.curTab == 2){
- nextTick(()=>{
- initTrain2()
- })
- }else{
- nextTick(()=>{
- initTrain3()
- })
- }
- }else{
- state.curTab = 1
- nextTick(()=>{
- initTrain1()
- })
- }
- },5000)
+ }
+
type EChartsOption = echarts.EChartsOption
// 隐患整改情况
- const initTrain1 =()=>{
+ const initTrain1 =(data)=>{
let dom = document.getElementById(train1.value);
let myChart = echarts.init(dom);
let option: EChartsOption;
@@ -200,7 +120,7 @@
},
yAxis: {
type: 'category',
- data: ['一月', '二月', '三月', '四月'],
+ data: data.map(i=>i.year+ '.' + i.month),
axisLine:{
show: true,
lineStyle:{
@@ -208,14 +128,14 @@
}
},
axisLabel:{
- color: '#999'
+ color: '#fff'
}
},
series: [
{
name: '2011',
type: 'bar',
- data: state.monthData[0],
+ data: data.map(i=>i.count),
itemStyle:{
color: {
x: 0,
@@ -250,193 +170,6 @@
window.addEventListener("resize",function (){
myChart.resize();
});
- echarts.init(document.getElementById(train2.value)).dispose()
- echarts.init(document.getElementById(train3.value)).dispose()
- }
-
- const initTrain2 =()=>{
- let dom = document.getElementById(train2.value);
- let myChart = echarts.init(dom);
- let option: EChartsOption;
-
- option = {
- tooltip: {
- trigger: 'axis',
- axisPointer: {
- type: 'shadow'
- }
- },
- grid: {
- top: '1%',
- left: '2%',
- right: '2%',
- bottom: '2%',
- containLabel: true
- },
- xAxis: {
- type: 'value',
- boundaryGap: [0, 0.01],
- axisLine:{
- show: true,
- lineStyle:{
- type: 'dotted'
- }
- },
- axisLabel:{
- color: '#999'
- },
- splitLine:{
- show: false
- }
- },
- yAxis: {
- type: 'category',
- data: ['五月', '六月','七月', '八月'],
- axisLine:{
- show: true,
- lineStyle:{
- color: '#999'
- }
- },
- axisLabel:{
- color: '#999'
- }
- },
- series: [
- {
- name: '2011',
- type: 'bar',
- // data: [18203, 23489, 29034, 104970, 131744, 630230, 18203, 23489, 29034, 104970, 131744, 630230]
- data: state.monthData[1],
- barCategoryGap: '50%',
- itemStyle:{
- color: {
- x: 0,
- y: 0,
- x2: 1,
- y2: 0,
- colorStops: [
- {
- offset: 0.1,
- color: "#2D74C0", // 线处的颜色
- },
- {
- offset: 0.9,
- color: "#21D9DC", // 坐标轴处的颜色
- },
- ]
- },
- borderRadius: [0,99,99,0]
- },
- label:{
- show: true,
- position: 'outside',
- color: '#999',
- fontSize: fontSize(11)
- }
- }
- ]
- };
-
- option && myChart.setOption(option);
- window.addEventListener("resize",function (){
- myChart.resize();
- });
- echarts.init(document.getElementById(train1.value)).dispose()
- echarts.init(document.getElementById(train3.value)).dispose()
- }
-
- const initTrain3 =()=>{
- let dom = document.getElementById(train3.value);
- let myChart = echarts.init(dom);
- let option: EChartsOption;
-
- option = {
- tooltip: {
- trigger: 'axis',
- axisPointer: {
- type: 'shadow'
- }
- },
- grid: {
- top: '1%',
- left: '2%',
- right: '2%',
- bottom: '2%',
- containLabel: true
- },
- xAxis: {
- type: 'value',
- boundaryGap: [0, 0.01],
- axisLine:{
- show: true,
- lineStyle:{
- type: 'dotted'
- }
- },
- axisLabel:{
- color: '#999'
- },
- splitLine:{
- show: false
- }
- },
- yAxis: {
- type: 'category',
- // data: ['一月', '二月', '三月', '四月', '五月', '六月','七月', '八月', '九月', '十月', '十一月', '十二月'],
- data: ['九月', '十月', '十一月', '十二月'],
- axisLine:{
- show: true,
- lineStyle:{
- color: '#999'
- }
- },
- axisLabel:{
- color: '#999'
- }
- },
- series: [
- {
- name: '2011',
- type: 'bar',
- // data: [18203, 23489, 29034, 104970, 131744, 630230, 18203, 23489, 29034, 104970, 131744, 630230]
- data: state.monthData[2],
- barCategoryGap: '50%',
- itemStyle:{
- color: {
- x: 0,
- y: 0,
- x2: 1,
- y2: 0,
- colorStops: [
- {
- offset: 0.1,
- color: "#2D74C0", // 线处的颜色
- },
- {
- offset: 0.9,
- color: "#21D9DC", // 坐标轴处的颜色
- },
- ]
- },
- borderRadius: [0,99,99,0]
- },
- label:{
- show: true,
- position: 'outside',
- color: '#999',
- fontSize: fontSize(11)
- }
- }
- ]
- };
-
- option && myChart.setOption(option);
- window.addEventListener("resize",function (){
- myChart.resize();
- });
- echarts.init(document.getElementById(train1.value)).dispose()
- echarts.init(document.getElementById(train2.value)).dispose()
}
function fontSize(val){
@@ -446,27 +179,19 @@
watchEffect(() => {
- if(props.theme){
- state.tip = 'tip-dark'
- }else{
- state.tip = 'tip-light'
- }
- getDataById()
+ // getDataById()
})
// 页面载入时执行方法
onMounted(() => {
- getTime();
getTheme();
getDataById()
});
onBeforeUnmount(() =>{
- clearInterval(changeTab)
+ clearInterval(state.changeChart)
})
return {
train1,
- train2,
- train3,
Search,
fontSize,
...toRefs(state)
--
Gitblit v1.9.2