安全监控组件

src/router.js

@@ -55,15 +55,31 @@ export default new Router({
             }, {
                 path: '/checkSubSys',
                 name: '查看子系统',
+                id: 1020,
                 hidden: true,
                 component: () =>
                     import ('./views/monitor/checkSubSys.vue')
             }, {
                 path: '/checkCheckPoint',
                 name: '查看测点数据',
+                id: 1021,
                 hidden: true,
                 component: () =>
                     import ('./views/monitor/checkCheckPoint.vue')
+            }, {
+                path: '/monitorDetail',
+                name: '查看测点数据',
+                id: 1022,
+                hidden: true,
+                component: () =>
+                    import ('./views/monitor/detail.vue')
+            }, {
+                path: '/monitorThreshold',
+                name: '查看超标数据',
+                id: 1024,
+                hidden: true,
+                component: () =>
+                    import ('./views/monitor/monitorThreshold.vue')
             }, {
                 path: '/transportation',
                 name: ' 主运输系统',
@@ -320,4 +336,4 @@ export default new Router({
             hidden: false,
         }]
     }]
-})
+})

src/views/monitor/analysisDia.vue

@@ -0,0 +1,157 @@
+<template>
+    <!-- 查看数据质量信息 -->
+    <el-dialog title="查看详细信息" :visible.sync="visible" width="65%" >
+    <!-- <div class="detail">
+        <div class="item">
+            <span class="info">测点名: {{checkForm.pointname}}</span></br>
+            <span class="info">测量数值: {{checkForm.num}}</span></br>
+            <span class="info">设备名: {{checkForm.deviceName}}</span></br>
+            <span class="info">设备描述: {{checkForm.describe}}</span></br>
+            <span class="info">所属设备: {{checkForm.device}}</span></br>
+            <span class="info">预警阈值: {{checkForm.threshold}}</span></br>
+            <span class="info">数据类型: {{checkForm.dataType}}</span></br>
+            <span class="info">工程单位: {{checkForm.unit}}</span></br>
+            <span class="info">采集频率: {{checkForm.frequency}}</span></br>
+            <span class="info">备注: {{checkForm.remark}}</span></br>
+            <span class="info">数据质量: {{checkForm.dataQuality}}</span>
+        </div>
+        <div class="item ">2</div>
+        <div class="item ">3</div>
+        <div class="item ">4</div>
+    </div> -->
+ 
+    <el-row style="background: #eeeeee" type="flex" justify="center">
+        <el-col >
+            <el-card class="box-card" shadow="never">
+                
+                <span class="info">测点名: </span>{{checkForm.pointname}}</br>
+                <span class="info">测量数值:</span>{{checkForm.num}}</br>
+                <span class="info">设备名: </span>{{checkForm.deviceName}}</br>
+                <span class="info">设备描述: </span>{{checkForm.describe}}</br>
+                <span class="info">所属设备: </span>{{checkForm.device}}</br>
+                <span class="info">预警阈值: </span>{{checkForm.threshold}}</br>
+                <span class="info">数据类型: </span>{{checkForm.dataType}}</br>
+                <span class="info">工程单位: </span>{{checkForm.unit}}</br>
+                <span class="info">采集频率: </span>{{checkForm.frequency}}</br>
+                <span class="info">备注: </span>{{checkForm.remark}}</br>
+                <span class="info">数据质量: </span>{{checkForm.dataQuality}}
+            </el-card>
+
+            
+        </el-col>
+    </el-row>
+
+         <!-- <el-form :inline="true" ref="modifyForm" :model="checkForm">
+                
+                <el-form-item label="测点名" prop="pointname">
+                    <el-input style="width: 258px;" v-model="checkForm.pointname" disabled></el-input>
+                </el-form-item>
+                <el-form-item label="测量数值" prop="num">
+                    <el-input style="width: 258px;" v-model="checkForm.num" disabled></el-input>
+                </el-form-item>
+                <el-form-item label="设备名" prop="deviceName">
+                    <el-input style="width: 258px;" v-model="checkForm.deviceName" disabled></el-input>
+                </el-form-item>
+                <el-form-item label="设备描述" prop="describe">
+                    <el-input style="width: 258px;" v-model="checkForm.describe" disabled></el-input>
+                </el-form-item>
+                <el-form-item label="所属设备" prop="device">
+                    <el-input style="width: 258px;" v-model="checkForm.device" disabled></el-input>
+                </el-form-item>
+                <el-form-item label="预警阈值" prop="threshold">
+                    <el-input style="width: 258px;" v-model="checkForm.threshold" disabled></el-input>
+                </el-form-item>
+                <el-form-item label="数据类型" prop="dataType">
+                    <el-input style="width: 258px;" v-model="checkForm.dataType" disabled></el-input>
+                </el-form-item>
+                <el-form-item label="工程单位" prop="unit">
+                    <el-input style="width: 258px;" v-model="checkForm.unit" disabled></el-input>
+                </el-form-item>
+                <el-form-item label="采集频率" prop="frequency">
+                    <el-input style="width: 258px;" v-model="checkForm.frequency" disabled></el-input>
+                </el-form-item>
+                <el-form-item label="备注" prop="remark">
+                    <el-input style="width: 258px;" v-model="checkForm.remark" disabled></el-input>
+                </el-form-item>
+                <el-form-item label="数据质量" prop="dataQuality">
+                    <el-input style="width: 258px;" v-model="checkForm.dataQuality" disabled></el-input>
+                </el-form-item>
+            </el-form> -->
+    
+</el-dialog>
+</template>
+
+<script>
+    export default {
+        name: "checkSystem",
+        data() {
+            return {
+                visible: false,
+                checkForm: {
+                    pointname: '皮带张力',
+                    num: '0.52',
+                    deviceName: '皮带本体',
+                    describe: '全长5260m，带宽1.6m，带速4m/s，带强3150N/mm，运输能力3500t/h。',
+                    device: '电机本体',
+                    threshold: '0.8kN',
+                    dataType: '浮点',
+                    unit: 'kN',
+                    frequency: '1s',
+                    remark: '无',
+                    dataQuality: '高'
+                }
+            }
+        },
+        methods: {
+            init() {
+                this.visible = true;
+                // this.checkForm.pointname = id.pointname;
+                // this.checkForm.num = id.num;
+                // this.checkForm.deviceName = id.deviceName;
+                // this.checkForm.describe = id.describe;
+                // this.checkForm.device = id.device;
+                // this.checkForm.threshold = id.threshold;
+                // this.checkForm.dataType = id.dataType;
+                // this.checkForm.unit = id.unit;
+                // this.checkForm.frequency = id.frequency;
+                // this.checkForm.remark = id.remark;
+                // this.checkForm.dataQuality = id.dataQuality;
+            }
+        }
+    }
+</script>
+
+<style scoped>
+    .el-card {
+        background: #fbfbfb;
+        width: 400px;
+        /* 一行一行显示 */
+        display: inline-block;
+        margin: 5px;
+        border-radius: 20px;
+    }
+    /* .detail {
+        display: grid;
+        height: 620px;
+        width: 300px;
+        grid-template-columns: 425px 425px;
+        grid-template-rows: 310px 310px;
+        
+    } */
+    
+    .item {
+        font-size: 20px;
+        text-align: center;
+        text-justify: center;
+    }
+    
+    .info {
+        width: 415px;
+        font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
+        font-size: 14px;
+        /* text-align: left; */
+        /* float: left; */
+        margin-left: 5px;
+        color: cornflowerblue;
+    }
+</style>

