From a45719001daa7b7ec6cf8fd4da1f291e4a953c36 Mon Sep 17 00:00:00 2001
From: xins <xins@mesnac.com>
Date: Fri, 10 Nov 2023 16:06:25 +0800
Subject: [PATCH] =?UTF-8?q?=E8=8B=A5=E4=BE=9D=E5=BE=AE=E6=9C=8D=E5=8A=A11.?=
 =?UTF-8?q?9.4=20business=EF=BC=9A=201=E3=80=81=E8=AE=BE=E5=A4=87=E4=BF=A1?=
 =?UTF-8?q?=E6=81=AF=E5=A2=9E=E5=8A=A0=E6=A0=B9=E6=8D=AE=E7=BD=91=E5=85=B3?=
 =?UTF-8?q?=E8=AE=BE=E5=A4=87=E8=BF=87=E6=BB=A4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../mapper/business/HwDeviceMapper.xml        |   1 +
 ruoyi-ui/src/views/business/device/index.vue  | 590 +++++++++++-------
 2 files changed, 355 insertions(+), 236 deletions(-)

diff --git a/ruoyi-modules/hw-business/src/main/resources/mapper/business/HwDeviceMapper.xml b/ruoyi-modules/hw-business/src/main/resources/mapper/business/HwDeviceMapper.xml
index 7aa5481..15ec32e 100644
--- a/ruoyi-modules/hw-business/src/main/resources/mapper/business/HwDeviceMapper.xml
+++ b/ruoyi-modules/hw-business/src/main/resources/mapper/business/HwDeviceMapper.xml
@@ -276,6 +276,7 @@ PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
             <if test="activeStatus != null  and activeStatus != ''"> and hd.active_status = #{activeStatus}</if>
             <if test="deviceStatus != null  and deviceStatus != ''"> and hd.device_status = #{deviceStatus}</if>
             <if test="tenantId != null "> and hd.tenant_id = #{tenantId}</if>
+            <if test="releatedDeviceId != null "> and hd.releated_device_id = #{releatedDeviceId}</if>
             <if test="onlineStatus != null  and onlineStatus != ''"> and hd.online_status = #{onlineStatus}</if>
             <!-- 租户数据范围过滤 -->
             ${params.tenantDataScope}
diff --git a/ruoyi-ui/src/views/business/device/index.vue b/ruoyi-ui/src/views/business/device/index.vue
index 179f887..fb9ee22 100644
--- a/ruoyi-ui/src/views/business/device/index.vue
+++ b/ruoyi-ui/src/views/business/device/index.vue
@@ -1,245 +1,298 @@
 <template>
   <div class="app-container">
