Merge remote-tracking branch 'guAn_client/master'

package.json

@@ -10,42 +10,43 @@
     "lint": "vue-cli-service lint"
   },
   "dependencies": {
+    "@antv/data-set": "^0.11.4",
     "@jeecg/antd-online-mini": "3.4.3-beta2",
+    "@tinymce/tinymce-vue": "2.1.0",
+    "@toast-ui/editor": "^2.1.2",
     "ant-design-vue": "^1.7.2",
-    "@antv/data-set": "^0.11.4",
-    "viser-vue": "^2.4.8",
     "axios": "^0.18.0",
+    "china-area-data": "^5.0.1",
+    "clipboard": "^2.0.4",
+    "codemirror": "^5.46.0",
+    "cron-parser": "^2.10.0",
     "dayjs": "^1.8.0",
+    "dom-align": "1.12.0",
+    "echarts": "^5.4.3",
     "enquire.js": "^2.1.6",
     "js-cookie": "^2.2.0",
     "lodash.get": "^4.4.2",
     "lodash.pick": "^4.4.0",
     "md5": "^2.2.1",
     "nprogress": "^0.2.0",
+    "qiankun": "^2.5.1",
+    "tinymce": "5.4.1",
+    "viser-vue": "^2.4.8",
     "vue": "^2.6.10",
+    "vue-area-linkage": "^5.1.0",
     "vue-cropper": "^0.5.4",
     "vue-i18n": "^8.7.0",
     "vue-loader": "^15.7.0",
     "vue-ls": "^3.2.0",
-    "vue-router": "^3.0.1",
-    "vuex": "^3.1.0",
-    "vue-print-nb-jeecg": "^1.0.12",
-    "clipboard": "^2.0.4",
     "vue-photo-preview": "^1.1.3",
+    "vue-print-nb-jeecg": "^1.0.12",
+    "vue-router": "^3.0.1",
     "vue-splitpane": "^1.0.4",
     "vuedraggable": "^2.20.0",
-    "codemirror": "^5.46.0",
-    "@tinymce/tinymce-vue": "2.1.0",
-    "tinymce": "5.4.1",
-    "@toast-ui/editor": "^2.1.2",
-    "vue-area-linkage": "^5.1.0",
-    "china-area-data": "^5.0.1",
-    "dom-align": "1.12.0",
-    "xe-utils": "2.4.8",
+    "vuex": "^3.1.0",
     "vxe-table": "2.9.13",
     "vxe-table-plugin-antd": "1.8.10",
-    "cron-parser": "^2.10.0",
-    "qiankun": "^2.5.1",
+    "xe-utils": "2.4.8",
     "xss": "^1.0.13"
   },
   "devDependencies": {
@@ -55,13 +56,13 @@
     "@vue/cli-service": "^3.3.0",
     "@vue/eslint-config-standard": "^4.0.0",
     "babel-eslint": "7.2.3",
+    "compression-webpack-plugin": "^3.1.0",
     "eslint": "^5.16.0",
     "eslint-plugin-vue": "^5.1.0",
+    "html-webpack-plugin": "^4.2.0",
     "less": "^3.9.0",
     "less-loader": "^4.1.0",
-    "vue-template-compiler": "^2.6.10",
-    "html-webpack-plugin": "^4.2.0",
-    "compression-webpack-plugin": "^3.1.0"
+    "vue-template-compiler": "^2.6.10"
   },
   "eslintConfig": {
     "root": true,
@@ -99,7 +100,10 @@
       "vue/html-closing-bracket-newline": 0,
       "vue/no-parsing-error": 0,
       "no-tabs": 0,
-      "indent": ["off", 2],
+      "indent": [
+        "off",
+        2
+      ],
       "no-console": 0,
       "space-before-function-paren": 0
     }

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>

yarn.lock

@@ -11474,7 +11474,7 @@ vue-photo-preview@^1.1.3:
 
 vue-print-nb-jeecg@^1.0.12:
   version "1.0.12"
-  resolved "https://registry.npmmirror.com/vue-print-nb-jeecg/-/vue-print-nb-jeecg-1.0.12.tgz#975e1dac3da8c9736ac81b82a2b099cafe1bb3df"
+  resolved "https://registry.yarnpkg.com/vue-print-nb-jeecg/-/vue-print-nb-jeecg-1.0.12.tgz#975e1dac3da8c9736ac81b82a2b099cafe1bb3df"
   integrity sha512-jHyWm6/TxB1iU2nHL7upQdHVdxb1SJQ9n3XKeYTaruFdbSphLo1vDtTunS2qVCjupk8lui7FlF5rxxSNr0zjZg==
   dependencies:
     babel-plugin-transform-runtime "^6.23.0"