Merge branch 'master' of https://gitee.com/qinnamin/large_screen

src/views/mining/systemData.vue

@@ -1,127 +1,127 @@
 <template>
-	<div>
-		<div v-if="this.$router.currentRoute.path=='/coal_mining'">
-			<el-breadcrumb separator-class="el-icon-arrow-right">
-				<el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
-				<el-breadcrumb-item :to="{ path: '/coal_mining'}">采煤工作面</el-breadcrumb-item>
-				<el-breadcrumb-item>系统数据</el-breadcrumb-item>
-			</el-breadcrumb>
-		</div>
-
-		<div class="top">
-			<el-button type="primary" @click="coalcutter">采煤机</el-button>
-		</div>
-		<!-- 第一行 -->
-		<el-row :gutter="20">
-      <!-- 1-1 采煤工作面设备摘要 -->
-			<el-col :span="8">
-				<div class="grid-content ">
-					<el-card style="width: 330px;">
-						<div class="text">采煤机工作面设备摘要</div>
-						<el-divider class="divi"></el-divider>
-						<el-row :gutter="20">
-							<el-col :span="12">
-								<div style="border-right: 1px solid #9d9aab; width: 140px; ">
-									<span style="font-size: 30px;font-weight:normal;">{{coal_abstract.num}}</span>
-									</br>
-									<span style="font-size: 20px;">{{coal_abstract.name}}</span>
-								</div>
-							</el-col>
-							<el-col :span="12">
-								<div v-for="item in options"  style="justify-content:space-evenly;">
-									<span style="font-size: 14px; ">{{item.name}}</span>
-									&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
-									<span style="font-size: 14px;">{{item.num}}</span>
-								</div>
-							</el-col>
-						</el-row>
-					</el-card>
-		
-				</div>
-			</el-col>
-      <!-- 1-2 液压支架压力 折线图 -->
-			<el-col :span="8">
-				<div class="grid-content ">
-          <el-card style="width: 330px;">
-            <pressure></pressure>
-          
-        </el-card>
-				</div>
-			</el-col>
-      <!-- 1-3 健康状态 -->
-			<el-col :span="8">
-				<div class="grid-content">
-					<el-card style="width: 330px;">
-            <div class="text">健康状态</div>
-            <el-divider class="divi_small"></el-divider>
-             <img style="margin-left:110px;" src="@/assets/img/warn.png" alt="warn">
-             <el-divider class="divi_small"></el-divider>
-        <div style="display:flex;justify-content: space-around;">
-            <span style="font-size: small;">牵引</span>
-             <img style="margin-left:110px;" src="@/assets/img/u1371.png" alt="u1371">
-        </div>
-        <el-divider class="divi_small"></el-divider>
-        <div style="display:flex;justify-content: space-around;">
-            <span style="font-size: small;">摇臂</span>
-             <img style="margin-left:110px;" src="@/assets/img/u1371.png" alt="u1373">
-        </div>
-        <el-divider class="divi_small"></el-divider>
-        <div style="display:flex;justify-content: space-around;">
-            <span style="font-size: small;">主泵</span>
-             <img style="margin-left:110px;" src="@/assets/img/u1371.png" alt="u1371">
-        </div>
-             
-        </el-card>
-				</div>
-			</el-col>
-		</el-row>
-    <!-- 第二行 -->
-    <el-row :gutter="20">
-      <!-- 2-1  瓦斯浓度  折线图 -->
-			<el-col :span="8">
-				<div class="grid-content ">
-					<el-card style="width: 330px;">
-						<gas_concentration></gas_concentration>
-					</el-card>
-		
-				</div>
-			</el-col>
-      <!-- 2-2 浮尘浓度 折线图 -->
-			<el-col :span="8">
-				<div class="grid-content ">
-          <el-card style="width: 330px;">
-            <dust_concentration></dust_concentration>
-        </el-card>
-				</div>
-			</el-col>
-      <!-- 2-3 警报信息  -->
-			<el-col :span="8">
-				<div class="grid-content">
-          <el-card style="width: 330px;">
-            <div class="text">警报信息</div>
-            <el-divider class="divi_small"></el-divider>
-            <img style="margin-left:110px;" src="@/assets/img/u1399.png" alt="u1399">
-            <el-divider class="divi_small"></el-divider>
-            <div style="display:flex;justify-content: space-around;">
+  <el-container>
+    <el-header>
+      <div v-if="this.$router.currentRoute.path=='/coal_mining'">
+        <el-breadcrumb separator-class="el-icon-arrow-right">
+          <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
+          <el-breadcrumb-item :to="{ path: '/coal_mining'}">采煤工作面</el-breadcrumb-item>
+          <el-breadcrumb-item>系统数据</el-breadcrumb-item>
+        </el-breadcrumb>
+      </div>
+    </el-header>
+
+    <el-main>
+      <div class="top">
+        <el-button type="primary" @click="coalcutter">采煤机</el-button>
+      </div>
+
+      <el-row :gutter="20">
+        <!-- 1-1 采煤工作面设备摘要 -->
+        <el-col :span="8">
+          <div class="grid-content ">
+            <el-card style="width: 330px;">
+              <div class="text">采煤机工作面设备摘要</div>
+              <el-divider class="divi"></el-divider>
+              <el-row :gutter="20">
+                <el-col :span="12">
+                  <div style="border-right: 1px solid #9d9aab; width: 140px; ">
+                    <span style="font-size: 30px;font-weight:normal;">{{coal_abstract.num}}</span>
+                    <br>
+                    <span style="font-size: 20px;">{{coal_abstract.name}}</span>
+                  </div>
+                </el-col>
+                <el-col :span="12">
+                  <div v-for="item in options"  style="justify-content:space-evenly;">
+                    <span style="font-size: 14px; ">{{item.name}}</span>
+                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
+                    <span style="font-size: 14px;">{{item.num}}</span>
+                  </div>
+                </el-col>
+              </el-row>
+            </el-card>
+
+          </div>
+        </el-col>
+        <!-- 1-2 液压支架压力 折线图 -->
+        <el-col :span="8">
+          <div class="grid-content ">
+            <el-card style="width: 330px;">
+              <pressure></pressure>
+
+            </el-card>
+          </div>
+        </el-col>
+        <!-- 1-3 健康状态 -->
+        <el-col :span="8">
+          <div class="grid-content">
+            <el-card style="width: 330px;">
+              <div class="text">健康状态</div>
+              <el-divider class="divi_small"></el-divider>
+              <img style="margin-left:110px;" src="@/assets/img/warn.png" alt="warn">
+              <el-divider class="divi_small"></el-divider>
+              <div style="display:flex;justify-content: space-around;">
+                <span style="font-size: small;">牵引</span>
+                <img style="margin-left:110px;" src="@/assets/img/u1371.png" alt="u1371">
+              </div>
+              <el-divider class="divi_small"></el-divider>
+              <div style="display:flex;justify-content: space-around;">
+                <span style="font-size: small;">摇臂</span>
+                <img style="margin-left:110px;" src="@/assets/img/u1371.png" alt="u1373">
+              </div>
+              <el-divider class="divi_small"></el-divider>
+              <div style="display:flex;justify-content: space-around;">
+                <span style="font-size: small;">主泵</span>
+                <img style="margin-left:110px;" src="@/assets/img/u1371.png" alt="u1371">
+              </div>
+
+            </el-card>
+          </div>
+        </el-col>
+      </el-row>
+
+      <!-- 第二行 -->
+      <el-row :gutter="20">
+        <!-- 2-1  瓦斯浓度  折线图 -->
+        <el-col :span="8">
+          <div class="grid-content ">
+            <el-card style="width: 330px;">
+              <gas_concentration></gas_concentration>
+            </el-card>
+
+          </div>
+        </el-col>
+        <!-- 2-2 浮尘浓度 折线图 -->
+        <el-col :span="8">
+          <div class="grid-content ">
+            <el-card style="width: 330px;">
+              <dust_concentration></dust_concentration>
+            </el-card>
+          </div>
+        </el-col>
+        <!-- 2-3 警报信息  -->
+        <el-col :span="8">
+          <div class="grid-content">
+            <el-card style="width: 330px;">
+              <div class="text">警报信息</div>
+              <el-divider class="divi_small"></el-divider>
+              <img style="margin-left:110px;" src="@/assets/img/u1399.png" alt="u1399">
+              <el-divider class="divi_small"></el-divider>
+              <div style="display:flex;justify-content: space-around;">
                 <span style="font-size: small;">牵引</span>
                 <span style="font-size: small;">2021.1.20 12:25 &nbsp;&nbsp;&nbsp;重启</span>