-    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
-      <el-form-item label="设备编号" prop="deviceCode">
-        <el-input
-          v-model="queryParams.deviceCode"
-          placeholder="请输入设备编号"
-          clearable
-          @keyup.enter.native="handleQuery"
-        />
-      </el-form-item>
-      <el-form-item label="设备名称" prop="deviceName">
-        <el-input
-          v-model="queryParams.deviceName"
-          placeholder="请输入设备名称"
-          clearable
-          @keyup.enter.native="handleQuery"
-        />
-      </el-form-item>
-      <el-form-item label="设备类型" prop="networkingMode">
-        <el-select v-model="queryParams.deviceType" placeholder="请选择设备类型" clearable>
-          <el-option
-            v-for="dict in dict.type.hw_device_type"
-            :key="dict.value"
-            :label="dict.label"
-            :value="dict.value"
-          ></el-option>
-        </el-select>
-      </el-form-item>
-      <el-form-item label="所属场景" prop="sceneId">
-        <el-select v-model="queryParams.sceneId" placeholder="请选择" @input="sceneChange" clearable>
-          <el-option
-            v-for="(scene, index) in scenes"
-            :key="index"
-            :label="scene.sceneName"
-            :value="scene.sceneId"
-          ></el-option>
-        </el-select>
-
-      </el-form-item>
-      <el-form-item label="监控单元" prop="monitorUnitId">
-        <treeselect v-model="queryParams.monitorUnitId" :options="monitorUnits" :show-count="true"
-                    placeholder="请选择所属监控单元" :normalizer="normalizer" :flat="true" clearable
-                    style="width: 200px;"/>
-
-      </el-form-item>
-
-      <el-form-item label="设备模型" prop="deviceModeId">
-        <el-select v-model="queryParams.deviceModeId" placeholder="请选择" clearable>
-          <el-option
-            v-for="(editedDeviceMode, index) in deviceModes"
-            :key="index"
-            :label="editedDeviceMode.deviceModeName"
-            :value="editedDeviceMode.deviceModeId"
-          ></el-option>
-        </el-select>
-
-      </el-form-item>
-
-
-      <el-form-item label="设备状态" prop="deviceStatus">
-        <el-select v-model="queryParams.deviceStatus" placeholder="请选择" clearable>
-          <el-option
-            v-for="dict in dict.type.hw_device_device_status"
-            :key="dict.value"
-            :label="dict.label"
-            :value="dict.value"
-          ></el-option>
-        </el-select>
-      </el-form-item>
-
-      <!--el-form-item label="在线状态" prop="onlineStatus">
-        <el-select v-model="queryParams.onlineStatus" placeholder="请选择" clearable>
-          <el-option
-            v-for="dict in dict.type.hw_device_online_status"
-            :key="dict.value"
-            :label="dict.label"
-            :value="dict.value"
-          ></el-option>
-        </el-select>
-      </el-form-item-->
-
-
-      <el-form-item>
-        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
-        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
-      </el-form-item>
-    </el-form>
-
-    <el-row :gutter="10" class="mb8">
-      <el-col :span="1.5">
-        <el-button
-          type="primary"
-          plain
-          icon="el-icon-plus"
-          size="mini"
-          @click="handleAdd"
-          v-hasPermi="['business:device:add']"
-        >新增
-        </el-button>
-      </el-col>
+    <el-row :gutter="20">
 
-      <el-col :span="1.5">
-        <el-button
-          type="info"
-          plain
-          icon="el-icon-upload"
-          size="mini"
-          @click="handleImport"
-          v-hasPermi="['business:device:import']"
-        >导入
-        </el-button>
+      <el-col :span="0.1" :xs="24" v-if="toggleRightDisplay">
+        <div @click="toggleDeviceClick">
+          <img v-if="toggleMenuRightImg" :src="toggleMenuRightImg" class="hamburger"/>
+        </div>
       </el-col>
-
-      <el-col :span="1.5">
-        <el-button
-          type="warning"
-          plain
-          icon="el-icon-download"
-          size="mini"
-          @click="handleExport"
-          v-hasPermi="['business:device:export']"
-        >导出
-        </el-button>
+      <!--网关设备数据-->
+      <el-col :span="4" :xs="24" v-if="toggleLeftDisplay">
+        <div @click="toggleDeviceClick" style="display:flex;justify-content: space-between">
+          <h6 class="form-header h6" style="margin: 10px 0 10px 0">网关设备,点击过滤显示子设备</h6>
+          <img v-if="toggleMenuLeftImg" :src="toggleMenuLeftImg" class="hamburger"/>
+        </div>
+        <div class="head-container">
+          <el-input
+            v-model="gatewayDeviceName"
+            placeholder="请输入网关设备名称"
+            clearable
+            size="small"
+            prefix-icon="el-icon-search"
+            style="margin-bottom: 20px"
+          />
+        </div>
+        <div class="head-container">
+          <el-tree
+            :data="gatewayDeviceList"
+            :props="defaultProps"
+            :expand-on-click-node="false"
+            :filter-node-method="filterNode"
+            ref="tree"
+            node-key="deviceId"
+            default-expand-all
+            highlight-current
+            @node-click="handleNodeClick"
+          />
+        </div>
       </el-col>
