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/accident.vue | 279 +++++++++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 279 insertions(+), 0 deletions(-)
diff --git a/src/views/riskWarningSys/warningBigScreen/components/accident.vue b/src/views/riskWarningSys/warningBigScreen/components/accident.vue
new file mode 100644
index 0000000..9e3175d
--- /dev/null
+++ b/src/views/riskWarningSys/warningBigScreen/components/accident.vue
@@ -0,0 +1,279 @@
+<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>
+ <div v-show="cur===1" class="month" :id="accidentMonth"></div>
+ <div v-show="cur===2" class="month" :id="accidentYear"></div>
+ </div>
+</template>
+
+<script lang="ts">
+ import {toRefs, reactive, defineComponent, ref, defineAsyncComponent, onMounted, nextTick, onUnmounted} 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 {
+ cur: number
+ }
+ export default defineComponent({
+ name: 'accident',
+ components: {},
+ props:{
+ size: Number
+ },
+ setup(props) {
+ const userInfo = useUserInfo()
+ const { userInfos } = storeToRefs(userInfo);
+ const accidentMonth = ref("eChartFix" + Date.now() + Math.random())
+ const accidentYear = ref("eChartFix" + Date.now() + Math.random())
+ const state = reactive<stateType>({
+ cur: 1
+ })
+
+ const changeTab =(i)=>{
+ state.cur = i
+ nextTick(()=>{
+ initAccidentByYear();
+ })
+ }
+ type EChartsOption = echarts.EChartsOption
+ // 隐患整改情况
+ const initAccidentByMonth =()=>{
+ let dom = document.getElementById(accidentMonth.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: '#fff',
+ fontSize: fontSize(11)
+ }
+ },
+ series: [
+ {
+ name: '月度数据',
+ type: 'pie',
+ radius: ['45%', '70%'],
+ avoidLabelOverlap: false,
+ itemStyle: {
+ borderRadius: fontSize(4)
+ },
+ label: {
+ show: false,
+ position: 'outer',
+ fontSize: fontSize(10),
+ color: '#ffffff',
+ 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: 1048, name: '特别重大事故' },
+ { value: 735, name: '重大事故' },
+ { value: 580, name: '较大事故' },
+ { value: 484, name: '一般事故' },
+ { value: 300, name: '未遂事故' }
+ ],
+ center: ['50%','60%']
+ }
+ ]
+ };
+
+ option && myChart.setOption(option);
+
+ window.addEventListener("resize",function (){
+ 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: '#fff',
+ fontSize: fontSize(11)
+ }
+ },
+ series: [
+ {
+ name: '年度数据',
+ type: 'pie',
+ radius: ['45%', '70%'],
+ avoidLabelOverlap: false,
+ itemStyle: {
+ borderRadius: fontSize(4)
+ },
+ label: {
+ show: false,
+ position: 'outer',
+ fontSize: fontSize(10),
+ color: '#ffffff',
+ 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: 1048, name: '特别重大事故' },
+ { value: 735, name: '重大事故' },
+ { value: 580, name: '较大事故' },
+ { value: 484, name: '一般事故' },
+ { value: 300, name: '未遂事故' }
+ ],
+ center: ['50%','60%']
+ }
+ ]
+ };
+
+ option && myChart.setOption(option);
+
+ window.addEventListener("resize",function (){
+ myChart.resize();
+ });
+ }
+
+
+ function fontSize(val){
+ let nowClientWidth = document.documentElement.clientWidth;
+ return val * (nowClientWidth/1920) * Number(props.size);
+ }
+
+ // 页面载入时执行方法
+ onMounted(() => {
+ initAccidentByMonth();
+ // initAccidentByYear();
+ });
+
+ onUnmounted(() =>{
+ })
+
+ return {
+ accidentMonth,
+ accidentYear,
+ Search,
+ changeTab,
+ fontSize,
+ ...toRefs(state)
+ };
+ },
+ });
+</script>
+
+<style scoped lang="scss">
+ .charts-cont{
+ width: 100%;
+ height: 100%;
+ padding: 5%;
+ position: relative;
+
+ .choose{
+ position: absolute;
+ right: 5%;
+ bottom: 20px;
+ 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: rgba(17,254,238,.4);
+ border: 1px solid rgba(17,254,238,.4);
+ border-radius: 2px;
+ cursor: pointer;
+ }
+ div:hover{
+ color: #11FEEE;
+ border: 1px solid #11FEEE;
+ }
+ .act{
+ color: #11FEEE;
+ border: 1px solid #11FEEE;
+ }
+ }
+ .month{
+ 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