From 1b9fea7d4af68d8f933b2dc42bf6084b9646f64c Mon Sep 17 00:00:00 2001
From: 马宇豪 <978517621@qq.com>
Date: 星期二, 04 三月 2025 08:39:55 +0800
Subject: [PATCH] 修改作业等级名称
---
src/views/riskWarningSys/warningBigScreen/components/training.vue | 325 ++++++++++++-----------------------------------------
1 files changed, 76 insertions(+), 249 deletions(-)
diff --git a/src/views/riskWarningSys/warningBigScreen/components/training.vue b/src/views/riskWarningSys/warningBigScreen/components/training.vue
index 68eab0b..4fba1c7 100644
--- a/src/views/riskWarningSys/warningBigScreen/components/training.vue
+++ b/src/views/riskWarningSys/warningBigScreen/components/training.vue
@@ -1,88 +1,89 @@
<template>
<div class="charts-cont">
- <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>
<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
+ traData: Array<any>,
+ changeChart: any
}
export default defineComponent({
name: 'accident',
components: {},
props:{
- size: Number
+ 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
+ traData: [],
+ changeChart: null
})
- // 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 changeTab = setInterval(()=>{
- if(state.curTab<3){
- state.curTab = state.curTab + 1
- if(state.curTab == 2){
- nextTick(()=>{
- initTrain2()
- })
- }else{
- nextTick(()=>{
- initTrain3()
- })
- }
+ const getDataById = async () => {
+ let res = await riskWarningApi().getSafeCheckTask();
+ if (res.data.code === '200') {
+ state.traData = res.data.data
+ 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
+ }
+ renderCharts()
+ state.changeChart = setInterval(renderCharts,5000)
+ context.emit('getData',state.traData)
+ } else {
+ ElMessage({
+ type: 'warning',
+ message: res.data.msg
+ });
+ }
+ }
- }else{
- state.curTab = 1
- nextTick(()=>{
- initTrain1()
- })
- }
- },5000)
+ const getTheme =()=>{
+
+ }
+
type EChartsOption = echarts.EChartsOption
// 隐患整改情况
- const initTrain1 =()=>{
+ const initTrain1 =(data)=>{
let dom = document.getElementById(train1.value);
let myChart = echarts.init(dom);
let option: EChartsOption;
@@ -119,8 +120,7 @@
},
yAxis: {
type: 'category',
- // data: ['一月', '二月', '三月', '四月', '五月', '六月','七月', '八月', '九月', '十月', '十一月', '十二月'],
- data: ['一月', '二月', '三月', '四月'],
+ data: data.map(i=>i.year+ '.' + i.month),
axisLine:{
show: true,
lineStyle:{
@@ -128,15 +128,14 @@
}
},
axisLabel:{
- color: '#999'
+ color: '#fff'
}
},
series: [
{
name: '2011',
type: 'bar',
- // data: [18203, 23489, 29034, 104970, 131744, 630230, 18203, 23489, 29034, 104970, 131744, 630230]
- data: [18203, 23489, 29034, 104970],
+ data: data.map(i=>i.count),
itemStyle:{
color: {
x: 0,
@@ -171,194 +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: ['一月', '二月', '三月', '四月', '五月', '六月','七月', '八月', '九月', '十月', '十一月', '十二月'],
- 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: [131744, 630230, 18203, 23489],
- 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: [29034, 104970, 131744, 630230],
- 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){
@@ -366,17 +177,21 @@
return val * (nowClientWidth/1920) * Number(props.size);
}
+
+ watchEffect(() => {
+ // getDataById()
+ })
+
// 页面载入时执行方法
onMounted(() => {
- initTrain1();
+ getTheme();
+ getDataById()
});
onBeforeUnmount(() =>{
- clearInterval(changeTab)
+ clearInterval(state.changeChart)
})
return {
train1,
- train2,
- train3,
Search,
fontSize,
...toRefs(state)
@@ -397,6 +212,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