程序运行状态

src/views/modules_guAn/visualization/modules/RunningState.vue

@@ -1,14 +1,139 @@
 <template>
   <div class="running-state-module">
-    <common-title title="程序运行状态"></common-title>    
-    <div class="visualization-common-border">
-
+    <common-title title="程序运行状态"></common-title>
+    <div class="visualization-common-border box">
+      <!-- 左边 -->
+      <div class="le">
+        <div class="itemHead">
+          <div class="lee"></div>
+          <div class="cee">全部</div>
+          <div class="rii">内部</div>
+        </div>
+        <div class="item">
+          <div class="lee">循环设定值</div>
+          <div class="cee">0</div>
+          <div class="rii">0</div>
+        </div>
+        <div class="item">
+          <div class="lee">循环运行值</div>
+          <div class="cee">0</div>
+          <div class="rii">0</div>
+        </div>
+        <div class="itemHead">
+          <div class="lee"></div>
+          <div class="cee">起始</div>
+          <div class="rii">目标</div>
+        </div>
+        <div class="item">
+          <div class="lee">温度</div>
+          <div class="cee">0</div>
+          <div class="rii">0</div>
+        </div>
+        <div class="item">
+          <div class="lee">湿度</div>
+          <div class="cee">0</div>
+          <div class="rii">0</div>
+        </div>
+        <div class="item">
+          <div class="lee">辐射强度</div>
+          <div class="cee">0</div>
+          <div class="rii">0</div>
+        </div>
+        <div style="width: 100%; height: 12%; margin-bottom: 2.5%; display: flex;">
+          <div style="width: 45%; height: 100%; font-size: 11px; color: #0CB8FF; display: flex; align-items: center; justify-content: center;">预计结束时间:</div>
+          <div style="width: 60%; height: 100%; font-size: 8px; color: #FEFFFE; display: flex; align-items: center; justify-content: center;">2023年12月13日08时30分</div>
+        </div>
+      </div>
+      <!-- 中间 -->
+      <div class="ce">
+        <div class="itemHead">
+          <div class="leece">内部循环</div>
+          <div class="ceece">起始段</div>
+          <div class="ceecee">结束段</div>
+          <div class="riice">次数</div>
+        </div>
+        <div class="item">
+          <div class="leece">1</div>
+          <div class="ceece">0</div>
+          <div class="ceecee">0</div>
+          <div class="riice">0</div>
+        </div>
+        <div class="item">
+          <div class="leece">2</div>
+          <div class="ceece">0</div>
+          <div class="ceecee">0</div>
+          <div class="riice">0</div>
+        </div>
+        <div class="item">
+          <div class="leece">3</div>
+          <div class="ceece">0</div>
+          <div class="ceecee">0</div>
+          <div class="riice">0</div>
+        </div>
+        <div class="item">
+          <div class="leece">4</div>
+          <div class="ceece">0</div>
+          <div class="ceecee">0</div>
+          <div class="riice">0</div>
+        </div>
+        <div class="itemHead">
+          <div class="leece">总运行</div>
+          <div class="ceece"></div>
+          <div class="ceecee"></div>
+          <div class="riice"></div>
+        </div>
+        <div class="item">
+          <div class="leece">运行段数</div>
+          <div class="ceece">0</div>
+          <div class="ceecee"></div>
+          <div class="riice"></div>
+        </div>
+        <div class="item">
+          <div class="leece">设定段数</div>
+          <div class="ceece">0</div>
+          <div class="ceecee"></div>
+          <div class="riice"></div>
+        </div>
+      </div>
+      <!-- 右边 -->
+      <div class="ri">
+        <div class="itemHead">
+          <div class="leeri">当前</div>
+          <div class="riiri"></div>
+        </div>
+        <div class="item">
+          <div class="leeri">运行程序号</div>
+          <div class="riiri">0</div>
+        </div>
+        <div class="item">
+          <div class="leeri">运行段号</div>
+          <div class="riiri">0</div>
+        </div>
+        <div class="item">
+          <div class="leeri">运行时间</div>
+          <div class="riiri">0min</div>
+        </div>
+        <div class="item">
+          <div class="leeri">剩余时间</div>
+          <div class="riiri">0min</div>
+        </div>
+        <div class="item">
+          <div class="leeri">总时间</div>
+          <div class="riiri">0min</div>
+        </div>
+        <div class="echarts">
+          <div style="width: 30%; height: 100%; font-size: 12px; color: #0CB8FF; display: flex; align-items: center; padding-left:1%;">进度:</div>
+          <div style="width: 55%; height: 100%;" ref="zhuzhuang"></div>
+          <div style="width: 10%; height: 100%; font-size: 9px; color: #FEFFFE; display: flex; align-items: center; justify-content: center;">80%</div>
+        </div>
+      </div>
     </div>
   </div>
 </template>
 
 <script>
 import commonTitle from '../components/commonTitle.vue'
