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

videoSurveillance/src/views/equipment/index.vue

@@ -70,13 +70,13 @@ export default {
                     prop: 'alarmPicture'
                 }
             ],
-            mixins_post: 'get'
+            mixins_post: 'post'
         };
     },
     methods: {},
 
     created() {
-        this.mixins_dataUrl = '/sc-community/dahuaDevice/getDeviceList'; // 分页查询接口
+        this.mixins_dataUrl = '/sc-community/dahuaDevice/page'; // 分页查询接口
         this.mixins_search();
     }
 };

videoSurveillance/src/views/passengerFlow/index.vue

@@ -67,7 +67,7 @@
         <style-mode :number="2">
             <template slot="left">客流趋势</template>
             <template slot="right">
-                <el-select class="item.class" v-model="trendsValue" clearable>
+                <el-select class="item.class" v-model="trendsValue" clearable @change="activeTrendsValue(trendsValue)">
                     <el-option v-for="(item, index) in selectTime" :key="index" :label="item.name" :value="item.value"></el-option>
                 </el-select>
             </template>
@@ -79,23 +79,23 @@
         <style-mode :number="3">
             <template slot="left">平均客流</template>
             <template slot="right">
-                <el-select class="item.class" v-model="selectValue" clearable>
+                <el-select class="item.class" v-model="selectValue" clearable @change="activeValue(selectValue)">
                     <el-option v-for="(item, index) in selectTime" :key="index" :label="item.name" :value="item.value"></el-option>
                 </el-select>
             </template>
             <template slot="cont">
                 <div class="itme-inlineBlock width100 column">
                     <div class="width100">
-                        <div>周平均</div>
+                        <div class="echTitle">周平均</div>
                         <zz-echart :option="avgWeekOptions"></zz-echart>
                     </div>
                     <div class="width100">
-                        <div>月平均</div>
-                        <zz-echart :option="options"></zz-echart>
+                        <div class="echTitle">月平均</div>
+                        <zz-echart :option="avgWeekOptions"></zz-echart>
                     </div>
                     <div class="width100">
-                        <div>年平均</div>
-                        <zz-echart :option="options"></zz-echart>
+                        <div class="echTitle">年平均</div>
+                        <zz-echart :option="avgWeekOptions"></zz-echart>
                     </div>
                 </div>
             </template>
@@ -118,7 +118,7 @@
                 <img src="../../assets/img/icon_daochu.png" alt="" />
             </template>
             <template slot="cont">
-                <zz-table :settings="{ hideFoot: true, showIndex: true, tableBorder: true }" :cols="cols"> </zz-table>
+                <zz-table :settings="{ hideFoot: true, showIndex: true, tableBorder: false }" :cols="cols"> </zz-table>
             </template>
         </style-mode>
     </div>
@@ -160,6 +160,9 @@ let dataDay = [
     '30',
     '31'
 ];
