网格大屏-弹框

src/components/mp-dialog.vue

@@ -0,0 +1,155 @@
+<template>
+  <div class="mask center " v-if="maskShow">
+    <div class="dialog animate__animated animate__faster" :class="dialogShow?'animate__zoomIn':'animate__zoomOut'">
+      <dv-border-box-3 color="['#2567d8','#2567d8']">
+        <dv-border-box-8 backgroundColor="rgba(6, 57, 111, 0.5)">
+          <img class="close animate__animated" src="../../public/data/close.png"
+            :class="closeEnter?'animate__heartBeat':''" @mouseenter="closeEnter=true" @mouseleave="closeEnter=false"
+            @click="close" />
+          <div class="content">
+            <div class="title">
+              <div style="display: flex;">
+                <dv-decoration-1 style="width:100px;height:30px;" />
+                <div style="padding:0 20px;">{{title}}</div>
+                <dv-decoration-1 style="width:100px;height:30px;" />
+              </div>
+              <dv-decoration-5 style="width:50%;height:40px;margin-top: -10px;" />
+            </div>
+            <div class="info">
+              <slot name="detail"></slot>
+            </div>
+            <div class="bottom">
+              <div style="text-align: center;padding: 5px;">
+                {{detail.categoryName}}
+              </div>
+              <div>
+                <i class="el-icon-time" style="padding-right: 10px;"></i>
+                <span>{{detail.releaseTime || detail.alarmTime}}</span>
+              </div>
+            </div>
+          </div>
+        </dv-border-box-8>
+      </dv-border-box-3>
+    </div>
+  </div>
+</template>
+
+<script>
+  export default {
+    name: "test",
+    props:{
+      detail:Object,
+      titleName:String
+    },
+    computed:{
+      title:{
+        get(){
+          if (!this.titleName) {
+            return this.detail.title
+          }
+          let tmp=this.detail[this.titleName]
+          if (tmp) {
+            return tmp
+          }else{
+            return "设备工单"
+          }
+        }
+      }
+    },
+    data() {
+      return {
+        dialogShow: false,
+        maskShow: false,
+        closeEnter: false,
+      }
+    },
+    methods:{
+      open(){
+        this.maskShow = true
+        this.dialogShow = true
+      },
+      close() {
+        let _this = this
+        this.dialogShow = false
+        setTimeout(() => {
+          _this.maskShow = false
+        }, 50)
+      },
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  .center {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+
+  .full {
+    width: 100%;
+    height: 100%;
+  }
+
+  .content {
+    width: 100%;
+    height: 100%;
+    position: relative;
+
+    .title {
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      align-items: center;
+      height: 10%;
+      width: 100%;
+      font-weight: 800;
+      color: #00dcfd;
+      font-size: 26px;
+      padding-top: 15px;
+    }
+    .info {
+      height: 90%;
+      width: 100%;
+    }
+
+    .bottom{
+      color: #00dcfd;
+      position: absolute;
+      bottom: 20px;
+      right: 20px;
+    }
+  }
+
+  .mask {
+    position: absolute;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    top: 0;
+    background-color: rgba(18, 98, 140, .6);
+    width: 100%;
+    height: 100%;
+    z-index: 9999999999999;
+
+    .dialog {
+      position: relative;
+      width: 46%;
+      height: 56%;
+      background-color: rgba(4, 25, 50, .5);
+
+      .close {
+        z-index: 999;
+        position: absolute;
+        right: -15px;
+        top: -20px;
+        width: 48px;
+        height: 48px;
+        font-size: 50px;
+        color: #00dcfd;
+        cursor: pointer;
+      }
+
+    }
+  }
+</style>

src/views/grid/scenes/dataScreen.vue

@@ -58,7 +58,7 @@
         :color="color" :backgroundColor="backgroundColor">
         <dv-border-box-1>
           <div class="center full" style="flex-direction: column;padding-top: 15px;">
-            <div style="font-size: 20px;font-weight: 800;margin-bottom: -20px;" :style="{color:fontColor}">重点人员比例</div>
+            <div style="font-size: 20px;font-weight: 800;margin-bottom: -20px;" :style="{color:fontColor}">社区人口数量</div>
             <div id="communityOption" style="height: 100%;width: 95%;"></div>
           </div>
         </dv-border-box-1>
@@ -128,7 +128,7 @@
               <div>设备地点</div>
               <div>告警时间</div>
             </div>
-            <dv-scroll-board ref="border8" v-if="config.data.length>0" style="height: 82%;width: 94%"
+            <dv-scroll-board @click="alarmClick" ref="border8" v-if="config.data.length>0" style="height: 82%;width: 94%"
               :config="config" />
             <div class="green" style="font-size: 20px;letter-spacing: 5px" v-else>暂无报警信息</div>
           </div>
@@ -166,25 +166,51 @@
         </div>
       </dv-border-box-1>
     </div>
-
-    <div class="mask center " v-if="maskShow">
-      <div class="dialog animate__animated animate__faster" :class="dialogShow?'animate__zoomIn':'animate__zoomOut'">
-        <dv-border-box-10>
-          <dv-border-box-8 backgroundColor="rgba(4, 25, 50,.5)">
-            <img class="close animate__animated" style="width: 48px;height: 48px;"
-              src="../../../../public/data/close.png" :class="closeEnter?'animate__heartBeat':''"
-              @mouseenter="closeEnter=true" @mouseleave="closeEnter=false" @click="close" />
-          </dv-border-box-8>
-        </dv-border-box-10>
+    <!-- 通知公告弹窗 -->
+    <mp-dialog ref="noticeDialog" :detail="noticeDetail">
+      <div slot="detail" class="detail">
+        <div v-html="noticeDetail.content"></div>
       </div>
-    </div>
+    </mp-dialog>
+    <!-- 设备警告弹窗 -->
+   <mp-dialog ref="alarmDialog" :detail="alarmDetail" titleName="alarmContent">
+      <div slot="detail" class="detail">
+        <div class="alarm_content">
+          <div style="padding: 10px;">
+            <span>告警类型：</span>
+            <span>{{alarmDetail.alarmType || '暂无数据'}}</span>
+          </div>
+          <div style="padding: 10px;">
+            <span>告警地点：</span>
+            <span>{{alarmDetail.alarmPosition}}</span>
+          </div>
+          <div style="padding: 10px;">
+            <span>告警原因：</span>
+            <span>{{alarmDetail.alarmReason || '暂无数据'}}</span>
+          </div>
+          <div style="padding: 10px;">
+            <span>工单状态：</span>
+            <span>{{alarmDetail.jobStatus==2?'已处理':'处理中'}}</span>
+          </div>
+          <div style="padding: 10px;">
+            <span>处理人：</span>
+            <span>{{alarmDetail.handler || '暂无数据'}}</span>
+          </div>
+          <div style="padding: 10px;">
+            <span>电话：</span>
+            <span>{{alarmDetail.phone || '暂无数据'}}</span>
+          </div>
+        </div>
+      </div>
+    </mp-dialog>
 
   </div>
 
 </template>
 
 <script>
-  import myDialog from "/src/components/myDialog.vue"
+  import {dateFormat} from "../../../util/date.js"
+  import mpDialog from "/src/components/mp-dialog.vue"
   import Map3D from "/src/components/3DMap/Map3D";
   import TimeBar from "/src/components/TimeBar.vue"
   import topMenu from "/src/components/top-menu.vue"
@@ -208,15 +234,16 @@
   } from "/src/api/grid/grid.js";
   export default {
     components: {
-      myDialog,
+      mpDialog,
       topMenu,
       TimeBar,
-      Map3D
+      Map3D,
+    },
+    created() {
+      //获取通知公告的数据
+      this.getNoticeOption()
     },
     mounted() {
-      getNoticeList().then(res=>{
-        console.log(res,"========================>");
-      })
       this.getOptionData()
     },
     watch: {
@@ -245,21 +272,18 @@
         selectGrid: {},
         selectGridIndex: 0,
 
-        noticeOption: {
-          columnWidth: [500],
-          oddRowBGC: 'rgba(9, 215, 183, 0.1)',
-          evenRowBGC: 'rgba(58, 104, 182, 0.3)',
-          waitTime: 2000,
-          data: [
-            ['放假通知：放假放放假放假放放假放假放放假放假放放假放假放放假放假放放假'],
-            ['防疫通知：防疫通行防'],
-            ['停水通知，停水通知'],
-          ]
-        },
+        noticeOption: {},
+        noticeList:[],
+        noticeDetail:{},
 
         dialogShow: false,
         maskShow: false,
         closeEnter: false,
+
+        //报警列表
+        alarmList:[],
+        alarmDetail:{},
+
         fontColor: "#00f9cf",
         backgroundColor: "rgba(15, 33, 70, 0.6)",
         color: ['#42599d', '#3a4e8a'],
@@ -344,8 +368,6 @@
         this.fetchData(this.$route.query['id']);
         let _this = this
         setTimeout(() => {
-          //获取通知公告的数据
-          _this.getNoticeOption()
           //获取人员分布
           _this.getPersonnelDistribution()
           //获取年龄分布
@@ -353,8 +375,22 @@
           _this.getGridOption()
         }, 500)
       },
-      async getNoticeOption(){
-
+      async getNoticeOption() {
+        let data = []
+        let res = await getNoticeList()
+        this.noticeList = res.data.data.records
+        this.noticeList.forEach(item => {
+          let date= dateFormat(new Date(item.releaseTime),'yyyy-MM-dd')
+          let str = `${date}:【${item.categoryName}] ${item.title}`
+          data.push([str])
+        })
+        this.noticeOption = {
+          columnWidth: [500],
+          oddRowBGC: 'rgba(9, 215, 183, 0.1)',
+          evenRowBGC: 'rgba(58, 104, 182, 0.3)',
+          waitTime: 2000,
+          data
+        }
       },
       changeGridIndex(type) {
         this.$animateCss('#gridName', 'animate__fadeInDown')
@@ -378,16 +414,13 @@
         }
         this.grid = this.grids[this.selectGridIndex]
       },
-      close() {
-        let _this = this
-        this.dialogShow = false
-        setTimeout(() => {
-          _this.maskShow = false
-        }, 50)
+      alarmClick(e){
+        this.$refs.alarmDialog.open()
+        this.alarmDetail=this.alarmList[e.rowIndex]
       },
-      noticeClick() {
-        this.maskShow = true
-        this.dialogShow = true
+      noticeClick(e) {
+        this.$refs.noticeDialog.open()
+        this.noticeDetail=this.noticeList[e.rowIndex]
       },
       getGridOption() {
         var myChart = this.$echarts.init(document.getElementById('gridOption'));
@@ -716,8 +749,11 @@
           data: [],
           align: ['center', 'center', 'center'],
         };
+        console.log(list,"============================>");
+        this.alarmList=list
         list.forEach(item => {
-          data.data.push([item.alarmContent, item.alarmPosition, item.alarmTime])
+          let alarmType=item.alarmContent || '暂无数据'
+          data.data.push([alarmType, item.alarmPosition, item.alarmTime])
         });
         this.config = data
         let _this = this
@@ -765,6 +801,22 @@
     height: 30px;
   }
 
+  .detail {
+    overflow: auto;
+    padding: 20px;
+    color: #32c4e8;
+    line-height: 30px;
+    font-size: 18px;
+    height: 75%;
+
+    .alarm_content{
+      margin-left: 50px;
+      display: flex;
+      flex-direction: column;
+      justify-content: flex-start;
+    }
+  }
+
   .mask {
     position: absolute;
     left: 0;

vue.config.js

@@ -33,10 +33,10 @@ module.exports = {
         }
       },
       '/api': {
-        target: 'http://localhost',
+        // target: 'http://localhost',
         //测试环境地址
 
-        // target: 'http://36.103.227.152:1777/api',
+        target: 'http://36.103.227.152:1777/api',
         ws: true,
         pathRewrite: {
           '^/api': '/'