From 20b0ce2db27b64a60de60aee05dedd448099e330 Mon Sep 17 00:00:00 2001
From: 马宇豪 <978517621@qq.com>
Date: 星期一, 08 七月 2024 10:12:16 +0800
Subject: [PATCH] xiugai
---
src/views/riskWarningSys/warningBigScreen/components/SPI.vue | 263 +++++++++++-----------------------------------------
1 files changed, 55 insertions(+), 208 deletions(-)
diff --git a/src/views/riskWarningSys/warningBigScreen/components/SPI.vue b/src/views/riskWarningSys/warningBigScreen/components/SPI.vue
index 392db13..32f95af 100644
--- a/src/views/riskWarningSys/warningBigScreen/components/SPI.vue
+++ b/src/views/riskWarningSys/warningBigScreen/components/SPI.vue
@@ -35,7 +35,7 @@
size: Number,
theme: Boolean
},
- setup(props) {
+ setup(props,context) {
const userInfo = useUserInfo()
const { userInfos } = storeToRefs(userInfo);
const screenThemes = useScreenTheme()
@@ -50,220 +50,68 @@
// 获取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
- });
- }
+ let res = await riskWarningApi().getSpiPage({
+ pageIndex: 1,
+ pageSize: 12
+ })
+ if (res.data.code === '200') {
+ state.spiData = res.data.data;
+ initSpi(state.spiData.reverse())
+ context.emit('getData',state.spiData.reverse())
+ } else {
+ ElMessage({
+ type: 'warning',
+ message: res.data.msg
+ });
+ }
};
type EChartsOption = echarts.EChartsOption
// 隐患整改情况
- const initSpi =()=>{
+ const initSpi =(data)=>{
let dom = document.getElementById(spi.value);
let myChart = echarts.init(dom);
let option: EChartsOption;
- option = {
- legend: {
- data: ['注意线', '警告线', '危险线', 'SPI预警指数值'],
- top: '2%',
- right: '6%',
- textStyle:{
- color: '#999',
- fontSize: fontSize(14)
- }
- },
- color: ['rgba(216,55,55)','rgba(235,194,80)','rgba(147,208,81)'],
- tooltip: {
- trigger: 'axis'
- },
- grid: {
- left: '8%',
- right: '8%',
- bottom: '5%',
- },
- xAxis: [
- {
- type: 'category',
- boundaryGap: false,
- data: state.monthList,
- axisLine:{
- show: true,
- lineStyle:{
- color: '#999'
- }
- },
- splitLine:{
- show: true,
- lineStyle:{
- type: 'dashed',
- color: '#999'
- }
- },
- axisLabel:{
- color: '#999',
- }
- }
- ],
- yAxis: [
- {
- type: 'value',
- axisLine:{
- show: true,
- lineStyle:{
- type: 'dotted'
- }
- },
- axisLabel:{
- color: '#ccc'
- },
- splitLine:{
- show: true,
- lineStyle:{
- type: 'dashed',
- color: 'rgba(255,255,255,.4)'
- }
- }
- }
- ],
- 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: 'SPI预警指数值',
- data: state.valueList,
- type: 'line',
- triggerLineEvent: true,
- label:{
- show: true,
- color: '#23E5E5',
- fontSize: fontSize(12)
- },
- lineStyle:{
- width: 2,
- color: '#23E5E5'
- },
- 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)", // 坐标轴处的颜色
- },
- ],
- }
- },
- itemStyle:{
- color: '#23E5E5',
- borderColor: '#fff',
- borderWidth: 4
- },
- smooth: true
- }
- ]
- };
+ option = {
+ tooltip: {
+ trigger: 'axis',
+ axisPointer: {
+ // Use axis to trigger tooltip
+ type: 'shadow' // 'shadow' as default; can also be 'line' or 'shadow'
+ }
+ },
+ color: ['#91cc75','#ee6666'],
+ grid: [
+ {
+ top: '5%',
+ right: '2%',
+ bottom: '10%'
+ }
+ ],
+ xAxis: {
+ type: 'category',
+ data: data.map(i=>i.time),
+ axisLabel: {
+ color: '#fff'
+ }
+ },
+ yAxis: {
+ type: 'value',
+ splitLine:{
+ lineStyle: {
+ color: 'rgba(255,255,255,.2)'
+ }
+ }
+ },
+ series: [
+ {
+ name: 'spi数值',
+ type: 'line',
+ data: data.map(i=>i.value?i.value:0)
+ }
+ ]
+ }
option && myChart.setOption(option);
window.addEventListener("resize",function (){
@@ -284,7 +132,6 @@
// 页面载入时执行方法
onMounted(() => {
getSpiData();
- initSpi();
});
return {
--
Gitblit v1.9.2