添加安全监控系统及路由配置

src/views/monitor/checkCheckPoint.vue

@@ -0,0 +1,238 @@
+<template>
+  <el-container>
+    <el-header style="height: 20px;">
+      <div v-if="this.$router.currentRoute.path=='/checkCheckPoint'">
+        <el-breadcrumb separator-class="el-icon-arrow-right">
+          <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
+          <el-breadcrumb-item :to="{ path: '/monitor'}">安全监控</el-breadcrumb-item>
+          <el-breadcrumb-item><span @click="back" style="font-weight: bold">{{ sub_system_name }}</span></el-breadcrumb-item>
+          <el-breadcrumb-item>{{ check_point_name }}</el-breadcrumb-item>
+        </el-breadcrumb>
+      </div>
+    </el-header>
+
+    <el-divider class="divi"></el-divider>
+    <!-- 第一行 -->
+    <el-row :gutter="20">
+      <el-col :span="4">
+        <div class="block">
+          <span class="text">牵引方向</span></br>
+<!--          <el-button type="primary">选择数据范围</el-button></br>-->
+          <el-dropdown size="mini" split-button type="primary">
+            选择数据范围
+            <el-dropdown-menu slot="dropdown">
+              <el-dropdown-item>十分钟</el-dropdown-item>
+              <el-dropdown-item>一小时</el-dropdown-item>
+              <el-dropdown-item>六小时</el-dropdown-item>
+              <el-dropdown-item>近 天</el-dropdown-item>
+            </el-dropdown-menu>
+          </el-dropdown>
+          <el-button type="primary" >数据分析</el-button></br>
+          <el-button type="primary">详细数据</el-button></br>
+        </div>
+      </el-col>
+      <el-col :span="14">
+        <div class="block">
+          <direction></direction>
+        </div>
+
+      </el-col>
+      <el-col :span="6">
+        <div class="block">
+          <el-card>
+            <span class="info">设备健康程度:{{health}}</span></br>
+            <span class="info">安全隐患程度:{{danger}}</span></br>
+            <span class="info">正常运行:{{normal_time}}</span></br>
+            <span class="info">数值超标总时长:{{total_time}}</span></br>
+          </el-card>
+        </div>
+
+      </el-col>
+    </el-row>
+    <!-- 第二行 -->
+    <el-row :gutter="20">
+      <el-col :span="4">
+        <div class="block">
+          <span class="text">牵引状态</span></br>
+          <el-button type="primary">选择数据范围</el-button></br>
+          <el-button type="primary" >数据分析</el-button></br>
+          <el-button type="primary">详细数据</el-button></br>
+        </div>
+      </el-col>
+      <el-col :span="14">
+        <div class="block">
+          <pull_status></pull_status>
+        </div>
+
+      </el-col>
+      <el-col :span="6">
+        <div class="block">
+          <el-card>
+            <span class="info">设备健康程度:{{health}}</span></br>
+            <span class="info">安全隐患程度:{{danger}}</span></br>
+            <span class="info">正常运行:{{normal_time}}</span></br>
+            <span class="info">数值超标总时长:{{total_time}}</span></br>
+          </el-card>
+        </div>
+
+      </el-col>
+    </el-row>
+    <!-- 第三行 -->
+    <el-row :gutter="20">
+      <el-col :span="4">
+        <div class="block">
+          <span class="text">加速状态</span></br>
+          <el-button type="primary">选择数据范围</el-button></br>
+          <el-button type="primary" >数据分析</el-button></br>
+          <el-button type="primary">详细数据</el-button></br>
+        </div>
+      </el-col>
+      <el-col :span="14">
+        <div class="block">
+          <speed_status></speed_status>
+        </div>
+
+      </el-col>
+      <el-col :span="6">
+        <div class="block">
+          <el-card>
+            <span class="info">设备健康程度:{{health}}</span></br>
+            <span class="info">安全隐患程度:{{danger}}</span></br>
+            <span class="info">正常运行:{{normal_time}}</span></br>
+            <span class="info">数值超标总时长:{{total_time}}</span></br>
+          </el-card>
+        </div>
+
+      </el-col>
+    </el-row>
+    <!-- 第四行 -->
+    <el-row :gutter="20">
+      <el-col :span="4">
+        <div class="block">
+          <span class="text">牵引速度</span></br>
+          <el-button type="primary">选择数据范围</el-button></br>
+          <el-button type="primary" >数据分析</el-button></br>
+          <el-button type="primary">详细数据</el-button></br>
+        </div>
+      </el-col>
+      <el-col :span="14">
+        <div class="block">
+          <pulling_speed></pulling_speed>
+        </div>
+
+      </el-col>
+      <el-col :span="6">
+        <div class="block">
+          <el-card>
+            <span class="info">设备健康程度:{{health}}</span></br>
+            <span class="info">安全隐患程度:{{danger}}</span></br>
+            <span class="info">正常运行:{{normal_time}}</span></br>
+            <span class="info">数值超标总时长:{{total_time}}</span></br>
+          </el-card>
+        </div>
+
+      </el-col>
+    </el-row>
+
+    <!-- 分页区域 -->
+    <el-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>
+  </el-container>
+</template>
+
+<script>
+  import direction from '@/components/mining/main_bump/direction.vue'
+  import pull_status from '@/components/mining/main_bump/pull_status.vue'
+  import pulling_speed from '@/components/mining/main_bump/pulling_speed.vue'
+  import speed_status from '@/components/mining/main_bump/speed_status.vue'
+  export default {
+    name: "checkCheckPoint",
+    data() {
+      return {
+        check_point_name: '',
+        sub_system_name: '',
+        health: '健康',
+        danger: '较低',
+        normal_time: '9天',
+        total_time: '20s'
+      }
+    },
+    components: {
+      direction,
+      pull_status,
+      pulling_speed,
+      speed_status
+
+    },
+    methods: {
+      // 监听 pagesize 改变的事件
+      handleSizeChange(newSize) {
+        console.log(newSize)
+      },
+      //监听 页码值 改变的事件
+      handleCurrentChange(newPage) {
+        console.log(newPage)
+      },
+      back() {
+        // this.$router.go(-1);
+
+        console.log(this.sub_system_name)
+        this.$router.push({
+          path: '/checkSubSys',
+          name: '查看子系统',
+          params: {
+            key: 'key',
+            value: this.sub_system_name
+          }
+        })    }
+    },
+    mounted() {
+      this.check_point_name = this.$route.params.value[0];
+      this.sub_system_name = this.$route.params.value[1];
+    }
+}
+</script>
+
+<style scoped>
+  .divi {
+    display: block;
+    height: 1px;
+    width: 100%;
+    margin: 6px 0;
+    background-color: #dcdfe6;
+    position: relative;
+    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
+  }
+
+  .block {
+    height: 140px;
+    /* background-color: burlywood */
+  }
+
+  .el-button {
+    margin: 3px;
+    margin-left: 25px;
+    width: 120px;
+  }
+
+  .text {
+    font-size: 13px;
+    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
+    font-weight: bolder;
+    margin-left: 50px;
+  }
+
+  .info {
+    font-size: 13px;
+    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
+  }
+
+  .el-card {
+    background: #ffffff;
+    border-radius: 8px;
+    width: 180px;
+    height: 120px;
+    margin-top: 8px;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04)
+  }
+</style>

