删除无用页面

Admin

2022-09-21 999cab6fb3fc6d2a288d365da991351c5a396bf0

 src/views/riskWarningSys/warningBigScreen/components/SPI.vue

@@ -1,5 +1,17 @@
<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>
@@ -7,7 +19,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 +30,53 @@
   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";

   interface stateType {
      spiValue: number;
      departList: Array<any>;
      spiChart: string;
      spiProps: object
   }
   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>({

            spiValue: 1,
            departList: [],
            spiProps: {
               expandTrigger: 'hover',
               checkStrictly: true,
               value: 'depId',
               label: 'depName',
            },
            spiChart: 'spi-dark'
         })

         // 获取部门列表
         const getAllDepartment = async () => {
            let res = await teamManageApi().getAllDepartment();
            if (res.data.code === '200') {
               state.departList = JSON.parse(JSON.stringify(res.data.data))
            } else {
               ElMessage({
                  type: 'warning',
                  message: res.data.msg
               });
            }
         };

         type EChartsOption = echarts.EChartsOption
         // 隐患整改情况
         const initSpi =()=>{
@@ -46,19 +88,20 @@
            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: [
@@ -69,18 +112,18 @@
                     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',
                     }
                  }
               ],
@@ -107,6 +150,64 @@
               ],
               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',
@@ -132,65 +233,7 @@
                        },
                     },
                     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',
                     // stack: 'Total',
                     smooth: true
                  },
                  {
@@ -200,7 +243,7 @@
                     triggerLineEvent: true,
                     label:{
                        show: true,
                        color: '#fff',
                        color: '#23E5E5',
                        fontSize: fontSize(12)
                     },
                     lineStyle:{
@@ -222,6 +265,23 @@
               myChart.resize();
            });
         }

         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'
            }
         })

         function fontSize(val){
            let nowClientWidth = document.documentElement.clientWidth;
            return val * (nowClientWidth/1920) * Number(props.size);
@@ -229,7 +289,9 @@

         // 页面载入时执行方法
         onMounted(() => {
            getAllDepartment();
            initSpi();
            getTheme();
         });

         return {
@@ -246,9 +308,108 @@
   .charts-cont{
      width: 100%;
      height: 100%;
      padding: 5%;
      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%;