zc

src/views/components/center-bottom-left.vue

@@ -14,8 +14,8 @@
             </div>
             <div class="text-box">
               <p>环比</p>
-              <p class="el-icon-caret-top colorA"></p>
-              <!--<p class="el-icon-caret-bottom"></p>-->
+              <p class="el-icon-caret-top colorA" v-if="newData.isRise"></p>
+              <p class="el-icon-caret-bottom colorA" v-if="!newData.isRise"></p>
               <p class="colorA">{{newData.chainRatio}}%</p>
             </div>
             <p class="position-black-p"></p>

src/views/components/center-top.vue

@@ -6,7 +6,7 @@
         <div class="position-box">
           <p class="title-p">资源设施总数</p>
           <div class="num-max-box">
-            <p>362</p>
+            <p>{{total}}</p>
             <p>间</p>
           </div>
           <div class="num-for-box">

src/views/components/notice.vue

@@ -0,0 +1,353 @@
+<template>
+  <div class="notice">
+    <div class="content-box" id="scrollTextBox" v-if="pageType == 0" v-html="content"></div>
+    <vue-office-pdf
+      id="scrollPdfBox"
+      :options="{width:1190}"
+      v-if="pageType == 1"
+      :src="lookUrl"
+      @rendered="renderedHandler"
+      @error="errorHandler"
+    />
+    <vue-office-docx
+      id="scrollDocxBox"
+      style="width:1190px;margin:0 auto;"
+      v-if="pageType == 2"
+      :src="lookUrl"
+      @rendered="renderedHandler"
+      @error="errorHandler"
+    />
+    <div class="img-max-big-box" ref="viewBox" v-if="pageType == 3">
+      <img :src="lookImg" ref="viewImg"
+           v-if="imgShowType"
+           :style="'top:'+top+'px;left:'+left+'px;height:'+(height+(heightRatio*ratio))+'px;width:'+(width+(widthRatio*ratio))+'px;'">
+    </div>
+    <div class="mp4-max-big-box" ref="mp4Box" v-if="pageType == 4">
+      <video class="video-player vjs-custom-skin"
+             ref="videoBox"
+             style="display:block;width:1300px;height:731px;margin:140px auto;"
+             autoplay="autoplay"
+             @ended="noticeCheck"
+             v-if="mp4Url">
+        <source :src="mp4Url" type="video/mp4">
+      </video>
+    </div>
+  </div>
+</template>
+<script>
+  //引入VueOfficeDocx组件
+  import VueOfficeDocx from '@vue-office/docx'
+  import '@vue-office/docx/lib/index.css'
+  //引入VueOfficePdf组件
+  import VueOfficePdf from '@vue-office/pdf'
+  export default {
+    name: 'notice',
+    props: {
+      noticeProps: {}
+    },
+    components: {
+      VueOfficeDocx,
+      VueOfficePdf
+    },
+    data () {
+      return {
+        pageType:null,
+        //文本/文件地址
+        content:null,
+        //img地址
+        lookUrl:null,
+        //MP4地址
+        mp4Url:null,
+        //滚动条定时器
+        scrollInterval:null,
+        scrollIntervalTime:16,
+        //图片数据
+        //定位
+        top: 0,
+        left: 0,
+        //尺寸
+        width: 0,
+        height: 0,
+        //最大画布尺寸
+        maxWidth: 0,
+        maxHeight: 0,
+        lookImg: '',
+        imgShowType: false,
+        imgNullType: false,
+        ratio: 1,
+        widthRatio: null,
+        heightRatio: null,
+      }
+    },
+    created(){
+
+    },
+    mounted(){
+      this.initialize();
+    },
+    methods:{
+      initialize(){
+        let self = this;
+        if(this.noticeProps.type == 0){
+          this.$set(this,'pageType',0);
+          this.$set(this,'content',this.noticeProps.content);
+          setTimeout(function() {
+            self.startScrolling()
+          },500)
+        }else{
+          if(this.noticeProps.content.indexOf('.pdf') != -1){
+            this.$set(this,'pageType',1);
+            this.$set(this,'lookUrl',this.noticeProps.content);
+          }else if(this.noticeProps.content.indexOf('.docx') != -1){
+            this.$set(this,'pageType',2);
+            this.$set(this,'lookUrl',this.noticeProps.content);
+          }else if(this.noticeProps.content.indexOf('.png') != -1){
+            this.$set(this,'pageType',3);
+            this.getImgData(this.noticeProps.content);
+          }else if(this.noticeProps.content.indexOf('.jpg') != -1){
+            this.$set(this,'pageType',3);
+            this.getImgData(this.noticeProps.content);
+          }else if(this.noticeProps.content.indexOf('.mp4') != -1){
+            this.$set(this,'mp4Url',this.noticeProps.content);
+            this.$set(this,'pageType',4);
+            setTimeout(function() {
+              self.playVideo();
+            },500)
+          }
+        }
+      },
+      noticeCheck(){
+        this.playVideo();
+      },
+      //文件滚动
+      startScrolling() {
+        let scrollBox = null;
+        if(this.pageType == 0){
+          scrollBox = document.getElementById('scrollTextBox');
+        }else if(this.pageType == 1){
+          scrollBox = document.getElementById('scrollPdfBox');
+        }else if(this.pageType == 2){
+          scrollBox = document.getElementById('scrollDocxBox');
+        }
+        const maxScroll = scrollBox.scrollHeight - scrollBox.clientHeight;
+        let currentPos = scrollBox.scrollTop;
+        const speed = 1;
+        this.scrollInterval = setInterval(() => {
+          currentPos += speed;
+          scrollBox.scrollTop = currentPos;
+          // 到达底部时重置到顶部
+          if (currentPos >= maxScroll) {
+            currentPos = 0;
+            scrollBox.scrollTop = 0;
+            // 可选：这里可以重新获取maxScroll，防止内容动态变化
+            // maxScroll = scrollBox.scrollHeight - scrollBox.clientHeight;
+          }
+        }, this.scrollIntervalTime);
+      },
+      //图片数据
+      getImgData(newImg){
+        let self = this;
+        this.$set(this, 'maxWidth', this.$refs['viewBox'].offsetWidth)
+        this.$set(this, 'maxHeight', this.$refs['viewBox'].offsetHeight)
+        // 图片地址
+        let img = new Image()
+        let res = {}
+        img.src = newImg
+        img.onload = function() {
+          res = {
+            width: img.width,
+            height: img.height
+          }
+          if (self.maxWidth >= res.width && self.maxHeight >= res.height) {
+            let w = self.cal.accSub(self.maxWidth, res.width)
+            let h = self.cal.accSub(self.maxHeight, res.height)
+            self.$set(self, 'width', res.width)
+            self.$set(self, 'height', res.height)
+            self.$set(self, 'top', h > 2 ? self.cal.accDiv(h, 2) : 0)
+            self.$set(self, 'left', w > 2 ? self.cal.accDiv(w, 2) : 0)
+            self.$set(self, 'lookImg', newImg)
+            self.$set(self, 'imgShowType', true)
+            self.initializeRation(res.width, res.height)
+          } else if (self.maxWidth >= res.width && self.maxHeight < res.height) {
+            let a = self.cal.accDiv(res.width, res.height)
+            let b = self.cal.accSub(res.height, (self.maxHeight - 100))
+            let c = self.cal.accMul(a, b)
+            let width = self.cal.accSub(res.width, c)
+            let height = self.cal.accSub(res.height, b)
+            let w = self.cal.accSub(self.maxWidth, width)
+            let h = self.cal.accSub(self.maxHeight, height)
+            self.$set(self, 'width', width)
+            self.$set(self, 'height', height)
+            self.$set(self, 'top', h > 2 ? self.cal.accDiv(h, 2) : 0)
+            self.$set(self, 'left', w > 2 ? self.cal.accDiv(w, 2) : 0)
+            self.$set(self, 'lookImg', newImg)
+            self.$set(self, 'imgShowType', true)
+            self.initializeRation(width, height)
+          } else if (self.maxWidth < res.width && self.maxHeight >= res.height) {
+            let a = self.cal.accDiv(res.height, res.width)
+            let b = self.cal.accSub(res.width, (self.maxWidth - 100))
+            let c = self.cal.accMul(a, b)
+            let width = self.cal.accSub(res.width, b)
+            let height = self.cal.accSub(res.height, c)
+            let w = self.cal.accSub(self.maxWidth, width)
+            let h = self.cal.accSub(self.maxHeight, height)
+            self.$set(self, 'width', width)
+            self.$set(self, 'height', height)
+            self.$set(self, 'top', h > 2 ? self.cal.accDiv(h, 2) : 0)
+            self.$set(self, 'left', w > 2 ? self.cal.accDiv(w, 2) : 0)
+            self.$set(self, 'lookImg', newImg)
+            self.$set(self, 'imgShowType', true)
+            self.initializeRation(width, height)
+          } else {
+            let x = self.cal.accSub(res.width, self.maxWidth)
+            let y = self.cal.accSub(res.height, self.maxHeight)
+            if (x >= y) {
+              let a = self.cal.accDiv(res.height, res.width)
+              let b = self.cal.accSub(res.width, (self.maxWidth - 100))
+              let c = self.cal.accMul(a, b)
+              let width = self.cal.accSub(res.width, b)
+              let height = self.cal.accSub(res.height, c)
+              let w = self.cal.accSub(self.maxWidth, width)
+              let h = self.cal.accSub(self.maxHeight, height)
+              self.$set(self, 'width', width)
+              self.$set(self, 'height', height)
+              self.$set(self, 'left', w > 2 ? self.cal.accDiv(w, 2) : 0)
+              self.$set(self, 'top', h > 2 ? self.cal.accDiv(h, 2) : 0)
+              self.$set(self, 'lookImg', newImg)
+              self.$set(self, 'imgShowType', true)
+              self.initializeRation(width, height)
+            } else {
+              let a = self.cal.accDiv(res.width, res.height)
+              let b = self.cal.accSub(res.height, (self.maxHeight - 100))
+              let c = self.cal.accMul(a, b)
+              let width = self.cal.accSub(res.width, c)
+              let height = self.cal.accSub(res.height, b)
+              let w = self.cal.accSub(self.maxWidth, width)
+              let h = self.cal.accSub(self.maxHeight, height)
+              self.$set(self, 'width', width)
+              self.$set(self, 'height', height)
+              self.$set(self, 'left', w > 2 ? self.cal.accDiv(w, 2) : 0)
+              self.$set(self, 'top', h > 2 ? self.cal.accDiv(h, 2) : 0)
+              self.$set(self, 'lookImg', newImg)
+              self.$set(self, 'imgShowType', true)
+              self.initializeRation(width, height)
+            }
+          }
+        }
+        img.onerror = function() {
+          self.$set(self, 'imgNullType', true)
+        }
+      },
+      //播放视频
+      playVideo(){
+        var video = this.$refs.videoBox;
+        video.autoplay = true;
+        video.play()
+      },
+      //初始化缩放倍率
+      initializeRation(w, h) {
+        this.$set(this, 'ratio', 0)
+        this.$set(this, 'widthRatio', this.cal.accDiv(w, 10))
+        this.$set(this, 'heightRatio', this.cal.accDiv(h, 10))
+      },
+      //文件加载成功
+      renderedHandler() {
+        console.log("渲染完成")
+        this.startScrolling()
+      },
+      //文件加载失败
+      errorHandler() {
+        console.log("渲染失败")
+      },
+    },
+    beforeDestroy() {
+      clearInterval(this.scrollInterval);
+    },
+    destroyed() {
+      clearInterval(this.scrollInterval);
+    }
+  }
+</script>
+<style scoped lang="scss">
+  .notice{
+    flex:1;
+    overflow: hidden;
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+    //富文本
+    .content-box{
+      flex:1;
+      width:1300px;
+      margin:20px auto;
+      overflow-y: scroll;
+    }
+    .content-box::-webkit-scrollbar{
+      width: 6px;     /*高宽分别对应横竖滚动条的尺寸*/
+      height: 6px;
+    }
+    .content-box::-webkit-scrollbar-thumb{
+      border-radius: 5px;
+      background: #003988;
+    }
+    .content-box::-webkit-scrollbar-track{
+      -webkit-box-shadow: inset 0 0 5px #FFFFFF;
+      border-radius: 0;
+      background: #FFFFFF;
+      display: none;
+    }
+    //PDF
+    ::v-deep .vue-office-pdf{
+      margin:20px auto!important;
+      width:1190px!important;
+    }
+    ::v-deep .vue-office-pdf-wrapper{
+      background-color: rgba(0,0,0,0)!important;
+    }
+    ::v-deep .vue-office-pdf::-webkit-scrollbar{
+      width: 6px;     /*高宽分别对应横竖滚动条的尺寸*/
+      height: 6px;
+    }
+    ::v-deep .vue-office-pdf::-webkit-scrollbar-thumb{
+      border-radius: 5px;
+      background: #003988;
+    }
+    ::v-deep .vue-office-pdf::-webkit-scrollbar-track{
+      -webkit-box-shadow: inset 0 0 5px #FFFFFF;
+      border-radius: 0;
+      background: #FFFFFF;
+      display: none;
+    }
+    //docx
+    ::v-deep .vue-office-docx{
+      margin:20px auto!important;
+      width:1190px!important;
+    }
+    ::v-deep .docx-wrapper{
+      background-color: rgba(0,0,0,0)!important;
+    }
+    ::v-deep .vue-office-docx::-webkit-scrollbar{
+      width: 6px;     /*高宽分别对应横竖滚动条的尺寸*/
+      height: 6px;
+    }
+    ::v-deep .vue-office-docx::-webkit-scrollbar-thumb{
+      border-radius: 5px;
+      background: #003988;
+    }
+    ::v-deep .vue-office-docx::-webkit-scrollbar-track{
+      -webkit-box-shadow: inset 0 0 5px #FFFFFF;
+      border-radius: 0;
+      background: #FFFFFF;
+      display: none;
+    }
+    .img-max-big-box{
+      flex: 1;
+      overflow: hidden;
+      position: relative;
+      img {
+        position: absolute;
+        -webkit-user-drag: none;
+      }
+    }
+  }
+</style>

