菜单栏修改

src/views/Home.vue

@@ -1,36 +1,66 @@
 <template>
-	<el-container>
-		<!-- 左侧边栏 -->
-		<el-aside :width="isCollapseleft?'65px':'200px'">
-			<div class="toggle-button" @click="toggleCollapsel">|||</div>
-			<el-menu default-active="1-4-1" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose"
-				:collapse="isCollapseleft" :collapse-transition="false" router>
+	<div>
+		<el-row class="tac">
+            <el-col :span="2">
+		<!-- style="width: 110px;height: 800px;background-color: #000;" -->
+		<div style="width: 110px;height: 800px;background-color: #000;">
+            <div
+            style="margin-left: 20px; background-color: #06235B;width: 53px;height: 30px;position: relative;border-radius: 5px;border:1px solid #fff">
+            
+            <span slot="title"
+                style="color: #00ffff; font-size: 10px;position: absolute;top: 27%;text-align: center;">系统列表</span>
+        </div>
+			<el-menu class="el-menu-vertical-demo" default-active="1-4-1" @open="handleOpen" @close="handleClose" router>
 				<template v-for="(item,index) in $router.options.routes[0].children" v-if="!item.hidden">
 					<el-menu-item :index="item.path">
-
-						<img :src="imgSys[item.id]" alt="图片" align="middle">
-						<span slot="title">{{item.name}}</span>
+						<div
+							style="background-color: #06235B;width: 53px;height: 53px;position: relative;border-radius: 5px;border:1px solid #fff">
+							<img style="width: 30px;height:30px;text-align: center;position: absolute;left: 40%;top: 39%;transform:translate(-50%,-50%);"
+								:src="imgSys[item.id]" alt="图片">
+							<span slot="title"
+								style="color: white;font-size: 10px;position: absolute;top: 27%;text-align: center;">{{item.name}}</span>
+						</div>
 					</el-menu-item>
 				</template>
 </el-menu>
-</el-aside>
-<!-- 展示   -->
-<el-main>
-    <router-view></router-view>
-</el-main>
+
+</div>
+</el-col>
+<el-col :span="20">
+    <!-- 展示   -->
+    <el-main>
+        <router-view></router-view>
+    </el-main>
+</el-col>
 <!-- 右侧边栏 -->
-<el-aside :width="isCollapseright?'65px':'200px'">
-    <div class="toggle-button" @click="toggleCollapser">|||</div>
-    <el-menu default-active="1-4-1" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose" :collapse="isCollapseright" :collapse-transition="false" router>
-        <template v-for="(item,index) in $router.options.routes[1].children" v-if="!item.hidden">
-					<el-menu-item :index="item.path">
-						<span slot="title">{{item.name}}</span>
-						<img :src="imgApp[item.id]" alt="图片" align="middle">
-					</el-menu-item>
-				</template>
-    </el-menu>
-</el-aside>
-</el-container>
+
+<el-col :span="2">
+    <div style="width: 110px;height: 800px;background-color: #000;">
+        <div style="margin-left: 20px; background-color: #06235B;width: 53px;height: 30px;position: relative;border-radius: 5px;border:1px solid #fff">
+
+            <span slot="title" style="color: #00ffff; font-size: 10px;position: absolute;top: 27%;text-align: center;">应用列表</span>
+        </div>
+        <el-menu default-active="1-4-1" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose" router>
+            <template v-for="(item,index) in $router.options.routes[1].children" v-if="!item.hidden">
+        <el-menu-item :index="item.path">
+            <div
+            style="background-color: #06235B;width: 53px;height: 53px;position: relative;border-radius: 5px;border:1px solid #fff">
+            <img style="width: 30px;height:30px;text-align: center;position: absolute;left: 40%;top: 39%;transform:translate(-50%,-50%);"
+                :src="imgApp[item.id]" alt="图片">
+            <span slot="title"
+                style="color: white;font-size: 10px;position: absolute;top: 27%;text-align: center;">{{item.name}}</span>
+        </div>
+       
+           
+        </el-menu-item>
+    </template>
+        </el-menu>
+    </div>
+</el-col>
+
+</el-row>
+</div>
+
 </template>
 
 <script>
