From 421d5510fa769b99aa41dadfc7dfa59a5939a642 Mon Sep 17 00:00:00 2001
From: Admin <978517621@qq.com>
Date: 星期一, 05 九月 2022 17:09:36 +0800
Subject: [PATCH] Default Changelist
---
src/views/riskWarningSys/warningBigScreen/components/accident.vue | 104 ++++++++++++++++++++++++++++++++++++++--------------
1 files changed, 76 insertions(+), 28 deletions(-)
diff --git a/src/views/riskWarningSys/warningBigScreen/components/accident.vue b/src/views/riskWarningSys/warningBigScreen/components/accident.vue
index 9e3175d..ef12e23 100644
--- a/src/views/riskWarningSys/warningBigScreen/components/accident.vue
+++ b/src/views/riskWarningSys/warningBigScreen/components/accident.vue
@@ -1,6 +1,6 @@
<template>
<div class="charts-cont">
- <div class="choose">
+ <div :class="choose" >
<div :class="cur===1?'act':''" @click="changeTab(1)">月度</div>
<div :class="cur===2?'act':''" @click="changeTab(2)">年度</div>
</div>
@@ -10,7 +10,7 @@
</template>
<script lang="ts">
- import {toRefs, reactive, defineComponent, ref, defineAsyncComponent, onMounted, nextTick, onUnmounted} from 'vue';
+ import {toRefs, reactive, defineComponent, ref, defineAsyncComponent, onMounted, nextTick, onUnmounted, watchEffect} from 'vue';
import { storeToRefs } from 'pinia';
import { initBackEndControlRoutes } from '/@/router/backEnd';
import {useUserInfo} from "/@/stores/userInfo";
@@ -21,24 +21,31 @@
import { workApplyApi } from '/@/api/specialWorkSystem/workApply';
import * as echarts from "echarts";
import '/@/theme/bigScreen.css'
-
+ import {useScreenTheme} from "/@/stores/screenTheme"
interface stateType {
- cur: number
+ cur: number,
+ curColor: string,
+ choose: 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 accidentMonth = ref("eChartFix" + Date.now() + Math.random())
const accidentYear = ref("eChartFix" + Date.now() + Math.random())
const state = reactive<stateType>({
- cur: 1
+ cur: 1,
+ curColor: '#fff',
+ choose: 'choose-dark'
})
const changeTab =(i)=>{
@@ -65,7 +72,7 @@
itemWidth: fontSize(10),
itemHeight: fontSize(8),
textStyle:{
- color: '#fff',
+ color: 'auto',
fontSize: fontSize(11)
}
},
@@ -73,16 +80,15 @@
{
name: '月度数据',
type: 'pie',
- radius: ['45%', '70%'],
+ radius: ['50%', '80%'],
avoidLabelOverlap: false,
itemStyle: {
- borderRadius: fontSize(4)
+ borderRadius: fontSize(2)
},
label: {
show: false,
position: 'outer',
fontSize: fontSize(10),
- color: '#ffffff',
textBorderWidth: 0,
width: fontSize(40),
overflow: 'break'
@@ -100,11 +106,11 @@
}
},
data: [
- { value: 1048, name: '特别重大事故' },
- { value: 735, name: '重大事故' },
- { value: 580, name: '较大事故' },
- { value: 484, name: '一般事故' },
- { value: 300, name: '未遂事故' }
+ { value: 1, name: '特别重大事故' },
+ { value: 10, name: '重大事故' },
+ { value: 20, name: '较大事故' },
+ { value: 33, name: '一般事故' },
+ { value: 50, name: '未遂事故' }
],
center: ['50%','60%']
}
@@ -134,7 +140,7 @@
itemWidth: fontSize(10),
itemHeight: fontSize(8),
textStyle:{
- color: '#fff',
+ color: 'auto',
fontSize: fontSize(11)
}
},
@@ -142,16 +148,15 @@
{
name: '年度数据',
type: 'pie',
- radius: ['45%', '70%'],
+ radius: ['50%', '80%'],
avoidLabelOverlap: false,
itemStyle: {
- borderRadius: fontSize(4)
+ borderRadius: fontSize(2)
},
label: {
show: false,
position: 'outer',
fontSize: fontSize(10),
- color: '#ffffff',
textBorderWidth: 0,
width: fontSize(40),
overflow: 'break'
@@ -169,11 +174,11 @@
}
},
data: [
- { value: 1048, name: '特别重大事故' },
- { value: 735, name: '重大事故' },
- { value: 580, name: '较大事故' },
- { value: 484, name: '一般事故' },
- { value: 300, name: '未遂事故' }
+ { value: 10, name: '特别重大事故' },
+ { value: 20, name: '重大事故' },
+ { value: 100, name: '较大事故' },
+ { value: 130, name: '一般事故' },
+ { value: 150, name: '未遂事故' }
],
center: ['50%','60%']
}
@@ -187,15 +192,31 @@
});
}
-
function fontSize(val){
let nowClientWidth = document.documentElement.clientWidth;
return val * (nowClientWidth/1920) * Number(props.size);
}
+ const getTheme =()=>{
+ if(screenTheme.value.isDark){
+ state.choose = 'choose-dark'
+ }else{
+ state.choose = 'choose-light'
+ }
+ }
+
+ watchEffect(() => {
+ if(props.theme){
+ state.choose = 'choose-dark'
+ }else{
+ state.choose = 'choose-light'
+ }
+ })
+
// 页面载入时执行方法
onMounted(() => {
initAccidentByMonth();
+ getTheme()
// initAccidentByYear();
});
@@ -221,10 +242,10 @@
padding: 5%;
position: relative;
- .choose{
+ .choose-dark{
position: absolute;
- right: 5%;
- bottom: 20px;
+ right: 4%;
+ bottom: 4%;
z-index: 999;
display: flex;
align-items: center;
@@ -248,6 +269,33 @@
border: 1px solid #11FEEE;
}
}
+ .choose-light{
+ position: absolute;
+ right: 4%;
+ bottom: 4%;
+ 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: #ccc;
+ border: 1px solid #ccc;
+ border-radius: 2px;
+ cursor: pointer;
+ }
+ div:hover{
+ color: #333;
+ border: 1px solid #333;
+ }
+ .act{
+ color: #333;
+ border: 1px solid #333;
+ }
+ }
.month{
width: 100%;
height: 100%;
--
Gitblit v1.9.2