From 836505dea0fee3a4ac2750d97aa244a820faed49 Mon Sep 17 00:00:00 2001
From: "zyc@123456" <784479659@qq.com>
Date: Thu, 25 May 2023 18:42:45 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E9=A6=96=E9=A1=B5=E9=A1=B5?=
 =?UTF-8?q?=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/layout/components/Navbar.vue              |   9 +-
 src/layout/components/Sidebar/index.vue       | 100 ++++----
 src/router/index.js                           |  56 +++--
 .../echarts/components/PieChartrenyuan.vue    | 222 +++++++++++++-----
 src/views/monitor/videos/index.vue            |  31 ++-
 src/views/renlianshibie/renlianshibieList.vue |  20 +-
 6 files changed, 316 insertions(+), 122 deletions(-)

diff --git a/src/layout/components/Navbar.vue b/src/layout/components/Navbar.vue
index faff57d..814f503 100644
--- a/src/layout/components/Navbar.vue
+++ b/src/layout/components/Navbar.vue
@@ -7,7 +7,7 @@
 <!--        <p>{{Orgname}} {{departmentName}} 欢迎, {{name}}</p>-->
         <p>欢迎您，{{name}}</p>
         <el-badge :value="6" class="item">
-          <img src="@/assets/images/info.png">
+          <img  @click="toxiaoxi()" src="@/assets/images/info.png">
         </el-badge>
         <!-- <img src="@/assets/images/dy.png" @click="logout"> -->
         <span class="backToHome" @click="logout"><i class="el-icon-back"></i>返回首页</span>
@@ -41,6 +41,9 @@
         // this.$router.push({ path: '/home' })
         window.opener = null
         window.open('about:blank', '_top').close()
+      },
+      toxiaoxi() {
+        this.$router.push('/xiaoxi/xiaoxiList')
       }
     }
   }
@@ -74,8 +77,8 @@
      display: flex;
      align-items: center;
      color: #fff;
-     font-size: 26px;
-     line-height: 60px;
+     font-size: 24px;
+     line-height: 60px;font-weight: bold;
      margin: 0;
      float: left;
    }
diff --git a/src/layout/components/Sidebar/index.vue b/src/layout/components/Sidebar/index.vue
index 8691f4b..9e13426 100644
--- a/src/layout/components/Sidebar/index.vue
+++ b/src/layout/components/Sidebar/index.vue
@@ -97,26 +97,26 @@
         //     path: "/gongyingshang/gongyingshanggaunli",
         //   }]
         // },
-        {
-          alwaysShow: true,
-          component: "dianzixungeng",
-          meta: {
-            icon: "icon-jingwuicon_svg-",
-            title: "电子巡更",
-          },
-          name: "",
-          path: "/dianzixungeng/dianzixungengL",
-          // children: [{
-          //   alwaysShow: true,
-          //   component: "index",
-          //   meta: {
-          //     icon: "el-icon-help",
-          //     title: "电子巡更",
-          //   },
-          //   name: "/dianzixungeng/dianzixungengL",
-          //   path: "/dianzixungeng/dianzixungengL",
-          // }]
-        },
+        // {
+        //   alwaysShow: true,
+        //   component: "dianzixungeng",
+        //   meta: {
+        //     icon: "icon-jingwuicon_svg-",
+        //     title: "电子巡更",
+        //   },
+        //   name: "",
+        //   path: "/dianzixungeng/dianzixungengL",
+        //   // children: [{
+        //   //   alwaysShow: true,
+        //   //   component: "index",
+        //   //   meta: {
+        //   //     icon: "el-icon-help",
+        //   //     title: "电子巡更",
+        //   //   },
+        //   //   name: "/dianzixungeng/dianzixungengL",
+        //   //   path: "/dianzixungeng/dianzixungengL",
+        //   // }]
+        // },
         {
           alwaysShow: true,
           component: "renlianshibie",
@@ -137,26 +137,26 @@
           //   path: "/renlianshibie/renlianshibieList",
           // }]
         },
