电机字体大小调整，工况分析完善。

src/views/app_beam_tube_inspection/dataBoardtest.vue

@@ -31,9 +31,14 @@
         </el-col>
         <el-col :span="8">
           <div class="center_center">
-            <div class="title2" style="width: 100%">工况分析</div>
+            <div class="title2" style="width: 100%;margin-left: 255px;padding-top: 0px;">工况分析</div>
             <albox style="margin-left: 420px;margin-top: -38px; color: gray;width:160px;"></albox> <!--算法框-->
-            <div class="title2" style="width: 100%">区域状态：<span style="color: #f3db5c;font-size: 20px">{{work.info}}</span>
+            <div class="title2" style="width: 100%;font-size: 19px;margin-top: -20px;">区域状态：<span style="color: #f3db5c;font-size: 16px">{{work.info}}</span>
+              <sandian style="margin-top: -38px;z-index: 1;"></sandian>
+              <div class="title2"style="color:white;width:  100%;font-size: 19px;z-index: 2;margin-top: -130px;margin-left: 120px;">工况1&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp合理工作区</div>
+              <div class="title2"style="color:white;width:  100%;font-size: 19px;z-index: 2;margin-top: 5px;margin-left: 120px;">工况2&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp工况3&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp工况4</div>
+<!--              <test></test>-->
+<!--              <sandian></sandian>-->
 <!--              <radartu></radartu>-->
 <!--              <RadarChart></RadarChart>-->
             </div>
@@ -267,6 +272,7 @@ import radartu from "@/views/app_beam_tube_inspection/picture/radartu";
 import RadarChart from "@/views/app_beam_tube_inspection/picture/RadarChart";
 import m3u8 from "@/common/m3u8";
 import timeselect from "@/views/app_beam_tube_inspection/tiemselect";
