修改了采煤工作面的样式

src/views/mining/Monitor/CoalMining.vue

@@ -40,7 +40,7 @@
 export default {
   data() {
     return {
-      car: '',
+      car: '40',
       carSpeed: '',
       hand: {
         left: 20,

src/views/mining/Monitor/Index.vue

@@ -1,89 +1,52 @@
 <template>
-  <div class="comprehensive">
-    <div class="left">
-      <div class="top">
-        <!-- 支架压力图表 -->
-        <div class="support-pressure common-card">
-          <div class="text">
-            <i :class="['el-icon-arrow-right', { 'mr': item === 2 }, { 'opacity': item === 1 }]" v-for="item in 2" :key="item+Math.random()"></i>
-            支架压力
-            <i :class="['el-icon-arrow-left', { 'mr': item === 2 }, { 'opacity': item === 2 }]" v-for="item in 2" :key="item+Math.random()"></i>
-          </div>
-          <bar></bar>
-        </div>
-        <!-- 乳化液自动配比 -->
-        <emulsion></emulsion>
-      </div>
-
-      <div class="center">
-        <!-- 焊机循环作业图 -->
-        <div class="welder-cycle common-card">
-          <div class="text">
-            <i :class="['el-icon-arrow-right', { 'mr': item === 2 }, { 'opacity': item === 1 }]" v-for="item in 2" :key="item+Math.random()"></i>
-            焊机循环作业图
-            <i :class="['el-icon-arrow-left', { 'mr': item === 2 }, { 'opacity': item === 2 }]" v-for="item in 2" :key="item+Math.random()"></i>
-          </div>
-          <lines id="welder"></lines>
-        </div>
-        <!-- 支架循环作业图 -->
-        <div class="stent-circulation common-card">
-          <div class="text">
-            <i :class="['el-icon-arrow-right', { 'mr': item === 2 }, { 'opacity': item === 1 }]" v-for="item in 2" :key="item+Math.random()"></i>
-            支架循环作业图
-            <i :class="['el-icon-arrow-left', { 'mr': item === 2 }, { 'opacity': item === 2 }]" v-for="item in 2" :key="item+Math.random()"></i>
-          </div>
-          <lines id="stent"></lines>
-        </div>
-      </div>
-
-      <div class="bottom">
-        <coal-mining></coal-mining>
-      </div>
-    </div>
-    <div class="right">
-
-    </div>
+  <div class="monitor">
+    <el-row :gutter="20">
+      <el-col :span="12"
+        ><div class="grid-content bg-purple">
+          <bar></bar></div
+      ></el-col>
+      <el-col :span="12"
+        ><div class="grid-content bg-purple"><emulsion></emulsion></div
+      ></el-col>
+    </el-row>
+    <el-row style="margin-top:40px"  :gutter="20">
+      <el-col :span="12"
+        ><div class="grid-content bg-purple"><lines id="welder"></lines></div
+      ></el-col>
+      <el-col :span="12"
+        ><div class="grid-content bg-purple"><lines id="stent"></lines></div
+      ></el-col>
+    </el-row>
+    <el-row :gutter="10">
+      <coal-mining></coal-mining>
+    </el-row>
   </div>
 </template>
 
 <script>
+import Emulsion from "./Emulsion.vue";
 
-import Emulsion from './Emulsion.vue'
-
-import CoalMining from './CoalMining.vue'
-import bar from './echarts/Bars.vue'
-import lines from './echarts/Lines.vue'
+import CoalMining from "./CoalMining.vue";
+import bar from "./echarts/Bars.vue";
+import lines from "./echarts/Lines.vue";
 export default {
   components: { Emulsion, CoalMining, bar, lines },
   data() {
-    return {
-    }
-  }
-}
+    return {};
+  },
+};
 </script>
 
-<style lang="scss" scoped>
-.comprehensive {
-  display: flex;
-  height: calc(100vh - 120px);
-  .left {
-    flex-grow: 1;
-    .top,.center {
-      display: flex;
-      .text {
-        color: #fff;
-      }
-      .mr {
-        margin-left: 9px;
-      }
-      .opacity {
-        opacity: .3;
-      }
-    }
-  }
-  .right {
-    width: 80px;
-    background-image: url('~@/assets/img/right.png');
-  }
+<style scoped>
+.monitor {
+  width: 100%;
+  height: 850px;
+  position: relative;
+  /* background-image: linear-gradient(
+    to right,
+    #06133c 0%,
+    #011669 50%,
+    #06133c 100%
+  ); */
 }
 </style>

src/views/mining/Monitor/echarts/Bars.vue

@@ -1,104 +1,112 @@
 <template>
-<!-- 支架压力柱状图 -->
-  <div id="bar" style="height: 250px;width: 300%"></div>
+  <!-- 支架压力柱状图 -->
+  <div id="bar" style="height: 300px; width: 600px;"></div>
 </template>
 
 <script>
 export default {
-  name: 'Bars',
-  data(){
+  name: "Bars",
+  data() {
     return {
       myChart: null,
       option: {
         tooltip: {
-          trigger: 'axis',
+          trigger: "axis",
           axisPointer: {
-            type: 'shadow'
-          }
+            type: "shadow",
+          },
         },
-        color: ['red', 'green', 'yellow'],
+        color: ["red", "green", "yellow"],
         legend: {
-          left: 'right',
-          icon: 'rect',
+          left: "right",
+          icon: "rect",
           textStyle: {
-            color: '#000'
+            color: "#000",
           },
-          data: ['压力超限', '压力过低', '压力正常']
+          data: ["压力超限", "压力过低", "压力正常"],
         },
         grid: {
-          left: '3%',
-          right: '4%',
-          bottom: '3%',
-          containLabel: true
+          left: "3%",
+          right: "4%",
+          bottom: "3%",
+          containLabel: true,
         },
         xAxis: [
           {
-            type: 'category',
-            data: [198, 190, 180, 170, 160, 150, 140, 130, 120, 110, 100, 90, 80, 70, 60, 50, 40, 30, 20, 10 ,1]
-          }
+            type: "category",
+            data: [
+              198, 190, 180, 170, 160, 150, 140, 130, 120, 110, 100, 90, 80, 70,
+              60, 50, 40, 30, 20, 10, 1,
+            ],
+          },
         ],
         yAxis: [
           {
-            type: 'value'
-          }
+            type: "value",
+          },
         ],
         series: [
           {
-            name: '压力过低',
-            type: 'bar',
+            name: "压力过低",
+            type: "bar",
             itemStyle: {
               normal: {
-                color: function(params){
-                  if(params.data > 64){
-                    return 'red';
-                  } else if (params.data < 24){
-                    return 'green';
-      　　　　　　} else {
-                    return 'yellow'
+                color: function (params) {
+                  if (params.data > 64) {
+                    return "red";
+                  } else if (params.data < 24) {
+                    return "green";
+                  } else {
+                    return "yellow";
                   }
-        　　　　}
-          　　}
+                },
+              },
             },
-            barWidth: '10',
-            barCategoryGap: '5%',
-            data: [23, 66, 76, 12, 79, 42, 15, 56, 13, 29, 20, 4, 22, 12, 38, 9, 31, 66, 90, 77, 14]
+            barWidth: "10",
+            barCategoryGap: "5%",
+            data: [
+              23, 66, 76, 12, 79, 42, 15, 56, 13, 29, 20, 4, 22, 12, 38, 9, 31,
+              66, 90, 77, 14,
+            ],
           },
-          { //这两组数据用来模拟markLine线段开关,data可以为空
-            name:'压力超限',
-            type:'line',
-            markLine:{
-              data:[
+          {
+            //这两组数据用来模拟markLine线段开关,data可以为空
+            name: "压力超限",
+            type: "line",
+            markLine: {
+              data: [
                 {
-                  name:'压力超限',
-                  yAxis:"64",
-                  itemStyle:{
-                  normal:{
-                    show: true,
-                    color:'red'
-                  }
+                  name: "压力超限",
+                  yAxis: "64",
+                  itemStyle: {
+                    normal: {
+                      show: true,
+                      color: "red",
+                    },
+                  },
                 },
-                }
-            ]
-          }
-        },
-        { //这两组数据用来模拟markLine线段开关,data可以为空
-          name:'压力正常',
-          type:'line',
-          markLine:{
-            data:[
-              {
-                name:'压力正常',
-                yAxis:"24",
-                itemStyle:{
-                  normal:{
-                    show:true,
-                    color:'yellow'
-                  }
+              ],
+            },
+          },
+          {
+            //这两组数据用来模拟markLine线段开关,data可以为空
+            name: "压力正常",
+            type: "line",
+            markLine: {
+              data: [
+                {
+                  name: "压力正常",
+                  yAxis: "24",
+                  itemStyle: {
+                    normal: {
+                      show: true,
+                      color: "yellow",
+                    },
+                  },
                 },
-              }
-            ]
-          }
-        },
+              ],
+            },
+          },
           // {
           //   name: '压力超限',
           //   type: 'bar',
@@ -127,23 +135,22 @@ export default {
           //   barCategoryGap: '5%',
           //   data: [150, 232, 201, 154, 190, 330, 4, 5, 6, 3, 2, 1, 4, 410, 120, 132, 101, 134, 90, 230, 210]
           // },
-        ]
-      }
-    }
+        ],
+      },
+    };
   },
   mounted() {
-    console.log(this.$echarts)
-    this.myChart = this.$echarts.init(document.getElementById('bar'));
+    console.log(this.$echarts);
+    this.myChart = this.$echarts.init(document.getElementById("bar"));
     this.setBar();
   },
   methods: {
     setBar() {
-      this.myChart.setOption(this.option)
-    }
-  }
-}
+      this.myChart.setOption(this.option);
+    },
+  },
+};
 </script>
 
 <style>
-
 </style>

src/views/mining/Monitor/echarts/Lines.vue

@@ -1,5 +1,5 @@
 <template>
-  <div :id="id" style="height: 250px;width: 300%"></div>
+  <div :id="id" style="height: 300px; width: 750px"></div>
 </template>
 
 <script>