-        {
-          alwaysShow: true,
-          component: "xiaofangbaojing",
-          meta: {
-            icon: "icon-baojingshu",
-            title: "消防报警",
-          },
-          name: "",
-          path: "/xiaofangbaojing/xiaofangbaojingL",
-          // children: [{
-          //   alwaysShow: true,
-          //   component: "index",
-          //   meta: {
-          //     icon: "el-icon-help",
-          //     title: "消防报警",
-          //   },
-          //   name: "/xiaofangbaojing/xiaofangbaojingL",
-          //   path: "/xiaofangbaojing/xiaofangbaojingL",
-          // }]
-        },
+        // {
+        //   alwaysShow: true,
+        //   component: "xiaofangbaojing",
+        //   meta: {
+        //     icon: "icon-baojingshu",
+        //     title: "消防报警",
+        //   },
+        //   name: "",
+        //   path: "/xiaofangbaojing/xiaofangbaojingL",
+        //   // children: [{
+        //   //   alwaysShow: true,
+        //   //   component: "index",
+        //   //   meta: {
+        //   //     icon: "el-icon-help",
+        //   //     title: "消防报警",
+        //   //   },
+        //   //   name: "/xiaofangbaojing/xiaofangbaojingL",
+        //   //   path: "/xiaofangbaojing/xiaofangbaojingL",
+        //   // }]
+        // },
         {
           alwaysShow: true,
           component: "shebeitaizhang",
@@ -236,6 +236,26 @@
           //   name: "/shebeirizhi/shebeirizhiList",
           //   path: "/shebeirizhi/shebeirizhiList",
           // }]
+        },
+        // {
+        //   alwaysShow: true,
+        //   component: "xiaoxi",
+        //   meta: {
+        //     icon: "icon-rizhi2",
+        //     title: "消息",
+        //   },
+        //   name: "",
+        //   path: "/xiaoxi/xiaoxiList",
+        // },
+        {
+          alwaysShow: true,
+          component: "daping",
+          meta: {
+            icon: "icon-jiance",
+            title: "布防大屏",
+          },
+          name: "",
+          path: "/daping",
         }
       ],
         params: {
diff --git a/src/router/index.js b/src/router/index.js
index bcbc72e..4f50ffe 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -29,6 +29,11 @@ export const constantRoutes = [
     path: "/login",
     component: () => import("@/views/login/login.vue"),
   },
+  {
+    path: "/daping",
+    component: () => import("@/views/daping/daping.vue"),
+    name: "daping",
+  },
   {
     path: "/home",
     component: () => import("@/views/Home/Home.vue"),
@@ -193,45 +198,66 @@ export const constantRoutes = [
     ],
   },
   ////电子巡更
+  // {
+  //   path: "/dianzixungengL",
+  //   component: Layout,
+  //   redirect: "/dianzixungeng/dianzixungengL",
+  //   meta: {
+  //     title: "电子巡更",
+  //   },
+  //   children: [
+  //     {
+  //       path: "/dianzixungeng/dianzixungengL",
+  //       component: () => import("@/views/dianzixungeng/dianzixungengL.vue"),
+  //       name: "dianzixungengL",
+  //       meta: {
+  //         title: "电子巡更",
+  //         noCache: true,
+  //       },
+  //     },
+  //   ],
+  // },
+  ////消防报警
   {
-    path: "/dianzixungengL",
+    path: "/xiaofangbaojingL",
     component: Layout,
-    redirect: "/dianzixungeng/dianzixungengL",
+    redirect: "/xiaofangbaojing/xiaofangbaojingL",
     meta: {
-      title: "电子巡更",
+      title: "消防报警",
     },
     children: [
       {
-        path: "/dianzixungeng/dianzixungengL",
-        component: () => import("@/views/dianzixungeng/dianzixungengL.vue"),
-        name: "dianzixungengL",
+        path: "/xiaofangbaojing/xiaofangbaojingL",
+        component: () => import("@/views/xiaofangbaojing/xiaofangbaojingL.vue"),
+        name: "xiaofangbaojingL",
         meta: {
-          title: "电子巡更",
+          title: "消防报警",
           noCache: true,
         },
       },
     ],
   },
-  ////消防报警
+  ////消息
   {
-    path: "/xiaofangbaojingL",
+    path: "/xiaoxiList",
     component: Layout,
-    redirect: "/xiaofangbaojing/xiaofangbaojingL",
+    redirect: "/xiaoxi/xiaoxiList",
     meta: {
-      title: "消防报警",
+      title: "消息",
     },
     children: [
       {
-        path: "/xiaofangbaojing/xiaofangbaojingL",
-        component: () => import("@/views/xiaofangbaojing/xiaofangbaojingL.vue"),
-        name: "xiaofangbaojingL",
+        path: "/xiaoxi/xiaoxiList",
+        component: () => import("@/views/xiaoxi/xiaoxiList.vue"),
+        name: "xiaoxiList",
         meta: {
-          title: "消防报警",
+          title: "消息",
           noCache: true,
         },
       },
     ],
   },
+
   ////
 
   ...codemenu,
diff --git a/src/views/echarts/components/PieChartrenyuan.vue b/src/views/echarts/components/PieChartrenyuan.vue
index 4d846c9..d579028 100644
--- a/src/views/echarts/components/PieChartrenyuan.vue
+++ b/src/views/echarts/components/PieChartrenyuan.vue
@@ -1,38 +1,39 @@
 <template>
-  <div :class="className" :style="{height:height,width:width}" />
+  <div :class="className" :style="{ height: height, width: width }" />
 </template>
 
 <script>
-// import echarts from 'echarts'
-import * as echarts from 'echarts';
-
+import * as echarts from 'echarts'
 // require('echarts/theme/macarons') // echarts theme
 import resize from './mixins/resize'
-import router from '../../../router'
+import router from '../../../router/index'
 
 export default {
   mixins: [resize],
   props: {
     className: {
       type: String,
-      default: 'chart'
+      default: 'chart',
     },
     width: {
       type: String,
-      default: '100%'
+      default: '100%',
     },
     height: {
       type: String,
-      default: '250px'
+      default: '100%',
     },
     chartData: {
       type: Object,
-      required: true
-    }
+      required: true,
+    },
   },
   data() {
     return {
-      chart: null
+      chart: null,
+      startCharts: null,
+      charPie3currentIndex: 0,
+      dataLen: 0,
     }
   },
   watch: {
@@ -40,18 +41,36 @@ export default {
       deep: true,
       handler(val) {
         this.setOptions(val)
-      }
-    }
+      },
+    },
   },
