Merge branch 'master' of https://sinanoaq.cn:8888/r/gtqt

Your Name

2022-09-05 eafc031e3e6e48778d22b5455358273714944012

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

对比新文件
@@ -0,0 +1,280 @@
<template>
   <div class="charts-cont">
      <div class="spi" :id="spi">

      </div>
   </div>
</template>

<script lang="ts">
   import {toRefs, reactive, defineComponent, ref, defineAsyncComponent, onMounted} from 'vue';
   import { storeToRefs } from 'pinia';
   import { initBackEndControlRoutes } from '/@/router/backEnd';
   import {useUserInfo} from "/@/stores/userInfo";
   import { Session } from '/@/utils/storage';
   import { Search } from '@element-plus/icons-vue'
   import { ElMessage } from 'element-plus'
   import type { FormInstance, FormRules } from 'element-plus'
   import { workApplyApi } from '/@/api/specialWorkSystem/workApply';
   import * as echarts from 'echarts';
   import '/@/theme/bigScreen.css'

   interface stateType {
   }
   export default defineComponent({
      name: 'accident',
      components: {},
      props:{
         size: Number,
         dep: Number
      },
      setup(props) {
         const userInfo = useUserInfo()
         const { userInfos } = storeToRefs(userInfo);
         const spi = ref("eChartSpi" + Date.now() + Math.random())
         const state = reactive<stateType>({

         })
         type EChartsOption = echarts.EChartsOption
         // 隐患整改情况
         const initSpi =()=>{
            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)
                  }
               },
               tooltip: {
                  trigger: 'axis'
               },
               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',
                     triggerLineEvent: true,
                     label:{
                        show: true,
                        color: '#fff',
                        fontSize: fontSize(12)
                     },
                     lineStyle:{
                        width: 2,
                        color: '#23E5E5'
                     },
                     itemStyle:{
                        color: '#23E5E5',
                        borderColor: '#fff',
                        borderWidth: 4
                     },
                     smooth: true
                  }
               ]
            };

            option && myChart.setOption(option);
            window.addEventListener("resize",function (){
               myChart.resize();
            });
         }
         function fontSize(val){
            let nowClientWidth = document.documentElement.clientWidth;
            return val * (nowClientWidth/1920) * Number(props.size);
         }

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

         return {
            spi,
            Search,
            fontSize,
            ...toRefs(state)
         };
      },
   });
</script>

<style scoped lang="scss">
   .charts-cont{
      width: 100%;
      height: 100%;
      padding: 5%;
      position: relative;

      .spi{
         width: 100%;
         height: 100%;
      }
   }
   .home-container {
      height: 100%;
      overflow: hidden;
      position: relative;
      .el-row{
         margin-bottom: 20px;
      }
      .el-row:last-child {
         margin-bottom: 0;
      }
      .el-input{
         width: 100% !important;
      }
      .el-date-editor::v-deep{
         width: 100%;
      }
      .el-select{
         width: 100%;
      }
      .el-cascader{
         width: 100% !important;
      }
   }
</style>