主运输系统系统 皮带本体 详细数据页面

src/router.js

@@ -76,6 +76,14 @@ export default new Router({
                     import ('./views/transportation/subSystem/belt_body.vue'),
                 hidden: true,
             },
+            {
+                path: '/detail',
+                name: ' 详细信息',
+                id: 103001,
+                component: () =>
+                    import ('./views/transportation/subSystem/beltbody/detail.vue'),
+                hidden: true,
+            },
             {
                 path: '/mainAdit',
                 name: ' 主平硐皮带',

src/views/transportation/subSystem/belt_body.vue

@@ -16,7 +16,7 @@
                     <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>
+                    <el-button type="primary" @click="openDetail()">详细数据</el-button></br>
                 </div>
             </el-col>
             <el-col :span="14">
@@ -158,6 +158,12 @@
             //监听 页码值 改变的事件
             handleCurrentChange(newPage) {
                 console.log(newPage)
+            },
+            // 打开详细数据页面
+            openDetail() {
+                this.$router.push({
+                    path: '/detail'
+                })
             }
         }
     }

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

@@ -0,0 +1,330 @@
+<!-- 皮带本体 详细数据 -->
+<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 >煤中央皮带</el-breadcrumb-item>
+            <el-breadcrumb-item >皮带本体</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 {
+                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);
+                });
+            }
+        },
+        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/transportation/subSystem/beltbody/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/transportation/subSystem/beltbody/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>