+  // mounted() {
+  //   this.$nextTick(() => {
+  //     this.initChart()
+  //   })
+  // },
   mounted() {
     this.$nextTick(() => {
       this.initChart()
     })
+    // 加的自适应
+    // this.init(); // 初始化图表
+    let _this = this
+    window.addEventListener('resize', function () {
+      if (_this.resizeTimer) clearTimeout(_this.resizeTimer)
+      _this.resizeTimer = setTimeout(function () {
+        _this.chart.resize()
+      }, 100)
+    })
   },
+
   beforeDestroy() {
     if (!this.chart) {
       return
     }
+    if (this.startCharts) {
+      clearInterval(this.startCharts)
+    }
     this.chart.dispose()
     this.chart = null
   },
@@ -60,52 +79,66 @@ export default {
       this.chart = echarts.init(this.$el, 'macarons')
       this.setOptions(this.chartData)
     },
-    setOptions({ legend, seriesName, Data, nextUrl, unit, params } = {}) {
-      this.chart.setOption({
+    setOptions({
+      legend,
+      seriesName,
+      Data,
+      nextUrl,
+      unit,
+      params,
+      color,
+    } = {}) {
+      var option = {
         title: {
           text: seriesName,
           // subtext: '纯属虚构',
           x: 'center',
-          // bottom: 10,
-          top: 10,
-          //left: 30,
+          // bottom: 0,
+          top: 0,
+          // left: 30,
 
           textStyle: {
-            fontSize: 20,
-            color: '#8657c8',
-            //fontWeight: 'bolder' // 字体加粗
-          }
+            // fontSize: 20,
+            color: '#b7d8fa',
+            fontSize: 0,
+
+            // fontWeight: 'bolder' // 字体加粗
+          },
         },
         grid: {
           left: 10,
           right: 10,
           bottom: 10,
-          top: 10,
-          containLabel: true
+          top: 0,
+          containLabel: true,
         },
         tooltip: {
+          show: false,
           trigger: 'item',
-         // formatter: '{b} : {c} ' + unit + ' ({d}%)'
-        formatter: '{a} <br/>{b} : {c} ({d}%)'
+          formatter: '{b} : {c} ' + unit + ' ({d}%)',
+          // formatter: '{a} <br/>{b} : {c} ({d}%)'
         },
-        legend: {
-         // right: '10',
-          bottom: '30',
+        legend: {show: false,
+          // right: '10',
+          bottom: '0',
           data: legend, // ['Industries', 'Technology', 'Forex', 'Gold', 'Forecasts']
           textStyle: {
-            // fontSize: 14,
-            color: '#666'
+            fontSize: 14,
+            color: '#b7d8fa',
             // fontWeight: 'bolder' // 字体加粗
-          }
+          },
         },
         series: [
           {
             name: seriesName, // 'WEEKLY WRITE ARTICLES',
             type: 'pie',
+            color: color,
+            // color:[ 'green','blue'],
             // roseType: 'radius',
-            radius: [50, 60],
-            center: ['50%', '48%'],
+            radius: [55, 60],
+            center: ['50%', '50%'],
             data: Data.seriesData,
+            // roseType: 'area',
             // [
             //   { value: 320, name: 'Industries' },
             //   { value: 240, name: 'Technology' },
@@ -113,14 +146,36 @@ export default {
             //   { value: 100, name: 'Gold' },
             //   { value: 59, name: 'Forecasts' }
             // ],
-
+            // itemStyle: {
+            //  borderRadius: 3
+            // borderColor: '#091243',
+            // borderWidth: 2
+            // },
             animationEasing: 'cubicInOut',
             animationDuration: 2600,
+            emphasis: {
+              label: {
+                show: false,
+              },
+            },
             label: {
+              show: false,
+              // formatter: '{b}:\n{c} ' + unit,
+              formatter: '{d}%',
+              position: 'center',
+              emphasis: {
+                show: true,
+                textStyle: {
+                  fontSize: '22',
+                  color: '#3595f9',
+                },
+              },
+            },
+            label22: {
               normal: {
                 show: false,
                 // formatter: '{a|{a}}{abg|}\n{hr|}\n  {b|{b}：}{c} \n{hr|}\n  {per|{d}%}  ',
-               formatter: '{b|{b}：}{c} ' + unit + ' \n{hr|}\n  {per|{d}%}  ',
+                formatter: '{b|{b}：}{c} ' + unit + ' \n{hr|}\n  {per|{d}%}  ',
                 // backgroundColor: '#eee',
                 // borderColor: '#aaa',
                 // borderWidth: 1,
@@ -147,26 +202,27 @@ export default {
                     borderColor: '#aaa',
                     width: '100%',
                     borderWidth: 0.5,
-                    height: 0
+                    height: 0,
                   },
                   b: {
-                    fontSize: 12,
-                    lineHeight: 33
+                    fontSize: 14,
+                    lineHeight: 33,
                   },
                   per: {
                     color: '#eee',
                     backgroundColor: '#334455',
                     padding: [2, 4],
-                    borderRadius: 2
-                  }
-                }
-              }
-            }
-          }
-        ]
-      })
-      this.chart.on('click', function(param) {
-        if (nextUrl.length > 0) {
+                    borderRadius: 2,
+                  },
+                },
+              },
+            },
+          },
+        ],
+      }
+      this.chart.setOption(option)
+      this.chart.on('click', function (param) {
+        if (nextUrl != null && nextUrl.length > 0) {
           // 判断 nexurl数与那个列
           var url = ''
           for (var i = 0; i < nextUrl.length; i++) {
@@ -180,8 +236,8 @@ export default {
             query: {
               id: param.name,
               start: params.start,
-              end: params.end
-            }
+              end: params.end,
+            },
           })
           // --在最外层新窗口打开
           // let routeUrl = router.resolve({
@@ -195,7 +251,67 @@ export default {
           // 方法3: this.$router.push({name:'detail',params:{id:123,name:'lisi'}})
         }
       })
