xiugai

马宇豪

2024-07-08 20b0ce2db27b64a60de60aee05dedd448099e330

 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 {