xiugai

马宇豪

2024-07-08 20b0ce2db27b64a60de60aee05dedd448099e330

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

@@ -1,7 +1,7 @@
<template>
   <div class="charts-cont">
      <div class="message">
         <dv-scroll-board ref="scrollBoard" :config="config" style="width:100%;height:100%" @mouseover="mouseoverHandler" @click="clickHandler" />
         <dv-scroll-board ref="scrollBoard" :config="config" style="width:100%;height:100%;cursor: pointer" @mouseover="mouseoverHandler" @click="clickHandler" />
      </div>
   </div>
</template>
@@ -14,13 +14,17 @@
   import { Session } from '/@/utils/storage';
   import { Search } from '@element-plus/icons-vue'
   import { ElMessage } from 'element-plus'
   import { useRouter } from 'vue-router'
   import type { FormInstance, FormRules } from 'element-plus'
   import { workApplyApi } from '/@/api/specialWorkSystem/workApply';
   import * as echarts from 'echarts';
   import '/@/theme/bigScreen.css'
   import {useScreenTheme} from "/@/stores/screenTheme"
  import {riskWarningApi} from "/@/api/riskWarning";

   interface stateType {
    reportData: []
      config: object
   }
   export default defineComponent({
      name: 'message',
@@ -29,46 +33,62 @@
         size: Number,
         theme: Boolean
      },
      setup(props) {
      setup(props,context) {
         const screenThemes = useScreenTheme()
         const { screenTheme }  = storeToRefs(screenThemes);
         const userInfo = useUserInfo()
         const { userInfos } = storeToRefs(userInfo);
         const router = useRouter();
         const pro = ref("eChartPro" + Date.now() + Math.random())
         const state = reactive<stateType>({
        reportData: [],
            config:{
               header: ['消息列表', '同比'],
               data: [
                  ['一月预警消息SPI报告', '<span style="color:#4CF475;">↑ 94%</span>'],
                  ['二月预警消息SPI报告', '<span style="color:#4CF475;">↑ 94%</span>'],
                  ['三月预警消息SPI报告', '<span style="color:#4CF475;">↑ 94%</span>'],
                  ['四月预警消息SPI报告', '<span style="color:red;">↓ 43%</span>'],
                  ['五月预警消息SPI报告', '<span style="color:#4CF475;">↑ 94%</span>'],
                  ['六月预警消息SPI报告', '<span style="color:#4CF475;">↑ 94%</span>'],
                  ['七月预警消息SPI报告', '<span style="color:#4CF475;">↑ 94%</span>'],
                  ['八月预警消息SPI报告', '<span style="color:red;">↓ 65%</span>'],
                  ['九月预警消息SPI报告', '<span style="color:#4CF475;">↑ 94%</span>'],
                  ['十月预警消息SPI报告', '<span style="color:#4CF475;">↑ 94%</span>'],
                  ['十一月预警消息SPI报告', '<span style="color:#4CF475;">↑ 94%</span>'],
                  ['十二月预警消息SPI报告', '<span style="color:#4CF475;">↑ 94%</span>']
               ],
               index: true,
               columnWidth: [60],
               align: ['center','center','center'],
               header: ['消息列表','同比'],
               data: [],
               align: ['left'],
               headerBGC: '#0049af',
               oddRowBGC: 'none',
          index: true,
          columnWidth: [55,250],
               evenRowBGC: 'rgba(57,122,206,.1)',
               indexHeader: '序号',
               rowNum: fontSize(5)
            }
         })

      const getReport = async () => {
        let res = await riskWarningApi().getAllReport();
        if (res.data.code === '200') {
          state.reportData = res.data.data
          state.config.data = state.reportData.map(i=> {
            if(i.yoy >= 0){
              return [i.spiName,'<span style="color:#11feee">' + i.yoy + '%</span>']
            }else{
              return [i.spiName,'<span style="color:red">' + i.yoy + '%</span>']
            }

          })
        } else {
          ElMessage({
            type: 'warning',
            message: res.data.msg
          });
        }
      }

         const mouseoverHandler = (e: any) => {

         }

         const clickHandler = (e: any) => {

            router.push({
               path: 'screenPage',
               query: {
            num: 8,
                  rowIndex: e.rowIndex
               }
            })
        context.emit('getData',e.rowIndex)
         }

         function fontSize(val){
@@ -101,6 +121,7 @@

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