主排水系统系统图

src/views/drain/configImg/index.vue

@@ -0,0 +1,227 @@
+<template>
+  <div class="main">
+    <!-- 背景图片 -->
+    <div>
+      <img src="@/assets/img/drain/back.png" id="imgSwitch" />
+    </div>
+    <!-- 12个按钮 -->
+    <div :class="['botton0', valve[0] ? 'green' : 'red']"></div>
+    <div :class="['botton1', valve[1] ? 'green' : 'red']"></div>
+    <div :class="['botton2', valve[2] ? 'green' : 'red']"></div>
+    <div :class="['botton3', valve[3] ? 'green' : 'red']"></div>
+    <div :class="['botton4', valve[4] ? 'green' : 'red']"></div>
+    <div :class="['botton5', valve[5] ? 'green' : 'red']"></div>
+    <div :class="['botton6', valve[6] ? 'green' : 'red']"></div>
+    <div :class="['botton7', valve[7] ? 'green' : 'red']"></div>
+    <div :class="['botton8', valve[8] ? 'green' : 'red']"></div>
+    <div :class="['botton9', valve[9] ? 'green' : 'red']"></div>
+    <div :class="['botton10', valve[10] ? 'green' : 'red']"></div>
+    <div :class="['botton11', valve[11] ? 'green' : 'red']"></div>
+    <!-- 3个数据表格 -->
+    <div class="table1">
+      <tableData :tableData="tableData1" id="1"></tableData>
+    </div>
+    <div class="table2">
+      <tableData :tableData="tableData2" id="2"></tableData>
+    </div>
+    <div class="table3">
+      <tableData :tableData="tableData3" id="3"></tableData>
+    </div>
+  </div>
+</template>
+<script>
+import tableData from "@/views/drain/configImg/tableData";
+export default {
+  data() {
+    return {
+      valve: [
+        true,
+        true,
+        true,
+        true,
+        true,
+        true,
+        true,
+        true,
+        true,
+        true,
+        true,
+        true,
+      ],
+      tableData1: {
+        pipelineFlow: 0.0,
+        pipelineFlowTotal: 0.0,
+        runningTime: 0,
+        UnattendedRuntime: 0,
+        positivePressure: 0,
+        negativePressure: 0,
+        frontAxleTemp: 0,
+        rearAxleTemp: 0,
+        liquidLevel: 0,
+      },
+      tableData2: {
+        pipelineFlow: 0.0,
+        pipelineFlowTotal: 0.0,
+        runningTime: 0,
+        UnattendedRuntime: 0,
+        positivePressure: 0,
+        negativePressure: 0,
+        frontAxleTemp: 0,
+        rearAxleTemp: 0,
+        liquidLevel: 0,
+      },
+      tableData3: {
+        pipelineFlow: 0.0,
+        pipelineFlowTotal: 0.0,
+        runningTime: 0,
+        UnattendedRuntime: 0,
+        positivePressure: 0,
+        negativePressure: 0,
+        frontAxleTemp: 0,
+        rearAxleTemp: 0,
+        liquidLevel: 0,
+      },
+    };
+  },
+  components: {
+    tableData,
+  },
+  mounted() {
+    this.valve = this.valve.map((item) => {
+      return (item = !item);
+    });
+  },
+};
+</script>
+
+<style scoped>
+.main {
+  width: 100%;
+  height: 850px;
+  position: relative;
+  background-image: linear-gradient(
+    to right,
+    #06133c 0%,
+    #011669 5045 #06133c 100%
+  );
+}
+.table1 {
+  top: 0px;
+  left: -10px;
+  position: absolute;
+}
+.table2 {
+  top: 0px;
+  left: 450px;
+  position: absolute;
+}
+.table3 {
+  top: 0px;
+  left: 910px;
+  position: absolute;
+}
+#imgSwitch {
+  width: 100%;
+  height: 800px;
+  margin-top: 20px;
+  /* padding-bottom: 100px; */
+  /* left: 50px; */
+  /* margin-left: 30px; */
+}
+.botton0 {
+  width: 10px;
+  height: 30px;
+  position: absolute;
+  top: 64px;
+  left: 62px;
+}
+.botton1 {
+  width: 10px;
+  height: 30px;
+  position: absolute;
+  top: 371px;
+  left: 144px;
+}
+.botton2 {
+  width: 15px;
+  height: 15px;
+  border-radius: 50%;
+  position: absolute;
+  top: 378px;
+  left: 368px;
+}
+.botton3 {
+  width: 15px;
+  height: 15px;
+  border-radius: 50%;
+  position: absolute;
+  top: 305px;
+  left: 417px;
+}
+.botton4 {
+  width: 10px;
+  height: 30px;
+  position: absolute;
+  top: 140px;
+  left: 527px;
+}
+.botton5 {
+  width: 10px;
+  height: 30px;
+  position: absolute;
+  top: 375px;
+  left: 605px;
+}
+.botton6 {
+  width: 15px;
+  height: 15px;
+  border-radius: 50%;
+  position: absolute;
+  top: 378px;
+  left: 830px;
+}
+.botton7 {
+  width: 15px;
+  height: 15px;
+  border-radius: 50%;
+  position: absolute;
+  top: 305px;
+  left: 880px;
+}
+.botton8 {
+  width: 10px;
+  height: 30px;
+  position: absolute;
+  top: 140px;
+  left: 990px;
+}
+.botton9 {
+  width: 10px;
+  height: 30px;
+  position: absolute;
+  top: 375px;
+  left: 1070px;
+}
+.botton10 {
+  width: 15px;
+  height: 15px;
+  border-radius: 50%;
+  position: absolute;
+  top: 378px;
+  right: 240px;
+}
+.botton11 {
+  width: 15px;
+  height: 15px;
+  border-radius: 50%;
+  position: absolute;
+  top: 305px;
+  right: 190px;
+}
+.red {
+  background-color: #f90005;
+}
+.green {
+  background-color: #009966;
+}
+</style>