-            </div>
-            <el-divider class="divi_small"></el-divider>
-            <div style="display:flex;justify-content: space-around;">
+              </div>
+              <el-divider class="divi_small"></el-divider>
+              <div style="display:flex;justify-content: space-around;">
                 <span style="font-size: small;">主泵</span>
                 <span style="font-size: small;">2021.1.19 17:56 &nbsp;&nbsp;&nbsp;关机</span>
-            </div>
-
-        </el-card>
-				</div>
-			</el-col>
-		</el-row>
-		
-		
-	
-	</div>
-
-	
+              </div>
+
+            </el-card>
+          </div>
+        </el-col>
+      </el-row>
+    </el-main>
+  </el-container>
 </template>
 
 
@@ -180,7 +180,7 @@
         /* border: 1px solid rgb(139, 136, 136); */
         height: 185px;
     }
-    
+
     .el-card {
         background: #FFFFFF;
         border-radius: 8px;
@@ -190,7 +190,7 @@
         margin-left: 5px;
         box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04)
     }
-    
+
     .divi {
         display: block;
         height: 1px;
@@ -200,7 +200,7 @@
         position: relative;
         font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
     }
-    
+
     .divi_small {
         display: block;
         height: 1px;
@@ -210,4 +210,4 @@
         position: relative;
         font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
     }