src/views/monitor/checkSubSys.vue

@@ -0,0 +1,139 @@
+<template>
+  <el-container >
+    <el-header style="height: 20px;">
+      <div v-if="this.$router.currentRoute.path=='/checkSubSys'">
+        <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>{{ sub_system_name }}</el-breadcrumb-item>
+        </el-breadcrumb>
+      </div>
+    </el-header>
+
+    <el-main>
+      <span style="font-size: 20px;">{{ sub_system_name }}：</span>
+      <div class="monitorblock" v-for="item in options" :key="item.title">
+        <span style="font-size: 12px; color:#9196a1 ;">{{item.title}}</span>
+        <br>
+        <span style="font-size: 24px;">{{item.num}}</span>
+      </div>
+      <e-card>
+        <el-table :data="tableData" style="width: 100%" border stripe @cell-click="checkSubSys">
+          <el-table-column type="index" label="序号" header-align="center" align="center" width="160">
+          </el-table-column>
+          <el-table-column prop="check_point_name" label="测点数据" header-align="center" align="center" width="180">
+          </el-table-column>
+          <el-table-column prop="describe" label="描述" header-align="center" align="center" width="500">
+          </el-table-column>
+          <el-table-column label="操作" header-align="center" align="center" width="180">
+            <template slot-scope="scope">
+              <el-button type="text" size="small" @click="watch(scope.row)">查看</el-button>
+            </template>
+          </el-table-column>
+          <el-table-column prop="remark" label="备注" header-align="center" align="center" width="180">
+          </el-table-column>
+        </el-table>
+        <!-- 分页区域 -->
+        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
+                       :current-page="currentPage1" :page-sizes="[1, 2, 5, 10]" :page-size="1"
+                       layout="total, sizes, prev, pager, next, jumper" :total="9">
+        </el-pagination>
+      </e-card>
+
+    </el-main>
+  </el-container>
+</template>
+
+<script>
+export default {
+  name: "checkSubSys",
+  data() {
+    return {
+      sub_system_name: '',
+      options: [{
+        title: "测点个数",
+        num: "20"
+      }],
+      tableData: [{
+        check_point_name: '烟气浓度',
+        describe: '5#监测分站',
+        remark: '暂无'
+      }, {
+        check_point_name: '二氧化碳浓度',
+        describe: '4#监测分站',
+        remark: '暂无'
+      }, {
+        check_point_name: '风速',
+        describe: '6#监测分站',
+        remark: '暂无'
+      }, {
+        check_point_name: '一氧化碳浓度',
+        describe: '9#监测分站',
+        remark: '暂无'
+      }, {
+        check_point_name: '瓦斯浓度',
+        describe: '10#监测分站',
+        remark: '暂无'
+      }, {
+        check_point_name: '粉尘浓度',
+        describe: '无',
+        remark: '暂无'
+      }, {
+        check_point_name: '氧气浓度',
+        describe: '无',
+        remark: '暂无'
+      }, {
+        check_point_name: 'xxx',
+        describe: '无',
+        remark: '暂无'
+      }, {
+        check_point_name: 'xxx',
+        describe: '无',
+        remark: '暂无'
+      }],
+
+      currentPage1: 1,
+      currentPage2: 2,
+      currentPage3: 3,
+      currentPage4: 4,
+      checkVisible: false
+    }
+  },
+  methods: {
+    // 监听 pagesize 改变的事件
+    handleSizeChange(newSize) {
+      console.log(newSize)
+    },
+    //监听 页码值 改变的事件
+    handleCurrentChange(newPage) {
+      console.log(newPage)
+    },
+    watch(row) {
+      console.log(row.check_point_name)
+      this.$router.push({
+        path: '/checkCheckPoint',
+        name: '查看测点数据',
+        params: {
+          key: 'key',
+          value: [row.check_point_name, this.sub_system_name]
+        }
+      })
+    },
+  },
+  mounted() {
+    this.sub_system_name = this.$route.params.value;
+  }
+}
+</script>
+
+<style scoped>
+  .monitorblock{
+    width: 115px;
+    height: 77px;
+    border: solid 1px #dcdfe6;
+    padding-top: 20px;
+    margin-left: 25px;
+    text-align: center;
+    display: inline-block;
+  }
+</style>

