矿压检测系统图上半部分

src/components/beam_tube/scatterChart.vue

@@ -0,0 +1,92 @@
+<template>
+  <div ref="chart" style="width: 1600px; height: 200px"></div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      option: {
+        title: {
+          text: this.title,
+          top: 85,
+          right: 100,
+          textStyle: {
+            fontWeight: "normal", //标题颜色
+            color: "#4ADEFE",
+          },
+        },
+        xAxis: {
+          data: [
+            0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18,
+            19, 20, 21, 22, 23, 24, 25
+          ],
+          // show: false,
+          nameTextStyle: {
+            height: 10,
+          },
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        yAxis: {
+          // show: false,
+          data: ["锚索应力", "顶板离层"],
+          axisTick: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisLabel: {
+            color: "#4adefe",
+            fontSize: 15,
+          },
+        },
+        series: [
+          {
+            symbolSize: 10,
+            data: [],
+            type: "scatter",
+            color: (params) => {
+              // 返回绿色
+              if (params.data[2]) return "#009966";
+              // 不然返回红色
+              return "#f90005";
+            },
+          },
+        ],
+      },
+    };
+  },
+  props: ["data", "title"],
+  mounted() {
+    this.chart = this.$echarts.init(this.$refs.chart);
+    this.chart.setOption(this.option);
+    let arr = [];
+    for (let i = 0; i < 26; i++) {
+      let newArr = [i, "锚索应力", this.data.bottom[i] < 20 ? true : false];
+      let newArr2 = [i, "顶板离层", this.data.top[i] < 20 ? true : false];
+      arr.push(newArr);
+      arr.push(newArr2);
+    }
+    console.log(arr);
+    this.chart.setOption({
+      series: [
+        {
+          data: arr,
+        },
+      ],
+    });
+  },
+};
+</script>
+
+<style scoped>
+</style>

src/views/beam_tube/configImg/index.vue

@@ -3,7 +3,29 @@
     <el-container>
       <el-header>
         <div class="header">
+          <div
+            style="margin-left: -50px; margin-bottom: -100px; margin-top: -40px"
+          >
+            <scatter-chart title="辅运巷" :data="data1"></scatter-chart>
+          </div>
+          <div style="margin-left: -50px; margin-bottom: -40px">
+            <scatter-chart title="主运巷" :data="data1"></scatter-chart>
+          </div>
 
+          <div class="workingFace">
+            <div :style="{ width: 1300 - length + 'px' }" class="inner"></div>
+            <div
+              :style="{ 'margin-left': 1300 - length + 'px' }"
+              class="pillar"
+            >
+              <div class="center">{{ length }}m</div>
+            </div>
+            <div class="bottom1">工作面<br />&nbsp;&nbsp;&nbsp;0m</div>
+            <div class="bottom2">采煤区<br />1300m</div>
+          </div>
+          <div style="margin-left: -50px; margin-top: -50px">
+            <scatter-chart title="回风巷" :data="data1"></scatter-chart>
+          </div>
         </div>
       </el-header>
       <el-main>Main</el-main>
@@ -12,7 +34,28 @@
 </template>
 
 <script>
-export default {};
+import scatterChart from "@/components/beam_tube/scatterChart";
+export default {
+  data() {
+    return {
+      length: 0,
+      data1: {
+        top: new Array(26).fill(10),
+        bottom: new Array(26).fill(40)
+      }
+    };
+  },
+  mounted() {
+    setInterval(() => {
+      if (this.length < 1300) {
+        this.length += 10;
+      }
+    }, 100);
+  },
+  components: {
+    scatterChart,
+  },
+};
 </script>
 
 <style scoped>
@@ -28,7 +71,45 @@ export default {};
 }
 .header {
   width: 100%;
-  height: 550px;
-  background-color: black;
+  height: 650px;
+  /* background-color: black; */
+}
+.workingFace {
+  height: 300px;
+  width: 1300px;
+  margin-left: 100px;
+  background-color: rgb(228, 214, 214);
+}
+.inner {
+  height: 100%;
+  background-color: rgb(75, 71, 71);
+  z-index: 9;
+}
+.pillar {
+  height: 100%;
+  width: 10px;
+  margin-top: -300px;
+  background-color: #0000cd;
+}
+.bottom1 {
+  color: #4adefe;
+  right: 40px;
+  font-size: 20px;
+  top: 330px;
+  position: absolute;
+}
+.bottom2 {
+  color: #4adefe;
+  left: 40px;
+  font-size: 20px;
+  top: 330px;
+  position: absolute;
+}
+.center {
+  color: #009966;
+  font-size: 20px;
+  top: 50px;
+  left: 10px;
+  position: relative;
 }
 </style>