+let weekArr = ['一', '二', '三', '四', '五', '六', '日'];
+let yearArr = ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12'];
+
 export default {
     components: {
         styleMode
@@ -227,10 +230,27 @@ export default {
     },
 
     methods: {
+        //获取本月多少天
+        getMonthLength() {
+            let thisD = new Date();
+            return new Date(thisD.getFullYear(), thisD.getMonth() + 1, 0).getDate();
+        },
+        //查询时间
         timeToggle() {},
+        activeTrendsValue(val) {
+            console.log(val);
+        },
+        activeValue(val) {
+            console.log(val);
+        },
         getAreaInfo() {
-            this.$http.post('/sc-community/dahuaDevice/queryPassengerFlowData',{pageIndex:1,pageSize:100}).then((res) => {
-              console.log(JSON.parse(res.data))
+            this.$http.post('/sc-community/dahuaDevice/getAreaInfo', { pageIndex: 1, pageSize: 100 }).then((res) => {
+                console.log(JSON.parse(res.data));
+            });
+        },
+        getQueryPassengerFlowData() {
+            this.$http.post('/sc-community/dahuaDevice/queryPassengerFlowData', { pageIndex: 1, pageSize: 100 }).then((res) => {
+                console.log(JSON.parse(res.data));
             });
         }
     }
@@ -242,7 +262,21 @@ export default {
 .column {
     flex-direction: column;
     & > div {
-        height: calc(100% / 3);
+        height: calc((100% - 60px) / 3);
     }
+}
+.view-content {
+    /deep/ .el-table {
+        background: transparent !important;
+    }
+    /deep/.el-table th {
+        background: transparent !important;
+    }
+    /deep/.el-table tr {
+        background: transparent !important;
+    }
+}
+.echTitle {
+ 
 }
 </style>

videoSurveillance/src/views/videoSurveillance/index.vue

@@ -1,30 +1,16 @@
 <template>
     <div class="realVideoBox">
-        <div class="organ-tree">
-            <el-input class="tree-list-search-input" placeholder="请输入名称" v-model="filterText">
-                <i class="el-icon-search" slot="suffix"></i
-            ></el-input>
-            <div class="tree-list-ctrl-scroll">
-                <el-tree
-                    class="filter-tree tree-list-ctrl"
-                    :class="{ emptys: videoUrlList.length === 0 }"
-                    :index="3"
-                    :data="sceneLists"
-                    show-checkbox
-                    node-key="id"
-                    :check-on-click-node="true"
-                    :props="defaultProps"
-                    default-expand-all
-                    @check="checkChange"
-                    :filter-node-method="filterNode"
-                    ref="tree"
-                >
-                </el-tree>
+        <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>
         </div>
-        <div class="rightVideo">
-            <video-list :videoUrlList="videoUrlList"></video-list>
+        <div class="contentShow">
+            <div></div>
+            <div></div>
         </div>
+        <!-- <video-list :videoUrlList="videoUrlList"></video-list> -->
     </div>
 </template>
 
@@ -37,30 +23,7 @@ export default {
     },
     data() {
         return {
-            isShowVideo: 'one',
-            isDisLayerCtrl: false, //视频列表状态
-            isActive: '水源',
-            videoid: '',
-            filterText: '', //输入框筛选
-            initTree: [], //默认展开第1个节点数组
-            initTree2: [],
-            sceneLists: [], //
-            defaultProps: {
-                value: 'id',
-                children: 'children',
-                label: 'name'
-            },
-            videoTreeList: [],
-            isactive: -1,
-            btnIsactive: false,
-            currentBtn: 'one', //单屏、四屏按钮
-            fourView: 'one', //四屏默认不展示
-            videoUrl: '',
-            videoUrlList: [], //四屏视频框
-            fourVideoUrl: [],
-            isVideo: false,
-
-            channelId: '' //摄像头id
+            devList: []
         };
     },
     watch: {
@@ -69,57 +32,14 @@ export default {
         }
     },
     created() {
-        this.getSceneList(); //获取左侧场景列表
+        this.getList(); //获取左侧场景列表
     },
 
     methods: {
-        // 过滤树
-        filterNode(value, data) {
-            if (!value) return true;
-            return data.sceneName.indexOf(value) !== -1;
-        },
-        getOneChannelCode(arr) {
-            if (!!arr[0] && arr[0].type == 'device') {
-                this.$nextTick(() => {
-                    this.$refs.tree.setCheckedKeys([arr[0].id]);
-                    this.isShowVideo = 'one';
-                    this.videoUrlList = [arr[0].channelCode];
-                });
-            } else if (!!arr[0].children) {
-                this.getOneChannelCode(arr[0].children);
-            }
-        },
-        getSceneList() {
-            this.$http.get('/sc-community/dahuaDevice/getDeviceTree').then(({ status, data, msg }) => {
-                if (status === 0 && data) {
-                    this.filterTreeData(data);
-                    this.sceneLists = data;
-                    this.getOneChannelCode(data);
-                }
-            });
-        },
-        filterTreeData(trData) {
-            trData.map((item, index) => {
-                if (this.isNotEmpty(item.children)) {
-                    item.disabled = true;
-                    this.filterTreeData(item.children);
-                } else if (item.type == 'device') {
-                    item.disabled = false;
-                } else {
-                    item.disabled = true;
-                }
-            });
-        },
-        isNotEmpty(arr) {
-            return arr && Array.isArray(arr) && arr.length > 0;
-        },
-
-        checkChange(nodeObj, SelectedObj) {
-            this.videoUrlList = [];
-            this.$refs.tree.getCheckedNodes().map((item) => {
-                if (item.type == 'device') {
-                    this.videoUrlList.push(item.channelCode);
-                }
+        getList() {
+            this.$http.get('/sc-community/dahuaDevice/getDeviceList').then(({ data }) => {
+                this.devList = data;
+                console.log(data);
             });
         }
     }
@@ -127,229 +47,46 @@ export default {
 </script>
 
 <style scoped lang='scss'>
-/* 实时视频左侧 */
-
-/deep/ .el-tree-node .el-tree-node__expand-icon {
-    display: hidden;
-}
-
-//隐藏展开的三角图标
-/deep/ .el-tree-node__content .expanded {
-    visibility: visible;
-}
-// 隐藏子节点
-/deep/ .el-tree-node__children .el-tree-node__children {
-    // display: none;
-}
-//隐藏子节点的展开三角形
-/deep/ .el-tree-node__children .el-icon-caret-right {
-    visibility: hidden;
-}
-
-/* /deep/.filter-tree .el-checkbox__inner {
-  display: none;
-} */
-.filter-tree .el-tree-node__children .el-checkbox__inner {
-    display: inline-block;
-}
-/deep/.el-tree-node__children .el-icon-caret-right {
-    visibility: initial;
-}
-
-//父级不显示复选框
-/deep/.el-tree .el-tree-node .is-leaf + .el-checkbox .el-checkbox__inner {
-    display: inline-block;
-}
-/deep/.el-tree .el-tree-node .el-checkbox .el-checkbox__inner {
-    display: none;
-}
-/deep/.el-tree-node__content:hover {
-    background-color: #f5f7fa;
-}
-/deep/.is-current {
-    background: linear-gradient(90deg, rgba(37, 43, 60, 0.5) 0%, rgba(37, 43, 60, 0) 100%);
-}
-
-/deep/.el-tree-node__content > label.el-checkbox {
-    margin-right: 0.04rem;
-}
-/* .is-checked .el-tree-node__label {
-    color: #fff;
-} */
-/deep/ .el-tree {
-    color: rgba(255, 255, 255, 0.6);
-}
-// /deep/ .emptys > div > div > .el-tree-node__label {
-//     color: rgba(255, 255, 255, 0.6);
-// }
-
-.emptys {
-    div > div > .el-tree-node__label {
-        color: rgba(255, 255, 255, 0.6);
-    }
-    div[role='group'] {
-        color: rgba(255, 255, 255, 0.6);
-    }
-}
-/deep/.el-tree-node__content {
-    color: #000;
-    padding: 0 !important;
-}
-
-// 树的虚线
-.tree-list-ctrl-scroll /deep/ {
-    height: 100%;
-
-    .sidebar-wrapper .el-scrollbar__wrap {
-        overflow-x: hidden;
-    }
-    .is-horizontal {
-        display: none;
-    }
-    .el-tree > .el-tree-node:after {
-        border-top: none;
-    }
-    .el-tree-node {
-        position: relative;
-        padding-left: 5px;
-        background: white;
-    }
-    //节点有间隙，隐藏掉展开按钮就好了,如果觉得空隙没事可以删掉
-    .el-tree-node__expand-icon.is-leaf {
-        display: none;
-    }
-    .el-tree-node__children {
-        padding-left: 16px;
-    }
-
-    .el-tree-node :last-child:before {
-        height: 38px;
-    }
-
-    .el-tree > .el-tree-node:before {
-        border-left: none;
-    }
-
-    .el-tree > .el-tree-node:after {
-        border-top: none;
-    }
-
-    .el-tree-node:before {
-        content: '';
-        left: -4px;
-        position: absolute;
-        right: auto;
-        border-width: 1px;
-    }
-
-    .el-tree-node:after {
-        content: '';
-        left: -4px;
-        position: absolute;
-        right: auto;
-        border-width: 1px;
-    }
-
-    .el-tree-node:before {
-        border-left: 1px dashed rgba(216, 216, 216, 1);
-        bottom: 0px;
-        height: 100%;
-        top: -26px;
-        width: 1px;
-    }
-
-    .el-tree-node:after {
-        border-top: 1px dashed rgba(216, 216, 216, 1);
-        height: 20px;
-        top: 12px;
-        width: 20px;
-    }
-}
-
-//有子节点 且未展开
-.el-tree /deep/ .el-icon-caret-right:before {
-    background: url('~@/assets/img/expand.png') no-repeat center center;
-    content: '';
-    display: block;
-    width: 12px;
-    height: 12px;
-    font-size: 12px;
-    background-size: 12px;
-}
-//有子节点 且已展开
-.el-tree /deep/ .el-tree-node__expand-icon.expanded.el-icon-caret-right:before {
-    background: url('~@/assets/img/shrink.png') no-repeat center center;
-    content: '';
-    display: block;
-    width: 12px;
-    height: 12px;
-    font-size: 12px;
-    background-size: 12px;
-}
-//没有子节点
-.el-tree /deep/.el-tree-node__expand-icon.is-leaf::before {
-    background: url('~@/assets/img/shrink.png') no-repeat center center;
-    content: '';
-    display: block;
-    width: 14px;
-    height: 14px;
-    font-size: 14px;
-    background-size: 14px;
-}
-/deep/.el-tree-node__expand-icon.expanded {
-    -webkit-transform: rotate(0deg);
-    transform: rotate(0deg);
-    background: white;
-}
-// /deep/.el-tree-node:focus > .el-tree-node__content {
-//     background-color: transparent !important;
-// }
-/deep/ .el-checkbox__input.is-checked .el-checkbox__inner {
-    background: url('~@/assets/img/checks.png') no-repeat center center;
-    content: '';
-    display: block;
-    width: 14px;
-    height: 14px;
-    font-size: 14px;
-    background-size: 14px;
-}
-
 .realVideoBox {
     height: 100%;
     display: flex;
     justify-content: space-between;
-    .organ-tree {
-        width: 250px;
-        padding: 20px;
-        height: calc(100% - 80px);
-        background: white;
-
-        .tree-list-ctrl-scroll {
-            overflow-y: auto;
-            overflow-x: hidden;
-            height: calc(100% - 40px);
-            margin-top: 10px;
-            &::-webkit-scrollbar {
-                z-index: 11;
-                width: 4px;
-            }
-            &::-webkit-scrollbar-track,
-            &::-webkit-scrollbar-corner {
-                background: transparent;
-            }
-            &::-webkit-scrollbar-thumb {
-                border-radius: 5px;
-                width: 4px;
-                background: #e2e2e2;
-            }
-            &::-webkit-scrollbar-track-piece {
-                background: transparent;
-                width: 4px;
-            }
-        }
+}
+.leftAssembly {
+    width: 300px;
+    background: #171f32;
+    border-radius: 4px;
+    box-sizing: border-box;
+    padding: 20px;
+    color: white;
+    .titles {
+        border-bottom: 1px solid rgba(224, 225, 227, 0.2);
+        padding-bottom: 20px;
+        margin-bottom: 20px;
+    }
+    .componentsBlock {
+        height: calc(100% - 60px);
+        overflow-y: auto;
+        overflow-x: hidden;
     }
-    .rightVideo {
-        width: calc(100% - 270px);
+    .devList {
+        height: 30px;
+        line-height: 30px;
+        padding: 0 10px;
+        &.active {
+            background: #0eaeff36;
+            border-radius: 4px;
+        }
     }
 }
+.contentShow {
+    border: 1px solid #171f32;
+    width: calc(100% - 320px);
+    border-radius: 4px;
+    padding: 0.1rem;
+    height: 100%;
+    display: grid;
+    grid-template-columns: 2fr 2fr 2fr 2fr;
+    grid-template-rows: 1fr 1fr 1fr;
+}
 </style>