|
@@ -1,22 +1,129 @@
|
|
|
<template>
|
|
|
+ <div>
|
|
|
+ <topimg></topimg>
|
|
|
+ <!-- <plcdata></plcdata> -->
|
|
|
<div>
|
|
|
- <topimg></topimg>
|
|
|
- <plcdata></plcdata>
|
|
|
-
|
|
|
+ <div class="content" v-for="item in data">
|
|
|
+ <div class="top">
|
|
|
+ <div class="left">{{ item.run.tag_name }}</div>
|
|
|
+ <div class="right">运行</div>
|
|
|
+ </div>
|
|
|
+ <div class="data">
|
|
|
+ <ul>
|
|
|
+ <li v-for="list in item.list">
|
|
|
+ <div class="title">{{ list.tag_name }}</div>
|
|
|
+ <div class="num">
|
|
|
+ {{
|
|
|
+ list.tag_value.substring(0, list.tag_value.indexOf(".") + 3)
|
|
|
+ }}
|
|
|
+ </div>
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
+ </div>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
-import plcdata from '@/components/zdh/plcdata.vue';
|
|
|
-import topimg from '@/components/zdh/topimg.vue'
|
|
|
- export default {
|
|
|
- name:'tongfeng_xijin',
|
|
|
- components: { topimg,plcdata },
|
|
|
-
|
|
|
-
|
|
|
- }
|
|
|
+import topimg from "@/components/zdh/topimg.vue";
|
|
|
+export default {
|
|
|
+ name: "tongfeng_xijin",
|
|
|
+ components: { topimg },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ data: "",
|
|
|
+ };
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ async getData() {
|
|
|
+ const { data: res } = await this.$http.post(
|
|
|
+ "http://nmjt.nxjiewei.com:8011/api/automate/mine_ventilate/get_list",
|
|
|
+ { mine_id: "zaoquan", type: 2 }
|
|
|
+ );
|
|
|
+ console.log(res.content.data);
|
|
|
+ this.data = res.content.data;
|
|
|
+ },
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+ this.getData();
|
|
|
+ this.infos = setInterval(this.getData, 5000);
|
|
|
+ },
|
|
|
+ beforeDestroy() {
|
|
|
+ clearInterval(this.infos);
|
|
|
+ },
|
|
|
+};
|
|
|
</script>
|
|
|
|
|
|
<style scoped>
|
|
|
+.content {
|
|
|
+ font-weight: 400;
|
|
|
+ background-color: #ffffff;
|
|
|
+ box-shadow: 0px 0px 40px 0px rgba(0, 0, 0, 0.14);
|
|
|
+ border-radius: 5px;
|
|
|
+ margin: 5px;
|
|
|
+ background-color: #2873ff;
|
|
|
+}
|
|
|
+.top {
|
|
|
+ background-color: #ffffff;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ /* padding: 10px; */
|
|
|
+ height: 33px;
|
|
|
+ margin-left: 5px;
|
|
|
+ border-bottom: 1px #f3f3f3 solid;
|
|
|
+ padding: 10px;
|
|
|
+}
|
|
|
+/* span{
|
|
|
+ background-color: #2873FF;
|
|
|
+ width: 9px;
|
|
|
+ height: 33px;
|
|
|
|
|
|
+ } */
|
|
|
+.left {
|
|
|
+ height: 33px;
|
|
|
+ line-height: 33px;
|
|
|
+ /* margin-left: 10px; */
|
|
|
+}
|
|
|
+.right {
|
|
|
+ width: 33px;
|
|
|
+ height: 20px;
|
|
|
+ background-color: #27ae60;
|
|
|
+ border-radius: 2px;
|
|
|
+ color: #ffffff;
|
|
|
+ text-align: center;
|
|
|
+ font-size: 10px;
|
|
|
+ line-height: 14px;
|
|
|
+ font-weight: 400;
|
|
|
+ padding-top: 4px;
|
|
|
+}
|
|
|
+.data {
|
|
|
+ background-color: #ffffff;
|
|
|
+ padding: 0 10px;
|
|
|
+}
|
|
|
+/* ul{
|
|
|
+
|
|
|
+ } */
|
|
|
+li {
|
|
|
+ /* margin-right: 5%; */
|
|
|
+ /* float: left; */
|
|
|
+ height: 39px;
|
|
|
+ /* line-height: 39px; */
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ padding: 10px 0px;
|
|
|
+ border-bottom: 1px #f3f3f3 solid;
|
|
|
+}
|
|
|
+li div {
|
|
|
+ height: 17px;
|
|
|
+ padding-bottom: 3px;
|
|
|
+}
|
|
|
+.num {
|
|
|
+ width: 80px;
|
|
|
+ text-align: center;
|
|
|
+ background-color: #2873ff;
|
|
|
+ color: #fff;
|
|
|
+}
|
|
|
</style>
|