-</style>
+</style>

src/views/monitor/checkCheckPoint.vue

@@ -5,134 +5,152 @@
         <el-breadcrumb separator-class="el-icon-arrow-right">
           <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
           <el-breadcrumb-item :to="{ path: '/monitor'}">安全监控</el-breadcrumb-item>
-          <el-breadcrumb-item><span @click="back" style="font-weight: bold">{{ sub_system_name }}</span></el-breadcrumb-item>
+          <el-breadcrumb-item :to="{ path: '/checkSubSys'}">{{ sub_system_name }}</el-breadcrumb-item>
           <el-breadcrumb-item>{{ check_point_name }}</el-breadcrumb-item>
         </el-breadcrumb>
       </div>
     </el-header>
 
-    <el-divider class="divi"></el-divider>
+    <el-main>
+      <el-row>
+        <check-point-info v-bind="dg1"></check-point-info>
+      </el-row>
+      <el-row>
+        <check-point-info v-bind="dg2"></check-point-info>
+      </el-row>
+      <el-row>
+        <check-point-info v-bind="dg3"></check-point-info>
+      </el-row>
+      <el-row>
+        <check-point-info v-bind="dg4"></check-point-info>
+      </el-row>
+      <el-row>
+        <check-point-info v-bind="dg4"></check-point-info>
+      </el-row>
+    </el-main>
+
+<!--    <el-divider class="divi"></el-divider>-->
     <!-- 第一行 -->
-    <el-row :gutter="20">
-      <el-col :span="4">
-        <div class="block">
-          <span class="text">牵引方向</span></br>
+<!--    <el-row :gutter="20">-->
+<!--      <el-col :span="4">-->
+<!--        <div class="block">-->
+<!--          <span class="text">牵引方向</span></br>-->
+<!--&lt;!&ndash;          <el-button type="primary">选择数据范围</el-button></br>&ndash;&gt;-->
+<!--          <el-dropdown size="mini" split-button type="primary">-->
+<!--            选择数据范围-->
+<!--            <el-dropdown-menu slot="dropdown">-->
+<!--              <el-dropdown-item>十分钟</el-dropdown-item>-->
+<!--              <el-dropdown-item>一小时</el-dropdown-item>-->
+<!--              <el-dropdown-item>六小时</el-dropdown-item>-->
+<!--              <el-dropdown-item>近 天</el-dropdown-item>-->
+<!--            </el-dropdown-menu>-->
+<!--          </el-dropdown>-->
+<!--          <el-button type="primary" >数据分析</el-button></br>-->
+<!--          <el-button type="primary">详细数据</el-button></br>-->
+<!--        </div>-->
+<!--      </el-col>-->
+<!--      <el-col :span="14">-->
+<!--        <div class="block">-->
+<!--          <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>-->
+<!--    &lt;!&ndash; 第二行 &ndash;&gt;-->
+<!--    <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">-->
+<!--          <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>-->
+<!--    &lt;!&ndash; 第三行 &ndash;&gt;-->
+<!--    <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">-->
+<!--          <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>-->
+<!--    &lt;!&ndash; 第四行 &ndash;&gt;-->
+<!--    <el-row :gutter="20">-->
+<!--      <el-col :span="4">-->
+<!--        <div class="block">-->
+<!--          <span class="text">牵引速度</span></br>-->
 <!--          <el-button type="primary">选择数据范围</el-button></br>-->