-      <el-col :span="1.5">
-        <el-button
-          type="primary"
-          plain
-          icon="el-icon-plus"
-          size="mini"
-          @click="handleRebuildTdTables"
-          v-hasPermi="['business:device:rebuild']"
-        >重建表
-        </el-button>
+      <!--设备数据-->
+      <el-col :span="20" :xs="24">
+        <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch"
+                 label-width="68px">
+          <el-form-item label="网关设备" prop="releatedDeviceId" v-if="false">
+            <el-input
+              v-model="queryParams.releatedDeviceId"
+              placeholder="请输入设备编号"
+              clearable
+              @keyup.enter.native="handleQuery"
+            />
+          </el-form-item>
+
+          <el-form-item label="设备编号" prop="deviceCode">
+            <el-input
+              v-model="queryParams.deviceCode"
+              placeholder="请输入设备编号"
+              clearable
+              @keyup.enter.native="handleQuery"
+            />
+          </el-form-item>
+          <el-form-item label="设备名称" prop="deviceName">
+            <el-input
+              v-model="queryParams.deviceName"
+              placeholder="请输入设备名称"
+              clearable
+              @keyup.enter.native="handleQuery"
+            />
+          </el-form-item>
+          <el-form-item label="设备类型" prop="networkingMode">
+            <el-select v-model="queryParams.deviceType" placeholder="请选择设备类型" clearable>
+              <el-option
+                v-for="dict in dict.type.hw_device_type"
+                :key="dict.value"
+                :label="dict.label"
+                :value="dict.value"
+              ></el-option>
+            </el-select>
+          </el-form-item>
+          <el-form-item label="所属场景" prop="sceneId">
+            <el-select v-model="queryParams.sceneId" placeholder="请选择" @input="sceneChange" clearable>
+              <el-option
+                v-for="(scene, index) in scenes"
+                :key="index"
+                :label="scene.sceneName"
+                :value="scene.sceneId"
+              ></el-option>
+            </el-select>
+
+          </el-form-item>
+          <el-form-item label="监控单元" prop="monitorUnitId">
+            <treeselect v-model="queryParams.monitorUnitId" :options="monitorUnits" :show-count="true"
+                        placeholder="请选择所属监控单元" :normalizer="normalizer" :flat="true" clearable
+                        style="width: 200px;"/>
+
+          </el-form-item>
+
+          <el-form-item label="设备模型" prop="deviceModeId">
+            <el-select v-model="queryParams.deviceModeId" placeholder="请选择" clearable>
+              <el-option
+                v-for="(editedDeviceMode, index) in deviceModes"
+                :key="index"
+                :label="editedDeviceMode.deviceModeName"
+                :value="editedDeviceMode.deviceModeId"
+              ></el-option>
+            </el-select>
+
+          </el-form-item>
+
+
+          <el-form-item label="设备状态" prop="deviceStatus">
+            <el-select v-model="queryParams.deviceStatus" placeholder="请选择" clearable>
+              <el-option
+                v-for="dict in dict.type.hw_device_device_status"
+                :key="dict.value"
+                :label="dict.label"
+                :value="dict.value"
+              ></el-option>
+            </el-select>
+          </el-form-item>
+
+          <!--el-form-item label="在线状态" prop="onlineStatus">
+            <el-select v-model="queryParams.onlineStatus" placeholder="请选择" clearable>
+              <el-option
+                v-for="dict in dict.type.hw_device_online_status"
+                :key="dict.value"
+                :label="dict.label"
+                :value="dict.value"
+              ></el-option>
+            </el-select>
+          </el-form-item-->
+
+
+          <el-form-item>
+            <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
+            <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
+          </el-form-item>
+        </el-form>
+
+        <el-row :gutter="10" class="mb8">
+          <el-col :span="1.5">
+            <el-button
+              type="primary"
+              plain
+              icon="el-icon-plus"
+              size="mini"
+              @click="handleAdd"
+              v-hasPermi="['business:device:add']"
+            >新增
+            </el-button>
+          </el-col>
+
+          <el-col :span="1.5">
+            <el-button
+              type="info"
+              plain
+              icon="el-icon-upload"
+              size="mini"
+              @click="handleImport"
+              v-hasPermi="['business:device:import']"
+            >导入
+            </el-button>
+          </el-col>
+
+          <el-col :span="1.5">
+            <el-button
+              type="warning"
+              plain
+              icon="el-icon-download"
+              size="mini"
+              @click="handleExport"
+              v-hasPermi="['business:device:export']"
+            >导出
+            </el-button>
+          </el-col>
+          <el-col :span="1.5">
+            <el-button
+              type="primary"
+              plain
+              icon="el-icon-plus"
+              size="mini"
+              @click="handleRebuildTdTables"
+              v-hasPermi="['business:device:rebuild']"
+            >重建表
+            </el-button>
+          </el-col>
+          <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
+        </el-row>
+
+        <el-table v-loading="loading" :data="deviceList" @selection-change="handleSelectionChange">
+          <el-table-column type="selection" width="55" align="center"/>
+          <el-table-column label="设备ID" align="center" prop="deviceId"/>
+          <el-table-column label="设备编号" align="center" prop="deviceCode"/>
+          <el-table-column label="设备名称" align="center" prop="deviceName"/>
+          <el-table-column label="设备类型" align="center" prop="deviceType">
+            <template slot-scope="scope">
+              <dict-tag :options="dict.type.hw_device_type" :value="scope.row.deviceType"/>
+            </template>
+          </el-table-column>
+
+          <el-table-column label="所属租户" align="center" prop="tenantName"/>
+          <el-table-column label="所属场景" align="center" prop="sceneName"/>
+          <el-table-column label="监控单元" align="center" prop="monitorUnitName"/>
+          <el-table-column label="设备模型" align="center" prop="deviceModeName"/>
+          <!--el-table-column label="激活状态" align="center" prop="activeStatus">
+            <template slot-scope="scope">
+              <dict-tag :options="dict.type.hw_device_active_status" :value="scope.row.activeStatus"/>
+            </template>
+          </el-table-column-->
+          <el-table-column label="设备发布时间" align="center" prop="publishTime" width="180">
+            <template slot-scope="scope">
+              <span>{{ parseTime(scope.row.publishTime, '{y}-{m}-{d} {h}:{i}:{s}') }}</span>
+            </template>
+          </el-table-column>
+          <el-table-column label="设备状态" align="center" prop="deviceStatus">
+            <template slot-scope="scope">
+              <el-switch
+                v-model="scope.row.deviceStatus"
+                active-value="1"
+                inactive-value="0"
+                @change="handleDeviceStatusChange(scope.row)"
+              ></el-switch>
+            </template>
+          </el-table-column>
+
+          <!--el-table-column label="在线状态" align="center" prop="onlineStatus">
+            <template slot-scope="scope">
+              <dict-tag :options="dict.type.hw_device_online_status" :value="scope.row.onlineStatus"/>
+            </template>
+          </el-table-column-->
+          <el-table-column label="设备控制" align="center" class-name="small-padding fixed-width">
+            <template slot-scope="scope" v-if="scope.row.deviceType=='1' || scope.row.deviceType=='3'">
+              <el-button
+                size="mini"
+                type="text"
+                icon="el-icon-time"
+                @click="publishControlCommand(scope.row,'CMD_SYS_TIME_CHECK','设备对时')"
+                v-hasPermi="['business:device:edit']"
+              >校时
+              </el-button>
+              <el-button
+                size="mini"
+                type="text"
+                icon="el-icon-camera"
+                @click="publishControlCommand(scope.row,'CMD_SNAPSHOT','拍照')"
+                v-hasPermi="['business:device:edit']"
+              >拍照
+              </el-button>
+
+              <el-button
+                size="mini"
+                type="text"
+                icon="el-icon-refresh-right"
+                @click="publishControlCommand(scope.row,'CMD_SYS_REBOOT','重启')"
+                v-hasPermi="['business:device:edit']"
+              >重启
+              </el-button>
+
+
+            </template>
+          </el-table-column>
+
+          <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
+            <template slot-scope="scope">
+              <el-button
+                size="mini"
+                type="text"
+                icon="el-icon-edit"
+                @click="handleUpdate(scope.row)"
+                v-hasPermi="['business:device:edit']"
+              >修改
+              </el-button>
+
+              <el-button
+                size="mini"
+                type="text"
+                icon="el-icon-delete"
+                @click="handleDelete(scope.row)"
+                v-hasPermi="['business:device:remove']"
+              >删除
+              </el-button>
+            </template>
+          </el-table-column>
+        </el-table>
+
+        <pagination
+          v-show="total>0"
+          :total="total"
+          :page.sync="queryParams.pageNum"
+          :limit.slimitnc="queryParams.pageSize"
+          @pagination="getList"
+        />
+
       </el-col>