-    }
-  }
+
+      var _this = this
+      var isSet = true // 为了做判断：当鼠标移动上去的时候，自动高亮就被取消
+      _this.charPie3currentIndex = 0
+      // 2、鼠标移动上去的时候的高亮动画
+      this.chart.on('mouseover', function (param) {
+        isSet = false
+        // 取消之前高亮的图形
+        _this.chart.dispatchAction({
+          type: 'downplay',
+          seriesIndex: 0,
+          // dataIndex: _this.charPie3currentIndex
+        })
+        // 高亮当前图形
+        _this.chart.dispatchAction({
+          type: 'highlight',
+          seriesIndex: 0,
+          dataIndex: param.dataIndex,
+        })
+        // 显示 tooltip
+        // _this.chart.dispatchAction({
+        //   type: "showTip",
+        //   seriesIndex: 0,
+        //   dataIndex: param.dataIndex,
+        // });
+      })
+      // 3、自动高亮展示
+      var chartHover = function () {
+        _this.dataLen = option.series[0].data.length
+        // 取消之前高亮的图形
+        _this.chart.dispatchAction({
+          type: 'downplay',
+          seriesIndex: 0,
+          // dataIndex: _this.charPie3currentIndex
+        })
+        _this.charPie3currentIndex =
+          (_this.charPie3currentIndex + 1) % _this.dataLen
+        // 高亮当前图形
+        _this.chart.dispatchAction({
+          type: 'highlight',
+          seriesIndex: 0,
+          dataIndex: _this.charPie3currentIndex,
+        })
+        // 显示 tooltip
+        // _this.chart.dispatchAction({
+        //   type: "showTip",
+        //   seriesIndex: 0,
+        //   dataIndex: _this.charPie3currentIndex,
+        // });
+      }
+      clearInterval(_this.startCharts)
+      _this.startCharts = setInterval(chartHover, 2000)
+      // 4、鼠标移出之后，恢复自动高亮
+      this.chart.on('mouseout', function (param) {
+        if (!isSet) {
+          clearInterval(_this.startCharts)
+          _this.startCharts = setInterval(chartHover, 2000)
+          isSet = true
+        }
+      })
+    },
+  },
 }
 </script>
