主运输系统 皮带本体 第一行所有页面

src/components/transportation/coalCentral/belt_body/direction.vue

@@ -44,7 +44,7 @@
                         data: ['单位：kN']
                     },
                     grid: {
-                        top: '15%',
+                        top: '3%',
                         left: '1%',
                         right: '4%',
                         bottom: '3%',
@@ -111,7 +111,17 @@
                         showSymbol: false,
                         // 设置拐点颜色以及边框
                         itemStyle: {
-                            color: "#0184d5",
+                            normal: {
+                                label: {
+                                    show: true,
+                                    formatter: " {c}",
+                                    textStyle: {
+                                        color: '#00aaff'
+                                    }
+                                }
+                            },
+
+                            color: "#55ffff",
                             borderColor: "rgba(0, 170, 255, 0.1)",
                             borderWidth: 6
                         },

src/components/transportation/coalCentral/belt_body/pull_status.vue

@@ -44,7 +44,7 @@
                         data: ['单位：m/s']
                     },
                     grid: {
-                        top: '15%',
+                        top: '3%',
                         left: '1%',
                         right: '4%',
                         bottom: '3%',
@@ -111,7 +111,16 @@
                         showSymbol: false,
                         // 设置拐点颜色以及边框
                         itemStyle: {
-                            color: "#0184d5",
+                            normal: {
+                                label: {
+                                    show: true,
+                                    formatter: " {c}",
+                                    textStyle: {
+                                        color: '#00aaff'
+                                    }
+                                }
+                            },
+                            color: "#55ffff",
                             borderColor: "rgba(0, 170, 255, 0.1)",
                             borderWidth: 6
                         },

src/components/transportation/coalCentral/belt_body/pulling_speed.vue

@@ -44,7 +44,7 @@
                         data: ['单位：m/s']
                     },
                     grid: {
-                        top: '15%',
+                        top: '3%',
                         left: '1%',
                         right: '4%',
                         bottom: '3%',
@@ -111,7 +111,16 @@
                         showSymbol: false,
                         // 设置拐点颜色以及边框
                         itemStyle: {
-                            color: "#4BFF75",
+                            normal: {
+                                label: {
+                                    show: true,
+                                    formatter: " {c}",
+                                    textStyle: {
+                                        color: '#00aaff'
+                                    }
+                                }
+                            },
+                            color: "#55ffff",
                             borderColor: "rgba(0, 170, 255, 0.1)",
                             borderWidth: 6
                         },

src/components/transportation/coalCentral/belt_body/speed_status.vue

@@ -44,7 +44,7 @@
                         data: ['单位：m/s']
                     },
                     grid: {
-                        top: '15%',
+                        top: '3%',
                         left: '1%',
                         right: '4%',
                         bottom: '3%',
@@ -111,7 +111,16 @@
                         showSymbol: false,
                         // 设置拐点颜色以及边框
                         itemStyle: {
-                            color: "#4BFF75",
+                            normal: {
+                                label: {
+                                    show: true,
+                                    formatter: " {c}",
+                                    textStyle: {
+                                        color: '#00aaff'
+                                    }
+                                }
+                            },
+                            color: "#55ffff",
                             borderColor: "rgba(0, 170, 255, 0.1)",
                             borderWidth: 6
                         },

src/router.js

@@ -84,6 +84,14 @@ export default new Router({
                     import ('./views/transportation/subSystem/beltbody/detail.vue'),
                 hidden: true,
             },
+            {
+                path: '/threshold',
+                name: ' 超出阈值',
+                id: 103002,
+                component: () =>
+                    import ('./views/transportation/subSystem/threshold.vue'),
+                hidden: true,
+            },
             {
                 path: '/mainAdit',
                 name: ' 主平硐皮带',

src/views/transportation/subSystem/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/transportation/subSystem/belt_body.vue

@@ -4,7 +4,7 @@
             <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
             <el-breadcrumb-item :to="{ path: '/transportation'}">主运输系统</el-breadcrumb-item>
             <el-breadcrumb-item :to="{ path: '/transportation'}">系统数据</el-breadcrumb-item>
-            <el-breadcrumb-item >煤中央皮带</el-breadcrumb-item>
+            <el-breadcrumb-item :to="{ path: '/coalCentral'}">煤中央皮带</el-breadcrumb-item>
             <el-breadcrumb-item >皮带本体</el-breadcrumb-item>
         </el-breadcrumb>
 
@@ -14,13 +14,17 @@
             <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" @click="openDetail()">详细数据</el-button></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>
 
@@ -49,6 +53,7 @@
             </el-col>
             <el-col :span="14">
                 <div class="block">
+                    <span class="threshold">超出阈值：0.83</span>
                     <pull_status></pull_status>
                 </div>
 
@@ -77,6 +82,7 @@
             </el-col>
             <el-col :span="14">
                 <div class="block">
+                    <span class="threshold">超出阈值：0.83</span>
                     <speed_status></speed_status>
                 </div>
 
@@ -105,6 +111,7 @@
             </el-col>
             <el-col :span="14">
                 <div class="block">
+                    <span class="threshold">超出阈值：0.83</span>
                     <pulling_speed></pulling_speed>
                 </div>
 
@@ -125,9 +132,12 @@
 <!-- 分页区域 -->
 <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage4" :page-sizes="[1, 2, 5, 10]" :page-size="1" layout="total, sizes, prev, pager, next, jumper" :total="4">
 </el-pagination>
+<analysisDia v-if="moreVisible" ref="moreDialog"></analysisDia>
     </div>
+   
 </template>
 <script>
+    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'
@@ -140,14 +150,30 @@
                 danger: '较低',
                 normal_time: '9天',
                 total_time: '20s',
-                currentPage4: 4
+                currentPage4: 4,
+                dataRange: '',
+                dataRangeItems: [{
+                    value: '选项1',
+                    label: '10分钟'
+                }, {
+                    value: '选项2',
+                    label: '1小时'
+                }, {
+                    value: '选项3',
+                    label: '6小时'
+                }, {
+                    value: '选项4',
+                    label: '近1天'
+                }],
+                moreVisible: false
             }
         },
         components: {
             direction,
             pull_status,
             pulling_speed,
-            speed_status
+            speed_status,
+            analysisDia
 
         },
         methods: {
@@ -164,6 +190,18 @@
                 this.$router.push({
                     path: '/detail'
                 })
+            },
+            dataAnalysis() {
+                this.moreVisible = true;
+                this.$nextTick(() => {
+                    this.$refs.moreDialog.init();
+                });
+            },
+            // 超出阈值
+            beyondthreshold() {
+                this.$router.push({
+                    path: '/threshold'
+                })
             }
         }
     }