-      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
     </el-row>
 
-    <el-table v-loading="loading" :data="deviceList" @selection-change="handleSelectionChange">
-      <el-table-column type="selection" width="55" align="center"/>
-      <el-table-column label="设备ID" align="center" prop="deviceId"/>
-      <el-table-column label="设备编号" align="center" prop="deviceCode"/>
-      <el-table-column label="设备名称" align="center" prop="deviceName"/>
-      <el-table-column label="设备类型" align="center" prop="deviceType">
-        <template slot-scope="scope">
-          <dict-tag :options="dict.type.hw_device_type" :value="scope.row.deviceType"/>
-        </template>
-      </el-table-column>
-
-      <el-table-column label="所属租户" align="center" prop="tenantName"/>
-      <el-table-column label="所属场景" align="center" prop="sceneName"/>
-      <el-table-column label="监控单元" align="center" prop="monitorUnitName"/>
-      <el-table-column label="设备模型" align="center" prop="deviceModeName"/>
-      <!--el-table-column label="激活状态" align="center" prop="activeStatus">
-        <template slot-scope="scope">
-          <dict-tag :options="dict.type.hw_device_active_status" :value="scope.row.activeStatus"/>
-        </template>
-      </el-table-column-->
-      <el-table-column label="设备发布时间" align="center" prop="publishTime" width="180">
-        <template slot-scope="scope">
-          <span>{{ parseTime(scope.row.publishTime, '{y}-{m}-{d} {h}:{i}:{s}') }}</span>
-        </template>
-      </el-table-column>
-      <el-table-column label="设备状态" align="center" prop="deviceStatus">
-        <template slot-scope="scope">
-          <el-switch
-            v-model="scope.row.deviceStatus"
-            active-value="1"
-            inactive-value="0"
-            @change="handleDeviceStatusChange(scope.row)"
-          ></el-switch>
-        </template>
-      </el-table-column>
-
-      <!--el-table-column label="在线状态" align="center" prop="onlineStatus">
-        <template slot-scope="scope">
-          <dict-tag :options="dict.type.hw_device_online_status" :value="scope.row.onlineStatus"/>
-        </template>
-      </el-table-column-->
-      <el-table-column label="设备控制" align="center" class-name="small-padding fixed-width">
-        <template slot-scope="scope" v-if="scope.row.deviceType=='1' || scope.row.deviceType=='3'">
-          <el-button
-            size="mini"
-            type="text"
-            icon="el-icon-time"
-            @click="publishControlCommand(scope.row,'CMD_SYS_TIME_CHECK','设备对时')"
-            v-hasPermi="['business:device:edit']"
-          >校时
-          </el-button>
-          <el-button
-            size="mini"
-            type="text"
-            icon="el-icon-camera"
-            @click="publishControlCommand(scope.row,'CMD_SNAPSHOT','拍照')"
-            v-hasPermi="['business:device:edit']"
-          >拍照
-          </el-button>
-
-          <el-button
-            size="mini"
-            type="text"
-            icon="el-icon-refresh-right"
-            @click="publishControlCommand(scope.row,'CMD_SYS_REBOOT','重启')"
-            v-hasPermi="['business:device:edit']"
-          >重启
-          </el-button>
-
-
-        </template>
-      </el-table-column>
-
-      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
-        <template slot-scope="scope">
-          <el-button
-            size="mini"
-            type="text"
-            icon="el-icon-edit"
-            @click="handleUpdate(scope.row)"
-            v-hasPermi="['business:device:edit']"
-          >修改
-          </el-button>
-
-          <el-button
-            size="mini"
-            type="text"
-            icon="el-icon-delete"
-            @click="handleDelete(scope.row)"
-            v-hasPermi="['business:device:remove']"
-          >删除
-          </el-button>
-        </template>
-      </el-table-column>
-    </el-table>
-
-    <pagination
-      v-show="total>0"
-      :total="total"
-      :page.sync="queryParams.pageNum"
-      :limit.slimitnc="queryParams.pageSize"
-      @pagination="getList"
-    />
 
     <!-- 添加或修改设备信息对话框 -->
     <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
