1.点位查询树形数据展示，2.视频巡查数据筛选

guanqb

2023-02-04 d44dd830d1e8e5f0e2dbcd10abbcce1dd5fe01ed

 src/views/layout/index.vue

@@ -12,13 +12,25 @@
    <div class="wrapper">
        <div class="main-header">
            <div class="menu-list left">
                <div @mouseenter="item.childrenFlag = true" @mouseleave="item.childrenFlag = false" class="nav-list"
                    @click="goToPath(item)" v-for="(item, index) in menuLeftList" :key="index">
                <div
                    @mouseenter="item.childrenFlag = true"
                    @mouseleave="item.childrenFlag = false"
                    class="nav-list"
                    @click="goToPath(item)"
                    v-for="(item, index) in menuLeftList"
                    :key="index"
                >
                    <span :class="{ on: currentUrl.indexOf(item.path) != -1 }">{{ item.menuName }}</span>
                    <div class="sub-nav-list" v-show="item.children && item.childrenFlag">
                        <div v-for="(subItem, subIndex) in item.children" :key="subIndex" @click="goToPath(subItem)">{{
                        <div
                            v-for="(subItem, subIndex) in item.children"
                            :key="subIndex"
                            @click="goToPath(subItem)"
                        >
                            {{
                            subItem.menuName
                        }}</div>
                            }}
                        </div>
                    </div>
                </div>
            </div>
@@ -29,13 +41,25 @@

            <!-- 菜单导航 -->
            <div class="menu-list right">
                <div @mouseenter="item.childrenFlag = true" @mouseleave="item.childrenFlag = false" class="nav-list"
                    @click="goToPath(item)" v-for="(item, index) in menuRightList" :key="index">
                <div
                    @mouseenter="item.childrenFlag = true"
                    @mouseleave="item.childrenFlag = false"
                    class="nav-list"
                    @click="goToPath(item)"
                    v-for="(item, index) in menuRightList"
                    :key="index"
                >
                    <span :class="{ on: currentUrl.indexOf(item.path) != -1 }">{{ item.menuName }}</span>
                    <div class="sub-nav-list" v-show="item.children && item.childrenFlag">
                        <div v-for="(subItem, subIndex) in item.children" :key="subIndex" @click="goToPath(subItem)">{{
                        <div
                            v-for="(subItem, subIndex) in item.children"
                            :key="subIndex"
                            @click="goToPath(subItem)"
                        >
                            {{
                            subItem.menuName
                        }}</div>
                            }}
                        </div>
                    </div>
                </div>
            </div>
@@ -74,15 +98,25 @@
            <!-- 地图区域 -->
            <map-box ref="modalForm">
                <!-- 主体内容区域 -->
                <div slot="mainContent" class="main-content" id="MainContent"
                    :class="{ 'spread': leftShow && show, 'take-back': leftShow && !show }">
                <div
                    slot="mainContent"
                    class="main-content"
                    id="MainContent"
                    :class="{ 'spread': leftShow && show, 'take-back': leftShow && !show }"
                >
                    <router-view ref="target-name"></router-view>
                </div>

                <el-button slot="showButton" v-show="leftShow" class="flexible-btn"
                <el-button
                    slot="showButton"
                    v-show="leftShow"
                    class="flexible-btn"
                    :class="{ 'spread': leftShow && show, 'take-back': leftShow && !show }"
                    :icon="show ? 'el-icon-arrow-left' : 'el-icon-arrow-right'" id="FlexibleBtn" type="primary"
                    @click="flexibelClick"></el-button>
                    :icon="show ? 'el-icon-arrow-left' : 'el-icon-arrow-right'"
                    id="FlexibleBtn"
                    type="primary"
                    @click="flexibelClick"
                ></el-button>
            </map-box>
        </div>
    </div>
@@ -121,7 +155,7 @@
                    childrenFlag: false,
                    children: [
                        {
                            menuName: '设备查询',
                            menuName: '点位查询',
                            path: '/layout/video/list'
                        },
                        {
@@ -323,7 +357,7 @@
            overflow: hidden;
            letter-spacing: 6px;

            &>img {
            & > img {
                // width: 100%;
                height: 80%;
                margin: 0 10px 0 10px;
@@ -339,7 +373,7 @@
                // border-radius: 10px 16px 10px 16px;
                transform: skew(58deg);

                &>span {
                & > span {
                    transform: skew(-58deg);
                }
            }
@@ -353,7 +387,7 @@
                // border-radius: 16px 10px 16px 10px;
                transform: skew(-58deg);

                &>span {
                & > span {
                    transform: skew(58deg);
                }
            }
@@ -363,11 +397,10 @@
            display: flex;
            align-items: center;

            &>.nav-list {

            & > .nav-list {
                // color: rgba(32, 106, 181, 1);
                // border-bottom: 2px solid #409eff;
                &>span.on {
                & > span.on {
                    color: rgba(252, 189, 86, 1);
                }
            }
@@ -496,7 +529,7 @@
                    justify-content: space-around;
                    padding-top: 4px;

                    &>div {
                    & > div {
                        width: 100px;
                        height: 40px;
                        background-color: rgba(168, 222, 255, 0.6);