Default Changelist

Admin

2022-09-08 2ab19e1ce6119404dad466f387b0ad6c73d9c5b8

Default Changelist

 src/router/route.ts

@@ -119,5 +119,13 @@
        meta: {
            title: '预警预报'
        }
    },
    {
        path: '/msgDetail',
        name: 'msgDetail',
        component: () => import('/@/views/riskWarningSys/warningBigScreen/indexs/msgDetail.vue'),
        meta: {
            title: 'spi报告详情'
        }
    }
];

 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,6 +14,7 @@
    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';
@@ -34,6 +35,7 @@
            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>({
                config:{
@@ -68,7 +70,13 @@
            }

            const clickHandler = (e: any) => {

                console.log(e.row,'row')
                router.push({
                    path: 'msgDetail',
                    query: {
                        row: e.row
                    }
                })
            }

            function fontSize(val){

 src/views/riskWarningSys/warningBigScreen/index.vue

@@ -430,7 +430,7 @@

        .header-content {
            width: 100%;
            height: 72px;
            height: 7.8%;
            padding: 0 20px;
            font-size: 1.25rem;
            display: flex;
@@ -444,15 +444,15 @@
                align-items: center;
                justify-content: center;
                img {
                    height: 35px;
                    width: 128px;
                    width: 10rem;
                    height: auto;
                }
            }
            .title {
                width: 46%;
                font-size: 2rem;
                font-weight: bolder;
                line-height: 72px;
                line-height: 7.8%;
                text-align: center;
                letter-spacing: 2px;
            }
@@ -468,6 +468,7 @@

                .datetime {
                    color: #11FEEE;
                    font-size: 0.9rem;
                }
                .btns{
                    display: flex;
@@ -484,7 +485,8 @@
                            height: 1rem;
                        }
                        div{
                            margin-left: 6px;
                            margin-left: 0.4rem;
                            font-size: 0.9rem;
                        }
                    }
                    .themeBtn{
@@ -505,7 +507,7 @@
        }
        .main-content{
            width: 100%;
            height: calc(100vh - 72px);
            height: calc(100vh - 7.8%);
            padding: 0.4rem 1.5rem 2rem;
            display: flex;
            align-items: center;
@@ -728,7 +730,7 @@

        .header-content {
            width: 100%;
            height: 72px;
            height: 7.8%;
            padding: 0 20px;
            font-size: 1.25rem;
            display: flex;
@@ -742,15 +744,15 @@
                align-items: center;
                justify-content: center;
                img {
                    height: 35px;
                    width: 128px;
                    width: 10rem;
                    height: auto;
                }
            }
            .title {
                width: 46%;
                font-size: 2rem;
                font-weight: bolder;
                line-height: 72px;
                line-height: 7.8%;
                text-align: center;
                letter-spacing: 2px;
            }
@@ -766,6 +768,7 @@

                .datetime {
                    color: #000;
                    font-size: 0.9rem;
                }
                .btns{
                    display: flex;
@@ -782,7 +785,8 @@
                            height: 1rem;
                        }
                        div{
                            margin-left: 6px;
                            margin-left: 0.4rem;
                            font-size: 0.9rem;
                        }
                    }
                    .themeBtn{
@@ -803,7 +807,7 @@
        }
        .main-content{
            width: 100%;
            height: calc(100vh - 72px);
            height: calc(100vh - 7.8%);
            padding: 0.4rem 1.5rem 2rem;
            display: flex;
            align-items: center;

 src/views/riskWarningSys/warningBigScreen/indexs/msgDetail.vue

对比新文件
@@ -0,0 +1,135 @@
<template>
  <div id="pageCont" class="dark-page">
    <div class="btns">
      <dv-decoration-11 :color="lineColor" @click="goBack()">
        <div color-green font-600 bg="~ dark/0">
          返回
        </div>
      </dv-decoration-11>
    </div>
    <dv-decoration7 :color="lineColor" style="width:100%;height:6%;margin-bottom: 20px">
      <div class="msgTit">
        Decoration
      </div>
    </dv-decoration7>
    <dv-border-box1 :color="lineColor" style="width: 100%;height: calc(100% - 20px)">

    </dv-border-box1>
  </div>
</template>

<script lang="ts">
  import screenfull from 'screenfull';
  import { toRefs, reactive, ref, onMounted, defineComponent, defineAsyncComponent, nextTick, onUnmounted } from 'vue';
  import { ElTable } from 'element-plus';
  import { FormInstance, FormRules, ElMessage } from 'element-plus';
  import { safetyRiskEventApi } from '/@/api/doublePreventSystem/safetyRiskEvent/index.ts';
  import { useRoute } from 'vue-router';
  import {hiddenReportApi} from "/@/api/doublePreventSystem/report";
  import { productionDeviceApi } from '/@/api/doublePreventSystem/productionDevice/index.ts';
  import '/@/theme/bigScreen.css'
  import {useScreenTheme} from "/@/stores/screenTheme"
  import {storeToRefs} from "pinia";

  // 定义接口来定义对象的类型
  interface stateType {

  }
  export default defineComponent({
    name: 'msgDetail',
    components: {

    },
    setup() {
      const screenThemes = useScreenTheme()
      const { screenTheme } = storeToRefs(screenThemes);
      const route = useRoute();
      const state = reactive<stateType>({
        lineColor: ['#11FEEE'],
      });

      // 页面载入时执行方法
      onMounted(() => {
        // if (route.query.row) {
        //   state.row = route.query.num
        // }
        getTheme()
      });



      const getTheme =()=>{
        if(screenTheme.value.isDark){
          window.document.getElementById('pageCont').setAttribute( "class", 'dark-page' );
          state.lineColor = ['#11FEEE']
        }else{
          window.document.getElementById('pageCont').setAttribute( "class", 'light-page' );
          state.lineColor = ['#333','#ccc']
        }
      }

      // 返回上一页
      const goBack = () => {
        window.history.go(-1);
      };


      return {
        route,
        goBack,
        ...toRefs(state)
      };
    }
  });
</script>

<style scoped lang="scss">
  .dark-page{
    width: 100%;
    height: 100%;
    border:1px #5a5959 solid;
    background: url('../../../../assets/warningScreen/body-bg.jpg');
    padding: 1.25rem 4% 4%;
    .btns{
      position: fixed;
      width: 8%;
      height: 6%;
      right: 5%;
      top: 1.25rem;
      display: flex;
      align-items: center;
      font-size: 1.125rem;
      color: rgb(17, 254, 238);
      cursor: pointer;
    }
    .msgTit{
      font-size: 2rem;
      color: rgb(17, 254, 238);
      margin: 0 4rem;
    }
  }
  .light-page{
    width: 100%;
    height: 100%;
    border:1px #5a5959 solid;
    background: #F0F0F0;
    padding: 1.25rem 4% 4%;
    .btns{
      position: fixed;
      width: 8%;
      height: 6%;
      right: 5%;
      top: 1.25rem;
      display: flex;
      align-items: center;
      font-size: 1.125rem;
      color: #333;
      cursor: pointer;
    }
    .msgTit{
      font-size: 2rem;
      color: #333;
      margin: 0 4rem;
    }
  }
</style>