@@ -38,8 +68,6 @@
         name: "Home",
         data() {
             return {
-                isCollapseleft: true,
-                isCollapseright: true,
                 imgSys: {
                     '100': require('@/assets/img/100.png'),
                     '101': require('@/assets/img/101.png'),
@@ -75,10 +103,7 @@
             handleClose(key, keyPath) {
                 console.log(key, keyPath);
             },
-            toggleCollapsel() {
-                this.isCollapseleft = !this.isCollapseleft;
 
-            },
             toggleCollapser() {
                 this.isCollapseright = !this.isCollapseright;
 
@@ -89,21 +114,15 @@
 
 
 <style scoped>
-    .el-menu-vertical-demo:not(.el-menu--collapse) {
-        width: 200px;
-        min-height: 400px;
-    }
-    
-    .bg-purple {
-        background: white;
+    .el-menu-vertical-demo {
+        width: 1px;
     }
-    
-    .toggle-button {
+    /* .toggle-button {
         font-size: 10px;
         line-height: 24px;
         color: #001C1F;
         text-align: justify;
         letter-spacing: 0.2em;
         cursor: pointer;
-    }
+    } */
 </style>

src/views/monitor/systemData.vue

@@ -106,11 +106,11 @@
         methods: {
             // 监听 pagesize 改变的事件
             handleSizeChange(newSize) {
-                console.log(newSize)
+                // console.log(newSize)
             },
             //监听 页码值 改变的事件
             handleCurrentChange(newPage) {
-                console.log(newPage)
+                // console.log(newPage)
             },
             watch(row) {
                 console.log(row.sub_system_name)

src/views/transportation/subSystem/belt_body.vue

@@ -9,140 +9,20 @@
         </el-breadcrumb>
 
         <el-divider class="divi"></el-divider>
-        <!-- 第一行 -->
-        <el-row :gutter="20">
-            <el-col :span="4">
-                <div class="block">
-                    <span class="text">牵引方向</span></br>
-                    <el-select style="width: 120px; margin-left: 25px" v-model="dataRange" placeholder="请选择数据范围">
-                        <el-option v-for="item in dataRangeItems" :key="item.value" :label="item.label" :value="item.value">
-                        </el-option>
-                    </el-select>
-                    <el-button type="primary" @click="dataAnalysis()">数据分析</el-button>
-                    <el-button type="primary" @click="openDetail()">详细数据</el-button>
-                </div>
-            </el-col>
-            <el-col :span="14">
-                <div class="block">
-                    <span class="threshold" @click="beyondthreshold()">超出阈值：0.83</span>
-                    <direction></direction>
-                </div>
-
-            </el-col>
-            <el-col :span="6">
-                <div class="block">
-                    <el-card>
-                        <span class="info">设备健康程度:{{health}}</span></br>
-                        <span class="info">安全隐患程度:{{danger}}</span></br>
-                        <span class="info">正常运行:{{normal_time}}</span></br>
-                        <span class="info">数值超标总时长:{{total_time}}</span></br>
-                   </el-card>
-                </div>
-
-            </el-col>
-        </el-row>
-        <!-- 第二行 -->
-        <el-row :gutter="20">
-            <el-col :span="4">
-                <div class="block">
-                    <span class="text">牵引状态</span></br>
-                    <el-button type="primary">选择数据范围</el-button></br>
-                    <el-button type="primary" >数据分析</el-button></br>
-                    <el-button type="primary">详细数据</el-button></br>
-                </div>
-            </el-col>
-            <el-col :span="14">
-                <div class="block">
-                    <span class="threshold">超出阈值：0.83</span>
-                    <pull_status></pull_status>
-                </div>
-
-            </el-col>
-            <el-col :span="6">
-                <div class="block">
-                    <el-card>
-                        <span class="info">设备健康程度:{{health}}</span></br>
-                        <span class="info">安全隐患程度:{{danger}}</span></br>
-                        <span class="info">正常运行:{{normal_time}}</span></br>
-                        <span class="info">数值超标总时长:{{total_time}}</span></br>
-                   </el-card>
-                </div>
-
-            </el-col>
-        </el-row>
-        <!-- 第三行 -->
-        <el-row :gutter="20">
-            <el-col :span="4">
-                <div class="block">
-                    <span class="text">加速状态</span></br>
-                    <el-button type="primary">选择数据范围</el-button></br>
-                    <el-button type="primary" >数据分析</el-button></br>
-                    <el-button type="primary">详细数据</el-button></br>
-                </div>
-            </el-col>
-            <el-col :span="14">
-                <div class="block">
-                    <span class="threshold">超出阈值：0.83</span>
-                    <speed_status></speed_status>
-                </div>
-
-            </el-col>
-            <el-col :span="6">
-                <div class="block">
-                    <el-card>
-                        <span class="info">设备健康程度:{{health}}</span></br>
-                        <span class="info">安全隐患程度:{{danger}}</span></br>
-                        <span class="info">正常运行:{{normal_time}}</span></br>
-                        <span class="info">数值超标总时长:{{total_time}}</span></br>
-                   </el-card>
-                </div>
-
-            </el-col>
-        </el-row>
-        <!-- 第四行 -->
-        <el-row :gutter="20">
-            <el-col :span="4">
-                <div class="block">
-                    <span class="text">牵引速度</span></br>
-                    <el-button type="primary">选择数据范围</el-button></br>
-                    <el-button type="primary" >数据分析</el-button></br>
-                    <el-button type="primary">详细数据</el-button></br>
-                </div>
-            </el-col>
-            <el-col :span="14">
-                <div class="block">
-                    <span class="threshold">超出阈值：0.83</span>
-                    <pulling_speed></pulling_speed>
-                </div>
-
-            </el-col>
-            <el-col :span="6">
-                <div class="block">
-                    <el-card>
-                        <span class="info">设备健康程度:{{health}}</span></br>
-                        <span class="info">安全隐患程度:{{danger}}</span></br>
-                        <span class="info">正常运行:{{normal_time}}</span></br>
-                        <span class="info">数值超标总时长:{{total_time}}</span></br>
-                   </el-card>
-                </div>
-
-            </el-col>
-        </el-row>
-        
+    
+    
 <!-- 分页区域 -->
 <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage4" :page-sizes="[1, 2, 5, 10]" :page-size="1" layout="total, sizes, prev, pager, next, jumper" :total="4">
 </el-pagination>
-<analysisDia v-if="moreVisible" ref="moreDialog"></analysisDia>
 <beltbodyRow style="margin-top: 185px;margin-left: 10px;" :property="property" :health="health" :danger="danger" :normal_time="normal_time" :total_time="total_time"></beltbodyRow>
     </div> 
    
 </template>
 <script>
     // import beltbodyRow from "@/views/transportation/subSystem/beltbody/beltbodyRow.vue";
-    import analysisDia from "./analysisDia.vue";
-    import direction from '@/components/transportation/coalCentral/belt_body/direction.vue'
     import pull_status from '@/components/transportation/coalCentral/belt_body/pull_status.vue'
     import pulling_speed from '@/components/transportation/coalCentral/belt_body/pulling_speed.vue'
+    import direction from '@/components/transportation/coalCentral/belt_body/direction.vue'
     import speed_status from '@/components/transportation/coalCentral/belt_body/speed_status.vue'
     export default {
         name: "coalcutter",
@@ -176,7 +56,6 @@
             pull_status,
             pulling_speed,
             speed_status,
-            analysisDia,
             beltbodyRow
 
         },

src/views/transportation/subSystem/beltbody/beltbodyRow.vue

@@ -1,20 +1,19 @@
 <template>
-<!-- 第一行 -->
 <el-row :gutter="20">
     <el-col :span="4">
         <div class="block">
-            <span class="text">{{property}}</span></br>
+            <span class="text">{{propertyItem}}</span></br>
             <el-select style="width: 120px; margin-left: 25px" v-model="dataRange" placeholder="请选择数据范围">
                 <el-option v-for="item in dataRangeItems" :key="item.value" :label="item.label" :value="item.value">
                 </el-option>
             </el-select>
-            <el-button type="primary" @click="dataAnalysis()">数据分析</el-button>
-            <el-button type="primary" @click="openDetail()">详细数据</el-button>
+            <el-button type="primary">数据分析</el-button>
+            <el-button type="primary" >详细数据</el-button>
         </div>
     </el-col>
     <el-col :span="14">
         <div class="block">
-            <span class="threshold" @click="beyondthreshold()">超出阈值：0.83</span>
+            <span class="threshold">超出阈值：0.83</span>
             <direction></direction>
         </div>
 
@@ -22,10 +21,10 @@
     <el-col :span="6">
         <div class="block">
             <el-card>
-                <span class="info">设备健康程度:{{health}}</span></br>
-                <span class="info">安全隐患程度:{{danger}}</span></br>
-                <span class="info">正常运行:{{normal_time}}</span></br>
-                <span class="info">数值超标总时长:{{total_time}}</span></br>
+                <span class="info">设备健康程度:{{healthItem}}</span></br>
+                <span class="info">安全隐患程度:{{dangerItem}}</span></br>
+                <span class="info">正常运行:{{normal_timeItem}}</span></br>
+                <span class="info">数值超标总时长:{{total_timeItem}}</span></br>
            </el-card>
         </div>
     </el-col>
@@ -33,6 +32,8 @@
 <analysisDia v-if="moreVisible" ref="moreDialog"></analysisDia>
 </template>
 <script>
+    import analysisDia from "./analysisDia.vue";
+    import direction from '@/components/transportation/coalCentral/belt_body/direction.vue'
     export default {
         name: "beltbodyRow",
         data() {
@@ -69,24 +70,11 @@
             this.total_timeItem = this.total_time;
         },
         methods: {
-            // 打开详细数据页面
-            openDetail() {
-                this.$router.push({
-                    path: '/detail'
-                })
-            },
-            dataAnalysis() {
-                this.moreVisible = true;
-                this.$nextTick(() => {
-                    this.$refs.moreDialog.init();
-                });
-            },
-            // 超出阈值
-            beyondthreshold() {
-                this.$router.push({
-                    path: '/threshold'
-                })
-            }
-        }
+
+        },
+        components: {
+            analysisDia,
+            direction
+        },
     }
 </script>

src/views/tunnelling/systemData.vue

@@ -104,11 +104,11 @@
         },
         methods: {
             handleSizeChange(newSize) {
-                console.log(newSize)
+                // console.log(newSize)
             },
             //监听 页码值 改变的事件
             handleCurrentChange(newPage) {
-                console.log(newPage)
+                // console.log(newPage)
             }
         }
     }