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/assets/warningScreen/skin-light.png | 0
src/assets/warningScreen/pagebg-r-light.png | 0
src/views/riskWarningSys/warningBigScreen/components/danger.vue | 81 +++
src/views/riskWarningSys/warningBigScreen/components/message.vue | 39 +
src/views/riskWarningSys/warningBigScreen/indexs/index.vue | 279 +++++++++++
src/views/riskWarningSys/warningBigScreen/components/SPI.vue | 144 +++---
src/assets/warningScreen/riskprocast-light.jpg | 0
src/views/riskWarningSys/warningBigScreen/components/training.vue | 24
src/stores/screenTheme.ts | 21
src/assets/warningScreen/skin.png | 0
src/views/riskWarningSys/warningBigScreen/components/stock.vue | 62 +-
src/assets/warningScreen/pagebg-l-light.png | 0
src/stores/interface/index.ts | 6
src/assets/warningScreen/pagebg-t-light.png | 0
src/views/riskWarningSys/warningBigScreen/components/accident.vue | 104 +++-
src/assets/warningScreen/logo_light.png | 0
src/views/riskWarningSys/warningBigScreen/index.vue | 446 +++++++++++++++++-
src/views/riskWarningSys/warningBigScreen/components/risk.vue | 16
src/views/specialWorkSystem/workTicket/workApply/components/fire.vue | 10
src/views/riskWarningSys/warningBigScreen/components/educate.vue | 2
src/assets/warningScreen/logo_dark.png | 0
src/views/riskWarningSys/warningBigScreen/components/profession.vue | 137 +++--
22 files changed, 1,079 insertions(+), 292 deletions(-)
diff --git a/src/assets/warningScreen/logo_dark.png b/src/assets/warningScreen/logo_dark.png
index 8d9d810..96a4d41 100644
--- a/src/assets/warningScreen/logo_dark.png
+++ b/src/assets/warningScreen/logo_dark.png
Binary files differ
diff --git a/src/assets/warningScreen/logo_light.png b/src/assets/warningScreen/logo_light.png
new file mode 100644
index 0000000..ae1f11c
--- /dev/null
+++ b/src/assets/warningScreen/logo_light.png
Binary files differ
diff --git a/src/assets/warningScreen/pagebg-l-light.png b/src/assets/warningScreen/pagebg-l-light.png
new file mode 100644
index 0000000..8986559
--- /dev/null
+++ b/src/assets/warningScreen/pagebg-l-light.png
Binary files differ
diff --git a/src/assets/warningScreen/pagebg-r-light.png b/src/assets/warningScreen/pagebg-r-light.png
new file mode 100644
index 0000000..4f74fe3
--- /dev/null
+++ b/src/assets/warningScreen/pagebg-r-light.png
Binary files differ
diff --git a/src/assets/warningScreen/pagebg-t-light.png b/src/assets/warningScreen/pagebg-t-light.png
new file mode 100644
index 0000000..57372d2
--- /dev/null
+++ b/src/assets/warningScreen/pagebg-t-light.png
Binary files differ
diff --git a/src/assets/warningScreen/riskprocast-light.jpg b/src/assets/warningScreen/riskprocast-light.jpg
new file mode 100644
index 0000000..e82b553
--- /dev/null
+++ b/src/assets/warningScreen/riskprocast-light.jpg
Binary files differ
diff --git a/src/assets/warningScreen/skin-light.png b/src/assets/warningScreen/skin-light.png
new file mode 100644
index 0000000..8f6500d
--- /dev/null
+++ b/src/assets/warningScreen/skin-light.png
Binary files differ
diff --git a/src/assets/warningScreen/skin.png b/src/assets/warningScreen/skin.png
new file mode 100644
index 0000000..5736022
--- /dev/null
+++ b/src/assets/warningScreen/skin.png
Binary files differ
diff --git a/src/stores/interface/index.ts b/src/stores/interface/index.ts
index 455383e..73b93b5 100644
--- a/src/stores/interface/index.ts
+++ b/src/stores/interface/index.ts
@@ -51,6 +51,12 @@
};
}
+export interface screenThemeState {
+ screenTheme: {
+ isDark: boolean
+ }
+}
+
// 布局配置
export interface ThemeConfigState {
isDrawer: boolean;
diff --git a/src/stores/screenTheme.ts b/src/stores/screenTheme.ts
new file mode 100644
index 0000000..13c3592
--- /dev/null
+++ b/src/stores/screenTheme.ts
@@ -0,0 +1,21 @@
+import { defineStore } from 'pinia';
+import { screenThemeState } from './interface';
+
+/**
+ * 路由列表
+ * @methods setRoutesList 设置路由数据
+ * @methods setColumnsMenuHover 设置分栏布局菜单鼠标移入 boolean
+ * @methods setColumnsNavHover 设置分栏布局最左侧导航鼠标移入 boolean
+ */
+export const useScreenTheme = defineStore('screenTheme', {
+ state: (): screenThemeState => ({
+ screenTheme:{
+ isDark: true
+ }
+ }),
+ actions: {
+ async setScreenTheme(value: any) {
+ this.screenTheme.isDark = value;
+ }
+ },
+});
diff --git a/src/views/riskWarningSys/warningBigScreen/components/SPI.vue b/src/views/riskWarningSys/warningBigScreen/components/SPI.vue
index f148306..7568be8 100644
--- a/src/views/riskWarningSys/warningBigScreen/components/SPI.vue
+++ b/src/views/riskWarningSys/warningBigScreen/components/SPI.vue
@@ -26,7 +26,6 @@
components: {},
props:{
size: Number,
- dep: Number
},
setup(props) {
const userInfo = useUserInfo()
@@ -46,20 +45,21 @@
option = {
legend: {
data: ['注意线', '警告线', '危险线', 'SPI预警指数值'],
- top: '0',
- left: 'center',
+ top: '2%',
+ right: '6%',
textStyle:{
- color: '#fff',
- fontSize: fontSize(12)
+ color: '#999',
+ fontSize: fontSize(14)
}
},
+ color: ['rgba(216,55,55)','rgba(235,194,80)','rgba(147,208,81)'],
tooltip: {
trigger: 'axis'
},
grid: {
- left: '4%',
- right: '4%',
- bottom: '5%',
+ left: '8%',
+ right: '8%',
+ bottom: '4%',
},
xAxis: [
{
@@ -69,18 +69,18 @@
axisLine:{
show: true,
lineStyle:{
- color: '#fff'
+ color: '#999'
}
},
splitLine:{
show: true,
lineStyle:{
type: 'dashed',
- color: 'rgba(255,255,255,.4)'
+ color: '#999'
}
},
axisLabel:{
- color: '#fff'
+ color: '#999',
}
}
],
@@ -107,6 +107,64 @@
],
series: [
{
+ name: '危险线',
+ data: [1000, 1000, 1000, 1000, 1000, 1000, 1000, 1000, 1000, 1000, 1000, 1000],
+ type: 'line',
+ lineStyle:{
+ width: 0
+ },
+ areaStyle: {
+ color: {
+ x: 0,
+ y: 0,
+ x2: 0,
+ y2: 1,
+ colorStops: [
+ {
+ offset: 0.1,
+ color: "rgba(216,55,55)", // 线处的颜色
+ },
+ {
+ offset: 0.9,
+ color: "rgba(216,55,55,.1)", // 坐标轴处的颜色
+ },
+ ],
+ }
+ },
+ showSymbol: false,
+ // stack: 'Total',
+ smooth: true
+ },
+ {
+ name: '警告线',
+ data: [750, 750, 750, 750, 750, 750, 750, 750, 750, 750, 750, 750],
+ type: 'line',
+ lineStyle:{
+ width: 0
+ },
+ areaStyle: {
+ color: {
+ x: 0,
+ y: 0,
+ x2: 0,
+ y2: 1,
+ colorStops: [
+ {
+ offset: 0.1,
+ color: "rgba(235,194,80)", // 线处的颜色
+ },
+ {
+ offset: 0.9,
+ color: "rgba(235,194,80,.1)", // 坐标轴处的颜色
+ },
+ ],
+ }
+ },
+ showSymbol: false,
+ // stack: 'Total',
+ smooth: true
+ },
+ {
name: '注意线',
data: [500, 500, 500, 500, 500, 500, 500,500, 500, 500, 500, 500],
type: 'line',
@@ -132,65 +190,7 @@
},
},
showSymbol: false,
- stack: 'Total',
- smooth: true
- },
- {
- name: '警告线',
- data: [250, 250, 250, 250, 250, 250, 250,250, 250, 250, 250, 250],
- type: 'line',
- lineStyle:{
- width: 0
- },
- areaStyle: {
- color: {
- x: 0,
- y: 0,
- x2: 0,
- y2: 1,
- colorStops: [
- {
- offset: 0.1,
- color: "rgba(235,194,80)", // 线处的颜色
- },
- {
- offset: 0.9,
- color: "rgba(235,194,80,.6)", // 坐标轴处的颜色
- },
- ],
- }
- },
- showSymbol: false,
- stack: 'Total',
- smooth: true
- },
- {
- name: '危险线',
- data: [250, 250, 250, 250, 250, 250, 250,250, 250, 250, 250, 250],
- type: 'line',
- lineStyle:{
- width: 0
- },
- areaStyle: {
- color: {
- x: 0,
- y: 0,
- x2: 0,
- y2: 1,
- colorStops: [
- {
- offset: 0.1,
- color: "rgba(216,55,55)", // 线处的颜色
- },
- {
- offset: 0.9,
- color: "rgba(216,55,55,.6)", // 坐标轴处的颜色
- },
- ],
- }
- },
- showSymbol: false,
- stack: 'Total',
+ // stack: 'Total',
smooth: true
},
{
@@ -200,7 +200,7 @@
triggerLineEvent: true,
label:{
show: true,
- color: '#fff',
+ color: '#23E5E5',
fontSize: fontSize(12)
},
lineStyle:{
@@ -246,7 +246,7 @@
.charts-cont{
width: 100%;
height: 100%;
- padding: 5%;
+ padding: 2%;
position: relative;
.spi{
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%;
diff --git a/src/views/riskWarningSys/warningBigScreen/components/danger.vue b/src/views/riskWarningSys/warningBigScreen/components/danger.vue
index 96bdd13..ccf8a14 100644
--- a/src/views/riskWarningSys/warningBigScreen/components/danger.vue
+++ b/src/views/riskWarningSys/warningBigScreen/components/danger.vue
@@ -4,7 +4,7 @@
<!-- <el-option label="月度" value="1"/>-->
<!-- <el-option label="年度" value="2"/>-->
<!-- </el-select>-->
- <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>
@@ -14,7 +14,17 @@
</template>
<script lang="ts">
- import {toRefs, reactive, defineComponent, ref, defineAsyncComponent, onMounted, nextTick } from 'vue';
+ import {
+ toRefs,
+ reactive,
+ defineComponent,
+ ref,
+ computed,
+ defineAsyncComponent,
+ onMounted,
+ nextTick,
+ watchEffect
+ } from 'vue';
import { storeToRefs } from 'pinia';
import { initBackEndControlRoutes } from '/@/router/backEnd';
import {useUserInfo} from "/@/stores/userInfo";
@@ -25,24 +35,30 @@
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,
+ choose: string
}
export default defineComponent({
name: 'danger',
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 dangerMonth = ref("eChartFix" + Date.now() + Math.random())
const dangerYear = ref("eChartFix" + Date.now() + Math.random())
const state = reactive<stateType>({
- cur: 1
+ cur: 1,
+ choose: 'choose-dark'
})
const changeTab =(i)=>{
@@ -70,7 +86,7 @@
itemWidth: fontSize(10),
itemHeight: fontSize(8),
textStyle:{
- color: '#fff',
+ color: 'auto',
fontSize: fontSize(11)
}
},
@@ -133,7 +149,7 @@
itemWidth: fontSize(10),
itemHeight: fontSize(8),
textStyle:{
- color: '#fff',
+ color: 'auto',
fontSize: fontSize(11)
}
},
@@ -183,9 +199,27 @@
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(() => {
initdangerByMonth();
+ getTheme()
});
return {
@@ -207,10 +241,10 @@
padding: 2% 2% 0;
position: relative;
- .choose{
+ .choose-dark{
position: absolute;
- right: 5%;
- bottom: 20px;
+ right: 4%;
+ bottom: 4%;
z-index: 999;
display: flex;
align-items: center;
@@ -234,6 +268,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%;
diff --git a/src/views/riskWarningSys/warningBigScreen/components/educate.vue b/src/views/riskWarningSys/warningBigScreen/components/educate.vue
index 101504a..f327d7e 100644
--- a/src/views/riskWarningSys/warningBigScreen/components/educate.vue
+++ b/src/views/riskWarningSys/warningBigScreen/components/educate.vue
@@ -51,7 +51,7 @@
itemWidth: fontSize(10),
itemHeight: fontSize(8),
textStyle:{
- color: '#fff',
+ color: 'auto',
fontSize: fontSize(11)
}
},
diff --git a/src/views/riskWarningSys/warningBigScreen/components/message.vue b/src/views/riskWarningSys/warningBigScreen/components/message.vue
index 637728b..e2ab6ee 100644
--- a/src/views/riskWarningSys/warningBigScreen/components/message.vue
+++ b/src/views/riskWarningSys/warningBigScreen/components/message.vue
@@ -7,7 +7,7 @@
</template>
<script lang="ts">
- import {toRefs, reactive, defineComponent, ref, defineAsyncComponent, onMounted} from 'vue';
+ import {toRefs, reactive, defineComponent, ref, defineAsyncComponent, onMounted, watchEffect} from 'vue';
import { storeToRefs } from 'pinia';
import { initBackEndControlRoutes } from '/@/router/backEnd';
import {useUserInfo} from "/@/stores/userInfo";
@@ -18,17 +18,20 @@
import { workApplyApi } from '/@/api/specialWorkSystem/workApply';
import * as echarts from 'echarts';
import '/@/theme/bigScreen.css'
-
+ import {useScreenTheme} from "/@/stores/screenTheme"
interface stateType {
}
export default defineComponent({
- name: 'profession',
+ name: 'message',
components: {},
props:{
- size: Number
+ size: Number,
+ theme: Boolean
},
setup(props) {
+ const screenThemes = useScreenTheme()
+ const { screenTheme } = storeToRefs(screenThemes);
const userInfo = useUserInfo()
const { userInfos } = storeToRefs(userInfo);
const pro = ref("eChartPro" + Date.now() + Math.random())
@@ -61,20 +64,44 @@
})
const mouseoverHandler = (e: any) => {
- console.log(e)
+
}
const clickHandler = (e: any) => {
- console.log(e)
+
}
function fontSize(val){
let nowClientWidth = document.documentElement.clientWidth;
return val * (nowClientWidth/1920) * Number(props.size);
}
+ watchEffect(() => {
+ if(props.theme){
+ state.config.headerBGC = '#0049af'
+ state.config.oddRowBGC = 'none'
+ state.config.evenRowBGC = 'rgba(57,122,206,.1)'
+ }else{
+ state.config.headerBGC = '#333'
+ state.config.oddRowBGC = '#888'
+ state.config.evenRowBGC = '#999'
+ }
+ })
+
+ const getTheme =()=>{
+ if(screenTheme.value.isDark){
+ state.config.headerBGC = '#0049af'
+ state.config.oddRowBGC = 'none'
+ state.config.evenRowBGC = 'rgba(57,122,206,.1)'
+ }else{
+ state.config.headerBGC = '#333'
+ state.config.oddRowBGC = '#888'
+ state.config.evenRowBGC = '#999'
+ }
+ }
// 页面载入时执行方法
onMounted(() => {
+ getTheme()
});
return {
diff --git a/src/views/riskWarningSys/warningBigScreen/components/profession.vue b/src/views/riskWarningSys/warningBigScreen/components/profession.vue
index ed926bf..215c675 100644
--- a/src/views/riskWarningSys/warningBigScreen/components/profession.vue
+++ b/src/views/riskWarningSys/warningBigScreen/components/profession.vue
@@ -1,9 +1,9 @@
<template>
<div class="charts-cont">
-<!-- <div class="pro" :id="pro">-->
+ <div class="pro" :id="pro">
-<!-- </div>-->
- <dv-active-ring-chart :config="config" style="width:100%;height:100%" />
+ </div>
+<!-- <dv-active-ring-chart :config="config" style="width:100%;height:100%" />-->
</div>
</template>
@@ -51,74 +51,74 @@
lineWidth: fontSize(25),
digitalFlopStyle: {
fontSize: 16,
- fill: '#fff'
+ fill: '#999'
}
}
})
- // type EChartsOption = echarts.EChartsOption
- // // 隐患整改情况
- // const initPro =()=>{
- // let dom = document.getElementById(pro.value);
- // let myChart = echarts.init(dom);
- //
- // let option: EChartsOption;
- //
- // option = {
- // tooltip: {
- // trigger: 'item'
- // },
- // legend: {
- // top: '0',
- // left: 'center',
- // textStyle:{
- // color: '#fff',
- // fontSize: fontSize(11)
- // }
- // },
- // series: [
- // {
- // name: 'Access From',
- // type: 'pie',
- // radius: ['45%', '70%'],
- // avoidLabelOverlap: false,
- // itemStyle: {
- // borderRadius: 4
- // },
- // label: {
- // show: true,
- // position: 'outer',
- // fontSize: fontSize(12),
- // color: '#ffffff',
- // textBorderWidth: 0,
- // width: 30,
- // overflow: 'break'
- // },
- // labelLine: {
- // show: true,
- // length: 10,
- // length2: 10
- // },
- // emphasis: {
- // label: {
- // show: true,
- // fontSize: fontSize(22),
- // fontWeight: 'bold'
- // }
- // },
- // data: [
- // { value: 1048, name: '持证人员' },
- // { value: 735, name: '非持证人员' }
- // ],
- // center: ['50%','55%']
- // }
- // ]
- // };
- //
- // option && myChart.setOption(option);
- // window.addEventListener("resize",function (){
- // myChart.resize();
- // });
- // }
+ type EChartsOption = echarts.EChartsOption
+ // 隐患整改情况
+ const initPro =()=>{
+ let dom = document.getElementById(pro.value);
+ let myChart = echarts.init(dom);
+
+ let option: EChartsOption;
+
+ option = {
+ tooltip: {
+ trigger: 'item'
+ },
+ legend: {
+ top: '0',
+ left: 'center',
+ textStyle:{
+ color: '#999',
+ fontSize: fontSize(11)
+ }
+ },
+ series: [
+ {
+ name: 'Access From',
+ type: 'pie',
+ radius: ['45%', '70%'],
+ avoidLabelOverlap: false,
+ itemStyle: {
+ borderRadius: 4
+ },
+ label: {
+ show: true,
+ position: 'outer',
+ fontSize: fontSize(12),
+ color: '#999',
+ textBorderWidth: 0,
+ width: 30,
+ overflow: 'break'
+ },
+ labelLine: {
+ show: true,
+ length: 10,
+ length2: 10
+ },
+ emphasis: {
+ label: {
+ show: true,
+ fontSize: fontSize(22),
+ fontWeight: 'bold'
+ }
+ },
+ data: [
+ { value: 1048, name: '持证人员' },
+ { value: 735, name: '非持证人员' }
+ ],
+ center: ['50%','55%']
+ }
+ ]
+ };
+
+ 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);
@@ -126,6 +126,7 @@
// 页面载入时执行方法
onMounted(() => {
+ initPro()
});
return {
diff --git a/src/views/riskWarningSys/warningBigScreen/components/risk.vue b/src/views/riskWarningSys/warningBigScreen/components/risk.vue
index 11c3cc1..9423bda 100644
--- a/src/views/riskWarningSys/warningBigScreen/components/risk.vue
+++ b/src/views/riskWarningSys/warningBigScreen/components/risk.vue
@@ -74,7 +74,7 @@
itemWidth: fontSize(10),
itemHeight: fontSize(8),
textStyle:{
- color: '#fff',
+ color: 'auto',
fontSize: fontSize(12)
}
},
@@ -91,11 +91,11 @@
axisLine:{
show: true,
lineStyle:{
- color: '#fff'
+ color: '#999'
}
},
axisLabel:{
- color: '#fff'
+ color: '#999'
}
},
yAxis: {
@@ -107,7 +107,7 @@
}
},
axisLabel:{
- color: '#ccc'
+ color: '#999'
},
splitLine:{
show: false
@@ -186,7 +186,7 @@
itemWidth: fontSize(10),
itemHeight: fontSize(8),
textStyle:{
- color: '#fff',
+ color: 'auto',
fontSize: fontSize(12)
}
},
@@ -203,11 +203,11 @@
axisLine:{
show: true,
lineStyle:{
- color: '#fff'
+ color: '#999'
}
},
axisLabel:{
- color: '#fff'
+ color: '#999'
}
},
yAxis: {
@@ -219,7 +219,7 @@
}
},
axisLabel:{
- color: '#ccc'
+ color: '#999'
},
splitLine:{
show: false
diff --git a/src/views/riskWarningSys/warningBigScreen/components/stock.vue b/src/views/riskWarningSys/warningBigScreen/components/stock.vue
index d7999b9..1feb3db 100644
--- a/src/views/riskWarningSys/warningBigScreen/components/stock.vue
+++ b/src/views/riskWarningSys/warningBigScreen/components/stock.vue
@@ -63,7 +63,7 @@
{
name: '消防耗材',
type: 'pie',
- radius: ['40%', '45%'],
+ radius: [fontSize(40), fontSize(50)],
data: [
{ value: 2103, name: '消防耗材'},
{ value: 2310, name: '消防耗材未使用'}
@@ -75,12 +75,12 @@
rich: {
total:{
fontSize: fontSize(12),
- color:'#fff',
+ color:'#999',
lineHeight: fontSize(16)
},
active: {
fontSize: fontSize(16),
- color:'#fff',
+ color:'#999',
},
}
},
@@ -115,7 +115,7 @@
{
name: '安全帽',
type: 'pie',
- radius: ['40%', '45%'],
+ radius: [fontSize(40), fontSize(50)],
data: [
{ value: 23509, name: '安全帽'},
{ value: 34312, name: '安全帽未使用'}
@@ -127,12 +127,12 @@
rich: {
total:{
fontSize: fontSize(12),
- color:'#fff',
+ color:'#999',
lineHeight: fontSize(16)
},
active: {
fontSize: fontSize(16),
- color:'#fff',
+ color:'#999',
},
}
},
@@ -167,7 +167,7 @@
{
name: '防护服',
type: 'pie',
- radius: ['40%', '45%'],
+ radius: [fontSize(40), fontSize(50)],
data: [
{ value: 12830, name: '防护服'},
{ value: 22140, name: '防护服未使用'}
@@ -179,12 +179,12 @@
rich: {
total:{
fontSize: fontSize(12),
- color:'#fff',
+ color:'#999',
lineHeight: fontSize(16)
},
active: {
fontSize: fontSize(16),
- color:'#fff',
+ color:'#999',
},
}
},
@@ -221,7 +221,7 @@
{
name: '劳保鞋',
type: 'pie',
- radius: ['40%', '45%'],
+ radius: [fontSize(40), fontSize(50)],
data: [
{ value: 5492, name: '劳保鞋'},
{ value: 10842, name: '劳保鞋未使用'}
@@ -233,12 +233,12 @@
rich: {
total:{
fontSize: fontSize(12),
- color:'#fff',
+ color:'#999',
lineHeight: fontSize(16)
},
active: {
fontSize: fontSize(16),
- color:'#fff',
+ color:'#999',
},
}
},
@@ -273,7 +273,7 @@
{
name: '动火护具',
type: 'pie',
- radius: ['40%', '45%'],
+ radius: [fontSize(40), fontSize(50)],
data: [
{ value: 44043, name: '动火护具'},
{ value: 68102, name: '动火护具未使用' }
@@ -285,12 +285,12 @@
rich: {
total:{
fontSize: fontSize(12),
- color:'#fff',
+ color:'#999',
lineHeight: fontSize(16)
},
active: {
fontSize: fontSize(16),
- color:'#fff',
+ color:'#999',
},
}
},
@@ -343,7 +343,7 @@
{
name: '急救包',
type: 'pie',
- radius: ['40%', '45%'],
+ radius: [fontSize(40), fontSize(50)],
data: [
{ value: 8603, name: '急救包'},
{ value: 12032, name: '急救包未使用'}
@@ -355,12 +355,12 @@
rich: {
total:{
fontSize: fontSize(12),
- color:'#fff',
+ color:'#999',
lineHeight: fontSize(16)
},
active: {
fontSize: fontSize(16),
- color:'#fff',
+ color:'#999',
},
}
},
@@ -397,7 +397,7 @@
{
name: '人员培训资料',
type: 'pie',
- radius: ['40%', '45%'],
+ radius: [fontSize(40), fontSize(50)],
data: [
{ value: 8960, name: '人员培训资料'},
{ value: 9890, name: '人员培训资料未使用'}
@@ -409,12 +409,12 @@
rich: {
total:{
fontSize: fontSize(12),
- color:'#fff',
+ color:'#999',
lineHeight: fontSize(16)
},
active: {
fontSize: fontSize(16),
- color:'#fff',
+ color:'#999',
},
}
},
@@ -451,7 +451,7 @@
{
name: '安全护具',
type: 'pie',
- radius: ['40%', '45%'],
+ radius: [fontSize(40), fontSize(50)],
data: [
{ value: 12302, name: '安全护具'},
{ value: 20130, name: '安全护具未使用'}
@@ -463,12 +463,12 @@
rich: {
total:{
fontSize: fontSize(12),
- color:'#fff',
+ color:'#999',
lineHeight: fontSize(16)
},
active: {
fontSize: fontSize(16),
- color:'#fff',
+ color:'#999',
},
}
},
@@ -505,7 +505,7 @@
{
name: '高空护具',
type: 'pie',
- radius: ['40%', '45%'],
+ radius: [fontSize(40), fontSize(50)],
data: [
{ value: 42948, name: '高空护具'},
{ value: 89342, name: '高空护具未使用'}
@@ -517,12 +517,12 @@
rich: {
total:{
fontSize: fontSize(12),
- color:'#fff',
+ color:'#999',
lineHeight: fontSize(16)
},
active: {
fontSize: fontSize(16),
- color:'#fff',
+ color:'#999',
},
}
},
@@ -559,7 +559,7 @@
{
name: '防尘护具',
type: 'pie',
- radius: ['40%', '45%'],
+ radius: [fontSize(40), fontSize(50)],
data: [
{ value: 1220, name: '防尘护具'},
{ value: 5034, name: '防尘护具未使用' }
@@ -571,12 +571,12 @@
rich: {
total:{
fontSize: fontSize(12),
- color:'#fff',
+ color:'#999',
lineHeight: fontSize(16)
},
active: {
fontSize: fontSize(16),
- color:'#fff',
+ color:'#999',
},
}
},
@@ -647,7 +647,7 @@
.charts-cont{
width: 100%;
height: 100%;
- padding: 4% 2% 2%;
+ padding: 2%;
position: relative;
.stock{
diff --git a/src/views/riskWarningSys/warningBigScreen/components/training.vue b/src/views/riskWarningSys/warningBigScreen/components/training.vue
index eb0cf52..68eab0b 100644
--- a/src/views/riskWarningSys/warningBigScreen/components/training.vue
+++ b/src/views/riskWarningSys/warningBigScreen/components/training.vue
@@ -111,7 +111,7 @@
}
},
axisLabel:{
- color: '#ccc'
+ color: '#999'
},
splitLine:{
show: false
@@ -124,11 +124,11 @@
axisLine:{
show: true,
lineStyle:{
- color: '#fff'
+ color: '#999'
}
},
axisLabel:{
- color: '#fff'
+ color: '#999'
}
},
series: [
@@ -160,7 +160,7 @@
label:{
show: true,
position: 'outside',
- color: '#fff',
+ color: '#999',
fontSize: fontSize(11)
}
}
@@ -204,7 +204,7 @@
}
},
axisLabel:{
- color: '#ccc'
+ color: '#999'
},
splitLine:{
show: false
@@ -217,11 +217,11 @@
axisLine:{
show: true,
lineStyle:{
- color: '#fff'
+ color: '#999'
}
},
axisLabel:{
- color: '#fff'
+ color: '#999'
}
},
series: [
@@ -253,7 +253,7 @@
label:{
show: true,
position: 'outside',
- color: '#fff',
+ color: '#999',
fontSize: fontSize(11)
}
}
@@ -297,7 +297,7 @@
}
},
axisLabel:{
- color: '#ccc'
+ color: '#999'
},
splitLine:{
show: false
@@ -310,11 +310,11 @@
axisLine:{
show: true,
lineStyle:{
- color: '#fff'
+ color: '#999'
}
},
axisLabel:{
- color: '#fff'
+ color: '#999'
}
},
series: [
@@ -346,7 +346,7 @@
label:{
show: true,
position: 'outside',
- color: '#fff',
+ color: '#999',
fontSize: fontSize(11)
}
}
diff --git a/src/views/riskWarningSys/warningBigScreen/index.vue b/src/views/riskWarningSys/warningBigScreen/index.vue
index 7eb9d5f..164931e 100644
--- a/src/views/riskWarningSys/warningBigScreen/index.vue
+++ b/src/views/riskWarningSys/warningBigScreen/index.vue
@@ -1,22 +1,28 @@
<template>
- <div class="container">
+ <div id="container" class="dark">
<div class="header-content">
<div class="logo">
- <img src="../../../assets/warningScreen/logo_dark.png" alt="" />
+ <img v-if="screenTheme.isDark" src="../../../assets/warningScreen/logo_dark.png" alt="" />
+ <img v-else="!screenTheme.isDark" src="../../../assets/warningScreen/logo_light.png" alt="" />
</div>
<div class="title">风险预警预报平台</div>
<div class="title-right">
<!-- <img src="themeStyle.skinIcon" class="qiehuan" @click="changeTheme" />-->
<span class="datetime">{{currentTime}}</span>
<div class="btns">
- <div class="fullbtn" @click="onScreenfullClick">
+ <div class="themeBtn" @click="changeTheme()">
+ <img v-if="screenTheme.isDark" src="../../../assets/warningScreen/skin.png"/>
+ <img v-else src="../../../assets/warningScreen/skin-light.png"/>
+ </div>
+ <div class="fullBtn" @click="onScreenfullClick">
<div class="toFull">
<i class="iconfont" :title="isScreenfull ? $t('message.user.title6') : $t('message.user.title5')" :class="!isScreenfull ? 'icon-fullscreen' : 'icon-tuichuquanping'"></i>
</div>
<div>全屏</div>
</div>
<div class="backBtn" @click="goBack()">
- <img src="../../../assets/loginPage/back-icon.png"/>
+<!-- <img src="../../../assets/loginPage/back-icon.png"/>-->
+ <el-icon><SwitchButton /></el-icon>
<div>退出</div>
</div>
</div>
@@ -25,20 +31,22 @@
<div class="main-content">
<div class="main-left">
<div class="left-top">
- <dv-border-box-13 backgroundColor="rgba(8, 109, 209, 0.2)" class="box-bg"></dv-border-box-13>
+ <dv-border-box-13 :backgroundColor="boxBg" :color="boxColor" class="box-bg"></dv-border-box-13>
<div class="part-tit">
<span>| 事故等级分布</span>
- <img @click="jumpPage(1)" src="../../../assets/warningScreen/small-full.png">
+<!-- <img @click="jumpPage(1)" src="../../../assets/warningScreen/small-full.png">-->
+ <Switch style="width: 1.2rem;height: 1.2rem;cursor: pointer" @click="jumpPage(1)"/>
</div>
<div class="chart-box">
- <accident :size="1"></accident>
+ <accident :size="1" :theme="screenTheme.isDark"></accident>
</div>
</div>
<div class="left-mid">
- <dv-border-box-13 backgroundColor="rgba(8, 109, 209, 0.2)" class="box-bg"></dv-border-box-13>
+ <dv-border-box-13 :backgroundColor="boxBg" :color="boxColor" class="box-bg"></dv-border-box-13>
<div class="part-tit">
<span>| 应急演练次数</span>
- <img @click="jumpPage(2)" src="../../../assets/warningScreen/small-full.png">
+<!-- <img @click="jumpPage(2)" src="../../../assets/warningScreen/small-full.png">-->
+ <Switch style="width: 1.2rem;height: 1.2rem;cursor: pointer" @click="jumpPage(2)"/>
</div>
<div class="chart-box">
<span class="train-tip">距上次演练结束 5 天</span>
@@ -46,7 +54,7 @@
</div>
</div>
<div class="left-bottom">
- <dv-border-box-13 backgroundColor="rgba(8, 109, 209, 0.2)" class="box-bg"></dv-border-box-13>
+ <dv-border-box-13 :backgroundColor="boxBg" :color="boxColor" class="box-bg"></dv-border-box-13>
<div class="part-tit">
<span>| 隐患等级数量分布</span>
<div>
@@ -58,7 +66,8 @@
:value="item.value"
/>
</el-select>
- <img @click="jumpPage(3)" src="../../../assets/warningScreen/small-full.png">
+<!-- <img @click="jumpPage(3)" src="../../../assets/warningScreen/small-full.png">-->
+ <Switch style="width: 1.2rem;height: 1.2rem;cursor: pointer" @click="jumpPage(3)"/>
</div>
</div>
@@ -69,7 +78,7 @@
</div>
<div class="main-middle">
<div class="mid-top">
- <dv-border-box-11 title="SPI数据分析" backgroundColor="rgba(8, 109, 209, 0.2)" class="box-bg"></dv-border-box-11>
+ <dv-border-box-11 title="SPI数据分析" :backgroundColor="boxBg" :color="boxBigColor" class="box-bg"></dv-border-box-11>
<div class="part-tit" style="position: absolute;top: 12%;padding: 0 4%">
<el-cascader
class="spiSe"
@@ -77,41 +86,46 @@
v-model="spiValue"
:options="spiOptions"
:props="props"
+ :show-all-levels="false"
@change="handleChange"
/>
<!-- <span>SPI数据分析</span>-->
- <img @click="jumpPage(4)" src="../../../assets/warningScreen/small-full.png">
+<!-- <img @click="jumpPage(4)" src="../../../assets/warningScreen/small-full.png">-->
+ <Switch style="width: 1.2rem;height: 1.2rem;cursor: pointer" @click="jumpPage(4)"/>
</div>
<div class="chart-box">
- <spi :size="1" :dep="spiValue"></spi>
+ <spi :size="1"></spi>
</div>
</div>
<div class="mid-bottom">
<div class="mid-bot-l">
- <dv-border-box-13 backgroundColor="rgba(8, 109, 209, 0.2)" class="box-bg"></dv-border-box-13>
+ <dv-border-box-13 :backgroundColor="boxBg" :color="boxColor" class="box-bg"></dv-border-box-13>
<div class="part-tit">
<span>| 教育培训分析</span>
- <img @click="jumpPage(5)" src="../../../assets/warningScreen/small-full.png">
+<!-- <img @click="jumpPage(5)" src="../../../assets/warningScreen/small-full.png">-->
+ <Switch style="width: 1.2rem;height: 1.2rem;cursor: pointer" @click="jumpPage(5)"/>
</div>
<div class="chart-box">
<educate :size="1"></educate>
</div>
</div>
<div class="mid-bot-m">
- <dv-border-box-13 backgroundColor="rgba(8, 109, 209, 0.2)" class="box-bg"></dv-border-box-13>
+ <dv-border-box-13 :backgroundColor="boxBg" :color="boxColor" class="box-bg"></dv-border-box-13>
<div class="part-tit">
<span>| 隐患等级</span>
- <img @click="jumpPage(6)" src="../../../assets/warningScreen/small-full.png">
+<!-- <img @click="jumpPage(6)" src="../../../assets/warningScreen/small-full.png">-->
+ <Switch style="width: 1.2rem;height: 1.2rem;cursor: pointer" @click="jumpPage(6)"/>
</div>
<div class="chart-box">
- <danger :size="1"></danger>
+ <danger :size="1" :theme="screenTheme.isDark"></danger>
</div>
</div>
<div class="mid-bot-r">
- <dv-border-box-13 backgroundColor="rgba(8, 109, 209, 0.2)" class="box-bg"></dv-border-box-13>
+ <dv-border-box-13 :backgroundColor="boxBg" :color="boxColor" class="box-bg"></dv-border-box-13>
<div class="part-tit">
<span>| 人员专业度分布</span>
- <img @click="jumpPage(7)" src="../../../assets/warningScreen/small-full.png">
+<!-- <img @click="jumpPage(7)" src="../../../assets/warningScreen/small-full.png">-->
+ <Switch style="width: 1.2rem;height: 1.2rem;cursor: pointer" @click="jumpPage(7)"/>
</div>
<div class="chart-box">
<profession :size="1"></profession>
@@ -121,30 +135,32 @@
</div>
<div class="main-right">
<div class="right-top">
- <dv-border-box-13 backgroundColor="rgba(8, 109, 209, 0.2)" class="box-bg"></dv-border-box-13>
+ <dv-border-box-13 :backgroundColor="boxBg" :color="boxColor" class="box-bg"></dv-border-box-13>
<div class="part-tit">
<span>| 预警消息报告</span>
- <img @click="jumpPage(8)" src="../../../assets/warningScreen/small-full.png">
+<!-- <img @click="jumpPage(8)" src="../../../assets/warningScreen/small-full.png">-->
+ <Switch style="width: 1.2rem;height: 1.2rem;cursor: pointer" @click="jumpPage(8)"/>
</div>
<div class="chart-box">
- <message :size="1"></message>
+ <message :size="1" :theme="screenTheme.isDark"></message>
</div>
</div>
<div class="right-mid">
- <dv-border-box-13 backgroundColor="rgba(8, 109, 209, 0.2)" class="box-bg"></dv-border-box-13>
+ <dv-border-box-13 :backgroundColor="boxBg" :color="boxColor" class="box-bg"></dv-border-box-13>
<div class="part-tit">
<span>| 特殊作业实时监控</span>
- <img @click="jumpPage(9)" src="../../../assets/warningScreen/small-full.png">
+<!-- <img @click="jumpPage(9)" src="../../../assets/warningScreen/small-full.png">-->
+ <Switch style="width: 1.2rem;height: 1.2rem;cursor: pointer" @click="jumpPage(9)"/>
</div>
<div class="chart-box">
<monitor></monitor>
</div>
</div>
<div class="right-bottom">
- <dv-border-box-13 backgroundColor="rgba(8, 109, 209, 0.2)" class="box-bg"></dv-border-box-13>
+ <dv-border-box-13 :backgroundColor="boxBg" :color="boxColor" class="box-bg"></dv-border-box-13>
<div class="part-tit">
<span>| 风险应急物资储备</span>
- <img @click="jumpPage(10)" src="../../../assets/warningScreen/small-full.png">
+ <Switch style="width: 1.2rem;height: 1.2rem;cursor: pointer" @click="jumpPage(10)"/>
</div>
<div class="chart-box">
<stock :size="1"></stock>
@@ -165,9 +181,14 @@
import {hiddenReportApi} from "/@/api/doublePreventSystem/report";
import { productionDeviceApi } from '/@/api/doublePreventSystem/productionDevice/index.ts';
import '/@/theme/bigScreen.css'
+ import {useScreenTheme} from "/@/stores/screenTheme"
+ import {storeToRefs} from "pinia";
// 定义接口来定义对象的类型
interface stateType {
+ boxBg: string;
+ boxColor: Array<string>;
+ boxBigColor: Array<string>;
isScreenfull: boolean;
currentTime: string;
month: number;
@@ -190,11 +211,17 @@
stock: defineAsyncComponent(() => import('/@/views/riskWarningSys/warningBigScreen/components/stock.vue'))
},
setup() {
+ const screenThemes = useScreenTheme()
+ const { screenTheme } = storeToRefs(screenThemes);
const router = useRouter();
const props = {
expandTrigger: 'hover',
+ checkStrictly: true
}
const state = reactive<stateType>({
+ boxBg: 'rgba(8, 109, 209, 0.2)',
+ boxColor: [],
+ boxBigColor: [],
isScreenfull: false,
currentTime: '',
month: 0,
@@ -292,6 +319,7 @@
// 页面载入时执行方法
onMounted(() => {
getTime()
+ getTheme()
});
const getTime =()=>{
@@ -299,6 +327,37 @@
state.currentTime = new Date().toLocaleString();
}, 1000);
}
+
+ const changeTheme = () =>{
+ screenTheme.value.isDark = !screenTheme.value.isDark
+ screenThemes.setScreenTheme(screenTheme.value.isDark)
+ if(screenTheme.value.isDark){
+ document.getElementById('container').setAttribute( "class", 'dark' )
+ state.boxBg = 'rgba(8, 109, 209, 0.2)'
+ state.boxColor = []
+ state.boxBigColor = []
+ }else{
+ document.getElementById('container').setAttribute( "class", 'light' )
+ state.boxBg = '#fff'
+ state.boxColor = ['#ccc','#333']
+ state.boxBigColor = ['#666','#fff']
+ }
+ }
+
+ const getTheme =()=>{
+ if(screenTheme.value.isDark){
+ window.document.getElementById('container').setAttribute( "class", 'dark' );
+ state.boxBg = 'rgba(8, 109, 209, 0.2)'
+ state.boxColor = []
+ state.boxBigColor = []
+ }else{
+ window.document.getElementById('container').setAttribute( "class", 'light' );
+ state.boxBg = '#fff'
+ state.boxColor = ['#ccc','#333']
+ state.boxBigColor = ['#666','#fff']
+ }
+ }
+
// 全屏
const onScreenfullClick = () => {
if (!screenfull.isEnabled) {
@@ -346,6 +405,8 @@
return {
router,
props,
+ screenTheme,
+ changeTheme,
onScreenfullClick,
jumpPage,
goBack,
@@ -357,8 +418,7 @@
<style scoped lang="scss">
$homeNavLengh: 8;
-
- .container {
+ .dark {
width: 100%;
height: 100%;
display: flex;
@@ -420,14 +480,21 @@
margin-right: 20px;
img{
- width: 16px;
- height: auto;
+ width: 1rem;
+ height: 1rem;
}
div{
margin-left: 6px;
}
}
- .fullbtn{
+ .themeBtn{
+ img{
+ width: 1.25rem;
+ height: 1.25rem;
+ }
+ cursor: pointer;
+ }
+ .fullBtn{
cursor: pointer;
}
.backBtn{
@@ -438,8 +505,8 @@
}
.main-content{
width: 100%;
- height: 100%;
- padding: 0 25px 25px;
+ height: calc(100vh - 72px);
+ padding: 0.4rem 1.5rem 2rem;
display: flex;
align-items: center;
justify-content: space-between;
@@ -468,11 +535,11 @@
}
.dv-border-box-11{
- :deep(.dv-border-svg-container){
- .dv-border-box-11-title{
- font-size: 1.5rem;
- fill: #11feee !important;
- }
+ ::v-deep(.dv-border-svg-container){
+ .dv-border-box-11-title{
+ font-size: 1.5rem;
+ fill: #11feee !important;
+ }
}
}
.part-tit{
@@ -577,6 +644,304 @@
}
img{
+ width: 1.2rem;
+ height: 1.2rem;
+ cursor: pointer;
+ }
+ }
+ .chart-box{
+ width: 100%;
+ height: calc(100% - 20px);
+ margin-top: 20px;
+ .train-tip{
+ display: block;
+ font-size: 0.8rem;
+ margin-top: 5%;
+ margin-left: 2%;
+ color: #fff;
+ }
+ accident{
+ width: 100%;
+ height: 100%;
+ }
+
+ training{
+ width: 100%;
+ height: 100%;
+ }
+ }
+ }
+ }
+
+ .main-left{
+ width: calc(25% - 5px);
+ &>div{
+ width: 100%;
+ height: calc((100%/3) - (20px/3));
+ }
+ }
+ .main-middle{
+ width: calc(50% - 10px);
+
+ .mid-top{
+ width: 100%;
+ height: calc((200% - 40px)/3 + 10px);
+ }
+
+ .mid-bottom{
+ display: flex;
+ width: 100%;
+ height: calc((100%/3) - (20px/3));
+ justify-content: space-between;
+ padding: 0;
+ background: none;
+ border-radius: 0;
+
+ &>div {
+ position: relative;
+ width: calc((100% - 20px)/3);
+ border-radius: 8px;
+ overflow: hidden;
+ padding: 10px 15px;
+ box-sizing: border-box;
+ }
+ }
+ }
+ .main-right{
+ width: calc(25% - 5px);
+ &>div{
+ width: 100%;
+ height: calc((100%/3) - (20px/3));
+ }
+ }
+ }
+ }
+ .light {
+ width: 100%;
+ height: 100%;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ background: url('../../../assets/warningScreen/riskprocast-light.jpg') no-repeat center;
+ background-size: 100% 100%;
+ color: #000;
+
+ .header-content {
+ width: 100%;
+ height: 72px;
+ padding: 0 20px;
+ font-size: 1.25rem;
+ display: flex;
+ align-items: center;
+ justify-content: space-around;
+ z-index: 9;
+
+ .logo {
+ width: 27%;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ img {
+ height: 35px;
+ width: 128px;
+ }
+ }
+ .title {
+ width: 46%;
+ font-size: 2rem;
+ font-weight: bolder;
+ line-height: 72px;
+ text-align: center;
+ letter-spacing: 2px;
+ }
+
+ .title-right {
+ width: 27%;
+ height: 90px;
+ display: flex;
+ align-items: center;
+ justify-content: space-around;
+ font-size: 1rem;
+ padding-left: 30px;
+
+ .datetime {
+ color: #000;
+ }
+ .btns{
+ display: flex;
+ align-items: center;
+
+ &>div{
+ display: flex;
+ align-items: center;
+ font-size: 1rem;
+ margin-right: 20px;
+
+ img{
+ width: 1rem;
+ height: 1rem;
+ }
+ div{
+ margin-left: 6px;
+ }
+ }
+ .themeBtn{
+ img{
+ width: 1.25rem;
+ height: 1.25rem;
+ }
+ cursor: pointer;
+ }
+ .fullBtn{
+ cursor: pointer;
+ }
+ .backBtn{
+ cursor: pointer;
+ }
+ }
+ }
+ }
+ .main-content{
+ width: 100%;
+ height: calc(100vh - 72px);
+ padding: 0.4rem 1.5rem 2rem;
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+
+ &>div{
+ height: 100%;
+ display: flex;
+ flex-direction: column;
+ justify-content: space-between;
+ align-items: flex-start;
+ &>div{
+ padding: 20px 15px 10px;
+ box-sizing: border-box;
+ position: relative;
+ .box-bg{
+ position: absolute;
+ width: 100%;
+ height: 100%;
+ left: 0;
+ top: 0;
+ right: 0;
+ bottom: 0;
+ margin: auto;
+ color: #000;
+ font-weight: bolder;
+ }
+
+ .dv-border-box-11{
+ :deep(.dv-border-svg-container){
+ .dv-border-box-11-title{
+ font-size: 1.5rem;
+ fill: #000 !important;
+ }
+ }
+ }
+ .part-tit{
+ position: absolute;
+ top: 20px;
+ left: 0;
+ height: 20px;
+ width: 100%;
+ padding: 0 15px;
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ z-index: 9999;
+ div{
+ width: 40%;
+ display: flex;
+ align-items: center;
+ justify-content: end;
+ }
+ span{
+ font-size: 1.25rem;
+ font-weight: bolder;
+ color: #000;
+ }
+ ::v-deep(.el-cascader){
+ width: 25% !important;
+ }
+ ::v-deep(.el-popper){
+ background-color: #fff;
+ border: 1px solid #ccc;
+ color: #000;
+ .el-cascader-node__label{
+ color: #000;
+ }
+ .el-icon{
+ color: #000;
+ }
+ .el-cascader-node{
+ &:hover{
+ background: #ccc;
+ }
+ }
+ }
+ ::v-deep(.el-popper__arrow){
+ &::before{
+ background-color: #fff !important;
+ border: 1px solid #ccc;
+ }
+ }
+ ::v-deep(.el-input__wrapper){
+ width: 20%;
+ box-shadow: none;
+ border: 1px solid #ccc;
+ background: #fff !important;
+ height: 2.5rem;
+ color: #000;
+
+ input{
+ font-size: 1.25rem;
+ color: #000;
+ }
+ .el-icon{
+ color: #000;
+ }
+ }
+ .selector{
+ width: calc(100% - 1.25rem);
+ margin-right: 0.8rem;
+
+ ::v-deep(.el-popper){
+ background-color: rgba(255,255,255,1);
+ border: 1px solid #ccc;
+ color: #fff;
+ .el-select-dropdown__item{
+ color: #000;
+ }
+ .el-select-dropdown__item.hover{
+ background: #ccc;
+ }
+ }
+ ::v-deep(.el-popper__arrow){
+ &::before{
+ background-color: rgba(255,255,255,.6) !important;
+ border: 1px solid #ccc;
+ }
+ }
+ ::v-deep(.el-input__wrapper){
+ box-shadow: none;
+ border: 1px solid #ccc;
+ background: #fff !important;
+ height: 1.5rem;
+ color: #fff;
+
+ input{
+ font-size: 0.8rem;
+ color: #000;
+ }
+ .el-icon{
+ color: #000;
+ }
+ }
+ }
+
+ img{
width: 1.20rem;
height: 1.20rem;
cursor: pointer;
@@ -591,6 +956,7 @@
font-size: 0.8rem;
margin-top: 5%;
margin-left: 2%;
+ color: #333;
}
accident{
width: 100%;
diff --git a/src/views/riskWarningSys/warningBigScreen/indexs/index.vue b/src/views/riskWarningSys/warningBigScreen/indexs/index.vue
index e0faf3b..87d78cc 100644
--- a/src/views/riskWarningSys/warningBigScreen/indexs/index.vue
+++ b/src/views/riskWarningSys/warningBigScreen/indexs/index.vue
@@ -1,8 +1,13 @@
<template>
- <div class="com-page">
- <div class="btns" @click="goBack()">
- 返回首页
+ <div id="pageCont" class="dark-page">
+ <div class="btns">
+ <dv-decoration-11 :color="lineColor" @click="goBack()">
+ <div color-green font-600 bg="~ dark/0">
+ 返回
+ </div>
+ </dv-decoration-11>
</div>
+
<div class="tit">
<div class="title">{{curChart===1?'事故等级分布':curChart===2?'应急演练次数':curChart===3?'年度隐患等级数量分布':curChart===4?'SPI数据分析':curChart===5?'教育培训分析':curChart===6?'隐患等级':curChart===7?'人员专业度分布':curChart===8?'预警消息报告':curChart===9?'特殊作业实时监控':'风险应急物资储备'}}</div>
</div>
@@ -20,7 +25,7 @@
<accident v-if="curChart===1" :size="2.5"></accident>
<training v-else-if="curChart===2" :size="2.5"></training>
<risk v-else-if="curChart===3" :month="month" :size="2.5"></risk>
- <spi v-else-if="curChart===4" :size="2.5"></spi>
+ <spi v-else-if="curChart===4" :size="2"></spi>
<educate v-else-if="curChart===5" :size="2.5"></educate>
<danger v-else-if="curChart===6" :size="2.5"></danger>
<profession v-else-if="curChart===7" :size="2.5"></profession>
@@ -29,13 +34,32 @@
<stock v-else class="main-chart" :size="2"></stock>
</div>
<div class="chart-right">
- <dv-decoration-10 :color="['#11FEEE']" style="width:100%;height:5%;" />
+ <dv-decoration-10 :color="lineColor" style="width:100%;height:5%;" />
<div class="charts-des">
- <div class="">
-
+ <div class="des-tit">
+ <div v-if="curChart===1">2022年度事故等级分布与影响一览</div>
+ <div v-else-if="curChart===2">应急演练概况</div>
+ <div v-else-if="curChart===3">隐患影响等级分布详情</div>
+ <div v-else-if="curChart===4">2022年度事企业SPI趋势</div>
+ <div v-else-if="curChart===5">教育培训情况汇总</div>
+ <div v-else-if="curChart===6">隐患等级分布与隐患整改率</div>
+ <div v-else-if="curChart===7">人员持证上岗情况</div>
+ <div v-else-if="curChart===8">预警消息SPI报告-2022年8月</div>
+ <div v-else-if="curChart===9">监控列表</div>
+ <div v-else>当前应急物资储备情况（总）</div>
+ <dv-decoration8 :color="lineColor" :reverse="true" style="width:100%;" />
+ </div>
+ <div class="des-main">
+ <div v-for="(item,index) in accidentDesc" :key="index">
+ <h4><span>{{item.title}}</span>共计：<span>{{item.total}}</span>起</h4>
+ <h4>
+ 事故影响
+ </h4>
+ <p>{{item.desc}}</p>
+ </div>
</div>
</div>
- <dv-decoration-10 :color="['#11FEEE']" style="width:100%;height:5%;" />
+ <dv-decoration-10 :color="lineColor" style="width:100%;height:5%;" />
</div>
</div>
</div>
@@ -51,13 +75,17 @@
import {hiddenReportApi} from "/@/api/doublePreventSystem/report";
import { productionDeviceApi } from '/@/api/doublePreventSystem/productionDevice/index.ts';
import '/@/theme/bigScreen.css'
+ import {useScreenTheme} from "/@/stores/screenTheme"
+ import {storeToRefs} from "pinia";
// 定义接口来定义对象的类型
interface stateType {
isScreenfull: boolean;
curChart: number | null;
month: number;
- optionList: Array<any>
+ optionList: Array<any>;
+ lineColor: Array<string>;
+ accidentDesc: Array<any>;
}
export default defineComponent({
name: 'warningPage',
@@ -74,11 +102,14 @@
stock: defineAsyncComponent(() => import('/@/views/riskWarningSys/warningBigScreen/components/stock.vue'))
},
setup() {
+ const screenThemes = useScreenTheme()
+ const { screenTheme } = storeToRefs(screenThemes);
const route = useRoute();
const state = reactive<stateType>({
isScreenfull: false,
curChart: null,
month: 0,
+ lineColor: ['#11FEEE'],
optionList: [
{
label: '年度',
@@ -124,6 +155,33 @@
label: '十月',
value: 10
}
+ ],
+ accidentDesc:[
+ {
+ title: '特别重大事故',
+ total: 10,
+ desc: '死亡人数：0人； 重伤人数：2人； 轻伤人数：3人； 直接经济损失：180.61万元'
+ },
+ {
+ title: '重大事故',
+ total: 20,
+ desc: '死亡人数：1人； 重伤人数：6人； 轻伤人数：0人； 直接经济损失：160.61万元'
+ },
+ {
+ title: '较大事故',
+ total: 100,
+ desc: '死亡人数：0人； 重伤人数：0人； 轻伤人数：3人； 直接经济损失：190.61万元'
+ },
+ {
+ title: '一般事故',
+ total: 130,
+ desc: '死亡人数：0人； 重伤人数：0人； 轻伤人数：0人； 直接经济损失：180.61万元'
+ },
+ {
+ title: '未遂事故',
+ total: 150,
+ desc: '死亡人数：0人； 重伤人数：0人； 轻伤人数：0人； 直接经济损失：9万元'
+ }
]
});
@@ -132,6 +190,7 @@
if (route.query.num) {
state.curChart = Number(route.query.num)
}
+ getTheme()
});
@@ -150,7 +209,15 @@
}
});
};
-
+ const getTheme =()=>{
+ if(screenTheme.value.isDark){
+ window.document.getElementById('pageCont').setAttribute( "class", 'dark-page' );
+ state.lineColor = ['#11FEEE']
+ }else{
+ window.document.getElementById('pageCont').setAttribute( "class", 'light-page' );
+ state.lineColor = ['#333','#ccc']
+ }
+ }
// 返回上一页
const goBack = () => {
window.history.go(-1);
@@ -168,7 +235,7 @@
</script>
<style scoped lang="scss">
- .com-page{
+ .dark-page{
width: 100%;
height: 100%;
border:1px #5a5959 solid;
@@ -176,13 +243,11 @@
padding: 4%;
.btns{
position: fixed;
+ width: 8%;
+ height: 6%;
right: 5%;
- top: 20px;
+ top: 1.25rem;
font-size: 1.125rem;
- padding: 10px 15px;
- box-sizing: border-box;
- border: 1px solid rgb(0, 208, 206);
- border-radius: 10px;
color: rgb(17, 254, 238);
cursor: pointer;
}
@@ -261,6 +326,188 @@
height: 90%;
background: url("../../../../assets/warningScreen/pagebg-r.png") no-repeat center;
background-size: 100% 100%;
+ padding: 4%;
+
+ .des-tit{
+ width: 100%;
+ &>div{
+ font-size: 1.5rem;
+ height: 2.2rem;
+ line-height: 2.2rem;
+ text-align: center;
+ font-weight: bolder;
+ color: #11FEEE;
+ }
+ }
+ .des-main{
+ width: 100%;
+ height: calc(96% - 2.2rem);
+ padding: 0 2%;
+ overflow: auto;
+ color: #11FEEE;
+
+ &::-webkit-scrollbar { width: 0; height: 0; color: transparent; }
+
+ &>div{
+ margin-bottom: 2rem;
+ &>h4{
+ font-size: 1.25rem;
+ display: flex;
+ align-items: center;
+
+ span{
+ margin-right: 10px;
+ }
+ &:first-of-type{
+ margin-bottom: 10px;
+ }
+ }
+
+ &>p{
+ font-size: 1rem;
+ margin-top: 10px;
+ }
+ }
+ }
+ }
+ }
+
+ }
+ }
+ .light-page{
+ width: 100%;
+ height: 100%;
+ border:1px #5a5959 solid;
+ background: #F0F0F0;
+ padding: 4%;
+ .btns{
+ position: fixed;
+ width: 8%;
+ height: 6%;
+ right: 5%;
+ top: 1.25rem;
+ font-size: 1.125rem;
+ color: #333;
+ cursor: pointer;
+ }
+ .tit{
+ width: 100%;
+ height: 122px;
+ background: url("../../../../assets/warningScreen/pagebg-t-light.png") no-repeat center;
+ background-size: 100% 100%;
+
+
+ .title{
+ width: 100%;
+ height: 122px;
+ line-height: 112px;
+ border-radius: 8px;
+ margin-bottom: 20px;
+ font-size: 2.8rem;
+ color: #333;
+ font-weight: bolder;
+ text-align: center;
+ letter-spacing: 5px;
+ }
+ }
+
+ .chart-cont{
+ width: 100%;
+ padding: 20px;
+ height: calc(100% - 122px);
+ display: flex;
+ align-items: flex-start;
+ justify-content: space-between;
+
+ .chart{
+ width: calc((100% - 20px) * 0.63);
+ height: 100%;
+ padding: 3%;
+ background: url("../../../../assets/warningScreen/pagebg-l-light.png") no-repeat center;
+ background-size: 100% 100%;
+ position: relative;
+ .selector-2{
+ position: absolute;
+ top: 5%;
+ right: 10%;
+ width: 20%;
+ font-size: 1.25rem;
+ color: #fff;
+ }
+ .selector-3{
+ position: absolute;
+ top: 5%;
+ right: 10%;
+ width: 20%;
+
+ ::v-deep(.el-input__wrapper){
+ background: none !important;
+ box-shadow: none;
+ color: #11FEEE;
+
+ input{
+ color: #11FEEE;
+ }
+ .el-icon{
+ color: #11FEEE;
+ }
+ }
+ }
+ .main-chart{
+ width: 100%;
+ height: 100%;
+ }
+ }
+ .chart-right{
+ width: calc((100% - 20px) * 0.37);
+ height: 100%;
+ .charts-des{
+ height: 90%;
+ background: url("../../../../assets/warningScreen/pagebg-r-light.png") no-repeat center;
+ background-size: 100% 100%;
+ padding: 4%;
+
+ .des-tit{
+ width: 100%;
+ &>div{
+ font-size: 1.5rem;
+ height: 2.2rem;
+ line-height: 2.2rem;
+ text-align: center;
+ font-weight: bolder;
+ color: #333;
+ }
+ }
+ .des-main{
+ width: 100%;
+ height: calc(96% - 2.2rem);
+ padding: 0 2%;
+ overflow: auto;
+ color: #333;
+
+ &::-webkit-scrollbar { width: 0; height: 0; color: transparent; }
+
+ &>div{
+ margin-bottom: 2rem;
+ &>h4{
+ font-size: 1.25rem;
+ display: flex;
+ align-items: center;
+
+ span{
+ margin-right: 10px;
+ }
+ &:first-of-type{
+ margin-bottom: 10px;
+ }
+ }
+
+ &>p{
+ font-size: 1rem;
+ margin-top: 10px;
+ }
+ }
+ }
}
}
diff --git a/src/views/specialWorkSystem/workTicket/workApply/components/fire.vue b/src/views/specialWorkSystem/workTicket/workApply/components/fire.vue
index 6418d6e..f3ebc7f 100644
--- a/src/views/specialWorkSystem/workTicket/workApply/components/fire.vue
+++ b/src/views/specialWorkSystem/workTicket/workApply/components/fire.vue
@@ -65,6 +65,14 @@
/>
</el-form-item>
</el-col>
+ <el-col :span="12">
+ <el-form-item label="危害辨识" prop="hazardIdentification">
+ <el-input
+ v-model="form.hazardIdentification"
+ placeholder="请输入危害辨识"
+ />
+ </el-form-item>
+ </el-col>
</el-row>
<el-divider border-style="dashed"/>
<el-row>
@@ -132,6 +140,7 @@
workLevel: null,
workContent: '',
workLocation: '',
+ hazardIdentification: '',
workDetail:{
hotMethod: '',
otherSpecialWork: []
@@ -206,6 +215,7 @@
workLevel: [{ required: true, message: '该内容不能为空', trigger: 'blur' }],
workContent: [{ required: true, message: '该内容不能为空', trigger: 'blur' }],
workLocation: [{ required: true, message: '该内容不能为空', trigger: 'blur' }],
+ hazardIdentification: [{ required: true, message: '该内容不能为空', trigger: 'blur' }],
workTimeLine: [{ required: true, message: '该内容不能为空', trigger: 'blur' }],
"workDetail.hotMethod": [{ required: true, message: '该内容不能为空', trigger: 'blur' }]
});
--
Gitblit v1.9.2