修改掘进样式+增大图表

src/components/tunneling/dashBoard.vue

@@ -1,7 +1,7 @@
 <template>
   <div
     id="myChart"
-    :style="{width: '100%', height: '100%'}"
+    style="width: 190px; height: 190px"
   ></div>
 </template>
  
@@ -95,7 +95,7 @@ export default {
             },
             data: [
               {
-                name: "系统电压",
+                // name: "系统电压",
                 value: this.value,
                 itemStyle: { color: "#00ccee" },
               },

src/components/tunneling/hard.vue

@@ -1,5 +1,5 @@
 <template>
-<div id="hard" style="width: 140px;height: 280px;"></div>
+<div id="hard" style="width: 180px;height: 310px;margin-top:-15px"></div>
 </template>
  
 <script >

src/components/tunneling/lbottom.vue

@@ -96,6 +96,20 @@ export default {
 .middle_top_list span {
   color: #F3DB5C;
 }
+.list_title {
+  font-size: 18px;
+  margin-top: -15%;
+}
+/* .control{
+  margin-top: 20px;
+} */
+.list_num {
+  margin-top: 3%;
+  font-size: 16px;
+}
+.list_num span {
+  font-size: 30px;
+}
 li {
   width: 100%;
   height: 100%;

src/components/tunneling/lmid.vue

@@ -109,6 +109,20 @@ export default {
 .middle_top_list span {
   color: #F3DB5C;
 }
+.list_title {
+  font-size: 18px;
+  margin-top: -15%;
+}
+/* .control{
+  margin-top: 20px;
+} */
+.list_num {
+  margin-top: 3%;
+  font-size: 16px;
+}
+.list_num span {
+  font-size: 30px;
+}
 li{
     width: 100%;
     height: 100%;

src/components/tunneling/rtop.vue

@@ -4,14 +4,14 @@
         <li>
             瓦斯涌出量:<span>{{data.wasi_after}}</span>m^3/min
             <span 
-            style="width:30px; height:30px; border:1px solid red; border-radius:50%; "
+            style="width:30px; height:30px; border:1px solid red; border-radius:50%;margin-left:30px; "
              v-bind:class="{red1:data.danger, green1:data.safety}">
              </span>
         </li>
         <li>
             粉 尘 浓 度 :<span>{{data.fenchen_after}}</span>g/m^3
             <span
-             style="width:30px; height:30px; border:1px solid red; border-radius:50%; "
+             style="width:30px; height:30px; border:1px solid red; border-radius:50%; margin-left:50px;"
              v-bind:class="{red1:data.danger1, green1:data.safety1}">
              </span>
         </li>
@@ -135,15 +135,15 @@ span{
       font-size: 25px;
 }
 .red1{
-    background-color: red;
+    background-color: #CF0000;
 }
 .red2{
-    background-color: red;
+    background-color: #CF0000;
 }
 .green1{
-    background-color: green;
+    background-color: #01A400;
 }
 .green2{
-    background-color: green;
+    background-color: #01A400;
 }
 </style>

src/components/tunneling/ruler.vue

@@ -1,5 +1,5 @@
 <template>
-  <div id="rulerChart" style="width: 140px;height: 240px;"></div>
+  <div id="rulerChart" style="width: 180px;height: 240px;"></div>
 </template>
 
 <script>

src/components/tunneling/six/five.vue

@@ -1,7 +1,7 @@
 <template>
   <div
     id="five"
-    :style="{width: '100%', height: '100%'}"
+   style="width: 190px; height: 190px"
   ></div>
 </template>
  
@@ -97,7 +97,7 @@ export default {
             },
             data: [
               {
-                name: "系统电压",
+                // name: "系统电压",
                 value: this.value,
                 itemStyle: { color: "#00ccee" },
               },

src/components/tunneling/six/four.vue

@@ -1,7 +1,7 @@
 <template>
   <div
     id="four"
-    :style="{width: '100%', height: '100%'}"
+   style="width: 190px; height: 190px"
   ></div>
 </template>
  
@@ -97,7 +97,7 @@ export default {
             },
             data: [
               {
-                name: "系统电压",
+                // name: "系统电压",
                 value: this.value,
                 itemStyle: { color: "#00ccee" },
               },

src/components/tunneling/six/one.vue

@@ -1,7 +1,7 @@
 <template>
   <div
     id="one"
-    :style="{width: '100%', height: '100%'}"
+   style="width: 190px; height: 190px"
   ></div>
 </template>
  
@@ -98,7 +98,7 @@ export default {
             },
             data: [
               {
-                name: "系统电压",
+                // name: "系统电压",
                 value: this.value,
                 itemStyle: { color: "#00ccee" },
               },

src/components/tunneling/six/three.vue

@@ -1,7 +1,7 @@
 <template>
   <div
     id="three"
-    :style="{width: '100%', height: '100%'}"
+   style="width: 190px; height: 190px"
   ></div>
 </template>
  
@@ -97,7 +97,7 @@ export default {
             },
             data: [
               {
-                name: "系统电压",
+                // name: "系统电压",
                 value: this.value,
                 itemStyle: { color: "#00ccee" },
               },

src/components/tunneling/six/two.vue

@@ -1,7 +1,7 @@
 <template>
   <div
     id="two"
-    :style="{width: '100%', height: '100%'}"
+   style="width: 190px; height: 190px"
   ></div>
 </template>
  
@@ -98,7 +98,7 @@ export default {
             },
             data: [
               {
-                name: "系统电压",
+                // name: "系统电压",
                 value: this.value,
                 itemStyle: { color: "#00ccee" },
               },

src/components/tunneling/temporature-two.vue

@@ -146,7 +146,7 @@ export default {
           {
             show: false,
             min: 0,
-            max: 105,
+            max: 90,
           },
         ],
         xAxis: [
@@ -382,7 +382,7 @@ export default {
             series: {
               data: [
                 {
-                  value: showValue,
+                  value: this.showValue,
                 },
               ],
             },

src/components/tunneling/temporature.vue

@@ -11,7 +11,7 @@ var TP_value = 20.3;
 var kd = [];
 var Gradient = [];
 var leftColor = "";
-var showValue = 60;
+var showValue = 40;
 var boxPosition = [65, 0];
 var TP_txt = "";
 // 刻度使用柱状图模拟，短设置1，长的设置3；构造一个数据
@@ -130,16 +130,16 @@ export default {
       //     return item.value
       // })
       // showValue = arrayData
-      const option = {
+       const option = {
         grid: {
-          x: 60, //左侧与y轴的距离
-          y: -50, //top部与x轴的距离
+          x: 30, //左侧与y轴的距离
+          y: 0, //top部与x轴的距离
           x2: -120, //右侧与y轴的距离
           y2: 20, //bottom部与x轴的距离
         },
         // backgroundColor: '#0C2F6F',
         // title: {
-        //   text: "油缸温度",
+        //   text: "油位",
         //   show: true,
         //   textStyle: {
         //     color: "pink",
@@ -184,6 +184,7 @@ export default {
             show: false,
             min: -5,
             max: 80,
+            // data: []    // ?
           },
         ],
         series: [
@@ -192,16 +193,16 @@ export default {
             type: "bar",
             // 对应上面XAxis的第一个对象配置
             xAxisIndex: 0,
-            // data: arrayData[1],
             data: [
               {
-                value: 30,
+                value: 40,
               },
             ],
             barWidth: 8,
             itemStyle: {
               normal: {
                 color: new echarts.graphic.LinearGradient(0, 1, 0, 0, Gradient),
+                // color:'blue'
               },
             },
             z: 2,
@@ -211,7 +212,7 @@ export default {
             type: "bar",
             xAxisIndex: 1,
             barGap: "-100%",
-            data: [80],
+            data: [100],
             barWidth: 14,
             itemStyle: {
               normal: {
@@ -226,7 +227,7 @@ export default {
             type: "bar",
             xAxisIndex: 2,
             barGap: "-100%",
-            data: [81],
+            data: [101],
             barWidth: 24,
             itemStyle: {
               normal: {
@@ -252,7 +253,7 @@ export default {
             series: {
               data: [
                 {
-                  value: this.showValue,
+                  value: showValue,
                 },
               ],
             },
@@ -271,6 +272,13 @@ export default {
                 opacity: 1,
               },
             },
+            series: {
+              data: [
+                {
+                  value: showValue,
+                },
+              ],
+            },
 
             z: 1,
           },
@@ -287,6 +295,13 @@ export default {
                 opacity: 1,
               },
             },
+            series: {
+              data: [
+                {
+                  value: showValue,
+                },
+              ],
+            },
             z: 0,
           },
           {
@@ -302,7 +317,7 @@ export default {
                 color: "white",
                 fontSize: 14,
                 formatter: function (params) {
-                  if (params.dataIndex > 80 || params.dataIndex < 10) {
+                  if (params.dataIndex > 100 || params.dataIndex < 10) {
                     return "";
                   } else {
                     if ((params.dataIndex - 10) % 10 === 0) {

src/views/tunnelling/zutai.vue

@@ -21,85 +21,95 @@
       </div>
       <div class="data_middle">
         <!-- 六个仪表盘 -->
-        <el-row>
-          <el-col :span="8">
-            <div class="grid-content bg-purple">
-              <span class="text">系统电压</span>
-              <dashBoard></dashBoard>
-            </div>
-          </el-col>
-          <el-col :span="8">
-            <div class="grid-content bg-purple-light">
-              <span class="text">油泵电流</span>
-              <one></one>
-            </div>
-          </el-col>
-          <el-col :span="8">
-            <div class="grid-content bg-purple">
-              <span class="text">截低电流</span>
-              <two></two>
-            </div>
-          </el-col>
-        </el-row>
-        <el-row>
-          <el-col :span="8">
-            <div class="grid-content bg-purple">
-              <span class="text">截高电流</span>
-              <three></three>
-            </div>
-          </el-col>
-          <el-col :span="8">
-            <div class="grid-content bg-purple-light">
-              <span class="text">二运电流</span>
-              <four></four>
-            </div>
-          </el-col>
-          <el-col :span="8">
-            <div class="grid-content bg-purple">
-              <span class="text">风机电流</span>
-              <five></five>
-            </div>
-          </el-col>
-        </el-row>
-        <el-row>
-          <el-col :span="14">
-            <div class="grid-content bg-purple">
-              <!-- 掘进机工作状态 -->
-              <div style="margin-top:120px">
-              <mbl2></mbl2>
+        <div class="middle_top">
+          <el-row style="padding-top:21px">
+            <el-col :span="8">
+              <div class="grid-content bg-purple">
+                <span class="text">系统电压</span>
+                <dashBoard></dashBoard>
+              </div>
+            </el-col>
+            <el-col :span="8">
+              <div class="grid-content bg-purple-light">
+                <span class="text">油泵电流</span>
+                <one></one>
               </div>
+            </el-col>
+            <el-col :span="8">
+              <div class="grid-content bg-purple">
+                <span class="text">截低电流</span>
+                <two></two>
+              </div>
+            </el-col>
+          </el-row>
+          <el-row style="margin-top:-48px">
+            <el-col :span="8">
+              <div class="grid-content bg-purple">
+                <span class="text">截高电流</span>
+                <three></three>
+              </div>
+            </el-col>
+            <el-col :span="8">
+              <div class="grid-content bg-purple-light">
+                <span class="text">二运电流</span>
+                <four></four>
+              </div>
+            </el-col>
+            <el-col :span="8">
+              <div class="grid-content bg-purple">
+                <span class="text">风机电流</span>
+                <five></five>
+              </div>
+            </el-col>
+          </el-row>
+        </div>
+        <div class="middle_bootom">
+          <el-row>
+            <el-col :span="14">
+              <div class="grid-content bg-purple">
+                <!-- 掘进机工作状态 -->
+                <div style="margin-top:3px">
+                  <mbl2></mbl2>
+                </div>
 
-            </div>
-          </el-col>
-          <el-col :span="10">
-            <div class="grid-content temperature" style="margin-top:120px">
-              <!-- 油缸温度 -->
-              <div style="margin-right:50px">
-                <span class="text">油缸温度</span>
-                <tempChart></tempChart>
               </div>
-              <!-- 油位 -->
-              <div>
-                <span class="text">油位</span>
-                <tempChart2></tempChart2>
+            </el-col>
+            <el-col :span="10">
+              <div
+                class="grid-content temperature"
+                style="margin-top:0px"
+              >
+                <!-- 油缸温度 -->
+                <div style="margin-right:50px">
+                  <span class="text"  style="margin-left:23px">油缸温度</span>
+                  <tempChart style="margin-top:-20px"></tempChart>
+                </div>
+                <!-- 油位 -->
+                <div>
+                  <span
+                    class="text"
+                    style="margin-left:12px"
+                  >油位</span>
+                  <tempChart2 style="margin-top:-20px"></tempChart2>
+                </div>
               </div>
-            </div>
-          </el-col>
-        </el-row>
+            </el-col>
+          </el-row>
+        </div>
       </div>
       <div class="data_right">
         <div class="right_top">
           <rtop></rtop>
           <rtone></rtone>
         </div>
-         <div class="right_bootom">
-           <worklog></worklog>
+        <div class="right_bootom">
+          <worklog></worklog>
         </div>
 
       </div>
 
     </div>
-        </div>
+  </div>
 </template>
 
 <script>
@@ -198,9 +208,18 @@ export default {
   margin: 0 2.5%;
   /* background: white; */
 }
+.middle_bootom {
+  margin-top: -170px;
+  width: 100%;
+  height: 320px;
+  background: url(../../assets/img/tunneling/dataBg.png) no-repeat;
+  background-size: 100%;
+}
 .middle_top {
   width: 100%;
-  height: 17%;
+  height: 580px;
+  background: url(../../assets/img/tunneling/msgBg.png) no-repeat;
+  background-size: 100%;
 }
 .middle_top_list {
   float: left;
@@ -217,7 +236,7 @@ export default {
 .text {
   color: #4ADEFE;
   font-size: 18px;
-  margin-left: 18px;
+  margin-left: 41px;
 }
 .temperature {
   display: flex;
@@ -255,9 +274,9 @@ export default {
 }
 .right_top {
   width: 100%;
-  height: 48%;
+  height: 400px;
 
-  background: url(../../assets/img/tunneling/msgBg.png) no-repeat;
+  background: url(../../assets/img/tunneling/dataBg.png) no-repeat;
   background-size: 100%;
 }
 .right_bootom {