From eafc031e3e6e48778d22b5455358273714944012 Mon Sep 17 00:00:00 2001
From: Your Name <123456>
Date: 星期一, 05 九月 2022 09:53:16 +0800
Subject: [PATCH] Merge branch 'master' of https://sinanoaq.cn:8888/r/gtqt
---
src/views/riskWarningSys/warningBigScreen/components/risk.vue | 341 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 341 insertions(+), 0 deletions(-)
diff --git a/src/views/riskWarningSys/warningBigScreen/components/risk.vue b/src/views/riskWarningSys/warningBigScreen/components/risk.vue
new file mode 100644
index 0000000..11c3cc1
--- /dev/null
+++ b/src/views/riskWarningSys/warningBigScreen/components/risk.vue
@@ -0,0 +1,341 @@
+<template>
+ <div class="charts-cont">
+ <div v-show="curValue===true" class="risk" :id="risk1"></div>
+ <div v-show="curValue===false" class="risk" :id="risk2"></div>
+ </div>
+</template>
+
+<script lang="ts">
+ import {toRefs, reactive, defineComponent, ref, defineAsyncComponent, onMounted, nextTick, onBeforeUnmount} 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 { ElMessage } from 'element-plus'
+ import type { FormInstance, FormRules } from 'element-plus'
+ import { workApplyApi } from '/@/api/specialWorkSystem/workApply';
+ import * as echarts from 'echarts';
+ import '/@/theme/bigScreen.css'
+
+
+ interface stateType {
+ curValue: boolean
+ }
+ export default defineComponent({
+ name: 'risk',
+ components: {},
+ props:{
+ size: Number,
+ month: Number
+ },
+ setup(props) {
+ const userInfo = useUserInfo()
+ const { userInfos } = storeToRefs(userInfo);
+ const risk1 = ref("eChartRisk1" + Date.now() + Math.random())
+ const risk2 = ref("eChartRisk2" + Date.now() + Math.random())
+ const state = reactive<stateType>({
+ curValue: true
+ })
+
+ const swi = setInterval(()=>{
+ state.curValue = !state.curValue
+ if(state.curValue == true){
+ nextTick(()=>{
+ initRisk1()
+ })
+ }else{
+ nextTick(()=>{
+ initRisk2()
+ })
+ }
+
+ },5000)
+
+ type EChartsOption = echarts.EChartsOption
+ // 隐患整改情况
+ const initRisk1 =()=>{
+ let dom = document.getElementById(risk1.value);
+ let myChart = echarts.init(dom);
+
+ let option: EChartsOption;
+
+ option = {
+ tooltip: {
+ trigger: 'axis',
+ axisPointer: {
+ // Use axis to trigger tooltip
+ type: 'shadow' // 'shadow' as default; can also be 'line' or 'shadow'
+ }
+ },
+ legend: {
+ top: '1%',
+ left: 'center',
+ itemWidth: fontSize(10),
+ itemHeight: fontSize(8),
+ textStyle:{
+ color: '#fff',
+ fontSize: fontSize(12)
+ }
+ },
+ grid: {
+ left: '2%',
+ right: '4%',
+ bottom: '0',
+ containLabel: true
+ },
+ xAxis: {
+ type: 'category',
+ // data: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'],
+ data: ['企业总', 'A部门', 'B部门', 'C部门', 'D部门', 'E部门'],
+ axisLine:{
+ show: true,
+ lineStyle:{
+ color: '#fff'
+ }
+ },
+ axisLabel:{
+ color: '#fff'
+ }
+ },
+ yAxis: {
+ type: 'value',
+ axisLine:{
+ show: true,
+ lineStyle:{
+ type: 'dotted'
+ }
+ },
+ axisLabel:{
+ color: '#ccc'
+ },
+ splitLine:{
+ show: false
+ }
+ },
+ series: [
+ {
+ name: '可能造成死亡的',
+ type: 'bar',
+ stack: 'total',
+ label: {
+ show: false
+ },
+ emphasis: {
+ focus: 'series'
+ },
+ // data: [320, 302, 301, 334, 390, 330, 320, 301, 334, 390, 330, 320]
+ data: [320, 302, 301, 334, 390, 330],
+ barCategoryGap: '50%'
+ },
+ {
+ name: '可能造成重伤的',
+ type: 'bar',
+ stack: 'total',
+ label: {
+ show: false
+ },
+ emphasis: {
+ focus: 'series'
+ },
+ // data: [120, 132, 101, 134, 90, 230, 210, 132, 101, 134, 90, 230]
+ data: [120, 132, 101, 134, 90, 230],
+ barCategoryGap: '50%'
+ },
+ {
+ name: '可能造成轻伤的',
+ type: 'bar',
+ stack: 'total',
+ label: {
+ show: false
+ },
+ emphasis: {
+ focus: 'series'
+ },
+ // data: [220, 182, 191, 234, 290, 330, 310, 191, 234, 290, 330, 310]
+ data: [220, 182, 191, 234, 290, 330],
+ barCategoryGap: '50%'
+ }
+ ]
+ };
+
+ option && myChart.setOption(option);
+ window.addEventListener("resize",function (){
+ myChart.resize();
+ });
+ echarts.init(document.getElementById(risk2.value)).dispose()
+ }
+
+ const initRisk2 =()=>{
+ let dom = document.getElementById(risk2.value);
+ let myChart = echarts.init(dom);
+
+ let option: EChartsOption;
+
+ option = {
+ tooltip: {
+ trigger: 'axis',
+ axisPointer: {
+ // Use axis to trigger tooltip
+ type: 'shadow' // 'shadow' as default; can also be 'line' or 'shadow'
+ }
+ },
+ legend: {
+ top: '1%',
+ left: 'center',
+ itemWidth: fontSize(10),
+ itemHeight: fontSize(8),
+ textStyle:{
+ color: '#fff',
+ fontSize: fontSize(12)
+ }
+ },
+ grid: {
+ left: '2%',
+ right: '4%',
+ bottom: '0',
+ containLabel: true
+ },
+ xAxis: {
+ type: 'category',
+ // data: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'],
+ data: ['F部门', 'G部门', 'H部门', 'I部门', 'J部门', 'K部门'],
+ axisLine:{
+ show: true,
+ lineStyle:{
+ color: '#fff'
+ }
+ },
+ axisLabel:{
+ color: '#fff'
+ }
+ },
+ yAxis: {
+ type: 'value',
+ axisLine:{
+ show: true,
+ lineStyle:{
+ type: 'dotted'
+ }
+ },
+ axisLabel:{
+ color: '#ccc'
+ },
+ splitLine:{
+ show: false
+ }
+ },
+ series: [
+ {
+ name: '可能造成死亡的',
+ type: 'bar',
+ stack: 'total',
+ label: {
+ show: false
+ },
+ emphasis: {
+ focus: 'series'
+ },
+ // data: [320, 302, 301, 334, 390, 330, 320, 301, 334, 390, 330, 320]
+ data: [320, 301, 334, 390, 330, 320],
+ barCategoryGap: '50%'
+ },
+ {
+ name: '可能造成重伤的',
+ type: 'bar',
+ stack: 'total',
+ label: {
+ show: false
+ },
+ emphasis: {
+ focus: 'series'
+ },
+ // data: [120, 132, 101, 134, 90, 230, 210, 132, 101, 134, 90, 230]
+ data: [90, 230, 210, 132, 101, 134],
+ barCategoryGap: '50%'
+ },
+ {
+ name: '可能造成轻伤的',
+ type: 'bar',
+ stack: 'total',
+ label: {
+ show: false
+ },
+ emphasis: {
+ focus: 'series'
+ },
+ // data: [220, 182, 191, 234, 290, 330, 310, 191, 234, 290, 330, 310]
+ data: [290, 330, 310, 191, 234, 290],
+ barCategoryGap: '50%'
+ }
+ ]
+ };
+
+ option && myChart.setOption(option);
+ window.addEventListener("resize",function (){
+ myChart.resize();
+ });
+ echarts.init(document.getElementById(risk1.value)).dispose()
+ }
+
+ function fontSize(val){
+ let nowClientWidth = document.documentElement.clientWidth;
+ return val * (nowClientWidth/1920) * Number(props.size);
+ }
+
+ // 页面载入时执行方法
+ onMounted(() => {
+ initRisk1();
+ });
+
+ onBeforeUnmount(() =>{
+ clearInterval(swi)
+ })
+
+ return {
+ risk1,
+ risk2,
+ Search,
+ fontSize,
+ ...toRefs(state)
+ };
+ },
+ });
+</script>
+
+<style scoped lang="scss">
+ .charts-cont{
+ width: 100%;
+ height: 100%;
+ padding: 5% 5% 2%;
+ position: relative;
+
+ .risk{
+ width: 100%;
+ height: 100%;
+ }
+ }
+ .home-container {
+ height: 100%;
+ overflow: hidden;
+ position: relative;
+ .el-row{
+ margin-bottom: 20px;
+ }
+ .el-row:last-child {
+ margin-bottom: 0;
+ }
+ .el-input{
+ width: 100% !important;
+ }
+ .el-date-editor::v-deep{
+ width: 100%;
+ }
+ .el-select{
+ width: 100%;
+ }
+ .el-cascader{
+ width: 100% !important;
+ }
+ }
+</style>
--
Gitblit v1.9.2