From f59373dccb4afb37e63f4fe655061d067244860c Mon Sep 17 00:00:00 2001
From: Admin <978517621@qq.com>
Date: 星期三, 16 十一月 2022 09:17:11 +0800
Subject: [PATCH] Default Changelist
---
src/views/riskWarningSys/warningBigScreen/components/SPI.vue | 309 +++++++++++++++++++++++++++++++++++++++------------
1 files changed, 235 insertions(+), 74 deletions(-)
diff --git a/src/views/riskWarningSys/warningBigScreen/components/SPI.vue b/src/views/riskWarningSys/warningBigScreen/components/SPI.vue
index f148306..a52fdca 100644
--- a/src/views/riskWarningSys/warningBigScreen/components/SPI.vue
+++ b/src/views/riskWarningSys/warningBigScreen/components/SPI.vue
@@ -1,5 +1,17 @@
<template>
<div class="charts-cont">
+ <div :class="spiChart">
+ <el-cascader
+ class="spiSe"
+ :teleported="false"
+ v-model="spiValue"
+ :options="departList"
+ :props="spiProps"
+ :show-all-levels="false"
+ @change="handleChange"
+ />
+ </div>
+
<div class="spi" :id="spi">
</div>
@@ -7,7 +19,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,23 +30,53 @@
import { workApplyApi } from '/@/api/specialWorkSystem/workApply';
import * as echarts from 'echarts';
import '/@/theme/bigScreen.css'
+ import {useScreenTheme} from "/@/stores/screenTheme";
+ import {teamManageApi} from "/@/api/systemManage/basicDateManage/personShiftManage/teamManage";
interface stateType {
+ spiValue: number;
+ departList: Array<any>;
+ spiChart: string;
+ spiProps: object
}
export default defineComponent({
- name: 'accident',
+ name: 'SPI',
components: {},
props:{
size: Number,
- dep: Number
+ theme: Boolean
},
setup(props) {
const userInfo = useUserInfo()
const { userInfos } = storeToRefs(userInfo);
+ const screenThemes = useScreenTheme()
+ const { screenTheme } = storeToRefs(screenThemes);
const spi = ref("eChartSpi" + Date.now() + Math.random())
const state = reactive<stateType>({
-
+ spiValue: 1,
+ departList: [],
+ spiProps: {
+ expandTrigger: 'hover',
+ checkStrictly: true,
+ value: 'depId',
+ label: 'depName',
+ },
+ spiChart: 'spi-dark'
})
+
+ // 获取部门列表
+ const getAllDepartment = async () => {
+ let res = await teamManageApi().getAllDepartment();
+ if (res.data.code === '200') {
+ state.departList = JSON.parse(JSON.stringify(res.data.data))
+ } else {
+ ElMessage({
+ type: 'warning',
+ message: res.data.msg
+ });
+ }
+ };
+
type EChartsOption = echarts.EChartsOption
// 隐患整改情况
const initSpi =()=>{
@@ -46,19 +88,20 @@
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%',
+ left: '8%',
+ right: '8%',
bottom: '5%',
},
xAxis: [
@@ -69,18 +112,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 +150,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 +233,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 +243,7 @@
triggerLineEvent: true,
label:{
show: true,
- color: '#fff',
+ color: '#23E5E5',
fontSize: fontSize(12)
},
lineStyle:{
@@ -222,6 +265,23 @@
myChart.resize();
});
}
+
+ const getTheme =()=>{
+ if(screenTheme.value.isDark){
+ state.spiChart = 'spi-dark'
+ }else{
+ state.spiChart = 'spi-light'
+ }
+ }
+
+ watchEffect(() => {
+ if(props.theme){
+ state.spiChart = 'spi-dark'
+ }else{
+ state.spiChart = 'spi-light'
+ }
+ })
+
function fontSize(val){
let nowClientWidth = document.documentElement.clientWidth;
return val * (nowClientWidth/1920) * Number(props.size);
@@ -229,7 +289,9 @@
// 页面载入时执行方法
onMounted(() => {
+ getAllDepartment();
initSpi();
+ getTheme();
});
return {
@@ -246,9 +308,108 @@
.charts-cont{
width: 100%;
height: 100%;
- padding: 5%;
+ padding: 2%;
position: relative;
+ .spi-dark{
+ position: absolute;
+ width: 25% !important;
+ top: 0;
+ left: 2rem;
+ z-index: 99999;
+
+ ::v-deep(.el-cascader){
+ width: 100% !important;
+ }
+ ::v-deep(.el-popper){
+ background-color: rgba(10,31,92,1);
+ border: 1px solid rgba(17,254,238,.4);
+ color: #11FEEE;
+ .el-cascader-node__label{
+ color: #11FEEE;
+ }
+ .el-icon{
+ color: #11FEEE;
+ }
+ .el-cascader-node{
+ &:hover{
+ background: #0049af;
+ }
+ }
+ }
+ ::v-deep(.el-popper__arrow){
+ &::before{
+ background-color: rgba(10,31,92,.6) !important;
+ border: 1px solid rgba(17,254,238,.4);
+ }
+ }
+ ::v-deep(.el-input__wrapper){
+ width: 20%;
+ box-shadow: none;
+ border: 1px solid rgba(17,254,238,.2);
+ background: rgba(10,31,92,.6) !important;
+ height: 2.5rem;
+ color: #11FEEE;
+
+ input{
+ font-size: 1.25rem;
+ color: #11FEEE;
+ }
+ .el-icon{
+ color: #11FEEE;
+ }
+ }
+ }
+
+ .spi-light{
+ position: absolute;
+ width: 25% !important;
+ top: 0;
+ left: 2rem;
+ z-index: 99999;
+
+ ::v-deep(.el-cascader){
+ width: 100% !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;
+ }
+ }
+ }
.spi{
width: 100%;
height: 100%;
--
Gitblit v1.9.2