src/views/home.vue

@@ -1,7 +1,8 @@
 <template>
   <div class="home">
     <headComponent></headComponent>
-    <div class="home-page">
+    <notice v-if="noticeShowType" :noticeProps="noticeProps"></notice>
+    <div class="home-page" v-if="!noticeShowType">
       <div class="home-left-box">
         <left-top></left-top>
         <left-bottom></left-bottom>
@@ -29,7 +30,7 @@
     iotSensorFindBySubId,
     iotCameraFindByCondition
   } from "@/api/index";
-  import { dashboardsResearchUsage } from "@/api/yiLi";
+  import { dashboardsResearchUsage,dashboardsNotice } from "@/api/yiLi";
   import { getFloorMaps } from '@/utils/mapList'
   //head组件
   import headComponent from './components/headComponent.vue'
@@ -41,6 +42,7 @@
   import centerBottomLeft from './components/center-bottom-left.vue'
   import centerBottomRight from './components/center-bottom-right.vue'
   import right from './components/right.vue'
+  import notice from './components/notice.vue'
   //报警弹窗
   import alarmComponent from './components/subcomponent/alarmComponent.vue'
 
@@ -56,6 +58,7 @@
       centerBottomLeft,
       centerBottomRight,
       right,
+      notice,
       alarmComponent
     },
     data () {
@@ -70,6 +73,13 @@
         alarmTimer:null,
         //预案查询定时
         alarmSwitchTime:60000,
+        //通知查询定时器
+        noticeTimer:null,
+        //通知查询定时
+        noticeSwitchTime:600000,
+        noticeShowType:false,
+        //通知数据
+        noticeProps:{},
       }
     },
     created(){
@@ -80,8 +90,30 @@
       this.laboratoryBigViewSelectTriggerInfo();
       //开启预案定时查询
       this.alarmTimerFunction();
+      //开启定时通知查询
+      this.getDataTimerFunction();
     },
     methods:{
+      getDataTimerFunction(){
+        clearInterval(this.noticeTimer)
+        this.dashboardsNotice();
+        this.noticeTimer = window.setInterval(() => {
+          if(this.noticeShowType){
+            this.$set(this,'noticeShowType',false);
+          }else{
+            this.dashboardsNotice();
+          }
+        }, this.noticeSwitchTime);
+      },
+      //定时获取通知
+      dashboardsNotice(){
+        dashboardsNotice().then(res => {
+          if(res.data){
+            this.$set(this,'noticeProps',res.data[0]);
+            this.$set(this,'noticeShowType',true);
+          }
+        })
+      },
       /*************** 获取报警相关 ***************/
       laboratoryBigViewSelectTriggerInfo(){
         laboratoryBigViewSelectTriggerInfo().then(res => {
@@ -212,11 +244,13 @@
     },
     beforeDestroy() {
       clearInterval(this.alarmTimer);
+      clearInterval(this.noticeTimer)
       //清除MQTT
       this.offPlanMQTT();
     },
     destroyed() {
       clearInterval(this.alarmTimer);
+      clearInterval(this.noticeTimer)
       //清除MQTT
       this.offPlanMQTT();
     }