diff --git a/src/views/monitor/videos/index.vue b/src/views/monitor/videos/index.vue
index accbbb5..b3e4c68 100644
--- a/src/views/monitor/videos/index.vue
+++ b/src/views/monitor/videos/index.vue
@@ -26,15 +26,15 @@
           <div class="mores" >
               <div class="more">
                 <p class="bluezi">正常</p>
-                <span class="myiconfont iconbox bluezibg">&#xe608;</span>
+                <span class="myiconfont iconbox bluezibg">&#xe608;</span><span class="numzi bluezi">2344</span>
               </div>
               <div class="more">
                 <p class="huizi">离线</p>
-                <span class="myiconfont iconbox huizibg">&#xe608;</span>
+                <span class="myiconfont iconbox huizibg">&#xe608;</span><span class="numzi huizi">2344</span>
               </div>
               <div class="more"  v-show="showRuqinbaojing||showMenjinguanli||showDianziweilan == true">
                 <p class="redzi">报警</p>
-                <span class="myiconfont iconbox redzibg">&#xe608;</span>
+                <span class="myiconfont iconbox redzibg">&#xe608;</span><span class="numzi redzi">2344</span>
               </div>
           </div>
           <!-- <div class="mores"  v-show="showShipinjiankong == true">
@@ -158,12 +158,15 @@
     </div>
 
     <!-- 查看视频 -->
-    <el-dialog title="查看视频" :visible.sync="dialogImage" width="800px">
+    <el-dialog title="查看视频" :visible.sync="dialogImage" width="800px"  :before-close="handleClose">
       <div class="shipin">
-        <video :preload="preload" autoplay :height="height" :width="width" align="center" :controls="controls">
+        <video id="video" :preload="preload" :height="height" :width="width" align="center" :controls="controls">
             <source :src="videoSrc" type="video/mp4">
           </video>
       </div>
