From f7bd94cf4a3d6ce6b06c2f90413f6798c488481d Mon Sep 17 00:00:00 2001
From: batman <978517621@qq.com>
Date: 星期三, 15 三月 2023 10:21:22 +0800
Subject: [PATCH] 修改特殊作业首页
---
src/views/riskWarningSys/warningBigScreen/components/SPI.vue | 243 +++++++++++++++++++++++++++++------------------
1 files changed, 149 insertions(+), 94 deletions(-)
diff --git a/src/views/riskWarningSys/warningBigScreen/components/SPI.vue b/src/views/riskWarningSys/warningBigScreen/components/SPI.vue
index f148306..392db13 100644
--- a/src/views/riskWarningSys/warningBigScreen/components/SPI.vue
+++ b/src/views/riskWarningSys/warningBigScreen/components/SPI.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,23 +18,52 @@
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";
+ import {riskWarningApi} from "/@/api/riskWarning";
interface stateType {
+ spiData: Array<any>;
+ year: string;
+ monthList: Array<string>;
+ valueList: Array<string>
}
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>({
-
+ spiData: [],
+ year: '',
+ monthList: [],
+ valueList: [],
})
+
+ // 获取spi数据
+ const getSpiData = async () => {
+ let res = await riskWarningApi().getSpiData(screenTheme.value.depId);
+ if (res.data.code === '200') {
+ 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',
+ message: res.data.msg
+ });
+ }
+ };
type EChartsOption = echarts.EChartsOption
// 隐患整改情况
const initSpi =()=>{
@@ -46,41 +75,42 @@
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: [
{
type: 'category',
boundaryGap: false,
- data: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'],
+ data: state.monthList,
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',
}
}
],
@@ -106,12 +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: [500, 500, 500, 500, 500, 500, 500,500, 500, 500, 500, 500],
+ name: 'SPI预警指数值',
+ data: state.valueList,
type: 'line',
+ triggerLineEvent: true,
+ label:{
+ show: true,
+ color: '#23E5E5',
+ fontSize: fontSize(12)
+ },
lineStyle:{
- width: 0
+ width: 2,
+ color: '#23E5E5'
},
areaStyle: {
color: {
@@ -128,84 +252,8 @@
offset: 0.9,
color: "rgba(147,208,81,.2)", // 坐标轴处的颜色
},
- ]
- },
- },
- 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',
- 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: '#fff',
- fontSize: fontSize(12)
- },
- lineStyle:{
- width: 2,
- color: '#23E5E5'
},
itemStyle:{
color: '#23E5E5',
@@ -222,6 +270,12 @@
myChart.resize();
});
}
+
+
+ watchEffect(() => {
+ getSpiData()
+ })
+
function fontSize(val){
let nowClientWidth = document.documentElement.clientWidth;
return val * (nowClientWidth/1920) * Number(props.size);
@@ -229,6 +283,7 @@
// 页面载入时执行方法
onMounted(() => {
+ getSpiData();
initSpi();
});
@@ -246,7 +301,7 @@
.charts-cont{
width: 100%;
height: 100%;
- padding: 5%;
+ padding: 2%;
position: relative;
.spi{
--
Gitblit v1.9.2