Merge branch 'new5_25home' of http://39.108.172.131:3000/Shannon_mu/SmartCommunity into new5_25home

videoSurveillance/src/assets/css/main.scss

@@ -11,9 +11,9 @@ body,
 #app {
     width: 100%;
     height: 100%;
-    font-size: 14px;
+    font-size: rem(14);
     background: #f4f7f9;
-    min-width: 1360px;
+    min-width: rem(1360);
 }
 
 ul li {

videoSurveillance/src/assets/css/public-style.scss

@@ -5,6 +5,7 @@ $white: white;
 $greenColor: #44d7b6;
 $redColor: #ff7171;
 $ashColor: #dcdcdc;
+$violetColor:#A28EFF;
 
 @function vw($size) {
   @return ($size/19.2) * 1vw;
@@ -28,6 +29,9 @@ $base_fontSize: 100;
 .mainText{
   color: $mainTextColor !important;
 }
+.violetText{
+  color: $violetColor !important;
+}
 .height100 {
   min-height: inherit;
   height: 100%;

videoSurveillance/src/components/common/Header.vue

@@ -1,5 +1,5 @@
 <template>
-    <div class="header" :class="[collapse ? 'collapse' : 'expand']">
+    <div class="header" :class="[collapse ? 'collapse' : 'expand', routePath ? 'newWorkBench' : '']">
         <div class="el-fl-left"><v-tags></v-tags></div>
         <div class="header-right">
             <div class="header-user-con">
@@ -75,7 +75,10 @@ export default {
             return this.$store.getters['getCollapse'];
         },
         ...mapState(['messageNumber']),
-        ...mapState(['messageList'])
+        ...mapState(['messageList']),
+        routePath() {
+            return this.$route.path == '/passengerFlow/index' || this.$route.path == '/videoSurveillance/index';
+        }
     },
     methods: {
         toUrl(type) {
@@ -410,4 +413,8 @@ export default {
         }
     }
 }
+.newWorkBench{
+    border-bottom: rem(1) solid rgba(224, 225, 227, 0.2);
+    box-sizing: border-box;
+}
 </style>

videoSurveillance/src/components/common/Home.vue

@@ -7,11 +7,11 @@
  * @FilePath: \vue-manage-system-master\src\components\others\Home.vue
 -->
 <template>
-    <div class="dmp-app">
+    <div class="dmp-app" :class="routePath ? 'newWorkBench' : ''">
         <v-sidebar></v-sidebar>
         <div class="dmp-content" :style="{ width: collapse ? 'calc(100% - 85px)' : 'calc(100% - 220px)' }">
             <v-head></v-head>
-            <div class="main-wrap">
+            <div class="main-wrap" :class="routePath ? 'newWorkBench' : ''">
                 <transition name="move" mode="out-in">
                     <!-- <keep-alive :include="tagsList">
                             <router-view></router-view>
@@ -51,6 +51,9 @@ export default {
         },
         popupsList() {
             return this.$store.getters.getPopups;
+        },
+        routePath() {
+            return this.$route.path == '/passengerFlow/index' || this.$route.path == '/videoSurveillance/index';
         }
     },
     methods: {
@@ -120,4 +123,8 @@ export default {
     padding: 20px 20px 10px 20px;
     height: 100%;
 }
+.newWorkBench {
+    background-color: #2c354a;
+    overflow: hidden;
+}
 </style>

videoSurveillance/src/views/passengerFlow/index.scss

@@ -1,20 +1,20 @@
-
+@import "@assets/css/public-style.scss";
 .view-content {
   display: flex;
   flex-wrap: wrap;
   justify-content: space-between;
   align-content: space-between;
-  height: calc(100% - 10px);
+  height: calc(100% - #{rem(10)});
 }
 .block-item {
   background: #171f32;
-  border-radius: 4px;
+  border-radius: rem(4);
   overflow: hidden;
-  padding: 0 20px 20px 20px;
+  padding: 0 rem(20) rem(20) rem(20);
   box-sizing: border-box;
 }
 .topsBlock {
-  height: 60px;
+  height:  rem(60);
   box-sizing: border-box;
   border-bottom: 1px solid rgba(224, 225, 227, 0.2);
   display: flex;
@@ -22,71 +22,73 @@
   align-items: center;
   color: white;
   /deep/ .el-input__inner {
-      background: transparent;
-      color: white;
-      padding-right: 20px;
-      border-color: rgba(255, 255, 255, 0.2);
+    background: transparent;
+    color: white;
+    padding-right: rem(20);
+    border-color: rgba(255, 255, 255, 0.2);
   }
   .right {
-      max-width: 120px;
-      img {
-          cursor: pointer;
-          vertical-align: middle;
-      }
+    max-width: rem(120);
+    img {
+      cursor: pointer;
+      vertical-align: middle;
+    }
   }
   .titleNumber {
-      color: #0eaeff;
-      font-size: 30px;
+    color: #0eaeff;
+    font-size: rem(30);
   }
   .left {
-      display: flex;
-      align-items: center;
-      img {
-          margin: 0 5px 0 20px;
-          vertical-align: middle;
-      }
+    display: flex;
+    align-items: center;
+    img {
+      margin: 0 rem(5) 0 rem(20);
+      vertical-align: middle;
+    }
   }
   /deep/ .el-date-editor .el-range-separator {
-      padding-left: 0;
-      color: white;
+    padding-left: 0;
+    color: white;
   }
   /deep/ .el-date-editor--daterange.el-input__inner {
-      width: 240px;
+    width: rem(240);
   }
   .search-btn {
-      margin-left: 20px;
+    margin-left: rem(20);
   }
 }
 .item-content {
-  padding-top: 20px;
+  padding-top: rem(20);
   box-sizing: border-box;
-  height: calc(100% - 60px);
+  height: calc(100% -  #{rem(60)});
 
   .flexPer {
-      display: flex;
-      height: 100%;
-      justify-content: space-between;
+    display: flex;
+    height: 100%;
+    justify-content: space-between;
   }
   .itme-inlineBlock {
-      display: flex;
-      width: calc((100% - 20px) / 3);
-      color: white;
-      flex-wrap: wrap;
-      justify-content: space-between;
-      align-content: space-between;
-      height: 100%;
+    display: flex;
+    width: calc((100% - #{rem(20)}) / 3);
+    color: white;
+    flex-wrap: wrap;
+    justify-content: space-between;
+    align-content: space-between;
+    height: 100%;
   }
 }
 .ft20 {
-  font-size: 20px;
+  font-size: rem(20);
 }
 .numberColor {
   // margin-bottom: 5px;
 }
 .greText {
-  opacity: 0.5;
   font-size: 12px;
 }
+.grdText {
+  opacity: 0.5;
+}
 .flex {
   display: flex;
   justify-content: space-between;
@@ -95,18 +97,18 @@
   width: 50%;
 }
 .grid-1 {
-  width: calc((100% - 20px) / 3);
-  height: calc((100% - 20px) / 7 * 2);
+  width: calc((100% - #{rem(20)}) / 3);
+  height: calc((100% - #{rem(20)}) / 7 * 2);
 }
 .grid-2 {
-  width: calc((100% - 20px) / 3 * 2);
-  height: calc((100% - 20px) / 7 * 2);
+  width: calc((100% - #{rem(20)}) / 3 * 2);
+  height: calc((100% - #{rem(20)}) / 7 * 2);
 }
 .grid-3 {
-  width: calc((100% - 20px) / 3);
-  height: calc((100% - 20px) / 7 * 5);
+  width: calc((100% - #{rem(20)}) / 3);
+  height: calc((100% - #{rem(20)}) / 7 * 5);
 }
 .grid-4 {
-  width: calc((100% - 20px) / 3 * 2);
-  height: calc((100% - 20px) / 7 * 5);
-}
+  width: calc((100% - #{rem(20)}) / 3 * 2);
+  height: calc((100% - #{rem(20)}) / 7 * 5);
+}

videoSurveillance/src/views/passengerFlow/index.vue

@@ -10,54 +10,54 @@
                         <div class="width100">今日</div>
                         <div class="flex width100">
                             <div class="greText width50">
-                                <div class="numberColor ft20">3000</div>
-                                <div>进入人数</div>
+                                <div class="numberColor ft20 greenText">3000</div>
+                                <div class="grdText">进入人数</div>
                             </div>
 
                             <div class="greText width50">
-                                <div class="numberColor ft20">1000</div>
-                                <div>出去人数</div>
+                                <div class="numberColor ft20 redText">1000</div>
+                                <div class="grdText">出去人数</div>
                             </div>
                         </div>
                         <div class="greText width100">
-                            <div class="numberColor ft20">4000</div>
-                            <div>总客流</div>
+                            <div class="numberColor ft20 violetText">4000</div>
+                            <div class="grdText">总客流</div>
                         </div>
                     </div>
                     <div class="itme-inlineBlock">
                         <div class="width100">昨日</div>
                         <div class="flex width100">
                             <div class="greText width50">
-                                <div class="numberColor ft20">2000</div>
-                                <div>进入人数</div>
+                                <div class="numberColor ft20 greenText">2000</div>
+                                <div class="grdText">进入人数</div>
                             </div>
 
                             <div class="greText width50">
-                                <div class="numberColor ft20">2000</div>
-                                <div>出去人数</div>
+                                <div class="numberColor ft20 redText">2000</div>
+                                <div class="grdText">出去人数</div>
                             </div>
                         </div>
                         <div class="greText width100">
-                            <div class="numberColor ft20">4000</div>
-                            <div>总客流</div>
+                            <div class="numberColor ft20 violetText">4000</div>
+                            <div class="grdText">总客流</div>
                         </div>
                     </div>
                     <div class="itme-inlineBlock">
                         <div class="width100">同比</div>
                         <div class="flex width100">
                             <div class="greText width50">
-                                <div class="numberColor ft20">50%</div>
-                                <div>总进入人数</div>
+                                <div class="numberColor ft20 greenText">50%</div>
+                                <div class="grdText">总进入人数</div>
                             </div>
 
                             <div class="greText width50">
-                                <div class="numberColor ft20">50%</div>
-                                <div>总出去人口</div>
+                                <div class="numberColor ft20 redText">50%</div>
+                                <div class="grdText">总出去人口</div>
                             </div>
                         </div>
                         <div class="greText width100">
-                            <div class="numberColor ft20">0%</div>
-                            <div>总客流</div>
+                            <div class="numberColor ft20 violetText">0%</div>
+                            <div class="grdText">总客流</div>
                         </div>
                     </div>
                 </div>
@@ -262,7 +262,7 @@ export default {
 .column {
     flex-direction: column;
     & > div {
-        height: calc((100% - 60px) / 3);
+        height: calc((100% - #{rem(60)}) / 3);
     }
 }
 .view-content {

videoSurveillance/src/views/videoSurveillance/index.vue

@@ -3,14 +3,50 @@
         <div class="leftAssembly">
             <div class="titles">设备列表</div>
             <div class="componentsBlock">
-                <div class="devList active" v-for="(item, index) in devList" :key="index">{{ item.deviceName }}</div>
+                <div class="devList active" @click="clickPlay(item.deviceCode)" v-for="(item, index) in devList" :key="index">
+                    {{ item.deviceName }}
+                </div>
             </div>
         </div>
         <div class="contentShow">
-            <div></div>
-            <div></div>
+            <div class="topBlock">
+                <div class="separateBlock">
+                    <div class="listBlock bg1">
+                        <div class="font30">298</div>
+                        <div class="titleText">设备总数</div>
+                    </div>
+                    <div class="listBlock bg2">
+                        <div class="font30">298</div>
+                        <div class="titleText">设备在线数</div>
+                    </div>
+                    <div class="listBlock bg3">
+                        <div class="font30">298</div>
+                        <div class="titleText">设备离线数</div>
+                    </div>
+                </div>
+                <div class="hopBlock">
+                    <div class="itemBlock">
+                        <div class="font30 mainText">298</div>
+                        <div class="titleText">今日客流</div>
+                    </div>
+                    <div class="itemBlock">
+                        <div class="font30 greenText">298</div>
+                        <div class="titleText">本周客流</div>
+                    </div>
+                    <div class="itemBlock">
+                        <div class="font30 redText">298</div>
+                        <div class="titleText">本月客流</div>
+                    </div>
+                    <div class="itemBlock">
+                        <div class="font30 violetText">298</div>
+                        <div class="titleText">本年客流</div>
+                    </div>
+                </div>
+            </div>
+            <div class="videoView">
+                <video-list :videoUrlList="videoUrlList"></video-list>
+            </div>
         </div>
-        <!-- <video-list :videoUrlList="videoUrlList"></video-list> -->
     </div>
 </template>
 
@@ -23,7 +59,8 @@ export default {
     },
     data() {
         return {
-            devList: []
+            devList: [],
+            videoUrlList: []
         };
     },
     watch: {
@@ -41,52 +78,127 @@ export default {
                 this.devList = data;
                 console.log(data);
             });
+        },
+        clickPlay(val) {
+            this.videoUrlList = [val];
         }
     }
 };
 </script>
 
 <style scoped lang='scss'>
+@import '@assets/css/public-style.scss';
 .realVideoBox {
     height: 100%;
     display: flex;
     justify-content: space-between;
 }
 .leftAssembly {
-    width: 300px;
+    width: rem(300);
     background: #171f32;
-    border-radius: 4px;
+    border-radius: rem(4);
     box-sizing: border-box;
-    padding: 20px;
+    padding: rem(20);
     color: white;
     .titles {
         border-bottom: 1px solid rgba(224, 225, 227, 0.2);
-        padding-bottom: 20px;
-        margin-bottom: 20px;
+        padding-bottom: rem(20);
+        margin-bottom: rem(20);
     }
     .componentsBlock {
-        height: calc(100% - 60px);
+        height: calc(100% - #{rem(60)});
         overflow-y: auto;
         overflow-x: hidden;
+        &::-webkit-scrollbar {
+            z-index: 11;
+            width: rem(4);
+        }
+        &::-webkit-scrollbar-track,
+        &::-webkit-scrollbar-corner {
+            background: transparent;
+        }
+        &::-webkit-scrollbar-thumb {
+            border-radius: rem(5);
+            width: rem(4);
+            background: rgba(250, 250, 250, 0.09);
+        }
+        &::-webkit-scrollbar-track-piece {
+            background: transparent;
+            width: rem(4);
+        }
     }
     .devList {
-        height: 30px;
-        line-height: 30px;
-        padding: 0 10px;
+        height: rem(30);
+        line-height: rem(30);
+        padding: 0 rem(10);
+        cursor: pointer;
         &.active {
             background: #0eaeff36;
-            border-radius: 4px;
+            border-radius: rem(4);
         }
     }
 }
 .contentShow {
-    border: 1px solid #171f32;
-    width: calc(100% - 320px);
-    border-radius: 4px;
-    padding: 0.1rem;
+    width: calc(100% - #{rem(320)});
+    border-radius: rem(4);
     height: 100%;
-    display: grid;
-    grid-template-columns: 2fr 2fr 2fr 2fr;
-    grid-template-rows: 1fr 1fr 1fr;
+    display: flex;
+    justify-content: space-between;
+    flex-direction: column;
+    .topBlock {
+        height: rem(100);
+        display: flex;
+        justify-content: space-between;
+        color: white;
+        .separateBlock {
+            width: rem(580);
+            display: flex;
+            justify-content: space-between;
+
+            .listBlock {
+                width: rem(180);
+                border-radius: rem(10);
+                padding: rem(20);
+            }
+        }
+        .hopBlock {
+            width: calc(100% - #{rem(600)});
+            display: flex;
+            background: #171f32;
+            border-radius: rem(10);
+            border: 1px solid rgba(255, 255, 255, 0.2);
+            padding: rem(20) 0;
+            .itemBlock {
+                width: calc(100% / 4);
+                padding-left: rem(20);
+                box-sizing: border-box;
+                &:not(:last-child) {
+                    border-right: 1px solid rgba(255, 255, 255, 0.2);
+                }
+            }
+        }
+    }
+    .videoView {
+        height: calc(100% - #{rem(120)});
+        background: #171f32;
+        border-radius: rem(4);
+        overflow: hidden;
+    }
+}
+.bg1 {
+    background: linear-gradient(135deg, #488fff 0%, #65dcff 100%);
+}
+.bg2 {
+    background: linear-gradient(315deg, #5eedcc 0%, #24c3f1 100%);
+}
+.bg3 {
+    background: linear-gradient(135deg, #f0646c 0%, #f4994e 100%);
+}
+.titleText {
+    font-size: rem(12);
+    margin-top: rem(5);
+}
+.font30 {
+    font-size: rem(30);
 }
 </style>

videoSurveillance/src/views/videoSurveillance/myVideoPlayer.vue

@@ -97,4 +97,14 @@ export default {
         playerReadied(player) {}
     }
 };
-</script>
+</script>
+<style lang="scss" scoped>
+.video-player{
+    height: 100% !important;
+}
+/deep/ .video-js.vjs-fluid{
+    padding-top: 0 !important;
+    height: 100%;
+}
+
+</style>

videoSurveillance/src/views/videoSurveillance/video.vue

@@ -1,5 +1,5 @@
 <template>
-    <div class="videoContent" :class="`content${urlArr.length > 1 ? '_most' : ''}`">
+    <div class="videoContent">
         <div class="videoList" v-for="(item, index) in urlArr" :key="index">
             <my-video-playerVue
                 :videoData="[
@@ -35,23 +35,22 @@ export default {
     },
     data() {
         return {
-            urlArr: [
-                // 'http://cmgw-vpc.lechange.com:8888/LCO/7D100C2PAZ6C590/0/0/20220112T081910/051edef3559a8eca65febb70e504acdb.m3u8',
-            ]
+            urlArr: ['http://cmgw-vpc.lechange.com:8888/LCO/7D100C2PAZ6C590/0/0/20220112T081910/051edef3559a8eca65febb70e504acdb.m3u8']
         };
     },
     methods: {
         getVideo(urlId) {
-            this.$http
-                .post('/sc-community/dahuaDevice/getRealTimeUrl', { channelId: urlId, streamType: '1', type: 'hls' })
-                .then(({ status, data, msg }) => {
-                    if (status === 0 && data) {
-                        if (data.indexOf('10.35.239.168:7086') != -1) {
-                            let newUrl = data.replace('10.35.239.168:7086', '60.191.94.122:20046');
-                            this.urlArr.push(newUrl);
-                        }
-                    }
-                });
+            // this.urlArr = `http://cmgw-vpc.lechange.com:8888/LCO/7D100C2PAZ6C590/0/0/20220112T081910/051edef3559a8eca65febb70e504acdb.m3u8`;
+            // this.$http
+            //     .post('/sc-community/dahuaDevice/getRealTimeUrl', { channelId: urlId, streamType: '1', type: 'hls' })
+            //     .then(({ status, data, msg }) => {
+            //         if (status === 0 && data) {
+            //             if (data.indexOf('10.35.239.168:7086') != -1) {
+            //                 let newUrl = data.replace('10.35.239.168:7086', '60.191.94.122:20046');
+            //                 this.urlArr.push(newUrl);
+            //             }
+            //         }
+            //     });
         }
     },
     mounted() {}
@@ -59,12 +58,7 @@ export default {
 </script>
 <style lang="scss" scoped>
 .videoContent {
-    &.content_most {
-        display: grid;
-        row-gap: 20px;
-        column-gap: 20px;
-        grid-template-columns: repeat(2, minmax(0, 1fr));
-    }
+    height: 100%;
     .videoList {
         width: 100%;
         height: 100%;