src/views/monitor/dataStandard.vue

@@ -0,0 +1,13 @@
+<template>
+
+</template>
+
+<script>
+export default {
+  name: "dataStandard"
+}
+</script>
+
+<style scoped>
+
+</style>

src/views/monitor/systemData.vue

@@ -0,0 +1,155 @@
+<template>
+  <el-container>
+    <el-header style="height: 20px;">
+      <div v-if="this.$router.currentRoute.path=='/monitor'">
+        <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>系统数据</el-breadcrumb-item>
+        </el-breadcrumb>
+      </div>
+    </el-header>
+
+    <el-main>
+      <span style="font-size: 20px;">安全系统：</span>
+      <div class="monitorblock" v-for="item in options" :key="item.title">
+        <span style="font-size: 12px; color:#9196a1 ;">{{item.title}}</span>
+        <br>
+        <span style="font-size: 24px;">{{item.num}}</span>
+      </div>
+
+      <e-card>
+        <el-table :data="tableData" style="width: 100%" border stripe @cell-click="checkSubSys">
+          <el-table-column type="index" label="序号" header-align="center" align="center" width="160">
+          </el-table-column>
+          <el-table-column prop="sub_system_name" label="子系统名称" header-align="center" align="center" width="180">
+          </el-table-column>
+          <el-table-column prop="describe" label="描述" header-align="center" align="center" width="500">
+          </el-table-column>
+          <el-table-column label="操作" header-align="center" align="center" width="180">
+            <template slot-scope="scope">
+              <el-button type="text" size="small" @click="watch(scope.row)">查看</el-button>
+            </template>
+          </el-table-column>
+          <el-table-column prop="remark" label="备注" header-align="center" align="center" width="180">
+          </el-table-column>
+        </el-table>
+        <!-- 分页区域 -->
+        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
+                       :current-page="currentPage1" :page-sizes="[1, 2, 5, 10]" :page-size="1"
+                       layout="total, sizes, prev, pager, next, jumper" :total="9">
+        </el-pagination>
+      </e-card>
+    </el-main>
+  </el-container>
+
+</template>
+
+<script>
+export default {
+  name: "systemData",
+  data() {
+    return {
+      options: [{
+        title: "总数据量",
+        num: "1.2T"
+      }, {
+        title: "区域个数",
+        num: "8个"
+      }, {
+        title: "测点个数",
+        num: "125个"
+      }],
+      tableData: [{
+        sub_system_name: '原煤仓二层分站',
+        describe: '5#监测分站',
+        remark: '暂无'
+      }, {
+        sub_system_name: '碟子沟通风机房',
+        describe: '4#监测分站',
+        remark: '暂无'
+      }, {
+        sub_system_name: '风速',
+        describe: '6#监测分站',
+        remark: '暂无'
+      }, {
+        sub_system_name: '一氧化碳浓度',
+        describe: '9#监测分站',
+        remark: '暂无'
+      }, {
+        sub_system_name: '瓦斯浓度',
+        describe: '10#监测分站',
+        remark: '暂无'
+      }, {
+        sub_system_name: '粉尘浓度',
+        describe: '无',
+        remark: '暂无'
+      }, {
+        sub_system_name: '氧气浓度',
+        describe: '无',
+        remark: '暂无'
+      }, {
+        sub_system_name: 'xxx',
+        describe: '无',
+        remark: '暂无'
+      }, {
+        sub_system_name: 'xxx',
+        describe: '无',
+        remark: '暂无'
+      }],
+
+      currentPage1: 1,
+      currentPage2: 2,
+      currentPage3: 3,
+      currentPage4: 4,
+      checkVisible: false
+    }
+  },
+  methods: {
+    // 监听 pagesize 改变的事件
+    handleSizeChange(newSize) {
+      console.log(newSize)
+    },
+    //监听 页码值 改变的事件
+    handleCurrentChange(newPage) {
+      console.log(newPage)
+    },
+    watch(row) {
+      console.log(row.sub_system_name)
+      this.$router.push({
+        path: '/checkSubSys',
+        name: '查看子系统',
+        params: {
+          key: 'key',
+          value: row.sub_system_name
+        }
+      })
+    },
+    checkSubSys(row, column) {
+      if(column.label == "子系统名称") {
+        console.log(row.sub_system_name)
+        this.$router.push({
+          path: '/checkSubSys',
+          name: '查看子系统',
+          params: {
+            key: 'key',
+            value: row.sub_system_name
+          }
+        })
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+  .monitorblock{
+    width: 115px;
+    height: 77px;
+    border: solid 1px #dcdfe6;
+    padding-top: 20px;
+    margin-left: 25px;
+    text-align: center;
+    display: inline-block;
+  }
+</style>