Default Changelist

马宇豪

2023-03-10 e5e9b84b800f1623f85be45a3565689917898c78

 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%;