src/views/monitor/checkCheckPoint.vue

@@ -24,133 +24,9 @@
       <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>-->
-<!--&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-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">

src/views/monitor/checkPointInfo.vue

@@ -1,51 +1,60 @@
 <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>
+	<div>
+		<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>
+                        <el-button type="primary">
+                            数据范围<i class="el-icon-arrow-down el-icon--right"></i>
+                        </el-button>
+                        <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" @click="dataAnalysis()">数据分析</el-button>
+					<el-button type="primary" @click="openDetail()">详细数据</el-button>
+				</div>
+			</el-col>
+			<el-col :span="14">
+                <div class="block">
+                    <!-- <direction></direction> -->
+                    <span class="threshold" @click="beyondthreshold()">超出阈值：0.83</span>
+                   <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>
+		<analysisDia v-if="moreVisible" ref="moreDialog"></analysisDia>
+	</div>
 </template>
 
+
 <script>
     import dataGraph from "./dataGraph";
     import direction from "../../components/mining/main_bump/direction";
+    import analysisDia from "./analysisDia.vue";
     export default {
         name: "checkPointInfo",
         components: {
             dataGraph,
-            direction
+            direction,
+            analysisDia
         },
         props: [
             'name',
@@ -56,15 +65,33 @@
         ],
         data() {
             return {
+                moreVisible: false,
                 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
                 }
             }
+        },
+        methods: {
+            dataAnalysis() {
+                this.moreVisible = true;
+                this.$nextTick(() => {
+                    this.$refs.moreDialog.init();
+                });
+            },
+            // 打开详细数据页面
+            openDetail() {
+                this.$router.push({
+                    path: '/monitorDetail'
+                })
+            },
+            // 超出阈值
+            beyondthreshold() {
+                this.$router.push({
+                    path: '/monitorThreshold'
+                })
+            }
         }
     }
 </script>
@@ -80,4 +107,17 @@
         margin-left: 25px;
         width: 120px;
     }