@@ -436,6 +489,7 @@
 
     </el-dialog>
 
+
   </div>
 </template>
 
@@ -458,6 +512,8 @@ import {
 import {getToken} from "@/utils/auth";
 import Treeselect from "@riophae/vue-treeselect";
 import "@riophae/vue-treeselect/dist/vue-treeselect.css";
+import toggleMenuLeftImg from '@/assets/images/togglemenu-left.png'
+import toggleMenuRightImg from '@/assets/images/togglemenu-right.png'
 
 export default {
   components: {Treeselect},
@@ -489,6 +545,13 @@ export default {
 
   data() {
     return {
+      toggleMenuLeftImg: toggleMenuLeftImg,
+      toggleMenuRightImg: toggleMenuRightImg,
+      toggleLeftDisplay: true,
+      toggleRightDisplay: false,
+      // 网关设备名称
+      gatewayDeviceName: undefined,
+
       // 遮罩层
       loading: true,
       // 选中数组
@@ -503,6 +566,8 @@ export default {
       total: 0,
       // 设备信息表格数据
       deviceList: [],
+      // 网关设备信息表格数据
+      gatewayDeviceList: [],
       //场景列表
       scenes: [],
       //查询页面监控单元树
@@ -544,6 +609,10 @@ export default {
       // 是否显示弹出层
       open: false,
 
+      defaultProps: {
+        children: "children",
+        label: "deviceName"
+      },
 
       // 用户导入参数
       upload: {
@@ -653,8 +722,15 @@ export default {
       fileList: [],
     };
   },
+  watch: {
+    // 根据名称筛选部门树
+    gatewayDeviceName(val) {
+      this.$refs.tree.filter(val);
+    }
+  },
   created() {
     this.getList();
+    this.getGatewayDeviceList();
     getScenes().then(response => {
       this.scenes = response.data;
     });
@@ -690,6 +766,15 @@ export default {
         this.loading = false;
       });
     },
+
+    getGatewayDeviceList() {
+      this.loading = true;
+      listDevice({"deviceType": 1}).then(response => {
+        this.gatewayDeviceList = response.rows;
+        this.loading = false;
+      });
+    },
+
     // 取消按钮
     cancel() {
       this.open = false;
@@ -737,6 +822,8 @@ export default {
     /** 重置按钮操作 */
     resetQuery() {
       this.resetForm("queryForm");
+      this.queryParams.deviceType = null;
+      this.queryParams.releatedDeviceId = null;
       this.handleQuery();
     },
     // 多选框选中数据
@@ -1115,7 +1202,7 @@ export default {
     importTemplate() {
       this.$refs["uploadForm"].validate(valid => {
         if (valid) {
-          this.download('business/device/importTemplate', {"sceneId": this.upload.sceneId}, `device_template_`+this.upload.sceneName+`_${new Date().getTime()}.xlsx`)
+          this.download('business/device/importTemplate', {"sceneId": this.upload.sceneId}, `device_template_` + this.upload.sceneName + `_${new Date().getTime()}.xlsx`)
         }
       });
     },
@@ -1138,9 +1225,40 @@ export default {
           this.$refs.upload.submit();
         }
       });
+    },
+
+    // 筛选节点
+    filterNode(value, data) {
+      if (!value) return true;
+      return data.deviceName.indexOf(value) !== -1;
+    },
+    // 节点单击事件
+    handleNodeClick(data) {
+      this.queryParams.deviceType = this.DEVICE_TYPE_GATEWAY_SUB_EQUIPMENT;
+      this.queryParams.releatedDeviceId = data.deviceId;
+      this.handleQuery();
+    },
+
+    toggleDeviceClick() {
+      if (this.toggleLeftDisplay) {
+        this.toggleRightDisplay = true;
+        this.toggleLeftDisplay = false;
+      } else if (this.toggleRightDisplay) {
+        this.toggleRightDisplay = false;
+        this.toggleLeftDisplay = true;
+      }
     }
 
   }
 };
 </script>
-
+<style scoped>
+.hamburger {
+  display: inline-block;
+  width: 20px;
+  height: 20px;
+  vertical-align: middle;
+  margin: 5px 5px 0 0;
+  cursor: pointer;
+}
+</style>