+      <!-- <span slot="footer" class="dialog-footer">
+        <el-button @click="dialogImage = false">取 消</el-button>
+      </span> -->
     </el-dialog>
   </div>
 </template>
@@ -281,7 +284,7 @@ export default {
       playStatus: '',
       muteStatus: '',
       isMute: true,
-      isPlay: true,
+      isPlay: false,
       width: '100%', // 设置视频播放器的显示宽度（以像素为单位）
       height: '430', // 设置视频播放器的显示高度（以像素为单位）
       preload: 'auto', //  建议浏览器是否应在<video>加载元素后立即开始下载视频数据。
@@ -319,6 +322,16 @@ export default {
     // this.init()
   },
   methods: {
+    handleClose() {
+      this.dialogImage = false
+      // 关闭弹出框时 视频关闭播放
+      const video = document.getElementById('video')
+      video.pause()
+    },
+    handleVideo() {
+      this.$refs.videoDiolag.dialogImage = true
+    },
+
     openshipinRuqinbaojing() {
       this.seenshipinRuqinbaojing = !this.seenshipinRuqinbaojing
     },
@@ -560,6 +573,7 @@ export default {
 </script>
 
 <style scoped>
+.main-content{position: relative;overflow: hidden;}
 .seencons{background-color: #fff;
   box-shadow:0px 0px 10px #E9E9E9;border-radius: 5px;
   padding: 0 10px;}
@@ -583,7 +597,7 @@ export default {
   padding: 10px;
 }
 .tab-header{background-color: #fff;}
-  .shipinscons {height: 95%;text-align: center;
+  .shipinscons {height: 95%;text-align: center;overflow-y: auto;
     margin: 20px auto 0;
     text-align: center;position: relative;
   padding: 20px 50px 20px 50px;
@@ -687,6 +701,9 @@ export default {
   .mores .more p {display: inline-block;
 		font-size: 14px;
 	}
+  .mores .more .numzi {display: inline-block;
+		font-size: 18px;font-weight: bold;
+	}
 .mores .more .iconbox {display: inline-block;
 		border-radius: 30px;
 		line-height: 30px;
diff --git a/src/views/renlianshibie/renlianshibieList.vue b/src/views/renlianshibie/renlianshibieList.vue
index e7389b5..89adb0a 100644
--- a/src/views/renlianshibie/renlianshibieList.vue
+++ b/src/views/renlianshibie/renlianshibieList.vue
@@ -108,13 +108,16 @@
         </div>
       </div>
     </div>
-    <!-- 查看视频 -->
-    <el-dialog v-el-drag-dialog title="查看视频" :visible.sync="dialogImage" width="800px">
+     <!-- 查看视频 -->
+     <el-dialog title="查看视频" :visible.sync="dialogImage" width="800px"  :before-close="handleClose">
       <div class="shipin">
-        <video :preload="preload" autoplay :height="height" :width="width" align="center" :controls="controls">
+        <video id="video" :preload="preload" :height="height" :width="width" align="center" :controls="controls">
             <source :src="videoSrc" type="video/mp4">
           </video>
       </div>
+      <!-- <span slot="footer" class="dialog-footer">
+        <el-button @click="dialogImage = false">取 消</el-button>
+      </span> -->
     </el-dialog>
   </div>
 </template>
@@ -225,7 +228,7 @@ export default {
       playStatus: '',
       muteStatus: '',
       isMute: true,
-      isPlay: true,
+      isPlay: false,
       width: '100%', // 设置视频播放器的显示宽度（以像素为单位）
       height: '430', // 设置视频播放器的显示高度（以像素为单位）
       preload: 'auto', //  建议浏览器是否应在<video>加载元素后立即开始下载视频数据。
@@ -243,6 +246,15 @@ export default {
     // this.init()
   },
   methods: {
+    handleClose() {
+      this.dialogImage = false
+      // 关闭弹出框时 视频关闭播放
+      const video = document.getElementById('video')
+      video.pause()
+    },
+    handleVideo() {
+      this.$refs.videoDiolag.dialogImage = true
+    },
     resetState() {
       this.viewState = 1
     },