From e5e9b84b800f1623f85be45a3565689917898c78 Mon Sep 17 00:00:00 2001
From: 马宇豪 <978517621@qq.com>
Date: 星期五, 10 三月 2023 18:12:12 +0800
Subject: [PATCH] Default Changelist
---
src/views/riskWarningSys/warningBigScreen/components/SPI.vue | 344 +++++++++++++++++++-------------------------------------
1 files changed, 119 insertions(+), 225 deletions(-)
diff --git a/src/views/riskWarningSys/warningBigScreen/components/SPI.vue b/src/views/riskWarningSys/warningBigScreen/components/SPI.vue
index a52fdca..392db13 100644
--- a/src/views/riskWarningSys/warningBigScreen/components/SPI.vue
+++ b/src/views/riskWarningSys/warningBigScreen/components/SPI.vue
@@ -1,17 +1,5 @@
<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>
@@ -32,12 +20,13 @@
import '/@/theme/bigScreen.css'
import {useScreenTheme} from "/@/stores/screenTheme";
import {teamManageApi} from "/@/api/systemManage/basicDateManage/personShiftManage/teamManage";
+ import {riskWarningApi} from "/@/api/riskWarning";
interface stateType {
- spiValue: number;
- departList: Array<any>;
- spiChart: string;
- spiProps: object
+ spiData: Array<any>;
+ year: string;
+ monthList: Array<string>;
+ valueList: Array<string>
}
export default defineComponent({
name: 'SPI',
@@ -53,22 +42,21 @@
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'
+ spiData: [],
+ year: '',
+ monthList: [],
+ valueList: [],
})
- // 获取部门列表
- const getAllDepartment = async () => {
- let res = await teamManageApi().getAllDepartment();
+ // 获取spi数据
+ const getSpiData = async () => {
+ let res = await riskWarningApi().getSpiData(screenTheme.value.depId);
if (res.data.code === '200') {
- state.departList = JSON.parse(JSON.stringify(res.data.data))
+ state.spiData = JSON.parse(JSON.stringify(res.data.data))
+ state.monthList = Array.from(state.spiData, ({ month }) => month + '月');
+ state.valueList = Array.from(state.spiData, ({ spiVal }) => spiVal);
+ state.year = res.data.data[0].year
+ initSpi()
} else {
ElMessage({
type: 'warning',
@@ -76,7 +64,6 @@
});
}
};
-
type EChartsOption = echarts.EChartsOption
// 隐患整改情况
const initSpi =()=>{
@@ -108,7 +95,7 @@
{
type: 'category',
boundaryGap: false,
- data: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'],
+ data: state.monthList,
axisLine:{
show: true,
lineStyle:{
@@ -149,70 +136,106 @@
}
],
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',
+ // lineStyle:{
+ // width: 0
+ // },
+ // areaStyle: {
+ // color: {
+ // x: 0,
+ // y: 0,
+ // x2: 0,
+ // y2: 1,
+ // colorStops: [
+ // {
+ // offset: 0.1,
+ // color: "rgba(147,208,81)", // 线处的颜色
+ // },
+ // {
+ // offset: 0.9,
+ // color: "rgba(147,208,81,.2)", // 坐标轴处的颜色
+ // },
+ // ]
+ // },
+ // },
+ // showSymbol: false,
+ // // stack: 'Total',
+ // smooth: true
+ // },
{
- name: '危险线',
- data: [1000, 1000, 1000, 1000, 1000, 1000, 1000, 1000, 1000, 1000, 1000, 1000],
+ name: 'SPI预警指数值',
+ data: state.valueList,
type: 'line',
+ triggerLineEvent: true,
+ label:{
+ show: true,
+ color: '#23E5E5',
+ fontSize: fontSize(12)
+ },
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',
- lineStyle:{
- width: 0
+ width: 2,
+ color: '#23E5E5'
},
areaStyle: {
color: {
@@ -229,26 +252,8 @@
offset: 0.9,
color: "rgba(147,208,81,.2)", // 坐标轴处的颜色
},
- ]
- },
- },
- showSymbol: false,
- // stack: 'Total',
- smooth: true
- },
- {
- name: 'SPI预警指数值',
- data: [450, 632, 501, 434, 390, 530, 520,750, 632, 401, 634, 590],
- type: 'line',
- triggerLineEvent: true,
- label:{
- show: true,
- color: '#23E5E5',
- fontSize: fontSize(12)
- },
- lineStyle:{
- width: 2,
- color: '#23E5E5'
+ ],
+ }
},
itemStyle:{
color: '#23E5E5',
@@ -266,20 +271,9 @@
});
}
- 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'
- }
+ getSpiData()
})
function fontSize(val){
@@ -289,9 +283,8 @@
// 页面载入时执行方法
onMounted(() => {
- getAllDepartment();
+ getSpiData();
initSpi();
- getTheme();
});
return {
@@ -311,105 +304,6 @@
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