+import * as echarts from 'echarts';
 
 export default {
   components: { commonTitle },
@@ -20,8 +145,102 @@ export default {
   created () {
   },
   mounted () {
+    this.drawzhuzhuang() //绘制进度条
+    // echarts自适应
+    window.addEventListener("resize", () =>{
+      this.zhuChart.resize();
+    });
   },
   methods: {
+    drawzhuzhuang(){
+      var chartDom = this.$refs.zhuzhuang
+      this.zhuChart = echarts.init(chartDom);
+      var option;
+
+      option = {
+        grid: {
+        left: '0',
+        // right: '1%',
+        bottom: '60',
+        // top: '1%',
+        // 左侧文字显示
+        // containLabel: true,
+        },
+        xAxis: {
+            show: false,
+            type: 'value',
+            max: 100,
+        },
+        yAxis: [
+            {
+                type: 'category',
+                inverse: false,
+                axisLabel: {
+                    show: true,
+                    textStyle: {
+                        fontSize: '8',
+                        color: '#03fcfe',
+                    },
+                },
+                splitLine: {
+                    show: false,
+                },
+                axisTick: {
+                    show: false,
+                },
+                axisLine: {
+                    show: false,
+                },
+            },
+            {
+                type: 'category',
+                inverse: true,
+                axisTick: 'none',
+                axisLine: 'none',
+                show: true,
+                data: [80],
+            },
+        ],
+        series: [
+            {
+                type: 'bar',
+                showBackground: true,
+                backgroundStyle: {
+                      color: 'rgba(180, 180, 180, 0.2)',
+                      borderRadius:30
+                },
+                // 百分数显示
+                // label:{
+                //     show:true,
+                //     position:'right',
+                //     formatter:'{@score}%',
+                //     textStyle: {
+                //         color: '#03fcfe',
+                //         fontSize: '8',
+                //     },
+                // },
+                itemStyle: {
+                    normal: {
+                        barBorderRadius: 10,
+                        color: new echarts.graphic.LinearGradient(1, 0, 0, 0, [
+                            {
+                                offset: 0,
+                                color: '#1badf9',
+                            },
+                            {
+                                offset: 1,
+                                color: '#03fcfe',
+                            },
+                        ]),
+                    },
+                },
+                barWidth: 10,
+                data: [80],
+            },
+        ],
+      };
+      option && this.zhuChart.setOption(option);
+    },
   }
 }
 </script>
@@ -29,9 +248,151 @@ export default {
 <style scoped>
   @import '~@assets/less/uStyle.less';
 </style>
-<style lang="less">
+<style lang="less" scoped>
   .running-state-module{
     width: 100%;
     height: 100%;
   }
+  .box {
+    // border: 1px solid rgb(255, 255, 255);
+    display: flex;
+    /* row (默认值) : 主轴为水平万向，起点在左端。*/
+    flex-direction: row;
+  }
+  .le {
+    height: 93%;
+    width: 37%;
+    margin: 2% 0% 2% 2%;
+    // border: 1px solid rgb(255, 255, 255);
+  }
+  .ce{
+    height: 93%;
+    width: 37%;
+    margin: 2% 0% 2% 2%;
+    // border: 1px solid rgb(255, 255, 255);
+  }
+  .ri{
+    height: 93%;
+    width: 24%;
+    margin: 2%;
+    // border: 1px solid rgb(255, 255, 255);
+  }
+  .itemHead{
+    width: 100%;
+    height: 10%;
+    // border: 1px solid rgb(255, 255, 255);
+    margin-bottom: 2.5%;
+    background-color: #094F8D;
+    color: #0CB8FE;
+    padding-left: 2%;
+    border-radius: 2px;
+    display: flex;
+    align-items: center;
+  }
+  .item{
+    width: 100%;
+    height: 10%;
+    // border: 1px solid rgb(255, 255, 255);
+    margin-bottom: 2.5%;
+    background-color: #072A54;
+    color: #FEFFFE;
+    padding-left: 2%;
+    border-radius: 2px;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+  }
+  // 左
+  .lee{
+    width: 40%;
+    height: 100%;
+    font-size: 12px;
+    // border: 1px solid rgb(255, 255, 255);
+    color: #0CB8FF;
+    display: flex;
+    align-items: center;
+  }
+  .cee{
+    width: 30%;
+    height: 100%;
+    font-size: 12px;
+    // border: 1px solid rgb(255, 255, 255);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+  .rii{
+    width: 30%;
+    height: 100%;
+    font-size: 12px;
+    // border: 1px solid rgb(255, 255, 255);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+  // 中
+  .leece{
+    width: 33%;
+    height: 100%;
+    font-size: 12px;
+    // border: 1px solid rgb(255, 255, 255);
+    color: #0CB8FF;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+  .ceece{
+    width: 24%;
+    height: 100%;
+    font-size: 12px;
+    // border: 1px solid rgb(255, 255, 255);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+  .ceecee{
+    width: 24%;
+    height: 100%;
+    font-size: 12px;
+    // border: 1px solid rgb(255, 255, 255);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+  // 右
+  .riice{
+    width: 19%;
+    height: 100%;
+    font-size: 12px;
+    // border: 1px solid rgb(255, 255, 255);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+  .leeri{
+    width: 65%;
+    height: 100%;
+    font-size: 12px;
+    // border: 1px solid rgb(255, 255, 255);
+    color: #0CB8FF;
+    display: flex;
+    align-items: center;
+  }
+  .riiri{
+    width: 35%;
+    height: 100%;
+    font-size: 12px;
+    // border: 1px solid rgb(255, 255, 255);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+  // echarts
+  .echarts{
+    width: 100%;
+    height: 15%;
+    margin-top: 5%;
+    // border: 1px solid rgb(255, 255, 255);
+    display: flex;
+  }
 </style>