-          <el-dropdown size="mini" split-button type="primary">
-            选择数据范围
-            <el-dropdown-menu slot="dropdown">
-              <el-dropdown-item>十分钟</el-dropdown-item>
-              <el-dropdown-item>一小时</el-dropdown-item>
-              <el-dropdown-item>六小时</el-dropdown-item>
-              <el-dropdown-item>近 天</el-dropdown-item>
-            </el-dropdown-menu>
-          </el-dropdown>
-          <el-button type="primary" >数据分析</el-button></br>
-          <el-button type="primary">详细数据</el-button></br>
-        </div>
-      </el-col>
-      <el-col :span="14">
-        <div class="block">
-          <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">
-          <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">
-          <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">
-          <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-button type="primary" >数据分析</el-button></br>-->
+<!--          <el-button type="primary">详细数据</el-button></br>-->
+<!--        </div>-->
+<!--      </el-col>-->
+<!--      <el-col :span="14">-->
+<!--        <div class="block">-->
+<!--          <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">
@@ -141,57 +159,90 @@
 </template>
 
 <script>
-    import direction from '@/components/mining/main_bump/direction.vue'
-    import pull_status from '@/components/mining/main_bump/pull_status.vue'
-    import pulling_speed from '@/components/mining/main_bump/pulling_speed.vue'
-    import speed_status from '@/components/mining/main_bump/speed_status.vue'
-    export default {
-        name: "checkCheckPoint",
-        data() {
-            return {
-                check_point_name: '',
-                sub_system_name: '',
-                health: '健康',
-                danger: '较低',
-                normal_time: '9天',
-                total_time: '20s'
-            }
-        },
-        components: {
-            direction,
-            pull_status,
-            pulling_speed,
-            speed_status
 
+  import direction from '@/components/mining/main_bump/direction.vue'
+  import pull_status from '@/components/mining/main_bump/pull_status.vue'
+  import pulling_speed from '@/components/mining/main_bump/pulling_speed.vue'
+  import speed_status from '@/components/mining/main_bump/speed_status.vue'
+  import checkPointInfo from "./checkPointInfo";
+  export default {
+    name: "checkCheckPoint",
+    data() {
+      return {
+        check_point_name: '',
+        sub_system_name: '',
+        // health: '健康',
+        // danger: '较低',
+        // normal_time: '9天',
+        // total_time: '20s',
+        dg1: {
+          name: '牵引方向',
+          health: '健康',
+          danger: '较低',
+          normal_time: '9天',
+          total_time: '20s',
         },
-        methods: {
-            // 监听 pagesize 改变的事件
-            handleSizeChange(newSize) {
-                console.log(newSize)
-            },
-            //监听 页码值 改变的事件
-            handleCurrentChange(newPage) {
-                console.log(newPage)
-            },
-            back() {
-                // this.$router.go(-1);
-
-                console.log(this.sub_system_name)
-                this.$router.push({
-                    path: '/checkSubSys',
-                    name: '查看子系统',
-                    params: {
-                        key: 'key',
-                        value: this.sub_system_name
-                    }
-                })
-            }
+        dg2: {
+          name: '牵引状态',
+          health: '健康',
+          danger: '较低',
+          normal_time: '9天',
+          total_time: '20s',
         },
-        mounted() {
-            this.check_point_name = this.$route.params.value[0];
-            this.sub_system_name = this.$route.params.value[1];
+        dg3: {
+          name: '加速状态',
+          health: '健康',
+          danger: '较低',
+          normal_time: '9天',
+          total_time: '20s',
+        },
+        dg4: {
+          name: '牵引速度',
+          health: '健康',
+          danger: '较低',
+          normal_time: '9天',
+          total_time: '20s',
         }
+      }
+    },
+    components: {
+      direction,
+      pull_status,
+      pulling_speed,
+      speed_status,
+      checkPointInfo
+    },
+    methods: {
+      // 监听 pagesize 改变的事件
+      handleSizeChange(newSize) {
+        console.log(newSize)
+      },
+      //监听 页码值 改变的事件
+      handleCurrentChange(newPage) {
+        console.log(newPage)
+      },
+      // back() {
+      //   // this.$router.go(-1);
+      //
+      //   console.log(this.sub_system_name)
+      //   this.$router.push({
+      //     path: '/checkSubSys',
+      //     name: '查看子系统',
+      //     params: {
+      //       key: 'key',
+      //       value: this.sub_system_name
+      //     }
+      //   })    }
+    },
+    mounted() {
+      // this.check_point_name = this.$route.params.value[0];
+      // this.sub_system_name = this.$route.params.value[1];
+      const subSystemName = window.sessionStorage.getItem("subSystemName");
+      const checkPointName = window.sessionStorage.getItem("checkPointName");
+      this.sub_system_name = subSystemName;
+      this.check_point_name = checkPointName;
     }
+  }
 </script>
 
 <style scoped>
@@ -204,30 +255,30 @@
         position: relative;
         font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
     }
-    
+
     .block {
         height: 140px;
         /* background-color: burlywood */
     }
-    
+
     .el-button {
         margin: 3px;
         margin-left: 25px;
         width: 120px;
     }
-    
+
     .text {
         font-size: 13px;
         font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
         font-weight: bolder;
         margin-left: 50px;
     }
-    
+
     .info {
         font-size: 13px;
         font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
     }
-    
+
     .el-card {
         background: #ffffff;
         border-radius: 8px;
@@ -236,4 +287,4 @@
         margin-top: 8px;
         box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04)
     }
-</style>
+</style>

src/views/monitor/checkPointInfo.vue

@@ -0,0 +1,79 @@
+<template>
+  <el-row :gutter="20">
+    <el-col :span="4">
+      <div class="block">
+        <span class="text">{{name}}</span><br>
+<!--        <el-button type="primary">选择数据范围</el-button><br>-->
+        <el-dropdown size="mini" split-button type="primary">
+          选择数据范围
+          <el-dropdown-menu slot="dropdown">
+            <el-dropdown-item>十分钟</el-dropdown-item>
+            <el-dropdown-item>一小时</el-dropdown-item>
+            <el-dropdown-item>六小时</el-dropdown-item>
+            <el-dropdown-item>近 天</el-dropdown-item>
+          </el-dropdown-menu>
+        </el-dropdown>
+        <el-button type="primary" >数据分析</el-button><br>
+        <el-button type="primary">详细数据</el-button><br>
+      </div>
+    </el-col>
+    <el-col :span="14">
+      <div class="block">
+        <direction></direction>
+<!--        <dataGraph v-bind="dg"></dataGraph>-->
+      </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>
+</template>
+
+<script>
+  import dataGraph from "./dataGraph";
+  import direction from "../../components/mining/main_bump/direction";
+  export default {
+    name: "checkPointInfo",
+    components: {dataGraph, direction},
+    props: [
+      'name',
+      'health',
+      'danger',
+      'normal_time',
+      'total_time'
+    ],
+    data() {
+      return {
+        // dg: {
+        //   data_unit: "KN",
+        //   Y_scale: "1",
+        //   X_data: ['16:20', '16:21', '16:22', '16:23', '16:24', '16:25', '16:26', '16:27'],
+        //   Y_data: [0.44, 0.40, 0.23, 0.60, 0.50, 0.53, 0.83, 0.5],
+        //   time_BT: '16:26',
+        //   threshold: 0.8
+        // }
+      }
+    }
+  }
+</script>
+
+<style scoped>
+  .block {
+    height: 140px;
+    /* background-color: burlywood */
+  }
+  .el-button {
+    margin: 3px;
+    margin-left: 25px;
+    width: 120px;
+  }
+</style>

src/views/monitor/checkSubSys.vue

@@ -18,7 +18,7 @@
         <span style="font-size: 24px;">{{item.num}}</span>
       </div>
       <e-card>
-        <el-table :data="tableData" style="width: 100%" border stripe @cell-click="checkSubSys">
+        <el-table :data="tableData" style="width: 100%" border stripe>
           <el-table-column type="index" label="序号" header-align="center" align="center" width="160">
           </el-table-column>
           <el-table-column prop="check_point_name" label="测点数据" header-align="center" align="center" width="180">
@@ -27,19 +27,19 @@
           </el-table-column>
           <el-table-column label="操作" header-align="center" align="center" width="180">
             <template slot-scope="scope">
-              <el-button type="text" size="small" @click="watch(scope.row)">查看</el-button>
+              <el-button type="text" size="small" @click="checkCheckPointEnv(scope.row)">查看</el-button>
             </template>
-</el-table-column>
-<el-table-column prop="remark" label="备注" header-align="center" align="center" width="180">
-</el-table-column>
-</el-table>
-<!-- 分页区域 -->
-<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage1" :page-sizes="[1, 2, 5, 10]" :page-size="1" layout="total, sizes, prev, pager, next, jumper" :total="9">
-</el-pagination>
-</e-card>
+          </el-table-column>
+          <el-table-column prop="remark" label="备注" header-align="center" align="center" width="180">
+          </el-table-column>
+        </el-table>
+        <!-- 分页区域 -->
+        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage1" :page-sizes="[1, 2, 5, 10]" :page-size="1" layout="total, sizes, prev, pager, next, jumper" :total="9">
+        </el-pagination>
+      </e-card>
 
-</el-main>
-</el-container>
+    </el-main>
+  </el-container>
 </template>
 
 <script>
@@ -106,20 +106,22 @@
             handleCurrentChange(newPage) {
                 console.log(newPage)
             },
-            watch(row) {
-                console.log(row.check_point_name)
+            checkCheckPointEnv(row) {
                 this.$router.push({
                     path: '/checkCheckPoint',
                     name: '查看测点数据',
-                    params: {
-                        key: 'key',
-                        value: [row.check_point_name, this.sub_system_name]
-                    }
-                })
+                    // params: {
+                    //     key: 'key',
+                    //     value: [row.check_point_name, this.sub_system_name]
+                    // }
+                });
+                window.sessionStorage.setItem("checkPointName", row.check_point_name);
             },
         },
         mounted() {
-            this.sub_system_name = this.$route.params.value;
+            // this.sub_system_name = this.$route.params.value;
+            const name = window.sessionStorage.getItem("subSystemName");
+            this.sub_system_name = name;
         }
     }
 </script>
