From 1b9fea7d4af68d8f933b2dc42bf6084b9646f64c Mon Sep 17 00:00:00 2001 From: 马宇豪 <978517621@qq.com> Date: 星期二, 04 三月 2025 08:39:55 +0800 Subject: [PATCH] 修改作业等级名称 --- src/views/riskWarningSys/warningBigScreen/components/SPI.vue | 260 ++++++++++++++++----------------------------------- 1 files changed, 83 insertions(+), 177 deletions(-) diff --git a/src/views/riskWarningSys/warningBigScreen/components/SPI.vue b/src/views/riskWarningSys/warningBigScreen/components/SPI.vue index b897098..32f95af 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,206 +18,112 @@ 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) { + setup(props,context) { 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().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: '0', - left: 'center', - textStyle:{ - color: '#fff', - fontSize: fontSize(12) - } - }, - grid: { - left: '4%', - right: '4%', - bottom: '5%', - }, - xAxis: [ - { - type: 'category', - boundaryGap: false, - data: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'], - axisLine:{ - show: true, - lineStyle:{ - color: '#fff' - } - }, - splitLine:{ - show: true, - lineStyle:{ - type: 'dashed', - color: 'rgba(255,255,255,.4)' - } - }, - axisLabel:{ - color: '#fff' - } - } - ], - 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: [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: [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', - label:{ - show: true, - color: '#fff', - fontSize: fontSize(12) - }, - lineStyle:{ - width: 2, - color: '#23E5E5' - }, - 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 (){ myChart.resize(); }); } + + + watchEffect(() => { + getSpiData() + }) + function fontSize(val){ let nowClientWidth = document.documentElement.clientWidth; return val * (nowClientWidth/1920) * Number(props.size); @@ -225,7 +131,7 @@ // 页面载入时执行方法 onMounted(() => { - initSpi(); + getSpiData(); }); return { @@ -242,7 +148,7 @@ .charts-cont{ width: 100%; height: 100%; - padding: 5%; + padding: 2%; position: relative; .spi{ -- Gitblit v1.9.2