checkPointInfo.vue 3.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123
  1. <template>
  2. <div>
  3. <el-row :gutter="20">
  4. <el-col :span="4">
  5. <div class="block">
  6. <span class="text">{{name}}</span><br>
  7. <!-- <el-button type="primary">选择数据范围</el-button><br>-->
  8. <el-dropdown>
  9. <el-button type="primary">
  10. 数据范围<i class="el-icon-arrow-down el-icon--right"></i>
  11. </el-button>
  12. <el-dropdown-menu slot="dropdown">
  13. <el-dropdown-item>十分钟</el-dropdown-item>
  14. <el-dropdown-item>一小时</el-dropdown-item>
  15. <el-dropdown-item>六小时</el-dropdown-item>
  16. <el-dropdown-item>近一天</el-dropdown-item>
  17. </el-dropdown-menu>
  18. </el-dropdown>
  19. <el-button type="primary" @click="dataAnalysis()">数据分析</el-button>
  20. <el-button type="primary" @click="openDetail()">详细数据</el-button>
  21. </div>
  22. </el-col>
  23. <el-col :span="14">
  24. <div class="block">
  25. <!-- <direction></direction> -->
  26. <span class="threshold" @click="beyondthreshold()">超出阈值:0.83</span>
  27. <dataGraph v-bind="dg"></dataGraph>
  28. </div>
  29. </el-col>
  30. <el-col :span="6">
  31. <div class="block">
  32. <el-card>
  33. <span class="info">设备健康程度:{{health}}</span><br>
  34. <span class="info">安全隐患程度:{{danger}}</span><br>
  35. <span class="info">正常运行:{{normal_time}}</span><br>
  36. <span class="info">数值超标总时长:{{total_time}}</span><br>
  37. </el-card>
  38. </div>
  39. </el-col>
  40. </el-row>
  41. <analysisDia v-if="moreVisible" ref="moreDialog"></analysisDia>
  42. </div>
  43. </template>
  44. <script>
  45. import dataGraph from "./dataGraph";
  46. import direction from "../../components/mining/main_bump/direction";
  47. import analysisDia from "./analysisDia.vue";
  48. export default {
  49. name: "checkPointInfo",
  50. components: {
  51. dataGraph,
  52. direction,
  53. analysisDia
  54. },
  55. props: [
  56. 'name',
  57. 'health',
  58. 'danger',
  59. 'normal_time',
  60. 'total_time'
  61. ],
  62. data() {
  63. return {
  64. moreVisible: false,
  65. dg: {
  66. X_data: ['16:20', '16:21', '16:22', '16:23', '16:24', '16:25', '16:26', '16:27'],
  67. Y_data: [0.44, 0.40, 0.23, 0.60, 0.50, 0.53, 0.83, 0.5],
  68. threshold: 0.8
  69. }
  70. }
  71. },
  72. methods: {
  73. dataAnalysis() {
  74. this.moreVisible = true;
  75. this.$nextTick(() => {
  76. this.$refs.moreDialog.init();
  77. });
  78. },
  79. // 打开详细数据页面
  80. openDetail() {
  81. this.$router.push({
  82. path: '/monitorDetail'
  83. })
  84. },
  85. // 超出阈值
  86. beyondthreshold() {
  87. this.$router.push({
  88. path: '/monitorThreshold'
  89. })
  90. }
  91. }
  92. }
  93. </script>
  94. <style scoped>
  95. .block {
  96. height: 140px;
  97. /* background-color: burlywood */
  98. }
  99. .el-button {
  100. margin: 3px;
  101. margin-left: 25px;
  102. width: 120px;
  103. }
  104. .info {
  105. font-size: 13px;
  106. font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
  107. }
  108. .threshold {
  109. font-size: 13px;
  110. font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
  111. margin-left: 460px;
  112. color: red;
  113. cursor: pointer;
  114. }
  115. </style>