@@ -197,6 +235,14 @@
         margin-left: 50px;
     }
     
+    .threshold {
+        font-size: 13px;
+        font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
+        margin-left: 520px;
+        color: red;
+        cursor: pointer;
+    }
+    
     .info {
         font-size: 13px;
         font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;

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

@@ -5,8 +5,8 @@
             <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
             <el-breadcrumb-item :to="{ path: '/transportation'}">主运输系统</el-breadcrumb-item>
             <el-breadcrumb-item :to="{ path: '/transportation'}">系统数据</el-breadcrumb-item>
-            <el-breadcrumb-item >煤中央皮带</el-breadcrumb-item>
-            <el-breadcrumb-item >皮带本体</el-breadcrumb-item>
+            <el-breadcrumb-item :to="{ path: '/coalCentral'}">煤中央皮带</el-breadcrumb-item>
+            <el-breadcrumb-item :to="{ path: '/belt_body'}">皮带本体</el-breadcrumb-item>
             <el-breadcrumb-item >详细数据</el-breadcrumb-item>
         </el-breadcrumb>
         <span class="text">数据测点：</span>

src/views/transportation/subSystem/threshold.vue

@@ -0,0 +1,134 @@
+<!-- 皮带本体 超标数据 -->
+<template>
+	<div>
+		<el-breadcrumb separator-class="el-icon-arrow-right">
+			<el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
+			<el-breadcrumb-item :to="{ path: '/transportation'}">主运输系统</el-breadcrumb-item>
+			<el-breadcrumb-item :to="{ path: '/transportation'}">系统数据</el-breadcrumb-item>
+			<el-breadcrumb-item :to="{ path: '/coalCentral'}">煤中央皮带</el-breadcrumb-item>
+			<el-breadcrumb-item :to="{ path: '/belt_body'}">皮带本体</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 {
+                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: '高'
+                }],
+            }
+        }
+    }
+</script>