+    
+    .info {
+        font-size: 13px;
+        font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
+    }
+    
+    .threshold {
+        font-size: 13px;
+        font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
+        margin-left: 460px;
+        color: red;
+        cursor: pointer;
+    }
 </style>

src/views/monitor/dataGraph.vue

@@ -6,12 +6,9 @@
     export default {
         name: "dataGraph",
         props: [
-            'data_unit',
-            'Y_scale',
             'X_data',
             'Y_data',
-            'time_BT',
-            'threshold',
+            'threshold'
         ],
         data() {
             return {
@@ -30,14 +27,22 @@
             // 更新图表
             updateChart() {
                 const option = {
+                    // title: [{
+                    //     text: '超出阈值：0.83',
+                    //     right: '5%',
+                    //     textStyle: {
+                    //         fontSize: 12,
+                    //         color: "rgb(255, 0, 0)",
+                    //     },
+                    // }],
                     tooltip: {
                         trigger: 'axis',
                     },
-                    legend: {
-                        data: [this.data_unit]
-                    },
+                    // legend: {
+                    //     data: [this.data_unit]
+                    // },
                     grid: {
-                        top: '15%',
+                        top: '4%',
                         left: '1%',
                         right: '4%',
                         bottom: '3%',

src/views/monitor/detail.vue

@@ -0,0 +1,339 @@
+<!-- 皮带本体 详细数据 -->
+<template>
+    <div>
+        <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 :to="{ path: '/checkSubSys'}">{{ sub_system_name }}</el-breadcrumb-item>
+            <el-breadcrumb-item :to="{ path: '/checkCheckPoint'}">{{ check_point_name }}</el-breadcrumb-item>
+            <el-breadcrumb-item >详细数据</el-breadcrumb-item>
+        </el-breadcrumb>
+        <span class="text">数据测点：</span>
+        <div  class="checkpointbox" v-for="item in checkpoints" :key="item.id">
+            <el-button type="primary">{{item.name}}</el-button>    
+        </div>
+
+        <el-form :inline="true" >
+            <span style="font-size: 10px;">搜索：</span>
+            <el-select v-model="frequency" placeholder="请选择采集频率">
+                <el-option v-for="item in frequencyItems" :key="item.value" :label="item.label" :value="item.value">
+                </el-option>
+            </el-select>
+            <el-select v-model="unit" placeholder="请选择工程单位">
+                <el-option v-for="item in unitItems" :key="item.value" :label="item.label" :value="item.value">
+                </el-option>
+            </el-select>
+            <el-select v-model="threshold" placeholder="请选择预警阈值">
+                <el-option v-for="item in thresholdItems" :key="item.value" :label="item.label" :value="item.value">
+                </el-option>
+            </el-select>
+            <el-form-item>
+                <el-button type="primary">查询</el-button>
+            </el-form-item>
+            <el-form-item>
+                <el-button>重置</el-button>
+            </el-form-item>
+            <el-select v-model="dataTime" placeholder="请选择数据时间">
+                <el-option v-for="item in datatimes" :key="item.value" :label="item.label" :value="item.value">
+                </el-option>
+            </el-select>
+        </el-form>
+
+        <el-card>
+            <template>
+                <el-table :data="tableData" style="width: 100%" border stripe>
+                    
+                        <el-table-column prop="time" label="时间" header-align="center" align="center" width="130">
+                        </el-table-column>
+                        <el-table-column prop="dataType" label="数据类型" header-align="center" align="center" width="100">
+                        </el-table-column>
+                    
+                    
+                        <el-table-column prop="frequency" label="采集频率" header-align="center" align="center" width="100">
+                        </el-table-column>
+                        <el-table-column prop="value" label="测量数值" header-align="center" align="center" width="100">
+                        </el-table-column>
+                        <el-table-column prop="unit" label="工程单位" header-align="center" align="center" width="100">
+                        </el-table-column>
+                        <!-- <el-table-column prop="database" label="数据库" header-align="center" align="center" width="100">
+                        </el-table-column> -->
+                        <el-table-column prop="threshold" label="预警阈值" header-align="center" align="center" width="100">
+                        </el-table-column>
+                    
+                        <el-table-column label="数据质量信息" header-align="center" align="center" width="130">
+                            <template slot-scope="scope">
+                                <el-button type="text" size="small" @click="watch(scope.row)">点击查看明细</el-button>
+                            </template>
+</el-table-column>
+
+<el-table-column prop="classify" label="所属分类" header-align="center" align="center" width="100">
+</el-table-column>
+
+<el-table-column label="更多" header-align="center" align="center" width="100">
+    <template slot-scope="scope">
+            <el-button type="text" size="small" @click="more(scope.row)">...</el-button>
+        </template>
+</el-table-column>
+</el-table>
+</template>
+</el-table>
+
+<!-- 分页区域 -->
+<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="7">
+</el-pagination>
+</el-card>
+<detailDia v-if="detailVisible" ref="detailDialog"></detailDia>
+<more v-if="moreVisible" ref="moreDialog"></more>
+</div>
+</template>
+
+<script>
+    import detailDia from "./detailDia";
+    import more from "./more";
+    export default {
+        name: "detail",
+        data() {
+            return {
+                sub_system_name: '',
+                check_point_name: '',
+                checkpoints: [{
+                    id: 1,
+                    name: '运行'
+                }, {
+                    id: 2,
+                    name: '牵引方向'
+                }, {
+                    id: 3,
+                    name: '牵引方向'
+                }, {
+                    id: 4,
+                    name: '加速状态'
+                }],
+                frequencyItems: [{
+                    value: '选项1',
+                    label: '1s'
+                }, {
+                    value: '选项2',
+                    label: '2s'
+                }, {
+                    value: '选项3',
+                    label: '5s'
+                }],
+                unitItems: [{
+                    value: '选项1',
+                    label: 'kN'
+                }, {
+                    value: '选项2',
+                    label: 'KW'
+                }, {
+                    value: '选项3',
+                    label: 'KW/h'
+                }, {
+                    value: '选项4',
+                    label: 'm/s'
+                }],
+                thresholdItems: [{
+                    value: '选项1',
+                    label: '0.8'
+                }, {
+                    value: '选项2',
+                    label: '0.6'
+                }, {
+                    value: '选项3',
+                    label: '0.5'
+                }],
+                datatimes: [{
+                    value: '选项1',
+                    label: '近一天'
+                }, {
+                    value: '选项2',
+                    label: '近一周'
+                }, {
+                    value: '选项3',
+                    label: '近一月'
+                }, {
+                    value: '选项4',
+                    label: '近半年'
+                }, {
+                    value: '选项5',
+                    label: '近一年'
+                }],
+                tableData: [{
+                    time: '2020-1-20 9:41',
+                    dataType: '浮点',
+                    frequency: '1s',
+                    value: '0.50',
+                    unit: 'kN',
+                    database: 'hbase',
+                    threshold: '0.8',
+                    classify: '设备',
+                    pointname: '皮带张力',
+                    num: '0.52',
+                    deviceName: '皮带本体',
+                    describe: '全长5260m，带宽1.6m，带速4m/s，带强3150N/mm，运输能力3500t/h。',
+                    device: '电机本体',
+                    remark: '无',
+                    dataQuality: '高'
+                }, {
+                    time: '2020-1-20 12:01',
+                    dataType: '浮点',
+                    frequency: '1s',
+                    value: '0.50',
+                    unit: 'kN',
+                    database: 'hbase',
+                    threshold: '0.8',
+                    classify: '设备',
+                    pointname: '1#滚筒',
+                    num: '0.52',
+                    deviceName: '皮带本体',
+                    describe: '全长5260m，带宽1.6m，带速4m/s，带强3150N/mm，运输能力3500t/h。',
+                    device: '电机本体',
+                    remark: '无',
+                    dataQuality: '高'
+                }, {
+                    time: '2020-1-22 5:01',
+                    dataType: '浮点',
+                    frequency: '1s',
+                    value: '0.50',
+                    unit: 'kN',
+                    database: 'hbase',
+                    threshold: '0.8',
+                    classify: '设备',
+                    pointname: '2#滚筒',
+                    num: '0.32',
+                    deviceName: '皮带本体',
+                    describe: '全长5521m，带宽1.6m，带速4m/s，带强3150N/mm，运输能力3500t/h。',
+                    device: '电机本体',
+                    remark: '无',
+                    dataQuality: '高'
+                }, {
+                    time: '2020-2-20 16:21',
+                    dataType: '浮点',
+                    frequency: '1s',
+                    value: '0.50',
+                    unit: 'kN',
+                    database: 'hbase',
+                    threshold: '0.8',
+                    classify: '设备',
+                    pointname: '3#滚筒',
+                    num: '0.98',
+                    deviceName: '皮带本体',
+                    describe: '全长5210m，带宽1.6m，带速4m/s，带强3150N/mm，运输能力3500t/h。',
+                    device: '电机本体',
+                    remark: '无',
+                    dataQuality: '高'
+                }, {
+                    time: '2020-2-23 14:41',
+                    dataType: '浮点',
+                    frequency: '1s',
+                    value: '0.50',
+                    unit: 'kN',
+                    database: 'hbase',
+                    threshold: '0.8',
+                    classify: '设备',
+                    pointname: '1#滚筒',
+                    num: '0.25',
+                    deviceName: '皮带本体',
+                    describe: '全长3135m，带宽1.6m，带速4m/s，带强3150N/mm，运输能力3500t/h。',
+                    device: '电机本体',
+                    remark: '无',
+                    dataQuality: '高'
+                }, {
+                    time: '2020-3-10 7:11',
+                    dataType: '浮点',
+                    frequency: '1s',
+                    value: '0.50',
+                    unit: 'kN',
+                    database: 'hbase',
+                    threshold: '0.8',
+                    classify: '设备',
+                    pointname: '1#滚筒',
+                    num: '0.76',
+                    deviceName: '皮带本体',
+                    describe: '全长3432m，带宽1.6m，带速4m/s，带强3150N/mm，运输能力3500t/h。',
+                    device: '电机本体',
+                    remark: '无',
+                    dataQuality: '高'
+                }, {
+                    time: '2020-3-12 11:11',
+                    dataType: '浮点',
+                    frequency: '1s',
+                    value: '0.50',
+                    unit: 'kN',
+                    database: 'hbase',
+                    threshold: '0.8',
+                    classify: '设备',
+                    pointname: '1#滚筒',
+                    num: '0.34',
+                    deviceName: '皮带本体',
+                    describe: '全长6730m，带宽1.6m，带速4m/s，带强3150N/mm，运输能力3500t/h。',
+                    device: '电机本体',
+                    remark: '无',
+                    dataQuality: '高'
+                }],
+                currentPage1: 1,
+                currentPage2: 2,
+                currentPage3: 3,
+                currentPage4: 4,
+                detailVisible: false,
+                moreVisible: false,
+                frequency: '',
+                unit: '',
+                threshold: '',
+                dataTime: ''
+
+            }
+
+
+        },
+        methods: {
+            // 监听 pagesize 改变的事件
+            handleSizeChange(newSize) {
+                console.log(newSize)
+            },
+            //监听 页码值 改变的事件
+            handleCurrentChange(newPage) {
+                console.log(newPage)
+            },
+            watch(id) {
+                this.detailVisible = true;
+                this.$nextTick(() => {
+                    this.$refs.detailDialog.init(id);
+                });
+            },
+            more(id) {
+                this.moreVisible = true;
+                this.$nextTick(() => {
+                    this.$refs.moreDialog.init(id);
+                });
+            }
+        },
+        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;
+        },
+        components: {
+            detailDia,
+            more
+        }
+    }
+</script>
+<style scoped>
+    .checkpointbox {
+        display: inline-block;
+    }
+    
+    .el-button {
+        width: 100px;
+        margin-left: 10px;
+    }
+    
+    .el-select {
+        margin-left: 10px;
+        width: 160px;
+    }
+</style>

src/views/monitor/detailDia.vue

@@ -0,0 +1,133 @@
+<template>
+    <!-- 查看数据质量信息 -->
+    <el-dialog title="查看详细信息" :visible.sync="visible" width="72%" >
+    <el-card>
+		<template>
+            <el-table :data="tableData" style="width: 100%" border stripe>
+                <el-table-column label="完整性" align="center">
+                    <el-table-column prop="name" label="名称" header-align="center" align="center" width="130">
+                    </el-table-column>
+                    <el-table-column prop="isExisted" label="数据是否存在" header-align="center" align="center" width="90">
+                    </el-table-column>
+                </el-table-column>
+                <el-table-column label="准确性" align="center">
+                    <el-table-column prop="dataType" label="数据类型" header-align="center" align="center" width="90">
+                    </el-table-column>
+                    <el-table-column prop="threshold" label="阈值范围" header-align="center" align="center" width="130">
+                    </el-table-column>
+                    <el-table-column prop="unit" label="数据单位" header-align="center" align="center" width="90">
+                    </el-table-column>
+                    <el-table-column prop="rationality" label="数据合理性" header-align="center" align="center" width="90">
+                    </el-table-column>
+                    <el-table-column prop="storage_len" label="数据存储长度" header-align="center" align="center" width="90">
+                    </el-table-column>
+                </el-table-column>
+                <el-table-column label="时效性" align="center">
+                    <el-table-column prop="frequency" label="采集频率" header-align="center" align="center" width="90">
+                    </el-table-column>
+                </el-table-column>
+            </el-table>
+        </template>
+</el-table>
+
+<!-- 分页区域 -->
+<!-- <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="5">
+</el-pagination> -->
+</el-card>
+
+
+</el-dialog>
+</template>
+
+<script>
+    export default {
+        name: "checkSystem",
+        data() {
+            return {
+                visible: false,
+                value: '',
+                tableData: [{
+                    name: '电机绕组A相温度',
+                    isExisted: '是',
+                    dataType: '浮点',
+                    threshold: '上阈值120.0℃',
+                    unit: '℃',
+                    rationality: '合理',
+                    storage_len: '50',
+                    frequency: '5s'
+                }, {
+                    name: '电机绕组B相温度',
+                    isExisted: '是',
+                    dataType: '浮点',
+                    threshold: '上阈值120.0℃',
+                    unit: '℃',
+                    rationality: '合理',
+                    storage_len: '50',
+                    frequency: '5s'
+                }, {
+                    name: '电机绕组C相温度',
+                    isExisted: '是',
+                    dataType: '浮点',
+                    threshold: '上阈值120.0℃',
+                    unit: '℃',
+                    rationality: '合理',
+                    storage_len: '50',
+                    frequency: '5s'
+                }, {
+                    name: '电机前轴温度',
+                    isExisted: '是',
+                    dataType: '浮点',
+                    threshold: '上阈值120.0℃',
+                    unit: '℃',
+                    rationality: '合理',
+                    storage_len: '50',
+                    frequency: '5s'
+                }, {
+                    name: '电机后轴温度',
+                    isExisted: '是',
+                    dataType: '浮点',
+                    threshold: '上阈值120.0℃',
+                    unit: '℃',
+                    rationality: '合理',
+                    storage_len: '50',
+                    frequency: '5s'
+                }, {
+                    name: '电机振动1',
+                    isExisted: '是',
+                    dataType: '浮点',
+                    threshold: '无',
+                    unit: 'mm/s',
+                    rationality: '合理',
+                    storage_len: '50',
+                    frequency: '5s'
+                }, {
+                    name: '电机振动2',
+                    isExisted: '是',
+                    dataType: '浮点',
+                    threshold: '无',
+                    unit: 'mm/s',
+                    rationality: '合理',
+                    storage_len: '50',
+                    frequency: '5s'
+                }],
+
+                currentPage1: 1,
+                currentPage2: 2,
+                currentPage3: 3,
+                currentPage4: 4
+            }
+        },
+        methods: {
+
+            init(id) {
+                this.visible = true;
+            }
+
+        }
+    }
+</script>
+
+
+<style scoped>
+
+</style>

src/views/monitor/monitorThreshold.vue

@@ -0,0 +1,142 @@
+<!-- 皮带本体 超标数据 -->
+<template>
+	<div>
+        <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 :to="{ path: '/checkSubSys'}">{{ sub_system_name }}</el-breadcrumb-item>
+            <el-breadcrumb-item>{{ check_point_name }}</el-breadcrumb-item>
+            <el-breadcrumb-item>超标数据</el-breadcrumb-item>
+        </el-breadcrumb>
+        
+	<el-card>
+		<template>
+			<el-table :data="tableData" style="width: 100%" border stripe>
+
+				<el-table-column prop="time" label="时间" header-align="center" align="center" width="150">
+				</el-table-column>
+				<el-table-column prop="dataType" label="数据类型" header-align="center" align="center" width="120">
+				</el-table-column>
+
+
+				<el-table-column prop="frequency" label="采集频率" header-align="center" align="center" width="120">
+				</el-table-column>
+				<el-table-column prop="value" label="测量数值" header-align="center" align="center" width="120">
+				</el-table-column>
+				<el-table-column prop="unit" label="工程单位" header-align="center" align="center" width="120">
+				</el-table-column>
+
+				<el-table-column prop="threshold" label="预警阈值" header-align="center" align="center" width="120">
+				</el-table-column>
+
+
+				<el-table-column prop="classify" label="所属分类" header-align="center" align="center" width="120">
+				</el-table-column>
+			</el-table>
+		</template>
+</el-table>
+
+<!-- 分页区域 -->
+<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="7">
+</el-pagination>
+</el-card>
+</div>
+</template>
+<script>
+    export default {
+        name: "threshold",
+        data() {
+            return {
+                check_point_name: '',
+                sub_system_name: '',
+                tableData: [{
+                    time: '2020-1-20 9:41',
+                    dataType: '浮点',
+                    frequency: '1s',
+                    value: '0.50',
+                    unit: 'kN',
+                    database: 'hbase',
+                    threshold: '0.8',
+                    classify: '设备',
+                    pointname: '皮带张力',
+                    num: '0.52',
+                    deviceName: '皮带本体',
+                    describe: '全长5260m，带宽1.6m，带速4m/s，带强3150N/mm，运输能力3500t/h。',
+                    device: '电机本体',
+                    remark: '无',
+                    dataQuality: '高'
+                }, {
+                    time: '2020-1-20 12:01',
+                    dataType: '浮点',
+                    frequency: '1s',
+                    value: '0.50',
+                    unit: 'kN',
+                    database: 'hbase',
+                    threshold: '0.8',
+                    classify: '设备',
+                    pointname: '1#滚筒',
+                    num: '0.52',
+                    deviceName: '皮带本体',
+                    describe: '全长5260m，带宽1.6m，带速4m/s，带强3150N/mm，运输能力3500t/h。',
+                    device: '电机本体',
+                    remark: '无',
+                    dataQuality: '高'
+                }, {
+                    time: '2020-1-22 5:01',
+                    dataType: '浮点',
+                    frequency: '1s',
+                    value: '0.50',
+                    unit: 'kN',
+                    database: 'hbase',
+                    threshold: '0.8',
+                    classify: '设备',
+                    pointname: '2#滚筒',
+                    num: '0.32',
+                    deviceName: '皮带本体',
+                    describe: '全长5521m，带宽1.6m，带速4m/s，带强3150N/mm，运输能力3500t/h。',
+                    device: '电机本体',
+                    remark: '无',
+                    dataQuality: '高'
+                }, {
+                    time: '2020-2-20 16:21',
+                    dataType: '浮点',
+                    frequency: '1s',
+                    value: '0.50',
+                    unit: 'kN',
+                    database: 'hbase',
+                    threshold: '0.8',
+                    classify: '设备',
+                    pointname: '3#滚筒',
+                    num: '0.98',
+                    deviceName: '皮带本体',
+                    describe: '全长5210m，带宽1.6m，带速4m/s，带强3150N/mm，运输能力3500t/h。',
+                    device: '电机本体',
+                    remark: '无',
+                    dataQuality: '高'
+                }, {
+                    time: '2020-2-23 14:41',
+                    dataType: '浮点',
+                    frequency: '1s',
+                    value: '0.50',
+                    unit: 'kN',
+                    database: 'hbase',
+                    threshold: '0.8',
+                    classify: '设备',
+                    pointname: '1#滚筒',
+                    num: '0.25',
+                    deviceName: '皮带本体',
+                    describe: '全长3135m，带宽1.6m，带速4m/s，带强3150N/mm，运输能力3500t/h。',
+                    device: '电机本体',
+                    remark: '无',
+                    dataQuality: '高'
+                }],
+            }
+        },
+        mounted() {
+            const subSystemName = window.sessionStorage.getItem("subSystemName");
+            const checkPointName = window.sessionStorage.getItem("checkPointName");
+            this.sub_system_name = subSystemName;
+            this.check_point_name = checkPointName;
+        }
+    }
+</script>

src/views/monitor/more.vue

@@ -0,0 +1,157 @@
+<template>
+    <!-- 查看数据质量信息 -->
+    <el-dialog title="查看详细信息" :visible.sync="visible" width="65%" >
+    <!-- <div class="detail">
+        <div class="item">
+            <span class="info">测点名: {{checkForm.pointname}}</span></br>
+            <span class="info">测量数值: {{checkForm.num}}</span></br>
+            <span class="info">设备名: {{checkForm.deviceName}}</span></br>
+            <span class="info">设备描述: {{checkForm.describe}}</span></br>
+            <span class="info">所属设备: {{checkForm.device}}</span></br>
+            <span class="info">预警阈值: {{checkForm.threshold}}</span></br>
+            <span class="info">数据类型: {{checkForm.dataType}}</span></br>
+            <span class="info">工程单位: {{checkForm.unit}}</span></br>
+            <span class="info">采集频率: {{checkForm.frequency}}</span></br>
+            <span class="info">备注: {{checkForm.remark}}</span></br>
+            <span class="info">数据质量: {{checkForm.dataQuality}}</span>
+        </div>
+        <div class="item ">2</div>
+        <div class="item ">3</div>
+        <div class="item ">4</div>
+    </div> -->
+ 
+    <el-row style="background: #eeeeee" type="flex" justify="center">
+        <el-col >
+            <el-card class="box-card" shadow="never">
+                
+                <span class="info">测点名: </span>{{checkForm.pointname}}</br>
+                <span class="info">测量数值:</span>{{checkForm.num}}</br>
+                <span class="info">设备名: </span>{{checkForm.deviceName}}</br>
+                <span class="info">设备描述: </span>{{checkForm.describe}}</br>
+                <span class="info">所属设备: </span>{{checkForm.device}}</br>
+                <span class="info">预警阈值: </span>{{checkForm.threshold}}</br>
+                <span class="info">数据类型: </span>{{checkForm.dataType}}</br>
+                <span class="info">工程单位: </span>{{checkForm.unit}}</br>
+                <span class="info">采集频率: </span>{{checkForm.frequency}}</br>
+                <span class="info">备注: </span>{{checkForm.remark}}</br>
+                <span class="info">数据质量: </span>{{checkForm.dataQuality}}
+            </el-card>
+
+            
+        </el-col>
+    </el-row>
+
+         <!-- <el-form :inline="true" ref="modifyForm" :model="checkForm">
+                
+                <el-form-item label="测点名" prop="pointname">
+                    <el-input style="width: 258px;" v-model="checkForm.pointname" disabled></el-input>
+                </el-form-item>
+                <el-form-item label="测量数值" prop="num">
+                    <el-input style="width: 258px;" v-model="checkForm.num" disabled></el-input>
+                </el-form-item>
+                <el-form-item label="设备名" prop="deviceName">
+                    <el-input style="width: 258px;" v-model="checkForm.deviceName" disabled></el-input>
+                </el-form-item>
+                <el-form-item label="设备描述" prop="describe">
+                    <el-input style="width: 258px;" v-model="checkForm.describe" disabled></el-input>
+                </el-form-item>
+                <el-form-item label="所属设备" prop="device">
+                    <el-input style="width: 258px;" v-model="checkForm.device" disabled></el-input>
+                </el-form-item>
+                <el-form-item label="预警阈值" prop="threshold">
+                    <el-input style="width: 258px;" v-model="checkForm.threshold" disabled></el-input>
+                </el-form-item>
+                <el-form-item label="数据类型" prop="dataType">
+                    <el-input style="width: 258px;" v-model="checkForm.dataType" disabled></el-input>
+                </el-form-item>
+                <el-form-item label="工程单位" prop="unit">
+                    <el-input style="width: 258px;" v-model="checkForm.unit" disabled></el-input>
+                </el-form-item>
+                <el-form-item label="采集频率" prop="frequency">
+                    <el-input style="width: 258px;" v-model="checkForm.frequency" disabled></el-input>
+                </el-form-item>
+                <el-form-item label="备注" prop="remark">
+                    <el-input style="width: 258px;" v-model="checkForm.remark" disabled></el-input>
+                </el-form-item>
+                <el-form-item label="数据质量" prop="dataQuality">
+                    <el-input style="width: 258px;" v-model="checkForm.dataQuality" disabled></el-input>
+                </el-form-item>
+            </el-form> -->
+    
+</el-dialog>
+</template>
+
+<script>
+    export default {
+        name: "checkSystem",
+        data() {
+            return {
+                visible: false,
+                checkForm: {
+                    pointname: '',
+                    num: '',
+                    deviceName: '',
+                    describe: '',
+                    device: '',
+                    threshold: '',
+                    dataType: '',
+                    unit: '',
+                    frequency: '',
+                    remark: '',
+                    dataQuality: ''
+                }
+            }
+        },
+        methods: {
+            init(id) {
+                this.visible = true;
+                this.checkForm.pointname = id.pointname;
+                this.checkForm.num = id.num;
+                this.checkForm.deviceName = id.deviceName;
+                this.checkForm.describe = id.describe;
+                this.checkForm.device = id.device;
+                this.checkForm.threshold = id.threshold;
+                this.checkForm.dataType = id.dataType;
+                this.checkForm.unit = id.unit;
+                this.checkForm.frequency = id.frequency;
+                this.checkForm.remark = id.remark;
+                this.checkForm.dataQuality = id.dataQuality;
+            }
+        }
+    }
+</script>
+
+<style scoped>
+    .el-card {
+        background: #fbfbfb;
+        width: 400px;
+        /* 一行一行显示 */
+        display: inline-block;
+        margin: 5px;
+        border-radius: 20px;
+    }
+    /* .detail {
+        display: grid;
+        height: 620px;
+        width: 300px;
+        grid-template-columns: 425px 425px;
+        grid-template-rows: 310px 310px;
+        
+    } */
+    
+    .item {
+        font-size: 20px;
+        text-align: center;
+        text-justify: center;
+    }
+    
+    .info {
+        width: 415px;
+        font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
+        font-size: 14px;
+        /* text-align: left; */
+        /* float: left; */
+        margin-left: 5px;
+        color: cornflowerblue;
+    }
+</style>

src/views/transportation/subSystem/belt_body.vue

@@ -9,26 +9,143 @@
         </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>
-<beltbodyRow style="margin-top: 185px;margin-left: 10px;" :property="property" :health="health" :danger="danger" :normal_time="normal_time" :total_time="total_time"></beltbodyRow>
-    </div> 
+<analysisDia v-if="moreVisible" ref="moreDialog"></analysisDia>
+    </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",
         data() {
             return {
-                property: "牵引方向",
                 health: '健康',
                 danger: '较低',
                 normal_time: '9天',
@@ -56,7 +173,7 @@
             pull_status,
             pulling_speed,
             speed_status,
-            beltbodyRow
+            analysisDia
 
         },
         methods: {

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

@@ -95,6 +95,8 @@
         name: "detail",
         data() {
             return {
+                check_point_name: '',
+                sub_system_name: '',
                 checkpoints: [{
                     id: 1,
                     name: '运行'