src/views/drain/configImg/tableData.vue

@@ -0,0 +1,113 @@
+<template>
+  <div>
+    <ul class="header">
+      <li>
+        {{ id }}号管道流量:<span>{{ tableData.pipelineFlow }}m3/h</span>
+      </li>
+      <li>
+        {{ id }}号管道流量统计:<span
+          >{{ tableData.pipelineFlowTotal }}m3/h</span
+        >
+      </li>
+    </ul>
+    <ul class="center">
+      <li>
+        {{ id }}号运行总时间:<br /><span>{{ tableData.runningTime }}h</span>
+      </li>
+      <li>
+        {{ id }}号无人值守运行时间:<br /><span
+          >{{ tableData.UnattendedRuntime }}h</span
+        >
+      </li>
+    </ul>
+    <ul class="bottom1">
+      <li>
+        {{ id }}号正压:<span>{{ tableData.positivePressure }}℃</span>
+      </li>
+      <li>
+        {{ id }}号负压:<span>{{ tableData.negativePressure }}℃</span>
+      </li>
+    </ul>
+    <ul class="bottom2">
+      <li>
+        {{ id }}号电压:<span>{{ tableData.positivePressure }}℃</span
+        >{{ id }}号前轴温度:<span>{{ tableData.frontAxleTemp }}℃</span>
+      </li>
+      <li>
+        {{ id }}号电流:<span>{{ tableData.negativePressure }}℃</span
+        >{{ id }}号后轴温度:<span>{{ tableData.rearAxleTemp }}℃</span>
+      </li>
+    </ul>
+    <div class="bottom3">液位:<span>{{ tableData.liquidLevel }}m</span></div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: ["tableData", "id"],
+};
+</script>
+
+<style scoped>
+div {
+  font-size: 18px;
+}
+.header {
+  color: #4adefe;
+  position: relative;
+  top: 80px;
+  left: 180px;
+}
+.header span {
+  margin-left: 10px;
+  color: #f3db5c;
+}
+.center {
+  color: #4adefe;
+  position: relative;
+  top: 200px;
+  left: 180px;
+}
+.center span {
+  margin-left: 10px;
+  color: #f3db5c;
+  /* float: left; */
+}
+.bottom1 {
+  color: #4adefe;
+  position: relative;
+  top: 230px;
+  left: -20px;
+}
+.bottom1 span {
+  margin-left: 10px;
+  color: #f3db5c;
+  /* float: left; */
+}
+.bottom2 {
+  color: #4adefe;
+  position: relative;
+  top: 330px;
+  left: -20px;
+}
+.bottom2 span {
+  margin-left: 10px;
+  color: #f3db5c;
+  margin-right: 20px;
+  /* float: left; */
+}
+.bottom3 {
+  color: black;
+  position: relative;
+  top: 330px;
+  left: 210px;
+}
+.bottom3 span {
+  margin-left: 10px;
+  color: #f3db5c;
+}
+li {
+  list-style-type: none;
+  line-height: 30px;
+}
+</style>

src/views/drain/drain.vue

@@ -1,31 +1,25 @@
 <template>
-  <el-tabs
-    v-model="activeName"
-    type="card"
-    @tab-click="handleClick"
-  >
-    <el-tab-pane
-      label="系统数据"
-      name="first"
-    >
+  <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
+    <el-tab-pane label="系统数据" name="first">
       <el-breadcrumb separator-class="el-icon-arrow-right">
         <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
         <el-breadcrumb-item>主排水系统</el-breadcrumb-item>
         <el-breadcrumb-item>系统数据</el-breadcrumb-item>
       </el-breadcrumb>
     </el-tab-pane>
-    <el-tab-pane
-      label="数据标准"
-      name="second"
-    >
+    <el-tab-pane label="数据标准" name="second">
       <dataStandard></dataStandard>
     </el-tab-pane>
+    <el-tab-pane label="系统图" name="third">
+      <config-img></config-img>
+    </el-tab-pane>
   </el-tabs>
 </template>
 
 
 <script>
 import dataStandard from "./dataStandard/dataStandard";
+import configImg from "./configImg";
 export default {
   name: "compressed",
   data() {
@@ -40,6 +34,7 @@ export default {
   },
   components: {
     dataStandard,
+    configImg
   },
 };
 </script>