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

Your Name

2022-09-05 eafc031e3e6e48778d22b5455358273714944012

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

对比新文件
@@ -0,0 +1,185 @@
<template>
   <div class="charts-cont">
      <div class="message">
         <dv-scroll-board ref="scrollBoard" :config="config" style="width:100%;height:100%" @mouseover="mouseoverHandler" @click="clickHandler" />
      </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: 'profession',
      components: {},
      props:{
         size: Number
      },
      setup(props) {
         const userInfo = useUserInfo()
         const { userInfos } = storeToRefs(userInfo);
         const pro = ref("eChartPro" + Date.now() + Math.random())
         const state = reactive<stateType>({
            config:{
               header: ['消息列表', '同比'],
               data: [
                  ['一月预警消息SPI报告', '↑ 94%'],
                  ['二月预警消息SPI报告', '↑ 94%'],
                  ['三月预警消息SPI报告', '↑ 94%'],
                  ['四月预警消息SPI报告', '↑ 94%'],
                  ['五月预警消息SPI报告', '↑ 94%'],
                  ['六月预警消息SPI报告', '↑ 94%'],
                  ['七月预警消息SPI报告', '↑ 94%'],
                  ['八月预警消息SPI报告', '↑ 94%'],
                  ['九月预警消息SPI报告', '↑ 94%'],
                  ['十月预警消息SPI报告', '↑ 94%'],
                  ['十一月预警消息SPI报告', '↑ 94%'],
                  ['十二月预警消息SPI报告', '↑ 94%']
               ],
               index: true,
               columnWidth: [60],
               align: ['center','center','center'],
               headerBGC: '#0049af',
               oddRowBGC: 'none',
               evenRowBGC: 'rgba(57,122,206,.1)',
               indexHeader: '序号',
               rowNum: fontSize(5)
            }
         })

         const mouseoverHandler = (e: any) => {
            console.log(e)
         }

         const clickHandler = (e: any) => {
            console.log(e)
         }

         function fontSize(val){
            let nowClientWidth = document.documentElement.clientWidth;
            return val * (nowClientWidth/1920) * Number(props.size);
         }

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

         return {
            pro,
            Search,
            mouseoverHandler,
            clickHandler,
            fontSize,
            ...toRefs(state)
         };
      },
   });
</script>
<style scoped lang="scss">

   .charts-cont{
      width: 100%;
      height: 100%;
      padding: 5%;
      position: relative;

      .message{
         width: 100%;
         height: 100%;
         border-radius: 4px;
         overflow: hidden;

         .th{
            width: 100%;
            display: flex;
            height: 36px;
            justify-content: space-between;
            background: #1882d5;
            font-size: 1rem;
            line-height: 36px;
            color: #ffffff;
            .th-num{
               width: 15%;
               text-align: center;
            }
            .th-info{
               width: 70%;
               text-align: left;
               color: #11FEEE
            }
            .th-sum{
               width: 15%;
               text-align: center;
            }
         }

         .tm{
            height: calc(100% - 36px);
            width: 100%;
            overflow: hidden;
            scroll-behavior: smooth;

            .ti{
               display: flex;
               height: 40px;
               line-height: 40px;
               justify-content: space-between;
               color: #ffffff;

               .num{
                  width: 15%;
                  text-align: center;
               }
               .info{
                  width: 70%;
                  text-align: left;
                  color: #11FEEE
               }
               .sum{
                  width: 15%;
                  text-align: center;
               }
            }
            .darkBg{
               background: rgba(57,122,206,.4);
            }
         }
      }
   }
   .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>