+import sandian from "@/views/app_beam_tube_inspection/picture/sandian";
 export default {
 
   data() {
@@ -277,11 +283,11 @@ export default {
         completionRate: 90,
       },
       work:{
-        info:"带式输送机运行相对稳定，效率处于较高水平",
-        info1:"带式输送机运行相对稳定，效率处于较高水平",
-        info2:"带式输送机轻载，效率处于适中水平",
-        info3:"带式输送机载荷较高，效率处于相对较低水平",
-        info4:"单位煤流载荷量相对较小，效率处于更低水平",
+        info:"合理工作区：皮带负载、效率均处于合理区间，运行状态健康",
+        info1:"工况1：皮带阻力增大，请检修托辊润滑",
+        info2:"工况2：皮带处于轻载状态，检查漏煤口状态",
+        info3:"工况3：皮带效率过低，检查驱动电机状态",
+        info4:"工况4：皮带处于过载状态，注意调整上游生产环节",
 
       },
 
@@ -358,21 +364,27 @@ export default {
   },
   mounted() {
     let interval = setInterval(() => {
-      let x=Math.random();
-      if(x>0.75){
-        this.work.info = this.work.info1;
-      }
-      else if(x>0.5){
+      var x=this.getRandomNumWithDecimals(0, 1.2);
+      var y=this.getRandomNumWithDecimals(0, 1);
+      // var x=0.2;
+      // var y =0.2;
+      if(x<0.8&&y<0.7){
         this.work.info = this.work.info2;
       }
-      else if(x>0.25){
+      else if(x<0.8&&y<=1){
+        this.work.info = this.work.info1;
+      }
+      else if(x<=1.2&&y<=0.7){
         this.work.info = this.work.info3;
+      }
+      else if(x<=1.2&&y<=1){
+
       }
       else{
         this.work.info = this.work.info4;
       }
 
-    }, 3000);
+    }, 1000*60*60*24);
     this.$once("hook:beforeDestroy", () => {
       clearInterval(interval);
     });
@@ -403,7 +415,8 @@ export default {
     radartu,
     RadarChart,
     m3u8,
-    timeselect
+    timeselect,
+    sandian
 
   },
 };
@@ -426,7 +439,7 @@ export default {
 
   height: 40px;
   width: 5%;
-  font-size: 20px;  //20
+  font-size: 18px;  //20
   line-height: 2;
   padding: 5px;
   font-weight: 500;
@@ -439,7 +452,7 @@ export default {
 
   height: 40px;
   width: 5%;
-  font-size: 25px;
+  font-size: 22px;
   line-height: 2;
   padding: 5px;
   font-weight: 500;

src/views/app_beam_tube_inspection/picture/sandian.vue

@@ -0,0 +1,277 @@
+<template>
+  <div class="bubble-chart">
+    <div ref="bubbleChart" class="bubble"></div>
+  </div>
+</template>
+
+
+
+<script>
+export default {
+  name: "BubbleChart",
+  props: {
+    rowData: {
+      default: () => {
+        // return [
+        //     [1000,1000],
+        //   {
+        //     name: "效率",
+        //     value: -30,
+        //   },
+        //   {
+        //     name: "效率",
+        //     value: -38,
+        //   },
+        //   {
+        //     name: "效率",
+        //     value: 44,
+        //   },
+        //   {
+        //     name: "效率",
+        //     value: 50,
+        //   },
+        //   {
+        //     name: "效率",
+        //     value: 35,
+        //   },
+        //   {
+        //     name: "效率",
+        //     value: 30,
+        //   },
+        //   {
+        //     name: "效率",
+        //     value: -25,
+        //   },
+        //   {
+        //     name: "效率",
+        //     value: 20,
+        //   },
+        //   {
+        //     name: "效率",
+        //     value: 12,
+        //   },
+        //   {
+        //     name: "效率",
+        //     value: 15,
+        //   },
+        //   {
+        //     name: "负载",
+        //     value: 60,
+        //   },
+        //   {
+        //     name: "负载",
+        //     value: -15,
+        //   },
+        //   {
+        //     name: "负载",
+        //     value: 30,
+        //   },
+        //   {
+        //     name: "负载",
+        //     value: -21,
+        //   },
+        //   {
+        //     name: "负载",
+        //     value: -22,
+        //   },
+        //   {
+        //     name: "负载",
+        //     value: 23,
+        //   },
+        //   {
+        //     name: "负载",
+        //     value: 8,
+        //   },
+        //   {
+        //     name: "负载",
+        //     value: 56,
+        //   },
+        //   {
+        //     name: "负载",
+        //     value: 31,
+        //   },
+        //   {
+        //     name: "负载",
+        //     value: -3,
+        //   },
+        // ];
+        return [
+
+        ];
+      },
+    },
+    color: {
+      default: () => {
+        return "#50BCD8";
+        // return "#f3db5c"
+      },
+    },
+    legends: {
+      type: Array,
+      default: () => {
+        return ["效率", "负载"];
+      },
+    },
+  },
+  data() {
+    return {
+      chartInstance: null,
+      staffData: [],
+      revenueData: [],
+      dataList: [[0.9,0.8]],
+    };
+  },
+  mounted() {
+    this.initChart();
+  },
+  methods: {
+    // 初始化实例
+    initChart() {
+      //  挂在 DOM
+      this.chartInstance = this.$echarts.init(this.$refs.bubbleChart);
+      //  初始化配置项
+      let option = {
+        grid: {
+          left: "0%",
+          right: "5%",
+          bottom: "3%",
+          containLabel: true,
+        },
+        xAxis: {
+          min: 0,
+          max: 1.6,
+          interval:0.4,
+          name: this.legends[1],
+          // nameLocation:'top',
+          nameTextStyle: {
+            padding: [-20, 65, 0, -25]    // 四个数字分别为上右下左与原位置距离
+          },
+          type: "value",
+          scale: true,
+          axisLabel: {
+            formatter: "{value}",
+          },
+          splitLine: {
+            show: false,
+            lineStyle:{
+              type:'dashed',
+            }
+          },
+          axisLine: {
+            lineStyle: {
+              color: "#BFEBFF",
+            },
+          },
+        },
+        yAxis: {
+          min: 0,
+          max: 1.2,
+          interval:0.3,
+          name: this.legends[0],
+          nameGap:8,
+          type: "value",
+          scale: true,
+          axisLabel: {
+            formatter: "{value}",
+          },
+          splitLine: {
+            show: false,
+            lineStyle:{
+              type:'dashed',
+            }
+          },
+          axisLine: {
+            lineStyle: {
+              color: "#BFEBFF",
+            },
+          },
+        },
+        series: [
+          {
+            encode: { tooltip: [0, 1] },
+            // tooltip:{
+            //   trigger:'item',
+            //   formatter:(params) => {  // params就是数据，这里可以打印一下看看
+            //     // return 出去什么，鼠标移入就显示什么,marker就是提示前面蓝色的圆点
+            //     return `${this.dataList[0]}`
+            //   },},
+            name: '工况分析',
+            data: this.dataList,
+            type: "scatter",
+            // symbolSize: function(data) {
+            //   return (Math.abs(data[1]) + Math.abs(data[0])) / 2;
+            // },
+            symbolSize:20,
+            markLine: {
+              // itemStyle:{
+              //   label:{
+              //     formatter:'cod',
+              //     textStyle:{
+              //       fontSize:16,
+              //       fontWeight:"bolder",
+              //     },
+              //   },
+              // },
+              lineStyle: {
+                type: 'solid'
+              },
+              data: [ { name: '额定负载', xAxis: 0.8 },{ name: '额定负载',xAxis: 1.2 },{ name: '效率',yAxis: 0.7 },{ name: '效率',yAxis: 1 }]
+            },
+            label: {
+              show: false,
+            },
+            itemStyle: {
+              normal: {
+                color: this.color,
+              },
+            },
+          },
+        ],
+        tooltip:{
+          trigger:'item',
+
+        }
+      };
+
+      this.setSeries(option);
+      this.setOption(option);
+    },
+    //  设置series
+    setSeries(option) {
+      this.rowData.forEach((e) => {
+        if (e.name === this.legends[0]) {
+          this.staffData.push(e);
+        } else {
+          this.revenueData.push(e);
+        }
+      });
+      this.staffData.forEach((e, i) => {
+        this.revenueData.forEach((item, index) => {
+          if (i === index) {
+            this.dataList.push([e.value, item.value]);
+          }
+        });
+      });
+    },
+    //  设置图表
+    setOption(option) {
+      this.chartInstance.setOption(option);
+    },
+  },
+};
+</script>
+
+
+
+<style lang="less" scoped>
+.bubble-chart {
+  width: 530px;
+  height: 200px;
+
+  .bubble {
+    width: 100%;
+    height: 100%;
+  }
+}
+</style>
+