@@ -134,4 +136,4 @@
         text-align: center;
         display: inline-block;
     }
-</style>
+</style>

src/views/monitor/dataGraph.vue

@@ -0,0 +1,145 @@
+<template>
+  <div class="com-chart" ref="dataGraph"></div>
+</template>
+
+<script>
+  export default {
+    name: "dataGraph",
+    props: [
+      'data_unit',
+      'Y_scale',
+      'X_data',
+      'Y_data',
+      'time_BT',
+      'threshold',
+    ],
+    data() {
+      return {
+        myChart: null
+      }
+    },
+    mounted() {
+      this.initCharts();
+      this.updateChart();
+    },
+    methods: {
+      // 初始化图表
+      initCharts() {
+        this.myChart = this.$echarts.init(this.$refs.direction)
+      },
+      // 更新图表
+      updateChart() {
+        const option = {
+          tooltip: {
+            trigger: 'axis',
+          },
+          legend: {
+            data: [this.data_unit]
+          },
+          grid: {
+            top: '15%',
+            left: '1%',
+            right: '4%',
+            bottom: '3%',
+            containLabel: true
+          },
+          xAxis: [{
+            type: 'category',
+            boundaryGap: false,
+            // data: ['16:20', '16:21', '16:22', '16:23', '16:24', '16:25', '16:26', '16:27'],
+            data: this.X_data,
+            // 修改x轴文字颜色和大小
+            axisLabel: {
+              textStyle: {
+                color: "rgba(187, 174, 200, 1)",
+                fontSize: "12"
+              }
+            },
+            // 修改分割线的颜色
+            splitLine: {
+              lineStyle: {
+                color: "rgba(199, 186, 212, 0.3)",
+              }
+            }
+          }],
+          yAxis: [{
+            type: 'value',
+            // axisTick: { show: false },
+            axisLine: {
+              // 修改Y轴坐标轴颜色
+              lineStyle: {
+                color: "rgba(187, 174, 200, 1)",
+
+              }
+            },
+            axisLabel: {
+              //修改y轴数据颜色
+              textStyle: {
+                color: "rgba(187, 174, 200, 1)",
+                fontSize: 12
+              }
+            },
+            // 修改分割线的颜色
+            splitLine: {
+              lineStyle: {
+                color: "rgba(199, 186, 212, 0.3)",
+              }
+            }
+          }
+
+          ],
+          series: [{
+            // name: '采煤机平均采煤量',
+            type: 'line',
+            smooth: true,
+            // 单独修改当前线条的样式
+            lineStyle: {
+              color: "#0097e3",
+              width: "2"
+            },
+            // 设置拐点
+            symbol: "circle",
+            // 拐点大小
+            symbolSize: 3,
+            // 开始不显示拐点， 鼠标经过显示
+            showSymbol: false,
+            // 设置拐点颜色以及边框
+            itemStyle: {
+              color: "#0184d5",
+              borderColor: "rgba(0, 170, 255, 0.1)",
+              borderWidth: 6
+            },
+            emphasis: {
+              focus: 'series'
+            },
+            //data: [0.44, 0.40, 0.23, 0.60, 0.50, 0.53, 0.83, 0.5]
+            data: this.Y_data
+          }, {
+            name: '阈值',
+            type: 'line',
+            smooth: true,
+            // 单独修改当前线条的样式
+            lineStyle: {
+              color: "#c1bed1",
+              width: "2"
+            },
+            symbol: "none",
+            // emphasis: {
+            //     focus: 'series'
+            // },
+            //data: [0.8, 0.8, 0.8, 0.8, 0.8, 0.8, 0.8, 0.8]
+            data: [this.threshold, this.threshold, this.threshold, this.threshold, this.threshold, this.threshold,
+              this.threshold, this.threshold]
+          }]
+        };
+        this.myChart.setOption(option);
+      }
+    }
+  }
+</script>
+
+<style scoped>
+  .com-chart {
+    height: 145px;
+  }
+</style>

src/views/monitor/systemData.vue

@@ -19,7 +19,7 @@
       </div>
 
       <el-card>
-        <el-table :data="tableData" style="width: 100%" border stripe @cell-click="checkSubSys">
+        <el-table :data="tableData" style="width: 100%" border stripe>
           <el-table-column type="index" label="序号" header-align="center" align="center" width="180">
           </el-table-column>
           <el-table-column prop="sub_system_name" label="子系统名称" header-align="center" align="center" width="200">
@@ -28,18 +28,18 @@
           </el-table-column>
           <el-table-column label="操作" header-align="center" align="center" width="180">
             <template slot-scope="scope">
-              <el-button type="text" size="small" @click="watch(scope.row)">查看</el-button>
+              <el-button type="text" size="small" @click="checkSubSysEnv(scope.row)">查看</el-button>
             </template>
-</el-table-column>
-<el-table-column prop="remark" label="备注" header-align="center" align="center" width="180">
-</el-table-column>
-</el-table>
-<!-- 分页区域 -->
-<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage1" :page-sizes="[1, 2, 5, 10]" :page-size="1" layout="total, sizes, prev, pager, next, jumper" :total="9">
-</el-pagination>
-</el-card>
-</el-main>
-</el-container>
+          </el-table-column>
+          <el-table-column prop="remark" label="备注" header-align="center" align="center" width="180">
+          </el-table-column>
+        </el-table>
+        <!-- 分页区域 -->
+        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage1" :page-sizes="[1, 2, 5, 10]" :page-size="1" layout="total, sizes, prev, pager, next, jumper" :total="9">
+        </el-pagination>
+      </el-card>
+    </el-main>
+  </el-container>
 
 </template>
 
@@ -112,29 +112,16 @@
             handleCurrentChange(newPage) {
                 // console.log(newPage)
             },
-            watch(row) {
-                console.log(row.sub_system_name)
+            checkSubSysEnv(row) {
                 this.$router.push({
                     path: '/checkSubSys',
                     name: '查看子系统',
-                    params: {
-                        key: 'key',
-                        value: row.sub_system_name
-                    }
+                    // params: {
+                    //     key: 'key',
+                    //     value: row.sub_system_name
+                    // }
                 })
-            },
-            checkSubSys(row, column) {
-                if (column.label == "子系统名称") {
-                    console.log(row.sub_system_name)
-                    this.$router.push({
-                        path: '/checkSubSys',
-                        name: '查看子系统',
-                        params: {
-                            key: 'key',
-                            value: row.sub_system_name
-                        }
-                    })
-                }
+                window.sessionStorage.setItem("subSystemName", row.sub_system_name)
             }
         }
     }
@@ -150,4 +137,4 @@
         text-align: center;
         display: inline-block;
     }
-</style>
+</style>